/* ============================================================================
   FRS Core — UI Modernization mock-up stylesheet
   Standalone. Not loaded by the app. Brand hue unchanged (#E85D2C).
   Dark is the default token set; light is a parallel token set (no overrides).
   ========================================================================= */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text);
  font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
p { margin: 0; }
::selection { background: var(--brand-soft); }

/* ---------- tokens: dark (default) ---------- */
:root {
  /* brand — unchanged */
  --brand:        #E85D2C;
  --brand-strong: #FF6B35;
  --brand-deep:   #B83A12;
  --brand-soft:   rgba(232, 93, 44, .14);
  --accent-2:     #F4A742;
  --accent-2-soft: rgba(244, 167, 66, .14);

  /* semantic */
  --ok:   #3BA55D;
  --warn: #F0B232;
  --bad:  #ED4245;
  --info: #4A9EDA;
  --ok-soft:   rgba(59, 165, 93, .15);
  --warn-soft: rgba(240, 178, 50, .15);
  --bad-soft:  rgba(237, 66, 69, .15);
  --info-soft: rgba(74, 158, 218, .15);

  /* surfaces */
  --bg-app:       #0E1014;
  --bg-surface:   #14171D;
  --bg-surface-2: #1A1E25;
  --bg-elevated:  #20252E;
  --bg-hover:     #262C36;
  --bg-active:    #2C333F;
  --bg-glass:     rgba(20, 23, 29, .78);
  --line:         rgba(255, 255, 255, .07);
  --line-strong:  rgba(255, 255, 255, .13);

  /* text */
  --text:   #F2F3F5;
  --text-2: #B9BBBE;
  --text-3: #8A8F99;

  /* geometry */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* elevation */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 10px 30px rgba(0,0,0,.38);
  --sh-3: 0 28px 80px rgba(0,0,0,.55);
  --ring: 0 0 0 3px var(--brand-soft);

  /* motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --d1: 120ms; --d2: 200ms; --d3: 320ms;

  /* chrome */
  --rail-w: 264px;
  --rail-w-collapsed: 76px;
  --topbar-h: 64px;
  --rail-bg: linear-gradient(180deg, #14171D 0%, #101317 100%);
  --field-bg: rgba(255,255,255,.04);
}

/* ---------- tokens: light (parallel set) ---------- */
html[data-theme="light"] {
  --brand:        #D64E1E;
  --brand-strong: #B83A12;
  --brand-deep:   #9A3010;
  --brand-soft:   rgba(214, 78, 30, .12);
  --accent-2:     #C77F14;

  --ok: #1F8A44; --warn: #A9761A; --bad: #C7373A; --info: #2A6EA8;
  --ok-soft: rgba(31,138,68,.12); --warn-soft: rgba(169,118,26,.14);
  --bad-soft: rgba(199,55,58,.12); --info-soft: rgba(42,110,168,.12);

  --bg-app:       #F5F6F8;
  --bg-surface:   #FFFFFF;
  --bg-surface-2: #F0F2F5;
  --bg-elevated:  #FFFFFF;
  --bg-hover:     #EBEEF2;
  --bg-active:    #E2E6EC;
  --bg-glass:     rgba(255,255,255,.82);
  --line:         rgba(16, 18, 22, .09);
  --line-strong:  rgba(16, 18, 22, .17);

  --text:   #14171D;
  --text-2: #4B5563;
  --text-3: #6B7280;

  --sh-1: 0 1px 2px rgba(16,18,22,.08);
  --sh-2: 0 10px 30px rgba(16,18,22,.10);
  --sh-3: 0 28px 80px rgba(16,18,22,.18);

  --rail-bg: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
  --field-bg: rgba(16,18,22,.03);
}

/* ---------- app shell ---------- */
.app {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--d2) var(--ease);
}
.app.rail-collapsed { grid-template-columns: var(--rail-w-collapsed) 1fr; }

/* ---------- rail ---------- */
.rail {
  position: sticky; top: 0; height: 100vh;
  background: var(--rail-bg);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  z-index: 40;
}
.rail-head {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
/* Brand lockup. Replaces the former 34x34 gradient "FR" tile + .rail-brand text pair, so the rail
   header carries the service's real logo. /logo.png is a wide lockup (1136x536), so it is
   height-constrained and free to take its natural width; it is never cropped to a square. 30px
   leaves room inside the 64px rail head (the old tile was 34px, not the head height) and keeps the
   rail head from reflowing when the image lands. */
.rail-brand { min-width: 0; display: flex; align-items: center; }
.rail-brand-logo { display: block; height: 30px; width: auto; max-width: 100%; object-fit: contain; }
/* The rail lockup is left EXACTLY as authored, in both themes. The light theme must not darken it
   (`filter: brightness(...)`) and must not mount it on a near-black plate: the lockup is not
   white-on-transparent — it carries its own dark ink — so it reads on the near-white light rail
   unaided, and dimming it only makes the mark look washed out. A backing box would also read as a
   dark rectangle in the rail head (it forced the collapsed rail to carry extra padding just to fit
   the plate). */
.rail-collapse {
  margin-left: auto; width: 30px; height: 30px; border-radius: 8px;
  color: var(--text-3); display: grid; place-items: center;
}
.rail-collapse:hover { background: var(--bg-hover); color: var(--text); }

.rail-scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-3) var(--sp-3) var(--sp-4); }

/* domain switcher */
.rail-domains { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-4); }
.rail-domains::after { content: ""; height: 1px; background: var(--line); margin: var(--sp-3) 4px 0; }
.dom {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px 10px; border-radius: var(--r-md);
  color: var(--text-2); font-weight: 550; position: relative;
  transition: background var(--d1) var(--ease), color var(--d1) var(--ease);
}
.dom:hover { background: var(--bg-hover); color: var(--text); }
.dom.on { background: var(--brand-soft); color: var(--text); }
.dom.on::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--brand);
}
.dom-ico { width: 20px; display: grid; place-items: center; opacity: .95; flex: 0 0 auto; }
.dom-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dom-badge {
  font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--brand); color: #fff;
}
.dom-badge.quiet { background: var(--bg-active); color: var(--text-2); }
.dom-chev { color: var(--text-3); font-size: 10px; }

/* section nav */
.nav-group { margin-bottom: var(--sp-3); }
.nav-group-title {
  font-size: 10.5px; letter-spacing: .10em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700; padding: 6px 10px;
}
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 8px 10px; border-radius: var(--r-md);
  color: var(--text-2); font-weight: 500; font-size: 13.5px;
  transition: background var(--d1) var(--ease), color var(--d1) var(--ease);
}
.nav-item:hover { background: var(--bg-hover); color: var(--text); }
.nav-item.on { background: var(--bg-active); color: var(--text); font-weight: 600; }
.nav-item .ni-ico { width: 18px; display: grid; place-items: center; color: var(--text-3); flex: 0 0 auto; }
.nav-item.on .ni-ico { color: var(--brand); }
.nav-item .ni-pin { margin-left: auto; opacity: 0; color: var(--text-3); }
.nav-item:hover .ni-pin { opacity: 1; }
.nav-item .ni-pin.on { opacity: 1; color: var(--accent-2); }
.nav-count {
  margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px;
  border-radius: var(--r-pill); background: var(--brand); color: #fff;
}
.nav-count.soon { background: var(--bg-active); color: var(--text-2); }

.rail-foot { border-top: 1px solid var(--line); padding: var(--sp-3); display: flex; flex-direction: column; gap: 2px; }
.rail-user {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2); border-radius: var(--r-md); margin-top: var(--sp-2);
}
.rail-user:hover { background: var(--bg-hover); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff;
  background: linear-gradient(145deg, var(--brand) 0%, var(--brand-deep) 100%);
}
.rail-user .ru-t { min-width: 0; }
.rail-user .ru-t b { display: block; font-size: 13px; }
.rail-user .ru-t small { color: var(--text-3); font-size: 11.5px; }

/* collapsed rail */
.app.rail-collapsed .dom-label,
.app.rail-collapsed .dom-chev,
.app.rail-collapsed .dom-badge,
.app.rail-collapsed .nav-group-title,
.app.rail-collapsed .ni-label,
.app.rail-collapsed .ni-pin,
.app.rail-collapsed .nav-count,
.app.rail-collapsed .rail-user .ru-t { display: none; }
/* The brand lockup stays visible when collapsed (it used to be the letter tile that survived, while
   only the text was hidden), but the collapsed rail is 76px wide, so the wide lockup is scaled down
   rather than allowed to collide with the rail edges. */
