/* Shree Arbuda Motors — app shell styles (v0.2.0, service-first)
   Tokens from Maruti Suzuki ARENA red + NEXA graphite + Suzuki blue + engineered charcoal.
   No Gotu tokens (P07). */

:root{
  --ink:#0C1B33; --ink-2:#33425E; --muted:#5A6678;
  --red:#0E2A52; --red-deep:#0A1F3E; --red-soft:#E9EFF8;
  --blue:#1B4E8F; --blue-soft:#E7EEF9;
  --nexa:#13294D; --nexa-2:#2C4571; --nexa-soft:#E5ECF6;
  --bg:#F2F6FC; --surface:#FFFFFF; --surface-2:#F7FAFE;
  --line:#E0E7F1; --line-2:#ECF1F8;
  --ok:#1E8E3E;
  --r:14px; --r-sm:10px; --r-lg:20px;
  --shadow:0 1px 2px rgba(12,27,51,.05), 0 8px 24px rgba(12,27,51,.06);
  --shadow-sm:0 1px 2px rgba(12,27,51,.06);
  --header-h:60px; --tab-h:62px;
  --maxw:600px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --ff-display:"Saira", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ff-body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--ff-body); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit}
.tab:focus-visible,.ic-btn:focus-visible,.btn:focus-visible,.chip:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
img{max-width:100%; display:block}
input,select,textarea{font-family:inherit; font-size:16px}

/* ---------- app frame ---------- */
.app{max-width:var(--maxw); margin:0 auto; min-height:100dvh; background:var(--bg); position:relative}

.topbar{
  position:fixed; top:0; left:50%; transform:translateX(-50%); width:100%; max-width:var(--maxw); z-index:40;
  height:calc(var(--header-h) + var(--sat)); padding-top:var(--sat);
  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-in{max-width:var(--maxw); margin:0 auto; height:var(--header-h);
  display:flex; align-items:center; gap:10px; padding:0 14px}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand .emb{width:34px; height:34px; border-radius:9px; flex:none}
.brand .bt{min-width:0}
.brand .bt b{font-family:var(--ff-display); font-weight:700; font-size:15px; letter-spacing:-.2px; display:block; line-height:1}
.brand .bt span{font-size:10.5px; color:var(--muted); letter-spacing:.3px; display:block; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar .sp{flex:1}
.ic-btn{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:var(--ink); background:var(--surface-2); border:1px solid var(--line)}
.ic-btn.red{background:var(--red); color:#fff; border-color:var(--red)}
.ic-btn svg{width:20px; height:20px}

/* ---------- main / tab bar ---------- */
main{padding:calc(var(--header-h) + var(--sat) + 8px) 0 calc(var(--tab-h) + var(--sab) + 14px)}
.view{padding:0 14px; animation:fade .22s ease}
@keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}

.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:var(--maxw); z-index:40;
  background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(12px);
  border-top:1px solid var(--line);
  padding-bottom:var(--sab); overflow:visible;
}
.tabbar-in{max-width:var(--maxw); margin:0 auto; height:var(--tab-h);
  display:grid; grid-template-columns:repeat(5,1fr)}
.tab{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--muted); font-size:10.5px; font-weight:600; letter-spacing:.1px; position:relative}
.tab svg{width:23px; height:23px; stroke-width:1.9}
.tab.active{color:var(--red)}
.tab.active::before{content:""; position:absolute; top:0; width:26px; height:3px; border-radius:0 0 3px 3px; background:var(--red)}
/* center primary action */
.tab.cta{color:var(--red); justify-content:flex-end; padding-bottom:6px}
.tab.cta svg{width:46px; height:46px; padding:12px; border-radius:50%; color:#fff;
  background:linear-gradient(160deg,#1B4E8F,#0A1F3E); box-shadow:0 8px 18px rgba(14,42,82,.42); margin-top:-22px; stroke-width:2}
.tab.cta.active::before{display:none}
.tab.cta:active svg{transform:scale(.94)}

/* ---------- typography ---------- */
.h1{font-family:var(--ff-display); font-weight:700; font-size:26px; line-height:1.1; letter-spacing:-.5px; margin:0}
.h2{font-family:var(--ff-display); font-weight:700; font-size:19px; letter-spacing:-.3px; margin:0}
.eyebrow{font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--red)}
.lead{color:var(--ink-2); font-size:14.5px; line-height:1.5}
.muted{color:var(--muted)}
.section{margin-top:26px}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px}
.section-head a{font-size:13px; font-weight:600; color:var(--red)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:50px; padding:0 18px; border-radius:13px; font-weight:700; font-size:15px; letter-spacing:-.1px;
  background:var(--red); color:#fff; transition:transform .08s, filter .15s; width:100%}
.btn:active{transform:scale(.985)}
.btn.ghost{background:var(--surface); color:var(--ink); border:1.5px solid var(--line)}
.btn.ghost-d{background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.28)}
.btn.blue{background:var(--blue)}
.btn.sm{height:42px; font-size:13.5px; width:auto; padding:0 16px; border-radius:11px}
.btn.full{width:100%}
.btn svg{width:18px; height:18px}
.row-btns{display:grid; grid-template-columns:1fr 1fr; gap:10px}

