:root {
  --bg: #090A0A;
  --surface: #111313;
  --surface-2: #191B1B;
  --surface-3: #191B1B;
  --line: rgba(232, 219, 207, .13);
  --text: #F3EEE8;
  --muted: #A7A29D;
  --coral: #E73519;
  --orange: #FF572C;
  --green: #39D4A0;
  --blue: #D9C6B2;
  --purple: #A76B35;
  --gold: #D9C6B2;
  --danger: #FF572C;
  --radius: 16px;
  --shadow: 0 24px 80px rgba(0, 0, 0, .62), 0 1px 0 rgba(232, 219, 207, .15) inset;
  --ashvard-bone: #D9C6B2;
  --ashvard-ember: #E73519;
  --ashvard-ember-bright: #FF572C;
  --ashvard-bronze: #A76B35;
  --ashvard-positive: #39D4A0;
  --ashvard-fire: linear-gradient(115deg, #F05124 0%, #BD3219 55%, #762111 100%);
  --font-display: Georgia, 'Times New Roman', serif;
  --font-ui: Bahnschrift, Arial, sans-serif;
}

html, body { background: var(--bg); }
body, button, input, select, textarea { font-family: var(--font-ui); }
.screen-title, .auth-card h1, .auth-card h2, .onboarding-card h2, .profile-hero h2,
.reference-header h1, .reference-progress-heading h2, .reward-dialog h2 {
  font-family: var(--font-display);
  letter-spacing: .01em;
}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-color: var(--ashvard-ember-bright);
}

.app:before {
  background:
    linear-gradient(180deg, rgba(9, 10, 10, .30), rgba(9, 10, 10, .78) 64%, #090A0A 100%),
    url('/assets/ashvard-mountain.png?v=1') center top / cover no-repeat;
  background-color: var(--bg);
}
.card, .reference-progress-card, .reference-metric-card, .reference-secondary-card,
.reference-completion-card, .metrics-category, .mini-stat, .quick-action, .regimen-row,
.food-result, .exercise-result, .legal-document {
  border-color: var(--line);
  background: linear-gradient(145deg, rgba(25, 27, 27, .96), rgba(17, 19, 19, .94));
  box-shadow: 0 1px 0 rgba(217, 198, 178, .04) inset;
}
.primary, .segmented button.active, .choice-pill:has(input:checked), .pd-tabs button.active {
  background: var(--ashvard-fire);
  color: #FFF8F0;
  box-shadow: 0 8px 24px rgba(231, 53, 25, .25), 0 1px 0 rgba(255, 255, 255, .2) inset;
}
.secondary, .cancel, .pd-goal-button, .choice-pill, .field input, .field textarea, .field select {
  border-color: rgba(217, 198, 178, .20);
  background-color: rgba(17, 19, 19, .92);
}
.ghost, .section-title button, .auth-link, .plus, .category-chevron,
.pd-goal-glyph, .pd-goal-button b, .mobile-nav button.active, .desktop-nav button.active {
  color: var(--ashvard-ember-bright);
}
.progress-track span, .calorie-goal-track span, .reference-completion-fill {
  background: var(--ashvard-fire);
}
.status-chip, .accent-green { color: var(--ashvard-positive); }
.tabs button.active:after { background: var(--ashvard-ember); }

.mobile-nav {
  background: rgba(17, 19, 19, .96);
  border-color: var(--line);
}
.mobile-nav button { color: #A7A29D; }
.desktop-sidebar {
  border-color: var(--line);
  background: rgba(9, 10, 10, .96);
}
.desktop-brand img { width: 46px; height: 46px; border-radius: 50%; clip-path: circle(50%); }
.desktop-brand b {
  color: var(--ashvard-bone);
  font-family: var(--font-display);
  letter-spacing: .15em;
}
.desktop-nav button.active {
  background: rgba(231, 53, 25, .12);
  box-shadow: inset 2px 0 var(--ashvard-ember);
}

.auth-panel {
  padding: calc(22px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));
  place-items: start center;
  background:
    linear-gradient(180deg, rgba(9, 10, 10, .02) 0%, rgba(9, 10, 10, .10) 30%, rgba(9, 10, 10, .46) 58%, rgba(9, 10, 10, .72) 100%),
    url('/assets/ashvard-mountain.png?v=1') 58% top / auto 100% no-repeat;
  background-color: var(--bg);
}
.auth-shell {
  width: min(430px, 100%);
  min-height: auto;
  justify-content: flex-start;
}
.auth-brand { margin: 70px 0 16px; text-align: center; }
.auth-phoenix {
  display: block;
  width: clamp(250px, 68vw, 310px);
  height: auto;
  aspect-ratio: auto;
  margin: 0 auto;
  border-radius: 50%;
  clip-path: circle(50%);
  object-fit: contain;
  mix-blend-mode: normal;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .76));
}
.auth-brand h1 { display: none; }
.auth-brand .tagline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: #F3EEE8;
  font: 500 10px/1.2 var(--font-ui);
  letter-spacing: .24em;
  white-space: nowrap;
}
.auth-brand .tagline b { color: var(--ashvard-ember-bright); font-size: 8px; }
.auth-brand-rule {
  width: 48px;
  height: 3px;
  margin: 18px auto 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #FF321C 24%, #FF6A2C 50%, #FF321C 76%, transparent);
  box-shadow: 0 0 13px rgba(255, 67, 35, .72);
}
.auth-motto {
  margin: 0;
  color: #F3EEE8;
  font: 400 18px/1.25 var(--font-display);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .86);
}
.auth-card {
  width: 100%;
  padding: 18px 18px 12px;
  border: 1px solid rgba(255, 87, 44, .68);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(25, 23, 21, .90), rgba(8, 9, 9, .95));
  box-shadow: 0 22px 65px rgba(0, 0, 0, .62), 0 0 18px rgba(231, 53, 25, .08), 0 1px 0 rgba(255, 192, 155, .18) inset;
  backdrop-filter: blur(14px);
}
.auth-card #auth-form { display: grid; gap: 0; }
.auth-card .field { margin-bottom: 10px; }
.auth-card .field label {
  display: block;
  margin: 0 0 6px;
  color: #F3EEE8;
  font: 400 16px/1.2 var(--font-display);
}
.auth-card .field input {
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(235, 229, 222, .46);
  border-radius: 11px;
  background: linear-gradient(100deg, rgba(19, 20, 20, .94), rgba(42, 42, 41, .92));
  color: #F3EEE8;
  font-size: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}
