:root{
  --bg-1:#050816;
  --bg-2:#0b1020;
  --card:rgba(15,23,42,.82);
  --border:rgba(148,163,184,.28);
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#38bdf8;
  --accent-2:#22c55e;
  --warning:#facc15;
  --button-text:#020617;
}

body.light{
  --bg-1:#f8fafc;
  --bg-2:#eef6ff;
  --card:rgba(255,255,255,.92);
  --border:rgba(15,23,42,.12);
  --text:#0f172a;
  --muted:#64748b;
  --accent:#2563eb;
  --accent-2:#16a34a;
  --warning:#ca8a04;
  --button-text:#fff;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  min-height:100vh;
  font-family:Inter,sans-serif;
  color:var(--text);

  background:
    radial-gradient(circle at 20% 20%,rgba(56,189,248,.18),transparent 30%),
    radial-gradient(circle at 80% 80%,rgba(34,197,94,.12),transparent 28%),
    linear-gradient(135deg,var(--bg-1),var(--bg-2));

  display:grid;
  place-items:center;
  overflow:hidden;
}

.hidden{
  display:none!important;
}

.start-page{
  width:min(94vw,620px);
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:10px;
}

.page{
  width:min(96vw,1200px);
  min-height:100vh;

  display:grid;
  grid-template-columns:2fr 1fr;
  gap:24px;

  align-items:center;
  padding:16px;
}

.card{
  width:100%;

  padding:clamp(14px,2.2vw,24px);

  border:1px solid var(--border);
  border-radius:32px;

  background:var(--card);

  box-shadow:0 24px 80px rgba(0,0,0,.32);

  text-align:center;
}

.brand{
  display:inline-flex;
  gap:10px;
  margin-bottom:10px;

  color:var(--muted);

  font-size:.95rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.brand-mark{
  width:14px;
  height:14px;

  border-radius:999px;

  background:var(--accent-2);
}

.logo-box{
  margin:0 auto 12px;

  width:120px;
  height:54px;

  border:1px dashed var(--border);
  border-radius:16px;

  display:grid;
  place-items:center;
}

.ah-logo{
  max-width:100%;
  max-height:50px;
  object-fit:contain;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);

  gap:8px 14px;

  text-align:left;
}

label{
  color:var(--muted);
  font-size:.9rem;
  font-weight:800;
}

input,
select{
  width:100%;

  margin-top:6px;
  padding:9px 12px;

  border:1px solid var(--border);
  border-radius:12px;

  background:rgba(255,255,255,.08);

  color:var(--text);
}

.primary-button,
.start-button{
  border:none;
  border-radius:18px;

  padding:12px 28px;
  margin-top:12px;

  background:var(--accent);
  color:var(--button-text);

  font-weight:900;
  cursor:pointer;
}

.line{
  font-size:1rem;
}

.environment{
  font-size:clamp(1.9rem,5vw,3rem);
  font-weight:900;
}

.open-line{
  font-size:clamp(2rem,4vw,2.8rem);
}

.toets{
  font-size:clamp(2.3rem,5vw,3.4rem);
  color:var(--accent);
  font-weight:900;
}

.pincode-label{
  color:var(--warning);
  font-weight:800;
}

.pincode{
  font-size:clamp(1.8rem,5vw,3rem);
  font-weight:900;
}

.timer-display{
  font-size:clamp(2rem,5vw,4rem);
  font-weight:900;
}

.notice-card{
  padding:24px;

  border:3px solid #ff2b2b;
  border-radius:28px;

  box-shadow:
    0 0 30px rgba(255,43,43,.15),
    inset 0 0 20px rgba(255,43,43,.05);
}

.notice-title{
  color:#ff2b2b;

  font-size:1.5rem;
  font-weight:800;

  margin-bottom:18px;
}

.notice-text{
  font-size:1.1rem;
  font-weight:500;
  line-height:1.5;
}

.notice-highlight{
  color:#ff2b2b;
  font-weight:900;
  text-decoration:underline;
}

@media(max-width:780px){

  .form-grid{
    grid-template-columns:1fr;
  }

  .page{
    grid-template-columns:1fr;
  }

}