/* ==========================================================
   Truck Hisab — Design System (Driver-friendly)
   Tagline: आपका ट्रक, आपका हिसाब
   ========================================================== */

:root {
  /* ---------- Colors (locked from spec) ---------- */
  --bg:           #F5EFE3;   /* warm cream paper */
  --bg-2:         #EDE4D2;
  --board:        #FAF6EE;
  --ink:          #161310;
  --ink-2:        #3A332B;
  --muted:        #7A6E5E;
  --line:         #E1D6C0;
  --line-soft:    #EBE2D0;
  --paper:        #FFFFFF;
  --truck:        #E8541C;   /* saffron — actions, brand */
  --truck-deep:   #B33A0E;
  --truck-soft:   #FCE9DD;
  --money:        #0F6E4A;   /* deep green — income */
  --money-soft:   #E5F2EC;
  --spend:        #A52525;   /* deep red — expenses */
  --spend-soft:   #F8E8E8;
  --gold:         #C99211;   /* highlight, cash */
  --gold-soft:    #FAF1D6;
  --indigo:       #1F2B4A;

  /* ---------- Typography ---------- */
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-hindi:   'Noto Sans Devanagari', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* multilingual fonts */
  --font-bengali: 'Noto Sans Bengali', sans-serif;
  --font-tamil:   'Noto Sans Tamil', sans-serif;
  --font-telugu:  'Noto Sans Telugu', sans-serif;
  --font-gujarati:'Noto Sans Gujarati', sans-serif;
  --font-kannada: 'Noto Sans Kannada', sans-serif;
  --font-malayalam:'Noto Sans Malayalam', sans-serif;
  --font-punjabi: 'Noto Sans Gurmukhi', sans-serif;
  --font-odia:    'Noto Sans Oriya', sans-serif;
  --font-urdu:    'Noto Nastaliq Urdu', serif;
  --font-assamese:'Noto Sans Bengali', sans-serif;

  /* ---------- Driver-friendly sizing (large touch targets) ---------- */
  --tap-target:    56px;     /* min button height — driver gloves friendly */
  --tap-target-lg: 64px;
  --radius-sm:     8px;
  --radius-md:     14px;
  --radius-lg:     18px;
  --radius-xl:     24px;
  --radius-pill:   30px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 2px 8px -4px rgba(40,30,20,.15);
  --shadow-md: 0 6px 18px -8px rgba(40,30,20,.20);
  --shadow-lg: 0 14px 30px -10px rgba(40,30,20,.25);
  --shadow-truck: 0 14px 30px -10px rgba(232,84,28,.55);
}

/* ==========================================================
   Reset
   ========================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
html, body {
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}
button { border: none; cursor: pointer; font-family: inherit; }
input { font-family: inherit; outline: none; border: none; }

/* Number ke khaane par upar-neeche wale chhote teer (spinner) hata do.
   Malik ne bheje screenshot par ungli rakh kar kaha: "ye button hatao".

   Ye sirf dikhne ki baat nahi. Ye teer paise wale khaane par baithte hain
   (bhada, weight, rate, kitna mila, cash) aur itne chhote hote hain ki
   phone par ungli se galat wala dab jata hai — rakam 1 badal jati hai aur
   pata bhi nahi chalta.

   App me 36 aise khaane hain, 7 panno par. Isliye niyam yahan ek hi baar,
   har jagah ke liye.

   Keyboard ke upar-neeche wale teer ab bhi chalte hain — sirf mouse wale
   button gaye. Number ka keypad (phone par) waisa hi rehta hai, kyunki
   type ab bhi "number" hi hai. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
a { color: inherit; text-decoration: none; }

/* ==========================================================
   App Frame (mobile-first, desktop shows phone-like preview)
   ========================================================== */
