:root {
    --bg: #0c0c0c;
    --terminal: #0c0c0c;
    --titlebar: #202020;

    --text: #cccccc;
    --bright: #ffffff;
    --dim: #777777;

    --green: #65d46e;
    --yellow: #f0c674;
    --purple: #c792ea;
    --cyan: #70d7ff;
    --red: #ff6b6b;
}

/* =========================================================
   BASE
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 25px;
    padding-bottom: 78px;

    background:
        radial-gradient(
            circle at center,
            #171717,
            #050505 75%
        );

    font-family:
        Consolas,
        "Courier New",
        monospace;

    color: var(--text);

    overflow: hidden;
}


/* =========================================================
   BACKGROUND
========================================================= */

.background-grid {
    position: fixed;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.015) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.015) 1px,
            transparent 1px
        );

    background-size: 30px 30px;
}


/* =========================================================
   TERMINAL WINDOW
========================================================= */

.window {
    position: relative;

    width: min(
        950px,
        calc(100vw - 30px)
    );

    height: min(
        720px,
        calc(100vh - 40px)
    );

    display: flex;
    flex-direction: column;

    background: var(--terminal);

    border:
        1px solid #333;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,0.85);

    overflow: hidden;

    animation:
        windowAppear
        0.5s ease;
}

@keyframes windowAppear {

    from {
        opacity: 0;

        transform:
            translateY(15px)
            scale(0.985);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   WINDOWS TITLEBAR
========================================================= */

.titlebar {
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;

    background:
        var(--titlebar);

    user-select: none;
}

.terminal-icon {
    width: 42px;

    text-align: center;

    color: #eee;

    font-family: Consolas, monospace;

    font-size: 12px;
}

.window-title {
    flex: 1;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 12px;

    color: #dddddd;
}

.window-controls {
    height: 100%;

    display: flex;
}

.window-control {
    width: 46px;

    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 13px;

    color: #ddd;

    transition:
        background 0.15s;
}

.window-control:hover {
    background:
        rgba(255,255,255,0.09);
}

.window-control.close:hover {
    background:
        #c42b1c;

    color: white;
}


/* =========================================================
   TERMINAL CONTENT
========================================================= */

.terminal {
    flex: 1;

    overflow-y: auto;

    padding:
        18px 20px 28px;

    font-size: 15px;

    line-height: 1.5;

    scrollbar-width: thin;

    scrollbar-color:
        #444 #111;
}

.terminal::-webkit-scrollbar {
    width: 9px;
}

.terminal::-webkit-scrollbar-track {
    background: #111;
}

.terminal::-webkit-scrollbar-thumb {
    background: #444;
}


/* =========================================================
   TEXT
========================================================= */

.line {
    white-space: pre-wrap;

    word-break: break-word;

    min-height: 1.5em;
}

.boot {
    color: var(--text);
}

.dim {
    color: var(--dim);
}

.success {
    color: var(--green);
}

.warning {
    color: var(--yellow);
}

.purple {
    color: var(--purple);
}

.cyan {
    color: var(--cyan);
}

.error {
    color: var(--red);
}


/* =========================================================
   PROMPT
========================================================= */

.prompt-line {
    display: flex;

    align-items: flex-start;

    min-height: 1.5em;
}

.prompt-prefix {
    flex-shrink: 0;

    color: var(--text);
}

.command-input {
    display: inline;

    outline: none;

    color: var(--bright);

    caret-color: #cccccc;

    white-space: pre-wrap;

    word-break: break-word;

    min-width: 1px;
}

.command-input:empty::before {
    content: attr(data-placeholder);

    color: #555;
}

/* =========================================================
   LOADING
========================================================= */

.loading-symbol {
    display: inline-block;

    width: 12px;

    color: var(--cyan);
}


/* =========================================================
   GLITCH
========================================================= */

.window.glitch {
    animation:
        glitchAnimation
        0.12s linear 3;
}

@keyframes glitchAnimation {

    0% {
        transform:
            translate(0);
    }

    25% {
        transform:
            translate(-2px, 1px);
    }

    50% {
        transform:
            translate(2px, -1px);
    }

    75% {
        transform:
            translate(-1px, -1px);
    }

    100% {
        transform:
            translate(0);
    }

}


/* =========================================================
   FLASH
========================================================= */

.flash {
    position: fixed;

    inset: 0;

    z-index: 100;

    pointer-events: none;

    opacity: 0;

    background:
        rgba(190,220,255,0.12);
}

.flash.active {
    animation:
        terminalFlash
        0.35s ease;
}

@keyframes terminalFlash {

    0% {
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }

}


/* =========================================================
   SCANLINES
========================================================= */

.scanlines {
    position: fixed;

    inset: 0;

    z-index: 50;

    pointer-events: none;

    opacity: 0.06;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.04),
            rgba(255,255,255,0.04) 1px,
            transparent 1px,
            transparent 3px
        );
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    body {
        padding: 0;
    }

    .window {
        width: 100vw;
        height: 100vh;

        border: none;
    }

    .terminal {
        padding:
            14px;

        font-size:
            13px;
    }

    .taskbar { height: 50px; padding: 4px 8px; }
    .taskbar-button { width: 42px; height: 40px; }
    .taskbar-right { right: 6px; }
    .taskbar-tray { display: none; }
    .taskbar-clock { min-width: 64px; font-size: 10px; }
    .window.maximized { bottom: 50px; }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}

