/* ── Настройки-хаб (лист 27, этап 1.3): секции 32 · строки 48 R12 · вагоны ── */

#stg-dialog{width:min(420px, calc(100vw - 24px)); max-width:min(420px, calc(100vw - 24px));
  border:none; background:var(--paper); border-radius:16px; padding:0; color:var(--graphite);}
#stg-dialog::backdrop{background:rgba(44,42,38,.3);}
#stg-dialog .stg-frame{position:relative; display:flex; flex-direction:column;
  max-height:min(680px, calc(100dvh - 48px)); padding:0 16px; overflow:hidden;}
#stg-dialog .stg-frame::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:16px; filter:url(#squiggle);}

.stg-head{display:flex; align-items:center; gap:8px; height:56px; flex:none;
  border-bottom:2px solid var(--graphite);}
.stg-head .ttl{font-family:'Caveat',cursive; font-weight:700; font-size:24px; flex:1;
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* вагоны второго уровня — translateX (канон 05·3) */
.stg-track{flex:1 1 auto; min-height:0; display:flex; width:600%;
  transition:transform .3s ease;}
@media (prefers-reduced-motion:reduce){ .stg-track{transition:none;} }
.stg-page{width:calc(100% / 6); flex:none; min-width:0; overflow-y:auto;
  overscroll-behavior:contain; padding:2px 2px 16px;
  display:flex; flex-direction:column; gap:8px;}

/* секция caps 32 · строки 48 R12 со значением справа 12 --meta (27·1) */
.stg-sec{min-height:32px; display:flex; align-items:flex-end; padding-bottom:6px;
  font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--meta);}
.stg-row{position:relative; display:flex; align-items:center; gap:12px; flex:none;
  min-height:48px; border-radius:12px; padding:0 12px 0 16px; text-align:left;
  background:var(--paper2); border:none; cursor:pointer;
  font-family:'Neucha',cursive; font-size:15px; color:var(--graphite);}
