:root { color-scheme: dark; --bg:#07101d; --surface:#101c2d; --line:#2b3b50; --text:#f5f0e8; --muted:#aeb9c6; --gold:#d6b46c; --gold-dark:#8d6b2d; --danger:#ff858c; --ok:#83d6ad; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; background:radial-gradient(circle at 80% -10%,rgba(214,180,108,.16),transparent 35%),var(--bg); color:var(--text); }
button,input,select,textarea { font:inherit; }
button,select,input,textarea { min-height:48px; border-radius:12px; }
.portal-header { display:flex; justify-content:space-between; align-items:center; max-width:900px; margin:auto; padding:18px 24px; }
.brand { display:flex; gap:12px; align-items:center; color:var(--text); text-decoration:none; }
.brand img { width:48px; height:48px; object-fit:cover; border-radius:50%; border:1px solid var(--gold); }
.brand span { display:grid; }
.brand small { color:var(--gold); font-size:.64rem; font-weight:800; letter-spacing:.13em; }
.brand strong { font-family:Georgia,serif; font-size:1.2rem; }
.staff-link { color:var(--muted); font-size:.8rem; text-decoration:none; }
main { width:min(900px,calc(100% - 32px)); margin:20px auto 64px; }
.hero { max-width:650px; margin:44px 0 32px; }
.eyebrow { margin:0 0 9px; color:var(--gold); font-size:.72rem; font-weight:850; letter-spacing:.16em; }
h1 { margin:0; font-family:Georgia,serif; font-size:clamp(2.15rem,8vw,4.4rem); font-weight:500; line-height:1.02; overflow-wrap:anywhere; }
.hero>p:last-child { max-width:620px; color:var(--muted); line-height:1.65; }
.portal-card { position:relative; display:grid; grid-template-columns:52px minmax(0,1fr); gap:4px 18px; margin:18px 0; padding:26px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,rgba(21,36,56,.96),rgba(12,24,40,.96)); box-shadow:0 22px 60px rgba(0,0,0,.24); }
.portal-card[hidden] { display:none; }
.step-number { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--gold-dark); border-radius:50%; color:var(--gold); font-weight:800; }
.card-copy h2 { margin:2px 0 6px; font-family:Georgia,serif; font-weight:500; font-size:1.55rem; }
.card-copy p { margin:0; color:var(--muted); line-height:1.5; }
form { grid-column:2; display:grid; gap:14px; margin-top:20px; }
label { display:grid; gap:7px; color:var(--muted); font-size:.8rem; font-weight:750; }
input,select,textarea { width:100%; border:1px solid var(--line); padding:12px 14px; background:#091525; color:var(--text); outline:none; }
input:focus,select:focus,textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(214,180,108,.13); }
textarea { min-height:88px; resize:vertical; }
button { border:1px solid var(--gold); padding:11px 18px; background:linear-gradient(135deg,#e0c17e,#b5893e); color:#10100f; font-weight:850; cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
.text-button { border:0; background:transparent; color:var(--gold); min-height:38px; padding:4px; }
.code-input { letter-spacing:.32em; text-align:center; font-size:1.55rem; font-weight:800; }
.form-message { min-height:1.2em; margin:0; color:var(--ok); font-size:.82rem; line-height:1.45; }
.form-message.error { color:var(--danger); }
.appointments { display:grid; gap:10px; }
.appointment { position:relative; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; padding:15px; border:1px solid var(--line); border-radius:14px; background:#0b1727; cursor:pointer; }
.appointment:has(input:checked) { border-color:var(--gold); background:rgba(214,180,108,.09); box-shadow:inset 0 0 0 1px var(--gold); }
.appointment input { width:20px; min-height:auto; height:20px; accent-color:var(--gold); }
.appointment strong,.appointment span { display:block; }
.appointment small { display:block; margin-top:5px; color:var(--muted); line-height:1.45; }
.notice { display:grid; gap:4px; padding:13px 15px; border-left:3px solid var(--gold); border-radius:8px; background:rgba(214,180,108,.08); color:var(--muted); font-size:.8rem; line-height:1.45; }
.notice strong { color:var(--gold); }
.success-card { display:block; text-align:center; padding:38px 26px; }
.success-icon { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:rgba(131,214,173,.14); color:var(--ok); font-size:2rem; }
.success-card h2 { font-family:Georgia,serif; font-size:1.8rem; }
.success-card p { max-width:570px; margin:0 auto 24px; color:var(--muted); line-height:1.6; }
footer { padding:24px; border-top:1px solid var(--line); color:var(--muted); text-align:center; font-size:.75rem; }
@media (max-width:600px) {
  .portal-header { padding:14px 16px; }
  .brand small { display:none; }
  main { width:min(900px,calc(100% - 20px)); margin-top:4px; }
  .hero { margin:28px 6px 24px; }
  .hero>p:last-child { font-size:.92rem; }
  .portal-card { display:block; padding:20px 16px; border-radius:17px; }
  .step-number { margin-bottom:14px; }
  form { margin-top:18px; }
  button { width:100%; }
}
@media (prefers-reduced-motion:no-preference) { .portal-card { animation:rise .35s ease both; } @keyframes rise { from { opacity:0; transform:translateY(8px); } } }