:root {
  --bg: #0f1115;
  --card: rgba(24,27,33,0.42);
  --card2: rgba(31,35,43,0.38);
  --border: #2a2e37;
  --text: #e8e8ea;
  --muted: #ffffff;
  --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; }

body {
  background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url('https://images.unsplash.com/photo-1548943544-56e76b7c16d0?q=80&w=1335&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* --- 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);
}