:root {
  /* Brand */
  --brand-50:  #f2f0ff;
  --brand-100: #e6e2ff;
  --brand-200: #cdc5ff;
  --brand-300: #ab9dff;
  --brand-400: #8b74ff;
  --brand-500: #6d4cff;
  --brand-600: #5b34f5;
  --brand-700: #4c27d6;

  /* Accents */
  --green-50: #ecfdf5;
  --green-100: #dcfce7;
  --green-500: #16a34a;
  --green-600: #15803d;
  --green-700: #166534;

  --sky-50: #eff8ff;
  --sky-100: #e0f2fe;
  --sky-500: #0284c7;
  --sky-600: #0369a1;

  --violet-50: #f5f3ff;
  --violet-100: #ede9fe;
  --violet-500: #7c3aed;
  --violet-600: #6d28d9;
  --violet-700: #5b21b6;

  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-500: #ef4444;
  --red-700: #b91c1c;

  --amber-50: #fffbeb;
  --amber-500: #f59e0b;

  /* Neutrals */
  --slate-25: #f7f8fb;
  --slate-50: #f8fafc;
  --slate-100: #f1f4f8;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --ink-400: #8a8580;
  --ink-500: #6b6560;
  --ink-600: #524d48;
  --ink-700: #3a3532;
  --ink-800: #262220;
  --ink-900: #171412;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-panel: 0 4px 24px rgba(16,24,40,.06);
  --shadow-pop: 0 20px 45px rgba(16,24,40,.16);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink-800);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ---------------- Icons ---------------- */
.icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 30px; height: 30px; }
.icon-xxl { width: 50px; height: 50px; }

/* ---------------- Page wrapper utility ---------------- */
.page-wrap,
.wizard-page-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.page-footer-note {
  text-align: center;
  font-size: 12px;
  color: var(--ink-400);
  margin-top: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 17px;
  color: var(--ink-900);
}

.brand-mark {
  width: 9rem;
  height: 3rem;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.skip-link {
  display: flex; align-items: center; gap: 4px;
  color: var(--brand-600); font-weight: 600; font-size: 14px;
  background: none; border: none;
}
.skip-link:hover { color: var(--brand-700); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 15px;
  padding: 14px 22px;
  border: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  width: 100%;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-cta { margin-top: 22px; }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: white;
  box-shadow: var(--shadow-card);
}
.btn-primary:hover { box-shadow: 0 12px 26px rgba(109,76,255,.32); }

.btn-outline {
  background: white;
  color: var(--ink-700);
  border: 1px solid var(--slate-200);
}
.btn-outline:hover { border-color: var(--brand-300); color: var(--brand-600); }

.btn-outline-brand {
  background: white;
  color: var(--brand-600);
  border: 1px solid var(--brand-200);
}
.btn-outline-brand:hover { background: var(--brand-50); }

.shake { animation: shake .35s; }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr 1fr; gap: 12px 10px; }
}
.form-grid .full { grid-column: 1 / -1; }

.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.field { display: flex; flex-direction: column; }

