/* Z.E.R.O web — AI Command Center (MARK60 §11).
 * Same look as the Windows Command Center theme (gui/themes/command_*):
 * deep navy, cyan lines and glows, condensed caps titles. Everything is sized
 * in rem and the root size follows the viewport, so the page scales like the
 * Windows page does (ui_scale) and fits 1366×768 up to 4K without scrolling.
 * Animations use transform/opacity only. */

:root {
  --bg0: #020b14; --bg1: #03101a; --bg2: #061a28;
  --panel: rgba(6, 24, 39, .74); --panel2: rgba(9, 34, 54, .6);
  --line: rgba(25, 184, 255, .42); --line2: rgba(25, 184, 255, .22); --line3: rgba(25, 184, 255, .7);
  --cyan: #19b8ff; --cyan2: #3fd0ff; --accent: #19b8ff;
  --ice: #e8f6ff; --text: #c9e6f7; --dim: #7fa6bf; --faint: #46677d;
  --green: #27e08a; --red: #ff3b4f; --amber: #ffb020; --violet: #9b7bff; --teal: #1de3c4;
  --f-title: 'Rajdhani', 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', 'DejaVu Sans Condensed', 'IBM Plex Sans Arabic', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, -apple-system, 'Liberation Sans', sans-serif;
  --r: .55rem;
  --glow: 0 0 1.1rem rgba(25, 184, 255, .16);
  --safe-b: env(safe-area-inset-bottom, 0px);
  font-size: clamp(10.5px, min(.82vw, 1.46vh), 16px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* ready templates (more.js tplPick) */
.tpl-ov { position: fixed; inset: 0; z-index: 90; background: rgba(1, 6, 12, .72); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 2rem; animation: fadeIn .18s ease-out; }
.tpl-sheet { width: min(76rem, 100%); height: min(46rem, 100%); background: linear-gradient(180deg, var(--bg2), var(--bg1)); border: 1px solid var(--line2); border-radius: 1rem; box-shadow: 0 2rem 5rem rgba(0,0,0,.6); display: flex; flex-direction: column; padding: 1rem 1.2rem; gap: .7rem; }
.tpl-head { display: flex; align-items: center; gap: .7rem; }
.tpl-head b { font-size: 1.15rem; color: var(--ice); }
.tpl-q { width: 16rem; background: rgba(2, 11, 20, .7); border: 1px solid var(--line2); border-radius: .6rem; padding: .45rem .7rem; }
.tpl-cats { display: flex; gap: .35rem; flex-wrap: wrap; }
.tpl-cats button { --c: var(--cyan); border: 1px solid var(--line2); border-radius: 99px; padding: .25rem .75rem; font-size: .9rem; color: var(--text); }
.tpl-cats button b { font-size: .75rem; opacity: .7; }
.tpl-cats button.on { background: color-mix(in srgb, var(--c) 24%, transparent); border-color: var(--c); color: var(--ice); }
.tpl-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: .9rem; }
.tpl-grid { overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; align-content: start; padding-inline-end: .3rem; }
.tpl-card { display: flex; gap: .6rem; align-items: flex-start; text-align: start; border: 1px solid var(--line2); border-radius: .7rem; padding: .6rem .7rem; background: var(--panel); }
.tpl-card:hover, .tpl-card.on { border-color: var(--cyan); background: rgba(25, 184, 255, .1); }
.tpl-card b { display: block; color: var(--ice); font-size: .98rem; }
.tpl-card small { color: var(--dim); font-size: .82rem; line-height: 1.5; }
.tpl-ico { width: 2.1rem; height: 2.1rem; border-radius: .6rem; display: grid; place-items: center; background: rgba(25, 184, 255, .12); font-size: 1.15rem; flex: none; }
.tpl-detail { overflow: auto; border: 1px solid var(--line2); border-radius: .8rem; padding: .9rem 1rem; background: rgba(2, 11, 20, .5); display: flex; flex-direction: column; gap: .5rem; }
.tpl-dt { display: flex; gap: .6rem; align-items: center; }
.tpl-dt b { font-size: 1.1rem; color: var(--ice); }
.tpl-text { margin: 0; white-space: pre-wrap; line-height: 1.7; color: var(--text); background: var(--panel2); border-radius: .6rem; padding: .6rem .7rem; }
@media (max-width: 760px) { .tpl-body { grid-template-columns: 1fr; } .tpl-q { width: 9rem; } .tpl-ov { padding: .5rem; } }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse 70% 60% at 50% 38%, #08243b 0%, var(--bg1) 55%, var(--bg0) 100%) fixed;
  color: var(--text); font: 400 1rem/1.38 var(--f-body);
  -webkit-font-smoothing: antialiased; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; opacity: .5; }
svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
a { color: var(--cyan2); }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--dim); }
.grow { flex: 1; }
.mono { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--cyan2); outline-offset: 2px; }
::selection { background: rgba(25, 184, 255, .35); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(25, 184, 255, .25); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

.rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .38; }

