/* ============================================================
   IQOS CLUB — design tokens (FIP UI Kit, copied 1:1) + app chrome
   ============================================================ */
@font-face { font-family:'Inter'; font-weight:400; font-style:normal; font-display:swap; src:url('../vendor/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:500; font-style:normal; font-display:swap; src:url('../vendor/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:600; font-style:normal; font-display:swap; src:url('../vendor/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:700; font-style:normal; font-display:swap; src:url('../vendor/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:800; font-style:normal; font-display:swap; src:url('../vendor/fonts/inter-800.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:400; font-style:normal; font-display:swap; src:url('../vendor/fonts/jbmono-400.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:500; font-style:normal; font-display:swap; src:url('../vendor/fonts/jbmono-500.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:700; font-style:normal; font-display:swap; src:url('../vendor/fonts/jbmono-700.woff2') format('woff2'); }

:root {
  /* Brand */
  --charcoal:      #34303D;
  --charcoal-deep: #1f1c26;
  --charcoal-80:   #3D3947;
  --turquoise:     #00D1D2;
  --turquoise-deep:#0a8b8c;
  --veev:          #4B2882;
  /* Surfaces & neutrals */
  --cream:         #F6F4EF;
  --cream-deep:    #ECE7DC;
  --bg:            #FBFAF7;
  --soft-gray:     #E6E6E6;
  --body-gray:     #6E6B79;
  --pure-black:    #1A1A1A;
  --white:         #FFFFFF;
  /* Semantic */
  --success:       #2D9469;
  --warning:       #E89F3C;
  --danger:        #C8324C;
  --silent:        #9E9BA7;
  /* Radii */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:9999px;
  /* Elevation */
  --shadow-card:    0 1px 2px rgba(52,48,61,0.04);
  --shadow-pop:     0 8px 24px rgba(52,48,61,0.12);
  --shadow-tooltip: 0 12px 28px rgba(52,48,61,0.22);
  --sidebar-w: 232px;
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; font-family:'Inter','Helvetica Neue',system-ui,sans-serif;
  color:var(--pure-black); background:var(--bg);
  -webkit-font-smoothing:antialiased; font-size:13px;
}
.mono { font-family:'JetBrains Mono',ui-monospace,monospace; }
.tnum { font-variant-numeric:tabular-nums; }
button { font-family:inherit; cursor:pointer; border:none; background:none; padding:0; color:inherit; }
input, select, textarea { font-family:inherit; font-size:13px; color:var(--pure-black); }
a { color:inherit; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:var(--soft-gray); border-radius:8px; }
.dark ::-webkit-scrollbar-thumb { background:#4a4656; }

/* official IQOS mark inside logo badges */
.iqos-mark { display:flex; align-items:center; justify-content:center; width:64%; height:64%; }
.iqos-mark svg { display:block; }

/* ---- kit helpers ---- */
.eyebrow { font-size:10px; text-transform:uppercase; letter-spacing:0.22em; font-weight:700; }
.focus-ring:focus { outline:none; box-shadow:0 0 0 3px rgba(0,209,210,0.25); border-color:var(--turquoise) !important; }
.link-charcoal { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; cursor:pointer; color:var(--charcoal); font-weight:600; }
.link-charcoal:hover { color:var(--charcoal-deep); }
.btn-charcoal { transition:transform .15s ease, background-color .2s ease; background:var(--charcoal); color:#fff; border-radius:var(--r-pill); height:40px; padding:0 20px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:8px; justify-content:center; }
.btn-charcoal:hover { background-color:var(--charcoal-deep); }
.btn-charcoal:active { transform:translateY(1px); }
.btn-charcoal:disabled { background:#5a5664; cursor:not-allowed; }
.btn-outline { background:#fff; border:1px solid var(--soft-gray); color:var(--charcoal); border-radius:var(--r-pill); height:40px; padding:0 16px; font-size:13px; font-weight:500; display:inline-flex; align-items:center; gap:8px; justify-content:center; transition:border-color .15s; }
.btn-outline:hover { border-color:var(--charcoal); }
.btn-outline.sm, .btn-charcoal.sm { height:32px; padding:0 14px; font-size:12px; }
.btn-tq { background:var(--turquoise); color:var(--charcoal); border-radius:var(--r-pill); height:40px; padding:0 20px; font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:8px; justify-content:center; transition:filter .15s; }
.btn-tq:hover { filter:brightness(1.06); }
.btn-ghost-dark { background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.12); border-radius:var(--r-pill); height:36px; padding:0 16px; font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:7px; }
.btn-ghost-dark:hover { background:rgba(255,255,255,0.14); }

.panel { background:#fff; border:1px solid var(--soft-gray); border-radius:16px; }
.card { background:#fff; border-radius:16px; border:1px solid var(--cream-deep); box-shadow:var(--shadow-card); }
.cream-panel { background:var(--cream); border:1px solid var(--cream-deep); border-radius:16px; }

.pill { display:inline-flex; align-items:center; gap:5px; border-radius:9999px; text-transform:uppercase; letter-spacing:0.18em; font-weight:700; padding:0 10px; height:22px; font-size:10px; white-space:nowrap; }
.pill.sm { height:19px; font-size:9.5px; padding:0 8px; }
.pill-cream    { background:var(--cream); color:var(--charcoal); border:1px solid var(--cream-deep); }
.pill-charcoal { background:var(--charcoal); color:#fff; border:1px solid var(--charcoal); }
.pill-white    { background:#fff; color:var(--charcoal); border:1px solid var(--soft-gray); }
.pill-danger   { background:rgba(200,50,76,0.12); color:var(--danger); border:1px solid rgba(200,50,76,0.25); }
.pill-warning  { background:rgba(232,159,60,0.18); color:#A06A14; border:1px solid rgba(232,159,60,0.35); }
.pill-success  { background:rgba(45,148,105,0.14); color:var(--success); border:1px solid rgba(45,148,105,0.28); }
.pill-tq       { background:rgba(0,209,210,0.14); color:var(--turquoise-deep); border:1px solid rgba(0,209,210,0.32); }
.pill-gray     { background:rgba(110,107,121,0.12); color:var(--body-gray); border:1px solid rgba(110,107,121,0.22); }
.pill-gold     { background:rgba(232,159,60,0.16); color:#8a5a10; border:1px solid rgba(232,159,60,0.4); }
.pill-veev     { background:rgba(75,40,130,0.1); color:var(--veev); border:1px solid rgba(75,40,130,0.25); }

.dot { display:inline-block; height:9px; width:9px; border-radius:50%; flex:none; }

.avatar { border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; height:36px; width:36px; font-size:13px; background:var(--turquoise); color:var(--charcoal); flex:none; }
.avatar.cream { background:var(--cream); }
.avatar.dark  { background:var(--charcoal); color:var(--turquoise); }
.avatar.lg { height:52px; width:52px; font-size:17px; }

.input { width:100%; height:40px; border-radius:12px; border:1px solid var(--soft-gray); background:#fff; padding:0 13px; font-size:13px; }
.input.lg { height:52px; font-size:15px; padding:0 16px; }
textarea.input { height:auto; padding:10px 13px; resize:vertical; }
select.input { appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6B79' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
label.lbl { display:block; font-size:12px; font-weight:500; color:var(--charcoal); margin-bottom:7px; }

.check-tq { position:relative; appearance:none; height:18px; width:18px; border-radius:5px; cursor:pointer; border:1.5px solid var(--soft-gray); background:#fff; flex:none; }
.check-tq:checked { border-color:var(--turquoise); background:var(--turquoise); }
.check-tq:checked::after { content:''; position:absolute; left:5px; top:1px; width:5px; height:10px; border:solid var(--charcoal); border-width:0 2px 2px 0; transform:rotate(45deg); }

.switch { position:relative; width:38px; height:22px; border-radius:11px; background:var(--soft-gray); transition:background .15s; flex:none; }
.switch::after { content:''; position:absolute; top:2px; left:2px; height:18px; width:18px; border-radius:50%; background:#fff; transition:left .15s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.switch.on { background:var(--turquoise); }
.switch.on::after { left:18px; }

.seg { display:inline-flex; padding:4px; border-radius:9999px; background:var(--cream); border:1px solid var(--cream-deep); }
.seg button { padding:0 14px; height:28px; border-radius:9999px; font-size:11.5px; font-weight:600; color:var(--body-gray); }
.seg button.on { background:var(--charcoal); color:#fff; }

.filter-pill { height:32px; padding:0 14px; border-radius:9999px; font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--soft-gray); color:var(--charcoal); }
.filter-pill.on { background:var(--charcoal); border-color:var(--charcoal); color:#fff; }
.filter-pill .cnt { font-size:10.5px; font-variant-numeric:tabular-nums; padding:2px 6px; border-radius:9999px; background:var(--cream); color:var(--body-gray); }
.filter-pill.on .cnt { background:rgba(255,255,255,0.18); color:#fff; }

.hero-glow {
  background:
    radial-gradient(60% 50% at 70% 35%, rgba(0,209,210,0.55) 0%, rgba(0,209,210,0.18) 35%, rgba(52,48,61,0) 65%),
    radial-gradient(80% 70% at 30% 80%, rgba(75,40,130,0.25) 0%, rgba(52,48,61,0) 60%),
    linear-gradient(160deg, #2A2632 0%, #34303D 55%, #1f1c26 100%);
}

/* ---- app shell ---- */
#app { height:100%; }
.admin-shell { display:flex; height:100vh; overflow:hidden; }
.sidebar { width:var(--sidebar-w); flex:none; background:var(--charcoal); display:flex; flex-direction:column; color:#fff; }
.sidebar .logo { display:flex; align-items:center; gap:10px; padding:18px 16px 14px; }
.sidebar .logo-badge { height:32px; width:32px; border-radius:8px; background:var(--turquoise); display:flex; align-items:center; justify-content:center; color:var(--charcoal); font-weight:800; font-size:13px; letter-spacing:-0.02em; }
.sidebar nav { flex:1; overflow-y:auto; padding:4px 10px 10px; }
.nav-group { padding:14px 10px 6px; color:rgba(255,255,255,0.35); }
.nav-item { position:relative; width:100%; display:flex; align-items:center; gap:11px; padding:9px 10px 9px 12px; border-radius:8px; text-align:left; font-size:13px; color:rgba(255,255,255,0.78); font-weight:500; letter-spacing:-0.01em; margin-bottom:2px; text-decoration:none; }
.nav-item svg { color:rgba(255,255,255,0.7); flex:none; }
.nav-item:hover { background:rgba(255,255,255,0.06); color:#fff; }
.nav-item.active { background:var(--charcoal-80); color:#fff; }
.nav-item.active::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0; background:var(--turquoise); }
.nav-item.active svg { color:var(--turquoise); }
.nav-badge { font-size:10px; font-weight:600; border-radius:9999px; padding:2px 6px; min-width:20px; text-align:center; background:rgba(200,50,76,0.18); color:#FF8B9F; }
.sidebar .profile { border-top:1px solid rgba(255,255,255,0.08); padding:12px 14px; display:flex; align-items:center; gap:10px; }

.main-col { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { height:60px; flex:none; background:rgba(255,255,255,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--soft-gray); display:flex; align-items:center; gap:12px; padding:0 22px; z-index:30; }
.page { flex:1; overflow-y:auto; padding:24px 26px 60px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
h1.page-title { font-size:26px; font-weight:700; letter-spacing:-0.02em; color:var(--charcoal); margin:0; }
.page-sub { font-size:12.5px; color:var(--body-gray); margin-top:4px; }
h2.sec { font-size:18px; font-weight:700; letter-spacing:-0.02em; color:var(--charcoal); margin:0 0 12px; }

/* KPI */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.kpi { background:#fff; border-radius:16px; padding:16px 18px; border:1px solid var(--cream-deep); box-shadow:var(--shadow-card); min-width:0; overflow:hidden; }
.kpi .k-label { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.kpi .k-val { font-size:30px; line-height:1; font-weight:700; letter-spacing:-0.02em; color:var(--charcoal); }
.kpi .k-sub { font-size:11.5px; color:var(--body-gray); margin-top:5px; }
.kpi .k-delta { margin-top:9px; display:flex; align-items:center; gap:5px; font-size:11px; font-weight:500; }

/* table */
.dtable { width:100%; border-collapse:collapse; font-size:13px; }
.dtable thead th { font-size:10px; text-transform:uppercase; letter-spacing:0.18em; font-weight:700; color:var(--body-gray); text-align:left; padding:12px 12px; white-space:nowrap; }
.dtable thead th.r, .dtable td.r { text-align:right; }
.dtable tbody tr:nth-child(even) { background:var(--cream); }
.dtable tbody td { padding:11px 12px; vertical-align:middle; }
.dtable tbody tr.clickable { cursor:pointer; }
.dtable tbody tr.clickable:hover { background:rgba(0,209,210,0.07); }
.dtable .cell-main { font-weight:600; letter-spacing:-0.01em; color:var(--charcoal); }
.dtable .cell-sub { font-size:11px; color:var(--body-gray); margin-top:1px; }
th.sortable { cursor:pointer; user-select:none; }
th.sortable:hover { color:var(--charcoal); }

/* drawer / modal / toast */
.overlay { position:fixed; inset:0; background:rgba(31,28,38,0.45); z-index:1100; display:flex; }
.drawer { margin-left:auto; width:560px; max-width:94vw; background:var(--bg); height:100%; overflow-y:auto; box-shadow:var(--shadow-tooltip); animation:slideIn .22s ease; }
@keyframes slideIn { from { transform:translateX(40px); opacity:0; } to { transform:none; opacity:1; } }
.modal { margin:auto; background:#fff; border-radius:16px; box-shadow:var(--shadow-tooltip); width:520px; max-width:94vw; max-height:90vh; overflow-y:auto; animation:popIn .18s ease; }
@keyframes popIn { from { transform:scale(.97); opacity:0; } to { transform:none; opacity:1; } }
#toasts { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:1500; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast { background:var(--charcoal); color:#fff; border-radius:12px; padding:11px 18px; font-size:13px; font-weight:500; box-shadow:var(--shadow-pop); display:flex; align-items:center; gap:9px; animation:popIn .18s ease; }
.toast .dot { background:var(--turquoise); }

/* live feed */
.feed-item { display:flex; gap:10px; padding:10px 2px; border-bottom:1px solid #F1EDE3; align-items:flex-start; }
.feed-item:last-child { border-bottom:none; }
.feed-item.fresh { animation:feedIn .5s ease; }
@keyframes feedIn { from { background:rgba(0,209,210,0.18); } to { background:transparent; } }

/* funnel */
.funnel-stage { cursor:pointer; }
.funnel-stage:hover .fs-bar { filter:brightness(1.1); }

/* phone frame */
.phone { width:390px; background:#000; border-radius:54px; padding:14px; box-shadow:var(--shadow-pop), 0 0 0 2px #2a2a2e; position:relative; flex:none; }
.phone .screen { border-radius:40px; overflow:hidden; position:relative; height:740px; background:#111; }
.phone .notch { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:34px; background:#000; border-radius:20px; z-index:50; }
.phone.small { width:320px; padding:11px; border-radius:46px; }
.phone.small .screen { height:600px; border-radius:36px; }
.phone.small .notch { width:100px; height:28px; top:11px; }

/* wallet pass — premium animated faces */
.wpass { border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.35); font-family:'Inter',sans-serif; position:relative; transition:transform .3s; }
.wpass.updating { animation:passPulse .8s ease; }
@keyframes passPulse { 0%{transform:scale(1)} 30%{transform:scale(1.03)} 100%{transform:scale(1)} }

/* living gradient background (tier skins set their own gradient stops) */
.wpass.animated { background-size:250% 250% !important; animation:passDrift 9s ease-in-out infinite; }
@keyframes passDrift { 0%{background-position:0% 30%} 50%{background-position:100% 70%} 100%{background-position:0% 30%} }
/* holographic sheen sweeping across the card */
.wpass.animated::after {
  content:''; position:absolute; inset:-40% -60%; pointer-events:none; z-index:2;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.16) 44%, rgba(255,255,255,0.34) 50%, rgba(255,255,255,0.16) 56%, transparent 68%);
  transform:translateX(-70%) rotate(0.001deg);
  animation:passSheen 4.6s cubic-bezier(.5,.1,.4,.9) infinite;
}
@keyframes passSheen { 0%{transform:translateX(-70%)} 55%{transform:translateX(70%)} 100%{transform:translateX(70%)} }
/* soft moving glow accents per tier */
.wpass .tier-glow { position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.9; animation:glowShift 7s ease-in-out infinite alternate; }
.wpass.animated > *:not(.tier-glow) { position:relative; z-index:3; }
@keyframes glowShift { from{transform:translate3d(-4%, -3%, 0) scale(1)} to{transform:translate3d(4%, 3%, 0) scale(1.08)} }

/* misc */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.row { display:flex; align-items:center; gap:10px; }
.spread { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.muted { color:var(--body-gray); }
.hr { border:none; border-top:1px solid var(--soft-gray); margin:14px 0; }
.progress { height:6px; border-radius:3px; background:var(--cream); overflow:hidden; }
.progress > div { height:100%; border-radius:3px; background:var(--turquoise); transition:width .4s; }

.chart-tip { position:fixed; z-index:1400; background:var(--charcoal); color:#fff; border-radius:10px; padding:8px 12px; font-size:11.5px; box-shadow:var(--shadow-tooltip); pointer-events:none; line-height:1.5; }

/* leaflet fixups */
.leaflet-container { font-family:'Inter',sans-serif; background:#E8EEF2; border-radius:16px; z-index:0; isolation:isolate; }
.leaflet-control-attribution { display:none !important; }
.iqc-cluster { background:rgba(52,48,61,0.85); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; border:2px solid rgba(255,255,255,0.85); box-shadow:0 2px 8px rgba(0,0,0,0.25); font-variant-numeric:tabular-nums; }
.iqc-marker { border-radius:50%; border:2px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,0.3); }

/* ---- Siri-style assistant orb (bottom right) ---- */
.ai-fab {
  position:fixed; right:22px; bottom:22px; z-index:840;
  height:58px; width:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; cursor:pointer; border:none; padding:0;
  isolation:isolate; transform:translateZ(0);
  -webkit-mask-image:radial-gradient(circle, #fff 100%, #fff 100%);
  box-shadow:0 10px 30px rgba(0,209,210,0.35), 0 4px 16px rgba(75,40,130,0.35);
  animation:fabBreath 3.4s ease-in-out infinite;
  transition:transform .18s ease;
}
.ai-fab:hover { transform:translateZ(0) scale(1.08); }
.ai-fab:active { transform:translateZ(0) scale(0.96); }
.ai-fab::before {
  content:''; position:absolute; inset:-45%; border-radius:50%;
  background:conic-gradient(from 0deg, #00E5E6, #4B2882 28%, #0088FF 52%, #00D1D2 70%, #7B5CC6 86%, #00E5E6);
  animation:fabSpin 4.5s linear infinite;
  filter:blur(9px) saturate(1.25);
}
.ai-fab::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 32% 26%, rgba(255,255,255,0.5), rgba(255,255,255,0) 42%);
  mix-blend-mode:screen;
}
.ai-fab-icon { position:relative; z-index:2; color:#fff; display:flex; filter:drop-shadow(0 1px 5px rgba(0,0,0,0.35)); }
@keyframes fabSpin { to { transform:rotate(360deg); } }
@keyframes fabBreath {
  0%,100% { box-shadow:0 10px 30px rgba(0,209,210,0.35), 0 4px 16px rgba(75,40,130,0.35); }
  50% { box-shadow:0 12px 40px rgba(0,209,210,0.55), 0 6px 22px rgba(75,40,130,0.45); }
}

/* dark full-bleed pages (command center / tv) */
.dark-page { background:var(--charcoal-deep); color:#fff; min-height:100vh; }

/* scrollable table wrapper */
.tbl-wrap { overflow-x:auto; }

@media (max-width:1200px){ .kpi-grid{grid-template-columns:repeat(2,1fr);} .grid4{grid-template-columns:repeat(2,1fr);} .grid3{grid-template-columns:1fr 1fr;} }

/* ============================================================
   Mobile (≤900px): off-canvas sidebar, stacked grids, scrollable
   tables, full-width drawers. Desktop 1440 stays the primary target.
   ============================================================ */
.menu-btn { display:none; }
.sidebar-scrim { position:fixed; inset:0; background:rgba(31,28,38,0.55); z-index:890; }
@media (max-width:900px) {
  /* the page NEVER pans sideways — app-like behaviour; only tables
     scroll horizontally, inside themselves */
  html, body { overflow-x:hidden; overscroll-behavior-x:none; }
  .page { overflow-x:hidden; touch-action:pan-y; overscroll-behavior-x:none; }
  .dtable, .tbl-wrap, .topbar { touch-action:pan-x pan-y; }
  /* no visible scrollbar chrome on mobile — it read as a broken layout */
  .topbar::-webkit-scrollbar, .dtable::-webkit-scrollbar, .tbl-wrap::-webkit-scrollbar { display:none; }
  .topbar, .dtable, .tbl-wrap { scrollbar-width:none; }

  /* shell */
  .sidebar { position:fixed; top:0; bottom:0; left:0; z-index:900; width:264px; transform:translateX(-104%); transition:transform .25s ease; box-shadow:var(--shadow-tooltip); }
  .sidebar.open { transform:none; }
  .menu-btn { display:inline-flex; flex:none; }
  .topbar { padding:0 12px; gap:7px; overflow-x:auto; }
  .topbar .iata-inp { display:none; }
  .topbar select.input { width:auto !important; min-width:0; }
  .topbar .btn-outline { white-space:nowrap; }
  .page { padding:16px 14px 80px; }
  .page-head { margin-bottom:14px; }
  h1.page-title { font-size:22px; }

  /* layout collapse: every inline-grid layout stacks to one column;
     minmax(0,1fr) + min-width:0 keep wide tables from inflating tracks */
  div[style*="grid-template-columns"] { grid-template-columns:minmax(0,1fr) !important; }
  .grid2, .grid3, .grid4 { grid-template-columns:minmax(0,1fr) !important; }
  .kpi-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; }
  div[style*="grid-template-columns"] > *, .grid2 > *, .grid3 > *, .grid4 > * { min-width:0; max-width:100%; }

  /* flex rows wrap instead of pushing the page wider; stretchy
     children (flex:1 panels next to donuts/phones) drop to a full-
     width row of their own instead of squeezing into a sliver */
  .page .row, .page .spread, .drawer .row, .drawer .spread { flex-wrap:wrap; }
  .page .card .row > [style*="flex: 1"], .drawer .card .row > [style*="flex: 1"] { min-width:230px; }

  /* funnel becomes a vertical list of full-width bars */
  .funnel-row { flex-direction:column; gap:16px; }
  .funnel-row .funnel-stage { width:100%; }

  /* tables scroll horizontally instead of squeezing */
  .dtable { display:block; overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
  .dtable thead, .dtable tbody { display:table; width:100%; min-width:560px; }

  /* overlays go full-bleed */
  .drawer { width:100vw !important; }
  .modal { width:94vw !important; }

  /* login hero */
  .login-split { flex-direction:column; }
  .login-hero { min-height:44vh; padding:28px 26px !important; }
  .login-hero h1 { font-size:31px !important; }
  .login-form-pane { padding:28px 20px 48px !important; }

  /* full-bleed screens (globe, journey) match the mobile page padding */
  .page > div[style*="margin: -24px"] { margin:-16px -14px -80px !important; }

  /* command center */
  .cc-head { flex-wrap:wrap; gap:12px; }
  .cc-kpis { flex-wrap:wrap; gap:14px !important; justify-content:flex-end; }
  .cc-kpis > div > div:first-child { font-size:16px !important; }
  .cc-body { flex-direction:column; overflow-y:auto; }
  .cc-globe { min-height:330px; flex:none !important; height:340px; }
  .cc-rail { width:auto !important; padding:0 14px 22px !important; }

  /* journey simulator */
  .journey-visual { display:none !important; }
  .journey-card { width:auto !important; left:12px !important; right:12px !important; top:14px !important; }
  .journey-controls { width:calc(100vw - 24px) !important; }

  /* misc */
  .phone { transform:scale(.88); transform-origin:top center; }
  .funnel-stage .fs-bar + div { white-space:nowrap; }
}
@media (max-width:520px) {
  .kpi-grid { grid-template-columns:1fr !important; }
  .kpi .k-val { font-size:25px; }
  h1.page-title { font-size:20px; }
}