/* SMEFoundation chassis CSS — lifted verbatim from SME-Settings-Phase3.html. Brand tokens are overridden in InsightOS.html; do not edit values here. */

/* ---------------------------------------------------------------------------
   TOKENS — MIRROR, NOT SOURCE.
   Canonical source: design_handoff_smefoundation/tokens/tokens.css
   This inline block exists only so the review file is self-contained. Values are
   identical; when implementing, consume tokens.css and delete this block. Any
   change must be made in tokens.css first, then mirrored here.
   --------------------------------------------------------------------------- */
:root {
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px;
  --radius-sm:3px; --radius-md:5px; --radius-lg:8px; --radius-pill:999px;
  --font-ui:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --font-arabic:'Noto Sans Arabic', system-ui, sans-serif;
  --fs-body:13.5px; --fs-meta:12px; --fs-tertiary:11.5px; --fs-chip:11px; --fs-mono:12px;
  --topbar-h:50px; --rail-w:52px; --side-w:232px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --d-fast:110ms; --d-normal:180ms;
  --i-sm:13px; --i-md:16px; --i-lg:22px;
}
:root[data-color-mode="dark"] {
  --bg-app:#0a0a0c; --bg-surface:#14141a; --bg-elevated:#1a1a22; --bg-sunken:#050507;
  --bg-hover:rgba(255,255,255,0.04); --bg-active:rgba(255,255,255,0.07);
  --bg-row-sel:rgba(74,139,253,0.10); --bg-row-stripe:rgba(255,255,255,0.015);
  --border-subtle:rgba(255,255,255,0.06); --border-default:rgba(255,255,255,0.12); --border-strong:rgba(255,255,255,0.22);
  --text-strong:#f0f0f3; --text-body:#c5c5cc; --text-muted:#a0a0a8; --text-tertiary:#6c6c75;
  --text-disabled:#45454f; --text-on-accent:#ffffff;
  --accent-500:#4a8bfd; --accent-600:#3a78e0; --accent-100:rgba(74,139,253,0.14); --accent-text-on:#6aa0ff;
  --color-success-500:#10b981; --color-warning-500:#f59e0b; --color-danger-500:#ef4444; --color-info-500:#4a8bfd;
  --color-success-100:rgba(16,185,129,0.14); --color-warning-100:rgba(245,158,11,0.14);
  --color-danger-100:rgba(239,68,68,0.14); --color-info-100:rgba(74,139,253,0.14);
  --danger-600:#dc2626; --danger-bg-hover:rgba(239,68,68,0.18);
  --save-bar-bg:rgba(20,20,26,0.92);
  --ai-grad:linear-gradient(135deg,#4a8bfd,#6a4dd0);
  --user-bubble:rgba(255,255,255,0.05); --scrim:rgba(0,0,0,0.55);
  --tooltip-bg:#000; --tooltip-fg:#f0f0f3;
  --focus-ring:0 0 0 2.5px rgba(74,139,253,0.40);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:0 4px 12px -2px rgba(0,0,0,0.5),0 2px 4px -2px rgba(0,0,0,0.3);
  --shadow-lg:0 12px 32px -6px rgba(0,0,0,0.6),0 6px 12px -4px rgba(0,0,0,0.4);
}
:root[data-color-mode="light"] {
  --bg-app:#f7f7f9; --bg-surface:#ffffff; --bg-elevated:#ffffff; --bg-sunken:#eeeef2;
  --bg-hover:rgba(0,0,0,0.035); --bg-active:rgba(0,0,0,0.06);
  --bg-row-sel:rgba(37,99,235,0.06); --bg-row-stripe:rgba(0,0,0,0.015);
  --border-subtle:#e4e4ec; --border-default:#d4d4dc; --border-strong:#a8a8b0;
  --text-strong:#0a0a0c; --text-body:#2a2a32; --text-muted:#58585f; --text-tertiary:#7a7a82;
  --text-disabled:#b4b4bc; --text-on-accent:#ffffff;
  --accent-500:#2563eb; --accent-600:#1d4ed8; --accent-100:rgba(37,99,235,0.08); --accent-text-on:#1d4ed8;
  --color-success-500:#059669; --color-warning-500:#d97706; --color-danger-500:#dc2626; --color-info-500:#2563eb;
  --color-success-100:rgba(5,150,105,0.10); --color-warning-100:rgba(217,119,6,0.12);
  --color-danger-100:rgba(220,38,38,0.10); --color-info-100:rgba(37,99,235,0.08);
  --danger-600:#b91c1c; --danger-bg-hover:rgba(220,38,38,0.10);
  --save-bar-bg:rgba(255,255,255,0.95);
  --ai-grad:linear-gradient(135deg,#2563eb,#6a4dd0);
  --user-bubble:rgba(0,0,0,0.04); --scrim:rgba(15,15,20,0.35);
  --tooltip-bg:#0a0a0c; --tooltip-fg:#fff;
  --focus-ring:0 0 0 2.5px rgba(37,99,235,0.35);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:0 4px 12px -2px rgba(0,0,0,0.10),0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg:0 12px 32px -6px rgba(0,0,0,0.15),0 6px 12px -4px rgba(0,0,0,0.08);
}
:root[data-density="relaxed"] { --row-py:11px; --row-h:46px; --fs-body:14px; --fs-meta:12.5px; --fs-tertiary:12px; --fs-mono:12.5px; --i-sm:14px; --i-md:17px; --i-lg:23px; --field-gap:20px; }
:root[data-density="default"] { --row-py:8px; --row-h:38px; --field-gap:16px; }
:root[data-density="compact"] { --row-py:5px; --row-h:30px; --fs-body:13px; --fs-meta:11.5px; --fs-tertiary:11px; --fs-mono:11.5px; --i-sm:12px; --i-md:15px; --i-lg:21px; --field-gap:12px; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; } }

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; height:100%; }
body { font-family:var(--font-ui); font-size:var(--fs-body); line-height:1.55; color:var(--text-body); background:var(--bg-app); -webkit-font-smoothing:antialiased; overflow:hidden; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; padding:0; user-select:none; }
input,textarea { font:inherit; }
a { color:inherit; text-decoration:none; }
svg { display:block; flex-shrink:0; }
.icon { width:var(--i-md); height:var(--i-md); stroke-width:1.75; }
.icon-sm { width:var(--i-sm); height:var(--i-sm); stroke-width:1.75; }
.icon-lg { width:var(--i-lg); height:var(--i-lg); stroke-width:1.5; }
.mono { font-family:var(--font-mono); }
[hidden] { display:none !important; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--border-default); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:var(--border-strong); background-clip:padding-box; }

.skip-link { position:fixed; top:8px; left:8px; z-index:200; padding:9px 14px; border-radius:var(--radius-md); background:var(--accent-500); color:var(--text-on-accent); font-size:13px; font-weight:600; transform:translateY(-160%); transition:transform var(--d-fast) var(--ease); }
.skip-link:focus-visible { transform:translateY(0); outline:none; box-shadow:var(--focus-ring); }

/* ============================== APP SHELL ============================== */
.app { display:grid; grid-template-rows:var(--topbar-h) 1fr; height:100vh; }

/* TOP BAR */
.topbar { display:flex; align-items:center; gap:14px; padding:0 14px; height:var(--topbar-h); background:var(--bg-surface); border-bottom:1px solid var(--border-subtle); z-index:30; position:relative; }
.ws-switch { display:flex; align-items:center; gap:9px; height:34px; padding:0 9px 0 7px; border-radius:var(--radius-md); transition:background var(--d-fast); }
.ws-switch:hover { background:var(--bg-hover); }
.ws-switch .mark { width:26px; height:26px; border-radius:var(--radius-sm); background:var(--ai-grad); display:grid; place-items:center; color:#fff; font-weight:700; font-size:11px; font-family:var(--font-mono); letter-spacing:-0.02em; }
.ws-switch .nm { font-weight:600; color:var(--text-strong); font-size:13.5px; }
.ws-switch .nm .ent { color:var(--text-tertiary); font-weight:400; font-size:11.5px; display:block; margin-top:-2px; }
.ws-switch .cev { color:var(--text-tertiary); }
.topbar .grow { flex:1; }

.cmd-trigger { display:flex; align-items:center; gap:9px; width:min(440px,42vw); height:34px; padding:0 11px; border-radius:var(--radius-md); background:var(--bg-app); border:1px solid var(--border-subtle); color:var(--text-tertiary); font-size:12.5px; transition:all var(--d-fast); }
.cmd-trigger:hover { border-color:var(--border-default); color:var(--text-muted); }
.cmd-trigger .ph { flex:1; text-align:start; }
.cmd-trigger .kbd { font-family:var(--font-ui); font-size:10.5px; padding:2px 6px; background:var(--bg-elevated); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); color:var(--text-tertiary); }

