/* Crowntime WeCom Archive — Design System
   Extracted from the shipped baseline (review_console.html "Archive Console v2" shell,
   search.html, diagnostics.css, base.css) and formalised into CSS custom properties.
   Theme switching = swapping variable values on [data-theme]. Never hard-code colour. */

/* CJK families in --font-sans are OS-installed, not web fonts — declared via
   local() so no file ships with the design system. If a platform lacks them the
   stack falls through to system-ui / Microsoft YaHei automatically. */
@font-face{font-family:'PingFang SC';src:local('PingFang SC'),local('PingFangSC-Regular');font-weight:400;font-display:swap}
@font-face{font-family:'PingFang SC';src:local('PingFang SC Semibold'),local('PingFangSC-Semibold');font-weight:600;font-display:swap}

/* ---------------------------------------------------------------- tokens */
:root{
  /* brand / primary — from the shipped #1677ff console accent */
  --color-primary:#1677ff;--color-primary-hover:#0958d9;--color-primary-active:#003eb3;
  --color-primary-soft:#e8f1fd;--color-primary-soft-hover:#ddebfc;--color-primary-border:#a9c9f5;
  --color-on-primary:#fff;--color-link:#1677ff;--color-link-hover:#0958d9;

  /* surfaces */
  --color-canvas:#eef0f4;--color-surface:#fff;--color-surface-sunken:#f8fafd;
  --color-surface-nav:#f4f7fb;--color-surface-header:#fafbfc;--color-surface-hover:#f6f8fb;
  --color-overlay:rgba(15,23,42,.45);

  /* borders */
  --color-border:#eceff3;--color-border-strong:#e3e7ee;--color-border-input:#dfe4ec;

  /* text */
  --color-text:#1f2329;--color-text-2:#3d4552;--color-text-3:#6b7280;
  --color-text-4:#8a8f99;--color-text-5:#a6adb8;--color-text-disabled:#c0c6cf;

  /* status — success / failed / pending / silent / info, badge triads */
  --color-success-fg:#237804;--color-success-bg:#f6ffed;--color-success-border:#b7eb8f;
  --color-danger-fg:#cf1322;--color-danger-bg:#fff2f0;--color-danger-border:#ffccc7;
  --color-warning-fg:#ad6800;--color-warning-bg:#fffbe6;--color-warning-border:#ffe58f;
  --color-info-fg:#0958d9;--color-info-bg:#e6f4ff;--color-info-border:#91caff;
  --color-neutral-fg:#7c8797;--color-neutral-bg:#f5f6f8;--color-neutral-border:#e6eaf0;

  /* data-viz — one hue ramp + status hues, never decorative */
  --color-viz-1:#1677ff;--color-viz-2:#5b9bff;--color-viz-3:#8fbcff;--color-viz-4:#b9d6ff;
  --color-viz-5:#7c8797;--color-viz-6:#37c2a3;--color-grid:#eceff3;

  /* type */
  --font-sans:system-ui,-apple-system,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --text-2xs:10.5px;--text-xs:11.5px;--text-sm:12.5px;--text-md:13px;--text-base:14px;
  --text-lg:15px;--text-xl:17px;--text-2xl:20px;--text-3xl:26px;--text-4xl:32px;
  --leading-tight:1.25;--leading:1.5;--leading-loose:1.65;
  --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;

  /* space — 4px base */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;

  /* radius */
  --radius-xs:3px;--radius-sm:6px;--radius-md:7px;--radius-lg:9px;--radius-xl:12px;--radius-pill:999px;

  /* elevation */
  --shadow-1:0 1px 2px rgba(15,23,42,.05);
  --shadow-2:0 4px 16px rgba(15,23,42,.10);
  --shadow-3:0 6px 20px rgba(15,23,42,.14);
  --focus-ring:0 0 0 3px rgba(22,119,255,.24);

  /* platform (super-admin) plane — a different permission plane must read as different chrome */
  --color-admin-bar:#101720;--color-admin-bar-fg:#eef2f7;--color-admin-bar-muted:#93a3b5;--color-admin-bar-border:#26323f;

  /* layout */
  --nav-w:212px;--nav-w-sm:170px;--topbar-h:52px;--control-h:32px;--control-h-sm:28px;
}

[data-theme="dark"]{
  --color-primary:#3b8cff;--color-primary-hover:#5ea1ff;--color-primary-active:#7db4ff;
  --color-primary-soft:#16283f;--color-primary-soft-hover:#1c3452;--color-primary-border:#2c5488;
  --color-on-primary:#0b0f14;--color-link:#66a9ff;--color-link-hover:#8dc0ff;
  --color-canvas:#0d1117;--color-surface:#151a21;--color-surface-sunken:#1a2029;
  --color-surface-nav:#11161d;--color-surface-header:#1a2029;--color-surface-hover:#1e252f;
  --color-overlay:rgba(0,0,0,.6);
  --color-border:#232b35;--color-border-strong:#2c3542;--color-border-input:#333d4b;
  --color-text:#e6eaf0;--color-text-2:#c3cad4;--color-text-3:#98a2b0;
  --color-text-4:#7b8592;--color-text-5:#657081;--color-text-disabled:#4a5462;
  --color-success-fg:#7bd88f;--color-success-bg:#13251a;--color-success-border:#265b32;
  --color-danger-fg:#ff8a80;--color-danger-bg:#2a1416;--color-danger-border:#5f2226;
  --color-warning-fg:#f0c268;--color-warning-bg:#2a2113;--color-warning-border:#5d4519;
  --color-info-fg:#7db4ff;--color-info-bg:#16283f;--color-info-border:#2c5488;
  --color-neutral-fg:#98a2b0;--color-neutral-bg:#1a2029;--color-neutral-border:#2c3542;
  --color-viz-1:#3b8cff;--color-viz-2:#6aa8ff;--color-viz-3:#95c2ff;--color-viz-4:#2c5488;
  --color-viz-5:#7b8592;--color-viz-6:#3fbfa2;--color-grid:#232b35;
  --color-admin-bar:#080c11;--color-admin-bar-fg:#e6eaf0;--color-admin-bar-muted:#7b8592;--color-admin-bar-border:#1c242e;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);--shadow-2:0 4px 16px rgba(0,0,0,.5);--shadow-3:0 6px 20px rgba(0,0,0,.6);
  --focus-ring:0 0 0 3px rgba(59,140,255,.32);
}

/* --------------------------------------------------------------- base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font-sans);font-size:var(--text-md);color:var(--color-text);background:var(--color-canvas);line-height:var(--leading);-webkit-font-smoothing:antialiased}
a{color:var(--color-link);text-decoration:none}
a:hover{color:var(--color-link-hover);text-decoration:underline}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px;border-radius:var(--radius-xs)}
.mono{font-family:var(--font-mono)}
.muted{color:var(--color-text-4)}
.tnum{font-variant-numeric:tabular-nums}
h1{font-size:var(--text-2xl);font-weight:var(--weight-semibold);letter-spacing:-.01em}
h2{font-size:var(--text-lg);font-weight:var(--weight-semibold)}
h3{font-size:var(--text-base);font-weight:var(--weight-semibold)}

/* --------------------------------------------------------- app shell */
.shell{display:flex;height:100vh;overflow:hidden}

.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.topbar{height:var(--topbar-h);flex-shrink:0;background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:var(--space-3);padding:0 18px}
.topbar-title{font-size:var(--text-lg);font-weight:var(--weight-semibold);white-space:nowrap}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--color-text-4);min-width:0}
.breadcrumb .sep{color:var(--color-text-5)}
.breadcrumb .cur{color:var(--color-text);font-weight:var(--weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}
.tz-note{font-size:var(--text-xs);color:var(--color-text-4);white-space:nowrap}
.page{flex:1;overflow-y:auto;padding:var(--space-6) var(--space-6) var(--space-12)}
.page-narrow{max-width:940px}
.page-hd{display:flex;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-5)}
.page-hd h1{margin-bottom:4px}
.page-hd p{font-size:var(--text-sm);color:var(--color-text-4);max-width:56em}
.page-hd-actions{margin-left:auto;display:flex;gap:var(--space-2);flex-shrink:0}
.section{margin-bottom:var(--space-8)}
.section-hd{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
.section-hd h2{font-size:var(--text-base)}
.section-hd .hint{font-size:var(--text-xs);color:var(--color-text-4)}
.section-hd .right{margin-left:auto;display:flex;gap:var(--space-2);align-items:center}

/* -------------------------------------------------------------- buttons */
.btn{height:var(--control-h);padding:0 var(--space-3);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-2);font-family:inherit;font-size:var(--text-sm);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;text-decoration:none;transition:background .12s,border-color .12s}
.btn:hover{background:var(--color-surface-hover);text-decoration:none;color:var(--color-text-2)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring);border-color:var(--color-primary)}
.btn:disabled,.btn.is-disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}
.btn-primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:var(--color-on-primary)}
.btn-danger{border-color:var(--color-danger-border);color:var(--color-danger-fg);background:var(--color-surface)}
.btn-danger:hover{background:var(--color-danger-bg)}
.btn-ghost{border-color:transparent;background:transparent;color:var(--color-text-3)}
.btn-ghost:hover{background:var(--color-surface-hover)}
.btn-sm{height:var(--control-h-sm);font-size:var(--text-xs);padding:0 10px}
.btn-lg{height:38px;font-size:var(--text-base);padding:0 var(--space-5)}
.btn-block{width:100%}
.btn.active{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary-hover)}
.btn-link{border:none;background:none;color:var(--color-link);cursor:pointer;font-family:inherit;font-size:var(--text-sm);padding:0;height:auto}
.btn-link:hover{text-decoration:underline;background:none}

