/* ==========================================================================
   Leaders System — Design tokens
   Display: Golos Text (geometric, cyrillic-native)
   Body:    Inter
   ========================================================================== */

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

:root{
  --bg-0:#08090d;
  --bg-1:#0e0f16;
  --ink-0:#f5f6fa;
  --ink-1:#c7c9d6;
  --ink-2:#8b8e9f;
  --hairline:rgba(255,255,255,.10);
  --glass-fill:rgba(255,255,255,.055);
  --glass-fill-hi:rgba(255,255,255,.09);
  --glass-stroke:rgba(255,255,255,.14);
  --shadow-ambient:0 20px 60px -20px rgba(0,0,0,.6);

  /* faction accents */
  --c-central:#febd0b;
  --c-justice:#0b58fe;
  --c-defense:#94643d;
  --c-health:#e061b6;
  --c-street:#47a037;
  --c-syndicate:#a03a37;

  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;

  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ color-scheme:dark; }
body{
  margin:0;
  min-height:100svh;
  background:var(--bg-0);
  color:var(--ink-0);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Golos Text','Inter',sans-serif;
  letter-spacing:-.02em;
  margin:0;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:rgba(11,88,254,.35); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------------------------------------------------------------------- */
/* Atmosphere — plain dark backdrop, no faction colour bleed              */
/* ---------------------------------------------------------------------- */
.atmosphere{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:
    radial-gradient(ellipse 120% 70% at 50% -12%, #14151c 0%, var(--bg-0) 55%);
}
.blob{
  position:absolute;
  width:46vmax;
  height:46vmax;
  border-radius:50%;
  filter:blur(120px);
  opacity:.10;
  background:#1c2030;
  will-change:transform;
}
.blob--a{ top:-16%; left:-12%; animation:drift-a 40s ease-in-out infinite; }
.blob--b{ bottom:-20%; right:-10%; animation:drift-b 46s ease-in-out infinite; }
.blob--c{ display:none; }

@keyframes drift-a{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(4vmax,5vmax) scale(1.08); }
}
@keyframes drift-b{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-5vmax,-3vmax) scale(1.05); }
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------- */
/* Glass primitive                                                        */
/* ---------------------------------------------------------------------- */
.glass{
  position:relative;
  background:var(--glass-fill);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--glass-stroke);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-ambient), inset 0 1px 0 rgba(255,255,255,.10);
}
.glass::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(160deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

/* specular sheen that tracks the pointer, set via --mx/--my */
.sheen{
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s var(--ease-out);
  background:radial-gradient(480px circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.16), transparent 45%);
}
.glass:hover .sheen{ opacity:1; }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 26px;
  border-radius:999px;
  border:1px solid var(--glass-stroke);
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s var(--ease-out);
  user-select:none;
}
.btn:active{ transform:scale(.97); }
.btn-primary{
  background:linear-gradient(180deg, #5b6bfe, #0b58fe);
  border-color:rgba(255,255,255,.18);
  color:#fff;
  box-shadow:0 12px 30px -10px rgba(11,88,254,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{ box-shadow:0 16px 36px -8px rgba(11,88,254,.7), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-ghost{
  background:var(--glass-fill);
  color:var(--ink-0);
  backdrop-filter:blur(20px);
}
.btn-ghost:hover{ background:var(--glass-fill-hi); }
.btn[disabled]{ opacity:.55; pointer-events:none; }

.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation:spin .7s linear infinite;
  display:none;
}
.is-loading .spinner{ display:inline-block; }
.is-loading .btn-label{ opacity:.75; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------------------------------------------------------------------- */
/* App shell — sidebar + content (mobile-first)                           */
/* ---------------------------------------------------------------------- */
.app-shell{
  position:relative; z-index:2;
  display:flex;
  flex-direction:column;
  min-height:100svh;
}
.sidebar{
  width:100%;
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--hairline);
  border-right:none;
  background:rgba(255,255,255,.025);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  overflow-x:auto;
}
.sidebar-brand{ display:none; align-items:center; gap:10px; padding:2px 12px; flex-shrink:0; }
.sidebar-brand .brand-dot{ width:7px; height:7px; border-radius:50%; background:var(--c-justice); box-shadow:0 0 12px var(--c-justice); }
.sidebar-brand span{ font-size:13.5px; font-weight:600; letter-spacing:.03em; color:var(--ink-1); }

.sidebar-nav{ display:flex; flex-direction:row; gap:4px; }
.sidebar-nav a{
  display:flex; align-items:center; gap:13px;
  padding:9px 12px;
  border-radius:14px;
  font-size:14.5px; font-weight:500;
  color:var(--ink-2);
  white-space:nowrap;
  transition:background .3s var(--ease-out), color .3s var(--ease-out);
}
.sidebar-nav a svg{ width:18px; height:18px; flex-shrink:0; opacity:.9; }
.sidebar-nav a span{ display:none; }
.sidebar-nav a:hover{ background:var(--glass-fill); color:var(--ink-0); }
.sidebar-nav a.active{
  background:var(--glass-fill-hi);
  color:var(--ink-0);
  box-shadow:inset 0 0 0 1px var(--hairline);
}

.content{ flex:1; min-width:0; padding:26px 18px 56px; }

@media (min-width:861px){
  .app-shell{ flex-direction:row; }
  .sidebar{
    width:252px; flex-shrink:0;
    flex-direction:column; align-items:stretch; gap:30px;
    position:sticky; top:0; align-self:flex-start;
    height:100svh;
    padding:26px 16px;
    border-bottom:none;
    border-right:1px solid var(--hairline);
    overflow-x:visible;
  }
  .sidebar-brand{ display:flex; }
  .sidebar-nav{ flex-direction:column; gap:3px; }
  .sidebar-nav a{ padding:11px 14px; }
  .sidebar-nav a span{ display:inline; }
  .content{ padding:34px 40px 72px; }
}

/* ---------------------------------------------------------------------- */
/* Utility                                                                 */
/* ---------------------------------------------------------------------- */
.eyebrow{
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2);
}
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px;
  background:var(--glass-fill); border:1px solid var(--hairline);
  font-size:12.5px; font-weight:600; color:var(--ink-1);
}

/* ---------------------------------------------------------------------- */
/* Toggle switch (iOS-style)                                              */
/* ---------------------------------------------------------------------- */
.switch{
  position:relative;
  display:inline-block;
  width:42px; height:25px;
  flex-shrink:0;
}
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch .track{
  position:absolute; inset:0;
  background:rgba(255,255,255,.14);
  border:1px solid var(--hairline);
  border-radius:999px;
  transition:background .3s var(--ease-out), border-color .3s var(--ease-out);
}
.switch .thumb{
  position:absolute; top:2px; left:2px;
  width:19px; height:19px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  transition:transform .3s var(--ease-out);
}
.switch input:checked + .track{
  background:var(--sw-accent, var(--c-justice));
  border-color:transparent;
}
.switch input:checked + .track .thumb{ transform:translateX(17px); }
.switch input:disabled + .track{ opacity:.4; cursor:not-allowed; }