:root {
  --bg: #07080d;
  --bg-2: #10131b;
  --card: rgba(18, 21, 31, 0.82);
  --line: rgba(144, 169, 181, 0.18);
  --line-hot: rgba(101, 211, 198, 0.46);
  --text: #f3eee7;
  --muted: rgba(243, 238, 231, 0.62);
  --faint: rgba(243, 238, 231, 0.34);
  --cyan: #65d3c6;
  --amber: #f0b86a;
  --rose: #e47f8d;
  --ink: #090b10;
  --serif: "Fraunces", Georgia, serif;
  --sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Aura AI companion */
.aura-chat-launcher{position:fixed;right:28px;bottom:26px;z-index:1200;width:72px;height:72px;border:1px solid rgba(218,169,92,.45);border-radius:50%;background:rgba(10,7,15,.9);box-shadow:0 0 0 8px rgba(218,169,92,.06),0 12px 42px rgba(0,0,0,.5);display:grid;place-items:center;cursor:pointer;transition:.25s ease}.aura-chat-launcher:hover{transform:translateY(-3px);box-shadow:0 0 0 10px rgba(218,169,92,.08),0 0 34px rgba(211,151,66,.18)}.aura-chat-launcher__orb{width:46px;height:46px;border:1px solid rgba(187,121,235,.48);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(88,48,116,.48),rgba(11,8,18,.94) 68%)}.aura-chat-launcher img{width:28px;height:28px;object-fit:contain;border-radius:50%}.aura-chat{position:fixed;right:24px;bottom:112px;z-index:1199;width:min(430px,calc(100vw - 32px));height:min(690px,calc(100vh - 140px));color:#e9dfd5;background:linear-gradient(180deg,rgba(11,7,16,.985),rgba(5,4,10,.99));border:1px solid rgba(196,144,74,.25);border-radius:18px;box-shadow:0 28px 90px rgba(0,0,0,.62);overflow:hidden;font-family:Inter,sans-serif}.aura-chat[hidden]{display:none}.aura-chat__topbar{height:56px;padding:0 16px 0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(189,143,85,.16);color:#ba8e61;font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase}.aura-chat__topbar div{display:flex;gap:4px}.aura-chat__topbar button,.aura-chat__persona-head button{border:0;background:transparent;color:#9d938b;font-size:25px;line-height:1;cursor:pointer;padding:8px}.aura-chat__chooser{height:calc(100% - 56px);padding:31px 24px 22px;overflow:auto;text-align:center}.aura-chat__kicker{margin:0 0 10px;color:#aa744e;font-size:9px;font-weight:800;letter-spacing:.25em;text-transform:uppercase}.aura-chat__chooser h2{margin:0;color:#f0dfc8;font:italic 600 28px/1.15 Fraunces,serif}.aura-chat__chooser>p:not(.aura-chat__kicker){margin:12px auto 25px;max-width:340px;color:#887c78;font:italic 14px/1.55 Fraunces,serif}.aura-chat__personas{display:grid;gap:14px}.aura-chat__personas button{width:100%;min-height:106px;padding:17px 15px;display:grid;grid-template-columns:50px 1fr 25px;gap:13px;align-items:center;text-align:left;color:inherit;background:linear-gradient(110deg,rgba(17,10,23,.92),rgba(11,8,17,.9));border:1px solid rgba(138,103,140,.27);border-radius:17px;cursor:pointer;transition:.2s}.aura-chat__personas button:hover{border-color:rgba(206,153,88,.5);transform:translateX(2px);background:linear-gradient(110deg,rgba(30,16,35,.96),rgba(13,9,20,.92))}.aura-chat__persona-orb{width:46px;height:46px;border:1px solid rgba(160,108,194,.28);border-radius:50%;display:grid;place-items:center;color:#d59c58;background:radial-gradient(circle,rgba(86,46,105,.55),rgba(13,8,20,.9) 68%);font-size:19px}.aura-chat__personas small,.aura-chat__persona-head small{display:block;color:#976d58;font-size:8px;font-weight:800;line-height:1.3;letter-spacing:.18em;text-transform:uppercase}.aura-chat__personas strong{display:block;margin:5px 0 4px;color:#ebd6b9;font:italic 600 19px/1.1 Fraunces,serif}.aura-chat__personas em{display:block;color:#978b87;font:italic 12px/1.45 Fraunces,serif}.aura-chat__personas b{color:#7a5c4f;font-size:20px;font-weight:400}.aura-chat__chooser>small{display:block;margin-top:19px;color:#665d5d;font-size:9px;letter-spacing:.04em}.aura-chat__conversation{height:calc(100% - 56px);display:grid;grid-template-rows:auto 1fr auto}.aura-chat__conversation[hidden]{display:none}.aura-chat__persona-head{min-height:70px;padding:9px 15px;display:flex;gap:11px;align-items:center;border-bottom:1px solid rgba(166,119,75,.13)}.aura-chat__persona-symbol{width:38px;height:38px;flex:0 0 auto;border:1px solid rgba(174,117,207,.28);border-radius:50%;display:grid;place-items:center;color:#d79c58;background:#120b1c}.aura-chat__persona-head strong{display:block;margin-top:3px;color:#e8d2b8;font:italic 600 16px Fraunces,serif}.aura-chat__messages{padding:20px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;scrollbar-color:#4b304b transparent}.aura-chat__message{max-width:87%;padding:12px 14px;border-radius:15px;white-space:pre-wrap;font-size:13px;line-height:1.58}.aura-chat__message--assistant{align-self:flex-start;color:#cfc3bb;background:rgba(28,19,32,.88);border:1px solid rgba(132,94,137,.23);border-bottom-left-radius:4px}.aura-chat__message--user{align-self:flex-end;color:#f2dfc3;background:linear-gradient(135deg,rgba(113,69,44,.65),rgba(66,39,63,.68));border:1px solid rgba(206,153,90,.24);border-bottom-right-radius:4px}.aura-chat__message.is-pending{color:#8d8080;font-style:italic}.aura-chat__message.is-error{color:#d79d9d}.aura-chat__form{padding:12px;display:flex;gap:9px;align-items:flex-end;border-top:1px solid rgba(166,119,75,.15);background:rgba(6,4,10,.95)}.aura-chat__form label{flex:1}.aura-chat__form textarea{box-sizing:border-box;width:100%;max-height:120px;resize:none;border:1px solid rgba(130,94,135,.3);border-radius:14px;background:#100b17;color:#e8ddd5;padding:12px 14px;outline:none;font:13px/1.45 Inter,sans-serif}.aura-chat__form textarea:focus{border-color:rgba(208,151,81,.5)}.aura-chat__form button{width:43px;height:43px;flex:0 0 auto;border:1px solid rgba(208,151,81,.44);border-radius:50%;color:#efc98e;background:linear-gradient(145deg,#3b2342,#231323);font-size:20px;cursor:pointer}.aura-chat__form button:disabled{opacity:.45;cursor:wait}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(max-width:600px){.aura-chat-launcher{right:17px;bottom:18px;width:64px;height:64px}.aura-chat{inset:8px;width:auto;height:auto;max-height:none;border-radius:14px}.aura-chat-open{overflow:hidden}.aura-chat-open .aura-chat-launcher{display:none}.aura-chat__chooser{padding:28px 22px 20px}.aura-chat__personas button{min-height:104px}}

/* Foundation refresh: shared navigation, content pages and account surfaces. */
[hidden] { display: none !important; }

.site-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(9, 11, 16, 0.78);
  font-size: 1.25rem;
  cursor: pointer;
}

.home-page .page-shell,
.content-page .page-shell { min-height: 100vh; }

.home-hero,
.service-hub,
.home-trust,
.account-shell,
.contact-shell,
.not-found {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 64px;
  align-items: center;
  min-height: min(640px, 68vh);
  padding: 70px 0 56px;
}

.home-hero__copy h1 {
  margin: 14px 0 18px;
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(4.5rem, 10vw, 8.5rem);
  font-weight: 500;
  line-height: 0.88;
}

.home-hero__copy > p:last-child {
  max-width: 700px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.8;
}

.home-hero__signal {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(240, 184, 106, 0.34);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 184, 106, 0.13), rgba(20, 12, 25, 0.62) 58%, transparent 60%);
  box-shadow: 0 0 72px rgba(102, 79, 158, 0.14);
}

.home-hero__signal img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 0 28px rgba(240, 184, 106, 0.14));
}

.service-hub { padding: 72px 0 88px; }
.service-hub > header { max-width: 670px; margin-bottom: 36px; }
.service-hub h2,
.home-trust h2,
.account-shell h1,
.contact-shell h1 { margin: 8px 0 0; color: var(--text); font: 500 clamp(2.2rem, 5vw, 4.2rem)/1.05 var(--serif); }
.service-hub__grid { border-top: 1px solid var(--line); }
.service-entry {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 32px;
  gap: 22px;
  align-items: center;
  padding: 28px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  transition: background .2s ease, padding .2s ease;
}
.service-entry:hover { padding-inline: 20px; background: rgba(255, 255, 255, .035); }
.service-entry > span { color: var(--amber); font: 500 1.1rem var(--serif); }
.service-entry strong { font: 500 clamp(1.55rem, 3vw, 2.3rem) var(--serif); }
.service-entry p { margin: 7px 0 0; color: var(--muted); line-height: 1.65; }
.service-entry b { font-size: 1.5rem; font-weight: 400; }

.home-trust {
  display: grid;
  grid-template-columns: 1fr 1.25fr auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 90px;
  padding: 36px 0;
  border-block: 1px solid var(--line);
}
.home-trust p { margin: 0; color: var(--muted); line-height: 1.75; }
.home-trust a { color: var(--amber); white-space: nowrap; }

