:root{
  --bg:#0b1020;
  --card: rgba(255,255,255,.10);
  --border: rgba(255,255,255,.18);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --accent:#8b5cf6;     /* light purple */
  --accent2:#00b7ff;    /* cyan */
  --gold:#f0c84b;
}

*{ 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: var(--bg);
  color: var(--text);
}

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

/* shared language pill (copied from Moderator/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(240,200,75,.18); }

/* topbar */
.s-topbar{ position: sticky; top:0; z-index:50; backdrop-filter: blur(10px); background: rgba(255,255,255,.10); border-bottom: 1px solid rgba(255,255,255,.18); }
.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(240,200,75,.55); box-shadow: 0 18px 40px rgba(0,0,0,.40); }
.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(240,200,75,.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,.18); background: rgba(255,255,255,.10); border-radius: 18px; box-shadow: 0 18px 40px rgba(0,0,0,.22); backdrop-filter: blur(10px); }
.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; }
}