:root {
  --bg: #0f1115;
  --card: rgba(24,27,33,0.42);
  --card2: rgba(31,35,43,0.38);
  --border: #2a2e37;
  --text: #e8e8ea;
  --muted: #8b8f99;
  --accent: #e8112d;
  --link: #4aa3ff;
  --hoog: #e8112d;
  --midden: #e8a112;
  --laag: #3ba55c;
  --up: #3ba55c;
  --down: #e8112d;
  --logo-red-bg: #ffffff;
  --logo-red-text: #000000;
  --logo-robin-bg: #e8112d;
  --logo-robin-text: #ffffff;
}

.brand-logo { text-decoration: none; }
.brand-logo .red { color: var(--logo-red-text); background: var(--logo-red-bg); padding: 2px 6px; border-radius: 4px 0 0 4px; }
.brand-logo .robin { color: var(--logo-robin-text); background: var(--logo-robin-bg); padding: 2px 6px; border-radius: 0 4px 4px 0; }

/* stevige kleurvlekken op de achtergrond - moet genoeg contrast hebben om het vervagen ook
   echt zichtbaar te maken, anders is er niks om "doorheen" te vervagen (net als Apple's
   kleurrijke wallpapers achter Liquid Glass, niet een vlakke effen kleur) */
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(232,17,45,0.55), transparent 45%),
    radial-gradient(circle at 88% 12%, rgba(74,163,255,0.45), transparent 50%),
    radial-gradient(circle at 25% 92%, rgba(168,85,247,0.35), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(232,17,45,0.3), transparent 50%),
    var(--bg);
  background-attachment: fixed;
}

/* --- Liquid Glass - vervaagde, doorschijnende oppervlakken, zoals Apple's iOS/macOS-huisstijl ---
   Werkt hub-breed: elk onderdeel (in elke app én in dashboard-widgets) dat een van deze klassen
   gebruikt, of de --card/--card2 kleurvariabelen, krijgt automatisch het glaseffect. */
.card, .card2, .modal, .widget, .tool, .menu, .expense, .trip, .link-card, .result-card,
.file-item, .options, .summary, .countdown-hero, .dropzone, .editor, .link-tile .ico,
header, select, textarea,
input:not([type=range]):not([type=checkbox]):not([type=color]),
button.ghost {
  backdrop-filter: blur(34px) saturate(180%);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 30px rgba(0,0,0,0.3);
}
/* subtiele lichtglans bovenaan - het "glasrand"-effect */
.card, .card2, .modal, .widget, .countdown-hero, .result-card, .link-card, .trip, .expense {
  position: relative;
}
.card::before, .modal::before, .widget::before, .countdown-hero::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.1), transparent 40%);
  pointer-events: none;
}
button:not(.ghost) {
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 4px 14px rgba(232,17,45,0.35);
}