/* Dreamverse — spirituele opmaak.
   Eén wereld, bewust donker: dit open je om zeven uur 's ochtends in het donker.
   Het licht komt uit de kleuren zelf. De zeven chakra's zijn geen versiering maar
   de kleurcode van de app: elk paneel krijgt het veld dat bij het gevoel past. */

:root {
  --void: #0A0714;
  --deep: #120C22;
  --panel: rgba(13, 7, 26, .92);
  --raised: rgba(52, 34, 92, .55);
  --ink: #F2EEFB;
  --muted: #A79ACB;
  --line: rgba(167, 154, 203, .22);
  --glow: rgba(255, 255, 255, .9);

  /* De zeven velden */
  --root: #E2554F;
  --sacral: #F0873C;
  --solar: #F2C64C;
  --heart: #4FBF86;
  --throat: #4A9FE2;
  --third-eye: #6E62DA;
  --crown: #B369DE;

  --display: "Cormorant Garamond", Georgia, serif;
  --body: "Karla", "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
  margin: 0;
  padding: 0 1.1rem 5rem;
  position: relative;
  overflow-x: hidden;
}

/* Het spectrum. Zeven velden die vanuit het midden naar buiten waaieren, zoals
   het licht achter een mediterende figuur: violet bovenin, rood onderaan, en
   daartussen de rest. Bewust verzadigd - de app mocht mystieker. */
body::before {
  content: "";
  position: fixed;
  inset: -25vh -20vw;
  z-index: -3;
  background:
    radial-gradient(40% 32% at 50% 0%,  rgba(214, 150, 255, .85), transparent 70%),
    radial-gradient(44% 36% at 12% 12%, rgba(120, 108, 255, .70), transparent 72%),
    radial-gradient(44% 36% at 88% 12%, rgba(74, 176, 255, .68), transparent 72%),
    radial-gradient(48% 38% at 4%  44%, rgba(64, 214, 150, .55), transparent 74%),
    radial-gradient(48% 38% at 96% 44%, rgba(255, 214, 92, .52), transparent 74%),
    radial-gradient(52% 42% at 18% 86%, rgba(255, 146, 60, .55), transparent 76%),
    radial-gradient(52% 42% at 82% 92%, rgba(255, 92, 86, .55), transparent 76%),
    linear-gradient(180deg, #241640, #120A24 55%, var(--void));
  filter: blur(26px) saturate(1.7) brightness(1.25);
  animation: ademen 26s ease-in-out infinite alternate;
}
@keyframes ademen {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.06) translateY(-1.5%); }
}

/* Stralenkrans achter de kop: het licht dat uit de figuur komt. */
body::marker { content: none; }
.stralen {
  position: fixed; top: -18vh; left: 50%; width: min(150vw, 74rem); aspect-ratio: 1;
  transform: translateX(-50%); z-index: -2; pointer-events: none; opacity: .9;
  background: conic-gradient(from 200deg,
    rgba(255,92,86,.4), rgba(255,146,60,.4), rgba(255,214,92,.4),
    rgba(64,214,150,.4), rgba(74,176,255,.4), rgba(120,108,255,.4),
    rgba(214,150,255,.4), rgba(255,92,86,.4));
  -webkit-mask-image: radial-gradient(circle, #000 8%, rgba(0,0,0,.55) 34%, transparent 66%);
  mask-image: radial-gradient(circle, #000 8%, rgba(0,0,0,.55) 34%, transparent 66%);
  animation: draaien 110s linear infinite;
}
@keyframes draaien { to { transform: translateX(-50%) rotate(360deg); } }

/* De energiegolven, het beeld waar je om vroeg. */
.golven {
  position: fixed; inset: -10%; z-index: -2; pointer-events: none;
  background: url("golven.svg") center top / cover no-repeat;
  opacity: 1; mix-blend-mode: screen;
  filter: saturate(1.5) brightness(1.35);
  animation: wiegen 24s ease-in-out infinite alternate;
}
@keyframes wiegen {
  from { transform: scale(1.04) translateY(0) rotate(-.6deg); }
  to   { transform: scale(1.14) translateY(-2.5%) rotate(.6deg); }
}

/* Een tweede laag golven, gespiegeld en trager, zodat het licht leeft in
   plaats van stilstaat. */
.golven-twee {
  position: fixed; inset: -15%; z-index: -2; pointer-events: none;
  background: url("golven.svg") center top / cover no-repeat;
  opacity: .55; mix-blend-mode: screen;
  transform: scaleX(-1);
  filter: saturate(1.6) hue-rotate(35deg) blur(2px);
  animation: wiegen-twee 41s ease-in-out infinite alternate;
}
@keyframes wiegen-twee {
  from { transform: scaleX(-1) scale(1.1) translateY(-2%); }
  to   { transform: scaleX(-1) scale(1.02) translateY(1%); }
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .6;
  background-image: url("geometry.svg");
  background-repeat: no-repeat;
  background-position: center 4vh;
  background-size: min(150vw, 76rem) auto;
}

.wrap { max-width: 54rem; margin: 0 auto; display: flex; flex-direction: column; gap: 2.6rem; }

/* Kop */
header.top { display: flex; flex-direction: column; gap: .8rem; padding: 4rem 0 0; text-align: center; align-items: center; }

.meta {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: baseline; justify-content: center;
  font-size: .7rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--crown);
}
.meta .dim { color: var(--muted); font-weight: 500; letter-spacing: .18em; }

h1 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.8rem, 9vw, 5rem);
  line-height: 1.02;
  letter-spacing: .01em;
  margin: 0;
  background: linear-gradient(96deg, var(--root), var(--sacral) 14%, var(--solar) 30%,
              var(--heart) 48%, var(--throat) 66%, var(--third-eye) 82%, var(--crown));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Zonder deze terugval is de titel onzichtbaar waar background-clip faalt. */
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 { color: var(--ink); -webkit-text-fill-color: currentColor; background: none; }
}

.sub { color: var(--muted); margin: 0; max-width: 34rem; font-size: 1.02rem; }

/* De gids */
.guide {
  display: flex; gap: 1.2rem; align-items: center;
  background: var(--panel);
  backdrop-filter: blur(14px);
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 1.1rem 1.3rem;
  position: relative;
  background-image:
    linear-gradient(var(--panel), var(--panel)),
    linear-gradient(100deg, var(--crown), var(--throat) 35%, var(--heart) 60%, var(--solar) 85%, var(--sacral));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 46px rgba(179, 105, 222, .18);
}

.chakras { position: relative; width: 3.4rem; height: 5.2rem; flex: none; }
.chakras .halo {
  position: absolute; left: 50%; top: 50%; width: 4.6rem; height: 4.6rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 65%);
  animation: breathe 6s ease-in-out infinite;
}
.chakras i {
  position: absolute; left: 50%; width: .62rem; height: .62rem;
  margin-left: -.31rem; border-radius: 50%;
  animation: breathe 4.5s ease-in-out infinite;
}
.chakras i:nth-child(2) { top: 3%;  background: var(--crown);     box-shadow: 0 0 12px var(--crown);     animation-delay: 0s; }
.chakras i:nth-child(3) { top: 18%; background: var(--third-eye); box-shadow: 0 0 12px var(--third-eye); animation-delay: .3s; }
.chakras i:nth-child(4) { top: 33%; background: var(--throat);    box-shadow: 0 0 12px var(--throat);    animation-delay: .6s; }
.chakras i:nth-child(5) { top: 48%; background: var(--heart);     box-shadow: 0 0 12px var(--heart);     animation-delay: .9s; }
.chakras i:nth-child(6) { top: 63%; background: var(--solar);     box-shadow: 0 0 12px var(--solar);     animation-delay: 1.2s; }
.chakras i:nth-child(7) { top: 78%; background: var(--sacral);    box-shadow: 0 0 12px var(--sacral);    animation-delay: 1.5s; }
.chakras i:nth-child(8) { top: 93%; background: var(--root);      box-shadow: 0 0 12px var(--root);      animation-delay: 1.8s; }
@keyframes breathe { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }
.chakras .halo { transform-origin: center; }
.guide.listening .chakras i { animation-duration: 1.3s; }

.guide-name { margin: 0; font-size: .68rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--crown); }
.guide-line { margin: 0; font-family: var(--display); font-size: 1.35rem; font-weight: 300; font-style: italic; line-height: 1.4; }

/* Invoer */
.composer {
  background: var(--panel);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(179, 105, 222, .3);
  box-shadow: 0 0 40px rgba(110, 98, 218, .16), inset 0 1px 0 rgba(255,255,255,.06);
  border-radius: 20px;
  padding: 1.25rem 1.3rem 1.3rem;
  display: flex; flex-direction: column; gap: .85rem;
}
/* De drie vragen in het invoerkader zijn de koppen van dit deel: wat droomde
   je, hoe wil je hem gevisualiseerd, hoe wil je hem geanalyseerd. Ze stonden op
   .62 en .68rem in muted grijs - kleiner dan de knoppen eronder, terwijl ze de
   vraag stellen waar die knoppen het antwoord op zijn. */
