*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--egg-surface,#141420);color:var(--egg-text,#e8eaed)}

#app{
  max-width:720px;
  margin:0 auto;
  padding:60px 16px 80px;
}

.hero{text-align:center;padding:32px 0 24px}
.hero-title{
  font-size:2rem;
  font-weight:800;
  background:linear-gradient(135deg,#7e57c2,#b388ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-sub{
  margin-top:8px;
  font-size:.95rem;
  opacity:.7;
}

.sign-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  padding:0 4px;
}
@media(min-width:520px){
  .sign-grid{grid-template-columns:repeat(4,1fr)}
}

.sign-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:16px 8px;
  border:1px solid rgba(126,87,194,.25);
  border-radius:14px;
  background:rgba(126,87,194,.08);
  cursor:pointer;
  transition:all .2s ease;
  font-family:inherit;
  color:inherit;
}
.sign-card:hover,.sign-card:focus-visible{
  background:rgba(126,87,194,.2);
  border-color:rgba(126,87,194,.5);
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(126,87,194,.2);
}
.sign-card:focus-visible{
  outline:2px solid #7e57c2;
  outline-offset:2px;
}
.sign-emoji{font-size:2rem}
.sign-name{font-size:.85rem;font-weight:600}
.sign-date{font-size:.7rem;opacity:.5}

.result-panel{
  animation:fadeIn .3s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.back-btn{
  background:none;
  border:none;
  color:var(--egg-accent,#7e57c2);
  font-size:.9rem;
  cursor:pointer;
  padding:8px 0;
  font-family:inherit;
}
.back-btn:hover{text-decoration:underline}
.back-btn:focus-visible{outline:2px solid #7e57c2;outline-offset:2px;border-radius:4px}

.result-header{
  text-align:center;
  padding:24px 0 16px;
}
.result-emoji{font-size:3.5rem;display:block;margin-bottom:8px}
.result-sign{font-size:1.5rem;font-weight:700}
.result-date{font-size:.8rem;opacity:.5;margin-top:4px}

.period-tabs{
  display:flex;
  justify-content:center;
  gap:8px;
  margin:16px 0;
}
.period-tab{
  padding:8px 20px;
  border:1px solid rgba(126,87,194,.3);
  border-radius:24px;
  background:transparent;
  color:inherit;
  font-size:.85rem;
  font-family:inherit;
  cursor:pointer;
  transition:all .2s ease;
}
.period-tab:hover{background:rgba(126,87,194,.15)}
.period-tab:focus-visible{outline:2px solid #7e57c2;outline-offset:2px}
.period-tab.active{
  background:var(--egg-accent,#7e57c2);
  color:#fff;
  border-color:var(--egg-accent,#7e57c2);
}

.result-body{
  margin-top:16px;
  padding:24px;
  border-radius:16px;
  background:rgba(126,87,194,.08);
  border:1px solid rgba(126,87,194,.15);
  min-height:120px;
  position:relative;
}

.horoscope-text{
  font-size:1rem;
  line-height:1.7;
  word-break:keep-all;
  overflow-wrap:break-word;
}

.loading-spinner{
  justify-content:center;
  padding:24px 0;
}
.loading-spinner:not([hidden]){
  display:flex;
}
.spinner{
  width:32px;height:32px;
  border:3px solid rgba(126,87,194,.2);
  border-top-color:#7e57c2;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);border:0;
}