@import url('assets/fontawesome.css');

:root {
  --font-sans: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, monospace;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, .04);
  --shadow-md: 0 12px 30px rgba(15, 23, 42, .10);
  --sidebar-width: 248px;
  --topbar-height: 72px;
  --ease: 160ms ease;
}

body[data-theme="classic"] { --accent:#2563eb; --accent-strong:#1d4ed8; --accent-soft:#eaf1ff; --page:#f3f6fa; --surface:#fff; --surface-2:#f8fafc; --surface-3:#eef3f8; --text:#172033; --muted:#6b778c; --subtle:#9aa5b5; --line:#e6ebf2; --sidebar:#111d33; --sidebar-line:rgba(255,255,255,.09); --sidebar-text:#c6d0e1; --sidebar-muted:#7f8ca4; --success:#0f9f73; --warning:#d98b16; --danger:#d9485f; }
body[data-theme="dark"] { --accent:#60a5fa; --accent-strong:#93c5fd; --accent-soft:rgba(96,165,250,.14); --page:#0f141c; --surface:#19212d; --surface-2:#151c26; --surface-3:#222d3b; --text:#e9eef7; --muted:#9caac0; --subtle:#718098; --line:#2c394b; --sidebar:#0a0f16; --sidebar-line:rgba(255,255,255,.08); --sidebar-text:#c9d4e5; --sidebar-muted:#76859a; --success:#35c18e; --warning:#e6a63c; --danger:#f06a7c; --shadow-sm:0 2px 10px rgba(0,0,0,.16); --shadow-md:0 16px 36px rgba(0,0,0,.32); }
body[data-theme="light"] { --accent:#0f766e; --accent-strong:#0d5e58; --accent-soft:#e3f4f2; --page:#f7f8fa; --surface:#fff; --surface-2:#fbfcfd; --surface-3:#f0f4f5; --text:#18232c; --muted:#6e7b86; --subtle:#a0aab3; --line:#e6eaed; --sidebar:#fff; --sidebar-line:#e7ecef; --sidebar-text:#53616d; --sidebar-muted:#8a969e; --success:#159a72; --warning:#bf7b1c; --danger:#d34a5d; --shadow-sm:0 2px 8px rgba(26,44,54,.05); --shadow-md:0 14px 32px rgba(26,44,54,.10); }

* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; font-family:var(--font-sans); background:var(--page); color:var(--text); }
body { font-size:14px; transition:background var(--ease), color var(--ease); }
button, input, select { font:inherit; }
button { border:0; cursor:pointer; color:inherit; }
button:focus-visible, input:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 26%, transparent); outline-offset:2px; }

