:root { color-scheme: light dark; --bg:#f4f6f8; --surface:#fff; --text:#18212b; --muted:#65717e; --line:#dce2e7; --accent:#176b87; --badge:#e3f2f7; }
@media (prefers-color-scheme:dark) { :root { --bg:#171a1d; --surface:#25292d; --text:#f2f4f5; --muted:#aeb8c1; --line:#3e464d; --accent:#75c9e5; --badge:#183d49; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; }
header,main { width:min(1100px,calc(100% - 32px)); margin:auto; }
header { display:flex; align-items:end; justify-content:space-between; padding:34px 0 20px; }
h1 { margin:.15rem 0 0; font-size:clamp(1.8rem,4vw,2.7rem); }
.eyebrow,.summary,dt,.identifier { color:var(--muted); }
.eyebrow { font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.readonly,.status { padding:.3rem .65rem; border-radius:999px; background:var(--badge); color:var(--accent); font-size:.78rem; font-weight:700; }
form { display:grid; grid-template-columns:155px 155px minmax(220px,1fr) auto; gap:12px; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
label { display:grid; gap:5px; color:var(--muted); font-size:.78rem; font-weight:600; }
input,button { min-height:40px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--text); padding:0 11px; font:inherit; }
button { cursor:pointer; font-weight:700; }
form button { align-self:end; background:var(--accent); color:var(--bg); border-color:var(--accent); }
.summary { min-height:24px; margin:18px 2px 10px; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.card { padding:17px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 2px 8px rgb(0 0 0 / .05); }
.card-top { display:flex; gap:12px; justify-content:space-between; align-items:start; }
.date { color:var(--accent); font-weight:700; }
h2 { margin:.25rem 0; font-size:1.1rem; }
.identifier { min-height:22px; }
dl { display:grid; grid-template-columns:1.4fr .7fr 1fr; gap:8px; margin:16px 0 0; padding-top:13px; border-top:1px solid var(--line); }
dl div { min-width:0; } dt { font-size:.72rem; text-transform:uppercase; } dd { margin:2px 0 0; font-weight:650; overflow-wrap:anywhere; }
.empty,.error { grid-column:1/-1; padding:36px; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.error { color:#c53e3e; }
.pagination { display:flex; align-items:center; justify-content:center; gap:14px; padding:24px 0 40px; }
.pagination button:disabled { opacity:.45; cursor:default; }
@media (max-width:720px) { form { grid-template-columns:1fr 1fr; } .search { grid-column:1/-1; } form button { grid-column:1/-1; } }
@media (max-width:440px) { header { align-items:start; } form { grid-template-columns:1fr; } .search,form button { grid-column:auto; } .cards { grid-template-columns:1fr; } }