/* ============================================================
   EMBER — public site stylesheet (generated from Ember Design System)
   tokens + kit layout + component CSS, concatenated.
   ============================================================ */


/* ===== tokens/fonts.css ===== */
/* ============================================================
   EMBER — Fonts
   All from Google Fonts. Chosen for FULL Cyrillic (Ukrainian)
   support so headings render correctly in UA + EN.

   • Forum         — engraved Roman caps, epic/fantasy display
   • Manrope       — clean geometric sans, UI + body
   • JetBrains Mono — stats, rates, server numbers, timers
   ============================================================ */

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


/* ===== tokens/colors.css ===== */
/* ============================================================
   EMBER — Colors
   Dark gothic fantasy. Obsidian & forged stone base, ember-gold
   accent (the dying coal that never goes out), with cold steel,
   blood, jade and royal-gold supporting hues.
   ============================================================ */

:root {
  /* ---- Obsidian / ink (warm near-blacks, the canvas) ---- */
  --ink-950: #07060500;          /* helper only */
  --ink-900: #0B0A08;            /* page base */
  --ink-850: #100D0A;
  --ink-800: #15110D;            /* surface */
  --ink-700: #1E1813;            /* raised surface / cards */
  --ink-600: #281F18;            /* hover surface */
  --ink-500: #342820;            /* borders on dark */

  /* ---- Forged stone (neutral greys, warm) ---- */
  --stone-600: #4A4038;
  --stone-500: #5E5247;
  --stone-400: #786A5C;
  --stone-300: #998A78;
  --stone-200: #C2B5A3;          /* secondary text */
  --stone-100: #E4DACB;          /* parchment / primary text */
  --stone-050: #F5EFE3;          /* brightest text on dark */

  /* ---- Ember (primary accent: living coal) ---- */
  --ember-700: #8A2B08;
  --ember-600: #B43C0C;
  --ember-500: #E2570F;          /* core accent */
  --ember-400: #F97316;
  --ember-300: #FB9B4C;
  --ember-200: #FCC08A;

  /* ---- Amber / molten gold (glow, highlights) ---- */
  --amber-500: #D98A1E;
  --amber-400: #F5A524;
  --amber-300: #FBC768;

  /* ---- Royal gold (premium, rare, ornament) ---- */
  --gold-500: #B8902F;
  --gold-400: #E3B341;
  --gold-300: #F1D27A;

  /* ---- Blood (danger, PvP, sieges) ---- */
  --blood-600: #7E1416;
  --blood-500: #A81D1F;
  --blood-400: #D43232;

  /* ---- Steel (cold info / mana / links) ---- */
  --steel-500: #3E6E96;
  --steel-400: #5B95C0;
  --steel-300: #8FBEDE;

  /* ---- Jade (success / server online / nature) ---- */
  --jade-500: #2E8B5E;
  --jade-400: #45B07C;
  --jade-300: #7FD3A6;

  /* ============================================================
     SEMANTIC ALIASES — use these in product code
     ============================================================ */

  /* surfaces */
  --bg-base:        var(--ink-900);
  --bg-surface:     var(--ink-800);
  --bg-raised:      var(--ink-700);
  --bg-hover:       var(--ink-600);
  --bg-inset:       var(--ink-850);
  --bg-overlay:     rgba(7, 6, 5, 0.78);

  /* text */
  --text-primary:   var(--stone-100);
  --text-secondary: var(--stone-200);
  --text-muted:     var(--stone-400);
  --text-faint:     var(--stone-500);
  --text-on-accent: #1A0E05;
  --text-link:      var(--steel-300);

  /* accent */
  --accent:         var(--ember-500);
  --accent-bright:  var(--ember-400);
  --accent-hover:   var(--ember-400);
  --accent-press:   var(--ember-600);
  --accent-soft:    rgba(226, 87, 15, 0.14);
  --accent-line:    rgba(249, 115, 22, 0.45);

  /* borders */
  --border-subtle:  rgba(196, 181, 163, 0.10);
  --border-soft:    rgba(196, 181, 163, 0.16);
  --border-strong:  rgba(196, 181, 163, 0.30);
  --border-ember:   rgba(226, 87, 15, 0.55);
  --border-gold:    rgba(227, 179, 65, 0.50);

  /* status */
  --status-online:  var(--jade-400);
  --status-offline: var(--stone-500);
  --status-danger:  var(--blood-400);
  --status-warn:    var(--amber-400);
  --status-info:    var(--steel-400);
  --premium:        var(--gold-400);

  /* focus ring */
  --ring: rgba(249, 115, 22, 0.65);
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   EMBER — Typography
   Display: Forum (engraved caps). Body/UI: Manrope. Numeric: JetBrains Mono.
   ============================================================ */

:root {
  /* families */
  --font-display: 'Forum', 'Times New Roman', serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* fluid display scale (hero / section titles) */
  --fs-display-1: clamp(3.5rem, 6vw, 6rem);     /* @kind font */
  --fs-display-2: clamp(2.75rem, 4.5vw, 4.25rem); /* @kind font */
  --fs-display-3: clamp(2rem, 3vw, 2.75rem);    /* @kind font */

  /* static type scale */
  --fs-h1: 2.5rem;     /* @kind font */
  --fs-h2: 2rem;       /* @kind font */
  --fs-h3: 1.5rem;     /* @kind font */
  --fs-h4: 1.25rem;    /* @kind font */
  --fs-lg: 1.125rem;   /* @kind font */
  --fs-base: 1rem;     /* @kind font */
  --fs-sm: 0.875rem;   /* @kind font */
  --fs-xs: 0.75rem;    /* @kind font */
  --fs-2xs: 0.6875rem; /* @kind font */

  /* weights */
  --fw-regular: 400;   /* @kind font */
  --fw-medium: 500;    /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold: 700;      /* @kind font */
  --fw-extra: 800;     /* @kind font */

  /* line heights */
  --lh-tight: 1.08;    /* @kind font */
  --lh-snug: 1.28;     /* @kind font */
  --lh-normal: 1.55;   /* @kind font */
  --lh-relaxed: 1.7;   /* @kind font */

  /* letter spacing */
  --ls-display: 0.04em;   /* @kind font */
  --ls-heading: 0.01em;   /* @kind font */
  --ls-eyebrow: 0.22em;   /* @kind font */
  --ls-label: 0.06em;     /* @kind font */
  --ls-body: 0;           /* @kind font */
}

/* ---- Optional helper classes (consumers may use tokens directly) ---- */
.ember-display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}
.ember-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-bright);
}
.ember-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}
.ember-numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   EMBER — Spacing & layout
   8px base grid with a few half-steps for dense game UI.
   ============================================================ */

