/* Session overlays — Gesture Guide + Settings (1:1 ToolbarPanel/GestureHelp/SettingsScreen) */

.mock-overlay {
  /* Prefer container width; fall back to px so invalid cqw never blanks sizes */
  --gs-dp: 0.62px;
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(10 * var(--gs-dp)) calc(16 * var(--gs-dp));
  background: rgba(0,0,0,.72);
  animation: toolbarIn .18s ease-out;
  pointer-events: auto;
}
@supports (width: 1cqw) {
  .mock-overlay { --gs-dp: calc(100cqw / 900); }
}
.mock-overlay[hidden] { display: none !important; }
#mock-help.is-open,
#mock-settings.is-open {
  display: flex !important;
  visibility: visible !important;
}
/* QA: only force-open when not hidden (JS owns open/close) */
html.preview-help #mock-help:not([hidden]),
html.preview-settings #mock-settings:not([hidden]) {
  display: flex !important;
  visibility: visible !important;
}
#mock-settings.mock-overlay {
  background: #0a0a0c !important;
}
/* Cap SVG blow-ups if any calc fails */
.mock-overlay svg {
  max-width: 28px;
  max-height: 28px;
}

.mock-sheet {
  position: absolute;
  inset: 3%;
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  border-radius: calc(18 * var(--gs-dp));
  background: #12121a !important;
  border: 1px solid rgba(0,255,136,.35);
  box-shadow: 0 8px 28px rgba(0,0,0,.65);
  overflow: hidden;
  animation: mockSheetIn .28s cubic-bezier(.2,.8,.2,1);
}
#mock-settings .mock-sheet {
  inset: 0;
  border-radius: 0;
  border: none;
}
@keyframes mockSheetIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

