/* ============================================================
   AnswerCatch — Auth, Onboarding & Dashboard styles
   Builds on css/styles.css design tokens (blue/dark theme).
   ============================================================ */

/* ---------- Auth shell (signup / login / reset) ---------- */
.auth-wrap {
  min-height: calc(100vh - 74px);
  display: grid; place-items: center;
  padding: 56px 20px;
  background: var(--grad-dark);
  position: relative; overflow: hidden;
}
.auth-wrap::before {
  content:""; position:absolute; inset:0; opacity:.5;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 80%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 80%);
}
.auth-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px;
  background: #fff; border-radius: 22px; padding: 40px 38px;
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.5);
}
.auth-card .auth-brand { display:flex; align-items:center; gap:10px; justify-content:center; font-weight:900; font-size:1.25rem; color:var(--ink); margin-bottom: 22px; }
.auth-card .auth-brand .logo-mark { width:34px; height:34px; border-radius:10px; background:var(--grad-btn); display:grid; place-items:center; color:#fff; }
.auth-card .auth-brand .logo-mark svg { width:19px; height:19px; }
.auth-card .auth-brand b { background: var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.auth-card h1 { font-size: 1.6rem; text-align:center; margin-bottom: 6px; }
.auth-card .sub { text-align:center; color: var(--muted); font-size:.98rem; margin-bottom: 26px; }

.auth-field { margin-bottom: 18px; }
.auth-field label { display:block; font-weight:700; color:var(--ink); font-size:.9rem; margin-bottom:7px; }
.auth-field input {
  width:100%; font-family:var(--font); font-size:1rem; color:var(--ink);
  padding: 14px 16px; border:1.5px solid var(--line); border-radius:12px; background:var(--bg-soft);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.auth-field input:focus { outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(47,107,255,.12); }

/* password show/hide */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 54px; }
.pw-toggle {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--muted); padding:8px; border-radius:8px; font-size:.8rem; font-weight:700;
}
.pw-toggle:hover { color:var(--blue); background:var(--bg-alt); }

/* strength meter */
.pw-strength { margin-top: 9px; }
.pw-bars { display:flex; gap:6px; margin-bottom:5px; }
.pw-bars span { height:5px; flex:1; border-radius:3px; background:var(--line); transition: background .2s ease; }
.pw-strength.s1 .pw-bars span:nth-child(-n+1) { background:#f0603f; }
.pw-strength.s2 .pw-bars span:nth-child(-n+2) { background:#f5a623; }
.pw-strength.s3 .pw-bars span:nth-child(-n+3) { background:#3ea0ff; }
.pw-strength.s4 .pw-bars span { background:#10d9b0; }
.pw-hint { font-size:.8rem; color:var(--muted); }

.auth-actions { margin-top: 22px; }
.auth-meta { display:flex; justify-content:space-between; align-items:center; margin: 14px 2px 0; font-size:.92rem; flex-wrap:wrap; gap:8px; }
.auth-foot { text-align:center; margin-top: 22px; color:var(--muted); font-size:.95rem; }

.alert { border-radius:12px; padding:13px 15px; font-size:.94rem; margin-bottom: 18px; display:none; }
.alert.show { display:block; }
.alert-error { background:#fff2ef; border:1px solid #ffd3c9; color:#c33a24; }
.alert-success { background: rgba(16,217,176,.1); border:1px solid rgba(16,217,176,.4); color:#0c8f77; }
.alert-info { background: var(--blue-light); border:1px solid #cfe0fb; color:#1f4fd6; }

.back-home { position:relative; z-index:1; text-align:center; margin-top:20px; }
.back-home a { color:#a9c3ea; font-size:.9rem; }
.back-home a:hover { color:#fff; }

/* ---------- Onboarding wizard ---------- */
.wizard-page { background: var(--bg-soft); min-height: calc(100vh - 74px); padding: 44px 0 80px; }
.wizard { max-width: 760px; margin: 0 auto; }
.wizard-head { text-align:center; margin-bottom: 26px; }
.wizard-head h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); }
.wizard-head p { color: var(--muted); margin-top: 8px; }

.progress { margin: 0 auto 30px; max-width: 620px; }
.progress-bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-bar > i { display:block; height:100%; width:20%; background: var(--grad-btn); border-radius:999px; transition: width .35s ease; }
.progress-steps { display:flex; justify-content:space-between; margin-top: 12px; }
.progress-steps span { font-size:.78rem; font-weight:700; color:var(--muted); text-align:center; flex:1; }
.progress-steps span.active { color: var(--blue); }
.progress-steps span.done { color: var(--accent); }

.wizard-card { background:#fff; border:1px solid var(--line); border-radius:20px; padding: 36px; box-shadow: var(--shadow); }
.step-panel { display:none; animation: rise .35s ease both; }
.step-panel.active { display:block; }
.step-panel h2 { font-size: 1.4rem; margin-bottom: 6px; }
.step-panel .step-sub { color: var(--muted); margin-bottom: 24px; }

.wz-field { margin-bottom: 20px; }
.wz-field label { display:block; font-weight:700; color:var(--ink); font-size:.92rem; margin-bottom:7px; }
.wz-field .opt { font-weight:500; color:var(--muted); font-size:.85rem; }
.wz-field input, .wz-field select, .wz-field textarea {
  width:100%; font-family:var(--font); font-size:1rem; color:var(--ink);
  padding: 13px 15px; border:1.5px solid var(--line); border-radius:11px; background:var(--bg-soft);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.wz-field input:focus, .wz-field select:focus, .wz-field textarea:focus { outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(47,107,255,.12); }
.wz-field textarea { resize:vertical; min-height: 96px; }
.wz-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* choice cards (radio) */
.choice-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice { position:relative; }
.choice input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.choice .choice-box {
  border:1.5px solid var(--line); border-radius:14px; padding:18px; cursor:pointer; transition: all .18s ease; height:100%;
  display:flex; flex-direction:column; gap:6px; background:var(--bg-soft);
}
.choice .choice-box .ch-t { font-weight:800; color:var(--ink); display:flex; align-items:center; gap:9px; }
.choice .choice-box .ch-d { font-size:.88rem; color:var(--muted); }
.choice .choice-box .ic { width:34px;height:34px;border-radius:10px;background:var(--blue-light);color:var(--blue);display:grid;place-items:center; }
.choice input:checked + .choice-box { border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(47,107,255,.12); }

/* checkbox chips */
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip-check { position:relative; }
.chip-check input { position:absolute; opacity:0; }
.chip-check span { display:inline-block; padding:9px 15px; border:1.5px solid var(--line); border-radius:999px; cursor:pointer; font-weight:600; font-size:.92rem; color:var(--body); background:var(--bg-soft); transition: all .16s ease; }
.chip-check input:checked + span { border-color:var(--blue); color:var(--blue); background:var(--blue-light); }

.wizard-nav { display:flex; justify-content:space-between; gap:12px; margin-top: 28px; }
.wizard-nav .spacer { flex:1; }

/* review summary */
.review-list { list-style:none; margin-top: 8px; }
.review-list li { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); font-size:.96rem; }
.review-list li:last-child { border-bottom:none; }
.review-list .rk { font-weight:700; color:var(--ink); min-width: 190px; }
.review-list .rv { color:var(--body); }

/* ---------- Dashboard ---------- */
.dash { background: var(--bg-soft); min-height: calc(100vh - 74px); padding: 40px 0 80px; }
.dash-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom: 26px; }
.dash-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.dash-head p { color: var(--muted); margin-top:4px; }
.dash-grid { display:grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items:start; }
.dash-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding: 28px; box-shadow: var(--shadow-sm); margin-bottom: 24px; }
.dash-card h3 { font-size:1.15rem; margin-bottom: 4px; display:flex; align-items:center; gap:10px; }
.dash-card .card-sub { color:var(--muted); font-size:.9rem; margin-bottom: 20px; }
.dash-card .card-head-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom: 18px; }
.dash-card .card-head-row h3 { margin-bottom:0; }

.status-banner {
  display:flex; gap:14px; align-items:center;
  background: linear-gradient(120deg, rgba(47,107,255,.08), rgba(34,211,238,.08));
  border:1px solid rgba(47,107,255,.25); border-radius:16px; padding: 20px 22px; margin-bottom: 24px;
}
.status-banner .pulse { width:44px;height:44px;border-radius:12px;background:var(--grad-btn);display:grid;place-items:center;color:#fff;flex-shrink:0; }
.status-banner .pulse .dot { width:12px;height:12px;border-radius:50%;background:#fff; animation: pulse 2s infinite; }
.status-banner h4 { color:var(--ink); font-size:1.05rem; margin-bottom:2px; }
.status-banner p { color:var(--body); font-size:.94rem; }

.plan-pill { display:inline-flex; align-items:center; gap:8px; background:var(--blue-light); color:var(--blue-dark); font-weight:800; padding:8px 16px; border-radius:999px; font-size:.95rem; }

.detail-list { list-style:none; }
.detail-list li { display:flex; gap:14px; padding:13px 0; border-bottom:1px solid var(--line-soft); }
.detail-list li:last-child { border-bottom:none; }
.detail-list .dk { font-weight:700; color:var(--muted); min-width: 190px; font-size:.86rem; text-transform:uppercase; letter-spacing:.04em; }
.detail-list .dv { color:var(--ink); flex:1; }

.empty-state { text-align:center; padding: 40px 20px; color:var(--muted); }
.empty-state .es-ic { width:60px;height:60px;border-radius:16px;background:var(--bg-alt);color:var(--muted);display:grid;place-items:center;margin:0 auto 14px; }
.empty-state h4 { color:var(--ink); margin-bottom:6px; }
.empty-state p { font-size:.92rem; max-width: 320px; margin: 0 auto; }

/* editable form inside dashboard */
.edit-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.edit-grid .full { grid-column: 1 / -1; }
.dash-card .wz-field { margin-bottom: 16px; }
.edit-form { display:none; }
.edit-form.show { display:block; animation: rise .3s ease both; }
.view-mode.hide { display:none; }

.dash-alert { border-radius:11px; padding:11px 14px; font-size:.92rem; margin-bottom:16px; display:none; }
.dash-alert.show { display:block; }

@media (max-width: 820px) {
  .dash-grid { grid-template-columns: 1fr; }
  .wz-grid, .choice-grid, .edit-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 32px 24px; }
  .wizard-card { padding: 26px 20px; }
  .review-list li { flex-direction:column; gap:2px; }
  .review-list .rk { min-width: 0; }
  .detail-list li { flex-direction:column; gap:2px; }
  .detail-list .dk { min-width:0; }
}