/* Схема «Люкс»: один акцент, мягкие границы, гротеск для интерфейса,
   моноширинный шрифт только там, где цифры. Включается палитрой «Люкс»
   в настройках; переменные цветов задаёт themed() в app.mjs. */
[data-skin="lux"] {
  --font-ui: "Inter", "SF Pro Text", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --radius: 8px;
  --line: color-mix(in srgb, var(--fg) 9%, transparent);
}

/* Шрифт интерфейса: шапка, панели, меню, настройки. Цифры остаются mono. */
[data-skin="lux"] #toolbar,
[data-skin="lux"] #rail,
[data-skin="lux"] .panel-head,
[data-skin="lux"] .panel-note,
[data-skin="lux"] .panel-empty,
[data-skin="lux"] .mobile-nav,
[data-skin="lux"] .mobile-utilities,
[data-skin="lux"] .modal,
[data-skin="lux"] .settings-content,
[data-skin="lux"] .settings-nav,
[data-skin="lux"] .flow-controls,
[data-skin="lux"] .segmented,
[data-skin="lux"] .wl-regime,
[data-skin="lux"] .wl-check,
[data-skin="lux"] .signal-columns,
[data-skin="lux"] .event-columns,
[data-skin="lux"] .coin-columns,
[data-skin="lux"] .flow-columns,
[data-skin="lux"] #toasts,
[data-skin="lux"] .radial-menu,
[data-skin="lux"] .drawing-editor,
[data-skin="lux"] .account-card,
[data-skin="lux"] .help {
  font-family: var(--font-ui);
  letter-spacing: 0;
}
[data-skin="lux"] .tool { font-weight: 500; }
[data-skin="lux"] .panel-head { font-weight: 600; letter-spacing: 0.01em; }
[data-skin="lux"] .coin-columns,
[data-skin="lux"] .signal-columns,
[data-skin="lux"] .event-columns,
[data-skin="lux"] .flow-columns { text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; font-weight: 600; }
/* Цифры и тикеры — моноширинные, как и были. */
[data-skin="lux"] .coin-row,
[data-skin="lux"] .signal-row,
[data-skin="lux"] .compact-event,
[data-skin="lux"] .flow-row,
[data-skin="lux"] .chart-metrics,
[data-skin="lux"] .chart-title,
[data-skin="lux"] .density-chip,
[data-skin="lux"] .drawing-value,
[data-skin="lux"] .mobile-coin-picker,
[data-skin="lux"] #mobile-timeframe,
[data-skin="lux"] .tf-wide,
[data-skin="lux"] .compact-tf,
[data-skin="lux"] .wl-range { font-family: var(--font); }

/* Поверхности: скругления и тонкие границы вместо жёстких линий. */
[data-skin="lux"] .tools,
[data-skin="lux"] .tool,
[data-skin="lux"] .chart-card,
[data-skin="lux"] #panel,
[data-skin="lux"] .modal,
[data-skin="lux"] .drawing-dock,
[data-skin="lux"] .drawing-editor,
[data-skin="lux"] .mobile-nav button,
[data-skin="lux"] .mobile-sort-filter,
[data-skin="lux"] .mobile-sort-filter button,
[data-skin="lux"] .mobile-chart-selectors select,
[data-skin="lux"] .mobile-coin-picker,
[data-skin="lux"] .segmented,
[data-skin="lux"] .segmented button,
[data-skin="lux"] .primary-button,
[data-skin="lux"] select,
[data-skin="lux"] input[type="text"],
[data-skin="lux"] input[type="number"] { border-radius: var(--radius); }
[data-skin="lux"] .tool { border-radius: 6px; }
[data-skin="lux"] .chart-card,
[data-skin="lux"] #panel { border-color: var(--line); }
[data-skin="lux"] .drawing-dock,
[data-skin="lux"] .drawing-editor { background: color-mix(in srgb, var(--panel) 92%, transparent); border-color: var(--line); backdrop-filter: blur(8px); }
[data-skin="lux"] .modal { border-color: var(--line); box-shadow: 0 24px 80px #0008; }
[data-skin="lux"] .panel-head { background: transparent; border-bottom: 1px solid var(--line); }
[data-skin="lux"] .coin-columns,
[data-skin="lux"] .signal-columns,
[data-skin="lux"] .event-columns,
[data-skin="lux"] .flow-columns { background: transparent; border-bottom: 1px solid var(--line); }
[data-skin="lux"] .coin-row,
[data-skin="lux"] .signal-row,
[data-skin="lux"] .compact-event,
[data-skin="lux"] .flow-row { border-bottom-color: color-mix(in srgb, var(--fg) 4%, transparent); }
[data-skin="lux"] .chart-head { border-bottom: 1px solid var(--line); background: transparent; }

/* Один акцент: активное — синим, всё остальное монохромно. */
[data-skin="lux"] button.active,
[data-skin="lux"] #rail .tool.active,
[data-skin="lux"] .segmented button.active,
[data-skin="lux"] .mobile-nav button.active,
[data-skin="lux"] .settings-nav button.active,
[data-skin="lux"] .parity-settings .settings-nav > button.active { background: var(--active); color: var(--bright); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
[data-skin="lux"] .drawing-button.active { background: var(--accent); color: #fff; border-color: transparent; }
[data-skin="lux"] .radial-sector.active { fill: var(--accent); stroke: color-mix(in srgb, var(--accent) 70%, #fff); }
[data-skin="lux"] .radial-core { stroke: color-mix(in srgb, var(--accent) 50%, transparent); }
[data-skin="lux"] .primary-button { background: var(--accent); color: #fff; border: 0; }
[data-skin="lux"] .tool.account-tool.corner { background: var(--accent); }
[data-skin="lux"] .wl-pin.active,
[data-skin="lux"] .signal-n { color: var(--accent); }
[data-skin="lux"] .wl-row.pinned,
[data-skin="lux"] .signal-sum-row.active { box-shadow: inset 2px 0 0 var(--accent); }
[data-skin="lux"] .wl-pos i { background: var(--accent); }
[data-skin="lux"] .wl-regime[data-state="crash"] i { background: var(--accent); }
[data-skin="lux"] .chart-card.selected { border-color: var(--accent); }
[data-skin="lux"] .coin-row.focused { box-shadow: inset 2px 0 0 var(--accent); }

/* Движение: мягкие переходы. */
[data-skin="lux"] .tool,
[data-skin="lux"] button,
[data-skin="lux"] .coin-row,
[data-skin="lux"] .signal-row { transition: background-color .12s ease, color .12s ease, border-color .12s ease; }
[data-skin="lux"] .modal { animation: lux-modal .16s ease-out; }
@keyframes lux-modal { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { [data-skin="lux"] * { transition: none !important; animation: none !important; } }
[data-skin="lux"] :focus-visible { outline-color: var(--accent); }