/* ================================================================
   XTUNING — Login v7  "NEON CIRCUIT"
   Dark navy + electric cyan + racing orange — glassmorphism card
   ================================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:     #030610;
  --cyan:   #00d4ff;
  --cyan2:  #00aacc;
  --orange: #ff6b35;
  --orange2:#ff9a00;
  --text:   #e8f4ff;
  --muted:  #3a4a6a;
  --card:   rgba(4,9,28,0.78);
  --cbdr:   rgba(0,212,255,0.2);
  --red:    #ff2244;
  --fo:     'Orbitron',monospace;
  --fr:     'Rajdhani',sans-serif;
}

html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--fo);cursor:default;user-select:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a,button,label,input,.lnk,.field-eye,.toggle{cursor:pointer;}

#roadCanvas,#trailCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;}
#roadCanvas{z-index:0;}#trailCanvas{z-index:1;}

.hud{position:fixed;left:0;right:0;z-index:20;display:flex;align-items:center;padding:0 26px;font-family:var(--fr);font-size:11px;letter-spacing:.15em;color:var(--muted);}
.hud--top{top:0;height:42px;background:rgba(3,6,16,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,212,255,.1);gap:16px;}
.hud--top::after{content:'';position:absolute;bottom:-1px;left:0;width:200px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);}
.hud-brand{font-family:var(--fo);font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--cyan);}
.hud-mid{display:flex;gap:6px;align-items:center;flex:1;justify-content:center;}
.hud-led{width:7px;height:7px;border-radius:50%;background:var(--cyan);opacity:.4;box-shadow:0 0 6px var(--cyan);animation:ledPulse 2s ease-in-out infinite;}
.hud-led--b{width:9px;height:9px;background:var(--orange);box-shadow:0 0 8px var(--orange);opacity:.7;animation-delay:.5s;}
@keyframes ledPulse{0%,100%{opacity:.3}50%{opacity:.9}}
.hud-clock{font-family:var(--fo);font-size:13px;color:rgba(0,212,255,.6);letter-spacing:.1em;}
.hud--bot{bottom:0;height:32px;background:rgba(3,6,16,.8);backdrop-filter:blur(8px);border-top:1px solid rgba(0,212,255,.08);justify-content:center;gap:14px;font-size:11px;color:rgba(0,212,255,.5);}
.hud-sep2{font-size:8px;color:var(--orange);opacity:.6;}

.tel{position:fixed;top:50%;transform:translateY(-50%);z-index:15;display:flex;flex-direction:column;gap:14px;opacity:0;animation:fadeSlide .8s ease .3s forwards;}
.tel--left{left:24px;align-items:flex-start;}
.tel--right{right:24px;align-items:flex-end;}
.tel-block{display:flex;flex-direction:column;gap:3px;}
.tel-val{font-family:var(--fo);font-size:28px;font-weight:900;color:var(--cyan);line-height:1;letter-spacing:.04em;text-shadow:0 0 20px rgba(0,212,255,.5);}
.tel-sm{font-size:17px;}
.tel-lbl{font-family:var(--fr);font-size:11px;font-weight:600;letter-spacing:.18em;color:rgba(0,212,255,.6);}
.tel-line{width:28px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);opacity:.35;}
.tel--right .tel-line{background:linear-gradient(270deg,var(--cyan),transparent);}

.mod{font-family:var(--fo);font-size:11px;font-weight:700;letter-spacing:.12em;color:rgba(0,180,220,.75);display:flex;align-items:center;gap:7px;}
.mod-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;background:var(--cyan);box-shadow:0 0 7px var(--cyan);animation:modPulse 2.2s ease-in-out infinite;}
.mod:nth-child(2) .mod-dot{animation-delay:.3s;}.mod:nth-child(3) .mod-dot{animation-delay:.6s;}.mod:nth-child(4) .mod-dot{animation-delay:.9s;}.mod:nth-child(5) .mod-dot{animation-delay:1.2s;}
.mod:nth-child(6) .mod-dot{background:var(--orange);box-shadow:0 0 7px var(--orange);}.mod:nth-child(7) .mod-dot{background:var(--orange);box-shadow:0 0 7px var(--orange);animation-delay:.4s;}
@keyframes modPulse{0%,100%{opacity:1}50%{opacity:.3}}
.mod-sub{font-family:var(--fr);font-size:10px;color:rgba(0,212,255,.45);letter-spacing:.08em;}

.stage{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:38px 0 30px;}

.card{width:460px;background:var(--card);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid var(--cbdr);border-radius:6px;padding:36px 40px 30px;position:relative;box-shadow:0 0 0 1px rgba(0,0,0,.9),0 30px 80px rgba(0,0,0,.85),0 0 60px rgba(0,180,255,.07),inset 0 1px 0 rgba(0,212,255,.08);opacity:0;animation:cardIn .9s cubic-bezier(.23,1,.32,1) .1s forwards;}
@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
.card::before,.card::after{content:'';position:absolute;width:18px;height:18px;border-color:var(--cyan);border-style:solid;opacity:.5;}
.card::before{top:-1px;left:-1px;border-width:1.5px 0 0 1.5px;border-radius:6px 0 0 0;}
.card::after{bottom:-1px;right:-1px;border-width:0 1.5px 1.5px 0;border-radius:0 0 6px 0;}
.card-top-line{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--cyan) 35%,var(--orange) 65%,transparent 100%);border-radius:6px 6px 0 0;}

.card-logo{font-family:var(--fo);font-size:38px;font-weight:900;letter-spacing:.06em;text-align:center;line-height:1;margin-bottom:6px;}
.logo-x{color:var(--cyan);text-shadow:0 0 20px rgba(0,212,255,.7),0 0 60px rgba(0,212,255,.25);}
.logo-w{color:var(--text);}
.card-sub{font-family:var(--fr);font-size:13px;font-weight:600;letter-spacing:.18em;color:rgba(0,212,255,.7);text-align:center;margin-bottom:26px;}

.card-form{display:flex;flex-direction:column;gap:14px;}
.field{display:flex;flex-direction:column;gap:5px;}
.field.err .field-inp{border-color:rgba(255,34,68,.55);box-shadow:0 0 0 2px rgba(255,34,68,.1);}
.field-lbl{font-family:var(--fr);font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--muted);display:flex;align-items:center;gap:6px;transition:color .2s;}
.field:focus-within .field-lbl{color:var(--cyan);}
.field-inp{width:100%;background:rgba(0,212,255,.04);border:1px solid rgba(0,212,255,.12);border-radius:4px;color:var(--text);font-family:var(--fr);font-size:16px;font-weight:500;padding:12px 16px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s;letter-spacing:.04em;}
.field-inp::placeholder{color:rgba(255,255,255,.2);font-size:15px;}
.field-inp:focus{background:rgba(0,212,255,.06);border-color:rgba(0,212,255,.45);box-shadow:0 0 0 3px rgba(0,212,255,.08),inset 0 1px 0 rgba(0,212,255,.06);}
.field-pw{position:relative;}
.field-pw .field-inp{padding-right:44px;}
.field-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;padding:3px;line-height:0;transition:color .2s;}
.field-eye:hover{color:var(--cyan);}
.field-err{font-family:var(--fr);font-size:11px;color:var(--red);letter-spacing:.04em;min-height:15px;}
.field-row{display:flex;align-items:center;justify-content:space-between;}
.toggle{display:flex;align-items:center;gap:8px;cursor:pointer;}
.toggle input{display:none;}
.toggle-track{width:32px;height:17px;background:rgba(0,212,255,.07);border:1px solid rgba(0,212,255,.15);border-radius:999px;position:relative;transition:background .2s,border-color .2s;}
.toggle-knob{width:11px;height:11px;background:var(--muted);border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .2s,background .2s;}
.toggle input:checked~.toggle-track{background:rgba(0,212,255,.18);border-color:rgba(0,212,255,.5);}
.toggle input:checked~.toggle-track .toggle-knob{transform:translateX(15px);background:var(--cyan);}
.toggle-lbl{font-family:var(--fr);font-size:14px;color:rgba(255,255,255,.5);letter-spacing:.04em;}
.lnk{font-family:var(--fr);font-size:14px;color:var(--muted);text-decoration:none;letter-spacing:.04em;transition:color .2s;}
.lnk:hover{color:var(--cyan);}
.form-err{font-family:var(--fr);font-size:13px;color:var(--red);background:rgba(255,34,68,.08);border:1px solid rgba(255,34,68,.22);border-radius:4px;padding:10px 14px;letter-spacing:.04em;}
.h{display:none!important;}

.sub-btn{position:relative;width:100%;background:none;border:none;cursor:pointer;border-radius:4px;overflow:hidden;margin-top:6px;padding:0;}
.sub-btn__bg{position:absolute;inset:0;background:linear-gradient(110deg,#c84000,var(--orange) 48%,var(--orange2));border-radius:4px;transition:filter .2s;}
.sub-btn:hover .sub-btn__bg{filter:brightness(1.18) saturate(1.2);}
.sub-btn:active .sub-btn__bg{filter:brightness(.85);}
.sub-btn__shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.18) 50%,transparent 80%);transform:translateX(-100%);transition:transform .55s ease;}
.sub-btn:hover .sub-btn__shine{transform:translateX(100%);}
.sub-btn::after{content:'';position:absolute;inset:0;border-radius:4px;border:1px solid rgba(255,154,0,.4);pointer-events:none;}
.sub-btn__txt{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:15px;font-family:var(--fo);font-size:15px;font-weight:700;letter-spacing:.16em;color:#fff;}
.sub-btn__sp{position:relative;z-index:1;display:flex;gap:5px;align-items:center;justify-content:center;padding:13px;}
.sub-btn__sp span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.9);animation:sp3 1s ease-in-out infinite;}
.sub-btn__sp span:nth-child(2){animation-delay:.14s;}.sub-btn__sp span:nth-child(3){animation-delay:.28s;}
@keyframes sp3{0%,80%,100%{transform:scale(.4);opacity:.3}40%{transform:scale(1);opacity:1}}
.sub-btn.ok .sub-btn__bg{background:linear-gradient(110deg,#005230,#00cc70,#40ff99);}

.card-foot{display:flex;justify-content:space-between;margin-top:20px;font-family:var(--fr);font-size:13px;color:rgba(255,255,255,.25);letter-spacing:.06em;}
.card-foot a{color:rgba(0,212,255,.25);text-decoration:none;transition:color .2s;}.card-foot a:hover{color:var(--cyan);}

.ecu-log{position:fixed;bottom:44px;left:16px;width:252px;z-index:15;display:flex;flex-direction:column;gap:3px;pointer-events:none;}
.ecu-line{font-family:var(--fr);font-size:10px;font-weight:600;letter-spacing:.06em;color:rgba(0,212,255,.52);white-space:nowrap;opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .25s;}
.ecu-line.show{opacity:1;transform:none;}.ecu-line.ok{color:rgba(0,255,130,.5);}.ecu-line.warn{color:rgba(255,175,0,.55);}

.sys-status{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding:7px 12px;background:rgba(0,0,0,.35);border:1px solid rgba(0,212,255,.08);border-radius:3px;}
.sys-lamps{display:flex;gap:7px;align-items:center;}
.sys-lamp{width:8px;height:8px;border-radius:50%;background:#1a2030;transition:background .3s,box-shadow .3s;}
.sys-lamp.amber{background:#ff8c00;box-shadow:0 0 8px #ff8c00;animation:lampBlink .55s ease-in-out infinite;}
.sys-lamp.yellow{background:#ffd000;box-shadow:0 0 8px #ffd000;}.sys-lamp.green{background:#00e87a;box-shadow:0 0 10px #00e87a;}
@keyframes lampBlink{0%,100%{opacity:1}50%{opacity:.1}}
.sys-label{font-family:var(--fo);font-size:10px;font-weight:700;letter-spacing:.25em;color:rgba(0,212,255,.45);flex:1;text-align:right;}

@keyframes hudTopIn{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes hudBotIn{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
.hud--top{animation:hudTopIn .6s cubic-bezier(.23,1,.32,1) forwards;}
.hud--bot{opacity:0;animation:hudBotIn .6s cubic-bezier(.23,1,.32,1) .25s forwards;}
@keyframes fadeSlide{from{opacity:0;transform:translateY(-50%) translateX(-14px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}
.tel--right{animation-name:fadeSlideR;}
@keyframes fadeSlideR{from{opacity:0;transform:translateY(-50%) translateX(14px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}
@keyframes shake{0%,100%{transform:none}18%{transform:translateX(-9px)}36%{transform:translateX(8px)}54%{transform:translateX(-5px)}72%{transform:translateX(5px)}88%{transform:translateX(-2px)}}
.card.shake{animation:shake .48s cubic-bezier(.36,.07,.19,.97);}
@keyframes cardErrFlash{0%{border-color:var(--cbdr);}12%{border-color:rgba(255,30,60,.95);}35%{border-color:rgba(255,30,60,.7);}65%{border-color:rgba(255,30,60,.35);}100%{border-color:var(--cbdr);}}
.card.err-flash{animation:cardErrFlash 1.1s cubic-bezier(.4,0,.2,1) forwards;}
.body-err-vignette{position:fixed;inset:0;z-index:9985;pointer-events:none;background:radial-gradient(ellipse 100% 100% at 50% 50%,transparent 35%,rgba(200,0,30,.28) 100%);animation:bodyErrVignette 1.2s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes bodyErrVignette{0%{opacity:0}15%{opacity:1}100%{opacity:0}}

@media(max-width:900px){.tel--right{display:none;}}
@media(max-width:700px){html,body{overflow-y:auto;height:auto;cursor:default;}.stage{position:relative;min-height:100vh;padding:50px 16px 40px;align-items:flex-start;}.card{width:100%;max-width:440px;margin:0 auto;padding:26px 22px 22px;}.card-logo{font-size:26px;}.tel{display:none;}.ecu-log{display:none;}.hud--top{padding:0 16px;}.hud-brand{font-size:9px;letter-spacing:.1em;}.hud-mid{display:none;}.hud--bot{flex-wrap:wrap;height:auto;padding:8px 16px;gap:8px;font-size:10px;}}
@media(max-width:400px){.card{padding:22px 16px 18px;}.card-logo{font-size:22px;}.card-sub{font-size:10px;letter-spacing:.14em;}.field-inp{font-size:16px;}.hud--bot{display:none;}}
@media(max-height:640px){html,body{overflow-y:auto;height:auto;}.stage{position:relative;min-height:100vh;padding:50px 16px 40px;}.tel{display:none;}}