/* ═══════════════════════════════════════════════════════════════════════
   DJ Command Center — OS mode styles (dj-os.css)
   Structural layer (windows, taskbar, launcher) + three skins scoped by
   html[data-os-skin="glass" | "retro" | "aqua"]. Classic mode loads none
   of this (html has no data-os attribute), so dj.css stays authoritative.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Mode switch: hide the classic chrome, host the desktop ─────────────── */
html[data-os] { --os-bar-h: 52px; }
html[data-os] .sidebar,
html[data-os] .mobile-menu-btn,
html[data-os] .sidebar-scrim,
html[data-os] #mainContent { display: none !important; }

/* In OS mode chat is its own app window (💬 Live Chat), not a bottom-bar overlay. */
html[data-os] .chat-taskbar { display: none !important; }
html[data-os] .chat-list-popup { display: none !important; }

#osRoot { position: relative; flex: 1; z-index: 1; overflow: hidden; min-width: 0; }
.os-desktop { position: absolute; inset: 0 0 var(--os-bar-h) 0; overflow: hidden; }

/* ── Desktop icons + brand mark ─────────────────────────────────────────── */
/* Icons sit on a strict grid: fixed 96×96 cells so wrapped columns (and the
   right-hand event column) line up row-for-row no matter how long labels get. */
