:root { --navy:#143449; --teal:#087e8b; --paper:#f5f8f7; --ink:#18333b; --muted:#607078; --line:#dce5e2; --danger:#a4303f; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.5 Inter,ui-sans-serif,system-ui,sans-serif; }
.topbar { min-height:64px; padding:0 6vw; display:flex; align-items:center; justify-content:space-between; background:var(--navy); color:#fff; }
.brand { color:#fff; font-weight:750; letter-spacing:.02em; text-decoration:none; }
.topbar nav { display:flex; align-items:center; gap:20px; font-size:.9rem; }
.topbar a, .link-button { color:#fff; text-decoration:none; }
.link-button { padding:0; border:0; background:transparent; cursor:pointer; font:inherit; }
.container { width:min(1120px,88vw); margin:56px auto; }
.auth-card, .panel { border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 12px 30px #1434490d; }
.auth-card { width:min(440px,100%); margin:10vh auto; padding:38px; }
.page-heading { margin-bottom:25px; }
.page-heading h1, .auth-card h1 { margin:0 0 8px; font-size:2rem; line-height:1.2; }
.page-heading p, .auth-card > p:not(.alert) { margin:0; color:var(--muted); }
.eyebrow { margin-bottom:8px !important; color:var(--teal) !important; font-size:.8rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.panel { padding:28px; }
.form-stack { display:grid; gap:18px; margin-top:24px; }
.form-stack label { display:grid; gap:7px; font-weight:650; }
input { width:100%; padding:10px 12px; border:1px solid #b9c8c6; border-radius:7px; font:inherit; }
button { width:fit-content; padding:11px 16px; border:0; border-radius:7px; background:var(--teal); color:#fff; cursor:pointer; font:inherit; font-weight:700; }
.hint { margin:-6px 0 0; color:var(--muted); font-size:.9rem; }
.alert { padding:12px 14px; border-radius:7px; }
.error { background:#fbecef; color:var(--danger); }
.success { background:#e8f6ef; color:#17623c; }
.table-panel { padding:0; overflow:hidden; }
.table-wrap { overflow-x:auto; overscroll-behavior-x:contain; }
.table-wrap table { width:max-content; min-width:100%; border-collapse:collapse; }
th, td { padding:14px 18px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
th { position:sticky; top:0; background:#f7fbfa; color:var(--muted); font-size:.77rem; letter-spacing:.06em; text-transform:uppercase; }
.empty { color:var(--muted); text-align:center; }
.pagination { display:flex; justify-content:space-between; gap:14px; padding:16px 18px; color:var(--muted); }
.pagination a { color:var(--teal); font-weight:650; text-decoration:none; }
.details-button { padding:7px 10px; font-size:.84rem; }
.record-modal { width:min(860px,92vw); max-height:82vh; padding:28px; border:1px solid var(--line); border-radius:12px; color:var(--ink); box-shadow:0 24px 60px #1434494d; }
.record-modal::backdrop { background:#14344999; }
.modal-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.modal-heading h2 { margin:0; font-size:1.4rem; }
.modal-close { padding:2px 10px; border-radius:6px; background:transparent; color:var(--ink); font-size:1.8rem; line-height:1; }
.record-fields { display:grid; grid-template-columns:minmax(150px,1fr) minmax(220px,2fr); margin:0; border:1px solid var(--line); border-bottom:0; }
.record-fields dt, .record-fields dd { min-width:0; margin:0; padding:10px 12px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.record-fields dt { background:#f7fbfa; color:var(--muted); font-size:.86rem; font-weight:700; }
@media (max-width:700px) { .topbar { flex-direction:column; align-items:flex-start; gap:12px; padding:14px 6vw; } .topbar nav { flex-wrap:wrap; gap:12px; } .container { margin:36px auto; } .auth-card { margin:5vh auto; padding:28px; } .record-modal { padding:20px; } .record-fields { grid-template-columns:1fr; } .record-fields dt { border-bottom:0; } }