:root{
  --bg:#08090b; --bg2:#0f1115; --panel:#14171c; --panel2:#1a1e25; --line:#262b34; --line2:#323945;
  --txt:#e9ecf1; --mut:#8a93a3; --dim:#5d6676;
  --m1:#5bb4f0; --m2:#1c69d4; --m3:#e22718;
  --ok:#2fbf71; --warn:#f0b03a; --err:#ef4b4b;
  --r:10px; --font:'Saira',system-ui,sans-serif; --head:'Saira',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--txt);font:15px/1.55 var(--font);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
body.app{background:radial-gradient(1200px 500px at 85% -10%,rgba(28,105,212,.14),transparent 60%),var(--bg)}
a{color:var(--m1);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--head);font-weight:700;letter-spacing:1px;line-height:1.1;margin:0 0 .5em;text-transform:uppercase}
h1{font-size:34px} h2{font-size:26px} h3{font-size:19px}
.muted{color:var(--mut)} .small{font-size:13px}

/* M stripe */
.mstripe{display:inline-flex;transform:skewX(-20deg);gap:3px;height:22px}
.mstripe i{width:6px;display:block}
.mstripe i:nth-child(1){background:var(--m1)} .mstripe i:nth-child(2){background:var(--m2)} .mstripe i:nth-child(3){background:var(--m3)}
.mstripe.big{height:34px;gap:4px} .mstripe.big i{width:10px}

/* top bar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:22px;padding:12px 24px;background:rgba(8,9,11,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--m1) 0 33%,var(--m2) 33% 66%,var(--m3) 66%);opacity:.7}
.brand{display:flex;align-items:center;gap:12px;color:var(--txt)} .brand:hover{text-decoration:none}
.brand-txt{font-family:var(--head);font-weight:800;font-size:22px;text-transform:uppercase;line-height:1}
.brand-txt small{display:block;font-size:11px;letter-spacing:2.5px;color:var(--mut);font-weight:600;margin-top:2px}
.nav{display:flex;gap:4px;flex:1}
.nav a{color:var(--mut);padding:8px 12px;border-radius:8px;font-weight:500;font-size:14px}
.nav a:hover{color:var(--txt);background:var(--panel);text-decoration:none}
.nav a.on{color:var(--txt);background:var(--panel2);box-shadow:inset 0 -2px 0 var(--m1)}
.nav a.muted{margin-left:auto}
.credit-pill{border:1px solid var(--line2);border-radius:99px;padding:6px 14px;color:var(--mut);font-size:13px;white-space:nowrap}
.credit-pill b{color:var(--txt);font-size:15px}
#navtoggle{display:none!important}
.burger{display:none;cursor:pointer;flex-direction:column;gap:4px;padding:6px;margin-left:auto}
.burger span{width:22px;height:2px;background:var(--txt);display:block}

/* layout */
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:28px 24px 60px;flex:1}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card h3{margin-bottom:14px}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.head-row h1{margin:0}
.stat{position:relative;overflow:hidden}
.stat .lbl{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:1.5px}
.stat .val{font-family:var(--head);font-weight:800;font-size:40px;line-height:1.1;margin-top:4px}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--m2)}
.stat.s-credit::before{background:var(--m1)} .stat.s-warn::before{background:var(--warn)} .stat.s-ok::before{background:var(--ok)}

