:root {
  --page-bg: #f5f7f8;
  --panel-bg: #ffffff;
  --panel-soft: #f7f8f9;
  --navy: #0d3444;
  --navy-2: #072029;
  --line: rgba(13, 52, 68, 0.08);
  --gold: #d4af37;
  --gold-soft: rgba(212, 175, 55, 0.12);
  --muted: rgba(13, 52, 68, 0.7);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

body.dashboard-page {
  margin: 0;
  min-height: 100vh;
  background: #f3efe7;
  color: #0d3444;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  line-height: 1.45;
}

body.dashboard-page * {
  box-sizing: border-box;
}

body.dashboard-page img,
body.dashboard-page picture {
  max-width: 100%;
  display: block;
}

body.dashboard-page a {
  color: inherit;
  text-decoration: none;
}

body.dashboard-page button,
body.dashboard-page input,
body.dashboard-page select,
body.dashboard-page textarea {
  font: inherit;
}

body.dashboard-page .wrap {
  width: min(100% - 2rem, 1180px);
  margin: 0 auto;
}

body.dashboard-page .site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Use theme variables so header responds to theme switch */
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 14px 30px rgba(2, 20, 26, 0.12);
  color: var(--text) !important;
}

body.dashboard-page .header-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 0.9rem;
  min-height: 68px;
  max-width: 1180px;
}

body.dashboard-page .brand {
  display: inline-flex;
  align-items: center;
}

body.dashboard-page .brand-mark {
  width: 52px;
  height: auto;
}

body.dashboard-page .site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
  flex-wrap: wrap;
}

body.dashboard-page .site-nav a {
  color: var(--text) !important;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Show theme toggle and keep nav controls available in dashboard */
body.dashboard-page .theme-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  /* Use the same sizing and rounded style as the main theme toggle */
  min-width: 3.5rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  transition: background 220ms cubic-bezier(0.4,0,0.2,1), color 220ms cubic-bezier(0.4,0,0.2,1);
}
body.dashboard-page .nav-auth { display: inline-flex !important; align-items: center; gap: 10px; margin-left: 8px; }
/* dashboard will use the shared .nav-toggle styles from the main stylesheet */

body.dashboard-page #main {
  padding-top: 0;
}

body.dashboard-page #main > .wrap {
  max-width: 1160px;
  padding-top: 26px;
  padding-bottom: 72px;
}

body.dashboard-page .dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 16px;
  margin-bottom: 18px;
  border-radius: 12px 12px 0 0;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
  color: var(--text) !important;
}

body.dashboard-page .dash-header-identity {
  display: flex;
  align-items: center;
  gap: 15px;
}

body.dashboard-page .dash-header .avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}

body.dashboard-page .dash-header h1 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text) !important;
  letter-spacing: -0.02em;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

body.dashboard-page .dash-header .dash-welcome {
  margin: 4px 0 0;
  color: rgba(255,255,255,0.9);
  font-size: 0.72rem;
}

body.dashboard-page #welcomeName {
  color: #d4af37;
}

body.dashboard-page .tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

body.dashboard-page .btn,
body.dashboard-page .btn-primary,
body.dashboard-page .btn-ghost,
body.dashboard-page .btn-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 8px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.dashboard-page .btn:hover,
body.dashboard-page .btn-primary:hover,
body.dashboard-page .btn-ghost:hover,
body.dashboard-page .btn-small:hover {
  transform: translateY(-1px);
}

body.dashboard-page .btn-outline-gold,
body.dashboard-page .btn-primary {
  background: linear-gradient(180deg, #e9d389 0%, #d4af37 100%);
  color: #10252d;
  border-color: rgba(10,28,36,0.02);
}

body.dashboard-page .btn-ghost {
  background: transparent;
  border-color: rgba(13,52,68,0.12);
  color: #0d3444;
}

body.dashboard-page .dash-grid {
  display: flex;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 18px;
  align-items: start;
}

/* Left nav is intentionally removed — keep markup but hide it visually */
.left-nav {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

body.dashboard-page .left-nav-inner {
  /* remain in DOM for accessibility/backwards compatibility but visually hidden */
  display: none !important;
}

body.dashboard-page .left-brand {
  display: flex;
  justify-content: center;
  padding: 4px 0 8px;
}

body.dashboard-page .left-brand-mark {
  width: 48px;
  height: auto;
}

body.dashboard-page .left-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.dashboard-page .left-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
  font-size: 0.72rem;
  font-weight: 600;
}

body.dashboard-page .left-menu-item.active {
  background: rgba(212,175,55,0.12);
  border-color: rgba(212,175,55,0.24);
  color: #fff;
}

body.dashboard-page .left-menu-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

body.dashboard-page .left-menu-item svg path,
body.dashboard-page .left-menu-item svg circle,
body.dashboard-page .left-menu-item svg rect,
body.dashboard-page .left-menu-item svg line,
body.dashboard-page .left-menu-item svg polyline,
body.dashboard-page .left-menu-item svg polygon {
  stroke: currentColor;
  fill: currentColor;
}

body.dashboard-page .left-upgrade {
  margin-top: 8px;
  padding: 12px 10px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(241,244,244,0.95));
  border: 1px solid rgba(13,52,68,0.04);
}

body.dashboard-page .upgrade-flag {
  margin-bottom: 8px;
  color: #0d3444;
  font-size: 0.7rem;
  font-weight: 800;
}

body.dashboard-page .left-upgrade .btn {
  width: 100%;
  background: linear-gradient(180deg, #e3c86d 0%, #d7b14f 100%);
  color: #10252d;
  border: none;
}

body.dashboard-page .dash-card {
  background: #f7f8f7;
  border: 1px solid rgba(17, 46, 58, 0.08);
  border-radius: 12px;
  padding: 18px 18px;
  box-shadow: 0 4px 18px rgba(13,52,68,0.025);
}

body.dashboard-page .sidebar-shell {
  width: min(100%, 290px);
  justify-self: end;
  display: grid;
  gap: 10px;
}

body.dashboard-page .sidebar-shell .dash-card {
  padding: 12px 13px;
}

/* Improve readability on small screens: larger tap targets, comfortable padding and legible font sizes */
@media (max-width: 820px) {
  body.dashboard-page .dash-card {
    padding: 16px;
    border-radius: 12px;

/* Additional override to ensure main column expands on slightly larger narrow viewports */
@media (max-width: 1000px) {
  body.dashboard-page .dash-grid { grid-template-columns: 1fr !important; }
  body.dashboard-page .sidebar-shell { display: none !important; }
}
    font-size: 0.98rem;
  }

  body.dashboard-page .dash-card h2 {
    font-size: 1.05rem;
  }

  body.dashboard-page .field label {
    font-size: 0.95rem;
  }

  body.dashboard-page .field input,
  body.dashboard-page .field select,
  body.dashboard-page .field textarea {
    padding: 12px;
    font-size: 1rem;
  }
}

body.dashboard-page .dash-card h2 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #0d3444;
  font-weight: 700;
}

body.dashboard-page .dash-card {
  padding: 20px 18px;
}

body.dashboard-page .field-hint,
body.dashboard-page p,
body.dashboard-page small,
body.dashboard-page .payment-history-empty,
body.dashboard-page .modal-sub,
body.dashboard-page .alert,
body.dashboard-page .consent-en,
body.dashboard-page .consent-ur {
  font-size: 0.7rem;
}

body.dashboard-page .dash-card-row {
  font-size: 0.72rem;
}

body.dashboard-page .phone-reminder {
  font-size: 0.72rem;
  line-height: 1.5;
  margin-bottom: 12px;
}

body.dashboard-page #profileCompletionCard {
  margin-bottom: 18px;
  background: #f4f8f7;
  border-radius: 12px;
  padding: 16px 18px 14px;
}

body.dashboard-page .completion-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

body.dashboard-page .completion-percent {
  min-width: 62px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.18);
  color: #0d3444;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 800;
}

body.dashboard-page .completion-bar {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: rgba(13,52,68,0.08);
  overflow: hidden;
}

body.dashboard-page .completion-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d4af37 0%, #ead986 100%);
}

body.dashboard-page .form-actions {
  margin-top: 10px;
  text-align: right;
}

body.dashboard-page .profile-summary-card {
  padding: 20px 18px 18px;
  background: #f8f9f7;
}

body.dashboard-page .profile-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 12px;
}

body.dashboard-page .summary-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

body.dashboard-page .summary-item,
body.dashboard-page .summary-pill,
body.dashboard-page .summary-quick-card {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(13,52,68,0.06);
  border-radius: 10px;
  padding: 9px 10px;
}

