* { margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

:root {
  --card-bg: rgba(22, 19, 28, 0.56);
  --card-bg-strong: rgba(24, 20, 30, 0.68);
  --card-line: rgba(255,255,255,0.10);
  --card-line-soft: rgba(255,255,255,0.06);
  --text-main: rgba(255,255,255,0.92);
  --text-soft: rgba(255,255,255,0.66);
  --text-faint: rgba(255,255,255,0.42);
  --accent-warm: #ffd86b;
  --accent-cool: #6bdcff;
  --shadow-card: 0 18px 60px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.10);
  --layout-x: 48px;
  --layout-top: 38px;
  --layout-bottom: 72px;
  --layout-gap: 18px;
  --layout-col-gap: 24px;
  --right-panel: 400px;
  --knowledge-panel: 460px;
  --time-panel-h: 154px;
  --zodiac-panel-h: 326px;
  --photo-panel-h: 360px;
}

.card {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)), var(--card-bg-strong);
  border: 1px solid var(--card-line);
  border-radius: 8px;
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
}
.card::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.13), transparent 34%),
    radial-gradient(circle at 12% 0%, rgba(255,216,107,0.13), transparent 38%);
  opacity: 0.55;
}
.card > * { position: relative; }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  margin: 18px 0;
}

@keyframes hourlyGlow {
  0%   { text-shadow: 0 0 30px rgba(255,255,255,1), 0 0 80px rgba(180,200,255,0.8), 0 0 120px rgba(100,150,255,0.5); color: #fff; }
  8%   { text-shadow: 0 0 50px rgba(255,255,255,1), 0 0 100px rgba(180,200,255,1), 0 0 160px rgba(100,150,255,0.6); }
  18%  { text-shadow: 0 0 20px rgba(255,255,255,0.6), 0 0 40px rgba(180,200,255,0.3); }
  28%  { text-shadow: 0 0 35px rgba(255,255,255,0.85), 0 0 70px rgba(180,200,255,0.6), 0 0 100px rgba(100,150,255,0.35); }
  38%  { text-shadow: 0 0 15px rgba(255,255,255,0.4), 0 0 30px rgba(180,200,255,0.2); }
  48%  { text-shadow: 0 0 25px rgba(255,255,255,0.6), 0 0 50px rgba(180,200,255,0.4); }
  60%  { text-shadow: 0 0 10px rgba(255,255,255,0.25), 0 0 20px rgba(180,200,255,0.12); }
  75%  { text-shadow: 0 0 15px rgba(255,255,255,0.35), 0 0 30px rgba(180,200,255,0.2); }
  100% { text-shadow: 0 2px 20px rgba(0,0,0,0.5); color: #fff; }
}

@media (max-width: 1500px) {
  :root {
    --layout-x: 32px;
    --layout-col-gap: 18px;
    --right-panel: 360px;
    --knowledge-panel: 380px;
    --time-panel-h: 144px;
    --zodiac-panel-h: 312px;
    --photo-panel-h: 320px;
  }
}