/* =====================================================================
   NT-Analyzer — Concept design by CLAUDE
   "Aurora" dark trading-terminal design system
   Single stylesheet, no build step. Works from file://
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Surfaces */
  --bg-0: #050913;          /* app background (deepest) */
  --bg-1: #08101a;          /* page background */
  --bg-2: #0f1724;          /* panels / cards */
  --bg-3: #151f2e;          /* raised / hover */
  --bg-4: #1d2a3d;          /* active / selected */
  --glass: rgba(10, 16, 26, 0.78);

  /* Lines */
  --line: #172233;
  --line-2: #213148;
  --line-3: #304560;

  /* Text */
  --tx: #eef4ff;
  --tx-2: #b0bdd3;
  --tx-3: #7e90ad;
  --tx-4: #56657e;

  /* Brand / accent */
  --brand: #1fc9ff;
  --brand-2: #8a56ff;
  --brand-ink: #e8f6ff;
  --brand-soft: rgba(31, 201, 255, 0.12);
  --brand-line: rgba(54, 188, 255, 0.34);

  /* Semantic */
  --pos: #34d399;          /* profit / up */
  --pos-soft: rgba(52, 211, 153, 0.14);
  --neg: #ff6b81;          /* loss / down */
  --neg-soft: rgba(255, 107, 129, 0.14);
  --warn: #fcc55a;
  --warn-soft: rgba(252, 197, 90, 0.14);
  --info: #4fd1e0;
  --info-soft: rgba(79, 209, 224, 0.14);
  --violet: #b48cff;

  /* Chart palette */
  --c1: #1fc9ff; --c2: #34d399; --c3: #fcc55a; --c4: #ff6b81;
  --c5: #4fd1e0; --c6: #8a56ff; --c7: #f59e6b; --c8: #5ad19a;

  /* Geometry */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Shadows */
  --sh-1: 0 1px 0 rgba(255,255,255,0.03), 0 8px 24px rgba(0,0,0,0.35);
  --sh-2: 0 18px 48px rgba(0,0,0,0.45);
  --glow: 0 0 0 1px var(--brand-line), 0 10px 28px rgba(31, 201, 255, 0.18);

  /* Shell backgrounds (theme-aware) */
  --app-bg:
    radial-gradient(1080px 620px at 84% -12%, rgba(31, 201, 255, 0.10), transparent 58%),
    radial-gradient(920px 660px at -4% 112%, rgba(138, 86, 255, 0.09), transparent 56%),
    linear-gradient(180deg, #08101a 0%, #070d16 100%);
  --rail-bg: linear-gradient(180deg, #09111c, #050913);
  --topbar-bg: linear-gradient(180deg, rgba(10,16,26,0.94), rgba(10,16,26,0.80));
  --scrollbar-thumb: #283044;

  --rail-w: 240px;
  --topbar-h: 60px;
  --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace;

  /* Native controls (select lists, date pickers, checkboxes, scrollbars) follow the theme. */
  color-scheme: dark;
}

/* ---------- Light theme ---------- */
/* Applied when the user picks "Светлая", or when the theme is "Авто" and the OS
   prefers a light color scheme. Dark stays the default (:root above). */
[data-theme="light"] {
  color-scheme: light;
  --bg-0: #e9eef6;
  --bg-1: #f4f7fb;
  --bg-2: #ffffff;
  --bg-3: #eef3f9;
  --bg-4: #e2eaf4;
  --glass: rgba(255, 255, 255, 0.86);

  --line: #e3e9f1;
  --line-2: #d4deeb;
  --line-3: #bfccdd;

  --tx: #0f1b2d;
  --tx-2: #3b4a62;
  --tx-3: #6a7b95;
  --tx-4: #98a6bd;

  --brand: #0d8fd6;
  --brand-ink: #06344a;
  --brand-soft: rgba(13, 143, 214, 0.10);
  --brand-line: rgba(13, 143, 214, 0.30);

  --pos: #0f9d63;
  --pos-soft: rgba(15, 157, 99, 0.12);
  --neg: #d92d4e;
  --neg-soft: rgba(217, 45, 78, 0.12);
  --warn: #b9820a;
  --warn-soft: rgba(185, 130, 10, 0.14);
  --info: #0e8ea0;
  --info-soft: rgba(14, 142, 160, 0.14);

  --sh-1: 0 1px 0 rgba(15, 27, 45, 0.02), 0 8px 24px rgba(20, 40, 80, 0.10);
  --sh-2: 0 18px 48px rgba(20, 40, 80, 0.16);
  --glow: 0 0 0 1px var(--brand-line), 0 10px 28px rgba(13, 143, 214, 0.14);
  --app-bg:
    radial-gradient(1080px 620px at 84% -12%, rgba(13, 143, 214, 0.07), transparent 58%),
    radial-gradient(920px 660px at -4% 112%, rgba(138, 86, 255, 0.05), transparent 56%),
    linear-gradient(180deg, #f4f7fb 0%, #e7eef7 100%);
  --rail-bg: linear-gradient(180deg, #ffffff, #eef3f9);
  --topbar-bg: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(244,247,251,0.82));
  --scrollbar-thumb: #c4cede;
}
@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    color-scheme: light;
    --bg-0: #e9eef6;
    --bg-1: #f4f7fb;
    --bg-2: #ffffff;
    --bg-3: #eef3f9;
    --bg-4: #e2eaf4;
    --glass: rgba(255, 255, 255, 0.86);
    --line: #e3e9f1;
    --line-2: #d4deeb;
    --line-3: #bfccdd;
    --tx: #0f1b2d;
    --tx-2: #3b4a62;
    --tx-3: #6a7b95;
    --tx-4: #98a6bd;
    --brand: #0d8fd6;
    --brand-ink: #06344a;
    --brand-soft: rgba(13, 143, 214, 0.10);
    --brand-line: rgba(13, 143, 214, 0.30);
    --pos: #0f9d63;
    --pos-soft: rgba(15, 157, 99, 0.12);
    --neg: #d92d4e;
    --neg-soft: rgba(217, 45, 78, 0.12);
    --warn: #b9820a;
    --warn-soft: rgba(185, 130, 10, 0.14);
    --info: #0e8ea0;
    --info-soft: rgba(14, 142, 160, 0.14);
    --sh-1: 0 1px 0 rgba(15, 27, 45, 0.02), 0 8px 24px rgba(20, 40, 80, 0.10);
    --sh-2: 0 18px 48px rgba(20, 40, 80, 0.16);
    --glow: 0 0 0 1px var(--brand-line), 0 10px 28px rgba(13, 143, 214, 0.14);
    --app-bg:
      radial-gradient(1080px 620px at 84% -12%, rgba(13, 143, 214, 0.07), transparent 58%),
      radial-gradient(920px 660px at -4% 112%, rgba(138, 86, 255, 0.05), transparent 56%),
      linear-gradient(180deg, #f4f7fb 0%, #e7eef7 100%);
    --rail-bg: linear-gradient(180deg, #ffffff, #eef3f9);
    --topbar-bg: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(244,247,251,0.82));
    --scrollbar-thumb: #c4cede;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
img, canvas, svg, video { max-width: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--tx);
  background: var(--app-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: rgba(31, 201, 255, 0.28); }

/* keyboard focus ring (accessibility) */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
[role="button"] { cursor: pointer; }

/* Base icon size — specific rules (.btn .ic, .rail-item .ic, …) override this. */
svg.ic { width: 18px; height: 18px; flex: none; vertical-align: middle; }

/* hidden must always win over display utilities (.col/.grid/.flex) */
[hidden] { display: none !important; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: #2b3346 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #36405a; background-clip: padding-box; }

/* =====================================================================
   Ambient background — the deepest animated layer (see assets/ambient.js)
   z-index 0 → canvas · z-index 1 → grid + vignette · z-index 2 → app
   ===================================================================== */
.ambient-bg {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none; display: block;
}
.ambient-vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(130% 120% at 50% 22%, transparent 52%, rgba(3, 6, 12, 0.62) 100%),
    repeating-linear-gradient(0deg, rgba(122, 150, 190, 0.045) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(122, 150, 190, 0.045) 0 1px, transparent 1px 46px);
  -webkit-mask-image: radial-gradient(140% 130% at 50% 30%, #000 60%, transparent 100%);
          mask-image: radial-gradient(140% 130% at 50% 30%, #000 60%, transparent 100%);
}
[data-theme="light"] .ambient-vignette {
  background:
    radial-gradient(130% 120% at 50% 22%, transparent 60%, rgba(120, 140, 175, 0.28) 100%),
    repeating-linear-gradient(0deg, rgba(60, 90, 135, 0.05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(60, 90, 135, 0.05) 0 1px, transparent 1px 46px);
}
@media (prefers-color-scheme: light) {
  [data-theme="auto"] .ambient-vignette {
    background:
      radial-gradient(130% 120% at 50% 22%, transparent 60%, rgba(120, 140, 175, 0.28) 100%),
      repeating-linear-gradient(0deg, rgba(60, 90, 135, 0.05) 0 1px, transparent 1px 46px),
      repeating-linear-gradient(90deg, rgba(60, 90, 135, 0.05) 0 1px, transparent 1px 46px);
  }
}

/* =====================================================================
   App shell: left rail + topbar + content
   ===================================================================== */
.app { position: relative; z-index: 2; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }

/* Rail drag-resize handle — 6px invisible strip on the right border of the rail. */
.rail-resize-handle {
  position: absolute; right: -3px; top: 0; bottom: 0; width: 6px;
  cursor: col-resize; z-index: 50;
  background: transparent;
}
.rail-resize-handle:hover, .rail-resize-handle.dragging {
  background: rgba(31, 201, 255, 0.25);
}

.rail {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  gap: 4px; padding: 16px 12px 14px;
  background: var(--rail-bg);
  border-right: 1px solid var(--line);
  z-index: 40;
  overflow: hidden;
}
.rail-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 6px 14px; margin: 0 2px 8px; border-bottom: 1px solid var(--line);
}
.rail-logo {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  position: relative;
}
.rail-logo-mark { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(31, 201, 255, 0.28)); }
.rail-brand-tx { display: flex; flex-direction: column; min-width: 0; }
.rail-brand-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rail-brand-name { font-size: 14px; font-weight: 800; letter-spacing: -.2px; color: var(--tx); white-space: nowrap; }
.rail-release-badge {
  display: inline-flex; align-items: center; min-height: 15px; padding: 1px 5px;
  border-radius: 999px; font-size: 7.5px; line-height: 1; font-weight: 900;
  letter-spacing: .45px; border: 1px solid var(--line-2); color: var(--tx-2);
  background: var(--bg-3); white-space: nowrap;
}
.rail-release-badge.dev { color: #ffd0a0; border-color: rgba(255, 137, 48, .48); background: rgba(211, 91, 14, .20); }
.rail-release-badge.canary { color: #ffe09b; border-color: rgba(244, 184, 61, .52); background: rgba(190, 126, 11, .20); }
.rail-release-badge.beta { color: #f2c2ff; border-color: rgba(193, 102, 255, .48); background: linear-gradient(105deg, rgba(116, 69, 214, .22), rgba(224, 103, 34, .20)); }
.rail-release-badge.stable[hidden] { display: none !important; }
.rail-brand-version { margin-top: 1px; font-size: 8.5px; line-height: 1.2; color: var(--tx-3); font-weight: 650; white-space: nowrap; }
.rail-brand-sub { font-size: 10.5px; color: var(--tx-3); font-weight: 600; white-space: nowrap; }
.rail-nav { display: flex; flex-direction: column; gap: 3px; width: 100%; flex: 1; }
.rail-item {
  position: relative; width: 100%; padding: 9px 12px; border-radius: 12px;
  display: flex; flex-direction: row; align-items: center; gap: 12px;
  color: var(--tx-3); cursor: pointer; border: 1px solid transparent;
  transition: background .14s, color .14s, border-color .14s;
}
.rail-item .ic { width: 19px; height: 19px; flex: none; display: block; stroke: currentColor; fill: none; stroke-width: 1.7; }
.rail-item .lb { font-size: 12.5px; letter-spacing: .1px; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.rail-item:hover { background: var(--bg-3); color: var(--tx); }
.rail-item.active { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); }
.rail-item.active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 58%; border-radius: 0 3px 3px 0; background: var(--brand);
  box-shadow: 0 0 10px rgba(31, 201, 255, 0.7);
}
.rail-item.active .ic { filter: drop-shadow(0 0 6px rgba(31, 201, 255, 0.55)); }
.rail-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 8px 2px; margin: 6px 2px 0; border-top: 1px solid var(--line);
}
.rail-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--pos); box-shadow: 0 0 10px var(--pos); }
.rail-foot-tx { font-size: 11px; color: var(--tx-3); font-weight: 600; white-space: nowrap; }

.main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px; padding: 0 22px;
  background: var(--topbar-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.tb-title { display: flex; flex: 0 1 180px; flex-direction: column; gap: 1px; min-width: 110px; }
.tb-kicker-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tb-kicker { font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--tx-3); font-weight: 700; }
.tb-release-badge, .tb-build-meta { display: none; }
.tb-build-meta { color: var(--tx-3); font-size: 8.5px; font-weight: 650; white-space: nowrap; }
.tb-h1 { font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.tb-search-wrap { position: relative; flex: 1; min-width: 180px; max-width: 380px; margin-left: 10px; }
.tb-search {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 8px 14px; color: var(--tx-3);
}
.tb-search input { background: none; border: 0; outline: none; color: var(--tx); width: 100%; font-size: 13px; }
.tb-search input::placeholder { color: var(--tx-4); }

/* search results dropdown */
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--glass); border: 1px solid var(--line-3); border-radius: var(--r-md);
  box-shadow: var(--sh-2); backdrop-filter: blur(14px); padding: 6px; max-height: 60vh; overflow-y: auto;
}
.search-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; color: var(--tx-2); }
.search-item:hover, .search-item.active { background: var(--bg-3); color: var(--tx); }
.search-item svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; opacity: .8; }
.search-item .si-main { display: flex; flex-direction: column; min-width: 0; }
.search-item .si-label { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-item .si-sub { font-size: 11px; color: var(--tx-3); }
.search-empty { padding: 16px; text-align: center; color: var(--tx-3); font-size: 12.5px; }

.tb-right { margin-left: auto; display: flex; flex: 0 1 auto; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.tb-page-actions { display: flex; align-items: center; gap: 8px; }
.tb-page-actions:empty { display: none; }
.tb-sep { width: 1px; height: 24px; background: var(--line-2); margin: 0 2px; }

/* dropdown menu */
.menu {
  position: fixed; z-index: 90; min-width: 240px; padding: 6px;
  background: var(--glass); border: 1px solid var(--line-3); border-radius: var(--r-md);
  box-shadow: var(--sh-2); backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(-6px); transition: opacity .14s, transform .14s; transform-origin: top right;
}
.menu.open { opacity: 1; transform: translateY(0); }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; color: var(--tx-2); padding: 9px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600; }
.menu-item:hover { background: var(--bg-3); color: var(--tx); }
.menu-item.danger { color: var(--neg); }
.menu-item.danger:hover { background: var(--neg-soft); }
.menu-item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; opacity: .85; }
.menu-sep { height: 1px; background: var(--line-2); margin: 5px 4px; }

.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--tx-2);
  white-space: nowrap;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tx-3); }