:root {
  --space-0: 0;
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* layout */
  --container-max: 1240px;   /* @kind spacing */
  --container-wide: 1440px;  /* @kind spacing */
  --gutter: clamp(1rem, 4vw, 3rem);      /* @kind spacing */
  --section-y: clamp(3.5rem, 8vw, 7rem); /* @kind spacing */

  /* control sizing */
  --control-h-sm: 32px;  /* @kind spacing */
  --control-h-md: 42px;  /* @kind spacing */
  --control-h-lg: 52px;  /* @kind spacing */
}


/* ===== tokens/effects.css ===== */
/* ============================================================
   EMBER — Effects: radii, borders, shadows, glows, textures
   Gothic = sharp-ish corners, heavy ambient shadow, ember glow
   on interactive/important elements, hairline metallic borders.
   ============================================================ */

:root {
  /* corner radii — restrained, forged not bubbly */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* border widths */
  --bw-hair: 1px;   /* @kind other */
  --bw-thick: 2px;  /* @kind other */

  /* ambient depth shadows (dark UI → deep & soft) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.62);
  --shadow-xl: 0 32px 80px rgba(0,0,0,0.7);

  /* ember glows — for CTAs, active states, rare items */
  --glow-ember-sm: 0 0 0 1px rgba(249,115,22,0.35), 0 0 16px rgba(226,87,15,0.35);
  --glow-ember-md: 0 0 0 1px rgba(249,115,22,0.45), 0 0 28px rgba(226,87,15,0.45);
  --glow-ember-lg: 0 0 40px rgba(249,115,22,0.5), 0 0 90px rgba(226,87,15,0.3);
  --glow-gold:     0 0 24px rgba(227,179,65,0.45);
  --glow-blood:    0 0 24px rgba(168,29,31,0.5);

  /* inset edge highlight (forged metal top-light) */
  --edge-top: inset 0 1px 0 rgba(255,255,255,0.06);  /* @kind shadow */
  --edge-inset: inset 0 1px 3px rgba(0,0,0,0.6);     /* @kind shadow */

  /* gradients */
  --grad-ember:   linear-gradient(135deg, #F97316 0%, #E2570F 48%, #B43C0C 100%); /* @kind color */
  --grad-ember-soft: linear-gradient(180deg, rgba(249,115,22,0.18), rgba(226,87,15,0.04)); /* @kind color */
  --grad-gold:    linear-gradient(135deg, #F1D27A 0%, #E3B341 45%, #B8902F 100%); /* @kind color */
  --grad-surface: linear-gradient(180deg, rgba(40,31,24,0.65), rgba(21,17,13,0.9)); /* @kind color */
  --grad-fade-up: linear-gradient(180deg, transparent 0%, var(--ink-900) 92%); /* @kind color */
  --grad-vignette: radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(7,6,5,0.85) 100%); /* @kind color */

  /* divider line with ember center (ornamental) */
  --rule-ember: linear-gradient(90deg, transparent, rgba(249,115,22,0.55), transparent); /* @kind color */

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-fast: 130ms;  /* @kind other */
  --dur: 220ms;       /* @kind other */
  --dur-slow: 420ms;  /* @kind other */

  /* z-index ladder */
  --z-nav: 100;       /* @kind other */
  --z-overlay: 800;   /* @kind other */
  --z-modal: 900;     /* @kind other */
  --z-toast: 1000;    /* @kind other */
}

/* subtle film-grain / forged-stone noise usable as a background overlay */
.ember-noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}


/* ===== tokens/base.css ===== */
/* ============================================================
   EMBER — base reset & primitives
   Light global resets only. Product code does layout.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
a:hover { color: var(--steel-300); }

::selection {
  background: var(--accent-soft);
  color: var(--stone-050);
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* themed scrollbar for the dark UI */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--stone-600) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--ink-500);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--stone-600); background-clip: content-box; }

/* ornamental ember rule */
.ember-rule {
  height: 1px;
  border: 0;
  background: var(--rule-ember);
}


/* ===== kit.css ===== */
/* Ember website UI-kit — layout & atmosphere helpers.
   References DS tokens from styles.css. Kit-only, not part of the token closure. */

.kit { min-height:100%; background:var(--bg-base); color:var(--text-primary); font-family:var(--font-body); }
.kit-wrap { max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter); }
.kit-wrap--wide { max-width:var(--container-wide); }

