* { box-sizing:border-box; }
body { margin:0; background:#15101e; color:#fbf1e7; font:15px/1.55 system-ui,sans-serif; }
main { min-height:100svh; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); }
.art { min-height:720px; position:relative; display:grid; place-items:center; overflow:hidden; border-right:1px solid #d0a66f30; }
.brand { position:absolute; }
.caption { text-align:center; }
.panel {
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  padding:clamp(28px,5vw,78px);
  background:radial-gradient(ellipse at 85% 22%,#4e294745,transparent 66%),
    #191223 url('orbita-room.webp') center top / 100% 178% no-repeat;
}
.inner {
  width:min(100%,480px);
  padding:clamp(25px,3.35vw,48px);
  border:1px solid #bda18339;
  border-radius:26px;
  background:linear-gradient(146deg,#352440ab,#1d1528c2 74%);
  backdrop-filter:blur(1.5px);
  box-shadow:0 24px 70px #0c071d70, inset 0 1px 0 #fbdeb510;
}
h1 { margin:14px 0 6px; font-size:clamp(27px,3vw,43px); line-height:1.2; letter-spacing:-.02em; }
.intro { color:#d0bfd9; margin:0 0 28px; }
.field { margin-bottom:16px; }
label { display:block; font-size:13px; font-weight:650; margin-bottom:6px; }
input { width:100%; min-height:48px; padding:11px 13px; background:#160f22a8; border:1px solid #675673; color:#fbf1e7; border-radius:11px; font:inherit; }
input::placeholder { color:#b9a7c3; }
input:focus-visible,button:focus-visible { outline:2px solid #e8c77b; outline-offset:3px; }
.password { position:relative; }
.password input { padding-right:98px; }
.toggle { position:absolute; right:8px; top:6px; padding:6px; background:none; border:0; color:#edc98a; font:inherit; font-size:13px; cursor:pointer; }
.submit {
  display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:50px;
  background:linear-gradient(115deg,#f9d895,#dfb16a); color:#211629;
  border:0; border-radius:11px; padding:10px; font:inherit; font-weight:800;
  cursor:pointer; margin-top:7px; box-shadow:0 6px 20px #cda06224;
}
.submit:hover { background:linear-gradient(115deg,#ffe4ae,#efbd74); }
.submit:disabled { cursor:wait; opacity:.66; }
.submit.is-loading::after {
  content:''; width:15px; height:15px; border:2px solid #21162955;
  border-top-color:#211629; border-radius:50%; animation:auth-spin .75s linear infinite;
}
.submit span { font-size:19px; line-height:1; }
.note { margin:15px 0 0; color:#c9b9d2; font-size:12px; }
.auth-message { min-height:19px; margin:0 0 10px; color:#e9d08f; text-align:center; }
.auth-message.auth-error { color:#ffb8b8; }
.turnstile-wrap { min-height:65px; margin:4px 0 12px; display:grid; place-items:center; }
.turnstile-wrap:empty { min-height:0; }
@keyframes auth-spin { to { transform:rotate(360deg); } }
.modal-open { overflow:hidden; }
.auth-modal {
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
  padding:20px; background:#0e0819cc; backdrop-filter:blur(10px);
}
.auth-modal[hidden] { display:none; }
.auth-modal-card {
  width:min(100%,440px); padding:clamp(30px,6vw,48px); text-align:center;
  border:1px solid #e7c67b80; border-radius:24px;
  background:radial-gradient(circle at 50% 0,#5c3658 0,transparent 55%),linear-gradient(145deg,#352340,#1b1327);
  box-shadow:0 30px 90px #08040dcf, inset 0 1px 0 #fff2c51c;
  animation:modal-arrive .32s ease-out both;
}
.auth-modal-icon {
  display:grid; place-items:center; width:58px; height:58px; margin:0 auto 16px;
  color:#f6d58f; font-size:30px; border:1px solid #e7c67b75; border-radius:50%;
  background:#e7c67b12; box-shadow:0 0 34px #e7c67b26;
}
.auth-modal-card h2 { margin:0 0 12px; color:#f8dfa9; font-size:clamp(26px,5vw,36px); }
.auth-modal-card p { margin:0 0 26px; color:#d8c8df; }
.auth-modal-card .submit { margin-top:0; }
@keyframes modal-arrive {
  from { opacity:0; transform:translateY(16px) scale(.97); }
}
@media(max-width:720px) {
  main { grid-template-columns:minmax(0,1fr); }
  .art { min-height:480px; border-right:0; border-bottom:1px solid #d0a66f30; }
  .panel { padding:26px 16px 40px; }
}

.birth-fields {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 12px;
}
.birth-fields > :first-child { grid-column:1 / -1; }
.birth-fields input { min-width:0; }
input[type="date"], input[type="time"] { color-scheme:dark; }
.field-note { display:block; margin-top:4px; color:#c9b9d2; font-size:11px; }
@media(max-width:420px) {
  .birth-fields { grid-template-columns:minmax(0,1fr); gap:0; }
}

.signup-heading { text-align:center; }
.signup-coffee {
  display:block;
  width:76px;
  height:auto;
  margin:-18px auto -4px;
  filter:drop-shadow(0 2px 6px #e7b86628);
}
.coffee-steam path { animation:coffee-steam 2.6s ease-out infinite; }
.coffee-steam path:nth-child(2) { animation-delay:-.85s; }
.coffee-steam path:nth-child(3) { animation-delay:-1.7s; }
@keyframes coffee-steam {
  from { opacity:0; transform:translateY(9px); }
  34% { opacity:.86; }
  to { opacity:0; transform:translate(3px,-8px); }
}
@media(prefers-reduced-motion:reduce) {
  .coffee-steam path { animation:none; opacity:.55; }
}

.menu-open { grid-template-columns:minmax(0,1fr); }
.menu-open .art { display:none; }
.menu-open .panel { min-height:100svh; }
.orbit-menu {
  width:min(100%,880px);
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  backdrop-filter:none;
  box-shadow:none;
  text-align:center;
}
.menu-logo { --orbit-edge:25%; position:relative; display:block; width:clamp(165px,24vw,285px); height:auto; margin:0 auto clamp(26px,6vh,54px); }
.menu-items {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,2vw,22px);
  align-items:start;
}
.menu-item {
  border:1px solid #edca817e;
  border-radius:18px;
  background:linear-gradient(145deg,#f6ca762c,#ac783012);
  box-shadow:inset 0 1px 0 #ffe4a630,0 12px 36px #1009164a;
  overflow:hidden;
  text-align:center;
}
.menu-item summary {
  display:grid;
  justify-items:center;
  align-content:center;
  gap:10px;
  min-height:clamp(135px,18vh,180px);
  padding:16px;
  cursor:pointer;
  color:#fff0d3;
  font-size:clamp(14px,2vw,21px);
  font-weight:650;
  list-style:none;
}
.menu-item summary::-webkit-details-marker { display:none; }
.menu-item summary:focus-visible { outline:2px solid #e8c77b; outline-offset:-3px; }
.menu-item:hover,.menu-item[open] {
  border-color:#ffd996;
  background:linear-gradient(145deg,#f6ca7643,#ac783020);
}
.menu-icon {
  display:grid; place-items:center; width:45px; height:45px;
  border:1px solid #e9bd7066; border-radius:50%; color:#f7dca5; background:#e3ab4720;
  font:26px/1 Georgia,serif;
}
.menu-arrow { color:#eac688; font-size:15px; transition:transform .2s; }
.menu-item[open] .menu-arrow { transform:rotate(180deg); }
.menu-item p { margin:0; padding:0 16px 18px; color:#ead9ec; font-size:14px; }
.orbit-menu .note { margin-top:24px; }
.menu-back { margin-top:12px; border:0; background:none; color:#edc98a; padding:4px 0; font:inherit; font-size:13px; cursor:pointer; text-decoration:underline; }
@media(max-width:430px) {
  .menu-item summary { min-height:142px; padding:10px 6px; }
  .menu-item p { padding:0 8px 12px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .menu-arrow { transition:none; } }


.menu-logo img { display:block; width:100%; height:auto; }
.menu-sky { display:none; }
.menu-open .menu-sky {
  display:block;
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:-1;
}
.menu-open .panel-stars { opacity:1; }
.menu-open .panel-stars .room-star { box-shadow:0 0 10px 2px #ffc875b8; }
.menu-open .panel-stars .room-star-flare { filter:drop-shadow(0 0 4px #ffdc9a); }
.shooting-star {
  position:absolute;
  left:10%;
  top:12%;
  width:clamp(65px,12vw,190px);
  height:2px;
  border-radius:100%;
  background:linear-gradient(90deg,transparent,#e4ae6370 65%,#fff5cc);
  filter:drop-shadow(0 0 4px #ffc77c);
  opacity:0;
  animation:meteor-flight 10s linear infinite;
}
.shooting-star::after {
  content:"";
  position:absolute;
  right:0;
  top:-1px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#fff4ce;
  box-shadow:0 0 9px 2px #ffd181;
}
.shooting-star:nth-child(2) { left:28%; top:31%; animation-delay:-5s; }
@keyframes meteor-flight {
  0% { transform:translate(0,0) rotate(22deg) scaleX(.35); opacity:0; }
  4% { opacity:1; }
  13%,100% { transform:translate(63vw,25vw) rotate(22deg) scaleX(1); opacity:0; }
}
.menu-icon svg { width:29px; height:29px; }
.menu-icon .icon-motion { transform-box:fill-box; transform-origin:center; }
.menu-icon-sun .icon-motion { animation:icon-turn 12s linear infinite; }
.menu-icon-year .icon-motion { animation:icon-pulse 2.6s ease-in-out infinite; }
.menu-icon-tarot .icon-motion { animation:icon-card 3.8s ease-in-out infinite; }
.menu-icon-chart .icon-motion { animation:icon-turn 16s linear infinite; }
@keyframes icon-turn { to { transform:rotate(360deg); } }
@keyframes icon-pulse { 50% { transform:scale(1.24); opacity:.55; } }
@keyframes icon-card { 50% { transform:translate(2px,-2px) rotate(9deg); } }
@media(prefers-reduced-motion:reduce) {
  .shooting-star,.menu-icon .icon-motion { animation:none; }
}

.entry-logo { display:block; width:138px; height:auto; margin:0 auto 16px; }
.entry-view {
  width:min(100%,340px);
  padding:0;
  border:0;
  background:none;
  backdrop-filter:none;
  box-shadow:none;
}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.orbit-menu .menu-logo { margin-bottom:16px; }
.greeting-zodiac {
  display:inline-block;
  width:.82em;
  height:.82em;
  margin-left:.08em;
  vertical-align:-.08em;
  color:#f3c967;
  filter:drop-shadow(0 0 4px #efbd5aa8);
  animation:zodiac-twinkle 2.2s ease-in-out infinite;
}
.greeting-zodiac svg {
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.menu-greeting {
  color:#f5deb2;
  margin:0 0 clamp(22px,4vh,38px);
  font-weight:600;
  overflow-wrap:anywhere;
}
@keyframes zodiac-twinkle { 50% { transform:scale(1.08); filter:drop-shadow(0 0 9px #ffe59be0); } }
@media(prefers-reduced-motion:reduce) {
  .greeting-zodiac { animation:none; }
}
.entry-actions { display:grid; gap:12px; }
.entry-actions .submit { margin-top:0; }
.entry-secondary {
  min-height:50px; width:100%; padding:10px;
  border:1px solid #e8c77b91; border-radius:11px;
  background:#e8c77b15; color:#f8db9e;
  font:inherit; font-weight:750; cursor:pointer;
}
.entry-secondary:hover { background:#e8c77b29; }