/* pro.bmux desktop. Ported from docs/superpowers/prototypes/desktop.tmpl.html. */
:root {
  --ink: #060a12; --ink-2: #0b1220;
  --glass: rgba(14, 21, 34, .58); --glass-hi: rgba(22, 32, 50, .72);
  --panel: rgba(12, 18, 29, .86); --field: rgba(3, 7, 13, .55);
  --hair: rgba(255, 255, 255, .07); --hair-2: rgba(255, 255, 255, .12); --hair-3: rgba(255, 255, 255, .2);
  --text: #e8eef7; --muted: #9aa8bc; --dim: #66758b;
  --ice: #9ecbff; --ice-deep: #6fa6e6; --warm: #ffd0a1; --ok: #93e2b4; --bad: #ff9f9f;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", "Noto Sans", Roboto, sans-serif;
  --mb: 32px; --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
body.dragging, body.dragging * { user-select: none !important; }
body.dragging iframe { pointer-events: none; }
svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ================= wallpaper ================= */
#wall { position: fixed; inset: 0; overflow: hidden; z-index: 0;
  background:
    radial-gradient(1100px 520px at 78% 108%, rgba(158, 203, 255, .20), transparent 62%),
    radial-gradient(900px 420px at 8% -10%, rgba(116, 134, 214, .16), transparent 60%),
    radial-gradient(700px 300px at 50% 38%, rgba(255, 208, 161, .035), transparent 70%),
    linear-gradient(180deg, #050912 0%, #0a1322 38%, #11213a 66%, #1a3254 86%, #22406a 100%); }
.aurora { position: absolute; left: -20%; right: -20%; top: 4%; height: 38%; filter: blur(46px); opacity: .42; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 8%, rgba(116, 220, 214, .30) 26%, rgba(158, 203, 255, .34) 42%, rgba(150, 140, 255, .20) 58%, transparent 76%);
  transform: rotate(-7deg) translateX(0); animation: aurora 48s ease-in-out infinite alternate; }
@keyframes aurora { to { transform: rotate(-4deg) translateX(6%) scaleY(1.15); opacity: .3; } }
.stars { position: absolute; inset: 0 0 45% 0; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 27% 8%, #dbe9ff 50%, transparent 51%),
    radial-gradient(1px 1px at 41% 26%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 58% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 69% 30%, #cfe3ff 50%, transparent 51%), radial-gradient(1px 1px at 83% 9%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 6% 36%, #dbe9ff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 35% 40%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 76% 44%, #fff 50%, transparent 51%);
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.ridge { position: absolute; left: 0; right: 0; bottom: 0; }
.ridge.back { height: 46%; opacity: .9;
  background: linear-gradient(180deg, #2a4466 0%, #182a43 40%, #0f1c30 100%);
  clip-path: polygon(0 62%, 6% 48%, 11% 55%, 18% 30%, 24% 44%, 29% 38%, 36% 58%, 44% 34%, 50% 20%, 56% 36%, 61% 31%, 68% 52%, 75% 28%, 81% 40%, 87% 33%, 94% 50%, 100% 42%, 100% 100%, 0 100%); }
.ridge.back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(220, 236, 255, .22), transparent 22%); }
.ridge.front { height: 30%;
  background: linear-gradient(180deg, #13233a 0%, #0b1526 55%, #070d18 100%);
  clip-path: polygon(0 40%, 8% 52%, 15% 34%, 23% 50%, 31% 42%, 40% 60%, 48% 46%, 57% 62%, 64% 44%, 72% 56%, 80% 36%, 88% 54%, 95% 46%, 100% 56%, 100% 100%, 0 100%); }
.fog { position: absolute; left: 0; width: 200%; height: 34%; pointer-events: none;
  background:
    radial-gradient(40% 60% at 15% 60%, rgba(200, 222, 255, .10), transparent 70%),
    radial-gradient(35% 50% at 45% 50%, rgba(200, 222, 255, .08), transparent 70%),
    radial-gradient(40% 60% at 65% 60%, rgba(200, 222, 255, .10), transparent 70%),
    radial-gradient(35% 50% at 95% 50%, rgba(200, 222, 255, .08), transparent 70%);
  animation: drift 110s linear infinite; }
.fog.f1 { bottom: 16%; }
.fog.f2 { bottom: -4%; opacity: .8; animation-duration: 75s; animation-direction: reverse; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.snow { position: absolute; inset: -300px 0 0 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 90px 120px, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 160px 60px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 230px 200px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 280px 260px, #e9f3ff 50%, transparent 51%), radial-gradient(1px 1px at 50px 240px, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 130px 280px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 200px 10px, #fff 50%, transparent 51%);
  background-size: 300px 300px; animation: fall 34s linear infinite; }
.snow.s2 { opacity: .28; background-size: 190px 190px; animation-duration: 52s; filter: blur(.4px); }
@keyframes fall { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(60px, 300px, 0); } }
.brandmark { position: absolute; left: clamp(24px, 4vw, 64px); bottom: 118px; pointer-events: none; user-select: none; }
.brandmark .word { font-size: clamp(44px, 7vw, 96px); font-weight: 800; letter-spacing: -0.055em; line-height: 1;
  background: linear-gradient(180deg, rgba(232, 242, 255, .30), rgba(158, 203, 255, .08)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brandmark .word span { font-weight: 300; }
.brandmark .line { margin-top: 8px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(205, 222, 245, .32); }
/* ?test and reduced motion: nothing moves, so tests are deterministic */
.no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .aurora, .fog, .snow { animation: none !important; }
  *, *::before, *::after { transition-duration: 0s !important; }
}

/* ================= menu bar ================= */
#menubar { position: fixed; z-index: 100000; top: 0; left: 0; right: 0; height: var(--mb); display: flex; align-items: center; gap: 2px; padding: 0 8px;
  background: rgba(9, 14, 24, .55); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--hair); font-size: 13px; user-select: none; }
.mbi { display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border: 0; background: none; border-radius: 6px; cursor: default; color: rgba(232, 238, 247, .88); white-space: nowrap; }
.mbi:hover, .mbi.open { background: rgba(255, 255, 255, .09); color: #fff; }
.mbi.brand { gap: 8px; padding: 0 9px 0 4px; font-weight: 600; color: var(--muted); letter-spacing: -0.01em; font-size: 14px; }
.mbi.brand b { color: var(--text); font-weight: 700; }
/* brand mark: the tiling prototype's gradient tile */
.logo { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center;
  background: linear-gradient(135deg, #b9dbff, #7fa8de 55%, #ffd0a1); box-shadow: 0 2px 8px rgba(158, 203, 255, .25), inset 0 1px 0 rgba(255, 255, 255, .4); }
.logo svg { fill: #0b1220; }
.mbi.ask { color: var(--warm); }
.mbi.ask svg { width: 14px; height: 14px; }
.mbsp { flex: 1; }
.clock { color: rgba(232, 238, 247, .85); padding: 0 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock .d { color: var(--muted); margin-right: 8px; }

/* workspace switcher: four pills; names on desktops, numbers on phones */
#ws { display: flex; align-items: center; gap: 2px; margin: 0 6px; padding: 2px; border-radius: 8px; background: rgba(255, 255, 255, .035); border: 1px solid var(--hair); }
.wsp { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border: 0; border-radius: 6px; background: none; cursor: default;
  color: var(--muted); font-size: 12.5px; white-space: nowrap; transition: background .15s, color .15s; }
.wsp[hidden] { display: none; }
.wsp:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
.wsp.on { background: rgba(158, 203, 255, .16); color: #fff; box-shadow: inset 0 0 0 1px rgba(158, 203, 255, .28); }
.wsp .wn { display: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.wsp .wl { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.wsp .wd { display: flex; gap: 3px; }
.wsp .wd:empty { display: none; }
.wsp .wd i { --tc: #9aa8bb; width: 5px; height: 5px; border-radius: 1.5px; background: var(--tc); opacity: .6; }
.wsp.on .wd i { opacity: .95; box-shadow: 0 0 4px color-mix(in srgb, var(--tc) 55%, transparent); }
.wsp .wd i.min { opacity: .25; box-shadow: none; }
.wsp .wd i.more { width: 3px; height: 3px; align-self: center; background: var(--muted); box-shadow: none; }
.wsedit { height: 22px; padding: 0 8px; border: 1px solid rgba(158, 203, 255, .5); border-radius: 6px; background: var(--field); color: var(--text);
  font: inherit; font-size: 12.5px; outline: none; box-shadow: 0 0 0 3px rgba(158, 203, 255, .15); }

/* toast */
#toast { position: fixed; z-index: 200001; left: 50%; bottom: 96px; transform: translate(-50%, 8px); max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 9px;
  background: rgba(20, 28, 44, .9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--hair-2);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45); font-size: 13px; color: var(--text); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s var(--ease); }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

kbd { font-family: var(--sans); font-size: 11px; color: var(--muted); background: rgba(255, 255, 255, .06); border: 1px solid var(--hair-2); border-radius: 5px; padding: 0 5px; min-width: 18px; display: inline-block; text-align: center; line-height: 17px; }

/* menus (dropdown + context) */
#menu { position: fixed; z-index: 200000; min-width: 220px; max-width: 320px; padding: 5px; border-radius: 10px;
  background: rgba(20, 28, 44, .82); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--hair-2); box-shadow: 0 18px 50px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
  font-size: 13px; transform-origin: top left; animation: pop .14s var(--ease); }
#menu[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(-3px); } }
.mi { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 10px; border: 0; background: none; border-radius: 6px; text-align: left; cursor: default; color: var(--text); }
.mi:hover:not(:disabled) { background: rgba(126, 178, 240, .28); }
.mi:disabled { color: var(--dim); }
.mi .k { margin-left: auto; color: var(--dim); font-size: 12px; padding-left: 18px; }
.mi .ck { width: 12px; color: var(--ice); flex: none; }
.mi .glyph { width: 20px; height: 20px; border-radius: 6px; font-size: 8.5px; }
.mi.danger { color: #ffb3b3; }
.msep { height: 1px; background: var(--hair-2); margin: 5px 8px; }
.mhd { padding: 6px 10px 3px; font-size: 11px; color: var(--dim); font-weight: 600; letter-spacing: .02em; }

/* ================= tool glyphs (from the tiling prototype) =================
   A tool's monogram on its tag's pastel colour (--tc, set inline from catalog.js).
   22px in title bars, menus and chips; bigger and glossier in the dock and the drawer. */
.glyph { --tc: #9aa8bb; display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px;
  font-size: 9.5px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #0a0e14;
  background: linear-gradient(140deg, color-mix(in srgb, var(--tc) 100%, white 18%), color-mix(in srgb, var(--tc) 70%, #1a2230));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.glyph svg { width: 52%; height: 52%; stroke-width: 2; }
.glyph.ask { font-size: 15px; font-weight: 600; }
.glyph.grid { --tc: #c3d2e6; }
.glyph.grid svg { width: 46%; height: 46%; stroke-width: 1.7; }
/* app-icon size: a top gloss under the letters and a soft shadow tinted by the tag */
.dk .glyph, .tile .glyph { position: relative; isolation: isolate; border-radius: 13px; font-size: 15px; letter-spacing: -.03em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(10, 14, 20, .22),
    0 7px 16px -4px color-mix(in srgb, var(--tc) 50%, transparent), 0 2px 5px rgba(0, 0, 0, .35); }
.dk .glyph.ask { font-size: 26px; font-weight: 500; }
.dk .glyph::before, .tile .glyph::before { content: ""; position: absolute; z-index: -1; left: 2px; right: 2px; top: 1px; height: 50%; pointer-events: none;
  border-radius: 11px 11px 40% 40% / 11px 11px 22% 22%; background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .08)); }

/* ================= windows ================= */
#desk { position: fixed; inset: 0; z-index: 1; }
.win { position: absolute; display: flex; flex-direction: column; min-width: 0; border-radius: 12px; overflow: hidden;
  background: rgba(14, 21, 33, .74); -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4);
  border: 1px solid var(--hair-2);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .38), 0 2px 6px rgba(0, 0, 0, .25);
  transition: box-shadow .2s, border-color .2s; }
.win.hidden { display: none; }
.win.focus { border-color: rgba(158, 203, 255, .34);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .58), 0 8px 24px rgba(0, 0, 0, .3), 0 0 0 1px rgba(158, 203, 255, .08), 0 0 60px rgba(120, 170, 240, .08); }
.win.anim { transition: left .22s var(--ease), top .22s var(--ease), width .22s var(--ease), height .22s var(--ease), box-shadow .2s, border-color .2s; }
.tb { position: relative; display: flex; align-items: center; gap: 9px; height: 42px; flex: none; padding: 0 6px 0 11px; cursor: default; user-select: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)); border-bottom: 1px solid var(--hair); }
.win.focus .tb::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(190, 222, 255, .55), transparent); }
.tt { font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.win.focus .tt { color: var(--text); }
.tag { --tc: #9aa8bb; flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  color: var(--tc); background: color-mix(in srgb, var(--tc) 13%, transparent); }
.wc { margin-left: auto; display: flex; gap: 1px; flex: none; }
.wc button { width: 27px; height: 27px; display: grid; place-items: center; border: 0; background: none; border-radius: 7px; color: var(--dim); cursor: default; transition: background .12s, color .12s; }
.win.focus .wc button { color: var(--muted); }
.wc button:hover { background: rgba(255, 255, 255, .08); color: var(--text) !important; }
.wc button.close:hover { background: rgba(255, 120, 120, .16); color: #ffb3b3 !important; }
.wc button.pin.on { color: var(--warm) !important; }
.wc button.pin.on svg { fill: rgba(255, 208, 161, .35); }
.wc svg.i { width: 15px; height: 15px; }
.wb { flex: 1; min-height: 0; overflow: hidden; font-size: 14px; line-height: 1.5; background: rgba(8, 12, 20, .30); }
.wb iframe.tool { width: 100%; height: 100%; border: 0; display: block; background: transparent; }
.wb .ask { display: grid; place-items: center; height: 100%; padding: 16px; text-align: center; color: var(--muted); }
.wb .ask .glyph { width: 56px; height: 56px; border-radius: 16px; margin-bottom: 12px; }
.wb .ask h3 { margin: 0 0 4px; color: var(--text); font-size: 17px; letter-spacing: -0.02em; }
.wb .ask p { margin: 0; font-size: 13.5px; }
/* ask window */
.wb .ask-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; height: 100%; padding: 16px; box-sizing: border-box; color: var(--muted); }
.ask-grid > div { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: auto; }
.ask-grid label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.ask-grid textarea { width: 100%; box-sizing: border-box; background: var(--field); border: 1px solid var(--hair-2); border-radius: 9px; color: var(--text);
  font-family: var(--sans); font-size: 13.5px; line-height: 1.55; padding: 9px 11px; outline: none; margin: 0; resize: none; flex: 1; min-height: 70px; transition: border-color .15s, box-shadow .15s; }
.ask-grid textarea:focus { border-color: rgba(158, 203, 255, .6); box-shadow: 0 0 0 3px rgba(158, 203, 255, .12); }
.ask-grid .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ask-grid .row { display: flex; align-items: center; gap: 10px; }
.ask-grid .note { font-size: 12.5px; color: var(--dim); }
.ask-grid .note.err { color: var(--bad); }
.ask-grid .note.ok { color: var(--ok); }
.ask-grid .ask-fine { color: var(--dim); font-size: 12.5px; margin: 0; line-height: 1.5; }
.btn.pri { background: rgba(158, 203, 255, .16); border-color: rgba(158, 203, 255, .4); color: var(--ice); }
.btn:disabled { opacity: .55; cursor: default; }
.bl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bl li { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 9px 11px; background: rgba(255, 255, 255, .035); border: 1px solid var(--hair); border-radius: 10px; }
.bl li.mine { border-color: rgba(255, 208, 161, .4); background: rgba(255, 208, 161, .05); animation: rise .25s var(--ease); }
.bl li.empty { display: block; color: var(--dim); font-size: 12.5px; background: none; border-style: dashed; }
.bl .bt { font-weight: 600; font-size: 13.5px; grid-column: 1; color: var(--text); overflow-wrap: anywhere; }
.bl .bm { font-size: 11.5px; color: var(--dim); grid-column: 1; }
.bl .vote { grid-row: 1 / span 2; grid-column: 2; align-self: center; padding: 4px 10px; font-size: 12px; }
.pill { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; margin-right: 6px; }
.pill.building { color: var(--ice); background: rgba(158, 203, 255, .12); }
.pill.queued { color: var(--muted); background: rgba(255, 255, 255, .06); }
.pill.shipped { color: var(--ok); background: rgba(147, 226, 180, .12); }
.pill.pending { color: var(--warm); background: rgba(255, 208, 161, .12); }
.pill.rejected { color: var(--dim); background: rgba(255, 255, 255, .05); }
.ask-grid [hidden] { display: none; }
body.phone .wb .ask-grid { grid-template-columns: 1fr; overflow: auto; }
.win:not(.focus) .wb { opacity: .9; }
.rz { position: absolute; z-index: 2; }
.rz.n { top: -3px; left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
.rz.s { bottom: -3px; left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
.rz.e { right: -3px; top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; }
.rz.w { left: -3px; top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; }
.rz.nw { left: -3px; top: -3px; width: 14px; height: 14px; cursor: nwse-resize; }
.rz.ne { right: -3px; top: -3px; width: 14px; height: 14px; cursor: nesw-resize; }
.rz.sw { left: -3px; bottom: -3px; width: 14px; height: 14px; cursor: nesw-resize; }
.rz.se { right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; }
.rz.se::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px; opacity: .35;
  background: linear-gradient(135deg, transparent 45%, var(--muted) 46%, var(--muted) 54%, transparent 55%, transparent 70%, var(--muted) 71%, var(--muted) 79%, transparent 80%); }
.win.snapped .rz.se::after { display: none; }
#snap { position: fixed; z-index: 2; border-radius: 12px; pointer-events: none; opacity: 0;
  background: rgba(158, 203, 255, .13); border: 1px solid rgba(158, 203, 255, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 40px rgba(158, 203, 255, .15);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .16s, left .18s var(--ease), top .18s var(--ease), width .18s var(--ease), height .18s var(--ease); }
#snap.on { opacity: 1; }

/* ================= empty workspace (tiling prototype) ================= */
.empty { position: absolute; left: 0; right: 0; top: var(--mb); bottom: 84px; z-index: 0; display: grid; place-items: center; text-align: center; padding: 20px 16px; overflow: auto; }
.empty[hidden] { display: none; }
.empty .inner { max-width: 680px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ice); background: rgba(158, 203, 255, .08);
  border: 1px solid rgba(158, 203, 255, .2); border-radius: 999px; padding: 4px 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty h1 { font-weight: 300; font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -.035em; margin: 16px 0 6px; line-height: 1.1; color: var(--text); }
.empty h1 b { font-weight: 800; }
.empty .sub { color: var(--muted); margin: 0 0 22px; font-size: 15px; }
.bigsearch { display: flex; align-items: center; gap: 10px; width: min(460px, 100%); margin: 0 auto 26px; height: 46px; padding: 0 12px 0 16px; border-radius: 12px;
  border: 1px solid var(--hair-2); background: var(--glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--dim); cursor: text; font-size: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: border-color .15s, color .15s; }
.bigsearch:hover { border-color: rgba(158, 203, 255, .4); color: var(--muted); }
.bigsearch svg.i { color: var(--muted); }
.bigsearch span { flex: 1; text-align: left; }
.empty .sec { margin-top: 16px; }
.empty .sec h4 { margin: 0 0 9px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.erow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; max-width: 100%; padding: 0 13px 0 6px; border-radius: 10px; border: 1px solid var(--hair-2);
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip:hover { border-color: rgba(158, 203, 255, .45); background: rgba(158, 203, 255, .08); transform: translateY(-1px); }
.chip.pinned { border-color: rgba(255, 208, 161, .28); }
.chip.ask { color: var(--warm); border-color: rgba(255, 208, 161, .3); padding-left: 12px; }
.chip.ask:hover { background: rgba(255, 208, 161, .08); border-color: rgba(255, 208, 161, .5); }
.empty .hint { margin: 26px 0 0; font-size: 12.5px; color: var(--dim); }
.empty .sub:last-child { margin: 0; }

/* ================= dock ================= */
#dock { position: fixed; z-index: 100000; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 6px;
  max-width: calc(100vw - 24px); padding: 8px 10px; border-radius: 22px;
  background: rgba(18, 27, 43, .48); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6);
  border: 1px solid var(--hair-2); box-shadow: 0 20px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .07); }
.dk { position: relative; flex: none; border: 0; background: none; padding: 0; width: 44px; height: 44px; cursor: default; transition: transform .17s var(--ease); }
.dk .glyph { width: 44px; height: 44px; transition: filter .15s; }
.dk:hover { transform: translateY(-4px) scale(1.09); }
.dk:active .glyph { filter: brightness(.85); }
.dk .dot { position: absolute; left: 50%; bottom: -6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 4px; background: #d4e7ff; opacity: 0; transition: all .2s var(--ease); }
.dk.run .dot { opacity: .75; }
.dk.min .dot { opacity: .4; }
.dk.front .dot { opacity: 1; width: 14px; margin-left: -7px; background: var(--ice); box-shadow: 0 0 8px rgba(158, 203, 255, .9); }
.dk .tip { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%) translateY(4px); white-space: nowrap; pointer-events: none;
  font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 8px; color: var(--text); opacity: 0;
  background: rgba(20, 28, 44, .92); border: 1px solid var(--hair-2); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); transition: opacity .15s, transform .15s; }
.dk:hover .tip { opacity: 1; transform: translateX(-50%) translateY(0); }
body.menu-open .dk .tip { opacity: 0 !important; }
.dk .tip em { font-style: normal; color: var(--dim); margin-left: 6px; }
.dk .lbl { display: none; }
.dk.bounce .glyph { animation: bounce .5s var(--ease); }
@keyframes bounce { 30% { transform: translateY(-10px); } 60% { transform: translateY(0); } 80% { transform: translateY(-3px); } }
.dsep { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--hair-3); flex: none; }

/* ================= launcher ================= */
.overlay { position: fixed; inset: 0; z-index: 150000; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh;
  background: rgba(4, 8, 15, .38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade .15s; }
.overlay[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.lp { width: min(640px, calc(100vw - 24px)); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; max-height: 76vh;
  background: rgba(18, 26, 42, .80); -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid var(--hair-2); box-shadow: 0 40px 100px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: rise .18s var(--ease); transition: width .22s var(--ease); }
.lp.all { width: min(980px, calc(100vw - 24px)); }
@keyframes rise { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.lhead { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--hair); flex: none; }
.lhead svg.i { width: 20px; height: 20px; color: var(--muted); }
#lq { flex: 1; min-width: 0; height: 58px; background: none; border: 0; outline: none; color: var(--text); font: 400 19px var(--sans); letter-spacing: -0.01em; }
#lq::placeholder { color: var(--dim); }
.seg { display: flex; padding: 3px; border-radius: 9px; background: rgba(0, 0, 0, .25); border: 1px solid var(--hair); flex: none; }
.seg button { border: 0; background: none; padding: 4px 11px; border-radius: 6px; font-size: 12.5px; color: var(--muted); cursor: default; }
.seg button.on { background: rgba(255, 255, 255, .1); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.lbody { overflow: auto; min-height: 0; flex: 1; }
#ll { list-style: none; margin: 0; padding: 6px; }
#ll .hd { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; color: var(--dim); letter-spacing: .03em; cursor: default; }
#ll li.r { display: grid; grid-template-columns: 32px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 7px 10px; border-radius: 10px; cursor: default; }
#ll li.r .glyph { grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 9px; font-size: 11.5px; }
#ll li.r .glyph.ask { font-size: 20px; }
#ll li.r .t { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ll li.r .d { grid-column: 2; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ll li.r .b { grid-column: 3; grid-row: 1 / span 2; }
#ll li.r.sel { background: rgba(126, 178, 240, .22); box-shadow: inset 0 0 0 1px rgba(158, 203, 255, .22); }
#ll li.r.sel .d { color: #c2d1e4; }
#ll li.askrow .t { color: var(--warm); }
.badge { font-size: 10px; font-weight: 600; letter-spacing: .07em; padding: 2px 7px; border-radius: 999px; color: var(--dim); border: 1px solid var(--hair-2); }
.badge.open { color: var(--ok); border-color: rgba(147, 226, 180, .35); }
.lempty { padding: 26px; text-align: center; color: var(--muted); font-size: 13.5px; }
.lfoot { display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--dim); flex: none; flex-wrap: wrap; }
.lfoot .sp { flex: 1; }
.lfoot button { border: 0; background: none; color: var(--ice); font-size: 12.5px; cursor: pointer; padding: 0; }
.lfoot button:hover { text-decoration: underline; }
/* app drawer */
#lg { padding: 4px 18px 20px; }
.chips { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0 10px; background: linear-gradient(180deg, rgba(18, 26, 42, .96) 70%, rgba(18, 26, 42, 0)); }
.chips button { --tc: #9aa8bb; border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent); background: color-mix(in srgb, var(--tc) 10%, transparent); color: var(--tc); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.chips button:hover { background: color-mix(in srgb, var(--tc) 20%, transparent); }
.chips button span { opacity: .6; margin-left: 4px; }
.grp h3 { display: flex; align-items: baseline; gap: 8px; margin: 14px 2px 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.grp h3 small { font-size: 11px; color: var(--dim); font-weight: 500; letter-spacing: .06em; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 4px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 6px 9px; border: 0; background: none; border-radius: 12px; cursor: default; text-align: center; position: relative; }
.tile:hover, .tile.sel { background: rgba(255, 255, 255, .07); }
.tile.sel { box-shadow: inset 0 0 0 1px rgba(158, 203, 255, .3); }
.tile .glyph { width: 46px; height: 46px; font-size: 15px; }
.tile span.n { font-size: 12px; line-height: 1.25; color: #d5deea; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile .on { position: absolute; top: 8px; right: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px rgba(147, 226, 180, .8); }

/* keys dialog */
.dlg { width: min(520px, calc(100vw - 24px)); border-radius: 16px; padding: 20px 22px; font-size: 13.5px;
  background: rgba(18, 26, 42, .86); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); border: 1px solid var(--hair-2); box-shadow: 0 40px 100px rgba(0, 0, 0, .6); animation: rise .18s var(--ease); }
.dlg h2 { margin: 0 0 4px; font-size: 17px; letter-spacing: -0.02em; }
.dlg p { color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
.dlg table { width: 100%; border-collapse: collapse; }
.dlg td { padding: 6px 0; border-top: 1px solid var(--hair); color: var(--muted); }
.dlg td:first-child { width: 44%; white-space: nowrap; }
.dlg .btn { margin-top: 14px; }
.btn { background: rgba(255, 255, 255, .06); border: 1px solid var(--hair-2); border-radius: 8px; padding: 6px 13px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--text); transition: background .15s, border-color .15s; }
.btn:hover { background: rgba(255, 255, 255, .1); border-color: var(--hair-3); }
.lnotice { padding: 8px 16px; font-size: 12.5px; color: var(--warm); background: rgba(255, 208, 161, .07); border-bottom: 1px solid var(--hair); flex: none; }
.lnotice[hidden] { display: none; }

/* no-JS fallback: a plain list of every tool */
.nojs { position: relative; z-index: 3; max-width: 760px; margin: 0 auto; padding: 56px 20px 40px; height: 100%; overflow: auto; }
.nojs h1 { font-size: 22px; margin: 0 0 6px; }
.nojs p { color: var(--muted); margin: 0 0 16px; }
.nojs ul { list-style: none; margin: 0; padding: 0; columns: 2 220px; gap: 24px; }
.nojs li { padding: 3px 0; break-inside: avoid; }
.nojs a { color: var(--ice); text-decoration: none; }
.nojs a:hover { text-decoration: underline; }

/* ================= phones ================= */
body.phone .mbi.win-menu, body.phone .clock .d, body.phone .mbi.tools span, body.phone .mbi.ask span { display: none; }
body.phone #ws { margin: 0 4px; }
body.phone .wsp { padding: 0 8px; }
body.phone .wsp .wn { display: inline; }
body.phone .wsp .wl, body.phone .wsp .wd { display: none; }
body.phone .wsp.busy:not(.on) { color: var(--text); }
body.phone #toast { bottom: 90px; }
body.phone .win { left: 0 !important; top: var(--mb) !important; width: 100% !important; height: calc(100% - var(--mb) - var(--tab, 74px)) !important;
  border-radius: 0; border-width: 0; box-shadow: none; z-index: 10 !important; }
body.phone .win:not(.front) { display: none; }
body.phone .win .rz, body.phone .win .max { display: none; }
body.phone .tb { height: 46px; }
body.phone .win.focus .tb::before { display: none; }
#dock.strip { left: 0; right: 0; bottom: 0; transform: none; max-width: none; border-radius: 0; border-width: 1px 0 0;
  gap: 2px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); overflow-x: auto; overflow-y: hidden; align-items: flex-start;
  scrollbar-width: none; background: rgba(12, 19, 31, .82); }
#dock.strip::-webkit-scrollbar { display: none; }
body.phone .dk { width: 62px; height: 58px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
body.phone .dk .glyph { width: 36px; height: 36px; border-radius: 11px; font-size: 12.5px; }
body.phone .dk .glyph.ask { font-size: 21px; }
body.phone .dk:hover { transform: none; }
body.phone .dk .tip { display: none; }
body.phone .dk .lbl { display: block; width: 100%; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
body.phone .dk.front .lbl { color: var(--ice); }
body.phone .dk .dot { bottom: auto; top: -7px; }
body.phone .dsep { margin: 6px 2px 14px; }
body.phone .brandmark { bottom: 96px; }
body.phone .empty { bottom: 74px; }
body.phone .empty h1 { margin-top: 12px; }
body.phone .overlay { padding-top: calc(var(--mb) + 8px); }
body.phone .lp { max-height: calc(100% - var(--mb) - 90px); }
body.phone .lfoot .keys { display: none; }