/* atmospheric obsidian backdrops */
.kit-atmo { position:relative; isolation:isolate; overflow:hidden; }
.kit-atmo::before { content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(249,115,22,0.20), transparent 55%),
    radial-gradient(90% 70% at 8% 110%, rgba(62,110,150,0.10), transparent 60%),
    var(--bg-base); }
.kit-atmo::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--grad-vignette); }
.kit-noise { position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:160px; opacity:0.05; mix-blend-mode:overlay; }

/* drifting embers */
.kit-embers { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.kit-ember { position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:radial-gradient(circle, #FBC768, #F97316); box-shadow:0 0 8px 1px rgba(249,115,22,.6);
  animation:kit-rise linear infinite; opacity:0; }
@keyframes kit-rise { 0%{ transform:translateY(0) translateX(0); opacity:0 }
  10%{ opacity:.9 } 90%{ opacity:.7 } 100%{ transform:translateY(-90vh) translateX(30px); opacity:0 } }
@media (prefers-reduced-motion:reduce){ .kit-ember{ animation:none; display:none; } }

/* nav */
.kit-nav { position:sticky; top:0; z-index:var(--z-nav); display:flex; align-items:center; gap:var(--space-6);
  height:68px; padding:0 var(--gutter); border-bottom:1px solid var(--border-subtle);
  background:rgba(11,10,8,0.72); backdrop-filter:blur(12px); }
.kit-logo { display:flex; align-items:center; gap:10px; cursor:pointer; }
.kit-logo img { height:34px; }
.kit-logo b { font-family:var(--font-display); font-size:24px; letter-spacing:.12em; color:var(--stone-050); font-weight:400; }
.kit-logo b i { color:var(--ember-400); font-style:normal; }
.kit-navlinks { display:flex; gap:2px; margin-left:8px; }
.kit-navlink { appearance:none; background:none; border:0; cursor:pointer; font-family:var(--font-body);
  font-size:14px; font-weight:600; color:var(--stone-300); padding:8px 13px; border-radius:var(--radius-sm);
  display:inline-flex; align-items:center; gap:7px; transition:color var(--dur), background var(--dur); }
.kit-navlink [data-lucide]{ width:15px; height:15px; }
.kit-navlink:hover { color:var(--stone-050); background:var(--accent-soft); }
.kit-navlink--active { color:var(--ember-300); }
.kit-nav__right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.kit-lang { display:inline-flex; border:1px solid var(--border-soft); border-radius:var(--radius-sm); overflow:hidden; }
.kit-lang button { appearance:none; background:none; border:0; cursor:pointer; font-family:var(--font-mono);
  font-size:11px; font-weight:700; color:var(--stone-400); padding:5px 8px; }
.kit-lang button.on { background:var(--accent-soft); color:var(--ember-300); }

/* generic section */
.kit-section { padding:var(--section-y) 0; }
.kit-eyebrow { font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ember-400); display:inline-flex; align-items:center; gap:9px; }
.kit-eyebrow::before { content:""; width:22px; height:1px; background:var(--accent-line); }
.kit-h2 { font-family:var(--font-display); font-size:clamp(2rem,3.6vw,3rem); letter-spacing:.03em;
  color:var(--stone-050); line-height:1.05; margin:14px 0 0; }
.kit-lead { color:var(--text-secondary); font-size:17px; line-height:1.6; max-width:60ch; margin-top:14px; }

/* footer */
.kit-footer { border-top:1px solid var(--border-subtle); background:var(--ink-850); padding:48px 0 32px; margin-top:40px; }
.kit-footer__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; }
.kit-footer h4 { font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--stone-300); margin:0 0 14px; }
.kit-footer a { display:block; color:var(--stone-400); font-size:14px; padding:5px 0; }
.kit-footer a:hover { color:var(--ember-300); }
.kit-footer__bottom { display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--border-subtle); margin-top:36px; padding-top:22px; color:var(--text-faint); font-size:13px; }

/* utility */
.kit-grid { display:grid; gap:var(--space-5); }
.kit-row { display:flex; gap:var(--space-3); align-items:center; }


/* ===== component core/Button ===== */
.ec-btn{
  --_bg:var(--grad-ember); --_fg:var(--text-on-accent); --_bd:transparent;
  font-family:var(--font-body); font-weight:700; letter-spacing:.03em;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  border:1px solid var(--_bd); border-radius:var(--radius-md); cursor:pointer;
  background:var(--_bg); color:var(--_fg); white-space:nowrap; text-decoration:none;
  padding:0 1.25em; height:var(--control-h-md); font-size:var(--fs-sm);
  box-shadow:var(--edge-top); transition:transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur) var(--ease-out), filter var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
  position:relative; user-select:none;
}
.ec-btn:hover{ filter:brightness(1.08); box-shadow:var(--glow-ember-md); }
.ec-btn:active{ transform:translateY(1px) scale(.985); filter:brightness(.95); }
.ec-btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.ec-btn[disabled]{ opacity:.45; cursor:not-allowed; filter:grayscale(.4); box-shadow:none; transform:none; }

.ec-btn--sm{ height:var(--control-h-sm); font-size:var(--fs-xs); padding:0 .9em; }
.ec-btn--lg{ height:var(--control-h-lg); font-size:var(--fs-base); padding:0 1.7em; }
.ec-btn--block{ display:flex; width:100%; }

