:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: #020711; color: #eaf8ff; }
* { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% -10%, #123250, #020711 55%); }
.shell { width: min(92vw, 520px); margin: 0 auto; padding: 8vh 0; } .brand { margin-bottom: 28px; } .brand span, .eyebrow { color: #49f5ff; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; }
h1 { margin: 8px 0; font-size: clamp(40px, 10vw, 64px); line-height: .95; } h2 { margin: 8px 0; } p { color: #9cb2c5; line-height: 1.5; }
.panel { padding: 24px; border: 1px solid #2c5068; border-radius: 8px; background: rgba(7, 21, 37, .92); box-shadow: 0 18px 60px rgba(0,0,0,.35); } .tabs { display: flex; gap: 8px; margin-bottom: 22px; }
button { border: 1px solid #31566e; border-radius: 6px; padding: 11px 14px; color: #dffaff; background: #0c2438; cursor: pointer; font-weight: 800; } button:hover, button.active { border-color: #49f5ff; color: #49f5ff; } .primary { width: 100%; margin-top: 8px; background: #0e5260; }
label { display: block; margin: 14px 0; color: #bfd2df; font-size: 13px; font-weight: 700; } input { display: block; width: 100%; margin-top: 7px; padding: 12px; border: 1px solid #31566e; border-radius: 5px; color: #fff; background: #061522; font: inherit; } input:focus { outline: 2px solid #49f5ff; outline-offset: 1px; }
.status { min-height: 24px; margin: 14px 0 0; } .status.error { color: #ff9c8d; } .status.good { color: #62e6ae; } .hidden { display: none; }
.download { display: grid; gap: 8px; margin-top: 18px; text-align: center; } .download-button { display: inline-block; padding: 13px 16px; border: 1px solid #49f5ff; border-radius: 6px; color: #eaf8ff; background: #0e5260; font-weight: 800; text-decoration: none; } .download-button:hover { background: #146b79; } .download small { color: #718da1; }