/* --------------------------------------------------------------- forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-4)}
.field-label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-2)}
.field-label .req{color:var(--color-danger-fg);margin-left:2px}
.field-help{font-size:var(--text-xs);color:var(--color-text-4);line-height:var(--leading-loose)}
.field-error{font-size:var(--text-xs);color:var(--color-danger-fg)}
.input,.select,.textarea{height:var(--control-h);width:100%;padding:0 10px;border:1px solid var(--color-border-input);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-family:inherit;font-size:var(--text-md);outline:none;transition:border-color .12s,box-shadow .12s}
.textarea{height:auto;padding:8px 10px;line-height:var(--leading);resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--color-text-5)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--color-border-strong)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--color-primary);box-shadow:var(--focus-ring)}
.input:disabled,.select:disabled{background:var(--color-surface-sunken);color:var(--color-text-disabled);cursor:not-allowed}
.input.has-error{border-color:var(--color-danger-border)}
.select{appearance:none;padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,var(--color-text-4) 50%),linear-gradient(135deg,var(--color-text-4) 50%,transparent 50%);background-position:calc(100% - 14px) 14px,calc(100% - 9px) 14px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.input-affix{position:relative}
.input-affix .input{padding-left:30px}
.input-affix .affix{position:absolute;left:10px;top:0;height:var(--control-h);display:flex;align-items:center;color:var(--color-text-5);font-size:var(--text-md);pointer-events:none}
.checkbox,.radio{display:inline-flex;align-items:center;gap:7px;font-size:var(--text-md);color:var(--color-text-2);cursor:pointer}
.checkbox input,.radio input{width:14px;height:14px;accent-color:var(--color-primary);margin:0}
.switch{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:var(--color-border-strong);border-radius:var(--radius-pill);transition:background .15s;cursor:pointer}
.switch span::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--color-surface);box-shadow:var(--shadow-1);transition:transform .15s}
.switch input:checked+span{background:var(--color-primary)}
.switch input:checked+span::after{transform:translateX(16px)}
.switch input:focus-visible+span{box-shadow:var(--focus-ring)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-5)}
.form-row{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}

/* --------------------------------------------------------------- cards */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-1)}
.card-hd{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border)}
.card-hd h2,.card-hd h3{font-size:var(--text-base);font-weight:var(--weight-semibold)}
.card-hd .right{margin-left:auto;display:flex;align-items:center;gap:var(--space-2)}
.card-bd{padding:var(--space-5)}
.card-bd-flush{padding:0}
.card-ft{padding:var(--space-3) var(--space-5);border-top:1px solid var(--color-border);font-size:var(--text-sm);color:var(--color-text-4);display:flex;align-items:center;gap:var(--space-3)}
.set-row{display:flex;gap:var(--space-5);padding:var(--space-4) var(--space-5);align-items:flex-start}
.set-label{width:200px;flex-shrink:0}
.set-label h3{font-size:var(--text-md);margin-bottom:2px}
.set-label p{font-size:var(--text-xs);color:var(--color-text-4);line-height:var(--leading-loose)}
.set-ctl{flex:1;min-width:0;max-width:420px}
.grid{display:grid;gap:var(--space-4)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* metric / stat card */
.stat{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:6px;min-width:0}
.stat-k{font-size:var(--text-xs);color:var(--color-text-4);display:flex;align-items:center;gap:6px}
.stat-v{font-size:var(--text-3xl);font-weight:var(--weight-semibold);letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.stat-v small{font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--color-text-4);margin-left:3px}
.stat-sub{font-size:var(--text-xs);color:var(--color-text-4);display:flex;align-items:center;gap:6px}
.delta{font-size:var(--text-xs);font-weight:var(--weight-medium)}
.delta-up{color:var(--color-success-fg)}
.delta-down{color:var(--color-danger-fg)}
.spark{display:block;width:100%;height:28px;overflow:visible}

/* --------------------------------------------------------------- tables */
.table-wrap{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-1)}
table{border-collapse:collapse;width:100%}
.table{font-size:var(--text-sm)}
.table th{background:var(--color-surface-header);color:var(--color-text-4);font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:9px var(--space-4);border-bottom:1px solid var(--color-border);white-space:nowrap}
.table td{padding:10px var(--space-4);border-bottom:1px solid var(--color-border);vertical-align:middle;color:var(--color-text-2)}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background:var(--color-surface-sunken)}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table .actions{text-align:right;white-space:nowrap}
.table .actions .btn-link+.btn-link{margin-left:var(--space-3)}
.table-fixed{table-layout:fixed}
.cell-primary{font-weight:var(--weight-medium);color:var(--color-text)}
.cell-sub{font-size:var(--text-xs);color:var(--color-text-4);margin-top:1px}
.cell-id{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-4)}
.row-select{width:36px}