/* ---------- hero ---------- */
.hero{position:relative; border-radius:var(--r-lg); overflow:hidden; color:#fff;
  background:linear-gradient(150deg,#13294D 0%, #0C1B33 55%, #081427 100%);
  padding:22px 18px 20px; box-shadow:var(--shadow)}
.hero::after{content:""; position:absolute; right:-40px; top:-40px; width:200px; height:200px;
  background:radial-gradient(circle at center, rgba(14,42,82,.45), transparent 62%); pointer-events:none}
.hero .badge{display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700;
  letter-spacing:.4px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  padding:6px 11px; border-radius:999px; color:#fff}
.hero .badge .dot{width:7px; height:7px; border-radius:50%; background:var(--red)}
.hero h1{font-family:var(--ff-display); font-weight:700; font-size:27px; line-height:1.08; letter-spacing:-.6px; margin:14px 0 6px}
.hero p{color:rgba(255,255,255,.78); font-size:13.5px; line-height:1.5; margin:0 0 16px; max-width:34ch}
.hero-cta{display:grid; grid-template-columns:1.3fr 1fr; gap:10px; margin:0 0 18px}
.hero-cta .btn{height:46px; font-size:14px}
.hero .stat{display:flex; gap:18px; margin-top:4px}
.hero .stat b{font-family:var(--ff-display); font-size:18px; display:block; line-height:1}
.hero .stat span{font-size:10.5px; color:rgba(255,255,255,.6)}

/* quick actions */
.quick{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px}
.qa{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 6px 10px; display:flex; flex-direction:column; align-items:center; gap:7px; box-shadow:var(--shadow-sm)}
.qa .qi{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--red-soft); color:var(--red)}
.qa.blue .qi{background:var(--blue-soft); color:var(--blue)}
.qa span{font-size:11px; font-weight:600; text-align:center; line-height:1.2; color:var(--ink-2)}
.qa svg{width:21px; height:21px}

/* ---------- service tiles ---------- */
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px; box-shadow:var(--shadow-sm);
  display:block; text-align:left; position:relative; transition:transform .1s, box-shadow .2s, border-color .15s}
a.tile:active,button.tile:active{transform:scale(.99)}
.tile .ti{width:40px; height:40px; border-radius:11px; background:var(--red-soft); color:var(--red); display:grid; place-items:center; margin-bottom:10px}
.tile .ti svg{width:21px; height:21px}
.tile h3{font-family:var(--ff-display); font-size:14.5px; margin:0 0 4px}
.tile p{font-size:12px; color:var(--muted); margin:0; line-height:1.45}
.tile .from{display:inline-block; margin-top:9px; font-size:12px; font-weight:700; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); padding:3px 9px; border-radius:999px}
.tiles.pick .tile{cursor:pointer}
.tile.bk-svc{display:flex; flex-direction:column; align-items:flex-start}
.tile.bk-svc h3{margin-bottom:6px}
.tile.bk-svc.sel{border-color:var(--red); box-shadow:0 0 0 2px var(--red-soft)}

/* ---------- brands serviced ---------- */
.brands{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.brand-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:15px 14px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden}
.brand-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px}
.brand-card.arena::before{background:var(--red)}
.brand-card.nexa::before{background:var(--nexa)}
.brand-card .bc-tag{display:inline-block; font-size:10px; font-weight:800; letter-spacing:1px; padding:3px 8px; border-radius:6px; margin-bottom:9px}
.brand-card.arena .bc-tag{background:var(--red-soft); color:var(--red-deep)}
.brand-card.nexa .bc-tag{background:var(--nexa-soft); color:var(--nexa)}
.brand-card h3{font-family:var(--ff-display); font-size:14.5px; margin:0 0 5px}
.brand-card p{font-size:11.5px; color:var(--muted); margin:0; line-height:1.45}

/* ---------- cars (reference) ---------- */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.car{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .1s, box-shadow .2s}
.car:active{transform:scale(.99)}
.car .ph{aspect-ratio:16/10; background:radial-gradient(120% 100% at 50% 0%, #fff 0%, #eef1f5 100%); position:relative; display:grid; place-items:center}
.car .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6%}
.car .ph .sil{width:78%; opacity:.9}
.bt-tag{position:absolute; left:8px; top:8px; font-size:9.5px; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase; padding:4px 8px; border-radius:999px; z-index:2}
.bt-tag.arena{color:var(--red-deep); background:var(--red-soft)}
.bt-tag.nexa{color:var(--nexa); background:var(--nexa-soft)}
.car .cc{padding:11px 12px 13px}
.car .cc h3{font-family:var(--ff-display); font-weight:700; font-size:15.5px; margin:0; letter-spacing:-.2px}
.car .cc .fuel{font-size:11px; color:var(--muted); margin:3px 0 8px}
.car .price b{font-family:var(--ff-display); font-size:14px; color:var(--red)}
.car .price span{font-size:10.5px; color:var(--muted); display:block; margin-top:1px}

/* filter chips */
.chips{display:flex; gap:8px; overflow-x:auto; padding:2px 0 4px; margin:0 -14px; padding-left:14px; padding-right:14px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none; height:36px; padding:0 14px; border-radius:999px; background:var(--surface); border:1px solid var(--line);
  font-size:13px; font-weight:600; color:var(--ink-2); display:inline-flex; align-items:center}
.chip.active{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ---------- detail / car ---------- */
.detail .headimg{aspect-ratio:16/10; border-radius:var(--r-lg); background:radial-gradient(120% 100% at 50% 0%, #fff 0%, #e9edf2 100%); position:relative; display:grid; place-items:center; overflow:hidden; box-shadow:var(--shadow-sm)}
.detail .headimg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.detail .headimg .sil{width:74%}
.pill-row{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px}
.pill{font-size:12px; font-weight:600; padding:7px 11px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2)}
.hl{list-style:none; padding:0; margin:16px 0 0}
.hl li{display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--line-2); font-size:14px; color:var(--ink-2)}
.hl li svg{width:18px; height:18px; color:var(--ok); flex:none; margin-top:1px}
.sticky-cta{position:sticky; bottom:calc(var(--tab-h) + var(--sab) + 8px); margin-top:18px; z-index:5}

/* typical cost card */
.cost-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:6px 16px 14px; box-shadow:var(--shadow-sm)}
.cost-row{display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line-2)}
.cost-row:last-of-type{border-bottom:0}
.cost-row span{font-size:13.5px; color:var(--ink-2)}
.cost-row b{font-family:var(--ff-display); font-size:14.5px}

