/* ============================================================================
   Reskin app demo — a 1:1 browser build of the shell.
   Everything is scoped to the demo page so it can share the site's tokens.
   ========================================================================== */
.demo-body {
  height: 100vh; overflow: hidden; background: var(--bg);
  --demo-accent: #7c9cff; --demo-accent2: #b58cff;
  --demo-radius: 18px; --demo-bw: 1px; --demo-alpha: .78;
  --demo-icon: 40px; --demo-mag: 1.35; --demo-pad: 10px; --demo-gap: 8px;
  --demo-barh: 42px; --demo-baralpha: .82; --demo-notchw: 240px;
}
.demo-body::before { opacity: .7; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); flex: none; display: inline-block; }

/* ---------- site chrome ---------- */
.demo-nav {
  position: relative; z-index: 30; height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 22px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(18px);
}
.demo-nav .brand small { margin-left: 2px; color: var(--muted-2); font-size: 10px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; }
.demo-nav-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.demo-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, .035); color: var(--muted); font-size: 10.5px; white-space: nowrap; }

.demo-main { height: calc(100vh - 64px); padding: 14px 16px 12px; display: flex; }
.demo-stage { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.demo-desktop {
  position: relative; flex: 1; min-height: 0; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line-strong); background: #080a11;
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .1);
  --accent: var(--demo-accent); --accent-2: var(--demo-accent2);
  isolation: isolate;
}
.demo-wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s, transform .55s var(--ease), filter .35s; }
.demo-wall.wall-fade { opacity: 0; }
.demo-wall.wall-zoom { transform: scale(1.06); }
.demo-wall.wall-slide { transform: translateX(3%); }
.demo-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 5, 10, .2), rgba(3, 5, 10, .02) 36%, rgba(3, 5, 10, .6)); pointer-events: none; }
.demo-desktop[data-tint="cold"] .demo-shade { background: linear-gradient(180deg, rgba(6, 18, 40, .35), rgba(4, 10, 24, .08) 36%, rgba(3, 9, 22, .66)); }
.demo-desktop[data-tint="warm"] .demo-shade { background: linear-gradient(180deg, rgba(40, 20, 8, .32), rgba(28, 14, 6, .06) 36%, rgba(20, 10, 4, .62)); }
.demo-desktop[data-tint="neutral"] .demo-shade { background: linear-gradient(180deg, rgba(16, 18, 24, .34), rgba(10, 12, 18, .06) 36%, rgba(8, 10, 15, .64)); }
.demo-desktop[data-tint="clear"] .demo-shade { background: linear-gradient(180deg, rgba(3, 5, 10, .06), rgba(3, 5, 10, 0) 40%, rgba(3, 5, 10, .32)); }

.demo-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 4px; color: var(--muted-2); font-size: 11px; }
.demo-strip-left { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.demo-strip-left b { color: var(--fg); font-weight: 600; }
.demo-strip-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.demo-strip-actions button { display: inline-flex; align-items: center; gap: 6px; min-height: 29px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--muted); font-size: 10.5px; transition: color .15s, background .15s, border-color .15s; }
.demo-strip-actions button:hover { color: var(--fg); border-color: var(--line-strong); background: rgba(255, 255, 255, .07); }
.demo-strip-actions .ic { width: 12px; height: 12px; }
.demo-strip-actions .is-locked { color: var(--muted-2); }
.demo-strip-actions .is-locked .ic { color: var(--amber); }

