/* Lumenya Portal — Components */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-primary);
  background: var(--bg-deep);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(79,179,154,0.08), transparent),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(244,198,94,0.05), transparent);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* === Topbar === */
.topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: calc(var(--sp-4) + var(--safe-top)) var(--sp-4) var(--sp-3);
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(to bottom, var(--bg-deep) 70%, transparent);
  backdrop-filter: blur(8px);
}
.topbar--bare { justify-content: center; }
.topbar__brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--fg-primary); font-weight: 600; font-size: var(--fs-h3); }
.topbar__brand:hover { text-decoration: none; }
.brand-mark { color: var(--accent-gold); font-size: 1.2em; }
.brand-text { font-family: var(--font-display); }
.topbar__brand--center { margin: 0 auto; }
.topbar__spacer { flex: 1; }
.icon-btn { background: var(--bg-card); border: 1px solid var(--surface-line); color: var(--fg-secondary); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: 600; cursor: pointer; }

/* === App Container === */
.app { max-width: var(--maxw-app); margin: 0 auto; padding: var(--sp-4) var(--sp-4) calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-5)); min-height: 60vh; }
.page-auth .app { padding-bottom: var(--sp-7); }

/* === Hero Section === */
.hero-section { padding: var(--sp-5) 0 var(--sp-5); }
.hero-section--compact { padding: var(--sp-3) 0 var(--sp-4); }
.hero-section__eyebrow { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-gold); font-weight: 600; margin-bottom: var(--sp-2); }
.hero-section__title { font-family: var(--font-display); font-size: var(--fs-hero); line-height: var(--lh-tight); font-weight: 600; }
.hero-section__sub { color: var(--fg-secondary); margin-top: var(--sp-2); font-size: var(--fs-body-lg); }

/* === Card === */
.card { background: var(--bg-card); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-4); box-shadow: var(--shadow-card); border: 1px solid var(--surface-line); }
.card--hd { background: linear-gradient(135deg, var(--bg-card), var(--bg-card-2)); }
.card--cta { background: linear-gradient(135deg, var(--accent-jade-soft), transparent); border: 1px solid var(--accent-jade); }
.card--learn { background: linear-gradient(135deg, var(--accent-gold-soft), transparent); }
.card__header { margin-bottom: var(--sp-3); }
.card__eyebrow { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); display: block; margin-bottom: var(--sp-1); }
.card__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; }
.card__sub { color: var(--fg-secondary); font-size: var(--fs-body); }
.card__body { color: var(--fg-secondary); }
.card__footer { margin-top: var(--sp-4); }
.card-stack { display: flex; flex-direction: column; gap: 0; }

/* === Buttons === */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 600; padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill); border: none; cursor: pointer; transition: var(--transition); text-decoration: none; }
.btn--primary { background: var(--accent-gold); color: var(--fg-on-gold); }
.btn--primary:hover { background: #FFD470; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(244,198,94,0.3); }
.btn--primary:active { transform: translateY(0); }
.btn--primary:disabled { background: var(--bg-elevated); color: var(--fg-muted); cursor: not-allowed; box-shadow: none; transform: none; }
.btn--ghost { background: transparent; color: var(--fg-primary); border: 1px solid var(--surface-line); }
.btn--ghost:hover { background: var(--bg-card); text-decoration: none; }
.btn--ghost:disabled { color: var(--fg-muted); opacity: 0.5; cursor: not-allowed; }
.btn--block { display: flex; width: 100%; }
.btn--grow { flex: 1; }
.btn--oauth { justify-content: flex-start; padding-left: var(--sp-5); }
.btn--sticky { position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-3)); z-index: 40; box-shadow: var(--shadow-float); }

/* === Pills === */
.pill { display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); font-size: var(--fs-caption); background: var(--accent-jade-soft); color: var(--accent-jade); border: 1px solid rgba(79,179,154,0.3); white-space: nowrap; }
.pill--lg { font-size: var(--fs-body); padding: var(--sp-2) var(--sp-4); }
.pill--sm { font-size: 11px; padding: 2px var(--sp-2); }
.pill-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pill-row--wrap { margin-bottom: var(--sp-4); }

