/*  PULSE NOTIFICATION SYSTEM - Injected from settings-screen demo         */
/* ======================================================================= */
/* --- Легаси-алиасы замкнуты внутри настроек и их портальных оверлеев. --- */
:is(#screen-settings,#screen-log,.xp-pulse-panel,.xp-toast-host,.nm-overlay,.cmdp-overlay,.log-detail-overlay) {
  --bg:var(--w2-bg);
  --surface:var(--w2-surface);
  --surface-hi:var(--w2-surface-raised);
  --surface-el:rgba(255,255,255,.025);
  --border:var(--w2-line);
  --border-hi:rgba(255,255,255,.16);
  --border-dash:var(--w2-line);
  --text:var(--w2-text);
  --text-mute:var(--w2-text-muted);
  --text-dim:var(--w2-text-quiet);
  --text-label:var(--w2-text-muted);
  --green:var(--w2-lime);
  --green-glow:rgba(200,241,53,.28);
  --green-soft:rgba(200,241,53,.2);
  --green-ghost:rgba(200,241,53,.08);
  --roman:var(--w2-text-muted);
  --amber:var(--w2-text-muted);
  --vlad:var(--w2-text-quiet);
  --warn:var(--w2-fire);
  --error:var(--w2-fire);
}

/* --- Pulse/Settings 3-column CSS --- */
/* Override base .screen constraints for settings (full-width 3-column grid, like sf-train / sb-body) */
.screen.screen-settings {
  max-width:none;
  padding:0;
  margin:0;
  width:100%;
  grid-template-columns:16vw minmax(0,1fr) 19vw;
  gap:0;
  min-height:calc(100vh - 60px);
  color:var(--w2-text);
  background:var(--w2-bg);
  font-family:'Inter',sans-serif;
  font-variant-numeric:tabular-nums;
}

.screen.screen-settings.active {
  display:grid
}

.screen.screen-settings:not(.active) {
  display:none
}

#screen-settings *,
#screen-log * {
  font-variant-numeric:tabular-nums
}

#screen-settings .w2-settings-icon {
  width:1.1em;
  height:1.1em;
  flex:0 0 auto;
  vertical-align:-.18em
}

/* ============ LEFT COLUMN: ACCORDION NAV ============ */
.ss-left {
  background:var(--bg);
  padding:var(--w2-s7) var(--w2-s7);
  border-right:1px solid rgba(255,255,255,.08);
}

/* Accordion container — positioned for the sliding active-indicator */
.ss-acc {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--w2-s1);
  margin-bottom:var(--w2-s6)
}

/* Sliding indicator — shared element that glides between active sections */
.ss-acc-indicator {
  position:absolute;
  left:calc(-1 * var(--w2-s2));
  top:0;
  width:2px;
  background:var(--green);
  border-radius:0 var(--w2-s1) var(--w2-s1) 0;
  transition:top .42s cubic-bezier(.22,1,.36,1), height .42s cubic-bezier(.22,1,.36,1), opacity .25s ease;
  opacity:0;
  pointer-events:none;
  z-index:1;
}

/* Settings left sidebar header — matches .sf-settings-head from Training/Body */
.ss-left-head {
  font:500 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:rgba(255,255,255,.38);
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:0 var(--w2-s3) var(--w2-s3);
  margin-bottom:var(--w2-s1);
  display:flex;
  align-items:center;
  gap:var(--w2-s2)
}

.ss-left-head::before {
  content:'';
  width:max(10px,0.3vw);
  height:max(10px,0.3vw);
  border-radius:50%;
  background:rgba(255,255,255,.42)
}

/* Section (big-hierarchy item) — scoped to .ss-acc to avoid collision
   with <section class="ss-section"> used inside center-column templates */
.ss-acc .ss-section {
  border-radius:var(--w2-s3);
  overflow:hidden;
  transition: background-color .28s cubic-bezier(.22,1,.36,1);
  background:transparent;
  padding:0;
  border:0;
  margin:0;
}

.ss-acc .ss-section.open {
  background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0))
}

/* Section head — clickable big title */
.ss-acc .ss-section-head {
  width:100%;
  display:grid;
  grid-template-columns:max(29px,1.7vw) 1fr auto;
  align-items:center;
  gap:var(--w2-s3);
  padding:var(--w2-s3) var(--w2-s3);
  cursor:pointer;
  transition: background-color .18s ease, color .18s ease;
  position:relative;
  border-radius:var(--w2-s3);
}

.ss-acc .ss-section-head:hover {
  background:var(--surface-el)
}

.ss-acc .ss-section.open .ss-section-head {
  background:transparent
}