.app-frame {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 5%, rgba(232,84,28,.06), transparent 40%),
    radial-gradient(circle at 95% 90%, rgba(15,110,74,.05), transparent 45%),
    var(--bg);
}
.app-screen {
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* desktop preview — phone-like (sirf tablet ki chaudai tak) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .app-frame { padding: 40px 0; }
  .app-screen {
    max-width: 400px;
    min-height: 760px;
    border-radius: 32px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
}

/* ==========================================================
   PC ka roop — 1024px se upar
   ==========================================================

   Malik ne PC par app kholi to poori screen khali padi rehti thi aur app
   beech me 400px ki patli patti me simti hui dikhti thi. Wo "phone jaisa"
   roop jaan-boojh kar banaya gaya tha, par malik aur manager PC par baith
   kar HISAB DEKHTE hain — aur hisab me tarikh, rakam aur bakaya saath-saath
   padhne padte hain. Patli patti me wo ban hi nahi sakta.

   (Hisab BANTA phone par hai — wo driver ka kaam hai aur wahi theek hai.)

   Do cheezein yahan hoti hain:
     1. phone wala frame hat jata hai, panna poori chaudai le leta hai
     2. baayein sidebar aa jata hai, aur neeche wali patti chhup jati hai

   Sidebar har panne me alag-alag NAHI likha. app.js use ek hi jagah se banata
   hai, bilkul waise jaise neeche wali patti banti hai — warna ek din ek panne
   me link jud jata aur baaki nau me reh jata.
   ========================================================== */

:root { --pc-side-w: 232px; }

.pc-side { display: none; }

/* Sidebar ke ANDAR ka roop — PC ki patti aur phone ke drawer, dono ke liye.
   Ye kisi media query ke andar NAHI hai, aur wahi is block ka poora matlab
   hai: 24 Sep ko ye saara roop sirf `@media (min-width: 1024px)` ke andar
   pada tha, to phone par drawer khulta to tha par uske andar ke link bilkul
   nange the — padding 0, font 16px, nishaan aur naam ek doosre par chadhe
   hue. Rang dono jagah ek hi rakhe hain taaki malik ko PC aur phone par
   "same to same" dikhe. */
.pc-side .brand {
  padding: 0 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  margin-bottom: 12px;
}
.pc-side .brand .b1 {
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px;
}
.pc-side .brand .b2 { font-size: 10.5px; opacity: .6; margin-top: 2px; }

.pc-side a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 10px;
  color: rgba(255,255,255,.76); text-decoration: none;
  font-size: 13.5px; font-weight: 500; margin-bottom: 2px;
  font-family: inherit; letter-spacing: 0; text-transform: none;
}
.pc-side a:hover { background: rgba(255,255,255,.07); color: #fff; }
.pc-side a.active { background: var(--truck); color: #fff; font-weight: 700; }
.pc-side a svg { width: 18px; height: 18px; flex-shrink: 0; display: block; }
.pc-side a .hi-in { font-size: 10.5px; opacity: .8; margin-left: 2px; }

.pc-side .neeche {
  margin-top: auto; font-size: 10.5px; opacity: .45; padding: 8px;
}


/* ===================================================================
   PHONE par sidebar — SIRF malik/manager ko, aur khulne-band hone wala
   ===================================================================
   Malik ne kaha (24 Sep 2026): "ऑनर और मैनेजर के मोबाइल ऐप में साइड बार दो".

   PC par ye patti hamesha khuli rehti hai (neeche wali media query). Phone
   par wo aadhi screen kha jati, isliye yahan wo DRAWER hai: band padi
   rehti hai, button dabane par andar se aati hai.

   ⛔ DRIVER KO KABHI NAHI. Rok role se hai (app.js), chaudai se nahi —
   aur wo rok yahan CSS me nahi, wahan code me hai. Wajah 21 Sept ki
   ghatna hai: sidebar chhupane wala niyam is file me tha, par driver ke
   panne ye file lete hi nahi, aur uske phone par bina sajawat ka nav
   panne ke sar par chipak gaya tha. Isliye ab kuch bhi is file ke
   BHAROSE nahi chhupta. */
@media (max-width: 1023px) {
  .pc-side.drawer {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 264px; max-width: 82vw;
    background: var(--ink); color: #fff;
    padding: 18px 12px;
    z-index: 300; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 2px 0 18px rgba(0,0,0,.12);
  }
  .pc-side.drawer.khuli { transform: none; }

  .side-parda {
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    z-index: 299; opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .side-parda.khuli { opacity: 1; pointer-events: auto; }
}

@media (min-width: 1024px) {
  .app-frame { padding: 0; }

  /* Phone wala frame khatam — panna ab poori chaudai ka */
  /* Jo panna poori chaudai leta hai, uska naam yahan hona ZAROORI hai —
     warna sidebar uske upar chadh jati hai aur baayan hissa dab jata hai.
     (khata-dekho pehli baar isi wajah se aadha dikha tha.) */
  .app-screen,
  .firm-shell,
  .kd-shell {
    max-width: none;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    margin-left: var(--pc-side-w);
  }

  /* Neeche wali patti ki jagah sidebar le leta hai */
  .bottom-nav { display: none !important; }

  /* Patti chhup gayi, to uske liye chhodi hui jagah bhi nahi chahiye */
  body:has(.bottom-nav) .app-screen,
  body:has(.bottom-nav) .firm-shell,
  body:has(.bottom-nav) .kd-shell { padding-bottom: 0; }

  /* Madad ka button patti ke upar uthta tha — ab patti hai hi nahi */
  body:has(.bottom-nav) .madad-fab { bottom: 24px; }

  .pc-side {
    display: flex; flex-direction: column;
    position: fixed; left: 0; top: 0;
    width: var(--pc-side-w); height: 100vh;
    background: var(--ink); color: #fff;
    padding: 18px 12px;
    z-index: 50;
    overflow-y: auto;
  }
}
}

/* ==========================================================
   Top Bar (back + audio helper + madad)
   ========================================================== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 8px;
  background: transparent;
}
.topbar .back-btn,
.topbar .audio-btn,
.topbar .madad-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: transform .15s, background .15s;
}
.topbar .back-btn:active,
.topbar .audio-btn:active,
.topbar .madad-btn:active {
  transform: scale(.94);
  background: var(--line);
}
.topbar .audio-btn.playing {
  background: var(--truck);
  color: #fff;
  animation: pulse-btn 1.2s infinite;
}
.topbar .right-actions { display: flex; gap: 10px; }
.topbar .madad-btn {
  width: auto;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--gold-soft);
  color: var(--gold);
  font-weight: 700;
  font-size: 13px;
  gap: 6px;
}
@keyframes pulse-btn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,84,28,.6); }
  50% { box-shadow: 0 0 0 10px rgba(232,84,28,0); }
}

/* ==========================================================
   Brand Logo
   ========================================================== */
.brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 24px 0;
}
.mini-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F47A37, #B33A0E);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
.mini-logo svg { width: 22px; height: 22px; color: #fff; }
.mini-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.01em;
}

/* ==========================================================
   Headings
   ========================================================== */
.h-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: var(--ink);
}
.h-display em {
  font-style: italic;
  font-weight: 300;
  color: var(--truck);
}
.h-display.lg  { font-size: 36px; }
.h-display.md  { font-size: 28px; }
.h-display.sm  { font-size: 22px; }

