/* ═══════════════════════════════════════════════════════════════════
   Sharp Scoring — Global Luxury Design System
   Always dark. No light mode.
   "Rolex designed a barber competition OS."
═══════════════════════════════════════════════════════════════════ */

/* ── Inter font ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Design tokens — override every page ────────────────────────── */
:root {
  --gold:    #D4AF37;
  --gold-l:  #F4D67A;
  --gold-d:  #A08020;
  --black:   #000000;
  --b2:      #050505;
  --b3:      #0a0a0a;
  --b4:      #0f0f0f;
  --white:   #FFFFFF;
  --gray:    rgba(255,255,255,0.45);
  --gray-l:  rgba(255,255,255,0.65);
  --border:  rgba(212,175,55,0.25);
  --red:     #E74C3C;
  --green:   #2ECC71;
  --blue:    #3498DB;
}

/* ── Base ───────────────────────────────────────────────────────── */
html, body {
  background: #000000 !important;
}

body, input, select, textarea {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* ── Global card style — machined black metal ───────────────────── */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.01) 100%) !important;
  border: 1px solid rgba(212,175,55,.25) !important;
  box-shadow:
    0 0 0 1px rgba(212,175,55,.08),
    0 8px 32px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  border-radius: 14px !important;
}

.card.gold, .card.hi {
  border-color: rgba(212,175,55,.4) !important;
  box-shadow:
    0 0 0 1px rgba(212,175,55,.15),
    0 0 30px rgba(212,175,55,.07),
    0 8px 32px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* ── Profile cards ──────────────────────────────────────────────── */
.profile-card {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.01) 100%) !important;
  border: 1px solid rgba(212,175,55,.2) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.03) !important;
}

/* ── Primary gold button ────────────────────────────────────────── */
.btn.bg, button.bg, a.btn.bg {
  height: 52px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #F4D67A 0%, #D4AF37 55%, #A08020 100%) !important;
  color: #0a0500 !important;
  border: none !important;
  border-top: 1px solid rgba(255,240,120,.5) !important;
  box-shadow: 0 6px 24px rgba(212,175,55,.38), inset 0 1px 0 rgba(255,255,200,.6) !important;
  text-shadow: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}
.btn.bg:active { transform: translateY(1px); box-shadow: 0 2px 12px rgba(212,175,55,.3) !important; }

