/* =========================================================
   SMARTBUS — DESIGN TOKENS
========================================================= */
:root{
  --navy:#0B1D3A;
  --navy-2:#122A54;
  --blue:#1E5FCC;
  --cyan:#00D9C0;
  --amber:#F5A623;
  --red:#E5484D;
  --bg:#F5F7FA;
  --surface:#FFFFFF;
  --charcoal:#1C232B;
  --muted:#5B6472;
  --border:#E3E8EF;

  --font-head:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(11,29,58,0.06);
  --shadow-md:0 8px 24px rgba(11,29,58,0.10);
  --shadow-lg:0 20px 48px rgba(11,29,58,0.16);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--charcoal);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-head); margin:0; letter-spacing:-0.01em; color:var(--navy);}
p{margin:0; color:var(--muted); line-height:1.6;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
input,select{font-family:inherit;}
.hidden{display:none !important;}
:focus-visible{outline:2.5px solid var(--blue); outline-offset:2px;}

.dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.dot-live{background:var(--cyan); box-shadow:0 0 0 3px rgba(0,217,192,0.22);}
.dot-warn{background:var(--amber); box-shadow:0 0 0 3px rgba(245,166,35,0.22);}
.dot-off{background:var(--red); box-shadow:0 0 0 3px rgba(229,72,77,0.22);}
.dot-blue{background:var(--blue); box-shadow:0 0 0 3px rgba(30,95,204,0.22);}

/* =========================================================
   BUTTONS
========================================================= */
.btn{
  border:none; border-radius:10px; padding:12px 22px; font-weight:600; font-size:0.94rem;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--navy); color:#fff;}
.btn-primary:hover{background:var(--navy-2); box-shadow:var(--shadow-md);}
.btn-secondary{background:#fff; color:var(--navy); border:1.5px solid var(--border);}
.btn-secondary:hover{border-color:var(--navy);}
.btn-ghost{background:transparent; color:var(--muted); border:1.5px solid var(--border);}
.btn-ghost:hover{color:var(--navy); border-color:var(--navy);}
.btn-danger{background:#FDECEC; color:var(--red);}
.btn-danger:hover{background:#FADCDC;}
.btn-sm{padding:8px 14px; font-size:0.84rem;}
.btn-lg{padding:15px 24px; font-size:1rem;}
.btn-block{width:100%;}
.icon-btn{
  width:38px;height:38px;border-radius:9px;border:1.5px solid var(--border);
  background:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem;
}

/* =========================================================
   LOGIN SCREEN
========================================================= */
#login-screen{
  min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr;
  background:var(--navy);
}
.login-wrap{display:contents;}
.login-brand{
  padding:64px; display:flex; flex-direction:column; justify-content:center; gap:20px;
  background:radial-gradient(circle at 20% 20%, rgba(0,217,192,0.14), transparent 55%), var(--navy);
  color:#fff;
}
.login-brand h1{color:#fff; font-size:clamp(2rem, 4vw, 3rem); line-height:1.12;}
.login-brand p{color:rgba(255,255,255,0.65); max-width:420px;}
.login-brand .logo span{color:#fff;}
.login-card{
  background:var(--bg); display:flex; flex-direction:column; justify-content:center;
  padding:64px; gap:20px;
}
.login-card h2{font-size:1.3rem;}
.role-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.role-option{
  background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-md);
  padding:16px 8px; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-weight:600; font-size:0.86rem; color:var(--muted); transition:.15s ease;
}
.role-option .role-icon{font-size:1.5rem;}
.role-option.active{border-color:var(--navy); background:#fff; color:var(--navy); box-shadow:var(--shadow-sm);}
#login-form{display:flex; flex-direction:column; gap:14px; margin-top:6px;}
#login-form label{display:flex; flex-direction:column; gap:6px; font-size:0.86rem; font-weight:600; color:var(--charcoal);}
#login-form input, #login-form select{
  padding:12px 14px; border-radius:10px; border:1.5px solid var(--border); font-size:0.95rem; background:#fff;
}
#login-form input:focus, #login-form select:focus{border-color:var(--blue);}
.login-note{font-size:0.78rem; color:var(--muted); text-align:center;}

/* =========================================================
   LOGO
========================================================= */
.logo{display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:600; font-size:1.05rem; color:var(--navy); white-space:nowrap;}
.logo b{font-weight:700;}
.logo small{font-size:0.6rem; letter-spacing:0.08em; color:var(--muted); font-weight:600; margin-left:2px;}

/* =========================================================
   APP SHELL / HEADER / NAV
========================================================= */
.app-shell{min-height:100vh; display:flex; flex-direction:column;}
.site-header{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px; background:rgba(255,255,255,0.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.main-nav{display:flex; gap:6px;}
.nav-link{padding:9px 16px; border-radius:9px; font-weight:600; font-size:0.9rem; color:var(--muted); transition:.15s ease;}
.nav-link:hover{color:var(--navy); background:var(--bg);}
.nav-link.active{color:var(--navy); background:var(--bg);}
.header-actions{display:flex; align-items:center; gap:14px;}
.user-chip{display:flex; align-items:center; gap:8px; font-weight:600; font-size:0.86rem; color:var(--charcoal);}

main{flex:1; padding:40px 32px 100px; max-width:1240px; margin:0 auto; width:100%;}

/* =========================================================
   HERO
========================================================= */
.hero{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:24px 0 56px;}
.badge{
  display:inline-flex; align-items:center; gap:8px; background:#EAF0FF; color:var(--blue);
  font-weight:600; font-size:0.8rem; padding:7px 14px; border-radius:100px; margin-bottom:20px;
}
.hero-copy h1{font-size:clamp(2.2rem, 4vw, 3.4rem); line-height:1.08; margin-bottom:20px;}
.hero-copy p{font-size:1.05rem; max-width:440px; margin-bottom:28px;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap;}
.city-map{width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);}
.pulse-ring{transform-origin:center; animation:pulse 2s ease-out infinite;}
@keyframes pulse{
  0%{r:7; opacity:0.5;}
  100%{r:22; opacity:0;}
}
#hero-bus-marker{ offset-path:path('M 40 300 C 120 300, 120 200, 200 200 S 280 90, 360 90'); animation:driveHero 6s linear infinite; }
@keyframes driveHero{
  0%{offset-distance:0%;}
  100%{offset-distance:100%;}
}

/* =========================================================
   LIVE BAR
========================================================= */
.live-bar{
  background:var(--navy); border-radius:var(--radius-lg); padding:26px 34px; color:#fff;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
  box-shadow:var(--shadow-md);
}
.live-bar-title{display:flex; align-items:center; gap:8px; font-weight:600; font-size:0.9rem; color:rgba(255,255,255,0.8);}
.live-stats{display:flex; gap:44px; flex-wrap:wrap;}
.live-stat{display:flex; flex-direction:column;}
.live-stat strong{font-family:var(--font-head); font-size:1.9rem; font-weight:700;}
.live-stat span{font-size:0.78rem; color:rgba(255,255,255,0.6);}

/* =========================================================
   SECTION HEAD / GENERIC VIEW
========================================================= */
.section-head{margin-bottom:28px;}
.section-head h2{font-size:1.7rem; margin-bottom:8px;}
.view{padding-top:8px;}

/* =========================================================
   TRACK BUS
========================================================= */
.track-layout{display:grid; grid-template-columns:360px 1fr; gap:24px; align-items:start;}
.track-panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px;}
.track-panel input{
  width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--border); font-size:0.92rem; margin-bottom:14px;
}
.filter-row{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.chip{
  padding:7px 14px; border-radius:100px; border:1.5px solid var(--border); background:#fff;
  font-size:0.8rem; font-weight:600; color:var(--muted);
}
.chip.active{background:var(--navy); color:#fff; border-color:var(--navy);}
.bus-list{display:flex; flex-direction:column; gap:10px; max-height:560px; overflow-y:auto;}

.bus-card{
  border:1.5px solid var(--border); border-radius:var(--radius-md); padding:16px; cursor:pointer; transition:.15s ease;
  background:#fff;
}
.bus-card:hover{border-color:var(--blue);}
.bus-card.selected{border-color:var(--navy); box-shadow:var(--shadow-sm); background:#F8FAFF;}
.bus-card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.bus-tag{font-family:var(--font-head); font-weight:700; font-size:1rem; color:var(--navy);}
.status-badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:100px; font-size:0.74rem; font-weight:700;
}
.status-Moving{background:#E4FBF6; color:#00997F;}
.status-Active{background:#E4FBF6; color:#00997F;}
.status-Stopped{background:#FFF3E0; color:#B0730F;}
.status-Inactive{background:#FFF3E0; color:#B0730F;}
.status-Offline{background:#FDECEC; color:var(--red);}
.status-Ready{background:#EAF0FF; color:var(--blue);}
.route-line{font-size:0.86rem; color:var(--muted); margin:4px 0 10px;}
.bus-card-meta{display:flex; justify-content:space-between; font-size:0.82rem; color:var(--muted);}
.bus-card-meta strong{color:var(--charcoal); font-weight:600;}

.track-map-wrap{position:relative;}
.map-surface{
  background:var(--navy); border-radius:var(--radius-lg); min-height:560px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-md);
}
.map-surface svg{width:100%; height:100%; position:absolute; inset:0;}
.map-empty{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.55); gap:10px; text-align:center; padding:20px;
}
.detail-panel{
  position:absolute; top:20px; right:20px; width:260px; background:#fff; border-radius:var(--radius-md);
  padding:18px; box-shadow:var(--shadow-lg);
}
.detail-panel h4{font-size:1rem; margin-bottom:10px;}
.detail-row{display:flex; justify-content:space-between; font-size:0.82rem; padding:6px 0; border-bottom:1px solid var(--border);}
.detail-row:last-of-type{border-bottom:none;}
.detail-row span:first-child{color:var(--muted);}
.detail-row span:last-child{font-weight:600;}
.detail-panel .btn{margin-top:12px;}

/* =========================================================
   ROUTES GRID
========================================================= */
.routes-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:20px;}
.route-card{
  background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:22px;
  display:flex; flex-direction:column; gap:14px; transition:.15s ease;
}
.route-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.route-card-top{display:flex; justify-content:space-between; align-items:flex-start;}
.route-id{font-family:var(--font-head); font-weight:700; font-size:1.15rem; color:var(--navy);}
.route-path{font-size:0.88rem; color:var(--muted); display:flex; align-items:center; gap:8px;}
.route-mini-line{height:3px; background:var(--border); border-radius:3px; position:relative; margin:2px 0;}
.route-mini-line::before, .route-mini-line::after{
  content:''; position:absolute; width:8px; height:8px; border-radius:50%; top:50%; transform:translateY(-50%);
}
.route-mini-line::before{left:0; background:var(--navy);}
.route-mini-line::after{right:0; background:var(--cyan);}
.route-meta{display:flex; gap:22px;}
.route-meta div{display:flex; flex-direction:column;}
.route-meta strong{font-family:var(--font-head); font-size:1.2rem; color:var(--navy);}
.route-meta span{font-size:0.74rem; color:var(--muted);}

/* =========================================================
   STOPS TIMELINE
========================================================= */
.stops-timeline{max-width:640px; display:flex; flex-direction:column;}
.stop-item{display:grid; grid-template-columns:26px 1fr; gap:16px;}
.stop-marker-col{display:flex; flex-direction:column; align-items:center;}
.stop-node{width:14px; height:14px; border-radius:50%; background:var(--border); border:3px solid #fff; box-shadow:0 0 0 2px var(--border);}
.stop-item.active .stop-node{background:var(--cyan); box-shadow:0 0 0 4px rgba(0,217,192,0.22);}
.stop-connector{flex:1; width:2px; background:var(--border); min-height:36px;}
.stop-item:last-child .stop-connector{display:none;}
.stop-body{padding-bottom:28px;}
.stop-body h4{font-size:1.02rem; margin-bottom:4px;}
.stop-body-meta{display:flex; gap:16px; font-size:0.82rem; color:var(--muted); margin-top:6px;}
.stop-body-meta strong{color:var(--charcoal);}

/* =========================================================
   MOBILE NAV
========================================================= */
.mobile-nav{display:none;}

/* =========================================================
   DRIVER DASHBOARD
========================================================= */
.driver-main{max-width:1000px; margin:0 auto; padding:40px 24px 80px; width:100%;}
.driver-main > h1{font-size:1.7rem; margin-bottom:24px;}
.driver-grid{display:grid; grid-template-columns:360px 1fr; gap:24px; align-items:start;}
.driver-card{background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:24px;}
.driver-card-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px;}
.trip-stats{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px;}
.trip-stats div{background:var(--bg); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:4px;}
.trip-stats strong{font-family:var(--font-head); font-size:1.15rem; color:var(--navy);}
.trip-stats span{font-size:0.74rem; color:var(--muted);}
#driver-map{min-height:420px;}

/* =========================================================
   EMPTY STATE
========================================================= */
.empty-state{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:56px 20px;}
.empty-icon{font-size:2.2rem; margin-bottom:6px; opacity:0.7;}
.empty-state h3{font-size:1.05rem;}
.empty-state p{max-width:320px; font-size:0.88rem;}
.empty-state .btn{margin-top:10px;}

/* =========================================================
   ADMIN SHELL
========================================================= */
.admin-shell{display:grid; grid-template-columns:240px 1fr; min-height:100vh;}
.admin-sidebar{
  background:var(--navy); color:#fff; padding:24px 18px; display:flex; flex-direction:column; gap:28px;
  position:sticky; top:0; height:100vh;
}
.admin-sidebar .logo span{color:#fff;}
.admin-nav{display:flex; flex-direction:column; gap:4px; flex:1;}
.admin-nav-link{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; font-weight:600; font-size:0.9rem;
  color:rgba(255,255,255,0.65);
}
.admin-nav-link:hover{background:rgba(255,255,255,0.06); color:#fff;}
.admin-nav-link.active{background:rgba(255,255,255,0.12); color:#fff;}
.admin-sidebar .btn-ghost{color:rgba(255,255,255,0.6); border-color:rgba(255,255,255,0.2);}
.admin-sidebar .btn-ghost:hover{color:#fff; border-color:#fff;}

.admin-content{padding:0 0 60px;}
.admin-topbar{
  position:sticky; top:0; z-index:15; display:flex; align-items:center; gap:16px; padding:14px 28px;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--border);
}
.admin-search{flex:1; max-width:340px; padding:10px 14px; border-radius:9px; border:1.5px solid var(--border);}
.admin-profile{display:flex; align-items:center; gap:8px; font-weight:600; font-size:0.86rem;}
#admin-menu-toggle{display:none;}

.admin-view{padding:28px;}
.admin-view h2{font-size:1.5rem; margin-bottom:20px;}
.admin-view-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; gap:16px; flex-wrap:wrap;}
.admin-view-head p{margin-top:4px;}

.stat-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:16px; margin-bottom:28px;}
.stat-card{background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-md); padding:18px; display:flex; flex-direction:column; gap:6px;}
.stat-icon{font-size:1.3rem;}
.stat-card strong{font-family:var(--font-head); font-size:1.7rem; color:var(--navy);}
.stat-card span{font-size:0.78rem; color:var(--muted);}

.panel{background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:22px;}
.panel h3{font-size:1.05rem; margin-bottom:14px;}

.admin-toolbar{display:flex; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
.admin-toolbar input, .admin-toolbar select{
  padding:10px 14px; border-radius:9px; border:1.5px solid var(--border); font-size:0.88rem;
}
.admin-toolbar input{flex:1; min-width:200px;}

.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:0.88rem;}
thead th{text-align:left; color:var(--muted); font-weight:600; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.03em; padding:10px 12px; border-bottom:1.5px solid var(--border);}
tbody td{padding:12px; border-bottom:1px solid var(--border); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
.row-actions{display:flex; gap:6px;}
.row-actions button{background:none; border:1.5px solid var(--border); border-radius:7px; width:30px; height:30px; font-size:0.85rem;}
.row-actions button:hover{border-color:var(--navy);}
.row-actions .del:hover{border-color:var(--red); color:var(--red);}

.driver-cards-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:18px;}
.driver-profile-card{background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-md); padding:20px; display:flex; flex-direction:column; gap:12px;}
.driver-profile-top{display:flex; align-items:center; gap:12px;}
.avatar{
  width:44px; height:44px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-family:var(--font-head);
}
.driver-profile-top h4{font-size:0.98rem;}
.driver-profile-top span{font-size:0.76rem; color:var(--muted);}
.driver-info-row{display:flex; justify-content:space-between; font-size:0.82rem; border-top:1px solid var(--border); padding-top:10px;}
.driver-info-row span:first-child{color:var(--muted);}
.driver-info-row span:last-child{font-weight:600;}

/* =========================================================
   MODAL
========================================================= */
.modal-overlay{
  position:fixed; inset:0; background:rgba(11,29,58,0.5); display:flex; align-items:center; justify-content:center;
  z-index:100; padding:20px; animation:fadeIn .15s ease;
}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
.modal{
  background:#fff; border-radius:var(--radius-lg); padding:28px; width:100%; max-width:520px;
  max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-lg); animation:slideUp .18s ease;
}
@keyframes slideUp{from{transform:translateY(14px); opacity:0;} to{transform:translateY(0); opacity:1;}}
.modal h3{font-size:1.2rem; margin-bottom:18px;}
.form-group{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.form-group label{font-size:0.84rem; font-weight:600;}
.form-group input, .form-group select{padding:11px 13px; border-radius:9px; border:1.5px solid var(--border); font-size:0.92rem;}
.form-group input:invalid.touched, .form-group select:invalid.touched{border-color:var(--red);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.field-error{font-size:0.76rem; color:var(--red); display:none;}
.field-error.show{display:block;}
.stop-picker{border:1.5px solid var(--border); border-radius:10px; padding:10px; max-height:160px; overflow-y:auto; display:flex; flex-direction:column; gap:6px;}
.stop-picker label{display:flex; align-items:center; gap:8px; font-weight:500; font-size:0.86rem;}
.ordered-stops{display:flex; flex-direction:column; gap:6px; margin-top:10px;}
.ordered-stop-chip{
  display:flex; align-items:center; justify-content:space-between; background:var(--bg); border-radius:8px; padding:8px 10px; font-size:0.84rem;
}
.ordered-stop-chip .move-btns button{background:none; border:none; font-size:0.9rem; cursor:pointer; color:var(--muted); padding:2px 4px;}
.ordered-stop-chip .move-btns button:hover{color:var(--navy);}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}

/* =========================================================
   TOASTS
========================================================= */
.toast-container{position:fixed; bottom:24px; right:24px; display:flex; flex-direction:column; gap:10px; z-index:200;}
.toast{
  background:var(--navy); color:#fff; padding:13px 18px; border-radius:10px; font-size:0.86rem; font-weight:500;
  box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; animation:toastIn .18s ease;
  max-width:320px;
}
.toast.success{background:#0E3B30;}
.toast.warn{background:#4A2E0A;}
.toast.error{background:#4A1214;}
@keyframes toastIn{from{transform:translateX(20px); opacity:0;} to{transform:translateX(0); opacity:1;}}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 980px){
  #login-screen{grid-template-columns:1fr;}
  .login-brand{padding:40px 28px;}
  .login-card{padding:40px 28px;}
  .hero{grid-template-columns:1fr;}
  .hero-visual{order:-1;}
  .track-layout{grid-template-columns:1fr;}
  .driver-grid{grid-template-columns:1fr;}
  .admin-shell{grid-template-columns:1fr;}
  .admin-sidebar{
    position:fixed; left:0; top:0; bottom:0; z-index:50; transform:translateX(-100%); transition:transform .2s ease; width:240px;
  }
  .admin-sidebar.open{transform:translateX(0);}
  #admin-menu-toggle{display:flex;}
  .form-row{grid-template-columns:1fr;}
}

@media (max-width: 700px){
  .main-nav{display:none;}
  .site-header{padding:12px 18px;}
  main{padding:24px 18px 90px;}
  .mobile-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--border);
    justify-content:space-around; padding:8px 4px calc(8px + env(safe-area-inset-bottom)); z-index:30;
  }
  .mnav-link{display:flex; flex-direction:column; align-items:center; gap:2px; font-size:0.68rem; font-weight:600; color:var(--muted); padding:6px 10px; border-radius:8px;}
  .mnav-link span{font-size:1.15rem;}
  .mnav-link.active{color:var(--navy); background:var(--bg);}
  .live-stats{gap:24px;}
  .live-stat strong{font-size:1.5rem;}
  .header-actions .btn-sm span{display:none;}
}