/* ---------- estimator ---------- */
.est .est-out{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:6px; padding:16px; background:var(--ink); color:#fff; border-radius:var(--r)}
.est .est-out>div:first-child span{font-size:11px; color:rgba(255,255,255,.6)}
.est .est-out b{font-family:var(--ff-display); font-size:26px; line-height:1.05; display:inline}
.est-tax{font-size:11px; color:rgba(255,255,255,.55)!important; font-weight:400}
.est-meta{font-size:11px; color:rgba(255,255,255,.7)}
.est-meta span{display:block}
.est-meta span:first-child{font-weight:700; color:#fff; font-size:12px; margin-bottom:2px}

/* ---------- forms ---------- */
.field{margin-top:13px}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px}
.field .opt{font-weight:500; color:var(--muted)}
.field input,.field select,.field textarea{width:100%; height:48px; padding:0 14px; border:1.5px solid var(--line);
  border-radius:12px; background:var(--surface); color:var(--ink); transition:border-color .15s}
.field textarea{height:auto; padding:12px 14px; min-height:84px; resize:vertical; line-height:1.45}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-color:var(--red)}
.form-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-sm)}

/* ---------- booking wizard ---------- */
.book .stepper{display:flex; align-items:center; margin:4px 0 18px}
.stepper .st{display:flex; flex-direction:column; align-items:center; gap:5px; flex:none}
.stepper .sd{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700;
  background:var(--surface); border:1.5px solid var(--line); color:var(--muted)}
.stepper .sl{font-size:10px; font-weight:600; color:var(--muted)}
.stepper .st.now .sd{background:var(--red); border-color:var(--red); color:#fff}
.stepper .st.now .sl{color:var(--red)}
.stepper .st.done .sd{background:var(--ok); border-color:var(--ok); color:#fff}
.stepper .sbar{flex:1; height:2px; background:var(--line); margin:0 4px; margin-bottom:16px}
.bk-body{min-height:40dvh}
.bk-nav{display:grid; grid-template-columns:1fr 1.4fr; gap:10px; margin-top:22px}
.bk-nav .btn{height:48px}
.bk-nav .btn[data-bk-next] svg{margin-left:-2px}

/* slots + segmented */
.slots{display:grid; gap:8px}
.slot{height:46px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); font-size:13.5px; font-weight:600; color:var(--ink-2); text-align:left; padding:0 14px}
.slot.active{border-color:var(--red); background:var(--red-soft); color:var(--red-deep)}
.seg{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.sg{height:46px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); font-size:13.5px; font-weight:600; color:var(--ink-2)}
.sg.active{border-color:var(--blue); background:var(--blue-soft); color:var(--blue)}

/* inline estimate */
.est-inline{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:18px; padding:13px 15px; background:var(--blue-soft); border:1px solid #d6e1f0; border-radius:var(--r)}
.est-inline span{font-size:12px; font-weight:600; color:var(--blue)}
.est-inline b{font-family:var(--ff-display); font-size:18px; color:var(--ink); margin-left:auto}
.est-inline small{flex-basis:100%; font-size:11px; color:var(--muted)}

/* review */
.review{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:4px 16px; box-shadow:var(--shadow-sm)}
.rev-row{display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--line-2)}
.rev-row:last-child{border-bottom:0}
.rev-row .rl{font-size:12.5px; color:var(--muted); width:104px; flex:none}
.rev-row .rv{font-size:14px; font-weight:600; color:var(--ink); flex:1}
.rev-row .rv small{font-weight:400; color:var(--muted); font-size:11px}
.rev-row.est .rv{font-family:var(--ff-display)}
.rev-edit{font-size:12px; font-weight:700; color:var(--red); flex:none}
.bk-confirm{margin-top:18px}

/* done */
.done{text-align:center; padding:18px 6px 6px}
.done-ic{width:74px; height:74px; border-radius:50%; background:var(--ok); color:#fff; display:grid; place-items:center; margin:0 auto 16px; box-shadow:0 10px 24px rgba(30,142,62,.32)}
.done-ic svg{width:38px; height:38px; stroke-width:2.4}
.done .lead{margin-top:6px}
.done-card{text-align:left; margin-top:18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:4px 16px; box-shadow:var(--shadow-sm)}
.done-card .rev-edit{display:none}

/* ---------- offers ---------- */
.offer{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow-sm); margin-bottom:12px; position:relative; overflow:hidden}
.offer::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--red)}
.offer .otag{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--red); background:var(--red-soft); padding:4px 9px; border-radius:999px; margin-bottom:9px}
.offer h3{font-family:var(--ff-display); font-size:16px; margin:0 0 5px}
.offer p{font-size:13px; color:var(--ink-2); line-height:1.5; margin:0 0 13px}