.mock-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--gs-dp));
  padding: calc(8 * var(--gs-dp)) calc(10 * var(--gs-dp)) calc(6 * var(--gs-dp)) calc(14 * var(--gs-dp));
  flex-shrink: 0;
}
.mock-sheet-head-main {
  display: flex; align-items: center; gap: calc(10 * var(--gs-dp));
  min-width: 0; flex: 1;
}
.mock-sheet-title {
  color: #fff; font-weight: 700;
  font-size: calc(16 * var(--gs-dp));
  white-space: nowrap;
}
.mock-sheet-sub {
  color: #707078;
  font-size: calc(11 * var(--gs-dp));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock-icon-btn {
  width: calc(32 * var(--gs-dp));
  height: calc(32 * var(--gs-dp));
  border-radius: calc(10 * var(--gs-dp));
  border: calc(1 * var(--gs-dp)) solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; flex-shrink: 0;
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mock-icon-btn::before {
  content: '';
  position: absolute;
  inset: calc(-6 * var(--gs-dp));
}
.mock-icon-btn svg {
  width: calc(16 * var(--gs-dp));
  height: calc(16 * var(--gs-dp));
  pointer-events: none;
}
.mock-icon-btn.round {
  width: calc(40 * var(--gs-dp));
  height: calc(40 * var(--gs-dp));
  border-radius: 50%;
  background: #1a1a24;
  border-color: #2a2a36;
  color: #00ff88;
}
.mock-icon-btn.round svg { width: calc(20 * var(--gs-dp)); height: calc(20 * var(--gs-dp)); }

.mock-sheet-rule {
  height: calc(1 * var(--gs-dp));
  background: linear-gradient(90deg, transparent, #2a2a36, transparent);
  flex-shrink: 0;
}

.mock-sheet-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #0a0a0c;
  padding: calc(8 * var(--gs-dp)) calc(12 * var(--gs-dp));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mock-sheet-body::-webkit-scrollbar { display: none; }

.mock-sheet-foot {
  flex-shrink: 0;
  padding: calc(8 * var(--gs-dp)) calc(12 * var(--gs-dp));
}
.mock-got-it {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  height: calc(40 * var(--gs-dp));
  border-radius: calc(12 * var(--gs-dp));
  border: calc(1 * var(--gs-dp)) solid rgba(0,255,136,.5);
  background: rgba(0,255,136,.16);
  color: #00ff88;
  font: inherit;
  font-size: calc(14 * var(--gs-dp));
  font-weight: 700;
  cursor: pointer;
}
.mock-got-it:active { transform: scale(.98); }

/* ── Gesture guide columns ── */
/* App: one vertical scroll for the whole 3-col row (not per-column scrollbars) */
.guide-cols {
  display: flex;
  gap: calc(8 * var(--gs-dp));
  align-items: flex-start;
  min-height: min-content;
  height: auto;
}
.guide-col {
  flex: 1;
  display: flex; flex-direction: column;
  gap: calc(5 * var(--gs-dp));
  padding: calc(8 * var(--gs-dp));
  border-radius: calc(12 * var(--gs-dp));
  border: 1px solid rgba(255,255,255,.08);
  background: #1a1a24 !important;
  min-width: 0;
  overflow: visible;
  height: auto;
}
.guide-col.is-active {
  border-color: var(--guide-accent);
  background: #22222e !important;
}
.guide-col.touch { --guide-accent: #ffc530; flex: 1.15; }
.guide-col.controller { --guide-accent: #9d5cff; }
.guide-col.view { --guide-accent: #4fc3f7; flex: .9; }

.guide-col-head {
  display: flex; align-items: center; gap: calc(8 * var(--gs-dp));
}
.guide-col-icon {
  width: calc(28 * var(--gs-dp));
  height: calc(28 * var(--gs-dp));
  border-radius: calc(8 * var(--gs-dp));
  background: color-mix(in srgb, var(--guide-accent) 16%, transparent);
  color: var(--guide-accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.guide-col-icon svg { width: calc(15 * var(--gs-dp)); height: calc(15 * var(--gs-dp)); }
.guide-col-titles { min-width: 0; flex: 1; }
.guide-col-titles strong {
  display: block; color: #fff; font-size: calc(13 * var(--gs-dp)); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.guide-col-titles span {
  display: block; color: #707078; font-size: calc(10 * var(--gs-dp));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.guide-active-chip {
  padding: calc(3 * var(--gs-dp)) calc(6 * var(--gs-dp));
  border-radius: calc(8 * var(--gs-dp));
  border: calc(1 * var(--gs-dp)) solid color-mix(in srgb, var(--guide-accent) 50%, transparent);
  background: color-mix(in srgb, var(--guide-accent) 18%, transparent);
  color: var(--guide-accent);
  font-size: calc(10 * var(--gs-dp));
  font-weight: 500; white-space: nowrap;
}
.guide-col:not(.is-active) .guide-active-chip { display: none; }

.guide-row {
  display: flex; align-items: center; gap: calc(6 * var(--gs-dp));
  padding: calc(6 * var(--gs-dp)) calc(8 * var(--gs-dp));
  border-radius: calc(8 * var(--gs-dp));
  background: rgba(0,0,0,.22);
}
.guide-dot {
  width: calc(5 * var(--gs-dp)); height: calc(5 * var(--gs-dp));
  border-radius: 50%; background: color-mix(in srgb, var(--guide-accent) 70%, transparent);
  flex-shrink: 0;
}
.guide-gesture {
  flex: 1.15; min-width: 0;
  color: rgba(255,255,255,.92); font-size: calc(11 * var(--gs-dp));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.guide-action {
  flex: 1; min-width: 0;
  color: rgba(255,255,255,.55); font-size: calc(11 * var(--gs-dp));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Settings shell ── */
#mock-settings .mock-sheet {
  max-width: none;
  width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  background: #0a0a0c;
  box-shadow: none;
}
#mock-settings.mock-overlay { padding: 0; background: #0a0a0c; }

.settings-layout {
  display: flex;
  width: 100%; height: 100%;
  min-height: 0;
}
.settings-nav {
  width: calc(168 * var(--gs-dp));
  flex-shrink: 0;
  display: flex; flex-direction: column;
  gap: calc(6 * var(--gs-dp));
  padding: calc(14 * var(--gs-dp)) calc(10 * var(--gs-dp)) calc(14 * var(--gs-dp)) calc(12 * var(--gs-dp));
  overflow: auto;
  border-right: calc(1 * var(--gs-dp)) solid rgba(42,42,54,.5);
}
.settings-nav-head {
  display: flex; align-items: center; gap: calc(10 * var(--gs-dp));
  margin-bottom: calc(10 * var(--gs-dp));
}
.settings-nav-head strong {
  color: #fff; font-size: calc(18 * var(--gs-dp)); font-weight: 700;
}
.settings-nav-item {
  display: flex; align-items: center; gap: calc(10 * var(--gs-dp));
  width: 100%;
  padding: calc(9 * var(--gs-dp)) calc(11 * var(--gs-dp));
  border-radius: calc(12 * var(--gs-dp));
  border: calc(1 * var(--gs-dp)) solid transparent;
  background: transparent;
  color: #9aa0aa;
  font: inherit; font-size: calc(13 * var(--gs-dp)); font-weight: 500;
  text-align: left; cursor: pointer;
}
.settings-nav-item svg {
  width: calc(18 * var(--gs-dp)); height: calc(18 * var(--gs-dp)); flex-shrink: 0;
}
.settings-nav-item.is-selected {
  color: #fff; font-weight: 700;
  background: color-mix(in srgb, var(--nav-accent, #00ff88) 15%, transparent);
  border-color: color-mix(in srgb, var(--nav-accent, #00ff88) 50%, transparent);
}
.settings-nav-item.is-selected svg { color: var(--nav-accent, #00ff88); }
.settings-nav-item[data-tab="video"] { --nav-accent: #00ff88; }
.settings-nav-item[data-tab="controls"] { --nav-accent: #ffc530; }
.settings-nav-item[data-tab="appearance"] { --nav-accent: #9d5cff; }
.settings-nav-item[data-tab="about"] { --nav-accent: #4fc3f7; }

.settings-chips {
  display: none;
  gap: calc(8 * var(--gs-dp));
  padding: 0 0 calc(10 * var(--gs-dp));
  overflow-x: auto;
  scrollbar-width: none;
}
.settings-chips::-webkit-scrollbar { display: none; }
.settings-chip {
  display: inline-flex; align-items: center; gap: calc(6 * var(--gs-dp));
  padding: calc(9 * var(--gs-dp)) calc(14 * var(--gs-dp));
  border-radius: calc(10 * var(--gs-dp));
  border: calc(1 * var(--gs-dp)) solid transparent;
  background: #14141c;
  color: #9aa0aa;
  font: inherit; font-size: calc(12 * var(--gs-dp)); font-weight: 500;
  white-space: nowrap; cursor: pointer;
}
.settings-chip svg { width: calc(16 * var(--gs-dp)); height: calc(16 * var(--gs-dp)); }
.settings-chip.is-selected {
  color: var(--nav-accent);
  font-weight: 700;
  background: color-mix(in srgb, var(--nav-accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--nav-accent) 60%, transparent);
}
.settings-chip[data-tab="video"] { --nav-accent: #00ff88; }
.settings-chip[data-tab="controls"] { --nav-accent: #ffc530; }
.settings-chip[data-tab="appearance"] { --nav-accent: #9d5cff; }
.settings-chip[data-tab="about"] { --nav-accent: #4fc3f7; }

.settings-detail {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: calc(12 * var(--gs-dp)) calc(14 * var(--gs-dp));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.settings-detail::-webkit-scrollbar { display: none; }
.settings-nav {
  scrollbar-width: none;
}
.settings-nav::-webkit-scrollbar { display: none; }
.settings-panel[hidden] { display: none !important; }

.settings-cards {
  display: flex; flex-direction: column;
  gap: calc(12 * var(--gs-dp));
  max-width: calc(460 * var(--gs-dp));
}
/* App landscape: primary left, secondary stack (Screen Fit / Advanced / Apply) right */
.settings-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(14 * var(--gs-dp));
  align-items: start;
}
.settings-col {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--gs-dp));
  min-width: 0;
}

.settings-card {
  padding: calc(12 * var(--gs-dp));
  border-radius: calc(14 * var(--gs-dp));
  border: calc(1 * var(--gs-dp)) solid rgba(42,42,54,.9);
  background: #1a1a24;
}
.settings-card-head {
  display: flex; align-items: flex-start; gap: calc(10 * var(--gs-dp));
}
.settings-card-icon {
  width: calc(30 * var(--gs-dp)); height: calc(30 * var(--gs-dp));
  border-radius: calc(9 * var(--gs-dp));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.settings-card-icon svg { width: calc(16 * var(--gs-dp)); height: calc(16 * var(--gs-dp)); }
.settings-card-icon.green { background: rgba(0,255,136,.14); color: #00ff88; }
.settings-card-icon.gold { background: rgba(255,197,48,.14); color: #ffc530; }
.settings-card-icon.purple { background: rgba(157,92,255,.14); color: #9d5cff; }
.settings-card-icon.blue { background: rgba(79,195,247,.14); color: #4fc3f7; }
.settings-card-text { flex: 1; min-width: 0; }
.settings-card-text strong {
  display: block; color: #fff; font-size: calc(13 * var(--gs-dp)); font-weight: 600;
}
.settings-card-text span {
  display: block; color: #9aa0aa; font-size: calc(11 * var(--gs-dp)); margin-top: calc(2 * var(--gs-dp));
  line-height: 1.35;
}
.settings-value-pill {
  padding: calc(3 * var(--gs-dp)) calc(8 * var(--gs-dp));
  border-radius: calc(8 * var(--gs-dp));
  background: color-mix(in srgb, var(--pill, #ffc530) 18%, transparent);
  color: var(--pill, #ffc530);
  font-size: calc(12 * var(--gs-dp)); font-weight: 700; white-space: nowrap;
}

.settings-auto {
  margin-top: calc(12 * var(--gs-dp));
  display: flex; align-items: center; gap: calc(11 * var(--gs-dp));
  padding: calc(11 * var(--gs-dp));
  border-radius: calc(12 * var(--gs-dp));
  border: calc(2 * var(--gs-dp)) solid #00ff88;
  background: linear-gradient(90deg, rgba(0,255,136,.18), rgba(0,255,136,.05));
  cursor: pointer; width: 100%; text-align: left; font: inherit; color: inherit;
}
.settings-auto:not(.is-selected) {
  border-width: calc(1 * var(--gs-dp));
  border-color: #2a2a36;
  background: #14141c;
}
.settings-auto-ico {
  width: calc(32 * var(--gs-dp)); height: calc(32 * var(--gs-dp));
  border-radius: calc(8 * var(--gs-dp));
  background: rgba(0,255,136,.25); color: #00ff88;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.settings-auto-ico svg { width: calc(18 * var(--gs-dp)); height: calc(18 * var(--gs-dp)); }
.settings-auto-text { flex: 1; min-width: 0; }
.settings-auto-text strong {
  color: #00ff88; font-size: calc(13 * var(--gs-dp)); font-weight: 700;
}
.settings-auto:not(.is-selected) .settings-auto-text strong { color: #fff; }
.settings-rec {
  display: inline-block; margin-left: calc(8 * var(--gs-dp));
  padding: calc(2 * var(--gs-dp)) calc(6 * var(--gs-dp));
  border-radius: calc(6 * var(--gs-dp));
  background: rgba(0,255,136,.18); color: #00ff88;
  font-size: calc(8 * var(--gs-dp)); font-weight: 700; letter-spacing: .08em;
  vertical-align: middle;
}
.settings-auto-text span {
  display: block; margin-top: calc(3 * var(--gs-dp));
  color: #9aa0aa; font-size: calc(11 * var(--gs-dp));
}
.settings-check { color: #00ff88; flex-shrink: 0; }
.settings-check svg { width: calc(22 * var(--gs-dp)); height: calc(22 * var(--gs-dp)); }
.settings-auto:not(.is-selected) .settings-check { visibility: hidden; }

.settings-presets {
  margin-top: calc(12 * var(--gs-dp));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(8 * var(--gs-dp));
}
.settings-preset {
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(4 * var(--gs-dp));
  padding: calc(10 * var(--gs-dp));
  border-radius: calc(12 * var(--gs-dp));
  border: calc(1 * var(--gs-dp)) solid #2a2a36;
  background: #14141c;
  color: #fff; font: inherit; text-align: left; cursor: pointer;
}
.settings-preset.is-selected {
  border-color: #00ff88;
  background: rgba(0,255,136,.1);
}
.settings-preset strong { font-size: calc(12 * var(--gs-dp)); font-weight: 700; }
.settings-preset span { font-size: calc(10 * var(--gs-dp)); color: #9aa0aa; }
.settings-preset-top {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  color: #00ff88;
}
.settings-preset-top svg { width: calc(16 * var(--gs-dp)); height: calc(16 * var(--gs-dp)); }
.settings-lock {
  font-size: calc(9 * var(--gs-dp)); color: #ffc530; font-weight: 700;
}

.settings-status {
  margin-top: calc(12 * var(--gs-dp));
  display: flex; align-items: center; gap: calc(10 * var(--gs-dp));
  padding: calc(8 * var(--gs-dp)) calc(12 * var(--gs-dp));
  border-radius: calc(10 * var(--gs-dp));
  background: #14141c;
  color: #9aa0aa; font-size: calc(11 * var(--gs-dp));
}
.settings-status-dot {
  width: calc(8 * var(--gs-dp)); height: calc(8 * var(--gs-dp));
  border-radius: 50%; background: #00ff88; flex-shrink: 0;
}

.settings-seg {
  display: flex; gap: calc(4 * var(--gs-dp));
  margin-top: calc(10 * var(--gs-dp));
}
.settings-seg button {
  flex: 1;
  height: calc(30 * var(--gs-dp));
  border-radius: calc(8 * var(--gs-dp));
  border: calc(1 * var(--gs-dp)) solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.65);
  font: inherit; font-size: calc(10 * var(--gs-dp)); font-weight: 600;
  cursor: pointer; padding: 0;
}
.settings-seg button.is-selected {
  background: color-mix(in srgb, var(--seg, #00ff88) 22%, transparent);
  border-color: color-mix(in srgb, var(--seg, #00ff88) 60%, transparent);
  color: var(--seg, #00ff88);
}
.settings-hint {
  margin: calc(8 * var(--gs-dp)) 0 0;
  color: #9aa0aa; font-size: calc(11 * var(--gs-dp)); line-height: 1.4;
}

.settings-slider-row {
  display: flex; align-items: center; gap: calc(8 * var(--gs-dp));
  margin-top: calc(10 * var(--gs-dp));
  color: #9aa0aa; font-size: calc(10 * var(--gs-dp));
}
.settings-slider-row input[type="range"] {
  flex: 1; accent-color: var(--seg, #ffc530);
  height: calc(28 * var(--gs-dp));
}

.settings-toggle-row {
  display: flex; align-items: center; gap: calc(10 * var(--gs-dp));
  margin-top: calc(8 * var(--gs-dp));
  width: 100%;
  padding: calc(8 * var(--gs-dp));
  border-radius: calc(11 * var(--gs-dp));
  border: calc(1 * var(--gs-dp)) solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.settings-toggle-row .hud-leading { pointer-events: none; }
.settings-toggle-row.is-on .hud-toggle {
  background: rgba(0,255,136,.85);
  border-color: #00ff88;
  justify-content: flex-end;
}
.settings-toggle-row[data-toggle="input-overlay"].is-on .hud-toggle,
.settings-toggle-row[data-toggle="click-rings"].is-on .hud-toggle {
  background: rgba(79,195,247,.85);
  border-color: #4fc3f7;
}
.settings-toggle-row[data-toggle="invert-scroll"].is-on .hud-toggle {
  background: rgba(255,197,48,.85);
  border-color: #ffc530;
}
.settings-toggle-copy { flex: 1; min-width: 0; }
.settings-toggle-copy strong {
  display: block; color: rgba(255,255,255,.9); font-size: calc(12 * var(--gs-dp)); font-weight: 500;
}
.settings-toggle-copy span {
  display: block; color: #9aa0aa; font-size: calc(10 * var(--gs-dp)); margin-top: calc(2 * var(--gs-dp));
  line-height: 1.3;
}

.settings-advanced-btn {
  display: flex; align-items: center; gap: calc(8 * var(--gs-dp));
  width: 100%; margin-top: calc(4 * var(--gs-dp));
  padding: calc(6 * var(--gs-dp)) 0;
  border: none; background: none;
  color: #00ff88; font: inherit; font-size: calc(13 * var(--gs-dp)); font-weight: 700;
  cursor: pointer; text-align: left;
}
.settings-advanced-btn svg:last-child {
  margin-left: auto; width: calc(18 * var(--gs-dp)); height: calc(18 * var(--gs-dp)); color: #9aa0aa;
}
.settings-advanced-btn svg:first-child { width: calc(18 * var(--gs-dp)); height: calc(18 * var(--gs-dp)); }
.settings-advanced[hidden] { display: none !important; }
.settings-field-label {
  margin: calc(14 * var(--gs-dp)) 0 calc(6 * var(--gs-dp));
  color: #9aa0aa; font-size: calc(11 * var(--gs-dp)); font-weight: 600;
}

.settings-apply {
  display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--gs-dp));
  width: 100%;
  height: calc(42 * var(--gs-dp));
  border: none; border-radius: calc(12 * var(--gs-dp));
  background: linear-gradient(90deg, #00ff88, #33e0ff);
  color: #04120a;
  font: inherit; font-size: calc(13 * var(--gs-dp)); font-weight: 800;
  cursor: pointer;
}
.settings-apply svg { width: calc(16 * var(--gs-dp)); height: calc(16 * var(--gs-dp)); }

.settings-swatch-grid {
  display: flex; flex-wrap: wrap; gap: calc(8 * var(--gs-dp));
  margin-top: calc(12 * var(--gs-dp));
}
.settings-swatch {
  width: calc(34 * var(--gs-dp)); height: calc(34 * var(--gs-dp));
  border-radius: 50%;
  border: calc(1 * var(--gs-dp)) solid rgba(255,255,255,.3);
  padding: 0; cursor: pointer;
  box-sizing: border-box;
}
.settings-swatch.is-selected {
  border: calc(3 * var(--gs-dp)) solid #9d5cff;
}

.settings-about-row {
  display: flex; align-items: center; gap: calc(12 * var(--gs-dp));
}
.settings-about-ico {
  width: calc(40 * var(--gs-dp)); height: calc(40 * var(--gs-dp));
  border-radius: calc(10 * var(--gs-dp));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.settings-about-ico svg { width: calc(20 * var(--gs-dp)); height: calc(20 * var(--gs-dp)); }
.settings-about-ico.brand {
  background: linear-gradient(135deg, rgba(0,255,136,.25), rgba(79,195,247,.2));
  color: #00ff88;
}
.settings-about-ico.pro {
  background: linear-gradient(135deg, rgba(255,197,48,.3), rgba(255,197,48,.12));
  color: #ffc530;
}
.settings-about-text { flex: 1; min-width: 0; }
.settings-about-text strong {
  display: block; color: #fff; font-size: calc(13 * var(--gs-dp)); font-weight: 700;
}
.settings-about-text span {
  display: block; color: #9aa0aa; font-size: calc(11 * var(--gs-dp)); margin-top: calc(2 * var(--gs-dp));
  line-height: 1.35;
}
.settings-ver {
  padding: calc(5 * var(--gs-dp)) calc(10 * var(--gs-dp));
  border-radius: calc(8 * var(--gs-dp));
  background: rgba(0,255,136,.15); color: #00ff88;
  font-size: calc(12 * var(--gs-dp)); font-weight: 700;
}
.settings-pro-note {
  margin-top: calc(12 * var(--gs-dp));
  padding: calc(10 * var(--gs-dp));
  border-radius: calc(10 * var(--gs-dp));
  background: rgba(255,197,48,.08);
  border: calc(1 * var(--gs-dp)) solid rgba(255,197,48,.25);
  color: #9aa0aa; font-size: calc(11 * var(--gs-dp)); line-height: 1.4;
}

.settings-toast {
  position: absolute;
  left: 50%; bottom: calc(12 * var(--gs-dp));
  transform: translateX(-50%);
  z-index: 5;
  padding: calc(10 * var(--gs-dp)) calc(14 * var(--gs-dp));
  border-radius: calc(12 * var(--gs-dp));
  background: #1a1a24;
  color: #00ff88;
  font-size: calc(11 * var(--gs-dp));
  white-space: nowrap;
  box-shadow: 0 calc(6 * var(--gs-dp)) calc(16 * var(--gs-dp)) rgba(0,0,0,.45);
}
.settings-toast[hidden] { display: none !important; }

/* Chips / mobile head kept in markup for future portrait mock; landscape demo uses sidebar */
.settings-mobile-head { display: none; }
.settings-chips { display: none; }

/* GestureHelpOverlay.kt — floating "Scroll" chip when more content below */
.guide-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: calc(6 * var(--gs-dp));
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--gs-dp));
  padding: calc(5 * var(--gs-dp)) calc(10 * var(--gs-dp));
  border-radius: calc(20 * var(--gs-dp));
  background: rgba(26,26,36,.95);
  border: calc(1 * var(--gs-dp)) solid rgba(0,255,136,.4);
  color: #00ff88;
  font-size: calc(11 * var(--gs-dp));
  font-weight: 500;
  pointer-events: none;
  animation: guideScrollPulse .9s ease-in-out infinite alternate;
}
.guide-scroll-hint[hidden] { display: none !important; }
.guide-scroll-hint svg {
  width: calc(14 * var(--gs-dp));
  height: calc(14 * var(--gs-dp));
  max-width: 14px;
  max-height: 14px;
}
@keyframes guideScrollPulse {
  from { opacity: .75; transform: translateX(-50%) translateY(0); }
  to   { opacity: 1; transform: translateX(-50%) translateY(2px); }
}

@container phone-screen (max-height: 260px) {
  .guide-cols { gap: calc(5 * var(--gs-dp)); }
  .guide-col { padding: calc(5 * var(--gs-dp)); gap: calc(3 * var(--gs-dp)); }
  .guide-row { padding: calc(4 * var(--gs-dp)) calc(6 * var(--gs-dp)); }
  .settings-nav { width: calc(132 * var(--gs-dp)); padding: calc(8 * var(--gs-dp)) calc(6 * var(--gs-dp)); gap: calc(4 * var(--gs-dp)); }
  .settings-nav-item { padding: calc(7 * var(--gs-dp)) calc(8 * var(--gs-dp)); font-size: calc(12 * var(--gs-dp)); }
  .settings-detail { padding: calc(8 * var(--gs-dp)) calc(10 * var(--gs-dp)); }
  .settings-cols { gap: calc(8 * var(--gs-dp)); }
  .settings-col { gap: calc(8 * var(--gs-dp)); }
  .settings-card { padding: calc(8 * var(--gs-dp)); }
}