:root{--bg:#fff;--fg:#14213d;--muted:#667085;--acc:#2563eb;--card:#f3f6fb;--line:#e3e8f0;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#0f1420;--fg:#e8edf7;--muted:#98a2b3;--acc:#5b8def;--card:#18202f;--line:#252f43}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--acc)}
header,main,footer{max-width:980px;margin:0 auto;padding:0 1.25rem}
header{display:flex;justify-content:space-between;align-items:center;padding-top:1.1rem;padding-bottom:1.1rem}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.2rem;color:var(--fg);text-decoration:none}
.logo i{width:22px;height:22px;border-radius:6px;background:var(--acc);display:inline-block}
nav{display:flex;align-items:center;gap:1.25rem}nav a{text-decoration:none;color:var(--fg)}
.btn{display:inline-block;border:0;background:var(--acc);color:#fff!important;padding:.65rem 1.3rem;border-radius:8px;font:inherit;cursor:pointer;text-decoration:none}
.btn.sm{padding:.35rem .9rem}
.hero{text-align:center;padding:3.5rem 0 2.5rem}
h1{font-size:clamp(2rem,5vw,3rem);line-height:1.15;margin:0 0 1rem}
.hero p{color:var(--muted);max-width:34em;margin:0 auto 2rem;font-size:1.1rem}
.drop{max-width:560px;margin:0 auto;padding:2.5rem 1rem;border:2px dashed var(--acc);border-radius:14px;background:var(--card);cursor:pointer;display:flex;flex-direction:column;gap:.3rem}
.drop.on{background:var(--line)}.drop b{font-size:1.2rem}.drop span{color:var(--muted)}
.status{max-width:560px;margin:1.25rem auto 0}.bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden}
#pr{height:100%;width:0;background:var(--acc);transition:width .25s}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.25rem;padding:1rem 0 3rem}
.cols>div{background:var(--card);padding:1.25rem;border-radius:12px}.cols h3{margin:0 0 .4rem}.cols p{margin:0;color:var(--muted)}
.card{max-width:400px;margin:3rem auto;padding:0 0 3rem}.card label{display:block;margin-bottom:1rem;font-size:.9rem}
input[type=email],input[type=password]{display:block;width:100%;margin-top:.3rem;padding:.6rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);font:inherit}
.err{color:#d92d20}.muted{color:var(--muted)}.doc{max-width:680px;padding:2rem 0 3rem}
.plan .price{font-size:2rem;font-weight:700;color:var(--fg);margin-bottom:.5rem}.plan small{font-size:.9rem;color:var(--muted);font-weight:400}
.hl{outline:2px solid var(--acc)}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding-top:1.5rem;padding-bottom:2rem;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
footer a{margin-left:1rem;color:var(--muted)}