/* buttons & forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;background:var(--m2);color:#fff;font:600 14px var(--font);padding:11px 20px;border-radius:8px;text-transform:uppercase;letter-spacing:.8px;transition:.15s}
.btn:hover{background:#2a7be6;text-decoration:none}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--txt)} .btn.ghost:hover{border-color:var(--m1)}
.btn.red{background:var(--m3)} .btn.red:hover{background:#f03a2b}
.btn.ok{background:var(--ok)} .btn.sm{padding:7px 12px;font-size:12px}
.btn.block{width:100%}
label{display:block;font-size:13px;color:var(--mut);font-weight:500}
input,select,textarea{display:block;width:100%;margin-top:6px;background:var(--bg2);border:1px solid var(--line2);color:var(--txt);border-radius:8px;padding:11px 12px;font:15px var(--font)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--m1);box-shadow:0 0 0 3px rgba(91,180,240,.15)}
textarea{min-height:96px;resize:vertical}
input[type=checkbox]{width:auto;display:inline-block;margin:0 8px 0 0;accent-color:var(--m2)}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.form-grid .full{grid-column:1/-1} .form-grid .two{grid-column:span 2}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:0 0 16px}
legend{font-family:var(--head);font-weight:700;text-transform:uppercase;font-size:18px;padding:0 8px}
.inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap} .inline > *{flex:1;min-width:120px} .inline .btn{flex:0 0 auto}

/* services */
.svc-cat{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:1.5px;margin:12px 0 8px}
.svc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.svc{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:10px 12px;color:var(--txt);cursor:pointer;font-size:14px}
.svc:has(input:checked){border-color:var(--m1);background:rgba(28,105,212,.12)}
.svc em{font-style:normal;color:var(--m1);font-weight:600;font-size:13px;white-space:nowrap}
.total-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r);padding:16px 20px}
.total-bar .tot{font-family:var(--head);font-size:28px;font-weight:800}

/* dropzone */
.dropzone{position:relative;border:2px dashed var(--line2);border-radius:var(--r);padding:34px 20px;text-align:center;transition:.15s;background:var(--bg2)}
.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;height:100%}
.dropzone.drag,.dropzone:hover{border-color:var(--m1)}
.dropzone.has{border-style:solid;border-color:var(--ok)}
.dz-title{font-family:var(--head);font-weight:700;font-size:20px;text-transform:uppercase}
.dz-name{color:var(--ok);margin-top:6px;font-weight:600}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--mut);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:1px;padding:12px 14px;background:var(--panel2);border-bottom:1px solid var(--line)}
td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;background:var(--panel)}
tr:last-child td{border-bottom:0}
tr.row-link:hover td{background:var(--panel2);cursor:pointer}
.veh{font-weight:600} .veh small{display:block;color:var(--mut);font-weight:400}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--m3);margin-left:6px;vertical-align:middle}
.pos{color:var(--ok);font-weight:600} .neg{color:var(--err);font-weight:600}

.badge{display:inline-block;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:600;letter-spacing:.3px;white-space:nowrap}
.st-pending{background:rgba(240,176,58,.14);color:var(--warn)}
.st-proc{background:rgba(91,180,240,.14);color:var(--m1)}
.st-done{background:rgba(47,191,113,.14);color:var(--ok)}
.st-cancel{background:rgba(239,75,75,.14);color:var(--err)}
.st-active{background:rgba(47,191,113,.14);color:var(--ok)}
.st-blocked{background:rgba(239,75,75,.14);color:var(--err)}

/* detail */
dl.spec{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:14px}
dl.spec dt{color:var(--mut)} dl.spec dd{margin:0;font-weight:500;word-break:break-word}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{background:var(--panel2);border:1px solid var(--line2);padding:4px 10px;border-radius:6px;font-size:13px}
.dl-box{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:12px 14px;margin-bottom:10px}
.dl-box.ready{border-color:var(--ok);background:rgba(47,191,113,.07)}
.dl-box b{display:block;font-size:14px;word-break:break-all} .dl-box span{font-size:12px;color:var(--mut)}

.chat{display:flex;flex-direction:column;gap:10px;max-height:460px;overflow-y:auto;padding-right:4px;margin-bottom:14px}
.msg{max-width:85%;padding:10px 14px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2);font-size:14px;white-space:pre-wrap;word-break:break-word}
.msg.me{align-self:flex-end;background:rgba(28,105,212,.18);border-color:rgba(28,105,212,.4)}
.msg .meta{display:block;font-size:11px;color:var(--mut);margin-top:4px;white-space:normal}
.empty{color:var(--mut);text-align:center;padding:30px 10px}

.flash{padding:12px 16px;border-radius:8px;margin-bottom:16px;border:1px solid;font-size:14px}
.flash-ok{background:rgba(47,191,113,.1);border-color:rgba(47,191,113,.35);color:#9be7bd}
.flash-err{background:rgba(239,75,75,.1);border-color:rgba(239,75,75,.35);color:#ffb0b0}
.flash-warn{background:rgba(240,176,58,.1);border-color:rgba(240,176,58,.35);color:#ffd88e}

.pack{text-align:center} .pack .val{font-family:var(--head);font-weight:800;font-size:44px}
.pack .price{color:var(--mut);margin-bottom:12px}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters a{padding:6px 12px;border-radius:99px;border:1px solid var(--line2);color:var(--mut);font-size:13px}
.filters a.on{border-color:var(--m1);color:var(--txt);background:rgba(28,105,212,.12)}
.filters a:hover{text-decoration:none;color:var(--txt)}

/* auth */
.auth-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:28px 16px;
  background:radial-gradient(900px 500px at 0% 0%,rgba(28,105,212,.22),transparent 60%),radial-gradient(700px 400px at 100% 100%,rgba(226,39,24,.12),transparent 60%),var(--bg)}
.auth-wrap > .flash{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:5;max-width:92vw}
.auth-card{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:800px;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.auth-brand{padding:32px;background:linear-gradient(160deg,#0d1622,#0a0b0e 70%);border-right:1px solid var(--line);position:relative}
.auth-logo{display:block;width:100%;max-width:210px;height:auto;margin:0 0 22px}
.auth-brand h1{font-size:32px;margin:0 0 6px}
.auth-brand .kicker{color:var(--m1);letter-spacing:3px;text-transform:uppercase;font-size:12px;font-weight:600;margin:0 0 26px}
.auth-brand .slogan{font-size:15px;color:#c7cdd8;max-width:340px}
.auth-points{list-style:none;padding:0;margin:18px 0 0}
.tagline{font-family:var(--head);font-weight:700;text-transform:uppercase;font-size:16px;line-height:1.25;letter-spacing:.5px;color:var(--m1);margin:14px 0 0}
.auth-points li{padding:9px 0 9px 22px;position:relative;color:var(--mut);border-top:1px solid var(--line);font-size:12.5px;line-height:1.4}
.auth-points li b{display:block;color:var(--txt);font-size:13.5px;font-weight:600;margin-bottom:2px}
.auth-points li::before{content:"";position:absolute;left:0;top:16px;width:12px;height:3px;background:linear-gradient(90deg,var(--m1),var(--m2) 50%,var(--m3));transform:skewX(-20deg)}
.auth-form{padding:32px;display:flex;flex-direction:column;gap:12px}
.auth-form h2{margin:0}
.auth-tabs{display:flex;gap:6px;margin-bottom:6px}
.auth-tabs a{flex:1;text-align:center;padding:10px;border-radius:8px;color:var(--mut);border:1px solid var(--line2);font-weight:600;font-size:14px}
.auth-tabs a.on{background:var(--m2);border-color:var(--m2);color:#fff}
.auth-tabs a:hover{text-decoration:none}
.specs-btn{margin-top:4px;border-color:var(--m2)} .specs-btn:hover{background:rgba(28,105,212,.15)}
.row-between{display:flex;justify-content:space-between;align-items:center;font-size:13px}

.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 24px;border-top:1px solid var(--line);color:var(--dim);font-size:13px}
.foot a{color:var(--mut)}

@media (max-width:900px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)} .split{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr 1fr} .form-grid .two{grid-column:1/-1}
  .auth-card{grid-template-columns:1fr} .auth-brand{padding:30px;border-right:0;border-bottom:1px solid var(--line)}
  .auth-brand h1{font-size:34px} .auth-logo{max-width:220px;margin-bottom:22px} .auth-points{display:none} .auth-form{padding:30px}
  .burger{display:flex} .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg2);border-bottom:1px solid var(--line);padding:10px 16px}
  #navtoggle:checked ~ .nav{display:flex} .nav a.muted{margin-left:0}
  .topbar{padding:12px 16px;gap:12px} .credit-pill{order:2}
}
@media (max-width:560px){
  .wrap{padding:20px 16px 50px} .g2,.g3,.g4,.form-grid{grid-template-columns:1fr} .form-grid .two{grid-column:auto}
  h1{font-size:28px} .stat .val{font-size:32px} .msg{max-width:95%}
  .hide-sm{display:none}
  .brand{gap:8px} .brand-txt{font-size:17px} .brand-txt small{font-size:9px;letter-spacing:1.5px} .mstripe{height:18px}
  .credit-pill{padding:5px 10px;font-size:12px} .credit-pill b{font-size:14px} .topbar{gap:8px}
}

/* ---- Login compact (o treime) ---- */
.auth-card{grid-template-columns:1fr;max-width:320px;border-radius:14px}
.auth-brand{padding:24px 22px 4px;border:0;background:none;text-align:center}
.auth-logo{max-width:150px;margin:0 auto 12px}
.auth-brand h1{font-size:20px;letter-spacing:2px;margin:0 0 2px}
.auth-brand .slogan{font-size:12px;color:var(--mut);max-width:none;margin:0}
.tagline{font-size:11.5px;margin:8px 0 0;letter-spacing:.8px}
.auth-points{display:none}
.auth-form{padding:16px 22px 22px;gap:9px}
.auth-form h2{font-size:17px}
.auth-form > p.muted{font-size:12.5px}
.auth-form label{font-size:12px}
.auth-form input{padding:9px 11px;font-size:14px;margin-top:4px}
.auth-form .btn{padding:9px 14px;font-size:12.5px}
.auth-tabs a{padding:7px;font-size:12.5px}
.auth-form .row-between{font-size:12px}
.auth-form .grid{gap:9px}
.auth-form .grid.g2{grid-template-columns:1fr}
.auth-form label:has(input[type=checkbox]){font-size:11.5px;line-height:1.4}
@media (max-width:900px){.auth-brand{padding:22px 20px 4px;border:0} .auth-logo{max-width:140px} .auth-brand h1{font-size:20px} .auth-form{padding:16px 20px 20px}}

/* ---- Turometru lângă login (identic cu mcperformance.ro) ---- */
.auth-row{display:flex;align-items:center;justify-content:center;gap:56px;width:100%}
.auth-row .auth-card{flex:0 0 320px}
.gauge-wrap{flex:0 1 440px;margin:0;text-align:center;--gk-sky:#6db3f2;--gk-blue:#1c69d4;--gk-red:#e32626;--gk-text:#f3f3f1;--gk-muted:#9a9da3;--gk-bg:#050506}
.gauge-wrap svg{width:100%;max-width:440px;height:auto;display:block;margin:0 auto}
.g-arc{fill:none;stroke-width:14}
.g1{stroke:var(--gk-sky)}.g2{stroke:var(--gk-blue)}.g3{stroke:var(--gk-red)}
.g-tick{stroke:var(--gk-muted);stroke-width:2}
.g-tick.major{stroke:var(--gk-text);stroke-width:3}
.g-num{fill:var(--gk-muted);font:italic 700 21px "Hanken Grotesk",sans-serif;text-anchor:middle}
.g-needle{stroke:var(--gk-red);stroke-width:4;stroke-linecap:round}
.g-hub{fill:var(--gk-bg);stroke:var(--gk-red);stroke-width:4}
.g-rpm{fill:var(--gk-text);font:italic 700 46px "Hanken Grotesk",sans-serif;text-anchor:middle;font-variant-numeric:tabular-nums}
.g-unit{fill:var(--gk-muted);font:600 14px "Hanken Grotesk",sans-serif;text-anchor:middle}
.g-read{display:flex;justify-content:center;gap:40px;margin-top:-4px}
.g-read div{min-width:120px;text-align:left}
.g-read b{display:block;color:var(--gk-text);font:italic 700 clamp(44px,6vw,64px)/1 "Hanken Grotesk",sans-serif;font-variant-numeric:tabular-nums}
.g-read span{color:var(--gk-muted);font-size:15px;font-family:"Hanken Grotesk",sans-serif}
.g-read div::after{content:"";display:block;height:4px;margin-top:8px;background:linear-gradient(90deg,var(--gk-sky) 0 33%,var(--gk-blue) 33% 66%,var(--gk-red) 66%)}
@media (max-width:820px){
  .auth-row{flex-direction:column-reverse;gap:22px}
  .gauge-wrap{flex:0 0 auto;width:100%;max-width:300px}
  .g-read{gap:24px} .g-read div{min-width:90px} .g-read b{font-size:40px}
  .auth-row .auth-card{flex:0 0 auto;width:100%;max-width:320px}
}