/* Twin Protocol brand fonts (style guide v1.1): Source Sans 3 for text, Creato Display for headings.
   Both are free for commercial use (SIL Open Font License) and served from this site. */
@font-face { font-family: "Source Sans 3"; src: url("/fonts/source-sans-3.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Creato Display"; src: url("/fonts/creato-display-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
.page-title, .greeting, .signin-sheet h1, .sheet-title, .cx-top h1, .cx-hero h1 { font-family: "Creato Display", "Source Sans 3", sans-serif; font-weight: 700; letter-spacing: -0.01em; }

/* 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: #f8fafd;
  --sheet-text: #0b1430;
  --sheet-muted: #5b6275;
  --sheet-line: #d9dde6;
  --navy: #0f1d4a;
  --sky: #0c9dd8;
  --indigo: #2a3fb0;
  --twin: linear-gradient(135deg, #0c9dd8 0%, #2a3fb0 100%);
  /* The phone app (Android) sets --safe-area-inset-*; browsers use env(). */
  --safe-t: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-b: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
}

/* Enterprise is light only (Jim 2026-10-29): the light theme always applies, the dark rules never do,
   and nothing is pure white, so screens are easy on the eyes. */
@media all {
  :root {
    color-scheme: light;
    --bg: #eef2f8;
    --bg-top: #e4edf7;
    --surface: #f8fafd;
    --surface-2: #e7edf6;
    --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(243, 246, 251, 0.94);
    --seg: #e6ecf6;
    --seg-on: #f8fafd;
    --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 "Source Sans 3", -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 all { .only-dark { display: none; } .only-light { display: inline; } }
@media not all { .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: #eef2f8; display: flex; align-items: center; justify-content: center; padding-bottom: var(--safe-b); }
.splash-mark { animation: splash-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both, splash-breathe 2.4s ease-in-out 0.6s infinite; }
.splash-mark .nameplate { font-size: 30px; gap: 14px; color: #0b1030; }
.splash-mark .np-ent { color: #2a3fb0; }


@keyframes splash-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes splash-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
.splash-mark .nameplate-glyph { animation: splash-wave 1.6s ease-in-out 0.5s 2; transform-origin: 20% 60%; }
@keyframes splash-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .splash-mark, .splash-mark .nameplate-glyph { animation: none; } }

/* 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: #f8fafd; 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: absolute; 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: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.page-sub { color: var(--muted); font-size: 15px; line-height: 1.4; margin: 4px 0 20px; }
.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; }
/* Reading text: every sentence on its own line (Jim), never a wrap that looks like a stray line break. */
.sn { display: block; }
.nowrap { white-space: nowrap; }
body { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
.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(6px + var(--safe-t)) 68px 8px 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 all {
  .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: 26px; }
.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 all { .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; }

/* Twin Chat Enterprise (E1): wordmark, sign-in hint, the company app, company console, Admin > Companies.
   Only the existing colour tokens; a company's own colour appears only on its mark (.co-tile). */
.np-words { display: inline-flex; flex-direction: column; line-height: 1; }
.np-ent { font-size: 0.42em; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; margin-top: 0.35em; color: var(--indigo); }
.signin-hint { color: #6b7590; font-size: 13px; text-align: center; margin: 18px 0 0; }

.co-tile { display: inline-grid; place-items: center; flex: none; color: #fff; font-weight: 700; overflow: hidden; }
.co-tile img { width: 100%; height: 100%; object-fit: contain; }
.co-sm { width: 30px; height: 30px; border-radius: 9px; font-size: 14px; }
.co-md { width: 42px; height: 42px; border-radius: 12px; font-size: 19px; }
.co-lg { width: 64px; height: 64px; border-radius: 18px; font-size: 28px; }
.msg.assistant .co-tile { margin-bottom: 20px; }

.co-shell .screen { padding-bottom: calc(32px + var(--safe-b)); }
.co-shell .screen:has(> .chat) { padding-bottom: 0; }
.co-shell .chat .composer { padding-bottom: calc(14px + var(--safe-b)); }
.co-head { padding-right: 14px; border-bottom: 1px solid var(--line); }
.co-head .head-text { flex: 1; min-width: 0; }
.co-status { color: var(--muted); }
.co-status.on::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live); margin-right: 6px; vertical-align: 1px; }
.co-more { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 15px; letter-spacing: 1px; display: grid; place-items: center; padding: 0; }
.co-console-btn { display: none; flex: none; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; }
.co-console-btn .icon { color: var(--accent-text); }
.co-wait { margin: 12px 0 0; }
.co-menu { padding-bottom: calc(14px + var(--safe-b)); }
.co-me { display: flex; align-items: center; gap: 12px; padding: 2px 4px 16px; border-bottom: 1px solid var(--line); }
.co-av { width: 46px; height: 46px; border-radius: 50%; background: var(--twin); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 18px; flex: none; }
.co-me-text { display: flex; flex-direction: column; min-width: 0; }
.co-me-text strong { font-size: 17px; }
.co-me-text > span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-me-text .co-level { color: var(--accent-text); font-weight: 600; margin-top: 3px; }
.co-list { padding: 6px 0 0; }
.co-list .menu-item { padding: 12px 6px; }
.co-item { display: flex; flex-direction: column; min-width: 0; }
.co-item small { color: var(--muted); font-size: 13px; font-weight: 400; }
.co-powered { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--faint); font-size: 12px; margin: 10px 0 0; }
.co-powered img { width: 18px; height: 18px; border-radius: 5px; }
.co-policy { padding: 18px 20px; }
.co-policy p { margin: 0 0 12px; line-height: 1.5; white-space: pre-line; }
.co-policy p:last-child { margin: 0; }

.co-org { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.co-org > div { display: flex; flex-direction: column; min-width: 0; }
.co-org strong { font-size: 18px; }
.co-org > div > span { color: var(--muted); font-size: 14px; }
.page-title + .co-org { margin-top: 20px; }
.co-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 -20px 20px; padding: 0 20px 2px; scrollbar-width: none; }
.co-tabs::-webkit-scrollbar { display: none; }
.co-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; }
.co-tab.on { background: var(--seg-on); color: var(--text); border-color: rgba(143, 184, 212, 0.45); }
.co-count { min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px; background: var(--attention); color: #fff; font-size: 12px; display: inline-grid; place-items: center; }
.co-body > * + * { margin-top: 20px; }
.co-body > .group-label + .card, .co-body > .group-label + .co-reqs, .co-body > .co-chips + .group-label { margin-top: 12px; }
.co-body > .co-chips + .group-label + .card { margin-top: 12px; }
.co-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.co-stats .stat { padding: 14px 14px; }
.co-stats .stat strong { font-size: 28px; }
.co-stats .stat > span:not(.muted) { font-size: 14px; font-weight: 600; }
.co-bar { display: flex; align-items: center; gap: 10px; }
.co-bar .field { flex: 1; min-width: 0; }
.co-bar .group-label { flex: 1; margin: 0; }
.co-bar .pill-btn { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.co-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.co-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; }
.co-chip span { color: var(--faint); font-weight: 500; }
.co-chip.on { background: var(--seg-on); color: var(--text); border-color: rgba(143, 184, 212, 0.45); }
.co-person { gap: 12px; }
.lv { flex: none; display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 6px; border-radius: 7px; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.lv-2 { color: var(--accent-text); border-color: rgba(92, 200, 245, 0.35); }
.lv-3 { color: #fff; background: var(--indigo); border-color: transparent; }
.lv-4 { color: #fff; background: var(--twin); border-color: transparent; }
.co-levels { display: grid; grid-template-columns: 1fr; gap: 10px; }
.co-level-card { padding: 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.co-level-card strong { font-size: 16px; }
.co-sheet { max-height: 92vh; overflow-y: auto; }
.co-sheet > .field, .co-sheet > input.field { margin-bottom: 10px; }
.co-label { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.co-label > span { color: var(--muted); font-size: 14px; font-weight: 600; }
.co-checks { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.co-check { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.co-check span:not(.lv) { flex: 1; }
.co-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.co-danger { color: var(--alert); display: block; margin: 14px auto 0; }
.co-reqs { display: flex; flex-direction: column; gap: 10px; }
.co-req, .co-domain { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.co-req p { margin: 6px 0 8px; white-space: pre-line; }
.co-req .btn-primary, .co-req .btn-secondary, .co-domain .btn-secondary { margin-top: 6px; }
.co-req-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.co-gap { margin-top: 28px !important; }
.co-form { padding: 16px; }
.co-brand-top { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; }
.co-brand-top > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.co-brand-top .btn-secondary { width: auto; padding: 0 16px; height: 40px; margin: 0; }
.co-color { width: 64px; height: 40px; padding: 2px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.co-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 15px; }
.co-record { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 10px 0 4px; font-size: 13px; }
.co-record span { color: var(--muted); }
.co-record code { font-size: 13px; overflow-wrap: anywhere; color: var(--text); }
@media (min-width: 700px) {
  .co-console-btn { display: inline-flex; }
  .co-shell .chat .composer { padding-bottom: 18px; }
  .co-levels { grid-template-columns: repeat(3, 1fr); }
  .co-tabs { margin: 0 0 22px; padding: 0; flex-wrap: wrap; }
}
.co-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-person .row-text { min-width: 0; }
.co-person .status { font-size: 12px; padding: 4px 8px; }
.page > .btn-primary + .group { margin-top: 20px; }

/* Company console on wide screens (consolewide.ts), as in the approved mockup: dark side menu,
   light work area (dark in dark mode), white cards, the Twin gradient for bars and the main button. */
.screen:has(> .cx) { padding: 0; }
.cx { display: grid; grid-template-columns: 264px 1fr; min-height: 100%; --cx-side: #070a18; --cx-side-text: #c9d2ec; --cx-side-muted: #7f8bae; }
@media not all { .cx { --cx-side: #04060f; } }
.cx-side { background: var(--cx-side); color: var(--cx-side-text); padding: calc(18px + var(--safe-t)) 14px 16px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.cx-org { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); margin-bottom: 10px; }
.cx-org > div { display: flex; flex-direction: column; min-width: 0; }
.cx-org b { color: #fff; font-size: 14px; }
.cx-org > div > span { font-size: 12px; color: var(--cx-side-muted); }
.cx-nav { display: flex; flex-direction: column; gap: 2px; }
.cx-sec { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cx-side-muted); padding: 14px 10px 4px; }
.cx-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--cx-side-text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.cx-item .icon { opacity: 0.85; flex: none; }
.cx-item, .co-sw, .co-tab { transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.cx-item > span:first-of-type { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-item:hover:not(.soon) { background: rgba(255, 255, 255, 0.05); }
.cx-item.on { background: rgba(92, 200, 245, 0.14); color: #fff; }
.cx-item.soon { opacity: 0.45; cursor: default; }
.cx-soon { margin-left: auto; font-size: 10.5px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 1px 7px; }
.cx-n { margin-left: auto; background: var(--alert); color: #fff; font-size: 11px; border-radius: 999px; padding: 1px 7px; }
.cx-back { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: none; color: var(--cx-side-text); font: inherit; font-size: 13px; cursor: pointer; }
.cx-back:hover { background: rgba(255, 255, 255, 0.05); }
.cx-mark { position: fixed; right: 22px; bottom: 16px; opacity: 0.55; pointer-events: none; z-index: 1; }
.cx-mark .nameplate { font-size: 14px; gap: 7px; }
.cx-main { padding-bottom: 72px; }
.cx-main { padding: calc(22px + var(--safe-t)) 30px 40px; min-width: 0; background: var(--bg); }
.cx-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.cx-top h1 { font-size: 26px; letter-spacing: -0.02em; margin: 0; }
.cx-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.cx-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.cx-btn { border: 0; border-radius: 10px; padding: 9px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cx-btn.p { background: var(--twin); color: #fff; }
.cx-btn.s { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.cx-btn.danger { color: var(--alert); }
.cx-btn.sm { padding: 6px 11px; font-size: 12.5px; margin-left: auto; }
.cx-body > * + * { margin-top: 16px; }
.cx-grid { display: grid; gap: 16px; }
.cx-grid.k5 { grid-template-columns: repeat(5, 1fr); }
.cx-grid.k4 { grid-template-columns: repeat(4, 1fr); }
.cx-grid.c2 { grid-template-columns: 1.6fr 1fr; }
.cx-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--card-shadow); min-width: 0; }
.cx-card h3 { margin: 0 0 12px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.cx-link { margin-left: auto; background: none; border: 0; padding: 0; color: var(--accent-text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.cx-kpi .cx-l { color: var(--muted); font-size: 12.5px; }
.cx-kpi .cx-v { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 2px; }
.cx-kpi .cx-v.sm { font-size: 17px; margin: 8px 0 8px; }
.cx-kpi .cx-d { font-size: 12px; color: var(--muted); margin-top: 6px; }
.cx-d .ok { color: var(--live); }
.cx-d .warn { color: var(--attention); }
.cx-bar { height: 6px; background: var(--surface-2); border-radius: 9px; overflow: hidden; margin-top: 8px; }
.cx-bar i { display: block; height: 100%; background: var(--twin); border-radius: 9px; }
.cx-chart { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding-top: 4px; }
.cx-chart > div { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.cx-col { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.cx-col b { width: 100%; border-radius: 7px 7px 3px 3px; background: var(--twin); opacity: 0.9; }
.cx-cv { font-weight: 600; color: var(--text); }
.cx-lvrows { display: grid; gap: 12px; }
.cx-lvrow { display: grid; grid-template-columns: minmax(150px, auto) 1fr 32px; align-items: center; gap: 12px; font-size: 13px; }
.cx-lvrow .cx-bar { margin: 0; }
.cx-lvrow b { text-align: right; }
.cx-lv { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.cx-lv.L1 { background: rgba(92, 200, 245, 0.16); color: #0c7fb0; }
.cx-lv.L2 { background: rgba(42, 63, 176, 0.13); color: #2a3fb0; }
.cx-lv.L3 { background: rgba(124, 92, 230, 0.15); color: #6b45d8; }
.cx-lv.L4 { background: rgba(15, 118, 110, 0.14); color: #0f766e; }
@media not all { .cx-lv.L1 { color: #7fd8ff; } .cx-lv.L2 { color: #9fb0ff; } .cx-lv.L3 { color: #c3aefc; } .cx-lv.L4 { color: #5fe0cf; } }
.cx-note p { margin: 0; }
.cx-note { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }
.cx-note i { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); flex: none; display: grid; place-items: center; font-style: normal; font-weight: 700; color: var(--accent-text); font-size: 11px; }
.cx-pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.cx-pill.ok { background: var(--live-bg); color: var(--live); }
.cx-pill.warn { background: var(--attention-bg); color: var(--attention); }
.cx-pill.off { background: var(--surface-2); color: var(--muted); }
.cx-pill.bad { background: rgba(223, 14, 68, 0.1); color: var(--alert); margin-left: 8px; }
.cx-list { display: grid; }
.cx-it { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.cx-it:first-child { border-top: 0; }
.cx-it-text { min-width: 0; flex: 1; }
.cx-it-text .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-t { color: var(--faint); font-size: 12px; white-space: nowrap; }
.cx-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.cx-foot { color: var(--muted); font-size: 12.5px; text-align: center; margin: 18px 0 0; }
.cx-toolbar { display: flex; align-items: center; gap: 12px; }
.cx-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.cx-chip { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.cx-chip.on { color: var(--accent-text); border-color: var(--accent); }
.cx-search { margin-left: auto; width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; color: var(--text); font: inherit; font-size: 13.5px; outline: none; }
.cx-search:focus { border-color: var(--accent); }
.cx-bulk { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.cx-bulk[hidden] { display: none; }
.cx-select { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; font: inherit; font-size: 12.5px; }
.cx-table { padding: 4px 6px; overflow-x: auto; }
.cx-table h3 { padding: 12px 12px 0; }
.cx-table table { width: 100%; border-collapse: collapse; }
.cx-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cx-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: middle; }
.cx-table tr:last-child td { border-bottom: 0; }
.cx-ck { width: 34px; }
.cx-ck input { width: 16px; height: 16px; accent-color: var(--accent); }
.cx-who { display: flex; align-items: center; gap: 10px; }
.cx-who small { display: block; color: var(--muted); font-size: 12px; }
.cx-more { width: 44px; text-align: right; }
.cx-dots { background: none; border: 0; color: var(--faint); letter-spacing: 2px; font-size: 14px; padding: 4px 8px; border-radius: 8px; cursor: pointer; }
.cx-dots:hover { background: var(--surface-2); color: var(--text); }
.cx-empty { text-align: center; padding: 24px; }
.cx-lvc .cx-lvh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cx-lvc .cx-lvh b { font-size: 17px; }
.cx-lvc ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 12.5px; display: grid; gap: 4px; }
.cx-cost { margin-top: 12px; font-size: 12px; color: var(--faint); }
.cx-narrow { max-width: 760px; }
.cx-asst-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cx-asst-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
.cx-asst-grid .kn textarea { min-height: 120px; resize: vertical; font-size: 14.5px; line-height: 1.5; }
.kn-count { margin-left: auto; }
@media (max-width: 1099px) { .cx-asst-grid { grid-template-columns: 1fr; } .cx-ul-2 { columns: 1; } }
.cx-narrow > * + * { margin-top: 16px; }
.cx-reqs { max-width: 760px; }
.cx-asst { display: flex; align-items: center; gap: 16px; }
.cx-asst > div { flex: 1; }
.cx-asst b { font-size: 17px; }
.cx-ul { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 6px; font-size: 13.5px; }

.cx-fail { padding: 60px; max-width: 420px; }
@media (max-width: 1180px) { .cx-grid.k5 { grid-template-columns: repeat(3, 1fr); } .cx-grid.c2 { grid-template-columns: 1fr; } }
.cx-team-logo { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.cx-click { cursor: pointer; }
.cx-click:hover td { background: var(--surface-2); }
.cx-embed > .page { max-width: 860px; margin: 0; padding: 0; min-height: 0; }
.cx-embed > .page::before, .cx-embed > .page::after { display: none; }
.cx-top[hidden] { display: none; }
/* An Admin page shown as a section: the console's own title replaces the page's title and back arrow. */
.cx-embed.root > .page > .back, .cx-embed.root > .page > .page-title, .cx-embed.root > .page > .page-sub { display: none; }
.cx-embed.root > .page > .page-title + * { margin-top: 0; }

/* Console polish (Jim 2026-10-29): smaller, tighter type like the mockup, and colour from the Twin
   palette only (sky, indigo, the glow's violet, live green, attention orange). */
.cx { font-size: 14px; line-height: 1.45; }
.cx-main { background: radial-gradient(55% 35% at 12% 0%, rgba(12, 157, 216, 0.10), transparent 70%), radial-gradient(45% 35% at 100% 8%, rgba(124, 92, 230, 0.08), transparent 70%), var(--bg); }
@media not all { .cx-main { background: var(--glow), linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 45%); background-attachment: fixed; } }
.cx-side { background: radial-gradient(120% 35% at 0% 0%, rgba(12, 157, 216, 0.22), transparent 60%), linear-gradient(180deg, #0f1d4a 0%, #070a18 55%); }
@media not all { .cx-side { background: radial-gradient(120% 35% at 0% 0%, rgba(12, 157, 216, 0.18), transparent 60%), linear-gradient(180deg, #0c1638 0%, #04060f 55%); } }
.cx-org b { font-size: 13.5px; }
.cx-item { font-size: 13px; padding: 7px 10px; }
.cx-item.on { background: linear-gradient(90deg, rgba(12, 157, 216, 0.32), rgba(42, 63, 176, 0.12)); box-shadow: inset 3px 0 0 #5cc8f5; color: #fff; }
.cx-sec { font-size: 10.5px; }
.cx-back { font-size: 12.5px; }
.cx-top h1 { font-size: 22px; }
.cx-sub { font-size: 12.5px; }
.cx-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 20px 24px; color: #fff; background: linear-gradient(120deg, #17b3ec 0%, #1f7fd0 42%, #2a3fb0 82%, #4b3fb8 100%); box-shadow: 0 14px 34px rgba(42, 63, 176, 0.28); }
.cx-hero::before { content: ""; position: absolute; left: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 70%); pointer-events: none; }
.cx-hero::after { content: ""; position: absolute; right: -40px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(142, 116, 200, 0.45), rgba(142, 116, 200, 0) 70%); pointer-events: none; }
.cx-hero > * { position: relative; z-index: 1; }
.cx-hero h1 { font-size: 24px; color: #fff; }
.cx-hero .cx-sub { color: rgba(255, 255, 255, 0.86); font-size: 13px; }
.cx-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); margin-bottom: 2px; }
.cx-btn { font-size: 12.5px; padding: 8px 13px; }
.cx-btn.w { background: #f8fafd; color: #1f3fb0; box-shadow: 0 6px 16px rgba(7, 10, 24, 0.18); }
.cx-card { border-radius: 14px; padding: 14px 16px; }
.cx-card h3 { font-size: 13.5px; font-weight: 650; }
.cx-link { font-size: 12.5px; }
.cx-kpi { position: relative; overflow: hidden; --tone: #0c9dd8; --tone-bg: rgba(12, 157, 216, 0.12); }
.cx-kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--tone), transparent 85%); }
.cx-kpi.t-indigo { --tone: #2a3fb0; --tone-bg: rgba(42, 63, 176, 0.12); }
.cx-kpi.t-violet { --tone: #7c5ce6; --tone-bg: rgba(124, 92, 230, 0.13); }
.cx-kpi.t-green { --tone: var(--live); --tone-bg: var(--live-bg); }
.cx-kpi.t-amber { --tone: var(--attention); --tone-bg: var(--attention-bg); }
@media not all { .cx-kpi.t-indigo { --tone: #8fa0ff; } .cx-kpi.t-violet { --tone: #a990ff; } .cx-kpi.t-sky { --tone: #5cc8f5; } }
.cx-kh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cx-ki { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--tone-bg); color: var(--tone); flex: none; }
.cx-kpi .cx-l { font-size: 12px; font-weight: 500; }
.cx-kpi .cx-v { font-size: 24px; margin: 2px 0 0; background: var(--num); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.cx-kpi .cx-v.sm { font-size: 15px; margin: 6px 0 6px; background: none; color: var(--text); }
.cx-kpi .cx-d { font-size: 11.5px; margin-top: 4px; }
.cx-chart { height: 170px; gap: 12px; }
.cx-chart > div { font-size: 11px; }
.cx-cv { font-size: 11.5px; }
.cx-col b { box-shadow: 0 8px 18px rgba(42, 63, 176, 0.25); background: linear-gradient(180deg, #17b3ec 0%, #2a3fb0 100%); }
.cx-lvrow { font-size: 12.5px; grid-template-columns: auto 1fr 28px; }
.cx-lv, .cx-pill { font-size: 11.5px; padding: 2px 8px; }
.cx-it { font-size: 12.5px; padding: 9px 0; }
.cx-t { font-size: 11.5px; }
.cx-av { width: 28px; height: 28px; font-size: 11px; }
.cx-note { font-size: 12px; }
.cx-foot { font-size: 12px; }
.cx-chip { font-size: 12px; padding: 5px 11px; }
.cx-search { font-size: 13px; padding: 8px 11px; }
.cx-bulk { font-size: 12.5px; }
.cx-table th { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface-2); padding: 9px 12px; }
.cx-table thead tr th:first-child { border-top-left-radius: 10px; }
.cx-table thead tr th:last-child { border-top-right-radius: 10px; }
.cx-table td { font-size: 13px; padding: 9px 12px; }
.cx-who small { font-size: 11.5px; }
.cx-lvc .cx-lvh b { font-size: 15px; }
.cx-lvc ul { font-size: 12px; }
.cx-asst b { font-size: 15px; }
.cx-ul { font-size: 13px; }
/* Pages and forms inside the console use the same compact type. */
.cx .page-title { font-size: 22px; }
.cx .page-sub { font-size: 13px; margin-bottom: 18px; }
.cx .group-label { font-size: 12.5px; margin-bottom: 8px; }
.cx .row { padding-top: 10px; padding-bottom: 10px; }
.cx .row-title { font-size: 14px; }
.cx .row-detail { font-size: 12.5px; }
.cx .row-icon { width: 34px; height: 34px; }
.cx .status { font-size: 12px; padding: 3px 9px; }
.cx .field { font-size: 14px; padding: 10px 12px; border-radius: 10px; }
.cx .co-label > span { font-size: 12.5px; }
.cx .btn-primary, .cx .btn-secondary { font-size: 14px; padding: 10px 14px; border-radius: 10px; }
.cx .co-req p { font-size: 13.5px; }
.cx .co-req strong, .cx .co-domain strong { font-size: 14px; }
.cx .card.note p { font-size: 14px; }
.cx .foot-note { font-size: 12px; }
.cx .text-btn { font-size: 13.5px; }
.cx .row { min-height: 54px; }
/* Everything inside the console matches the compact Backups and health look (Jim 2026-10-29). */
.cx .segmented { padding: 3px; gap: 3px; border-radius: 10px; margin: 0 0 14px; max-width: 460px; }
.cx .seg { font-size: 13px; padding: 7px 0; border-radius: 8px; }
.cx .row-value { font-size: 13px; }
.cx .card.note { padding: 14px 16px; }
.cx .card.note p { font-size: 13.5px; margin: 0; }
.cx .card.note p + p { margin-top: 4px; }
.cx .pill-btn { font-size: 13px; padding: 7px 14px; }
.cx .bubble { font-size: 14px; padding: 9px 13px; }
.cx .msg .time { font-size: 11px; }
.cx .day { font-size: 11.5px; }
.cx .composer textarea { font-size: 14px; }
.cx .switch { width: 44px; height: 26px; }
.cx .switch::after { width: 20px; height: 20px; }
.cx .switch.on::after { transform: translateX(18px); }
.cx .co-req, .cx .co-domain { padding: 12px 14px; }
.cx .co-req-head .status { font-size: 11.5px; }
.cx .co-form { padding: 14px 16px; }
.cx .co-record { font-size: 12.5px; }
.cx .back { width: 36px; height: 36px; }
/* Sheets opened from the console: same compact type. */
body:has(.cx) .sheet { padding: 18px 22px 18px; }
body:has(.cx) .sheet-title { font-size: 17px; }
body:has(.cx) .sheet-text { font-size: 13.5px; margin-bottom: 12px; }
body:has(.cx) .sheet .field { font-size: 14px; padding: 10px 12px; border-radius: 10px; }
body:has(.cx) .sheet .btn-primary, body:has(.cx) .sheet .btn-secondary { font-size: 14px; padding: 10px 14px; border-radius: 10px; }
body:has(.cx) .sheet .co-label > span { font-size: 12.5px; }
body:has(.cx) .sheet .co-check { font-size: 13.5px; padding: 8px 10px; }
body:has(.cx) .sheet .row-title { font-size: 14px; }
body:has(.cx) .sheet .row-detail { font-size: 12.5px; }
body:has(.cx) .sheet .row { min-height: 52px; padding-top: 9px; padding-bottom: 9px; }
body:has(.cx) .sheet .text-btn { font-size: 13.5px; }
body:has(.cx) .sheet .muted.small, body:has(.cx) .sheet .form-error { font-size: 12.5px; }
body:has(.cx) .report-reason { font-size: 13px; padding: 8px 12px; }

/* Enterprise dialogs (dialog.ts): title bar with close, labelled fields, actions in a footer. */
.dlg-back { align-items: flex-end; }
.dlg { --dlg-bg: #0e1330; width: 100%; max-width: 520px; margin: 0 auto; background: var(--dlg-bg); color: var(--text); border: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: 0 24px 60px rgba(0, 2, 12, 0.5); display: flex; flex-direction: column; max-height: 92vh; font-size: 14px; animation: up 0.2s ease-out; padding-bottom: var(--safe-b); }
@media all { .dlg { --dlg-bg: #f8fafd; box-shadow: 0 24px 60px rgba(11, 16, 48, 0.18); } }
.dlg-wide { max-width: 640px; }
.dlg-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--line); }
.dlg-head h2 { flex: 1; margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-x { width: 32px; height: 32px; border-radius: 8px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; flex: none; }
.dlg-x .icon { transform: rotate(45deg); }
.dlg-x:hover { background: var(--surface-2); color: var(--text); }
.dlg-body { padding: 16px 20px 6px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.dlg-text { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.dlg-field { display: flex; flex-direction: column; gap: 6px; }
.dlg-label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.dlg-hint { font-size: 12px; color: var(--muted); line-height: 1.4; }
.dlg-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; outline: none; transition: border-color 0.12s, box-shadow 0.12s; }
select.dlg-input { padding-right: 30px; }
textarea.dlg-input { resize: vertical; min-height: 84px; line-height: 1.45; }
.dlg-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(63, 182, 234, 0.18); }
.dlg-input:disabled { opacity: 0.6; }
.dlg-input::placeholder { color: var(--faint); }
.dlg-error { margin: 0; color: var(--alert); font-size: 13px; }
.dlg-error:empty { display: none; }
.dlg-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--line); margin-top: 10px; }
.dlg-space { flex: 1; }
.dlg-btn { height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.dlg-btn:hover { border-color: rgba(143, 184, 212, 0.45); }
.dlg-btn.primary { background: var(--twin); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(42, 63, 176, 0.25); }
.dlg-btn.danger { background: var(--alert); color: #fff; border-color: transparent; }
.dlg-btn.ghost-danger { background: none; border-color: transparent; color: var(--alert); padding: 0 8px; }
.dlg-btn.ghost-danger:hover { background: rgba(223, 14, 68, 0.08); }
.dlg-btn:disabled { opacity: 0.6; cursor: default; }
.dlg-linkbtn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: -6px; background: none; border: 0; padding: 0; color: var(--accent-text); font: inherit; font-size: 13px; cursor: pointer; }
.dlg-swatches { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dlg-swatch { width: 26px; height: 26px; border-radius: 7px; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.dlg-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--dlg-bg), 0 0 0 4px var(--accent); }
.dlg-swatch-custom { width: 34px; height: 28px; padding: 0 2px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); cursor: pointer; }
.dlg-hex { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--muted); }
.dlg-checks { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.dlg-check { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13.5px; cursor: pointer; }
.dlg-check + .dlg-check { border-top: 1px solid var(--line); }
.dlg-check:hover { background: var(--surface-2); }
.dlg-check span:not(.lv) { flex: 1; }
.dlg-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.dlg-check .lv { min-width: 26px; height: 20px; font-size: 11px; }
.dlg-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.dlg-option { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.dlg-option + .dlg-option { border-top: 1px solid var(--line); }
.dlg-option:hover { background: var(--surface-2); }
.dlg-option .icon { color: var(--accent-text); flex: none; }
.dlg-option-text { flex: 1; display: flex; flex-direction: column; }
.dlg-option-text b { font-size: 13.5px; }
.dlg-option-text small { font-size: 12px; color: var(--muted); }
.dlg-option .status { font-size: 11.5px; padding: 2px 8px; }
.dlg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dlg-chip { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.dlg-chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-text); background: var(--seg-on); }
.dlg .role-pick, .dlg .segmented { margin: 0; }
@media (min-width: 700px) {
  .dlg-back { align-items: center; }
  .dlg { border-radius: 14px; max-height: 86vh; padding-bottom: 0; animation: fade 0.16s ease-out; }
}
@media (max-width: 699px) { .dlg-foot .dlg-btn.primary, .dlg-foot .dlg-btn.danger { flex: 0 0 auto; } }
.dlg .segmented { padding: 3px; gap: 3px; border-radius: 9px; margin: 0; }
.dlg .seg { font-size: 13px; padding: 7px 0; border-radius: 7px; }
.dlg .role-text { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.pill-btn { display: inline-flex; align-items: center; gap: 6px; }
.cx-chip { display: inline-flex; align-items: center; gap: 6px; }
.cx-chip-n { font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.cx-chip.on .cx-chip-n { background: var(--seg-on); color: var(--accent-text); }
/* Wording and spacing pass (Jim 2026-10-29). */
.status.bad { color: var(--alert); background: rgba(223, 14, 68, 0.12); border-color: rgba(223, 14, 68, 0.35); }
.cx .page .btn-primary, .cx .page .btn-secondary, .cx .admin-actions .btn-primary { width: auto; display: inline-flex; align-items: center; padding: 9px 16px; font-size: 13.5px; border-radius: 8px; }
.cx .admin-actions { margin-top: 16px; }
.cx .foot-note, .cx-foot { text-align: left; }
.cx .card.note { display: flex; flex-direction: column; gap: 2px; }
.cx .card.note p:first-child { font-weight: 600; font-size: 14px; }
.cx .card.note p.muted { font-size: 12.5px; }
.co-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.co-actions .dlg-error { flex: 1; }
.co-brand-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.co-brand-btns .dlg-hint { flex-basis: 100%; }
.co-form { display: flex; flex-direction: column; gap: 14px; }
.co-form .co-brand-top { margin: 0; }
.co-locked { pointer-events: none; opacity: 0.6; }
.co-domain .co-record { margin-top: 10px; }
.cx .co-req, .cx .co-domain { gap: 2px; }
.cx .co-req-head { margin-bottom: 6px; }
.co-pop { background: rgba(0, 0, 0, 0.25); align-items: flex-start; justify-content: flex-end; padding: 62px max(16px, calc((100vw - 880px) / 2 + 16px)) 0 16px; }
.co-pop .sheet.co-menu { max-width: 300px; margin: 0; border-radius: 12px; padding: 10px; border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(0, 2, 12, 0.45); animation: fade 0.14s ease-out; }
.co-pop .sheet-grab { display: none; }
.co-pop .co-me { padding: 6px 8px 12px; }
.co-pop .co-av { width: 36px; height: 36px; font-size: 15px; }
.co-pop .co-me-text strong { font-size: 14px; }
.co-pop .co-me-text > span { font-size: 12px; }
.co-pop .co-list .menu-item { padding: 8px 8px; gap: 12px; font-size: 13.5px; border-radius: 8px; }
.co-pop .co-list .menu-item .icon { width: 18px; height: 18px; }
.co-pop .co-item small { font-size: 12px; }
.co-pop .menu-rule { margin: 6px 8px; }
.co-pop .co-powered { margin-top: 6px; font-size: 11.5px; }
@media all { .co-pop .sheet.co-menu { box-shadow: 0 18px 44px rgba(11, 16, 48, 0.16); } }
.co-form .co-actions { margin-top: 0; }
.cx .admin-actions .btn-primary { width: fit-content; }
.cx .card.note { padding: 11px 16px; }
.cx .admin-actions { align-items: flex-start; }
.cx .card.note { gap: 0; }
.cx .card.note p { line-height: 1.35; }
.cx .card.note p + p { margin-top: 1px; font-size: 12.5px; }
/* Tokens and points */
.cx-grid.k3 { grid-template-columns: repeat(3, 1fr); }
.pt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pt-gap { margin-top: 28px !important; }
.pt-title { margin: 0; font-size: 16px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.pt-sub { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.pt-num { text-align: right; }
.pt-rank { width: 32px; }
.pt-amt { flex: none; font-weight: 700; font-size: 13px; color: var(--live); background: var(--live-bg); border-radius: 999px; padding: 2px 9px; }
.pt-draft { opacity: 0.85; }
.pt-wallet { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.pt-wallet b { font-size: 15px; }
.pt-uses { display: flex; flex-direction: column; }
.pt-use { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.pt-use:first-child { border-top: 0; padding-top: 0; }
.pt-use > div { display: flex; flex-direction: column; }
.pt-use b { font-size: 13.5px; }
.pt-use .switch { width: 40px; height: 24px; opacity: 0.5; }
.pt-use .switch::after { width: 18px; height: 18px; }
.pt-total { padding: 16px 18px; display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.pt-total strong { font-size: 28px; font-weight: 800; background: var(--num); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 899px) { .cx-grid.k3 { grid-template-columns: 1fr; } .cx-grid.k4 { grid-template-columns: 1fr 1fr; gap: 10px; } .cv-head { padding: 12px 14px; } .pt-head { flex-direction: column; align-items: flex-start; } .pt-head .dlg-btn { align-self: stretch; } }
.co-body .cx-grid { display: grid; gap: 10px; }
.co-body .cx-grid.c2 { grid-template-columns: 1fr; }
.co-body .cx-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }

/* Support tickets (Jim 2026-10-29): numbered tickets with a type, a status and a thread. Same
   compact console type; colours from the Twin palette and the level tones. */
.tk-chips .cx-chip { display: inline-flex; align-items: center; gap: 7px; }
.tk-n { font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.cx-chip.on .tk-n { background: var(--accent); color: #fff; }
.tk-empty { padding: 26px 22px; }
.tk-empty p { margin: 0; font-size: 13.5px; }
.tk-empty p + p { margin-top: 4px; max-width: 560px; }
.tk-table td.tk-num { color: var(--muted); font-variant-numeric: tabular-nums; width: 44px; }
.tk-subj { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tk-subj b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-from { display: flex; flex-direction: column; }
.tk-from small { color: var(--muted); font-size: 12px; }
.tk-when { white-space: nowrap; font-size: 12.5px; }
.tk-kind { flex: none; display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 2px 7px; }
.tk-kind.k-help { background: rgba(92, 200, 245, 0.16); color: #0c7fb0; }
.tk-kind.k-agent { background: rgba(42, 63, 176, 0.13); color: #2a3fb0; }
.tk-kind.k-vault { background: rgba(124, 92, 230, 0.15); color: #6b45d8; }
.tk-kind.k-assistant { background: rgba(15, 118, 110, 0.14); color: #0f766e; }
.tk-kind.k-delete { background: rgba(223, 14, 68, 0.1); color: var(--alert); }
@media not all { .tk-kind.k-help { color: #7fd8ff; } .tk-kind.k-agent { color: #9fb0ff; } .tk-kind.k-vault { color: #c3aefc; } .tk-kind.k-assistant { color: #5fe0cf; } }
.tk-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tk-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tk-st.s-open { color: var(--attention); }
.tk-st.s-waiting { color: var(--accent-text); }
.tk-st.s-solved { color: var(--live); }
.tk-esc { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--accent-text); border: 1px solid rgba(143, 184, 212, 0.45); border-radius: 6px; padding: 1px 6px; }
.tk-rows { padding: 0; overflow: hidden; }
.tk-row { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 12px 14px; font: inherit; color: var(--text); cursor: pointer; }
.tk-row:first-child { border-top: 0; }
.tk-row:hover { background: var(--surface-2); }
.tk-row-top { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.tk-row-top b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-row .tk-num, .tk-title .tk-num { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.tk-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; }

/* One ticket */
.tk-head { margin-bottom: 14px; }
.tk-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px; font-size: 13px; }
.tk-title { display: flex; align-items: flex-start; gap: 12px; }
.tk-title h2 { margin: 0; font-size: 20px; letter-spacing: -0.01em; line-height: 1.3; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tk-title .tk-num { margin-right: 8px; }
.tk-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.tk-actions .dlg-input { height: 36px; width: 200px; padding: 0 30px 0 10px; font-size: 13px; }
.tk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; font-size: 12.5px; }
.tk-layout { display: grid; gap: 16px; }
.tk-layout.wide { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.tk-main { display: grid; gap: 14px; min-width: 0; }
.tk-thread { display: grid; gap: 12px; }
.tk-msg { display: flex; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.tk-msg.note { background: var(--attention-bg); border-color: rgba(214, 140, 18, 0.28); }
.tk-msg.sys { background: var(--surface-2); }
.tk-msg.twin { background: rgba(92, 200, 245, 0.08); border-color: rgba(92, 200, 245, 0.35); }
.tk-msg.twin .tk-note-tag { color: var(--accent-text); }
.tk-msg-col { min-width: 0; flex: 1; }
.tk-msg-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tk-time { margin-left: auto; color: var(--faint); font-size: 12px; white-space: nowrap; }
.tk-note-tag { font-size: 11px; font-weight: 600; color: var(--attention); }
.tk-body { margin-top: 4px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.tk-av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--twin); overflow: hidden; }
.tk-av.it { background: linear-gradient(135deg, #0f766e, #0c9dd8); }
.tk-av.twin { background: #070a18; }
.tk-av.twin img { width: 100%; height: 100%; }
.tk-av.sm { width: 30px; height: 30px; }
.tk-compose { padding: 12px 14px; display: grid; gap: 10px; }
.tk-compose.note { border-color: rgba(214, 140, 18, 0.35); }
.tk-compose textarea { width: 100%; resize: vertical; min-height: 84px; }
.tk-compose-foot { display: flex; gap: 10px; align-items: center; }
.tk-compose-foot .dlg-input { width: 240px; height: 36px; padding: 0 30px 0 10px; font-size: 13px; }
.tk-modes { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: -2px -14px 0; padding: 0 10px; }
.tk-mode { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 8px 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; margin-bottom: -1px; }
.tk-mode.on { color: var(--text); border-bottom-color: var(--accent); }
.tk-compose.note .tk-mode.on { border-bottom-color: var(--attention); }
.tk-details h3 { margin-bottom: 10px; }
.tk-details dl { display: grid; grid-template-columns: 88px 1fr; gap: 9px 10px; margin: 0; font-size: 13px; }
.tk-details dt { color: var(--muted); }
.tk-details dd { margin: 0; overflow-wrap: break-word; min-width: 0; }
.tk-details small { font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .tk-title { flex-direction: column; }
  .tk-actions { flex-wrap: wrap; }
}
/* Employee: My tickets */
.tk-new { margin: 0 0 14px; }
.page .row .tk-st { margin-left: 10px; }
.tk-meta.mine { width: 100%; margin: -10px 0 16px; }
.card.tk-me { padding: 12px; }
.card.tk-me .tk-msg { border: 0; padding: 8px 4px; background: none; }
.card.tk-me .tk-msg + .tk-msg { border-top: 1px solid var(--line); border-radius: 0; padding-top: 12px; }
.tk-compose.mine { width: 100%; box-sizing: border-box; margin-top: 14px; }
.card.tk-me, .tk-new { box-sizing: border-box; }
.card.tk-me { width: 100%; }

/* Level 2 and up: the switch between the company assistant, My agent, Vault and Skills. */
.co-switch { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line); flex: none; }
.co-sw-list { display: flex; gap: 4px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; overflow-x: auto; scrollbar-width: none; }
.co-sw-list::-webkit-scrollbar { display: none; }
.co-sw { flex: none; border: 0; background: none; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.co-sw.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(11, 16, 48, 0.12); }
.co-switch .co-more { margin-left: auto; }
.co-frame { height: 100%; display: flex; flex-direction: column; }
.co-inner { flex: 1; min-height: 0; overflow-y: auto; position: relative; }
.co-inner > .chat { height: 100%; }
.co-shell .screen:has(> .co-frame) { padding-bottom: 0; }

/* Company console > Agents */
.ag-note { display: flex; gap: 12px; align-items: flex-start; }
.ag-note p { margin: 2px 0 0; font-size: 13px; }
.ag-note-body .dlg-btn { margin-top: 10px; }
.ag-ai { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.ag-detail { font-size: 12.5px; max-width: 420px; }
.ag-act { text-align: right; white-space: nowrap; }
.ag-acts { display: inline-flex; gap: 8px; }
.dlg-btn.sm { height: 30px; padding: 0 11px; font-size: 12.5px; }
.dlg-btn:disabled { opacity: 0.5; cursor: default; }
.tk-st.s-bad { color: var(--alert); }
.ag-row { cursor: default; }
.ag-row:hover { background: none; }
.ag-row-act { margin-top: 10px; }
.ag-row .tk-row-top { justify-content: space-between; }
.ag-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .ag-two { grid-template-columns: 1fr; } }
.ag-models .dlg-option { align-items: flex-start; }
.ag-radio { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--line); }
.dlg-option.on .ag-radio { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); background: var(--accent); }
.co-inner > .page { padding-top: 20px; }
.co-inner > .page::before, .co-inner > .page::after { display: none; }
/* The employee app frame: header and switch stay put; each view lives in its own kept pane. */
.co-framed { padding-top: 0; }
.co-top { flex: none; width: 100%; }
.co-top > .co-head { max-width: 912px; margin: 0 auto; }
.co-stage { overflow: hidden; }
.co-pane { height: 100%; overflow-y: auto; position: relative; }
.co-pane[hidden] { display: none; }
.co-pane > .chat { height: 100%; }
.co-pane > .page { padding-top: 20px; }
.co-pane > .page::before, .co-pane > .page::after { display: none; }
@media (min-width: 900px) { .co-switch { padding-left: max(16px, calc((100% - 880px) / 2)); padding-right: max(16px, calc((100% - 880px) / 2)); } }
.ag-accts { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.ag-acct { display: flex; justify-content: space-between; gap: 10px; }

/* Company console > Skills */
.sk-list { padding: 0; overflow: hidden; }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.sk-row:first-child { border-top: 0; }
.sk-emoji { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; font-size: 16px; flex: none; }
.sk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sk-text b { font-size: 14px; font-weight: 600; }
.sk-text span { font-size: 12.5px; color: var(--muted); }
.sk-none { padding: 16px; margin: 0; }
.sk-list .switch { width: 44px; height: 26px; }
.sk-list .switch::after { width: 20px; height: 20px; }
.sk-list .switch.on::after { transform: translateX(18px); }
.co-body .cx-card.sk-list { padding: 0; }
.co-body .sk-row { padding: 12px 14px; }
.cx-toolbar > .muted { white-space: nowrap; }
.co-body .cx-search { width: auto; flex: 1; min-width: 0; }
.ag-model { white-space: nowrap; }
.ag-key { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ag-use { white-space: nowrap; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ag-own { flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.ag-stack { display: flex; flex-direction: column; gap: 2px; }
.ag-stack small { font-size: 12px; max-width: 220px; }
.ag-act .ag-acts { flex-wrap: nowrap; }
.cx-dep { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.cx-groups { display: block; margin-top: 7px; font-size: 12px; line-height: 1.3; }
.ag-stack small { display: block; line-height: 1.35; }
.ag-stack .ag-rest { white-space: nowrap; }
.cx-use { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; white-space: nowrap; }
.cx-usebar { display: block; width: 90px; height: 4px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.cx-usebar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0c9dd8, #2a3fb0); }
.cx-warn { color: #b45309; font-weight: 600; margin: 0 0 8px; }
.kn h3 { margin: 0 0 6px; font-size: 16px; }
.kn > p, .kn > div > p { margin: 6px 0; }
.kn-ul { margin: 8px 0 10px; gap: 5px; }
.kn-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.kn-acts .dlg-linkbtn { margin-top: 0; }
.kn-acts .dlg-linkbtn.danger { color: #be123c; }
.kn-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.kn-file { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.kn-name { display: flex; flex-direction: column; min-width: 0; }
.kn-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.kn-dot.ok { background: #16a34a; }
.kn-note, .kn-warn { font-size: 13px; font-weight: 600; }
.kn-warn { color: #b45309; }
.kn-foot { margin-top: 10px; }
.kn-h { margin: 14px 0 4px; font-size: 14px; }
.card.kn { padding: 18px 18px 8px; }
.card.kn + .card.kn { margin-top: 14px; }
.kn h3 { display: flex; align-items: center; gap: 8px; }
.kn-pill { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.kn-pill.on { background: #dcfce7; color: #15803d; }
.kn > .card, .kn + .kn { margin-top: 16px; }

/* Company vault page */
.cv-head { padding: 14px 18px; }
.cv-headrow { display: flex; align-items: center; gap: 10px; }
.cv-headrow svg { color: var(--muted); flex: none; }
.cv-search { flex: 1; min-width: 0; width: 100%; }
.cv-head .muted { margin-top: 8px; }
.cv-list { display: flex; flex-direction: column; margin-top: 4px; }
.cv-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 2px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); font: inherit; cursor: pointer; }
.cv-row.still { cursor: default; }
.cv-row:first-child { border-top: 0; }
.cv-row:not(.still):hover { background: var(--surface-2); }
.cv-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); color: var(--muted); display: grid; place-items: center; flex: none; }
.cv-ic.cv-folder { background: rgba(92, 200, 245, 0.16); color: #0c7fb0; }
.cv-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cv-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-name small { font-size: 12.5px; }
.cv-span { grid-column: 1 / -1; }
.cv-results { margin-bottom: 16px; }

.co-av.photo, .cx-av.photo { overflow: hidden; background: var(--line); }
.co-av.photo img, .cx-av.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-av.big { width: 112px; height: 112px; font-size: 40px; margin: 0 auto; background: var(--twin); overflow: hidden; }
.co-av.big img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dlg-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700; flex: none; margin-right: 6px; overflow: hidden; }
.dlg-av.photo { background: var(--line); }
.dlg-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diag { white-space: pre-wrap; font-size: 12px; line-height: 1.5; margin: 0; user-select: text; -webkit-user-select: text; }

/* Keyboard up on a phone: the page is the visible area, no home-bar padding under the message box. */
html.kb-open { height: var(--vvh) !important; }
html.kb-open body, html.kb-open #app { height: 100%; overflow: hidden; }
html.kb-open .co-shell .chat .composer { padding-bottom: 8px; }
html.kb-open .chat .composer { padding-bottom: 8px; }
/* The header is solid, so nothing shows through it under the status bar. */
.co-top { background: var(--bg); }
/* Company app: one flat ground, no top gradient or glow, so the status bar area matches the header. */
.co-shell.shell::before, .co-shell .shell::before { background: var(--bg); }
.co-shell .co-top { background: var(--bg); }

/* Enterprise sign-in: navy ground, form centred, lockup low centre */
.signin.ent { background: #070a18; color: #f7f9fd; }
.signin.ent .signin-mark { opacity: 0.05; }
.signin.ent .signin-sheet { padding: calc(24px + var(--safe-t)) 28px calc(22px + var(--safe-b)); }
.signin-center { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.signin.ent .signin-sheet h1 { color: #fff; }
.signin.ent .signin-sheet .lead { color: #b4bedf; }
.signin.ent .signin-sheet input:not([type=checkbox]) { background: #10172e; border-color: rgba(150, 170, 230, 0.22); color: #fff; }
.signin.ent .signin-sheet input::placeholder { color: #6b7590; }
.signin.ent .signin-sheet input:not([type=checkbox]):focus { border-color: #4f9ee0; box-shadow: 0 0 0 3px rgba(79, 158, 224, 0.2); }
.signin.ent .agree-check { color: #d6dcf0; }
.signin.ent .agree-check .inline-link, .signin.ent .signin-sheet .text-btn, .signin.ent .inline-link { color: #4f9ee0; }
.signin.ent .signin-hint { color: #8a94b8; }
.signin.ent .signin-foot { margin-top: 0; padding-top: 24px; gap: 12px; }
.signin.ent .signin-brand .nameplate { font-size: 22px; color: #fff; }
.signin.ent .signin-brand .np-ent { color: #4f9ee0; }
.signin.ent .consent { color: #6b7590; }

/* ===== The Light (web build EDITION=light, <html class="ed-light">) =====
   Twin Chat Enterprise in The Light's look, taken from its logo: a gold star on night. Ivory pages
   washed with soft light (gold, rose, dusk blue), night panels with gold on them, serif titles.
   Each community inside keeps its own name and logo; the colours stay The Light's. */
@font-face { font-family: "Playfair Display"; src: url("/fonts/playfair-display-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("/fonts/cinzel-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
html.ed-light {
  --bg: #f7f4ee; --bg-top: #f7f4ee; --surface: #fffefb; --surface-2: #f1ece2; --bubble: #fffefb;
  --line: rgba(58, 40, 10, 0.10); --text: #1b1611; --muted: #6b6253; --faint: #a59a86;
  --accent: #9a6a12; --accent-text: #9a6a12; --num: linear-gradient(135deg, #d9a43c 0%, #8a5a0c 100%);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 32px rgba(46, 32, 8, 0.07); --user-1: #c08a22; --user-2: #d9a43c;
  --bar: rgba(247, 244, 238, 0.94); --seg: #f1ece2; --seg-on: #fffefb; --bar-lo: #ddd3bf;
  --sky: #dcaa44; --indigo: #a8741a; --twin: linear-gradient(135deg, #e6b655 0%, #c08a22 48%, #96650f 100%);
  --ring-1: #e6b655; --ring-2: #a8741a; --navy: #1b1611;
  --sheet: #fffefb; --sheet-text: #1b1611; --sheet-muted: #6b6253; --sheet-line: #e6ddcb;
  --band: linear-gradient(160deg, #241b10 0%, #14100b 60%, #0c0a08 100%); --band-top: #241b10;
  /* The washes of light behind every page, and the night used on panels. */
  --light-wash: radial-gradient(48% 38% at 8% 0%, rgba(236, 188, 92, 0.30), transparent 70%), radial-gradient(42% 34% at 96% 4%, rgba(226, 150, 124, 0.18), transparent 72%), radial-gradient(60% 46% at 78% 100%, rgba(128, 142, 214, 0.16), transparent 72%), radial-gradient(40% 36% at 0% 92%, rgba(236, 188, 92, 0.12), transparent 70%);
  --night: radial-gradient(70% 90% at 88% 10%, rgba(214, 160, 60, 0.34), transparent 62%), radial-gradient(60% 80% at 0% 100%, rgba(94, 104, 190, 0.20), transparent 65%), linear-gradient(135deg, #2a1f11 0%, #17120c 52%, #0d0b09 100%);
}
html.ed-light body { background: var(--light-wash), #f7f4ee; background-attachment: fixed; }
html.ed-light :is(.page-title, .greeting, .signin-sheet h1, .sheet-title, .cx-top h1, .cx-hero h1) { font-family: "Playfair Display", Georgia, serif; font-weight: 700; letter-spacing: -0.005em; }
html.ed-light .btn-primary, html.ed-light .cx-btn.p, html.ed-light .dlg-btn.primary { background: var(--twin); color: #fff; border: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 22px rgba(160, 108, 20, 0.28); text-shadow: 0 1px 0 rgba(90, 58, 6, 0.25); }
html.ed-light .card, html.ed-light .cx-card { border-color: rgba(168, 116, 26, 0.14); }
/* The Light's own mark: the star and the name as its logo writes it */
html.ed-light .np-light { gap: 0.4em; }
html.ed-light .np-light > span, html.ed-light .light-word { font-family: "Cinzel", "Playfair Display", Georgia, serif; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: #9a6a12; }
html.ed-light .nameplate-star { height: 1.9em; width: auto; }
html.ed-light .nameplate-star.on-ink, html.ed-light .home-band .nameplate-star.on-cream { display: none; }
html.ed-light .home-band .nameplate-star.on-ink { display: block; }
html.ed-light .home-band .np-light > span { color: #e6c27a; }
html.ed-light .avatar-glyph[src="/star-mark.webp"] { width: 84%; }
html.ed-light .co-tile.co-star { overflow: visible; border-radius: 0; }
html.ed-light .cx-side .co-tile.co-star img { content: url("/star-mark-glow.webp"); }
/* Loading: the star glows until the app is ready */
html.ed-light .splash { background: var(--light-wash), #f7f4ee; flex-direction: column; position: relative; }
html.ed-light .light-mark { display: flex; flex-direction: column; align-items: center; gap: 18px; animation: splash-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
html.ed-light .light-star { position: relative; width: 228px; height: 274px; }
html.ed-light .light-star img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; animation: light-shine 2.6s ease-in-out infinite; }
html.ed-light .light-star::before { content: ""; position: absolute; left: 50%; top: 52%; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; background: radial-gradient(circle, rgba(238, 190, 92, 0.60) 0%, rgba(238, 190, 92, 0.24) 32%, rgba(238, 190, 92, 0) 68%); animation: light-halo 2.6s ease-in-out infinite; pointer-events: none; }
html.ed-light .light-word { font-size: 34px; }
html.ed-light .splash-by { position: absolute; left: 0; right: 0; bottom: calc(34px + var(--safe-b)); margin: 0; text-align: center; font-size: 13px; letter-spacing: 0.04em; color: #8a7d66; }
@keyframes light-shine { 0%, 100% { opacity: 0.72; transform: scale(0.965); filter: drop-shadow(0 0 4px rgba(214, 160, 52, 0.25)); } 50% { opacity: 1; transform: scale(1.03); filter: drop-shadow(0 0 22px rgba(224, 168, 52, 0.85)); } }
@keyframes light-halo { 0%, 100% { opacity: 0.15; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { html.ed-light .light-star img, html.ed-light .light-star::before, html.ed-light .light-mark { animation: none; } }
@media (max-height: 560px) { html.ed-light .light-star { width: 150px; height: 180px; } html.ed-light .light-word { font-size: 26px; } }
/* Sign in: the same light, straight on from the loading screen */
html.ed-light .signin.ent { background: var(--light-wash), #f7f4ee; color: #1b1611; }
html.ed-light .signin.ent .signin-sheet h1 { color: #1b1611; }
html.ed-light .signin.ent .signin-sheet .lead, html.ed-light .signin.ent .signin-hint, html.ed-light .signin.ent .consent { color: #6b6253; }
html.ed-light .signin.ent .signin-sheet input:not([type=checkbox]) { background: #fffefb; border-color: #ddd3bf; color: #1b1611; box-shadow: 0 8px 22px rgba(46, 32, 8, 0.05); }
html.ed-light .signin.ent .signin-sheet input::placeholder { color: #a59a86; }
html.ed-light .signin.ent .signin-sheet input:not([type=checkbox]):focus { border-color: #c08a22; box-shadow: 0 0 0 3px rgba(192, 138, 34, 0.18); }
html.ed-light .signin.ent .agree-check { color: #1b1611; }
html.ed-light .signin.ent :is(.agree-check .inline-link, .signin-sheet .text-btn, .inline-link) { color: #9a6a12; }
html.ed-light .signin.ent .signin-brand .nameplate { color: #9a6a12; }
html.ed-light .signin.ent .signin-brand .np-light { font-size: 24px; }
/* Chat: your words in gold, the assistant's on a clean card */
html.ed-light .msg.user .bubble { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 10px 22px rgba(160, 108, 20, 0.22); }
html.ed-light .msg.assistant .bubble { border-color: rgba(168, 116, 26, 0.14); box-shadow: 0 8px 22px rgba(46, 32, 8, 0.05); }
html.ed-light .composer-field { background: #fffefb; border-color: rgba(168, 116, 26, 0.18); box-shadow: 0 8px 22px rgba(46, 32, 8, 0.05); }
html.ed-light .send { box-shadow: 0 8px 18px rgba(160, 108, 20, 0.28); }
html.ed-light .co-tab.on { background: var(--twin); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(160, 108, 20, 0.24); }
/* Console: a night side menu with gold on it, and a night band for each page's title */
html.ed-light .cx { --cx-side: #14100b; --cx-side-text: #d9cdb6; --cx-side-muted: #8f8369; }
html.ed-light .cx-side { background: radial-gradient(120% 34% at 0% 0%, rgba(214, 160, 60, 0.30), transparent 62%), radial-gradient(100% 30% at 100% 100%, rgba(94, 104, 190, 0.16), transparent 65%), linear-gradient(180deg, #221a10 0%, #14100b 46%, #0c0a08 100%); }
html.ed-light .cx-org { border-bottom-color: rgba(230, 182, 85, 0.16); }
html.ed-light .cx-org b { color: #f6ecd8; }
html.ed-light .cx-item:hover:not(.soon) { background: rgba(230, 182, 85, 0.08); }
html.ed-light .cx-item.on { background: linear-gradient(90deg, rgba(230, 182, 85, 0.30), rgba(230, 182, 85, 0.06)); box-shadow: inset 3px 0 0 #e6b655; color: #fff6e0; }
html.ed-light .cx-soon { border-color: rgba(230, 182, 85, 0.22); color: #8f8369; }
html.ed-light .cx-back { border-color: rgba(230, 182, 85, 0.22); }
html.ed-light .cx-back:hover { background: rgba(230, 182, 85, 0.08); }
html.ed-light .cx-main { background: var(--light-wash), #f7f4ee; }
html.ed-light .cx-hero { background: var(--night); color: #f6ecd8; border: 1px solid rgba(230, 182, 85, 0.22); box-shadow: 0 18px 40px rgba(30, 20, 4, 0.22); }
html.ed-light .cx-hero::before { left: auto; right: 166px; top: 0; bottom: 0; width: 224px; height: auto; margin: 0; border-radius: 0; background: url("/star-glow.webp") 146px -6px / 76px 91px no-repeat, url("/magi.webp") 0 36px / 156px 100px no-repeat; opacity: 1; }
html.ed-light .cx-hero::after { right: 76px; bottom: auto; top: -100px; width: 280px; height: 280px; margin: 0; background: radial-gradient(circle, rgba(238, 190, 92, 0.34), rgba(238, 190, 92, 0) 68%); }
html.ed-light .cx-hero h1 { color: #fff6e0; font-size: 30px; }
html.ed-light .cx-hero .cx-sub { color: rgba(246, 236, 216, 0.78); }
html.ed-light .cx-eyebrow { color: #e6b655; }
html.ed-light .cx-btn.w { background: var(--twin); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 22px rgba(0, 0, 0, 0.35); }
html.ed-light .cx-kpi { --tone: #c08a22; --tone-bg: rgba(192, 138, 34, 0.13); }
html.ed-light .cx-kpi.t-indigo { --tone: #5e68be; --tone-bg: rgba(94, 104, 190, 0.12); }
html.ed-light .cx-kpi.t-violet { --tone: #b8684e; --tone-bg: rgba(184, 104, 78, 0.12); }
html.ed-light .cx-kpi.t-green { --tone: var(--live); --tone-bg: var(--live-bg); }
html.ed-light .cx-kpi.t-amber { --tone: var(--attention); --tone-bg: var(--attention-bg); }
html.ed-light .cx-kpi::before { height: 3px; background: linear-gradient(90deg, var(--tone), transparent 82%); }
html.ed-light .cx-col b { background: linear-gradient(180deg, #f0c66a 0%, #c08a22 55%, #96650f 100%); box-shadow: 0 10px 20px rgba(160, 108, 20, 0.24); }
html.ed-light .cx-bar i { background: linear-gradient(90deg, #e6b655, #a8741a); }
html.ed-light .cx-lv.L1 { background: rgba(192, 138, 34, 0.14); color: #86590c; }
html.ed-light .cx-lv.L2 { background: rgba(94, 104, 190, 0.14); color: #444e9c; }
html.ed-light .cx-lv.L3 { background: rgba(27, 22, 17, 0.88); color: #f0c66a; }
html.ed-light .cx-mark { opacity: 1; }
html.ed-light .cx-by { font-size: 12px; color: #8a7d66; letter-spacing: 0.02em; }
@media (max-width: 900px) { html.ed-light .cx-hero::before, html.ed-light .cx-hero::after { display: none; } }
/* The Light: the header sits straight on the page, with no band or box behind it, and with room above it. */
html.ed-light .co-shell .co-top, html.ed-light .co-top, html.ed-light .co-head, html.ed-light .chat-head { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
html.ed-light .co-top > .co-switch { border-bottom: 0; padding-top: 6px; padding-bottom: 12px; }
html.ed-light .co-head, html.ed-light .chat-head { padding-top: calc(14px + var(--safe-t)); padding-bottom: 10px; }
@media (min-width: 900px) { html.ed-light .co-head, html.ed-light .chat-head { padding-top: 26px; padding-bottom: 12px; } }
/* Every dropdown draws its own arrow, set in from the edge, instead of the browser's (which sits
   hard against the border and differs by device). */
select.dlg-input, select.cx-select { appearance: none; -webkit-appearance: none; background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; padding-right: 36px; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E"); }
select.cx-select { background-position: right 9px center; padding-right: 28px; background-size: 11px 11px; }
html.ed-light select.dlg-input, html.ed-light select.cx-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%239a6a12' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E"); }
/* The Light: the last blue leftovers take the gold (focus ring, tones, bars, agent tag). */
html.ed-light .dlg-input:focus, html.ed-light .cx-select:focus { border-color: #c08a22; box-shadow: 0 0 0 3px rgba(192, 138, 34, 0.18); outline: none; }
html.ed-light .tone-twin { background: var(--twin); }
html.ed-light .lock-hero-icon { box-shadow: 0 10px 24px rgba(150, 101, 15, 0.28); }
html.ed-light .tk-kind.k-agent { background: rgba(192, 138, 34, 0.14); color: #8a5a0c; }
html.ed-light .cx-usebar i { background: linear-gradient(90deg, #e6b655, #96650f); }
html.ed-light .dlg { --dlg-bg: #fffefb; box-shadow: 0 24px 60px rgba(46, 32, 8, 0.22); }
/* A narrow window has no room for the riders beside the title: the star alone stays. */
@media (max-width: 1040px) { html.ed-light .cx-hero::before { background: url("/star-glow.webp") 146px -6px / 76px 91px no-repeat; } }
/* The Light on a phone: the Assistant / My Agent / Vault / Skills switch sits in the middle. */
@media (max-width: 899px) { html.ed-light .co-top > .co-switch { justify-content: center; } html.ed-light .co-top > .co-switch .co-sw-list { max-width: 100%; } }
/* Account (name, email, photo), opened from the member menu. */
.profile-email { font-size: 14px; color: var(--muted); padding: 2px 0 4px; overflow-wrap: anywhere; }
.profile-name { display: grid; gap: 6px; margin: 4px 0 2px; text-align: left; }
.profile-name > span { font-size: 13px; font-weight: 600; }

/* ── Phone console: one spacing rule for every tab ───────────────────────────────────────────────
   Each tab is a column of blocks (bars, chips, labels, cards, notes) that used to carry their own
   margins, or none, so some sat hard against each other. Now the column sets the space: 14px
   between blocks, a little more above a section label, and a label sits close to what it names.
   Notes under a tab are left-aligned like everything else. */
.co-pane-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.co-pane-body > * { margin-top: 0; margin-bottom: 0; min-width: 0; }
.co-pane-body > .group { display: flex; flex-direction: column; gap: 10px; }
.co-pane-body > .group > .group-label, .co-pane-body > .co-bar > .group-label { margin: 0; }
.co-pane-body > .group-label, .co-pane-body > .co-bar:has(> .group-label), .co-pane-body > .group:not(:first-child), .co-pane-body > .pt-head { margin-top: 10px; }
.co-pane-body > .group-label { margin-bottom: -4px; }
.co-pane-body > .group-label:first-child, .co-pane-body > .pt-head:first-child { margin-top: 0; }
.co-pane-body > .foot-note, .co-pane-body > .cx-foot { text-align: left; margin-top: 2px; font-size: 12.5px; line-height: 1.5; }
.co-pane-body .co-stats, .co-pane-body .co-levels, .co-pane-body .cx-grid, .co-pane-body .cx-asst-grid { gap: 12px; }
.co-pane-body > div:not([class]) { display: flex; flex-direction: column; gap: 14px; }
.co-pane-body .card.kn { padding: 16px; margin: 0; }
.co-pane-body .card.kn .kn-acts { margin-bottom: 0; }
.co-pane-body .card.kn > :last-child { margin-bottom: 0; }
/* Chips stay on one line and slide sideways when there are more than fit. */
.co-pane-body .co-chips, .co-pane-body .cx-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
.co-pane-body .co-chips::-webkit-scrollbar, .co-pane-body .cx-filters::-webkit-scrollbar { display: none; }
.co-pane-body .co-chip, .co-pane-body .cx-chip { flex: none; white-space: nowrap; }
.co-pane-body .cx-toolbar.tk-bar { display: block; }
/* A long email stays on one line and trails off, instead of breaking at the @. */
.co-pane-body .co-person .row-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-pane-body .co-person .status { flex: none; }
/* Agents: the note about the key on its own line, the button under it at the left. */
.co-pane-body .ag-ai { justify-content: flex-start; margin: 0; }
.co-pane-body .ag-ai > .muted { flex: 1 1 100%; }
/* Points: the heading text, then the button the full width under it. */
.co-pane-body .pt-head { flex-direction: column; align-items: stretch; gap: 12px; }
.co-pane-body .pt-head.pt-gap { margin-top: 14px; }
.co-pane-body .cx-table { padding: 14px 16px; }
.co-pane-body .cx-table h3 { padding: 0; }
/* In the phone app the page scrolls under the phone's clock: a strip of the page's own colour
   keeps the top clear. In a browser the strip has no height. */
body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: var(--safe-t); background: var(--bg-top, var(--bg)); z-index: 20; pointer-events: none; }
/* A note standing in for an empty list inside a dialog gets the list's own padding. */
.dlg-list > .dlg-text { padding: 12px 14px; }
/* Lists on a phone (console and Admin): type a size smaller, so titles and their lines fit the
   row without breaking early, and long words (an email) only break when they must. */
@media (max-width: 899px) {
  .co-shell .row .row-title { font-size: 16px; line-height: 1.25; }
  .co-shell .row-detail { font-size: 13.5px; line-height: 1.35; overflow-wrap: break-word; margin-top: 2px; }
  .co-shell .row-icon { width: 40px; height: 40px; }
  .co-shell .row .status { flex: none; }
}
/* A row's detail as separate lines, each kept to one line (a long email trails off). */
.row-lines { display: flex; flex-direction: column; min-width: 0; }
.row-lines > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The console button in the chat header: on a phone a round icon button beside the menu button,
   on a wide screen the same button with its name. */
.co-console-btn { display: inline-flex; }
@media (max-width: 699px) {
  .co-console-btn { width: 40px; padding: 0; justify-content: center; border-radius: 50%; }
  .co-console-btn > span { display: none; }
  .co-head { gap: 10px; }
}
/* Invite people and a person's page: the block for a Level 2 or 3 person's own keys. */
.dlg-keys { display: flex; flex-direction: column; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dlg-keys[hidden] { display: none; }
.dlg-keys-head { display: flex; flex-direction: column; gap: 3px; }
.dlg-keys-head b { font-size: 13.5px; }
/* A dialog's buttons on a phone: when they don't fit one row, the extra one (Remove, Delete) takes
   a row of its own under the main two, so nothing runs off the edge. */
@media (max-width: 480px) {
  .dlg-foot { flex-wrap: wrap; row-gap: 6px; }
  .dlg-foot > .dlg-space { display: none; }
  .dlg-foot > .dlg-btn:not(.ghost-danger) { flex: 1 1 0; }
  .dlg-foot > .ghost-danger, .dlg-foot > .ag-acts { order: 3; flex: 1 1 100%; justify-content: center; }
}

/* ── Dialogs and forms: one rhythm everywhere ────────────────────────────────────────────────────
   A field is a tight group (label, box, note: 7px apart). Fields sit 20px apart, so each group
   reads as one thing. A section inside a form is set off by a rule with the same 20px on each side.
   The same numbers are used by dialogs, bottom sheets and the console's forms. */
.dlg-body { padding: 20px 20px 8px; gap: 20px; }
.dlg-field { gap: 7px; }
.dlg-label { font-size: 13px; line-height: 1.3; }
.dlg-hint { font-size: 12.5px; line-height: 1.5; }
.dlg-text { line-height: 1.55; }
.dlg-linkbtn { margin-top: -10px; }
.dlg-foot { margin-top: 12px; padding: 14px 20px 16px; }
.dlg-keys { gap: 20px; padding: 20px 0; }
.dlg-keys-head { gap: 4px; }
.dlg-keys-head b { font-size: 14px; line-height: 1.3; }
.ag-two { gap: 16px; }
.co-form { gap: 20px; }
.profile-name { gap: 7px; margin: 0; }
.sheet > .profile-name + .profile-name, .sheet > .photo-preview + .profile-name { margin-top: 20px; }
.sheet > .profile-name + .sheet-text { margin-top: 14px; }
.dlg-body > h4, .dlg-body > h3, .dlg-body > p, .dlg-body > ul, .dlg-body > .kn-acts { margin: 0; }
.dlg-body > h4 + ul, .dlg-body > h3 + ul { margin-top: -12px; }