@font-face { font-family: "DM Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/dm-sans-latin-700-normal.woff2") format("woff2"); }
:root { --ink:#10181a; --blue:#2b6684; --blue-soft:#e8f2f8; --text:#10181a; --muted:#5f6e75; --border:#e1e8ec; --sunken:#f5f8fa; --green:#0b7a4b; --green-soft:#e6f4ec; --orange:#9a5b00; --orange-soft:#fff2dc; --red:#b3261e; --shadow:0 8px 24px rgba(16,24,26,.08); font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html,body { min-height:100%; } body { margin:0; color:var(--text); background:#fff; font:400 16px/1.5 "DM Sans",system-ui,sans-serif; -webkit-font-smoothing:antialiased; } button,input { font:inherit; } button { cursor:pointer; } [hidden] { display:none !important; }
h1,h2,h3,p { margin:0; } h1 { font-size:clamp(30px,4vw,44px); letter-spacing:-.04em; line-height:1.12; } h2 { font-size:clamp(24px,3vw,32px); letter-spacing:-.03em; line-height:1.2; } h3 { font-size:20px; } .muted { color:var(--muted); } .eyebrow { margin-bottom:8px; color:var(--blue); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.gate { min-height:100dvh; display:grid; place-items:center; padding:24px; background:var(--sunken); } .gate-card { width:min(100%,400px); overflow:hidden; border:1px solid var(--border); border-radius:20px; background:#fff; box-shadow:var(--shadow); } .gate-band { display:grid; place-items:center; padding:24px; background:var(--ink); } .gate-band img { width:auto; height:44px; } .gate-body { display:grid; gap:10px; padding:32px 24px 24px; } .gate-body h1 { font-size:28px; } .gate-body .muted { font-size:14px; } .stack { display:grid; gap:12px; margin-top:14px; } label { color:var(--muted); font-size:14px; font-weight:500; } input { width:100%; min-height:44px; padding:10px 14px; border:1px solid #c3d0d7; border-radius:12px; outline:0; background:#fff; } input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(43,102,132,.18); } .error { color:var(--red); font-size:14px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border:1px solid transparent; border-radius:12px; font-weight:500; transition:background-color .12s ease,transform .12s ease; } .button:hover { transform:translateY(-1px); } .primary { color:#fff; background:var(--blue); } .primary:hover { background:#1f526c; } .secondary { color:var(--blue); border-color:#c3d0d7; background:#fff; } .secondary:hover { background:var(--sunken); }
.app { min-height:100dvh; } .topbar { display:flex; align-items:center; justify-content:space-between; min-height:60px; padding:0 max(16px,calc((100vw - 1200px)/2)); color:#fff; background:var(--ink); } .brand { display:flex; align-items:center; gap:12px; font-weight:500; } .brand img { width:auto; height:30px; } .divider { width:1px; height:22px; background:rgba(255,255,255,.28); } .topbar-actions { display:flex; align-items:center; gap:10px; } .admin-label { color:#a9cfe2; font-size:13px; } .topbar-button { min-height:40px; padding:0 10px; border:0; border-radius:8px; color:#fff; background:transparent; font-size:14px; } .topbar-button:hover { background:rgba(255,255,255,.12); }
.main-shell { width:min(100% - 40px,1000px); margin:0 auto; padding:64px 0 80px; } .hero { text-align:center; } .hero h1 { margin-bottom:10px; } .hero-copy { color:var(--muted); } .connection { display:inline-flex; margin-top:18px; padding:5px 10px; border:1px solid #b9ddc7; border-radius:999px; color:var(--green); background:var(--green-soft); font-size:12px; font-weight:700; } .connection.offline { color:var(--red); border-color:#efc6c3; background:#fbe9e7; }
.admin-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:52px auto 56px; } .nav-card { display:flex; align-items:center; gap:14px; min-height:84px; padding:16px; border:1px solid var(--border); border-radius:12px; color:var(--text); text-align:start; background:#fff; transition:border-color .12s ease,background-color .12s ease,transform .12s ease; } .nav-card:hover,.nav-card.active { border-color:#a9cfe2; background:var(--blue-soft); } .nav-card:hover { transform:translateY(-1px); } .nav-icon { display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:12px; color:var(--blue); background:#dcecf4; font-size:23px; line-height:1; } .nav-card strong,.nav-card small { display:block; } .nav-card small { margin-top:4px; color:var(--muted); font-size:13px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:20px; } .metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; } .metric { padding:18px; border:1px solid var(--border); border-radius:12px; background:#fff; } .metric span { display:block; margin-bottom:8px; color:var(--muted); font-size:13px; } .metric strong { font-size:28px; letter-spacing:-.04em; } .notice { min-height:24px; margin:10px 0; color:var(--muted); font-size:14px; } .notice.error { color:var(--red); }
.table-card { overflow:hidden; border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:var(--shadow); } .table-wrap { max-height:560px; overflow:auto; } table { width:100%; min-width:680px; border-collapse:collapse; } th,td { padding:15px 18px; border-bottom:1px solid #edf2f4; text-align:start; font-size:14px; } th { position:sticky; top:0; color:var(--muted); background:#fbfcfd; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; } tr:last-child td { border-bottom:0; } .file-name { max-width:430px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; } .status { display:inline-flex; align-items:center; gap:7px; padding:5px 9px; border-radius:999px; color:var(--green); background:var(--green-soft); font-size:12px; font-weight:700; white-space:nowrap; } .status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; } .status.pending { color:var(--orange); background:var(--orange-soft); }
.drop-zone { display:grid; justify-items:center; gap:10px; padding:64px 24px; border:1px dashed #a9cfe2; border-radius:16px; background:var(--sunken); text-align:center; } .upload-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:50%; color:var(--blue); background:var(--blue-soft); font-size:30px; } .drop-zone h3 { margin-top:8px; } .drop-zone .muted { font-size:14px; } .drop-zone.over { border-color:var(--blue); background:#eef7fb; } .process-note { display:flex; gap:12px; margin-top:16px; padding:16px; border:1px solid #f0d7a7; border-radius:12px; background:var(--orange-soft); } .process-note p { line-height:1.5; } .status-dot { width:9px; height:9px; margin-top:7px; border-radius:50%; background:#d88916; box-shadow:0 0 0 4px rgba(216,137,22,.14); } .upload-result { margin-top:16px; padding:16px; border:1px solid #b9ddc7; border-radius:12px; color:var(--green); background:var(--green-soft); }
@media (max-width:700px) { .main-shell { width:min(100% - 28px,1000px); padding-top:42px; } .topbar { padding:0 14px; } .topbar .brand img { max-width:76px; height:auto; } .admin-label { display:none; } .admin-nav,.metrics { grid-template-columns:1fr; } .section-heading { align-items:flex-start; flex-direction:column; } .section-heading .button { align-self:stretch; } }