.cluster { display:flex; align-items:center; gap:2px; }
.cl-btn { position:relative; width:34px; height:34px; border-radius:var(--radius-md); display:grid; place-items:center; color:var(--text-muted); transition:all var(--d-fast); }
.cl-btn:hover { background:var(--bg-hover); color:var(--text-strong); }
.cl-btn.is-on { background:var(--accent-100); color:var(--accent-text-on); }
.cl-btn.spark.is-on, .cl-btn.spark:hover { color:#fff; background:transparent; }
.cl-btn.spark { color:var(--accent-text-on); }
.cl-btn .nbadge { position:absolute; top:3px; inset-inline-end:3px; min-width:15px; height:15px; padding:0 3px; border-radius:99px; background:var(--color-danger-500); color:#fff; font-size:9px; font-weight:700; display:grid; place-items:center; font-family:var(--font-mono); }
.cl-btn.mic.is-listening { color:var(--color-danger-500); }
.cl-btn.mic.is-listening::after { content:''; position:absolute; inset:0; border-radius:var(--radius-md); box-shadow:0 0 0 0 var(--color-danger-500); animation:pulse-ring 1.6s ease-out infinite; }
@keyframes pulse-ring { 0%{box-shadow:0 0 0 0 rgba(239,68,68,0.45);} 100%{box-shadow:0 0 0 8px rgba(239,68,68,0);} }
.status-pill { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px 0 8px; border-radius:var(--radius-pill); font-size:11px; font-weight:500; background:var(--color-success-100); color:var(--color-success-500); margin:0 4px; }
.status-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status-pill.degraded { background:var(--color-warning-100); color:var(--color-warning-500); }
.avatar-btn { width:30px; height:30px; border-radius:50%; background:#10b981; color:#fff; display:grid; place-items:center; font-size:11px; font-weight:700; margin-inline-start:4px; border:2px solid transparent; transition:border-color var(--d-fast); }
.avatar-btn:hover, .avatar-btn.is-on { border-color:var(--accent-500); }
.tb-mini { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 9px; border-radius:var(--radius-md); font-size:11.5px; color:var(--text-muted); border:1px solid var(--border-subtle); transition:all var(--d-fast); }
.tb-mini:hover { color:var(--text-strong); background:var(--bg-hover); }
.tb-mini .v { color:var(--text-strong); font-family:var(--font-mono); font-size:10.5px; }
.tb-mini.is-on { color:var(--accent-text-on); border-color:transparent; background:var(--accent-100); }

/* BODY: rail | settings sidebar | content */
.body { display:grid; grid-template-columns:var(--rail-w) var(--side-w) 1fr; min-height:0; }

.rail { background:var(--bg-sunken); border-inline-end:1px solid var(--border-subtle); display:flex; flex-direction:column; align-items:center; padding:10px 0; gap:4px; }
.rail-btn { width:36px; height:36px; border-radius:var(--radius-md); display:grid; place-items:center; color:var(--text-tertiary); transition:all var(--d-fast); position:relative; }
.rail-btn:hover { background:var(--bg-hover); color:var(--text-strong); }
.rail-btn.is-active { background:var(--accent-100); color:var(--accent-text-on); }
.rail-btn.is-active::before { content:''; position:absolute; inset-inline-start:-10px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--accent-500); }
.rail .sp { flex:1; }

/* SETTINGS SIDEBAR */
.side { background:var(--bg-app); border-inline-end:1px solid var(--border-subtle); overflow-y:auto; padding:12px 10px 24px; }
.side-back { display:flex; align-items:center; gap:7px; width:100%; padding:6px 8px; margin-bottom:6px; border-radius:var(--radius-sm); font-size:12px; color:var(--text-muted); transition:all var(--d-fast); }
.side-back:hover { color:var(--text-strong); background:var(--bg-hover); }
.side-title { font-size:14px; font-weight:600; color:var(--text-strong); padding:4px 8px 10px; }
.side-grp { padding:12px 8px 4px; font-size:9.5px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.08em; }
.side-grp:first-of-type { padding-top:2px; }
.side-nav { display:flex; align-items:flex-start; gap:9px; width:100%; padding:6px 8px; border-radius:var(--radius-sm); font-size:12.5px; color:var(--text-muted); text-align:start; transition:all var(--d-fast); line-height:1.35; }
.side-nav:hover { background:var(--bg-hover); color:var(--text-strong); }
.side-nav.is-active { background:var(--accent-100); color:var(--accent-text-on); font-weight:500; }
.side-nav svg { color:var(--text-tertiary); margin-top:1px; }
.side-nav.is-active svg { color:var(--accent-text-on); }
.side-nav .addon { margin-top:1px; }
.side-nav .addon { margin-inline-start:auto; font-size:8.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-tertiary); background:var(--bg-elevated); border:1px solid var(--border-subtle); padding:1px 5px; border-radius:99px; }

/* CONTENT / PANEL */
.content { min-width:0; min-height:0; display:flex; flex-direction:column; background:var(--bg-surface); }
.panel { flex:1; display:flex; flex-direction:column; min-height:0; }
.scroll { flex:1; overflow-y:auto; }
.scroll-pad { padding:24px 30px 40px; max-width:1080px; }
.scroll-pad.wide { max-width:none; }

/* PANEL HEADER */
.phead { display:flex; align-items:flex-start; gap:14px; padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--border-subtle); }
.phead .pht { flex:1; min-width:0; }
.phead .ptitle { font-size:19px; font-weight:600; color:var(--text-strong); letter-spacing:-0.01em; margin:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.phead .psub { font-size:12.5px; color:var(--text-muted); margin:6px 0 0; line-height:1.55; max-width:72ch; }
.phead .pacts { display:flex; gap:8px; flex-shrink:0; }
.scope-badge { display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px; border-radius:var(--radius-pill); font-size:10px; font-weight:600; letter-spacing:0.02em; text-transform:uppercase; white-space:nowrap; }
.scope-badge::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.scope-badge.ws { background:var(--bg-elevated); color:var(--text-muted); }
.scope-badge.entity { background:var(--color-warning-100); color:var(--color-warning-500); }
.scope-badge.hybrid { background:var(--accent-100); color:var(--accent-text-on); }
.scope-badge.user { background:var(--color-success-100); color:var(--color-success-500); }
.scope-badge.peruser { background:var(--color-success-100); color:var(--color-success-500); }

/* SPEC NOTE (revealed when Spec mode on) */
.spec-note { display:none; gap:18px; flex-wrap:wrap; margin:0 0 20px; padding:12px 14px; background:var(--bg-app); border:1px dashed var(--border-default); border-radius:var(--radius-md); font-size:11.5px; }
body.show-spec .spec-note { display:flex; }
.spec-note .sn { display:flex; flex-direction:column; gap:2px; }
.spec-note .sn .k { font-size:9px; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-tertiary); font-weight:600; }
.spec-note .sn .v { color:var(--text-body); font-family:var(--font-mono); font-size:11px; }
.spec-note .sn .v.plain { font-family:var(--font-ui); }