body.dashboard-page .summary-item strong,
body.dashboard-page .summary-pill strong {
  display: block;
  margin-bottom: 5px;
  color: rgba(13,52,68,0.8);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.dashboard-page .summary-item div,
body.dashboard-page .summary-pill div {
  color: #0d3444;
  font-size: 0.74rem;
  font-weight: 600;
}

body.dashboard-page .summary-quick-card {
  padding: 12px;
}

body.dashboard-page .summary-quick-card small {
  display: block;
  margin-bottom: 4px;
  color: rgba(13,52,68,0.72);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.dashboard-page .photo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

body.dashboard-page .photo-slot {
  padding: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(13,52,68,0.05);
}

body.dashboard-page .photo-slot img {
  width: 100%;
  height: 108px;
  object-fit: cover;
  border-radius: 8px;
}

body.dashboard-page .photo-slot-empty {
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed rgba(13,52,68,0.12);
  border-radius: 8px;
  color: rgba(13,52,68,0.32);
  background: rgba(255,255,255,0.7);
  font-size: 1.8rem;
}

/* Force the main profile column to be readable and spacious */
.dash-grid > div {
  grid-column: 1 / 2;
  width: 100%;
}

.dash-grid > div .dash-card {
  max-width: none;
  width: 100%;
  margin: 0 0 20px;
}

.sidebar-shell {
  width: 300px;
}

/* Keep sidebar sticky on large screens but stacked on small */
@media (min-width: 921px) {
  .sidebar-shell {
    position: sticky;
    top: 18px;
    align-self: start;
  }
}

@media (max-width: 920px) {
  body.dashboard-page .dash-grid {
    grid-template-columns: 1fr;
  }
  .sidebar-shell {
    width: 100%;
    justify-self: stretch;
  }
  .dash-grid > div .dash-card { max-width: 100%; margin: 0 0 18px; }
}

body.dashboard-page .photo-slot .photo-slot-body {
  padding-top: 9px;
}

body.dashboard-page .photo-slot .photo-slot-body select {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid rgba(13,52,68,0.08);
  border-radius: 8px;
  background: #fff;
  color: #0d3444;
  font-size: 0.68rem;
}

body.dashboard-page .photo-slot-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

body.dashboard-page .photo-slot-actions button {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid rgba(13,52,68,0.08);
  border-radius: 999px;
  background: #fff;
  color: #0d3444;
  font-size: 0.6rem;
  font-weight: 700;
}

body.dashboard-page .photo-slot-actions button.is-active {
  background: #0d3444;
  color: #fff;
  border-color: #0d3444;
}

body.dashboard-page .sidebar-shell {
  display: grid;
  gap: 10px;
}

body.dashboard-page .sidebar-shell .dash-card {
  background: #f8f9f7;
  padding: 13px 14px;
}

body.dashboard-page .dash-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(13,52,68,0.06);
  font-size: 0.72rem;
}

body.dashboard-page .dash-card-row:last-child {
  border-bottom: none;
}

body.dashboard-page .verify-pill,
body.dashboard-page .verify-pill-status .status-tag {
  border-radius: 999px;
  font-weight: 700;
}

body.dashboard-page .verify-pill {
  background: rgba(22,154,86,0.1);
  border: 1px solid rgba(22,154,86,0.12);
  color: #1a7d4f;
  padding: 5px 10px;
  font-size: 0.64rem;
}

body.dashboard-page .verify-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.dashboard-page .verify-pill-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid rgba(13,52,68,0.06);
  background: rgba(255,255,255,0.6);
  font-size: 0.72rem;
}

body.dashboard-page .field {
  margin-bottom: 12px;
}

body.dashboard-page .field label {
  display: block;
  margin-bottom: 7px;
  color: #0d3444;
  font-size: 0.68rem;
  font-weight: 700;
}

body.dashboard-page .field input,
body.dashboard-page .field select,
body.dashboard-page .field textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(13,52,68,0.08);
  border-radius: 8px;
  background: #fff;
  color: #0d3444;
  font-size: 0.74rem;
  box-sizing: border-box;
}

body.dashboard-page .field textarea {
  min-height: 76px;
}

body.dashboard-page .phone-reminder {
  display: block;
  margin-bottom: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(212,175,55,0.18);
  border-radius: 10px;
  background: rgba(212,175,55,0.08);
  color: #0d3444;
  font-size: 0.7rem;
}

body.dashboard-page .site-footer {
  background: linear-gradient(180deg, #062f3c 0%, #0a3a49 100%);
  color: #edf6f5;
  border-top: 1px solid rgba(255,255,255,0.08);
}

body.dashboard-page .site-footer .wrap {
  max-width: 1180px;
  padding: 0 18px;
}

body.dashboard-page .footer-copy,
body.dashboard-page .site-footer p,
body.dashboard-page .site-footer a {
  color: #edf6f5;
}

body:not(.dashboard-page) .site-header {
  background: rgba(241, 239, 231, 0.92);
  border-bottom: 1px solid rgba(13, 52, 68, 0.08);
  box-shadow: none;
}

body:not(.dashboard-page) .header-row {
  max-width: 1440px;
  min-height: 86px;
  padding: 0 clamp(18px, 2.6vw, 42px);
  gap: 18px;
}

body:not(.dashboard-page) .brand {
  margin-right: auto;
  padding-left: 0;
}

body:not(.dashboard-page) .brand-mark {
  width: 168px;
  height: auto;
}

body:not(.dashboard-page) .site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  margin-right: 18px;
  gap: 2.1rem;
  flex-wrap: nowrap;
}

body:not(.dashboard-page) .site-nav a {
  color: #0d3444;
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.9;
}

body:not(.dashboard-page) .nav-auth {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin-left: 8px;
}

body:not(.dashboard-page) .nav-auth a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border-radius: 10px;
  font-size: 0.94rem;
  font-weight: 700;
  padding: 0 0.9rem;
  text-decoration: none;
  color: #0d3444;
  border: 1px solid transparent;
  background: transparent;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

body:not(.dashboard-page) .nav-auth a:hover {
  background: rgba(255, 255, 255, 0.54);
  border-color: rgba(13, 52, 68, 0.08);
  transform: translateY(-1px);
}

body:not(.dashboard-page) .nav-auth a:first-child {
  background: transparent;
  border-color: transparent;
}

body:not(.dashboard-page) .nav-auth a:last-child {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(13, 52, 68, 0.08);
}

body:not(.dashboard-page) .nav-auth .theme-toggle {
  display: inline-flex !important;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(13, 52, 68, 0.08);
  background: rgba(255,255,255,0.72);
  color: #0d3444;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

body:not(.dashboard-page) .site-header .theme-toggle {
  display: inline-flex !important;
}

/* For non-dashboard pages: collapse header into hamburger at <=1024px */
@media (max-width: 1024px) {
  body:not(.dashboard-page) .site-nav { display: none !important; }
  body:not(.dashboard-page) .nav-auth { display: none !important; }
  body:not(.dashboard-page) .nav-toggle { display: inline-flex !important; visibility: visible !important; z-index: 1300 !important; }
  body:not(.dashboard-page) .nav-toggle span { background: var(--text) !important; opacity: 1 !important; }
  body:not(.dashboard-page) .mobile-nav { position: absolute !important; left: 0 !important; right: 0 !important; top: 100% !important; z-index: 1290 !important; display: none !important; pointer-events: none !important; }
  body:not(.dashboard-page) .mobile-nav.open { display: flex !important; pointer-events: auto !important; }
}

@media (min-width: 1025px) {
  body:not(.dashboard-page) .site-header .nav-toggle {
    display: none !important;
  }
  body:not(.dashboard-page) .site-header .nav-auth {
    margin-left: auto;
  }
}

body:not(.dashboard-page) #main {
  background: #f1efe7;
}

body:not(.dashboard-page) .auth-shell {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 0 0 52px;
}

body:not(.dashboard-page) .auth-card {
  width: min(1260px, calc(100% - 44px));
  margin: 56px auto 0;
  border-radius: 36px;
  padding: 52px 52px 48px;
  border: 1px solid rgba(13, 52, 68, 0.08);
  background: rgba(255,255,255,0.93);
  box-shadow: none;
}

body:not(.dashboard-page) .auth-shell::before {
  content: "";
  display: block;
  width: 100vw;
  height: 220px;
  margin-left: calc(50% - 50vw);
  background: linear-gradient(180deg, #0d3d4d 0%, #0a343f 100%);
  margin-bottom: -90px;
}

body:not(.dashboard-page) .auth-card h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(3.1rem, 5vw, 5rem);
  line-height: 0.97;
  letter-spacing: -0.06em;
  font-weight: 800;
  color: #0d3444;
}

body:not(.dashboard-page) .auth-sub {
  margin: 0 0 2.4rem;
  font-size: 1.05rem;
  color: rgba(13, 52, 68, 0.8);
  line-height: 1.55;
}

