:root{
  --bg:#050b14;
  --card: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --accent:#1b78ff;
  --accent2:#00b7ff;
  --accent3:#8b5cf6;
  --gold:#67e8f9;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background:
    radial-gradient(760px 520px at 18% 4%, rgba(27, 120, 255, .28), transparent 60%),
    radial-gradient(700px 500px at 82% 12%, rgba(139, 92, 246, .18), transparent 62%),
    radial-gradient(620px 440px at 18% 92%, rgba(0, 183, 255, .12), transparent 58%),
    linear-gradient(180deg, #050b14, #071a38 52%, #050b14);
  color: var(--text);
}

a{ color: inherit; text-decoration:none; }
.container{ width: min(1100px, calc(100% - 40px)); margin: 0 auto; }

/* shared language pill (copied from A-Star Пеленг/Consult idea) */
.lang-pill{ position:relative; z-index:20; display:inline-flex; align-items:center; justify-content:flex-end; gap:10px; height:35px; padding:5px; border-radius:999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); width:35px; overflow:visible; }
.lang-current{ width:24px; height:24px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.25); color: rgba(255,255,255,.92); font-weight:900; font-size:11px; letter-spacing:.6px; cursor:pointer; }
.lang-options{ position:absolute; right: 44px; top: 50%; transform: translateY(-50%) translateX(8px); opacity:0; pointer-events:none; display:flex; gap:6px; padding:6px; border-radius:999px; background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); transition: opacity 180ms ease, transform 520ms cubic-bezier(.16, 1.4, .3, 1); }
.lang-pill.open .lang-options{ opacity:1; transform: translateY(-50%) translateX(0); pointer-events:auto; }
.lang-opt{ width:24px; height:24px; border-radius:999px; border:none; background: transparent; cursor:pointer; font-weight:900; font-size:11px; letter-spacing:.5px; color: rgba(255,255,255,.70); display:inline-flex; align-items:center; justify-content:center; }
.lang-opt:hover{ color: var(--gold); }
.lang-opt.active{ color: rgba(255,255,255,.95); background: rgba(0,183,255,.16); }

/* topbar */
.s-topbar{ position: sticky; top:0; z-index:50; backdrop-filter: blur(18px); background: rgba(5,11,20,.86); border-bottom: 1px solid rgba(255,255,255,.10); }
.s-topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding: 14px 0; }
.s-brand{ display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px; }
.s-brand img{ width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.18); transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.s-brand:hover img{ transform: translateY(-3px); border-color: rgba(0,183,255,.55); box-shadow: 0 18px 40px rgba(0,0,0,.40), 0 0 34px rgba(27,120,255,.18); }
.s-actions{ display:flex; align-items:center; gap:10px; }
.s-nav{ display:flex; gap:14px; flex-wrap:wrap; }
.s-nav a{ color: rgba(255,255,255,.82); font-weight:800; font-size:13px; }
.s-nav a:hover{ color: rgba(255,255,255,.95); text-decoration: underline; text-decoration-color: rgba(0,183,255,.9); text-underline-offset: 6px; }

.s-btn{ display:inline-flex; align-items:center; justify-content:center; height:38px; padding: 0 14px; border-radius: 12px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.10); color: rgba(255,255,255,.92); font-weight:900; font-size:13px; cursor:pointer; }
.s-btn--primary{ border:0; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 16px 30px rgba(0,0,0,.25); }

.s-card{ border:1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)); border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.34); backdrop-filter: blur(18px); }
.s-muted{ color: rgba(255,255,255,.70); }

@media (max-width: 720px){
  .container{ width: min(1100px, calc(100% - 26px)); }
  .s-topbar__inner{ flex-wrap: wrap; gap:10px; }
  .s-nav{ display:none; }
}