/* ═══════════════════════════════════════════════════════════════════════════
   导师圈 Daoshiq — UI PRODUCT RUNTIME · DESIGN SYSTEM
   Authority for the visual register:
     daoshiq-contract.md §1 (App tokens) · §4.0 (Web supplement) · §5.0 (Admin supplement)
     specs/09-SOURCE-POLICY.md §6 (Mini/App DNA is canonical; PC extends the SAME tokens)
     frontend/app/assets/css/tokens.css (the already-unified single token system)

   THE SOURCE-POLICY POINT THIS FILE IMPLEMENTS
   The legacy carried three token files that agreed on brand hue and disagreed on scale.
   The policy rules that one system is expressed responsively. So this file declares ONE
   token set; the role registers differ in DENSITY and CHROME, never in vocabulary.

   Density register:  Public spacious · Student comfortable · Tutor medium · Admin compact
   Separation order:  spacing → typography → surface tone → fine border → shadow
   Shadows are reserved for overlays, floating nav and sticky actions — not cards at rest.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* ── Brand indigo — identical across App, Web and Admin in the contract ── */
  --c-primary-50: #eef1ff;
  --c-primary-100: #dde2ff;
  --c-primary-200: #c0c8ff;
  --c-primary-300: #99a4ff;
  --c-primary-400: #7079f8;
  --c-primary-500: #5b54ec;
  --c-primary-600: #4c3fd6;
  --c-primary-700: #4133b3;
  --c-primary-800: #362d90;
  --c-primary-900: #2f2b73;

  /* ── Accent warm orange — growth / conversion / price ── */
  --c-accent-50: #fff4ed;
  --c-accent-100: #ffe6d4;
  --c-accent-300: #ffb27a;
  --c-accent-500: #ff7a3d;
  --c-accent-600: #f15f1f;
  --c-accent-700: #c84a15;

  /* ── Teal secondary — profile / language / success ── */
  --c-teal-50: #e8fbf6;
  --c-teal-300: #6fe3c8;
  --c-teal-500: #16b896;
  --c-teal-600: #0f9a7e;

  /* ── Semantic ── */
  --c-success: #16b896;
  --c-success-bg: #e8fbf6;
  --c-success-ink: #0f7a64;
  --c-warning: #f5a623;
  --c-warning-bg: #fff5e3;
  --c-warning-ink: #b8791a;
  --c-warning-ink-deep: #8a5a00;
  --c-danger: #ef4d6a;
  --c-danger-bg: #ffecef;
  --c-danger-ink: #a31f38;
  --c-info: #5b54ec;
  --c-info-bg: #eef1ff;
  --c-ai: #9b6df5;
  --c-ai-bg: #f3eefe;
  --c-ai-ink: #6b3fb8;

  /* ── Neutrals ── */
  --c-ink: #1a1c2e;
  --c-ink-soft: #3d4159;
  --c-text: #4a4d63;
  --c-mute: #8b8fa3;
  --c-faint: #aeb1c4;
  --c-line: #e9eaf2;
  --c-line-soft: #f1f2f8;
  --c-bg: #f7f8fc;
  --c-bg-warm: #fbfaf7;
  --c-surface: #ffffff;
  --c-surface-2: #f9fafe;

  /* ── Gradients (signature) ── */
  --grad-primary: linear-gradient(135deg, #5b54ec 0%, #7079f8 100%);
  --grad-accent: linear-gradient(135deg, #ff7a3d 0%, #f15f1f 100%);
  --grad-ai: linear-gradient(135deg, #6a5cf0 0%, #9b6df5 50%, #c66ff0 100%);
  --grad-teal: linear-gradient(135deg, #16b896 0%, #0f9a7e 100%);
  --grad-hero: linear-gradient(160deg, #eef1ff 0%, #f6f4ff 50%, #fff4ed 100%);
  --grad-dark: linear-gradient(135deg, #2f2b73 0%, #1a1c2e 100%);
  --grad-soft: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
  --c-blob-indigo: #c0c8ff;
  --c-blob-warm: #ffd4b8;

  /* ── On-dark ramp — for ink / gradient-dark surfaces ── */
  --c-on-dark: #ffffff;
  --c-on-dark-soft: #d8dae6;
  --c-on-dark-mute: #b6b9cb;
  --c-on-dark-faint: #9498ab;

  /* ── Classroom stage — the video is the content, chrome recedes ── */
  --c-stage: #0b0d12;
  --c-stage-2: #161922;
  --c-stage-3: #212533;
  --c-stage-line: #2c3040;

  /* ── Admin sidebar (contract §5.0) ── */
  --c-sidebar: #1e2033;
  --c-sidebar-2: #262943;
  --c-sidebar-text: #a7abc4;
  --c-sidebar-active: #5b54ec;

  /* ── Admin risk ramp (contract §5.0 — governance core, admin only) ── */
  --c-risk-none: #8b8fa3;
  --c-risk-low: #16b896;
  --c-risk-med: #f5a623;
  --c-risk-high: #ff7a3d;
  --c-risk-crit: #ef4d6a;

  /* ── Type scale — MOBILE base; PC overrides the SAME NAMES ── */
  --fs-display: 28px;
  --fs-h1: 22px;
  --fs-h2: 19px;
  --fs-h3: 17px;
  --fs-lg: 16px;
  --fs-md: 15px;
  --fs-sm: 13px;
  --fs-xs: 11px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* ── Space — 4px rhythm ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --sp-20: 80px; --sp-24: 96px;

  /* ── Radius ── */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* ── Elevation — meaning, not decoration ── */
  --sh-xs: 0 1px 3px rgba(26, 28, 46, 0.05);
  --sh-sm: 0 2px 10px rgba(26, 28, 46, 0.06);
  --sh-md: 0 6px 22px rgba(26, 28, 46, 0.09);
  --sh-lg: 0 14px 40px rgba(26, 28, 46, 0.14);
  --sh-primary: 0 8px 22px rgba(91, 84, 236, 0.32);
  --sh-accent: 0 8px 22px rgba(255, 122, 61, 0.32);

  /* ── Motion ── */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.15s; --dur: 0.25s; --dur-slow: 0.4s;

  /* ── Layout ── */
  --container: 1200px;
  --container-narrow: 960px;
  --nav-h: 56px;
  --topbar-h: 50px;
  --tabbar-h: 62px;
  --sidebar-w: 232px;
  --drawer-w: 880px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* ── Z-index ── */
  --z-sidebar: 50;
  --z-sticky: 90;
  --z-nav: 100;
  --z-tabbar: 110;
  --z-overlay: 200;
  --z-panel: 300;
  --z-toast: 400;

  /* ── Role density register — set by body[data-density] ── */
  --density-pad: var(--sp-4);
  --density-gap: var(--sp-3);
  --density-row: var(--sp-3);
  --density-section: var(--sp-8);
}

/* PC scale: same token names, larger values. A component never branches on width. */
@media (min-width: 1024px) {
  :root {
    --fs-display: 44px; --fs-h1: 32px; --fs-h2: 24px; --fs-h3: 19px;
    --fs-lg: 17px; --fs-md: 15px; --fs-sm: 13px; --fs-xs: 12px;
    --nav-h: 68px;
  }
}
/* Tablet intermediate — avoids a hard jump in section rhythm */
@media (min-width: 768px) and (max-width: 1023.98px) {
  :root {
    --fs-display: 36px; --fs-h1: 27px; --fs-h2: 21px;
  }
}

/* Density registers — the contract's four role temperaments.
   Public is spacious; the authenticated shells are comfortable → medium;
   Admin is an operational console and is compact. */
body[data-density='public']  { --density-pad: var(--sp-6); --density-gap: var(--sp-5); --density-row: var(--sp-4); --density-section: var(--sp-16); }
body[data-density='student'] { --density-pad: var(--sp-4); --density-gap: var(--sp-3); --density-row: var(--sp-3); --density-section: var(--sp-8); }
body[data-density='tutor']   { --density-pad: var(--sp-4); --density-gap: var(--sp-3); --density-row: var(--sp-2); --density-section: var(--sp-6); }
body[data-density='auth']    { --density-pad: var(--sp-5); --density-gap: var(--sp-4); --density-row: var(--sp-3); --density-section: var(--sp-8); }
body[data-density='admin']   { --density-pad: var(--sp-5); --density-gap: var(--sp-3); --density-row: 9px;      --density-section: var(--sp-5); }
body[data-density='classroom'] { --density-pad: var(--sp-4); --density-gap: var(--sp-3); --density-row: var(--sp-2); --density-section: var(--sp-4); }

/* ── 2. RESET + BASE ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

/* Accessibility baseline, preserved from the CURRENT DQX candidate (M3): it
   does these systematically and they are a real improvement over the legacy.
   A recompilation that drops them is the regression the brief warns against. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000;
  padding: 10px 16px; background: var(--c-ink); color: #fff;
  border-radius: 0 0 var(--r-sm) 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.skip-link:focus { left: 0; outline: 2px solid var(--c-primary-400); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Helvetica Neue', Inter, system-ui, sans-serif;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--c-primary-500); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
table { border-collapse: collapse; width: 100%; }

/* Type helpers */
.display { font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--c-ink); letter-spacing: -0.02em; }
.d-5xl { font-size: clamp(30px, 4.4vw, 56px); }
.d-4xl { font-size: clamp(26px, 3.4vw, 40px); }
.d-3xl { font-size: clamp(22px, 2.6vw, 32px); }
.h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--c-ink); line-height: var(--lh-tight); }
.h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); color: var(--c-ink); line-height: 1.3; }
.h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c-ink); line-height: 1.35; }
.h4 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--c-ink); }
.h5 { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); }
.t-lg { font-size: var(--fs-lg); } .t-md { font-size: var(--fs-md); }
.t-sm { font-size: var(--fs-sm); } .t-xs { font-size: var(--fs-xs); }
.t-2xs { font-size: 10px; }
.strong { font-weight: var(--fw-semibold); color: var(--c-ink); }
.muted { color: var(--c-mute); } .muted-2 { color: var(--c-faint); }
.ink { color: var(--c-ink); }
.mono { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: 0.92em; }
.tnum { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.balance { text-wrap: balance; }
.pretty { text-wrap: pretty; }
.text-grad { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-ai { color: var(--c-ai-ink); }
.text-accent { color: var(--c-accent-600); }
.text-primary { color: var(--c-primary-600); }
.text-success { color: var(--c-success-ink); }
.text-danger { color: var(--c-danger-ink); }
.center { text-align: center; }
.right { text-align: right; }

/* Layout primitives */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.g-1 { gap: var(--sp-1); } .g-2 { gap: var(--sp-2); } .g-3 { gap: var(--sp-3); }
.g-4 { gap: var(--sp-4); } .g-5 { gap: var(--sp-5); } .g-6 { gap: var(--sp-6); }
.g-8 { gap: var(--sp-8); }
.flex-1 { flex: 1; min-width: 0; }
.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-1 { margin-bottom: var(--sp-1); } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); }
.divider { height: 1px; background: var(--c-line); }
.divider-thick { height: 7px; background: var(--c-bg); }
.divider-label { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs);
  color: var(--c-faint); text-transform: uppercase; letter-spacing: 0.07em; font-weight: var(--fw-semibold); }