/* legacy base.css compatibility — same class names, now variable-driven */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);line-height:1.5;padding:1px 7px;border-radius:var(--radius-xs);background:var(--color-neutral-bg);color:var(--color-neutral-fg);border:1px solid var(--color-neutral-border);font-weight:var(--weight-medium);white-space:nowrap}
.badge-success{background:var(--color-success-bg);color:var(--color-success-fg);border-color:var(--color-success-border)}
.badge-failed{background:var(--color-danger-bg);color:var(--color-danger-fg);border-color:var(--color-danger-border)}
.badge-pending{background:var(--color-warning-bg);color:var(--color-warning-fg);border-color:var(--color-warning-border)}
.badge-silent{background:var(--color-neutral-bg);color:var(--color-neutral-fg);border-color:var(--color-neutral-border);font-style:italic}
.badge-info{background:var(--color-info-bg);color:var(--color-info-fg);border-color:var(--color-info-border)}
.badge-dot::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.badge-plain{border-color:transparent;background:transparent;padding-left:0}

.chip{display:inline-flex;align-items:center;gap:5px;height:var(--control-h-sm);padding:0 10px;border-radius:var(--radius-sm);border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text-3);font-size:var(--text-xs);font-family:inherit;cursor:pointer;white-space:nowrap}
.chip:hover{background:var(--color-surface-hover)}
.chip.active{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary-hover)}
.chip-x{border:none;background:none;color:inherit;cursor:pointer;font-size:var(--text-md);line-height:1;padding:0}
.tag{display:inline-block;font-size:var(--text-xs);padding:1px 6px;border-radius:var(--radius-xs);background:var(--color-primary-soft);color:var(--color-primary-hover);white-space:nowrap}
.tag-neutral{background:var(--color-neutral-bg);color:var(--color-neutral-fg)}
.avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:var(--weight-bold);color:#fff;flex-shrink:0;background:var(--color-primary)}
.avatar-controlled{position:relative;overflow:hidden;isolation:isolate}
.avatar-fallback{display:flex;width:100%;height:100%;align-items:center;justify-content:center;line-height:1}
.avatar-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;background:transparent}
.avatar-sq{border-radius:var(--radius-sm)}
.avatar-sm{width:20px;height:20px;font-size:var(--text-2xs)}
.avatar-lg{width:34px;height:34px;font-size:var(--text-md)}

