:root {
  --bg: #e7edf5;
  --bg-2: #dce5ef;
  --surface: rgba(235, 241, 248, 0.88);
  --surface-solid: #e9eff6;
  --surface-soft: #f1f5f9;
  --surface-inset: #dde5ee;
  --text: #182331;
  --muted: #718094;
  --muted-2: #91a0b3;
  --line: rgba(73, 94, 119, .12);
  --line-strong: rgba(73, 94, 119, .19);
  --white-line: rgba(255, 255, 255, .70);
  --accent: #6576ff;
  --accent-rgb: 101, 118, 255;
  --accent-2: #8c6cff;
  --danger: #ea6571;
  --success: #4ab88c;
  --warning: #efad58;
  --shadow-dark: rgba(104, 123, 145, .30);
  --shadow-light: rgba(255, 255, 255, .92);
  --raised: 12px 12px 28px var(--shadow-dark), -12px -12px 28px var(--shadow-light);
  --raised-sm: 6px 6px 15px rgba(111, 130, 150, .27), -6px -6px 15px rgba(255, 255, 255, .88);
  --inset: inset 4px 4px 10px rgba(111, 130, 150, .25), inset -4px -4px 10px rgba(255, 255, 255, .82);
  --glass: rgba(239, 244, 250, .74);
  --blur: blur(24px) saturate(1.15);
  --r-xs: 9px;
  --r-sm: 13px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --topbar-h: 46px;
  --dock-h: 68px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --wallpaper: radial-gradient(circle at 72% 14%, rgba(114, 130, 255, .34), transparent 30%), radial-gradient(circle at 18% 88%, rgba(115, 191, 226, .24), transparent 32%), linear-gradient(145deg, #e8eef6 0%, #dce5f0 52%, #e8eef5 100%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

:root[data-theme="dark"] {
  --bg: #171c24;
  --bg-2: #121720;
  --surface: rgba(28, 35, 46, .86);
  --surface-solid: #1e2631;
  --surface-soft: #252e3b;
  --surface-inset: #171e27;
  --text: #edf2f8;
  --muted: #9aa8b8;
  --muted-2: #738091;
  --line: rgba(220, 231, 242, .09);
  --line-strong: rgba(220, 231, 242, .14);
  --white-line: rgba(255,255,255,.08);
  --shadow-dark: rgba(6, 9, 13, .62);
  --shadow-light: rgba(67, 78, 94, .22);
  --raised: 12px 12px 28px var(--shadow-dark), -10px -10px 26px var(--shadow-light);
  --raised-sm: 6px 6px 14px rgba(5,8,12,.55), -5px -5px 13px rgba(64,76,94,.20);
  --inset: inset 4px 4px 10px rgba(5,8,12,.58), inset -4px -4px 10px rgba(67,79,95,.20);
  --glass: rgba(24, 31, 41, .78);
  --wallpaper: radial-gradient(circle at 72% 14%, rgba(98, 113, 255, .26), transparent 31%), radial-gradient(circle at 18% 88%, rgba(75, 152, 190, .20), transparent 34%), linear-gradient(145deg, #181e27 0%, #111821 53%, #202835 100%);
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { user-select: none; background: var(--bg); }
button, input, textarea { font: inherit; color: inherit; }
button { border: 0; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .78); outline-offset: 2px; }
::selection { background: rgba(var(--accent-rgb), .22); }
* { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),.34) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),.30); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }

body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
body.flat-depth { --raised: 0 0 0 1px var(--line); --raised-sm: 0 0 0 1px var(--line); --inset: inset 0 0 0 1px var(--line); }

.desktop-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--wallpaper);
  transition: background .35s var(--ease), color .25s ease;
}
.desktop-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.07), transparent 32%, rgba(0,0,0,.015));
}

.wallpaper-orb { position:absolute; border-radius:999px; filter: blur(2px); opacity:.55; pointer-events:none; }
.wallpaper-orb.one { width:420px; height:420px; right:-120px; top:90px; border:1px solid rgba(255,255,255,.22); box-shadow: inset 0 0 70px rgba(var(--accent-rgb),.12); }
.wallpaper-orb.two { width:230px; height:230px; right:150px; top:210px; border:1px solid rgba(255,255,255,.18); }

