:root{
      --bg-url: url('../images/bg.png');/* https://content.dv-servers.eu/image-rotation.php?theme=tech&res=4K */
      --text: #e8e8ee;
      --muted: #bdbdcc;
      --card: rgba(14,14,24,0.5);
      --card-strong: rgba(14,14,24,0.65);
      --glass-border: rgba(255,255,255,0.18);
      --shadow: 0 5px 25px rgba(0,0,0,0.45);
      --radius: 22px;
      --rainbow: conic-gradient(from 0deg at 50% 50%,
        #ff0055, #ff7a00, #ffd400, #55ff00, #00ffd5, #0077ff, #a200ff, #ff00e0, #ff0055);
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body{
      margin:0; font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
      color: var(--text); background: #0a0a13; overflow-x:hidden;
    }

    /* Achtergrond + overlays */
	.bg{ position: fixed; inset:0; z-index:-3; background-image: var(--bg-url); background-size:cover; background-position:center; filter: blur(7px) saturate(1.2) brightness(0.65) contrast(1.05); }
    .veil{ position: fixed; inset:0; z-index:-2; pointer-events:none; background:
		
    /* .bg{ position: fixed; inset:0; z-index:-3; background-image: var(--bg-url); background-size:cover; background-position:center; filter: saturate(1.2) brightness(0.65) contrast(1.05); }
    .veil{ position: fixed; inset:0; z-index:-2; pointer-events:none; background: */
      radial-gradient(1200px 1200px at 85% 15%, rgba(64,0,255,0.22), transparent 55%),
      radial-gradient(900px 900px at 15% 85%, rgba(255,0,130,0.22), transparent 45%),
      linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45));
      mix-blend-mode: overlay;
    }
	/*
    .grid{
      position: fixed; inset:0; z-index:-1; pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: radial-gradient(70% 70% at 50% 50%, black, transparent 80%);
    }
	*/

    /* Regenboog animatie */
    @keyframes spinRainbow { to { transform: rotate(1turn); } }
    @keyframes floaty { 0%{ transform: translateY(0px);} 50%{ transform: translateY(-8px);} 100%{ transform: translateY(0px);} }

    .wrap { min-height:100%; display:grid; place-items:center; padding: 48px 18px; }

    .card{
      width:100%; max-width: 760px; border-radius: var(--radius); background: var(--card);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      border: 1px solid var(--glass-border); box-shadow: var(--shadow); position: relative; overflow: clip;
    }
    .card::before{ /* subtiele regenboog rand */
      content:""; position:absolute; inset:0; padding:1px; border-radius: calc(var(--radius) + 1px);
      background: var(--rainbow); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: blur(0.2px); opacity:0.85;
    }

    .card-login{
        width:100%; max-width: 520px; border-radius: var(--radius); background: var(--card);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border: 1px solid var(--glass-border); box-shadow: var(--shadow); position: relative; overflow: clip;
    }
    .card-login::before{ /* subtiele regenboog rand */
        content:""; position:absolute; inset:0; padding:1px; border-radius: calc(var(--radius) + 1px);
        background: var(--rainbow); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: blur(0.2px); opacity:0.85;
    }

    header{ display:flex; flex-direction:column; align-items:center; gap:18px; padding: 38px 28px 12px; text-align:center; }

    .avatar-ring{ width: 128px; height:128px; border-radius:50%; padding:4px; position:relative; animation: floaty 6s ease-in-out infinite; }
    .avatar-ring::before{ content:""; position:absolute; inset:-4px; border-radius:inherit; background: var(--rainbow); filter: blur(8px); opacity:0.5; }
    .avatar-ring .spin{ position:absolute; inset: -2px; border-radius:inherit; background: var(--rainbow); animation: spinRainbow 6s linear infinite; }
    .avatar-ring .core{ position:relative; margin:0 auto; width:100%; height:100%; border-radius:50%; background: var(--card-strong); display:grid; place-items:center; overflow:hidden; border:1px solid var(--glass-border); }
    .avatar-ring img{ width:100%; height:100%; object-fit:cover; border-radius:50%; filter: saturate(1.2) contrast(1.05); }

    h1{ font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); margin: 4px 0 0; letter-spacing: 0.3px; }
    .tagline{ color: var(--muted); font-weight: 400; margin: 6px 0 4px; }

    .badges{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
    .badge{ font-size: 12px; letter-spacing:0.3px; padding:8px 12px; border-radius:999px; background: rgba(255,255,255,0.07); border:1px solid var(--glass-border); backdrop-filter: blur(6px); }

    main{ padding: 16px 18px 28px; }
    .links{ display:flex; flex-direction:column; gap:14px; }

    .link{
      position:relative; display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius: 16px; background: rgba(255,255,255,0.07);
      border:1px solid var(--glass-border); text-decoration:none; color:var(--text); font-weight:600; letter-spacing:0.2px;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease; backdrop-filter: blur(8px);
    }
     .link::before{ content:""; position:absolute; inset:-1px; border-radius: inherit; padding:1px; background: var(--rainbow);
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.9;
    }/*
    .link:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 24px rgba(255,255,255,0.04); background: rgba(255,255,255,0.10); } */
    .link small{ font-weight:400; color: var(--muted); margin-left:auto; }

    .icon{ width:22px; height:22px; display:grid; place-items:center; flex:0 0 22px; }
    .icon svg{ width:22px; height:22px; }

    /* socials */
    .socials{ display:flex; justify-content:center; gap:14px; padding: 18px 24px 28px; }
    .social-btn{ width:40px; height:40px; position:relative; border-radius:12px; background: rgba(255,255,255,0.07); border:1px solid var(--glass-border); display:grid; place-items:center; text-decoration:none; color:var(--text); transition: transform .18s ease, background .18s ease; }
    .social-btn::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:var(--rainbow); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
    .social-btn:hover{ transform: translateY(-2px); background: rgba(255,255,255,0.12); }

    footer{ text-align:center; color:#9aa; font-size:12px; padding-bottom: 28px; }
    footer a{ color:#cfe; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,0.35); }

    /* zwevende glows */
    .orb{ position: absolute; border-radius: 999px; filter: blur(28px); opacity: 0.3; pointer-events:none; }
    .orb.one{ width: 180px; height: 180px; top: 30%; left: -60px; background: radial-gradient(circle at 30% 30%, #ff6ec7, transparent 60%); animation: floaty 7s ease-in-out infinite; }
    .orb.two{ width: 220px; height: 220px; bottom: 0; right: -60px; background: radial-gradient(circle at 60% 60%, #00e5ff, transparent 60%); animation: floaty 9s ease-in-out infinite; animation-delay: 0.6s; }

    /* kleine verbeteringen voor grotere schermen */
    @media (min-width: 900px){ .wrap{ padding: 70px 18px; } header{ padding-top: 46px; } }


    form{ padding: 18px 22px 22px; display:flex; flex-direction:column; gap:18px; align-items:center; }
    .field{ display:flex; flex-direction:column; gap:8px; width:100%; max-width:360px; text-align:center; }
    label{ font-size:13px; color:#cfd3ff; letter-spacing:.2px; }
    .input{
        border-radius:14px; background:rgba(255,255,255,0.07); border:1px solid var(--glass-border);
        color:var(--text); padding:14px 14px; outline:none; backdrop-filter: blur(6px);
        width:100%; text-align:center;
    }
    .input:focus{ border-color:transparent; box-shadow:0 0 0 2px rgba(255,255,255,0.25); }
    .input-wrap{ position:relative; }
    .input-wrap::before{ content:""; position:absolute; inset:-1px; border-radius:16px; padding:1px; background:var(--rainbow);
        mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.85; pointer-events:none; }

    .actions{ display:flex; flex-direction:column; gap:10px; margin-top:4px; width:100%; max-width:360px; }
    .btn{
        position:relative; border:none; cursor:pointer; border-radius:16px; font-weight:700; letter-spacing:.25px;
        padding:14px 16px; color:#0b0b14; background:#fff; transition: transform .15s ease, box-shadow .15s ease;
        width:100%;
    }
    .btn::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:var(--accent);
        mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
    .btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.28); }

    .help{ text-align:center; color:var(--muted); font-size:13px; }
    .error{ margin: 0 22px 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 80, 80, 0.12); border: 1px solid rgba(255, 80, 80, 0.35); color: #ffd9d9; text-align:center; }