body:not(.dashboard-page) .btn-google {
  width: 100%;
  min-height: 76px;
  border-radius: 16px;
  background: linear-gradient(180deg, #e6cc79 0%, #d7af3e 100%);
  color: #112b38;
  border: none;
  font-size: 1.08rem;
  font-weight: 700;
  box-shadow: none;
  margin-bottom: 22px;
}

body:not(.dashboard-page) .btn-google svg {
  width: 22px;
  height: 22px;
}

body:not(.dashboard-page) .auth-divider {
  margin: 2rem 0 1.8rem;
  color: rgba(13, 52, 68, 0.65);
  font-size: 1.05rem;
  font-weight: 600;
}

body:not(.dashboard-page) .auth-divider::before,
body:not(.dashboard-page) .auth-divider::after {
  background: rgba(13, 52, 68, 0.18);
  height: 1px;
}

body:not(.dashboard-page) .field {
  margin-bottom: 22px;
}

body:not(.dashboard-page) .field label {
  display: block;
  margin-bottom: 10px;
  color: #0d3444;
  font-size: 1.05rem;
  font-weight: 700;
}

body:not(.dashboard-page) .field input {
  height: 56px;
  font-size: 1.02rem;
  border-radius: 14px;
  border: 1px solid rgba(13, 52, 68, 0.08);
  background: rgba(255,255,255,0.94);
  padding: 0 18px;
  box-shadow: inset 0 1px 2px rgba(13,52,68,0.04);
}

body:not(.dashboard-page) .field input:focus {
  outline: none;
  border-color: rgba(212,175,55,0.42);
  box-shadow: 0 0 0 4px rgba(212,175,55,0.12);
}

body:not(.dashboard-page) .btn-block {
  width: 100%;
  min-height: 58px;
  border-radius: 14px;
  background: linear-gradient(180deg, #e5cc7e 0%, #d6af3d 100%);
  color: #112b38;
  border: none;
  font-size: 1.02rem;
  font-weight: 700;
}

body:not(.dashboard-page) .auth-switch {
  margin-top: 16px;
  font-size: 0.95rem;
  color: rgba(13,52,68,0.72);
}

body:not(.dashboard-page) .auth-switch a {
  color: #0d3444;
  font-weight: 700;
}

body:not(.dashboard-page) .site-footer {
  background: #0a3342;
  color: #edf6f5;
  border-top: none;
}

body:not(.dashboard-page) .site-footer .wrap {
  max-width: 1440px;
  padding: 0 36px;
}

body:not(.dashboard-page) .footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 98px;
}

body:not(.dashboard-page) .footer-copy {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
}

body:not(.dashboard-page) .footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

body:not(.dashboard-page) .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: #edf6f5;
}

body:not(.dashboard-page) .footer-social svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1024px) {
  /* On narrower screens make main content stack first then sidebar below */
  body.dashboard-page .dash-grid {
    grid-template-columns: 1fr 320px;
    gap: 14px;
  }

  body.dashboard-page .sidebar-shell {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  body.dashboard-page .site-nav {
    display: none;
  }

  /* Mobile: single column, sidebar stacks beneath main cards */
  body.dashboard-page .dash-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body.dashboard-page .left-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  body.dashboard-page .profile-summary-grid,
  body.dashboard-page .summary-row,
    padding: 20px 18px 18px;
    position: relative;
    grid-template-columns: 1fr;
  }

  body.dashboard-page .dash-header {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

/* Hide the right-side logout button (sidebar) — use single Sign out in header/nav only */
#logoutBtn { display: none !important; }

/* Ensure info toggle visible even on very small screens and allow header to show it */
@media (max-width: 600px) {
  .info-toggle { display: inline-flex !important; }
  .profile-summary-card { overflow: visible !important; }
}

body.dashboard-page .photo-slot-empty {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed rgba(13,52,68,0.12);
  border-radius: 8px;
  color: rgba(13,52,68,0.36);
  background: linear-gradient(180deg, rgba(248,249,249,0.9), rgba(255,255,255,1));
  font-size: 2rem;
}

/* Additional responsive fixes to ensure the main dashboard cards are prominent
   and readable on narrow screens. Keep sidebar-shell available but stacked. */
@media (max-width: 920px) {
  body.dashboard-page .wrap {
    width: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }

  body.dashboard-page .dash-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body.dashboard-page .sidebar-shell {
    grid-column: 1 / -1;
    order: 2;
  }

  body.dashboard-page .dash-card {
    padding: 16px;
    border-radius: 12px;
    font-size: 0.98rem;
  }

  /* Ensure profile summary and photo grid become single-column and readable */
  body.dashboard-page .profile-summary-grid,
  body.dashboard-page .summary-row,
  body.dashboard-page .photo-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Make buttons and inputs comfortably large on small screens */
  body.dashboard-page .btn,
  body.dashboard-page .btn-primary,
  body.dashboard-page .btn-ghost,
  body.dashboard-page .btn-outline-gold {
    padding: 12px 16px;
    font-size: 1rem;
  }
}

@media (max-width: 420px) {
  body.dashboard-page .wrap {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.dashboard-page .dash-header h1 {
    font-size: 1.02rem;
  }

  body.dashboard-page .dash-card h2 {
    font-size: 0.98rem;
  }

  /* Prevent narrow column collapse: ensure cards use full available width */
  body.dashboard-page .dash-card,
  body.dashboard-page .auth-card {
    width: 100% !important;
    box-shadow: 0 8px 22px rgba(13,52,68,0.06);
  }
}

body.dashboard-page .photo-slot .photo-slot-body {
  padding-top: 9px;
}

body.dashboard-page .photo-slot .photo-slot-body select {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid rgba(13,52,68,0.08);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-size: 0.69rem;
}

body.dashboard-page .photo-slot-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

body.dashboard-page .photo-slot-actions button {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid rgba(13,52,68,0.08);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 0.6rem;
  font-weight: 700;
}

body.dashboard-page .photo-slot-actions button.is-active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

body.dashboard-page .sidebar-shell {
  display: grid;
  gap: 14px;
}

body.dashboard-page .sidebar-shell .dash-card {
  padding: 16px 18px;
}

body.dashboard-page .dash-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(13,52,68,0.06);
  font-size: 0.76rem;
}

body.dashboard-page .dash-card-row:last-child {
  border-bottom: none;
}

body.dashboard-page .verify-pill,
body.dashboard-page .verify-pill-status .status-tag {
  border-radius: 999px;
  font-weight: 700;
}

body.dashboard-page .verify-pill {
  background: rgba(22,154,86,0.1);
  border: 1px solid rgba(22,154,86,0.1);
  color: #1a7d4f;
  padding: 5px 10px;
  font-size: 0.65rem;
}

body.dashboard-page .verify-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.dashboard-page .verify-pill-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid rgba(13,52,68,0.06);
  background: rgba(246,248,249,1);
  font-size: 0.72rem;
}

body.dashboard-page .field {
  margin-bottom: 12px;
}

body.dashboard-page .field label {
  display: block;
  margin-bottom: 7px;
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 700;
}

body.dashboard-page .field input,
body.dashboard-page .field select,
body.dashboard-page .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(13,52,68,0.08);
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font-size: 0.76rem;
  box-sizing: border-box;
}

body.dashboard-page .field textarea {
  min-height: 90px;
}

body.dashboard-page .phone-reminder {
  display: block;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(212,175,55,0.18);
  border-radius: 10px;
  background: rgba(212,175,55,0.08);
  color: var(--navy);
  font-size: 0.7rem;
}

body.dashboard-page .site-footer {
  background: #032d38;
  color: #eaf5f4;
  border-top: 1px solid rgba(255,255,255,0.08);
}

body.dashboard-page .site-footer .wrap {
  max-width: 1180px;
  margin: 0 auto;
}

body.dashboard-page .footer-copy,
body.dashboard-page .site-footer p,
body.dashboard-page .site-footer a {
  color: #eaf5f4;
}

@media (max-width: 1024px) {
  body.dashboard-page .dash-grid {
    grid-template-columns: 190px minmax(0,1fr);
  }

  body.dashboard-page .sidebar-shell {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  body.dashboard-page .site-nav {
    display: none;
  }

  body.dashboard-page .dash-grid {
    grid-template-columns: 1fr;
  }

  body.dashboard-page .left-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  body.dashboard-page .profile-summary-grid,
  body.dashboard-page .summary-row,
  body.dashboard-page .photo-grid {
    grid-template-columns: 1fr;
  }

  body.dashboard-page .dash-header {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

body.dashboard-page {
  background: #f4f1ea !important;
}

body.dashboard-page .wrap {
  max-width: 1180px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

body.dashboard-page .site-header {
  /* Use theme variables so header responds to theme switch */
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}

body.dashboard-page .header-row {
  max-width: 1180px !important;
  min-height: 66px !important;
  padding: 0.8rem 0.9rem !important;
}

body.dashboard-page .site-nav {
  gap: 1.4rem !important;
}

body.dashboard-page .site-nav a {
  color: rgba(255,255,255,0.9) !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

body.dashboard-page #main > .wrap {
  max-width: 1160px !important;
  padding-top: 26px !important;
  padding-bottom: 72px !important;
}

body.dashboard-page .dash-header {
  padding: 16px 20px 14px !important;
  min-height: 88px !important;
  border-radius: 12px 12px 0 0 !important;
  margin-bottom: 18px !important;
}

body.dashboard-page .dash-header-identity {
  gap: 14px !important;
}

body.dashboard-page .dash-header .avatar {
  width: 58px !important;
  height: 58px !important;
  border-width: 2px !important;
}

body.dashboard-page .dash-header h1 {
  font-size: 1.15rem !important;
  line-height: 1.2 !important;
}

body.dashboard-page .dash-header .dash-welcome {
  font-size: 0.72rem !important;
}

body.dashboard-page .btn-outline-gold {
  border-radius: 9px !important;
  padding: 8px 14px !important;
}

body.dashboard-page .dash-grid {
  grid-template-columns: 200px minmax(0, 1fr) 300px !important;
  gap: 18px !important;
}

body.dashboard-page .left-nav-inner {
  padding: 8px 6px 0 !important;
  gap: 10px !important;
}

body.dashboard-page .left-menu {
  gap: 6px !important;
}

body.dashboard-page .left-menu-item {
  padding: 9px 10px !important;
  border-radius: 10px !important;
  font-size: 0.72rem !important;
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(13,52,68,0.02) !important;
}

body.dashboard-page .left-menu-item.active {
  background: rgba(212,175,55,0.12) !important;
}

body.dashboard-page .left-upgrade {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,246,247,0.96)) !important;
  border: 1px solid rgba(13,52,68,0.04) !important;
  border-radius: 10px !important;
  padding: 12px 10px !important;
}

body.dashboard-page .left-upgrade .btn {
  border-radius: 8px !important;
  font-size: 0.7rem !important;
}

body.dashboard-page .dash-card {
  border: 1px solid rgba(17, 46, 58, 0.07) !important;
  border-radius: 12px !important;
  box-shadow: 0 5px 16px rgba(13,52,68,0.03) !important;
}

body.dashboard-page #profileCompletionCard {
  margin-bottom: 18px !important;
  border-radius: 12px !important;
  padding: 18px 18px 14px !important;
}

body.dashboard-page #profileCompletionCard h2 {
  margin-bottom: 6px !important;
}