.divider-label::after { content: ''; flex: 1; height: 1px; background: var(--c-line); }
.eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-primary-600); }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-4); }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--sp-4); }
.container-wide { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--sp-5); }
@media (min-width: 768px) { .container, .container-narrow, .container-wide { padding: 0 var(--sp-6); } }
.sec { padding: var(--density-section) 0; }
.sec-sm { padding: var(--sp-8) 0; }
.stack > * + * { margin-top: var(--density-gap); }
.pad { padding: var(--density-pad); }

/* ── 3. SURFACE / CARD ─────────────────────────────────────────────────── */
.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.card-flat { background: var(--c-surface-2); border: 1px solid var(--c-line-soft); border-radius: var(--r-md); }
.card-pad { padding: var(--density-pad); }
.card-hover { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--c-primary-200); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  padding: var(--density-pad); border-bottom: 1px solid var(--c-line-soft); flex-wrap: wrap; }
.card-body { padding: var(--density-pad); }
.card-foot { padding: var(--sp-3) var(--density-pad); border-top: 1px solid var(--c-line-soft); background: var(--c-surface-2); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--density-gap); flex-wrap: wrap; }
.section-head .more { font-size: var(--fs-sm); color: var(--c-primary-600); font-weight: var(--fw-medium);
  display: inline-flex; align-items: center; gap: 4px; }

/* ── 4. BUTTONS ────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: var(--fw-semibold); border-radius: var(--r-sm); border: 1px solid transparent;
  padding: 9px 16px; font-size: var(--fs-sm); line-height: 1.2; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.btn:active { transform: scale(0.975); }
.btn[disabled], .btn.is-disabled { opacity: 0.5; pointer-events: none; }
.btn-primary { background: var(--c-primary-500); color: #fff; box-shadow: var(--sh-primary); }
.btn-primary:hover { background: var(--c-primary-600); }
.btn-accent { background: var(--grad-accent); color: #fff; box-shadow: var(--sh-accent); }
.btn-accent:hover { filter: brightness(1.05); }
.btn-ai { background: var(--grad-ai); color: #fff; }
.btn-soft { background: var(--c-primary-50); color: var(--c-primary-600); }
.btn-soft:hover { background: var(--c-primary-100); }
.btn-ghost { background: transparent; color: var(--c-ink-soft); border-color: var(--c-line); }
.btn-ghost:hover { background: var(--c-surface-2); border-color: var(--c-faint); }
.btn-ok { background: var(--c-success); color: #fff; }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger-soft { background: var(--c-danger-bg); color: var(--c-danger-ink); }
.btn-warning-soft { background: var(--c-warning-bg); color: var(--c-warning-ink-deep); }
.btn-white { background: #fff; color: var(--c-primary-600); }
.btn-outline-white { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.34); }
.btn-outline-white:hover { background: rgba(255, 255, 255, 0.24); }
.btn-lg { padding: 13px 24px; font-size: var(--fs-md); border-radius: var(--r-md); }
.btn-sm { padding: 6px 12px; font-size: var(--fs-xs); }
.btn-xs { padding: 4px 9px; font-size: var(--fs-xs); border-radius: var(--r-xs); }
.btn-block { width: 100%; }
.btn-icon { padding: 8px; border-radius: var(--r-sm); }
.btn-icon.btn-sm { padding: 6px; }
.btn-icon.btn-lg { padding: 11px; }
.btn-ghost.hero-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.btn-ghost.hero-ghost:hover { background: rgba(255, 255, 255, 0.14); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: var(--r-sm); background: var(--c-surface-2); color: var(--c-ink-soft);
  transition: background var(--dur-fast) var(--ease); position: relative; }
.icon-btn:hover { background: var(--c-primary-50); color: var(--c-primary-600); }
.icon-btn.is-plain { background: transparent; }
.icon-btn .dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--c-danger); border: 1.5px solid var(--c-surface); }
.btn-loading { display: inline-flex; align-items: center; gap: 6px; }
.spinner { width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin 0.7s linear infinite; }
.spinner-lg { width: 26px; height: 26px; border-width: 3px; color: var(--c-primary-500); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 5. BADGES / CHIPS / PILLS ─────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.4; white-space: nowrap; }
.badge-sm { padding: 2px 6px; font-size: 10px; }
.badge-primary { background: var(--c-primary-50); color: var(--c-primary-600); }
.badge-accent { background: var(--c-accent-50); color: var(--c-accent-700); }
.badge-teal { background: var(--c-teal-50); color: var(--c-teal-600); }
.badge-ok, .badge-success { background: var(--c-success-bg); color: var(--c-success-ink); }
.badge-warn, .badge-warning { background: var(--c-warning-bg); color: var(--c-warning-ink-deep); }
.badge-danger, .badge-alert { background: var(--c-danger-bg); color: var(--c-danger-ink); }
.badge-info { background: var(--c-info-bg); color: var(--c-primary-600); }
.badge-ai { background: var(--c-ai-bg); color: var(--c-ai-ink); }
.badge-neutral { background: var(--c-surface-2); color: var(--c-mute); border: 1px solid var(--c-line); }
.badge-ink { background: var(--c-ink); color: #fff; }
.badge-brand { background: var(--grad-primary); color: #fff; }
.badge-outline { background: transparent; border: 1px solid var(--c-line); color: var(--c-mute); }
.badge-verified { background: var(--c-primary-50); color: var(--c-primary-600); }
.badge-gold { background: var(--c-warning-bg); color: var(--c-warning-ink-deep); }
.dot-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: var(--r-pill); background: var(--c-danger); color: #fff;
  font-size: 10px; font-weight: var(--fw-bold); }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--c-surface); border: 1px solid var(--c-line); font-size: var(--fs-sm);
  color: var(--c-ink-soft); font-weight: var(--fw-medium); transition: all var(--dur-fast) var(--ease); white-space: nowrap; }
.chip:hover { border-color: var(--c-primary-300); color: var(--c-primary-600); }
.chip.is-on { background: var(--c-primary-500); border-color: var(--c-primary-500); color: #fff; }
.chip-soft { background: var(--c-surface-2); border-color: transparent; }
.chip-sm { padding: 4px 9px; font-size: var(--fs-xs); }
.chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chip-scroll { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chip-scroll::-webkit-scrollbar { display: none; }
.tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--r-xs);
  background: var(--c-surface-2); color: var(--c-ink-soft); font-size: var(--fs-xs); border: 1px solid var(--c-line-soft); }
.ctx-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: var(--r-xs);
  background: var(--c-info-bg); color: var(--c-primary-600); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.risk { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.risk::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.risk-none { color: var(--c-risk-none); } .risk-low { color: var(--c-risk-low); }
.risk-medium { color: var(--c-risk-med); } .risk-high { color: var(--c-risk-high); }
.risk-critical { color: var(--c-risk-crit); }
.st-dot { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.st-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c-faint); }
.st-dot.is-ok::before { background: var(--c-success); }
.st-dot.is-warn::before { background: var(--c-warning); }
.st-dot.is-danger::before { background: var(--c-danger); }
.st-dot.is-info::before { background: var(--c-primary-500); }
.st-dot.is-live::before { background: var(--c-danger); box-shadow: 0 0 0 3px var(--c-danger-bg); }

/* ── 6. FORM CONTROLS ──────────────────────────────────────────────────── */
.field { display: block; }
.field-label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--c-ink-soft); margin-bottom: 6px; }
.field-label .req { color: var(--c-danger); }
.field-hint { font-size: var(--fs-xs); color: var(--c-mute); margin-top: 5px; line-height: 1.5; }
.field-hint.is-error { color: var(--c-danger-ink); }
.field-hint.is-ok { color: var(--c-success-ink); }
.input, .textarea, .select { width: 100%; padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink);
  font-size: var(--fs-md); transition: border-color var(--dur-fast) var(--ease); }
.input::placeholder, .textarea::placeholder { color: var(--c-faint); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--c-primary-400);
  box-shadow: 0 0 0 3px var(--c-primary-50); }
.input[disabled], .textarea[disabled] { background: var(--c-surface-2); color: var(--c-mute); cursor: not-allowed; }
.input.is-error, .textarea.is-error { border-color: var(--c-danger); }
.input-lg { padding: 13px 14px; font-size: var(--fs-md); }
.textarea { resize: vertical; min-height: 78px; line-height: 1.6; }
.select { appearance: none; background-image: none; padding-right: 34px; cursor: pointer; }
.select-wrap { position: relative; }
.select-wrap::after { content: ''; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px;
  border-right: 1.6px solid var(--c-mute); border-bottom: 1.6px solid var(--c-mute);
  transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.input-row { display: flex; align-items: center; gap: var(--sp-2); border: 1px solid var(--c-line);
  border-radius: var(--r-sm); background: var(--c-surface); padding-right: 12px; }
.input-row .input { border: 0; box-shadow: none; background: transparent; }
.input-row .input:focus { box-shadow: none; }
.input-row .suffix { font-size: var(--fs-sm); color: var(--c-mute); white-space: nowrap; }
.search-box { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: var(--r-pill);
  background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-mute); }
.search-box input { flex: 1; border: 0; background: transparent; outline: none; font-size: var(--fs-md); color: var(--c-ink); }
.search-box input::placeholder { color: var(--c-faint); }
.search-box-lg { padding: 6px 6px 6px 20px; box-shadow: var(--sh-lg); }
.switch { position: relative; width: 44px; height: 26px; border-radius: var(--r-pill);
  background: var(--c-line); transition: background var(--dur) var(--ease); flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: var(--sh-xs); transition: transform var(--dur) var(--ease); }
.switch.is-on { background: var(--c-primary-500); }
.switch.is-on::after { transform: translateX(18px); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--density-row) 0; }
.switch-row + .switch-row { border-top: 1px solid var(--c-line-soft); }
.switch-row .sr-title { font-size: var(--fs-md); color: var(--c-ink); font-weight: var(--fw-medium); }
.switch-row .sr-desc { font-size: var(--fs-xs); color: var(--c-mute); margin-top: 2px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); cursor: pointer; }
.check i { width: 17px; height: 17px; border-radius: var(--r-xs); border: 1.6px solid var(--c-line);
  display: inline-flex; align-items: center; justify-content: center; color: transparent; flex: none;
  transition: all var(--dur-fast) var(--ease); }