/* ---------- visit / contact ---------- */
.info{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); overflow:hidden}
.info a, .info .ir{display:flex; align-items:center; gap:13px; padding:14px 15px; border-bottom:1px solid var(--line-2)}
.info a:last-child,.info .ir:last-child{border-bottom:0}
.info .ii{width:38px; height:38px; border-radius:11px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; flex:none}
.info .ii svg{width:19px; height:19px}
.info b{font-size:14px; display:block}
.info small{color:var(--muted); font-size:12px}
.info .chev{margin-left:auto; color:var(--muted)}
.trust{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px}
.trust .t{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:13px 8px; text-align:center}
.trust .t b{font-family:var(--ff-display); font-size:17px; display:block; color:var(--ink); line-height:1.1}
.trust .t span{font-size:10.5px; color:var(--muted); line-height:1.3; display:block; margin-top:5px}

/* ---------- search overlay ---------- */
.search-ov{position:fixed; top:0; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:var(--maxw); z-index:60; background:var(--bg); display:none; flex-direction:column; padding-top:var(--sat)}
.search-ov.open{display:flex; animation:fade .18s ease}
.search-bar{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--surface)}
.search-bar input{flex:1; border:0; outline:0; font-size:17px; background:none}
.search-results{flex:1; overflow:auto; padding:6px 0}
.sr{display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--line-2)}
.sr .srph{width:54px; height:38px; border-radius:8px; background:#eef1f5; display:grid; place-items:center; flex:none}
.sr .srph svg{width:42px}
.sr b{font-family:var(--ff-display); font-size:15px}
.sr small{color:var(--muted); font-size:12px}
.sr .srp{margin-left:auto; font-weight:700; font-size:13px; color:var(--red)}
.empty{padding:40px 20px; text-align:center; color:var(--muted)}

/* ---------- misc ---------- */
.note{font-size:11px; color:var(--muted); line-height:1.5; margin-top:10px}
.legal{margin-top:24px; padding:16px 14px 8px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); line-height:1.6; text-align:center}
.legal b{color:var(--ink-2)}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--tab-h) + var(--sab) + 16px);
  background:var(--ink); color:#fff; padding:11px 16px; border-radius:12px; font-size:13px; font-weight:600;
  z-index:80; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:90%}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.install{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:12px 14px; box-shadow:var(--shadow-sm); margin-bottom:16px}
.install .ix{width:40px; height:40px; border-radius:10px; flex:none}
.install b{font-size:13.5px; display:block}
.install small{font-size:11.5px; color:var(--muted)}
.install .btn{width:auto; height:38px; font-size:13px; padding:0 14px; margin-left:auto; flex:none}

/* ---------- SAM Buddy (buddy.js) ---------- */
.bd-fabwrap{position:fixed; left:0; right:0; bottom:calc(var(--tab-h) + var(--sab) + 14px); z-index:55;
  max-width:var(--maxw); margin:0 auto; padding:0 14px; pointer-events:none; display:flex; justify-content:flex-end}
