/* =============================================================
   A-Z Shades — 3D Design Studio
   Studio-only styles. Reuses :root tokens from styles.css.
   ============================================================= */

:root {
  --header-h: 78px;        /* slim navbar (topbar hidden) on the design page */
  --panel-w: 360px;
}

.design-page { overflow-x: hidden; }
/* slim the header on the studio page so the app fits the viewport */
.design-page .topbar { display: none; }

/* ---------- Studio shell (full-bleed, fits the viewport) ---------- */
.studio {
  display: grid;
  grid-template-columns: 1fr var(--panel-w);
  grid-template-rows: auto 1fr;
  height: calc(100svh - var(--header-h));
  margin: 0;
  background: var(--bg-soft);
  border: 0;
  overflow: hidden;
  position: relative;
}

/* ---------- Toolbar ---------- */
.studio__toolbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  z-index: 6;
}
.toolbar__group { display: flex; align-items: center; gap: 6px; }
.toolbar__products { flex-wrap: wrap; }
.toolbar__tabs { background: var(--bg-tint); padding: 4px; border-radius: 999px; }
.toolbar__actions { gap: 8px; }

/* labelled toolbar sections */
.tool-sect { display: flex; align-items: center; gap: 10px; }
.toolbar__tabs-sect { margin-inline: auto; }
.tool-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 700; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tool-tag__n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--teal); color: #fff; font-size: .72rem; letter-spacing: 0; }
@media (max-width: 1100px) { .tool-tag { display: none; } }

