/* Схема «Нуар» (базовые правила общие с «Люкс»): один акцент, мягкие границы, гротеск для интерфейса,
   моноширинный шрифт только там, где цифры. Включается палитрой «Люкс»
   в настройках; переменные цветов задаёт themed() в app.mjs. */
[data-skin="noir"] {
  --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="noir"] #toolbar,
[data-skin="noir"] #rail,
[data-skin="noir"] .panel-head,
[data-skin="noir"] .panel-note,
[data-skin="noir"] .panel-empty,
[data-skin="noir"] .mobile-nav,
[data-skin="noir"] .mobile-utilities,
[data-skin="noir"] .modal,
[data-skin="noir"] .settings-content,
[data-skin="noir"] .settings-nav,
[data-skin="noir"] .flow-controls,
[data-skin="noir"] .segmented,
[data-skin="noir"] .wl-regime,
[data-skin="noir"] .wl-check,
[data-skin="noir"] .signal-columns,
[data-skin="noir"] .event-columns,
[data-skin="noir"] .coin-columns,
[data-skin="noir"] .flow-columns,
[data-skin="noir"] #toasts,
[data-skin="noir"] .radial-menu,
[data-skin="noir"] .drawing-editor,
[data-skin="noir"] .account-card,
[data-skin="noir"] .help {
  font-family: var(--font-ui);
  letter-spacing: 0;
}
[data-skin="noir"] .tool { font-weight: 500; }
[data-skin="noir"] .panel-head { font-weight: 600; letter-spacing: 0.01em; }
[data-skin="noir"] .coin-columns,
[data-skin="noir"] .signal-columns,
[data-skin="noir"] .event-columns,
[data-skin="noir"] .flow-columns { text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; font-weight: 600; }
/* Цифры и тикеры — моноширинные, как и были. */
[data-skin="noir"] .coin-row,
[data-skin="noir"] .signal-row,
[data-skin="noir"] .compact-event,
[data-skin="noir"] .flow-row,
[data-skin="noir"] .chart-metrics,
[data-skin="noir"] .chart-title,
[data-skin="noir"] .density-chip,
[data-skin="noir"] .drawing-value,
[data-skin="noir"] .mobile-coin-picker,
[data-skin="noir"] #mobile-timeframe,
[data-skin="noir"] .tf-wide,
[data-skin="noir"] .compact-tf,
[data-skin="noir"] .wl-range { font-family: var(--font); }

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

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

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

