:root {
  --bg: #080b10;
  --soft: #101720;
  --card: #151d28;
  --surface-raised: #1a2431;
  --text: #f7f2e9;
  --muted: #bcc4ce;
  --gold: #dfb96f;
  --gold-soft: #f0d39a;
  --steel: #7894ad;
  --line: rgba(222, 231, 240, .14);
}

body {
  background:
    radial-gradient(circle at 75% 9%, rgba(78, 105, 133, .09), transparent 30%),
    var(--bg);
}

.site-header {
  background: rgba(8, 11, 16, .9);
  border-color: rgba(223, 185, 111, .16);
}

.aura-category,
.colour-card,
.lookbook-card,
.chapter-card,
.tip-card,
.qa-card,
.lesson-card,
.style-card,
.learn-card {
  border-color: var(--line);
  background: linear-gradient(145deg, rgba(26, 36, 49, .98), rgba(14, 20, 29, .98));
}

.tone-gold,
.tone-blue,
.tone-green,
.tone-red,
.tone-purple {
  color: var(--gold);
}

.aura-category:hover,
.aura-category:focus-visible {
  border-color: rgba(223, 185, 111, .72);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .3), 0 0 0 1px rgba(223, 185, 111, .08);
}

.aura-card-visual,
.visual-colours,
.visual-lookbook,
.visual-quick,
.visual-qa,
.visual-guide {
  border-color: rgba(223, 185, 111, .2);
  background-color: #111923;
}

.visual-quick {
  background: radial-gradient(circle at 20% 22%, rgba(120, 148, 173, .28), transparent 36%), #111923;
}

.visual-quick i,
.visual-qa i {
  border-color: rgba(223, 185, 111, .4);
  background: rgba(223, 185, 111, .12);
  color: var(--gold-soft);
}

.transformation-banner,
.style-plan-banner,
.student-start,
.premium-gate {
  border-color: rgba(223, 185, 111, .34);
  background: linear-gradient(125deg, #192331, #111923 58%, #202a35);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .28);
}

.premium-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid rgba(223, 185, 111, .42);
  border-radius: 16px;
  background: linear-gradient(120deg, #1a2431, #111923);
}

.premium-prompt div { display: grid; gap: 3px; }
.premium-prompt span { color: var(--gold); font-size: .68rem; font-weight: 900; letter-spacing: .12em; }
.premium-prompt strong { color: var(--text); font-size: 1rem; }
.premium-prompt small { color: var(--muted); }
.premium-prompt .button { flex: 0 0 auto; }

.transformation-banner p:not(.eyebrow),
.style-plan-banner p:not(.eyebrow),
.premium-gate p,
.premium-gate-note {
  color: var(--muted) !important;
}

.transformation-banner button,
.style-plan-banner button,
.premium-gate-button,
.button-gold {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold)) !important;
  color: #19140e !important;
}

.transformation-banner-progress i { background: var(--gold); }