.bd-fabwrap.hide{display:none}
.bd-fab{pointer-events:auto; display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 17px 0 15px;
  border-radius:999px; background:linear-gradient(160deg,#1B4E8F,#0A1F3E); color:#fff; font-weight:700; font-size:14px;
  letter-spacing:-.2px; box-shadow:0 8px 22px rgba(14,42,82,.42); transition:transform .08s}
.bd-fab:active{transform:scale(.96)}
.bd-fab svg{width:22px; height:22px}

.bd-panelwrap{position:fixed; inset:0; z-index:75; display:flex; align-items:flex-end; justify-content:center}
.bd-panelwrap[hidden]{display:none}
.bd-backdrop{position:absolute; inset:0; background:rgba(12,14,18,.42); opacity:0; transition:opacity .22s}
.bd-panelwrap.show .bd-backdrop{opacity:1}
.bd-panel{position:relative; width:100%; max-width:var(--maxw); height:min(80dvh,660px); background:var(--bg);
  border-radius:20px 20px 0 0; display:flex; flex-direction:column; overflow:hidden; padding-bottom:var(--sab);
  box-shadow:0 -12px 44px rgba(12,14,18,.28); transform:translateY(101%); transition:transform .26s cubic-bezier(.22,.7,.3,1)}
.bd-panelwrap.show .bd-panel{transform:translateY(0)}
.bd-head{display:flex; align-items:center; gap:10px; padding:13px 14px; background:var(--surface); border-bottom:1px solid var(--line)}
.bd-emb{width:34px; height:34px; border-radius:9px; flex:none}
.bd-id{flex:1; min-width:0}
.bd-id b{font-family:var(--ff-display); font-size:15px; display:block; line-height:1}
.bd-id .bd-sub{font-size:10.5px; color:var(--muted); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px}
.bd-lang{display:flex; gap:2px; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:2px; flex:none}
.bd-lang button{font-size:11px; font-weight:700; padding:5px 7px; border-radius:7px; color:var(--muted); min-width:28px; line-height:1}
.bd-lang button.on{background:var(--red); color:#fff}
.bd-x{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); flex:none}
.bd-x svg{width:18px; height:18px}
.bd-msgs{flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:10px}
.bd-msg{max-width:85%; padding:11px 13px; border-radius:15px; font-size:13.5px; line-height:1.5}
.bd-msg.bot{background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:5px; align-self:flex-start; box-shadow:var(--shadow-sm)}
.bd-msg.user{background:var(--ink); color:#fff; border-bottom-right-radius:5px; align-self:flex-end}
.bd-msg b{font-weight:700}
.bd-est{font-family:var(--ff-display); font-weight:700; color:var(--red-deep)}
.bd-note{font-size:11.5px; color:var(--muted)}
.bd-ch{font-size:9.5px; font-weight:800; letter-spacing:.5px; padding:1px 5px; border-radius:5px}
.bd-ch.arena{background:var(--red-soft); color:var(--red-deep)}
.bd-ch.nexa{background:var(--nexa-soft); color:var(--nexa)}
.bd-quick{display:flex; flex-wrap:wrap; gap:8px; align-self:flex-start; max-width:97%; margin-top:-2px}
.bd-chip{font-size:12.5px; font-weight:600; padding:8px 13px; border-radius:999px; background:var(--surface); border:1.5px solid var(--line); color:var(--ink-2); transition:transform .08s}
.bd-chip:active{transform:scale(.97)}
.bd-chip.act{background:var(--red); color:#fff; border-color:var(--red)}
.bd-foot{display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--surface); border-top:1px solid var(--line)}
.bd-foot input{flex:1; height:44px; border:1.5px solid var(--line); border-radius:999px; padding:0 16px; background:var(--surface-2); font-size:15px}
.bd-foot input:focus{outline:0; border-color:var(--red)}
.bd-send{width:44px; height:44px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; flex:none}
.bd-send svg{width:20px; height:20px}

/* ---------- v0.4 — account, auth, tracker, legal, footer, cookies ---------- */
.field .req{font-weight:600; color:var(--red)}
.linklike{color:var(--red); font-weight:700; font-size:inherit; background:none; border:0; padding:0; cursor:pointer}

#btnAccount{position:relative}
.ic-btn .av{display:none}
.ic-btn.in{background:var(--red); border-color:var(--red); color:#fff}
.ic-btn.in svg{display:none}
.ic-btn.in .av{display:block; font-family:var(--ff-display); font-size:16px; font-weight:800}

/* auth sheet */
.auth-ov{position:fixed; inset:0; z-index:90; display:none; align-items:flex-end; justify-content:center; background:rgba(12,14,18,.5)}
.auth-ov.open{display:flex; animation:fade .18s ease}
.auth-sheet{position:relative; width:100%; max-width:var(--maxw); background:var(--surface); border-radius:20px 20px 0 0; padding:24px 18px calc(20px + var(--sab)); box-shadow:0 -12px 44px rgba(0,0,0,.3); max-height:92dvh; overflow:auto; animation:slideup .26s cubic-bezier(.22,.7,.3,1)}
@keyframes slideup{from{transform:translateY(40px); opacity:.5}to{transform:none; opacity:1}}
.auth-x{position:absolute; right:14px; top:14px; width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2)}
.auth-x svg{width:18px; height:18px}
.auth-emb{display:block; margin:2px auto 10px; border-radius:12px}
.btn.google{background:var(--surface); color:var(--ink); border:1.5px solid var(--line); width:100%}
.btn.google:hover{background:var(--surface-2)} .btn.google svg{width:18px; height:18px}
.auth-or{display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--muted); font-size:12px}
.auth-or::before,.auth-or::after{content:""; flex:1; height:1px; background:var(--line)}
.auth-err{color:var(--red); font-size:12.5px; min-height:16px; margin:8px 0 0; text-align:center}
.auth-switch{text-align:center; font-size:13px; color:var(--muted); margin-top:14px}

/* tracker */
.track-head{display:flex; align-items:flex-end; justify-content:space-between; margin:6px 0 16px}
.signin-card{text-align:center; padding:40px 18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); margin-top:8px}
.signin-card .btn{width:auto; margin:0 auto; padding:0 22px}
.track-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-sm); margin-bottom:14px}
.tc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.tc-top b{font-family:var(--ff-display); font-size:16px}
.tc-top small{color:var(--muted); font-size:12px}
.tc-top .ref{font-size:11px; color:var(--muted); font-weight:600; flex:none}
.tc-pick{display:inline-flex; align-items:center; gap:7px; margin:11px 0 2px; font-size:12px; font-weight:600; color:var(--blue); background:var(--blue-soft); padding:6px 11px; border-radius:999px}
.tc-pick svg{width:16px; height:16px}
.track-steps{margin:14px 0 4px; padding-left:4px}
.ts{display:flex; align-items:center; gap:12px; position:relative; padding:7px 0}
.ts::before{content:""; position:absolute; left:10px; top:0; bottom:0; width:2px; background:var(--line)}
.ts:first-child::before{top:50%} .ts:last-child::before{bottom:50%}
.ts .td{width:22px; height:22px; border-radius:50%; background:var(--surface); border:2px solid var(--line); display:grid; place-items:center; z-index:1; flex:none; color:#fff}
.ts .tl{font-size:13.5px; color:var(--muted)}
.ts.done .td{background:var(--ok); border-color:var(--ok)} .ts.done .tl{color:var(--ink-2)}
.ts.now .td{background:var(--red); border-color:var(--red); box-shadow:0 0 0 4px var(--red-soft)}
.ts.now .tl{color:var(--red); font-weight:700}
.tc-state{margin-top:10px; font-size:13px; color:var(--ink-2)}
.tc-state.done{display:flex; align-items:center; gap:8px; color:var(--ok); font-weight:700}
.tc-state.done svg{width:18px; height:18px}

/* footer */
.foot{margin:30px -14px 0; background:var(--ink); color:rgba(255,255,255,.7); border-radius:var(--r-lg) var(--r-lg) 0 0; padding:24px 18px calc(20px + var(--sab))}
.foot .fbrand img{opacity:.95; height:34px}
.foot .fbrand p{font-size:13px; line-height:1.5; margin:10px 0 0; color:rgba(255,255,255,.58); max-width:46ch}
.foot .frow{display:flex; gap:8px; margin-top:12px}
.foot .frow .chip{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); color:#fff; height:32px; padding:0 13px; border-radius:999px; font-size:12.5px; font-weight:600; display:inline-flex; align-items:center}
.foot .fcols{display:flex; gap:38px; margin-top:22px; flex-wrap:wrap}
.foot .fcol h4{font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:rgba(255,255,255,.5); margin:0 0 8px}
.foot .fcol a,.foot .fcol .linklike{display:block; color:rgba(255,255,255,.78); font-size:13.5px; padding:5px 0; font-weight:500; text-align:left}
.foot .fcol a:hover,.foot .fcol .linklike:hover{color:#fff}
.foot .fbar{margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12); font-size:11.5px; line-height:1.6; color:rgba(255,255,255,.5)}
.foot .fbar b{color:rgba(255,255,255,.82)} .foot .fbar a{color:rgba(255,255,255,.82)}

/* legal pages */
.legal-page .legalbody{margin-top:8px}
.legalbody .eff{font-size:12px; color:var(--muted); margin:0 0 16px; line-height:1.5}
.legalbody .infocard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:15px 16px; box-shadow:var(--shadow-sm); margin-bottom:12px}
.legalbody .infocard h3{font-family:var(--ff-display); font-size:15.5px; margin:0 0 8px}
.legalbody .infocard p{font-size:13.5px; line-height:1.55; color:var(--ink-2); margin:0 0 8px}
.legalbody .infocard p:last-child{margin-bottom:0}
.legalbody .infocard ul{margin:0 0 8px; padding-left:18px}
.legalbody .infocard li{font-size:13.5px; line-height:1.55; color:var(--ink-2); margin-bottom:5px}
.legalbody .hourrow{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line-2); font-size:13px}
.legalbody .hourrow:last-child{border-bottom:0}
.legalbody .hourrow b{color:var(--ink)} .legalbody .hourrow span{color:var(--muted); text-align:right}
.legalbody a{color:var(--red); font-weight:600}

