main { max-width:1720px; margin:auto; padding:30px; }
.heading { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0 0 24px; }
.overview-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; border:1px solid var(--border); border-radius:14px; background:var(--panel); }
.overview-item span { color:var(--muted); font-size:13px; line-height:1.5; }
.overview-item strong { font-size:28px; font-weight:600; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.eyebrow { color:var(--muted); font-size:12px; font-weight:600; letter-spacing:1.3px; text-transform:uppercase; }
h1 { font-size:30px; font-weight:650; letter-spacing:-1px; margin:6px 0; }
p { color:var(--muted); line-height:1.6; font-size:14px; }
#connection { font-size:12px; color:var(--muted); background:var(--surface); padding:9px 12px; border-radius:20px; }
#connection[data-state=error] { color:var(--danger); }
form { display:flex; flex-wrap:wrap; align-items:end; gap:14px; margin:24px 0; padding:18px;
  background:var(--panel); border:1px solid var(--border); border-radius:16px; }
label { display:grid; gap:8px; font-size:14px; color:var(--muted); }
input,select,button { background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:9px; padding:10px 12px; font-size:14px; }
input { width:140px; } input[name=q] { width:260px; }
button:hover { border-color:var(--accent); } button:disabled { opacity:.5; cursor:default; }
form button[type=submit] { background:var(--accent); color:var(--panel); border-color:var(--accent); font-weight:600; }
.advanced { flex-basis:100%; order:2; color:var(--muted); font-size:14px; }
summary { cursor:pointer; padding:6px 0; }
.advanced-fields { display:flex; flex-wrap:wrap; align-items:end; gap:16px; padding-top:12px; }
input[type=datetime-local] { width:220px; }
.protocol-toggle { display:flex; align-items:center; gap:8px; min-height:40px; }
.protocol-toggle input { width:18px; height:18px; margin:0; accent-color:var(--accent); }
.workspace { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:20px; align-items:start; }
.list,aside { background:var(--panel); border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); }
.pane-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border); }
.pane-heading h2 { margin:0; font-size:15px; font-weight:600; }.pane-heading span { color:var(--muted); font-size:12px; }
.pane-heading span { display:block; margin-top:5px; }
.pane-heading button { background:transparent; padding:7px 11px; }
.table-wrap { max-height:65vh; overflow:auto; }
table { border-collapse:collapse; width:100%; font-size:14px; text-align:left; }
th { position:sticky; top:0; background:var(--panel); color:var(--muted); font-size:12px; font-weight:550; padding:14px 16px; border-bottom:1px solid var(--border); }
td { padding:15px 16px; border-bottom:1px solid var(--border); vertical-align:top; }
tbody tr:hover { background:var(--surface); } tr.selected,tr.selected:hover { background:var(--selected); }
td button { padding:6px 9px; background:transparent; color:var(--accent); }
td .record-title { display:block; color:var(--text); font-weight:600; text-align:left; padding:0; border:0; line-height:1.45; background:transparent; }
td .record-title:hover { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.record-office { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; color:var(--muted); }
.record-time { font-size:12px; line-height:1.6; color:var(--muted); min-width:110px; font-variant-numeric:tabular-nums; }
.secondary { display:block; font-size:12px; color:var(--muted); margin-top:6px; }
.badge { display:inline-block; padding:5px 8px; background:var(--surface); border-radius:7px; font-size:12px; white-space:nowrap; }
.badge.failed,.badge.rejected,.badge.cancelled { color:var(--danger); }
.badge.active,.badge.parsed { color:var(--success); }
.pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px; font-size:12px; color:var(--muted); }
aside { position:sticky; top:94px; padding:24px; max-height:calc(100dvh - 120px); overflow:auto; }
.empty { padding:60px 20px; text-align:center; }.empty p { max-width:300px; margin:12px auto; }
h2 { font-size:21px; font-weight:650; letter-spacing:-.5px; overflow-wrap:anywhere; }
h3 { font-size:15px; margin-top:26px; }
.facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:22px 0; padding:18px; background:var(--surface); border-radius:12px; }
.facts dt { font-size:12px; color:var(--muted); margin-bottom:6px; }
.facts dd { margin:0; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.source-block { margin:14px 0; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); }
.source-toolbar { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; gap:12px; border-bottom:1px solid var(--border); }
.source-toolbar span { font-size:11px; color:var(--muted); }
.source-toolbar button { padding:5px 9px; font-size:12px; background:var(--panel); }
.source-block pre { margin:0; border:0; border-radius:0; }
.timeline-item { position:relative; margin-left:7px; padding:16px 0 16px 22px; border-left:2px solid var(--border); border-bottom:0; }
.timeline-item::before { content:""; position:absolute; left:-5px; top:23px; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--panel); }
.timeline-item > a:first-child { font-weight:600; }
.tabs { display:flex; flex-wrap:wrap; gap:3px; margin:22px 0; padding:4px; background:var(--surface); border-radius:12px; }
.tabs button { flex:1; border-color:transparent; padding:9px 12px; background:transparent; }
.tabs button[aria-pressed=true] { background:var(--panel); color:var(--accent); box-shadow:0 1px 4px #00000010; }
pre { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin:14px 0; }
.attachment { padding:16px 0; border-bottom:1px solid var(--border); }
.attachment a { display:inline-block; margin:8px 12px 8px 0; font-size:14px; }
.footnote { font-size:12px; margin-top:20px; }.notice { color:var(--muted); font-size:13px; }.error { color:var(--danger); }
time { white-space:nowrap; font-size:12px; }
@media(max-width:1100px) { .workspace { grid-template-columns:1fr; } aside { position:static; max-height:none; } }
@media(max-width:640px) {
  main { padding:20px 14px; }.heading { align-items:start; flex-direction:column; gap:8px; }
  .overview { gap:8px; }.overview-item { padding:12px; flex-direction:column-reverse; align-items:start; gap:4px; }
  .overview-item strong { font-size:24px; }.overview-item span { font-size:11px; }
  h1 { font-size:27px; } form { padding:14px; gap:12px; } form > label:first-child { width:100%; }
  input[name=q] { width:100%; } aside { padding:18px; } td,th { padding:12px; }
  .pane-heading { padding:16px; }.tabs button { flex:1 0 auto; }
}