/* ---------------------------------------------------------- filter bar */
.toolbar{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3)}
.toolbar-compact{flex-wrap:nowrap}
.toolbar-compact .search-input{flex:1 1 260px;min-width:180px}
.toolbar-compact>.select,.toolbar-compact>.input{width:auto;min-width:132px;flex:0 1 176px}
.toolbar-compact>.filter-wide{flex-basis:210px}
.toolbar .grow{flex:1;min-width:0}
.toolbar .right{margin-left:auto;display:flex;gap:var(--space-2);align-items:center}
.search-input{position:relative;flex:0 1 300px}
.search-input .input{padding-left:30px;background:var(--color-surface-sunken)}
.search-input .input:focus{background:var(--color-surface)}
.search-input .ico{position:absolute;left:10px;top:0;height:var(--control-h);display:flex;align-items:center;color:var(--color-text-5);font-size:var(--text-md)}
.filter-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-bottom:var(--space-3)}
.segmented{display:inline-flex;background:var(--color-surface-sunken);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);padding:2px;gap:2px}
.segmented button{height:24px;padding:0 10px;border:none;background:none;border-radius:var(--radius-sm);font-family:inherit;font-size:var(--text-xs);color:var(--color-text-3);cursor:pointer}
.segmented button.active{background:var(--color-surface);color:var(--color-text);font-weight:var(--weight-medium);box-shadow:var(--shadow-1)}

.tabs{display:flex;gap:var(--space-5);border-bottom:1px solid var(--color-border);margin-bottom:var(--space-5)}
.tab{padding:0 0 9px;border:none;background:none;font-family:inherit;font-size:var(--text-base);color:var(--color-text-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.active{color:var(--color-primary-hover);font-weight:var(--weight-semibold);border-bottom-color:var(--color-primary)}
.tab:hover:not(.active){color:var(--color-text)}

/* ------------------------------------------------------------ pagination */
.pagination{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-4)}
.pagination .pages{display:flex;gap:4px;margin-left:auto}
.page-btn{min-width:28px;height:var(--control-h-sm);padding:0 8px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-2);font-family:inherit;font-size:var(--text-xs);cursor:pointer}
.page-btn:hover{background:var(--color-surface-hover)}
.page-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary);font-weight:var(--weight-semibold)}
.page-btn:disabled{color:var(--color-text-disabled);cursor:not-allowed;background:var(--color-surface)}

/* ----------------------------------------------------- notices & states */
.alert{display:flex;gap:10px;padding:10px var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--color-info-border);background:var(--color-info-bg);color:var(--color-info-fg);font-size:var(--text-sm);line-height:var(--leading-loose);align-items:flex-start}
.alert-warning{border-color:var(--color-warning-border);background:var(--color-warning-bg);color:var(--color-warning-fg)}
.alert-danger{border-color:var(--color-danger-border);background:var(--color-danger-bg);color:var(--color-danger-fg)}
.alert-success{border-color:var(--color-success-border);background:var(--color-success-bg);color:var(--color-success-fg)}
.alert-neutral{border-color:var(--color-border-strong);background:var(--color-surface-sunken);color:var(--color-text-3)}
.alert strong{font-weight:var(--weight-semibold)}
.alert .right{margin-left:auto;flex-shrink:0;display:flex;gap:var(--space-2)}
.alert-ico{flex-shrink:0;font-size:var(--text-base);line-height:1.4}

.empty{padding:var(--space-12) var(--space-4);text-align:center;color:var(--color-text-4)}
.empty-title{font-size:var(--text-base);color:var(--color-text-3);margin-bottom:6px}
.empty-hint{font-size:var(--text-sm);color:var(--color-text-5)}
.empty .btn{margin-top:var(--space-4)}
.loading{padding:var(--space-8);text-align:center;color:var(--color-text-4);font-size:var(--text-sm)}
.sk{height:10px;border-radius:var(--radius-xs);background:linear-gradient(90deg,var(--color-border) 25%,var(--color-surface-sunken) 37%,var(--color-border) 63%);background-size:400% 100%;animation:sk 1.3s ease infinite}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}

