/* Переключатель тем в меню (js/theme-switch.js): раскрывающийся блок «Тема», сетка из шести карточек с мини-превью.
   Превью рисует сама тема: data-theme на элементе переопределяет токены для его потомков,
   поэтому внутри .theme-preview все цвета, радиусы и толщины — свои, а не активной темы. */
.theme-menu > summary { list-style: none; width: 100%; }
.theme-menu > summary::-webkit-details-marker { display: none; }
.theme-menu > summary .theme-chev { margin-left: auto; transform: rotate(180deg); transition: transform var(--dur) var(--ease); }
.theme-menu[open] > summary .theme-chev { transform: none; }
.theme-menu .theme-current { width: 28px; flex: none; }
.theme-label { display: inline-flex; gap: var(--s1); }
.theme-label b { font-weight: var(--fw-semibold); color: var(--fg); }

.theme-set { margin: var(--s2) 0 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--s2);
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.theme-opt { position: relative; display: flex; flex-direction: column; gap: var(--s1); padding: var(--s1h);
  border: var(--border-w) solid var(--border); border-radius: var(--r); background: var(--surface-1);
  color: var(--fg-muted); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.theme-opt:hover { border-color: var(--border-strong); color: var(--fg); }
.theme-opt input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.theme-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
.theme-opt:has(input:focus-visible) { outline: var(--focus-w) solid var(--ring); outline-offset: var(--focus-offset); }
.theme-name { display: flex; align-items: center; justify-content: space-between; gap: var(--s1);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.2; }
.theme-name .icon { width: 14px; height: 14px; color: var(--accent); visibility: hidden; }
.theme-opt:has(input:checked) .theme-name .icon { visibility: visible; }
.theme-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* описание темы — для скринридера (aria-describedby) и подсказки title */
.theme-system { margin-top: var(--s2); padding: 0 var(--s3); }
.theme-system[hidden] { display: none; }

/* мини-превью: окно приложения — боковая полоса, карточка с текстом, кнопка и три точки статуса */
.theme-preview { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg);
  border: var(--border-w) solid var(--border-strong); border-radius: var(--r-sm); }
.theme-preview i { position: absolute; display: block; }
.tp-side { left: 0; top: 0; bottom: 0; width: 22%; background: var(--surface-1); border-right: var(--border-w) solid var(--border); }
.tp-nav { left: 4%; top: 18%; width: 14%; height: 8%; border-radius: var(--r-pill); background: var(--accent); }
.tp-nav2 { left: 4%; top: 34%; width: 14%; height: 8%; border-radius: var(--r-pill); background: var(--fg-muted); }
.tp-card { left: 28%; right: 6%; top: 14%; height: 44%; background: var(--surface-1); border: var(--border-w) solid var(--border-raised);
  border-radius: var(--r-xs); }
.tp-line { left: 33%; top: 24%; width: 38%; height: 7%; border-radius: var(--r-pill); background: var(--fg); }
.tp-line2 { left: 33%; top: 38%; width: 52%; height: 6%; border-radius: var(--r-pill); background: var(--fg-muted); }
.tp-btn { left: 28%; top: 66%; width: 26%; height: 16%; border-radius: var(--r-xs); background: var(--accent); }
.tp-dot1, .tp-dot2, .tp-dot3 { top: 71%; width: 7%; height: 7%; border-radius: 50%; }
.tp-dot1 { left: 62%; background: var(--success); }
.tp-dot2 { left: 72%; background: var(--warn); }
.tp-dot3 { left: 82%; background: var(--danger); }