:root { color-scheme: dark; --navy:#071426; --panel:#10233e; --line:#294666; --cream:#f8f1df; --gold:#f5bd4f; --muted:#b8c7d9; --red:#ff9a8e; --green:#9be4b0; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at top,#173760 0,#071426 53%); color:var(--cream); font:16px/1.45 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; min-height:100vh; }
main { width:min(1040px,calc(100% - 32px)); margin:0 auto; padding:56px 0 80px; }
header { max-width:720px; margin-bottom:30px; } h1 { font-size:clamp(2.3rem,7vw,4.5rem); line-height:1; margin:0 0 14px; letter-spacing:-.045em; } .eyebrow { color:var(--gold); font-size:.74rem; font-weight:800; letter-spacing:.13em; margin:0 0 9px; } .lede,.privacy,.filename { color:var(--muted); }
.upload-card,.summary-card,.platform,.status { border:1px solid var(--line); background:color-mix(in srgb,var(--panel) 88%, transparent); border-radius:18px; padding:22px; } .drop-zone { min-height:170px; border:2px dashed #54779e; border-radius:13px; display:grid; place-content:center; justify-items:center; gap:5px; cursor:pointer; text-align:center; color:var(--muted); } .drop-zone strong { color:var(--cream); font-size:1.1rem; } .icon { color:var(--gold); font-size:2rem; } input[type=file] { position:absolute; width:1px; height:1px; opacity:0; } button { border:0; border-radius:10px; padding:12px 18px; margin-top:10px; background:var(--gold); color:#14100a; font-size:1rem; font-weight:800; cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.45; } .privacy { font-size:.78rem; margin:18px 0 0; }
.status { margin:24px 0; } .status.success { border-color:#43875c; color:var(--green); } .status.error { border-color:#914a45; color:var(--red); } #results { margin-top:24px; } .summary-card { margin-bottom:16px; } .summary-card p:last-child { margin-bottom:0; } .review { margin-top:15px; padding:10px; border-radius:9px; color:#ffc18b; background:#3a2a1b; } .grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .platform h2 { margin-top:0; font-size:1.12rem; } label { display:block; font-weight:700; margin-top:13px; } small { color:var(--muted); font-weight:500; } textarea { display:block; width:100%; margin-top:6px; min-height:86px; resize:vertical; border:1px solid #426488; border-radius:9px; padding:10px; background:#071426; color:var(--cream); font:inherit; } #yt-title { min-height:58px; } @media (max-width:680px) { main { padding-top:35px; } .grid { grid-template-columns:1fr; } }