:root {
  color-scheme: dark;
  --bg: #141217;
  --panel: #211f24;
  --line: #48454c;
  --text: #e5e3e8;
  --muted: #b9b6bd;
  --accent: #ffca2c;
  --focus: #69b7ea;
  --error: #ffa3a3;
  font: 14px "Segoe UI", "Microsoft YaHei UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 8px 14px; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: 3px; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
button:hover, .button:hover { background: #35323a; }
button:disabled { opacity: .45; cursor: wait; }
.primary { color: #18150c; background: var(--accent); border-color: var(--accent); font-weight: 600; }
.primary:hover { background: #ffda65; }
.danger, .error { color: var(--error); }
.danger { border-color: #795253; }
.subtle { background: transparent; border-color: transparent; color: var(--muted); }
.wide { width: 100%; }
input, select, textarea {
  display: block; width: 100%; min-height: 38px; padding: 9px 12px; margin: 8px 0 20px;
  color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 3px;
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); }
input[type=checkbox] {
  display: inline-block; width: 18px; height: 18px; min-height: 0; margin: 0 8px 0 0;
  vertical-align: middle; accent-color: var(--accent); cursor: pointer;
}
label { display: block; font-size: 12px; color: var(--muted); }
textarea { min-height: 95px; resize: vertical; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 25px; font-weight: 600; margin-bottom: 18px; }
h2 { font-size: 22px; font-weight: 600; }
h3 { font-size: 17px; }
p { line-height: 1.7; }
.muted, .hint { color: var(--muted); }
.hint { font-size: 12px; line-height: 1.7; }
.success { color: var(--accent); }
.eyebrow { color: var(--muted); font-size: 12px; }
.hidden { display: none !important; }
.brand { display: flex; align-items: baseline; gap: 8px; color: var(--accent); font-size: 31px; font-weight: 750; }
.brand span { color: var(--text); font-size: 17px; font-weight: 500; }
.login-layout { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; }
.login-form { width: min(420px, 100%); padding: 36px; border: 1px solid var(--line); background: var(--panel); border-radius: 4px; }
.login-form .brand { margin-bottom: 36px; }
.login-form h1 { font-size: 23px; margin-bottom: 10px; }
.login-form .muted { margin-bottom: 26px; }
.login-form .hint { margin-top: 24px; }
.login-form small { font-size: 11px; }
.workspace { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0, 1fr); border-top: 3px solid var(--accent); }
.workspace > aside { display: flex; flex-direction: column; position: sticky; top: 0; height: calc(100vh - 3px); background: var(--panel); }
.workspace .brand { height: 88px; padding: 22px; flex-shrink: 0; }
.workspace nav { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
nav button { justify-content: flex-start; min-height: 46px; padding: 10px 22px; border: 0; background: transparent; border-radius: 0 3px 3px 0; font-size: 15px; gap: 14px; }
nav button.active { background: var(--accent); color: #15120c; font-weight: 600; }
.icon { display: inline-block; width: 22px; height: 22px; flex: 0 0 auto; vertical-align: middle; }
.aside-bottom { margin-top: auto; padding: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.aside-bottom button { padding: 0; min-height: 28px; }
.aside-bottom small { color: #908b96; font-size: 11px; }
.main-shell { display: flex; flex-direction: column; min-width: 0; }
.topbar { height: 64px; flex-shrink: 0; border-bottom: 1px solid var(--line); background: var(--panel); padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar h1 { font-size: 25px; margin: 0; }
#import-evidence { background: transparent; }
#import-evidence span { font-size: 23px; line-height: 16px; font-weight: 300; }
#page { padding: 24px 28px; flex: 1; min-width: 0; }
.page-description { font-size: 12px; color: var(--muted); margin-bottom: 18px; }
footer { min-height: 36px; border-top: 1px solid #343138; padding: 10px 28px; display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 11px; }
.search-row { display: flex; margin-bottom: 18px; }
.search-row input { width: 100%; min-height: 44px; margin: 0; border-color: var(--focus); padding: 12px 16px; }
.filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 18px; }
.filterbar label { min-width: 135px; flex: 0 1 160px; }
.filterbar select { margin: 6px 0 0; height: 38px; }
.filterbar .density { margin-left: auto; min-width: auto; flex: 0 0 auto; padding: 10px 0; font-size: 13px; }
.filterbar .reset { color: var(--focus); text-decoration: underline; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.result-count { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.table-wrap { overflow: auto; width: 100%; border: 1px solid #353239; border-radius: 0; }
table { border-collapse: collapse; width: 100%; font-size: 13px; text-align: left; }
.evidence-list table { min-width: 1080px; }
.evidence-list td { white-space: nowrap; }
thead { background: var(--panel); color: var(--muted); }
th { position: sticky; top: 0; z-index: 1; background: var(--panel); font-weight: 500; white-space: nowrap; height: 48px; }
td, th { padding: 12px 16px; border-bottom: 1px solid #353239; max-width: 360px; overflow-wrap: anywhere; }
th + th { border-left: 1px solid #3a373f; }
tbody tr { background: #29272e; height: 62px; }
tbody tr:nth-child(even) { background: #211f25; }
tbody tr:hover { background: #34313a; }
tbody tr.selected { background: #354653; }
tbody tr:last-child td { border-bottom: 0; }
.compact tbody tr { height: 42px; }
.compact td { padding-top: 6px; padding-bottom: 6px; }
.selection-cell { width: 48px; min-width: 48px; padding: 12px 14px; }
.selection-cell input { margin: 0; }
td .cell-actions { display: flex; gap: 6px; }
td button { min-height: 30px; padding: 5px 10px; font-size: 12px; }
td small { display: block; color: var(--muted); margin-top: 5px; }
.file-cell { display: flex; align-items: center; gap: 12px; min-width: 210px; }
.file-cell .icon { color: var(--muted); width: 26px; height: 26px; }
.file-cell .filename { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { text-align: center; padding: 65px 20px; color: var(--muted); border: 1px solid #353239; }
.empty strong { display: block; font-size: 17px; color: var(--text); font-weight: 500; margin-bottom: 12px; }
.empty p { margin: 0; }
.badge { display: inline-block; padding: 3px 9px; border: 1px solid #817044; background: #3c3523; color: #f6d579; border-radius: 12px; font-size: 12px; white-space: nowrap; }
.badge.gray { color: var(--muted); background: #35323a; border-color: #68636e; }
.hash { font: 11px Consolas, monospace; word-break: break-all; color: var(--muted); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 24px; }
.callout { margin: 20px 0; }
.callout p { color: var(--muted); margin-bottom: 0; }
.progress { height: 5px; background: #39353e; overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); }
.result-link { word-break: break-all; background: var(--bg); padding: 15px; border: 1px solid var(--line); }
.two-col, .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pagination { display: flex; justify-content: flex-end; margin-top: 14px; }
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 4px; width: min(640px, 94vw); padding: 28px; max-height: 90vh; overflow: auto; }
dialog::backdrop { background: #000a; }
dialog h2 { margin-bottom: 24px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.toast { position: fixed; bottom: 24px; right: 24px; max-width: 440px; padding: 16px 22px; background: #35323a; border: 1px solid #77717d; border-radius: 3px; z-index: 100; line-height: 1.6; box-shadow: 0 6px 20px #0005; }
.setup { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 50px 20px; }
.setup-card { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 36px; width: min(690px, 100%); }
.setup-card .brand { margin-bottom: 30px; }
.setup-card .eyebrow { margin-top: 24px; }
.checks { padding: 18px 22px; background: var(--bg); border: 1px solid #353239; margin: 24px 0; }
.checks p { font-size: 12px; margin: 0; line-height: 2; }
.setup hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
.setup button { margin-bottom: 24px; }
.share-card { max-width: 580px; margin: 80px auto; }
.share-card .brand { margin-bottom: 32px; }
.file-mark { height: 60px; width: 60px; background: #35323a; border: 1px solid var(--line); border-radius: 3px; display: flex; align-items: center; justify-content: center; color: var(--accent); font: 12px Consolas; margin: 28px 0 20px; }
.title-group { display: flex; align-items: center; gap: 14px; min-width: 0; }
.icon-button { padding: 6px; flex-shrink: 0; }
.workspace.sidebar-collapsed { grid-template-columns: 72px minmax(0, 1fr); }
.sidebar-collapsed .nav-label, .sidebar-collapsed .brand span, .sidebar-collapsed .aside-bottom > :not(button) { display: none; }
.sidebar-collapsed .brand { font-size: 23px; padding: 20px; }
.sidebar-collapsed nav button { padding: 12px 24px; }
.sidebar-collapsed .aside-bottom { padding: 16px; align-items: center; }
.sidebar-collapsed #logout { font-size: 11px; white-space: normal; }
.search-row { gap: 12px; align-items: stretch; }
.search-row input { min-width: 0; flex: 1; }
.filter-count { align-self: center; color: var(--muted); white-space: nowrap; font-size: 13px; }
.saved-searches, .column-options { position: relative; flex-shrink: 0; }
.saved-searches summary, .column-options summary { cursor: pointer; border: 1px solid var(--line); border-radius: 3px; padding: 12px 16px; background: var(--panel); white-space: nowrap; }
.column-options summary { padding: 10px 12px; }
.saved-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: 300px; max-width: calc(100vw - 32px); max-height: 360px; overflow: auto; background: #29272e; border: 1px solid var(--focus); padding: 10px; box-shadow: 0 10px 28px #0008; }
.saved-menu p { margin: 8px; }
.saved-menu > button { width: 100%; margin-top: 8px; }
.saved-entry { display: flex; border-bottom: 1px solid var(--line); gap: 4px; }
.saved-entry button:first-child { min-width: 0; flex: 1; justify-content: flex-start; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.saved-entry button:last-child { font-size: 12px; }
.column-options .saved-menu { width: 220px; }
.column-options label { display: flex; align-items: center; padding: 10px; cursor: pointer; font-size: 13px; color: var(--text); }
.column-options label:hover { background: #35323a; }
button.file-link { display: block; padding: 0; border: 0; background: none; text-align: left; font-size: 13px; border-radius: 0; }
button.file-link:hover { color: var(--focus); text-decoration: underline; }
dialog.evidence-detail { width: min(1560px, 96vw); height: min(940px, 94vh); max-height: 94vh; padding: 0; overflow: hidden; border-top: 3px solid var(--accent); }
.evidence-detail[open] { display: flex; flex-direction: column; }
.detail-top { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.detail-top h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; margin: 0; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; padding: 20px; flex: 1; min-height: 0; background: var(--bg); }
.media-stage { min-width: 0; min-height: 0; background: #000; display: flex; flex-direction: column; justify-content: center; }
.media-stage video { width: 100%; min-height: 0; flex: 1; object-fit: contain; background: #000; }
.media-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px 0; flex-shrink: 0; }
.media-tools select { width: 85px; margin: 0; min-height: 36px; padding: 7px; }
.media-hint { padding: 12px 16px; margin: 0; color: var(--muted); font-size: 11px; flex-shrink: 0; }
.detail-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--panel); }
.detail-tabs { display: flex; padding: 18px 16px 0; gap: 8px; }
.detail-tabs button { flex: 1; min-width: 0; }
.detail-tabs button.active { border-color: var(--focus); background: #354653; }
.detail-facts { padding: 22px; overflow: auto; }
.fact { margin-bottom: 24px; }
.fact dt { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.fact dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.6; }
.wide-view { grid-template-columns: minmax(0, 1fr); }
.wide-view .detail-panel { display: none; }
.media-stage:fullscreen { width: 100vw; height: 100vh; }
@media (max-width: 1000px) {
  .detail-layout { grid-template-columns: minmax(0, 1fr) 290px; padding: 12px; gap: 12px; }
  .detail-top { flex-wrap: wrap; padding: 12px; }
  .detail-top h2 { font-size: 16px; }
  .detail-top button { font-size: 12px; padding: 8px; }
  .detail-facts { padding: 16px; }
}
@media (max-width: 1100px) {
  .workspace { grid-template-columns: 190px minmax(0, 1fr); }
  nav button { padding-left: 18px; }
  #page { padding: 22px; }
  .topbar { padding: 0 22px; }
  .filterbar label { flex: 1 1 130px; }
}
@media (max-width: 700px) {
  .workspace { display: block; }
  .workspace > aside { position: static; height: auto; }
  .workspace .brand { height: 58px; padding: 12px 16px; font-size: 26px; }
  .workspace nav { flex-direction: row; overflow-x: auto; padding: 0 8px 8px; gap: 4px; }
  nav button { flex-shrink: 0; font-size: 13px; min-height: 38px; padding: 8px 12px; border-radius: 3px; }
  nav .icon { width: 18px; height: 18px; }
  .aside-bottom { margin: 0; padding: 8px 16px; flex-direction: row; align-items: center; border-top: 1px solid #353239; }
  .aside-bottom small { display: none; }
  .aside-bottom button { margin-left: auto; }
  .topbar { height: 60px; padding: 0 16px; }
  .topbar h1 { font-size: 21px; }
  #import-evidence { padding: 7px 10px; font-size: 12px; }
  #page { padding: 20px 16px; }
  .filterbar { gap: 10px; }
  .filterbar label { flex: 1 1 calc(50% - 10px); min-width: 0; }
  .filterbar .density { margin-left: auto; }
  .toolbar button { padding: 7px 10px; font-size: 12px; }
  .form-row, .two-col { grid-template-columns: 1fr; }
  .login-form, .setup-card { padding: 26px; }
  .share-card { margin: 30px 16px; }
  footer { padding: 10px 16px; }
  footer span:last-child { display: none; }
  .toast { left: 16px; right: 16px; bottom: 16px; }
  .workspace.sidebar-collapsed { display: block; }
  .sidebar-collapsed .brand, .sidebar-collapsed .aside-bottom { display: none; }
  .sidebar-collapsed nav { padding-top: 8px; }
  .sidebar-collapsed nav button { padding: 10px 16px; }
  .title-group { gap: 6px; }
  .search-row { flex-wrap: wrap; }
  .search-row input { flex-basis: 100%; }
  .saved-searches { margin-left: auto; }
  .saved-searches summary { padding: 9px 12px; }
  .filter-count { flex-basis: 100%; }
  dialog.evidence-detail { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .detail-top h2 { order: -1; flex-basis: 100%; }
  .detail-layout, .detail-layout.wide-view { display: flex; flex-direction: column; overflow: auto; }
  .media-stage { flex: 0 0 auto; }
  .media-stage video { flex: none; height: 230px; }
  .media-tools { padding: 10px; gap: 6px; }
  .media-tools button { padding: 7px 9px; font-size: 12px; }
  .detail-panel { flex: 0 0 auto; }
  .detail-facts { overflow: visible; }
  .media-stage:fullscreen video { height: auto; flex: 1; }
}