/* ---------- desktop widgets ---------- */
.demo-widgets { position: absolute; inset: calc(var(--demo-barh) + 22px) 20px calc(var(--demo-icon) + 58px); display: flex; flex-direction: column; gap: 10px; pointer-events: none; z-index: 2; }
.demo-desktop[data-widgetpos="top-left"] .demo-widgets { align-items: flex-start; }
.demo-desktop[data-widgetpos="top-right"] .demo-widgets { align-items: flex-end; }
.demo-desktop[data-widgetpos="bottom-left"] .demo-widgets { align-items: flex-start; justify-content: flex-end; }
.demo-desktop[data-widgetpos="bottom-right"] .demo-widgets { align-items: flex-end; justify-content: flex-end; }
.demo-widgets:empty { display: none; }
.w-card { pointer-events: auto; width: 210px; padding: 14px 15px; border-radius: 16px; background: color-mix(in srgb, #0a0d15 66%, transparent); border: 1px solid rgba(255, 255, 255, .13); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8); backdrop-filter: blur(20px) saturate(140%); color: var(--fg); }
.w-card.small { width: 170px; padding: 11px 13px; }
.w-card.large { width: 260px; }
.w-kicker { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 7px; }
.w-kicker .ic { width: 11px; height: 11px; color: var(--accent); }
.w-clock b { display: block; font-size: 34px; line-height: 1; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.w-clock small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.w-weather { display: flex; align-items: center; gap: 12px; }
.w-weather b { font-size: 30px; line-height: 1; letter-spacing: -1px; }
.w-weather div { min-width: 0; }
.w-weather small { display: block; color: var(--muted); font-size: 9.5px; }
.w-weather .ic { width: 30px; height: 30px; color: var(--accent); }
.w-media-row { display: flex; align-items: center; gap: 9px; }
.w-art { width: 38px; height: 38px; border-radius: 9px; background: linear-gradient(135deg, #ff8a5b, #d84b6b 45%, #6a5cff); border: 1px solid rgba(255, 255, 255, .2); flex: none; }
.w-media-row div { min-width: 0; }
.w-media-row b { display: block; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-media-row small { display: block; color: var(--muted); font-size: 9px; }
.w-media-row button { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #0a0d18; flex: none; }
.w-media-row button .ic { width: 12px; height: 12px; }
.w-bars { display: flex; flex-direction: column; gap: 7px; }
.w-bar { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; gap: 7px; color: var(--muted); font-size: 8.5px; }
.w-bar i { display: block; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.w-bar i::after { content: ""; display: block; height: 100%; width: var(--v, 40%); border-radius: inherit; background: var(--accent); }
.w-bar span { text-align: right; color: var(--fg); font-variant-numeric: tabular-nums; }
.w-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: 8.5px; color: var(--muted); text-align: center; }
.w-cal b { color: var(--fg); font-weight: 600; }
.w-cal .today { color: #0a0d18; background: var(--accent); border-radius: 4px; }
.w-cal span { padding: 2px 0; }

/* ---------- top bar ---------- */
.demo-bar {
  position: absolute; left: 0; right: 0; top: 0; height: var(--demo-barh); z-index: 12;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px;
  background: color-mix(in srgb, #0a0d16 calc(var(--demo-baralpha) * 100%), transparent);
  border-bottom: 1px solid rgba(255, 255, 255, .09); backdrop-filter: blur(18px) saturate(140%);
  font-size: 10px; color: var(--muted); transition: transform .3s var(--ease), opacity .25s;
}
.demo-desktop[data-barpos="bottom"] .demo-bar { top: auto; bottom: 0; border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, .09); }
.demo-desktop[data-bar="hidden"] .demo-bar { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.demo-desktop[data-bar="hidden"][data-barpos="bottom"] .demo-bar { transform: translateY(110%); }
.demo-desktop.bar-peek .demo-bar { transform: none !important; opacity: 1; pointer-events: auto; }

.bar-left, .bar-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bar-logo { width: 20px; height: 20px; border-radius: 5px; overflow: hidden; flex: none; }
.bar-logo img { width: 100%; height: 100%; object-fit: cover; }
.bar-ws { display: inline-flex; gap: 3px; }
.bar-ws b { width: 17px; height: 15px; border-radius: 4px; display: grid; place-items: center; color: var(--muted-2); font-size: 8px; font-weight: 600; border: 1px solid transparent; }
.bar-ws b.on { color: var(--fg); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12); }
.bar-title { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.bar-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 99px; background: rgba(255, 255, 255, .07); color: var(--muted); white-space: nowrap; }
.bar-pill .ic { width: 10px; height: 10px; color: var(--accent); }
.bar-icons { display: inline-flex; gap: 7px; color: var(--muted); }
.bar-icons .ic { width: 12px; height: 12px; }
.bar-clock { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 1px; line-height: 1.05; padding: 2px 4px; border-radius: 6px; }
.bar-clock:hover { background: rgba(255, 255, 255, .07); }
.bar-clock b { color: var(--fg); font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums; }
.bar-clock span { color: var(--muted-2); font-size: 7.5px; }
.demo-desktop[data-bar="floating"] .demo-bar { left: 12px; right: 12px; top: 10px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 14px; box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .8); }
.demo-desktop[data-bar="floating"][data-barpos="bottom"] .demo-bar { top: auto; bottom: 10px; }
.demo-desktop[data-bar="pills"] .demo-bar { background: none; border: 0; backdrop-filter: none; }
.demo-desktop[data-bar="pills"] .bar-left, .demo-desktop[data-bar="pills"] .bar-right { padding: 5px 10px; border-radius: 99px; background: color-mix(in srgb, #0a0d16 80%, transparent); border: 1px solid rgba(255, 255, 255, .11); box-shadow: 0 10px 26px -18px rgba(0, 0, 0, .8); backdrop-filter: blur(18px); }
.demo-desktop[data-bar="minimal"] .demo-bar { background: none; border: 0; backdrop-filter: none; box-shadow: none; }
.demo-desktop[data-bar="islands"] .demo-bar { background: none; border: 0; backdrop-filter: none; }
.demo-desktop[data-bar="islands"] .bar-left, .demo-desktop[data-bar="islands"] .bar-right { padding: 5px 9px; border-radius: 9px; background: color-mix(in srgb, #0a0d16 72%, transparent); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(14px); }
.demo-desktop.bar-hidden .demo-bar { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.demo-desktop.bar-hidden[data-barpos="bottom"] .demo-bar { transform: translateY(110%); }
.demo-desktop.bar-autohide .demo-bar { transform: translateY(-105%); opacity: .25; }
.demo-desktop.bar-autohide[data-barpos="bottom"] .demo-bar { transform: translateY(105%); }
.demo-desktop.bar-autohide.bar-peek .demo-bar { transform: none; opacity: 1; }
.demo-desktop.no-anim *, .demo-desktop.no-anim *::before, .demo-desktop.no-anim *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
.demo-desktop.light .demo-shade { background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .06) 36%, rgba(20, 25, 40, .22)); }
.demo-desktop.light .demo-bar { color: #1a2030; background: rgba(250, 252, 255, .88); border-color: rgba(15, 20, 35, .12); }
.demo-desktop.light .bar-clock b { color: #101522; }
.demo-desktop.light .bar-clock span, .demo-desktop.light .bar-title { color: #5a6478; }
.demo-desktop.light .bar-ws b { color: #6a7488; }
.demo-desktop.light .bar-ws b.on { color: #101522; background: rgba(15, 20, 35, .08); border-color: rgba(15, 20, 35, .12); }
.demo-desktop.no-notch-calls .notch-actions { display: none; }
.demo-desktop.no-bar-logo .bar-logo { display: none; }
.demo-desktop.no-bar-voice .bar-voice { display: none; }
.demo-desktop.no-bar-tray #bar-tray { display: none; }
.demo-desktop.no-bar-clock #bar-clock { display: none; }
.demo-desktop.no-bar-date #bar-clock span { display: none; }
.demo-desktop.no-bar-ws #bar-ws { display: none; }
.demo-desktop.no-bar-title #bar-title { display: none; }
.demo-desktop.no-bar-blur .demo-bar, .demo-desktop.no-bar-blur .bar-left, .demo-desktop.no-bar-blur .bar-right { backdrop-filter: none; }

/* ---------- notch ---------- */
.demo-notch {
  position: absolute; top: calc(var(--demo-barh) + 10px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 99px;
  background: color-mix(in srgb, #0b0e17 88%, transparent); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(18px); box-shadow: 0 12px 26px rgba(0, 0, 0, .35);
  font-size: 9.5px; color: var(--fg); z-index: 14; cursor: pointer; white-space: nowrap; width: max-content; max-width: var(--demo-notchw);
}
.demo-desktop[data-barpos="bottom"] .demo-notch { top: 12px; }
.demo-desktop[data-notch="off"] .demo-notch { display: none; }
.demo-desktop[data-notch="minimal"] .demo-notch { background: rgba(8, 11, 18, .5); border-color: transparent; box-shadow: none; }
.demo-desktop[data-notch="pill"] .demo-notch { border-radius: 12px; }
.demo-desktop[data-notch="borderless"] .demo-notch { border-color: transparent; box-shadow: none; }
.demo-desktop.no-notch-shadow .demo-notch { box-shadow: none; }
.demo-notch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.notch-mic { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #5865f2; color: #fff; flex: none; }
.notch-mic .ic { width: 10px; height: 10px; }
.demo-notch.muted .notch-mic { background: var(--red); }
.notch-count { color: var(--muted); }
.notch-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); margin-left: 2px; }
.notch-card { display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 250px; padding: 10px 12px 11px; border-radius: 15px; background: color-mix(in srgb, #0b0e17 94%, transparent); border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .9); backdrop-filter: blur(22px); flex-direction: column; gap: 8px; cursor: default; color: var(--fg); }
.demo-notch.open .notch-card { display: flex; }
.notch-head { display: flex; align-items: center; gap: 7px; }
.notch-head b { font-weight: 600; }
.notch-people { display: flex; gap: 7px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; border: 1px solid rgba(255, 255, 255, .18); }
.avatar.a1 { background: linear-gradient(135deg, #ff8a5b, #d84b6b); }
.avatar.a2 { background: linear-gradient(135deg, #5ee7d0, #2b7fff); }
.avatar.a3 { background: linear-gradient(135deg, #f3c77a, #a06a3c); }
.demo-desktop.no-notch-people .notch-people { display: none; }
.notch-actions { display: flex; gap: 10px; justify-content: center; padding-top: 2px; }
.round { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: var(--muted); transition: background .15s, color .15s; }
.round:hover { background: rgba(255, 255, 255, .16); color: var(--fg); }
.round .ic { width: 13px; height: 13px; }
.round.on { background: var(--red); color: #fff; }
.round.red { background: var(--red); color: #fff; }

/* ---------- dashboard ---------- */
.demo-dashboard {
  position: absolute; top: calc(var(--demo-barh) + 8px); left: 50%; transform: translateX(-50%);
  width: min(var(--dashw, 760px), calc(100% - 36px)); padding: 14px; z-index: 18;
  border-radius: 18px; background: color-mix(in srgb, #0a0d16 88%, transparent);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .9);
  backdrop-filter: blur(24px) saturate(150%);
}
.demo-dashboard[hidden] { display: none; }
.dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 4px 11px; }
.dash-head b { font-size: 14px; }
.dash-head span { color: var(--muted); font-size: 10px; }
.dash-grid { display: grid; grid-template-columns: 1.1fr 1.2fr; gap: 8px; }
.dash-card { position: relative; min-width: 0; padding: 11px 12px; border-radius: 12px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; }
.dash-kicker { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8.5px; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 6px; }
.dash-kicker .ic { width: 10px; height: 10px; color: var(--accent); }
.dash-weather b { font-size: 24px; letter-spacing: -1px; line-height: 1; }
.dash-weather small { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }
.dash-bars { display: flex; align-items: flex-end; gap: 5px; height: 26px; margin-top: 10px; }
.dash-bars i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 20%, transparent)); opacity: .8; }
.dash-media-row { display: flex; align-items: center; gap: 8px; }
.dash-art { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #ff8a5b, #d84b6b 45%, #6a5cff); border: 1px solid rgba(255, 255, 255, .2); flex: none; }
.dash-media-row div { min-width: 0; }
.dash-media-row b { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-media-row small { display: block; color: var(--muted); font-size: 8.5px; }
.dash-play { margin-left: auto; width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #0a0d18; flex: none; }
.dash-play .ic { width: 10px; height: 10px; }
.dash-progress { height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .1); margin-top: 9px; overflow: hidden; }
.dash-progress i { display: block; width: 38%; height: 100%; background: var(--accent); }
.dash-cal b { display: block; font-size: 12px; }
.dash-cal small { display: block; color: var(--muted); font-size: 9px; line-height: 1.5; margin-top: 2px; }
.dash-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.dash-actions button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border-radius: 8px; background: rgba(255, 255, 255, .05); color: var(--muted); font-size: 8px; }
.dash-actions button:hover { color: var(--fg); background: rgba(255, 255, 255, .1); }
.dash-actions .ic { width: 14px; height: 14px; }
.demo-desktop.no-dash-blur .demo-dashboard { backdrop-filter: none; background: #0a0d16; }
.demo-dashboard[hidden] { display: none; }

/* ---------- launcher ---------- */
.demo-launcher { position: absolute; left: 24px; top: calc(var(--demo-barh) + 20px); width: 350px; padding: 10px; border-radius: 15px; background: color-mix(in srgb, #0b0e17 94%, transparent); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .9); backdrop-filter: blur(22px); z-index: 20; }
.demo-launcher[hidden] { display: none; }
.demo-desktop[data-launcher="spotlight"] .demo-launcher { left: 50%; transform: translateX(-50%); width: 560px; top: 22%; }
.demo-desktop[data-launcher="fullscreen"] .demo-launcher { inset: 12px; width: auto; top: 12px; border-radius: 16px; }
.demo-desktop[data-launcher="sidebar"] .demo-launcher { left: 10px; top: 10px; bottom: 10px; width: 320px; }
.demo-desktop[data-launcher="list"] .demo-launcher { width: 420px; }
.launcher-top { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 9px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .09); color: var(--muted-2); font-size: 10px; }
.launcher-top > .ic { width: 12px; height: 12px; }
.launcher-top input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--fg); font: inherit; font-size: 10px; }
.launcher-top kbd { font: 8px var(--mono); padding: 2px 4px; border-radius: 4px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); color: var(--muted); }
.launcher-x { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; color: var(--muted); }
.launcher-x:hover { background: rgba(255, 255, 255, .08); color: var(--fg); }
.launcher-x .ic { width: 11px; height: 11px; }
.launcher-tabs { display: flex; gap: 12px; padding: 8px 3px 7px; color: var(--muted-2); font-size: 9px; }
.launcher-tabs .on { color: var(--fg); }
.launcher-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.demo-desktop[data-launcher="list"] .launcher-grid { grid-template-columns: 1fr 1fr; }
.demo-desktop[data-launcher="fullscreen"] .launcher-grid { grid-template-columns: repeat(8, 1fr); }
.demo-desktop[data-launcher="spotlight"] .launcher-grid { grid-template-columns: repeat(5, 1fr); }
.launcher-app { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 3px; border-radius: 8px; color: var(--muted); min-width: 0; }
.launcher-app:hover { background: rgba(255, 255, 255, .07); color: var(--fg); }
.launcher-app .tile-ic { width: 30px; height: 30px; border-radius: 8px; }
.launcher-app .tile-ic .ic { width: 15px; height: 15px; }
.launcher-app span { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.launcher-empty { grid-column: 1 / -1; padding: 18px 4px; text-align: center; color: var(--muted); font-size: 10px; }
.launcher-foot { display: flex; gap: 10px; padding: 8px 3px 2px; color: var(--muted-2); font-size: 8px; }
.launcher-foot kbd { font: 7px var(--mono); padding: 1px 3px; border-radius: 3px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); }
.launcher-foot span:last-child { margin-left: auto; }

/* ---------- dock ---------- */
.demo-dock {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--demo-gap); padding: var(--demo-pad);
  border-radius: var(--demo-radius); background: color-mix(in srgb, #0b0e17 80%, transparent);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 22px 44px -16px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(22px) saturate(140%); white-space: nowrap; z-index: 16;
  transition: border-radius .3s var(--ease), background .3s, box-shadow .3s, padding .3s, transform .3s var(--ease), opacity .3s;
  max-width: calc(100% - 24px);
}
.demo-desktop[data-barpos="bottom"] .demo-dock { bottom: calc(var(--demo-barh) + 14px); }
.demo-desktop[data-dockpos="top"] .demo-dock { top: calc(var(--demo-barh) + 12px); bottom: auto; }
.demo-desktop[data-dockpos="top"][data-barpos="bottom"] .demo-dock { top: 12px; }
.demo-desktop[data-dockpos="left"] .demo-dock { left: 12px; top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; }
.demo-desktop[data-dockpos="right"] .demo-dock { left: auto; right: 12px; top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; }
.demo-desktop[data-dockpos="left"] .dock-apps, .demo-desktop[data-dockpos="right"] .dock-apps,
.demo-desktop[data-dockpos="left"] .dock-sys, .demo-desktop[data-dockpos="right"] .dock-sys { flex-direction: column; }
.demo-desktop[data-dockpos="left"] .dock-sys, .demo-desktop[data-dockpos="right"] .dock-sys { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); padding-left: 0; padding-top: 8px; }
.demo-desktop[data-dockpos="left"] .dock-media, .demo-desktop[data-dockpos="right"] .dock-media { display: none; }
.demo-desktop[data-dockpos="left"] .dock-item::after, .demo-desktop[data-dockpos="right"] .dock-item::after { left: auto; right: -7px; top: 50%; bottom: auto; transform: translateY(-50%) scale(.4); }
.demo-desktop[data-dockpos="left"] .dock-item.running::after, .demo-desktop[data-dockpos="right"] .dock-item.running::after { transform: translateY(-50%) scale(1); }
.demo-desktop[data-dockpos="left"] .dock-item.active::after, .demo-desktop[data-dockpos="right"] .dock-item.active::after { width: 3px; height: 12px; }
.demo-desktop.dock-autohide .demo-dock { transform: translateX(-50%) translateY(calc(100% + 28px)); opacity: .15; }
.demo-desktop.dock-autohide[data-dockpos="top"] .demo-dock { transform: translateX(-50%) translateY(calc(-100% - 28px)); }
.demo-desktop.dock-autohide[data-dockpos="left"] .demo-dock { transform: translateX(calc(-100% - 28px)) translateY(-50%); }
.demo-desktop.dock-autohide[data-dockpos="right"] .demo-dock { transform: translateX(calc(100% + 28px)) translateY(-50%); }
.demo-desktop.dock-autohide.dock-peek .demo-dock { transform: translateX(-50%) translateY(0); opacity: 1; }
.demo-desktop.dock-autohide[data-dockpos="left"].dock-peek .demo-dock { transform: translateX(0) translateY(-50%); }
.demo-desktop.dock-autohide[data-dockpos="right"].dock-peek .demo-dock { transform: translateX(0) translateY(-50%); }
.demo-desktop.dock-autohide[data-dockpos="left"].dock-peek .demo-dock { left: 12px; }
.dock-sep { width: 1px; height: 26px; background: rgba(255, 255, 255, .12); flex: none; }
.demo-desktop[data-dockpos="left"] .dock-sep, .demo-desktop[data-dockpos="right"] .dock-sep { width: 26px; height: 1px; }
.dock-apps, .dock-sys { display: flex; align-items: center; gap: calc(var(--demo-gap) * .85); }
.dock-apps { min-width: 0; }
.dock-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; border-radius: 9px; cursor: grab; transition: transform .18s var(--ease); }
.dock-item:active { cursor: grabbing; }
.dock-item .dock-icon { width: var(--demo-icon); height: var(--demo-icon); border-radius: calc(var(--demo-icon) * .25); display: grid; place-items: center; }
.dock-item .dock-icon .ic { width: 52%; height: 52%; color: #fff; }
.dock-item .label { display: none; font-size: 8px; color: var(--muted); max-width: 58px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-desktop.labels-hover .dock-item:hover .label, .demo-desktop.labels-always .dock-item .label { display: block; }
.dock-item:hover { transform: translateY(-2px) scale(var(--demo-mag)); z-index: 2; }
.demo-desktop[data-dockpos="left"] .dock-item:hover, .demo-desktop[data-dockpos="right"] .dock-item:hover { transform: scale(var(--demo-mag)); }
.dock-item::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 4px; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .65); transform: translateX(-50%) scale(.4); opacity: 0; transition: opacity .15s, transform .15s, width .15s; }
.dock-item.running::after { opacity: .65; transform: translateX(-50%) scale(1); }
.dock-item.active::after { opacity: 1; width: 12px; background: var(--accent); }
.dock-remove { position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; border-radius: 50%; background: var(--red); color: #fff; display: none; place-items: center; z-index: 2; box-shadow: 0 0 0 2px #080a11; }
.dock-remove .ic { width: 8px; height: 8px; }
.demo-desktop.dock-edit .dock-remove { display: grid; }
.demo-desktop.dock-edit .dock-item { cursor: grab; }
.dock-item.drag-over { outline: 2px dashed var(--accent); outline-offset: 3px; border-radius: 9px; }
.dock-sys { border-left: 1px solid rgba(255, 255, 255, .1); padding-left: 8px; color: var(--muted); }
.dock-sys > .ic { width: 14px; height: 14px; }
.dock-media { display: flex; align-items: center; gap: 6px; padding: 3px 7px; border-radius: 7px; background: rgba(255, 255, 255, .05); }
.dock-media .ic { width: 12px; height: 12px; color: var(--accent); }
.dock-media span { display: flex; flex-direction: column; line-height: 1.05; }
.dock-media b { font-size: 8px; color: var(--fg); max-width: 92px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.dock-media small { font-size: 7px; color: var(--muted-2); }
.dock-clock { color: var(--fg); font-size: 9px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* dock styles */
.demo-desktop[data-style="candy"] .demo-dock { border-radius: 999px; padding: max(var(--demo-pad), 8px) max(var(--demo-pad), 14px); background: linear-gradient(180deg, rgba(20, 25, 40, .82), rgba(8, 11, 19, .92)); border-color: rgba(255, 255, 255, .12); box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .3); }
.demo-desktop[data-style="candy"] .dock-icon { background: linear-gradient(145deg, color-mix(in srgb, var(--tile, #5b8cff) 86%, white 14%), color-mix(in srgb, var(--tile, #5b8cff) 58%, #070a10)); border: 1px solid color-mix(in srgb, var(--tile, #5b8cff) 50%, transparent); box-shadow: 0 7px 16px -8px var(--tile, #5b8cff), inset 0 1px 0 rgba(255, 255, 255, .28); }
.demo-desktop[data-style="candy"] .dock-item:hover .dock-icon { filter: brightness(1.1); }
.demo-desktop[data-style="candy"] .dock-icon .ic { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .42)); }
.demo-desktop[data-style="candy"] .dock-item::after { bottom: -10px; }
.demo-desktop[data-style="pill"] .demo-dock { border-radius: 999px; }
.demo-desktop[data-style="pill"] .dock-icon { border-radius: 50%; }
.demo-desktop[data-style="panel"] .demo-dock { left: 0; right: 0; bottom: 0; transform: none; border-radius: 0; border-width: 1px 0 0; padding: 7px 14px; background: rgba(10, 12, 19, .94); box-shadow: none; max-width: none; }
.demo-desktop[data-style="panel"][data-dockpos="top"] .demo-dock { top: 0; bottom: auto; border-width: 0 0 1px; }
.demo-desktop[data-style="panel"][data-barpos="bottom"] .demo-dock { bottom: var(--demo-barh); }
.demo-desktop[data-style="panel"] .dock-apps { flex: 1; justify-content: center; }
.demo-desktop[data-style="panel"] .dock-item::after { bottom: 0; }
.demo-desktop[data-style="minimal"] .demo-dock { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; }
.demo-desktop[data-style="neon"] .demo-dock { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), 0 22px 60px -16px color-mix(in srgb, var(--accent) 60%, transparent); }
.demo-desktop[data-style="neon"] .dock-icon { box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.demo-desktop[data-style="tiles"] .demo-dock { background: none; border-color: transparent; box-shadow: none; backdrop-filter: none; gap: calc(var(--demo-gap) * .8); padding: 4px; }
.demo-desktop[data-style="tiles"] .dock-item { padding: 5px; border-radius: 10px; background: rgba(11, 14, 23, .72); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7); backdrop-filter: blur(14px); }
.demo-desktop[data-style="tiles"] .dock-item:hover { background: rgba(24, 29, 44, .82); }
.demo-desktop[data-style="tiles"] .dock-item::after { bottom: -4px; }
.demo-desktop[data-style="tiles"] .dock-sys { padding: 6px 9px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(11, 14, 23, .72); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7); }
.demo-desktop[data-style="glass"] .demo-dock { background: rgba(255, 255, 255, .1); }
.demo-desktop[data-style="frost"] .demo-dock { background: rgba(245, 248, 255, .82); border-color: rgba(255, 255, 255, .55); color: #1a2030; box-shadow: 0 22px 44px -16px rgba(0, 0, 0, .5); }
.demo-desktop[data-style="frost"] .dock-item .label, .demo-desktop[data-style="frost"] .dock-clock, .demo-desktop[data-style="frost"] .dock-sys { color: #1a2030; }
.demo-desktop[data-style="frost"] .dock-sys { border-color: rgba(15, 20, 35, .15); }
.demo-desktop[data-style="solid"] .demo-dock { background: #121622; border-color: rgba(255, 255, 255, .12); }
.demo-desktop[data-style="outline"] .demo-dock { background: transparent; border-color: rgba(255, 255, 255, .32); box-shadow: none; backdrop-filter: none; }
.demo-desktop[data-style="line"] .demo-dock { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; border-radius: 0; }
.demo-desktop[data-style="line"] .dock-icon { background: none !important; border: 0 !important; box-shadow: none !important; }

/* ---------- toast + hint ---------- */
.demo-toast { position: absolute; left: 50%; bottom: 90px; transform: translate(-50%, 8px); z-index: 40; padding: 7px 12px; border-radius: 9px; background: #101522; border: 1px solid var(--line-strong); color: var(--fg); font-size: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap; }
.demo-toast.show { opacity: 1; transform: translate(-50%, 0); }
.demo-hint { position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 99px; background: rgba(6, 9, 15, .5); border: 1px solid rgba(255, 255, 255, .08); color: var(--muted-2); font-size: 8.5px; backdrop-filter: blur(10px); pointer-events: none; transition: opacity .4s; }
.demo-hint kbd { font: 7px var(--mono); padding: 1px 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); }
.demo-desktop:hover .demo-hint { opacity: 0; }

/* ============================================================================
   Context menus
   ========================================================================== */
.ctx { position: fixed; z-index: 300; min-width: 238px; padding: 5px; border-radius: 11px; background: color-mix(in srgb, #0d111c 96%, transparent); border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .9); backdrop-filter: blur(20px); color: var(--fg); font-size: 11.5px; }
.ctx[hidden] { display: none; }
.ctx-row { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: 7px; color: var(--muted); text-align: left; white-space: nowrap; }
.ctx-row:hover, .ctx-row.on { background: rgba(255, 255, 255, .08); color: var(--fg); }
.ctx-row .ic { width: 13px; height: 13px; flex: none; }
.ctx-row .ctx-label { flex: 1; min-width: 0; }
.ctx-row kbd { font: 8.5px var(--mono); color: var(--muted-2); padding: 1px 4px; border-radius: 4px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.ctx-row .ctx-chev { width: 10px; height: 10px; color: var(--muted-2); }
.ctx-row.disabled { opacity: .42; pointer-events: none; }
.ctx-row.danger { color: #ff9aa8; }
.ctx-row.danger:hover { background: rgba(255, 93, 115, .12); color: #ffb3bd; }
.ctx-sep { height: 1px; margin: 4px 6px; background: rgba(255, 255, 255, .1); }
.ctx-head { padding: 5px 9px 4px; color: var(--muted-2); font-size: 8.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.ctx-sub { position: absolute; left: calc(100% + 4px); top: -5px; display: none; min-width: 190px; padding: 5px; border-radius: 11px; background: #0d111c; border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .9); z-index: 2; }
.ctx-row:hover > .ctx-sub, .ctx-row:focus-within > .ctx-sub { display: block; }
.ctx.flip-x .ctx-sub { left: auto; right: calc(100% + 4px); }

/* ============================================================================
   Settings window — the app's real layout, scaled for the browser.
   ========================================================================== */
.settings-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(3, 5, 9, .58); backdrop-filter: blur(8px) saturate(120%); animation: fade-in .2s; }
.settings-scrim[hidden], .settings-win[hidden] { display: none; }
.settings-win {
  position: fixed; z-index: 100; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1140px, calc(100vw - 32px)); height: min(800px, calc(100vh - 32px));
  display: grid; grid-template-columns: 222px minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr) 38px;
  border-radius: 16px; overflow: hidden; background: #0b0f18; color: var(--fg);
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 50px 140px -40px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .1);
  animation: win-pop .22s var(--ease);
}
.settings-win.max { width: 100vw; height: 100vh; border-radius: 0; left: 0; top: 0; transform: none; }
.sw-tb { grid-column: 1 / -1; display: grid; grid-template-columns: 222px minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .09); background: #0c101a; min-width: 0; }
.sw-brand { display: flex; align-items: center; gap: 9px; height: 100%; padding: 0 15px; border-right: 1px solid rgba(255, 255, 255, .09); min-width: 0; }
.sw-brand img { width: 24px; height: 24px; border-radius: 7px; flex: none; }
.sw-brand div { min-width: 0; line-height: 1.15; }
.sw-brand b { display: block; font-size: 13px; letter-spacing: -.1px; }
.sw-brand small { display: block; color: var(--muted-2); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-search { justify-self: center; display: flex; align-items: center; gap: 7px; width: min(420px, calc(100% - 24px)); padding: 6px 10px; border-radius: 99px; background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .1); }
.sw-search:focus-within { border-color: var(--demo-accent); }
.sw-search .ic { width: 13px; height: 13px; color: var(--muted); flex: none; }
.sw-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--fg); font: inherit; font-size: 11.5px; }
.sw-search kbd { font: 9px var(--mono); color: var(--muted-2); border: 1px solid rgba(255, 255, 255, .1); border-radius: 4px; padding: 0 4px; }
.sw-btns { display: flex; height: 100%; }
.sw-btns button { width: 44px; height: 100%; display: grid; place-items: center; color: var(--muted); }
.sw-btns button:hover { background: rgba(255, 255, 255, .06); color: var(--fg); }
.sw-btns button.close:hover { background: #c42b1c; color: #fff; }
.sw-btns .ic { width: 13px; height: 13px; }

.sw-nav { grid-row: 2; grid-column: 1; padding: 10px 8px; background: #090c14; border-right: 1px solid rgba(255, 255, 255, .09); overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.sw-nav::-webkit-scrollbar, .sw-main::-webkit-scrollbar { width: 6px; }
.sw-nav::-webkit-scrollbar-thumb, .sw-main::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 99px; }
.sw-nav-sec { margin: 9px 9px 3px; color: var(--muted-2); font-size: 8px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; opacity: .8; }
.sw-nav-btn { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; color: var(--muted); font-size: 11px; text-align: left; position: relative; }
.sw-nav-btn:hover { background: rgba(255, 255, 255, .055); color: var(--fg); }
.sw-nav-btn.on { background: color-mix(in srgb, var(--demo-accent) 20%, transparent); color: var(--fg); }
.sw-nav-btn.on::before { content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--demo-accent); }
.sw-nav-btn .ic { width: 14px; height: 14px; flex: none; }
.sw-nav-btn .sw-lock { margin-left: auto; width: 11px; height: 11px; color: var(--amber); opacity: .85; }
.sw-nav-empty { padding: 20px 10px; color: var(--muted-2); font-size: 10.5px; text-align: center; }

.sw-main { grid-row: 2; grid-column: 2; overflow-y: auto; padding: 24px 30px 50px; min-width: 0; }
.sw-main h1 { font-size: 22px; letter-spacing: -.4px; margin: 0 0 4px; font-weight: 700; }
.sw-lead { margin: 0 0 18px; color: var(--muted); font-size: 11.5px; line-height: 1.55; }
.sw-lead code, .sw-note code { font: 10.5px var(--mono); padding: 1px 4px; border-radius: 4px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08); }
.sw-main h2 { margin: 22px 0 8px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; }
.sw-card { background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .085); border-radius: 11px; padding: 2px 14px; }
.sw-row { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(180px, 1.15fr); align-items: center; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.sw-row:last-child { border-bottom: 0; }
.sw-row .sw-lbl { min-width: 0; font-size: 11.5px; }
.sw-row .sw-lbl small { display: block; margin-top: 2px; color: var(--muted-2); font-size: 9.5px; line-height: 1.35; }
.sw-row .sw-ctl { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; }
.sw-row.locked { opacity: .5; }
.sw-row.locked .sw-ctl { pointer-events: none; }
.sw-row.wide { grid-template-columns: 1fr; gap: 7px; }
.sw-row.wide > .sw-ctl { justify-content: flex-start; }
.sw-row.wide > .sw-ctl > * { width: 100%; }
.sw-key { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: var(--fg); font: 9px var(--mono); }
.sw-nav-ver { margin: auto 9px 4px; padding-top: 12px; color: var(--muted-2); font-size: 8.5px; }
.sw-pack-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.sw-pack-tiles { display: flex; gap: 5px; }
.sw-pack-tiles .tile-ic { width: 30px; height: 30px; border-radius: 8px; }
.sw-pack-tiles .tile-ic .ic { width: 15px; height: 15px; }
.sw-pack-info { min-width: 0; flex: 1; }
.sw-pack-info b { display: block; font-size: 11px; }
.sw-pack-info small { display: block; color: var(--muted-2); font-size: 9px; }
.sw-pack-row .sw-btn { margin-left: auto; }
.sw-row .sw-lock { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 2px 6px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); background: color-mix(in srgb, var(--amber) 10%, transparent); color: var(--amber); font-size: 7.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; }
.sw-row .sw-lock .ic { width: 8px; height: 8px; }
.sw-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin: 0 0 16px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent); background: color-mix(in srgb, var(--amber) 7%, transparent); color: #ffd9a1; font-size: 10.5px; line-height: 1.5; }
.sw-banner .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.sw-banner b { color: #ffe7c2; }
.sw-banner .sw-banner-actions { margin-left: auto; display: flex; gap: 6px; flex: none; }
.sw-banner .btn { min-height: 28px; padding: 0 10px; font-size: 9.5px; border-radius: 7px; }
.sw-note { margin: 10px 2px 0; color: var(--muted-2); font-size: 9.5px; line-height: 1.5; }

/* controls */
.sw-switch { position: relative; width: 34px; height: 20px; flex: none; }
.sw-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
.sw-switch i { position: absolute; inset: 0; border-radius: 99px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .1); transition: background .2s; pointer-events: none; }
.sw-switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.sw-switch input:checked + i { background: var(--demo-accent); border-color: transparent; }
.sw-switch input:checked + i::after { transform: translateX(14px); }
.sw-range { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: flex-end; }
.sw-range input { width: min(170px, 100%); accent-color: var(--demo-accent); }
.sw-range b { min-width: 40px; text-align: right; color: var(--muted); font: 9.5px var(--mono); font-weight: 500; }
.sw-select { background: #101522; color: var(--fg); border: 1px solid rgba(255, 255, 255, .12); border-radius: 7px; padding: 6px 9px; font: 10.5px var(--font); min-width: 130px; max-width: 100%; outline: 0; }
.sw-select:focus { border-color: var(--demo-accent); }
.sw-input { background: #101522; color: var(--fg); border: 1px solid rgba(255, 255, 255, .12); border-radius: 7px; padding: 6px 9px; font: 10.5px var(--font); width: 100%; outline: 0; }
.sw-textarea { width: 100%; min-height: 130px; resize: vertical; background: #0a0e16; color: #cfe0ff; border: 1px solid rgba(255, 255, 255, .12); border-radius: 9px; padding: 10px 12px; font: 10px/1.55 var(--mono); tab-size: 2; outline: 0; }
.sw-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 29px; padding: 0 10px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .055); color: var(--fg); font-size: 9.5px; font-weight: 600; white-space: nowrap; }
.sw-btn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.sw-btn.primary { background: linear-gradient(135deg, #8aa6ff, #7c9cff 45%, #b58cff); border-color: transparent; color: #0a0d18; }
.sw-btn.ghost { background: transparent; }
.sw-btn .ic { width: 12px; height: 12px; }
.sw-btn:disabled { opacity: .45; pointer-events: none; }
.sw-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .045); color: var(--muted); font-size: 8px; }
.sw-pill.ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); background: color-mix(in srgb, var(--green) 8%, transparent); }

.sw-swatches { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.sw-swatch { width: 22px; height: 22px; border-radius: 7px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: transform .15s, border-color .15s; }
.sw-swatch:hover { transform: scale(1.08); }
.sw-swatch.on { border-color: #fff; }
.sw-color { width: 30px; height: 28px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .14); background: none; padding: 0; flex: none; }

.sw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 7px; width: 100%; }
.sw-card-btn { display: grid; gap: 5px; padding: 6px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); color: var(--muted); font-size: 9.5px; text-align: center; }
.sw-card-btn:hover { border-color: rgba(255, 255, 255, .24); color: var(--fg); }
.sw-card-btn.on { border-color: var(--demo-accent); color: var(--fg); box-shadow: inset 0 0 0 1px var(--demo-accent); }
.sw-sketch { position: relative; display: block; height: 38px; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--demo-accent) 24%, #0b0f18), color-mix(in srgb, var(--demo-accent2) 28%, #0b0f18)); }
.sw-sketch i { position: absolute; display: block; background: rgba(255, 255, 255, .62); }
.sw-sketch .sk-bar { left: 8%; right: 8%; top: 8%; height: 12%; border-radius: 2px; opacity: .45; }
.sw-sketch .sk-dock { left: 18%; right: 18%; bottom: 12%; height: 26%; border-radius: 99px; background: rgba(10, 13, 20, .72); border: 1px solid rgba(255, 255, 255, .18); }
.sw-sketch .sk-tile { width: 11%; height: 17%; bottom: 17%; border-radius: 3px; background: var(--demo-accent); }
.sw-sketch .sk-tile:nth-child(2) { left: 24%; }
.sw-sketch .sk-tile:nth-child(3) { left: 38%; }
.sw-sketch .sk-tile:nth-child(4) { left: 52%; }
.sw-sketch .sk-tile:nth-child(5) { left: 66%; }
.sw-sketch .sk-dot { width: 4%; height: 7%; border-radius: 50%; bottom: 35%; background: rgba(255, 255, 255, .6); }

.sw-wallgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; width: 100%; }
.sw-wall { position: relative; aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background-size: cover; background-position: center; opacity: .72; transition: opacity .15s, border-color .15s, transform .15s; }
.sw-wall:hover { opacity: 1; transform: translateY(-1px); }
.sw-wall.on { border-color: var(--demo-accent); opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--demo-accent) 18%, transparent); }
.sw-wall span { position: absolute; left: 6px; bottom: 5px; padding: 2px 5px; border-radius: 4px; background: rgba(5, 8, 14, .68); color: #fff; font-size: 8px; backdrop-filter: blur(6px); }

.sw-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sw-empty { padding: 30px 0; text-align: center; color: var(--muted-2); font-size: 11px; }
.sw-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; border-top: 1px solid rgba(255, 255, 255, .09); background: #090c14; color: var(--muted-2); font-size: 9.5px; }
.sw-foot > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-foot button { display: inline-flex; align-items: center; gap: 5px; min-height: 25px; padding: 0 8px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .1); color: var(--muted); font-size: 9px; }
.sw-foot button:hover { color: var(--fg); border-color: rgba(255, 255, 255, .2); }
.sw-foot .ic { width: 11px; height: 11px; }

/* app picker */
.sw-appgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 7px; width: 100%; }
.sw-app { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 4px 7px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .03); color: var(--muted); min-width: 0; }
.sw-app:hover { color: var(--fg); border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); }
.sw-app .tile-ic { width: 30px; height: 30px; border-radius: 8px; }
.sw-app .tile-ic .ic { width: 15px; height: 15px; }
.sw-app span { font-size: 8.5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-app.on { border-color: color-mix(in srgb, var(--demo-accent) 60%, transparent); background: color-mix(in srgb, var(--demo-accent) 10%, transparent); color: var(--fg); }

/* tiles used everywhere */
.tile-ic { display: grid; place-items: center; color: #fff; flex: none; background: linear-gradient(145deg, color-mix(in srgb, var(--tone, #5b8cff) 86%, white 14%), color-mix(in srgb, var(--tone, #5b8cff) 58%, #070a10)); border: 1px solid color-mix(in srgb, var(--tone, #5b8cff) 50%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); }
.tile-ic .ic { width: 52%; height: 52%; }
.tile-ic.blue { --tone: #5b8cff; } .tile-ic.amber { --tone: #ffc46b; } .tile-ic.blurple { --tone: #7a86ff; }
.tile-ic.red { --tone: #ff6b7f; } .tile-ic.slate { --tone: #2b3347; } .tile-ic.violet { --tone: #b58cff; }
.tile-ic.teal { --tone: #5ee7d0; } .tile-ic.gray { --tone: #3a4256; } .tile-ic.green { --tone: #4bd18a; }

/* ============================================================================
   Site modal + toast
   ========================================================================== */
.modal-scrim { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(3, 5, 9, .68); backdrop-filter: blur(10px); animation: fade-in .18s; }
.modal-scrim[hidden] { display: none; }
.modal { width: min(440px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 20px; border-radius: 16px; background: #0d111b; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .95); animation: win-pop .2s var(--ease); }
.modal .modal-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); margin-bottom: 12px; }
.modal .modal-ic .ic { width: 18px; height: 18px; }
.modal h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.2px; }
.modal p { margin: 0 0 16px; color: var(--muted); font-size: 11.5px; line-height: 1.6; }
.modal .modal-actions { display: flex; gap: 7px; justify-content: flex-end; flex-wrap: wrap; }
.modal .btn { min-height: 34px; font-size: 10.5px; border-radius: 8px; }
.toast-site { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 8px); z-index: 250; padding: 8px 14px; border-radius: 9px; background: #101522; border: 1px solid var(--line-strong); color: var(--fg); font-size: 11px; box-shadow: 0 14px 36px rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap; }
.toast-site.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes fade-in { from { opacity: 0; } }
@keyframes win-pop { from { opacity: 0; transform: translate(-50%, -48%) scale(.97); } }

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .settings-win { grid-template-columns: 190px minmax(0, 1fr); }
  .sw-tb { grid-template-columns: 190px minmax(0, 1fr) auto; }
  .sw-brand { padding: 0 12px; }
  .sw-main { padding: 20px 22px 44px; }
}
@media (max-width: 820px) {
  .demo-body { height: auto; min-height: 100vh; overflow: auto; }
  .demo-nav { height: auto; min-height: 60px; padding: 8px 14px; flex-wrap: wrap; }
  .demo-badge, .demo-hide-sm { display: none; }
  .demo-main { height: auto; padding: 10px; }
  .demo-desktop { min-height: 68vh; }
  .demo-strip-actions button { font-size: 9.5px; padding: 0 8px; }
  .settings-win { width: 100vw; height: 100vh; border-radius: 0; left: 0; top: 0; transform: none; grid-template-columns: 1fr; grid-template-rows: 46px auto minmax(0, 1fr) 36px; }
  .sw-tb { grid-template-columns: 1fr auto; }
  .sw-brand { border-right: 0; }
  .sw-search { display: none; }
  .sw-nav { grid-row: 2; grid-column: 1; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .09); padding: 6px; gap: 2px; }
  .sw-nav-sec { display: none; }
  .sw-nav-btn { flex: none; padding: 6px 9px; font-size: 10px; }
  .sw-nav-btn.on::before { display: none; }
  .sw-nav-btn .sw-lock { display: none; }
  .sw-main { grid-row: 3; grid-column: 1; padding: 16px 14px 40px; }
  .sw-foot { grid-column: 1; }
  .sw-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 0; }
  .sw-row .sw-ctl { justify-content: flex-start; }
  .sw-range { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .demo-nav .brand small { display: none; }
  .demo-nav-meta { gap: 5px; }
  .demo-desktop { min-height: 62vh; border-radius: 14px; }
  .demo-strip-left span:last-child { display: none; }
  .demo-strip-actions { gap: 4px; }
  .demo-strip-actions button { min-height: 27px; padding: 0 7px; }
  .demo-strip-actions button svg { display: none; }
  .bar-title, .bar-voice, .bar-ws { display: none; }
  .demo-launcher { left: 10px; right: 10px; width: auto; top: calc(var(--demo-barh) + 12px); }
  .demo-dock { transform: translateX(-50%) scale(.82); transform-origin: bottom center; }
  .demo-desktop[data-dockpos="top"] .demo-dock { transform-origin: top center; }
  .demo-desktop[data-dockpos="left"] .demo-dock { transform: translateY(-50%) scale(.82); transform-origin: left center; }
  .demo-desktop[data-dockpos="right"] .demo-dock { transform: translateY(-50%) scale(.82); transform-origin: right center; }
  .demo-desktop[data-style="panel"] .demo-dock { transform: none; }
  .demo-dashboard { width: calc(100% - 20px); }
  .dash-grid { grid-template-columns: 1fr; }
  .demo-hint { display: none; }
  .demo-toast { bottom: 78px; white-space: normal; text-align: center; max-width: calc(100% - 30px); }
  .settings-win { height: 100dvh; }
  .sw-card { padding: 2px 10px; }
  .sw-main h1 { font-size: 19px; }
  .sw-banner { flex-wrap: wrap; }
  .sw-banner .sw-banner-actions { margin-left: 0; width: 100%; }
  .modal { padding: 16px; }
}
@media (max-width: 430px) {
  .demo-dock { transform: translateX(-50%) scale(.68); }
  .demo-desktop[data-dockpos="left"] .demo-dock { transform: translateY(-50%) scale(.68); }
  .demo-desktop[data-dockpos="right"] .demo-dock { transform: translateY(-50%) scale(.68); }
  .demo-desktop[data-style="panel"] .demo-dock { transform: none; }
  .dock-media { display: none; }
  .demo-nav-meta .btn { font-size: 10px; padding: 0 8px; min-height: 32px; }
  .demo-nav .brand { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Home: preset gallery and doors (mirrors Settings -> Home) */
.demo-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 0 0 16px; }
.demo-preset { text-align: left; padding: 0; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .035); color: var(--fg); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, border-color .15s; }
.demo-preset:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.demo-preset.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.demo-preset-shot { position: relative; aspect-ratio: 16 / 9; background: #0b0e16 center / cover no-repeat; overflow: hidden; }
.demo-preset-shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(5, 7, 12, .55)); }
.demo-preset-bar { position: absolute; left: 5%; right: 5%; top: 5%; height: 5%; border-radius: 99px; background: rgba(8, 10, 16, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.demo-preset-dock { position: absolute; left: 50%; bottom: 7%; width: 42%; height: 9%; transform: translateX(-50%); border-radius: 99px; background: rgba(8, 10, 16, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.demo-preset-initial { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); width: 26%; aspect-ratio: 1; border-radius: 24%; display: grid; place-items: center; background: color-mix(in srgb, var(--demo-preset-accent) 85%, #fff); color: #0a0d18; font-weight: 800; font-size: clamp(12px, 2.2vw, 22px); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.demo-preset-tx { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.demo-preset-tx b { font-size: 12px; }
.demo-preset-tx small { color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.demo-doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.demo-door { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255, 255, 255, .035); color: var(--fg); transition: border-color .15s, background .15s; }
.demo-door:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .06); }
.demo-door-ic { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.demo-door-ic .ic { width: 16px; height: 16px; }
.demo-door b { display: block; font-size: 12px; }
.demo-door small { color: var(--muted); font-size: 10.5px; }
.demo-icons { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 0; }
.demo-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.demo-icon .ic { width: 20px; height: 20px; }
.demo-icon.blue { color: #7c9cff; } .demo-icon.amber { color: #ffc46b; } .demo-icon.violet { color: #b58cff; } .demo-icon.teal { color: #5ee7d0; }