.topbar {
  position: absolute;
  z-index: 50000;
  inset: 0 0 auto 0;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--glass) 84%, transparent);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--white-line);
  box-shadow: 0 8px 25px rgba(71,89,110,.08);
}
.topbar__brand { display:flex; align-items:center; gap:10px; min-width: 186px; }
.brand-button { width:31px; height:31px; border-radius:10px; display:grid; place-items:center; cursor:pointer; background:var(--surface-solid); box-shadow:var(--raised-sm); transition:.18s var(--ease); }
.brand-button:hover { transform:translateY(-1px); }
.brand-button:active, .brand-button.is-active { box-shadow:var(--inset); transform:none; }
.brand-glyph { width:15px; height:15px; position:relative; transform:rotate(45deg); }
.brand-glyph::before, .brand-glyph::after { content:""; position:absolute; inset:0; border:2px solid var(--accent); border-radius:4px; }
.brand-glyph::after { inset:4px -4px -4px 4px; opacity:.55; }
.topbar__brand strong { font-size:13px; letter-spacing:.01em; }
.topbar__brand small { display:block; margin-top:1px; color:var(--muted); font-size:10px; font-weight:600; }
.topbar__spacer { flex:1; }
.status-cluster { display:flex; align-items:center; gap:6px; }
.status-button { min-height:31px; padding:0 10px; border-radius:11px; background:transparent; cursor:pointer; display:flex; align-items:center; gap:7px; font-size:11px; font-weight:650; color:var(--text); }
.status-button:hover, .status-button.is-active { background:rgba(var(--accent-rgb),.09); }
.status-button svg { width:15px; height:15px; }
.clock-button { min-width:96px; justify-content:center; }

.workspace { position:absolute; inset:var(--topbar-h) 0 0 0; overflow:hidden; z-index:1; }
.desktop-icons { position:absolute; z-index:2; top:22px; left:18px; display:grid; grid-auto-flow:column; grid-template-rows:repeat(6, 88px); gap:6px 7px; }
.desktop-icon { width:86px; min-height:82px; padding:5px; border-radius:14px; background:transparent; display:flex; flex-direction:column; align-items:center; gap:7px; cursor:default; transition:background .15s ease; }
.desktop-icon:hover { background:rgba(255,255,255,.16); }
.desktop-icon.is-selected { background:rgba(var(--accent-rgb),.11); outline:1px solid rgba(var(--accent-rgb),.18); }
.desktop-icon__tile { width:52px; height:52px; display:grid; place-items:center; border-radius:17px; background:color-mix(in srgb,var(--surface-solid) 92%, transparent); box-shadow:var(--raised-sm); color:var(--accent); }
.desktop-icon__tile svg { width:24px; height:24px; }
.desktop-icon__label { max-width:82px; color:var(--text); font-size:11px; font-weight:650; line-height:1.2; text-align:center; text-shadow:0 1px 8px rgba(255,255,255,.55); }
:root[data-theme="dark"] .desktop-icon__label { text-shadow:0 1px 8px rgba(0,0,0,.6); }

.dock-wrap { position:absolute; z-index:52000; left:50%; bottom:14px; transform:translateX(-50%); }
.dock { height:64px; display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid var(--white-line); border-radius:22px; background:color-mix(in srgb,var(--glass) 86%, transparent); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); box-shadow:0 20px 48px rgba(61,78,98,.19); }
.dock-divider { width:1px; height:32px; margin:0 2px; background:var(--line-strong); }
.dock-item { position:relative; width:46px; height:46px; border-radius:15px; background:var(--surface-solid); color:var(--muted); display:grid; place-items:center; cursor:pointer; box-shadow:var(--raised-sm); transition:transform .18s var(--ease), box-shadow .18s ease, color .18s ease; }
.dock-item svg { width:21px; height:21px; }
.dock-item:hover { transform:translateY(-5px) scale(1.03); color:var(--accent); }
.dock-item.is-focused { box-shadow:var(--inset); color:var(--accent); transform:translateY(-1px); }
.dock-item__dot { position:absolute; width:4px; height:4px; border-radius:50%; background:var(--accent); bottom:4px; opacity:0; }
.dock-item.is-running .dock-item__dot { opacity:1; }
.dock-item[data-tooltip]::after { content:attr(data-tooltip); position:absolute; bottom:57px; left:50%; transform:translateX(-50%) translateY(4px); pointer-events:none; opacity:0; color:var(--text); white-space:nowrap; font-size:10px; font-weight:700; padding:6px 8px; border-radius:8px; background:var(--surface-solid); box-shadow:var(--raised-sm); transition:.15s ease; }
.dock-item[data-tooltip]:hover::after { opacity:1; transform:translateX(-50%) translateY(0); }