.h-hindi {
  font-family: var(--font-hindi);
  font-weight: 500;
  color: var(--muted);
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.4;
}

/* ── Har naam ke neeche Devanagari ─────────────────────────────────────
   Driver angrezi nahi padhta. Roman line wahi rehti hai (malik aur manager
   usi ke aadi hain) aur uske TEEK NEECHE wahi baat Devanagari me — ek
   doosre ki jagah nahi leti, saath chalti hai.

   text-transform aur letter-spacing ko zabardasti wapas none/0 karna PADTA
   hai: kai naam (.l, .lbl, .section-h) uppercase + letter-spacing par hain,
   aur Devanagari me letter-spacing maatra ko akshar se alag kar deta hai —
   "खर्चा" "ख र् चा" jaisa toota dikhta hai.

   driver-home.html aur driver-settings.html main.css nahi mangate, isliye
   wahi do class unke apne <style> me bhi likhi hain. Yahan badlo to wahan
   bhi badalna — do jagah do alag naap nahi hone chahiye. */
.hi {
  display: block;
  font-family: var(--font-hindi);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
}
/* Ek hi line me — jahan neeche jagah nahi hai (chhota badge, patti). */
.hi-in {
  font-family: var(--font-hindi);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* ==========================================================
   Forms — Driver Friendly (BIG)
   ========================================================== */
.field-block { margin-top: 26px; padding: 0 24px; }
.field-block + .field-block { margin-top: 18px; }

.field-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: .03em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.field-label .ic { color: var(--truck); }

.input-shell {
  margin-top: 12px;
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap-target);
  transition: border-color .15s, background .15s;
}
.input-shell:focus-within {
  border-color: var(--truck);
  background: #fff;
}
.input-shell.filled {
  background: #fff;
  border-color: var(--ink);
}

