/* ═════════════════════════════════════════════════════════════════
   common.css — design tokens & dasar yang dipakai semua halaman
   Dipisahkan dari <style> index.html lama (tanpa perubahan visual).
   ═════════════════════════════════════════════════════════════════ */

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

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Skin emerald — hijau HANYA untuk aksen/tombol, teks netral */
  --bg:#0b0e0c; --surface:#111511; --surface2:#181d18; --surface3:#20271f;
  --border:#222a24; --border2:#2f3d33;
  --text:#edeff0; --text2:#9ba19c; --text3:#626861;
  --ok:#22c55e; --ok-bg:rgba(34,197,94,.1);
  --err:#ef4444; --err-bg:rgba(239,68,68,.1);
  --warn:#f59e0b; --warn-bg:rgba(245,158,11,.1);
  --accent:#34d399; --grad:linear-gradient(135deg,#059669,#34d399);
  /* versi lembut untuk GRADIEN TEKS (judul/angka) supaya mata tidak lelah */
  --grad-text:linear-gradient(135deg,#8becbc,#34c98c);
}

/* Latar konstelasi (CSS murni, tanpa aset) */
body::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 70% -10%, rgba(52,211,153,.07), transparent 60%),
    radial-gradient(ellipse 50% 35% at 15% 20%, rgba(52,211,153,.04), transparent 60%),
    radial-gradient(rgba(52,211,153,.09) 1px, transparent 1.6px),
    radial-gradient(rgba(52,211,153,.05) 1px, transparent 1.6px);
  background-size:auto,auto,52px 52px,34px 34px;
  background-position:0 0,0 0,0 0,17px 9px;
}

body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; font-size:clamp(13px,3.8vw,16px); overflow-x:hidden; width:100%; }

html { overflow-x:hidden; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; font-size:clamp(13px,3.8vw,16px); overflow-x:hidden; width:100%; }

@keyframes spin { to { transform:rotate(360deg); } }