:root { --ink:#0b1713; --muted:#65726c; --line:#dce4df; --paper:#f4f6f3; --white:#fff; --green:#1dd184; --green-dark:#0a6140; --navy:#071611; --amber:#f2a65a; --red:#e7665b; --shadow:0 24px 70px rgba(13,38,28,.09); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
[hidden] { display:none !important; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:1.12fr .88fr; }
.login-brand { position:relative; overflow:hidden; min-height:720px; padding:46px 8vw 44px 5vw; background:var(--navy); color:white; display:flex; flex-direction:column; justify-content:space-between; }
.login-brand::after { content:""; position:absolute; width:560px; height:560px; border:1px solid rgba(29,209,132,.25); border-radius:50%; bottom:-285px; right:-90px; box-shadow:0 0 0 90px rgba(29,209,132,.025),0 0 0 180px rgba(29,209,132,.018); }
.brand-lockup { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:750; letter-spacing:-.03em; z-index:1; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--green); color:#062116; font-size:17px; font-weight:900; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.login-statement { position:relative; z-index:1; max-width:650px; }
.eyebrow { display:block; color:var(--green-dark); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:800; margin-bottom:15px; }
.eyebrow.light { color:var(--green); }
.login-statement h1 { font-family:Georgia,serif; font-size:clamp(48px,5vw,80px); line-height:.98; letter-spacing:-.055em; margin:0 0 28px; font-weight:400; }
.login-statement p { color:#aebbb5; max-width:530px; font-size:17px; line-height:1.7; }
.security-note { color:#9eaaa5; font-size:13px; display:flex; align-items:center; gap:10px; z-index:1; }
.pulse { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(29,209,132,.12); }
.login-panel { background:white; display:grid; place-items:center; padding:50px; }
.login-form { width:min(390px,100%); }
.login-form h2 { margin:0 0 9px; font-family:Georgia,serif; font-weight:400; font-size:42px; letter-spacing:-.04em; }
.login-form>p { color:var(--muted); margin:0 0 38px; }
.login-form label { display:block; font-size:12px; font-weight:750; margin:18px 0 8px; }
.login-form input { width:100%; border:1px solid var(--line); background:#fafcfb; border-radius:10px; padding:14px 15px; outline:none; transition:.2s; }
.login-form input:focus { border-color:var(--green-dark); box-shadow:0 0 0 3px rgba(29,209,132,.1); }
.form-error { min-height:35px; padding-top:10px; color:#b53028; font-size:13px; }
.button { border:0; border-radius:10px; padding:13px 18px; display:inline-flex; align-items:center; justify-content:center; gap:25px; font-weight:750; font-size:13px; text-decoration:none; cursor:pointer; transition:transform .2s,background .2s; }
.button:hover:not(:disabled) { transform:translateY(-1px); }
.button:disabled { opacity:.45; cursor:not-allowed; }
.button.primary { background:var(--green); color:#062116; }
.button.secondary { background:#e9eeeb; color:var(--ink); }
.button.wide { width:100%; justify-content:space-between; padding:15px 17px; }
.topbar { height:78px; padding:0 max(28px,calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; background:rgba(244,246,243,.88); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.brand-lockup.dark { color:var(--ink); text-decoration:none; }
.top-actions { display:flex; align-items:center; gap:24px; }
.system-status { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.system-status i { width:7px; height:7px; border-radius:50%; background:var(--green); }
.ghost-button { border:0; border-left:1px solid var(--line); padding-left:24px; background:transparent; font-size:12px; font-weight:700; cursor:pointer; }
.workspace { max-width:1180px; margin:auto; padding:78px 0 100px; }
.intro { display:grid; grid-template-columns:1.4fr .6fr; align-items:end; gap:90px; margin-bottom:44px; }
.intro h1 { margin:0; font-family:Georgia,serif; font-weight:400; font-size:clamp(48px,6vw,76px); line-height:.98; letter-spacing:-.055em; }
.intro h1 em { color:var(--green-dark); font-weight:400; }
.intro>p { color:var(--muted); line-height:1.75; margin:0 0 4px; font-size:15px; }
.upload-card { background:white; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; }
.dropzone { margin:18px; min-height:260px; border:1.5px dashed #b9c8c0; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:.2s; background:linear-gradient(180deg,#fbfdfc,#f7faf8); }
.dropzone:hover,.dropzone.dragging { border-color:var(--green-dark); background:#f1fbf6; }
.dropzone.has-file { border-style:solid; border-color:var(--green); background:#f3fcf7; }
.upload-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:var(--navy); color:var(--green); font-size:25px; margin-bottom:22px; }
.dropzone strong { font-family:Georgia,serif; font-size:25px; font-weight:400; margin-bottom:9px; }
.dropzone>span:last-child { color:var(--muted); font-size:13px; }
.upload-footer { border-top:1px solid var(--line); padding:17px 20px; display:grid; grid-template-columns:1fr 1.25fr 1.3fr auto; gap:18px; align-items:center; }
.upload-footer>div { display:flex; align-items:center; gap:10px; color:#4c5953; font-size:12px; }
.step-index { color:#8b9892; font-family:monospace; font-size:11px; }
.banner-error { margin:0 18px 18px; border-radius:8px; background:#fff0ee; color:#9f2d25; padding:12px 14px; font-size:13px; }
.processing { margin-top:36px; background:white; border:1px solid var(--line); border-radius:18px; padding:32px; box-shadow:var(--shadow); scroll-margin-top:100px; }
.processing-header { display:flex; justify-content:space-between; align-items:end; }
.processing-header h2 { margin:0 0 5px; font-family:Georgia,serif; font-weight:400; font-size:30px; }
.processing-header p { margin:0; color:var(--muted); font-size:13px; }
.percent { font-size:30px; color:var(--green-dark); }
.progress-track { margin:24px 0 28px; height:7px; background:#e5ebe7; border-radius:10px; overflow:hidden; }
.progress-track span { display:block; height:100%; background:var(--green); border-radius:10px; transition:width .35s; }
.metrics { display:grid; grid-template-columns:repeat(6,1fr); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.metrics article { padding:18px; border-right:1px solid var(--line); min-width:0; }
.metrics article:last-child { border:0; }
.metrics span,.metrics small { color:var(--muted); font-size:10px; display:block; text-transform:uppercase; letter-spacing:.07em; }
.metrics strong { display:block; font-size:27px; margin:8px 0 5px; letter-spacing:-.04em; }
.metrics .good strong { color:#088653; }.metrics .warn strong { color:#b96b18; }.metrics .bad strong { color:#c5453b; }
.activity-wrap { margin-top:27px; }
.activity-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.activity-title h3 { font-size:13px; margin:0; }.activity-title span { color:var(--muted); font-size:11px; }
.activity { border-top:1px solid var(--line); }
.activity .empty { color:var(--muted); font-size:13px; padding:18px 0; }
.activity-row { display:grid; grid-template-columns:12px minmax(160px,.8fr) minmax(200px,1.2fr) auto; gap:12px; align-items:center; padding:11px 4px; border-bottom:1px solid #edf1ef; font-size:12px; }
.activity-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.activity-reason { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#84908a; }.status-dot.deliverable { background:var(--green); }.status-dot.risky { background:var(--amber); }.status-dot.undeliverable,.status-dot.no_mx,.status-dot.invalid_format { background:var(--red); }
.status-pill { padding:4px 7px; border-radius:20px; background:#edf1ef; color:#52615a; font-size:10px; font-weight:750; }.status-pill.deliverable { background:#e4f9ef;color:#087148; }.status-pill.risky { background:#fff2e3;color:#9b590f; }.status-pill.undeliverable,.status-pill.no_mx,.status-pill.invalid_format { background:#ffebe9;color:#a9342c; }
.result-actions { margin-top:28px; padding:22px; border-radius:12px; background:var(--navy); color:white; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.result-actions>div:first-child { display:flex; align-items:center; gap:14px; }.result-check { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--green); color:#062116; font-weight:900; }.result-actions strong { font-size:14px; }.result-actions p { margin:4px 0 0; color:#98aaa1; font-size:11px; }.download-buttons { display:flex; align-items:center; gap:9px; }.text-link { color:#a9bbb2; font-size:11px; margin-left:7px; }
.method { padding-top:95px; }.method-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #bcc8c2; }.method-grid article { padding:25px 30px 10px 0; }.method-grid article>span { color:var(--green-dark); font:11px monospace; }.method-grid h3 { font-family:Georgia,serif; font-weight:400; font-size:22px; margin:24px 0 10px; }.method-grid p { color:var(--muted); font-size:13px; line-height:1.65; }.caveat { margin-top:28px; padding:18px 20px; background:#e9eeeb; border-radius:10px; color:#59665f; font-size:12px; line-height:1.6; }
footer { max-width:1180px; margin:auto; border-top:1px solid var(--line); padding:28px 0 40px; display:flex; justify-content:space-between; font-size:12px; }footer span { font-weight:800; }footer p { margin:0;color:var(--muted); }
@media (max-width:900px) { .workspace,footer { margin-left:22px;margin-right:22px; }.intro { grid-template-columns:1fr;gap:25px; }.metrics { grid-template-columns:repeat(3,1fr); }.metrics article:nth-child(3){border-right:0}.metrics article:nth-child(-n+3){border-bottom:1px solid var(--line)}.upload-footer { grid-template-columns:1fr 1fr; }.login-shell { grid-template-columns:1fr; }.login-brand { min-height:330px;padding:35px; }.login-statement h1 { font-size:48px; }.login-statement p,.security-note { display:none; }.login-panel { padding:50px 25px; }.method-grid { grid-template-columns:1fr 1fr; }.result-actions { align-items:flex-start;flex-direction:column; }.download-buttons { flex-wrap:wrap; } }
@media (max-width:600px) { .topbar { padding:0 18px; }.system-status { display:none; }.workspace { padding-top:48px; }.intro h1 { font-size:46px; }.dropzone { min-height:220px;text-align:center;padding:30px; }.dropzone strong { font-size:21px; }.upload-footer { grid-template-columns:1fr; }.upload-footer>div { display:none; }.metrics { grid-template-columns:1fr 1fr; }.metrics article { border-bottom:1px solid var(--line)!important; }.metrics article:nth-child(even){border-right:0}.processing { padding:22px 16px; }.activity-row { grid-template-columns:10px 1fr auto; }.activity-reason { display:none; }.method-grid { grid-template-columns:1fr; }.method-grid article { border-bottom:1px solid var(--line); }.download-buttons { width:100%; }.download-buttons .button { flex:1; }.result-actions p { line-height:1.5; } }