/* ============ CyberGaze Cloud — дизайн-токены и базовые стили ============ */
:root {
  --bg: #05070d;
  --bg-2: #0a0e1a;
  --bg-3: #0f1526;
  --surface: rgba(14, 20, 36, 0.78);
  --surface-solid: #0e1424;
  --surface-2: #141c31;
  --surface-3: #1a2440;
  --border: rgba(130, 160, 210, 0.13);
  --border-2: rgba(130, 160, 210, 0.24);
  --border-accent: rgba(56, 232, 255, 0.45);
  --text: #e8eefa;
  --text-2: #b8c2d8;
  --muted: #8591aa;
  --muted-2: #5c6882;
  --accent: #38e8ff;
  --accent-rgb: 56, 232, 255;
  --accent-2: #8b5cf6;
  --accent-2-rgb: 139, 92, 246;
  --accent-3: #ff5ea8;
  --ok: #22e39a;
  --ok-rgb: 34, 227, 154;
  --warn: #ffb547;
  --warn-rgb: 255, 181, 71;
  --danger: #ff4d6d;
  --danger-rgb: 255, 77, 109;
  --info: #5eb1ff;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Unbounded', 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --danger-text: #ff8aa0;
  --on-accent: #061018;
  --input-bg: rgba(5, 8, 16, .6);
  --inset-bg: rgba(5, 8, 16, .4);
  --nav-bg: rgba(5, 7, 13, .6);
  --code-bg: #040609;
  --code-text: #c9d4ea;
  --grid: rgba(130, 160, 210, .07);
  --fx-1: rgba(139, 92, 246, .22);
  --fx-2: rgba(56, 232, 255, .13);
  --fx-3: rgba(255, 94, 168, .07);
  --card-inset: inset 0 1px 0 rgba(255, 255, 255, .04);
  --radius: 18px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow: 0 20px 60px -20px rgba(0, 0, 0, .7), 0 0 0 1px var(--border);
  --glow: 0 0 40px -8px rgba(var(--accent-rgb), .55);
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f3f5fb;
  --bg-2: #e9edf6;
  --bg-3: #dfe5f1;
  --surface: rgba(255, 255, 255, .74);
  --surface-solid: #ffffff;
  --surface-2: #eef2f9;
  --surface-3: #e2e8f3;
  --border: rgba(20, 35, 70, .1);
  --border-2: rgba(20, 35, 70, .18);
  --border-accent: rgba(8, 145, 178, .5);
  --text: #0f1729;
  --text-2: #3b4760;
  --muted: #5f6b85;
  --muted-2: #8b95ab;
  --accent: #0891b2;
  --accent-rgb: 8, 145, 178;
  --accent-2: #7c3aed;
  --accent-2-rgb: 124, 58, 237;
  --accent-3: #db2777;
  --ok: #059669; --ok-rgb: 5, 150, 105;
  --warn: #d97706; --warn-rgb: 217, 119, 6;
  --danger: #dc2626; --danger-rgb: 220, 38, 38;
  --danger-text: #b91c1c;
  --info: #2563eb;
  --on-accent: #ffffff;
  --input-bg: #ffffff;
  --inset-bg: rgba(255, 255, 255, .65);
  --nav-bg: rgba(243, 245, 251, .78);
  --code-bg: #0f1729;
  --code-text: #d7e0f2;
  --grid: rgba(20, 35, 70, .06);
  --fx-1: rgba(124, 58, 237, .14);
  --fx-2: rgba(8, 145, 178, .12);
  --fx-3: rgba(219, 39, 119, .06);
  --card-inset: inset 0 1px 0 rgba(255, 255, 255, .8);
  --shadow: 0 14px 40px -18px rgba(15, 23, 41, .25), 0 0 0 1px var(--border);
  --glow: 0 10px 30px -12px rgba(var(--accent-rgb), .45);
  color-scheme: light;
}
html { transition: background .25s; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.15rem; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code, pre, kbd, .mono { font-family: var(--mono); font-size: .92em; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(var(--accent-rgb), .3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

/* фон: сетка + свечения + шум */
.bg-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(900px 500px at 15% -10%, var(--fx-1), transparent 60%),
    radial-gradient(800px 500px at 90% 10%, var(--fx-2), transparent 60%),
    radial-gradient(700px 600px at 50% 110%, var(--fx-3), transparent 60%),
    var(--bg);
}
.bg-fx::before { content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 75%); }
.bg-fx::after { content: ''; position: absolute; inset: -50%; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: noise 1.2s steps(2) infinite; }
@keyframes noise { 0% { transform: translate(0, 0); } 50% { transform: translate(-2%, 1%); } 100% { transform: translate(1%, -1%); } }
@media (prefers-reduced-motion: reduce) { .bg-fx::after, .logo-ring, .scan-arc { animation: none !important; } }

/* ---- кнопки ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.15rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); font-weight: 600; font-size: .92rem; cursor: pointer; white-space: nowrap;
  transition: transform .15s var(--ease), background .2s, border-color .2s, box-shadow .2s; text-decoration: none !important; line-height: 1.2; }
.btn:hover { background: var(--surface-3); border-color: rgba(var(--accent-rgb), .35); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: var(--on-accent); box-shadow: var(--glow), inset 0 1px 0 rgba(255,255,255,.25); position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-130%); transition: transform .7s var(--ease); pointer-events: none; }
.btn-primary:hover::after { transform: translateX(130%); }
.btn-primary:hover { filter: brightness(1.08) saturate(1.05); box-shadow: 0 0 50px -6px rgba(var(--accent-rgb), .6), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: rgba(130,160,210,.08); border-color: transparent; }
.btn-outline { background: transparent; border-color: var(--border-accent); color: var(--accent); }
.btn-outline:hover { background: rgba(var(--accent-rgb), .08); }
.btn-danger { background: rgba(var(--danger-rgb), .12); border-color: rgba(var(--danger-rgb), .35); color: var(--danger-text); }
.btn-danger:hover { background: rgba(var(--danger-rgb), .22); border-color: var(--danger); }
.btn-ok { background: rgba(var(--ok-rgb), .12); border-color: rgba(var(--ok-rgb), .35); color: var(--ok); }
.btn-ok:hover { background: rgba(var(--ok-rgb), .22); }
.btn-sm { padding: .45rem .8rem; font-size: .82rem; border-radius: 8px; }
.btn-lg { padding: .95rem 1.6rem; font-size: 1rem; border-radius: 12px; }
.btn-icon { padding: .5rem; width: 2.25rem; height: 2.25rem; }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* ---- карточки ---- */
.card { background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; position: relative; box-shadow: var(--card-inset); }
.card-glow { position: relative; }
.card-glow::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .5), transparent 40%, transparent 60%, rgba(var(--accent-2-rgb), .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* ---- бейджи ---- */
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600; letter-spacing: .02em; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.badge-ok { color: var(--ok); border-color: rgba(var(--ok-rgb), .35); background: rgba(var(--ok-rgb), .1); }
.badge-warn { color: var(--warn); border-color: rgba(var(--warn-rgb), .35); background: rgba(var(--warn-rgb), .1); }
.badge-danger { color: var(--danger-text); border-color: rgba(var(--danger-rgb), .35); background: rgba(var(--danger-rgb), .1); }
.badge-accent { color: var(--accent); border-color: rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .08); }
.badge-violet { color: #c4b5fd; border-color: rgba(var(--accent-2-rgb), .4); background: rgba(var(--accent-2-rgb), .12); }
.badge-muted { color: var(--muted); }
.badge .dot.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- формы ---- */
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label, .label { font-size: .8rem; font-weight: 600; color: var(--text-2); letter-spacing: .02em; }
.input, select.input, textarea.input { width: 100%; padding: .7rem .9rem; background: var(--input-bg); border: 1px solid var(--border-2); border-radius: var(--radius-sm); color: var(--text); outline: none; transition: border-color .2s, box-shadow .2s; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
.input::placeholder { color: var(--muted-2); }
.input.mono { font-family: var(--mono); font-size: .88rem; }
textarea.input { resize: vertical; min-height: 90px; }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238591aa' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.4rem; }
.hint { font-size: .78rem; color: var(--muted); }
.error-text { font-size: .82rem; color: var(--danger-text); }
.checkbox { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .9rem; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---- слайдер ---- */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) var(--pct, 50%), rgba(130,160,210,.18) var(--pct, 50%)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .2), 0 4px 14px rgba(0,0,0,.5); cursor: grab; transition: transform .15s; }
.range::-webkit-slider-thumb:hover { transform: scale(1.1); }
.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .2); cursor: grab; }