.app.rail-collapsed .rail-brand-logo { height: 22px; }
/* §9.5 — the collapse control is the ONLY mouse route back to the expanded rail, so it must stay
   visible while collapsed. Hiding it (`.rail-collapse { display: none }`) is the defect: it made
   collapsing irreversible. The 76px rail cannot hold the brand lockup and the control side by side,
   so the collapsed head stacks them and centres the control, which shows the mirror-image glyph. */
.app.rail-collapsed .rail-head {
  justify-content: center; align-items: center; flex-direction: column; gap: 4px;
  height: auto; min-height: var(--topbar-h); padding: 4px 0;
}
.app.rail-collapsed .rail-collapse { margin-left: 0; }
.app.rail-collapsed .rail-collapse .ic { transform: rotate(180deg); }
.app.rail-collapsed .dom,
.app.rail-collapsed .nav-item { justify-content: center; padding: 9px 0; }
.app.rail-collapsed .dom.on::before { display: none; }
.app.rail-collapsed .rail-scroll { padding-inline: var(--sp-2); }
.app.rail-collapsed .nav-group { margin-bottom: var(--sp-2); }

/* ---------- main + topbar ---------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--topbar-h); flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-5);
  background: var(--bg-glass);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.crumbs { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-3); font-size: 13px; min-width: 0; }
.crumbs b { color: var(--text); font-weight: 600; }
.crumbs span { color: var(--text-3); }
.topbar-spacer { flex: 1 1 auto; }

.searchbtn {
  display: flex; align-items: center; gap: var(--sp-3);
  height: 38px; padding: 0 12px; min-width: 260px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--field-bg); color: var(--text-3); font-size: 13px;
  transition: border-color var(--d1) var(--ease), background var(--d1) var(--ease);
}
.searchbtn:hover { border-color: var(--brand); color: var(--text-2); }
.kbd {
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line-strong);
  background: var(--bg-surface-2); color: var(--text-2);
}
.searchbtn .kbd { margin-left: auto; }

.iconbtn {
  width: 38px; height: 38px; border-radius: var(--r-md); position: relative;
  display: grid; place-items: center; color: var(--text-2);
  border: 1px solid transparent;
}
.iconbtn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--line); }
.iconbtn .dot {
  position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 2px var(--bg-app);
}
.topbar-user { display: flex; align-items: center; gap: var(--sp-3); padding-left: var(--sp-2); border-left: 1px solid var(--line); }

.content { padding: var(--sp-6) var(--sp-5) var(--sp-7); max-width: 1400px; width: 100%; }
.view { display: none; animation: fade var(--d3) var(--ease); }
.view.on { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-head { display: flex; align-items: flex-end; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.page-head h1 { font-size: 26px; }
.page-head p { color: var(--text-3); font-size: 13.5px; margin-top: 2px; }
.page-head .ph-actions { margin-left: auto; display: flex; gap: var(--sp-2); }

.section-head { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-3); }
.section-head:first-child { margin-top: 0; }
.section-head h2 { font-size: 15px; letter-spacing: .01em; }
.section-head .sh-sub { color: var(--text-3); font-size: 12.5px; }
.section-head .sh-actions { margin-left: auto; display: flex; gap: var(--sp-2); }

/* ---------- buttons ---------- */
.btn {
  --_bg: var(--bg-elevated);
  --_fg: var(--text);
  --_bd: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 15px; border-radius: var(--r-md);
  background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd);
  font-weight: 600; font-size: 13.5px; white-space: nowrap;
  transition: transform var(--d1) var(--ease), background var(--d1) var(--ease),
              border-color var(--d1) var(--ease), box-shadow var(--d1) var(--ease);
}
.btn:hover { background: var(--bg-hover); border-color: var(--line-strong); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn.sm { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn.lg { height: 46px; padding: 0 20px; font-size: 14.5px; border-radius: var(--r-lg); }
.btn.primary {
  --_bg: linear-gradient(180deg, var(--brand-strong) 0%, var(--brand) 100%);
  --_bd: transparent; --_fg: #fff;
  box-shadow: 0 6px 18px var(--brand-soft);
}
.btn.primary:hover { --_bg: linear-gradient(180deg, #FF7A4A 0%, var(--brand-strong) 100%); }
.btn.ghost { --_bg: transparent; --_bd: transparent; --_fg: var(--text-2); }
.btn.ghost:hover { --_bg: var(--bg-hover); --_fg: var(--text); }
.btn.danger { --_bg: var(--bad-soft); --_bd: rgba(237,66,69,.35); --_fg: #FF8A8C; }
.btn.danger:hover { --_bg: rgba(237,66,69,.24); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- cards ---------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.card.elevated { background: var(--bg-elevated); box-shadow: var(--sh-2); }
.card.accent { border-left: 3px solid var(--brand); }
.card.interactive { transition: transform var(--d2) var(--ease), border-color var(--d2) var(--ease), box-shadow var(--d2) var(--ease); }
.card.interactive:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--sh-2); }
.card-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) 0; }
.card-head h3 { font-size: 14px; }
.card-head .ch-sub { color: var(--text-3); font-size: 12px; }
.card-head .ch-actions { margin-left: auto; display: flex; gap: 6px; }
.card-body { padding: var(--sp-4); }
.card-foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); display: flex; align-items: center; gap: var(--sp-2); }

