/* ClubPath — Auth screens */
:root {
  --violet-50:  #F5F3FF;
  --violet-100: #EDE9FE;
  --violet-200: #DDD6FE;
  --violet-400: #A78BFA;
  --violet-600: #7C3AED;
  --violet-700: #6D28D9;
  --violet-800: #5B21B6;
  --violet-900: #4C1D95;
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-700: #334155;
  --slate-900: #0F172A;
  --danger-bg: #FEF2F2;
  --danger-fg: #991B1B;
  --danger-bd: #FCA5A5;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}
* { box-sizing: border-box; }
body { font-family:'Inter',system-ui,sans-serif; color:var(--slate-900); font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; }
.cp-stage { width:100%; min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--slate-50); position:relative; overflow:hidden; }
.cp-stage--fullbleed {
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(124,58,237,.08), transparent 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(124,58,237,.06), transparent 60%),
    var(--slate-50);
}
.cp-stage--fullbleed::before {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--slate-200) 0.5px, transparent 0.5px),
    linear-gradient(90deg, var(--slate-200) 0.5px, transparent 0.5px);
  background-size:32px 32px; opacity:.35;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent 80%);
  pointer-events:none;
}
.cp-card { width:420px; max-width:calc(100% - 32px); background:#fff; border:0.5px solid var(--slate-200); border-radius:var(--radius-lg); padding:32px; position:relative; z-index:1; }
.cp-card--wide { width:520px; }
.cp-brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.cp-brand-mark { width:32px; height:32px; border-radius:8px; background:var(--violet-600); display:inline-flex; align-items:center; justify-content:center; }
.cp-brand-mark svg { width:18px; height:18px; color:#fff; }
.cp-brand-name { font-size:16px; font-weight:500; color:var(--slate-900); letter-spacing:-.01em; }
.cp-h1 { font-size:24px; font-weight:500; color:var(--slate-900); margin:0 0 6px; letter-spacing:-.01em; line-height:1.25; }
.cp-sub { font-size:13px; color:var(--slate-500); margin:0; }
.cp-form-group { margin-bottom:14px; }
.cp-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cp-label { display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:500; color:var(--slate-500); margin-bottom:4px; }
.cp-label-opt { font-size:11px; font-weight:400; color:var(--slate-400); }
.cp-input, .cp-select { width:100%; padding:9px 12px; border:0.5px solid var(--slate-300); border-radius:var(--radius-md); font-size:13px; font-family:inherit; color:var(--slate-900); background:#fff; transition:border-color .15s, box-shadow .15s; appearance:none; }
.cp-input::placeholder { color:var(--slate-400); }
.cp-input:focus, .cp-select:focus { outline:none; border-color:var(--violet-600); box-shadow:0 0 0 3px rgba(124,58,237,.15); }
.cp-input-group { position:relative; }
.cp-input-group .cp-input { padding-right:38px; }
.cp-input-icon-trail { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--slate-400); cursor:pointer; padding:4px; display:inline-flex; align-items:center; }
.cp-input-icon-trail:hover { color:var(--slate-700); }
.cp-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 16px; border-radius:var(--radius-md); font-size:13px; font-weight:500; font-family:inherit; cursor:pointer; transition:background .15s, border-color .15s; border:0.5px solid transparent; width:100%; }
.cp-btn--primary { background:var(--violet-600); color:#fff; border-color:var(--violet-600); }
.cp-btn--primary:hover { background:var(--violet-700); border-color:var(--violet-700); }
.cp-btn--ghost { background:transparent; color:var(--slate-500); border-color:var(--slate-200); }
.cp-btn--ghost:hover { background:var(--slate-50); color:var(--slate-700); }
.cp-btn--outline { background:#fff; color:var(--violet-600); border-color:var(--violet-600); }
.cp-btn--outline:hover { background:var(--violet-50); border-color:var(--violet-700); color:var(--violet-700); }
.cp-btn--auto { width:auto; }
.cp-row-between { display:flex; align-items:center; justify-content:space-between; margin:-2px 0 18px; }
.cp-check { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--slate-500); cursor:pointer; user-select:none; }
.cp-check input { appearance:none; width:16px; height:16px; border:0.5px solid var(--slate-300); border-radius:4px; background:#fff; display:inline-grid; place-content:center; cursor:pointer; }
.cp-check input:checked { background:var(--violet-600); border-color:var(--violet-600); }
.cp-check input:checked::after { content:""; width:9px; height:9px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat; }
.cp-link { color:var(--violet-700); font-size:12px; text-decoration:none; font-weight:500; }
.cp-link:hover { text-decoration:underline; }
.cp-footer-text { font-size:13px; color:var(--slate-500); text-align:center; margin:22px 0 0; }
.cp-alert { display:flex; align-items:flex-start; gap:8px; background:var(--danger-bg); border:0.5px solid var(--danger-bd); color:var(--danger-fg); border-radius:var(--radius-md); padding:10px 12px; margin-bottom:16px; font-size:12px; }
.cp-alert .ti { font-size:14px; flex-shrink:0; margin-top:1px; }
.cp-stepper { display:flex; align-items:center; gap:8px; }
.cp-step { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--slate-400); }
.cp-step-dot { width:22px; height:22px; border-radius:50%; border:0.5px solid var(--slate-200); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:500; background:#fff; color:var(--slate-400); }
.cp-step--active .cp-step-dot { background:var(--violet-600); color:#fff; border-color:var(--violet-600); }
.cp-step--active { color:var(--slate-900); font-weight:500; }
.cp-step--done .cp-step-dot { background:var(--violet-50); color:var(--violet-700); border-color:var(--violet-200); }
.cp-step-line { flex:1; height:0; border-top:0.5px dashed var(--slate-200); }
.cp-strength { margin-top:8px; }
.cp-strength-bars { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin-bottom:4px; }
.cp-strength-bar { height:3px; border-radius:2px; background:var(--slate-200); }
.cp-strength--weak   .cp-strength-bar:nth-child(1) { background:#EF4444; }
.cp-strength--medium .cp-strength-bar:nth-child(1),
.cp-strength--medium .cp-strength-bar:nth-child(2) { background:#F59E0B; }
.cp-strength--strong .cp-strength-bar { background:#16A34A; }
.cp-strength-label { font-size:11px; color:var(--slate-500); }
.cp-strength--weak   .cp-strength-label { color:#B91C1C; }
.cp-strength--medium .cp-strength-label { color:#92400E; }
.cp-strength--strong .cp-strength-label { color:#166534; }
.cp-error { display:block; font-size:11px; color:#B91C1C; margin-top:4px; }