/* Dushanbe Mall sales site — shared layout. Each design (cinema / gallery / blueprint / boutique) sets the tokens below
   and restyles what it needs; the structure and the step-by-step flow stay the same. */
@font-face { font-family: Montserrat; src: url("../fonts/Montserrat-500.ttf"); font-weight: 500; font-display: swap; }
@font-face { font-family: Montserrat; src: url("../fonts/Montserrat-600.ttf"); font-weight: 600; font-display: swap; }
@font-face { font-family: Montserrat; src: url("../fonts/Montserrat-700.ttf"); font-weight: 700; font-display: swap; }
@font-face { font-family: Inter; src: url("../fonts/Inter-400.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url("../fonts/Inter-500.ttf"); font-weight: 500; font-display: swap; }
@font-face { font-family: Inter; src: url("../fonts/Inter-600.ttf"); font-weight: 600; font-display: swap; }
@font-face { font-family: Cormorant; src: url("../fonts/Cormorant-500.ttf"); font-weight: 500; font-display: swap; }
@font-face { font-family: Cormorant; src: url("../fonts/Cormorant-600.ttf"); font-weight: 600; font-display: swap; }
@font-face { font-family: Cormorant; src: url("../fonts/Cormorant-Italic-400.ttf"); font-style: italic; font-weight: 400; font-display: swap; }

:root {
  --bg: #111213; --ink: #F3F3F1; --muted: #A7ABB0; --line: rgba(255,255,255,.16); --panel: #17181A; --panel-ink: #F3F3F1;
  --accent: #00B4C4; --accent-ink: #062B2F; --display: Montserrat, Inter, system-ui, sans-serif; --text: Inter, system-ui, sans-serif;
  --veil: linear-gradient(90deg, rgba(10,11,12,.78), rgba(10,11,12,.25) 60%, rgba(10,11,12,.5));
  --plan-bg: #131416; --outline: #1E2023; --outline-stroke: #3A3D41; --ctx: #1A1C1F; --ctx-void: #15171A;
  --unit-stroke: #2B2E32; --g-shop: #2A3036; --g-anchor: #3A4450; --g-food: #23474B; --g-leisure: #3F3A4B;
  --hot: #00B4C4; --lbl: #E6E8EA; --esc: #5A5F66; --gutter: clamp(16px, 4vw, 56px); --radius: 0px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--text); overflow: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* background video — plays on the intro and mall steps, dims behind the plan */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #000; }
#bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .8s var(--ease), transform 1.6s var(--ease), opacity .8s; }
.veil { position: absolute; inset: 0; background: var(--veil); transition: opacity .8s; }
#level-photo { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; transition: opacity .6s, background-image .6s; }
body.video-dim #bg-video { filter: blur(14px) brightness(.35) saturate(.8); transform: scale(1.06); }
body[data-screen="level"] .bg { opacity: 0; transition: opacity .6s; }
@media (prefers-reduced-motion: reduce) { #bg-video { display: none; } .bg { background: center/cover url("media/intro/walk.jpg"); } }

/* header with the three steps */
.top { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 24px;
  padding: 18px var(--gutter); pointer-events: none; }
.top > * { pointer-events: auto; }
.logo img { display: block; height: 34px; width: auto; }
.logo .on-light { display: none; }
.steps { display: flex; gap: 6px; list-style: none; margin: 0 auto; padding: 0; font: 600 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.steps li { display: flex; align-items: center; gap: 6px; color: var(--muted); opacity: .7; transition: color .3s, opacity .3s; }
.steps li + li::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .5; }
.steps li.is-done { color: var(--ink); opacity: 1; }
.steps a, .steps span { text-decoration: none; padding: 8px 2px; }
.contact-top { font: 600 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: 10px 0; }
body[data-screen="intro"] .steps { visibility: hidden; }

/* screens: only one is on; the next slides in */
main { position: relative; z-index: 10; height: 100%; }
.screen { position: absolute; inset: 0; padding: 96px var(--gutter) 40px; opacity: 0; visibility: hidden; transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .9s var(--ease), visibility 0s .7s; }
.screen.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ease), transform .9s var(--ease), visibility 0s; }
.kick { margin: 0 0 14px; font: 600 12px/1.3 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
h1, h2, h3 { font-family: var(--display); margin: 0; }
.lead { font-size: clamp(16px, 1.4vw, 20px); color: var(--muted); max-width: 46ch; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 12px 22px; border: 1px solid var(--line);
  background: transparent; border-radius: var(--radius); font: 600 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.big { min-height: 56px; padding: 18px 30px; font-size: 13px; }
.btn.ghost { border-color: transparent; padding-left: 0; padding-right: 0; }
.btn.ghost:hover { border-color: transparent; color: var(--accent); }

/* step 0 — intro */
.s-intro { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(48px, 12vh, 140px); }
.s-intro h1 { font-size: clamp(48px, 9.5vw, 150px); line-height: .92; letter-spacing: -.01em; font-weight: 600; text-transform: uppercase; }
.s-intro h1 em { font-style: normal; color: var(--accent); }
.s-intro .lead { margin: 22px 0 34px; }
/* over the video the lead must read on bright frames too */
.s-intro .lead, .s-mall .lead, .fig span, .src { color: var(--ink); opacity: .88; text-shadow: 0 1px 16px rgba(0,0,0,.55); }
.s-intro .btn { align-self: flex-start; }

/* step 1 — the mall */
.s-mall { display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; gap: 40px; padding-bottom: clamp(36px, 8vh, 90px); }
.s-mall h2 { font-size: clamp(28px, 3.4vw, 54px); line-height: 1.06; max-width: 20ch; font-weight: 600; }
.s-mall .lead { margin-top: 18px; }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.fig { padding: 22px 20px 0 0; }
.fig + .fig { padding-left: 20px; border-left: 1px solid var(--line); }
.fig b { display: block; font: 600 clamp(30px, 3.6vw, 56px)/1 var(--display); font-variant-numeric: tabular-nums; }
.fig span { display: block; margin-top: 10px; color: var(--muted); font-size: 14px; }
.mall-go { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.src { margin: 0; font-size: 12px; color: var(--muted); }

/* step 2 — choose a level */
.s-levels { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr); grid-template-rows: auto 1fr auto; gap: 20px 48px; }
.levels-head { grid-column: 1 / -1; }
.levels-head h2 { font-size: clamp(30px, 3.8vw, 56px); font-weight: 600; }
.level-picker { min-height: 0; display: flex; align-items: center; justify-content: center; }
.level-info { align-self: center; border-top: 1px solid var(--line); padding-top: 22px; }
.level-info h3 { font-size: clamp(26px, 2.6vw, 40px); font-weight: 600; margin-bottom: 18px; }
.level-info dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0 0 18px; }
.level-info dt { color: var(--muted); } .level-info dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.level-info .mix { color: var(--muted); font-size: 14px; margin: 0; }
.back { grid-column: 1 / -1; justify-self: start; }
.lv { cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
.mini-outline .o { fill: rgba(255,255,255,.06); stroke: currentColor; stroke-width: .8; vector-effect: non-scaling-stroke; }
.mini-outline .u { fill: currentColor; opacity: .28; stroke: none; }

/* picker: isometric stack */
.stack { position: relative; width: min(100%, 760px); height: min(64vh, 600px); }
.slab { position: absolute; left: 0; right: 0; top: calc(var(--i) * 17%); height: 30%; display: flex; align-items: center; color: var(--muted);
  transition: color .3s, transform .45s var(--ease); z-index: calc(10 - var(--i)); }
.plate { display: block; width: 50%; margin-left: 8%; transform: perspective(1400px) rotateX(64deg) rotateZ(-32deg); transform-origin: 50% 50%;
  transition: transform .45s var(--ease), filter .3s; }
.plate svg { display: block; width: 100%; height: auto; overflow: visible; }
.slab .tag { margin-left: auto; display: grid; gap: 4px; text-align: right; font: 500 13px/1.2 var(--text); color: var(--muted); }
.slab .tag b { font: 600 28px/1 var(--display); color: var(--ink); letter-spacing: .02em; }
.slab:hover, .slab:focus-visible, .slab.is-hot { color: var(--accent); }
.slab:hover .plate, .slab:focus-visible .plate, .slab.is-hot .plate { transform: perspective(1400px) rotateX(64deg) rotateZ(-32deg) translateZ(30px); }
.slab:hover .tag b, .slab.is-hot .tag b { color: var(--accent); }

/* picker: photo cards */
.cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; width: 100%; height: 100%; max-height: 64vh; }
.card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; overflow: hidden; min-height: 240px; color: #fff; isolation: isolate; }
.card .ph { position: absolute; inset: 0; z-index: -1; background: center/cover; transition: transform 1s var(--ease), filter .5s; filter: saturate(.85) brightness(.72); }
.card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 40%, rgba(0,0,0,.65)); }
.card:hover .ph, .card.is-hot .ph { transform: scale(1.06); filter: saturate(1) brightness(.85); }
.c-lv { font: 600 44px/1 var(--display); } .c-name { margin-top: 6px; font-weight: 600; } .c-meta { margin-top: 6px; font-size: 13px; opacity: .85; }

/* picker: building section */
.section { width: min(100%, 720px); display: flex; flex-direction: column; }
.roof { height: 22px; border-bottom: 2px solid currentColor; position: relative; color: var(--muted); }
.roof span, .s-elev { position: absolute; left: 0; font: 500 12px/1 ui-monospace, "SF Mono", Menlo, monospace; }
.roof span { bottom: 4px; }
.band { position: relative; display: grid; grid-template-columns: 110px 70px 1fr auto; align-items: center; gap: 12px; height: calc(var(--h) * 1.45vh + 10px);
  min-height: 34px; border-bottom: 1px solid var(--line); padding: 0 16px 0 0; width: 100%; color: inherit; }
.band .s-elev { position: static; color: var(--muted); }
.band .s-lv { font: 600 20px/1 var(--display); } .band .s-meta { color: var(--muted); font-size: 13px; text-align: right; }
.band.park { opacity: .45; height: calc(var(--h) * 1.45vh); }
button.band:hover, button.band:focus-visible, button.band.is-hot { background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* picker: list with large numerals */
.list { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 820px; }
.list li + li { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 140px 1fr auto 40px; align-items: center; gap: 18px; width: 100%; padding: 14px 0; color: inherit; }
.l-num { font: 500 clamp(44px, 5.4vw, 78px)/1 var(--display); transition: color .3s, transform .4s var(--ease); }
.l-name { font-size: 18px; } .l-meta { color: var(--muted); font-size: 13px; text-align: right; }
.l-go { font-size: 22px; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s; }
.row:hover .l-num, .row.is-hot .l-num { color: var(--accent); transform: translateX(8px); }
.row:hover .l-go, .row.is-hot .l-go { opacity: 1; transform: none; }
body[data-screen="levels"] #level-photo { opacity: var(--level-photo, 0); }

/* step 3 — full-screen plan */
.s-plan { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding-top: 78px; padding-bottom: 16px; background: var(--plan-bg); }
.plan-side { display: grid; gap: 12px; min-height: 0; }
.plan-bar { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.plan-head { margin-right: auto; }
.plan-head h2 { font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; }
.plan-head h2 span { color: var(--accent); margin-right: 8px; }
.plan-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.level-tabs { display: flex; gap: 4px; }
.level-tabs button { min-width: 48px; min-height: 40px; border: 1px solid var(--line); background: none; cursor: pointer; font: 600 13px/1 var(--display); border-radius: var(--radius); }
.level-tabs button[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.plan-tools { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.search input { width: 280px; max-width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); background: transparent; border-radius: var(--radius); }
.search input::placeholder { color: var(--muted); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); background: none; cursor: pointer; font-size: 13px; border-radius: var(--radius); }
.chip i { width: 12px; height: 12px; background: var(--c); border: 1px solid var(--unit-stroke); }
.chip[aria-pressed="false"] { opacity: .45; }
.chip.g-shop { --c: var(--g-shop); } .chip.g-anchor { --c: var(--g-anchor); } .chip.g-food { --c: var(--g-food); } .chip.g-leisure { --c: var(--g-leisure); }
.plan-count { margin: 0 0 0 auto; color: var(--muted); font-size: 13px; }
.plan { position: relative; min-height: 0; overflow: hidden; cursor: grab; touch-action: none; border: 1px solid var(--line); }
.plan:active { cursor: grabbing; }
.plan-svg { display: block; width: 100%; height: 100%; }
.plan-svg .outline { fill: var(--outline); stroke: var(--outline-stroke); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.plan-svg .ctx { fill: var(--ctx); stroke: var(--unit-stroke); stroke-width: .5; vector-effect: non-scaling-stroke; }
.plan-svg .ctx.c-void { fill: var(--ctx-void); }
.plan-svg .esc, .plan-svg .lift { fill: var(--esc); }
.plan-svg .unit { stroke: var(--unit-stroke); stroke-width: .8; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .2s, opacity .3s; outline: none; }
.plan-svg .unit.g-shop { fill: var(--g-shop); } .plan-svg .unit.g-anchor { fill: var(--g-anchor); }
.plan-svg .unit.g-food { fill: var(--g-food); } .plan-svg .unit.g-leisure { fill: var(--g-leisure); }
.plan-svg .unit:hover, .plan-svg .unit:focus-visible, .plan-svg .unit.sel { fill: var(--hot); }
.plan-svg .unit.off { opacity: .16; pointer-events: none; }
.plan-svg .lbl, .plan-svg .lbl-a { fill: var(--lbl); font: 600 1px var(--display); text-anchor: middle; dominant-baseline: central; pointer-events: none; opacity: 0; transition: opacity .2s; }
.plan-svg .lbl-a { font: 500 1px var(--text); fill: var(--lbl-a, var(--lbl)); }
.plan-svg .lbl-u { fill: var(--lbl-u, var(--lbl)); font: 400 1px var(--text); text-anchor: middle; dominant-baseline: central; pointer-events: none; opacity: 0; transition: opacity .2s; }
.plan-svg .lbl.on, .plan-svg .lbl-a.on, .plan-svg .lbl-u.on { opacity: 1; }
.plan-svg .lbl.on.off, .plan-svg .lbl-a.on.off, .plan-svg .lbl-u.on.off { opacity: .18; }
.plan-svg .void-edge { fill: none; stroke: var(--outline-stroke); stroke-width: .8; vector-effect: non-scaling-stroke; }
.plan-svg .tread-bg { fill: var(--esc); } .plan-svg .tread { stroke: var(--plan-bg); stroke-width: .12; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.filters { row-gap: 8px; }
.plan-pick { display: none; }
.plan-svg .entr { fill: var(--accent); } .plan-svg .entr-t { fill: var(--muted); font: 500 1px var(--text); }
.tip { position: absolute; z-index: 20; min-width: 200px; max-width: 260px; padding: 12px 14px; background: var(--panel); color: var(--panel-ink); border: 1px solid var(--line);
  pointer-events: none; display: grid; gap: 2px; box-shadow: 0 12px 30px rgba(0,0,0,.25); border-radius: var(--radius); }
.tip[hidden], .passport[hidden], .fail[hidden] { display: none; }
.tip b { font: 600 18px/1.1 var(--display); } .tip span { color: var(--muted); font-size: 13px; } .tip em { font-style: normal; font-weight: 600; color: var(--accent); }
.zoom { position: absolute; right: calc(var(--gutter) + 12px); bottom: 30px; display: flex; align-items: center; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.zoom button { min-width: 40px; min-height: 40px; border: 0; background: none; cursor: pointer; font-size: 18px; }
.zoom #zoom-fit { font-size: 12px; padding: 0 12px; letter-spacing: .06em; }
.zoom span { min-width: 52px; text-align: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.plan-hint { position: absolute; left: calc(var(--gutter) + 12px); bottom: 30px; margin: 0; font-size: 12px; color: var(--muted); pointer-events: none; }

/* step 4 — passport (right-hand drawer by default) */
.passport { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0); transition: background .4s; }
.passport.is-open { background: rgba(0,0,0,.5); }
/* the panel does not scroll itself: the close button stays put over the photo, the body scrolls under it */
.pp-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 760px); background: var(--panel); color: var(--panel-ink); overflow: hidden;
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .5s var(--ease); }
.passport.is-open .pp-panel { transform: none; }
.pp-close { position: absolute; top: 14px; right: 14px; z-index: 5; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); background: var(--panel); color: var(--panel-ink); cursor: pointer; font-size: 13px; border-radius: var(--radius); }
.pp-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.pp-media { position: relative; aspect-ratio: 3 / 2; background: #0002; overflow: hidden; }
.pp-img { position: absolute; inset: 0; transition: opacity .5s; }
.pp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-media[data-photo="fitout"] .shell, .pp-media[data-photo="shell"] .fit { opacity: 0; }
.ph-wait { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(127,127,127,.08) 14px 28px); color: var(--muted); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.pp-toggle { position: absolute; left: 16px; bottom: 16px; display: flex; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); border-radius: var(--radius); }
.pp-toggle button { min-height: 38px; padding: 8px 14px; border: 0; background: none; color: #fff; cursor: pointer; font-size: 13px; opacity: .7; }
.pp-toggle button[aria-pressed="true"] { opacity: 1; box-shadow: inset 0 -2px 0 var(--accent); }
.pp-kind { position: absolute; left: 16px; bottom: 16px; margin: 0; padding: 10px 14px; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); border-radius: var(--radius); color: #fff; font-size: 13px; }
.pp-cap { position: absolute; right: 16px; bottom: 16px; margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #fff; opacity: .75; }
.pp-copy { padding: 30px clamp(20px, 4vw, 44px) 40px; }
.pp-copy h2 { font-size: clamp(40px, 5vw, 72px); line-height: 1; font-weight: 600; }
.pp-use { margin: 8px 0 0; font-size: 20px; }
.pp-area { margin: 18px 0 24px; font: 600 clamp(28px, 3vw, 44px)/1 var(--display); color: var(--accent); }
.pp-facts { display: grid; grid-template-columns: 1fr auto; margin: 0 0 24px; border-top: 1px solid var(--line); }
.pp-facts dt, .pp-facts dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); }
.pp-facts dt { color: var(--muted); } .pp-facts dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.pp-where { margin: 0 0 20px; }
.pp-loc { display: block; width: 100%; max-height: 220px; color: var(--muted); }
.pp-loc .o { fill: rgba(127,127,127,.08); stroke: currentColor; stroke-width: .8; vector-effect: non-scaling-stroke; }
.pp-loc .u { fill: currentColor; opacity: .2; }
.pp-loc .u.me { fill: var(--accent); opacity: 1; }
.pp-terms { font-weight: 600; margin: 0 0 18px; }
.pp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.pp-nav { display: flex; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }
.pp-nav a { text-decoration: none; padding: 8px 0; } .pp-nav a:hover { color: var(--accent); }
.pp-src { margin: 18px 0 0; font-size: 12px; color: var(--muted); }
.fail { position: fixed; z-index: 99; left: 16px; right: 16px; bottom: 16px; padding: 14px; background: #B3261E; color: #fff; }

/* phones and small tablets */
@media (max-width: 900px) {
  .steps li + li::before { width: 12px; }
  .contact-top { display: none; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig:nth-child(3) { padding-left: 0; border-left: 0; }
  .s-levels { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; overflow: auto; }
  .level-info { display: none; }
  .cards { grid-template-columns: 1fr; max-height: none; }
  .card { min-height: 120px; }
  .row { grid-template-columns: 90px 1fr auto; } .l-go { display: none; }
  .band { grid-template-columns: 84px 46px 1fr; } .band .s-meta { display: none; }
  .stack { height: 58vh; }
  .plan-bar { gap: 10px; } .level-tabs button { min-width: 42px; }
  .plan-tools { gap: 8px; } .search input { width: 100%; } .search { flex: 1 1 100%; } .plan-count { display: none; }
  .filters { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
  .chip { white-space: nowrap; }
  .plan-hint { display: none; }
  .zoom { right: 12px; bottom: 12px; }
  .pp-panel { width: 100%; }
}
@media (max-width: 560px) {
  .logo img { height: 26px; }
  .steps { font-size: 10px; letter-spacing: .1em; }
  .screen { padding-top: 80px; }
}