/* =========================================================================
   WholeLife Psychics — main stylesheet
   Fonts load from <link> tags in the page head, not @import.
   Breakpoints: 1100px (tablet), 760px (mobile), 410px (small mobile).
   ========================================================================= */

:root {
  --night: #160927;
  --nav: #2b0e3d;
  --purple: #622574;
  --gold: #f5bf61;
  --gold-light: #ffcf73;
  --gold-line: rgba(245, 191, 97, .45);
  --cream: #fff6ec;
  --ink: #2b0b3d;
  --text: #f8efff;
  --text-soft: #e3d4ec;
  --font: 'Google Sans Flex', Arial, sans-serif;
  --gutter: clamp(16px, 3vw, 40px);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--night); }
body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  color: var(--text);
  font-family: var(--font);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
img { max-width: 100%; }

/* ---------- Night sky ----------
   A fixed layer behind the page: static stars (three tile sizes so the
   pattern never visibly repeats), a faint drifting layer, twinkling stars
   and the occasional shooting star. Only transform and opacity animate,
   which the graphics card handles; no JavaScript. */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--night);
  background-image:
    radial-gradient(0.9px 0.9px at 318px 130px, rgba(255,240,220,0.45), transparent),
    radial-gradient(0.9px 0.9px at 238px 127px, rgba(255,240,220,0.48), transparent),
    radial-gradient(0.9px 0.9px at 190px 240px, rgba(255,240,220,0.35), transparent),
    radial-gradient(0.6px 0.6px at 293px 127px, rgba(255,226,177,0.3), transparent),
    radial-gradient(0.7px 0.7px at 93px 199px, rgba(240,228,255,0.45), transparent),
    radial-gradient(0.7px 0.7px at 316px 227px, rgba(255,240,220,0.25), transparent),
    radial-gradient(1.0px 1.0px at 107px 110px, rgba(240,228,255,0.29), transparent),
    radial-gradient(1.0px 1.0px at 148px 160px, rgba(240,228,255,0.38), transparent),
    radial-gradient(1.0px 1.0px at 93px 100px, rgba(255,226,177,0.47), transparent),
    radial-gradient(0.8px 0.8px at 11px 184px, rgba(255,226,177,0.48), transparent),
    radial-gradient(0.7px 0.7px at 33px 169px, rgba(255,240,220,0.4), transparent),
    radial-gradient(0.6px 0.6px at 305px 173px, rgba(255,226,177,0.34), transparent),
    radial-gradient(1.0px 1.0px at 492px 356px, rgba(240,228,255,0.49), transparent),
    radial-gradient(1.3px 1.3px at 58px 131px, rgba(255,226,177,0.36), transparent),
    radial-gradient(1.1px 1.1px at 413px 9px, rgba(240,228,255,0.48), transparent),
    radial-gradient(0.8px 0.8px at 9px 231px, rgba(240,228,255,0.4), transparent),
    radial-gradient(0.9px 0.9px at 121px 386px, rgba(240,228,255,0.6), transparent),
    radial-gradient(1.0px 1.0px at 352px 262px, rgba(240,228,255,0.51), transparent),
    radial-gradient(1.2px 1.2px at 110px 301px, rgba(255,226,177,0.59), transparent),
    radial-gradient(1.3px 1.3px at 37px 221px, rgba(255,226,177,0.38), transparent),
    radial-gradient(1.0px 1.0px at 525px 312px, rgba(255,226,177,0.39), transparent),
    radial-gradient(1.1px 1.1px at 94px 159px, rgba(255,240,220,0.44), transparent),
    radial-gradient(1.5px 1.5px at 641px 152px, rgba(240,228,255,0.61), transparent),
    radial-gradient(1.1px 1.1px at 165px 49px, rgba(240,228,255,0.71), transparent),
    radial-gradient(1.5px 1.5px at 32px 243px, rgba(255,226,177,0.62), transparent),
    radial-gradient(1.2px 1.2px at 466px 431px, rgba(255,240,220,0.84), transparent),
    radial-gradient(1.6px 1.6px at 505px 342px, rgba(240,228,255,0.55), transparent),
    radial-gradient(1.2px 1.2px at 645px 423px, rgba(240,228,255,0.65), transparent),
    radial-gradient(1.3px 1.3px at 60px 430px, rgba(240,228,255,0.66), transparent),
    radial-gradient(1.7px 1.7px at 534px 464px, rgba(255,226,177,0.74), transparent);
  background-size: 320px 260px, 320px 260px, 320px 260px, 320px 260px, 320px 260px, 320px 260px, 320px 260px, 320px 260px, 320px 260px, 320px 260px, 320px 260px, 320px 260px, 530px 410px, 530px 410px, 530px 410px, 530px 410px, 530px 410px, 530px 410px, 530px 410px, 530px 410px, 530px 410px, 530px 410px, 810px 620px, 810px 620px, 810px 620px, 810px 620px, 810px 620px, 810px 620px, 810px 620px, 810px 620px;
}
.sky-drift {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% + 420px);
  background-image: radial-gradient(0.8px 0.8px at 245px 140px, rgba(240,228,255,0.4), transparent),
    radial-gradient(0.9px 0.9px at 75px 57px, rgba(240,228,255,0.55), transparent),
    radial-gradient(1.1px 1.1px at 91px 255px, rgba(240,228,255,0.35), transparent),
    radial-gradient(1.0px 1.0px at 251px 139px, rgba(240,228,255,0.44), transparent),
    radial-gradient(0.7px 0.7px at 257px 184px, rgba(240,228,255,0.5), transparent),
    radial-gradient(1.0px 1.0px at 182px 300px, rgba(240,228,255,0.49), transparent),
    radial-gradient(1.1px 1.1px at 186px 286px, rgba(240,228,255,0.37), transparent),
    radial-gradient(1.1px 1.1px at 248px 135px, rgba(240,228,255,0.47), transparent),
    radial-gradient(1.0px 1.0px at 150px 174px, rgba(240,228,255,0.45), transparent);
  background-size: 420px 320px;
  animation: sky-drift 160s linear infinite;
  will-change: transform;
}
@keyframes sky-drift { from { transform: translateX(0); } to { transform: translateX(-420px); } }
.sky-twinkle {
  position: absolute;
  border-radius: 50%;
  background: #fff3dd;
  box-shadow: 0 0 6px 1px rgba(255, 236, 200, .75);
  animation: sky-twinkle 4s ease-in-out infinite;
}
@keyframes sky-twinkle { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
.sky-shoot {
  position: absolute;
  width: 150px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 246, 224, .95), rgba(255, 246, 224, 0));
  opacity: 0;
  animation: sky-shoot 23s linear infinite;
}
@keyframes sky-shoot {
  0%, 94% { opacity: 0; transform: translate(0, 0) rotate(-25deg); }
  95% { opacity: 1; }
  100% { opacity: 0; transform: translate(-460px, 215px) rotate(-25deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sky-drift, .sky-twinkle, .sky-shoot { animation: none; }
  .sky-shoot { display: none; }
}

/* Page content sits above the sky. */
.site-header, .nav, .preview-banner, .site-main, .footer { position: relative; z-index: 1; }
.site-header { z-index: 20; }

/* ---------- Buttons ---------- */
.gold-button, .outline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.gold-button { border: 0; background: var(--gold); color: var(--ink); }
.gold-button:hover { background: var(--gold-light); }
.outline-button { border: 1px solid rgba(245, 191, 97, .6); background: transparent; color: var(--text); font-weight: 600; }
.outline-button:hover { border-color: var(--gold); color: #fff; }
.gold-button.large, .outline-button.large { min-height: 52px; padding: 0 28px; font-size: 16px; }

/* ---------- Header ---------- */
.site-header { color: #fff; }
.header-inner {
  min-height: 118px;
  padding: 14px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "phone brand picker";
  align-items: center;
  gap: 16px 25px;
}
.brand { grid-area: brand; display: flex; justify-content: center; min-width: 0; }
.brand img { display: block; width: 260px; max-width: 100%; height: auto; }
.header-contact[hidden] { display: none; }
.header-contact { grid-area: phone; justify-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.header-contact small { font-size: 13px; color: var(--text-soft); }
.header-contact a { font-size: 28px; font-weight: 700; color: #fff4df; letter-spacing: .5px; }

/* ---------- Country dropdown ---------- */
.flag-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.flag { display: block; flex: 0 0 26px; width: 26px; height: 13px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }
.flag-int { height: 20px; border-radius: 0; box-shadow: none; }
.flag-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  background: #efe2f5;
  color: #3d1250;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  box-shadow: 0 0 0 1px rgba(61, 18, 80, .2);
}
.country-picker { grid-area: picker; justify-self: end; position: relative; }
.country-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 8px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: 600 15px var(--font);
  white-space: nowrap;
  cursor: pointer;
}
.country-toggle:hover { background: rgba(255, 255, 255, .22); }
.country-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.country-chevron { width: 12px; height: 12px; transition: transform .15s ease; }
.country-toggle[aria-expanded="true"] .country-chevron { transform: rotate(180deg); }
.country-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 260px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid #e6dcea;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(20, 4, 36, .35);
}
.country-menu[hidden] { display: none; }
.country-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-radius: 8px;
  color: #3a1a4a;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.country-option:hover, .country-option:focus-visible { background: #f6eef9; outline: none; }
.country-option.is-current { background: #efe2f5; color: #3d1250; font-weight: 700; }
.country-check { width: 16px; height: 16px; margin-left: auto; color: var(--purple); }
.country-option:not(.is-current) .country-check { visibility: hidden; }
.country-toggle { min-height: 44px; }

/* ---------- Navigation ---------- */
.nav {
  background: var(--nav);
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}
.nav-inner {
  padding: 6px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.nav-links { display: flex; flex-wrap: wrap; gap: 0 4px; }
.nav-links a { padding: 14px 12px; font-size: 14px; font-weight: 600; border-radius: 8px; }
.nav-links a:hover { color: var(--gold-light); }
.nav-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.nav-toggle { display: none; }

.preview-banner { background: #fff0c5; color: #432247; padding: 12px; text-align: center; font-size: 13px; }
.preview-banner a { font-weight: 700; color: var(--purple); }

/* ---------- Hero ---------- */
.hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px var(--gutter) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 48px;
}
.hero picture { flex: 1 1 380px; max-width: 560px; }
.hero-img { display: block; width: 100%; height: auto; }
.hero-content { flex: 1 1 420px; display: flex; flex-direction: column; gap: 18px; padding-bottom: 32px; }
.eyebrow { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: #f8d9b0; }
.hero h1 { margin: 0; font-size: clamp(36px, 4vw, 56px); line-height: 1.08; font-weight: 600; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero p { margin: 0; max-width: 520px; font-size: 18px; line-height: 1.6; color: var(--text-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: #fff2d3; }

/* ---------- Reading services ---------- */
.services { background: var(--cream); color: var(--ink); border-top: 3px solid #e9b95f; padding: 56px var(--gutter); }
.services-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.services h2 { margin: 0; font-size: 36px; font-weight: 600; text-align: center; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 18px;
  border: 1px solid #ecdcc8;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  text-align: center;
}
a.service:hover { border-color: #e9b95f; }
.service img { display: block; width: 80px; height: 80px; }
.service h3 { margin: 4px 0 0; font-size: 18px; font-weight: 700; line-height: 1.25; }
.service p { margin: 0; font-size: 14px; line-height: 1.5; color: #6b5170; }

/* ---------- Welcome ---------- */
.welcome {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px var(--gutter) 72px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.welcome h2 { margin: 0; font-size: 36px; font-weight: 600; }
.welcome p { margin: 0; max-width: 720px; font-size: 17px; line-height: 1.7; color: var(--text-soft); }

/* ---------- Member sign in and registration ---------- */
.nav-logout { display: contents; }
.member-page { padding: 48px var(--gutter) 72px; }
.member-card {
  max-width: 460px;
  margin: 0 auto;
  padding: 32px clamp(20px, 4vw, 36px);
  background: #24113b;
  border: 1px solid var(--gold-line);
  border-radius: 18px;
}
.member-card.wide { max-width: 620px; }
.member-card h1 { margin: 0 0 20px; font-size: 30px; font-weight: 600; }
.member-step { display: flex; flex-direction: column; gap: 14px; }
.member-step[hidden] { display: none; }
.member-intro { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); }
.member-hint { margin: -4px 0 0; font-size: 13px; color: var(--text-soft); }
.member-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.member-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.member-field label, .member-field legend { padding: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.member-field legend { margin-bottom: 6px; }
.member-card input[type=text], .member-card input[type=email], .member-card input[type=tel], .member-card input[type=password], .member-card select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 10px;
  background: #170a28;
  color: #fff;
  font-size: 16px;
}
.member-card input:focus, .member-card select:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.member-card [aria-invalid="true"] { border-color: #ff8a8a; }
.member-dob-inputs { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 10px; }
.member-phone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; }
.member-phone-status { margin: 2px 0 0; min-height: 20px; font-size: 13px; color: var(--text-soft); }
.member-phone-status:empty { min-height: 0; margin: 0; }
.member-phone-status.is-valid { color: #9fe0b0; }
.member-phone-status.is-valid::before { content: '✓ '; }
.member-phone-status.is-invalid { color: #ffd2d2; }
.member-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--text-soft); cursor: pointer; }
.member-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 20px; accent-color: var(--gold); }
.member-check a, .member-alt a { color: var(--gold); font-weight: 600; }
.member-submit { width: 100%; margin-top: 4px; }
.member-message { margin: 0; min-height: 0; font-size: 14px; line-height: 1.5; }
.member-message:empty { display: none; }
.member-message.is-error { padding: 10px 12px; border-radius: 10px; background: rgba(255, 120, 120, .14); color: #ffd2d2; }
.member-message.is-success { padding: 10px 12px; border-radius: 10px; background: rgba(245, 191, 97, .14); color: #ffe7b8; }
.member-alt { margin: 4px 0 0; font-size: 14px; color: var(--text-soft); text-align: center; }
.member-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.link-button { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--gold); font-size: 14px; font-weight: 600; cursor: pointer; }
.link-button:hover { color: var(--gold-light); }
.link-button[hidden] { display: none; }
.code-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.code-boxes input[type=text] { min-height: 56px; padding: 0; text-align: center; font-size: 24px; font-weight: 700; }
.member-code-box { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; border: 1px solid var(--gold-line); border-radius: 12px; background: #170a28; }
.member-code-box span { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-soft); }
.member-code-box strong { font-size: 32px; letter-spacing: 8px; color: var(--gold); }
.member-done p { margin: 0; color: var(--text-soft); line-height: 1.6; }

/* ---------- Inner pages ---------- */
.inner-hero { padding: 85px 25px; text-align: center; }
.inner-hero h1 { margin: 0 0 10px; font-size: 48px; font-weight: 600; }
.inner-hero p { font-size: 17px; color: var(--text-soft); }
.placeholder { max-width: 960px; min-height: 300px; margin: auto; padding: 65px 30px; }
.placeholder h2 { font-size: 32px; font-weight: 600; }
.placeholder p { color: var(--text-soft); line-height: 1.6; }

/* ---------- Footer ---------- */
.footer { border-top: 3px solid #e9b95f; background: rgba(15, 4, 28, .6); }
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px var(--gutter) 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}
.footer-inner > div { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer h3 { margin: 0 0 6px; font-size: 16px; color: var(--gold-light); }
.footer p { margin: 0; line-height: 1.7; color: var(--text-soft); }
.footer a:hover { color: var(--gold-light); }
.footer [data-country-phone-block] { display: flex; flex-direction: column; gap: 10px; }
.footer [data-country-phone-block][hidden] { display: none; }
.footer-logo { display: block; width: 220px; height: auto; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
  padding: 18px var(--gutter);
  border-top: 1px solid rgba(255, 215, 145, .3);
  font-size: 12px;
  color: var(--text-soft);
  text-align: center;
}
.footer-bottom span { display: inline-flex; flex-wrap: wrap; gap: 0 6px; justify-content: center; }

/* ---------- Admin ---------- */
.admin-body {
  min-height: 100vh;
  padding: 35px 20px;
  background: radial-gradient(ellipse at 50% 45%, #68377e, #1d0733 75%);
  color: #fff;
}
.admin-card {
  max-width: 430px;
  margin: 7vh auto;
  padding: 38px;
  background: #fff8f1;
  color: #35113f;
  border-radius: 18px;
  box-shadow: 0 20px 80px #0006;
}
.admin-card img { width: 260px; max-width: 100%; background: #351047; border-radius: 8px; padding: 8px; }
.admin-card h1 { font-size: 25px; }
.admin-card label { display: block; margin: 16px 0; font-size: 13px; font-weight: 700; }
.admin-card input { width: 100%; padding: 12px; margin-top: 8px; border: 1px solid #b7a6bd; border-radius: 7px; }
.admin-card button { width: 100%; margin: 10px 0 20px; }
.admin-card > a { font-size: 13px; font-weight: 600; color: var(--purple); }
.admin-card > a:hover { color: #3d1250; }
.error { background: #ffe2e2; color: #8c1823; padding: 10px; border-radius: 5px; }
.dashboard { max-width: 960px; margin: auto; }
.dashboard h1 { font: 600 38px var(--font); }
.dash-panel { background: #fffaf3; color: #35113f; padding: 30px; border-radius: 14px; margin: 18px 0; }
.dash-panel h2 { margin-top: 0; }
.dash-panel p { line-height: 1.6; }
.status, .notice { padding: 12px; background: #f1e3f5; color: #35113f; border-radius: 8px; }
.toggle-row { display: flex; align-items: center; gap: 12px; margin: 22px 0; font-weight: 700; }
.toggle-row input { width: 22px; height: 22px; accent-color: #682b80; }

/* Admin shell: top bar, hamburger menu on the left */
.admin-shell { padding: 0 0 40px; }
.admin-shell .dashboard { padding: 0 20px; }
.admin-bar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: rgba(29, 7, 51, .92);
  border-bottom: 1px solid rgba(233, 185, 95, .5);
}
.admin-menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  cursor: pointer;
}
.admin-menu-toggle span { display: block; height: 2px; border-radius: 2px; background: #fff; }
.admin-menu-toggle:hover { background: rgba(255, 255, 255, .2); }
.admin-menu-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.admin-bar-logo { width: 150px; height: auto; }
.admin-bar-links { margin-left: auto; font-size: 14px; white-space: nowrap; }
.admin-bar-links a { font-weight: 600; color: var(--gold); }
.admin-bar-links a:hover { color: #ffe2a1; }
.admin-menu-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(10, 2, 20, .5); }
.admin-menu-backdrop[hidden] { display: none; }
.admin-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: min(290px, 85vw);
  padding: 16px 14px;
  background: #fffaf3;
  color: #35113f;
  box-shadow: 12px 0 40px rgba(10, 2, 20, .35);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .2s ease, visibility .2s;
}
.admin-menu.open { transform: translateX(0); visibility: visible; }
.admin-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 4px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8a6a92;
}
.admin-menu-close { border: 0; background: none; font-size: 26px; line-height: 1; color: #35113f; cursor: pointer; }
.admin-menu-link { display: block; padding: 12px 14px; border-radius: 8px; font-weight: 600; }
.admin-menu-link:hover, .admin-menu-link:focus-visible { background: #f6eef9; outline: none; }
.admin-menu-link.is-active { background: #efe2f5; color: var(--purple); }

/* Admin tables and forms */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: #8a6a92; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { padding: 10px 12px; border-bottom: 2px solid #e6dcea; text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #8a6a92; }
.admin-table td { padding: 12px; border-bottom: 1px solid #efe6f2; vertical-align: middle; }
.admin-country { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; white-space: nowrap; }
.admin-country small { color: #8a6a92; font-weight: 500; }
.admin-row-actions { text-align: right; white-space: nowrap; }
.admin-row-actions .plain-button + .plain-button { margin-left: 6px; }
.plain-button, .danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border: 1px solid #b7a6bd;
  border-radius: 30px;
  background: #fff;
  color: #35113f;
  font-weight: 600;
  cursor: pointer;
}
.plain-button:hover { background: #f6eef9; }
.plain-button.small { padding: 6px 14px; font-size: 13px; }
.plain-button.danger { color: #8c1823; border-color: #e3b5ba; }
.plain-button.danger:hover { background: #ffe2e2; }
.danger-button { background: #8c1823; border-color: #8c1823; color: #fff; }
.danger-button:hover { background: #6f1019; }
.confirm-panel { border: 2px solid #e3b5ba; }
.admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.admin-form { display: grid; gap: 8px; }
.admin-fieldset { margin: 0; padding: 16px 18px 4px; border: 1px solid #e6dcea; border-radius: 10px; }
.admin-fieldset legend { padding: 0 6px; font-weight: 700; }
.admin-field { display: grid; align-content: start; gap: 6px; margin-bottom: 14px; }
.admin-field label { font-size: 13px; font-weight: 700; }
.admin-field input, .admin-field select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #b7a6bd;
  border-radius: 7px;
  background: #fff;
  color: #35113f;
  font-size: 15px;
}
.admin-field input:focus, .admin-field select:focus { outline: 2px solid #b98ad0; outline-offset: 1px; border-color: #8a5aa3; }
.admin-field small { font-size: 12px; color: #7a6280; }
.admin-field.has-error input, .admin-field.has-error select { border-color: #c0394a; }
.admin-field .field-error { color: #8c1823; font-weight: 600; }
.admin-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.admin-toggle { margin: 4px 0 0; }
.admin-hint { margin: 0 0 10px; font-size: 12px; color: #7a6280; }
@media (max-width: 600px) {
  .admin-bar-logo { width: 110px; }
  .admin-bar-links { font-size: 12px; }
  .admin-field-pair { grid-template-columns: 1fr; }
  .dash-panel { padding: 22px 18px; }
}

/* =========================================================================
   Tablet — up to 1100px
   ========================================================================= */
@media (max-width: 1100px) {
  .header-contact a { font-size: 24px; }
  .nav-links a { padding: 12px 8px; font-size: 13px; }
}

/* =========================================================================
   Mobile — up to 760px
   ========================================================================= */
@media (max-width: 760px) {
  .header-inner {
    min-height: 0;
    padding: 10px 18px;
    gap: 8px 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand picker" "phone phone";
  }
  .brand img { width: 190px; }
  .header-contact { justify-self: center; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 8px; }
  .header-contact a { font-size: 17px; }
  .header-contact small { font-size: 11px; }
  .header-contact small:last-child { display: none; }
  .country-toggle { gap: 8px; padding: 6px 10px; font-size: 13px; }
  .country-menu { min-width: 230px; }
  .country-option { padding: 10px 12px; font-size: 15px; }

  .nav-inner { padding: 8px 16px; }
  .nav-toggle { display: block; min-height: 44px; padding: 0 10px; border: 0; background: none; color: #fff; font-size: 16px; }
  .nav-links { display: none; order: 3; width: 100%; flex-direction: column; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px; font-size: 15px; }
  .nav-actions { gap: 8px; }
  .nav-actions .gold-button, .nav-actions .outline-button { min-height: 40px; padding: 0 14px; font-size: 13px; }

  .hero { padding-top: 16px; }
  .hero picture { max-width: 420px; margin: 0 auto; }
  .hero-content { text-align: center; align-items: center; }
  .hero p { font-size: 16px; }
  .hero-actions, .hero-points { justify-content: center; }
  .eyebrow { letter-spacing: 2px; font-size: 11px; }

  .services { padding: 40px 16px; }
  .services h2, .welcome h2 { font-size: 28px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .service { padding: 20px 12px; }
  .service img { width: 64px; height: 64px; }
  .service h3 { font-size: 16px; }

  .welcome { padding: 44px 20px 52px; }
  .member-page { padding: 28px 14px 48px; }
  .member-phone { grid-template-columns: 1fr; }
  .inner-hero h1 { font-size: 36px; }
  .footer-bottom { flex-direction: column; gap: 10px; }
}

@media (max-width: 410px) {
  .header-contact small { display: none; }
  .header-contact a { font-size: 15px; }
  .brand img { width: 160px; }
}