body.dashboard-page .completion-summary {
  gap: 14px !important;
  align-items: center !important;
}

/* Info toggle + overlay (mobile) */
.info-toggle {
  display: none;
  z-index: 60;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 6px 20px rgba(2,12,16,0.45);
  margin-left: 4px;
}

@media (max-width: 900px) {
  .info-toggle { display: inline-flex; }
  /* Hide original sidebar and let main column fill the width */
  .sidebar-shell { display: none !important; }
  .dash-grid { grid-template-columns: 1fr !important; }
  .profile-summary-card { padding-right: 18px !important; }
}

/* Convert site-nav into hamburger menu at 1024px and below for dashboard pages */
@media (max-width: 1024px) {
  body.dashboard-page .site-nav { display: none !important; }
  body.dashboard-page .nav-auth { display: none !important; }
  body.dashboard-page .nav-toggle { display: inline-flex !important; z-index: 110 !important; }
  /* show header logout in mobile menu only */
  .header-logout { display: none !important; }
  .mobile-nav-logout { display: block; padding: 12px 18px; }
}

/* Ensure header nav remains visible on screens wider than 1024px */
@media (min-width: 1025px) {
  body.dashboard-page .site-nav { display: flex !important; }
  body.dashboard-page .nav-toggle { display: none !important; }
  body.dashboard-page .nav-auth { display: inline-flex !important; }
}

.info-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

/* Never allow overlay to display on larger screens */
@media (min-width: 901px) {
  .info-overlay { display: none !important; }
}

/* Ensure the Info button is completely hidden on larger screens */
@media (min-width: 901px) {
  .info-toggle { display: none !important; }
}

.info-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 20, 24, 0.6);
  backdrop-filter: blur(6px) saturate(120%);
}

.info-modal {
  position: relative;
  width: min(680px, calc(100% - 40px));
  max-height: calc(100% - 80px);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 20px 50px rgba(2, 12, 16, 0.6);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px) saturate(120%);
  color: #fff;
  overflow: hidden;
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  transition: transform 260ms cubic-bezier(.2,.9,.3,1), opacity 200ms ease;
}

.info-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  height: 36px;
  width: 36px;
  border-radius: 10px;
  font-size: 1.2rem;
}

.info-modal-body {
  overflow: auto;
  max-height: calc(100vh - 140px);
  padding-top: 8px;
  color: #0d3444;
}

/* When overlay is hidden, ensure it doesn't capture events */
.info-overlay[hidden] { display: none; }

/* Visible state triggers the fade + scale animation */
.info-overlay.info-visible {
  opacity: 1;
  pointer-events: auto;
}
.info-overlay.info-visible .info-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Styles for the cloned sidebar inside the overlay */
.info-clone {
  display: block !important;
  width: 100%;
  color: inherit;
}
.info-clone .dash-card {
  background: rgba(255,255,255,0.92);
  color: #0d3444;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 10px;
}
.info-clone .dash-card h2 { color: var(--navy); }
.info-clone .verify-grid { gap: 8px; }

/* Make the cloned sidebar fill modal vertically and allow internal scrolling */
.info-modal { display: flex; flex-direction: column; }
.info-modal-body { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.info-clone { display: flex !important; flex-direction: column; gap: 12px; width: 100%; }
.info-clone .dash-card { flex: 0 0 auto; }

/* Info button inner icon and label */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(180deg, #d4af37 0%, #e9d389 100%);
  color: #082a2f;
  font-weight: 900;
  box-shadow: 0 6px 18px rgba(13,52,68,0.12);
}
.info-label { display:none; }

/* Custom scrollbar for the modal body */
.info-modal-body::-webkit-scrollbar { width: 10px; }
.info-modal-body::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 999px; }
.info-modal-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#d4af37,#b7922f); border-radius: 999px; }
/* Firefox */
.info-modal-body { scrollbar-width: thin; scrollbar-color: #b7922f rgba(255,255,255,0.04); }

/* Hover effect */
.info-toggle:hover { transform: translateY(-2px); }

body.dashboard-page .completion-percent {
  min-width: 62px !important;
  padding: 8px 10px !important;
}

body.dashboard-page .completion-bar {
  height: 10px !important;
}

body.dashboard-page .profile-summary-card {
  padding: 16px 18px 18px !important;
}

body.dashboard-page .summary-row {
  gap: 10px !important;
}

body.dashboard-page .summary-item,
body.dashboard-page .summary-pill,
body.dashboard-page .summary-quick-card {
  border-radius: 10px !important;
  padding: 9px 10px !important;
}

body.dashboard-page .summary-grid {
  gap: 10px !important;
}

body.dashboard-page .photo-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body.dashboard-page .photo-slot {
  padding: 7px !important;
  border-radius: 10px !important;
}

body.dashboard-page .photo-slot img {
  height: 110px !important;
  border-radius: 8px !important;
}

body.dashboard-page .photo-slot-empty {
  min-height: 110px !important;
  font-size: 1.8rem !important;
}

body.dashboard-page .sidebar-shell {
  gap: 12px !important;
}

body.dashboard-page .sidebar-shell .dash-card {
  padding: 14px 16px !important;
}

body.dashboard-page .dash-card-row {
  padding: 8px 0 !important;
  font-size: 0.75rem !important;
}

body.dashboard-page .verify-grid {
  gap: 8px !important;
}

body.dashboard-page .verify-pill-status {
  padding: 7px 8px !important;
}

body.dashboard-page .phone-reminder {
  padding: 9px 10px !important;
  font-size: 0.7rem !important;
}

body.dashboard-page .field label {
  font-size: 0.68rem !important;
}

body.dashboard-page .field input,
body.dashboard-page .field select,
body.dashboard-page .field textarea {
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 0.74rem !important;
}

body.dashboard-page .field textarea {
  min-height: 76px !important;
}

body.dashboard-page .btn-primary,
body.dashboard-page .btn-ghost,
body.dashboard-page .btn {
  border-radius: 9px !important;
}

body.dashboard-page .btn-small {
  padding: 8px 12px !important;
}

body.dashboard-page .summary-item div,
body.dashboard-page .summary-pill div,
body.dashboard-page .summary-quick-card div {
  font-size: 0.74rem !important;
}

body.dashboard-page .payment-history-list,
body.dashboard-page .payment-history-item,
body.dashboard-page .payment-history-meta {
  font-size: 0.72rem !important;
}

body.dashboard-page .modal-card {
  max-width: 560px !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
}

body.dashboard-page .modal-card h2 {
  font-size: 1.2rem !important;
}

body.dashboard-page .consent-box {
  border-radius: 10px !important;
  padding: 14px 12px !important;
  margin: 12px 0 !important;
}

body.dashboard-page .site-footer {
  padding-top: 14px !important;
  padding-bottom: 18px !important;
}

body.dashboard-page .site-footer .wrap {
  max-width: 1180px !important;
  padding: 0 18px !important;
}

body.dashboard-page .footer-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

body.dashboard-page .footer-logo {
  width: 150px !important;
}
  font-size: clamp(2.7rem, 5vw, 4.8rem);
  line-height: 0.96;
  max-width: 12ch;
  margin: 0 0 1.4rem;
  color: #ffffff;
  text-shadow: 0 8px 24px rgba(0,0,0,0.22);
}

.hero-sub {
  font-size: 1.08rem;
  max-width: 42rem;
  color: rgba(255,255,255,0.82);
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 2rem;
}

.hero-actions .btn {
  min-height: 52px;
  padding: 0.95rem 1.5rem;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  box-shadow: 0 18px 40px -24px rgba(0,0,0,0.5);
}

