.zodiac-oracle-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:24px;
  align-items:start;
}

.zodiac-oracle-stage{
  position:relative;
  overflow:hidden;
  min-height:100%;
  background:
    radial-gradient(420px 220px at 22% 18%, rgba(255,255,255,.92), transparent 68%),
    radial-gradient(360px 260px at 82% 16%, rgba(47,107,255,.12), transparent 70%),
    linear-gradient(155deg, rgba(255,255,255,.96), rgba(234,242,255,.94));
}

.zodiac-oracle-glow{
  position:absolute;
  inset:auto -8% -18% auto;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,194,75,.34), rgba(47,107,255,.10) 45%, transparent 72%);
  filter:blur(14px);
  pointer-events:none;
}

.zodiac-oracle-header{position:relative;z-index:1}
.zodiac-oracle-sub{
  margin:8px 0 0;
  font-size:15px;
  color:var(--muted);
  max-width:34em;
}

.zodiac-oracle-visual{
  position:relative;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:8px;
  align-items:center;
  margin-top:18px;
}

.crystal-cluster{
  position:relative;
  min-height:300px;
  display:grid;
  place-items:center;
}

.crystal-ball{
  position:relative;
  width:210px;
  height:210px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:84px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,255,255,.30) 22%, rgba(255,194,75,.50) 34%, rgba(47,107,255,.80) 68%, rgba(24,43,103,.96) 100%);
  box-shadow:
    0 0 0 10px rgba(255,255,255,.30),
    0 26px 50px -18px rgba(47,107,255,.35),
    0 0 54px rgba(255,194,75,.36);
  animation:zodiacBallGlow 4.8s ease-in-out infinite;
}

.crystal-ball::before{
  content:"";
  position:absolute;
  inset:auto 16px 20px;
  height:20px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.58), transparent 72%);
  filter:blur(6px);
}