/* FIELD BLOCKS (from scaffold) */
.fblock { border-top:1px solid var(--border-subtle); padding:22px 0; }
.fblock:first-of-type { border-top:none; padding-top:0; }
.fbhead { margin-bottom:var(--field-gap); }
.fbtitle { font-size:13px; font-weight:600; color:var(--text-strong); }
.fbdesc { font-size:12px; color:var(--text-tertiary); margin-top:3px; line-height:1.5; max-width:64ch; }
.ffields { display:flex; flex-direction:column; gap:var(--field-gap); }
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field .lbl { display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:500; color:var(--text-strong); }
.field .lbl .req { color:var(--color-danger-500); }
.field .lbl .opt { color:var(--text-tertiary); font-weight:400; font-size:11px; }
.field .lbl .info { display:inline-grid; place-items:center; width:14px; height:14px; color:var(--text-tertiary); cursor:help; }
.field .lbl .info:hover { color:var(--text-strong); }
.field .info svg { width:13px; height:13px; }
.ctl { position:relative; display:flex; align-items:center; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input[type=url], .field textarea, .field .select {
  width:100%; min-height:34px; padding:7px 11px; background:var(--bg-app); border:1px solid var(--border-default);
  border-radius:var(--radius-md); color:var(--text-strong); font:inherit; font-size:13px; outline:none; transition:border-color var(--d-fast), box-shadow var(--d-fast); }
.field textarea { resize:vertical; min-height:72px; line-height:1.5; }
.field input:hover, .field textarea:hover, .field .select:hover { border-color:var(--border-strong); }
.field input:focus-visible, .field textarea:focus-visible { border-color:var(--accent-500); box-shadow:var(--focus-ring); }
.field input::placeholder, .field textarea::placeholder { color:var(--text-tertiary); }
.field input.mono, .field textarea.mono { font-family:var(--font-mono); font-size:12px; }
.field .select { display:flex; align-items:center; justify-content:space-between; cursor:pointer; gap:8px; }
.field .select .ph { color:var(--text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.field .select svg { color:var(--text-tertiary); }
.field .hint { font-size:11.5px; color:var(--text-tertiary); line-height:1.45; }
.field .hint.legal { color:var(--text-muted); background:var(--bg-app); border-inline-start:2px solid var(--border-default); padding:6px 10px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.field .err { font-size:11.5px; color:var(--color-danger-500); display:flex; align-items:center; gap:5px; }
.ctl.is-error input, .ctl.is-error .select { border-color:var(--color-danger-500); }
.field .affix { position:absolute; inset-inline-end:11px; font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary); pointer-events:none; }
.field .lead-affix { position:absolute; inset-inline-start:11px; color:var(--text-tertiary); font-size:13px; pointer-events:none; }
.ctl.has-lead input { padding-inline-start:30px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.field-row.three { grid-template-columns:1fr 1fr 1fr; }
.field.span-2 { grid-column:1 / -1; }
.readonly-val { font-size:13px; color:var(--text-body); padding:7px 0; }
.readonly-val .mono { font-family:var(--font-mono); font-size:12px; color:var(--text-strong); }
.field.is-readonly input, .field.is-readonly .select { background:var(--bg-sunken); color:var(--text-muted); cursor:default; border-style:dashed; }

/* segmented radio */
.segctl { display:inline-flex; gap:4px; padding:3px; background:var(--bg-app); border:1px solid var(--border-default); border-radius:var(--radius-md); width:fit-content; }
.segctl button { height:26px; padding:0 12px; border-radius:var(--radius-sm); font-size:12px; font-weight:500; color:var(--text-muted); transition:all var(--d-fast); white-space:nowrap; }
.segctl button:hover { color:var(--text-strong); }
.segctl button.is-active { background:var(--accent-500); color:#fff; }
.segctl.wrap { flex-wrap:wrap; width:auto; }

/* toggle row */
.toggle-field { display:flex; align-items:center; gap:14px; padding:2px 0; }
.toggle-field .tf-text { flex:1; min-width:0; }
.toggle-field .tf-title { font-size:12.5px; font-weight:500; color:var(--text-strong); display:flex; align-items:center; gap:5px; }
.toggle-field .tf-desc { font-size:11.5px; color:var(--text-tertiary); margin-top:1px; line-height:1.45; max-width:60ch; }
.switch { width:34px; height:20px; border-radius:99px; background:var(--bg-elevated); border:1px solid var(--border-default); position:relative; cursor:pointer; flex-shrink:0; transition:all var(--d-fast); }
.switch::after { content:''; position:absolute; top:2px; inset-inline-start:2px; width:14px; height:14px; border-radius:50%; background:var(--text-muted); transition:all var(--d-fast); }
.switch.on { background:var(--accent-500); border-color:var(--accent-500); }
.switch.on::after { inset-inline-start:16px; background:#fff; }

/* SAVE BAR */
.savebar { position:sticky; bottom:0; display:flex; align-items:center; gap:12px; padding:12px 30px; background:var(--save-bar-bg); backdrop-filter:blur(8px); border-top:1px solid var(--border-default); box-shadow:var(--shadow-lg); z-index:5; }
.savebar .sb-status { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-muted); }
.savebar .sb-status .dot { width:7px; height:7px; border-radius:50%; background:var(--color-warning-500); }
.savebar .sb-status.saved .dot { background:var(--color-success-500); }
.savebar .sb-status.saving .dot { background:var(--accent-500); }
.savebar .grow { flex:1; }
.autosave { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-tertiary); }
.autosave .dot { width:6px; height:6px; border-radius:50%; background:var(--color-success-500); }

/* RO banner */
.ro-banner { display:flex; align-items:center; gap:9px; padding:9px 13px; border-radius:var(--radius-md); background:var(--bg-elevated); border:1px solid var(--border-subtle); font-size:12px; color:var(--text-muted); margin-bottom:20px; }
.ro-banner svg { color:var(--text-tertiary); }

/* DANGER ZONE */
.danger-zone { border:1px solid color-mix(in oklab,var(--color-danger-500) 35%,transparent); border-radius:var(--radius-md); margin-top:24px; overflow:hidden; }
.dz-head { padding:11px 14px; background:var(--color-danger-100); display:flex; align-items:center; gap:8px; }
.dz-head .t { font-size:12.5px; font-weight:600; color:var(--color-danger-500); }
.dz-row { display:flex; align-items:center; gap:14px; padding:14px; border-top:1px solid var(--border-subtle); }
.dz-text { flex:1; min-width:0; }
.dz-text .h { font-size:12.5px; font-weight:500; color:var(--text-strong); }
.dz-text .b { font-size:11.5px; color:var(--text-tertiary); margin-top:1px; line-height:1.45; max-width:60ch; }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px; border-radius:var(--radius-md); font-size:12.5px; font-weight:500; border:1px solid var(--border-default); background:transparent; color:var(--text-body); white-space:nowrap; transition:all var(--d-fast); }
.btn:hover { border-color:var(--border-strong); color:var(--text-strong); background:var(--bg-hover); }
.btn.primary { background:var(--accent-500); color:#fff; border-color:var(--accent-500); }
.btn.primary:hover { background:var(--accent-600); border-color:var(--accent-600); color:#fff; }
.btn:disabled, .btn.is-disabled { opacity:0.45; cursor:not-allowed; pointer-events:none; }
.btn.danger { color:var(--color-danger-500); border-color:color-mix(in oklab,var(--color-danger-500) 40%,transparent); }
.btn.danger:hover { background:var(--danger-bg-hover); border-color:var(--color-danger-500); color:var(--color-danger-500); }
.btn.danger.solid { background:var(--color-danger-500); color:#fff; border-color:var(--color-danger-500); }
.btn.danger.solid:hover { background:var(--danger-600); color:#fff; }
.btn.sm { height:28px; padding:0 10px; font-size:12px; }
.btn.ghost { border-color:transparent; }
.btn.ghost:hover { border-color:transparent; background:var(--bg-hover); }
.btn svg { width:14px; height:14px; }
.iconbtn { width:28px; height:28px; border-radius:var(--radius-sm); display:grid; place-items:center; color:var(--text-tertiary); transition:all var(--d-fast); }
.iconbtn:hover { background:var(--bg-active); color:var(--text-strong); }

/* TABLE */
.dt-wrap { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; }
.dt-wrap.scroll-x { overflow-x:auto; }
table.dt { width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-body); }
.dt thead th { text-align:start; padding:8px 12px; background:var(--bg-elevated); color:var(--text-tertiary); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; border-bottom:1px solid var(--border-subtle); white-space:nowrap; }
.dt thead th.num { text-align:end; }
.dt tbody td { padding:var(--row-py) 12px; height:var(--row-h); border-bottom:1px solid var(--border-subtle); color:var(--text-body); vertical-align:middle; }
.dt tbody tr:last-child td { border-bottom:none; }
.dt tbody tr.clickable { cursor:pointer; transition:background var(--d-fast); }
.dt tbody tr.clickable:hover { background:var(--bg-hover); }
.dt tbody tr.is-selected { background:var(--bg-row-sel); }
.dt tbody td.num { text-align:end; font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--text-strong); }
.dt tbody td.mono { font-family:var(--font-mono); font-size:var(--fs-mono); color:var(--text-strong); }
.dt tbody td.strong { font-weight:500; color:var(--text-strong); }
.dt tbody td:has(.av) { white-space:nowrap; }
.dt tbody td .av { vertical-align:middle; }
.dt-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:8px 14px; background:var(--bg-elevated); border-top:1px solid var(--border-subtle); font-size:12px; color:var(--text-tertiary); }
.dt-foot .count { font-family:var(--font-mono); }
.dt-foot .count strong { color:var(--text-strong); font-weight:500; }
.dt-foot .ctrls { display:flex; align-items:center; gap:4px; }
.dt-foot .ctrls button { display:inline-flex; align-items:center; height:24px; padding:0 8px; gap:4px; border-radius:var(--radius-sm); color:var(--text-muted); border:1px solid transparent; transition:all var(--d-fast); }
.dt-foot .ctrls button:hover { background:var(--bg-hover); color:var(--text-strong); }
.cellflex { display:flex; align-items:center; gap:8px; min-width:0; }
.cellflex .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-actions { display:flex; gap:2px; justify-content:flex-end; opacity:0.55; transition:opacity var(--d-fast); }
.dt tbody tr:hover .row-actions { opacity:1; }
.row-actions button { width:22px; height:22px; border-radius:var(--radius-sm); display:grid; place-items:center; color:var(--text-tertiary); transition:all var(--d-fast); }
.row-actions button:hover { background:var(--bg-active); color:var(--text-strong); }

/* PILL / TAG / AVATAR / CHECKBOX */
.pill { display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px; border-radius:var(--radius-pill); font-size:var(--fs-chip); font-weight:500; white-space:nowrap; }
.pill::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.pill.neutral { background:var(--bg-sunken); color:var(--text-tertiary); }
.pill.info, .pill.sent { background:var(--color-info-100); color:var(--color-info-500); }
.pill.warn, .pill.pending { background:var(--color-warning-100); color:var(--color-warning-500); }
.pill.ok, .pill.active, .pill.verified, .pill.delivered { background:var(--color-success-100); color:var(--color-success-500); }
.pill.danger, .pill.failed, .pill.bounced { background:var(--color-danger-100); color:var(--color-danger-500); }
.pill.accent { background:var(--accent-100); color:var(--accent-text-on); }
.pill.nodot::before { display:none; }
.tag { display:inline-flex; align-items:center; padding:1px 7px; border-radius:var(--radius-sm); font-size:10.5px; color:var(--text-tertiary); border:1px solid var(--border-subtle); white-space:nowrap; }
.tag.mono { font-family:var(--font-mono); color:var(--accent-text-on); }
.av { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--accent-500); color:#fff; font-size:9.5px; font-weight:600; flex-shrink:0; }
.av.c2 { background:#10b981; } .av.c3 { background:#f59e0b; } .av.c4 { background:#ef4444; } .av.c5 { background:#a855f7; } .av.c6 { background:#06b6d4; } .av.c7 { background:#ec4899; }
.av.sm { width:20px; height:20px; font-size:8.5px; }
.cb { position:relative; display:inline-grid; place-items:center; width:16px; height:16px; border:1.5px solid var(--border-strong); border-radius:3px; background:var(--bg-surface); cursor:pointer; transition:all var(--d-fast); flex-shrink:0; }
.cb svg { width:11px; height:11px; color:#fff; opacity:0; stroke-width:3; }
.cb:hover { border-color:var(--accent-500); }
.cb.on { background:var(--accent-500); border-color:var(--accent-500); }
.cb.on svg { opacity:1; }

/* FILTER BAR / SEGMENTS / SEARCH / CHIP */
.toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.segments { display:flex; gap:5px; flex-wrap:wrap; }
.segment { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:99px; font-size:12px; font-weight:500; color:var(--text-muted); background:transparent; border:1px solid var(--border-subtle); transition:all var(--d-fast); }
.segment:hover { color:var(--text-strong); }
.segment.is-active { background:var(--bg-elevated); color:var(--text-strong); border-color:var(--border-default); }
.segment .ct { font-size:10px; padding:0 5px; background:var(--bg-sunken); color:var(--text-tertiary); border-radius:99px; font-family:var(--font-mono); }
.segment.is-active .ct { background:var(--accent-500); color:#fff; }
.spacer { flex:1; }
.chip { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 10px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); font-size:12px; color:var(--text-muted); transition:all var(--d-fast); }
.chip:hover { color:var(--text-strong); border-color:var(--border-default); }
.search { display:flex; align-items:center; gap:7px; height:28px; padding:0 10px; width:220px; background:var(--bg-app); border:1px solid var(--border-subtle); border-radius:var(--radius-md); color:var(--text-tertiary); }
.search input { flex:1; background:transparent; border:none; outline:none; color:var(--text-strong); font-size:12px; min-width:0; }
.search svg { width:13px; height:13px; }

/* KPI STRIP */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1px; background:var(--border-subtle); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:16px; }
.kpi { background:var(--bg-surface); padding:13px 15px; }
.kpi .v { font-size:21px; font-weight:600; color:var(--text-strong); font-family:var(--font-mono); letter-spacing:-0.02em; line-height:1; }
.kpi .v.ok { color:var(--color-success-500); } .kpi .v.warn { color:var(--color-warning-500); } .kpi .v.danger { color:var(--color-danger-500); }
.kpi .k { font-size:11px; color:var(--text-tertiary); margin-top:6px; }

/* TABS */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--border-subtle); margin-bottom:18px; }
.tab { height:34px; padding:0 14px; font-size:12.5px; font-weight:500; color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-1px; transition:all var(--d-fast); display:inline-flex; align-items:center; gap:7px; }
.tab:hover { color:var(--text-strong); }
.tab.is-active { color:var(--accent-text-on); border-bottom-color:var(--accent-500); }
.tab .ct { font-size:10px; padding:0 5px; background:var(--bg-sunken); color:var(--text-tertiary); border-radius:99px; font-family:var(--font-mono); }

/* MASTER-DETAIL */
.masterdetail { display:grid; grid-template-columns:260px 1fr; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; min-height:420px; }
.md-list { border-inline-end:1px solid var(--border-subtle); background:var(--bg-app); overflow-y:auto; }
.md-list-head { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border-subtle); }
.md-list-head .t { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-tertiary); }
.md-item { display:block; width:100%; text-align:start; padding:11px 13px; border-bottom:1px solid var(--border-subtle); transition:background var(--d-fast); }
.md-item:hover { background:var(--bg-hover); }
.md-item.is-active { background:var(--bg-row-sel); box-shadow:inset 2px 0 0 var(--accent-500); }
.md-item .nm { font-size:12.5px; font-weight:500; color:var(--text-strong); display:flex; align-items:center; gap:7px; }
.md-item .sub { font-size:11px; color:var(--text-tertiary); margin-top:3px; }
.md-detail { overflow-y:auto; padding:20px 22px; }

/* SPLIT PANE (branding) */
.splitpane { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.preview-pane { position:sticky; top:0; background:var(--bg-app); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:18px; }
.preview-pane .pp-label { font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-tertiary); margin-bottom:12px; }
.preview-shell { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; }
.preview-shell .pp-top { display:flex; align-items:center; gap:8px; padding:9px 11px; border-bottom:1px solid var(--border-subtle); }
.preview-shell .pp-mark { width:22px; height:22px; border-radius:var(--radius-sm); display:grid; place-items:center; color:#fff; font-size:10px; font-weight:700; font-family:var(--font-mono); }
.preview-shell .pp-body { padding:14px; display:flex; flex-direction:column; gap:11px; }
.swatch-row { display:flex; gap:8px; }
.swatch { width:30px; height:30px; border-radius:var(--radius-sm); border:1px solid var(--border-subtle); cursor:pointer; transition:transform var(--d-fast); position:relative; }
.swatch:hover { transform:scale(1.08); }
.swatch.is-active::after { content:''; position:absolute; inset:-3px; border:2px solid var(--accent-500); border-radius:var(--radius-md); }
.contrast-gate { display:flex; align-items:center; gap:9px; padding:10px 13px; border-radius:var(--radius-md); font-size:12px; margin-top:6px; }
.contrast-gate.pass { background:var(--color-success-100); color:var(--color-success-500); }
.contrast-gate.fail { background:var(--color-danger-100); color:var(--color-danger-500); }

/* MATRIX (roles / notifications) */
.matrix-wrap { border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:auto; }
table.matrix { width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; }
.matrix th { padding:9px 12px; background:var(--bg-elevated); color:var(--text-tertiary); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; text-align:center; border-bottom:1px solid var(--border-subtle); white-space:nowrap; }
.matrix th.rowhead, .matrix td.rowhead { text-align:start; position:sticky; inset-inline-start:0; background:var(--bg-surface); z-index:1; min-width:200px; }
.matrix th.rowhead { background:var(--bg-elevated); z-index:2; }
.matrix td { padding:8px 12px; border-bottom:1px solid var(--border-subtle); text-align:center; color:var(--text-body); }
.matrix tbody tr:last-child td { border-bottom:none; }
.matrix .grp-row td { background:var(--bg-app); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-tertiary); text-align:start; }
.matrix .rowhead .nm { font-weight:500; color:var(--text-strong); }
.matrix .rowhead .ds { font-size:11px; color:var(--text-tertiary); margin-top:1px; }

/* WIZARD (bulk import) */
.wizard-steps { display:flex; gap:0; margin-bottom:22px; }
.wstep { flex:1; display:flex; flex-direction:column; gap:7px; position:relative; padding-top:4px; }
.wstep .dot { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:600; background:var(--bg-elevated); color:var(--text-tertiary); border:1px solid var(--border-default); z-index:1; }
.wstep.done .dot { background:var(--color-success-500); color:#fff; border-color:var(--color-success-500); }
.wstep.active .dot { background:var(--accent-500); color:#fff; border-color:var(--accent-500); }
.wstep .lb { font-size:11px; color:var(--text-tertiary); }
.wstep.active .lb { color:var(--text-strong); font-weight:500; }
.wstep::before { content:''; position:absolute; top:15px; inset-inline-start:50%; width:100%; height:1px; background:var(--border-default); z-index:0; }
.wstep:last-child::before { display:none; }
.wstep.done::before { background:var(--color-success-500); }

/* radio-card group */
.radio-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.radio-card { display:flex; flex-direction:column; gap:3px; padding:13px 14px; border:1px solid var(--border-default); border-radius:var(--radius-md); text-align:start; transition:all var(--d-fast); }
.radio-card:hover { border-color:var(--border-strong); background:var(--bg-hover); }
.radio-card.is-active { border-color:var(--accent-500); background:var(--accent-100); }
.radio-card .rc-t { font-size:12.5px; font-weight:600; color:var(--text-strong); display:flex; align-items:center; gap:7px; }
.radio-card .rc-b { font-size:11px; color:var(--text-tertiary); line-height:1.4; }

/* repeating kv rows */
.kvrows { display:flex; flex-direction:column; gap:8px; }
.kvrow { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:center; }
.kvrow input { min-height:32px !important; }

/* info card / banner */
.notice { display:flex; gap:12px; padding:13px 15px; border-radius:var(--radius-md); border:1px solid var(--border-subtle); background:var(--bg-app); margin-bottom:16px; }
.notice .ni { width:30px; height:30px; border-radius:var(--radius-sm); display:grid; place-items:center; flex-shrink:0; }
.notice .ni.accent { background:var(--accent-100); color:var(--accent-text-on); }
.notice .ni.warn { background:var(--color-warning-100); color:var(--color-warning-500); }
.notice .nb { font-size:12px; color:var(--text-body); line-height:1.55; }
.notice .nb strong { color:var(--text-strong); }
.notice .nb .ttl { font-weight:600; color:var(--text-strong); display:block; margin-bottom:2px; font-size:12.5px; }

/* secret display */
.secret-box { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg-sunken); border:1px solid var(--border-default); border-radius:var(--radius-md); }
.secret-box .sv { flex:1; font-family:var(--font-mono); font-size:12px; color:var(--text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* status-step list (DNS / SPF) */
.steplist { display:flex; flex-direction:column; gap:0; border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; }
.stepitem { display:flex; align-items:flex-start; gap:11px; padding:12px 14px; border-bottom:1px solid var(--border-subtle); }
.stepitem:last-child { border-bottom:none; }
.stepitem .sc { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; margin-top:1px; }
.stepitem .sc.ok { background:var(--color-success-100); color:var(--color-success-500); }
.stepitem .sc.wait { background:var(--color-warning-100); color:var(--color-warning-500); }
.stepitem .sc.todo { background:var(--bg-elevated); color:var(--text-tertiary); }
.stepitem .stx { flex:1; min-width:0; }
.stepitem .stx .h { font-size:12.5px; font-weight:500; color:var(--text-strong); }
.stepitem .stx .b { font-size:11.5px; color:var(--text-tertiary); margin-top:2px; line-height:1.45; }
.dns-rec { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin-top:8px; padding:9px 11px; background:var(--bg-app); border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:11px; }
.dns-rec .rk { color:var(--text-tertiary); } .dns-rec .rv { color:var(--text-strong); overflow-wrap:anywhere; }

/* ============================== ERP-CLASS COMPONENTS (v1.3) ============================== */
/* TREE VIEW — entity hierarchy, sub-entities, dimension values */
.tree { display:flex; flex-direction:column; }
.tnode-row { display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px; border-radius:var(--radius-sm); text-align:start; transition:background var(--d-fast); cursor:pointer; position:relative; }
.tnode-row:hover { background:var(--bg-hover); }
.tnode-row.is-active { background:var(--bg-row-sel); box-shadow:inset 2px 0 0 var(--accent-500); }
.tnode-tog { width:18px; height:18px; flex-shrink:0; display:grid; place-items:center; color:var(--text-tertiary); border-radius:4px; }
.tnode-tog:hover { background:var(--bg-elevated); color:var(--text-strong); }
.tnode-tog svg { width:12px; height:12px; transition:transform var(--d-fast); }
.tnode-row.collapsed .tnode-tog svg { transform:rotate(-90deg); }
[dir="rtl"] .tnode-row.collapsed .tnode-tog svg { transform:rotate(90deg); }
.tnode-tog.leaf { visibility:hidden; }
.tnode-ico { width:22px; height:22px; border-radius:var(--radius-sm); display:grid; place-items:center; flex-shrink:0; font-size:9px; font-weight:700; font-family:var(--font-mono); }
.tnode-ico.grp { background:var(--accent-100); color:var(--accent-text-on); }
.tnode-ico.leaf2 { background:var(--bg-elevated); color:var(--text-tertiary); }
.tnode-ico svg { width:13px; height:13px; }
.tnode-main { flex:1; min-width:0; display:flex; align-items:center; gap:8px; }
.tnode-name { font-size:12.5px; font-weight:500; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tnode-sub { font-size:11px; color:var(--text-tertiary); }
.tnode-acts { display:flex; align-items:center; gap:2px; opacity:0; transition:opacity var(--d-fast); }
.tnode-row:hover .tnode-acts { opacity:1; }
.tnode-acts button { width:24px; height:24px; border-radius:4px; display:grid; place-items:center; color:var(--text-tertiary); }
.tnode-acts button:hover { background:var(--bg-elevated); color:var(--text-strong); }
.tnode-acts svg { width:13px; height:13px; }
.tnode-grip { color:var(--text-tertiary); opacity:0; cursor:grab; }
.tnode-row:hover .tnode-grip { opacity:.5; }
.tnode-children.collapsed { display:none; }

/* RULE BUILDER — approval matrices / workflow rules */
.rule-list { display:flex; flex-direction:column; gap:10px; }
.rule-card { border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--bg-app); overflow:hidden; }
.rule-card.paused { opacity:.62; }
.rule-head { display:flex; align-items:center; gap:11px; padding:11px 13px; border-bottom:1px solid var(--border-subtle); }
.rule-grip { color:var(--text-tertiary); cursor:grab; display:grid; place-items:center; }
.rule-grip svg { width:15px; height:15px; }
.rule-prio { width:24px; height:24px; border-radius:var(--radius-sm); background:var(--bg-elevated); color:var(--text-muted); display:grid; place-items:center; font-size:11px; font-weight:700; font-family:var(--font-mono); flex-shrink:0; }
.rule-title { flex:1; min-width:0; }
.rule-title .rt { font-size:12.5px; font-weight:600; color:var(--text-strong); }
.rule-title .rs { font-size:11px; color:var(--text-tertiary); margin-top:1px; }
.rule-body { padding:13px; display:flex; flex-direction:column; gap:12px; }
.cond-chip-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.cond-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:var(--radius-sm); background:var(--bg-surface); border:1px solid var(--border-default); font-size:11.5px; color:var(--text-body); }
.cond-chip .ck { color:var(--text-tertiary); font-family:var(--font-mono); font-size:11px; }
.cond-chip .cop { color:var(--accent-text-on); font-weight:600; font-size:10.5px; text-transform:uppercase; }
.cond-chip .cv { color:var(--text-strong); font-weight:500; }
.cond-and { font-size:10px; font-weight:700; letter-spacing:.05em; color:var(--text-tertiary); text-transform:uppercase; padding:0 2px; }
.cond-add { padding:5px 9px; border-radius:var(--radius-sm); border:1px dashed var(--border-strong); font-size:11.5px; color:var(--text-muted); display:inline-flex; align-items:center; gap:5px; }
.cond-add:hover { color:var(--accent-text-on); border-color:var(--accent-500); }
.resolver-box { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--radius-md); background:var(--bg-surface); border:1px solid var(--border-subtle); }
.resolver-box .ri { width:28px; height:28px; border-radius:var(--radius-sm); background:var(--accent-100); color:var(--accent-text-on); display:grid; place-items:center; flex-shrink:0; }
.resolver-box .rx { flex:1; min-width:0; }
.resolver-box .rx .h { font-size:12px; font-weight:600; color:var(--text-strong); }
.resolver-box .rx .b { font-size:11px; color:var(--text-tertiary); margin-top:1px; }
.rule-meta { display:flex; flex-wrap:wrap; gap:14px; font-size:11.5px; color:var(--text-muted); }
.rule-meta .rm-k { color:var(--text-tertiary); }
.jsonata-view { font-family:var(--font-mono); font-size:11.5px; line-height:1.6; color:var(--text-body); background:var(--bg-sunken); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:13px 15px; white-space:pre-wrap; overflow-wrap:anywhere; }
.jsonata-view .jk { color:var(--accent-text-on); }

/* STATE MACHINE — workflow lifecycle */
.sm-canvas { border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--bg-app); background-image:radial-gradient(var(--border-subtle) 1px, transparent 1px); background-size:18px 18px; padding:26px 22px; overflow-x:auto; }
.sm-flow { display:flex; align-items:center; gap:0; min-width:min-content; }
.sm-node { flex-shrink:0; min-width:118px; border-radius:var(--radius-md); background:var(--bg-surface); border:1.5px solid var(--border-strong); padding:11px 13px; position:relative; box-shadow:var(--shadow-sm); }
.sm-node .sm-dot { width:9px; height:9px; border-radius:50%; position:absolute; top:11px; inset-inline-end:11px; }
.sm-node .sm-name { font-size:12.5px; font-weight:600; color:var(--text-strong); }
.sm-node .sm-flag { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-top:5px; display:inline-flex; align-items:center; gap:4px; }
.sm-node.initial { border-color:var(--color-success-500); }
.sm-node.initial .sm-flag { color:var(--color-success-500); }
.sm-node.terminal { border-color:var(--text-tertiary); }
.sm-node.terminal .sm-flag { color:var(--text-tertiary); }
.sm-node.ai { border-color:transparent; background:var(--ai-grad); }
.sm-node.ai .sm-name, .sm-node.ai .sm-flag { color:#fff; }
.sm-arrow { flex-shrink:0; width:38px; display:flex; align-items:center; justify-content:center; color:var(--text-tertiary); position:relative; }
.sm-arrow svg { width:38px; height:14px; }
.sm-arrow .sm-guard { position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:9.5px; font-family:var(--font-mono); color:var(--accent-text-on); white-space:nowrap; }
[dir="rtl"] .sm-arrow svg { transform:scaleX(-1); }
.sm-legend { display:flex; gap:16px; margin-top:14px; font-size:11px; color:var(--text-tertiary); }
.sm-legend span { display:inline-flex; align-items:center; gap:6px; }
.sm-legend .ld { width:9px; height:9px; border-radius:50%; }

/* SENSITIVE FIELD — masked value indicator */
.masked-val { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; }
.masked-val .dots { letter-spacing:1px; color:var(--text-tertiary); }
.masked-val .reveal { width:22px; height:22px; border-radius:4px; display:grid; place-items:center; color:var(--text-tertiary); flex-shrink:0; }
.masked-val .reveal:hover { background:var(--bg-elevated); color:var(--accent-text-on); }
.masked-val .reveal svg { width:13px; height:13px; }
.masked-val.locked .lockic { color:var(--text-tertiary); }
.masked-val.revealed .val { color:var(--text-strong); }
.sens-badge { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; padding:2px 6px; border-radius:var(--radius-sm); background:var(--color-warning-100); color:var(--color-warning-500); }
.sens-badge svg { width:11px; height:11px; }

/* SECTION SUB-HEADING inside a panel */
.subsec { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-tertiary); margin:6px 0 10px; display:flex; align-items:center; gap:8px; }
.subsec::after { content:''; flex:1; height:1px; background:var(--border-subtle); }

/* ============================== PHASE 4 — WORKSPACE FIELD-SPEC PANELS ============================== */
/* section header (card title + sub + right action) */
.psec { margin-bottom:26px; }
.psec:last-child { margin-bottom:0; }
.psec-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:12px; }
.psec-head .sx { flex:1; min-width:0; }
.psec-head .h { font-size:13.5px; font-weight:600; color:var(--text-strong); display:flex; align-items:center; gap:8px; }
.psec-head .h .sec-ic { width:24px; height:24px; border-radius:var(--radius-sm); background:var(--bg-elevated); color:var(--text-tertiary); display:grid; place-items:center; flex-shrink:0; }
.psec-head .h .sec-ic svg { width:14px; height:14px; }
.psec-head .s { font-size:12px; color:var(--text-tertiary); margin-top:3px; line-height:1.5; max-width:72ch; }
.psec-head .a { flex-shrink:0; }