.auth-card .field input::placeholder { color: #8F8C88; opacity: 1; }
.auth-card #forgot-password {
  justify-self: end;
  min-height: 26px;
  margin: -5px 0 10px;
  padding: 0;
  color: var(--ashvard-ember-bright);
  font: 400 14px/1 var(--font-display);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.auth-card #auth-submit {
  height: 44px;
  min-height: 44px;
  margin-top: 2px;
  border: 1px solid #FFB06E;
  border-radius: 999px;
  background:
    linear-gradient(115deg, rgba(255, 45, 16, .96), rgba(191, 9, 4, .98) 56%, rgba(255, 61, 18, .96)),
    var(--ashvard-fire);
  box-shadow: 0 0 20px rgba(255, 45, 16, .74), 0 1px 0 rgba(255, 239, 218, .72) inset;
  color: #FFF;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.auth-card .auth-error { min-height: 0; margin: 0; }
.auth-card .auth-error:not(:empty) { margin: 0 0 10px; }
.auth-actions {
  position: relative;
  display: grid;
  gap: 0;
  margin-top: 15px;
  padding-top: 14px;
}
.auth-actions::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(217, 198, 178, .20);
}
.auth-actions #auth-toggle {
  min-height: 28px;
  color: #F3EEE8;
  font: 400 15px/1.3 var(--font-display);
}
.auth-actions #auth-toggle span {
  color: var(--ashvard-ember-bright);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.auth-legal { display: none; }
.auth-card.register-mode #auth-heading { margin-bottom: 6px; font-size: 25px; }
.auth-card.register-mode #auth-copy { margin-bottom: 18px; }
.onboarding-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(9, 10, 10, .90);
  box-shadow: var(--shadow);
}
.gender-tile { border-color: var(--line); }
.male-tile, .female-tile {
  background-image: linear-gradient(180deg, rgba(9, 10, 10, .08), rgba(9, 10, 10, .78)), url('/assets/ashvard-mountain.png?v=1');
  background-color: var(--surface-2);
}
.male-tile { background-position: 30% center; }
.female-tile { background-position: 72% center; }

.header-avatar, .avatar, .pd-avatar, .reference-avatar {
  border-color: rgba(217, 198, 178, .22);
  background: var(--surface);
}
.pd-avatar img, .reference-avatar img { object-fit: contain !important; padding: 4px; }
.pd-avatar img { object-fit: contain !important; padding: 0; border-radius: 50%; clip-path: circle(50%); }
.pd-brand-title { font-family: var(--ashvard-display); letter-spacing: .13em !important; color: var(--ashvard-bone); }
.brand-medallion { border-color: var(--ashvard-bronze); background: radial-gradient(circle, #2C1A10, #090A0A 72%); }
.brand-medallion img, .reward-dialog-art img { border-radius: 50%; clip-path: circle(50%); }
.modal { background: #111313; border-color: var(--line); }
.toast { background: #143328; border-color: #39D4A0; color: #C8F6E5; }

@media (max-width: 799px) {
  .page-main { padding-left: 16px; padding-right: 16px; }
  .screen-title { font-size: 29px; }
}
@media (max-width: 520px) {
  .auth-panel { padding: calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
  .auth-shell { min-height: auto; justify-content: flex-start; }
  .auth-brand { margin: 64px 0 16px; }
  .auth-phoenix { width: clamp(246px, 68vw, 286px); }
  .auth-brand .tagline { margin-top: 12px; gap: 6px; font-size: 9px; letter-spacing: .20em; }
  .auth-brand-rule { margin-top: 16px; margin-bottom: 14px; }
  .auth-motto { font-size: 17px; }
  .auth-card { padding: 18px 18px 12px; }
}