/* 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);
}


/* ------------------------------------------------ GH-102 窄屏导航抽屉 */
/* Gated on html.has-nav-drawer (set by nav-drawer.js, which the platform
   plane never loads) so the drawer can never leak into platform chrome. */
.nav-toggle{display:none}
.nav-backdrop{display:none}
@media (max-width:900px){
  html.has-nav-drawer .side-nav{position:fixed;left:0;top:0;bottom:0;z-index:300;transform:translateX(-100%);transition:transform .2s ease;overflow-y:auto}
  html.has-nav-drawer .side-nav.open{transform:none;box-shadow:var(--shadow-3)}
  html.has-nav-drawer .nav-toggle{display:inline-flex;align-items:center;justify-content:center;position:fixed;top:10px;left:10px;z-index:320;width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text);cursor:pointer;font-size:15px;line-height:1}
  html.has-nav-drawer .nav-backdrop{display:block;position:fixed;inset:0;background:var(--color-overlay);z-index:290}
  html.has-nav-drawer .topbar{padding-left:52px}
}

/* --------------------------------------------------------------- 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}
/* Matches the markup emitted by app/web/sidenav.py::render_sidenav — the
   single shared sidebar every admin page (that uses this stylesheet)
   renders via the `__SIDENAV__` template token. */
.side-nav{width:var(--nav-w);flex-shrink:0;background:var(--color-surface-nav);border-right:1px solid var(--color-border-strong);display:flex;flex-direction:column;overflow:hidden}
.side-nav-brand{display:flex;align-items:center;gap:9px;padding:18px 18px 16px;flex-shrink:0}
.side-nav-logo{width:24px;height:24px;border-radius:var(--radius-md);flex-shrink:0}
.side-nav-title{font-size:14.5px;font-weight:var(--weight-bold);letter-spacing:-.01em;color:var(--color-text)}
.side-nav-scroll{flex:1;overflow-y:auto;padding:0 10px 10px;display:flex;flex-direction:column;gap:3px}
.side-nav-group{font-size:var(--text-2xs);color:var(--color-text-5);letter-spacing:.06em;padding:12px 8px 4px;font-weight:var(--weight-semibold);text-transform:uppercase}
.side-nav-item{padding:7px 10px;border-radius:var(--radius-md);font-size:var(--text-md);cursor:pointer;color:var(--color-text-2);text-decoration:none;display:flex;align-items:center;gap:6px}
.side-nav-item:hover{background:var(--color-surface-hover);text-decoration:none;color:var(--color-text-2)}
.side-nav-item.active{background:var(--color-primary-soft);color:var(--color-primary-hover);font-weight:var(--weight-semibold)}
.side-nav-item.active:hover{background:var(--color-primary-soft)}
.side-nav-item.side-nav-disabled{color:var(--color-text-disabled);cursor:default}
.side-nav-item.side-nav-disabled:hover{background:transparent}
.side-nav-item em{font-style:normal;font-size:10px;color:var(--color-text-5);border:1px solid var(--color-border);border-radius:var(--radius-xs);padding:0 4px;margin-left:auto;flex-shrink:0}
.side-nav-user{border-top:1px solid var(--color-border-strong);padding:12px 16px;display:flex;flex-direction:column;gap:8px;flex-shrink:0;font-size:var(--text-sm);color:var(--color-text-2)}
.side-nav-user-row{display:flex;align-items:center;gap:8px}
.lang-switch{position:relative}
.btn-lang,.btn-logout{height:28px;padding:0 11px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-2);font:inherit;font-size:var(--text-xs);cursor:pointer}
.btn-lang:hover,.btn-logout:hover{background:var(--color-surface-hover)}
.lang-menu{position:absolute;bottom:100%;left:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-2);min-width:7rem;z-index:2}
.lang-option{padding:.4rem .7rem;cursor:pointer;white-space:nowrap;font-size:var(--text-sm)}
.lang-option:hover{background:var(--color-surface-hover)}
.lang-option.active{color:var(--color-primary-hover);font-weight:var(--weight-semibold);background:var(--color-primary-soft)}

.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)}
.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[hidden]{display:none}
.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){
  .side-nav{width:var(--nav-w-sm)}
  .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}
}

