:root { color-scheme: light; --ink:#17212b; --muted:#667382; --line:#dbe2e8; --panel:#fff; --bg:#f4f7f9; --accent:#176b87; --accent-dark:#0e536a; --warn:#a85a13; --danger:#a93232; --good:#28714f; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.topbar { min-height:64px; display:flex; align-items:center; gap:28px; padding:0 5vw; background:#102d3b; color:#fff; }
.brand { color:#fff; font-weight:700; letter-spacing:.01em; } .topbar nav { display:flex; gap:20px; flex:1; } .topbar nav a { color:#dbeaf0; }
.logout { display:flex; align-items:center; gap:14px; font-size:13px; } .link-button { border:0; padding:0; background:transparent; color:#bfe4ef; cursor:pointer; }
.container { max-width:1400px; margin:0 auto; padding:42px 5vw 70px; } h1,h2,h3 { margin-top:0; line-height:1.2; } h1 { font-size:32px; margin-bottom:8px; } h2 { font-size:18px; } h3 { font-size:15px; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; } .muted { color:var(--muted); }
.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:28px; } .page-heading p { margin:0; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; } .metric { padding:20px; background:var(--panel); border:1px solid var(--line); border-radius:12px; color:var(--ink); } .metric span { display:block; color:var(--muted); font-size:13px; } .metric strong { display:block; font-size:30px; margin-top:4px; } .metric.warning { border-color:#e9cda9; } .metric.good { border-color:#afd8c2; }
.two-columns { display:grid; grid-template-columns:1.45fr 1fr; gap:20px; } .detail-columns { grid-template-columns:1fr 1fr; } .panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px; overflow:auto; } .panel-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; } .panel-heading h2 { margin-bottom:0; }
table { width:100%; border-collapse:collapse; } th,td { text-align:left; vertical-align:top; border-bottom:1px solid var(--line); padding:11px 8px; } th { color:var(--muted); font-size:12px; font-weight:700; } tr:last-child td { border-bottom:0; } td small { display:block; color:var(--muted); }
.status { display:inline-block; padding:2px 8px; border-radius:99px; background:#eef1f3; color:#53606b; font-size:12px; white-space:nowrap; } .status.needs_review,.status.warning { background:#fff1df; color:var(--warn); } .status.submitted,.status.good { background:#e5f5eb; color:var(--good); } .status.error { background:#fde8e8; color:var(--danger); } .status.large { font-size:14px; padding:6px 12px; }
.button, button { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:7px; background:var(--accent); color:#fff; cursor:pointer; padding:10px 15px; font:inherit; font-weight:650; } button:hover,.button:hover { background:var(--accent-dark); text-decoration:none; } .button.secondary, button.secondary { background:#e9eef1; color:var(--ink); } .actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.filters { display:flex; gap:12px; flex-wrap:wrap; } .filters a { padding:7px 10px; background:#e9eef1; border-radius:7px; }
.alert { padding:12px 14px; border-radius:8px; margin:16px 0; background:#eef5f7; } .alert.error { background:#fde8e8; color:#7d2525; } .alert ul { margin:7px 0 0 20px; }
.table-error { color:var(--danger); font-size:12px; max-width:260px; margin-top:4px; } .mail-body,.json-block { white-space:pre-wrap; overflow:auto; background:#f6f8f9; border:1px solid var(--line); border-radius:8px; padding:15px; max-height:580px; font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; } .json-block { max-height:520px; }
.attachment-list { list-style:none; padding:0; margin:0; } .attachment-list li { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); } .attachment-list span { color:var(--muted); font-size:12px; }
.login-card { max-width:430px; margin:8vh auto 0; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:34px; box-shadow:0 12px 35px #1c3b4a12; } .login-card h1 { font-size:27px; } .stack { display:grid; gap:15px; } label { display:grid; gap:6px; color:#3d4b56; font-size:13px; font-weight:650; } input,textarea { width:100%; border:1px solid #c8d2d9; border-radius:7px; padding:10px 11px; background:#fff; color:var(--ink); font:inherit; font-weight:400; } textarea { resize:vertical; font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; } .check { display:flex; grid-template-columns:auto 1fr; align-items:center; gap:8px; font-weight:400; } .check input { width:auto; }
@media (max-width:900px) { .metrics { grid-template-columns:repeat(2,1fr); } .two-columns,.detail-columns { grid-template-columns:1fr; } .topbar { flex-wrap:wrap; padding:15px 5vw; gap:14px; } .topbar nav { order:3; flex-basis:100%; } .logout { margin-left:auto; } }
@media (max-width:600px) { .container { padding-top:25px; } h1 { font-size:27px; } .metrics { grid-template-columns:1fr 1fr; } .page-heading { flex-direction:column; } th:nth-child(2),td:nth-child(2) { min-width:160px; } }