.hero-actions .btn-primary {
  background: linear-gradient(135deg, #e2c673 0%, #d0a83b 44%, #f4df99 100%);
  color: #10242d;
  border-color: rgba(255,255,255,0.22);
  text-shadow: none;
  box-shadow: 0 20px 42px -22px rgba(212,175,55,0.8);
}

.hero-actions .btn-ghost {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
  color: #ffffff;
}

.hero-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.hero-highlights span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  color: #f6f7f9;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

body:not(.dark-theme) .hero-highlights span {
  background: rgba(10, 39, 48, 0.06);
  border-color: rgba(10, 39, 48, 0.12);
  color: #102d37;
}

.hero-note {
  font-size: 0.96rem;
  color: rgba(255,255,255,0.8);
  max-width: 42rem;
}

.hero-note a {
  color: #f7d98f;
}

.hero-showcase {
  display: grid;
  gap: 1.2rem;
  padding: 1.5rem 1.2rem 1.5rem 0;
}

.hero-card {
  position: relative;
  border-radius: 28px;
  padding: 1.75rem;
  min-height: 160px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 24px 46px -28px rgba(0,0,0,0.42);
  backdrop-filter: blur(10px);
  color: #ffffff;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.hero-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.24);
  box-shadow: 0 30px 52px -28px rgba(0,0,0,0.58);
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 27px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  pointer-events: none;
}

.hero-card strong,
.hero-card p {
  position: relative;
  z-index: 1;
}

.hero-card-main {
  background: linear-gradient(135deg, rgba(212,175,55,0.16), rgba(255,255,255,0.06));
  border-color: rgba(212,175,55,0.30);
}

/* Motion tokens and utilities */
:root {
  --motion-fast: 180ms;
  --motion-medium: 420ms;
  --motion-slow: 800ms;
  --stagger-step: 70ms;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root { --stagger-step: 0ms; }
  .will-animate, .fade-in-up, .float, .parallax, .nav-animate { animation: none !important; transition: none !important; transform: none !important; }
}

/* Entrance + staggered reveal */
.will-animate { opacity: 0; transform: translateY(8px) scale(0.995); will-change: opacity, transform; }
.fade-in-up { opacity: 1; transform: translateY(0) scale(1); transition: opacity var(--motion-medium) cubic-bezier(.2,.9,.3,1), transform var(--motion-medium) cubic-bezier(.2,.9,.3,1); }

/* helper to stagger via inline style or JS */
.staggered[data-stagger] { transition-delay: calc(var(--stagger-step) * var(--stagger-index)); }

/* Floating accent shapes */
.hero-accent {
  position: absolute;
  pointer-events: none;
  filter: blur(12px) saturate(1.05);
  opacity: 0.95;
  mix-blend-mode: screen;
}
.hero-accent--gold { width: 260px; height: 260px; right: -40px; top: -30px; background: radial-gradient(circle, rgba(212,175,55,0.18), rgba(212,175,55,0.06)); border-radius: 50%; transform: translate3d(0,0,0); }
.hero-accent--blue { width: 200px; height: 200px; left: -60px; bottom: -40px; background: radial-gradient(circle, rgba(13,52,68,0.14), rgba(13,52,68,0.04)); border-radius: 50%; }

/* Hero subtle float */
.float { animation: floatY var(--motion-slow) ease-in-out infinite; }
@keyframes floatY { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0); } }

/* Nav entrance */
.nav-animate { opacity: 0; transform: translateY(-6px); }
.nav-animate.show { opacity: 1; transform: translateY(0); transition: opacity var(--motion-medium) ease, transform var(--motion-medium) ease; }

/* Logo pop on load */
.brand-mark { transition: transform var(--motion-medium) cubic-bezier(.2,.9,.3,1); }
.brand-mark.pop { transform: scale(1.15); }

/* Button micro-interactions */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); opacity: 0; transition: opacity var(--motion-fast); }
.btn-primary:hover::after, .btn-primary:focus::after { opacity: 1; }
.btn-primary.pulse { animation: pulseBorder 1.6s ease-in-out infinite; }
@keyframes pulseBorder { 0% { box-shadow: 0 6px 18px rgba(212,175,55,0.12); } 50% { box-shadow: 0 10px 30px rgba(212,175,55,0.16); } 100% { box-shadow: 0 6px 18px rgba(212,175,55,0.12); } }

/* Card hover lift and inner shine */
.card, .tier-card { transition: transform var(--motion-medium), box-shadow var(--motion-medium), border-color var(--motion-medium); }
.card:hover, .tier-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 36px 60px rgba(13,52,68,0.08); }

/* Stylish divider stroke animation (fallback safe) */
.divider svg path { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.9,.3,1); }
.divider.in-view svg path { stroke-dashoffset: 0; }

/* Copy button feedback */
.copy-btn { transition: transform var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast); }
.copy-btn.copied { transform: scale(0.98); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }

/* Focus and accessibility */
:focus { outline: none; }
.focus-ring { box-shadow: var(--focus-ring); border-radius: 12px; }

/* Footer: keep visible by default to avoid accidental hiding; still allow subtle transition when 'show' is applied */
.site-footer { transform: none; opacity: 1; transition: none; }
.site-footer.show { transform: translateY(0); opacity: 1; }

/* Increase footer text contrast and legibility */
.site-footer, .site-footer * { color: var(--color-text) !important; }
.footer-links a { opacity: 0.96; }
.footer-copy, .footer-legal { color: var(--color-text); opacity: 0.92; }

/* Small screens */
@media (max-width: 880px) {
  .header-row {
    padding: 0.75rem 0.5rem;
  }

  .site-nav {
    display: none;

/* Keep header navigation visible on small screens */
@media (max-width: 900px) {
  body.dashboard-page .site-nav { display: flex !important; gap: 0.9rem !important; align-items: center !important; }
  body.dashboard-page .site-nav a { display: inline-flex !important; padding: 8px 10px !important; background: transparent !important; color: rgba(255,255,255,0.95) !important; font-size: 0.82rem !important; }
}
  }

  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .hero-grid { grid-template-columns: 1fr; }
  .brand-mark { height: 56px; }
  .hero-copy { padding: 2.2rem 1.3rem 1.4rem; }
  .hero-shell { border-radius: 26px; }
  .section-alt { border-radius: 24px; }
  .hero-highlights { grid-template-columns: 1fr; }
}

@media (min-width: 1025px) {
  .mobile-nav {
    display: none !important;
  }
}

body.dark-theme .hero-card {
  background: rgba(13, 52, 68, 0.92);
}

.hero-card-main {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(255, 255, 255, 0.84));
}

.hero-card-main strong,
.hero-card strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.85rem;
}

.hero-card p {
  margin: 0;
  color: var(--color-muted);
}

.divider {
  position: relative;
  height: 42px;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 38, 50, 0.96) 0%, rgba(7, 30, 41, 1) 100%);
  border: none !important;
  box-shadow: none !important;
}

.divider::before,
.divider::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background-repeat: repeat-x;
}

.divider::before {
  bottom: 0;
  height: 12px;
  background-size: 26px 20px;
  background-image: radial-gradient(circle at 13px -5px, transparent 12px, rgba(255, 255, 255, 0.96) 13px);
}

.divider::after {
  bottom: 0;
  height: 16px;
  background-size: 40px 20px;
  background-image: radial-gradient(circle at 20px 15px, rgba(255, 255, 255, 0.96) 12px, transparent 13px);
}

.divider--top {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.18), rgba(7, 30, 41, 0.96));
}

.divider--top::before,
.divider--top::after {
  bottom: auto;
  top: 0;
}

.divider--top::before {
  background-image: radial-gradient(circle at 13px 15px, transparent 12px, rgba(255, 255, 255, 0.96) 13px);
}

.divider--top::after {
  background-image: radial-gradient(circle at 20px 0, rgba(255, 255, 255, 0.96) 12px, transparent 13px);
}

.divider svg {
  display: none !important;
}

.section {
  position: relative;
  padding: 5.5rem 0;
  background: rgba(245, 239, 231, 0.94);
  overflow: visible;
  --section-wave-fill: rgba(13, 52, 68, 0.96);
}

.section .wrap,
.section-alt .wrap,
.privacy-wrap,
.contact-wrap {
  padding-left: clamp(20px, 2.8vw, 42px);
  padding-right: clamp(20px, 2.8vw, 42px);
}

body.dark-theme .section {
  background: rgba(8, 21, 29, 0.94);
  --section-wave-fill: rgba(255, 255, 255, 0.96);
}

.section::before,
.section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 22px;
  background-repeat: repeat-x;
  background-size: 26px 20px;
  pointer-events: none;
  z-index: 2;
}

.section::before {
  top: -6px;
  background-image: radial-gradient(circle at 13px 25px, transparent 12px, var(--section-wave-fill) 13px);
}

.section::after {
  bottom: -6px;
  background-image: radial-gradient(circle at 13px -5px, transparent 12px, var(--section-wave-fill) 13px);
}

.section-alt {
  position: relative;
  background: linear-gradient(180deg, rgba(245,240,230,0.96), rgba(255,255,255,0.9));
  border: 1px solid rgba(13,52,68,0.06);
  border-radius: 34px 34px 30px 30px / 30px 30px 26px 26px;
  box-shadow: 0 26px 60px -38px rgba(13,52,68,0.26);
  overflow: visible;
}

body.dark-theme .section-alt {
  background: linear-gradient(180deg, rgba(12, 26, 35, 0.94), rgba(7, 18, 24, 0.98));
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3vw, 3.1rem);
  margin: 0 0 1rem;
  color: var(--color-text);
  letter-spacing: -0.05em;
  line-height: 1.05;
}

.section-lead {
  max-width: 55rem;
  color: rgba(13,52,68,0.72);
  margin-bottom: 2.25rem;
  font-size: 1.08rem;
}

body.dark-theme .section-lead {
  color: rgba(255,255,255,0.72);
}

.pillars,
.feature-grid,
.tier-cards,
.verify-grid,
.public-detail-grid {
  display: grid;
  gap: 1.5rem;
}