/* === Fields === */
.field { display: block; margin-bottom: var(--sp-4); }
.field__label { display: block; font-size: var(--fs-caption); font-weight: 600; color: var(--fg-secondary); margin-bottom: var(--sp-2); text-transform: uppercase; letter-spacing: 0.05em; }
.field__input { display: block; width: 100%; padding: var(--sp-3) var(--sp-4); background: var(--bg-deep); border: 1px solid var(--surface-line); border-radius: var(--r-md); color: var(--fg-primary); font-size: var(--fs-body-lg); font-family: var(--font-sans); transition: var(--transition); }
.field__input:focus { outline: none; border-color: var(--accent-gold); box-shadow: 0 0 0 3px var(--accent-gold-soft); }
.field__input::placeholder { color: var(--fg-muted); }
.field__input:disabled { opacity: 0.5; }
.field--select select.field__input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--accent-gold) 50%), linear-gradient(135deg, var(--accent-gold) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }

/* === Checkbox === */
.checkbox { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body); color: var(--fg-secondary); cursor: pointer; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--accent-gold); }

/* === Auth Card === */
.auth-shell { display: flex; justify-content: center; padding: var(--sp-4) 0; }
.auth-card { width: 100%; background: var(--bg-card); border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-5); box-shadow: var(--shadow-card); border: 1px solid var(--surface-line); }
.auth-card__hero { margin-bottom: var(--sp-5); text-align: center; }
.auth-card__headline { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-tight); }
.auth-card__lede { color: var(--fg-secondary); margin-top: var(--sp-2); font-size: var(--fs-body); }
.auth-card__forgot { display: block; text-align: right; font-size: var(--fs-caption); color: var(--fg-muted); margin-bottom: var(--sp-4); }
.auth-card__legal { font-size: var(--fs-caption); color: var(--fg-muted); text-align: center; margin-top: var(--sp-4); }
.auth-card__switch { text-align: center; margin-top: var(--sp-5); color: var(--fg-secondary); }
.auth-form { margin-top: var(--sp-4); }

/* === Toast === */
.toast { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-body); margin-bottom: var(--sp-4); }
.toast--success { background: rgba(95,196,153,0.12); color: var(--success); border: 1px solid rgba(95,196,153,0.3); }
.toast--error { background: rgba(224,112,96,0.12); color: var(--danger); border: 1px solid rgba(224,112,96,0.3); }
.toast--info { background: var(--accent-gold-soft); color: var(--accent-gold); border: 1px solid rgba(244,198,94,0.3); }

/* === Divider === */
.divider { display: flex; align-items: center; gap: var(--sp-3); color: var(--fg-muted); font-size: var(--fs-caption); margin: var(--sp-5) 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--surface-line); }
.oauth-row { display: flex; flex-direction: column; gap: var(--sp-3); }
.btn-row { display: flex; gap: var(--sp-3); }

/* === Form Stack === */
.form-stack { padding: var(--sp-2) 0 var(--sp-7); }
.form-stack__title { font-family: var(--font-display); font-size: var(--fs-h2); margin-bottom: var(--sp-5); font-weight: 600; }
.hint { font-size: var(--fs-caption); color: var(--fg-muted); margin-top: var(--sp-2); }

/* === Stepper === */
.hd-stepper { padding: var(--sp-2) 0 var(--sp-5); }
.stepper__progress { display: flex; align-items: center; justify-content: center; gap: 0; }
.stepper__dot { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-elevated); border: 2px solid var(--surface-line); transition: var(--transition); flex-shrink: 0; }
.stepper__dot.is-done { background: var(--accent-jade); border-color: var(--accent-jade); }
.stepper__dot.is-current { background: var(--accent-gold); border-color: var(--accent-gold); box-shadow: 0 0 0 4px var(--accent-gold-soft); }
.stepper__line { flex: 0 1 60px; height: 2px; background: var(--surface-line); margin: 0 var(--sp-2); }
.stepper__line.is-done { background: var(--accent-jade); }
.stepper__label { text-align: center; color: var(--fg-muted); font-size: var(--fs-caption); margin-top: var(--sp-2); }

