:root {
    --tara-primary: #0f3d5e;
    --tara-secondary: #f7a600;
    --tara-deep: #082032;
    --tara-soft: #eef6fb;
    --tara-green: #0f9f6e;
    --tara-red: #d64545;
    --tara-muted: #64748b;
    --tara-line: #e5e7eb;
}

* { box-sizing: border-box; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f4f7fb; color: #0f172a; }

a { text-decoration: none; }
.btn-tara { background: linear-gradient(135deg, var(--tara-primary), #146c94); border: none; color: #fff; font-weight: 700; box-shadow: 0 14px 28px rgba(15,61,94,.22); }
.btn-tara:hover { background: linear-gradient(135deg, #0b314c, #105a7e); color: #fff; }
.btn-warning-soft { background: #fff7e6; color: #a16207; border: 1px solid #fde3a1; }
.btn-success-soft { background: #e8fff7; color: #047857; border: 1px solid #b8f4dc; }
.btn-danger-soft { background: #fff0f0; color: #b42318; border: 1px solid #ffd0d0; }
.brand-pill { display: inline-flex; align-items: center; justify-content: center; padding: .45rem .8rem; border-radius: 999px; background: #fff3d1; color: var(--tara-deep); font-weight: 900; letter-spacing: .12em; }
.brand-mark { width: 64px; height: 64px; display:flex; align-items:center; justify-content:center; border-radius: 20px; background: var(--tara-secondary); color: var(--tara-deep); font-size: 2rem; font-weight: 900; box-shadow: 0 18px 40px rgba(247,166,0,.25); }
.login-body { min-height: 100vh; background: radial-gradient(circle at top left, #fff0bb, transparent 30%), linear-gradient(135deg, #082032 0%, #0f3d5e 45%, #f4f7fb 45%); }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 520px; }
.login-hero { align-items: center; padding: 6rem; color: white; }
.login-hero h1 { font-size: clamp(2.8rem, 7vw, 5.2rem); font-weight: 900; letter-spacing: -0.06em; margin-top: 1.5rem; }
.login-hero p { color: rgba(255,255,255,.82); max-width: 620px; font-size: 1.12rem; }
.hero-stat { margin-top: 2rem; padding: 1rem 1.2rem; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; background: rgba(255,255,255,.08); backdrop-filter: blur(10px); display: inline-flex; flex-direction: column; gap:.15rem; }
.hero-stat span { color: rgba(255,255,255,.72); }
.login-card { background: #fff; margin: auto; width: min(92%, 440px); padding: 2rem; border-radius: 28px; box-shadow: 0 30px 80px rgba(8,32,50,.18); }
.setup-body { min-height: 100vh; background: radial-gradient(circle at top right, #fff0bb, transparent 28%), #f4f7fb; }
.setup-card { max-width: 620px; background: white; padding: 2rem; border-radius: 28px; box-shadow: 0 24px 70px rgba(15,23,42,.12); }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 280px; background: linear-gradient(180deg, #082032, #0f3d5e); color: white; position: fixed; height: 100vh; padding: 1.2rem; overflow-y: auto; }
.sidebar .brand { display:flex; gap:.75rem; align-items:center; padding: .6rem .5rem 1.4rem; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: .7rem; }
.sidebar .brand .logo { width: 44px; height: 44px; background: var(--tara-secondary); color: var(--tara-deep); border-radius: 14px; display:flex; align-items:center; justify-content:center; font-weight: 900; font-size: 1.4rem; }
.sidebar .brand strong { display:block; font-size: 1.15rem; letter-spacing:.08em; }
.sidebar .brand small { color: rgba(255,255,255,.64); }
.nav-link-tara { display:flex; align-items:center; gap:.7rem; color: rgba(255,255,255,.76); padding: .78rem .9rem; border-radius: 15px; margin:.25rem 0; font-weight: 650; }
.nav-link-tara:hover, .nav-link-tara.active { background: rgba(255,255,255,.12); color: #fff; }
.main { margin-left: 280px; flex:1; min-width:0; }
.topbar { background: rgba(255,255,255,.88); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(15,23,42,.06); position: sticky; top:0; z-index: 5; padding: 1rem 1.5rem; display:flex; align-items:center; justify-content:space-between; }
.content { padding: 1.5rem; }
.stat-card { border: none; border-radius: 24px; padding: 1.25rem; background: white; box-shadow: 0 12px 32px rgba(15,23,42,.06); height:100%; }
.stat-card .icon { width: 46px; height: 46px; border-radius: 16px; background: var(--tara-soft); color: var(--tara-primary); display:flex; align-items:center; justify-content:center; font-size:1.25rem; }
.stat-card .value { font-size: 2rem; font-weight: 900; letter-spacing:-.04em; }
.panel-card { background: white; border: 1px solid rgba(15,23,42,.06); border-radius: 24px; box-shadow: 0 12px 32px rgba(15,23,42,.05); overflow:hidden; }
.panel-card .panel-head { padding: 1rem 1.2rem; border-bottom: 1px solid #eef2f7; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.table { margin-bottom:0; }
.table th { color: #64748b; font-size:.78rem; text-transform: uppercase; letter-spacing:.04em; border-bottom-color: #eef2f7; }
.table td { vertical-align: middle; }
.status { display:inline-flex; align-items:center; padding:.32rem .62rem; border-radius:999px; font-size:.78rem; font-weight:800; text-transform:capitalize; }
.status.completed,.status.verified,.status.active,.status.released,.status.approved { background:#e8fff7; color:#047857; }
.status.pending,.status.assigned,.status.accepted,.status.arriving { background:#fff7e6; color:#a16207; }
.status.in_progress,.status.online { background:#e7f3ff; color:#075985; }
.status.cancelled,.status.rejected,.status.suspended,.status.blocked { background:#fff0f0; color:#b42318; }
.map-card { min-height: 280px; border-radius: 24px; background: radial-gradient(circle at 30% 20%, rgba(247,166,0,.25), transparent 22%), linear-gradient(135deg, #dbeafe, #ecfeff); position:relative; overflow:hidden; }
.map-grid { position:absolute; inset:0; background-image: linear-gradient(rgba(15,61,94,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(15,61,94,.08) 1px, transparent 1px); background-size: 36px 36px; }
.car-dot, .pin-dot { position:absolute; width: 34px; height: 34px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 24px rgba(15,23,42,.25); }
.car-dot { background: var(--tara-primary); color:white; left:55%; top:45%; }
.pin-dot { background: var(--tara-secondary); color:#082032; left:25%; top:60%; }
.quick-action { border:1px solid #edf2f7; border-radius:20px; padding:1rem; background: #fff; height:100%; transition:.2s; }
.quick-action:hover { transform: translateY(-2px); box-shadow:0 12px 30px rgba(15,23,42,.08); }
.mobile-toggle { display:none; }
@media (max-width: 992px) {
    .login-shell { grid-template-columns: 1fr; }
    .sidebar { transform: translateX(-100%); transition:.25s; z-index:20; }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left:0; }
    .mobile-toggle { display:inline-flex; }
}
@media (max-width: 576px) {
    .content { padding: 1rem; }
    .topbar { padding: .85rem 1rem; }
    .stat-card .value { font-size: 1.55rem; }
    .panel-card .panel-head { flex-direction: column; align-items:flex-start; }
}