.pillars {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.pillar,
.tier-card,
.feature-card,
.public-profile-section,
.dash-card,
.notice-box,
.modal-card,
.elite-table,
.step,
.payment-card {
  background: rgba(255,255,255,0.76);
  border: 1px solid rgba(13,52,68,0.08);
  border-radius: 32px 32px 28px 28px / 28px 28px 24px 24px;
  padding: 1.9rem;
  box-shadow: 0 32px 72px -38px rgba(13,52,68,0.28);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.pillar::after,
.tier-card::after,
.feature-card::after,
.step::after,
.payment-card::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -10px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.32);
  filter: blur(4px);
  pointer-events: none;
}

.pillar::before,
.tier-card::before,
.step::before,
.payment-card::before,
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, rgba(212,175,55,0.8), rgba(13,52,68,0.75));
}

body.dark-theme .pillar,
body.dark-theme .tier-card,
body.dark-theme .feature-card,
body.dark-theme .public-profile-section,
body.dark-theme .dash-card,
body.dark-theme .notice-box,
body.dark-theme .modal-card,
body.dark-theme .elite-table,
body.dark-theme .step,
body.dark-theme .payment-card {
  background: rgba(7, 25, 35, 0.82);
  border-color: rgba(255,255,255,0.08);
}

.pillar-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(13,52,68,0.14));
  color: var(--accent-strong);
  font-weight: 800;
  margin-bottom: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

.pillar h3,
.feature-card h3,
.tier-card h3,
.elite-title {
  margin: 0 0 0.85rem;
}

.pillar p,
.feature-card p,
.tier-card p,
.notice-box p,
.section p,
.hero-sub,
.auth-sub {
  color: var(--color-muted);
}

.tier-cards {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.tier-card {
  position: relative;
  overflow: hidden;
}

.tier-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, rgba(212,175,55,0.65), rgba(13,52,68,0.65));
}

.tier-card-featured {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.18), rgba(253, 252, 243, 0.96));
  border-color: rgba(212, 175, 55, 0.30);
  box-shadow: 0 38px 72px -38px rgba(150, 118, 35, 0.58);
  color: #132b35;
}

.tier-card-featured .tier-eyebrow,
.tier-card-featured h3,
.tier-card-featured .tier-price,
.tier-card-featured .tier-list li,
.tier-card-featured .tier-list li::before {
  color: #132b35 !important;
}

body.dark-theme .tier-card-featured {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.12), rgba(12, 36, 47, 0.96));
  color: #edf8ff;
}

body.dark-theme .tier-card-featured .tier-eyebrow,
body.dark-theme .tier-card-featured h3,
body.dark-theme .tier-card-featured .tier-price,
body.dark-theme .tier-card-featured .tier-list li,
body.dark-theme .tier-card-featured .tier-list li::before {
  color: #edf8ff !important;
}

.tier-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-strong);
  font-size: 0.8rem;
  margin-bottom: 0.8rem;
}

.tier-price {
  font-size: 2rem;
  margin: 0.85rem 0 1rem;
  font-weight: 700;
}

.tier-list,
.list-reset,
.format-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}

.tier-list li,
.list-reset li,
.format-list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--color-muted);
}

.tier-list li::before,
.list-reset li::before,
.format-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent);
}

.elite-table-wrap {
  margin-top: 2rem;
}

.elite-table {
  width: 100%;
  overflow: hidden;
}

.elite-row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr minmax(90px, 130px);
  gap: 1rem;
  padding: 1rem 1rem;
  align-items: center;
}

.elite-row-head {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #102d37;
}

.elite-row-head > div {
  color: #102d37;
}

body.dark-theme .elite-row-head,
body.dark-theme .elite-row-head > div {
  color: #edf8ff;
}

.elite-row:not(.elite-row-head) {
  border-top: 1px solid var(--color-border);
}

.elite-tier-name {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.elite-tier-name span {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.elite-fee {
  font-weight: 700;
}

.steps {
  display: grid;
  gap: 1.25rem;
}

.step {
  display: grid;
  gap: 0.75rem;
  padding: 1.6rem;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(247,245,239,0.9));
  border: 1px solid rgba(13,52,68,0.08);
  position: relative;
  overflow: hidden;
}

body.dark-theme .step {
  background: linear-gradient(180deg, rgba(12, 38, 51, 0.84), rgba(8, 25, 34, 0.94));
}

.step-num {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(13,52,68,0.08));
  color: var(--accent-strong);
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

.pillar:hover,
.tier-card:hover,
.step:hover,
.payment-card:hover,
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 36px 60px -38px rgba(13,52,68,0.26);
}

.step h3 {
  margin: 0;
}

.contact-card {
  display: grid;
  gap: 0.75rem;
}

/* Auth and forms */
.auth-shell {
  padding: clamp(4.5rem, 9vw, 7rem) 0 6rem;
}

.auth-card,
.dash-card {
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: 32px;
  box-shadow: var(--shadow-lg);
  padding: 2.5rem;
}

body.dark-theme .auth-card,
body.dark-theme .dash-card {
  background: rgba(13, 52, 68, 0.96);
}

.auth-card h1,
.dash-header h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(2.1rem, 4vw, 2.6rem);
}

/* Mobile adjustments: make elite tiers stack vertically to avoid any
   horizontal scrolling and improve readability on narrow screens. */
@media (max-width: 880px) {
  .elite-row {
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
    padding: 0.85rem 0.85rem !important;
    text-align: left;
  }
  .elite-row-head { display: none !important; }
  .elite-tier-name { gap: 0.4rem; }
}

.auth-sub {
  color: var(--color-muted);
  margin-bottom: 2rem;
}

.field {
  margin-bottom: 1.2rem;
}

.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border-radius: 18px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 0.95rem 1rem;
}

body.dark-theme .field input,
body.dark-theme .field select,
body.dark-theme .field textarea {
  background: rgba(13, 52, 68, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 3px solid rgba(212, 175, 55, 0.24);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 720px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

.form-actions {
  margin-top: 1rem;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.8rem 0;
  color: var(--color-muted);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.alert {
  display: none;
  border-radius: 18px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.alert.show {
  display: block;
}

.alert-error {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--text);
}

.alert-success {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--text);
}

.auth-card .btn-google {
  width: 100%;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.96);
  color: var(--color-text);
  border-color: rgba(13, 52, 68, 0.12);
  margin-bottom: 1rem;
}

.auth-card .btn-google:hover,
.auth-card .btn-google:focus {
  background: rgba(255, 255, 255, 1);
}

.auth-switch {
  margin-top: 1rem;
  color: var(--color-muted);
}

.auth-switch a {
  color: var(--accent);
  font-weight: 700;
}

/* Profile format */
.format-heading {
  font-size: clamp(1.6rem, 2vw, 2.1rem);
  margin-bottom: 1rem;
}

.format-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.85rem;
}

.format-list li {
  color: var(--color-text);
  padding-left: 1rem;
  position: relative;
}

.format-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.notice-box {
  border-left: 4px solid var(--accent);
}

.notice-box p {
  margin: 0;
}

.fine-print {
  color: var(--color-muted);
  max-width: 44rem;
  margin-top: 1.25rem;
}

.format-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* Profile page */
.public-profile-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
}

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  object-fit: cover;
  background: var(--color-surface-soft);
}

.avatar-placeholder {
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  color: var(--color-text);
  background: var(--color-surface-soft);
}

.public-profile-name {
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.6rem);
}

.public-profile-meta {
  margin: 0.4rem 0 0;
  color: var(--color-muted);
}

.tier-badge {
  display: inline-flex;
  margin-top: 1rem;
  padding: 0.65rem 0.95rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
}

.public-profile-section {
  margin-top: 2rem;
}

.public-profile-section h3 {
  margin-bottom: 1rem;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.9rem;
}

.photo-grid img {
  border-radius: 24px;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.public-detail-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.public-detail-grid > div {
  background: var(--color-surface-soft);
  border-radius: 20px;
  padding: 1rem;
  border: 1px solid var(--color-border);
}

body.dark-theme .public-detail-grid > div {
  background: rgba(13, 52, 68, 0.86);
}

.public-detail-grid h4 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.public-detail-grid p {
  margin: 0;
  color: var(--color-muted);
}

/* Footer */
.site-footer {
  padding: 3rem 0;
  background: rgba(253, 252, 243, 0.92);
  border-top: 1px solid var(--color-border);
}

body.dark-theme .site-footer {
  background: rgba(8, 18, 26, 0.92);
}

.footer-inner {
  display: grid;
  gap: 1.75rem;
}

.footer-brand {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
}

.footer-brand-title {
  margin: 0;
  font-weight: 800;
}

.footer-brand-sub {
  margin: 0.35rem 0 0;
  color: var(--color-muted);
}

.footer-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
}

.footer-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--color-text);
  opacity: 0.78;
}

.footer-links a:hover {
  opacity: 1;
  color: var(--accent);
}

.footer-copy,
.footer-legal {
  color: var(--color-muted);
  font-size: 0.95rem;
}

/* Utility classes */
.glass {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

body.dark-theme .glass {
  background: rgba(9, 24, 34, 0.78);
  border-color: rgba(255, 255, 255, 0.08);
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1080px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    padding: 2.5rem 2rem 2rem;
  }
}

