/* ControlDesk — слой «жидкое стекло» (стиль iOS 26) поверх палитры TanVelor.
   Цвета не новые: стекло — это те же поверхности из tokens.css (--surface, --surface-2, --text, --accent), сделанные
   полупрозрачными. Белый основной цвет TanVelor остаётся у главных кнопок и выбранных пунктов; цвет — только в статусах.
   Подключается после app.css и apps.css и ничего не ломает без поддержки backdrop-filter (см. @supports в конце). */

:root {
  --g-blur: 22px;
  --g-sat: 1.6;
  --g-r-s: 14px;  --g-r-m: 20px;  --g-r-l: 28px;  --g-r-pill: 999px;
  --g-spring: cubic-bezier(0.32, 0.72, 0, 1);          /* затухающая пружина без отскока: отклик + спокойная остановка */
  --g-spring-bounce: cubic-bezier(0.34, 1.4, 0.64, 1); /* лёгкий отскок — только для выбора пункта */
}
:root, :root[data-theme="dark"], :root[data-theme="tanvelor"] {
  --glass: color-mix(in srgb, var(--surface-2) 52%, transparent);
  --glass-strong: color-mix(in srgb, var(--surface-2) 74%, transparent);
  --glass-edge: rgba(255, 255, 255, 0.16);
  --glass-edge-low: rgba(255, 255, 255, 0.04);
  --glass-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.35);
  --g-glow-a: rgba(255, 255, 255, 0.07);
  --g-glow-b: rgba(255, 255, 255, 0.04);
}
:root[data-theme="light"] {
  --glass: color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-strong: color-mix(in srgb, var(--surface) 80%, transparent);
  --glass-edge: rgba(255, 255, 255, 0.9);
  --glass-edge-low: rgba(22, 22, 22, 0.06);
  --glass-shadow: 0 10px 28px -12px rgba(22, 22, 22, 0.28), 0 2px 5px rgba(22, 22, 22, 0.08);
  --g-glow-a: rgba(255, 255, 255, 0.9);
  --g-glow-b: rgba(22, 22, 22, 0.05);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --glass: color-mix(in srgb, var(--surface) 62%, transparent);
    --glass-strong: color-mix(in srgb, var(--surface) 80%, transparent);
    --glass-edge: rgba(255, 255, 255, 0.9);
    --glass-edge-low: rgba(22, 22, 22, 0.06);
    --glass-shadow: 0 10px 28px -12px rgba(22, 22, 22, 0.28), 0 2px 5px rgba(22, 22, 22, 0.08);
    --g-glow-a: rgba(255, 255, 255, 0.9);
    --g-glow-b: rgba(22, 22, 22, 0.05);
  }
}

/* общая «материя»: размытие фона, яркая верхняя кромка (свет на стекле), тонкая нижняя */
.g, #topbar, #tabbar, .card, .sheet, .toast, .frame-badge .badge {
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
}

/* фон: спокойный объём, чтобы под стеклом было что размывать */
body, #app {
  background:
    radial-gradient(120% 60% at 15% -10%, var(--g-glow-a), transparent 60%),
    radial-gradient(90% 50% at 100% 110%, var(--g-glow-b), transparent 60%),
    var(--bg);
}

/* ---------- шапка и нижние разделы: плавающие капсулы ---------- */
#topbar {
  margin: calc(var(--safe-top) + 6px) var(--sp-2) 0;
  padding: 0 var(--sp-2) 0 var(--sp-4);
  min-height: 52px;
  border: 0; border-radius: var(--g-r-pill);
  background: var(--glass);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-edge-low), var(--glass-shadow);
}
.chip { border: 0; background: color-mix(in srgb, var(--text) 8%, transparent); box-shadow: inset 0 1px 0 var(--glass-edge-low); }