.ss-acc .ss-section-icon {
  width:max(29px,1.7vw);
  height:max(29px,1.7vw);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-mute);
  background:var(--surface-hi);
  border:1px solid var(--border);
  border-radius:var(--w2-s2);
  transition: color .28s cubic-bezier(.22,1,.36,1), background-color .28s cubic-bezier(.22,1,.36,1), border-color .28s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1), opacity .28s cubic-bezier(.22,1,.36,1);
}

.ss-acc .ss-section-icon svg {
  width:max(14px,0.84vw);
  height:max(14px,0.84vw);
  display:block
}

.ss-acc .ss-section:hover .ss-section-icon {
  color:var(--text);
  border-color:var(--border-hi)
}

.ss-acc .ss-section.active-section .ss-section-icon {
  color:var(--green);
  background:var(--surface-hi);
  border-color:var(--border);
}

.ss-acc .ss-section-title {
  font:700 14px/1.2 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  letter-spacing:.01em;
  color:var(--text);
  text-align:left;
  transition:color .22s ease;
}

.ss-acc .ss-section.active-section .ss-section-title {
  color:var(--green)
}

.ss-acc .ss-section-chev {
  width:max(12px,0.73vw);
  height:max(12px,0.73vw);
  color:var(--text-dim);
  transition:transform .32s cubic-bezier(.22,1,.36,1), color .22s ease;
  flex-shrink:0;
}

.ss-acc .ss-section-chev svg {
  width:100%;
  height:100%;
  stroke:currentColor;
  stroke-width:2.4;
  fill:none
}

.ss-acc .ss-section.open .ss-section-chev {
  transform:rotate(90deg);
  color:var(--green)
}

/* Subs list — smooth collapse with staggered item reveal */
.ss-acc .ss-section-subs {
  max-height:0;
  overflow:hidden;
  transition:max-height .42s cubic-bezier(.22,1,.36,1);
  padding:0;
}

.ss-acc .ss-section.open .ss-section-subs {
  max-height:600px;
  padding:var(--w2-s1) 0 var(--w2-s3);
}

.ss-acc .ss-sub-item {
  display:grid;
  grid-template-columns:max(23px,1.35vw) 1fr max(12px,0.73vw);
  align-items:center;
  gap:var(--w2-s3);
  width:100%;
  padding:var(--w2-s2) var(--w2-s3) var(--w2-s2) var(--w2-s3);
  border-radius:var(--w2-s2);
  color:var(--text-mute);
  font:500 14px/1.2 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  cursor:pointer;
  position:relative;
  transition: background-color .18s ease, color .18s ease, padding-left .2s ease;
  opacity:0;
  transform:translateX(-8px);
}

.ss-acc .ss-section.open .ss-sub-item {
  animation:ss-sub-in .36s cubic-bezier(.22,1,.36,1) both
}

.ss-acc .ss-section.open .ss-sub-item:nth-child(1) {
  animation-delay:.04s
}

.ss-acc .ss-section.open .ss-sub-item:nth-child(2) {
  animation-delay:.08s
}

.ss-acc .ss-section.open .ss-sub-item:nth-child(3) {
  animation-delay:.12s
}

.ss-acc .ss-section.open .ss-sub-item:nth-child(4) {
  animation-delay:.16s
}

.ss-acc .ss-section.open .ss-sub-item:nth-child(5) {
  animation-delay:.20s
}

.ss-acc .ss-section.open .ss-sub-item:nth-child(6) {
  animation-delay:.24s
}

.ss-acc .ss-section.open .ss-sub-item:nth-child(7) {
  animation-delay:.28s
}

.ss-acc .ss-section.open .ss-sub-item:nth-child(8) {
  animation-delay:.32s
}

@keyframes ss-sub-in {
  0% {
    opacity:0;
    transform:translateX(-8px)
  }

  100% {
    opacity:1;
    transform:translateX(0)
  }

}

.ss-acc .ss-sub-item .num {
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
  letter-spacing:.05em;
  text-align:center;
  transition:color .18s ease;
}