/* === Confirm List === */
.confirm-list { margin: var(--sp-4) 0 var(--sp-5); }
.confirm-list div { display: flex; justify-content: space-between; padding: var(--sp-2) 0; border-bottom: 1px solid var(--surface-line); }
.confirm-list dt { color: var(--fg-muted); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.05em; }
.confirm-list dd { color: var(--fg-primary); font-weight: 500; }

/* === Progress === */
.progress { height: 6px; background: var(--bg-elevated); border-radius: var(--r-pill); overflow: hidden; margin: var(--sp-3) 0; }
.progress--lg { height: 10px; }
.progress__bar { height: 100%; background: linear-gradient(to right, var(--accent-jade), var(--accent-gold)); border-radius: var(--r-pill); transition: width 0.5s ease; }

/* === Order Row === */
.order-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--surface-line); }
.order-row:last-child { border-bottom: none; }
.order-row__main { display: flex; flex-direction: column; }
.order-row__id { font-weight: 600; }
.order-row__date { font-size: var(--fs-caption); color: var(--fg-muted); }
.order-row__meta { display: flex; align-items: center; gap: var(--sp-2); }
.order-row__total { font-weight: 600; }

/* === Bodygraph === */
.bodygraph-wrap { display: flex; justify-content: center; }
.bodygraph { background: radial-gradient(ellipse at center, rgba(244,198,94,0.04), transparent); }

/* === Lists === */
.list-rich { list-style: none; }
.list-rich li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--surface-line); font-size: var(--fs-body); }
.list-rich li:last-child { border-bottom: none; }
.list-rich .mono { font-family: 'SF Mono', Menlo, monospace; color: var(--accent-gold); margin-right: var(--sp-2); }
.list-rich .muted { color: var(--fg-muted); display: block; font-size: var(--fs-caption); }

/* === Gate Grid === */
.gate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: var(--sp-2); }
.gate-cell { text-align: center; padding: var(--sp-2); background: var(--bg-elevated); border-radius: var(--r-sm); font-weight: 600; color: var(--accent-gold); }

/* === Centers Grid === */
.centers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-3); }
.center-cell { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); padding: var(--sp-1) 0; }
.center-cell__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.center-cell__dot.is-defined { background: var(--accent-gold); }
.center-cell__dot.is-open { background: transparent; border: 1.5px dashed var(--fg-muted); }
.center-cell.is-defined { color: var(--fg-primary); }
.center-cell.is-open { color: var(--fg-muted); }

/* === Phase Tabs === */
.phase-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.phase-tab { font-size: var(--fs-caption); color: var(--fg-muted); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: var(--bg-card); }
.phase-tab.is-active { color: var(--accent-gold); background: var(--accent-gold-soft); }

/* === Lesson List === */
.lesson-list { list-style: none; }
.lesson-list__item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--bg-card); border-radius: var(--r-md); margin-bottom: var(--sp-2); border: 1px solid var(--surface-line); }
.lesson-list__item.is-done { opacity: 0.6; }
.lesson-list__item.is-active { border-color: var(--accent-gold); background: linear-gradient(135deg, var(--accent-gold-soft), transparent); }
.lesson-list__item.is-locked { opacity: 0.4; }
.lesson-list__day { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--fs-caption); flex-shrink: 0; }
.lesson-list__item.is-active .lesson-list__day { background: var(--accent-gold); color: var(--fg-on-gold); }
.lesson-list__item.is-done .lesson-list__day { background: var(--accent-jade); color: var(--bg-deep); }
.lesson-list__title { flex: 1; }
.lesson-list__icon { font-size: var(--fs-body); }

/* === Sticky CTA === */
.sticky-cta { position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-3)); display: flex; gap: var(--sp-3); z-index: 40; padding: var(--sp-3); background: linear-gradient(to top, var(--bg-deep) 80%, transparent); }