/* Ecran de pornire: fundal motorsport + turometru + card de autentificare */
.titlebar{height:36px;display:flex;align-items:center;gap:10px;padding-left:14px;padding-right:150px;font:600 12px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);background:var(--bg);border-bottom:1px solid var(--line);-webkit-app-region:drag;user-select:none;position:sticky;top:0;z-index:40}
.titlebar i{width:8px;height:8px;border-radius:2px;background:var(--accent);transform:rotate(45deg)}
.titlebar button{-webkit-app-region:no-drag}
.desk .app{min-height:calc(100% - 36px)}
.desk .side{top:36px;height:calc(100vh - 36px)}

#login{position:fixed;inset:0;z-index:100;display:grid;grid-template-columns:1.1fr 1fr;background:#07090c;color:#eef2f6;overflow:hidden;font-family:var(--f-body)}
#login.out{animation:loginOut .7s cubic-bezier(.7,0,.3,1) forwards}
@keyframes loginOut{to{opacity:0;transform:scale(1.04);filter:blur(6px)}}
#login .bg{position:absolute;inset:0;background-size:cover;background-position:center}
#login canvas{position:absolute;inset:0;width:100%;height:100%}
#login .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,10,.25),rgba(5,7,10,.55) 55%,rgba(5,7,10,.92))}
#login .stripes{position:absolute;left:-10%;bottom:21%;width:75%;height:58px;display:flex;flex-direction:column;gap:7px;transform:skewX(-28deg);z-index:1}
#login .stripes span{display:block;height:14px;border-radius:2px;transform-origin:left;animation:stripeIn 1s cubic-bezier(.2,.8,.2,1) both}
#login .stripes span:nth-child(1){background:#ff8a2a;animation-delay:.1s}
#login .stripes span:nth-child(2){background:#f2f4f7;width:88%;animation-delay:.22s}
#login .stripes span:nth-child(3){background:#3fb6ff;width:74%;animation-delay:.34s}
@keyframes stripeIn{from{transform:scaleX(0)}}
#login .lg-car{position:absolute;left:4%;bottom:12%;width:min(62%,780px);z-index:2;animation:carIn 1.4s cubic-bezier(.15,.85,.25,1) .2s both;filter:drop-shadow(0 30px 30px rgba(0,0,0,.6))}
@keyframes carIn{from{transform:translateX(-60%);opacity:0}}
#login.custom .lg-car,#login.custom .stripes{display:none}

.lg-left{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:space-between;padding:56px 48px 30px}
.lg-brand{display:flex;align-items:center;gap:14px}
.lg-brand .brand-mark{width:48px;height:48px;font-size:22px}
.lg-brand h1{font:700 30px var(--f-display);letter-spacing:.02em}
.lg-brand small{display:block;color:#9aa7b4;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.lg-bgbtns{display:flex;gap:8px;flex-wrap:wrap}
.lg-bgbtns button{all:unset;cursor:pointer;font-size:12px;color:#c3ccd6;padding:7px 12px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);transition:all .25s}
.lg-bgbtns button:hover{background:#ff8a2a;color:#1a0e02;border-color:#ff8a2a}

.lg-right{position:relative;z-index:3;display:grid;place-items:center;padding:40px}
.lg-stack{width:min(400px,100%);display:flex;flex-direction:column;align-items:center;gap:22px}
.tacho{width:230px;height:230px}
.tacho .tick{stroke:#5d6a77;stroke-width:2}
.tacho .tick.big{stroke:#d7dee6;stroke-width:3}
.tacho .red{stroke:#ff3b4e}
.tacho text{fill:#c9d3dd;font:600 13px var(--f-mono);text-anchor:middle}
.tacho .unit{fill:#7d8a97;font:500 9px var(--f-body);letter-spacing:.2em}
.tacho .needle{transform-origin:115px 115px;transition:transform .9s cubic-bezier(.3,1.4,.4,1)}
.tacho .rpm{fill:#fff;font:700 22px var(--f-mono)}
.lg-status{font:600 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#9aa7b4;min-height:18px}
.lg-bar{width:100%;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.lg-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fb6ff,#ff8a2a);transition:width .5s ease}

.lg-card{width:100%;background:rgba(18,23,30,.82);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:14px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8);animation:pop .5s cubic-bezier(.2,.9,.3,1.2) both}
.lg-card h2{font:600 22px var(--f-display)}
.lg-card p{margin:0;color:#9aa7b4;font-size:13px}
.lg-card .field input{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#eef2f6}
.lg-card .field label{color:#9aa7b4}
.lg-user{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.lg-user .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#3fb6ff,#ff8a2a);color:#0b0f14;font:700 16px var(--f-display)}
.lg-err{color:#ff6b78;font-size:13px;min-height:18px}
.lg-card .btn.primary{justify-content:center;padding:13px;font-size:15px}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.lg-foot{font-size:11px;color:#6f7c89;text-align:center}

@media (max-width:860px){#login{grid-template-columns:1fr}.lg-left{display:none}}

/* Lacat, cheie de recuperare */
.lg-head{display:flex;gap:14px;align-items:center}
.lg-head h2{font-size:20px}
.padlock{width:40px;height:46px;flex:none;color:#ff8a2a;filter:drop-shadow(0 0 10px rgba(255,138,42,.45))}
.padlock .shackle{transform-origin:35px 25px;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.padlock.open{color:#3ccf8e;filter:drop-shadow(0 0 12px rgba(60,207,142,.6))}
.padlock.open .shackle{transform:translateY(-6px) rotate(28deg)}
.rec-code{font:700 15px var(--f-mono);letter-spacing:0;text-align:center;padding:14px;border-radius:12px;background:rgba(255,138,42,.08);border:1px dashed rgba(255,138,42,.6);color:#ffd2ad;user-select:all;word-break:break-all}
.lg-note{color:#ffc548!important}
.lg-check{display:flex;gap:10px;align-items:center;font-size:14px;cursor:pointer}
.lg-check input{width:18px;height:18px;accent-color:#ff8a2a}
.lg-link{all:unset;cursor:pointer;align-self:center;font-size:13px;color:#7fc9ff;transition:color .2s}
.lg-link:hover{color:#ff8a2a;text-decoration:underline}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none!important}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* selector limbă pe ecranul de pornire */
.lg-lang{position:absolute;top:46px;right:26px;z-index:6}

/* v1.10.1 – ecrane mici: formularul nu mai iese din ecran, se poate derula */
#login{overflow-y:auto;overscroll-behavior:contain}
#login>canvas,#login>.bg,#login>.shade,#login>.stripes,#login>.lg-car{position:fixed}
#login .lg-right{min-height:100vh;align-content:center}
@media (max-height:860px){
  #login .tacho{width:150px;height:150px}
  #login .lg-stack{gap:14px}
  #login .lg-right{align-content:start;padding-top:24px;padding-bottom:40px}
  #login .lg-card{padding:20px;gap:10px}
}