/* cookie bar */
.cookie-bar{position:fixed; left:0; right:0; bottom:0; z-index:85; max-width:var(--maxw); margin:0 auto; padding:0 14px calc(var(--tab-h) + var(--sab) + 12px); transform:translateY(20px); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s}
.cookie-bar.show{transform:none; opacity:1; pointer-events:auto}
.cookie-in{background:var(--ink); color:#fff; border-radius:14px; padding:13px 15px; box-shadow:var(--shadow); display:flex; align-items:center; gap:12px; font-size:12.5px; line-height:1.5}
.cookie-in a{color:#fff; text-decoration:underline} .cookie-in b{color:#fff}
.cookie-in .btn{flex:none; background:var(--red); height:38px}

/* ---------- v0.5 — profile, saved cars, maps picker, driver ---------- */
.saved-cars{margin-bottom:14px}
.sc-lbl{font-size:12px;font-weight:600;color:var(--ink-2);display:block;margin-bottom:7px}
.sc-row{display:flex;gap:8px;flex-wrap:wrap}
.sc-chip{font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:999px;background:var(--red-soft);border:1px solid var(--line);color:var(--red-deep)}
.sc-chip:active{transform:scale(.97)}
.loc-btn{justify-content:center}
.map-wrap{margin-top:10px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.map-frame{display:block;width:100%;height:180px;border:0}
.map-ph{min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:12.5px;text-align:center;padding:18px}
.map-ph svg{width:26px;height:26px;color:var(--blue)}
.acct-head{display:flex;align-items:center;gap:14px;margin:6px 0 4px}
.acct-av{width:52px;height:52px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-family:var(--ff-display);font-size:24px;font-weight:800;flex:none}
.car-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;box-shadow:var(--shadow-sm);margin-bottom:10px}
.car-row .ci{width:54px;height:34px;display:grid;place-items:center;flex:none;color:#B9C4D6}
.car-row .ci .sil{width:50px}
.car-row .cri{flex:1;min-width:0}
.car-row .cri b{font-family:var(--ff-display);font-size:14.5px}
.car-row .cri small{color:var(--muted);font-size:12px;display:block;margin-top:1px}
.iconbtn-x{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);flex:none}
.iconbtn-x:hover{color:var(--red);border-color:var(--red-soft)} .iconbtn-x svg{width:17px;height:17px}
.setting-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;box-shadow:var(--shadow-sm)}
.setting-row .si{width:38px;height:38px;border-radius:11px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;flex:none}
.setting-row .si svg{width:19px;height:19px}
.setting-row .sii{flex:1;min-width:0}
.setting-row .sii b{font-size:14px;display:block} .setting-row .sii small{color:var(--muted);font-size:12px}
.tc-driver{display:flex;align-items:center;gap:11px;margin:11px 0 2px;background:var(--blue-soft);border:1px solid #d6e1f0;border-radius:var(--r);padding:10px 12px}
.tc-driver .dav{width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;flex:none}
.tc-driver .dav svg{width:20px;height:20px}
.tc-driver .dvi{flex:1;min-width:0}
.tc-driver .dvi b{font-size:14px;display:block} .tc-driver .dvi small{color:var(--muted);font-size:11.5px}
.tc-driver .btn{flex:none;width:auto}

/* ---------- v0.6 — OEM partner lockup + authorised badge (Atlas node E) ----------
   Authorised Maruti Suzuki ARENA + NEXA service partner.
   Uses navy tokens only; logo SVGs (/assets/maruti-logo.svg, /assets/nexa-logo.svg)
   are swappable typographic placeholders supplied by the assets node. */

/* footer lockup: centered, gap, subtle top divider */
.oem-partners{
  display:flex; flex-direction:column; align-items:center; gap:11px;
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
}
.oem-label{
  font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--muted); text-align:center; line-height:1.4;
}
.oem-logos{display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center}
.oem-logo{height:26px; width:auto; opacity:.9}

/* compact inline chip near the hero: surface bg, hairline border, small navy text */
.authorised-badge{
  display:inline-flex; align-items:center; gap:9px; margin-top:14px;
  padding:7px 13px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  font-size:12px; font-weight:700; letter-spacing:-.1px; color:var(--ink);
}
.authorised-badge .oem-logo{height:16px; opacity:1}

@media (min-width:560px){ .quick{gap:12px} }
/* tablet + desktop: present the mobile-first app as a centered surface on a backdrop */
@media (min-width:680px){
  body{ background:#e4e6eb; }
  .app{ box-shadow:0 0 0 1px var(--line), 0 26px 70px rgba(12,27,51,.14); min-height:100dvh; }
}
/* desktop / large tablet: let the app FILL the browser instead of a phone column */
@media (min-width:1024px){
  body{ background:#eef1f6; }
  .app{ max-width:1100px; box-shadow:0 0 0 1px var(--line), 0 26px 70px rgba(12,27,51,.12); }
  .topbar, .topbar-in, .search-ov, .cookie-bar{ max-width:1100px; }
  /* content card grids flow into as many columns as fit */
  .cards, .tiles, .brands{ grid-template-columns:repeat(auto-fill, minmax(248px, 1fr)); }
  .hero h1{ font-size:32px; }
  .hero-cta{ max-width:460px; }
  /* bottom nav → centered floating dock (don't stretch 5 tabs across the page) */
  .tabbar{ max-width:600px; bottom:16px; border:1px solid var(--line); border-radius:20px;
    box-shadow:0 18px 50px rgba(12,27,51,.22); }
  .tabbar-in{ max-width:600px; }
  main{ padding-bottom:calc(var(--tab-h) + var(--sab) + 46px); }
  /* keep modals/overlays at a comfortable width (they also key off --maxw) */
  .auth-sheet{ max-width:480px; border-radius:20px; }
  .bd-panel{ max-width:420px; }
}
/* very wide screens: a touch more room, content stays readable */
@media (min-width:1440px){
  .app, .topbar, .topbar-in, .search-ov, .cookie-bar{ max-width:1180px; }
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} .bd-panel{transition:none} }

/* ===================================================================
   v0.7 — car explorer / configurator
   -------------------------------------------------------------------
   Styles the interactive "cars we service" showroom emitted by app.js:
   a 360°/3D viewer stage (CarArt SVG fallback or Car3D WebGL canvas),
   recolorable paint swatches, a real trim-ladder variant chip row,
   a 2-col spec grid, and an indicative "price from" line.
   Service-station context: this is a rich showroom — the parent app
   keeps "Book a service" as the primary CTA, so nothing here competes
   for that role (chips/swatches are selection affordances, not CTAs).
   Navy tokens only (--red resolves to navy #0E2A52 in this app).
   Premium feel: glossy stage gradient, soft shadows, ring-style
   active states. Responsive: stacks/relaxes on phones <=600px,
   sits comfortably inside the centered desktop card.
   Existing rules above are NOT modified.
   =================================================================== */

/* ---- viewer stage: the recolorable car canvas / SVG lives here ---- */
.cfg-stage{
  position:relative; width:100%; aspect-ratio:16/10;
  border-radius:var(--r-lg);
  background:linear-gradient(170deg,#EAF0FA,#F7FAFE);
  border:1px solid var(--line); overflow:hidden;
  display:grid; place-items:center;
  box-shadow:var(--shadow);
  /* default paint var so a bare stage still renders the bodywork */
  --paint:#8A93A0;
}
/* the recolorable illustration SVG fills the stage */
.cfg-stage svg{ width:100%; height:100%; display:block }
/* (v0.8: the 360° badge + "drag to rotate" hint were removed with the 3D viewer) */

/* ---- a configurator section block (swatches / variants / specs) ---- */
.cfg-row{ margin-top:16px }

/* small uppercase tracked label above swatches / variants */
.cfg-h{
  font-size:11px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--muted); margin:0;
}

/* ---- colour swatches (host sets --paint from the chosen hex) ---- */
.cfg-swatches{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px }
.swatch{
  width:34px; height:34px; border-radius:50%; padding:0;
  border:2px solid #fff;
  box-shadow:0 0 0 1px var(--line), 0 2px 6px rgba(12,27,51,.18);
  cursor:pointer; transition:transform .12s, box-shadow .15s;
  flex:none; -webkit-appearance:none; appearance:none;
}
.swatch:hover{ transform:scale(1.08) }
.swatch:active{ transform:scale(.96) }
.swatch.active{
  box-shadow:0 0 0 2px var(--red), 0 2px 8px rgba(12,27,51,.28);
}
.swatch:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--red), 0 2px 8px rgba(12,27,51,.28);
}
/* selected colour's friendly name (e.g. "Sizzling Red") */
.cfg-colorname{ margin-top:8px; font-weight:600; color:var(--ink); font-size:13.5px }

