/* ===== Dark Theme – Stexup Utility ===== */
:root{
  --bg: #0b0f14;
  --bg-2: #0e141b;
  --card: rgba(18,24,32,.72);
  --card-solid: #121821;
  --text: #e6edf6;
  --muted: #9fb0c3;
  --border: rgba(148,163,184,.12);
  --accent: #4da3ff;
  --accent-2: #7c5cff;
  --shadow: 0 10px 30px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35);
  --glow: 0 0 0 1px rgba(77,163,255,.15), 0 8px 30px rgba(77,163,255,.15);
  --radius: 14px;
  --radius-sm: 10px;
  --blur: 12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(900px 700px at -10% 20%, rgba(77,163,255,.16), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.18));
  mix-blend-mode: overlay;
}
.wrap{max-width:800px;margin:32px auto;padding:0 16px}
.container{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  background-color: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:22px;
}
.nav{display:flex;gap:14px;align-items:center;margin:0 0 14px}
.nav a{
  text-decoration:none; color:var(--text); font-weight:600; opacity:.9;
  padding:8px 12px; border-radius:999px; border:1px solid transparent;
  transition: .2s ease;
}
.nav a:hover{ border-color: var(--border); background: rgba(255,255,255,.03); box-shadow: var(--glow); transform: translateY(-1px)}
.nav a[aria-current="page"]{ border-color: var(--border); background: rgba(77,163,255,.08)}
h1{margin:0 0 8px;font-size:28px; letter-spacing:.2px}
p.sub{margin:0 0 18px;color:var(--muted)}
.hint{font-size:12px;color:var(--muted)}
.card, .item{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));
  background-color: var(--card-solid);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:14px 16px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card{margin-bottom:12px}
.item{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;}
.card:hover, .item:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(124,92,255,.12);
  border-color: rgba(148,163,184,.18);
}
.name{font-weight:650; letter-spacing:.2px}
.btn, .download{
  display:inline-block; text-decoration:none; font-weight:700; color:#08121d;
  background: linear-gradient(180deg, var(--accent), #2f7fe6);
  padding:10px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 6px 20px rgba(47,127,230,.35), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover, .download:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(47,127,230,.45), var(--glow); filter:saturate(1.05) }
.btn:active, .download:active{ transform: translateY(0); box-shadow: 0 4px 16px rgba(47,127,230,.35) }
.download{ padding:12px 18px; border-radius:12px }
.back{
  display:inline-block; margin:10px 6px 0; color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:8px; border:1px solid transparent;
}
.back:hover{ color:var(--text); border-color:var(--border); background: rgba(255,255,255,.03) }
pre{
  background: #0b1220; color:#dbe7f5; padding:14px; border-radius:12px; overflow:auto;
  border:1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,.02), var(--shadow);
}
.copy{
  margin:8px 0 18px; display:inline-block; cursor:pointer;
  background: linear-gradient(180deg, var(--accent-2), #5b46d6);
  color:#0b0f14; padding:9px 12px; border-radius:10px; font-weight:700; text-decoration:none;
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 6px 20px rgba(124,92,255,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.copy:hover{ box-shadow: 0 10px 28px rgba(124,92,255,.45), var(--glow); transform: translateY(-1px) }
footer{margin:18px 0 6px;font-size:12px;color:var(--muted);text-align:center;opacity:.9}
.ad-spacer{height:24px}
.container, .card, .item{ position:relative; overflow:hidden; }
.container::after, .card::after, .item::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(115deg, rgba(255,255,255,.06), transparent 30% 70%, rgba(255,255,255,.04));
  opacity:.35; mix-blend-mode: overlay;
}
a{ color: #8ec2ff } a:hover{ color:#b8d8ff }