.chip.ok { color: var(--pos); border-color: rgba(52,211,153,0.3); background: var(--pos-soft); }
.chip.ok .dot { background: var(--pos); box-shadow: 0 0 8px var(--pos); }
.chip.warn { color: var(--warn); border-color: rgba(252,197,90,0.3); background: var(--warn-soft); }
.chip.warn .dot { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.chip.bad { color: var(--neg); border-color: rgba(255,107,129,0.3); background: var(--neg-soft); }
.chip.bad .dot { background: var(--neg); box-shadow: 0 0 8px var(--neg); }
.chip.off { color: var(--tx-3); border-color: var(--line-2); background: var(--bg-2); }
.chip.off .dot { background: var(--tx-3); box-shadow: none; }
.chip.mono { font-family: var(--mono); letter-spacing: .3px; }
.chip-account { font: inherit; cursor: pointer; max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip { font: inherit; cursor: pointer; padding-left: 4px; gap: 7px; }
.admin-env-button { min-width: 54px; font-family: var(--mono); letter-spacing: .5px; }

/* Capability-gated Admin Panel. Personal cabinet styles remain separate. */
.admin-shell { display: grid; grid-template-columns: minmax(190px, 230px) minmax(0, 1fr); gap: 18px; min-height: 520px; }
.admin-modules { display: flex; flex-direction: column; gap: 5px; align-self: start; position: sticky; top: 0; }
.admin-module { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--tx-2); text-align: left; cursor: pointer; }
.admin-module:hover { background: var(--bg-3); color: var(--tx); }
/* Compact top-bar environment switcher (environment.switch) */
.env-seg { display: inline-flex; align-items: stretch; gap: 0; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: var(--bg-3); flex: none; }
.env-seg-btn { appearance: none; border: 0; background: transparent; color: var(--tx-3); font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 4px 8px; cursor: pointer; line-height: 1.4; border-right: 1px solid var(--line); }
.env-seg-btn:last-of-type { border-right: 0; }
.env-seg-btn:hover:not(.on):not([data-env-unset]) { background: var(--bg-4); color: var(--tx); }
.env-seg-btn[data-env-unset] { color: var(--tx-4); cursor: default; }
.env-seg-btn.on { color: #fff; cursor: default; }
.env-seg-btn.development.on { background: linear-gradient(180deg, #f59e0b, #d97706); }
.env-seg-btn.canary.on { background: linear-gradient(180deg, #eab308, #ca8a04); }
.env-seg-btn.production.on { background: linear-gradient(180deg, #6d5efc, #4f46e5); }
.env-seg-more { appearance: none; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--tx-3); cursor: pointer; padding: 0 7px; font-size: 13px; line-height: 1; }
.env-seg-more:hover { background: var(--bg-4); color: var(--tx); }
/* Development / QA persona quick-launch grid */
.qa-persona-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.qa-persona { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--tx); cursor: pointer; }
.qa-persona:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.qa-persona-title { font-weight: 700; font-size: 13px; }
.qa-persona-sub { font-size: 11px; color: var(--tx-3); }
/* Item 2: typed device cards (computer / phone / browser / Connector). */
.device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.device-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); }
.device-card.dev-connector { border-color: var(--brand-line); }
.device-card-head { display: flex; align-items: flex-start; gap: 10px; }
.device-card-head .dev-ic { font-size: 22px; line-height: 1; flex: none; }
.device-card-head .dev-headmain { flex: 1 1 auto; min-width: 0; }
.device-card-head .badge { flex: none; }
.dev-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dev-type { font-size: 11px; color: var(--tx-3); margin-top: 2px; }
.dev-online { font-size: 11px; font-weight: 600; }
.dev-online.on { color: #22c55e; }
.dev-online.off { color: var(--tx-4); }
.device-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.dev-kv-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dev-kv-item .k { font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: var(--tx-4); }
.dev-kv-item .v { font-size: 12px; color: var(--tx); overflow-wrap: anywhere; }
.device-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.device-details { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 8px; background: var(--bg-3); border: 1px solid var(--line); }
.dev-detail-item { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.dev-detail-item .k { color: var(--tx-4); }
.dev-detail-item .v.mono { font-family: var(--mono, ui-monospace, monospace); color: var(--tx-2); overflow-wrap: anywhere; text-align: right; }
/* Item 5: blocked-by-infrastructure release actions. */
.rc-blocked-action { display: inline-flex; align-items: center; gap: 6px; }
.rc-blocked-action button[disabled] { opacity: .55; cursor: not-allowed; }
/* Item 6: top update-banner preview. */
.update-preview-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: linear-gradient(90deg, #4f46e5, #6d5efc); color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.35); font-size: 13px; }
.update-preview-banner.upb-done { background: linear-gradient(90deg, #059669, #10b981); }
.update-preview-banner .upb-tag { font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 3px 7px; border-radius: 6px; background: rgba(255,255,255,.22); flex: none; }
.update-preview-banner .upb-main { flex: 1 1 auto; min-width: 0; }
.update-preview-banner .upb-title { font-weight: 700; }
.update-preview-banner .upb-msg { opacity: .95; }
.update-preview-banner .btn { flex: none; color: #fff; border-color: rgba(255,255,255,.4); }
.admin-module.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); }
.admin-module small { color: var(--tx-4); font-size: 9px; overflow-wrap: anywhere; }
.admin-module-group { padding: 12px 12px 4px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-4); }
.admin-module-group:first-child { padding-top: 2px; }
.admin-module-body { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.admin-grant-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, 230px) auto; align-items: center; gap: 12px; padding: 9px 11px; border-bottom: 1px solid var(--line); }
.admin-grant-row:last-child { border-bottom: 0; }
.admin-grant-row input[type="datetime-local"] { min-width: 0; width: 100%; }
.admin-env-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.admin-env-card { display: flex; flex-direction: column; gap: 13px; margin: 0; }
.admin-env-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.admin-env-head > span { overflow-wrap: anywhere; text-align: right; }
/* Environment card: the first level stays readable at a glance; audit data
   sits inside the collapsed "Технические данные" block. */
.pub-outcome { margin-top: 6px; font-size: 12px; }
.pub-outcome.is-deployed { color: var(--warn, #d29922); }
.pub-outcome.is-failed { color: var(--bad, #f85149); }
/* Three stages, in the order they happen. The arrow between them is the
   workflow; the cards are equal width so none reads as the important one. */
.stage-flow { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.stage-flow > .stage-card { flex: 1 1 260px; min-width: 240px; display: flex; flex-direction: column; }
.stage-arrow { align-self: center; color: var(--tx-3); font-size: 18px; flex: 0 0 auto; }
.stage-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.stage-origin { margin-left: auto; font-size: 11px; opacity: 0.75; }
.stage-status { margin-top: 8px; font-size: 12px; }
.stage-status.is-pass { color: var(--ok, #3fb950); }
.stage-status.is-progress { color: var(--warn, #d29922); }
.stage-status.is-fail { color: var(--bad, #f85149); }
.stage-status.is-ok { color: var(--tx-2); }
.stage-status.is-idle { color: var(--tx-3); }
.stage-actions { margin-top: auto; padding-top: 10px; }
.stage-action { width: 100%; }
.stage-note { margin-top: 10px; }
.stage-blocked { margin-top: 6px; font-size: 11.5px; color: var(--tx-3); }
.stage-shared { margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2, rgba(255,255,255,0.03)); }
.env-load { margin-top: 10px; display: grid; gap: 4px; }
.env-load-none { font-size: 11.5px; color: var(--tx-3); }
/* One scale across every gauge: the same colour always means the same load. */
.load-gauge { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.load-name { width: 46px; color: var(--tx-3); }
.load-track { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.07); overflow: hidden; }
.load-fill { display: block; height: 100%; border-radius: 4px; background: currentColor; }
.load-value { width: 62px; text-align: right; font-variant-numeric: tabular-nums; }
.load-gauge.is-normal { color: var(--ok, #3fb950); }
.load-gauge.is-elevated { color: #d4c95a; }
.load-gauge.is-high { color: #e3873c; }
.load-gauge.is-critical { color: var(--bad, #f85149); }
.load-gauge.is-unknown { color: var(--tx-3); }
.load-gauge.is-unknown .load-value { font-size: 10.5px; }
.pub-stage.is-running { color: var(--warn, #d29922); }
.spinner.sm { width: 9px; height: 9px; border-width: 1.5px; display: inline-block; vertical-align: -1px; }
.stage-done { font-size: 12px; color: var(--ok, #3fb950); }
.stage-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 11.5px; }
.stage-check.ok { color: var(--ok, #3fb950); }
.stage-check.fail { color: var(--bad, #f85149); }
.pub-stages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; font-size: 11.5px; }
.pub-stage.is-passed { color: var(--ok, #3fb950); }
.pub-stage.is-failed { color: var(--bad, #f85149); }
.pub-stage.is-not_started { color: var(--tx-3); }
.pub-sep { color: var(--tx-3); }
.env-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.env-version { font-size: 15px; letter-spacing: -0.01em; }
.env-summary-title { margin-top: 4px; font-size: 12px; color: var(--tx-2); }
.env-summary { margin: 4px 0 0; padding-left: 16px; font-size: 11.5px; color: var(--tx-2); }
.env-summary li { margin: 1px 0; }
.env-state { margin-top: 6px; font-size: 12px; color: var(--tx-2); }
.env-state.is-offline { color: var(--tx-3); }
.env-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 11.5px; }
.env-check.ok { color: var(--ok, #3fb950); }
.env-check.pending { color: var(--tx-3); }
.env-tech { margin-top: 8px; }
.env-tech > summary { cursor: pointer; font-size: 11.5px; color: var(--tx-3); }
.env-tech[open] > summary { margin-bottom: 6px; }
.admin-env-meta { display: grid; gap: 6px; }
.admin-env-meta > div { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; }
.admin-env-meta span { color: var(--tx-3); }
.admin-env-meta strong { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.admin-env-warnings { display: flex; flex-direction: column; gap: 5px; color: var(--warn); font-size: 11px; }
.admin-env-confirm { margin-top: 12px; padding: 12px; border: 1px solid var(--warn); border-radius: var(--r-md); background: var(--warn-soft); }
.admin-env-confirm .admin-env-meta { margin: 10px 0; }
/* Environment comparison. The table scrolls inside its own box so a long
   artifact digest cannot push the whole panel sideways. */
.table-scroll { overflow-x: auto; max-width: 100%; }
.admin-env-compare { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.admin-env-compare th, .admin-env-compare td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-env-compare thead th { color: var(--tx-3); font-weight: 600; }
.admin-env-compare tbody th { color: var(--tx-3); font-weight: 500; }
.admin-env-compare tr.is-diff th, .admin-env-compare tr.is-diff td { color: var(--warn); }

/* Environments and releases as one module. The three cards read left to right
   in the same order the artifact travels, so the layout itself states the
   lifecycle before any label does. */
/* Sized to the container, not the viewport: this grid lives inside an admin
   panel roughly half the window wide, so a viewport breakpoint would keep
   three columns and squeeze each card to a fraction of its content. */
.pipe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.pipe-card { display: flex; flex-direction: column; gap: 12px; margin: 0; min-width: 0; }
.pipe-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pipe-card-head b { margin-right: auto; }
/* A Development box running code nobody committed is the failure this whole
   pipeline exists to prevent, so the card carries the warning itself. */
.pipe-card-warn { border-color: var(--warn); }
.pipe-note { margin-top: -2px; }
.pipe-actions { margin-top: auto; }

.pipe-stages { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.pipe-stage { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 11.5px; color: var(--tx-3); }
.pipe-stage-dot { font-size: 10px; line-height: 1; }
.pipe-stage-done { color: var(--pos); border-color: rgba(52,211,153,.32); background: var(--pos-soft); }
/* Failed is drawn as failed, never as "not yet reached" -- that distinction is
   why someone opened this page. */
.pipe-stage-failed { color: var(--neg); border-color: rgba(255,107,129,.32); background: var(--neg-soft); }
.pipe-arrow { color: var(--tx-4); font-size: 11px; }

.pipe-gates { display: grid; gap: 6px; padding: 6px 0 2px; }
.pipe-gate { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; }
.pipe-gate.is-ok { color: var(--tx-3); }
.pipe-gate.is-blocked { color: var(--warn); }

.release-record { margin: 10px 0 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); }
.release-record.is-incomplete { border-color: rgba(244,184,61,.52); }
.release-record-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.release-record-head h3 { margin: 2px 0 0; font-size: 16px; line-height: 1.3; letter-spacing: 0; }
.release-record-summary { margin-top: 8px; color: var(--tx-2); max-width: 980px; }
.release-record-prs { margin-top: 8px; font-size: 12px; }
.release-record-changes { margin: 8px 0 0; padding-left: 18px; color: var(--tx-2); }
.release-record-changes li { margin: 3px 0; }
.release-record-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 16px; margin-top: 12px; }
.release-record-grid div, .release-record-envs div { min-width: 0; }
.release-record-grid span, .release-record-envs span { display: block; color: var(--tx-4); font-size: 10px; text-transform: uppercase; }
.release-record-grid strong, .release-record-envs strong { display: block; margin-top: 2px; overflow-wrap: anywhere; font-size: 11.5px; }
.release-record-envs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.release-record-proof { margin-top: 9px; color: var(--tx-3); font-size: 11.5px; }
.release-record-proof.is-pass { color: var(--pos); }


/* Connector onboarding reads as three acts, numbered, because that is what it
   is: get the program, install it, let it in. The one-time code lives in the
   fallback below them -- a secret is a poor greeting for a new user. */
.conn-steps { list-style: none; counter-reset: conn-step; margin: 14px 0 0; padding: 0; display: grid; gap: 16px; }
.conn-steps > li { counter-increment: conn-step; position: relative; padding-left: 34px; }
.conn-steps > li::before { content: counter(conn-step); position: absolute; left: 0; top: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--brand-line); color: var(--brand); font-size: 11px; font-weight: 700; }
.conn-step-title { font-size: 12.5px; font-weight: 600; }

/* Canonical user card. The nesting is the model: machine > client > session,
   so each level is indented and separated rather than flattened into one list. */
.card-summary-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.card-summary-id { min-width: 0; }
.card-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.card-row:last-child { border-bottom: 0; }
.card-row-main { min-width: 0; }
.card-row-title { font-size: 12.5px; overflow-wrap: anywhere; }
.card-row-side { flex: 0 0 auto; }
.card-details { margin-top: 10px; }
.card-details > summary { cursor: pointer; font-size: 11.5px; color: var(--tx-3); padding: 6px 0; }
.card-chain { margin-top: 8px; }
.card-machine { border-left: 2px solid var(--brand-line); }
.card-machine-note { margin: 6px 0 10px; }
.card-clients { display: flex; flex-direction: column; gap: 10px; }
.card-client { padding-left: 12px; border-left: 1px solid var(--line); }
.card-sessions { padding-left: 12px; }
.card-row-nested { border-bottom: 0; padding: 4px 0; }
.card-empty { padding-left: 12px; }
.card-pair-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.card-pair-row .input { min-width: 0; flex: 1 1 140px; }
.card-timeline-row { padding: 5px 0; }
.card-timeline-icon { display: inline-block; width: 1.2em; color: var(--tx-3); }
.udetail-tabs { margin-bottom: 10px; }
.docs-tabs { margin-bottom: 10px; }

/* Owner Journal as a timeline. The day heading carries the date so each row
   needs only a time, which is what lets three hundred entries read as a
   sequence of days rather than one undifferentiated column. */
.jtimeline { display: flex; flex-direction: column; gap: 14px; }
.jday-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.jday-date { font-weight: 600; font-size: 12px; }
.jday-rows { display: flex; flex-direction: column; border-left: 2px solid var(--line); margin-left: 4px; }
.jrow { display: flex; gap: 10px; padding: 6px 0 6px 12px; position: relative; }
.jrow::before { content: ''; position: absolute; left: -5px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.jrow-warn::before { background: var(--warn); }
.jrow-time { flex: 0 0 auto; color: var(--tx-3); font-size: 11.5px; padding-top: 1px; }
.jrow-body { min-width: 0; }
.jrow-title { font-size: 12.5px; overflow-wrap: anywhere; }

/* A KPI that only shows a number makes the reader guess what it is out of. */
.kpi-sub { font-size: 10.5px; color: var(--tx-3); margin-top: 2px; }
.kpi-warn .kpi-value { color: var(--warn); }

/* Avatars (Telegram photo or initials) */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; font-weight: 700; font-size: 11px; color: #fff; background: hsl(var(--av-h, 210) 42% 34%); letter-spacing: .2px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-sm { width: 20px; height: 20px; font-size: 9px; }
.avatar-lg { width: 62px; height: 62px; font-size: 22px; border-radius: 18px; }

/* Personal / owner cabinet */
.cab-head {
  display: flex; gap: 16px; align-items: center;
  padding: 18px 20px; margin-bottom: 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(138,86,255,0.14), transparent 55%),
    radial-gradient(120% 160% at 0% 0%, rgba(31,201,255,0.15), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0)), var(--bg-2);
  box-shadow: var(--sh-1);
  position: relative; overflow: hidden;
}
.cab-head::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-line), transparent);
}
.cab-head .cab-id { min-width: 0; flex: 1; }
.cab-name { font-size: 18px; font-weight: 800; line-height: 1.2; letter-spacing: -.2px; }
.cab-sub { color: var(--tx-3); font-size: 12px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.cab-head-actions { flex: 0 0 auto; }
.cab-tabs {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px;
  padding: 4px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--bg-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.cab-tab {
  padding: 8px 15px; background: transparent; border: 1px solid transparent; border-radius: var(--r-pill);
  color: var(--tx-3); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  transition: color .14s, background .14s, box-shadow .14s;
}
.cab-tab:hover { color: var(--tx); }
.cab-tab.on {
  color: var(--brand-ink);
  background: linear-gradient(180deg, var(--brand-soft), rgba(31,201,255,0.06));
  box-shadow: inset 0 0 0 1px var(--brand-line), 0 6px 16px rgba(31,201,255,0.16);
}
.cab-card {
  border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)), var(--bg-2);
  box-shadow: var(--sh-1);
  transition: border-color .16s, box-shadow .16s;
}
.cab-card:hover { border-color: var(--line-3); }
.cab-card h4 {
  margin: 0 0 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--tx-3);
  display: flex; align-items: center; gap: 8px;
}
.cab-card h4::before {
  content: ""; width: 3px; height: 12px; border-radius: 2px; flex: 0 0 auto;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
}
details.cab-card > summary {
  cursor: pointer; list-style: none; font-size: 13px; color: var(--tx-2);
  display: flex; align-items: center; gap: 8px; padding: 2px 0;
}
details.cab-card > summary::-webkit-details-marker { display: none; }
details.cab-card > summary::before {
  content: ""; width: 6px; height: 6px; border-right: 2px solid var(--tx-3); border-bottom: 2px solid var(--tx-3);
  transform: rotate(-45deg); transition: transform .16s; flex: 0 0 auto; margin-right: 2px;
}
details.cab-card[open] > summary::before { transform: rotate(45deg); }
details.cab-card[open] > summary { margin-bottom: 12px; }
.cab-kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; }
.cab-kv .k { color: var(--tx-3); flex: 0 0 auto; }
.cab-kv .v { text-align: right; }
.user-row .u-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-row .u-txt { min-width: 0; }
.feat-panel { margin: -6px 0 12px; padding: 8px 14px; border: 1px solid var(--line-2); border-top: none; border-radius: 0 0 var(--r-sm) var(--r-sm); background: var(--bg-2); }
.feat-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.feat-row:last-child { border-bottom: none; }

/* Toggle switch */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .sl { position: absolute; inset: 0; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 999px; transition: .15s; cursor: pointer; }
.switch .sl::before { content: ""; position: absolute; height: 16px; width: 16px; left: 2px; top: 2px; background: var(--tx-2); border-radius: 50%; transition: .15s; }
.switch input:checked + .sl { background: var(--brand-soft); border-color: var(--brand-line); }
.switch input:checked + .sl::before { transform: translateX(16px); background: var(--brand); }
.switch input:disabled + .sl { opacity: .5; }
.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: saturate(.25);
  box-shadow: none;
}

/* Plans / tariffs */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.plan-card { border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 14px; background: var(--bg-2); display: flex; flex-direction: column; gap: 10px; }
.plan-card.current { border-color: var(--brand-line); box-shadow: 0 0 0 1px var(--brand-line) inset; }
.plan-card.donation { background: var(--brand-soft); }
.plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.plan-name { font-weight: 700; font-size: 14px; }
.plan-price { font-weight: 700; color: var(--brand-ink); white-space: nowrap; }
.plan-tag { font-size: 12px; color: var(--tx-3); min-height: 30px; }
.plan-feats { display: flex; flex-direction: column; gap: 0; }
.plan-feats .feat-row { font-size: 12.5px; padding: 5px 0; }
.feat-mark { font-weight: 700; }
.feat-mark.on { color: var(--pos); }
.feat-mark.off { color: var(--tx-4); }
.plan-action { margin-top: auto; padding-top: 6px; }
.plan-action .btn, .plan-action a.btn { width: 100%; text-align: center; }

/* NinjaTrader connect wizard */
.nt-steps { margin: 8px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.nt-steps li { font-size: 12.5px; color: var(--tx-2); line-height: 1.4; }
.nt-path { font-size: 11px; word-break: break-all; }
.invite-result { margin-top: 12px; padding: 12px; border: 1px solid var(--brand-line); border-radius: var(--r-sm); background: var(--brand-soft); }
.tb-datetime { display: flex; flex-direction: column; align-items: flex-end; min-width: 126px; line-height: 1.15; }
.tb-datetime #pt-date { color: var(--tx-3); font-size: 10.5px; text-transform: capitalize; white-space: nowrap; }
.tb-datetime #clock { color: var(--tx-2); font-size: 11.5px; }

/* Compact market-news strip shared by every page except the full News page. */
.global-news-strip {
  position: fixed; left: var(--rail-w); right: 0; bottom: 0; top: auto; z-index: 39;
  height: 26px; min-width: 0; display: flex; align-items: center; overflow: hidden;
  background: rgba(8, 16, 26, .96); border-top: 1px solid var(--line);
  color: var(--tx-2); font-size: 10px;
}
.global-news-label {
  position: relative; z-index: 2; flex: 0 0 auto; height: 100%; padding: 0 10px;
  display: flex; align-items: center; color: var(--info); background: #102131;
  border-right: 1px solid rgba(79,209,224,.22); font-size: 9.5px; font-weight: 800;
  letter-spacing: .65px; white-space: nowrap; box-shadow: 8px 0 14px rgba(5,9,19,.44);
}
.global-news-window { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; overflow: hidden; }
.global-news-track {
  display: inline-flex; flex: 0 0 auto; align-items: center; gap: 40px; padding-left: 20px;
  white-space: nowrap; animation: globalNewsMarquee 180s linear infinite; will-change: transform;
}
.global-news-track.paused { animation: none; transform: none; }
.global-news-strip:hover .global-news-track { animation-play-state: paused; }
.global-news-item { display: inline-flex; align-items: center; gap: 6px; }
.global-news-item .dot { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: var(--info); }
.global-news-item.medium { color: var(--warn); }
.global-news-item.medium .dot { background: var(--warn); }
.global-news-item.high, .global-news-item.high b { color: var(--neg); }
.global-news-item.high .dot { background: var(--neg); box-shadow: 0 0 7px rgba(255,107,129,.7); }
.global-news-strip.warning .global-news-label { color: var(--warn); background: #2a2518; border-color: rgba(252,197,90,.28); }
.global-news-strip.critical .global-news-label { color: #fff; background: #8f2335; border-color: rgba(255,107,129,.5); }
.global-news-static { padding-left: 14px; color: var(--tx-3); }
@keyframes globalNewsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .global-news-track { animation: none; transform: none; } }
.main.has-global-news-strip .content { padding-bottom: 62px; }

/* preformatted log / diagnostics box */
.logbox {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--tx-2);
  background: var(--bg-0, #0c0f17); border: 1px solid var(--line-2); border-radius: var(--r-md, 10px);
  padding: 12px; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; margin: 0;
}

/* Content */
.content { padding: 22px; display: flex; flex-direction: column; gap: 18px; flex: 1; min-width: 0; }
.content > * { min-width: 0; }
.content.wide { max-width: none; }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 14px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 600;
  background: var(--bg-3); color: var(--tx); border: 1px solid var(--line-2);
  transition: background .14s, border-color .14s, transform .04s;
}
.btn:hover { background: var(--bg-4); border-color: var(--line-3); }
.btn:active { transform: translateY(1px); }
.btn .ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.btn.primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border-color: transparent; box-shadow: 0 10px 24px rgba(31, 201, 255, 0.22); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--bg-3); }
.btn.sm { padding: 5px 10px; font-size: 11.5px; }
.btn.danger { color: var(--neg); border-color: rgba(255,107,129,0.3); }
.btn.danger:hover { background: var(--neg-soft); }
.btn.icon { padding: 8px; }

/* App-local confirmation/input; never a browser-level blocking prompt. */
.app-dialog {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  margin: auto; padding: 24px; overflow: auto; box-sizing: border-box;
  border: 1px solid var(--brand-line); border-radius: var(--r-lg);
  color: var(--tx); background: var(--bg-2); box-shadow: var(--sh-2);
  font-family: var(--font);
}
.app-dialog::backdrop { background: rgba(3, 8, 18, .56); backdrop-filter: blur(3px); }
.app-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.app-dialog-context { color: var(--brand); font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.app-dialog h2 { margin: 7px 0 0; font-size: 19px; line-height: 1.35; }
.app-dialog p { margin: 18px 0 22px; color: var(--tx-2); font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.app-dialog-field { display: grid; gap: 7px; font-size: 12px; color: var(--tx-2); }
.app-dialog-field input { width: 100%; min-height: 42px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--bg-3); color: var(--tx); }
.app-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.app-dialog-actions .btn { min-height: 40px; justify-content: center; }
.app-dialog :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (max-width: 480px) {
  .app-dialog { padding: 18px; }
  .app-dialog-actions .btn { flex: 1 1 auto; }
}

.seg { display: inline-flex; flex-wrap: wrap; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 3px; gap: 2px; max-width: 100%; }
.seg button {
  border: 0; background: transparent; color: var(--tx-3); cursor: pointer; font-weight: 600;
  padding: 6px 13px; border-radius: var(--r-pill); font-size: 12px; transition: .14s;
}
.seg button:hover { color: var(--tx); }
.seg button.active { background: var(--brand-soft); color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--brand-line); }

/* =====================================================================
   Cards / panels
   ===================================================================== */
.panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.004)), var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.panel-h { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); }

/* async states (loading / empty / error+retry) */
.state-loading { display: flex; align-items: center; gap: 10px; padding: 28px; color: var(--tx-3); font-size: 13px; justify-content: center; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-3); border-top-color: var(--brand); animation: spin .7s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.state-error { display: flex; align-items: center; gap: 12px; padding: 18px; border: 1px solid rgba(255,107,129,.3); background: var(--neg-soft); border-radius: var(--r-md); color: var(--tx-2); }
.state-error svg { width: 22px; height: 22px; stroke: var(--neg); fill: none; stroke-width: 2; flex: none; }
.state-error .se-title { font-weight: 700; color: var(--tx); }
.state-error .se-msg { font-size: 12px; color: var(--tx-3); }
.state-error .btn { margin-left: auto; }
.is-stale { position: relative; }
.is-stale::after { content: 'обновление…'; position: absolute; top: 8px; right: 12px; font-size: 10px; color: var(--warn); }
.panel-h h2 { margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: .2px; }
.panel-h .sub { color: var(--tx-3); font-size: 11.5px; font-weight: 500; }
.panel-h .spacer { margin-left: auto; }
.panel-b { padding: 18px; }
.panel-b.tight { padding: 0; }

.grid { display: grid; gap: 16px; min-width: 0; }
.grid > * { min-width: 0; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1280px) { .cols-5, .cols-6 { grid-template-columns: repeat(3, minmax(0,1fr)); } .cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 980px) { .cols-3, .cols-4, .cols-5, .cols-6 { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* KPI / stat cards */
.kpi {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent), var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px;
}
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); opacity: .85; }
.kpi.pos::before { background: var(--pos); }
.kpi.neg::before { background: var(--neg); }
.kpi.warn::before { background: var(--warn); }
.kpi.info::before { background: var(--info); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-label { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--tx-3); font-weight: 700; }
.kpi-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); }
.kpi-ic .ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.kpi-val { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.kpi-val.sm { font-size: 21px; }
.kpi-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11.5px; color: var(--tx-3); }
.kpi-spark { height: 34px; margin-top: 10px; }
/* Compact KPI cards that use plain <span> label + <strong> value (admin panels) */
.kpi > span { display: block; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--tx-3); font-weight: 700; }
.kpi > strong { display: block; margin-top: 6px; font-size: 20px; font-weight: 800; letter-spacing: -.3px; line-height: 1.15; overflow-wrap: anywhere; }
.kpi > strong.mono { font-size: 15px; }

.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 11.5px; padding: 2px 7px; border-radius: var(--r-pill); }
.delta.up { color: var(--pos); background: var(--pos-soft); }
.delta.down { color: var(--neg); background: var(--neg-soft); }

.pos { color: var(--pos); }
.neg { color: var(--neg); }
.warn { color: var(--warn); }
.info { color: var(--info); }
.muted { color: var(--tx-3); }
.faint { color: var(--tx-4); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }

/* =====================================================================
   Badges / status pills
   ===================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
  background: var(--bg-3); color: var(--tx-2); border: 1px solid var(--line-2);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.live { color: var(--pos); border-color: rgba(52,211,153,.32); background: var(--pos-soft); }
.badge.demo { color: var(--info); border-color: rgba(79,209,224,.32); background: var(--info-soft); }
.badge.trial { color: var(--warn); border-color: rgba(252,197,90,.32); background: var(--warn-soft); }
.badge.research { color: var(--brand-ink); border-color: var(--brand-line); background: var(--brand-soft); }
.badge.rejected, .badge.failed { color: var(--neg); border-color: rgba(255,107,129,.32); background: var(--neg-soft); }
.badge.done { color: var(--pos); border-color: rgba(52,211,153,.32); background: var(--pos-soft); }
.badge.running { color: var(--info); border-color: rgba(79,209,224,.32); background: var(--info-soft); }
.badge.running .dot { animation: pulse 1.3s infinite; }
.badge.pending { color: var(--warn); border-color: rgba(252,197,90,.32); background: var(--warn-soft); }
.badge.archived { color: var(--tx-3); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* =====================================================================
   Tables
   ===================================================================== */
.tbl-wrap { overflow: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tbl thead th {
  position: sticky; top: 0; z-index: 2; text-align: left; padding: 11px 14px;
  font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--tx-3); font-weight: 700;
  background: var(--bg-2); border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
table.tbl thead th.num, table.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl thead th.sortable { cursor: pointer; }
table.tbl thead th.sortable:hover { color: var(--tx); }
table.tbl thead th .arrow { opacity: .5; font-size: 9px; }
table.tbl tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--tx-2); white-space: nowrap; }
table.tbl tbody tr { transition: background .1s; }
table.tbl tbody tr:hover { background: var(--bg-3); }
table.tbl tbody tr.selected { background: var(--brand-soft); }
table.tbl tbody tr.clickable { cursor: pointer; }
table.tbl td strong, table.tbl td .name { color: var(--tx); font-weight: 600; }
.cell-strat { display: flex; align-items: center; gap: 9px; }
.cell-tag { font-family: var(--mono); font-size: 11px; color: var(--tx-3); }

/* mini bar inside a cell (win-rate) */
.minibar { position: relative; height: 6px; width: 64px; background: var(--bg-4); border-radius: 4px; overflow: hidden; display: inline-block; vertical-align: middle; }
.minibar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }

/* =====================================================================
   Charts
   ===================================================================== */
.chart-box { position: relative; width: 100%; }
.chart-box canvas { display: block; width: 100%; }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 5; opacity: 0; transform: translate(-50%, -110%);
  background: var(--glass); border: 1px solid var(--line-3); border-radius: 9px; padding: 7px 10px;
  font-size: 11.5px; box-shadow: var(--sh-2); white-space: nowrap; backdrop-filter: blur(10px); transition: opacity .1s;
}
.chart-tip .t-lab { color: var(--tx-3); font-size: 10px; margin-bottom: 2px; }
.chart-tip .t-val { font-weight: 700; font-family: var(--mono); }
.chart-tip .t-detail { color: var(--tx-3); font-size: 10px; margin-top: 3px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; }
.legend-item {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--bg-3); border: 1px solid var(--line-2); cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--tx-2);
  user-select: none; transition: .12s;
}
.legend-item .sw { width: 9px; height: 9px; border-radius: 3px; }
.legend-item.off { opacity: .42; }
.legend-item:hover { border-color: var(--line-3); }

/* =====================================================================
   Calendar heatmap
   ===================================================================== */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { text-align: center; font-size: 10px; color: var(--tx-4); font-weight: 700; text-transform: uppercase; padding-bottom: 2px; }
.cal-day {
  aspect-ratio: 1 / 1; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-2);
  padding: 6px 7px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; position: relative; transition: .12s;
  min-width: 0; overflow: hidden;
}
.cal-day:hover { border-color: var(--line-3); transform: translateY(-1px); }
.cal-day.empty { background: transparent; border-color: transparent; cursor: default; }
.cal-day.sel { box-shadow: 0 0 0 2px var(--brand); }
.cal-day .d { font-size: 11px; color: var(--tx-3); font-weight: 600; }
.cal-day .v { font-size: 11px; font-weight: 800; margin-top: auto; font-variant-numeric: tabular-nums; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cal-day.pos { background: linear-gradient(180deg, var(--pos-soft), transparent); border-color: rgba(52,211,153,.28); }
.cal-day.neg { background: linear-gradient(180deg, var(--neg-soft), transparent); border-color: rgba(255,107,129,.28); }
.cal-day.pos .v { color: var(--pos); }
.cal-day.neg .v { color: var(--neg); }

/* =====================================================================
   Kanban (lifecycle)
   ===================================================================== */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(228px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.kan-col { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-md); display: flex; flex-direction: column; min-height: 220px; max-height: 520px; }
.kan-h { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.kan-h .t { font-size: 12px; font-weight: 700; }
.kan-h .n { margin-left: auto; font-size: 11px; color: var(--tx-3); background: var(--bg-3); border-radius: var(--r-pill); padding: 2px 8px; font-weight: 700; }
.kan-h .accent { width: 8px; height: 8px; border-radius: 50%; }
.kan-b { padding: 10px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; flex: 1; min-height: 0; }
.kan-card {
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 12px; cursor: grab;
  transition: .12s; position: relative; overflow: hidden;
}
.kan-card.ai-origin { border-color: rgba(180,140,255,.38); padding-top: 31px; }
.ai-origin-ribbon {
  position: absolute; left: 10px; top: 7px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 5px;
  color: #fff; background: linear-gradient(135deg, #3975ff 0%, #6656f6 58%, #8658e8 100%);
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 10px rgba(56,73,220,.25);
  font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase;
}
.ai-origin-badge {
  color: #fff; border-color: rgba(255,255,255,.2); background: linear-gradient(135deg, #3975ff 0%, #6656f6 58%, #8658e8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 9px rgba(56,73,220,.24); text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.kan-card:hover { border-color: var(--brand-line); background: var(--bg-3); }
.kan-card .kc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kan-card .kc-name { font-weight: 700; font-size: 12.5px; }
.kan-card .kc-meta { display: flex; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--tx-3); }
.kan-card .kc-meta b { color: var(--tx); font-variant-numeric: tabular-nums; }

/* =====================================================================
   Coverage matrix
   ===================================================================== */
.matrix { display: flex; flex-direction: column; gap: 10px; }
.matrix-row { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: 14px; }
.matrix-root { display: flex; flex-direction: column; gap: 2px; }
.matrix-root .sym { font-family: var(--mono); font-weight: 800; font-size: 14px; }
.matrix-root .meta { font-size: 10.5px; color: var(--tx-3); }
.matrix-cells { display: flex; gap: 6px; flex-wrap: wrap; }
.mcell {
  width: 48px; height: 40px; border-radius: 9px; background: var(--bg-3); border: 1px solid var(--line-2);
  cursor: pointer; transition: transform .1s, border-color .1s, box-shadow .1s; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.mcell::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--line-2); }
.mcell .mc-no { font-family: var(--mono); font-size: 11px; font-weight: 800; color: var(--tx); line-height: 1; }
.mcell .mc-tf { font-size: 8.5px; color: var(--tx-3); line-height: 1; letter-spacing: .2px; }
.mcell:hover { transform: translateY(-2px); border-color: var(--tx-3); box-shadow: var(--sh-1); z-index: 2; }
.mcell.live::before { background: var(--pos); } .mcell.live { background: rgba(52,211,153,.10); border-color: rgba(52,211,153,.30); }
.mcell.demo::before { background: var(--info); } .mcell.demo { background: rgba(79,209,224,.10); border-color: rgba(79,209,224,.30); }
.mcell.trial::before { background: var(--warn); } .mcell.trial { background: rgba(252,197,90,.10); border-color: rgba(252,197,90,.30); }
.mcell.research::before { background: var(--brand); } .mcell.research { background: var(--brand-soft); border-color: var(--brand-line); }
.mcell.rejected::before { background: var(--neg); } .mcell.rejected { background: rgba(255,107,129,.08); border-color: rgba(255,107,129,.25); opacity: .85; }
.mcell.archived::before { background: var(--tx-4); } .mcell.archived { background: var(--bg-2); border-color: var(--line-2); opacity: .55; }
.mcell.empty { background: var(--bg-2); border-style: dashed; }
.mcell.empty .mc-no { color: var(--tx-4); }

/* collapsible instrument groups */
.igroup { border-bottom: 1px solid var(--line); }
.igroup-h {
  display: flex; align-items: center; gap: 9px; padding: 9px 14px; cursor: pointer; user-select: none;
  background: var(--bg-2); position: sticky; top: 0; z-index: 1;
}
.igroup-h:hover { background: var(--bg-3); }
.igroup-h .caret { transition: transform .15s; color: var(--tx-3); display: flex; }
.igroup.collapsed .caret { transform: rotate(-90deg); }
.igroup.collapsed .igroup-b { display: none; }
.igroup-h .gname { font-weight: 700; font-size: 12px; }
.igroup-h .gcount { margin-left: auto; font-size: 11px; color: var(--tx-3); background: var(--bg-3); border-radius: var(--r-pill); padding: 1px 8px; font-weight: 700; }

/* horizontal flow bars (income by instrument) */
.flowbar-row { display: grid; grid-template-columns: 120px 1fr 92px; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.flowbar-row:last-child { border-bottom: 0; }
.flowbar-lab { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.flowbar-lab .s { font-weight: 700; font-family: var(--mono); font-size: 12px; }
.flowbar-lab .c { font-size: 10px; color: var(--tx-3); }
.flowbar { height: 16px; background: var(--bg-3); border-radius: 8px; overflow: hidden; position: relative; }
.flowbar > span { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 8px; }
.flowbar.neg > span { background: linear-gradient(90deg, rgba(255,107,129,.5), var(--neg)); }
.flowbar.pos > span { background: linear-gradient(90deg, rgba(52,211,153,.5), var(--pos)); }
.flowbar-val { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

/* plan vs fact mini stat */
.pf-stat { display: flex; flex-direction: column; gap: 3px; }
.pf-stat .lab { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--tx-3); font-weight: 700; }
.pf-stat .v { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* =====================================================================
   Forms
   ===================================================================== */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--tx-3); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0;
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--tx);
  padding: 9px 12px; font-size: 13px; font-family: inherit; outline: none; transition: border-color .12s, box-shadow .12s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft); }
.field textarea { resize: vertical; min-height: 70px; }

/* Cabinet / drawer forms — modern field styling */
.dchart-form { display: flex; flex-direction: column; gap: 14px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 14px; }
.dchart-form label {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--tx-3);
}
.dchart-form label > input,
.dchart-form label > select,
.dchart-form label > textarea,
.cab-card input:not([type=checkbox]):not([type=radio]),
.cab-card select,
.cab-card textarea {
  width: 100%; min-width: 0;
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-md); color: var(--tx);
  padding: 10px 12px; font-size: 13px; font-weight: 500; font-family: inherit; letter-spacing: normal; text-transform: none;
  outline: none; transition: border-color .14s, box-shadow .14s, background .14s;
}
.dchart-form textarea, .cab-card textarea { resize: vertical; min-height: 72px; }
.dchart-form label > input:hover,
.dchart-form label > select:hover,
.cab-card input:not([type=checkbox]):not([type=radio]):hover,
.cab-card select:hover { border-color: var(--line-3); }
.dchart-form label > input:focus,
.dchart-form label > select:focus,
.dchart-form label > textarea:focus,
.cab-card input:not([type=checkbox]):not([type=radio]):focus,
.cab-card select:focus,
.cab-card textarea:focus { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft); background: var(--bg-2); }
.dchart-form select, .cab-card select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237e90ad' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 32px;
}
.dchart-form input::placeholder, .cab-card input::placeholder { color: var(--tx-4); }
.dchart-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.drawing-lock { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 500; color: var(--tx-2); cursor: pointer; padding: 6px 0; }
.drawing-lock input { width: 17px; height: 17px; accent-color: var(--brand); flex: 0 0 auto; }
.req-days { display: inline-flex; flex-direction: column; gap: 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--tx-3); }
.req-days input { background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--tx); padding: 6px 8px; font-size: 12px; outline: none; transition: border-color .14s, box-shadow .14s; }
.req-days input:focus { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft); }

.chips-in { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-ink); border: 1px solid var(--brand-line); font-size: 11.5px; font-weight: 600; }
.chip-tag .x { cursor: pointer; opacity: .7; }
.chip-tag .x:hover { opacity: 1; }
.finance-note { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: rgba(252,197,90,.06); color: var(--tx-2); font-size: 11.5px; line-height: 1.5; }
.telegram-card { padding: 16px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--bg-2); display: flex; flex-direction: column; gap: 12px; }
.telegram-bot-name { margin-top: 5px; font-size: 16px; font-weight: 800; }
.telegram-settings { display: flex; flex-direction: column; margin: 0 -4px; }
.telegram-setting { position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.telegram-setting:last-child { border-bottom: 0; }
.telegram-setting.disabled { opacity: .48; cursor: not-allowed; }
.telegram-setting-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.telegram-setting-copy strong { font-size: 13px; }
.telegram-setting-copy small { color: var(--tx-3); font-size: 11.5px; line-height: 1.35; }
.telegram-setting input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.telegram-switch { position: relative; flex: 0 0 40px; width: 40px; height: 22px; border-radius: 999px; background: var(--bg-4); border: 1px solid var(--line-2); transition: background .15s, border-color .15s; }
.telegram-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--tx-3); transition: transform .15s, background .15s; }
.telegram-setting input:checked + .telegram-switch { background: var(--brand-soft); border-color: var(--brand); }
.telegram-setting input:checked + .telegram-switch::after { transform: translateX(18px); background: var(--brand-ink); }
.telegram-setting input:focus-visible + .telegram-switch { box-shadow: 0 0 0 3px var(--brand-soft); }
.telegram-pair { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 12px; border-radius: var(--r-sm); background: var(--brand-soft); border: 1px solid var(--brand-line); }
.telegram-error { margin-top: 0; border-color: rgba(255,107,129,.3); background: var(--neg-soft); }
.cloud-provider-card { min-width: 0; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--bg-2); display: flex; flex-direction: column; gap: 9px; }
.cloud-role-settings { display: flex; flex-direction: column; gap: 8px; }
.cloud-role-setting { display: grid; grid-template-columns: minmax(220px,1fr) minmax(240px,.9fr) 130px; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg-2); }
.cloud-role-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cloud-role-copy small { color: var(--tx-3); line-height: 1.4; }
.cloud-role-copy .mono { color: var(--tx-3); font-size: 10px; }
.cloud-role-toggle { min-height: 42px; padding: 4px 0; border-bottom: 0; }
.account-card { min-width: 0; padding: 13px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--bg-2); }
.account-card.active { border-color: var(--brand-line); background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.account-money { margin: 10px 0 3px; font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.role-timeline { display: grid; gap: 7px; }
.role-step { display: grid; grid-template-columns: 74px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg-2); }
.role-step .stage { color: var(--brand-ink); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.role-step .task { min-width: 0; font-size: 11.5px; color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-step .time { color: var(--tx-3); font: 10px var(--mono); }

/* =====================================================================
   List rows (strategies / reports / docs)
   ===================================================================== */
.list { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: background .1s;
}
.row:hover { background: var(--bg-3); }
.row.active { background: var(--brand-soft); border-left: 3px solid var(--brand); padding-left: 11px; }
.row-main { min-width: 0; flex: 1; }
.row-title { font-weight: 600; font-size: 13px; }
.row-sub { font-size: 11.5px; color: var(--tx-3); margin-top: 2px; }
.row-spark { width: 92px; height: 30px; }
.report-strategy-cell { min-width: 240px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.report-strategy-cell .row-spark { flex: 0 0 86px; width: 86px; }
.row-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

/* doc viewer */
.doc { max-width: 760px; }
.doc h1 { font-size: 24px; margin: 0 0 6px; }
.doc h2 { font-size: 18px; margin: 26px 0 8px; }
.doc h3 { font-size: 15px; margin: 20px 0 6px; }
.doc p { color: var(--tx-2); }
.doc ul, .doc ol { color: var(--tx-2); padding-left: 22px; }
.doc li { margin: 5px 0; }
.doc code { font-family: var(--mono); background: var(--bg-3); padding: 1px 6px; border-radius: 5px; font-size: 12px; color: var(--brand-ink); }
.doc blockquote { border-left: 3px solid var(--brand); margin: 14px 0; padding: 6px 16px; background: var(--brand-soft); border-radius: 0 8px 8px 0; color: var(--tx-2); }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }

/* timeline */
.timeline { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 18px 1fr; gap: 12px; padding-bottom: 16px; position: relative; }
.tl-item::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: 0; width: 1px; background: var(--line-2); }
.tl-item:last-child::before { display: none; }
.tl-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--bg-2); border: 3px solid var(--brand); margin-top: 2px; }
.tl-item.warn .tl-dot { border-color: var(--warn); }
.tl-item.neg .tl-dot { border-color: var(--neg); }
.tl-body .t { font-size: 12.5px; font-weight: 600; }
.tl-body .m { font-size: 11.5px; color: var(--tx-3); margin-top: 2px; }
.tl-body .diff { font-family: var(--mono); font-size: 11px; margin-top: 5px; }
.tl-body .diff .old { color: var(--neg); text-decoration: line-through; }
.tl-body .diff .new { color: var(--pos); }
.tl-item.clickable { cursor: pointer; }
.tl-item.clickable:hover .tl-body .t { color: var(--brand); }
.tl-item.clickable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.tl-body .amend-open-hint { margin-top: 6px; color: var(--brand); opacity: 0; transition: opacity .15s; }
.tl-item.clickable:hover .amend-open-hint,
.tl-item.clickable:focus-visible .amend-open-hint { opacity: 1; }
.doc h1.doc-law-highlight,
.doc h2.doc-law-highlight,
.doc h3.doc-law-highlight {
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent);
  border-radius: 8px;
  padding: 6px 10px;
  transition: background .4s ease, box-shadow .4s ease;
}
.amend-drawer-meta .t { font-size: 14px; font-weight: 600; }
.amend-drawer-meta .m { font-size: 12px; color: var(--tx-3); margin-top: 4px; }
.amend-drawer-reason,
.amend-drawer-changes { margin-top: 14px; }
.amend-change-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--tx-3); margin-bottom: 6px; }
.amend-change-row + .amend-change-row { margin-top: 12px; }
.amend-diff-wide { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px) { .amend-diff-wide { grid-template-columns: 1fr; } }
.amend-diff-head { font-size: 11px; color: var(--tx-3); margin-bottom: 4px; }
.amend-diff-pre {
  margin: 0; padding: 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-2); font-family: var(--mono); font-size: 11.5px;
  white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto;
}
.amend-diff-pre.old { border-color: color-mix(in srgb, var(--neg) 35%, var(--line)); }
.amend-diff-pre.new { border-color: color-mix(in srgb, var(--pos) 35%, var(--line)); }

/* drawer — stacking: backdrop (70) < panel (75) < toasts (80) < context menu (90) */
.drawer-back { position: fixed; inset: 0; background: rgba(5,7,12,0.6); backdrop-filter: blur(3px); z-index: 70; opacity: 0; pointer-events: none; transition: opacity .18s; }
.drawer-back.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: var(--qa-drawer-top, 0px); right: 0; height: calc(100vh - var(--qa-drawer-top, 0px)); width: min(720px, 94vw); z-index: 75;
  background: var(--bg-1); border-left: 1px solid var(--line-2); box-shadow: var(--sh-2);
  transform: translateX(100%); transition: transform .22s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.drawer.open { transform: translateX(0); }
.drawer.wide { width: min(1080px, 96vw); }
.drawer.full { width: 100vw; }
.drawer-resize { position: absolute; z-index: 2; left: -5px; top: 0; bottom: 0; width: 10px; cursor: ew-resize; touch-action: none; }
.drawer-resize:hover::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: var(--brand); }
.drawer-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer-title { min-width: 0; flex: 1; }
.drawer-title h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.drawer-b { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }

/* AI process log */
.logbox { background: #080b11; border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 14px; height: 280px; overflow-y: auto; font-family: var(--mono); font-size: 11.5px; line-height: 1.7; }
.logbox .ln { display: flex; gap: 10px; }
.logbox .ln > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.logbox .ts { color: var(--tx-4); }
.logbox .ok { color: var(--pos); }
.logbox .info { color: var(--info); }
.logbox .warn { color: var(--warn); }
.logbox .err { color: var(--neg); }
.logbox .dim { color: var(--tx-3); }

/* progress */
.progress { height: 8px; background: var(--bg-3); border-radius: var(--r-pill); overflow: hidden; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: var(--r-pill); transition: width .4s; }

/* hero (AI) */
.hero {
  position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 26px 28px;
  border: 1px solid var(--brand-line);
  background:
    radial-gradient(620px 280px at 88% -40%, rgba(138, 86, 255, 0.28), transparent 60%),
    radial-gradient(520px 240px at 4% 130%, rgba(31, 201, 255, 0.20), transparent 60%),
    linear-gradient(180deg, #111827, #0d131d);
}
.hero .kick { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--brand-ink); font-weight: 800; }
.hero .flex { flex-wrap: wrap; gap: 12px; }
.hero h1 { margin: 8px 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.4px; }
.hero p { margin: 0; color: var(--tx-2); max-width: 680px; }

/* small helpers */
.flex { display: flex; align-items: center; gap: 10px; }
.flex.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 10px; }
.gap-sm { gap: 6px; } .gap-lg { gap: 18px; }
.mt-0 { margin-top: 0; } .mt { margin-top: 12px; } .mb { margin-bottom: 12px; }
.divider { height: 1px; background: var(--line); margin: 4px 0; }
.tag { font-family: var(--mono); font-size: 11px; color: var(--tx-3); background: var(--bg-3); border: 1px solid var(--line-2); padding: 2px 7px; border-radius: 6px; }
.section-title { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--tx-3); }
.empty-state { text-align: center; color: var(--tx-3); padding: 36px; }
.empty-state .ic { width: 40px; height: 40px; opacity: .4; margin-bottom: 10px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* =====================================================================
   Responsive / mobile  (goal: zero document-level horizontal overflow)
   ===================================================================== */
.panel { min-width: 0; }
.tbl-wrap { overflow-x: auto; max-width: 100%; }

/* Tablet: collapse custom inline multi-col grids to a single column.
   minmax(0,1fr) (not 1fr) so a wide child can shrink instead of overflowing.
   !important beats the inline style="grid-template-columns:…". */
@media (max-width: 1024px) {
  .content { padding: 16px; gap: 14px; }
  .content .grid[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .cols-5, .cols-6 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pf-stat .v { font-size: 16px; }
}

/* Topbar trims early (independent of the rail) so the sticky header never overflows */
@media (max-width: 900px) {
  .tb-kicker { display: none; }
  .tb-release-badge { display: inline-flex; }
  .tb-build-meta { display: inline; }
  .chip-market { display: none; }
  .tb-datetime { display: none; }
  .chip-account { max-width: 140px; }
  #tb-restart span { display: none; }
  #tb-restart { padding: 8px; }
  .tb-title { min-width: 0; }
  .tb-h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tb-page-actions .btn span { display: none; }      /* page-action buttons icon-only */
  .tb-page-actions .btn { padding: 8px; }
}

/* The authenticated header carries user/workspace, chart actions, three
   runtime indicators, market/account state and environment controls.  The
   rail reduces its usable width, so waiting until a phone breakpoint used to
   push DEV/CANARY/PROD and the system menu hundreds of pixels off-screen even
   at 1920px.  Collapse low-priority status duplicates progressively while the
   canonical details remain available from System actions/Admin. */
@media (max-width: 2300px) {
  #chip-lm { display: none; }
}

@media (max-width: 2150px) {
  #chip-bridge { display: none; }
}

@media (max-width: 2000px) {
  #chip-nt, #chip-user, .tb-datetime { display: none; }
}

@media (max-width: 1700px) {
  #chip-workspace, .chip-market, #dev-preview-button { display: none; }
  .tb-page-actions .btn { font-size: 0; gap: 0; padding: 8px; }
}

@media (max-width: 900px) {
  #chip-account { display: none; }
  #admin-env-switcher .env-seg-btn:not(.on) { display: none; }
  .tb-sep { display: none; }
}

@media (max-width: 1350px) {
  #chip-nt, #chip-bridge, #chip-lm { display: none; }
}

@media (max-width: 1250px) {
  .tb-page-actions .btn { font-size: 0; gap: 0; padding: 8px; }
}

@media (max-width: 1100px) {
  .tb-search-wrap { display: none; }
  .tb-page-actions .btn { font-size: 0; gap: 0; padding: 8px; }
  .cloud-role-setting { grid-template-columns: minmax(200px,1fr) minmax(220px,1fr); }
  .cloud-role-toggle { grid-column: 1 / -1; }
}

/* Narrow tablet / large phone — sidebar collapses to a slim icon rail */
@media (max-width: 760px) {
  :root { --rail-w: 66px; --topbar-h: 56px; }
  .rail { align-items: center; padding: 14px 8px 12px; }
  .rail-brand { flex-direction: column; gap: 0; padding: 0 0 12px; margin: 0 0 8px; justify-content: center; }
  .rail-brand-tx { display: none; }
  .rail-item { flex-direction: column; gap: 4px; padding: 8px 4px; text-align: center; }
  .rail-item .lb { font-size: 9px; letter-spacing: .1px; line-height: 1.05; }
  .rail-item.active::before { display: none; }
  .rail-foot { flex-direction: column; justify-content: center; padding: 10px 0 2px; margin: 6px 0 0; }
  .rail-foot-tx { display: none; }
  .tb-search-wrap { display: none; }
  .topbar { padding: 0 12px; gap: 8px; }
  .tb-title { min-width: 0; }
  .tb-h1 { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tb-kicker { display: none; }
  .chip-market { display: none; }
  #tb-restart span { display: none; }            /* icon-only on small */
  #tb-restart { padding: 8px; }
  .cols-6, .cols-5, .cols-4, .cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kpi-val { font-size: 22px; }
  .kpi-val.sm { font-size: 18px; }
  .panel-b { padding: 14px; }
  .drawer { width: 100vw; }
  .drawer-resize, .drawer-tools [data-drawer-size] { display: none; }
  /* The drawer body is a constrained flex scroller. Without explicit rows,
     Grid shrank the horizontal module rail to a 4px track and painted the
     active module over it, so visible Admin tabs could not be clicked. */
  .admin-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: max-content max-content; min-height: 0; flex: 0 0 auto; }
  .admin-modules { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .admin-module { flex: 0 0 170px; }
  .admin-env-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-grant-row { grid-template-columns: minmax(0, 1fr); }
  /* Secondary copy is meaningful in Cabinet/Admin.  Desktop truncation is
     useful for dense rows, but on a narrow drawer it inflated min-content to
     ~800px and made Connector onboarding unreadable. */
  .drawer .cab-sub { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .conn-steps { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .conn-steps > li { min-width: 0; max-width: 100%; }
}

/* Phone — left rail becomes a fixed bottom nav (off-canvas pattern) */
@media (max-width: 600px) {
  :root { --rail-w: 0px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  /* topbar wraps to multiple rows instead of overflowing */
  .topbar { flex-wrap: wrap; height: auto; min-height: var(--topbar-h); row-gap: 6px; padding: 8px 12px; }
  .tb-right { flex-wrap: wrap; justify-content: flex-end; }
  .rail {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: 58px; width: 100%;
    flex-direction: row; justify-content: space-around; align-items: center;
    padding: 4px 6px; gap: 2px; border-right: none; border-top: 1px solid var(--line);
    z-index: 60; overflow-x: auto;
  }
  .rail-brand, .rail-foot { display: none; }
  .rail-nav { flex-direction: row; gap: 2px; width: 100%; flex: 1; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .rail-nav::-webkit-scrollbar { display: none; }
  .rail-item { width: auto; flex: 0 0 66px; padding: 6px 4px; }
  .rail-item .lb { display: block; font-size: 8.5px; }
  .content { padding: 12px; padding-bottom: 74px; }   /* clear the bottom nav */
  .main.has-global-news-strip .content { padding-bottom: 102px; }
  .topbar .chip { display: none; }                    /* declutter header on phones */
  .cols-6, .cols-5, .cols-4, .cols-3, .cols-2 { grid-template-columns: minmax(0, 1fr); }
  .tb-datetime { display: none; }
  .hero { padding: 18px; }
  .hero h1 { font-size: 21px; }
  .drawer { width: 100vw; }
  .toast-wrap { bottom: 70px; }
  .global-news-strip { left: 0; right: 0; bottom: 58px; height: 24px; }
  .global-news-label { padding: 0 8px; font-size: 9px; }
  .cloud-role-setting { grid-template-columns: minmax(0,1fr); }
  .cloud-role-toggle { grid-column: auto; }
  .kanban { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
  .kan-col { max-height: none; }
}

/* toast */
.toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--glass); border: 1px solid var(--line-3); border-radius: var(--r-pill); padding: 10px 18px; font-size: 12.5px; font-weight: 600; box-shadow: var(--sh-2); backdrop-filter: blur(12px); animation: toastIn .2s; }
.connection-banner { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 95; display: flex; align-items: center; gap: 10px; max-width: min(680px, calc(100vw - 28px)); padding: 10px 14px; border: 1px solid var(--warn); border-radius: var(--r-pill); background: var(--glass); box-shadow: var(--sh-2); color: var(--text); font-size: 12.5px; font-weight: 600; backdrop-filter: blur(14px); }
@keyframes toastIn { from { transform: translateY(10px); opacity: 0; } }

/* In-app notice banners — compact top-right glass toasts */
.sf-notice-wrap {
  position: fixed; top: 14px; right: 18px; left: auto; z-index: 92;
  display: flex; flex-direction: column; gap: 8px;
  width: min(320px, calc(100vw - 28px));
  max-height: min(42vh, 300px);
  padding: 0;
  pointer-events: none;
  /* Bounded for real. With overflow visible the stack grew past its own
     max-height and ran down the page, covering whatever was behind it. */
  overflow: hidden;
  transform: none;
  opacity: 0;
  transition: opacity .35s cubic-bezier(.22, 1, .36, 1),
              right .28s cubic-bezier(.22, 1, .36, 1);
}
/* A drawer owns the right-hand side, and notices were landing on top of the
   controls the reader opened it to use -- at z-index 92 over the drawer's 75,
   so they won rather than lost. They now step past the drawer's left edge.
   The width comes from --drawer-w, measured when the panel opens or is
   resized: a drawer can be normal, wide, full or dragged to an arbitrary
   width, and a guessed offset lands on top of the panel in every case the
   guess did not cover. */
body.has-drawer .sf-notice-wrap {
  right: calc(var(--drawer-w, 0px) + 18px);
}
/* Not enough room left beside the panel. Yielding is right: the bell keeps
   every notice, so nothing is lost -- whereas an offset wide enough to clear
   the panel would push the stack off-screen and lose it silently. */
body.notices-cramped .sf-notice-wrap { display: none; }
.sf-notice-wrap:has(.sf-notice:not(.leaving)) {
  opacity: 1;
}
.sf-notice {
  pointer-events: auto;
  position: relative;
  flex: 0 0 auto;
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: 6px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--line-3) 70%, transparent);
  background: color-mix(in srgb, var(--bg-2) 58%, transparent);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  color: var(--tx);
  cursor: pointer;
  text-align: left;
  font: inherit;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-14px) scale(.98);
  transition:
    opacity .45s cubic-bezier(.22, 1, .36, 1),
    transform .45s cubic-bezier(.22, 1, .36, 1),
    filter .45s ease,
    border-color .2s ease,
    background .2s ease;
}
.sf-notice.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.sf-notice.leaving {
  opacity: 0 !important;
  transform: translateY(-10px) scale(.98) !important;
  filter: blur(4px);
  pointer-events: none;
}
.sf-notice + .sf-notice {
  padding: 12px 14px;
}
.sf-notice + .sf-notice .sf-notice-body { -webkit-line-clamp: 2; }
.sf-notice + .sf-notice .sf-notice-hint { display: none; }
.sf-notice:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line-3));
  background: color-mix(in srgb, var(--bg-2) 68%, transparent);
}
.sf-notice.urgent {
  border-color: color-mix(in srgb, var(--neg) 40%, var(--line-3));
}
.sf-notice-glow {
  position: absolute; inset: auto -30% -55% -30%; height: 80%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--brand) 18%, transparent),
    transparent 70%);
  pointer-events: none;
}
.sf-notice.urgent .sf-notice-glow {
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--neg) 18%, transparent),
    transparent 70%);
}
.sf-notice-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  position: relative; z-index: 1;
}
.sf-notice-kicker {
  font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--tx-3);
}
.sf-notice-title {
  position: relative; z-index: 1;
  font-size: 14.5px; font-weight: 750; color: var(--tx);
  line-height: 1.3; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  padding-right: 4px;
}
.sf-notice-body {
  position: relative; z-index: 1;
  margin: 0; font-size: 12.5px; color: var(--tx-2); line-height: 1.4;
  white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sf-notice-hint {
  position: relative; z-index: 1;
  margin-top: 2px;
  font-size: 10.5px; font-weight: 600; color: var(--tx-3);
  letter-spacing: .15px;
}
.sf-notice-close {
  width: 28px; height: 28px; border-radius: 9px; border: 0;
  background: color-mix(in srgb, var(--bg-3) 55%, transparent); color: var(--tx-3); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  transition: background .2s, color .2s, transform .2s;
}
.sf-notice-close:hover { background: var(--bg-3); color: var(--tx); transform: scale(1.04); }
.sf-notice-close svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
  /* Keep the wrapped mobile topbar operable.  A full-width notice at top:10
     covered the notification bell and System actions, so even opening Admin
     required waiting for the toast to expire. */
  .sf-notice-wrap { top: 108px; right: 10px; left: auto; width: min(320px, calc(100vw - 20px)); max-height: min(22vh, 180px); }
  body.has-drawer .sf-notice-wrap { display: none; }
  body:has(.menu.open) .sf-notice-wrap { display: none; }
  .sf-notice { padding: 12px 12px 10px; border-radius: 14px; }
  .sf-notice-body { -webkit-line-clamp: 2; }
  /* Two at most on a phone: a third card is most of the screen. */
  .sf-notice + .sf-notice + .sf-notice { display: none; }
}