.ec-btn--secondary{ --_bg:var(--ink-700); --_fg:var(--stone-100); --_bd:var(--border-strong); box-shadow:var(--edge-top); }
.ec-btn--secondary:hover{ --_bg:var(--ink-600); border-color:var(--border-ember); box-shadow:var(--edge-top); filter:none; color:var(--ember-200); }
.ec-btn--ghost{ --_bg:transparent; --_fg:var(--stone-200); --_bd:transparent; box-shadow:none; }
.ec-btn--ghost:hover{ --_bg:var(--accent-soft); --_fg:var(--ember-200); box-shadow:none; filter:none; }
.ec-btn--gold{ --_bg:var(--grad-gold); --_fg:#241803; }
.ec-btn--gold:hover{ box-shadow:var(--glow-gold); }
.ec-btn--danger{ --_bg:var(--blood-500); --_fg:#FBE9E9; }
.ec-btn--danger:hover{ --_bg:var(--blood-400); box-shadow:var(--glow-blood); filter:none; }


/* ===== component core/Badge ===== */
.ec-badge{
  display:inline-flex; align-items:center; gap:.4em; font-family:var(--font-body);
  font-weight:700; font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase;
  padding:.32em .65em; border-radius:var(--radius-sm); line-height:1;
  border:1px solid transparent; white-space:nowrap;
}
.ec-badge--ember{ background:var(--accent-soft); color:var(--ember-300); border-color:var(--accent-line); }
.ec-badge--gold{ background:rgba(227,179,65,.14); color:var(--gold-300); border-color:var(--border-gold); }
.ec-badge--blood{ background:rgba(168,29,31,.16); color:#F0A3A3; border-color:rgba(212,50,50,.45); }
.ec-badge--steel{ background:rgba(91,149,192,.14); color:var(--steel-300); border-color:rgba(91,149,192,.4); }
.ec-badge--jade{ background:rgba(69,176,124,.14); color:var(--jade-300); border-color:rgba(69,176,124,.4); }
.ec-badge--neutral{ background:var(--ink-600); color:var(--stone-200); border-color:var(--border-soft); }
.ec-badge--solid{ color:var(--text-on-accent); border:0; }
.ec-badge--solid.ec-badge--ember{ background:var(--grad-ember); }
.ec-badge--solid.ec-badge--gold{ background:var(--grad-gold); color:#241803; }
.ec-badge .ec-badge__dot{ width:.5em; height:.5em; border-radius:50%; background:currentColor; }


/* ===== component core/Avatar ===== */
.ec-avatar{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-md); overflow:hidden; background:var(--ink-700);
  border:1px solid var(--border-soft); color:var(--stone-200); font-family:var(--font-display);
  letter-spacing:.04em; flex:none; }
.ec-avatar img{ width:100%; height:100%; object-fit:cover; }
.ec-avatar--xs{ width:24px; height:24px; font-size:11px; }
.ec-avatar--sm{ width:32px; height:32px; font-size:13px; }
.ec-avatar--md{ width:44px; height:44px; font-size:17px; }
.ec-avatar--lg{ width:64px; height:64px; font-size:24px; border-radius:var(--radius-lg); }
.ec-avatar--ember{ border-color:var(--border-ember); box-shadow:var(--glow-ember-sm); }
.ec-avatar--gold{ border-color:var(--border-gold); box-shadow:var(--glow-gold); }
.ec-avatar__status{ position:absolute; right:-2px; bottom:-2px; width:34%; height:34%;
  min-width:9px; min-height:9px; border-radius:50%; border:2px solid var(--bg-base); }


/* ===== component core/IconButton ===== */
.ec-iconbtn{
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  background:transparent; color:var(--stone-200); border:1px solid transparent;
  border-radius:var(--radius-md); width:var(--control-h-md); height:var(--control-h-md);
  transition:background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ec-iconbtn svg, .ec-iconbtn i{ width:1.15em; height:1.15em; font-size:18px; }
.ec-iconbtn:hover{ background:var(--accent-soft); color:var(--ember-200); }
.ec-iconbtn:active{ transform:scale(.92); }
.ec-iconbtn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.ec-iconbtn[disabled]{ opacity:.4; cursor:not-allowed; }
.ec-iconbtn--sm{ width:var(--control-h-sm); height:var(--control-h-sm); }
.ec-iconbtn--sm svg, .ec-iconbtn--sm i{ font-size:15px; }
.ec-iconbtn--lg{ width:var(--control-h-lg); height:var(--control-h-lg); }
.ec-iconbtn--solid{ background:var(--ink-700); border-color:var(--border-soft); }
.ec-iconbtn--solid:hover{ border-color:var(--border-ember); }


/* ===== component data/Card ===== */
.ec-card{ position:relative; background:var(--grad-surface); border:1px solid var(--border-soft);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md), var(--edge-top); overflow:hidden;
  font-family:var(--font-body); transition:border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.ec-card--hover:hover{ border-color:var(--border-ember); box-shadow:var(--shadow-lg), var(--glow-ember-sm); transform:translateY(-2px); }
.ec-card--ember{ border-color:var(--border-ember); box-shadow:var(--shadow-md), var(--glow-ember-sm); }
.ec-card--gold{ border-color:var(--border-gold); box-shadow:var(--shadow-md), var(--glow-gold); }
.ec-card--flat{ background:var(--ink-800); box-shadow:none; }
.ec-card__topglow{ position:absolute; top:0; left:0; right:0; height:2px; background:var(--rule-ember); opacity:.8; }
.ec-card__media{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.ec-card__body{ padding:var(--space-5); }
.ec-card__header{ padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border-subtle);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.ec-card__title{ font-family:var(--font-display); font-size:var(--fs-h4); letter-spacing:.03em; color:var(--stone-050); }
.ec-card__footer{ padding:var(--space-4) var(--space-5); border-top:1px solid var(--border-subtle);
  display:flex; align-items:center; gap:var(--space-3); }


/* ===== component data/StatBlock ===== */
.ec-stat{ display:flex; flex-direction:column; gap:.3em; font-family:var(--font-body);
  padding:var(--space-4); background:var(--ink-800); border:1px solid var(--border-soft);
  border-radius:var(--radius-md); }
.ec-stat__label{ font-size:var(--fs-2xs); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--stone-400); display:flex; align-items:center; gap:.5em; }
.ec-stat__label [data-lucide], .ec-stat__label svg{ width:13px; height:13px; }
.ec-stat__value{ font-family:var(--font-mono); font-weight:700; font-size:var(--fs-h2); line-height:1; color:var(--stone-050);
  font-variant-numeric:tabular-nums; }
.ec-stat__value--ember{ color:var(--ember-400); }
.ec-stat__value--gold{ color:var(--gold-300); }
.ec-stat__value .unit{ font-size:.5em; color:var(--stone-400); margin-left:.25em; font-weight:500; }
.ec-stat__delta{ font-family:var(--font-mono); font-size:var(--fs-xs); display:inline-flex; align-items:center; gap:.3em; }
.ec-stat__delta--up{ color:var(--jade-400); }
.ec-stat__delta--down{ color:var(--blood-400); }


/* ===== component data/ProgressBar ===== */
.ec-progress{ font-family:var(--font-body); display:flex; flex-direction:column; gap:.45em; }
.ec-progress__top{ display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--stone-300); }
.ec-progress__top b{ font-family:var(--font-mono); color:var(--stone-100); font-weight:500; }
.ec-progress__track{ position:relative; height:10px; border-radius:var(--radius-pill);
  background:var(--bg-inset); border:1px solid var(--border-soft); box-shadow:var(--edge-inset); overflow:hidden; }
.ec-progress__fill{ position:absolute; inset:0 auto 0 0; border-radius:var(--radius-pill);
  background:var(--grad-ember); box-shadow:0 0 12px rgba(249,115,22,.5);
  transition:width var(--dur-slow) var(--ease-out); }
.ec-progress__fill::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.25),transparent 60%); }
.ec-progress--gold .ec-progress__fill{ background:var(--grad-gold); box-shadow:var(--glow-gold); }
.ec-progress--xp .ec-progress__fill{ background:linear-gradient(90deg,#45B07C,#7FD3A6); box-shadow:0 0 12px rgba(69,176,124,.5); }
.ec-progress--slim .ec-progress__track{ height:6px; }


/* ===== component forms/Input ===== */
.ec-field{ display:flex; flex-direction:column; gap:.55em; font-family:var(--font-body); }
.ec-field__label{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--stone-300); }
.ec-field__label .req{ color:var(--ember-400); margin-left:.2em; }
.ec-field__hint{ font-size:var(--fs-xs); color:var(--text-muted); }
.ec-field__hint--err{ color:#F0A3A3; }

.ec-input{
  font-family:var(--font-body); font-size:var(--fs-sm); color:var(--stone-100);
  background:var(--bg-inset); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  height:var(--control-h-md); padding:0 .85em; width:100%; box-shadow:var(--edge-inset);
  transition:border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.ec-input::placeholder{ color:var(--text-faint); }
.ec-input:hover{ border-color:var(--border-strong); }
.ec-input:focus{ outline:none; border-color:var(--border-ember); box-shadow:var(--edge-inset), 0 0 0 3px var(--accent-soft); background:var(--ink-850); }
.ec-input[disabled]{ opacity:.5; cursor:not-allowed; }
.ec-input--err{ border-color:rgba(212,50,50,.6); }
.ec-input--err:focus{ box-shadow:var(--edge-inset), 0 0 0 3px rgba(168,29,31,.25); }
textarea.ec-input{ height:auto; padding:.7em .85em; line-height:1.5; resize:vertical; min-height:5em; }

.ec-inputwrap{ position:relative; display:flex; align-items:center; }
.ec-inputwrap .ec-input__icon{ position:absolute; left:.85em; color:var(--stone-400); display:flex; pointer-events:none; }
.ec-inputwrap .ec-input__icon [data-lucide], .ec-inputwrap .ec-input__icon svg{ width:17px; height:17px; }
.ec-inputwrap .ec-input__icon ~ .ec-input{ padding-left:2.7em; }


/* ===== component forms/Select ===== */
.ec-selectwrap{ display:flex; flex-direction:column; gap:.4em; font-family:var(--font-body); }
.ec-selectwrap > .ec-field__label{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--stone-300); }
.ec-select{ position:relative; display:flex; align-items:center; }
.ec-select select{
  appearance:none; -webkit-appearance:none; font-family:var(--font-body); font-size:var(--fs-sm);
  color:var(--stone-100); background:var(--bg-inset); border:1px solid var(--border-soft);
  border-radius:var(--radius-md); height:var(--control-h-md); padding:0 2.4em 0 .85em; width:100%;
  box-shadow:var(--edge-inset); cursor:pointer;
  transition:border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.ec-select select:hover{ border-color:var(--border-strong); }
.ec-select select:focus{ outline:none; border-color:var(--border-ember); box-shadow:var(--edge-inset), 0 0 0 3px var(--accent-soft); }
.ec-select__chevron{ position:absolute; right:.8em; pointer-events:none; color:var(--stone-400);
  border-left:2px solid currentColor; border-bottom:2px solid currentColor; width:8px; height:8px;
  transform:rotate(-45deg); margin-top:-3px; }
.ec-select select[disabled]{ opacity:.5; cursor:not-allowed; }


/* ===== component forms/Checkbox ===== */
.ec-check{ display:inline-flex; align-items:flex-start; gap:.6em; cursor:pointer; font-family:var(--font-body);
  font-size:var(--fs-sm); color:var(--stone-200); user-select:none; line-height:1.4; }
.ec-check input{ position:absolute; opacity:0; width:0; height:0; }
.ec-check__box{ flex:none; width:20px; height:20px; margin-top:1px; border-radius:var(--radius-sm);
  background:var(--bg-inset); border:1px solid var(--border-strong); box-shadow:var(--edge-inset);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.ec-check--radio .ec-check__box{ border-radius:50%; }
.ec-check__box::after{ content:""; opacity:0; transition:opacity var(--dur-fast) var(--ease-out); }
.ec-check__box::after{ width:10px; height:6px; border-left:2px solid #1A0E05; border-bottom:2px solid #1A0E05; transform:rotate(-45deg) translateY(-1px); }
.ec-check--radio .ec-check__box::after{ width:8px; height:8px; border:0; border-radius:50%; background:#1A0E05; transform:none; }
.ec-check:hover .ec-check__box{ border-color:var(--border-ember); }
.ec-check input:checked + .ec-check__box{ background:var(--grad-ember); border-color:transparent; box-shadow:var(--glow-ember-sm); }
.ec-check input:checked + .ec-check__box::after{ opacity:1; }
.ec-check input:focus-visible + .ec-check__box{ outline:2px solid var(--ring); outline-offset:2px; }
.ec-check input:disabled ~ *{ opacity:.5; }
.ec-check input:disabled + .ec-check__box{ opacity:.5; }


/* ===== component forms/Switch ===== */
.ec-switch{ display:inline-flex; align-items:center; gap:.65em; cursor:pointer; font-family:var(--font-body);
  font-size:var(--fs-sm); color:var(--stone-200); user-select:none; }
.ec-switch input{ position:absolute; opacity:0; width:0; height:0; }
.ec-switch__track{ position:relative; width:42px; height:24px; border-radius:var(--radius-pill);
  background:var(--ink-600); border:1px solid var(--border-strong); box-shadow:var(--edge-inset);
  transition:background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); flex:none; }
.ec-switch__thumb{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:var(--stone-200); box-shadow:0 1px 3px rgba(0,0,0,.5);
  transition:transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out); }
.ec-switch:hover .ec-switch__track{ border-color:var(--border-ember); }
.ec-switch input:checked + .ec-switch__track{ background:var(--grad-ember); border-color:transparent; box-shadow:var(--glow-ember-sm); }
.ec-switch input:checked + .ec-switch__track .ec-switch__thumb{ transform:translateX(18px); background:#FFF3E2; }
.ec-switch input:focus-visible + .ec-switch__track{ outline:2px solid var(--ring); outline-offset:2px; }
.ec-switch input:disabled + .ec-switch__track{ opacity:.5; }


/* ===== component navigation/Tabs ===== */
.ec-tabs{ display:flex; gap:.25em; font-family:var(--font-body); border-bottom:1px solid var(--border-soft); }
.ec-tab{ position:relative; appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600; letter-spacing:.02em;
  color:var(--stone-400); padding:.85em 1.1em; display:inline-flex; align-items:center; gap:.5em;
  transition:color var(--dur) var(--ease-out); }
.ec-tab [data-lucide], .ec-tab svg{ width:16px; height:16px; }
.ec-tab::after{ content:""; position:absolute; left:.6em; right:.6em; bottom:-1px; height:2px;
  background:var(--grad-ember); border-radius:2px; opacity:0; transform:scaleX(.5);
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); box-shadow:0 0 10px rgba(249,115,22,.6); }
.ec-tab:hover{ color:var(--stone-100); }
.ec-tab--active{ color:var(--ember-300); }
.ec-tab--active::after{ opacity:1; transform:scaleX(1); }
.ec-tab__count{ font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--stone-500);
  background:var(--ink-700); padding:.15em .5em; border-radius:var(--radius-pill); }
.ec-tabs--pill{ border-bottom:0; gap:.4em; padding:.3em; background:var(--ink-800); border:1px solid var(--border-soft); border-radius:var(--radius-md); display:inline-flex; }
.ec-tabs--pill .ec-tab{ padding:.5em .9em; border-radius:var(--radius-sm); }
.ec-tabs--pill .ec-tab::after{ display:none; }
.ec-tabs--pill .ec-tab--active{ color:var(--stone-050); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent-line); }


/* ===== component feedback/Dialog ===== */
.ec-dialog__overlay{ position:fixed; inset:0; z-index:var(--z-modal); background:var(--bg-overlay);
  backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:var(--space-5);
  animation:ec-fade var(--dur) var(--ease-out); }
@keyframes ec-fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes ec-rise{ from{ opacity:0; transform:translateY(14px) scale(.98) } to{ opacity:1; transform:none } }
.ec-dialog{ position:relative; width:100%; max-width:var(--_w,460px); background:var(--grad-surface);
  border:1px solid var(--border-strong); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl), var(--edge-top); font-family:var(--font-body);
  animation:ec-rise var(--dur-slow) var(--ease-out); overflow:hidden; }
.ec-dialog__glow{ position:absolute; top:0; left:0; right:0; height:2px; background:var(--rule-ember); }
.ec-dialog__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-5) var(--space-5) var(--space-3); }
.ec-dialog__title{ font-family:var(--font-display); font-size:var(--fs-h3); letter-spacing:.03em; color:var(--stone-050); }
.ec-dialog__desc{ font-size:var(--fs-sm); color:var(--text-muted); margin-top:.35em; }
.ec-dialog__body{ padding:0 var(--space-5) var(--space-5); color:var(--text-secondary); font-size:var(--fs-sm); line-height:1.6; }
.ec-dialog__footer{ display:flex; justify-content:flex-end; gap:var(--space-3);
  padding:var(--space-4) var(--space-5); border-top:1px solid var(--border-subtle); background:rgba(0,0,0,.18); }
