/* Спільні стилі сторінок кабінету: змінні, шапка, кнопки */
html, body { margin: 0; }
[hidden] { display: none !important; }
img { max-width: 100%; }

:root {
  color-scheme: dark;
  --bg: #0d121c;
  --surface: #121925;
  --line: #1a4a7a;
  --line-soft: rgba(26, 74, 122, .45);
  --glow: #3f95e0;
  --fg: #dce7f3;
  --muted: #7f93ab;
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --r: 14px;
}

* { box-sizing: border-box; }
body {
  background: linear-gradient(180deg, #1d2329 0, #191f27 13%, #151a22 27%, #10151f 40%, #0d121c 53%, #0d121c 100%) fixed;
  background-color: var(--bg);
  color: var(--fg);
  font: 400 17px/1.6 var(--body);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 20px; }

h1 { margin: 0; }
h2 { margin: 0; font: 600 clamp(24px, 3.4vw, 38px)/1.15 var(--display); }
code { font: 500 .9em var(--mono); color: var(--glow); background: rgba(26, 74, 122, .3); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.eyebrow { font: 500 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--glow); }

/* шапка */
header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: rgba(13, 18, 28, .78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 14px; }
.logo { display: flex; align-items: center; gap: 10px; font: 600 15px var(--display); letter-spacing: .02em; }
.logo i {
  width: 22px; height: 22px; border: 1px solid var(--glow); border-radius: 6px;
  transform: rotate(45deg); animation: spin 14s linear infinite;
  box-shadow: 0 0 14px rgba(63, 149, 224, .45), inset 0 0 8px rgba(63, 149, 224, .3);
}
nav { display: flex; gap: 6px; flex-wrap: wrap; }
nav a {
  padding: 7px 14px; border: 1px solid transparent; border-radius: 999px;
  color: var(--muted); font-size: 15px; transition: color .25s, border-color .25s, background .25s;
}
nav a:hover { color: var(--fg); border-color: var(--line); background: rgba(26, 74, 122, .18); }

/* кнопки */
.btn {
  position: relative; display: inline-block; overflow: hidden; isolation: isolate;
  padding: 14px 26px; border: 1px solid var(--line); border-radius: 10px;
  font: 600 15px var(--body); background: rgba(10, 17, 28, .8);
  transition: border-color .3s, box-shadow .3s, transform .2s;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--line), #24659f);
  transform: translateX(-101%); transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.btn:hover { border-color: var(--glow); box-shadow: 0 0 26px rgba(63, 149, 224, .28); }
.btn:hover::before { transform: none; }
.btn:active { transform: translateY(1px); }
.btn.main { border-color: var(--glow); box-shadow: 0 0 18px rgba(63, 149, 224, .22); }

@keyframes spin { to { transform: rotate(405deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}