/* compact in-cell segmented */
.segctl.xs { padding:2px; gap:2px; }
.segctl.xs button { height:22px; padding:0 7px; font-size:10.5px; }
.dt td .segctl { width:fit-content; }
.dt-wrap.scroll-x table.dt { min-width:880px; }
.dt td .select { min-height:26px; padding:3px 8px; font-size:11.5px; }

/* locale/currency preview block (drawer) */
.lcp { background:var(--bg-app); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:14px 15px; display:flex; flex-direction:column; gap:11px; }
.lcp .lcp-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.lcp .lcp-k { font-size:11px; color:var(--text-tertiary); }
.lcp .lcp-v { font-size:13px; color:var(--text-strong); font-weight:500; }
.lcp .lcp-v.big { font-size:18px; font-family:var(--font-mono); letter-spacing:-0.01em; }
.wk-strip { display:flex; gap:4px; }
.wk-strip span { width:26px; height:26px; border-radius:var(--radius-sm); display:grid; place-items:center; font-size:10.5px; background:var(--bg-elevated); color:var(--text-muted); }
.wk-strip span.wk-first { background:var(--accent-100); color:var(--accent-text-on); font-weight:600; }

/* empty state */
.empty-state { border:1px dashed var(--border-strong); border-radius:var(--radius-lg); padding:36px 28px; text-align:center; }
.empty-state .es-ic { width:46px; height:46px; border-radius:12px; background:var(--bg-elevated); color:var(--text-tertiary); display:grid; place-items:center; margin:0 auto 14px; }
.empty-state .es-t { font-size:14px; font-weight:600; color:var(--text-strong); }
.empty-state .es-b { font-size:12.5px; color:var(--text-tertiary); max-width:48ch; margin:5px auto 16px; line-height:1.55; }

