/* ==========================================================================
   StreamBudget huisstijl
   Kleuren, lettertypes en basis-onderdelen zoals gebruikt op de website,
   het klantenpaneel en de chat. Gebruik de variabelen (var(--gold) enz.).

   Lettertypes (zet deze regel in de <head> van je pagina):
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@600;700;800&display=swap">
   ========================================================================== */

:root{
  /* --- Achtergronden (donker) --- */
  --bg:#0a0907;          /* pagina-achtergrond (bijna zwart, warm) */
  --bg-2:#110f0b;        /* iets lichter, voor invoervelden */
  --card:#17140f;        /* kaarten / blokken */
  --card-2:#1e1a13;      /* kaarten iets lichter, knoppen 'licht' */

  /* --- Goud (hoofdkleur) --- */
  --gold:#e0a526;        /* hoofdkleur StreamBudget */
  --gold-l:#f7d77a;      /* licht goud (links, accenten) */
  --gold-d:#b8860b;      /* donker goud */
  --on-gold:#1a1203;     /* tekstkleur OP goud (knoppen) */
  --grad:linear-gradient(135deg,#f7d77a 0%,#e0a526 50%,#b8860b 100%); /* gouden verloop */

  /* --- Tekst --- */
  --text:#f3eee4;        /* gewone tekst (warm wit) */
  --muted:#b2a68c;       /* rustige tekst / uitleg */

  /* --- Lijnen --- */
  --line:rgba(224,165,38,.20);   /* gouden randje */
  --soft:rgba(255,255,255,.07);  /* heel zacht randje */

  /* --- Meldingen --- */
  --ok:#4ade80;          /* groen: gelukt / online */
  --warn:#fbbf24;        /* geel: let op */
  --bad:#f87171;         /* rood: fout / offline */
  --info:#60a5fa;        /* blauw: informatie */

  /* --- Lettertypes --- */
  --f-display:"Poppins","Inter",system-ui,sans-serif;  /* koppen */
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; /* tekst */

  /* --- Vormen --- */
  --rond:18px;           /* kaarten */
  --rond-k:12px;         /* knoppen en velden */
  --schaduw:0 6px 18px rgba(224,165,38,.18);
  --gloed:0 0 18px rgba(224,165,38,.35);

  color-scheme:dark;
}

/* ---------- Basis ---------- */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  background-image:radial-gradient(ellipse 60% 40% at 70% -10%,rgba(224,165,38,.10),transparent 70%);
  color:var(--text);
  font:15px/1.6 var(--f-body);
}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.2;margin:0 0 .5em}
a{color:var(--gold-l)}
a:hover{color:var(--gold)}
.muted{color:var(--muted)}
.goud-tekst{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.label{font-size:.72rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}

/* ---------- Knoppen ---------- */
.knop{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border:0;border-radius:var(--rond-k);
  background:var(--grad);color:var(--on-gold);
  font-weight:800;text-decoration:none;cursor:pointer;
  box-shadow:var(--schaduw);transition:filter .15s,transform .15s;
}
.knop:hover{filter:brightness(1.06);transform:translateY(-1px)}
.knop:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
.knop.licht{background:var(--card-2);color:var(--text);border:1px solid var(--line);box-shadow:none}
.knop.rood{background:rgba(248,113,113,.12);color:var(--bad);border:1px solid rgba(248,113,113,.4);box-shadow:none}
.knop.klein{padding:6px 12px;font-size:.82rem;border-radius:9px}

/* ---------- Kaarten / blokken ---------- */
.kaart{
  background:linear-gradient(180deg,var(--card),var(--bg-2));
  border:1px solid var(--soft);border-radius:var(--rond);padding:20px;
}
.kaart.goud{border-color:var(--line);box-shadow:var(--gloed)}

/* ---------- Invoervelden ---------- */
input,select,textarea{
  width:100%;padding:11px 13px;border-radius:var(--rond-k);
  border:1px solid var(--soft);background:var(--bg-2);color:var(--text);font:inherit;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
label{font-size:.8rem;font-weight:700;color:var(--muted)}

/* ---------- Labels / badges ---------- */
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.4px}
.badge.goud{background:var(--grad);color:var(--on-gold)}
.badge.ok{background:rgba(74,222,128,.14);color:var(--ok)}
.badge.warn{background:rgba(251,191,36,.14);color:var(--warn)}
.badge.bad{background:rgba(248,113,113,.14);color:var(--bad)}

/* ---------- Tabellen ---------- */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font-size:.72rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--soft)}
tbody tr:hover{background:rgba(224,165,38,.07)}

/* ---------- Logo-blokje (zoals in het paneel) ---------- */
.merk-ico{width:40px;height:40px;border-radius:11px;background:var(--grad);display:grid;place-items:center;box-shadow:var(--gloed)}