:root{--lf-night:#071419;--lf-deep:#0b2630;--lf-cyan:#4fb8c4;--lf-amber:#ffad32;--lf-gold:#ffd27b;--lf-glass:rgba(255,255,255,.82)}
body:not(.login-page){background:radial-gradient(circle at 78% 8%,rgba(49,138,150,.12),transparent 34%),radial-gradient(circle at 44% 92%,rgba(255,165,43,.1),transparent 32%),#f2f5f4}
body:not(.login-page) .rail{background-color:var(--lf-night);background-image:linear-gradient(180deg,rgba(4,15,20,.82),rgba(8,28,35,.95)),url('../lichtfieber-bg.jpg');background-size:auto 100%;background-position:center;box-shadow:14px 0 50px rgba(5,24,31,.18);border-right:1px solid rgba(255,190,85,.2)}
body:not(.login-page) .rail:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 48% 20%,rgba(255,170,44,.2),transparent 15%),linear-gradient(110deg,transparent 35%,rgba(255,255,255,.04) 48%,transparent 60%);background-size:100% 100%,220% 100%;animation:lfSweep 11s ease-in-out infinite}
body:not(.login-page) .rail>*{position:relative;z-index:2}
.brand-portrait{box-shadow:0 0 0 3px rgba(255,255,255,.75),0 0 28px rgba(255,171,49,.52)!important}
.nav button.active{background:linear-gradient(90deg,rgba(255,173,50,.19),rgba(79,184,196,.1))!important;border-left-color:var(--lf-amber)!important}
.topbar{background:rgba(255,255,255,.78)!important;backdrop-filter:blur(18px);border-bottom:1px solid rgba(14,55,66,.1)}
.screen.active{animation:screenIn .36s ease both}
.screen h1{letter-spacing:-.035em}.screen .lead{color:#4e6269}
.task,.summary,.score,.d2-learning-card,.d2-task-card,.d2-feedback{box-shadow:0 16px 38px rgba(10,40,48,.08)!important;border-color:rgba(31,84,94,.14)!important}
.d2-kicker,.btn:not(.secondary){background:linear-gradient(110deg,#103845,#186170)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 20px rgba(11,66,78,.17)}
.btn:not(.secondary):hover{transform:translateY(-1px);box-shadow:0 11px 25px rgba(11,66,78,.24)}
.accent-rule{background:linear-gradient(90deg,var(--lf-amber),var(--lf-cyan),transparent)!important;height:3px!important}
.server-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:#e4f4ec;color:#176343;font-size:.74rem;font-weight:800}.server-pill:before{content:"";width:7px;height:7px;border-radius:50%;background:#35a76d;box-shadow:0 0 0 4px rgba(53,167,109,.12)}
.server-user{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#53666d;font-size:.78rem}.logout-form{margin:0;display:inline}.logout-form button{height:38px}
@keyframes lfSweep{0%,100%{background-position:0 0,-30% 0}50%{background-position:0 0,130% 0}}
@keyframes screenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.login-page{margin:0;min-height:100vh;background:var(--lf-night);font-family:"Segoe UI",Arial,sans-serif;color:#fff}
.login-shell{position:relative;isolation:isolate;min-height:100vh;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);align-items:center;gap:clamp(38px,7vw,110px);padding:clamp(28px,6vw,90px);overflow:hidden;background:linear-gradient(90deg,rgba(3,11,15,.93) 0%,rgba(3,15,19,.7) 52%,rgba(4,18,23,.42)),url('../lichtfieber-bg.jpg') center/cover no-repeat}
.login-atmosphere{position:absolute;z-index:-1;inset:-25%;background:radial-gradient(circle at 64% 52%,rgba(255,154,23,.22),transparent 14%),radial-gradient(circle at 78% 42%,rgba(41,146,162,.2),transparent 22%);filter:blur(12px);animation:loginPulse 7s ease-in-out infinite}
.login-story{max-width:780px}.login-kicker{display:inline-flex;padding:8px 13px;border:1px solid rgba(255,197,104,.42);border-radius:99px;color:var(--lf-gold);font-size:.77rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:rgba(7,20,25,.5);backdrop-filter:blur(10px)}
.login-story h1{font-size:clamp(2.8rem,6.2vw,6.7rem);line-height:.92;letter-spacing:-.065em;margin:28px 0;text-wrap:balance}.login-story p{max-width:690px;color:#c4d5d8;font-size:clamp(1.02rem,1.5vw,1.3rem);line-height:1.65}.login-signature{display:flex;align-items:center;gap:13px;margin-top:34px;color:#9fb7bc;font-weight:700}.login-signature span{width:62px;height:2px;background:linear-gradient(90deg,var(--lf-amber),var(--lf-cyan))}
.login-card{position:relative;padding:42px;border:1px solid rgba(255,255,255,.16);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.075));box-shadow:0 28px 90px rgba(0,0,0,.42);backdrop-filter:blur(28px)}
.login-card>img{position:absolute;right:32px;top:-38px;width:82px;height:82px;object-fit:cover;border-radius:50%;border:3px solid rgba(255,255,255,.85);box-shadow:0 0 32px rgba(255,168,32,.46)}.login-card .eyebrow{color:var(--lf-gold);letter-spacing:.12em}.login-card h2{font-size:2rem;margin:10px 0 5px}.login-card>p{margin:0 0 25px;color:#bdd0d4}.login-card form{display:grid;gap:16px}.login-card label{display:grid;gap:7px;color:#dce7e9;font-size:.82rem;font-weight:800}.login-card input{width:100%;padding:14px 15px;border:1px solid rgba(255,255,255,.2);border-radius:11px;background:rgba(1,12,16,.52);color:#fff;font:inherit}.login-card input:focus{outline:3px solid rgba(255,178,53,.35);border-color:var(--lf-amber)}.login-card button{display:flex;justify-content:space-between;padding:15px 17px;border:0;border-radius:11px;background:linear-gradient(105deg,var(--lf-amber),#ff7a23);color:#17242a;font:inherit;font-size:1rem;font-weight:800;cursor:pointer}.login-card small{display:block;margin-top:20px;color:#93aeb4;line-height:1.5}.login-error{padding:11px 13px;margin:0 0 16px;border-left:4px solid #ff765f;background:rgba(143,30,20,.35);border-radius:6px;color:#ffe2dc}
@keyframes loginPulse{50%{transform:translate3d(-2%,1%,0) scale(1.06);filter:blur(18px)}}
@media(max-width:900px){.login-shell{grid-template-columns:1fr;align-content:center}.login-story h1{font-size:clamp(2.6rem,12vw,5rem)}.login-card{max-width:560px}.server-user{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.rail:after,.login-atmosphere,.screen.active{animation:none!important}}