/* direction badge */
.dir-badge { font-size:9.5px; font-weight:700; letter-spacing:.04em; padding:2px 6px; border-radius:var(--radius-sm); background:var(--bg-elevated); color:var(--text-tertiary); }

/* feature-toggle rows */
.ft-list { border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-surface); }
.ft-row { display:flex; align-items:flex-start; gap:13px; padding:13px 15px; border-top:1px solid var(--border-subtle); }
.ft-row:first-child { border-top:none; }
.ft-row .switch { margin-top:1px; }
.ft-row .ft-x { flex:1; min-width:0; }
.ft-row .ft-t { font-size:12.5px; font-weight:500; color:var(--text-strong); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.ft-row .ft-d { font-size:11.5px; color:var(--text-tertiary); margin-top:2px; line-height:1.45; max-width:74ch; }
.ft-row .ft-perm { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-tertiary); white-space:nowrap; flex-shrink:0; margin-top:2px; }
.ft-row .ft-sub { font-size:11.5px; color:var(--accent-text-on); margin-top:8px; padding:8px 11px; background:var(--accent-100); border-radius:var(--radius-sm); line-height:1.45; }
.ft-section.is-disabled .ft-list { opacity:.5; pointer-events:none; }
.ft-cap { font-size:11.5px; color:var(--color-warning-500); display:flex; align-items:center; gap:6px; margin-bottom:9px; }
.ft-cap svg { width:13px; height:13px; }
.beta-pill { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 6px; border-radius:var(--radius-pill); background:var(--accent-100); color:var(--accent-text-on); }
.switch.locked { opacity:.45; pointer-events:none; }
.ft-cant { cursor:not-allowed; }
.ft-num input { width:130px; }
.cost-hint { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:600; color:var(--color-warning-500); }

/* notice danger tone */
.notice.danger { border-color:color-mix(in oklab,var(--color-danger-500) 30%,transparent); background:var(--color-danger-100); }
.notice .ni.danger { background:color-mix(in oklab,var(--color-danger-500) 18%,transparent); color:var(--color-danger-500); }

/* ===== DANGER ZONE PANEL ===== */
.dz-banner { display:flex; gap:13px; align-items:flex-start; padding:15px 17px; border-radius:var(--radius-md); border:1px solid color-mix(in oklab,var(--color-warning-500) 40%,transparent); background:var(--color-warning-100); margin-bottom:24px; }
.dz-banner .dzb-ic { width:34px; height:34px; border-radius:var(--radius-sm); background:color-mix(in oklab,var(--color-warning-500) 22%,transparent); color:var(--color-warning-500); display:grid; place-items:center; flex-shrink:0; }
.dz-banner .dzb-t { font-size:13px; font-weight:600; color:var(--text-strong); }
.dz-banner .dzb-b { font-size:12px; color:var(--text-body); margin-top:2px; line-height:1.5; }
.dzsec { border:1px solid color-mix(in oklab,var(--color-danger-500) 28%,transparent); border-radius:var(--radius-md); margin-bottom:18px; overflow:hidden; }
.dzsec-head { padding:11px 15px; background:var(--color-danger-100); display:flex; align-items:center; gap:8px; }
.dzsec-head svg { width:15px; height:15px; color:var(--color-danger-500); }
.dzsec-head .t { font-size:12.5px; font-weight:600; color:var(--color-danger-500); }
.dzsub { display:flex; align-items:center; gap:14px; padding:14px 15px; border-top:1px solid var(--border-subtle); }
.dzsub.col { flex-direction:column; align-items:stretch; gap:10px; }
.dzsub:first-of-type { border-top:none; }
.dzsub .dzx { flex:1; min-width:0; }
.dzsub .dzh { font-size:12.5px; font-weight:500; color:var(--text-strong); }
.dzsub .dzb { font-size:11.5px; color:var(--text-tertiary); margin-top:2px; line-height:1.5; max-width:66ch; }
.dzsub .dza { flex-shrink:0; display:flex; gap:8px; align-items:center; }
.softlock-tip { font-size:11px; color:var(--color-warning-500); display:flex; align-items:center; gap:6px; margin-top:6px; }
.softlock-tip svg { width:13px; height:13px; flex-shrink:0; }

/* state banners (transfer pending, archived, delete scheduled) */
.state-banner { display:flex; gap:11px; align-items:flex-start; padding:12px 14px; border-radius:var(--radius-md); margin-bottom:16px; font-size:12px; line-height:1.5; }
.state-banner .sbic { flex-shrink:0; margin-top:1px; }
.state-banner .sbic svg { width:16px; height:16px; }
.state-banner.warn { background:var(--color-warning-100); border:1px solid color-mix(in oklab,var(--color-warning-500) 32%,transparent); }
.state-banner.warn .sbic { color:var(--color-warning-500); }
.state-banner.danger { background:var(--color-danger-100); border:1px solid color-mix(in oklab,var(--color-danger-500) 38%,transparent); }
.state-banner.danger .sbic { color:var(--color-danger-500); }
.state-banner.ok { background:var(--color-success-100); border:1px solid color-mix(in oklab,var(--color-success-500) 30%,transparent); }
.state-banner.ok .sbic { color:var(--color-success-500); }
.state-banner .sbx { flex:1; }
.state-banner strong { color:var(--text-strong); }

/* owner-only access block */
.owner-block { text-align:center; padding:54px 28px; }
.owner-block .ob-ic { width:54px; height:54px; border-radius:14px; background:var(--color-warning-100); color:var(--color-warning-500); display:grid; place-items:center; margin:0 auto 16px; }
.owner-block .ob-t { font-size:16px; font-weight:600; color:var(--text-strong); }
.owner-block .ob-b { font-size:13px; color:var(--text-tertiary); max-width:48ch; margin:7px auto 18px; line-height:1.55; }

/* type-to-confirm */
.ttc-name { font-family:var(--font-mono); font-weight:600; color:var(--color-danger-500); }
.reauth-box { display:flex; flex-direction:column; gap:7px; padding:12px 13px; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--bg-app); margin-top:4px; }
.reauth-box .rb-l { font-size:11px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.04em; display:flex; align-items:center; gap:6px; }
.reauth-box .rb-l svg { width:13px; height:13px; }
.del-check { display:flex; align-items:flex-start; gap:9px; padding:9px 0; }
.del-check .cb { margin-top:1px; }
.del-check .dc-t { font-size:12px; color:var(--text-body); line-height:1.4; }

/* ============================== PHASE 5 — HYBRID SCOPE CHIP + RESOLUTION CHAIN ============================== */
/* chip: sits next to the scope badge in the panel header */
.scope-chip { display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 9px 0 8px; border-radius:var(--radius-pill); background:var(--bg-elevated); border:1px solid var(--border-subtle); font-size:11px; font-weight:500; color:var(--text-muted); transition:all var(--d-fast); white-space:nowrap; cursor:pointer; }
.scope-chip:hover { border-color:var(--border-default); color:var(--text-strong); background:var(--bg-hover); }
.scope-chip.is-on { border-color:var(--accent-500); color:var(--accent-text-on); background:var(--accent-100); }
.scope-chip .dots { display:inline-flex; align-items:center; gap:3px; }
.scope-chip .dots i { width:7px; height:7px; border-radius:50%; background:transparent; border:1.5px solid var(--text-tertiary); box-sizing:border-box; transition:all var(--d-fast); }
.scope-chip .dots i.fill { background:var(--accent-500); border-color:var(--accent-500); }
.scope-chip .dots i.deep { background:var(--accent-500); border-color:var(--accent-500); box-shadow:0 0 0 2px var(--accent-100); }
.scope-chip .lvl { color:var(--text-strong); font-weight:600; }
.scope-chip svg { width:12px; height:12px; color:var(--text-tertiary); }

/* resolution-chain popover */
.chain-pop { position:fixed; width:380px; max-width:94vw; background:var(--bg-elevated); border:1px solid var(--border-default); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); z-index:70; opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity var(--d-fast),transform var(--d-fast); overflow:hidden; }
.chain-pop.show { opacity:1; pointer-events:auto; transform:translateY(0); }
.chain-head { padding:12px 15px 10px; border-bottom:1px solid var(--border-subtle); }
.chain-head .t { font-size:12.5px; font-weight:600; color:var(--text-strong); }
.chain-head .s { font-size:11px; color:var(--text-tertiary); margin-top:2px; line-height:1.45; }
.chain-rows { padding:6px; }
.chain-row { display:grid; grid-template-columns:22px 1fr auto; gap:10px; align-items:start; padding:9px 9px; border-radius:var(--radius-sm); position:relative; }
.chain-row + .chain-row::before { content:''; position:absolute; inset-inline-start:19px; top:-6px; height:12px; width:1.5px; background:var(--border-default); }
.chain-row .cdot { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; margin-top:1px; }
.chain-row .cdot svg { width:13px; height:13px; }
.chain-row.active .cdot { background:var(--accent-100); color:var(--accent-text-on); }
.chain-row.active-deep .cdot { background:var(--accent-500); color:#fff; }
.chain-row.inherits .cdot { background:var(--bg-sunken); color:var(--text-tertiary); }
.chain-row .clvl { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-tertiary); }
.chain-row .cval { font-size:12.5px; font-weight:500; color:var(--text-strong); margin-top:1px; line-height:1.4; }
.chain-row.inherits .cval { color:var(--text-muted); font-weight:400; }
.chain-row .cval .mono { font-family:var(--font-mono); font-size:11.5px; }
.chain-row .csrc { font-size:10.5px; color:var(--text-tertiary); text-align:end; white-space:nowrap; padding-top:2px; }
.chain-row .csrc.ovr { color:var(--accent-text-on); }
.chain-foot { padding:11px 15px; border-top:1px solid var(--border-subtle); background:var(--bg-app); display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.chain-foot .ef-k { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-tertiary); font-weight:600; }
.chain-foot .ef-v { font-size:13px; font-weight:600; color:var(--text-strong); text-align:end; }
.chain-link { display:block; padding:9px 15px; border-top:1px solid var(--border-subtle); font-size:11.5px; color:var(--accent-text-on); text-align:start; width:100%; transition:background var(--d-fast); }
.chain-link:hover { background:var(--bg-hover); }

/* source pill tints (holiday set) */
.pill.src-preset { background:var(--color-info-100); color:var(--color-info-500); }
.pill.src-custom { background:var(--accent-100); color:var(--accent-text-on); }
.pill.src-override { background:var(--color-warning-100); color:var(--color-warning-500); }