.ss-acc .ss-sub-item .label {
  color:inherit;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ss-acc .ss-sub-item .arr {
  width:max(12px,0.73vw);
  height:max(12px,0.73vw);
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .22s ease, transform .22s cubic-bezier(.22,1,.36,1);
  stroke:var(--green);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  color:var(--green);
  flex-shrink:0;
}

.ss-acc .ss-sub-item .arr polyline, .ss-acc .ss-sub-item .arr path {
  stroke:var(--green);
  fill:none
}

.ss-acc .ss-sub-item:hover {
  background:var(--surface-el);
  color:var(--text);
  padding-left:var(--w2-s4)
}

.ss-acc .ss-sub-item:hover .num {
  color:var(--text-mute)
}

.ss-acc .ss-sub-item:hover .arr {
  opacity:1;
  transform:translateX(0)
}

.ss-acc .ss-sub-item.active {
  background:var(--green-ghost);
  color:var(--green);
  font-weight:600;
}

.ss-acc .ss-sub-item.active .num {
  color:var(--green)
}

.ss-acc .ss-sub-item.active .arr {
  opacity:1;
  transform:translateX(2px)
}

/* ============ CENTER COLUMN: CONTENT ============ */
.ss-center {
  background:var(--bg);
  padding:var(--w2-s7) var(--w2-s7) var(--w2-s9);
  position:relative;
}

/* Section-switch: soft fade-up, no blur, starts from non-zero opacity to avoid perceptible "blink". */
.ss-center.ss-anim {
  animation:ss-center-in .36s cubic-bezier(.22,1,.36,1)
}

@keyframes ss-center-in {
  0% {
    opacity:.35;
    transform:translateY(6px)
  }

  100% {
    opacity:1;
    transform:translateY(0)
  }

}

/* Gentle stagger of subsection cards (subtle, only on section switch). */
.ss-center.ss-anim .ss-sub-block {
  animation:ss-block-in .38s cubic-bezier(.22,1,.36,1) both
}

.ss-center.ss-anim .ss-sub-block:nth-child(1) {
  animation-delay:.04s
}

.ss-center.ss-anim .ss-sub-block:nth-child(2) {
  animation-delay:.08s
}

.ss-center.ss-anim .ss-sub-block:nth-child(3) {
  animation-delay:.12s
}

.ss-center.ss-anim .ss-sub-block:nth-child(4) {
  animation-delay:.16s
}

.ss-center.ss-anim .ss-sub-block:nth-child(5) {
  animation-delay:.20s
}

.ss-center.ss-anim .ss-sub-block:nth-child(6) {
  animation-delay:.24s
}

.ss-center.ss-anim .ss-sub-block:nth-child(7) {
  animation-delay:.28s
}

.ss-center.ss-anim .ss-sub-block:nth-child(8) {
  animation-delay:.32s
}

@keyframes ss-block-in {
  0% {
    opacity:.5;
    transform:translateY(8px)
  }

  100% {
    opacity:1;
    transform:translateY(0)
  }

}

.ss-page-hero {
  margin-bottom:var(--w2-s7);
  padding-bottom:var(--w2-s5);
  border-bottom:1px solid var(--border);
}

.ss-page-eyebrow {
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:var(--w2-s3);
}

.ss-page-title {
  font:800 16px/1.15 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  letter-spacing:-.02em;
  color:var(--text);
  margin-bottom:var(--w2-s2);
}

.ss-page-sub {
  color:var(--text-mute);
  font:400 14px/1.5 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  max-width:33vw
}

.ss-section {
  margin-bottom:var(--w2-s7);
  scroll-margin-top:var(--w2-s9);
}

.ss-section-head {
  display:flex;
  align-items:baseline;
  gap:var(--w2-s3);
  margin-bottom:var(--w2-s4);
}

.ss-section-idx {
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--green);
  letter-spacing:.08em;
}

.ss-section-title {
  font:700 14px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text);
  letter-spacing:-.005em;
}

.ss-section-hint {
  color:var(--text-dim);
  font:400 12px/1.4 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  margin-left:var(--w2-s3);
}

.ss-card {
  background:var(--surface-el);
  border:1px solid var(--border);
  border-radius:var(--w2-s3);
  padding:var(--w2-s5) var(--w2-s5);
  margin-bottom:var(--w2-s3);
}

.ss-row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--w2-s5);
  align-items:center;
  padding:var(--w2-s3) 0;
  border-bottom:1px dashed var(--border-dash);
}

.ss-row:last-child {
  border-bottom:0;
  padding-bottom:0
}

.ss-row:first-child {
  padding-top:0
}

.ss-row-lbl {
  display:flex;
  flex-direction:column;
  gap:var(--w2-s1);
  min-width:0
}

.ss-row-lbl-main {
  font:500 14px/1.3 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text)
}

.ss-row-lbl-sub {
  font:400 12px/1.4 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text-dim)
}

.ss-row-ctrl {
  display:flex;
  align-items:center;
  gap:var(--w2-s3);
  justify-content:flex-end
}

