/* Utility for CSP: replaces style="margin-top:12px" */
.mt12 { margin-top:12px !important; }
/* Utility for CSP: replaces style="gap:6px" */
.gap6 { gap:6px !important; }
/* Utility for CSP: replaces style="cursor:pointer" */
.pointer { cursor:pointer !important; }
/* Utility for CSP: replaces style="gap:28px" */
.gap28 { gap:28px !important; }
/* Utility for CSP: replaces style="font-size:14px" */
.fs14 { font-size:14px !important; }
/* Utility for CSP: replaces style="margin:0" */
.m0 { margin:0 !important; }
/* Utility for CSP: replaces style="font-size:13px" */
.fs13 { font-size:13px !important; }
/* Utility for CSP: replaces style="flex:0 0 auto" */
.flex0 { flex:0 0 auto !important; }
/* Utility for CSP: replaces style="height:26px" */
.h26 { height:26px !important; }
/* Utility for CSP: replaces style="line-height:26px" */
.lh26 { line-height:26px !important; }
/* Utility for CSP: replaces style="transform:translateY(2px)" */
.tY2 { transform:translateY(2px) !important; }
/* Utility for CSP: replaces style="margin-top:0" */
.mt0 { margin-top:0 !important; }
/* Utility for CSP: replaces style="display:flex" */
.d-flex { display:flex !important; }
/* Utility for CSP: replaces style="align-items:center" */
.aic { align-items:center !important; }
/* Utility for CSP: replaces style="justify-content:center" */
.jcc { justify-content:center !important; }
/* Utility for CSP: replaces style="gap:14px" */
.gap14 { gap:14px !important; }
/* Utility for CSP: replaces style="margin-bottom:8px" */
.mb8 { margin-bottom:8px !important; }
/* Utility for CSP: replaces style="flex-wrap:wrap" */
.fw-wrap { flex-wrap:wrap !important; }
/* ---- Moved from diag.html <style> for CSP compliance ---- */
body.diag-page{margin:0;font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f5f7fb;color:#0b3a6a}
body.diag-page .wrap{min-height:auto;display:block;padding-top:32px;padding-bottom:32px}
body.diag-page .card{max-width:960px;width:100%;margin:0 auto;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:18px}
body.diag-page pre{background:#0b1220;color:#d0e7ff;padding:12px;border-radius:10px;white-space:pre-wrap}
body.diag-page button{padding:8px 14px;border-radius:10px;border:1px solid #cfd8e3;background:#fff;cursor:pointer}
body.diag-page .row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
body.diag-page code{background:#eef2f9;padding:2px 6px;border-radius:6px}
/* ---- Moved from callback.html <style> for CSP compliance ---- */
body.callback-page:root{
  --bg:#f6f8fc;--card:#fff;--ink:#0b3a6a;--muted:#5b6b7f;--border:#e3e8f2;--panel:#0b1220;--panel-ink:#c8e4ff
}
@media (prefers-color-scheme: dark){body.callback-page:root{--bg:#0b0f17;--card:#121826;--ink:#e6efff;--muted:#a9b4c7;--border:#1f2a3d;--panel:#0b1220;--panel-ink:#c8e4ff}}
body.callback-page *{box-sizing:border-box} body.callback-page html,body{height:100%}
body.callback-page{margin:0;background:var(--bg);color:var(--ink);display:grid;place-items:center;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
body.callback-page .card{max-width:560px;width:100%;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.06)}
body.callback-page pre{background:var(--panel);color:var(--panel-ink);padding:12px;border-radius:12px;white-space:pre-wrap;overflow:auto}
body.callback-page a{color:inherit}
/* ---- Moved from signup.html <style> for CSP compliance ---- */
body.signup-page header{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;align-items:stretch}
body.signup-page header img{align-self:center;width:300px;height:auto}
body.signup-page header h1{font-size:17px;color:var(--muted);font-weight:700;margin:8px 0 0}
.row:first-of-type > .field > label{margin-top:0}
#verifyView{display:none}
/* Custom radio styling for account type */
#signupForm input[type=radio]{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:26px;height:26px;margin:0;padding:0;
  border:2px solid var(--border,#d0d7de);
  border-radius:50%;
  background:#fff;
  display:inline-grid;place-items:center;
  cursor:pointer;
  position:relative;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
#signupForm input[type=radio]::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--focus,#1d6df7);transform:scale(0);transition:transform .18s ease-in-out}
#signupForm input[type=radio]:checked{border-color:var(--primary,#ff8800);}
#signupForm input[type=radio]:checked::after{transform:scale(1)}
#signupForm input[type=radio]:focus-visible{outline:2px solid var(--focus,#1d6df7);outline-offset:2px}
#signupForm input[type=radio]:hover{border-color:var(--primary,#ff8800)}
@media (forced-colors: active){
  #signupForm input[type=radio]{forced-color-adjust:auto;border:1px solid ButtonText}
  #signupForm input[type=radio]:checked{background:Highlight;border-color:Highlight}
  #signupForm input[type=radio]::after{background:HighlightText}
}
@media (max-width:360px){ body.signup-page header img{width:260px} }
/* ---- Moved from signin.html <style> for CSP compliance ---- */
/* Page-specific header tweaks (others are in common.css) */
body.signin-page header{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;align-items:stretch;}
body.signin-page header img { align-self: center; width:300px; height:auto }
body.signin-page header h1 { display:none; font-size:17px;color:var(--muted);font-weight:700;margin:8px 0 0 }
@media (max-width:360px){ body.signin-page header img{width:260px} }
/* Utility for CSP: replaces style="margin-top:20px" */
.mt20 { margin-top:20px !important; }
/* ---- Moved from dashboard.html <style> for CSP compliance ---- */
.topbar{ display:flex; align-items:center; justify-content:space-between; position:relative; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:42px; width:auto; display:block }
.avatar{ width:40px; height:40px; border-radius:50%;
  background: radial-gradient(circle at 50% 50%, #ffffff 12px, #e9eef6 22px);
  border:1px solid var(--border);
  box-shadow: inset 0 1px 8px rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; letter-spacing:.5px; cursor:pointer; user-select:none }
.avatar .i1{ color:var(--ss-blue) }
.avatar .i2{ color:var(--ss-orange) }
.menu{ position:absolute; right:0; top:calc(100% + 8px); background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.10); padding:6px; min-width:150px; z-index:10 }
.menu .menu-item{ appearance:none; display:block; width:100%; text-align:left; background:transparent; border:0; padding:8px 10px; border-radius:8px; color:var(--muted); cursor:pointer; font:inherit; border-bottom:1px dotted transparent }
.menu .menu-item:hover{ background:transparent; color:var(--text); border-bottom-color:currentColor }
main.wrap{display:block;min-height:100dvh;padding-top:20px;}
main.wrap > .card{margin:0 auto;}
/* Utility for CSP: replaces style="white-space:nowrap" */
.ws-nowrap { white-space:nowrap !important; }
/* Utility for CSP: replaces style="display:flex" */
.d-flex { display:flex !important; }
/* Utility for CSP: replaces style="gap:8px" */
.gap8 { gap:8px !important; }
/* Utility for CSP: replaces style="margin-top:6px" */
.mt6 { margin-top:6px !important; }
/* Utility for CSP: replaces style="font-weight:600" */
.fw600 { font-weight:600 !important; }
/* ---- Moved from index.html <style> for CSP compliance ---- */
@media (prefers-color-scheme: dark){
  :root{--bg:#0b0f17;--card:#0e1524;--ink:#cfe3ff;--muted:#a1b1c7;--border:#1f2a3d}
}
body.index-page { color: var(--ink); }
#preLogin{display:block}
#postLogin{display:none}
/* Utility for CSP: replaces style="margin-top:24px" */
.mt24 { margin-top:24px !important; }
/* Utility for CSP: replaces style="margin-top:4px" */
.mt4 { margin-top:4px !important; }
/* Utility for CSP: replaces style="flex:0 0 auto;white-space:nowrap" */
.flex0-nowrap {
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
/* Utility for CSP: replaces style="--gx:8px;align-items:center" */
.row-center {
  --gx:8px;
  align-items:center;
}
/* Utility for CSP: replaces style="margin-top:8px" */
.mt8 { margin-top:8px !important; }
/* Utility for CSP: replaces style="display:none" */
.d-none { display:none !important; }
/* Utility for CSP: replaces style="flex:1" */
.flex1 { flex:1 !important; }
/* Utility for CSP: replaces style="--gx:8px;align-items:center;grid-template-columns:1fr auto" */
.row-email {
  --gx:8px;
  align-items:center;
  grid-template-columns:1fr auto;
}
/* Utility for CSP: replaces style="margin-top:0" */
.divider-mt0 { margin-top:0 !important; }
/* ---- Moved from account.html <style> for CSP compliance ---- */
header{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;align-items:stretch}
header img{align-self:center;width:300px;height:auto}
.divider{margin-top:4px}
@media (max-width:360px){ header img{width:260px} }
.badge.badge-verified{background:#1d6fdc;color:#fff}
.badge.badge-unverified{background:#ff8800;color:#fff}
#emailVerifyInline .row{margin-top:0}
/* v2 (2025-09-04): Symmetric mobile gutters + safe-area, card uses max-width + width:100% to avoid vw rounding asymmetry */

/* SquadScene common styles – shared across pages */
:root{
  /* Brand */
  --ss-blue:#1E73D6;
  --ss-orange:#F57C20;
  --ss-green:#22c55e;
  /* Shadows */
  --btn-shadow-blue:0 8px 30px rgba(30,115,214,.25);
  --btn-shadow-accent:0 8px 28px rgba(245,124,32,.22);
  /* Neutrals (light theme) */
  --bg:#f6f8fb; --card:#fff; --text:#1f2937; --muted:#6b7280; --border:#e5e7eb;
  /* Legacy ink fallback */
  --ink:#0b3a6a;
  /* Controls */
  --ctl-h:42px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
}

/* Layout */
.wrap{min-height:100dvh;display:grid;place-items:center;padding:20px clamp(12px,3.5vw,24px)}
/* Safe-area aware gutters (iOS notch) */
.wrap{padding-left:max(clamp(12px,3.5vw,24px), env(safe-area-inset-left));padding-right:max(clamp(12px,3.5vw,24px), env(safe-area-inset-right))}
.card{max-width:680px;width:100%;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.06)}
.center{text-align:center}
.rows{display:grid;gap:12px;margin:6px 0}
.rows .btn + .btn{margin-top:12px}
.banner{display:none;align-items:center;justify-content:space-between;gap:10px;background:#eef4ff;border:1px solid #d5e4ff;border-radius:12px;padding:12px}
.badge{font-size:12px;color:#3a6ad6;background:#eaf1ff;border:1px solid #cfdbff;padding:4px 8px;border-radius:999px}
/* Status badge (input height) */
.badge--status{border-radius:8px;font-weight:600;min-width:94px;text-align:center;padding:6px 10px;font-size:12px;display:inline-flex;justify-content:center;align-items:center;height:var(--ctl-h);line-height:1}
.badge--status.is-verified{background:#EAF3FE;border:1px solid var(--ss-blue);color:var(--ss-blue)}
.badge--status.is-unverified{background:#FFF5EE;border:1px solid var(--ss-orange);color:var(--ss-orange)}

/* Buttons */
.btn{appearance:none;border:1px solid transparent;border-radius:12px;padding:13px 18px;font-weight:600;cursor:pointer;width:100%;transition:transform .02s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;font-size:14px}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:default;box-shadow:none;filter:grayscale(.15)}
/* Index variants */
.btn.blue{background:var(--ss-blue);color:#fff;box-shadow:var(--btn-shadow-blue)}
/* Deprecated: .btn.orange kept for backward compatibility */
.btn.orange{background:var(--ss-orange);color:#fff;box-shadow:var(--btn-shadow-accent)}
.btn.outline{background:#fff;border:1px solid #cfd8e3;color:var(--ink)}
/* Auth variants */
.btn-primary{background:var(--ss-orange);color:#fff;box-shadow:var(--btn-shadow-accent);position:relative}
.btn-primary[disabled]{background:linear-gradient(135deg,#f2b586,#f3a262);color:#fff;}
.btn-outline{background:#fff;color:var(--ss-orange);border:1px solid var(--ss-orange)}
a.btn{display:inline-block;text-align:center}
.actions{display:grid;gap:12px;margin-top:12px}

/* Forms */
label{font-size:13px;color:var(--muted);font-weight:600}
form label{display:block;margin:14px 0 6px 0}
/*. first label in a row can have no top margin via page-specific rule if desired */
input, select{appearance:none;width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;outline:0;font-size:14px;line-height:1.2;height:var(--ctl-h);transition:border-color .15s ease, box-shadow .15s ease}
input:focus, select:focus{border-color:var(--ss-blue);box-shadow:0 0 0 3px rgba(30,115,214,.18)}
input[type="date"]{appearance:auto;-webkit-appearance:auto;height:var(--ctl-h)}
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-date-and-time-value{line-height:1.2}
input[type="date"]::-webkit-calendar-picker-indicator{margin:0 2px}
.err{min-height:16px;font-size:12px;color:var(--ss-orange);margin-top:6px;display:none}
.hidden{display:none !important}

/* Banners */
.alert{font-size:14px;border-radius:10px;padding:10px 12px;margin:8px 0;display:none}
.alert.error{color:var(--ss-orange);border:1px solid var(--ss-orange);background:#FFF5EE}
.alert.ok{color:var(--ss-blue);border:1px solid var(--ss-blue);background:#EAF3FE}

/* Links */
.links{display:flex;justify-content:center;gap:14px;color:var(--muted);margin:12px 0 2px;flex-wrap:wrap;font-size:14px}
.links a{color:inherit;text-decoration:none;border-bottom:1px dotted transparent}
.links a:hover{border-bottom-color:currentColor}

/* Divider */
.divider{display:flex;align-items:center;text-align:center;margin:8px 0;color:var(--muted);font-weight:600;font-size:15px;gap:16px;width:100%}
.divider::before,.divider::after{content:"";flex:1;border-bottom:2px solid var(--border);margin:0 6px}
.divider-lg{margin:18px 0}

/* Social buttons */
.btn-apple{background:#000;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;padding-top:9px;padding-bottom:9px}
.btn-google{background:#fff;color:#1f2937;border:1px solid #cfd8e3;display:flex;align-items:center;justify-content:center;gap:10px}
.btn .icon{display:inline-block;width:18px;height:18px}
.btn-apple .icon{width:24px;height:24px}
.btn-google .icon{width:16px;height:16px}

/* Footer */
footer{margin-top:18px;text-align:center;color:var(--muted);font-size:13px}

/* Small phones */
@media (max-width:360px){
  :root{--ctl-h:38px}
  input, select{padding:9px 10px}
  .actions{gap:10px}
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
  .btn:active{transform:none}
}

/* Phone input layout (signup) */
.phonewrap{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:stretch}
.dial{display:flex;align-items:center;justify-content:center;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#f9fafb;color:var(--muted);user-select:none;white-space:nowrap;font-size:14px;line-height:1.2;height:var(--ctl-h)}
@media (max-width:360px){ .dial{padding:9px 10px} }

/* Shared grid rows used in forms */
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:719px){ .row{grid-template-columns:1fr} }

/* Common field wrapper */
.field{position:relative}

/* Validation state */
.ss-invalid, input[aria-invalid="true"]{border-color:var(--ss-orange)!important;box-shadow:0 0 0 3px rgba(245,124,32,.10)}

/* Utilities */
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Logo helper (optional) */
.logo{display:block;width:300px;height:auto;margin:4px auto 18px}

/* Multi-step form styles */
.progress-indicator {
  margin: 0 0 30px 0;
  padding: 0;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0 20px;
}

.progress-steps::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 40px;
  right: 40px;
  height: 2px;
  background: var(--border);
  z-index: 1;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--border);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
}

.step-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  text-align: center;
  transition: color 0.3s ease;
}

.step.active .step-number {
  background: var(--ss-orange);
  color: white;
}

.step.active .step-label {
  color: var(--ss-orange);
  font-weight: 600;
}

.step.completed .step-number {
  background: var(--ss-blue);
  color: white;
}

.step.completed .step-label {
  color: var(--ss-blue);
}

.step-content {
  display: none;
}

.step-content.active {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.step-header {
  text-align: center;
  margin-bottom: 24px;
}

.step-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
}

.step-header p {
  margin: 0;
  font-size: 14px;
}

.actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.actions .btn {
  min-width: 100px;
}

@media (max-width: 640px) {
  .progress-steps {
    padding: 0 10px;
  }
  
  .progress-steps::before {
    left: 30px;
    right: 30px;
  }
  
  .step-number {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  
  .step-label {
    font-size: 11px;
  }
  
  .step-header h2 {
    font-size: 20px;
  }
  
  .actions {
    flex-direction: column;
  }
  
  .actions .btn {
    width: 100%;
  }
}