/* انرژی‌موشن — هویت «داشبورد شب»: آسفالت تیره + امبر سوختی. عمداً متفاوت از پالت درمانی/فیروزه‌ای آوا. */
@font-face{
  font-family:'Vazirmatn';
  src:url('/assets/fonts/Vazirmatn.woff2') format('woff2');
  font-weight:100 900; font-display:swap;
}
:root{
  --bg:#0B0E13; --bg2:#10141C; --panel:#141A24; --panel2:#1A2130;
  --line:#232C3D; --line2:#2E3950;
  --txt:#E8ECF3; --mut:#8F9BB0; --mut2:#5F6B80;
  --amber:#FFB020; --amber2:#FFC95C; --on-amber:#1A1200;
  --ok:#3DDC84; --warn:#FFB020; --bad:#FF5A5A;
  --blue:#2E6BFF;
  --r:16px; --r2:22px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:'Vazirmatn',Tahoma,sans-serif; font-size:15.5px; line-height:1.9;
}
/* بافت جاده: خط‌چین محو عمودی در پس‌زمینه */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 500px at 85% -100px, rgba(255,176,32,.07), transparent 60%),
    radial-gradient(900px 400px at 10% 110%, rgba(46,107,255,.05), transparent 60%);
}
main,header,footer{position:relative; z-index:1}
a{color:var(--amber2); text-decoration:none}
h1,h2,h3{line-height:1.5; margin:0 0 10px}
h1{font-size:clamp(26px,5vw,44px); font-weight:900}
h2{font-size:clamp(19px,3vw,26px); font-weight:800}
h3{font-size:17px; font-weight:800}
p{margin:0 0 12px}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
.mut{color:var(--mut)}
.small{font-size:13px}

/* ─── هدر ─── */
.topbar{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:rgba(11,14,19,.8); border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex; align-items:center; gap:14px; height:64px}
.logo{display:flex; align-items:center; gap:10px; font-weight:900; font-size:19px; color:var(--txt)}
.logo svg{width:34px; height:34px}
.logo b{color:var(--amber)}
.topbar .sp{flex:1}
.navlink{color:var(--mut); font-size:14px; font-weight:700; padding:8px 12px; border-radius:10px}
.navlink:hover{color:var(--txt); background:var(--panel)}

/* ─── دکمه‌ها ─── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--amber); color:var(--on-amber); border:0; cursor:pointer;
  font:inherit; font-weight:800; font-size:15px;
  padding:12px 22px; border-radius:14px;
  transition:transform .12s ease, box-shadow .2s ease, background .2s;
  box-shadow:0 6px 24px -8px rgba(255,176,32,.5);
}
.btn:hover{background:var(--amber2); transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{background:transparent; color:var(--txt); border:1.5px solid var(--line2); box-shadow:none}
.btn.ghost:hover{border-color:var(--amber); color:var(--amber2); background:rgba(255,176,32,.06)}
.btn.sm{padding:8px 14px; font-size:13px; border-radius:11px}
.btn.danger{background:transparent; border:1.5px solid rgba(255,90,90,.4); color:var(--bad); box-shadow:none}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}

/* ─── پنل و کارت ─── */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r2); padding:22px}
.card+.card{margin-top:16px}
.grid{display:grid; gap:14px}
@media(min-width:760px){ .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} }

/* ─── فرم ─── */
label.f{display:block; font-size:13px; font-weight:700; color:var(--mut); margin:0 0 6px}
input.f,select.f{
  width:100%; background:var(--bg2); color:var(--txt); border:1.5px solid var(--line);
  border-radius:12px; padding:12px 14px; font:inherit; outline:none; transition:border .15s;
}
input.f:focus,select.f:focus{border-color:var(--amber)}
.fr{margin-bottom:14px}

/* ─── سگمنت‌پیل (انتخاب خودرو/معاینه) ─── */
.pills{display:flex; gap:8px; flex-wrap:wrap}
.pill{
  flex:1; min-width:90px; text-align:center; cursor:pointer; user-select:none;
  background:var(--bg2); border:1.5px solid var(--line); border-radius:13px;
  padding:11px 8px; font-weight:800; font-size:14px; color:var(--mut); transition:.15s;
}
.pill:hover{border-color:var(--line2); color:var(--txt)}
.pill.on{background:rgba(255,176,32,.12); border-color:var(--amber); color:var(--amber2)}
.pill.on.t-ok{background:rgba(61,220,132,.1); border-color:var(--ok); color:var(--ok)}
.pill.on.t-bad{background:rgba(255,90,90,.1); border-color:var(--bad); color:var(--bad)}

/* ─── بج وضعیت ─── */
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; padding:4px 12px; border-radius:99px}
.badge.ok{background:rgba(61,220,132,.12); color:var(--ok)}
.badge.warn{background:rgba(255,176,32,.14); color:var(--amber2)}
.badge.bad{background:rgba(255,90,90,.12); color:var(--bad)}
.badge.dim{background:var(--panel2); color:var(--mut)}