/* ---------- grid ---------- */
.grid { display: grid; gap: var(--sp-4); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-hero { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.g-side { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); border: 1px solid var(--line);
  background:
    radial-gradient(120% 160% at 0% 0%, var(--brand-soft) 0%, transparent 55%),
    linear-gradient(160deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
  padding: var(--sp-5);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--hero-motif);
  background-position: right -40px bottom -30px;
  background-repeat: no-repeat; background-size: 460px auto;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: 25px; }
.hero .hero-sub { color: var(--text-2); margin-top: 4px; font-size: 13.5px; }
.hero .hero-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); flex-wrap: wrap; }
:root {
  --hero-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='200' viewBox='0 0 460 200' fill='none'%3E%3Cg stroke='%23E85D2C' stroke-opacity='.20' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 120 L26 120 L40 84 L56 138 L70 90 L86 120 L150 120 L164 78 L180 134 L194 92 L210 120 L280 120 L294 76 L310 132 L324 90 L340 120 L410 120 L424 74 L440 130 L454 88 L460 120'/%3E%3Cpath d='M0 74 L22 74 L32 52 L42 78 L50 56 L60 74 L120 74 L130 50 L140 76 L148 58 L158 74 L240 74 L250 50 L260 76 L268 58 L278 74 L360 74 L370 50 L380 76 L388 58 L398 74 L460 74' stroke-opacity='.11'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-theme="light"] {
  --hero-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='200' viewBox='0 0 460 200' fill='none'%3E%3Cg stroke='%23D64E1E' stroke-opacity='.16' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 120 L26 120 L40 84 L56 138 L70 90 L86 120 L150 120 L164 78 L180 134 L194 92 L210 120 L280 120 L294 76 L310 132 L324 90 L340 120 L410 120 L424 74 L440 130 L454 88 L460 120'/%3E%3Cpath d='M0 74 L22 74 L32 52 L42 78 L50 56 L60 74 L120 74 L130 50 L140 76 L148 58 L158 74 L240 74 L250 50 L260 76 L268 58 L278 74 L360 74 L370 50 L380 76 L388 58 L398 74 L460 74' stroke-opacity='.09'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- stat tiles ---------- */
.stat {
  background: var(--bg-surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color var(--d2) var(--ease);
}
.stat:hover { border-color: var(--line-strong); }
.stat .st-label { color: var(--text-3); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.stat .st-value { font-size: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .st-value small { font-size: 14px; color: var(--text-3); font-weight: 600; margin-left: 3px; }
.stat .st-foot { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-3); font-size: 12.5px; }
.stat .st-ico { margin-left: auto; color: var(--brand); opacity: .85; }
.trend { font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; gap: 3px; }
.trend.up { color: var(--ok); } .trend.down { color: var(--bad); }

/* sparkline / bar chart */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 2px; }
.spark i { flex: 1 1 auto; background: var(--bg-active); border-radius: 3px 3px 1px 1px; min-height: 3px; }
.spark i.hot { background: linear-gradient(180deg, var(--brand-strong), var(--brand)); }

/* progress */
.bar { height: 7px; border-radius: var(--r-pill); background: var(--bg-active); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--accent-2)); }

