:root{
  --bg:#0b0730;
  --red:#d43a3a;
  --white:#ffffff;
  --page-bg:#ffffff;
  --input-wrap-bg:#f6f6f6;
  --input-wrap-border:#bfbfbf;
  --font-family:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  --btn-radius:10px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; font-family:var(--font-family); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:#222; background:var(--page-bg); }

.site-header{
  background:var(--bg);
  box-shadow: 0 4px 12px rgba(11,7,48,0.14);
  position:sticky;
  top:0;
  z-index:20;
}

.topbar{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 16px;
  gap:12px;
}

.logo img{ height:30px; display:block; transform: translateY(0); }

.menu-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:34px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  padding:6px;
  box-sizing:border-box;
  cursor:pointer;
  background: rgba(255,255,255,0.02);
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, box-shadow .12s ease;
}
.menu-btn:hover{ background: rgba(255,255,255,0.04); }
.menu-btn:focus{ outline: 3px solid rgba(255,255,255,0.06); outline-offset:2px; }

.menu-btn .bar{ width:18px; height:2px; background:var(--white); border-radius:2px; position:relative; display:block; }
.menu-btn .bar::before,
.menu-btn .bar::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--white); border-radius:2px; }
.menu-btn .bar::before{ top:-6px; }
.menu-btn .bar::after{ top:6px; }

main{ min-height:calc(100vh - 56px); padding:18px 14px; }
.form-shell{ max-width:520px; margin:0 auto; }

