/* ============================================================================
   MAS Core — UI Modernization mock-up stylesheet
   Standalone. Not loaded by the app.
   Interactive primary stays Discord-blurple (#5865F2). The ambulance red
   (#D52B1E) is an IDENTITY accent only — never an interactive/error colour.
   Dark is the default token set; light is a parallel token set (no overrides).
   ========================================================================= */

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

/* ---------- tokens: dark (default) ---------- */
:root {
  /* interactive brand — unchanged */
  --brand:        #5865F2;
  --brand-strong: #6B76F5;
  --brand-deep:   #4752C4;
  --brand-soft:   rgba(88, 101, 242, .16);
  --accent-2:     #57F287;
  --accent-2-soft: rgba(87, 242, 135, .14);

  /* identity accent (hero / logo / motifs only) */
  --brand-2:      #D52B1E;
  --brand-2-soft: rgba(213, 43, 30, .13);

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

  /* surfaces */
  --bg-app:       #17181C;
  --bg-surface:   #1E1F22;
  --bg-surface-2: #232428;
  --bg-elevated:  #2B2D31;
  --bg-hover:     #33353B;
  --bg-active:    #3B3D44;
  --bg-glass:     rgba(30, 31, 34, .78);
  --line:         rgba(255, 255, 255, .07);
  --line-strong:  rgba(255, 255, 255, .13);

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

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

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

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

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

/* ---------- tokens: light (parallel set) ---------- */
html[data-theme="light"] {
  --brand:        #4752C4;
  --brand-strong: #5865F2;
  --brand-deep:   #3B45A8;
  --brand-soft:   rgba(71, 82, 196, .12);
  --accent-2:     #1F8A44;
  --brand-2:      #C0261A;
  --brand-2-soft: rgba(192, 38, 26, .10);

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

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

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

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

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

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

/* ---------- rail ---------- */
.rail {
  position: sticky; top: 0; height: 100vh;
  background: var(--rail-bg);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; z-index: 40;
}
.rail-head { height: var(--topbar-h); display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); border-bottom: 1px solid var(--line); flex: 0 0 auto; }
/* Brand lockup. Replaces the former 34x34 gradient "MA" tile + .rail-brand text pair, so the rail
   header carries the service's real logo. /logo.png is a wide lockup (680x261), so it is
   height-constrained and free to take its natural width; it is never cropped to a square. 30px
   leaves room inside the 64px rail head and keeps the rail head from reflowing when the image lands. */
.rail-brand { min-width: 0; display: flex; align-items: center; }
.rail-brand-logo { display: block; height: 30px; width: auto; max-width: 100%; object-fit: contain; }
/* The lockup is artwork drawn for a DARK background: its wordmark is white, which reads well on the
   dark rail but disappears against the near-white LIGHT rail (compositing the PNG over #FFFFFF puts
   the wordmark at ~1:1 contrast with the background). It needs no help on the dark rail, so only the
   light theme gives it a backing surface - the same near-black the rail itself uses in dark theme, so
   no new colour is introduced and the artwork is never recoloured or cropped to fix contrast. */
html[data-theme="light"] .rail-brand {
  background: linear-gradient(180deg, #1E1F22 0%, #191A1D 100%);
  border-radius: 10px;
  padding: 5px 10px;
}
.rail-collapse { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; color: var(--text-3); display: grid; place-items: center; }
.rail-collapse:hover { background: var(--bg-hover); color: var(--text); }

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

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

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

.app.rail-collapsed .dom-label,
.app.rail-collapsed .dom-badge,
.app.rail-collapsed .nav-group-title,
.app.rail-collapsed .ni-label,
.app.rail-collapsed .ni-pin,
.app.rail-collapsed .nav-count,
.app.rail-collapsed .rail-user .ru-t { display: none; }
/* The brand lockup stays visible when collapsed (it used to be the letter tile that survived, while
   only the text was hidden), but the collapsed rail is 76px wide, so the wide lockup is scaled down
   rather than allowed to collide with the rail edges. */
.app.rail-collapsed .rail-brand-logo { height: 22px; }
/* Keep the light-theme backing inside the 76px collapsed rail. */
html[data-theme="light"] .app.rail-collapsed .rail-brand { padding: 3px 6px; }
.app.rail-collapsed .rail-head { justify-content: center; padding: 0; }
.app.rail-collapsed .rail-collapse { display: none; }
.app.rail-collapsed .dom,
.app.rail-collapsed .nav-item { justify-content: center; padding: 9px 0; }
.app.rail-collapsed .dom.on::before { display: none; }
.app.rail-collapsed .rail-scroll { padding-inline: var(--sp-2); }
.app.rail-collapsed .nav-group { margin-bottom: var(--sp-2); }

/* ---------- main + topbar ---------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h); flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-5);
  background: var(--bg-glass); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
}
.crumbs { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-3); font-size: 13px; min-width: 0; }
.crumbs b { color: var(--text); font-weight: 600; }
.topbar-spacer { flex: 1 1 auto; }
.searchbtn {
  display: flex; align-items: center; gap: var(--sp-3); height: 38px; padding: 0 12px; min-width: 260px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--field-bg);
  color: var(--text-3); font-size: 13px; transition: border-color var(--d1) var(--ease), background var(--d1) var(--ease);
}
.searchbtn:hover { border-color: var(--brand); color: var(--text-2); }
.kbd { font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--bg-surface-2); color: var(--text-2); }
.searchbtn .kbd { margin-left: auto; }
.iconbtn { width: 38px; height: 38px; border-radius: var(--r-md); position: relative; display: grid; place-items: center; color: var(--text-2); border: 1px solid transparent; }
.iconbtn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--line); }
.iconbtn .dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--bg-app); }
.topbar-user { display: flex; align-items: center; gap: var(--sp-3); padding-left: var(--sp-2); border-left: 1px solid var(--line); }

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

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

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

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

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

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

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--line);
  background:
    radial-gradient(120% 160% at 0% 0%, var(--brand-2-soft) 0%, transparent 52%),
    radial-gradient(120% 160% at 100% 0%, var(--brand-soft) 0%, transparent 45%),
    linear-gradient(160deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
  padding: var(--sp-5);
}
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--hero-motif); background-position: right -40px bottom -30px; background-repeat: no-repeat; background-size: 460px auto; }
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: 25px; }
.hero .hero-sub { color: var(--text-2); margin-top: 4px; font-size: 13.5px; }
.hero .hero-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); flex-wrap: wrap; }

:root {
  /* ECG / ambulance cross motif — identity accent + interactive blurple */
  --hero-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='200' viewBox='0 0 460 200' fill='none'%3E%3Cg stroke='%23D52B1E' stroke-opacity='.22' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 104 H60 L74 104 L86 68 L100 140 L112 92 L126 104 H190 L204 62 L218 142 L232 88 L246 104 H320 L334 70 L348 138 L362 92 L376 104 H460'/%3E%3C/g%3E%3Cg stroke='%235865F2' stroke-opacity='.16' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 150 H34 V132 H62 V150 H120 V124 H150 V150 H232 V130 H262 V150 H330 V126 H358 V150 H460'/%3E%3Cpath d='M0 56 H28 V44 H56 V56 H140 V40 H172 V56 H250 V46 H280 V56 H360 V42 H392 V56 H460'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-theme="light"] {
  --hero-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='200' viewBox='0 0 460 200' fill='none'%3E%3Cg stroke='%23C0261A' stroke-opacity='.18' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 104 H60 L74 104 L86 68 L100 140 L112 92 L126 104 H190 L204 62 L218 142 L232 88 L246 104 H320 L334 70 L348 138 L362 92 L376 104 H460'/%3E%3C/g%3E%3Cg stroke='%234752C4' stroke-opacity='.13' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 150 H34 V132 H62 V150 H120 V124 H150 V150 H232 V130 H262 V150 H330 V126 H358 V150 H460'/%3E%3Cpath d='M0 56 H28 V44 H56 V56 H140 V40 H172 V56 H250 V46 H280 V56 H360 V42 H392 V56 H460'/%3E%3C/g%3E%3C/svg%3E");
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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