:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0a0d12; color: #eef2f8; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 0%, #17243b 0, transparent 38%), #0a0d12; }
header { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; border-bottom: 1px solid #293241; background: #0a0d12dd; }
header > div { display: flex; align-items: center; gap: 12px; }
.mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #6de1c2; color: #07110f; font-weight: 900; }
main { width: min(1180px, 92vw); margin: 56px auto; }
.hero { max-width: 680px; padding: 48px; border: 1px solid #2b3b52; border-radius: 24px; background: #111821e8; box-shadow: 0 24px 80px #0008; }
h1 { font-size: clamp(2.2rem, 5vw, 4.5rem); line-height: 1; margin: 12px 0 24px; }
h2 { margin: 4px 0; font-size: 2rem; }
.eyebrow { color: #6de1c2; text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight: 800; }
button { border: 1px solid #3a4a61; border-radius: 10px; background: #182231; color: #eef2f8; padding: 10px 15px; cursor: pointer; }
button:hover, button.active { border-color: #6de1c2; color: #8af0d5; }
button.primary { background: #6de1c2; border-color: #6de1c2; color: #07110f; font-weight: 800; }
nav { display: flex; gap: 8px; margin-bottom: 32px; }
.section-title { display: flex; align-items: end; justify-content: space-between; margin-bottom: 22px; }
form { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 12px; align-items: end; padding: 18px; border: 1px solid #28364a; border-radius: 16px; margin-bottom: 24px; background: #101720; }
label { color: #aab6c7; font-size: .78rem; }
input { width: 100%; display: block; margin-top: 7px; border: 1px solid #35465e; border-radius: 8px; padding: 11px; color: #fff; background: #090d13; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.card { border: 1px solid #28364a; border-radius: 16px; padding: 18px; background: #101720; overflow-wrap: anywhere; }
.card h3 { margin-top: 0; }
.card p { display: grid; grid-template-columns: 82px 1fr; gap: 8px; color: #d4dbe5; }
.label { color: #8190a4; }
.card button { margin-right: 8px; }
.credential-form { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 14px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid #28364a; border-radius: 0; background: transparent; }
.credential-form input { margin-top: 0; }
#status { min-height: 24px; margin-bottom: 12px; }
#status.error { color: #ff8f91; } #status.ok { color: #8af0d5; }
code { color: #8af0d5; }
@media (max-width: 800px) { form { grid-template-columns: 1fr; } nav { overflow-x: auto; } .hero { padding: 30px; } }