/* ---- variant / trim-ladder chips (Sigma·Delta·Zeta·Alpha, LXi…) ---- */
.cfg-variants{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.vchip{
  padding:8px 14px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--surface);
  font-weight:600; font-size:13px; color:var(--ink-2);
  cursor:pointer; transition:background .15s, color .15s, border-color .15s, transform .08s;
}
.vchip:hover{ border-color:var(--red); color:var(--ink) }
.vchip:active{ transform:scale(.97) }
.vchip.active{ background:var(--red); color:#fff; border-color:var(--red) }
.vchip:focus-visible{ outline:none; border-color:var(--red); box-shadow:0 0 0 2px var(--red-soft) }

/* ---- spec grid: 2-col tiles (engine, power, torque, mileage…) ---- */
.cfg-specs{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:10px; margin-top:10px;
}
.spec{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:10px 12px;
  box-shadow:var(--shadow-sm);
}
.spec span{
  display:block; font-size:11px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.4px;
}
.spec b{
  font-family:var(--ff-display); font-size:15px; color:var(--ink);
  display:block; margin-top:2px; line-height:1.2;
}

/* ---- indicative "price from" line (the * + parent note flag it) ---- */
.cfg-price{
  font-family:var(--ff-display); font-size:22px; color:var(--ink);
  line-height:1.1;
}
.cfg-price small{ font-size:11px; color:var(--muted); font-weight:600 }

/* ---- responsive ---------------------------------------------------- */
/* phones: relax the spec grid spacing and let the stage breathe */
@media (max-width:600px){
  .cfg-stage{ aspect-ratio:16/11 }
  .cfg-specs{ gap:8px }
  .spec{ padding:9px 11px }
  .cfg-price{ font-size:20px }
}
/* very narrow: avoid cramped 2-up spec tiles */
@media (max-width:360px){
  .cfg-specs{ grid-template-columns:1fr }
}

/* ---- v0.8 — elegant single transparent-cutout photo viewer ---- */
/* studio backdrop: soft spotlight from top so a no-background cutout floats cleanly */
.cfg-stage{ background:radial-gradient(125% 100% at 50% 14%, #FFFFFF 0%, #EDF2FB 52%, #DDE7F6 100%) }
.cfg-stage img.cfg-photo{
  position:relative; z-index:1; width:100%; height:100%;
  object-fit:contain; padding:7% 9% 9%;
  /* soft shadow that follows the car's silhouette (transparent PNG) */
  filter:drop-shadow(0 18px 20px rgba(11,27,51,.22));
}
.cfg-fallback{ position:absolute; inset:0; display:grid; place-items:center }
.cfg-fallback svg{ width:100%; height:100% }
.cfg-cap{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:2;
  font-size:10px; font-weight:600; letter-spacing:.3px; color:var(--muted);
  background:rgba(255,255,255,.85); border:1px solid var(--line);
  padding:3px 9px; border-radius:999px; pointer-events:none;
}

/* v1.0.2 — install pop-up iOS instructions */
.install-ios{ text-align:center; font-size:13.5px; color:var(--ink-2); line-height:1.6;
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:0 }

/* v1.0.0 — DPDP delete-account danger zone */
.section.danger .h2{ color:#C1272D }
.btn.danger{ background:#C1272D; color:#fff; border-color:#C1272D }
.btn.danger:hover{ filter:brightness(1.06) }
.btn.danger:focus-visible{ outline:2px solid #C1272D; outline-offset:2px }