/* «Нуар»: чистый чёрный, монохром, таблетки с мягкой обводкой и свечением. */
[data-skin="noir"] {
  --radius: 12px;
  --pill: 999px;
  --line: #262626;
  --glow: 0 0 0 1px #2a2a2a, 0 0 18px #ffffff0a inset;
}
[data-skin="noir"] body { background: #000; }
[data-skin="noir"] .tools { background: #0d0d0d; border: 1px solid #202020; border-radius: var(--pill); padding: 2px; height: 32px; }
[data-skin="noir"] .tool { border-radius: var(--pill); font-weight: 500; }
[data-skin="noir"] .tool:hover { background: #1a1a1a; color: #fff; }
[data-skin="noir"] button.active,
[data-skin="noir"] #rail .tool.active,
[data-skin="noir"] .segmented button.active,
[data-skin="noir"] .mobile-nav button.active,
[data-skin="noir"] .settings-nav button.active,
[data-skin="noir"] .parity-settings .settings-nav > button.active,
[data-skin="noir"] .toolbar-center .tool.active,
[data-skin="noir"] #toolbar .tool.active { background: #f2f2f2; color: #000; border-color: transparent; box-shadow: 0 0 14px #ffffff26; }
[data-skin="noir"] #toolbar .tool.active svg, [data-skin="noir"] .mobile-nav button.active svg { stroke: #000; }
[data-skin="noir"] .segmented { background: #0d0d0d; border: 1px solid #202020; border-radius: var(--pill); padding: 2px; }
[data-skin="noir"] .segmented button { border-radius: var(--pill); }
[data-skin="noir"] .mobile-nav button { border-radius: 14px; background: #0d0d0d; border: 1px solid #1c1c1c; }
[data-skin="noir"] .mobile-sort-filter, [data-skin="noir"] .mobile-coin-picker, [data-skin="noir"] .mobile-chart-selectors select { background: #0d0d0d; border: 1px solid #1c1c1c; border-radius: var(--pill); }
[data-skin="noir"] .mobile-sort-filter button { background: transparent; }
[data-skin="noir"] .chart-card, [data-skin="noir"] #panel { background: #0a0a0a; border: 1px solid #1f1f1f; border-radius: 14px; box-shadow: 0 0 0 1px #000, 0 10px 30px #0008; }
[data-skin="noir"] .drawing-dock, [data-skin="noir"] .drawing-editor { background: #0d0d0dee; border: 1px solid #262626; border-radius: var(--pill); box-shadow: var(--glow); backdrop-filter: blur(10px); }
[data-skin="noir"] .drawing-button { border-radius: var(--pill); }
[data-skin="noir"] .drawing-button.active { background: #f2f2f2; color: #000; box-shadow: 0 0 12px #ffffff33; }
[data-skin="noir"] .drawing-button.active svg { stroke: #000; }
[data-skin="noir"] .modal { background: #0a0a0a; border: 1px solid #262626; border-radius: 18px; box-shadow: 0 0 0 1px #000, 0 30px 90px #000c; }
[data-skin="noir"] .primary-button, [data-skin="noir"] .account-login, [data-skin="noir"] .account-logout { background: #0f0f0f; color: #fff; border: 1px solid #2e2e2e; border-radius: var(--pill); box-shadow: 0 0 0 1px #1a1a1a, 0 0 24px #ffffff0d inset; padding: 10px 22px; }
[data-skin="noir"] .primary-button:hover { background: #161616; border-color: #3a3a3a; }
[data-skin="noir"] .tool.account-tool.corner { background: #f2f2f2; color: #000; border-radius: var(--pill); box-shadow: 0 0 14px #ffffff26; }
[data-skin="noir"] .tool.account-tool.corner svg { stroke: #000; }
[data-skin="noir"] .tool.account-tool.corner.signed { box-shadow: 0 0 0 2px #0a0a0a inset, 0 0 14px #ffffff26; }
[data-skin="noir"] .radial-sector { fill: #0d0d0df2; stroke: #262626; }
[data-skin="noir"] .radial-sector.active { fill: #f2f2f2; stroke: #fff; }
[data-skin="noir"] .radial-item.active { color: #000; }
[data-skin="noir"] .radial-core { fill: #050505; stroke: #333; }
[data-skin="noir"] .wl-pin.active, [data-skin="noir"] .signal-n { color: #fff; }
[data-skin="noir"] .wl-row.pinned, [data-skin="noir"] .signal-sum-row.active, [data-skin="noir"] .coin-row.focused { box-shadow: inset 2px 0 0 #f2f2f2; }
[data-skin="noir"] .wl-pos i { background: #fff; }
[data-skin="noir"] .wl-regime[data-state="crash"] i { background: #fff; }
[data-skin="noir"] .chart-card.selected { border-color: #4a4a4a; }
[data-skin="noir"] .panel-head { border-bottom-color: #1a1a1a; }
[data-skin="noir"] .coin-columns, [data-skin="noir"] .signal-columns, [data-skin="noir"] .event-columns, [data-skin="noir"] .flow-columns { border-bottom-color: #1a1a1a; }
[data-skin="noir"] .coin-row:hover, [data-skin="noir"] .signal-row:hover, [data-skin="noir"] .compact-event:hover { background: #111; }
[data-skin="noir"] :focus-visible { outline-color: #8a8a8a; }

/* «Жидкое стекло»: мягкий свет в чёрном фоне и полупрозрачные панели с размытием. */
[data-skin="noir"] body {
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(255,255,255,0.075), transparent 60%),
    radial-gradient(800px 700px at 100% 110%, rgba(120,140,255,0.07), transparent 60%),
    radial-gradient(600px 500px at 60% 40%, rgba(255,255,255,0.025), transparent 60%),
    #000;
  background-attachment: fixed;
}
[data-skin="noir"] #mobile-shell { background: transparent; }
[data-skin="noir"] .chart-card,
[data-skin="noir"] #panel,
[data-skin="noir"] .modal,
[data-skin="noir"] .tools,
[data-skin="noir"] .segmented,
[data-skin="noir"] .mobile-nav button,
[data-skin="noir"] .mobile-sort-filter,
[data-skin="noir"] .mobile-coin-picker,
[data-skin="noir"] .mobile-chart-selectors select,
[data-skin="noir"] .drawing-dock,
[data-skin="noir"] .drawing-editor,
[data-skin="noir"] .primary-button,
[data-skin="noir"] .account-login,
[data-skin="noir"] .account-logout {
  background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 12px 32px rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
[data-skin="noir"] .chart-card, [data-skin="noir"] #panel { background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)); }
[data-skin="noir"] .modal { background: linear-gradient(180deg, rgba(20,20,22,0.82), rgba(10,10,12,0.9)); }
[data-skin="noir"] .panel-head, [data-skin="noir"] .chart-head { background: rgba(255,255,255,0.025); border-bottom-color: rgba(255,255,255,0.07); }
[data-skin="noir"] .coin-columns, [data-skin="noir"] .signal-columns, [data-skin="noir"] .event-columns, [data-skin="noir"] .flow-columns { background: transparent; border-bottom-color: rgba(255,255,255,0.07); }
[data-skin="noir"] .coin-row, [data-skin="noir"] .signal-row, [data-skin="noir"] .compact-event, [data-skin="noir"] .flow-row { border-bottom-color: rgba(255,255,255,0.04); }
[data-skin="noir"] .coin-row:hover, [data-skin="noir"] .signal-row:hover, [data-skin="noir"] .compact-event:hover, [data-skin="noir"] .tool:hover { background: rgba(255,255,255,0.06); }
[data-skin="noir"] .mobile-sort-filter button { background: transparent; }
[data-skin="noir"] .tool.account-tool.corner,
[data-skin="noir"] button.active,
[data-skin="noir"] #toolbar .tool.active,
[data-skin="noir"] .mobile-nav button.active,
[data-skin="noir"] .drawing-button.active,
[data-skin="noir"] .segmented button.active { background: linear-gradient(180deg, #ffffff, #e4e4e4); color: #000; box-shadow: 0 0 18px rgba(255,255,255,0.18), inset 0 1px 0 #fff; }
[data-skin="noir"] .radial-sector { fill: rgba(18,18,20,0.78); stroke: rgba(255,255,255,0.12); }
[data-skin="noir"] .radial-menu { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 50%; }
[data-skin="noir"] #toasts > * { background: rgba(20,20,22,0.8); border: 1px solid rgba(255,255,255,0.1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }