:root{ --win:#1f6feb; --mac:#2e2e2e; --linux:#2b4b3f }
*{ box-sizing:border-box }
body{ user-select:none }

/* Taskbars */
.taskbar{ position:fixed; left:0; right:0; z-index:40; display:flex; align-items:center; justify-content:space-between; padding:6px 10px; backdrop-filter:saturate(140%) blur(8px); border-color:rgba(255,255,255,.08); border-style:solid }
.taskbar-mac{ top:0; background:rgba(30,30,30,.6); border-bottom-width:1px }
.taskbar-win{ bottom:0; background:rgba(20,20,20,.65); border-top-width:1px }
.taskbar-linux{ position:fixed; top:0; bottom:0; width:56px; left:0; background:rgba(20,35,30,.6); border-right-width:1px; z-index:40 }
.task-btn{ width:32px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; color:#e5e7eb; background:rgba(255,255,255,.05) }
.task-btn:hover{ background:rgba(255,255,255,.12) }
.task-logo{ height:20px; width:auto; display:block }

.linux-open-apps{ display:flex; flex-direction:column; gap:10px; margin-top:18px; width:100%; align-items:center }
.linux-open-item{ position:relative; width:100%; display:flex; justify-content:center }
.linux-open-btn{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); color:#e5e7eb; display:flex; align-items:center; justify-content:center; transition:background .15s ease, transform .15s ease }
.linux-open-btn:hover{ background:rgba(255,255,255,.18); transform:translateY(-1px) }
.linux-open-btn.active{ outline:2px solid rgba(255,255,255,.35) }
.linux-open-btn.minimized{ opacity:.6 }
.linux-open-tooltip{ position:absolute; left:56px; top:50%; transform:translateY(-50%) translateX(-4px); background:rgba(14,21,38,.92); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:4px 8px; font-size:11px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease }
.linux-open-item:hover .linux-open-tooltip{ opacity:1; transform:translateY(-50%) translateX(0) }

/* Windows taskbar open items */
#taskbar-windows-open{ display:flex; align-items:center; gap:6px }
.task-item{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 8px; border-radius:8px; background:rgba(255,255,255,.06); color:#e5e7eb; font-size:12px }
.task-item:hover{ background:rgba(255,255,255,.12) }
.task-item .ti-icon{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center }
.task-item.active{ outline:2px solid rgba(255,255,255,.25) }
.task-item.minimized{ opacity:.7 }

/* Desktop */
.desktop{ position:fixed; inset:0; padding:60px 12px 44px 12px; background-size:cover; background-position:center; background-repeat:no-repeat }
.theme-linux .desktop{ left:56px }

/* Icons */
.icon{ width:86px; text-align:center; color:#e5e7eb; margin:10px; padding:8px; border-radius:8px }
.icon:hover{ background:rgba(255,255,255,.06) }
.icon .img{ width:48px; height:48px; margin:0 auto 6px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08) }
.icon .label{ font-size:12px; line-height:1.1; word-break:break-word }
.icon input{ width:100%; background:transparent; border:1px solid rgba(255,255,255,.2); border-radius:6px; padding:2px 4px; font-size:12px; color:#fff }

/* Windows */
.window{ position:absolute; min-width:260px; min-height:180px; background:#0b1220; border:5px solid rgba(255,255,255,.08); border-radius:10px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.4); z-index:30 }
.titlebar{ height:34px; display:flex; align-items:center; justify-content:space-between; padding:0 8px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-bottom:1px solid rgba(255,255,255,.08) }
.title{ font-size:12px; opacity:.9 }
.w-controls{ display:flex; gap:6px }
.w-btn{ width:24px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:6px; background:rgba(255,255,255,.06); color:#e5e7eb }
.w-btn:hover{ background:rgba(255,255,255,.12) }
.content{ position:absolute; top:35px; left:0; right:0; bottom:0; background:#0b1220 }
.content iframe{ width:100%; height:100%; border:0; background:#0b1220 }

/* Popovers */
.popover{ position:fixed; top:56px; right:12px; width:420px; max-height:90vh; overflow:auto; background:#0e1526; border:1px solid rgba(255,255,255,.08); border-radius:12px; box-shadow:0 20px 40px rgba(0,0,0,.5); z-index:5000 }
.popover-header{ padding:10px 12px; font-weight:600; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between; gap:8px }
.popover-close{ background:transparent; border:0; color:inherit; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; cursor:pointer }
.popover-close:hover{ background:rgba(255,255,255,.08) }
.btn{ background:rgba(255,255,255,.08); padding:6px 10px; border-radius:8px }
.btn:hover{ background:rgba(255,255,255,.14) }
#launcher-list .icon { color: #fff;}

/* Toasts */
.toast-container{ position:fixed; right:12px; z-index:5200; display:flex; flex-direction:column; gap:8px; pointer-events:none }
.toast-container.top-right{ top:60px }
.toast-container.bottom-right{ bottom:60px }
.toast{ min-width:260px; max-width:360px; background:rgba(14,21,38,.92); color:#e5e7eb; border:1px solid rgba(255,255,255,.08); border-radius:10px; box-shadow:0 14px 28px rgba(0,0,0,.45); padding:10px 12px; display:flex; align-items:flex-start; gap:10px; pointer-events:auto; opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease }
.toast.show{ opacity:1; transform:translateY(0) }
.toast .toast-icon{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; opacity:.9; flex:0 0 auto }
.toast .toast-body{ display:flex; flex-direction:column; gap:2px }
.toast .toast-title{ font-weight:600; font-size:13px }
.toast .toast-msg{ font-size:12px; opacity:.9 }
.toast .toast-close{ margin-left:auto; background:transparent; color:inherit; border:0; opacity:.8; cursor:pointer }
.toast.info{ border-color: rgba(59,130,246,.35) }
.toast.success{ border-color: rgba(34,197,94,.35) }
.toast.error{ border-color: rgba(239,68,68,.35) }

/* Modal overlay and panel */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.modal-panel { width: 520px; max-width: calc(100vw - 40px); background: rgba(22,26,32,0.9); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); color: #e5e7eb; }
.modal-header { display:flex; align-items:center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.modal-title { font-weight: 600; }
.modal-close { background: transparent; border: none; color: inherit; padding: 6px; border-radius: 6px; cursor: pointer; }
.modal-close:hover { background: rgba(255,255,255,0.06); }
.modal-body { padding: 14px; }
.modal-footer { padding: 12px 14px; border-top: 1px solid rgba(255,255,255,0.08); display:flex; justify-content:flex-end; }

.form-row { display:flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.form-row label { font-size: 12px; opacity: 0.85; }
.input { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 8px 10px; color: #e5e7eb; }
.input::placeholder { color: #9ca3af; }
.input:focus { outline: 2px solid rgba(59,130,246,0.5); }
.appearance-light .input { color: #0f172a; background: #ffffff; border-color: rgba(15,23,42,0.15); }
.appearance-light .input::placeholder { color: #64748b; }
/* Ensure selects show dark text on light background */
.appearance-light select.input { color: #0f172a; background: #ffffff; }
.appearance-light select.input option { color: #0f172a; background: #ffffff; }
/* Toasts in light mode */
.appearance-light .toast{ background:#ffffff; color:#0f172a; border-color: rgba(15,23,42,.12) }
.appearance-system.system-light .toast{ background:#ffffff; color:#0f172a; border-color: rgba(15,23,42,.12) }
.appearance-system.system-dark .toast{ background:rgba(14,21,38,.92); color:#e5e7eb; border-color: rgba(255,255,255,.08) }

/* If using system appearance, rely on system-dark/system-light flags set by JS */
.appearance-system.system-light .input { color: #0f172a; background: #ffffff; border-color: rgba(15,23,42,0.15); }
.appearance-system.system-light .input::placeholder { color: #64748b; }
.appearance-system.system-light select.input { color: #0f172a; background: #ffffff; }
.appearance-system.system-light select.input option { color: #0f172a; background: #ffffff; }
.appearance-system.system-dark .input { color: #e5e7eb; }
.appearance-system.system-dark .input::placeholder { color: #9ca3af; }
.btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 8px 12px; color: #e5e7eb; cursor: pointer; }
.btn.primary { background: #2563eb; border-color: #1d4ed8; }
.btn.primary:hover { background: #1d4ed8; }
.btn.loading { opacity: .7; pointer-events: none; }
.btn.danger { background: #7f1d1d; border-color: #b91c1c; }
.btn.danger:hover { background: #991b1b; }
.muted { opacity: 0.75; font-size: 12px; }
.form-error { color: #fecaca; background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.35); border-radius: 8px; padding: 8px 10px; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.hidden { display: none !important; }
.chip{ background:rgba(255,255,255,.06); padding:4px 10px; border-radius:999px }
.chip:hover{ background:rgba(255,255,255,.12) }
.input{ background:rgba(255,255,255,.06); padding:6px 8px; border-radius:8px; color:#fff }

/* Settings layout with right sidebar */
#settings.popover{ width:640px }
.settings-body{ display:grid; grid-template-columns: 1fr 220px; gap:12px; padding:12px }
.settings-main{ display:flex; flex-direction:column; gap:12px }
.settings-sidebar{ border-left:1px solid rgba(255,255,255,.08); padding-left:12px; display:flex; flex-direction:column; gap:14px }
.sidebar-section{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:10px }
.sidebar-title{ font-weight:600; font-size:12px; opacity:.9; margin-bottom:6px }
.sidebar-nav{ display:flex; flex-direction:column; gap:6px }
.sidebar-link{ color:#e5e7eb; opacity:.9; font-size:13px; text-decoration:none; padding:4px 6px; border-radius:8px; background:rgba(255,255,255,.02) }
.sidebar-link:hover{ background:rgba(255,255,255,.08) }
.sidebar-text{ font-size:12px; opacity:.85 }

/* Context menu */
.context-menu{ position:fixed; background:#0e1526; border:1px solid rgba(255,255,255,.08); border-radius:10px; box-shadow:0 10px 24px rgba(0,0,0,.5); z-index:5300; min-width:160px }
.ctx-item{ display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; text-align:left }
.ctx-item:hover{ background:rgba(255,255,255,.08) }

/* Theme positions */
.theme-mac #taskbar-mac{ display:flex }
.theme-win #taskbar-win{ display:flex }
.theme-linux #taskbar-linux{ display:block }

.hidden{ display:none }

/* macOS Dock */
.dock-mac{ position:fixed; left:50%; transform:translateX(-50%); bottom:12px; display:flex; gap:10px; padding:8px 10px; background:rgba(20,20,20,.45); border:1px solid rgba(255,255,255,.08); border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.45); backdrop-filter:saturate(140%) blur(8px); z-index:4900 }
.dock-item{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; color:#e5e7eb; background:rgba(255,255,255,.06); border-radius:12px }
.dock-item:hover{ background:rgba(255,255,255,.12) }
.dock-item.active{ outline:2px solid rgba(255,255,255,.25) }
.dock-dot{ width:6px; height:6px; border-radius:999px; background:#93c5fd; position:absolute; bottom:4px }
.dock-cell{ position:relative }

/* Theme visibility for dock */
.theme-mac #dock-mac{ display:flex }
.theme-win #dock-mac, .theme-linux #dock-mac{ display:none }

/* Auth Overlay */
.auth-overlay{ position:fixed; inset:0; z-index:70; background:radial-gradient(1200px 600px at 10% 10%, rgba(255,255,255,.06), transparent), radial-gradient(1000px 500px at 90% 80%, rgba(255,255,255,.06), transparent), linear-gradient(135deg, #0a0f1b, #0b1220 40%, #0b1220); display:flex; align-items:center; justify-content:center }
.lock-screen{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#e5e7eb; backdrop-filter: blur(2px) }
.lock-time{ font-size:72px; font-weight:600; letter-spacing:1px; opacity:.95 }
.lock-hint{ opacity:.8 }
.auth-panel{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px }
.auth-card{ width:100%; max-width:360px; background:rgba(14,21,38,.85); border:1px solid rgba(255,255,255,.08); border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.45); padding:18px 18px 14px 18px; display:flex; flex-direction:column; gap:10px }
.auth-avatar{ width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:#e5e7eb; font-size:22px; margin:4px auto }
.auth-tabs{ display:flex; gap:8px; justify-content:center; margin:6px 0 2px 0 }
.auth-tab{ background:rgba(255,255,255,.06); color:#e5e7eb; border-radius:999px; padding:6px 12px; font-size:12px }
.auth-tab.active{ background:rgba(255,255,255,.16) }
.auth-form{ display:flex; flex-direction:column; gap:8px }
.auth-input{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:10px; color:#fff; padding:10px 12px }
.auth-btn{ background:linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.05)); color:#e5e7eb; border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:10px 12px; font-weight:600 }
.auth-btn:hover{ background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)) }
.auth-error{ color:#fca5a5; font-size:12px }
.auth-note{ opacity:.8; font-size:12px; text-align:center; margin-top:4px }

/* Settings: Wallpaper grid */
.wallpaper-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px }
.wallpaper-item{ position:relative; padding-top:56%; border-radius:10px; overflow:hidden; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); cursor:pointer }
.wallpaper-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.wallpaper-item.selected{ outline:2px solid #93c5fd }

/* Store */
.store-shell{ display:flex; flex-direction:column; gap:12px; height:100%; padding:14px; box-sizing:border-box; overflow:auto; }
.store-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.store-title{ font-size:1.25rem; font-weight:600; }
.store-subtitle{ opacity:.75; font-size:.9rem; }
.store-search-row{ display:flex; gap:10px; }
.store-status{ padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); font-size:.9rem; }
.store-list{ display:flex; flex-direction:column; gap:12px; overflow:auto; padding-bottom:12px; }
.store-card{ border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(9,13,23,.92); padding:14px; box-shadow:0 18px 35px rgba(0,0,0,.45); display:flex; flex-direction:column; gap:8px; }
.appearance-light .store-card, .appearance-system.system-light .store-card{ background:#ffffff; color:#0f172a; border-color:rgba(15,23,42,.12); }
.store-card-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.store-card-titlewrap{ display:flex; flex-direction:column; gap:4px; }
.store-card-title{ font-size:1rem; font-weight:600; }
.store-card-meta{ font-size:.85rem; opacity:.75; }
.store-card-desc{ font-size:.95rem; line-height:1.4; opacity:.9; margin:2px 0 4px 0; }
.store-card-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.store-tag{ background:rgba(255,255,255,.08); border-radius:999px; padding:4px 10px; font-size:.75rem; letter-spacing:.02em; }
.appearance-light .store-tag, .appearance-system.system-light .store-tag{ background:rgba(15,23,42,.08); color:#0f172a; }
.appearance-light .linux-open-tooltip, .appearance-system.system-light .linux-open-tooltip{ background:#ffffff; color:#0f172a; border-color:rgba(15,23,42,.12) }

/* Appearance modes: System, Light, Dark */
.appearance-dark .icon { color: #fff; }
.appearance-light .icon { color: #222; }
.appearance-system.system-dark .icon { color: #fff; }
.appearance-system.system-light .icon { color: #222; }