:root {
  --gold: #ffc845;
  --ink: #16151f;
  --panel: rgba(255, 255, 255, 0.12);
  --stroke: rgba(255, 255, 255, 0.22);
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 200, 69, 0.18), transparent 28rem),
    linear-gradient(135deg, #17131d, #253341 52%, #151820);
}

.page-shell { min-height: calc(100vh - 64px); }
.glass-nav, .glass-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}
.glass-card { border-radius: 8px; }
.hero-band { min-height: 82vh; display: flex; align-items: center; }
.astro-orbit {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 200, 69, .32);
  border-radius: 50%;
}
.zodiac-wheel {
  width: 68%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(from 30deg, #ffc845, #e98a35, #36b59f, #6f8cff, #ffc845);
  color: #16151f;
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 800;
}
.auth-container { padding-block: 10vh; }
.auth-card { max-width: 420px; }
.avatar { width: 58px; height: 58px; object-fit: cover; border-radius: 50%; background: #fff; }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.metric { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: var(--gold); }
.list-row { display: block; padding: .75rem; border-top: 1px solid var(--stroke); color: inherit; text-decoration: none; }
.chat-shell { max-width: 860px; margin-inline: auto; }
.chat-messages { height: 58vh; overflow: auto; display: flex; flex-direction: column; gap: .75rem; padding: .75rem; }
.message { max-width: 78%; padding: .75rem; border-radius: 8px; background: rgba(255,255,255,.1); }
.message.mine { align-self: flex-end; background: rgba(255, 200, 69, .24); }
.chat-form { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; }
.chat-image { max-width: 220px; border-radius: 8px; margin-top: .5rem; }
.agora-room { min-height: 60vh; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.video-tile, .remote-grid { min-height: 280px; background: rgba(0,0,0,.35); border-radius: 8px; overflow: hidden; }
@media (max-width: 640px) {
  .chat-form, .agora-room { grid-template-columns: 1fr; }
  .message { max-width: 92%; }
}