/* ── shield logo badge ─────────────────────────────────────────────────── */
.shield {
  --s: 3rem; position: relative; display: inline-grid; place-items: center; width: var(--s); height: calc(var(--s) * 1.08); flex: none;
  clip-path: polygon(50% 0, 100% 16%, 94% 64%, 50% 100%, 6% 64%, 0 16%);
  background: linear-gradient(160deg, #6fe0ff, #0d6ea8 55%, #0a3b63);
  filter: drop-shadow(0 0 .4rem rgba(25, 184, 255, .6));
}
.shield::before { content: ""; position: absolute; inset: 2px; clip-path: inherit; background: #051a2b; }
.shield img { position: relative; width: 74%; height: auto; border-radius: 50%; margin-top: -8%; }
.shield.sm { --s: 2.1rem; }
.shield.big { --s: 5.2rem; }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 2.5rem; padding: 0 1.1rem;
  border-radius: .45rem; border: 1px solid var(--line3); color: var(--ice); background: rgba(25, 184, 255, .08);
  font: 600 1rem var(--f-title); letter-spacing: .05em; transition: background .15s, box-shadow .15s, transform .1s; white-space: nowrap;
}
.btn:hover { background: rgba(25, 184, 255, .18); box-shadow: var(--glow); }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(180deg, #1aa6ec, #0c6fb0); border-color: #6fd8ff; box-shadow: 0 0 1rem rgba(25, 184, 255, .35); }
.btn.primary:hover { background: linear-gradient(180deg, #2bb6fb, #1180c6); }
.btn.ghost { background: transparent; }
.btn.danger { border-color: rgba(255, 59, 79, .6); color: #ffb3bc; background: rgba(255, 59, 79, .08); }
.btn.xs { height: 1.9rem; padding: 0 .7rem; font-size: .92rem; }
.btn.sm { height: 2.1rem; padding: 0 .85rem; font-size: .95rem; }
.btn.wide { width: 100%; }
.icon-btn { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .45rem; color: var(--text); transition: background .15s, color .15s; }
.icon-btn:hover { background: rgba(25, 184, 255, .12); color: var(--ice); }
.icon-btn.sm { width: 1.9rem; height: 1.9rem; }
.icon-btn svg { width: 1.25rem; height: 1.25rem; }
.link { color: var(--cyan2); display: inline-flex; align-items: center; gap: .2rem; font-size: .95rem; }
.link:hover { color: var(--ice); }
.link svg { width: 1rem; height: 1rem; }
.chev-btn { display: none; }
.m-only-inline { display: none !important; }
.pill {
  display: inline-flex; align-items: center; gap: .35rem; height: 1.55rem; padding: 0 .6rem; border-radius: 1rem;
  font: 600 .82rem var(--f-title); letter-spacing: .08em; color: var(--green); border: 1px solid rgba(39, 224, 138, .55);
  background: rgba(39, 224, 138, .08); white-space: nowrap;
}
.pill i { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 .4rem currentColor; }
.pill.live i { animation: blink 1.6s ease-in-out infinite; }
.pill.off { color: var(--faint); border-color: rgba(70, 103, 125, .6); background: transparent; }
.pill.off i { animation: none; box-shadow: none; }
.pill.warn { color: var(--amber); border-color: rgba(255, 176, 32, .55); background: rgba(255, 176, 32, .08); }
.pill.bad { color: var(--red); border-color: rgba(255, 59, 79, .55); background: rgba(255, 59, 79, .08); }
.pill.cyan { color: var(--cyan2); border-color: var(--line3); background: rgba(25, 184, 255, .08); }
@keyframes blink { 50% { opacity: .35; } }
.switch { position: relative; width: 2.6rem; height: 1.45rem; border-radius: 1rem; background: rgba(70, 103, 125, .45); border: 1px solid var(--line2); transition: background .2s; flex: none; }
.switch::after { content: ""; position: absolute; top: 50%; left: .18rem; width: 1rem; height: 1rem; margin-top: -.5rem; border-radius: 50%; background: #cfe9f7; transition: transform .2s; }
.switch[aria-checked="true"] { background: rgba(25, 184, 255, .6); border-color: var(--cyan2); }
.switch[aria-checked="true"]::after { transform: translateX(1.12rem); background: #fff; }
.switch:disabled { opacity: .45; }

/* ── gate + splash ─────────────────────────────────────────────────────── */
.gate, .splash { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1.5rem; }
.gate-card { width: min(26rem, 100%); padding: 2.2rem 2rem 1.8rem; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: .9rem; box-shadow: 0 0 3rem rgba(25, 184, 255, .15), inset 0 0 2rem rgba(25, 184, 255, .06); backdrop-filter: blur(6px); }
.gate-card h1 { margin: .8rem 0 0; font: 700 2.4rem var(--f-title); letter-spacing: .35em; color: var(--ice); text-shadow: 0 0 1rem rgba(25, 184, 255, .6); padding-left: .35em; }
.gate-sub { margin: .1rem 0 1rem; font: 600 .95rem var(--f-title); letter-spacing: .3em; color: var(--cyan2); }
.gate-text { color: var(--dim); font-size: .95rem; margin: 0 0 1.2rem; }
.gate form { display: flex; flex-direction: column; gap: .8rem; text-align: start; }
.field { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; color: var(--dim); }
.field > span { font: 600 .85rem var(--f-title); letter-spacing: .08em; text-transform: uppercase; }
.field > span .lock-note { text-transform: none; letter-spacing: 0; }
.field small { color: var(--faint); font-size: .8rem; }
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), textarea, select {
  width: 100%; min-height: 2.5rem; padding: .5rem .75rem; border-radius: .45rem; border: 1px solid var(--line2);
  background: rgba(3, 16, 26, .7); color: var(--ice); outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus { border-color: var(--cyan2); box-shadow: 0 0 0 3px rgba(25, 184, 255, .15); }
textarea { resize: vertical; }
select option { background: #06192a; }
.form-error { color: #ff8595; min-height: 1.1rem; margin: 0; font-size: .88rem; }
.splash { z-index: 60; background: var(--bg1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; transition: opacity .4s; }
.splash b { font: 700 1.8rem var(--f-title); letter-spacing: .4em; color: var(--ice); padding-left: .4em; }
.splash-bar { width: 10rem; height: 2px; background: rgba(25, 184, 255, .15); overflow: hidden; position: relative; }
.splash-bar::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--cyan2); box-shadow: 0 0 .5rem var(--cyan2); animation: slide 1.1s ease-in-out infinite; }
.splash.done { opacity: 0; pointer-events: none; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ── app frame ─────────────────────────────────────────────────────────── */
.app { position: relative; z-index: 1; height: 100vh; height: 100dvh; width: 100%; display: flex; flex-direction: column; overflow: hidden; }
.app > .home, .app > .more { flex: 1 1 auto; min-height: 0; }
.topbar, .footer, .banner { flex: none; }

.topbar {
  position: relative; display: flex; align-items: center; gap: 1rem; height: 5rem; padding: 0 1.2rem;
  background: linear-gradient(180deg, rgba(4, 20, 34, .95), rgba(3, 14, 24, .75));
  border-bottom: 1px solid var(--line2);
}
.topbar::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan2), transparent); box-shadow: 0 0 .6rem var(--cyan2); }
.brand { display: flex; align-items: center; gap: .8rem; flex: none; }
.brand .shield { --s: 3.4rem; }
.brand-text b { display: block; font: 700 2.05rem/1 var(--f-title); letter-spacing: .26em; color: var(--ice); text-shadow: 0 0 .9rem rgba(25, 184, 255, .55); }
.brand-text small { display: flex; align-items: center; gap: .55rem; margin-top: .2rem; font: 600 .98rem var(--f-title); letter-spacing: .12em; color: var(--cyan2); }
.brand-text .sep { width: 1px; height: .9rem; background: var(--line); }
.brand-text .ver { color: var(--dim); letter-spacing: .04em; }
.nav { display: flex; gap: .5rem; margin-left: 1.4rem; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.nav-btn {
  display: inline-flex; align-items: center; gap: .45rem; height: 3rem; padding: 0 .85rem; border-radius: .45rem; flex: none;
  border: 1px solid var(--line2); background: rgba(8, 30, 48, .55); color: var(--text);
  font: 600 1.02rem var(--f-title); letter-spacing: .05em; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.nav-btn svg { width: 1.35rem; height: 1.35rem; }
.nav-btn:hover { border-color: var(--line); color: var(--ice); }
.nav-btn.active { color: var(--ice); border-color: #5fd4ff; background: linear-gradient(180deg, rgba(25, 150, 230, .55), rgba(10, 80, 140, .45)); box-shadow: 0 0 1.1rem rgba(25, 184, 255, .35), inset 0 0 .8rem rgba(120, 220, 255, .2); padding: 0 1.5rem; }
.state-chip {
  --c: var(--cyan2); display: inline-flex; align-items: center; gap: .7rem; height: 3rem; min-width: 10.5rem; padding: 0 1.1rem; flex: none;
  border: 1px solid color-mix(in srgb, var(--c) 65%, transparent); border-radius: .45rem; color: var(--c);
  background: color-mix(in srgb, var(--c) 9%, transparent); box-shadow: 0 0 1rem color-mix(in srgb, var(--c) 25%, transparent);
  font: 700 1.25rem var(--f-title); letter-spacing: .14em; justify-content: center; transition: color .3s, border-color .3s, background .3s;
}
.state-chip .bars { display: inline-flex; align-items: center; gap: 2px; height: 1.4rem; }
.state-chip .bars i { width: 3px; height: 100%; background: currentColor; border-radius: 2px; transform: scaleY(.3); transition: transform .12s; }
.state-chip.animate .bars i { animation: eq 1s ease-in-out infinite; }
.state-chip .bars i:nth-child(2) { animation-delay: -.2s; } .state-chip .bars i:nth-child(3) { animation-delay: -.5s; }
.state-chip .bars i:nth-child(4) { animation-delay: -.1s; } .state-chip .bars i:nth-child(5) { animation-delay: -.7s; }
.state-chip .bars i:nth-child(6) { animation-delay: -.35s; } .state-chip .bars i:nth-child(7) { animation-delay: -.6s; }
@keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
[data-act="listening"] { --c: var(--green); } [data-act="thinking"] { --c: var(--violet); } [data-act="planning"] { --c: var(--cyan2); }
[data-act="executing"] { --c: var(--amber); } [data-act="speaking"] { --c: var(--cyan2); } [data-act="sleeping"] { --c: var(--faint); }
[data-act="muted"] { --c: var(--red); } [data-act="idle"] { --c: var(--cyan); } [data-act="offline"] { --c: var(--red); }
.clock { display: flex; flex-direction: column; padding-left: 1.2rem; border-left: 1px solid var(--line2); line-height: 1.05; }
.clock b { font: 600 1.55rem var(--f-title); color: var(--ice); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock small { font: 600 1rem var(--f-title); color: var(--cyan2); letter-spacing: .04em; white-space: nowrap; }
.round-btn { position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line); color: var(--ice); background: rgba(8, 30, 48, .55); transition: box-shadow .15s, background .15s; flex: none; }
.round-btn:hover { box-shadow: var(--glow); background: rgba(25, 184, 255, .14); }
.round-btn svg { width: 1.45rem; height: 1.45rem; }
#bell-btn.off { opacity: .5; }
#bell-btn.off::after { content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; background: currentColor; transform: rotate(-35deg); border-radius: 2px; }
.notif header .switch { margin-left: .2rem; }
.bell-dot { position: absolute; top: .45rem; right: .5rem; min-width: .65rem; height: .65rem; border-radius: .4rem; background: var(--red); box-shadow: 0 0 .5rem var(--red); font: 700 .6rem/0.65rem var(--f-body); color: #fff; }
.win-btn { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; color: var(--ice); border-radius: .4rem; flex: none; }
.win-btn:hover { background: rgba(25, 184, 255, .12); }
.win-btn svg { width: 1.6rem; height: 1.6rem; }
.burger { display: none; }

.banner { display: flex; align-items: center; gap: .7rem; margin: .5rem .9rem 0; padding: .55rem .9rem; border-radius: .45rem; border: 1px solid rgba(255, 176, 32, .5); background: rgba(255, 176, 32, .08); color: #ffd98c; font-size: .95rem; }
.banner.info { border-color: var(--line); background: rgba(25, 184, 255, .08); color: var(--text); }
.spin { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: rot .8s linear infinite; flex: none; }
.banner.info .spin { display: none; }
@keyframes rot { to { transform: rotate(360deg); } }

/* ── home grid ─────────────────────────────────────────────────────────── */
.home { display: grid; grid-template-columns: 28.2rem minmax(0, 1fr) 28.2rem; gap: .9rem; padding: .75rem .9rem .6rem; min-height: 0; }
.col { display: flex; flex-direction: column; gap: .72rem; min-height: 0; min-width: 0; }
.panel {
  position: relative; display: flex; flex-direction: column; min-height: 0; padding: .7rem .85rem .75rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(8, 31, 50, .82), rgba(4, 18, 30, .84));
  box-shadow: 0 0 1.2rem rgba(25, 184, 255, .08), inset 0 0 1.4rem rgba(25, 184, 255, .05);
}
.panel::before, .panel::after { content: ""; position: absolute; width: 1.1rem; height: 1.1rem; pointer-events: none; border-color: var(--cyan2); border-style: solid; opacity: .85; }
.panel::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-top-left-radius: var(--r); }
.panel::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-bottom-right-radius: var(--r); }
.phead { display: flex; align-items: center; gap: .55rem; min-height: 2rem; margin-bottom: .45rem; }
.phead h2 { margin: 0; padding-left: .65rem; border-left: 3px solid var(--cyan2); font: 700 1.3rem/1.1 var(--f-title); letter-spacing: .04em; color: var(--ice); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phead .ph-ic { width: 1.5rem; height: 1.5rem; color: var(--cyan2); }
.phead .ph-ic + h2 { border-left: 0; padding-left: 0; }
.phead .pill { margin-left: auto; }
.phead .pill + .btn { margin-left: .2rem; }
.phead .view-all { margin-left: auto; font: 600 1.02rem var(--f-title); letter-spacing: .03em; white-space: nowrap; flex: none; }
.phead .an-set { margin-left: auto; color: var(--cyan2); flex: none; }
.phead .an-set:hover { color: var(--ice); background: rgba(25, 184, 255, .14); }
.phead .an-set + .view-all { margin-left: 0; }
.phead h2 { flex: 0 1 auto; min-width: 0; }
.empty-note { margin: auto 0; padding: .6rem .2rem; color: var(--faint); font-size: .9rem; text-align: center; }
.empty-note b { color: var(--dim); }

.p-overview { flex: 0 0 9.3rem; }
.p-tasks { flex: 0 0 17.2rem; }
.p-thinking { flex: 0 0 12.9rem; }
.p-routines { flex: 1 1 12rem; }
/* Communications gave height to the templates card (more saved reports at once; it scrolls for the rest) */
.p-comms { flex: 1.4 1 0; min-height: 14rem; }
.p-reports { flex: 0 0 9.1rem; }
.p-templates { flex: 1 1 0; min-height: 13.2rem; }

/* overview */
.gauges { display: grid; grid-template-columns: repeat(3, 5.6rem) 1fr; gap: .4rem; align-items: center; flex: 1; }
.gauge { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.gauge svg { width: 4.6rem; height: 4.6rem; transform: rotate(-90deg); stroke-width: 5; }
.gauge .g-bg { stroke: rgba(25, 184, 255, .12); }
.gauge .g-fg { --c: var(--cyan2); stroke: var(--c); stroke-dasharray: 163.4; stroke-dashoffset: 163.4; transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1), stroke .4s; filter: drop-shadow(0 0 3px var(--c)); }
.gauge b { position: absolute; top: 1.35rem; width: 100%; text-align: center; font: 700 1.45rem/1 var(--f-title); color: var(--ice); }
.gauge b small { font-size: .8rem; margin-left: 1px; }
.gauge em { font: 600 .9rem var(--f-title); font-style: normal; letter-spacing: .06em; color: var(--text); }
.net { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 0; }
.net b { font: 700 1.5rem var(--f-title); color: var(--cyan2); white-space: nowrap; }
.net svg { width: 100%; height: 2.2rem; stroke: none; }
.net-line { fill: none; stroke: var(--cyan2); stroke-width: 1.4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px var(--cyan)); }
.net-fill { fill: rgba(25, 184, 255, .16); }
.net em { font: 600 .9rem var(--f-title); font-style: normal; letter-spacing: .06em; }

/* tasks */
.rows { display: flex; flex-direction: column; overflow: auto; min-height: 0; flex: 1; }
.trow { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto auto; align-items: center; gap: .7rem; padding: .42rem 0; border-top: 1px solid rgba(25, 184, 255, .12); cursor: pointer; }
.trow:first-child { border-top: 0; }
.trow:hover .t-title { color: #fff; }
.ibox { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .4rem; border: 1px solid var(--line2); background: rgba(25, 184, 255, .07); color: var(--cyan2); }
.ibox svg { width: 1.35rem; height: 1.35rem; }
.t-title { display: block; color: var(--ice); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-sub { display: block; color: var(--dim); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-age { color: var(--text); font-size: .88rem; white-space: nowrap; }
.t-age.run { color: var(--cyan2); }
.t-age.bad { color: var(--red); }
.exec { height: 2.1rem; padding: 0 .95rem; border-radius: .35rem; border: 1px solid var(--line3); color: var(--cyan2); font: 700 .98rem var(--f-title); letter-spacing: .06em; background: rgba(25, 184, 255, .06); transition: background .15s, box-shadow .15s; }
.exec:hover { background: rgba(25, 184, 255, .2); box-shadow: var(--glow); color: #fff; }
.exec.busy { color: var(--amber); border-color: rgba(255, 176, 32, .6); }

/* thinking */
.think-wave { width: 100%; height: 1.9rem; display: block; margin: -.15rem 0 .2rem; }
.steps { display: flex; flex-direction: column; overflow: auto; min-height: 0; flex: 1; }
.step { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto 2.6rem; gap: .55rem; align-items: center; padding: .2rem 0; font-size: .93rem; }
.step .ck { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 1.5px solid var(--dim); }
.step.done .ck { background: var(--green); border-color: var(--green); color: #032014; box-shadow: 0 0 .5rem rgba(39, 224, 138, .5); }
.step.done .ck svg { width: .85rem; height: .85rem; stroke-width: 3; }
.step.live .ck { border-color: var(--cyan2); border-top-color: transparent; animation: rot .9s linear infinite; }
.step .s-text { color: var(--ice); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step .s-state { color: var(--green); font-size: .88rem; }
.step.live .s-state { color: var(--cyan2); }
.step .s-secs { color: var(--text); text-align: right; font-size: .88rem; font-variant-numeric: tabular-nums; }

/* schedule timeline */
.timeline { position: relative; display: flex; flex-direction: column; overflow: auto; min-height: 0; flex: 1; padding-left: 1.4rem; }
.timeline::before { content: ""; position: absolute; left: .47rem; top: .9rem; bottom: .9rem; width: 1px; background: linear-gradient(var(--line3), var(--line2)); }
.sch { position: relative; display: grid; grid-template-columns: 4.8rem 2.4rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .38rem 0; border-top: 1px solid rgba(25, 184, 255, .1); cursor: pointer; }
.sch:first-child { border-top: 0; }
.sch::before { content: ""; position: absolute; left: -1.25rem; top: 50%; width: .65rem; height: .65rem; margin-top: -.33rem; border-radius: 50%; border: 1.5px solid var(--cyan2); background: var(--bg1); }
.sch.now::before, .sch.done::before { background: var(--cyan2); box-shadow: 0 0 .6rem var(--cyan2); }
.sch .tm { text-align: center; padding: .25rem 0; border: 1px solid var(--line2); border-radius: .35rem; font: 600 .9rem var(--f-title); color: var(--ice); background: rgba(25, 184, 255, .06); white-space: nowrap; }
.sch.now .tm { border-color: var(--cyan2); box-shadow: 0 0 .6rem rgba(25, 184, 255, .35); }
.sch .ibox { width: 2.3rem; height: 2.3rem; }
.sch .st { display: grid; place-items: center; }
.sch .st .ring { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1.5px solid var(--dim); }
.sch .st .okc { width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 1.5px solid var(--green); color: var(--green); display: grid; place-items: center; }
.sch .st .okc svg { width: .9rem; height: .9rem; stroke-width: 2.6; }
.sch .st .nowp { padding: .15rem .6rem; border-radius: .3rem; border: 1px solid var(--cyan2); color: var(--ice); font: 600 .85rem var(--f-title); background: rgba(25, 184, 255, .2); }

/* ── stage ─────────────────────────────────────────────────────────────── */
.col-center { gap: .6rem; }
.stage {
  --c: var(--cyan2); --lvl: 0; position: relative; flex: 1 1 auto; min-height: 16rem; overflow: hidden;
  border: 1px solid var(--line2); border-radius: var(--r);
  background: radial-gradient(ellipse 55% 60% at 50% 42%, rgba(18, 90, 150, .32), rgba(4, 20, 34, .1) 70%), linear-gradient(180deg, rgba(4, 18, 30, .55), rgba(3, 14, 24, .75));
  contain: layout paint;
}
.stage-bg { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(25, 184, 255, .025) 0 1px, transparent 1px 4px); pointer-events: none; }
.floor { position: absolute; left: -20%; right: -20%; bottom: -8%; height: 34%; transform: perspective(24rem) rotateX(68deg); transform-origin: 50% 100%;
  background-image: linear-gradient(rgba(25, 184, 255, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(25, 184, 255, .35) 1px, transparent 1px);
  background-size: 3rem 3rem; mask-image: radial-gradient(ellipse 50% 80% at 50% 100%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 50% 80% at 50% 100%, #000 20%, transparent 75%); opacity: .55; pointer-events: none; }
.rings { position: absolute; left: 50%; top: 44%; width: min(88%, 118vh); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; transition: transform .08s linear; will-change: transform; }
.rings .r { position: absolute; border-radius: 50%; border: 1px solid var(--c); will-change: transform; transition: border-color .4s; }
.rings .r1 { inset: 2.5%; opacity: .25; border-style: dotted; animation: rot 90s linear infinite; }
.rings .r2 { inset: 10%; opacity: .38; border-style: dashed; border-width: 1.5px; animation: rot 60s linear infinite reverse; }
.rings .r3 { inset: 18%; opacity: .5; border-width: 2px; border-color: var(--c) transparent var(--c) transparent; animation: rot 40s linear infinite; }
.rings .r4 { inset: 26%; opacity: .2; border-style: dotted; animation: rot 120s linear infinite reverse; }
.ring-glow { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, transparent), transparent 65%); opacity: .35; transition: opacity .1s; }
.stage[data-who="user"] { --c: var(--teal); }
.stage[data-who="zero"] { --c: #8fd8ff; }
.stage[data-act="thinking"] { --c: var(--violet); }
.stage[data-act="planning"] { --c: var(--cyan2); }
.stage[data-act="executing"] { --c: var(--amber); }
.stage[data-act="sleeping"] { --c: var(--faint); }
.avatar { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.fcard {
  position: absolute; width: 19%; max-width: 15rem; min-width: 9.5rem; aspect-ratio: 1.62; padding: .6rem .75rem; border-radius: .4rem;
  border: 1px solid rgba(90, 200, 255, .55); background: linear-gradient(160deg, rgba(20, 80, 125, .28), rgba(5, 30, 50, .3));
  box-shadow: 0 0 1.2rem rgba(25, 184, 255, .18), inset 0 0 1rem rgba(25, 184, 255, .12);
  color: var(--ice); opacity: .62; transition: opacity .4s, box-shadow .4s, border-color .4s, transform .5s cubic-bezier(.2, .8, .2, 1);
  display: flex; flex-direction: column; pointer-events: none; will-change: transform;
}
.fcard b { font: 600 1.18rem var(--f-title); letter-spacing: .12em; }
.fcard .fc-body { flex: 1; display: flex; align-items: flex-end; gap: .6rem; min-height: 0; }
.fcard .fc-detail { font-size: .75rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1em; }
.f-analyze { left: 3.5%; top: 7%; transform: perspective(40rem) rotateY(22deg) rotateZ(4deg); }
.f-processing { left: 3%; top: 35%; transform: perspective(40rem) rotateY(20deg) rotateZ(2deg); }
.f-strategize { right: 3.5%; top: 6%; transform: perspective(40rem) rotateY(-22deg) rotateZ(-4deg); }
.f-generate { right: 3%; top: 35%; transform: perspective(40rem) rotateY(-20deg) rotateZ(-2deg); }
.fcard.on { opacity: 1; border-color: #9be6ff; box-shadow: 0 0 2rem rgba(25, 184, 255, .45), inset 0 0 1.4rem rgba(90, 210, 255, .25); }
.f-analyze.on { transform: perspective(40rem) rotateY(18deg) rotateZ(4deg) scale(1.05); }
.f-processing.on { transform: perspective(40rem) rotateY(16deg) rotateZ(2deg) scale(1.05); }
.f-strategize.on { transform: perspective(40rem) rotateY(-18deg) rotateZ(-4deg) scale(1.05); }
.f-generate.on { transform: perspective(40rem) rotateY(-16deg) rotateZ(-2deg) scale(1.05); }
.fc-lines { flex: 1; display: flex; flex-direction: column; gap: .32rem; padding-bottom: .15rem; }
.fc-lines i { display: block; height: 2px; background: rgba(160, 225, 255, .75); border-radius: 2px; transform-origin: left; }
.fc-lines i:nth-child(1) { width: 85%; } .fc-lines i:nth-child(2) { width: 62%; } .fc-lines i:nth-child(3) { width: 74%; } .fc-lines i:nth-child(4) { width: 48%; }
.fc-bars { display: flex; align-items: flex-end; gap: 4px; height: 70%; }
.fc-bars i { width: .55rem; background: linear-gradient(0deg, #1a8fd6, #7fe0ff); border-radius: 1px; transform-origin: bottom; box-shadow: 0 0 .4rem rgba(25, 184, 255, .6); }
.fc-bars i:nth-child(1) { height: 30%; } .fc-bars i:nth-child(2) { height: 48%; } .fc-bars i:nth-child(3) { height: 40%; } .fc-bars i:nth-child(4) { height: 72%; } .fc-bars i:nth-child(5) { height: 95%; }
.f-analyze.on .fc-bars i { animation: grow 1.2s ease-in-out infinite alternate; }
.f-analyze.on .fc-bars i:nth-child(2n) { animation-delay: -.6s; }
@keyframes grow { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.fc-donut { width: 3.4rem; height: 3.4rem; stroke-width: 6; transform: rotate(-90deg); }
.fc-donut circle { stroke: rgba(25, 184, 255, .18); fill: none; }
.fc-donut .d-fg { stroke: #6fdcff; stroke-dasharray: 60 88; filter: drop-shadow(0 0 3px #19b8ff); }
.f-processing.on .fc-donut { animation: rot 1.4s linear infinite; }
.fc-map { width: 100%; height: 100%; stroke: rgba(120, 210, 255, .55); stroke-width: 1; }
.fc-map .dots circle { fill: #8fe3ff; stroke: none; }
.f-strategize.on .fc-map .dots circle { animation: blink 1.2s ease-in-out infinite; }
.f-strategize.on .fc-map .dots circle:nth-child(2n) { animation-delay: -.6s; }
.fc-doc { width: 2.6rem; height: 2.6rem; color: #8fe3ff; stroke-width: 1.4; }
.f-generate.on .write i { animation: write 1.6s ease-in-out infinite; }
.f-generate.on .write i:nth-child(2) { animation-delay: .25s; } .f-generate.on .write i:nth-child(3) { animation-delay: .5s; } .f-generate.on .write i:nth-child(4) { animation-delay: .75s; }
@keyframes write { 0% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); } }

.cap { position: absolute; bottom: 8%; pointer-events: none; font-family: var(--f-title); }
.cap-left { left: 4%; }
.cap-left b { display: block; font: 700 2.1rem/1 var(--f-title); letter-spacing: .14em; color: var(--cyan2); text-shadow: 0 0 1rem rgba(25, 184, 255, .7); }
.cap-left small { display: block; margin: .3rem 0 .7rem; font: 600 1.05rem var(--f-title); letter-spacing: .08em; color: var(--cyan2); }
.cap ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .32rem; font: 600 .98rem var(--f-title); letter-spacing: .1em; color: #6fcff7; }
.cap-left ul { padding-left: .9rem; border-left: 1px solid var(--line2); }
.cap-right { right: 4%; text-align: right; bottom: 11%; }
.cap-right ul { gap: .72rem; }
.stage-tools { position: absolute; top: .6rem; left: 50%; transform: translateX(-50%); display: flex; gap: .45rem; opacity: 1; z-index: 6; pointer-events: auto; }
.tool { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line3); background: rgba(3, 16, 26, .88); color: var(--ice); box-shadow: 0 0 .6rem rgba(0, 0, 0, .35); }
.tool:hover { box-shadow: var(--glow); color: var(--cyan2); }
.tool:disabled { opacity: .45; }
.tool.on { border-color: var(--cyan2); color: var(--cyan2); background: rgba(25, 184, 255, .16); }
.tool svg { width: 1.15rem; height: 1.15rem; }
/* no camera on the device: dimmed, with a slash across the icon */
.tool.nocam { position: relative; opacity: .5; color: var(--muted, #7f98a8); border-style: dashed; cursor: not-allowed; }
.tool.nocam::after { content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; border-radius: 2px; background: #ff7a8a; transform: rotate(-45deg); box-shadow: 0 0 0 1.5px rgba(3, 16, 26, .9); }
.tool.nocam:hover { box-shadow: none; color: var(--muted, #7f98a8); }
.cam { position: absolute; right: 1rem; bottom: 1rem; width: 32%; max-width: 20rem; aspect-ratio: 4 / 3; border-radius: .5rem; overflow: hidden; border: 1px solid var(--cyan2); box-shadow: 0 0 1.4rem rgba(25, 184, 255, .4); background: #000; z-index: 4; }
.cam video { width: 100%; height: 100%; object-fit: cover; }
.cam video.mirror { transform: scaleX(-1); }
.cam.snap { animation: snap .35s; }
@keyframes snap { 50% { filter: brightness(2.2); } }
.cam-badge { position: absolute; left: .5rem; top: .5rem; display: flex; align-items: center; gap: .35rem; padding: .15rem .5rem; border-radius: 1rem; background: rgba(0, 0, 0, .55); font: 600 .75rem var(--f-title); letter-spacing: .1em; color: #ff8a95; }
.cam-badge i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--red); animation: blink 1s infinite; }
.cam-tools { position: absolute; right: .4rem; top: .4rem; display: flex; gap: .3rem; }

/* state tabs */
.state-tabs { flex: 0 0 3.7rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.stab {
  --c: var(--cyan2); display: flex; align-items: center; justify-content: center; gap: .8rem; border-radius: .45rem; border: 1px solid var(--line2);
  background: rgba(6, 24, 39, .7); color: var(--text); font: 600 1.3rem var(--f-title); letter-spacing: .1em; transition: all .3s;
}
.stab svg { width: 1.75rem; height: 1.75rem; padding: .25rem; border-radius: 50%; border: 1px solid currentColor; }
.stab.on { color: var(--ice); border-color: color-mix(in srgb, var(--c) 85%, #fff); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, transparent), rgba(6, 24, 39, .6)); box-shadow: 0 0 1.2rem color-mix(in srgb, var(--c) 40%, transparent), inset 0 0 1rem color-mix(in srgb, var(--c) 20%, transparent); }
.stab.on svg { color: var(--c); filter: drop-shadow(0 0 4px var(--c)); }
.stab[data-tab="listening"] { --c: var(--cyan2); } .stab[data-tab="thinking"] { --c: var(--violet); }
.stab[data-tab="planning"] { --c: var(--cyan2); } .stab[data-tab="executing"] { --c: var(--amber); }

/* transcripts + input */
.talk { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.tbox { position: relative; display: flex; flex-direction: column; gap: .4rem; min-width: 0; height: auto; min-height: 9.9rem; max-height: 17.5rem; padding: .55rem .8rem .6rem; border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(8, 31, 50, .82), rgba(4, 18, 30, .84)); }
.tbox header { display: flex; align-items: center; gap: .6rem; min-height: 1.9rem; }
.tbox header b { font: 700 1.35rem var(--f-title); letter-spacing: .12em; color: var(--ice); }
.t-ic { width: 1.6rem; height: 1.6rem; color: var(--cyan2); }
.t-logo { width: 1.7rem; height: 1.7rem; border-radius: 50%; box-shadow: 0 0 .5rem rgba(25, 184, 255, .6); }
.tbox .spk { height: 1.4rem; font-size: .72rem; }
.tbox:not(.on) .spk { color: var(--faint); border-color: rgba(70, 103, 125, .5); background: transparent; }
.tbox:not(.on) .spk i { box-shadow: none; }
.t-wave { flex: 1; min-width: 2rem; height: 1.9rem; }
.t-text { flex: 1; min-height: 4.6rem; max-height: 9.6rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; transition: max-height .2s; padding: .35rem .6rem; border-radius: .35rem; border: 1px solid var(--line2); background: rgba(3, 16, 26, .5); color: var(--ice); font-size: 1.22rem; line-height: 1.3; unicode-bidi: plaintext; }
.t-ph { color: var(--faint); font-size: .95rem; }
.t-chips { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.chip { flex: none; height: 1.75rem; padding: 0 .75rem; border-radius: .3rem; border: 1px solid var(--line2); color: var(--cyan2); font-size: .85rem; background: rgba(25, 184, 255, .05); max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.7rem; }
.chip.ghost { flex: 1; color: var(--text); max-width: none; }
.chip.ghost:empty { visibility: hidden; }
button.chip:hover { background: rgba(25, 184, 255, .16); }
.t-mini { width: 3rem; height: 1.5rem; margin-left: auto; }
.attach-tray { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; }
.att { position: relative; display: inline-flex; align-items: center; gap: .4rem; max-width: 16rem; height: 2rem; padding: 0 .5rem; border-radius: .35rem; border: 1px solid var(--line2); background: rgba(6, 24, 39, .9); font-size: .85rem; overflow: hidden; }
.att span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att small { color: var(--dim); }
.att i { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--cyan2); transition: width .2s; }
.att button { display: grid; place-items: center; }
.att svg { width: 1rem; height: 1rem; }
.inputrow { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; min-height: 3.3rem; padding: .3rem .4rem .3rem .45rem; border-radius: var(--r); border: 1px solid var(--line); background: rgba(4, 18, 30, .88); }
.mic-btn { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #43f0a4, #14a866); color: #032014; box-shadow: 0 0 1rem rgba(39, 224, 138, .45); flex: none; transition: transform .1s, box-shadow .2s; }
.mic-btn svg { width: 1.35rem; height: 1.35rem; stroke-width: 2; }
.mic-btn:active { transform: scale(.94); }
.mic-btn.live { background: radial-gradient(circle at 40% 35%, #ff7b8a, #d42a3d); color: #fff; box-shadow: 0 0 0 calc(var(--mic, 0) * .8rem) rgba(255, 59, 79, .25), 0 0 1.2rem rgba(255, 59, 79, .55); }
.mic-btn.muted { box-shadow: 0 0 1rem rgba(255, 59, 79, .35); }
.mic-btn.live svg { width: 1.1rem; height: 1.1rem; }
.mic-btn:not(.live) { animation: mic-invite 2.8s ease-in-out infinite; }
@keyframes mic-invite { 0%, 100% { box-shadow: 0 0 1rem rgba(39, 224, 138, .45); } 50% { box-shadow: 0 0 0 .35rem rgba(39, 224, 138, .12), 0 0 1.3rem rgba(39, 224, 138, .6); } }
/* the microphone while the live conversation runs: on (cyan, moves with your voice) / muted (amber) */
.mute-btn { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; flex: none;
  border: 1.5px solid rgba(25, 184, 255, .7); background: rgba(25, 184, 255, .12); color: #7fdcff;
  box-shadow: 0 0 0 calc(var(--mic, 0) * .6rem) rgba(25, 184, 255, .18); transition: transform .1s, background .2s, box-shadow .15s; }
.mute-btn svg { width: 1.3rem; height: 1.3rem; stroke-width: 2; }
.mute-btn:active { transform: scale(.94); }
.mute-btn:hover { background: rgba(25, 184, 255, .22); }
.mute-btn.muted { border-color: #ffb547; background: radial-gradient(circle at 40% 35%, #ffd27a, #e8930f); color: #2a1700; box-shadow: 0 0 1rem rgba(255, 181, 71, .45); }
.mute-btn[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .mic-btn:not(.live) { animation: none; } }
.inputrow textarea { flex: 1; min-height: 2.4rem; max-height: 8rem; padding: .5rem .2rem; border: 0; background: transparent; box-shadow: none !important; resize: none; font-size: 1.05rem; line-height: 1.4; }
.inputrow textarea::placeholder { color: var(--dim); }
.kbd-hint { color: var(--faint); font-size: .82rem; white-space: nowrap; padding-right: .4rem; border-right: 1px solid var(--line2); }
.send-btn { display: grid; place-items: center; width: 3rem; height: 2.6rem; border-radius: .4rem; border: 1px solid #6fd8ff; background: linear-gradient(180deg, rgba(25, 170, 240, .5), rgba(12, 100, 170, .5)); color: #eaf8ff; box-shadow: 0 0 .9rem rgba(25, 184, 255, .35); }
.send-btn svg { width: 1.35rem; height: 1.35rem; }
.send-btn:disabled { opacity: .45; box-shadow: none; }

/* ── communications ────────────────────────────────────────────────────── */
.messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: .2rem; display: flex; flex-direction: column; }
.comms-empty { margin: auto; text-align: center; color: var(--faint); font-size: .92rem; padding: 1rem; }
.comms-empty .shield { margin-bottom: .6rem; opacity: .8; }
.mg { display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); gap: .1rem .6rem; padding-top: .7rem; }
.mg.cont { padding-top: .35rem; }
.mg .av { grid-row: span 2; width: 2.7rem; height: 2.7rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: radial-gradient(circle at 40% 35%, #1b4e74, #0a2238); color: var(--ice); font: 700 1.05rem var(--f-title); overflow: hidden; }
.mg.zero .av { border: 0; background: none; }
.mg.zero .av .shield { --s: 2.4rem; }
.mg.cont .av { visibility: hidden; height: 0; }
.mg .who { display: flex; align-items: baseline; gap: .6rem; font: 700 1.12rem var(--f-title); color: var(--ice); letter-spacing: .04em; }
.mg.zero .who { color: var(--cyan2); letter-spacing: .1em; }
.mg .who time { font: 500 .85rem var(--f-body); color: var(--dim); letter-spacing: 0; }
.mg.cont .who { display: none; }
.bubble { grid-column: 2; padding: .5rem .75rem; border-radius: .35rem; border: 1px solid var(--line2); background: rgba(9, 34, 54, .55); color: var(--text); font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: start; }
.mg.you .bubble { background: rgba(12, 44, 70, .6); }
.mg.sys .bubble { border-style: dashed; color: var(--dim); font-size: .86rem; }
.bubble p { margin: 0 0 .45rem; } .bubble p:last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { margin: .2rem 0 .45rem; padding-inline-start: 1.3rem; }
.bubble li { margin: .12rem 0; }
.bubble li::marker { color: var(--cyan2); }
.bubble code { font-family: ui-monospace, monospace; font-size: .88em; padding: 0 .25rem; border-radius: .2rem; background: rgba(25, 184, 255, .1); }
.bubble.live { border-color: rgba(25, 184, 255, .55); }
.bubble.live::after { content: "▍"; color: var(--cyan2); animation: blink .9s infinite; margin-left: .15rem; }
.fcardm { grid-column: 2; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .65rem; align-items: center; margin-top: .45rem; padding: .5rem .6rem; border-radius: .4rem; border: 1px solid var(--line2); background: rgba(3, 16, 26, .7); }
.fic { position: relative; display: grid; place-items: center; width: 2.4rem; height: 2.8rem; color: var(--fc, var(--cyan2)); }
.fic svg { width: 2.4rem; height: 2.8rem; stroke-width: 1.3; }
.fic b { position: absolute; bottom: .45rem; left: 0; right: 0; text-align: center; font: 700 .58rem var(--f-body); letter-spacing: .02em; background: var(--fc, var(--cyan2)); color: #fff; border-radius: .15rem; margin: 0 .25rem; line-height: 1.2; text-transform: uppercase; }
.fic img { width: 2.6rem; height: 2.6rem; object-fit: cover; border-radius: .3rem; border: 1px solid var(--line2); }
.fmeta { min-width: 0; }
.fmeta b { display: block; color: var(--ice); font-weight: 500; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fmeta small { display: block; color: var(--dim); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fmeta small em { font-style: normal; color: var(--green); }
.facts { display: flex; gap: .35rem; }
.facts a, .facts button { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .35rem; border: 1px solid var(--line3); color: var(--cyan2); background: rgba(25, 184, 255, .06); }
.facts a:hover, .facts button:hover { background: rgba(25, 184, 255, .2); color: #fff; }
.facts svg { width: 1.15rem; height: 1.15rem; }
.jump { position: absolute; right: 1.2rem; bottom: 1rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: rgba(8, 31, 50, .95); border: 1px solid var(--line3); color: var(--ice); }
.typing { display: flex; align-items: center; gap: .5rem; padding-top: .45rem; color: var(--dim); font-size: .85rem; }
.typing span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: .38rem; height: .38rem; border-radius: 50%; background: var(--cyan2); animation: bounce 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* reports tiles + templates */
.tiles { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; min-height: 0; align-items: stretch; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .28rem; border-radius: .4rem; border: 1px solid var(--line2); background: rgba(9, 34, 54, .5); color: var(--ice); font-size: .78rem; text-align: center; padding: .28rem .12rem; transition: background .15s, box-shadow .15s, border-color .15s; line-height: 1.15; min-width: 0; }
.tile span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%; }
.tile svg { width: 1.7rem; height: 1.7rem; color: var(--cyan2); stroke-width: 1.5; filter: drop-shadow(0 0 3px rgba(25, 184, 255, .6)); }
.tile:hover { border-color: var(--cyan2); box-shadow: var(--glow); background: rgba(25, 184, 255, .12); }
.tpl-list { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; display: flex; flex-direction: column; gap: .3rem; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(25, 184, 255, .35) transparent; padding-right: .2rem; }
.tpl { display: flex; align-items: center; gap: .8rem; min-height: 2.3rem; flex: none; padding: 0 .8rem; border-radius: .35rem; border: 1px solid rgba(25, 184, 255, .14); background: rgba(9, 34, 54, .35); color: var(--ice); text-align: start; font-size: .98rem; }
.tpl svg { width: 1.4rem; height: 1.4rem; color: var(--cyan2); }
.tpl span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; }
.tpl-tabs { display: flex; gap: .3rem; flex: none; margin-bottom: .2rem; position: sticky; top: 0; z-index: 1; padding-bottom: .25rem; background: rgba(5, 21, 34, .97); }
.tpl-tabs button { flex: 1; min-height: 1.9rem; border-radius: .35rem; border: 1px solid rgba(25, 184, 255, .14); background: transparent; color: var(--ice); font-size: .85rem; letter-spacing: .04em; }
.tpl-tabs button.on { background: rgba(25, 184, 255, .16); border-color: var(--line3); color: #fff; }
.tpl:hover { border-color: var(--line3); background: rgba(25, 184, 255, .12); }

/* ── footer ────────────────────────────────────────────────────────────── */
.footer { position: relative; display: flex; align-items: center; gap: 1.1rem; height: 4.3rem; padding: 0 1.2rem; background: linear-gradient(0deg, rgba(4, 20, 34, .95), rgba(3, 14, 24, .75)); border-top: 1px solid var(--line2); }
.f-brand { display: flex; align-items: center; gap: .6rem; padding-right: 1rem; border-right: 1px solid var(--line2); }
.f-brand .shield { --s: 2.5rem; }
.f-brand b { display: block; font: 700 1.2rem/1 var(--f-title); letter-spacing: .25em; color: var(--ice); }
.f-brand small { font: 600 .8rem var(--f-title); letter-spacing: .08em; color: var(--cyan2); }
.f-stat { display: flex; align-items: center; gap: .55rem; padding-right: 1rem; border-right: 1px solid var(--line2); }
.f-stat svg { width: 1.6rem; height: 1.6rem; color: var(--cyan2); }
.f-stat small { display: block; font: 600 .82rem/1.1 var(--f-title); letter-spacing: .06em; color: var(--text); }
.f-stat b { font: 600 .98rem/1.1 var(--f-title); color: var(--faint); }
.f-stat.ok b { color: var(--green); } .f-stat.bad b { color: var(--red); } .f-stat.warn b { color: var(--amber); }
.f-grow { flex: 1; }
.talk-pill {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .9rem; height: 3.5rem; padding: 0 1.2rem; border-radius: 2rem;
  border: 1px solid #5fd4ff; background: linear-gradient(180deg, rgba(20, 90, 150, .5), rgba(6, 30, 52, .7)); color: var(--ice);
  box-shadow: 0 0 1.4rem rgba(25, 184, 255, .35), inset 0 0 1rem rgba(90, 210, 255, .2); user-select: none; -webkit-user-select: none; touch-action: none; min-width: 30rem; justify-content: center;
}
.talk-pill .tp-mic { width: 1.8rem; height: 1.8rem; }
.talk-pill b { display: block; font: 700 1.35rem/1 var(--f-title); letter-spacing: .08em; }
.talk-pill b em { font-style: normal; }
.talk-pill small { display: block; font-size: .82rem; color: var(--text); text-align: center; }
.talk-pill canvas { width: 5rem; height: 2rem; }
.talk-pill.held { border-color: var(--green); box-shadow: 0 0 2rem rgba(39, 224, 138, .5); background: linear-gradient(180deg, rgba(20, 130, 90, .5), rgba(6, 40, 30, .7)); }
.f-signal { display: flex; align-items: center; gap: .55rem; font: 600 .98rem var(--f-title); color: var(--ice); }
.sbars { display: inline-flex; align-items: flex-end; gap: 2px; height: 1.3rem; }
.sbars i { width: 4px; background: rgba(127, 166, 191, .35); border-radius: 1px; }
.sbars i:nth-child(1) { height: 30%; } .sbars i:nth-child(2) { height: 55%; } .sbars i:nth-child(3) { height: 78%; } .sbars i:nth-child(4) { height: 100%; }
.sbars[data-n="1"] i:nth-child(-n+1), .sbars[data-n="2"] i:nth-child(-n+2), .sbars[data-n="3"] i:nth-child(-n+3), .sbars[data-n="4"] i { background: var(--green); box-shadow: 0 0 .3rem rgba(39, 224, 138, .6); }
.f-ver { font: 600 .9rem var(--f-title); color: var(--dim); letter-spacing: .05em; }
.ptt-lock[aria-pressed="true"] { color: var(--green); }

/* ── popovers, drawer, dialogs, toasts ─────────────────────────────────── */
.pop { position: fixed; z-index: 40; min-width: 17rem; max-width: min(24rem, calc(100vw - 1.5rem)); max-height: min(34rem, calc(100vh - 6rem)); overflow: auto; padding: .45rem; border-radius: .6rem; border: 1px solid var(--line); background: rgba(5, 20, 33, .97); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .55), 0 0 1.4rem rgba(25, 184, 255, .15); backdrop-filter: blur(10px); animation: pop .14s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
.pop .mi { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 2.45rem; padding: 0 .7rem; border-radius: .4rem; color: var(--text); text-align: start; font-size: .98rem; }
.pop .mi:hover { background: rgba(25, 184, 255, .12); color: var(--ice); }
.pop .mi svg { width: 1.2rem; height: 1.2rem; color: var(--cyan2); }
.pop .mi .grow + * { margin-left: auto; }
.pop .mi.locked { opacity: .55; }
.pop .mi .lk { width: 1rem; height: 1rem; color: var(--amber); }
.pop .mi.danger { color: #ff9aa6; }
.pop .mi.danger svg { color: #ff6b7c; }
.pop .sep { height: 1px; margin: .35rem .3rem; background: var(--line2); }
.pop .ghead { padding: .35rem .7rem .15rem; font: 600 .78rem var(--f-title); letter-spacing: .14em; color: var(--faint); }
.notif { width: 24rem; padding: 0; }
.notif header { position: sticky; top: 0; display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line2); background: rgba(5, 20, 33, .98); }
.notif header b { font: 700 1.1rem var(--f-title); letter-spacing: .06em; color: var(--ice); }
.notif header .link, .notif header .muted { white-space: nowrap; font-size: .85rem; }
.notif-list { padding: .3rem; }
.nitem { display: grid; grid-template-columns: .55rem minmax(0, 1fr) auto; gap: .6rem; align-items: start; padding: .55rem .6rem; border-radius: .4rem; cursor: default; }
.nitem:hover { background: rgba(25, 184, 255, .07); }
.nitem > i { width: .55rem; height: .55rem; margin-top: .45rem; border-radius: 50%; background: var(--cyan2); }
.nitem.read > i { background: transparent; border: 1px solid var(--faint); }
.nitem.success > i { background: var(--green); } .nitem.warning > i { background: var(--amber); } .nitem.error > i { background: var(--red); }
.nitem b { display: block; color: var(--ice); font-weight: 500; font-size: .93rem; unicode-bidi: plaintext; }
.nitem p { margin: .1rem 0 0; color: var(--dim); font-size: .85rem; unicode-bidi: plaintext; white-space: pre-wrap; }
.nitem time { color: var(--faint); font-size: .78rem; white-space: nowrap; }
.notif .empty-note { padding: 2rem 1rem; }

.drawer { position: fixed; z-index: 45; top: 0; right: 0; bottom: 0; width: min(34rem, 100vw); display: flex; flex-direction: column; border-left: 1px solid var(--line); background: rgba(4, 17, 29, .98); box-shadow: -1rem 0 3rem rgba(0, 0, 0, .5); animation: drawer .2s ease-out; }
@keyframes drawer { from { transform: translateX(2rem); opacity: 0; } }
.drawer-head { display: flex; align-items: center; gap: .6rem; height: 4rem; padding: 0 .8rem; border-bottom: 1px solid var(--line2); }
.drawer-head h2 { flex: 1; margin: 0; font: 700 1.35rem var(--f-title); letter-spacing: .08em; color: var(--ice); }
.drawer-body { flex: 1; overflow: auto; padding: 1rem 1.1rem 2rem; display: flex; flex-direction: column; gap: .9rem; }
.drawer-scrim { position: fixed; inset: 0; z-index: 30; background: rgba(0, 5, 10, .55); }
.drawer-scrim.for-drawer { z-index: 44; }

.box { padding: .9rem 1rem; border-radius: .55rem; border: 1px solid var(--line2); background: rgba(8, 31, 50, .55); display: flex; flex-direction: column; gap: .75rem; }
.box h3 { display: flex; align-items: center; gap: .5rem; margin: 0; font: 700 1.1rem var(--f-title); letter-spacing: .06em; color: var(--ice); }
.box h3 svg { color: var(--cyan2); }
.pane-head h2 { margin: 0; font: 700 1.45rem var(--f-title); letter-spacing: .05em; color: var(--ice); }
.pane-head p { margin: .2rem 0 0; color: var(--dim); font-size: .92rem; }
.hint { margin: 0; color: var(--dim); font-size: .86rem; }
.setting { display: flex; align-items: center; gap: .8rem; padding: .35rem 0; }
.setting b { display: block; color: var(--ice); font-weight: 500; }
.setting small { display: block; color: var(--dim); font-size: .84rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.row-actions.end { justify-content: flex-end; }
.row-actions.center { justify-content: center; }
.status { font-size: .88rem; color: var(--dim); }
.status.ok { color: var(--green); } .status.bad { color: #ff8595; }
.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; }
.choice button { text-align: start; padding: .6rem .75rem; border-radius: .45rem; border: 1px solid var(--line2); background: rgba(3, 16, 26, .6); }
.choice button b { display: block; color: var(--ice); font-weight: 600; }
.choice button small { color: var(--dim); font-size: .8rem; }
.choice button[aria-pressed="true"] { border-color: var(--cyan2); background: rgba(25, 184, 255, .14); box-shadow: 0 0 .8rem rgba(25, 184, 255, .2); }
.choice button:disabled { opacity: .5; }
.swatches { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.swatch { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset; }
.swatch[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 .7rem currentColor; }
.lock-note { display: inline-flex; align-items: center; gap: .3rem; color: var(--amber); font-size: .8rem; }
.lock-note svg { width: .9rem; height: .9rem; }
.skeleton { height: .9rem; border-radius: .3rem; background: linear-gradient(90deg, rgba(25, 184, 255, .06), rgba(25, 184, 255, .16), rgba(25, 184, 255, .06)); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }
.voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem; max-height: 22rem; overflow: auto; }
.voice { display: flex; align-items: center; border-radius: .45rem; border: 1px solid var(--line2); background: rgba(3, 16, 26, .6); }
.voice[aria-pressed="true"] { border-color: var(--cyan2); background: rgba(25, 184, 255, .14); }
.voice .pick { flex: 1; text-align: start; padding: .5rem .6rem; min-width: 0; }
.voice .pick b { display: block; color: var(--ice); font-size: .92rem; }
.voice .pick small { color: var(--dim); font-size: .78rem; }
.voice .play { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-right: .3rem; border-radius: 50%; color: var(--cyan2); }
.voice .play.busy { animation: blink .8s infinite; }
.mem-card { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; border-radius: .45rem; border: 1px solid var(--line2); background: rgba(3, 16, 26, .55); }
.mem-card b { display: block; color: var(--ice); font-weight: 500; text-transform: capitalize; unicode-bidi: plaintext; }
.mem-card p { margin: .15rem 0 0; color: var(--text); font-size: .9rem; unicode-bidi: plaintext; }
.mem-card small { color: var(--faint); font-size: .76rem; }
.mem-card.admin { border-color: rgba(255, 176, 32, .35); }
.cat-label { margin-top: .4rem; font: 600 .82rem var(--f-title); letter-spacing: .14em; color: var(--faint); text-transform: uppercase; }
.check-list { display: flex; flex-direction: column; gap: .4rem; }
.check { display: flex; gap: .5rem; align-items: baseline; font-size: .92rem; }
.check i { font-style: normal; width: 1.3rem; height: 1.3rem; display: inline-grid; place-items: center; border-radius: 50%; font-size: .75rem; flex: none; }
.check.ok i { background: rgba(39, 224, 138, .2); color: var(--green); } .check.warn i { background: rgba(255, 176, 32, .2); color: var(--amber); }
pre.diag { margin: 0; max-height: 20rem; overflow: auto; font-size: .76rem; color: var(--dim); white-space: pre-wrap; }

dialog.sheet { width: min(44rem, calc(100vw - 2rem)); max-height: min(86vh, 52rem); padding: 0; border-radius: .8rem; border: 1px solid var(--line); background: rgba(4, 17, 29, .98); color: var(--text); box-shadow: 0 2rem 5rem rgba(0, 0, 0, .6), 0 0 2rem rgba(25, 184, 255, .15); overflow: hidden; }
dialog.sheet[open] { display: flex; flex-direction: column; animation: pop .16s ease-out; }
dialog.sheet.wide { width: min(70rem, calc(100vw - 2rem)); }
dialog.sheet.small { width: min(28rem, calc(100vw - 2rem)); }
dialog::backdrop { background: rgba(0, 5, 10, .65); backdrop-filter: blur(2px); }
.sheet-head { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line2); }
.sheet-head strong { flex: 1; font: 700 1.2rem var(--f-title); letter-spacing: .05em; color: var(--ice); unicode-bidi: plaintext; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-actions { display: flex; gap: .2rem; }
.content-body { padding: 1rem 1.2rem 1.4rem; overflow: auto; white-space: pre-wrap; line-height: 1.6; color: var(--ice); unicode-bidi: plaintext; }
.content-body.rich { white-space: normal; }
.media-body { flex: 1; overflow: auto; display: grid; place-items: center; background: #020a12; min-height: 12rem; }
.media-body img, .media-body video { max-width: 100%; max-height: 76vh; display: block; }
.media-body iframe { width: 100%; height: 76vh; border: 0; background: #fff; }
.media-body pre { width: 100%; margin: 0; padding: 1rem; white-space: pre-wrap; color: var(--ice); font-size: .85rem; align-self: start; }
.media-body table { border-collapse: collapse; font-size: .82rem; align-self: start; margin: .8rem; }
.media-body td, .media-body th { border: 1px solid var(--line2); padding: .25rem .5rem; color: var(--ice); unicode-bidi: plaintext; }
.media-body.rich { display: flex; flex-direction: column; place-items: stretch; background: #e9edf2; }
.media-body .prev-load { width: 100%; padding: 1.2rem; align-self: start; display: flex; flex-direction: column; gap: .6rem; }
.xl-view { display: flex; flex-direction: column; height: min(76vh, 52rem); width: 100%; }
.xl-pane { flex: 1; min-height: 0; overflow: auto; background: #fff; }
.xl-wrap { display: inline-block; min-width: 100%; }
.media-body table.xl { border-collapse: collapse; table-layout: fixed; margin: 0; font: 400 .8rem Calibri, "Segoe UI", Arial, sans-serif; color: #1a1a1a; background: #fff; }
.media-body table.xl th { position: sticky; top: 0; z-index: 2; background: #f0f2f5; color: #555; font-weight: 500; border: 1px solid #d4d8de; padding: .15rem .3rem; font-size: .72rem; }
.media-body table.xl tbody th { position: sticky; inset-inline-start: 0; z-index: 1; text-align: center; }
.media-body table.xl .xl-corner { z-index: 3; inset-inline-start: 0; }
.media-body table.xl td { border: 1px solid #e1e4e8; padding: .2rem .4rem; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 1.55rem; unicode-bidi: plaintext; }
.media-body table.xl td.n { font-variant-numeric: tabular-nums; }
.xl-bar { display: flex; align-items: center; gap: .6rem; background: #f0f2f5; border-top: 1px solid #cfd4da; padding: 0 .5rem; min-height: 2.3rem; }
.xl-tabs { display: flex; gap: .15rem; overflow-x: auto; flex: 1; }
.xl-tabs button { padding: .35rem .9rem; border: 1px solid transparent; border-top: 0; border-radius: 0 0 .35rem .35rem; background: transparent; color: #444; font-size: .82rem; white-space: nowrap; }
.xl-tabs button:hover { background: #e3e7ec; }
.xl-tabs button[aria-selected="true"] { background: #fff; color: #107c41; font-weight: 700; border-color: #cfd4da; box-shadow: inset 0 -2px 0 #107c41; }
.xl-info { font-size: .75rem; color: #666 !important; white-space: nowrap; }
.doc-wrap { width: 100%; height: min(76vh, 52rem); overflow: auto; padding: 1.2rem; }
.doc-page { max-width: 52rem; margin: 0 auto; background: #fff; color: #1d1d1d; padding: 2.4rem 2.8rem; box-shadow: 0 2px 12px rgba(0, 0, 0, .18); font: 400 .95rem/1.65 Calibri, "Segoe UI", Arial, sans-serif; unicode-bidi: plaintext; }
.doc-page h1, .doc-page h2, .doc-page h3, .doc-page h4 { color: #1f4e79; margin: 1rem 0 .4rem; line-height: 1.3; }
.doc-page h1 { font-size: 1.6rem; } .doc-page h2 { font-size: 1.3rem; } .doc-page h3 { font-size: 1.1rem; } .doc-page h4 { font-size: 1rem; }
.doc-page p { margin: 0 0 .55rem; } .doc-page .doc-gap { height: .5rem; margin: 0; }
.media-body .doc-page table.doc-table { border-collapse: collapse; margin: .6rem 0 1rem; width: 100%; font-size: .88rem; }
.media-body .doc-page table.doc-table th, .media-body .doc-page table.doc-table td { border: 1px solid #c9ced6; padding: .3rem .5rem; color: #1d1d1d; }
.media-body .doc-page table.doc-table th { background: #eef3f9; font-weight: 700; }
.slides-wrap { width: 100%; height: min(76vh, 52rem); overflow: auto; padding: 1.2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; align-content: start; }
.slide-card { background: #fff; color: #222; border-radius: .5rem; padding: 1rem 1.2rem; aspect-ratio: 16 / 9; overflow: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.slide-card h3 { margin: .2rem 0 .5rem; color: #1f4e79; font-size: 1.05rem; }
.slide-card ul { margin: 0; padding-inline-start: 1.1rem; font-size: .85rem; line-height: 1.5; }
.media-body .noprev { padding: 2rem; text-align: center; color: var(--dim); display: flex; flex-direction: column; gap: .8rem; align-items: center; }
.review-sum { padding: .7rem .9rem; border-radius: .5rem; background: rgba(25, 184, 255, .08); margin-bottom: .8rem; }
.finding { padding: .7rem 0; border-top: 1px solid var(--line2); }
.finding h4 { margin: 0 0 .3rem; display: flex; gap: .5rem; align-items: center; color: var(--ice); }
.sev { font-size: .72rem; padding: .1rem .45rem; border-radius: .3rem; }
.sev.serious { background: rgba(255, 59, 79, .2); color: #ff8a95; } .sev.caution { background: rgba(255, 176, 32, .2); color: var(--amber); } .sev.note { background: rgba(25, 184, 255, .2); color: var(--cyan2); }
.finding blockquote { margin: .4rem 0; padding-inline-start: .7rem; border-inline-start: 2px solid var(--line); color: var(--dim); }
.sugg { color: var(--green); }
.quiz { padding: 1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .8rem; }
.quiz-q { margin: 0; font-size: 1.15rem; color: var(--ice); }
.quiz-answers { display: flex; flex-direction: column; gap: .45rem; }
.quiz-answers button { text-align: start; padding: .65rem .8rem; border-radius: .45rem; border: 1px solid var(--line2); background: rgba(3, 16, 26, .6); }
.quiz-answers button.right { border-color: var(--green); background: rgba(39, 224, 138, .12); }
.quiz-answers button.wrong { border-color: var(--red); background: rgba(255, 59, 79, .12); }
.quiz-open { display: flex; gap: .5rem; }
.quiz-note { margin: 0; padding: .6rem .8rem; border-radius: .45rem; white-space: pre-wrap; }
.quiz-note.ok { background: rgba(39, 224, 138, .12); color: var(--green); } .quiz-note.bad { background: rgba(255, 59, 79, .12); color: #ff8a95; } .quiz-note.unsure { background: rgba(25, 184, 255, .1); }
.quiz-foot { display: flex; justify-content: flex-end; }
.confirm { padding: 1.6rem 1.4rem 1.3rem; text-align: center; display: flex; flex-direction: column; gap: .7rem; align-items: center; }
.confirm-ic { width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 176, 32, .14); color: var(--amber); }
.confirm-ic svg { width: 1.6rem; height: 1.6rem; }
.confirm h2 { margin: 0; font: 700 1.3rem var(--f-title); color: var(--ice); }
.confirm p { margin: 0; color: var(--text); white-space: pre-wrap; }
.ask { padding: 1.2rem; display: flex; flex-direction: column; gap: .7rem; }
.ask h2 { margin: 0; font: 700 1.25rem var(--f-title); color: var(--ice); letter-spacing: .04em; }
.ask p { margin: 0; font-size: .9rem; }

.toasts { position: fixed; z-index: 70; left: 50%; bottom: calc(5.4rem + var(--safe-b)); transform: translateX(-50%); display: flex; flex-direction: column; gap: .45rem; align-items: center; pointer-events: none; width: min(34rem, calc(100vw - 2rem)); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: .8rem; padding: .65rem .95rem; border-radius: .5rem; border: 1px solid var(--line); background: rgba(5, 20, 33, .97); color: var(--ice); box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .5); font-size: .93rem; animation: pop .18s ease-out; unicode-bidi: plaintext; }
.toast.err { border-color: rgba(255, 59, 79, .6); }
.toast button { color: var(--cyan2); font-weight: 600; }
.progress-dock { position: fixed; z-index: 35; right: 1rem; bottom: 5.2rem; width: 20rem; padding: .7rem .9rem; border-radius: .55rem; border: 1px solid var(--line); background: rgba(5, 20, 33, .97); display: flex; flex-direction: column; gap: .3rem; }
.progress-dock small { color: var(--dim); }
.meter { height: 4px; border-radius: 3px; background: rgba(25, 184, 255, .15); overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; background: var(--cyan2); box-shadow: 0 0 .4rem var(--cyan2); transition: width .3s; }

/* ── More page ─────────────────────────────────────────────────────────── */
.app[data-page="more"] .home { display: none; }
.more { min-height: 0; display: flex; flex-direction: column; gap: .7rem; padding: .75rem .9rem .6rem; }
.more-head { position: relative; display: flex; align-items: center; gap: 1rem; min-height: 5.6rem; padding: .6rem 1.4rem; border: 1px solid var(--line2); border-radius: var(--r); overflow: hidden;
  background: radial-gradient(ellipse 30% 140% at 62% 50%, rgba(25, 140, 220, .3), transparent 70%), linear-gradient(90deg, rgba(4, 18, 30, .9), rgba(6, 26, 42, .7)); }
.more-head::after { content: ""; position: absolute; right: 26%; top: 50%; width: 14rem; height: 14rem; margin-top: -7rem; border-radius: 50%; border: 1px solid rgba(25, 184, 255, .3); box-shadow: 0 0 3rem rgba(25, 184, 255, .25) inset; background: repeating-radial-gradient(circle, rgba(25, 184, 255, .08) 0 2px, transparent 2px 9px); pointer-events: none; }
.more-head h1 { margin: 0; font: 700 2.2rem/1 var(--f-title); letter-spacing: .03em; color: var(--ice); }
.more-head p { margin: .3rem 0 0; color: var(--text); font-size: 1.05rem; }
.more-head .tags { margin-left: auto; font: 600 .7rem/1.6 var(--f-title); letter-spacing: .28em; color: var(--dim); text-align: left; position: relative; z-index: 1; }
.more-head .mode { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .3rem; font: 600 1.05rem var(--f-title); color: var(--ice); }
.mtabs { display: flex; gap: .35rem; padding: .3rem; border: 1px solid var(--line2); border-radius: var(--r); background: rgba(4, 18, 30, .8); overflow-x: auto; scrollbar-width: none; }
.mtabs::-webkit-scrollbar { display: none; }
.mtab { display: inline-flex; align-items: center; gap: .55rem; height: 2.7rem; padding: 0 1.1rem; border-radius: .4rem; border: 1px solid transparent; color: var(--text); font-size: 1rem; white-space: nowrap; }
.mtab svg { width: 1.2rem; height: 1.2rem; }
.mtab:hover { color: var(--ice); background: rgba(25, 184, 255, .07); }
.mtab.active { color: var(--ice); border-color: #5fd4ff; background: linear-gradient(180deg, rgba(25, 150, 230, .5), rgba(10, 80, 140, .4)); box-shadow: 0 0 1rem rgba(25, 184, 255, .3); }
.mbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mpane { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: .8rem; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap: .8rem; align-content: start; align-items: start; }
.chat3 { flex: 1; min-height: 0; display: grid; grid-template-columns: 19rem minmax(0, 1fr) 16.5rem; gap: .75rem; }
.convs .search-row { display: flex; gap: .4rem; }
.search { position: relative; flex: 1; display: flex; align-items: center; }
.search svg { position: absolute; left: .6rem; width: 1.1rem; height: 1.1rem; color: var(--dim); }
.search input { padding-left: 2.1rem !important; }
.seg { display: inline-flex; gap: .35rem; margin: .5rem 0; }
.seg button { display: inline-flex; align-items: center; gap: .35rem; height: 1.9rem; padding: 0 .8rem; border-radius: .35rem; border: 1px solid var(--line2); font-size: .88rem; color: var(--text); }
.seg button svg { width: .95rem; height: .95rem; }
.seg button.active { border-color: var(--cyan2); color: var(--ice); background: rgba(25, 184, 255, .16); }
.conv-list { flex: 1; overflow: auto; min-height: 0; display: flex; flex-direction: column; gap: .2rem; }
.conv-day { padding: .55rem .3rem .2rem; font: 600 .78rem var(--f-title); letter-spacing: .14em; color: var(--faint); }
.conv { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto auto; align-items: center; gap: .55rem; padding: .45rem .4rem; border-radius: .4rem; border: 1px solid transparent; cursor: pointer; }
.conv:hover { background: rgba(25, 184, 255, .07); }
.conv.active { border-color: var(--line); background: rgba(25, 184, 255, .12); }
.conv .cic { width: 2.1rem; height: 2.1rem; border-radius: .4rem; display: grid; place-items: center; color: var(--cc, var(--violet)); background: color-mix(in srgb, var(--cc, #9b7bff) 18%, transparent); border: 1px solid color-mix(in srgb, var(--cc, #9b7bff) 45%, transparent); }
.conv .cic svg { width: 1.1rem; height: 1.1rem; }
.conv b { display: block; color: var(--ice); font-weight: 500; font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; text-align: start; }
.conv small { display: block; color: var(--dim); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .star { color: var(--dim); }
.conv .star.on { color: var(--amber); }
.conv .star.on svg { fill: currentColor; }
.conv-foot { display: flex; justify-content: space-between; padding-top: .5rem; border-top: 1px solid var(--line2); font-size: .82rem; color: var(--dim); }
.convo-head { display: flex; align-items: center; gap: .5rem; }
.convo-head h2 { font-size: 1.15rem; }
.chips-row { display: flex; gap: .45rem; flex-wrap: wrap; margin: .1rem 0 .4rem; }
.chip2 { display: inline-flex; align-items: center; gap: .35rem; height: 1.85rem; padding: 0 .7rem; border-radius: .35rem; border: 1px solid var(--line2); color: var(--text); font-size: .85rem; background: rgba(3, 16, 26, .6); white-space: nowrap; }
.chip2 svg { width: 1rem; height: 1rem; color: var(--cyan2); }
button.chip2:hover { border-color: var(--line3); color: var(--ice); }
.greet { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; padding: 1rem; min-height: 0; }
.greet .shield { --s: 6rem; }
.greet h3 { margin: .6rem 0 0; font: 600 1.7rem var(--f-title); color: var(--ice); letter-spacing: .02em; }
.greet p { margin: 0; color: var(--dim); }
.dots3 { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; font-size: .85rem; color: var(--text); }
.dots3 span::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); margin-right: .4rem; box-shadow: 0 0 .4rem var(--green); }
.modes { display: grid; grid-template-columns: repeat(4, minmax(0, 11rem)); gap: .7rem; margin-top: .6rem; }
.mode-card { --mc: var(--cyan2); display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: .85rem .9rem; border-radius: .45rem; border: 1px solid color-mix(in srgb, var(--mc) 65%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--mc) 16%, transparent), rgba(3, 16, 26, .6)); text-align: start; min-height: 6.2rem; transition: box-shadow .15s, transform .15s; }
.mode-card:hover { box-shadow: 0 0 1.2rem color-mix(in srgb, var(--mc) 40%, transparent); transform: translateY(-1px); }
.mode-card svg { width: 1.6rem; height: 1.6rem; color: var(--mc); }
.mode-card b { color: var(--ice); font: 700 1.15rem var(--f-title); letter-spacing: .03em; }
.mode-card small { color: var(--text); font-size: .82rem; }
.convo-msgs { flex: 1; min-height: 0; overflow: auto; padding: .2rem .4rem; display: flex; flex-direction: column; }
.more-input { display: flex; align-items: center; gap: .4rem; min-height: 3.6rem; padding: .35rem .5rem .35rem .9rem; border-radius: .55rem; border: 1px solid var(--line); background: rgba(3, 16, 26, .8); }
.more-input textarea { flex: 1; border: 0 !important; background: transparent !important; box-shadow: none !important; resize: none; min-height: 2.4rem; max-height: 8rem; }
.round-send { width: 2.7rem; height: 2.7rem; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #3cc4ff, #0c6fb0); color: #fff; box-shadow: 0 0 1rem rgba(25, 184, 255, .45); }
.round-send svg { width: 1.2rem; height: 1.2rem; }
.ctx-card { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .7rem .7rem; border-radius: .45rem; border: 1px solid var(--line2); background: rgba(3, 16, 26, .55); text-align: start; }
.ctx-card > svg { width: 1.5rem; height: 1.5rem; color: var(--ice); }
.ctx-card b { display: block; color: var(--ice); font-weight: 500; font-size: .92rem; }
.ctx-card small { display: block; font-size: .78rem; color: var(--dim); }
.ctx-card small.ok { color: var(--green); }
.ctx-card small.ok::before { content: "● "; }
.list { display: flex; flex-direction: column; gap: .45rem; }
.item { display: grid; grid-template-columns: 2.5rem minmax(12rem, 1fr) auto; gap: .7rem; align-items: center; padding: .6rem .75rem; border-radius: .45rem; border: 1px solid var(--line2); background: rgba(6, 24, 39, .7); }
.item b { display: block; color: var(--ice); font-weight: 500; unicode-bidi: plaintext; text-align: start; }
.item small { display: block; color: var(--dim); font-size: .84rem; unicode-bidi: plaintext; text-align: start; }
.item .acts { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line2); border: 1px solid var(--line2); border-radius: .5rem; overflow: hidden; }
.cal .dow { padding: .45rem; text-align: center; font: 600 .82rem var(--f-title); letter-spacing: .1em; color: var(--dim); background: rgba(4, 18, 30, .95); }
.cal .day { min-height: 6.2rem; padding: .35rem .4rem; background: rgba(5, 20, 33, .92); display: flex; flex-direction: column; gap: .2rem; overflow: hidden; }
.cal .day.out { opacity: .4; }
.cal .day.today { box-shadow: inset 0 0 0 1px var(--cyan2); background: rgba(12, 44, 70, .9); }
.cal .day > b { font: 600 .9rem var(--f-title); color: var(--ice); }
.cal .ev { font-size: .72rem; padding: .05rem .3rem; border-radius: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ice); background: rgba(25, 184, 255, .2); unicode-bidi: plaintext; }
.cal .ev.brief { background: rgba(155, 123, 255, .25); } .cal .ev.task { background: rgba(255, 176, 32, .22); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .7rem; }
dialog.sheet.rb { width: min(66rem, calc(100vw - 2rem)); max-height: min(92vh, 60rem); }
.rb-body { flex: 1; min-height: 0; overflow: auto; padding: 1rem 1.1rem 1.4rem; display: flex; flex-direction: column; gap: 1.1rem; }
.rb-body section { display: flex; flex-direction: column; gap: .6rem; }
.rb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem .8rem; align-items: start; }
.rb-hrow { display: flex; align-items: center; gap: .7rem; }
.rb-hrow .rb-lists { flex: 1; font-size: .82rem; }
.rb-dates { display: flex; align-items: center; gap: .4rem; }
.rb-dates input { flex: 1; min-width: 0; }
.ms { position: relative; }
.ms-btn { width: 100%; min-height: 2.45rem; display: flex; align-items: center; gap: .5rem; padding: .35rem .7rem; border-radius: .45rem; border: 1px solid var(--line2); background: rgba(3, 16, 26, .75); color: var(--ice); font-size: .95rem; text-align: start; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ms-btn:hover, .ms-btn[aria-expanded="true"] { border-color: var(--cyan2); box-shadow: 0 0 .6rem rgba(25, 184, 255, .18); }
.ms-btn.empty { color: var(--dim); }
.ms-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.ms-caret { color: var(--cyan2); font-size: .8rem; }
.ms-pop { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + .3rem); min-width: 19rem; display: flex; flex-direction: column; gap: .45rem; padding: .55rem; border-radius: .6rem; border: 1px solid var(--line); background: rgba(5, 20, 33, .99); box-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, .65), 0 0 1.2rem rgba(25, 184, 255, .14); }
.ms-pop[hidden] { display: none; }
.ms-pop input[type=search] { width: 100%; }
.ms-list { max-height: 16rem; overflow: auto; display: flex; flex-direction: column; gap: .1rem; border: 1px solid var(--line2); border-radius: .45rem; padding: .25rem; background: rgba(2, 12, 20, .7); }
.ms-opt { display: flex; align-items: center; gap: .55rem; padding: .38rem .5rem; border-radius: .35rem; cursor: pointer; font-size: .92rem; color: var(--text); }
.ms-opt:hover, .ms-opt:focus-visible { background: rgba(25, 184, 255, .12); outline: none; }
.ms-opt.on { background: rgba(25, 184, 255, .2); color: #fff; }
.ms-opt input { accent-color: var(--cyan); pointer-events: none; margin: 0; flex: none; }
.ms-opt .ms-name { flex: 1; min-width: 0; unicode-bidi: plaintext; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-opt small { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
.ms-empty { margin: .5rem; font-size: .85rem; }
.ms-tools { display: flex; align-items: center; gap: .35rem; }
.ms-tools .grow { flex: 1; }
.ms-n { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ms-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.ms-chips:empty { display: none; }
.ms-chip { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; padding: .12rem .2rem .12rem .55rem; border-radius: 1rem; background: rgba(25, 184, 255, .16); border: 1px solid var(--line2); color: var(--ice); font-size: .8rem; unicode-bidi: plaintext; }
.ms-chip.more { padding-inline-end: .55rem; color: var(--dim); }
.ms-chip button { width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 0; background: transparent; color: var(--dim); font-size: .95rem; line-height: 1; cursor: pointer; }
.ms-chip button:hover { color: #fff; background: rgba(255, 59, 79, .45); }
@media (max-width: 980px) { .rb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rb-grid { grid-template-columns: minmax(0, 1fr); } .ms-pop { min-width: 0; } }
.rb-h { margin: 0; font: 700 .9rem var(--f-title); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan2); }
.rb-formats { display: flex; flex-wrap: wrap; gap: .4rem; max-height: 10.5rem; overflow: auto; padding: .1rem; }
.rb-chip { padding: .38rem .8rem; border-radius: 1rem; border: 1px solid var(--line2); background: rgba(25, 184, 255, .05); color: var(--text); font-size: .9rem; unicode-bidi: plaintext; transition: background .15s, border-color .15s; }
.rb-chip:hover { border-color: var(--line); background: rgba(25, 184, 255, .12); }
.rb-chip.saved { border-style: dashed; }
.rb-chip[aria-pressed="true"] { border-color: var(--cyan2); border-style: solid; background: rgba(25, 184, 255, .25); color: #fff; box-shadow: 0 0 .7rem rgba(25, 184, 255, .25); }
.an-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.rb-note { margin: 0; font-size: .85rem; line-height: 1.5; }
.rb-need > span::after { content: " *"; color: var(--amber); }
.rb-foot { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.1rem; border-top: 1px solid var(--line2); }
.rb-foot .grow { flex: 1; }
.rb-foot #rb-adv[aria-pressed="true"] { border-color: var(--cyan2); color: #fff; background: rgba(25, 184, 255, .18); }
dialog.sheet.rb.rb-wide { width: min(78rem, calc(100vw - 2rem)); }
.rb-check { display: flex; align-items: flex-start; gap: .55rem; padding: .55rem .7rem; border: 1px solid var(--line2); border-radius: .55rem; background: rgba(25, 184, 255, .04); cursor: pointer; align-self: end; }
.rb-check input { width: 1.05rem; height: 1.05rem; margin-top: .15rem; accent-color: var(--cyan2); flex: none; }
.rb-check span { display: flex; flex-direction: column; gap: .1rem; }
.rb-check.sm { padding: .2rem .5rem; align-self: center; align-items: center; }
.rb-check.sm input { margin-top: 0; }
.rb-adv { border: 1px solid var(--line); border-radius: .7rem; padding: .8rem .9rem; background: rgba(25, 184, 255, .04); }
.rb-advgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: .9rem; }
.rb-advgrid > div { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.rb-sub { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim, #8aa); }
.rb-list { display: flex; flex-direction: column; gap: .3rem; max-height: 15rem; overflow: auto; padding: .1rem; }
.rb-lrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; align-items: center; gap: .35rem; padding: .25rem .4rem; border: 1px solid var(--line2); border-radius: .45rem; cursor: pointer; }
.rb-lrow.on { border-color: var(--cyan2); background: rgba(25, 184, 255, .14); }
.rb-lrow input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--cyan2); }
.rb-lrow input:not([type]) { min-width: 0; padding: .25rem .45rem; font-size: .88rem; }
.rb-lrow small { font-size: .72rem; white-space: nowrap; max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; }
.rb-preview { overflow: auto; border: 1px solid var(--line2); border-radius: .5rem; background: #fff; color: #1a1a1a; }
.rb-ptitle { padding: .35rem .6rem; background: #1f4e79; color: #fff; font-weight: 700; font-size: .85rem; }
.rb-preview table { border-collapse: collapse; width: 100%; font-size: .8rem; }
.rb-preview th { background: #2e75b6; color: #fff; padding: .3rem .55rem; border: 1px solid #d0d5dd; white-space: nowrap; font-weight: 600; }
.rb-preview td { padding: .25rem .55rem; border: 1px solid #d0d5dd; text-align: center; color: #667; }
.rb-preview tr:nth-child(odd) td { background: #f3f7fb; }
@media (max-width: 760px) { .rb-advgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .rb-foot { flex-wrap: wrap; }
  .rb-foot .status { flex-basis: 100%; }
  .rb-foot .btn { flex: 1; }
}
.days-pick { display: flex; flex-wrap: wrap; gap: .3rem; }
.days-pick button { height: 2rem; min-width: 2.6rem; padding: 0 .5rem; border-radius: .35rem; border: 1px solid var(--line2); font-size: .82rem; }
.days-pick button[aria-pressed="true"] { border-color: var(--cyan2); background: rgba(25, 184, 255, .18); color: var(--ice); }
.avatar-forms { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .5rem; }
.avatar-forms button { padding: .6rem .5rem; border-radius: .45rem; border: 1px solid var(--line2); background: rgba(3, 16, 26, .6); display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.avatar-forms button[aria-pressed="true"] { border-color: var(--cyan2); background: rgba(25, 184, 255, .15); box-shadow: 0 0 .8rem rgba(25, 184, 255, .25); }
.avatar-forms canvas { width: 5rem; height: 5rem; }
.swatches input[type=color] { width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line2); border-radius: 50%; background: none; overflow: hidden; cursor: pointer; }
.swatches input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.swatches input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.help-q { border-bottom: 1px solid var(--line2); padding: .5rem 0; }
.help-q summary { cursor: pointer; color: var(--ice); font-weight: 500; }
.help-q p { color: var(--text); margin: .4rem 0 0; font-size: .92rem; }
.pw-box { border: 1px solid var(--line2); border-radius: 10px; padding: .5rem .8rem; margin: .4rem 0; }
.pw-box summary { cursor: pointer; color: var(--ice); font-weight: 500; }
.pw-box[open] summary { margin-bottom: .5rem; }
.pw-box { border: 1px solid var(--line2); border-radius: 10px; padding: .5rem .8rem; margin: .4rem 0; }
.pw-box summary { cursor: pointer; color: var(--ice); font-weight: 500; }
.pw-box[open] summary { margin-bottom: .5rem; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0; font-size: .9rem; }
.kv dt { color: var(--dim); } .kv dd { margin: 0; color: var(--ice); }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1760px) {
  .nav-btn:not(.active) svg { display: none; }
  .nav-btn.active { padding: 0 1.1rem; }
  .brand-text b { font-size: 1.85rem; }
}
@media (max-width: 1500px) {
  .nav-btn { padding: 0 .7rem; font-size: .95rem; }
  .kbd-hint { display: none; }
  .state-chip { min-width: 0; padding: 0 .9rem; }
}
@media (max-width: 1180px) and (min-width: 761px) {
  .nav-btn span { display: none; } .nav-btn.active span { display: inline; }
  .home { grid-template-columns: 24rem minmax(0, 1fr) 24rem; }
  .brand-text small { display: none; }
  .clock small { display: none; }
  .chat3 { grid-template-columns: 16rem minmax(0, 1fr); } .chat3 .ctx { display: none; }
}
@media (max-height: 640px) and (min-width: 761px) { .cap-left ul, .cap-right { display: none; } }

@media (max-width: 760px) {
  :root { font-size: 14px; }
  body { overflow: auto; overflow-x: hidden; }
  .app { height: auto; min-height: 100dvh; display: flex; flex-direction: column; }
  .topbar { position: sticky; top: 0; z-index: 20; height: 3.7rem; gap: .5rem; padding: 0 .6rem; padding-top: env(safe-area-inset-top, 0); backdrop-filter: blur(8px); }
  .brand .shield { --s: 2.3rem; }
  .brand-text b { font-size: 1.3rem; letter-spacing: .22em; }
  .brand-text small, .nav, .clock, .win-btn.desk, #gear-btn { display: none !important; }
  .state-chip { margin-left: auto; height: 2.3rem; min-width: 0; padding: 0 .7rem; font-size: .92rem; gap: .4rem; }
  .state-chip .bars { height: 1rem; }
  .round-btn { width: 2.4rem; height: 2.4rem; }
  .round-btn svg { width: 1.2rem; height: 1.2rem; }
  .burger { display: grid; }
  .bell-dot { top: .3rem; right: .3rem; }
  .home { display: flex; flex-direction: column; gap: .7rem; padding: .6rem .6rem 0; }
  .col { display: contents; }
  .col-center > * { order: 0; }
  .stage { order: 1; flex: none; height: min(44vh, 24rem); min-height: 15rem; }
  .state-tabs { order: 2; flex: none; height: 2.8rem; gap: .35rem; }
  .stab { font-size: .74rem; gap: .25rem; letter-spacing: .02em; }
  .stab svg { display: none; }
  .talk { display: contents; }
  .tbox { order: 3; height: auto; padding: .4rem .6rem; gap: .25rem; }
  .tbox header { min-height: 1.5rem; }
  .tbox header b { font-size: 1rem; }
  .t-text { max-height: 6.4rem; min-height: 2.4rem; padding: .25rem .45rem; }
  .t-chips { display: none; }
  .inputrow { position: fixed; z-index: 16; left: .5rem; right: .5rem; bottom: calc(.5rem + var(--safe-b)); min-height: 3.2rem; box-shadow: 0 -.4rem 1.6rem rgba(0, 0, 0, .55), 0 0 1rem rgba(25, 184, 255, .15); background: #04121e; }
  .inputrow textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .inputrow textarea { max-height: 6rem; }
  .attach-tray { position: fixed; z-index: 16; left: .5rem; right: .5rem; bottom: calc(4.2rem + var(--safe-b)); }
  .home { padding-bottom: calc(4.6rem + var(--safe-b)); }
  .app[data-page="more"] .inputrow { display: none; }
  .p-comms { order: 4; flex: none; height: 62vh; }
  .p-tasks { order: 5; } .p-routines { order: 6; } .p-thinking { order: 7; } .p-overview { order: 8; } .p-reports { order: 9; } .p-templates { order: 10; }
  .panel { flex: none !important; }
  .p-tasks, .p-routines, .p-thinking, .p-templates { max-height: 26rem; }
  .p-reports .tiles { min-height: 6rem; }
  .chev-btn { display: grid; place-items: center; width: 2rem; height: 2rem; margin-left: .2rem; color: var(--dim); transition: transform .2s; }
  .phead .view-all + .chev-btn, .phead .btn + .chev-btn { margin-left: .2rem; }
  .phead h2 + .chev-btn { margin-left: auto; }
  .panel.collapsed > :not(.phead) { display: none !important; }
  .panel.collapsed .chev-btn { transform: rotate(-90deg); }
  .panel.collapsed { padding-bottom: .4rem; }
  .panel.collapsed .phead { margin-bottom: 0; }
  .fcard { min-width: 0; width: 27%; padding: .35rem .45rem; }
  .fcard b { font-size: .72rem; letter-spacing: .08em; }
  .fcard .fc-detail { display: none; }
  .fc-donut { width: 2rem; height: 2rem; } .fc-doc { width: 1.6rem; height: 1.6rem; }
  .f-analyze, .f-strategize { top: 4%; } .f-processing, .f-generate { top: 36%; }
  .cap { display: none; }
  .stage-tools { opacity: 1; top: auto; bottom: .5rem; }
  .cam { width: 42%; right: .5rem; bottom: 3.2rem; }
  .footer { order: 20; height: auto; flex-wrap: wrap; gap: .7rem 1rem; padding: .8rem .8rem calc(.8rem + var(--safe-b)); }
  .f-brand, .f-ver { display: none; }
  .f-stat { padding-right: .6rem; }
  .talk-pill { position: fixed; top: auto; bottom: calc(4.4rem + var(--safe-b)); transform: translateX(-50%); min-width: 0; height: 3rem; padding: 0 1rem; z-index: 16; }
  .talk-pill canvas { width: 2.6rem; }
  .talk-pill b { font-size: 1.05rem; }
  /* one line, sized to its words: it used to shrink to nothing and wrap
     «TALK TO Z.E.R.O · Hold to talk» into five lines over the chat */
  .talk-pill { width: max-content; max-width: calc(100vw - 1.5rem); gap: .6rem; }
  .talk-pill span { white-space: nowrap; min-width: 0; }
  .talk-pill small { font-size: .74rem; }
  .gauges { grid-template-columns: repeat(3, 1fr) 1.3fr; }
  .gauge svg { width: 4rem; height: 4rem; }
  .gauge b { top: 1.15rem; font-size: 1.2rem; }
  .m-drawer { position: fixed; z-index: 35; top: 0; bottom: 0; right: 0; width: min(19rem, 86vw); padding: calc(1rem + env(safe-area-inset-top, 0)) .7rem 1rem; display: flex; flex-direction: column; gap: .2rem; background: rgba(4, 17, 29, .99); border-left: 1px solid var(--line); overflow: auto; animation: drawer .2s ease-out; }
  .m-drawer > button { display: flex; align-items: center; gap: .8rem; min-height: 2.9rem; padding: 0 .7rem; border-radius: .45rem; color: var(--text); font-size: 1rem; text-align: start; }
  .m-drawer > button svg { width: 1.3rem; height: 1.3rem; color: var(--cyan2); }
  .m-drawer > button:hover, .m-drawer > button.active { background: rgba(25, 184, 255, .12); color: var(--ice); }
  .m-drawer > button.danger { color: #ff9aa6; margin-top: auto; }
  .m-user { display: flex; align-items: center; gap: .7rem; padding: .3rem .5rem 1rem; margin-bottom: .4rem; border-bottom: 1px solid var(--line2); }
  .m-user b { display: block; color: var(--ice); } .m-user small { color: var(--green); font-size: .82rem; }
  .more { padding: .6rem; flex: 1; }
  .more-head { min-height: 4rem; padding: .6rem .9rem; }
  .more-head h1 { font-size: 1.6rem; }
  .more-head p { font-size: .88rem; }
  .more-head .tags, .more-head::after { display: none; }
  .mtabs { position: sticky; top: 3.8rem; z-index: 10; }
  .mtab { height: 2.4rem; padding: 0 .8rem; font-size: .92rem; }
  .m-only-inline { display: inline-grid !important; }
  .chat3 { grid-template-columns: 1fr; }
  .chat3 .convs { display: none; }
  .chat3.show-list .convs { display: flex; max-height: 60vh; }
  .chat3 .ctx { display: none; }
  .modes { grid-template-columns: 1fr 1fr; }
  .mgrid { grid-template-columns: 1fr !important; }
  .item { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .item .acts { grid-column: 1 / -1; justify-content: flex-start; }
  .grid2 { grid-template-columns: 1fr; }
  .cal .day { min-height: 3.8rem; } .cal .ev { font-size: .6rem; }
  .drawer { width: 100vw; }
  .pop { left: .75rem !important; right: .75rem !important; max-width: none; width: auto; }
  .notif { width: auto; }
  .toasts { bottom: calc(8.4rem + var(--safe-b)); }
  .progress-dock { left: .75rem; right: .75rem; width: auto; bottom: 9rem; }
  .convo-msgs { max-height: none; }
  .more .panel.convo { min-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* where a conversation happened (web / Windows / Telegram) */
.place-badge { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: .35rem; color: var(--pc, var(--cyan)); background: color-mix(in srgb, var(--pc, #19b8ff) 16%, transparent); border: 1px solid color-mix(in srgb, var(--pc, #19b8ff) 45%, transparent); flex: none; }
.place-badge svg { width: .9rem; height: .9rem; }
.title-place:empty { display: none; }
.title-place { display: inline-flex; margin-right: .45rem; }
.use-banner { display: flex; align-items: center; gap: .6rem; margin: .4rem .3rem .7rem; padding: .55rem .7rem; border: 1px solid var(--line2); border-radius: .5rem; background: color-mix(in srgb, var(--cyan, #19b8ff) 7%, transparent); font-size: .86rem; color: var(--dim, #9fb3c8); }
.use-banner .grow { flex: 1; min-width: 0; }

.vault-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; margin: .2rem 0 .7rem; }
.vault-stat { padding: .7rem .8rem; border: 1px solid var(--line2); border-radius: .5rem; background: color-mix(in srgb, var(--cyan, #19b8ff) 6%, transparent); min-width: 0; }
.vault-stat b { display: block; color: var(--ice); font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-stat.wide b { font-size: .82rem; font-family: ui-monospace, Consolas, monospace; direction: ltr; }
.vault-stat small { color: var(--dim); font-size: .78rem; }
.vault-list { display: flex; flex-direction: column; gap: .55rem; }
.vault-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: .55rem; align-items: center; padding: .45rem .5rem; border: 1px solid var(--line2); border-radius: .5rem; background: rgba(4, 20, 32, .45); }
.vault-row .fcardm { grid-column: auto; margin: 0; }
.vault-meta { min-width: 0; }
.vault-size { color: var(--cyan2); font-size: .82rem; }
.vault-path { display: block; margin-top: .2rem; font-size: .72rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: left; }
.vault-wipe { color: #ff9aa6 !important; border-color: color-mix(in srgb, #ff4d6a 45%, transparent) !important; }
@media (max-width: 760px) {
  .vault-row { grid-template-columns: minmax(0, 1fr) auto; }
  .vault-meta { grid-column: 1 / -1; }
}

.fmeta small.fdetail { color: var(--cyan2, #7fd8ff); opacity: .85; margin-top: .1rem; }
.tile.sam { border-color: rgba(46, 230, 166, .45); background: linear-gradient(135deg, rgba(46, 230, 166, .12), rgba(62, 199, 255, .08)); }
.tile.sam svg { color: #2ee6a6; }

/* ── New Report chooser + the NetSuite report wizard ── */
dialog.sheet.nr { width: min(44rem, calc(100vw - 2rem)); }
.nr-body { padding: .9rem 1.1rem 1.3rem; display: flex; flex-direction: column; gap: .7rem; }
.nr-body > p { margin: 0; }
.nr-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.nr-card { display: flex; flex-direction: column; gap: .35rem; text-align: start; padding: 1.1rem 1.2rem; min-height: 9.5rem; border-radius: .9rem; border: 1px solid var(--line2); background: rgba(25, 184, 255, .05); color: var(--text); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.nr-card:hover:not(:disabled) { border-color: var(--cyan2); background: rgba(25, 184, 255, .12); box-shadow: 0 0 1rem rgba(25, 184, 255, .2); }
.nr-card:disabled { opacity: .5; cursor: not-allowed; }
.nr-card b { font: 700 1.45rem var(--f-title); color: var(--cyan2); }
.nr-card strong { color: var(--ice); font-size: 1rem; }
.nr-card small { color: var(--dim); line-height: 1.5; }
@media (max-width: 560px) { .nr-cards { grid-template-columns: 1fr; } }
dialog.sheet.nsb { width: min(84rem, calc(100vw - 2rem)); height: min(92vh, 56rem); }
.nsb-env { font-size: .8rem; margin-inline-start: .6rem; }
.nsb-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); }
.nsb-side { display: flex; flex-direction: column; gap: .5rem; padding: .9rem; border-inline-end: 1px solid var(--line2); min-height: 0; }
.nsb-list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: .12rem; }
.nsb-cat { margin: .55rem .2rem .2rem; font-size: .74rem; letter-spacing: .08em; color: var(--cyan2); text-transform: uppercase; }
.nsb-item { text-align: start; padding: .42rem .6rem; border-radius: .45rem; border: 1px solid transparent; background: none; color: var(--text); font-size: .9rem; cursor: pointer; unicode-bidi: plaintext; }
.nsb-item:hover { background: rgba(25, 184, 255, .1); }
.nsb-item.on { background: rgba(25, 184, 255, .22); border-color: var(--cyan2); color: #fff; }
.nsb-item.bad::after { content: " ⚠"; color: var(--amber); }
.nsb-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); gap: .8rem; }
.nsb-checks { display: flex; flex-direction: column; gap: .15rem; max-height: 12.5rem; overflow: auto; border: 1px solid var(--line2); border-radius: .5rem; padding: .35rem; background: rgba(2, 12, 20, .55); }
.nsb-checks label { display: flex; align-items: center; gap: .5rem; padding: .25rem .4rem; border-radius: .3rem; font-size: .9rem; cursor: pointer; }
.nsb-checks label:hover { background: rgba(25, 184, 255, .1); }
.nsb-checks input { accent-color: var(--cyan2); }
.nsb-checks.off { opacity: .55; pointer-events: none; }
.nsb-fmts { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.nsb-prev { overflow: auto; max-height: 22rem; border: 1px solid var(--line2); border-radius: .5rem; }
.nsb-prev table { border-collapse: collapse; width: 100%; font-size: .85rem; }
.nsb-prev th, .nsb-prev td { padding: .35rem .55rem; border-bottom: 1px solid var(--line2); white-space: nowrap; text-align: start; unicode-bidi: plaintext; }
.nsb-prev th { position: sticky; top: 0; background: rgba(6, 26, 40, .98); color: var(--cyan2); }
@media (max-width: 900px) { .nsb-main { grid-template-columns: 1fr; } .nsb-side { max-height: 14rem; border-inline-end: 0; border-bottom: 1px solid var(--line2); } .nsb-cols { grid-template-columns: 1fr; } }


/* who made a saved report / who sees it — the share window (Share in app.js) */
.acl-mark { display: block; margin-top: .15rem; font-size: .72rem; color: var(--muted, #8fb3c8); opacity: .9; unicode-bidi: plaintext; }
.rb-chip .acl-mark { display: inline; margin: 0 .45rem 0 0; }
.acl-row { display: flex; gap: .6rem; align-items: center; justify-content: space-between; padding: .45rem .6rem; border: 1px dashed var(--line2); border-radius: .5rem; font-size: .82rem; }
dialog.sheet.acl { width: min(34rem, calc(100vw - 2rem)); }
.acl-body { display: flex; flex-direction: column; gap: .7rem; }
.acl-owner { display: flex; flex-direction: column; gap: .2rem; padding: .55rem .7rem; border-radius: .55rem; background: rgba(25, 184, 255, .07); border: 1px solid var(--line2); }
.acl-vis { display: grid; gap: .4rem; }
.acl-opt { display: flex; gap: .55rem; align-items: flex-start; padding: .5rem .65rem; border: 1px solid var(--line2); border-radius: .55rem; cursor: pointer; transition: border-color .15s, background .15s; }
.acl-opt:hover { border-color: var(--line); background: rgba(25, 184, 255, .06); }
.acl-opt:has(input:checked) { border-color: var(--cyan2); background: rgba(25, 184, 255, .14); }
.acl-opt span { display: flex; flex-direction: column; gap: .1rem; }
.acl-opt small, .acl-owner small { font-size: .76rem; }
.acl-users { display: flex; flex-direction: column; gap: .4rem; }
.acl-users[hidden] { display: none; }
.acl-list { max-height: 13rem; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .25rem .6rem; padding: .4rem; border: 1px solid var(--line2); border-radius: .5rem; }
.acl-p, .acl-groups label { display: flex; gap: .4rem; align-items: center; font-size: .86rem; }
.acl-p[hidden] { display: none; }
.acl-groups { display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.acl-edit summary { cursor: pointer; color: var(--cyan2); font-size: .86rem; margin-bottom: .35rem; }

/* the reports box: 4 buttons a row — one row up to 4, two rows up to 8,
   then the same two rows of 4 with the rest a swipe away */
.tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.tiles[data-n="few"] { grid-template-rows: minmax(0, 1fr); }
.tiles[data-n="many"] { grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.tiles[data-n="lots"] { grid-template-rows: none; grid-auto-rows: calc((100% - .35rem) / 2); gap: .35rem;
  overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; scrollbar-width: none; padding-bottom: .1rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1rem), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 1rem), transparent 100%); }
.tiles[data-n="lots"]::-webkit-scrollbar { display: none; }
.tiles[data-n="lots"] .tile { scroll-snap-align: start; }
.tiles[data-n="many"] .tile, .tiles[data-n="lots"] .tile {
  flex-direction: row; justify-content: flex-start; gap: .5rem; padding: .3rem .55rem; font-size: .74rem; font-weight: 600;
  text-align: start; border-radius: .55rem; letter-spacing: .01em; }
.tiles[data-n="many"] .tile svg, .tiles[data-n="lots"] .tile svg {
  width: 1.05rem; height: 1.05rem; flex: none; padding: .32rem; box-sizing: content-box; border-radius: .5rem;
  background: rgba(25, 184, 255, .12); border: 1px solid rgba(25, 184, 255, .25); filter: none; }
.tiles[data-n="many"] .tile.sam svg, .tiles[data-n="lots"] .tile.sam svg { background: rgba(46, 230, 166, .13); border-color: rgba(46, 230, 166, .35); }
.tiles[data-n="many"] .tile span, .tiles[data-n="lots"] .tile span { -webkit-line-clamp: 2; line-height: 1.22; }
.tiles .tile:active { transform: translateY(1px); }
/* phones: still 4 a row, as app icons (icon over a short label) */
@media (max-width: 640px) {
  .p-reports .tiles, .p-reports .tiles[data-n] { min-height: 0; }
  .tiles[data-n="many"], .tiles[data-n="few"] { grid-template-rows: none; grid-auto-rows: minmax(4.5rem, auto); }
  .tiles[data-n="lots"] { grid-auto-rows: 4.5rem; max-height: calc(9rem + .35rem); }
  .tiles[data-n] .tile { flex-direction: column; justify-content: center; text-align: center; gap: .3rem; padding: .35rem .15rem; font-size: .64rem; }
  .tiles[data-n] .tile svg { width: 1.1rem; height: 1.1rem; }
}

/* conversations: where each message was sent from */
.dev-tag { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-inline-start: .35rem; border-radius: .35rem;
  color: var(--dc, #19b8ff); background: color-mix(in srgb, var(--dc, #19b8ff) 14%, transparent); border: 1px solid color-mix(in srgb, var(--dc, #19b8ff) 38%, transparent); vertical-align: middle; }
.dev-tag svg { width: .78rem; height: .78rem; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* the More chat's smaller pair */
.mic-btn.sm, .mute-btn.sm { width: 2.2rem; height: 2.2rem; }
.mic-btn.sm svg, .mute-btn.sm svg { width: 1.1rem; height: 1.1rem; }
/* the device each line / conversation came from, and the account's devices */
.dev-name { margin-inline-start: .35rem; font-size: .68rem; opacity: .65; font-weight: 400; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-list { width: min(370px, 92vw); max-height: 70vh; overflow: auto; padding: .35rem; display: grid; gap: .4rem; }
.dev-list h4 { margin: .2rem .3rem .3rem; font-size: .85rem; }
.dev-row { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .6rem; border-radius: .7rem; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03); }
.dev-row.me { border-color: rgba(46,230,166,.45); }
.dev-row b { display: block; font-size: .8rem; }
.dev-row small { display: block; font-size: .68rem; opacity: .7; margin-top: .15rem; line-height: 1.5; }

/* the top menu: conversations always on a computer; files, calendar and memory when the screen is wide */
.nav-btn.nav-x { display: none; }
@media (min-width: 1500px) { .nav-btn.nav-x { display: inline-flex; } }
@media (max-width: 760px) { .nav-btn.nav-d { display: none; } }

/* the camera box: moved, resized, or in Zero's place */
.cam { cursor: grab; touch-action: none; user-select: none; }
.cam.moving { cursor: grabbing; box-shadow: 0 0 2rem rgba(25, 184, 255, .65); }
.cam-rs { position: absolute; right: 0; bottom: 0; width: 1.4rem; height: 1.4rem; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, rgba(95, 212, 255, .85) 50%); border-bottom-right-radius: .5rem; }
.cam.staged { left: .6rem !important; top: .6rem !important; right: .6rem !important; bottom: .6rem !important; width: auto !important; max-width: none !important;
  aspect-ratio: auto; cursor: default; border-radius: 1rem; z-index: 6; }
.cam.staged .cam-rs { display: none; }
.cam.staged video { object-fit: contain; background: #000; }
.stage.cam-staged .avatar, .stage.cam-staged .rings, .stage.cam-staged .cap, .stage.cam-staged .fcard { visibility: hidden; }

/* ── who is signed in (footer chip + its menu) ── */
.f-who { display: flex; align-items: center; gap: .6rem; height: 3rem; padding: 0 .9rem 0 .45rem; border-radius: 1.6rem; border: 1px solid var(--line2);
  background: linear-gradient(180deg, rgba(14, 44, 70, .55), rgba(5, 22, 36, .55)); color: var(--ice); transition: border-color .15s, box-shadow .15s; max-width: 19rem; }
.f-who:hover, .f-who[aria-expanded="true"] { border-color: var(--line3); box-shadow: 0 0 1rem rgba(25, 184, 255, .18); }
.who-av { --who: #5fd4ff; display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; font: 700 .95rem/1 var(--f-title); font-style: normal;
  color: #04121e; background: radial-gradient(circle at 30% 25%, #fff 0, var(--who) 55%); box-shadow: 0 0 0 2px rgba(4, 18, 30, .9), 0 0 0 3px var(--who), 0 0 .9rem var(--who); }
.who-av.big { width: 3.2rem; height: 3.2rem; font-size: 1.25rem; }
.who-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; text-align: start; }
.who-t b { font-size: .98rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-t small { font-size: .78rem; color: var(--cyan2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-who.admin .who-t small { color: var(--amber); }
.who-dev { font-style: normal; font-size: 1rem; opacity: .85; }
.who-card { display: flex; gap: .8rem; align-items: center; padding: .6rem .5rem .4rem; }
.who-card b { display: block; font-size: 1.08rem; color: var(--ice); }
.who-card small { display: block; color: var(--faint); font-size: .8rem; }
.who-card .who-here { margin-top: .3rem; color: var(--text); }
.who-tag { display: inline-block; margin-top: .35rem; padding: .1rem .55rem; border-radius: 1rem; font-size: .78rem; color: var(--cyan2); border: 1px solid var(--line2); background: rgba(25, 184, 255, .08); }
.who-tag.admin { color: var(--amber); border-color: rgba(255, 176, 32, .4); background: rgba(255, 176, 32, .08); }
@media (max-width: 1500px) { .f-who .who-t small { display: none; } }
@media (max-width: 1280px) { .f-who .who-t, .f-who .who-dev { display: none; } .f-who { padding: 0 .4rem; } }
@media (max-width: 760px) { .f-who { order: -1; } }

/* ── the welcome tour + what's new ── */
.tour { position: fixed; inset: 0; z-index: 90; animation: pop .2s ease-out; }
.tour-hole { position: fixed; border-radius: .8rem; box-shadow: 0 0 0 200vmax rgba(1, 8, 16, .72), 0 0 0 2px #5fd4ff, 0 0 1.6rem rgba(95, 212, 255, .55);
  transition: left .28s ease, top .28s ease, width .28s ease, height .28s ease; pointer-events: none; }
.tour.free .tour-hole { left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; box-shadow: 0 0 0 200vmax rgba(1, 8, 16, .78); }
.tour-card, .news-card { position: fixed; padding: 1.2rem 1.3rem 1.1rem; border-radius: 1rem; border: 1px solid var(--line3); color: var(--text);
  background: linear-gradient(180deg, rgba(12, 40, 64, .98), rgba(4, 18, 30, .98)); box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, .6), 0 0 2rem rgba(25, 184, 255, .2);
  transition: left .28s ease, top .28s ease; text-align: right; }
.tour-card h3, .news-card h3 { margin: .55rem 0 .35rem; font-size: 1.25rem; color: var(--ice); }
.tour-card p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--text); }
.tour-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.tour-badge { font-size: .78rem; padding: .15rem .6rem; border-radius: 1rem; color: #04121e; background: linear-gradient(90deg, #5fd4ff, #2ee6a6); font-weight: 700; }
.tour-count { font: 600 .8rem var(--f-title); color: var(--faint); letter-spacing: .06em; }
.tour-dots { display: flex; gap: .3rem; margin: .9rem 0 .2rem; }
.tour-dots i { width: .45rem; height: .45rem; border-radius: 50%; background: rgba(95, 212, 255, .2); transition: width .2s; }
.tour-dots i.done { background: rgba(95, 212, 255, .55); } .tour-dots i.on { width: 1.3rem; border-radius: .3rem; background: #5fd4ff; }
.tour-btns { display: flex; align-items: center; gap: .55rem; margin-top: .95rem; flex-wrap: wrap; }
.tour-btns .btn { min-height: 2.4rem; padding: 0 1.1rem; }
.tour-skip { margin-inline-start: auto; color: var(--faint); font-size: .9rem; }
.tour.news { display: grid; place-items: center; background: rgba(1, 8, 16, .72); padding: 1rem; }
.news-card { position: relative; width: min(30rem, 100%); max-height: min(36rem, calc(100vh - 2rem)); display: flex; flex-direction: column; }
.news-list { overflow: auto; margin-top: .7rem; display: flex; flex-direction: column; gap: .6rem; }
.news-item { padding: .7rem .8rem; border-radius: .7rem; border: 1px solid var(--line2); background: rgba(25, 184, 255, .05); }
.news-item b { display: block; color: var(--ice); margin-bottom: .2rem; } .news-item p { margin: 0; font-size: .95rem; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-card { transition: none; } }

/* ── tour v2: chapters, progress, tips ── */
.tour.menu, .tour.playing.free { background: transparent; }
.tour.menu { display: grid; place-items: center; background: rgba(1, 8, 16, .78); padding: 1rem; overflow: auto; }
.tour-menu { width: min(44rem, 100%); padding: 1.4rem 1.5rem 1.2rem; border-radius: 1.1rem; border: 1px solid var(--line3); text-align: right;
  background: linear-gradient(180deg, rgba(12, 40, 64, .98), rgba(4, 18, 30, .98)); box-shadow: 0 1.6rem 3.4rem rgba(0, 0, 0, .6), 0 0 2.2rem rgba(25, 184, 255, .2); animation: pop .22s ease-out; }
.tour-menu.small { width: min(28rem, 100%); text-align: center; }
.tour-menu h2 { margin: .8rem 0 .3rem; font-size: 1.6rem; color: var(--ice); } .tour-menu h3 { margin: .5rem 0 .3rem; color: var(--ice); font-size: 1.25rem; }
.tour-lead { margin: 0 0 1rem; color: var(--text); line-height: 1.7; }
.tour-chs { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .6rem; }
.tour-ch { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .6rem; align-items: center; padding: .65rem .7rem; border-radius: .8rem; text-align: start; color: var(--text);
  border: 1px solid var(--line2); background: rgba(25, 184, 255, .05); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.tour-ch:hover, .tour-ch:focus-visible { border-color: #5fd4ff; background: rgba(25, 184, 255, .12); transform: translateY(-1px); }
.tour-ch-i { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .7rem; font-size: 1.2rem; background: rgba(95, 212, 255, .12); }
.tour-ch-t b { display: block; color: var(--ice); font-size: 1rem; } .tour-ch-t small { display: block; color: var(--faint); font-size: .8rem; line-height: 1.4; }
.tour-ch em { font-style: normal; font-size: .75rem; color: var(--faint); white-space: nowrap; }
.tour-ch.done { border-color: rgba(46, 230, 166, .4); } .tour-ch.done em { color: #2ee6a6; font-size: 1rem; }
.tour-done-ic { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin: 0 auto; border-radius: 50%; font-size: 1.6rem; color: #04121e; background: linear-gradient(135deg, #2ee6a6, #5fd4ff); }
.tour-menu.small .tour-btns { justify-content: center; }
.tour-bar { display: block; height: 3px; margin: -.4rem -.4rem .8rem; border-radius: 2px; background: rgba(95, 212, 255, .15); overflow: hidden; }
.tour-bar em { display: block; height: 100%; background: linear-gradient(90deg, #5fd4ff, #2ee6a6); transition: width .3s ease; }
.tour-chname { font-size: .82rem; color: #5fd4ff; font-weight: 600; } .tour-x { margin-inline-start: .3rem; border: 0; background: none; color: var(--faint); font-size: 1rem; cursor: pointer; padding: 0 .2rem; }
.tour-x:hover { color: #fff; } .tour-top .tour-count { margin-inline-start: auto; }
.tour-tip { margin-top: .7rem; padding: .55rem .7rem; border-radius: .6rem; font-size: .9rem; line-height: 1.6; color: var(--text); background: rgba(255, 176, 32, .08); border: 1px solid rgba(255, 176, 32, .25); }
.tour-tip b { color: #ffb020; font-weight: 600; }
.tour.moving .tour-card { opacity: .35; transition: opacity .15s; }
@media (max-width: 760px) { .tour-chs { grid-template-columns: 1fr; } .tour-menu { padding: 1.1rem; } .tour-menu h2 { font-size: 1.3rem; } }

/* the header chip: what THIS device's Zero is doing */
[data-act="hearing"] { --c: var(--green); } [data-act="listening"] { --c: #4fd1a5; } [data-act="ptt"] { --c: var(--cyan); } [data-act="elsewhere"] { --c: var(--amber); }
.state-chip[data-act="listening"] .bars i { transform: scaleY(.45); }
.state-chip[data-act="idle"] .bars i, .state-chip[data-act="ptt"] .bars i, .state-chip[data-act="elsewhere"] .bars i { transform: scaleY(.18); opacity: .7; }

/* the account menu: sections of doors */
.who-pop { min-width: 21rem; max-width: min(24rem, calc(100vw - 1.5rem)); direction: rtl; }
.who-sec { padding: .35rem .3rem .2rem; } .who-sec-t { margin: .1rem .3rem .35rem; font: 600 .75rem var(--f-title); letter-spacing: .06em; color: var(--faint); }
.who-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
.who-btn { display: flex; align-items: center; gap: .5rem; min-height: 2.35rem; padding: 0 .6rem; border-radius: .5rem; border: 1px solid transparent; color: var(--text); background: rgba(25, 184, 255, .05); text-align: start; font-size: .92rem; }
.who-btn:hover, .who-btn:focus-visible { border-color: var(--line3); background: rgba(25, 184, 255, .12); color: var(--ice); }
.who-btn svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--cyan2); } .who-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* a demo account */
.demo-ribbon { position: fixed; z-index: 80; top: 0; left: 50%; transform: translateX(-50%); padding: .25rem 1rem; border-radius: 0 0 .7rem .7rem; font-size: .82rem; color: #fff;
  background: linear-gradient(90deg, #6d28d9, #9333ea); box-shadow: 0 .4rem 1.2rem rgba(109, 40, 217, .4); white-space: nowrap; max-width: 96vw; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }

/* Groups: chats between the company's people, Zero in them (more.js groupsTab, 2026-10-17) */
.grp-wrap { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: .8rem; align-items: start; }
.grp-side { display: flex; flex-direction: column; gap: .6rem; }
.grp-list { display: flex; flex-direction: column; gap: .35rem; max-height: 60vh; overflow: auto; }
.grp-item { position: relative; display: flex; flex-direction: column; gap: .15rem; text-align: start; padding: .55rem .7rem; border-radius: .6rem; border: 1px solid var(--line2); background: var(--panel); color: var(--text); }
.grp-item.on { border-color: var(--line3); background: rgba(25, 184, 255, .1); }
.grp-item small { opacity: .7; font-size: .82rem; }
.grp-badge { position: absolute; inset-inline-end: .5rem; top: .5rem; min-width: 1.3rem; height: 1.3rem; border-radius: 1rem; background: var(--cyan); color: #021018; font-size: .75rem; font-weight: 700; display: grid; place-items: center; padding: 0 .3rem; }
.grp-chat { display: flex; flex-direction: column; min-height: 62vh; border: 1px solid var(--line2); border-radius: .9rem; background: var(--panel); overflow: hidden; }
.grp-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line2); flex-wrap: wrap; }
.grp-head small { display: block; opacity: .7; font-size: .82rem; }
.grp-msgs { flex: 1; overflow: auto; padding: .8rem; display: flex; flex-direction: column; gap: .45rem; max-height: 60vh; }
.grp-msg { max-width: 78%; align-self: flex-start; padding: .45rem .7rem; border-radius: .8rem .8rem .8rem .2rem; background: rgba(70, 103, 125, .25); }
.grp-msg.me { align-self: flex-end; background: rgba(25, 184, 255, .18); border-radius: .8rem .8rem .2rem .8rem; }
.grp-msg.zero { background: linear-gradient(135deg, rgba(155, 123, 255, .22), rgba(25, 184, 255, .16)); border: 1px solid rgba(155, 123, 255, .35); }
.grp-msg p { margin: .1rem 0; white-space: pre-wrap; word-break: break-word; }
.grp-from { color: var(--cyan2); font-weight: 600; font-size: .8rem; }
.grp-msg.zero .grp-from::before { content: 'Z · '; }
.grp-t { display: block; opacity: .55; font-size: .7rem; text-align: end; }
.grp-sys { align-self: center; font-size: .78rem; opacity: .65; padding: .15rem .6rem; border-radius: 1rem; background: rgba(70, 103, 125, .2); }
.grp-file { display: inline-flex; align-items: center; gap: .35rem; margin-top: .2rem; padding: .3rem .6rem; border-radius: .5rem; border: 1px solid var(--line2); color: var(--text); font-size: .85rem; }
.grp-file svg, .grp-compose svg { width: 1rem; height: 1rem; }
.grp-compose { display: flex; gap: .45rem; align-items: flex-end; padding: .6rem; border-top: 1px solid var(--line2); }
.grp-compose textarea { flex: 1; resize: none; max-height: 8rem; }
.grp-dlg { position: fixed; inset: 0; z-index: 900; background: rgba(0, 0, 0, .55); display: grid; place-items: center; padding: 1rem; }
.grp-dlg .box { width: min(28rem, 100%); max-height: 85vh; display: flex; flex-direction: column; gap: .6rem; overflow: auto; }
.grp-pick { display: flex; flex-direction: column; gap: .3rem; max-height: 45vh; overflow: auto; }
.grp-pick label { display: flex; gap: .5rem; align-items: center; padding: .3rem .4rem; border-radius: .4rem; }
@media (max-width: 760px) { .grp-wrap { grid-template-columns: 1fr; } .grp-list { max-height: 30vh; } .grp-msg { max-width: 90%; } }
/* install as an app (PWA) */
.pwa-bar { position: fixed; inset-inline: 1rem; bottom: 1rem; z-index: 950; display: flex; gap: .7rem; align-items: center; padding: .7rem .9rem; border-radius: .9rem; background: var(--panel); border: 1px solid var(--line3); box-shadow: 0 1rem 3rem rgba(0,0,0,.5); }
.pwa-bar b { flex: 1; font-size: .92rem; }

/* «زيرو كونكت» (connect.php on Zero Admin, in a frame): hidden until it rings, a call runs or the user opens it */
#zc-frame { position: fixed; border: 0; z-index: 9000; background: transparent; color-scheme: dark; }
#zc-frame.hidden { width: 1px; height: 1px; left: 0; bottom: 0; opacity: 0; pointer-events: none; }
#zc-frame.full { inset: 0; width: 100%; height: 100%; }
#zc-frame.pill { left: 12px; bottom: calc(12px + var(--safe-b)); width: min(360px, calc(100vw - 24px)); height: 84px; }
.zc-dot { min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; font-size: .66rem; line-height: 1.05rem; text-align: center; top: .1rem; right: .1rem; }
#zc-btn.ringing { animation: zcRing 1s infinite; box-shadow: 0 0 0 .2rem rgba(39, 224, 138, .5); }
@keyframes zcRing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }

/* «زيرو للإدارة» tab (more.js manageTab) */
.mpane .tbl{width:100%;border-collapse:collapse;font-size:.85rem}
.mpane .tbl th,.mpane .tbl td{padding:.45rem .55rem;border-bottom:1px solid var(--line,rgba(120,160,200,.18));text-align:start;vertical-align:top}
.mpane .tbl th{opacity:.7;font-weight:600;position:sticky;top:0;background:var(--panel,#0b1622)}

/* «وضع السيارة» (app.js CarMode) */
.car-ov{position:fixed;inset:0;z-index:9999;background:#000;color:#e8f6ff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5vh;padding:4vh 16px;direction:rtl}
.car-top{font-size:1.2rem;opacity:.7}
.car-mic{width:min(70vw,52vh);height:min(70vw,52vh);border-radius:50%;border:4px solid #1de3c4;background:radial-gradient(circle,#0b2a33,#000 70%);color:#1de3c4;display:grid;place-items:center;cursor:pointer}
.car-mic svg{width:34%;height:34%}
.car-mic.live{border-color:#27e08a;box-shadow:0 0 60px rgba(39,224,138,.45)}
.car-state{font-size:1.6rem;font-weight:700;text-align:center}
.car-exit{font-size:1.4rem;padding:.9rem 3rem;border-radius:999px;border:2px solid #ff6b6b;background:transparent;color:#ff8a8a;cursor:pointer}
.car-auto{opacity:.7;display:flex;gap:.5rem;align-items:center}
/* ntf — «مركز الإشعارات» (notify.js) */
.ntf { direction: rtl; max-width: 64rem; width: 100%; margin: 0 auto; padding-bottom: calc(1.5rem + var(--safe-b)); }
.ntf svg { width: 1rem; height: 1rem; flex: none; }
.ntf .switch { direction: ltr; }
.ntf-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.ntf-ttl { display: flex; align-items: center; gap: .7rem; }
.ntf-ttl > svg { width: 2rem; height: 2rem; color: var(--cyan2); filter: drop-shadow(0 0 .5rem rgba(25, 184, 255, .45)); }
.ntf-ttl h2 { margin: 0; font: 700 1.5rem var(--f-title); color: var(--ice); }
.ntf-ttl p { margin: .1rem 0 0; color: var(--dim); font-size: .9rem; }
.ntf-plats { display: flex; gap: .35rem; flex-wrap: wrap; }
.ntf-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 99px; border: 1px solid var(--line2); color: var(--text); font-size: .85rem; background: rgba(25, 184, 255, .05); }
.ntf-chip.here { border-color: var(--teal); color: var(--ice); background: rgba(29, 227, 196, .12); }
.ntf-chip em { font-style: normal; font-size: .72rem; color: var(--teal); }
.ntf-row { display: flex; align-items: center; gap: .9rem; padding: .35rem 0; border-top: 1px solid rgba(25, 184, 255, .1); }
.ntf-row:first-of-type { border-top: 0; }
.ntf-row.here { background: rgba(29, 227, 196, .06); border-radius: .4rem; padding-inline: .5rem; }
.ntf-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.ntf-txt b { color: var(--ice); font-size: 1rem; }
.ntf-txt small, .ntf-txt p { color: var(--dim); font-size: .85rem; margin: 0; line-height: 1.55; }
.ntf-qnow { color: var(--amber) !important; }
.ntf-times { display: flex; gap: .5rem; align-items: center; }
.ntf-times label { display: inline-flex; align-items: center; gap: .3rem; color: var(--dim); font-size: .85rem; }
.ntf-times input { direction: ltr; background: rgba(2, 11, 20, .7); border: 1px solid var(--line2); border-radius: .4rem; color: var(--ice); padding: .25rem .4rem; }
.ntf-times input:disabled { opacity: .45; }
.ntf-tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ntf-search { flex: 1; min-width: 12rem; display: flex; align-items: center; gap: .45rem; border: 1px solid var(--line2); border-radius: .5rem; padding: 0 .65rem; background: rgba(2, 11, 20, .6); color: var(--dim); }
.ntf-q { flex: 1; min-width: 0; height: 2.2rem; background: transparent; border: 0; color: var(--ice); outline: 0; }
.ntf-list { display: flex; flex-direction: column; gap: .55rem; }
.ntf-list.muted-all .ntf-group { opacity: .55; }
.ntf-group { border: 1px solid var(--line2); border-radius: .6rem; background: rgba(8, 31, 50, .5); overflow: hidden; }
.ntf-group.open { border-color: var(--line); }
.ntf-ghead { display: flex; align-items: center; gap: .55rem; padding: .6rem .85rem; cursor: pointer; user-select: none; }
.ntf-ghead > svg:first-child { color: var(--cyan2); width: 1.2rem; height: 1.2rem; }
.ntf-ghead b { color: var(--ice); font: 700 1.05rem var(--f-title); }
.ntf-ghead .grow { flex: 1; }
.ntf-ghead > svg:last-child { transition: transform .2s; color: var(--dim); }
.ntf-group.open .ntf-ghead > svg:last-child { transform: rotate(180deg); }
.ntf-count { color: var(--dim); font-size: .8rem; }
.ntf-gbody { display: flex; flex-direction: column; padding: 0 .85rem .5rem; }
.ntf-type { display: flex; gap: .9rem; align-items: flex-start; padding: .65rem 0; border-top: 1px solid rgba(25, 184, 255, .1); }
.ntf-type.off .ntf-txt > b { color: var(--dim); }
.ntf-type > .switch { margin-top: .2rem; }
.ntf-when { display: inline-flex; align-items: center; gap: .3rem; color: var(--cyan2) !important; font-size: .8rem !important; }
.ntf-when svg { width: .85rem; height: .85rem; }
.ntf-pfs { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .3rem; }
.ntf-pf { display: inline-flex; align-items: center; gap: .3rem; height: 1.75rem; padding: 0 .6rem; border-radius: 99px; border: 1px solid var(--line2); color: var(--dim); font-size: .8rem; background: transparent; text-decoration: line-through; text-decoration-color: rgba(255, 59, 79, .6); }
.ntf-pf[aria-pressed="true"] { color: var(--ice); border-color: var(--cyan); background: rgba(25, 184, 255, .14); text-decoration: none; }
.ntf-pf.here { box-shadow: 0 0 0 1px var(--teal) inset; }
.ntf-pf:disabled { opacity: .5; cursor: default; }
.ntf-pf svg { width: .85rem; height: .85rem; }
.ntf-note.masar { border-color: rgba(255, 176, 32, .55); background: rgba(255, 176, 32, .07); }
.ntf-note.masar h3 svg { color: var(--amber); }
.ntf-note p, .ntf-hint { margin: 0; color: var(--text); line-height: 1.6; }
@media (max-width: 640px) {
  .ntf-quiet { flex-wrap: wrap; }
  .ntf-times { order: 3; width: 100%; }
  .ntf-type { gap: .6rem; }
  .ntf-ghead .btn { display: none; }
  .ntf-group.open .ntf-ghead .btn { display: inline-flex; }
}
/* /ntf */
/* «المقاطعة وزيرو بيحكي» settings pane (more.js bargePane, round 57b) */
.brg-item { padding: .35rem 0 .55rem; border-bottom: 1px solid rgba(124, 140, 255, .1); min-width: 0; }
.brg-item:last-child { border-bottom: 0; }
.brg-item.ro .setting b { color: var(--dim); }
.brg-item .setting select, .brg-item .setting input:not(.brg-num) { max-width: 15rem; }
.brg-num { width: 6rem; }
.brg-tag { display: inline-block !important; margin-top: .2rem; padding: 0 .45rem; border-radius: 999px; font-size: .74rem !important; border: 1px solid var(--line2); color: var(--cyan2) !important; }
.brg-tag.own { border-color: rgba(39, 224, 138, .45); color: var(--green) !important; }
.brg-tag.lock { border-color: rgba(255, 176, 32, .4); color: #ffd98a !important; }
.brg-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0; }
.brg-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .6rem; border-radius: 999px; border: 1px solid var(--line2); font-size: .82rem; background: rgba(25, 184, 255, .05); white-space: nowrap; }
.brg-chip button { border: 0; background: none; color: var(--dim); cursor: pointer; padding: 0 0 0 .1rem; font-size: .8rem; }
.brg-chip button:hover { color: #ff8595; }
.brg-extra { margin-top: .3rem; gap: .6rem; flex-wrap: wrap; }
.brg-may { display: inline-flex; align-items: center; gap: .45rem; }
.brg-may small { color: var(--dim); font-size: .78rem; }
.brg-admin { flex: none; padding: .1rem .6rem; border-radius: 999px; font-size: .75rem; border: 1px solid rgba(255, 176, 32, .5); color: #ffd98a; }
.brg-verdict { margin-top: .5rem; padding: .5rem .7rem; border-radius: .45rem; border: 1px solid var(--line2); }
.brg-verdict b { display: block; } .brg-verdict small { color: var(--dim); }
.brg-verdict.go { border-color: rgba(25, 184, 255, .45); } .brg-verdict.stop { border-color: rgba(39, 224, 138, .5); }
@media (max-width: 560px) { .brg-item .setting { flex-wrap: wrap; } .brg-item .setting select, .brg-item .setting input:not(.brg-num) { max-width: 100%; width: 100%; } }

/* «خصوصيتي» (2026-11-11) */
.prv-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0}
.prv-stats span{display:flex;flex-direction:column;align-items:center;padding:10px 6px;border-radius:12px;background:rgba(46,230,166,.08);border:1px solid rgba(46,230,166,.22)}
.prv-stats b{font-size:20px}
.prv-stats small{opacity:.75;font-size:12px;text-align:center}
@media (max-width:560px){.prv-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}