.window-control {
    width: 46px;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: #dddddd;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 13px;

    cursor: pointer;

    box-shadow: none;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.window-control:hover {
    background:
        rgba(255,255,255,0.09);
}

.window-control.close:hover {
    background:
        #c42b1c;

    color: white;
}

.window-control:active {
    background:
        rgba(255,255,255,0.15);
}

.window-control.close:active {
    background:
        #a82418;
}

/* =========================================================
   WINDOW STATES
========================================================= */

.window.minimized {
    display: none;
}

.window.maximized {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 54px !important;
    width: 100vw !important;
    height: auto !important;
    max-width: none;
    max-height: none;
    border: none;
    transform: none !important;
    z-index: 1000;
}

/* =========================================================
   WINDOWS TASKBAR
========================================================= */

.taskbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 54px;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: rgba(24, 24, 24, 0.94);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 -10px 35px rgba(0,0,0,0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    font-family: "Segoe UI", Arial, sans-serif;
    user-select: none;
}

.taskbar-center {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
}

.taskbar-button {
    position: relative;
    width: 44px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #f2f2f2;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.16s ease, transform 0.16s ease;
}

.taskbar-button:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-1px);
}

.taskbar-button:active {
    transform: translateY(0) scale(0.95);
}

.taskbar-button::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 3px;
    border-radius: 100px;
    background: #76b9ed;
    transform: translateX(-50%);
    transition: width 0.18s ease;
}

.taskbar-button.running::after { width: 16px; }
.taskbar-button.active { background: rgba(255,255,255,0.10); }
.taskbar-button.active::after { width: 24px; }

.windows-logo {
    width: 19px;
    height: 19px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
}

.windows-logo span { display: block; background: #d8e9f7; }

.taskbar-terminal-icon {
    width: 28px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #0c0c0c;
    border: 1px solid #505050;
    color: #f4f4f4;
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

.taskbar-right {
    position: absolute;
    right: 10px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.taskbar-tray {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e8e8e8;
    font-size: 12px;
}

.tray-chevron { font-size: 11px; color: #cccccc; }

.tray-network { width: 16px; height: 12px; position: relative; }
.tray-network::before,
.tray-network::after {
    content: "";
    position: absolute;
    left: 50%;
    border: 1.5px solid #dddddd;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    transform: translateX(-50%);
}
.tray-network::before { width: 14px; height: 10px; top: 2px; }
.tray-network::after { width: 7px; height: 5px; top: 6px; }

.taskbar-clock {
    min-width: 74px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
    color: #f0f0f0;
    font-size: 11px;
}

.taskbar-show-desktop {
    width: 5px;
    height: 100%;
    margin-left: 2px;
    border-left: 1px solid rgba(255,255,255,0.16);
    cursor: pointer;
}

.taskbar-tooltip {
    position: absolute;
    left: 50%;
    bottom: 52px;
    transform: translateX(-50%) translateY(5px);
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    background: rgba(28,28,28,0.98);
    color: #f5f5f5;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.taskbar-button:hover .taskbar-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.window.window-animating {
    pointer-events: none;
    will-change: transform, opacity;
}

/* =========================================================
   START MENU
========================================================= */

.start-menu {
    position: fixed;

    left: 50%;
    bottom: 64px;

    z-index: 6000;

    width: min(540px, calc(100vw - 24px));
    max-height: min(690px, calc(100vh - 90px));

    padding: 16px;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,0.12);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(35,35,35,0.96),
            rgba(22,22,22,0.96)
        );

    box-shadow:
        0 30px 90px rgba(0,0,0,0.62),
        0 0 0 1px rgba(255,255,255,0.025) inset;

    backdrop-filter:
        blur(28px) saturate(1.15);

    -webkit-backdrop-filter:
        blur(28px) saturate(1.15);

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    opacity: 0;
    visibility: hidden;

    transform:
        translateX(-50%)
        translateY(22px)
        scale(0.955);

    transform-origin:
        50% 100%;

    transition:
        opacity 0.18s ease,
        transform 0.24s cubic-bezier(.18,.89,.32,1.18),
        visibility 0.18s ease;
}

.start-menu::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(118,185,237,0.10),
            transparent 38%
        );
}

.start-menu.open {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0)
        scale(1);
}

.start-menu.open .start-app {
    animation:
        startItemIn
        0.34s
        cubic-bezier(.18,.89,.32,1.18)
        both;
}