/* ============ CONTROLS ============ */
.inp {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--w2-s2);
  color:var(--text);
  font:500 14px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  padding:var(--w2-s2) var(--w2-s3);
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
  min-width:4.2vw;
  text-align:right;
}

.inp:focus {
  outline:0;
  border-color:var(--green);
  background:var(--surface-hi);
  box-shadow:0 0 0 3px var(--green-ghost)
}

.inp[type=number] {
  width:5.7vw;
  text-align:center;
  font-family:'JetBrains Mono',monospace;
  font-weight:600
}

.inp.wide {
  width:12.5vw;
  text-align:left
}

.inp-unit {
  display:flex;
  align-items:center;
  gap:var(--w2-s2);
  color:var(--text-dim);
  font:500 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  text-transform:uppercase;
  letter-spacing:.06em
}

.sel {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--w2-s2);
  color:var(--text);
  font:500 14px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  padding:var(--w2-s2) var(--w2-s7) var(--w2-s2) var(--w2-s3);
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C8F135' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .63vw center;
  background-size:.52vw;
  cursor:pointer;
  min-width:9.4vw;
}

.sel:focus {
  outline:0;
  border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-ghost)
}

/* Toggle */
/* Тоггл — фиксированные px, как у системных переключателей: vw-версия на
   телефоне сжималась до 9×5px и не нажималась пальцем */
.toggle {
  position:relative;
  display:inline-block;
  width:42px;
  height:24px;
  flex-shrink:0
}

.toggle input {
  display:none
}

.toggle .track {
  position:absolute;
  inset:0;
  background:var(--surface-hi);
  border:1px solid var(--border);
  border-radius:var(--w2-s9);
  transition:background-color .2s, border-color .2s;
  cursor:pointer;
}

.toggle .thumb {
  position:absolute;
  top:var(--w2-s1);
  left:var(--w2-s1);
  width:18px;
  height:18px;
  background:var(--text-mute);
  border-radius:50%;
  transition:left .2s cubic-bezier(.3,1.4,.6,1), background-color .2s, box-shadow .2s;
}

.toggle input:checked + .track {
  background:var(--green-ghost);
  border-color:var(--green)
}

.toggle input:checked + .track .thumb {
  left:var(--w2-s5);
  background:var(--green);
  box-shadow:0 0 6px var(--green-glow)
}

/* Range slider */
.slider {
  -webkit-appearance:none;
  appearance:none;
  width:max(150px,9.4vw);
  height:max(4px,.21vw);
  background:var(--surface-hi);
  border-radius:var(--w2-s1);
  outline:0;
  cursor:pointer
}

.slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:max(16px,.84vw);
  height:max(16px,.84vw);
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 max(8px,.52vw) var(--green-glow);
  cursor:pointer
}

.slider::-moz-range-thumb {
  width:max(14px,0.84vw);
  height:max(14px,0.84vw);
  border-radius:50%;
  background:var(--green);
  border:0;
  cursor:pointer
}

/* Segmented control */
.seg {
  display:inline-flex;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--w2-s2);
  padding:var(--w2-s1);
  gap:var(--w2-s1)
}

.seg-opt {
  padding:var(--w2-s2) var(--w2-s3);
  border-radius:var(--w2-s2);
  font:500 12px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text-mute);
  cursor:pointer;
  transition: color .12s, background-color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s;
  white-space:nowrap;
}

.seg-opt:hover {
  color:var(--text)
}

.seg-opt.active {
  background:var(--green);
  color:#000;
  font-weight:700
}

/* Buttons */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--w2-s2);
  padding:var(--w2-s3) var(--w2-s5);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--w2-s2);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.6);
  font:800 14px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s;
  cursor:pointer;
  clip-path:none;
}

.btn:hover {
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.8)
}

.btn.primary {
  background:rgba(200,241,53,.15);
  color:var(--green);
  border-color:rgba(200,241,53,.3)
}

.btn.primary:hover {
  background:rgba(200,241,53,.25);
  border-color:var(--green);
  box-shadow:0 0 16px rgba(200,241,53,.15)
}

.btn.ghost {
  background:transparent;
  border-color:rgba(255,255,255,.1)
}

.btn.ghost:hover {
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.04)
}

.btn.danger {
  border-color:rgba(241,70,44,.2);
  color:var(--error);
  background:rgba(241,70,44,.04);
  width:100%
}

.btn.danger:hover {
  background:rgba(241,70,44,.1);
  border-color:rgba(241,70,44,.4);
  box-shadow:0 0 12px rgba(241,70,44,.08)
}

.btn.sm {
  padding:var(--w2-s2) var(--w2-s3);
  font-size:12px
}