/* Topbar notification bell + inbox drawer */
.tb-bell {
  position: relative;
}
.tb-bell.has-unread {
  color: var(--brand);
}
.tb-bell-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--neg); color: #fff;
  font-size: 9px; font-weight: 800; line-height: 16px; text-align: center;
  border: 1.5px solid var(--bg-2);
  pointer-events: none;
}
.sf-inbox-toolbar {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 6px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
}
.sf-inbox-lead {
  margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tx-2);
}
.sf-inbox-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-inbox-list {
  display: flex; flex-direction: column; gap: 10px;
}
.sf-inbox-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px;
  padding: 14px 14px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line-2));
  background: color-mix(in srgb, var(--brand) 10%, var(--bg-2));
  box-shadow: inset 3px 0 0 var(--brand);
  transition:
    border-color .28s ease, background .28s ease, box-shadow .28s ease,
    opacity .28s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
  animation: sfInboxIn .4s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.sf-inbox-item.urgent {
  border-color: color-mix(in srgb, var(--neg) 40%, var(--line-2));
  background: color-mix(in srgb, var(--neg) 8%, var(--bg-2));
  box-shadow: inset 3px 0 0 var(--neg);
}
.sf-inbox-item.removing {
  opacity: 0;
  transform: translateX(16px) scale(.98);
  pointer-events: none;
}
@keyframes sfInboxIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.sf-inbox-main {
  border: 0; background: transparent; padding: 0; margin: 0;
  text-align: left; color: inherit; font: inherit; cursor: pointer; min-width: 0;
}
.sf-inbox-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.sf-inbox-title {
  font-size: 13.5px; font-weight: 750; color: var(--tx); line-height: 1.3;
}
.sf-inbox-time {
  flex: 0 0 auto; font-size: 10.5px; color: var(--tx-3); white-space: nowrap;
}
.sf-inbox-thread {
  margin-top: 4px; font-size: 11px; font-weight: 650; color: var(--brand);
}
.sf-inbox-body {
  margin-top: 6px; font-size: 12px; color: var(--tx-2); line-height: 1.4;
  white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sf-inbox-acts {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.sf-inbox-acts .btn svg { width: 14px; height: 14px; }

/* =========================================================================
   Orchestrator chat widget — floating launcher + full conversation panel
   ========================================================================= */
.orch-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--brand), #0f8fd6);
  color: #041019; border: 1px solid var(--brand-line);
  box-shadow: 0 12px 30px rgba(31, 201, 255, 0.34); cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.orch-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 40px rgba(31, 201, 255, 0.5); }
.orch-fab.active { transform: scale(.94); }
.orch-fab svg { width: 26px; height: 26px; }
.orch-fab-dot { position: absolute; top: 12px; right: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--pos); border: 2px solid #041019; }
.orch-fab-notice {
  position: absolute; top: -4px; left: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--neg); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 18px; text-align: center;
  border: 2px solid #041019; box-shadow: 0 4px 12px rgba(255, 107, 129, 0.45);
}

.orch-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 95;
  width: min(510px, calc(100vw - 32px)); height: min(600px, calc(100vh - 40px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line-3); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translateY(16px) scale(.98); transform-origin: bottom right;
  transition: opacity .2s, transform .2s;
}
.orch-panel.open { opacity: 1; transform: translateY(0) scale(1); }
.orch-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px; border-bottom: 1px solid var(--line-2); background: var(--bg-3); }
.orch-head-title { flex: 1; min-width: 0; }
.orch-head-name { display: block; font-weight: 800; font-size: 13.5px; color: var(--tx); }
/* The active-skin name is real state written by orchApplySkin. It only earns
   header room on the wide SF Chat shell, so it stays out of the way elsewhere
   rather than being a second, unstyled copy of the same word. */
.orch-head-skin, .orch-skin-label { display: none; }
.orch-head-sub { display: block; font-size: 10.5px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orch-task-state { display: inline-block; margin-top: 3px; padding: 2px 6px; border-radius: 999px; font-size: 9px; font-weight: 800; line-height: 1.2; background: var(--bg-1); color: var(--tx-3); }
.orch-task-state.running, .orch-convo-state.running { color: var(--brand); }
.orch-task-state.waiting, .orch-convo-state.waiting { color: var(--warn); }
.orch-task-state.done, .orch-convo-state.done { color: var(--pos); }
.orch-task-state.blocked, .orch-convo-state.blocked { color: var(--neg); }
.orch-task-state.closed, .orch-convo-state.closed { color: var(--tx-3); text-decoration: line-through; }
.orch-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: transparent; border: 1px solid transparent; color: var(--tx-2); cursor: pointer; }
.orch-icon-btn:hover { background: var(--bg-2); color: var(--tx); border-color: var(--line-2); }
.orch-icon-btn svg { width: 17px; height: 17px; }
.orch-icon-btn.sm { width: 26px; height: 26px; } .orch-icon-btn.sm svg { width: 14px; height: 14px; }

.orch-body { position: relative; flex: 1; display: flex; min-height: 0; }
.orch-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* Conversation drawer: solid side panel + scrim — never a full-bleed transparent overlay */
.orch-drawer-scrim {
  position: absolute; inset: 0; z-index: 2;
  border: 0; padding: 0; margin: 0; cursor: pointer;
  background: rgba(2, 6, 14, 0.52);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.orch-panel.show-convos .orch-drawer-scrim {
  opacity: 1; pointer-events: auto;
}
.orch-convos {
  position: absolute; top: 0; left: 0; bottom: 0; z-index: 3;
  width: min(300px, 86%); padding: 10px 8px;
  background: var(--orch-drawer-bg, #0a121c);
  color: var(--tx);
  border-right: 1px solid var(--line-2);
  box-shadow: 12px 0 32px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
  transform: translateX(-105%);
  transition: transform .18s ease;
  visibility: hidden;
  pointer-events: none;
}
.orch-convo-tools { display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 10px; flex: 0 0 auto; }
.orch-convo-tools-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; color: var(--tx-3); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.orch-convo-tools-head > :last-child { min-width: 22px; padding: 2px 6px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--tx-2); font-size: 9px; letter-spacing: 0; text-align: center; }
.orch-convo-search { min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--bg-1); color: var(--tx-3); }
.orch-convo-search:focus-within { border-color: var(--brand-line); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 10%, transparent); }
.orch-convo-search svg { width: 15px; height: 15px; flex: 0 0 auto; }
.orch-convo-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--tx); font: inherit; font-size: 11px; }
.orch-convo-search input::placeholder { color: var(--tx-3); }
.orch-convo-new { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--brand-line); border-radius: 11px; background: var(--brand-soft); color: var(--tx); font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.orch-convo-new:hover { filter: brightness(1.12); }
.orch-convo-new svg { width: 15px; height: 15px; color: var(--brand); }
.orch-convo-filters { display: grid; grid-template-columns: .72fr 1.4fr 1fr; padding: 3px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-1); }
.orch-convo-filters button { min-width: 0; min-height: 28px; padding: 0 6px; overflow: hidden; border: 0; border-radius: 7px; background: transparent; color: var(--tx-3); font: inherit; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.orch-convo-filters button:hover { color: var(--tx); }
.orch-convo-filters button.active { background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand-line); }
.orch-convo-list { min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand) 25%, transparent) transparent; }
.orch-convo-empty { margin: 6px 2px; padding: 16px 10px; }
.orch-panel.show-convos .orch-convos {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}
.orch-convo {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; background: transparent;
  flex: 0 0 auto;
}
.orch-convo:hover { background: var(--bg-3); }
.orch-convo.active { background: var(--brand-soft); border-color: var(--brand-line); }
.orch-convo.unread {
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  box-shadow: inset 3px 0 0 var(--brand);
}
.orch-convo.unread.active {
  background: color-mix(in srgb, var(--brand) 18%, var(--brand-soft));
}
.orch-convo-main { flex: 1; min-width: 0; }
.orch-convo-title {
  font-size: 12.5px; font-weight: 700; color: var(--tx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
  display: flex; align-items: center; gap: 6px;
}
.orch-convo.unread .orch-convo-title { font-weight: 800; }
.orch-convo-unread {
  flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--brand); color: #041019;
  font-size: 10px; font-weight: 800; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent);
}
.orch-convo-sub {
  font-size: 10.5px; color: var(--tx-3); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.orch-convo.unread .orch-convo-sub { color: var(--tx-2); }
.orch-convo-state {
  display: inline-block; margin-top: 5px; font-weight: 750; font-size: 10px;
  line-height: 1.2; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.orch-convo-acts {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  flex: 0 0 auto; opacity: 0; transition: opacity .12s;
}
.orch-convo:hover .orch-convo-acts,
.orch-convo:focus-within .orch-convo-acts,
.orch-convo.pinned .orch-convo-acts { opacity: 1; }
.orch-convo.pinned { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.orch-convo-title svg { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; color: var(--brand); }
.orch-icon-btn.sm.on { color: var(--brand); }

.orch-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.orch-day { align-self: center; flex: 0 0 auto; max-width: 100%; margin: 2px 0; padding: 0 10px; color: var(--tx-3); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.orch-msg { max-width: 86%; padding: 9px 12px; border-radius: 13px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.orch-msg.assistant { display: flex; align-items: flex-start; gap: 10px; align-self: flex-start; background: var(--bg-3); border: 1px solid var(--line-2); color: var(--tx-2); border-bottom-left-radius: 4px; }
.orch-msg.user { align-self: flex-end; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--tx); border-bottom-right-radius: 4px; }
.orch-msg-stack { min-width: 0; flex: 1; }
.orch-msg-body { white-space: pre-wrap; }
.orch-msg-body.orch-err { color: var(--neg); }
.orch-msg-face { margin-top: 0; align-self: flex-start; }
.agent-face {
  position: relative; display: inline-flex; width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden; flex: 0 0 auto; background: var(--bg-2); border: 1px solid var(--line-2);
  box-shadow: 0 1px 0 rgba(0,0,0,.04); transition: transform .18s ease, box-shadow .18s ease;
  z-index: 1; cursor: default;
  --face-zoom: 2.2; --face-cx: 50; --face-cy: 42;
}
/* Portrait webm mapped 1:1 into a tall box, then panned so (cx,cy) hits circle center. */
.agent-face video {
  position: absolute; left: 50%; top: 50%;
  height: calc(var(--face-zoom) * 100%);
  width: calc(var(--face-zoom) * 100% * 0.5625); /* 720/1280 */
  max-width: none;
  transform: translate(-50%, -50%)
    translate(calc((50 - var(--face-cx)) * 1%), calc((50 - var(--face-cy)) * 1%));
  object-fit: fill; display: block; pointer-events: none;
}
.agent-face:hover,
.agent-face.speaking,
.agent-face.playing {
  transform: scale(1.16);
  z-index: 3;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
/* Chat: no badge chrome — just a head on the message background. */
.orch-msg-face.agent-face {
  width: 46px; height: 46px; margin: -2px 0 0 -2px;
  background: transparent; border: 0; box-shadow: none; border-radius: 50%;
}
.orch-msg-face.agent-face video {
  mix-blend-mode: lighten; /* studio black plate disappears on dark chat bg */
}
.orch-msg-face.agent-face:hover,
.orch-msg-face.agent-face.speaking,
.orch-msg-face.agent-face.playing {
  transform: scale(1.12);
  box-shadow: none;
}
html[data-theme="light"] .orch-msg-face.agent-face video,
[data-theme="light"] .orch-msg-face.agent-face video {
  mix-blend-mode: normal;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 58%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 46%, #000 58%, transparent 72%);
}
@media (prefers-color-scheme: light) {
  [data-theme="auto"] .orch-msg-face.agent-face video {
    mix-blend-mode: normal;
    -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 58%, transparent 72%);
    mask-image: radial-gradient(circle at 50% 46%, #000 58%, transparent 72%);
  }
}
.agent-face.sm { width: 34px; height: 34px; }
.agent-face.lg { width: 56px; height: 56px; border-radius: 16px; }
.agent-chip { display: inline-flex; align-items: center; gap: 8px; }
.agent-chip .agent-face { width: 34px; height: 34px; }
@media (prefers-reduced-motion: reduce) {
  .agent-face:hover,
  .agent-face.speaking,
  .agent-face.playing { transform: none; }
  .agent-face:not(.orch-msg-face):hover,
  .agent-face:not(.orch-msg-face).speaking,
  .agent-face:not(.orch-msg-face).playing { box-shadow: 0 1px 0 rgba(0,0,0,.04); }
}
html[data-reduce-motion="on"] .agent-face:hover,
html[data-reduce-motion="on"] .agent-face.speaking,
html[data-reduce-motion="on"] .agent-face.playing { transform: none; }
html[data-reduce-motion="on"] .agent-face:not(.orch-msg-face):hover,
html[data-reduce-motion="on"] .agent-face:not(.orch-msg-face).speaking,
html[data-reduce-motion="on"] .agent-face:not(.orch-msg-face).playing { box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.orch-msg-shot { display: block; margin-top: 8px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line-2); line-height: 0; }
.orch-msg-shot img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: cover; }
.orch-msg-shot:hover { border-color: var(--brand-line); }
.orch-msg-meta { margin-top: 4px; font-size: 10px; color: var(--tx-3); }
.orch-msg-footer { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-2); white-space: normal; display: flex; flex-direction: column; gap: 5px; }
.orch-msg-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.orch-msg-footer-left { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.orch-msg-footer-right { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.orch-rating.compact { margin: 0; padding: 0; border: 0; }
.orch-rating.compact .orch-rating-row { min-height: 16px; }
.orch-fulfill-status {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700;
  color: var(--tx-3); text-transform: lowercase;
}
.orch-fulfill-status svg { width: 11px; height: 11px; }
.orch-fulfill-status.done { color: var(--pos); }
.orch-fulfill-status.failed { color: var(--neg); }
.orch-fulfill-status.na { color: var(--tx-3); font-weight: 600; }
.orch-msg-kind {
  font-size: 9px; font-weight: 750; letter-spacing: .4px; text-transform: uppercase;
  color: var(--tx-3);
}
.orch-msg-kind.soft { opacity: .85; }
.orch-fulfill-marks { display: inline-flex; align-items: center; gap: 4px; }
.orch-fulfill-marks.saving { opacity: .6; pointer-events: none; }
.orch-fulfill-btn {
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: 7px; background: var(--bg-1); color: var(--tx-3);
  padding: 0; cursor: pointer;
}
.orch-fulfill-btn svg { width: 12px; height: 12px; }
.orch-fulfill-btn:hover { color: var(--tx); border-color: var(--brand-line); }
.orch-fulfill-btn.active.done { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 45%, var(--line-2)); background: color-mix(in srgb, var(--pos) 12%, transparent); }
.orch-fulfill-btn.active.failed { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 45%, var(--line-2)); background: color-mix(in srgb, var(--neg) 12%, transparent); }
.orch-chain { margin-top: 4px; font-size: 10px; color: var(--tx-3); }
.orch-chain > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px;
  color: var(--brand); font-weight: 700;
}
.orch-chain > summary::-webkit-details-marker { display: none; }
.orch-chain-list { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.orch-chain-step { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 7px; align-items: start; }
.orch-chain-n {
  width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-1); border: 1px solid var(--line-2); font-size: 9px; font-weight: 750; color: var(--tx-3);
}
.orch-chain-detail { margin-top: 1px; color: var(--tx-3); font-weight: 500; }
.orch-actions { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 5px; white-space: normal; }
.orch-action { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 7px; color: var(--tx-3); font-size: 10.5px; line-height: 1.3; }
.orch-action-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--tx-3); box-shadow: 0 0 0 3px rgba(142, 166, 198, .08); }
.orch-action-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orch-action-state { font-weight: 750; white-space: nowrap; }
.orch-action.running .orch-action-mark { background: var(--brand); animation: orchThinkPulse 1.3s ease-in-out infinite; }
.orch-action.running .orch-action-state { color: var(--brand); }
.orch-action.waiting .orch-action-mark { background: var(--warn); }
.orch-action.waiting .orch-action-state { color: var(--warn); }
.orch-action.blocked .orch-action-mark { background: var(--neg); }
.orch-action.blocked .orch-action-state { color: var(--neg); }
.orch-action.done .orch-action-mark { background: var(--pos); }
.orch-action.done .orch-action-state { color: var(--pos); }
/* white-space:normal resets the parent bubble's pre-wrap so the template's
   indentation between the row and the hidden feedback area does not render as
   blank lines (which otherwise inflated the block by ~100px). */
.orch-rating { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line-2); white-space: normal; }
.orch-rating-row { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.orch-rating-label { font-size: 9px; color: var(--tx-3); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.orch-rating-stars { display: inline-flex; gap: 1px; }
.orch-rate-star { width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--tx-3); border-radius: 6px; cursor: pointer; padding: 0; }
.orch-rate-star:hover { color: var(--brand); background: var(--bg-1); }
.orch-rate-star.active { color: var(--brand); }
.orch-rate-star.active svg { fill: currentColor; }
.orch-rate-star svg { width: 13px; height: 13px; }
.orch-feedback-saved { margin-left: auto; color: var(--pos); font-size: 10px; font-weight: 700; }
.orch-rating.saving { opacity: .65; pointer-events: none; }
.orch-feedback-area { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.orch-feedback-archive { margin-top: 6px; padding: 7px 9px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 9px; }
.orch-feedback-archive-label { display: block; margin-bottom: 3px; color: var(--tx-3); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.orch-feedback-archive-text { color: var(--tx-2); font-size: 12px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.orch-feedback-text { width: 100%; min-height: 52px; resize: vertical; padding: 8px 9px; background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 9px; color: var(--tx); font: inherit; font-size: 12px; line-height: 1.4; }
.orch-feedback-text:focus { outline: none; border-color: var(--brand-line); }
.orch-feedback-actions { display: flex; justify-content: flex-end; gap: 6px; }
.orch-feedback-save, .orch-feedback-mic, .orch-feedback-edit, .orch-feedback-cancel { border: 1px solid var(--line-2); background: var(--bg-1); color: var(--tx-2); border-radius: 8px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.orch-feedback-save { padding: 6px 9px; }
.orch-feedback-edit, .orch-feedback-cancel { padding: 5px 8px; white-space: nowrap; }
.orch-feedback-mic { width: 29px; height: 29px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.orch-feedback-save:hover, .orch-feedback-mic:hover, .orch-feedback-edit:hover, .orch-feedback-cancel:hover { color: var(--tx); border-color: var(--brand-line); }
.orch-feedback-mic svg { width: 14px; height: 14px; }
.orch-feedback-mic.listening { color: var(--neg); border-color: rgba(255, 107, 129, 0.5); animation: orchMicPulse 1.1s infinite; }
.orch-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.orch-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--tx-3); animation: orchDot 1s infinite; }
.orch-dots i:nth-child(2) { animation-delay: .16s; } .orch-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes orchDot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* Public progress labels for the current request. Hidden model reasoning is
   never rendered; completed work is represented by auditable action rows. */
.orch-live { align-self: stretch; max-width: 100%; display: flex; flex-direction: column; }
.orch-live .orch-live-answer { align-self: flex-start; margin: 0; }
.orch-think-live { margin: 0 4px 7px; }
.orch-think-live-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--tx-3); margin-bottom: 2px; }
.orch-think-live-label svg { width: 12px; height: 12px; opacity: .9; animation: orchThinkPulse 1.3s ease-in-out infinite; }
.orch-think-live-text {
  display: flex; flex-direction: column; justify-content: flex-end;
  max-height: 3.5em; overflow: hidden;
  font-size: 11.5px; line-height: 1.55; color: var(--tx-3); opacity: .5; font-style: italic;
  white-space: pre-wrap; word-break: break-word;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 62%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 62%);
}
.orch-think-live-text span { display: block; }

@keyframes orchThinkPulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* Model version picker — a Cursor-style dropdown at the composer. One
   StratForge Orchestrator answers every message; the menu only chooses the
   model strength (or Auto). Management tiers and named specialists still run
   automatically in the backend and are no longer shown as menu items. */
.orch-compose { border-top: 1px solid var(--line-2); background: var(--bg-3); }
.orch-model-picker { position: relative; padding: 8px 10px 0; }
.orch-model-trigger {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-1);
  color: var(--tx-2); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.orch-model-trigger:hover { background: var(--bg-2); color: var(--tx); border-color: var(--line-3); }
.orch-model-trigger svg { width: 13px; height: 13px; color: var(--brand); }
.orch-model-trigger-label { line-height: 1; }
.orch-model-caret { font-size: 9px; color: var(--tx-3); }
.orch-model-menu {
  position: absolute; left: 10px; bottom: calc(100% + 6px); z-index: 6;
  min-width: 244px; max-width: calc(100% - 20px); padding: 6px;
  background: var(--bg-2); border: 1px solid var(--line-3); border-radius: 12px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
  display: flex; flex-direction: column; gap: 2px;
}
.orch-model-menu[hidden] { display: none; }
.orch-model-menu-head { padding: 4px 8px 6px; font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--tx-3); }
.orch-model-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 9px; border-radius: 9px; border: 1px solid transparent;
  background: transparent; color: var(--tx-2); font: inherit; cursor: pointer; text-align: left;
  transition: background .12s, border-color .12s, color .12s;
}
.orch-model-item:hover { background: var(--bg-3); color: var(--tx); }
.orch-model-item.active { background: var(--brand-soft); border-color: var(--brand-line); color: var(--tx); }
.orch-model-item-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.orch-model-item-label { font-size: 12.5px; font-weight: 700; }
.orch-model-item-sub { font-size: 10.5px; color: var(--tx-3); }
.orch-model-item-check { flex: 0 0 auto; color: var(--brand); visibility: hidden; }
.orch-model-item-check svg { width: 15px; height: 15px; }
.orch-model-item.active .orch-model-item-check { visibility: visible; }
.orch-convo-sys { font-size: 9px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--tx-3); padding: 2px 6px; border-radius: 999px; background: var(--bg-1); border: 1px solid var(--line-2); white-space: nowrap; }
.orch-convo .orch-convo-sys { opacity: 1; }

.orch-input { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px 10px; background: transparent; }
.orch-disclaimer { margin: 0; padding: 0 12px 9px; color: var(--tx-3); font-size: 10px; line-height: 1.3; text-align: center; }
.orch-disclaimer[hidden] { display: none; }
.orch-input textarea {
  flex: 1; resize: none; min-height: 40px; max-height: 120px; padding: 10px 12px;
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 11px;
  color: var(--tx); font: inherit; font-size: 13px; line-height: 1.4;
}
.orch-input textarea:focus { outline: none; border-color: var(--brand-line); }
.orch-send { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--brand); color: #041019; border: 0; cursor: pointer; }
.orch-send:hover { filter: brightness(1.08); }
.orch-send:disabled { opacity: .5; cursor: default; }
.orch-send svg { width: 18px; height: 18px; }
.orch-mic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--bg-1); color: var(--tx-2); border: 1px solid var(--line-2); cursor: pointer; }
.orch-mic:hover { background: var(--bg-2); color: var(--tx); }
.orch-mic svg { width: 18px; height: 18px; }
.orch-mic.listening { background: rgba(255, 107, 129, 0.16); color: var(--neg); border-color: rgba(255, 107, 129, 0.5); animation: orchMicPulse 1.1s infinite; }
@keyframes orchMicPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 129, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(255, 107, 129, 0); } }

@media (max-width: 760px) {
  .orch-fab { right: 14px; bottom: 70px; width: 50px; height: 50px; }
  .orch-panel,
  html[data-orch-skin] .orch-panel {
    right: 0; left: 0; bottom: 0; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0;
  }
}

/* =========================================================================
   Orchestrator skins — corporate visual systems for the floating chat
   Attribute: html[data-orch-skin="forge|terminal|slate|studio|glass|day"]
   Drawer background (--orch-drawer-bg) is always opaque in every skin.
   ========================================================================= */
.orch-panel {
  --orch-drawer-bg: #0a121c;
}
.orch-panel, .orch-fab {
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease,
    border-radius .2s ease, color .2s ease;
}
.orch-skin-wrap { position: relative; flex: 0 0 auto; }
.orch-skin-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 8;
  width: min(280px, calc(100vw - 48px)); padding: 8px;
  background: var(--bg-2); border: 1px solid var(--line-3); border-radius: 12px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
  display: flex; flex-direction: column; gap: 4px;
}
.orch-skin-menu[hidden] { display: none; }
.orch-skin-menu-head {
  padding: 2px 8px 6px; font-size: 10px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase; color: var(--tx-3);
}
.orch-skin-item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 9px;
  padding: 8px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--tx-2); font: inherit; cursor: pointer; text-align: left;
}
.orch-skin-item:hover { background: var(--bg-3); color: var(--tx); }
.orch-skin-item.active { background: var(--brand-soft); border-color: var(--brand-line); color: var(--tx); }
.orch-skin-swatch {
  width: 34px; height: 26px; border-radius: 7px; border: 1px solid var(--line-2);
  display: grid; grid-template-columns: 1fr 1.2fr; overflow: hidden; gap: 0;
}
.orch-skin-swatch i { display: block; min-height: 100%; }
.orch-skin-swatch i:first-child { border-right: 1px solid rgba(255,255,255,.08); }
.orch-skin-item-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.orch-skin-item-title { font-size: 12.5px; font-weight: 700; }
.orch-skin-item-sub { font-size: 10.5px; color: var(--tx-3); line-height: 1.3; }
.orch-skin-item-check { color: var(--brand); visibility: hidden; }
.orch-skin-item-check svg { width: 15px; height: 15px; }
.orch-skin-item.active .orch-skin-item-check { visibility: visible; }
.orch-icon-btn.on-skin { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); }

