:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: #0e131b; color: #e6ebf2; }
* { box-sizing: border-box; }
body { margin: 0; }
.preview { position: fixed; inset: 0; padding: 32px; filter: blur(9px); opacity: .6; pointer-events: none; overflow: hidden; }
.preview header { display: flex; justify-content: space-between; padding: 10px 0 32px; }
.metrics, .boards { display: grid; gap: 20px; margin-bottom: 20px; }
.metrics { grid-template-columns: repeat(4, 1fr); }
.boards { grid-template-columns: 2fr 1fr; }
.panel { padding: 24px; background: #18212e; border: 1px solid #344153; border-radius: 14px; }
.panel b { font-size: 40px; }
.line { display: block; height: 12px; width: 75%; margin: 16px 0; border-radius: 4px; background: #344153; }
.bars { display: flex; align-items: end; gap: 24px; height: 200px; }
.bars i { width: 15%; height: 70%; background: #d17a26; border-radius: 6px 6px 0 0; }
.bars i:nth-child(2n) { height: 45%; background: #597ca1; }
.bars i:nth-child(3) { height: 90%; }
.overlay { position: relative; display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px; background: #080e1780; }
.login { width: 100%; max-width: 440px; padding: 36px; background: #151d29; border: 1px solid #354153; border-radius: 20px; box-shadow: 0 24px 100px #0009; }
.eyebrow { color: #f0a14b; font-size: 11px; font-weight: 700; letter-spacing: 2px; }
h1 { font-size: 27px; margin: 20px 0 10px; }
p { color: #a9b4c4; font-size: 14px; line-height: 1.6; }
label { display: block; font-size: 13px; margin: 22px 0 8px; }
input:not([type=checkbox]) { width: 100%; padding: 13px; border: 1px solid #46536a; border-radius: 8px; background: #0d1420; color: #fff; font: inherit; }
input:focus-visible, button:focus-visible { outline: 2px solid #f0a14b; outline-offset: 3px; }
.remember { display: flex; align-items: center; gap: 8px; margin: 20px 0; }
input[type=checkbox] { accent-color: #f08a1c; width: 17px; height: 17px; }
button { width: 100%; padding: 14px; border: 0; border-radius: 8px; background: #f08a1c; color: #101722; font: inherit; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .65; cursor: wait; }
.hint { font-size: 12px; margin-bottom: 0; }
#login-error { color: #ffb4ac; }
@media (max-width: 480px) { .login { padding: 26px; } .overlay { padding: 16px; } }