@media (max-width: 860px) {
  .site-nav {
    display: none;
  }

  .theme-toggle {
    display: inline-flex;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .hero-shell {
    border-radius: 28px;
  }

  .hero-highlights {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    gap: 1.25rem;
  }
}

/* Dashboard-specific refinements to make the profile area more modern */
.dash-header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:1rem; padding:26px; border-radius:18px; background: var(--surface) !important; color: var(--text) !important; box-shadow: var(--shadow-lg); border: 1px solid var(--border) !important; }
.dash-header-identity { display:flex; align-items:center; gap:16px; }
.dash-header .avatar { width:86px; height:86px; border-radius:999px; border:3px solid var(--border); box-shadow:0 12px 30px rgba(8,22,28,0.08); }
.dash-header h1{ font-size:1.45rem; margin:0; color:var(--text) !important; font-family:var(--font-display); }
/* hero sub elements */
.dash-header .tier-badge{ background: rgba(var(--surface-rgb), 0.12) !important; color:var(--text) !important; border-color: rgba(var(--surface-rgb), 0.12) !important; }

/* layout: three columns (left nav, main, right sidebar) */
.dash-grid{ grid-template-columns: 220px 1fr minmax(300px, 380px); }

/* Subtle, elevated cards */
.dash-card{ border-radius:18px; padding:1.25rem; background:var(--color-surface); border:1px solid var(--color-border); box-shadow:var(--shadow-sm); }
.dash-card h2{ font-size:1.05rem; margin:0 0 0.75rem; }

/* Compact, clear profile completion */
.completion-summary{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.completion-percent{ width:60px; height:60px; border-radius:999px; display:grid; place-items:center; font-weight:800; background:var(--color-surface-soft); color:var(--color-text); box-shadow:0 8px 20px rgba(8,22,28,0.06); }
.completion-bar{ height:12px; border-radius:999px; background:linear-gradient(90deg, rgba(12,28,36,0.04), rgba(12,28,36,0.02)); overflow:hidden; }
.completion-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--accent), rgba(13,52,68,0.6)); transition: width .36s ease; }

/* Photos */
.photo-grid{ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap:12px; }
.photo-slot{ border-radius:12px; border:1px solid var(--color-border); padding:8px; background:var(--color-surface); }
.photo-slot img{ border-radius:8px; width:100%; height:140px; object-fit:cover; }
.photo-slot-main-badge{ position:absolute; left:10px; top:10px; background:var(--accent); color:#072029; padding:6px 8px; border-radius:999px; font-weight:800; }

/* Form fields: slightly tighter spacing, clearer focus */
.field{ margin-bottom:14px; }
.field label{ font-weight:700; margin-bottom:6px; display:block; }
.field input, .field select, .field textarea{ padding:10px 12px; border-radius:12px; border:1px solid var(--color-border); background:var(--color-surface); }
.field textarea{ min-height:96px; }

/* Verify badges and payment/history cards */
.verify-grid{ display:flex; flex-direction:column; gap:10px; }
.verify-pill{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:10px; border:1px solid var(--color-border); background:var(--color-surface); }

@media (max-width:900px){
  .dash-header { align-items:flex-start; gap:12px; padding:18px; }
  .dash-header .avatar{ width:72px; height:72px; }
  .photo-slot img{ height:120px }
  .dash-grid{ grid-template-columns: 1fr; }
}

/* Profile tabs (split long form into sections) */
.profile-tabs{ display:flex; gap:8px; margin:8px 0 16px; flex-wrap:wrap; }
.tab-btn{ background:transparent; border:1px solid var(--color-border); padding:8px 12px; border-radius:999px; font-weight:700; color:var(--color-text); cursor:pointer; }
.tab-btn.active{ background:linear-gradient(90deg,var(--accent), rgba(13,52,68,0.12)); color:#072029; box-shadow:0 10px 28px rgba(212,175,55,0.08); }
.tab-panel{ display:block; animation:fadeIn .16s ease; }
.tab-panel[hidden]{ display:none; }

@keyframes fadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* Summary card styles */
.profile-summary-card{ padding:20px; }
.profile-summary-grid{ gap:18px; }
.profile-summary-main .summary-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.summary-item{ background:var(--color-surface); border:1px solid var(--color-border); padding:10px; border-radius:10px; }
.summary-item strong{ display:block; margin-bottom:6px; color:var(--color-text); }
.summary-grid{ margin-top:8px; }
.summary-pill{ background:var(--color-surface); border:1px solid var(--color-border); padding:8px; border-radius:8px; text-align:center; }
.profile-summary-quick .summary-quick-card{ background:var(--color-surface); border:1px solid var(--color-border); padding:12px; border-radius:12px; }

/* Typography tweaks */
.dash-card h2{ font-size:1.05rem; }
body{ font-size:15px; }
.left-menu-item{ font-size:14px; }
.btn{ font-weight:700; }

/* === Visual polish to match provided design === */
:root{
  --page-bg:#f5f7f8;
  --card-bg:#ffffff;
  --muted:#7f8a8c;
  --accent:#d4af37; /* gold */
  --teal-900:#05343b;
  --teal-800:#0b5560;
}

body.dashboard-page {
  background: var(--page-bg);
  color: #072029;
}

.dashboard-page .wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 18px 80px;
}

.dashboard-page .site-header {
  /* Theme-aware header for dashboard pages */
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 14px 30px rgba(2, 20, 26, 0.12);
  color: var(--text) !important;
}

.dashboard-page .header-row {
  max-width: 1180px;
  margin: 0 auto;
  min-height: 74px;
}

.dashboard-page .brand {
  display: inline-flex;
  align-items: center;
}

.dashboard-page .brand-mark {
  width: 54px;
  height: auto;
}

.dashboard-page .site-nav {
  margin-left: auto;
  margin-right: 18px;
  gap: 22px;
}

.dashboard-page .site-nav a,
.dashboard-page .nav-auth a,
.dashboard-page .mobile-nav a {
  font-family: var(--font-display), var(--font-sans), sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.dashboard-page .site-nav a {
  color: rgba(255,255,255,0.82);
  text-transform: none;
}

.dashboard-page .site-nav a:hover {
  color: #fff;
}

.dashboard-page .theme-toggle,
.dashboard-page .nav-toggle {
  display: none !important;
}

.dashboard-page .nav-auth {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-page .nav-auth .btn,
.dashboard-page .nav-auth a {
  color: #fff;
}

.dashboard-page #main {
  padding-top: 18px;
}

.dashboard-page .dash-header {
  background: var(--surface) !important;
  border-radius: 14px;
  padding: 18px 22px 16px;
  color: var(--text) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 20px 50px rgba(3,18,20,0.08);
  margin-bottom: 18px;
  min-height: 96px;
  border: 1px solid var(--border) !important;
}

.dashboard-page .dash-header-identity {
  display: flex;
  align-items: center;
  gap: 18px;
}

.dashboard-page .dash-header .avatar {
  width: 68px;
  height: 68px;
  border-radius: 999px;
  border: 3px solid var(--border);
  box-shadow: 0 8px 30px rgba(3,18,20,0.08);
  object-fit: cover;
}

.dashboard-page .dash-header h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text) !important;
  letter-spacing: -0.02em;
}

.dashboard-page .dash-header .dash-welcome {
  margin: 6px 0 0;
  color: rgba(var(--text-rgb), 0.82) !important;
  font-size: 0.77rem;
  font-weight: 500;
}

.dashboard-page .dash-header .tier-badge {
  background: rgba(var(--surface-rgb), 0.1) !important;
  color: var(--text) !important;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.02);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 116px;
}

.dashboard-page #welcomeName {
  color: var(--accent);
}

.dashboard-page .btn-outline-gold {
  background: linear-gradient(180deg, #ebd590 0%, #d4af37 100%);
  color: #072029;
  padding: 10px 15px;
  border-radius: 999px;
  border: 1px solid rgba(13,52,68,0.06);
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(13,52,68,0.08);
}

.dashboard-page .btn-outline-gold:hover {
  transform: translateY(-1px);
}

.dashboard-page .dash-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-page .dash-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 6px 18px rgba(10,28,36,0.045);
  border: 1px solid rgba(10,28,36,0.05);
  transition: none;
}

.dashboard-page .dash-card:hover {
  transform: none;
  box-shadow: 0 6px 18px rgba(10,28,36,0.045);
}

.dashboard-page .dash-card h2 {
  font-size: 1.08rem;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.dashboard-page #profileCompletionCard .field-hint {
  margin-bottom: 10px;
  font-size: 0.72rem;
  color: rgba(13,52,68,0.72);
}

.dashboard-page .completion-summary {
  margin-bottom: 8px;
}

.dashboard-page .completion-percent {
  min-width: 62px;
  padding: 9px 12px;
  font-size: 0.75rem;
}

.dashboard-page #profileCompletionCard {
  margin-bottom: 18px;
  background: #fff;
  border-radius: 12px;
  padding: 18px 20px 14px;
}

.dashboard-page .completion-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}

.dashboard-page .completion-percent {
  font-weight: 800;
  color: #0d3444;
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.18);
  padding: 8px 12px;
  border-radius: 999px;
  min-width: 66px;
  text-align: center;
  font-size: 0.8rem;
}

.dashboard-page .completion-bar {
  flex: 1;
  background: rgba(10,28,36,0.06);
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
}