/* ------------------------------------------------------------- modal */
.modal-backdrop{position:fixed;inset:0;background:var(--color-overlay);display:flex;align-items:center;justify-content:center;z-index:100;padding:var(--space-6)}
.modal{background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-3);width:min(560px,100%);max-height:86vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--color-border)}
.modal-hd{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:var(--space-3)}
.modal-hd h2{font-size:var(--text-lg)}
.modal-close{margin-left:auto;border:none;background:none;font-size:var(--text-xl);color:var(--color-text-4);cursor:pointer;line-height:1}
.modal-bd{padding:var(--space-5);overflow-y:auto}
.modal-ft{padding:var(--space-3) var(--space-5);border-top:1px solid var(--color-border);display:flex;gap:var(--space-2);justify-content:flex-end}

/* ------------------------------------------------------- key/value list */
.kv{display:grid;grid-template-columns:max-content 1fr;gap:9px var(--space-4);font-size:var(--text-sm)}
.kv dt{color:var(--color-text-4)}
.kv dd{color:var(--color-text-2);word-break:break-word}
.kv-audit dd{font-family:var(--font-mono);font-size:var(--text-xs)}

/* --------------------------------------------------------- chart frame */
.chart{width:100%;display:block;overflow:visible}
.chart-legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);font-size:var(--text-xs);color:var(--color-text-3);margin-top:var(--space-3)}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.chart-legend i{width:8px;height:8px;border-radius:2px;display:inline-block}
.axis-label{font-size:10px;fill:var(--color-text-5);font-family:var(--font-sans)}
.grid-line{stroke:var(--color-grid);stroke-width:1}

/* --------------------------------------------------------- audit feel */
.evidence{border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-surface-sunken);padding:var(--space-3) var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-3);line-height:var(--leading-loose);word-break:break-all}
.hash{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--color-text-5)}
.timeline-rail{position:relative;padding-left:var(--space-5)}
.timeline-rail::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--color-border-strong)}
.timeline-item{position:relative;padding-bottom:var(--space-4)}
.timeline-item::before{content:"";position:absolute;left:calc(-1 * var(--space-5) + 2px);top:5px;width:7px;height:7px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 0 3px var(--color-surface)}
.timeline-item.is-muted::before{background:var(--color-text-disabled)}

/* --------------------------------------------------------- auth pages */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 460px;background:var(--color-surface)}
.auth-aside{background:var(--color-surface-nav);border-right:1px solid var(--color-border);padding:var(--space-12);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:var(--space-12) var(--space-10)}
.auth-card{width:100%;max-width:340px}
.auth-legal{font-size:var(--text-xs);color:var(--color-text-4);line-height:var(--leading-loose)}
.divider{display:flex;align-items:center;gap:var(--space-3);color:var(--color-text-5);font-size:var(--text-xs);margin:var(--space-5) 0}
.divider::before,.divider::after{content:"";height:1px;background:var(--color-border);flex:1}

/* ------------------------------------------------- platform admin bar */
.admin-bar{height:44px;flex-shrink:0;background:var(--color-admin-bar);color:var(--color-admin-bar-fg);display:flex;align-items:center;gap:var(--space-4);padding:0 18px;font-size:var(--text-sm)}
.admin-bar strong{font-weight:var(--weight-semibold)}
.admin-bar a{color:var(--color-admin-bar-muted)}
.admin-bar a:hover{color:var(--color-admin-bar-fg)}
.admin-bar .right{margin-left:auto;display:flex;align-items:center;gap:var(--space-3);color:var(--color-admin-bar-muted)}
.admin-bar .btn{background:transparent;border-color:var(--color-admin-bar-border);color:var(--color-admin-bar-fg)}
.admin-bar .btn:hover{background:rgba(255,255,255,.08);color:var(--color-admin-bar-fg)}
.admin-bar .badge{background:transparent;border-color:var(--color-admin-bar-border);color:var(--color-admin-bar-muted)}

/* ------------------------------------------------------------ utility */
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-5{gap:var(--space-5)}.gap-6{gap:var(--space-6)}
.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}.mt-6{margin-top:var(--space-6)}
.mb-2{margin-bottom:var(--space-2)}.mb-3{margin-bottom:var(--space-3)}.mb-4{margin-bottom:var(--space-4)}.mb-5{margin-bottom:var(--space-5)}.mb-6{margin-bottom:var(--space-6)}
.wrap{flex-wrap:wrap}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hidden{display:none!important}

/* ---------------------------------------------------- desktop converge */
@media (max-width:1300px){
  .grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1120px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page{padding:var(--space-5) var(--space-4) var(--space-10)}
  .toolbar-compact{flex-wrap:wrap}
}