/* ==================== ОКНО НАСТРОЕК ==================== */
.settings-modal{max-width:560px}
.settings-modal .color-picker-header{margin-bottom:1rem}
.st-sec{padding:1rem 0;border-top:2px solid var(--border-color);transition:opacity .2s}
.st-sec:first-of-type{border-top:0;padding-top:.25rem}
.st-h{margin:0 0 .75rem;font:400 .6rem 'SpatiumFont','Press Start 2P',monospace;text-transform:uppercase;color:var(--text-muted);letter-spacing:.04em}
.st-note{margin:.6rem 0 0;font-size:.8rem;line-height:1.4;color:var(--text-secondary)}
.st-pos-mobile{display:none}

/* карточки выбора стиля */
.st-styles{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.st-style{display:flex;flex-direction:column;align-items:stretch;gap:.45rem;text-align:left;padding:.65rem;cursor:pointer;
  background:var(--bg-surface-hover);color:var(--text-primary);border:2px solid var(--border-color);border-radius:0;font:inherit;
  box-shadow:inset 2px 2px 0 var(--bevel-hi),inset -2px -2px 0 var(--bevel-lo)}
.st-style:hover{border-color:var(--text-muted)}
.st-style.on{border-color:var(--border-focus);box-shadow:inset 2px 2px 0 var(--bevel-hi),inset -2px -2px 0 var(--bevel-lo),0 0 0 2px var(--accent-glow)}
.st-style b{font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:.4rem}
.st-style.on b::after{content:'\f00c';font:900 .75rem 'Font Awesome 6 Free';color:var(--accent)}
.st-style small{font-size:.74rem;line-height:1.35;color:var(--text-secondary)}
.st-prev{height:62px;display:block;position:relative;overflow:hidden;border:2px solid rgba(255,255,255,.1)}
/* превью «Сияние» */
.st-prev-base{background:#14161b}
.st-prev-base::before{content:'';position:absolute;left:-18px;top:-26px;width:90px;height:90px;border-radius:50%;background:#f2b441;filter:blur(24px);opacity:.55}
.st-prev-base i{position:absolute;left:12px;height:7px;background:rgba(236,234,228,.75)}
.st-prev-base i:nth-child(1){top:16px;width:46%}
.st-prev-base i:nth-child(2){top:30px;width:62%;background:rgba(236,234,228,.35)}
.st-prev-base i:nth-child(3){top:44px;width:30%;background:#f2b441}
/* превью «Светлая» */
.st-prev-light{background:#e8e9ec;border-color:rgba(20,22,27,.2)}
.st-prev-light::before{background:#d9822b;opacity:.45}
.st-prev-light i{background:rgba(25,27,32,.75)}
.st-prev-light i:nth-child(2){background:rgba(25,27,32,.35)}
.st-prev-light i:nth-child(3){background:#8f4f00}
/* превью «Spatium OS» */
.st-prev-os{background:#001100;color:#33ff33;font:400 .6rem 'Press Start 2P',monospace;padding:.7rem .6rem;text-shadow:0 0 6px rgba(51,255,51,.7);
  background-image:linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,.35) 50%);background-size:100% 4px;border-color:rgba(51,255,51,.35)}
.st-prev-os::after{content:'';display:inline-block;width:.5em;height:.8em;margin-left:.25em;background:#33ff33;vertical-align:-.1em;animation:stBlink 1s steps(2) infinite}
@keyframes stBlink{50%{opacity:0}}

/* сегментные переключатели */
.st-seg{display:inline-flex;max-width:100%;border:2px solid var(--border-color);background:var(--bg-base);box-shadow:inset 2px 2px 0 var(--bevel-lo)}
.st-seg button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.55rem .85rem;background:transparent;border:0;border-radius:0;
  color:var(--text-secondary);font:500 .85rem 'Onest',sans-serif;cursor:pointer;white-space:nowrap}
.st-seg button + button{border-left:2px solid var(--border-color)}
.st-seg button:hover{color:var(--text-primary);background:var(--bg-surface-hover)}
.st-seg button.on{background:var(--accent);color:#14161b}
:root[data-theme="light"] .st-seg button.on{color:#fff}
.st-seg button i{font-size:.85rem}
.st-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:.9rem}
.st-lbl{font-size:.9rem;color:var(--text-primary)}

/* раздел, не работающий в текущем стиле */
.st-dim > :not(.st-h):not(.st-note){opacity:.4;pointer-events:none;filter:grayscale(.6)}

.st-reset-all{margin-top:.5rem}

@media (max-width:820px){
  .settings-modal{width:calc(100vw - 1.5rem)}
  .st-styles{grid-template-columns:1fr}
  .st-pos-row{display:none}
  .st-pos-mobile{display:block;margin:0 0 .9rem}
  .st-seg{display:flex;width:100%}
  .st-seg button{flex:1;padding:.7rem .4rem}
}

/* компактный выбор цвета свечения */
.st-color{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.st-color .preview-box{width:30px;height:30px;flex:none;border:2px solid var(--border-color)}
.st-color #hexInput{width:96px;padding:.45rem .55rem;background:var(--bg-base);color:var(--text-primary);border:2px solid var(--border-color);
  font:600 .85rem 'JetBrains Mono',monospace;text-transform:uppercase;outline:none}
.st-color #hexInput:focus{border-color:var(--border-focus)}
.st-swatches{display:flex;gap:.35rem;flex-wrap:wrap}
.st-sw{width:26px;height:26px;padding:0;border:2px solid var(--border-color);border-radius:0;background:var(--c);cursor:pointer}
.st-sw:hover{border-color:var(--text-primary);transform:translateY(-1px)}
.st-sw.on{border-color:var(--text-primary);box-shadow:0 0 0 2px var(--bg-base),0 0 0 4px var(--accent)}
.st-custom{margin-top:.7rem}
.st-custom summary{cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;padding:.35rem 0;color:var(--text-secondary);font-size:.85rem;list-style:none}
.st-custom summary::-webkit-details-marker{display:none}
.st-custom summary::after{content:'\f078';font:900 .65rem 'Font Awesome 6 Free';transition:transform .2s}
.st-custom[open] summary::after{transform:rotate(180deg)}
.st-custom summary:hover{color:var(--text-primary)}
.st-custom .color-picker-body{margin:.6rem 0 0}
.st-btns{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.8rem}
.st-btns > button{margin:0;width:100%}
@media (max-width:820px){.st-btns{grid-template-columns:1fr}}

/* ==================== ПЛАВНАЯ СМЕНА ЦВЕТА СВЕЧЕНИЯ ==================== */
/* Регистрируем цвета свечения как <color>, чтобы браузер мог плавно их переливать.
   У трёх пятен разная длительность: цвет «перетекает» волной, а не меняется разом. */
@property --glow-color-1{syntax:'<color>';inherits:true;initial-value:rgba(242,180,65,.6)}
@property --glow-color-2{syntax:'<color>';inherits:true;initial-value:rgba(242,180,65,.5)}
@property --glow-color-3{syntax:'<color>';inherits:true;initial-value:rgba(242,180,65,.4)}
:root{transition:--glow-color-1 .9s cubic-bezier(.4,0,.2,1),--glow-color-2 1.2s cubic-bezier(.4,0,.2,1),--glow-color-3 1.5s cubic-bezier(.4,0,.2,1)}
/* при перетаскивании колеса — почти без задержки */
:root.glow-live{transition:--glow-color-1 .12s linear,--glow-color-2 .18s linear,--glow-color-3 .24s linear}
/* мягкая вспышка при выборе цвета */
.glow-container.glow-pulse{animation:glowPulse 1.1s ease-out}
@keyframes glowPulse{0%{filter:brightness(1) saturate(1)}30%{filter:brightness(1.5) saturate(1.35)}100%{filter:brightness(1) saturate(1)}}
@media (prefers-reduced-motion:reduce){
  :root{transition:none}
  .glow-container.glow-pulse{animation:none}
}