/* =====================================================================
   LucidPlexus Design System — one stylesheet for every page.
   v3 direction: soft violet, colorful icon tiles, serif editorial
   headlines, light top navbar, friendly gamification.

   Fonts are self-hosted (GDPR: no Google Fonts requests). Drop the
   woff2 files into /community/_shared/fonts/ — see DEPLOYMENT.md.
   Until then the system falls back to high-quality system stacks.
   ===================================================================== */

@font-face { font-family: 'Inter'; src: url('fonts/inter-var.woff2') format('woff2');
  font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('fonts/source-serif-var.woff2') format('woff2');
  font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight: 400 600; font-display: swap; }

:root {
  --bg:#f6f6fb; --surface:#fff;
  --ink:#171526; --body:#4a4762; --muted:#716d8a; --faint:#9d99b5;
  --line:#e9e8f3; --line-soft:#f2f1f8;
  --vio:#6a5cff; --vio-deep:#5747e6; --vio-soft:#f0eeff; --vio-mid:#d9d4ff;
  --grad:linear-gradient(120deg,#6a5cff,#9b5cf6);
  --grad-soft:linear-gradient(120deg,#f2efff,#fdf3ff);
  --green:#16a34a; --green-soft:#e9f9ef;
  --orange:#f59e0b; --orange-soft:#fef3e2; --orange-ink:#b45309;
  --pink:#ec4899; --pink-soft:#fdeef6;
  --cyan:#0891b2; --cyan-soft:#e6f7fb;
  --red:#e11d48; --red-soft:#fdeef1;
  --gold:#eab308;
  --r:16px; --r-sm:11px;
  --sans:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --sh:0 2px 6px rgba(35,28,88,.05),0 12px 30px -12px rgba(35,28,88,.10);
  --sh-lift:0 4px 10px rgba(35,28,88,.07),0 22px 44px -16px rgba(35,28,88,.18);
}

/* ---- Base ---- */
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--body); font-family:var(--sans);
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { color:var(--ink); margin:0; font-weight:700; letter-spacing:-.02em; }
a { color:inherit; text-decoration:none; }
a.link { color:var(--vio); font-weight:600; }
a.link:hover { text-decoration:underline; }
button { font-family:inherit; font-size:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea { font-family:inherit; font-size:14px; color:var(--ink); }
img { max-width:100%; }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px;
  border-radius:12px; font-weight:700; font-size:13.5px; border:1px solid transparent; transition:.15s; }
.btn-grad { background:var(--grad); color:#fff; box-shadow:0 8px 20px -6px rgba(106,92,255,.5); }
.btn-grad:hover { transform:translateY(-1px); box-shadow:0 12px 26px -6px rgba(106,92,255,.55); }
.btn-ghost { border-color:var(--line); background:var(--surface); color:var(--ink);
  box-shadow:0 1px 3px rgba(35,28,88,.06); }
.btn-ghost:hover { border-color:var(--vio-mid); color:var(--vio); }
.btn-soft { background:var(--vio-soft); color:var(--vio); }
.btn-danger { border:1px solid #f6c8d2; background:#fff; color:var(--red); }
.btn-lg { padding:13px 24px; font-size:14.5px; }
.btn-sm { padding:6px 12px; font-size:12.5px; border-radius:9px; }
.btn[disabled], .btn.disabled { opacity:.55; pointer-events:none; }

/* ---- Chips & tags ---- */
.chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  border-radius:999px; padding:4px 11px; }
.chip.vio { background:var(--vio-soft); color:var(--vio); }
.chip.green { background:var(--green-soft); color:var(--green); }
.chip.orange { background:var(--orange-soft); color:var(--orange-ink); }
.chip.pink { background:var(--pink-soft); color:var(--pink); }
.chip.cyan { background:var(--cyan-soft); color:var(--cyan); }
.chip.red { background:var(--red-soft); color:var(--red); }
.chip.line { background:#fff; border:1px solid var(--line); color:var(--muted); }
.vtick { color:var(--vio); font-size:13px; }

/* ---- Cards ---- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); }
.card-pad { padding:22px; }

/* ---- Topbar ---- */
.topbar { background:#fff; border-bottom:1px solid var(--line); padding:0 26px; height:62px;
  display:flex; align-items:center; gap:22px; position:sticky; top:0; z-index:100; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px; color:var(--ink); }
.topnav { display:flex; gap:4px; }
.topnav a { padding:8px 13px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--muted); }
.topnav a:hover { color:var(--ink); background:var(--line-soft); }
.topnav a.active { color:var(--vio); background:var(--vio-soft); }
.top-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.coins-pill { display:flex; align-items:center; gap:7px; background:var(--orange-soft); color:var(--orange-ink);
  font-weight:800; font-size:12.5px; border-radius:999px; padding:7px 13px; }
.bell { position:relative; width:36px; height:36px; border-radius:11px; background:var(--bg);
  border:1px solid var(--line); display:grid; place-items:center; font-size:14px; }
.bell .dot { position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%;
  background:var(--red); border:1.5px solid #fff; }
.avatar-img { width:34px; height:34px; border-radius:50%; object-fit:cover; display:block; }
.avatar { border-radius:50%; display:grid; place-items:center; font-weight:800; flex-shrink:0;
  background:var(--grad); color:#fff; }

/* ---- Banners & toasts ---- */
.banner-wrap { max-width:1160px; margin:14px auto 0; padding:0 26px; }
.banner { border-radius:13px; padding:12px 16px; font-size:13px; font-weight:600; line-height:1.55; }
.banner a { font-weight:800; text-decoration:underline; }
.banner-ok { background:var(--green-soft); border:1px solid #c6ecd4; color:#116d38; }
.banner-err { background:var(--red-soft); border:1px solid #f6c8d2; color:#9f1239; }
.banner-warn { background:var(--orange-soft); border:1px solid #f3e0b8; color:var(--orange-ink); }
.toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%, 16px); opacity:0;
  background:var(--ink); color:#fff; font-size:13px; font-weight:600; padding:11px 18px;
  border-radius:12px; box-shadow:var(--sh-lift); z-index:500; transition:.25s; }
.toast.show { transform:translate(-50%, 0); opacity:1; }
.toast-err { background:#7f1d33; }

/* ---- Layout ---- */
.main { max-width:1160px; margin:0 auto; padding:28px 26px 90px; }
.main-narrow { max-width:880px; }
.grid-rail { display:grid; grid-template-columns:1fr 316px; gap:22px; align-items:start; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.page-head h1 { font-size:24px; }
.page-head .sub { color:var(--muted); font-size:13.5px; margin-top:5px; max-width:560px; }
.crumb { font-size:12.5px; color:var(--faint); font-weight:600; margin-bottom:14px; }
.crumb a { color:var(--vio); }

/* ---- Hero band ---- */
.hero { border-radius:22px; padding:34px 38px; position:relative; overflow:hidden;
  background:var(--grad-soft); border:1px solid #e9e2ff; margin-bottom:22px; }
.hero::before { content:''; position:absolute; right:-60px; top:-60px; width:260px; height:260px;
  border-radius:50%; background:radial-gradient(circle,rgba(155,92,246,.16),transparent 65%); }
.hero h1 { font-size:30px; letter-spacing:-.03em; line-height:1.15; margin-bottom:10px; }
.hero h1 .hl { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { color:var(--muted); font-size:14.5px; max-width:480px; margin:0 0 20px; }
.hero-stats { display:flex; gap:12px; margin-top:22px; position:relative; z-index:1; flex-wrap:wrap; }
.hstat { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:10px 16px; box-shadow:0 2px 8px rgba(35,28,88,.05); }
.hstat b { display:block; font-size:15px; color:var(--ink); }
.hstat small { font-size:11px; color:var(--faint); font-weight:600; }

/* ---- Icon tiles ---- */
.itile { border-radius:13px; display:grid; place-items:center; flex-shrink:0; width:38px; height:38px; font-size:17px; }
.itile.vio { background:var(--vio-soft); } .itile.green { background:var(--green-soft); }
.itile.orange { background:var(--orange-soft); } .itile.pink { background:var(--pink-soft); }
.itile.cyan { background:var(--cyan-soft); } .itile.red { background:var(--red-soft); }
.itile-lg { width:46px; height:46px; font-size:20px; }

/* ---- Row lists ---- */
.rows { overflow:hidden; }
.rowi { display:flex; align-items:center; gap:16px; padding:17px 20px; border-bottom:1px solid var(--line-soft); transition:.12s; }
.rowi:last-child { border-bottom:none; }
.rowi:hover { background:#fbfaff; }
.rowi .t { font-weight:700; font-size:14.5px; color:var(--ink); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.rowi .d { font-size:12.5px; color:var(--muted); margin:3px 0 8px; line-height:1.5; }
.rowi .meta { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.mstat { font-size:12px; color:var(--faint); font-weight:600; display:flex; align-items:center; gap:5px; }
.empty-state { padding:52px 24px; text-align:center; }
.empty-state .big { font-size:34px; margin-bottom:12px; }
.empty-state h3 { font-size:16px; margin-bottom:7px; }
.empty-state p { color:var(--muted); font-size:13.5px; margin:0 auto 18px; max-width:400px; line-height:1.65; }

/* ---- Rail cards ---- */
.rail-card { padding:20px; margin-bottom:16px; }
.rail-card h4 { font-size:14px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; }
.rail-card h4 a { font-size:12px; color:var(--vio); font-weight:700; }
.cat-row { display:flex; align-items:center; gap:11px; padding:7px 0; font-size:13px; font-weight:600; color:var(--ink); }
.cat-row .itile { width:30px; height:30px; font-size:14px; border-radius:9px; }
.cat-row .n { margin-left:auto; color:var(--faint); font-family:var(--mono); font-size:11.5px; font-weight:500; }
.stat-mini { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stat-mini > div { background:var(--vio-soft); border-radius:13px; padding:13px; }
.stat-mini b { display:block; font-size:17px; color:var(--vio-deep); font-family:var(--mono); letter-spacing:-.02em; }
.stat-mini small { font-size:11px; color:var(--muted); font-weight:600; }
.kv { display:flex; justify-content:space-between; font-size:13px; padding:8px 0; border-bottom:1px solid var(--line-soft); }
.kv:last-child { border-bottom:none; }
.kv b { color:var(--ink); }

/* ---- Filter pills, segmented ---- */
.pill-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.fpill { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:#fff;
  border-radius:999px; padding:7px 15px; font-size:12.5px; font-weight:700; color:var(--muted); }
.fpill:hover { border-color:var(--vio-mid); color:var(--vio); }
.fpill.on { background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 6px 14px -5px rgba(106,92,255,.5); }
.seg { display:inline-flex; background:#ebeaf4; border-radius:12px; padding:4px; gap:3px; }
.seg a, .seg button { padding:7px 16px; border-radius:9px; font-size:12.5px; font-weight:700; color:var(--muted); }
.seg .on { background:#fff; color:var(--vio); box-shadow:0 2px 6px rgba(35,28,88,.12); }

/* ---- Forms ---- */
.field { margin-bottom:14px; }
.field label { display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.field .hint { font-size:11.5px; color:var(--faint); margin-top:5px; line-height:1.5; }
.inp { display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:13px;
  padding:0 14px; background:#fff; transition:.14s; }
.inp:focus-within { border-color:var(--vio); box-shadow:0 0 0 4px rgba(106,92,255,.12); }
.inp input, .inp select { border:none; outline:none; flex:1; padding:12px 0; background:transparent; }
.inp .em { color:var(--faint); font-size:14px; }
textarea.area { width:100%; border:1.5px solid var(--line); border-radius:13px; padding:12px 14px;
  min-height:110px; resize:vertical; outline:none; background:#fff; line-height:1.6; }
textarea.area:focus { border-color:var(--vio); box-shadow:0 0 0 4px rgba(106,92,255,.12); }
.switch { width:38px; height:22px; border-radius:999px; background:#d8d8dd; position:relative;
  flex-shrink:0; transition:.15s; cursor:pointer; border:none; display:inline-block; }
.switch::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:.15s; }
.switch.on { background:var(--green); }
.switch.on::after { left:19px; }
.search-pill { display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:8px 13px; min-width:230px; color:var(--faint); font-size:13px; }
.search-pill input { border:none; outline:none; flex:1; background:transparent; }

/* ---- Auth (signin / invite / gate) ---- */
.auth-wrap { min-height:calc(100vh - 62px); display:grid; place-items:center; padding:34px;
  background:radial-gradient(700px 400px at 20% 0%,#eee9ff,transparent),
             radial-gradient(700px 420px at 100% 100%,#fdefff,transparent),var(--bg); }
.auth-card { width:100%; max-width:880px; display:grid; grid-template-columns:1fr 1fr;
  border-radius:26px; overflow:hidden; background:#fff; box-shadow:var(--sh-lift); border:1px solid var(--line); }
.auth-left { background:linear-gradient(150deg,#6a5cff 0%,#8b5cf6 55%,#b158f0 100%); color:#fff;
  padding:42px 38px; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.auth-left::before { content:''; position:absolute; width:220px; height:220px; border-radius:50%;
  background:rgba(255,255,255,.10); right:-70px; top:-70px; }
.auth-left .brand { color:#fff; margin-bottom:auto; position:relative; z-index:1; }
.auth-left h2 { color:#fff; font-family:var(--serif); font-size:27px; line-height:1.25; font-weight:700;
  position:relative; z-index:1; margin-bottom:12px; }
.auth-left p { color:rgba(255,255,255,.85); font-size:13.5px; line-height:1.65; position:relative; z-index:1; margin:0 0 22px; }
.afeat { display:flex; align-items:center; gap:11px; background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.16); border-radius:13px; padding:10px 14px;
  font-size:12.5px; font-weight:600; margin-bottom:11px; position:relative; z-index:1; }
.auth-right { padding:42px 40px; }
.auth-right h1 { font-size:23px; margin-bottom:6px; }
.auth-right .sub { color:var(--muted); font-size:13.5px; margin-bottom:24px; }
.auth-foot { text-align:center; font-size:13px; color:var(--muted); margin-top:22px;
  padding-top:20px; border-top:1px solid var(--line-soft); }
.gate-card { max-width:460px; width:100%; padding:40px 38px; text-align:center; }
.gate-badge { width:56px; height:56px; border-radius:16px; background:var(--ink); color:#fff;
  display:grid; place-items:center; margin:0 auto 20px; font-size:22px;
  box-shadow:0 10px 24px -8px rgba(23,21,38,.4); }
.gate-card h1 { font-size:20px; margin-bottom:10px; }
.gate-card p { color:var(--muted); font-size:14px; line-height:1.65; margin:0 0 22px; }
.gate-pending { display:inline-flex; align-items:center; gap:8px; background:var(--orange-soft);
  color:#a16207; border:1px solid #f3e3bb; font-size:12.5px; font-weight:600;
  border-radius:999px; padding:6px 14px; }
.pulse { width:7px; height:7px; border-radius:50%; background:var(--orange); animation:lp-pulse 1.6s infinite; }
@keyframes lp-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }

/* ---- Track & modules ---- */
.serif-title { font-family:var(--serif); font-size:32px; font-weight:700; letter-spacing:-.01em; }
.module { display:flex; align-items:center; gap:16px; padding:18px 20px; border-bottom:1px solid var(--line-soft); }
.module:last-child { border-bottom:none; }
.module .mod-lbl { font-size:11px; font-weight:700; color:var(--vio); margin-bottom:2px; }
.module .t { font-weight:700; font-size:14.5px; color:var(--ink); }
.module .d { font-size:12.5px; color:var(--muted); margin-top:3px; }
.module .lessons { font-size:11.5px; color:var(--faint); font-weight:600; text-align:right; margin-left:auto; flex-shrink:0; }
.ring { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; position:relative; }
.ring::before { content:''; position:absolute; inset:4px; border-radius:50%; background:#fff; }
.ring b { position:relative; font-size:10.5px; font-family:var(--mono); color:var(--ink); }
.ring-lg { width:110px; height:110px; }
.ring-lg b { font-size:19px; font-family:var(--sans); font-weight:800; }
.week { display:flex; justify-content:space-between; background:var(--vio-soft); border-radius:13px;
  padding:12px 14px; margin-top:14px; }
.day { text-align:center; font-size:10px; font-weight:700; color:var(--faint); }
.day .c { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; margin:0 auto 4px;
  background:#fff; border:1.5px solid var(--line); color:var(--faint); font-size:10px; }
.day.hit .c { background:var(--vio); border-color:var(--vio); color:#fff; }
.prog { height:6px; background:var(--line-soft); border-radius:99px; overflow:hidden; }
.prog .fill { height:100%; background:var(--grad); border-radius:99px; }
.lock-note { display:flex; gap:11px; align-items:flex-start; background:var(--orange-soft);
  border:1px solid #f3e0b8; color:var(--orange-ink); border-radius:13px; padding:12px 14px;
  font-size:12.5px; font-weight:600; line-height:1.55; }

/* ---- Leaderboard ---- */
.podium { display:grid; grid-template-columns:1fr 1.1fr 1fr; gap:16px; margin-bottom:18px; align-items:end; }
.pod { padding:22px 18px 18px; text-align:center; position:relative; }
.pod .medal { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#fff;
  font-weight:800; font-size:13px; margin:-38px auto 8px; border:3px solid #fff;
  box-shadow:0 4px 10px rgba(35,28,88,.2); }
.pod.p1 .medal { background:linear-gradient(135deg,#f5c518,#e8930c); }
.pod.p2 .medal { background:linear-gradient(135deg,#b7bfce,#8d98ab); }
.pod.p3 .medal { background:linear-gradient(135deg,#e0955c,#b0713c); }
.pod.p1 { background:linear-gradient(180deg,#fff8e5,#fff); border-color:#f3e3ae; padding-top:28px;
  transform:translateY(-6px); box-shadow:var(--sh-lift); }
.pod .avatar { width:58px; height:58px; font-size:21px; margin:0 auto 10px; border:3px solid #fff;
  box-shadow:0 8px 18px -6px rgba(106,92,255,.5); }
.pod .n { font-weight:800; font-size:14.5px; color:var(--ink); }
.pod .pts { font-family:var(--mono); font-size:12.5px; color:var(--muted); margin:3px 0 9px; }
.lb-row { display:flex; align-items:center; gap:13px; padding:13px 20px; border-bottom:1px solid var(--line-soft); }
.lb-row:last-child { border-bottom:none; }
.lb-row.me { background:var(--vio-soft); border-left:3px solid var(--vio); padding-left:17px; }
.lb-row .pos { font-family:var(--mono); font-weight:700; font-size:12.5px; color:var(--faint); width:24px; }
.lb-row .n { font-weight:700; font-size:13.5px; color:var(--ink); }
.lb-row .sub { font-size:11.5px; color:var(--faint); font-weight:600; }
.lb-row .pts { margin-left:auto; font-family:var(--mono); font-weight:700; font-size:13px; color:var(--ink); }
.rank-card { background:var(--grad); color:#fff; border:none; }
.rank-card h4, .rank-card b { color:#fff; }
.rank-card .big { font-size:38px; font-weight:800; line-height:1; }
.rank-card .bar { height:7px; background:rgba(255,255,255,.25); border-radius:99px; margin:14px 0 7px; overflow:hidden; }
.rank-card .bar i { display:block; height:100%; background:#fff; border-radius:99px; }

/* ---- Article / README ---- */
.repo-title { font-family:var(--serif); font-size:29px; font-weight:700; line-height:1.2; margin-bottom:8px; }
.tabs { display:flex; gap:6px; margin:20px 0 0; }
.tabs .tab { padding:9px 16px; border-radius:11px 11px 0 0; font-weight:700; font-size:13px;
  color:var(--muted); display:flex; gap:7px; align-items:center; }
.tabs .tab.active { background:#fff; color:var(--vio); border:1px solid var(--line); border-bottom-color:#fff; }
.tabs .ct { font-size:10.5px; background:var(--vio-soft); color:var(--vio); border-radius:99px; padding:1px 7px; }
.doc { background:#fff; border:1px solid var(--line); border-radius:0 var(--r) var(--r) var(--r);
  padding:40px 46px; box-shadow:var(--sh); margin-top:-1px; }
.prose p { font-family:var(--serif); font-size:16.5px; line-height:1.8; color:#2e2b40; margin:0 0 26px; }
.prose h3 { font-family:var(--serif); font-size:20px; margin:0 0 14px; }
.clap-btn { display:inline-flex; align-items:center; gap:8px; border:1.5px solid #f3e3ae; background:#fff8e5;
  color:var(--orange-ink); border-radius:999px; padding:9px 17px; font-weight:800; font-size:13.5px;
  flex-shrink:0; box-shadow:0 4px 12px -4px rgba(234,179,8,.35); transition:.15s; }
.clap-btn:hover { transform:translateY(-1px); }
.clap-btn.off { border-color:var(--line); background:#fff; color:var(--muted); box-shadow:none; }

/* ---- Code cards ---- */
.code-card { border-radius:14px; overflow:hidden; margin:0 0 26px; box-shadow:0 8px 22px -10px rgba(23,21,38,.25); }
.code-head { display:flex; align-items:center; gap:10px; background:#211e33; padding:9px 16px; }
.code-head .wdots { display:flex; gap:5px; }
.code-head .wdots i { width:9px; height:9px; border-radius:50%; display:block; }
.code-head .lang { font-family:var(--mono); font-size:11px; font-weight:700; color:#a79fff; margin-left:6px; }
pre.code { margin:0; background:#191627; color:#e6e2ff; padding:18px 20px; font-family:var(--mono);
  font-size:13px; line-height:1.75; overflow-x:auto; }
pre.code .kw { color:#9b8cff; } pre.code .fn { color:#6fd3f2; }
pre.code .str { color:#8ee8a7; } pre.code .num { color:#ffc36b; }
.res { background:#faf9ff; border:1px solid var(--line); border-top:none; padding:14px 18px;
  max-height:300px; overflow:auto; }
.res-lbl { font-size:10.5px; font-weight:800; color:var(--vio); text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:9px; }
table.result { width:100%; border-collapse:collapse; font-size:12.5px; font-family:var(--mono); }
table.result th { text-align:left; font-family:var(--sans); color:var(--faint); font-weight:700;
  font-size:11px; padding:6px 10px; border-bottom:1.5px solid var(--line); }
table.result td { padding:7px 10px; border-bottom:1px solid var(--line-soft); color:var(--ink); white-space:nowrap; }

/* ---- Data tables ---- */
table.data { width:100%; border-collapse:collapse; font-size:12.5px; }
table.data th { text-align:left; font-size:11px; font-weight:600; color:var(--faint); text-transform:uppercase;
  letter-spacing:.05em; padding:10px 20px; border-bottom:1px solid var(--line-soft); background:#fbfbfc; }
table.data td { padding:10px 20px; border-bottom:1px solid var(--line-soft); color:var(--ink); }
table.data tr:last-child td { border-bottom:none; }
table.data td.mono { font-family:var(--mono); font-size:12px; }
table.data td.dim { color:var(--muted); }

/* ---- Profile cover ---- */
.cover { border-radius:22px; overflow:hidden; color:#fff; padding:32px 34px; margin-bottom:20px;
  background:radial-gradient(500px 240px at 80% -40%,rgba(155,92,246,.55),transparent),
             radial-gradient(400px 200px at 15% 120%,rgba(106,92,255,.4),transparent),
             linear-gradient(140deg,#211d3f,#171526); }
.cover h1 { color:#fff; font-size:24px; display:flex; align-items:center; gap:9px; }
.cover .hl { color:#c9c2ff; font-size:13.5px; margin-top:4px; }
.cover .meta { display:flex; gap:16px; margin-top:10px; font-size:12.5px; color:#a8a2cc; font-weight:600; flex-wrap:wrap; }
.cover .btn-ghost { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); color:#fff; }
.pstats { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid rgba(255,255,255,.14);
  margin-top:24px; padding-top:20px; gap:10px; }
.pstats b { display:block; font-size:20px; font-family:var(--mono); letter-spacing:-.02em; color:#fff; }
.pstats small { font-size:11px; color:#a8a2cc; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.ach { display:flex; gap:12px; align-items:center; padding:9px 0; }
.ach b { font-size:13px; color:var(--ink); display:block; }
.ach small { font-size:11.5px; color:var(--faint); }

/* ---- Workspace / IDE ---- */
.ide-top { background:#fff; border-bottom:1px solid var(--line); padding:0 22px; height:58px;
  display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:100; }
.ide-proj small { display:block; font-size:10.5px; font-weight:800; color:var(--vio); letter-spacing:.05em; }
.ide-proj b { font-size:14.5px; color:var(--ink); }
.steps { display:flex; gap:6px; margin-left:auto; }
.stp { width:26px; height:26px; border-radius:9px; display:grid; place-items:center; font-size:11px;
  font-weight:800; font-family:var(--mono); background:var(--line-soft); color:var(--faint); }
.stp.done { background:var(--green-soft); color:var(--green); }
.stp.cur { background:var(--grad); color:#fff; box-shadow:0 4px 10px -3px rgba(106,92,255,.55); }
.saved-flag { font-size:12px; font-weight:700; color:var(--green); display:flex; align-items:center; gap:6px; }
.ide-body { display:grid; grid-template-columns:1fr 340px; min-height:calc(100vh - 58px); }
.ide-doc { padding:32px 0 90px; display:flex; justify-content:center; background:var(--bg); }
.ide-col { width:100%; max-width:640px; padding:0 26px; }
.note-block { font-family:var(--serif); font-size:16px; line-height:1.75; color:#2e2b40; padding:4px 2px 18px; }
.cell { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:var(--sh); margin-bottom:18px; }
.cell-head { display:flex; align-items:center; gap:10px; padding:9px 14px; background:#fbfaff;
  border-bottom:1px solid var(--line); }
.lang-chip { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800;
  font-family:var(--mono); border-radius:7px; padding:3px 9px; }
.lang-chip.sql { background:var(--vio-soft); color:var(--vio); }
.lang-chip.py { background:var(--green-soft); color:var(--green); }
.task-tag { font-size:11px; color:var(--muted); background:var(--line-soft); border-radius:7px;
  padding:3px 9px; font-weight:700; }
.run { margin-left:auto; display:inline-flex; align-items:center; gap:6px; background:var(--grad);
  color:#fff; font-size:11.5px; font-weight:800; padding:6px 14px; border-radius:9px;
  box-shadow:0 5px 12px -4px rgba(106,92,255,.5); }
.cell textarea, .cell pre.src { margin:0; padding:15px 18px; background:#fff; color:#2b2740;
  font-family:var(--mono); font-size:13px; line-height:1.75; border:none; width:100%;
  outline:none; resize:vertical; display:block; }
.cell-out { border-top:1px solid var(--line); background:#faf9ff; padding:12px 16px; max-height:280px; overflow:auto; }
.feature-note { display:flex; gap:10px; align-items:flex-start; background:var(--vio-soft);
  border-top:1px solid #ded8ff; color:var(--vio-deep); padding:12px 16px; font-size:12.5px;
  font-weight:500; line-height:1.55; }
.addzone { display:flex; gap:8px; justify-content:center; padding:6px 0 22px; }

/* ---- AI panel (Plex) ---- */
.ai-panel { border-left:1px solid var(--line); background:#fff; display:flex; flex-direction:column; }
.ai-head { display:flex; align-items:center; gap:11px; padding:16px 18px; border-bottom:1px solid var(--line-soft); }
.bot { width:38px; height:38px; border-radius:13px; background:var(--grad); display:grid; place-items:center;
  font-size:18px; box-shadow:0 6px 14px -4px rgba(106,92,255,.55); position:relative; flex-shrink:0; }
.bot .live { position:absolute; bottom:-1px; right:-1px; width:11px; height:11px; border-radius:50%;
  border:2px solid #fff; background:var(--green); }
.bot .live.off { background:var(--faint); }
.ai-cost { margin-left:auto; font-size:11px; font-weight:800; background:var(--orange-soft);
  color:var(--orange-ink); border-radius:999px; padding:5px 10px; }
.ai-chat { flex:1; overflow:auto; padding:18px; display:flex; flex-direction:column; gap:14px; }
.msg { max-width:88%; border-radius:15px; padding:11px 14px; font-size:12.5px; line-height:1.6; }
.msg.user { align-self:flex-end; background:var(--grad); color:#fff; border-bottom-right-radius:5px; }
.msg.ai { align-self:flex-start; background:var(--line-soft); color:var(--body); border-bottom-left-radius:5px; }
.sugg-row { display:flex; gap:7px; flex-wrap:wrap; padding:0 18px 12px; }
.sugg { font-size:11.5px; font-weight:700; color:var(--vio); background:var(--vio-soft);
  border-radius:999px; padding:6px 12px; }
.ai-input { display:flex; gap:9px; padding:14px 18px; border-top:1px solid var(--line-soft); }
.ai-note { font-size:10.5px; color:var(--faint); text-align:center; padding:0 18px 12px; }

/* ---- Workbench (workspace v1) ---- */
.wb-body { display:grid; grid-template-columns:236px 1fr 340px; min-height:calc(100vh - 58px); }
.wb-left { border-right:1px solid var(--line); background:#fff; padding:16px 12px;
  display:flex; flex-direction:column; gap:2px; overflow:auto; }
.wb-lbl { font-size:10px; font-weight:800; color:var(--faint); text-transform:uppercase;
  letter-spacing:.08em; padding:0 10px; margin-bottom:7px; }
.wb-mode { display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:8px 10px; border-radius:9px; font-size:13px; font-weight:600; color:var(--muted); }
.wb-mode:hover { background:var(--line-soft); color:var(--ink); }
.wb-mode.on { background:var(--vio-soft); color:var(--vio); font-weight:700; }
.ds-item { display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:7px 10px; border-radius:9px; }
.ds-item:hover { background:var(--line-soft); }
.ds-meta { flex:1; min-width:0; }
.ds-alias { display:block; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-sub { display:block; font-size:10.5px; color:var(--faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-state { font-size:10.5px; font-weight:700; font-family:var(--mono); flex-shrink:0; }
.wb-engine { margin-top:auto; padding:10px; font-size:11px; font-weight:700; color:var(--faint);
  border-top:1px solid var(--line-soft); }

.xp-toolbar { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; align-items:center; }
.grid-wrap { overflow:auto; max-height:calc(100vh - 300px); }
.xp-table th { position:sticky; top:0; background:#fbfbfc; cursor:pointer; user-select:none; white-space:nowrap; }
.xp-table th:hover { color:var(--vio); }
.xp-foot { display:flex; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid var(--line-soft); }

.chart-ctl { display:flex; gap:10px; align-items:center; padding:8px 14px;
  border-top:1px solid var(--line); background:#fbfaff; flex-wrap:wrap; }
.chart-ctl label { font-size:11px; font-weight:700; color:var(--faint); display:flex; gap:5px; align-items:center; }
.chart-wrap { position:relative; padding:10px 4px 4px; }
.chart-tip { position:absolute; background:#fff; border:1px solid var(--line); border-radius:9px;
  box-shadow:var(--sh-lift); padding:7px 11px; font-size:11.5px; color:var(--muted);
  pointer-events:none; z-index:10; line-height:1.5; }
.chart-tip b { color:var(--ink); }

.prof-head { display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:13px 18px 10px; border-top:1px solid var(--line-soft); }
.prof-head b { font-size:12.5px; color:var(--ink); }
.prof-body { flex:1; overflow:auto; padding:0 18px 12px; }
.prof-stats { display:flex; gap:14px; font-size:11.5px; color:var(--muted); font-weight:600;
  padding:6px 0 10px; }
.prof-stats b { color:var(--ink); font-family:var(--mono); }
.prof-flags { font-size:11px; font-weight:600; color:var(--orange-ink); background:var(--orange-soft);
  border:1px solid #f3e0b8; border-radius:9px; padding:7px 10px; margin-bottom:10px; line-height:1.7; }
.prof-flags:empty { display:none; }
.prof-row { display:flex; align-items:center; gap:7px; padding:5px 0;
  border-bottom:1px solid var(--line-soft); }
.prof-row:last-child { border-bottom:none; }
.prof-name { font-family:var(--mono); font-size:11px; font-weight:600; color:var(--ink);
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prof-meta { font-size:10px; color:var(--faint); font-family:var(--mono); white-space:nowrap; }

/* Right-panel tabs */
.rp-tabs { display:flex; gap:5px; padding:10px 12px; border-bottom:1px solid var(--line); align-items:center; }
.rp-tab { flex:1; padding:8px 6px; border-radius:9px; font-size:12px; font-weight:700; color:var(--muted);
  background:var(--line-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-tab.on { background:var(--grad); color:#fff; box-shadow:0 4px 10px -4px rgba(106,92,255,.5); }
.rp-close { display:none; width:30px; height:30px; border-radius:8px; color:var(--muted); font-weight:700;
  place-items:center; flex-shrink:0; }
.rp-close:hover { background:var(--line-soft); color:var(--ink); }
.rp-pane { flex:1; display:flex; flex-direction:column; min-height:0; }
.rp-pane[hidden] { display:none; }
.rp-toggle { display:none; }

/* Center load status */
.nb-status { padding:2px 0 14px; }
.nb-status:empty { display:none; }
.nb-status .chip { padding:7px 14px; font-size:12px; }

/* Tasks drawer */
.task-card { display:flex; gap:12px; padding:14px; border:1px solid var(--line); border-radius:12px;
  margin-bottom:10px; background:#fff; }
.task-card.done { opacity:.6; }
.task-card .task-num { width:26px; height:26px; border-radius:8px; background:var(--vio-soft); color:var(--vio);
  font-weight:800; display:grid; place-items:center; flex-shrink:0; font-size:12px; }
.task-card.done .task-num { background:var(--green-soft); color:var(--green); }
.task-card b { font-size:13px; color:var(--ink); }
.task-card p { font-size:12px; color:var(--muted); margin:5px 0 0; line-height:1.65; }
.drawer-scrim { position:fixed; inset:0; background:rgba(23,21,38,.35); opacity:0; pointer-events:none;
  transition:.2s; z-index:180; }
.drawer-scrim.open { opacity:1; pointer-events:auto; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:380px; max-width:94vw; background:#fff;
  box-shadow:var(--sh-lift); z-index:190; transform:translateX(105%); transition:.25s;
  display:flex; flex-direction:column; }
.drawer.open { transform:none; }
.drawer-head { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 18px; border-bottom:1px solid var(--line); }
.drawer-head b { font-size:13.5px; color:var(--ink); }
.drawer-body { flex:1; overflow:auto; padding:16px; }

/* Workbench responsiveness — panels become drawers, never disappear. */
@media (max-width: 1140px) {
  .wb-body { grid-template-columns:200px 1fr; }
  .rp-toggle { display:inline-flex; }
  .ai-panel#rightPanel { position:fixed; top:0; right:0; bottom:0; width:380px; max-width:94vw;
    z-index:190; transform:translateX(105%); transition:.25s; box-shadow:var(--sh-lift); }
  .ai-panel#rightPanel.open { transform:none; }
  .rp-tabs .rp-close { display:grid; }
}
@media (max-width: 820px) {
  .wb-body { grid-template-columns:1fr; }
  .wb-left { flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px;
    border-right:none; border-bottom:1px solid var(--line); position:static; height:auto; }
  .wb-left .wb-lbl { display:none; }
  .wb-mode { width:auto; }
  .ds-item { width:auto; }
  .ds-sub { display:none; }
  .wb-engine { margin-top:0; border-top:none; margin-left:auto; padding:4px 8px; }
  .ide-top { flex-wrap:wrap; height:auto; padding:10px 14px; gap:8px; }
  .steps { display:none; }
  .hide-sm { display:none; }
  .ide-doc { padding:18px 0 60px; }
}

/* ---- Pager ---- */
.pager { display:flex; justify-content:center; align-items:center; gap:7px; margin-top:26px; }
.pager a, .pager span { min-width:36px; height:36px; border-radius:10px; border:1px solid var(--line);
  background:#fff; display:grid; place-items:center; font-size:13px; font-weight:700;
  color:var(--muted); padding:0 10px; }
.pager .cur { background:var(--grad); color:#fff; border-color:transparent; }
.pager .off { opacity:.4; pointer-events:none; }

/* ---- Footer ---- */
.site-foot { border-top:1px solid var(--line); background:#fff; margin-top:40px; }
.foot-inner { max-width:1160px; margin:0 auto; padding:22px 26px; display:flex; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--faint); font-weight:600; }
.foot-inner span { display:flex; align-items:center; gap:9px; }
.foot-inner nav { display:flex; gap:18px; }
.foot-inner nav a:hover { color:var(--vio); }

/* ---- Responsive ---- */
@media (max-width: 1020px) {
  .grid-rail { grid-template-columns:1fr; }
  .ide-body { grid-template-columns:1fr; }
  .ai-panel { border-left:none; border-top:1px solid var(--line); }
  .pstats { grid-template-columns:repeat(3,1fr); row-gap:16px; }
}
@media (max-width: 780px) {
  .topnav { display:none; }
  .main { padding:20px 16px 70px; }
  .auth-card { grid-template-columns:1fr; }
  .auth-left { display:none; }
  .podium { grid-template-columns:1fr; }
  .pod.p1 { transform:none; }
  .hero { padding:26px 22px; }
  .doc { padding:26px 22px; }
  .search-pill { min-width:0; }
}

/* ---- Workbench v2: runnable Python output ---- */
.py-pre { font-family:var(--mono); font-size:12px; line-height:1.55; color:var(--ink);
  white-space:pre-wrap; word-break:break-word; margin:6px 0 0; }
.py-result { color:var(--vio); }
.py-img { display:block; max-width:100%; border:1px solid var(--line); border-radius:10px;
  margin:10px 0 2px; background:#fff; }
.py-hint { font-size:11.5px; color:var(--faint); padding:8px 16px 10px; border-top:1px dashed var(--line); }
.py-hint code { font-family:var(--mono); font-size:10.5px; color:var(--muted);
  background:var(--vio-soft); padding:1px 5px; border-radius:5px; }

/* ---- v2.2: pipeline flow strip + repo block task labels ---- */
.wb-flow { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.wb-flow-step { font-family:var(--mono); font-size:11.5px; font-weight:700; color:var(--vio);
  background:var(--vio-soft); border:1px solid var(--line); border-radius:9px; padding:4px 10px; }
.wb-flow-arrow { color:var(--faint); font-size:12px; }
.blk-task { font-size:10.5px; color:#a8a4c0; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:220px; }

/* ---- v2.3: auto-check rows in the tasks drawer ---- */
.chk-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }
.chk-row .run-check { font-size:11px; padding:4px 11px; cursor:pointer; }
.chk-lbl { font-size:11px; color:var(--muted); }
.chk-res { font-size:11px; font-weight:800; }
.chk-res.ok { color:var(--green); }
.chk-res.bad { color:var(--red); }

/* ---- v2.4: block-anchored discussion on repo pages ---- */
.blk-disc { border-top:1px solid var(--line); background:#faf9ff; }
.blk-disc summary { padding:9px 16px; font-size:11.5px; font-weight:700; color:var(--muted);
  cursor:pointer; list-style:none; }
.blk-disc summary::-webkit-details-marker { display:none; }
.blk-disc[open] summary { border-bottom:1px dashed var(--line); }
.blk-disc-list { padding:4px 16px; }
.blk-c { padding:8px 0; border-bottom:1px dashed var(--line-soft); font-size:12.5px; }
.blk-c:last-child { border-bottom:none; }
.blk-c b a { color:var(--vio); }
.blk-c-time { font-size:10.5px; color:var(--faint); margin-left:6px; }
.blk-c p { margin:3px 0 0; color:var(--body); line-height:1.55; white-space:pre-wrap; }
.blk-c-form { display:flex; gap:8px; padding:10px 16px 14px; align-items:center; }
.blk-c-note { font-size:11.5px; color:var(--faint); padding:8px 16px 12px; margin:0; }

/* ---- v2.6: Editor's Picks (magazine layout, house design system) ---- */
.pk-hero { display:grid; grid-template-columns: 1.1fr 1fr; overflow:hidden; margin-bottom:22px;
  text-decoration:none; color:inherit; }
.pk-hero-body { padding:26px 28px; display:flex; flex-direction:column; }
.pk-byline { font-size:12px; color:var(--muted); }
.pk-byline b { color:var(--ink); }
.pk-grid { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.pk-card { overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease; }
.pk-card:hover { transform:translateY(-3px); box-shadow:0 16px 34px -18px rgba(80,66,200,.35); }
.pk-card-body { padding:16px 18px 14px; }
.pk-card-body h3 { font-size:15px; margin:0 0 5px; line-height:1.35; }
.pk-by { font-size:11px; color:var(--faint); font-weight:600; }
.pk-card-body p { font-size:12.5px; color:var(--muted); line-height:1.6; margin:0; }
.pk-meta { font-size:11px; color:var(--faint); }
.pk-cover { display:grid; place-items:center; font-size:44px; min-height:130px; }
.pk-cover.g1 { background:linear-gradient(135deg,#ede9ff,#d8d1ff); }
.pk-cover.g2 { background:linear-gradient(135deg,#e0f4ff,#c9e6ff); }
.pk-cover.g3 { background:linear-gradient(135deg,#ffeede,#ffd9c2); }
.pk-cover.g4 { background:linear-gradient(135deg,#e2fbe9,#c6f0d4); }
.pk-cover.g5 { background:linear-gradient(135deg,#ffe9f3,#ffd1e6); }
.pk-cover.g6 { background:linear-gradient(135deg,#f4f0ff,#e2e8ff); }
@media (max-width: 860px) {
  .pk-hero { grid-template-columns: 1fr; }
  .pk-grid { grid-template-columns: 1fr; }
}

/* ---- v2.7: rich footer · byline · share · related · ad slot ---- */
.foot-cols { max-width:1160px; margin:0 auto; padding:34px 26px 10px; display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:26px; }
.foot-brand b { font-size:15px; }
.foot-brand p { font-size:12px; line-height:1.65; margin:10px 0 0; opacity:.75; max-width:280px; }
.foot-col { display:flex; flex-direction:column; gap:7px; }
.foot-col b { font-size:11px; text-transform:uppercase; letter-spacing:.08em; opacity:.65; margin-bottom:3px; }
.foot-col a { font-size:12.5px; opacity:.85; text-decoration:none; color:inherit; }
.foot-col a:hover { opacity:1; text-decoration:underline; }
@media (max-width: 820px) { .foot-cols { grid-template-columns: 1fr 1fr; } }

/* ---- v3.8: newsletter strip in the footer ---- */
.foot-news { max-width:1160px; margin:8px auto 0; padding:20px 26px; display:flex; align-items:center;
  justify-content:space-between; gap:18px; flex-wrap:wrap; border-top:1px solid var(--line-soft); }
.foot-news b { font-size:13.5px; }
.foot-news p { font-size:12px; color:var(--muted); margin:4px 0 0; line-height:1.5; max-width:420px; }
.foot-news form { display:flex; gap:8px; flex-wrap:wrap; position:relative; }
.foot-news input[type=email] { border:1.5px solid var(--line); border-radius:11px; padding:9px 14px;
  font-size:13px; min-width:220px; background:var(--card); color:var(--ink); }
.foot-news input[type=email]:focus { outline:none; border-color:var(--vio); }
.foot-news button { border:0; border-radius:11px; padding:9px 18px; font-size:13px; font-weight:700;
  background:var(--vio); color:#fff; cursor:pointer; }
.foot-news button:hover { filter:brightness(1.08); }

.byline { display:flex; align-items:center; gap:9px; margin-top:12px; font-size:13px; }
.byline .byline-sub { display:block; font-size:11px; color:var(--faint); }

.share-row { display:flex; gap:6px; }
.share-btn { width:34px; height:34px; display:grid; place-items:center; border-radius:10px;
  border:1px solid var(--line); background:var(--card); font-size:14px; font-weight:800;
  color:var(--muted); cursor:pointer; text-decoration:none; transition:all .12s ease; }
.share-btn:hover { border-color:var(--vio); color:var(--vio); transform:translateY(-1px); }

.rel-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
.rel-card { display:flex; align-items:center; gap:10px; padding:13px 15px; text-decoration:none; color:inherit; }
.rel-card .t { display:block; font-size:12.5px; font-weight:700; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rel-card .rel-sub { font-size:10.5px; color:var(--faint); }
@media (max-width: 820px) { .rel-grid { grid-template-columns: 1fr; } }

.ad-slot { position:relative; border:1px dashed var(--line); border-radius:14px;
  background:var(--card); padding:18px; }
.ad-lbl { position:absolute; top:-8px; left:14px; background:var(--card);
  padding:0 8px; font-size:9.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); }

/* Dark editorial footer (reference layout), overrides the old slim bar */
.site-foot { background:#171526; border-top:none; color:#cfcbe6; }
.site-foot .foot-inner { border-top:1px solid rgba(255,255,255,.08);
  color:#8f8aad; font-size:11.5px; }
.site-foot .foot-inner a { color:#b9b3e0; text-decoration:none; }
.site-foot .foot-inner a:hover { text-decoration:underline; }
.site-foot .foot-brand b { color:#fff; }
.site-foot .foot-col b { color:#8f8aad; }
.site-foot .foot-col a { color:#cfcbe6; }

/* =========================================================
   v3.3 — Left sidebar navigation (legacy layout, house style)
   ======================================================= */
:root { --snav-w: 246px; }
.side-nav { position:fixed; inset:0 auto 0 0; width:var(--snav-w); background:#fff;
  border-right:1px solid var(--line); padding:20px 16px 26px; overflow-y:auto; z-index:120; }
.side-nav .brand { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:900;
  color:var(--ink); text-decoration:none; margin-bottom:18px; }
.snav-title { font-size:10.5px; font-weight:900; text-transform:uppercase; letter-spacing:.09em;
  color:var(--faint); margin:18px 4px 6px; }
.snav-link { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:12px;
  font-size:13.5px; font-weight:700; color:var(--muted); text-decoration:none; margin:2px 0; }
.snav-ico { width:20px; text-align:center; font-size:15px; }
.snav-link:hover { background:var(--vio-soft); color:var(--vio); }
.snav-link.active { background:linear-gradient(90deg, rgba(106,92,255,.14), rgba(106,92,255,.04));
  color:var(--vio); }
.snav-scrim { display:none; }
.nav-burger { display:none; border:1px solid var(--line); background:var(--card); border-radius:11px;
  width:38px; height:38px; font-size:16px; cursor:pointer; color:var(--ink); }

/* Shift everything right when the sidebar is present */
body.has-sidenav .topbar,
body.has-sidenav .banner-wrap,
body.has-sidenav .main,
body.has-sidenav .site-foot { margin-left:var(--snav-w); }
body.has-sidenav .topbar .topnav { display:none; }   /* sidebar owns the links */
body.has-sidenav .topbar .brand { visibility:hidden; } /* brand lives in the sidebar */
body.has-sidenav .site-foot .foot-cols,
body.has-sidenav .site-foot .foot-inner { max-width:1060px; }

@media (max-width: 1100px) {
  body.has-sidenav .topbar,
  body.has-sidenav .banner-wrap,
  body.has-sidenav .main,
  body.has-sidenav .site-foot { margin-left:0; }
  body.has-sidenav .topbar .brand { visibility:visible; }
  .side-nav { transform:translateX(-105%); transition:transform .22s ease; box-shadow:0 0 60px rgba(23,21,38,.25); }
  .side-nav.open { transform:translateX(0); }
  .snav-scrim.open { display:block; position:fixed; inset:0; background:rgba(23,21,38,.42); z-index:110; }
  body.has-sidenav .nav-burger { display:grid; place-items:center; }
}

/* =========================================================
   v3.3 — Hero vector illustration (glass + cubes + floats)
   ======================================================= */
.hero-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap:20px; align-items:center; }
.hero-art { display:grid; place-items:center; min-height:250px; }
.hero-visual { position:relative; width:min(320px, 92%); height:250px; }
.ha-glass { position:absolute; inset:44px 22px 22px; border-radius:34px;
  background:linear-gradient(135deg, rgba(106,92,255,.16), rgba(0,184,212,.08));
  border:1px solid rgba(106,92,255,.12); transform:rotate(-8deg);
  animation:haGlass 7s ease-in-out infinite; }
.ha-cube { position:absolute; width:82px; height:82px; border-radius:20px;
  background:linear-gradient(135deg, #9c8bff, #4a34c4);
  box-shadow:0 20px 42px rgba(106,92,255,.34); animation:haCube 5s ease-in-out infinite; }
.ha-cube.c1 { left:116px; top:74px; }
.ha-cube.c2 { left:182px; top:140px; --ha-scale:.7; --ha-rot:15deg; animation-delay:.6s; }
.ha-cube.c3 { left:62px; top:144px; --ha-scale:.6; --ha-rot:-18deg; animation-delay:1.2s; }
.ha-float { position:absolute; width:64px; height:64px; border-radius:20px;
  background:rgba(255,255,255,.85); border:1px solid var(--line); display:grid; place-items:center;
  box-shadow:0 14px 34px -12px rgba(80,66,200,.35); font-size:24px;
  animation:haFloat 4.5s ease-in-out infinite; }
.ha-float.f1 { left:8px; top:46px; }
.ha-float.f2 { right:14px; top:78px; animation-delay:.9s; }
.ha-float.f3 { right:82px; bottom:4px; animation-delay:1.8s; }
@keyframes haFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes haCube { 0%,100% { transform:translateY(0) scale(var(--ha-scale,1)) rotate(var(--ha-rot,0deg)); }
  50% { transform:translateY(-8px) scale(var(--ha-scale,1)) rotate(var(--ha-rot,0deg)); } }
@keyframes haGlass { 0%,100% { transform:rotate(-8deg); } 50% { transform:rotate(-5deg); } }
@media (max-width: 860px) { .hero-grid { grid-template-columns:1fr; } .hero-art { min-height:200px; } }
@media (prefers-reduced-motion: reduce) { .ha-glass, .ha-cube, .ha-float { animation:none; } }

/* ---- v3.4: real dataset covers · detail-page polish ---- */
.ds-cover-img { width:calc(100% + 40px); margin:-20px -20px 14px; height:132px;
  object-fit:cover; border-radius:16px 16px 0 0; display:block; }
.fmt-badge { font-size:10px; font-weight:800; color:var(--vio); background:var(--vio-soft);
  border:1px solid var(--line); padding:3px 9px; border-radius:7px; letter-spacing:.04em; }
.desc-clip { position:relative; overflow:hidden; max-height:7.6em; margin-top:10px; }
.desc-clip.expanded { max-height:none; }
.desc-clip p { font-size:13.5px; color:var(--body); line-height:1.7; margin:0 0 10px;
  border-left:3px solid var(--vio-soft); padding-left:14px; }
.desc-clip .desc-fade { position:absolute; bottom:0; left:0; right:0; height:40px;
  background:linear-gradient(to bottom, transparent, var(--card)); }
.desc-clip.expanded .desc-fade { display:none; }
.deco-dots { position:absolute; top:14px; right:16px; display:flex; gap:8px; pointer-events:none; }
.deco-dots i { width:34px; height:34px; border-radius:11px; display:block;
  background:linear-gradient(135deg,#d8d1ff,#b7abff); animation:haFloat 5s ease-in-out infinite; }
.deco-dots i:nth-child(2) { width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg,#c9f0d9,#8fe0b0); animation-delay:.7s; }
.deco-dots i:nth-child(3) { width:18px; height:18px; border-radius:6px;
  background:linear-gradient(135deg,#cfe9ff,#9ed4ff); animation-delay:1.3s; }
@media (max-width:720px) { .deco-dots { display:none; } }