/* =========================================================
   YOUR DESKTOP 2.0
   style.css
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

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

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

body {
    overflow: hidden;

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

    background: #101010;
    color: white;

    user-select: none;
}

button,
input,
textarea {
    font-family: inherit;
}

button {
    border: none;
    cursor: pointer;
}

.hidden {
    display: none !important;
}


/* =========================================================
   BOOT SCREEN
   ========================================================= */

.boot-screen {
    position: fixed;
    inset: 0;

    z-index: 99999;

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

    background: #111;
}

.boot-logo {
    width: 100px;
    height: 100px;

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

    margin-bottom: 18px;

    border-radius: 24px;

    background: linear-gradient(
        135deg,
        #ffffff,
        #dcdcdc
    );

    color: #111;

    font-size: 58px;
    font-weight: 900;

    box-shadow:
        0 0 35px rgba(255, 255, 255, 0.08);

    animation: bootLogo 0.8s ease;
}

.boot-title {
    font-size: 34px;
    font-weight: 700;

    letter-spacing: 2px;
}

.boot-version {
    margin-top: 4px;

    font-size: 13px;

    letter-spacing: 3px;

    opacity: 0.45;
}

.boot-status {
    margin-top: 45px;

    font-size: 13px;

    opacity: 0.55;
}

.boot-loader {
    width: 220px;
    height: 3px;

    margin-top: 15px;

    overflow: hidden;

    border-radius: 10px;

    background: #292929;
}

#bootLoader {
    width: 0%;
    height: 100%;

    background: white;

    transition: width 0.15s linear;
}

@keyframes bootLogo {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

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


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

.desktop {
    position: fixed;
    inset: 0;

    overflow: hidden;

    background: #151515;
}

.wallpaper {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255, 255, 255, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(120, 120, 120, 0.08),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #202020,
            #101010 50%,
            #181818
        );

    z-index: 0;
}

.wallpaper::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgba(255, 255, 255, 0.025),
            transparent 80%
        );

    pointer-events: none;
}


/* =========================================================
   DESKTOP ICONS
   ========================================================= */

.desktop-icons {
    position: absolute;

    top: 25px;
    left: 25px;
    right: 25px;

    display: grid;
    grid-template-columns: repeat(auto-fill, 88px);
    justify-content: start;

    gap: 14px;

    z-index: 2;
}

.desktop-icon {
    width: 80px;

    padding: 7px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 6px;

    background: transparent;

    color: white;

    border-radius: 6px;

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

    transition:
        background 0.15s,
        transform 0.1s;
}

.desktop-icon:hover {
    background: rgba(255, 255, 255, 0.1);
}

.desktop-icon:active {
    transform: scale(0.95);
}

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

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

    font-size: 30px;

    border-radius: 10px;

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

.desktop-icon span:last-child {
    font-size: 12px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   WINDOW AREA
   ========================================================= */

#windowArea {
    position: absolute;
    inset: 0;

    z-index: 10;

    pointer-events: none;
}


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

.os-window {
    position: absolute;

    min-width: 300px;
    min-height: 200px;

    width: 620px;
    height: 430px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #202020;

    border:
        1px solid #3b3b3b;

    border-radius: 8px;

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

    pointer-events: auto;

    animation: windowOpen 0.16s ease;
}

@keyframes windowOpen {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

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

.os-window.maximized {
    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: calc(100% - 70px) !important;

    border-radius: 0;
}

.os-window.minimized {
    display: none;
}

/* The window body fills the window and lets each app scroll internally. */
.window-body {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}


/* =========================================================
   WINDOW HEADER
   ========================================================= */

.window-header {
    height: 42px;

    flex-shrink: 0;

    display: flex;
    align-items: center;

    padding-left: 14px;

    background: #292929;

    border-bottom:
        1px solid #3b3b3b;

    cursor: grab;
}

.window-header:active {
    cursor: grabbing;
}

.window-title {
    display: flex;
    align-items: center;

    gap: 8px;

    font-size: 13px;
    font-weight: 600;
}

.window-controls {
    height: 100%;

    margin-left: auto;

    display: flex;
}

.window-controls button {
    width: 42px;
    height: 100%;

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

    background: transparent;

    color: #ddd;

    font-size: 16px;

    transition:
        background 0.12s;
}

.window-controls button:hover {
    background: #3a3a3a;
}

.window-controls .window-close:hover {
    background: #d64545;
    color: white;
}


/* =========================================================
   APP CONTENT
   ========================================================= */

.app-content {
    flex: 1;

    min-height: 0;

    overflow: auto;

    background: #181818;
}


/* =========================================================
   FILES
   ========================================================= */

.files-app {
    display: flex;
    flex-direction: column;
}

.files-toolbar {
    height: 50px;

    display: flex;
    align-items: center;

    gap: 6px;

    padding: 8px;

    background: #222;

    border-bottom:
        1px solid #333;
}

.files-toolbar button {
    width: 32px;
    height: 32px;

    border-radius: 5px;

    background: #303030;

    color: white;
}

.files-toolbar button:hover {
    background: #3b3b3b;
}

.files-toolbar input {
    flex: 1;

    height: 32px;

    padding: 0 10px;

    border:
        1px solid #3b3b3b;

    border-radius: 5px;

    outline: none;

    background: #161616;

    color: white;
}

.files-action {
    height: 32px;

    padding: 0 10px;

    border-radius: 5px;

    background: #303030;

    color: white;

    font-size: 12px;

    cursor: pointer;

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

    white-space: nowrap;
}

.files-upload {
    position: relative;
}

.files-upload input {
    display: none;
}

.files-breadcrumb {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 4px;

    padding: 8px 14px;

    font-size: 13px;

    color: #aaa;

    background: #1c1c1c;

    border-bottom:
        1px solid #2a2a2a;
}

.files-breadcrumb button {
    background: none;

    border: none;

    color: var(--accent, #4da6ff);

    font-size: 13px;

    cursor: pointer;

    padding: 2px 5px;

    border-radius: 4px;
}

.files-breadcrumb button:hover {
    background: #292929;
}

.files-empty {
    grid-column: 1 / -1;

    text-align: center;

    color: #666;

    font-size: 14px;

    padding: 40px 20px;
}

.files-empty span {
    font-size: 12px;
    color: #555;
}

.file-item .file-thumb {
    width: 48px;
    height: 48px;

    border-radius: 6px;

    object-fit: cover;

    background: #222;
}

/* Image viewer window */
.imageviewer-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 14px;

    padding: 16px;

    min-width: 300px;
    min-height: 220px;
}

.imageviewer-app img {
    max-width: 520px;
    max-height: 420px;

    border-radius: 8px;

    background: #141414;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4);
}

.imageviewer-app .imageviewer-name {
    font-size: 13px;
    color: #aaa;
    word-break: break-all;
    text-align: center;
}

body.light-theme .files-breadcrumb {
    background: #f0f0f0;
    color: #666;
    border-bottom: 1px solid #ddd;
}

body.light-theme .files-breadcrumb button {
    color: var(--accent, #1a6fd1);
}

body.light-theme .files-breadcrumb button:hover {
    background: #e0e0e0;
}

body.light-theme .files-empty {
    color: #aaa;
}

body.light-theme .files-empty span {
    color: #bbb;
}

.files-body {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(100px, 1fr));

    gap: 15px;

    padding: 20px;
}

.file-item {
    min-height: 100px;

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

    gap: 8px;

    border-radius: 7px;

    background: transparent;

    cursor: pointer;
}

.file-item:hover {
    background: #292929;
}

.file-item span {
    font-size: 38px;
}

.file-item label {
    font-size: 12px;
}


/* =========================================================
   SETTINGS
   ========================================================= */

.settings-app {
    display: flex;
}

.settings-sidebar {
    width: 180px;

    flex-shrink: 0;

    padding: 10px;

    background: #202020;

    border-right:
        1px solid #333;
}

.settings-tab {
    width: 100%;

    padding: 11px;

    margin-bottom: 4px;

    text-align: left;

    border-radius: 5px;

    background: transparent;

    color: #ddd;
}

.settings-tab:hover {
    background: #2d2d2d;
}

.settings-tab.active {
    background: #343434;
    color: white;
}

.settings-main {
    flex: 1;

    padding: 25px;

    overflow: auto;
}

.settings-main h2 {
    margin-bottom: 7px;
}

.settings-main > p {
    margin-bottom: 25px;

    color: #999;

    font-size: 13px;
}

.setting-card {
    padding: 18px;

    border:
        1px solid #333;

    border-radius: 8px;

    background: #202020;
}

.theme-buttons {
    display: flex;

    gap: 8px;

    margin-top: 12px;
}

.theme-buttons button {
    padding: 8px 18px;

    border-radius: 5px;

    background: #303030;

    color: white;
}

.theme-buttons button:hover {
    background: #3b3b3b;
}


/* =========================================================
   CALCULATOR
   ========================================================= */

.calculator-app {
    padding: 15px;

    display: flex;
    flex-direction: column;

    gap: 12px;
}

.calculator-display {
    width: 100%;
    height: 65px;

    padding: 10px 15px;

    border:
        1px solid #333;

    border-radius: 7px;

    outline: none;

    background: #101010;

    color: white;

    text-align: right;

    font-size: 28px;
}

.calculator-buttons {
    flex: 1;

    display: grid;

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

    gap: 7px;
}

.calculator-buttons button {
    border-radius: 6px;

    background: #292929;

    color: white;

    font-size: 17px;
}

.calculator-buttons button:hover {
    background: #383838;
}

.calculator-buttons button:active {
    background: #444;
}

.calculator-buttons .equals {
    grid-row: span 2;

    background: #555;
}

.calculator-buttons .zero {
    grid-column: span 2;
}


/* =========================================================
   NOTES
   ========================================================= */

.notes-app {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
}

/* ========== Compose bar (Google Keep "Take a note...") ========== */
.notes-compose {
    padding: 16px 16px 8px;
    flex-shrink: 0;
}
.notes-compose-box {
    max-width: 720px;
    margin: 0 auto;
    background: #202124;
    color: #e8eaed;
    border: 1px solid #5f6368;
    border-radius: 8px;
    padding: 10px 14px;
    cursor: text;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.notes-compose-box:focus-within {
    border-color: var(--accent, #4da6ff);
}
.notes-compose-header {
    display: flex;
    align-items: center;
}
#notesTitle {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: #e8eaed;
    font-size: 15px;
    font-weight: 500;
    outline: none;
    padding: 6px 0;
}
#notesTitle::placeholder { color: #9aa0a6; }
.notes-compose-close {
    display: none;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #9aa0a6;
    font-size: 16px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 50%;
}
.notes-compose-close:hover { background: rgba(255,255,255,0.08); }
#notesText {
    display: none;
    width: 100%;
    border: none;
    background: transparent;
    color: #e8eaed;
    font-size: 14px;
    outline: none;
    resize: none;
    padding: 4px 0 8px;
    line-height: 1.5;
    font-family: inherit;
}
#notesText::placeholder { color: #9aa0a6; }
.notes-compose-footer {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 6px;
}
.notes-compose.expanded #notesText,
.notes-compose.expanded .notes-compose-footer,
.notes-compose.expanded .notes-compose-close {
    display: flex;
}
.notes-compose.expanded #notesText { display: block; }
.notes-colorbar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.notes-compose-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.notes-icon-btn {
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    background: rgba(255,255,255,0.08);
    color: #e8eaed;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.notes-icon-btn:hover { background: rgba(255,255,255,0.16); }
.notes-icon-btn.primary {
    background: var(--accent, #4da6ff);
    color: #111;
    font-weight: 600;
}
.notes-icon-btn.primary:hover { filter: brightness(1.1); }
.notes-icon-btn.on { outline: 2px solid var(--accent, #4da6ff); }

/* Color swatches */
.notes-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.2);
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: transform 0.1s ease;
}
.notes-swatch:hover { transform: scale(1.15); }
.notes-swatch.selected::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #202124;
    font-size: 12px;
    font-weight: bold;
}

/* ========== Toolbar (Notes / Archive + search) ========== */
.notes-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 16px 10px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border, #2c2c2c);
}
.notes-nav {
    display: flex;
    gap: 6px;
}
.notes-nav-btn {
    border: none;
    background: transparent;
    color: #bdc1c6;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}
.notes-nav-btn:hover { background: rgba(255,255,255,0.08); }
.notes-nav-btn.active {
    background: color-mix(in srgb, var(--accent, #4da6ff) 25%, transparent);
    color: var(--accent, #4da6ff);
}
#notesSearch {
    width: 180px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border, #333);
    background: #171717;
    color: #eee;
    font-size: 12px;
    outline: none;
}
#notesSearch:focus { border-color: var(--accent, #4da6ff); }

/* ========== Notes grid (Google Keep) ========== */
.notes-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    padding: 16px;
    align-content: start;
}

.notes-empty {
    grid-column: 1 / -1;
    text-align: center;
    opacity: 0.5;
    margin-top: 60px;
    font-size: 14px;
}

.note-card {
    position: relative;
    background: #202124;
    color: #e8eaed;
    border: 1px solid #5f6368;
    border-radius: 8px;
    padding: 14px 14px 12px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.08s ease;
    word-break: break-word;
}
.note-card:hover {
    box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.25);
}
.note-card.pinned { box-shadow: 0 1px 3px rgba(0,0,0,.35), 0 0 2px var(--accent, #4da6ff); }

.note-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.note-card:hover .note-actions { opacity: 1; }
.note-act {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 5px;
    border-radius: 50%;
    line-height: 1;
}
.note-act:hover { background: rgba(0,0,0,0.12); }

.note-title {
    font-size: 15px;
    font-weight: 500;
    margin: 2px 0 4px;
    padding-right: 46px;
    line-height: 1.3;
}
.note-body {
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
}
.note-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.note-li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
}
.note-li input[type="checkbox"] {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    cursor: pointer;
    accent-color: var(--accent, #4da6ff);
}
.note-li.done span {
    text-decoration: line-through;
    opacity: 0.55;
}

/* ========== Color popup (above a note) ========== */
.color-popup {
    background: var(--dialog-bg, #2a2a2a);
    border: 1px solid var(--border, #3a3a3a);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    padding: 10px;
    width: 156px;
}
.color-popup-label {
    font-size: 11px;
    opacity: 0.7;
    margin-bottom: 6px;
    color: var(--text, #eee);
}
.color-popup-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ========== Note editor popup (overlay) ========== */
.notes-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notes-editor {
    width: min(520px, 90vw);
    background: #202124;
    color: #e8eaed;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.45);
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: inherit;
}
.notes-editor-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.notes-editor-title {
    flex: 1;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 16px;
    font-weight: 500;
    outline: none;
    padding: 4px 0;
}
.notes-editor-close {
    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.7;
    font-size: 16px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 50%;
}
.notes-editor-close:hover { background: rgba(0,0,0,0.1); }
.notes-editor-text {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 14px;
    outline: none;
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
    font-family: inherit;
}
.notes-editor-foot {
    display: flex;
    justify-content: flex-start;
}


/* =========================================================
   GAMES (Game Hub)
   ========================================================= */

.games-app {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px;
    overflow: auto;
}

.games-app .hidden { display: none !important; }

.games-title {
    margin: 0 0 16px;
    text-align: center;
    font-size: 22px;
}

.game-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.game-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 14px;
    border: 1px solid #3b3b3b;
    border-radius: 10px;
    background: #262626;
    color: #eee;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.game-card:hover {
    background: #2e2e2e;
    border-color: #4ddf91;
    transform: translateY(-3px);
}

.game-card-icon { font-size: 34px; }
.game-card-name { font-size: 16px; font-weight: 600; }
.game-card-desc { font-size: 12px; color: #aaa; text-align: center; }

/* =========================================================
   APP STORE
   ========================================================= */
.appstore-app {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px;
    overflow: auto;
    gap: 12px;
}

.appstore-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.appstore-title {
    margin: 0;
    font-size: 20px;
    white-space: nowrap;
}

.appstore-search {
    flex: 1;
    min-width: 160px;
    padding: 9px 12px;
    border: 1px solid #3b3b3b;
    border-radius: 8px;
    background: #262626;
    color: #eee;
    font-size: 14px;
    outline: none;
}

.appstore-search:focus {
    border-color: #4da6ff;
}

.appstore-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.appstore-cat {
    padding: 6px 14px;
    border: 1px solid #3b3b3b;
    border-radius: 20px;
    background: #262626;
    color: #ccc;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.appstore-cat:hover {
    border-color: #4da6ff;
    color: #eee;
}

.appstore-cat.active {
    background: #4da6ff;
    border-color: #4da6ff;
    color: #0f1220;
    font-weight: 600;
}

.appstore-meta {
    font-size: 12px;
    color: #999;
}

.appstore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.appstore-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid #3b3b3b;
    border-radius: 10px;
    background: #262626;
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.appstore-card:hover {
    border-color: #4da6ff;
    transform: translateY(-2px);
}

.appstore-card-icon {
    font-size: 34px;
    line-height: 1;
}

.appstore-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.appstore-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.appstore-card-name {
    font-size: 15px;
    font-weight: 600;
    color: #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appstore-card-cat {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(77, 166, 255, 0.15);
    color: #7ec3ff;
    white-space: nowrap;
}

.appstore-card-desc {
    font-size: 12px;
    color: #aaa;
}

.appstore-btn {
    align-self: flex-start;
    margin-top: 2px;
    padding: 6px 14px;
    border: 1px solid #4da6ff;
    border-radius: 8px;
    background: transparent;
    color: #4da6ff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.appstore-btn:hover {
    background: #4da6ff;
    color: #0f1220;
}

.appstore-btn.installed {
    border-color: #3b3b3b;
    background: #1e1e1e;
    color: #9ccc65;
}

.appstore-btn.installed:hover {
    background: #2e2e2e;
    color: #c5e1a5;
}

/* Buttons sit side by side for installed apps (Open + Uninstall). */
.appstore-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.appstore-btns .appstore-btn {
    align-self: flex-start;
    margin-top: 0;
}

/* Uninstall button — red-ish so it reads as "remove" not "run". */
.appstore-btn.danger {
    border-color: #e05a5a;
    color: #ff7b7b;
    background: transparent;
}

.appstore-btn.danger:hover {
    background: #e05a5a;
    color: #fff;
}

/* Light-theme Uninstall button. */
body.light-theme .appstore-btn.danger {
    border-color: #d93025;
    color: #d93025;
    background: transparent;
}

body.light-theme .appstore-btn.danger:hover {
    background: #d93025;
    color: #fff;
}

.appstore-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #999;
    padding: 40px 0;
    font-size: 15px;
}

.appstore-msg {
    margin: 0;
    min-height: 18px;
    font-size: 13px;
    color: #ffd54f;
    text-align: center;
}

/* App Store light theme */
body.light-theme .appstore-search,
body.light-theme .appstore-cat,
body.light-theme .appstore-card {
    background: white;
    border-color: #d0d0d0;
    color: #202124;
}
body.light-theme .appstore-cat.active {
    background: #1a73e8;
    border-color: #1a73e8;
    color: white;
}
body.light-theme .appstore-card-cat {
    background: #e8f0fe;
    color: #1a73e8;
}
body.light-theme .appstore-card-name { color: #202124; }
body.light-theme .appstore-card-desc,
body.light-theme .appstore-meta,
body.light-theme .appstore-empty { color: #5f6368; }
body.light-theme .appstore-btn.installed {
    background: #f1f3f4;
    border-color: #d0d0d0;
    color: #137333;
}


/* ===== PAINT APP ===== */
.paint-app {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 12px;
    box-sizing: border-box;
}
.paint-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #1c1f2e;
    border: 1px solid #2a2e42;
    border-radius: 12px;
}
.paint-swatches {
    display: flex;
    gap: 6px;
}
.paint-color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #3a3f5c;
    cursor: pointer;
    transition: transform 0.1s ease, border-color 0.1s ease;
}
.paint-color:hover { transform: scale(1.15); }
.paint-color.active { border-color: #fff; box-shadow: 0 0 0 2px #4da6ff; }
.paint-sizes {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #14162400;
    border-radius: 8px;
}
.paint-size {
    min-width: 34px;
    height: 34px;
    border: 1px solid #2a2e42;
    border-radius: 8px;
    background: #262a3d;
    color: #eee;
    cursor: pointer;
    font-size: 12px;
}
.paint-size:hover { background: #333853; }
.paint-size.active { background: #4da6ff; color: #0b0d16; }
.paint-tool {
    padding: 7px 12px;
    border: 1px solid #2a2e42;
    border-radius: 8px;
    background: #262a3d;
    color: #eee;
    cursor: pointer;
    font-size: 13px;
}
.paint-tool:hover { background: #333853; }
.paint-tool.active { background: #e63946; color: #fff; border-color: #e63946; }
.paint-tool.primary { background: #4da6ff; color: #0b0d16; border-color: #4da6ff; }
.paint-tool.primary:hover { background: #6fb6ff; }
.paint-current {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 2px solid #3a3f5c;
    margin-left: auto;
    background: #111111;
}
.paint-canvas-wrap {
    flex: 1;
    min-height: 0;
    border: 1px solid #2a2e42;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.paint-canvas-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
    touch-action: none;
}
body.light-theme .paint-toolbar {
    background: #f1f3f4;
    border-color: #d0d0d0;
}
body.light-theme .paint-size,
body.light-theme .paint-tool {
    background: #fff;
    border-color: #d0d0d0;
    color: #202124;
}
body.light-theme .paint-size:hover,
body.light-theme .paint-tool:hover { background: #e8eaed; }
body.light-theme .paint-current { border-color: #d0d0d0; }


/* top bar inside a game */
.game-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.game-back, .game-action {
    border: 1px solid #3b3b3b;
    background: #2a2a2a;
    color: #eee;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.game-back:hover, .game-action:hover { background: #333; }

.game-hud { font-size: 14px; color: #ccc; }
.game-hud b { color: #4ddf91; }

.game-stage {
    display: flex;
    justify-content: center;
    flex: 1;
    min-height: 300px;
}

.game-help {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin: 10px 0 4px;
}

.game-msg {
    text-align: center;
    color: #ffd84d;
    font-size: 14px;
    font-weight: 600;
    min-height: 18px;
}

/* Snake canvas */
#snakeCanvas {
    background: #101010;
    border: 1px solid #3b3b3b;
    border-radius: 6px;
}

/* Memory grid */
.mem-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 340px;
    margin: 0 auto;
    align-content: start;
}

.mem-card {
    aspect-ratio: 1;
    font-size: 28px;
    border: 1px solid #3b3b3b;
    border-radius: 8px;
    background: #2a2a2a;
    color: #eee;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease;
}

.mem-card:hover { background: #333; }
.mem-card.open { background: #1f3d2c; }
.mem-card.matched { background: #173126; color: #4ddf91; cursor: default; }

/* 2048 tiles */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 320px;
    height: 320px;
    background: #1c1c1c;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #3b3b3b;
}

.tile {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    border-radius: 6px;
    background: #2a2a2a;
    color: #ddd;
}

.tile.v2 { background: #3d3d3d; color: #eee; }
.tile.v4 { background: #4d4d4d; color: #fff; }
.tile.v8 { background: #b5651d; }
.tile.v16 { background: #c77c2e; }
.tile.v32 { background: #d97706; }
.tile.v64 { background: #d35400; }
.tile.v128 { background: #e0a500; color: #1c1c1c; }
.tile.v256 { background: #e6b800; color: #1c1c1c; }
.tile.v512 { background: #f1c40f; color: #1c1c1c; }
.tile.v1024 { background: #f7d94d; color: #1c1c1c; }
.tile.v2048 { background: #4ddf91; color: #0c2b1c; }

/* Reaction box */
.rx-box {
    position: relative;
    flex: 1;
    min-height: 260px;
    border: 1px dashed #3b3b3b;
    border-radius: 8px;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rx-hint {
    color: #aaa;
    font-size: 15px;
    text-align: center;
    line-height: 1.6;
    padding: 16px;
}
.rx-hint b { color: #ffd84d; }
.rx-hint small { color: #888; }

.rx-target {
    position: absolute;
    width: 52px;
    height: 52px;
    font-size: 26px;
    border: none;
    border-radius: 50%;
    background: #ffd84d;
    color: #1c1c1c;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255, 216, 77, 0.4);
    transition: transform 0.1s ease;
}

.rx-target:hover { transform: scale(1.12); }

.ttt-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 16px auto;
    max-width: 280px;
}
.ttt-cell {
    aspect-ratio: 1;
    font-size: 46px;
    font-weight: 700;
    border: 2px solid #3b3b3b;
    border-radius: 10px;
    background: #1a1a1a;
    color: #eee;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.1s ease;
}
.ttt-cell:hover { background: #262626; }
.ttt-cell.ttt-x { color: #4da6ff; }
.ttt-cell.ttt-o { color: #ffd84d; }
.ttt-cell.ttt-win { background: #2ea872; color: #fff; }


/* =========================================================
   WEATHER
   ========================================================= */

.weather-app {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px;
    overflow: auto;
    gap: 14px;
}

.weather-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.weather-title {
    margin: 0;
    font-size: 22px;
}

.weather-controls {
    display: flex;
    gap: 6px;
}

.weather-city {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #3b3b3b;
    background: #1a1a1a;
    color: #eee;
    font-size: 14px;
    min-width: 180px;
}

.weather-go {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #3b3b3b;
    background: #2a2a2a;
    color: #eee;
    cursor: pointer;
    font-size: 15px;
}
.weather-go:hover { background: #353535; }

.weather-now {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px;
    border-radius: 14px;
    background: linear-gradient(160deg, #233a5c, #1a2436);
}

.weather-big-icon { font-size: 58px; }
.weather-temp { font-size: 56px; font-weight: 700; }
.weather-desc { font-size: 18px; color: #cfd6e0; }
.weather-loc { font-size: 13px; color: #9aa4b0; }

.weather-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.weather-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 6px;
    border: 1px solid #3b3b3b;
    border-radius: 10px;
    background: #1a1a1a;
}
.weather-detail span { font-size: 20px; }
.weather-detail b { font-size: 15px; }
.weather-detail small { font-size: 11px; color: #9aa4b0; }

.weather-week {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 8px;
}

.weather-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 4px;
    border-radius: 10px;
    background: #1a1a1a;
    border: 1px solid #2c2c2c;
}
.weather-day span { font-size: 12px; color: #9aa4b0; }
.weather-day b { font-size: 16px; }
.weather-day small { font-size: 11px; color: #7a8490; }

.weather-msg { min-height: 18px; color: #4ddf91; font-size: 13px; margin: 0; text-align: center; }


/* =========================================================
   CLOCK
   ========================================================= */

.clock-app {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px;
    overflow: auto;
    gap: 12px;
    align-items: center;
}

.clock-title { margin: 0; font-size: 22px; }

.clock-digital {
    font-size: 56px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
}
.clock-date { font-size: 14px; color: #9aa4b0; }

.clock-tabs {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
.clock-tab {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #3b3b3b;
    background: #1a1a1a;
    color: #cfd6e0;
    cursor: pointer;
}
.clock-tab.active { background: #4da6ff; color: #06121f; border-color: #4da6ff; font-weight: 600; }

.clock-view { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.clock-view.hidden { display: none; }

.clock-display {
    font-size: 48px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
    padding: 14px 28px;
    border-radius: 14px;
    background: #0f1220;
    border: 1px solid #2c2c2c;
    min-width: 240px;
    text-align: center;
}

.clock-btns { display: flex; gap: 8px; }
.clock-btn {
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid #3b3b3b;
    background: #2a2a2a;
    color: #eee;
    cursor: pointer;
}
.clock-btn.primary { background: #4da6ff; color: #06121f; border-color: #4da6ff; font-weight: 600; }
.clock-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.timer-set { display: flex; align-items: center; gap: 4px; }
.timer-input {
    width: 64px;
    padding: 8px;
    text-align: center;
    font-size: 22px;
    border-radius: 8px;
    border: 1px solid #3b3b3b;
    background: #1a1a1a;
    color: #eee;
}
.timer-colon { font-size: 24px; font-weight: 700; }

.clock-laps { list-style: none; padding: 0; margin: 0; width: 100%; max-width: 260px; }
.clock-lap {
    padding: 6px 10px;
    border-radius: 6px;
    background: #1a1a1a;
    border: 1px solid #2c2c2c;
    margin-bottom: 4px;
    font-size: 13px;
}


/* =========================================================
   TO-DO
   ========================================================= */

.todo-app {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px;
    overflow: auto;
    gap: 12px;
}

.todo-title { margin: 0; font-size: 22px; }

.todo-input-row { display: flex; gap: 8px; }
.todo-input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #3b3b3b;
    background: #1a1a1a;
    color: #eee;
    font-size: 15px;
}
.todo-add {
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    background: #4da6ff;
    color: #06121f;
    font-size: 20px;
    cursor: pointer;
    font-weight: 700;
}

.todo-filters { display: flex; gap: 6px; }
.todo-filter {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #3b3b3b;
    background: #1a1a1a;
    color: #cfd6e0;
    cursor: pointer;
    font-size: 13px;
}
.todo-filter.active { background: #4da6ff; color: #06121f; border-color: #4da6ff; font-weight: 600; }

.todo-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.todo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #1a1a1a;
    border: 1px solid #2c2c2c;
}
.todo-item.done .todo-text { text-decoration: line-through; color: #7a8490; }
.todo-check {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #eee;
    padding: 0;
}
.todo-text { flex: 1; font-size: 15px; }
.todo-del {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.6;
}
.todo-del:hover { opacity: 1; }
.todo-empty { text-align: center; color: #7a8490; padding: 18px; font-size: 14px; }

.todo-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    color: #9aa4b0;
    font-size: 13px;
}
.todo-clear {
    background: none;
    border: none;
    color: #ff8484;
    cursor: pointer;
    font-size: 13px;
}


/* =========================================================
   MUSIC
   ========================================================= */

.music-app {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px;
    gap: 14px;
    overflow: auto;
}

.music-title { margin: 0; font-size: 22px; }

.music-now {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(160deg, #2a2350, #1c1833);
}

.music-art {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    border-radius: 12px;
    background: #14101f;
}

.music-now-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.music-track { font-size: 18px; font-weight: 700; }
.music-status { font-size: 13px; color: #9aa4b0; }

.music-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #9aa4b0;
}
.music-bar {
    flex: 1;
    height: 6px;
    border-radius: 6px;
    background: #2a2a2a;
    overflow: hidden;
}
.music-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4da6ff, #b06bff);
    transition: width 0.2s linear;
}

.music-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.music-ctl {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #3b3b3b;
    background: #1a1a1a;
    color: #eee;
    font-size: 18px;
    cursor: pointer;
}
.music-ctl:hover { background: #2a2a2a; }
.music-ctl.music-play {
    width: 56px;
    height: 56px;
    background: #4da6ff;
    color: #06121f;
    border-color: #4da6ff;
    font-size: 22px;
}
.music-ctl.music-play:hover { background: #6bb7ff; }

.music-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.music-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    cursor: pointer;
    color: #eee;
}
.music-item:hover { background: #242424; }
.music-item.active { border-color: #4da6ff; background: #12283f; }
.music-item-emoji { font-size: 18px; }
.music-item-name { flex: 1; font-size: 15px; }
.music-item-now { color: #4da6ff; font-weight: 700; }
.music-empty { color: #7a8490; padding: 18px; text-align: center; font-size: 14px; }
.music-section { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #7a8490; padding: 10px 10px 4px; }
.music-item-tag { font-size: 12px; color: #7a8490; margin-right: 8px; font-variant-numeric: tabular-nums; }
.music-addrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid #222;
    border-bottom: 1px solid #222; }
.music-addbtn { background: #1d6f3f; color: #fff; border: none; border-radius: 8px; padding: 8px 14px;
    font-size: 14px; font-weight: 600; cursor: pointer; }
.music-addbtn:hover { background: #247e49; }
.music-hint { font-size: 12px; color: #7a8490; }


/* =========================================================
   GALLERY
   ========================================================= */

.gallery-app {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px;
    gap: 14px;
    overflow: auto;
}

.gallery-title { margin: 0; font-size: 22px; }

.gallery-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.gallery-btn {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #3b3b3b;
    background: #1a1a1a;
    color: #eee;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    font-family: inherit;
}
.gallery-btn:hover { background: #2a2a2a; }
.gallery-count { margin-left: auto; color: #9aa4b0; font-size: 13px; }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}
.gallery-tile {
    padding: 0;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4 / 3;
    background: #1a1a1a;
}
.gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.15s ease;
}
.gallery-tile:hover img { transform: scale(1.05); }
.gallery-empty {
    grid-column: 1 / -1;
    color: #7a8490;
    padding: 30px;
    text-align: center;
    font-size: 14px;
}

.gallery-lightbox {
    position: absolute;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.82);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px;
}
.gallery-lightbox img {
    max-width: 90%;
    max-height: 75%;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.gallery-lightbox-btns { display: flex; gap: 8px; }


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

.terminal-app {
    display: flex;
    flex-direction: column;

    padding: 15px;

    background: #0c0c0c;

    color: #eee;

    font-family:
        "Cascadia Code",
        Consolas,
        monospace;

    font-size: 13px;
}

.terminal-output {
    flex: 1;

    overflow: auto;

    line-height: 1.7;

    user-select: text;
}

.terminal-input {
    display: flex;

    gap: 8px;

    padding-top: 8px;
}

.terminal-input span {
    color: #aaa;
}

#terminalInput {
    flex: 1;

    border: none;
    outline: none;

    background: transparent;

    color: white;

    font-family: inherit;

    user-select: text;
}

/* ANSI-ish output colors for the terminal */
.terminal-output .tr-red      { color: #ff6b6b; }
.terminal-output .tr-green    { color: #4ddf91; }
.terminal-output .tr-yellow   { color: #ffd84d; }
.terminal-output .tr-blue     { color: #4da6ff; }
.terminal-output .tr-magenta  { color: #ff72c6; }
.terminal-output .tr-cyan     { color: #5ee7e7; }
.terminal-output .tr-white    { color: #ffffff; }


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

.start-menu {
    position: absolute;

    left: 10px;
    bottom: 68px;

    width: 360px;

    padding: 14px;

    background: #202020;

    border:
        1px solid #3a3a3a;

    border-radius: 9px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.55);

    z-index: 500;

    animation: startOpen 0.14s ease;
}

@keyframes startOpen {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.start-header {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 8px;
}

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

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

    border-radius: 50%;

    background: #eee;

    color: #151515;

    font-size: 18px;
    font-weight: bold;
}

.start-user-info strong,
.start-user-info span {
    display: block;
}

.start-user-info strong {
    font-size: 14px;
}

.start-user-info span {
    margin-top: 3px;

    font-size: 11px;

    color: #999;
}


/* =========================================================
   START SEARCH
   ========================================================= */

.start-search {
    margin-top: 12px;
}

.start-search input {
    width: 100%;

    padding: 10px 12px;

    border:
        1px solid #3b3b3b;

    border-radius: 5px;

    outline: none;

    background: #151515;

    color: white;
}

.start-search input:focus {
    border-color: #666;
}

.start-search input::placeholder {
    color: #777;
}


/* =========================================================
   START APPS
   ========================================================= */

.start-section-title {
    margin: 18px 5px 8px;

    color: #999;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.start-apps {
    display: grid;

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

    gap: 5px;
}

.start-app {
    min-height: 78px;

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

    gap: 7px;

    border-radius: 6px;

    background: transparent;

    color: white;
}

.start-app:hover {
    background: #303030;
}

.start-app span {
    font-size: 25px;
}

.start-app label {
    font-size: 11px;

    cursor: pointer;
}


/* =========================================================
   START FOOTER
   ========================================================= */

.start-footer {
    display: flex;

    gap: 5px;

    margin-top: 15px;
    padding-top: 10px;

    border-top:
        1px solid #333;
}

.start-footer button {
    flex: 1;

    padding: 9px 5px;

    border-radius: 5px;

    background: #292929;

    color: #ddd;

    font-size: 10px;
}

.start-footer button:hover {
    background: #363636;
}


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

.taskbar {
    position: absolute;

    left: 10px;
    right: 10px;
    bottom: 10px;

    height: 50px;

    display: flex;
    align-items: center;

    padding: 5px;

    background: rgba(24, 24, 24, 0.94);

    border:
        1px solid #333;

    border-radius: 8px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35);

    z-index: 600;
}


/* =========================================================
   START BUTTON
   ========================================================= */

.start-button {
    width: 40px;
    height: 40px;

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

    border-radius: 6px;

    background: #292929;

    color: white;
}

.start-button:hover {
    background: #373737;
}

.hyper-symbol {
    width: 25px;
    height: 25px;

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

    border-radius: 5px;

    background: var(--accent);

    color: #151515;

    font-weight: 900;
}


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

.taskbar-apps {
    display: flex;

    align-items: center;

    gap: 4px;

    margin-left: 6px;
}

.taskbar-app {
    width: 40px;
    height: 40px;

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

    border-radius: 6px;

    background: transparent;

    color: white;

    font-size: 20px;
}

.taskbar-app:hover {
    background: #303030;
}

.taskbar-app.active {
    background: rgba(var(--accent-rgb), 0.18);

    box-shadow:
        inset 0 -2px var(--accent);
}

.taskbar-spacer {
    flex: 1;
}


/* =========================================================
   SYSTEM TRAY
   ========================================================= */

.system-tray {
    display: flex;
    align-items: center;
}

.tray-button {
    width: 35px;
    height: 38px;

    border-radius: 5px;

    background: transparent;

    color: #ccc;
}

.tray-button:hover {
    background: #303030;
}

.clock {
    min-width: 58px;

    height: 38px;

    border-radius: 5px;

    background: transparent;

    color: #ddd;

    font-size: 11px;
}

.clock:hover {
    background: #303030;
}


/* =========================================================
   SYSTEM TRAY POPUP
   ========================================================= */

.tray-panel {
    position: fixed;
    right: 10px;
    bottom: 52px;

    min-width: 250px;

    padding: 12px;

    background: #232527;
    border: 1px solid #333;
    border-radius: 10px;

    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);

    z-index: 99999;
}

.tray-panel.hidden {
    display: none;
}

.tray-view {}

.tray-view.hidden {
    display: none;
}

.tray-title {
    font-size: 13px;
    font-weight: 600;

    margin-bottom: 10px;

    color: #eee;
}

.tray-row {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 8px;
}

.tray-label {
    color: #aaa;

    font-size: 14px;
}

.tray-num {
    min-width: 38px;

    text-align: center;

    color: #ddd;

    font-size: 12px;
}

.tray-check {
    display: flex;
    align-items: center;

    gap: 6px;

    color: #ddd;

    font-size: 12px;

    cursor: pointer;
}

.tray-spacer {
    flex: 1;
}

.tray-btn {
    padding: 5px 10px;

    border-radius: 6px;

    border: 1px solid #444;

    background: #333;

    color: #eee;

    font-size: 12px;

    cursor: pointer;
}

.tray-btn:hover {
    background: #444;
}

.tray-net-row {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 8px 6px;

    border-radius: 6px;
}

.tray-net-row:hover {
    background: #2b2d30;
}

.tray-wifi {
    font-size: 20px;
}

.tray-net-name {
    color: #eee;

    font-size: 13px;
}

.tray-net-status {
    color: #8ac98a;

    font-size: 12px;
}

.tray-sig {
    color: #aaa;

    font-size: 11px;
}

#trayVolume {
    flex: 1;

    accent-color: #4da6ff;
}


.context-menu {
    position: fixed;

    width: 190px;

    padding: 5px;

    background: #202020;

    border:
        1px solid #3b3b3b;

    border-radius: 6px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.5);

    z-index: 2000;
}

.context-menu button {
    width: 100%;

    padding: 9px 11px;

    text-align: left;

    border-radius: 4px;

    background: transparent;

    color: #ddd;

    font-size: 12px;
}

.context-menu button:hover {
    background: #333;
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #3a3a3a;

    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4b4b4b;
}


/* =========================================================
   SELECTION
   ========================================================= */

::selection {
    background: #555;
    color: white;
}


/* =========================================================
   LIGHT THEME
   ========================================================= */

body.light-theme {
    background: #eee;
    color: #111;
}

body.light-theme .desktop {
    background: #ddd;
}

body.light-theme .wallpaper {
    background:
        linear-gradient(
            135deg,
            #dfe5eb,
            #bfc8d2
        );
}

body.light-theme .taskbar,
body.light-theme .start-menu,
body.light-theme .os-window {
    background: rgba(245, 245, 245, 0.96);

    color: #111;

    border-color: #ccc;
}

body.light-theme .window-header {
    background: #e7e7e7;

    border-color: #ccc;
}

body.light-theme .app-content {
    background: #f4f4f4;

    color: #111;
}

body.light-theme .start-search input,
body.light-theme .files-toolbar input,
body.light-theme .calculator-display {
    background: white;

    color: #111;

    border-color: #ccc;
}

body.light-theme .notes-compose-box,
body.light-theme .note-card {
    background: white;
    color: #202124;
    border-color: #d0d0d0;
}
body.light-theme #notesTitle,
body.light-theme #notesText {
    color: #202124;
}
body.light-theme .notes-icon-btn {
    background: rgba(0,0,0,0.06);
    color: #202124;
}
body.light-theme .notes-icon-btn:hover { background: rgba(0,0,0,0.1); }
body.light-theme .notes-nav-btn { color: #5f6368; }
body.light-theme #notesSearch { background: white; color: #202124; border-color: #d0d0d0; }
body.light-theme .notes-editor { background: white; color: #202124; }
body.light-theme .notes-editor-overlay { background: rgba(0,0,0,0.35); }
body.light-theme .color-popup {
    background: white;
    color: #202124;
    border-color: #d0d0d0;
}

/* Games light theme */
body.light-theme .game-card,
body.light-theme .game-back,
body.light-theme .game-action,
body.light-theme .mem-card {
    background: white;
    color: #202124;
    border-color: #d0d0d0;
}
body.light-theme .game-card:hover,
body.light-theme .game-back:hover,
body.light-theme .game-action:hover { background: #f1f3f4; }
body.light-theme .game-card-desc { color: #5f6368; }
body.light-theme .game-hud { color: #5f6368; }
body.light-theme .game-hud b { color: #137333; }
body.light-theme .game-help { color: #80868b; }
body.light-theme #snakeCanvas,
body.light-theme .tile-grid,
body.light-theme .rx-box { background: #f1f3f4; border-color: #d0d0d0; }
body.light-theme .tile { background: #e0e0e0; color: #202124; }
body.light-theme .rx-target { background: #f9ab00; color: white; }
body.light-theme .mem-card.open { background: #e6f4ea; }
body.light-theme .mem-card.matched { background: #d3eedd; color: #137333; }
body.light-theme .ttt-cell { background: white; border-color: #d0d0d0; color: #202124; }
body.light-theme .ttt-cell:hover { background: #f1f3f4; }

body.light-theme .start-app:hover,
body.light-theme .start-footer button:hover,
body.light-theme .desktop-icon:hover,
body.light-theme .tray-button:hover {
    background: #ddd;
}

body.light-theme .tray-panel {
    background: #ffffff;
    border-color: #d6d6d6;

    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
}

body.light-theme .tray-title { color: #202124; }
body.light-theme .tray-label { color: #5f6368; }
body.light-theme .tray-num { color: #202124; }
body.light-theme .tray-check { color: #202124; }
body.light-theme .tray-btn {
    background: #f1f3f4;
    border-color: #dadce0;
    color: #202124;
}
body.light-theme .tray-btn:hover { background: #e8eaed; }
body.light-theme .tray-net-row:hover { background: #f1f3f4; }
body.light-theme .tray-net-name { color: #202124; }
body.light-theme .tray-sig { color: #5f6368; }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

    .os-window {
        left: 4% !important;
        top: 5% !important;

        width: 92% !important;
        height: 75% !important;
    }

    .start-menu {
        left: 8px;

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

    .desktop-icons {
        left: 10px;
        top: 10px;

        grid-template-columns: repeat(auto-fill, 74px);
    }
}


@media (max-height: 600px) {

    .taskbar {
        bottom: 5px;
    }

    .os-window {
        height: 70%;
    }
}

/* =========================================================
   SETTINGS APP
   ========================================================= */

.settings-app {
    width: 100%;
    height: 100%;
    display: flex;
    background: #181818;
}


/* SIDEBAR */

.settings-sidebar {
    width: 190px;
    flex-shrink: 0;
    padding: 12px;
    background: #202020;
    border-right: 1px solid #333;
    overflow-y: auto;
}

.settings-sidebar-title {
    padding: 10px 9px 15px;
    font-size: 20px;
    font-weight: 700;
}

.settings-tab {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px;
    margin-bottom: 4px;

    text-align: left;

    border-radius: 6px;

    background: transparent;
    color: #aaa;

    font-size: 12px;

    transition: .15s;
}

.settings-tab:hover {
    background: #2d2d2d;
    color: white;
}

.settings-tab.active {
    background: rgba(255,255,255,.1);
    color: white;
}


/* MAIN AREA */

.settings-main {
    flex: 1;
    min-width: 0;

    padding: 25px;

    overflow-y: auto;
}


/* SEARCH */

.settings-search {
    margin-bottom: 25px;
}

.settings-search-input {
    width: 100%;
    height: 38px;

    padding: 0 13px;

    border: 1px solid #383838;
    border-radius: 6px;

    outline: none;

    background: #111;
    color: white;

    font-size: 13px;
}

.settings-search-input:focus {
    border-color: white;
}

.settings-search-input::placeholder {
    color: #777;
}


/* PAGES */

.settings-page {
    display: none;
}

.settings-page.active {
    display: block;
}

.settings-page h2 {
    margin-bottom: 5px;
    font-size: 24px;
}

.settings-page > p {
    margin-bottom: 22px;
    color: #888;
    font-size: 13px;
}


/* SETTINGS CARDS */

.setting-card {
    margin-bottom: 14px;
    padding: 18px;

    border: 1px solid #333;
    border-radius: 8px;

    background: #202020;
}

.setting-card h3 {
    margin-bottom: 5px;
    font-size: 15px;
}

.setting-card > p {
    margin-bottom: 14px;
    color: #888;
    font-size: 12px;
}


/* THEME BUTTONS */

.theme-buttons {
    display: flex;
    gap: 8px;
}

.theme-buttons button {
    padding: 9px 18px;

    border-radius: 5px;

    background: #303030;
    color: white;
}

.theme-buttons button:hover {
    background: #3d3d3d;
}


/* ACCENT COLOURS */

.accent-buttons {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.accent-buttons button {
    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: var(--accent);

    border: 2px solid #555;

    box-shadow:
        inset 0 0 0 4px #202020;

    cursor: pointer;

    transition: .15s;
}

.accent-buttons button:hover {
    transform: scale(1.12);
}

.accent-buttons button.active {
    border-color: white;
    transform: scale(1.12);
}


/* WALLPAPER */

.wallpaper-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(120px, 1fr));

    gap: 12px;
}

.wallpaper-option {
    min-height: 100px;

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

    gap: 8px;

    border: 1px solid #333;
    border-radius: 8px;

    background: #202020;
    color: #ddd;

    transition: .15s;
}

.wallpaper-option:hover {
    transform: translateY(-2px);
    border-color: white;
}

.wallpaper-option span {
    font-size: 30px;
}


/* TOGGLES */

.toggle-setting {
    min-height: 45px;

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

    border-bottom: 1px solid #303030;

    color: #ddd;

    font-size: 13px;
}

.toggle-setting:last-child {
    border-bottom: none;
}


/* TOGGLE SWITCH */

.toggle-setting input {
    appearance: none;

    position: relative;

    width: 42px;
    height: 22px;

    border-radius: 20px;

    background: #444;

    cursor: pointer;

    transition: .2s;
}

.toggle-setting input::after {
    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    background: white;

    transition: .2s;
}

.toggle-setting input:checked {
    background: white;
}

.toggle-setting input:checked::after {
    left: 23px;
    background: #111;
}


/* VOLUME */

.volume-setting {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 18px;

    color: #ddd;

    font-size: 13px;
}

.volume-setting input {
    flex: 1;
    accent-color: white;
}

.volume-setting strong {
    width: 40px;

    text-align: right;

    color: white;
}


/* RESET */

.danger-card {
    border-color: rgba(255,70,70,.25);
}

.danger-button {
    padding: 9px 15px;

    border-radius: 5px;

    background: #552727;

    color: #ffbaba;
}

.danger-button:hover {
    background: #713030;
}


/* ABOUT */

.about-logo {
    width: 75px;
    height: 75px;

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

    margin-bottom: 15px;

    border-radius: 18px;

    background: white;
    color: #111;

    font-size: 42px;
    font-weight: 900;
}

.about-info {
    margin-top: 20px;

    border: 1px solid #333;
    border-radius: 8px;

    overflow: hidden;
}

.about-info div {
    min-height: 42px;

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

    padding: 0 14px;

    border-bottom: 1px solid #303030;
}

.about-info div:last-child {
    border-bottom: none;
}

.about-info span {
    color: #888;
    font-size: 12px;
}

.about-info strong {
    color: #ddd;
    font-size: 12px;
}


/* LIGHT THEME */

body.light-theme .settings-app {
    background: #f4f4f4;
    color: #111;
}

body.light-theme .settings-sidebar {
    background: #e8e8e8;
    border-color: #ccc;
}

body.light-theme .settings-tab {
    color: #555;
}

body.light-theme .settings-tab:hover {
    background: #ddd;
    color: #111;
}

body.light-theme .settings-tab.active {
    background: #d5d5d5;
    color: #111;
}

body.light-theme .settings-search-input {
    background: white;
    color: #111;
    border-color: #ccc;
}

body.light-theme .setting-card,
body.light-theme .wallpaper-option {
    background: white;
    border-color: #ccc;
}

body.light-theme .toggle-setting {
    color: #222;
    border-color: #ddd;
}

/* =========================================================
   YOUR DESKTOP WALLPAPERS + ACCENT COLOURS
   ========================================================= */

:root {
    --accent: #ffffff;
    --accent-rgb: 255, 255, 255;
}

/* ---------- WALLPAPERS ---------- */

body.wallpaper-default .wallpaper {
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.08), transparent 30%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,.05), transparent 35%),
        linear-gradient(135deg, #202020, #101010, #181818);
}

body.wallpaper-blue .wallpaper {
    background:
        radial-gradient(circle at 20% 20%, rgba(50,150,255,.35), transparent 30%),
        radial-gradient(circle at 80% 80%, rgba(0,100,255,.2), transparent 35%),
        linear-gradient(135deg, #06152d, #0b3766, #050b18);
}

body.wallpaper-purple .wallpaper {
    background:
        radial-gradient(circle at 70% 20%, rgba(180,80,255,.4), transparent 30%),
        radial-gradient(circle at 20% 80%, rgba(100,40,255,.2), transparent 35%),
        linear-gradient(135deg, #160624, #3c1264, #0c0416);
}

body.wallpaper-green .wallpaper {
    background:
        radial-gradient(circle at 20% 70%, rgba(40,220,120,.35), transparent 30%),
        radial-gradient(circle at 80% 20%, rgba(0,180,100,.2), transparent 35%),
        linear-gradient(135deg, #04170e, #0b4b2b, #030c07);
}

body.wallpaper-sunset .wallpaper {
    background:
        radial-gradient(circle at 70% 25%, rgba(255,170,60,.45), transparent 30%),
        radial-gradient(circle at 20% 80%, rgba(255,70,50,.25), transparent 35%),
        linear-gradient(135deg, #2b0b08, #762514, #18050b);
}


/* ---------- ACCENT ---------- */

.settings-tab.active {
    color: var(--accent);
    background: rgba(var(--accent-rgb), .12);
}

.settings-tab:hover {
    border-color: var(--accent);
}

.theme-buttons button:hover {
    border-color: var(--accent);
}

.accent-buttons button {
    background: var(--button-accent);
}

.about-logo {
    background: var(--accent);
}

.volume-setting strong {
    color: var(--accent);
}

.volume-setting input {
    accent-color: var(--accent);
}

.wallpaper-option:hover {
    border-color: var(--accent);
}

#bootLoader {
    background: var(--accent);
}

/* =========================================================
   RIGHT CLICK MENU
   ========================================================= */

.context-menu {
    position: fixed;

    min-width: 190px;

    padding: 6px;

    z-index: 99999;

    background: rgba(30, 30, 30, .96);

    border: 1px solid #444;

    border-radius: 8px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .5);

    backdrop-filter: blur(18px);

    animation: contextMenuIn .12s ease;
}

.context-menu button {
    width: 100%;

    display: block;

    padding: 9px 12px;

    border: none;

    border-radius: 5px;

    background: transparent;

    color: #eee;

    text-align: left;

    font-size: 13px;

    cursor: pointer;
}

.context-menu button:hover {
    background: rgba(var(--accent-rgb), .16);

    color: var(--accent);
}

.context-menu .menu-separator {
    height: 1px;

    margin: 5px 6px;

    background: #3a3a3a;
}

.context-menu .files-upload,
.context-menu label {
    width: 100%;

    display: block;

    padding: 9px 12px;

    border: none;

    border-radius: 5px;

    background: transparent;

    color: #eee;

    text-align: left;

    font-size: 13px;

    cursor: pointer;
    box-sizing: border-box;
}

.context-menu .files-upload:hover,
.context-menu label:hover {
    background: rgba(var(--accent-rgb), .16);

    color: var(--accent);
}

.context-menu.hidden {
    display: none;
}

@keyframes contextMenuIn {

    from {
        opacity: 0;
        transform: scale(.96);
    }

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

}


/* LIGHT MODE */

body.light-theme .context-menu {
    background: rgba(245, 245, 245, .96);

    border-color: #ccc;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .2);
}

body.light-theme .context-menu button {
    color: #222;
}

body.light-theme .context-menu button:hover {
    background: rgba(var(--accent-rgb), .12);

    color: var(--accent);
}

/* =========================================================
   NOTIFICATION AREA
   ========================================================= */

.notification-area {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.notification-area > * {
    pointer-events: auto;
}


/* =========================================================
   NOTIFICATION CARDS
   ========================================================= */

.notification {
    background: #202020;
    border: 1px solid #3a3a3a;
    border-radius: 7px;
    padding: 14px 18px;
    width: 280px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
    animation: notification-in .2s ease;
    color: #eee;
    font-size: 13px;
}

.notification > strong {
    display: block;
}

.notification .notification-message {
    margin-top: 5px;
    color: #999;
    font-size: 12px;
}

body.light-theme .notification {
    background: #f5f5f5;
    border-color: #ccc;
    color: #222;
}

body.light-theme .notification .notification-message {
    color: #555;
}

@keyframes notification-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* =========================================================
   IN-APP DIALOG BOXES
   ========================================================= */

.dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: dialogFade .15s ease;
}

.dialog-box {
    background: #1c1c1e;
    border: 1px solid #3a3a3e;
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
    width: min(360px, 90vw);
    padding: 20px 22px 18px;
    color: #eee;
    animation: dialogPop .16s ease;
}

.dialog-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.dialog-message {
    font-size: 13px;
    color: #aaa;
    margin-bottom: 14px;
    line-height: 1.5;
    word-break: break-word;
}

.dialog-input {
    width: 100%;
    box-sizing: border-box;
    background: #2a2a2d;
    border: 1px solid #444;
    border-radius: 6px;
    color: #eee;
    padding: 9px 11px;
    font-size: 14px;
    margin-bottom: 16px;
    outline: none;
}

.dialog-input:focus {
    border-color: var(--accent, #4da6ff);
}

.dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.dialog-button {
    background: #2c2c30;
    border: 1px solid #4a4a50;
    color: #e6e6e6;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background .12s ease;
}

.dialog-button:hover {
    background: #3a3a40;
}

.dialog-button.primary {
    background: var(--accent, #4da6ff);
    border-color: var(--accent, #4da6ff);
    color: #111;
    font-weight: 600;
}

.dialog-button.primary:hover {
    filter: brightness(1.1);
}

.dialog-button.danger {
    background: #d64545;
    border-color: #d64545;
    color: #fff;
    font-weight: 600;
}

.dialog-button.danger:hover {
    filter: brightness(1.08);
}

body.light-theme .dialog-overlay {
    background: rgba(0, 0, 0, .25);
}

body.light-theme .dialog-box {
    background: #f7f7f8;
    border-color: #d0d0d4;
    color: #222;
}

body.light-theme .dialog-message {
    color: #555;
}

body.light-theme .dialog-input {
    background: #fff;
    border-color: #ccc;
    color: #222;
}

body.light-theme .dialog-button {
    background: #ececee;
    border-color: #cfcfd4;
    color: #222;
}

body.light-theme .dialog-button:hover {
    background: #e0e0e4;
}

@keyframes dialogFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes dialogPop {
    from {
        opacity: 0;
        transform: scale(.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}