/* override-mode tag (replace vs add) */
.mode-tag { display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px; border-radius:var(--radius-sm); font-size:10.5px; font-weight:600; white-space:nowrap; }
.mode-tag.replace { background:var(--color-warning-100); color:var(--color-warning-500); }
.mode-tag.add { background:var(--color-success-100); color:var(--color-success-500); }
.mode-tag svg { width:11px; height:11px; }

/* inherit chip vs concrete override badge (locations) */
.ovr-badge { display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px; border-radius:var(--radius-sm); font-size:10.5px; font-weight:500; white-space:nowrap; }
.ovr-badge.inherit { background:transparent; border:1px dashed var(--border-default); color:var(--text-tertiary); }
.ovr-badge.value { background:var(--accent-100); color:var(--accent-text-on); font-family:var(--font-mono); font-size:10.5px; }
.ovr-badge.count { background:var(--color-warning-100); color:var(--color-warning-500); }
.ovr-badge svg { width:11px; height:11px; }
.country-pill { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--text-body); }
.country-pill .flag { font-size:13px; line-height:1; }

/* working-hours: weekday chip row */
.wk-chips { display:flex; flex-wrap:wrap; gap:6px; }
.wk-chip { height:32px; min-width:54px; padding:0 13px; border-radius:var(--radius-pill); font-size:12px; font-weight:500; color:var(--text-muted); background:var(--bg-app); border:1px solid var(--border-default); transition:all var(--d-fast); }
.wk-chip:hover { border-color:var(--border-strong); color:var(--text-strong); }
.wk-chip.on { background:var(--accent-100); border-color:var(--accent-500); color:var(--accent-text-on); font-weight:600; }

/* time-range pair */
.timepair { display:inline-flex; align-items:center; gap:9px; }
.timepair .tinput { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 11px; background:var(--bg-app); border:1px solid var(--border-default); border-radius:var(--radius-md); transition:border-color var(--d-fast),box-shadow var(--d-fast); }
.timepair .tinput:focus-within { border-color:var(--accent-500); box-shadow:var(--focus-ring); }
.timepair .tinput svg { width:14px; height:14px; color:var(--text-tertiary); }
.timepair .tinput input { width:54px; background:transparent; border:none; outline:none; color:var(--text-strong); font-family:var(--font-mono); font-size:13px; text-align:center; }
.timepair .sep { color:var(--text-tertiary); font-size:13px; }

/* collapsible break section */
.collapse-sec { border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; }
.collapse-head { display:flex; align-items:center; gap:11px; padding:11px 13px; }
.collapse-body { padding:0 13px 13px; }

/* per-day custom half-day grid */
.day-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.day-card { border:1px solid var(--border-default); border-radius:var(--radius-md); padding:10px 8px; display:flex; flex-direction:column; gap:8px; align-items:center; background:var(--bg-app); }
.day-card.off { opacity:.55; background:var(--bg-sunken); }
.day-card .dc-day { font-size:11px; font-weight:600; color:var(--text-strong); }
.day-card .dc-toggle { font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:var(--radius-pill); }
.day-card .dc-toggle.work { background:var(--color-success-100); color:var(--color-success-500); }
.day-card .dc-toggle.half { background:var(--color-warning-100); color:var(--color-warning-500); }
.day-card .dc-toggle.rest { background:var(--bg-elevated); color:var(--text-tertiary); }
.day-card .dc-hrs { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); text-align:center; line-height:1.3; }
@media (max-width:760px) { .day-grid { grid-template-columns:repeat(4,1fr); } }

/* summary count card (personal overrides §4) */
.summary-card { display:flex; align-items:center; gap:14px; padding:15px 16px; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--bg-app); }
.summary-card .sc-ic { width:38px; height:38px; border-radius:var(--radius-md); background:var(--bg-elevated); color:var(--text-muted); display:grid; place-items:center; flex-shrink:0; }
.summary-card .sc-x { flex:1; min-width:0; }
.summary-card .sc-t { font-size:12.5px; color:var(--text-body); line-height:1.5; }
.summary-card .sc-t strong { color:var(--text-strong); font-weight:600; }
.summary-card .sc-a { flex-shrink:0; }

/* RTL: chain connector + popover anchoring handled inline; mirror chev */
[dir="rtl"] .scope-chip .dots { flex-direction:row-reverse; }

/* ============================== PHASE 6 — AUTH / DOCUMENTS / ORG ============================== */
/* multi-select (composed) */
.ms-box { display:flex; flex-wrap:wrap; align-items:center; gap:7px; min-height:38px; padding:6px 8px; background:var(--bg-app); border:1px solid var(--border-default); border-radius:var(--radius-md); }
.ms-tag { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 4px 0 10px; border-radius:var(--radius-pill); background:var(--accent-100); color:var(--accent-text-on); font-size:11.5px; font-weight:500; }
.ms-x { width:17px; height:17px; border-radius:50%; display:grid; place-items:center; color:var(--accent-text-on); opacity:.7; }
.ms-x:hover { opacity:1; background:rgba(0,0,0,0.12); }
.ms-x svg { width:11px; height:11px; }
.ms-add { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px; border-radius:var(--radius-pill); background:transparent; border:1px dashed var(--border-strong); color:var(--text-muted); font-size:11.5px; font-weight:500; transition:all var(--d-fast); }
.ms-add:hover { border-color:var(--accent-500); color:var(--accent-text-on); }
.ms-add svg { width:12px; height:12px; }

/* MFA method rows */
.method-list { display:flex; flex-direction:column; gap:8px; }
.method-row { display:flex; align-items:flex-start; gap:13px; padding:14px 15px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--bg-app); }
.method-row.is-dim { opacity:.62; }
.method-row .mr-ic { width:34px; height:34px; border-radius:var(--radius-sm); background:var(--bg-elevated); color:var(--text-muted); display:grid; place-items:center; flex-shrink:0; }
.method-row .mr-x { flex:1; min-width:0; }
.method-row .mr-t { font-size:13px; font-weight:600; color:var(--text-strong); display:flex; align-items:center; gap:9px; }
.method-row .mr-d { font-size:11.5px; color:var(--text-tertiary); line-height:1.5; margin-top:2px; }
.method-row .mr-ctl { flex-shrink:0; padding-top:2px; }
.method-row .mr-sub { display:flex; align-items:center; gap:9px; margin-top:9px; }
.method-row .mr-sub .lbl-inline { font-size:11px; color:var(--text-muted); }
.mini-input { width:48px; height:30px; text-align:center; background:var(--bg-elevated); border:1px solid var(--border-default); border-radius:var(--radius-sm); color:var(--text-strong); font-family:var(--font-mono); font-size:12px; }
.mr-hint { font-size:10.5px; color:var(--text-tertiary); }
.method-tag { display:inline-flex; align-items:center; height:18px; padding:0 7px; border-radius:var(--radius-sm); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.method-tag.ok { background:var(--color-success-100); color:var(--color-success-500); }
.method-tag.plan { background:var(--color-info-100); color:var(--color-info-500); }
.method-tag.addon { background:var(--bg-elevated); color:var(--text-tertiary); }
.switch.is-locked, .switch.is-disabled { cursor:not-allowed; opacity:.7; }
.switch.is-locked { opacity:1; }

/* SSO provider cards */
.prov-list { display:flex; flex-direction:column; gap:12px; }
.prov-card { border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; transition:border-color var(--d-fast); }
.prov-card.is-on { border-color:var(--border-default); }
.prov-card .pc-head { display:flex; align-items:center; gap:13px; padding:14px 16px; }
.prov-card.is-on .pc-head { border-bottom:1px solid var(--border-subtle); background:var(--bg-app); }
.prov-card .pc-logo { width:38px; height:38px; border-radius:var(--radius-md); background:var(--bg-elevated); color:var(--text-muted); display:grid; place-items:center; flex-shrink:0; }
.prov-card .pc-meta { flex:1; min-width:0; }
.prov-card .pc-name { font-size:13.5px; font-weight:600; color:var(--text-strong); display:flex; align-items:center; gap:9px; }
.prov-card .pc-sub { font-size:11px; color:var(--text-tertiary); margin-top:2px; }
.prov-card .pc-body { padding:16px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:720px){ .prov-card .pc-body { grid-template-columns:1fr; } }

/* link chips + scope display */
.link-chip { font-size:11.5px; color:var(--accent-text-on); padding:2px 8px; border-radius:var(--radius-pill); background:var(--accent-100); font-weight:500; }
.link-chip:hover { filter:brightness(1.08); }
.scope-grid, .scope-pick { display:flex; flex-direction:column; gap:7px; }
.scope-item { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--text-body); }
.scope-item svg { width:13px; height:13px; color:var(--color-success-500); }
.scope-pick { max-height:230px; overflow:auto; border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:8px; }
.scope-opt { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:var(--radius-sm); font-size:12px; color:var(--text-body); cursor:pointer; }
.scope-opt:hover { background:var(--bg-hover); }
.scope-opt.on { color:var(--text-strong); }

/* token / numbering sample */
.num-sample { display:inline-flex; align-items:center; padding:9px 13px; background:var(--bg-sunken); border:1px solid var(--border-default); border-radius:var(--radius-md); color:var(--text-strong); font-size:13px; }

/* doctype custom-field repeater (4-col) */
.kvrows.kvhead-4, .kvrow.kvrow-4 { display:grid; grid-template-columns:1.3fr 1fr 0.9fr 54px 32px; gap:8px; align-items:center; }
.kvrows.kvhead-4 { font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-tertiary); padding:0 2px 4px; }
.kvrow.kvrow-4 input { min-height:34px !important; }
.kv-del { width:32px; height:32px; border-radius:var(--radius-sm); display:grid; place-items:center; color:var(--text-tertiary); }
.kv-del:hover { background:var(--color-danger-100); color:var(--color-danger-500); }
.kv-del svg { width:14px; height:14px; }

/* legal-hold scope chips */
.hold-scope { display:flex; flex-wrap:wrap; gap:6px; }
.hs-chip { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:var(--radius-sm); font-size:11px; font-weight:500; background:var(--bg-elevated); color:var(--text-muted); }
.hs-chip svg { width:11px; height:11px; }
.hs-chip.hs-folder { background:var(--color-info-100); color:var(--color-info-500); }
.hs-chip.hs-type { background:var(--accent-100); color:var(--accent-text-on); }
.hs-chip.hs-count { background:var(--color-warning-100); color:var(--color-warning-500); font-family:var(--font-mono); }

/* org hierarchy */
.org-ctx { display:flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--bg-app); font-size:12.5px; color:var(--text-body); margin-bottom:16px; }
.org-ctx svg { width:15px; height:15px; color:var(--text-tertiary); }
.org-ctx strong { color:var(--text-strong); }
.org-ctx-hint { margin-inline-start:auto; font-size:11px; color:var(--text-tertiary); }
.segctl.org-mode { margin-inline-start:auto; }
.segctl.org-mode button { display:inline-flex; align-items:center; gap:6px; }
.segctl.org-mode button svg { width:13px; height:13px; }
.org-legend { display:flex; align-items:center; gap:8px; margin-top:10px; padding:9px 12px; border-radius:var(--radius-sm); background:var(--bg-app); font-size:11.5px; color:var(--text-tertiary); }
.org-legend svg { width:13px; height:13px; flex-shrink:0; }
.rl-head { margin-bottom:14px; }
.rl-pick { display:flex; align-items:center; gap:10px; }
.rl-pick .lbl-inline { font-size:11.5px; color:var(--text-muted); }
.rl-pick .select { min-width:200px; }
.rl-chain { display:flex; flex-direction:column; gap:2px; }
.rl-step { display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:var(--radius-sm); position:relative; }
.rl-step.is-self { background:var(--accent-100); }
.rl-conn { position:absolute; inset-inline-start:21px; top:-11px; color:var(--border-strong); }
.rl-conn svg { width:14px; height:14px; }
.rl-av { width:30px; height:30px; border-radius:50%; background:var(--bg-elevated); color:var(--text-muted); display:grid; place-items:center; font-size:11px; font-weight:600; flex-shrink:0; }
.rl-av.sm { width:22px; height:22px; font-size:9.5px; }
.rl-step.is-self .rl-av { background:var(--accent-500); color:#fff; }
.rl-nm { font-size:12.5px; font-weight:600; color:var(--text-strong); display:block; }
.rl-ti { font-size:11px; color:var(--text-tertiary); }
.rl-reports { display:flex; flex-wrap:wrap; gap:7px; }
.rl-rep { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px 0 5px; border-radius:var(--radius-pill); background:var(--bg-app); border:1px solid var(--border-default); font-size:11.5px; color:var(--text-body); }
.rl-person { display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--bg-app); }