/* ================================================================= */
/* Archive Console v2 (review console) components — migrated from     */
/* review_console.html inline styles (GH-100 design convergence).     */
/* Class names stay console-specific; values ride the shared tokens.  */
/* ================================================================= */
.top-bar{height:52px;flex-shrink:0;background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:12px;padding:0 18px;color:var(--color-text)}
.sync-status{white-space:nowrap;color:var(--color-text-4);font-size:var(--text-xs);line-height:var(--leading);font-variant-numeric:tabular-nums}
.sync-status.sync-status-error{color:var(--color-danger-fg)}
.btn-sync-now{height:28px;padding:0 11px;border:1px solid var(--color-primary);border-radius:var(--radius-md);background:var(--color-primary);color:#fff;cursor:pointer;font-size:12px;white-space:nowrap}
.btn-sync-now:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.btn-sync-now:disabled{opacity:.58;cursor:not-allowed}
.search-bar{position:relative;flex:0 1 380px;min-width:0}
.search-bar input{width:100%;height:32px;padding:0 76px 0 12px;border:1px solid var(--color-border-strong);border-radius:8px;background:var(--color-surface-hover);font-size:var(--text-md);outline:none;color:var(--color-text);box-sizing:border-box}
.search-bar input:focus{border-color:var(--color-primary);background:var(--color-surface)}
.search-bar input::placeholder{color:var(--color-text-5)}
.search-bar .enter-hint{position:absolute;right:9px;top:8px;font-size:var(--text-2xs);color:var(--color-text-5);border:1px solid var(--color-border-strong);border-radius:4px;padding:1px 5px;pointer-events:none}
.top-bar-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.btn-toggle{height:28px;padding:0 11px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-2);cursor:pointer;font-size:12px;white-space:nowrap}
.btn-toggle:hover{background:var(--color-surface-hover)}
.btn-toggle.active{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary-hover)}
.btn-lang:hover{background:var(--color-surface-hover)}
.btn-logout:hover{background:var(--color-surface-hover)}
.col{display:flex;flex-direction:column;overflow:hidden;background:var(--color-surface)}
.col-header{padding:.4rem .75rem;font-size:.74rem;font-weight:var(--weight-semibold);color:var(--color-text-2);background:var(--color-surface-header);border-bottom:1px solid var(--color-border);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-body{flex:1;overflow-y:auto}
.empty-state{padding:2.5rem 1rem;text-align:center;color:var(--color-text-5);font-size:.83rem}
.error-msg{margin:.5rem;padding:.6rem .75rem;background:var(--color-danger-bg);color:var(--color-danger-fg);border:1px solid var(--color-danger-border);border-radius:var(--radius-xs);font-size:.8rem}
.scope-bar{padding:10px 12px;border-bottom:1px solid var(--color-border);flex-shrink:0;position:relative}
.scope-btn{width:100%;height:30px;padding:0 10px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface-hover);font-size:var(--text-sm);color:var(--color-text-2);cursor:pointer;display:flex;align-items:center;gap:6px;text-align:left}
.scope-btn:hover{background:var(--color-border)}
.scope-avatar{width:18px;height:18px;border-radius:50%;background:var(--color-primary);color:#fff;font-size:9px;font-weight:var(--weight-bold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.scope-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scope-caret{color:var(--color-text-5);font-size:10px;flex-shrink:0}
.scope-popover{position:absolute;top:100%;left:12px;right:12px;background:var(--color-surface-header);border:1px solid var(--color-neutral-border);border-radius:8px;box-shadow:var(--shadow-3);max-height:320px;overflow:hidden;display:flex;flex-direction:column;z-index:220}
.scope-popover-body{overflow-y:auto;max-height:220px}
.mode-tabs{display:flex;flex-shrink:0;border-bottom:1px solid var(--color-neutral-border)}
.mode-tab{flex:1;padding:.45rem 0;font-size:.83rem;text-align:center;cursor:pointer;border:none;background:transparent;color:var(--color-text-2);border-bottom:2px solid transparent}
.mode-tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:var(--weight-semibold)}
.mode-tab:hover:not(.active){background:var(--color-surface-hover)}
.entity-item{display:flex;align-items:center;gap:.45rem;padding:.45rem .75rem;cursor:pointer;border-bottom:1px solid var(--color-surface-hover);font-size:.83rem}
.entity-item:hover{background:var(--color-surface-hover)}
.entity-item.active{background:var(--color-info-bg);color:var(--color-primary-hover)}
.entity-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:var(--weight-bold);color:#fff;flex-shrink:0}
.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}
.entity-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entity-raw{color:var(--color-text-5);font-weight:400}
.seat-badge{font-size:.62rem;padding:.05rem .35rem;border-radius:2px;margin-left:.3rem;font-weight:var(--weight-semibold);flex-shrink:0}
.seat-badge-active{background:var(--color-success-bg);color:var(--color-success-fg);border:1px solid var(--color-success-border)}
.seat-badge-history{background:var(--color-surface-hover);color:var(--color-text-4);border:1px solid var(--color-neutral-border)}
.conv-type-tabs{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--color-border);flex-shrink:0}
.ctab{height:26px;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:12px;cursor:pointer}
.ctab:hover{background:var(--color-surface-hover)}
.ctab.active{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary-hover)}
.conv-card{padding:.55rem .75rem;border-bottom:1px solid var(--color-border);cursor:pointer;display:flex;align-items:flex-start;gap:.65rem}
.conv-card:hover{background:var(--color-surface-hover)}
.conv-card.active{background:var(--color-info-bg);border-left:3px solid var(--color-primary)}
.conv-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--color-primary);color:#fff;font-size:12px;font-weight:var(--weight-bold);flex-shrink:0;overflow:hidden}
.conv-avatar-group{background:#64748b}
.conv-avatar-group svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.conv-card-body{flex:1;min-width:0}
.conv-top{display:flex;align-items:baseline;gap:.3rem;margin-bottom:.15rem}
.conv-name{font-weight:var(--weight-semibold);font-size:.83rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-time{font-size:.7rem;color:var(--color-text-5);white-space:nowrap;flex-shrink:0}
.conv-secondary{font-size:.7rem;color:var(--color-text-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.15rem}
.conv-snippet{font-size:.78rem;color:var(--color-text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.2rem}
.conv-meta{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.badge-direct{background:var(--color-success-bg);color:var(--color-success-fg);border:1px solid var(--color-success-border)}
.badge-group{background:var(--color-info-bg);color:var(--color-primary-hover);border:1px solid var(--color-info-border)}
.badge-count{background:var(--color-surface-hover);color:var(--color-text-4);border:1px solid var(--color-neutral-border)}
.badge-account{font-size:.68rem;color:var(--color-text-3)}
.badge-revoked{background:var(--color-surface-header);color:var(--color-text-4);border:1px solid var(--color-border);font-style:italic}
/* Search-in-sidebar (replaces the old floating .search-results dropdown) */
.search-results{position:static;background:var(--color-surface);border:none;box-shadow:none;max-height:none;overflow-y:auto;flex:1;display:none}
.search-filters{padding:8px 12px;border-bottom:1px solid var(--color-border);flex-shrink:0}
.sr-section{padding:.3rem 0}
.sr-section-header{padding:.2rem .6rem;font-size:.72rem;font-weight:var(--weight-semibold);color:var(--color-text-4);text-transform:uppercase;letter-spacing:.03em}
.sr-item{padding:.5rem .75rem;cursor:pointer;font-size:.8rem;color:var(--color-text);display:flex;flex-direction:column;gap:.15rem;border-bottom:1px solid var(--color-surface-hover)}
.sr-item:hover{background:var(--color-info-bg)}
.sr-item-main{display:flex;align-items:center;gap:.4rem}
.sr-item-name{font-weight:var(--weight-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-item-raw{font-size:.7rem;color:var(--color-text-5);flex-shrink:0}
.sr-item-snippet{font-size:.75rem;color:var(--color-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}
.sr-item-time{font-size:.7rem;color:var(--color-text-5)}
.sr-item-conv{font-size:.72rem;color:var(--color-text-3)}
.sr-highlight{background:var(--color-warning-bg);color:var(--color-warning-fg);font-weight:var(--weight-semibold);border-radius:2px;padding:0 1px}
.sr-empty,.sr-loading,.sr-error{padding:.6rem;text-align:center;font-size:.8rem;color:var(--color-text-5)}
.sr-error{color:var(--color-danger-fg);background:var(--color-danger-bg)}
.sr-loading{color:var(--color-text-3)}
.sr-divider{height:1px;background:var(--color-border);margin:0}
.chip{height:26px;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);cursor:pointer}
.chip:hover{background:var(--color-surface-hover)}
.chip.active{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary-hover)}
/* ------------------------------------------------------------------ */
/* Middle column: timeline                                              */
/* ------------------------------------------------------------------ */
.col-timeline{flex:1;min-width:0;background:var(--color-neutral-bg);position:relative}
.timeline-header-bar{height:52px;flex-shrink:0;background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;align-items:center;padding:0 18px}
.timeline-title{font-size:var(--text-lg);font-weight:var(--weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timeline-footer{height:40px;flex-shrink:0;background:var(--color-surface);border-top:1px solid var(--color-border);display:flex;align-items:center;padding:0 18px;font-size:12px;color:var(--color-text-4)}
.locator-bar{flex-shrink:0;background:var(--color-primary-soft);border-bottom:1px solid #cfe1fb;padding:8px 18px;display:flex;align-items:center;gap:10px;font-size:var(--text-sm);color:var(--color-primary-hover)}
/* QA fix: at narrow viewports this span would shrink below its text's
   natural width with no white-space rule, and CJK text wraps at every
   character boundary once that happens -- truncate with an ellipsis
   instead, and never let the prev/next/dismiss buttons shrink to make
   room for it. */
.locator-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.locator-actions{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0}
.locator-btn{height:26px;padding:0 10px;border:1px solid var(--color-primary-border);border-radius:var(--radius-sm);background:var(--color-surface);font-size:12px;color:var(--color-primary-hover);cursor:pointer}
.locator-btn:hover{background:var(--color-surface-hover)}
.locator-dismiss{height:26px;padding:0 9px;border:none;background:none;font-size:12px;color:var(--color-info-fg);cursor:pointer}
.timeline{padding:.6rem .75rem;display:flex;flex-direction:column;gap:.65rem}
.tl-msg{display:flex;flex-direction:column;gap:.12rem}
.tl-row{display:flex;flex-direction:column;gap:.12rem;max-width:100%;cursor:pointer;border-radius:8px;padding:2px 4px}
.tl-row-self{align-items:flex-end}
.tl-row-other{align-items:flex-start}
.tl-row.audit-selected{background:var(--color-surface-sunken)}
.tl-meta{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.tl-avatar{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--color-primary);color:#fff;font-size:9px;font-weight:var(--weight-bold);flex-shrink:0}
/* RND-363: delete-selection checkbox and action bar. */
.tl-delete-checkbox{display:inline-flex;align-items:center;flex-shrink:0;margin-right:2px}
.tl-delete-check{width:15px;height:15px;accent-color:var(--color-danger-fg);cursor:pointer}
.delete-bar{display:flex;align-items:center;gap:10px;flex-shrink:0;background:#fff7f7;border-bottom:1px solid var(--color-danger-border);padding:8px 18px;font-size:var(--text-sm);color:var(--color-danger-fg)}
.delete-bar[hidden]{display:none}
.delete-bar-spacer{flex:1}
.delete-selected-count{font-weight:var(--weight-semibold);white-space:nowrap}
.btn-danger:hover:not(:disabled){background:#fff7f7}
.btn-danger:disabled{opacity:.5;cursor:not-allowed}
.delete-result{flex-shrink:0;background:var(--color-success-bg);border-bottom:1px solid var(--color-success-border);color:var(--color-success-fg);padding:8px 18px;font-size:var(--text-sm)}
.delete-result[hidden]{display:none}
.delete-result-recycle{flex-shrink:0;display:inline-block;margin:0 0 0 18px;padding:0 0 8px;font-size:var(--text-sm);color:var(--link-color)}
.delete-result-recycle[hidden]{display:none}
.delete-modal{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center}
.delete-modal[hidden]{display:none}
.delete-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.45)}
.delete-modal-card{position:relative;width:min(420px,90vw);background:var(--color-surface);border-radius:10px;box-shadow:0 12px 40px rgba(15,23,42,.28);padding:18px 20px 16px}
.delete-modal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.delete-modal-hd h3{margin:0;font-size:var(--text-lg)}
.delete-modal-close{border:none;background:none;font-size:20px;line-height:1;color:var(--color-text-4);cursor:pointer;padding:0 4px}
.delete-modal-bd{font-size:var(--text-md);color:var(--color-text-2)}
.delete-confirm-count{font-weight:var(--weight-semibold);margin:0 0 8px}
.delete-confirm-list{margin:0;padding-left:18px;color:var(--color-text-3);line-height:1.7;font-size:var(--text-sm)}
.delete-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.delete-modal-actions .btn-toggle{height:32px;padding:0 16px;font-size:var(--text-md)}
.tl-sender{font-size:.78rem;font-weight:var(--weight-semibold);color:var(--color-text-2)}
.tl-staff{color:var(--color-primary-hover)}
.tl-sender-raw{font-size:.7rem;color:var(--color-text-5);font-weight:400}
.tl-time{font-size:.72rem;color:var(--color-text-5)}
.tl-bare{max-width:520px}
.tl-bubble{background:var(--color-border);border-radius:11px;padding:.35rem .6rem;font-size:.83rem;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-width:520px}
.tl-bubble a{color:var(--link-color)}
.tl-bubble-staff{background:var(--color-info-bg);border-left:3px solid var(--color-primary)}
.tl-bubble-self{background:var(--bubble-self-bg);color:var(--bubble-self-text)}
.tl-bubble-other{background:var(--bubble-other-bg);color:var(--bubble-other-text);border:1px solid var(--color-neutral-border)}
.tl-rcpt{font-size:.7rem;color:var(--color-text-5)}
.tl-audit-line{font-size:var(--text-2xs);color:var(--color-text-disabled);font-family:ui-monospace,monospace;margin-top:4px}
#timeline-top-sentinel{height:1px}
.history-status{margin:0 0 .5rem;padding:.35rem .6rem;text-align:center;font-size:.75rem;border-radius:var(--radius-xs)}
.history-loading{color:var(--color-text-3)}
.history-end{color:var(--color-text-5)}
.history-error{color:var(--color-danger-fg);background:var(--color-danger-bg);border:1px solid var(--color-danger-border)}
.history-retry-btn{margin-left:.5rem;padding:.15rem .6rem;font-size:.72rem;border:1px solid var(--color-border-input);border-radius:var(--radius-xs);background:var(--color-surface);color:var(--color-text-2);cursor:pointer}
.history-retry-btn:hover{background:var(--color-surface-hover)}
.media-placeholder{background:var(--color-surface);border:1px dashed var(--color-border-input);border-radius:var(--radius-lg);padding:.55rem .7rem;font-size:.8rem;color:var(--color-text-3);max-width:290px}
.media-placeholder-title{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-2);margin-bottom:4px}
.media-placeholder-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:var(--weight-bold)}
.media-placeholder-reason{font-size:var(--text-xs);color:var(--color-text-4);line-height:1.6}
.revoke-time{font-size:.7rem;color:var(--color-text-5);margin-top:.2rem}
.media-preview{max-width:280px;max-height:280px;border-radius:8px;display:block}
[data-msgid]{scroll-margin-top:1rem}
[data-msgid].target-active{border-left:3px solid var(--color-primary);background:var(--color-info-bg)}
[data-msgid].target-flash{animation:msgFlash 1.6s ease-out both}
@keyframes msgFlash{0%{box-shadow:0 0 0 0 rgba(22,119,255,.55);border-left-color:var(--color-primary);background:var(--color-warning-bg)}35%{box-shadow:0 0 0 8px rgba(22,119,255,0);border-left-color:var(--color-primary);background:var(--color-info-bg)}100%{box-shadow:0 0 0 0 rgba(22,119,255,0);border-left-color:var(--color-primary);background:var(--color-info-bg)}}
.structured-card{background:var(--color-surface);border:1px solid var(--color-neutral-border);border-radius:var(--radius-lg);padding:.5rem .65rem;font-size:.8rem;max-width:300px;overflow:hidden}
.structured-card-title{font-weight:var(--weight-semibold);margin-bottom:.2rem;word-break:break-word}
.structured-card-desc{color:var(--color-text-2);font-size:.76rem;margin-bottom:.3rem;word-break:break-word}
.structured-card-img{max-width:100%;max-height:180px;border-radius:4px;display:block;margin-bottom:.3rem;object-fit:cover}
.structured-card-meta{color:var(--color-text-4);font-size:.72rem;word-break:break-word}
.structured-card-hostname{color:var(--color-text-4);font-size:.72rem;word-break:break-word;margin-bottom:.2rem}
.structured-card-link-action{display:inline-block;font-size:.76rem;color:var(--link-color);text-decoration:none;border:1px solid currentColor;border-radius:var(--radius-xs);padding:.1rem .5rem}
.structured-card-link-disabled{color:var(--color-text-5);border-color:var(--color-border);cursor:not-allowed}
.structured-card-degraded{color:var(--color-text-3);font-style:italic;font-size:.78rem}
.structured-card-type-label{display:inline-block;font-size:.68rem;color:var(--color-text-4);text-transform:uppercase;letter-spacing:.02em;margin-bottom:.25rem}
.structured-card-news-item{border-top:1px solid var(--color-border);padding-top:.35rem;margin-top:.35rem}
.structured-card-news-item:first-child{border-top:none;padding-top:0;margin-top:0}
.structured-card-markdown ul{margin:.2rem 0 .2rem 1.1rem}
.structured-card-markdown li{margin-bottom:.1rem}
/* Video Channels archive card: modeled on a chat share card (cover, type,
   source, description), but it intentionally has neither a play button nor
   a click-through action. The archive protocol currently cannot prove either
   capability. */
.structured-card-sphfeed{max-width:340px;padding:0;border-color:var(--color-border);box-shadow:0 1px 2px rgba(20,32,52,.04)}
.structured-card-sphfeed .sc-hd{margin:0;border-radius:var(--radius-lg) 9px 0 0;background:var(--color-surface-header)}
.sphfeed-cover{position:relative;height:142px;background:linear-gradient(135deg,#e8f4ff 0%,#f5f0ff 52%,#fff2e7 100%);overflow:hidden}
.sphfeed-cover-img{display:block;width:100%;height:100%;object-fit:cover}
.sphfeed-cover-placeholder{height:100%;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:18px;color:var(--color-text-3);background:radial-gradient(circle at 78% 26%,rgba(22,119,255,.18),transparent 23%),radial-gradient(circle at 18% 80%,rgba(139,92,246,.15),transparent 28%)}
.sphfeed-cover-placeholder span{font-size:12px;font-weight:var(--weight-semibold);letter-spacing:.04em}
.sphfeed-cover-placeholder strong{font-size:24px;color:var(--color-text-2);letter-spacing:.01em}
.sphfeed-cover-chip{position:absolute;right:10px;bottom:10px;padding:3px 8px;border-radius:var(--radius-pill);background:rgba(18,29,42,.7);color:#fff;font-size:11px;line-height:1.2}
.sphfeed-body{padding:11px 12px 12px}
.sphfeed-type-chip{display:inline-block;padding:2px 7px;margin-bottom:7px;border-radius:4px;background:var(--color-info-bg);color:var(--color-info-fg);font-size:11px;line-height:1.35}
.sphfeed-source{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--color-text-2);word-break:break-word;margin-bottom:5px}
.structured-card-sphfeed .structured-card-desc{line-height:1.55;margin-bottom:8px;color:var(--color-text-3)}
.sphfeed-thumbnail-note{font-size:11px;color:var(--color-text-3);margin:2px 0 7px}
.sphfeed-playback-unavailable{display:flex;align-items:center;gap:5px;border-top:1px solid var(--color-border);padding-top:8px;color:var(--color-text-3);font-size:var(--text-xs);line-height:1.45}
.sphfeed-playback-unavailable:before{content:'i';display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border:1px solid currentColor;border-radius:50%;font-size:10px;font-family:serif;font-weight:var(--weight-bold);flex-shrink:0}
/* Unified interactive/business card header — dot + type label + raw msgtype
   badge, shared by todo/vote/collect/meeting/schedule/switch_corp/
   audio_archive/audio_doc (see message-renderers.js's structuredCardHeader). */
.sc-hd{display:flex;align-items:center;gap:8px;padding:9px 12px;margin:-.5rem -.65rem .5rem;background:var(--color-surface-sunken);border-bottom:1px solid var(--color-border);border-radius:var(--radius-lg) 9px 0 0}
.sc-hd-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.sc-hd-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-2)}
.sc-hd-raw{margin-left:auto;font-size:var(--text-2xs);color:var(--color-text-5);font-family:ui-monospace,monospace}
/* Redpacket keeps its own warm-gradient header (spec: distinct from the
   plain-dot card system, mirrors WeCom's native orange bubble). */
.structured-card-redpacket{padding:0;border-color:#f0d9c4}
.redpacket-hd{display:flex;align-items:center;gap:9px;padding:11px 12px;background:linear-gradient(135deg,#f4a765,#e5844d);color:#fff;border-radius:var(--radius-lg) 9px 0 0}
.redpacket-hd-icon{width:22px;height:18px;border-radius:var(--radius-xs);background:rgba(255,255,255,.9);flex-shrink:0}
.redpacket-hd-label{font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.redpacket-hd-raw{margin-left:auto;font-size:10px;color:rgba(255,255,255,.8);font-family:ui-monospace,monospace}
.redpacket-body{padding:10px 12px 11px}
.new-msg-indicator{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-pill);padding:.35rem 1rem;font-size:.78rem;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.new-msg-indicator:hover{background:var(--color-primary-hover)}
.media-video{max-width:320px;max-height:320px;border-radius:8px;display:block;background:#000}
.media-audio{width:260px;display:block}
.media-rich-loading{background:var(--color-surface);border:1px dashed var(--color-border-input);border-radius:var(--radius-lg);padding:.4rem .65rem;font-size:.8rem;color:var(--color-text-4)}
.file-card{display:flex;align-items:center;gap:.5rem;background:var(--color-surface);border:1px solid var(--color-neutral-border);border-radius:var(--radius-lg);padding:.55rem .7rem;max-width:290px;text-decoration:none;color:inherit}
.file-card:hover{background:var(--color-surface-hover)}
.file-card-icon{font-size:1.3rem;flex-shrink:0}
.file-card-info{flex:1;min-width:0}
.file-card-name{font-size:.8rem;font-weight:var(--weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-card-type{font-size:.72rem;color:var(--color-text-4)}
.file-card-meta{font-size:.72rem;color:var(--color-text-4)}
.file-card-download{font-size:.72rem;color:var(--link-color);flex-shrink:0}
.emotion-preview{max-width:150px;max-height:150px;border-radius:8px;display:block;cursor:zoom-in}
/* Chatrecord: in-place expandable transcript instead of overlay-only. */
.chatrecord-card{background:var(--color-surface);border:1px solid var(--color-neutral-border);border-radius:var(--radius-lg);width:340px;max-width:100%;overflow:hidden}
.chatrecord-card-hd{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--color-surface-sunken);border-bottom:1px solid var(--color-border)}
.chatrecord-card-icon{width:16px;height:16px;border-radius:4px;background:var(--color-primary-soft);border:1px solid #cfe1fb;flex-shrink:0}
.chatrecord-card-title{font-weight:var(--weight-semibold);font-size:var(--text-sm);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chatrecord-card-count{font-size:11px;color:var(--color-text-5);flex-shrink:0}
.chatrecord-card-toggle{font-size:var(--text-xs);color:var(--link-color);cursor:pointer;flex-shrink:0;background:none;border:none;font-family:inherit}
.chatrecord-card-rows{padding:4px 0}
.chatrecord-row{display:flex;gap:9px;padding:8px 12px;border-bottom:1px solid var(--color-surface-hover)}
.chatrecord-row:last-child{border-bottom:none}
.chatrecord-row-avatar{width:22px;height:22px;border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:var(--weight-semibold);font-size:9px}
.chatrecord-row-body{flex:1;min-width:0}
.chatrecord-row-meta{display:flex;align-items:baseline;gap:6px;margin-bottom:2px}
.chatrecord-row-sender{font-size:12px;font-weight:var(--weight-semibold);color:var(--color-text-2)}
.chatrecord-row-time{font-size:var(--text-2xs);color:var(--color-text-5)}
.chatrecord-row-kind{font-size:10px;color:var(--color-neutral-fg);background:var(--color-border);border-radius:var(--radius-xs);padding:0 4px;font-family:ui-monospace,monospace}
.chatrecord-row-text{font-size:var(--text-sm);color:var(--color-text-2);line-height:1.6}
.chatrecord-row-nested{border-left:2px solid var(--color-border-strong);padding:2px 0 2px 9px;margin-top:2px}
.chatrecord-viewer-link{font-size:11px;color:var(--link-color);cursor:pointer;padding:6px 12px;border-top:1px solid var(--color-surface-hover);display:block;width:100%;text-align:left;background:none;border-left:none;border-right:none;border-bottom:none;font-family:inherit}
.composite-wrap{display:flex;flex-direction:column;gap:.5rem;max-width:400px}
.composite-node{}
.composite-node-text{white-space:pre-wrap;word-break:break-word}
.composite-node-meta{font-size:.7rem;color:var(--color-text-4);margin-bottom:.1rem}
.composite-unknown{font-size:.78rem;color:var(--color-text-4);font-style:italic}
.panel-tabs{display:flex;flex-shrink:0;border-bottom:1px solid var(--color-border)}
.panel-tab{flex:1;height:40px;border:none;background:none;cursor:pointer;font-size:var(--text-sm);color:var(--color-text-3);border-bottom:2px solid transparent}
.panel-tab.active{color:var(--color-primary-hover);font-weight:var(--weight-semibold);border-bottom-color:var(--color-primary)}
.panel-tab:hover:not(.active){background:var(--color-surface-sunken)}
.panel-section{padding:14px 16px;border-bottom:1px solid var(--color-surface-hover)}
.panel-section-title{font-size:var(--text-xs);color:var(--color-text-4);margin-bottom:8px}
.panel-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.panel-stat{background:var(--color-surface-sunken);border:1px solid var(--color-border);border-radius:8px;padding:9px 10px}
.panel-stat-k{font-size:var(--text-2xs);color:var(--color-text-4);margin-bottom:3px}
.panel-stat-v{font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.panel-participants-note{font-size:11px;color:var(--color-text-5);line-height:1.6;margin-top:6px}
.panel-participant{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:var(--radius-sm)}
.panel-participant-name{font-size:var(--text-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.panel-participant-tag{font-size:10px;padding:1px 5px;border-radius:var(--radius-xs);flex-shrink:0}
.panel-participant-tag-staff{background:var(--color-primary-soft);color:var(--color-primary-hover)}
.panel-participant-tag-contact{background:var(--color-surface-hover);color:var(--color-text-4)}
.panel-audit-preview{background:var(--color-surface-sunken);border:1px solid var(--color-border);border-radius:8px;padding:10px 11px;font-size:var(--text-sm);line-height:1.65;color:var(--color-text-2);max-height:120px;overflow:hidden;word-break:break-word;margin-bottom:12px}
.panel-audit-row{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--color-surface-hover);font-size:var(--text-xs)}
.panel-audit-row:last-child{border-bottom:none}
.panel-audit-k{color:var(--color-text-4);width:92px;flex-shrink:0}
.panel-audit-v{color:var(--color-text-2);font-family:ui-monospace,monospace;flex:1;word-break:break-all}
.panel-audit-actions{margin-top:10px}
.panel-copy-btn{height:28px;padding:0 11px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);font-size:12px;color:var(--color-text-2);cursor:pointer}
.panel-copy-btn:hover{background:var(--color-surface-hover)}

/* GH-101: the review console's chat-surface custom properties (declared on
   the page's inline :root) need dark-mode values; the html[] selector
   outspecifies the page :root regardless of load order. */
html[data-theme="dark"]{--bubble-self-bg:#1c3350;--bubble-self-text:#e6eaf0;--bubble-other-bg:#1a2029;--bubble-other-text:#e6eaf0;--link-color:#66a9ff}

/* #181 favorites UI: timeline favorites components, token-ized on merge. */

/* #181 favorites UI (merged from main's inline additions), token-ized. */
.timeline-header-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0}.timeline-favorites-filter{display:flex;align-items:center;gap:6px;flex-shrink:0;font-size:12px;color:var(--color-text-3);cursor:pointer}.timeline-favorites-filter input{width:16px;height:16px;accent-color:var(--color-primary)}.tl-favorite-select-label{display:none;align-items:center;flex-shrink:0;margin-right:2px}.timeline.favorite-selection-mode .tl-favorite-select-label{display:inline-flex}.tl-favorite-select-check{width:15px;height:15px;accent-color:var(--color-primary);cursor:pointer}.tl-favorite-toggle{border:0;background:transparent;color:#d49a00;font-size:17px;line-height:1;padding:1px 3px;cursor:pointer}.tl-favorite-toggle:disabled{color:#c7c9ce;cursor:not-allowed}.tl-favorite-toggle:focus-visible,.tl-favorite-select-check:focus-visible,.timeline-favorites-filter input:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.tl-favorite-marker{color:#d49a00;font-size:13px;line-height:1}.timeline.favorite-selection-mode .tl-favorite-toggle{display:none}.tl-row.favorite-selected{background:var(--color-primary-soft)}.favorite-selection-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0;background:var(--color-surface-hover);border-bottom:1px solid var(--color-primary-border);padding:8px 18px;font-size:12.5px;color:var(--color-primary-hover)}.favorite-selection-bar[hidden]{display:none}.favorite-selection-count{font-weight:600;white-space:nowrap}.favorite-selection-hint{flex-basis:100%;margin:0;color:var(--color-text-3)}.favorite-selection-bar button:focus-visible,.timeline-header-actions button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.timeline-favorite-feedback{display:flex;align-items:center;gap:12px;min-height:0;padding:0 18px;font-size:12.5px}.timeline-favorite-feedback.has-result{min-height:30px;padding-top:4px;padding-bottom:4px}.timeline-favorite-feedback #timeline-favorite-result{color:var(--color-success-fg)}.timeline-favorite-feedback #timeline-favorite-result.favorite-result-error{color:var(--color-danger-fg)}.timeline-favorite-feedback a{font-weight:600}
.favorite-selection-bar{flex-wrap:wrap;padding:8px 12px}.favorite-selection-bar button{flex:1 1 auto}.favorite-selection-count,.favorite-selection-hint{flex-basis:100%}.timeline-header-bar{padding:0 12px}.timeline-favorites-filter{font-size:11px}