.daily-overview {
  width: min(1080px, 100%);
  margin: 26px auto 76px;
  padding: 30px;
  border: 1px solid rgba(144, 169, 181, .2);
  border-radius: 8px;
  background: rgba(7, 8, 15, .76);
  backdrop-filter: blur(18px);
}
.daily-calendar-section { width: min(1080px, 100%); margin: 0 auto 92px; scroll-margin-top: 24px; }
.daily-calendar-section__header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 46px; align-items: end; margin-bottom: 30px; padding-top: 24px; }
.daily-calendar-section__header > div { max-width: 650px; }
.daily-calendar-section__header h2 { margin: 7px 0 10px; color: var(--text); font: 500 clamp(2.4rem, 6vw, 4.5rem)/1 var(--serif); }
.daily-calendar-section__header > div > p:last-child { margin: 0; color: var(--muted); line-height: 1.7; }
.daily-calendar-section .calendar-day,
.daily-calendar-section .month-calendar { width: 100%; }
.daily-calendar-section .calendar-day { margin-bottom: 12px; }
.daily-calendar-section .month-calendar { padding-block: 58px; }
.daily-calendar-method { border-block: 1px solid var(--line); padding: 20px 0; color: var(--muted); }
.daily-calendar-method summary { color: var(--amber); font-weight: 750; cursor: pointer; }
.daily-calendar-method p { max-width: 820px; margin: 14px 0 0; line-height: 1.75; }
.daily-overview__header { display: flex; justify-content: space-between; gap: 28px; align-items: end; margin-bottom: 24px; }
.daily-overview__header h2 { margin: 7px 0 0; color: var(--text); font: 500 clamp(1.8rem, 4vw, 3rem)/1.05 var(--serif); }
.daily-overview__header a { color: var(--amber); font-weight: 750; }
.daily-overview__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.daily-overview__grid article { display: grid; min-height: 148px; align-content: start; gap: 10px; padding: 22px; border-right: 1px solid var(--line); }
.daily-overview__grid article:last-child { border-right: 0; }
.daily-overview__grid span,
.daily-personal label span { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.daily-overview__grid strong { color: var(--text); font: 500 1.65rem var(--serif); }
.daily-overview__grid small { color: var(--muted); line-height: 1.55; }
.daily-zodiac { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0; margin-top: 26px; border: 1px solid rgba(101, 216, 205, .2); border-radius: 7px; overflow: hidden; text-align: left; background: rgba(8, 10, 18, .7); }
.daily-zodiac > header { display: flex; gap: 18px; align-items: center; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.daily-zodiac__symbol { display: grid; flex: 0 0 62px; width: 62px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(101, 216, 205, .4); border-radius: 50%; color: var(--cyan); font-size: 1.8rem; }
.daily-zodiac h3 { margin: 5px 0 3px; color: var(--text); font: 500 1.65rem var(--serif); }
.daily-zodiac header small { color: var(--muted); }
.daily-zodiac__emotion { padding: 24px; border-bottom: 1px solid var(--line); }
.daily-zodiac__emotion span,
.daily-zodiac__guidance article > span { color: var(--cyan); font-size: .67rem; font-weight: 900; text-transform: uppercase; }
.daily-zodiac__emotion p { margin: 9px 0 0; color: rgba(243, 238, 231, .82); line-height: 1.65; }
.daily-zodiac__guidance { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
.daily-zodiac__guidance article { padding: 23px 24px; }
.daily-zodiac__guidance article + article { border-left: 1px solid var(--line); }
.daily-zodiac__guidance article:last-child > span { color: #ff9da6; }
.daily-zodiac__guidance ul { display: grid; gap: 9px; margin: 13px 0 0; padding: 0; list-style: none; }
.daily-zodiac__guidance li { position: relative; padding-left: 18px; color: rgba(243, 238, 231, .76); line-height: 1.5; }
.daily-zodiac__guidance li::before { position: absolute; top: .65em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); content: ""; }
.daily-zodiac__guidance article:last-child li::before { background: #ff7f8d; }
.daily-zodiac__note { grid-column: 1 / -1; margin: 0; border-top: 1px solid var(--line); padding: 14px 24px; color: rgba(243, 238, 231, .48); font-size: .72rem; line-height: 1.5; }
.daily-personal { display: grid; grid-template-columns: minmax(0, 1fr) auto 160px; gap: 28px; align-items: center; padding-top: 26px; }
.daily-personal h3 { margin: 5px 0 6px; color: var(--text); font: 500 1.45rem var(--serif); }
.daily-personal p { margin: 0; color: var(--muted); line-height: 1.55; }
.daily-personal form { display: flex; gap: 9px; align-items: end; }
.daily-personal label { display: grid; gap: 7px; }
.daily-personal input { min-height: 44px; border: 1px solid var(--line); border-radius: 6px; padding: 0 12px; color: var(--text); background: rgba(3, 4, 10, .8); font: inherit; }
.daily-personal button { min-height: 44px; border: 1px solid rgba(240, 184, 106, .42); border-radius: 999px; padding: 0 17px; color: #120d12; background: var(--amber); font-weight: 800; cursor: pointer; }
.daily-personal .daily-personal__clear { color: var(--muted); background: transparent; }
.daily-personal output { display: grid; align-content: center; min-height: 106px; padding-left: 26px; border-left: 1px solid var(--line); }
.daily-personal output span { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.daily-personal output strong { color: var(--amber); font: 500 2.8rem var(--serif); }
.daily-personal output small { color: var(--muted); line-height: 1.4; }

.calendar-hero,
.calendar-day,
.month-calendar,
.calendar-method { position: relative; z-index: 2; width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.calendar-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 60px; align-items: end; padding: 86px 0 54px; }
.calendar-hero > div { max-width: 720px; }
.calendar-hero h1 { margin: 10px 0 18px; color: var(--text); font: 500 clamp(3.5rem, 8vw, 6.8rem)/.95 var(--serif); }
.calendar-hero > div > p:last-child { max-width: 660px; color: var(--muted); line-height: 1.75; }
.calendar-date-control { display: flex; gap: 9px; align-items: end; padding-bottom: 4px; }
.calendar-date-control label { display: grid; gap: 7px; }
.calendar-date-control label span { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.calendar-date-control input,
.calendar-date-control button { min-height: 46px; border: 1px solid var(--line); border-radius: 6px; padding: 0 14px; color: var(--text); background: rgba(7, 8, 15, .8); font: inherit; }
.calendar-date-control button { border-radius: 999px; color: var(--amber); cursor: pointer; }

.calendar-day { margin-bottom: 72px; padding: 32px; border: 1px solid rgba(240, 184, 106, .28); border-radius: 8px; background: rgba(8, 7, 14, .8); backdrop-filter: blur(18px); }
.calendar-day > header { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding-bottom: 26px; }
.calendar-day h2 { margin: 7px 0 0; color: var(--text); font: 500 clamp(2rem, 5vw, 3.5rem) var(--serif); }
.calendar-day > header > strong { display: grid; width: 98px; aspect-ratio: 1; place-items: center; border: 1px solid var(--line-hot); border-radius: 50%; color: var(--amber); font: 500 2.4rem var(--serif); }
.calendar-day__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.calendar-day__facts article { display: grid; min-height: 150px; align-content: start; gap: 9px; padding: 23px; border-right: 1px solid var(--line); }
.calendar-day__facts article:last-child { border-right: 0; }
.calendar-day__facts span { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.calendar-day__facts strong { color: var(--text); font: 500 1.45rem var(--serif); }
.calendar-day__facts small { color: var(--muted); line-height: 1.5; }
.calendar-day__facts [data-tone="good"] strong { color: #8fd9ad; }
.calendar-day__facts [data-tone="caution"] strong { color: #ec9da3; }
.calendar-advice { display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(210px, .75fr); gap: 28px; align-items: start; margin-top: 24px; border: 1px solid rgba(101, 216, 205, .2); border-radius: 7px; padding: 24px; text-align: left; background: rgba(11, 13, 21, .72); }
.calendar-advice h3 { margin: 5px 0 0; color: var(--text); font: 500 1.5rem var(--serif); }
.calendar-advice ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.calendar-advice li { position: relative; padding-left: 22px; color: rgba(243, 238, 231, .82); line-height: 1.55; }
.calendar-advice li::before { position: absolute; top: .62em; left: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px rgba(101, 216, 205, .6); content: ""; }
.calendar-advice__avoid { display: grid; gap: 8px; margin: 0; border-left: 1px solid var(--line); padding-left: 24px; }
.calendar-advice__avoid span { color: #ff9da6; font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.calendar-advice__avoid strong { color: rgba(243, 238, 231, .78); font-size: .88rem; line-height: 1.55; }
.calendar-hours { display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: center; padding-top: 26px; }
.calendar-hours h3 { margin: 5px 0 0; color: var(--text); font: 500 1.6rem var(--serif); }
.calendar-hours > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; }
.calendar-hours span { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; color: rgba(243, 238, 231, .76); font-size: .78rem; }

.month-calendar { padding: 68px 0 82px; }
.month-calendar > header { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 20px; }
.month-calendar h2 { margin: 6px 0 0; color: var(--text); font: 500 clamp(2rem, 5vw, 3.2rem) var(--serif); }
.month-calendar > header > div:last-child { display: flex; gap: 8px; }
.month-calendar > header button { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: rgba(7, 8, 15, .78); cursor: pointer; }
.calendar-tabs { display: flex; gap: 8px; margin: 26px 0 16px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: thin; }
.calendar-tabs button { flex: 0 0 auto; min-height: 42px; width: auto; border-radius: 6px; padding: 0 17px; color: rgba(243, 238, 231, .68); font-size: .78rem; font-weight: 800; background: rgba(8, 9, 17, .82); }
.calendar-tabs button:hover { border-color: rgba(101, 216, 205, .45); color: var(--text); }
.calendar-tabs button.is-active { border-color: rgba(101, 216, 205, .68); color: #07100f; background: #65d8cd; box-shadow: 0 8px 30px rgba(101, 216, 205, .16); }
.calendar-mode-summary { display: grid; grid-template-columns: minmax(190px, .55fr) 1fr; gap: 26px; align-items: center; margin-bottom: 18px; border: 1px solid rgba(144, 169, 181, .22); border-radius: 7px; padding: 18px 20px; background: rgba(11, 12, 23, .76); }
.calendar-mode-summary div { display: grid; gap: 4px; }
.calendar-mode-summary span { color: var(--cyan); font-size: .65rem; font-weight: 850; text-transform: uppercase; }
.calendar-mode-summary strong { color: var(--text); font: 500 1.35rem var(--serif); }
.calendar-mode-summary p { margin: 0; color: var(--muted); line-height: 1.55; }
.month-calendar__legend { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; color: var(--muted); font-size: .75rem; }
.month-calendar__legend span { display: inline-flex; gap: 7px; align-items: center; }
.month-calendar__legend i { width: 8px; height: 8px; border-radius: 50%; background: rgba(243, 238, 231, .32); }
.month-calendar__legend .is-good { background: #78c99a; }
.month-calendar__legend .is-caution { background: #dc7d86; }
.month-calendar__weekdays,
.month-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-calendar__weekdays { border: 1px solid var(--line); border-bottom: 0; }
.month-calendar__weekdays span { padding: 12px; color: var(--muted); font-size: .72rem; font-weight: 800; text-align: center; }
.month-calendar__grid { border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.month-day { position: relative; display: grid; min-height: 108px; align-content: space-between; justify-items: start; gap: 7px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 13px; color: var(--text); background: rgba(7, 8, 15, .74); cursor: pointer; overflow: hidden; }
.month-day::before { position: absolute; inset: 0; opacity: .13; content: ""; pointer-events: none; }
.month-day::after { position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: rgba(243, 238, 231, .3); content: ""; }
.month-day--good { border-color: rgba(74, 222, 128, .32); }
.month-day--good::before { background: linear-gradient(145deg, #1fb96a, transparent 72%); }
.month-day--good::after { background: #4ade80; box-shadow: 0 0 12px rgba(74, 222, 128, .8); }
.month-day--caution { border-color: rgba(251, 89, 104, .32); }
.month-day--caution::before { background: linear-gradient(145deg, #e52e45, transparent 72%); }
.month-day--caution::after { background: #fb5968; box-shadow: 0 0 12px rgba(251, 89, 104, .72); }
.month-day strong { font: 500 1.35rem var(--serif); }
.month-day small { color: var(--muted); }
.month-day__status { position: relative; z-index: 1; display: block; width: 100%; color: rgba(243, 238, 231, .78); font-size: .64rem; font-weight: 900; line-height: 1.15; text-transform: uppercase; }
.month-day--good .month-day__status { color: #8df0b2; }
.month-day--caution .month-day__status { color: #ff9da6; }
.month-day:hover { background: rgba(255, 255, 255, .05); }
.month-day.is-selected { outline: 2px solid var(--amber); outline-offset: -2px; background: rgba(240, 184, 106, .08); }
.month-day.is-today strong { color: var(--cyan); }
.month-day--empty { cursor: default; background: rgba(2, 3, 7, .4); }
.month-day--empty::after { display: none; }

.calendar-method { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; margin-bottom: 90px; padding-block: 34px; border-block: 1px solid var(--line); }
.calendar-method h2 { margin: 7px 0 0; color: var(--text); font: 500 2.2rem var(--serif); }
.calendar-method p { margin: 0 0 16px; color: var(--muted); line-height: 1.75; }

@media (max-width: 900px) {
  .daily-overview__grid,
  .calendar-day__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-overview__grid article:nth-child(2),
  .calendar-day__facts article:nth-child(2) { border-right: 0; }
  .daily-overview__grid article:nth-child(-n+2),
  .calendar-day__facts article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .daily-personal { grid-template-columns: 1fr; }
  .daily-zodiac { grid-template-columns: 1fr; }
  .daily-zodiac > header { border-right: 0; }
  .daily-zodiac__guidance { grid-column: auto; }
  .daily-zodiac__note { grid-column: auto; }
  .daily-personal output { padding: 18px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .calendar-hero { grid-template-columns: 1fr; gap: 26px; }
  .daily-calendar-section__header { grid-template-columns: 1fr; gap: 24px; }
  .calendar-advice { grid-template-columns: 1fr 1fr; }
  .calendar-advice__heading { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .daily-overview { margin-bottom: 54px; padding: 20px; }
  .daily-calendar-section { margin-bottom: 68px; }
  .daily-overview__header,
  .calendar-day > header,
  .month-calendar > header { align-items: start; flex-direction: column; }
  .daily-overview__grid,
  .calendar-day__facts { grid-template-columns: 1fr; }
  .daily-overview__grid article,
  .daily-overview__grid article:nth-child(2),
  .calendar-day__facts article,
  .calendar-day__facts article:nth-child(2) { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .daily-overview__grid article:last-child,
  .calendar-day__facts article:last-child { border-bottom: 0; }
  .daily-personal form { align-items: stretch; flex-direction: column; }
  .daily-zodiac__guidance { grid-template-columns: 1fr; }
  .daily-zodiac__guidance article + article { border-top: 1px solid var(--line); border-left: 0; }
  .calendar-hero,
  .calendar-day,
  .month-calendar,
  .calendar-method { width: min(100% - 28px, 1120px); }
  .calendar-hero { padding-top: 58px; }
  .calendar-date-control { align-items: stretch; flex-direction: column; }
  .calendar-day { padding: 20px; }
  .calendar-hours,
  .calendar-method { grid-template-columns: 1fr; gap: 22px; }
  .calendar-advice { grid-template-columns: 1fr; padding: 20px; }
  .calendar-advice__heading { grid-column: auto; }
  .calendar-advice__avoid { border-top: 1px solid var(--line); border-left: 0; padding: 17px 0 0; }
  .month-calendar__weekdays span { padding: 9px 3px; }
  .calendar-mode-summary { grid-template-columns: 1fr; gap: 8px; }
  .calendar-tabs { margin-inline: -14px; padding-inline: 14px; }
  .month-day { min-height: 82px; padding: 8px 5px; }
  .month-day::after { top: 6px; right: 6px; width: 5px; height: 5px; }
  .month-day strong { font-size: 1.05rem; }
  .month-day small { font-size: .62rem; }
  .month-day__status { font-size: .5rem; }
}

.blog-tools { display: grid; grid-template-columns: minmax(240px, 1fr) 190px; gap: 12px; margin-top: 30px; }
.blog-tools label,
.account-card label,
.contact-form label { display: grid; gap: 8px; }
.blog-tools label > span,
.account-card label > span,
.contact-form label > span { color: rgba(243, 238, 231, .62); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.blog-tools input,
.blog-tools select,
.account-card input,
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 15px;
  color: var(--text);
  background: rgba(5, 6, 12, .68);
  font: inherit;
}
.contact-form textarea { min-height: 160px; padding-block: 14px; resize: vertical; }
.blog-empty-state { grid-column: 1 / -1; display: grid; gap: 8px; padding: 54px; border: 1px solid var(--line); text-align: center; }
.blog-empty-state span { color: var(--muted); }

.article-breadcrumb,
.article-meta,
.article-toc,
.article-related { width: min(100%, 780px); margin-inline: auto; }
.article-breadcrumb { margin-bottom: 30px; color: var(--muted); font-size: .82rem; }
.article-breadcrumb a { color: var(--amber); }
.article-meta { display: flex; gap: 12px 24px; flex-wrap: wrap; margin-top: 22px; color: var(--muted); font-size: .84rem; }
.article-toc { margin-block: 30px 42px; padding: 24px; border-left: 2px solid var(--amber); background: rgba(9, 7, 14, .72); }
.article-toc strong { display: block; margin-bottom: 12px; }
.article-toc ol { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
.article-toc a { color: var(--muted); }
.seo-article__body h2,
.seo-article__body h3 { scroll-margin-top: 90px; }
.seo-article__body blockquote { margin: 30px 0; padding: 20px 24px; border-left: 2px solid var(--amber); color: var(--text); background: rgba(240, 184, 106, .06); }
.article-related { margin-top: 54px; padding-top: 34px; border-top: 1px solid var(--line); }
.article-related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.article-related a { display: grid; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: rgba(8, 7, 13, .58); }
.article-related span { color: var(--muted); font-size: .8rem; }

.account-shell,
.contact-shell { padding: 78px 0 100px; }
.account-shell > header,
.contact-shell > header { max-width: 720px; margin-bottom: 34px; }
.account-shell > header > p:last-child,
.contact-shell > header > p:last-child { color: var(--muted); line-height: 1.7; }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.account-card,
.account-guest,
.contact-form { padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: rgba(9, 7, 14, .8); backdrop-filter: blur(14px); }
.account-card { display: grid; align-content: start; gap: 18px; }
.account-card h2,
.account-guest h2 { margin: 4px 0 0; color: var(--text); font: 500 1.8rem var(--serif); }
.account-card p,
.account-guest p { margin: 0; color: var(--muted); line-height: 1.65; }
.account-card button,
.account-guest button,
.contact-form button { justify-self: start; min-height: 44px; border: 1px solid rgba(240, 184, 106, .45); border-radius: 999px; padding: 0 20px; color: #120d12; background: var(--amber); font-weight: 800; cursor: pointer; }
.account-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.account-actions a { color: var(--amber); }
.account-card .button-secondary { color: var(--text); background: transparent; }
.account-card--danger { border-color: rgba(222, 105, 112, .4); }
.account-card--danger button { color: #fff; background: #9d3d48; }
.account-status { min-height: 1.25em; color: #89cfa8 !important; font-size: .85rem; }
.account-status.is-error { color: #ee8b91 !important; }
.contact-shell { display: grid; grid-template-columns: minmax(0, .75fr) minmax(360px, 1fr); gap: 70px; align-items: start; }
.contact-form { display: grid; gap: 18px; }
#contactStatus { min-height: 1.3em; margin: 0; color: var(--muted); }

.legal-article section { max-width: 780px; margin-inline: auto; padding: 30px 0; border-top: 1px solid var(--line); }
.legal-article section h2 { margin: 0 0 12px; color: var(--text); font: 500 1.65rem var(--serif); }
.legal-article section p { color: var(--muted); line-height: 1.8; }
.article-action { color: var(--amber); font-weight: 700; }

.not-found-page { display: grid; min-height: 100vh; place-items: center; }
.not-found { display: grid; max-width: 620px; justify-items: center; gap: 16px; text-align: center; }
.not-found > span { color: var(--amber); font: 500 clamp(5rem, 18vw, 10rem)/.8 var(--serif); }
.not-found h1 { margin: 12px 0 0; font-size: clamp(2rem, 6vw, 3.5rem); }
.not-found p { color: var(--muted); }
.not-found div { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.not-found a { padding: 12px 18px; border: 1px solid var(--line-hot); border-radius: 999px; color: var(--ink); }

@media (max-width: 980px) {
  .home-hero { grid-template-columns: minmax(0, 1fr) 220px; gap: 34px; }
  .home-trust { grid-template-columns: 1fr 1fr; }
  .home-trust a { grid-column: 2; }
}

@media (max-width: 760px) {
  .site-header,
  .content-page .site-header {
    grid-template-columns: 1fr auto 44px;
    width: min(100% - 28px, 1180px);
    min-height: 60px;
    gap: 10px;
    justify-items: stretch;
  }
  .site-header .brand { justify-self: start; }
  .site-header .brand__mark { width: 40px; height: 40px; border-radius: 8px; }
  .site-header .brand strong { font-size: .92rem; }
  .site-header .brand small { font-size: .58rem; }
  .site-menu-toggle { display: grid; justify-self: end; }
  .site-header .language-switch { grid-column: 2; grid-row: 1; }
  .site-header .site-menu-toggle { grid-column: 3; grid-row: 1; }
  .site-header .main-nav,
  .site-header .auth-nav { display: none; grid-column: 1 / -1; width: 100%; }
  .site-header--open .main-nav { display: grid; gap: 2px; padding: 8px; border-radius: 8px; overflow: visible; }
  .site-header--open .main-nav a { width: 100%; justify-content: flex-start; border-radius: 6px; }
  .site-header--open .auth-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 8px; }
  .site-header--open .auth-nav > * { width: 100%; max-width: none; }

  .home-hero { grid-template-columns: 1fr; min-height: auto; padding: 72px 0 40px; }
  .home-hero__copy h1 { font-size: clamp(4rem, 22vw, 6rem); }
  .home-hero__signal { display: none; }
  .service-hub { padding: 54px 0 66px; }
  .service-entry { grid-template-columns: 38px minmax(0, 1fr) 22px; gap: 12px; padding-block: 22px; }
  .home-trust { grid-template-columns: 1fr; gap: 20px; align-items: start; margin-bottom: 64px; }
  .home-trust a { grid-column: auto; }
  .blog-tools { grid-template-columns: 1fr; }
  .article-related__grid,
  .account-grid,
  .contact-shell { grid-template-columns: 1fr; }
  .contact-shell { gap: 28px; }
  .account-shell,
  .contact-shell { padding: 48px 0 70px; }
  .account-card,
  .account-guest,
  .contact-form { padding: 22px; }
  .article-meta { display: grid; gap: 6px; }
  .tarot-page h1,
  .content-page h1,
  body:not(.home-page) h1 { font-size: clamp(2.35rem, 12vw, 3.2rem) !important; }
}

.auth-forgot { color: var(--amber); font-size: .82rem; text-align: right; }
.dynamic-blog-article__body,
.related-posts { width: min(100%, 780px); margin-inline: auto; }
.dynamic-blog-article__body { color: rgba(243, 238, 231, .76); font-size: 1.03rem; line-height: 1.9; }
.dynamic-blog-article__body h2 { margin: 52px 0 16px; color: var(--text); font: 500 clamp(1.8rem, 4vw, 2.55rem)/1.2 var(--serif); }
.dynamic-blog-article__body h3 { margin: 34px 0 12px; color: var(--text); font-size: 1.25rem; }
.dynamic-blog-article__body li { margin-block: 8px; }
.dynamic-blog-article__body blockquote { margin: 30px 0; padding: 20px 24px; border-left: 2px solid var(--amber); color: var(--text); background: rgba(240, 184, 106, .06); }
.article-toc { display: grid; gap: 9px; }
.article-toc a { color: var(--muted); }
.related-posts { margin-top: 54px; padding-top: 34px; border-top: 1px solid var(--line); }
.related-posts h2 { margin: 8px 0 22px; color: var(--text); font: 500 2rem var(--serif); }
.related-posts > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.related-posts a { display: grid; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: rgba(8, 7, 13, .58); }
.related-posts span { color: var(--amber); font-size: .72rem; text-transform: uppercase; }

@media (max-width: 760px) {
  .related-posts > div { grid-template-columns: 1fr; }
}

/* Milky Way background and stable editorial layouts */
body {
  background-color: #03050b;
  background-image:
    linear-gradient(180deg, rgba(2, 4, 10, 0.2) 0%, rgba(3, 5, 12, 0.42) 46%, rgba(2, 3, 8, 0.72) 100%),
    url("assets/milky-way-bg-v2.webp") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

.grain {
  background:
    radial-gradient(ellipse at 14% 28%, rgba(26, 96, 146, 0.08), transparent 32rem),
    radial-gradient(ellipse at 78% 72%, rgba(136, 88, 119, 0.07), transparent 30rem),
    linear-gradient(180deg, rgba(1, 3, 8, 0.08), rgba(1, 3, 8, 0.42));
  filter: none;
}

.starfield {
  overflow: hidden;
  background: none;
  mask-image: none;
  opacity: 1;
}

.starfield::before,
.starfield::after {
  position: absolute;
  inset: -8%;
  content: "";
  will-change: opacity, transform;
}

.starfield::before {
  background-image:
    radial-gradient(circle at 8% 17%, rgba(255, 255, 255, 0.92) 0 1px, transparent 1.7px),
    radial-gradient(circle at 19% 68%, rgba(169, 210, 255, 0.82) 0 1px, transparent 1.8px),
    radial-gradient(circle at 31% 34%, rgba(255, 245, 218, 0.88) 0 1.2px, transparent 2px),
    radial-gradient(circle at 46% 81%, rgba(255, 255, 255, 0.76) 0 1px, transparent 1.7px),
    radial-gradient(circle at 57% 19%, rgba(181, 214, 255, 0.9) 0 1px, transparent 1.8px),
    radial-gradient(circle at 72% 55%, rgba(255, 240, 213, 0.76) 0 1.2px, transparent 2px),
    radial-gradient(circle at 84% 28%, rgba(255, 255, 255, 0.86) 0 1px, transparent 1.8px),
    radial-gradient(circle at 94% 76%, rgba(170, 208, 255, 0.86) 0 1px, transparent 1.8px);
  background-size: 360px 310px, 440px 390px, 520px 470px, 610px 540px, 470px 420px, 580px 510px, 690px 620px, 760px 690px;
  animation: star-twinkle-soft 6.4s ease-in-out infinite alternate;
}

.starfield::after {
  background-image:
    radial-gradient(circle at 12% 52%, rgba(255, 255, 255, 0.74) 0 1.4px, transparent 2.5px),
    radial-gradient(circle at 38% 15%, rgba(191, 222, 255, 0.76) 0 1.3px, transparent 2.4px),
    radial-gradient(circle at 63% 73%, rgba(255, 231, 198, 0.7) 0 1.5px, transparent 2.6px),
    radial-gradient(circle at 88% 39%, rgba(255, 255, 255, 0.8) 0 1.4px, transparent 2.5px);
  background-size: 670px 590px, 810px 710px, 930px 820px, 1080px 940px;
  filter: drop-shadow(0 0 4px rgba(185, 216, 255, 0.58));
  animation: star-twinkle-bright 8.2s ease-in-out 1.1s infinite alternate;
}

@keyframes star-twinkle-soft {
  0% { opacity: 0.3; transform: translate3d(0, 0, 0) scale(1); }
  45% { opacity: 0.72; }
  100% { opacity: 0.42; transform: translate3d(0, -5px, 0) scale(1.004); }
}

@keyframes star-twinkle-bright {
  0% { opacity: 0.16; transform: scale(0.998); }
  55% { opacity: 0.65; }
  100% { opacity: 0.3; transform: scale(1.006); }
}

.content-page {
  background-color: #03050b;
  background-image:
    linear-gradient(180deg, rgba(2, 4, 10, 0.2) 0%, rgba(3, 5, 12, 0.42) 46%, rgba(2, 3, 8, 0.72) 100%),
    url("assets/milky-way-bg-v2.webp") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

.content-page .seo-article {
  width: min(100% - 40px, 960px);
  margin-top: 52px;
  padding-bottom: 72px;
}

.content-page .seo-article > header {
  width: min(100%, 860px);
  margin: 54px auto 58px;
}

.content-page .seo-article h1 {
  max-width: 820px;
  margin-inline: auto;
  font-size: clamp(2.65rem, 6.4vw, 5.25rem);
  overflow-wrap: anywhere;
}

.content-page .seo-article__lead {
  max-width: 720px;
}

.about-article,
.disclaimer-article {
  counter-reset: editorial-section;
}

.about-article section,
.disclaimer-article section {
  display: grid;
  max-width: 900px;
  grid-template-columns: minmax(190px, 0.42fr) minmax(0, 1fr);
  column-gap: 54px;
  row-gap: 10px;
  align-items: start;
  padding: 34px 0;
  counter-increment: editorial-section;
}

.about-article section::before,
.disclaimer-article section::before {
  grid-column: 1;
  color: rgba(102, 218, 207, 0.72);
  content: "0" counter(editorial-section);
  font-family: var(--serif);
  font-size: 0.92rem;
}

.about-article section h2,
.disclaimer-article section h2 {
  grid-column: 1;
  margin-top: 8px;
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  line-height: 1.18;
}

.about-article section p,
.disclaimer-article section p {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.9;
}

@media (max-width: 700px) {
  body {
    background-attachment: scroll !important;
    background-position: 58% top !important;
  }

  .content-page .seo-article {
    width: min(100% - 28px, 960px);
    margin-top: 32px;
  }

  .content-page .seo-article > header {
    margin: 36px auto 42px;
  }

  .content-page .seo-article h1 {
    font-size: clamp(2.45rem, 13vw, 4rem);
  }

  .about-article section,
  .disclaimer-article section {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 28px 0;
  }

  .about-article section::before,
  .about-article section h2,
  .about-article section p,
  .disclaimer-article section::before,
  .disclaimer-article section h2,
  .disclaimer-article section p {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Final responsive navigation layer. */
@media (max-width: 980px) {
  .site-header,
  .content-page .site-header {
    display: grid !important;
    grid-template-columns: 1fr 44px !important;
    width: min(100% - 28px, 1180px) !important;
    min-height: 60px !important;
    gap: 10px !important;
    justify-items: stretch !important;
    align-items: center !important;
  }
  .site-header .brand { justify-self: start !important; }
  .site-header .brand__mark { width: 40px; height: 40px; border-radius: 8px; }
  .site-header .brand strong { font-size: .92rem; }
  .site-header .brand small { font-size: .58rem; }
  .site-menu-toggle { display: grid !important; justify-self: end !important; color: var(--text); }
  .site-header .main-nav,
  .content-page .site-header .main-nav,
  .site-header .auth-nav,
  .content-page .site-header .auth-nav { display: none !important; grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; }
  .site-header--open .main-nav,
  .content-page .site-header--open .main-nav { display: grid !important; gap: 2px; padding: 8px; border-radius: 8px; overflow: visible; }
  .site-header--open .main-nav a,
  .content-page .site-header--open .main-nav a { width: 100%; justify-content: flex-start; border-radius: 6px; }
  .site-header--open .auth-nav,
  .content-page .site-header--open .auth-nav { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 8px; }
  .site-header--open .auth-nav > * { width: 100%; max-width: none; }
  .tarot-page h1,
  .content-page h1 { font-size: clamp(2.35rem, 12vw, 3.6rem); }
}

/* Mobile navigation overrides must remain last in the cascade. */
@media (max-width: 760px) {
  .site-header,
  .content-page .site-header {
    display: grid;
    grid-template-columns: 1fr 44px;
    width: min(100% - 28px, 1180px);
    min-height: 60px;
    gap: 10px;
    justify-items: stretch;
    align-items: center;
  }

  .site-header .brand { justify-self: start; }
  .site-header .brand__mark { width: 40px; height: 40px; border-radius: 8px; }
  .site-header .brand strong { font-size: .92rem; }
  .site-header .brand small { font-size: .58rem; }
  .site-menu-toggle { display: grid; justify-self: end; color: var(--text); }

  .site-header .main-nav,
  .content-page .site-header .main-nav,
  .site-header .auth-nav,
  .content-page .site-header .auth-nav {
    display: none;
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
  }

  .site-header--open .main-nav,
  .content-page .site-header--open .main-nav {
    display: grid;
    gap: 2px;
    padding: 8px;
    border-radius: 8px;
    overflow: visible;
  }

  .site-header--open .main-nav a,
  .content-page .site-header--open .main-nav a {
    width: 100%;
    justify-content: flex-start;
    border-radius: 6px;
  }

  .site-header--open .auth-nav,
  .content-page .site-header--open .auth-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 8px;
  }

  .site-header--open .auth-nav > * { width: 100%; max-width: none; }
  .tarot-page h1,
  .content-page h1 { font-size: clamp(2.35rem, 12vw, 3.6rem); }
}

/* Blog publishing workspace */
.admin-blog-toolbar > div {
  display: grid;
  gap: 4px;
}

.admin-blog-toolbar > div strong {
  color: #f0ddca;
}

.admin-blog-toolbar > div span {
  color: rgba(245, 239, 224, 0.54);
  font-size: 0.82rem;
}

.admin-blog-table__row {
  grid-template-columns: minmax(280px, 1.6fr) 120px 150px 210px;
}

.admin-blog-table__row > strong {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-blog-table__row > strong b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-blog-table__row > strong small {
  overflow: hidden;
  color: rgba(245, 239, 224, 0.46);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-blog-table__row em[data-status="published"] {
  color: #73d7b3;
}

.admin-row-actions a {
  border: 1px solid rgba(101, 211, 198, 0.25);
  border-radius: 5px;
  padding: 6px 9px;
  color: #8adfd4;
  font-size: 0.76rem;
  font-weight: 700;
}

.admin-blog-dialog {
  width: min(100% - 32px, 980px);
}

.admin-blog-dialog form {
  max-height: min(88vh, 900px);
  overflow-y: auto;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.admin-form-span-2 {
  grid-column: 1 / -1;
}

.admin-blog-editor {
  min-height: 320px;
  resize: vertical;
  font-family: var(--sans);
  line-height: 1.65;
}

.admin-slug-field {
  display: flex;
  align-items: center;
  border: 1px solid rgba(205, 154, 118, 0.24);
  border-radius: 6px;
  background: rgba(4, 4, 10, 0.72);
}

.admin-slug-field > span {
  flex: 0 0 auto;
  padding-left: 13px;
  color: rgba(245, 239, 224, 0.42);
}

.admin-slug-field input {
  border: 0 !important;
  background: transparent !important;
}

.dynamic-blog-article__body {
  width: min(100%, 760px);
  margin-inline: auto;
}

.dynamic-blog-article__body h2 {
  margin: 46px 0 14px;
  padding-top: 28px;
  border-top: 1px solid rgba(205, 154, 118, 0.16);
}

.dynamic-blog-article__body p,
.dynamic-blog-article__body li {
  color: rgba(245, 239, 224, 0.74);
  font-size: 1.04rem;
  line-height: 1.95;
}

.dynamic-blog-article__body ul {
  display: grid;
  gap: 9px;
  padding-left: 24px;
}

.dynamic-blog-article > header > small {
  display: block;
  margin-top: 18px;
  color: rgba(245, 239, 224, 0.4);
}

@media (max-width: 900px) {
  .admin-blog-table__row {
    grid-template-columns: minmax(220px, 1fr) 110px 180px;
  }

  .admin-blog-table__row > span:nth-child(3),
  .admin-blog-table .admin-table__head > span:nth-child(3) {
    display: none;
  }
}

@media (max-width: 640px) {
  .admin-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-form-span-2 {
    grid-column: 1;
  }

  .admin-blog-table__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .admin-blog-table .admin-table__head {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .starfield::before,
  .starfield::after {
    animation: none;
  }
}

/* Admin control panel */
.admin-page {
  width: min(100% - 32px, 1500px);
  min-height: 100vh;
  padding-bottom: 48px;
}

.admin-page [hidden] {
  display: none !important;
}

.admin-topbar {
  margin-bottom: 20px;
}

.admin-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-sidebar {
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 20px 14px;
  border: 1px solid rgba(205, 154, 118, 0.2);
  border-radius: 8px;
  background: rgba(12, 9, 18, 0.94);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(18px);
}

.admin-sidebar__heading {
  margin: 0 6px 16px;
  padding: 0 4px 17px;
  border-bottom: 1px solid rgba(205, 154, 118, 0.16);
}

.admin-sidebar__heading p,
.admin-page-header p,
.admin-section-heading p,
.admin-dialog header p {
  margin: 0;
  color: #bc8f74;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.admin-sidebar__heading h1 {
  margin: 5px 0 0;
  color: #f1ddca;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: 0;
}

.admin-menu {
  display: grid;
  gap: 5px;
}

.admin-menu button {
  width: 100%;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 10px;
  background: transparent;
  color: rgba(245, 239, 224, 0.68);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.admin-menu button:hover,
.admin-menu button:focus-visible,
.admin-menu button.is-active {
  border-color: rgba(205, 154, 118, 0.3);
  background: rgba(205, 154, 118, 0.1);
  color: #f5dfcb;
  transform: none;
}

.admin-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-menu__item span {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1px solid rgba(205, 154, 118, 0.22);
  border-radius: 50%;
  color: #cda284;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.83rem;
}

.admin-menu__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 4px 6px;
  color: rgba(245, 239, 224, 0.42);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-menu__divider::after {
  height: 1px;
  flex: 1;
  background: rgba(205, 154, 118, 0.14);
  content: "";
}

.admin-workspace {
  display: grid;
  min-width: 0;
  gap: 16px;
}

.admin-page-header {
  display: flex;
  min-height: 120px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 26px;
  border: 1px solid rgba(205, 154, 118, 0.2);
  border-radius: 8px;
  background: rgba(12, 9, 18, 0.92);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
}

.admin-page-header h2 {
  margin: 4px 0 7px;
  color: #f3dfcc;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.35rem);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.05;
}

.admin-page-header > div > span {
  color: rgba(245, 239, 224, 0.62);
  font-size: 0.92rem;
  line-height: 1.55;
}

.admin-status-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(105, 201, 139, 0.28);
  border-radius: 999px;
  padding: 9px 13px;
  color: #aee6bf;
  background: rgba(51, 145, 84, 0.08);
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-status-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #75df98;
  box-shadow: 0 0 12px rgba(117, 223, 152, 0.68);
}

.admin-feedback-bar {
  border: 1px solid rgba(105, 201, 139, 0.3);
  border-radius: 6px;
  padding: 11px 14px;
  color: #b9e9c7;
  background: rgba(51, 145, 84, 0.11);
  font-size: 0.88rem;
}

.admin-feedback-bar[data-type="error"] {
  border-color: rgba(224, 105, 115, 0.35);
  color: #f1b3ba;
  background: rgba(169, 49, 62, 0.12);
}

.admin-view {
  display: grid;
  gap: 16px;
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.admin-stats-grid article,
.admin-section-block,
.admin-system-grid article {
  border: 1px solid rgba(205, 154, 118, 0.18);
  border-radius: 8px;
  background: rgba(12, 9, 18, 0.9);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.2);
}

.admin-stats-grid article {
  min-height: 116px;
  padding: 18px;
}

.admin-stats-grid span,
.admin-dialog label > span {
  display: block;
  color: #b78a70;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-stats-grid strong {
  display: block;
  margin: 9px 0 5px;
  color: #f3dfcb;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 650;
}

.admin-stats-grid em {
  color: rgba(245, 239, 224, 0.5);
  font-size: 0.78rem;
  font-style: normal;
}

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.admin-toolbar > p {
  margin: 0;
  color: rgba(245, 239, 224, 0.56);
  font-size: 0.88rem;
}

.admin-search {
  width: min(100%, 420px);
}

.admin-search input,
.admin-dialog input,
.admin-dialog select {
  width: 100%;
  border: 1px solid rgba(205, 154, 118, 0.22);
  border-radius: 6px;
  padding: 12px 13px;
  outline: none;
  background: rgba(5, 5, 11, 0.66);
  color: #f3e4d6;
  font: inherit;
}

.admin-search input:focus,
.admin-dialog input:focus,
.admin-dialog select:focus {
  border-color: rgba(216, 174, 145, 0.64);
  box-shadow: 0 0 0 3px rgba(205, 154, 118, 0.08);
}

.admin-action,
.admin-icon-action {
  border: 1px solid rgba(205, 154, 118, 0.36);
  border-radius: 6px;
  background: rgba(205, 154, 118, 0.07);
  color: #efd7c1;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.admin-action {
  min-height: 42px;
  padding: 10px 15px;
}

.admin-action--solid {
  border-color: rgba(216, 174, 145, 0.56);
  background: #a56f55;
  color: #fff7ef;
}

.admin-action:hover,
.admin-icon-action:hover {
  filter: brightness(1.12);
}

.admin-action:disabled,
.admin-icon-action:disabled {
  cursor: wait;
  opacity: 0.55;
}

.admin-icon-action {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  font-size: 1.15rem;
}

.admin-section-block {
  min-width: 0;
  padding: 20px;
}

.admin-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.admin-section-heading h3 {
  margin: 5px 0 0;
  color: #f0ddca;
  font-size: 1.25rem;
  letter-spacing: 0;
}

.admin-table {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(205, 154, 118, 0.14);
  border-radius: 6px;
}

.admin-table__head,
.admin-table__row {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(140px, 0.75fr) minmax(150px, 0.75fr);
  gap: 14px;
  align-items: center;
  min-height: 58px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(205, 154, 118, 0.12);
}

.admin-table__head {
  min-height: 42px;
  color: #b98d73;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-table__row:last-child {
  border-bottom: 0;
}

.admin-table__row strong {
  min-width: 0;
  color: #ead9c9;
  font-size: 0.9rem;
}

.admin-table__row em {
  color: #d2a688;
  font-size: 0.83rem;
  font-style: normal;
}

.admin-table__row > span {
  color: rgba(245, 239, 224, 0.56);
  font-size: 0.82rem;
}

.admin-user-table__row {
  grid-template-columns: minmax(240px, 1.5fr) 100px minmax(170px, 0.8fr) 130px;
}

.admin-user-table__row strong b,
.admin-user-table__row strong small {
  display: block;
}

.admin-user-table__row strong b {
  color: #eee0d2;
  font-size: 0.9rem;
}

.admin-user-table__row strong small {
  margin-top: 3px;
  overflow: hidden;
  color: rgba(245, 239, 224, 0.48);
  font-size: 0.74rem;
  font-weight: 500;
  text-overflow: ellipsis;
}

.admin-row-actions {
  display: flex;
  gap: 7px;
  align-items: center;
}

.admin-row-actions button {
  border: 1px solid rgba(205, 154, 118, 0.28);
  border-radius: 5px;
  padding: 7px 10px;
  background: rgba(205, 154, 118, 0.06);
  color: #dec0a9;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.admin-row-actions button.is-danger {
  border-color: rgba(224, 105, 115, 0.26);
  color: #e9a0a8;
  background: rgba(169, 49, 62, 0.07);
}

.admin-empty-state {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 42px 20px;
  color: rgba(245, 239, 224, 0.48);
  text-align: center;
}

.admin-empty-state strong {
  color: #e8d7c7;
}

.admin-system-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-system-grid article {
  min-height: 130px;
  padding: 18px;
}

.admin-system-grid article span,
.admin-system-grid article strong,
.admin-system-grid article small {
  display: block;
  overflow-wrap: anywhere;
}

.admin-system-grid article span {
  color: #b98d73;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-system-grid article strong {
  margin: 12px 0 8px;
  color: #eedbc9;
  font-size: 1rem;
}

.admin-system-grid article small {
  color: rgba(245, 239, 224, 0.48);
  line-height: 1.45;
}

.admin-dialog {
  width: min(520px, calc(100% - 28px));
  border: 1px solid rgba(205, 154, 118, 0.28);
  border-radius: 8px;
  padding: 0;
  color: #f0dfd0;
  background: #100c16;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
}

.admin-dialog::backdrop {
  background: rgba(2, 2, 7, 0.76);
  backdrop-filter: blur(4px);
}

.admin-dialog form {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.admin-dialog header,
.admin-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-dialog header {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(205, 154, 118, 0.14);
}

.admin-dialog header h2 {
  margin: 4px 0 0;
  color: #f0ddca;
  font-family: var(--serif);
  font-size: 1.7rem;
  letter-spacing: 0;
}

.admin-dialog header > button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  color: rgba(245, 239, 224, 0.72);
  background: rgba(255, 255, 255, 0.05);
  font-size: 1.45rem;
  cursor: pointer;
}

.admin-dialog label {
  display: grid;
  gap: 7px;
}

.admin-dialog label small {
  color: rgba(245, 239, 224, 0.46);
  font-size: 0.74rem;
}

.admin-dialog footer {
  justify-content: flex-end;
  padding-top: 5px;
}

.admin-feedback-table__row {
  grid-template-columns: minmax(260px, 1.6fr) 110px 110px 150px;
}

.admin-feedback-table__row strong b,
.admin-feedback-table__row strong small {
  display: block;
}

.admin-feedback-table__row strong small {
  margin-top: 5px;
  color: rgba(245, 239, 224, 0.5);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.5;
}

.admin-deepseek-block {
  max-width: 820px;
}

.admin-config-state {
  border: 1px solid rgba(224, 105, 115, 0.28);
  border-radius: 999px;
  padding: 8px 12px;
  color: #e6a4aa;
  background: rgba(169, 49, 62, 0.08);
  font-size: 0.76rem;
  font-weight: 700;
}

.admin-config-state[data-ready="true"] {
  border-color: rgba(105, 201, 139, 0.28);
  color: #aee6bf;
  background: rgba(51, 145, 84, 0.08);
}

.admin-config-form {
  display: grid;
  gap: 16px;
  max-width: 620px;
}

.admin-config-form > label:not(.admin-toggle-row) {
  display: grid;
  gap: 7px;
}

.admin-config-form label > span {
  color: #b98d73;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-config-form input[type="text"],
.admin-config-form input[type="password"] {
  width: 100%;
  border: 1px solid rgba(205, 154, 118, 0.22);
  border-radius: 6px;
  padding: 12px 13px;
  background: rgba(5, 5, 11, 0.66);
  color: #f3e4d6;
  font: inherit;
}

.admin-config-form small,
.admin-security-note {
  color: rgba(245, 239, 224, 0.48);
  font-size: 0.76rem;
  line-height: 1.55;
}

.admin-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-toggle-row input {
  width: 18px;
  height: 18px;
  accent-color: #b67a5d;
}

.admin-config-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.admin-action--danger {
  border-color: rgba(224, 105, 115, 0.34);
  color: #eca5ac;
  background: rgba(169, 49, 62, 0.08);
}

@media (max-width: 1100px) {
  .admin-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .admin-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-user-table__row {
    grid-template-columns: minmax(220px, 1.3fr) 90px minmax(150px, 0.8fr) 130px;
  }
}

@media (max-width: 820px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    max-height: none;
  }

  .admin-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-menu__divider {
    grid-column: 1 / -1;
  }

  .admin-page-header {
    align-items: flex-start;
  }

  .admin-user-table {
    overflow-x: auto;
  }

  .admin-user-table__row {
    min-width: 720px;
  }
}

@media (max-width: 620px) {
  .admin-page {
    width: min(100% - 20px, 1500px);
  }

  .admin-topbar .main-nav {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .admin-topbar .main-nav a {
    min-width: 0;
    padding-inline: 8px;
    text-align: center;
  }

  .admin-page-header,
  .admin-toolbar,
  .admin-section-heading {
    align-items: stretch;
  }

  .admin-page-header,
  .admin-toolbar {
    display: grid;
  }

  .admin-status-pill {
    justify-self: start;
  }

  .admin-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-menu button {
    min-height: 43px;
    font-size: 0.8rem;
  }

  .admin-stats-grid,
  .admin-system-grid {
    grid-template-columns: 1fr;
  }

  .admin-table:not(.admin-user-table) .admin-table__head {
    display: none;
  }

  .admin-table:not(.admin-user-table) .admin-table__row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .admin-action--solid {
    width: 100%;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(4, 10, 25, 0.2), rgba(1, 3, 9, 0.72)),
    #020612 url("assets/starry-sky-bg.webp") center top / cover fixed;
  font-family: var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

.page-shell {
  min-height: 100vh;
  overflow: hidden;
}

.hero {
  position: relative;
  min-height: 100vh;
  padding: 28px 0 90px;
}

.hero--simple {
  display: block;
}

.grain,
.starfield {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.grain {
  z-index: 0;
  background:
    radial-gradient(ellipse at 12% 32%, rgba(46, 107, 210, 0.18), transparent 34rem),
    radial-gradient(ellipse at 70% 86%, rgba(78, 130, 235, 0.14), transparent 32rem),
    linear-gradient(180deg, rgba(1, 5, 15, 0.1), rgba(1, 3, 10, 0.58));
  filter: saturate(0.95) brightness(0.72) contrast(1.08);
}

.starfield {
  z-index: 1;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.44) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(120, 174, 255, 0.32) 0 1px, transparent 1.3px);
  background-position: 0 0, 58px 82px;
  background-size: 220px 220px, 340px 340px;
  mask-image: radial-gradient(circle at 50% 48%, black, transparent 82%);
  opacity: 0.28;
}

.site-header,
.hero-layout,
.results,
.method {
  position: relative;
  z-index: 2;
}

.reading-story-card,
.reading-support,
.astro-interpretation-section,
.admin-panel,
.result-card,
.analysis-card,
.final-conclusion-card {
  content-visibility: auto;
  contain-intrinsic-size: 1px 420px;
}

.site-header {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  width: min(1180px, calc(100% - 42px));
  min-height: 62px;
  align-items: center;
  gap: 26px;
  margin: 0 auto;
}

.language-switch {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-self: end;
  gap: 4px;
  border: 1px solid rgba(144, 169, 181, 0.18);
  border-radius: 999px;
  padding: 4px 7px;
  color: rgba(243, 238, 231, 0.38);
  background: rgba(9, 11, 16, 0.58);
  backdrop-filter: blur(18px);
}

.language-switch button {
  min-width: 28px;
  min-height: 26px;
  border: 0;
  border-radius: 999px;
  padding: 0 5px;
  color: var(--muted);
  background: transparent;
  font: 800 0.7rem/1 var(--sans);
  cursor: pointer;
}

.language-switch button.is-active {
  color: var(--ink);
  background: var(--cyan);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand__mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--line-hot);
  border-radius: 16px;
  color: var(--cyan);
  background: rgba(101, 211, 198, 0.08);
  font-family: var(--serif);
  font-weight: 650;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-weight: 900;
  letter-spacing: 0.02em;
}

.brand small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.main-nav {
  display: inline-flex;
  justify-self: center;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px;
  background: rgba(9, 11, 16, 0.56);
  backdrop-filter: blur(18px);
}

.main-nav a,
.header-action {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border-radius: 999px;
  padding: 0 16px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.main-nav a.is-active {
  color: var(--ink);
  background: var(--cyan);
}

.header-action {
  justify-self: end;
  border: 1px solid rgba(240, 184, 106, 0.35);
  color: var(--amber);
  background: rgba(240, 184, 106, 0.08);
}

.auth-nav {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 10px;
  min-height: 38px;
  border: 1px solid rgba(144, 169, 181, 0.16);
  border-radius: 999px;
  padding: 5px;
  background: rgba(9, 11, 16, 0.54);
  backdrop-filter: blur(18px);
}

.auth-nav span,
.auth-nav__history,
.auth-nav__login,
.auth-nav__register,
.auth-nav__user,
.auth-nav__logout {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  color: rgba(243, 238, 231, 0.62);
  background: transparent;
  font-size: 0.82rem;
  font-weight: 850;
  white-space: nowrap;
}

.auth-nav__login,
.auth-nav__logout {
  color: #090b10;
  background: var(--amber);
  cursor: pointer;
}

.auth-nav__user {
  max-width: 220px;
  color: rgba(243, 238, 231, 0.76);
  background: rgba(243, 238, 231, 0.06);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-nav__user:hover,
.auth-nav__user:focus-visible {
  color: var(--text);
  background: rgba(243, 238, 231, 0.11);
}

.auth-nav__register {
  color: rgba(240, 184, 106, 0.9);
  background: rgba(240, 184, 106, 0.1);
  box-shadow: inset 0 0 0 1px rgba(240, 184, 106, 0.22);
}

.auth-nav__history {
  color: rgba(240, 184, 106, 0.78);
}

.auth-toast[hidden] {
  display: none;
}

.auth-toast {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 55;
  display: flex;
  width: min(420px, calc(100vw - 36px));
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(240, 184, 106, 0.28);
  border-radius: 16px;
  padding: 14px;
  color: rgba(243, 238, 231, 0.78);
  background:
    radial-gradient(circle at 20% 0%, rgba(240, 184, 106, 0.14), transparent 14rem),
    rgba(10, 8, 15, 0.96);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(16px);
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.5;
}

.auth-toast span {
  min-width: 0;
  flex: 1;
}

.auth-toast button {
  min-height: 38px;
  border: 1px solid rgba(240, 184, 106, 0.3);
  border-radius: 999px;
  padding: 0 14px;
  color: #090b10;
  background: var(--amber);
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.auth-modal[hidden] {
  display: none;
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 22px;
}

.auth-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 3, 7, 0.72);
  backdrop-filter: blur(10px);
}

.auth-modal__panel {
  position: relative;
  width: min(460px, 100%);
  border: 1px solid rgba(240, 184, 106, 0.3);
  border-radius: 18px;
  padding: 34px;
  background:
    radial-gradient(circle at 20% 0%, rgba(240, 184, 106, 0.12), transparent 20rem),
    rgba(12, 8, 18, 0.98);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.54);
}

.auth-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(144, 169, 181, 0.18);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(5, 6, 10, 0.5);
  cursor: pointer;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 22px;
  border: 1px solid rgba(144, 169, 181, 0.16);
  border-radius: 999px;
  padding: 6px;
  background: rgba(5, 6, 10, 0.52);
}

.auth-tab {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  color: rgba(243, 238, 231, 0.62);
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}

.auth-tab.is-active {
  color: #090b10;
  background: var(--amber);
}

.auth-modal__eyebrow,
.auth-form span {
  color: rgba(240, 184, 106, 0.68);
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.auth-modal__panel h2 {
  margin: 10px 0 12px;
  color: #f2dfca;
  font-family: var(--serif);
  font-size: 2.6rem;
  font-style: italic;
  font-weight: 500;
}

.auth-modal__note,
.auth-error {
  color: rgba(243, 238, 231, 0.64);
  font-weight: 700;
  line-height: 1.6;
}

.auth-form {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.auth-form label {
  display: grid;
  gap: 10px;
}

.auth-form .auth-name-field[hidden] {
  display: none;
}

.auth-form input {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(240, 184, 106, 0.24);
  border-radius: 12px;
  padding: 0 16px;
  color: var(--text);
  background: rgba(5, 6, 10, 0.68);
  outline: none;
}

.auth-form input:focus {
  border-color: rgba(240, 184, 106, 0.68);
  box-shadow: 0 0 0 4px rgba(240, 184, 106, 0.08);
}

.auth-error {
  margin: 0;
  color: #f5a3ae;
}

.auth-submit,
.auth-switch,
.history-login-note button {
  min-height: 48px;
  border: 1px solid rgba(240, 184, 106, 0.26);
  border-radius: 999px;
  color: #090b10;
  background: var(--amber);
  font-weight: 900;
  cursor: pointer;
}

.auth-switch {
  width: 100%;
  margin-top: 14px;
  color: rgba(240, 184, 106, 0.84);
  background: transparent;
}

.history-login-note {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: 36px;
  border: 1px solid rgba(240, 184, 106, 0.28);
  border-radius: 18px;
  padding: 38px 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(240, 184, 106, 0.12), transparent 22rem),
    rgba(15, 10, 24, 0.74);
  text-align: center;
}

.history-login-note span {
  color: rgba(240, 184, 106, 0.66);
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.history-login-note strong {
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-style: italic;
  font-weight: 500;
}

.history-login-note p {
  max-width: 640px;
  margin: 0;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.7;
}

.history-login-note button {
  padding: 0 24px;
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(380px, 0.72fr);
  width: min(1180px, calc(100% - 42px));
  align-items: center;
  gap: 56px;
  margin: 76px auto 0;
}

.hero-layout--form-focus {
  grid-template-columns: 1fr;
  margin-top: 30px;
}

.hero-layout--form-focus .hero-copy {
  display: none;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 720px;
  margin-bottom: 22px;
  font-family: var(--serif);
  font-size: clamp(3.8rem, 8vw, 7.3rem);
  font-weight: 650;
  line-height: 0.92;
  letter-spacing: 0;
}

.lead {
  max-width: 620px;
  margin-bottom: 52px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.8;
}

.number-orbit {
  position: relative;
  width: min(420px, 88vw);
  aspect-ratio: 1;
  border-radius: 999px;
}

.orbit-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(101, 211, 198, 0.2);
  border-radius: inherit;
}

.orbit-ring--outer {
  box-shadow: 0 0 80px rgba(101, 211, 198, 0.11);
}

.orbit-ring--inner {
  inset: 72px;
  border-color: rgba(240, 184, 106, 0.22);
}

.number-orbit b {
  position: absolute;
  inset: 50%;
  display: grid;
  width: 116px;
  height: 116px;
  place-items: center;
  border: 1px solid rgba(240, 184, 106, 0.34);
  border-radius: 32px;
  color: var(--amber);
  background: rgba(9, 11, 16, 0.76);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.44);
  font-family: var(--serif);
  font-size: 4rem;
  font-weight: 650;
  transform: translate(-50%, -50%) rotate(-8deg);
}

.number-orbit i {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  background: rgba(18, 21, 31, 0.78);
  font-style: normal;
  font-weight: 900;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--i) * 60deg))
    translateY(-205px)
    rotate(calc(var(--i) * -60deg));
}

.control-card {
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 26px;
  background: linear-gradient(180deg, rgba(27, 31, 44, 0.88), rgba(10, 12, 18, 0.9));
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(20px);
}

.card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.card-heading span {
  color: var(--amber);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.card-heading strong {
  color: rgba(243, 238, 231, 0.18);
  font-family: var(--serif);
  font-size: 3rem;
  line-height: 1;
}

.mystic-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field {
  display: grid;
  gap: 9px;
}

.field--wide {
  grid-column: 1 / -1;
}

.field span {
  color: var(--faint);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.field input,
.field textarea {
  width: 100%;
  border: 1px solid rgba(144, 169, 181, 0.2);
  border-radius: 16px;
  color: var(--text);
  background: rgba(5, 6, 10, 0.58);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.field input {
  min-height: 56px;
  padding: 0 16px;
}

.field textarea {
  min-height: 112px;
  resize: vertical;
  padding: 16px;
  line-height: 1.6;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--line-hot);
  background: rgba(5, 6, 10, 0.78);
  box-shadow: 0 0 0 4px rgba(101, 211, 198, 0.09);
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(243, 238, 231, 0.32);
}

.continue-button {
  grid-column: 1 / -1;
  display: inline-flex;
  min-height: 62px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 18px;
  color: var(--ink);
  background: linear-gradient(135deg, var(--cyan), #d3f7b8);
  box-shadow: 0 18px 50px rgba(101, 211, 198, 0.18);
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.continue-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 68px rgba(101, 211, 198, 0.24);
}

.continue-button:disabled {
  cursor: wait;
  opacity: 0.68;
  transform: none;
}

.numerology-panel {
  width: min(1040px, 100%);
  justify-self: center;
  padding: 32px 40px 34px;
  border: 0;
  border-radius: 18px;
  color: #111827;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
}

.numerology-panel__title {
  margin: 0 0 28px;
  color: #0f172a;
  font-family: var(--sans);
  font-size: clamp(2rem, 4vw, 2.55rem);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

.numerology-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 -40px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: #f7f1ff;
}

.numerology-tab {
  display: inline-flex;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-bottom: 4px solid transparent;
  color: #64748b;
  background: transparent;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
}

.numerology-tab span {
  color: #7c3aed;
}

.numerology-tab.is-active {
  border-color: #7c3aed;
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.06);
}

.numerology-form {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.numerology-form .form-field {
  gap: 10px;
}

.numerology-form .field span,
.gender-group legend,
.date-group legend {
  color: #1f2937;
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

.numerology-form .field span::first-letter,
.gender-group legend::first-letter,
.date-group legend::first-letter {
  color: #8b5cf6;
}

.numerology-form input,
.numerology-form textarea,
.numerology-form select {
  color: #020617;
  background: #fff;
}

.numerology-form .field input,
.numerology-form .field textarea {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
}

.numerology-form .field input {
  min-height: 58px;
  padding: 0 16px;
  font-size: 1.05rem;
}

.numerology-form .field textarea {
  min-height: 92px;
  font-size: 1rem;
}

.numerology-form .field input:focus,
.numerology-form .field textarea:focus,
.numerology-form select:focus {
  border-color: #7c3aed;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}

.numerology-form .field input::placeholder,
.numerology-form .field textarea::placeholder {
  color: #6b7280;
}

.gender-group,
.date-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.gender-group {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.gender-group legend,
.date-group legend {
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
}

.gender-group label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #020617;
  font-size: 1.05rem;
  cursor: pointer;
}

.gender-group input {
  width: 20px;
  height: 20px;
  accent-color: #2563eb;
}

.birth-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
}

.select-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.select-row--time {
  grid-template-columns: 1.18fr 1fr;
}

.select-row label {
  display: grid;
  gap: 0;
}

.select-row label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.numerology-form select {
  width: 100%;
  min-height: 58px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 0 42px 0 16px;
  outline: none;
  font-size: 1.03rem;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #64748b 50%),
    linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position:
    calc(100% - 25px) 27px,
    calc(100% - 18px) 27px;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}

.partner-field[hidden] {
  display: none;
}

.question-field[hidden] {
  display: none;
}

.numerology-submit {
  justify-self: center;
  width: min(366px, 100%);
  min-height: 64px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #a12ff2, #4338ca);
  box-shadow: 0 14px 30px rgba(79, 70, 229, 0.32);
  font-size: 1.05rem;
}

.numerology-submit:hover {
  box-shadow: 0 18px 42px rgba(79, 70, 229, 0.4);
}

.numerology-page {
  background:
    linear-gradient(180deg, rgba(4, 10, 25, 0.18), rgba(1, 3, 9, 0.74)),
    #020612 url("assets/starry-sky-bg.webp") center top / cover fixed;
}

.numerology-page .grain {
  background:
    radial-gradient(ellipse at 12% 32%, rgba(46, 107, 210, 0.18), transparent 34rem),
    radial-gradient(ellipse at 70% 86%, rgba(78, 130, 235, 0.14), transparent 32rem),
    linear-gradient(180deg, rgba(1, 5, 15, 0.12), rgba(1, 3, 10, 0.6));
  filter: saturate(0.95) brightness(0.72) contrast(1.08);
}

.numerology-page .starfield {
  background-image:
    radial-gradient(circle, rgba(242, 223, 202, 0.56) 0 1px, transparent 1px),
    radial-gradient(circle, rgba(164, 108, 196, 0.26) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(164, 108, 196, 0.052) 1px, transparent 1px),
    linear-gradient(rgba(216, 174, 145, 0.04) 1px, transparent 1px);
  opacity: 0.42;
}

.numerology-hero {
  min-height: 100vh;
  padding-bottom: 68px;
}

.numerology-header {
  display: grid;
}

.numerology-stage {
  position: relative;
  z-index: 2;
  width: min(980px, calc(100% - 42px));
  margin: 56px auto 0;
  padding: 0 0 36px;
  text-align: center;
}

.mystic-kicker {
  margin-top: 2px;
  color: rgba(210, 161, 124, 0.7);
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.55em;
}

.numerology-stage h1 {
  max-width: none;
  margin: 10px 0 12px;
  color: #d8ae91;
  font-family: var(--serif);
  font-size: clamp(4rem, 7vw, 6.8rem);
  font-style: italic;
  font-weight: 500;
  line-height: 0.95;
  text-shadow: 0 0 36px rgba(216, 174, 145, 0.08);
}

.title-divider {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) auto minmax(72px, 1fr);
  width: min(360px, 70vw);
  align-items: center;
  gap: 18px;
  margin: 0 auto 32px;
  color: rgba(210, 161, 124, 0.38);
}

.title-divider span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210, 161, 124, 0.22), transparent);
}

.title-divider i {
  font-style: normal;
  font-size: 0.8rem;
}

.numerology-quote {
  max-width: 760px;
  margin: 0 auto;
  color: rgba(243, 238, 231, 0.66);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.7vw, 1.28rem);
  font-style: italic;
  line-height: 1.85;
}

.choice-question {
  margin: 46px 0 34px;
  color: rgba(243, 238, 231, 0.5);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.choice-card {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  gap: 18px;
  border: 1px solid rgba(216, 174, 145, 0.34);
  border-radius: 16px;
  padding: 34px 32px 30px;
  color: #f3eee7;
  background:
    radial-gradient(circle at 50% 0%, rgba(216, 174, 145, 0.08), transparent 46%),
    linear-gradient(180deg, rgba(33, 25, 25, 0.72), rgba(15, 8, 17, 0.8));
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.32);
  cursor: default;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.choice-card--love {
  border-color: rgba(164, 108, 196, 0.38);
  background:
    radial-gradient(circle at 50% 0%, rgba(164, 108, 196, 0.11), transparent 46%),
    linear-gradient(180deg, rgba(23, 18, 35, 0.78), rgba(13, 6, 19, 0.84));
}

.choice-card:hover,
.choice-card.is-selected {
  transform: translateY(-5px);
  border-color: rgba(216, 174, 145, 0.78);
  box-shadow: 0 30px 96px rgba(0, 0, 0, 0.42), 0 0 50px rgba(216, 174, 145, 0.08);
}

.choice-card--love:hover,
.choice-card--love.is-selected {
  border-color: rgba(164, 108, 196, 0.82);
  box-shadow: 0 30px 96px rgba(0, 0, 0, 0.42), 0 0 54px rgba(164, 108, 196, 0.1);
}

.choice-card__icon {
  color: #d8ae91;
  font-size: 3.5rem;
  line-height: 1;
}

.choice-card--love .choice-card__icon {
  color: #a66bc5;
}

.choice-card strong {
  color: #f2dfca;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-style: italic;
  font-weight: 650;
}

.choice-card small {
  max-width: 330px;
  color: rgba(243, 238, 231, 0.5);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.55;
}

.choice-action {
  margin-top: 8px;
  border: 0;
  padding: 8px 10px;
  color: rgba(216, 174, 145, 0.52);
  background: transparent;
  font-family: var(--serif);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 650;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.choice-action:hover {
  color: rgba(242, 223, 202, 0.92);
  transform: translateX(3px);
}

.reader-panel {
  position: relative;
  z-index: 2;
  width: min(980px, calc(100% - 42px));
  margin: -10px auto 72px;
}

.reader-panel[hidden] {
  display: none;
}

.reader-back {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 0;
  padding: 0;
  color: rgba(216, 174, 145, 0.62);
  background: transparent;
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  cursor: pointer;
}

.reader-back:hover {
  color: #f2dfca;
}

.reader-quote {
  display: grid;
  gap: 18px;
  margin: 34px auto 48px;
  text-align: center;
}

.reader-quote span {
  color: rgba(216, 174, 145, 0.58);
  font-family: var(--serif);
  letter-spacing: 0.5em;
}

.reader-quote p {
  max-width: 760px;
  margin: 0 auto;
  color: rgba(243, 238, 231, 0.62);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-style: italic;
  line-height: 1.8;
}

.reader-panel__inner {
  border: 1px solid rgba(216, 174, 145, 0.28);
  border-radius: 18px;
  padding: 40px 36px 36px;
  background:
    radial-gradient(circle at 50% 0%, rgba(216, 174, 145, 0.08), transparent 46%),
    rgba(13, 9, 16, 0.86);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(18px);
}

.reader-panel__heading {
  display: none;
  margin-bottom: 28px;
  text-align: center;
}

.reader-panel__heading h2 {
  margin: 0;
  color: #f2dfca;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-style: italic;
  font-weight: 500;
}

.numerology-form--dark {
  gap: 20px;
}

.reader-panel .gender-group,
.reader-panel .birth-grid .date-group:nth-child(2) {
  display: none;
}

.reader-panel .birth-grid {
  grid-template-columns: 1fr;
}

.reader-panel .numerology-form--dark {
  width: min(574px, 100%);
  margin: 0 auto;
  grid-template-columns: 1fr;
}

.love-profile-card {
  display: grid;
  gap: 20px;
}

.love-profile-card__title {
  display: none;
}

.reader-panel .numerology-form--dark.is-love-mode {
  width: min(760px, 100%);
  gap: 36px;
}

.numerology-form--dark.is-love-mode .love-profile-card {
  border: 1px solid rgba(164, 108, 196, 0.28);
  border-radius: 18px;
  padding: 30px 32px;
  background:
    radial-gradient(circle at 12% 0%, rgba(164, 108, 196, 0.08), transparent 22rem),
    rgba(18, 12, 28, 0.74);
}

.numerology-form--dark.is-love-mode .love-profile-card--first {
  border-color: rgba(216, 174, 145, 0.28);
}

.numerology-form--dark.is-love-mode .love-profile-card__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(216, 174, 145, 0.7);
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.numerology-form--dark.is-love-mode .love-profile-card__title span {
  color: #f2dfca;
  font-size: 1.05rem;
  letter-spacing: 0;
}

.love-form-divider {
  position: relative;
  display: grid;
  width: min(180px, 55%);
  place-items: center;
  margin: 0 auto;
  color: rgba(216, 174, 145, 0.6);
  font-family: var(--serif);
}

.partner-field[hidden] {
  display: none !important;
}

.love-form-divider::before,
.love-form-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 174, 145, 0.28));
}

.love-form-divider::before {
  right: calc(50% + 24px);
}

.love-form-divider::after {
  left: calc(50% + 24px);
  transform: scaleX(-1);
}

.numerology-form--dark .field span,
.numerology-form--dark .gender-group legend,
.numerology-form--dark .date-group legend {
  color: rgba(242, 223, 202, 0.86);
  font-family: var(--serif);
  font-size: 0.98rem;
}

.numerology-form--dark .gender-group label {
  color: rgba(243, 238, 231, 0.78);
}

.numerology-form--dark .field input,
.numerology-form--dark .field textarea,
.numerology-form--dark select {
  border-color: rgba(216, 174, 145, 0.24);
  color: #f3eee7;
  background-color: rgba(5, 5, 9, 0.64);
}

.numerology-form--dark .field input::placeholder,
.numerology-form--dark .field textarea::placeholder {
  color: rgba(243, 238, 231, 0.3);
}

.numerology-form--dark .field input:focus,
.numerology-form--dark .field textarea:focus,
.numerology-form--dark select:focus {
  border-color: rgba(216, 174, 145, 0.72);
  background-color: rgba(5, 5, 9, 0.82);
  box-shadow: 0 0 0 4px rgba(216, 174, 145, 0.08);
}

.numerology-form--dark select {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(216, 174, 145, 0.86) 50%),
    linear-gradient(135deg, rgba(216, 174, 145, 0.86) 50%, transparent 50%);
}

.numerology-submit--dark {
  color: #120e14;
  background: linear-gradient(135deg, #d8ae91, #f2dfca);
  box-shadow: 0 18px 44px rgba(216, 174, 145, 0.18);
}

.numerology-submit--dark:hover {
  box-shadow: 0 22px 58px rgba(216, 174, 145, 0.26);
}

.numerology-page .results {
  padding-top: 26px;
}

.numerology-reading {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 54px;
  width: min(1120px, calc(100% - 42px));
  margin: 0 auto;
  padding: 24px 0 96px;
}

.numerology-reading[hidden] {
  display: none;
}

.number-reading-hero {
  text-align: center;
}

.number-reading-hero h2 {
  margin: 8px 0 4px;
  color: #f2dfca;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-style: italic;
  font-weight: 500;
}

.number-reading-hero p {
  margin: 0;
  color: rgba(243, 238, 231, 0.52);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
}

.number-orbit-chart {
  position: relative;
  width: min(720px, calc(100vw - 52px));
  aspect-ratio: 1;
  margin: 0 auto;
}

.number-orbit-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(216, 174, 145, 0.12);
  border-radius: 50%;
}

.number-orbit-ring--middle {
  inset: 70px;
  border-color: rgba(216, 174, 145, 0.18);
}

.number-orbit-ring--inner {
  inset: 210px;
  border-color: rgba(216, 174, 145, 0.24);
  box-shadow: 0 0 100px rgba(216, 174, 145, 0.08);
}

.number-orbit-center {
  position: absolute;
  inset: 50%;
  display: grid;
  width: 150px;
  height: 150px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px solid rgba(216, 174, 145, 0.62);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(216, 174, 145, 0.28), rgba(18, 10, 20, 0.96) 68%);
  box-shadow: 0 0 80px rgba(216, 174, 145, 0.18);
  transform: translate(-50%, -50%);
}

.number-orbit-center strong,
.number-orb-node strong {
  color: #d8ae91;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
}

.number-orbit-center strong {
  font-size: 4.1rem;
  line-height: 0.88;
}

.number-orbit-center span,
.number-orb-node span {
  color: rgba(216, 174, 145, 0.56);
  font-family: var(--serif);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.number-orb-node {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 122px;
  min-height: 154px;
  place-items: center;
  align-content: start;
  gap: 7px;
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateY(calc(-1 * min(310px, 38vw)))
    rotate(calc(-1 * var(--angle)));
}

.number-orb-node i {
  color: rgba(216, 174, 145, 0.72);
  font-style: normal;
  font-size: 1rem;
}

.number-orb-node strong {
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
  border: 1px solid rgba(216, 174, 145, 0.45);
  border-radius: 50%;
  background: rgba(14, 8, 19, 0.92);
  font-size: 2rem;
}

.number-orb-node.is-master strong {
  border-color: rgba(164, 108, 196, 0.66);
  color: #c59ae0;
}

.number-orb-node em {
  border-radius: 999px;
  padding: 4px 10px;
  color: #211512;
  background: #c7a383;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.featured-number-card,
.number-story-card,
.name-analysis-card,
.calculation-proof-card,
.final-conclusion-card,
.number-guidance-card,
.number-detail-card {
  border: 1px solid rgba(164, 108, 196, 0.28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(164, 108, 196, 0.1), transparent 22rem),
    rgba(13, 8, 18, 0.84);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
}

.featured-number-card {
  display: grid;
  gap: 22px;
  padding: 48px;
}

.featured-number-card header span,
.number-story-label strong,
.name-analysis-card .number-section-heading p {
  color: rgba(216, 174, 145, 0.68);
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.featured-number-card header p {
  margin: 16px 0 0;
  color: rgba(243, 238, 231, 0.56);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 800;
}

.featured-number-card h3 {
  margin: 0;
  color: #f2dfca;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-style: italic;
  font-weight: 500;
}

.featured-number-card > p,
.number-shadow strong,
.number-story-prose,
.number-detail-card p {
  color: rgba(243, 238, 231, 0.74);
  font-size: 1.12rem;
  font-weight: 750;
  line-height: 1.72;
}

.number-shadow {
  border: 1px solid rgba(164, 108, 196, 0.24);
  border-radius: 10px;
  padding: 20px 22px;
  background: rgba(164, 108, 196, 0.08);
}

.number-shadow span {
  display: block;
  margin-bottom: 8px;
  color: rgba(164, 108, 196, 0.82);
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.featured-clarity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.featured-clarity-grid article {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(216, 174, 145, 0.2);
  border-radius: 12px;
  padding: 20px;
  background: rgba(5, 5, 9, 0.38);
}

.featured-clarity-grid .featured-clarity-action {
  grid-column: span 2;
  border-color: rgba(216, 174, 145, 0.34);
  background:
    radial-gradient(circle at 12% 0%, rgba(216, 174, 145, 0.1), transparent 18rem),
    rgba(18, 12, 14, 0.72);
}

.featured-clarity-grid span {
  color: rgba(216, 174, 145, 0.72);
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.featured-clarity-grid p {
  margin: 0;
  color: rgba(243, 238, 231, 0.76);
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.66;
}

.number-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.number-tags em {
  border: 1px solid rgba(216, 174, 145, 0.32);
  border-radius: 999px;
  padding: 8px 13px;
  color: rgba(216, 174, 145, 0.78);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.number-section-heading {
  text-align: center;
}

.number-section-heading p {
  margin: 0 0 10px;
  color: rgba(216, 174, 145, 0.64);
  font-family: var(--serif);
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.number-section-heading h2 {
  margin: 0;
  color: #f2dfca;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-style: italic;
  font-weight: 500;
}

.number-story-card {
  padding: 42px 44px;
}

.number-story-card--gold {
  border-color: rgba(216, 174, 145, 0.42);
  background:
    radial-gradient(circle at 12% 0%, rgba(216, 174, 145, 0.12), transparent 24rem),
    rgba(23, 15, 17, 0.86);
}

.number-story-card--rose {
  border-color: rgba(228, 127, 141, 0.38);
  background:
    radial-gradient(circle at 12% 0%, rgba(228, 127, 141, 0.09), transparent 24rem),
    rgba(21, 8, 17, 0.86);
}

.number-story-label {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.number-story-label span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(216, 174, 145, 0.46);
  border-radius: 50%;
  color: #d8ae91;
  font-size: 1.2rem;
}

.number-story-label::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, rgba(216, 174, 145, 0.34), transparent);
}

.number-story-prose {
  margin: 0;
}

.number-story-prose b {
  float: left;
  margin: 0 8px 0 0;
  color: #d8ae91;
  font-family: var(--serif);
  font-size: 4.6rem;
  font-style: italic;
  font-weight: 500;
  line-height: 0.92;
}

.number-reading-quote {
  position: relative;
  width: min(760px, 92%);
  margin: -8px auto;
  border: 1px solid rgba(216, 174, 145, 0.3);
  border-radius: 16px;
  padding: 34px 56px;
  background: rgba(10, 7, 13, 0.72);
  text-align: center;
}

.number-reading-quote::before,
.number-reading-quote::after {
  position: absolute;
  color: rgba(216, 174, 145, 0.44);
  font-family: var(--serif);
  font-size: 3.2rem;
}

.number-reading-quote::before {
  content: "“";
  top: 12px;
  left: 24px;
}

.number-reading-quote::after {
  content: "”";
  right: 24px;
  bottom: -4px;
}

.number-reading-quote p {
  margin: 0;
  color: #f2dfca;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-style: italic;
  line-height: 1.55;
}

.compat-hero {
  display: grid;
  justify-items: center;
  gap: 28px;
  padding: 24px 0 12px;
  text-align: center;
}

.compat-hero h2,
.compat-hero h3 {
  margin: 0;
  color: #d8ae91;
  font-family: var(--serif);
  font-size: clamp(3rem, 7vw, 5.2rem);
  font-style: italic;
  font-weight: 500;
}

.compat-hero h3 {
  color: #f2dfca;
  font-size: clamp(2rem, 5vw, 3.6rem);
}

.compat-hero p {
  max-width: 760px;
  margin: 0;
  color: rgba(243, 238, 231, 0.58);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.75;
}

.compat-profiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 10vw, 120px);
  align-items: start;
  width: min(760px, 100%);
  margin: 0 auto;
}

.compat-profile {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.compat-orbit {
  position: relative;
  display: grid;
  width: 180px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(216, 174, 145, 0.2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 174, 145, 0.08), transparent 62%);
}

.compat-profile--second .compat-orbit {
  border-color: rgba(164, 108, 196, 0.24);
  background: radial-gradient(circle, rgba(164, 108, 196, 0.1), transparent 62%);
}

.compat-orbit span {
  position: absolute;
  inset: 40px;
  border: 2px solid rgba(216, 174, 145, 0.6);
  border-radius: 50%;
}

.compat-profile--second .compat-orbit span {
  border-color: rgba(243, 238, 231, 0.78);
}

.compat-orbit strong {
  color: #d8ae91;
  font-family: var(--serif);
  font-size: 2.4rem;
  font-style: italic;
  font-weight: 500;
}

.compat-profile--second .compat-orbit strong {
  color: #c59ae0;
}

.compat-profile h3 {
  margin: 0;
  color: #d8ae91;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 500;
}

.compat-profile--second h3 {
  color: #c59ae0;
}

.compat-profile p {
  margin: 0;
  color: rgba(243, 238, 231, 0.46);
  font-size: 0.92rem;
  font-style: italic;
  font-weight: 800;
}

.compat-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.compat-chips em {
  border: 1px solid rgba(216, 174, 145, 0.24);
  border-radius: 999px;
  padding: 4px 9px;
  color: rgba(243, 238, 231, 0.68);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
}

.compat-score-panel {
  display: grid;
  justify-items: center;
  gap: 26px;
  width: min(760px, 100%);
  margin: 0 auto;
}

.compat-score-circle {
  display: grid;
  width: 130px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid rgba(216, 174, 145, 0.46);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 174, 145, 0.12), rgba(13, 8, 18, 0.9) 68%);
  box-shadow: 0 0 50px rgba(216, 174, 145, 0.12);
}

.compat-score-circle span {
  align-self: end;
  color: rgba(216, 174, 145, 0.52);
  font-family: var(--serif);
  font-size: 0.64rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.compat-score-circle strong {
  align-self: start;
  color: #d8ae91;
  font-family: var(--serif);
  font-size: 2.6rem;
  font-style: italic;
  font-weight: 500;
}

.compat-score-bars {
  display: grid;
  gap: 22px;
  width: 100%;
}

.compat-score-row {
  display: grid;
  gap: 10px;
}

.compat-score-row div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: rgba(243, 238, 231, 0.68);
  font-family: var(--serif);
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.compat-score-row strong {
  color: #f2dfca;
  font-size: 1.55rem;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

.compat-score-row i {
  display: block;
  height: 7px;
  border: 1px solid rgba(243, 238, 231, 0.1);
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--bar-color, #d8ae91) var(--score), transparent 0),
    rgba(243, 238, 231, 0.06);
}

.compat-score-row--love {
  --bar-color: #cf6078;
}

.compat-score-row--career {
  --bar-color: #9c8069;
}

.compat-score-row--spiritual {
  --bar-color: #775195;
}

.compat-score-panel > p {
  margin: 0;
  color: rgba(243, 238, 231, 0.46);
  font-family: var(--serif);
  font-size: 0.98rem;
  font-style: italic;
  text-align: center;
}

.compat-identity-card,
.compat-module {
  width: min(900px, 100%);
  margin: 0 auto;
}

.compat-identity-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  border: 1px solid rgba(216, 174, 145, 0.25);
  border-radius: 18px;
  padding: clamp(22px, 4vw, 34px);
  background:
    linear-gradient(135deg, rgba(216, 174, 145, 0.12), rgba(119, 81, 149, 0.12)),
    rgba(2, 6, 18, 0.5);
  text-align: center;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
}

.compat-identity-card p {
  margin: 0;
  color: rgba(216, 174, 145, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.compat-identity-card h3 {
  margin: 0;
  color: #f2dfca;
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-style: italic;
  font-weight: 500;
}

.compat-identity-card strong {
  color: #d8ae91;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 600;
}

.compat-identity-card span {
  max-width: 720px;
  color: rgba(243, 238, 231, 0.68);
  font-size: 1rem;
  font-weight: 720;
  line-height: 1.7;
}

.compat-module {
  display: grid;
  gap: 20px;
}

.compat-dynamics-summary {
  max-width: 820px;
  margin: 0 auto;
  color: rgba(243, 238, 231, 0.68);
  font-family: var(--serif);
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.75;
  text-align: center;
}

.compat-dynamics-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.compat-dynamics-flow article {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 260px;
  border: 1px solid rgba(216, 174, 145, 0.2);
  border-radius: 16px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(216, 174, 145, 0.08), rgba(2, 6, 18, 0.5)),
    rgba(2, 6, 18, 0.5);
}

.compat-dynamics-flow article:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 30px;
  right: -12px;
  width: 12px;
  height: 1px;
  background: rgba(216, 174, 145, 0.36);
}

.compat-dynamics-flow span {
  color: rgba(216, 174, 145, 0.5);
  font-family: var(--serif);
  font-size: 1.35rem;
  font-style: italic;
}

.compat-dynamics-flow em {
  color: rgba(216, 174, 145, 0.82);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.compat-dynamics-flow h3 {
  margin: 0;
  color: #f2dfca;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.25;
}

.compat-dynamics-flow b {
  color: rgba(243, 238, 231, 0.52);
  font-size: 0.78rem;
  line-height: 1.5;
}

.compat-dynamics-flow p {
  margin: 0;
  color: rgba(243, 238, 231, 0.68);
  font-size: 0.92rem;
  font-weight: 720;
  line-height: 1.6;
}

.compat-strength-grid,
.compat-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.compat-strength-grid article,
.compat-card-grid article,
.compat-conflict-map article {
  border: 1px solid rgba(216, 174, 145, 0.2);
  border-radius: 16px;
  background: rgba(2, 6, 18, 0.48);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18);
}

.compat-strength-grid article {
  display: grid;
  gap: 8px;
  padding: 18px;
}

.compat-strength-grid span,
.compat-card-grid h3 {
  color: rgba(216, 174, 145, 0.82);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.compat-strength-grid strong {
  color: #f6bd69;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
}

.compat-strength-grid em {
  color: rgba(243, 238, 231, 0.6);
  font-style: normal;
  font-weight: 850;
}

.compat-conflict-map {
  display: grid;
  gap: 14px;
}

.compat-conflict-map article {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.compat-conflict-map div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.compat-conflict-map span {
  color: rgba(243, 238, 231, 0.78);
  font-weight: 900;
}

.compat-conflict-map b {
  color: rgba(216, 174, 145, 0.64);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
}

.compat-conflict-map strong {
  color: #f2dfca;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-style: italic;
}

.compat-conflict-map i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #cf6078 var(--score), transparent 0),
    rgba(243, 238, 231, 0.08);
}

.compat-conflict-map p,
.compat-card-grid p,
.compat-card-grid li {
  margin: 0;
  color: rgba(243, 238, 231, 0.68);
  font-size: 0.95rem;
  font-weight: 720;
  line-height: 1.65;
}

.compat-card-grid article {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 20px;
}

.compat-card-grid h3 {
  margin: 0;
}

.compat-card-grid ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.compat-quote {
  width: min(860px, 94%);
}

.compat-chapter-flow {
  display: grid;
  gap: 18px;
}

.compat-chapter-step {
  display: grid;
  justify-items: center;
  gap: 18px;
}

.compat-flow-arrow {
  color: rgba(216, 174, 145, 0.48);
  font-family: var(--serif);
  font-size: 2.2rem;
  line-height: 1;
}

.compat-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.compat-actions button {
  border: 1px solid rgba(216, 174, 145, 0.28);
  border-radius: 999px;
  padding: 14px 24px;
  color: rgba(243, 238, 231, 0.72);
  background: rgba(10, 7, 13, 0.72);
  font-weight: 900;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.compat-actions button:hover {
  border-color: rgba(216, 174, 145, 0.56);
  color: #f2dfca;
}

.number-guidance-panel {
  display: grid;
  gap: 30px;
}

.number-guidance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.number-guidance-card {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 280px;
  padding: 30px;
}

.number-guidance-card--self,
.number-guidance-card--timing {
  grid-column: span 2;
  border-color: rgba(216, 174, 145, 0.38);
  background:
    radial-gradient(circle at 10% 0%, rgba(216, 174, 145, 0.12), transparent 24rem),
    rgba(18, 11, 16, 0.88);
}

.number-guidance-card header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
}

.number-guidance-card header span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(216, 174, 145, 0.42);
  border-radius: 50%;
  color: #d8ae91;
  font-family: var(--serif);
  font-size: 1.05rem;
}

.number-guidance-card h3 {
  margin: 0;
  color: #f2dfca;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-style: italic;
  font-weight: 500;
}

.number-guidance-card p {
  margin: 0;
  color: rgba(243, 238, 231, 0.76);
  font-size: 1.03rem;
  font-weight: 750;
  line-height: 1.75;
}

.number-guidance-questions {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.number-guidance-questions li {
  border-left: 2px solid rgba(216, 174, 145, 0.42);
  padding-left: 12px;
  color: rgba(243, 238, 231, 0.7);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.55;
}

.number-guidance-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.number-guidance-anchors em {
  border: 1px solid rgba(164, 108, 196, 0.28);
  border-radius: 999px;
  padding: 8px 12px;
  color: rgba(216, 174, 145, 0.78);
  background: rgba(164, 108, 196, 0.08);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.4;
}

.number-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.number-detail-card {
  padding: 26px;
}

.number-detail-card header {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.number-detail-card header span {
  color: rgba(216, 174, 145, 0.64);
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.number-detail-card header strong {
  color: #f2dfca;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-style: italic;
  font-weight: 500;
}

.number-detail-card p {
  margin: 0 0 18px;
  font-size: 1rem;
}

.advanced-number-panel {
  display: grid;
  gap: 22px;
}

.birth-chart-layout,
.advanced-number-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.birth-chart-card,
.cycle-card {
  border: 1px solid rgba(164, 108, 196, 0.28);
  border-radius: 18px;
  padding: 28px;
  background:
    radial-gradient(circle at 12% 0%, rgba(216, 174, 145, 0.1), transparent 22rem),
    rgba(13, 8, 18, 0.84);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
}

.engine-summary-card {
  border: 1px solid rgba(247, 193, 111, 0.32);
  border-radius: 18px;
  padding: 30px;
  background:
    radial-gradient(circle at 18% 0%, rgba(247, 193, 111, 0.12), transparent 24rem),
    rgba(13, 8, 18, 0.88);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
}

.engine-summary-card > span {
  display: block;
  margin-bottom: 8px;
  color: rgba(216, 174, 145, 0.72);
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.engine-summary-card h3 {
  margin: 0 0 16px;
  color: #f2dfca;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  font-style: italic;
  font-weight: 500;
}

.engine-summary-card div {
  display: grid;
  gap: 10px;
}

.engine-summary-card p {
  margin: 0;
  color: rgba(243, 238, 231, 0.78);
  font-size: 1.02rem;
  font-weight: 760;
  line-height: 1.68;
}

.life-application-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.life-application-card {
  border: 1px solid rgba(164, 108, 196, 0.28);
  border-radius: 18px;
  padding: 26px;
  background:
    radial-gradient(circle at 12% 0%, rgba(164, 108, 196, 0.11), transparent 20rem),
    rgba(13, 8, 18, 0.86);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}

.life-application-card header {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.life-application-card header span {
  color: rgba(216, 174, 145, 0.68);
  font-family: var(--serif);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.life-application-card header strong {
  color: #f2dfca;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-style: italic;
  font-weight: 520;
}

.career-rank-list,
.love-trait-list {
  display: grid;
  gap: 12px;
}

.career-rank-list div,
.money-score-grid div,
.love-trait-list p {
  border: 1px solid rgba(216, 174, 145, 0.18);
  border-radius: 12px;
  padding: 14px;
  background: rgba(2, 6, 18, 0.34);
}

.career-rank-list span,
.money-score-grid span,
.love-trait-list b {
  display: block;
  margin-bottom: 4px;
  color: rgba(216, 174, 145, 0.72);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.career-rank-list strong,
.money-score-grid strong {
  display: block;
  color: #f7c16f;
  font-size: 1.08rem;
  font-weight: 950;
  letter-spacing: 0.05em;
}

.career-rank-list p,
.life-application-card > p,
.love-trait-list p,
.life-application-card small {
  margin: 0;
  color: rgba(243, 238, 231, 0.72);
  font-size: 0.92rem;
  font-weight: 720;
  line-height: 1.58;
}

.career-rank-list ul {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.career-rank-list li {
  position: relative;
  padding-left: 18px;
  color: rgba(243, 238, 231, 0.68);
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.45;
}

.career-rank-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #f7c16f;
  font-weight: 950;
}

.life-application-card > p {
  margin-top: 14px;
}

.life-application-card small {
  display: block;
  margin-top: 12px;
  color: rgba(216, 174, 145, 0.78);
}

.money-score-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.insight-widget-panel {
  display: grid;
  gap: 18px;
}

.meaning-conflict-grid,
.widget-grid-compact {
  display: grid;
  gap: 18px;
}

.meaning-conflict-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.widget-grid-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.insight-widget-card {
  border: 1px solid rgba(164, 108, 196, 0.28);
  border-radius: 18px;
  padding: 26px;
  background:
    radial-gradient(circle at 12% 0%, rgba(247, 193, 111, 0.1), transparent 20rem),
    rgba(13, 8, 18, 0.86);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}

.insight-widget-card header {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.insight-widget-card header span {
  color: rgba(216, 174, 145, 0.68);
  font-family: var(--serif);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.insight-widget-card header strong {
  color: #f2dfca;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 520;
}

.meaning-flow {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.meaning-flow span,
.conflict-pair-list span,
.archetype-roles b,
.growth-path-flow span,
.year-journal-grid span {
  color: rgba(216, 174, 145, 0.76);
  font-size: 0.72rem;
  font-weight: 860;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.meaning-flow span {
  min-width: min(260px, 100%);
  border: 1px solid rgba(216, 174, 145, 0.24);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(2, 6, 18, 0.36);
  color: #f2dfca;
  text-align: center;
}

.meaning-flow i,
.growth-path-flow > i {
  color: #f7c16f;
  font-style: normal;
  font-weight: 900;
}

.insight-widget-card p,
.insight-widget-card small {
  margin: 0;
  color: rgba(243, 238, 231, 0.72);
  font-size: 0.92rem;
  font-weight: 720;
  line-height: 1.58;
}

.insight-widget-card small {
  display: block;
  margin-top: 10px;
  color: rgba(216, 174, 145, 0.78);
}

.conflict-pair-list,
.balance-list,
.archetype-roles,
.growth-path-flow,
.year-journal-grid {
  display: grid;
  gap: 12px;
}

.conflict-pair-list section {
  display: grid;
  gap: 10px;
}

.conflict-pair-list h4 {
  margin: 0;
  color: rgba(216, 174, 145, 0.78);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.conflict-pair-list div,
.archetype-roles p,
.growth-path-flow div,
.year-journal-grid div {
  border: 1px solid rgba(216, 174, 145, 0.18);
  border-radius: 12px;
  padding: 14px;
  background: rgba(2, 6, 18, 0.34);
}

.conflict-pair-list div {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}

.conflict-pair-list b {
  color: #f7c16f;
  font-size: 0.78rem;
  font-weight: 950;
}

.conflict-pair-list p {
  grid-column: 1 / -1;
}

.balance-list p {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
}

.balance-list span {
  color: rgba(243, 238, 231, 0.78);
  font-weight: 850;
}

.balance-list strong {
  color: #f7c16f;
}

.balance-list i {
  grid-column: 1 / -1;
  height: 7px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(247, 193, 111, 0.85) var(--score), rgba(255, 255, 255, 0.08) var(--score));
}

.today-number {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 14px;
  border: 1px solid rgba(247, 193, 111, 0.55);
  border-radius: 999px;
  color: #f7c16f;
  font-size: 2rem;
  font-weight: 950;
}

.name-score-ring {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: 14px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(13, 8, 18, 0.96) 0 58%, transparent 59%),
    conic-gradient(rgba(247, 193, 111, 0.9) var(--score), rgba(255, 255, 255, 0.08) var(--score));
}

.name-score-ring span {
  color: #f7c16f;
  font-size: 1.7rem;
  font-weight: 950;
}

.growth-path-flow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.growth-path-flow > i {
  display: none;
}

.growth-path-flow strong,
.year-journal-grid strong {
  display: block;
  margin: 6px 0;
  color: #f2dfca;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-style: italic;
  font-weight: 520;
}

.year-journal-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.year-journal-grid div.is-current {
  border-color: rgba(247, 193, 111, 0.72);
  box-shadow: 0 0 0 1px rgba(247, 193, 111, 0.24);
}

.birth-chart-card header,
.cycle-card header {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.birth-chart-card header span,
.cycle-card header span {
  color: rgba(216, 174, 145, 0.66);
  font-family: var(--serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.birth-chart-card header strong,
.cycle-card header strong {
  color: #f2dfca;
  font-family: var(--serif);
  font-size: 1.55rem;
  font-style: italic;
  font-weight: 500;
}

.radar-card {
  display: grid;
}

.radar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.78fr);
  align-items: center;
  gap: 18px;
}

.radar-svg {
  width: 100%;
  max-width: 310px;
  justify-self: center;
  overflow: visible;
}

.radar-ring {
  fill: none;
  stroke: rgba(216, 174, 145, 0.16);
  stroke-width: 1;
}

.radar-axis {
  stroke: rgba(164, 108, 196, 0.24);
  stroke-width: 1;
}

.radar-area {
  fill: rgba(247, 193, 111, 0.22);
  stroke: rgba(247, 193, 111, 0.82);
  stroke-width: 2;
}

.radar-dot {
  fill: #f7c16f;
}

.radar-label {
  fill: rgba(243, 238, 231, 0.78);
  font-size: 9px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: middle;
}

.radar-score-list {
  display: grid;
  gap: 10px;
}

.radar-score-list p {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  margin: 0;
  color: rgba(243, 238, 231, 0.78);
  font-size: 0.9rem;
  font-weight: 800;
}

.radar-score-list i {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(247, 193, 111, 0.85) var(--score), rgba(255, 255, 255, 0.08) var(--score));
}

.birth-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.birth-chart-cell {
  min-height: 96px;
  border: 1px solid rgba(216, 174, 145, 0.28);
  border-radius: 12px;
  padding: 14px 10px;
  background: rgba(255, 255, 255, 0.045);
  text-align: center;
}

.birth-chart-cell span,
.mini-number-card span,
.month-cycle-item span {
  display: block;
  color: rgba(216, 174, 145, 0.7);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.birth-chart-cell strong {
  display: block;
  min-height: 32px;
  margin: 6px 0;
  color: #f2dfca;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.birth-chart-cell em,
.mini-number-card em,
.month-cycle-item em {
  color: rgba(243, 238, 231, 0.58);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 800;
}

.birth-chart-cell.is-missing {
  border-style: dashed;
  opacity: 0.72;
}

.number-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.heatmap-cell {
  min-height: 96px;
  border: 1px solid rgba(216, 174, 145, 0.18);
  border-radius: 12px;
  padding: 14px 10px;
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}

.heatmap-cell span,
.heatmap-cell em {
  display: block;
  color: rgba(243, 238, 231, 0.58);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.heatmap-cell strong {
  display: block;
  min-height: 32px;
  margin: 6px 0;
  color: #fff7ed;
  font-size: 1.42rem;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.heat-0 {
  border-style: dashed;
  opacity: 0.58;
}

.heat-1 { background: rgba(164, 108, 196, 0.07); }
.heat-2 { background: rgba(164, 108, 196, 0.12); }
.heat-3 { background: rgba(216, 174, 145, 0.16); }
.heat-4 { background: rgba(247, 193, 111, 0.22); }
.heat-5 {
  border-color: rgba(247, 193, 111, 0.58);
  background: rgba(247, 193, 111, 0.32);
}

.heatmap-notes {
  display: grid;
  gap: 10px;
}

.heatmap-notes p {
  margin: 0;
  color: rgba(243, 238, 231, 0.72);
  font-size: 0.92rem;
  font-weight: 720;
  line-height: 1.55;
}

.birth-chart-card > p,
.arrow-list p,
.mini-number-card p,
.month-cycle-item p {
  margin: 0;
  color: rgba(243, 238, 231, 0.74);
  font-size: 0.96rem;
  font-weight: 720;
  line-height: 1.62;
}

.life-timeline-card {
  overflow: hidden;
}

.life-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.life-timeline::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, rgba(247, 193, 111, 0.1), rgba(247, 193, 111, 0.78), rgba(247, 193, 111, 0.1));
}

.life-timeline-item {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(216, 174, 145, 0.2);
  border-radius: 12px;
  padding: 18px 14px 14px;
  background: rgba(2, 6, 18, 0.58);
}

.life-timeline-item::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid rgba(247, 193, 111, 0.9);
  border-radius: 999px;
  background: #0b0710;
}

.life-timeline-item span {
  color: rgba(216, 174, 145, 0.74);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.life-timeline-item strong {
  color: #f2dfca;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 520;
}

.life-timeline-item p {
  margin: 0;
  color: rgba(243, 238, 231, 0.72);
  font-size: 0.88rem;
  font-weight: 720;
  line-height: 1.55;
}

.arrow-list {
  display: grid;
  gap: 12px;
}

.arrow-list p {
  border: 1px solid rgba(164, 108, 196, 0.22);
  border-radius: 12px;
  padding: 14px 16px;
  background: rgba(164, 108, 196, 0.07);
}

.arrow-list p.is-empty {
  border-color: rgba(216, 174, 145, 0.22);
  background: rgba(216, 174, 145, 0.06);
}

.arrow-list b {
  display: block;
  margin-bottom: 4px;
  color: #d8ae91;
}

.mini-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mini-number-card,
.month-cycle-item {
  border: 1px solid rgba(216, 174, 145, 0.2);
  border-radius: 12px;
  padding: 16px;
  background: rgba(2, 6, 18, 0.38);
}

.mini-number-card strong,
.month-cycle-item strong {
  display: block;
  margin: 8px 0 2px;
  color: #f7c16f;
  font-size: 1.7rem;
  font-weight: 950;
}

.mini-number-card small {
  display: block;
  margin-top: 10px;
  color: rgba(216, 174, 145, 0.78);
  font-size: 0.86rem;
  font-weight: 780;
  line-height: 1.5;
}

.personal-month-card {
  display: grid;
  gap: 12px;
}

.month-cycle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.month-cycle-item.is-current {
  border-color: rgba(247, 193, 111, 0.72);
  box-shadow: 0 0 0 1px rgba(247, 193, 111, 0.24);
}

.number-meaning-stack {
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
}

.number-meaning-stack p {
  margin: 0;
  color: rgba(243, 238, 231, 0.76);
  font-size: 0.98rem;
  font-weight: 720;
  line-height: 1.68;
}

.number-meaning-stack b {
  display: block;
  margin-bottom: 4px;
  color: rgba(216, 174, 145, 0.82);
  font-family: var(--serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.engine-reasoning,
.mini-engine-details {
  border: 1px solid rgba(216, 174, 145, 0.22);
  border-radius: 14px;
  background: rgba(2, 6, 18, 0.42);
}

.engine-reasoning {
  padding: 0;
}

.engine-reasoning summary,
.mini-engine-details summary {
  cursor: pointer;
  padding: 16px 18px;
  color: rgba(216, 174, 145, 0.86);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.engine-reasoning div {
  display: grid;
  gap: 12px;
  padding: 0 18px 18px;
}

.engine-reasoning p {
  margin: 0;
  color: rgba(243, 238, 231, 0.72);
  font-size: 0.94rem;
  font-weight: 720;
  line-height: 1.6;
}

.engine-reasoning b {
  display: block;
  margin-bottom: 3px;
  color: rgba(216, 174, 145, 0.78);
}

.mini-engine-details {
  margin-top: 12px;
}

.mini-engine-details summary {
  padding: 12px 14px;
  font-size: 0.76rem;
}

.mini-engine-details .archetype-roles {
  padding: 0 12px 12px;
}

.name-analysis-card {
  padding: 40px 34px 34px;
}

.name-spell {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin: 34px 0 22px;
}

.name-word {
  display: grid;
  gap: 8px;
  text-align: center;
}

.name-word strong {
  color: #d8ae91;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.42em;
}

.name-word span {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.name-word i {
  color: rgba(216, 174, 145, 0.72);
  font-style: normal;
  font-weight: 900;
}

.name-word i.is-vowel {
  color: #a66bc5;
}

.name-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-bottom: 28px;
  color: rgba(243, 238, 231, 0.46);
  font-family: var(--serif);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.name-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: #c7a383;
}

.name-legend i.is-vowel {
  background: #a66bc5;
}

.name-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border-top: 1px solid rgba(216, 174, 145, 0.18);
  padding-top: 24px;
}

.name-totals article {
  display: grid;
  gap: 6px;
  text-align: center;
}

.name-totals span,
.name-totals small {
  color: rgba(243, 238, 231, 0.42);
  font-family: var(--serif);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.name-totals strong {
  color: #d8ae91;
  font-family: var(--serif);
  font-size: 2.1rem;
  font-style: italic;
  font-weight: 500;
}

.name-totals em {
  color: rgba(243, 238, 231, 0.72);
  font-style: normal;
  font-weight: 900;
}

.calculation-proof-card {
  padding: 40px 34px 34px;
  border-color: rgba(216, 174, 145, 0.34);
  background:
    radial-gradient(circle at 12% 0%, rgba(216, 174, 145, 0.1), transparent 24rem),
    rgba(14, 10, 14, 0.86);
}

.calculation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}

.calculation-grid article {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(216, 174, 145, 0.18);
  border-radius: 12px;
  padding: 20px;
  background: rgba(5, 5, 9, 0.42);
}

.calculation-grid span {
  color: rgba(216, 174, 145, 0.68);
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.calculation-grid strong {
  color: #f2dfca;
  font-family: var(--serif);
  font-size: 2.2rem;
  font-style: italic;
  font-weight: 500;
}

.calculation-grid p {
  margin: 0;
  color: rgba(243, 238, 231, 0.58);
  font-size: 0.95rem;
  font-weight: 750;
  line-height: 1.55;
}

.calculation-grid em {
  color: #d8ae91;
  font-style: normal;
  font-weight: 900;
}

.final-conclusion-card {
  display: grid;
  gap: 28px;
  padding: 48px;
  border-color: rgba(216, 174, 145, 0.42);
  background:
    radial-gradient(circle at 16% 0%, rgba(216, 174, 145, 0.13), transparent 28rem),
    radial-gradient(circle at 90% 100%, rgba(164, 108, 196, 0.08), transparent 24rem),
    rgba(14, 10, 13, 0.9);
}

.final-conclusion-subtitle {
  width: min(760px, 100%);
  margin: -8px auto 0;
  color: rgba(243, 238, 231, 0.58);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 650;
  line-height: 1.65;
  text-align: center;
}

.final-conclusion-prose {
  display: grid;
  gap: 22px;
}

.final-conclusion-prose p {
  margin: 0;
  color: rgba(243, 238, 231, 0.78);
  font-size: 1.08rem;
  font-weight: 760;
  line-height: 1.86;
}

.final-conclusion-prose p:first-child::first-letter {
  float: left;
  margin: 7px 10px 0 0;
  color: #d8ae91;
  font-family: var(--serif);
  font-size: 4.8rem;
  font-style: italic;
  line-height: 0.78;
}

.final-conclusion-actions {
  border: 1px solid rgba(216, 174, 145, 0.22);
  border-radius: 14px;
  padding: 24px 26px;
  background: rgba(5, 5, 9, 0.38);
}

.final-conclusion-actions strong {
  display: block;
  margin-bottom: 16px;
  color: rgba(216, 174, 145, 0.78);
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.final-conclusion-actions ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 22px;
}

.final-conclusion-actions li {
  padding-left: 8px;
  color: rgba(243, 238, 231, 0.72);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.62;
}

.final-conclusion-card blockquote {
  position: relative;
  width: min(860px, 100%);
  margin: 4px auto 0;
  border-top: 1px solid rgba(216, 174, 145, 0.24);
  padding: 28px 28px 0;
  color: #f2dfca;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.3vw, 2rem);
  font-style: italic;
  line-height: 1.6;
  text-align: center;
}

.results,
.method,
.history,
.tarot-spread {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 42px));
  margin: 0 auto;
}

.tarot-spread {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 96px 0 112px;
}

.tarot-inner {
  width: min(840px, 100%);
  text-align: center;
}

.tarot-inner--wide {
  width: min(1340px, 100%);
}

.tarot-progress {
  display: flex;
  width: min(290px, 70vw);
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: -76px auto 74px;
}

.tarot-progress span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(243, 238, 231, 0.2);
}

.tarot-progress span.is-active {
  background: rgba(240, 184, 106, 0.72);
}

.tarot-progress i {
  display: block;
  width: 52px;
  height: 1px;
  background: rgba(240, 184, 106, 0.22);
}

.tarot-step-panel[hidden] {
  display: none;
}

.daily-page {
  background:
    linear-gradient(180deg, rgba(4, 10, 25, 0.18), rgba(1, 3, 9, 0.78)),
    #020612 url("assets/starry-sky-bg.webp") center top / cover fixed;
}

.daily-hero {
  position: relative;
  min-height: 100vh;
  padding: 28px 0 44px;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.daily-hero .grain {
  background:
    radial-gradient(ellipse at 16% 34%, rgba(46, 107, 210, 0.16), transparent 34rem),
    linear-gradient(180deg, rgba(1, 5, 15, 0.16), rgba(1, 3, 10, 0.66));
  filter: saturate(0.95) brightness(0.68) contrast(1.08);
}

.daily-header {
  margin-bottom: clamp(34px, 5vh, 58px);
}

.daily-reading,
.daily-footer {
  position: relative;
  z-index: 2;
}

.daily-reading {
  width: min(980px, calc(100% - 42px));
  margin: 0 auto;
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
}

.daily-title-block {
  display: grid;
  justify-items: center;
  padding-top: clamp(8px, 2vh, 18px);
}

.daily-title-block h1 {
  max-width: none;
  margin: 0;
  color: #d8ad87;
  font-family: var(--serif);
  font-size: clamp(3rem, 5vw, 5.1rem);
  font-style: italic;
  font-weight: 500;
  line-height: 0.98;
}

.daily-title-dot {
  width: 5px;
  height: 5px;
  margin: 34px 0 38px;
  border-radius: 999px;
  background: rgba(216, 174, 145, 0.48);
  box-shadow: 0 0 26px rgba(216, 174, 145, 0.34);
}

.daily-title-block p {
  max-width: 760px;
  margin: 0;
  color: rgba(243, 238, 231, 0.58);
  font-family: var(--serif);
  font-size: 0.98rem;
  font-style: italic;
  font-weight: 650;
  line-height: 1.7;
}

.daily-card-area {
  display: grid;
  justify-items: center;
  margin-top: clamp(64px, 8vh, 92px);
}

.daily-kicker {
  margin: 0 0 14px;
  color: rgba(216, 174, 145, 0.72);
  font-family: var(--serif);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.daily-date {
  margin-bottom: 72px;
  color: rgba(243, 238, 231, 0.5);
  font-family: var(--serif);
  font-size: 0.9rem;
  font-style: italic;
  font-weight: 650;
}

.daily-card {
  position: relative;
  width: 230px;
  aspect-ratio: 0.62;
  border: 0;
  padding: 0;
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  perspective: 1100px;
  filter: drop-shadow(0 30px 68px rgba(0, 0, 0, 0.48));
}

.daily-card:focus-visible {
  outline: 2px solid rgba(240, 184, 106, 0.76);
  outline-offset: 8px;
}

.daily-card__back,
.daily-card__front {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(216, 174, 145, 0.68);
  border-radius: inherit;
  backface-visibility: hidden;
  transition: transform 0.8s cubic-bezier(0.2, 0.78, 0.18, 1), filter 0.25s ease;
}

.daily-card__back {
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(10, 7, 18, 0.08), rgba(10, 7, 18, 0.18)),
    url("assets/card-back-mystic.svg") center / cover no-repeat;
  box-shadow:
    inset 0 0 0 7px rgba(255, 239, 190, 0.05),
    inset 0 0 42px rgba(240, 184, 106, 0.12),
    0 0 38px rgba(164, 108, 196, 0.18);
}

.daily-card__back::before,
.daily-card__back::after,
.daily-card__back i,
.daily-card__back i::before,
.daily-card__back i::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.daily-card__back::before {
  inset: 9px;
  border: 1px solid rgba(255, 238, 190, 0.2);
  border-radius: 15px;
}

.daily-card__back::after {
  inset: 0;
  border-radius: inherit;
  mix-blend-mode: screen;
  opacity: 0.45;
  background:
    radial-gradient(circle at 50% 37%, rgba(255, 236, 180, 0.22), transparent 26%),
    linear-gradient(112deg, transparent 0 35%, rgba(255, 250, 225, 0.18), transparent 66%);
}

.daily-card__back i {
  display: none;
}

.daily-card__back i::before {
  inset: -7px;
  border: 1px solid rgba(216, 174, 145, 0.18);
  border-radius: 999px;
}

.daily-card__back i::after {
  inset: 5px;
  border-radius: 999px;
  background: rgba(255, 244, 216, 0.76);
}

.daily-card__front {
  background: rgba(15, 10, 24, 0.84);
  transform: rotateY(180deg);
}

.daily-card__front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.12) saturate(0.9) contrast(1.06);
}

.daily-card:hover .daily-card__back {
  filter: brightness(1.12);
}

.daily-card.is-revealed .daily-card__back {
  transform: rotateY(180deg);
}

.daily-card.is-revealed .daily-card__front {
  transform: rotateY(360deg);
}

.daily-card-hint {
  margin: 34px 0 0;
  color: rgba(243, 238, 231, 0.48);
  font-family: var(--serif);
  font-size: 0.9rem;
  font-style: italic;
  font-weight: 650;
}

.daily-message {
  width: min(1120px, 100%);
  margin-top: 72px;
  padding-top: 0;
  animation: reveal-card-rise 0.66s ease both;
}

.daily-message[hidden] {
  display: none;
}

.daily-reading-heading {
  display: grid;
  justify-items: center;
  margin-bottom: 42px;
  text-align: center;
}

.daily-reading-heading p {
  margin: 0 0 12px;
  color: rgba(216, 174, 145, 0.66);
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.daily-reading-heading h2 {
  margin: 0 0 14px;
  color: #f2dfca;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.5vw, 4.4rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.02;
}

.daily-reading-heading em {
  color: rgba(243, 238, 231, 0.5);
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 650;
}

.daily-reading-heading > strong {
  display: block;
  max-width: 720px;
  margin-top: 18px;
  color: #d8ae91;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.45;
}

.daily-reading-core {
  display: grid;
  gap: 38px;
  text-align: left;
}

.daily-widget-strip,
.daily-mini-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}

.daily-widget-strip article,
.daily-mini-dashboard article,
.daily-time-map,
.daily-journal-prompt {
  border: 1px solid rgba(216, 174, 145, 0.2);
  border-radius: 18px;
  background: rgba(2, 6, 18, 0.46);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18);
}

.daily-widget-strip article,
.daily-mini-dashboard article {
  display: grid;
  gap: 8px;
  padding: 18px;
}

.daily-widget-strip span,
.daily-mini-dashboard span,
.daily-journal-prompt span {
  color: rgba(216, 174, 145, 0.72);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.daily-widget-strip strong,
.daily-mini-dashboard strong {
  color: #f2dfca;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-style: italic;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.daily-mood-card {
  background:
    linear-gradient(135deg, rgba(216, 174, 145, 0.13), rgba(119, 81, 149, 0.12)),
    rgba(2, 6, 18, 0.48);
}

.daily-time-map {
  display: grid;
  gap: 18px;
  padding: 28px;
}

.daily-time-map .story-card-heading {
  margin-bottom: 0;
}

.daily-time-map > div:last-child {
  display: grid;
  gap: 14px;
}

.daily-time-map p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  color: rgba(243, 238, 231, 0.72);
  font-weight: 850;
}

.daily-time-map p strong {
  color: #f6bd69;
  letter-spacing: 0.04em;
}

.daily-ritual-card ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 22px;
  color: rgba(244, 237, 228, 0.78);
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.65;
}

.daily-journal-prompt {
  display: grid;
  gap: 12px;
  width: min(860px, 100%);
  margin: 0 auto;
  padding: 28px 32px;
  text-align: center;
}

.daily-journal-prompt p {
  margin: 0;
  color: #f2dfca;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.3vw, 1.8rem);
  font-style: italic;
  line-height: 1.5;
}

.daily-reading-core .reading-story-card {
  border-radius: 20px;
  padding: 40px 42px 44px;
}

.daily-reading-core .story-card-heading span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 1.1rem;
}

.daily-reading-core .story-prose {
  color: rgba(243, 238, 231, 0.78);
  font-size: clamp(1.16rem, 1.65vw, 1.42rem);
}

.daily-signal-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 20px;
  color: rgba(244, 237, 228, 0.78);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.65;
}

.daily-reading-quote {
  width: min(860px, calc(100% - 80px));
  margin: 0 auto;
}

.daily-card.is-daily-reversed.is-revealed .daily-card__front img {
  transform: rotate(180deg);
}

.daily-message > p {
  margin: 0;
  color: rgba(243, 238, 231, 0.64);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.75;
}

.daily-message__action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  border: 1px solid rgba(216, 174, 145, 0.28);
  border-radius: 999px;
  padding: 0 22px;
  color: rgba(216, 174, 145, 0.82);
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.daily-footer {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(980px, calc(100% - 42px));
  margin: 56px auto 0;
  color: rgba(243, 238, 231, 0.36);
  text-align: center;
}

.daily-footer::before {
  content: "✦";
  color: rgba(216, 174, 145, 0.34);
}

.daily-footer span {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.daily-footer em {
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 650;
}

.astrology-page .grain {
  background:
    radial-gradient(ellipse at 12% 32%, rgba(46, 107, 210, 0.16), transparent 34rem),
    radial-gradient(ellipse at 72% 88%, rgba(78, 130, 235, 0.13), transparent 32rem),
    linear-gradient(180deg, rgba(1, 5, 15, 0.14), rgba(1, 3, 10, 0.64));
  filter: saturate(0.95) brightness(0.7) contrast(1.08);
}

.astrology-shell,
.astrology-result {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 42px));
  margin: 0 auto;
}

.astrology-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.72fr);
  align-items: start;
  gap: 64px;
  padding: 68px 0 72px;
}

.astrology-copy h1 {
  max-width: 600px;
  margin: 18px 0 24px;
  color: #f2dfca;
  font-size: clamp(3.7rem, 6.2vw, 5.9rem);
  font-style: italic;
  line-height: 0.92;
}
.astrology-copy h1 span { display: block; }

.astrology-copy p:not(.eyebrow) {
  max-width: 620px;
  color: rgba(243, 238, 231, 0.66);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  font-style: italic;
  font-weight: 650;
  line-height: 1.72;
}

.astrology-form {
  display: grid;
  gap: 18px;
  border: 1px solid rgba(151, 173, 190, .25);
  border-radius: 8px;
  padding: 30px;
  background:
    radial-gradient(circle at 92% 0%, rgba(101, 216, 205, .09), transparent 17rem),
    rgba(7, 9, 16, .9);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .34);
  backdrop-filter: blur(20px);
}
.astrology-form__heading { display: flex; gap: 14px; align-items: center; margin-bottom: 4px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.astrology-form__mark { display: grid; flex: 0 0 42px; width: 42px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(101, 216, 205, .4); border-radius: 50%; color: var(--cyan) !important; font-family: inherit !important; font-size: 1rem !important; letter-spacing: 0 !important; }
.astrology-form__heading p { margin: 0 0 3px; color: var(--cyan); font-size: .64rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.astrology-form__heading h2 { margin: 0; color: var(--text); font: 500 1.55rem var(--serif); }

.astrology-form label {
  display: grid;
  gap: 10px;
}

.astrology-form span {
  color: rgba(240, 184, 106, 0.68);
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.astrology-form input,
.astrology-form textarea,
.astrology-form select {
  width: 100%;
  border: 1px solid rgba(240, 184, 106, 0.24);
  border-radius: 6px;
  color: var(--text);
  background: rgba(5, 6, 10, 0.68);
  outline: none;
}

.astrology-form input,
.astrology-form select {
  min-height: 54px;
  padding: 0 16px;
}

.astrology-form select {
  color: rgba(243, 238, 231, .9);
  color-scheme: dark;
  background: rgba(5, 7, 13, .94);
  font-weight: 650;
  cursor: pointer;
}

.astrology-form textarea {
  min-height: 116px;
  resize: vertical;
  padding: 16px;
  line-height: 1.58;
}

.astrology-form input:focus,
.astrology-form textarea:focus,
.astrology-form select:focus {
  border-color: rgba(101, 216, 205, .68);
  box-shadow: 0 0 0 4px rgba(101, 216, 205, .08);
}
.astrology-form input[type="date"],
.astrology-form input[type="time"] { color-scheme: dark; }

.astrology-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}
.astrology-grid > label { align-self: start; align-content: start; }
.astrology-time-field { display: grid; gap: 10px; }
.astrology-time-field > label:first-child { min-width: 0; }
.astrology-time-field small { color: rgba(243, 238, 231, .5); font-size: .72rem; line-height: 1.45; }
.astrology-form .astrology-time-unknown { display: flex; gap: 9px; align-items: center; width: fit-content; cursor: pointer; }
.astrology-form .astrology-time-unknown input { width: 17px; min-height: 17px; height: 17px; margin: 0; accent-color: var(--cyan); }
.astrology-form .astrology-time-unknown span { color: rgba(243, 238, 231, .7); font-family: inherit; font-size: .75rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.astrology-time-field.is-unknown > label:first-child { opacity: .55; }
.astrology-time-field.is-unknown small { color: #f1b0b7; }

.astrology-location {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
}
.astrology-form__divider { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
.astrology-form__divider span { flex: 0 0 auto; color: var(--cyan); font-family: inherit; font-size: .65rem; font-weight: 850; letter-spacing: .12em; }
.astrology-form__divider i { width: 100%; height: 1px; background: var(--line); }
.astrology-form__note { margin: 0; border-top: 1px solid var(--line); padding-top: 16px; color: rgba(243, 238, 231, .5); font-size: .73rem; line-height: 1.55; }

.astrology-submit {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(240, 184, 106, 0.3);
  border-radius: 6px;
  color: #090b10;
  background: var(--amber);
  font-family: var(--serif);
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.astrology-submit:hover { transform: translateY(-2px); background: #f7c77f; box-shadow: 0 12px 30px rgba(240, 184, 106, .2); }

/* Shared Lucide icon treatment and deferred rendering for long readings. */
.ui-icon { display: block; flex: 0 0 auto; width: 17px; height: 17px; }
.main-nav a { display: inline-flex; gap: 7px; align-items: center; justify-content: center; }
.main-nav a .ui-icon { width: 15px; height: 15px; opacity: .66; }
.main-nav a.is-active .ui-icon,
.main-nav a:hover .ui-icon { opacity: 1; }
.site-menu-toggle .ui-icon { width: 21px; height: 21px; }
.astrology-submit .ui-icon { width: 18px; height: 18px; }
.astrology-form .astrology-submit > span { color: currentColor; font-family: inherit; font-size: inherit; letter-spacing: 0; }
.astro-reading-panel,
.tarot-reading-section,
.numerology-result-section { content-visibility: auto; contain-intrinsic-size: 1px 760px; }
.astro-unknown-time-notice { width: min(900px, 100%); margin: 34px auto; border: 1px solid rgba(240, 184, 106, .42); border-radius: 8px; padding: 22px 24px; background: rgba(220, 168, 94, .1); }
.astro-unknown-time-notice strong { display: block; margin-bottom: 8px; color: #f4d8b5; font: 500 1.2rem var(--serif); }
.astro-unknown-time-notice p { margin: 0; color: rgba(244, 237, 228, .76); line-height: 1.65; }
.astro-unknown-data { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: min(1180px, 100%); margin: 0 auto; }
@media (max-width: 780px) { .astro-unknown-data { grid-template-columns: 1fr; } }

.astrology-result {
  display: grid;
  justify-items: center;
  gap: 38px;
  padding: 20px 0 96px;
}

.astrology-result[hidden] {
  display: none;
}

.astrology-reading-heading {
  text-align: center;
}

.astrology-reading-heading p {
  margin: 0 0 12px;
  color: rgba(240, 184, 106, 0.68);
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.astrology-reading-heading h2 {
  margin: 0 0 14px;
  color: #f2dfca;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  font-style: italic;
  font-weight: 500;
}

.astrology-reading-heading em {
  color: rgba(243, 238, 231, 0.52);
  font-family: var(--serif);
  font-weight: 650;
}

.astro-chart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
  width: min(1180px, 100%);
  align-items: start;
  gap: 28px;
}

.astro-chart-board,
.astro-data-panel {
  border: 1px solid rgba(20, 24, 32, 0.24);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
}

.astro-chart-board {
  overflow: hidden;
  padding: 4px;
  border-color: #b8b8b8;
  border-radius: 0;
  background: #f4f4f4;
  box-shadow: none;
}

.astrology-chart-wheel {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  max-height: none;
  background: #f4f4f4;
  font-family: "Times New Roman", Georgia, serif;
  shape-rendering: geometricPrecision;
}

.astrology-chart-wheel .outer-frame,
.astrology-chart-wheel .wheel-bg,
.astrology-chart-wheel .tick-inner-frame,
.astrology-chart-wheel .zodiac-outer-frame,
.astrology-chart-wheel .zodiac-inner-frame,
.astrology-chart-wheel .house-inner-frame {
  fill: none;
  stroke: #202020;
  stroke-width: 2;
}

.astrology-chart-wheel .wheel-bg {
  fill: #f4f4f4;
  stroke-width: 2.2;
}

.astrology-chart-wheel .tick-inner-frame,
.astrology-chart-wheel .zodiac-outer-frame,
.astrology-chart-wheel .zodiac-inner-frame,
.astrology-chart-wheel .house-inner-frame {
  stroke-width: 1.6;
}

.astrology-chart-wheel .zodiac-band {
  fill: none;
  stroke: #243047;
  stroke-width: 1;
}

.astrology-chart-wheel .house-band {
  fill: #f4f4f4;
  stroke: #202020;
  stroke-width: 1.7;
}

.astrology-chart-wheel .aspect-band {
  fill: #f4f4f4;
  stroke: #2f2f2f;
  stroke-width: 2;
}

.zodiac-segments path {
  fill: #f4f4f4;
  stroke: #202020;
  stroke-width: 1.15;
}

.zodiac-ticks line,
.inner-zodiac-ticks line {
  stroke: #343434;
  stroke-width: 0.72;
}

.zodiac-ticks line.minor,
.inner-zodiac-ticks line.minor {
  stroke-width: 1.25;
}

.zodiac-ticks line.major,
.inner-zodiac-ticks line.major {
  stroke: #1e293b;
  stroke-width: 2.1;
}

.sign-lines line {
  stroke: #202020;
  stroke-width: 1.65;
  opacity: 1;
}

.house-lines line {
  stroke: #202020;
  stroke-width: 1.2;
  opacity: 1;
}

.house-lines line.cardinal-axis {
  stroke: #050505;
  stroke-width: 3.2;
}

.aspect-lines line {
  stroke-width: 1.75;
  opacity: 0.96;
  vector-effect: non-scaling-stroke;
}

.aspect-lines line.trine,
.aspect-lines line.sextile {
  stroke-dasharray: 2 4;
}

.zodiac-glyphs text {
  dominant-baseline: middle;
  fill: #111111;
  font-size: 27px;
  font-weight: 700;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Arial Unicode MS", sans-serif;
  text-anchor: middle;
}

.zodiac-glyphs .sign-0,
.zodiac-glyphs .sign-4,
.zodiac-glyphs .sign-8 {
  fill: #ff1b0b;
}

.zodiac-glyphs .sign-1,
.zodiac-glyphs .sign-5,
.zodiac-glyphs .sign-9 {
  fill: #4c9a00;
}

.zodiac-glyphs .sign-2,
.zodiac-glyphs .sign-6,
.zodiac-glyphs .sign-10 {
  fill: #ef8b00;
}

.zodiac-glyphs .sign-3,
.zodiac-glyphs .sign-7,
.zodiac-glyphs .sign-11 {
  fill: #063cff;
}

.house-numbers text {
  dominant-baseline: middle;
  fill: #111827;
  font-size: 17px;
  font-style: italic;
  font-weight: 800;
  text-anchor: middle;
}

.cusp-labels text {
  dominant-baseline: middle;
  fill: #202020;
  font-size: 9px;
  font-weight: 700;
  text-anchor: middle;
}

.cusp-labels .house-cusp-degree {
  fill: #444;
  font-size: 8px;
}

.planet-node line {
  stroke: #202020;
  stroke-width: 1.35;
  opacity: 1;
}

.planet-node text {
  dominant-baseline: middle;
  fill: #111827;
  font-size: 29px;
  font-weight: 700;
  text-anchor: middle;
}

.planet-node .planet-degree {
  fill: #111827;
  font-size: 11px;
  font-weight: 800;
}

.axis-labels text {
  dominant-baseline: middle;
  fill: #050505;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 3px;
  text-anchor: middle;
}

.planet-node.sun text,
.planet-node.mars text,
.planet-node.moon text,
.planet-node.venus text,
.planet-node.jupiter text {
  fill: #050505;
}

.planet-node.asc text,
.planet-node.mc text {
  fill: #0b55ff;
  font-size: 16px;
  font-family: Inter, sans-serif;
}

.chart-center-title,
.chart-center-subtitle {
  fill: rgba(40, 40, 40, 0.55);
  text-anchor: middle;
}

.chart-center-title {
  font-size: 17px;
  font-weight: 700;
}

.chart-center-subtitle {
  font-size: 12px;
  font-style: italic;
}

.astro-side-data {
  display: grid;
  gap: 18px;
}

.astro-data-panel {
  padding: 18px;
}

.astro-data-panel h3 {
  margin: 0 0 14px;
  color: #1f2937;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-style: italic;
}

.astro-planet-table {
  display: grid;
  gap: 8px;
}

.astro-planet-table div {
  display: grid;
  grid-template-columns: 30px minmax(92px, 0.9fr) minmax(150px, 1.1fr);
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(31, 41, 55, 0.12);
  padding: 5px 0;
  color: #111827;
}

.astro-planet-table span {
  color: #0b55ff;
  font-family: Georgia, serif;
  font-size: 1.2rem;
  text-align: center;
}

.astro-planet-table strong,
.astro-planet-table em {
  font-size: 0.86rem;
}

.astro-planet-table em {
  color: #374151;
  font-style: normal;
}

.astro-aspect-grid {
  display: grid;
  grid-template-columns: repeat(var(--count), minmax(24px, 1fr));
  border: 1px solid rgba(31, 41, 55, 0.18);
  background: #fff;
}

.astro-aspect-grid b,
.astro-aspect-grid span {
  display: grid;
  min-height: 24px;
  place-items: center;
  border-right: 1px solid rgba(31, 41, 55, 0.14);
  border-bottom: 1px solid rgba(31, 41, 55, 0.14);
  color: #111827;
  font-family: Georgia, serif;
  font-size: 0.86rem;
}

.astro-aspect-grid .opposition,
.astro-aspect-grid .square {
  color: #dc2626;
}

.astro-aspect-grid .trine,
.astro-aspect-grid .sextile {
  color: #16a34a;
}

.astro-aspect-grid .conjunction {
  color: #0b55ff;
}

.astro-aspect-legend {
  margin: 12px 0 0;
  color: #374151;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5;
}

.astro-interpretation-section {
  width: min(1180px, 100%);
  margin: 56px auto 0;
}

.astro-reading-page {
  width: min(1180px, 100%);
  margin: 56px auto 0;
}

.astro-reading-panels {
  display: grid;
  gap: 0;
}

.astro-reading-panel {
  display: block;
  margin-top: 0;
  padding: 72px 0;
  border-top: 1px solid rgba(235, 203, 163, .18);
}
.astro-reading-panels > .astro-reading-panel:first-child { padding-top: 0; border-top: 0; }

.astro-reading-page .astro-interpretation-section {
  margin-top: 0;
}

.astro-conclusion {
  margin-top: 18px;
  padding: 20px 22px;
  border: 1px solid rgba(240, 184, 106, 0.42);
  border-radius: 8px;
  background: rgba(220, 168, 94, 0.1);
}

.astro-conclusion strong {
  display: block;
  margin: 0 0 8px;
  color: #f4d8b5;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-style: italic;
}

.astro-conclusion p {
  margin: 0;
  color: rgba(244, 237, 228, 0.78);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.7;
}

.astro-section-heading {
  margin: 0 0 20px;
}

.astro-section-heading p {
  margin: 0 0 6px;
  color: #dca85e;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.astro-section-heading h2 {
  margin: 0;
  color: #f3dfc8;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  font-style: italic;
  font-weight: 500;
}

.astro-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.astro-insight-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.astro-insight-card {
  min-height: 176px;
  padding: 24px;
  border: 1px solid rgba(235, 203, 163, 0.24);
  border-radius: 8px;
  background: rgba(20, 15, 26, 0.76);
}

.astro-insight-card--overview,
.astro-insight-card--sun {
  border-color: rgba(240, 184, 106, 0.52);
}

.astro-insight-card--moon {
  border-color: rgba(137, 181, 235, 0.48);
}

.astro-insight-card--asc {
  border-color: rgba(176, 213, 166, 0.45);
}

.astro-insight-card h3 {
  margin: 0 0 12px;
  color: #f4d8b5;
  font-family: var(--serif);
  font-size: 1.18rem;
  font-style: italic;
  font-weight: 600;
}

.astro-insight-card p,
.astro-aspect-summary,
.astro-retrograde-note,
.astro-question-note {
  margin: 0;
  color: rgba(244, 237, 228, 0.76);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.7;
}

.astro-big3-story {
  display: grid;
  gap: 18px;
  margin-top: 16px;
  border: 1px solid rgba(240, 184, 106, 0.38);
  border-radius: 10px;
  padding: clamp(22px, 3vw, 32px);
  background:
    linear-gradient(135deg, rgba(240, 184, 106, 0.12), rgba(137, 181, 235, 0.08) 48%, rgba(176, 213, 166, 0.09)),
    rgba(18, 13, 23, 0.82);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.2);
}

.astro-big3-story > div {
  display: grid;
  gap: 6px;
}

.astro-big3-story span:first-child {
  color: #dca85e;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.astro-big3-story h3 {
  margin: 0;
  color: #f3dfc8;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-style: italic;
  font-weight: 500;
}

.astro-big3-story p {
  margin: 0;
  color: rgba(244, 237, 228, 0.8);
  font-size: 1.02rem;
  font-weight: 680;
  line-height: 1.78;
}

.astro-big3-story ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.astro-big3-story li {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(235, 203, 163, 0.18);
  border-radius: 8px;
  padding: 16px;
  background: rgba(2, 6, 18, 0.28);
}

.astro-big3-story b {
  color: #f4d8b5;
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
}

.astro-big3-story li span {
  color: rgba(244, 237, 228, 0.7);
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.6;
  text-transform: none;
}

.astro-signal-card {
  border-color: rgba(246, 194, 123, 0.54);
  background:
    linear-gradient(135deg, rgba(246, 194, 123, 0.11), transparent 48%),
    rgba(18, 13, 23, 0.86);
}

.astro-signal-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  color: rgba(244, 237, 228, 0.8);
  font-size: 0.96rem;
  font-weight: 740;
  line-height: 1.58;
}

.astro-signal-card--love {
  border-color: rgba(228, 127, 141, 0.5);
}

.astro-love-story {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(228, 127, 141, 0.3);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(228, 127, 141, 0.14), rgba(240, 184, 106, 0.08)),
    rgba(18, 13, 23, 0.82);
}

.astro-love-story span {
  color: #ec9fbd;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.astro-love-story h3 {
  max-width: 980px;
  margin: 0;
  color: #f5dfc8;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.7vw, 2.25rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.48;
}

.astro-love-timeline {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.astro-love-timeline article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px;
  border: 1px solid rgba(235, 203, 163, 0.18);
  border-radius: 9px;
  background: rgba(16, 12, 22, 0.72);
}

.astro-love-timeline article b {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(228, 127, 141, 0.38);
  border-radius: 50%;
  color: #ec9fbd;
  font-family: var(--serif);
  font-size: 1rem;
}

.astro-love-timeline article div {
  display: grid;
  gap: 8px;
}

.astro-love-timeline strong {
  color: #f4dfca;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
}

.astro-love-timeline p {
  margin: 0;
  color: rgba(244, 237, 228, 0.76);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.72;
}

.astro-love-tools {
  margin-bottom: 16px;
}

.astro-signal-card--career {
  border-color: rgba(101, 211, 198, 0.42);
}

.astro-career-story {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(101, 211, 198, 0.3);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(101, 211, 198, 0.13), rgba(240, 184, 106, 0.08)),
    rgba(18, 13, 23, 0.82);
}

.astro-career-story span,
.astro-career-match span {
  color: #65d3c6;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.astro-career-story h3,
.astro-career-match h3 {
  max-width: 980px;
  margin: 0;
  color: #f5dfc8;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.48;
}

.astro-career-criteria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.astro-career-criteria article {
  min-height: 110px;
  padding: 18px;
  border: 1px solid rgba(101, 211, 198, 0.24);
  border-radius: 9px;
  background: rgba(2, 6, 18, 0.28);
}

.astro-career-criteria strong {
  color: rgba(244, 237, 228, 0.84);
  font-size: 0.98rem;
  line-height: 1.58;
}

.astro-career-journey {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.astro-career-journey article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px;
  border: 1px solid rgba(235, 203, 163, 0.18);
  border-radius: 9px;
  background: rgba(16, 12, 22, 0.72);
}

.astro-career-journey article b {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(101, 211, 198, 0.38);
  border-radius: 50%;
  color: #65d3c6;
  font-family: var(--serif);
}

.astro-career-journey article div {
  display: grid;
  gap: 8px;
}

.astro-career-journey strong {
  color: #f4dfca;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
}

.astro-career-journey p {
  margin: 0;
  color: rgba(244, 237, 228, 0.76);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.72;
}

.astro-career-match {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid rgba(101, 211, 198, 0.28);
  border-radius: 10px;
  background: rgba(13, 15, 24, 0.78);
}

.astro-career-match div {
  display: grid;
  gap: 8px;
}

.astro-career-match ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.astro-career-match li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid rgba(235, 203, 163, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.astro-career-match li strong {
  color: #f4dfca;
}

.astro-career-match li span {
  color: #efb86b;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

.astro-career-match li small {
  color: rgba(244, 237, 228, 0.56);
  font-weight: 800;
}

.astro-career-tools {
  margin-bottom: 16px;
}

.astro-signal-card--finance {
  border-color: rgba(240, 184, 106, 0.56);
}

.astro-finance-story {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(240, 184, 106, 0.34);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(240, 184, 106, 0.14), rgba(101, 211, 198, 0.06)),
    rgba(18, 13, 23, 0.82);
}

.astro-finance-story span,
.astro-finance-profile > span,
.astro-finance-path > span {
  color: #efb86b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.astro-finance-story h3 {
  max-width: 980px;
  margin: 0;
  color: #f5dfc8;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.48;
}

.astro-finance-profile {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid rgba(240, 184, 106, 0.24);
  border-radius: 10px;
  background: rgba(13, 15, 24, 0.78);
}

.astro-finance-profile > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.astro-finance-profile article {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid rgba(235, 203, 163, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.astro-finance-profile strong {
  color: #f4dfca;
  font-size: 0.95rem;
}

.astro-finance-profile b {
  color: #efb86b;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.astro-finance-profile small {
  color: rgba(244, 237, 228, 0.55);
  font-weight: 800;
}

.astro-finance-journey {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.astro-finance-journey article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px;
  border: 1px solid rgba(235, 203, 163, 0.18);
  border-radius: 9px;
  background: rgba(16, 12, 22, 0.72);
}

.astro-finance-journey article b {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(240, 184, 106, 0.42);
  border-radius: 50%;
  color: #efb86b;
  font-family: var(--serif);
}

.astro-finance-journey article div {
  display: grid;
  gap: 8px;
}

.astro-finance-journey strong {
  color: #f4dfca;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
}

.astro-finance-journey p {
  margin: 0;
  color: rgba(244, 237, 228, 0.76);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.72;
}

.astro-finance-path {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid rgba(240, 184, 106, 0.24);
  border-radius: 10px;
  background: rgba(13, 15, 24, 0.78);
}

.astro-finance-path ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: wealth-path;
}

.astro-finance-path li {
  counter-increment: wealth-path;
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(235, 203, 163, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(244, 237, 228, 0.74);
  font-size: 0.9rem;
  font-weight: 680;
  line-height: 1.5;
}

.astro-finance-path li::before {
  content: counter(wealth-path, decimal-leading-zero);
  color: #efb86b;
  font-family: var(--serif);
  font-size: 1.1rem;
}

.astro-finance-tools {
  margin-bottom: 16px;
}

.astro-signal-card--health {
  border-color: rgba(176, 213, 166, 0.5);
}

.astro-health-disclaimer {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid rgba(176, 213, 166, 0.24);
  border-radius: 8px;
  color: rgba(244, 237, 228, 0.72);
  background: rgba(13, 15, 24, 0.62);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.55;
}

.astro-health-story {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(176, 213, 166, 0.3);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(176, 213, 166, 0.13), rgba(101, 211, 198, 0.06)),
    rgba(18, 13, 23, 0.82);
}

.astro-health-story span,
.astro-health-profile > span {
  color: #b0d5a6;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.astro-health-story h3 {
  max-width: 980px;
  margin: 0;
  color: #f5dfc8;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.48;
}

.astro-health-profile {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid rgba(176, 213, 166, 0.24);
  border-radius: 10px;
  background: rgba(13, 15, 24, 0.78);
}

.astro-health-profile > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.astro-health-profile article {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid rgba(235, 203, 163, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.astro-health-profile strong {
  color: #f4dfca;
  font-size: 0.95rem;
}

.astro-health-profile b {
  color: #b0d5a6;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.astro-health-profile small {
  color: rgba(244, 237, 228, 0.55);
  font-weight: 800;
}

.astro-health-journey {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.astro-health-journey article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px;
  border: 1px solid rgba(235, 203, 163, 0.18);
  border-radius: 9px;
  background: rgba(16, 12, 22, 0.72);
}

.astro-health-journey article b {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(176, 213, 166, 0.42);
  border-radius: 50%;
  color: #b0d5a6;
  font-family: var(--serif);
}

.astro-health-journey article div {
  display: grid;
  gap: 8px;
}

.astro-health-journey strong {
  color: #f4dfca;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
}

.astro-health-journey p {
  margin: 0;
  color: rgba(244, 237, 228, 0.76);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.72;
}

.astro-health-tools {
  margin-bottom: 16px;
}

.astro-family-story {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(202, 165, 240, 0.3);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(202, 165, 240, 0.13), rgba(240, 184, 106, 0.06)),
    rgba(18, 13, 23, 0.82);
}

.astro-family-story span,
.astro-family-profile > span {
  color: #caa5f0;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.astro-family-story h3 {
  max-width: 980px;
  margin: 0;
  color: #f5dfc8;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.48;
}

.astro-family-profile {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid rgba(202, 165, 240, 0.24);
  border-radius: 10px;
  background: rgba(13, 15, 24, 0.78);
}

.astro-family-profile > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.astro-family-profile article {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid rgba(235, 203, 163, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.astro-family-profile strong {
  color: #f4dfca;
  font-size: 0.95rem;
}

.astro-family-profile b {
  color: #caa5f0;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.astro-family-profile small {
  color: rgba(244, 237, 228, 0.55);
  font-weight: 800;
}

.astro-family-journey {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.astro-family-journey article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px;
  border: 1px solid rgba(235, 203, 163, 0.18);
  border-radius: 9px;
  background: rgba(16, 12, 22, 0.72);
}

.astro-family-journey article b {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(202, 165, 240, 0.42);
  border-radius: 50%;
  color: #caa5f0;
  font-family: var(--serif);
}

.astro-family-journey article div {
  display: grid;
  gap: 8px;
}

.astro-family-journey strong {
  color: #f4dfca;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
}

.astro-family-journey p {
  margin: 0;
  color: rgba(244, 237, 228, 0.76);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.72;
}

.astro-signal-card--family {
  border-color: rgba(202, 165, 240, 0.42);
}

.astro-family-tools {
  margin-bottom: 16px;
}

.astro-friendship-story {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(91, 211, 196, 0.3);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(91, 211, 196, 0.13), rgba(202, 165, 240, 0.06)),
    rgba(18, 13, 23, 0.82);
}

.astro-friendship-story span,
.astro-friendship-profile > span {
  color: #5bd3c4;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.astro-friendship-story h3 {
  max-width: 980px;
  margin: 0;
  color: #f5dfc8;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.48;
}

.astro-friendship-profile {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid rgba(91, 211, 196, 0.24);
  border-radius: 10px;
  background: rgba(13, 15, 24, 0.78);
}

.astro-friendship-profile > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.astro-friendship-profile article {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid rgba(235, 203, 163, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.astro-friendship-profile strong {
  color: #f4dfca;
  font-size: 0.95rem;
}

.astro-friendship-profile b {
  color: #5bd3c4;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.astro-friendship-profile small {
  color: rgba(244, 237, 228, 0.55);
  font-weight: 800;
}

.astro-friendship-journey {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.astro-friendship-journey article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px;
  border: 1px solid rgba(235, 203, 163, 0.18);
  border-radius: 9px;
  background: rgba(16, 12, 22, 0.72);
}

.astro-friendship-journey article b {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(91, 211, 196, 0.42);
  border-radius: 50%;
  color: #5bd3c4;
  font-family: var(--serif);
}

.astro-friendship-journey article div {
  display: grid;
  gap: 8px;
}

.astro-friendship-journey strong {
  color: #f4dfca;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
}

.astro-friendship-journey p {
  margin: 0;
  color: rgba(244, 237, 228, 0.76);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.72;
}

.astro-signal-card--friendship {
  border-color: rgba(91, 211, 196, 0.42);
}

.astro-friendship-tools {
  margin-bottom: 16px;
}

.astro-element-story,
.astro-element-balance,
.astro-element-life {
  margin-bottom: 16px;
  border: 1px solid rgba(240, 184, 106, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(240, 184, 106, 0.11), transparent 46%),
    rgba(18, 13, 23, 0.8);
}

.astro-element-story {
  display: grid;
  gap: 10px;
  padding: clamp(22px, 3vw, 32px);
}

.astro-element-story span {
  color: #dca85e;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.astro-element-story h3,
.astro-element-life h3 {
  margin: 0;
  color: #f3dfc8;
  font-family: var(--serif);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-style: italic;
  font-weight: 500;
}

.astro-element-story p,
.astro-element-balance p {
  margin: 0;
  color: rgba(244, 237, 228, 0.8);
  font-size: 1.02rem;
  font-weight: 680;
  line-height: 1.78;
}

.astro-element-balance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 22px;
}

.astro-element-balance div {
  display: grid;
  gap: 5px;
  justify-items: center;
  text-align: center;
}

.astro-element-balance div span {
  font-size: 2rem;
  line-height: 1;
}

.astro-element-balance strong {
  color: #f5dfc5;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-style: italic;
}

.astro-element-balance small {
  color: rgba(244, 237, 228, 0.56);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.astro-element-balance i {
  color: rgba(240, 184, 106, 0.58);
  font-family: var(--serif);
  font-size: 2rem;
  font-style: normal;
}

.astro-element-balance p {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(240, 184, 106, 0.14);
  padding-top: 16px;
}

.astro-element-life {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  padding: 24px;
}

.astro-element-life ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.astro-element-life li {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(235, 203, 163, 0.18);
  border-radius: 8px;
  padding: 16px;
  background: rgba(2, 6, 18, 0.24);
}

.astro-element-life b {
  color: #f4d8b5;
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
}

.astro-element-life span {
  color: rgba(244, 237, 228, 0.72);
  font-size: 0.93rem;
  font-weight: 650;
  line-height: 1.6;
}

.astro-element-ending {
  margin-top: 16px;
}

.astro-element-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.astro-element-card {
  min-height: 220px;
  padding: 22px;
  border: 1px solid rgba(235, 203, 163, 0.24);
  border-radius: 8px;
  background: rgba(15, 13, 20, 0.78);
}

.astro-element-card--fire {
  border-color: rgba(239, 99, 77, 0.5);
}

.astro-element-card--earth {
  border-color: rgba(126, 174, 108, 0.5);
}

.astro-element-card--air {
  border-color: rgba(130, 185, 225, 0.48);
}

.astro-element-card--water {
  border-color: rgba(108, 142, 224, 0.5);
}

.astro-element-card div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: center;
}

.astro-element-icon {
  grid-row: span 2;
  font-size: 1.8rem;
  line-height: 1;
}

.astro-element-card strong {
  color: #f5dfc5;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-style: italic;
}

.astro-element-card small {
  color: #dca85e;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.astro-element-card b {
  display: block;
  margin: 18px 0 10px;
  color: #fff6ea;
  font-size: 2rem;
  line-height: 1;
}

.astro-element-card p {
  margin: 0;
  color: rgba(244, 237, 228, 0.76);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.65;
}

.astro-synastry-form {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  padding: 18px;
  border: 1px solid rgba(235, 203, 163, 0.24);
  border-radius: 8px;
  background: rgba(12, 9, 18, 0.78);
}

.astro-synastry-form label {
  display: grid;
  gap: 8px;
}

.astro-synastry-form span {
  color: #dca85e;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.astro-synastry-form input {
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(235, 203, 163, 0.24);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  color: #f7ecdd;
  font: inherit;
}

.astro-synastry-form button {
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 7px;
  background: #dca85e;
  color: #160f19;
  cursor: pointer;
  font-weight: 900;
}

.astro-synastry-hint {
  margin: 14px 0 18px;
  color: rgba(244, 237, 228, 0.65);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.6;
}

.astro-synastry-score {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid rgba(240, 184, 106, 0.45);
  border-radius: 8px;
  background: rgba(220, 168, 94, 0.12);
}

.astro-synastry-score strong {
  color: #f7dfbf;
  font-size: 2.5rem;
  line-height: 1;
}

.astro-synastry-score span {
  color: rgba(244, 237, 228, 0.82);
  font-weight: 800;
  line-height: 1.5;
}

.astro-interpretation-list {
  display: grid;
  gap: 10px;
}

.astro-planet-ranking {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(240, 184, 106, 0.26);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(240, 184, 106, 0.12), rgba(91, 211, 196, 0.06)),
    rgba(13, 15, 24, 0.82);
}

.astro-planet-ranking > span {
  color: #dca85e;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.astro-planet-ranking h3 {
  max-width: 980px;
  margin: 0;
  color: #f3dfc8;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
}

.astro-planet-ranking > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.astro-planet-ranking article {
  display: grid;
  gap: 7px;
  min-height: 155px;
  padding: 18px;
  border: 1px solid rgba(235, 203, 163, 0.18);
  border-radius: 8px;
  background: rgba(2, 6, 18, 0.28);
}

.astro-planet-ranking article b {
  color: rgba(91, 211, 196, 0.9);
  font-family: var(--serif);
  font-size: 1.55rem;
}

.astro-planet-ranking article strong {
  color: #f5dfc5;
  font-size: 1rem;
}

.astro-planet-ranking article small,
.astro-planet-ranking article p {
  margin: 0;
  color: rgba(244, 237, 228, 0.68);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.55;
}

.astro-planet-pattern-grid {
  margin-bottom: 16px;
}

.astro-signal-card--planet {
  border-color: rgba(91, 211, 196, 0.34);
  background:
    linear-gradient(135deg, rgba(91, 211, 196, 0.08), transparent 44%),
    rgba(16, 12, 22, 0.72);
}

.astro-planet-meaning-list {
  gap: 12px;
}

.astro-planet-meaning-detail summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.astro-planet-meaning-detail summary b {
  min-width: 0;
  color: #f2dfca;
  overflow-wrap: anywhere;
}

.astro-planet-meaning-detail summary em {
  color: rgba(244, 237, 228, 0.58);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.astro-planet-meaning-detail div {
  display: grid;
  gap: 14px;
  padding: 0 18px 18px 54px;
}

.astro-planet-meaning-detail div p {
  padding: 0;
}

.astro-planet-meaning-detail ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.astro-planet-meaning-detail li {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(235, 203, 163, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(244, 237, 228, 0.68);
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.45;
}

.astro-planet-meaning-detail li strong {
  color: #efb86b;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.astro-interpretation-detail {
  border: 1px solid rgba(235, 203, 163, 0.22);
  border-radius: 7px;
  background: rgba(16, 12, 22, 0.72);
}

.astro-interpretation-detail summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  color: #f2dfca;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.06rem;
  font-weight: 700;
}

.astro-interpretation-detail summary span {
  color: #efb86b;
  font-family: "Segoe UI Symbol", serif;
  font-size: 1.28rem;
}

.astro-interpretation-detail p {
  margin: 0;
  padding: 0 18px 18px 54px;
  color: rgba(244, 237, 228, 0.74);
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.7;
}

.astro-planet-meaning-detail summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.astro-planet-meaning-detail div {
  display: grid;
  gap: 14px;
  padding: 0 18px 18px 54px;
}

.astro-planet-meaning-detail div p {
  padding: 0;
}

.astro-aspect-summary {
  padding: 22px 24px;
  border-left: 2px solid #efb86b;
  background: rgba(20, 15, 26, 0.7);
}

.astro-aspect-summary p + p {
  margin-top: 10px;
}

.astro-aspect-summary ul {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding-left: 20px;
}

.astro-aspect-summary strong {
  color: #f4d8b5;
}

.astro-aspect-ranking {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(91, 211, 196, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(91, 211, 196, 0.1), rgba(240, 184, 106, 0.08)),
    rgba(13, 15, 24, 0.82);
}

.astro-aspect-ranking > span {
  color: #5bd3c4;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.astro-aspect-ranking h3 {
  max-width: 980px;
  margin: 0;
  color: #f3dfc8;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
}

.astro-aspect-ranking > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.astro-aspect-ranking article {
  display: grid;
  gap: 7px;
  min-height: 150px;
  padding: 18px;
  border: 1px solid rgba(235, 203, 163, 0.16);
  border-radius: 8px;
  background: rgba(2, 6, 18, 0.28);
}

.astro-aspect-ranking article b {
  color: #efb86b;
  font-family: var(--serif);
  font-size: 1.65rem;
}

.astro-aspect-ranking article strong {
  color: #f5dfc5;
}

.astro-aspect-ranking article small,
.astro-aspect-ranking article p {
  margin: 0;
  color: rgba(244, 237, 228, 0.68);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.55;
}

.astro-aspect-pattern-grid {
  margin-bottom: 16px;
}

.astro-signal-card--aspect {
  border-color: rgba(91, 211, 196, 0.34);
  background:
    linear-gradient(135deg, rgba(91, 211, 196, 0.08), transparent 44%),
    rgba(16, 12, 22, 0.72);
}

.astro-aspect-meaning-list {
  display: grid;
  gap: 12px;
}

.astro-aspect-meaning-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(235, 203, 163, 0.2);
  border-radius: 9px;
  background: rgba(16, 12, 22, 0.72);
}

.astro-aspect-meaning-card--challenge,
.astro-aspect-meaning-card--mirror {
  border-color: rgba(255, 96, 96, 0.32);
}

.astro-aspect-meaning-card--gift,
.astro-aspect-meaning-card--chance {
  border-color: rgba(91, 211, 196, 0.32);
}

.astro-aspect-meaning-card--fusion {
  border-color: rgba(240, 184, 106, 0.32);
}

.astro-aspect-meaning-card header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.astro-aspect-meaning-card header > span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(235, 203, 163, 0.24);
  border-radius: 50%;
  color: #efb86b;
  font-size: 1.3rem;
  font-weight: 900;
}

.astro-aspect-meaning-card header div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.astro-aspect-meaning-card strong {
  color: #f4dfca;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.35;
}

.astro-aspect-meaning-card small {
  color: rgba(244, 237, 228, 0.55);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.astro-aspect-meaning-card p {
  margin: 0;
  color: rgba(244, 237, 228, 0.76);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.72;
}

.astro-retrograde-note,
.astro-question-note {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(235, 203, 163, 0.2);
  border-radius: 6px;
}

.astro-question-note {
  color: rgba(244, 226, 199, 0.9);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
}

@media (max-width: 780px) {
  .astro-interpretation-section {
    margin-top: 42px;
  }

  .astro-reading-page {
    margin-top: 42px;
  }
  .astro-reading-panel { padding: 50px 0; }

  .astro-insight-grid,
  .astro-insight-grid--three,
  .astro-element-grid {
    grid-template-columns: 1fr;
  }

  .astro-big3-story ol {
    grid-template-columns: 1fr;
  }

  .astro-element-balance,
  .astro-element-life ul {
    grid-template-columns: 1fr;
  }

  .astro-element-balance i {
    transform: rotate(90deg);
  }

  .astro-planet-ranking > div,
  .astro-planet-meaning-detail ul,
  .astro-aspect-ranking > div,
  .astro-career-criteria,
  .astro-finance-profile > div,
  .astro-finance-path ol,
  .astro-health-profile > div,
  .astro-family-profile > div,
  .astro-friendship-profile > div {
    grid-template-columns: 1fr;
  }

  .astro-career-match li {
    grid-template-columns: 1fr;
  }

  .astro-planet-meaning-detail summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .astro-planet-meaning-detail summary em {
    grid-column: 2;
  }

  .astro-planet-meaning-detail div {
    padding-left: 18px;
  }

  .astro-synastry-form {
    grid-template-columns: 1fr;
  }

  .astro-synastry-score {
    align-items: flex-start;
    flex-direction: column;
  }

  .astro-insight-card {
    min-height: 0;
    padding: 20px;
  }

  .astro-interpretation-detail summary {
    padding: 14px 15px;
    font-size: 1rem;
  }

  .astro-interpretation-detail p {
    padding: 0 15px 16px;
  }
}

.astrology-chart {
  position: relative;
  display: grid;
  width: min(420px, 86vw);
  aspect-ratio: 1;
  place-items: center;
  margin: 0 auto;
  border-radius: 999px;
}

.astro-orbit,
.astrology-chart span {
  position: absolute;
  border-radius: 999px;
}

.astro-orbit {
  border: 1px solid rgba(240, 184, 106, 0.18);
}

.astro-orbit--outer { inset: 0; }
.astro-orbit--middle { inset: 52px; border-style: dashed; }
.astro-orbit--inner { inset: 128px; }

.astrology-chart strong {
  display: grid;
  width: 124px;
  height: 124px;
  place-items: center;
  border: 1px solid rgba(240, 184, 106, 0.34);
  border-radius: 999px;
  color: #f2dfca;
  background: rgba(12, 8, 18, 0.86);
  font-family: var(--serif);
  font-style: italic;
  text-align: center;
}

.astrology-chart span {
  top: 50%;
  left: 50%;
  width: 118px;
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240, 184, 106, 0.22);
  padding: 8px;
  color: rgba(243, 238, 231, 0.78);
  background: rgba(5, 6, 10, 0.72);
  font-family: var(--serif);
  font-size: 0.82rem;
  font-weight: 650;
  text-align: center;
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateY(-188px)
    rotate(calc(-1 * var(--angle)));
}

.astrology-reading-core {
  width: min(980px, 100%);
}

.tarot-step {
  margin: 0 0 18px;
  color: rgba(240, 184, 106, 0.72);
  font-family: var(--serif);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.tarot-inner h1 {
  max-width: none;
  margin: 0 0 18px;
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(3.2rem, 6vw, 5.3rem);
  font-weight: 500;
  line-height: 0.95;
}

.tarot-subtitle {
  margin: 0 0 58px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1.18rem;
}

.tarot-form {
  display: grid;
  gap: 38px;
}

.tarot-question,
.tarot-fields label {
  display: grid;
  text-align: left;
}

.tarot-question span,
.tarot-fields span {
  margin-bottom: 12px;
  color: var(--faint);
  font-family: var(--serif);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.tarot-question textarea,
.tarot-fields input {
  width: 100%;
  border: 1px solid rgba(240, 184, 106, 0.28);
  border-radius: 14px;
  color: var(--text);
  background: rgba(5, 6, 10, 0.66);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.26);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tarot-question textarea {
  min-height: 126px;
  resize: vertical;
  padding: 20px;
  font-size: 1.08rem;
  font-style: italic;
  font-weight: 800;
  line-height: 1.55;
}

.tarot-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.tarot-fields input {
  min-height: 64px;
  padding: 0 20px;
  font-size: 1rem;
  font-weight: 800;
}

.tarot-question textarea:focus,
.tarot-fields input:focus {
  border-color: rgba(240, 184, 106, 0.72);
  box-shadow: 0 0 0 4px rgba(240, 184, 106, 0.08);
}

.tarot-question textarea::placeholder,
.tarot-fields input::placeholder {
  color: rgba(243, 238, 231, 0.28);
}

.tarot-question-hint {
  margin: 10px 0 0;
  color: rgba(243, 238, 231, 0.48);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.55;
}

.tarot-question-hint[data-state="error"] {
  color: #f7a8a8;
}

.tarot-question-hint[data-state="success"] {
  color: rgba(119, 220, 190, 0.86);
}

.tarot-suggestion {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  border: 1px solid rgba(144, 169, 181, 0.14);
  border-radius: 14px;
  padding: 28px;
  text-align: left;
  background:
    radial-gradient(circle at 16% 0%, rgba(240, 184, 106, 0.08), transparent 18rem),
    rgba(15, 10, 24, 0.82);
}

.tarot-suggestion[hidden] {
  display: none;
}

.tarot-suggestion__spark {
  padding-top: 4px;
  color: rgba(240, 184, 106, 0.86);
  font-size: 1.55rem;
  line-height: 1;
}

.tarot-suggestion p {
  margin: 0 0 10px;
  color: rgba(240, 184, 106, 0.62);
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.tarot-suggestion h2 {
  margin: 0 0 12px;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.48rem;
  font-style: italic;
  font-weight: 650;
}

.tarot-suggestion strong {
  display: block;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.tarot-suggestion__use {
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  padding: 0 20px;
  color: var(--text);
  background: rgba(240, 184, 106, 0.2);
  font-weight: 800;
  cursor: pointer;
}

.tarot-suggestion__use:hover {
  background: rgba(240, 184, 106, 0.28);
}

#tarotSuggestionHint {
  margin-left: 10px;
  color: var(--faint);
  font-size: 0.92rem;
  font-weight: 700;
}

.tarot-submit {
  display: inline-flex;
  min-width: 230px;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 20px;
  border: 1px solid rgba(240, 184, 106, 0.22);
  border-radius: 999px;
  color: rgba(243, 238, 231, 0.62);
  background: rgba(5, 6, 10, 0.74);
  font-family: var(--serif);
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  cursor: pointer;
}

.tarot-submit:hover {
  border-color: rgba(240, 184, 106, 0.54);
  color: var(--text);
}

.deck-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin: 64px 0 60px;
}

.deck-card {
  position: relative;
  display: grid;
  min-height: 254px;
  align-content: start;
  border: 1px solid rgba(144, 169, 181, 0.16);
  border-radius: 14px;
  padding: 26px 30px 28px;
  color: var(--text);
  background: rgba(15, 10, 24, 0.74);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.deck-card:hover,
.deck-card.is-selected {
  border-color: rgba(240, 184, 106, 0.42);
  box-shadow: 0 22px 70px rgba(240, 184, 106, 0.08);
  transform: translateY(-2px);
}

.deck-card h2 {
  max-width: 190px;
  margin: 0 0 18px;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 650;
  line-height: 1.05;
}

.deck-card p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.55;
}

.deck-card small {
  margin-bottom: 14px;
  color: rgba(240, 184, 106, 0.72);
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.deck-card > span {
  position: absolute;
  right: 28px;
  bottom: 22px;
  color: rgba(240, 184, 106, 0.78);
}

.deck-card.is-selected > span {
  left: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}

.deck-card.is-selected > span::before,
.deck-card.is-selected > span::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(240, 184, 106, 0.16);
}

.tarot-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.tarot-back {
  display: inline-flex;
  min-width: 158px;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(144, 169, 181, 0.16);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(5, 6, 10, 0.66);
  font-size: 0.98rem;
  font-weight: 900;
  cursor: pointer;
}

.tarot-back:hover {
  border-color: rgba(240, 184, 106, 0.3);
  color: var(--text);
}

.spread-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 64px auto 60px;
  width: min(1080px, 100%);
}

.spread-card {
  position: relative;
  display: grid;
  min-height: 164px;
  align-content: start;
  border: 1px solid rgba(144, 169, 181, 0.16);
  border-radius: 14px;
  padding: 24px 96px 28px 28px;
  color: var(--text);
  background: rgba(15, 10, 24, 0.74);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.spread-card:hover,
.spread-card.is-selected {
  border-color: rgba(240, 184, 106, 0.42);
  box-shadow: 0 22px 70px rgba(240, 184, 106, 0.08);
  transform: translateY(-2px);
}

.spread-card small {
  position: absolute;
  top: 24px;
  right: 26px;
  color: rgba(240, 184, 106, 0.56);
  font-family: var(--serif);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.spread-card h2 {
  margin: 0 0 14px;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 650;
  line-height: 1.08;
}

.spread-card p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.55;
}

.spread-card > span {
  position: absolute;
  right: 28px;
  bottom: 22px;
  color: rgba(240, 184, 106, 0.78);
}

.spread-card.is-selected > span {
  left: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}

.spread-card.is-selected > span::before,
.spread-card.is-selected > span::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(240, 184, 106, 0.16);
}

.tarot-step-panel--draw h1 {
  width: min(940px, 100%);
  margin: 0 auto 18px;
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 1.04;
}

.draw-count {
  margin: 0 0 34px;
  color: rgba(240, 184, 106, 0.74);
  font-family: var(--serif);
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: 0.34em;
}

.draw-status {
  margin: 0 0 26px;
  color: rgba(243, 238, 231, 0.66);
  font-family: var(--serif);
  font-size: clamp(1.04rem, 1.4vw, 1.28rem);
  font-style: italic;
  font-weight: 650;
}

.shuffle-ritual {
  display: none;
  justify-items: center;
  gap: 18px;
  min-height: 330px;
  margin: 0 auto 22px;
}

.tarot-step-panel--draw.is-shuffling .shuffle-ritual {
  display: grid;
}

.shuffle-ritual__deck {
  position: relative;
  width: 224px;
  height: 286px;
  perspective: 900px;
}

.shuffle-ritual__deck span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(240, 184, 106, 0.34);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 35%, rgba(216, 174, 145, 0.22), transparent 38%),
    radial-gradient(circle at 50% 55%, rgba(164, 108, 196, 0.26), transparent 48%),
    linear-gradient(145deg, rgba(42, 24, 58, 0.98), rgba(6, 5, 10, 0.98));
  box-shadow:
    inset 0 0 0 8px rgba(255, 255, 255, 0.015),
    inset 0 0 0 1px rgba(240, 184, 106, 0.11),
    0 28px 80px rgba(0, 0, 0, 0.44),
    0 0 44px rgba(164, 108, 196, 0.14);
  animation: shuffle-card 1.48s cubic-bezier(0.68, -0.3, 0.32, 1.28) infinite;
  transform-origin: 50% 82%;
}

.shuffle-ritual__deck span::before,
.shuffle-ritual__deck span::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.shuffle-ritual__deck span::before {
  inset: 14px;
  border: 1px solid rgba(240, 184, 106, 0.16);
  background:
    linear-gradient(90deg, transparent 48%, rgba(240, 184, 106, 0.16) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(240, 184, 106, 0.16) 49% 51%, transparent 52%);
}

.shuffle-ritual__deck span::after {
  inset: -16px;
  background: radial-gradient(circle, rgba(240, 184, 106, 0.22), transparent 64%);
  filter: blur(18px);
  opacity: 0.4;
  z-index: -1;
}

.shuffle-ritual__deck span:nth-child(1) { animation-delay: 0s; }
.shuffle-ritual__deck span:nth-child(2) { animation-delay: -0.18s; }
.shuffle-ritual__deck span:nth-child(3) { animation-delay: -0.36s; }
.shuffle-ritual__deck span:nth-child(4) { animation-delay: -0.54s; }
.shuffle-ritual__deck span:nth-child(5) { animation-delay: -0.72s; }
.shuffle-ritual__deck span:nth-child(6) { animation-delay: -0.9s; }
.shuffle-ritual__deck span:nth-child(7) { animation-delay: -1.08s; }

.shuffle-ritual p {
  margin: 0;
  color: rgba(216, 174, 145, 0.74);
  font-family: var(--serif);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.card-fan {
  position: relative;
  width: min(1180px, calc(100vw - 96px));
  height: min(360px, 36vw);
  min-height: 320px;
  margin: 0 auto 22px;
  contain: layout style;
  cursor: pointer;
  overflow: visible;
  isolation: isolate;
}

.tarot-step-panel--draw.is-shuffling .card-fan {
  display: none;
}

.fan-card {
  position: absolute;
  left: calc(50% - 68px);
  bottom: 6px;
  width: 136px;
  height: 210px;
  border: 1px solid rgba(240, 184, 106, 0.2);
  border-radius: 18px;
  color: rgba(240, 184, 106, 0.42);
  background:
    linear-gradient(180deg, rgba(10, 7, 18, 0.08), rgba(10, 7, 18, 0.2)),
    url("assets/card-back-mystic.svg") center / cover no-repeat;
  box-shadow:
    inset 0 0 0 5px rgba(255, 239, 190, 0.035),
    inset 0 0 26px rgba(240, 184, 106, 0.1),
    0 0 22px rgba(164, 108, 196, 0.12);
  pointer-events: none;
  transform:
    translateX(var(--spread-x))
    translateY(var(--spread-y))
    rotate(var(--fan-rotate));
  transform-origin: 50% var(--fan-origin, 162%);
  transition:
    border-color 0.16s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    opacity 0.2s ease,
    transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  will-change: transform, opacity;
}

.fan-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 238, 190, 0.18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 39%, rgba(255, 236, 180, 0.12), transparent 28%),
    linear-gradient(112deg, transparent 0 34%, rgba(255, 250, 225, 0.09), transparent 66%);
  opacity: 0.8;
}

.fan-card::after {
  content: "";
  inset: auto;
  position: absolute;
  top: -28%;
  left: -72%;
  width: 54%;
  height: 150%;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 246, 219, 0.22), transparent);
  filter: blur(8px);
  opacity: 0;
  transform: rotate(18deg);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.fan-card:hover,
.fan-card:focus-visible,
.fan-card.is-hovered {
  border-color: rgba(240, 184, 106, 0.42);
  filter: brightness(1.12) saturate(1.08);
  box-shadow:
    inset 0 0 0 7px rgba(255, 255, 255, 0.014),
    inset 0 0 0 1px rgba(240, 184, 106, 0.1),
    0 22px 42px rgba(0, 0, 0, 0.34),
    0 0 34px rgba(240, 184, 106, 0.16),
    0 0 58px rgba(164, 108, 196, 0.18);
  outline: none;
  transform:
    translateX(var(--spread-x))
    translateY(calc(var(--spread-y) - var(--hover-lift, 42px)))
    rotate(calc(var(--fan-rotate) + var(--hover-tilt, 0deg)))
    scale(1.035);
  z-index: 5;
}

.fan-card.is-picked {
  pointer-events: none;
  opacity: 0;
  transform:
    translateX(var(--spread-x))
    translateY(-150px)
    rotate(var(--fan-rotate))
    scale(0.7);
}

.card-fan.is-complete .fan-card:not(.is-picked) {
  pointer-events: none;
  opacity: 0.32;
}

.draw-picked {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}

.picked-dot {
  width: 34px;
  height: 42px;
  border: 1px solid rgba(240, 184, 106, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(240, 184, 106, 0.16), transparent 12px),
    rgba(22, 15, 32, 0.86);
}

.tarot-step-panel--reveal h1 {
  margin-bottom: 22px;
  font-size: clamp(3rem, 5vw, 5.1rem);
}

.reveal-divider {
  display: flex;
  width: min(460px, 72vw);
  align-items: center;
  gap: 18px;
  margin: 0 auto 82px;
  color: rgba(240, 184, 106, 0.42);
}

.reveal-divider::before,
.reveal-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(240, 184, 106, 0.1);
}

.reveal-grid {
  display: grid;
  grid-template-columns: repeat(var(--reveal-count, 5), minmax(150px, 1fr));
  gap: 30px;
  align-items: start;
}

.revealed-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-width: 0;
  animation: reveal-card-rise 0.72s ease both;
  animation-delay: calc(var(--reveal-order, 0) * 0.09s);
}

.revealed-card__position {
  min-height: 16px;
  color: rgba(240, 184, 106, 0.58);
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.revealed-card__image {
  width: min(190px, 100%);
  aspect-ratio: 0.58;
  border-radius: 14px;
  border: 1px solid rgba(240, 184, 106, 0.32);
  object-fit: cover;
  filter: sepia(0.16) saturate(0.86) contrast(1.08) brightness(0.94);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.42),
    0 0 0 6px rgba(23, 14, 34, 0.74),
    0 0 42px rgba(216, 174, 145, 0.1);
  background: rgba(15, 10, 24, 0.74);
}

.revealed-card.is-reversed .revealed-card__image {
  transform: rotate(180deg);
}

.revealed-card__name {
  margin-top: 6px;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 650;
  line-height: 1.1;
}

.revealed-card__orientation {
  min-height: 12px;
  color: var(--rose);
  font-family: var(--serif);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.reading-core {
  display: grid;
  gap: 22px;
  width: min(980px, 100%);
  margin: 78px auto 40px;
  text-align: left;
}

.reading-core[hidden] {
  display: none;
}

.tarot-reading-ritual {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(680px, 100%);
  margin: -34px auto 10px;
  text-align: center;
}

.tarot-reading-ritual header p {
  margin: 0 0 8px;
  color: rgba(240, 184, 106, 0.72);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.tarot-reading-ritual header h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.tarot-oracle {
  position: relative;
  width: min(390px, 84vw);
  aspect-ratio: 1;
  isolation: isolate;
  animation: tarot-oracle-float 4.8s ease-in-out infinite;
}

.tarot-oracle::after {
  position: absolute;
  z-index: -1;
  inset: 24%;
  border-radius: 50%;
  background: rgba(70, 205, 197, 0.2);
  filter: blur(32px);
  content: "";
  animation: tarot-oracle-breathe 2.8s ease-in-out infinite;
}

.tarot-oracle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  mix-blend-mode: screen;
  animation: tarot-oracle-glow 3.2s ease-in-out infinite;
}

.tarot-oracle__core,
.tarot-oracle__sheen {
  position: absolute;
  z-index: 2;
  top: 21%;
  left: 29%;
  width: 43%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.tarot-oracle__core {
  border: 1px solid rgba(145, 239, 229, 0.22);
  background-image: url("/assets/tarot-oracle-loading.jpg");
  background-position: 50% 42%;
  background-size: 233%;
  box-shadow: 0 0 20px rgba(101, 211, 198, 0.2), inset 0 0 18px rgba(255, 255, 255, 0.08);
  opacity: 0.42;
  mix-blend-mode: screen;
  animation: tarot-oracle-core 13s linear infinite;
}

.tarot-oracle__sheen {
  z-index: 3;
  overflow: hidden;
}

.tarot-oracle__sheen::before {
  position: absolute;
  top: -25%;
  left: -70%;
  width: 34%;
  height: 150%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  filter: blur(3px);
  content: "";
  transform: rotate(18deg);
  animation: tarot-oracle-sheen 3.6s ease-in-out infinite;
}

.tarot-oracle__orbit {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(226, 177, 111, 0.3);
  border-radius: 50%;
  pointer-events: none;
}

.tarot-oracle__orbit--outer {
  inset: 5%;
  border-style: dashed;
  animation: tarot-oracle-spin 24s linear infinite;
}

.tarot-oracle__orbit--inner {
  inset: 21%;
  border-color: rgba(101, 211, 198, 0.28);
  animation: tarot-oracle-spin 16s linear infinite reverse;
}

.tarot-oracle__spark {
  position: absolute;
  z-index: 3;
  color: #f0b86a;
  filter: drop-shadow(0 0 8px currentColor);
  animation: tarot-oracle-twinkle 1.9s ease-in-out infinite;
}

.tarot-oracle__spark--one { top: 14%; left: 13%; }
.tarot-oracle__spark--two { top: 24%; right: 10%; animation-delay: -0.7s; }
.tarot-oracle__spark--three { right: 18%; bottom: 16%; animation-delay: -1.25s; }

.tarot-reading-ritual__status {
  max-width: 520px;
  color: rgba(243, 238, 231, 0.74) !important;
  font-family: var(--serif);
  font-style: italic;
  text-align: center;
}

.tarot-reading-ritual__pulse {
  display: inline-flex;
  gap: 7px;
  min-height: 12px;
}

.tarot-reading-ritual__pulse i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #65d3c6;
  animation: tarot-oracle-dot 1.2s ease-in-out infinite;
}

.tarot-reading-ritual__pulse i:nth-child(2) { animation-delay: 0.16s; }
.tarot-reading-ritual__pulse i:nth-child(3) { animation-delay: 0.32s; }

@keyframes tarot-oracle-spin { to { transform: rotate(360deg); } }
@keyframes tarot-oracle-float { 50% { transform: translateY(-10px) scale(1.012); } }
@keyframes tarot-oracle-glow { 50% { filter: brightness(1.14) saturate(1.12) drop-shadow(0 0 18px rgba(101, 211, 198, 0.24)); } }
@keyframes tarot-oracle-core { to { transform: rotate(360deg); } }
@keyframes tarot-oracle-sheen { 0%, 18% { transform: translateX(-20%) rotate(18deg); opacity: 0; } 42% { opacity: 0.8; } 68%, 100% { transform: translateX(520%) rotate(18deg); opacity: 0; } }
@keyframes tarot-oracle-breathe { 50% { opacity: 0.55; transform: scale(1.1); } }
@keyframes tarot-oracle-twinkle { 50% { opacity: 0.25; transform: scale(0.72); } }
@keyframes tarot-oracle-dot { 0%, 80%, 100% { opacity: 0.28; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-5px); } }

@media (prefers-reduced-motion: reduce) {
  .tarot-oracle::after,
  .tarot-oracle,
  .tarot-oracle img,
  .tarot-oracle__core,
  .tarot-oracle__sheen::before,
  .tarot-oracle__orbit,
  .tarot-oracle__spark,
  .tarot-reading-ritual__pulse i { animation: none; }
}

.reading-story-heading {
  margin-bottom: 34px;
  text-align: center;
}

.reading-story-heading p {
  margin: 0 0 12px;
  color: rgba(240, 184, 106, 0.58);
  font-family: var(--serif);
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.reading-story-heading h2 {
  margin: 0;
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4.5vw, 4.2rem);
  font-style: italic;
  font-weight: 500;
}

.reading-story-heading em {
  display: block;
  max-width: 760px;
  margin: 16px auto 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.6;
}

.reading-story-heading span {
  display: flex;
  width: min(180px, 46vw);
  align-items: center;
  gap: 16px;
  margin: 26px auto 0;
  color: rgba(240, 184, 106, 0.3);
}

.reading-story-heading span::before,
.reading-story-heading span::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(240, 184, 106, 0.14);
}

.reading-core__panel {
  border: 1px solid rgba(144, 169, 181, 0.16);
  border-radius: 14px;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 0%, rgba(240, 184, 106, 0.07), transparent 18rem),
    rgba(15, 10, 24, 0.74);
}

.reading-story-card {
  border: 1px solid rgba(144, 169, 181, 0.18);
  border-radius: 14px;
  padding: 34px 34px 38px;
  background:
    radial-gradient(circle at 12% 0%, rgba(240, 184, 106, 0.08), transparent 18rem),
    rgba(18, 12, 28, 0.78);
}

.reading-story-card--warm,
.reading-story-card--insight {
  border-color: rgba(240, 184, 106, 0.28);
  background:
    radial-gradient(circle at 16% 0%, rgba(240, 184, 106, 0.1), transparent 18rem),
    rgba(28, 18, 28, 0.82);
}

.reading-story-card--verdict {
  border-color: rgba(101, 211, 198, 0.28);
  background:
    radial-gradient(circle at 16% 0%, rgba(101, 211, 198, 0.08), transparent 18rem),
    rgba(13, 18, 27, 0.82);
}

.reading-story-card--direct {
  border-color: rgba(216, 174, 145, 0.5);
  background:
    radial-gradient(circle at 12% 0%, rgba(216, 174, 145, 0.14), transparent 26rem),
    radial-gradient(circle at 92% 100%, rgba(164, 108, 196, 0.12), transparent 22rem),
    rgba(16, 10, 14, 0.9);
}

.reading-story-card--direct h3 {
  margin: 0 0 18px;
  color: #f2dfca;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  font-style: italic;
  font-weight: 500;
}

.reading-answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.reading-answer-grid article {
  border: 1px solid rgba(216, 174, 145, 0.2);
  border-radius: 14px;
  padding: 22px;
  background: rgba(5, 5, 9, 0.38);
}

.reading-answer-grid span {
  display: block;
  margin-bottom: 14px;
  color: rgba(216, 174, 145, 0.76);
  font-family: var(--serif);
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.reading-answer-grid ul,
.reading-answer-grid ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 20px;
}

.reading-answer-grid li {
  color: rgba(243, 238, 231, 0.74);
  font-size: 0.98rem;
  font-weight: 780;
  line-height: 1.62;
}

.reading-plan-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.reading-plan-timeline article {
  border: 1px solid rgba(101, 211, 198, 0.2);
  border-radius: 14px;
  padding: 18px;
  background: rgba(2, 10, 16, 0.42);
}

.reading-plan-timeline span {
  display: block;
  margin-bottom: 10px;
  color: rgba(101, 211, 198, 0.86);
  font-family: var(--serif);
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.reading-plan-timeline p {
  margin: 0;
  color: rgba(243, 238, 231, 0.72);
  font-size: 0.96rem;
  font-weight: 760;
  line-height: 1.62;
}

.reading-story-card--practical {
  border-color: rgba(101, 211, 198, 0.24);
  background:
    radial-gradient(circle at 16% 0%, rgba(101, 211, 198, 0.07), transparent 18rem),
    rgba(11, 18, 24, 0.82);
}

.reading-story-card--closing {
  border-color: rgba(228, 127, 141, 0.3);
  background:
    radial-gradient(circle at 16% 0%, rgba(228, 127, 141, 0.08), transparent 18rem),
    rgba(22, 11, 25, 0.82);
}

.story-card-heading {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.story-card-heading span {
  color: rgba(240, 184, 106, 0.86);
  font-size: 1.15rem;
}

.story-card-heading strong {
  color: rgba(240, 184, 106, 0.62);
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.story-card-heading::after {
  content: "";
  height: 1px;
  background: rgba(240, 184, 106, 0.18);
}

.story-prose {
  margin: 0;
  color: rgba(243, 238, 231, 0.76);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  font-weight: 800;
  line-height: 1.82;
}

.reading-quote {
  position: relative;
  margin: 12px 18px;
  border: 1px solid rgba(240, 184, 106, 0.26);
  border-radius: 14px;
  padding: 34px 70px;
  background: rgba(18, 12, 28, 0.72);
  text-align: center;
}

.reading-quote::before,
.reading-quote::after {
  position: absolute;
  color: rgba(240, 184, 106, 0.42);
  font-family: var(--serif);
  font-size: 3rem;
  line-height: 1;
}

.reading-quote::before {
  content: "“";
  top: 18px;
  left: 28px;
}

.reading-quote::after {
  content: "”";
  right: 28px;
  bottom: 10px;
}

.reading-quote p {
  margin: 0;
  color: rgba(243, 238, 231, 0.84);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.65;
}

.reading-final-line {
  margin: 14px 0 28px;
  color: rgba(240, 184, 106, 0.62);
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  text-align: center;
}

.reading-support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: min(680px, 100%);
  margin: 0 auto 18px;
  border: 1px solid rgba(240, 184, 106, 0.22);
  border-radius: 14px;
  padding: 20px 28px;
  background: rgba(18, 12, 28, 0.72);
}

.reading-support h3 {
  margin: 0 0 4px;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
}

.reading-support p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.reading-support a {
  color: rgba(240, 184, 106, 0.82);
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
}

.reading-core__eyebrow {
  margin: 0 0 10px;
  color: rgba(240, 184, 106, 0.62);
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.reading-core h2,
.reading-core h3 {
  margin: 0 0 12px;
  color: var(--text);
  font-family: var(--serif);
  font-style: italic;
  line-height: 1.1;
}

.reading-core h2 {
  font-size: 1.72rem;
}

.reading-core h3 {
  font-size: 1.25rem;
}

.reading-core p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.72;
}

.reading-signals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.reading-signal {
  border: 1px solid rgba(144, 169, 181, 0.12);
  border-radius: 12px;
  padding: 14px;
  background: rgba(5, 6, 10, 0.42);
}

.reading-signal span {
  display: block;
  margin-bottom: 8px;
  color: var(--faint);
  font-family: var(--serif);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.reading-signal strong {
  color: var(--text);
  font-size: 1rem;
}

.position-reading {
  display: grid;
  gap: 8px;
  border-left: 1px solid rgba(240, 184, 106, 0.22);
  padding-left: 18px;
}

.position-reading + .position-reading {
  margin-top: 18px;
}

.results {
  padding: 44px 0 84px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 26px;
  margin-bottom: 24px;
}

.section-heading h2,
.method h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 4.2rem);
  line-height: 1;
}

.result-grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 16px;
}

.result-card {
  min-height: 250px;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px;
  background: rgba(18, 21, 31, 0.76);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.result-card--life {
  background:
    radial-gradient(circle at 20% 0%, rgba(101, 211, 198, 0.16), transparent 16rem),
    rgba(18, 21, 31, 0.82);
}

.result-card span {
  color: var(--amber);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.result-card strong {
  display: block;
  margin: 18px 0 14px;
  color: var(--text);
  font-family: var(--serif);
  font-size: 4.8rem;
  line-height: 0.9;
}

.result-card p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.72;
}

.method {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  border-top: 1px solid var(--line);
  padding: 44px 0 70px;
}

.method p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.8;
}

.history {
  border-top: 1px solid var(--line);
  padding: 44px 0 86px;
}

.history--page {
  min-height: calc(100vh - 150px);
  display: grid;
  align-content: center;
  border-top: 0;
  padding-top: 96px;
}

.history h2 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1;
}

.history h1 {
  max-width: 760px;
  margin-bottom: 18px;
  font-size: clamp(3.5rem, 7vw, 6.4rem);
}

.history p:last-child {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.8;
}

.history-empty {
  max-width: 620px;
  margin-top: 34px;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 26px;
  background: rgba(18, 21, 31, 0.76);
}

.history-empty span {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--amber);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.history-empty strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.2rem;
}

.history-empty p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.history-list {
  display: grid;
  gap: 18px;
  width: min(880px, 100%);
  margin-top: 34px;
}

.history-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(101, 211, 198, 0.12), transparent 18rem),
    rgba(18, 21, 31, 0.78);
  box-shadow: var(--shadow);
}

.history-card__topline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.history-card__topline span {
  color: var(--amber);
}

.history-card h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.05;
}

.history-card strong {
  display: block;
  margin-bottom: 14px;
  color: rgba(245, 239, 224, 0.78);
}

.history-card p {
  max-width: 720px;
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.72;
}

.history-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: rgba(245, 239, 224, 0.74);
  line-height: 1.55;
}

.history-clear {
  justify-self: start;
  border: 1px solid rgba(240, 184, 106, 0.36);
  border-radius: 999px;
  padding: 12px 18px;
  color: var(--amber);
  background: rgba(240, 184, 106, 0.08);
  font-weight: 900;
  cursor: pointer;
}

.history-clear:hover {
  border-color: rgba(240, 184, 106, 0.7);
  background: rgba(240, 184, 106, 0.14);
}

.insight-shell {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 34px;
  width: min(1180px, calc(100% - 42px));
  margin: 0 auto;
  padding: 82px 0 94px;
}

.insight-copy {
  max-width: 850px;
}

.insight-copy h1 {
  max-width: 850px;
  margin: 0 0 18px;
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(3.6rem, 8vw, 7.4rem);
  font-style: italic;
  font-weight: 500;
  line-height: 0.9;
}

.insight-copy p:last-child {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 1.08rem;
  font-weight: 750;
  line-height: 1.78;
}

.insight-root,
.insight-dashboard {
  display: grid;
  gap: 26px;
}

.insight-empty,
.insight-hero-card,
.insight-evidence,
.insight-themes,
.insight-action,
.insight-recent {
  border: 1px solid rgba(216, 174, 145, 0.28);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 0%, rgba(101, 211, 198, 0.12), transparent 24rem),
    radial-gradient(circle at 100% 10%, rgba(240, 184, 106, 0.12), transparent 22rem),
    rgba(9, 11, 16, 0.78);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.insight-empty {
  display: grid;
  gap: 16px;
  justify-items: start;
  padding: 38px;
}

.insight-empty span,
.insight-hero-card p,
.insight-section-heading span,
.insight-action span,
.insight-evidence-card span,
.insight-theme-card span,
.insight-recent li span {
  color: rgba(240, 184, 106, 0.76);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.insight-empty h2,
.insight-hero-card h2,
.insight-section-heading h2 {
  margin: 0;
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
}

.insight-empty p,
.insight-hero-card strong,
.insight-theme-card p,
.insight-action p,
.insight-recent p {
  margin: 0;
  color: rgba(245, 239, 224, 0.76);
  font-weight: 750;
  line-height: 1.75;
}

.insight-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.insight-empty__actions a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(240, 184, 106, 0.34);
  border-radius: 999px;
  padding: 0 18px;
  color: var(--amber);
  background: rgba(240, 184, 106, 0.08);
  font-weight: 900;
  text-decoration: none;
}

.insight-hero-card {
  display: grid;
  gap: 18px;
  padding: 42px;
}

.insight-hero-card strong {
  display: block;
  max-width: 850px;
  font-size: 1.08rem;
}

.insight-evidence,
.insight-themes,
.insight-recent {
  display: grid;
  gap: 22px;
  padding: 30px;
}

.insight-section-heading {
  display: grid;
  gap: 8px;
}

.insight-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.insight-evidence-card {
  display: grid;
  gap: 8px;
  min-height: 132px;
  border: 1px solid rgba(101, 211, 198, 0.22);
  border-radius: 16px;
  padding: 18px;
  background: rgba(8, 13, 22, 0.68);
}

.insight-evidence-card strong {
  color: var(--cyan);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
}

.insight-evidence-card p {
  margin: 0;
  color: var(--text);
  font-weight: 900;
}

.insight-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.insight-theme-card {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(164, 108, 196, 0.28);
  border-radius: 18px;
  padding: 22px;
  background: rgba(13, 9, 16, 0.72);
}

.insight-theme-card h3 {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 1.3rem;
}

.insight-theme-card strong {
  display: block;
  border-top: 1px solid rgba(216, 174, 145, 0.2);
  padding-top: 14px;
  color: var(--amber);
  line-height: 1.55;
}

.insight-action {
  padding: 30px 34px;
}

.insight-action p {
  max-width: 900px;
  margin-top: 10px;
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-style: italic;
  line-height: 1.25;
}

.insight-recent ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.insight-recent li {
  border-top: 1px solid rgba(245, 239, 224, 0.1);
  padding-top: 16px;
}

.insight-recent strong {
  display: block;
  margin: 6px 0;
  color: var(--text);
  font-size: 1.08rem;
}

@media (max-width: 900px) {
  .insight-evidence-grid,
  .insight-theme-grid {
    grid-template-columns: 1fr;
  }

  .insight-shell {
    width: min(100% - 28px, 1180px);
    padding-top: 56px;
  }

  .insight-empty,
  .insight-hero-card,
  .insight-evidence,
  .insight-themes,
  .insight-action,
  .insight-recent {
    padding: 24px 20px;
  }
}

.tool-page {
  display: grid;
  gap: 34px;
  width: min(100% - 48px, 1120px);
  margin: 72px auto 96px;
}

.tool-heading {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.tool-heading h1 {
  margin: 0;
  color: #f2dfca;
  font-family: var(--serif);
  font-size: clamp(3.5rem, 8vw, 6.6rem);
  font-style: italic;
  font-weight: 500;
}

.tool-heading p:last-child {
  max-width: 760px;
  margin: 0;
  color: rgba(245, 239, 224, 0.66);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.75;
}

.image-reader-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
  gap: 22px;
}

.tool-card {
  border: 1px solid rgba(164, 108, 196, 0.28);
  border-radius: 18px;
  padding: 28px;
  background:
    radial-gradient(circle at 14% 0%, rgba(164, 108, 196, 0.12), transparent 24rem),
    rgba(13, 8, 18, 0.84);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
}

.image-reader-form {
  display: grid;
  gap: 18px;
}

.image-reader-form label:not(.image-drop) {
  display: grid;
  gap: 10px;
}

.image-reader-form span {
  color: rgba(216, 174, 145, 0.72);
  font-family: var(--serif);
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.image-reader-form textarea,
.image-reader-form select {
  width: 100%;
  border: 1px solid rgba(216, 174, 145, 0.2);
  border-radius: 14px;
  padding: 15px 16px;
  color: #f5efe0;
  background: rgba(5, 5, 9, 0.42);
  font: inherit;
}

.image-reader-form textarea {
  min-height: 130px;
  resize: vertical;
}

.image-drop {
  display: grid;
  min-height: 230px;
  place-items: center;
  gap: 10px;
  border: 1px dashed rgba(216, 174, 145, 0.42);
  border-radius: 18px;
  padding: 28px;
  color: rgba(245, 239, 224, 0.72);
  background: rgba(216, 174, 145, 0.06);
  text-align: center;
  cursor: pointer;
}

.image-drop input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.image-drop > span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(216, 174, 145, 0.42);
  border-radius: 50%;
  font-size: 1.45rem;
}

.image-drop strong {
  color: #f2dfca;
  font-family: var(--serif);
  font-size: 1.35rem;
}

.image-drop small,
.image-preview-empty p {
  color: rgba(245, 239, 224, 0.52);
  line-height: 1.6;
}

.image-preview-card {
  display: grid;
  min-height: 420px;
  place-items: center;
  overflow: hidden;
}

.image-preview-card img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  border-radius: 14px;
  object-fit: cover;
}

.image-preview-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.image-preview-empty span {
  color: #d8ae91;
  font-size: 3rem;
}

.image-preview-empty strong {
  color: #f2dfca;
  font-family: var(--serif);
  font-size: 1.7rem;
}

@keyframes shuffle-card {
  0% {
    transform: translate3d(-82px, 18px, 0) rotate(-18deg) rotateY(-18deg);
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  50% {
    transform: translate3d(0, -10px, 40px) rotate(0deg) rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(82px, 18px, 0) rotate(18deg) rotateY(18deg);
    opacity: 0;
  }
}

@keyframes fan-card-breathe {
  0%,
  100% {
    filter: brightness(1) saturate(1);
  }
  50% {
    filter: brightness(1.06) saturate(1.08);
  }
}

@keyframes fan-card-shimmer {
  0%,
  58% {
    opacity: 0;
    transform: translateX(0) rotate(18deg);
  }
  72% {
    opacity: 0.56;
  }
  100% {
    opacity: 0;
    transform: translateX(410%) rotate(18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .starfield,
  .fan-card::after,
  .shuffle-ritual__deck span::after {
    display: none;
  }
}

/* Legacy admin layout kept disabled while the new control panel is active. */
@media (max-width: 0px) {
.admin-page {
  width: min(100% - 32px, 1480px);
  min-height: 100vh;
  padding-bottom: 64px;
}

.admin-topbar {
  margin-bottom: 26px;
}

.admin-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 308px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.admin-sidebar,
.admin-hero-card,
.admin-stats-grid article,
.admin-panel,
.admin-card {
  border: 1px solid rgba(205, 154, 118, 0.2);
  background:
    linear-gradient(145deg, rgba(26, 17, 29, 0.86), rgba(6, 7, 14, 0.86)),
    rgba(9, 7, 14, 0.9);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(18px);
}

.admin-sidebar {
  position: sticky;
  top: 22px;
  max-height: calc(100vh - 44px);
  overflow: auto;
  border-radius: 24px;
  padding: 22px;
}

.admin-sidebar__heading {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(205, 154, 118, 0.16);
}

.admin-sidebar__heading p,
.admin-eyebrow,
.admin-panel__header p,
.admin-menu__group h2 {
  margin: 0;
  color: rgba(205, 154, 118, 0.72);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.admin-sidebar__heading h1 {
  margin: 8px 0 0;
  color: #f3deca;
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 650;
}

.admin-menu {
  display: grid;
  gap: 14px;
}

.admin-menu button {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 11px 12px;
  background: transparent;
  color: rgba(245, 239, 224, 0.66);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.admin-menu button:hover,
.admin-menu button:focus-visible,
.admin-menu button.is-active {
  border-color: rgba(205, 154, 118, 0.38);
  background: rgba(205, 154, 118, 0.1);
  color: #f4ddc8;
  transform: translateX(3px);
}

.admin-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-menu__item span {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(205, 154, 118, 0.24);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
}

.admin-menu__group {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(137, 87, 171, 0.16);
  border-radius: 18px;
  background: rgba(137, 87, 171, 0.05);
}

.admin-menu__group h2 {
  padding: 4px 2px 6px;
}

.admin-menu__group button {
  padding-left: 16px;
  font-size: 0.92rem;
}

.admin-workspace {
  display: grid;
  gap: 20px;
}

.admin-hero-card {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
  min-height: 168px;
  border-radius: 28px;
  padding: 30px;
}

.admin-hero-card h2 {
  margin: 8px 0 10px;
  color: #f5e4d2;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  font-weight: 650;
  letter-spacing: 0;
}

.admin-hero-card span {
  display: block;
  max-width: 720px;
  color: rgba(245, 239, 224, 0.66);
  font-size: 1rem;
  line-height: 1.7;
}

.admin-status-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(145, 213, 173, 0.26);
  border-radius: 999px;
  padding: 10px 16px;
  color: #b6efc9;
  background: rgba(63, 169, 99, 0.08);
  font-weight: 800;
}

.admin-status-pill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7ce89c;
  box-shadow: 0 0 18px rgba(124, 232, 156, 0.9);
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.admin-stats-grid article {
  min-height: 132px;
  border-radius: 22px;
  padding: 20px;
}

.admin-stats-grid span,
.admin-card label span {
  display: block;
  color: rgba(205, 154, 118, 0.72);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.admin-stats-grid strong {
  display: block;
  margin: 12px 0 8px;
  color: #f5dfca;
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 650;
}

.admin-stats-grid em {
  color: rgba(245, 239, 224, 0.56);
  font-size: 0.9rem;
  font-style: normal;
}

.admin-panel {
  border-radius: 28px;
  padding: 24px;
}

.admin-panel__header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
}

.admin-panel__header h3 {
  margin: 8px 0 0;
  color: #f1deca;
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 650;
}

.admin-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.admin-action {
  border: 1px solid rgba(205, 154, 118, 0.42);
  border-radius: 999px;
  padding: 12px 18px;
  background: rgba(205, 154, 118, 0.08);
  color: #f4dcc5;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.admin-action--solid {
  border-color: rgba(216, 174, 145, 0.68);
  background: linear-gradient(135deg, rgba(216, 174, 145, 0.24), rgba(137, 87, 171, 0.22));
}

.admin-action:disabled {
  cursor: wait;
  opacity: 0.62;
}

.admin-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 16px;
}

.admin-card {
  border-radius: 22px;
  padding: 22px;
}

.admin-card--wide {
  grid-row: span 2;
}

.admin-card h4 {
  margin: 0 0 16px;
  color: #f4dcc6;
  font-size: 1.05rem;
}

.admin-table {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(205, 154, 118, 0.14);
  border-radius: 18px;
}

.admin-table div {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid rgba(205, 154, 118, 0.12);
  color: rgba(245, 239, 224, 0.64);
}

.admin-table div:last-child {
  border-bottom: 0;
}

.admin-table div:first-child {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(205, 154, 118, 0.74);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.admin-table strong {
  color: #f0dfce;
}

.admin-table strong small {
  display: block;
  margin-top: 4px;
  color: rgba(245, 239, 224, 0.5);
  font-size: 0.76rem;
  font-weight: 600;
}

.admin-table em {
  color: #d9b397;
  font-style: normal;
}

.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-row-actions button {
  border: 1px solid rgba(205, 154, 118, 0.34);
  border-radius: 999px;
  padding: 8px 11px;
  background: rgba(205, 154, 118, 0.08);
  color: #f4dcc5;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.admin-card label {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.admin-card input,
.admin-card textarea {
  width: 100%;
  border: 1px solid rgba(205, 154, 118, 0.18);
  border-radius: 14px;
  padding: 13px 14px;
  background: rgba(4, 4, 10, 0.46);
  color: #f2e3d5;
  font: inherit;
}

.admin-card textarea {
  min-height: 142px;
  resize: vertical;
  line-height: 1.65;
}

.admin-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: rgba(245, 239, 224, 0.68);
  line-height: 1.55;
}

.admin-list li span {
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: #c99676;
  box-shadow: 0 0 16px rgba(201, 150, 118, 0.7);
}

@media (max-width: 1100px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: relative;
    top: auto;
    max-height: none;
  }

  .admin-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body,
  .numerology-page,
  .daily-page {
    background-attachment: scroll;
  }

  .admin-page {
    width: min(100% - 22px, 1480px);
  }

  .admin-hero-card,
  .admin-panel__header {
    display: grid;
  }

  .admin-stats-grid,
  .admin-content-grid {
    grid-template-columns: 1fr;
  }

  .admin-table div {
    grid-template-columns: 1fr;
  }

  .admin-card--wide {
    grid-row: auto;
  }
}
}

@keyframes reveal-card-rise {
  from {
    opacity: 0;
    transform: translateY(34px) scale(0.94);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .auth-nav {
    justify-self: center;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .header-action {
    justify-self: center;
  }

  .hero-layout,
  .method {
    grid-template-columns: 1fr;
  }

  .hero-layout--form-focus {
    grid-template-columns: 1fr;
  }

  .numerology-panel {
    max-width: 860px;
    margin: 0 auto;
  }

  .deck-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-header {
    opacity: 1;
    pointer-events: auto;
  }

  .astrology-shell {
    grid-template-columns: 1fr;
  }

  .astro-chart-layout {
    grid-template-columns: 1fr;
  }

  .spread-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reveal-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .reading-signals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-fan {
    width: min(960px, calc(100vw - 64px));
    height: 324px;
  }

  .fan-card {
    width: 112px;
    height: 172px;
    left: calc(50% - 56px);
  }

  .number-orbit {
    margin: 0 auto;
  }

  .result-grid {
    grid-template-columns: 1fr 1fr;
  }

  .compat-profiles {
    gap: 42px;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 20px;
  }

  .site-header,
  .hero-layout,
  .results,
  .method,
  .history,
  .tarot-spread,
  .astrology-shell,
  .astrology-result,
  .daily-reading,
  .daily-footer {
    width: min(100% - 28px, 1180px);
  }

  .main-nav {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
  }

  .auth-nav {
    width: 100%;
    border-radius: 18px;
  }

  .auth-nav span,
  .auth-nav__history,
  .auth-nav__login,
  .auth-nav__register,
  .auth-nav__user,
  .auth-nav__logout {
    flex: 1 1 116px;
  }

  .auth-nav__user {
    max-width: none;
  }

  .auth-toast {
    right: 14px;
    bottom: 14px;
    align-items: stretch;
    flex-direction: column;
  }

  .hero-layout {
    margin-top: 48px;
    gap: 34px;
  }

  h1 {
    font-size: 3.7rem;
  }

  .lead {
    margin-bottom: 34px;
  }

  .number-orbit {
    display: none;
  }

  .control-card {
    padding: 20px;
    border-radius: 22px;
  }

  .mystic-form,
  .result-grid,
  .tarot-fields {
    grid-template-columns: 1fr;
  }

  .birth-chart-layout,
  .advanced-number-grid,
  .life-application-grid,
  .meaning-conflict-grid,
  .widget-grid-compact,
  .growth-path-flow,
  .year-journal-grid,
  .mini-card-grid {
    grid-template-columns: 1fr;
  }

  .radar-layout,
  .life-timeline {
    grid-template-columns: 1fr;
  }

  .life-timeline::before {
    top: 20px;
    bottom: 20px;
    left: 20px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgba(247, 193, 111, 0.1), rgba(247, 193, 111, 0.78), rgba(247, 193, 111, 0.1));
  }

  .life-timeline-item {
    padding-left: 24px;
  }

  .month-cycle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .birth-chart-card,
  .cycle-card {
    padding: 22px;
  }

  .numerology-panel {
    padding: 30px 18px 26px;
    border-radius: 18px;
  }

  .numerology-panel__title {
    margin-bottom: 24px;
    font-size: 2rem;
  }

  .numerology-tabs {
    margin: 0 -18px 24px;
  }

  .numerology-tab {
    min-height: 64px;
    padding: 0 10px;
    font-size: 0.95rem;
  }

  .birth-grid,
  .select-row,
  .select-row--time {
    grid-template-columns: 1fr;
  }

  .gender-group {
    gap: 16px;
  }

  .numerology-stage {
    width: min(100% - 28px, 980px);
    padding-top: 18px;
  }

  .numerology-stage h1 {
    font-size: 4rem;
  }

  .title-divider {
    margin-bottom: 28px;
  }

  .choice-question {
    margin: 46px 0 30px;
  }

  .choice-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .choice-card {
    min-height: 250px;
    padding: 34px 22px 30px;
  }

  .reader-panel {
    width: min(100% - 28px, 980px);
  }

  .reader-panel__inner {
    padding: 24px 18px;
  }

  .numerology-reading {
    width: min(100% - 28px, 1120px);
    gap: 34px;
    padding-bottom: 72px;
  }

  .number-orbit-chart {
    width: min(350px, calc(100vw - 42px));
  }

  .number-orbit-ring--middle {
    inset: 34px;
  }

  .number-orbit-ring--inner {
    inset: 112px;
  }

  .number-orbit-center {
    width: 94px;
    height: 94px;
  }

  .number-orbit-center strong {
    font-size: 2.7rem;
  }

  .number-orbit-center span,
  .number-orb-node span {
    font-size: 0.48rem;
    letter-spacing: 0.18em;
  }

  .number-orb-node {
    width: 72px;
    min-height: 100px;
    gap: 4px;
    transform:
      translate(-50%, -50%)
      rotate(var(--angle))
      translateY(calc(-1 * min(154px, 40vw)))
      rotate(calc(-1 * var(--angle)));
  }

  .number-orb-node strong {
    width: 54px;
    height: 54px;
    font-size: 1.25rem;
  }

  .number-orb-node i,
  .number-orb-node em {
    display: none;
  }

  .featured-number-card,
  .number-story-card,
  .name-analysis-card,
  .calculation-proof-card,
  .final-conclusion-card,
  .number-guidance-card {
    padding: 26px 20px;
  }

  .number-detail-grid,
  .name-totals,
  .calculation-grid,
  .featured-clarity-grid,
  .number-guidance-grid,
  .compat-profiles {
    grid-template-columns: 1fr;
  }

  .featured-clarity-grid .featured-clarity-action {
    grid-column: auto;
  }

  .number-guidance-card--self,
  .number-guidance-card--timing {
    grid-column: auto;
  }

  .number-story-label {
    grid-template-columns: auto 1fr;
  }

  .number-story-label::after {
    display: none;
  }

  .number-story-prose b {
    font-size: 3.4rem;
  }

  .number-reading-quote {
    width: 100%;
    padding: 30px 34px;
  }

  .compat-hero {
    gap: 20px;
  }

  .compat-hero h2 {
    font-size: 3.2rem;
  }

  .compat-hero h3 {
    font-size: 2.1rem;
  }

  .compat-orbit {
    width: 152px;
  }

  .compat-orbit span {
    inset: 34px;
  }

  .compat-score-row div {
    align-items: flex-end;
    letter-spacing: 0.12em;
  }

  .compat-conflict-map div {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .compat-conflict-map b {
    display: none;
  }

  .compat-identity-card {
    border-radius: 14px;
  }

  .compat-dynamics-flow {
    grid-template-columns: 1fr;
  }

  .compat-dynamics-flow article {
    min-height: auto;
  }

  .compat-dynamics-flow article:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -12px;
    left: 28px;
    width: 1px;
    height: 12px;
  }

  .final-conclusion-prose p {
    font-size: 1rem;
    line-height: 1.78;
  }

  .final-conclusion-prose p:first-child::first-letter {
    font-size: 3.6rem;
  }

  .final-conclusion-actions {
    padding: 22px 18px;
  }

  .final-conclusion-card blockquote {
    padding-inline: 8px;
  }

  .name-word strong {
    font-size: 1.05rem;
    letter-spacing: 0.28em;
  }

  .name-word span {
    gap: 10px;
  }

  .tarot-spread {
    padding: 74px 0 86px;
  }

  .daily-hero {
    padding-top: 20px;
  }

  .daily-title-block {
    padding-top: 52px;
  }

  .daily-title-block h1 {
    font-size: 3.25rem;
  }

  .daily-title-dot {
    margin: 24px 0 28px;
  }

  .daily-card-area {
    margin-top: 48px;
  }

  .daily-date {
    margin-bottom: 44px;
  }

  .daily-card {
    width: min(214px, 64vw);
  }

  .daily-widget-strip,
  .daily-mini-dashboard {
    grid-template-columns: 1fr;
  }

  .daily-time-map,
  .daily-journal-prompt {
    padding: 22px;
  }

  .daily-time-map p {
    display: grid;
    gap: 6px;
  }

  .daily-footer span {
    letter-spacing: 0.22em;
    line-height: 1.7;
  }

  .astrology-shell {
    gap: 30px;
    padding-top: 52px;
  }

  .astrology-copy h1 {
    font-size: 3.4rem;
  }

  .astrology-form {
    padding: 22px 18px;
  }

  .astrology-grid {
    grid-template-columns: 1fr;
  }

  .astrology-location {
    grid-template-columns: 1fr;
  }

  .astrology-chart {
    width: min(330px, 88vw);
  }

  .astro-chart-board {
    padding: 8px;
  }

  .astro-data-panel {
    padding: 14px;
  }

  .astro-planet-table div {
    grid-template-columns: 28px 1fr;
  }

  .astro-planet-table em {
    grid-column: 2;
  }

  .astrology-chart span {
    width: 96px;
    transform:
      translate(-50%, -50%)
      rotate(var(--angle))
      translateY(-146px)
      rotate(calc(-1 * var(--angle)));
  }

  .tarot-submit {
    width: 100%;
  }

  .tarot-progress {
    margin-top: -46px;
  }

  .reading-answer-grid {
    grid-template-columns: 1fr;
  }

  .reading-plan-timeline {
    grid-template-columns: 1fr;
  }

  .reading-answer-grid article {
    padding: 20px 18px;
  }

  .deck-grid {
    grid-template-columns: 1fr;
    margin: 42px 0 38px;
  }

  .spread-grid {
    grid-template-columns: 1fr;
    margin: 42px 0 38px;
  }

  .reveal-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .reveal-divider {
    margin-bottom: 48px;
  }

  .reading-signals {
    grid-template-columns: 1fr;
  }

  .tool-page {
    width: min(100% - 28px, 1120px);
    margin-top: 48px;
  }

  .image-reader-grid {
    grid-template-columns: 1fr;
  }

  .reading-story-card {
    padding: 26px 22px 30px;
  }

  .reading-quote {
    margin: 4px 0;
    padding: 30px 34px;
  }

  .reading-support {
    display: grid;
    padding: 20px;
  }

  .deck-card {
    min-height: 210px;
  }

  .spread-card {
    min-height: 174px;
    padding-right: 76px;
  }

  .tarot-step-panel--draw h1 {
    margin-bottom: 14px;
    font-size: 2.4rem;
  }

  .draw-count {
    margin-bottom: 24px;
  }

  .draw-status {
    margin-bottom: 18px;
  }

  .card-fan {
    width: calc(100vw - 36px);
    height: 250px;
    min-height: 250px;
    overflow: visible;
  }

  .fan-card {
    width: 68px;
    height: 104px;
    left: calc(50% - 34px);
    border-radius: 12px;
  }

  .fan-card:hover,
  .fan-card:focus-visible,
  .fan-card.is-hovered {
    transform:
      translateX(var(--spread-x))
      translateY(calc(var(--spread-y) - var(--hover-lift, 26px)))
      rotate(calc(var(--fan-rotate) + var(--hover-tilt, 0deg)))
      scale(1.03);
  }

  .tarot-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .tarot-back {
    width: 100%;
  }

  .section-heading {
    display: block;
  }
}

/* Shared public content, footer and feedback */
.site-footer {
  position: relative;
  z-index: 3;
  margin-top: 64px;
  border-top: 1px solid rgba(205, 154, 118, 0.2);
  background: rgba(5, 5, 10, 0.94);
}

.site-footer__inner,
.site-footer__bottom {
  width: min(100% - 40px, 1240px);
  margin-inline: auto;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(150px, 0.7fr));
  gap: 36px;
  padding: 46px 0 34px;
}

.site-footer__inner section,
.site-footer__inner nav {
  display: grid;
  align-content: start;
  gap: 10px;
}

.site-footer__inner strong {
  color: #ead5c0;
  font-size: 0.82rem;
}

.site-footer__inner p,
.site-footer__inner a,
.site-footer__bottom {
  color: rgba(245, 239, 224, 0.55);
  font-size: 0.82rem;
  line-height: 1.65;
}

.site-footer__inner a:hover {
  color: #d6a987;
}

.site-footer__brand .brand {
  margin-bottom: 6px;
}

/* Aura Room primary logo (2026-07-20). */
.brand__mark {
  flex: 0 0 auto;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent url("/assets/aura-room-logo.png?v=20260720") center / contain no-repeat !important;
  box-shadow: 0 0 18px rgba(220, 173, 105, 0.12);
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 24px;
  border-top: 1px solid rgba(205, 154, 118, 0.12);
}

.reading-feedback {
  width: min(100% - 32px, 920px);
  margin: 34px auto 0;
  padding: 24px;
  border: 1px solid rgba(205, 154, 118, 0.24);
  border-radius: 8px;
  background: rgba(15, 10, 20, 0.88);
  text-align: center;
}

.reading-feedback__head > span {
  color: #b9896d;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.reading-feedback h2 {
  margin: 8px 0;
  color: #f0ddca;
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: 0;
}

.reading-feedback p {
  margin: 0;
  color: rgba(245, 239, 224, 0.56);
  line-height: 1.55;
}

.reading-feedback__choices {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.reading-feedback button {
  border: 1px solid rgba(205, 154, 118, 0.3);
  border-radius: 6px;
  padding: 10px 15px;
  color: #ead5c0;
  background: rgba(205, 154, 118, 0.07);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.reading-feedback button.is-selected,
.reading-feedback form > button {
  border-color: rgba(216, 174, 145, 0.56);
  background: #9d6a52;
  color: #fff8f0;
}

.reading-feedback form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  text-align: left;
}

.reading-feedback form[hidden] {
  display: none;
}

.reading-feedback label {
  display: grid;
  gap: 7px;
  color: #c99a7d;
  font-size: 0.75rem;
  font-weight: 700;
}

.reading-feedback textarea {
  min-height: 96px;
  border: 1px solid rgba(205, 154, 118, 0.2);
  border-radius: 6px;
  padding: 12px;
  color: #f1e3d5;
  background: rgba(4, 4, 10, 0.58);
  font: inherit;
  resize: vertical;
}

.reading-feedback__status {
  margin-top: 16px !important;
  color: #aee6bf !important;
}

.daily-preview-grid {
  display: grid;
  width: min(100% - 32px, 920px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 26px auto 0;
}

.daily-preview-grid article {
  min-height: 132px;
  padding: 18px;
  border-top: 1px solid rgba(205, 154, 118, 0.24);
  background: rgba(14, 9, 19, 0.48);
  text-align: left;
}

.daily-preview-grid span {
  color: #b98b70;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.daily-preview-grid strong {
  display: block;
  margin: 8px 0 6px;
  color: #ead5c2;
}

.daily-preview-grid p {
  margin: 0;
  color: rgba(245, 239, 224, 0.54);
  font-size: 0.8rem;
  line-height: 1.55;
}

.content-page {
  min-height: 100vh;
  background-color: #06070d;
  background-image: linear-gradient(rgba(4, 5, 10, 0.52), rgba(4, 5, 10, 0.9)), url("assets/starry-sky-bg.webp");
  background-size: cover;
  background-attachment: fixed;
}

.content-page .page-shell {
  min-height: 100vh;
}

.content-hero {
  width: min(100% - 32px, 980px);
  margin: 64px auto 46px;
  text-align: center;
}

.content-hero h1,
.seo-article h1 {
  margin: 10px 0 18px;
  color: #f0dcc7;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  font-weight: 550;
  letter-spacing: 0;
  line-height: 1.04;
}

.content-hero > p:last-child,
.seo-article__lead {
  max-width: 760px;
  margin-inline: auto;
  color: rgba(245, 239, 224, 0.64);
  font-size: 1.02rem;
  line-height: 1.8;
}

.blog-grid {
  display: grid;
  width: min(100% - 32px, 1160px);
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.blog-card {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
  border: 1px solid rgba(205, 154, 118, 0.2);
  border-radius: 8px;
  background: rgba(13, 9, 18, 0.9);
}

.blog-card--featured {
  grid-column: 1 / -1;
  grid-template-columns: 220px minmax(0, 1fr);
}

.blog-card__visual {
  display: grid;
  min-height: 170px;
  place-items: center;
  border: 1px solid rgba(205, 154, 118, 0.26);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(181, 124, 88, 0.32), rgba(28, 17, 31, 0.88)), url("assets/numerology-hero.webp") center/cover;
}

.blog-card__visual--rose { background-image: linear-gradient(145deg, rgba(177, 73, 96, 0.36), rgba(27, 13, 29, 0.9)), url("assets/card-back-mystic.png"); }
.blog-card__visual--violet { background-image: linear-gradient(145deg, rgba(105, 72, 148, 0.4), rgba(12, 15, 29, 0.92)), url("assets/starry-sky-bg.webp"); }
.blog-card__visual span { color: #f3d5b8; font-family: var(--serif); font-size: 2.8rem; }
.blog-card p { margin: 0 0 10px; color: rgba(245, 239, 224, 0.56); line-height: 1.65; }
.blog-card div > p:first-child { color: #bd8c70; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.blog-card h2 { margin: 0 0 10px; color: #efdece; font-size: 1.35rem; letter-spacing: 0; line-height: 1.3; }
.blog-card a, .article-action { color: #d9a888; font-weight: 700; }

.blog-cta {
  display: flex;
  width: min(100% - 32px, 1160px);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 40px auto 0;
  padding: 28px;
  border-top: 1px solid rgba(205, 154, 118, 0.24);
  border-bottom: 1px solid rgba(205, 154, 118, 0.24);
}

.blog-cta h2 { margin: 6px 0; color: #f0ddca; font-family: var(--serif); font-size: 2rem; letter-spacing: 0; }
.blog-cta p { margin: 0; color: rgba(245, 239, 224, 0.58); }
.blog-cta > a { flex: 0 0 auto; border: 1px solid rgba(205, 154, 118, 0.36); border-radius: 6px; padding: 12px 16px; color: #efd7c1; }

.seo-article {
  width: min(100% - 32px, 840px);
  margin: 64px auto 0;
  color: rgba(245, 239, 224, 0.72);
}

.seo-article > header { margin-bottom: 32px; text-align: center; }
.seo-article > header > a { color: #c79678; font-size: 0.82rem; }
.seo-article section { padding: 28px 0; border-top: 1px solid rgba(205, 154, 118, 0.16); }
.seo-article h2 { margin: 0 0 14px; color: #f0ddca; font-family: var(--serif); font-size: 2rem; letter-spacing: 0; }
.seo-article h3 { margin: 24px 0 10px; color: #dfc3ab; font-size: 1.1rem; }
.seo-article p, .seo-article li { font-size: 1rem; line-height: 1.9; }
.seo-article ul { display: grid; gap: 8px; padding-left: 22px; }
.article-toc { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 24px; padding: 18px; border: 1px solid rgba(205, 154, 118, 0.18); border-radius: 6px; background: rgba(15, 10, 20, 0.8); }
.article-toc strong { width: 100%; color: #ead7c3; }
.article-toc a { color: #bd8f74; font-size: 0.84rem; }
.article-note { margin: 22px 0; padding: 18px; border-left: 3px solid #b97f5f; background: rgba(185, 127, 95, 0.08); }
.article-note strong { color: #e6c6ad; }
.article-note p { margin-bottom: 0; }
.article-action { display: inline-block; margin-top: 16px; border: 1px solid rgba(205, 154, 118, 0.34); border-radius: 6px; padding: 11px 15px; }

@media (max-width: 860px) {
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card--featured { grid-column: auto; }
}

@media (max-width: 620px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 24px; }
  .site-footer__bottom, .blog-cta { display: grid; }
  .blog-card, .blog-card--featured { grid-template-columns: 1fr; }
  .blog-card__visual { min-height: 140px; }
  .reading-feedback__choices { display: grid; }
  .daily-preview-grid { grid-template-columns: 1fr; }
}

/* Blog editorial refresh */
.content-page .content-hero--blog {
  display: grid;
  width: min(100% - 40px, 1160px);
  min-height: 430px;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 54px;
  align-items: center;
  margin: 34px auto 52px;
  text-align: left;
}

.content-page .content-hero--blog h1 {
  max-width: 720px;
  margin: 10px 0 16px;
  font-size: clamp(3.4rem, 7vw, 6.7rem);
  line-height: 0.96;
}

.content-page .content-hero--blog .content-hero__copy > p:last-of-type {
  max-width: 660px;
  margin: 0;
  color: rgba(245, 239, 224, 0.64);
  font-size: 1rem;
  line-height: 1.75;
}

.blog-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.blog-topics a {
  border: 1px solid rgba(205, 154, 118, 0.28);
  border-radius: 999px;
  padding: 8px 12px;
  color: #d6b097;
  background: rgba(205, 154, 118, 0.05);
  font-size: 0.76rem;
  font-weight: 700;
}

.content-hero__visual {
  display: grid;
  min-height: 310px;
  align-content: end;
  gap: 12px;
  padding: 30px;
  border: 1px solid rgba(205, 154, 118, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 7, 15, 0.08), rgba(12, 8, 18, 0.92)),
    url("assets/numerology-hero.webp") center/cover;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.32);
}

.content-hero__visual > span,
.content-hero__visual > small {
  color: #c99a7b;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.content-hero__visual > strong {
  max-width: 360px;
  color: #f1dfcf;
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 550;
  line-height: 1.25;
}

.blog-section-heading {
  display: flex;
  width: min(100% - 40px, 1160px);
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 auto 20px;
  padding-top: 28px;
  border-top: 1px solid rgba(205, 154, 118, 0.18);
}

.blog-section-heading h2 {
  margin: 7px 0 0;
  color: #efdecd;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 550;
  letter-spacing: 0;
}

.blog-section-heading > span {
  flex: 0 0 auto;
  color: rgba(245, 239, 224, 0.42);
  font-size: 0.76rem;
}

.blog-card {
  align-items: stretch;
  min-height: 320px;
  padding: 0;
  overflow: hidden;
}

.blog-card--featured {
  min-height: 390px;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
}

.blog-card__visual {
  min-height: 100%;
  align-content: space-between;
  justify-items: start;
  padding: 24px;
  border: 0;
  border-right: 1px solid rgba(205, 154, 118, 0.16);
  border-radius: 0;
}

.blog-card__visual span {
  align-self: start;
}

.blog-card__visual small {
  align-self: end;
  color: rgba(245, 239, 224, 0.62);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.blog-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 28px;
}

.blog-card__body h2 {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  font-weight: 550;
}

.blog-card:not(.blog-card--featured) .blog-card__body h2 {
  font-size: 1.55rem;
}

.blog-card__body > a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: auto;
  padding-top: 18px;
}

.blog-card__body > a span {
  transition: transform 0.18s ease;
}

.blog-card__body > a:hover span {
  transform: translateX(4px);
}

.seo-article {
  width: min(100% - 40px, 900px);
}

.seo-article > header {
  max-width: 820px;
  margin: 54px auto 42px;
}

.seo-article h1 {
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  line-height: 1.04;
}

.seo-article section {
  max-width: 760px;
  margin-inline: auto;
}

.seo-article p,
.seo-article li {
  color: rgba(245, 239, 224, 0.72);
}

@media (max-width: 900px) {
  .content-page .content-hero--blog {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 48px;
  }

  .content-hero__visual {
    min-height: 240px;
  }

  .blog-card--featured {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .content-page .site-header {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .content-page .site-header .main-nav {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .content-page .site-header .main-nav a {
    min-width: 0;
    padding-inline: 7px;
    text-align: center;
  }

  .content-page .site-header .auth-nav {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-page .site-header .auth-nav > span,
  .content-page .site-header .auth-nav__user {
    grid-column: 1 / -1;
    text-align: center;
  }

  .content-page .content-hero--blog h1 {
    font-size: clamp(3rem, 16vw, 4.3rem);
  }

  .blog-section-heading {
    display: grid;
    align-items: start;
  }

  .blog-card,
  .blog-card--featured {
    grid-template-columns: 1fr;
  }

  .blog-card__visual {
    min-height: 190px;
    border-right: 0;
    border-bottom: 1px solid rgba(205, 154, 118, 0.16);
  }

  .blog-card__body {
    min-height: 260px;
    padding: 22px;
  }
}

/* Final blog publishing overrides */
.admin-user-table__row {
  grid-template-columns: minmax(210px, 1.4fr) 110px 78px minmax(140px, 0.8fr) 224px;
}

.admin-role-badge {
  justify-self: start;
  border: 1px solid rgba(205, 154, 118, 0.28);
  border-radius: 999px;
  padding: 5px 9px;
  color: #d2a688;
  background: rgba(205, 154, 118, 0.07);
  font-size: 0.7rem !important;
  font-weight: 800;
  white-space: nowrap;
}

.admin-role-badge[data-role="admin"] {
  border-color: rgba(101, 211, 198, 0.32);
  color: #83ddd1;
  background: rgba(101, 211, 198, 0.08);
}

.admin-row-actions .is-promote {
  border-color: rgba(101, 211, 198, 0.34);
  color: #8be1d5;
  background: rgba(101, 211, 198, 0.08);
}

.auth-nav__admin {
  border: 1px solid rgba(101, 211, 198, 0.32);
  border-radius: 999px;
  padding: 9px 13px;
  color: #83ddd1;
  background: rgba(101, 211, 198, 0.08);
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-blog-table__row {
  grid-template-columns: minmax(280px, 1.6fr) 120px 150px 210px;
}

.admin-blog-table__row > strong {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-blog-table__row > strong b,
.admin-blog-table__row > strong small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-blog-dialog {
  width: min(100% - 32px, 980px);
}

.admin-blog-dialog form {
  max-height: min(88vh, 900px);
  overflow-y: auto;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.admin-form-span-2 {
  grid-column: 1 / -1;
}

.admin-blog-editor {
  min-height: 320px;
  resize: vertical;
  line-height: 1.65;
}

.admin-slug-field {
  display: flex;
  align-items: center;
  border: 1px solid rgba(205, 154, 118, 0.24);
  border-radius: 6px;
  background: rgba(4, 4, 10, 0.72);
}

.admin-slug-field > span {
  flex: 0 0 auto;
  padding-left: 13px;
  color: rgba(245, 239, 224, 0.42);
}

.admin-slug-field input {
  border: 0 !important;
  background: transparent !important;
}

.dynamic-blog-article__body {
  width: min(100%, 760px);
  margin-inline: auto;
}

.dynamic-blog-article__body h2 {
  margin: 46px 0 14px;
  padding-top: 28px;
  border-top: 1px solid rgba(205, 154, 118, 0.16);
}

.dynamic-blog-article__body p,
.dynamic-blog-article__body li {
  color: rgba(245, 239, 224, 0.74);
  font-size: 1.04rem;
  line-height: 1.95;
}

@media (max-width: 900px) {
  .admin-user-table__row {
    min-width: 820px;
  }

  .admin-blog-table__row {
    grid-template-columns: minmax(220px, 1fr) 110px 180px;
  }

  .admin-blog-table__row > span:nth-child(3),
  .admin-blog-table .admin-table__head > span:nth-child(3) {
    display: none;
  }
}

@media (max-width: 640px) {
  .admin-form-grid,
  .admin-blog-table__row {
    grid-template-columns: 1fr;
  }

  .admin-form-span-2 {
    grid-column: 1;
  }

  .admin-blog-table .admin-table__head {
    display: none;
  }
}

/* Final public-surface overrides: keep these after legacy page rules. */
body {
  background-color: #03050b;
  background-image:
    linear-gradient(180deg, rgba(2, 4, 10, 0.2) 0%, rgba(3, 5, 12, 0.42) 46%, rgba(2, 3, 8, 0.72) 100%),
    url("assets/milky-way-bg-v2.webp") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

.grain {
  background:
    radial-gradient(ellipse at 14% 28%, rgba(26, 96, 146, 0.08), transparent 32rem),
    radial-gradient(ellipse at 78% 72%, rgba(136, 88, 119, 0.07), transparent 30rem),
    linear-gradient(180deg, rgba(1, 3, 8, 0.08), rgba(1, 3, 8, 0.42));
  filter: none;
}

.starfield {
  overflow: hidden;
  background: none;
  mask-image: none;
  opacity: 1;
}

.content-page {
  background-color: #03050b;
  background-image:
    linear-gradient(180deg, rgba(2, 4, 10, 0.2) 0%, rgba(3, 5, 12, 0.42) 46%, rgba(2, 3, 8, 0.72) 100%),
    url("assets/milky-way-bg-v2.webp") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

.content-page .seo-article {
  width: min(100% - 40px, 960px);
  margin-top: 52px;
  padding-bottom: 72px;
}

.content-page .seo-article > header {
  width: min(100%, 860px);
  margin: 54px auto 58px;
}

.content-page .seo-article h1 {
  max-width: 820px;
  margin-inline: auto;
  font-size: clamp(2.65rem, 6.4vw, 5.25rem);
  overflow-wrap: anywhere;
}

.content-page .seo-article__lead {
  max-width: 720px;
}

.about-article section,
.disclaimer-article section {
  display: grid;
  max-width: 900px;
  grid-template-columns: minmax(190px, 0.42fr) minmax(0, 1fr);
  column-gap: 54px;
  row-gap: 10px;
  align-items: start;
  padding: 34px 0;
}

.about-article section h2,
.disclaimer-article section h2 {
  grid-column: 1;
  margin-top: 8px;
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  line-height: 1.18;
}

.about-article section p,
.disclaimer-article section p {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.9;
}

@media (max-width: 700px) {
  body {
    background-attachment: scroll !important;
    background-position: 58% top !important;
  }

  .content-page .seo-article {
    width: min(100% - 28px, 960px);
    margin-top: 32px;
  }

  .content-page .seo-article > header {
    margin: 36px auto 42px;
  }

  .content-page .seo-article h1 {
    font-size: clamp(2.45rem, 13vw, 4rem);
  }

  .about-article section,
  .disclaimer-article section {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 28px 0;
  }

  .about-article section h2,
  .about-article section p,
  .disclaimer-article section h2,
  .disclaimer-article section p {
    grid-column: 1;
    grid-row: auto;
  }
}