#tabbar {
  margin: var(--sp-2) var(--sp-2) calc(var(--safe-bottom) + 6px);
  padding: 4px; gap: 2px;
  border: 0; border-radius: var(--g-r-pill);
  background: var(--glass);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-edge-low), var(--glass-shadow);
}
.tab {
  min-height: 52px; border-radius: var(--g-r-pill); z-index: 0;
  transition: color var(--dur-1) var(--ease), background var(--dur-2) var(--g-spring), transform var(--dur-1) var(--ease);
}
.tab[aria-selected="true"] { color: var(--text); background: color-mix(in srgb, var(--text) 13%, transparent); box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-edge-low); }
.tab[aria-selected="true"]::before { display: none; }
.tab[aria-selected="true"] .ico { color: var(--accent); }
.tab:active { transform: scale(0.94); background: color-mix(in srgb, var(--text) 10%, transparent); }

@media (orientation: landscape) and (max-height: 520px) {
  #app { grid-template-columns: 92px minmax(0, 1fr); }
  #tabbar { margin: calc(var(--safe-top) + 6px) 0 6px var(--sp-2); border-radius: var(--g-r-l); }
  #topbar { margin-top: 6px; }
}

/* ---------- кнопки ---------- */
.btn {
  border-radius: var(--g-r-pill); min-height: var(--touch); padding: 0 var(--sp-4); border: 0;
  background: var(--glass);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-edge-low);
  transition: transform var(--dur-1) var(--g-spring), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.btn:active { transform: scale(0.95); background: var(--glass-strong); }              /* отклик на нажатие, а не на отпускание */
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.btn-primary:active { background: color-mix(in srgb, var(--accent) 86%, var(--bg)); }
.btn-danger { background: var(--danger-soft); box-shadow: inset 0 1px 0 var(--glass-edge-low), inset 0 0 0 1px color-mix(in srgb, var(--danger) 40%, transparent); }
.btn-quiet { box-shadow: none; }
.btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.btn-icon { width: var(--touch); min-width: var(--touch); padding: 0; }

/* ---------- карточки, плитки, поля ---------- */
.card {
  border: 0; border-radius: var(--g-r-m); background: var(--glass);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-edge-low), var(--glass-shadow);
}
.card-danger { background: color-mix(in srgb, var(--danger) 8%, var(--glass)); }
.tool {
  border: 0; border-radius: var(--g-r-m); min-height: 56px; background: var(--glass);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-edge-low);
  transition: transform var(--dur-1) var(--g-spring), background var(--dur-1) var(--ease);
}
.tool:active { transform: scale(0.95); background: var(--glass-strong); }
.tool[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border: 0; }
.tool[aria-pressed="true"] .ico { color: var(--accent-ink); }
.tool[disabled] { opacity: 0.4; }
.field {
  border: 0; border-radius: var(--g-r-m); background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--glass-edge-low), inset 0 2px 6px rgba(0, 0, 0, 0.12);
}
.field:focus { box-shadow: 0 0 0 2px var(--accent), inset 0 2px 6px rgba(0, 0, 0, 0.12); }
.key { border: 0; border-radius: var(--g-r-s); background: var(--glass); box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-edge-low); transition: transform var(--dur-1) var(--g-spring); }
.key:active { transform: scale(0.92); }
.key[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.badge { background: color-mix(in srgb, var(--text) 10%, transparent); box-shadow: inset 0 1px 0 var(--glass-edge-low); }

/* сегментный переключатель: выбранный пункт — стеклянная «таблетка» */
.seg { padding: 3px; border: 0; border-radius: var(--g-r-pill); background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-edge-low), inset 0 1px 0 var(--glass-edge); }
.seg button { border-radius: var(--g-r-pill); transition: background var(--dur-2) var(--g-spring), color var(--dur-1) var(--ease), transform var(--dur-1) var(--g-spring); }
.seg button:active { transform: scale(0.95); }
.seg button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.seg button[aria-checked="true"] .ico { color: var(--accent-ink); }

