/* ═══════════════════════════════════════════════════════════
   Vektor — Shared Base Styles
   Single source of truth for colors, fonts, resets, and
   shared chrome (noise grain, blobs, scrollbar).
   ═══════════════════════════════════════════════════════════ */

/* ── Design Tokens ────────────────────────────────────────── */
:root{
  /* Backgrounds */
  --bg:#101e2e;
  --bg1:#1a2d3e;
  --bg2:#203348;
  --bg3:#243c50;

  /* Borders */
  --border:#273d52;
  --border2:#325470;

  /* Brand colors — solid */
  --cyan:#00d4ff;
  --green:#00e676;
  --red:#ff3d57;
  --amber:#ffab00;
  --purple:#7c6af0;

  /* Brand colors — translucent */
  --cyan-dim:rgba(0,212,255,0.10);
  --cyan-mid:rgba(0,212,255,0.28);
  --cyan2:rgba(0,212,255,0.14);
  --cyan3:rgba(0,212,255,0.28);
  --green-dim:rgba(0,230,118,0.12);
  --green2:rgba(0,230,118,0.12);
  --red-dim:rgba(255,61,87,0.12);
  --amber-dim:rgba(255,171,0,0.12);
  --amber2:rgba(255,171,0,0.12);
  --purple-dim:rgba(124,106,240,0.12);
  --purple2:rgba(124,106,240,0.12);

  /* Text */
  --text:#ddeeff;
  --text1:#ddeeff;       /* alias used by admin */
  --text2:#9ab8cc;
  --text3:#527088;

  /* Typography */
  --mono:'DM Mono',monospace;
  --sans:'DM Sans',sans-serif;
  --body:'DM Sans',sans-serif;    /* alias */
  --disp:'Plus Jakarta Sans',sans-serif;

  /* Radii */
  --r:12px;
  --radius:8px;          /* alias used by dashboard */
}

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);overflow-x:hidden;line-height:1.5}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg1)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* ── Noise Grain Overlay ──────────────────────────────────── */
body::after{
  content:'';position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* ── Background Blobs ─────────────────────────────────────── */
.bg-blobs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.blob{position:absolute;border-radius:50%}
.blob1{width:700px;height:700px;background:radial-gradient(circle,rgba(0,200,255,.12) 0%,rgba(0,150,200,.03) 50%,transparent 70%);filter:blur(60px);top:-280px;left:-180px}
.blob2{width:560px;height:560px;background:radial-gradient(circle,rgba(124,106,240,.10) 0%,rgba(100,80,220,.03) 50%,transparent 70%);filter:blur(60px);top:-60px;right:-160px}
.blob3{width:480px;height:480px;background:radial-gradient(circle,rgba(0,210,110,.07) 0%,rgba(0,170,90,.02) 50%,transparent 70%);filter:blur(60px);bottom:0;left:30%}

/* ── Shared Button Base ───────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--mono);font-size:12px;font-weight:500;
  padding:9px 20px;border-radius:8px;border:1px solid var(--border);
  background:transparent;color:var(--text2);cursor:pointer;
  text-decoration:none;transition:all .15s;white-space:nowrap;
}
.btn:hover{border-color:var(--border2);color:var(--text)}
.btn-p,.btn-primary{background:var(--cyan);color:#0a1520;border-color:var(--cyan);font-weight:600}
.btn-p:hover,.btn-primary:hover{background:#33dfff;border-color:#33dfff}
.btn-g,.btn-ghost{background:transparent;border-color:var(--border);color:var(--text2)}
.btn-g:hover,.btn-ghost:hover{border-color:var(--border2);color:var(--text)}
.btn-ol{background:transparent;border-color:rgba(0,212,255,.3);color:var(--cyan)}
.btn-ol:hover{border-color:var(--cyan);background:rgba(0,212,255,.06)}
.btn-lg{font-size:13px;padding:13px 28px;border-radius:10px}