.composer label, .kwaliteit-kop {
  font-size: .84rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

textarea {
  width: 100%; min-height: 7rem; resize: vertical;
  background: rgba(10, 7, 20, .55); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  padding: .9rem 1rem;
  font-family: var(--display); font-size: 1.25rem; font-weight: 300; line-height: 1.5;
}
textarea::placeholder { color: rgba(167, 154, 203, .55); font-style: italic; }
textarea:focus-visible { outline: 2px solid var(--crown); outline-offset: 2px; }

.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.spacer { margin-left: auto; }

button {
  font-family: var(--body); font-size: .84rem; font-weight: 600;
  background: var(--raised); color: var(--ink);
  border: 1px solid var(--line); border-radius: 100px;
  padding: .5rem 1.15rem; cursor: pointer;
  /* Een knop met een afgekapt woord leest als een fout; liever afbreken naar de
     volgende regel dan het opschrift halveren. */
  white-space: nowrap; flex-shrink: 0;
  transition: border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
button:hover:not([disabled]) { border-color: var(--crown); box-shadow: 0 0 18px rgba(179, 105, 222, .25); }
button:focus-visible { outline: 2px solid var(--crown); outline-offset: 3px; }
button[disabled] { opacity: .4; cursor: default; }

button.primary {
  background: linear-gradient(100deg, var(--crown), var(--third-eye) 45%, var(--throat));
  background-size: 200% 100%;
  color: #fff; border-color: transparent;
  box-shadow: 0 0 30px rgba(110, 98, 218, .5);
  animation: gloeien 8s ease-in-out infinite alternate;
}
@keyframes gloeien {
  from { background-position: 0% 50%; box-shadow: 0 0 24px rgba(110, 98, 218, .4); }
  to   { background-position: 100% 50%; box-shadow: 0 0 40px rgba(179, 105, 222, .6); }
}
button.primary:hover:not([disabled]) { filter: brightness(1.12); }
button.ghost { background: transparent; font-weight: 500; font-size: .78rem; color: var(--muted); }
button.rec {
  background: linear-gradient(100deg, var(--root), var(--sacral));
  color: #fff; border-color: transparent;
  box-shadow: 0 0 22px rgba(226, 85, 79, .4);
}

.status { font-size: .86rem; color: var(--muted); min-height: 1.3rem; margin: 0; }
.status.err { color: #F5A08F; }

/* Speler */
.player { display: flex; flex-direction: column; }
.stage {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  background: #06040D;
  border: 1px solid var(--line); border-bottom: none;
  border-radius: 20px 20px 0 0; overflow: hidden;
}
.stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage .painted {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  animation: emerge 1600ms ease both;
}
@keyframes emerge { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stage .painted { animation: none; } }

.fade { animation: fade 1100ms ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.drift { animation: drift 26s ease-in-out infinite alternate; transform-origin: center; }
@keyframes drift { from { transform: scale(1.03); } to { transform: scale(1.1) translateY(-1.5%); } }
.shimmer { animation: shimmer 7s ease-in-out infinite alternate; }
@keyframes shimmer { from { opacity: .4; } to { opacity: 1; } }
.turn { animation: turn 90s linear infinite; transform-origin: 400px 250px; }
@keyframes turn { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .fade, .drift, .shimmer, .turn, .chakras i, .chakras .halo,
  .golven, .golven-twee, button.primary, body::before, .stralen { animation: none; }
}

.caption {
  background: var(--panel);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 20px 20px; padding: 1.2rem 1.3rem 1.1rem;
  display: flex; flex-direction: column; gap: 1rem; min-height: 10rem;
}
.narration {
  font-family: var(--display); font-weight: 300;
  font-size: 1.4rem; line-height: 1.45; margin: 0; flex: 1; text-wrap: pretty;
}
.bar { display: flex; gap: .35rem; }
.bar span { height: 2px; flex: 1; background: var(--line); border-radius: 2px; transition: background 400ms ease, box-shadow 400ms ease; }
.bar span.done { background: var(--crown); box-shadow: 0 0 8px var(--crown); }
.counter { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .1em; }

/* Secties */
section { display: flex; flex-direction: column; gap: 1.1rem; }
.head-rule {
  display: flex; flex-direction: column; gap: .25rem; align-items: center; text-align: center;
  padding-top: 1.4rem; position: relative; border-top: none;
}
.head-rule::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--root), var(--sacral), var(--solar),
              var(--heart), var(--throat), var(--third-eye), var(--crown), transparent);
  opacity: .65;
}
h2 { text-shadow: 0 0 26px rgba(179, 105, 222, .45); }
h2 { font-family: var(--display); font-weight: 300; font-size: 1.9rem; letter-spacing: .01em; margin: 0; }
.head-rule p { margin: 0; color: var(--muted); font-size: .92rem; max-width: 34rem; }

.threads { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .9rem; }
.thread {
  background: var(--panel); backdrop-filter: blur(10px);
  border: 1px solid rgba(74, 159, 226, .28); border-radius: 16px;
  box-shadow: 0 0 26px rgba(74, 159, 226, .12);
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .4rem;
}
.thread .tag { font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--throat); }
.thread p { margin: 0; font-size: .9rem; color: #CFC4E4; }
.thread p.then { color: var(--ink); }

.reading { display: flex; flex-direction: column; gap: .9rem; }
.block {
  background: var(--panel); backdrop-filter: blur(10px);
  border: 1px solid rgba(179, 105, 222, .24); border-radius: 16px;
  box-shadow: 0 0 30px rgba(110, 98, 218, .12);
  padding: 1.2rem 1.35rem; display: flex; flex-direction: column; gap: .5rem;
  position: relative; overflow: hidden;
}
.block::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
}
.block:nth-of-type(1)::before { background: linear-gradient(var(--sacral), var(--solar)); }
.block:nth-of-type(2)::before { background: linear-gradient(var(--heart), var(--throat)); }
.block.future::before { background: linear-gradient(var(--third-eye), var(--crown)); }
.block .lbl { font-size: .65rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.block p { margin: 0; font-family: var(--display); font-weight: 300; font-size: 1.28rem; line-height: 1.5; }
.block.future { background: rgba(43, 28, 74, .55); }
.block.future .lbl { color: var(--crown); }

.question {
  font-family: var(--display); font-weight: 400; font-style: italic;
  color: #F7D877; font-size: 1.3rem; text-align: center;
  margin: .4rem 0 0; padding: 1rem 1.4rem;
  background: rgba(13, 7, 26, .92); border-radius: 14px;
  border: 1px solid rgba(242, 198, 76, .3);
}

.archive { display: flex; flex-direction: column; gap: .45rem; }
.entry {
  display: flex; gap: .9rem; align-items: center;
  padding: .6rem .95rem; background: var(--panel); backdrop-filter: blur(8px);
  border: 1px solid rgba(179, 105, 222, .18); border-radius: 12px; font-size: .9rem;
  border-left: 3px solid var(--crown);
  transition: border-color 250ms ease, transform 250ms ease;
}
.entry:hover { border-left-color: var(--solar); transform: translateX(3px); }
.entry .no { color: var(--crown); font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.entry .txt { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Lagen */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .9rem; }
.tier {
  background: var(--panel); backdrop-filter: blur(10px);
  border: 1px solid rgba(179, 105, 222, .22); border-radius: 16px;
  box-shadow: 0 0 24px rgba(110, 98, 218, .1);
  padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem;
}
.tier.on {
  border-color: rgba(179, 105, 222, .5);
  background: rgba(43, 28, 74, .6);
  box-shadow: 0 0 32px rgba(179, 105, 222, .18);
}
.tier-name { font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--crown); }
.tier p { margin: 0; font-size: .9rem; color: var(--muted); }
.tier button { align-self: flex-start; margin-top: .2rem; }

footer.end {
  border-top: 1px solid var(--line); padding-top: 1.2rem;
  color: var(--muted); font-size: .85rem; display: flex; flex-direction: column; gap: .7rem;
}

/* Het gesprek met Vera */
.call { align-self: center; margin-left: auto; flex: none; }

/* Een eigen display-waarde wint van het hidden-attribuut, dus die moet je
   expliciet terugzetten. Anders staat elk paneel open bij het laden. */
[hidden] { display: none !important; }

.call-panel {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  background: var(--panel); backdrop-filter: blur(14px);
}
.call-stage { position: relative; aspect-ratio: 16 / 10; background: #06040D; }
.call-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }

.call-veil {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: radial-gradient(circle at 50% 45%, rgba(110, 98, 218, .35), rgba(10, 7, 20, .92) 70%);
  text-align: center; padding: 1.5rem;
}
.call-veil[hidden] { display: none; }
.call-veil span {
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid var(--crown);
  box-shadow: 0 0 30px rgba(179, 105, 222, .5);
  animation: breathe 3s ease-in-out infinite;
}
.call-veil p { margin: 0; font-family: var(--display); font-size: 1.2rem; font-weight: 300; }

.call-bar { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; }
.call-time {
  font-family: var(--display); font-size: 1.5rem; font-weight: 300;
  color: var(--ink); font-variant-numeric: tabular-nums;
  min-width: 3.4rem; transition: color 400ms ease;
}
.call-time::after {
  content: " resterend"; font-family: var(--body); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.call-time.bijna { color: var(--sacral); }
.call-time.kritiek { color: var(--root); }
#hangup { background: linear-gradient(100deg, var(--root), var(--sacral)); color: #fff; border-color: transparent; }

@media (prefers-reduced-motion: reduce) { .call-veil span { animation: none; } }


/* Naam van de dromer */
.who { display: flex; flex-direction: column; gap: .25rem; margin-left: auto; flex: none; }
.who label { font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.who input {
  width: 8.5rem; background: rgba(10, 7, 20, .55); color: var(--ink);
  border: 1px solid var(--line); border-radius: 100px;
  padding: .35rem .85rem; font-family: var(--display); font-size: 1rem;
}
.who input::placeholder { color: rgba(167, 154, 203, .5); font-style: italic; }
.who input:focus-visible { outline: 2px solid var(--crown); outline-offset: 2px; }
.call { margin-left: 0; }

/* Verbruiksmeter */
.meter { display: flex; flex-direction: column; gap: .9rem; }
.meter-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .8rem; }
.meter-cel {
  background: var(--panel); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 14px;
  padding: .9rem 1rem; display: flex; flex-direction: column; gap: .15rem;
}
.meter-cel b {
  font-family: var(--display); font-weight: 300; font-size: 1.9rem;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.meter-cel span { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.meter-cel.onbekend b { color: var(--sacral); font-size: 1.1rem; }
.meter-cel.uitgelicht { border-color: rgba(179, 105, 222, .5); background: rgba(43, 28, 74, .55); }
.meter-cel.uitgelicht b { color: var(--crown); }
.meter-noot { font-size: .85rem; color: var(--muted); margin: 0; }
.meter-leeg { color: var(--muted); margin: 0; font-size: .9rem; }
table.dagen { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.dagen th, table.dagen td { text-align: right; padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
table.dagen th:first-child, table.dagen td:first-child { text-align: left; }
table.dagen th { color: var(--muted); font-weight: 500; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
table.dagen td { font-variant-numeric: tabular-nums; }

/* Pakket en saldo */
.account {
  display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: baseline;
  background: var(--panel); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1.2rem;
}
.account div { display: flex; flex-direction: column; gap: .1rem; }
.account b {
  font-family: var(--display); font-weight: 300; font-size: 1.5rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.account span { font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.account .op b { color: var(--sacral); }
.account .schakel { margin-left: auto; flex-direction: row; gap: .4rem; align-items: center; }
.account .schakel button { font-size: .74rem; padding: .3rem .8rem; }
.account .schakel button[aria-pressed="true"] { border-color: var(--crown); color: var(--crown); }

/* Telefoon. De gidskaart legt op een breed scherm alles op één regel; op een
   smal scherm moet dat onder elkaar, anders valt de belknop buiten beeld. */
@media (max-width: 640px) {
  body { padding: 0 .9rem 4rem; }
  header.top { padding-top: 2.5rem; }

  .guide { flex-wrap: wrap; gap: .9rem; }
  .guide .guide-text { flex: 1 1 60%; min-width: 0; }
  .guide-line { font-size: 1.15rem; }

  .who { margin-left: 0; flex: 1 1 100%; }
  .who input { width: 100%; }
  .call { width: 100%; margin-left: 0; text-align: center; }

  /* Knoppenrijen: liever twee brede knoppen dan vier die inklappen. */
  .composer .row button { flex: 1 1 auto; }
  .composer .row .spacer { display: none; }

  .account { gap: 1rem 1.2rem; }
  .account .schakel { margin-left: 0; flex: 1 1 100%; flex-wrap: wrap; }

  .caption .row .spacer { display: none; }
  .meter-cel b { font-size: 1.6rem; }

  /* Een tabel met vijf kolommen past niet; laat hem zelf schuiven. */
  table.dagen { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Vera's gezicht, met de chakra's als lichtkolom ernaast */
.portret { position: relative; flex: none; display: flex; align-items: center; gap: .6rem; }
.portret img {
  width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover;
  object-position: 50% 22%;            /* haar ogen, niet haar schouders */
  border: 1px solid rgba(179, 105, 222, .45);
  box-shadow: 0 0 28px rgba(179, 105, 222, .28);
}
.portret .chakras { width: 1rem; height: 4.6rem; }
.portret .chakras i { width: .5rem; height: .5rem; margin-left: -.25rem; }
.portret .chakras .halo { width: 3rem; height: 3rem; }
.guide.listening .portret img { border-color: var(--water); box-shadow: 0 0 34px rgba(99, 207, 214, .5); }

/* Het bewegende kernmoment */
.stage .kernmoment {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; background: #06040D;
}
.kern-merk {
  position: absolute; left: .8rem; bottom: .8rem; z-index: 2;
  font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); background: rgba(10, 7, 20, .6); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 100px; padding: .25rem .7rem;
}
.kern-merk.bezig { color: var(--muted); }

@media (max-width: 640px) {
  .portret img { width: 4rem; height: 4rem; }
  .portret .chakras { height: 3.4rem; }
}

/* Het antwoord op de slotvraag */
.antwoord {
  display: flex; flex-direction: column; gap: .6rem;
  background: rgba(43, 28, 74, .5); backdrop-filter: blur(10px);
  border: 1px solid rgba(242, 198, 76, .3); border-radius: 16px;
  padding: 1.1rem 1.25rem; box-shadow: 0 0 30px rgba(242, 198, 76, .1);
}
.antwoord label { font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--solar); }
.antwoord textarea { min-height: 4rem; font-size: 1.1rem; }
.antwoord-uitleg { font-size: .82rem; color: #CFC4E4; }
.antwoord.bewaard { border-color: rgba(79, 191, 134, .45); }
.antwoord.bewaard .antwoord-uitleg { color: var(--heart); }

/* ------------------------------------------------------------------------ */
/* Kleur, verdeeld. Elk blok krijgt zijn eigen chakra in plaats van overal    */
/* dezelfde violette gloed.                                                   */

.wrap > section:nth-of-type(1) { --tint: var(--throat); }
.wrap > section:nth-of-type(2) { --tint: var(--heart); }
.wrap > section:nth-of-type(3) { --tint: var(--solar); }
.wrap > section:nth-of-type(4) { --tint: var(--sacral); }
.wrap > section:nth-of-type(5) { --tint: var(--root); }
.wrap > section:nth-of-type(6) { --tint: var(--third-eye); }
.wrap > section { --tint: var(--crown); }

section h2 { color: var(--tint); text-shadow: 0 0 30px currentColor; }
section .tier, section .block, section .thread, section .meter-cel, section .entry {
  border-color: color-mix(in srgb, var(--tint) 45%, transparent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--tint) 18%, transparent);
}
section .entry { border-left-width: 3px; border-left-color: var(--tint); }

/* Het archief loopt door de zeven velden heen, oud naar nieuw. */
.archive .entry:nth-child(7n+1) { border-left-color: var(--crown); }
.archive .entry:nth-child(7n+2) { border-left-color: var(--third-eye); }
.archive .entry:nth-child(7n+3) { border-left-color: var(--throat); }
.archive .entry:nth-child(7n+4) { border-left-color: var(--heart); }
.archive .entry:nth-child(7n+5) { border-left-color: var(--solar); }
.archive .entry:nth-child(7n+6) { border-left-color: var(--sacral); }
.archive .entry:nth-child(7n+7) { border-left-color: var(--root); }
.archive .entry .no { color: inherit; }
.archive .entry:nth-child(7n+1) .no { color: var(--crown); }
.archive .entry:nth-child(7n+2) .no { color: var(--third-eye); }
.archive .entry:nth-child(7n+3) .no { color: var(--throat); }
.archive .entry:nth-child(7n+4) .no { color: var(--heart); }
.archive .entry:nth-child(7n+5) .no { color: var(--solar); }
.archive .entry:nth-child(7n+6) .no { color: var(--sacral); }
.archive .entry:nth-child(7n+7) .no { color: var(--root); }

/* De meter: elk cijfer zijn eigen kleur, zodat het geen grijze tabel is. */
.meter-cijfers .meter-cel:nth-child(1) b { color: var(--throat); }
.meter-cijfers .meter-cel:nth-child(2) b { color: var(--heart); }
.meter-cijfers .meter-cel:nth-child(3) b { color: var(--solar); }
.meter-cijfers .meter-cel:nth-child(4) b { color: var(--sacral); }
.meter-cijfers .meter-cel:nth-child(5) b { color: var(--root); }
.meter-cijfers .meter-cel:nth-child(6) b { color: var(--crown); }

/* De drie duidingsblokken elk hun eigen licht. */
.reading .block:nth-of-type(1) { border-color: rgba(240, 135, 60, .45); }
.reading .block:nth-of-type(1) .lbl { color: var(--sacral); }
.reading .block:nth-of-type(2) { border-color: rgba(79, 191, 134, .45); }
.reading .block:nth-of-type(2) .lbl { color: var(--heart); }
.reading .block.future { border-color: rgba(110, 98, 218, .55); }

/* Knoppen: niet allemaal violet. */
#mic { border-color: rgba(79, 191, 134, .5); color: var(--heart); }
#clear { border-color: rgba(226, 85, 79, .35); }
#voice { border-color: rgba(74, 159, 226, .5); color: var(--throat); }
.call { border-color: rgba(242, 198, 76, .55); color: var(--solar); }
.account .schakel button[aria-pressed="true"] { border-color: var(--heart); color: var(--heart); }

/* De grond minder blauwpaars, meer diepe nacht met warmte eronder. */
:root { --void: #080611; --deep: #150E28; }

.archive .entry { cursor: pointer; }
.archive .entry:focus-visible { outline: 2px solid var(--crown); outline-offset: 2px; }
.archive .entry::after {
  content: "terugkijken"; margin-left: auto; flex: none;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); opacity: 0; transition: opacity 200ms ease;
}
.archive .entry:hover::after, .archive .entry:focus-visible::after { opacity: 1; }

/* ------------------------------------------------------------------------ */
/* Leesbaarheid boven al dat licht. Losse tekst staat niet op een kaart en   */
/* verdwijnt anders in de achtergrond; een donkere schaduw houdt hem staan    */
/* zonder de kleuren te dempen.                                               */

.sub, .head-rule p, .meta, .meter-noot, footer.end, .antwoord-uitleg {
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 2px 18px rgba(0,0,0,.75);
}
section h2 {
  font-weight: 400;
  text-shadow: 0 1px 3px rgba(4, 2, 10, .95), 0 3px 16px rgba(4, 2, 10, .9),
               0 0 34px rgba(4, 2, 10, .7);
}
h1 { filter: drop-shadow(0 2px 10px rgba(0,0,0,.55)); }

/* De kop en de tussenkopjes krijgen een eigen donkere sluier, zodat het
   spectrum eromheen fel mag blijven. */
header.top::before, .head-rule::after {
  content: ""; position: absolute; z-index: -1;
  background: radial-gradient(closest-side, rgba(8,6,17,.82), transparent 78%);
}
header.top { position: relative; }
header.top::before { inset: -8% -14%; }
.head-rule::after { inset: -60% -20% -120%; }

footer.end { background: rgba(8,6,17,.5); border-radius: 16px; padding: 1.2rem 1.3rem; }

/* Nog steeds te licht boven de felle plekken: losse tekst krijgt een eigen
   donkere band in plaats van alleen een schaduw. */
.sub, .head-rule p {
  color: #F6F2FF;
  background: rgba(8, 6, 17, .55);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: .5rem .95rem;
}
.meta { background: rgba(8, 6, 17, .5); backdrop-filter: blur(6px); border-radius: 100px; padding: .35rem 1rem; }

/* Het levende doek. Klein gerekend, groot getoond, en vervaagd - daardoor is
   het zacht als licht in plaats van scherp als een grafiek. */
#achtergrond {
  position: fixed; inset: 0; z-index: -4;
  width: 100%; height: 100%;
  filter: blur(30px) saturate(1.45) brightness(1.15);
  transform: scale(1.08);
}

/* De statische golven blijven eroverheen liggen als tweede laag, nu zachter:
   samen geeft dat diepte die één laag niet haalt. */
.golven { opacity: .5; }
body::before { opacity: .55; }

/* Liefde krijgt zijn eigen veld: het hart. */
.reading .block.liefde { border-color: rgba(79, 191, 134, .55); background: rgba(16, 40, 30, .55); }
.reading .block.liefde .lbl { color: var(--heart); }

/* Het voorstel voor vandaag is geen duiding maar een zetje; dus geen kaart maar
   een regel die eruit springt. */
.vandaag {
  display: flex; flex-direction: column; gap: .3rem;
  border-left: 3px solid var(--solar); border-radius: 0 14px 14px 0;
  background: rgba(13, 7, 26, .92);
  padding: .9rem 1.2rem .9rem 1.1rem;
}
.vandaag .lbl { font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--solar); }
.vandaag p { margin: 0; font-family: var(--display); font-size: 1.25rem; font-weight: 300; color: var(--ink); }

/* De naam van het seizoen waar de dromer in zit. */
.seizoen {
  font-family: var(--display); font-style: italic; font-size: 1.05rem;
  color: var(--crown); background: rgba(8,6,17,.55); backdrop-filter: blur(6px);
  border-radius: 100px; padding: .3rem 1.1rem; margin: .3rem 0 0;
}
.seizoen::before { content: "Je zit in: "; font-style: normal; color: var(--muted); font-size: .8rem; }

/* De statische lagen zijn eruit: die dekten de bewegende achtergrond toe.
   Wat overblijft is het levende doek plus de geometrie erover. */
body::before { display: none; }
.golven, .golven-twee, .stralen { display: none; }
body::after { opacity: .34; }
#achtergrond { filter: blur(26px) saturate(1.6) brightness(1.2); z-index: -3; }

/* Losse aankopen onder de speler */
.extras { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding-top: .3rem; }
.extras-kop { font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); width: 100%; }
.koop {
  background: rgba(43, 28, 74, .6); border-color: rgba(242, 198, 76, .45);
  font-weight: 500; font-size: .8rem; display: inline-flex; gap: .5rem; align-items: baseline;
}
.koop b { color: var(--solar); font-weight: 700; }
.koop[disabled] { opacity: .5; }
.extras-melding { width: 100%; margin: .2rem 0 0; font-size: .84rem; color: var(--muted); }
.extras-melding.err { color: #F5A08F; }

/* Losse aankopen zonder dat er een verbeelding openstaat */
.kies-droom {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  background: var(--panel); backdrop-filter: blur(10px);
  border: 1px solid rgba(242, 198, 76, .35); border-radius: 16px;
  padding: 1rem 1.15rem;
}
.kies-droom label { font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.kies-droom select {
  background: rgba(10, 7, 20, .7); color: var(--ink);
  border: 1px solid var(--line); border-radius: 100px;
  padding: .4rem .9rem; font-family: var(--body); font-size: .85rem;
}
.kies-droom .extras-melding { width: 100%; }

/* De zandloper: wat er nu gemaakt wordt.
   Hij blijft onderin het scherm staan. Eerst stond hij bovenaan de pagina, en
   dan koop je onderaan iets en zegt de melding dat de voortgang "hieronder"
   meeloopt terwijl hij twee schermen hoger hangt. */
.voortgang {
  position: sticky; bottom: 1rem; z-index: 40;
  align-self: center; width: fit-content; max-width: 100%;
  display: flex; align-items: center; gap: .7rem; margin: 0;
  background: rgba(20, 12, 38, .94);
  border: 1px solid rgba(242, 198, 76, .5); border-radius: 100px;
  padding: .6rem 1.3rem; font-size: .92rem; color: var(--ink);
  box-shadow: 0 8px 34px rgba(4, 2, 10, .8), 0 0 28px rgba(242, 198, 76, .18);
}
.voortgang.mis { border-color: rgba(245, 160, 143, .6); color: #F5A08F; }
/* De klok: het enige dat elke seconde verspringt, en daarmee het bewijs dat
   er nog iets loopt. Een draaiende zandloper draait ook door als alles dood is. */
.voortgang .klok {
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--solar);
  padding-left: .6rem; margin-left: .2rem;
  border-left: 1px solid rgba(242, 198, 76, .3);
}
.voortgang .zandloper, .status .zandloper {
  font-size: 1.2rem; color: var(--solar);
  animation: keren 2s ease-in-out infinite;
  display: inline-block;
}
@keyframes keren {
  0%, 45% { transform: rotate(0deg); }
  55%, 100% { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) { .voortgang.mis { border-color: rgba(245, 160, 143, .6); color: #F5A08F; }
/* De klok: het enige dat elke seconde verspringt, en daarmee het bewijs dat
   er nog iets loopt. Een draaiende zandloper draait ook door als alles dood is. */
.voortgang .klok {
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--solar);
  padding-left: .6rem; margin-left: .2rem;
  border-left: 1px solid rgba(242, 198, 76, .3);
}
.voortgang .zandloper, .status .zandloper { animation: none; } }

/* ------------------------------------------------------------------------ */
/* Vera's introductie: het scherm dat je bij openen ziet.                     */

.intro {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 4, 13, .82); backdrop-filter: blur(10px);
  padding: 1.2rem; overflow-y: auto;
}
.intro[hidden] { display: none !important; }

.intro-kaart {
  width: min(38rem, 100%); display: flex; flex-direction: column; gap: 1rem;
  background: rgba(16, 9, 32, .92); backdrop-filter: blur(18px);
  border: 1px solid transparent; border-radius: 22px; padding: 1.4rem;
  background-image:
    linear-gradient(rgba(16,9,32,.92), rgba(16,9,32,.92)),
    linear-gradient(100deg, var(--crown), var(--throat) 35%, var(--heart) 60%, var(--solar) 85%, var(--sacral));
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 0 70px rgba(179, 105, 222, .3);
  max-height: 94vh; overflow-y: auto;
}
.intro-kaart video {
  width: 100%; border-radius: 16px; display: block; background: #06040D;
  aspect-ratio: 16 / 9; object-fit: cover;
}
.intro-tekst {
  margin: 0; font-family: var(--display); font-weight: 300;
  font-size: 1.45rem; line-height: 1.4; text-align: center; color: var(--ink);
}

.intro-velden { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.intro-velden .veld { display: flex; flex-direction: column; gap: .3rem; }
.intro-velden .veld:last-child { grid-column: 1 / -1; }
.intro-velden label, .intro-velden .label {
  font-size: .62rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.intro-velden input, .intro-velden select {
  background: rgba(10, 7, 20, .7); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  padding: .5rem .8rem; font-family: var(--body); font-size: .95rem; width: 100%;
}
.intro-velden input:focus-visible, .intro-velden select:focus-visible {
  outline: 2px solid var(--crown); outline-offset: 2px;
}

.vlaggen { display: flex; gap: .5rem; }
.vlag { font-size: .9rem; padding: .45rem 1rem; }
.vlag[aria-pressed="true"] {
  border-color: var(--heart); color: var(--heart);
  box-shadow: 0 0 20px rgba(79, 191, 134, .3);
}

.minderjarig {
  margin: 0; font-size: .92rem; line-height: 1.5;
  background: rgba(60, 30, 20, .7); border: 1px solid rgba(255, 146, 60, .55);
  border-radius: 14px; padding: .85rem 1rem; color: #FFE0C4;
}
.minderjarig strong { color: var(--sacral); }

@media (max-width: 640px) {
  .intro-velden { grid-template-columns: 1fr; }
  .intro-tekst { font-size: 1.2rem; }
}

/* Een droom weggooien */
.archive .entry .wis {
  margin-left: .4rem; flex: none; padding: .1rem .55rem; font-size: 1rem; line-height: 1;
  background: transparent; border-color: rgba(226, 85, 79, .35); color: var(--muted);
}
.archive .entry .wis:hover { border-color: var(--root); color: var(--root); box-shadow: none; }
.archive .entry::after { margin-left: auto; }

/* Browsers spelen niets met geluid af tot er geklikt is. Dus: gedempt starten
   met een knop eroverheen die niet te missen is. */
.intro-speler { position: relative; }
.geluid-aan {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  background: linear-gradient(100deg, var(--solar), var(--sacral));
  color: #1A1206; border-color: transparent; font-size: 1rem; font-weight: 700;
  padding: .7rem 1.4rem; box-shadow: 0 0 34px rgba(242, 198, 76, .5);
  animation: kloppen 2.4s ease-in-out infinite;
}
.geluid-aan[hidden] { display: none; }
@keyframes kloppen {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .geluid-aan { animation: none; } }

/* Geen pratend hoofd. Lipsynchronisatie vanaf één foto klopt niet en dat zie je
   meteen; een stil portret dat meeademt met haar stem leest als een gids, niet
   als een kapotte avatar. */
.intro-portret {
  position: relative; width: min(15rem, 60%); margin: .4rem auto 0;
  aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(179, 105, 222, .5);
  box-shadow: 0 0 50px rgba(179, 105, 222, .3);
}
.intro-portret img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }

.intro-portret .ring { position: absolute; inset: -14%; pointer-events: none; }
.intro-portret .ring span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(214, 150, 255, .5);
  opacity: 0; transform: scale(.85);
}
.intro-portret.spreekt .ring span { animation: uitdijen 2.6s ease-out infinite; }
.intro-portret.spreekt .ring span:nth-child(2) { animation-delay: .85s; }
.intro-portret.spreekt .ring span:nth-child(3) { animation-delay: 1.7s; }
@keyframes uitdijen {
  0% { opacity: .75; transform: scale(.85); }
  100% { opacity: 0; transform: scale(1.25); }
}
.intro-portret.spreekt { box-shadow: 0 0 70px rgba(214, 150, 255, .5); }

.intro-speler .geluid-aan { top: auto; bottom: -.6rem; }
@media (prefers-reduced-motion: reduce) { .intro-portret .ring span { animation: none; } }

/* De knop stond over haar gezicht. Eronder, gecentreerd. */
.intro-speler { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.intro-speler .geluid-aan {
  position: static; transform: none; bottom: auto; top: auto;
}
.intro-speler .geluid-aan:hover { filter: brightness(1.08); }
@keyframes kloppen {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Vera praat weer. De lipsync is niet volmaakt, maar een bewegend gezicht doet
   meer dan een stilstaand portret - dat is een keuze, geen vergissing. */
.intro-kaart video {
  width: 100%; border-radius: 16px; display: block; background: #06040D;
  aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid rgba(179, 105, 222, .4);
  box-shadow: 0 0 44px rgba(179, 105, 222, .25);
}
.intro-portret { display: none; }

/* Wat wil je van deze droom: alleen de duiding, of beeld erbij. */
.kwaliteiten { display: flex; flex-direction: column; gap: .5rem; }

/* Rijafstand ruimer dan kolomafstand.
   Het "in je pakket"-vlaggetje hangt met top: -.55rem boven zijn knop uit. Zolang
   alles op een regel past valt dat in de marge, maar zodra de rij afbreekt - bij
   Ultra staan er vijf knoppen - botst het vlaggetje van de tweede regel tegen de
   knoppen van de eerste. */
.kwaliteit-knoppen { display: flex; flex-wrap: wrap; gap: 1.1rem .5rem; }
.kwaliteit {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  text-align: left; padding: .55rem .95rem; border-radius: 14px;
  background: rgba(43, 28, 74, .5); border-color: var(--line);
  font-size: .85rem; font-weight: 600;
}
/* De regel onder de naam zegt wat je krijgt en wat het kost. Die stond in
   muted grijs op een donkere knop, en dat is precies de tekst die je moet
   kunnen lezen voordat je kiest. Nu lichter, iets groter en wat zwaarder. */
.kwaliteit small {
  font-weight: 600; font-size: .74rem; letter-spacing: .05em;
  text-transform: uppercase; color: #D8CDEA;
}
/* Gekozen is violet, inbegrepen is groen.
   Allebei waren ze groen, en dan betekent een kleur twee dingen tegelijk: bij
   Ultra stond Supreme groen omdat het in je pakket zit en Standaard groen omdat
   hij aanstond. Violet is dezelfde kleur als de gekozen bril eronder, dus
   "dit heb ik aangeklikt" ziet er nu overal hetzelfde uit. */
.kwaliteit[aria-pressed="true"] {
  border-color: var(--third-eye); color: var(--ink);
  background: rgba(110, 98, 218, .22);
  box-shadow: 0 0 22px rgba(110, 98, 218, .3);
}
.kwaliteit[aria-pressed="true"] small { color: #CFC7F5; }
/* Tekort aan tokens kleurde het aantal geel. Dat was een derde betekenis voor
   een kleur op dezelfde rij knoppen - groen is "in je pakket", violet is
   "gekozen" - en het staat er toch al in woorden onder zodra je klikt. Het
   aantal blijft nu gewoon leesbaar; alleen de rand geeft een zetje. */
.kwaliteit.tekort { border-color: rgba(242, 198, 76, .3); }
.kwaliteit-melding { margin: 0; font-size: .85rem; color: var(--muted); min-height: 1.2rem; }
.kwaliteit-melding.err { color: #F5A08F; }

/* De naam is al bij de introductie gevraagd; hier alleen nog terugtonen. */
.who-bekend { margin: 0; font-size: .85rem; color: var(--muted); }
.who-bekend b { color: var(--ink); font-weight: 600; }
.linkje {
  padding: 0; border: 0; background: none; font-size: .85rem;
  color: var(--throat); text-decoration: underline; cursor: pointer;
}
.linkje:hover { color: var(--heart); }

/* De lijn door alle dromen heen: dit is waarom iemand blijft terugkomen. */
.samen {
  margin: 0 0 1.4rem; padding: 1.2rem 1.5rem;
  border-left: 3px solid var(--third_eye); border-radius: 0 14px 14px 0;
  background: rgba(13, 7, 26, .92);
  font-size: 1.02rem; line-height: 1.65; color: var(--ink);
}

/* Het hoogste wat je pakket geeft: dat is het enige wat nieuws is. */
.kwaliteit { position: relative; }
.kwaliteit .vlagje {
  position: absolute; top: -.55rem; left: .8rem;
  padding: .05rem .5rem; border-radius: 100px;
  background: var(--heart); color: #10121F;
  font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.kwaliteit.beste { border-color: rgba(79, 191, 134, .5); }
/* Staat de inbegrepen optie ook aan, dan wint de keuzekleur voor de rand maar
   blijft het vlaggetje groen: die twee dingen zijn allebei waar. */
.kwaliteit.beste[aria-pressed="true"] { border-color: var(--third-eye); }

/* Het kernmoment in het archief: een regel tekst zegt niet welke nacht dit was,
   dit beeld wel. */
/* Het kernmoment in het archief was 72 bij 44 pixels. Daar herken je geen droom
   in, terwijl dat er juist de bedoeling van is: een regel tekst zegt niet welke
   nacht dit was, dit beeld wel. Nu bijna twee keer zo groot. */
.mini {
  flex: 0 0 auto; width: 128px; height: 80px; border-radius: 10px;
  overflow: hidden; background: rgba(43, 28, 74, .7);
  border: 1px solid var(--line);
}
@media (max-width: 560px) {
  .mini { width: 96px; height: 60px; }
}
.mini img, .mini video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini.bewoog { border-color: rgba(242, 198, 76, .5); box-shadow: 0 0 14px rgba(242, 198, 76, .2); }
.mini.leeg { background: linear-gradient(120deg, rgba(122, 92, 214, .3), rgba(43, 28, 74, .6)); }
.entry:hover .mini { border-color: var(--crown); }

/* Alleen de duiding: geen beeld, dus ook niet de getekende compositie die
   anders invalt. Wat overblijft is het verhaal in vijf stukken. */
.player.alleen-tekst .stage,
.player.alleen-tekst .bar,
.player.alleen-tekst #prev,
.player.alleen-tekst #next,
.player.alleen-tekst .counter,
.player.alleen-tekst .narration { display: none; }
.verhaal {
  padding: 1.8rem 2rem 1.4rem;
  font-family: var(--display); font-size: 1.22rem; line-height: 1.7;
}
.verhaal p { margin: 0 0 1rem; }
.verhaal p:last-child { margin-bottom: 0; }
.verhaal p:first-child::first-letter {
  float: left; font-size: 3.2rem; line-height: .82;
  padding: .1rem .5rem 0 0; color: var(--crown);
}

/* ------------------------------------------------------------------------ */
/* De nieuwe vakken in de duiding.                                           */

.mensen, .tekens { display: flex; flex-direction: column; gap: .7rem; margin-top: .4rem; }
.mens, .teken {
  padding: .6rem .9rem; border-radius: 12px;
  background: rgba(30, 18, 54, .8); border-left: 2px solid var(--throat);
}
.teken { border-left-color: var(--third_eye); }
.mens .wie {
  display: block; font-weight: 600; color: var(--throat);
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: .2rem;
}
.mens p, .teken p { margin: 0; }
.teken .tag { margin-bottom: .25rem; }

.block.nacht p { color: var(--muted); font-style: italic; }

/* De opdracht: één ding, gebiedende wijs. Dat mag eruit springen. */
.opdracht {
  margin-top: .4rem; padding: 1.1rem 1.4rem; border-radius: 14px;
  background: rgba(13, 7, 26, .92);
  border-left: 3px solid var(--solar);
}
.opdracht p {
  margin: .2rem 0 0; font-family: var(--display); font-size: 1.3rem; line-height: 1.4;
}



/* Klopte de vooruitblik? Alleen de dromer oordeelt. */
.oordeel {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin-top: .9rem; padding-top: .8rem;
  border-top: 1px solid rgba(179, 105, 222, .18);
}
.oordeel-vraag { font-size: .8rem; color: var(--muted); margin-right: .3rem; }
.oordeel-knop { padding: .25rem .8rem; font-size: .78rem; border-radius: 100px; }
.oordeel-knop[aria-pressed="true"] {
  border-color: var(--heart); color: var(--heart); background: rgba(79, 191, 134, .12);
}

/* ------------------------------------------------------------------------ */
/* Het spectrum: de pilaar, met per droom de velden die opgloeien of doven.  */

.pilaar-wrap {
  display: grid; grid-template-columns: 230px 1fr; gap: 1.8rem; align-items: start;
}
@media (max-width: 700px) { .pilaar-wrap { grid-template-columns: 170px 1fr; gap: 1rem; } }

.pilaar {
  border-radius: 14px; overflow: hidden; background: #05030B;
  border: 1px solid rgba(179, 105, 222, .28);
  box-shadow: 0 0 40px rgba(110, 98, 218, .2);
}
.pilaar svg { display: block; width: 100%; height: auto; }
.pilaar-cijfer {
  font-family: var(--body); font-size: 31px; font-weight: 600;
  text-anchor: end; letter-spacing: -.5px;
  paint-order: stroke; stroke: #05030B; stroke-width: 4px; stroke-linejoin: round;
}

.pilaar-wie {
  margin: 0 0 .8rem; padding: .5rem .9rem;
  display: inline-block; border-radius: 10px;
  background: rgba(9, 5, 18, .9);
  font-family: var(--display); font-size: 1.4rem; line-height: 1.3; color: #fff;
}

/* De legenda staat op de bewegende achtergrond, en die is op sommige plekken
   fel cyaan of geel. Half doorzichtig is daar niet genoeg: dan lopen de kringen
   van geometry.svg dwars door de woorden. Dus vrijwel dicht. */
.spectrum-legenda {
  background: rgba(9, 5, 18, .94);
  border: 1px solid rgba(179, 105, 222, .3); border-radius: 14px;
  padding: .3rem 1.2rem;
  box-shadow: 0 8px 40px rgba(4, 2, 10, .7);
}
.legenda-rij {
  display: grid; grid-template-columns: 14px 5.8rem 7rem 1fr 3.2rem;
  gap: .7rem; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid rgba(179, 105, 222, .14);
  font-size: .92rem;
}
.legenda-rij:last-child { border-bottom: 0; }
.legenda-rij.stil { opacity: .62; }
.legenda-stip {
  width: 14px; height: 14px; border-radius: 50%; align-self: center;
  box-shadow: 0 0 10px currentColor;
}
.legenda-naam { font-weight: 700; color: #fff; }
.legenda-sans {
  font-family: var(--display); font-style: italic; font-size: 1.02rem;
  color: #C4AEEE;
}
.legenda-thema { color: #E4DCF2; font-size: .88rem; line-height: 1.45; }
.legenda-deel {
  text-align: right; font-weight: 700; font-size: 1rem;
  font-variant-numeric: tabular-nums; color: #fff;
}
@media (max-width: 620px) {
  .legenda-rij { grid-template-columns: 12px 1fr 3rem; }
  .legenda-sans, .legenda-thema { display: none; }
}

/* De tijdlijn eronder: elke droom een kolom, klikken kiest hem. */
.tijdlijn { display: flex; align-items: flex-end; gap: .8rem; margin-top: 1.4rem; }
.tijd-alles { flex: none; padding: .3rem .85rem; font-size: .76rem; }
.tijd-alles[aria-pressed="true"] { border-color: var(--crown); color: var(--crown); }
.spectrum { display: flex; align-items: flex-end; gap: .28rem; overflow-x: auto; padding: .3rem 0 0; }
.kolom {
  flex: 1 0 20px; min-width: 20px; max-width: 46px;
  display: flex; flex-direction: column; gap: .28rem;
  padding: 0; background: none; border: 0; cursor: pointer;
}
.kolom .stapel {
  display: flex; flex-direction: column; height: 48px;
  border-radius: 5px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(179, 105, 222, .2);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.kolom:hover .stapel { box-shadow: 0 0 0 1px var(--crown), 0 0 14px rgba(179, 105, 222, .35); }
.kolom[aria-pressed="true"] .stapel {
  box-shadow: 0 0 0 2px var(--solar), 0 0 18px rgba(242, 198, 76, .4);
}
.kolom[aria-pressed="true"] .kolom-nr { color: var(--solar); }
.kolom-nr { font-size: .58rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.veld { display: block; }

/* De droom zoals hij verteld is, boven de duiding. */
.verteld {
  margin-bottom: .4rem; padding: 1.1rem 1.4rem;
  border-radius: 14px; background: rgba(13, 7, 26, .92);
  border-left: 3px solid var(--sacral);
}
.verteld blockquote {
  margin: .35rem 0 0; font-family: var(--display); font-size: 1.18rem;
  line-height: 1.6; color: var(--ink); font-style: italic;
}
.verteld-wanneer {
  margin: .6rem 0 0; font-size: .78rem; color: var(--muted);
}

/* ------------------------------------------------------------------------ */
/* De poort: inloggen of een account maken. Zonder dit is er niets te zien. */

.poort {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; overflow-y: auto;
  background: rgba(6, 4, 13, .82); backdrop-filter: blur(14px);
}
.poort-kaart {
  width: 100%; max-width: 26rem;
  background: rgba(13, 7, 26, .96);
  border: 1px solid rgba(179, 105, 222, .35); border-radius: 20px;
  padding: 2rem 1.9rem 1.9rem;
  box-shadow: 0 20px 70px rgba(4, 2, 10, .8), 0 0 60px rgba(110, 98, 218, .2);
}
.poort-titel {
  margin: 0; font-family: var(--display); font-weight: 300;
  font-size: 2.4rem; line-height: 1;
  background: linear-gradient(96deg, var(--sacral), var(--heart) 45%, var(--crown));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* De belofte staat boven de uitleg: die zegt waaróm je hier bent, en de uitleg
   pas wat er gebeurt. Andersom gelezen wordt het een handleiding. */
.poort-belofte {
  margin: .9rem 0 .8rem;
  font-family: var(--display); font-size: 1.35rem; line-height: 1.35;
  color: #fff;
}
.poort-sub { margin: 0 0 1.5rem; color: #C9BCDF; font-size: .88rem; line-height: 1.55; }

.poort-tabs { display: flex; gap: .4rem; margin-bottom: 1.3rem; }
.poort-tabs button { flex: 1; font-size: .84rem; padding: .5rem .6rem; }
.poort-tabs button[aria-pressed="true"] {
  border-color: var(--crown); color: #fff;
  background: rgba(110, 98, 218, .28);
}

.poort-velden { display: flex; flex-direction: column; gap: .9rem; }
.poort-velden .veld { display: flex; flex-direction: column; gap: .3rem; }
.poort-velden label {
  font-size: .64rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
}
.poort-velden input {
  font-family: var(--body); font-size: 1rem;
  padding: .6rem .8rem; border-radius: 10px;
  background: rgba(43, 28, 74, .6); color: var(--ink);
  border: 1px solid var(--line);
}
.poort-velden input:focus-visible { outline: 2px solid var(--crown); outline-offset: 2px; }
.veld-hint { font-size: .76rem; color: var(--muted); }
.poort-fout {
  margin: 0; padding: .6rem .8rem; border-radius: 10px;
  background: rgba(242, 120, 100, .14); border: 1px solid rgba(245, 160, 143, .45);
  color: #F5A08F; font-size: .88rem;
}
#poort-door { margin-top: .3rem; }

/* Uitloggen staat bij het saldo: daar staat toch al wie je bent. */
.uitloggen { padding: .3rem .8rem; font-size: .76rem; }

/* Kopen. De betaalpagina is van Stripe; hier staan alleen de knoppen. */
.tier .koop-pakket {
  margin-top: .9rem; align-self: flex-start;
  border-color: var(--heart); color: var(--heart);
  background: rgba(79, 191, 134, .12); font-size: .84rem;
}
.tier .koop-pakket:hover { border-color: var(--heart); box-shadow: 0 0 18px rgba(79, 191, 134, .3); }
.tokenpakketten {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: 0 0 1.2rem; padding: 1rem 1.2rem;
  background: rgba(13, 7, 26, .92); border-radius: 14px;
  border: 1px solid rgba(242, 198, 76, .28);
}
.koop-tokens {
  background: rgba(43, 28, 74, .6); border-color: rgba(242, 198, 76, .45);
  font-size: .84rem; display: inline-flex; gap: .45rem; align-items: baseline;
}
.koop-tokens b { color: var(--solar); }
.koop-melding { width: 100%; margin: .3rem 0 0; font-size: .85rem; color: var(--muted); }
.koop-melding.err { color: #F5A08F; }

/* ------------------------------------------------------------------------ */
/* Je gegevens: meenemen of weghalen.                                        */

.gegevens { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.gegevens-blok {
  background: var(--panel); border: 1px solid rgba(179, 105, 222, .24);
  border-radius: 16px; padding: 1.2rem 1.35rem;
  display: flex; flex-direction: column; gap: .6rem; align-items: flex-start;
}
.gegevens-blok p { margin: 0; color: #D8CDEA; font-size: .9rem; line-height: 1.55; }
.gegevens-blok.gevaar { border-color: rgba(245, 160, 143, .35); }
.gegevens-blok.gevaar .lbl { color: #F5A08F; }
.knop-als-link {
  display: inline-block; text-decoration: none;
  font-family: var(--body); font-size: .84rem; font-weight: 600;
  background: var(--raised); color: var(--ink);
  border: 1px solid var(--heart); border-radius: 100px;
  padding: .5rem 1.15rem;
}
.knop-als-link:hover { box-shadow: 0 0 18px rgba(79, 191, 134, .3); }
.verwijder-vraag { display: flex; flex-direction: column; gap: .5rem; width: 100%; }
.verwijder-vraag label { font-size: .78rem; color: var(--muted); }
.verwijder-vraag input {
  font-family: var(--body); font-size: 1rem; padding: .5rem .7rem;
  border-radius: 10px; background: rgba(43, 28, 74, .6);
  color: var(--ink); border: 1px solid var(--line);
}
.gevaar-knop {
  border-color: rgba(245, 160, 143, .6); color: #F5A08F;
  background: rgba(242, 120, 100, .12);
}
.gevaar-knop:hover { box-shadow: 0 0 18px rgba(245, 160, 143, .3); }
.verwijder-melding { margin: 0; font-size: .85rem; color: var(--muted); }
.verwijder-melding.err { color: #F5A08F; }
.gegevens-voet { margin: 1rem 0 0; font-size: .85rem; color: #CFC4E4; }
.gegevens-voet a { color: var(--throat); }

.afscheid {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 2rem; gap: .8rem;
}
.afscheid h1 { font-family: var(--display); font-weight: 300; font-size: 2.4rem; margin: 0; }
.afscheid p { color: var(--muted); max-width: 26rem; }

/* De privacyverklaring gebruikt dezelfde blokken, maar zonder de bewegende
   achtergrond: dat is een tekst om te lezen, niet om naar te kijken. */
body.tekstpagina #achtergrond { display: none; }
body.tekstpagina::after { opacity: .12; }
body.tekstpagina .meta a { color: var(--crown); text-decoration: none; }
body.tekstpagina .block p + p { margin-top: .7rem; }
body.tekstpagina .end a { color: var(--throat); }

/* Het wachtwoordveld met een oog erin. Typen op een telefoon zonder te kunnen
   kijken wat je typt is de snelste manier om iemand te laten afhaken. */
.ww-veld { position: relative; display: flex; }
.ww-veld input { flex: 1; padding-right: 5.5rem; }
.ww-oog {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  padding: .3rem .7rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  background: rgba(43, 28, 74, .9); border-color: var(--line); color: var(--muted);
}
.ww-oog:hover { color: var(--ink); }
.ww-vergeten { align-self: flex-start; margin-top: .2rem; font-size: .8rem; }

/* Met welk account je binnen bent. Het adres is langer dan de cijfers ernaast,
   dus die krijgt de ruimte en de rest blijft staan waar hij stond. */
.account .wie-ben-ik { min-width: 0; }
.account .wie-ben-ik b {
  font-family: var(--body); font-size: .84rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block; max-width: 15rem;
}

.waaraan-kop {
  margin: 0 0 .8rem; font-size: .64rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}

/* Je tegoed, op de plek waar je het uitgeeft. */
.kwaliteit-balk {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .5rem 1rem; justify-content: space-between;
}
.tegoed {
  font-size: .82rem; color: #CFC4E4;
  display: inline-flex; align-items: baseline; gap: .4rem;
}
.tegoed b { color: #fff; font-weight: 600; }
.tegoed i { color: var(--muted); font-style: normal; opacity: .6; }
.tegoed.op b { color: var(--solar); }

/* Het kijkglas op de webhook. Alleen in beheer. */
.webhooklog {
  margin: 0 0 1.2rem; padding: 1rem 1.2rem; border-radius: 14px;
  background: rgba(13, 7, 26, .92); border: 1px solid rgba(179, 105, 222, .22);
  font-size: .82rem;
}
.webhooklog-kop, .webhooklog-leeg {
  margin: 0 0 .6rem; font-size: .62rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.webhooklog-leeg { margin: 0; }
.webhooklog-rij {
  display: grid; grid-template-columns: 10.5rem 14rem 1fr; gap: .7rem;
  padding: .32rem 0; border-top: 1px solid rgba(179, 105, 222, .12);
  color: #D8CDEA;
}
.webhooklog-rij .wl-tijd { color: var(--muted); font-variant-numeric: tabular-nums; }
.webhooklog-rij .wl-soort { color: #C4AEEE; }
.webhooklog-rij.mis .wl-uit { color: #F5A08F; }
@media (max-width: 700px) { .webhooklog-rij { grid-template-columns: 1fr; gap: .1rem; } }

/* De melding hoort naast de knop waar je op klikte, niet onderaan de pagina. */
.call-hoek { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.call-melding {
  margin: 0; max-width: 20rem; text-align: right;
  font-size: .84rem; line-height: 1.45; color: #D8CDEA;
}
.call-melding.err { color: #F5A08F; }
.call-koop {
  margin-top: .4rem; padding: .3rem .8rem; font-size: .78rem;
  border-color: var(--solar); color: var(--solar);
  background: rgba(242, 198, 76, .12);
}
@media (max-width: 700px) {
  .call-hoek { align-items: stretch; }
  .call-melding { text-align: left; max-width: none; }
}

/* Beheerrij: pakket en saldo met de hand. Alleen zichtbaar met de sleutel. */
.beheerrij {
  display: flex; flex-wrap: wrap; gap: 1.1rem 2rem; align-items: flex-end;
  margin-bottom: 1.1rem; padding: .9rem 1.1rem;
  background: rgba(12, 8, 24, .55); border: 1px solid rgba(216, 205, 234, .16);
  border-radius: 10px;
}
.beheerrij-blok { display: flex; flex-direction: column; gap: .45rem; }
.beheerrij-kop {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(216, 205, 234, .6);
}
.beheerrij-knoppen { display: flex; gap: .4rem; align-items: center; }
.beheerrij-knoppen button { padding: .3rem .7rem; font-size: .78rem; }
.beheerrij-knoppen input {
  width: 6rem; padding: .3rem .5rem; font-size: .82rem;
  background: rgba(255, 255, 255, .06); color: var(--ink);
  border: 1px solid rgba(216, 205, 234, .28); border-radius: 6px;
}
.beheerrij-uitleg {
  flex: 1 1 100%; margin: 0; font-size: .76rem; line-height: 1.5;
  color: rgba(216, 205, 234, .55);
}

/* Opwaarderen: de knop hoort naast het getal dat nul is. */
.opwaardeer {
  margin-left: .7rem; padding: .12rem .55rem;
  font-family: var(--display); font-size: .72rem; letter-spacing: .04em;
  color: var(--solar); background: rgba(242, 198, 76, .12);
  border: 1px solid rgba(242, 198, 76, .45); border-radius: 999px;
  cursor: pointer;
}
.opwaardeer:hover { background: rgba(242, 198, 76, .22); }
.account .schakel [data-opwaarderen] {
  border-color: var(--solar); color: var(--solar);
  background: rgba(242, 198, 76, .12);
}

/* Waar je terechtkomt, licht even op - anders spring je ergens heen en weet je
   niet of je goed zit. */
.tokenpakketten.wijs {
  animation: wijzen 2.4s ease-out 1;
  border-radius: 12px;
}
@keyframes wijzen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 198, 76, 0); }
  15%, 55% { box-shadow: 0 0 0 3px rgba(242, 198, 76, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .tokenpakketten.wijs { animation: none; box-shadow: 0 0 0 3px rgba(242, 198, 76, .55); }
}

/* De beheerkaart ligt boven alles, ook boven het introvenster van Vera (90).
   Dat is het hele punt: de prompt die hier stond lag eronder. */
.beheerpoort {
  position: fixed; inset: 0; z-index: 140;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: rgba(6, 4, 14, .78); backdrop-filter: blur(6px);
}
.beheerpoort-kaart {
  width: 100%; max-width: 26rem; padding: 1.6rem 1.7rem;
  background: rgba(16, 11, 30, .97);
  border: 1px solid rgba(216, 205, 234, .22); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.beheerpoort-kaart h2 {
  margin: 0 0 .5rem; font-size: 1.3rem; color: var(--ink); text-shadow: none;
}
.beheerpoort-kaart p {
  margin: 0 0 1rem; font-size: .85rem; line-height: 1.55;
  color: rgba(216, 205, 234, .78);
}
.beheerpoort-kaart code {
  padding: .05rem .3rem; font-size: .82rem;
  background: rgba(255, 255, 255, .08); border-radius: 4px;
}
.beheerpoort-kaart .ww-veld { margin-bottom: .8rem; }
.beheerpoort-fout {
  margin: 0 0 .8rem !important; color: #F5A08F !important; font-size: .82rem;
}
.beheerpoort-knoppen { display: flex; gap: .6rem; align-items: center; }
.beheerrij.wijs { animation: wijzen 2.4s ease-out 1; }

/* Meeschrijven: te zien dat het gebeurt, zonder het gesprek te storen. */
.call-meeschrijf {
  margin-left: .9rem; font-size: .78rem; letter-spacing: .03em;
  color: rgba(216, 205, 234, .72);
}
.call-meeschrijf::before {
  content: "●"; margin-right: .4rem; color: #F5A08F;
  animation: meeschrijfpuls 1.8s ease-in-out infinite;
}
.call-meeschrijf.mis { color: #F5A08F; }
.call-meeschrijf.mis::before { animation: none; }
@keyframes meeschrijfpuls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .call-meeschrijf::before { animation: none; }
}
@media (max-width: 640px) {
  .call-meeschrijf { margin-left: .5rem; font-size: .72rem; }
}

/* De belofte onder de kop.
   Eerst stond hij in goud en cursief en de regel eronder in weer iets anders -
   drie alinea's onder elkaar met drie verschillende letters. Nu is het een
   blok: dezelfde letter, dezelfde kleur en dezelfde maat als de inleiding
   erboven. De donkere band blijft, want daar valt tekst anders weg tegen de
   bewegende achtergrond. */
.belofte, .belofte-sub {
  display: inline-block;
  margin: .5rem 0 0; max-width: 34rem;
  font-size: 1.02rem; line-height: 1.6;
  color: #F6F2FF;
  background: rgba(8, 6, 17, .55);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: .5rem .95rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 2px 18px rgba(0, 0, 0, .75);
}

/* De privacyverklaring hoort op de plek waar je je gegevens afgeeft, niet
   alleen onderaan de pagina waar je pas komt als je al binnen bent. */
.poort-privacy {
  margin: .9rem 0 0; font-size: .76rem; line-height: 1.55;
  color: rgba(216, 205, 234, .6);
}
.poort-privacy a { color: rgba(216, 205, 234, .85); }

/* De bril: hoe wil je je droom gelezen hebben.
   Rustiger dan de kwaliteitsknoppen - dit kost niets en is geen aankoop, dus
   het mag niet even hard om aandacht vragen. */
.brillen { margin-top: .9rem; }
.bril-knoppen { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .45rem; }
.bril {
  padding: .32rem .8rem; font-size: .82rem;
  border: 1px solid rgba(216, 205, 234, .26); border-radius: 999px;
  background: rgba(255, 255, 255, .04); color: rgba(216, 205, 234, .85);
  cursor: pointer;
}
.bril:hover { border-color: rgba(216, 205, 234, .5); color: var(--ink); }
.bril[aria-pressed="true"] {
  border-color: var(--third-eye); color: var(--ink);
  background: rgba(110, 98, 218, .22);
}

/* Elke bril zijn eigen kleur, zodat de telling en de uitslag herkenbaar zijn. */
.bril-psychologisch { background: var(--throat); }
.bril-symbolisch { background: var(--third-eye); }
.bril-spiritueel { background: var(--crown); }

.bril-uitslag {
  display: flex; align-items: center; gap: .55rem;
  margin: 0 0 .9rem; font-size: .82rem; color: rgba(216, 205, 234, .7);
}
.bril-merk {
  padding: .16rem .6rem; border-radius: 999px;
  font-size: .74rem; letter-spacing: .05em; text-transform: uppercase;
  color: #0A0714; font-weight: 600;
}

/* De telling over alle dromen, onder de tijdlijn van het spectrum. */
.brilspectrum {
  display: grid; gap: .4rem; margin-top: 1.3rem;
  padding: .9rem 1.1rem;
  background: rgba(8, 6, 17, .5); backdrop-filter: blur(6px); border-radius: 12px;
}
.brilspectrum-kop {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(216, 205, 234, .6); margin-bottom: .2rem;
}
.brilstaaf { display: grid; grid-template-columns: 8rem 1fr 2rem; align-items: center; gap: .7rem; }
.brilstaaf-naam { font-size: .84rem; color: rgba(216, 205, 234, .9); }
.brilstaaf-baan {
  height: .5rem; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .07);
}
.brilstaaf-baan i { display: block; height: 100%; border-radius: 999px; }
.brilstaaf-getal { font-size: .82rem; text-align: right; color: rgba(216, 205, 234, .75); }
.brilstaaf.leeg .brilstaaf-naam, .brilstaaf.leeg .brilstaaf-getal { opacity: .45; }
@media (max-width: 560px) {
  .brilstaaf { grid-template-columns: 6.5rem 1fr 1.8rem; gap: .5rem; }
  .brilstaaf-naam { font-size: .78rem; }
}

/* De wachtstand van "Je dromen samen".
   Dit is geen lege plek maar een belofte: wie bij een of twee dromen niet weet
   wat er aankomt, komt op dag vier niet terug. Dus staat er wat er straks komt
   en hoe ver je bent. */
.thread.wachtend { border-color: rgba(242, 198, 76, .3); }
.thread.wachtend .tag {
  /* .thread is een flexkolom, dus een kind rekt over de hele breedte tenzij je
     het losmaakt. Dit is een merkje, geen balk. */
  align-self: flex-start;
  padding: .18rem .55rem; border-radius: 999px;
  background: rgba(242, 198, 76, .16); color: var(--solar);
  border: 1px solid rgba(242, 198, 76, .45);
}
.wachtend-kop { margin: .45rem 0 .35rem; color: var(--ink); }

.beheerrij-melding {
  flex: 1 1 100%; margin: 0; font-size: .82rem; color: var(--heart);
}
.beheerrij-melding.mis { color: #F5A08F; }
.beheerrij-knoppen input[type="email"] { width: 14rem; }



/* Het hulpkader. Opvallend genoeg om niet te missen, rustig genoeg om niet te
   alarmeren - iemand die dit leest heeft geen schrikbalk nodig maar een adres. */
.zorg-kader { display: grid; gap: .8rem; margin-bottom: 1rem; }
.zorg-blok {
  padding: 1rem 1.15rem; border-radius: 16px;
  background: rgba(18, 12, 34, .96);
  border: 1px solid rgba(242, 198, 76, .45);
  box-shadow: 0 0 26px rgba(242, 198, 76, .1);
}
.zorg-blok.zorg-suicide { border-color: rgba(242, 198, 76, .6); }
.zorg-blok.zorg-geweld { border-color: rgba(226, 85, 79, .5); }
.zorg-blok.zorg-bereik { border-color: rgba(216, 205, 234, .3); }
.zorg-kop {
  margin: 0 0 .4rem !important;
  font-family: var(--display); font-size: 1.15rem; color: var(--solar);
}
.zorg-blok.zorg-geweld .zorg-kop { color: #F5A08F; }
.zorg-blok.zorg-bereik .zorg-kop { color: var(--ink); }
.zorg-blok p { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.6; color: #E4DCF4; }
.zorg-blok ul { margin: .6rem 0 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.zorg-blok li { font-size: .88rem; color: #CFC4E4; }
.zorg-blok li span { color: rgba(216, 205, 234, .7); }
.zorg-blok li a {
  font-weight: 700; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid rgba(242, 198, 76, .6);
}
.zorg-blok li em { font-style: normal; font-size: .8rem; color: rgba(216, 205, 234, .55); }

/* De tokenprijs staat waar je tokens koopt, niet als ondertitel bij een kop
   twee blokken hoger. Volle breedte, zodat de koopknoppen op hun eigen regel
   blijven staan. */
.extras-noot {
  flex: 1 1 100%; margin: -.2rem 0 .2rem;
  font-size: .82rem; color: rgba(216, 205, 234, .7);
}

/* De regel voor wie in een land woont dat we niet kennen. */
.zorg-elders {
  margin: .6rem 0 0 !important;
  font-size: .82rem !important; color: rgba(216, 205, 234, .6) !important;
}

/* De publieke pagina: wat Dreamverse is, voor wie nog geen account heeft. */
.taalkeus {
  padding: .1rem .5rem; margin-left: .3rem;
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  background: transparent; border: 1px solid rgba(216, 205, 234, .28);
  border-radius: 999px; color: rgba(216, 205, 234, .7); cursor: pointer;
}
.taalkeus[aria-pressed="true"] {
  border-color: var(--third-eye); color: var(--ink);
  background: rgba(110, 98, 218, .22);
}
.welkom-knoppen { margin: 1.2rem 0 0; }
.poort-uitleg {
  margin: .9rem 0 0; font-size: .82rem; line-height: 1.55;
  color: rgba(216, 205, 234, .75);
}
.poort-uitleg a { color: var(--ink); }

/* Voorbeelden van een kernmoment.
   Poster nu, animatie pas bij een klik: de drie clips zijn samen ruim 8 MB en
   dat wil je niet op iemands telefoonbundel zetten voor iets wat hij misschien
   niet eens aanklikt. */
.voorbeelden {
  display: grid; gap: .9rem; margin: .8rem 0 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.voorbeeld {
  position: relative; cursor: pointer; border-radius: 14px; overflow: hidden;
  background: rgba(43, 28, 74, .6);
  border: 1px solid rgba(242, 198, 76, .32);
  transition: border-color 200ms ease, transform 200ms ease;
}
.voorbeeld:hover, .voorbeeld:focus-visible {
  border-color: var(--solar); transform: translateY(-2px); outline: none;
}
.voorbeeld img, .voorbeeld video { display: block; width: 100%; height: auto; }

/* Het driehoekje. Geen plaatje nodig: twee vormen met randen. */
.voorbeeld-play {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%);
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: rgba(10, 7, 20, .62); backdrop-filter: blur(3px);
  border: 1px solid rgba(242, 198, 76, .6);
  pointer-events: none;
}
.voorbeeld-play::after {
  content: ""; position: absolute; left: 56%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: .55rem 0 .55rem .9rem;
  border-color: transparent transparent transparent var(--solar);
}
.voorbeeld-bij {
  display: block; padding: .5rem .8rem .6rem;
  font-size: .8rem; line-height: 1.4; color: #D8CDEA;
  background: rgba(10, 7, 20, .55);
}

/* Een eigen vraag over je droom. */
.vraagblok {
  margin: 1rem 0; padding: 1rem 1.15rem; border-radius: 16px;
  background: var(--panel); backdrop-filter: blur(10px);
  border: 1px solid rgba(110, 98, 218, .3);
}
.vraagblok textarea { margin-top: .6rem; min-height: 3.4rem; }
.vragen { display: grid; gap: .8rem; }
.vraag-paar {
  padding: .7rem .9rem; border-radius: 12px;
  background: rgba(43, 28, 74, .45);
  border-left: 3px solid var(--third-eye);
}
.vraag-paar p { margin: 0; font-size: .9rem; line-height: 1.6; color: #CFC4E4; }
.vraag-vraag { color: var(--ink) !important; font-weight: 600; margin-bottom: .35rem !important; }
.vraag-melding { margin: .5rem 0 0; font-size: .84rem; color: var(--muted); min-height: 1.1rem; }
.vraag-melding.err { color: #F5A08F; }

/* Kiezen kan op de landingspagina, kopen pas na het inloggen: de knop brengt
   je naar de app en daar staat de poort. Wie niets van je weet moet wel kunnen
   zeggen wat hij wil. */
.tier-knop {
  display: inline-block; margin: .2rem 0 .6rem;
  font-size: .82rem; padding: .35rem .9rem;
}

.koop-pakket.wijs { animation: wijzen 2.4s ease-out 1; border-radius: 999px; }

/* Het rapport: wie komt er terug. Alleen zichtbaar in beheer. */
.rapport {
  margin-bottom: 1.1rem; padding: 1rem 1.2rem; border-radius: 12px;
  background: rgba(12, 8, 24, .6); border: 1px solid rgba(216, 205, 234, .16);
}
.rapport-kop {
  margin: 0 0 .6rem; font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(216, 205, 234, .6);
}
.rapport-groot { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .9rem; }
.rapport-groot b { font-size: 2rem; font-family: var(--display); color: var(--solar); }
.rapport-groot span { font-size: .86rem; color: rgba(216, 205, 234, .8); }
.rapport-rij {
  display: grid; gap: .6rem; margin-bottom: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
}
.rapport-rij div { display: flex; flex-direction: column; }
.rapport-rij b { font-size: 1.1rem; color: var(--ink); }
.rapport-rij span { font-size: .74rem; color: rgba(216, 205, 234, .6); }
.rapport-tabel { width: 100%; border-collapse: collapse; font-size: .78rem; }
.rapport-tabel th {
  text-align: left; padding: .3rem .5rem; color: rgba(216, 205, 234, .55);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .66rem;
}
.rapport-tabel td {
  padding: .3rem .5rem; color: #CFC4E4;
  border-top: 1px solid rgba(216, 205, 234, .1);
}