.field label {
  font-size: 14px; font-weight: 700; color: var(--ink-700);
  margin-bottom: 9px;
}
.input-box {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 11px 14px;
  background: white;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input-box:focus-within {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(109,76,255,.12);
}
.input-box.error { border-color: #B45309; }
.input-box svg { color: var(--brand-500); }
.input-box input, .input-box select {
  border: none; outline: none; width: 100%;
  font-size: 14px; color: var(--ink-800); background: transparent;
}
.input-box select { appearance: none; cursor: pointer; }

/* iOS Safari auto-zooms the page on focus when a form field's font-size is under 16px */
@media (max-width: 900px) {
  .input-box input, .input-box select { font-size: 16px; }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ink-800);
  caret-color: var(--ink-800);
  -webkit-box-shadow: 0 0 0 1000px white inset;
  box-shadow: 0 0 0 1000px white inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}

input:autofill,
select:autofill,
textarea:autofill {
  box-shadow: 0 0 0 1000px white inset;
  filter: none;
  color: var(--ink-800);
}

.field-error {
  font-size: 12px; color: #B45309; margin-top: 5px; display: none;
}
.field-error.show { display: block; }

.badge-row { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 28px; }
.badge-pill {
  display: flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 7px 14px;
  font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent;
  transition: transform .15s ease;
}
.badge-pill:hover { transform: translateY(-1px); }
.badge-pill.green { background: var(--green-50); color: var(--green-600); border-color: #d3f5e2; }
.badge-pill.sky { background: var(--sky-50); color: var(--sky-600); border-color: #d3ecfb; }
.badge-pill.violet { background: var(--violet-50); color: var(--violet-600); border-color: #e4dbfb; }
.badge-pill.amber { background: var(--amber-50); color: #b45309; border-color: #fde3b0; }
.badge-pill.violet svg.lucide-circle-check { fill: none; }
.badge-pill.violet svg.lucide-circle-check circle { fill: currentColor; stroke: none; }
.badge-pill.violet svg.lucide-circle-check path { stroke: #ffffff; stroke-width: 2.5; }

.trust-line {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-700); margin-bottom: 6px;
}
.warn-line { font-size: 12px; color: #B45309; margin: 0; }

.trust-strip {
  display: flex; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--slate-100);
  padding-top: 22px; margin-top: 6px;
}
.trust-item { display: flex; align-items: flex-start; gap: 8px; flex: 1; }
.trust-item svg { color: var(--brand-500); margin-top: 2px; flex-shrink: 0; }
.trust-item strong { display: block; font-size: 13px; color: var(--ink-800); }
.trust-item span { font-size: 12px; color: var(--ink-700); }
@media (max-width: 700px) { .trust-strip { flex-direction: column; gap: 14px; } }

.guarantee-box {
  display: flex; align-items: center; gap: 14px;
  background: var(--brand-50);
  border-radius: var(--radius-lg);
  padding: 16px 209px;
  margin-top: 20px;
}
.guarantee-box .g-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: white; color: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.guarantee-box strong { display: block; font-size: 14px; color: var(--ink-800); }
.guarantee-box span { font-size: 12.5px; color: var(--ink-700); }

.guarantee-mini {
  display: flex; gap: 10px;
  background: var(--slate-50);
  border-radius: var(--radius-md);
  padding: 14px; margin-top: 16px;
}
.guarantee-mini svg { color: var(--brand-500); flex-shrink: 0; margin-top: 1px; }
.guarantee-mini strong { display: block; font-size: 13px; color: var(--ink-800); }
.guarantee-mini span { font-size: 12px; color: var(--ink-700); }

.secure-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--ink-600);
}
.secure-line span { display: flex; align-items: center; gap: 5px; }
.secure-line span:not(:last-child)::after {
  content: "•";
  margin: 0 14px;
  color: var(--ink-400);
  font-size: 14px;
  line-height: 1;
}

/* "Powered by Stripe" style badge — reusable anywhere payments show up */
span.Powered_by {
  display: inline-flex !important;
  align-items: center;
  background-color: #f6f9fc !important;
  border: 1px solid #e6ebf1 !important;
  border-radius: 6px !important;
  padding: 5px 13px !important;
  color: #697386 !important;
  font-weight: 500;
  font-size: 10px;
  line-height: 17px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, sans-serif;
}
span.Powered_by span {
  color: #003f7e !important;
  font-weight: 850;
  margin-left: 7px;
  font-size: 17px;
}
@media (max-width: 640px) {
  span.Powered_by { padding: 2px 8px !important; font-size: 11px !important; line-height: 16px !important; }
  span.Powered_by span { font-size: 13px !important; margin-left: 3px !important; font-weight: 850; }
}

/* ---------------- Modal (help / success / any confirmation) ---------------- */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal-overlay.show { display: flex; }
.modal-box {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  max-width: 380px;
  width: 100%;
  padding: 32px;
  text-align: center;
  animation: pop .2s ease;
}
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--green-50); color: var(--green-500);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.modal-box h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: var(--ink-900); }
.modal-box p { margin: 0 0 22px; font-size: 13.5px; color: var(--ink-700); line-height: 1.6; }

.help-action {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: border-color .15s ease, background .15s ease;
}
.help-action:hover { border-color: var(--brand-300); background: var(--brand-50); }
.help-action svg:first-child { color: var(--brand-500); flex-shrink: 0; }
.help-action div { flex: 1; }
.help-action strong { display: block; font-size: 14px; color: var(--ink-800); }
.help-action span { font-size: 12.5px; color: var(--ink-600); }
.help-action .arrow { color: var(--ink-300); flex-shrink: 0; }

.help-context-box {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--brand-50);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.help-context-box svg { color: var(--brand-500); flex-shrink: 0; margin-top: 2px; }
.help-context-box p { margin: 0; font-size: 13px; color: var(--brand-700); line-height: 1.5; text-align: left; }

.hidden { display: none !important; }
.screen { display: none; }
.screen.active {
  display: block;
  animation: screenIn .32s ease both;
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Shared base typography + small utilities
   (used across marketing pages and the authenticated app shell)
   ============================================================ */
h1, h2, h3 { margin: 0; color: var(--ink-900); }
p { margin: 0; }
.muted { color: var(--ink-500); }
.accent { color: var(--brand-500); }
.wave { display: inline-block; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 10px;
  background: white; border: 1px solid var(--slate-200);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-700); position: relative; flex-shrink: 0;
}
.badge-dot {
  position: absolute; top: -5px; right: -5px;
  background: var(--red-500); color: white;
  font-size: 10px; font-weight: 800;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid white;
}

/* ============================================================
   AUTHENTICATED APP SHELL
   Sidebar / mobile topbar / mobile bottom nav — rendered by the
   shared aside.jsp and header.jsp includes. Any page that uses
   those includes (Dashboard, Goals, Settings, ...) gets this for
   free just by linking commonnew.css; no per-page shell CSS needed.
   ============================================================ */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px; flex-shrink: 0;
  background: white;
  border-right: 1px solid var(--slate-200);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px 18px;
  position: sticky; top: 0; height: 100vh;
}
.sidebar .brand { padding: 0 6px 22px; }
.side-nav { display: flex; flex-direction: column; gap: 3px; }
.side-link {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: 10px;
  font-size: 14.5px; font-weight: 700; color: var(--ink-600);
}
.side-link svg { color: var(--ink-500); }
.side-link:hover { background: var(--slate-50); color: var(--ink-800); }
.side-link.active { background: var(--brand-50); color: var(--brand-700); }
.side-link.active svg { color: var(--brand-600); }