/* ─── پلاک ایرانی (کارت کاربر) ─── */
.plate{
  display:inline-flex; align-items:stretch; border-radius:9px; overflow:hidden;
  border:2px solid #B9C2D4; background:#F4F6FB; color:#101828;
  font-weight:900; line-height:1; min-height:40px; box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.plate .ir{background:#2E6BFF; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4px 7px; font-size:8.5px; gap:2px}
.plate .num{display:flex; align-items:center; padding:6px 14px; font-size:15px; letter-spacing:1px}

/* ─── جدول کاربران ─── */
.tbl{width:100%; border-collapse:collapse; font-size:14px}
.tbl th{color:var(--mut2); font-size:12px; font-weight:700; text-align:right; padding:8px 10px; border-bottom:1px solid var(--line)}
.tbl td{padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl tr:hover td{background:rgba(255,255,255,.02)}

/* ─── گیج SVG ─── */
.gauge-needle{transform-origin:100px 95px; transition:transform 1.2s cubic-bezier(.3,1.4,.4,1)}

/* ─── تایم‌لاین سگمنت‌ها ─── */
.tl{display:flex; gap:4px; height:14px; border-radius:8px; overflow:hidden}
.tl i{display:block; height:100%; border-radius:4px; opacity:.9; transition:opacity .2s, outline .2s}
.tl i.k-name{background:var(--amber)}
.tl i.k-caryear{background:var(--blue)}
.tl i.k-fixed{background:#3A4761}
.tl i.k-shared{background:#2A5C46}
.tl i.live{outline:2px solid #fff; opacity:1}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--mut); margin-top:8px}
.legend b{display:inline-block; width:10px; height:10px; border-radius:3px; margin-left:5px; vertical-align:-1px}

/* ─── سگمنت‌های متنی (کارائوکه) ─── */
.seg{
  border:1px solid var(--line); border-right:4px solid var(--line2);
  background:var(--bg2); border-radius:14px; padding:13px 16px; margin-bottom:10px;
  transition:.25s; position:relative;
}
.seg .tag{position:absolute; top:-9px; inset-inline-start:12px; font-size:10.5px; font-weight:800; padding:2px 9px; border-radius:99px; background:var(--panel2); color:var(--mut)}
.seg.k-name{border-right-color:var(--amber)} .seg.k-name .tag{background:rgba(255,176,32,.15); color:var(--amber2)}
.seg.k-caryear{border-right-color:var(--blue)} .seg.k-caryear .tag{background:rgba(46,107,255,.15); color:#7FA3FF}
.seg.k-shared{border-right-color:#2F8F63} .seg.k-shared .tag{background:rgba(61,220,132,.1); color:var(--ok)}
.seg.live{background:rgba(255,176,32,.07); border-color:rgba(255,176,32,.5); transform:scale(1.01)}
.seg .t{color:var(--mut)}
.seg.live .t{color:var(--txt)}
.seg .name-hl{color:var(--amber2); font-weight:900}

/* ─── پلیر placeholder ─── */
.player{
  position:relative; border-radius:var(--r2); overflow:hidden; border:1px solid var(--line2);
  background:linear-gradient(180deg,#151B27 0%, #0C1017 100%); aspect-ratio:16/9;
}
.player .road{position:absolute; bottom:0; left:0; right:0; height:34%; background:#151A22; border-top:2px solid #26303F}
.player .lane{
  position:absolute; bottom:16%; left:-40%; width:180%; height:5px;
  background:repeating-linear-gradient(90deg, var(--amber) 0 46px, transparent 46px 100px);
  opacity:.75; border-radius:3px;
}
.player.playing .lane{animation:lane 1.1s linear infinite}
@keyframes lane{to{transform:translateX(96px)}}
.player .car{position:absolute; bottom:19%; right:12%; width:min(300px,44%);
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.5))}
.player.playing .car{animation:bob 0.8s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-3px)}}
.player .bigplay{
  position:absolute; inset:0; margin:auto; width:84px; height:84px; border-radius:50%;
  background:rgba(255,176,32,.95); color:var(--on-amber); border:0; cursor:pointer;
  display:grid; place-items:center; transition:.2s; box-shadow:0 0 0 12px rgba(255,176,32,.15), 0 18px 50px -10px rgba(255,176,32,.6);
}
.player .bigplay:hover{transform:scale(1.06)}
.player .bigplay svg{width:34px; height:34px; margin-inline-start:4px}
.player .hint{position:absolute; top:14px; inset-inline-start:14px; background:rgba(0,0,0,.5); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12); color:#D5DBE7; font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:99px}
.player .cap{
  position:absolute; left:0; right:0; bottom:0; padding:44px 18px 14px; text-align:center;
  background:linear-gradient(0deg, rgba(5,7,10,.92) 30%, transparent);
  font-size:clamp(14px,2.4vw,19px); font-weight:700; min-height:96px; display:flex; align-items:flex-end; justify-content:center;
}
.player .cap .name-hl{color:var(--amber2); font-weight:900}
.pbar{height:5px; background:var(--line); border-radius:99px; overflow:hidden; margin-top:12px}
.pbar i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--amber),var(--amber2)); transition:width .3s linear}

/* ─── ردیف آمار ─── */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px}
.stat{background:var(--bg2); border:1px solid var(--line); border-radius:16px; padding:14px 16px}
.stat b{display:block; font-size:22px; font-weight:900; color:var(--amber2)}
.stat span{font-size:12px; color:var(--mut)}

/* ─── toast ─── */
#toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px); z-index:99;
  background:#1C2434; border:1px solid var(--line2); color:var(--txt); padding:12px 22px; border-radius:14px;
  font-weight:700; font-size:14px; opacity:0; transition:.3s; max-width:90vw; box-shadow:0 20px 60px rgba(0,0,0,.5)}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
#toast.err{border-color:rgba(255,90,90,.5)}

footer{border-top:1px solid var(--line); margin-top:60px; padding:26px 0 40px; color:var(--mut2); font-size:13px}
::selection{background:rgba(255,176,32,.3)}