.stg-row::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:12px; filter:url(#squiggle);}
.stg-row:disabled{cursor:default;}
.stg-row .ic{width:20px; height:20px; flex:none; color:var(--graphite-soft);
  fill:none; stroke:currentColor; stroke-width:2;}
.stg-row .lb{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.stg-row .rv{flex:none; font-size:12px; color:var(--meta); max-width:40%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.stg-row .ch{width:16px; height:16px; flex:none; color:var(--pencil);
  fill:none; stroke:currentColor; stroke-width:2;}

/* карточка «кто»: аватар 40 · имя 15 · роль 12 --meta (строка 56, 27·1) */
.stg-who{position:relative; display:flex; align-items:center; gap:12px; flex:none;
  min-height:56px; border-radius:14px; padding:0 16px; background:var(--paper2);}
.stg-who::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:14px; filter:url(#squiggle);}
.stg-who .ava{width:40px; height:40px; flex:none;}
.stg-who .col{min-width:0;}
.stg-who .nm{font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.stg-who .rl{font-size:12px; color:var(--meta);}

/* сегмент 40 (тема / размер текста): маркер = актив */
.stg-seg{position:relative; display:flex; gap:4px; padding:4px; flex:none;
  min-height:40px; border-radius:10px; background:var(--paper2);}
.stg-seg::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:10px; filter:url(#squiggle);}
.stg-seg button{flex:1; min-width:0; border:none; background:none; cursor:pointer;
  border-radius:8px; font-family:'Neucha',cursive; font-size:13px; color:var(--meta);
  position:relative; z-index:0; padding:0 4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.stg-seg button.on{color:var(--graphite); font-family:'Caveat',cursive; font-weight:700;
  font-size:15px;}
.stg-seg button.on::before{content:""; position:absolute; inset:0; z-index:-1;
  background:var(--marker); border-radius:8px; transform:rotate(-1deg);}

/* подвал: «выйти» ghost 40 · «удалить аккаунт» red dashed 40 через 16 (закон) */
.stg-foot{margin-top:16px; display:flex; flex-direction:column; gap:8px; flex:none;}
.stg-ghost, .stg-danger{position:relative; min-height:40px; border-radius:10px;
  background:none; border:none; cursor:pointer; font-family:'Neucha',cursive;
  font-size:14px; color:var(--graphite);}
.stg-ghost::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--pencil); border-radius:10px; filter:url(#squiggle);}
.stg-danger{color:var(--red-t);}
.stg-danger::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--red); border-radius:10px; filter:url(#squiggle);}
.stg-danger.big{min-height:48px; border-radius:12px; font-size:15px;}
.stg-danger.big::before{border-radius:12px;}
.stg-danger:disabled{opacity:.45; cursor:default;}

/* вагон удаления: карта «что исчезнет» 152 R16 + слово-инпут 48 (27·3) */
.stg-card{position:relative; border-radius:16px; padding:14px 16px; flex:none;
  background:var(--paper2); display:flex; flex-direction:column; gap:6px;}
.stg-card::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:16px; filter:url(#squiggle);}
.stg-card .h{font-family:'Caveat',cursive; font-weight:700; font-size:17px;}
.stg-card ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:2px;}
.stg-card li{font-size:13px; color:var(--graphite-soft);}
.stg-card .g{font-size:12px; color:var(--ink-blue);}
.stg-word{min-height:48px; border:none; border-radius:12px; background:#fff;
  box-shadow:0 0 0 1.5px var(--pencil); padding:0 16px; font-family:'Neucha',cursive;
  font-size:15px; color:var(--graphite); flex:none;}
.stg-word:focus{outline:2px solid var(--marker); outline-offset:2px;
  box-shadow:0 0 0 2px var(--graphite);}
.stg-hint{font-size:12px; color:var(--meta); flex:none;}
.stg-hint.red{color:var(--red-t);}

/* превью размера текста (27·3): карточка 64 живёт под сегментом */
.stg-preview{position:relative; border-radius:16px; padding:12px 16px; flex:none;
  background:var(--paper2); display:flex; flex-direction:column; gap:2px;}
.stg-preview::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:16px; filter:url(#squiggle);}
.stg-preview .t{font-size:15px;}
.stg-preview .m{font-size:12px; color:var(--meta);}

/* тёмная: поверхности строк — карточный тон */
:root[data-theme="dark"] .stg-row,
:root[data-theme="dark"] .stg-who,
:root[data-theme="dark"] .stg-seg,
:root[data-theme="dark"] .stg-card,
:root[data-theme="dark"] .stg-preview{background:var(--card);}
:root[data-theme="dark"] .stg-word{background:var(--card); color:var(--graphite);}

/* ── матрица уведомлений (лист 27·2, N4): типы × (push · TG) ── */
.stg-nhead{display:flex; justify-content:flex-end; gap:8px; padding-right:12px;
  min-height:24px; align-items:flex-end;}
.stg-nhead span{width:40px; text-align:center; font-size:11px; letter-spacing:1px;
  text-transform:uppercase; color:var(--meta);}
.stg-nrow{position:relative; display:flex; align-items:center; gap:8px; flex:none;
  min-height:48px; border-radius:12px; padding:0 12px 0 16px; background:var(--paper2);}
.stg-nrow::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:12px; filter:url(#squiggle);}
.stg-nrow .lb{flex:1; min-width:0; font-size:15px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* тумблер 40×24 R6 — НЕ капсула (S25); ручка 16 R4, ход 16 */
.stg-sw{position:relative; width:40px; height:24px; flex:none; border:none;
  cursor:pointer; border-radius:6px; background:var(--paper);
  box-shadow:inset 0 0 0 1.5px var(--pencil); transition:background .15s ease;}
.stg-sw::after{content:""; position:absolute; left:4px; top:4px; width:16px; height:16px;
  border-radius:4px; background:var(--paper2);
  box-shadow:inset 0 0 0 1.5px var(--graphite-soft); transition:transform .15s ease;}
.stg-sw[aria-checked="true"]{background:var(--marker);
  box-shadow:inset 0 0 0 1.5px var(--graphite);}
.stg-sw[aria-checked="true"]::after{transform:translateX(16px);
  background:var(--graphite); box-shadow:none;}
@media (prefers-reduced-motion:reduce){ .stg-sw, .stg-sw::after{transition:none;} }
/* тихие часы: чип времени 32 R8 · инлайн-редактор двумя time-инпутами */
.stg-qchip{position:relative; flex:none; min-height:32px; padding:0 10px; border-radius:8px;
  background:var(--paper); border:none; cursor:pointer;
  font-family:'Neucha',cursive; font-size:12px; color:var(--graphite);}
.stg-qchip::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:8px; filter:url(#squiggle);}
.stg-qchip::after{content:""; position:absolute; inset:-4px;}   /* мишень 40 */
.stg-qedit{display:flex; gap:6px; align-items:center; flex:none;}
.stg-qedit input{min-height:32px; border:none; border-radius:8px; background:#fff;
  box-shadow:0 0 0 1.5px var(--pencil); padding:0 6px;
  font-family:'Neucha',cursive; font-size:13px; color:var(--graphite);}
/* состояние push-разрешения (G23) */
.stg-pstate{font-size:12px; color:var(--meta); flex:none;}
.stg-pstate.red{position:relative; color:var(--red-t); padding:8px 12px; border-radius:10px;}
.stg-pstate.red::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--red); border-radius:10px; filter:url(#squiggle);}
:root[data-theme="dark"] .stg-nrow{background:var(--card);}
:root[data-theme="dark"] .stg-sw{background:var(--card);}
:root[data-theme="dark"] .stg-qedit input{background:var(--card); color:var(--graphite);}

/* ── вагон «тариф» (лист 27·2, N3): карта плана · отмена/restore ── */
.stg-plancard{position:relative; margin:12px 0 8px; padding:16px; border-radius:16px;
  background:var(--paper2); display:flex; flex-direction:column; gap:4px;}
:root[data-theme="dark"] .stg-plancard{background:var(--card);}
.stg-plancard::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:16px; filter:url(#squiggle);}
.stg-plancard .nm{font-family:'Caveat',cursive; font-weight:700; font-size:24px;}
.stg-plancard .until{font-size:13px; color:var(--graphite-soft);}
.stg-plancard .until.off{color:var(--red-t);}
.stg-plan-restore, .stg-plan-cancel{
  position:relative; width:100%; min-height:40px; margin-top:8px; border:none;
  cursor:pointer; background:none; border-radius:10px;
  font-family:'Neucha',cursive; font-size:14px;
}
.stg-plan-restore{color:var(--graphite-soft);}
.stg-plan-restore::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite-soft); border-radius:10px; filter:url(#squiggle);}
.stg-plan-cancel{color:var(--red-t);}
.stg-plan-cancel::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--red); border-radius:10px; filter:url(#squiggle);}
.stg-plan-note{font-size:12px; color:var(--graphite-soft); margin-top:12px; line-height:1.4;}

/* вагон «⌚ часы и голос»: блок токена голосового ввода */
.stg-wtok{display:flex; flex-direction:column; gap:8px; flex:none;}
.stg-wtok-row{display:flex; gap:8px;}
.stg-wtok-row .stg-ghost, .stg-wtok-row .stg-danger{flex:1 1 auto; padding:0 12px;}
.stg-wtok-box{font-family:ui-monospace,Menlo,monospace; font-size:12px; line-height:1.5;
  word-break:break-all; user-select:all; -webkit-user-select:all;
  background:var(--paper2); border-radius:10px; padding:10px 12px;}