.os-icons { position: absolute; top: 14px; left: 12px; bottom: 10px; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 4px; pointer-events: none; }
.os-icons-right { left: auto; right: 12px; align-content: flex-end; }
.os-icon { pointer-events: auto; width: 96px; height: 96px; padding: 10px 4px 6px; text-align: center; border-radius: 10px; cursor: pointer; user-select: none; border: 1px solid transparent; display: flex; flex-direction: column; align-items: center; overflow: hidden; flex: 0 0 auto; }
.os-icon:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); }
.os-icon:active { background: rgba(255, 255, 255, 0.14); }
.os-icon .ico { font-size: 30px; line-height: 1.15; height: 36px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)); position: relative; }
.os-icon .lbl { font-size: 11.5px; margin-top: 4px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; max-width: 92px; }
.os-icon-live { position: absolute; top: -3px; right: -10px; width: 10px; height: 10px; border-radius: 50%; background: var(--approved); box-shadow: 0 0 8px var(--approved); animation: osPulse 1.6s ease-in-out infinite; }
.os-brandmark { position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; font-size: 34px; font-weight: 800; letter-spacing: 0.02em; opacity: 0.13; color: #fff; pointer-events: none; user-select: none; display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.os-brand-logo { height: 44px; max-width: 180px; object-fit: contain; }
.os-start-logo { height: 20px; max-width: 40px; object-fit: contain; border-radius: 4px; display: block; }

/* ── Windows ────────────────────────────────────────────────────────────── */
.os-window { position: absolute; display: flex; flex-direction: column; min-width: 320px; min-height: 220px; border-radius: 14px; overflow: hidden; }
.os-window.maximized { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
.osw-titlebar { height: 38px; flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 0 8px 0 13px; user-select: none; touch-action: none; }
.osw-ico { font-size: 15px; }
.osw-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osw-controls { display: flex; gap: 5px; }
.osw-btn { width: 27px; height: 27px; border: 0; border-radius: 8px; cursor: pointer; display: grid; place-items: center; font-size: 12px; line-height: 1; background: transparent; color: inherit; padding: 0; }
.osw-body { flex: 1; overflow: auto; position: relative; padding: 1.5rem; background: var(--bg); min-height: 0; }

/* ── Live Chat app (two panes: conversations | active thread) ───────────── */
.lcw { display: flex; gap: 0; height: calc(100% + 3rem); min-height: 0; margin: -1.5rem; } /* fill the window body edge-to-edge (margins cancel the 1.5rem padding; height adds it back) */
.lcw-side { width: 250px; min-width: 200px; flex: 0 0 auto; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--bg2); }
.lcw-tabs { display: flex; gap: 5px; padding: 9px 10px 0; }
.lcw-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; color: var(--text2); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.lcw-tab:hover { background: var(--card2); }
.lcw-tab.active { background: var(--accent-dim); border-color: var(--accent); color: var(--text); }
.lcw-head { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.lcw-head-lbl { font-weight: 700; font-size: 13px; }
.lcw-count { margin-left: auto; font-size: 11.5px; color: var(--text3); }
.lcw-bell { margin-left: 4px; border: 0; background: transparent; cursor: pointer; font-size: 15px; padding: 3px 5px; border-radius: 7px; }
.lcw-bell:hover { background: var(--card2); }
.lcw-bell.off { opacity: 0.55; }
.lcw-bell.hidden { display: none; }
.lcw-refresh { border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 7px; white-space: nowrap; }
.lcw-refresh:hover:not(:disabled) { background: var(--card2); border-color: var(--accent); }
.lcw-refresh:disabled { opacity: 0.55; cursor: default; }
.lcw-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.lcw-item { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 9px 11px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; }
.lcw-item:hover { background: var(--card2); }
.lcw-item.active { background: var(--accent-dim); border-color: var(--accent); }
.lcw-item.unread .lcw-item-name { font-weight: 800; }
.lcw-item-top { display: flex; align-items: center; gap: 8px; }
.lcw-item-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcw-item-preview { font-size: 11.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcw-empty { color: var(--text3); font-size: 12.5px; line-height: 1.55; padding: 14px 12px; }
.lcw-thread { flex: 1; min-width: 0; position: relative; display: flex; }
.lcw-placeholder { margin: auto; text-align: center; color: var(--text3); font-size: 15px; line-height: 2; }
/* 📇 Clients thread pane (messages hub: portal / email / webchat) */
.cmsg-thread { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.cmsg-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.cmsg-chip { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: var(--card2); color: var(--text3); border: 1px solid var(--border); white-space: nowrap; }
.cmsg-subj { font-size: 11.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.cmsg-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.cmsg-msg { max-width: 74%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.cmsg-msg.in { align-self: flex-start; background: var(--card2); border: 1px solid var(--border); }
.cmsg-msg.out { align-self: flex-end; background: var(--accent-dim); border: 1px solid var(--accent); }
.cmsg-when { font-size: 10.5px; color: var(--text3); margin-top: 4px; }
.cmsg-foot { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.cmsg-foot textarea { flex: 1; resize: none; background: var(--card2); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13.5px; }
.cmsg-foot textarea:focus { outline: none; border-color: var(--accent); }

/* The thread pane hosts the real .chat-window element — flatten its floating-widget chrome. */
.lcw-thread .chat-window { position: static; width: 100%; height: 100%; right: auto; bottom: auto; border: 0; border-radius: 0; box-shadow: none; max-height: none; }
.lcw-thread .chat-win-controls button[title="Minimize to bottom bar"] { display: none; } /* no bottom bar to minimize to here */

/* Resize handles (invisible hit zones) */
.osw-rz { position: absolute; z-index: 12; touch-action: none; }
.osw-rz-n { top: -3px; left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
.osw-rz-s { bottom: -3px; left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
.osw-rz-e { right: -3px; top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; }
.osw-rz-w { left: -3px; top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; }
.osw-rz-se { right: -3px; bottom: -3px; width: 16px; height: 16px; cursor: nwse-resize; }
.osw-rz-sw { left: -3px; bottom: -3px; width: 16px; height: 16px; cursor: nesw-resize; }
.os-window.maximized .osw-rz { display: none; }

/* ── Chat pop-up alerts (bottom-right, above the bar) ───────────────────── */
.os-toasts { position: absolute; right: 14px; bottom: 12px; z-index: 9990; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.os-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; width: 300px; max-width: 72vw; padding: 11px 13px; border-radius: 12px; cursor: pointer;
  background: rgba(20, 20, 40, 0.94); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--text);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55); animation: osToastIn 0.22s ease; }
.os-toast.bye { opacity: 0; transform: translateX(12px); transition: opacity 0.26s ease, transform 0.26s ease; }
.os-toast-ico { font-size: 17px; line-height: 1.2; }
.os-toast-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-toast-body b { font-size: 13px; }
.os-toast-msg { font-size: 12.5px; color: var(--text2); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@keyframes osToastIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
/* Retro: XP-style yellow notification balloon */
html[data-os-skin="retro"] .os-toast { background: #ffffe1; border: 1px solid #7a7a5a; color: #1a1a1a; border-radius: 8px; box-shadow: 3px 4px 12px rgba(0, 0, 30, 0.4); }
html[data-os-skin="retro"] .os-toast-msg { color: #444; }

/* New-message indicators: desktop icon counter + taskbar attention pulse */
.os-icon .ico { position: relative; }
.os-icon-badge { position: absolute; top: -5px; right: -12px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--rejected); color: #fff;
  font-size: 10.5px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.os-icon-badge[hidden] { display: none; }
.os-task.attention { animation: osTaskPulse 1.5s ease-in-out infinite; }
@keyframes osTaskPulse { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pending) 65%, transparent), 0 0 14px color-mix(in srgb, var(--pending) 45%, transparent); } }

/* Snap preview */
.os-snap-preview { position: absolute; z-index: 9998; border-radius: 12px; pointer-events: none; border: 2px solid var(--accent); background: var(--accent-dim); transition: left 0.1s ease, width 0.1s ease; }
body.wm-busy iframe { pointer-events: none; }
body.wm-busy { cursor: grabbing; }

/* ── Taskbar ────────────────────────────────────────────────────────────── */
.os-bar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--os-bar-h); display: flex; align-items: center; gap: 7px; padding: 0 8px; z-index: 9999; }
.os-start { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 13px; color: inherit; background: transparent; }
.os-start-ico { font-size: 16px; }
.os-tasks { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.os-tasks::-webkit-scrollbar { display: none; }
.os-task { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; max-width: 200px; border-radius: 9px; cursor: pointer; user-select: none; flex: 0 0 auto; }
.os-task .t-ico { font-size: 14px; }
.os-task .t-lbl { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-task .t-badge { min-width: 18px; height: 18px; border-radius: 9px; background: var(--pending); color: #16130a; font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 5px; }
.os-task .t-badge[hidden] { display: none; } /* author display beats the [hidden] UA rule otherwise */
.os-task.minimized { opacity: 0.55; }
.os-tray { display: flex; align-items: center; gap: 12px; padding: 0 10px 0 12px; font-size: 12.5px; white-space: nowrap; }
.os-user { opacity: 0.75; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.os-clock { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ── Launcher menu ──────────────────────────────────────────────────────── */
.os-menu { position: absolute; left: 8px; bottom: calc(var(--os-bar-h) + 8px); width: 344px; max-height: min(72vh, 640px); overflow-y: auto; z-index: 10000; border-radius: 16px; padding: 10px; }
.os-mg-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px 5px; cursor: pointer; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text3); user-select: none; }
.os-mg-head.static { cursor: default; }
.os-mg-head .chev { font-size: 10px; transition: transform 0.15s ease; }
.os-menu-group.collapsed .chev { transform: rotate(-90deg); }
.os-menu-group.collapsed .os-mg-items { display: none; }
.os-mi { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; cursor: pointer; font-size: 13.5px; user-select: none; }
.os-mi .mi-ico { width: 20px; text-align: center; }
.os-mi.muted { color: var(--text3); cursor: default; font-size: 12.5px; }
.os-live-item .live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--approved); margin-right: 2px; box-shadow: 0 0 8px var(--approved); animation: osPulse 1.6s ease-in-out infinite; }
@keyframes osPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.os-menu-footer { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 10px 6px 2px; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.os-mf-spacer { flex: 1; }
.os-skin-pills { display: flex; gap: 5px; }
.os-skin-pill { padding: 5px 9px; border-radius: 999px; font-size: 11px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: inherit; }
.os-skin-pill.active { border-color: var(--accent); background: var(--accent-dim); }
.os-mf-btn { padding: 6px 11px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: inherit; }
.os-mf-btn.danger:hover { border-color: var(--danger); color: var(--danger); }

/* ── Settings → Dashboard Theme tiles (shown in every theme, incl. classic) ── */
.theme-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0.75rem 0 0.5rem; }
.theme-tile { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg2); cursor: pointer; text-align: left; color: var(--text); transition: border-color 0.15s ease, transform 0.15s ease; }
.theme-tile:hover { border-color: var(--accent-light); transform: translateY(-2px); }
.theme-tile.active { border-color: var(--accent); background: var(--accent-dim); box-shadow: 0 0 0 1px var(--accent); }
.theme-tile .tt-name { font-weight: 700; font-size: 13.5px; }
.theme-tile .tt-desc { font-size: 11.5px; color: var(--text2); line-height: 1.35; }
.tt-preview { position: relative; height: 74px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); }
.tt-preview .tt-win { position: absolute; border-radius: 3px; }
.tt-preview .tt-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; }
.tt-classic { background: #0a0a14; }
.tt-classic .tt-win { left: 0; top: 0; bottom: 0; width: 26%; border-radius: 0; background: #13132a; border-right: 1px solid #1f1f3a; }
.tt-classic .tt-bar { display: none; }
.tt-glass { background: radial-gradient(60px 40px at 20% 0%, rgba(124, 58, 237, 0.5), transparent 70%), #0b0a18; }
.tt-glass .tt-win { left: 22%; top: 16%; width: 52%; height: 55%; background: rgba(30, 30, 58, 0.85); border: 1px solid rgba(139, 92, 246, 0.6); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); }
.tt-glass .tt-bar { background: rgba(20, 20, 40, 0.9); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.tt-retro { background: linear-gradient(180deg, #4a86d8 0%, #7fb2e4 52%, #4a8f3c 56%, #2f6e27 100%); }
.tt-retro .tt-win { left: 24%; top: 14%; width: 50%; height: 52%; background: #ece9d8; border: 1px solid #0831d9; }
.tt-retro .tt-win::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #3a80f0, #1c50c8); }
.tt-retro .tt-bar { background: linear-gradient(180deg, #3a80f0, #1440ad); }
.tt-retro .tt-bar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 22%; border-radius: 0 6px 6px 0; background: linear-gradient(180deg, #4fae4a, #24761f); }
.tt-aqua { background: radial-gradient(70px 40px at 80% 0%, rgba(59, 130, 246, 0.55), transparent 70%), #0e1630; }
.tt-aqua .tt-win { left: 22%; top: 14%; width: 52%; height: 54%; background: rgba(28, 32, 58, 0.92); border: 1px solid rgba(255, 255, 255, 0.22); }
.tt-aqua .tt-win::before { content: ''; position: absolute; left: 4px; top: 3px; width: 4px; height: 4px; border-radius: 50%; background: #ff5f57; box-shadow: 7px 0 0 #febc2e, 14px 0 0 #28c840; }
.tt-aqua .tt-bar { left: 20%; right: 20%; bottom: 3px; border-radius: 5px; background: rgba(255, 255, 255, 0.16); }

/* ═══════════════════ SKIN: GLASS (frosted dark, brand purple) ═══════════ */
html[data-os-skin="glass"] .os-desktop {
  background:
    radial-gradient(1100px 620px at 16% -8%, rgba(124, 58, 237, 0.30), transparent 55%),
    radial-gradient(900px 540px at 88% 112%, rgba(59, 130, 246, 0.17), transparent 60%),
    radial-gradient(700px 400px at 70% 30%, rgba(139, 92, 246, 0.07), transparent 65%),
    linear-gradient(160deg, #0b0a18, #0d0b20 55%, #090911);
}
html[data-os-skin="glass"] .os-window { background: color-mix(in srgb, var(--card) 84%, transparent); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 18px 54px rgba(0, 0, 0, 0.6); }
html[data-os-skin="glass"] .os-window:not(.inactive) { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 22px 64px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--accent-dim), 0 0 34px rgba(124, 58, 237, 0.18); }
html[data-os-skin="glass"] .osw-titlebar { color: var(--text); border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent); }
html[data-os-skin="glass"] .os-window.inactive .osw-titlebar { color: var(--text3); }
html[data-os-skin="glass"] .osw-btn:hover { background: rgba(255, 255, 255, 0.12); }
html[data-os-skin="glass"] .osw-close:hover { background: var(--rejected); color: #fff; }
html[data-os-skin="glass"] .os-bar { background: rgba(14, 14, 28, 0.78); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--text); }
html[data-os-skin="glass"] .os-start:hover, html[data-os-skin="glass"] .os-task:hover { background: rgba(255, 255, 255, 0.09); }
html[data-os-skin="glass"] .os-task.active { background: var(--accent-dim); box-shadow: inset 0 -2px 0 var(--accent); }
html[data-os-skin="glass"] .os-menu { background: rgba(17, 17, 34, 0.92); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65); color: var(--text); }
html[data-os-skin="glass"] .os-mi:hover { background: var(--accent-dim); }

/* ═══════════════════ SKIN: RETRO (XP-style bevels + Bliss) ══════════════ */
html[data-os-skin="retro"] .os-desktop {
  background: linear-gradient(180deg, #2f71cd 0%, #6fa5dc 46%, #8fc0ea 54%, #4a8f3c 56%, #3d7d31 78%, #2f6e27 100%);
}
html[data-os-skin="retro"] .os-window { background: #ece9d8; border: 1px solid #0831d9; border-radius: 8px 8px 3px 3px; box-shadow: 2px 4px 14px rgba(0, 0, 30, 0.45); padding: 0 3px 3px; }
html[data-os-skin="retro"] .osw-titlebar { height: 32px; margin: 0 -3px 0; border-radius: 7px 7px 0 0; color: #fff; font-family: Tahoma, 'Segoe UI', sans-serif; text-shadow: 1px 1px 1px rgba(0, 0, 40, 0.6); background: linear-gradient(180deg, #3a80f0 0%, #1c50c8 8%, #2a68e2 42%, #1c50c8 88%, #1440ad 100%); }
html[data-os-skin="retro"] .os-window.inactive .osw-titlebar { background: linear-gradient(180deg, #98b1e4 0%, #7a96d8 50%, #6e8ccf 100%); }
html[data-os-skin="retro"] .osw-title { font-size: 12.5px; font-weight: 700; }
html[data-os-skin="retro"] .osw-btn { width: 22px; height: 22px; border-radius: 4px; color: #fff; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.55); background: linear-gradient(180deg, #4a8bf5, #2359c9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); }
html[data-os-skin="retro"] .osw-close { background: linear-gradient(180deg, #f0955c, #d9542a 45%, #c33c14); }
html[data-os-skin="retro"] .osw-btn:hover { filter: brightness(1.15); }
html[data-os-skin="retro"] .osw-body { border: 1px solid #a5a294; border-top: 0; }
html[data-os-skin="retro"] .os-bar { background: linear-gradient(180deg, #3a80f0 0%, #245edb 6%, #1e51c4 88%, #1440ad 100%); border-top: 1px solid #0831d9; color: #fff; padding-left: 0; gap: 8px; }
html[data-os-skin="retro"] .os-start { height: 100%; border-radius: 0 12px 12px 0; padding: 0 20px 0 14px; font-family: Tahoma, sans-serif; font-style: italic; font-size: 15px; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); background: linear-gradient(180deg, #4fae4a 0%, #2f8b2b 45%, #24761f 100%); box-shadow: 2px 0 6px rgba(0, 0, 30, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
html[data-os-skin="retro"] .os-start:hover { filter: brightness(1.1); }
html[data-os-skin="retro"] .os-task { background: linear-gradient(180deg, #4a8bf5, #2359c9); color: #fff; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
html[data-os-skin="retro"] .os-task:hover { filter: brightness(1.12); }
html[data-os-skin="retro"] .os-task.active { background: linear-gradient(180deg, #1c48a8, #123a90); box-shadow: inset 0 2px 4px rgba(0, 0, 30, 0.5); }
html[data-os-skin="retro"] .os-task .t-badge { background: #ffb900; color: #221a00; }
html[data-os-skin="retro"] .os-tray { background: linear-gradient(180deg, #1e9ade, #0f77c0); height: 100%; margin: 0 -8px 0 0; padding: 0 14px; border-left: 1px solid #0952a8; box-shadow: inset 2px 0 4px rgba(0, 0, 40, 0.3); }
html[data-os-skin="retro"] .os-menu { background: #fff; border: 1px solid #0831d9; border-radius: 8px 8px 6px 6px; box-shadow: 4px 6px 18px rgba(0, 0, 40, 0.5); color: #1a1a2e; padding-top: 52px; }
html[data-os-skin="retro"] .os-menu::before { content: '🎧 DJ Command Center'; position: absolute; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; padding: 0 14px; border-radius: 7px 7px 0 0; color: #fff; font-weight: 700; font-family: Tahoma, sans-serif; background: linear-gradient(180deg, #3a80f0, #1c50c8 90%); }
html[data-os-skin="retro"] .os-menu { position: absolute; }
html[data-os-skin="retro"] .os-mg-head { color: #7f7c73; }
html[data-os-skin="retro"] .os-mi { color: #1a1a2e; }
html[data-os-skin="retro"] .os-mi:hover { background: #316ac5; color: #fff; }
html[data-os-skin="retro"] .os-mi.muted { color: #9a978c; }
html[data-os-skin="retro"] .os-menu-footer { border-top: 1px solid #d8d5c8; }
html[data-os-skin="retro"] .os-skin-pill, html[data-os-skin="retro"] .os-mf-btn { border-color: #b5b2a5; color: #1a1a2e; }
html[data-os-skin="retro"] .os-skin-pill.active { border-color: #2359c9; background: #dce6f8; }
html[data-os-skin="retro"] .os-icon:hover { background: rgba(49, 106, 197, 0.35); border-color: rgba(255, 255, 255, 0.3); }
html[data-os-skin="retro"] .os-snap-preview { border-color: #1c50c8; background: rgba(28, 80, 200, 0.18); }

/* ═══════════════════ SKIN: AQUA (macOS-style, dock + traffic lights) ════ */
html[data-os-skin="aqua"] { --os-bar-h: 74px; }
html[data-os-skin="aqua"] .os-desktop {
  background:
    radial-gradient(1000px 600px at 78% -10%, rgba(56, 130, 246, 0.28), transparent 58%),
    radial-gradient(900px 600px at 8% 108%, rgba(16, 185, 129, 0.12), transparent 60%),
    linear-gradient(200deg, #0e1630, #131c3f 50%, #0b1226);
}
html[data-os-skin="aqua"] .os-window { background: color-mix(in srgb, #171a30 88%, transparent); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
html[data-os-skin="aqua"] .os-window:not(.inactive) { box-shadow: 0 28px 74px rgba(0, 0, 0, 0.7); border-color: rgba(255, 255, 255, 0.18); }
html[data-os-skin="aqua"] .osw-titlebar { height: 40px; color: var(--text); background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)); border-bottom: 1px solid rgba(255, 255, 255, 0.07); padding: 0 12px; }
html[data-os-skin="aqua"] .osw-controls { order: -2; gap: 8px; }
html[data-os-skin="aqua"] .osw-ico { order: -1; }
html[data-os-skin="aqua"] .osw-title { text-align: center; padding-right: 86px; }
html[data-os-skin="aqua"] .osw-btn { width: 13px; height: 13px; border-radius: 50%; font-size: 0; border: 1px solid rgba(0, 0, 0, 0.25); }
html[data-os-skin="aqua"] .osw-close { background: #ff5f57; order: 0; }
html[data-os-skin="aqua"] .osw-min { background: #febc2e; order: 1; }
html[data-os-skin="aqua"] .osw-max { background: #28c840; order: 2; }
html[data-os-skin="aqua"] .osw-controls:hover .osw-btn { box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.4); }
html[data-os-skin="aqua"] .os-window.inactive .osw-btn { background: #4a4d63; }
html[data-os-skin="aqua"] .os-bar { left: 50%; right: auto; transform: translateX(-50%); bottom: 10px; height: 56px; max-width: min(92%, 1100px); border-radius: 18px; background: rgba(20, 22, 42, 0.66); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 14px 42px rgba(0, 0, 0, 0.55); color: var(--text); padding: 0 10px; }
html[data-os-skin="aqua"] .os-start { border-radius: 12px; }
html[data-os-skin="aqua"] .os-start:hover, html[data-os-skin="aqua"] .os-task:hover { background: rgba(255, 255, 255, 0.1); }
html[data-os-skin="aqua"] .os-task { border-radius: 12px; }
html[data-os-skin="aqua"] .os-task.active { background: rgba(255, 255, 255, 0.13); box-shadow: inset 0 -3px 0 -1px #28c840; }
html[data-os-skin="aqua"] .os-menu { left: 50%; transform: translateX(calc(-50% - 260px)); bottom: calc(var(--os-bar-h) + 4px); background: rgba(22, 24, 46, 0.92); backdrop-filter: blur(26px) saturate(1.4); -webkit-backdrop-filter: blur(26px) saturate(1.4); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65); color: var(--text); }
html[data-os-skin="aqua"] .os-mi:hover { background: rgba(59, 130, 246, 0.25); }
html[data-os-skin="aqua"] .os-snap-preview { border-color: #3b82f6; background: rgba(59, 130, 246, 0.14); }