:root{
      --green-900: #082C1E;
      --green-700: #0C3A28;
      --green-600: #135634;
      --green-500: #1C7A46;
      --lime-400: #A1F043;

      --background-color: var(--green-900);
      --surface-color: var(--green-700);
      --accent-color: var(--lime-400);

      --text-color: #ffffff;
      --danger-color: #ff3b3b;
    }

    html, body{
      width:100%;
      height:100%;
      padding:0;
      margin:0;
      overflow:hidden;
      background: var(--background-color);
      color: var(--text-color);
    }

    /* Canvas full screen */
    #projector{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      display:block;
      z-index:0;
    }

    /* Overlay container */
    .ui-layer{
      position:relative;
      z-index:2;
      width:100%;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
    }

    /* Dim overlay for readability (still shows animation) */
    .backdrop-dim{
      position:absolute;
      inset:0;
      z-index:1;
      background: radial-gradient(ellipse at center, rgba(12,58,40,0.35) 0%, rgba(8,44,30,0.65) 60%, rgba(8,44,30,0.85) 100%);
      pointer-events:none;
      transition: background 500ms ease;
    }

    /* Card styling */
    .login-card{
      width: min(420px, 100%);
      background: rgba(12,58,40,0.78); /* --green-700 with transparency */
      border: 1px solid rgba(161,240,67,0.18);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 18px;
      box-shadow: 0 18px 60px rgba(0,0,0,0.45);
    }

    .brand-dot{
      width:12px;height:12px;border-radius:999px;
      background: var(--accent-color);
      box-shadow: 0 0 18px rgba(161,240,67,0.55);
    }

    .form-control{
      background: rgba(8,44,30,0.55);
      border: 1px solid rgba(255,255,255,0.12);
      color: var(--text-color);
    }
    .form-control:focus{
      background: rgba(8,44,30,0.75);
      color: var(--text-color);
      border-color: rgba(161,240,67,0.55);
      box-shadow: 0 0 0 .25rem rgba(161,240,67,0.18);
    }

    /* Placeholder kleur (wit, iets transparant) */
    .form-control::placeholder{
    color: rgba(255,255,255,0.75);
    opacity: 1; /* nodig voor sommige browsers */
    }

    /* Extra compatibiliteit */
    .form-control::-webkit-input-placeholder{
    color: rgba(255,255,255,0.75);
    }
    .form-control::-moz-placeholder{
    color: rgba(255,255,255,0.75);
    opacity: 1;
    }
    .form-control:-ms-input-placeholder{
    color: rgba(255,255,255,0.75);
    }
    .form-control::-ms-input-placeholder{
    color: rgba(255,255,255,0.75);
    }


    .form-label{ color: rgba(255,255,255,0.85); }

    .btn-accent{
      background: var(--accent-color);
      border: none;
      color: #062015;
      font-weight: 700;
    }
    .btn-accent:hover{ filter: brightness(0.95); }

    .muted{
      color: rgba(255,255,255,0.7);
    }

    /* Error flash (text + subtle backdrop) */
    .error-flash .backdrop-dim{
      background: radial-gradient(ellipse at center, rgba(255,59,59,0.12) 0%, rgba(8,44,30,0.75) 55%, rgba(8,44,30,0.88) 100%);
    }
    .error-text{
      min-height: 1.25rem;
      transition: color 500ms ease, opacity 500ms ease;
      color: rgba(255,255,255,0.85);
      opacity: 0.92;
    }
    .error-flash .error-text{
      color: var(--danger-color);
      opacity: 1;
    }