.check.is-on i { background: var(--c-primary-500); border-color: var(--c-primary-500); color: #fff; }
.radio-card { border: 1.5px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  display: flex; gap: 10px; align-items: flex-start; transition: all var(--dur-fast) var(--ease); }
.radio-card.is-on { border-color: var(--c-primary-500); background: var(--c-primary-50); }
.radio-card .rc-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); }
.radio-card .rc-desc { font-size: var(--fs-xs); color: var(--c-mute); margin-top: 2px; }
.seg { display: inline-flex; background: var(--c-surface-2); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
.seg button { padding: 6px 13px; border-radius: var(--r-xs); font-size: var(--fs-sm);
  color: var(--c-mute); font-weight: var(--fw-medium); transition: all var(--dur-fast) var(--ease); }
.seg button.is-on { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--sh-xs); font-weight: var(--fw-semibold); }
/* seg-tabs — the App's full-width segmented control (contract §3.1) */
.seg-tabs { display: flex; background: var(--c-surface-2); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
.seg-tabs button { flex: 1; text-align: center; padding: 8px 10px; border-radius: var(--r-xs);
  font-size: var(--fs-sm); color: var(--c-mute); font-weight: var(--fw-medium); }
.seg-tabs button.is-on { background: var(--c-surface); color: var(--c-primary-600); box-shadow: var(--sh-xs); font-weight: var(--fw-semibold); }
/* line-tabs — the App's underline tabs (contract §3.1) */
.line-tabs { display: flex; gap: var(--sp-5); overflow-x: auto; border-bottom: 1px solid var(--c-line); scrollbar-width: none; }
.line-tabs::-webkit-scrollbar { display: none; }
.line-tabs button { padding: 11px 2px; font-size: var(--fs-sm); color: var(--c-mute);
  font-weight: var(--fw-medium); position: relative; white-space: nowrap; }
.line-tabs button.is-on { color: var(--c-primary-600); font-weight: var(--fw-semibold); }
.line-tabs button.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--c-primary-500); border-radius: 2px; }
.line-tabs .cnt { font-size: 10px; color: var(--c-faint); margin-left: 3px; }
.upload-tile { border: 1.5px dashed var(--c-line); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-4);
  text-align: center; color: var(--c-mute); display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: all var(--dur-fast) var(--ease); }
.upload-tile:hover { border-color: var(--c-primary-300); background: var(--c-primary-50); color: var(--c-primary-600); }
.upload-tile .ut-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink-soft); }
.upload-tile.is-done { border-style: solid; border-color: var(--c-success); background: var(--c-success-bg); }
.stepper-bar { display: flex; gap: 4px; }
.stepper-bar i { flex: 1; height: 4px; border-radius: 2px; background: var(--c-line); }
.stepper-bar i.done { background: var(--c-primary-500); }
.stepper-bar i.active { background: var(--c-primary-500); opacity: 0.55; }

/* ── 7. NOTICE / STATE BLOCKS ──────────────────────────────────────────── */
.notice { display: flex; gap: 9px; padding: 11px 13px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); line-height: 1.55; align-items: flex-start; }
.notice svg { margin-top: 1px; }
.notice-info { background: var(--c-info-bg); color: var(--c-primary-700); }
.notice-warn { background: var(--c-warning-bg); color: var(--c-warning-ink-deep); }
.notice-danger { background: var(--c-danger-bg); color: var(--c-danger-ink); }
.notice-ok { background: var(--c-success-bg); color: var(--c-success-ink); }
.notice-ai { background: var(--c-ai-bg); color: var(--c-ai-ink); }
.notice-neutral { background: var(--c-surface-2); color: var(--c-ink-soft); border: 1px solid var(--c-line); }
.risk-notice { display: flex; gap: 9px; align-items: flex-start; padding: 10px 13px; border-radius: var(--r-sm);
  background: var(--c-warning-bg); color: var(--c-warning-ink-deep); font-size: var(--fs-sm); line-height: 1.55; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--sp-12) var(--sp-6); color: var(--c-mute); }
.empty-ico { width: 56px; height: 56px; border-radius: var(--r-lg); background: var(--c-surface-2);
  display: flex; align-items: center; justify-content: center; color: var(--c-faint); margin-bottom: var(--sp-4); }
.empty-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--c-ink-soft); }
.empty-text { font-size: var(--fs-sm); color: var(--c-mute); margin-top: 6px; max-width: 380px; line-height: 1.6; }
.empty-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); flex-wrap: wrap; justify-content: center; }
.skeleton { background: linear-gradient(90deg, var(--c-surface-2) 25%, #eef0f7 50%, var(--c-surface-2) 75%);
  background-size: 200% 100%; animation: sk 1.4s infinite; border-radius: var(--r-xs); }
.skeleton-line { height: 11px; margin-bottom: 9px; }
.skeleton-line.w-40 { width: 40%; } .skeleton-line.w-60 { width: 60%; } .skeleton-line.w-80 { width: 80%; }
.skeleton-card { height: 88px; border-radius: var(--r-md); }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.state-strip { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--c-surface-2); border: 1px solid var(--c-line); font-size: var(--fs-xs); color: var(--c-mute); }
.state-strip.is-warn { background: var(--c-warning-bg); border-color: transparent; color: var(--c-warning-ink-deep); }
.state-strip.is-danger { background: var(--c-danger-bg); border-color: transparent; color: var(--c-danger-ink); }
.state-strip.is-ok { background: var(--c-success-bg); border-color: transparent; color: var(--c-success-ink); }
.blocked-note { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--c-surface-2); border: 1px dashed var(--c-line); font-size: var(--fs-xs); color: var(--c-mute); }
.slot-gov { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-xs);
  border: 1px dashed var(--c-primary-300); background: var(--c-primary-50); color: var(--c-primary-700);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); }

/* ── 8. AVATAR / PERSON ────────────────────────────────────────────────── */
.av { border-radius: 50%; background: var(--c-primary-100); color: var(--c-primary-700);
  display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-semibold);
  flex: none; font-size: 13px; overflow: hidden; }
.av-xs { width: 22px; height: 22px; font-size: 10px; }
.av-sm { width: 32px; height: 32px; font-size: 12px; }
.av-md { width: 42px; height: 42px; font-size: 14px; }
.av-lg { width: 54px; height: 54px; font-size: 18px; }
.av-xl { width: 76px; height: 76px; font-size: 26px; }
.av-tone-1 { background: var(--c-accent-100); color: var(--c-accent-700); }
.av-tone-2 { background: var(--c-teal-50); color: var(--c-teal-600); }
.av-tone-3 { background: var(--c-ai-bg); color: var(--c-ai-ink); }
.av-tone-4 { background: var(--c-warning-bg); color: var(--c-warning-ink-deep); }
.av-ring { box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px var(--c-primary-200); }
.av-stack { display: flex; }
.av-stack .av { margin-left: -10px; border: 2px solid #fff; }
.av-stack .av:first-child { margin-left: 0; }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.person .p-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); }
.person .p-sub { font-size: var(--fs-xs); color: var(--c-mute); margin-top: 1px; }
.icon-tile { width: 42px; height: 42px; border-radius: var(--r-md); display: inline-flex;
  align-items: center; justify-content: center; flex: none; }
.icon-tile-lg { width: 52px; height: 52px; }
.tile-info { background: var(--c-info-bg); color: var(--c-primary-600); }
.tile-accent { background: var(--c-accent-50); color: var(--c-accent-600); }
.tile-warn { background: var(--c-warning-bg); color: var(--c-warning-ink); }
.tile-danger { background: var(--c-danger-bg); color: var(--c-danger); }
.tile-ok, .tile-success { background: var(--c-success-bg); color: var(--c-success); }
.tile-teal { background: var(--c-teal-50); color: var(--c-teal-600); }
.tile-ai { background: var(--c-ai-bg); color: var(--c-ai); }
.tile-primary { background: var(--c-primary-50); color: var(--c-primary-600); }

/* ── 9. LIST ROW / TABLE ───────────────────────────────────────────────── */
.list-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--density-row) var(--density-pad); }
.list-row + .list-row { border-top: 1px solid var(--c-line-soft); }
.list-row.is-tap { cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.list-row.is-tap:hover { background: var(--c-surface-2); }
.list-row .lr-main { flex: 1; min-width: 0; }
.list-row .lr-title { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--c-ink); }
.list-row .lr-sub { font-size: var(--fs-xs); color: var(--c-mute); margin-top: 2px; }
.link-row { display: flex; align-items: center; gap: 11px; padding: var(--density-row) var(--density-pad);
  cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.link-row + .link-row { border-top: 1px solid var(--c-line-soft); }
.link-row:hover { background: var(--c-surface-2); }
.link-row .link-icon { width: 38px; height: 38px; border-radius: var(--r-sm); display: inline-flex;
  align-items: center; justify-content: center; flex: none; }
.kv { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: 8px 0; font-size: var(--fs-sm); }
.kv + .kv { border-top: 1px solid var(--c-line-soft); }
.kv dt, .kv .k { color: var(--c-mute); flex: none; }
.kv dd, .kv .v { color: var(--c-ink); font-weight: var(--fw-medium); text-align: right; min-width: 0; }
.kv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-5); }
.kv-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kv-grid.cols-1 { grid-template-columns: 1fr; }
@container (max-width: 720px) 
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.dtable { width: 100%; font-size: var(--fs-sm); min-width: 720px; }
.dtable th { text-align: left; font-weight: var(--fw-semibold); color: var(--c-mute); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.05em; padding: 9px var(--sp-3); background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.dtable td { padding: var(--density-row) var(--sp-3); border-bottom: 1px solid var(--c-line-soft); vertical-align: middle; }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr { transition: background var(--dur-fast) var(--ease); }
.dtable tbody tr.is-tap { cursor: pointer; }
.dtable tbody tr.is-tap:hover { background: var(--c-surface-2); }
.dtable tbody tr.is-selected { background: var(--c-primary-50); }
.cell-entity { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cell-entity .ce-name { font-weight: var(--fw-semibold); color: var(--c-ink); }
.cell-entity .ce-sub { font-size: var(--fs-xs); color: var(--c-mute); font-family: ui-monospace, Menlo, monospace; }
.row-actions { display: flex; gap: var(--sp-2); }
.row-actions button { font-size: var(--fs-xs); color: var(--c-primary-600); font-weight: var(--fw-medium); }
.row-actions button:hover { text-decoration: underline; }
.row-actions button.is-danger { color: var(--c-danger-ink); }
.table-tools { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); flex-wrap: wrap;
  border-bottom: 1px solid var(--c-line); background: var(--c-surface); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-line); flex-wrap: wrap; }
.page-btn { min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--r-xs);
  font-size: var(--fs-sm); color: var(--c-ink-soft); display: inline-flex; align-items: center; justify-content: center; }
.page-btn.is-on { background: var(--c-primary-500); color: #fff; font-weight: var(--fw-semibold); }
.filter-bar { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; padding: var(--sp-3) 0; }
.filter-bar .input, .filter-bar .select-wrap { min-width: 140px; flex: 0 1 auto; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; margin-bottom: var(--sp-5); }
.page-header .ph-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--c-mute); margin-bottom: var(--sp-3); }
.breadcrumb .sep { color: var(--c-faint); }
.stats-row { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-4); }
.stat-card .sv { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.stat-card .sl { font-size: var(--fs-xs); color: var(--c-mute); margin-top: 3px; }
.trend-up { color: var(--c-success-ink); } .trend-down { color: var(--c-danger-ink); }

/* ── 10. OVERLAY SYSTEM (drawer / sheet / dialog / scan) ───────────────── */
.scrim { position: absolute; inset: 0; background: rgba(26, 28, 46, 0.5); z-index: var(--z-overlay); }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 92%); background: var(--c-surface);
  z-index: var(--z-panel); display: flex; flex-direction: column; box-shadow: var(--sh-lg);
  animation: slideIn var(--dur) var(--ease-out); }