.ec-dialog__x{ appearance:none; background:none; border:0; color:var(--stone-400); cursor:pointer;
  font-size:22px; line-height:1; padding:2px 6px; border-radius:var(--radius-sm); transition:color var(--dur), background var(--dur); }
.ec-dialog__x:hover{ color:var(--ember-300); background:var(--accent-soft); }


/* ===== component feedback/Toast ===== */
@keyframes ec-toast-in{ from{ opacity:0; transform:translateX(20px) } to{ opacity:1; transform:none } }
.ec-toast{ display:flex; align-items:flex-start; gap:.75em; font-family:var(--font-body);
  background:var(--grad-surface); border:1px solid var(--border-strong); border-left-width:3px;
  border-radius:var(--radius-md); padding:.85em 1em; box-shadow:var(--shadow-lg); min-width:280px; max-width:380px;
  animation:ec-toast-in var(--dur-slow) var(--ease-out); }
.ec-toast__icon{ flex:none; width:20px; height:20px; display:flex; margin-top:1px; }
.ec-toast__icon [data-lucide], .ec-toast__icon svg{ width:20px; height:20px; }
.ec-toast__body{ flex:1; min-width:0; }
.ec-toast__title{ font-size:var(--fs-sm); font-weight:700; color:var(--stone-050); }
.ec-toast__msg{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:.2em; line-height:1.45; }
.ec-toast__x{ appearance:none; background:none; border:0; color:var(--stone-500); cursor:pointer; font-size:16px; line-height:1; padding:2px; }
.ec-toast__x:hover{ color:var(--stone-200); }
.ec-toast--success{ border-left-color:var(--jade-400); }
.ec-toast--success .ec-toast__icon{ color:var(--jade-400); }
.ec-toast--error{ border-left-color:var(--blood-400); }
.ec-toast--error .ec-toast__icon{ color:var(--blood-400); }
.ec-toast--info{ border-left-color:var(--steel-400); }
.ec-toast--info .ec-toast__icon{ color:var(--steel-400); }
.ec-toast--ember{ border-left-color:var(--ember-500); box-shadow:var(--shadow-lg), var(--glow-ember-sm); }
.ec-toast--ember .ec-toast__icon{ color:var(--ember-400); }
.ec-toaststack{ position:fixed; z-index:var(--z-toast); top:var(--space-5); right:var(--space-5);
  display:flex; flex-direction:column; gap:.7em; }


