/* os.css — RPX OS desktop shell (luxury flat, no glow, vanilla) */
#os-boot {
    position: fixed; inset: 0; z-index: 1000;
    background: #0e0f13;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem;
    cursor: pointer;
}
#os-boot.done { display: none; }
#os-boot .boot-logo { font-family: 'JetBrains Mono', monospace; font-size: 1.6rem; letter-spacing: 6px; color: #f2efe8; }
#os-boot .boot-logo span { color: #c8a45d; }
#os-boot .boot-bar { width: 220px; height: 2px; background: #26282f; overflow: hidden; }
#os-boot .boot-bar i { display: block; height: 100%; width: 40%; background: #c8a45d; animation: bootSlide 1s linear infinite; }
@keyframes bootSlide { from { transform: translateX(-100%); } to { transform: translateX(320%); } }
#os-boot .boot-skip { font-size: 0.7rem; color: #8f8c84; font-family: 'JetBrains Mono', monospace; }

#os-desktop {
    position: fixed; inset: 0; z-index: 50;
    background: #0e0f13;
    border-top: 2px solid #1c1e24;
    overflow: hidden;
    display: none;
    user-select: none;
}
body.os #os-desktop { display: block; }
body.os .navbar, body.os footer, body.os .bg-static { display: none; }

.dos-icons { position: absolute; inset: 0; }
.dos-icon {
    position: absolute; width: 92px; padding: 8px 4px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    cursor: pointer; border: 1px solid transparent; border-radius: 6px;
    text-align: center; touch-action: none;
}
.dos-icon .di-glyph {
    width: 46px; height: 46px; border-radius: 10px;
    background: #16181d; border: 1px solid #26282f;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; color: #c8a45d;
}
.dos-icon .di-label { font-size: 0.68rem; color: #d6d3cb; line-height: 1.25; word-break: break-word; }
.dos-icon.sel { background: rgba(200,164,93,0.12); border-color: #4a4e58; }
.dos-icon.dragging { opacity: 0.85; z-index: 60; }

/* Windows */
.os-win {
    position: absolute; min-width: 320px; min-height: 200px;
    width: 960px; max-width: calc(100vw - 16px); max-height: calc(100vh - 120px);
    background: #16181d; border: 1px solid #4a4e58; border-radius: 8px;
    display: flex; flex-direction: column; overflow: hidden;
    resize: both;
}
.os-win.hidden { display: none; }
.os-win.focused { border-color: #c8a45d; }
.os-win.maxed { left: 0 !important; top: 0 !important; width: 100vw !important; height: calc(100vh - 44px) !important; resize: none; border-radius: 0; }
.os-titlebar {
    display: flex; align-items: center; gap: 8px;
    padding: 0 6px 0 12px; height: 38px; flex-shrink: 0;
    background: #1c1e24; border-bottom: 1px solid #26282f;
    cursor: grab; touch-action: none;
}
.os-titlebar:active { cursor: grabbing; }
.os-titlebar .tb-icon { color: #c8a45d; font-size: 0.8rem; }
.os-titlebar .tb-title { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 1px; color: #f2efe8; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-titlebar .tb-btns { display: flex; gap: 2px; }
.tb-btn {
    width: 34px; height: 28px; border: none; background: transparent;
    color: #8f8c84; cursor: pointer; font-size: 0.7rem; border-radius: 4px;
}
.tb-btn:hover { background: rgba(255,255,255,0.07); color: #f2efe8; }
.tb-btn.close:hover { background: #7a2e35; color: #fff; }
.os-win-body { flex: 1; overflow: auto; }
.os-win-body > .page { display: none; padding: 1.5rem; max-width: none; animation: none; }
.os-win-body > .page.active { display: block; }

/* Folder view */
.os-folder { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; padding: 0.5rem; }
.os-folder .dos-icon { position: static; }

/* Taskbar */
#os-taskbar {
    position: fixed; left: 0; right: 0; bottom: 0; height: 44px; z-index: 200;
    background: #121317; border-top: 1px solid #26282f;
    display: none; align-items: center; gap: 6px; padding: 0 8px;
}
body.os #os-taskbar { display: flex; }
#os-start {
    font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 1px;
    background: transparent; border: 1px solid #26282f; color: #c8a45d;
    border-radius: 6px; padding: 6px 14px; cursor: pointer; white-space: nowrap;
}
#os-start:hover, #os-start.open { border-color: #c8a45d; }
#os-tasks { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.os-task {
    font-family: 'JetBrains Mono', monospace; font-size: 0.68rem;
    background: transparent; border: 1px solid transparent; color: #8f8c84;
    border-radius: 6px; padding: 6px 10px; cursor: pointer; white-space: nowrap;
    max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}
.os-task:hover { color: #f2efe8; }
.os-task.active { border-color: #4a4e58; color: #f2efe8; background: #1c1e24; }
#os-tray { display: flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: #8f8c84; white-space: nowrap; }
#os-tray .pull-pill { margin: 0; }
#os-clock { min-width: 44px; text-align: right; }

/* Start menu */
#os-startmenu {
    position: fixed; left: 8px; bottom: 50px; z-index: 300;
    width: 260px; background: #16181d; border: 1px solid #4a4e58; border-radius: 8px;
    padding: 6px; display: none;
}
#os-startmenu.open { display: block; }
#os-startmenu button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: transparent; border: none; color: #d6d3cb;
    font-size: 0.8rem; padding: 9px 10px; border-radius: 6px; cursor: pointer; text-align: left;
}
#os-startmenu button:hover { background: rgba(200,164,93,0.12); }
#os-startmenu button i { color: #c8a45d; width: 18px; text-align: center; }
#os-startmenu hr { border: none; border-top: 1px solid #26282f; margin: 4px 0; }

/* Context menu */
#os-ctxmenu {
    position: fixed; z-index: 400; min-width: 190px;
    background: #16181d; border: 1px solid #4a4e58; border-radius: 8px;
    padding: 4px; display: none;
}
#os-ctxmenu.open { display: block; }
#os-ctxmenu button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: transparent; border: none; color: #d6d3cb;
    font-size: 0.78rem; padding: 8px 10px; border-radius: 6px; cursor: pointer; text-align: left;
}
#os-ctxmenu button:hover { background: rgba(200,164,93,0.12); }
#os-ctxmenu button i { color: #c8a45d; width: 16px; text-align: center; }

/* Personalize */
.wp-row { display: flex; gap: 0.5rem; margin: 0.7rem 0; align-items: center; flex-wrap: wrap; }
.wp-row input {
    font-family: 'JetBrains Mono', monospace; font-size: 0.75rem;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    color: var(--text-bright); border-radius: 6px; padding: 8px 10px;
}
.wp-swatch {
    width: 44px; height: 30px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--border-hover);
}
.wp-swatch:hover { border-color: var(--gold); }
body.wp-custom .dos-icon .di-label { text-shadow: 0 1px 3px #000; }

/* Mobile drawer */
#os-drawer { display: none; }
body.mobile-os { overflow: hidden; }
body.mobile-os .navbar, body.mobile-os footer, body.mobile-os .bg-static { display: none; }
body.mobile-os #os-drawer {
    display: flex; position: fixed; inset: 0; z-index: 50;
    background: #0e0f13; flex-direction: column;
}
#os-drawer-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid #26282f;
    font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; letter-spacing: 2px; color: #c8a45d;
}
#os-drawer-grid {
    flex: 1; overflow-y: auto; padding: 20px 16px 40px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-content: start;
}
.dos-icon .di-glyph.exe {
    color: #d6d3cb;
    border-style: double;
    border-width: 3px;
}
#os-drawer-grid .dos-icon { position: static; width: auto; }
body.mobile-os .os-win { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; resize: none; border-radius: 0; border: none; z-index: 60; }
body.mobile-os #os-taskbar { display: none; }
body.mobile-os .os-titlebar { cursor: default; }

/* Lite mode: hide all OS chrome */
body.lite #os-boot, body.lite #os-desktop, body.lite #os-taskbar,
body.lite #os-startmenu, body.lite #os-drawer { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    #os-boot .boot-bar i { animation: none; }
    .os-win { resize: none; }
}