.drawer-wide { width: min(var(--drawer-w), 96%); }
.drawer-head { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-line); background: var(--c-surface); }
.drawer-head h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c-ink); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--sp-5); }
.drawer-body-flush { padding: 0; }
.drawer-foot { display: flex; gap: var(--sp-2); justify-content: flex-end; padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--c-line); background: var(--c-surface); flex-wrap: wrap; }
.drawer-foot.between { justify-content: space-between; }
.drawer-layout { display: flex; flex: 1; min-height: 0; }
.anchor-nav { width: 156px; flex: none; border-right: 1px solid var(--c-line-soft); overflow-y: auto; padding: var(--sp-3) var(--sp-2); }
.anchor-link { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: var(--r-xs);
  font-size: var(--fs-sm); color: var(--c-mute); margin-bottom: 2px; }
.anchor-link:hover { background: var(--c-surface-2); color: var(--c-ink-soft); }
.anchor-link.is-on { background: var(--c-primary-50); color: var(--c-primary-600); font-weight: var(--fw-semibold); }
.drawer-sections { flex: 1; overflow-y: auto; padding: var(--sp-4); background: var(--c-bg); }
.d-section { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: var(--sp-4); margin-bottom: var(--sp-3); }
.d-section:last-child { margin-bottom: 0; }
.d-section > h4 { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); margin-bottom: var(--sp-3); }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--c-surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0; z-index: var(--z-panel); max-height: 88%;
  display: flex; flex-direction: column; box-shadow: var(--sh-lg); animation: sheetUp var(--dur) var(--ease-out); }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-grab { width: 36px; height: 4px; border-radius: 2px; background: var(--c-line); margin: 10px auto 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5) var(--sp-3); }
.sheet-head h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c-ink); }
.sheet-body { flex: 1; overflow-y: auto; padding: 0 var(--sp-5) var(--sp-4); }
.sheet-foot { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5) calc(var(--sp-3) + var(--safe-bottom));
  border-top: 1px solid var(--c-line-soft); }
.sheet-foot .btn { flex: 1; }
.dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(440px, 92%);
  background: var(--c-surface); border-radius: var(--r-lg); z-index: var(--z-panel); box-shadow: var(--sh-lg);
  display: flex; flex-direction: column; max-height: 88%; animation: dlgIn var(--dur) var(--ease-out); }
.dialog-sm { width: min(380px, 92%); }
.dialog-lg { width: min(620px, 94%); }
@keyframes dlgIn { from { opacity: 0; transform: translate(-50%, -47%) scale(0.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.dialog-head { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.dialog-head h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c-ink); }
.dialog-body { flex: 1; overflow-y: auto; padding: 0 var(--sp-5) var(--sp-4); }
.dialog-foot { display: flex; gap: var(--sp-2); justify-content: flex-end; padding: var(--sp-3) var(--sp-5) var(--sp-5); flex-wrap: wrap; }
.risk-head { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-5) var(--sp-5) var(--sp-3);
  background: var(--c-danger-bg); border-radius: var(--r-lg) var(--r-lg) 0 0; color: var(--c-danger-ink); }
.consequence { display: flex; gap: 9px; align-items: flex-start; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--c-danger-bg); color: var(--c-danger-ink); font-size: var(--fs-sm); line-height: 1.55; }
.toast-host { position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 8px; background: rgba(26, 28, 46, 0.95); color: #fff;
  padding: 10px 18px; border-radius: var(--r-pill); font-size: var(--fs-sm); box-shadow: var(--sh-lg);
  animation: toastIn var(--dur) var(--ease-out); max-width: 90vw; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ── 11. APP SHELLS ────────────────────────────────────────────────────── */
/* 11a · Public header/footer (contract §4.1 Shell-1 / Shell-2) */
.pub-header { position: sticky; top: 0; z-index: var(--z-nav); height: var(--nav-h);
  background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--c-line); }
.pub-header .container { display: flex; align-items: center; gap: var(--sp-8); height: 100%; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--grad-primary);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: var(--fw-bold); flex: none; }
.brand-word { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-ink); letter-spacing: -0.01em; }
.pub-nav { display: flex; align-items: center; gap: var(--sp-6); flex: 1; }
.pub-nav a { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--c-ink-soft); white-space: nowrap; }
.pub-nav a:hover, .pub-nav a.is-active { color: var(--c-primary-600); }
.pub-nav .has-mega { position: relative; }
.mega { position: absolute; top: calc(100% + 14px); left: -14px; width: 520px; background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: var(--sp-5);
  display: none; z-index: var(--z-nav); }
.mega.is-open { display: block; }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2) var(--sp-4); }
.mega-grid a { padding: 7px 9px; border-radius: var(--r-xs); display: flex; flex-direction: column; }
.mega-grid a:hover { background: var(--c-surface-2); }
.mega-grid .mg-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink); }
.mega-grid .mg-sub { font-size: var(--fs-xs); color: var(--c-mute); }
.pub-header-actions { display: flex; align-items: center; gap: var(--sp-2); }
.hamburger { display: none; }
.pub-drawer { position: fixed; inset: 0; z-index: var(--z-panel); display: none; }
.pub-drawer.is-open { display: block; }
.pub-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 86%);
  background: var(--c-surface); padding: var(--sp-5); overflow-y: auto; box-shadow: var(--sh-lg); }
.pub-drawer-panel a { display: block; padding: 11px 4px; font-size: var(--fs-md); color: var(--c-ink-soft);
  border-bottom: 1px solid var(--c-line-soft); }
@container (max-width: 1023px) {
  .pub-nav { display: none; }
  .hamburger { display: inline-flex; }
}
.pub-footer { background: var(--c-ink); color: #c4c6d6; margin-top: auto; padding: var(--sp-12) 0 var(--sp-8); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--sp-8); }
.footer-col h4 { color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: var(--sp-3); }
.footer-col a { display: block; padding: 5px 0; font-size: var(--fs-sm); color: #9498ab; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-xs); color: #7a7d92; }
.social-ico { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
@container (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }

/* 11b · Student / Tutor app shell — topbar + floating capsule tabbar (contract §2.3) */
.app-shell { min-height: 100%; display: flex; flex-direction: column; background: var(--c-bg); }
.app-topbar { position: sticky; top: 0; z-index: var(--z-nav); height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4);
  background: rgba(255, 255, 255, 0.93); backdrop-filter: blur(14px); border-bottom: 1px solid var(--c-line); }
.app-topbar .tb-title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c-ink); flex: 1; }
.app-topbar.is-transparent { background: transparent; border-bottom: 0; position: absolute;
  left: 0; right: 0; top: 0; }
.app-topbar.is-transparent .tb-title { color: #fff; }
.app-topbar .back-btn { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--c-surface-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--c-ink-soft); flex: none; }
.app-topbar.is-transparent .back-btn { background: rgba(255, 255, 255, 0.22); color: #fff; }
.app-body { flex: 1; }
.app-body.has-tabbar { padding-bottom: calc(var(--tabbar-h) + var(--sp-5)); }
.tabbar { position: sticky; bottom: var(--sp-3); z-index: var(--z-tabbar);
  margin: 0 var(--sp-3) var(--sp-3); height: var(--tabbar-h); border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(16px); box-shadow: var(--sh-lg);
  display: flex; align-items: center; justify-content: space-around; padding: 0 var(--sp-2); }
.tab-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 12px;
  border-radius: var(--r-md); color: var(--c-mute); font-size: 10px; font-weight: var(--fw-medium); }
.tab-item.is-on { color: var(--c-primary-600); font-weight: var(--fw-semibold); }
.tab-item svg { width: 22px; height: 22px; }
.action-bar { position: sticky; bottom: 0; z-index: var(--z-sticky); background: var(--c-surface);
  border-top: 1px solid var(--c-line); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-bottom));
  display: flex; gap: var(--sp-3); align-items: center; }
.action-bar .ab-price { flex: none; }
.action-bar .btn { flex: 1; }
.app-subheader { padding: var(--sp-4); background: var(--c-surface); border-bottom: 1px solid var(--c-line-soft); }
.phone-frame { max-width: 480px; margin: 0 auto; }

/* 11c · Admin shell (contract §5.1) */
.admin { display: flex; min-height: 100%; background: var(--c-bg); }
.admin-side { width: var(--sidebar-w); flex: none; background: var(--c-sidebar); position: sticky; top: 0;
  height: 100vh; overflow-y: auto; display: flex; flex-direction: column; z-index: var(--z-sidebar); }
.admin-side::-webkit-scrollbar { width: 0; }
.side-logo { height: 58px; display: flex; align-items: center; gap: 9px; padding: 0 var(--sp-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex: none; }
.side-logo .mark { width: 30px; height: 30px; border-radius: var(--r-xs); background: var(--grad-primary);
  color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: 14px; }
.side-logo .name { color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.side-logo .name span { color: #6f7396; font-weight: var(--fw-regular); }
.side-nav { flex: 1; padding: var(--sp-3) var(--sp-2); }
.nav-group-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: #5f637e;
  padding: var(--sp-4) var(--sp-3) var(--sp-2); font-weight: var(--fw-semibold); }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r-xs);
  font-size: var(--fs-sm); color: var(--c-sidebar-text); margin-bottom: 2px; width: 100%; text-align: left; }