.app-shell { min-height:100vh; display:grid; grid-template-columns:var(--sidebar-width) 1fr; }
.sidebar { background:var(--sidebar); border-right:1px solid var(--sidebar-line); color:var(--sidebar-text); padding:20px 14px 16px; display:flex; flex-direction:column; gap:20px; transition:background var(--ease), border-color var(--ease), width var(--ease); }
body[data-theme="light"] .sidebar { color:var(--sidebar-text); }
.brand-block { display:flex; align-items:center; gap:11px; padding:0 10px; }
.brand-mark { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--accent); color:#fff; box-shadow:0 8px 18px color-mix(in srgb, var(--accent) 28%, transparent); }
.brand-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.brand-copy strong { font-size:14px; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-copy span { color:var(--sidebar-muted); font-size:11px; }
.workspace-switcher { width:100%; display:flex; align-items:center; gap:9px; text-align:left; background:color-mix(in srgb, var(--sidebar) 75%, #fff 25%); border:1px solid var(--sidebar-line); border-radius:var(--radius-md); padding:9px; color:var(--sidebar-text); }
.workspace-avatar { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:color-mix(in srgb, var(--accent) 78%, #fff 22%); color:#fff; font-weight:700; }
.workspace-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.workspace-text b { font-size:12px; font-weight:600; }
.workspace-text small { color:var(--sidebar-muted); font-size:10px; }
.workspace-switcher > i { color:var(--sidebar-muted); font-size:11px; }
.sidebar-nav { flex:1; display:flex; flex-direction:column; gap:17px; overflow:auto; scrollbar-width:none; }
.sidebar-nav::-webkit-scrollbar { display:none; }
.nav-group { display:flex; flex-direction:column; gap:3px; }
.nav-group-label { padding:0 10px 5px; color:var(--sidebar-muted); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.nav-item { position:relative; width:100%; display:flex; align-items:center; gap:11px; min-height:36px; border-radius:8px; background:transparent; color:var(--sidebar-text); padding:0 11px; text-align:left; transition:background var(--ease), color var(--ease); }
.nav-item i { width:16px; text-align:center; color:var(--sidebar-muted); font-size:13px; }
.nav-item span { flex:1; font-size:12px; }
.nav-item em { font-style:normal; font-size:10px; color:var(--sidebar-muted); background:color-mix(in srgb, var(--sidebar) 65%, #fff 35%); border-radius:10px; min-width:18px; height:18px; display:grid; place-items:center; }
.nav-item em.dot { width:6px; min-width:6px; height:6px; padding:0; border-radius:50%; background:var(--warning); }
.nav-item:hover { background:color-mix(in srgb, var(--sidebar) 68%, #fff 32%); }
.nav-item.active { color:#fff; background:color-mix(in srgb, var(--accent) 74%, #122039 26%); box-shadow:inset 3px 0 0 color-mix(in srgb, var(--accent) 70%, #fff 30%); }
.nav-item.active i { color:#fff; }
body[data-theme="light"] .nav-item.active { color:#fff; }
.sidebar-bottom { display:flex; flex-direction:column; gap:9px; }
.sidebar-divider { height:1px; background:var(--sidebar-line); margin:0 4px; }
.sidebar-user { display:flex; align-items:center; gap:9px; padding:5px 6px; }
.user-avatar { width:29px; height:29px; display:grid; place-items:center; background:#cbe3de; color:#1e655d; border-radius:9px; font-weight:700; }
.sidebar-user > div:nth-child(2) { min-width:0; display:flex; flex:1; flex-direction:column; gap:2px; }
.sidebar-user b { font-size:11px; font-weight:600; }
.sidebar-user small { color:var(--sidebar-muted); font-size:10px; }

.main-area { min-width:0; background:var(--page); transition:background var(--ease); }
.topbar { height:var(--topbar-height); padding:0 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--surface) 91%, transparent); backdrop-filter:blur(10px); position:sticky; top:0; z-index:10; }
.breadcrumb { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:12px; }
.breadcrumb i { font-size:9px; color:var(--subtle); }
.breadcrumb b { color:var(--text); font-weight:600; }
.topbar-actions { display:flex; align-items:center; gap:12px; }
.global-search { width:250px; height:34px; border:1px solid var(--line); border-radius:9px; background:var(--surface); display:flex; align-items:center; gap:8px; padding:0 10px; color:var(--subtle); box-shadow:var(--shadow-sm); }
.global-search input { border:0; outline:0; min-width:0; flex:1; background:transparent; color:var(--text); font-size:12px; }
.global-search kbd { font:10px var(--font-mono); border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:1px 4px; color:var(--subtle); }
.icon-button { width:32px; height:32px; display:grid; place-items:center; border-radius:8px; background:transparent; color:var(--muted); transition:background var(--ease), color var(--ease); }
.icon-button:hover { background:var(--surface-3); color:var(--text); }
.with-indicator { position:relative; }
.with-indicator span { position:absolute; width:6px; height:6px; background:var(--danger); border:2px solid var(--surface); border-radius:50%; top:6px; right:6px; }
.quick-add, .button { height:34px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:8px; padding:0 13px; font-size:12px; font-weight:600; text-decoration:none; transition:transform var(--ease), background var(--ease), border-color var(--ease); }
.quick-add, .button.primary { color:#fff; background:var(--accent); box-shadow:0 5px 12px color-mix(in srgb, var(--accent) 18%, transparent); }
.quick-add:hover, .button.primary:hover { background:var(--accent-strong); transform:translateY(-1px); }
.button.ghost { background:transparent; border:1px solid var(--line); color:var(--muted); }
.button.ghost:hover { background:var(--surface-3); color:var(--text); }
.button.soft { background:var(--accent-soft); color:var(--accent-strong); }
.button.danger { background:color-mix(in srgb, var(--danger) 12%, transparent); color:var(--danger); }

.page-content { max-width:1440px; margin:0 auto; padding:32px; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.page-heading h1 { margin:0; font-size:25px; letter-spacing:-.02em; font-weight:720; }
.page-heading p { margin:7px 0 0; color:var(--muted); font-size:12px; }
.heading-actions { display:flex; gap:9px; align-items:center; }
.eyebrow { display:block; color:var(--accent-strong); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:7px; }
.section-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.section-title h2, .section-title h3 { margin:0; font-size:14px; letter-spacing:-.01em; }
.section-title > span { color:var(--muted); font-size:11px; }
.grid { display:grid; gap:16px; }
.grid.metrics { grid-template-columns:repeat(4, minmax(0, 1fr)); margin-bottom:18px; }
.grid.dashboard-main { grid-template-columns:minmax(0, 1.65fr) minmax(290px, .85fr); align-items:start; }
.surface { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.metric-card { padding:17px 18px; min-height:118px; position:relative; overflow:hidden; }
.metric-card::after { content:""; position:absolute; width:72px; height:72px; border-radius:50%; right:-25px; bottom:-28px; background:var(--accent-soft); }
.metric-top { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:11px; }
.metric-icon { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); }
.metric-number { font-size:25px; font-weight:720; letter-spacing:-.03em; margin:15px 0 7px; }
.metric-foot { color:var(--muted); font-size:11px; }
.metric-foot strong { color:var(--success); font-weight:600; }
.metric-foot .neutral { color:var(--muted); }
.panel { padding:18px; }
.pipeline { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.pipeline-step { border:1px solid var(--line); border-radius:var(--radius-md); padding:13px 13px 12px; background:var(--surface-2); }
.pipeline-step > div:first-child { display:flex; justify-content:space-between; align-items:center; }
.pipeline-step b { font-size:11px; }
.pipeline-step span { font:11px var(--font-mono); color:var(--accent-strong); }
.progress { height:5px; background:var(--surface-3); border-radius:99px; overflow:hidden; margin:15px 0 8px; }
.progress i { display:block; height:100%; background:var(--accent); border-radius:inherit; }
.pipeline-step small { color:var(--muted); font-size:10px; }
.activity-list { display:flex; flex-direction:column; }
.activity { display:flex; gap:11px; padding:13px 0; border-bottom:1px solid var(--line); }
.activity:last-child { border-bottom:0; padding-bottom:0; }
.activity-avatar { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:var(--accent-soft); color:var(--accent-strong); flex:0 0 auto; }
.activity-copy { min-width:0; flex:1; }
.activity-copy b { display:block; font-size:11px; font-weight:600; line-height:1.45; }
.activity-copy p { margin:4px 0 0; color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.activity-time { color:var(--subtle); font:10px var(--font-mono); }
.asset-table { width:100%; border-collapse:collapse; }
.asset-table th { color:var(--muted); font-size:10px; font-weight:600; text-align:left; padding:0 10px 11px; border-bottom:1px solid var(--line); }
.asset-table td { padding:11px 10px; border-bottom:1px solid var(--line); font-size:11px; vertical-align:middle; }
.asset-table tr:last-child td { border-bottom:0; }
.asset-cell { display:flex; align-items:center; gap:10px; min-width:210px; }
.asset-mini { width:48px; height:32px; border-radius:5px; object-fit:cover; background:var(--surface-3); }
.asset-cell b { font-size:11px; font-weight:600; display:block; }
.asset-cell small { display:block; color:var(--muted); font-size:10px; margin-top:3px; }
.status { display:inline-flex; align-items:center; gap:5px; border-radius:99px; padding:4px 8px; font-size:10px; white-space:nowrap; }
.status::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.status.success { color:var(--success); background:color-mix(in srgb, var(--success) 10%, transparent); }
.status.warning { color:var(--warning); background:color-mix(in srgb, var(--warning) 11%, transparent); }
.status.neutral { color:var(--muted); background:var(--surface-3); }
.status.danger { color:var(--danger); background:color-mix(in srgb, var(--danger) 10%, transparent); }
.tag { display:inline-flex; align-items:center; gap:4px; padding:4px 7px; border-radius:5px; background:var(--surface-3); color:var(--muted); font-size:10px; }
.tag.accent { background:var(--accent-soft); color:var(--accent-strong); }
.task-card { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.task-card:last-child { border-bottom:0; padding-bottom:0; }
.task-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; color:var(--accent); background:var(--accent-soft); }
.task-copy { flex:1; min-width:0; }
.task-copy b { font-size:11px; font-weight:600; display:block; }
.task-copy span { color:var(--muted); font-size:10px; display:block; margin-top:3px; }
.task-meta { text-align:right; color:var(--muted); font:10px var(--font-mono); }

.toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.toolbar-search { flex:1; min-width:220px; height:36px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:8px; padding:0 11px; background:var(--surface); color:var(--subtle); }
.toolbar-search input { border:0; outline:0; background:transparent; color:var(--text); flex:1; min-width:0; font-size:12px; }
.select { height:36px; border:1px solid var(--line); border-radius:8px; padding:0 10px; background:var(--surface); color:var(--muted); font-size:11px; }
.segmented { display:flex; padding:3px; border-radius:8px; background:var(--surface-3); gap:2px; }
.segmented button { height:29px; padding:0 10px; border-radius:6px; background:transparent; color:var(--muted); font-size:11px; }
.segmented button.active { background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.asset-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.asset-card { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease); }
.asset-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb, var(--accent) 32%, var(--line)); }
.asset-thumb { height:150px; position:relative; overflow:hidden; background:var(--surface-3); }
.asset-thumb img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.85); }
.asset-thumb::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.28); pointer-events:none; }
.asset-type { position:absolute; top:9px; left:9px; z-index:1; padding:4px 7px; border-radius:5px; color:#fff; background:rgba(15,23,42,.65); font-size:10px; }
.asset-duration { position:absolute; bottom:9px; right:9px; z-index:1; color:#fff; font:10px var(--font-mono); }
.asset-card-body { padding:12px; }
.asset-card-body h3 {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  word-break: break-all !important;
}
.asset-card-body p { margin:5px 0 10px; color:var(--muted); font-size:10px; }
.asset-card-footer { display:flex; align-items:center; justify-content:space-between; }
.asset-card-footer small { color:var(--subtle); font-size:10px; }
.card-actions { display:flex; gap:3px; }

.split-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:16px; }
.side-list { padding:12px; }
.side-list h3 { margin:2px 8px 10px; font-size:12px; }
.queue-item { padding:10px 9px; border-radius:8px; cursor:pointer; display:flex; align-items:center; gap:8px; color:var(--muted); }
.queue-item:hover, .queue-item.active { background:var(--accent-soft); color:var(--accent-strong); }
.queue-item b { flex:1; font-size:11px; font-weight:600; }
.queue-item span { font:10px var(--font-mono); }

.wide { width:100%; }
.ingest-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr); gap:16px; }
.upload-drop { min-height:284px; border:1px dashed color-mix(in srgb, var(--accent) 46%, var(--line)); border-radius:var(--radius-lg); background:var(--accent-soft); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px; }
.upload-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:var(--surface); color:var(--accent); box-shadow:var(--shadow-sm); font-size:21px; margin-bottom:14px; }
.upload-drop h2 { margin:0; font-size:16px; }
.upload-drop p { margin:7px 0 18px; color:var(--muted); font-size:11px; }
.upload-actions { display:flex; gap:8px; }
.upload-drop > small { display:block; margin-top:17px; color:var(--muted); font-size:10px; }
.ingest-options { display:flex; flex-direction:column; gap:13px; }
.ingest-options .field { gap:6px; }
.ingest-options .setting-row { margin:0; padding:11px 0; }
.batch-list { display:flex; flex-direction:column; }
.batch-row { display:flex; align-items:center; gap:11px; border-bottom:1px solid var(--line); padding:12px 0; }
.batch-row:last-child { border-bottom:0; }
.batch-icon { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; color:var(--accent); background:var(--accent-soft); flex:0 0 auto; }
.batch-icon.success { color:var(--success); background:color-mix(in srgb,var(--success) 10%,transparent); }
.batch-icon.warning { color:var(--warning); background:color-mix(in srgb,var(--warning) 11%,transparent); }
.batch-row > div:nth-child(2) { flex:1; min-width:0; }
.batch-row b { display:block; font-size:11px; }
.batch-row small { display:block; color:var(--muted); font-size:10px; margin-top:3px; }

.detail-tab { background:transparent; color:var(--muted); font-size:11px; padding:0 1px 10px; margin-right:15px; position:relative; }
.detail-tab.active { color:var(--accent-strong); font-weight:650; }
.detail-tab.active::after { content:""; position:absolute; height:2px; left:0; right:0; bottom:-1px; border-radius:99px; background:var(--accent); }
.transcript-list { display:flex; flex-direction:column; gap:4px; }
.transcript-line { display:grid; grid-template-columns:48px 1fr 16px; align-items:start; gap:8px; width:100%; padding:9px 8px; text-align:left; border-radius:7px; background:transparent; color:var(--text); }
.transcript-line:hover { background:var(--accent-soft); }
.transcript-line time { color:var(--accent-strong); font:10px var(--font-mono); padding-top:2px; }
.transcript-line span { font-size:11px; line-height:1.5; }
.transcript-line i { color:var(--subtle); font-size:10px; padding-top:3px; }
.transcript-actions { display:flex; gap:8px; margin-top:16px; border-top:1px solid var(--line); padding-top:15px; }
.analysis-summary { display:flex; gap:7px; margin-bottom:14px; }
.person-hit-list { display:flex; flex-direction:column; gap:9px; }
.person-hit { display:flex; align-items:center; gap:10px; padding:8px; border:1px solid var(--line); border-radius:8px; }
.person-hit img { width:42px; height:34px; object-fit:cover; border-radius:5px; }
.person-hit > div { flex:1; }
.person-hit b { display:block; font-size:11px; }
.person-hit small { display:block; color:var(--muted); margin-top:3px; font-size:10px; }
.keyframe-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-bottom:12px; }
.keyframe-card { position:relative; text-align:left; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); overflow:hidden; padding:0 0 8px; }
.keyframe-card.selected { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.keyframe-card img { display:block; width:100%; height:74px; object-fit:cover; }
.keyframe-card span, .keyframe-card b { display:block; padding:0 8px; }
.keyframe-card span { color:var(--accent-strong); font:10px var(--font-mono); margin-top:6px; }
.keyframe-card b { font-size:10px; margin-top:3px; }
.keyframe-card em { position:absolute; top:6px; right:6px; font-style:normal; font-size:9px; color:#fff; background:var(--accent); border-radius:4px; padding:3px 4px; }
.analysis-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.analysis-card { padding:11px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); }
.analysis-card span, .analysis-card small { display:block; color:var(--muted); font-size:10px; }
.analysis-card b { display:block; margin:8px 0 4px; font-size:18px; letter-spacing:-.03em; }
.analysis-note, .detail-note { display:flex; align-items:center; gap:7px; padding:10px 11px; margin-top:15px; color:var(--muted); background:var(--surface-2); border-radius:7px; font-size:10px; line-height:1.5; }
.detail-lower { margin-top:16px; }
.catalog-tree { display:flex; gap:10px; padding:4px 0 8px; overflow:auto; }
.catalog-node { position:relative; min-width:180px; border:1px solid var(--line); border-radius:8px; padding:11px; background:var(--surface-2); }
.catalog-node:not(:last-child)::after { content:""; position:absolute; right:-11px; top:50%; width:11px; height:1px; background:var(--line); }
.catalog-node.root { border-color:color-mix(in srgb,var(--accent) 38%,var(--line)); background:var(--accent-soft); }
.catalog-node b, .catalog-node span, .catalog-node em { display:block; }
.catalog-node b { color:var(--accent-strong); font-size:10px; }
.catalog-node span { font-size:11px; margin-top:6px; }
.catalog-node em { color:var(--muted); font:10px var(--font-mono); margin-top:8px; font-style:normal; }
.detail-footer-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.detail-tags { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
.detail-tags > span:first-child { margin-right:3px; font-weight:700; color:var(--text); }

.filter-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.filter-tabs button { position:relative; padding:0 13px 11px; background:transparent; color:var(--muted); font-size:11px; }
.filter-tabs button.active { color:var(--accent-strong); font-weight:650; }
.filter-tabs button.active::after { content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; border-radius:99px; background:var(--accent); }
.filter-tabs em { font-style:normal; font-size:9px; background:var(--surface-3); border-radius:9px; padding:2px 5px; margin-left:4px; }
.people-panel { min-height:360px; }
.face-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; color:var(--muted); font-size:11px; }
.person-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.person-card { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); }
.person-card > img { width:100%; height:126px; display:block; object-fit:cover; }
.person-card-body { padding:12px; }
.person-card-title { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.person-card h3 { margin:0; font-size:12px; }
.person-card p { margin:6px 0 4px; color:var(--muted); font-size:10px; }
.person-card small { display:block; color:var(--subtle); font-size:10px; min-height:26px; line-height:1.4; }
.person-card .card-actions { margin-top:10px; align-items:center; }
.person-card .card-actions .button { font-size:10px; height:29px; padding:0 9px; }
.sensitive-card { border-color:color-mix(in srgb,var(--danger) 30%,var(--line)); }
.sensitive-banner { padding:11px 13px; display:flex; align-items:center; gap:8px; background:color-mix(in srgb,var(--warning) 10%,transparent); color:var(--warning); border-radius:8px; margin-bottom:14px; font-size:11px; }

.work-grid { grid-template-columns:1.2fr .8fr; margin-bottom:16px; }
.work-row { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }
.work-row:last-child { border-bottom:0; }
.work-row img { width:54px; height:36px; object-fit:cover; border-radius:5px; }
.work-row > div { flex:1; min-width:0; }
.work-row b, .work-row small { display:block; }
.work-row b { font-size:11px; }
.work-row small { color:var(--muted); font-size:10px; margin-top:3px; }
.work-row.compact > i { width:28px; color:var(--accent); text-align:center; }
.work-row .button { height:28px; font-size:10px; padding:0 9px; }
.topic-grid, .publish-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.topic-card { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
.topic-cover { height:150px; position:relative; background:var(--surface-3); }
.topic-cover img { width:100%; height:100%; object-fit:cover; }
.topic-cover span { position:absolute; top:10px; left:10px; padding:4px 7px; border-radius:5px; color:#fff; background:rgba(15,23,42,.65); font-size:10px; }
.topic-body { padding:14px; }
.topic-body h3 { margin:0; font-size:13px; }
.topic-body p { color:var(--muted); font-size:10px; line-height:1.5; min-height:31px; }
.topic-meta { display:flex; gap:8px; flex-wrap:wrap; color:var(--subtle); font-size:10px; }
.selection-list { display:flex; flex-direction:column; }
.selection-row { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }
.selection-row input { accent-color:var(--accent); }
.selection-row img { width:58px; height:38px; object-fit:cover; border-radius:5px; }
.selection-copy { flex:1; min-width:0; }
.selection-copy b, .selection-copy small { display:block; }
.selection-copy b { font-size:11px; }
.selection-copy small { color:var(--muted); font-size:10px; margin-top:3px; }
.selection-footer { display:flex; align-items:center; gap:15px; padding-top:14px; color:var(--muted); font-size:11px; }
.selection-footer label { flex:1; display:flex; align-items:center; gap:8px; }
.selection-footer input { height:31px; flex:1; min-width:100px; border:1px solid var(--line); border-radius:7px; padding:0 9px; background:var(--surface-2); color:var(--text); font-size:10px; }
.channel-row { display:flex; align-items:center; gap:11px; padding:13px 0; border-bottom:1px solid var(--line); }
.channel-row:last-child { border-bottom:0; }
.channel-icon { width:31px; height:31px; display:grid; place-items:center; background:var(--accent-soft); border-radius:8px; color:var(--accent-strong); flex:0 0 auto; }
.channel-row > div:nth-child(2) { flex:1; }
.channel-row b, .channel-row small { display:block; }
.channel-row b { font-size:11px; }
.channel-row small { color:var(--muted); font-size:10px; margin-top:3px; }
.publish-grid { grid-template-columns:1fr 1fr; }
.analytics-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:16px; margin-top:16px; }
.bar-chart { height:220px; display:flex; align-items:flex-end; gap:11px; padding:16px 5px 0; border-bottom:1px solid var(--line); }
.bar-col { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:7px; }
.bar-col i { display:block; width:100%; min-height:4px; border-radius:5px 5px 0 0; background:var(--accent); }
.bar-col span { color:var(--muted); font:9px var(--font-mono); }
.hotword-list > div { position:relative; display:flex; align-items:center; gap:8px; padding:14px 0; border-bottom:1px solid var(--line); }
.hotword-list > div:last-child { border-bottom:0; }
.hotword-list b { font-size:11px; flex:1; }
.hotword-list span { color:var(--muted); font:10px var(--font-mono); }
.hotword-list i { position:absolute; left:0; bottom:3px; height:2px; border-radius:99px; background:var(--accent-soft); }
.inline-progress { width:92px; height:5px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.inline-progress i { display:block; height:100%; border-radius:inherit; background:var(--accent); }
.inline-progress.danger i { background:var(--danger); }

.search-query-hints { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:15px; color:var(--muted); font-size:10px; }
.search-query-hints button { padding:6px 8px; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; color:var(--muted); font-size:10px; }
.face-search-box, .image-search-box, .audio-search-box, .qa-panel { display:flex; align-items:center; gap:16px; padding:14px; margin-top:15px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); }
.face-input { display:flex; align-items:center; gap:8px; flex:1; }
.face-placeholder { flex:1; display:flex; align-items:center; gap:8px; height:34px; color:var(--muted); border:1px dashed var(--line); border-radius:7px; padding:0 10px; font-size:10px; }
.face-match { display:flex; flex-direction:column; gap:4px; min-width:190px; }
.face-match span, .face-match small { color:var(--muted); font-size:10px; }
.face-match b { font-size:11px; }
.image-query-tile { width:128px; flex:0 0 auto; }
.image-query-tile img { display:block; width:100%; height:75px; object-fit:cover; border-radius:6px; margin-bottom:7px; }
.image-query-tile .button { width:100%; font-size:10px; }
.image-search-copy { flex:1; }
.image-search-copy h3 { margin:0; font-size:12px; }
.image-search-copy p { margin:6px 0 0; color:var(--muted); font-size:10px; line-height:1.5; }
.audio-search-box { align-items:center; }
.waveform { flex:1; height:42px; display:flex; align-items:center; gap:3px; padding:0 4px; }
.waveform i { flex:1; min-width:2px; max-width:5px; background:var(--accent); border-radius:99px; opacity:.75; }
.audio-search-box > div:nth-child(2) { min-width:150px; }
.audio-search-box b, .audio-search-box small { display:block; }
.audio-search-box b { font-size:11px; }
.audio-search-box small { color:var(--muted); font-size:10px; margin-top:4px; }
.graph-canvas { height:290px; position:relative; overflow:hidden; margin-top:15px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); }
.graph-toolbar { position:absolute; top:11px; left:11px; right:11px; display:flex; align-items:center; gap:7px; z-index:2; }
.graph-toolbar span { margin-left:auto; color:var(--muted); font-size:10px; }
.graph-lines { position:absolute; inset:0; }
.edge { position:absolute; height:1px; background:color-mix(in srgb,var(--accent) 42%,var(--line)); transform-origin:left center; }
.edge-a { width:34%; left:28%; top:35%; transform:rotate(-17deg); }
.edge-b { width:38%; left:41%; top:40%; transform:rotate(14deg); }
.edge-c { width:33%; left:35%; top:63%; transform:rotate(-22deg); }
.graph-node { position:absolute; min-width:108px; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface); box-shadow:var(--shadow-sm); }
.graph-node small, .graph-node b { display:block; }
.graph-node small { color:var(--accent-strong); font-size:9px; }
.graph-node b { font-size:11px; margin-top:4px; }
.graph-node.person { border-color:color-mix(in srgb,#f59e0b 45%,var(--line)); }
.graph-node.event { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.graph-node.place { border-color:color-mix(in srgb,var(--success) 45%,var(--line)); }
.graph-node.asset { border-color:color-mix(in srgb,#8b5cf6 45%,var(--line)); }
.qa-panel { align-items:flex-start; margin-top:12px; }
.qa-panel > div:first-child { min-width:160px; }
.qa-panel h3 { margin:0; font-size:12px; }
.qa-answer { flex:1; padding-left:15px; border-left:1px solid var(--line); }
.qa-answer b { font-size:11px; }
.qa-answer p { color:var(--muted); font-size:10px; line-height:1.5; margin:6px 0 10px; }
.detail-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(310px,.7fr); gap:16px; }
.video-stage { min-height:350px; position:relative; border-radius:var(--radius-md); overflow:hidden; background:#0d1422; }
.video-stage img { width:100%; height:100%; min-height:350px; object-fit:cover; opacity:.78; }
.video-stage video { width:100%; height:100%; min-height:350px; display:block; object-fit:cover; opacity:.78; background:#0d1422; }
.video-stage.document-view { min-height:350px; background:var(--surface-2); }
.video-stage.document-view iframe { width:100%; height:430px; display:block; border:0; background:#fff; }
.document-preview-bar { position:absolute; left:0; right:0; bottom:0; min-height:34px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; background:rgba(15,23,42,.82); color:#fff; font-size:11px; }
.document-preview-bar a { color:#d7f5e8; text-decoration:none; }
.video-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:18px; background:rgba(5,12,24,.54); color:#fff; }
.video-title { display:flex; justify-content:space-between; align-items:flex-start; }
.video-title h2 { font-size:16px; margin:0; }
.video-title span { font:10px var(--font-mono); background:rgba(0,0,0,.35); padding:5px 7px; border-radius:5px; }
.video-controls { display:flex; align-items:center; gap:12px; }
.play-button { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#172033; }
.video-controls .line { height:3px; background:rgba(255,255,255,.35); flex:1; border-radius:99px; }
.video-controls .line i { display:block; width:38%; height:100%; background:var(--accent); border-radius:inherit; }
.timecode { font:10px var(--font-mono); }
.timeline { padding:14px 2px 0; }
.timeline-track { position:relative; height:7px; background:var(--surface-3); border-radius:99px; }
.timeline-track i { display:block; width:56%; height:100%; background:var(--accent); border-radius:inherit; }
.timeline-ticks { display:flex; justify-content:space-between; color:var(--subtle); font:9px var(--font-mono); margin-top:7px; }
.detail-panel { padding:17px; }
.detail-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:0 -17px 15px; padding:0 17px; }
.detail-tabs button { background:transparent; padding:0 2px 10px; margin-right:14px; color:var(--muted); font-size:11px; position:relative; }
.detail-tabs button.active { color:var(--accent-strong); font-weight:650; }
.detail-tabs button.active::after { content:""; height:2px; background:var(--accent); position:absolute; left:0; right:0; bottom:-1px; border-radius:99px; }
.meta-list { display:flex; flex-direction:column; gap:12px; }
.meta-row { display:flex; justify-content:space-between; gap:15px; font-size:11px; }
.meta-row span { color:var(--muted); }
.meta-row b { font-weight:600; text-align:right; }
.chip-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:15px; }

.search-hero { padding:23px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); margin-bottom:16px; }
.search-hero h1 { margin:0; font-size:21px; }
.search-hero p { margin:7px 0 17px; color:var(--muted); font-size:12px; }
.search-box-large { display:flex; align-items:center; gap:11px; border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow:0 0 0 4px var(--accent-soft); border-radius:10px; padding:0 13px; height:46px; background:var(--surface); }
.search-box-large i { color:var(--accent); }
.search-box-large input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font-size:13px; }
.search-box-large button { height:32px; padding:0 15px; border-radius:7px; background:var(--accent); color:#fff; font-size:11px; font-weight:600; }
.search-modes { display:flex; gap:6px; margin-top:15px; }
.search-mode { padding:7px 10px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:var(--surface-2); font-size:10px; }
.search-mode.active { color:var(--accent-strong); background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 24%, var(--line)); }
.result-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:13px; }
.result-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.result-card .asset-thumb { height:112px; }
.result-card .asset-card-body { padding:10px; }
.result-card h3 { font-size:11px; }

.settings-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:18px; }
.settings-nav { padding:10px; height:max-content; }
.settings-nav button { width:100%; text-align:left; background:transparent; border-radius:7px; padding:10px; color:var(--muted); font-size:11px; }
.settings-nav button.active, .settings-nav button:hover { background:var(--accent-soft); color:var(--accent-strong); }
.settings-main { display:flex; flex-direction:column; gap:16px; }
.settings-panel { padding:20px; }
.theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.theme-card { padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); cursor:pointer; transition:transform var(--ease), border-color var(--ease), box-shadow var(--ease); }
.theme-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.theme-card.active { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.theme-preview { height:76px; border-radius:7px; overflow:hidden; display:grid; grid-template-columns:27% 73%; border:1px solid rgba(0,0,0,.08); }
.theme-preview .preview-side { background:var(--preview-side); padding:9px 6px; display:flex; flex-direction:column; gap:6px; }
.theme-preview .preview-side i { width:60%; height:4px; border-radius:2px; background:var(--preview-line); opacity:.9; }
.theme-preview .preview-main { padding:9px; background:var(--preview-bg); display:flex; flex-direction:column; gap:7px; }
.theme-preview .preview-main i { width:55%; height:5px; border-radius:2px; background:var(--preview-text); opacity:.8; }
.theme-preview .preview-main span { flex:1; display:block; border-radius:4px; background:var(--preview-card); border:1px solid var(--preview-line); }
.theme-card strong { display:block; margin-top:9px; font-size:11px; }
.theme-card small { display:block; color:var(--muted); margin-top:4px; font-size:10px; }
.theme-classic { --preview-side:#13223c; --preview-bg:#f2f5f9; --preview-card:#fff; --preview-line:#dce5f2; --preview-text:#2563eb; }
.theme-dark { --preview-side:#080d14; --preview-bg:#111923; --preview-card:#1c2836; --preview-line:#354456; --preview-text:#60a5fa; }
.theme-light { --preview-side:#fff; --preview-bg:#f7f8fa; --preview-card:#fff; --preview-line:#dce7e6; --preview-text:#0f766e; }
.layout-options { display:flex; flex-wrap:wrap; gap:10px; }
.layout-option { flex:1 1 150px; min-width:150px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); padding:10px; text-align:left; cursor:pointer; }
.layout-option.active { border-color:var(--accent); background:var(--accent-soft); }
.layout-option b { display:block; font-size:11px; }
.layout-option span { display:block; color:var(--muted); font-size:10px; margin-top:4px; }
.field-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field span { color:var(--muted); font-size:11px; }
.field input, .field select { width:100%; height:36px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); color:var(--text); padding:0 10px; font-size:11px; }
.setting-divider { height:1px; background:var(--line); margin:17px 0; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); }
.setting-row:last-child { border-bottom:0; }
.setting-row b { display:block; font-size:11px; }
.setting-row small { display:block; color:var(--muted); font-size:10px; margin-top:4px; }
.switch { width:36px; height:20px; border-radius:99px; background:var(--surface-3); padding:2px; cursor:pointer; }
.switch i { display:block; width:16px; height:16px; border-radius:50%; background:var(--subtle); transition:transform var(--ease), background var(--ease); }
.switch.on { background:var(--accent); }
.switch.on i { background:#fff; transform:translateX(16px); }

.empty { padding:40px; text-align:center; color:var(--muted); }
.empty i { display:block; font-size:24px; color:var(--subtle); margin-bottom:10px; }
.toast { position:fixed; right:28px; bottom:26px; z-index:50; padding:10px 14px; border-radius:8px; background:var(--text); color:var(--surface); box-shadow:var(--shadow-md); font-size:12px; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity var(--ease), transform var(--ease); }
.toast.show { opacity:1; transform:translateY(0); }
.modal-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.46); z-index:30; backdrop-filter:blur(3px); }
.modal { position:fixed; z-index:31; width:min(650px, calc(100vw - 32px)); max-height:calc(100vh - 40px); overflow:auto; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:16px; background:var(--surface); border:1px solid var(--line); box-shadow:0 24px 80px rgba(0,0,0,.24); }
.modal-head, .modal-foot { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
.modal-head h2 { margin:0; font-size:17px; }
.modal-foot { justify-content:flex-end; gap:9px; border-top:1px solid var(--line); border-bottom:0; }
.modal-body { padding:20px; }
.modal-section { margin-bottom:22px; }
.modal-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }

body[data-density="compact"] .page-content { padding:24px; }
body[data-density="compact"] .panel { padding:14px; }
body[data-density="compact"] .nav-item { min-height:32px; }
body[data-density="compact"] .asset-table td { padding-top:8px; padding-bottom:8px; }
body[data-density="compact"] .metric-card { min-height:103px; padding:14px; }

body[data-layout="topbar"] .app-shell { grid-template-columns:1fr; grid-template-rows:68px 1fr; }
body[data-layout="topbar"] .sidebar { grid-row:1; grid-column:1; flex-direction:row; align-items:center; padding:10px 24px; gap:20px; border-right:0; border-bottom:1px solid var(--sidebar-line); }
body[data-layout="topbar"] .brand-block { flex:0 0 210px; }
body[data-layout="topbar"] .workspace-switcher { display:none; }
body[data-layout="topbar"] .sidebar-bottom { display:block; margin-left:auto; }
body[data-layout="topbar"] .sidebar-bottom .sidebar-divider, body[data-layout="topbar"] .sidebar-bottom .sidebar-user { display:none; }
body[data-layout="topbar"] .sidebar-bottom .nav-item { width:auto; min-height:34px; padding:0 10px; }
body[data-layout="topbar"] .sidebar-nav { flex:1; min-width:0; flex-direction:row; overflow-x:auto; overflow-y:hidden; align-items:center; gap:7px; scrollbar-width:none; }
body[data-layout="topbar"] .sidebar-nav::-webkit-scrollbar { display:none; }
body[data-layout="topbar"] .nav-group { flex:0 0 auto; flex-direction:row; gap:2px; }
body[data-layout="topbar"] .nav-group-label { display:none; }
body[data-layout="topbar"] .nav-item { flex:0 0 auto; width:auto; min-height:34px; padding:0 10px; }
body[data-layout="topbar"] .nav-item span { font-size:11px; white-space:nowrap; }
body[data-layout="topbar"] .nav-item em { display:none; }
body[data-layout="topbar"] .nav-item.active { box-shadow:none; }
body[data-layout="topbar"] .main-area { grid-row:2; }
body[data-layout="topbar"] .topbar { position:relative; }

body[data-layout="rail"] .app-shell { grid-template-columns:76px 1fr; }
body[data-layout="rail"] .sidebar { padding:18px 10px 14px; align-items:center; gap:18px; }
body[data-layout="rail"] .brand-block { padding:0; justify-content:center; }
body[data-layout="rail"] .brand-copy, body[data-layout="rail"] .workspace-switcher, body[data-layout="rail"] .nav-group-label, body[data-layout="rail"] .nav-item span, body[data-layout="rail"] .nav-item em, body[data-layout="rail"] .sidebar-user, body[data-layout="rail"] .sidebar-divider { display:none; }
body[data-layout="rail"] .sidebar-nav, body[data-layout="rail"] .sidebar-bottom { width:100%; }
body[data-layout="rail"] .sidebar-nav { gap:12px; }
body[data-layout="rail"] .nav-group { gap:5px; }
body[data-layout="rail"] .nav-item { width:44px; min-height:40px; justify-content:center; padding:0; gap:0; }
body[data-layout="rail"] .nav-item i { width:auto; font-size:15px; }
body[data-layout="rail"] .nav-item.active { box-shadow:inset 3px 0 0 color-mix(in srgb, var(--accent) 70%, #fff 30%); }
body[data-layout="rail"] .sidebar-bottom { display:flex; align-items:center; }
body[data-layout="rail"] .sidebar-bottom .nav-item { width:44px; }

@media (max-width:1080px) {
  :root { --sidebar-width:214px; }
  .page-content { padding:24px; }
  .grid.metrics { grid-template-columns:repeat(2,1fr); }
  .asset-grid { grid-template-columns:repeat(2,1fr); }
  .result-grid { grid-template-columns:repeat(3,1fr); }
  .topbar { padding:0 24px; }
  .global-search { width:200px; }
}
@media (max-width:760px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:fixed; z-index:20; width:260px; height:100vh; transform:translateX(-100%); transition:transform var(--ease); }
  .sidebar.open { transform:translateX(0); }
  .main-area { min-width:0; }
  .topbar { padding:0 16px; }
  .breadcrumb { display:none; }
  .topbar-actions { width:100%; }
  .global-search { flex:1; width:auto; }
  .quick-add span { display:none; }
  .page-content { padding:20px 16px; }
  .page-heading { align-items:flex-start; flex-direction:column; }
  .grid.dashboard-main, .detail-layout, .split-layout, .settings-layout, .ingest-layout, .work-grid, .analytics-grid { grid-template-columns:1fr; }
  .pipeline { grid-template-columns:repeat(2,1fr); }
  .asset-grid, .person-grid, .topic-grid { grid-template-columns:1fr; }
  .publish-grid { grid-template-columns:1fr; }
  .result-grid { grid-template-columns:repeat(2,1fr); }
  .theme-grid, .field-grid, .modal-grid { grid-template-columns:1fr; }
  .face-search-box, .image-search-box, .audio-search-box, .qa-panel { align-items:stretch; flex-direction:column; }
  .face-input { flex-wrap:wrap; }
  .face-placeholder { min-width:100%; }
  .selection-footer { align-items:stretch; flex-direction:column; gap:9px; }
  body[data-layout="topbar"] .app-shell { grid-template-rows:1fr; }
  body[data-layout="topbar"] .sidebar { display:flex; position:fixed; transform:translateX(-100%); }
  body[data-layout="topbar"] .topbar { position:sticky; }
  body[data-layout="rail"] .app-shell { grid-template-columns:1fr; }
  body[data-layout="rail"] .sidebar { position:fixed; width:76px; height:100vh; transform:translateX(-100%); }
}