.btn--sm { padding: 9px 14px; font-size: .88rem; }
.btn--teal { --btn-bg: var(--teal); --btn-fg: #fff; }
/* secondary actions are icon-only to keep the top bar slim */
.toolbar__actions #btn-reset, .toolbar__actions #btn-save { padding: 9px; }
.toolbar__actions #btn-reset .hide-sm, .toolbar__actions #btn-save .hide-sm { display: none; }

/* Segmented control (tabs + product) */
.seg {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--body);
  font-family: var(--font-head); font-weight: 600; font-size: .9rem; line-height: 1;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.seg .ico { width: 17px; height: 17px; }
.seg:hover { color: var(--teal-700); }
.seg.is-active { background: #fff; color: var(--teal-700); box-shadow: var(--shadow-sm); }

/* Product pills */
.prod {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: #fff; color: var(--navy);
  font-family: var(--font-head); font-weight: 600; font-size: .9rem; line-height: 1;
  transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease;
}
.prod .ico { width: 20px; height: 20px; color: var(--teal); }
.prod:hover { border-color: var(--teal); background: var(--bg-tint); }
.prod.is-active { border-color: var(--teal); background: var(--teal); color: #fff; box-shadow: 0 8px 18px -10px rgba(31,150,201,.8); }
.prod.is-active .ico { color: #fff; }

.hide-sm { display: inline; }

/* ---------- Stage ---------- */
.studio__stage { position: relative; overflow: hidden; background: linear-gradient(180deg, #cfeafe, #eaf6ff 60%, #f2f8f4); }
.stage__canvas { position: absolute; inset: 0; z-index: 1; }

.stage__canvas canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; }

/* Loader */
.stage__loader {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px;
  background: linear-gradient(180deg, #cfeafe, #eef6ef); z-index: 8; transition: opacity .4s ease;
  color: var(--teal-700); font-family: var(--font-head); font-weight: 600;
}
.stage__loader.is-hidden { opacity: 0; pointer-events: none; }
.spinner { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(31,150,201,.2); border-top-color: var(--teal); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Camera presets */
.stage__cameras { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; gap: 6px; z-index: 5; }
.stage__cam-sep { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
.chip--help { min-width: 34px; padding: 0; color: var(--teal-700); }
.chip--help:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.chip--help .ico { width: 18px; height: 18px; }
.chip {
  min-width: 38px; height: 34px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color: var(--navy);
  font-family: var(--font-head); font-weight: 600; font-size: .82rem; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip .ico { width: 16px; height: 16px; }
.chip:hover { border-color: var(--teal); color: var(--teal-700); }
.chip[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Hint toast */
.stage__hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; max-width: min(92%, 620px);
  padding: 9px 14px; border-radius: 999px; background: rgba(27,46,56,.8); color: #e7f3f8;
  font-size: .82rem; z-index: 5; box-shadow: var(--shadow); backdrop-filter: blur(6px);
  transition: opacity .3s ease;
}
.stage__hint .ico { width: 18px; height: 18px; color: var(--sun); flex: none; }
.stage__hint-close { background: none; border: 0; color: #9fc0d3; font-size: 1.2rem; line-height: 1; padding: 0 2px; }
.stage__hint-close:hover { color: #fff; }
.stage__hint.is-hidden { opacity: 0; pointer-events: none; }

/* Sun & shadow — now a panel section */
.sun-panel { display: grid; gap: 15px; }
.sun-select { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; font: inherit; font-weight: 600; color: var(--ink); background: var(--bg-soft); }
.sun-select:focus { outline: none; border-color: var(--teal); background: #fff; box-shadow: 0 0 0 4px rgba(31,150,201,.12); }
.sun-coverage { font-size: .85rem; color: var(--body); background: var(--bg-tint); border-radius: 10px; padding: 10px 12px; }
.sun-coverage b { color: var(--teal-700); }

/* ---------- Location picker ---------- */
.loc-btn { gap: 8px; }
.loc-pop {
  position: absolute; left: 14px; top: 14px; z-index: 9; width: min(560px, calc(100% - 28px));
  max-height: calc(100% - 28px); overflow: auto; padding: 16px 18px 18px; border-radius: 16px;
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.loc-pop[hidden] { display: none; }
/* author display rules beat the UA's [hidden] — restate it for hideable controls */
.ctrl[hidden] { display: none; }
.loc-pop__head { font-size: .88rem; font-weight: 600; color: var(--body); margin-bottom: 4px; }
.loc-cat { font-family: var(--font-head); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--teal-700); margin: 14px 0 8px; }
.loc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.loc-card {
  display: grid; gap: 6px; padding: 6px 6px 8px; border-radius: 12px; text-align: left;
  border: 2px solid var(--line); background: #fff; font: inherit; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.loc-card:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.loc-card.is-active { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31,150,201,.16); }
.loc-card__pic { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: linear-gradient(160deg, #cfeafe, #eef6ef); }
.loc-card__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loc-card__lab { font-weight: 600; font-size: .82rem; color: var(--navy); padding: 0 2px; }
.linklike { background: none; border: 0; color: var(--teal-700); font: inherit; font-weight: 700; text-decoration: underline; padding: 0; }

/* ---------- AR "view in your space" modal ---------- */
.armodal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(12,22,28,.62); backdrop-filter: blur(4px); }
.armodal.is-open { display: flex; }
.armodal__card { position: relative; width: min(680px, 96vw); max-height: 92vh; display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); }
.armodal__close { position: absolute; top: 10px; right: 12px; z-index: 3; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #1b2e38; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: var(--shadow); }
.armodal__stage { position: relative; width: 100%; aspect-ratio: 4 / 3; background: radial-gradient(120% 120% at 50% 30%, #f4f7f8, #e7edf0); }
.armodal__stage model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: transparent; }
.armodal__poster { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-weight: 600; font-size: .95rem; }
.armodal__ar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--sun); color: #1b2e38; font: inherit; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-lg); }
.armodal__foot { padding: 16px 22px 20px; border-top: 1px solid var(--line); }
.armodal__hint { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink); }
.armodal__hint em { font-style: normal; color: var(--teal-700); font-weight: 700; }
.armodal__desk { color: var(--muted); }

/* ---------- Control panel ---------- */
.studio__panel { background: #fff; border-left: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.studio__panel::-webkit-scrollbar { width: 10px; }
.studio__panel::-webkit-scrollbar-thumb { background: #d6dee4; border-radius: 8px; border: 3px solid #fff; }

/* sticky live-summary header */
.panel__summary { position: sticky; top: 0; z-index: 4; background: linear-gradient(180deg,#fff, #f7fafb); border-bottom: 1px solid var(--line); padding: 12px 16px; }
.ps__eyebrow { font-family: var(--font-head); font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
.ps__main { display: flex; align-items: center; gap: 11px; }
.ps__icon { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--teal); color: #fff; }
.ps__icon .ico { width: 21px; height: 21px; }
.ps__text { flex: 1; min-width: 0; line-height: 1.25; }
.ps__text b { display: block; font-family: var(--font-head); color: var(--ink); font-size: 1rem; }
.ps__text span { font-size: .82rem; color: var(--muted); }
.ps__fabric { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--ink); max-width: 96px; }
.ps__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); flex: none; }
.ps__fabric span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.panel__groups { flex: 1; }

/* sticky CTA footer */
.panel__cta { position: sticky; bottom: 0; z-index: 4; background: #fff; border-top: 1px solid var(--line); padding: 12px 16px; display: grid; gap: 8px; box-shadow: 0 -6px 18px -14px rgba(27,46,56,.4); }
.btn--block { width: 100%; }
.panel__cta .btn--ghost { padding: 10px; font-size: .9rem; }

.pgroup { border-bottom: 1px solid var(--line); }
.pgroup__head {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 15px 18px;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: .96rem; color: var(--ink);
}
.pgroup__head .ico { width: 18px; height: 18px; color: var(--teal); flex: none; }
.pgroup__head .chev { margin-left: auto; width: 16px; height: 16px; color: var(--muted); transition: transform .2s ease; }
.pgroup.is-collapsed .pgroup__head .chev { transform: rotate(-90deg); }
.pgroup__body { padding: 4px 18px 20px; display: grid; gap: 16px; }
.pgroup.is-collapsed .pgroup__body { display: none; }

/* Control rows */
.ctrl { display: grid; gap: 8px; }
.ctrl__label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ctrl__label span { font-family: var(--font-head); font-weight: 600; font-size: .86rem; color: var(--ink); }
.ctrl__val { font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--teal-700); font-weight: 700; }
.ctrl__hint { font-size: .78rem; color: var(--muted); margin-top: -2px; }
.ctrl__hint.is-warn { color: var(--sun-700); background: #fff7ea; border: 1px solid #f3dcae; padding: 8px 10px; border-radius: 8px; }
.ctrl__hint.is-warn b { color: var(--ink); }

/* Range slider */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--line); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--teal); border: 3px solid #fff; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .12s ease; }
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--teal); border: 3px solid #fff; cursor: pointer; }
input[type=range]:focus-visible { box-shadow: var(--ring); }

/* Segmented (option) buttons */
.optset { display: flex; flex-wrap: wrap; gap: 6px; }
.optset button {
  flex: 1 1 auto; min-width: 56px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; color: var(--body); font-family: var(--font-head); font-weight: 600; font-size: .84rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.optset button .ico { width: 16px; height: 16px; }
.optset button:hover { border-color: var(--teal); color: var(--teal-700); }
.optset button.is-active { border-color: var(--teal); background: var(--bg-tint); color: var(--teal-700); box-shadow: inset 0 0 0 1px var(--teal); }

/* Swatch grid */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px; }
.swatch {
  position: relative; aspect-ratio: 1; border-radius: 10px; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); cursor: pointer; overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.swatch:hover { transform: translateY(-2px); }
.swatch.is-active { box-shadow: 0 0 0 2px var(--teal), 0 0 0 4px rgba(31,150,201,.25); }
.swatch.is-active::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.6); font-size: .9rem; }
.swatch--light.is-active::after { color: #1a2630; text-shadow: 0 1px 2px rgba(255,255,255,.7); }
.swatch-name { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.swatch-name b { color: var(--ink); font-weight: 600; }
.range-meta { font-size: .76rem; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.range-meta b { color: var(--teal-700); }

/* Stepper */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.stepper button { width: 38px; height: 38px; background: #fff; border: 0; color: var(--navy); font-size: 1.2rem; display: grid; place-items: center; }
.stepper button:hover { background: var(--bg-tint); color: var(--teal-700); }
.stepper span { min-width: 44px; text-align: center; font-family: var(--font-head); font-weight: 700; color: var(--ink); border-inline: 1px solid var(--line); padding: 0 6px; height: 38px; display: grid; place-items: center; }

/* Toggle */
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toggle span { font-family: var(--font-head); font-weight: 600; font-size: .86rem; color: var(--ink); }
.switch { position: relative; width: 46px; height: 26px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track { position: absolute; inset: 0; border-radius: 999px; background: #cbd6dd; transition: background .18s ease; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s ease; }
.switch input:checked + .switch__track { background: var(--teal); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--ring); }

/* Corner editor list */
.corners { display: grid; gap: 9px; }
.corner-row { display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); }
/* per-corner anchor toggle: post in the ground vs wall plate on the house */
.corner-row .mnt { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 4px 9px; font-family: var(--font-head); font-weight: 600; font-size: .72rem; color: var(--teal-700); min-width: 44px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.corner-row .mnt:hover { border-color: var(--teal); }
.corner-row .mnt[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.corner-row .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .72rem; font-weight: 800; font-family: var(--font-head); }
.corner-row .corner-h { display: flex; align-items: center; gap: 8px; }
.corner-row .corner-h input[type=range] { width: 100%; }
.corner-row .hval { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--teal-700); font-weight: 700; min-width: 42px; text-align: right; }

/* ---------- Summary / quote drawer ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(27,46,56,.55); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; z-index: 80; }
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(540px, 100vw);
  background: #fff; box-shadow: var(--shadow-lg); z-index: 90; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.drawer.is-open { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.drawer__head h2 { font-size: 1.3rem; }
.drawer__close { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; color: var(--navy); }
.drawer__close:hover { background: var(--bg-tint); color: var(--teal-700); }
.drawer__close .ico { width: 20px; height: 20px; }
.drawer__body { padding: 22px 24px; overflow-y: auto; flex: 1; }
.drawer__foot { padding: 16px 24px; border-top: 1px solid var(--line); display: grid; gap: 10px; }

.summary-hero { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 20px; box-shadow: var(--shadow-sm); background: var(--bg-soft); }
.summary-hero img { width: 100%; display: block; }
.price-card { background: linear-gradient(135deg, var(--teal-700), var(--navy)); color: #eaf5fa; border-radius: 14px; padding: 20px 22px; margin-bottom: 22px; }
.price-card .price-label { font-size: .82rem; color: #bcd9e6; text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-head); font-weight: 600; }
.price-card .price-val { font-family: var(--font-head); font-weight: 800; font-size: 2.1rem; color: #fff; line-height: 1.1; margin-top: 4px; }
.price-card .price-note { font-size: .8rem; color: #aecdda; margin-top: 8px; }

.spec-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.spec-table th, .spec-table td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { color: var(--muted); font-weight: 600; width: 42%; font-family: var(--font-head); }
.spec-table td { color: var(--ink); font-weight: 600; }
.spec-section-title { font-family: var(--font-head); font-weight: 700; color: var(--ink); margin: 20px 0 6px; font-size: 1rem; }

.actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Quote form (inside drawer) */
.quote-form { display: none; }
.quote-form.is-active { display: block; }
.summary-view.is-hidden { display: none; }

/* Save dialog (simple) */
.saved-list { display: grid; gap: 8px; margin-top: 8px; }
.saved-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.saved-item .si-thumb { width: 52px; height: 38px; border-radius: 6px; object-fit: cover; background: var(--bg-tint); flex: none; }
.saved-item .si-meta { flex: 1; min-width: 0; }
.saved-item .si-meta b { display: block; font-size: .9rem; color: var(--ink); }
.saved-item .si-meta span { font-size: .76rem; color: var(--muted); }
.saved-item button { border: 0; background: none; color: var(--teal-700); font-weight: 600; font-size: .82rem; cursor: pointer; }
.saved-item button.si-del { color: #c0392b; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 999px; box-shadow: var(--shadow-lg); z-index: 120; opacity: 0; transition: opacity .2s ease, transform .2s ease; font-weight: 600; font-size: .9rem; }
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Onboarding / walkthrough ---------- */
.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(27,46,56,.62); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .25s ease; }
.intro.is-open { opacity: 1; visibility: visible; }
.intro__card { position: relative; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(24px, 4vw, 38px); transform: translateY(12px) scale(.98); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.intro.is-open .intro__card { transform: none; }
.intro__skip { position: absolute; top: 16px; right: 18px; background: none; border: 0; color: var(--muted); font: inherit; font-weight: 600; font-size: .85rem; }
.intro__skip:hover { color: var(--ink); }
.intro__badge { display: inline-flex; align-items: center; font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); background: var(--bg-tint); padding: 6px 12px; border-radius: 999px; }
.intro__card h2 { margin: 14px 0 18px; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.8rem); }
.intro__steps { display: grid; gap: 14px; margin-bottom: 20px; }
.intro__steps li { display: flex; gap: 14px; align-items: flex-start; }
.intro__num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; font-family: var(--font-head); font-weight: 800; box-shadow: 0 6px 14px -6px rgba(31,150,201,.8); }
.intro__steps b { font-family: var(--font-head); color: var(--ink); display: block; margin-bottom: 2px; }
.intro__steps p { font-size: .94rem; color: var(--body); }
.intro__hint { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-tint); color: var(--teal-700); font-weight: 600; font-size: .9rem; margin-bottom: 20px; }
.intro__hint svg { width: 20px; height: 20px; flex: none; }
.intro__go { width: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  :root { --panel-w: 330px; }
}
@media (max-width: 880px) {
  .studio {
    grid-template-columns: 1fr;
    grid-template-rows: auto 58vh auto;
    height: auto;
  }
  .studio__panel { border-left: 0; border-top: 1px solid var(--line); max-height: none; }
  .toolbar__tabs-sect { order: 3; width: 100%; margin-inline: 0; }
  .toolbar__tabs { width: 100%; justify-content: center; }
  .tool-sect:not(.toolbar__tabs-sect) { order: 1; }
  .toolbar__actions { order: 2; margin-left: auto; }
  .hide-sm { display: none; }
  .stage__hint { font-size: .76rem; }
}
@media (max-width: 520px) {
  .seg span { display: none; }
  .seg { padding: 9px 11px; }
  /* the Location button's label IS its state — keep it visible */
  .seg.loc-btn span { display: inline; }
  /* 8 chips no longer fit one row on a phone — wrap, keeping right alignment */
  .stage__cameras { left: 14px; flex-wrap: wrap; justify-content: flex-end; }
}