/* ---------- action queue ---------- */
.queue { display: flex; flex-direction: column; }
.queue-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line);
  transition: background var(--d1) var(--ease);
}
.queue-row:last-child { border-bottom: 0; }
.queue-row:hover { background: var(--bg-hover); }
.queue-ico {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--brand-soft); color: var(--brand);
}
.queue-ico.ok { background: var(--ok-soft); color: var(--ok); }
.queue-ico.warn { background: var(--warn-soft); color: var(--warn); }
.queue-ico.info { background: var(--info-soft); color: var(--info); }
.queue-t { min-width: 0; flex: 1 1 auto; }
.queue-t b { display: block; font-size: 13.5px; font-weight: 600; }
.queue-t small { color: var(--text-3); font-size: 12.5px; }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--bg-active); color: var(--text-2);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.chip .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.brand { background: var(--brand-soft); color: var(--brand); }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.info { background: var(--info-soft); color: var(--info); }
.chip.outline { background: transparent; border: 1px solid var(--line-strong); }

/* ---------- tables ---------- */
.table-wrap { overflow: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-surface); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl thead th {
  position: sticky; top: 0; z-index: 2;
  text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700;
  padding: 11px var(--sp-4); background: var(--bg-surface-2); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl tbody td { padding: 11px var(--sp-4); border-bottom: 1px solid var(--line); color: var(--text-2); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background var(--d1) var(--ease); }
.tbl tbody tr:hover { background: var(--bg-hover); }
.tbl tbody tr.me { background: var(--brand-soft); }
.tbl td b, .tbl td strong { color: var(--text); font-weight: 600; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .row-actions { display: flex; gap: 6px; justify-content: flex-end; opacity: 0; transition: opacity var(--d1) var(--ease); }
.tbl tr:hover .row-actions { opacity: 1; }
.tbl.dense tbody td { padding: 7px var(--sp-4); }

/* member cell */
.who { display: flex; align-items: center; gap: 10px; }
.who .avatar { width: 30px; height: 30px; font-size: 11.5px; }
.who .w-t b { display: block; color: var(--text); font-weight: 600; font-size: 13.5px; }
.who .w-t small { color: var(--text-3); font-size: 11.5px; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); }
.tab {
  padding: 10px 14px; color: var(--text-3); font-weight: 600; font-size: 13.5px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--d1) var(--ease), border-color var(--d1) var(--ease);
}
.tab:hover { color: var(--text-2); }
.tab.on { color: var(--text); border-bottom-color: var(--brand); }
.seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--bg-surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.seg button { padding: 6px 12px; border-radius: 9px; color: var(--text-3); font-weight: 600; font-size: 12.5px; }
.seg button.on { background: var(--bg-elevated); color: var(--text); box-shadow: var(--sh-1); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.input, .select, .textarea {
  width: 100%; background: var(--field-bg); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); padding: 10px 12px; color: var(--text);
  transition: border-color var(--d1) var(--ease), box-shadow var(--d1) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.textarea { min-height: 96px; resize: vertical; }
.hint { font-size: 12px; color: var(--text-3); }
.switch { width: 40px; height: 22px; border-radius: var(--r-pill); background: var(--bg-active); position: relative; border: 1px solid var(--line-strong); flex: 0 0 auto; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-3); transition: all var(--d2) var(--ease); }
.switch.on { background: var(--brand); border-color: transparent; }
.switch.on::after { left: 20px; background: #fff; }
.row-between { display: flex; align-items: center; gap: var(--sp-3); justify-content: space-between; }

/* ---------- modal / drawer ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(6,7,10,.62);
  backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: var(--sp-5);
}
.scrim.on { display: flex; animation: fade var(--d2) var(--ease); }
.modal {
  width: 100%; max-width: 560px; max-height: 86vh; overflow: auto;
  background: var(--bg-elevated); border: 1px solid var(--line-strong);
  border-radius: var(--r-xl); box-shadow: var(--sh-3);
  animation: pop var(--d2) var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: 15.5px; }
.modal-head .mh-sub { color: var(--text-3); font-size: 12.5px; }
.modal-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.modal-foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); display: flex; gap: var(--sp-2); justify-content: flex-end; }
.x { margin-left: auto; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); }
.x:hover { background: var(--bg-hover); color: var(--text); }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 94vw); z-index: 95;
  background: var(--bg-surface); border-left: 1px solid var(--line-strong);
  box-shadow: var(--sh-3); transform: translateX(102%);
  transition: transform var(--d3) var(--ease); display: flex; flex-direction: column;
}
.drawer.on { transform: none; }
.drawer-head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--sp-3); }
.drawer-body { padding: var(--sp-5); overflow: auto; flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-4); }
.drawer-foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); display: flex; gap: var(--sp-2); }

/* ---------- command palette ---------- */
.palette {
  position: fixed; inset: 0; z-index: 120; display: none;
  align-items: flex-start; justify-content: center; padding-top: 12vh;
  background: rgba(6,7,10,.6); backdrop-filter: blur(4px);
}
.palette.on { display: flex; animation: fade var(--d2) var(--ease); }
.palette-box {
  width: min(640px, 92vw); background: var(--bg-elevated);
  border: 1px solid var(--line-strong); border-radius: var(--r-xl);
  box-shadow: var(--sh-3); overflow: hidden; animation: pop var(--d2) var(--ease);
}
.palette-input { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.palette-input input { flex: 1 1 auto; background: none; border: 0; outline: none; font-size: 15px; }
.palette-list { max-height: 52vh; overflow: auto; padding: var(--sp-2); }
.palette-group { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 700; padding: 10px 12px 4px; }
.palette-item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--r-md); color: var(--text-2);
}
.palette-item:hover, .palette-item.sel { background: var(--bg-hover); color: var(--text); }
.palette-item .pi-ico { color: var(--text-3); }
.palette-item.on .pi-ico { color: var(--brand); }
.palette-item .pi-tag { margin-left: auto; }

