@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ══════════════════════════════════════════════════════════════════════════
   CoreFlow Console — тема на токенах Nocturne с неоновой палитрой CoreFlow.
   Тёмная навигационная база #0b0e14 + акценты cyan/violet/magenta/lime/amber.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --color-bg: #0b0e14;
  --color-surface: #141826;
  --color-surface-2: #171c2b;
  --color-panel: rgba(20, 24, 40, 0.9);
  --color-text: #e9edf6;
  --color-divider: rgba(233, 237, 246, 0.09);

  /* Акцентная палитра CoreFlow — как токены, не литералы по месту. */
  --cf-cyan: #00f0ff;
  --cf-cyan-soft: #8de9ff;
  --cf-violet: #c9a8ff;
  --cf-magenta: #ff007a;
  --cf-magenta-soft: #ff8ec2;
  --cf-lime: #a6e04a;
  --cf-amber: #ffc46b;
  --color-accent: var(--cf-cyan-soft);

  /* Нейтральный ramp (Nocturne). */
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 0 0 1px rgba(0, 240, 255, 0.2), 0 30px 70px rgba(0, 0, 0, 0.6);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
}
a { color: var(--cf-cyan-soft); text-decoration: none; }
a:hover { color: #b9f2ff; }
::selection { background: rgba(0, 240, 255, 0.22); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #232839; border-radius: 6px; border: 2px solid var(--color-bg); }
::-webkit-scrollbar-thumb:hover { background: #2f3650; }

@keyframes cf-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cf-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--font-heading); font-weight: 500; font-size: 13px; line-height: 1.2;
  color: var(--color-text); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-md);
  padding: 9px 15px; transition: background .16s, color .16s, box-shadow .16s, transform .16s;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary {
  color: #071019; font-weight: 600;
  background: linear-gradient(135deg, var(--cf-cyan), var(--cf-cyan-soft));
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.28);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 26px rgba(0, 220, 255, 0.42); }
.btn-ghost { color: var(--cf-cyan-soft); box-shadow: inset 0 0 0 1px #2a3040; background: rgba(11, 14, 20, 0.4); }
.btn-ghost:hover { color: var(--color-text); box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.4); }
.btn-danger { color: var(--cf-magenta-soft); box-shadow: inset 0 0 0 1px rgba(255, 0, 122, 0.35); background: rgba(255, 0, 122, 0.08); }
.btn-danger:hover { background: rgba(255, 0, 122, 0.18); }

/* — inputs — */
.input {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  border: none; border-radius: var(--radius-md);
  background: rgba(11, 14, 20, 0.8); box-shadow: 0 0 0 1px #2a3040;
  color: var(--color-text); font: inherit; font-size: 13.5px; outline: none;
  transition: box-shadow .16s;
}
.input:focus { box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.5); }
.input.mono { font-family: var(--font-mono); }
select.input { appearance: none; cursor: pointer; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-neutral-600);
}

/* — surfaces — */
.panel { padding: 20px 22px 22px; border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.card { border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }

/* — text helpers — */
.h-title { font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.025em; }
.mono { font-family: var(--font-mono); }
.kicker { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-neutral-600); }
.muted { color: var(--color-neutral-500); }
.muted-2 { color: var(--color-neutral-600); }
.muted-3 { color: var(--color-neutral-700); }

/* — pill — */
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px;
  border-radius: 999px; background: var(--color-panel); box-shadow: 0 0 0 1px #232839;
  font-size: 12px;
}
.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }

/* — dialog — */
.backdrop {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px;
  background: rgba(4, 6, 11, 0.66); backdrop-filter: blur(3px); animation: cf-in .18s ease both;
}
.dialog {
  width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px; padding: 24px 26px;
  border-radius: var(--radius-xl); background: linear-gradient(160deg, #171c2b, #101420 72%);
  box-shadow: var(--shadow-lg); animation: cf-in .24s ease both;
}
.dialog.wide { width: min(720px, 100%); }

/* — chips row — */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: none; border-radius: 999px; background: rgba(147, 151, 171, 0.08);
  box-shadow: 0 0 0 1px #2a3040; color: var(--color-neutral-400);
  font: inherit; font-size: 11px; cursor: pointer; transition: background .16s, color .16s;
}
.chip:hover { color: var(--color-text); }
.chip.on { background: rgba(0, 240, 255, 0.12); box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.4); color: var(--cf-cyan-soft); }

/* — toast — */
.toast-wrap { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: flex; flex-direction: column; gap: 10px; }
.toast {
  padding: 12px 16px; border-radius: var(--radius-md); background: linear-gradient(160deg, #1a2030, #12161f);
  box-shadow: var(--shadow-md); font-size: 13px; animation: cf-in .22s ease both; max-width: 340px;
}

/* — framework error styles (kept from template) — */
.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.validation-message { color: var(--cf-magenta-soft); font-size: 12px; }
#blazor-error-ui {
  color: #e9edf6; background: #171c2b; box-shadow: 0 -1px 6px rgba(0,0,0,.4);
  display: none; left: 0; padding: 0.8rem 1.2rem; position: fixed; bottom: 0; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }