/* Tectomight: basalt, bone and one ember accent, the same tokens as tectomight.com */
/* Self-hosted: the gateway's CSP is style-src 'self', so Google Fonts never loads here. Latin only; Hebrew and Cyrillic fall through to the system face. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/bricolage-grotesque-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap; src: url(/static/fonts/bricolage-grotesque-800.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/inter-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/inter-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/inter-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --bg: #0f0e0c;            /* app background */
  --header: #171512;        /* top bar / panels */
  --panel: #171512;
  --panel2: #201d18;
  --border: #0a0908;
  --border-soft: #3a352d;
  --text: #f3eee4;
  --muted: #a69e8f;
  --accent: #ff7a45;
  --link: #ff9a6c;
  --out: #4a2415;           /* outgoing bubble */
  --out-deep: #3d1d10;
  --in: #1f1c18;            /* incoming bubble */
  --good: #4fae4e;
  --bad: #e05252;
  --warning: #f2b84b;
  --violet: #e0a458;
  --cyan: #ffb27a;
  --panel-glass: rgba(23,21,18,.88);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, .34);
  --chip: rgba(0, 0, 0, .35);
  font-size: 16px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Heebo", -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", "Heebo", -apple-system, "Segoe UI", sans-serif;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.hidden { display: none !important; }
