:root { --ink:#14202b; --blue:#16324f; --blue-2:#215d8d; --pale:#eef4f8; --line:#cfdae4; --green:#12683b; --red:#a42323; --amber:#875900; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:linear-gradient(135deg,#f6f8fa,#e7eff5); font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
main { max-width:1050px; padding:26px 20px 64px; margin:auto; }
header { display:flex; align-items:center; justify-content:space-between; margin-bottom:48px; }
.brand { color:var(--blue); font-size:1.35rem; font-weight:800; text-decoration:none; letter-spacing:.02em; }
button,.button { border:0; border-radius:8px; padding:12px 18px; background:var(--blue); color:#fff; font-weight:700; font:inherit; cursor:pointer; text-decoration:none; display:inline-block; }
button:hover,.button:hover { background:var(--blue-2); }
.logout button { color:var(--blue); background:transparent; padding:8px; font-weight:600; }
.hero { max-width:720px; margin-bottom:30px; }
h1 { line-height:1.1; font-size:clamp(2rem,4vw,3.25rem); margin:.2rem 0 .8rem; letter-spacing:-.04em; }
h2 { font-size:1.15rem; margin-top:0; }
.eyebrow { font-size:.75rem; letter-spacing:.14em; font-weight:800; color:var(--blue-2); margin:0; }
.upload-card,.rules,.notice,.login-card { background:#fff; border:1px solid var(--line); box-shadow:0 12px 32px #15324f11; border-radius:14px; padding:25px; }
.drop-zone { min-height:235px; border:2px dashed #7a98b0; background:var(--pale); display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; border-radius:10px; text-align:center; cursor:pointer; padding:24px; margin-bottom:18px; transition:.15s; }
.drop-zone.dragging { border-color:var(--blue-2); background:#dcebf5; transform:scale(1.01); }
.drop-zone input { width:1px; height:1px; opacity:0; position:absolute; }
.upload-icon { color:var(--blue-2); font-size:2.8rem; line-height:1; }
#file-name { color:var(--green); font-weight:700; overflow-wrap:anywhere; }
.progress-panel { margin-top:20px; padding:16px; border:1px solid var(--line); background:#f7fafc; border-radius:9px; }.progress-panel[hidden] { display:none; }.progress-label { display:flex; justify-content:space-between; gap:12px; }.progress-label span { font-variant-numeric:tabular-nums; color:var(--blue-2); font-weight:800; }.progress-track { height:12px; overflow:hidden; background:#d8e3eb; border-radius:99px; margin:10px 0; }.progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue),#2d88c6); transition:width .3s ease; }.progress-panel p { margin:0; color:#587083; font-size:.9rem; }.progress-panel.failed { border-color:#d88; background:#fff5f5; }.progress-panel.failed .progress-track span { background:var(--red); }
.rules { margin-top:24px; }
.rules ul { padding-left:1.15rem; margin-bottom:0; }
.metrics { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin:24px 0; }
.metrics article { padding:16px; background:#fff; border:1px solid var(--line); border-radius:10px; }
.metrics span,.muted { display:block; color:#587083; font-size:.85rem; }.metrics strong { display:block; font-size:1.75rem; margin-top:3px; }
.notice { margin:20px 0; }.notice.success { border-left:5px solid var(--green); }.notice.error { border-left:5px solid var(--red); }.notice.warning { border-left:5px solid var(--amber); }.notice.info { border-left:5px solid var(--blue-2); }
.status { display:inline-block; padding:3px 9px; border-radius:99px; font-size:.85rem; font-weight:800; }.status.success { background:#dff5e8; color:var(--green); }.status.error { background:#fde7e7; color:var(--red); }
.login-card { max-width:430px; margin:10vh auto; }.login-card form { display:grid; gap:16px; }.login-card label { display:grid; gap:6px; font-weight:700; }.login-card input { padding:10px; border:1px solid #aabac7; border-radius:7px; font:inherit; }
.table-wrap { overflow:auto; }table { width:100%; border-collapse:collapse; }th,td { padding:9px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
@media (max-width:720px) { main { padding:18px 14px 40px; } header { margin-bottom:28px; }.metrics { grid-template-columns:repeat(2,1fr); }.metrics article:last-child { grid-column:span 2; } }