.crystal-ball::after{
  content:"";
  position:absolute;
  bottom:-38px;
  width:116px;
  height:50px;
  border-radius:50% 50% 20px 20px;
  background:linear-gradient(180deg, #ffe9ad, #f0a526);
  box-shadow:0 18px 30px -18px rgba(90,59,0,.55);
}

@keyframes zodiacBallGlow{
  0%,100%{transform:translateY(0) scale(1);box-shadow:0 0 0 10px rgba(255,255,255,.30),0 26px 50px -18px rgba(47,107,255,.35),0 0 54px rgba(255,194,75,.36)}
  50%{transform:translateY(-8px) scale(1.02);box-shadow:0 0 0 12px rgba(255,255,255,.34),0 34px 64px -20px rgba(47,107,255,.42),0 0 70px rgba(255,194,75,.50)}
}

.crystal-spark{
  position:absolute;
  display:block;
  width:16px;
  height:16px;
  background:linear-gradient(180deg, #fff, #ffd97a);
  clip-path:polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
  filter:drop-shadow(0 0 10px rgba(255,194,75,.7));
  animation:zodiacSparkle 3.6s ease-in-out infinite;
}

.spark-a{top:24px;left:24px}
.spark-b{right:30px;top:62px;animation-delay:1.1s}
.spark-c{bottom:48px;left:44px;width:12px;height:12px;animation-delay:1.9s}

@keyframes zodiacSparkle{
  0%,100%{transform:scale(.75);opacity:.45}
  50%{transform:scale(1.15);opacity:1}
}

.zodiac-oracle-mascot{
  width:min(340px, 100%);
  margin-left:auto;
  filter:drop-shadow(0 22px 40px rgba(47,107,255,.18));
  animation:zodiacMascotFloat 6s ease-in-out infinite;
}

@keyframes zodiacMascotFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

.oracle-greeting-card{
  position:relative;
  z-index:1;
  margin-top:12px;
  padding:22px 24px;
  border-radius:24px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(47,107,255,.12);
  box-shadow:0 24px 44px -28px rgba(47,107,255,.32);
}

.oracle-greeting-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.oracle-sign-pill,
.oracle-date-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-family:var(--font-head);
  font-size:12px;
  color:var(--blue);
  background:rgba(47,107,255,.08);
}

.oracle-type{
  margin:0;
  min-height:56px;
  font-size:18px;
  line-height:1.65;
  color:var(--ink);
}

.oracle-type.is-typing::after,
.oracle-result-message.is-typing::after,
.mini-reading-copy.is-typing::after{
  content:"";
  display:inline-block;
  width:9px;
  height:1.1em;
  margin-left:4px;
  vertical-align:-2px;
  background:var(--gold);
  animation:zodiacCursor .7s step-end infinite;
}

@keyframes zodiacCursor{
  50%{opacity:0}
}

.zodiac-oracle-stack{
  display:grid;
  gap:24px;
}

.zodiac-panel-copy{
  margin:0 0 14px;
  font-size:14px;
  color:var(--muted);
}

.category-pills,
.question-suggestions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.category-pill,
.question-suggestions button{
  border:none;
  cursor:pointer;
  transition:.18s;
  font-family:var(--font-head);
}

.category-pill{
  padding:10px 14px;
  border-radius:999px;
  background:color-mix(in oklab, var(--blue), transparent 92%);
  color:var(--blue);
  border:1px solid rgba(47,107,255,.12);
  font-size:14px;
}

.category-pill:hover,
.question-suggestions button:hover{
  transform:translateY(-2px);
}

.category-pill.active{
  color:#fff;
  background:linear-gradient(135deg, var(--blue-bright), var(--blue-deep));
  box-shadow:0 16px 24px -16px rgba(47,107,255,.58);
}

.oracle-question-input{
  width:100%;
  margin-top:14px;
  padding:16px 18px;
  border-radius:18px;
  border:1.5px solid var(--line);
  background:linear-gradient(180deg, #fff, #f9fbff);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  resize:vertical;
  min-height:108px;
}

.oracle-question-input:focus{
  outline:none;
  border-color:rgba(47,107,255,.42);
  box-shadow:0 0 0 4px rgba(47,107,255,.10);
}

.question-suggestions{
  margin-top:12px;
}

.question-suggestions button{
  padding:9px 12px;
  border-radius:14px;
  background:#fff;
  color:var(--muted);
  border:1px solid var(--line);
  font-size:12.5px;
}

.oracle-cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.zodiac-pulse-btn{
  animation:zodiacBtnPulse 2.4s ease-in-out infinite;
}

@keyframes zodiacBtnPulse{
  0%,100%{box-shadow:0 14px 30px -12px var(--ring)}
  50%{box-shadow:0 18px 36px -10px rgba(255,194,75,.46)}
}

.mini-reading-panel .card-title{
  align-items:center;
}

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

.mini-oracle-card{
  position:relative;
  border:none;
  padding:0;
  background:none;
  cursor:pointer;
  perspective:1000px;
}

.mini-card-flip{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:5 / 7.3;
  transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.2,.8,.2,1);
}

.mini-oracle-card.flipped .mini-card-flip{
  transform:rotateY(180deg);
}

.mini-card-face{
  position:absolute;
  inset:0;
  border-radius:22px;
  padding:16px 14px;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.mini-card-back{
  background:
    linear-gradient(160deg, rgba(47,107,255,.98), rgba(24,43,103,.98));
  color:#fff;
  border:1px solid rgba(255,194,75,.35);
  box-shadow:0 20px 36px -24px rgba(24,43,103,.52);
}

.mini-card-back::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:16px;
  border:1px solid rgba(255,194,75,.32);
}

.mini-card-front{
  transform:rotateY(180deg);
  color:#fff;
  background:
    linear-gradient(180deg, rgba(10,24,60,.95), rgba(22,46,112,.94));
  border:1px solid rgba(255,194,75,.42);
  box-shadow:0 22px 40px -26px rgba(24,43,103,.58);
}

.mini-card-pos{
  position:relative;
  z-index:1;
  font-family:var(--font-head);
  font-size:11px;
  color:#ffe7aa;
  letter-spacing:.02em;
}

.mini-card-star{
  position:relative;
  z-index:1;
  margin:auto;
  font-size:34px;
  color:#fff;
  filter:drop-shadow(0 0 10px rgba(255,194,75,.42));
}

.mini-card-front b{
  position:relative;
  z-index:1;
  font-family:var(--font-head);
  font-size:18px;
  line-height:1.2;
}

.mini-card-front small{
  position:relative;
  z-index:1;
  color:#d6e3ff;
  font-size:12px;
}

.mini-reading-copy{
  margin-top:16px;
  padding:16px 18px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(234,242,255,.86));
  border:1px solid rgba(47,107,255,.10);
  color:var(--ink);
  font-size:15px;
  line-height:1.7;
  min-height:82px;
}

