* { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
        --tb-size-h: 48px; /* taskbar height (top/bottom) */
        --tb-size-v: 56px; /* taskbar width  (left/right) */
        --tb-top:    0px;
        --tb-bottom: var(--tb-size-h);
        --tb-left:   0px;
        --tb-right:  0px;
    }

    body {
        font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
        background: #1e1e1e;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        min-width: 100vw;
        max-height: 100vh;
        max-width: 100vw;
        padding: 20px;
        overflow: hidden;
        position: fixed;
        inset: 0;
    }

    body.window-maximized { padding: 0; }

        .desktop-bg {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: url('pexels.jpg') center center/cover no-repeat;
        z-index: -1;
    }

    .window-container {
        width: 100%; height: 100%;
        display: flex; justify-content: center; align-items: center;
        overflow: hidden;
    }

    /* ── WINDOW ── */
    .window {
        width: min(900px, calc(100vw - 40px));
        height: min(600px, calc(100vh - 40px));
        background: rgba(243, 243, 243, 0.95);
        backdrop-filter: blur(40px);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.2),
                    inset 0 1px 0 rgba(255,255,255,0.5);
        display: flex; flex-direction: column;
        border: 1px solid rgba(255,255,255,0.2);
        animation: windowOpen 0.3s cubic-bezier(0.16,1,0.3,1);
        transform: perspective(1000px) translateZ(0);
        transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
        position: relative;
    }
    .window.maximized {
        width:  calc(100vw - var(--tb-left) - var(--tb-right))  !important;
        height: calc(100vh - var(--tb-top)  - var(--tb-bottom)) !important;
        border-radius: 0;
        position: fixed;
        top:  var(--tb-top)  !important;
        left: var(--tb-left) !important;
        margin: 0;
    }
    .window.minimized {
        opacity: 0; transform: scale(0.9) translateY(100px);
        pointer-events: none;
    }
    .window.closing {
        animation: windowClose 0.3s cubic-bezier(0.16,1,0.3,1) forwards;
    }
    @keyframes windowClose {
        to { opacity: 0; transform: scale(0.9) translateY(20px); }
    }
    @keyframes windowOpen {
        from { opacity: 0; transform: scale(0.95) translateY(10px); }
        to   { opacity: 1; transform: scale(1) translateY(0); }
    }

    /* ── RESIZE HANDLES ── */
    .window-resize-handle {
        position: absolute; z-index: 20; box-sizing: border-box;
    }
    .window-resize-handle.n  { top: 0;    left: 5px;  right: 5px;  height: 5px; cursor: ns-resize;   }
    .window-resize-handle.s  { bottom: 0; left: 5px;  right: 5px;  height: 5px; cursor: ns-resize;   }
    .window-resize-handle.e  { right: 0;  top: 5px;   bottom: 5px; width:  5px; cursor: ew-resize;   }
    .window-resize-handle.w  { left: 0;   top: 5px;   bottom: 5px; width:  5px; cursor: ew-resize;   }
    .window-resize-handle.nw { top: 0;    left: 0;    width: 10px; height: 10px; cursor: nwse-resize; }
    .window-resize-handle.ne { top: 0;    right: 0;   width: 10px; height: 10px; cursor: nesw-resize; }
    .window-resize-handle.sw { bottom: 0; left: 0;    width: 10px; height: 10px; cursor: nesw-resize; }
    .window-resize-handle.se { bottom: 0; right: 0;   width: 10px; height: 10px; cursor: nwse-resize; }
    .window.maximized .window-resize-handle { display: none; }

    /* ── TITLEBAR ── */
    .titlebar {
        height: 48px;
        background: rgba(32,32,32,0.85);
        backdrop-filter: blur(40px);
        display: flex; align-items: center; justify-content: space-between;
        padding: 0 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.05);
        flex-shrink: 0;
    }
    .titlebar-left { display: flex; align-items: center; gap: 12px; }
    .window-icon {
        width: 20px; height: 20px;
        background: linear-gradient(135deg, #0078d4, #1ea7fd);
        border-radius: 4px; display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 12px rgba(0,120,212,0.5), inset 0 1px 0 rgba(255,255,255,0.3),
                    inset 0 -1px 0 rgba(0,0,0,0.2);
    }
    .window-icon::before {
        content: ''; width: 12px; height: 12px;
        background: rgba(255,255,255,0.9); border-radius: 2px;
    }
    .window-title { color: #fff; font-size: 12px; font-weight: 400; letter-spacing: 0.2px; }

    .titlebar-controls { display: flex; gap: 0; margin-right: -8px; }
    .titlebar-button {
        width: 46px; height: 48px; border: none; background: transparent;
        color: #fff; cursor: pointer; display: flex; align-items: center;
        justify-content: center; transition: background-color 0.08s ease;
        font-size: 10px;
    }
    .titlebar-button:hover { background: rgba(255,255,255,0.08); }
    .titlebar-button:active { background: rgba(255,255,255,0.05); }
    .titlebar-button.close:hover { background: #c42b1c; }
    .titlebar-button.close:active { background: #a02314; }

    .minimize-icon { width: 10px; height: 1px; background: currentColor; }
    .maximize-icon {
        width: 10px; height: 10px; border: 1px solid currentColor;
        border-radius: 1px; transition: transform 0.2s ease;
    }
    .window.maximized .maximize-icon { width: 9px; height: 9px; position: relative; }
    .window.maximized .maximize-icon::before {
        content: ''; position: absolute; width: 9px; height: 9px;
        border: 1px solid currentColor; top: -3px; left: 3px;
        background: rgba(32,32,32,0.85);
    }
    .close-icon { position: relative; width: 12px; height: 12px; }
    .close-icon::before, .close-icon::after {
        content: ''; position: absolute; width: 12px; height: 1px;
        background: currentColor; top: 50%; left: 0;
    }
    .close-icon::before { transform: rotate(45deg); }
    .close-icon::after  { transform: rotate(-45deg); }

    /* ── MENUBAR ── */
    .menubar {
        height: 40px; background: #fff;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        display: flex; align-items: stretch;
        padding: 0 8px; position: relative; z-index: 100; flex-shrink: 0;
    }
    .menu-item {
        position: relative; display: flex; align-items: center;
        padding: 0 12px; font-size: 13px; color: #1f1f1f;
        cursor: pointer; transition: background-color 0.08s ease;
        border-radius: 4px; margin: 4px 2px;
        user-select: none; white-space: nowrap;
    }
    .menu-item:hover { background: rgba(0,0,0,0.04); }
    .menu-item.active { background: rgba(0,120,212,0.1); }

    .dropdown-menu {
        position: absolute; top: 100%; left: 0; min-width: 220px;
        background: rgba(249,249,249,0.98); backdrop-filter: blur(40px);
        border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        border: 1px solid rgba(0,0,0,0.08); padding: 4px; margin-top: 4px;
        opacity: 0; visibility: hidden; transform: translateY(-8px);
        transition: all 0.15s cubic-bezier(0.16,1,0.3,1);
        z-index: 1000; max-height: 80vh; overflow-y: auto;
    }
    .menu-item.active .dropdown-menu {
        opacity: 1; visibility: visible; transform: translateY(0);
    }
    .dropdown-item {
        display: flex; align-items: center; padding: 8px 12px;
        font-size: 13px; color: #1f1f1f; cursor: pointer;
        border-radius: 4px; transition: background-color 0.08s ease;
        position: relative; white-space: nowrap;
    }
    .dropdown-item:hover { background: rgba(0,120,212,0.08); }
    .dropdown-item.disabled { color: #a0a0a0; cursor: default; }
    .dropdown-item.disabled:hover { background: transparent; }
    .dropdown-item-icon { width: 16px; margin-right: 12px; text-align: center; }
    .dropdown-item-shortcut {
        margin-left: auto; padding-left: 24px; font-size: 11px; color: #616161;
    }
    .dropdown-separator { height: 1px; background: rgba(0,0,0,0.08); margin: 4px 8px; }
    .submenu-indicator { margin-left: auto; padding-left: 24px; font-size: 10px; color: #616161; }
    .submenu {
        position: absolute; left: 100%; top: -4px; min-width: 200px;
        background: rgba(249,249,249,0.98); backdrop-filter: blur(40px);
        border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        border: 1px solid rgba(0,0,0,0.08); padding: 4px; margin-left: 4px;
        opacity: 0; visibility: hidden; transform: translateX(-8px);
        transition: all 0.15s cubic-bezier(0.16,1,0.3,1);
    }
    .dropdown-item:hover .submenu {
        opacity: 1; visibility: visible; transform: translateX(0);
    }

    /* ── CONTENT ── */
    .window-content {
        flex: 1; padding: 24px;
        background: linear-gradient(to bottom, #f9f9f9 0%, #f3f3f3 100%);
        overflow: auto; min-height: 0;
    }
    .content-header {
        font-size: clamp(20px,4vw,28px); font-weight: 600; color: #1f1f1f;
        margin-bottom: 8px; letter-spacing: -0.3px;
    }
    .content-subheader {
        font-size: clamp(12px,2vw,14px); color: #616161;
        margin-bottom: 20px; font-weight: 400;
    }
    .card {
        background: #fff; border-radius: 8px; padding: clamp(12px,3vw,20px);
        margin-bottom: clamp(8px,2vw,16px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04),
                    inset 0 1px 0 rgba(255,255,255,0.8);
        border: 1px solid rgba(0,0,0,0.06);
        transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
    }
    .card:hover {
        box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 6px 12px rgba(0,0,0,0.08),
                    inset 0 1px 0 rgba(255,255,255,0.9);
        transform: translateY(-4px);
    }
    .card-title { font-size: clamp(14px,2.5vw,16px); font-weight: 600; color: #1f1f1f; margin-bottom: 8px; }
    .card-text  { font-size: clamp(12px,2vw,14px); color: #616161; line-height: 1.6; }

    /* ── STATUS BAR ── */
    .status-bar {
        height: 32px; background: rgba(249,249,249,0.8);
        border-top: 1px solid rgba(0,0,0,0.06);
        display: flex; align-items: center; padding: 0 16px;
        font-size: 12px; color: #616161; flex-shrink: 0;
    }

    /* ── TASKBAR ── */
    .taskbar {
        position: fixed; bottom: 0; left: 0; right: 0; top: auto;
        height: var(--tb-size-h);
        background: rgba(69, 0, 88, 0.338);
        backdrop-filter: blur(40px);
        display: flex; align-items: center; justify-content: flex-start;
        gap: 4px; padding: 0 8px;
        z-index: 10000;
        box-shadow: 0 -2px 16px rgba(0,0,0,0.3);
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    /* ── TASKBAR POSITIONS ── */
    /* top */
    body.taskbar-pos-top .taskbar {
        top: 0; bottom: auto;
        box-shadow: 0 2px 16px rgba(0,0,0,0.3);
    }
    body.taskbar-pos-top .taskbar .taskbar-menu  { bottom: auto; top: calc(100% + 4px); transform: translateY(-8px); }
    body.taskbar-pos-top .taskbar .taskbar-menu.open { transform: translateY(0); }
    body.taskbar-pos-top .taskbar .taskbar-windows-menu { bottom: auto; top: calc(100% + 4px); transform: translateY(-8px); }
    body.taskbar-pos-top .taskbar .taskbar-windows-menu.open { transform: translateY(0); }

    /* left */
    body.taskbar-pos-left .taskbar {
        top: 0; bottom: 0; left: 0; right: auto;
        width: var(--tb-size-v); height: 100vh;
        flex-direction: column; justify-content: flex-start; align-items: center;
        padding: 8px 0; gap: 2px;
        box-shadow: 2px 0 16px rgba(0,0,0,0.3);
    }
    body.taskbar-pos-left .taskbar .taskbar-sep  { width: 32px; height: 1px; margin: 2px 0; }
    body.taskbar-pos-left .taskbar .taskbar-start { margin-right: 0; margin-bottom: 2px; }
    body.taskbar-pos-left .taskbar .taskbar-item  { flex-direction: column; gap: 2px; padding: 8px 4px; max-width: unset; width: 44px; justify-content: center; }
    body.taskbar-pos-left .taskbar .taskbar-item-title { display: none !important; }
    body.taskbar-pos-left .taskbar .taskbar-right { position: relative; right: auto; margin-top: auto; flex-direction: column; align-items: center; gap: 2px; }
    body.taskbar-pos-left .taskbar .taskbar-clock { writing-mode: horizontal-tb; font-size: 9px; padding: 4px 2px; text-align: center; overflow: hidden; max-width: 100%; }
    body.taskbar-pos-left .taskbar .taskbar-menu  { bottom: auto; top: 0; left: calc(100% + 4px); transform: translateX(-8px); }
    body.taskbar-pos-left .taskbar .taskbar-menu.open { transform: translateX(0); }
    body.taskbar-pos-left .taskbar .taskbar-windows-menu { bottom: 0; right: auto; left: calc(100% + 4px); }

    /* right */
    body.taskbar-pos-right .taskbar {
        top: 0; bottom: 0; right: 0; left: auto;
        width: var(--tb-size-v); height: 100vh;
        flex-direction: column; justify-content: flex-start; align-items: center;
        padding: 8px 0; gap: 2px;
        box-shadow: -2px 0 16px rgba(0,0,0,0.3);
    }
    body.taskbar-pos-right .taskbar .taskbar-sep  { width: 32px; height: 1px; margin: 2px 0; }
    body.taskbar-pos-right .taskbar .taskbar-start { margin-right: 0; margin-bottom: 2px; }
    body.taskbar-pos-right .taskbar .taskbar-item  { flex-direction: column; gap: 2px; padding: 8px 4px; max-width: unset; width: 44px; justify-content: center; }
    body.taskbar-pos-right .taskbar .taskbar-item-title { display: none !important; }
    body.taskbar-pos-right .taskbar .taskbar-right { position: relative; right: auto; margin-top: auto; flex-direction: column; align-items: center; gap: 2px; }
    body.taskbar-pos-right .taskbar .taskbar-clock { writing-mode: horizontal-tb; font-size: 9px; padding: 4px 2px; text-align: center; overflow: hidden; max-width: 100%; }
    body.taskbar-pos-right .taskbar .taskbar-menu  { bottom: auto; top: 0; right: calc(100% + 4px); left: auto; transform: translateX(8px); }
    body.taskbar-pos-right .taskbar .taskbar-menu.open { transform: translateX(0); }
    body.taskbar-pos-right .taskbar .taskbar-windows-menu { bottom: 0; left: auto; right: calc(100% + 4px); }

    /* ── TASKBAR AUTO-HIDE ── */
    .taskbar.autohide { opacity: 0; pointer-events: none; }
    .taskbar.autohide:hover,
    .taskbar.autohide:focus-within { opacity: 1; pointer-events: auto; }

    /* bottom autohide strip */
    .taskbar[data-pos="bottom"].autohide { transform: translateY(calc(100% - 4px)); opacity: 1; pointer-events: auto; }
    .taskbar[data-pos="bottom"].autohide:hover,
    .taskbar[data-pos="bottom"].autohide:focus-within { transform: translateY(0); }

    /* top autohide strip */
    .taskbar[data-pos="top"].autohide { transform: translateY(calc(-100% + 4px)); opacity: 1; pointer-events: auto; }
    .taskbar[data-pos="top"].autohide:hover,
    .taskbar[data-pos="top"].autohide:focus-within { transform: translateY(0); }

    /* left autohide strip */
    .taskbar[data-pos="left"].autohide { transform: translateX(calc(-100% + 4px)); opacity: 1; pointer-events: auto; }
    .taskbar[data-pos="left"].autohide:hover,
    .taskbar[data-pos="left"].autohide:focus-within { transform: translateX(0); }

    /* right autohide strip */
    .taskbar[data-pos="right"].autohide { transform: translateX(calc(100% - 4px)); opacity: 1; pointer-events: auto; }
    .taskbar[data-pos="right"].autohide:hover,
    .taskbar[data-pos="right"].autohide:focus-within { transform: translateX(0); }

    /* touch-triggered autohide show (all positions) */
    .taskbar.autohide.autohide-show {
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* przycisk Start */
    .taskbar-start {
        width: 40px; height: 36px;
        background: transparent; border: none; cursor: pointer;
        border-radius: 6px; display: flex; align-items: center;
        justify-content: center; transition: background 0.15s ease;
        margin-right: 4px; flex-shrink: 0;
    }
    .taskbar-start:hover { background: rgba(255,255,255,0.12); }
    .taskbar-start-icon {
        width: 18px; height: 18px;
        display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    }
    .taskbar-start-icon span {
        background: #fff; border-radius: 1px; display: block;
    }

    /* separator */
    .taskbar-sep {
        width: 1px; height: 24px;
        background: rgba(255,255,255,0.12); margin: 0 4px; flex-shrink: 0;
    }

    /* okna zminimalizowane */
    .taskbar-item {
        display: flex; align-items: center; gap: 8px;
        padding: 6px 12px;
        background: rgba(255,255,255,0.08);
        border-radius: 6px; cursor: pointer;
        transition: all 0.2s ease; user-select: none;
        position: relative; max-width: 180px;
    }
    .taskbar-item:hover { background: rgba(255,255,255,0.15); transform: translateY(-2px); }
    .taskbar-item:active { transform: translateY(0); }
    .taskbar-item-icon {
        width: 20px; height: 20px; flex-shrink: 0;
        background: linear-gradient(135deg, #0078d4, #1ea7fd);
        border-radius: 4px; display: flex; align-items: center; justify-content: center;
        box-shadow: 0 2px 8px rgba(0,120,212,0.4); font-size: 12px;
    }
    .taskbar-item-icon::before {
        content: ''; width: 12px; height: 12px;
        background: rgba(255,255,255,0.9); border-radius: 2px;
    }
    .taskbar-item-icon.custom::before { display: none; }
    .taskbar-item-title {
        color: #fff; font-size: 12px; font-weight: 400;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    /* menu taskbara (prawy przycisk / rozwijane) */
    .taskbar-menu {
        position: absolute; bottom: 56px; left: 0;
        min-width: 160px;
         background: rgb(8, 1, 92);
        /* backdrop-filter: blur(20px); */
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.08);
        padding: 4px; z-index: 20000;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0);
        opacity: 0; visibility: hidden; transform: translateY(8px);
        transition: all 0.15s cubic-bezier(0.16,1,0.3,1);

    }
    .taskbar-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
    .taskbar-menu-item {
        display: flex; align-items: center; gap: 10px;
        padding: 8px 12px; border-radius: 4px; cursor: pointer;
        font-size: 13px; color: #f0f0f0;
        transition: background 0.08s ease;
    }
    .taskbar-menu-item:hover { background: rgba(255,255,255,0.1); }
    .taskbar-menu-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 8px; }

    /* menu Start */
    .taskbar-start-menu {
        position: absolute; bottom: calc(100% + 8px); left: 0;
        min-width: 280px;
        background: rgba(32,32,32,0.97);
        backdrop-filter: blur(40px);
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.12);
        padding: 8px; z-index: 20000;
        box-shadow: 0 16px 48px rgba(0,0,0,0.5);
        opacity: 0; visibility: hidden; transform: translateY(8px);
        transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
    }
    .taskbar-start-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }

    body.taskbar-pos-top .taskbar .taskbar-start-menu {
        bottom: auto; top: calc(100% + 8px); transform: translateY(-8px);
    }
    body.taskbar-pos-top .taskbar .taskbar-start-menu.open { transform: translateY(0); }

    body.taskbar-pos-left .taskbar .taskbar-start-menu {
        bottom: auto; top: 0; left: calc(100% + 8px); transform: translateX(-8px);
    }
    body.taskbar-pos-left .taskbar .taskbar-start-menu.open { transform: translateX(0); }

    body.taskbar-pos-right .taskbar .taskbar-start-menu {
        bottom: auto; top: 0; left: auto; right: calc(100% + 8px); transform: translateX(8px);
    }
    body.taskbar-pos-right .taskbar .taskbar-start-menu.open { transform: translateX(0); }

    .taskbar-start-menu-item {
        display: flex; align-items: center; gap: 12px;
        padding: 10px 14px; border-radius: 6px; cursor: pointer;
        font-size: 13px; color: #f0f0f0;
        transition: background 0.08s ease;
    }
    .taskbar-start-menu-item:hover { background: rgba(255,255,255,0.1); }
    .taskbar-start-menu-item.disabled { color: #a0a0a0; cursor: default; }
    .taskbar-start-menu-item.disabled:hover { background: transparent; }
    .taskbar-start-menu-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 8px; }
    .taskbar-start-menu-icon { width: 24px; text-align: center; font-size: 16px; flex-shrink: 0; }
    .taskbar-start-menu-label { flex: 1; }

    /* prawy obszar paska (ikona okien + zegar) */
    .taskbar-right {
        position: absolute; right: 8px;
        display: flex; align-items: center; gap: 4px;
    }

    /* przycisk tray z listą okien */
    .taskbar-tray-btn {
        width: 36px; height: 36px;
        background: transparent; border: none; cursor: pointer;
        border-radius: 6px; display: flex; align-items: center;
        justify-content: center; transition: background 0.15s ease;
        color: #fff; font-size: 18px; position: relative;
        flex-shrink: 0;
    }
    .taskbar-tray-btn:hover { background: rgba(255,255,255,0.12); }

    /* dropdown z listą okien */
    .taskbar-windows-menu {
        position: absolute; bottom: 46px; right: 0;
        min-width: 220px;
        background: rgba(105, 2, 153, 0.874);
        backdrop-filter: blur(20px);
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.08);
        padding: 4px; z-index: 20000;
        box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        opacity: 0; visibility: hidden; transform: translateY(8px);
        transition: all 0.15s cubic-bezier(0.16,1,0.3,1);
    }
    .taskbar-windows-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
    .taskbar-windows-menu-item {
        display: flex; align-items: center; gap: 10px;
        padding: 8px 12px; border-radius: 4px; cursor: pointer;
        font-size: 13px; color: #f0f0f0;
        transition: background 0.08s ease;
    }
    .taskbar-windows-menu-item:hover { background: rgba(255,255,255,0.1); }
    .taskbar-windows-menu-item.minimized { opacity: 0.65; }
    .taskbar-windows-menu-empty {
        padding: 8px 12px; font-size: 13px; color: rgba(255,255,255,0.45);
    }

    /* zegar */
    .taskbar-clock {
        color: #fff; font-size: 11px; text-align: right;
        line-height: 1.4; padding: 4px 8px; border-radius: 4px;
        cursor: default; user-select: none; white-space: nowrap;
    }
    .taskbar-clock:hover { background: rgba(255,255,255,0.08); }

    /* scrollbar */
    ::-webkit-scrollbar { width: 12px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2); border-radius: 6px;
        border: 3px solid transparent; background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); background-clip: padding-box; }

    /* ── HAMBURGER BUTTON (hidden on desktop) ── */
    .menubar-hamburger {
        display: none;
        width: 36px; height: 28px;
        background: transparent; border: none; cursor: pointer;
        border-radius: 4px; align-items: center; justify-content: center;
        font-size: 18px; color: #1f1f1f; line-height: 1;
        transition: background 0.08s ease;
        margin: 4px 2px; flex-shrink: 0;
    }
    .menubar-hamburger:hover { background: rgba(0,0,0,0.06); }

    /* ── MOBILE MENU OVERLAY (bottom sheet) ── */
    .mobile-menu-overlay {
        position: absolute; inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 500;
        opacity: 0; visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        border-radius: inherit;
        overflow: hidden;
    }
    .mobile-menu-overlay.open { opacity: 1; visibility: visible; }

    .mobile-menu-sheet {
        position: absolute; left: 0; right: 0; top: 0;
        max-height: 80%;
        background: rgba(249,249,249,0.98);
        backdrop-filter: blur(40px);
        border-radius: 0 0 12px 12px;
        overflow: hidden;
        transform: translateY(-100%);
        transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
        display: flex; flex-direction: column;
    }
    .mobile-menu-overlay.open .mobile-menu-sheet { transform: translateY(0); }

    .mobile-sheet-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        font-size: 14px; font-weight: 600; color: #1f1f1f;
        flex-shrink: 0;
    }
    .mobile-sheet-close {
        width: 32px; height: 32px; border: none; background: transparent;
        cursor: pointer; border-radius: 50%; display: flex;
        align-items: center; justify-content: center;
        font-size: 14px; color: #616161;
        transition: background 0.08s ease;
    }
    .mobile-sheet-close:hover { background: rgba(0,0,0,0.06); }

    .mobile-sheet-items { overflow-y: auto; flex: 1; padding: 8px; }

    .mobile-sheet-section { margin-bottom: 2px; }
    .mobile-sheet-section-header {
        padding: 8px 12px; font-size: 12px; font-weight: 600;
        color: #616161; text-transform: uppercase; letter-spacing: 0.5px;
        cursor: pointer; border-radius: 4px;
        display: flex; align-items: center; justify-content: space-between;
        transition: background 0.08s ease; user-select: none;
    }
    .mobile-sheet-section-header:hover { background: rgba(0,0,0,0.04); }
    .mobile-sheet-section-arrow { font-size: 10px; transition: transform 0.2s ease; }
    .mobile-sheet-section.collapsed .mobile-sheet-section-arrow { transform: rotate(-90deg); }
    .mobile-sheet-section-body { padding: 2px 0; }
    .mobile-sheet-section.collapsed .mobile-sheet-section-body { display: none; }

    .mobile-sheet-item {
        display: flex; align-items: center;
        padding: 10px 12px; font-size: 14px; color: #1f1f1f;
        cursor: pointer; border-radius: 4px;
        transition: background 0.08s ease; gap: 12px;
    }
    .mobile-sheet-item:hover { background: rgba(0,120,212,0.08); }
    .mobile-sheet-item.disabled { color: #a0a0a0; cursor: default; }
    .mobile-sheet-item.disabled:hover { background: transparent; }
    .mobile-sheet-item-indent { padding-left: 28px; }
    .mobile-sheet-item-icon { width: 20px; text-align: center; flex-shrink: 0; }
    .mobile-sheet-item-label { flex: 1; }
    .mobile-sheet-item-shortcut { font-size: 11px; color: #616161; white-space: nowrap; }
    .mobile-sheet-separator { height: 1px; background: rgba(0,0,0,0.08); margin: 4px 12px; }
    .mobile-sheet-submenu-label { font-size: 11px; color: #888; font-style: italic; }

    /* responsive */
    @media (max-height: 700px) {
        .window:not(.maximized) { height: calc(100vh - 40px); }
        .window-content { padding: 16px; }
        .content-header { margin-bottom: 4px; }
        .content-subheader { margin-bottom: 16px; }
    }
    @media (max-width: 768px) {
        body { padding: 0; }
        .titlebar-button.maximize { display: none; }
        .menu-item { display: none; }
        .menubar-hamburger { display: flex; }
        .menubar { overflow: visible; }
        .titlebar { height: 44px; padding: 0 12px; }
        .titlebar-button { width: 44px; height: 44px; }
    }
    @media (max-width: 480px) {
        .taskbar { height: var(--tb-size-h); }
        .taskbar-item { padding: 4px 8px; }
        .taskbar-item-title { display: none; }
    }

    /* ── DESKTOP ICONS ── */
    .desktop-icons {
        position: fixed; inset: 0;
        z-index: 2; pointer-events: none;
    }

    .desktop-icon {
        position: absolute;
        width: 76px;
        display: flex; flex-direction: column; align-items: center;
        gap: 4px; padding: 6px 4px;
        border-radius: 6px; cursor: pointer;
        user-select: none; pointer-events: auto;
        transition: background 0.12s ease;
    }
    .desktop-icon:hover   { background: rgba(255,255,255,0.15); }
    .desktop-icon.selected { background: rgba(0,120,212,0.35); }
    .desktop-icon.dragging { opacity: 0.8; z-index: 9999; cursor: grabbing; }

    .desktop-icon-img {
        width: 48px; height: 48px; font-size: 36px;
        display: flex; align-items: center; justify-content: center;
        pointer-events: none; line-height: 1;
    }

    .desktop-icon-label {
        font-size: 12px; color: #fff; text-align: center;
        line-height: 1.3; max-width: 72px;
        overflow: hidden; display: -webkit-box;
        -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 6px rgba(0,0,0,0.55);
        word-break: break-word; pointer-events: none;
    }

    /* Desktop icon context/folder menu */
    .desktop-icon-menu {
        position: fixed;
        background: rgba(30,30,30,0.97); backdrop-filter: blur(40px);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 8px; padding: 4px;
        min-width: 170px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
        z-index: 30000;
        animation: menuFadeIn 0.1s ease;
    }
    @keyframes menuFadeIn {
        from { opacity: 0; transform: scale(0.96); }
        to   { opacity: 1; transform: scale(1); }
    }
    .desktop-icon-menu-item {
        display: flex; align-items: center; gap: 8px;
        padding: 7px 12px; font-size: 13px;
        color: rgba(255,255,255,0.92);
        cursor: pointer; border-radius: 5px;
        transition: background 0.08s ease; white-space: nowrap;
    }
    .desktop-icon-menu-item:hover { background: rgba(255,255,255,0.1); }
    .desktop-icon-menu-item.disabled { color: rgba(255,255,255,0.4); cursor: default; }
    .desktop-icon-menu-item.disabled:hover { background: transparent; }
    .desktop-icon-menu-item-icon {
        width: 18px; text-align: center; flex-shrink: 0; font-size: 14px;
    }
    .desktop-icon-menu-sep {
        height: 1px; background: rgba(255,255,255,0.1); margin: 3px 8px;
    }

    @media (max-width: 768px) {
        .desktop-icon { width: 68px; }
        .desktop-icon-img { width: 40px; height: 40px; font-size: 30px; }
        .desktop-icon-label { font-size: 11px; max-width: 64px; }
    }

    /* ContextMenuManager – globalne menu kontekstowe */
    .context-menu {
        position: fixed;
        background: rgba(30,30,30,0.97); backdrop-filter: blur(40px);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 8px; padding: 4px;
        min-width: 170px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
        z-index: 40000;
        animation: menuFadeIn 0.1s ease;
        user-select: none;
    }
    .context-menu-item {
        display: flex; align-items: center; gap: 8px;
        padding: 7px 12px; font-size: 13px;
        color: rgba(255,255,255,0.92);
        cursor: pointer; border-radius: 5px;
        transition: background 0.08s ease; white-space: nowrap;
    }
    .context-menu-item:hover { background: rgba(255,255,255,0.1); }
    .context-menu-item.disabled { color: rgba(255,255,255,0.4); cursor: default; }
    .context-menu-item.disabled:hover { background: transparent; }
    .context-menu-item-icon {
        width: 18px; text-align: center; flex-shrink: 0; font-size: 14px;
    }
    .context-menu-item-label { flex: 1; }
    .context-menu-sep {
        height: 1px; background: rgba(255,255,255,0.1); margin: 3px 8px;
    }

    /* ── SYS FORMS (logowanie / wylogowanie) ── */
    .sys-form {
        display: flex; flex-direction: column; gap: 1em; min-width: 220px;
    }
    .sys-form-input {
        padding: 0.5em; border-radius: 4px; border: 1px solid #ccc;
        font-size: 14px; outline: none; transition: border-color 0.15s ease;
    }
    .sys-form-input:focus { border-color: #1976d2; }
    .sys-form-btn {
        flex: 1; padding: 0.5em; border-radius: 4px;
        background: #1976d2; color: #fff; border: none;
        cursor: pointer; font-size: 14px;
        transition: background 0.15s ease;
    }
    .sys-form-btn:hover { background: #1565c0; }
    .sys-form-btn--danger { background: #d32f2f; }
    .sys-form-btn--danger:hover { background: #b71c1c; }
    .sys-form-row {
        display: flex; gap: 1em; width: 100%;
    }

    /* ── NOTEPAD TOOL ── */
    .notepad-editor {
        width: 100%;
        height: calc(100vh - 120px);
        min-height: 300px;
        display: flex;
        flex-direction: column;
    }
    .notepad-textarea {
        flex: 1;
        width: 100%;
        height: 100%;
        resize: none;
        border: none;
        outline: none;
        padding: 16px;
        box-sizing: border-box;
        font-size: 15px;
        line-height: 1.6;
        font-family: 'Segoe UI', Arial, sans-serif;
        background: #fff;
        margin: 0;
        display: block;
    }