/* --- Forge · standard trading command post --- */
.orch-skin-swatch[data-swatch="forge"] { background: #0f1724; }
.orch-skin-swatch[data-swatch="forge"] i:first-child { background: #151f2e; }
.orch-skin-swatch[data-swatch="forge"] i:last-child { background: #1fc9ff; }
html[data-orch-skin="forge"] .orch-panel {
  --orch-drawer-bg: #08101a;
}

/* --- Terminal · institutional desk (Bloomberg-like) --- */
html[data-orch-skin="terminal"] .orch-panel {
  --orch-drawer-bg: #0b0d10;
  --bg-1: #0b0d10; --bg-2: #111418; --bg-3: #171b20; --bg-4: #1e242b;
  --line: #222830; --line-2: #2c343e; --line-3: #3a4450;
  --tx: #e6e9ed; --tx-2: #a8b0ba; --tx-3: #6f7884; --tx-4: #505862;
  --brand: #f0a202; --brand-2: #38bdf8; --brand-ink: #111418;
  --brand-soft: rgba(240, 162, 2, 0.12); --brand-line: rgba(240, 162, 2, 0.42);
  --pos: #22c55e; --neg: #ef4444; --warn: #f0a202;
  --font: "IBM Plex Mono", "JetBrains Mono", "SF Mono", Consolas, monospace;
  font-family: var(--font);
  border-radius: 6px;
  background: #111418;
  border-color: #2c343e;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55);
}
html[data-orch-skin="terminal"] .orch-head {
  background: #0b0d10; border-bottom-color: #2c343e; padding: 11px 12px;
}
html[data-orch-skin="terminal"] .orch-head-name {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #f0a202;
}
html[data-orch-skin="terminal"] .orch-head-sub { font-size: 10px; color: #6f7884; }
html[data-orch-skin="terminal"] .orch-task-state {
  border-radius: 3px; background: #171b20; border: 1px solid #2c343e;
  font-family: var(--font); letter-spacing: .04em;
}
html[data-orch-skin="terminal"] .orch-icon-btn { border-radius: 4px; }
html[data-orch-skin="terminal"] .orch-msgs { background: #0e1114; gap: 8px; }
html[data-orch-skin="terminal"] .orch-msg {
  border-radius: 4px; font-size: 12.5px; line-height: 1.5; max-width: 92%;
}
html[data-orch-skin="terminal"] .orch-msg.assistant {
  background: #171b20; border-color: #2c343e; border-bottom-left-radius: 4px;
}
html[data-orch-skin="terminal"] .orch-msg.user {
  background: rgba(240, 162, 2, 0.1); border-color: rgba(240, 162, 2, 0.35);
  border-bottom-right-radius: 4px;
}
html[data-orch-skin="terminal"] .orch-compose { background: #0b0d10; border-top-color: #2c343e; }
html[data-orch-skin="terminal"] .orch-input textarea,
html[data-orch-skin="terminal"] .orch-mic,
html[data-orch-skin="terminal"] .orch-send,
html[data-orch-skin="terminal"] .orch-model-trigger,
html[data-orch-skin="terminal"] .orch-model-menu,
html[data-orch-skin="terminal"] .orch-convo,
html[data-orch-skin="terminal"] .orch-skin-menu,
html[data-orch-skin="terminal"] .orch-skin-item {
  border-radius: 4px; font-family: var(--font);
}
html[data-orch-skin="terminal"] .orch-send { background: #f0a202; color: #111418; }
html[data-orch-skin="terminal"] .orch-msg-face.agent-face {
  border-radius: 4px; border: 1px solid #2c343e; width: 40px; height: 40px;
}
html[data-orch-skin="terminal"] .orch-msg-face.agent-face video { mix-blend-mode: normal; }
html[data-orch-skin="terminal"] .orch-fab {
  border-radius: 6px; background: #111418; color: #f0a202;
  border: 1px solid #f0a202; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
html[data-orch-skin="terminal"] .orch-fab-dot { border-color: #111418; background: #22c55e; }
html[data-orch-skin="terminal"] .orch-drawer-scrim { background: rgba(0, 0, 0, 0.55); }
.orch-skin-swatch[data-swatch="terminal"] { background: #111418; }
.orch-skin-swatch[data-swatch="terminal"] i:first-child { background: #0b0d10; }
.orch-skin-swatch[data-swatch="terminal"] i:last-child { background: #f0a202; }

/* --- Slate · modern product UI (Linear / Vercel) --- */
html[data-orch-skin="slate"] .orch-panel {
  --orch-drawer-bg: #0a0a0b;
  --bg-1: #0a0a0b; --bg-2: #111113; --bg-3: #18181b; --bg-4: #222226;
  --line: #1f1f23; --line-2: #2a2a30; --line-3: #3f3f46;
  --tx: #fafafa; --tx-2: #a1a1aa; --tx-3: #71717a; --tx-4: #52525b;
  --brand: #a78bfa; --brand-2: #60a5fa; --brand-ink: #0a0a0b;
  --brand-soft: rgba(167, 139, 250, 0.12); --brand-line: rgba(167, 139, 250, 0.4);
  --pos: #4ade80; --neg: #fb7185; --warn: #fbbf24;
  border-radius: 12px;
  background: #111113;
  border: 1px solid #2a2a30;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
html[data-orch-skin="slate"] .orch-head {
  background: #0a0a0b; border-bottom-color: #1f1f23; padding: 12px 14px;
}
html[data-orch-skin="slate"] .orch-head-name {
  font-size: 13.5px; font-weight: 650; letter-spacing: -.02em; color: #fafafa;
}
html[data-orch-skin="slate"] .orch-task-state {
  border-radius: 6px; background: #18181b; border: 1px solid #2a2a30;
}
html[data-orch-skin="slate"] .orch-icon-btn { border-radius: 8px; }
html[data-orch-skin="slate"] .orch-msgs { background: #0c0c0e; padding: 16px; gap: 12px; }
html[data-orch-skin="slate"] .orch-msg {
  border-radius: 10px; font-size: 13px; line-height: 1.5; max-width: 88%;
}
html[data-orch-skin="slate"] .orch-msg.assistant {
  background: #18181b; border-color: #2a2a30; border-bottom-left-radius: 4px;
}
html[data-orch-skin="slate"] .orch-msg.user {
  background: rgba(167, 139, 250, 0.14); border-color: rgba(167, 139, 250, 0.35);
  border-bottom-right-radius: 4px;
}
html[data-orch-skin="slate"] .orch-compose { background: #0a0a0b; border-top-color: #1f1f23; }
html[data-orch-skin="slate"] .orch-input textarea {
  border-radius: 10px; background: #18181b; border-color: #2a2a30;
}
html[data-orch-skin="slate"] .orch-send {
  border-radius: 10px; background: #a78bfa; color: #0a0a0b;
}
html[data-orch-skin="slate"] .orch-mic { border-radius: 10px; }
html[data-orch-skin="slate"] .orch-fab {
  background: #18181b; color: #fafafa; border: 1px solid #3f3f46;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
html[data-orch-skin="slate"] .orch-fab:hover {
  border-color: #a78bfa; color: #a78bfa;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
}
html[data-orch-skin="slate"] .orch-fab-dot { border-color: #18181b; background: #4ade80; }
html[data-orch-skin="slate"] .orch-drawer-scrim { background: rgba(0, 0, 0, 0.55); }
.orch-skin-swatch[data-swatch="slate"] { background: #111113; }
.orch-skin-swatch[data-swatch="slate"] i:first-child { background: #0a0a0b; }
.orch-skin-swatch[data-swatch="slate"] i:last-child { background: #a78bfa; }

/* --- Studio · calm enterprise (Stripe / Notion) --- */
html[data-orch-skin="studio"] .orch-panel {
  --orch-drawer-bg: #f6f7f9;
  --bg-1: #f6f7f9; --bg-2: #ffffff; --bg-3: #eef0f4; --bg-4: #e4e7ed;
  --line: #e6e8ee; --line-2: #d8dce5; --line-3: #c3c9d5;
  --tx: #0f172a; --tx-2: #475569; --tx-3: #64748b; --tx-4: #94a3b8;
  --brand: #635bff; --brand-2: #0a2540; --brand-ink: #ffffff;
  --brand-soft: rgba(99, 91, 255, 0.1); --brand-line: rgba(99, 91, 255, 0.35);
  --pos: #0d9488; --neg: #e11d48; --warn: #d97706;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #d8dce5;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12), 0 1px 0 rgba(255,255,255,.9);
}
html[data-orch-skin="studio"] .orch-head {
  background: #ffffff; border-bottom-color: #e6e8ee; padding: 14px 16px;
}
html[data-orch-skin="studio"] .orch-head-name {
  font-size: 14px; font-weight: 650; letter-spacing: -.01em; color: #0a2540;
}
html[data-orch-skin="studio"] .orch-head-sub { color: #64748b; }
html[data-orch-skin="studio"] .orch-task-state {
  border-radius: 6px; background: #f6f7f9; border: 1px solid #e6e8ee; color: #475569;
}
html[data-orch-skin="studio"] .orch-icon-btn { border-radius: 8px; color: #475569; }
html[data-orch-skin="studio"] .orch-icon-btn:hover { background: #eef0f4; color: #0f172a; }
html[data-orch-skin="studio"] .orch-msgs { background: #f6f7f9; padding: 18px; gap: 14px; }
html[data-orch-skin="studio"] .orch-msg {
  border-radius: 12px; line-height: 1.55; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
html[data-orch-skin="studio"] .orch-msg.assistant {
  background: #ffffff; border-color: #e6e8ee; color: #334155; border-bottom-left-radius: 4px;
}
html[data-orch-skin="studio"] .orch-msg.user {
  background: rgba(99, 91, 255, 0.1); border-color: rgba(99, 91, 255, 0.28); color: #0f172a;
  border-bottom-right-radius: 4px;
}
html[data-orch-skin="studio"] .orch-compose { background: #ffffff; border-top-color: #e6e8ee; }
html[data-orch-skin="studio"] .orch-input textarea {
  background: #f6f7f9; border-color: #d8dce5; color: #0f172a; border-radius: 12px;
}
html[data-orch-skin="studio"] .orch-send { background: #635bff; color: #ffffff; border-radius: 12px; }
html[data-orch-skin="studio"] .orch-mic { background: #f6f7f9; color: #475569; border-radius: 12px; }
html[data-orch-skin="studio"] .orch-msg-face.agent-face video {
  mix-blend-mode: normal;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 58%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 46%, #000 58%, transparent 72%);
}
html[data-orch-skin="studio"] .orch-fab {
  background: #635bff; color: #ffffff; border-color: rgba(99, 91, 255, 0.4);
  box-shadow: 0 12px 28px rgba(99, 91, 255, 0.35);
}
html[data-orch-skin="studio"] .orch-fab-dot { border-color: #635bff; background: #0d9488; }
html[data-orch-skin="studio"] .orch-drawer-scrim { background: rgba(15, 23, 42, 0.28); }
html[data-orch-skin="studio"] .orch-skin-menu {
  background: #ffffff; border-color: #d8dce5;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}
html[data-orch-skin="studio"] .orch-convo:hover { background: #eef0f4; }
.orch-skin-swatch[data-swatch="studio"] { background: #f6f7f9; }
.orch-skin-swatch[data-swatch="studio"] i:first-child { background: #ffffff; border-right-color: #d8dce5; }
.orch-skin-swatch[data-swatch="studio"] i:last-child { background: #635bff; }

/* --- Glass · restrained acrylic (Fluent / macOS) --- */
html[data-orch-skin="glass"] .orch-panel {
  --orch-drawer-bg: #121820;
  --bg-1: rgba(18, 24, 32, 0.88); --bg-2: rgba(20, 28, 40, 0.82); --bg-3: rgba(28, 38, 52, 0.9);
  --line: rgba(255,255,255,0.08); --line-2: rgba(255,255,255,0.12); --line-3: rgba(255,255,255,0.2);
  --tx: #f3f6fb; --tx-2: #c5d0e0; --tx-3: #8b9bb0;
  --brand: #5b9cff; --brand-ink: #0b1524;
  --brand-soft: rgba(91, 156, 255, 0.16); --brand-line: rgba(91, 156, 255, 0.42);
  border-radius: 18px;
  background: rgba(16, 22, 32, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  backdrop-filter: blur(24px) saturate(1.25);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
}
html[data-orch-skin="glass"] .orch-head {
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
html[data-orch-skin="glass"] .orch-head-name { font-weight: 700; color: #f3f6fb; }
html[data-orch-skin="glass"] .orch-msgs { background: transparent; }
html[data-orch-skin="glass"] .orch-msg.assistant {
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12);
}
html[data-orch-skin="glass"] .orch-msg.user {
  background: rgba(91, 156, 255, 0.18); border-color: rgba(91, 156, 255, 0.35);
}
html[data-orch-skin="glass"] .orch-compose {
  background: rgba(255, 255, 255, 0.04);
  border-top-color: rgba(255, 255, 255, 0.1);
}
html[data-orch-skin="glass"] .orch-input textarea {
  background: rgba(0, 0, 0, 0.28); border-color: rgba(255, 255, 255, 0.14);
}
html[data-orch-skin="glass"] .orch-send { background: #5b9cff; color: #0b1524; }
html[data-orch-skin="glass"] .orch-convos {
  background: #121820;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-orch-skin="glass"] .orch-fab {
  background: rgba(18, 24, 32, 0.75); color: #5b9cff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}
html[data-orch-skin="glass"] .orch-fab-dot { border-color: #121820; }
html[data-orch-skin="glass"] .orch-drawer-scrim { background: rgba(2, 6, 14, 0.45); }
.orch-skin-swatch[data-swatch="glass"] { background: rgba(120, 140, 170, 0.35); }
.orch-skin-swatch[data-swatch="glass"] i:first-child { background: rgba(255,255,255,0.22); }
.orch-skin-swatch[data-swatch="glass"] i:last-child { background: #5b9cff; }

/* --- Day · light operations desk --- */
html[data-orch-skin="day"] .orch-panel {
  --orch-drawer-bg: #ffffff;
  --bg-1: #f4f6f8; --bg-2: #ffffff; --bg-3: #eef1f5; --bg-4: #e3e8ef;
  --line: #e2e8f0; --line-2: #d0d7e2; --line-3: #b6c0cf;
  --tx: #0f172a; --tx-2: #334155; --tx-3: #64748b; --tx-4: #94a3b8;
  --brand: #0f766e; --brand-2: #0369a1; --brand-ink: #ffffff;
  --brand-soft: rgba(15, 118, 110, 0.1); --brand-line: rgba(15, 118, 110, 0.35);
  --pos: #059669; --neg: #dc2626; --warn: #d97706;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #d0d7e2;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
}
html[data-orch-skin="day"] .orch-head {
  background: #ffffff; border-bottom-color: #e2e8f0;
}
html[data-orch-skin="day"] .orch-head-name { color: #0f172a; font-weight: 750; }
html[data-orch-skin="day"] .orch-msgs { background: #f4f6f8; }
html[data-orch-skin="day"] .orch-msg.assistant {
  background: #ffffff; border-color: #d0d7e2; color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
html[data-orch-skin="day"] .orch-msg.user {
  background: rgba(15, 118, 110, 0.1); border-color: rgba(15, 118, 110, 0.3); color: #0f172a;
}
html[data-orch-skin="day"] .orch-compose { background: #ffffff; border-top-color: #e2e8f0; }
html[data-orch-skin="day"] .orch-input textarea {
  background: #f4f6f8; border-color: #d0d7e2; color: #0f172a;
}
html[data-orch-skin="day"] .orch-send { background: #0f766e; color: #ffffff; }
html[data-orch-skin="day"] .orch-mic { background: #f4f6f8; color: #334155; }
html[data-orch-skin="day"] .orch-msg-face.agent-face video {
  mix-blend-mode: normal;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 58%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 46%, #000 58%, transparent 72%);
}
html[data-orch-skin="day"] .orch-fab {
  background: #0f766e; color: #ffffff; border-color: rgba(15, 118, 110, 0.4);
  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.3);
}
html[data-orch-skin="day"] .orch-fab-dot { border-color: #0f766e; background: #059669; }
html[data-orch-skin="day"] .orch-drawer-scrim { background: rgba(15, 23, 42, 0.28); }
html[data-orch-skin="day"] .orch-skin-menu {
  background: #ffffff; border-color: #d0d7e2;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}
.orch-skin-swatch[data-swatch="day"] { background: #f4f6f8; }
.orch-skin-swatch[data-swatch="day"] i:first-child { background: #ffffff; border-right-color: #d0d7e2; }
.orch-skin-swatch[data-swatch="day"] i:last-child { background: #0f766e; }

/* North Star 2026 goal progress (Overview) */
.ns-panel .panel-b { padding: 16px 18px; }
.ns-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ns-kick { font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brand); font-weight: 800; }
.ns-title { font-size: 15px; font-weight: 800; color: var(--tx); margin-top: 2px; }
.ns-bar { height: 12px; border-radius: 999px; background: var(--bg-1); border: 1px solid var(--line-2); overflow: hidden; }
.ns-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), #0f8fd6); transition: width .5s; min-width: 2px; }
.ns-fill.pos { background: linear-gradient(90deg, var(--pos), #16a34a); }
.ns-fill.neg { background: linear-gradient(90deg, var(--neg), #b91c1c); }
.ns-stats { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ns-prog { font-size: 20px; font-weight: 800; }
.ns-sep { color: var(--tx-3); }
.ns-target { font-size: 15px; font-weight: 700; color: var(--tx-2); }
.ns-pct { font-size: 12.5px; font-weight: 700; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); padding: 1px 8px; border-radius: 999px; }
.ns-remain { font-size: 12.5px; color: var(--tx-3); margin-left: auto; }
.ns-foot { font-size: 11.5px; margin-top: 8px; }

/* Theme picker (top menu → Тема приложения) */
.theme-picker { gap: 6px; }
.theme-opt { width: 100%; text-align: left; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; color: inherit; font: inherit; padding: 12px 14px; }
.theme-opt:hover { background: var(--bg-3); }
.theme-opt.active { border-color: var(--brand-line); background: var(--brand-soft); }
.theme-opt .row-val svg { width: 18px; height: 18px; color: var(--brand); }

/* =====================================================================
   Design settings drawer (Тема · Фон · Плотность · Движение)
   ===================================================================== */
.settings-group { margin-bottom: 18px; }
.settings-group:last-of-type { margin-bottom: 0; }
.settings-group-title { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--tx-3); font-weight: 800; margin: 2px 2px 8px; }
.settings-opts { display: flex; flex-direction: column; gap: 6px; }
.settings-note { font-size: 11.5px; color: var(--tx-3); margin: 8px 2px 0; line-height: 1.5; }
.theme-opt .row-main { display: flex; flex-direction: column; gap: 2px; }
.theme-opt .row-title { font-size: 13px; font-weight: 700; color: var(--tx); }
.theme-opt .row-sub { font-size: 11.5px; color: var(--tx-3); }
.theme-opt .row-val { margin-left: auto; min-width: 18px; display: flex; align-items: center; justify-content: flex-end; }

/* =====================================================================
   Compact UI density — trims paddings and gaps app-wide
   ===================================================================== */
[data-density="compact"] .content { padding: 14px; gap: 12px; }
[data-density="compact"] .panel-b { padding: 13px; }
[data-density="compact"] .panel-h { padding: 11px 14px; }
[data-density="compact"] .kpi { padding: 12px 14px; }
[data-density="compact"] .grid { gap: 12px; }
[data-density="compact"] .kpi-val { font-size: 23px; }

/* =====================================================================
   Live "online" pulse for status dots (calm, GPU-cheap, motion-aware)
   ===================================================================== */
@keyframes sfChipPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45); }
  50%      { box-shadow: 0 0 0 4px rgba(52, 211, 153, 0); }
}
@keyframes sfRailPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
}
.topbar .chip.ok .dot { animation: sfChipPulse 2.6s ease-in-out infinite; }
.rail-dot { animation: sfRailPulse 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .topbar .chip.ok .dot, .rail-dot { animation: none; }
}
[data-reduce-motion="on"] .topbar .chip.ok .dot,
[data-reduce-motion="on"] .rail-dot,
[data-reduce-motion="on"] .global-news-track { animation: none; transform: none; }

/* Unified current account sign-in. */
html.auth-locked .rail,
html.auth-locked .topbar,
html.auth-locked .global-news-strip { display: none !important; }
/* The application shell remains a two-column grid even after the rail is
   hidden. Without collapsing that grid, auth and Device Confirmation are
   squeezed into the old 240px rail column. */
html.auth-locked .app { display: block !important; width: 100%; min-height: 100vh; }
html.auth-locked .main { margin-left: 0 !important; min-height: 100vh; }
html.auth-locked .main,
html.auth-locked .content { width: 100% !important; }
html.auth-locked .content { padding: 0 !important; min-height: 100vh; }
.auth-screen {
  min-height: 100vh; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  background: radial-gradient(700px 420px at 50% 15%, rgba(31,201,255,.12), transparent 70%);
}
.auth-card {
  width: min(100%, 430px); padding: 28px; border: 1px solid var(--line-2); border-radius: 20px;
  background: color-mix(in srgb, var(--bg-2) 94%, transparent); box-shadow: var(--sh-2); backdrop-filter: blur(18px);
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.auth-brand img { width: 42px; height: 42px; object-fit: contain; }
.auth-brand div { display: flex; flex-direction: column; gap: 2px; }
.auth-brand strong { font-size: 16px; color: var(--tx); }
.auth-brand span { font-size: 11px; color: var(--tx-3); text-transform: uppercase; letter-spacing: .08em; }
.auth-copy h1 { margin: 0 0 10px; font-size: clamp(24px, 7vw, 32px); letter-spacing: -.03em; }
.auth-copy p { margin: 0 0 22px; color: var(--tx-2); font-size: 13.5px; line-height: 1.65; }
.auth-main-action { width: 100%; min-height: 46px; justify-content: center; }
.auth-form { display: grid; gap: 12px; }
.auth-wait { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 58px; color: var(--tx-2); font-size: 13px; }
.nt-notice { margin: 10px 0; padding: 11px 13px; border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.45; }
.nt-notice-action { background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--tx); }
.nt-notice-warn { background: color-mix(in srgb, #ff6b81 12%, transparent); border: 1px solid color-mix(in srgb, #ff6b81 38%, transparent); color: var(--tx); }
.auth-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 4px 0 14px; }
.auth-qr-frame { box-sizing: border-box; padding: 10px; border-radius: var(--r-md); background: #ffffff; border: 1px solid var(--brand-line); line-height: 0; width: min(228px, 100%); }
/* A fixed pixel width gets squeezed by the login card and renders a
   non-square box. Let the module grid stay square at whatever width the
   card actually grants. */
.auth-qr-frame svg { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.auth-qr-copy { margin: 0; text-align: center; font-size: 12.5px; color: var(--tx-2); max-width: 300px; }
.auth-qr-life { font-size: 11px; color: var(--tx-3); min-height: 14px; }
.auth-qr-fallback { font-size: 11.5px; color: var(--tx-3); text-decoration: underline; text-underline-offset: 2px; }
.auth-qr-fallback:hover { color: var(--tx-2); }
@media (max-width: 420px) { .auth-qr-frame { width: min(188px, 100%); } }
.auth-manual-fallback { margin-top: 12px; }
.auth-manual-fallback > summary { cursor: pointer; color: var(--tx-3); font-size: 11.5px; text-align: center; list-style: none; }
.auth-manual-fallback > summary::-webkit-details-marker { display: none; }
.auth-manual-fallback > summary:hover { color: var(--tx-2); }
.auth-security { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--tx-3); font-size: 10.5px; line-height: 1.6; text-align: center; }

/* ---- starting access grant ------------------------------------------------ */
/* One quiet chip, never a banner: the product stays in front, the remaining
   time is available at a glance. */
.trial-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 5px 10px; min-width: 190px; cursor: pointer;
  border-color: var(--brand-line); background: var(--brand-soft); color: var(--tx);
}
.trial-chip #chip-trial-text { font-size: 11px; line-height: 1.2; white-space: nowrap; }
.trial-bar {
  display: block; width: 100%; height: 3px; border-radius: 3px;
  background: color-mix(in srgb, var(--tx-3) 30%, transparent); overflow: hidden;
}
.trial-bar-fill {
  display: block; height: 100%; width: 0%; border-radius: 3px;
  background: linear-gradient(90deg, #35a7ff, #a36eff); transition: width .4s ease;
}
.trial-chip.low { border-color: color-mix(in srgb, #ffb703 60%, transparent); background: color-mix(in srgb, #ffb703 12%, transparent); }
.trial-chip.low .trial-bar-fill { background: linear-gradient(90deg, #ffb703, #ff8f3f); }
.trial-chip.spent { border-color: color-mix(in srgb, #ff6b81 55%, transparent); background: color-mix(in srgb, #ff6b81 12%, transparent); }
.trial-chip.spent .trial-bar-fill { background: #ff6b81; }
@media (max-width: 1500px) { .trial-chip { min-width: 0; } .trial-chip #chip-trial-text { max-width: 150px; overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 1100px) { #chip-trial { display: none; } }

.trial-gate-bar {
  height: 6px; margin: 2px 0 16px; border-radius: 6px; overflow: hidden;
  background: color-mix(in srgb, var(--tx-3) 26%, transparent);
}
.trial-gate-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #ff6b81, #a36eff); }

.access-card {
  padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 14px;
  background: var(--bg-2); margin-bottom: 6px;
}
.access-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.access-head strong { font-size: 15px; color: var(--tx); }
.access-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 10px; }
.access-metrics > div { display: flex; flex-direction: column; gap: 3px; }
.access-metrics dt { color: var(--tx-3); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.access-metrics dd { margin: 0; color: var(--tx); font-size: 16px; }
@media (max-width: 620px) { .access-metrics { grid-template-columns: 1fr; } }

/* ---- Login / registration: the premium cosmic onboarding ------------------ */
/* One quiet card on a branded sky. The background carries the brand, the form
   stays calm: large type, few controls, one primary action per screen. */
.auth-cosmos {
  position: relative; overflow: hidden; isolation: isolate;
  background: #05070f;
}
.auth-sky {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(90,140,255,.20), transparent 68%),
    radial-gradient(760px 520px at 84% 22%, rgba(150,86,255,.16), transparent 70%),
    radial-gradient(900px 460px at 12% 78%, rgba(31,201,255,.12), transparent 72%),
    radial-gradient(1400px 380px at 50% 118%, rgba(120,90,255,.30), transparent 62%),
    #05070f;
}
/* Starfield and the faint orbital lines behind the card. Both are painted, not
   images, so they cost nothing to ship and scale with the viewport. */
.auth-sky::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 27% 9%, rgba(190,215,255,.7), transparent 60%),
    radial-gradient(1.8px 1.8px at 8% 62%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.1px 1.1px at 33% 44%, rgba(200,220,255,.55), transparent 60%),
    radial-gradient(2.2px 2.2px at 18% 33%, rgba(120,190,255,.9), transparent 60%),
    radial-gradient(1.3px 1.3px at 46% 12%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 26%, rgba(210,225,255,.65), transparent 60%),
    radial-gradient(1.1px 1.1px at 68% 8%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(2px 2px at 77% 38%, rgba(160,205,255,.8), transparent 60%),
    radial-gradient(1.4px 1.4px at 88% 16%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 93% 47%, rgba(200,220,255,.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 82% 63%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 63% 71%, rgba(190,215,255,.5), transparent 60%),
    radial-gradient(1.1px 1.1px at 38% 78%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.7px 1.7px at 22% 86%, rgba(170,210,255,.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 5% 41%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 96% 74%, rgba(210,225,255,.55), transparent 60%),
    radial-gradient(1.1px 1.1px at 52% 57%, rgba(255,255,255,.35), transparent 60%),
    /* two wide, very faint orbital arcs sweeping across the frame */
    radial-gradient(120% 90% at 50% 120%, transparent 61.5%, rgba(126,170,255,.14) 62%, transparent 62.6%),
    radial-gradient(150% 120% at 10% -10%, transparent 55.5%, rgba(126,170,255,.10) 56%, transparent 56.6%),
    radial-gradient(150% 120% at 92% -14%, transparent 58.5%, rgba(126,170,255,.09) 59%, transparent 59.6%);
  background-repeat: no-repeat;
}
/* A calm grid, only strong enough to give the sky depth. */
.auth-cosmos > .auth-sky {
  background-image:
    repeating-linear-gradient(0deg, rgba(126,160,255,.045) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, rgba(126,160,255,.045) 0 1px, transparent 1px 96px),
    radial-gradient(1100px 620px at 50% -8%, rgba(90,140,255,.20), transparent 68%),
    radial-gradient(760px 520px at 84% 22%, rgba(150,86,255,.16), transparent 70%),
    radial-gradient(900px 460px at 12% 78%, rgba(31,201,255,.12), transparent 72%),
    radial-gradient(1400px 380px at 50% 118%, rgba(120,90,255,.30), transparent 62%);
  background-color: #05070f;
}
/* The planet horizon: one soft arc at the bottom, never a busy illustration. */
/* The planet: a dark body with a bright lit rim, as in the reference. */
.auth-sky::after {
  content: ""; position: absolute; left: 50%; bottom: -52vh; transform: translateX(-50%);
  width: 210vw; height: 74vh; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background:
    radial-gradient(130% 160% at 50% 100%, rgba(126,96,255,.34), rgba(20,16,52,.55) 45%, rgba(6,8,20,.92) 72%);
  border-top: 2px solid rgba(186,214,255,.55);
  box-shadow:
    0 -1px 26px rgba(150,190,255,.42),
    0 -18px 90px rgba(120,90,255,.34);
}
.auth-stage {
  position: relative; z-index: 1; width: min(100%, 560px);
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.auth-stage-wide { width: min(100%, 960px); }
.auth-mark { display: flex; align-items: center; gap: 18px; }
.auth-mark img { width: 72px; height: 72px; object-fit: contain; }
.auth-mark div { display: flex; flex-direction: column; gap: 4px; }
.auth-mark strong { font-size: 46px; line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.auth-mark span { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: rgba(190,205,255,.66); }
/* Inside a card the same lockup stays small; only the hero wears the full size. */
.auth-card-lux ~ .auth-mark, .auth-stage:not(.auth-stage-wide) .auth-mark img { width: 56px; height: 56px; }
.auth-stage:not(.auth-stage-wide) .auth-mark strong { font-size: 34px; }
.auth-card-lux {
  width: 100%; padding: 30px clamp(20px, 4vw, 34px); border-radius: 22px;
  border: 1px solid rgba(126,160,255,.26);
  background: linear-gradient(180deg, rgba(15,20,42,.94), rgba(9,12,28,.94));
  box-shadow: 0 30px 90px rgba(2,4,16,.62), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
}
.auth-cosmos .auth-copy { text-align: center; }
.auth-cosmos .auth-copy h1 { margin: 0 0 8px; font-size: clamp(23px, 3.4vw, 30px); color: #fff; }
.auth-cosmos .auth-copy p { margin: 0 0 20px; color: rgba(197,209,240,.78); }
.auth-error {
  margin: 0 0 16px; padding: 10px 13px; border-radius: 12px; font-size: 12.5px; line-height: 1.5;
  border: 1px solid rgba(255,107,129,.42); background: rgba(255,107,129,.12); color: #ffd9de;
}
.auth-note {
  margin: 0 0 16px; padding: 10px 13px; border-radius: 12px; font-size: 12.5px; line-height: 1.5;
  border: 1px solid rgba(126,160,255,.26); background: rgba(126,160,255,.10); color: rgba(214,224,255,.9);
}

/* Welcome */
.auth-hero { width: 100%; text-align: center; }
.auth-hero h1 { margin: 10px 0 12px; font-size: clamp(30px, 3.9vw, 56px); letter-spacing: -.03em; color: #fff; }
.auth-hero-sub { margin: 0 0 40px; color: rgba(197,209,240,.80); font-size: clamp(14px, 1.35vw, 19px); }
.auth-hero-seal { display: flex; justify-content: center; margin: 30px 0 14px; color: rgba(170,200,255,.55); }
.auth-hero-seal svg { width: 34px; height: 34px; }
.auth-hero-foot { margin: 0; color: rgba(160,175,215,.62); font-size: 14px; line-height: 1.7; }
.auth-choice {
  display: grid; grid-template-columns: repeat(2, minmax(0, 336px));
  justify-content: center; gap: 56px;
}
.auth-choice-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  min-height: 330px; padding: 34px 26px; border-radius: 20px; cursor: pointer; text-align: center;
  border: 1px solid rgba(88,164,255,.42);
  background: linear-gradient(180deg, rgba(18,32,66,.82), rgba(10,16,36,.82));
  color: #fff; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.auth-choice-card.accent { border-color: rgba(163,110,255,.46); background: linear-gradient(180deg, rgba(30,20,60,.82), rgba(14,10,32,.82)); }
.auth-choice-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(6,10,30,.55); }
.auth-choice-card:focus-visible { outline: 3px solid rgba(120,180,255,.65); outline-offset: 3px; }
.auth-choice-icon {
  display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%;
  font-size: 34px; color: #7fc0ff; border: 1px solid rgba(120,180,255,.4); background: rgba(30,60,120,.35);
}
.auth-choice-card.accent .auth-choice-icon { color: #c39dff; border-color: rgba(163,110,255,.42); background: rgba(60,36,110,.35); }
.auth-choice-card strong { font-size: 23px; letter-spacing: -.01em; }
.auth-choice-card > span:not(.auth-choice-icon):not(.auth-choice-go) { color: rgba(190,203,238,.75); font-size: 15px; line-height: 1.55; max-width: 240px; }
.auth-choice-go {
  display: grid; place-items: center; width: 62px; height: 62px; margin-top: 4px; border-radius: 50%;
  border: 1px solid rgba(120,180,255,.34); color: #9ecbff; font-size: 20px;
}

/* Login methods */
.auth-qr-panel {
  display: flex; align-items: center; gap: 20px; margin-bottom: 18px;
  padding: 16px; border-radius: 18px; border: 1px solid rgba(126,160,255,.22); background: rgba(16,22,46,.55);
}
.auth-qr-panel .auth-qr-copy { display: flex; flex-direction: column; gap: 5px; text-align: left; margin: 0; max-width: none; }
.auth-qr-panel .auth-qr-copy strong { color: #fff; font-size: 15px; }
.auth-qr-panel .auth-qr-copy span { color: rgba(190,203,238,.72); font-size: 12.5px; line-height: 1.45; }
.auth-qr-badge {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 12px;
  border: 1px solid rgba(120,180,255,.34); background: rgba(30,60,120,.3); color: #7fc0ff; font-size: 18px;
}
.auth-qr-frame.solo { margin: 0 auto 8px; }
.auth-qr-panel .auth-qr-frame { flex: 0 0 auto; width: min(196px, 46%); padding: 12px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(126,160,255,.35), 0 18px 40px rgba(4,8,24,.55); }
.auth-qr-loading { display: grid; place-items: center; aspect-ratio: 1 / 1; color: #384360; font-size: 12px; }
.auth-or { display: flex; align-items: center; gap: 14px; margin: 18px 0; color: rgba(160,175,215,.6); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: rgba(126,160,255,.2); }
.auth-methods { display: grid; gap: 12px; }
.auth-method {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 12px 16px;
  border-radius: 14px; cursor: pointer; text-align: left; color: #fff; font-size: 14.5px;
  border: 1px solid rgba(126,160,255,.24); background: rgba(16,22,46,.7);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.auth-method:hover:not([disabled]) { border-color: rgba(126,190,255,.55); background: rgba(22,32,64,.85); transform: translateY(-1px); }
.auth-method:focus-visible { outline: 3px solid rgba(120,180,255,.65); outline-offset: 2px; }
.auth-method[disabled] { opacity: .45; cursor: not-allowed; }
.auth-method.telegram { border-color: rgba(64,150,255,.42); }
.auth-method.email { border-color: rgba(163,110,255,.42); }
.auth-method-label { flex: 1; }
.auth-method-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(30,60,120,.42); color: #9ecbff; font-size: 16px; }
.auth-method.google .auth-method-icon { background: #fff; color: #4285f4; font-weight: 700; }
.auth-method.email .auth-method-icon { background: rgba(60,36,110,.42); color: #c39dff; }
.auth-method-go { color: rgba(158,203,255,.75); }
.auth-method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.auth-method-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px;
  border-radius: 16px; cursor: pointer; color: #fff; font-size: 13px; text-align: center;
  border: 1px solid rgba(126,160,255,.24); background: rgba(16,22,46,.7);
  transition: border-color .16s ease, transform .16s ease;
}
.auth-method-card:hover:not([disabled]) { border-color: rgba(126,190,255,.55); transform: translateY(-2px); }
.auth-method-card:focus-visible { outline: 3px solid rgba(120,180,255,.65); outline-offset: 2px; }
.auth-method-card[disabled] { opacity: .45; cursor: not-allowed; }
.auth-method-card.google .auth-method-icon { background: #fff; color: #4285f4; font-weight: 700; }
.auth-method-card.email .auth-method-icon { background: rgba(60,36,110,.42); color: #c39dff; }

/* Registration */
.auth-steps { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.auth-step-label {
  padding: 6px 14px; border-radius: 999px; font-size: 12px; color: rgba(214,224,255,.9);
  border: 1px solid rgba(126,160,255,.26); background: rgba(16,22,46,.7);
}
.auth-step-dots { display: flex; align-items: center; gap: 6px; }
.auth-step-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(126,160,255,.26); }
.auth-step-dot.done { background: rgba(126,190,255,.6); }
.auth-step-dot.on { width: 10px; height: 10px; background: linear-gradient(90deg, #4aa8ff, #a36eff); }
.auth-cosmos .field label { color: rgba(190,203,238,.8); font-size: 12px; }
.auth-cosmos .field input {
  min-height: 48px; border-radius: 12px; border: 1px solid rgba(126,160,255,.24);
  background: rgba(10,15,32,.8); color: #fff;
}
.auth-cosmos .field input:focus { border-color: rgba(126,190,255,.7); outline: 3px solid rgba(120,180,255,.28); }
.auth-handle-input { display: flex; align-items: center; gap: 0; }
.auth-handle-input > span {
  display: grid; place-items: center; width: 40px; min-height: 48px; color: rgba(158,203,255,.8);
  border: 1px solid rgba(126,160,255,.24); border-right: 0; border-radius: 12px 0 0 12px; background: rgba(10,15,32,.8);
}
.auth-handle-input input { flex: 1; border-radius: 0 12px 12px 0 !important; }
.auth-field-hint { margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: rgba(160,175,215,.7); }
.auth-field-hint.ok { color: #7ee2b8; }
.auth-field-hint.bad { color: #ffa8b4; }
.auth-optional { color: rgba(160,175,215,.6); font-weight: 400; }
.auth-summary { display: grid; gap: 0; margin: 0 0 16px; padding: 4px 14px; border-radius: 14px; border: 1px solid rgba(126,160,255,.22); background: rgba(16,22,46,.55); }
.auth-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(126,160,255,.14); }
.auth-summary > div:last-child { border-bottom: 0; }
.auth-summary dt { color: rgba(190,203,238,.74); font-size: 13px; }
.auth-summary dd { margin: 0; color: #fff; font-size: 13.5px; text-align: right; overflow-wrap: anywhere; }
.auth-terms-box { margin-bottom: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(126,160,255,.22); background: rgba(10,15,32,.6); max-height: 168px; overflow: auto; }
.auth-terms-box strong { display: block; margin-bottom: 8px; color: #fff; font-size: 14px; }
.auth-terms-box p { margin: 0; color: rgba(190,203,238,.74); font-size: 12.5px; line-height: 1.6; }
.auth-terms-accept { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; color: rgba(197,209,240,.85); font-size: 12.5px; line-height: 1.55; }
.auth-terms-accept input { width: 18px; height: 18px; margin-top: 1px; accent-color: #4aa8ff; }
.auth-terms-accept .linklike { color: #7fc0ff; }
.auth-cosmos .auth-main-action { margin-top: 10px; border-radius: 12px; }
.auth-cosmos .btn.primary { background: linear-gradient(90deg, #35a7ff, #a36eff); border: 0; color: #fff; font-weight: 600; }
.auth-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.auth-foot-row .linklike { color: rgba(190,203,238,.78); font-size: 12.5px; }
.auth-foot-row .linklike:hover { color: #fff; }

@media (max-width: 780px) {
  .auth-choice { grid-template-columns: minmax(0, 336px); gap: 14px; }
  .auth-choice-card { min-height: 0; padding: 22px 18px; gap: 12px; }
  .auth-choice-icon { width: 78px; height: 78px; font-size: 26px; }
  .auth-choice-go { width: 48px; height: 48px; }
  .auth-mark img { width: 52px; height: 52px; }
  .auth-mark strong { font-size: 30px; }
  .auth-hero-seal { margin: 20px 0 10px; }
  .auth-qr-panel { flex-direction: column; align-items: stretch; text-align: center; }
  .auth-qr-panel .auth-qr-copy { align-items: center; text-align: center; }
  .auth-qr-panel .auth-qr-frame { width: min(220px, 72%); margin: 0 auto; }
  .auth-method-grid { grid-template-columns: 1fr; }
  .auth-summary > div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .auth-summary dd { text-align: left; }
  .auth-foot-row { justify-content: center; }
}

/* Device confirmation is a security boundary, not an in-app toast. */
/* Device Confirmation continues the same onboarding, so it stands on the same
   sky rather than looking like a different product handing down a verdict.
   Only the backdrop is shared; the confirmation logic and markup are untouched. */
.device-confirmation-screen {
  position: relative; overflow: hidden; isolation: isolate; background: #05070f;
}
.device-confirmation-screen::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(90,140,255,.20), transparent 68%),
    radial-gradient(760px 520px at 84% 22%, rgba(150,86,255,.16), transparent 70%),
    radial-gradient(900px 460px at 12% 78%, rgba(31,201,255,.12), transparent 72%),
    #05070f;
}
.device-confirmation-screen::after {
  content: ""; position: absolute; left: 50%; bottom: -46vh; z-index: 0; transform: translateX(-50%);
  width: 190vw; height: 64vh; border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none;
  background: radial-gradient(120% 150% at 50% 100%, rgba(126,96,255,.42), rgba(40,30,90,.18) 55%, rgba(8,10,24,0) 78%);
  border-top: 1px solid rgba(150,180,255,.26);
}
.device-confirmation-screen > * { position: relative; z-index: 1; }
.device-confirmation-card {
  position: relative; width: min(100%, 790px); padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--line-2); border-radius: 24px; background: color-mix(in srgb, var(--bg-2) 95%, transparent);
  box-shadow: 0 30px 90px rgba(0,0,0,.42); backdrop-filter: blur(20px);
}
.device-confirmation-card .auth-brand { margin-bottom: 22px; }
.device-confirmation-heading { max-width: 610px; margin: 0 auto 22px; text-align: center; }
.device-confirmation-heading.compact { margin-bottom: 18px; }
.device-confirmation-heading h1 { margin: 5px 0 9px; color: var(--tx); font-size: clamp(25px, 4vw, 36px); letter-spacing: -.035em; }
.device-confirmation-heading p:not(.device-confirmation-kicker) { margin: 0; color: var(--tx-2); line-height: 1.55; }
.device-confirmation-kicker { margin: 0; color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.device-confirmation-symbol {
  display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 13px; border: 1px solid rgba(52,211,153,.55);
  border-radius: 50%; color: var(--ok); background: rgba(52,211,153,.1); box-shadow: 0 0 30px rgba(52,211,153,.14); font-size: 27px; font-weight: 800;
}
.device-access-summary, .device-success-card {
  display: grid; gap: 4px; max-width: 590px; margin: 0 auto 18px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 14px; background: color-mix(in srgb, var(--bg-3) 76%, transparent);
}
.device-access-summary strong, .device-success-card strong { color: var(--tx); font-size: 14px; }
.device-access-summary span, .device-success-card p { margin: 0; color: var(--tx-2); font-size: 12.5px; }
.device-access-summary small, .device-success-card small { color: var(--tx-3); font-size: 11px; }
.device-trust-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.device-trust-choice {
  min-height: 210px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 20px; color: var(--tx); text-align: left;
  border: 1px solid var(--line-2); border-radius: 18px; background: color-mix(in srgb, var(--bg-3) 78%, transparent); transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.device-trust-choice:hover, .device-trust-choice:focus-visible { transform: translateY(-2px); outline: none; }
.device-trust-choice.permanent:hover, .device-trust-choice.permanent:focus-visible { border-color: rgba(52,211,153,.65); background: rgba(52,211,153,.07); }
.device-trust-choice.session:hover, .device-trust-choice.session:focus-visible { border-color: rgba(123,92,255,.68); background: rgba(123,92,255,.08); }
.device-trust-choice:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.device-choice-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 24px; }
.device-trust-choice.permanent .device-choice-icon { color: var(--ok); background: rgba(52,211,153,.13); }
.device-trust-choice.session .device-choice-icon { color: #a994ff; background: rgba(123,92,255,.16); }
.device-trust-choice strong { font-size: 17px; }
.device-trust-choice > span:not(.device-choice-icon) { color: var(--tx-2); font-size: 12.5px; line-height: 1.52; }
.device-trust-choice em { width: 100%; margin-top: auto; padding-top: 11px; border-top: 1px solid var(--line); color: var(--brand); font-size: 12px; font-style: normal; font-weight: 750; }
.device-trust-choice.permanent em { color: var(--ok); }
.device-pending-footer { margin-top: 18px; color: var(--tx-3); font-size: 12px; text-align: center; }
.device-pending-footer strong { color: var(--neg); font-family: var(--mono); font-size: 13px; }
.device-logout { display: flex; margin: 12px auto 0; }
.device-confirmation-error, .device-code-message.error { color: var(--neg); }
.device-confirmation-error { margin-top: 14px; padding: 11px 13px; border: 1px solid rgba(255,107,129,.28); border-radius: 12px; background: var(--neg-soft); font-size: 12px; }
.device-back { position: absolute; top: 29px; right: 30px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; color: var(--tx-2); background: transparent; font-size: 20px; }
.device-back:hover, .device-back:focus-visible { color: var(--tx); border-color: var(--brand-line); outline: 3px solid var(--brand-soft); }
.device-channel-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 590px; margin: 0 auto 20px; }
.device-channel { display: flex; flex-direction: column; gap: 3px; padding: 12px 15px; color: var(--tx); text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-3); }
.device-channel span { color: var(--tx-3); font-size: 11px; }
.device-channel.on, .device-channel:focus-visible { border-color: var(--brand-line); background: var(--brand-soft); outline: none; }
.device-code-form { max-width: 590px; margin: 0 auto; text-align: center; }
.device-code-form > label { display: block; margin-bottom: 10px; color: var(--tx-2); font-size: 12px; text-align: left; }
.device-code-inputs { display: grid; grid-template-columns: repeat(6, minmax(38px, 1fr)); gap: 9px; }
.device-code-inputs input {
  min-width: 0; height: 58px; padding: 0; color: var(--tx); text-align: center; border: 1px solid var(--line-2); border-radius: 11px;
  background: var(--bg-3); font-family: var(--mono); font-size: 25px; font-weight: 750;
}
.device-code-inputs input:focus { border-color: var(--brand); outline: 3px solid var(--brand-soft); }
.device-code-message { min-height: 20px; margin-top: 10px; color: var(--tx-3); font-size: 12px; }
.preview-otp-panel {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin: 8px 0 12px; padding: 11px 12px; border: 1px solid rgba(255,183,3,.48);
  border-radius: 12px; color: var(--tx); background: rgba(255,183,3,.1); text-align: left;
}
.preview-otp-panel[hidden] { display: none; }
/* The explanatory column needs a usable basis: inside the narrow login card it
   otherwise shrinks to a few characters per line while the code and the button
   keep their intrinsic width. Below that basis the panel wraps into rows. */
.preview-otp-panel > div { display: flex; flex: 1 1 210px; min-width: 190px; flex-direction: column; gap: 2px; }
.preview-otp-panel strong { color: #ffd166; font-size: 12px; letter-spacing: .02em; }
.preview-otp-panel span { color: var(--tx-2); font-size: 11px; line-height: 1.35; }
.preview-otp-panel code { flex: 0 0 auto; padding: 5px 9px; border-radius: 8px; background: rgba(0,0,0,.24); color: #fff; font-size: 17px; letter-spacing: .12em; }
.preview-otp-panel .btn { flex: 0 0 auto; white-space: normal; }
.auth-preview-otp { margin: 0 0 14px; }
.device-code-life { margin: 3px 0 14px; color: var(--tx-3); font-size: 12px; }
.device-code-life strong { color: var(--ok); font-family: var(--mono); }
.device-code-submit, .device-enter { width: 100%; min-height: 46px; justify-content: center; }
.device-resend { display: block; margin: 12px auto 0; padding: 4px; border: 0; color: var(--tx-2); background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.device-resend:disabled { color: var(--tx-4); }
.device-code-warning { max-width: 590px; margin: 14px auto 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--tx-3); background: var(--bg-3); font-size: 11.5px; text-align: center; }
.device-success-card { margin-top: 24px; padding: 18px; }
.device-success-card > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Security -> Devices: machine grouping is shown only when the server proves it. */
.security-access { overflow: hidden; margin-bottom: 16px; border: 1px solid var(--line-2); border-radius: 18px; background: color-mix(in srgb, var(--bg-2) 92%, transparent); }
.security-access-head { display: flex; justify-content: space-between; gap: 24px; padding: 22px 24px 18px; }
.security-access-head h3 { margin: 4px 0 5px; font-size: 22px; }
.security-access-head p { margin: 0; color: var(--tx-2); font-size: 12.5px; line-height: 1.5; }
.security-channel-note { min-width: 220px; max-width: 330px; display: flex; flex-direction: column; gap: 4px; align-self: center; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-3); }
.security-channel-note strong { color: var(--tx); font-size: 11px; }
.security-channel-note span { color: var(--tx-3); font-size: 11px; line-height: 1.4; }
.security-main-tabs { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--line); }
.security-main-tabs button { padding: 11px 13px; border: 0; border-bottom: 2px solid transparent; color: var(--tx-3); background: transparent; font-weight: 700; }
.security-main-tabs button span { margin-left: 5px; color: var(--tx-4); font-size: 10px; }
.security-main-tabs button.on { color: var(--tx); border-bottom-color: var(--brand); }
.security-main-tabs button:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: -3px; }
.security-panel { padding: 20px 24px 24px; }
.security-section-heading { display: flex; justify-content: space-between; gap: 16px; margin: 4px 0 11px; }
.security-section-heading:not(:first-child) { margin-top: 24px; padding-top: 21px; border-top: 1px solid var(--line); }
.security-section-heading h4 { margin: 0 0 4px; font-size: 14px; }
.security-section-heading p { margin: 0; color: var(--tx-3); font-size: 11.5px; line-height: 1.45; }
.security-machine-list, .security-standalone-list, .security-session-list { display: grid; gap: 10px; }
.security-machine, .security-client, .security-session-row { border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--bg-3) 78%, transparent); }
.security-machine-head, .security-client, .security-session-row { display: flex; align-items: center; gap: 13px; padding: 15px; }
.security-machine-icon, .security-client-icon { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: 11px; color: var(--brand); background: var(--brand-soft); font-size: 18px; }
.security-machine-main, .security-client-main { min-width: 0; flex: 1; }
.security-machine-title, .security-client-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.security-machine-title strong, .security-client-title strong { overflow: hidden; color: var(--tx); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.security-client-meta { margin-top: 4px; color: var(--tx-3); font-size: 11px; line-height: 1.4; }
.security-row-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.security-machine-clients { padding: 0 15px 15px 70px; }
.security-machine-clients .security-client { margin-top: 7px; border-color: color-mix(in srgb, var(--line-2) 70%, transparent); background: var(--bg-2); }
.security-group-label { margin-bottom: 6px; color: var(--tx-3); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.security-empty { padding: 18px; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--tx-3); font-size: 12px; text-align: center; }
.security-history-list { display: grid; }
.security-history-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(190px, 1fr) minmax(100px, .6fr); gap: 12px; padding: 12px 5px; border-bottom: 1px solid var(--line); }
.security-history-row strong { color: var(--tx); font-size: 12.5px; }
.security-history-row span, .security-history-row small { color: var(--tx-3); font-size: 11px; }
.security-identities .sec-id-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.security-identities .sec-id-row > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.security-id-actions { margin-top: 12px; }
.security-dialog-overlay { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 18px; background: rgba(1,6,16,.75); backdrop-filter: blur(8px); }
.security-dialog { width: min(100%, 450px); padding: 23px; border: 1px solid var(--line-2); border-radius: 17px; background: var(--bg-2); box-shadow: var(--sh-2); }
.security-dialog h3 { margin: 0 0 8px; color: var(--tx); font-size: 18px; }
.security-dialog > p { margin: 0 0 17px; color: var(--tx-2); font-size: 12.5px; line-height: 1.55; }
.security-dialog .field { display: grid; gap: 6px; }
.security-dialog .field span { color: var(--tx-2); font-size: 11px; }
.security-dialog input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 10px; color: var(--tx); background: var(--bg-3); }
.security-dialog input:focus { border-color: var(--brand); outline: 3px solid var(--brand-soft); }
.security-dialog-error { min-height: 18px; margin-top: 7px; color: var(--neg); font-size: 11px; }
.security-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

@media (max-width: 720px) {
  .device-confirmation-screen { place-items: end center; padding: max(10px, env(safe-area-inset-top)) 0 0; }
  .device-confirmation-card { max-height: 100vh; overflow-y: auto; border-radius: 22px 22px 0 0; padding: 23px 18px calc(22px + env(safe-area-inset-bottom)); }
  .device-trust-choices, .device-channel-list { grid-template-columns: 1fr; }
  .device-trust-choice { min-height: 0; }
  .device-back { top: 23px; right: 18px; }
  .device-code-inputs { gap: 6px; }
  .device-code-inputs input { height: 50px; font-size: 21px; }
  .security-access-head { flex-direction: column; padding: 18px; }
  .security-channel-note { min-width: 0; max-width: none; }
  .security-main-tabs { overflow-x: auto; padding: 0 14px; }
  .security-main-tabs button { flex: 0 0 auto; }
  .security-panel { padding: 16px; }
  .security-machine-head, .security-client, .security-session-row { align-items: flex-start; flex-wrap: wrap; }
  .security-machine-main, .security-client-main { min-width: calc(100% - 60px); }
  .security-row-actions, .security-session-row > .btn { width: 100%; justify-content: flex-start; }
  .security-row-actions .btn { flex: 1 1 auto; justify-content: center; }
  .security-machine-clients { padding: 0 10px 10px; }
  .security-history-row { grid-template-columns: 1fr; gap: 4px; }
}
.mode-entry-page { min-height: 100vh; margin: 0; color: var(--tx); background: radial-gradient(900px 560px at 50% 0%, rgba(31,201,255,.13), transparent 70%), var(--app-bg); }
.mode-entry { min-height: 100vh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); }
.mode-entry-card { width: min(960px, 100%); padding: clamp(24px, 4vw, 46px); border: 1px solid var(--line-2); border-radius: 24px; background: color-mix(in srgb, var(--bg-2) 94%, transparent); box-shadow: var(--sh-2); backdrop-filter: blur(18px); }
.mode-entry-brand { display: flex; align-items: center; gap: 12px; color: var(--tx); }
.mode-entry-brand img { width: 36px; height: 36px; border-radius: 10px; }
.mode-entry-brand strong, .mode-entry-brand span { display: block; }
.mode-entry-brand-title { display: flex; align-items: center; gap: 7px; }
.mode-entry-brand-title .rail-release-badge { display: inline-flex; margin-top: 0; font-size: 7.5px; }
.mode-entry-build-meta { display: block; margin-top: 2px; color: var(--tx-3); font-size: 10px; font-weight: 650; line-height: 1.25; }
.mode-entry-brand span, .mode-entry-kicker, .mode-entry-lead, .mode-entry-status { color: var(--tx-2); }
.mode-entry-brand span { margin-top: 2px; font-size: 12px; }
.mode-entry-kicker { margin: 28px 0 6px; font-size: 13px; }
.mode-entry-card h1 { margin: 0; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.03em; }
.mode-entry-lead { max-width: 720px; margin: 12px 0 0; line-height: 1.55; }
.mode-entry-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.mode-entry-option { min-height: 255px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; text-align: left; color: var(--tx); border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--bg-3) 78%, transparent); transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.mode-entry-option:hover, .mode-entry-option:focus-visible, .mode-entry-option.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--bg-3)); transform: translateY(-2px); outline: none; }
.mode-entry-option:disabled { opacity: .6; cursor: wait; transform: none; }
.mode-entry-option-tag { color: var(--accent); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.mode-entry-option strong { font-size: 20px; }
.mode-entry-option > span:not(.mode-entry-option-tag), .mode-entry-option small { color: var(--tx-2); line-height: 1.5; }
.mode-entry-option small { margin-top: auto; font-size: 12px; }
.mode-entry-status { min-height: 22px; margin: 16px 0 0; font-size: 13px; }
@media (max-width: 520px) {
  .auth-screen { place-items: end center; padding-left: 0; padding-right: 0; }
  .auth-card { border-radius: 22px 22px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); }
  .mode-entry { align-items: end; padding-left: 0; padding-right: 0; }
  .mode-entry-card { border-radius: 22px 22px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); }
  .mode-entry-options { grid-template-columns: 1fr; }
  .mode-entry-option { min-height: 0; }
}

/* Authenticated plan/trial access: locked navigation + section unlock gate. */
.rail-item.rail-locked { opacity: .5; }
.rail-item.rail-locked:hover { opacity: .75; }
.rail-item .rail-lock { margin-left: auto; font-size: 11px; opacity: .85; }
html.has-lock-gate .content { position: relative; }
.lock-gate {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--bg-1) 55%, transparent);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.lock-gate-card {
  width: min(100%, 440px); text-align: center; padding: 30px 26px;
  border: 1px solid var(--line-2); border-radius: 18px;
  background: color-mix(in srgb, var(--bg-2) 96%, transparent); box-shadow: var(--sh-2);
}
.lock-gate-icon { font-size: 34px; line-height: 1; }
.lock-gate-card h2 { margin: 12px 0 6px; font-size: 20px; }
.lock-gate-card p { margin: 0; color: var(--tx-2); font-size: 13.5px; line-height: 1.6; }
.lock-gate-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.lock-gate-hint { margin-top: 14px; font-size: 11.5px; color: var(--tx-3); }
.plan-soon { font-size: 12px; font-weight: 600; color: var(--tx-3); }
.plan-card.soon { opacity: 0.72; }
.access-primary h4 { margin-bottom: 6px; }
.access-primary .access-promo,
.access-primary .access-donate { margin-top: 4px; }
.access-request { font-size: 13px; color: var(--tx-2); line-height: 1.45; }
.welcome-access-overlay {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: end center;
  padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: rgba(6, 10, 18, 0.55); backdrop-filter: blur(5px);
}
.welcome-access-card {
  width: min(440px, 100%); max-height: min(88vh, 720px); overflow: auto;
  border: 1px solid var(--line-2); border-radius: 18px 18px 14px 14px; padding: 16px 16px 18px;
  background: var(--bg-1); box-shadow: 0 18px 50px rgba(0,0,0,.4);
}
.welcome-access-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px;
}
.welcome-access-head .auth-brand { margin: 0; }
.welcome-access-x { flex: 0 0 auto; width: 36px; height: 36px; font-size: 16px; }
.welcome-access-lead {
  margin: 0 0 14px; color: var(--tx-2); font-size: 13.5px; line-height: 1.45;
}
.welcome-access-card .access-promo,
.welcome-access-card .access-donate { margin-top: 12px; }
.wa-tiers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wa-tier { min-width: 64px; }
.wa-custom { margin-top: 10px; flex-wrap: wrap; align-items: center; }
.wa-custom input { width: 140px; }
.welcome-access-card .access-request {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 12px;
  cursor: pointer; font-size: 13px; color: var(--tx-2); line-height: 1.4;
}
.welcome-access-card .access-request input { margin-top: 3px; }
.welcome-access-actions {
  display: flex; flex-direction: column; gap: 8px; margin-top: 16px;
}
html.ux-mode-locked .rail,
html.ux-mode-locked .topbar,
html.ux-mode-locked .content { pointer-events: none; opacity: 0.35; }
.ux-mode-gate { z-index: 80; }
.ux-mode-card { max-width: 560px; }
.ux-mode-choices {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.ux-mode-choice {
  text-align: left;
  border: 1px solid var(--line);
  background: var(--bg-2, rgba(255,255,255,0.04));
  color: inherit;
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  display: grid;
  gap: 6px;
}
.ux-mode-choice strong { font-size: 16px; }
.ux-mode-choice span { color: var(--tx-2); font-size: 13px; line-height: 1.45; }
.ux-mode-choice:hover { border-color: var(--accent, #6aa3ff); }
.ux-mode-choice:disabled { opacity: 0.55; cursor: wait; }
.beginner-watermark { background: color-mix(in srgb, #1d6b4f 18%, transparent); }
html.ux-beginner .orch-fab { display: none !important; }
@media (max-width: 720px) {
  .ux-mode-card { margin: 12px; width: calc(100% - 24px); }
  .ux-mode-choice { padding: 12px; }
}
@media (min-width: 720px) {
  .welcome-access-overlay { place-items: center; }
  .welcome-access-card { border-radius: 18px; }
}

/* Admin user detail panel. */
.user-detail-panel { padding: 12px 14px; display: block; }
.udetail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2px 20px; margin-bottom: 6px; }
.udetail-grid .cab-kv { padding: 3px 0; }
.cap-panel { display: grid; gap: 2px; }
.trial-access-controls { display: grid; grid-template-columns: minmax(120px, 160px) auto minmax(210px, 1fr) auto; gap: 10px; align-items: end; margin: 10px 0 14px; }
.trial-access-controls label { display: grid; gap: 5px; color: var(--tx-2); font-size: 12px; }
.trial-access-controls input { width: 100%; }
.trial-access-controls .trial-access-reason { grid-column: 1 / -1; }
@media (max-width: 760px) { .trial-access-controls { grid-template-columns: 1fr; } .trial-access-controls .trial-access-reason { grid-column: auto; } }
@media (max-width: 560px) { .udetail-grid { grid-template-columns: 1fr; } }

/* Consent-based user support and per-tab resource monitoring. */
.user-monitor-line { margin-top: 3px; }
.support-online-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ok, #38d996); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok, #38d996) 18%, transparent); }
.support-alert-inline { color: var(--warn, #e0a33a); font-weight: 700; }
.user-support-live { display: grid; gap: 10px; }
.support-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.support-privacy-note { line-height: 1.55; }
.support-session { padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--bg-3) 78%, transparent); }
.support-session.online { border-color: color-mix(in srgb, var(--ok, #38d996) 38%, var(--line)); }
.support-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 7px 16px; margin-top: 9px; color: var(--tx-2); font-size: 12px; }
.support-metrics strong { color: var(--tx); font-weight: 650; }
.support-alerts { display: grid; gap: 6px; }
.support-alert { padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--warn, #e0a33a) 45%, var(--line)); border-radius: 9px; background: color-mix(in srgb, var(--warn, #e0a33a) 10%, transparent); color: var(--warn, #e0a33a); font-size: 12.5px; font-weight: 650; }
.support-alert.critical { border-color: color-mix(in srgb, var(--danger, #ff5c78) 55%, var(--line)); background: color-mix(in srgb, var(--danger, #ff5c78) 10%, transparent); color: var(--danger, #ff5c78); }
.support-ok { padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, var(--ok, #38d996) 9%, transparent); color: var(--ok, #38d996); font-size: 12.5px; }
.support-auth-session { flex-wrap: wrap; }
.support-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.support-shot { padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-3); }
.support-shot img { display: block; width: 100%; max-height: 340px; margin-top: 9px; object-fit: contain; border: 1px solid var(--line-2); border-radius: 8px; background: #05070a; }
.support-error { margin-top: 7px; color: var(--danger, #ff5c78); font-size: 12px; }
.support-consent { z-index: 180; }
.support-consent .terms-modal-card { width: min(100%, 620px); }
.support-consent-actions { margin-top: 18px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .support-toolbar .btn, .support-consent-actions .btn { width: 100%; }
  .support-metrics { grid-template-columns: 1fr; }
}

/* Admin journal: highlight suspicious rows. */
.jrow-warn { border-left: 3px solid var(--warn, #e0a33a); padding-left: 9px; }

/* Invitation card preview. */
.invite-card-preview { margin-bottom: 12px; }
.invite-card-preview img { width: 100%; max-width: 520px; border-radius: 12px; border: 1px solid var(--line-2); display: block; }
.inv-actions { margin-left: auto; }
.inv-row { flex-wrap: wrap; }

/* Terms of use: registration checkbox + modal. */
.auth-terms { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--tx-2); line-height: 1.5; margin: 2px 0 4px; }
.auth-terms input { margin-top: 2px; }
.linklike { background: none; border: none; padding: 0; color: var(--acc, #1fc9ff); cursor: pointer; text-decoration: underline; font: inherit; }
/* Telegram identity chip (shown before the registration form). */
.auth-tg-id { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; background: color-mix(in srgb, var(--bg-3,#1a2436) 80%, transparent); border: 1px solid var(--line-2); border-radius: 10px; }
.auth-tg-badge { font-weight: 600; color: var(--tx); font-size: 14px; }
.auth-tg-hint { font-size: 11.5px; color: var(--tx-3); margin-left: auto; }
.terms-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(6, 10, 16, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.terms-modal-card { width: min(100%, 560px); max-height: 82vh; display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg-2); box-shadow: var(--sh-2); }
.terms-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.terms-modal-body { padding: 16px 18px; overflow-y: auto; }
.terms-modal-body h4 { margin: 14px 0 4px; font-size: 13.5px; }
.terms-modal-body h4:first-child { margin-top: 0; }
.terms-modal-body p { margin: 0; color: var(--tx-2); font-size: 12.5px; line-height: 1.6; }
.terms-notice-links { display: grid; gap: 6px; margin: 8px 0 16px; justify-items: start; }
.terms-notice-link { font-size: 12.5px; text-align: left; }
.terms-notice-modal { z-index: 121; }
.terms-notice-modal .terms-modal-card { width: min(100%, 720px); }
.terms-notice-text { margin: 14px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--tx-2); font: 12px/1.55 var(--mono); }

/* Staging / impersonation safety banner — always visible while "войти как". */
.impersonation-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
  padding: 10px 16px; background: #8b1a1a; color: #fff; font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.impersonation-banner .btn { background: #fff; color: #8b1a1a; border: none; }
body:has(#impersonation-banner) { padding-top: var(--qa-drawer-top, 48px); }

/* Developer Preview "View As" banner — Development only, deliberately loud. */
.dev-view-as-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 210;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
  padding: 10px 16px; color: #2b1a00; font-size: 13px; font-weight: 600;
  background: repeating-linear-gradient(45deg, #ffb703, #ffb703 14px, #ffd166 14px, #ffd166 28px);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.dev-view-as-banner .dev-view-as-tag {
  padding: 2px 8px; border-radius: 6px; background: #2b1a00; color: #ffd166;
  letter-spacing: .12em; font-weight: 800;
}
.dev-view-as-banner .dev-view-as-role { font-weight: 800; }
.dev-view-as-banner .dev-view-as-note { font-weight: 500; opacity: .85; }
.dev-view-as-banner .btn { background: #2b1a00; color: #ffd166; border: none; text-decoration: none; }
body:has(#dev-view-as-banner) { padding-top: 48px; }
body:has(#impersonation-banner):has(#dev-view-as-banner) { padding-top: 92px; }
.dev-view-as-banner ~ #impersonation-banner { top: 46px; }
.dev-persona-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dev-persona { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; white-space: normal; }
.dev-persona strong, .dev-persona span { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.dev-bootstrap-url { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--bg-2, rgba(0,0,0,.15)); word-break: break-all; }
.preview-sandbox-banner {
  justify-content: flex-start; color: #fff;
  background: linear-gradient(92deg, #3e2400 0%, #755000 44%, #382000 100%);
  border-bottom: 1px solid rgba(255,209,102,.72);
}
.preview-sandbox-banner .dev-view-as-tag { color: #2b1a00; background: #ffd166; }
.preview-sandbox-banner .dev-view-as-role { flex: 0 0 auto; }
.preview-sandbox-banner .dev-view-as-note { min-width: 0; margin-right: auto; overflow: hidden; color: rgba(255,255,255,.82); text-overflow: ellipsis; white-space: nowrap; }
.preview-sandbox-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.preview-sandbox-actions .btn { flex: 0 0 auto; white-space: nowrap; }
.preview-sandbox-banner .btn { color: #2b1a00; background: #ffd166; }
.preview-sandbox-banner .btn.preview-exit { color: #fff; background: #a62b35; }
.preview-active-note { margin: 10px 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--tx-2); background: var(--bg-3); font-size: 12px; }
.preview-scenario-grid .dev-persona { min-height: 104px; justify-content: center; }

@media (max-width: 900px) {
  body:has(#dev-view-as-banner.preview-sandbox-banner) { padding-top: 98px; }
  .preview-sandbox-banner { align-items: flex-start; }
  .preview-sandbox-actions { flex-basis: 100%; justify-content: flex-start; }
}

@media (max-width: 600px) {
  body:has(#dev-view-as-banner.preview-sandbox-banner) { padding-top: 150px; }
  .preview-sandbox-banner { padding: 8px 10px; gap: 5px 8px; font-size: 11px; }
  .preview-sandbox-actions .btn { min-height: 32px; padding: 6px 8px; font-size: 10.5px; }
  .dev-persona-grid { grid-template-columns: 1fr; }
  .preview-otp-panel { align-items: stretch; flex-direction: column; }
}

.demo-watermark {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 90;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  max-width: min(720px, calc(100vw - 24px)); padding: 8px 14px;
  border: 1px dashed color-mix(in srgb, var(--warn, #e0a33a) 70%, transparent);
  border-radius: 999px; background: color-mix(in srgb, var(--bg-2, #121820) 92%, transparent);
  color: var(--tx); font-size: 12.5px; font-weight: 600; backdrop-filter: blur(10px);
}
.demo-report-banner {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--warn, #e0a33a) 55%, transparent);
  background: color-mix(in srgb, var(--warn, #e0a33a) 12%, transparent);
  font-size: 13px; font-weight: 600;
}
.demo-scenarios { padding: 0 18px 14px; display: grid; gap: 8px; }
.demo-scenario-seg { display: flex; flex-wrap: wrap; gap: 6px; }

.practice-charts { display: grid; gap: 10px; }
.practice-charts.layout-1 { grid-template-columns: 1fr; }
.practice-charts.layout-2 { grid-template-columns: 1fr 1fr; }
.practice-charts.layout-4 { grid-template-columns: 1fr 1fr; }
.practice-chart-pane {
  min-height: 220px; padding: 10px; border-radius: 12px;
  border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg-3, #1a2436) 70%, transparent);
  display: flex; flex-direction: column; gap: 6px;
}
.practice-chart-meta { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.practice-chart-host { flex: 1; min-height: 180px; position: relative; }
.practice-chart-fallback { display: grid; place-items: center; min-height: 180px; text-align: center; gap: 4px; }
.practice-chart-loading { min-height: 180px; display: grid; place-items: center; color: var(--tx-2); font-size: 12px; }
.practice-market-state {
  display: grid; grid-template-columns: repeat(3, minmax(72px, auto)) minmax(220px, 1fr) auto;
  gap: 10px; align-items: center; margin-bottom: 10px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--bg-3, #1a2436) 88%, transparent);
}
.practice-market-state > div { display: grid; gap: 2px; }
.practice-market-state span, .practice-market-state small { color: var(--tx-2); font-size: 10px; }
.practice-market-state strong { font-size: 13px; }
.practice-market-state[data-state="ready"] { border-color: color-mix(in srgb, var(--ok, #53c88f) 45%, var(--line)); }
.practice-market-state[data-state="stale"], .practice-market-state[data-state="empty"] { border-color: color-mix(in srgb, var(--warn, #e0a33a) 55%, var(--line)); }
.practice-market-state[data-state="error"] { border-color: color-mix(in srgb, var(--bad, #e46f6f) 55%, var(--line)); }
.practice-market-source { min-width: 0; }
.practice-market-source strong, .practice-market-source small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.practice-tf select { min-width: 70px; height: 30px; }
.practice-list-title { margin: 0; color: var(--tx-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.practice-onboard {
  display: grid; place-items: center; min-height: min(70vh, 640px); padding: 12px;
}
.practice-onboard-card {
  width: min(520px, 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg-2, rgba(255,255,255,0.03));
  padding: 22px 22px 18px;
  display: grid; gap: 12px;
}
.practice-onboard-brand { display: grid; gap: 4px; }
.practice-onboard-brand strong { font-size: 15px; }
.practice-onboard-brand span { color: var(--tx-2); font-size: 12.5px; line-height: 1.45; }
.practice-onboard-card h2 { margin: 0; font-size: 22px; line-height: 1.25; }
.practice-onboard-lead { margin: 0; color: var(--tx-2); font-size: 13.5px; line-height: 1.5; }
.practice-deposit-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.practice-deposit-field { display: grid; gap: 6px; }
.practice-deposit-field span { font-size: 12px; color: var(--tx-2); }
.practice-onboard-actions { display: flex; gap: 10px; }
.practice-onboard-points {
  margin: 4px 0 0; padding-left: 18px; color: var(--tx-3); font-size: 12px; line-height: 1.55;
}
.practice-desk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.9fr);
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}
.practice-side { display: grid; gap: 14px; }
.practice-ticket { grid-template-columns: 1fr 1fr; }
.grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Community is a peer workspace: threaded chat, transparent requests and
   user-owned reports live here, never in the Orchestrator surface. */
.community-workspace { display: grid; gap: 16px; }
.community-main-grid { align-items: start; }
.community-channels { flex-wrap: wrap; }
.community-chat { max-height: 560px; overflow: auto; }
.community-composer textarea { width: 100%; resize: vertical; }
.community-composer-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.community-composer-actions .spacer { flex: 1; }
.community-attachments { display: flex; flex-wrap: wrap; gap: 8px; }
.community-pending-file, .community-attachment, .community-metrics span {
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 3px 8px;
  border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--bg-3, #1a2436) 75%, transparent);
  color: var(--tx-2); font-size: 11px;
}
.community-attachment { margin-top: 7px; text-decoration: none; }
.community-attachment:hover { color: var(--accent, #7aa8ff); border-color: var(--accent, #7aa8ff); }
.community-pending-file .btn { min-height: 20px; padding: 0 5px; }
.community-message { align-items: flex-start; }
.community-message-reply { margin-left: 22px; border-left: 2px solid color-mix(in srgb, var(--accent, #7aa8ff) 45%, transparent); padding-left: 10px; }
.community-message-actions { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 5px; }
.community-reply-mark { margin-left: 6px; color: var(--accent, #7aa8ff); font-size: 11px; font-weight: 600; }
.community-thread-state { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: color-mix(in srgb, var(--accent, #7aa8ff) 9%, transparent); font-size: 12px; }
.community-metrics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
@media (max-width: 1100px) {
  .practice-desk-grid { grid-template-columns: 1fr; }
  .grid.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .practice-charts.layout-2, .practice-charts.layout-4 { grid-template-columns: 1fr; }
  .practice-onboard-card { padding: 16px; }
  .practice-ticket { grid-template-columns: 1fr; }
  .practice-market-state { grid-template-columns: repeat(3, 1fr); }
  .practice-market-source { grid-column: 1 / -1; }
  .practice-market-state > button { grid-column: 1 / -1; width: 100%; }
  .community-message-reply { margin-left: 10px; }
}

/* Mobile bottom-nav gets a light glass treatment so the ambient reads behind */
@media (max-width: 600px) {
  .rail { background: rgba(8, 14, 24, 0.86); backdrop-filter: blur(12px); }
}

/* Admin > Connectors: status cards rendered in place, no secondary screen. */
.conn-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 12px; }
.conn-card { border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg-2); padding: 10px 12px; }
.conn-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.conn-body { display: grid; gap: 3px; }
.conn-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--tx-2); }
.conn-kv b { color: var(--tx-1); font-weight: 600; overflow-wrap: anywhere; }
.conn-badge { padding: 2px 8px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 700; border: 1px solid var(--line-2); }
.conn-healthy { background: rgba(66,214,146,.12); color: #2f9d6d; }
.conn-degraded { background: rgba(252,197,90,.14); color: #a97a11; }
.conn-not_configured { background: var(--bg-3); color: var(--tx-3); }
.conn-error { background: rgba(255,107,107,.12); color: #c2453f; }
/* A source that did not answer. Distinct from an error: nothing went wrong
   that we know of, we simply have no reading, and the card says so instead of
   disappearing or pretending to be healthy. */
.conn-timeout { background: rgba(252,197,90,.14); color: #a97a11; }
.conn-card.is-unavailable { opacity: .82; }
.conn-unavailable { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); font-size: 11.5px; }

/* ==========================================================================
   Community v2 — social feed integrated into the Aurora application shell
   ========================================================================== */
.community-v2 {
  --community-cyan: #38d7ff;
  --community-blue: #4698ff;
  --community-violet: #8c63ff;
  width: min(1500px, 100%); margin: 0 auto; padding-bottom: 48px;
  color: var(--tx);
}
.community-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
  gap: 28px; align-items: center; margin-bottom: 16px; padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--community-cyan) 22%, var(--line-2));
  border-radius: 18px;
  background:
    radial-gradient(circle at 82% 12%, rgba(87, 70, 255, .16), transparent 34%),
    radial-gradient(circle at 8% 90%, rgba(21, 184, 255, .10), transparent 30%),
    color-mix(in srgb, var(--bg-2) 94%, #07111d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 16px 46px rgba(0,0,0,.18);
}
.community-hero::after {
  content: ''; position: absolute; right: -80px; top: -140px; width: 360px; height: 360px;
  border: 1px solid rgba(56, 215, 255, .08); border-radius: 50%; pointer-events: none;
}
.community-eyebrow { display: block; margin-bottom: 7px; color: var(--community-cyan); font-size: 9.5px; font-weight: 850; letter-spacing: .22em; }
.community-hero h1 { margin: 0; font-size: clamp(22px, 2.1vw, 32px); letter-spacing: -.035em; line-height: 1.12; }
.community-hero p { margin: 9px 0 0; max-width: 720px; color: var(--tx-2); font-size: 12.5px; line-height: 1.55; }
.community-search {
  position: relative; z-index: 1; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 13px;
  background: rgba(3, 10, 20, .48); color: var(--tx-3); box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.community-search:focus-within { border-color: color-mix(in srgb, var(--community-cyan) 52%, var(--line-2)); box-shadow: 0 0 0 3px rgba(56,215,255,.08); }
.community-search input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--tx); font: inherit; font-size: 12px; }
.community-search kbd { padding: 3px 6px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg-3); color: var(--tx-3); font-size: 9px; }

.community-layout { display: grid; grid-template-columns: 228px minmax(430px, 1fr) 292px; gap: 16px; align-items: start; }
.community-rail { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.community-left, .community-right { max-height: calc(100vh - 28px); overflow: auto; scrollbar-width: thin; }
.community-self-card, .community-side-card, .community-profile-summary, .community-boundary-note, .community-nav {
  border: 1px solid var(--line-2); border-radius: 14px; background: color-mix(in srgb, var(--bg-2) 94%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.community-self-card { display: flex; align-items: center; gap: 9px; min-height: 66px; padding: 10px; }
.community-self-main { flex: 1; min-width: 0; border: 0; padding: 0; background: transparent; color: var(--tx); text-align: left; cursor: pointer; }
.community-self-main strong, .community-self-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-self-main strong { font-size: 12px; }.community-self-main span { margin-top: 2px; color: var(--tx-3); font-size: 10px; }
.community-mini-action { width: 27px; height: 27px; border: 0; border-radius: 8px; background: transparent; color: var(--tx-3); cursor: pointer; }
.community-mini-action:hover { background: var(--bg-3); color: var(--tx); }
.community-avatar {
  position: relative; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(56, 215, 255, .28);
  background: linear-gradient(145deg, rgba(56,215,255,.18), rgba(92,83,255,.16) 55%, rgba(5,14,25,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 7px 20px rgba(0,0,0,.18);
  color: #c9f6ff; font-size: 11px; font-weight: 850; letter-spacing: .05em;
}
.community-avatar img { width: 100%; height: 100%; object-fit: cover; }.community-avatar.sm { width: 34px; height: 34px; border-radius: 11px; }.community-avatar.xs { width: 27px; height: 27px; border-radius: 9px; font-size: 8px; }.community-avatar.xl { width: 66px; height: 66px; border-radius: 20px; }.community-avatar.xxl { width: 92px; height: 92px; border-radius: 26px; font-size: 18px; }
.community-nav { padding: 7px; }
.community-nav button { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 39px; padding: 0 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--tx-2); font: inherit; font-size: 11.5px; font-weight: 650; text-align: left; cursor: pointer; }
.community-nav button span { display: inline-flex; width: 20px; justify-content: center; color: var(--tx-3); font-size: 15px; }.community-nav button:hover { color: var(--tx); background: var(--bg-3); }.community-nav button.active { color: #d8f8ff; border-color: rgba(56,215,255,.22); background: linear-gradient(90deg, rgba(31,184,239,.15), rgba(90,76,255,.08)); }.community-nav button.active span { color: var(--community-cyan); }
.community-rail-section { padding: 3px 5px; }.community-rail-title, .community-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; color: var(--tx-3); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.community-rail-title .linklike, .community-side-head .linklike { color: var(--community-cyan); font-size: 9px; text-transform: none; letter-spacing: 0; }
.community-following-list { display: flex; flex-direction: column; gap: 3px; }.community-followed-person { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px; border: 0; border-radius: 9px; background: transparent; color: var(--tx); text-align: left; cursor: pointer; }.community-followed-person:hover { background: var(--bg-3); }.community-followed-person span:last-child { min-width: 0; }.community-followed-person strong, .community-followed-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.community-followed-person strong { font-size: 10.5px; }.community-followed-person small { color: var(--tx-3); font-size: 9px; }
.community-boundary-note { padding: 12px; color: var(--tx-3); font-size: 9.5px; line-height: 1.5; }.community-boundary-note strong { display: block; margin-bottom: 4px; color: var(--tx-2); font-size: 10px; }

.community-center { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.community-tabs { display: flex; align-items: center; min-height: 44px; padding: 4px 6px; border: 1px solid var(--line-2); border-radius: 13px; background: color-mix(in srgb, var(--bg-2) 96%, transparent); }
.community-tabs button { align-self: stretch; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--tx-3); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }.community-tabs button:hover { color: var(--tx); }.community-tabs button.active { background: var(--bg-3); color: var(--community-cyan); box-shadow: inset 0 0 0 1px var(--line-2); }.community-tab-status { margin-left: auto; padding: 0 9px; color: var(--tx-3); font-size: 9.5px; }.community-tab-status[data-tone="error"] { color: var(--neg); }.community-tab-status[data-tone="loading"] { color: var(--warn); }
.community-composer-v2 { display: flex; gap: 11px; padding: 14px; border: 1px solid color-mix(in srgb, var(--community-cyan) 15%, var(--line-2)); border-radius: 15px; background: linear-gradient(145deg, color-mix(in srgb, var(--bg-2) 96%, transparent), color-mix(in srgb, var(--bg-3) 78%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.community-compose-main { flex: 1; min-width: 0; }.community-compose-main textarea, .community-channel-compose textarea { width: 100%; border: 0; outline: 0; resize: vertical; background: transparent; color: var(--tx); font: inherit; font-size: 12px; line-height: 1.55; }.community-compose-main textarea::placeholder, .community-channel-compose textarea::placeholder { color: var(--tx-4); }
.community-compose-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 10px; }.community-action { display: inline-flex; align-items: center; gap: 5px; min-height: 29px; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--tx-3); font: inherit; font-size: 9.5px; cursor: pointer; }.community-action:hover:not(:disabled) { color: var(--community-cyan); border-color: var(--line-2); background: var(--bg-3); }.community-action:disabled { opacity: .42; cursor: not-allowed; }.community-compose-spacer, .community-action-spacer { flex: 1; }.community-compose-actions select { height: 29px; padding: 0 7px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-3); color: var(--tx-2); font-size: 9px; }
.community-pending-media, .community-attachments { display: flex; flex-wrap: wrap; gap: 6px; }.community-pending-media span, .community-attachments span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-3); color: var(--tx-2); font-size: 9px; }.community-pending-media button, .community-attachments button { border: 0; background: transparent; color: var(--tx-3); cursor: pointer; }

.community-feed { display: flex; flex-direction: column; gap: 12px; }.community-post-card { overflow: hidden; border: 1px solid var(--line-2); border-radius: 16px; background: color-mix(in srgb, var(--bg-2) 96%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 12px 34px rgba(0,0,0,.1); }
.community-post-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 15px 8px; }.community-post-author { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--tx); text-align: left; cursor: pointer; }.community-post-author > span:last-child { min-width: 0; }.community-post-author strong, .community-post-author small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.community-post-author strong { font-size: 11.5px; }.community-post-author small { margin-top: 2px; color: var(--tx-3); font-size: 9.5px; }.community-post-meta { display: flex; align-items: center; gap: 8px; color: var(--tx-4); font-size: 9px; }.community-post-meta button { border: 0; background: transparent; color: inherit; cursor: pointer; }.community-post-text { padding: 6px 16px 12px; color: var(--tx-1); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }.community-tags { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 16px 12px; }.community-tags button { padding: 0; border: 0; background: transparent; color: var(--community-cyan); font: inherit; font-size: 10px; cursor: pointer; }
.community-post-media { display: grid; gap: 2px; max-height: 480px; overflow: hidden; background: #020711; }.community-post-media.media-2, .community-post-media.media-3 { grid-template-columns: repeat(2, 1fr); }.community-post-media.media-3 a:first-child { grid-row: span 2; }.community-post-media a { min-height: 190px; overflow: hidden; }.community-post-media img { display: block; width: 100%; height: 100%; min-height: 190px; object-fit: cover; transition: transform .3s ease; }.community-post-media a:hover img { transform: scale(1.015); }
.community-object-card { display: flex; justify-content: space-between; gap: 14px; margin: 2px 14px 12px; padding: 13px; border: 1px solid rgba(56,215,255,.18); border-radius: 13px; background: linear-gradient(130deg, rgba(36,173,229,.09), rgba(105,75,255,.07)); }.community-object-kind { color: var(--community-cyan); font-size: 8px; font-weight: 850; letter-spacing: .14em; }.community-object-card h4 { margin: 4px 0; font-size: 13px; }.community-object-card p { margin: 0; color: var(--tx-3); font-size: 9.5px; }.community-object-metrics { display: grid; grid-template-columns: repeat(2, minmax(65px, 1fr)); gap: 5px; }.community-object-metrics span { padding: 6px; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(0,0,0,.12); }.community-object-metrics small, .community-object-metrics strong { display: block; }.community-object-metrics small { color: var(--tx-4); font-size: 7px; }.community-object-metrics strong { margin-top: 2px; font-size: 10px; }
.community-post-actions { display: flex; align-items: center; gap: 3px; margin: 0 12px; padding: 7px 0; border-top: 1px solid var(--line); }.community-post-actions button { display: inline-flex; align-items: center; gap: 5px; min-height: 29px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--tx-3); font: inherit; font-size: 9.5px; cursor: pointer; }.community-post-actions button:hover { color: var(--tx); background: var(--bg-3); }.community-post-actions button.active { color: var(--community-cyan); background: rgba(56,215,255,.08); }
.community-comments { padding: 0 14px 12px; }.community-comment { display: flex; gap: 8px; padding: 7px 0; }.community-comment > div { flex: 1; min-width: 0; padding: 7px 9px; border-radius: 9px; background: var(--bg-3); }.community-comment button { padding: 0; border: 0; background: transparent; color: var(--tx); font: inherit; font-size: 9.5px; font-weight: 750; cursor: pointer; }.community-comment p { margin: 3px 0; color: var(--tx-2); font-size: 10.5px; line-height: 1.45; }.community-comment small { color: var(--tx-4); font-size: 8px; }.community-comment-form { display: flex; gap: 6px; margin-top: 5px; }.community-comment-form input { flex: 1; min-width: 0; height: 34px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 10px; outline: 0; background: var(--bg-3); color: var(--tx); font: inherit; font-size: 10px; }.community-comment-form input:focus { border-color: rgba(56,215,255,.42); }.community-comment-form button { width: 34px; border: 1px solid rgba(56,215,255,.25); border-radius: 10px; background: rgba(56,215,255,.1); color: var(--community-cyan); cursor: pointer; }
.community-empty { display: grid; justify-items: center; gap: 5px; padding: 40px 24px; border: 1px dashed var(--line-2); border-radius: 14px; color: var(--tx-3); text-align: center; }.community-empty > span { font-size: 22px; color: var(--community-cyan); }.community-empty strong { color: var(--tx-2); font-size: 12px; }.community-empty p { max-width: 420px; margin: 0; font-size: 10px; line-height: 1.5; }.community-load-more { align-self: center; }
.community-search-results { padding: 12px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg-2); }.community-search-results h3 { margin: 0 0 8px; font-size: 11px; }.community-search-results > button { display: inline-flex; align-items: center; gap: 8px; width: calc(50% - 4px); margin: 2px; padding: 7px; border: 0; border-radius: 9px; background: var(--bg-3); color: var(--tx); text-align: left; cursor: pointer; }.community-search-results strong, .community-search-results small { display: block; }.community-search-results strong { font-size: 9.5px; }.community-search-results small { color: var(--tx-3); font-size: 8.5px; }

.community-profile-summary { overflow: hidden; }.community-profile-cover { position: relative; height: 74px; overflow: hidden; background: radial-gradient(circle at 78% 18%, rgba(72,98,255,.32), transparent 34%), linear-gradient(145deg, #08111e, #0b2130); }.community-profile-cover::before { content: ''; position: absolute; inset: -40% -20%; border: 1px solid rgba(56,215,255,.14); border-radius: 50%; transform: rotate(-12deg); }.community-profile-cover span { position: absolute; right: 14px; bottom: 8px; color: rgba(137,231,255,.18); font-size: 30px; font-weight: 200; letter-spacing: -.08em; }.community-profile-summary-body { display: flex; flex-direction: column; align-items: center; padding: 0 13px 13px; text-align: center; }.community-profile-summary-body .community-avatar { margin-top: -34px; }.community-role { display: inline-flex; margin-top: 8px; padding: 3px 7px; border: 1px solid rgba(56,215,255,.16); border-radius: 999px; background: rgba(56,215,255,.06); color: var(--community-cyan); font-size: 8px; font-weight: 750; }.community-profile-name { margin-top: 7px; padding: 0; border: 0; background: transparent; color: var(--tx); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }.community-handle { color: var(--tx-3); font-size: 9.5px; }.community-profile-summary-body p { margin: 8px 0; color: var(--tx-3); font-size: 9.5px; line-height: 1.5; }.community-profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin: 7px 0 11px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.community-profile-stats span { color: var(--tx-4); font-size: 7.5px; text-transform: uppercase; }.community-profile-stats strong { display: block; margin-bottom: 2px; color: var(--tx); font-size: 11px; }.community-profile-summary-body .btn { width: 100%; }
.community-side-card { padding: 12px; }.community-side-head h3 { margin: 0; color: var(--tx-2); font-size: 9.5px; }.community-person-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }.community-person-row:last-child { border-bottom: 0; }.community-person-main { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: var(--tx); text-align: left; cursor: pointer; }.community-person-main > span { min-width: 0; }.community-person-main strong, .community-person-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.community-person-main strong { font-size: 9.5px; }.community-person-main small { margin-top: 2px; color: var(--tx-4); font-size: 8px; }.community-follow-button { padding: 5px 7px; border: 1px solid rgba(56,215,255,.24); border-radius: 8px; background: rgba(56,215,255,.08); color: var(--community-cyan); font: inherit; font-size: 8px; cursor: pointer; }.community-follow-button.following { border-color: var(--line-2); background: transparent; color: var(--tx-3); }.community-safety-card { display: flex; gap: 9px; }.community-side-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 9px; background: rgba(61,224,160,.09); color: var(--pos); }.community-safety-card strong { font-size: 9.5px; }.community-safety-card p { margin: 4px 0 0; color: var(--tx-4); font-size: 8.5px; line-height: 1.45; }

.community-channels-view { border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg-2); overflow: hidden; }.community-channel-head { display: flex; justify-content: space-between; gap: 14px; padding: 16px; border-bottom: 1px solid var(--line); background: linear-gradient(130deg, rgba(56,215,255,.06), rgba(91,68,255,.05)); }.community-channel-head h2 { margin: 0; font-size: 16px; }.community-channel-head p { margin: 4px 0 0; color: var(--tx-3); font-size: 9.5px; }.community-channel-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }.community-channel-pills button { min-height: 29px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-3); color: var(--tx-3); font: inherit; font-size: 8.5px; cursor: pointer; }.community-channel-pills button.active { border-color: rgba(56,215,255,.32); color: var(--community-cyan); background: rgba(56,215,255,.08); }.community-channel-messages { display: flex; flex-direction: column; gap: 6px; max-height: 520px; padding: 12px 16px; overflow: auto; }.community-channel-message { position: relative; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-3); }.community-channel-message.reply { margin-left: 24px; border-left-color: var(--community-cyan); }.community-channel-author { display: flex; justify-content: space-between; gap: 10px; }.community-channel-author strong { font-size: 10px; }.community-channel-author time { color: var(--tx-4); font-size: 8px; }.community-channel-message p { margin: 5px 0; color: var(--tx-2); font-size: 10.5px; line-height: 1.5; white-space: pre-wrap; }.community-channel-message > button { padding: 0; border: 0; background: transparent; color: var(--community-cyan); font-size: 8.5px; cursor: pointer; }.community-channel-objects { padding: 0 16px 12px; }.community-channel-objects h3 { margin: 5px 0 8px; color: var(--tx-3); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }.community-channel-objects > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }.community-channel-objects article { min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--bg-3) 80%, transparent); }.community-channel-objects article > span { color: var(--community-cyan); font-size: 7px; font-weight: 800; }.community-channel-objects strong, .community-channel-objects p { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.community-channel-objects strong { margin-top: 3px; font-size: 9.5px; }.community-channel-objects p { margin: 3px 0; color: var(--tx-4); font-size: 8px; }.community-channel-compose { padding: 12px 16px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-3) 65%, transparent); }.community-thread-state { margin: 10px 16px 0; }

.community-profile-modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 20px; }.community-profile-modal[hidden] { display: none; }.community-modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,4,10,.76); backdrop-filter: blur(10px); }.community-profile-dialog { position: relative; width: min(820px, calc(100vw - 30px)); max-height: min(860px, calc(100vh - 30px)); overflow: auto; border: 1px solid rgba(56,215,255,.2); border-radius: 20px; background: var(--bg-2); box-shadow: 0 30px 90px rgba(0,0,0,.64); }.community-profile-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(4,12,22,.76); color: var(--tx-2); font-size: 20px; cursor: pointer; }.community-profile-hero .community-profile-cover { height: 140px; }.community-profile-hero > .community-avatar { margin: -46px 0 0 28px; }.community-profile-identity { padding: 8px 28px 22px; }.community-profile-identity h2 { margin: 7px 0 0; font-size: 22px; }.community-profile-identity > span:not(.community-role) { color: var(--tx-3); font-size: 10px; }.community-profile-identity > p { max-width: 620px; color: var(--tx-2); font-size: 11px; line-height: 1.55; }.community-profile-identity .community-profile-stats { max-width: 360px; }.community-profile-actions { display: flex; flex-wrap: wrap; gap: 7px; }.community-profile-wall { padding: 18px 28px 28px; border-top: 1px solid var(--line); }.community-profile-wall > h3 { margin: 0 0 12px; font-size: 13px; }.community-profile-wall .community-post-card { margin-top: 10px; }
body.community-modal-open { overflow: hidden; }
.community-skeleton { position: relative; overflow: hidden; min-height: 70px; border-radius: 10px; background: var(--bg-3); }.community-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent); animation: communityShimmer 1.3s infinite; }.community-skeleton.post { min-height: 220px; }.community-skeleton.profile { min-height: 260px; }.community-skeleton.compact { width: 100%; min-height: 44px; }@keyframes communityShimmer { to { transform: translateX(100%); } }

@media (max-width: 1240px) {
  .community-layout { grid-template-columns: 210px minmax(420px, 1fr); }
  .community-right { position: static; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-column: 1 / -1; max-height: none; overflow: visible; }
  .community-safety-card { display: none; }
}
@media (max-width: 900px) {
  .community-hero { grid-template-columns: 1fr; gap: 15px; }
  .community-layout { grid-template-columns: 1fr; }
  .community-left { position: static; max-height: none; overflow: visible; }
  .community-self-card, .community-rail-section, .community-boundary-note { display: none; }
  .community-nav { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); overflow-x: auto; }
  .community-nav button { justify-content: center; min-width: 105px; }
  .community-right { grid-column: auto; }
}
@media (max-width: 680px) {
  .community-v2 { padding-bottom: 86px; }
  .community-hero { margin-inline: -6px; padding: 16px; border-radius: 14px; }
  .community-hero p { font-size: 11px; }.community-search { min-height: 40px; }
  .community-nav { grid-template-columns: repeat(5, 118px); }.community-nav button { min-width: 0; }
  .community-tabs { overflow-x: auto; }.community-tab-status { display: none; }
  .community-composer-v2 { padding: 11px; }.community-composer-v2 > .community-avatar { display: none; }.community-compose-actions .community-action:disabled { display: none; }.community-compose-spacer { display: none; }.community-compose-actions select { margin-left: auto; }
  .community-post-head { padding: 12px 12px 7px; }.community-post-text { padding-inline: 13px; }.community-post-actions { margin-inline: 8px; }.community-post-actions button { padding-inline: 6px; }.community-post-media { max-height: 390px; }.community-post-media a, .community-post-media img { min-height: 150px; }
  .community-right { display: none; }.community-channel-head { flex-direction: column; }.community-channel-pills { justify-content: flex-start; }.community-channel-objects > div { grid-template-columns: 1fr; }.community-channel-message.reply { margin-left: 10px; }
  .community-profile-modal { padding: 8px; }.community-profile-dialog { width: 100%; max-height: calc(100vh - 16px); border-radius: 16px; }.community-profile-hero .community-profile-cover { height: 110px; }.community-profile-hero > .community-avatar { margin-left: 16px; }.community-profile-identity, .community-profile-wall { padding-inline: 16px; }
  .community-search-results > button { width: 100%; margin: 2px 0; }
}

/* Community social workspace composition — owner visual reference, 2026-09-01. */
.community-v2 {
  --community-cyan: #21c8ff;
  --community-blue: #4698ff;
  --community-violet: #8c63ff;
  width: min(1540px, 100%);
  padding-bottom: 46px;
}
.community-layout {
  display: grid;
  grid-template-columns: 64px minmax(500px, 1.8fr) minmax(360px, .85fr);
  gap: 14px;
  align-items: start;
}
.community-center { display: flex; min-width: 0; flex-direction: column; gap: 12px; }
.community-social-dock {
  position: sticky; top: 8px; display: flex; width: 64px;
  height: calc(100vh - 178px); min-height: 480px; max-height: 790px;
  flex-direction: column; align-items: center; gap: 8px; padding: 10px 7px 8px;
  overflow: hidden; border: 1px solid var(--line-2); border-radius: 14px;
  background: linear-gradient(180deg, rgba(9,19,33,.96), rgba(5,13,24,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.community-dock-button {
  display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center;
  border: 1px solid transparent; border-radius: 11px; background: transparent;
  color: var(--tx-3); font: inherit; font-size: 16px; cursor: pointer;
}
.community-dock-button:hover { border-color: var(--line-2); background: var(--bg-3); color: var(--tx); }
.community-dock-primary { border-color: rgba(33,200,255,.2); background: rgba(33,200,255,.08); color: var(--community-cyan); }
.community-dock-people { display: flex; min-height: 0; flex: 1; flex-direction: column; align-items: center; gap: 9px; padding-top: 2px; overflow: hidden auto; scrollbar-width: none; }
.community-dock-people::-webkit-scrollbar { display: none; }
.community-followed-person { position: relative; display: block; width: 38px; height: 38px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.community-followed-person:hover { transform: translateY(-1px); filter: brightness(1.08); }
.community-followed-person .community-avatar { pointer-events: none; }
.community-dock-person-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.community-following-mark { position: absolute; right: 0; bottom: 1px; width: 8px; height: 8px; border: 2px solid #07111f; border-radius: 50%; background: var(--pos); }
.community-dock-count { display: grid; width: 28px; height: 25px; flex: 0 0 auto; place-items: center; border-top: 1px solid var(--line); color: var(--tx-3); font-size: 8px; font-weight: 800; }
.community-dock-empty { display: grid; width: 34px; height: 34px; place-items: center; border: 1px dashed var(--line-2); border-radius: 11px; color: var(--tx-4); font-size: 9px; }

.community-stream-toolbar { display: flex; min-width: 0; flex-direction: column; gap: 10px; padding: 0 4px 3px; }
.community-search { min-height: 42px; grid-template-columns: 23px 1fr auto; border-radius: 13px; background: rgba(9,19,34,.86); }
.community-search:focus-within { border-color: rgba(33,200,255,.46); box-shadow: 0 0 0 3px rgba(33,200,255,.07); }
.community-search input { font-size: 11.5px; }
.community-search input::placeholder { color: var(--tx-4); }
.community-search kbd { color: var(--tx-4); font-size: 8px; }
.community-stream-heading { display: flex; min-height: 36px; align-items: center; gap: 9px; }
.community-heading-icon { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(33,200,255,.21); border-radius: 8px; background: rgba(33,200,255,.07); color: var(--community-cyan); }
.community-stream-heading h1 { margin: 0; font-size: 13px; letter-spacing: -.01em; }
.community-tab-status { margin-left: 0; padding: 3px 7px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--tx-3); font-size: 8px; font-weight: 700; }
.community-tab-status[data-tone="error"] { border-color: rgba(255,82,128,.22); color: var(--neg); }
.community-tab-status[data-tone="loading"] { border-color: rgba(255,187,57,.22); color: var(--warn); }
.community-sort { display: flex; width: fit-content; overflow: hidden; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(8,17,31,.72); }
.community-sort[hidden] { display: none; }
.community-sort button { display: inline-flex; min-height: 31px; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--tx-3); font: inherit; font-size: 9.5px; cursor: pointer; }
.community-sort button:last-child { border-right: 0; }
.community-sort button:hover { color: var(--tx); background: var(--bg-3); }
.community-sort button.active { background: rgba(33,200,255,.1); color: var(--community-cyan); }

.community-avatar.xl { width: 54px; height: 54px; border-radius: 17px; }
.community-composer-v2 { gap: 11px; padding: 13px 14px; border-color: var(--line-2); border-radius: 14px; background: linear-gradient(145deg, rgba(10,21,38,.97), rgba(9,17,31,.94)); }
.community-compose-main textarea { min-height: 42px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #0a1629; font-size: 11.5px; }
.community-compose-main textarea:focus { border-color: rgba(33,200,255,.35); }
.community-compose-actions { gap: 7px; }
.community-action { min-height: 30px; gap: 6px; padding: 0 9px; border-color: var(--line-2); border-radius: 8px; background: rgba(12,25,44,.78); color: var(--tx-2); font-size: 9.5px; font-weight: 700; }
.community-action span { color: var(--community-cyan); }
.community-action:hover:not(:disabled) { border-color: rgba(33,200,255,.28); background: rgba(33,200,255,.08); color: var(--tx); }
.community-publish { display: inline-flex; align-items: center; gap: 6px; }

.community-post-card { border-radius: 14px; background: rgba(8,18,33,.94); }
.community-post-text { font-size: 11.5px; line-height: 1.62; }
.community-object-card { display: block; margin: 2px 14px 12px; padding: 12px; overflow: hidden; border: 1px solid rgba(33,200,255,.21); border-radius: 12px; background: linear-gradient(145deg, rgba(7,19,34,.98), rgba(7,14,28,.98)); }
.community-object-type-backtest { border-color: rgba(19,224,174,.27); }
.community-object-type-result { border-color: rgba(33,200,255,.27); }
.community-object-type-strategy { border-color: rgba(113,113,255,.28); }
.community-object-type-chart { border-color: rgba(57,166,255,.28); }
.community-object-head { display: grid; grid-template-columns: 31px minmax(0,1fr) auto; align-items: center; gap: 9px; }
.community-object-icon { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(33,200,255,.18); border-radius: 8px; background: rgba(33,200,255,.07); color: var(--community-cyan); }
.community-object-card .community-object-kind { color: var(--community-cyan); font-size: 7px; font-weight: 850; letter-spacing: .14em; }
.community-object-card h4 { margin: 3px 0 0; overflow-wrap: anywhere; font-size: 11.5px; line-height: 1.3; }
.community-attested { padding: 4px 6px; border: 1px solid rgba(19,224,174,.25); border-radius: 6px; background: rgba(19,224,174,.07); color: var(--pos); font-size: 7px; font-weight: 800; white-space: nowrap; }
.community-object-card .community-object-summary, .community-object-card .community-object-source { margin: 8px 0 0; color: var(--tx-3); font-size: 8.5px; line-height: 1.45; }
.community-object-card .community-object-source { color: var(--tx-4); }
.community-object-chart { position: relative; display: block; height: 112px; margin-top: 10px; overflow: hidden; border: 1px solid var(--line-2); border-radius: 9px; background: linear-gradient(180deg, rgba(4,12,24,.9), rgba(4,9,19,.96)); }
.community-object-chart img, .community-object-chart svg { display: block; width: 100%; height: 100%; }
.community-object-chart img { object-fit: cover; }
.community-object-chart .grid { fill: none; stroke: rgba(109,142,185,.13); stroke-width: 1; }
.community-object-chart polyline { fill: none; stroke: var(--community-cyan); stroke-width: 2.2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(33,200,255,.34)); }
.community-object-chart.negative polyline { stroke: var(--neg); filter: drop-shadow(0 0 5px rgba(255,82,128,.3)); }
.community-object-chart-empty { display: grid; height: 82px; place-content: center; justify-items: center; gap: 2px; color: var(--tx-4); background-image: linear-gradient(rgba(109,142,185,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(109,142,185,.08) 1px, transparent 1px); background-size: 34px 26px; }
.community-object-chart-empty span { color: var(--community-cyan); font-size: 16px; }
.community-object-chart-empty strong { color: var(--tx-3); font-size: 8.5px; }
.community-object-chart-empty small { font-size: 7px; }
.community-object-metrics { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; margin-top: 9px; }
.community-object-metrics span { min-width: 0; padding: 7px 7px 8px; border-color: var(--line); border-radius: 8px; background: rgba(10,24,43,.86); }
.community-object-metrics small, .community-object-metrics strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-object-metrics small { color: var(--tx-4); font-size: 6.5px; letter-spacing: .02em; }
.community-object-metrics strong { margin-top: 4px; color: var(--tx); font-size: 9.5px; }
.community-object-metrics .positive strong { color: var(--pos); }
.community-object-metrics .negative strong { color: var(--neg); }
.community-object-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); color: var(--tx-4); font-size: 7px; }

.community-wall { position: sticky; top: 8px; display: block; min-width: 0; max-height: calc(100vh - 166px); padding-left: 14px; overflow: hidden auto; border-left: 1px solid var(--line); scrollbar-width: thin; }
.community-profile-summary { padding: 12px 0 11px; overflow: visible; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.community-wall-profile-head { display: grid; grid-template-columns: 54px minmax(0,1fr) 30px; align-items: start; gap: 10px; }
.community-wall-identity { min-width: 0; }
.community-wall-identity > div { display: flex; align-items: center; gap: 6px; }
.community-profile-name { max-width: 100%; margin: 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--tx); font: inherit; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.community-role { display: inline-flex; margin: 0; padding: 2px 5px; border: 1px solid rgba(33,200,255,.18); border-radius: 5px; background: rgba(33,200,255,.06); color: var(--community-cyan); font-size: 6.5px; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.community-handle { display: block; margin-top: 2px; color: var(--community-cyan); font-size: 8.5px; }
.community-wall-identity p { margin: 5px 0 0; color: var(--tx-3); font-size: 8.5px; line-height: 1.4; }
.community-wall-settings { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-3); color: var(--tx-3); cursor: pointer; }
.community-wall-settings:hover { color: var(--community-cyan); }
.community-wall-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.community-wall-actions .btn { min-height: 29px; font-size: 8.5px; }
.community-wall-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; margin-top: 10px; }
.community-wall-stats span { min-width: 0; padding: 8px 5px; border: 1px solid var(--line); border-radius: 9px; background: rgba(8,18,33,.75); text-align: center; }
.community-wall-stats small, .community-wall-stats strong { display: block; overflow: hidden; text-overflow: ellipsis; }
.community-wall-stats small { color: var(--tx-4); font-size: 6.5px; text-transform: uppercase; white-space: nowrap; }
.community-wall-stats strong { margin-top: 4px; font-size: 10px; }
.community-wall-tabs { display: flex; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.community-wall-tabs button { display: inline-flex; min-height: 31px; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--tx-3); font: inherit; font-size: 8.5px; cursor: pointer; }
.community-wall-tabs button b { color: inherit; font-size: 7.5px; }
.community-wall-tabs button.active { border-color: rgba(33,200,255,.24); background: rgba(33,200,255,.09); color: var(--community-cyan); }
.community-wall-feed { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 24px; }
.community-post-compact .community-post-head { padding: 11px 11px 7px; }
.community-post-compact .community-post-author .community-avatar { width: 34px; height: 34px; border-radius: 11px; }
.community-post-compact .community-post-text { padding: 5px 12px 10px; font-size: 10.5px; }
.community-post-compact .community-object-card { margin-inline: 10px; padding: 10px; }
.community-post-compact .community-object-head { grid-template-columns: 28px minmax(0,1fr); }
.community-post-compact .community-attested { grid-column: 2; width: fit-content; }
.community-post-compact .community-object-chart { height: 92px; }
.community-post-compact .community-object-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
.community-post-compact .community-post-actions { margin-inline: 8px; }
.community-post-compact .community-comments { padding-inline: 10px; }
.community-post-compact .community-post-media a, .community-post-compact .community-post-media img { min-height: 130px; }

@media (max-width: 1120px) {
  .community-layout { grid-template-columns: 64px minmax(0,1fr); }
  .community-wall { position: static; grid-column: 2; max-height: none; padding-left: 0; overflow: visible; border-left: 0; }
}
@media (max-width: 760px) {
  .community-layout { grid-template-columns: 1fr; }
  .community-social-dock { position: static; width: 100%; height: auto; min-height: 0; max-height: none; flex-direction: row; justify-content: flex-start; padding: 7px; overflow-x: auto; }
  .community-dock-people { flex-direction: row; overflow: visible; }
  .community-dock-count { border-top: 0; }
  .community-wall { grid-column: 1; }
  .community-object-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .community-search kbd { display: none; }
  .community-sort { width: 100%; }
  .community-sort button { flex: 1; justify-content: center; }
  .community-wall-stats { grid-template-columns: repeat(2,1fr); }
}

/* =========================================================================
   SF Chat — unified human + AI shell. The AI conversation implementation
   remains intact behind this presentation layer.
   ========================================================================= */
.sf-chat-mark {
  position: relative; display: inline-flex; align-items: baseline; justify-content: center;
  min-width: 34px; height: 28px; color: #dff9ff; font-family: Inter, "Segoe UI", sans-serif;
  font-weight: 300; font-style: italic; letter-spacing: -7px; line-height: 28px;
  filter: drop-shadow(0 0 8px rgba(45, 205, 255, .42));
}
.sf-chat-mark i { font-style: inherit; font-size: 25px; }
.sf-chat-mark i:first-child { color: #ebfbff; transform: scaleX(1.08); }
.sf-chat-mark i:last-child { color: #35c8ff; transform: translateX(2px) scaleX(.92); }
.orch-fab {
  right: 24px; bottom: 36px; width: 60px; height: 60px;
  color: #eafaff; background: radial-gradient(circle at 36% 27%, #122b43 0, #07131f 48%, #02070d 100%);
  border: 1px solid rgba(75, 215, 255, .72);
  box-shadow: 0 0 0 4px rgba(38, 185, 255, .08), 0 0 28px rgba(28, 176, 255, .44), 0 18px 42px rgba(0, 0, 0, .62);
}
.orch-fab:hover { box-shadow: 0 0 0 5px rgba(38, 185, 255, .1), 0 0 38px rgba(28, 176, 255, .58), 0 20px 48px rgba(0,0,0,.66); }
.orch-fab .sf-chat-mark { transform: scale(1.06); }
.orch-fab-notice { top: -5px; left: auto; right: -4px; border-color: #06101b; }

.sf-chat-panel {
  right: 24px; bottom: 34px; width: min(570px, calc(100vw - 34px)); height: min(680px, calc(100vh - 48px));
  background: linear-gradient(155deg, rgba(10, 24, 39, .99), rgba(3, 10, 18, .995));
  border-color: rgba(53, 199, 255, .31); border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(114, 222, 255, .05), 0 0 48px rgba(20, 161, 255, .13), 0 30px 90px rgba(0,0,0,.72);
}
.sf-chat-panel .orch-head {
  min-height: 64px; padding: 10px 12px; gap: 9px;
  background: linear-gradient(100deg, rgba(10, 25, 41, .98), rgba(5, 14, 25, .98));
  border-bottom-color: rgba(86, 204, 255, .14);
}
.orch-head-brand { display: inline-flex; align-items: center; padding: 0 3px 0 1px; }
.orch-head-brand .sf-chat-mark { min-width: 38px; transform: scale(.9); transform-origin: center; }
.sf-chat-panel .orch-head-name { letter-spacing: .09em; font-weight: 650; text-transform: uppercase; }
.sf-chat-panel .orch-head-sub { color: #8da8c2; }
.sf-chat-panel .orch-main { background: radial-gradient(circle at 85% 8%, rgba(34, 169, 255, .07), transparent 36%); }
.sf-chat-panel .orch-compose { background: rgba(5, 15, 26, .96); border-top-color: rgba(63, 195, 255, .14); }
.sf-chat-panel .orch-input textarea { background: rgba(8, 22, 36, .9); border-color: rgba(76, 176, 225, .18); }
.sf-chat-panel .orch-input textarea:focus { border-color: rgba(50, 203, 255, .62); box-shadow: 0 0 0 3px rgba(36, 181, 255, .08); }
.sf-chat-panel .orch-send { background: linear-gradient(135deg, #47d3ff, #6485ff); color: #03101a; box-shadow: 0 6px 18px rgba(42, 176, 255, .23); }
.orch-attach {
  flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; border: 1px solid var(--line-2); background: var(--bg-1); color: var(--tx-2); cursor: pointer;
}
.orch-attach:hover { color: var(--brand); border-color: var(--brand-line); }
.orch-attach svg { width: 18px; height: 18px; }
.orch-attachments { display: flex; gap: 7px; overflow-x: auto; padding: 8px 10px 0; }
.orch-attachments[hidden] { display: none; }
.orch-attachment-preview {
  display: inline-grid; grid-template-columns: 34px minmax(40px, 110px) 24px; align-items: center; gap: 6px;
  flex: 0 0 auto; padding: 4px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--bg-1);
  color: var(--tx-2); font-size: 10px;
}
.orch-attachment-preview img { width: 34px; height: 30px; border-radius: 6px; object-fit: cover; }
.orch-attachment-preview > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orch-attachment-preview button { display: inline-flex; border: 0; background: transparent; color: var(--tx-3); cursor: pointer; padding: 3px; }
.orch-attachment-preview button svg { width: 13px; height: 13px; }

.orch-convo-face, .orch-human-face {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(59, 200, 255, .26); background: linear-gradient(135deg, #153350, #091524);
  color: #6bdcff; font-size: 12px; font-weight: 800;
}
.orch-convo-face img, .orch-human-face img { width: 100%; height: 100%; object-fit: cover; }
.orch-convo-state.human { color: #59cfff; font-weight: 650; }
.orch-msg.human.assistant { background: rgba(16, 31, 47, .92); }
.orch-msg.human.user { background: linear-gradient(135deg, rgba(22, 113, 167, .38), rgba(84, 70, 177, .26)); }
.orch-human-face { width: 30px; height: 30px; margin-left: -4px; }
.orch-msg.human .orch-msg-meta { text-align: right; opacity: .86; }

.sf-notice-wrap {
  top: auto; right: 24px; bottom: 108px; width: min(320px, calc(100vw - 28px)); max-height: 260px;
  transform: none; transition: opacity .3s ease, right .28s cubic-bezier(.22, 1, .36, 1), bottom .25s ease;
}
body:has(.orch-panel.open) .sf-notice-wrap { opacity: 0; pointer-events: none; }
/* The card sits directly above the SF Chat launcher, so it carries the same
   cyan accent the launcher and the shell do. It used to rest on a violet
   border and glow, which read as a second, unrelated accent system. */
.sf-notice { padding: 13px; gap: 7px; transform: translateY(12px) scale(.98); border-color: rgba(104, 200, 255, .46); background: linear-gradient(150deg, rgba(12, 31, 51, .97), rgba(6, 18, 33, .97)); box-shadow: 0 0 0 1px rgba(177, 235, 255, .05), 0 0 26px rgba(38, 167, 240, .16), 0 18px 44px rgba(0,0,0,.58); }
.sf-notice.in { transform: translateY(0) scale(1); }
.sf-notice.leaving { transform: translateY(10px) scale(.98) !important; }
.sf-notice-source { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sf-notice-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 auto; overflow: hidden; border-radius: 50%; border: 1px solid rgba(69, 205, 255, .34); background: #0b1d2f; color: #64d9ff; font-size: 10px; font-weight: 800; }
.sf-notice-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sf-notice-avatar.ai { width: 26px; height: 26px; }
.sf-notice-avatar .sf-chat-mark { min-width: 22px; height: 20px; transform: scale(.62); }
.sf-notice-kicker { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: .1px; color: #9bb1c8; }
.sf-notice-actions { position: relative; z-index: 1; display: flex; gap: 7px; margin-top: 2px; }
.sf-notice-actions > span { padding: 7px 10px; border-radius: 8px; background: linear-gradient(140deg, #55d8ff, #5a82f5); color: #03101a; font-size: 10.5px; font-weight: 750; }
.sf-notice-actions > span.ghost { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); color: #c5d2e0; }
.sf-notice-more { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin: 2px -13px -13px; padding: 8px 13px; border-top: 1px solid rgba(255,255,255,.08); color: #7990a8; font-size: 10px; }
.sf-notice-more strong { padding: 3px 7px; border-radius: 999px; background: rgba(64, 182, 255, .16); color: #bfe4ff; }

@media (max-width: 760px) {
  .orch-fab { right: 14px; bottom: 70px; width: 52px; height: 52px; }
  .sf-notice-wrap { top: auto; right: 12px; bottom: 132px; width: min(320px, calc(100vw - 24px)); max-height: 230px; }
  .sf-chat-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; }
  .orch-head-brand { display: none; }
  .sf-chat-panel .orch-head { min-height: 58px; }
}

/* =========================================================================
   Community owner-review pass — independent columns, compact controls and
   the restrained SF Chat mark from the Streamline SF visual direction.
   ========================================================================= */
@media (min-width: 1121px) {
  body[data-page="community"] .main.has-global-news-strip .content {
    padding-bottom: 38px;
  }
  body[data-page="community"] .community-layout {
    height: calc(100vh - 166px);
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
  }
  body[data-page="community"] .community-social-dock {
    height: 100%;
    min-height: 0;
    max-height: none;
    position: relative;
  }
  body[data-page="community"] .community-center,
  body[data-page="community"] .community-wall {
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(77, 181, 231, .34) transparent;
    scrollbar-width: thin;
  }
  body[data-page="community"] .community-center {
    padding-right: 4px;
  }
  body[data-page="community"] .community-wall {
    position: relative;
  }
}

.community-post-actions {
  min-height: 42px;
  gap: 3px;
  padding: 6px 0;
}
.community-post-action {
  min-height: 30px;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--tx-3);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
.community-post-action:hover {
  border-color: rgba(82, 190, 235, .18);
  background: rgba(32, 72, 103, .25);
  color: var(--tx);
}
.community-post-action .community-action-icon {
  display: inline-flex;
  width: 15px;
  height: 15px;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.community-post-action .community-action-icon svg { width: 15px; height: 15px; }
.community-post-action .community-action-count { color: var(--tx-2); font-variant-numeric: tabular-nums; }
.community-post-action[data-reaction].active { color: #ff6489; background: rgba(255, 84, 126, .08); }
.community-post-action[data-reaction].active .community-action-count { color: #ff9ab3; }
.community-post-action.community-bookmark-action.active { color: #ffd05a; background: rgba(255, 190, 56, .08); }
.community-bookmark-action .community-action-label { display: none; }
.community-post-compact .community-action-label { display: none; }
.community-post-compact .community-post-action { padding-inline: 6px; }

@media (max-width: 900px) {
  .community-post-action .community-action-label { display: none; }
  .community-post-action { padding-inline: 7px; }
}

.community-visibility-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 14px;
}
.community-visibility-modal[hidden] { display: none; }
.community-visibility-dialog {
  position: relative;
  width: min(500px, calc(100vw - 24px));
  max-height: min(680px, calc(100vh - 24px));
  overflow: auto;
  border: 1px solid rgba(97, 180, 235, .26);
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(14, 26, 46, .99), rgba(7, 15, 28, .99));
  box-shadow: 0 26px 78px rgba(0, 0, 0, .68), 0 0 0 1px rgba(45, 191, 255, .04);
}
.community-visibility-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 54px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.community-visibility-head > div { display: flex; min-width: 0; align-items: center; gap: 9px; }
.community-visibility-head h2 { margin: 0; font-size: 13px; letter-spacing: -.01em; }
.community-visibility-icon { color: var(--community-cyan); font-size: 17px; }
.community-visibility-close {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: rgba(5, 14, 25, .7);
  color: var(--tx-3);
  font-size: 18px;
  cursor: pointer;
}
.community-visibility-close:hover { border-color: var(--brand-line); color: var(--tx); }
.community-visibility-intro { margin: 15px 16px 12px; color: var(--tx-2); font-size: 10px; line-height: 1.5; }
.community-visibility-dialog form { display: grid; gap: 10px; padding: 0 16px 16px; }
.community-visibility-group {
  min-width: 0;
  margin: 0;
  padding: 11px 12px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: rgba(6, 15, 29, .56);
}
.community-visibility-group legend { padding: 0 5px; color: var(--tx-2); font-size: 10px; font-weight: 800; }
.community-visibility-group legend span { margin-right: 5px; color: var(--community-cyan); }
.community-visibility-group small { display: block; margin-top: 9px; color: var(--tx-4); font-size: 8px; line-height: 1.45; }
.community-visibility-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.community-visibility-status,
.community-visibility-check { display: flex; min-width: 0; align-items: center; gap: 7px; color: var(--tx-2); font-size: 9.5px; }
.community-visibility-status b { display: inline-grid; width: 15px; height: 15px; flex: 0 0 auto; place-items: center; border-radius: 4px; background: #168cf1; color: white; font-size: 10px; }
.community-visibility-check input { width: 15px; height: 15px; margin: 0; accent-color: #168cf1; }
.community-visibility-group label[for] { display: block; margin-bottom: 6px; color: var(--tx-3); font-size: 8.5px; }
.community-visibility-group select { width: 100%; min-height: 34px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; background: #0a1629; color: var(--tx); font: inherit; font-size: 9.5px; }
.community-visibility-group select:focus { border-color: rgba(33, 200, 255, .5); outline: 0; box-shadow: 0 0 0 3px rgba(33, 200, 255, .08); }
.community-visibility-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 2px; }
.community-visibility-foot > span { color: var(--tx-4); font-size: 8px; }
.community-visibility-foot .btn { min-height: 34px; font-size: 9.5px; }

/* The launcher is a compact SF mark with an orbital trace, not a glowing orb. */
.orch-fab {
  right: 24px;
  bottom: 34px;
  width: 78px;
  height: 54px;
  overflow: hidden;
  border-radius: 17px;
  justify-content: flex-start;
  padding: 0 9px;
  background: linear-gradient(145deg, #0c1d2f 0%, #071321 56%, #030910 100%);
  border: 1px solid rgba(99, 211, 255, .72);
  box-shadow: 0 0 0 1px rgba(20, 91, 133, .22), 0 10px 26px rgba(0, 0, 0, .56), inset 0 1px 0 rgba(207, 247, 255, .08);
}
.orch-fab::before {
  content: '';
  position: absolute;
  width: 112px;
  height: 78px;
  left: -35px;
  top: -30px;
  border: 1px solid rgba(71, 204, 255, .58);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-24deg);
  opacity: .8;
  pointer-events: none;
}
.orch-fab::after {
  content: 'CHAT';
  position: absolute;
  right: 8px;
  bottom: 8px;
  color: #c3deeb;
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1;
  pointer-events: none;
}
.orch-fab:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 229, 255, .95);
  box-shadow: 0 0 0 3px rgba(37, 183, 242, .1), 0 12px 32px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(207, 247, 255, .12);
}
.orch-fab.active { transform: scale(.96); }
.orch-fab .sf-chat-mark { position: relative; z-index: 1; min-width: 35px; transform: scale(.88); transform-origin: left center; filter: drop-shadow(0 0 6px rgba(45, 205, 255, .32)); }
.orch-fab-notice { top: -5px; right: -4px; border-color: #071321; }

@media (max-width: 760px) {
  .community-visibility-dialog { width: min(500px, calc(100vw - 16px)); max-height: calc(100vh - 16px); border-radius: 14px; }
  .community-visibility-grid { grid-template-columns: 1fr; }
  .community-visibility-foot { align-items: flex-end; flex-direction: column; }
  .orch-fab { right: 14px; bottom: 70px; width: 54px; height: 54px; border-radius: 16px; padding: 0; justify-content: center; }
  .orch-fab::after { display: none; }
  .orch-fab .sf-chat-mark { transform: scale(.92); transform-origin: center; }
}

/* =========================================================================
   SF Chat Orbital Glass — owner-review presentation pass
   The widget keeps the existing human/AI Orchestrator DOM and API. These
   rules only turn the floating shell into a spacious cosmic conversation
   surface with a persistent desktop conversation rail.
   ========================================================================= */
@media (min-width: 761px) {
  .sf-chat-panel {
    right: clamp(16px, 3vw, 40px);
    bottom: clamp(16px, 3vh, 28px);
    width: min(660px, calc(100vw - 32px));
    height: min(600px, calc(100vh - 40px));
    min-height: min(460px, calc(100vh - 40px));
    border-radius: 20px;
    border-color: rgba(111, 207, 255, .34);
    background: #030a14;
    box-shadow: 0 0 0 1px rgba(121, 224, 255, .07),
      0 0 72px rgba(14, 143, 230, .16), 0 34px 110px rgba(0, 0, 0, .78);
  }
  .sf-chat-panel .orch-head {
    min-height: 58px;
    padding: 9px 14px;
    gap: 9px;
    background: linear-gradient(110deg, rgba(5, 16, 29, .98), rgba(3, 10, 20, .92));
    border-bottom-color: rgba(106, 203, 255, .16);
  }
  .sf-chat-panel .orch-head-brand { padding-inline: 3px 6px; }
  .sf-chat-panel .orch-head-brand .sf-chat-mark {
    min-width: 42px;
    height: 30px;
    transform: none;
  }
  .sf-chat-panel .orch-head-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    letter-spacing: -.01em;
    text-transform: none;
  }
  .sf-chat-panel .orch-head-skin {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid rgba(93, 183, 255, .28);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(34, 116, 191, .28), rgba(25, 43, 77, .38));
    color: #83c7ff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
  }
  .sf-chat-panel .orch-head-sub { font-size: 10.5px; color: #91a9c1; }
  .sf-chat-panel .orch-task-state { font-size: 9px; }
  .sf-chat-panel #orch-skin-btn {
    width: auto;
    min-width: 0;
    padding-inline: 9px;
    gap: 7px;
    border-color: rgba(105, 194, 255, .2);
    border-radius: 11px;
    background: rgba(11, 28, 47, .8);
  }
  .sf-chat-panel .orch-skin-label {
    display: inline-flex;
    color: #c6d8e9;
    font: 650 11px/1 Inter, "Segoe UI", sans-serif;
    white-space: nowrap;
  }
  .sf-chat-panel #orch-skin-btn svg { color: #8dcfff; }
  .sf-chat-panel #orch-new { display: none; }
  .sf-chat-panel .orch-body {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    min-height: 0;
    background: #030a14;
  }
  .sf-chat-panel .orch-drawer-scrim { display: none; }
  .sf-chat-panel .orch-convos {
    position: relative;
    inset: auto;
    z-index: 1;
    width: auto;
    min-width: 0;
    padding: 13px 9px 12px;
    gap: 4px;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(5, 18, 32, .96), rgba(3, 11, 21, .98));
    border-right-color: rgba(105, 193, 255, .16);
    box-shadow: inset -1px 0 0 rgba(173, 232, 255, .03);
  }
  .sf-chat-panel .orch-convos::before { display: none; }
  .sf-chat-panel .orch-convo-tools { gap: 9px; padding: 0 2px 13px; }
  .sf-chat-panel .orch-convo-tools-head { color: #7492ae; }
  .sf-chat-panel .orch-convo-tools-head > :last-child { border-color: rgba(105, 193, 255, .18); color: #9fb5c9; background: rgba(8, 24, 40, .74); }
  .sf-chat-panel .orch-convo-search {
    min-height: 39px;
    border-color: rgba(105, 193, 255, .2);
    background: rgba(6, 20, 34, .82);
    color: #7fa2bf;
  }
  .sf-chat-panel .orch-convo-search:focus-within { border-color: rgba(82, 199, 255, .55); box-shadow: 0 0 0 2px rgba(40, 168, 231, .09); }
  .sf-chat-panel .orch-convo-new {
    min-height: 40px;
    border-color: rgba(91, 198, 255, .48);
    background: linear-gradient(135deg, rgba(25, 111, 165, .34), rgba(35, 67, 120, .32));
    color: #d7ecf8;
  }
  .sf-chat-panel .orch-convo-filters { border-color: rgba(105, 193, 255, .15); background: rgba(3, 14, 26, .72); }
  .sf-chat-panel .orch-convo-filters button.active { background: rgba(38, 133, 190, .25); color: #78d7ff; box-shadow: inset 0 0 0 1px rgba(87, 197, 255, .25); }
  .sf-chat-panel .orch-convo-list { gap: 5px; scrollbar-color: rgba(89, 188, 241, .3) transparent; }
  .sf-chat-panel .orch-convo {
    min-height: 66px;
    padding: 11px 10px;
    gap: 10px;
    border-radius: 12px;
    border-color: transparent;
  }
  .sf-chat-panel .orch-convo:hover { background: rgba(30, 77, 112, .28); }
  .sf-chat-panel .orch-convo.active {
    background: linear-gradient(135deg, rgba(33, 109, 164, .3), rgba(35, 63, 115, .28));
    border-color: rgba(92, 196, 255, .4);
    box-shadow: inset 3px 0 0 #4acbff, 0 8px 24px rgba(4, 54, 92, .18);
  }
  .sf-chat-panel .orch-convo.unread {
    border-color: rgba(92, 196, 255, .32);
    background: rgba(26, 96, 143, .17);
  }
  .sf-chat-panel .orch-convo-face,
  .sf-chat-panel .orch-human-face {
    width: 36px;
    height: 36px;
    border-color: rgba(112, 212, 255, .4);
    background: linear-gradient(145deg, #173c5a, #071523);
  }
  .sf-chat-panel .orch-convo-title { font-size: 12.5px; }
  .sf-chat-panel .orch-convo-sub { color: #809bb4; }
  .sf-chat-panel .orch-convo-state { font-size: 9.5px; }
  .sf-chat-panel .orch-main {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 88% 12%, rgba(39, 178, 255, .13), transparent 30%),
      radial-gradient(circle at 74% 92%, rgba(50, 130, 217, .12), transparent 34%),
      linear-gradient(145deg, #030b16 0%, #04101e 48%, #020812 100%);
  }
  .sf-chat-panel .orch-main::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .68;
    background-image:
      radial-gradient(circle at 18% 23%, rgba(151, 225, 255, .75) 0 1px, transparent 1.8px),
      radial-gradient(circle at 52% 12%, rgba(98, 205, 255, .55) 0 1px, transparent 1.8px),
      radial-gradient(circle at 78% 39%, rgba(129, 184, 255, .62) 0 1px, transparent 1.9px),
      radial-gradient(circle at 92% 76%, rgba(95, 181, 255, .58) 0 1px, transparent 1.8px),
      radial-gradient(circle at 37% 84%, rgba(104, 193, 255, .38) 0 1px, transparent 1.7px);
    background-size: 233px 197px, 311px 271px, 419px 383px, 257px 337px, 503px 449px;
    mix-blend-mode: screen;
  }
  .sf-chat-panel .orch-main::after {
    content: '';
    position: absolute;
    right: -14%;
    bottom: -22%;
    width: 72%;
    height: 42%;
    pointer-events: none;
    opacity: .42;
    border-top: 1px solid rgba(145, 221, 255, .6);
    border-radius: 50%;
    transform: rotate(-17deg);
    box-shadow: 0 -8px 24px rgba(67, 185, 255, .12), 0 -18px 58px rgba(48, 125, 221, .11);
  }
  .sf-chat-panel .orch-msgs {
    position: relative;
    z-index: 1;
    padding: 18px 20px 16px;
    gap: 13px;
    background: transparent;
    scrollbar-color: rgba(89, 188, 241, .34) transparent;
    scrollbar-width: thin;
  }
  .sf-chat-panel .orch-day {
    align-self: center;
    flex: 0 0 auto;
    max-width: 100%;
    padding: 0 12px;
    color: #7894ad;
    font-size: 10px;
    letter-spacing: .04em;
  }
  .sf-chat-panel .orch-msg {
    max-width: 78%;
    padding: 15px 19px;
    border-radius: 20px;
    font-size: 14px;
    line-height: 1.55;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .sf-chat-panel .orch-msg.assistant {
    background: linear-gradient(145deg, rgba(25, 47, 70, .72), rgba(8, 23, 39, .84));
    border-color: rgba(120, 201, 255, .35);
    border-bottom-left-radius: 9px;
    color: #d6e5f3;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(210, 245, 255, .08);
  }
  .sf-chat-panel .orch-msg.user {
    max-width: 70%;
    background: linear-gradient(145deg, rgba(39, 87, 130, .58), rgba(41, 50, 111, .54));
    border-color: rgba(110, 200, 255, .38);
    border-bottom-right-radius: 9px;
    color: #e3f4ff;
    box-shadow: 0 10px 28px rgba(10, 65, 111, .16), inset 0 1px 0 rgba(210, 245, 255, .07);
  }
  /* Human conversations retain their own teal/blue signature while using
     the same bubble geometry as AI conversations. */
  .sf-chat-panel .orch-msg.human.assistant {
    background: linear-gradient(145deg, rgba(25, 74, 80, .72), rgba(8, 34, 41, .86));
    border-color: rgba(88, 224, 206, .34);
  }
  .sf-chat-panel .orch-msg.human.user {
    background: linear-gradient(145deg, rgba(35, 125, 177, .64), rgba(65, 74, 154, .62));
    border-color: rgba(104, 211, 255, .52);
  }
  .sf-chat-panel .orch-msg.human .orch-msg-meta { color: #9bd1de; }
  .sf-chat-panel .orch-msg-face.agent-face {
    width: 44px;
    height: 44px;
    margin: -1px 0 0 -2px;
    border: 1px solid rgba(106, 201, 255, .45);
    border-radius: 12px;
    background: linear-gradient(145deg, #112f4b, #061421);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .24);
  }
  .sf-chat-panel .orch-compose {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, rgba(3, 11, 21, .72), rgba(3, 9, 17, .98));
    border-top-color: rgba(105, 193, 255, .18);
  }
  .sf-chat-panel .orch-input { padding: 15px 24px 20px; gap: 10px; }
  .sf-chat-panel .orch-input textarea {
    min-height: 62px;
    padding: 15px 17px;
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(16, 32, 51, .88), rgba(7, 18, 31, .9));
    border-color: rgba(126, 199, 242, .28);
    font-size: 14px;
  }
  .sf-chat-panel .orch-send,
  .sf-chat-panel .orch-mic {
    width: 54px;
    height: 54px;
    border-radius: 16px;
  }
  .sf-chat-panel .orch-send { box-shadow: 0 8px 24px rgba(33, 155, 235, .25); }
}

@media (max-width: 760px) {
  .sf-chat-panel .orch-head-brand { display: inline-flex; }
  .sf-chat-panel .orch-head-brand .sf-chat-mark { min-width: 44px; transform: scale(1.04); }
  .sf-chat-panel .orch-head-name { font-size: 17px; }
  .sf-chat-panel .orch-head-name::after { min-height: 20px; padding-inline: 7px; font-size: 9px; }
  .sf-chat-panel #orch-skin-btn { min-width: 34px; width: 34px; padding: 0; }
  .sf-chat-panel #orch-skin-btn::after { display: none; }
  .sf-chat-panel .orch-body { display: flex; }
  .sf-chat-panel .orch-drawer-scrim { display: block; }
  .sf-chat-panel .orch-convos {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 3;
    width: min(320px, 86%);
    padding: 16px 12px;
    transform: translateX(-105%);
    visibility: hidden;
    pointer-events: none;
  }
  .sf-chat-panel.show-convos .orch-convos { transform: translateX(0); visibility: visible; pointer-events: auto; }
  .sf-chat-panel .orch-main::after { opacity: .28; }
  .sf-chat-panel .orch-msgs { padding: 22px 14px 18px; gap: 14px; }
  .sf-chat-panel .orch-msg { max-width: 92%; padding: 13px 15px; font-size: 14px; border-radius: 17px; }
  .sf-chat-panel .orch-msg.user { max-width: 84%; }
  .sf-chat-panel .orch-msg.human.assistant {
    background: linear-gradient(145deg, rgba(25, 74, 80, .72), rgba(8, 34, 41, .86));
    border-color: rgba(88, 224, 206, .34);
  }
  .sf-chat-panel .orch-msg.human.user {
    background: linear-gradient(145deg, rgba(35, 125, 177, .64), rgba(65, 74, 154, .62));
    border-color: rgba(104, 211, 255, .52);
  }
  .sf-chat-panel .orch-msg.human .orch-msg-meta { color: #9bd1de; }
  .sf-chat-panel .orch-input { padding: 11px 12px 14px; }
  .sf-chat-panel .orch-input textarea { min-height: 52px; font-size: 13px; }
  .sf-chat-panel .orch-send,
  .sf-chat-panel .orch-mic { width: 48px; height: 48px; border-radius: 14px; }
}

/* =========================================================================
   SF Chat orbital launch — spatially joins the real launcher, shell and the
   single grouped notice.  No conversation or notification data is invented:
   this is only the presentation path for the existing widget and inbox.
   ========================================================================= */
.orch-orbit-link { display: none; }

/* Keep a single closed-chat notice useful without letting it cover the page. */
.sf-notice-wrap {
  width: min(300px, calc(100vw - 28px));
  max-height: 220px;
}
.sf-notice {
  gap: 5px;
  padding: 12px;
  border-radius: 14px;
}
.sf-notice-title { font-size: 13px; -webkit-line-clamp: 1; }
.sf-notice-body { -webkit-line-clamp: 2; }
.sf-notice-actions > span { padding: 6px 9px; }
.sf-notice-actions > span.ghost { display: none; }
.sf-notice-more { margin: 2px -12px -12px; padding: 7px 12px; }

@media (min-width: 1024px) {
  /* The lower orbital rail remains clear for the real launcher and one
     grouped notice. The shell still scales down on shorter desktops. */
  /* Geometry for this breakpoint lives in the later min-width:1024 block; this
     one owns only the launcher-to-shell motion. */
  .sf-chat-panel {
    opacity: 0;
    transform: translate3d(34px, 26px, 0) scale(.972);
    transform-origin: calc(100% - 30px) 100%;
    /* The shell used to animate `filter: blur(4px) -> 0` over 320ms and hold
       `will-change: filter`. Compositing a full-surface blur on a panel this
       size re-rasterised every frame, including the glass bubbles inside it,
       and the 420ms transform made open and close read as sluggish. The
       launcher-to-shell motion is kept; only its cost is not. */
    transition:
      opacity .15s cubic-bezier(.22, 1, .36, 1),
      transform .22s cubic-bezier(.16, 1, .3, 1),
      background .2s ease,
      border-color .2s ease,
      box-shadow .2s ease,
      border-radius .2s ease,
      color .2s ease;
    will-change: opacity, transform;
  }
  .sf-chat-panel.open {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .orch-orbit-link {
    position: fixed;
    right: 46px;
    bottom: 56px;
    z-index: 69;
    display: block;
    width: 132px;
    height: 72px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(.94);
    transform-origin: 100% 100%;
    transition: opacity .24s ease .05s, transform .38s cubic-bezier(.16, 1, .3, 1);
  }
  .sf-chat-panel.open ~ .orch-orbit-link {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .orch-orbit-link svg { width: 100%; height: 100%; overflow: visible; }
  .orch-orbit-glow,
  .orch-orbit-path,
  .orch-orbit-spark { fill: none; stroke-linecap: round; }
  .orch-orbit-glow {
    stroke: rgba(67, 201, 255, .32);
    stroke-width: 7;
    filter: blur(5px);
  }
  .orch-orbit-path {
    stroke: url(#sf-chat-orbit-gradient);
    stroke-width: 1.35;
  }
  .orch-orbit-spark {
    stroke: rgba(219, 250, 255, .96);
    stroke-width: 2.2;
    stroke-dasharray: 1 19;
    animation: sfOrbitFlow 3.2s linear infinite;
  }
  .orch-orbit-node {
    fill: #52d8ff;
    filter: drop-shadow(0 0 5px #38caff);
    animation: sfOrbitNode 1.9s ease-in-out infinite;
  }

  /* Other-conversation notices remain visible while the shell is open, but
     collapse into the lower rail instead of covering messages or controls. */
  body:has(.sf-chat-panel.open) .sf-notice-wrap {
    top: auto;
    right: 112px;
    bottom: 18px;
    z-index: 92;
    width: min(300px, calc(100vw - 222px));
    max-height: 78px;
    opacity: 1;
    pointer-events: none;
  }
  body:has(.sf-chat-panel.open) .sf-notice {
    min-height: 68px;
    max-height: 78px;
    padding: 9px 11px;
    gap: 2px;
    border-color: rgba(85, 204, 255, .52);
    background: linear-gradient(145deg, rgba(10, 28, 46, .98), rgba(12, 18, 38, .98));
    box-shadow: 0 0 24px rgba(48, 186, 255, .18), 0 12px 32px rgba(0, 0, 0, .52);
    transform: translateY(14px) scale(.97);
  }
  body:has(.sf-chat-panel.open) .sf-notice.in { transform: translateY(0) scale(1); }
  body:has(.sf-chat-panel.open) .sf-notice-title {
    padding-right: 46px;
    font-size: 12.5px;
    -webkit-line-clamp: 1;
  }
  body:has(.sf-chat-panel.open) .sf-notice-body,
  body:has(.sf-chat-panel.open) .sf-notice-actions { display: none; }
  body:has(.sf-chat-panel.open) .sf-notice-more {
    position: absolute;
    right: 10px;
    bottom: 8px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  body:has(.sf-chat-panel.open) .sf-notice-more > span { display: none; }
}

@keyframes sfOrbitFlow { to { stroke-dashoffset: -20; } }
@keyframes sfOrbitNode {
  0%, 100% { opacity: .55; transform: scale(.82); transform-origin: 115px 58px; }
  50% { opacity: 1; transform: scale(1.18); transform-origin: 115px 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-chat-panel,
  .orch-orbit-link { transition-duration: .01ms !important; }
  .orch-orbit-path,
  .orch-orbit-spark,
  .orch-orbit-node { animation: none !important; }
}

/* =========================================================================
   SF Chat final messenger presentation — role-aware bubbles, compact real
   conversation controls and restrained Streamline SF branding. The existing
   data sources, events and routing remain unchanged.
   ========================================================================= */
.sf-chat-mark {
  min-width: 46px;
  height: 30px;
  line-height: 1;
  letter-spacing: 0;
  filter: drop-shadow(0 0 7px rgba(74, 207, 255, .3));
}
.sf-chat-mark svg { width: 100%; height: 100%; overflow: visible; }
.sf-chat-mark path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.sf-chat-mark-s { stroke: #dffaff; stroke-width: 1.4; }
.sf-chat-mark-f { stroke: #42cfff; stroke-width: 1.55; }
.sf-notice-avatar .sf-chat-mark { min-width: 24px; width: 24px; height: 18px; transform: none; }
.sf-chat-panel .orch-head-brand .sf-chat-mark { width: 62px; min-width: 62px; height: 38px; transform: none; }
.orch-fab .sf-chat-mark { width: 40px; min-width: 40px; height: 27px; transform: none; transform-origin: center; }

.sf-chat-panel .orch-msg-body { color: #dce9f5; letter-spacing: -.006em; }
.sf-chat-panel .orch-actions {
  margin-top: 7px;
  padding-top: 0;
  border-top: 0;
  gap: 3px;
  opacity: .64;
}
.sf-chat-panel .orch-action {
  grid-template-columns: 7px minmax(0, 1fr) auto;
  gap: 6px;
  font-size: 9.5px;
  line-height: 1.25;
}
.sf-chat-panel .orch-action-mark { width: 6px; height: 6px; box-shadow: 0 0 0 2px rgba(142, 211, 244, .06); }
.sf-chat-panel .orch-action-state { font-weight: 650; text-transform: none; }
.sf-chat-panel .orch-action.waiting { color: #70859a; }
.sf-chat-panel .orch-action.waiting .orch-action-mark { background: #9a8350; box-shadow: 0 0 0 2px rgba(154, 131, 80, .06); }
.sf-chat-panel .orch-action.waiting .orch-action-state { color: #8396a8; }
.sf-chat-panel .orch-actions:hover,
.sf-chat-panel .orch-actions:focus-within { opacity: .9; }

.sf-chat-panel .orch-msg-footer {
  display: block;
  margin-top: 7px;
  padding-top: 0;
  border-top: 0;
  white-space: normal;
}
.sf-chat-panel .orch-msg-tools-summary {
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  color: #708ba4;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  opacity: .74;
  transition: color .16s ease, opacity .16s ease;
}
.sf-chat-panel .orch-msg-tools-summary::-webkit-details-marker { display: none; }
.sf-chat-panel .orch-msg-tools-summary:hover,
.sf-chat-panel .orch-msg-tools-summary:focus-visible,
.sf-chat-panel .orch-msg-footer[open] > .orch-msg-tools-summary { color: #a8c8de; opacity: 1; }
.sf-chat-panel .orch-msg-tools-label { display: inline-flex; align-items: center; gap: 5px; }
.sf-chat-panel .orch-msg-tools-label > span { color: #69cfff; font-size: 13px; letter-spacing: .08em; line-height: 1; }
.sf-chat-panel .orch-msg-tools-summary time { margin-left: auto; color: #668097; font: inherit; font-variant-numeric: tabular-nums; }
.sf-chat-panel .orch-msg-footer-panel {
  margin-top: 5px;
  padding-top: 7px;
  border-top: 1px solid rgba(121, 202, 244, .12);
}
.sf-chat-panel .orch-msg-footer-row { gap: 6px; }
.sf-chat-panel .orch-msg-footer-left { gap: 6px; }
.sf-chat-panel .orch-msg-footer .orch-msg-meta { margin-top: 3px; color: #60788f; font-size: 8.5px; }
.sf-chat-panel .orch-rating-label,
.sf-chat-panel .orch-msg-kind { font-size: 8px; letter-spacing: .035em; }
.sf-chat-panel .orch-fulfill-status { font-size: 9px; font-weight: 600; }
.sf-chat-panel .orch-fulfill-btn { width: 20px; height: 20px; border-radius: 6px; }
.sf-chat-panel .orch-rate-star { width: 18px; height: 18px; }

@media (min-width: 761px) {
  .sf-chat-panel .orch-msg.assistant {
    max-width: 76%;
    padding: 0;
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .sf-chat-panel .orch-msg.assistant > .orch-msg-stack {
    min-width: 0;
    padding: 12px 15px 10px;
    border: 1px solid rgba(120, 201, 255, .3);
    border-radius: 17px 17px 17px 7px;
    background: linear-gradient(145deg, rgba(24, 46, 68, .76), rgba(7, 21, 36, .9));
    box-shadow: 0 12px 30px rgba(0, 0, 0, .19), inset 0 1px 0 rgba(218, 247, 255, .065);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .sf-chat-panel .orch-msg.user {
    max-width: 66%;
    padding: 10px 14px 9px;
    border-radius: 17px 17px 7px 17px;
    font-size: 13.5px;
    line-height: 1.45;
    background: linear-gradient(145deg, rgba(40, 91, 135, .62), rgba(38, 48, 105, .6));
    border-color: rgba(116, 207, 255, .42);
    box-shadow: 0 9px 26px rgba(9, 60, 101, .16), inset 0 1px 0 rgba(220, 248, 255, .075);
  }
  .sf-chat-panel .orch-msg.human.assistant { background: transparent; border: 0; box-shadow: none; }
  .sf-chat-panel .orch-msg.human.assistant > .orch-msg-stack {
    background: linear-gradient(145deg, rgba(22, 66, 73, .78), rgba(6, 31, 38, .9));
    border-color: rgba(92, 222, 207, .3);
  }
  .sf-chat-panel .orch-msg-face.agent-face,
  .sf-chat-panel .orch-human-face {
    width: 39px;
    height: 39px;
    margin: 2px 0 0;
    border-radius: 11px;
    border: 1px solid rgba(113, 211, 255, .46);
    background: linear-gradient(145deg, #102e49, #06131f);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .24), 0 0 16px rgba(59, 190, 255, .08);
  }
  .sf-chat-panel .orch-msgs {
    padding: 16px 18px 14px;
    gap: 11px;
  }
  .sf-chat-panel .orch-day { margin-bottom: 1px; }
  .sf-chat-panel .orch-msg { font-size: 13.5px; line-height: 1.48; }
}

@media (min-width: 1024px) {
  /* Single source of the desktop shell geometry. Two @media (min-width:1024px)
     blocks used to set width/height/offsets for .sf-chat-panel, and the later
     one silently won, so editing the earlier block changed nothing. The default
     desktop state is a compact chat parked above the launcher, not a window
     that covers the command center behind it. */
  .sf-chat-panel {
    right: 112px;
    bottom: 104px;
    width: min(700px, calc(100vw - 150px));
    height: min(620px, calc(100vh - 150px));
    min-height: min(460px, calc(100vh - 150px));
    border-radius: 20px;
    background: rgba(2, 9, 17, .985);
    border-color: rgba(119, 214, 255, .38);
    box-shadow: 0 0 0 1px rgba(177, 235, 255, .055), 0 0 58px rgba(23, 149, 226, .14), 0 30px 92px rgba(0, 0, 0, .75);
  }
  .sf-chat-panel .orch-head { min-height: 58px; padding: 9px 14px; }
  .sf-chat-panel .orch-body { grid-template-columns: 206px minmax(0, 1fr); }
  .sf-chat-panel .orch-convos { padding: 12px 9px 11px; }
  .sf-chat-panel .orch-convo-tools { gap: 8px; padding-bottom: 11px; }
  .sf-chat-panel .orch-convo-tools-head { padding-inline: 3px; font-size: 8.5px; }
  .sf-chat-panel .orch-convo-search { min-height: 37px; border-radius: 10px; }
  .sf-chat-panel .orch-convo-new { min-height: 38px; border-radius: 10px; }
  .sf-chat-panel .orch-convo-filters button { min-height: 27px; font-size: 8.5px; }
  .sf-chat-panel .orch-convo-list { gap: 4px; }
  .sf-chat-panel .orch-convo {
    min-height: 58px;
    padding: 9px 9px;
    gap: 8px;
    border-radius: 11px;
  }
  .sf-chat-panel .orch-convo-title { font-size: 11.5px; letter-spacing: -.01em; }
  .sf-chat-panel .orch-convo-sub { margin-top: 2px; font-size: 8.8px; }
  .sf-chat-panel .orch-convo-state { margin-top: 3px; font-size: 8.5px; }
  .sf-chat-panel .orch-convo-unread { min-width: 17px; height: 17px; padding: 0 4px; font-size: 8.5px; line-height: 17px; }
  .sf-chat-panel .orch-main {
    background:
      radial-gradient(circle at 88% 10%, rgba(46, 187, 255, .16), transparent 31%),
      radial-gradient(circle at 74% 90%, rgba(53, 126, 225, .15), transparent 37%),
      radial-gradient(ellipse at 38% 56%, rgba(17, 73, 115, .09), transparent 46%),
      linear-gradient(145deg, #030b16 0%, #04101e 48%, #020812 100%);
  }
  .sf-chat-panel .orch-main::before { opacity: .82; }
  .sf-chat-panel .orch-main::after { opacity: .58; border-top-color: rgba(161, 229, 255, .7); }
  .sf-chat-panel .orch-compose {
    background: linear-gradient(180deg, rgba(3, 11, 21, .64), rgba(2, 8, 16, .98));
    border-top-color: rgba(112, 202, 248, .16);
  }
  .sf-chat-panel .orch-input { padding: 9px 14px 5px; gap: 7px; }
  .sf-chat-panel .orch-disclaimer { padding: 0 14px 9px; color: #62798d; font-size: 9.5px; }
  .sf-chat-panel .orch-input textarea {
    min-height: 44px;
    padding: 11px 13px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(15, 31, 50, .86), rgba(6, 17, 30, .92));
    border-color: rgba(132, 207, 248, .3);
    font-size: 13px;
  }
  .sf-chat-panel .orch-mic,
  .sf-chat-panel .orch-attach { width: 40px; height: 40px; border-radius: 12px; }
  .sf-chat-panel .orch-send {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(140deg, #55d8ff, #5a82f5);
    box-shadow: 0 0 0 1px rgba(178, 238, 255, .2), 0 8px 22px rgba(32, 146, 225, .24);
  }
  .orch-orbit-link {
    right: 38px;
    bottom: 34px;
    width: 146px;
    height: 78px;
  }
  .sf-chat-panel.open ~ .orch-orbit-link { opacity: .92; }
  .orch-orbit-glow { stroke: rgba(77, 211, 255, .42); stroke-width: 9; filter: blur(5.5px); }
  .orch-orbit-path { stroke-width: 1.7; }
  .orch-orbit-spark { stroke-width: 2.5; stroke-dasharray: 1 16; }
  .orch-orbit-node { filter: drop-shadow(0 0 7px #38caff); }
}

@media (max-width: 760px) {
  .sf-chat-panel .orch-head-brand .sf-chat-mark { width: 48px; min-width: 48px; height: 30px; transform: none; }
  .sf-chat-panel .orch-head { padding-inline: 10px; }
  .sf-chat-panel .orch-head-name { font-size: 16px; text-transform: none; letter-spacing: -.01em; }
  .sf-chat-panel .orch-msgs { padding: 18px 12px 14px; gap: 12px; }
  .sf-chat-panel .orch-msg.assistant {
    max-width: 94%;
    padding: 0;
    gap: 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  .sf-chat-panel .orch-msg.assistant > .orch-msg-stack {
    min-width: 0;
    padding: 11px 13px 9px;
    border: 1px solid rgba(120, 201, 255, .3);
    border-radius: 16px 16px 16px 7px;
    background: linear-gradient(145deg, rgba(24, 46, 68, .78), rgba(7, 21, 36, .91));
    box-shadow: 0 9px 24px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(218, 247, 255, .06);
  }
  .sf-chat-panel .orch-msg.user {
    max-width: 82%;
    padding: 10px 13px 9px;
    border-radius: 16px 16px 7px 16px;
    background: linear-gradient(145deg, rgba(40, 91, 135, .65), rgba(38, 48, 105, .62));
  }
  .sf-chat-panel .orch-msg.human.assistant { background: transparent; border: 0; box-shadow: none; }
  .sf-chat-panel .orch-msg.human.assistant > .orch-msg-stack {
    background: linear-gradient(145deg, rgba(22, 66, 73, .8), rgba(6, 31, 38, .92));
    border-color: rgba(92, 222, 207, .3);
  }
  .sf-chat-panel .orch-msg-face.agent-face,
  .sf-chat-panel .orch-human-face { width: 34px; height: 34px; margin: 2px 0 0; border-radius: 10px; }
  .sf-chat-panel .orch-input { padding: 9px 10px 6px; gap: 7px; }
  .sf-chat-panel .orch-disclaimer { padding: 0 12px 10px; font-size: 9.5px; }
  .sf-chat-panel .orch-input textarea { min-height: 46px; padding: 11px 12px; border-radius: 14px; }
  .sf-chat-panel .orch-mic,
  .sf-chat-panel .orch-attach { width: 40px; height: 40px; border-radius: 12px; }
  .sf-chat-panel .orch-send { width: 46px; height: 46px; border-radius: 14px; }
}

/* =========================================================================
   Community centre navigation and the system registration milestone.
   A member's wall is a place inside Community, not an overlay over it: the
   centre column swaps context and offers the way back, while the right column
   stays the signed-in member.
   ========================================================================= */
.community-profile-view { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.community-profile-view[hidden] { display: none; }
.community-profile-view-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(96, 190, 255, .16);
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(9, 24, 40, .92), rgba(5, 14, 26, .92));
}
.community-profile-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px 6px 8px;
  border: 1px solid rgba(104, 196, 255, .22);
  border-radius: 9px;
  background: rgba(10, 28, 47, .7);
  color: var(--tx); font: inherit; font-size: 11.5px; font-weight: 700;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.community-profile-back:hover { border-color: rgba(104, 196, 255, .5); color: #cfe9ff; }
.community-profile-back > span:first-child { color: #6fd0ff; font-size: 13px; line-height: 1; }
.community-profile-view-kind {
  color: var(--tx-3); font-size: 9px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; white-space: nowrap;
}
.community-profile-view .community-profile-hero {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg-2);
}
.community-profile-view .community-profile-wall { border-top: 0; padding-inline: 0; }
.community-profile-view .community-profile-wall > h3 {
  margin: 14px 0 10px; color: var(--tx-3);
  font-size: 9.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
}

/* The registration entry reads as product history, not as another social post:
   no reactions, a quieter surface, and a status strip instead of a body. */
.community-milestone {
  position: relative; overflow: hidden;
  margin-bottom: 12px; padding: 13px 14px;
  border: 1px solid rgba(103, 197, 255, .26);
  border-radius: 14px;
  background:
    radial-gradient(circle at 92% 6%, rgba(56, 190, 255, .11), transparent 46%),
    linear-gradient(140deg, rgba(11, 28, 47, .96), rgba(5, 14, 26, .97));
  box-shadow: inset 0 1px 0 rgba(200, 240, 255, .05);
}
.community-milestone > header {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 8px;
}
.community-milestone-mark {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 26px; height: 26px;
  border: 1px solid rgba(112, 208, 255, .34); border-radius: 8px;
  background: rgba(12, 36, 58, .9);
  color: #6fd0ff; font-size: 12px; line-height: 1;
}
.community-milestone > header > div { min-width: 0; flex: 1; }
.community-milestone > header strong {
  display: block; color: var(--tx); font-size: 12.5px; font-weight: 750; letter-spacing: -.01em;
}
.community-milestone > header small {
  display: block; margin-top: 2px; color: var(--tx-3); font-size: 9.5px;
}
.community-milestone-tag {
  flex: 0 0 auto; padding: 3px 7px;
  border: 1px solid rgba(104, 196, 255, .22); border-radius: 999px;
  background: rgba(10, 30, 50, .8);
  color: #8cc9ee; font-size: 8.5px; font-weight: 750;
  letter-spacing: .04em; white-space: nowrap;
}
.community-milestone > p {
  margin: 0 0 9px; color: var(--tx-2); font-size: 11.5px; line-height: 1.5;
}
.community-milestone-facts {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding-top: 9px; border-top: 1px solid rgba(120, 200, 255, .12);
}
.community-milestone-facts > span {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, .05); border-radius: 9px;
  background: rgba(6, 18, 32, .62);
}
.community-milestone-facts small {
  color: var(--tx-3); font-size: 8.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.community-milestone-facts strong {
  color: #cfe6f7; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.community-wall-feed .community-milestone { padding: 11px 12px; }
.community-wall-feed .community-milestone-facts > span { padding: 5px 8px; }

@media (max-width: 900px) {
  .community-profile-view-bar { padding: 8px 10px; }
  .community-profile-view-kind { display: none; }
  .community-milestone-facts > span { flex: 1 1 100%; }
}

/* =========================================================================
   One composer, on the member's own wall. Creating a post is an act on your
   own page, so it sits in the right column between the profile and its
   history — never in Recommendation, which is a public reading surface.
   ========================================================================= */
.community-wall-composer {
  margin-bottom: 10px;
  padding: 11px;
  border: 1px solid rgba(96, 190, 255, .17);
  border-radius: 13px;
  background: linear-gradient(150deg, rgba(10, 26, 43, .93), rgba(5, 14, 26, .95));
}
.community-wall-composer .community-avatar { display: none; }
.community-wall-composer textarea {
  min-height: 54px;
  font-size: 11.5px;
}
.community-wall-composer .community-compose-actions {
  flex-wrap: wrap;
  gap: 6px;
}
.community-wall-composer .community-action { font-size: 10px; padding: 5px 8px; }
.community-wall-composer .community-compose-spacer { flex: 1 1 100%; height: 0; }
.community-wall-composer .community-publish { padding: 6px 12px; font-size: 11px; }

/* A two-state choice of where the post goes, not a settings row. */
.community-visibility-toggle {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--bg-1);
}
.community-visibility-toggle button {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 25px; padding: 0 8px;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--tx-3);
  font: inherit; font-size: 9.5px; font-weight: 700;
  white-space: nowrap; cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.community-visibility-toggle button:hover { color: var(--tx); }
.community-visibility-toggle button.active {
  background: var(--brand-soft);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand-line);
}
.community-visibility-toggle button > span { font-size: 10px; line-height: 1; }

@media (max-width: 1240px) {
  .community-wall-composer .community-visibility-toggle button { padding: 0 6px; }
}

/* The SF monogram beside the SF Chat page title. SF Chat is one brand across
   the social surface and the messenger, so this stays a quiet glyph rather
   than a second logo lockup. */
.tb-h1 { display: inline-flex; align-items: center; gap: 9px; }
.tb-brand-mark {
  display: inline-flex; align-items: center;
  width: 34px; min-width: 34px; height: 22px;
  opacity: .95;
}
.tb-brand-mark .sf-chat-mark { min-width: 34px; width: 34px; height: 22px; }
@media (max-width: 760px) { .tb-brand-mark { display: none; } }

/* Company page: the same centre layout a member wall uses, so the reader keeps
   one mental model. Only the identity chrome differs. */
.community-org-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  margin: -46px 0 0 28px;
  border: 1px solid rgba(104, 196, 255, .4);
  background: linear-gradient(150deg, #10314f, #061423);
  color: #7fd4ff; font-weight: 750; letter-spacing: .08em;
}
.community-publish-as {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--tx-3); font-size: 9.5px; font-weight: 700;
}
.community-publish-as[hidden] { display: none; }
.community-publish-as select {
  min-height: 25px; padding: 0 6px;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--bg-1); color: var(--tx); font: inherit; font-size: 10px;
}

/* =========================================================================
   Notifications and SF Chat are two destinations, not one. A banner and an
   inbox row open the notification; the conversation behind it is reached only
   through its own labelled button. The launcher is the SF Chat mark itself —
   the plate around it belongs to the hover state, not to the resting page.
   ========================================================================= */
.sf-notice-main {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 5px;
  width: 100%; margin: 0; padding: 0;
  border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.sf-notice-main:hover .sf-notice-title { color: #d6ecff; }
.sf-notice-actions { flex-wrap: wrap; }
.sf-notice-act {
  padding: 6px 10px;
  border: 1px solid transparent; border-radius: 8px;
  background: linear-gradient(140deg, #55d8ff, #5a82f5);
  color: #03101a; font: inherit; font-size: 10.5px; font-weight: 750;
  cursor: pointer;
  transition: filter .16s ease, border-color .16s ease, color .16s ease, background .16s ease;
}
.sf-notice-act:hover { filter: brightness(1.07); }
.sf-notice-act.ghost {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .09);
  color: #c5d2e0;
}
.sf-notice-act.ghost:hover { border-color: rgba(104, 200, 255, .5); color: #e6f4ff; }
.sf-notice-more {
  border: 0; border-top: 1px solid rgba(255, 255, 255, .08);
  background: transparent; font: inherit; font-size: 10px; cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.sf-notice-more:hover { background: rgba(83, 196, 255, .06); color: #cfe9ff; }

/* The open row in the centre carries the notification in full, plus the one
   route from it into SF Chat. */
.sf-inbox-item.open {
  border-color: color-mix(in srgb, var(--brand) 62%, var(--line-2));
  background: color-mix(in srgb, var(--brand) 14%, var(--bg-2));
}
.sf-inbox-item.open .sf-inbox-body {
  display: block; -webkit-line-clamp: none; overflow: visible;
}
.sf-inbox-detail {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 2px; padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
}

/* The launcher: the SF Chat mark on the page, framed only under the pointer. */
.orch-fab,
html[data-orch-skin] .orch-fab {
  width: auto; min-width: 54px; height: auto;
  padding: 8px 11px 7px;
  flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  overflow: visible;
  border: 1px solid transparent; border-radius: 15px;
  background: transparent;
  box-shadow: none;
  transition:
    transform .18s cubic-bezier(.22, 1, .36, 1),
    background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.orch-fab::before { display: none; }
.orch-fab::after {
  content: 'CHAT';
  position: static;
  color: #93b8cc;
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: 6.5px; font-weight: 700; line-height: 1;
  letter-spacing: .34em; text-indent: .34em;
  transition: color .18s ease;
}
.orch-fab .sf-chat-mark {
  width: 34px; min-width: 34px; height: 23px;
  transform: none; transform-origin: center;
  filter: drop-shadow(0 0 5px rgba(45, 205, 255, .3));
  transition: filter .18s ease;
}
.orch-fab:hover,
.orch-fab:focus-visible,
html[data-orch-skin] .orch-fab:hover,
html[data-orch-skin] .orch-fab:focus-visible {
  transform: translateY(-1px) scale(1.07);
  border-color: rgba(99, 211, 255, .58);
  background: linear-gradient(150deg, rgba(12, 32, 52, .94), rgba(4, 12, 22, .96));
  box-shadow:
    0 0 0 1px rgba(20, 91, 133, .2),
    0 0 22px rgba(38, 178, 255, .26),
    0 14px 34px rgba(0, 0, 0, .5);
}
.orch-fab:hover::after, .orch-fab:focus-visible::after { color: #d4ecfa; }
.orch-fab:hover .sf-chat-mark, .orch-fab:focus-visible .sf-chat-mark {
  filter: drop-shadow(0 0 9px rgba(72, 216, 255, .5));
}
.orch-fab.active, html[data-orch-skin] .orch-fab.active { transform: scale(.97); }
/* Unread still has to be findable on a launcher with no plate behind it. */
.orch-fab-notice { top: -2px; right: -2px; border-color: #050f19; }

@media (prefers-reduced-motion: reduce) {
  .orch-fab, html[data-orch-skin] .orch-fab { transition-duration: .01ms; }
  .orch-fab:hover, html[data-orch-skin] .orch-fab:hover { transform: none; }
}

@media (max-width: 760px) {
  .orch-fab, html[data-orch-skin] .orch-fab {
    /* Clear of the market ticker: at 70px the wordmark sat under the strip. */
    right: 14px; bottom: 84px;
    width: auto; height: auto;
    padding: 7px 10px 6px; border-radius: 14px;
  }
  .orch-fab::after { display: block; }
  .orch-fab .sf-chat-mark { width: 32px; min-width: 32px; height: 22px; }
  .sf-inbox-detail .btn { flex: 1 1 auto; }
}

/* =========================================================================
   Permanent record. What is published stays published — there is no delete
   and no edit, for the author or the owner. The interface states the rule
   where the decision is made and marks the posts it applies to, instead of
   offering a control the server refuses.
   ========================================================================= */
.community-permanence-note {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--tx-3);
  font-size: 9.5px; line-height: 1.5;
}
.community-post-permanent {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px;
  border: 1px solid rgba(104, 196, 255, .26); border-radius: 6px;
  background: rgba(10, 30, 50, .7);
  color: #7fd0f5; font-size: 10px; font-weight: 700; line-height: 1;
  cursor: help;
}

/* A removed record leaves a marker, not a hole. The tombstone carries the fact
   and the date; it never carries the content it replaced. */
.community-post-card.community-removed,
.community-comment.community-removed {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--tx-3) 34%, transparent);
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  color: var(--tx-3);
}
.community-removed-body { display: flex; align-items: center; gap: 10px; }
.community-removed-body strong { display: block; color: var(--tx-2); font-size: 12px; font-weight: 650; }
.community-removed-body small, .community-comment.community-removed small {
  display: block; margin-top: 2px; color: var(--tx-3); font-size: 9.5px;
}
.community-comment.community-removed p { margin: 0; color: var(--tx-2); font-size: 11.5px; font-style: italic; }
.community-removed-mark {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 22px; height: 22px;
  border: 1px dashed color-mix(in srgb, var(--tx-3) 44%, transparent);
  border-radius: 7px; color: var(--tx-3); font-size: 12px; line-height: 1;
}

/* Transparent corrections: each record names the other, so the history reads
   forward rather than being rewritten. */
.community-correction-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 6px; padding: 4px 9px;
  border: 1px solid rgba(104, 196, 255, .22); border-radius: 999px;
  background: rgba(10, 30, 50, .55);
  color: #8cc9ee; font: inherit; font-size: 9.5px; font-weight: 700;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.community-correction-link::before { content: 'B3'; opacity: .8; }
.community-correction-link.later::before { content: 'B1'; }
.community-correction-link:hover { border-color: rgba(104, 196, 255, .5); color: #d5ecff; }
.community-correct-post {
  padding: 2px 7px;
  border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--tx-3);
  font: inherit; font-size: 9.5px; font-weight: 700; cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.community-correct-post:hover {
  border-color: rgba(104, 196, 255, .34);
  background: rgba(10, 30, 50, .55);
  color: #cfe9ff;
}
.community-correction-target {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 7px; padding: 6px 10px;
  border: 1px solid rgba(104, 196, 255, .26); border-radius: 9px;
  background: rgba(10, 30, 50, .6);
  color: #a9cfe8; font-size: 9.5px; font-weight: 700;
}
.community-correction-target[hidden] { display: none; }
.community-correction-target button {
  border: 0; background: transparent; color: #7fd0f5;
  font: inherit; font-size: 9.5px; font-weight: 700; cursor: pointer;
}
.community-correction-target button:hover { color: #d5ecff; }

/* ===========================================================================
   Visual audit pass: login, registration and device confirmation aligned to
   the approved reference screens. Sizes, weights and spacing below are the
   measured design, not taste; the wording and the state machine are unchanged.
   =========================================================================== */

/* ---- login: a wider stage, a larger headline ------------------------------ */
.auth-stage-login { width: min(100%, 760px); }
.auth-stage-login .auth-copy h1 { font-size: clamp(26px, 3.1vw, 40px); margin-bottom: 10px; }
.auth-stage-login .auth-copy p { font-size: clamp(14px, 1.2vw, 17px); margin-bottom: 24px; }
.auth-stage-login .auth-card-lux { padding: 30px clamp(22px, 3.4vw, 44px) 24px; border-radius: 26px; }

/* The QR sits on the card itself, split from its explanation by a hairline. */
.auth-qr-panel {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 44px);
  margin: 0 0 20px; padding: 4px 2px 0; border: 0; background: none;
}
.auth-qr-panel .auth-qr-copy { flex: 1 1 auto; gap: 8px; padding-right: clamp(14px, 3vw, 34px); border-right: 1px solid rgba(126,160,255,.16); }
.auth-qr-panel .auth-qr-copy strong { font-size: 20px; letter-spacing: -.01em; }
.auth-qr-panel .auth-qr-copy > span { font-size: 14.5px; line-height: 1.5; color: rgba(190,203,238,.7); }
.auth-qr-badge {
  width: 68px; height: 68px; margin-bottom: 12px; border-radius: 17px;
  background: rgba(30,60,120,.34); color: #7fc0ff;
}
.auth-qr-badge svg { width: 34px; height: 34px; }
.auth-qr-panel .auth-qr-frame {
  position: relative; width: min(230px, 46%); padding: 13px; border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(126,160,255,.42), 0 0 42px rgba(80,130,255,.34), 0 22px 48px rgba(4,8,24,.6);
}
.auth-qr-logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 19%; height: 19%; border-radius: 7px; background: #fff;
}
.auth-qr-logo img { width: 100%; height: 100%; object-fit: contain; }
.auth-qr-life { color: rgba(150,170,215,.6); font-size: 11.5px; }
.auth-qr-fallback { display: block; margin: 0 0 18px; font-size: 12px; text-align: center; }
.auth-or { margin: 0 0 22px; }

.auth-method { min-height: 62px; padding: 11px 16px; gap: 16px; border-radius: 15px; font-size: 17px; font-weight: 600; }
.auth-method-icon { width: 48px; height: 48px; border-radius: 13px; }
.auth-method-icon svg { width: 26px; height: 26px; }
.auth-method.telegram .auth-method-icon { background: linear-gradient(160deg, #35a7ff, #1f78d8); color: #fff; }
.auth-method.google .auth-method-icon { background: #fff; }
.auth-method.google .auth-method-icon svg { width: 24px; height: 24px; }
.auth-method-label { display: flex; flex-direction: column; gap: 2px; }
.auth-method-note { color: rgba(160,178,220,.62); font-size: 11px; font-style: normal; font-weight: 500; letter-spacing: .04em; }
.auth-method-go { font-size: 19px; }

.auth-foot-row.center { justify-content: center; }
.auth-foot-right { display: inline-flex; align-items: center; gap: 18px; }
.auth-promo-link { opacity: .72; font-size: 12px !important; }
.auth-help { display: inline-flex; align-items: center; gap: 7px; }
.auth-help-mark {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(126,160,255,.42); font-size: 11px; line-height: 1;
}

/* ---- registration: step marker, fields, method cards ---------------------- */
.auth-steps.bar { flex-direction: column; gap: 12px; margin-bottom: 22px; }
.auth-step-caption { color: rgba(206,218,250,.9); font-size: 14px; }
.auth-step-track { display: flex; align-items: center; gap: 10px; }
.auth-step-bar { width: 68px; height: 5px; border-radius: 3px; background: rgba(126,160,255,.2); }
.auth-step-bar.on { background: linear-gradient(90deg, #35a7ff, #a36eff); }
.auth-steps:not(.bar) .auth-step-label { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px; font-size: 13px; }
.auth-steps:not(.bar) .auth-step-dots { display: inline-flex; align-items: center; gap: 7px; }

.auth-cosmos .field label { font-size: 13px; margin-bottom: 7px; }
.auth-handle-input > span {
  width: 46px; min-height: 50px; border-radius: 12px 0 0 12px; color: rgba(150,175,225,.75);
}
.auth-handle-input > span svg { width: 19px; height: 19px; }
.auth-cosmos .field input { min-height: 50px; font-size: 14.5px; }
.auth-inline-divider {
  display: flex; align-items: center; gap: 14px; margin: 10px 0 2px;
  color: rgba(190,203,238,.72); font-size: 13px;
}
.auth-inline-divider::before, .auth-inline-divider::after { content: ""; flex: 1; height: 1px; background: rgba(126,160,255,.18); }
.auth-method-grid { gap: 14px; }
.auth-method-card { gap: 12px; padding: 18px 10px 16px; border-radius: 15px; font-size: 14px; font-weight: 600; }
.auth-method-card .auth-method-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(30,60,120,.34); }
.auth-method-card .auth-method-icon svg { width: 26px; height: 26px; }
.auth-method-card.telegram .auth-method-icon { background: linear-gradient(160deg, #35a7ff, #1f78d8); color: #fff; }
.auth-method-card.google .auth-method-icon { background: #fff; }
.auth-method-card.on { border-color: rgba(126,190,255,.72); background: rgba(24,40,84,.78); box-shadow: 0 0 0 1px rgba(126,190,255,.28), 0 0 26px rgba(70,130,255,.2); }
.auth-method-card.email.on { border-color: rgba(163,110,255,.7); box-shadow: 0 0 0 1px rgba(163,110,255,.3), 0 0 26px rgba(120,80,255,.2); }

/* ---- registration: the closing summary and consent ------------------------ */
.auth-summary { padding: 2px 18px; border-radius: 16px; }
.auth-summary > div { padding: 15px 0; }
.auth-summary dt { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.auth-summary-icon { display: grid; place-items: center; width: 22px; height: 22px; color: rgba(140,180,255,.8); }
.auth-summary-icon svg { width: 20px; height: 20px; }
.auth-summary dd { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 14.5px; }
.auth-summary dd small { color: rgba(160,178,220,.6); font-size: 11.5px; }
.auth-terms-box { max-height: 186px; padding: 16px 18px; border-radius: 16px; scrollbar-width: thin; scrollbar-color: rgba(126,160,255,.34) transparent; }
.auth-terms-box::-webkit-scrollbar { width: 6px; }
.auth-terms-box::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(126,160,255,.34); }
.auth-terms-box strong { font-size: 15px; margin-bottom: 10px; }
.auth-terms-box p + p { margin-top: 10px; }
.auth-terms-clause { color: rgba(160,178,220,.62) !important; }
.auth-terms-accept { align-items: center; gap: 12px; margin: 16px 0 14px; font-size: 13.5px; }
.auth-terms-accept input { position: absolute; width: 20px; height: 20px; margin: 0; opacity: 0; }
.auth-check {
  flex: 0 0 auto; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 6px;
  border: 1px solid rgba(126,160,255,.5); background: rgba(10,15,32,.8); transition: background .14s ease, border-color .14s ease;
}
.auth-check::after {
  content: ""; width: 11px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px); opacity: 0; transition: opacity .14s ease;
}
.auth-terms-accept input:checked + .auth-check { border-color: transparent; background: linear-gradient(135deg, #35a7ff, #4a7dff); }
.auth-terms-accept input:checked + .auth-check::after { opacity: 1; }
.auth-terms-accept input:focus-visible + .auth-check { outline: 3px solid rgba(120,180,255,.45); outline-offset: 2px; }
.auth-full-terms { display: flex; align-items: center; justify-content: center; gap: 9px; }
.auth-full-terms svg { width: 17px; height: 17px; }
.auth-cosmos .auth-main-action { min-height: 52px; font-size: 15px; }

/* ---- device confirmation: first login ------------------------------------ */
.device-shield-art { display: block; width: 118px; margin: 0 auto 18px; }
.device-shield-art svg { width: 100%; height: auto; filter: drop-shadow(0 14px 30px rgba(40,90,200,.32)); }
.device-confirmation-heading h1 { font-size: clamp(26px, 3.6vw, 34px); }
.device-confirmation-heading p:not(.device-confirmation-kicker) { font-size: 14.5px; }
.device-access-summary.compact { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; max-width: 590px; padding: 10px 16px; text-align: center; }
.device-access-summary.compact strong { font-size: 13px; }
.device-trust-choices { gap: 18px; }
.device-trust-choice { min-height: 0; gap: 12px; padding: 20px 20px 18px; border-radius: 18px; }
.device-trust-choice.permanent { border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.07); }
.device-trust-choice.session { border-color: rgba(123,92,255,.42); background: rgba(123,92,255,.08); }
.device-trust-choice:hover { transform: none; }
.device-choice-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.device-trust-choice strong { font-size: 16.5px; }
.device-trust-choice.permanent strong { color: #4ade9b; }
.device-trust-choice.session strong { color: #b39dff; }
.device-choice-icon { flex: 0 0 auto; width: 42px; height: 42px; font-size: 22px; }
.device-trust-choice > span { color: var(--tx-2); font-size: 13px; line-height: 1.55; }
.device-choice-action {
  width: 100%; min-height: 46px; margin-top: 6px; border: 0; border-radius: 12px;
  color: #fff; font-size: 14px; font-weight: 650; cursor: pointer; transition: filter .16s ease;
}
.device-choice-action:hover:not(:disabled) { filter: brightness(1.08); }
.device-choice-action:disabled { opacity: .45; cursor: not-allowed; }
.device-choice-action.permanent { background: linear-gradient(180deg, #22a86f, #178d5b); }
.device-choice-action.session { background: linear-gradient(180deg, #7b5cff, #6540e6); }
.device-choice-action:focus-visible { outline: 3px solid rgba(120,180,255,.55); outline-offset: 2px; }
.device-pending-footer { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; font-size: 13px; }
.device-pending-mark { display: inline-grid; place-items: center; color: var(--tx-3); }
.device-pending-mark svg { width: 17px; height: 17px; }
.device-pending-footer strong { color: #ff9f43; font-size: 14px; }

/* ---- device confirmation: the code ---------------------------------------- */
.device-channel { flex-direction: row; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 14px; }
.device-channel-icon { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(30,60,120,.4); color: #7fc0ff; }
.device-channel-icon svg { width: 21px; height: 21px; }
.device-channel[data-device-channel="telegram"] .device-channel-icon { background: linear-gradient(160deg, #35a7ff, #1f78d8); color: #fff; }
.device-channel-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.device-channel-copy strong { font-size: 14px; }
.device-channel-copy span { color: var(--tx-3); font-size: 11.5px; }
.device-channel.on { box-shadow: 0 0 0 1px var(--brand-line); }
.device-code-form > label { text-align: center; font-size: 13px; }
.device-code-inputs { gap: 11px; }
.device-code-warning {
  display: flex; align-items: center; gap: 10px; max-width: 590px; margin: 16px auto 0;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px;
  background: color-mix(in srgb, var(--bg-3) 70%, transparent); color: var(--tx-2); font-size: 12.5px; text-align: left;
}
.device-code-warning svg { flex: 0 0 auto; width: 20px; height: 20px; color: #7fc0ff; }
.device-resend { font-size: 13px; }

/* ---- device confirmation: confirmed --------------------------------------- */
.device-success-seal {
  display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  border: 1px solid rgba(52,211,153,.6); color: var(--ok); background: rgba(52,211,153,.12);
  box-shadow: 0 0 34px rgba(52,211,153,.18);
}
.device-success-seal svg { width: 30px; height: 30px; }
.device-success-card { display: block; padding: 16px 18px; border-radius: 16px; }
.device-success-head { display: flex; align-items: center; gap: 14px; }
.device-success-icon { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(30,60,120,.4); color: #7fc0ff; }
.device-success-icon svg { width: 24px; height: 24px; }
.device-success-name { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; text-align: left; }
.device-success-name strong { font-size: 15px; }
.device-success-name span { color: var(--tx-2); font-size: 12.5px; }
.device-success-name small { color: var(--tx-3); font-size: 11px; }
.device-success-uses { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.device-success-uses p { margin: 0 0 10px; color: var(--tx-2); font-size: 12.5px; text-align: left; }
.device-success-use {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px;
  background: color-mix(in srgb, var(--bg-2) 70%, transparent); color: var(--tx); font-size: 13px;
}
.device-success-use + .device-success-use { margin-top: 8px; }
.device-enter { min-height: 50px; margin-top: 18px; background: linear-gradient(90deg, #35a7ff, #a36eff); border: 0; color: #fff; font-weight: 650; }

@media (max-width: 780px) {
  .auth-qr-panel { flex-direction: column; align-items: stretch; }
  .auth-qr-panel .auth-qr-copy { padding-right: 0; border-right: 0; align-items: center; text-align: center; }
  .auth-qr-panel .auth-qr-frame { width: min(220px, 72%); }
  .auth-step-bar { width: 54px; }
  .device-trust-choices { grid-template-columns: minmax(0, 1fr); }
}

/* Registration: the reference labels the fields in sentence case, at reading
   size, and pins the forward arrow to the edge of the primary button. */
.auth-cosmos .field label { text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 500; color: rgba(200,214,246,.86); }
.auth-cosmos .auth-copy h1 { font-size: clamp(24px, 3.4vw, 34px); }
.auth-cosmos .auth-copy p { font-size: clamp(13.5px, 1.15vw, 16px); }
.auth-stage-reg { width: min(100%, 640px); }
.auth-cosmos .btn.primary.auth-main-action { position: relative; }
.auth-cosmos .btn.primary.auth-main-action > span[aria-hidden="true"] { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 18px; }
.auth-cosmos .field .auth-field-hint { font-size: 12px; }

/* The reference puts the step-back control where a back control belongs. */
.device-back { left: 30px; right: auto; }

/* The client list stacks under its label; an inherited flex rule had put the
   label and the first row side by side. */
.device-success-card > .device-success-uses { display: block; }
.device-success-use { width: 100%; }

/* Security list: real marks instead of glyph placeholders, and the rename
   affordance sits on the name as the reference draws it. */
.security-machine-icon svg, .security-client-icon svg { width: 22px; height: 22px; }
.security-name-edit {
  display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 6px; color: var(--tx-3); background: transparent; cursor: pointer;
}
.security-name-edit svg { width: 15px; height: 15px; }
.security-name-edit:hover { color: var(--tx); background: var(--brand-soft); }
.security-name-edit:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 1px; }

/* ===========================================================================
   SF Chat visual audit: the rail, the answer card and the pending verdict
   brought to the approved reference. Behaviour, routing and the chat record
   are untouched; this is arrangement and weight only.
   =========================================================================== */

/* ---- left rail ------------------------------------------------------------ */
.orch-convo-tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.orch-convo-tabs-scroll { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.orch-convo-tabs-scroll::-webkit-scrollbar { display: none; }
.orch-convo-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 4px 9px; border: 0; border-bottom: 2px solid transparent;
  color: var(--tx-3); background: transparent; font-size: 13px; font-weight: 600; cursor: pointer;
}
.orch-convo-tab span { padding: 1px 6px; border-radius: 999px; background: var(--brand-soft); color: var(--tx-2); font-size: 10.5px; font-weight: 700; }
.orch-convo-tab.active { color: var(--tx); border-bottom-color: var(--brand); }
.orch-convo-tab:hover { color: var(--tx-2); }
.orch-folder-add {
  flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--line-2); border-radius: 9px; color: var(--tx-2); background: transparent; cursor: pointer;
}
.orch-folder-add:hover { color: var(--tx); border-color: var(--brand-line); background: var(--brand-soft); }
.orch-folder-add svg { width: 16px; height: 16px; }
.orch-convo-counter { display: block; margin: 2px 0 0; color: var(--tx-4); font-size: 11px; }
.orch-convo-day {
  margin: 14px 0 6px; padding: 0 2px; color: var(--tx-4);
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.orch-convo-day:first-child { margin-top: 4px; }
.orch-convo-title { display: flex; align-items: baseline; gap: 8px; }
.orch-convo-title time { margin-left: auto; flex: 0 0 auto; color: var(--tx-4); font-size: 11px; font-weight: 500; }
.orch-convo-sub { display: flex; align-items: center; gap: 8px; }
.orch-convo-folder { padding: 1px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--tx-3); font-size: 10px; }
.orch-convo.active { border-color: var(--brand-line); background: var(--brand-soft); }

/* ---- the answer card ------------------------------------------------------ */
.orch-msg-card-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 8px;
  color: var(--tx-3); font-size: 11.5px;
}
.orch-msg-author { color: var(--tx-2); font-weight: 650; }
.orch-msg-model { color: var(--tx-4); }
.orch-await { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.orch-await-label {
  padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: linear-gradient(180deg, #f6b03c, #e0912a); color: #241703;
}
.orch-await .orch-fulfill-marks { display: inline-flex; align-items: center; gap: 6px; }
.orch-await .orch-fulfill-btn {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--line-2); border-radius: 8px; color: var(--tx-2);
  background: color-mix(in srgb, var(--bg-2) 80%, transparent); cursor: pointer;
}
.orch-await .orch-fulfill-btn svg { width: 15px; height: 15px; }
.orch-await .orch-fulfill-btn[data-orch-fulfill="done"]:hover { color: var(--ok); border-color: rgba(52,211,153,.6); background: rgba(52,211,153,.12); }
.orch-await .orch-fulfill-btn[data-orch-fulfill="failed"]:hover { color: var(--neg); border-color: rgba(255,107,129,.6); background: rgba(255,107,129,.12); }
.orch-await .orch-fulfill-btn:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 1px; }

/* The details strip reads as a footer row: timestamp on the left, the opener
   on the right, exactly as the reference lays it out. */
.orch-msg-tools-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.orch-msg-tools-summary time {
  order: -1; padding: 4px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--bg-3) 70%, transparent); color: var(--tx-3); font-size: 11px;
}

/* A waiting client offers both approved answers, coloured as the reference
   colours them: permanent trust in green, this session only in violet. */
.btn.sec-approve-permanent { border-color: rgba(52,211,153,.5); color: #4ade9b; background: rgba(52,211,153,.12); }
.btn.sec-approve-permanent:hover { background: rgba(52,211,153,.2); }
.btn.sec-approve-session { border-color: rgba(123,92,255,.5); color: #b39dff; background: rgba(123,92,255,.14); }
.btn.sec-approve-session:hover { background: rgba(123,92,255,.22); }

/* Said once, quietly: the sign-in a minute ago is the proof, so no code. */
.device-fresh-note {
  max-width: 590px; margin: 0 auto 16px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid rgba(52,211,153,.3); background: rgba(52,211,153,.09);
  color: var(--tx-2); font-size: 12.5px; text-align: center;
}

/* Preview-only strip of test-data shortcuts. Deliberately amber and labelled,
   so it can never be mistaken for part of the product it sits inside. */
.preview-autofill {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin: 18px 0 4px; padding: 10px 12px; border-radius: 12px;
  border: 1px dashed rgba(255,183,3,.5); background: rgba(255,183,3,.08);
}
.preview-autofill-tag {
  padding: 2px 8px; border-radius: 999px; background: rgba(255,183,3,.9);
  color: #1b1403; font-size: 10px; font-weight: 800; letter-spacing: .1em;
}
.preview-autofill-note { flex: 1 1 180px; color: rgba(226,214,190,.8); font-size: 11.5px; line-height: 1.4; }
.preview-autofill .btn { border-color: rgba(255,183,3,.55); color: #ffd166; background: rgba(255,183,3,.12); }
.preview-autofill .btn:hover:not(:disabled) { background: rgba(255,183,3,.22); }
.auth-hero .preview-autofill { max-width: 520px; margin: 18px auto 0; justify-content: center; }
.orch-aw-task { border: 1px solid var(--line-2); border-radius: 10px; padding: 12px; margin: 9px 0; min-width: 0; overflow-wrap: anywhere; }
.orch-aw-task p { margin: 5px 0; }
.orch-aw-task small { display: block; color: var(--tx-3); line-height: 1.6; }
.orch-aw-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.orch-aw-task .btn { max-width: 100%; white-space: normal; }
.orch-aw-details summary { cursor: pointer; }
.orch-aw-details pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 340px; overflow: auto; font: inherit; }