.btn svg {
  width:max(12px,0.7vw);
  height:max(12px,0.7vw);
  stroke:currentColor;
  stroke-width:2;
  fill:none
}

/* Chip */
.chip {
  display:inline-flex;
  align-items:center;
  gap:var(--w2-s2);
  padding:var(--w2-s1) var(--w2-s3);
  border:1px solid var(--border);
  border-radius:var(--w2-s9);
  font:500 12px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text-mute);
  transition: color .12s, background-color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s;
  cursor:pointer;
}

.chip:hover {
  border-color:var(--border-hi);
  color:var(--text)
}

.chip.active {
  border-color:var(--green);
  color:var(--green);
  background:var(--green-ghost)
}

.chip-x {
  color:var(--text-dim);
  font-size:14px;
  cursor:pointer
}

.chip-x:hover {
  color:var(--error)
}

@keyframes w2SettingsEnter {
  from {
    opacity:0;
    transform:translateY(var(--w2-s2));
  }

  to {
    opacity:1;
    transform:translateY(0);
  }
}

#screen-settings.active:not(.w2-no-enter) > .ss-left,
#screen-settings.active:not(.w2-no-enter) > .ss-center,
#screen-settings.active:not(.w2-no-enter) > .ss-right {
  animation:w2SettingsEnter 420ms ease-out both;
}

#screen-settings.active:not(.w2-no-enter) > .ss-center {
  animation-delay:80ms;
}

#screen-settings.active:not(.w2-no-enter) > .ss-right {
  animation-delay:160ms;
}

#screen-settings :is(button, .ss-section-head, .ss-sub-item, .seg-opt, .chip) {
  min-height:var(--w2-s8);
}

#screen-settings :is(.inp, .sel) {
  min-height:var(--w2-s8);
}

@media (max-width:900px) {
  .screen.screen-settings {
    grid-template-columns:1fr;
    min-height:auto;
  }

  .screen-settings .ss-left,
  .screen-settings .ss-center {
    min-width:0;
    max-width:100%;
  }

  .screen-settings .ss-right {
    display:none;
  }

  .screen-settings .ss-left {
    padding:var(--w2-s7) var(--w2-s4) var(--w2-s3);
    border-right:0;
    border-bottom:1px solid var(--w2-line);
  }

  .screen-settings .ss-center {
    padding:var(--w2-s6) var(--w2-s4) var(--w2-s9);
  }

  .ss-acc {
    margin:0;
    padding-bottom:var(--w2-s2);
    display:flex;
    flex-direction:row;
    gap:var(--w2-s2);
    overflow-x:auto;
    scrollbar-width:none;
  }

  .ss-acc::-webkit-scrollbar {
    display:none;
  }

  .ss-acc-indicator,
  .ss-acc .ss-section-chev,
  .ss-acc .ss-section-subs {
    display:none;
  }

  .ss-acc .ss-section {
    flex:0 0 auto;
    border:1px solid var(--w2-line);
    border-radius:var(--w2-s8);
  }

  .ss-acc .ss-section.active-section {
    border-color:rgba(200,241,53,.38);
    background:rgba(200,241,53,.07);
  }

  .ss-acc .ss-section-head {
    display:flex;
    grid-template-columns:none;
    padding:var(--w2-s2) var(--w2-s3);
  }

  .ss-page-sub {
    max-width:none;
  }
}

@media (max-width:500px) {
  /* Числовые поля обрезали значение (+12), а зона касания слайдера была 4 px:
     дорожка остаётся тонкой, высоту добирает прозрачный padding. */
  .ss-row-ctrl > .inp {
    min-width:var(--w2-s9);
  }

  .ss-row-ctrl.hstack > .slider {
    min-height:var(--w2-s8);
    padding:var(--w2-s4) 0;
    background-clip:content-box;
  }


  .screen-settings .ss-left {
    padding:var(--w2-s6) var(--w2-s3) var(--w2-s2);
  }

  .screen-settings .ss-center {
    padding:var(--w2-s5) var(--w2-s3) var(--w2-s9);
  }

  .ss-card {
    padding:var(--w2-s4);
    border-radius:var(--w2-s4);
  }

  .ss-row {
    grid-template-columns:1fr;
    gap:var(--w2-s3);
  }

  .ss-row-ctrl {
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  .inp.wide,
  .sel {
    width:100%;
    min-width:0;
  }
}

@media (prefers-reduced-motion:reduce) {
  #screen-settings *,
  #screen-settings *::before,
  #screen-settings *::after {
    scroll-behavior:auto;
    animation-duration:.01ms;
    animation-delay:0ms;
    transition-duration:.01ms;
  }
}