button { font-family: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
button, input, textarea, select { font: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* ---- no zoom on mobile -------------------------------------------------- */
/* The viewport meta stops pinch on Android; touch-action kills double-tap
   zoom; the 16px floor stops iOS auto-zooming the page when a field takes
   focus (iOS ignores user-scalable=no, it only obeys the font size).
   Pinch on iOS is blocked by the gesture* handler in app.js. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (pointer: coarse) {
  html, body { touch-action: manipulation; }
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select { font-size: max(16px, 1em) !important; }
}

/* ---------- gate ---------- */
.gate {
  position: fixed; inset: 0; display: flex;
  /* Not align-items/justify-content: a centred flex item that outgrows its
     container spills past BOTH edges, and the top half lands where no scroll
     can reach it. A phone on large display zoom plus large system text is
     exactly that case, and it cut the headline off the top and the sign-in
     button off the bottom. Auto margins centre the same way and collapse to 0
     when the space runs out, so the overflow stays scrollable. */
  align-items: flex-start; justify-content: flex-start;
  background:
    radial-gradient(900px 520px at 50% -16%, rgba(196,96,53, .26), transparent 68%),
    linear-gradient(160deg, #1b0d07 0%, #13110d 52%, #110f0b 100%);
  z-index: 50; overflow-y: auto; overflow-x: hidden;
  padding: clamp(12px, 4vw, 24px);
  padding-bottom: calc(clamp(12px, 4vw, 24px) + env(safe-area-inset-bottom));
}
/* The sign-in card is hidden until the server has actually said something.
   Painting it while the session is still being checked is the whole reported
   glitch: the app looked like it had logged the user out and then logged
   itself back in. Everyone gets the brand background for that one round trip,
   signed in or not, so the flash cannot come back on a device with no history
   to read: a fresh install, cleared storage, private mode, a new build.
   gateFail() is the only thing that reveals the card. */
.gate-card { visibility: hidden; }
html.gate-ready .gate-card { visibility: visible; }

.gate::before {
  content: ""; position: absolute; inset: 0; opacity: .18; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}
.gate-glow { position: fixed; border-radius: 999px; filter: blur(1px); pointer-events: none; }
.gate-glow-one { width: 420px; height: 420px; inset-inline-start: -260px; top: 18%; background: rgba(255,140,90,.075); }
.gate-glow-two { width: 360px; height: 360px; inset-inline-end: -220px; bottom: -120px; background: rgba(244,188,116,.07); }
.gate-card {
  position: relative; width: min(94vw, 480px); margin: auto; flex: 0 0 auto;
  padding: 26px 30px 28px; text-align: start;
  border: 1px solid rgba(255,255,255,.10); border-radius: 26px;
  background: linear-gradient(160deg, rgba(38,34,26,.96), rgba(29,16,10,.97));
  box-shadow: 0 40px 110px rgba(0,0,0,.54), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(22px) saturate(130%);
}
.gate-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 27px; }
.gate-security { display: inline-flex; align-items: center; gap: 8px; color: #a29b8f; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.gate-security-dot { width: 7px; height: 7px; border-radius: 50%; background: #56d6a7; box-shadow: 0 0 0 5px rgba(86,214,167,.09); }
.gate-language {
  min-height: 34px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  padding: 0 10px; color: #cdc8c0; background: rgba(255,255,255,.035); font-size: 12px;
}
.gate-brand { display: flex; align-items: center; gap: 15px; min-width: 0; }
.gate-logo {
  width: 62px; height: 62px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--border-soft);
  box-shadow: 0 14px 34px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.06);
}
.gate-logo svg { width: 36px; height: 36px; }
.gate-kicker { display: block; color: #ff9c72; font-size: 9.5px; font-weight: 800; letter-spacing: .16em; direction: ltr; text-align: start; margin-bottom: 4px; }
.gate-card h1 {
  font-family: var(--display); font-size: clamp(22px, 7vw, 30px); line-height: 1.04; font-weight: 800; letter-spacing: -.035em;
  /* one long word on a narrow screen has to break, or it walks out of frame */
  min-width: 0; overflow-wrap: anywhere;
}
.gate-intro { color: #b3ada3; font-size: 14px; line-height: 1.6; margin: 18px 0 15px; }
.gate-status {
  min-height: 42px; display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px;
  border: 1px solid rgba(255,162,122,.10); border-radius: 12px; background: rgba(255,162,122,.045);
}
.gate-status-icon { width: 7px; height: 7px; flex: 0 0 auto; margin-top: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(255,162,122,.09); }
.gate-status p { color: #bab3a8; font-size: 12.5px; line-height: 1.5; }
#gate-login { margin-top: 19px; display: flex; flex-direction: column; gap: 8px; }
#gate-login > label { color: #cbc7bf; font-size: 11.5px; font-weight: 650; margin-top: 4px; }
.gate-field {
  min-height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(21,10,6,.55);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.gate-field:focus-within { border-color: rgba(255,162,122,.55); background: rgba(29,15,9,.78); box-shadow: 0 0 0 4px rgba(255,162,122,.07); }
.gate-field > svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: #817a6e; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#gate-login input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; padding: 13px 0; font-size: 15px; direction: ltr; text-align: start; }
#gate-login input::placeholder { color: #746d62; }
.gate-pass-toggle { width: 34px; height: 34px; flex: 0 0 auto; border: 0; border-radius: 9px; display: grid; place-items: center; color: #8f887c; background: transparent; cursor: pointer; }
.gate-pass-toggle:hover { color: #cfcac2; background: rgba(255,255,255,.045); }
.gate-pass-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gate-submit {
  min-height: 51px; margin-top: 10px; border: 0; border-radius: 13px; display: flex; align-items: center;
  justify-content: center; gap: 10px; color: #fff; background: linear-gradient(115deg, #f57a45, #e97847 68%, #e0865f);
  box-shadow: 0 13px 30px rgba(218,100,50,.24); font-size: 14px; font-weight: 750; cursor: pointer;
  transition: transform .16s, filter .16s, box-shadow .16s;
}
.gate-submit:hover { filter: brightness(1.08); box-shadow: 0 16px 34px rgba(218,100,50,.31); }
.gate-submit:active { transform: translateY(1px); }
.gate-submit:disabled { opacity: .62; cursor: wait; }
.gate-submit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; direction: ltr; }
.gate-footnote { display: flex; align-items: center; justify-content: center; gap: 8px; color: #817a6f; font-size: 10.5px; line-height: 1.45; margin-top: 20px; text-align: center; }
.gate-footnote svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: #968d7f; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Short screen, or a phone whose system text is set large (measured in
   index.html, since CSS cannot ask). Both leave the sign-in card taller than
   the screen. It scrolls either way now, but an older user should not have to
   discover that to find the button, so the card gives up its decoration
   first. */
@media (max-height: 700px) {
  .gate-card { padding: 18px 18px 20px; }
  .gate-toolbar { margin-bottom: 14px; }
  .gate-logo { width: 46px; height: 46px; border-radius: 14px; }
  .gate-logo svg { width: 26px; height: 26px; }
  .gate-intro { margin: 12px 0 10px; }
  .gate-footnote { display: none; }
}
[data-os-text="big"] .gate-card { padding: 18px 18px 20px; }
[data-os-text="big"] .gate-toolbar { margin-bottom: 14px; }
[data-os-text="big"] .gate-logo { width: 46px; height: 46px; border-radius: 14px; }
[data-os-text="big"] .gate-logo svg { width: 26px; height: 26px; }
[data-os-text="big"] .gate-intro { margin: 12px 0 10px; }
[data-os-text="big"] .gate-footnote { display: none; }
/* At this size the tagline is what stands between an older reader and the
   sign-in button. The instruction box stays: that one is load-bearing. */
[data-os-text="big"] .gate-intro { display: none; }
/* The wordmark is the one thing here that should shrink rather than break:
   at 150% system text it was splitting across two lines mid-word. Every
   label, field and button keeps the reader's own size. */
[data-os-text="big"] .gate-card h1 { font-size: clamp(18px, 5.6vw, 23px); }

@media (max-width: 520px) {
  .gate { padding: 14px; }
  .gate-card { width: 100%; padding: 22px 20px 23px; border-radius: 22px; }
  .gate-toolbar { margin-bottom: 23px; }
  .gate-logo { width: 56px; height: 56px; border-radius: 17px; }
  .gate-card h1 { font-size: clamp(21px, 7vw, 25px); }
}

/* ---------- shell ---------- */
.app { display: flex; flex-direction: column; height: 100dvh; }
.topbar {
  display: flex; align-items: center; gap: 12px;
  min-height: 68px; padding: 10px clamp(14px, 2.4vw, 34px);
  background: rgba(24,21,16, .88); backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  position: sticky; top: 0; z-index: 10;
}
.brand-lockup, .top-actions { display: flex; align-items: center; gap: 11px; }
.brand-lockup { flex: 0 0 auto; }
.avatar {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--border-soft);
  color: #fff; user-select: none;
}
.avatar svg { width: 24px; height: 24px; display: block; }
.peer { display: flex; flex-direction: column; min-width: 0; }
.peer-name { font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.25; letter-spacing: -.01em; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; }
.peer-status { font-size: 12.5px; color: var(--accent); line-height: 1.2; }
.peer-status.offline { color: var(--muted); }
/* main navigation lives in the hamburger drawer at every width */
.nav-toggle { position: relative; flex: 0 0 auto; }
.nav-toggle .tab-badge { position: absolute; top: -5px; inset-inline-end: -5px; }
.nav-scrim {
  position: fixed; inset: 0; z-index: 30; background: rgba(14,7,4, .62);
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.nav-scrim.open { opacity: 1; pointer-events: auto; }
.nav-drawer {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40;
  width: min(304px, 84vw); display: flex; flex-direction: column;
  padding: 12px 12px calc(14px + env(safe-area-inset-bottom));
  background: rgba(24,21,16, .98); backdrop-filter: blur(20px) saturate(150%);
  border-inline-end: 1px solid var(--border);
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-102%); transition: transform .22s ease;
}
[dir="rtl"] .nav-drawer { transform: translateX(102%); }
.nav-drawer.open { transform: none; }
.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 12px; }
.nav-drawer-title { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
/* flex: 0 0 auto matters. The drawer is a scrolling flex column, so by default
   this list shrinks below its own content and the last tabs get clipped where
   no scroll can reach them: a short viewport plus one tab too many made the
   bottom of the menu unreachable. Refusing to shrink hands the overflow to the
   drawer, which knows how to scroll it. */
.tabs { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.tab {
  background: transparent; border: 0; color: var(--muted); width: 100%;
  border-radius: 11px; padding: 11px 12px; font-size: 14.5px; cursor: pointer;
  display: flex; align-items: center; gap: 11px; text-align: start;
  transition: background .15s, color .15s, transform .15s;
}
.tab > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.nav-drawer .top-actions { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.nav-drawer .language-select { flex: 1 1 auto; min-width: 0; padding: 9px 8px; }
.tab:hover { background: rgba(255,255,255,.05); }
.tab:active { transform: translateY(1px); }
.tab.active { color: #ffe6dc; background: rgba(255,162,122,.14); box-shadow: inset 0 0 0 1px rgba(255,162,122,.12); }
.tab-icon { width: 20px; height: 20px; display: inline-grid; place-items: center; line-height: 1; opacity: .9; }
.ui-icon {
  width: 20px; height: 20px; display: block; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.top-actions { flex: 0 0 auto; }
.icon-btn {
  width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.07);
  border-radius: 11px; background: rgba(255,255,255,.035); color: var(--muted);
  cursor: pointer; display: inline-grid; place-items: center; font-size: 16px;
  transition: color .15s, background .15s, border-color .15s;
}
.icon-btn .ui-icon { width: 18px; height: 18px; }
.icon-btn:hover { color: var(--text); border-color: rgba(255,162,122,.35); background: rgba(255,162,122,.08); }

.offline-banner {
  position: relative; z-index: 3; flex-shrink: 0;
  background: #3a2a12; color: #ffcf8a; text-align: center;
  font-size: 13px; padding: 7px 12px; border-bottom: 1px solid #57401d;
}

.view { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ---------- executive command center ---------- */
.dashboard-view {
  overflow-y: auto; overflow-x: hidden;
  background:
    radial-gradient(900px 520px at 88% -10%, rgba(255,119,61, .16), transparent 64%),
    radial-gradient(760px 520px at 4% 34%, rgba(242,181,101, .10), transparent 68%),
    linear-gradient(180deg, #190e09 0%, #13110d 55%, #110f0c 100%);
}
.dashboard-view::before {
  content: ""; position: fixed; inset: 68px 0 0; pointer-events: none; opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}
.dashboard-shell {
  width: min(100%, 1280px); margin: 0 auto; padding: 38px clamp(20px, 3.2vw, 42px) 68px;
  position: relative; z-index: 1;
}
.command-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 28px;
  margin-bottom: 24px;
}
.eyebrow, .section-kicker {
  color: var(--accent); font-size: 10.5px; line-height: 1.3; font-weight: 800;
  letter-spacing: .16em; direction: ltr; text-align: start;
}
.command-head h1 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.02; letter-spacing: -.035em; margin: 8px 0 10px; }
.command-sub { color: #c0bbb3; font-size: 15px; line-height: 1.55; max-width: 620px; }
.dashboard-controls {
  display: flex; align-items: center; gap: 8px; padding: 6px;
  background: rgba(33,29,23,.78); border: 1px solid rgba(255,255,255,.075);
  border-radius: 13px; box-shadow: 0 12px 32px rgba(0,0,0,.22); white-space: nowrap;
}
.dashboard-controls label { color: var(--muted); font-size: 12px; padding-inline-start: 6px; }
.dashboard-controls select, .refresh-btn {
  border: 0; border-radius: 9px; min-height: 36px; padding: 0 11px;
  background: #302b22; color: var(--text); font-size: 12.5px;
}
.dashboard-controls select { cursor: pointer; }
.refresh-btn { color: #ffe7dd; background: rgba(255,162,122,.14); cursor: pointer; font-weight: 650; }
.refresh-btn:hover { background: rgba(255,162,122,.22); }
.refresh-btn:disabled { opacity: .58; cursor: wait; }
.dashboard-error {
  margin-bottom: 18px; padding: 12px 15px; border: 1px solid rgba(242,184,75,.35);
  border-radius: 12px; color: #ffd996; background: rgba(242,184,75,.08); font-size: 13px;
}
.pulse-panel, .dash-card, .kpi-card {
  border: 1px solid rgba(255,255,255,.072); background: var(--panel-glass);
  box-shadow: 0 18px 50px rgba(0,0,0,.20); backdrop-filter: blur(16px);
}
.pulse-panel {
  display: grid; grid-template-columns: auto minmax(220px, .72fr) minmax(400px, 1.35fr);
  align-items: center; gap: clamp(20px, 3vw, 38px); padding: clamp(22px, 2.8vw, 34px);
  border-radius: 24px; overflow: hidden; position: relative;
  background:
    radial-gradient(500px 240px at 12% 18%, rgba(80,216,255,.09), transparent 75%),
    linear-gradient(135deg, rgba(38,34,26,.96), rgba(28,25,19,.94));
}
.pulse-panel::after {
  content: ""; position: absolute; width: 310px; height: 310px; inset-inline-end: -180px; top: -180px;
  border: 1px solid rgba(255,162,122,.10); border-radius: 50%; box-shadow: 0 0 0 54px rgba(255,162,122,.025);
}
.pulse-ring {
  --ring-color: var(--accent); width: 138px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; position: relative; isolation: isolate;
  background: conic-gradient(var(--ring-color) calc(var(--score) * 1%), rgba(255,255,255,.075) 0);
  box-shadow: 0 0 42px rgba(80,216,255,.12);
}
.pulse-ring::before { content: ""; position: absolute; inset: 9px; z-index: -1; border-radius: inherit; background: #221e17; box-shadow: inset 0 0 24px rgba(0,0,0,.35); }
.pulse-ring[data-status="strong"] { --ring-color: #54ddab; }
.pulse-ring[data-status="stable"] { --ring-color: var(--accent); }
.pulse-ring[data-status="attention"] { --ring-color: var(--warning); }
.pulse-ring[data-status="critical"] { --ring-color: #ff727b; }
.pulse-ring span { display: block; font-size: 39px; line-height: 1; font-weight: 780; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.pulse-ring small { position: absolute; bottom: 30px; color: var(--muted); font-size: 10px; }
.pulse-copy { min-width: 0; }
.pulse-copy h2 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.12; margin: 7px 0 8px; letter-spacing: -.025em; }
.pulse-copy > p:not(.section-kicker) { color: #c4c0b8; font-size: 13.5px; line-height: 1.55; }
.updated-at { display: inline-block; margin-top: 12px; color: #8f887d; font-size: 11.5px; direction: rtl; }
.pulse-components { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.pulse-component {
  min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 10px 11px; border: 1px solid rgba(255,255,255,.05); border-radius: 11px;
  background: rgba(255,255,255,.025); color: #cec9c1; font-size: 12px;
}
.pulse-component span:not(.health-dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-component strong { color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }
.health-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 4px rgba(242,184,75,.10); }
.health-dot.strong { background: #54ddab; box-shadow: 0 0 0 4px rgba(84,221,171,.10); }
.health-dot.stable { background: var(--accent); box-shadow: 0 0 0 4px rgba(255,162,122,.10); }
.health-dot.critical { background: #ff727b; box-shadow: 0 0 0 4px rgba(255,114,123,.10); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin: 14px 0; }
.kpi-card { min-width: 0; min-height: 138px; padding: 18px; border-radius: 17px; display: flex; flex-direction: column; }
.kpi-label { color: #ada79d; font-size: 12px; }
.kpi-value { margin: 10px 0 12px; font-size: clamp(27px, 2.6vw, 38px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.kpi-footer { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; color: #918a7f; font-size: 10.5px; line-height: 1.35; }
.kpi-delta { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; direction: ltr; }
.kpi-delta.up { color: #79e8bd; background: rgba(84,221,171,.09); }
.kpi-delta.down { color: #ff9ca3; background: rgba(255,114,123,.09); }
.kpi-delta.steady { color: #c9c5bd; background: rgba(255,255,255,.05); }
.skeleton-card { overflow: hidden; position: relative; }
.skeleton-card::after { content: ""; position: absolute; inset: 0; transform: translateX(100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent); animation: dashboard-shimmer 1.4s infinite; }
@keyframes dashboard-shimmer { to { transform: translateX(-100%); } }
.dashboard-grid { display: grid; gap: 14px; margin-top: 14px; }
.capabilities-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.continuity-panel { margin-bottom: 24px; border: 1px solid var(--border-soft); }
.continuity-panel .card-heading { flex-wrap: wrap; }
.continuity-panel .refresh-btn { margin-top: 14px; min-height: 44px; }
.continuity-tasks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.continuity-tasks li { display: flex; gap: 12px; padding: 9px 12px; background: var(--panel2); border-radius: 10px; font-size: 13px; }
.continuity-tasks span, .capability-note { color: var(--muted); }
.capability-note { margin-top: 12px; font-size: 14px; line-height: 1.6; }
.capabilities-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.capabilities-toolbar label { font-size: 14px; }
.capabilities-toolbar input { flex: 1; min-width: 180px; min-height: 44px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 12px; color: var(--text); font: inherit; }
.capabilities-toolbar > span { color: var(--muted); font-size: 13px; }
.capability-card { background: var(--panel); border: 1px solid var(--border-soft); }
.capability-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.capability-meta time { color: var(--muted); font-size: 12px; }
.capability-status { color: var(--muted); border: 1px solid var(--border-soft); padding: 4px 9px; border-radius: 20px; font-size: 12px; }
.capability-status.ready { color: #79e8bd; border-color: #315a46; }
.capability-card h2 { font-size: 21px; line-height: 1.35; }
.capability-card p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 12px 0; }
.capability-card details { margin-top: 14px; font-size: 14px; }
.capability-card summary { cursor: pointer; color: var(--link); padding: 10px 0; }
.capability-card .refresh-btn { margin-top: 14px; min-height: 44px; }
@media (max-width: 650px) { .capabilities-grid { grid-template-columns: minmax(0, 1fr); } .capabilities-toolbar input { flex-basis: 100%; order: 3; } }
.primary-grid { grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); }
.secondary-grid { grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); }
.dash-card { min-width: 0; padding: 21px; border-radius: 19px; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.card-heading h2 { font-size: 20px; margin-top: 4px; letter-spacing: -.015em; }
.trend-pill { color: #cdc9c1; background: rgba(255,255,255,.05); border-radius: 999px; padding: 6px 9px; font-size: 10.5px; white-space: nowrap; }
.trend-pill.up { color: #79e8bd; background: rgba(84,221,171,.09); }
.trend-pill.down { color: #ff9ca3; background: rgba(255,114,123,.09); }
/* results counter (job meter) */
.meter-card { margin-bottom: 19px; }
.meter-top { display: grid; gap: 11px; }
.meter-figure { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.meter-figure strong { font-size: 38px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.meter-of { color: #a9a49a; font-size: 13px; }
.meter-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.meter-fill { display: block; height: 100%; border-radius: 999px; background: #54ddab; transition: width .4s ease; }
.meter-fill[data-state="warn"] { background: #f0c274; }
.meter-fill[data-state="over"] { background: #ff9f6b; }
.meter-fill[data-state="stopped"] { background: #ff727b; }
.trend-pill[data-state="warn"] { color: #f0c274; background: rgba(240,194,116,.1); }
.trend-pill[data-state="over"] { color: #ff9f6b; background: rgba(255,159,107,.1); }
.trend-pill[data-state="stopped"] { color: #ff727b; background: rgba(255,114,123,.1); }
.meter-classes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 17px 0 4px; }
.meter-class { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,.04); font-size: 12.5px; color: #cdc9c1; }
.meter-class strong { color: #f8eeea; font-variant-numeric: tabular-nums; }
.meter-ledger { margin-top: 15px; }
.meter-units { max-height: 292px; overflow-y: auto; display: grid; gap: 2px; margin-top: 9px; }
.meter-unit { display: grid; grid-template-columns: 86px minmax(0, 1fr) 34px 86px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 12px; }
.meter-unit:nth-child(odd) { background: rgba(255,255,255,.03); }
.meter-unit time { color: #928b80; font-variant-numeric: tabular-nums; font-size: 11px; }
.meter-unit-what { color: #f8eeea; grid-column: 2; }
.meter-unit-why { color: #928b80; grid-column: 2; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meter-unit-weight { color: #54ddab; text-align: center; font-variant-numeric: tabular-nums; }
.meter-unit-receipt { color: #928b80; font-size: 10.5px; direction: ltr; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .meter-unit { grid-template-columns: 1fr auto; row-gap: 2px; }
  .meter-unit time { grid-column: 1; }
  .meter-unit-weight { grid-column: 2; grid-row: 1; }
  .meter-unit-what, .meter-unit-why { grid-column: 1 / -1; white-space: normal; }
  .meter-unit-receipt { grid-column: 1 / -1; }
  .meter-figure strong { font-size: 31px; }
}

.activity-chart { height: 214px; display: flex; align-items: stretch; gap: clamp(3px, .55vw, 8px); direction: ltr; overflow: hidden; }
.chart-column { min-width: 0; flex: 1 1 0; display: grid; grid-template-rows: 18px 1fr 18px; align-items: end; text-align: center; }
.chart-value { color: #928b80; font-size: 9px; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .15s; }
.chart-column:hover .chart-value { opacity: 1; }
.chart-rail { width: min(100%, 18px); height: 100%; margin: 0 auto; border-radius: 7px; background: rgba(255,255,255,.035); display: flex; align-items: flex-end; overflow: hidden; }
.chart-bar { width: 100%; min-height: 2px; border-radius: inherit; background: linear-gradient(180deg, var(--cyan), #ff8d5c); box-shadow: 0 0 14px rgba(80,216,255,.23); transition: height .45s cubic-bezier(.2,.8,.2,1); }
.chart-label { color: #837d72; font-size: 9px; white-space: nowrap; }
.chart-note { color: #aaa499; font-size: 11.5px; line-height: 1.55; margin-top: 12px; }
.insights-list { display: flex; flex-direction: column; gap: 9px; }
.insight-item { position: relative; padding: 13px 13px 12px; border: 1px solid rgba(255,255,255,.055); border-radius: 13px; background: rgba(255,255,255,.022); }
.insight-item.high { border-inline-start: 3px solid #ff727b; }
.insight-item.medium { border-inline-start: 3px solid var(--warning); }
.insight-item.low { border-inline-start: 3px solid var(--accent); }
.insight-item.positive { border-inline-start: 3px solid #54ddab; }
.insight-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.insight-rank { color: #7d766a; font-size: 10px; font-variant-numeric: tabular-nums; }
.insight-head h3 { min-width: 0; font-size: 13px; line-height: 1.35; }
.confidence { color: #938d82; font-size: 9.5px; white-space: nowrap; }
.insight-item p { color: #c0bbb2; font-size: 11.5px; line-height: 1.5; margin: 8px 0 5px; }
.insight-item small { color: #8b857a; font-size: 10px; line-height: 1.45; display: block; }
.insight-action { margin-top: 10px; border: 0; border-radius: 8px; padding: 7px 10px; color: #ffddcf; background: rgba(255,162,122,.11); font-size: 10.5px; cursor: pointer; }
.insight-action:hover { background: rgba(255,162,122,.19); }
.evolution-list, .system-list { display: flex; flex-direction: column; gap: 12px; }
.evolution-row { display: grid; gap: 6px; }
.evolution-top { display: flex; justify-content: space-between; gap: 12px; color: #d3cfc7; font-size: 11.5px; }
.evolution-top strong { color: var(--text); font-size: 11px; direction: ltr; }
.evolution-rail { height: 7px; border-radius: 999px; background: rgba(255,255,255,.055); overflow: hidden; }
.evolution-rail span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8d5c, var(--cyan)); }
.evolution-row small { color: #8b857a; font-size: 10px; }
.evolution-stats { margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.055); display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.evolution-stats > div { min-width: 0; }
.evolution-stats strong { display: block; font-size: 17px; direction: ltr; text-align: start; }
.evolution-stats span { display: block; color: #8f897e; font-size: 9.5px; line-height: 1.3; margin-top: 2px; }
.system-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid rgba(255,255,255,.05); }
.system-row:last-child { border-bottom: 0; padding-bottom: 0; }
.system-row > div { min-width: 0; }
.system-row strong, .system-row span { display: block; }
.system-row strong { font-size: 12px; color: #d6d2cb; }
.system-row span { color: #8d867b; font-size: 10px; margin-top: 3px; line-height: 1.4; overflow-wrap: anywhere; }
.system-row b { color: #f7e8e2; font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------- tasks ---------- */
.tasks-view {
  overflow-y: auto; overflow-x: hidden;
  background:
    radial-gradient(800px 440px at 85% -8%, rgba(255,128,74, .16), transparent 67%),
    radial-gradient(640px 460px at 4% 58%, rgba(244,136,89, .09), transparent 70%),
    linear-gradient(180deg, #1a0e09, #110f0c 74%);
}
.tasks-view::before {
  content: ""; position: fixed; inset: 68px 0 0; pointer-events: none; opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, black, transparent 74%);
}
.tasks-shell {
  width: min(100%, 1320px); margin: 0 auto;
  padding: 34px clamp(18px, 3vw, 40px) 62px; position: relative; z-index: 1;
}
.tasks-hero {
  min-height: 160px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 28px 30px; border: 1px solid rgba(255,255,255,.075); border-radius: 24px;
  background:
    radial-gradient(520px 220px at 100% 0%, rgba(255,128,74,.17), transparent 72%),
    linear-gradient(135deg, rgba(39,34,26,.96), rgba(28,25,19,.94));
  box-shadow: 0 22px 60px rgba(0,0,0,.23); overflow: hidden; position: relative;
}
.tasks-hero::after {
  content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%;
  inset-inline-end: -120px; top: -160px; border: 1px solid rgba(255,162,122,.11);
  box-shadow: 0 0 0 44px rgba(255,162,122,.025); pointer-events: none;
}
.tasks-hero > div { position: relative; z-index: 1; max-width: 740px; }
.tasks-hero h1 {
  margin: 7px 0 9px; font-size: clamp(31px, 4vw, 49px); line-height: 1.04;
  letter-spacing: -.04em;
}
.tasks-hero > div > p:last-child { color: #c0bbb2; font-size: 14px; line-height: 1.55; }
.tasks-refresh {
  min-height: 42px; display: inline-flex; align-items: center; gap: 8px; position: relative; z-index: 1;
  padding: 0 14px; border: 1px solid rgba(255,162,122,.22); border-radius: 11px;
  color: #ffe7dd; background: rgba(255,162,122,.10); font: inherit; font-size: 12px;
  font-weight: 700; cursor: pointer; white-space: nowrap;
}
.tasks-refresh:hover { background: rgba(255,162,122,.18); }
.tasks-refresh:disabled { opacity: .58; cursor: wait; }
.tasks-refresh .ui-icon { width: 17px; height: 17px; }
.tasks-error {
  margin-top: 12px; padding: 11px 14px; border: 1px solid rgba(255,114,123,.28);
  border-radius: 12px; color: #ffbcc1; background: rgba(255,114,123,.075); font-size: 12px;
}
.tasks-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin: 13px 0;
}
.task-stat {
  min-width: 0; min-height: 102px; padding: 16px 17px; border: 1px solid rgba(255,255,255,.068);
  border-radius: 16px; background: rgba(35,31,24,.86); box-shadow: 0 14px 38px rgba(0,0,0,.15);
}
.task-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.task-stat-label { color: #aca59a; font-size: 11.5px; }
.task-stat-dot { width: 8px; height: 8px; border-radius: 50%; background: #928c81; }
.task-stat-dot.active { background: #ff8b59; box-shadow: 0 0 12px rgba(255,139,89,.55); }
.task-stat-dot.completed { background: #57d9a7; box-shadow: 0 0 12px rgba(87,217,167,.36); }
.task-stat-dot.attention { background: #ffae62; box-shadow: 0 0 12px rgba(255,174,98,.36); }
.task-stat strong {
  display: block; margin-top: 12px; font-size: 30px; line-height: 1; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.tasks-board {
  min-height: 590px; display: grid; grid-template-columns: minmax(310px, .39fr) minmax(0, .61fr);
  border: 1px solid rgba(255,255,255,.072); border-radius: 20px; overflow: hidden;
  background: rgba(32,18,12,.86); box-shadow: 0 22px 60px rgba(0,0,0,.24);
}
.tasks-list-panel {
  min-width: 0; padding: 20px 0 0; border-inline-end: 1px solid rgba(255,255,255,.06);
  background: rgba(32,28,21,.72);
}
.tasks-list-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 0 18px 14px;
}
.tasks-list-head h2 { margin-top: 4px; font-size: 21px; }
.tasks-updated { color: #878175; font-size: 9.5px; direction: ltr; text-align: end; }
.tasks-filters {
  display: flex; gap: 5px; padding: 0 14px 12px; overflow-x: auto; scrollbar-width: none;
}
.tasks-filters::-webkit-scrollbar { display: none; }
.task-filter {
  flex: 0 0 auto; min-height: 30px; padding: 0 9px; border: 1px solid rgba(255,255,255,.055);
  border-radius: 999px; color: #a09a8e; background: rgba(255,255,255,.022);
  font: inherit; font-size: 9.5px; cursor: pointer;
}
.task-filter:hover { color: #dcd7ce; border-color: rgba(255,162,122,.22); }
.task-filter.active { color: #ffe6db; border-color: rgba(255,162,122,.26); background: rgba(255,162,122,.12); }
.tasks-search {
  height: 39px; display: flex; align-items: center; gap: 8px; margin: 0 14px 12px; padding: 0 11px;
  border: 1px solid rgba(255,255,255,.065); border-radius: 10px; background: rgba(19,9,5,.38);
}
.tasks-search:focus-within { border-color: rgba(255,162,122,.42); box-shadow: 0 0 0 3px rgba(255,162,122,.055); }
.tasks-search .ui-icon { width: 16px; height: 16px; color: #857e72; }
.tasks-search input {
  width: 100%; min-width: 0; border: 0; outline: 0; color: #f4e5df; background: transparent;
  font: inherit; font-size: 11.5px;
}
.tasks-search input::placeholder { color: #7c766a; }
.tasks-list {
  max-height: 485px; overflow-y: auto; padding: 0 8px 10px;
  scrollbar-color: rgba(255,162,122,.25) transparent; scrollbar-width: thin;
}
.task-row {
  width: 100%; display: block; padding: 13px 12px; border: 1px solid transparent; border-radius: 13px;
  color: inherit; background: transparent; text-align: start; font: inherit; cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.task-row + .task-row { margin-top: 3px; }
.task-row:hover { background: rgba(255,255,255,.034); }
.task-row:active { transform: translateY(1px); }
.task-row.selected { border-color: rgba(255,162,122,.18); background: rgba(255,162,122,.085); }
.task-row-top { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.task-identity { display: flex; align-items: center; gap: 7px; min-width: 0; color: #8f897d; font-size: 9.5px; }
.task-number { direction: ltr; font-variant-numeric: tabular-nums; }
.task-lane {
  padding: 2px 6px; border-radius: 999px; color: #b0a89b; background: rgba(255,255,255,.045);
  text-transform: uppercase; letter-spacing: .06em; font-size: 8px;
}
.task-state {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px;
  border-radius: 999px; font-size: 8.5px; font-weight: 700;
}
.task-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.task-state.running, .task-state.queued { color: #ff9c72; background: rgba(255,139,89,.09); }
.task-state.running::before { animation: task-pulse 1.6s ease-in-out infinite; }
.task-state.completed { color: #75deb7; background: rgba(87,217,167,.09); }
.task-state.failed, .task-state.cancelled, .task-state.blocked { color: #ff9ca3; background: rgba(255,114,123,.09); }
@keyframes task-pulse { 50% { opacity: .3; transform: scale(.75); } }
.task-row-title { margin: 9px 0 7px; color: #e4e0da; font-size: 12.5px; line-height: 1.42; }
/* The row's own control, and the only thing in it a keyboard opens the task
   with: it looks exactly like the heading it sits in. The row around it is a
   plain div, so the continue arrow beside the number is not a button inside
   another one. The focus ring is the one every button here gets. */
.task-row-open {
  width: 100%; border: 0; background: transparent; color: inherit;
  text-align: start; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.task-row-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #807a6e; font-size: 9px; }
.task-proof-mini { display: inline-flex; align-items: center; gap: 5px; }
.task-proof-mini.verified { color: #6ed3ad; }
.task-proof-mini.partial { color: #f0b36f; }
.task-proof-mini.collecting { color: #e99470; }
.tasks-empty {
  min-height: 270px; display: grid; place-items: center; padding: 34px 24px; color: #908a7e;
  text-align: center; font-size: 12px; line-height: 1.55;
}
.task-detail { min-width: 0; padding: clamp(20px, 2.6vw, 34px); overflow-y: auto; }
.task-detail-empty {
  min-height: 500px; display: grid; place-content: center; justify-items: center; text-align: center;
}
.task-empty-mark {
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px;
  color: #ffa47d; background: rgba(255,162,122,.09); box-shadow: inset 0 0 0 1px rgba(255,162,122,.14);
}
.task-empty-mark .ui-icon { width: 29px; height: 29px; }
.task-detail-empty h2 { margin-top: 15px; font-size: 21px; }
.task-detail-empty p { max-width: 340px; margin-top: 7px; color: #8f887c; font-size: 11.5px; line-height: 1.55; }
.task-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.task-detail-kicker { display: flex; align-items: center; gap: 7px; color: #958e81; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; }
.task-detail-head h2 { max-width: 720px; margin: 9px 0 8px; font-size: clamp(22px, 2.4vw, 31px); line-height: 1.2; letter-spacing: -.025em; }
.task-detail-meta { color: #8e877c; font-size: 10px; }
.task-continue {
  flex: 0 0 auto; min-height: 40px; padding: 0 13px; border: 1px solid rgba(255,162,122,.24);
  border-radius: 10px; color: #ffe6dc; background: rgba(255,162,122,.10);
  font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer;
}
.task-continue:hover { background: rgba(255,162,122,.18); }
.task-proof-card {
  margin-top: 22px; padding: 16px; border: 1px solid rgba(255,255,255,.06); border-radius: 15px;
  background: rgba(255,255,255,.022);
}
.task-proof-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-proof-head strong { font-size: 12px; }
.task-proof-label { font-size: 9.5px; }
.task-proof-label.verified { color: #75deb7; }
.task-proof-label.partial { color: #f0b36f; }
.task-proof-label.collecting { color: #ff9c72; }
.task-proof-track { height: 7px; margin-top: 11px; border-radius: 999px; background: rgba(255,255,255,.055); overflow: hidden; }
.task-proof-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ef7e4d, #5dd8d2); }
.task-proof-copy { margin-top: 8px; color: #8e877c; font-size: 9.5px; }
.task-detail-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(220px, .88fr); gap: 12px; margin-top: 12px; }
.task-detail-section {
  min-width: 0; padding: 17px; border: 1px solid rgba(255,255,255,.06);
  border-radius: 15px; background: rgba(255,255,255,.021);
}
.task-detail-section h3 { font-size: 12.5px; margin-bottom: 10px; }
.task-outcome { color: #cdc8c0; font-size: 11.5px; line-height: 1.62; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-outcome.empty { color: #8c8579; }
.task-evidence-list, .task-timeline { display: flex; flex-direction: column; gap: 9px; }
.task-evidence-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: flex-start; }
.task-evidence-icon {
  width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px;
  color: #6fe0b6; background: rgba(87,217,167,.08); font-size: 9px; margin-top: 1px;
}
.task-evidence-item p { color: #b7b1a8; font-size: 10.5px; line-height: 1.5; overflow-wrap: anywhere; }
.task-timeline-item { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.task-timeline-dot { width: 7px; height: 7px; border-radius: 50%; background: #877e6e; }
.task-timeline-dot.running { background: #ff8b59; }
.task-timeline-dot.completed { background: #57d9a7; }
.task-timeline-dot.failed, .task-timeline-dot.cancelled, .task-timeline-dot.blocked { background: #ff727b; }
.task-timeline-item span { color: #b8b1a6; font-size: 10px; }
.task-timeline-item time { color: #807a6e; font-size: 9px; direction: ltr; }

/* ---------- chat canvas: fixed premium pattern layer ---------- */
#view-chat {
  position: relative;
  background:
    radial-gradient(circle at 20% 30%, rgba(247,140,94,.05) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(243,183,104,.05) 0, transparent 45%),
    var(--bg);
}
/* fixed layer: pattern stays put while chat scrolls over it (iOS-safe,
   background-attachment:fixed is broken there) */
.chat-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-repeat: repeat; background-size: 420px 420px;
  filter: brightness(1.6) contrast(1.08);
  opacity: 0; transition: opacity .5s ease, background-image .3s;
}
.chat-bg.on { opacity: .9; }
.chat-bg::after { /* soft gloss so the pattern breathes */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.03), transparent 60%);
}
#view-chat .messages, #view-chat .composer-wrap { position: relative; z-index: 1; }

/* background picker */
.bg-btn { font-size: 16px; padding: 8px 10px; }
.bg-picker {
  position: absolute; top: 8px; inset-inline-end: 10px; z-index: 20;
  background: var(--header); border: 1px solid var(--border-soft);
  border-radius: 14px; padding: 12px; box-shadow: 0 16px 44px rgba(0,0,0,.5);
  animation: picker-in .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes picker-in { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
.bg-picker-title { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.bg-options { display: flex; gap: 8px; }
.bg-opt {
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 11px; font-family: inherit;
}
.bg-thumb {
  width: 52px; height: 52px; border-radius: 10px; background-color: var(--bg);
  background-size: 160px; border: 2px solid var(--border-soft);
  filter: brightness(1.8);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, border-color .15s;
}
.bg-opt:hover .bg-thumb { transform: scale(1.06); }
.bg-opt.active .bg-thumb { border-color: var(--accent); }
.bg-opt.active { color: var(--accent); }
.bg-none { font-size: 16px; }
.picker-row + .picker-row {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft);
}
.size-options { display: flex; gap: 8px; }
.size-opt {
  min-width: 54px; min-height: 44px; padding: 6px 10px; border-radius: 10px;
  border: 2px solid var(--border-soft); background: var(--panel2); color: var(--muted);
  font-family: inherit; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.size-opt[data-size="normal"] { font-size: 12px; }
.size-opt[data-size="large"] { font-size: 15px; }
.size-opt[data-size="xlarge"] { font-size: 18px; }
.size-opt.active { border-color: var(--accent); color: var(--accent); }
.messages {
  flex: 1; overflow-y: auto; padding: 14px 12px 8px;
  display: flex; flex-direction: column;
  max-width: 760px; width: 100%; margin: 0 auto;
  /* contain, not none: keeps the pull past the edge inside the list instead of
     dragging the page, and still lets WebKit draw its own rubber-band. */
  overscroll-behavior: contain; touch-action: pan-y;
  /* No will-change here. On a scroll container it forces the whole 120k-pixel
     content into one promoted layer, which is the opposite of what it sounds
     like it does — WebKit scrolls an ordinary overflow box on the compositor
     already. */
}
.messages::-webkit-scrollbar { width: 5px; }
.messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }

/* date chips + load-older */
.date-chip {
  align-self: center; margin: 12px 0 6px;
  /* Solid tint, not backdrop-filter: a chip that blurs what is behind it forces
     WebKit to re-sample the background on every scroll frame, and these sit
     inside the scroller. */
  background: rgba(29,26,20, .72); color: #eae7e3;
  font-size: 12.5px; font-weight: 500; border-radius: 999px; padding: 4px 12px;
  user-select: none;
}
.load-older {
  align-self: center; margin: 8px 0;
  background: var(--chip); color: var(--accent); border: 0;
  font-size: 13px; border-radius: 999px; padding: 6px 16px; cursor: pointer;
}
.load-older:disabled { color: var(--muted); cursor: default; }

/* ---------- bubbles ---------- */
.msg {
  position: relative;
  --bubble-line: 21.75px; /* the text line box below: 15px x 1.45 */
  max-width: min(78%, 480px);
  padding: 7px 10px 6px 10px;
  border-radius: 12px;
  font-size: 15px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
  margin-bottom: 3px;
  box-shadow: 0 1px 1px rgba(0,0,0,.25);
  transform-origin: bottom center;
  transform: translateX(var(--reply-x, 0px));
  /* Deliberately no will-change: a full history is 200+ bubbles, and pinning a
     compositing layer to each one is what made the list crawl. The layer is
     bought for the one bubble being dragged instead, in .msg.reply-active. */
}
/* Only a message that just arrived animates in. Re-rendering the history used
   to start this on all 200 bubbles at once. */
.msg.fresh { animation: msg-in .32s cubic-bezier(.34,1.45,.64,1); }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.msg.reply-settling {
  transition: transform .24s cubic-bezier(.22, 1, .36, 1);
}
.msg.reply-active, .msg.reply-settling { will-change: transform; }
/* pan-y is the whole direction lock: the browser keeps vertical scrolling on
   the compositor and hands us the horizontal drag, with no listener that has
   to block a frame to call preventDefault(). */
.msg.reply-ready { touch-action: pan-y; }
.reply-reveal {
  position: absolute; right: -42px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  color: #ffe4d9; background: rgba(226,106,55,.28);
  border: 1px solid rgba(248,149,107,.35);
  font-size: 20px; line-height: 1; direction: ltr; opacity: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.reply-access {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.reply-access:focus-visible {
  width: 36px; height: 36px; margin: 0; clip: auto; overflow: visible;
  right: -44px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; border-radius: 50%; z-index: 4;
  color: #fff; background: var(--header); border: 2px solid var(--accent);
}
.reply-quote {
  display: flex; flex-direction: column; gap: 1px;
  margin: 0 0 5px; padding: 4px 7px;
  border-inline-start: 3px solid rgba(255,172,137,.78);
  border-radius: 5px; background: rgba(27,10,3,.20);
  overflow: hidden; white-space: normal;
}
.reply-quote strong {
  color: #ffd2bf; font-size: 11.5px; line-height: 1.25;
}
.reply-quote span {
  color: rgba(255,255,255,.70); font-size: 12px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* outgoing (the user) — right side in RTL, Telegram blue */
.msg.user {
  align-self: flex-start;
  background: var(--out);
  border-end-start-radius: 4px;
}
.msg.user.tail::before {
  content: ""; position: absolute; bottom: 0; inset-inline-start: -7px;
  width: 14px; height: 16px;
  background: radial-gradient(circle at 0 0, transparent 14px, var(--out) 15px);
  transform: scaleX(-1);
}
[dir="rtl"] .msg.user.tail::before { transform: none; }

/* incoming (Tectomight) */
.msg.assistant {
  align-self: flex-end;
  background: var(--in);
  border-end-end-radius: 4px;
}
.msg.assistant.tail::after {
  content: ""; position: absolute; bottom: 0; inset-inline-end: -7px;
  width: 14px; height: 16px;
  background: radial-gradient(circle at 0 0, transparent 14px, var(--in) 15px);
}
[dir="rtl"] .msg.assistant.tail::after { transform: scaleX(-1); }

/* Telegram-shaped inline formatting inside a bubble: the bot writes HTML to the
   chat, and the app now renders those tags instead of printing them. */
.msg code, .msg pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: rgba(255,255,255,.09);
  border-radius: 5px;
  padding: 1px 4px;
  direction: ltr; unicode-bidi: embed;
}
.msg pre { display: block; padding: 6px 8px; overflow-x: auto; }
.msg blockquote {
  margin: 2px 0; padding-inline-start: 8px;
  border-inline-start: 2px solid var(--accent, #ff8a58);
  opacity: .92;
}
.msg a { color: var(--accent, #ff8a58); text-decoration: underline; word-break: break-all; }

/* The bubbles above were laid out physically for Hebrew: flex-start IS the right
   edge in RTL. An English or Russian seat gets dir="ltr", where the same rules
   silently put the user's own messages on the left and hang each tail off the
   wrong side. Mirror it back here, scoped to LTR so Hebrew is untouched. */
[dir="ltr"] .msg.user { align-self: flex-end; border-end-start-radius: 12px; border-end-end-radius: 4px; }
[dir="ltr"] .msg.user.tail::before { inset-inline-start: auto; inset-inline-end: -7px; transform: none; }
[dir="ltr"] .msg.assistant { align-self: flex-start; border-end-end-radius: 12px; border-end-start-radius: 4px; }
[dir="ltr"] .msg.assistant.tail::after { inset-inline-end: auto; inset-inline-start: -7px; transform: scaleX(-1); }

.msg.error { background: #3a1a1c; color: #ffb3b6; }

/* live mirror of the Telegram status bubble while a lane is still running */
.msg.assistant.live { color: var(--muted); font-size: 13.5px; opacity: .95; }
.msg.assistant.live .body { display: block; unicode-bidi: plaintext; text-align: start; }
/* inline-block, not block: the continue arrow sits beside the number on the
   same line, and the body below it is block anyway. */
.msg.assistant.live .live-tag {
  display: inline-block; color: var(--good); font-size: 11px; font-weight: 700;
  margin-bottom: 3px; animation: live-fade 1.6s ease-in-out infinite;
}
@keyframes live-fade { 50% { opacity: .35; } }

/* meta row: kind tag + time + ticks, Telegram-style inside the bubble */
/* A float is placed at the TOP of the line it lands on. The time used to be
   nudged back down with margin-top + position:top, which overshot the line by
   about 4px: on a two-line bubble nobody noticed, but on a one-line one it put
   the time and ticks below the words, hard against the bubble's bottom edge and
   2px from the text. Giving the float the exact height of one text line and
   bottom-aligning inside it needs no offset at all, so the time sits on the same
   baseline as the last line whether there is one line or ten. Margins are
   physical on purpose: the meta carries its own direction:ltr, so margin-inline-*
   would resolve against that instead of against the bubble. */
.msg .meta {
  display: inline-flex; align-items: flex-end; gap: 4px;
  float: left; height: var(--bubble-line);
  margin-right: 9px; margin-left: 1px;
  font-size: 11.5px; color: rgba(255,255,255,.45);
  direction: ltr; user-select: none; line-height: 1;
}
[dir="rtl"] .msg .meta { float: left; }
/* float:left is the trailing edge only in RTL. In LTR it floats into the text,
   which is what made the time and ticks sit on top of the last line. */
[dir="ltr"] .msg .meta { float: right; margin-left: 9px; margin-right: 1px; }
.msg.user .meta { color: rgba(255,255,255,.55); }
.msg .ticks { color: #f8956b; font-size: 12px; letter-spacing: -3px; }
.msg .tag {
  display: inline-block; margin-bottom: 4px; margin-inline-end: 6px;
  font-size: 11px; font-weight: 500; border-radius: 6px; padding: 1px 7px;
  background: rgba(255,255,255,.08); color: var(--muted); vertical-align: 1px;
}
.msg .tag.voice { color: var(--accent); background: rgba(247,140,94,.12); }

.msg .voice-play {
  min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px;
  background: rgba(247,140,94,.12); border: 0;
  color: var(--accent); border-radius: 999px; padding: 8px 16px;
  font-size: 13px; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.msg .voice-play .ui-icon { width: 16px; height: 16px; flex: 0 0 16px; fill: currentColor; stroke: none; }
.msg .voice-play.playing {
  color: #ffb3b6; background: rgba(224,82,82,.17);
  box-shadow: inset 0 0 0 1px rgba(255,179,182,.22);
}
.msg .voice-play:active { filter: brightness(1.16); }
.msg .voice-play:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.msg .tools {
  clear: both; margin-top: 6px; font-size: 12px; color: var(--muted);
  direction: ltr; text-align: left;
}
.msg .cursor {
  display: inline-block; width: 2px; height: 14px; margin-inline-start: 2px;
  background: var(--accent); vertical-align: -2px;
  animation: blink .9s step-start infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* thinking status — pulsing green dot + live seconds, like the Telegram lane */
.thinking {
  align-self: flex-end;
  background: var(--in); border-radius: 12px; border-end-end-radius: 4px;
  padding: 9px 13px; margin-bottom: 3px;
  display: inline-flex; gap: 9px; align-items: center;
  font-size: 13px; color: var(--muted);
  animation: msg-in .32s cubic-bezier(.34,1.45,.64,1);
  max-width: min(78%, 480px);
}
.think-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--good);
  box-shadow: 0 0 0 0 rgba(79,174,78,.55);
  animation: think-pulse 1.5s infinite;
}
/* thinking-orbs took over the dot: give it the orb's own 20px box, drop the
   green pulse it replaces. Falls back to the dot if the bundle never loads. */
.think-dot.has-orb {
  width: 20px; height: 20px; background: none; box-shadow: none;
  animation: none; display: flex; align-items: center; justify-content: center;
}
@keyframes think-pulse {
  0% { box-shadow: 0 0 0 0 rgba(79,174,78,.55); }
  70% { box-shadow: 0 0 0 9px rgba(79,174,78,0); }
  100% { box-shadow: 0 0 0 0 rgba(79,174,78,0); }
}
.think-secs {
  font-variant-numeric: tabular-nums; color: var(--accent);
  font-weight: 600; direction: ltr;
}
.think-act { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
/* Which lane this bubble is. Only drawn when a second one is running, so a
   single answer never carries a number nobody needs. */
.think-lane {
  direction: ltr; flex-shrink: 0;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 7px;
  color: var(--accent); background: rgba(127, 127, 127, .14);
}
.think-lane.hidden { display: none; }

/* Continue this task: the forward arrow next to a card's number (owner, 22
   Sept 2026). Tapping it puts the task in as the reply target, so the next
   message continues that run. The glyph is direction:ltr on purpose — ↪ points
   forward in Hebrew too, and a mirrored one would read as "go back". */
.task-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  margin-inline-start: 6px; margin-bottom: 4px;
  vertical-align: -9px; flex-shrink: 0;
  border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(247, 140, 94, .14); color: var(--accent);
  font-size: 15px; line-height: 1; direction: ltr;
  position: relative; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* A thumb needs 44px, the card needs a small chip: the tap area grows without
   the glyph growing with it. */
.task-arrow::after { content: ""; position: absolute; inset: -7px; }
.task-arrow:active { background: rgba(247, 140, 94, .30); }
.task-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The same chip on the Tasks tab. There it sits inside a flex line, which
   already supplies the gap and ignores the baseline nudge a chat bubble needs,
   so both would only push it off its row. */
.task-identity .task-arrow, .task-detail-kicker .task-arrow, .board-card-id .task-arrow {
  width: 26px; height: 26px; margin: 0; vertical-align: 0; font-size: 13px;
}
.msg .tag.task { color: var(--accent); background: rgba(247, 140, 94, .12); }
.status-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--good); margin-inline-end: 5px; vertical-align: 0;
  animation: think-pulse 1.5s infinite;
}

/* typing indicator — Telegram three dots inside a bubble */
.typing {
  align-self: flex-end;
  background: var(--in); border-radius: 12px; border-end-end-radius: 4px;
  padding: 12px 14px; margin-bottom: 3px;
  display: inline-flex; gap: 5px; align-items: center;
}
.typing i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  animation: tybounce 1.2s infinite ease-in-out;
}
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tybounce { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ---------- composer ---------- */
.composer-wrap {
  background: transparent; padding: 5px 10px calc(8px + env(safe-area-inset-bottom));
}
.reply-preview {
  max-width: 760px; width: 100%; margin: 0 auto 6px;
  min-height: 44px; display: flex; align-items: center; gap: 9px;
  padding: 6px 7px 6px 10px; border-radius: 13px;
  background: rgba(28,25,19,.94); border: 1px solid rgba(247,140,94,.24);
  box-shadow: 0 5px 18px rgba(0,0,0,.24);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.reply-preview.hidden { display: none; }
.reply-preview-mark {
  align-self: stretch; width: 3px; flex: 0 0 3px;
  border-radius: 999px; background: var(--accent);
}
.reply-preview-copy {
  min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px;
}
.reply-preview-copy strong { color: #ffb18f; font-size: 12px; }
.reply-preview-copy span {
  color: var(--muted); font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reply-cancel {
  width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center;
  border: 0; border-radius: 50%; color: var(--muted); background: transparent;
}
.reply-cancel .ui-icon { width: 17px; height: 17px; }
.reply-cancel:active { background: rgba(255,255,255,.08); transform: scale(.92); }
/* Attachments waiting to be sent. Sits above the composer like the reply
   preview, so the row that appears never pushes the text field off-screen. */
.attach-row {
  max-width: 760px; width: 100%; margin: 0 auto 6px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.attach-row.hidden { display: none; }
/* Narrow enough that two chips share a row on a phone: stacking them pushed the
   text field up a line per attachment, and four photos ate half the screen. */
.attach-chip {
  display: flex; align-items: center; gap: 7px; max-width: 168px;
  padding: 5px 6px 5px 10px; border-radius: 13px;
  background: rgba(28,25,19,.94); border: 1px solid rgba(247,140,94,.24);
  box-shadow: 0 5px 18px rgba(0,0,0,.24);
}
.attach-chip.pending { opacity: .55; }
.attach-chip.failed { border-color: rgba(255,120,120,.5); }
.attach-chip img {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 7px; object-fit: cover;
}
.attach-chip .attach-name {
  min-width: 0; flex: 1; color: var(--text); font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.attach-chip .attach-drop {
  width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center;
  border: 0; border-radius: 50%; color: var(--muted); background: transparent;
  cursor: pointer;
}
.attach-chip .attach-drop .ui-icon { width: 14px; height: 14px; }
.attach-chip .attach-drop:active { background: rgba(255,255,255,.08); transform: scale(.92); }
/* Attachments already sent, inside a bubble. */
.msg .attachments { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.msg .attachments a { display: block; max-width: 100%; }
.msg .attachments img {
  max-width: min(100%, 400px); max-height: 380px; border-radius: 12px; display: block;
}
.youtube-card { width: 360px; max-width: 100%; margin-top: 10px; border-radius: 12px; overflow: hidden; background: rgba(76,145,255,.07); white-space: normal; }
.youtube-play, .youtube-card iframe { display: block; position: relative; width: 100%; height: 210px; padding: 0; border: 0; background: #111; }
.youtube-play { cursor: pointer; }
.youtube-play img { width: 100%; height: 100%; object-fit: cover; }
.youtube-play > span { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: rgba(0,0,0,.7); color: white; font-size: 22px; padding-left: 3px; }
.youtube-details { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px 0; border-inline-start: 3px solid var(--accent, #579dff); }
.youtube-source { color: var(--accent, #579dff); font-weight: 600; }
.youtube-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.4; }
.youtube-author { opacity: .65; }
.youtube-details > a { display: flex; align-items: center; min-height: 44px; font-size: 12px; }
.chat-image-viewer { position: fixed; inset: 0; margin: auto; padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100dvh; overflow: auto; }
.chat-image-viewer::backdrop { background: rgba(0,0,0,.95); }
.chat-image-viewer img { display: block; max-width: 100vw; max-height: 100dvh; object-fit: contain; }
.chat-image-viewer button { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #252525; color: white; font-size: 30px; cursor: pointer; }
.msg .attachments .file-chip {
  display: flex; align-items: center; gap: 7px; max-width: 220px;
  padding: 7px 10px; border-radius: 11px; text-decoration: none;
  background: rgba(255,255,255,.09); color: inherit; font-size: 12.5px;
}
.msg .attachments .file-chip .ui-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.msg .attachments .file-chip span {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.media-file { width: 280px; max-width: 100%; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.06); }
.msg .attachments .media-file .file-chip { max-width: 100%; }
.media-file small { display: block; margin: 5px 2px; color: var(--muted); font-size: 11px; }
.media-file audio, .media-file video { display: block; width: 100%; margin-top: 8px; }
.media-file input[type="range"] { width: 100%; height: 32px; margin: 0; direction: ltr; accent-color: var(--accent, #63b3ed); }
.media-file-actions { display: flex; justify-content: space-between; gap: 6px; direction: ltr; }
.media-file-actions button { min-width: 56px; min-height: 44px; padding: 6px; color: inherit; background: transparent; border: 0; border-radius: 8px; }
.media-file-actions button:focus-visible { outline: 2px solid var(--accent, #63b3ed); }
.attach {
  background: var(--header); color: var(--muted);
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.attach:disabled { opacity: .5; cursor: default; }
.composer {
  direction: ltr; /* Keep Send on the physical right in every language. */
  display: flex; align-items: flex-end; gap: 6px;
  max-width: 760px; width: 100%; margin: 0 auto;
}
.composer .field {
  /* min-width: 0 or the textarea's default 20-column intrinsic width becomes a
     floor for the whole row: on a 320px screen that floor is 370px, and the
     send button ends up off the edge. */
  flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center;
  background: var(--header); border-radius: 16px;
  padding: 3px 8px 3px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  border: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.composer .field:focus-within {
  border-color: rgba(247,140,94,.45);
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 0 0 3px rgba(247,140,94,.08);
  transform: translateY(-1px);
}
.composer textarea {
  flex: 1; min-width: 0; resize: none; background: transparent; color: var(--text);
  border: 0; outline: 0; padding: 7px 5px;
  font-size: 15px; font-family: inherit; max-height: 120px; min-height: 34px; line-height: 1.32;
}
.composer textarea::placeholder { color: var(--muted); }
.round-btn {
  border: 0; border-radius: 50%; width: 44px; height: 44px; flex-shrink: 0;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .22s cubic-bezier(.34,1.9,.64,1), background .15s;
}
.round-btn .ui-icon { width: 21px; height: 21px; stroke-width: 1.9; }
.round-btn .send-icon { width: 20px; height: 20px; transform: translateX(-1px); }
.round-btn:active { transform: scale(.86); }
.send {
  background: linear-gradient(135deg, #e26a37, #c8511e); color: #fff;
  box-shadow: 0 3px 10px rgba(226,106,55,.35);
}
.send:disabled { opacity: .5; cursor: default; }
/* metal-fx wraps the send button in a 52px host so its ring clears the 44px
   button; the host centres itself on the row so send and mic stay on one line. */
.composer .jafx-host, .composer .jafx-slot { display: inline-flex; flex-shrink: 0; }
.composer .jafx-host {
  height: 44px; width: 44px; align-items: center; justify-content: center;
}
.mic { background: var(--header); color: var(--muted); }
.mic.recording {
  background: var(--bad); color: #fff; animation: pulse 1.2s infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 12px rgba(224,82,82,.12); } }
/* Transcribing. A class, not a text swap: the old hourglass was written into
   the button's textContent, which wiped the SVG icon out of it permanently. */
.round-btn.busy, .gen-mic.busy { pointer-events: none; animation: busy-fade 1s ease-in-out infinite; }
@keyframes busy-fade { 50% { opacity: .4; } }

/* ---------- apps ---------- */
#view-apps { overflow-y: auto; overflow-x: hidden; padding-bottom: 40px; }
.apps-shell { max-width: 920px; margin: 0 auto; padding: 24px 16px 56px; width: 100%; }
.apps-section, .whatsapp-connect {
  margin-bottom: 18px; padding: 20px; border: 1px solid var(--border-soft);
  border-radius: 20px; background: var(--header);
}
.whatsapp-connect {
  background: linear-gradient(145deg, rgba(37,211,102,.10), rgba(226,106,55,.04)), var(--header);
  border-color: rgba(37,211,102,.25);
}
.apps-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.apps-section-heading.compact { margin-bottom: 10px; }
.apps-section-heading h2 { font-size: 19px; font-weight: 650; letter-spacing: -.01em; margin-top: 2px; }
.private-chip { color: #8fe3ad; border: 1px solid rgba(37,211,102,.32); background: rgba(37,211,102,.10); border-radius: 999px; padding: 5px 10px; font-size: 11.5px; white-space: nowrap; }
.whatsapp-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.whatsapp-slot { min-height: 176px; padding: 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(23,12,7,.48); display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.wa-slot-head { display: flex; gap: 10px; align-items: center; }
.wa-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: #25d366; font-size: 21px; font-weight: 750; }
.wa-slot-title { font-size: 14.5px; font-weight: 650; color: #fff; }
.wa-slot-state { font-size: 12px; color: var(--muted); margin-top: 2px; }
.wa-slot-state.connected { color: #8fe3ad; }
.wa-qr { width: 112px; height: 112px; border-radius: 12px; padding: 6px; background: #fff; object-fit: contain; align-self: center; }
.wa-qr-placeholder { width: 112px; height: 112px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.05); color: var(--muted); font-size: 11px; text-align: center; padding: 10px; }
.wa-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.wa-btn, .connection-action { border-radius: 9px; padding: 7px 12px; font-size: 12.5px; cursor: pointer; color: var(--text); background: rgba(255,255,255,.05); border: 1px solid var(--border-soft); }
.wa-btn.primary { color: #dfffea; background: rgba(37,211,102,.15); border-color: rgba(37,211,102,.38); }
.wa-btn.danger { color: #ffb6b6; }
.wa-btn:active, .connection-action:active, .app-card:active { transform: scale(.97); }
.wa-btn:disabled { opacity: .55; cursor: wait; }
.apps-head h2 { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.apps-sub { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; }
.apps-search-wrap { position: relative; }
.apps-search-wrap .ui-icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); width: 18px; color: var(--muted); pointer-events: none; }
#apps-search {
  width: 100%; background: var(--panel2); border: 1px solid transparent;
  border-radius: 12px; color: var(--text); padding-block: 12px; padding-inline: 42px 14px; font-size: 15px;
}
#apps-search:focus { outline: none; border-color: var(--accent); }
.apps-search-status { min-height: 20px; padding: 5px 2px 0; color: var(--muted); font-size: 12px; }
.connections { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.connections-empty { color: var(--muted); background: rgba(255,255,255,.035); border-radius: 12px; padding: 16px; font-size: 13px; }
.conn-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel2); border-radius: 12px; padding: 10px 12px;
}
.conn-row img { width: 30px; height: 30px; border-radius: 8px; background: #fff; object-fit: contain; }
.conn-row .conn-name { font-weight: 600; font-size: 14.5px; }
.conn-row .conn-state { font-size: 12px; color: var(--good); }
.conn-row .conn-state.bad { color: var(--bad); }
.conn-actions { margin-inline-start: auto; display: flex; gap: 7px; }
.conn-row button {
  background: transparent; border: 1px solid var(--border-soft);
  color: var(--muted); border-radius: 8px; padding: 6px 12px; font-size: 12.5px; cursor: pointer;
}
.apps-grid {
  width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px;
}
.curated-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.all-apps-section .apps-grid { margin-top: 4px; }
.app-card {
  width: 100%; min-height: 104px; color: #fff; background: var(--panel2); border: 1px solid transparent; border-radius: 14px;
  padding: 14px 12px; display: flex; flex-direction: column; align-items: center;
  gap: 8px; cursor: pointer; text-align: center; transition: transform .12s, border-color .12s;
}
.app-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.app-card img { width: 40px; height: 40px; border-radius: 10px; background: #fff; object-fit: contain; }
.app-card .app-name { color: #fff; font-size: 13.5px; font-weight: 600; }
.app-card .app-badge {
  font-size: 11px; color: var(--good); border: 1px solid rgba(79,174,78,.4);
  border-radius: 999px; padding: 2px 9px;
}
#apps-more-wrap { text-align: center; margin: 20px 0; }
.apps-more {
  background: var(--panel2); color: var(--text); border: 0;
  border-radius: 999px; padding: 10px 26px; font-size: 14px; cursor: pointer;
}
.apps-empty { grid-column: 1 / -1; padding: 22px; text-align: center; color: var(--muted); border: 1px dashed var(--border-soft); border-radius: 14px; }
.language-select { color: var(--text); background: var(--panel2); border: 1px solid var(--border-soft); border-radius: 9px; padding: 7px 8px; font-size: 12px; }
.apps-heading-actions { display: flex; align-items: center; gap: 8px; }

@media (max-width: 680px) {
  .apps-shell { padding: 14px 10px 42px; }
  .apps-section, .whatsapp-connect { padding: 15px; border-radius: 17px; }
  .whatsapp-slots { grid-template-columns: 1fr; }
  .whatsapp-slot { min-height: 164px; }
  .apps-section-heading { align-items: flex-start; }
  .private-chip { display: none; }
  .curated-grid, .apps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-card { min-height: 98px; padding: 12px 6px; }
  .app-card img { width: 36px; height: 36px; }
  .conn-row { align-items: flex-start; flex-wrap: wrap; }
  .conn-actions { width: 100%; margin-inline-start: 42px; }
}

/* ---------- automations ---------- */
/* overflow-x must be stated: a scroll box with overflow-y:auto and overflow-x
   left at visible computes to auto, and the page pans sideways on touch. */
#view-autos, #view-admin { overflow-y: auto; overflow-x: hidden; padding-bottom: 48px; }
.autos-head { max-width: 860px; margin: 0 auto; padding: 22px 16px 6px; width: 100%; }
.autos-head h2 { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.quota-bar { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.quota-track {
  flex: 1; max-width: 260px; height: 7px; border-radius: 999px;
  background: var(--panel2); overflow: hidden;
}
.quota-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #e26a37, #f3b768); transition: width .4s;
}
.quota-text { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.autos-cards {
  max-width: 860px; margin: 16px auto 0; padding: 0 16px; width: 100%;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px;
}
/* A card is never allowed to set the page width: min-width:0 lets the grid
   track shrink, and long words break instead of pushing the layout sideways. */
.autos-cards > *, .recs-list > *, .schedules-list > * { min-width: 0; }
.auto-card2 > *, .auto-card > *, .rec-card > *, .sched-card > * { min-width: 0; }
.auto-title, .auto-desc, .rec-title, .rec-desc, .sched-title, .sched-when {
  min-width: 0; overflow-wrap: anywhere;
}
/* The status pill keeps its size; the title beside it gives way. */
.auto-pill { flex: none; }
.autos-empty {
  grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 14px;
  background: var(--header); border-radius: 14px; padding: 34px 20px;
}
.auto-card {
  background: var(--header); border: 1px solid var(--border-soft); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color .15s, transform .12s;
}
.auto-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.auto-card-head { display: flex; align-items: center; gap: 11px; }
.auto-card-head img { width: 38px; height: 38px; border-radius: 10px; background: #fff; object-fit: contain; }
.auto-app-name { font-weight: 600; font-size: 15px; }
.auto-app-state { font-size: 12px; color: var(--good); }
.auto-item {
  background: var(--panel2); border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.auto-item.suggested { background: rgba(243,183,104,.10); border: 1px dashed rgba(243,183,104,.4); }
.auto-title { font-weight: 600; font-size: 14px; }
.auto-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.flow-step {
  font-size: 11.5px; border-radius: 999px; padding: 4px 10px; max-width: 100%;
  /* a step too long for the row wraps inside its own pill instead of widening
     the card, which is what used to make the page pan sideways on a phone */
  white-space: normal; overflow-wrap: anywhere;
  background: rgba(255,255,255,.06); color: var(--text);
}
.flow-step.trig { background: rgba(255,193,7,.14); color: #ffd76e; }
.flow-step.brain {
  background: linear-gradient(135deg, rgba(226,106,55,.25), rgba(243,183,104,.25));
  border: 1px solid rgba(243,183,104,.45); font-weight: 600;
}
.flow-step.act { background: rgba(79,174,78,.16); color: #8fdc8e; }
.flow-arrow { color: var(--muted); font-size: 12px; }
.auto-stats { display: flex; align-items: center; gap: 8px; }
.auto-stats .runs { font-size: 12px; color: var(--accent); margin-inline-end: auto; }
.auto-run {
  background: rgba(247,140,94,.14); color: var(--accent); border: 1px solid rgba(247,140,94,.35);
  border-radius: 8px; padding: 5px 12px; font-size: 12.5px; cursor: pointer;
}
.auto-run:disabled { opacity: .6; cursor: default; }
.auto-del {
  background: transparent; border: 1px solid var(--border-soft); color: var(--muted);
  border-radius: 8px; padding: 5px 9px; font-size: 12px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.auto-del:hover { color: #ff9b9b; border-color: rgba(255,86,86,.45); background: rgba(255,86,86,.1); }
.auto-pause {
  background: rgba(255,193,7,.12); color: #ffd76e; border: 1px solid rgba(255,193,7,.32);
  border-radius: 8px; padding: 5px 12px; font-size: 12.5px; cursor: pointer;
  white-space: nowrap; transition: background .15s;
}
.auto-pause:hover { background: rgba(255,193,7,.22); }
.auto-pause:disabled, .auto-del:disabled { opacity: .55; cursor: default; }
.auto-add {
  background: transparent; border: 1px dashed var(--border-soft); color: var(--muted);
  border-radius: 10px; padding: 9px; font-size: 13px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.auto-add:hover { color: var(--accent); border-color: var(--accent); }
.auto-fields { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.auto-fields label { text-align: start; font-size: 12.5px; color: var(--muted); }
.auto-fields input {
  width: 100%; background: var(--panel2); border: 1px solid var(--border-soft);
  border-radius: 10px; color: var(--text); padding: 10px 13px; font-size: 14px;
}

/* daily usage-based recommendations */
.recs { max-width: 860px; margin: 18px auto 0; padding: 0 16px; width: 100%; }
.recs-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.recs-head h3 { font-size: 16px; font-weight: 600; }
.recs-sub { font-size: 12px; color: var(--muted); }
.recs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.rec-card {
  position: relative;
  background: linear-gradient(160deg, rgba(243,183,104,.10), rgba(226,106,55,.05)), var(--header);
  border: 1px solid rgba(243,183,104,.32); border-radius: 16px; padding: 15px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s, transform .12s;
}
.rec-card:hover { border-color: rgba(243,183,104,.6); transform: translateY(-2px); }
/* dismiss — always reachable (no hover on touch), never over the text */
.rec-dismiss {
  position: absolute; top: 10px; inset-inline-end: 10px;
  width: 26px; height: 26px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); color: var(--muted);
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  font-size: 13px; cursor: pointer; transition: background .15s, color .15s;
}
.rec-dismiss:hover { background: rgba(255,90,90,.18); color: #ffb4b4; border-color: rgba(255,90,90,.45); }
.rec-card.dismissing { opacity: .35; }
.rec-badge {
  align-self: flex-start; font-size: 10.5px; color: #fae1c1;
  background: rgba(243,183,104,.16); border: 1px solid rgba(243,183,104,.4);
  border-radius: 999px; padding: 3px 9px;
}
.rec-title { font-weight: 600; font-size: 14.5px; }
.rec-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.rec-create {
  align-self: flex-start; margin-top: 2px;
  background: rgba(243,183,104,.18); color: #fbe8d0; border: 1px solid rgba(243,183,104,.5);
  border-radius: 9px; padding: 7px 15px; font-size: 13px; cursor: pointer; transition: background .15s;
}
.rec-create:hover { background: rgba(243,183,104,.3); }

/* system schedules — the account's real scheduled automations (read-only) */
.schedules { max-width: 860px; margin: 18px auto 0; padding: 0 16px; width: 100%; }
.schedules-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.sched-card {
  background: linear-gradient(160deg, rgba(79,174,78,.08), rgba(247,140,94,.04)), var(--header);
  border: 1px solid rgba(79,174,78,.28); border-radius: 16px; padding: 14px;
  display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, transform .12s;
}
.sched-card:hover { border-color: rgba(79,174,78,.55); transform: translateY(-2px); }
.sched-card.off { border-color: var(--border-soft); opacity: .72; background: var(--header); }
.sched-head { display: flex; align-items: center; gap: 8px; }
.sched-icon { font-size: 17px; line-height: 1; }
.sched-name { font-weight: 600; font-size: 14px; flex: 1; }
.sched-status { font-size: 10.5px; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.sched-status.on { color: #a9e3a8; background: rgba(79,174,78,.16); border: 1px solid rgba(79,174,78,.4); }
.sched-status.off { color: var(--muted); background: var(--chip); border: 1px solid var(--border-soft); }
.sched-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--muted); }
.sched-cat { color: var(--accent); }
.sched-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--muted); }

/* new-automation button */
.autos-actions { max-width: 860px; margin: 16px auto 0; padding: 0 16px; width: 100%; }
.autos-new {
  width: 100%; background: rgba(247,140,94,.12); color: var(--accent);
  border: 1px dashed rgba(247,140,94,.45); border-radius: 12px; padding: 12px;
  font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s;
}
.autos-new:hover { background: rgba(247,140,94,.2); border-color: var(--accent); }

/* generative automation request (text + voice) — lives inside the create modal */
.gen-auto-inline { display: flex; flex-direction: column; gap: 8px; }
.gen-auto-inline > label { color: var(--accent); font-weight: 600; }
.gen-or {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 2px;
  color: var(--muted); font-size: 12.5px;
}
.gen-or::before, .gen-or::after {
  content: ""; flex: 1; height: 1px; background: var(--border-soft);
}
.gen-box {
  background: var(--header); border: 1px solid var(--border-soft); border-radius: 14px;
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.gen-box textarea {
  width: 100%; background: var(--bg); color: var(--text); resize: vertical;
  border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 12px;
  font: inherit; font-size: 14px; line-height: 1.5; min-height: 52px;
}
.gen-box textarea:focus { outline: none; border-color: var(--accent); }
.gen-actions { display: flex; gap: 10px; align-items: center; }
.gen-mic {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: var(--bg); color: var(--muted); border: 1px solid var(--border-soft);
  font-size: 18px; transition: transform .12s, background .15s;
}
.gen-mic .ui-icon { width: 20px; height: 20px; }
.gen-mic:active { transform: scale(.88); }
.gen-mic.recording { background: rgba(224,82,82,.16); color: #e05252; animation: pulse 1.3s infinite; }
.gen-go {
  flex: 1; background: var(--accent); color: #fff; border: none; border-radius: 10px;
  padding: 11px; font-size: 14px; font-weight: 600; cursor: pointer; transition: filter .15s;
}
.gen-go:hover { filter: brightness(1.08); }
.gen-go:disabled { opacity: .6; cursor: default; }

/* automation card (app chain) */
.auto-card2 {
  background: var(--header); border: 1px solid var(--border-soft); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 11px;
  transition: border-color .15s, transform .12s;
}
.auto-card2:hover { border-color: var(--accent); transform: translateY(-2px); }

/* chain flow: app logos in sequence */
.flow.chain { gap: 5px; }
.flow-app {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel2); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 4px 11px 4px 5px; font-size: 12px; white-space: nowrap;
}
.flow-app img { width: 20px; height: 20px; border-radius: 6px; background: #fff; object-fit: contain; }

/* chain builder (modal) */
.chain-builder {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  background: var(--panel2); border: 1px solid var(--border-soft); border-radius: 12px;
  padding: 10px; min-height: 46px;
}
.chain-empty { color: var(--muted); font-size: 12.5px; }
.chain-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(247,140,94,.12); border: 1px solid rgba(247,140,94,.4);
  border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 12.5px;
}
.chain-chip img { width: 20px; height: 20px; border-radius: 6px; background: #fff; object-fit: contain; }
.chain-x { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 2px; line-height: 1; }
.chain-x:hover { color: var(--bad); }
.chain-arrow { color: var(--muted); font-size: 13px; }
.chain-add-row { display: flex; gap: 8px; }
.chain-select {
  flex: 1; background: var(--panel2); border: 1px solid var(--border-soft);
  border-radius: 10px; color: var(--text); padding: 9px 12px; font-size: 13.5px;
}
.chain-add {
  background: rgba(247,140,94,.14); color: var(--accent); border: 1px solid rgba(247,140,94,.4);
  border-radius: 10px; padding: 9px 15px; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.chain-add:hover { background: rgba(247,140,94,.24); }

/* run-frequency picker (when to run the automation) */
.sched-row { display: flex; align-items: center; gap: 8px; }
.sched-every { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.sched-num {
  width: 72px; background: var(--panel2); border: 1px solid var(--border-soft);
  border-radius: 10px; color: var(--text); padding: 9px 12px; font-size: 14px; text-align: center;
}
.sched-unit {
  flex: 1; background: var(--panel2); border: 1px solid var(--border-soft);
  border-radius: 10px; color: var(--text); padding: 9px 12px; font-size: 13.5px;
}
.sched-hint { font-size: 12px; color: var(--accent); line-height: 1.45; margin: 2px 2px 0; min-height: 16px; }
/* schedule badge on an automation card */
.auto-sched {
  align-self: flex-start; font-size: 12px; color: var(--accent);
  background: rgba(247,140,94,.12); border: 1px solid rgba(247,140,94,.3);
  border-radius: 999px; padding: 3px 10px; margin-top: 2px;
}
.auto-sched.manual { color: var(--muted); background: transparent; border-color: var(--border-soft); }
/* the end date under the schedule badge: a quiet note, never a second badge */
.auto-expires { font-size: 11.5px; color: var(--muted); margin-top: -6px; }

/* --- unified automations: system + user, one card type, all with the flow --- */
.autos-list-head { max-width: 860px; margin: 22px auto 10px; padding: 0 16px; width: 100%; }
.autos-list-head h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.auto-head { display: flex; align-items: center; gap: 9px; }
.auto-head .auto-title { margin-inline-end: auto; }
.auto-card2.sys { background: linear-gradient(165deg, rgba(79,174,78,.07), transparent 55%), var(--header); }
.auto-card2.off { opacity: .64; }
.auto-pill { font-size: 11px; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.auto-pill.on { color: #8fdc8e; background: rgba(79,174,78,.16); border: 1px solid rgba(79,174,78,.4); }
.auto-pill.off { color: var(--muted); background: var(--chip); border: 1px solid var(--border-soft); }
/* emoji stand-in for a flow step that isn't a connected app (trigger/site/research) */
.flow-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px; font-size: 13px; background: rgba(255,255,255,.09);
}
.content-badge { align-self: flex-start; font-size: 11.5px; border-radius: 999px; padding: 3px 10px; }
.content-badge.ok { color: #8fdc8e; background: rgba(79,174,78,.14); border: 1px solid rgba(79,174,78,.32); }
.content-badge.warn { color: #ffd76e; background: rgba(255,193,7,.14); border: 1px solid rgba(255,193,7,.34); }
.auto-edit {
  background: rgba(243,183,104,.16); color: #fae1c1; border: 1px solid rgba(243,183,104,.4);
  border-radius: 8px; padding: 5px 12px; font-size: 12.5px; cursor: pointer;
}
.auto-edit:hover { background: rgba(243,183,104,.26); }
.auto-note { font-size: 11px; color: var(--muted); }
/* generative edit modal */
.edit-flow { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 4px; }
.edit-current { font-size: 12.5px; color: var(--accent); margin-bottom: 8px; }
.edit-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.edit-chip {
  background: var(--panel2); border: 1px solid var(--border-soft); color: var(--muted);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer;
}
.edit-chip:hover { color: var(--accent); border-color: var(--accent); }

/* unified machine view */
.machine { max-width: 860px; margin: 28px auto 0; padding: 0 16px; width: 100%; }
.machine h3 { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.machine-flow {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  background:
    radial-gradient(500px 200px at 50% 50%, rgba(243,183,104,.10), transparent 70%),
    var(--header);
  border: 1px solid var(--border-soft); border-radius: 18px; padding: 26px 18px;
  flex-wrap: wrap;
}
.machine-apps {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 180px;
}
.machine-apps img { width: 34px; height: 34px; border-radius: 9px; background: #fff; object-fit: contain; }
.machine-arrow { color: var(--muted); font-size: 18px; }
.machine-brain { text-align: center; }
.brain-core {
  width: 74px; height: 74px; margin: 0 auto 8px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 34px;
  background: linear-gradient(135deg, #e26a37, #f3b768);
  box-shadow: 0 0 34px rgba(243,183,104,.45);
  animation: brainPulse 2.6s ease-in-out infinite;
}
@keyframes brainPulse {
  0%, 100% { box-shadow: 0 0 24px rgba(243,183,104,.35); }
  50% { box-shadow: 0 0 44px rgba(247,140,94,.6); }
}
.brain-label { font-weight: 600; font-size: 14px; }
.brain-sub { font-size: 12px; color: var(--muted); }

/* ---------- receipt-backed harness control plane ---------- */
.harness-view {
  overflow-y: auto; overflow-x: hidden;
  background:
    radial-gradient(900px 560px at 92% -12%, rgba(80, 216, 255, .105), transparent 66%),
    radial-gradient(760px 520px at 2% 24%, rgba(255,149,103, .105), transparent 70%),
    linear-gradient(180deg, #1c0f09 0%, #13110d 64%, #110f0b 100%);
}
.harness-view::before {
  content: ""; position: fixed; inset: 68px 0 0; pointer-events: none; opacity: .2;
  background-image: linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}
.harness-shell {
  width: min(100%, 1380px); margin: 0 auto; padding: 34px clamp(18px, 3vw, 40px) 70px;
  position: relative; z-index: 1;
}
.harness-hero {
  min-height: 168px; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; padding: clamp(24px, 3vw, 34px); border: 1px solid rgba(255,255,255,.075);
  border-radius: 24px; overflow: hidden; position: relative;
  background:
    radial-gradient(520px 220px at 8% 8%, rgba(80,216,255,.09), transparent 74%),
    linear-gradient(135deg, rgba(39,34,26,.96), rgba(28,25,19,.95));
  box-shadow: 0 22px 60px rgba(0,0,0,.23); backdrop-filter: blur(18px) saturate(130%);
}
.harness-hero::after {
  content: ""; position: absolute; width: 360px; height: 360px; inset-inline-end: -210px;
  top: -240px; border-radius: 50%; border: 1px solid rgba(80,216,255,.13);
  box-shadow: 0 0 0 58px rgba(255,162,122,.025), 0 0 0 116px rgba(255,170,134,.018);
  pointer-events: none;
}
.harness-hero-copy { min-width: 0; position: relative; z-index: 1; }
.harness-hero h1 {
  font-size: clamp(34px, 4.3vw, 56px); line-height: 1; letter-spacing: -.04em;
  margin: 9px 0 12px;
}
.harness-hero-copy > p:last-child { color: #c0bbb3; font-size: 14px; line-height: 1.6; max-width: 690px; }
.harness-hero-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.harness-live {
  display: flex; align-items: center; gap: 10px; min-width: 178px; padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.065); border-radius: 12px; background: rgba(255,255,255,.028);
}
.harness-live-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 5px rgba(242,184,75,.09); }
.harness-live-dot.online { background: #54ddab; box-shadow: 0 0 0 5px rgba(84,221,171,.09); }
.harness-live strong, .harness-live small { display: block; }
.harness-live strong { font-size: 11.5px; color: #f7e4dc; }
.harness-live small { margin-top: 2px; color: #928b80; font-size: 9.5px; }
.control-btn {
  min-height: 42px; border-radius: 11px; border: 1px solid rgba(255,255,255,.075);
  padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  color: #f9e1d7; background: rgba(255,255,255,.04); cursor: pointer; font-size: 12px; font-weight: 650;
}
.control-btn.primary { color: #ffede5; background: rgba(255,162,122,.14); border-color: rgba(255,162,122,.2); }
.control-btn .ui-icon { width: 16px; height: 16px; }
.control-btn:active, .harness-nav-btn:active, .run-row:active, .receipt-filter:active { transform: scale(.97); }
.control-btn:disabled { opacity: .48; cursor: default; transform: none; }

.harness-nav {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 14px 0;
  padding: 6px; border: 1px solid rgba(255,255,255,.06); border-radius: 17px;
  background: rgba(32,18,12,.78); backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}
.harness-nav-btn {
  min-width: 0; min-height: 58px; border: 1px solid transparent; border-radius: 12px;
  padding: 10px 12px; text-align: start; cursor: pointer; color: #a39c91; background: transparent;
}
.harness-nav-btn span, .harness-nav-btn small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.harness-nav-btn span { direction: ltr; text-align: start; font-size: 12px; font-weight: 750; letter-spacing: -.01em; }
.harness-nav-btn small { font-size: 9.5px; margin-top: 3px; }
.harness-nav-btn.active { color: #ffeee7; background: rgba(255,162,122,.105); border-color: rgba(255,162,122,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }

.harness-panel { min-width: 0; }
.harness-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.harness-stat {
  min-height: 116px; padding: 17px; border: 1px solid rgba(255,255,255,.067); border-radius: 16px;
  display: flex; flex-direction: column; background: rgba(33,29,23,.8); box-shadow: 0 15px 38px rgba(0,0,0,.16);
  backdrop-filter: blur(14px);
}
.harness-stat-label { color: #aba59a; font-size: 11px; }
.harness-stat-value { margin: 10px 0 8px; font-size: clamp(27px, 2.8vw, 38px); line-height: 1; font-weight: 760; letter-spacing: -.04em; font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
.harness-stat-note { margin-top: auto; color: #857e72; font-size: 9.5px; line-height: 1.45; }
.harness-stat.good .harness-stat-value { color: #79e8bd; }
.harness-stat.warn .harness-stat-value { color: #ffd487; }
.harness-stat.accent .harness-stat-value { color: #ffc2a8; }

.control-surface {
  min-width: 0; border: 1px solid rgba(255,255,255,.068); border-radius: 19px;
  background: rgba(33,29,23,.82); box-shadow: 0 18px 46px rgba(0,0,0,.18); backdrop-filter: blur(16px);
}
.surface-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 19px 20px 15px; }
.surface-heading h2 { margin-top: 4px; font-size: 19px; letter-spacing: -.02em; }
.mission-heading { align-items: center; border-bottom: 1px solid rgba(255,255,255,.055); }
.run-filters { display: flex; align-items: center; gap: 7px; }
.run-filters input, .run-filters select, .policy-rules-head input {
  min-height: 36px; border: 1px solid rgba(255,255,255,.075); border-radius: 9px;
  padding: 0 10px; color: var(--text); background: #252018; font-size: 11px;
}
.run-filters input { width: 210px; }
.run-filters select { min-width: 112px; }
.mission-layout { display: grid; grid-template-columns: minmax(280px, .42fr) minmax(0, 1fr); min-height: 590px; }
.run-list {
  min-width: 0; max-height: 720px; overflow-y: auto; padding: 9px;
  border-inline-end: 1px solid rgba(255,255,255,.055); scrollbar-width: thin;
}
.run-row {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 10px; padding: 12px 10px; border: 1px solid transparent; border-radius: 12px;
  color: #d5d0c8; background: transparent; text-align: start; cursor: pointer;
}
.run-row + .run-row { margin-top: 3px; }
.run-row.active { background: rgba(255,162,122,.09); border-color: rgba(255,162,122,.13); }
.run-state-dot { width: 8px; height: 8px; border-radius: 50%; background: #999388; box-shadow: 0 0 0 4px rgba(153,147,136,.08); }
.run-state-dot.running { background: var(--accent); box-shadow: 0 0 0 4px rgba(255,162,122,.10); }
.run-state-dot.completed { background: #54ddab; box-shadow: 0 0 0 4px rgba(84,221,171,.09); }
.run-state-dot.waiting, .run-state-dot.blocked { background: var(--warning); box-shadow: 0 0 0 4px rgba(242,184,75,.09); }
.run-state-dot.failed, .run-state-dot.cancelled { background: #ff727b; box-shadow: 0 0 0 4px rgba(255,114,123,.09); }
.run-row-main { min-width: 0; }
.run-row-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f4e3dc; font-size: 11.5px; direction: ltr; text-align: start; }
.run-row-meta { display: flex; gap: 6px; margin-top: 4px; color: #8f887c; font-size: 9.5px; direction: ltr; justify-content: flex-end; }
.run-proof { text-align: center; direction: ltr; }
.run-proof strong, .run-proof small { display: block; }
.run-proof strong { color: #f8e4dc; font-size: 12px; font-variant-numeric: tabular-nums; }
.run-proof small { color: #817b6f; font-size: 8.5px; margin-top: 2px; }
.run-list-empty { padding: 46px 18px; color: #8f887d; text-align: center; font-size: 12px; line-height: 1.6; }

.run-detail { min-width: 0; padding: 20px; overflow: hidden; }
.run-detail-empty { min-height: 510px; display: grid; place-content: center; justify-items: center; text-align: center; color: #8f887c; }
.detail-empty-mark { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; border: 1px solid rgba(255,162,122,.14); background: rgba(255,162,122,.065); color: var(--accent); font-size: 23px; direction: ltr; }
.run-detail-empty h3 { margin-top: 13px; color: #dfdbd3; font-size: 16px; }
.run-detail-empty p { max-width: 340px; margin-top: 7px; font-size: 11px; line-height: 1.55; }
.run-detail-head { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 17px; border-bottom: 1px solid rgba(255,255,255,.055); }
.run-detail-head h3 { font-size: 21px; line-height: 1.2; margin: 5px 0 7px; direction: ltr; text-align: start; }
.run-id { color: #8d867a; font-size: 9px; direction: ltr; text-align: start; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.run-state-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 9px; border-radius: 999px; color: #d1cbc2; background: rgba(255,255,255,.05); font-size: 9.5px; }
.run-state-badge.completed { color: #79e8bd; background: rgba(84,221,171,.09); }
.run-state-badge.running { color: #ffc2a8; background: rgba(255,162,122,.10); }
.run-state-badge.waiting, .run-state-badge.blocked { color: #ffd487; background: rgba(242,184,75,.09); }
.run-state-badge.failed, .run-state-badge.cancelled { color: #ff9ca3; background: rgba(255,114,123,.09); }
.run-head-actions { display: flex; gap: 7px; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; }
.run-head-actions .control-btn { min-height: 34px; font-size: 10px; }
.run-proof-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 14px 0; }
.proof-cell { padding: 10px; border: 1px solid rgba(255,255,255,.05); border-radius: 11px; background: rgba(255,255,255,.024); }
.proof-cell strong, .proof-cell span { display: block; }
.proof-cell strong { direction: ltr; text-align: start; font-size: 16px; font-variant-numeric: tabular-nums; }
.proof-cell span { margin-top: 3px; color: #8d867a; font-size: 8.5px; }
.detail-section { margin-top: 18px; }
.detail-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.detail-section-heading h4 { font-size: 12px; color: #e4e0d9; }
.detail-section-heading span { color: #857e71; font-size: 9px; }
.criteria-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.criterion { min-width: 0; padding: 9px 10px; border: 1px solid rgba(255,255,255,.05); border-radius: 10px; background: rgba(255,255,255,.02); }
.criterion-top { display: flex; align-items: center; gap: 7px; }
.criterion-mark { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: rgba(242,184,75,.11); color: #ffd487; font-size: 9px; }
.criterion.ok .criterion-mark { background: rgba(84,221,171,.11); color: #79e8bd; }
.criterion strong { font-size: 10.5px; color: #dcd7cf; }
.criterion p { margin-top: 5px; color: #8e877b; font-size: 9px; line-height: 1.45; }
.receipt-toolbar { display: flex; gap: 5px; flex-wrap: wrap; }
.receipt-filter { min-height: 26px; padding: 0 8px; border: 1px solid rgba(255,255,255,.06); border-radius: 999px; color: #938c80; background: transparent; cursor: pointer; font-size: 8.5px; }
.receipt-filter.active { color: #f8e2d9; background: rgba(255,162,122,.09); border-color: rgba(255,162,122,.14); }
.receipt-list, .checkpoint-list, .trace-list { display: grid; gap: 6px; }
.receipt-row, .checkpoint-row, .trace-row { min-width: 0; display: grid; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.045); background: rgba(255,255,255,.018); }
.receipt-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.receipt-kind { min-width: 74px; direction: ltr; text-align: start; color: #dad3c7; font-size: 9.5px; font-weight: 700; }
.receipt-copy { min-width: 0; color: #928b7f; font-size: 8.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; }
.receipt-valid { color: #79e8bd; font-size: 9px; }
.receipt-valid.invalid { color: #ff9ca3; }
.checkpoint-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
.checkpoint-seq { color: #817a6d; font-size: 9px; direction: ltr; }
.checkpoint-row strong { display: block; font-size: 10px; color: #dad6ce; }
.checkpoint-row small { display: block; margin-top: 2px; color: #888175; font-size: 8.5px; }
.trace-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
.trace-seq { color: #7f786b; font-size: 8.5px; direction: ltr; }
.trace-copy { min-width: 0; }
.trace-copy strong { display: block; font-size: 9.5px; color: #d1cdc5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trace-copy small { display: block; margin-top: 2px; color: #837c70; font-size: 8px; direction: ltr; text-align: start; }
.trace-status { color: #928c80; font-size: 8px; }
.branch-form { margin-top: 10px; padding: 12px; border: 1px solid rgba(255,162,122,.12); border-radius: 12px; background: rgba(255,162,122,.045); }
.branch-form label { display: block; margin-bottom: 8px; color: #d1cbc2; font-size: 10.5px; line-height: 1.45; }
.branch-form textarea { width: 100%; min-height: 74px; resize: vertical; border: 1px solid rgba(255,255,255,.075); border-radius: 9px; padding: 10px; color: var(--text); background: #24140d; font-size: 11px; line-height: 1.5; }
.branch-actions { display: flex; gap: 7px; justify-content: flex-end; margin-top: 8px; }
.control-feedback { min-height: 18px; margin-top: 8px; color: #aba498; font-size: 9.5px; }
.control-feedback.ok { color: #79e8bd; }
.control-feedback.err { color: #ff9ca3; }

.context-layout, .eval-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 11px; margin-bottom: 11px; }
.source-map, .context-lane-list, .alignment-summary { padding: 0 20px 20px; }
.source-row { display: grid; grid-template-columns: minmax(90px, .42fr) minmax(0, 1fr) 34px; align-items: center; gap: 9px; padding: 7px 0; }
.source-row span { color: #b8b2a7; font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; }
.source-rail, .lane-rail { height: 6px; border-radius: 999px; background: rgba(255,255,255,.05); overflow: hidden; direction: ltr; }
.source-rail i, .lane-rail i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff9264, var(--cyan)); }
.source-row strong { color: #e4e0d8; font-size: 9px; direction: ltr; }
.lane-row { padding: 9px 0; }
.lane-row-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; direction: ltr; }
.lane-row-head span { color: #cec9c1; font-size: 10px; font-weight: 650; }
.lane-row-head strong { color: #90897d; font-size: 9px; }
.manifest-surface, .profile-surface, .rules-surface, .eval-runs-surface { margin-top: 11px; }
.privacy-chip { flex: 0 0 auto; min-height: 25px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 999px; color: #85d9bc; background: rgba(84,221,171,.07); border: 1px solid rgba(84,221,171,.12); font-size: 8.5px; }
.manifest-list { padding: 0 12px 13px; display: grid; gap: 5px; }
.manifest-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 92px 72px; align-items: center; gap: 10px; padding: 10px 9px; border-radius: 10px; color: #928c80; font-size: 9px; direction: ltr; }
.manifest-row:nth-child(odd) { background: rgba(255,255,255,.018); }
.manifest-row strong { color: #d7d3cb; font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manifest-budget { display: flex; align-items: center; gap: 6px; }
.manifest-budget .source-rail { flex: 1; }
.manifest-badges { display: flex; gap: 4px; }
.manifest-badge { padding: 3px 5px; border-radius: 5px; color: #aaa397; background: rgba(255,255,255,.04); font-size: 7.5px; }

.policy-profiles { padding: 0 20px 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.policy-profile { min-width: 0; padding: 13px; border: 1px solid rgba(255,255,255,.05); border-radius: 12px; background: rgba(255,255,255,.02); }
.policy-profile-head { display: flex; justify-content: space-between; gap: 8px; direction: ltr; }
.policy-profile-head strong { color: #e6e2db; font-size: 11px; }
.policy-profile-head span { color: #8e877b; font-size: 8.5px; }
.profile-value { margin: 12px 0 7px; color: #ffbb9e; font-size: 24px; line-height: 1; direction: ltr; }
.policy-profile small { color: #888174; font-size: 8.5px; direction: ltr; display: block; }
.policy-rules-head { align-items: center; }
.policy-rules-head input { width: min(260px, 42vw); }
.policy-rule-grid { padding: 0 13px 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.policy-rule { min-width: 0; padding: 12px; border: 1px solid rgba(255,255,255,.05); border-radius: 11px; background: rgba(255,255,255,.019); }
.policy-rule-head { display: flex; justify-content: space-between; gap: 8px; }
.policy-rule h3 { min-width: 0; color: #ddd9d1; font-size: 10.5px; line-height: 1.4; }
.policy-priority { flex: 0 0 auto; color: #e7a98e; font-size: 8.5px; direction: ltr; }
.policy-id { display: block; margin-top: 4px; color: #81796c; font-size: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; direction: ltr; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.policy-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; direction: ltr; }
.policy-tag { padding: 3px 6px; border-radius: 6px; color: #aaa498; background: rgba(255,162,122,.055); font-size: 7.5px; }

.eval-chart { height: 238px; padding: 8px 20px 20px; display: flex; align-items: flex-end; gap: 7px; direction: ltr; }
.eval-column { min-width: 0; flex: 1 1 0; height: 100%; display: grid; grid-template-rows: 18px minmax(0, 1fr) 16px; align-items: end; text-align: center; }
.eval-column strong { color: #8f887b; font-size: 8px; font-variant-numeric: tabular-nums; }
.eval-rail { width: min(100%, 24px); height: 100%; margin: 0 auto; border-radius: 7px; background: rgba(255,255,255,.04); display: flex; align-items: flex-end; overflow: hidden; }
.eval-bar { width: 100%; border-radius: inherit; background: linear-gradient(180deg, #54ddab, #ff824d); box-shadow: 0 0 15px rgba(80,216,255,.14); }
.eval-bar.rejected { background: linear-gradient(180deg, #a39c91, #686258); box-shadow: none; }
.eval-column small { color: #7f776a; font-size: 7.5px; }
.alignment-card { min-height: 305px; }
.alignment-hero { padding: 16px; border: 1px solid rgba(255,162,122,.08); border-radius: 13px; background: rgba(255,162,122,.04); }
.alignment-hero strong { display: block; color: #ffc2a8; font-size: 21px; line-height: 1.25; direction: ltr; text-align: start; overflow-wrap: anywhere; }
.alignment-hero span { display: block; color: #918a7e; font-size: 9px; margin-top: 6px; direction: ltr; text-align: start; }
.alignment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 8px; }
.alignment-cell { padding: 10px; border: 1px solid rgba(255,255,255,.045); border-radius: 10px; }
.alignment-cell strong, .alignment-cell span { display: block; }
.alignment-cell strong { color: #e4e0d9; font-size: 14px; direction: ltr; text-align: start; }
.alignment-cell span { color: #857e71; font-size: 8px; margin-top: 3px; }
.eval-run-list { padding: 0 12px 13px; display: grid; gap: 4px; }
.eval-run-row { display: grid; grid-template-columns: 76px 56px minmax(80px, 1fr) 64px 68px; align-items: center; gap: 10px; padding: 9px; border-radius: 9px; color: #928c80; font-size: 8.5px; direction: ltr; }
.eval-run-row:nth-child(odd) { background: rgba(255,255,255,.018); }
.eval-run-row strong { color: #dbd7cf; font-size: 9.5px; }
.eval-adopted { color: #79e8bd; }
.eval-rejected { color: #a39c91; }

@media (hover: hover) and (pointer: fine) {
  .control-btn:hover { color: #fff; border-color: rgba(255,162,122,.24); background: rgba(255,162,122,.11); }
  .control-btn.primary:hover { background: rgba(255,162,122,.21); }
  .harness-nav-btn:hover { color: #e1dbd2; background: rgba(255,255,255,.035); }
  .run-row:hover { background: rgba(255,255,255,.032); }
  .run-row.active:hover { background: rgba(255,162,122,.11); }
  .receipt-filter:hover { color: #dfdad1; border-color: rgba(255,162,122,.14); }
}

/* ---------- admin ---------- */
.admin-seats {
  max-width: 860px; margin: 14px auto 0; padding: 0 16px; width: 100%;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
}
.seat-card {
  background: var(--header); border: 1px solid var(--border-soft); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.seat-head { display: flex; align-items: center; gap: 10px; }
.seat-avatar {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #e26a37, #f3b768);
}
.seat-name { font-weight: 600; font-size: 15px; }
.seat-role {
  margin-inline-start: auto; font-size: 11.5px; color: var(--muted);
  border: 1px solid var(--border-soft); border-radius: 999px; padding: 2px 10px;
}
.seat-role.admin { color: #ffd76e; border-color: rgba(255,193,7,.4); }
.seat-stats { display: flex; gap: 14px; font-size: 12.5px; color: var(--accent); }
.seat-autos { display: flex; flex-direction: column; gap: 6px; }
.seat-auto {
  display: flex; align-items: center; gap: 8px; background: var(--panel2);
  border-radius: 9px; padding: 7px 10px; font-size: 12.5px;
}
.seat-auto-app { color: var(--muted); font-size: 11.5px; margin-inline-start: auto; }
.seat-auto-runs { color: var(--accent); font-size: 11.5px; white-space: nowrap; }
.seat-none { color: var(--muted); font-size: 12.5px; }
.admin-log { max-width: 860px; margin: 26px auto 0; padding: 0 16px; width: 100%; }
.admin-log h3 { font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.activity-list {
  background: var(--header); border: 1px solid var(--border-soft); border-radius: 14px;
  overflow: hidden;
}
.activity-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  border-bottom: 1px solid rgba(65,60,52,.5); font-size: 12.5px; flex-wrap: wrap;
}
.activity-row:last-child { border-bottom: 0; }
.act-when { color: var(--muted); white-space: nowrap; direction: ltr; }
.act-user { font-weight: 600; color: var(--accent); }
.act-event { white-space: nowrap; }
.act-detail { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }

/* ---------- modal ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(10,9,7,.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 60; padding: 16px;
}
.modal-card {
  background: var(--header); border-radius: 18px;
  width: min(94vw, 400px); padding: 28px 24px; text-align: center; position: relative;
  max-height: min(88dvh, 760px); overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
#auto-modal .modal-card, #auto-edit-modal .modal-card { width: min(94vw, 620px); text-align: start; }
.modal-close {
  position: absolute; top: 12px; inset-inline-start: 12px; background: transparent;
  border: 0; color: var(--muted); font-size: 16px; cursor: pointer;
}
.modal-logo { width: 52px; height: 52px; border-radius: 13px; background: #fff; object-fit: contain; margin-bottom: 10px; }
.modal-card h3 { font-size: 18px; margin-bottom: 6px; }
.modal-card p { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
#modal-fields { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
#modal-fields label { text-align: start; font-size: 12.5px; color: var(--muted); }
#modal-fields input {
  width: 100%; background: var(--panel2); border: 1px solid var(--border-soft);
  border-radius: 10px; color: var(--text); padding: 11px 13px; font-size: 14.5px;
  direction: ltr;
}
.modal-action {
  margin-top: 18px; width: 100%; background: linear-gradient(135deg, #e26a37, #c8511e);
  border: 0; border-radius: 11px; color: #fff; padding: 13px; font-size: 15px;
  font-weight: 600; cursor: pointer;
}
.modal-action:disabled { opacity: .55; cursor: default; }
/* The MT4 token and endpoint are meant to be read and copied, not typed over. */
a.mt4-download {
  display: block; margin-top: 4px; text-align: center; text-decoration: none;
  box-sizing: border-box;
}
.mt4-copy-row { display: flex; flex-direction: column; gap: 5px; text-align: start; }
.mt4-copy-label { font-size: 12.5px; color: var(--muted); }
.mt4-copy-value {
  width: 100%; background: var(--panel2); border: 1px solid var(--border-soft);
  border-radius: 10px; color: var(--text); padding: 10px 12px; font-size: 13px;
  direction: ltr; text-align: left; word-break: break-all; line-height: 1.5;
  cursor: pointer; font-family: inherit;
}
.mt4-copy-value.copied { border-color: var(--good); color: var(--good); }
.mt4-account {
  margin-top: 6px; font-size: 12.5px; color: var(--muted); text-align: start;
}
.mt4-fact {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  border-bottom: 1px solid var(--border-soft); padding: 8px 2px; font-size: 14px;
}
.mt4-fact:last-of-type { border-bottom: 0; }
.mt4-fact strong { direction: ltr; unicode-bidi: isolate; font-weight: 600; }
.modal-status { margin-top: 10px; font-size: 13px; min-height: 18px; }
.modal-status.ok { color: var(--good); }
.modal-status.err { color: var(--bad); }

/* ---------- Agentic Marketing ---------- */
.marketing-view {
  overflow-y: auto; overflow-x: hidden;
  background:
    radial-gradient(760px 480px at 86% 4%, rgba(255,119,61, .18), transparent 67%),
    radial-gradient(680px 520px at 4% 72%, rgba(255,170,134, .10), transparent 70%),
    linear-gradient(180deg, #190e09 0%, #110f0c 100%);
}
.marketing-view::before {
  content: ""; position: fixed; inset: 68px 0 0; pointer-events: none; opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}
.marketing-shell {
  width: min(100%, 1320px); margin: 0 auto; padding: 34px clamp(18px, 3vw, 40px) 72px;
  position: relative; z-index: 1;
}
.marketing-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 26px;
  min-height: 160px; padding: clamp(24px, 3.5vw, 42px); margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 26px; overflow: hidden;
  background:
    linear-gradient(110deg, rgba(38,21,13,.98), rgba(53,28,17,.90)),
    radial-gradient(420px 240px at 80% 0%, rgba(80,216,255,.15), transparent 70%);
  box-shadow: 0 28px 80px rgba(0,0,0,.28); position: relative;
}
.marketing-hero::after {
  content: ""; position: absolute; width: 360px; height: 360px; inset-inline-end: -190px; top: -235px;
  border: 1px solid rgba(255,162,122,.14); border-radius: 50%; box-shadow: 0 0 0 56px rgba(255,162,122,.03);
}
.marketing-hero h1 {
  margin: 8px 0 10px; font-size: clamp(36px, 4.8vw, 64px); line-height: .96;
  letter-spacing: -.045em; max-width: 680px;
}
.marketing-lede { color: #c5c0b7; max-width: 680px; font-size: 15px; line-height: 1.55; }
.marketing-guardrails { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 360px; }
.marketing-guardrails span, .manual-badge {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px;
  border: 1px solid rgba(255,255,255,.075); border-radius: 999px;
  background: rgba(255,255,255,.04); color: #cecac2; font-size: 11.5px; white-space: nowrap;
}
.guard-dot { width: 7px; height: 7px; border-radius: 50%; background: #54ddab; box-shadow: 0 0 12px rgba(84,221,171,.6); }
.guard-dot.amber { background: var(--warning); box-shadow: 0 0 12px rgba(242,184,75,.5); }
.marketing-alert {
  margin: 12px 0; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(255,114,123,.3); background: rgba(255,114,123,.08); color: #ffb0b6; font-size: 13px;
}
.marketing-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin: 12px 0; }
.marketing-metric {
  min-height: 98px; padding: 15px; border: 1px solid rgba(255,255,255,.065); border-radius: 16px;
  background: rgba(33,29,23,.82); box-shadow: 0 14px 36px rgba(0,0,0,.16);
}
.marketing-metric span { display: block; color: #9c968c; font-size: 10.5px; line-height: 1.25; }
.marketing-metric strong { display: block; margin-top: 12px; font-size: 26px; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.marketing-surface {
  margin-top: 12px; padding: clamp(20px, 2.4vw, 28px); border: 1px solid rgba(255,255,255,.07);
  border-radius: 22px; background: rgba(33,29,23,.88); box-shadow: 0 18px 48px rgba(0,0,0,.19);
  backdrop-filter: blur(16px);
}
.marketing-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 19px; }
.marketing-section-head h2 { margin-top: 5px; font-size: 23px; letter-spacing: -.02em; }
.marketing-section-head > p { color: #9c968c; font-size: 12px; line-height: 1.5; max-width: 390px; }
.marketing-accounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.marketing-account {
  min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px;
  padding: 13px; border: 1px solid rgba(255,255,255,.065); border-radius: 15px;
  background: rgba(255,255,255,.025); color: var(--text); text-align: start; cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.marketing-account:hover { transform: translateY(-1px); border-color: rgba(255,162,122,.3); }
.marketing-account.active { border-color: rgba(255,162,122,.5); background: rgba(255,162,122,.09); box-shadow: inset 0 0 0 1px rgba(255,162,122,.08); }
.account-monogram {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px;
  background: linear-gradient(145deg, #443c2e, #3c2116); color: #ffe4d8; font-weight: 800; font-size: 13px;
}
/* Profile copy is English inside an RTL shell. Without plaintext bidi the line
   is laid out right-to-left and the ellipsis eats the beginning of the sentence. */
.marketing-account strong, .marketing-account small {
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  unicode-bidi: plaintext; text-align: start;
}
.marketing-account strong { font-size: 13.5px; }
.marketing-account small { margin-top: 3px; color: #9f988d; font-size: 10.5px; }
.connection-pip { width: 8px; height: 8px; border-radius: 50%; background: #6a655b; }
.connection-pip.connected { background: #54ddab; box-shadow: 0 0 12px rgba(84,221,171,.5); }
.marketing-grid { display: grid; grid-template-columns: minmax(330px, .72fr) minmax(500px, 1.28fr); gap: 12px; }
.inline-head { align-items: center; }
.x-status { color: #ada79d; font-size: 11.5px; }
.x-status.connected { color: #77e2bb; }
.marketing-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.marketing-form-grid label, .reply-composer label {
  display: flex; flex-direction: column; gap: 7px; color: #a6a096; font-size: 11px; font-weight: 650;
}
.marketing-form-grid input, .offer-inputs input, .reply-composer input, .reply-composer textarea,
.post-slot textarea, .post-slot input {
  width: 100%; border: 1px solid rgba(255,255,255,.075); border-radius: 11px;
  background: rgba(20,11,7,.55); color: var(--text); padding: 10px 11px; font-size: 12.5px; line-height: 1.45;
}
.marketing-form-grid input:focus, .offer-inputs input:focus, .reply-composer input:focus,
.reply-composer textarea:focus, .post-slot textarea:focus, .post-slot input:focus { border-color: rgba(255,162,122,.45); }
.offers-editor { margin-top: 15px; }
.field-label { margin-bottom: 8px; color: #a6a096; font-size: 11px; font-weight: 650; }
.offer-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.marketing-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.marketing-btn {
  min-height: 38px; padding: 0 13px; border: 1px solid rgba(255,255,255,.085); border-radius: 10px;
  background: rgba(255,255,255,.045); color: #f5e4dc; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.marketing-btn:hover { border-color: rgba(255,162,122,.38); background: rgba(255,162,122,.09); }
.marketing-btn:active { transform: translateY(1px); }
.marketing-btn:disabled { opacity: .5; cursor: wait; }
.marketing-btn.primary { border-color: rgba(255,162,122,.28); background: linear-gradient(135deg, #ce5a28, #ce6437); color: #fff; }
.marketing-btn.x-connect { background: #faf9f7; border-color: #faf9f7; color: #13110e; }
.marketing-note { margin-top: 10px; color: #8e887d; font-size: 10.5px; line-height: 1.45; }
.post-slot-list { display: grid; gap: 9px; }
.post-slot {
  border: 1px solid rgba(255,255,255,.062); border-radius: 15px; padding: 14px;
  background: rgba(255,255,255,.022);
}
.post-slot-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.slot-time { color: #fbe7df; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.slot-lane strong { display: block; font-size: 12.5px; }
.slot-lane small { display: block; margin-top: 2px; color: #948e83; font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-chip { padding: 5px 8px; border-radius: 999px; color: #b9b3a9; background: rgba(255,255,255,.05); font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; }
.status-chip.approved { color: #87e8c3; background: rgba(84,221,171,.10); }
.status-chip.scheduled { color: #ffd0bc; background: rgba(255,162,122,.11); }
.status-chip.published { color: #ffd893; background: rgba(242,184,75,.1); }
.post-slot-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(180px, .65fr); gap: 8px; margin-top: 11px; }
.post-slot textarea { resize: vertical; min-height: 96px; }
.post-visual-fields { display: grid; gap: 8px; }
.post-slot-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.post-slot-actions input { width: auto; min-width: 174px; direction: ltr; }
.reply-composer { display: grid; grid-template-columns: minmax(240px, 1.4fr) minmax(150px, .6fr); gap: 10px; align-items: end; }
.reply-wide { grid-column: 1 / -1; }
.reply-composer textarea { resize: vertical; }
.reply-composer .marketing-btn { justify-self: start; }
.reply-queue { display: grid; gap: 8px; margin-top: 17px; }
.reply-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 13px 14px; border: 1px solid rgba(255,255,255,.06); border-radius: 13px; background: rgba(255,255,255,.022);
}
.reply-card a { color: var(--link); font-size: 11px; text-decoration: none; }
.reply-card p { margin-top: 6px; color: #d4d0c9; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.reply-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.reply-empty { padding: 22px; border: 1px dashed rgba(255,255,255,.08); border-radius: 13px; color: #918a7f; text-align: center; font-size: 12px; }
.marketing-toast {
  position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 20; max-width: min(420px, calc(100vw - 28px));
  padding: 12px 15px; border: 1px solid rgba(255,162,122,.26); border-radius: 12px;
  background: rgba(39,34,26,.96); box-shadow: 0 20px 55px rgba(0,0,0,.36); color: #ffe6dc; font-size: 12.5px;
}
.newsroom-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 12px 0; padding: 13px 15px; border: 1px solid rgba(255,255,255,.065);
  border-radius: 14px; background: rgba(28,25,19,.74);
}
.newsroom-toolbar span, .newsroom-toolbar small { display: block; }
.newsroom-toolbar span { color: #f2ded5; font-size: 12px; font-weight: 700; }
.newsroom-toolbar small { margin-top: 3px; color: #918a7f; font-size: 10.5px; }
.add-control { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.add-control span {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px;
  background: rgba(255,162,122,.13); color: #ffc2a8; font-size: 17px; line-height: 1;
}
.newsroom-create-form {
  margin-bottom: 14px; padding: 17px; border: 1px solid rgba(255,162,122,.18);
  border-radius: 16px; background: linear-gradient(145deg, rgba(102,54,34,.18), rgba(23,12,8,.5));
}
.form-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.form-intro strong { font-size: 14px; }
.form-intro span { color: #9c968c; font-size: 10.5px; }
.newsroom-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.newsroom-fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.newsroom-fields label, .newsroom-wide-field, .profile-controls > label {
  display: flex; flex-direction: column; gap: 7px; color: #a6a096; font-size: 11px; font-weight: 650;
}
.newsroom-fields input, .newsroom-profile-fields textarea, .newsroom-wide-field textarea,
.profile-controls select {
  width: 100%; border: 1px solid rgba(255,255,255,.075); border-radius: 11px;
  background: rgba(20,11,7,.55); color: var(--text); padding: 10px 11px; font-size: 12.5px; line-height: 1.45;
}
.newsroom-profile-fields textarea, .newsroom-wide-field textarea { resize: vertical; min-height: 78px; }
.newsroom-wide-field { margin-top: 11px; }
.profile-controls {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end;
  gap: 9px; margin-top: 12px; padding: 12px; border: 1px solid rgba(255,255,255,.055);
  border-radius: 13px; background: rgba(255,255,255,.018);
}
.switch-row {
  min-height: 39px; flex-direction: row !important; align-items: center; gap: 9px !important;
  padding: 0 10px; border: 1px solid rgba(255,255,255,.06); border-radius: 10px;
  background: rgba(20,11,7,.38);
}
.switch-row input { accent-color: #e87b4c; }
.newsroom-empty {
  grid-column: 1 / -1; min-height: 82px; display: grid; place-items: center; padding: 18px;
  border: 1px dashed rgba(255,255,255,.09); border-radius: 14px; color: #918a7f;
  text-align: center; font-size: 12px; line-height: 1.5;
}
.distribution-server-list { display: grid; gap: 9px; }
.distribution-server {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 11px;
  padding: 14px; border: 1px solid rgba(255,255,255,.06); border-radius: 14px;
  background: rgba(255,255,255,.022);
}
.server-health { width: 8px; height: 8px; border-radius: 50%; background: #736d63; }
.server-health.healthy { background: #54ddab; box-shadow: 0 0 13px rgba(84,221,171,.55); }
.server-health.degraded { background: #f2b84b; box-shadow: 0 0 13px rgba(242,184,75,.45); }
.server-health.unavailable { background: #ff727b; box-shadow: 0 0 13px rgba(255,114,123,.38); }
.distribution-server strong, .distribution-server small { display: block; }
.distribution-server strong { font-size: 12.5px; }
.distribution-server small {
  max-width: 330px; margin-top: 3px; color: #918a7f; font-size: 9.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.distribution-server .server-routing { margin-top: 2px; color: #b4ac9d; }
.server-stats { text-align: end; }
.server-stats span, .server-stats b { display: block; }
.server-stats span { color: #9b958a; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.server-stats b { margin-top: 4px; color: #dcd7ce; font-size: 10.5px; }
.published-post-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.learning-stamp { margin-bottom: 14px; color: #8c857a; font-size: 10.5px; }
.learning-account { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.06); }
.learning-account:first-of-type { padding-top: 0; border-top: 0; }
.learning-account + .learning-account { margin-top: 18px; }
.learning-account-head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 13px; }
.learning-account-head strong { color: #ffc2a8; font-size: 14px; }
.learning-attribution { flex: 1 1 260px; min-width: 0; color: #999389; font-size: 10px; line-height: 1.45; }
.learning-attribution.warn { color: #e0b07a; }
.learning-cleaned {
  padding: 3px 9px; border-radius: 999px; background: rgba(255,161,120,.11);
  color: #f5b89e; font-size: 9.5px; white-space: nowrap;
}
.learning-loop {
  padding: 14px 15px; border: 1px solid rgba(255,255,255,.062); border-radius: 15px;
  background: linear-gradient(145deg, rgba(255,255,255,.026), rgba(255,255,255,.012));
}
.learning-loop + .learning-loop { margin-top: 9px; }
.learning-loop-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.learning-loop-head h3 { margin: 0; font-size: 12.5px; letter-spacing: -.01em; }
.learning-loop-head span { color: #8c857a; font-size: 10px; }
.learning-steps { list-style: none; margin: 11px 0 0; padding: 0; display: grid; gap: 7px; }
.learning-step {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 10px;
  padding: 8px 11px; border-radius: 11px; background: rgba(255,255,255,.028);
}
.learning-step-verb { font-size: 9.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.learning-step.up .learning-step-verb { color: #7fd4a4; }
.learning-step.down .learning-step-verb { color: #e59090; }
.learning-step-what { min-width: 0; color: #d9d5cf; font-size: 11.5px; }
.learning-step-what b { color: #fff; }
.learning-step-proof { color: #8c857a; font-size: 9.5px; white-space: nowrap; }
.learning-waiting, .learning-pending { margin-top: 10px; color: #8c857a; font-size: 10.5px; line-height: 1.5; }
.learning-best { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; margin-top: 11px; }
.learning-best > span { color: #8c857a; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; }
.learning-best a {
  flex: 1 1 220px; min-width: 0; display: flex; align-items: baseline; gap: 7px;
  color: #d9d5cf; font-size: 10.5px; text-decoration: none;
}
.learning-best a b { color: #ffc2a8; }
.learning-best a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.published-post {
  min-width: 0; display: flex; flex-direction: column; min-height: 180px; padding: 16px;
  border: 1px solid rgba(255,255,255,.062); border-radius: 15px;
  background: linear-gradient(145deg, rgba(255,255,255,.026), rgba(255,255,255,.012));
}
.published-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: #9d978c; font-size: 9.5px; }
.published-post-meta > span:first-child { color: #ffc2a8; font-weight: 750; }
.published-post p {
  display: -webkit-box; margin-top: 12px; color: #d9d5cf; font-size: 12px; line-height: 1.55;
  white-space: pre-wrap; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
}
.published-post-foot {
  display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px;
  color: #8c857a; font-size: 10px;
}
.published-post-foot a { color: #ffb291; text-decoration: none; white-space: nowrap; }
.status-chip.submitted, .status-chip.partial, .status-chip.complete, .status-chip.completed {
  color: #ffd0bc; background: rgba(255,162,122,.11);
}
.status-chip.failed { color: #ffadb3; background: rgba(255,114,123,.1); }

/* ---------- memory graph ---------- */
/* The entity colours are the type legend, so they are declared once here and
   read back out of the stylesheet by the canvas painter. One source of truth
   beats a palette hand-copied into JavaScript. */
#view-memory {
  --type-person: #ffa27a;
  --type-organization: #54ddab;
  --type-artifact: #f2b84b;
  --type-concept: #ffaa86;
  --type-data: #50d8ff;
  --type-method: #ff9f6b;
  --type-content: #f6cc95;
  --type-event: #ff8fa3;
  --type-location: #8fd694;
  --type-unknown: #aca69a;
}
.memory-ask { position: relative; margin-bottom: 14px; }
.memory-ask-field {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px;
  border: 1px solid rgba(255,255,255,.085); border-radius: 16px;
  background: var(--panel-glass); box-shadow: 0 16px 44px rgba(0,0,0,.22);
  backdrop-filter: blur(16px);
}
.memory-ask-field:focus-within { border-color: rgba(255,162,122,.42); box-shadow: 0 16px 44px rgba(0,0,0,.24), 0 0 0 3px rgba(255,162,122,.11); }
.memory-ask-field > .ui-icon { flex: 0 0 auto; width: 19px; height: 19px; fill: none; stroke: #aca69a; stroke-width: 2; stroke-linecap: round; }
.memory-ask-field input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--text);
  font-size: 15px; padding: 10px 0; outline: 0;
}
.memory-ask-field input::placeholder { color: #8a8378; }
.memory-ask-btn {
  flex: 0 0 auto; border: 0; cursor: pointer; border-radius: 11px; min-height: 40px; padding: 0 16px;
  color: #23130c; background: linear-gradient(135deg, #ffaf8c, #e8885f); font-weight: 700; font-size: 13.5px;
}
.memory-ask-btn:disabled { opacity: .55; cursor: wait; }
.memory-suggest {
  position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 6; overflow: hidden auto;
  max-height: 300px; padding: 6px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px;
  background: #25211a; box-shadow: var(--shadow-lg);
}
.memory-suggest button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 11px; border: 0;
  border-radius: 10px; background: transparent; color: #f3e2db; font-size: 13.5px; text-align: start;
  cursor: pointer;
}
.memory-suggest button:hover, .memory-suggest button[aria-selected="true"] { background: rgba(255,162,122,.13); color: #fff; }
.memory-suggest button span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memory-answer { margin-bottom: 14px; }
.memory-answer .card-heading h2 { font-size: 17px; line-height: 1.4; }
.memory-answer-body { display: grid; gap: 11px; }
.memory-answer-note { color: var(--muted); font-size: 12.5px; }
.memory-answer-deep { color: #f2e0d9; font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.memory-fact {
  padding: 12px 13px; border: 1px solid rgba(255,255,255,.055); border-radius: 13px;
  background: rgba(255,255,255,.028);
}
.memory-fact-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.memory-fact-head strong { font-size: 14px; }
.memory-fact p { color: #cac5bc; font-size: 12.5px; line-height: 1.6; }
.memory-excerpt { color: #bab4a9; font-size: 12px; line-height: 1.6; border-inline-start: 2px solid rgba(255,162,122,.3); padding-inline-start: 11px; }
.memory-deep-btn {
  margin-top: 13px; width: 100%; min-height: 42px; cursor: pointer; border-radius: 12px;
  border: 1px dashed rgba(255,162,122,.32); background: rgba(255,162,122,.06);
  color: #f5c0a9; font-size: 13px;
}
.memory-deep-btn:disabled { opacity: .6; cursor: wait; }
.memory-graph-card, .skills-graph-card { margin-top: 14px; position: relative; }
/* Every other trend pill holds two words, so the shared rule keeps them on one
   line. This one holds a sentence ("18 entities, 111 connections · closest
   shown"), and nowrap pushed it 28px past the card's own padding on a phone. */
#memory-graph-meta { white-space: normal; text-align: right; min-width: 0; }
/* On a wide screen the stage used to be a 2.6:1 letterbox with the entity
   details stacked underneath it. A spring layout settles into a roughly round
   cluster, so that shape guaranteed a small graph floating in empty margins.
   Details beside the map instead: the width gets used and the stage gets an
   aspect the layout can actually fill. */
@media (min-width: 981px) {
  .memory-graph-card, .skills-graph-card {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
    gap: 18px; align-items: start;
  }
  .memory-graph-card > .card-heading,
  .skills-graph-card > .card-heading { grid-column: 1 / -1; margin-bottom: 4px; }
  .memory-stage-wrap { min-width: 0; }
  .memory-node { margin-top: 0; max-height: 596px; overflow-y: auto; }
}
.memory-stage {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.05);
  background:
    radial-gradient(620px 320px at 22% 12%, rgba(80,216,255,.07), transparent 72%),
    linear-gradient(150deg, rgba(32,28,22,.96), rgba(23,21,16,.98));
}
#memory-canvas { display: block; width: 100%; height: 440px; touch-action: none; cursor: grab; }
#memory-canvas.dragging { cursor: grabbing; }
.memory-stage-msg {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px;
  color: var(--muted); font-size: 13px; text-align: center; pointer-events: none;
}
.memory-stage-msg.hidden { display: none !important; }
/* Under the stage, not floating on it: laid over the canvas the legend sat on
   top of real nodes and hid the very labels it was explaining. */
.memory-legend { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.memory-legend span {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,.045); color: #cec9c0; font-size: 10.5px;
}
.memory-legend i { width: 7px; height: 7px; border-radius: 50%; }
.memory-stage-hint { margin-top: 11px; color: #918a7f; font-size: 11.5px; line-height: 1.5; }
.memory-node {
  margin-top: 13px; padding: 15px; border-radius: 15px;
  border: 1px solid rgba(255,162,122,.18); background: rgba(255,162,122,.055);
}
.memory-node-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.memory-node-head h3 { margin-top: 7px; font-size: 19px; letter-spacing: -.015em; }
.memory-node-desc { margin-top: 10px; color: #d8d3ca; font-size: 13px; line-height: 1.65; }
.memory-node-kicker {
  margin: 16px 0 9px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase;
}
.memory-node-links { display: flex; flex-wrap: wrap; gap: 7px; }
.memory-node-links button {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 7px 11px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.075); border-radius: 999px; background: rgba(255,255,255,.035);
  color: #e5e1da; font-size: 12px;
}
.memory-node-links button:hover { border-color: rgba(255,162,122,.4); color: #fff; }
.memory-node-links button i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.memory-node-links button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memory-node-links button small { color: #9e978b; font-variant-numeric: tabular-nums; }
.memory-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.memory-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,.05); color: #cdc9c1; font-size: 11.5px;
}
.memory-today-line { color: #d9d5cd; font-size: 14px; line-height: 1.65; }
.memory-rank { display: grid; gap: 7px; }
.memory-rank-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 11px; background: rgba(255,255,255,.035); cursor: pointer;
  border: 1px solid transparent; color: #ded9d1; font-size: 12.5px; text-align: start; width: 100%;
}
.memory-rank-row:hover { border-color: rgba(255,162,122,.32); }
.memory-rank-row i { width: 8px; height: 8px; border-radius: 50%; }
.memory-rank-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memory-rank-row strong { color: #f8eeea; font-size: 12px; font-variant-numeric: tabular-nums; }
/* overflow-hidden so each bar can carry a full-height invisible hit area
   without it spilling over the card: one bar of a 30-day chart is ~9px wide on
   a phone, which is a fine thing to look at and an impossible thing to tap. */
.memory-growth { display: flex; align-items: flex-end; gap: 3px; height: 132px; overflow: hidden; }
.memory-growth button {
  flex: 1 1 0; min-width: 0; border-radius: 3px 3px 0 0; border: 0; padding: 0;
  background: linear-gradient(180deg, rgba(255,162,122,.9), rgba(255,162,122,.24));
  min-height: 2px; position: relative; cursor: pointer; touch-action: manipulation;
}
.memory-growth button::after { content: ""; position: absolute; inset-inline: -1px; bottom: 0; height: 132px; }
.memory-growth button[data-today="1"] { background: linear-gradient(180deg, #7ae0b6, rgba(84,221,171,.3)); }
.memory-growth button[data-picked="1"] { background: linear-gradient(180deg, #fff, rgba(255,255,255,.45)); }
.memory-growth button:hover { filter: brightness(1.25); }
.memory-day-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.memory-day-back {
  padding: 5px 11px; border-radius: 999px; cursor: pointer; font-size: 11.5px;
  border: 1px solid rgba(255,162,122,.32); background: rgba(255,162,122,.09); color: #f3dacf;
}
.memory-day-back:hover { border-color: rgba(255,162,122,.6); color: #fff; }
.memory-prefs { display: grid; gap: 9px; max-height: 430px; overflow-y: auto; }
.memory-pref {
  padding: 12px 13px; border-radius: 12px; background: rgba(255,255,255,.032);
  border-inline-start: 2px solid rgba(255,170,134,.45);
}
.memory-pref-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.memory-pref-head span { color: #f8d4a5; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.memory-pref-head time { color: #979085; font-size: 10.5px; direction: ltr; font-variant-numeric: tabular-nums; }
.memory-pref p { color: #d7d3cb; font-size: 12.5px; line-height: 1.62; }
.memory-analysis { display: grid; gap: 8px; }
.memory-analysis-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 11px;
  padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.032);
}
.memory-analysis-row strong { font-size: 18px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.memory-analysis-row.up strong { color: #79e8bd; }
.memory-analysis-row.down strong { color: #ff9ca3; }
.memory-analysis-row p { color: #c7c2ba; font-size: 12.5px; line-height: 1.55; }
.memory-types { display: grid; gap: 7px; }
.memory-type-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 44px; align-items: center; gap: 9px; font-size: 12px; color: #ccc7be; }
.memory-type-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.memory-type-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.memory-type-bar i { display: block; height: 100%; border-radius: 999px; }
.memory-type-row em { color: #aba59a; font-style: normal; font-size: 11px; text-align: end; font-variant-numeric: tabular-nums; }
/* After the base #memory-canvas height above, or it loses the tie on order. */
@media (min-width: 981px) { #memory-canvas { height: 520px; } }

@media (max-width: 980px) {
  .pulse-panel { grid-template-columns: 124px minmax(180px, .7fr) minmax(300px, 1.2fr); gap: 20px; }
  .pulse-components { grid-template-columns: 1fr; }
  .primary-grid, .secondary-grid { grid-template-columns: 1fr; }
  .insights-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .context-layout, .eval-layout { grid-template-columns: 1fr; }
  .policy-profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .policy-rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mission-layout { grid-template-columns: minmax(240px, .36fr) minmax(0, 1fr); }
  .marketing-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .marketing-grid { grid-template-columns: 1fr; }
  .marketing-accounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .newsroom-fields.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-controls { grid-template-columns: 1fr 1fr; }
  .profile-controls > label:last-child { grid-column: 1 / -1; }
  .tasks-board { grid-template-columns: minmax(280px, .42fr) minmax(0, .58fr); }
  .task-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .app { min-height: 100dvh; height: 100dvh; }
  .topbar { min-height: 62px; padding: 9px 12px; gap: 9px; }
  .dashboard-view::before { inset-block-start: 62px; }
  .harness-view::before { inset-block-start: 62px; }
  .marketing-view::before { inset-block-start: 62px; }
  .tasks-view::before { inset-block-start: 62px; }
  .dashboard-shell { padding: 24px 14px calc(28px + env(safe-area-inset-bottom)); }
  .command-head { display: block; margin-bottom: 18px; }
  .command-head h1 { font-size: 36px; margin-top: 7px; }
  .command-sub { font-size: 13.5px; }
  .dashboard-controls { width: 100%; margin-top: 18px; }
  .dashboard-controls select { flex: 1; min-width: 0; }
  .pulse-panel { grid-template-columns: 108px minmax(0, 1fr); gap: 16px; padding: 19px 16px; border-radius: 20px; }
  .pulse-ring { width: 108px; }
  .pulse-ring span { font-size: 32px; }
  .pulse-ring small { bottom: 23px; font-size: 9px; }
  .pulse-copy h2 { font-size: 23px; }
  .pulse-copy > p:not(.section-kicker) { font-size: 11.5px; }
  .updated-at { margin-top: 7px; }
  .pulse-components { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .pulse-component { padding: 9px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-block: 10px; }
  .kpi-card { min-height: 126px; padding: 15px; border-radius: 15px; }
  .kpi-value { font-size: 29px; }
  .kpi-footer { display: block; }
  .kpi-delta { display: inline-block; margin-top: 6px; }
  .dashboard-grid { margin-top: 10px; gap: 10px; }
  .dash-card { padding: 17px 15px; border-radius: 17px; }
  .activity-chart { height: 190px; gap: 4px; }
  .insights-list { display: flex; }
  .insight-head { grid-template-columns: auto minmax(0, 1fr); }
  .confidence { grid-column: 2; }
  .evolution-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* memory graph on a phone: the field stacks so the button keeps a real
     touch target, and the canvas gets a taller-than-wide stage because a
     force layout in a letterbox pushes every label off the edge. */
  /* Two rows, not three: the magnifier keeps the input company instead of
     sitting alone on a line of its own. */
  .memory-ask-field {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px;
    padding: 11px 13px; border-radius: 15px;
  }
  .memory-ask-field > .ui-icon { align-self: center; }
  .memory-ask-field input { padding: 6px 0; }
  .memory-ask-btn { grid-column: 1 / -1; min-height: 42px; }
  /* Refresh is secondary: it must not out-shout the search field under it. */
  .memory-refresh { margin-top: 16px; min-height: 40px; padding-inline: 18px; }
  #memory-canvas { height: 66vw; max-height: 380px; min-height: 290px; }
  .memory-legend { gap: 4px; margin-top: 9px; }
  .memory-legend span { padding: 3px 8px; font-size: 9.5px; }
  .memory-node-head h3 { font-size: 17px; }
  .memory-growth { height: 108px; gap: 2px; }
  .memory-growth button::after { height: 108px; }
  .memory-prefs { max-height: none; }
  .memory-type-row { grid-template-columns: 78px minmax(0, 1fr) 40px; font-size: 11.5px; }
  .memory-answer .card-heading h2 { font-size: 15.5px; }
  .harness-shell { padding: 20px 12px calc(30px + env(safe-area-inset-bottom)); }
  .harness-hero { min-height: 0; display: block; padding: 21px 17px; border-radius: 19px; }
  .harness-hero h1 { font-size: 36px; }
  .harness-hero-copy > p:last-child { font-size: 12px; }
  .harness-hero-actions { margin-top: 18px; justify-content: space-between; }
  .harness-live { flex: 1 1 auto; min-width: 0; }
  .harness-nav {
    grid-template-columns: repeat(4, minmax(145px, 1fr)); overflow-x: auto;
    scroll-snap-type: x proximity; justify-content: start; scrollbar-width: none;
  }
  .harness-nav::-webkit-scrollbar { display: none; }
  .harness-nav-btn { scroll-snap-align: start; }
  .harness-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .harness-stat { min-height: 105px; padding: 14px; }
  .mission-heading { display: block; }
  .run-filters { margin-top: 13px; }
  .run-filters input { flex: 1 1 auto; width: auto; min-width: 0; }
  .mission-layout { display: block; min-height: 0; }
  .run-list { max-height: 295px; border-inline-end: 0; border-bottom: 1px solid rgba(255,255,255,.055); }
  .run-detail { padding: 15px 13px; }
  .run-detail-empty { min-height: 280px; }
  .run-detail-head { display: block; }
  .run-head-actions { margin-top: 12px; justify-content: flex-start; }
  .run-proof-strip { grid-template-columns: repeat(2, 1fr); }
  .surface-heading { padding: 17px 15px 13px; }
  .source-map, .context-lane-list, .alignment-summary { padding: 0 15px 16px; }
  .manifest-row { grid-template-columns: 90px minmax(0, 1fr) 72px; }
  .manifest-badges { display: none; }
  .policy-profiles { padding: 0 14px 15px; }
  .policy-rule-grid { padding: 0 9px 10px; }
  .eval-chart { padding-inline: 14px; gap: 4px; }
  .eval-run-list { overflow-x: auto; }
  .eval-run-row { min-width: 540px; }
  #view-chat .composer-wrap { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  #view-apps, #view-autos, #view-admin, #view-agentic { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
  .marketing-shell { padding: 14px 11px calc(34px + env(safe-area-inset-bottom)); }
  .marketing-hero { min-height: 0; display: block; padding: 22px 17px; border-radius: 19px; }
  .marketing-hero h1 { font-size: 39px; }
  .marketing-lede { font-size: 12.5px; }
  .marketing-guardrails { justify-content: flex-start; max-width: none; margin-top: 18px; }
  .marketing-surface { padding: 17px 14px; border-radius: 17px; }
  .marketing-section-head { display: block; margin-bottom: 14px; }
  .marketing-section-head > p { margin-top: 7px; }
  .inline-head { display: flex; }
  .newsroom-toolbar { align-items: stretch; }
  .newsroom-toolbar > div { min-width: 0; }
  .form-intro { display: block; }
  .form-intro span { display: block; margin-top: 5px; }
  .newsroom-fields, .newsroom-fields.three, .profile-controls { grid-template-columns: 1fr; }
  .profile-controls > label:last-child { grid-column: auto; }
  .published-post-list { grid-template-columns: 1fr; }
  .learning-step { grid-template-columns: 1fr; gap: 3px; }
  .learning-step-proof { white-space: normal; }
  .learning-best a { flex-basis: 100%; }
  .marketing-form-grid { grid-template-columns: 1fr; }
  .offer-inputs { grid-template-columns: 1fr; }
  .post-slot-body { grid-template-columns: 1fr; }
  .post-slot-head { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .reply-composer { grid-template-columns: 1fr; }
  .reply-wide { grid-column: auto; }
  .reply-card { grid-template-columns: 1fr; }
  .reply-card-actions { justify-content: flex-start; }
  .marketing-toast { inset-inline: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .tasks-shell { padding: 14px 11px calc(34px + env(safe-area-inset-bottom)); }
  .tasks-hero { min-height: 0; align-items: flex-start; padding: 22px 17px; border-radius: 19px; }
  .tasks-hero h1 { font-size: 35px; }
  .tasks-hero > div > p:last-child { font-size: 12px; }
  .tasks-refresh { min-height: 38px; padding-inline: 11px; }
  .tasks-refresh span { display: none; }
  .tasks-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block: 9px; }
  .task-stat { min-height: 88px; padding: 13px 14px; }
  .task-stat strong { margin-top: 10px; font-size: 27px; }
  .tasks-board { display: block; min-height: 0; border-radius: 17px; overflow: visible; }
  .tasks-list-panel { padding-top: 17px; border-inline-end: 0; border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 17px 17px 0 0; }
  .tasks-list { max-height: 330px; }
  .task-detail { padding: 19px 15px 22px; }
  .task-detail-empty { min-height: 280px; }
  .task-detail-head { display: block; }
  .task-continue { width: 100%; margin-top: 15px; }
  .task-detail-head h2 { font-size: 23px; }
  .task-detail-grid { grid-template-columns: 1fr; }
  .modal { align-items: flex-end; padding: 0; }
  .modal-card, #auto-modal .modal-card, #auto-edit-modal .modal-card {
    width: 100%; max-width: none; max-height: calc(100dvh - 22px); margin: 0;
    padding: 28px 18px calc(22px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0; border-bottom: 0;
  }
  .modal-close { top: 10px; inset-inline-start: 10px; width: 36px; height: 36px; font-size: 18px; }
}

@media (max-width: 560px) {
  .msg { max-width: 86%; }
  .autos-cards, .admin-seats, .recs-list, .schedules-list { grid-template-columns: minmax(0, 1fr); }
  .machine-flow { flex-direction: column; gap: 10px; }
  .machine-arrow { transform: rotate(90deg); }
  .activity-row { gap: 8px; }
  .pulse-components { grid-template-columns: 1fr; }
  .pulse-component:nth-child(n+5) { display: none; }
  .command-head h1 { font-size: 34px; }
  .tasks-filters { padding-inline: 11px; }
  .task-filter { padding-inline: 8px; }
  .tasks-search { margin-inline: 11px; }
  .tasks-list { padding-inline: 6px; }
  .activity-chart { overflow-x: auto; padding-bottom: 4px; }
  .chart-column { min-width: 18px; }
  .chain-add-row, .sched-row { align-items: stretch; flex-direction: column; }
  .sched-num { width: 100%; }
  .harness-hero-actions { align-items: stretch; }
  .harness-hero-actions .control-btn { flex: 0 0 auto; }
  .criteria-grid, .policy-rule-grid { grid-template-columns: 1fr; }
  .policy-profiles { grid-template-columns: 1fr 1fr; }
  .policy-rules-head { display: block; }
  .policy-rules-head input { width: 100%; margin-top: 12px; }
  .manifest-row { grid-template-columns: 78px minmax(0, 1fr); }
  .manifest-budget { display: none; }
  .receipt-row { grid-template-columns: minmax(64px, auto) minmax(0, 1fr); }
  .receipt-valid { grid-column: 2; }
  .marketing-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-metric { min-height: 86px; padding: 13px; }
  .marketing-accounts { grid-template-columns: 1fr 1fr; }
  .marketing-account { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 10px; gap: 8px; }
  .account-monogram { width: 36px; height: 36px; border-radius: 11px; }
  .marketing-account small { display: none; }
  .newsroom-toolbar { display: block; }
  .newsroom-toolbar .marketing-btn { width: 100%; margin-top: 12px; }
  .marketing-section-head .add-control { margin-top: 12px; }
  .distribution-server { grid-template-columns: 9px minmax(0, 1fr); }
  .server-stats { grid-column: 2; display: flex; justify-content: space-between; text-align: start; }
  .server-stats b { margin-top: 0; }
  .post-slot-actions input { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .harness-hero, .harness-nav, .harness-stat, .control-surface,
  .marketing-hero, .marketing-surface {
    background: #211d17; backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .harness-hero, .harness-nav, .harness-stat, .control-surface,
  .run-row, .policy-rule, .criterion, .marketing-surface,
  .marketing-account, .post-slot, .reply-card { border-color: rgba(255,255,255,.24); }
}

/* ---------- the board: running now + waiting on you ---------- */
.board-view { overflow-y: auto; overflow-x: hidden; }
.board-shell {
  width: min(100%, 1080px); margin: 0 auto;
  padding: 28px clamp(16px, 3vw, 36px) 62px; position: relative; z-index: 1;
}
.board-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding: 24px 26px; border: 1px solid rgba(255,255,255,.075); border-radius: 22px;
  background:
    radial-gradient(520px 220px at 100% 0%, rgba(255,128,74,.17), transparent 72%),
    linear-gradient(135deg, rgba(39,34,26,.96), rgba(28,25,19,.94));
  box-shadow: 0 22px 60px rgba(0,0,0,.23);
}
.board-head h1 { margin: 6px 0 8px; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.06; letter-spacing: -.03em; }
.board-head > div > p:last-child { color: #c0bbb2; font-size: 13.5px; line-height: 1.55; }
.board-section { margin-top: 22px; }
.board-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.board-section-head h2 { font-size: 16px; letter-spacing: -.01em; }
.board-count {
  min-width: 24px; padding: 2px 8px; border-radius: 999px; text-align: center;
  font-size: 12px; font-weight: 700; color: #ffe6dc; background: rgba(255,162,122,.16);
}
.board-cards { display: grid; gap: 11px; }
/* border-beam wraps a running card in its own host; both layers stay
   transparent so the grid keeps laying the cards out unchanged. */
.board-cards > .jafx-host, .board-cards .jafx-slot { display: block; }
.board-card {
  padding: 16px 17px; border: 1px solid rgba(255,255,255,.07); border-radius: 17px;
  background: rgba(35,31,24,.86); box-shadow: 0 14px 38px rgba(0,0,0,.15);
}
.board-card.pending { border-inline-start: 3px solid rgba(255,162,122,.5); }
.board-card.pending.risk-high { border-inline-start-color: rgba(255,114,123,.65); }
.board-card.deciding { opacity: .55; }
.board-card.running.approved {
  border-inline-start: 3px solid rgba(126,231,163,.7);
  background: rgba(21,38,34,.86);
}
.board-card.running.approved .board-when { color: #7ee7a3; font-weight: 650; }
.board-card h3 { margin: 8px 0 0; font-size: 15.5px; line-height: 1.45; font-weight: 650; }
.board-card-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
/* The number and its continue arrow travel together, at the end of the head. */
.board-card-id { display: flex; align-items: center; gap: 7px; min-width: 0; }
.board-when { color: #9a9388; font-size: 11.5px; }
.board-risk {
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: #ff9c72; background: rgba(255,139,89,.1);
}
.board-risk.high { color: #ff9ca3; background: rgba(255,114,123,.1); }
.board-risk.low { color: #75deb7; background: rgba(87,217,167,.1); }
.board-state {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: #ff9c72; background: rgba(255,139,89,.09);
}
.board-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.board-state.running::before { animation: task-pulse 1.6s ease-in-out infinite; }
.board-why { margin-top: 7px; color: #c0bbb2; font-size: 12.5px; line-height: 1.5; }
.board-reasons { margin-top: 5px; color: #9a9388; font-size: 11.5px; line-height: 1.45; }
.board-note {
  width: 100%; margin-top: 11px; padding: 10px 12px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.08); background: rgba(25,14,9,.6);
  color: #fbede7; font: inherit; font-size: 13px;
}
.board-note::placeholder { color: #888277; }
.board-actions { display: grid; grid-template-columns: 2fr 1fr; gap: 9px; margin-top: 11px; }
.board-btn {
  min-height: 46px; border-radius: 12px; border: 1px solid transparent;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.board-btn.yes { color: #06231a; background: #61dfad; }
.board-btn.yes:hover { background: #7ce9bd; }
.board-btn.no { color: #ffbcc1; background: rgba(255,114,123,.11); border-color: rgba(255,114,123,.3); }
.board-btn.no:hover { background: rgba(255,114,123,.19); }
/* A running card carries one button, so it takes the whole row. */
.board-card.running .board-actions { grid-template-columns: 1fr; }
.board-btn.stop { color: #ffc9a8; background: rgba(255,146,86,.11); border-color: rgba(255,146,86,.32); }
.board-btn.stop:hover { background: rgba(255,146,86,.2); }
.board-btn:disabled { opacity: .55; cursor: wait; }
.board-decided { padding: 6px 2px; color: #c0bbb2; font-size: 13px; }
.board-empty {
  padding: 22px 18px; border: 1px dashed rgba(255,255,255,.09); border-radius: 15px;
  color: #9a9388; font-size: 13px; text-align: center;
}
.tab-badge {
  min-width: 19px; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: #06231a; background: #61dfad;
}

@media (max-width: 760px) {
  .board-shell { padding: 12px 11px calc(34px + env(safe-area-inset-bottom)); }
  .board-head { align-items: flex-start; padding: 19px 16px; border-radius: 18px; }
  .board-head h1 { font-size: 27px; }
  .board-head > div > p:last-child { font-size: 12px; }
  .board-card h3 { font-size: 15px; }
  .board-btn { min-height: 50px; }
}

/* ---------- live voice calls ---------- */
.voice-view {
  overflow-y: auto; overflow-x: hidden;
  background:
    radial-gradient(720px 420px at 50% -10%, rgba(255,162,122, .14), transparent 65%),
    radial-gradient(560px 420px at 8% 70%, rgba(244,136,89, .10), transparent 70%),
    linear-gradient(180deg, #1a0e09, #110f0c 74%);
}
.voice-shell {
  max-width: 760px; margin: 0 auto; padding: 26px 18px 64px;
  display: flex; flex-direction: column; gap: 18px;
}
.voice-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.voice-head h1 { margin: 4px 0 6px; font-size: 24px; }
.voice-sub { color: var(--muted); font-size: 13.5px; max-width: 46ch; line-height: 1.5; }

.voice-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 13px; color: var(--text); padding-top: 6px; }
.voice-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.voice-toggle-track {
  position: relative; width: 44px; height: 26px; border-radius: 13px; flex: none;
  background: var(--panel2); border: 1px solid var(--border);
  transition: background .25s ease, border-color .25s ease;
}
.voice-toggle-thumb {
  position: absolute; top: 2px; inset-inline-start: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #b0a99c;
  transition: transform .25s cubic-bezier(.32,.72,.28,1.2), background .25s ease;
}
.voice-toggle input:checked ~ .voice-toggle-track { background: rgba(255,162,122, .25); border-color: var(--accent); }
.voice-toggle input:checked ~ .voice-toggle-track .voice-toggle-thumb { transform: translateX(-18px); background: var(--accent); }
[dir="ltr"] .voice-toggle input:checked ~ .voice-toggle-track .voice-toggle-thumb { transform: translateX(18px); }
.voice-toggle input:focus-visible ~ .voice-toggle-track { outline: 2px solid var(--accent); outline-offset: 3px; }

.voice-plan { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--border); border-radius: 20px; background: var(--panel-glass, var(--panel)); }
.voice-plan label { font-weight: 600; font-size: 14px; }
.voice-plan select { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel2); color: var(--text); font: inherit; font-size: 16px; }
.voice-plan select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#voice-balance { font-size: 20px; font-variant-numeric: tabular-nums; margin: 2px 0 10px; }
#voice-balance-bar { width: 100%; height: 6px; display: block; accent-color: var(--accent); border: 0; border-radius: 4px; overflow: hidden; }
#voice-balance-bar::-webkit-progress-bar { background: var(--panel2); }
#voice-balance-bar::-webkit-progress-value { background: var(--accent); }
.voice-plan-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 10px 0 0; }
.voice-plan .btn { min-height: 46px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel2); color: var(--text); font: inherit; cursor: pointer; }
.voice-plan .btn:disabled { opacity: .5; cursor: default; }
.voice-plan .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.voice-call-card {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 34px 20px 28px; border-radius: 20px;
  background: var(--panel-glass, rgba(33,29,23, .8)); border: 1px solid var(--border);
}
.voice-orb { position: relative; width: 132px; height: 132px; }
.voice-orb-core {
  position: absolute; inset: 14px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffba9c, #ff8c5a 45%, #a8502b 100%);
  box-shadow: 0 0 44px rgba(255,140,90, .35);
  transition: transform .3s ease, box-shadow .3s ease;
}
.voice-orb-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(255,162,122, .4);
  opacity: 0; transform: scale(.82);
}
.voice-orb[data-phase="listening"] .voice-orb-ring { opacity: 1; animation: voice-ring 2.6s ease-out infinite; }
.voice-orb[data-phase="speaking"] .voice-orb-core { animation: voice-breathe 1.1s ease-in-out infinite; }
.voice-orb[data-phase="connecting"] .voice-orb-core { animation: voice-breathe 2.2s ease-in-out infinite; }
/* thinking-orbs drives the call orb: the blue ball becomes a dark lens so the
   light dots read on top of it, and keeps its glow as the ambient halo. */
.voice-orb-fx {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
}
.voice-orb.has-orb .voice-orb-fx { display: flex; }
.voice-orb.has-orb .voice-orb-core {
  background: radial-gradient(circle at 50% 42%, rgba(140,74,46,.55), rgba(32,17,11,.94) 72%);
  box-shadow: 0 0 44px rgba(255,140,90,.28), inset 0 0 40px rgba(255,140,90,.12);
}
.voice-orb.has-orb[data-phase="idle"] .voice-orb-core { opacity: .72; }
@keyframes voice-ring {
  0% { opacity: .8; transform: scale(.82); }
  100% { opacity: 0; transform: scale(1.12); }
}
@keyframes voice-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.voice-phase { color: var(--muted); font-size: 14px; min-height: 20px; }
.voice-call-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 30px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #ff8c5a, #db6e3f); color: #1f0d06;
  font-size: 15.5px; font-weight: 600;
  transition:
    transform .16s cubic-bezier(.23, 1, .32, 1),
    box-shadow .22s cubic-bezier(.23, 1, .32, 1),
    background .22s cubic-bezier(.23, 1, .32, 1);
  box-shadow: 0 10px 26px rgba(255,140,90, .28);
}
.voice-call-btn:active { transform: scale(.97); }
.voice-call-btn:disabled { opacity: .6; cursor: default; }
.voice-call-btn.on { background: linear-gradient(135deg, #ff7d7d, #d84545); color: #1f0606; box-shadow: 0 10px 26px rgba(216, 69, 69, .3); }
.voice-call-btn .ui-icon { width: 18px; height: 18px; }

/* Mute sits under the orb, above the call button: the one control you reach for
   mid-sentence when the room starts talking, so it is the easiest to hit. */
.voice-mute-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,176,142, .3);
  background: rgba(40,22,15, .82); color: #ffddcf;
  font-size: 13.5px; font-weight: 600;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.voice-mute-btn:active { transform: scale(.97); }
.voice-mute-btn .ui-icon { width: 16px; height: 16px; }
.voice-mute-btn .voice-mute-slash { display: none; }
/* Amber, not red: red already means "end the call" two rows down, and muting
   is not hanging up. */
.voice-mute-btn.on {
  background: rgba(255, 176, 71, .18); border-color: rgba(255, 196, 112, .6); color: #ffd08a;
}
.voice-mute-btn.on .voice-mute-slash { display: inline; }

.voice-agent-panel {
  padding: 18px;
  border: 1px solid rgba(255,176,142, .22);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 10%, rgba(255,147,101, .13), transparent 38%),
    rgba(29,16,10, .86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.voice-agent-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}
.voice-agent-head h2 {
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 1.25;
}
.voice-agent-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255,151,107, .95), rgba(243,182,103, .92));
  box-shadow: 0 8px 24px rgba(255,142,94, .26);
  position: relative;
}
.voice-agent-mark::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 2px solid rgba(255, 255, 255, .92);
  border-block-width: 0;
  transform: skewX(-18deg);
}
.voice-agent-stream {
  display: grid;
  gap: 8px;
}
.voice-agent-row {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 12px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .07);
}
.voice-agent-pulse {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: #ffa680;
  box-shadow: 0 0 0 4px rgba(255,166,128, .09);
}
.voice-agent-row[data-state="running"] .voice-agent-pulse {
  background: #6ae0ad;
  box-shadow: 0 0 0 4px rgba(106, 224, 173, .09);
  animation: voice-agent-breathe 1.4s ease-in-out infinite alternate;
}
.voice-agent-row[data-state="done"] .voice-agent-pulse {
  background: #6ae0ad;
  box-shadow: none;
}
.voice-agent-row[data-state="failed"] .voice-agent-pulse {
  background: #ff7487;
  box-shadow: none;
}
.voice-agent-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.voice-agent-phase {
  color: rgba(255,203,181, .72);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.voice-agent-title {
  color: #fff9f6;
  font-size: 13px;
  line-height: 1.35;
}
.voice-agent-body {
  margin: 3px 0 0;
  color: rgba(249,236,231, .68);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@keyframes voice-agent-breathe {
  from { transform: scale(.92); opacity: .68; }
  to { transform: scale(1); opacity: 1; }
}
.voice-hint { color: #8d867b; font-size: 11.5px; }
.voice-volume { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 6px; }
.voice-volume-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--text-dim, #b1ab9f);
}
.voice-volume-value { font-variant-numeric: tabular-nums; font-weight: 600; color: #ffa27a; }
.voice-volume-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px;
  background: transparent; cursor: pointer;
}
.voice-volume-slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px; background: rgba(255,162,122, .22);
}
.voice-volume-slider::-moz-range-track {
  height: 4px; border-radius: 4px; background: rgba(255,162,122, .22);
}
.voice-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -8px;
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: radial-gradient(circle at 32% 30%, #ffba9c, #ff8c5a 60%, #a8502b 100%);
  box-shadow: 0 0 12px rgba(255,140,90, .45);
}
.voice-volume-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: radial-gradient(circle at 32% 30%, #ffba9c, #ff8c5a 60%, #a8502b 100%);
  box-shadow: 0 0 12px rgba(255,140,90, .45);
}
.voice-volume-slider.boosted::-webkit-slider-thumb {
  background: radial-gradient(circle at 32% 30%, #ffd9a1, #ff9d3d 60%, #b45a06 100%);
  box-shadow: 0 0 14px rgba(255, 157, 61, .5);
}
.voice-volume-slider.boosted::-moz-range-thumb {
  background: radial-gradient(circle at 32% 30%, #ffd9a1, #ff9d3d 60%, #b45a06 100%);
}
.voice-volume-hint { color: #8d867b; font-size: 11px; margin: 0; text-align: center; }

.voice-tasks-panel, .voice-transcript-panel {
  border-radius: 16px; border: 1px solid var(--border);
  background: var(--panel); padding: 16px 18px;
}
.voice-tasks-panel h2, .voice-transcript-panel h2 { margin: 0 0 10px; font-size: 14px; color: var(--muted); font-weight: 600; }
.voice-task-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.voice-task-chip {
  border: 1px solid rgba(255,162,122, .5); background: rgba(255,162,122, .12);
  color: var(--accent); border-radius: 999px; padding: 7px 14px; font-size: 12.5px;
  cursor: pointer; transition: background .2s ease;
}
.voice-task-chip.failed { border-color: rgba(216, 69, 69, .5); background: rgba(216, 69, 69, .12); color: #ff9d9d; cursor: default; }
.voice-transcript { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.voice-line { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.5; }
.voice-line-who { font-size: 11px; color: #8d867b; }
.voice-line.user .voice-line-who { color: var(--accent); }
.voice-disabled-note {
  border-radius: 16px; border: 1px dashed var(--border);
  color: var(--muted); padding: 22px 18px; text-align: center; font-size: 13.5px;
}

@media (max-width: 560px) {
  .voice-shell { padding: 18px 12px 56px; }
  .voice-head { flex-direction: column; }
  .voice-orb { width: 108px; height: 108px; }
  .voice-call-btn { width: 100%; justify-content: center; }
}
@media (hover: hover) and (pointer: fine) {
  .voice-call-btn:hover { transform: translateY(-1px); }
  .voice-task-chip:hover { background: rgba(255,162,122, .22); }
}
@media (prefers-reduced-motion: reduce) {
  .voice-orb-core, .voice-orb-ring { animation: none !important; }
  .voice-agent-pulse { animation: none !important; }
  .voice-call-btn { transition: none; }
}


/* ---------------------------------------------------------------------------
   Installed as a home-screen app (iOS/Android standalone).
   There is no browser chrome any more, so the app itself has to keep clear of
   the status bar and the home indicator. The class is set by pwa.js, which
   covers iOS (navigator.standalone) and the display-mode media query at once.
--------------------------------------------------------------------------- */
html.pwa-standalone .topbar { padding-top: calc(10px + env(safe-area-inset-top)); }
html.pwa-standalone .nav-drawer { padding-top: calc(12px + env(safe-area-inset-top)); }
html.pwa-standalone .gate { padding-top: calc(24px + env(safe-area-inset-top)); }
/* the rubber-band bounce shows the page background behind the bar; make it
   match the top bar so the notch area never flashes a different colour */
html.pwa-standalone body { background-color: var(--header); }


/* ---------------------------------------------------------------------------
   Telescope: the machines. Cards read at a glance (is it up, how loaded, how
   full), the detail panel carries the work log, what we learned about the
   machine, and where the conversation about it stopped.
--------------------------------------------------------------------------- */
.devices-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 14px 0; }
.device-card {
  text-align: start; padding: 16px 17px; border-radius: 17px; cursor: pointer;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
  color: inherit; font: inherit; transition: border-color .15s, background .15s;
}
.device-card:hover:not(:disabled) { border-color: rgba(255,162,122,.4); background: rgba(255,162,122,.07); }
.device-card.selected { border-color: rgba(255,162,122,.75); background: rgba(255,162,122,.1); }
.device-card:disabled { opacity: .5; cursor: default; }
.device-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.device-card-head strong { font-size: 15.5px; letter-spacing: -.01em; }
.device-dot { width: 8px; height: 8px; border-radius: 50%; background: #857e72; flex: none; }
.device-card.online .device-dot { background: #79e8bd; box-shadow: 0 0 0 3px rgba(121,232,189,.16); }
.device-role { font-size: 10.5px; color: #ffc2a8; background: rgba(255,162,122,.12); padding: 2px 7px; border-radius: 999px; }
.device-meta { color: #aba59a; font-size: 11.5px; margin: 9px 0 4px; line-height: 1.5; }
.device-state { color: #f2dacf; font-size: 12px; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.device-state span { unicode-bidi: isolate; white-space: nowrap; }
.device-bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,.08); margin-top: 11px; overflow: hidden; }
.device-bar span { display: block; height: 100%; background: linear-gradient(90deg, #79e8bd, #ffd487); }
/* a disk at 98% is the thing this page exists to shout about, and the green
   gradient said nothing */
.device-bar.hot span { background: linear-gradient(90deg, #ffd487, #ff7f8f); }
.devices-detail h3 { font-size: 12px; color: #aba59a; text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 7px; }
.device-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 6px 26px; }
.device-sub { color: #aba59a; font-size: 11.5px; margin-bottom: 6px; }
.device-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.device-chip { font-size: 10.5px; color: #f2dacf; background: rgba(255,255,255,.06); padding: 3px 9px; border-radius: 999px; }
.device-log, .device-list, .device-session { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.device-log li { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: baseline; font-size: 12px; }
.device-log-kind { color: #ffc2a8; font-size: 10px; text-transform: uppercase; }
.device-log-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f2dacf; direction: ltr; text-align: start; }
.device-log-meta { color: #857e72; font-size: 10.5px; white-space: nowrap; }
.device-log li.failed .device-log-title { color: #ff9b9b; }
.device-list li, .device-session li { font-size: 12.5px; color: #f2dacf; line-height: 1.55; }
.device-session li span { color: #aba59a; font-size: 10.5px; margin-inline-end: 7px; text-transform: uppercase; }
.device-log li.empty, .device-list li.empty, .device-session li.empty { color: #857e72; font-size: 12px; }
/* fourteen days of work, one bar a day. A run count is a bucket, not a curve:
   on a machine where one day is 1,300 commands and the next is none, a line
   drawn through the gap invents a slope that never happened. */
.device-days { display: flex; align-items: flex-end; gap: 3px; height: 62px; margin: 4px 0 8px; direction: ltr; }
.device-day { flex: 1; display: flex; align-items: flex-end; height: 100%; }
.device-day b { display: block; width: 100%; min-height: 2px; border-radius: 3px; background: linear-gradient(180deg, #ffa27a, #d0764f); position: relative; }
.device-day b i { position: absolute; inset: auto 0 0 0; display: block; background: #ff7f8f; border-radius: 0 0 3px 3px; }
.device-bad { color: #ff9b9b; }
.devices-detail h3 em { font-style: normal; text-transform: none; letter-spacing: 0; }
.device-mix { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.device-mix li { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; }
.device-mix b { display: block; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #ffa27a, #ffc2a8); min-width: 4px; }
.devices-detail .harness-stat-grid { margin: 14px 0 6px; }
@media (max-width: 640px) {
  .devices-detail .harness-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-days { height: 48px; }
}
.devices-invite { margin-bottom: 14px; }
.devices-cmd {
  display: block; margin: 10px 0; padding: 12px 14px; border-radius: 12px; direction: ltr; text-align: start;
  background: rgba(0,0,0,.32); color: #f2dacf; font-size: 11.5px; word-break: break-all; line-height: 1.6;
}
.devices-invite-actions { display: flex; gap: 8px; }

/* ---------------- projects: long-horizon work ---------------- */
.projects-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 13px; margin: 16px 0; }
.project-card {
  padding: 18px 19px; border: 1px solid rgba(255,255,255,.07); border-radius: 18px;
  background: rgba(35,31,24,.86); box-shadow: 0 14px 38px rgba(0,0,0,.15); cursor: pointer;
  transition: border-color .16s ease, transform .16s ease;
}
.project-card:hover, .project-card:focus-visible { border-color: rgba(255,162,122,.34); transform: translateY(-2px); outline: none; }
.project-card.overdue { border-color: rgba(242,184,75,.42); }
.project-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.project-card h3 { font-size: 17px; letter-spacing: -.02em; margin-bottom: 6px; }
.project-card p { color: #c0bbb2; font-size: 12.5px; line-height: 1.55; }
.project-card-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 11px; color: #aca59a; font-size: 11.5px; }
.project-card-foot .needs-you { color: var(--warning); font-weight: 700; }
.project-card-update { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); color: #aca59a; font-size: 11.5px; }
.project-pill {
  padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  color: #bfe3c0; background: rgba(79,174,78,.16);
}
.project-pill.at_risk { color: #ffd9a0; background: rgba(242,184,75,.16); }
.project-pill.off_track { color: #ffb3b3; background: rgba(224,82,82,.16); }
.project-countdown { color: #ffc2a8; font-size: 11px; font-weight: 700; white-space: nowrap; }
.project-countdown.overdue { color: var(--warning); }
.project-progress { height: 5px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; margin-top: 12px; }
.project-progress span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--cyan)); }

.project-detail {
  margin-top: 18px; padding: 22px clamp(16px, 2.4vw, 28px) 28px;
  border: 1px solid rgba(255,255,255,.075); border-radius: 22px; background: rgba(32,28,21,.92);
  box-shadow: var(--shadow-lg);
}
.project-detail.hidden { display: none; }
.project-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.project-detail-head h2 { font-size: clamp(21px, 2.6vw, 29px); letter-spacing: -.03em; margin: 5px 0 7px; }
.project-detail-head p { color: #c0bbb2; font-size: 13px; line-height: 1.55; max-width: 620px; }
.project-detail-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.project-cadence { display: inline-flex; align-items: center; gap: 7px; color: #aca59a; font-size: 11.5px; }
.project-cadence select, .project-action-status {
  padding: 6px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px;
  background: rgba(0,0,0,.28); color: #f7e3db; font: inherit; font-size: 11.5px;
}
.project-close {
  padding: 7px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px;
  background: transparent; color: #c0bbb2; font: inherit; font-size: 11.5px; cursor: pointer;
}
.project-block { margin-top: 24px; }
.project-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 11px; }
.project-block-head h3 { font-size: 12px; color: #aba59a; text-transform: uppercase; letter-spacing: .06em; }
.project-block-sub { color: #aca59a; font-size: 11.5px; }
.project-context { color: #f2dacf; font-size: 13px; line-height: 1.7; }
.project-kpis { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.project-kpis th, .project-kpis td { padding: 9px 10px; text-align: start; border-bottom: 1px solid rgba(255,255,255,.06); overflow-wrap: anywhere; }
.project-kpis thead th { color: #aba59a; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.project-kpis tbody th { color: #f7e3db; font-weight: 600; }
.project-kpi-now { color: #fff; font-weight: 700; }
.project-kpi-target { color: #ffc2a8; }
.project-kpis .project-pill { display: inline-block; white-space: nowrap; }
.project-milestones, .project-calendar, .project-updates, .project-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.project-milestones li { padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,.035); border-inline-start: 3px solid rgba(255,255,255,.12); }
.project-milestones li.done { border-inline-start-color: var(--good); }
.project-milestones li.doing { border-inline-start-color: var(--accent); }
.project-milestones li strong { display: block; font-size: 13px; }
.project-milestones li small { color: #aca59a; font-size: 11.5px; }
.project-actions-sub { margin: 14px 0 8px; color: #aca59a; font-size: 11.5px; font-weight: 600; }
.project-action { padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,.035); }
.project-action.is-done { opacity: .55; }
.project-action.blocked { background: rgba(224,82,82,.09); }
.project-action-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project-action-toggle {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  background: none; border: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; padding: 0;
}
.project-action-title { font-size: 13px; line-height: 1.45; }
.project-action-meta { color: #aca59a; font-size: 11px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.project-action-state { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; }
.project-action-state.waiting { background: rgba(255,255,255,.08); color: #cbc7bf; }
.project-action-state.running { background: rgba(248,114,56,.16); color: #fca37d; }
.project-action-state.running::before { content: "●"; margin-inline-end: 5px; animation: project-action-pulse 1.4s ease-in-out infinite; }
.project-action-state.done { background: rgba(74,222,128,.14); color: #86efac; }
.project-action-state.blocked { background: rgba(224,82,82,.18); color: #fca5a5; }
.project-action-state.todo { background: rgba(242,184,75,.16); color: #f2b84b; }
.project-action-state.recurring { background: rgba(242,201,147,.16); color: #f8ddba; }
@keyframes project-action-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .project-action-state.running::before { animation: none; } }
.project-card-foot .project-running { color: #fca37d; font-weight: 600; }
.project-action-plan {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07);
  color: #c0bbb2; font-size: 12px; line-height: 1.65;
}
.project-owner-user .project-action { background: rgba(242,184,75,.075); }
.project-cal-item { display: grid; grid-template-columns: auto 96px 1fr; gap: 11px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.project-cal-item.past { opacity: .55; }
.project-cal-mark { color: var(--accent); font-size: 11px; }
.project-cal-item.check .project-cal-mark { color: var(--cyan); }
.project-cal-item.update .project-cal-mark { color: var(--good); }
.project-cal-date { color: #aca59a; font-size: 11px; white-space: nowrap; }
.project-cal-body strong { display: block; font-size: 12.5px; }
.project-cal-body small { color: #aca59a; font-size: 11px; }
.project-updates li { padding: 13px 14px; border-radius: 13px; background: rgba(255,255,255,.035); }
.project-update-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.project-update-head time { color: #aca59a; font-size: 11px; }
.project-updates p { color: #f2dacf; font-size: 12.5px; line-height: 1.6; }
.project-update-metrics { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 9px 0 0; padding: 0; }
.project-update-metrics li { display: flex; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.3); font-size: 11px; }
.project-update-metrics li span { color: #aca59a; }
.project-update-changes { margin-top: 8px; color: #ffc2a8; font-size: 11.5px; }
.project-empty { color: #857e72; font-size: 12.5px; padding: 14px 0; }
@media (max-width: 720px) {
  .projects-list { grid-template-columns: 1fr; }
  .project-detail { padding: 18px 14px 22px; border-radius: 18px; }
  .project-detail-actions { width: 100%; justify-content: space-between; }
  .project-cal-item { grid-template-columns: auto 1fr; }
  .project-cal-date { grid-column: 2; }
  .project-kpis { font-size: 11.5px; table-layout: fixed; }
  .project-kpis th:nth-child(1) { width: 21%; }
  .project-kpis th:nth-child(2) { width: 41%; }
  .project-kpis th:nth-child(3) { width: 23%; }
  .project-kpis th:nth-child(4) { width: 15%; }
  .project-kpis th, .project-kpis td { padding: 7px 6px; }
  .project-kpis .project-pill {
    display: block;
    min-width: 0;
    padding-inline: 4px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }
}
.project-context p, .project-action-plan p { margin: 0 0 10px; }
.project-context p:last-child, .project-action-plan p:last-child { margin-bottom: 0; }

/* --- automations sub-tabs: recurring vs one-off schedules --- */
.autos-subtabs {
  max-width: 860px; margin: 20px auto 0; padding: 0 16px; width: 100%;
  display: flex; gap: 8px;
}
.autos-subtab {
  /* Sized by its own label, not an equal third: with the archive beside them,
     equal thirds broke "תזמונים חד פעמיים" over three lines on a phone. */
  flex: 1 1 auto; min-width: 0;
  background: var(--panel2); border: 1px solid var(--border-soft); color: var(--muted);
  border-radius: 12px; padding: 10px 12px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .15s, color .15s, border-color .15s;
}
.autos-subtab:hover { color: var(--text); border-color: var(--accent); }
.autos-subtab.active {
  background: rgba(243,183,104,.16); color: #fae1c1; border-color: rgba(243,183,104,.45);
}
.autos-subtab-count {
  font-size: 11px; font-weight: 700; line-height: 1;
  background: var(--accent); color: #fff; border-radius: 999px; padding: 3px 7px;
}
.autos-subtab-count.hidden { display: none; }

/* one-off schedule cards */
.once-card { gap: 10px; }
.once-badge {
  flex: none; font-size: 11px; font-weight: 600; border-radius: 999px;
  padding: 3px 10px; white-space: nowrap; border: 1px solid transparent;
}
.once-badge.once-pending   { color: #ffd76e; background: rgba(255,193,7,.14); border-color: rgba(255,193,7,.34); }
.once-badge.once-running   { color: #ffa57f; background: rgba(255,116,56,.15); border-color: rgba(255,116,56,.38); }
.once-badge.once-done      { color: #8fdc8e; background: rgba(79,174,78,.16); border-color: rgba(79,174,78,.4); }
.once-badge.once-failed    { color: #ff9b9b; background: rgba(255,86,86,.14); border-color: rgba(255,86,86,.38); }
.once-badge.once-missed    { color: #ffb27f; background: rgba(255,138,61,.14); border-color: rgba(255,138,61,.36); }
.once-badge.once-cancelled { color: var(--muted); background: var(--chip); border-color: var(--border-soft); }
.once-card.once-done, .once-card.once-cancelled { opacity: .78; }
.once-task {
  font-size: 12.5px; color: var(--muted); line-height: 1.55;
  background: var(--panel2); border-radius: 10px; padding: 10px 12px;
  overflow-wrap: anywhere;
}
.once-foot { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
/* archive cards: the same one-off card, dimmed, with nothing to press. Every
   row here is a schedule that is over, kept only so it can still be read. */
.arch-card { opacity: .8; }
.arch-card:hover { border-color: var(--border-soft); transform: none; }
.once-badge.arch-expired  { color: #ffb27f; background: rgba(255,138,61,.14); border-color: rgba(255,138,61,.36); }
.once-badge.arch-deleted  { color: var(--muted); background: var(--chip); border-color: var(--border-soft); }
.once-badge.arch-finished { color: #8fdc8e; background: rgba(79,174,78,.16); border-color: rgba(79,174,78,.4); }

/* cancel / restore / delete on a one-off, on their own row so a long task
   description never squeezes them off the card on a phone */
.once-acts {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
  padding-top: 4px; border-top: 1px solid var(--border-soft);
}

/* ---------- fluid reading: jump-to-bottom, long-press menu, selection ----------
   The list no longer drags the reader to the end on every poll tick, so it now
   needs a way back down and a menu that survives a long press. */
.jump-bottom {
  position: absolute; z-index: 4;
  inset-inline-end: 14px;
  bottom: calc(74px + env(safe-area-inset-bottom));
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: #fde6dc;
  background: rgba(43,38,30, .96);
  border: 1px solid rgba(247,140,94,.40);
  box-shadow: 0 6px 20px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.25);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: jump-in .18s ease-out;
  touch-action: manipulation;
}
@keyframes jump-in { from { opacity: 0; transform: translateY(8px) scale(.9); } }
.jump-bottom .ui-icon { width: 19px; height: 19px; }
.jump-bottom:active { filter: brightness(1.2); }
.jump-bottom:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.msg-menu {
  position: fixed; z-index: 60; min-width: 176px;
  display: flex; flex-direction: column; padding: 5px;
  border-radius: 14px;
  background: rgba(38,34,27, .97);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 46px rgba(0,0,0,.55);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  animation: picker-in .16s cubic-bezier(.34,1.56,.64,1);
}
.msg-menu-item {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; cursor: pointer;
  color: #f6ece7; font-size: 15px; font-family: inherit;
  padding: 10px 12px; border-radius: 10px; text-align: start;
  touch-action: manipulation;
}
.msg-menu-item .ui-icon { width: 18px; height: 18px; flex: 0 0 18px; opacity: .85; }
.msg-menu-item:active { background: rgba(247,140,94,.16); }
@media (hover: hover) { .msg-menu-item:hover { background: rgba(255,255,255,.07); } }

.chat-toast {
  position: fixed; z-index: 70; left: 50%; transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom));
  padding: 8px 16px; border-radius: 999px;
  background: rgba(38,34,27,.96); color: #f5e6df; font-size: 13.5px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  animation: jump-in .18s ease-out;
  pointer-events: none;
}

/* Touch only. A press and hold opens the menu above instead of the browser's
   own callout, which is what stops an accidental hold from starting a random
   selection; "Select text" then flips this one bubble back to selectable and
   the native handles appear on it. Desktop keeps plain drag-select. */
@media (hover: none) and (pointer: coarse) {
  .msg { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .msg.selectable {
    -webkit-touch-callout: default; -webkit-user-select: text; user-select: text;
  }
}
.msg.selectable { background-image: linear-gradient(rgba(247,140,94,.10), rgba(247,140,94,.10)); }
.msg ::selection, .msg::selection { background: rgba(247,140,94,.45); color: #fff; }

/* Two identical apps on two hostnames is a way to test the wrong one. The badge
   only ever appears on the staging host, so production looks exactly as before. */
.env-badge{
  display:inline-block;margin-inline-start:8px;padding:1px 7px;border-radius:6px;
  font-size:10px;font-weight:800;letter-spacing:.08em;vertical-align:middle;
  background:#ffb45a;color:#1a1206;
}
.env-badge[hidden]{display:none}

/* ---------- layer repair (Fix button + its sheet) ---------- */
/* The row grids are fixed at three tracks, so a fourth child would drop to a
   new line. The button opens its own track only on the rows that carry one. */
.system-row.has-fix { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.pulse-component.has-fix { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.fix-btn {
  border: 1px solid rgba(255,180,90,.45); background: rgba(255,180,90,.12);
  color: #ffcf94; border-radius: 8px; padding: 4px 10px; font-size: 11px;
  font-weight: 700; cursor: pointer; white-space: nowrap; line-height: 1.4;
}
.fix-btn:hover { background: rgba(255,180,90,.2); }
.fix-btn:disabled { opacity: .55; cursor: default; }
#repair-modal .modal-card { width: min(94vw, 620px); text-align: start; }
#repair-problem { margin-top: 4px; }
.repair-block { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.repair-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #8d867b; }
#repair-command {
  display: block; padding: 9px 11px; border-radius: 9px; direction: ltr; text-align: left;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
  color: #ffddcf; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  overflow-wrap: anywhere;
}
.repair-log {
  max-height: 42vh; overflow: auto; margin: 0; padding: 10px 11px; border-radius: 9px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.06);
  color: #c1bbb2; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
  direction: ltr; text-align: left; min-height: 44px;
}

/* ---------------- skills shelf ---------------- */
/* The map reuses .memory-stage and .memory-node: same canvas frame, same
   detail-card shape. Only what the shelf needs that the memory graph does not
   have lives here. */
#skills-canvas { display: block; width: 100%; height: 440px; touch-action: manipulation; }
@media (max-width: 620px) { #skills-canvas { height: 320px; } }

.skills-back {
  margin-inline-start: auto; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,162,122,.32); background: rgba(255,162,122,.1);
  color: var(--accent); font: inherit; font-size: 10.5px;
}
.skills-back:hover { background: rgba(255,162,122,.2); }

.skills-badge {
  padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  background: rgba(255,255,255,.06); color: #d8d3cb; white-space: nowrap;
}
.skills-badge.established { background: rgba(79,174,78,.16); color: #7fd07e; }
.skills-badge.candidate { background: rgba(242,184,75,.16); color: #f4c96f; }
.skills-badge.unproven { background: rgba(151,142,126,.18); color: #c5bfb4; }

.skills-stats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.skills-stat {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 10px; border-radius: 10px;
  background: rgba(255,255,255,.045); color: #c1bcb2; font-size: 11px;
}
.skills-stat b { color: var(--text); font-size: 13.5px; }
.skills-stat.pass { background: rgba(79,174,78,.14); color: #8ad089; }
.skills-stat.bad { background: rgba(224,82,82,.15); color: #f0908f; }
.skills-seen { margin-top: 12px; color: #918a7f; font-size: 11px; }

/* the benchmark table: six columns on a desktop, stacked pairs on a phone */
.skills-bench { margin-top: 14px; overflow-x: auto; }
.skills-bench-grid { min-width: 540px; }
.skills-bench-head, .skills-bench-row {
  display: grid; grid-template-columns: minmax(150px, 1.6fr) repeat(5, minmax(58px, 1fr));
  gap: 8px; align-items: center; padding: 9px 10px;
}
.skills-bench-head { color: #918a7f; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.skills-bench-row {
  border-radius: 12px; background: rgba(255,255,255,.03); margin-bottom: 6px; font-size: 12.5px;
}
.skills-bench-row.win { background: rgba(79,174,78,.1); border: 1px solid rgba(79,174,78,.22); }
.skills-bench-row span { text-align: center; color: #dfdbd3; }
.skills-bench-name { display: flex; flex-direction: column; gap: 2px; text-align: start !important; }
.skills-bench-name b { font-size: 13px; }
.skills-bench-name i { color: #918a7f; font-size: 10.5px; font-style: normal; line-height: 1.35; }
.skills-bench-key { font-weight: 700; }

.skills-delta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.skills-delta-cell {
  flex: 1 1 130px; padding: 11px 13px; border-radius: 13px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.05);
}
.skills-delta-cell b { display: block; font-size: 19px; letter-spacing: -.02em; }
.skills-delta-cell span { color: #a69f94; font-size: 11px; }
.skills-delta-cell.good b { color: #7fd07e; }
.skills-delta-cell.bad b { color: #f0908f; }

.skills-controls { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin: 14px 0 12px; }
.skills-search { flex: 1 1 210px; }
.skills-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.skills-chip {
  padding: 6px 11px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 11.5px;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); color: #cec9c0;
}
.skills-chip:hover { border-color: rgba(255,162,122,.4); color: #fff; }
.skills-chip.active { background: rgba(255,162,122,.16); border-color: rgba(255,162,122,.42); color: #ffe6dc; }
.skills-chips.readonly .skills-chip { cursor: default; }
#skills-sort {
  padding: 7px 11px; border-radius: 11px; font: inherit; font-size: 12px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.08); background: var(--panel2); color: var(--text);
}

.skills-list { display: flex; flex-direction: column; gap: 7px; }
.skills-row {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  width: 100%; padding: 12px 14px; border-radius: 13px; cursor: pointer; text-align: start;
  border: 1px solid rgba(255,255,255,.05); background: rgba(255,255,255,.028); color: inherit; font: inherit;
}
.skills-row:hover { border-color: rgba(255,162,122,.34); background: rgba(255,162,122,.05); }
.skills-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.skills-row-main b { font-size: 13.5px; }
.skills-row-main span { color: #a7a197; font-size: 12px; line-height: 1.5; }
.skills-row-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: flex-end; flex: 0 0 auto; }
.skills-row-meta time { color: #80796e; font-size: 10.5px; }
.skills-pill {
  padding: 3px 8px; border-radius: 999px; font-size: 10px; font-style: normal;
  background: rgba(255,255,255,.05); color: #a7a197; white-space: nowrap;
}
.skills-pill.live { background: rgba(255,162,122,.16); color: #ffc3a9; }
.skills-pill.soft { background: rgba(255,170,134,.14); color: #f9dbb3; }
.skills-pill.bad { background: rgba(224,82,82,.15); color: #f0908f; }
.skills-more {
  width: 100%; margin-top: 11px; padding: 10px; border-radius: 12px; cursor: pointer; font: inherit;
  border: 1px dashed rgba(255,255,255,.12); background: transparent; color: var(--accent); font-size: 12.5px;
}
.skills-more.hidden { display: none !important; }

.skills-rank { display: flex; flex-direction: column; gap: 5px; }
.skills-rank-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px;
  cursor: pointer; text-align: start; border: 0; background: rgba(255,255,255,.03); color: inherit; font: inherit;
}
.skills-rank-row:hover { background: rgba(255,162,122,.08); }
.skills-rank-n { width: 20px; color: #80796e; font-size: 11px; }
.skills-rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.skills-rank-row em { color: var(--accent); font-size: 12px; font-style: normal; font-weight: 700; }

.skills-bar {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  flex: 1; min-width: 0; height: 100%;
}
.skills-bar-track { position: relative; flex: 1; width: 100%; min-height: 0; }
.skills-bar i {
  position: absolute; bottom: 0; inset-inline: 0; margin: 0 auto;
  width: 100%; max-width: 26px; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--accent), rgba(255,162,122,.25));
}
.skills-bar-month { color: #80796e; font-size: 9.5px; }

.skills-cloud { display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline; }
.skills-tag {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 10px; border-radius: 10px;
  cursor: pointer; font: inherit; border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.035); color: #dfdad2; line-height: 1.3;
}
.skills-tag:hover { border-color: rgba(255,162,122,.4); color: #fff; }
.skills-tag em { color: #80796e; font-size: .62rem; font-style: normal; }

.skills-log { display: flex; flex-direction: column; gap: 6px; }
.skills-log-row {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.03); font-size: 11.5px;
}
.skills-log-row time { color: #80796e; font-size: 10.5px; }
.skills-log-row span { color: #cec9c0; }
.skills-log-split { display: flex; gap: 7px; }
.skills-log-split i { font-style: normal; font-weight: 700; }
.skills-log-row em { color: #918a7f; font-style: normal; font-size: 10.5px; }

.skills-impact { display: flex; flex-direction: column; gap: 9px; }
.skills-impact-row { padding: 11px 13px; border-radius: 13px; background: rgba(255,255,255,.03); }
.skills-impact-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.skills-impact-head b { font-size: 12.5px; }
.skills-impact-head em { color: var(--accent); font-style: normal; font-size: 12px; font-weight: 700; }
.skills-impact-row p { margin-top: 6px; color: #a7a197; font-size: 11.5px; line-height: 1.55; }
.skills-impact-row time { display: block; margin-top: 6px; color: #80796e; font-size: 10px; }
.skills-outcome { padding: 3px 8px; border-radius: 999px; font-size: 10px; }
.skills-outcome.good { background: rgba(79,174,78,.16); color: #7fd07e; }
.skills-outcome.bad { background: rgba(224,82,82,.15); color: #f0908f; }

.skill-modal-card { width: min(94vw, 640px); text-align: start; }
.skill-modal-card h3 { font-size: 19px; letter-spacing: -.02em; margin-top: 14px; }
.skills-steps { margin: 8px 0 0; padding-inline-start: 20px; color: #d8d3ca; font-size: 12.5px; line-height: 1.65; }
.skills-steps li { margin-bottom: 5px; }
.skills-linkline {
  display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 11px 13px; border-radius: 12px;
  cursor: pointer; text-align: start; font: inherit; color: inherit;
  border: 1px solid rgba(255,162,122,.2); background: rgba(255,162,122,.06);
}
.skills-linkline:hover { border-color: rgba(255,162,122,.45); }
.skills-linkline b { font-size: 13px; }
.skills-linkline span { color: #a7a197; font-size: 11.5px; }
.skills-maintainer { padding: 12px 13px; border-radius: 12px; background: rgba(255,170,134,.07); border: 1px solid rgba(255,170,134,.16); }
.skills-maintainer p { color: #d8d3ca; font-size: 12.5px; line-height: 1.6; }
.skills-maintainer p + p { margin-top: 8px; }
.skills-examples { display: flex; flex-direction: column; gap: 8px; }
.skills-examples blockquote {
  padding: 10px 13px; border-radius: 11px; border-inline-start: 3px solid rgba(255,162,122,.4);
  background: rgba(255,255,255,.03); color: #c1bcb2; font-size: 12px; line-height: 1.6;
}
.memory-node-links button em { color: #80796e; font-style: normal; font-size: 10.5px; }

/* projects: files, milestone control, and the stall that used to be silent */
.project-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.project-file { display: flex; align-items: center; gap: 8px; }
.project-file > a {
  flex: 1; display: flex; align-items: center; gap: 11px; min-width: 0;
  padding: 11px 13px; border-radius: 12px; text-decoration: none;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
}
.project-file > a:hover { background: rgba(255,255,255,.06); }
.project-file-icon {
  flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  padding: 6px 7px; border-radius: 7px; color: #ffbc9f; background: rgba(255,132,79,.14);
}
.project-file-body { min-width: 0; display: grid; gap: 2px; }
.project-file-body strong { font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.project-file-body small { font-size: 11px; color: #aca59a; overflow-wrap: anywhere; }
.project-file-remove {
  flex: none; width: 30px; height: 30px; border-radius: 9px; font-size: 17px; line-height: 1;
  color: #aca59a; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
}
.project-file-remove:hover { color: #ffb3b3; }
.project-file-add {
  display: inline-flex; margin-top: 9px; padding: 9px 14px; border-radius: 11px; cursor: pointer;
  font-size: 12.5px; color: #ffbc9f; background: rgba(255,132,79,.1);
  border: 1px dashed rgba(255,132,79,.34);
}
.project-milestone-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.project-milestone-status {
  flex: none; font-size: 11px; padding: 4px 6px; border-radius: 8px; color: #aca59a;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
}
.project-milestones li.missed { border-inline-start-color: var(--bad); }
.project-milestones li.doing { border-inline-start-color: var(--accent); }
.project-stalled {
  margin: 7px 0 0; font-size: 11.5px; color: #ffb3b3;
  padding: 7px 10px; border-radius: 10px; background: rgba(224,82,82,.1);
}

/* Claude accounts — whose Anthropic subscription pays for the work. */
.claude-pool { display: grid; gap: 13px; }
.claude-pool .chart-note { margin-top: 5px; }
.claude-scope-pick {
  min-height: 38px; border-radius: 11px; padding: 0 10px; font-size: 12px;
  color: #f9e1d7; background: var(--panel2); border: 1px solid rgba(255,255,255,.08);
}
.claude-slots { display: grid; gap: 9px; }
.claude-slot {
  display: flex; align-items: center; gap: 11px; padding: 12px 13px;
  border: 1px solid rgba(255,255,255,.06); border-radius: 14px;
  background: rgba(255,255,255,.024);
}
.claude-slot-body { display: grid; gap: 3px; min-width: 0; flex: 1; }
.claude-slot-body strong { font-size: 13.5px; overflow-wrap: anywhere; }
.claude-slot-sub { color: var(--muted); font-size: 11.5px; }
.account-weekly-usage { display: grid; gap: 5px; margin-top: 7px; }
.account-weekly-usage progress { width: 100%; min-width: 0; height: 6px; accent-color: var(--accent); }
.claude-slot-actions { display: flex; gap: 7px; flex: 0 0 auto; }
.claude-slot-actions .control-btn { min-height: 34px; font-size: 11px; }
.claude-dot {
  width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%;
  background: rgba(255,255,255,.16);
}
.claude-slot.connected .claude-dot { background: var(--good); box-shadow: 0 0 0 4px rgba(79,174,78,.12); }
.claude-slot.walled .claude-dot { background: var(--warning); box-shadow: 0 0 0 4px rgba(242,184,75,.12); }
.claude-slot.walled { border-color: rgba(242,184,75,.22); }
.claude-mode { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.claude-mode span { color: var(--muted); font-size: 12px; }
.claude-mode .claude-scope-pick { flex: 1; min-width: 180px; }
.claude-add { width: 100%; }
.claude-open { width: 100%; margin-bottom: 10px; text-decoration: none; }
.claude-code-input {
  width: 100%; min-height: 44px; border-radius: 11px; padding: 0 12px;
  color: var(--text); background: var(--panel2);
  border: 1px solid rgba(255,255,255,.09); font-size: 13px;
}
.modal-logo.hidden { display: none; }
/* One column on a phone: a 3-button row inside a 14px card overflows, and the
   seat picker beside the heading squeezed the title into a two-line column. */
@media (max-width: 520px) {
  .claude-slot { flex-wrap: wrap; }
  .claude-slot-actions { width: 100%; }
  .claude-slot-actions .control-btn { flex: 1; }
  .claude-pool .card-heading { flex-wrap: wrap; }
  .claude-pool .claude-scope-pick { width: 100%; order: 2; }
}

/* ---------------- the Shorts control panel ---------------- */
.shorts-body { display: flex; flex-direction: column; gap: 18px; }
.shorts-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.shorts-stat {
  padding: 14px 16px; border: 1px solid rgba(255,255,255,.07); border-radius: 16px;
  background: rgba(35,31,24,.86);
}
.shorts-stat b { display: block; font-size: 22px; letter-spacing: -.02em; }
.shorts-stat b[dir="ltr"] { font-size: 15px; }
.shorts-stat span { color: #aca59a; font-size: 11.5px; }
.shorts-stat.behind { border-color: rgba(242,184,75,.42); }
.shorts-stat.behind b { color: var(--warning); }
.shorts-stat.waiting { border-color: rgba(255,162,122,.42); }
.shorts-stat.waiting b { color: var(--accent); }

.shorts-kicker { color: var(--accent); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.shorts-muted { color: #9b958a; font-size: 11.5px; }
.shorts-empty-line { color: #aca59a; font-size: 12.5px; padding: 10px 2px; }

.shorts-awaiting {
  padding: 20px clamp(14px, 2.2vw, 24px); border: 1px solid rgba(255,162,122,.32);
  border-radius: 20px; background: rgba(32,28,21,.94); box-shadow: var(--shadow-lg);
}
.shorts-awaiting.empty { border-color: rgba(255,255,255,.07); box-shadow: none; }
.shorts-awaiting.empty p:last-child { color: #aca59a; font-size: 12.5px; margin-top: 6px; }
.shorts-awaiting-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; }
.shorts-awaiting h2 { font-size: 19px; letter-spacing: -.02em; margin-top: 4px; }
.shorts-hook { color: #c0bbb2; font-size: 13px; margin-top: 5px; font-style: italic; }
.shorts-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.shorts-facts span {
  padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.05);
  color: #c0bbb2; font-size: 11px; white-space: nowrap;
}
.shorts-player {
  display: block; width: 100%; max-width: 300px; margin: 16px auto; border-radius: 16px;
  background: #000; aspect-ratio: 9 / 16;
}
.shorts-player.small { max-width: 220px; }

.shorts-gate { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); }
.shorts-gate-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.shorts-pill { padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.shorts-pill.ok { color: #bfe3c0; background: rgba(79,174,78,.16); }
.shorts-pill.bad { color: #ffb3b3; background: rgba(224,82,82,.16); }
.shorts-gate-note { color: #9b958a; font-size: 11px; }
.shorts-probes { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 6px; }
.shorts-probe {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.035); font-size: 11.5px;
}
.shorts-probe span { color: #aca59a; }
.shorts-probe b { font-size: 12px; }
.shorts-probe.ok b { color: #9fe0a0; }
.shorts-probe.bad { background: rgba(224,82,82,.12); }
.shorts-probe.bad b { color: #ffb3b3; }
.shorts-failed { margin-top: 8px; color: #ffb3b3; font-size: 12px; }

.shorts-jury { display: flex; gap: 14px; margin-top: 14px; align-items: flex-start; }
.shorts-jury-score {
  flex: 0 0 auto; min-width: 62px; padding: 10px 12px; border-radius: 14px; text-align: center;
  background: rgba(79,174,78,.14);
}
.shorts-jury-score.flop { background: rgba(242,184,75,.14); }
.shorts-jury-score b { font-size: 24px; color: #bfe3c0; }
.shorts-jury-score.flop b { color: #ffd9a0; }
.shorts-jury-score span { color: #aca59a; font-size: 11px; }
.shorts-jury-text p { color: #c0bbb2; font-size: 12.5px; line-height: 1.55; }
.shorts-jury-verdict { color: var(--text) !important; font-weight: 700; margin-bottom: 4px; }
.shorts-defect { margin-top: 6px; }
.shorts-defect span { color: var(--warning); font-weight: 700; }

.shorts-approve { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.shorts-btn {
  padding: 11px 20px; border: 0; border-radius: 12px; font-size: 13.5px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.shorts-btn.approve { background: linear-gradient(180deg, #e06f3f, #78422b); color: #fff; }
.shorts-btn.reject { background: rgba(255,255,255,.06); color: #ffb3b3; }
.shorts-btn:disabled { opacity: .55; cursor: default; }
.shorts-check { display: flex; align-items: center; gap: 6px; color: #c0bbb2; font-size: 12px; }
.shorts-approve-note { margin-top: 8px; color: #9b958a; font-size: 11px; }

.shorts-section {
  padding: 18px clamp(14px, 2.2vw, 22px); border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px; background: rgba(35,31,24,.72);
}
.shorts-section-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.shorts-section-head h2 { font-size: 15px; letter-spacing: -.01em; }

.shorts-candidates { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.shorts-candidate {
  display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px;
  border-radius: 12px; background: rgba(255,255,255,.035);
}
.shorts-candidate.started { border: 1px solid rgba(255,162,122,.3); }
.shorts-rank { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.07); color: #c0bbb2; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.shorts-candidate > div:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.shorts-cand-topic { font-size: 12.5px; line-height: 1.5; }
.shorts-cand-hook { color: #9b958a; font-size: 11px; margin-top: 3px; }
.shorts-cand-score { flex: 0 0 auto; text-align: center; }
.shorts-cand-score b { display: block; font-size: 17px; color: var(--accent); }
.shorts-cand-score span { display: block; color: #9b958a; font-size: 10.5px; }
.shorts-started { color: #9fe0a0 !important; font-weight: 700; }

.shorts-film { border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.025); margin-bottom: 8px; overflow: hidden; }
.shorts-film.open { border-color: rgba(255,162,122,.3); }
.shorts-film-head {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
  width: 100%; padding: 13px 14px; background: none; border: 0; cursor: pointer;
  color: inherit; font-family: inherit; text-align: start;
}
.shorts-film-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.shorts-film-title h3 { font-size: 13.5px; font-weight: 700; }
.shorts-stage { padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #c0bbb2; background: rgba(255,255,255,.06); }
.shorts-stage.published { color: #bfe3c0; background: rgba(79,174,78,.16); }
.shorts-stage.awaiting_approval { color: #ffc2a8; background: rgba(255,162,122,.16); }
.shorts-stage.gate_failed { color: #ffb3b3; background: rgba(224,82,82,.16); }
.shorts-film-numbers { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #aca59a; font-size: 11px; }
.shorts-film-numbers b { color: var(--text); font-size: 13px; }
.shorts-film-body { padding: 0 14px 14px; }
.shorts-film-body.hidden { display: none; }
.shorts-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-bottom: 10px; font-size: 12px; }
.shorts-links a { color: var(--link); }
.shorts-warn {
  padding: 9px 11px; border-radius: 10px; background: rgba(242,184,75,.12);
  color: #ffd9a0; font-size: 11.5px; line-height: 1.55; margin-bottom: 10px;
}

.shorts-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.shorts-table th { color: #9b958a; font-weight: 600; text-align: start; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; }
.shorts-table td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.045); color: #dfdad2; white-space: nowrap; }
.shorts-table .shorts-src { white-space: normal; }
.shorts-source-tag { padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #c0bbb2; background: rgba(255,255,255,.07); white-space: nowrap; }
.shorts-source-tag.studio { color: #ffd9a0; background: rgba(242,184,75,.16); }
.shorts-source-tag.data_api { color: #ffc2a8; background: rgba(255,162,122,.16); }
.shorts-source-tag.instagram { color: #f9ddb9; background: rgba(255,170,134,.18); }
.shorts-table-note { color: #9b958a; font-size: 10.5px; margin-top: 7px; }

.shorts-lessons { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.shorts-lesson { padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.035); border-inline-start: 3px solid rgba(79,174,78,.5); }
.shorts-lesson.refuted { border-inline-start-color: rgba(224,82,82,.6); }
.shorts-lesson-tag { color: #aca59a; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.shorts-lesson p { font-size: 12.5px; line-height: 1.55; margin-top: 4px; }
.shorts-lesson-evidence { color: #9b958a !important; font-size: 11px !important; }

@media (max-width: 620px) {
  .shorts-player { max-width: 100%; }
  .shorts-film-head { align-items: flex-start; }
  .shorts-table { display: block; overflow-x: auto; }
}

/* Account settings reuse the existing language and chat appearance controls. */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.settings-grid .command-sub { margin-bottom: 22px; }
.settings-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 14px; }
.settings-view .language-select, .settings-view .refresh-btn { min-height: 44px; font-size: 16px; padding: 10px 16px; }
.settings-view .language-select { width: 100%; max-width: 280px; }
.settings-view #fast-response-status { margin: 12px 0 0; min-height: 20px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.account-memory .memory-kpis, .account-memory .memory-graph-card, .account-memory .primary-grid,
.account-memory [aria-labelledby="memory-analysis-title"] { display: none; }
.account-memory .secondary-grid { grid-template-columns: minmax(0, 1fr); }
#memory-account-note { margin-bottom: 18px; color: var(--muted); line-height: 1.65; }

.account-skills-empty .dashboard-shell > :not(.command-head):not(#skills-empty-state):not(#skills-error),
.account-skills-empty .command-sub { display: none; }
#skills-empty-state { color: var(--muted); line-height: 1.65; }

/* The account screen shares the existing pool controls and modal. */
#codex-pool .claude-slot strong, #codex-pool-admin .claude-slot strong { overflow-wrap: anywhere; }
#modal-fields .codex-login-code { font: 700 26px ui-monospace, monospace; letter-spacing: .06em; user-select: all; }

.owner-command-menu { max-height: 220px; overflow-y: auto; padding: 8px; background: var(--panel, #171512); border: 1px solid var(--line, #39352d); border-radius: 16px; margin-bottom: 8px; }
.owner-command-menu button { display: block; width: 100%; min-height: 44px; padding: 10px 12px; text-align: start; color: inherit; background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.owner-command-menu button:active, .owner-command-menu button:focus-visible { background: #3a2b21; }

/* Project conversations reuse the same composer and message renderer. */
.project-chat-header{position:relative;z-index:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--border,#ffffff24);background:var(--panel,#171a28)}
.project-chat-header strong{flex:1;min-width:100px;overflow-wrap:anywhere}
.project-chat-header button,.project-chat-context-panel button{min-height:44px;padding:8px 12px;border:1px solid var(--border,#ffffff24);border-radius:12px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.project-chat-context-panel{position:relative;z-index:3;max-height:48vh;overflow:auto;padding:16px 20px;background:var(--panel,#171a28);border-bottom:1px solid var(--border,#ffffff24)}
.project-chat-context-panel li{padding:10px 0;overflow-wrap:anywhere}.project-chat-context-panel li span{display:block;opacity:.72;font-size:.9em}
.project-chat-empty{margin:auto;padding:28px;text-align:center;opacity:.72;max-width:460px}

@media (max-width: 520px) {
  .project-chat-header { flex-wrap: nowrap; gap: 8px; padding: 8px 12px; }
  .project-chat-header strong { min-width: 0; }
  #project-chat-main { display: none; }
  .project-chat-header button { flex-shrink: 0; padding: 8px 10px; }
}

/* Project automations share the existing scheduler and native form controls. */
.project-auto-buttons { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.project-auto-buttons button { min-height:44px; }
.project-automation { border-top:1px solid var(--line,#ffffff24); padding:16px 0 4px; overflow-wrap:anywhere; }
.project-automation h4 { margin:0 0 8px; }
.project-automation p { margin:6px 0; }
.project-auto-form { display:grid; gap:12px; padding:16px 0; }
#project-auto-editor label { display:grid; gap:8px; min-width:0; }
#project-auto-editor label[hidden] { display:none; }
#project-auto-editor input, #project-auto-editor textarea, #project-auto-editor select { box-sizing:border-box; width:100%; min-width:0; min-height:44px; padding:10px 12px; font:inherit; font-size:16px; color:var(--text); background:var(--panel,#171512); border:1px solid var(--line,#ffffff24); border-radius:10px; }
#project-auto-editor input { color-scheme:dark; }
#project-auto-status:empty { display:none; }
#project-auto-choices { max-height:440px; overflow:auto; }

/* Archive and delete. Two decisions that never look alike: archive is quiet
   and reversible, delete carries the app's red and always asks first. */
.project-manage { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.07); }
.project-manage-note { color: #aca59a; font-size: 12.5px; line-height: 1.6; max-width: 620px; }
.project-manage-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 13px; }
.project-manage-btn { min-height: 44px; padding: 10px 18px; border-radius: 11px; color: #e6dfd3; font-size: 13px; font-weight: 600; }
.project-manage-btn:hover, .project-manage-btn:focus-visible { border-color: rgba(255,162,122,.4); outline: none; }
.project-manage-btn.danger { color: #ffb3b3; border-color: rgba(224,82,82,.45); background: rgba(224,82,82,.08); }
.project-manage-btn.danger:hover, .project-manage-btn.danger:focus-visible { border-color: var(--bad); background: rgba(224,82,82,.16); }
.project-manage-btn.danger.solid { color: #fff; border-color: #c94343; background: #c94343; }
.project-manage-btn.danger.solid:hover, .project-manage-btn.danger.solid:focus-visible { background: var(--bad); box-shadow: 0 0 0 3px rgba(224,82,82,.28); }
.project-manage-btn:disabled { opacity: .55; cursor: default; }

.project-archive { grid-column: 1 / -1; margin-top: 6px; }
.project-archive-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px;
  padding: 10px 4px; border: 0; border-top: 1px solid rgba(255,255,255,.07); background: transparent;
  color: #aba59a; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.project-archive-toggle:hover, .project-archive-toggle:focus-visible { color: #e6dfd3; outline: none; }
.project-archive-chevron {
  width: 9px; height: 9px; margin-inline: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .16s ease;
}
.project-archive-toggle[aria-expanded="true"] .project-archive-chevron { transform: translateY(2px) rotate(-135deg); }
.project-archive-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 13px; margin-top: 6px; }
.project-card.archived { padding: 15px 17px; background: rgba(26,23,18,.62); box-shadow: none; }
.project-card.archived:hover, .project-card.archived:focus-visible { transform: none; border-color: rgba(255,255,255,.16); }
.project-card.archived .project-card-head { align-items: flex-start; margin-bottom: 0; }
.project-card.archived h3 { min-width: 0; margin: 0; color: #c9c2b5; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.project-pill.archived { flex-shrink: 0; color: #c9c2b5; background: rgba(255,255,255,.08); white-space: nowrap; }

.modal-card.project-delete-card { width: min(94vw, 520px); text-align: start; }
.modal-card .project-delete-name { margin: 8px 0 10px; color: var(--text); font-size: 15.5px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.project-delete-card .modal-status:empty { display: none; }
.project-delete-card .modal-status { padding: 10px 12px; border: 1px solid rgba(224,82,82,.35); border-radius: 10px; background: rgba(224,82,82,.09); color: #ffb3b3; line-height: 1.5; }
.project-delete-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
@media (max-width: 720px) {
  .project-archive-list { grid-template-columns: 1fr; }
  .project-manage-buttons .project-manage-btn { flex: 1 1 140px; }
  .project-delete-buttons { flex-direction: column-reverse; }
  .project-delete-buttons .project-manage-btn { width: 100%; }
}

/* ---------- plan, free week and the plans screen (task 2964) ---------- */
.gate-trial-link { display: block; margin-top: 14px; color: var(--link); font-size: 13px; text-align: center; text-underline-offset: 3px; }
.trial-banner {
  position: relative; z-index: 3; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 3px 10px; padding: 6px 10px; font-size: 12.5px; line-height: 1.4; text-align: center;
  color: #ffd9c7; background: #2a160d; border-bottom: 1px solid #4a2415;
}
.trial-banner-btn {
  min-height: 26px; padding: 2px 12px; border: 0; border-radius: 999px; cursor: pointer;
  color: #1a0d06; background: var(--accent); font-size: 12.5px; font-weight: 700;
}
.plan-rows { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin-bottom: 17px; font-size: 14px; }
.plan-rows dt { color: var(--muted); }
.plan-rows dd { font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.plans-screen {
  position: fixed; inset: 0; z-index: 70; overflow-y: auto; padding: 16px;
  display: flex; background: rgba(10,9,7,.78); backdrop-filter: blur(6px);
}
/* A trial that ran out: not a sheet over the app, the whole screen. */
.plans-screen.wall { background: var(--bg); backdrop-filter: none; }
.plans-shell {
  position: relative; margin: auto; width: min(100%, 980px); padding: 30px clamp(18px, 3vw, 34px);
  border: 1px solid rgba(255,255,255,.08); border-radius: 20px; background: var(--header); text-align: start;
}
.plans-shell h2 { font-family: var(--display); font-size: clamp(24px, 4vw, 34px); letter-spacing: -.02em; padding-inline-end: 28px; }
.plans-shell h2:focus { outline: none; }
.plans-shell .modal-close { inset-inline-start: auto; inset-inline-end: 12px; min-width: 40px; min-height: 40px; }
.plans-sub { margin: 8px 0 22px; color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 60ch; }
.plans-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; color: var(--muted); }
.plan-card {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08); background: var(--panel2); color: var(--text);
}
.plan-card h3 { font-size: 19px; }
.plan-price { color: var(--muted); font-size: 14px; }
.plan-price strong { color: var(--text); font-family: var(--display); font-size: 30px; }
.plan-degree { color: var(--cyan); font-size: 14px; font-weight: 650; }
.plan-detail { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.plan-buy {
  display: flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 12px; padding: 10px 16px;
  border-radius: 10px; color: #1a0d06; background: var(--accent); font-weight: 700; text-decoration: none; text-align: center;
}
.plan-buy:hover { filter: brightness(1.08); }
.plan-buy:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.plan-buy.off { color: var(--muted); background: rgba(255,255,255,.06); }
.plan-card .plan-detail:last-of-type { flex: 1; }
.gate-fresh-link { color: var(--link); text-underline-offset: 3px; white-space: nowrap; }
.starter-jobs { display: flex; flex-direction: column; gap: 10px; width: min(100%, 560px); margin: auto auto 18px; padding: 0 4px; }
.starter-jobs-title { color: var(--muted); font-size: 13px; text-align: center; }
.starter-job {
  min-height: 48px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; cursor: pointer;
  color: var(--text); background: rgba(23,21,18,.86); font-size: 15px; line-height: 1.4; text-align: start;
}
.starter-job:hover { border-color: var(--accent); }
.starter-job:active { transform: scale(.985); }
.plans-signout { margin-top: 20px; border: 0; background: transparent; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 760px) {
  .plans-screen { padding: 0; }
  .plans-shell { margin: 0; width: 100%; min-height: 100%; border: 0; border-radius: 0; padding-top: max(26px, env(safe-area-inset-top)); }
  .plans-list { grid-template-columns: 1fr; }
}

/* ---------- updates inbox and the settings account block (task 2964) ---------- */
/* A column, not the full 1320px shell: a report is prose, and prose set 180
   characters wide is unreadable on a desktop. */
.updates-list { display: grid; gap: 11px; margin-top: 15px; width: min(100%, 880px); }
.update-card {
  min-width: 0; padding: 16px 18px; border: 1px solid rgba(255,255,255,.068);
  border-radius: 16px; background: rgba(35,31,24,.86); box-shadow: 0 14px 38px rgba(0,0,0,.15);
}
.update-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  width: 100%; padding: 0; border: 0; background: transparent; color: inherit;
  font: inherit; text-align: start; cursor: pointer;
}
.update-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.update-title { min-width: 0; color: #f3eee4; font-size: 15px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.update-time { flex-shrink: 0; color: #8d867b; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.update-body {
  margin-top: 8px; color: #c0bbb2; font-size: 13.5px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.update-body.preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.updates-empty {
  margin-top: 15px; padding: 26px 18px; border: 1px dashed rgba(255,255,255,.09);
  border-radius: 15px; color: #9a9388; font-size: 13.5px; text-align: center;
}
.settings-version { margin-top: 24px; color: #8d867b; font-size: 12px; text-align: center; }
@media (max-width: 760px) {
  .update-card { padding: 14px 15px; border-radius: 14px; }
  .update-head { flex-wrap: wrap; gap: 4px 12px; }
}

/* ---------------- Jev Systems page and store (task 3228) ---------------- */
.loops-view .dashboard-shell { display: grid; gap: 18px; }
.loops-hero { display: grid; gap: 14px; }
.loops-system { display: flex; align-items: flex-start; gap: 13px; }
.loops-system h2 { font-size: 15px; font-weight: 700; margin: 2px 0 3px; }
.loops-system p { color: var(--muted); font-size: 14px; line-height: 1.5; }
.loops-badge { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.05); }
.loops-badge .ui-icon { width: 17px; height: 17px; }
.loops-badge-one { color: var(--accent); }
.loops-badge-two { color: var(--violet); }
.loops-note { color: var(--muted); font-size: 12.5px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.loops-section { display: grid; gap: 12px; }
.loops-section-head { display: flex; align-items: center; gap: 9px; }
.loops-section-head h2 { font-size: 17px; letter-spacing: -.01em; }
.loops-count { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255,162,122,.14); color: #ffe7dd; }
.loops-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.loops-grid h3, .loops-empty h3 { font-size: 15px; margin-bottom: 6px; }
.loops-grid p, .loops-empty p { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.loops-install-card { cursor: pointer; }
.loops-empty { text-align: center; padding: 26px 18px; }
.loops-store { display: grid; gap: 14px; }
.loops-store-head h2 { font-size: 20px; margin: 4px 0 6px; letter-spacing: -.015em; }
.loops-store-head .command-sub { margin: 0; }
.loops-search { display: flex; align-items: center; gap: 9px; padding: 0 13px; border-radius: 13px; background: var(--panel2); border: 1px solid rgba(255,255,255,.06); }
.loops-search .ui-icon { width: 17px; height: 17px; color: var(--muted); flex: none; }
.loops-search input { flex: 1; min-width: 0; min-height: 44px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; }
.loops-search:focus-within { border-color: rgba(255,162,122,.45); }
.loops-topics { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.loops-topics::-webkit-scrollbar { display: none; }
.loops-topics .skills-chip { flex: none; font-size: 12.5px; padding: 7px 13px; white-space: nowrap; }
.loops-found { color: var(--muted); font-size: 12px; font-weight: 650; }
.loops-store-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.loops-store-card { display: flex; flex-direction: column; gap: 7px; padding: 15px 16px; border-radius: 15px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); cursor: pointer; transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.loops-store-card:hover { border-color: rgba(255,162,122,.35); background: rgba(255,162,122,.05); }
.loops-store-card:active { transform: scale(.985); }
.loops-store-card:focus-visible, .loops-install-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.loops-store-card h3 { font-size: 14.5px; line-height: 1.35; }
.loops-store-card p { color: var(--muted); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.loops-store-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: auto; color: #8a8375; font-size: 11.5px; }
.loops-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 650; background: rgba(255,255,255,.06); color: var(--muted); }
.loops-pill-ok { background: rgba(79,174,78,.14); color: #8fdc8e; }
.loops-pill-run { background: rgba(255,162,122,.14); color: #ffc3a6; }
.loops-more { justify-self: center; min-width: 160px; }
.loops-state { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; margin: 2px 0 4px; }
.loops-state-ok { color: #8fdc8e; }
.loops-state-run { color: #ffc3a6; }
.loops-state-wait { color: var(--warning); }
.loops-state-note { color: var(--muted); font-size: 12.5px; }
.loops-use { color: var(--muted); font-size: 12.5px; }
.loops-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,195,166,.3); border-top-color: #ffc3a6; animation: loops-spin .8s linear infinite; }
@keyframes loops-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loops-spin { animation: none; } .loops-store-card { transition: none; } }
.loops-item { width: min(560px, calc(100vw - 28px)); max-height: calc(100dvh - 40px); overflow-y: auto; margin: auto; padding: 20px 22px 24px; border: 1px solid var(--border-soft); border-radius: 20px; background: var(--panel); color: var(--text); box-shadow: var(--shadow-lg); }
.loops-item::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.loops-item-close-row { display: flex; justify-content: flex-end; margin: -6px -8px 2px; }
.loops-item h2 { font-size: 20px; line-height: 1.3; letter-spacing: -.015em; margin-bottom: 6px; }
.loops-item-meta { color: #8a8375; font-size: 12px; margin-bottom: 12px; }
.loops-item-line { font-size: 15px; line-height: 1.55; margin-bottom: 8px; }
.loops-item-line:empty, .loops-item-links:empty { display: none; }
.loops-item-text { color: var(--muted); font-size: 14px; line-height: 1.55; margin-bottom: 12px; user-select: text; }
.loops-item-code { font-size: 13.5px; font-weight: 650; padding: 10px 12px; border-radius: 12px; margin-bottom: 8px; }
.loops-item-code.is-open { color: #8fdc8e; background: rgba(79,174,78,.1); }
.loops-item-code.is-closed { color: var(--warning); background: rgba(242,184,75,.09); }
.loops-item-links { font-size: 13px; margin-bottom: 8px; }
.loops-item-links a { color: var(--link); }
.loops-install { display: grid; gap: 10px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.loops-install h3 { font-size: 16px; }
.loops-install label { display: block; color: var(--muted); font-size: 13.5px; margin-bottom: 7px; }
.loops-install textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 84px; padding: 11px 13px; border-radius: 13px; border: 1px solid rgba(255,255,255,.08); background: var(--panel2); color: var(--text); font: inherit; font-size: 15px; line-height: 1.5; }
.loops-install textarea:focus { outline: 0; border-color: rgba(255,162,122,.45); }
.loops-install-btn { width: 100%; margin-top: 10px; justify-content: center; }
.loops-install-btn:disabled { opacity: .6; cursor: default; }
.loops-install-note { color: #8a8375; font-size: 12px; margin-top: 8px; }
.loops-item-error { color: #ff9c9c; font-size: 13px; }
.loops-item-error:empty { display: none; }

/* Settings > Delete account (task 3228) */
.settings-delete { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); display: grid; gap: 10px; }
.danger-btn { min-height: 40px; padding: 9px 15px; border-radius: 12px; border: 1px solid rgba(224,82,82,.45); background: rgba(224,82,82,.08); color: #ffb3b3; font: inherit; font-weight: 650; cursor: pointer; justify-self: start; }
.danger-btn:hover { background: rgba(224,82,82,.16); }
.danger-btn:disabled { opacity: .6; cursor: default; }
.settings-delete-confirm { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(224,82,82,.07); border: 1px solid rgba(224,82,82,.3); }
.settings-delete-q { font-weight: 700; font-size: 15px; }
.settings-delete-what { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.settings-delete-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.settings-delete-error { color: #ff9c9c; font-size: 13px; }
.settings-delete-error:empty { display: none; }
.loops-grid > .loops-empty, .loops-store-grid > .loops-empty { grid-column: 1 / -1; }

/* Projects > New project (task 3228) */
.projects-hero-actions { display: flex; gap: 9px; position: relative; z-index: 1; }
.project-new-form { display: grid; gap: 8px; margin-top: 16px; }
.project-new-form h2 { font-size: 19px; margin-bottom: 4px; }
.project-new-form label { color: var(--muted); font-size: 13.5px; margin-top: 6px; }
.project-new-form input, .project-new-form textarea { width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 13px; border: 1px solid rgba(255,255,255,.08); background: var(--panel2); color: var(--text); font: inherit; font-size: 15px; line-height: 1.5; }
.project-new-form textarea { resize: vertical; min-height: 96px; }
.project-new-form input:focus, .project-new-form textarea:focus { outline: 0; border-color: rgba(255,162,122,.45); }
.project-new-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 8px; }
.project-new-save { width: auto; min-width: 180px; justify-content: center; }
@media (max-width: 760px) { .projects-new span { display: inline; } }
.project-new-actions .refresh-btn { min-height: 46px; padding: 0 18px; border-radius: 13px; }
@media (max-width: 760px) { #view-projects .tasks-hero { flex-wrap: wrap; } #view-projects .tasks-hero > div:first-child { flex: 1 1 100%; } }

/* ---- Project App: the tabbed reader a project writes about what it decided ---- */
.project-app-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,122,69,.16), rgba(255,178,122,.05) 60%, rgba(255,255,255,.02));
  border: 1px solid rgba(255,154,108,.28); }
.project-app-mark { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; background: #ff7a45;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 9px; box-shadow: 0 8px 22px rgba(255,122,69,.3); }
.project-app-mark span { border-radius: 4px; background: rgba(255,255,255,.92); }
.project-app-mark span:nth-child(2), .project-app-mark span:nth-child(3) { background: rgba(255,255,255,.55); }
.project-app-text { flex: 1 1 auto; min-width: 0; }
.project-app-text h3 { font-family: var(--display); font-size: 17px; color: #fff; margin: 2px 0 3px; text-transform: none; letter-spacing: 0; }
.project-app-text p { color: #e6d6cc; font-size: 12.5px; line-height: 1.45; }
.project-app-text small { display: block; margin-top: 5px; color: #aca59a; font-size: 11px; }
.project-app-open { flex: 0 0 auto; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0;
  background: #ff7a45; color: #1a0d06; font: 700 13px/1 inherit; cursor: pointer; }
.project-app-open:hover { background: #ff9a6c; }
.project-app-chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 2px; scrollbar-width: none; }
.project-app-chips::-webkit-scrollbar { display: none; }
.project-app-chips button { flex: 0 0 auto; min-height: 34px; padding: 0 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #f2dacf; font: 600 12px/1 inherit; }
.project-app-chips button:hover { border-color: rgba(255,154,108,.5); color: #fff; }

body.project-app-open { overflow: hidden; }
.project-app { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text); animation: project-app-in .22s ease-out; }
.project-app.hidden { display: none; }
@keyframes project-app-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .project-app { animation: none; } }
.project-app-head { display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--header); border-bottom: 1px solid rgba(255,255,255,.06); }
.project-app-back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 8px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #ffb27a; font: 600 13px/1 inherit; cursor: pointer; flex: 0 0 auto; }
.project-app-back-arrow { width: 9px; height: 9px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-inline-start: 4px; }
[dir="rtl"] .project-app-back-arrow { transform: rotate(-135deg); }
.project-app-titles { min-width: 0; }
.project-app-titles h1 { font-family: var(--display); font-size: 17px; line-height: 1.2; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-app-titles p { color: #aca59a; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-app-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px; background: var(--header);
  border-bottom: 1px solid rgba(255,255,255,.06); scrollbar-width: none; flex: 0 0 auto; }
.project-app-tabs::-webkit-scrollbar { display: none; }
.project-app-tabs button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px;
  border-radius: 999px; border: 1px solid transparent; background: rgba(255,255,255,.05); color: #d9cbc1; font: 600 13px/1 inherit; cursor: pointer; }
.project-app-tabs button.on { background: #ff7a45; color: #1a0d06; }
.project-app-tabs button:focus-visible { outline: 2px solid #ffb27a; outline-offset: 2px; }
.project-app-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.project-app-page { max-width: 760px; margin: 0 auto; padding: 22px 18px calc(40px + env(safe-area-inset-bottom)); }
.project-app-page > header { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.project-app-page > header h2 { font-family: var(--display); font-size: 26px; line-height: 1.15; color: #fff; display: flex; align-items: center; gap: 10px; }
.project-app-icon { font-size: 24px; }
.project-app-sub { margin-top: 6px; color: #ffc2a8; font-size: 14.5px; line-height: 1.45; }
.project-app-page > header small { display: block; margin-top: 8px; color: #8f887c; font-size: 11.5px; }
.project-app-md { font-size: 15px; line-height: 1.7; color: #eee5dc; overflow-wrap: anywhere; }
.project-app-md > * + * { margin-top: 12px; }
.project-app-md h2 { font-family: var(--display); font-size: 21px; color: #fff; margin-top: 28px; }
.project-app-md h3 { font-size: 17px; color: #ffb27a; margin-top: 22px; }
.project-app-md h4, .project-app-md h5 { font-size: 15px; color: #fff; margin-top: 18px; }
.project-app-md strong { color: #fff; }
.project-app-md a { color: var(--link); }
.project-app-md ul, .project-app-md ol { padding-inline-start: 22px; }
.project-app-md li + li { margin-top: 6px; }
.project-app-md li.sub { margin-inline-start: 18px; }
.project-app-md li::marker { color: #ff9a6c; }
.project-app-md code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88em; background: rgba(255,255,255,.07); padding: 1px 5px; border-radius: 5px; }
.project-app-md pre { background: #17140f; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 12px 14px; overflow-x: auto; }
.project-app-md pre code { background: none; padding: 0; }
.project-app-md blockquote { border-inline-start: 3px solid #ff7a45; background: rgba(255,122,69,.07); padding: 10px 14px; border-radius: 0 12px 12px 0; color: #f3e6dc; }
[dir="rtl"] .project-app-md blockquote { border-radius: 12px 0 0 12px; }
.project-app-md blockquote > * + * { margin-top: 6px; }
.project-app-md hr { border: 0; border-top: 1px solid rgba(255,255,255,.1); margin: 22px 0; }
.app-table { overflow-x: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; }
.app-table table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.5; }
.app-table th, .app-table td { padding: 9px 11px; text-align: start; vertical-align: top; border-bottom: 1px solid rgba(255,255,255,.06); min-width: 110px; }
.app-table thead th { background: rgba(255,255,255,.04); color: #ffb27a; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.app-table tbody tr:last-child td { border-bottom: 0; }
.project-app-file { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding: 14px; border-radius: 14px; text-decoration: none;
  border: 1px solid rgba(255,154,108,.3); background: rgba(255,122,69,.08); color: inherit; }
.project-app-file strong { color: #fff; display: block; }
.project-app-file small { color: #aca59a; }
@media (min-width: 900px) {
  .project-app-head { padding-inline: 28px; }
  .project-app-tabs { padding-inline: 26px; justify-content: center; }
  .project-app-page { padding-top: 34px; }
}
.project-app-text .section-kicker { letter-spacing: .03em; }
@media (max-width: 560px) {
  .project-app-card { flex-wrap: wrap; align-items: flex-start; }
  .project-app-text { flex-basis: calc(100% - 60px); }
  .project-app-open { flex: 1 0 100%; min-height: 44px; }
}