.start-menu.open .start-app:nth-child(1) { animation-delay: 0.02s; }
.start-menu.open .start-app:nth-child(2) { animation-delay: 0.05s; }
.start-menu.open .start-app:nth-child(3) { animation-delay: 0.08s; }
.start-menu.open .start-app:nth-child(4) { animation-delay: 0.11s; }
.start-menu.open .start-app:nth-child(5) { animation-delay: 0.14s; }
.start-menu.open .start-app:nth-child(6) { animation-delay: 0.17s; }
.start-menu.open .start-app:nth-child(7) { animation-delay: 0.20s; }
.start-menu.open .start-app:nth-child(8) { animation-delay: 0.23s; }

@keyframes startItemIn {
    from {
        opacity: 0;
        transform:
            translateY(10px)
            scale(0.92);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

.start-search-wrap {
    position: relative;

    margin-bottom: 14px;
}

.start-search-icon {
    position: absolute;

    left: 13px;
    top: 50%;

    transform:
        translateY(-50%);

    color:
        #9aa1a7;

    font-size:
        14px;

    pointer-events: none;
}

.start-search {
    width: 100%;

    padding:
        11px 12px 11px 38px;

    border:
        1px solid rgba(255,255,255,0.11);

    border-bottom-color:
        rgba(118,185,237,0.58);

    border-radius: 7px;

    background:
        rgba(10,10,10,0.74);

    color:
        #eeeeee;

    outline: none;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 13px;

    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
}

.start-search:focus {
    background:
        rgba(12,12,12,0.92);

    border-color:
        rgba(118,185,237,0.72);

    box-shadow:
        0 0 0 3px rgba(118,185,237,0.08);
}

.start-search::placeholder {
    color: #888888;
}

.start-section-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin:
        4px 4px 9px;
}

.start-heading {
    color:
        #e0e0e0;

    font-size: 12px;

    font-weight: 600;
}

.start-all-button {
    padding:
        5px 9px;

    border:
        0;
    border-radius: 5px;

    background:
        rgba(255,255,255,0.05);

    color:
        #d6d6d6;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        10px;

    cursor: pointer;

    transition:
        background 0.14s ease,
        transform 0.14s ease;
}

.start-all-button:hover {
    background:
        rgba(255,255,255,0.09);
}

.start-all-button:active {
    transform:
        scale(0.96);
}

.start-apps {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 7px;
}

.start-app {
    position: relative;

    min-height: 78px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 10px 6px;

    border: 0;
    border-radius: 8px;

    background:
        transparent;

    color:
        #eeeeee;

    cursor: pointer;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 11px;

    text-align: center;

    transition:
        background 0.14s ease,
        transform 0.14s ease,
        box-shadow 0.14s ease;
}

.start-app::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    opacity: 0;

    background:
        radial-gradient(
            circle at var(--mx, 50%) var(--my, 50%),
            rgba(255,255,255,0.10),
            transparent 48%
        );

    transition:
        opacity 0.18s ease;
}

.start-app:hover {
    background:
        rgba(255,255,255,0.075);

    transform:
        translateY(-2px);
}

.start-app:hover::before {
    opacity: 1;
}

.start-app:active {
    transform:
        translateY(0)
        scale(0.94);
}

.start-app-icon {
    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            #2e2e2e,
            #141414
        );

    border:
        1px solid rgba(255,255,255,0.11);

    box-shadow:
        0 5px 14px rgba(0,0,0,0.28);

    font-size: 19px;

    transition:
        transform 0.18s cubic-bezier(.18,.89,.32,1.25),
        box-shadow 0.18s ease;
}

.start-app:hover .start-app-icon {
    transform:
        scale(1.11)
        rotate(-2deg);

    box-shadow:
        0 8px 20px rgba(0,0,0,0.34);
}

.start-recommended {
    margin-top:
        15px;
}

.recommended-list {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        6px 8px;
}

.recommended-item {
    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        8px;

    border-radius:
        7px;

    cursor: pointer;

    transition:
        background 0.14s ease,
        transform 0.14s ease;
}

.recommended-item:hover {
    background:
        rgba(255,255,255,0.065);

    transform:
        translateX(2px);
}

.recommended-icon {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background:
        rgba(255,255,255,0.06);

    border:
        1px solid rgba(255,255,255,0.08);

    font-size: 16px;
}

.recommended-main {
    min-width: 0;
}

.recommended-title {
    color:
        #e6e6e6;

    font-size:
        11px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recommended-sub {
    margin-top:
        2px;

    color:
        #8f8f8f;

    font-size:
        10px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.start-separator {
    height: 1px;

    margin:
        14px -16px 10px;

    background:
        rgba(255,255,255,0.08);
}

.start-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding:
        0 4px;
}

.start-user {
    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        5px 7px;

    border-radius:
        6px;

    color:
        #dddddd;

    font-size:
        12px;

    transition:
        background 0.14s ease;
}

.start-user:hover {
    background:
        rgba(255,255,255,0.06);
}

.start-avatar {
    width: 31px;
    height: 31px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #3d3d3d,
            #222222
        );

    border:
        1px solid rgba(255,255,255,0.13);

    box-shadow:
        0 4px 12px rgba(0,0,0,0.25);
}

