:root { color-scheme: dark; --bg:#0c0e10; --panel:#15191d; --line:#2a3138; --muted:#9aa4ae; --text:#f4f7f8; --yellow:#f5c542; --blue:#4da3ff; --danger:#ffb4a8; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:radial-gradient(900px 440px at 50% -200px,#263440 0%,var(--bg) 62%); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif; }
.app-shell { width:min(1080px,calc(100% - 32px)); margin:0 auto; padding:56px 0 32px; }
.hero { text-align:center; margin-bottom:36px; }.eyebrow { margin:0 0 10px; color:var(--yellow); font-size:12px; font-weight:800; letter-spacing:.18em; }.hero h1 { margin:0; font-size:clamp(28px,5vw,42px); letter-spacing:.02em; }.intro { margin:14px 0 0; color:var(--muted); }
.panel { margin-top:18px; padding:25px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,rgba(30,36,42,.95),var(--panel)); }.section-heading { display:flex; gap:11px; align-items:center; margin-bottom:20px; }.section-heading h2 { margin:0; font-size:19px; }.step { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#27313a; color:var(--yellow); font-size:12px; font-weight:800; }.form-grid { display:grid; grid-template-columns:minmax(160px,.45fr) 1fr; gap:16px; }.form-grid label { display:grid; gap:8px; color:#c8d0d5; font-size:14px; font-weight:700; } input { width:100%; padding:12px; border:1px solid #3b454e; border-radius:8px; outline:none; background:#0f1316; color:var(--text); font:inherit; } input:focus { border-color:var(--blue); box-shadow:0 0 0 3px #4da3ff22; }.hint,.status { margin:14px 0 0; color:var(--muted); font-size:13px; }.drop-zone { min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; border:1px dashed #52616d; border-radius:12px; cursor:pointer; color:#cbd3d8; text-align:center; transition:.18s ease; }.drop-zone:hover,.drop-zone.dragover { border-color:var(--yellow); background:#f5c5420c; }.drop-zone strong { color:white; font-size:17px; }.drop-zone small { color:var(--muted); }.upload-icon { display:grid; place-items:center; width:38px; height:38px; border:1px solid #51606c; border-radius:50%; color:var(--yellow); font-size:26px; line-height:1; }.preview-heading { justify-content:space-between; }.heading-group { display:flex; align-items:center; gap:11px; }.count { padding:5px 9px; border-radius:100px; background:#2b343b; color:#d9e1e5; font-size:13px; font-weight:700; }.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:10px; } table { width:100%; min-width:850px; border-collapse:collapse; } th,td { padding:13px 12px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; font-size:14px; } th { background:#1e252b; color:#aeb9c1; font-size:12px; font-weight:700; } tr:last-child td { border-bottom:0; } td { color:#e8edef; }.score { color:var(--yellow); font-weight:800; }.status-pill { display:inline-block; padding:4px 8px; border:1px solid #3e4b54; border-radius:99px; color:#c7d0d5; font-size:12px; }.status-pill.finished { color:var(--yellow); border-color:#75622b; }.warnings { margin:0 0 18px; padding:12px 14px; border-left:3px solid var(--yellow); border-radius:4px; background:#f5c54214; color:#e8d89d; font-size:13px; line-height:1.6; }.download-copy { margin:0; color:var(--muted); }.download-copy code { color:#d9e1e5; }.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }.button { border:0; border-radius:9px; padding:13px 16px; cursor:pointer; font:inherit; font-size:14px; font-weight:800; }.button-primary { background:var(--yellow); color:#17130a; }.button-primary:hover { background:#ffda65; }.button-secondary { border:1px solid #46515b; background:#252d33; color:#f4f7f8; }.button-secondary:hover { background:#303b43; } footer { padding:0 16px 32px; color:#7e8a93; font-size:12px; text-align:center; }
@media (max-width:600px) { .app-shell { width:min(100% - 22px,1080px); padding-top:34px; }.panel { padding:18px; border-radius:12px; }.form-grid { grid-template-columns:1fr; }.drop-zone { min-height:155px; }.actions .button { width:100%; } }