.input-shell .country-code {
  background: var(--ink);
  color: #FAB060;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.input-shell .country-code .flag { font-size: 16px; }

.input-shell input {
  flex: 1;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--ink);
  width: 100%;
}
.input-shell input::placeholder {
  color: var(--muted);
  font-weight: 400;
  letter-spacing: .04em;
}

.input-helper {
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 6px;
}
.input-helper .ic { color: var(--money); flex-shrink: 0; }
.input-helper .hin { font-family: var(--font-hindi); color: var(--ink-2); }

/* example chip — "Jaise: 98765 43210" */
.example-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 14px;
  background: var(--gold-soft);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
}
.example-chip .ic { color: var(--gold); }
.example-chip .num {
  font-family: var(--font-mono);
  letter-spacing: .06em;
}

/* ==========================================================
   Buttons — Driver friendly, BIG
   ========================================================== */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap-target-lg);
  padding: 18px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.005em;
  transition: transform .12s, box-shadow .15s, background .15s;
  width: 100%;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--ink);
  color: #fff;
}
.btn-primary:hover { background: #2a201a; }
.btn-primary .arr {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--truck);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-truck {
  background: var(--truck);
  color: #fff;
  box-shadow: var(--shadow-truck);
}
.btn-truck:hover { background: var(--truck-deep); }

.btn-ghost {
  background: var(--bg);
  color: var(--ink);
  border: 1.5px solid var(--line);
}

/* ==========================================================
   Sticky bottom action area
   ========================================================== */
.action-area {
  margin-top: auto;
  padding: 24px 24px 32px;
  background: linear-gradient(180deg, transparent 0%, var(--paper) 30%);
}
.action-terms {
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}
.action-terms a {
  color: var(--truck);
  font-weight: 600;
}

/* ==========================================================
   Madad (Help) — floating, toll-free
   ========================================================== */
.madad-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #25D366; /* WhatsApp green */
  color: #fff;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px -6px rgba(37,211,102,.55);
  z-index: 50;
}
.madad-fab:active { transform: scale(.94); }

/* ==========================================================
   Splash screen specific
   ========================================================== */
.splash-screen {
  flex: 1;
  background:
    radial-gradient(circle at 80% 10%, rgba(232,84,28,.45), transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(201,146,17,.30), transparent 55%),
    linear-gradient(160deg, #191512 0%, #2a1f17 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 60px 28px 40px;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}
.splash-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.splash-brandmark {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 2;
}
.splash-logo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F47A37 0%, #E8541C 50%, #B33A0E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px -8px rgba(232,84,28,.55), inset 0 -2px 0 rgba(0,0,0,.15);
  position: relative;
}
.splash-logo::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,.35);
}
.splash-logo svg {
  width: 60px;
  height: 60px;
  color: #fff;
  position: relative;
  z-index: 2;
}
.splash-brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 46px;
  letter-spacing: -.03em;
  line-height: 1;
}
.splash-brand-name em {
  font-style: italic;
  font-weight: 300;
  color: #FAB060;
}
.splash-tag {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  text-align: center;
  line-height: 1.5;
}
.splash-tag .hin {
  display: block;
  font-family: var(--font-hindi);
  font-weight: 500;
  color: #fff;
  font-size: 17px;
  margin-bottom: 8px;
}