.nav-item:hover { background: var(--c-sidebar-2); color: #dfe1ee; }
.nav-item.is-on { background: var(--c-sidebar-active); color: #fff; font-weight: var(--fw-medium); }
.nav-item .badge-num { margin-left: auto; background: var(--c-danger); color: #fff; border-radius: var(--r-pill);
  font-size: 10px; padding: 1px 6px; font-weight: var(--fw-bold); }
.nav-item.is-on .badge-num { background: rgba(255, 255, 255, 0.28); }
.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-top { position: sticky; top: 0; z-index: var(--z-sticky); height: 58px; background: var(--c-surface);
  border-bottom: 1px solid var(--c-line); display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-5); }
.admin-top .search { width: 300px; max-width: 40vw; }
/* The admin topbar's nav trigger is hidden on a wide container and shown on a
   narrow one, so a 390 frame still has a way into the 20-module nav. */
#admMenu { display: none; }
@container (max-width: 1023px) {
  #admMenu { display: inline-flex; }
  /* The search collapses to an icon-ish pill rather than eating the bar. */
  .admin-top .search { width: auto; flex: 1; min-width: 0; }
  .admin-top .search .t-sm { display: none; }
}
.admin-top .topbar-icon { width: 36px; height: 36px; border-radius: var(--r-xs); display: inline-flex;
  align-items: center; justify-content: center; color: var(--c-ink-soft); position: relative; }
.admin-top .topbar-icon:hover { background: var(--c-surface-2); }
.admin-top .topbar-icon .dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--c-danger); border: 1.5px solid #fff; }
.admin-user { display: flex; align-items: center; gap: 9px; padding: 5px 9px; border-radius: var(--r-xs); }
.admin-user:hover { background: var(--c-surface-2); }
.admin-user .au-name { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-ink); line-height: 1.3; }
.admin-user .au-role { font-size: 10px; color: var(--c-mute); }
.admin-page { padding: 22px 24px 40px; flex: 1; }
/* Pinned Admin frame geometry; bounded to the actual preview container. */
@container (max-width: 1023px) {
  .admin-page { padding: 16px 14px 32px; }
}
@container (max-width: 768px) {
  .admin-page { padding: 14px 12px 28px; }
}
@container (max-width: 479px) {
  .admin-user > span:not(.av) { display: none; }
}
.admin-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; margin-bottom: var(--sp-5); }
.admin-grid { display: grid; gap: var(--sp-3); }
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.queue-grid { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.admin-nav-sheet { position: fixed; inset: 0; z-index: var(--z-panel); display: none; }
.admin-nav-sheet.is-open { display: block; }
.admin-nav-sheet .panel { position: absolute; top: 0; left: 0; bottom: 0; width: 270px;
  background: var(--c-sidebar); overflow-y: auto; }
@container (max-width: 1023px) { .admin-side { display: none; } }

/* ── 12. PRODUCT WIDGETS ───────────────────────────────────────────────── */
.tutor-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--density-pad); }
.tutor-card .tc-top { display: flex; gap: var(--sp-3); align-items: flex-start; }
.tutor-card .tc-name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--c-ink);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tutor-card .tc-sub { font-size: var(--fs-sm); color: var(--c-mute); margin-top: 3px; }
.tutor-card .tc-meta { display: flex; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--c-mute); flex-wrap: wrap; }
.tutor-card .tc-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding-top: var(--sp-3); border-top: 1px solid var(--c-line-soft); }
.price { display: inline-flex; align-items: baseline; gap: 3px; }
.price .cur { font-size: var(--fs-sm); color: var(--c-accent-600); font-weight: var(--fw-semibold); }
.price .num { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-accent-600); font-variant-numeric: tabular-nums; }
.price .unit { font-size: var(--fs-xs); color: var(--c-mute); }
.price-old { font-size: var(--fs-xs); color: var(--c-faint); text-decoration: line-through; }
.stars { display: inline-flex; align-items: center; gap: 3px; color: var(--c-warning); font-size: var(--fs-xs); }
.stars .score { font-weight: var(--fw-semibold); color: var(--c-warning-ink-deep); }
.stars .cnt { color: var(--c-mute); }
.course-card { display: flex; flex-direction: column; }
.course-card .cc-cover { height: 120px; background: var(--grad-hero); position: relative; display: flex;
  align-items: center; justify-content: center; color: rgba(91, 84, 236, 0.32); }
.course-card .cc-cover .badge { position: absolute; top: 10px; left: 10px; }
.course-card .cc-body { padding: var(--density-pad); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.course-card .cc-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); line-height: 1.4; }
.course-card .cc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-2); margin-top: auto; }
.mini-course { display: flex; gap: var(--sp-3); padding: var(--sp-3); align-items: center; }
.mini-course .mc-thumb { width: 86px; height: 64px; border-radius: var(--r-sm); background: var(--grad-hero); flex: none;
  display: flex; align-items: center; justify-content: center; color: rgba(91, 84, 236, 0.3); }
.feed-card .fc-cover { height: 150px; background: var(--grad-hero); display: flex; align-items: center;
  justify-content: center; color: rgba(91, 84, 236, 0.28); }
.feed-card .fc-body { padding: var(--density-pad); }
.feed-card .fc-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); line-height: 1.45; }
.subj-tile { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: var(--sp-4) var(--sp-2);
  border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line);
  transition: all var(--dur) var(--ease); text-align: center; }
.subj-tile:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--c-primary-200); }
.subj-ico { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center;
  justify-content: center; color: #fff; font-size: var(--fs-md); font-weight: var(--fw-bold); }
.subj-tile .st-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); }
.subj-tile .st-count { font-size: var(--fs-xs); color: var(--c-mute); }
.step-card { text-align: center; padding: var(--sp-4); }
.step-num { width: 38px; height: 38px; border-radius: 11px; background: var(--c-primary-50); color: var(--c-primary-600);
  display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.story-card { padding: var(--sp-5); position: relative; }
.quote-mark { font-size: 48px; line-height: 0.7; color: var(--c-primary-200); font-weight: var(--fw-bold); }
.trust-num { font-size: 36px; font-weight: var(--fw-bold); line-height: 1.1; }
.trust-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); padding: var(--sp-6) 0;
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
@container (max-width: 720px) { .trust-band { grid-template-columns: repeat(2, 1fr); } }
.ai-section { background: var(--c-ink); border-radius: var(--r-xl); color: #fff; overflow: hidden; }
.ai-feature { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05); }
.ai-feature .af-ico { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--grad-ai);
  display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.progress-bar { height: 7px; border-radius: 4px; background: var(--c-line); overflow: hidden; }
.progress-bar i { display: block; height: 100%; border-radius: 4px; background: var(--grad-primary); }
.progress-bar.is-ai i { background: var(--grad-ai); }
.progress-bar.is-ok i { background: var(--c-success); }
.progress-row { display: flex; align-items: center; gap: 11px; font-size: var(--fs-xs); }
.progress-row .pr-label { width: 76px; flex: none; color: var(--c-on-dark-soft); }
.progress-row .pr-track { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.progress-row .pr-track i { display: block; height: 100%; background: #fff; border-radius: 3px; }
.progress-row .pr-val { width: 34px; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.cta-band { border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-8); color: #fff; }
.cta-band.is-accent { background: var(--grad-accent); }
.cta-band.is-primary { background: var(--grad-primary); }
.heat-band { background: var(--grad-hero); position: relative; overflow: hidden; }
.heat-band .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; pointer-events: none; }
.heat-band .b1 { width: 340px; height: 340px; background: var(--c-blob-indigo); top: -90px; right: -70px; }
.heat-band .b2 { width: 280px; height: 280px; background: var(--c-blob-warm); bottom: -110px; left: -60px; }
.search-hero { background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-lg);
  display: flex; align-items: center; max-width: 620px; padding: 6px; gap: 0; }
.search-hero .sh-part { flex: 1; display: flex; align-items: center; gap: 9px; padding: 9px 14px; min-width: 0; }
.search-hero .sh-part + .sh-part { border-left: 1px solid var(--c-line); }
.search-hero input { border: 0; outline: none; width: 100%; font-size: var(--fs-md); color: var(--c-ink); background: transparent; }
.t-hero { background: var(--grad-hero); position: relative; overflow: hidden; }
.t-side-card { position: sticky; top: calc(var(--nav-h) + 20px); }
.sticky-nav { position: sticky; top: var(--nav-h); z-index: var(--z-sticky); background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-line); }
.sticky-nav .sn-inner { display: flex; gap: var(--sp-6); overflow-x: auto; scrollbar-width: none; }
.sticky-nav .sn-inner::-webkit-scrollbar { display: none; }
.sticky-nav button { padding: 14px 0; font-size: var(--fs-sm); color: var(--c-mute); font-weight: var(--fw-medium); position: relative; white-space: nowrap; }
.sticky-nav button.is-on { color: var(--c-primary-600); font-weight: var(--fw-semibold); }
.sticky-nav button.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-primary-500); }
.skill-bar { display: flex; align-items: center; gap: 11px; font-size: var(--fs-sm); }
.skill-bar .sb-name { width: 118px; flex: none; color: var(--c-ink-soft); }
.skill-bar .sb-track { flex: 1; height: 7px; border-radius: 4px; background: var(--c-line); overflow: hidden; }
.skill-bar .sb-track i { display: block; height: 100%; background: var(--grad-primary); border-radius: 4px; }
.skill-bar .sb-level { width: 42px; flex: none; text-align: right; font-size: var(--fs-xs); color: var(--c-mute); }
.avail-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.avail-day { text-align: center; }
.avail-day .ad-name { font-size: var(--fs-xs); color: var(--c-mute); margin-bottom: 6px; }
.avail-slot { display: block; width: 100%; padding: 7px 2px; border-radius: var(--r-xs); font-size: var(--fs-xs);
  margin-bottom: 5px; background: var(--c-surface-2); color: var(--c-mute); border: 1px solid transparent; }
.avail-slot.free { background: var(--c-primary-50); color: var(--c-primary-600); border-color: var(--c-primary-200); }
.avail-slot.free:hover { background: var(--c-primary-500); color: #fff; }
.avail-slot.busy { background: var(--c-surface-2); color: var(--c-faint); text-decoration: line-through; cursor: not-allowed; }
.avail-slot.is-picked { background: var(--c-primary-500); color: #fff; border-color: var(--c-primary-600); }
@container (max-width: 640px) { .avail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lesson-card { display: flex; gap: var(--sp-4); padding: var(--density-pad); align-items: stretch; }
.lesson-time { width: 54px; flex: none; border-right: 1px solid var(--c-line); padding-right: var(--sp-3); }
.lesson-time .lt-h { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.lesson-time .lt-m { font-size: var(--fs-xs); color: var(--c-mute); }
.order-status { background: var(--grad-primary); color: #fff; padding: var(--sp-5) var(--sp-4); border-radius: var(--r-lg); }
.status-live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.22); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.timeline { position: relative; }
.tl-item { position: relative; padding-left: 26px; padding-bottom: var(--sp-5); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ''; position: absolute; left: 5px; top: 6px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--c-line); z-index: 1; }
.tl-item.is-done::before { background: var(--c-primary-500); }
.tl-item.is-active::before { background: var(--c-primary-500); box-shadow: 0 0 0 4px var(--c-primary-100); }
.tl-item:not(:last-child)::after { content: ''; position: absolute; left: 9px; top: 15px; bottom: -4px;
  width: 1.5px; background: var(--c-line); }
.tl-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); }
.tl-item:not(.is-done):not(.is-active) .tl-title { color: var(--c-faint); font-weight: var(--fw-regular); }
.tl-time { font-size: var(--fs-xs); color: var(--c-mute); }
.tl-desc { font-size: var(--fs-xs); color: var(--c-mute); margin-top: 3px; line-height: 1.55; }
.grid-entry { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: var(--sp-3) var(--sp-2); }
.grid-entry .ge-ico { width: 46px; height: 46px; border-radius: var(--r-md); display: inline-flex;
  align-items: center; justify-content: center; position: relative; }
.grid-entry .ge-label { font-size: var(--fs-xs); color: var(--c-ink-soft); }
.grid-entry .ge-badge { position: absolute; top: -4px; right: -4px; }
.msg-row { display: flex; gap: var(--sp-3); padding: var(--density-pad); align-items: flex-start; }
.msg-row .mr-main { flex: 1; min-width: 0; }
.msg-row .mr-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); }
.msg-row .mr-last { font-size: var(--fs-sm); color: var(--c-mute); margin-top: 3px; }
.unread-badge { min-width: 18px; height: 18px; border-radius: 50%; background: var(--c-danger); color: #fff;
  font-size: 10px; font-weight: var(--fw-bold); display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.msg { display: flex; gap: 9px; margin-bottom: var(--sp-4); align-items: flex-start; }
.msg-out { flex-direction: row-reverse; }
.msg-bubble { background: var(--c-surface); border-radius: 4px 16px 16px 16px; padding: 10px 13px;
  font-size: var(--fs-md); color: var(--c-ink); max-width: 74vw; line-height: 1.55; box-shadow: var(--sh-xs); }
.msg-out .msg-bubble { background: var(--grad-primary); color: #fff; border-radius: 16px 4px 16px 16px; }
.msg-time { font-size: 10px; color: var(--c-faint); margin-top: 4px; }
.msg-out .msg-time { text-align: right; }
.msg-sys { text-align: center; font-size: var(--fs-xs); color: var(--c-mute); margin: var(--sp-4) 0; }
.composer { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-bottom));
  background: var(--c-surface); border-top: 1px solid var(--c-line); align-items: flex-end; }