/* ── Outlined button — white shiny w/ gold trim ─────────────────── */
.btn.bo, button.bo {
  border-radius: 12px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F2F2 50%, #DCDCDC 100%) !important;
  border: 1px solid rgba(212,175,55,.55) !important;
  border-top: 1px solid rgba(255,255,255,.95) !important;
  border-bottom: 2px solid rgba(160,108,0,.45) !important;
  color: #0A0A0A !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 6px rgba(120,120,120,.18) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}
.btn.bo:active, button.bo:active {
  background: linear-gradient(180deg, #F0F0F0 0%, #C8C8C8 100%) !important;
  transform: translateY(1px) !important;
}

/* ── Ghost button — white shiny w/ gold trim ────────────────────── */
.btn.bgh, button.bgh {
  border-radius: 12px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F2F2 50%, #DCDCDC 100%) !important;
  border: 1px solid rgba(212,175,55,.55) !important;
  border-top: 1px solid rgba(255,255,255,.95) !important;
  border-bottom: 2px solid rgba(160,108,0,.45) !important;
  color: #0A0A0A !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.95) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}
.btn.bgh:active, button.bgh:active {
  background: linear-gradient(180deg, #F0F0F0 0%, #C8C8C8 100%) !important;
  transform: translateY(1px) !important;
}

/* ── Nav bars ───────────────────────────────────────────────────── */
.nav, .topnav {
  background: rgba(0,0,0,.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(212,175,55,.18) !important;
}

.main-tabs, .dash-tabs {
  background: rgba(0,0,0,.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(212,175,55,.15) !important;
}

.mtab, .dtab {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}
.mtab.on, .dtab.on {
  color: #D4AF37 !important;
  border-bottom-color: #D4AF37 !important;
}

/* ── Tab bar (scoring app) ──────────────────────────────────────── */
.tabs, .tab-bar {
  background: rgba(0,0,0,.95) !important;
  border-top: 1px solid rgba(212,175,55,.15) !important;
  backdrop-filter: blur(20px) !important;
}
.tab.on .ti { color: #D4AF37 !important; text-shadow: 0 0 12px rgba(212,175,55,.6) !important; }
.tab.on .tl { color: #D4AF37 !important; }
.tab.on::before { background: #D4AF37 !important; box-shadow: 0 0 10px rgba(212,175,55,.8) !important; }

/* ── Inputs ─────────────────────────────────────────────────────── */
.inp, .sel {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(212,175,55,.2) !important;
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif !important;
  color: #FFFFFF !important;
}
.inp:focus {
  border-color: rgba(212,175,55,.55) !important;
  box-shadow: 0 0 0 2px rgba(212,175,55,.1) !important;
}
.inp::placeholder { color: rgba(255,255,255,.3) !important; }

/* ── Sheets ─────────────────────────────────────────────────────── */
.sheet {
  background: #050505 !important;
  border-top: 1px solid rgba(212,175,55,.2) !important;
  border-radius: 20px 20px 0 0 !important;
}

/* ── Filter pills — white shiny w/ gold trim ────────────────────── */
.filter-btn {
  border-radius: 20px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F2F2 50%, #DCDCDC 100%) !important;
  border: 1px solid rgba(212,175,55,.55) !important;
  border-top: 1px solid rgba(255,255,255,.95) !important;
  border-bottom: 2px solid rgba(160,108,0,.45) !important;
  color: #0A0A0A !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
.filter-btn.on {
  background: linear-gradient(180deg, #F4D67A 0%, #D4AF37 55%, #A08020 100%) !important;
  border: 1px solid rgba(212,175,55,.7) !important;
  border-top: 1px solid rgba(255,240,120,.5) !important;
  border-bottom: 1px solid rgba(160,108,0,.6) !important;
  color: #0A0500 !important;
  box-shadow: 0 0 14px rgba(212,175,55,.35), 0 4px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,200,.6) !important;
}

/* ── Category tab pills ─────────────────────────────────────────── */
.ctab {
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
}
.ctab.on {
  background: linear-gradient(180deg,#F4D67A,#D4AF37) !important;
  color: #0a0500 !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(212,175,55,.35) !important;
}

/* ── Competitor / category chips ────────────────────────────────── */
.chip {
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
}
.chip.on {
  background: rgba(212,175,55,.12) !important;
  border-color: rgba(212,175,55,.5) !important;
  color: #D4AF37 !important;
}

/* ── Score number buttons ───────────────────────────────────────── */
.nb2 {
  border-radius: 8px !important;
  font-family: 'Bebas Neue', sans-serif !important;
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(212,175,55,.15) !important;
  min-width: 36px !important;
  height: 38px !important;
}
.nb2.sel {
  background: linear-gradient(180deg,#F4D67A 0%,#D4AF37 55%,#A08020 100%) !important;
  color: #0a0500 !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 0 12px rgba(212,175,55,.45) !important;
}

/* ── Round / layout toggle ──────────────────────────────────────── */
.lt-btn.on {
  background: linear-gradient(180deg,#F4D67A,#D4AF37) !important;
  color: #0a0500 !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(212,175,55,.3) !important;
}

/* ── Notices ────────────────────────────────────────────────────── */
.notice {
  border-radius: 8px !important;
  border-left: 3px solid #D4AF37 !important;
  background: rgba(212,175,55,.05) !important;
  color: rgba(244,214,122,.9) !important;
  font-family: 'Inter', sans-serif !important;
}
.nr, .notice.red { border-left-color: #E74C3C !important; background: rgba(231,76,60,.06) !important; color: #ffaaaa !important; }
.ng, .notice.green { border-left-color: #2ECC71 !important; background: rgba(46,204,113,.06) !important; color: #a0ffb4 !important; }
.nb, .notice.blue { border-left-color: #3498DB !important; background: rgba(52,152,219,.06) !important; color: #a8d8ff !important; }

/* ── Search bar ─────────────────────────────────────────────────── */
.search-bar {
  border-radius: 12px !important;
  border-color: rgba(212,175,55,.2) !important;
  background: rgba(255,255,255,.04) !important;
}

/* ── Section title dots ─────────────────────────────────────────── */
.sec-t::before { color: #D4AF37 !important; }

/* ── Pills ──────────────────────────────────────────────────────── */
.pill { border-radius: 20px !important; font-family: 'Inter', sans-serif !important; }
.pg   { color: #D4AF37 !important; border-color: rgba(212,175,55,.35) !important; }

/* ── Avatar (score form) ────────────────────────────────────────── */
.pav {
  border-radius: 10px !important;
  border-color: rgba(212,175,55,.35) !important;
  background: rgba(212,175,55,.08) !important;
  color: #D4AF37 !important;
}

/* ── Lock banner ────────────────────────────────────────────────── */
.locked-banner { border-radius: 8px !important; }

/* ── Toast ──────────────────────────────────────────────────────── */
.toast { border-radius: 12px !important; font-family: 'Inter', sans-serif !important; }

/* ── Scroll area ────────────────────────────────────────────────── */
.scroll { background: #000000 !important; }

/* ── Header nav Log In button — white shiny ─────────────────────── */
.tn-btn.tn-login, .tn-login {
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F2F2 50%, #DCDCDC 100%) !important;
  border: 1px solid rgba(212,175,55,.55) !important;
  border-top: 1px solid rgba(255,255,255,.95) !important;
  border-bottom: 2px solid rgba(160,108,0,.45) !important;
  color: #0A0A0A !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* ── Dashboard role selector cards — white shiny ────────────────── */
.dp-btn {
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F2F2 50%, #DCDCDC 100%) !important;
  border: 1px solid rgba(212,175,55,.55) !important;
  border-left: 3px solid var(--gold) !important;
  border-top: 1px solid rgba(255,255,255,.95) !important;
  border-bottom: 2px solid rgba(160,108,0,.45) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
.dp-btn .dp-label { color: #0A0A0A !important; }
.dp-btn .dp-desc  { color: rgba(0,0,0,.5) !important; }
.dp-btn .dp-arrow { color: var(--gold) !important; opacity: 1 !important; }
.dp-btn:active {
  background: linear-gradient(180deg, #F0F0F0 0%, #C8C8C8 100%) !important;
}

/* ── Theme toggle row — always visible ──────────────────────────── */
#theme-toggle-row { display: flex !important; }

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE — Warm White (#FAF8F4) + Same Gold (#C9A84C)
   Activated via: html[data-theme="light"]
   Auto-detected from prefers-color-scheme; overrideable via toggle.
═══════════════════════════════════════════════════════════════════ */

html[data-theme="light"] {
  --gold:   #C9A84C;
  --gold-l: #DFC070;
  --gold-d: #8A6410;
  --black:  #FAF8F4;
  --b2:     #F2EFE8;
  --b3:     #EBE7DE;
  --b4:     #E3DED4;
  --white:  #1A1208;
  --gray:   rgba(26,18,8,0.5);
  --gray-l: rgba(26,18,8,0.65);
  --border: rgba(201,168,76,0.22);
  --red:    #C0392B;
  --green:  #1A8A4A;
  --blue:   #2471A3;
  color-scheme: light;
}

html[data-theme="light"],
html[data-theme="light"] body {
  background: #FAF8F4 !important;
  color: #1A1208 !important;
}

html[data-theme="light"] .scroll { background: #FAF8F4 !important; }

/* Nav */
html[data-theme="light"] .nav,
html[data-theme="light"] .topnav {
  background: rgba(237,232,223,0.97) !important;
  border-bottom: 1px solid rgba(201,168,76,0.2) !important;
}

/* Tab bar */
html[data-theme="light"] .tabs,
html[data-theme="light"] .tab-bar {
  background: rgba(245,240,232,0.97) !important;
  border: 1px solid rgba(201,168,76,0.28) !important;
  box-shadow: 0 8px 32px rgba(26,18,8,0.1), 0 0 0 1px rgba(201,168,76,0.1) !important;
}
html[data-theme="light"] .ti { color: rgba(26,18,8,0.28) !important; }
html[data-theme="light"] .tab.on .ti {
  color: #C9A84C !important;
  filter: drop-shadow(0 0 6px rgba(201,168,76,0.45)) !important;
  text-shadow: none !important;
}
html[data-theme="light"] .tbdg { border-color: rgba(245,240,232,0.97) !important; }

/* Cards & surfaces */
html[data-theme="light"] .card {
  background: rgba(255,255,255,0.65) !important;
  border: 1px solid rgba(26,18,8,0.08) !important;
  box-shadow: 0 2px 10px rgba(26,18,8,0.06), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}
html[data-theme="light"] .card.hi,
html[data-theme="light"] .card.gold {
  border-color: rgba(201,168,76,0.35) !important;
  box-shadow: 0 0 18px rgba(201,168,76,0.08), 0 2px 10px rgba(26,18,8,0.07), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}
html[data-theme="light"] .stat {
  background: rgba(255,255,255,0.6) !important;
  border-color: rgba(26,18,8,0.07) !important;
}

/* Rows, dividers */
html[data-theme="light"] .row { border-bottom-color: rgba(26,18,8,0.06) !important; }
html[data-theme="light"] .row:active { background: rgba(26,18,8,0.03) !important; }
html[data-theme="light"] .rrow { border-bottom-color: rgba(26,18,8,0.05) !important; }
html[data-theme="light"] .cirow { border-bottom-color: rgba(26,18,8,0.05) !important; }
html[data-theme="light"] .crit-row { border-bottom-color: rgba(26,18,8,0.05) !important; }
html[data-theme="light"] .dv { background: rgba(26,18,8,0.07) !important; }

/* Hero sections */
html[data-theme="light"] .hero {
  background: linear-gradient(180deg, rgba(201,168,76,0.08) 0%, rgba(242,239,232,0) 60%), #F2EFE8 !important;
  border-bottom-color: rgba(201,168,76,0.15) !important;
  box-shadow: 0 2px 12px rgba(26,18,8,0.05) !important;
}

/* Sheets */
html[data-theme="light"] .sheet {
  background: #F2EFE8 !important;
  border-top-color: rgba(201,168,76,0.2) !important;
}

/* Inputs */
html[data-theme="light"] .inp,
html[data-theme="light"] .sel {
  background: rgba(255,255,255,0.65) !important;
  border-color: rgba(26,18,8,0.12) !important;
  color: #1A1208 !important;
}
html[data-theme="light"] .inp:focus {
  border-color: rgba(201,168,76,0.55) !important;
  box-shadow: 0 0 0 2px rgba(201,168,76,0.1) !important;
}
html[data-theme="light"] .inp::placeholder { color: rgba(26,18,8,0.35) !important; }

/* Score number buttons */
html[data-theme="light"] .nb2 {
  background: rgba(255,255,255,0.5) !important;
  border-color: rgba(26,18,8,0.12) !important;
  color: rgba(26,18,8,0.45) !important;
}

/* Score slider */
html[data-theme="light"] .score-slider { background: rgba(26,18,8,0.1) !important; }
html[data-theme="light"] .score-slider::-moz-range-track { background: rgba(26,18,8,0.1) !important; }

/* Progress / timer bars */
html[data-theme="light"] .tp { background: rgba(26,18,8,0.08) !important; }
html[data-theme="light"] .clb { background: rgba(26,18,8,0.08) !important; }

/* Chips */
html[data-theme="light"] .chip { border-color: rgba(26,18,8,0.1) !important; }
html[data-theme="light"] .chip.on {
  background: rgba(201,168,76,0.12) !important;
  border-color: rgba(201,168,76,0.4) !important;
}
html[data-theme="light"] .cscroll { border-bottom-color: rgba(26,18,8,0.06) !important; }

/* Category tabs */
html[data-theme="light"] .ctab {
  background: rgba(255,255,255,0.5) !important;
  color: rgba(26,18,8,0.65) !important;
  border-color: rgba(201,168,76,0.25) !important;
  box-shadow: 0 2px 6px rgba(26,18,8,0.06) !important;
}

/* Layout toggle */
html[data-theme="light"] .layout-toggle { border-bottom-color: rgba(26,18,8,0.06) !important; }
html[data-theme="light"] .lt-btn {
  border-color: rgba(26,18,8,0.1) !important;
  color: rgba(26,18,8,0.35) !important;
}

/* Notices */
html[data-theme="light"] .notice {
  color: #7A5500 !important;
  background: rgba(201,168,76,0.08) !important;
  border-left-color: #C9A84C !important;
}
html[data-theme="light"] .nr { color: #8A1A0A !important; background: rgba(192,57,43,0.07) !important; border-left-color: #C0392B !important; }
html[data-theme="light"] .ng { color: #0A5A20 !important; background: rgba(26,138,74,0.07) !important; border-left-color: #1A8A4A !important; }
html[data-theme="light"] .nb { color: #0A3A6A !important; background: rgba(36,113,163,0.07) !important; border-left-color: #2471A3 !important; }

/* Login screen */
html[data-theme="light"] #login { background: #FAF8F4 !important; }
html[data-theme="light"] #login::before {
  background: radial-gradient(ellipse 80% 45% at 50% 0%, rgba(201,168,76,0.12), transparent 55%) !important;
}
html[data-theme="light"] .login-heading { color: #1A1208 !important; }
html[data-theme="light"] .login-eyebrow { color: rgba(201,168,76,0.55) !important; }
html[data-theme="light"] .login-role-name { color: #1A1208 !important; }
html[data-theme="light"] .login-role-sub { color: rgba(26,18,8,0.4) !important; }
html[data-theme="light"] .login-role-row {
  background: rgba(255,255,255,0.45) !important;
  border-color: rgba(26,18,8,0.08) !important;
}
html[data-theme="light"] .login-role-row.sel {
  background: rgba(201,168,76,0.08) !important;
  border-color: rgba(201,168,76,0.55) !important;
}
html[data-theme="light"] .login-role-arrow { color: rgba(26,18,8,0.2) !important; }
html[data-theme="light"] .login-footer { color: rgba(26,18,8,0.2) !important; }
html[data-theme="light"] .jpick {
  background: rgba(255,255,255,0.45) !important;
  border-color: rgba(26,18,8,0.1) !important;
  color: rgba(26,18,8,0.6) !important;
}
html[data-theme="light"] .pk {
  background: rgba(255,255,255,0.45) !important;
  border-color: rgba(26,18,8,0.1) !important;
  color: #1A1208 !important;
}
html[data-theme="light"] .pk:active { background: rgba(26,18,8,0.07) !important; }
html[data-theme="light"] .pd {
  background: rgba(26,18,8,0.08) !important;
  border-color: rgba(26,18,8,0.2) !important;
}
html[data-theme="light"] .login-pin-heading { color: #1A1208 !important; }

/* Show picker */
html[data-theme="light"] #showpicker { background: #FAF8F4 !important; }

/* Outlined & ghost buttons — keep white shiny but cream-tinted in light mode */
html[data-theme="light"] .btn.bo,
html[data-theme="light"] button.bo,
html[data-theme="light"] .btn.bgh,
html[data-theme="light"] button.bgh {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0EDE6 50%, #E0DAD0 100%) !important;
  color: #1A1208 !important;
}

/* Live bar */
html[data-theme="light"] .live-bar {
  background: rgba(26,138,74,0.06) !important;
  border-color: rgba(26,138,74,0.2) !important;
}

/* Timer box */
html[data-theme="light"] .tbox { border-bottom-color: rgba(201,168,76,0.15) !important; }

/* Timer display — darken text since bg is light */
html[data-theme="light"] .td { text-shadow: none !important; }

/* Empty state */
html[data-theme="light"] .ebig { color: rgba(201,168,76,0.2) !important; }

/* Tiebreaker vote banner */
html[data-theme="light"] #tie-vote-banner > div {
  background: #F2EFE8 !important;
  border-color: rgba(201,168,76,0.4) !important;
  box-shadow: 0 -4px 30px rgba(26,18,8,0.12) !important;
}

/* Score form note area */
html[data-theme="light"] .jnote {
  background: rgba(26,18,8,0.05) !important;
  color: rgba(26,18,8,0.6) !important;
}

/* Avatar */
html[data-theme="light"] .pav {
  background: rgba(201,168,76,0.12) !important;
  border-color: rgba(201,168,76,0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   iOS & MOBILE POLISH
   Safe areas · overscroll · font-size zoom prevention · touch targets
   Landscape · tap highlight · momentum scrolling
═══════════════════════════════════════════════════════════════════ */

/* 1 — Pull-to-refresh & bounce prevention */
html, body {
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

/* 2 — Momentum scrolling on scrollable containers */
.scroll, .cscroll, .chip-row, .cilist {
  -webkit-overflow-scrolling: touch;
}

/* 3 — Safe area insets (Dynamic Island / notch / home bar)
   Viewport is already viewport-fit=cover + black-translucent status bar */
.nav, .topnav {
  padding-top: max(env(safe-area-inset-top), 0px);
}
.tabs {
  bottom: max(calc(env(safe-area-inset-bottom) + 10px), 18px) !important;
}
.scroll {
  padding-bottom: max(calc(env(safe-area-inset-bottom) + 90px), 90px);
}
.sheet {
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
}
.sheet > div:last-child,
.sheet-inner {
  padding-bottom: max(env(safe-area-inset-bottom), 16px);
}
#login, #showpicker {
  padding-top: env(safe-area-inset-top);
}

/* 4 — Input zoom prevention
   iOS zooms in on any input with font-size < 16px */
.inp,
.sel,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
  font-size: max(16px, 1em) !important;
}

/* 5 — Touch target sizes (Apple HIG: 44pt minimum) */
.btn    { min-height: 44px; }
.row    { min-height: 44px; }
.tab    { min-height: 44px; min-width: 44px; }
.jpick  { min-height: 44px; }
.nb2    { min-height: 44px; min-width: 44px; }
.ctab   { min-height: 38px; }
.pk     { min-height: 62px; }

/* 6 — Remove tap flash (replaced by haptics) */
.tab, .pk, .btn, .chip, .row, .nb2, .jpick, .cirow, .rrow,
.login-role-row, .ctab, .lt-btn, .crit-row {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
/* Allow text selection in inputs and content areas */
.inp, input, textarea, .rn, .rs, .stat-v, .jnote {
  -webkit-user-select: auto;
  user-select: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE.HTML LIGHT MODE OVERRIDES
   Elements that use hardcoded white/rgba(255,255,255,...) colors
═══════════════════════════════════════════════════════════════════ */

/* Top nav tabs */
html[data-theme="light"] .mtab { color: rgba(26,18,8,0.5) !important; }
html[data-theme="light"] .mtab.on { color: #C9A84C !important; border-bottom-color: #C9A84C !important; }
html[data-theme="light"] .main-tabs {
  background: rgba(237,232,223,0.97) !important;
  border-bottom-color: rgba(201,168,76,0.18) !important;
}

/* Bottom nav */
html[data-theme="light"] .bnav {
  background: rgba(237,232,223,0.97) !important;
  border-top-color: rgba(201,168,76,0.18) !important;
}
html[data-theme="light"] .bnav-icon { color: rgba(26,18,8,0.3) !important; }
html[data-theme="light"] .bnav-label { color: rgba(26,18,8,0.3) !important; }
html[data-theme="light"] .bnav-item.on .bnav-icon { color: #C9A84C !important; }
html[data-theme="light"] .bnav-item.on .bnav-label { color: #C9A84C !important; }

/* Headings and body copy */
html[data-theme="light"] .h1,
html[data-theme="light"] .h2,
html[data-theme="light"] .h3 { color: #1A1208 !important; }
html[data-theme="light"] .hero-sub { color: rgba(26,18,8,0.6) !important; }
html[data-theme="light"] .role-section-hd-txt { color: #1A1208 !important; }
html[data-theme="light"] .tn-sharp { color: #1A1208 !important; }

/* Cards and sections */
html[data-theme="light"] .sec-hd { color: #1A1208 !important; }
html[data-theme="light"] .sec-sub { color: rgba(26,18,8,0.5) !important; }
html[data-theme="light"] .card-title { color: #1A1208 !important; }
html[data-theme="light"] .card-sub { color: rgba(26,18,8,0.55) !important; }
html[data-theme="light"] .rn { color: #1A1208 !important; }
html[data-theme="light"] .rs { color: rgba(26,18,8,0.55) !important; }

/* Theme toggle button in light mode */
html[data-theme="light"] #global-theme-btn {
  background: rgba(201,168,76,0.1) !important;
  border-color: rgba(201,168,76,0.3) !important;
  color: #C9A84C !important;
}

/* 7 — Landscape compact mode
   Prevents layout breaks when phone rotates */
@media (orientation: landscape) and (max-height: 500px) {
  .tabs {
    padding: 4px 6px !important;
    gap: 0 !important;
    bottom: max(calc(env(safe-area-inset-bottom) + 6px), 8px) !important;
  }
  .ti { font-size: 18px !important; }
  .tl { display: none !important; }
  .login-heading { font-size: 36px !important; padding-top: 16px !important; }
  .login-pin-heading { padding: 16px 0 10px !important; font-size: 36px !important; }
  .hero { padding: 10px 16px 8px !important; }
  .scroll { padding-top: 4px !important; }
  .pk { min-height: 44px !important; padding: 8px !important; font-size: 20px !important; }
  .nav, .topnav { min-height: 44px !important; }
}