/* ============================== PHASE 6 PART 2 — PLATFORM / COMPLIANCE / OBSERVABILITY / PERSONAL ============================== */
/* integration marketplace + logos */
.int-logo, .market-tile .mt-logo { display:grid; place-items:center; color:var(--text-muted); }
.int-logo { width:26px; height:26px; border-radius:var(--radius-sm); background:var(--bg-elevated); flex-shrink:0; }
.int-logo svg { width:15px; height:15px; }
.market-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.market-tile { border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:14px; display:flex; flex-direction:column; align-items:flex-start; gap:7px; background:var(--bg-app); transition:border-color var(--d-fast); }
.market-tile:hover { border-color:var(--border-default); }
.market-tile.is-planned { opacity:.66; }
.market-tile .mt-logo { width:36px; height:36px; border-radius:var(--radius-md); background:var(--bg-elevated); }
.market-tile .mt-logo svg { width:18px; height:18px; }
.market-tile .mt-nm { font-size:13px; font-weight:600; color:var(--text-strong); }
.market-tile .mt-meta { font-size:10.5px; color:var(--text-tertiary); }
.market-tile .mt-btn { margin-top:4px; }
.mt-badge { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px; border-radius:var(--radius-pill); font-size:11px; font-weight:600; margin-top:4px; }
.mt-badge.ok { background:var(--color-success-100); color:var(--color-success-500); }
.mt-badge.ok svg { width:12px; height:12px; }
.mt-badge.plan { background:var(--bg-elevated); color:var(--text-tertiary); }

/* filter bar (audit / retention) */
.filterbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; padding:13px 14px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--bg-app); margin-bottom:16px; }
.filterbar .fb-field { display:flex; flex-direction:column; gap:5px; min-width:130px; }
.filterbar .fb-field.grow { flex:1; min-width:160px; }
.filterbar .fb-field > label { font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-tertiary); }
.filterbar .select, .filterbar .ctl { min-height:34px; }

/* progress cell (access reviews) */
.prog-cell { display:flex; align-items:center; gap:8px; }
.prog-bar { width:64px; height:6px; border-radius:3px; background:var(--bg-elevated); overflow:hidden; }
.prog-bar span { display:block; height:100%; background:var(--accent-500); border-radius:3px; }
.prog-n { font-size:11px; font-weight:600; color:var(--text-muted); }
.segctl.sm button { height:26px; padding:0 9px; font-size:11px; }

/* audit before/after diff */
.diff { border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; }
.diff-row { display:flex; align-items:center; gap:10px; padding:10px 12px; font-size:12px; }
.diff-row .dk { font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary); min-width:120px; }
.diff-row .dv { padding:2px 8px; border-radius:var(--radius-sm); font-weight:500; }
.diff-row .dv.old { background:var(--color-danger-100); color:var(--color-danger-500); text-decoration:line-through; }
.diff-row .dv.new { background:var(--color-success-100); color:var(--color-success-500); }
.diff-row .darr svg { width:14px; height:14px; color:var(--text-tertiary); }

/* status grid (system health) */
.status-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.status-tile { border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:13px 14px; background:var(--bg-app); }
.status-tile .st-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.status-tile .st-dot { width:9px; height:9px; border-radius:50%; }
.status-tile .st-dot.ok { background:var(--color-success-500); box-shadow:0 0 0 3px var(--color-success-100); }
.status-tile .st-dot.warn { background:var(--color-warning-500); box-shadow:0 0 0 3px var(--color-warning-100); }
.status-tile .st-dot.bad { background:var(--color-danger-500); box-shadow:0 0 0 3px var(--color-danger-100); }
.status-tile .st-ic { color:var(--text-tertiary); } .status-tile .st-ic svg { width:16px; height:16px; }
.status-tile .st-nm { font-size:12.5px; font-weight:600; color:var(--text-strong); }
.status-tile .st-status { font-size:11.5px; font-weight:500; margin-top:2px; }
.status-tile.ok .st-status { color:var(--color-success-500); }
.status-tile.warn .st-status { color:var(--color-warning-500); }
.status-tile.bad .st-status { color:var(--color-danger-500); }
.status-tile .st-note { font-size:10.5px; color:var(--text-tertiary); margin-top:3px; font-family:var(--font-mono); }

/* qr box (MFA setup) */
.qr-box { width:130px; height:130px; border:1px solid var(--border-default); border-radius:var(--radius-md); display:grid; place-items:center; gap:4px; background:var(--bg-app); color:var(--text-tertiary); flex-shrink:0; }
.qr-box svg { width:48px; height:48px; }
.qr-box span { font-size:10px; }

/* backup codes */
.codes-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:14px; }
.code-chip { font-family:var(--font-mono); font-size:13px; padding:9px 12px; border:1px solid var(--border-default); border-radius:var(--radius-sm); background:var(--bg-app); color:var(--text-strong); display:flex; justify-content:space-between; align-items:center; }
.code-chip.used { opacity:.5; text-decoration:line-through; }
.code-chip .cc-used { font-size:9.5px; color:var(--text-tertiary); text-decoration:none; }

/* password strength meter */
.pw-meter { height:6px; border-radius:3px; background:var(--bg-elevated); overflow:hidden; margin-top:4px; }
.pw-meter .pw-bar { display:block; height:100%; background:var(--color-success-500); border-radius:3px; }

/* locale preview */
.locale-preview { border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:14px 15px; background:var(--bg-app); margin-top:4px; }
.locale-preview .lp-h { font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-tertiary); margin-bottom:10px; }
.locale-preview .lp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:14px; }
.locale-preview .lp-cell { display:flex; flex-direction:column; gap:3px; }
.locale-preview .lp-k { font-size:10.5px; color:var(--text-tertiary); }
.locale-preview .lp-v { font-size:14px; font-weight:600; color:var(--text-strong); }

/* static scope-chip (non-interactive preview) */
.scope-chip.is-static { background:var(--bg-app); border-color:var(--border-subtle); }
.scope-chip.is-static:hover { background:var(--bg-app); border-color:var(--border-subtle); color:var(--text-muted); }

/* ============================== PHASE 7 — PER-PROVIDER INTEGRATION BODIES ============================== */
.prereq-list { margin:6px 0 0; padding-inline-start:18px; display:flex; flex-direction:column; gap:4px; }
.prereq-list li { font-size:12px; color:var(--text-body); line-height:1.5; }
.prereq-list li strong { color:var(--text-strong); }
.connect-cta { display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--border-default); border-radius:var(--radius-lg); background:var(--bg-app); margin-bottom:14px; }
.connect-cta > svg { width:24px; height:24px; color:var(--text-muted); flex-shrink:0; }
.connect-cta .cc-x { flex:1; min-width:0; }
.connect-cta .cc-t { font-size:13px; font-weight:600; color:var(--text-strong); }
.connect-cta .cc-b { font-size:11.5px; color:var(--text-tertiary); margin-top:2px; line-height:1.45; }
.dir-pill { display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:var(--radius-sm); font-size:10.5px; font-weight:600; }
.dir-twoway { background:var(--accent-100); color:var(--accent-text-on); }
.dir-pushpull { background:var(--color-info-100); color:var(--color-info-500); }
.dir-pull { background:var(--bg-elevated); color:var(--text-muted); }
.dir-push { background:var(--color-success-100); color:var(--color-success-500); }
.hs-chip.mono { font-family:var(--font-mono); font-size:10.5px; }

/* ============================== OVERLAYS ============================== */
.scrim { position:fixed; inset:0; background:var(--scrim); z-index:50; opacity:0; pointer-events:none; transition:opacity var(--d-normal); }
.scrim.show { opacity:1; pointer-events:auto; }
.layer { position:fixed; z-index:60; }

/* command palette */
.cmdk { position:fixed; top:84px; left:50%; transform:translateX(-50%) translateY(-8px); width:min(620px,92vw); background:var(--bg-elevated); border:1px solid var(--border-default); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); z-index:70; opacity:0; pointer-events:none; transition:opacity var(--d-fast),transform var(--d-fast); display:flex; flex-direction:column; max-height:70vh; }
.cmdk.show { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.cmdk-input { display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:1px solid var(--border-subtle); }
.cmdk-input svg { color:var(--text-tertiary); width:18px; height:18px; }
.cmdk-input input { flex:1; background:transparent; border:none; outline:none; color:var(--text-strong); font-size:15px; }
.cmdk-tabs { display:flex; gap:4px; padding:8px 12px 0; }
.cmdk-tab { height:26px; padding:0 11px; border-radius:var(--radius-sm); font-size:12px; font-weight:500; color:var(--text-muted); }
.cmdk-tab:hover { background:var(--bg-hover); color:var(--text-strong); }
.cmdk-tab.is-active { background:var(--accent-100); color:var(--accent-text-on); }
.cmdk-list { overflow-y:auto; padding:8px; }
.cmdk-grp { font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-tertiary); padding:8px 9px 4px; }
.cmdk-item { display:flex; align-items:center; gap:11px; padding:8px 9px; border-radius:var(--radius-sm); width:100%; text-align:start; transition:background var(--d-fast); }
.cmdk-item:hover, .cmdk-item.is-active { background:var(--bg-hover); }
.cmdk-item .ci { width:28px; height:28px; border-radius:var(--radius-sm); display:grid; place-items:center; background:var(--bg-surface); color:var(--text-muted); flex-shrink:0; }
.cmdk-item.act .ci { background:var(--accent-100); color:var(--accent-text-on); }
.cmdk-item.ask .ci { background:var(--ai-grad); color:#fff; }
.cmdk-item .ctx { flex:1; min-width:0; }
.cmdk-item .ctx .t { font-size:13px; color:var(--text-strong); font-weight:500; }
.cmdk-item .ctx .s { font-size:11px; color:var(--text-tertiary); margin-top:1px; }
.cmdk-item .arrow { color:var(--text-tertiary); }
.cmdk-foot { display:flex; align-items:center; gap:14px; padding:9px 14px; border-top:1px solid var(--border-subtle); font-size:11px; color:var(--text-tertiary); }
.cmdk-foot .kb { font-family:var(--font-ui); font-size:10px; padding:1px 5px; background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:3px; margin-inline-end:4px; }

/* dropdown menu / profile */
.menu { position:fixed; background:var(--bg-elevated); border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:5px; min-width:240px; z-index:70; opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity var(--d-fast),transform var(--d-fast); }
.menu.show { opacity:1; pointer-events:auto; transform:translateY(0); }
.menu-head { padding:10px 11px 9px; }
.menu-head .nm { font-size:13px; font-weight:600; color:var(--text-strong); }
.menu-head .em { font-size:11.5px; color:var(--text-tertiary); margin-top:1px; }
.menu-label { font-size:9.5px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.06em; padding:7px 9px 3px; }
.menu-item { display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:var(--radius-sm); font-size:12.5px; color:var(--text-body); width:100%; text-align:start; transition:background var(--d-fast); }
.menu-item:hover { background:var(--bg-hover); color:var(--text-strong); }
.menu-item svg { color:var(--text-tertiary); width:15px; height:15px; }
.menu-item:hover svg { color:var(--text-strong); }
.menu-item .qt { margin-inline-start:auto; display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--text-tertiary); }
.menu-item .qt .pval { color:var(--text-strong); font-weight:500; }
.menu-item.danger { color:var(--color-danger-500); }
.menu-item.danger svg { color:var(--color-danger-500); }
.menu-item.danger:hover { background:var(--danger-bg-hover); }
.menu-sep { height:1px; background:var(--border-subtle); margin:5px 0; }