/* ---------- empty / loading / toast ---------- */
.empty { padding: var(--sp-7) var(--sp-5); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.empty .e-ico {
  width: 54px; height: 54px; border-radius: var(--r-lg); display: grid; place-items: center;
  background: var(--bg-surface-2); color: var(--text-3); border: 1px solid var(--line);
}
.empty h3 { font-size: 15px; }
.empty p { color: var(--text-3); font-size: 13px; max-width: 380px; }

.skel { background: linear-gradient(90deg, var(--bg-surface-2) 25%, var(--bg-hover) 37%, var(--bg-surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 8px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skel.line { height: 12px; } .skel.line.w60 { width: 60%; } .skel.line.w40 { width: 40%; }
.skel.block { height: 72px; }

.toasts { position: fixed; top: var(--sp-5); right: var(--sp-5); z-index: 140; display: flex; flex-direction: column; gap: var(--sp-2); }
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  min-width: 280px; padding: var(--sp-3) var(--sp-4);
  background: var(--bg-elevated); border: 1px solid var(--line-strong);
  border-left: 3px solid var(--brand); border-radius: var(--r-md); box-shadow: var(--sh-2);
  animation: toastin var(--d2) var(--ease);
}
.toast.ok { border-left-color: var(--ok); }
@keyframes toastin { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* ---------- misc ---------- */
.divider { height: 1px; background: var(--line); margin: var(--sp-4) 0; }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.hstack { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.muted { color: var(--text-3); }
.small { font-size: 12.5px; }
.mono { font-variant-numeric: tabular-nums; }
.mobile-only { display: none; }
.ic { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic.lg { width: 22px; height: 22px; }
.ic.xl { width: 26px; height: 26px; }
.plan-note {
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  padding: var(--sp-4); color: var(--text-3); font-size: 12.5px; background: var(--field-bg);
}
.plan-note b { color: var(--text-2); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-hero, .g-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .rail {
    position: fixed; left: 0; top: 0; width: min(300px, 86vw);
    transform: translateX(-102%); transition: transform var(--d3) var(--ease);
    box-shadow: var(--sh-3);
  }
  .app.navopen .rail { transform: none; }
  .app.rail-collapsed { grid-template-columns: 1fr; }
  .mobile-only { display: grid; }
  .content { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
  .searchbtn { min-width: 0; }
  .searchbtn .sb-label { display: none; }
  .topbar { padding: 0 var(--sp-4); gap: var(--sp-2); }
  .page-head h1 { font-size: 22px; }
  /* §9.5 — the rail toggle is a primary control; keep a glove-sized target on touch. */
  .rail-collapse { width: 44px; height: 44px; }
}

/* ---------- beta concept badge (this folder is a preview, not the live app) ---------- */
.beta-note {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 200; display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--bg-elevated); border: 1px solid var(--line-strong);
  box-shadow: var(--sh-2); color: var(--text-2);
  font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.beta-note b { color: var(--brand-strong); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.beta-note:hover { border-color: var(--brand); color: var(--text); }
@media (max-width: 860px) {
  .beta-note { left: var(--sp-3); right: auto; bottom: var(--sp-3); transform: none; }
}