/* ==========================================================
   Language Picker — driver friendly visual cards
   ========================================================== */
.lang-section {
  margin-top: 30px;
  position: relative;
  z-index: 2;
}
.lang-title {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.6);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.lang-title .hin {
  display: block;
  font-family: var(--font-hindi);
  font-size: 16px;
  color: #fff;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 4px;
  font-weight: 500;
}
.lang-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 2px;
}
.lang-card {
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  transition: all .15s;
  text-align: left;
  color: #fff;
}
.lang-card:active {
  transform: scale(.97);
  background: rgba(255,255,255,.14);
}
.lang-card.selected {
  background: var(--truck);
  border-color: #FAB060;
  box-shadow: 0 8px 20px -8px rgba(232,84,28,.6);
}
.lang-card .native {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
}
.lang-card .english {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  letter-spacing: .02em;
  font-weight: 500;
}
.lang-card.selected .english { color: rgba(255,255,255,.85); }

.lang-card[data-script="devanagari"] .native { font-family: var(--font-hindi); }
.lang-card[data-script="bengali"]    .native { font-family: var(--font-bengali); }
.lang-card[data-script="tamil"]      .native { font-family: var(--font-tamil); }
.lang-card[data-script="telugu"]     .native { font-family: var(--font-telugu); }
.lang-card[data-script="gujarati"]   .native { font-family: var(--font-gujarati); }
.lang-card[data-script="kannada"]    .native { font-family: var(--font-kannada); }
.lang-card[data-script="malayalam"]  .native { font-family: var(--font-malayalam); }
.lang-card[data-script="gurmukhi"]   .native { font-family: var(--font-punjabi); }
.lang-card[data-script="odia"]       .native { font-family: var(--font-odia); }
.lang-card[data-script="arabic"]     .native { font-family: var(--font-urdu); direction: rtl; font-size: 22px; }

/* show more languages button */
.lang-more {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: #FAB060;
  font-weight: 600;
  cursor: pointer;
  padding: 8px;
}

/* CTA in splash */
.splash-cta {
  margin-top: 24px;
  background: #fff;
  color: var(--ink);
  padding: 18px 24px;
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  cursor: pointer;
  transition: transform .12s;
}
.splash-cta:active { transform: scale(.98); }
.splash-cta .arr {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--truck);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================
   OTP boxes — driver friendly, BIG
   ========================================================== */
.otp-grid {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  padding: 0 22px;
  justify-content: center;
  align-items: center;
}
.otp-cell {
  width: 48px;
  height: 60px;
  flex: 0 0 48px;
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 26px;
  color: var(--ink);
  caret-color: var(--truck);
  transition: all .15s;
  outline: none;
  padding: 0;
}
.otp-cell:focus,
.otp-cell.active {
  border-color: var(--truck);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(232,84,28,.12);
}
.otp-cell.filled {
  background: #fff;
  border-color: var(--ink);
}
@media (min-width: 380px) {
  .otp-cell { width: 52px; height: 64px; flex: 0 0 52px; }
}

.otp-resend {
  margin-top: 22px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  padding: 0 24px;
}
.otp-resend strong {
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 600;
}
.otp-resend .resend-btn {
  color: var(--truck);
  font-weight: 700;
  cursor: pointer;
  margin-left: 6px;
}
.otp-resend .resend-btn.disabled { color: var(--muted); cursor: not-allowed; }

/* sms auto-detect chip */
.sms-listening {
  margin: 22px 24px 0;
  background: var(--money-soft);
  border: 1px solid #BBE3CF;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-2);
}
.sms-listening .pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--money);
  position: relative;
  flex-shrink: 0;
}
.sms-listening .pulse::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--money);
  animation: pulse-ring 1.6s infinite;
}
.sms-listening .hin {
  font-family: var(--font-hindi);
  color: var(--ink);
  font-weight: 500;
}
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ==========================================================
   Toast / Notifications
   ========================================================== */
.toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: var(--ink);
  color: #fff;
  padding: 14px 20px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: all .25s;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.success { background: var(--money); }
.toast.error   { background: var(--spend); }

/* ==========================================================
   PWA Install Button (floating, driver-friendly)
   ========================================================== */
.pwa-install-btn {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 12px 20px 12px 16px;
  border-radius: 30px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 14px 30px -10px rgba(40,30,20,.4), 0 0 0 4px rgba(232,84,28,.15);
  z-index: 80;
  cursor: pointer;
  border: none;
  animation: pwa-pulse 3s ease-in-out infinite;
}
.pwa-install-btn:active { transform: translateX(-50%) scale(.96); }
.pwa-install-btn svg { color: var(--truck); }

@keyframes pwa-pulse {
  0%, 100% { box-shadow: 0 14px 30px -10px rgba(40,30,20,.4), 0 0 0 4px rgba(232,84,28,.15); }
  50%      { box-shadow: 0 14px 30px -10px rgba(40,30,20,.4), 0 0 0 10px rgba(232,84,28,0); }
}

/* hide install button when running as installed PWA */
body.pwa-installed .pwa-install-btn { display: none !important; }

/* shift madad fab up when install button visible */
.pwa-install-btn ~ .madad-fab,
body:has(.pwa-install-btn) .madad-fab {
  bottom: 92px;
}

/* ==========================================================
   Loading spinner
   ========================================================== */
.spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ==========================================================
   Neeche ki patti — har andar wale panne par
   ==========================================================
   Pehle ye sirf chaar panno par thi (home, khate, drivers, cashbook), aur
   har ek me apni alag copy. Naya Hisab, Reports, Truck Detail, Settings...
   kisi par nahi — aadmi hisab bharne ke baad wahin phans jata tha, wapas
   jaane ka ek hi rasta peeche wala teer.

   Ab CSS yahin ek jagah hai. Panne me sirf <nav> ki chaar line jodni hoti
   hai. --nav-h isliye ki jin panno par neeche pehle se kuch chipka hai
   (Save ki patti, Madad ka gol button) wo patti ke UPAR baithein, peeche
   nahi. */
:root { --nav-h: 70px; }   /* patti ki asli oonchai — naap kar */

.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-width: 480px; margin: 0 auto;
  background: #fff; border-top: 1px solid var(--line);
  display: flex; justify-content: space-around;
  padding: 6px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 8px rgba(0,0,0,.06);
  z-index: 40;
}
.bottom-nav a,
.bottom-nav button.side-kholo {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 4px;
  text-decoration: none; color: var(--muted);
  font-family: inherit; font-size: 11px; font-weight: 600;
  text-transform: none; letter-spacing: 0;
}
/* Menu wala khana <button> hai, link nahi — patti me link ginne wali
   jaanch (patti-har-panne.js) usme Menu ko raasta na samajh le. Dikhne me
   baaki khaano jaisa hi rahe, isliye button ka apna roop mita dete hain. */
.bottom-nav button.side-kholo {
  background: none; border: none; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.bottom-nav a.active { color: var(--truck); font-weight: 700; }
.bottom-nav a svg,
.bottom-nav button.side-kholo svg { width: 22px; height: 22px; display: block; }
.bottom-nav a:active,
.bottom-nav button.side-kholo:active { transform: scale(.94); }
.bottom-nav button.side-kholo.khuli { color: var(--truck); font-weight: 700; }

/* Panne ka aakhri hissa patti ke peeche na chhupe */
body:has(.bottom-nav) .app-screen {
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}
/* Madad ka gol button bhi patti ke UPAR — warna wo uske peeche chhup jata
   hai aur dabta hi nahi. */
body:has(.bottom-nav) .madad-fab {
  bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom, 0px));
}