.composer .input { border-radius: var(--r-pill); }
.bank-card { border-radius: var(--r-lg); padding: var(--sp-4); color: #fff; position: relative; }
.bank-card .bc-num { font-size: var(--fs-lg); letter-spacing: 0.12em; margin: var(--sp-4) 0 var(--sp-2); font-variant-numeric: tabular-nums; }
.bank-card .bc-foot { display: flex; justify-content: space-between; font-size: var(--fs-xs); opacity: 0.9; }
.bank-cmb { background: linear-gradient(135deg, #c0392b 0%, #8e2418 100%); }
.bank-alipay { background: linear-gradient(135deg, #1296db 0%, #0a78b8 100%); }
.earn-hero { background: var(--grad-primary); color: #fff; padding: var(--sp-5); }
.chart-box { height: 140px; display: flex; align-items: flex-end; gap: 7px; padding-top: var(--sp-3); }
.chart-bar { flex: 1; background: var(--grad-primary); border-radius: 5px 5px 0 0; position: relative; min-height: 4px; }
.chart-bar.is-peak { background: var(--grad-accent); }
.chart-x { display: flex; gap: 7px; margin-top: 7px; }
.chart-x span { flex: 1; text-align: center; font-size: 10px; color: var(--c-mute); }
.bar-row { display: flex; align-items: center; gap: 9px; font-size: var(--fs-xs); }
.bar-row .br-star { width: 30px; flex: none; color: var(--c-mute); }
.bar-row .br-track { flex: 1; height: 6px; border-radius: 3px; background: var(--c-line); overflow: hidden; }
.bar-row .br-track i { display: block; height: 100%; background: var(--c-warning); border-radius: 3px; }
.bar-row .br-cnt { width: 30px; text-align: right; color: var(--c-mute); }
.review-card { padding: var(--density-pad); }
.review-card + .review-card { border-top: 1px solid var(--c-line-soft); }
.reply-box { background: var(--c-surface-2); border-left: 2px solid var(--c-primary-300); border-radius: var(--r-xs);
  padding: 9px 12px; font-size: var(--fs-sm); color: var(--c-ink-soft); margin-top: var(--sp-3); line-height: 1.6; }
.prot-hero { background: var(--grad-primary); color: #fff; text-align: center; padding: var(--sp-8) var(--sp-4); }
.room-stage { background: var(--c-stage); color: #fff; min-height: 100%; }
.room-panel { background: var(--c-stage-2); border: 1px solid var(--c-stage-line); border-radius: var(--r-md); }
.room-video { background: var(--c-stage-3); border-radius: var(--r-md); aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center; color: #4a5068; position: relative; }
.room-controls { display: flex; gap: var(--sp-2); justify-content: center; padding: var(--sp-3); }
.room-ctl { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; }
.room-ctl.is-off { background: var(--c-danger); }
.room-ctl.is-end { background: var(--c-danger); width: auto; border-radius: var(--r-pill); padding: 0 18px; gap: 7px; }
.device-check { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--c-stage-2); border: 1px solid var(--c-stage-line); }
.consequence-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2); }
.consequence-cell { display: flex; gap: 9px; align-items: flex-start; padding: 11px; border-radius: var(--r-sm);
  background: var(--c-surface-2); border: 1px solid var(--c-line-soft); }
.audit-strip { border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-4); background: var(--c-surface-2); }
.audit-tl { position: relative; padding-left: 20px; }
.audit-tl::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1.5px; background: var(--c-line); }
.audit-ev { position: relative; padding-bottom: var(--sp-3); }
.audit-ev::before { content: ''; position: absolute; left: -20px; top: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-primary-400); }
.queue-item { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); cursor: pointer;
  transition: all var(--dur) var(--ease); }
.queue-item:hover { border-color: var(--c-primary-300); box-shadow: var(--sh-sm); }
.queue-item.is-danger { border-left: 3px solid var(--c-danger); }
.queue-item.is-warn { border-left: 3px solid var(--c-warning); }
.queue-item.is-ok { border-left: 3px solid var(--c-success); }
.count-chip { min-width: 34px; height: 34px; border-radius: var(--r-sm); display: inline-flex;
  align-items: center; justify-content: center; background: var(--c-surface-2); color: var(--c-ink);
  font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; flex: none; }
.count-chip.is-danger { background: var(--c-danger-bg); color: var(--c-danger-ink); }
.count-chip.is-warn { background: var(--c-warning-bg); color: var(--c-warning-ink-deep); }
.count-chip.is-ok { background: var(--c-success-bg); color: var(--c-success-ink); }
.funnel { display: flex; align-items: flex-end; gap: var(--sp-4); height: 140px; }
.funnel-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.funnel-col .fn-bar { width: 100%; background: var(--grad-primary); border-radius: var(--r-xs) var(--r-xs) 0 0; }
.rel-list { border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.rel-row { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3);
  background: var(--c-surface); cursor: pointer; }
.rel-row + .rel-row { border-top: 1px solid var(--c-line-soft); }
.rel-row:hover { background: var(--c-surface-2); }
.attach-tile { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--c-surface-2); border: 1px solid var(--c-line-soft); }
.file-ico { width: 36px; height: 36px; border-radius: var(--r-sm); display: inline-flex; align-items: center;
  justify-content: center; background: var(--c-primary-50); color: var(--c-primary-600); flex: none; }

/* ── 13. RESPONSIVE COMPOSITION UTILITIES ──────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-6); align-items: start; }
.split-wide { grid-template-columns: minmax(0, 1fr) 380px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--density-gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--density-gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--density-gap); }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--density-gap); }
.grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--density-gap); }
.grid-entry-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rail-sticky { position: sticky; top: calc(var(--nav-h) + var(--sp-5)); }
@container (max-width: 1100px) {
  .split, .split-wide { grid-template-columns: minmax(0, 1fr); }
  .rail-sticky { position: static; }
}
@container (max-width: 900px) {
  .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 640px) {
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: minmax(0, 1fr); }
  .grid-entry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Tables collapse to stacked cards on a narrow CONTAINER — the frame IS the
   container, so a pinned 390 preview collapses even in a wide browser window.
   A media query would read the WINDOW, not the frame, so the pinned 390 preview
   would silently keep the desktop table. The container query is authoritative;
   the media query below exists only for a page opened OUTSIDE the lab, and is
   explicitly neutralised whenever a lab frame is present. */
@container (max-width: 760px) {
  .dtable.is-cards { min-width: 0; }
  .dtable.is-cards thead { display: none; }
  .dtable.is-cards tbody tr { display: block; border: 1px solid var(--c-line); border-radius: var(--r-md);
    margin-bottom: var(--sp-2); padding: var(--sp-2); background: var(--c-surface); }
  .dtable.is-cards td { display: flex; justify-content: space-between; gap: var(--sp-3);
    border-bottom: 1px dashed var(--c-line-soft); padding: 7px 4px; text-align: right; }
  .dtable.is-cards td:last-child { border-bottom: 0; }
  .dtable.is-cards td::before { content: attr(data-label); font-size: var(--fs-xs); color: var(--c-mute);
    font-weight: var(--fw-semibold); text-align: left; flex: none; }
  .dtable.is-cards td.cell-check { display: none; }
}
/* Cards mode is the ONLY narrow-container form. It deliberately comes AFTER the
   table fallback: two rules that both match a 390 container would otherwise
   disagree, and source order would silently pick one. */
@container (max-width: 700px) {
  /* The base rule is `min-width: 720px`; cards mode must RESET it or the wrap
     keeps a 720px floor and the page overflows its own container. */
  .dtable.is-cards { min-width: 0; }
  .dtable.is-cards thead { display: none; }
  .dtable.is-cards tbody, .dtable.is-cards tbody tr { display: block; }
  .dtable.is-cards tbody tr { border: 1px solid var(--c-line); border-radius: var(--r-md);
    margin-bottom: var(--sp-2); padding: var(--sp-2); background: var(--c-surface); }
  .dtable.is-cards td { display: flex; justify-content: space-between; gap: var(--sp-3);
    border-bottom: 1px dashed var(--c-line-soft); padding: 7px 4px; text-align: right; }
  .dtable.is-cards td:last-child { border-bottom: 0; }
  .dtable.is-cards td::before { content: attr(data-label); font-size: var(--fs-xs); color: var(--c-mute);
    font-weight: var(--fw-semibold); text-align: left; flex: none; }
  .dtable.is-cards td.cell-check { display: none; }
}
/* Container queries let a pinned 390/768/1440 frame exercise the real breakpoints. */
.qframe { container-type: inline-size; }
@container (max-width: 640px) {
  .q-hide-sm { display: none !important; }
  .q-stack { grid-template-columns: minmax(0, 1fr) !important; }
}
.master-detail { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: 100%; min-height: 0; }
.master-detail .md-list { border-right: 1px solid var(--c-line); overflow-y: auto; }
.master-detail .md-detail { overflow-y: auto; display: flex; flex-direction: column; }
@container (max-width: 900px) {
  .master-detail { grid-template-columns: minmax(0, 1fr); }
  .master-detail .md-list { display: none; }
  .master-detail.is-list .md-detail { display: none; }
  .master-detail.is-list .md-list { display: block; }
}
.sticky-cta { position: sticky; bottom: 0; z-index: var(--z-sticky); }

/* ── 14. LAB SHELL (inspection tooling — not part of the product) ──────── */
.lab-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: 48px;
  background: #12131c; color: #cfd2e2; display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4); font-size: var(--fs-xs); border-bottom: 1px solid #262a3d; }
.lab-bar.is-hidden { display: none; }
.lab-brand { display: flex; align-items: center; gap: 8px; flex: none; }
.lab-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--grad-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: 11px; }
.lab-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.lab-brand-text b { color: #fff; font-size: var(--fs-xs); }
.lab-brand-text i { color: #6f7591; font-size: 10px; font-style: normal; }
.lab-views { display: flex; gap: 2px; background: #1c1e2b; border-radius: var(--r-xs); padding: 2px; }
.lab-view { padding: 5px 11px; border-radius: 5px; color: #9ba0bd; font-size: var(--fs-xs); display: inline-flex; align-items: center; gap: 5px; }
.lab-view.is-on { background: var(--c-primary-500); color: #fff; }
.lab-count { background: rgba(255, 255, 255, 0.2); border-radius: var(--r-pill); padding: 0 5px; font-size: 10px; }
.lab-spacer { flex: 1; }
.lab-group { display: flex; align-items: center; gap: 6px; }
.lab-label { color: #6f7591; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.lab-select { background: #1c1e2b; color: #dfe2f0; border: 1px solid #2c3046; border-radius: var(--r-xs);
  padding: 5px 8px; font-size: var(--fs-xs); max-width: 150px; }
.lab-select-wide { max-width: 260px; }
.lab-select-state { max-width: 150px; }
.lab-select-ov { max-width: 140px; }
.lab-sep { width: 1px; height: 22px; background: #2c3046; }
.lab-vp { display: flex; gap: 2px; background: #1c1e2b; border-radius: var(--r-xs); padding: 2px; }
.lab-vp button { padding: 5px 9px; border-radius: 5px; color: #9ba0bd; font-size: var(--fs-xs); }
.lab-vp button.is-on { background: #3a3f5c; color: #fff; }
.lab-nav { display: flex; align-items: center; gap: 5px; }
.lab-nav button { width: 26px; height: 26px; border-radius: var(--r-xs); background: #1c1e2b; color: #cfd2e2; }
.lab-pos { color: #8b90ad; font-variant-numeric: tabular-nums; font-size: var(--fs-xs); min-width: 52px; text-align: center; }
.lab-hide { width: 26px; height: 26px; border-radius: var(--r-xs); background: #1c1e2b; color: #cfd2e2; flex: none; }
.lab-restore { display: none; position: fixed; top: 10px; right: 10px; z-index: 900; width: 34px; height: 34px;
  border-radius: var(--r-xs); background: #12131c; color: #cfd2e2; box-shadow: var(--sh-lg); }
.lab-restore.is-on { display: block; }
.lab-stage { padding-top: 48px; height: 100vh; display: flex; justify-content: center; background: #e8eaf2; }
.lab-bar.is-hidden ~ .lab-stage { padding-top: 0; }
.lab-stage.is-full { padding-top: 48px; }
.dq-frame { background: var(--c-surface); width: 100%; max-width: none; height: 100%;
  display: flex; flex-direction: column; position: relative; overflow: hidden; container-type: inline-size;
  box-shadow: 0 0 0 1px rgba(26, 28, 46, 0.08); }
.dq-frame[data-vp='390'] { max-width: 390px; }
.dq-frame[data-vp='768'] { max-width: 768px; }
.dq-frame[data-vp='1440'] { max-width: 1440px; }
.dq-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; }
.dq-overlay { position: absolute; inset: 0; pointer-events: none; z-index: var(--z-overlay); }
.dq-overlay > * { pointer-events: auto; }
.dq-toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 950;
  display: flex; flex-direction: column; gap: 8px; align-items: center; }
/* Surface index */
.surf-index { padding-bottom: var(--sp-16); background: var(--c-bg); min-height: 100%; }
.surf-index .surf-head { background: var(--c-ink); color: #fff; padding: var(--sp-10) 0 var(--sp-8); }
.surf-index .surf-head .display { color: #fff; }
.surf-index .surf-head .muted { color: var(--c-on-dark-mute); }
.surf-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); }
.surf-filters .chip { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: #d6d9e8; }
.surf-filters .chip.is-on { background: var(--c-primary-500); border-color: var(--c-primary-500); color: #fff; }
.surf-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.surf-groups { padding-top: var(--sp-8); }
.surf-group { margin-bottom: var(--sp-8); }
.surf-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-4); }
.surf-group-head h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c-ink); }
.surf-group-head .n { font-size: var(--fs-xs); color: var(--c-mute); }
.surf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: var(--sp-3); }
.surf-card { text-align: left; background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: var(--sp-4); display: flex; flex-direction: column; gap: 7px;
  transition: all var(--dur) var(--ease); }
.surf-card:hover { border-color: var(--c-primary-300); box-shadow: var(--sh-sm); transform: translateY(-2px); }
.surf-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.surf-id { font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-primary-600); }
.surf-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); }
.surf-desc { font-size: var(--fs-xs); color: var(--c-mute); line-height: 1.55; }
.surf-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto;
  padding-top: 8px; border-top: 1px solid var(--c-line-soft); }
.surf-route { font-size: 10px; color: var(--c-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.density-note { pointer-events: none; position: fixed; bottom: 10px; left: 10px; z-index: 880; font-size: 10px; color: #8b90ad;
  background: rgba(18, 19, 28, 0.86); padding: 4px 9px; border-radius: var(--r-pill); }

/* Pure product host: same container viewport, no inspector offset. */
.app-stage { height: 100vh; display: flex; justify-content: center; background: #e8eaf2; }

/* Pinned TT shared presentation seams. Opt-in Mini/Admin/Web drawer; no global token fork. */
.av-image { object-fit: cover; display: inline-block; vertical-align: middle; }
.reference-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.app-shell { --c-bg: #f5f6fa; --grad-hero: linear-gradient(165deg, #eef1ff 0%, #f6f4ff 50%, #fff4ed 100%); }
.app-topbar-mini { height: 50px; min-height: 50px; padding: 8px; gap: 8px; position: sticky; }
.app-topbar-mini .tb-title { position: absolute; left: 50%; transform: translateX(-50%); text-align: center;
  max-width: calc(100% - 112px); pointer-events: none; }
.app-topbar-mini > :last-child:not(.tb-title) { margin-left: auto; }
.seg-tabs-mini { border-radius: var(--r-pill); padding: 4px; gap: 4px; }
.seg-tabs-mini > button { border-radius: var(--r-pill); padding: 9px 4px; }
.drawer-reference-admin .reference-drawer-header { display: block; flex-shrink: 0; padding: 16px 22px; }
.reference-dh-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.reference-dh-identity { flex: 1; min-width: 0; }
.reference-dh-identity h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.reference-dh-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--c-mute); }
.reference-dh-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.reference-dh-group { margin-top: 12px; }
.drawer-reference-admin .reference-drawer-body { flex: 1; min-height: 0; display: flex; overflow: hidden; padding: 0; }
.reference-anchor-nav { width: 148px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--c-line);
  padding: 14px 8px; overflow-y: auto; }
.reference-anchor { display: block; width: 100%; text-align: left; padding: 8px 11px; border-radius: var(--r-xs);
  font-size: var(--fs-sm); color: var(--c-mute); border: 0; background: transparent; cursor: pointer; }
.reference-anchor:hover { background: var(--c-surface-2); color: var(--c-ink); }
.reference-anchor.is-on { background: var(--c-primary-50); color: var(--c-primary-600); font-weight: var(--fw-medium); }
.drawer-reference-admin .reference-drawer-sections { flex: 1; min-width: 0; overflow-y: auto; padding: 18px 22px 100px; background: #fff; }
.reference-drawer-sections > [id] { scroll-margin-top: 50px; }
.reference-drawer-tabs { display: none; }
.drawer-reference-admin .reference-drawer-actionbar { padding: 12px 22px; gap: 9px; flex-wrap: wrap; flex-shrink: 0; background: #fff; }
.drawer-reference-web { width: min(440px, 92%); background: #fff; }
.drawer-reference-web .drawer-head { padding: 18px 22px; align-items: center; justify-content: space-between; }
.drawer-reference-web .drawer-body { padding: 22px; background: #fff; }
.drawer-reference-web .drawer-foot { padding: 16px 22px; gap: 10px; }
.drawer-reference-web .drawer-foot > .btn { flex: 1; border-radius: var(--r-pill); padding: 12px 24px; line-height: 1.5; }
.drawer-reference-web .icon-btn { width: 40px; height: 40px; }
@container (max-width: 1023px) {
  .reference-anchor-nav { display: none; }
  .drawer-reference-admin .reference-drawer-body { overflow-y: auto; flex-direction: column; }
  .drawer-reference-admin .reference-drawer-sections { overflow: visible; flex: none; }
  .reference-drawer-tabs { display: flex; gap: 2px; overflow-x: auto; position: sticky; top: 0; z-index: 5;
    background: #fff; border-bottom: 1px solid var(--c-line); padding: 0 22px; flex-shrink: 0; scrollbar-width: none; }
  .reference-drawer-tabs::-webkit-scrollbar { display: none; }
  .reference-drawer-tabs .reference-anchor { flex-shrink: 0; width: auto; padding: 10px 11px; white-space: nowrap;
    border-radius: 0; border-bottom: 2px solid transparent; }
  .reference-drawer-tabs .reference-anchor.is-on { background: transparent; border-bottom-color: var(--c-primary-500); }
}
@container (max-width: 640px) {
  .reference-dh-top { flex-direction: column; }
  .reference-dh-identity { width: 100%; }
  .reference-dh-actions { width: 100%; }
  .reference-dh-actions > .icon-btn:last-child { margin-left: auto; }
}
/* Public source chrome, with Owner-required reachable mobile menu retained. */
.pub-header { --nav-h: 68px; height: 68px; background: rgba(255,255,255,.88); backdrop-filter: blur(14px); }
.pub-header > .container { gap: 32px; padding: 0 24px; }
.pub-header .brand, .pub-footer .brand { gap: 9px; font-size: 20px; font-weight: var(--fw-bold); }
.pub-header .brand-mark, .pub-footer .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
.pub-header .pub-nav { gap: 26px; }
.pub-header .pub-nav a { font-size: 15px; padding: 0; font-weight: var(--fw-medium); }
.pub-header-actions { gap: 12px; }
.pub-header-actions .btn { border-radius: var(--r-pill); line-height: 1.5; }
.pub-header-actions .btn-sm { padding: 8px 16px; font-size: 13px; }
.pub-footer { padding: 64px 0 32px; background: #1a1c2e; }
.pub-footer .footer-grid { grid-template-columns: 1.6fr repeat(4,1fr); gap: 40px; }
.pub-footer .footer-col h4 { margin-bottom: 12px; letter-spacing: .04em; }
.pub-footer .footer-col a { line-height: 2; }
.pub-footer .footer-bottom { margin-top: 48px; padding-top: 24px; }
@container (min-width: 981px) {
  .pub-header .pub-nav { display: flex; }
  .pub-header .hamburger { display: none; }
}
@container (max-width: 980px) {
  .pub-header .pub-nav { display: none; }
  .pub-header .hamburger { display: flex; }
  .pub-header-actions { margin-left: auto; }
  .pub-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@container (max-width: 640px) {
  .pub-header > .container { gap: 10px; padding: 0 12px; }
  .pub-header .brand { font-size: 17px; gap: 7px; }
  .pub-header .brand-mark { width: 28px; height: 28px; border-radius: 8px; }
  .pub-header-actions { gap: 8px; }
  .pub-header-actions .btn-sm { padding: 7px 10px; font-size: 13px; white-space: nowrap; }
  .pub-header-actions .hamburger { width: 28px; height: 28px; }
}

.drawer-reference-admin { width: min(880px, 96%); }
.drawer-reference-admin.drawer-wide { width: min(1080px, 96%); }
@container (max-width: 1023px) {
  .drawer-reference-admin, .drawer-reference-admin.drawer-wide {
    width: 100%; max-width: 100%; height: 100%; max-height: 100%;
    top: 0; bottom: 0; border-radius: 0;
  }
}

/* Byte-exact Wot 2.3.1 H5 font. Isolated from vendor wd-icon selectors.
   URL is relative to this stylesheet at the ui root, not js/ or css/. */
@font-face {
  font-family: 'dq-wot-icons-2-3-1';
  src: url('assets/reference/wot/2.3.1/iconfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.dq-wot-icon {
  display: inline-block;
  font-family: 'dq-wot-icons-2-3-1';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 18px;
  line-height: 1;
}

/* Explicit Mini fidelity opt-in. Defaults for Web/Admin/other app roots remain
   unchanged. Scope is the registered surface contract miniFidelity:true. */
/* TT ds.scss:96,105–110: page/screen white; transparent body wrappers
   reveal this paint source, without changing c-bg or card surface tokens. */
.app-shell-mini { background: var(--c-surface); }
/* Pinned TT 2c0998cd source kit: ds.scss badge/search/line-tab/risk-notice.
   Canonical five-root scope only; context tags and unread counters are not badges.
   Root specificity wins over later domain CSS (including compact badge weights). */
.app-shell-mini .sessions-root .badge,
.app-shell-mini .messages-root .badge,
.app-shell-mini .student-me-hero .badge,
.app-shell-mini .me-root .badge,
.app-shell-mini .dashboard-root .badge,
.app-shell-mini .tutor-me-root .badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 500; line-height: 1.5;
  padding: 3px 8px; border-radius: 999px;
}
.app-shell-mini .messages-root .mini-search {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--c-surface-2); border-radius: 999px;
  border: 1px solid var(--c-line); color: var(--c-mute);
}
.app-shell-mini .messages-root .line-tabs { gap: 18px; }
.app-shell-mini .messages-root .line-tabs .line-tab {
  padding: 11px 0; font-size: 15px; font-weight: 500; line-height: 1.5;
  color: var(--c-mute); border-bottom: 2px solid transparent;
  white-space: nowrap; flex-shrink: 0;
}
.app-shell-mini .messages-root .line-tabs .line-tab.is-on {
  color: var(--c-primary-600); border-bottom-color: var(--c-primary-500);
}
.app-shell-mini .messages-root .line-tabs .line-tab.is-on::after { content: none; }
.app-shell-mini .messages-root .risk-notice {
  display: flex; align-items: flex-start; gap: 8px; padding: 11px 13px;
  border-radius: 14px; background: var(--c-warning-bg); color: #8a5a00;
  font-size: 11px; line-height: 1.5;
}
/* student-me/index.vue:172 white-badge, not a global neutral-badge paint. */
.app-shell-mini .me-root .growth-band .badge-neutral {
  background: rgba(255,255,255,.22); color: #fff; border: 0;
}
.app-shell-mini .av-xs { width: 26px; height: 26px; }
.app-shell-mini .av-sm { width: 38px; height: 38px; }
.app-shell-mini .av-md { width: 52px; height: 52px; }
.app-shell-mini .av-lg { width: 72px; height: 72px; }
.app-shell-mini .av-xl { width: 92px; height: 92px; }
.app-shell-mini .av-ring { border: 3px solid #fff; box-shadow: var(--sh-sm); }
.app-shell-mini .progress-bar { background: var(--c-line-soft); border-radius: var(--r-pill); }
.app-shell-mini .progress-bar i { border-radius: var(--r-pill); }
.app-shell-mini .btn-sm { padding: 8px 15px; font-size: var(--fs-sm); }
.app-shell-mini .app-topbar-mini { height: calc(50px + env(safe-area-inset-top, 0px));
  min-height: calc(50px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 8px 0; background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px); box-shadow: none; }
.app-shell-mini .app-topbar-mini.is-scrolled { box-shadow: 0 3px 14px rgba(26,28,46,.07); transition: box-shadow .2s ease; }
/* Fixed descendants use the stationary preview frame, never browser viewport.
   This opt-in is layout containment only: host markup/runtime remain untouched. */
.dq-frame:has(.app-shell-mini) { transform: translateZ(0); container-name: adaptive-app; }
.app-shell-mini .app-body.has-tabbar { padding-bottom: calc(70px + 2 * env(safe-area-inset-bottom, 0px)); }
/* Runtime hoists the opted bar out of the shell into dq-scroll. The frame
   remains the containment authority; every bar rule survives that move. */
@container adaptive-app (max-width: 1023px) {
.dq-frame:has(.app-shell-adaptive) .dq-scroll .tabbar-mini { position: fixed; bottom: 0; left: 14px; right: 14px;
  margin: 0 0 calc(10px + env(safe-area-inset-bottom, 0px));
  height: calc(50px + env(safe-area-inset-bottom, 0px));
  padding: 0 0 env(safe-area-inset-bottom, 0px); border-radius: var(--r-xl);
  background: rgba(255,255,255,.96); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.6); box-shadow: var(--sh-lg); }
.dq-frame:has(.app-shell-adaptive) .dq-scroll .tabbar-mini .tab-item { height: 50px; padding: 0 12px; gap: 3px;
  font-size: 10px; font-weight: 500; color: var(--c-faint); }
.dq-frame:has(.app-shell-adaptive) .dq-scroll .tabbar-mini .tab-item.is-on { font-weight: 500; color: var(--c-primary-600); }
.app-shell-adaptive .adaptive-app-header { display: none; }
}

/* Desktop is primary workflow navigation, not a second sidebar. Local Mini
   headers remain: their titles/actions are canonical and not all are chrome. */
.app-shell-adaptive .adaptive-app-header { display: none; }
@container adaptive-app (min-width: 1024px) {
  .app-shell-adaptive .adaptive-app-header { display: flex; position: sticky; top: 0;
    z-index: var(--z-nav); align-items: center; justify-content: space-between;
    min-height: 64px; padding: 8px 24px; gap: 24px; background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--c-line-soft); backdrop-filter: blur(14px); }
  .app-shell-adaptive .adaptive-primary-nav { display: flex; gap: 8px; }
  .app-shell-adaptive .adaptive-primary-item { padding: 10px 16px; border-radius: var(--r-pill);
    background: transparent; color: var(--c-mute); font-size: 15px; }
  .app-shell-adaptive .adaptive-primary-item.is-on { color: var(--c-primary-600); background: var(--c-primary-50); }
  .app-shell-adaptive .adaptive-header-actions { display: flex; align-items: center; gap: 12px; }
  .app-shell-adaptive .adaptive-avatar-menu { position: relative; }
  .app-shell-adaptive .adaptive-avatar-menu summary { cursor: pointer; list-style: none; border-radius: var(--r-pill); }
  .app-shell-adaptive .adaptive-avatar-menu summary::-webkit-details-marker { display: none; }
  .app-shell-adaptive .adaptive-avatar-links { position: absolute; right: 0; top: calc(100% + 8px);
    display: flex; flex-direction: column; min-width: 144px; padding: 8px; gap: 4px;
    background: #fff; border: 1px solid var(--c-line-soft); border-radius: var(--r-md); box-shadow: var(--sh-lg); }
  .app-shell-adaptive .adaptive-avatar-links button { padding: 10px 12px; text-align: left; background: transparent; }
  /* Keep canonical page title/actions without a second sticky top-zero layer. */
  .app-shell-adaptive .app-topbar-mini { position: relative; }
  .app-shell-adaptive .app-body.has-tabbar { padding-bottom: 24px; }
  .dq-frame:has(.app-shell-adaptive) .dq-scroll .tabbar-mini { display: none; }
}

/* Canonical Mini type does not inherit browser-window PC scale: preview
   container width governs owned grids, while source type remains invariant. */
.app-shell-mini { --fs-h2: 19px; --fs-h3: 17px; --fs-lg: 16px;
  --fs-md: 15px; --fs-sm: 13px; --fs-xs: 11px;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC',
    'Microsoft YaHei', 'Helvetica Neue', sans-serif;
}
/* Runtime parks the same Mini capsule outside the shell; retain text scope. */
.dq-frame:has(.app-shell-mini) .dq-scroll > .tabbar-mini {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC',
    'Microsoft YaHei', 'Helvetica Neue', sans-serif;
}

/* Public source chrome relocated by runtime: never apply to Mini/App avatars. */
.dq-frame > .public-conv-mounted .avatar-sm {
  width: 40px; height: 40px; min-width: 40px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
}
.dq-frame.has-conv:has(> .public-conv-mounted) .dq-scroll {
  padding-bottom: var(--public-conv-height, 84px);
  scroll-padding-bottom: var(--public-conv-height, 84px);
}
.dq-frame > .public-conv-mounted {
  background: #fff; border-top: 1px solid var(--color-line); padding: 12px 0;
  box-shadow: 0 -4px 20px rgba(26,28,46,.08);
}
@container (max-width: 640px) {
  .dq-frame > .public-conv-mounted .container { flex-direction: column; align-items: stretch; gap: 8px; }
  .dq-frame > .public-conv-mounted .btn { flex: 1; min-width: 0; font-size: 12px; padding: 10px 8px; }
  .dq-frame > .public-conv-mounted .detail-conv-label { font-size: 12px; }
}
/* One shared overlay host owns scrim, focus isolation and public menu. */
.dq-overlay > .pub-drawer-panel {
  z-index: var(--z-panel); position: absolute; top: 0; right: 0; bottom: 0;
}
.pub-footer button.social-ico {
  width: 36px; height: 36px; flex: 0 0 36px; border: 0; padding: 0;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: var(--fw-bold); cursor: pointer;
}

/* Task30: sourceFrameChrome opt-in only. Source owns safe-area content padding. */
.dq-frame.dq-source-frame > .dq-source-slot { flex: 0 0 auto; width: 100%; min-width: 0; position: relative; }
.dq-frame.dq-source-frame > .dq-scroll { flex: 1 1 0; min-height: 0; scroll-padding-top: var(--dq-source-top-height, 0px); scroll-padding-bottom: var(--dq-source-bottom-height, 0px); }
.dq-frame.dq-source-frame > .dq-source-bottom > [data-dq-frame-bottom].action-bar { position: static; inset: auto; width: 100%; }