/* Nieuwe huisstijl voor losse pagina's (betaald, demo, status, onboarding,
   oude login, e-mail bevestigen, accounts, sandbox): glaskaart zoals /login,
   glass fold-achtergrond (public/glass-fold.js), ronde knoppen, icoon in een
   glazen rondje. Alleen uiterlijk; de pagina's werken verder hetzelfde. */
.beams-bg{ position:fixed; inset:0; width:100vw; height:100vh; z-index:-1; pointer-events:none; filter:none; }
.beams-bg.glas{ opacity:.45; }
body{ background-color:#0a0e17; }

/* Glaskaart */
.merk-kaart, .card, .block, .login, .comp, .top + .components .comp{
  border-radius:28px;
  background:linear-gradient(105deg, rgba(255,255,255,.07) 0%, rgba(18,18,18,.55) 100%) !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 70px -30px rgba(0,0,0,.9) !important; border:0 !important; }
.block::before{ display:none; }
.comp{ border-radius:18px; }

/* Velden en knoppen */
input[type=email], input[type=password], input[type=text], input:not([type]), select{
  border-radius:14px !important; background:rgba(255,255,255,.08) !important; border:0 !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06) !important; }
input:focus, select:focus{ outline:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 3px rgba(148,163,184,.35) !important; }
.btn, button[type=submit], .submit, .nav.fwd{ border-radius:999px !important; }

/* Icoon bovenaan in een glazen rondje */
.merk-icoon{ display:flex !important; align-items:center; justify-content:center; width:56px; height:56px; margin:0 auto 22px !important;
  border-radius:50%; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 24px -10px rgba(0,0,0,.7); }
.merk-icoon img{ height:26px !important; width:auto !important; margin:0 !important; }
/* Demo-login: compacte kaart, niet tegen de randen. */
.login{ width:min(340px, calc(100% - 32px)); margin:0 auto; padding:26px 22px; }