.oracle-result-card{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(460px 220px at 12% 0%, rgba(255,194,75,.18), transparent 70%),
    radial-gradient(540px 280px at 100% 0%, rgba(47,107,255,.14), transparent 74%),
    linear-gradient(160deg, rgba(255,255,255,.98), rgba(240,246,255,.97));
}

.oracle-result-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  align-items:flex-start;
}

.oracle-result-badge{
  padding:9px 14px;
  border-radius:999px;
  background:linear-gradient(135deg, #fff3cf, #ffd97a);
  color:#7a5000;
  font-family:var(--font-head);
  font-size:12px;
}

.oracle-result-message{
  margin:16px 0 0;
  font-size:17px;
  color:var(--ink);
  line-height:1.75;
  min-height:84px;
}

.oracle-result-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:20px;
}

.oracle-result-block{
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(47,107,255,.10);
  box-shadow:0 18px 36px -28px rgba(47,107,255,.28);
}

.oracle-result-block span{
  display:block;
  margin-bottom:8px;
  font-size:11px;
  font-family:var(--font-head);
  letter-spacing:.04em;
  color:var(--blue);
  text-transform:uppercase;
}

.oracle-result-block strong{
  display:block;
  font-size:15px;
  color:var(--ink);
  line-height:1.6;
}

.oracle-mini-result{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:18px;
}

.oracle-mini-chip{
  padding:16px 14px;
  border-radius:18px;
  background:linear-gradient(160deg, rgba(24,43,103,.96), rgba(47,107,255,.92));
  color:#fff;
  border:1px solid rgba(255,194,75,.24);
}

.oracle-mini-chip span{
  display:block;
  font-size:11px;
  color:#ffe5a1;
  font-family:var(--font-head);
  margin-bottom:6px;
}

.oracle-mini-chip b{
  display:block;
  font-family:var(--font-head);
  font-size:16px;
  margin-bottom:6px;
}

.oracle-mini-chip p{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:#dce8ff;
}

.oracle-result-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.oracle-disclaimer{
  margin:18px 0 0;
  color:var(--muted);
  font-size:12.5px;
}

.oracle-loading{
  opacity:.72;
  pointer-events:none;
}

.oracle-loading .oracle-result-badge{
  background:linear-gradient(135deg, #eaf1ff, #d8e6ff);
  color:var(--blue);
}

.oracle-result-card.reveal-in{
  animation:zodiacFadeIn .42s ease;
}

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

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

@media (max-width:780px){
  .zodiac-oracle-visual{grid-template-columns:1fr}
  .zodiac-oracle-mascot{width:min(280px, 86%);margin:0 auto}
  .crystal-cluster{min-height:240px}
  .crystal-ball{width:180px;height:180px;font-size:70px}
  .mini-card-grid,
  .oracle-result-grid,
  .oracle-mini-result{grid-template-columns:1fr}
}

@media (max-width:680px){
  .oracle-cta-row > .btn{width:100%}
  .oracle-result-actions > .btn{width:100%}
  .oracle-type{font-size:16px;min-height:64px}
  .oracle-result-message{font-size:16px;min-height:110px}
}

@media (prefers-reduced-motion:reduce){
  .zodiac-pulse-btn,
  .crystal-ball,
  .zodiac-oracle-mascot,
  .crystal-spark{
    animation:none !important;
  }
}