.alert-box{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--red); background: rgba(212,58,58,0.04);
  color:var(--red); padding:10px 12px; border-radius:8px; margin:8px 6px;
  box-shadow: 0 1px 0 rgba(212,58,58,0.03) inset;
}
.alert-icon{ width:24px; height:auto; flex:0 0 auto; margin-top:2px; }
.alert-content{ font-size:13px; line-height:1.25; color:var(--red); }
.alert-title{ display:block; font-weight:700; margin-bottom:4px; }
.alert-text{ display:block; color:#7a1f1f; font-weight:500; font-size:13px; }

.page-title{ color:var(--bg); font-size:24px; font-weight:800; margin:8px 6px 6px; }
.page-sub{ color:#333; font-size:14px; margin:0 6px 12px; line-height:1.35; font-weight:400; }

.field{ position:relative; margin:18px 6px 6px; }
.input-wrap{ background:var(--input-wrap-bg); border:1px solid var(--input-wrap-border); border-radius:8px 8px 0 0; }
.input{
  width:100%; border:0; background:transparent; padding:14px 16px; border-radius:8px 8px 0 0;
  font-size:16px; line-height:1.1; color:#444 !important; -webkit-text-fill-color:#444 !important;
  caret-color:#000; outline:none; -webkit-appearance:none; -moz-appearance:none; transition: color .12s ease, opacity .12s ease;
  font-family:var(--font-family); font-weight:400;
}
.input::placeholder{ color:#9d9d9d; font-size:16px; font-weight:400; opacity:1; }

.underline{ height:3px; background:var(--bg); margin-top:-1px; transition: background .12s ease; border-radius:0 0 8px 8px; }
.field:focus-within .underline{ background:var(--bg); }

.field.invalid .underline{ background:var(--red) !important; }

.field .error-msg{ display:block; font-size:12px; color:var(--red); margin:6px 8px 0; }

.divider{ height:1px; background:rgba(16,24,40,0.04); margin:12px 6px; border-radius:1px; }

.note-with-icon{ display:flex; align-items:flex-start; gap:8px; font-size:11px; color:#6b6b6b; margin:8px 6px; line-height:1.3; }
.note-icon{ width:14px; height:auto; object-fit:contain; margin-top:2px; flex:0 0 auto; }

.autocomplete{ position: relative; }
.suggestions{ position: absolute; left:0; right:0; background:#fff; border:1px solid #e6e6e6; border-top:none; z-index:40; max-height:220px; overflow-y:auto; box-shadow: 0 6px 18px rgba(11,7,48,0.06); border-radius:0 0 8px 8px; }
.suggestion{ padding:10px 12px; cursor:pointer; font-size:14px; color:#222; }
.suggestion[aria-selected="true"], .suggestion:hover{ background:#f2f2f2; }

.policy-row{ display:flex; align-items:center; gap:10px; margin:10px 6px 18px; }
.policy-row input[type="checkbox"]{ width:16px; height:16px; accent-color: var(--bg); flex:0 0 16px; border-radius:2px; border:1px solid #cfcfcf; }
.policy-text{ font-size:12px; color:#333; line-height:1.3; }
.policy-text strong{ font-weight:700; color:#0b0730; }

.btn-continue{ display:flex; align-items:center; justify-content:center; gap:8px; width:calc(100% - 12px); margin:8px 6px 28px; padding:12px 18px; border-radius:var(--btn-radius); background:var(--bg); color:var(--white); font-weight:600; font-family:var(--font-family); font-size:16px; border:0; cursor:pointer; box-shadow: 0 6px 18px rgba(11,7,48,0.12); min-height:44px; }
.btn-continue[disabled]{ opacity:0.85; cursor:default; }

.overlay{ position:fixed; inset:0; background: rgba(255,255,255,1); display:flex; align-items:center; justify-content:center; z-index:200; transition: opacity .18s ease; }
.overlay.hidden{ display:none; opacity:0; pointer-events:none; }
.spinner-thin{ width:44px; height:44px; border-radius:50%; border:3px solid rgba(0,0,0,0); border-top-color: var(--bg); border-right-color: rgba(0,0,0,0); animation: spin 0.9s linear infinite; box-sizing:border-box; }
@keyframes spin{ to { transform: rotate(360deg); } }
.btn-continue.loading{ background:#e6e6e6; color:#666; box-shadow:none; }

#announce{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

@media (max-width:420px){
  .logo img{ height:28px; }
  .alert-icon{ width:20px; }
  .page-title{ font-size:20px; }
  .input{ font-size:15px; padding:12px 14px; }
  .input::placeholder{ font-size:15px; }
  .spinner-thin{ width:36px; height:36px; border-width:2.5px; }
  .topbar{ padding:8px 12px; }
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-internal-autofill-selected {
  -webkit-text-fill-color:#444 !important;
  font-family:var(--font-family) !important;
  font-weight:400 !important;
  transition: background-color 5000s ease-in-out 0s;
}

.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.45); display:none; align-items:center; justify-content:center; z-index:300; }
.modal-overlay.open{ display:flex; }
.modal{
  background:#fff;
  width:90%;
  max-width:720px;
  border-radius:0;
  box-shadow:0 20px 50px rgba(11,7,48,0.25);
  padding:18px;
  max-height:80vh;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(16,24,40,0.06);
  font-size:14px;
  color:#222;
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid rgba(16,24,40,0.04);
  padding-bottom:10px;
  margin-bottom:8px;
}
.modal-title{ font-size:16px; font-weight:700; color:#0b0730; margin:0; }
.modal-close{
  background:transparent;
  border:0;
  font-size:18px;
  cursor:pointer;
  padding:6px;
  border-radius:2px;
  color:#666;
}
.modal-body{ margin-top:0; overflow:auto; padding-right:6px; }

.scroll-area{ max-height:64vh; overflow:auto; padding-right:8px; }
.summary-section{
  margin-bottom:12px;
  font-size:13px;
  color:#2b2b2b;
  line-height:1.45;
}
.summary-section strong{ font-weight:700; color:#0b0730; }

.modal-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.btn-primary{
  padding:10px 14px;
  border-radius:4px;
  background:var(--bg);
  color:#fff;
  border:0;
  cursor:pointer;
  font-weight:700;
  font-family:var(--font-family);
}
.btn-primary[disabled]{ opacity:0.6; cursor:default; }

#policy-label{ cursor:pointer; }