/* ===== component feedback/Tooltip ===== */
.ec-tip{ position:relative; display:inline-flex; }
.ec-tip__pop{ position:absolute; z-index:var(--z-toast); left:50%; bottom:calc(100% + 9px); transform:translateX(-50%) translateY(4px);
  background:var(--ink-950,#070605); background:#0a0806; border:1px solid var(--border-strong);
  color:var(--stone-100); font-family:var(--font-body); font-size:var(--fs-xs); line-height:1.4;
  padding:.5em .7em; border-radius:var(--radius-sm); white-space:nowrap; max-width:240px; white-space:normal;
  box-shadow:var(--shadow-lg); opacity:0; pointer-events:none;
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.ec-tip__pop::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#0a0806; }
.ec-tip:hover .ec-tip__pop, .ec-tip:focus-within .ec-tip__pop{ opacity:1; transform:translateX(-50%) translateY(0); }
.ec-tip--bottom .ec-tip__pop{ bottom:auto; top:calc(100% + 9px); transform:translateX(-50%) translateY(-4px); }
.ec-tip--bottom .ec-tip__pop::after{ top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:#0a0806; }
.ec-tip--bottom:hover .ec-tip__pop{ transform:translateX(-50%) translateY(0); }

/* ============================================================
   RESPONSIVE — планшет (≤1024) і телефон (≤640)
   ============================================================ */

/* жодного горизонтального скролу сторінки (clip не ламає sticky-навбар) */
html{ overflow-x:clip; }
body{ max-width:100%; overflow-x:clip; }

/* адаптивні сітки */
.kit-grid-2,.kit-grid-3,.kit-grid-4,.kit-grid-5{ display:grid; }
.kit-grid-2{ grid-template-columns:repeat(2,1fr); }
.kit-grid-3{ grid-template-columns:repeat(3,1fr); }
.kit-grid-4{ grid-template-columns:repeat(4,1fr); }
.kit-grid-5{ grid-template-columns:repeat(5,1fr); }
/* діти сіток можуть звужуватись (інакше довгий контент розпирає колонку) */
.kit-grid-2>*,.kit-grid-3>*,.kit-grid-4>*,.kit-grid-5>*,.kit-cabinet>*,.kit-split>*{ min-width:0; }

/* двоколонкові розкладки */
.kit-split{ display:grid; grid-template-columns:1.05fr .95fr; }
.kit-cabinet{ display:grid; grid-template-columns:260px 1fr; }

/* горизонтальний скрол для широких таблиць */
.kit-scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* мобільне меню навбару */
.kit-burger{ display:none; appearance:none; background:transparent; border:1px solid var(--border-soft);
  border-radius:var(--radius-sm); color:var(--stone-100); width:40px; height:40px;
  align-items:center; justify-content:center; cursor:pointer; }
.kit-burger [data-lucide], .kit-burger svg{ width:20px; height:20px; }
.kit-mobile-menu{ display:none; }

@media (max-width:1024px){
  .kit-grid-4{ grid-template-columns:repeat(2,1fr); }
  .kit-grid-5{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:900px){
  .kit-split{ grid-template-columns:1fr; }
  .kit-cabinet{ grid-template-columns:1fr; }
  .kit-cabinet > .ec-card{ position:static !important; }

  /* навбар → бургер */
  .kit-navlinks{ display:none !important; }
  .kit-nav__right .kit-lang, .kit-nav__right .kit-cta-desktop{ display:none !important; }
  .kit-burger{ display:inline-flex; }
  .kit-mobile-menu{ display:block; position:sticky; top:68px; z-index:90;
    background:rgba(11,10,8,.98); backdrop-filter:blur(12px); border-bottom:1px solid var(--border-subtle);
    padding:8px var(--gutter) 14px; }
  .kit-mobile-menu .kit-mm-link{ display:flex; align-items:center; gap:11px; width:100%;
    padding:13px 6px; color:var(--stone-200); font-family:var(--font-body); font-weight:600; font-size:15px;
    background:none; border:0; border-bottom:1px solid var(--border-subtle); cursor:pointer; text-align:left; }
  .kit-mobile-menu .kit-mm-link [data-lucide], .kit-mobile-menu .kit-mm-link svg{ width:17px; height:17px; }
  .kit-mobile-menu .kit-mm-actions{ display:flex; gap:10px; margin-top:12px; }

  /* приховуємо декоративні фігури, що вилазять */
  .kit-hide-mobile{ display:none !important; }
  .kit-cta-text, .kit-promo-text{ max-width:100% !important; }
}

@media (max-width:900px){
  /* екран входу/реєстрації не центруємо вертикально, щоб не різало контент */
  .kit-auth{ align-items:flex-start !important; min-height:0 !important; }
  .kit-footer__grid{ grid-template-columns:repeat(2,1fr) !important; row-gap:28px; }
}

@media (max-width:640px){
  .kit-grid-2,.kit-grid-3,.kit-grid-4,.kit-grid-5{ grid-template-columns:1fr; }
  .kit-footer__grid{ grid-template-columns:1fr !important; }

  /* ряди кнопок переносимо */
  .kit-row{ flex-wrap:wrap; }

  /* відлік — менші клітинки, з переносом */
  .kit-countdown{ flex-wrap:wrap; justify-content:center; gap:8px !important; }
  .kit-countdown > div > div:first-child{ font-size:2rem !important; min-width:64px !important; padding:12px 6px !important; }

  /* секції — менші вертикальні відступи */
  .kit-section{ padding:48px 0; }
}

/* ============================================================
   Rich-текст (правила, новини, статті)
   ============================================================ */
.kit-prose{ color:var(--text-secondary); font-size:16px; line-height:1.8; }
.kit-prose h2{ font-family:var(--font-display); color:var(--stone-050); font-size:1.6rem; letter-spacing:.02em; margin:1.7em 0 .5em; }
.kit-prose h3{ font-family:var(--font-display); color:var(--stone-100); font-size:1.25rem; margin:1.4em 0 .4em; }
.kit-prose p{ margin:0 0 1em; }
/* Порожній абзац з редактора = навмисний порожній рядок (інакше схлопується) */
.kit-prose p:empty{ min-height:1em; }
.kit-prose img{ max-width:100%; height:auto; }
.kit-prose ul,.kit-prose ol{ margin:0 0 1.1em; padding-left:1.4em; }
.kit-prose li{ margin:.4em 0; }
.kit-prose a{ color:var(--text-link); text-decoration:underline; }
.kit-prose strong{ color:var(--stone-100); }
.kit-prose hr{ border:0; height:1px; background:var(--rule-ember); margin:1.6em 0; }
.kit-prose blockquote{ border-left:3px solid var(--accent-line); margin:0 0 1em; padding:.2em 0 .2em 1em; color:var(--stone-200); }

/* ============================================================
   Бічне меню кабінету
   ============================================================ */
.cab-nav{ display:flex; flex-direction:column; gap:4px; padding:8px; }
.cab-nav form{ display:block; width:100%; }
.cab-nav__item{ display:flex; align-items:center; gap:11px; width:100%; padding:11px 13px;
  cursor:pointer; appearance:none; border:0; background:transparent; border-radius:var(--radius-md);
  font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--stone-300);
  text-align:left; position:relative; transition:background var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.cab-nav__item [data-lucide], .cab-nav__item svg{ width:17px; height:17px; color:var(--stone-400);
  transition:color var(--dur) var(--ease-out); flex:none; }
.cab-nav__item:hover{ background:var(--bg-hover); color:var(--stone-050); }
.cab-nav__item:hover [data-lucide], .cab-nav__item:hover svg{ color:var(--stone-100); }
.cab-nav__item--active{ background:var(--accent-soft); color:var(--ember-200); }
.cab-nav__item--active [data-lucide], .cab-nav__item--active svg{ color:var(--ember-400); }
.cab-nav__item--active::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius:0 3px 3px 0; background:var(--grad-ember); box-shadow:0 0 10px rgba(249,115,22,.6); }
.cab-nav__sep{ height:1px; background:var(--border-subtle); margin:6px 8px; }
.cab-nav__item--logout{ color:var(--stone-500); }
.cab-nav__item--logout:hover{ color:#F0A3A3; background:rgba(168,29,31,.12); }
.cab-nav__item--logout:hover [data-lucide], .cab-nav__item--logout:hover svg{ color:#F0A3A3; }