:root {
  --bg: #080a0c;
  --surface: rgba(17, 20, 24, .94);
  --surface2: #161a1f;
  --border: #383d43;
  --line: #292e34;
  --accent: #e2262d;
  --accent-dk: #170506;
  --teal: #ff4b50;
  --pale: #f4f4f5;
  --text: #f7f7f8;
  --muted: #b4b7bc;
  --faint: #767b82;
  --sel: #311417;
  --danger: #ff8a8f;
}

html { background: #080a0c; }

body {
  background:
    radial-gradient(circle at 78% 5%, rgba(117, 27, 31, .27), transparent 33%),
    linear-gradient(180deg, #0c0f12 0%, #080a0c 54%, #050607 100%);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 6, 8, .35), #080a0c 54%),
    url('/assets/vehicles/bilico-actros-branded.png') top 30px right -180px / min(880px, 92vw) auto no-repeat;
  opacity: .19;
}

.driver-page { position: relative; }

.driver-page .top {
  min-height: 62px;
  padding: 8px 10px;
  border: 1px solid rgba(90, 95, 103, .34);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(22, 25, 30, .94), rgba(9, 11, 14, .92));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

.driver-page .avatar {
  border: 1px solid #692328;
  border-radius: 10px;
  background: linear-gradient(145deg, #3b171a, #1b0e10);
  color: #ff666b;
}

.driver-page .toplogo {
  width: 58px;
  height: 46px;
  padding: 2px;
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 2px 14px;
}

.page-title span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #87262c;
  border-radius: 50%;
  background: #260d10;
  color: #ff444a;
  font-size: 19px;
}

.page-title h1 {
  font-size: clamp(22px, 6vw, 30px);
  letter-spacing: -.6px;
}

.driver-page .chips,
.driver-page .fields,
.driver-page .hist,
.driver-page .pcard {
  backdrop-filter: blur(12px);
}

.driver-page .chip,
.driver-page .fields,
.driver-page .hist,
.driver-page .pcard,
.driver-page .month {
  border-color: #3a3f46;
  background: linear-gradient(145deg, rgba(25, 29, 34, .96), rgba(12, 14, 17, .96));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 10px 25px rgba(0,0,0,.2);
}

.driver-page .chip .v.t,
.driver-page .hist .eu,
.driver-page .fr label svg,
.driver-page .photo svg,
.driver-page .nv.on { color: #ff3a41; }

.driver-page .lab {
  margin: 18px 3px 8px;
  color: #c7c9cd;
  font-weight: 600;
}

.driver-page .stations {
  grid-template-columns: 1fr;
  gap: 7px;
}

.driver-page .st {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 8px;
  overflow: hidden;
  border-color: #3a3f46;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(28, 32, 37, .98), rgba(12, 14, 17, .98));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  transition: transform .17s ease, border-color .17s ease, background .17s ease;
}

.driver-page .st:active { transform: scale(.985); }

.driver-page .st img {
  width: 112px;
  height: 66px;
  border-radius: 8px;
  object-fit: cover;
  filter: saturate(.9) contrast(1.07);
}

.driver-page .st .copy { min-width: 0; }
.driver-page .st .nm { margin: 0; color: #f3f3f4; font-size: 14px; }
.driver-page .st .ct { margin-top: 3px; color: #8e939a; }
.driver-page .st .row { justify-content: center; }
.driver-page .st .pump { display: none; }
.driver-page .st .ck { display: block; width: 20px; height: 20px; color: #6f747b; }
.driver-page .st.on { border-color: #e2262d; background: linear-gradient(135deg, #301316, #111419); }
.driver-page .st.on img { box-shadow: 0 0 0 2px rgba(226, 38, 45, .62); }
.driver-page .st.on .ck { color: #ff3a41; }

.driver-page .mezzi { gap: 7px; }

.driver-page .mz {
  position: relative;
  min-width: 0;
  min-height: 132px;
  padding: 8px 5px 10px;
  overflow: hidden;
  border-color: #3a3f46;
  border-radius: 12px;
  background: linear-gradient(145deg, #1a1e23, #0d0f12);
  transition: transform .17s ease, border-color .17s ease;
}

.driver-page .mz:active { transform: scale(.975); }
.driver-page .mz img { width: 100%; height: 88px; object-fit: contain; filter: drop-shadow(0 10px 9px rgba(0,0,0,.48)); }
.driver-page .mz[data-kind="Frigo"] img { transform: scale(1.04); }
.driver-page .mz .nm { margin-top: 4px; color: #e8e9ea; font-size: 12px; }
.driver-page .mz.on { border-color: #e2262d; background: linear-gradient(145deg, #351317, #101216); box-shadow: inset 0 0 0 1px rgba(226,38,45,.25); }
.driver-page .mz.on::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e2262d;
  color: white;
  font-weight: 700;
}

.driver-page .fr { min-height: 54px; }
.driver-page .fr input { color: #fff; font-size: 20px; }
.driver-page .fr input::placeholder { color: #555a61; }
.driver-page .photo { min-height: 58px; border-color: #555a61; background: rgba(13, 15, 18, .94); }
.driver-page .photo span { color: #d9dade; }
.driver-page .save {
  min-height: 56px;
  border: 1px solid #ff4b50;
  border-radius: 10px;
  background: linear-gradient(135deg, #ef2d34, #aa1117);
  color: white;
  box-shadow: 0 12px 28px rgba(171, 17, 23, .28), inset 0 1px rgba(255,255,255,.16);
}

.driver-page .nav {
  border-color: #353a40;
  background: rgba(8, 10, 12, .96);
  backdrop-filter: blur(16px);
}
.driver-page .nv .pill { border-radius: 7px; }
.driver-page .nv.on .pill { background: #321316; }

.driver-page .calc-title { margin-bottom: 8px; }
.driver-page .calc-intro {
  margin: 0 0 15px;
  color: #9da2a8;
  font-size: 13px;
  line-height: 1.45;
}
.driver-page .calc-list { display: grid; gap: 12px; }
.driver-page .calc-card {
  overflow: hidden;
  border: 1px solid #3d4249;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(27,31,36,.98), rgba(10,12,15,.98));
  box-shadow: 0 12px 25px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035);
}
.driver-page .calc-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 39px;
  padding: 7px 10px 7px 13px;
  border-bottom: 1px solid #343940;
  background: linear-gradient(90deg, rgba(226,38,45,.16), transparent 60%);
}
.driver-page .calc-index {
  color: #ff555b;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.driver-page .calc-remove {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #4a4f56;
  border-radius: 7px;
  background: #111419;
  color: #aeb2b7;
  font-size: 21px;
  line-height: 1;
}
.driver-page .calc-remove[hidden] { display: none; }
.driver-page .calc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 11px;
}
.driver-page .calc-box {
  display: flex;
  min-width: 0;
  min-height: 76px;
  padding: 9px 10px;
  border: 1px solid #3a3f46;
  border-radius: 9px;
  background: #0c0f12;
  flex-direction: column;
  justify-content: center;
}
.driver-page .calc-box > span {
  margin-bottom: 5px;
  color: #91969d;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .65px;
  text-transform: uppercase;
}
.driver-page .calc-box input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f5f6f7;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}
.driver-page .calc-box input::placeholder { color: #4f545b; }
.driver-page .calc-box:focus-within {
  border-color: #e2262d;
  box-shadow: 0 0 0 3px rgba(226,38,45,.1);
}
.driver-page .result-box {
  grid-column: 1 / -1;
  border-color: #69242a;
  background: linear-gradient(135deg, #241114, #0d0f12 65%);
}
.driver-page .result-box output {
  color: #e7e9eb;
  font-size: 27px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}
.driver-page .result-box output.positive { color: #ff555b; }
.driver-page .result-box output.negative { color: #61d89a; }
.driver-page .calc-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
}
.driver-page .calc-add {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 9px 15px;
  border: 1px dashed #e2262d;
  border-radius: 10px;
  background: rgba(226,38,45,.08);
  color: #ff555b;
  font-weight: 700;
  gap: 8px;
  flex: 1;
}
.driver-page .calc-add span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e2262d;
  color: white;
  font-size: 20px;
  line-height: 1;
}
.driver-page .calc-add:disabled { cursor: default; filter: grayscale(.65); opacity: .5; }
.driver-page .calc-count { color: #8e9399; font-size: 12px; white-space: nowrap; }
.driver-page .calc-formula { margin: 12px 2px 0; color: #676c73; font-size: 10px; line-height: 1.4; }

@media (min-width: 480px) {
  .driver-page .calc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .driver-page .result-box { grid-column: auto; }
}

.login-page {
  overflow: hidden;
  background: radial-gradient(circle at 70% 35%, #2c1114, #07090b 48%, #030405);
}

.login-page::before {
  background:
    linear-gradient(90deg, #060709 0 24%, rgba(6,7,9,.6) 52%, rgba(6,7,9,.16)),
    url('/assets/vehicles/bilico-actros-branded.png') center right -150px / min(1100px, 92vw) auto no-repeat;
  opacity: .52;
}

.login-page .card { position: relative; z-index: 1; max-width: 410px; }
.login-page .logo {
  width: 190px;
  padding: 5px;
  border-radius: 14px;
  background: #fff;
  filter: drop-shadow(0 9px 20px rgba(0,0,0,.7));
}
.login-page h1 span { color: #ff444a; }
.login-page .sub { color: #a3a7ad; text-transform: uppercase; letter-spacing: 1.2px; }
.login-page form {
  border-color: #464b52;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(25,28,33,.96), rgba(10,12,15,.96));
  box-shadow: 0 24px 70px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.04);
}
.login-page label { color: #a3a7ad; }
.login-page input { border-color: #3d4249; border-radius: 8px; background: #0d0f12; }
.login-page input:focus { border-color: #e2262d; box-shadow: 0 0 0 3px rgba(226,38,45,.12); }
.login-page button { border-radius: 8px; background: linear-gradient(135deg, #ee2c33, #ad1117); color: white; }

.admin-page { max-width: 1180px; }
.admin-page::before { opacity: .07; }
.admin-page .top {
  padding: 12px 14px;
  border: 1px solid #383d43;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(25,29,34,.97), rgba(10,12,15,.97));
}
.admin-page .top > img {
  width: 66px;
  height: 58px;
  padding: 3px;
  border-radius: 9px;
  background: #fff;
  object-fit: contain;
}
.admin-page .top .t1 span { color: #ff444a; }
.admin-page .tab.on,
.admin-page .badge.on { border-color: #e2262d; background: #351317; color: #ff6267; }
.admin-page .filters,
.admin-page .kc,
.admin-page .twrap,
.admin-page .card { border-color: #383d43; background: linear-gradient(145deg, rgba(24,28,33,.97), rgba(11,13,16,.97)); }
.admin-page .filters input:focus,
.admin-page .filters select:focus,
.admin-page .card input:focus { border-color: #e2262d; }
.admin-page .b.p { border-color: #e2262d; background: linear-gradient(135deg, #ec2d34, #ae1218); color: white; }
.admin-page .b.s { border-color: #8b2d32; color: #ff666b; }
.admin-page .kc .v.t,
.admin-page .cline .cv,
.admin-page td a { color: #ff575d; }
.admin-page th { background: #321316; color: #f0dfe0; }
.admin-page .toast { background: #e2262d; color: white; }

@media (max-width: 430px) {
  .driver-page { padding-inline: 11px; }
  .driver-page .st { grid-template-columns: 96px minmax(0, 1fr) 22px; gap: 9px; }
  .driver-page .st img { width: 96px; height: 60px; }
  .driver-page .mezzi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .driver-page .mz { min-height: 116px; }
  .driver-page .mz img { height: 72px; }
  .driver-page .mz .nm { font-size: 10px; }
  .driver-page .nv { font-size: 10px; }
  .driver-page .nv .pill { padding: 4px 11px; }
}

@media (max-width: 680px) {
  .login-page::before { background-position: center 70px; background-size: 900px auto; opacity: .2; }
  .admin-page .top .right { width: 100%; margin-left: 0; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}