/* ---- утилиты ---- */
.container { width: min(1200px, 100% - 2rem); margin-inline: auto; }
.row { display: flex; align-items: center; gap: .75rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.grid { display: grid; gap: 1rem; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.accent { color: var(--accent); }
.ok { color: var(--ok); } .warn { color: var(--warn); } .danger { color: var(--danger-text); }
.gradient-text { background: linear-gradient(90deg, var(--accent), var(--accent-2) 60%, var(--accent-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--accent); }
.divider { height: 1px; background: var(--border); border: 0; margin: 1rem 0; }
.kbd { display: inline-block; padding: .1rem .4rem; border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: 5px; font-family: var(--mono); font-size: .78rem; background: var(--surface-2); }
.spinner { width: 1.1em; height: 1.1em; border: 2px solid rgba(var(--accent-rgb), .25); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; min-height: 1em; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---- логотип ---- */
.logo { display: inline-flex; align-items: center; gap: .65rem; color: var(--text); text-decoration: none !important; font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.logo-mark { width: 38px; height: 38px; flex: none; display: inline-flex; }
.logo-mark img { width: 100%; height: 100%; object-fit: contain; }
.logo-full { height: 38px; width: auto; max-width: 220px; object-fit: contain; }
.logo-sm .logo-mark { width: 30px; height: 30px; } .logo-sm .logo-full { height: 30px; }
.logo-mark .logo-ring { transform-origin: 50% 50%; animation: rotate 14s linear infinite; }
.logo-mark .scan-arc { transform-origin: 50% 50%; animation: rotate 3.2s linear infinite reverse; }
@keyframes rotate { to { transform: rotate(360deg); } }
.logo span b { color: var(--accent); font-weight: 700; }

/* ---- код-блок с копированием ---- */
.codeblock { position: relative; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .85rem 2.8rem .85rem 1rem; font-family: var(--mono); font-size: .82rem; line-height: 1.6; color: var(--code-text); overflow-x: auto; white-space: pre; }
.codeblock .copy-btn { position: absolute; top: .45rem; right: .45rem; color: #c9d4ea; }
.codeblock .c { color: var(--muted-2); } .codeblock .k { color: var(--accent); } .codeblock .s { color: #c4b5fd; }

/* ---- таблицы ---- */
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; padding: .6rem .75rem; border-bottom: 1px solid var(--border); }
.table td { padding: .7rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: rgba(130,160,210,.04); }
.table-wrap { overflow-x: auto; }

/* ---- прогресс ---- */
.meter { height: 8px; border-radius: 999px; background: rgba(130,160,210,.14); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .6s var(--ease); }
.meter.warn > span { background: linear-gradient(90deg, var(--warn), var(--accent-3)); }
.meter.danger > span { background: linear-gradient(90deg, var(--danger), var(--accent-3)); }

/* ---- скроллбары ---- */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--muted-2); }
@media (max-width: 640px) { body { font-size: 14.5px; } .container { width: min(1200px, 100% - 2rem); } }

/* ---- переключатель темы ---- */
.theme-toggle { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-2); display: inline-grid; place-items: center; cursor: pointer; transition: transform .2s var(--ease), color .2s; padding: 0; }
.theme-toggle svg { width: 18px; height: 18px; } .theme-toggle:hover { color: var(--accent); transform: rotate(15deg); }
/* ---- уровни инцидентов ---- */
.sev-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border-radius: 7px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.sev-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.sev-critical { background: rgba(var(--danger-rgb), .16); color: var(--danger-text); } .sev-high { background: rgba(var(--danger-rgb), .1); color: var(--danger-text); }
.sev-medium { background: rgba(var(--warn-rgb), .14); color: var(--warn); } .sev-low { background: rgba(130,160,210,.14); color: var(--text-2); } .sev-info { background: rgba(var(--accent-rgb), .12); color: var(--accent); }