.power-wrap {
    position: relative;
}

.power-button {
    width: 38px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 6px;

    background:
        transparent;

    color: #eeeeee;

    cursor: pointer;

    font-size: 17px;

    transition:
        background 0.14s ease,
        transform 0.14s ease;
}

.power-button:hover {
    background:
        rgba(255,255,255,0.08);
}

.power-button:active {
    transform:
        scale(0.9);
}

.power-menu {
    position: absolute;

    right: 0;
    bottom: 42px;

    width: 205px;

    padding: 5px;

    border:
        1px solid rgba(255,255,255,0.11);

    border-radius: 8px;

    background:
        rgba(35,35,35,0.98);

    box-shadow:
        0 17px 50px rgba(0,0,0,0.55);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(7px)
        scale(0.97);

    transform-origin:
        100% 100%;

    transition:
        opacity 0.14s ease,
        transform 0.18s cubic-bezier(.18,.89,.32,1.18),
        visibility 0.14s ease;
}

.power-menu.open {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}

.power-item {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        10px;

    border: 0;
    border-radius: 6px;

    background:
        transparent;

    color:
        #eeeeee;

    cursor: pointer;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 12px;

    text-align: left;

    transition:
        background 0.14s ease,
        transform 0.14s ease;
}

.power-item:hover {
    background:
        rgba(255,255,255,0.08);

    transform:
        translateX(2px);
}


/* =========================================================
   MINI APPS / FUN WINDOWS
========================================================= */

.fun-window {
    position: fixed;

    left: 50%;
    top: 50%;

    z-index: 8000;

    width:
        min(610px, calc(100vw - 30px));

    max-height:
        min(520px, calc(100vh - 100px));

    display: none;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid #3b3b3b;

    border-radius:
        8px;

    background:
        #171717;

    box-shadow:
        0 30px 90px rgba(0,0,0,0.68);

    transform:
        translate(-50%, -50%)
        scale(0.92);

    opacity: 0;
}

.fun-window.open {
    display: flex;

    animation:
        funWindowIn
        0.24s
        cubic-bezier(.18,.89,.32,1.18)
        forwards;
}

@keyframes funWindowIn {
    to {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}

.fun-titlebar {
    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    background:
        #202020;

    border-bottom:
        1px solid #333333;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        12px;
}

.fun-title {
    flex: 1;

    padding-left:
        13px;

    color:
        #e5e5e5;
}

.fun-close {
    width:
        46px;

    height:
        100%;

    display:
        flex;

    align-items:
        center;
    justify-content:
        center;

    border:
        0;

    background:
        transparent;

    color:
        #dddddd;

    cursor:
        pointer;

    font-size:
        14px;
}

.fun-close:hover {
    background:
        #c42b1c;

    color:
        white;
}

.fun-content {
    flex: 1;

    overflow:
        auto;

    padding:
        18px;

    color:
        #dddddd;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        13px;
}

.fake-explorer-path {
    margin-bottom:
        14px;

    padding:
        8px 10px;

    border:
        1px solid #363636;

    border-radius:
        4px;

    background:
        #101010;

    color:
        #cfcfcf;

    font-size:
        12px;
}

.fake-files {
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        10px;
}

.fake-file {
    padding:
        13px 10px;

    border-radius:
        7px;

    background:
        rgba(255,255,255,0.035);

    border:
        1px solid rgba(255,255,255,0.06);

    cursor:
        pointer;

    text-align:
        center;

    transition:
        background 0.14s ease,
        transform 0.14s ease;
}

.fake-file:hover {
    background:
        rgba(255,255,255,0.075);

    transform:
        translateY(-2px);
}

.fake-file-icon {
    margin-bottom:
        7px;

    font-size:
        27px;
}

.task-table {
    width:
        100%;

    border-collapse:
        collapse;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        12px;
}

.task-table th,
.task-table td {
    padding:
        8px;

    border-bottom:
        1px solid #2d2d2d;

    text-align:
        left;
}

.task-table th {
    color:
        #aaaaaa;

    font-weight:
        500;
}

.task-cpu {
    color:
        #ffd166;
}

.fake-update-bar {
    height:
        8px;

    margin:
        16px 0 9px;

    overflow:
        hidden;

    border-radius:
        100px;

    background:
        #292929;
}

.fake-update-fill {
    width:
        0%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        #76b9ed;

    transition:
        width 0.32s ease;
}

.fake-note {
    width:
        100%;

    min-height:
        220px;

    padding:
        12px;

    resize:
        vertical;

    border:
        1px solid #353535;

    background:
        #0f0f0f;

    color:
        #e8e8e8;

    outline:
        none;

    font:
        14px/1.5 Consolas, monospace;
}

@media (max-width: 600px) {
    .start-menu {
        bottom: 58px;

        width:
            calc(100vw - 16px);

        max-height:
            calc(100vh - 75px);

        overflow-y:
            auto;
    }

    .start-apps {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .recommended-list {
        grid-template-columns:
            1fr;
    }

    .fake-files {
        grid-template-columns:
            repeat(2, 1fr);
    }
}


/* =========================================================
   FUN WINDOWS / TOASTS
========================================================= */

.desktop-toast {
    position: fixed;

    right: 16px;
    bottom: 72px;

    z-index: 6500;

    width: min(330px, calc(100vw - 32px));

    padding: 12px 14px;

    border:
        1px solid rgba(255,255,255,0.11);

    border-radius: 8px;

    background:
        rgba(32,32,32,0.97);

    box-shadow:
        0 14px 45px rgba(0,0,0,0.48);

    color:
        #eeeeee;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 12px;

    opacity: 0;

    transform:
        translateY(14px);

    pointer-events: none;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

.desktop-toast.show {
    opacity: 1;

    transform:
        translateY(0);
}

.toast-title {
    margin-bottom: 4px;

    font-weight: 600;
}

.toast-text {
    color:
        #bdbdbd;

    line-height: 1.35;
}


/* =========================================================
   SHUTDOWN / RESTART OVERLAY
========================================================= */

.system-screen {
    position: fixed;

    inset: 0;

    z-index: 20000;

    display: none;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    overflow: hidden;

    background:
        #0067c0;

    color: white;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;
}

.system-screen.visible {
    display: flex;
}

.system-screen.black {
    background:
        #000000;
}

.system-screen.boot-blue {
    background:
        #0067c0;
}

.shutdown-title {
    margin-top: 28px;

    font-size:
        clamp(20px, 2.2vw, 30px);

    font-weight: 400;
}

.shutdown-subtitle {
    margin-top: 8px;

    color:
        rgba(255,255,255,0.82);

    font-size:
        13px;
}

.windows-spinner {
    width: 42px;
    height: 42px;

    position: relative;
}

.windows-spinner span {
    position: absolute;

    left: 19px;
    top: 3px;

    width: 4px;
    height: 10px;

    border-radius: 4px;

    background: white;

    transform-origin:
        2px 18px;

    opacity: 0.18;

    animation:
        winSpinner 1.15s linear infinite;
}

.windows-spinner span:nth-child(1) { transform: rotate(0deg); animation-delay: -1.05s; }
.windows-spinner span:nth-child(2) { transform: rotate(45deg); animation-delay: -0.90s; }
.windows-spinner span:nth-child(3) { transform: rotate(90deg); animation-delay: -0.75s; }
.windows-spinner span:nth-child(4) { transform: rotate(135deg); animation-delay: -0.60s; }
.windows-spinner span:nth-child(5) { transform: rotate(180deg); animation-delay: -0.45s; }
.windows-spinner span:nth-child(6) { transform: rotate(225deg); animation-delay: -0.30s; }
.windows-spinner span:nth-child(7) { transform: rotate(270deg); animation-delay: -0.15s; }
.windows-spinner span:nth-child(8) { transform: rotate(315deg); animation-delay: 0s; }

@keyframes winSpinner {
    0%,
    100% {
        opacity: 0.12;
    }

    45% {
        opacity: 1;
    }
}

.post-screen {
    width:
        min(850px, calc(100vw - 50px));

    color:
        #e7e7e7;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:
        clamp(12px, 1.45vw, 17px);

    line-height:
        1.55;
}

.post-brand {
    margin-bottom:
        26px;

    color:
        #ffffff;

    font-size:
        clamp(24px, 4vw, 50px);

    font-weight:
        700;

    letter-spacing:
        2px;
}

.post-line {
    min-height:
        1.55em;
}

.post-ok {
    color:
        #74dd8b;
}

.post-key {
    color:
        #bbbbbb;
}

.boot-logo {
    margin-bottom:
        42px;

    display: grid;

    grid-template-columns:
        42px 42px;

    grid-template-rows:
        42px 42px;

    gap:
        5px;
}

.boot-logo span {
    background:
        #ffffff;
}

.boot-dots {
    position: relative;

    width:
        58px;

    height:
        58px;

    animation:
        bootDotsRotate
        1.3s linear infinite;
}

.boot-dots span {
    position: absolute;

    width:
        5px;

    height:
        5px;

    left:
        27px;

    top:
        3px;

    border-radius:
        50%;

    background:
        white;

    transform-origin:
        2.5px 26px;
}

.boot-dots span:nth-child(1) { transform: rotate(0deg); opacity: .25; }
.boot-dots span:nth-child(2) { transform: rotate(45deg); opacity: .35; }
.boot-dots span:nth-child(3) { transform: rotate(90deg); opacity: .45; }
.boot-dots span:nth-child(4) { transform: rotate(135deg); opacity: .55; }
.boot-dots span:nth-child(5) { transform: rotate(180deg); opacity: .65; }
.boot-dots span:nth-child(6) { transform: rotate(225deg); opacity: .75; }
.boot-dots span:nth-child(7) { transform: rotate(270deg); opacity: .88; }
.boot-dots span:nth-child(8) { transform: rotate(315deg); opacity: 1; }

@keyframes bootDotsRotate {
    to {
        transform:
            rotate(360deg);
    }
}

.welcome-text {
    margin-top:
        24px;

    color:
        #ffffff;

    font-size:
        20px;
}


/* =========================================================
   CLOSED WINDOW STATE
========================================================= */

.window.closed {
    display: none;
}

.taskbar-button.pinned:not(.running)::after {
    width: 0;
}


/* =========================================================
   MOBILE START MENU
========================================================= */

@media (max-width: 600px) {
    .start-menu {
        bottom: 58px;

        width:
            calc(100vw - 16px);
    }

    .start-apps {
        grid-template-columns:
            repeat(2, 1fr);
    }
}


/* =========================================================
   DESKTOP SHORTCUTS
========================================================= */

.desktop-shortcuts {
    position: fixed;

    left: 18px;
    top: 18px;
    bottom: 72px;

    z-index: 3;

    width: 94px;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

    pointer-events: none;
}

.desktop-shortcut {
    width: 86px;
    min-height: 86px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: flex-start;

    gap: 5px;

    padding: 7px 4px;

    border: 1px solid transparent;
    border-radius: 4px;

    background: transparent;

    color: #f1f1f1;

    font:
        11px/1.15 "Segoe UI",
        Arial,
        sans-serif;

    text-shadow:
        0 1px 3px rgba(0,0,0,0.95);

    cursor: default;

    pointer-events: auto;

    user-select: none;

    transition:
        background 0.10s ease,
        border-color 0.10s ease;
}

.desktop-shortcut:hover {
    background:
        rgba(90,145,200,0.16);

    border-color:
        rgba(150,200,255,0.16);
}

.desktop-shortcut.selected {
    background:
        rgba(69,130,190,0.26);

    border-color:
        rgba(150,205,255,0.24);
}

.desktop-shortcut-icon {
    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.10),
            rgba(255,255,255,0.025)
        );

    border:
        1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 8px 18px rgba(0,0,0,0.28);

    font-size: 28px;

    transition:
        transform 0.15s ease,
        filter 0.15s ease;
}

.desktop-shortcut:hover .desktop-shortcut-icon {
    transform:
        translateY(-2px)
        scale(1.03);

    filter:
        brightness(1.12);
}

.desktop-shortcut-label {
    width: 100%;

    text-align: center;

    overflow-wrap: anywhere;
}


/* =========================================================
   GENERIC DESKTOP APPLICATION WINDOWS
========================================================= */

.desktop-app-layer {
    position: fixed;

    inset: 0 0 54px 0;

    z-index: 950;

    pointer-events: none;
}

.desktop-app-window {
    position: absolute;

    left: 50%;
    top: 50%;

    width:
        min(1120px, calc(100vw - 150px));

    height:
        min(760px, calc(100vh - 105px));

    min-width: 440px;
    min-height: 320px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid #3a3a3a;

    border-radius: 7px;

    background:
        #111111;

    box-shadow:
        0 28px 90px rgba(0,0,0,0.68);

    transform:
        translate(-50%, -50%);

    pointer-events: auto;

    opacity: 1;

    animation:
        desktopAppOpen
        0.22s
        cubic-bezier(.18,.89,.32,1.18);
}

@keyframes desktopAppOpen {
    from {
        opacity: 0;

        transform:
            translate(-50%, -48%)
            scale(0.965);
    }

    to {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}

.desktop-app-window.is-minimized {
    display: none;
}

.desktop-app-window.is-maximized {
    left: 0 !important;
    top: 0 !important;

    width: 100vw !important;
    height: calc(100vh - 54px) !important;

    min-width: 0;
    min-height: 0;

    border: 0;
    border-radius: 0;

    transform: none !important;
}

.desktop-app-window.is-focused {
    box-shadow:
        0 32px 100px rgba(0,0,0,0.78),
        0 0 0 1px rgba(255,255,255,0.035);
}

.desktop-app-titlebar {
    height: 38px;

    flex: 0 0 38px;

    display: flex;
    align-items: center;

    background:
        #202020;

    border-bottom:
        1px solid #333333;

    user-select: none;

    cursor: default;
}

.desktop-app-title-icon {
    width: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
}

.desktop-app-title {
    flex: 1;

    min-width: 0;

    overflow: hidden;

    color:
        #e5e5e5;

    font:
        12px/1 "Segoe UI",
        Arial,
        sans-serif;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.desktop-app-controls {
    height: 100%;

    display: flex;
}

.desktop-app-control {
    width: 46px;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    color:
        #dddddd;

    box-shadow: none;

    font:
        13px "Segoe UI",
        Arial,
        sans-serif;

    cursor: default;

    transition:
        background 0.12s ease;
}

.desktop-app-control:hover {
    background:
        rgba(255,255,255,0.09);
}

.desktop-app-control.close:hover {
    background:
        #c42b1c;

    color:
        #ffffff;
}

.desktop-app-frame {
    width: 100%;
    height: 100%;

    flex: 1;

    border: 0;

    background:
        #0a0a0a;
}


/* =========================================================
   DYNAMIC TASKBAR APPS
========================================================= */

.taskbar-app-button {
    position: relative;

    width: 44px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 6px;

    background:
        transparent;

    color: #ffffff;

    box-shadow: none;

    cursor: default;

    font-size: 20px;

    transition:
        background 0.14s ease,
        transform 0.14s ease;
}

.taskbar-app-button:hover {
    background:
        rgba(255,255,255,0.08);
}

.taskbar-app-button.active {
    background:
        rgba(255,255,255,0.10);
}

.taskbar-app-button::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 2px;

    width: 16px;
    height: 3px;

    border-radius: 99px;

    background:
        #76b9ed;

    transform:
        translateX(-50%);

    transition:
        width 0.14s ease;
}

.taskbar-app-button.active::after {
    width: 24px;
}

.taskbar-app-tooltip {
    position: absolute;

    left: 50%;
    bottom: 52px;

    transform:
        translateX(-50%)
        translateY(4px);

    padding:
        6px 9px;

    border:
        1px solid rgba(255,255,255,0.12);

    border-radius: 5px;

    background:
        rgba(30,30,30,0.98);

    color:
        #ffffff;

    font:
        11px "Segoe UI",
        Arial,
        sans-serif;

    white-space: nowrap;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.12s ease,
        transform 0.12s ease;
}

.taskbar-app-button:hover .taskbar-app-tooltip {
    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);
}

@media (max-width: 760px) {
    .desktop-shortcuts {
        left: 8px;
        top: 8px;

        width: 78px;
    }

    .desktop-shortcut {
        width: 72px;
        min-height: 78px;
    }

    .desktop-shortcut-icon {
        width: 42px;
        height: 42px;

        font-size: 24px;
    }

    .desktop-app-window {
        left: 0 !important;
        top: 0 !important;

        width: 100vw !important;
        height: calc(100vh - 50px) !important;

        min-width: 0;
        min-height: 0;

        border: 0;
        border-radius: 0;

        transform: none !important;
    }

    .desktop-app-layer {
        bottom: 50px;
    }
}


/* =========================================================
   WINDOW DRAG / RESIZE SYSTEM
========================================================= */

.desktop-app-titlebar,
.window > .titlebar {
    cursor: grab;
    touch-action: none;
}

.desktop-app-window.is-dragging .desktop-app-titlebar,
.window.is-dragging > .titlebar {
    cursor: grabbing;
}

.desktop-app-window.is-interacting,
.window.is-interacting {
    user-select: none;
}

.desktop-app-window.is-interacting::after,
.window.is-interacting::after {
    content: "";
    position: absolute;
    inset: 38px 0 0;
    z-index: 9000;
    background: transparent;
    pointer-events: auto;
}

.window-resize-handle {
    position: absolute;
    z-index: 10050;
    touch-action: none;
    background: transparent;
}

.window-resize-handle.resize-n,
.window-resize-handle.resize-s {
    left: 10px;
    right: 10px;
    height: 7px;
}

.window-resize-handle.resize-n {
    top: -3px;
    cursor: ns-resize;
}

.window-resize-handle.resize-s {
    bottom: -3px;
    cursor: ns-resize;
}

.window-resize-handle.resize-e,
.window-resize-handle.resize-w {
    top: 10px;
    bottom: 10px;
    width: 7px;
}

.window-resize-handle.resize-e {
    right: -3px;
    cursor: ew-resize;
}

.window-resize-handle.resize-w {
    left: -3px;
    cursor: ew-resize;
}

.window-resize-handle.resize-ne,
.window-resize-handle.resize-nw,
.window-resize-handle.resize-se,
.window-resize-handle.resize-sw {
    width: 14px;
    height: 14px;
}

.window-resize-handle.resize-ne {
    top: -4px;
    right: -4px;
    cursor: nesw-resize;
}

.window-resize-handle.resize-nw {
    top: -4px;
    left: -4px;
    cursor: nwse-resize;
}

.window-resize-handle.resize-se {
    right: -4px;
    bottom: -4px;
    cursor: nwse-resize;
}

.window-resize-handle.resize-sw {
    left: -4px;
    bottom: -4px;
    cursor: nesw-resize;
}

.desktop-app-window.is-maximized .window-resize-handle,
.window.maximized .window-resize-handle,
.desktop-app-window.is-minimized .window-resize-handle,
.window.minimized .window-resize-handle,
.window.closed .window-resize-handle {
    display: none;
}

.desktop-app-window.is-resizing,
.window.is-resizing {
    animation: none !important;
}

.desktop-app-window.is-dragging,
.window.is-dragging {
    animation: none !important;
}

@media (max-width: 760px) {
    .window-resize-handle {
        display: none !important;
    }

    .desktop-app-titlebar,
    .window > .titlebar {
        cursor: default;
    }
}

/* Desktop files, taskbar menus and calendar */
.desktop-context-menu,.taskbar-context-menu{position:fixed;z-index:30000;min-width:190px;padding:6px;border:1px solid rgba(255,255,255,.11);border-radius:9px;background:rgba(30,30,32,.97);box-shadow:0 18px 55px rgba(0,0,0,.5);backdrop-filter:blur(18px)}.desktop-context-menu button,.taskbar-context-menu button{width:100%;padding:9px 11px;border:0;border-radius:6px;background:transparent;color:#eee;text-align:left;cursor:pointer}.desktop-context-menu button:hover,.taskbar-context-menu button:hover{background:rgba(255,255,255,.075)}
.calendar-panel{position:fixed;right:10px;bottom:62px;z-index:25000;width:310px;padding:17px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(25,25,27,.97);box-shadow:0 25px 75px rgba(0,0,0,.55);backdrop-filter:blur(22px);font-family:"Segoe UI",sans-serif;color:#eee}.calendar-live-time{font-size:34px;font-weight:300;letter-spacing:-.04em}.calendar-live-date{margin:3px 0 17px;color:#8fbfe4;font-size:12px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-cell{height:32px;display:grid;place-items:center;border-radius:7px;font-size:11px}.calendar-cell.head{height:22px;color:#7f8993;font-size:9px}.calendar-cell.today{background:#2687c9;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.16) inset}.calendar-cell.muted{color:#555}
.desktop-user-file{position:fixed;z-index:4;width:88px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px;border:1px solid transparent;border-radius:5px;background:transparent;color:#f4f4f4;text-shadow:0 1px 3px #000;font:11px/1.15 "Segoe UI",sans-serif;cursor:default}.desktop-user-file:hover,.desktop-user-file.selected{background:rgba(70,130,190,.2);border-color:rgba(150,205,255,.2)}.desktop-user-file-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(145deg,#f4f0d7,#c9c6b5);color:#2a2a2a;font-size:25px;box-shadow:0 7px 20px rgba(0,0,0,.28)}.desktop-user-file-name{text-align:center;overflow-wrap:anywhere}
.notepad-window{position:fixed;z-index:22000;left:50%;top:50%;transform:translate(-50%,-50%);width:min(650px,calc(100vw - 80px));height:min(540px,calc(100vh - 100px));display:flex;flex-direction:column;border:1px solid #444;border-radius:8px;overflow:hidden;background:#f7f7f7;box-shadow:0 30px 90px rgba(0,0,0,.65)}.notepad-titlebar{height:38px;display:flex;align-items:center;justify-content:space-between;padding-left:12px;background:#202020;color:#eee;font:12px "Segoe UI",sans-serif}.notepad-titlebar button{width:46px;height:38px;border:0;background:transparent;color:#eee;cursor:pointer}.notepad-titlebar button:hover{background:#c42b1c}.notepad-window textarea{flex:1;resize:none;border:0;outline:none;padding:16px;background:#fff;color:#111;font:14px/1.55 Consolas,monospace}.notepad-status{padding:5px 10px;border-top:1px solid #ddd;color:#666;font:10px "Segoe UI",sans-serif;text-align:right}

/* =========================================================
   V5.1 WINDOW MANAGER FIXES
========================================================= */

.notepad-window[hidden] {
    display: none !important;
}

.notepad-window {
    z-index: 1100;
    transform: none;
    left: max(18px, calc(50% - 325px));
    top: max(18px, calc(50% - 270px));
}

.notepad-window.is-focused {
    box-shadow:
        0 34px 110px rgba(0,0,0,.78),
        0 0 0 1px rgba(255,255,255,.055);
}

.notepad-titlebar {
    cursor: move;
    touch-action: none;
    user-select: none;
}

.notepad-titlebar button {
    cursor: default;
}

.taskbar-context-menu {
    transform-origin: 50% 100%;
}

.taskbar-context-menu:not([hidden]) {
    animation: taskbarLongHoverMenuIn .16s cubic-bezier(.18,.89,.32,1.18) both;
}

@keyframes taskbarLongHoverMenuIn {
    from {
        opacity: 0;
        transform: translateY(7px) scale(.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.taskbar-app-button.pinned-closed::after {
    width: 0;
}

.taskbar-app-button[data-pinned="1"] .taskbar-app-tooltip::after {
    content: " · закреплено";
    color: #7f9eb5;
}