/* Twin Chat, following the Twin Client App design proposal (October 2026).
   Dark by default and follows the phone setting; light mode is the same screens with the palette flipped.
   Electric Navy is the ground, one softened blue accent means "tap me", status colours stay small. */

:root {
  color-scheme: dark;
  --bg: #070a18;
  --bg-top: #070a18;
  --surface: rgba(16, 20, 44, 0.78);
  --surface-2: rgba(255, 255, 255, 0.07);
  --bubble: #1c2447;
  --line: rgba(255, 255, 255, 0.08);
  --text: #f2f6ff;
  --muted: #96a2c0;
  --faint: #566180;
  --accent: #3fb6ea;
  --accent-text: #5cc8f5;
  --glow: radial-gradient(60% 40% at 15% 42%, rgba(12, 157, 216, 0.22), transparent 70%), radial-gradient(60% 50% at 90% 88%, rgba(42, 63, 176, 0.38), transparent 70%), radial-gradient(40% 30% at 70% 58%, rgba(124, 92, 230, 0.14), transparent 70%);
  --num: linear-gradient(135deg, #7fd8ff, #8fa0ff);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 2, 12, 0.45);
  --user-1: #4d84ad;
  --user-2: #6297c0;
  --ring-1: #5d8fc0;
  --ring-2: #8e74c8;
  --live: #31e38f;
  --alert: #df0e44;
  --attention: #fe9309;
  --bar: rgba(7, 10, 24, 0.88);
  --seg: rgba(255, 255, 255, 0.06);
  --seg-on: rgba(92, 200, 245, 0.22);
  --bar-lo: #2a3650;
  --live-bg: rgba(49, 227, 143, 0.14);
  --attention-bg: rgba(254, 147, 9, 0.18);
  --sheet: #ffffff;
  --sheet-text: #0b1430;
  --sheet-muted: #5b6275;
  --sheet-line: #d9dde6;
  --navy: #0f1d4a;
  --sky: #0c9dd8;
  --indigo: #2a3fb0;
  --twin: linear-gradient(135deg, #0c9dd8 0%, #2a3fb0 100%);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f7f9fd;
    --bg-top: #e9f3fc;
    --surface: #ffffff;
    --surface-2: #eef3fb;
    --bubble: #e3e9f3;
    --line: rgba(11, 16, 48, 0.07);
    --text: #0b1030;
    --muted: #5b6785;
    --faint: #9aa5bf;
    --accent: #1f6fd0;
    --accent-text: #1f6fd0;
    --glow: none;
    --num: linear-gradient(135deg, #0c9dd8, #2a3fb0);
    --card-shadow: 0 10px 28px rgba(11, 16, 48, 0.07);
    --user-1: #2f78ad;
    --user-2: #3f8dc4;
    --bar: rgba(255, 255, 255, 0.92);
    --seg: #e6ecf6;
    --seg-on: #ffffff;
    --bar-lo: #c9d3e2;
    --live: #17a65c;
    --attention: #d97706;
    --live-bg: rgba(23, 166, 92, 0.12);
    --attention-bg: rgba(217, 119, 6, 0.14);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

/* iOS 26 home-screen apps: with the translucent status bar, WebKit makes the page shorter than the
   screen by the status bar height (WebKit bug 301108), so bottom bars float up. Make the page as
   tall as the screen again. The min() stops any scroll where the top inset is 0. */
@media (display-mode: standalone) {
  html { height: min(100lvh, calc(100% + env(safe-area-inset-top, 0px))); }
}
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.42 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
#app { height: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.5; }
[hidden] { display: none !important; }
a { color: var(--accent-text); }
p { margin: 0 0 8px; }
.icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-filled { fill: currentColor; stroke: currentColor; }
.tab .icon path[d^="M5 12h.01"] { stroke-width: 3.2; }

/* Buttons */
.btn-primary, .btn-secondary {
  display: block; width: 100%; border: 0; border-radius: 12px; padding: 13px 16px;
  font-weight: 600; font-size: 16px; margin-top: 8px;
}
.btn-primary { background: linear-gradient(135deg, var(--sky) 0%, var(--indigo) 100%); color: #fff; box-shadow: 0 8px 20px rgba(42, 63, 176, 0.25); }
.btn-secondary { background: var(--surface-2); color: var(--text); }
.text-btn { background: none; border: 0; padding: 6px 0; color: var(--accent-text); font-size: 15px; }
.text-btn.strong { font-weight: 700; }
.text-btn.block { display: block; margin: 12px auto 0; }
.form-error { color: var(--alert); font-size: 14px; min-height: 0; margin: 6px 0 0; }
.form-error:empty { display: none; }

/* The lockup: glyph and name. Light grounds get the two-tone glyph, dark ones the white glyph. */
.nameplate { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -0.02em; font-size: 20px; }
.nameplate-glyph { height: 1.4em; width: auto; position: relative; top: 0.08em; }
.only-dark { display: none; }
@media (prefers-color-scheme: light) { .only-dark { display: none; } .only-light { display: inline; } }
@media (prefers-color-scheme: dark) { .only-light { display: none; } .only-dark { display: inline; } }

/* Splash: white glyph on navy, a blue glow behind it and faint rings */
.splash { height: 100%; background: #f6f9fd; display: flex; align-items: center; justify-content: center; padding-bottom: var(--safe-b); }
.splash-mark { transform: scale(1.3); color: #0b1030; }
.splash-icon { width: 72px; height: 72px; border-radius: 17px; }

/* Sign in: a light page in both modes, the lockup top left, the glyph as a faint watermark */
.signin { position: relative; overflow: hidden; min-height: 100%; display: flex; flex-direction: column; background: #f6f9fd; color: #0b1030; }
.signin-mark { position: absolute; right: -120px; top: -40px; width: 340px; height: auto; opacity: 0.06; pointer-events: none; }
.signin-top { position: relative; width: 100%; max-width: 440px; margin: 0 auto; padding: calc(44px + var(--safe-t)) 28px 0; color: var(--navy); }
.signin-top .nameplate { font-size: 22px; }
.signin-sheet { position: relative; flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 440px; margin: 0 auto; padding: 56px 28px calc(24px + var(--safe-b)); }
.signin-sheet h1 { font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 10px; color: #0b1030; }
.signin-sheet .lead { color: #4b5570; font-size: 15px; line-height: 1.5; margin-bottom: 30px; }
/* Fine print under a button: centred, one sentence per line, evenly spaced. */
.signin-sheet .lead.small { font-size: 14px; margin: 16px auto 0; text-align: center; max-width: 320px; }
.signin-sheet .lead.small .sn, .consent .sn, .consent-foot .sn { display: block; }
.signin-sheet .lead.small .sn + .sn, .consent .sn + .sn { margin-top: 4px; }
.consent-point p { text-align: left; hyphens: none; -webkit-hyphens: none; }
.signin-sheet input:not([type=checkbox]) {
  width: 100%; height: 54px; padding: 0 18px; border-radius: 14px; border: 1px solid #d6deea;
  background: #fff; color: #0b1030; outline: none;
}
.signin-sheet input:not([type=checkbox]):focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(12, 157, 216, 0.15); }
.signin-sheet input.code:not(:placeholder-shown) { letter-spacing: 0.3em; }
.signin-sheet input.code { font-size: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.signin-sheet .btn-primary { height: 54px; border-radius: 14px; margin-top: 14px; padding: 0 16px; }
.signin-sheet .text-btn { color: var(--indigo); }
.signin-sheet .form-error { margin-top: 10px; }
.split { display: flex; justify-content: space-between; margin-top: 10px; }
.signin-foot { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.signin-rule { display: block; width: 48px; height: 4px; border-radius: 2px; background: var(--twin); }
.consent { text-align: center; font-size: 12px; line-height: 1.6; color: #6b7590; margin: 0; }
.inline-link { background: none; border: 0; padding: 0; color: var(--indigo); font-size: 12px; }

/* Signed-in shell: soft navy gradient ground, bar at the bottom */
.shell { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--bg); isolation: isolate; }
/* The glow is one fixed layer behind everything, composited once, so tab changes and scrolling never repaint it. */
.shell::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--glow), linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 45%); background-color: var(--bg); pointer-events: none; transform: translateZ(0); }
.solo { min-height: 100%; background: var(--bg); position: relative; isolation: isolate; }
/* Screens shown outside the app shell (consent, terms, legal, no agent) get the same backdrop as the app. */
.solo::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--glow), linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 45%); background-color: var(--bg); pointer-events: none; transform: translateZ(0); }
/* A page shown on its own (consent) stretches to the full height, so its centring spacers have room to work. */
.solo:not(.center-screen) { display: flex; flex-direction: column; }
.solo:not(.center-screen) > .page { flex: 1 0 auto; }
.center-screen { display: flex; align-items: center; }
.content { flex: 1; min-height: 0; position: relative; overflow: hidden; }
/* One screen at a time scrolls; the one on its way out sits on top with the shell's backdrop so the dissolve is clean. */
.screen { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.screen.leaving { z-index: 2; pointer-events: none; }
.screen.staged { visibility: hidden; }
/* Phones: one short dissolve. Wide screens (below) add travel in the direction of the change. Both
   screens are transparent over the shell's fixed glow, so the backdrop itself never moves. */
.screen.in-left, .screen.in-right, .screen.in-up { animation: screen-in 0.18s ease-out both; }
.screen.out-left, .screen.out-right, .screen.out-up { animation: screen-out 0.16s ease-out forwards; }
@keyframes screen-in { from { opacity: 0; } }
@keyframes screen-out { to { opacity: 0; } }
@media (min-width: 700px) {
  .screen.in-left { animation: in-left 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .screen.in-right { animation: in-right 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .screen.in-up { animation: in-up 0.36s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .screen.out-left { animation: out-left 0.3s cubic-bezier(0.4, 0, 0.6, 1) forwards; }
  .screen.out-right { animation: out-right 0.3s cubic-bezier(0.4, 0, 0.6, 1) forwards; }
  .screen.out-up { animation: screen-out 0.24s ease-out forwards; }
  .screen.leaving, .screen.in-left, .screen.in-right, .screen.in-up { will-change: transform, opacity; }
  /* The spinner stays invisible for the first moments, so a quick load never shows it at all. */
  .screen > .loading { animation: spinner-late 0.45s step-end both; }
}
@keyframes spinner-late { from { opacity: 0; } to { opacity: 1; } }
@keyframes in-left { from { transform: translateX(56px); opacity: 0; } }
@keyframes in-right { from { transform: translateX(-56px); opacity: 0; } }
@keyframes in-up { from { transform: translateY(18px); opacity: 0; } }
@keyframes out-left { to { transform: translateX(-40px); opacity: 0; } }
@keyframes out-right { to { transform: translateX(40px); opacity: 0; } }
/* Floating bar: a pill detached from the bottom edge; the page scrolls under it. */
.tabbar {
  position: absolute; left: 14px; right: 14px; bottom: calc(12px + var(--safe-b)); z-index: 6;
  display: flex; background: var(--bar); border: 1px solid var(--line); border-radius: 26px;
  padding: 6px 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.screen { padding-bottom: calc(88px + var(--safe-b)); }
.screen:has(> .chat) { padding-bottom: 0; }
.chat .composer { padding-bottom: calc(90px + var(--safe-b)); border-top: 0; }
.shell > .me-fixed { position: absolute; display: grid; place-items: center; top: calc(18px + var(--safe-t)); right: 20px; z-index: 6; background: var(--seg-on); color: var(--accent-text); border: 1px solid var(--line); }
.shell > .me-fixed[hidden] { display: none; }
.menu-back { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0); transition: background 0.22s ease; }
.menu-back.open { background: rgba(0, 0, 0, 0.45); }
.menu { position: absolute; top: 0; bottom: 0; left: 0; width: min(82vw, 340px); display: flex; flex-direction: column; background: var(--bg); color: var(--text); box-shadow: 12px 0 40px rgba(0, 0, 0, 0.4); transform: translateX(-104%); transition: transform 0.22s ease-out; padding: calc(22px + var(--safe-t)) 0 calc(16px + var(--safe-b)); }
.menu-back.open .menu { transform: none; }
.menu-head { display: flex; align-items: center; gap: 14px; padding: 6px 20px 18px; border-bottom: 1px solid var(--line); }
.menu .me-big { width: 48px; height: 48px; font-size: 19px; display: grid; place-items: center; border: 0; background: var(--twin); color: #fff; }
.menu-who { display: flex; flex-direction: column; min-width: 0; }
.menu-who strong { font-size: 17px; }
.menu-who span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-list { flex: 1; overflow-y: auto; padding: 10px 8px; }
.menu-item { display: flex; align-items: center; gap: 16px; width: 100%; padding: 13px 14px; border: 0; border-radius: 12px; background: none; color: var(--text); font-size: 16px; font-weight: 500; text-align: left; }
.menu-item:active { background: var(--surface-2); }
.menu-item .icon { color: var(--accent-text); flex: none; }
.menu-item.danger, .menu-item.danger .icon { color: var(--alert); }
.menu-rule { border: 0; border-top: 1px solid var(--line); margin: 8px 14px; }
.menu-foot { text-align: center; color: var(--faint); font-size: 12px; margin: 8px 0 0; }
@media (prefers-reduced-motion: reduce) { .menu, .menu-back { transition: none; } }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 2px; background: none; border: 0; color: var(--muted); font-size: 12px; font-weight: 500; }
.tab.tab-extra { display: none; }
.tab[aria-current="page"] { color: var(--accent-text); font-weight: 600; }

/* Pages */
/* One gutter everywhere: titles, labels and cards share the same left edge (20px, as on Home). */
.page { padding: calc(18px + var(--safe-t)) 20px 28px; max-width: 640px; margin: 0 auto; width: 100%; }
/* A short screen sits in the middle of the view instead of bunching at the top; a long one scrolls as usual. */
.page:not(.home) { display: flex; flex-direction: column; min-height: 100%; box-sizing: border-box; }
.page:not(.home):not(.sub):not(.top)::before, .page:not(.home):not(.sub):not(.top)::after { content: ""; flex: 1 0 0; }
.page:not(.home) > * { flex: none; }
/* Spacing scale, used on every screen: back row 44px; title; title to subtitle 4px; subtitle (or title) to first
   content 24px; label to card 12px; card to card 20px; footnote 16px above. */
.page-title { font-size: 35px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.page-sub { color: var(--muted); font-size: 16px; line-height: 1.4; margin: 4px 0 24px; }
.page-title + :not(.page-sub) { margin-top: 24px; }
.back { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; padding: 0; color: var(--text); margin: 0 0 4px -12px; }
/* Sub-screens start a little lower than the tabs so the header clears the status bar. */
.page.sub, .page.top { padding-top: calc(28px + var(--safe-t)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--card-shadow); }
.note { padding: 16px 18px; }
.note p { margin: 0; }
.note p + p { margin-top: 4px; color: var(--muted); font-size: 14px; }
.group { margin-bottom: 20px; }
.group:last-child { margin-bottom: 0; }
.group-label { color: var(--muted); font-size: 15px; font-weight: 500; margin: 0 0 12px; }
.group + .group .group-label, .card + .group .group-label { margin-top: 4px; }
/* A footnote or footer directly after a group keeps its own 16/24/40 distance; the group adds nothing. */
.group:has(+ .foot-note), .group:has(+ .more-foot), .group:has(+ .about-foot), .group:has(+ .text-btn), .card:has(+ .foot-note) { margin-bottom: 0; }
.list + .group-label, .note + .group-label { margin-top: 22px; }
.list { overflow: hidden; }
.row {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 74px; padding: 14px 16px;
  background: none; border: 0; border-top: 1px solid var(--line); text-align: left; color: var(--text);
}
.row:first-child { border-top: 0; }
.row-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent-text); flex: none; }
.row-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.row-title { font-weight: 600; font-size: 15px; }
.row-detail { color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.row-chevron, .row-value { color: var(--faint); }
.row.danger .row-title, .row.danger .row-icon { color: var(--alert); }
.prose p { color: var(--text); font-size: 16px; line-height: 1.5; margin: 0 0 14px; }
.prose p:last-child { margin-bottom: 0; }
/* Reading text is flush on both sides; hyphenation avoids wide word gaps on short lines. */
.foot-note { color: var(--muted); font-size: 13px; line-height: 1.4; text-align: center; margin: 16px 0 0; }
.prose p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
.consent-point p { text-wrap: pretty; }
.sn { display: inline-block; }
.sheet-head strong { font-size: 20px; }
.sheet-head .text-btn { font-size: 16px; }
.arrange { touch-action: none; user-select: none; }
.arrange .list { margin-bottom: 24px; }
.grip { color: var(--muted); padding: 8px; margin-right: -8px; cursor: grab; touch-action: none; }
.arrange-row.dragging { background: var(--surface-2); }
.about-foot { text-align: center; margin-top: 40px; }
.about-foot .nameplate { font-size: 18px; color: var(--text); }
.about-foot p { color: var(--muted); font-size: 12px; margin-top: 4px; }
.more-foot { text-align: center; color: var(--faint); font-size: 12px; margin: 24px 0 0; }

/* Avatar: the Twin glyph in a white circle with the Twin gradient ring, green dot when active */
.avatar { position: relative; flex: none; border-radius: 50%; padding: 2px; background: var(--twin); }
.avatar-inner { border-radius: 50%; background: #fff; display: grid; place-items: center; }
.avatar-glyph { width: 42%; height: auto; }
.avatar-md .avatar-inner { width: 46px; height: 46px; }
.avatar-xs .avatar-inner { width: 26px; height: 26px; }
.avatar-xs { padding: 1.5px; }
.online-dot { position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--live); border: 2px solid var(--bg); }

/* Shared bits */
.eyebrow { display: block; color: var(--muted); font-size: 15px; font-weight: 500; margin-bottom: 2px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.icon-btn { background: none; border: 0; padding: 6px; color: var(--muted); display: grid; place-items: center; border-radius: 50%; }
.toast { position: fixed; left: 50%; bottom: calc(100px + var(--safe-b)); transform: translateX(-50%); max-width: calc(100% - 40px); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); z-index: 30; animation: rise 0.2s ease-out; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }
.sheet-back { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: flex-end; z-index: 25; }
.sheet { width: 100%; max-width: 560px; margin: 0 auto; background: var(--bg); border-radius: 22px 22px 0 0; padding: 10px 20px calc(20px + var(--safe-b)); animation: up 0.22s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@keyframes fade { from { transform: translateY(10px); opacity: 0; } }
.sheet-grab { width: 36px; height: 4px; border-radius: 2px; background: var(--faint); margin: 0 auto 14px; }
.sheet-agent { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sheet .btn-secondary { margin-top: 14px; }
.sheet .btn-primary + .btn-secondary { margin-top: 10px; }
.btn-primary.danger { background: var(--alert); }
.sheet-title { font-size: 20px; font-weight: 700; margin: 2px 0 6px; }
.sheet-text { color: var(--muted); margin: 0 0 16px; }
.badge { position: absolute; top: -5px; right: -9px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--alert); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bar); box-sizing: content-box; }
.tab-icon { position: relative; display: inline-flex; }

/* Home: the Twin gradient band at the top, cards below */
.page.home { padding: 0 0 28px; max-width: none; }
.home-band { position: relative; overflow: hidden; background: var(--band, linear-gradient(180deg, #17b3ec 0%, #1f7fd0 45%, #2a3fb0 100%)); color: #fff; border-radius: 0 0 32px 32px; padding: calc(16px + var(--safe-t)) 20px 28px; }
.home-band::before { content: ""; position: absolute; left: -40px; top: 64px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 70%); pointer-events: none; }
.home-band > * { position: relative; }
.home-band > * { position: relative; }
.band-mark { position: absolute; right: -40px; bottom: -60px; width: 190px; height: auto; opacity: 0.12; pointer-events: none; }
.home-head { display: flex; justify-content: space-between; align-items: center; min-height: 52px; margin-bottom: 30px; }
.home-head .nameplate { font-size: 20px; }
.home-head-right { display: flex; align-items: center; gap: 10px; }
.agent-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 170px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 13px; font-weight: 600; }
.pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); flex: none; }
.pill-dot.on { background: #7df3b0; box-shadow: 0 0 10px rgba(125, 243, 176, 0.8); }
.head-name { font-weight: 700; font-size: 19px; }
.head-status { color: var(--muted); font-size: 15px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.head-name { display: flex; align-items: center; gap: 4px; min-width: 0; }
.head-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.head-switch { border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 0; cursor: pointer; }
.head-switch .head-name svg { color: var(--muted); flex: none; }
.head-vault { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.head-vault.on { color: var(--text); }
.me { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: 600; font-size: 14px; flex: none; }
.band-sub { font-size: 15px; font-weight: 500; opacity: 0.85; margin: 0; }
.greeting { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 6px 0 10px; }
.band-meta { font-size: 13px; color: rgba(255, 255, 255, 0.72); margin: 0; }
.home-body { padding: 24px 20px 0; max-width: 640px; margin: 0 auto; }
.home-body .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }
.upnext { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; margin: 0 0 22px; background: var(--surface); border-radius: 20px; }
.upnext-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.upnext-text strong { font-size: 19px; }
.upnext-text .muted { font-size: 15px; color: var(--muted); }
.pill-btn { flex: none; background: var(--twin); color: #fff; border: 0; border-radius: 999px; padding: 9px 18px; font-weight: 600; font-size: 15px; text-decoration: none; }
.feed { display: flex; flex-direction: column; }
.feed-item { padding: 16px 0 14px; border-top: 1px solid var(--line); }
.feed-item:first-child { border-top: 0; padding-top: 4px; }
.feed-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.feed-name { font-weight: 700; font-size: 17px; }
.feed-time { color: var(--muted); font-size: 15px; }
.feed-text { font-size: 19px; line-height: 1.4; margin: 0; }
.feed-empty { margin-top: 8px; }

/* Usage */
.segmented { display: flex; background: var(--seg); border-radius: 14px; padding: 4px; gap: 4px; margin: 0 0 20px; }
.seg { flex: 1; border: 1px solid transparent; border-radius: 11px; padding: 11px 0; background: none; color: var(--muted); font-weight: 600; font-size: 16px; }
.seg.on { background: var(--seg-on); color: var(--text); border-color: rgba(143, 184, 212, 0.45); }
.spent { padding: 20px 22px 18px; }
.big-number { font-size: 52px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 2px 0 6px; background: var(--num); -webkit-background-clip: text; background-clip: text; color: transparent; }
.delta { font-size: 14px; font-weight: 700; }
.delta.good { color: var(--live); }
.delta.bad { color: var(--attention); }
.delta .muted { font-weight: 500; }
.stat { padding: 18px 20px; display: flex; flex-direction: column; }
.stat strong { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; background: var(--num); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.model { display: flex; align-items: center; gap: 14px; padding: 16px 20px; margin-bottom: 0; }
.model .row-title { font-size: 18px; }
.model-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--twin); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 17px; flex: none; }
.text-btn.plain { color: var(--text); }
.center { text-align: center; }
.small { font-size: 13px; }
.muted { color: var(--muted); }

/* Skills and Apps */
.tone-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.tone-icon.orange { background: #fe9309; }
.tone-icon.blue { background: #4d78a0; }
.tone-icon.plum { background: #6f0875; }
.tone-icon.sky { background: #3b8fe8; }
.tone-icon.green { background: #17a65c; }
.switch { position: relative; width: 54px; height: 32px; border-radius: 16px; border: 0; background: var(--faint); padding: 0; flex: none; transition: background 0.15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(22px); }
.letter { width: 46px; height: 46px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--accent-text); display: grid; place-items: center; font-weight: 600; font-size: 16px; flex: none; }
.status { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 8px; font-size: 14px; font-weight: 700; border: 1px solid transparent; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.live { color: var(--live); background: var(--live-bg); border-color: rgba(49, 227, 143, 0.35); }
.status.fix { color: var(--attention); background: var(--attention-bg); border-color: rgba(254, 147, 9, 0.4); }
.row .row-title { font-size: 18px; line-height: 1.22; }
.row-detail { line-height: 1.3; margin-top: 1px; }

/* Chat */
.chat { height: 100%; display: flex; flex-direction: column; max-width: 760px; margin: 0 auto; }
/* Right padding leaves room for the fixed avatar (20px in, 40px wide) so the info button sits left of it. */
.chat-head { flex: none; display: flex; align-items: center; gap: 12px; padding: calc(12px + var(--safe-t)) 68px 10px 18px; }
.head-text { flex: 1; min-width: 0; }
.banner { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 16px 8px; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.thread { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; }
.thread > :first-child { margin-top: auto; }
.day { text-align: center; color: var(--muted); font-size: 13px; font-weight: 600; margin: 10px 0 6px; }
.msg { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; }
.msg.user { align-self: flex-end; }
.msg.assistant .avatar { margin-bottom: 20px; }
.chat-head .avatar-md .avatar-inner { width: 42px; height: 42px; }
.msg-col { display: flex; flex-direction: column; min-width: 0; }
.msg.user .msg-col { align-items: flex-end; }
.bubble { padding: 10px 14px; border-radius: 18px; overflow-wrap: anywhere; }
.msg.assistant .bubble { background: var(--bubble); border: 1px solid var(--line); }
.msg.user .bubble { background: var(--twin); color: #fff; white-space: pre-wrap; box-shadow: 0 8px 20px rgba(42, 63, 176, 0.22); }
.time { color: var(--muted); font-size: 12px; margin: 4px 6px 4px; }
.msg.failed .bubble { opacity: 0.55; }
/* Website chat transcripts (sites.ts): the same bubbles, read only, the chatbot on the right. */
.site-thread { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.site-thread .day { align-self: center; }
.site-thread .msg.assistant .bubble { white-space: pre-wrap; }
.msg-note { color: var(--muted); font-size: 13px; margin: 0 4px 6px; text-align: right; max-width: 300px; }
.bubble p:last-child, .bubble ul:last-child, .bubble ol:last-child, .bubble pre:last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { margin: 0 0 8px; padding-left: 20px; }
.bubble code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; background: rgba(127, 140, 170, 0.18); padding: 1px 5px; border-radius: 6px; }
.bubble pre { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.22); overflow-x: auto; }
.bubble pre code { background: none; padding: 0; }
.md-heading { font-weight: 700; }
.typing { display: flex; gap: 4px; padding: 14px 16px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.composer { flex: none; display: flex; align-items: flex-end; gap: 6px; padding: 10px 10px 12px; border-top: 1px solid var(--line); }
.icon-btn.side { width: 40px; height: 44px; flex: none; }
.composer-field { flex: 1; min-width: 0; display: flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 22px; }
.composer textarea { flex: 1; min-width: 0; width: 100%; resize: none; border: 0; background: none; outline: none; padding: 11px 16px; max-height: 140px; line-height: 1.35; }
.send { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--twin); display: grid; place-items: center; }
.send-arrow { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid #fff; margin-top: -2px; }

/* Loading */
.loading { height: 100%; display: grid; place-items: center; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--surface-2); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Light mode details from the mockups: solid agent avatars, blue-tinted highlight cards */
@media (prefers-color-scheme: light) {
  .bar { background: #c6d5e8; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Phase 3b: skill list with search */
.search { width: 100%; padding: 11px 14px; margin: 0 0 20px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 16px; outline: none; }
.search:focus { border-color: var(--accent); }
.skill-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font-size: 22px; flex: none; color: var(--accent-text); font-weight: 700; }
.row.dim .row-title { color: var(--muted); }
.row.dim .skill-icon { opacity: 0.55; }
.big-empty { font-size: 24px; font-weight: 700; color: var(--muted); margin: 8px 0 6px; }

/* Skills, grouped: each group is a card that opens with a tap. Each group has its own warm
   gradient taken from the Twin palette, softened for a dark screen; its skills share it. */
.skill-groups { margin-top: 0; }
.skill-add { margin-top: 0; margin-bottom: 14px; }
.find-topics { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px 14px; padding: 0 20px 2px; scrollbar-width: none; }
.find-topics::-webkit-scrollbar { display: none; }
.find-topic { flex: none; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.find-topic.on { background: var(--seg-on); border-color: var(--accent); color: var(--accent-text); }
.skill-group { border-top: 1px solid var(--line); }
.skill-group:first-child { border-top: 0; }
.skill-group-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: none; border: 0; color: var(--text); text-align: left; font: inherit; }
.skill-group-head .row-title { font-size: 18px; }
.skill-group-head .row-detail { font-size: 14px; }
.skill-count { color: var(--text); background: var(--surface-2); border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.skill-chev { color: var(--faint); display: grid; transition: transform 0.18s; }
.skill-group.open .skill-chev, .skill-group.searching .skill-chev { transform: rotate(90deg); }
.skill-badge { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; flex: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }
.skill-rows { border-top: 1px solid var(--line); }
.row.skill .row-title { font-size: 16px; }
.row.skill .row-detail { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.skill-icon[class*="tone-"] { border: 0; color: #fff; }
.tone-everyday { background: linear-gradient(135deg, #fe9309, #df4a2e); }
.tone-work { background: linear-gradient(135deg, #2fa6dc, #3e5bc4); }
.tone-create { background: linear-gradient(135deg, #e0366a, #8a1b8f); }
.tone-home { background: linear-gradient(135deg, #22b573, #1a8fb8); }
.tone-build { background: linear-gradient(135deg, #5b7fd6, #6b3fb0); }
.tone-system { background: linear-gradient(135deg, #8e74c8, #4d5aa8); }
.tone-other { background: linear-gradient(135deg, #5d8fc0, #8e74c8); }
.tone-na { background: linear-gradient(135deg, #3a4360, #2a3150); color: var(--muted); }
.switch.on { background: linear-gradient(135deg, #4d9bd0, #6a7fd0); }
.tone-twin { background: linear-gradient(135deg, #0c9dd8, #2a3fb0); }

/* Account and AI consent */
.field { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 16px; outline: none; }
.field:focus { border-color: var(--accent); }
.field-card { padding: 14px; }
.sheet .field { margin-bottom: 4px; }
.consent-page { padding-top: calc(28px + var(--safe-t)); padding-bottom: calc(12px + var(--safe-b)); }
.page.consent-page > .consent-card { padding: 2px 18px; margin: 16px 0 8px; }
.consent-point { padding: 10px 0; border-top: 1px solid var(--line); }
.consent-page .page-sub { margin-bottom: 16px; }
.consent-page > .consent-card { margin-top: 0; }
.consent-point:first-child { border-top: 0; }
.consent-point strong { display: block; font-size: 15px; margin-bottom: 2px; }
.consent-point p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.consent-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.consent-foot .btn-primary { width: 100%; margin: 8px 0 4px; }

/* Model picker */
.sheet-tall { max-height: 86dvh; display: flex; flex-direction: column; }
.sheet-scroll { overflow-y: auto; min-height: 0; margin: 0 -4px; padding: 0 4px; }
.sheet-scroll .group-label { margin: 10px 4px 10px; }
.sheet-scroll .group-label:first-child { margin-top: 0; }
.sheet-scroll .card { background: var(--surface); }
.model-row { min-height: 64px; }
.group.settings { margin: 20px 0 0; }
/* Daily brief card on Home. */
.brief { padding: 16px 18px 14px; margin: 0 0 22px; }
.brief-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.brief-head .eyebrow { margin: 0; color: var(--accent-text); }
.brief.evening .brief-head .eyebrow { color: #c9a7ff; }
.brief-time { color: var(--faint); font-size: 13px; }
.brief-title { font-size: 18px; font-weight: 700; margin: 0 0 12px; line-height: 1.25; }
.brief-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.brief-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.35; }
.brief-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); color: var(--accent-text); display: grid; place-items: center; flex: none; }
.brief-text { display: flex; flex-direction: column; min-width: 0; }
.brief-text b { font-weight: 600; }
.brief-text small { color: var(--muted); font-size: 13px; margin-top: 1px; }
.brief-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.brief-foot .text-btn { padding: 0; }
.brief-foot .muted { color: var(--faint); font-size: 13px; text-align: right; }
.settings .row-value { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; color: var(--muted); flex: none; }
.model-row.current .row-title { color: var(--accent-text); }
.model-avatar.small { width: 38px; height: 38px; font-size: 15px; background: var(--twin); }
.check { color: var(--accent-text); display: grid; }

/* Home overview */
.home-body .group-label { margin: 0 0 12px; }
.home-body .upnext + .group-label { margin-top: 2px; }
.home-body .two { margin: 0 0 24px; }
.home-body .row-icon { color: var(--accent-text); }
.spent { padding: 22px; }
.spent .delta, .spent .muted.small { display: inline-block; margin-top: 2px; }

/* A screen coming in on a tab change fades and rises a touch; nothing on the way out, so taps stay instant. */

/* Markets */
.mk { display: flex; align-items: center; gap: 14px; padding: 13px 18px; }
.mk + .mk { border-top: 1px solid var(--line); }
.mk.mini { padding: 11px 16px; }
.coin { width: 38px; height: 38px; border-radius: 50%; flex: none; object-fit: cover; background: var(--surface-2); }
.coin-text { display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--twin); }
.mk.mini .coin { width: 32px; height: 32px; }
.mk-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-name b { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-name span { color: var(--muted); font-size: 13px; }
.spark { width: 68px; height: 28px; flex: none; }
.spark polyline { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke: var(--muted); }
.spark.up polyline { stroke: var(--live); }
.spark.dn polyline { stroke: var(--alert); }
.mk-px { text-align: right; min-width: 84px; display: flex; flex-direction: column; align-items: flex-end; }
.mk-px b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chg { display: inline-block; margin-top: 3px; padding: 2px 7px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-2); }
.chg.up { color: var(--live); background: var(--live-bg); }
.chg.dn { color: var(--alert); background: rgba(255, 92, 122, 0.14); }
.mk-empty { color: var(--muted); padding: 16px 18px; margin: 0; }
.mk-label { display: flex; align-items: center; justify-content: space-between; }
/* Coin detail: tappable rows in the list, a price header, the line, a range picker and figures. */
button.mk-btn { width: 100%; border: 0; background: none; color: var(--text); text-align: left; font: inherit; }
.coin-head { padding: 18px 20px 16px; margin-bottom: 14px; }
.coin-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.coin-top .coin { width: 46px; height: 46px; }
.coin-price { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; background: var(--num); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.coin-move { margin-top: 6px; }
.coin-move .chg { font-size: 13px; padding: 4px 9px; }
.coin-chart { position: relative; height: 170px; margin: 0 -4px 12px; display: grid; place-items: center; }
.coin-chart .spinner { animation: spin 0.8s linear infinite, spinner-late 0.45s step-end both; }
.coin-chart .mk-empty { padding: 0; }
.chart { width: 100%; height: 100%; display: block; }
.chart-line { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-area { fill: var(--surface-2); }
.chart.up .chart-line { stroke: var(--live); }
.chart.up .chart-area { fill: var(--live-bg); }
.chart.dn .chart-line { stroke: var(--alert); }
.chart.dn .chart-area { fill: rgba(255, 92, 122, 0.14); }
.segmented.ranges { margin-bottom: 22px; }
.segmented.ranges .seg { padding: 9px 0; font-size: 15px; }
.stat-row { min-height: 54px; padding: 10px 18px; }
.stat-row .row-detail { font-size: 15px; }
.stat-val { font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.mk-label .text-btn { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 600; color: var(--accent-text); padding: 0; }
.home-body .mk-group { margin-top: 24px; }
.home-body .mk-group[hidden] { display: none; }

/* Vault */
.vault-storage { padding: 16px 18px; margin-bottom: 20px; }
.vault-storage-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.vault-storage-row b { font-size: 17px; }
.vault-bar { height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; margin-bottom: 10px; }
.vault-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--sky), var(--indigo)); }
.vault-storage p { margin: 0; }
.vault-search { margin-bottom: 20px; }
.vault-results .group:last-child { margin-bottom: 0; }
.vault-results + .text-btn { margin-top: 24px; }
.vault-empty { margin: 8px 0 0; }
.ext-tile { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.ext-tile.doc { color: var(--accent-text); }
.ext-tile.sheet { color: #35b37e; }
.ext-tile.image { color: #d66aa3; }
.ext-tile.media { color: #9b7bea; }
.ext-tile.other { color: var(--muted); }
.vault-file .row-title { word-break: break-word; }
.field.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; }
.field-card .form-error:empty { display: none; }

/* Agent line in the menu head */
.menu-agent { border-bottom: 1px solid var(--line); padding: 4px 0 8px; }
.menu-agent-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 20px; border: 0; background: none; color: var(--text); text-align: left; }
.menu-agent-add { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 20px; border: 0; background: none; color: var(--accent-text); font-size: 15px; font-weight: 600; text-align: left; }
.menu-agent-plus { width: 22px; height: 22px; margin-left: -6px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); flex: none; }
.menu-agent-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); flex: none; }
.menu-agent-dot.on { background: #35b37e; }
.menu-agent-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.menu-agent-text strong { font-size: 15px; }
.menu-agent .eyebrow { font-size: 12px; margin-bottom: 0; }
.menu-agent-row .row-chevron { color: var(--muted); }
.sheet .field { margin-bottom: 10px; }

/* Wide screens: unfolded foldables, tablets, laptops. The bottom bar becomes a rail on the left,
   the content keeps a readable column in the middle, and sheets open as centred dialogs. */
@media (min-width: 700px) {
  .shell { flex-direction: row; }
  .tabbar {
    order: -1; position: static; flex: none; width: 92px; align-self: stretch;
    flex-direction: column; justify-content: flex-start; gap: 6px;
    padding: calc(22px + var(--safe-t)) 8px calc(16px + var(--safe-b));
    border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none;
    background: var(--bar); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .tab { flex: none; padding: 11px 0 9px; border-radius: 14px; }
  .tab.tab-extra { display: flex; }
  .menu-item.menu-extra { display: none; }
  .tab[aria-current="page"] { background: var(--surface-2); }
  .screen { padding-bottom: 32px; }
  .screen:has(> .chat) { padding-bottom: 0; }
  .chat { max-width: 880px; }
  .chat .composer { padding-bottom: 18px; }
  .msg { max-width: 72%; }
  .page, .home-body { max-width: 720px; }
  .home-band { border-radius: 0 0 36px 36px; }
  .home-band > * { max-width: 720px; margin-left: auto; margin-right: auto; }
  .toast { bottom: 36px; }
  .sheet-back { align-items: center; justify-content: center; padding: 24px; }
  .sheet { max-width: 460px; border-radius: 22px; padding: 22px 24px 22px; animation: fade 0.18s ease-out; }
  .sheet-grab { display: none; }
  .menu { width: 360px; }
}
/* Pointer devices: a quiet hover on things that can be pressed. Colours are the existing surfaces. */
@media (hover: hover) and (pointer: fine) {
  .tab:hover, .menu-item:hover, button.row:hover { background: var(--surface-2); }
  .tab { transition: background 0.12s ease; }
}

/* Admin tag, Account and payments, Add agent, Building (p44) */
.menu-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.admin-tag { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; color: var(--accent-text); background: var(--surface-2); border: 1px solid var(--line); }
.status.off { color: var(--muted); background: var(--surface-2); border-color: var(--line); }
.plans-slot:empty { display: none; }
.plan-box { padding: 18px 18px 8px; margin: 0 0 18px; }
.plan-box .eyebrow { margin: 0 0 6px; color: var(--accent-text); }
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-price strong { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; background: var(--num); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-price span { color: var(--muted); font-size: 15px; }
.plan-sub { color: var(--muted); font-size: 15px; margin: 2px 0 10px; }
.plan-box .kv { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; }
.plan-box .kv span:last-child { color: var(--muted); }
.foot-note.stack .sn { display: block; }
.foot-note.stack .sn + .sn { margin-top: 4px; }
.build-card { padding: 6px 18px; }
.build-list { list-style: none; margin: 0; padding: 0; }
.build-step { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.build-step:first-child { border-top: 0; }
.build-dot { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 2px solid var(--line); color: #fff; margin-top: 1px; }
.build-step.done .build-dot { background: var(--accent); border-color: var(--accent); }
.build-step:not(.done) .row-title { color: var(--muted); }
.plans-slot .group:last-child { margin-bottom: 20px; }
.foot-note.stack.left { text-align: left; margin: 10px 4px 0; }
.field.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.row.choice { padding-left: 0; padding-right: 0; }
.field-card .row.choice + .field { margin-top: 10px; }
.tick-box { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line); display: grid; place-items: center; color: #fff; flex: none; }
.tick-box.on { background: var(--accent); border-color: var(--accent); }
.slot > .group:last-child { margin-bottom: 20px; }
.group .segmented { margin-bottom: 0; }
.segmented.providers .seg { font-size: 15px; padding-left: 0; padding-right: 0; }

/* Onboarding (p46): trial, agent setup, Twin Vault, welcome */
.page.ob { padding-top: calc(52px + var(--safe-t)); }
.ob-steps { display: flex; gap: 6px; margin: 0 0 22px; }
.ob-steps span { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-2); }
.ob-steps span.on { background: var(--accent); }
.ob-label { color: var(--muted); font-size: 13px; margin: 0 0 6px; }
.ob .btn-primary { width: 100%; margin-top: 18px; }
.ob .text-btn.block, .welcome .text-btn.block { width: 100%; text-align: center; margin-top: 10px; }
.card.perks { padding: 4px 16px; margin-bottom: 20px; }
.perk { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.perk:first-child { border-top: 0; }
.perk-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; color: var(--accent-text); flex: none; }
.perk b { display: block; font-size: 15px; font-weight: 600; }
.perk small { display: block; color: var(--muted); font-size: 14px; line-height: 1.35; margin-top: 2px; }
.perk small .sn { display: block; }
.tut-card { padding: 16px 18px; }
.tut { padding-left: 20px; margin: 0; }
.tut li { margin: 0 0 12px; line-height: 1.4; }
.tut li:last-child { margin-bottom: 0; }
.tut li::marker { color: var(--accent-text); font-weight: 700; }
.tut li b { display: block; }
.tut li small { color: var(--muted); font-size: 14px; }
.link-btn { display: grid; place-items: center; text-decoration: none; color: #fff; }
.page.welcome { text-align: center; padding-top: calc(56px + var(--safe-t)); }
.welcome-mark { width: 72px; height: 72px; margin: 0 auto 18px; display: block; }
.welcome .page-title { font-size: 30px; }
.welcome .page-sub { margin-left: auto; margin-right: auto; max-width: 320px; }
.welcome .card { text-align: left; }
.welcome .btn-primary { width: 100%; margin-top: 22px; }

/* Brief times: any time of day (p47) */
.custom-time { margin: 16px 0 0; }
.time-card { display: flex; gap: 10px; align-items: center; }
.time-card .time-field { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; color-scheme: dark; }
.time-card .time-save { width: auto; flex: none; padding: 0 22px; margin: 0; height: 50px; border-radius: 14px; }
@media (prefers-color-scheme: light) { .time-card .time-field { color-scheme: light; } }

/* Admin (p48) */
.row-trail { flex: none; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.admin-actions { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 24px; }
.admin-actions .btn-primary, .admin-actions .btn-secondary { width: 100%; }
.btn-secondary.danger-text { color: var(--alert); }
.admin-gap { height: 14px; }
.field-card .field + .btn-primary { width: 100%; margin-top: 12px; }
.admin .row-title, .admin .page-title { overflow-wrap: normal; word-break: normal; }
.support-head { padding-left: 6px; }
.support-head .back { margin: 0; flex: none; }
.support-head .text-btn { margin-left: auto; flex: none; }
.who { flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-weight: 700; }
.who-xs { width: 30px; height: 30px; font-size: 13px; }
.who-md { width: 46px; height: 46px; font-size: 18px; }
.support-head .head-text { min-width: 0; }
.chat.support .bubble.plain-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.menu-item .menu-badge { margin-left: auto; }

/* Announcement on Home (Admin > App settings) */
.notice .upnext-text strong { font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.notice .pill-btn { flex: none; border: 0; cursor: pointer; }
.role-text { margin: 10px 0 0; font-size: 14px; }

/* Chat attachments: cards in bubbles and the tray above the message box */
.file-card { display: flex; align-items: center; gap: 10px; max-width: 280px; padding: 10px 12px; margin-bottom: 4px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--text); text-align: left; font: inherit; }
button.file-card { cursor: pointer; }
.file-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); color: var(--accent-text); display: grid; place-items: center; flex: none; }
.file-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.file-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { font-size: 13px; color: var(--muted); }
.tray { flex: none; display: flex; gap: 8px; overflow-x: auto; padding: 10px 10px 0; border-top: 1px solid var(--line); }
.tray + .composer { border-top: 0; }
.tray-item { display: flex; align-items: center; gap: 8px; flex: none; width: 230px; padding: 8px 6px 8px 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.tray-track { display: block; height: 3px; margin-top: 5px; border-radius: 2px; background: var(--line); overflow: hidden; }
.tray-bar { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s; }
.tray-item.ready .tray-track, .tray-item.failed .tray-track { display: none; }
.tray-item.failed .file-meta { color: var(--alert); white-space: normal; }
.tray-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.attach-grid { display: flex; justify-content: space-around; gap: 12px; margin: 6px 0 4px; }
.attach-tile { flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.attach-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--accent-text); display: grid; place-items: center; }
.attach-tile:active .attach-ic { background: var(--line); }

/* Admin > Alerts */
.alerts .alert-item { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.alerts .alert-item:last-child { border-bottom: 0; }
.alert-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.alert-source { font-weight: 600; font-size: 15px; }
.alert-item.unread .alert-source::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; }
.alert-meta { font-size: 13px; color: var(--muted); white-space: nowrap; }
.alert-text { margin: 4px 0 0; font-size: 14px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.push-row .row-text { flex: 1; }
.push-row .row-detail { white-space: normal; }
.push-actions { display: flex; justify-content: space-between; padding: 4px 16px 12px; }

/* Chat history: earlier messages, the search button, and the Chat history screen. */
.earlier-row { display: flex; justify-content: center; padding: 6px 0 2px; }
.earlier-row .day { margin: 0; }
.text-btn.earlier { font-size: 14px; }
.head-search { flex: none; color: var(--muted); }
.hist-body { display: flex; flex-direction: column; gap: 12px; }
.hist-empty { padding: 28px 12px; }
.hist-hit { align-items: flex-start; cursor: pointer; }
.hist-hit .row-text { gap: 4px; }
.hist-text { margin: 0; color: var(--text); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.hist-text mark { background: rgba(125, 200, 255, 0.28); color: inherit; border-radius: 3px; padding: 0 1px; }
.hist-full { max-width: 100%; overflow-wrap: anywhere; color: var(--text); font-size: 15px; line-height: 1.5; }
.hist-full p { margin: 0 0 8px; }
.hist-full p:last-child { margin-bottom: 0; }
.hist-link, .hist-link:visited { text-decoration: none; color: inherit; }
.hist-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.hist-link .row-text { min-width: 0; }
.hist-files { display: flex; flex-direction: column; gap: 10px; }
.hist-file { display: flex; flex-direction: column; gap: 4px; }
.hist-file .file-card { max-width: none; }

/* Configurable Home: every card keeps the same gap whatever the order. */
.home-body > .home-card, .home-body > .group { margin: 0 0 24px; }
.home-body > .home-card .two { margin-bottom: 0; }
.home-body .mk-group { margin-top: 0; }
.vault-home { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.vault-home .vault-bar { margin: 0; }
.vault-home-off { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
.vault-home-off p { margin: 0; }
.vault-home-off .pill-btn { flex: none; border: 0; cursor: pointer; }
.vault-home-label { margin: 6px 0 0; color: var(--muted); }
.vault-home-item { display: flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--text); padding: 4px 0; text-align: left; font: inherit; cursor: pointer; }
.vault-home-item svg { color: var(--accent-text); flex: none; }
.vault-home-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.text-btn.home-customize { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px auto 28px; padding: 10px 14px; color: var(--muted); }
.text-btn.home-customize svg { flex: none; }
.home-order .arrange-row .switch { margin-left: auto; }
.home-order .arrange-row.off .row-title { color: var(--muted); }
.vault-home .vault-storage-row { margin: 0; flex-wrap: wrap; }

/* Vault file viewer and recently changed files. */
.viewer-body { display: flex; justify-content: center; margin: 0 0 18px; }
.viewer-loading { padding: 60px 0; }
.viewer-image { display: block; max-width: 100%; max-height: 70vh; border-radius: 16px; background: var(--surface); object-fit: contain; }
.viewer-video { display: block; width: 100%; max-height: 70vh; border-radius: 16px; background: #000; }
.viewer-audio { width: 100%; }
.viewer-text { width: 100%; max-height: 65vh; overflow: auto; margin: 0; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.viewer-pdf { width: 100%; height: 70vh; border: 0; border-radius: 16px; background: #fff; }
.viewer-none { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 28px 20px; }
.viewer-none p { margin: 0; }
.btn-primary.viewer-save { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.vault-recent[hidden] { display: none; }

/* Private label: an uploaded logo in place of the Twin mark, and the Branding screen in Admin. */
.nameplate-logo { height: 1.6em; width: auto; max-width: 9em; object-fit: contain; }
.brand-colours { display: flex; gap: 12px; }
.brand-colour { flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.brand-colour input[type=color] { width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: none; cursor: pointer; flex: none; }
.brand-colour span { font-size: 15px; }
.brand-preview { border-radius: 20px; padding: 18px 18px 20px; color: #fff; background: var(--band, linear-gradient(180deg, #17b3ec 0%, #1f7fd0 45%, #2a3fb0 100%)); margin: 0 0 20px; }
.brand-preview .nameplate { font-size: 20px; }
.brand-preview p { margin: 14px 0 0; font-size: 22px; font-weight: 700; }
.brand-logo-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.brand-logo-box { width: 64px; height: 64px; border-radius: 14px; background: var(--surface-2); display: grid; place-items: center; flex: none; overflow: hidden; }
.brand-logo-box img { max-width: 56px; max-height: 56px; object-fit: contain; }
.brand-logo-row .row-text { flex: 1; }
.nameplate-logo.on-light { background: var(--twin); border-radius: 10px; padding: 4px; box-sizing: content-box; height: 1.3em; }
.avatar-inner.branded { background: var(--twin); }
.avatar-initial { color: #fff; font-weight: 700; font-size: 15px; }
.avatar-md .avatar-initial { font-size: 19px; }
.splash-icon.branded, .welcome-mark.branded { object-fit: contain; background: var(--twin); padding: 12px; box-sizing: border-box; border-radius: 18px; }

/* Vault consent line, above Agree and connect. */
.consent-note { font-size: 13px; line-height: 1.45; color: var(--muted); margin: 12px 2px 10px; }
.notice-detail { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; font-weight: 400; }

/* Vault dashboard: totals, activity rows and who-did-it tags. */
.vault-totals { margin: 0 0 16px; }
.stat-sub { color: var(--muted); font-size: 14px; font-weight: 500; margin-top: 2px; }
.act-seg { margin: 0 0 12px; }
.act-seg .seg { padding: 8px 0; font-size: 15px; }
.act-icon { color: var(--muted); }
.act-icon.ai { color: var(--accent-text); }
.vault-act { cursor: default; }
.who-tag { flex: none; padding: 3px 9px; border-radius: 7px; font-size: 13px; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }
.who-tag.ai { color: var(--accent-text); background: var(--seg-on); border-color: rgba(143, 184, 212, 0.45); }

/* Add a skill: ClawHub's numbers, security audit and facts, inside the skill sheet. */
.skill-info { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 12px; }
.skill-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.skill-stat, .skill-audit, .skill-facts { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.skill-stat .eyebrow, .skill-audit .eyebrow, .skill-fact .eyebrow { font-size: 13px; margin: 0; }
.skill-stat strong { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; background: var(--num); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.skill-audit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.skill-audit p { margin: 8px 0 0; }
.skill-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.skill-fact b { display: block; font-size: 15px; font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
.skills-note { margin-top: 18px; }
.sheet.skill-sheet { max-height: 92dvh; overflow-y: auto; }

/* Skills: setting up a skill that needs keys, or asking the Twin team. */
.row.skill.fixable { width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.row.skill.fixable .skill-count { color: var(--accent-text); }
.setup-label { display: block; font-size: 14px; font-weight: 600; color: var(--muted); margin: 12px 0 6px; }
.skill-sheet .field + .text-btn, .skill-sheet .field + .muted { margin-top: 10px; }
.skill-sheet .form-error:empty { display: none; }

/* Reporting an agent reply: a quiet link beside the time, then a sheet of reasons. */
.msg-report { display: inline-flex; align-items: center; gap: 3px; margin-left: 10px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; opacity: 0.75; }
.msg-report:hover, .msg-report:focus-visible { opacity: 1; color: var(--text); }
.report-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.report-reason { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 15px; cursor: pointer; }
.report-reason[aria-pressed="true"] { background: var(--seg-on); border-color: var(--accent); color: var(--accent-text); }
.report-note { resize: vertical; min-height: 64px; margin-bottom: 8px; }

/* Pictures: the account's photo on the round "me" buttons, and the agent's picture in its avatar. */
.me.has-photo { padding: 0; overflow: hidden; }
.me-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar-inner.photo { padding: 0; overflow: hidden; background: var(--surface-2); }
.avatar-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.me.me-xl { width: 72px; height: 72px; font-size: 28px; flex: none; display: grid; place-items: center; border: 0; background: var(--twin); color: #fff; }
.photo-card { display: flex; align-items: center; gap: 18px; padding: 16px 18px; }
.photo-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.photo-actions .photo-btn { width: auto; margin: 0; padding: 0 18px; height: 44px; }
.photo-preview { display: flex; justify-content: center; margin: 14px 0 6px; }
.photo-preview .avatar-md { transform: scale(1.6); margin: 18px 0; }
.sheet-text.center { text-align: center; }
.photo-group { margin-top: 18px; }

/* Move and zoom: the picked picture under a round frame, then a zoom slider. */
.crop-sheet { text-align: center; }
.crop-stage { display: flex; justify-content: center; margin: 12px 0 14px; }
.crop-canvas { border-radius: 18px; touch-action: none; cursor: grab; background: #fff; outline: none; }
.crop-canvas:active { cursor: grabbing; }
.crop-canvas:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.crop-zoom-row { display: flex; align-items: center; gap: 12px; margin: 0 auto 6px; max-width: 320px; }
.crop-zoom { flex: 1; accent-color: var(--accent); height: 28px; }
.crop-dot { flex: none; border-radius: 50%; border: 2px solid var(--muted); }
.crop-dot.small { width: 10px; height: 10px; }
.crop-dot.large { width: 18px; height: 18px; }
.crop-rotate { margin: 4px auto 10px; display: block; }

/* Locked account (trial over, not paid): a lock on every feature, its switch off, and Subscribe. */
.lock-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 20px 20px; gap: 6px; }
.lock-hero-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--twin); box-shadow: 0 8px 20px rgba(42, 63, 176, 0.25); margin-bottom: 6px; }
.lock-hero-title { font-size: 21px; font-weight: 700; margin: 0; }
.lock-hero-text { color: var(--muted); margin: 0; max-width: 34ch; }
.lock-hero-warn { color: var(--attention); font-weight: 600; font-size: 15px; margin: 4px 0 0; max-width: 34ch; }
.lock-hero .btn-primary { margin-top: 14px; }
.lock-hero .text-btn.block { margin-top: 8px; }
.lock-icon { position: relative; color: var(--muted); }
.lock-badge { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--attention); color: #fff; border: 2px solid var(--bg, #0b1030); }
.locked-row .row-title { color: var(--text); }
.locked-word { color: var(--alert) !important; font-weight: 600; }
.locked-row .switch { pointer-events: none; opacity: 0.7; }
.locked-row .switch::after { content: "OFF"; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: var(--muted); }
.row-value.accent { color: var(--accent-text); font-weight: 600; }
.build-error { color: var(--alert); }
.plan-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 2px 0 12px; }
.plan-prices .plan-price { flex-direction: column; align-items: flex-start; gap: 0; }
.plan-box .kv.first-pay { font-weight: 600; }
.plan-box .kv.first-pay strong { color: var(--text); font-size: 17px; }
.plan-box .kv.first-pay + .plan-sub { margin: -8px 0 10px; font-size: 14px; }
/* Agreement boxes: unticked by default, the client ticks them themselves. */
.agree-check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; font-size: 14px; line-height: 1.45; color: inherit; text-align: left; cursor: pointer; }
.agree-box { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.agree-check .inline-link { font-size: inherit; padding: 0; }
.consent-foot .agree-check { margin: 4px 0 12px; }
.signin-sheet .agree-check { color: #0b1030; margin: 14px 0 6px; }
.signin-sheet .agree-check .inline-link { color: #1f6fd0; }

.ob-who { margin: 22px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.ob-who .text-btn.inline { display: inline; padding: 0; font-size: 13px; }