.dashboard-page .completion-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #f1d57f);
  border-radius: inherit;
}

.dashboard-page .field-hint {
  font-size: 0.76rem;
  line-height: 1.5;
}

.dashboard-page .form-actions {
  margin-top: 8px;
}

.dashboard-page .btn-primary,
.dashboard-page .btn-ghost,
.dashboard-page .btn {
  border-radius: 10px;
  font-family: var(--font-display), var(--font-sans), sans-serif;
  font-weight: 700;
}

.dashboard-page .btn-primary {
  background: linear-gradient(180deg, #d8ba54, #c9a638);
  color: #072029;
  border: none;
}

.dashboard-page .btn-ghost {
  background: transparent;
  border: 1px solid rgba(13,52,68,0.12);
  color: #0d3444;
}

.dashboard-page .btn-small {
  padding: 9px 14px;
  font-size: 0.76rem;
}

.dashboard-page .left-nav {
  position: relative;
  align-self: stretch;
}

.dashboard-page .left-nav-inner {
  position: sticky;
  top: 18px;
  padding: 12px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: transparent;
}

.dashboard-page .left-brand {
  display: flex;
  justify-content: center;
  padding: 10px 0 6px;
}

.dashboard-page .left-brand-mark {
  width: 52px;
  height: auto;
}

.dashboard-page .left-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard-page .left-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  color: #0d3444;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(13,52,68,0.04);
  font-weight: 600;
  font-size: 0.83rem;
  text-decoration: none;
}

.dashboard-page .left-menu-item.active {
  background: rgba(212,175,55,0.1);
  border-color: rgba(212,175,55,0.16);
  box-shadow: none;
}

.dashboard-page .left-menu-item span {
  line-height: 1.2;
}

.dashboard-page .left-menu-item:hover {
  background: rgba(212,175,55,0.08);
}

.dashboard-page .left-menu-item.active {
  background: rgba(212,175,55,0.12);
  border-color: rgba(212,175,55,0.18);
  box-shadow: 0 8px 22px rgba(212,175,55,0.06);
}

.dashboard-page .left-menu-item svg {
  width: 16px;
  height: 16px;
}

.dashboard-page .left-upgrade {
  margin-top: 8px;
  padding: 12px 10px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(243,245,247,0.96));
  border: 1px solid rgba(13,52,68,0.04);
}

.dashboard-page .left-upgrade .btn {
  background: linear-gradient(180deg, #d9ba56, #caa23d);
  color: #072029;
  border: none;
  border-radius: 10px;
  font-weight: 800;
}

.dashboard-page .upgrade-flag {
  font-size: 0.8rem;
  margin-bottom: 8px;
  font-weight: 800;
  color: #0d3444;
}

.dashboard-page .left-upgrade .btn {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.75rem;
}

.dashboard-page .profile-summary-card {
  padding: 20px 18px 18px;
}

.dashboard-page .profile-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
  margin-top: 14px;
}

.dashboard-page .summary-item,
.dashboard-page .summary-pill,
.dashboard-page .summary-quick-card {
  min-height: 72px;
}

.dashboard-page .summary-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-page .summary-item strong,
.dashboard-page .summary-pill strong {
  font-size: 0.62rem;
  text-transform: none;
  letter-spacing: 0.01em;
  color: rgba(13,52,68,0.7);
}

.dashboard-page .summary-item,
.dashboard-page .summary-pill,
.dashboard-page .summary-quick-card {
  background: linear-gradient(180deg, rgba(250,250,249,1), rgba(245,247,248,1));
  border: 1px solid rgba(13,52,68,0.06);
  border-radius: 10px;
  padding: 10px 12px;
}

.dashboard-page .summary-item strong,
.dashboard-page .summary-pill strong {
  display: block;
  font-size: 0.67rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(13,52,68,0.72);
  margin-bottom: 4px;
}

.dashboard-page .summary-item div,
.dashboard-page .summary-pill div {
  font-size: 0.84rem;
  color: #0d3444;
  font-weight: 600;
}

.dashboard-page .summary-quick-card {
  padding: 14px 12px;
}

.dashboard-page .summary-quick-card > div {
  display: grid;
  gap: 8px;
}

.dashboard-page .summary-quick-card small {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(13,52,68,0.72);
  margin-bottom: 3px;
}

.dashboard-page .photo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-page .photo-slot {
  padding: 8px;
}

.dashboard-page .photo-slot img {
  height: 100px;
}

.dashboard-page .photo-slot {
  background: linear-gradient(180deg, #fff, #f9fafb);
  border-radius: 10px;
  border: 1px solid rgba(13,52,68,0.06);
  overflow: hidden;
  padding: 8px;
  box-shadow: none;
}

.dashboard-page .photo-slot:hover {
  transform: none;
  box-shadow: none;
}

.dashboard-page .photo-slot img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.dashboard-page .photo-slot .photo-slot-body {
  padding: 10px 0 0;
}

.dashboard-page .photo-slot .photo-slot-body select {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(13,52,68,0.08);
  background: #fff;
  font-size: 0.72rem;
  padding: 7px 8px;
}

.dashboard-page .photo-slot-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.dashboard-page .photo-slot-actions button {
  flex: 1;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(13,52,68,0.08);
  background: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  color: #0d3444;
}

.dashboard-page .photo-slot-actions button.is-active {
  background: #0d3444;
  color: #fff;
  border-color: #0d3444;
}

.dashboard-page .photo-slot-empty {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1.5px dashed rgba(13,52,68,0.12);
  color: rgba(13,52,68,0.38);
  font-size: 2.2rem;
  background: linear-gradient(180deg, rgba(248,249,249,0.9), rgba(255,255,255,1));
}

.dashboard-page .sidebar-shell {
  width: 100%;
  display: grid;
  gap: 14px;
}

.dashboard-page .sidebar-shell .dash-card {
  padding: 16px 18px;
}

.dashboard-page .dash-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(13,52,68,0.06);
}

.dashboard-page .dash-card-row:last-child {
  border-bottom: none;
}

.dashboard-page .verify-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eafaf0;
  color: #19714a;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  border: 1px solid rgba(25,113,74,0.08);
}

.dashboard-page .verify-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dashboard-page .verify-pill-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(13,52,68,0.06);
  background: rgba(245,247,248,1);
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 0.77rem;
}

.dashboard-page .verify-pill-status strong {
  font-size: 0.72rem;
  color: #0d3444;
}

.dashboard-page .verify-pill-status .status-tag {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(212,175,55,0.12);
  color: #7a5d00;
  font-size: 0.65rem;
  font-weight: 800;
}

.dashboard-page .field {
  margin-bottom: 12px;
}

.dashboard-page .field label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0d3444;
}

.dashboard-page .field input,
.dashboard-page .field select,
.dashboard-page .field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(13,52,68,0.08);
  background: #fff;
  color: #0d3444;
  font-size: 0.82rem;
  font-family: var(--font-body), var(--font-sans), sans-serif;
}

.dashboard-page .field textarea {
  min-height: 90px;
}

.dashboard-page .phone-reminder {
  display: block;
  border: 1px solid rgba(212,175,55,0.18);
  background: rgba(212,175,55,0.08);
  color: #0d3444;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 0.72rem;
  line-height: 1.5;
}

.dashboard-page .payment-history-empty,
.dashboard-page .field-hint,
.dashboard-page .modal-sub,
.dashboard-page .alert,
.dashboard-page .payment-card-sub,
.dashboard-page .consent-en,
.dashboard-page .consent-ur {
  font-size: 0.76rem;
}

.dashboard-page .site-footer {
  background: #032f39;
  color: #eef6f7;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.dashboard-page .site-footer .wrap {
  max-width: 1180px;
  margin: 0 auto;
}

.dashboard-page .footer-copy,
.dashboard-page .site-footer p,
.dashboard-page .site-footer a {
  color: #eef6f7;
}

.dashboard-page .site-footer .footer-social a {
  border-color: rgba(255,255,255,0.18);
}

@media (max-width: 1024px) {
  .dashboard-page .dash-grid {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .dashboard-page .sidebar-shell {
    grid-column: 1 / -1;
  }
}

.small-card{ padding:14px; border-radius:10px; background:var(--card-bg); border:1px solid rgba(10,28,36,0.04); }

@media (max-width:1000px){
  .photo-grid{ grid-template-columns: repeat(4,1fr); }
  .profile-summary-grid{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .profile-summary-card{ padding:14px }
  .profile-summary-grid{ grid-template-columns:1fr; }
}

@media (max-width: 720px) {
  .hero {
    padding-top: 4rem;
  }

  .header-row {
    padding: 1rem 1rem 0.75rem;
  }

  .hero-copy {
    padding: 2rem 1.25rem 1.75rem;
  }

  .hero-title {
    font-size: clamp(2.5rem, 9vw, 3.5rem);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.2rem;
    font-size: 0.98rem;
  }

  .section {
    padding: 3rem 0;
  }

  .section-title {
    font-size: clamp(1.8rem, 5vw, 2.4rem);
  }

  .feature-grid,
  .tier-cards,
  .public-detail-grid,
  .pillars,
  .verify-grid {
    grid-template-columns: 1fr;
  }

  .header-row {
    gap: 0.75rem;
  }

  .site-nav {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}