.sidebar-bottom { display: flex; flex-direction: column; gap: 16px; }
.plan-card {
  background: white; border: 1px solid var(--slate-200); border-radius: var(--radius-md);
  padding: 16px; box-shadow: var(--shadow-card);
}
.plan-eyebrow-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.plan-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-500); }
.plan-crown { color: var(--brand-600); }
.plan-name { font-size: 14.5px; color: var(--ink-900); display: block; margin-bottom: 4px; }
.plan-price { font-size: 22px; font-weight: 800; color: var(--ink-900); margin-bottom: 4px; }
.plan-price span { font-size: 12px; font-weight: 600; color: var(--ink-600); }
.plan-renew { display: block; font-size: 11.5px; color: var(--ink-600); margin-bottom: 14px; }
.plan-free-note { font-size: 12px; color: var(--ink-600); line-height: 1.5; margin-bottom: 14px; }
.btn-upgrade {
  width: 100%; background: var(--brand-600); color: white; border: none;
  border-radius: 9px; padding: 10px; font-size: 13.5px; font-weight: 600;
}
.btn-upgrade:hover { background: var(--brand-700); }

.user-row { display: flex; align-items: center; gap: 10px; padding: 4px 6px; }
.user-row > div { flex: 1; min-width: 0; }
.user-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--violet-100); color: var(--violet-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; flex-shrink: 0;
}
.user-row strong { display: block; font-size: 13.5px; color: var(--ink-900); }
.user-row span { font-size: 11.5px; color: var(--ink-500); font-weight: 600; }
.user-chev { flex-shrink: 0; }

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 55; }
.sidebar-overlay.show { display: block; }
.mobile-topbar, .mobile-bottom-nav { display: none; }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main-content { flex: 1; }
.content-inner { max-width: 1440px; margin: 0 auto; padding: 26px 32px 60px; }

@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    position: fixed; inset: 0 25% 0 0; z-index: 60;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: var(--shadow-pop); height: 100vh;
  }
  .sidebar.open { transform: translateX(0); }

  .mobile-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--slate-200);
    position: sticky; top: 0; background: white; z-index: 30;
  }
  .mobile-topbar .brand { padding: 0; margin: 0; }

  .desktop-only, .desktop-bell { display: none !important; }
  .content-inner { padding: 16px 16px 90px; max-width: 100%; }

  .mobile-bottom-nav {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: white; border-top: 1px solid var(--slate-200);
    padding: 8px 18px 10px; z-index: 40;
  }
  .bottom-link {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 10.5px; font-weight: 700; color: var(--ink-500);
  }
  .bottom-link svg { color: var(--ink-500); }
  .bottom-link.active, .bottom-link.active svg { color: var(--brand-600); }
  .bottom-fab {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--brand-600); color: white;
    display: flex; align-items: center; justify-content: center;
    margin-top: -22px; box-shadow: 0 10px 20px rgba(91,52,245,.35);
  }
}