:root { --ink:#12233e; --muted:#65738a; --border:#dfe7f0; --paper:#f7f9fc; --blue:#1c5dd8; --teal:#0d978b; --error:#c34040; --success:#117a59; --shadow:0 20px 60px rgba(18,35,62,.08); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } body { margin:0; } header, main, footer { max-width:1120px; margin:auto; } header { height:76px; display:flex; justify-content:space-between; align-items:center; padding:0 28px; } .brand { color:var(--ink); font-weight:800; text-decoration:none; letter-spacing:-.03em; font-size:20px; } .brand span { color:var(--teal); margin-right:5px; } .badge { color:var(--muted); border:1px solid var(--border); border-radius:99px; padding:7px 10px; font-size:12px; font-weight:600; } main { padding:44px 28px 70px; } .hero { max-width:720px; margin:0 auto 38px; text-align:center; } .eyebrow { color:var(--teal); text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:800; margin:0 0 9px; } h1 { margin:0; font-size:clamp(38px,6vw,64px); line-height:1; letter-spacing:-.055em; } h2 { letter-spacing:-.035em; margin:0 0 9px; font-size:25px; } h3 { font-size:16px; margin:0 0 14px; letter-spacing:-.02em; } .lede { color:var(--muted); font-size:18px; line-height:1.55; margin:18px 0 0; } .upload-card,.result,.history { background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); border-radius:20px; padding:30px; margin:0 auto 25px; max-width:900px; } .upload-card > div:first-child p { color:var(--muted); margin:0; line-height:1.5; } .dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:145px; border:1.5px dashed #aabbd0; border-radius:13px; margin:25px 0 15px; cursor:pointer; background:#fbfdff; transition:.18s; } .dropzone:hover,.dropzone.dragging { border-color:var(--blue); background:#f1f6ff; } .dropzone input { display:none; } .dropzone strong { font-size:15px; } .dropzone span { font-size:13px; color:var(--muted); margin-top:5px; } .or { display:flex; align-items:center; color:var(--muted); font-size:12px; margin:14px 0; gap:12px; } .or::before,.or::after { content:""; height:1px; background:var(--border); flex:1; } .field { display:block; font-size:13px; font-weight:700; } textarea { width:100%; resize:vertical; font:13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; border:1px solid var(--border); padding:12px; border-radius:10px; margin-top:8px; color:var(--ink); } textarea:focus { outline:2px solid #b7ccff; border-color:var(--blue); } button,.download { border:0; border-radius:10px; padding:12px 16px; background:var(--blue); color:#fff; cursor:pointer; font:700 14px inherit; text-decoration:none; display:inline-block; } button:hover,.download:hover { filter:brightness(.94); } button:disabled { opacity:.6; cursor:wait; } #diagnose { margin-top:16px; } #diagnose span { font-size:18px; margin-left:6px; } .status { min-height:19px; margin:12px 0 0; font-size:13px; color:var(--muted); } .status.error { color:var(--error); } .status.success { color:var(--success); } .hidden { display:none; }.report-heading,.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }.report-heading h2 { max-width:610px; line-height:1.18; }.report-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }.score { color:var(--teal); font-size:12px; font-weight:800; white-space:nowrap; }.download { background:#173f79; font-size:12px; white-space:nowrap; }.report-grid { display:grid; grid-template-columns:1.45fr .8fr; gap:24px; margin-top:25px; }.report-grid aside { background:#f1f6ff; padding:20px; border-radius:12px; }.report-grid aside ol { padding-left:20px; color:#334967; line-height:1.5; font-size:14px; }.muted { color:var(--muted); font-size:12px; line-height:1.45; }.claim { border:1px solid var(--border); border-left:4px solid var(--teal); padding:14px; border-radius:9px; margin-bottom:10px; }.claim.inference { border-left-color:#7f59c5; }.claim-meta { display:flex; gap:7px; color:var(--muted); text-transform:uppercase; font-weight:800; letter-spacing:.07em; font-size:10px; }.claim p { margin:8px 0 9px; line-height:1.45; font-size:14px; }.evidence { background:#f7f9fc; border-radius:6px; padding:7px 9px; font-size:12px; margin:5px 0; }.evidence summary { cursor:pointer; color:#3e516d; }.evidence code,.event-top code { color:#2759aa; font-size:11px; }.evidence pre { white-space:pre-wrap; color:#3f4e61; font:11px/1.45 ui-monospace,monospace; }.gaps { margin-top:21px; padding:12px 15px; color:#7b5b0b; background:#fff9e9; border:1px solid #f2e3ac; border-radius:10px; font-size:13px; }.gaps p { margin:3px 0 0; }.timeline { margin-top:28px; }.timeline > article { display:grid; grid-template-columns:30px 1fr; gap:10px; padding:11px 0; border-top:1px solid var(--border); }.event-number { color:#789; font-weight:800; }.event-top { display:flex; align-items:center; gap:7px; flex-wrap:wrap; color:var(--muted); font-size:12px; }.pill { padding:2px 6px; border-radius:99px; background:#e9f7f1; color:var(--success); font-size:10px; font-weight:800; text-transform:uppercase; }.pill.error { color:var(--error); background:#fff0f0; }.timeline p { margin:5px 0 0; color:#334967; font:12px/1.45 ui-monospace,monospace; white-space:pre-wrap; }.history { max-width:900px; }.text-button { background:transparent; color:var(--blue); padding:4px; }.history-item { width:100%; display:flex; justify-content:space-between; align-items:center; text-align:left; padding:13px 0; border-bottom:1px solid var(--border); background:transparent; border-radius:0; color:var(--ink); font-size:12px; }.history-item strong { display:block; }.history-item small { display:block; color:var(--muted); margin-top:3px; } footer { color:var(--muted); font-size:12px; padding:25px 28px 35px; text-align:center; border-top:1px solid var(--border); }.empty { color:var(--muted); padding:20px; border:1px dashed var(--border); border-radius:8px; font-size:14px; }
@media (max-width:700px) { header { padding:0 18px; } main { padding:30px 18px 50px; }.upload-card,.result,.history { padding:20px; }.report-heading,.section-heading { flex-direction:column; }.report-grid { grid-template-columns:1fr; }.report-actions { align-self:stretch; justify-content:space-between; }.history-item { gap:15px; }.badge { display:none; } }
.action-studio { margin-top:28px; padding:20px; border:1px solid var(--border); background:#fbfdff; border-radius:12px; }.action-studio h3 { margin-bottom:5px; }.action-grid { display:grid; grid-template-columns:1fr 120px auto auto auto; gap:10px; align-items:end; margin-top:16px; }.field input { display:block; width:100%; margin-top:7px; border:1px solid var(--border); border-radius:8px; padding:10px; color:var(--ink); background:#fff; font:13px inherit; }.secondary { background:#eef4ff; color:#1c5dd8; border:1px solid #cbdcff; white-space:nowrap; }.verify-form { display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end; border-top:1px solid var(--border); margin-top:18px; padding-top:18px; font-size:13px; }.verify-form > label:first-child { align-self:center; color:#334967; }.action-output { margin-top:14px; padding:12px; border-radius:8px; background:#f3f7fd; color:#334967; font-size:13px; }.action-output a { display:block; color:#1c5dd8; margin-top:7px; text-decoration:none; }.action-output p { margin:5px 0 0; }.action-output.verified { background:#eef8f2; color:#176b42; }.action-output.not-verified { background:#fff4f2; color:#a12b2b; }@media (max-width:800px) { .action-grid,.verify-form { grid-template-columns:1fr 1fr; }.action-grid button:last-child,.verify-form button { grid-column:span 2; } }