/* notifications popover */
.notif { position:fixed; width:360px; background:var(--bg-elevated); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); z-index:70; opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity var(--d-fast),transform var(--d-fast); display:flex; flex-direction:column; max-height:480px; }
.notif.show { opacity:1; pointer-events:auto; transform:translateY(0); }
.notif-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border-subtle); }
.notif-head .t { font-size:13px; font-weight:600; color:var(--text-strong); }
.notif-head .mark { font-size:11.5px; color:var(--accent-text-on); }
.notif-list { overflow-y:auto; }
.notif-item { display:flex; gap:11px; padding:11px 14px; border-bottom:1px solid var(--border-subtle); transition:background var(--d-fast); }
.notif-item:hover { background:var(--bg-hover); }
.notif-item.unread { background:color-mix(in oklab,var(--accent-500) 5%,transparent); }
.notif-item .nic { width:30px; height:30px; border-radius:var(--radius-sm); display:grid; place-items:center; flex-shrink:0; background:var(--bg-surface); color:var(--text-muted); }
.notif-item .nx { flex:1; min-width:0; }
.notif-item .nx .nt { font-size:12.5px; color:var(--text-strong); line-height:1.4; }
.notif-item .nx .nm2 { font-size:11px; color:var(--text-tertiary); margin-top:3px; }
.notif-item .unreaddot { width:7px; height:7px; border-radius:50%; background:var(--accent-500); flex-shrink:0; margin-top:6px; }

/* right drawer (detail) */
.rdrawer { position:fixed; top:0; inset-inline-end:0; height:100vh; width:460px; max-width:94vw; background:var(--bg-surface); border-inline-start:1px solid var(--border-default); box-shadow:var(--shadow-lg); z-index:70; display:flex; flex-direction:column; transform:translateX(100%); transition:transform var(--d-normal) var(--ease); }
[dir="rtl"] .rdrawer { transform:translateX(-100%); }
.rdrawer.show { transform:translateX(0); }
.rdrawer-head { display:flex; align-items:flex-start; gap:12px; padding:16px 18px; border-bottom:1px solid var(--border-subtle); }
.rdrawer-head .rt { flex:1; min-width:0; }
.rdrawer-head .rt .t { font-size:15px; font-weight:600; color:var(--text-strong); display:flex; align-items:center; gap:9px; }
.rdrawer-head .rt .s { font-size:12px; color:var(--text-tertiary); margin-top:3px; }
.rdrawer-body { flex:1; overflow-y:auto; padding:18px; }
.rdrawer-foot { display:flex; align-items:center; gap:8px; padding:13px 18px; border-top:1px solid var(--border-subtle); }

/* modal */
.modal-host { position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:24px; opacity:0; pointer-events:none; transition:opacity var(--d-fast); }
.modal-host.show { opacity:1; pointer-events:auto; }
.modal { background:var(--bg-elevated); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; max-width:480px; display:flex; flex-direction:column; max-height:86vh; transform:scale(0.97); transition:transform var(--d-fast); }
.modal-host.show .modal { transform:scale(1); }
.modal.lg { max-width:620px; }
.modal-head { display:flex; align-items:flex-start; gap:12px; padding:18px 20px 0; }
.modal-head .mh-icon { width:36px; height:36px; border-radius:var(--radius-md); display:grid; place-items:center; flex-shrink:0; }
.modal-head .mh-icon.danger { background:var(--color-danger-100); color:var(--color-danger-500); }
.modal-head .mh-icon.warn { background:var(--color-warning-100); color:var(--color-warning-500); }
.modal-head .mh-icon.accent { background:var(--accent-100); color:var(--accent-text-on); }
.modal-head .mh-text { flex:1; min-width:0; }
.modal-title { font-size:15px; font-weight:600; color:var(--text-strong); margin:0; }
.modal-sub { font-size:12.5px; color:var(--text-tertiary); margin:3px 0 0; line-height:1.5; }
.modal-head .close { width:26px; height:26px; border-radius:var(--radius-sm); display:grid; place-items:center; color:var(--text-tertiary); flex-shrink:0; }
.modal-head .close:hover { background:var(--bg-hover); color:var(--text-strong); }
.modal-body { padding:16px 20px; font-size:13px; color:var(--text-body); line-height:1.6; overflow-y:auto; }
.modal-foot { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:14px 20px 18px; }
.modal-foot.spread { justify-content:space-between; }
.gate-list { display:flex; flex-direction:column; gap:8px; margin:6px 0 4px; }
.gate-item { display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--bg-surface); }
.gate-item .gc { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.gate-item .gc.block { background:var(--color-danger-100); color:var(--color-danger-500); }
.gate-item .gc.warn { background:var(--color-warning-100); color:var(--color-warning-500); }
.gate-item .gc.ok { background:var(--color-success-100); color:var(--color-success-500); }
.gate-item .gx .h { font-size:12.5px; font-weight:500; color:var(--text-strong); }
.gate-item .gx .b { font-size:11.5px; color:var(--text-tertiary); margin-top:2px; line-height:1.45; }
.confirm-input { width:100%; min-height:34px; padding:8px 11px; margin-top:10px; background:var(--bg-app); border:1px solid var(--border-default); border-radius:var(--radius-md); color:var(--text-strong); font-size:13px; outline:none; }
.confirm-input:focus { border-color:var(--accent-500); box-shadow:var(--focus-ring); }

/* AI panel */
.ai-drawer { position:fixed; top:0; inset-inline-end:0; height:100vh; width:392px; max-width:96vw; background:var(--bg-surface); border-inline-start:1px solid var(--border-default); box-shadow:var(--shadow-lg); z-index:65; display:flex; flex-direction:column; transform:translateX(100%); transition:transform var(--d-normal) var(--ease); }
[dir="rtl"] .ai-drawer { transform:translateX(-100%); }
.ai-drawer.show { transform:translateX(0); }
.ai-drawer.fullscreen { width:100vw; max-width:100vw; border:none; }
.ai-head { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border-subtle); flex-shrink:0; }
.ai-avatar { width:28px; height:28px; border-radius:var(--radius-sm); background:var(--ai-grad); display:grid; place-items:center; color:#fff; flex-shrink:0; }
.ai-meta { flex:1; min-width:0; }
.ai-pick { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--text-strong); }
.ai-pick svg { color:var(--text-tertiary); width:13px; height:13px; }
.ai-sub { font-size:11px; color:var(--text-tertiary); margin-top:1px; display:flex; align-items:center; gap:6px; }
.ai-sub .mt { font-family:var(--font-mono); }
.ai-ico { width:28px; height:28px; border-radius:var(--radius-sm); display:grid; place-items:center; color:var(--text-tertiary); }
.ai-ico:hover { background:var(--bg-hover); color:var(--text-strong); }
.ai-body { flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:18px; }
.ai-body.fs { max-width:740px; width:100%; margin:0 auto; }
.ai-foot { flex-shrink:0; padding:12px 14px; border-top:1px solid var(--border-subtle); }
.ai-foot.fs { max-width:740px; width:100%; margin:0 auto; }
.msg { display:flex; gap:10px; }
.msg .m-avatar { width:26px; height:26px; border-radius:var(--radius-sm); flex-shrink:0; display:grid; place-items:center; font-size:10px; font-weight:600; }
.msg.agent .m-avatar { background:var(--ai-grad); color:#fff; }
.msg.user .m-avatar { background:#10b981; color:#fff; }
.msg .m-main { flex:1; min-width:0; }
.msg .m-name { font-size:11px; font-weight:600; color:var(--text-tertiary); margin-bottom:4px; }
.msg .m-text { font-size:13px; color:var(--text-body); line-height:1.6; }
.msg.user .m-text { background:var(--user-bubble); padding:9px 12px; border-radius:var(--radius-md); display:inline-block; }
.msg .m-text strong { color:var(--text-strong); font-weight:600; }
.suggest-row { display:flex; gap:6px; flex-wrap:wrap; }
.suggest { padding:6px 11px; border:1px solid var(--border-subtle); border-radius:var(--radius-pill); font-size:11.5px; color:var(--text-muted); transition:all var(--d-fast); }
.suggest:hover { color:var(--text-strong); border-color:var(--border-default); background:var(--bg-hover); }
.composer { border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--bg-app); padding:9px 11px; }
.composer:focus-within { border-color:var(--accent-500); box-shadow:var(--focus-ring); }
.composer textarea { width:100%; min-height:22px; max-height:120px; background:transparent; border:none; outline:none; color:var(--text-strong); font-size:13px; resize:none; }
.composer textarea::placeholder { color:var(--text-tertiary); }
.c-bar { display:flex; align-items:center; gap:6px; margin-top:8px; }
.c-tool { width:28px; height:28px; border-radius:var(--radius-sm); display:grid; place-items:center; color:var(--text-tertiary); }
.c-tool:hover { background:var(--bg-hover); color:var(--text-strong); }
.c-send { width:28px; height:28px; border-radius:var(--radius-md); background:var(--accent-500); color:#fff; display:grid; place-items:center; }
.c-meter { font-size:10.5px; font-family:var(--font-mono); color:var(--text-tertiary); margin-inline-end:2px; }

/* toast */
.toast-host { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast { display:flex; align-items:center; gap:9px; padding:10px 15px; background:var(--bg-elevated); border:1px solid var(--border-default); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); font-size:12.5px; color:var(--text-strong); animation:toast-in var(--d-normal) var(--ease); }
.toast .tc { width:18px; height:18px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; background:var(--color-success-100); color:var(--color-success-500); }
@keyframes toast-in { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

/* AI float */
.ai-float { position:fixed; bottom:20px; inset-inline-end:20px; width:48px; height:48px; border-radius:50%; background:var(--ai-grad); display:grid; place-items:center; color:#fff; box-shadow:var(--shadow-lg); z-index:40; transition:transform var(--d-fast); }
.ai-float:hover { transform:scale(1.06); }

/* TWEAKS */
.tweaks { position:fixed; bottom:18px; inset-inline-start:18px; width:300px; background:var(--bg-elevated); border:1px solid var(--border-default); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); z-index:80; display:none; flex-direction:column; max-height:84vh; }
.tweaks.show { display:flex; }
.tweaks-head { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border-subtle); cursor:move; }
.tweaks-head .t { font-size:13px; font-weight:600; color:var(--text-strong); flex:1; }
.tweaks-body { overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:16px; }
.tw-sec .tw-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-tertiary); margin-bottom:8px; }
.tw-swatches { display:flex; gap:8px; }
.tw-sw { width:30px; height:30px; border-radius:50%; cursor:pointer; position:relative; border:2px solid transparent; }
.tw-sw.is-active { border-color:var(--text-strong); }
.tw-sw.is-active::after { content:''; position:absolute; inset:0; border-radius:50%; border:2px solid var(--bg-elevated); }
.tw-seg { display:flex; gap:4px; padding:3px; background:var(--bg-app); border:1px solid var(--border-default); border-radius:var(--radius-md); }
.tw-seg button { flex:1; height:26px; border-radius:var(--radius-sm); font-size:11.5px; font-weight:500; color:var(--text-muted); }
.tw-seg button.is-active { background:var(--accent-500); color:#fff; }


@media (max-width:880px) {
  :root { --side-w:200px; }
}
@media (max-width:720px) {
  .body { grid-template-columns:var(--rail-w) 1fr; }
  .side { display:none; }
  .splitpane { grid-template-columns:1fr; }
  .preview-pane { position:static; }
}