.panel-backdrop { position:absolute; z-index:49000; inset:var(--topbar-h) 0 0 0; background:transparent; }
.floating-panel { position:absolute; z-index:51000; background:var(--glass); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border:1px solid var(--white-line); box-shadow:0 24px 70px rgba(54,72,92,.24); border-radius:26px; animation:panel-in .2s var(--ease); overflow:hidden; }
@keyframes panel-in { from { opacity:0; transform:translateY(-8px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
.launcher { left:18px; top:58px; width:min(670px, calc(100vw - 36px)); height:min(590px, calc(100vh - 150px)); padding:20px; }
.launcher__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.launcher__header h2 { margin:0; font-size:20px; letter-spacing:-.03em; }
.launcher__header small { color:var(--muted); font-size:11px; }
.search-box { height:44px; display:flex; align-items:center; gap:10px; padding:0 14px; border-radius:15px; box-shadow:var(--inset); margin-bottom:18px; }
.search-box svg { width:17px; color:var(--muted); }
.search-box input { flex:1; border:0; outline:0; background:transparent; user-select:text; font-size:13px; }
.launcher-section-title { margin:0 0 10px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.launcher-grid { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; }
.launcher-app { min-height:92px; padding:12px 7px 9px; border-radius:17px; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:flex-start; flex-direction:column; gap:9px; font-size:11px; font-weight:700; }
.launcher-app:hover { background:rgba(var(--accent-rgb),.07); }
.launcher-app__icon { width:48px; height:48px; border-radius:16px; display:grid; place-items:center; color:var(--accent); background:var(--surface-solid); box-shadow:var(--raised-sm); }
.launcher-app__icon svg { width:22px; }
.launcher-footer { position:absolute; left:20px; right:20px; bottom:17px; display:flex; align-items:center; justify-content:space-between; padding-top:13px; border-top:1px solid var(--line); }
.user-chip { display:flex; align-items:center; gap:9px; }
.avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:12px; box-shadow:var(--inset); font-size:11px; font-weight:850; color:var(--accent); }
.user-chip strong { display:block; font-size:11px; }
.user-chip small { color:var(--muted); font-size:9px; }
.power-button { width:36px; height:36px; border-radius:12px; background:var(--surface-solid); box-shadow:var(--raised-sm); display:grid; place-items:center; cursor:pointer; }
.power-button svg { width:16px; }

.control-center { right:18px; top:58px; width:340px; padding:16px; }
.panel-title { display:flex; align-items:center; justify-content:space-between; margin:1px 2px 14px; }
.panel-title strong { font-size:13px; }
.panel-title small { color:var(--muted); }
.quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.quick-toggle { min-height:76px; border-radius:17px; padding:12px; text-align:left; background:var(--surface-solid); box-shadow:var(--raised-sm); cursor:pointer; display:grid; align-content:space-between; }
.quick-toggle.is-on { color:white; background:linear-gradient(145deg, var(--accent), var(--accent-2)); box-shadow:0 10px 24px rgba(var(--accent-rgb),.24); }
.quick-toggle__top { display:flex; align-items:center; justify-content:space-between; }
.quick-toggle svg { width:18px; }
.quick-toggle b { font-size:11px; }
.quick-toggle small { opacity:.7; font-size:9px; }
.slider-card { margin-top:10px; padding:13px; border-radius:17px; background:var(--surface-solid); box-shadow:var(--raised-sm); }
.slider-card__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:10px; font-weight:700; }
.soft-slider { width:100%; accent-color:var(--accent); }

.notifications { right:18px; top:58px; width:370px; max-height:540px; padding:16px; overflow:auto; }
.notification-card { display:flex; gap:11px; padding:13px; border-radius:16px; background:var(--surface-solid); box-shadow:var(--raised-sm); margin-bottom:10px; }
.notification-icon { flex:0 0 auto; width:36px; height:36px; border-radius:12px; display:grid; place-items:center; color:var(--accent); box-shadow:var(--inset); }
.notification-icon svg { width:16px; }
.notification-card strong { display:block; font-size:11px; margin-bottom:3px; }
.notification-card p { margin:0; color:var(--muted); font-size:10px; line-height:1.45; }
.notification-time { margin-left:auto; color:var(--muted-2); font-size:9px; }
.empty-state { min-height:230px; display:grid; place-items:center; text-align:center; color:var(--muted); }
.empty-state svg { width:34px; opacity:.45; margin-bottom:8px; }

.context-menu { position:absolute; z-index:70000; min-width:210px; padding:7px; border-radius:15px; background:var(--glass); backdrop-filter:var(--blur); border:1px solid var(--white-line); box-shadow:0 18px 55px rgba(50,65,82,.28); animation:context-in .12s ease; }
@keyframes context-in { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:scale(1)} }
.context-item { width:100%; height:34px; padding:0 10px; border-radius:10px; display:flex; align-items:center; gap:10px; background:transparent; cursor:pointer; text-align:left; font-size:11px; }
.context-item:hover { background:rgba(var(--accent-rgb),.10); color:var(--accent); }
.context-item svg { width:15px; }
.context-sep { height:1px; background:var(--line); margin:5px; }

.os-window-host { position:absolute; }
.os-window { width:100%; height:100%; display:flex; flex-direction:column; border-radius:23px; background:color-mix(in srgb,var(--surface) 94%, transparent); backdrop-filter:blur(18px) saturate(1.08); border:1px solid var(--white-line); box-shadow:18px 20px 52px rgba(70,86,105,.29), -8px -8px 26px rgba(255,255,255,.35); overflow:hidden; transition:box-shadow .15s ease, opacity .15s ease; animation:window-in .18s var(--ease); }
:root[data-theme="dark"] .os-window { box-shadow:18px 20px 52px rgba(0,0,0,.46), -7px -7px 24px rgba(80,94,112,.14); }
@keyframes window-in { from { opacity:0; transform:scale(.975) translateY(6px); } to { opacity:1; transform:none; } }
.os-window:not(.is-focused) { opacity:.94; box-shadow:10px 12px 34px rgba(65,81,99,.21); }
.os-window.is-maximized { border-radius:0; border-left:0; border-right:0; border-bottom:0; }
.window-titlebar { flex:0 0 auto; height:46px; display:flex; align-items:center; gap:10px; padding:0 9px 0 14px; border-bottom:1px solid var(--line); cursor:grab; }
.window-titlebar:active { cursor:grabbing; }
.window-app-title { display:flex; align-items:center; gap:8px; min-width:0; font-size:11px; font-weight:760; }
.window-app-title svg { width:16px; color:var(--accent); }
.window-app-title span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.window-titlebar__spacer { flex:1; }
.window-actions { display:flex; gap:4px; }
.window-action { width:31px; height:31px; border-radius:10px; background:transparent; display:grid; place-items:center; cursor:pointer; }
.window-action svg { width:14px; }
.window-action:hover { background:rgba(var(--accent-rgb),.09); }
.window-action.close:hover { color:white; background:var(--danger); }
.window-content { flex:1; min-height:0; overflow:hidden; user-select:text; }
.resize-handle { position:absolute; z-index:4; }
.resize-handle.e { right:-3px; top:10px; width:7px; bottom:10px; cursor:ew-resize; }
.resize-handle.s { bottom:-3px; left:10px; height:7px; right:10px; cursor:ns-resize; }
.resize-handle.se { right:-4px; bottom:-4px; width:14px; height:14px; cursor:nwse-resize; }
.snap-preview { position:absolute; z-index:100; top:8px; bottom:84px; border:1px solid rgba(var(--accent-rgb),.35); background:rgba(var(--accent-rgb),.08); border-radius:22px; pointer-events:none; }
.snap-preview.left { left:8px; width:calc(50% - 12px); }
.snap-preview.right { right:8px; width:calc(50% - 12px); }

.app { width:100%; height:100%; color:var(--text); }
.app-toolbar { min-height:58px; padding:12px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); }
.app-toolbar h2 { margin:1px 0 0; font-size:17px; letter-spacing:-.03em; }
.app-toolbar__spacer { flex:1; }
.eyebrow { color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:8px; font-weight:800; }
.soft-button { min-height:34px; padding:0 12px; border-radius:11px; background:var(--surface-solid); box-shadow:var(--raised-sm); cursor:pointer; font-size:10px; font-weight:720; }
.soft-button:hover { color:var(--accent); }
.soft-button:active { box-shadow:var(--inset); }
.icon-button { width:34px; height:34px; border-radius:11px; background:var(--surface-solid); box-shadow:var(--raised-sm); display:grid; place-items:center; cursor:pointer; }
.icon-button svg { width:15px; }
.text-input { height:36px; padding:0 12px; border:0; outline:0; border-radius:12px; background:var(--surface-solid); box-shadow:var(--inset); user-select:text; }