/* ---------- экран ПК ---------- */
.stage { padding: var(--sp-2); }
.link-frame { border-radius: var(--g-r-l); box-shadow: 0 14px 40px -16px rgba(0, 0, 0, 0.8), inset 0 0 0 1px var(--glass-edge-low); }
.frame-badge { left: var(--sp-3); top: var(--sp-3); }
.frame-badge .badge { background: rgba(14, 14, 14, 0.55); color: #F2F2F2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); min-height: 24px; padding: 0 var(--sp-3); }
.screen-overlay { border-radius: inherit; }
.screen-viewport { border-radius: inherit; }
.screen-viewport .roi-layer { z-index: 1; }
.controls { padding: 0 var(--sp-1); }
.bar-tools { gap: var(--sp-2); padding: var(--sp-1) var(--sp-2) var(--sp-2); }
.bar { padding: var(--sp-1) var(--sp-2); }

/* ---------- шторки и уведомления ---------- */
.sheet {
  border: 0; border-radius: var(--g-r-l) var(--g-r-l) 0 0;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(34px) saturate(1.8); backdrop-filter: blur(34px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 -18px 50px -16px rgba(0, 0, 0, 0.75);
}
.sheet-grabber { background: color-mix(in srgb, var(--text) 35%, transparent); }
.sheet-dock { margin: 0 var(--sp-2) calc(var(--safe-bottom) + 6px); border-radius: var(--g-r-l); box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-edge-low), var(--glass-shadow); }
.scrim { background: color-mix(in srgb, var(--scrim) 80%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.toast { border: 0; border-radius: var(--g-r-pill); padding: var(--sp-3) var(--sp-5); background: var(--glass-strong); box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow); }

/* ---------- выключатели и ползунки (как в iOS) ---------- */
.switch-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-2) var(--sp-4); border-radius: var(--g-r-m); background: var(--glass); box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-edge-low); position: relative; cursor: pointer; }
.switch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.switch-text small { font-size: var(--fs-xs); line-height: 1.3; }
.switch-row input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-ui { flex: none; width: 52px; height: 32px; border-radius: var(--g-r-pill); background: color-mix(in srgb, var(--text) 22%, transparent); position: relative; transition: background var(--dur-2) var(--g-spring); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); }
.switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; border-radius: 50%; background: #F8F8F6; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); transition: transform var(--dur-2) var(--g-spring-bounce); }
.switch-row input:checked ~ .switch-ui { background: var(--ok); }
.switch-row input:checked ~ .switch-ui::after { transform: translateX(20px); }
.switch-row input:active ~ .switch-ui::after { width: 34px; }
.switch-row input:checked:active ~ .switch-ui::after { transform: translateX(14px); }
.switch-row input:focus-visible ~ .switch-ui { outline: 2px solid var(--accent); outline-offset: 2px; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; touch-action: pan-y; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 20%, transparent); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 20%, transparent); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #F8F8F6; border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); transition: transform var(--dur-1) var(--g-spring); }
input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #F8F8F6; border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }

/* ---------- запасные варианты ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, :root[data-theme] { --glass: var(--surface-2); --glass-strong: var(--surface-2); }
}
@media (prefers-reduced-transparency: reduce) {
  :root, :root[data-theme] { --glass: var(--surface-2); --glass-strong: var(--surface-2); }
  .g, #topbar, #tabbar, .card, .sheet, .toast, .frame-badge .badge, .scrim { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --glass-edge: var(--line-strong); --glass-edge-low: var(--line-strong); }
  .btn, .card, .tool, .seg, .switch-row, .field, .key, #topbar, #tabbar, .sheet { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .tool, .tab, .key, .seg button, .switch-ui, .switch-ui::after, input[type="range"]::-webkit-slider-thumb { transition: opacity var(--dur-1) linear, background var(--dur-1) linear; }
  .btn:active, .tool:active, .tab:active, .key:active, .seg button:active { transform: none; }
}

/* ---------- панель управления экраном: всё в одну строку на узком телефоне ---------- */
.bar { gap: var(--sp-2); }
.bar .seg { flex: 1 1 auto; min-width: 0; }
.bar .seg button { min-width: 0; padding: 0 var(--sp-3); gap: 6px; font-size: 13px; }
.bar .seg .ico { width: 18px; height: 18px; }
.bar .btn { padding: 0 var(--sp-3); flex: none; }
.bar .btn-icon { padding: 0; }