.premium-preview-page,
.style-plan-shell,
.transformation-shell,
.guide-reader,
.guide-detail,
.guide-chapter-directory {
  border-color: rgba(223, 185, 111, .22);
  background: linear-gradient(145deg, #18222e, #111821);
  color: var(--text);
  box-shadow: 0 24px 58px rgba(0, 0, 0, .32);
}

.premium-preview-page h1,
.premium-preview-page h2,
.premium-preview-page h3,
.style-plan-shell h1,
.style-plan-shell h2,
.style-plan-shell h3,
.transformation-shell h1,
.transformation-shell h2,
.transformation-shell h3,
.guide-reader h1,
.guide-reader h2,
.guide-reader h3,
.guide-detail h1,
.guide-detail h2,
.guide-detail h3 {
  color: var(--text);
}

.premium-preview-lede,
.premium-preview-grid p,
.premium-sample-list p,
.premium-sample-list small,
.style-plan-header p:not(.eyebrow),
.style-plan-empty p,
.style-plan-grid ol,
.style-plan-grid ul,
.transformation-header p:not(.eyebrow),
.transformation-day p:not(.eyebrow),
.guide-reader p,
.guide-reader li,
.guide-detail p {
  color: var(--muted) !important;
}

.premium-preview-grid article,
.premium-sample-list article,
.premium-preview-action,
.style-plan-grid article,
.style-plan-choice-grid button,
.transformation-score,
.transformation-today,
.transformation-day,
.guide-article-steps,
.guide-personalise-grid article,
.guide-related-looks,
.guide-related-look-list button {
  border-color: var(--line);
  background: rgba(255, 255, 255, .035);
  color: var(--text);
}

.premium-preview-grid span,
.premium-sample-list span,
.style-plan-profile-tags span,
.profile-preview-tags span,
.transformation-themes span {
  border-color: rgba(223, 185, 111, .3);
  background: rgba(223, 185, 111, .1);
  color: var(--gold-soft);
}

.style-plan-colours span,
.colour-chips span {
  border-color: rgba(223, 185, 111, .34);
  background: rgba(223, 185, 111, .09);
  color: var(--gold-soft);
}

.style-plan-note,
.transformation-disclaimer,
.guide-reader-note,
.guide-article-callout,
.guide-article-takeaway,
.lookbook-article-note {
  border-color: var(--gold);
  background: rgba(223, 185, 111, .08);
  color: var(--muted);
}

.style-plan-note strong,
.transformation-disclaimer strong,
.guide-reader-note strong,
.guide-article-callout strong,
.guide-article-takeaway strong {
  color: var(--gold-soft);
}

.lookbook-article,
.skin-guide-card,
.undertone-helper,
.universal-combos {
  border-color: rgba(223, 185, 111, .25);
  background: linear-gradient(145deg, #19232f, #101720);
}

.search,
.gallery-admin-form input,
.gallery-admin-form select,
.gallery-admin-form textarea,
.lookbook-category-nav button,
.skin-tone-nav button {
  border-color: var(--line);
  background: #111923;
  color: var(--text);
}

.lookbook-category-nav button:hover,
.lookbook-category-nav button:focus-visible,
.lookbook-category-nav button.active,
.skin-tone-nav button:hover,
.skin-tone-nav button:focus-visible,
.skin-tone-nav button.active,
.filter.active {
  border-color: var(--gold);
  background: var(--gold);
  color: #18130d;
}

.review-form-shell {
  border: 1px solid var(--line);
  background: #151d28;
  color: var(--text);
}

.review-auth-message { color: var(--muted); }

.review-form label { color: var(--text); }

.review-form input,
.review-form select,
.review-form textarea {
  border-color: rgba(222, 231, 240, .22);
  background: #0f161f;
  color: var(--text);
}

.review-form input::placeholder,
.review-form textarea::placeholder { color: #929eaa; }

/* Keep the LookBook useful when a remote editorial image is slow or unavailable. */
.lookbook-card-open {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.lookbook-card-open > img,
.lookbook-card-open > .lookbook-image-placeholder {
  width: 100%;
  min-height: 190px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  color: transparent;
  background:
    linear-gradient(135deg, rgba(223, 185, 111, .28), transparent 42%),
    linear-gradient(315deg, rgba(83, 123, 155, .32), transparent 48%),
    #18232e;
}

.lookbook-card-open > div:last-child {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.lookbook-card h3,
.learn-card h3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lookbook-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.lookbook-read-link { margin-top: auto; }

:focus-visible {
  outline-color: var(--gold);
}

@media (max-width: 760px) {
  body { padding-bottom: 84px; }

  .site-header .nav {
    min-height: 60px;
    gap: 8px;
  }

  .site-header .brand {
    gap: 7px;
    font-size: .82rem;
    letter-spacing: .035em;
  }

  .site-header .brand-mark {
    width: 30px;
    height: 30px;
  }

  .account-actions {
    margin-left: auto;
    gap: 5px;
  }

  .account-actions .profile-button {
    min-height: 40px;
    padding: 7px 10px;
    white-space: nowrap;
    font-size: 0;
  }

  #account-button::after,
  #profile-button::after {
    font-size: .74rem;
    font-weight: 800;
  }

  #account-button::after { content: 'Account'; }
  #profile-button::after { content: 'Profile'; }

  .hero {
    min-height: 560px;
  }

  .hero-content {
    padding: 132px 0 58px;
  }

  .hero h1 {
    font-size: clamp(42px, 12vw, 54px);
    letter-spacing: -.06em;
  }

  .hero p:not(.eyebrow) {
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.55;
  }

  .hero-actions {
    gap: 9px;
    margin-top: 22px;
  }

  .hero-actions .button {
    flex: 1;
    padding: 12px 11px;
    font-size: .82rem;
  }

  .dashboard-intro {
    padding: 28px 0 18px;
  }

  .dashboard-intro h2 { font-size: 26px; }

  .view-root {
    padding-top: 28px;
    padding-bottom: 112px;
    scroll-margin-top: 68px;
  }

  .view-root > .text-link.back,
  .reader > .text-link.back {
    position: static;
    min-height: 44px;
    margin-bottom: 18px;
    padding: 9px 14px;
    font-size: .82rem;
  }

  .view-head h2,
  .auramax-intro h2,
  .auramax-page-head h2,
  .student-start-head h2 {
    font-size: clamp(30px, 9vw, 38px);
    line-height: 1.04;
  }

  #view-root[data-aura-view="hub"] .aura-category > span {
    display: inline-grid;
    background: var(--gold);
    color: #11151b;
  }

  .mobile-nav {
    right: 8px;
    bottom: 8px;
    left: 8px;
    padding: 4px;
    border-radius: 15px;
    border-color: rgba(223, 185, 111, .22);
    background: rgba(8, 11, 16, .96);
  }

  .mobile-nav button,
  .mobile-nav a {
    min-height: 42px;
    gap: 1px;
    font-size: .64rem;
  }

  .mobile-nav span { font-size: .92rem; }

  .premium-prompt {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
  }

  .premium-prompt .button { width: 100%; }
}

@media (max-width: 380px) {
  .container { width: min(100% - 28px, 1180px); }
  .site-header .brand { font-size: .75rem; }
  .account-actions .profile-button { padding-inline: 8px; }
  .hero h1 { font-size: 41px; }
}