.files-app { display:grid; grid-template-columns:180px 1fr; }
.files-sidebar { padding:14px 10px; border-right:1px solid var(--line); overflow:auto; }
.sidebar-label { padding:7px 10px; color:var(--muted); text-transform:uppercase; font-size:8px; font-weight:850; letter-spacing:.13em; }
.sidebar-item { width:100%; height:36px; padding:0 10px; border-radius:11px; display:flex; align-items:center; gap:9px; background:transparent; cursor:pointer; font-size:10px; font-weight:650; }
.sidebar-item svg { width:15px; color:var(--muted); }
.sidebar-item:hover, .sidebar-item.active { color:var(--accent); background:rgba(var(--accent-rgb),.08); }
.files-main { min-width:0; display:flex; flex-direction:column; }
.breadcrumb { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:9px; }
.file-grid { flex:1; padding:16px; display:grid; grid-template-columns:repeat(auto-fill,minmax(125px,1fr)); grid-auto-rows:124px; gap:12px; overflow:auto; align-content:start; }
.file-card { padding:13px; border-radius:17px; text-align:left; background:var(--surface-solid); box-shadow:var(--raised-sm); cursor:pointer; display:flex; flex-direction:column; gap:7px; }
.file-card:hover { transform:translateY(-1px); }
.file-card.selected { box-shadow:var(--inset); outline:1px solid rgba(var(--accent-rgb),.18); }
.file-card__icon { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:var(--accent); box-shadow:var(--inset); }
.file-card__icon svg { width:20px; }
.file-card strong { font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-card small { color:var(--muted); font-size:8px; }
.files-status { height:30px; padding:0 16px; display:flex; align-items:center; color:var(--muted); font-size:8px; border-top:1px solid var(--line); }

.notes-app { display:flex; flex-direction:column; }
.notes-editor { flex:1; margin:14px; min-height:0; padding:20px; border:0; outline:0; resize:none; border-radius:17px; color:var(--text); background:var(--surface-solid); box-shadow:var(--inset); line-height:1.7; font-size:12px; user-select:text; }
.save-state { font-size:9px; color:var(--muted); }

.calc-app { padding:16px; display:grid; grid-template-rows:auto 1fr; gap:13px; background:linear-gradient(160deg,rgba(var(--accent-rgb),.035),transparent 45%); }
.calc-display { min-height:88px; border-radius:18px; padding:15px; box-shadow:var(--inset); background:var(--surface-solid); display:flex; flex-direction:column; justify-content:flex-end; text-align:right; overflow:hidden; }
.calc-expression { min-height:18px; color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calc-result { margin-top:5px; font-size:25px; font-weight:760; letter-spacing:-.04em; }
.calc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.calc-key { border-radius:14px; background:var(--surface-solid); box-shadow:var(--raised-sm); cursor:pointer; font-size:12px; font-weight:700; }
.calc-key:active { box-shadow:var(--inset); }
.calc-key.op { color:var(--accent); }
.calc-key.equals { color:white; background:linear-gradient(145deg,var(--accent),var(--accent-2)); box-shadow:0 10px 24px rgba(var(--accent-rgb),.23); }

.terminal-app { display:flex; flex-direction:column; background:#111821; color:#dce7ef; font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; }
.terminal-head { height:38px; padding:0 14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid rgba(255,255,255,.06); color:#8595a5; font-size:9px; }
.terminal-dot { width:7px; height:7px; border-radius:50%; background:#66788a; }
.terminal-output { flex:1; min-height:0; overflow:auto; padding:14px 16px 8px; font-size:10px; line-height:1.65; user-select:text; white-space:pre-wrap; }
.terminal-output .prompt { color:#8fa0ff; }
.terminal-output .muted { color:#83919f; }
.terminal-input-row { min-height:42px; display:flex; align-items:center; gap:8px; padding:7px 16px 12px; }
.terminal-input-row span { color:#8fa0ff; font-size:10px; }
.terminal-input { flex:1; border:0; outline:0; background:transparent; color:#dce7ef; font:inherit; user-select:text; }

.browser-app { display:flex; flex-direction:column; }
.browser-chrome { padding:10px 12px; border-bottom:1px solid var(--line); display:flex; gap:8px; align-items:center; }
.browser-nav { display:flex; gap:5px; }
.browser-nav button { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:transparent; cursor:pointer; }
.browser-nav button:hover { background:rgba(var(--accent-rgb),.08); }
.browser-nav svg { width:14px; }
.address-bar { flex:1; height:34px; padding:0 13px; border:0; outline:0; border-radius:12px; box-shadow:var(--inset); background:var(--surface-solid); font-size:10px; user-select:text; }
.browser-page { flex:1; overflow:auto; padding:24px; background:linear-gradient(145deg,rgba(var(--accent-rgb),.04),transparent 45%); }
.browser-hero { max-width:700px; margin:26px auto; text-align:center; }
.browser-logo { width:74px; height:74px; margin:0 auto 17px; border-radius:25px; display:grid; place-items:center; box-shadow:var(--raised); color:var(--accent); }
.browser-logo svg { width:31px; }
.browser-hero h1 { margin:0; font-size:30px; letter-spacing:-.05em; }
.browser-hero p { margin:9px 0 20px; color:var(--muted); font-size:11px; }
.browser-search { max-width:520px; height:45px; margin:auto; border-radius:15px; display:flex; align-items:center; gap:10px; padding:0 14px; box-shadow:var(--inset); background:var(--surface-solid); }
.browser-search input { flex:1; border:0; outline:0; background:transparent; font-size:11px; user-select:text; }
.browser-cards { max-width:700px; margin:22px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.browser-card { min-height:105px; padding:14px; border-radius:17px; text-align:left; background:var(--surface-solid); box-shadow:var(--raised-sm); cursor:pointer; }
.browser-card svg { width:18px; color:var(--accent); }
.browser-card strong { display:block; margin:11px 0 4px; font-size:10px; }
.browser-card small { color:var(--muted); font-size:8px; line-height:1.4; }
.browser-result { max-width:690px; margin:18px auto; padding:20px; border-radius:18px; background:var(--surface-solid); box-shadow:var(--raised-sm); }
.browser-result h3 { margin:0 0 8px; font-size:16px; }
.browser-result p { margin:0; color:var(--muted); font-size:10px; line-height:1.6; }

.photos-app { display:flex; flex-direction:column; }
.photo-grid { flex:1; min-height:0; overflow:auto; padding:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:11px; grid-auto-rows:150px; }
.photo-tile { position:relative; overflow:hidden; border-radius:18px; border:4px solid color-mix(in srgb,var(--surface-solid) 94%,transparent); box-shadow:var(--raised-sm); cursor:pointer; background:var(--photo); }
.photo-tile:nth-child(1), .photo-tile:nth-child(5) { grid-column:span 2; }
.photo-tile::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(16,23,33,.45),transparent 55%); opacity:.7; }
.photo-tile span { position:absolute; z-index:2; left:12px; bottom:10px; color:white; font-size:9px; font-weight:700; }
.photo-viewer { position:absolute; inset:0; z-index:5; background:rgba(11,16,23,.86); backdrop-filter:blur(16px); display:grid; place-items:center; padding:30px; }
.photo-viewer__image { width:min(80%,650px); height:min(76%,430px); border-radius:24px; box-shadow:0 28px 80px rgba(0,0,0,.4); background:var(--photo); }
.photo-viewer__close { position:absolute; right:18px; top:18px; width:36px; height:36px; border-radius:12px; background:rgba(255,255,255,.12); color:white; display:grid; place-items:center; cursor:pointer; }

.calendar-app { display:flex; flex-direction:column; }
.calendar-wrap { flex:1; min-height:0; padding:14px; display:grid; grid-template-columns:1fr 170px; gap:14px; }
.calendar-main { border-radius:18px; padding:14px; background:var(--surface-solid); box-shadow:var(--raised-sm); }
.calendar-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.calendar-head h3 { margin:0; font-size:15px; }
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.calendar-day-name { padding:5px 0; text-align:center; color:var(--muted); font-size:8px; font-weight:800; }
.calendar-day { aspect-ratio:1.1; display:grid; place-items:center; border-radius:11px; font-size:9px; cursor:default; }
.calendar-day.today { color:white; background:linear-gradient(145deg,var(--accent),var(--accent-2)); font-weight:800; box-shadow:0 8px 18px rgba(var(--accent-rgb),.22); }
.calendar-day.dim { color:var(--muted-2); }
.calendar-agenda { padding:14px; border-radius:18px; background:var(--surface-solid); box-shadow:var(--raised-sm); }
.calendar-agenda h4 { margin:0 0 12px; font-size:11px; }
.agenda-item { padding:10px 0 10px 11px; border-left:2px solid var(--accent); }
.agenda-item strong { display:block; font-size:9px; }
.agenda-item small { color:var(--muted); font-size:8px; }

.settings-app { display:grid; grid-template-columns:180px 1fr; }
.settings-nav { padding:14px 10px; border-right:1px solid var(--line); }
.settings-main { overflow:auto; padding:18px; }
.settings-main h2 { margin:0 0 5px; font-size:20px; letter-spacing:-.04em; }
.settings-main > p { margin:0 0 18px; color:var(--muted); font-size:10px; }
.setting-section { margin-bottom:18px; }
.setting-section h3 { margin:0 0 10px; font-size:10px; text-transform:uppercase; letter-spacing:.11em; color:var(--muted); }
.setting-card { padding:14px; border-radius:17px; background:var(--surface-solid); box-shadow:var(--raised-sm); margin-bottom:10px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.setting-row + .setting-row { padding-top:12px; margin-top:12px; border-top:1px solid var(--line); }
.setting-copy strong { display:block; font-size:10px; margin-bottom:3px; }
.setting-copy small { color:var(--muted); font-size:8px; line-height:1.4; }
.toggle { width:39px; height:22px; padding:3px; border-radius:999px; background:var(--surface-inset); box-shadow:var(--inset); cursor:pointer; }
.toggle::after { content:""; display:block; width:16px; height:16px; border-radius:50%; background:var(--surface-soft); box-shadow:var(--raised-sm); transition:transform .2s var(--ease); }
.toggle.is-on { background:rgba(var(--accent-rgb),.30); }
.toggle.is-on::after { transform:translateX(17px); background:var(--accent); }
.theme-options, .accent-options, .wallpaper-options { display:flex; gap:10px; flex-wrap:wrap; }
.theme-option { width:92px; height:58px; padding:7px; border-radius:14px; background:var(--bg); box-shadow:var(--raised-sm); cursor:pointer; border:2px solid transparent; }
.theme-option.active { border-color:var(--accent); }
.theme-preview { width:100%; height:100%; border-radius:9px; background:linear-gradient(145deg,#edf2f7,#d8e2ec); position:relative; overflow:hidden; }
.theme-option[data-value="dark"] .theme-preview { background:linear-gradient(145deg,#242c37,#111821); }
.theme-preview::after { content:""; position:absolute; width:45%; height:55%; top:22%; left:28%; border-radius:6px; background:rgba(255,255,255,.5); }
.theme-option[data-value="dark"] .theme-preview::after { background:rgba(255,255,255,.08); }
.accent-dot { width:28px; height:28px; border-radius:50%; cursor:pointer; background:var(--swatch); box-shadow:0 5px 12px rgba(0,0,0,.15); border:3px solid transparent; }
.accent-dot.active { border-color:var(--surface-soft); outline:2px solid var(--swatch); }
.wallpaper-option { width:102px; height:62px; border-radius:14px; cursor:pointer; background:var(--preview); border:3px solid transparent; }
.wallpaper-option.active { border-color:var(--accent); }

.about-app { overflow:auto; padding:24px; }
.about-hero { text-align:center; max-width:520px; margin:14px auto 22px; }
.about-mark { width:88px; height:88px; margin:auto; border-radius:29px; display:grid; place-items:center; box-shadow:var(--raised); background:var(--surface-solid); }
.about-mark .brand-glyph { transform:rotate(45deg) scale(1.8); }
.about-hero h1 { margin:18px 0 5px; font-size:27px; letter-spacing:-.05em; }
.about-hero p { margin:0; color:var(--muted); font-size:10px; line-height:1.5; }
.about-grid { max-width:600px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.about-stat { min-height:92px; padding:14px; border-radius:17px; background:var(--surface-solid); box-shadow:var(--raised-sm); }
.about-stat strong { display:block; font-size:17px; margin-bottom:5px; }
.about-stat small { color:var(--muted); font-size:8px; line-height:1.4; }
.tech-row { max-width:600px; margin:12px auto 0; padding:14px; border-radius:17px; background:var(--surface-solid); box-shadow:var(--raised-sm); color:var(--muted); font-size:9px; line-height:1.6; }

.boot-screen { position:fixed; z-index:999999; inset:0; display:grid; place-items:center; background:var(--bg); transition:opacity .5s ease, visibility .5s ease; }
.boot-screen.is-done { opacity:0; visibility:hidden; }
.boot-center { display:grid; justify-items:center; gap:18px; }
.boot-logo { width:86px; height:86px; border-radius:29px; display:grid; place-items:center; background:var(--surface-solid); box-shadow:var(--raised); }
.boot-logo .brand-glyph { transform:rotate(45deg) scale(1.8); }
.boot-progress { width:170px; height:5px; padding:1px; border-radius:999px; box-shadow:var(--inset); }
.boot-progress span { display:block; width:0; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); animation:boot 1s var(--ease) forwards; }
@keyframes boot { to { width:100%; } }
.boot-center small { color:var(--muted); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }

.toast-stack { position:absolute; z-index:80000; right:18px; bottom:92px; width:310px; display:grid; gap:9px; pointer-events:none; }
.toast { padding:12px 13px; border-radius:15px; display:flex; align-items:flex-start; gap:10px; background:var(--glass); backdrop-filter:var(--blur); border:1px solid var(--white-line); box-shadow:0 16px 38px rgba(50,67,87,.2); animation:toast-in .24s var(--ease); }
@keyframes toast-in { from{opacity:0;transform:translateX(15px)} to{opacity:1;transform:none} }
.toast svg { width:16px; color:var(--accent); flex:0 0 auto; }
.toast strong { display:block; font-size:10px; }
.toast small { display:block; color:var(--muted); font-size:8px; margin-top:2px; }

.lock-overlay { position:absolute; z-index:90000; inset:0; display:grid; place-items:center; background:color-mix(in srgb,var(--bg) 72%,transparent); backdrop-filter:blur(38px) saturate(.9); }
.lock-card { width:min(360px,calc(100vw - 38px)); padding:26px; border-radius:29px; text-align:center; background:var(--glass); border:1px solid var(--white-line); box-shadow:0 30px 90px rgba(42,58,76,.24); }
.lock-clock { font-size:46px; font-weight:720; letter-spacing:-.06em; }
.lock-date { color:var(--muted); font-size:10px; margin:5px 0 21px; }
.unlock-button { width:100%; height:42px; border-radius:14px; background:linear-gradient(145deg,var(--accent),var(--accent-2)); color:white; font-weight:760; font-size:11px; cursor:pointer; box-shadow:0 12px 25px rgba(var(--accent-rgb),.24); }

@media (max-width: 760px) {
  .topbar__brand strong, .topbar__brand small { display:none; }
  .topbar__brand { min-width:auto; }
  .status-button .status-label { display:none; }
  .clock-button { min-width:72px; padding:0 6px; }
  .desktop-icons { grid-template-rows:repeat(5,80px); }
  .dock { max-width:calc(100vw - 18px); overflow-x:auto; }
  .dock-item { flex:0 0 auto; width:42px; height:42px; }
  .launcher-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .files-app, .settings-app { grid-template-columns:1fr; }
  .files-sidebar, .settings-nav { display:none; }
  .browser-cards { grid-template-columns:1fr; }
  .photo-grid { grid-template-columns:repeat(2,1fr); }
  .calendar-wrap { grid-template-columns:1fr; }
  .calendar-agenda { display:none; }
  .about-grid { grid-template-columns:1fr; }
}

@media (max-width: 470px) {
  .launcher { left:8px; width:calc(100vw - 16px); }
  .launcher-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .control-center, .notifications { right:8px; width:calc(100vw - 16px); }
  .status-button:not(.clock-button):not(.control-button) { display:none; }
  .desktop-icons { left:8px; }
}