@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg:        #07060f;
  --bg2:       #0b0916;
  --card:      #0f0e1e;
  --card2:     #131129;
  --line:      rgba(255,255,255,0.06);
  --line2:     rgba(255,255,255,0.10);

  --accent:    #9d7fe8;
  --accent-lt: #c2a0ff;
  --gold:      #d4a853;

  --text:      #ddd8f0;
  --muted:     #8a829e;
  --muted2:    #6b6480;

  --glow:      rgba(157,127,232,0.22);

  --good:      #4d9e72;
  --bad:       #9a3f52;

  --radius:    14px;
  --tab-h:     66px;
  --maxw:      480px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  min-height: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(157,127,232,0.10) 0%, rgba(157,127,232,0.0) 60%),
    radial-gradient(900px 600px at 50% 105%, rgba(212,168,83,0.05) 0%, rgba(212,168,83,0.0) 55%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg) 42%, var(--bg) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
}

#app {
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
}

/* ─── Brand header ────────────────────────────────── */
.brand {
  text-align: center;
  padding: 22px 24px 4px;
}
.brand-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 5px;
  color: #efe9fb;
  padding-left: 5px; /* compensate tracking */
}
.brand-sub {
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: lowercase;
  color: var(--muted2);
}
.brand-sub::before,
.brand-sub::after {
  content: '✦';
  color: var(--gold);
  opacity: .65;
  margin: 0 8px;
  font-size: 9px;
  vertical-align: middle;
}

/* ─── Tab bar ─────────────────────────────────────── */
.tab-bar {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--maxw);
  height: var(--tab-h);
  display: flex;
  background: rgba(9,8,18,0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tab {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--muted2);
  cursor: pointer;
  transition: color .25s ease;
}
.tab svg { width: 22px; height: 22px; display: block; }
.tab-label { font-size: 11px; font-weight: 500; letter-spacing: .4px; }
.tab.active { color: var(--accent-lt); }
.tab.active::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 30px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 10px var(--glow);
}

/* ─── Screens ─────────────────────────────────────── */
.screen { display: none; }
.screen.active {
  display: block;
  animation: screenIn .4s ease both;
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Hero ────────────────────────────────────────── */
.hero {
  position: relative;
  text-align: center;
  padding: 18px 24px 14px;
}
.hero.hero-sm { padding: 10px 24px 6px; }

/* ─── Starfield (subtle, behind moon) ─────────────── */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
}
.hero::before {
  background-image:
    radial-gradient(1.4px 1.4px at 14% 16%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1px 1px   at 82% 12%, rgba(226,216,255,0.75), transparent 60%),
    radial-gradient(1px 1px   at 68% 30%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 24% 40%, rgba(212,168,83,0.55), transparent 60%),
    radial-gradient(1px 1px   at 90% 44%, rgba(255,255,255,0.60), transparent 60%);
  animation: twinkle 6.5s ease-in-out infinite;
}
.hero::after {
  background-image:
    radial-gradient(1px 1px   at 8% 34%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 92% 22%, rgba(255,255,255,0.70), transparent 60%),
    radial-gradient(1px 1px   at 35% 10%, rgba(226,216,255,0.55), transparent 60%),
    radial-gradient(1px 1px   at 58% 46%, rgba(212,168,83,0.45), transparent 60%),
    radial-gradient(1px 1px   at 18% 52%, rgba(255,255,255,0.45), transparent 60%);
  animation: twinkle 9s ease-in-out infinite 1.5s;
}

@keyframes twinkle {
  0%, 100% { opacity: .30; }
  50%      { opacity: .70; }
}

/* ─── CSS Moon ────────────────────────────────────── */
.moon {
  position: relative;
  width: 242px; height: 242px;
  margin: 12px auto 28px;
}
.moon.sm { width: 132px; height: 132px; margin: 8px auto 18px; }

.moon-halo {
  position: absolute;
  inset: -46px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 48%,
    rgba(212,168,83,0.20) 0%,
    rgba(157,127,232,0.22) 36%,
    rgba(157,127,232,0.06) 58%,
    transparent 72%);
  filter: blur(16px);
  opacity: .42;
  animation: halo 9s ease-in-out infinite;
  pointer-events: none;
}
.moon.sm .moon-halo { inset: -30px; }

.moon-disk {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 62% 26%, rgba(255,248,219,0.72) 0%, rgba(255,248,219,0.16) 24%, transparent 45%),
    #1a1423;
  box-shadow:
    inset -20px -28px 42px rgba(31,25,47,0.58),
    inset 18px 16px 34px rgba(255,248,225,0.18),
    0 0 38px rgba(255,220,148,0.22),
    0 0 88px rgba(157,127,232,0.22);
  animation: breathe 6s ease-in-out infinite;
}

.moon-disk::before,
.moon-disk::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.moon-disk::before {
  background:
    radial-gradient(circle at 68% 22%, rgba(255,244,210,0.36), transparent 28%),
    radial-gradient(circle at 40% 72%, rgba(92,70,118,0.24), transparent 42%);
  mix-blend-mode: screen;
  opacity: .62;
}

.moon-disk::after {
  box-shadow:
    inset -18px -20px 34px rgba(23,18,35,0.36),
    inset 12px 10px 24px rgba(255,243,214,0.16);
}

.moon-tex {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    url('/assets/moon-texture.png') center 48% / 124% 124% no-repeat,
    radial-gradient(circle at 58% 38%, #f8edd6 0%, #d0bea3 100%);
  filter: saturate(.88) contrast(1.08) brightness(1.04);
  opacity: .98;
  transform: scale(1.006);
}

.moon-shadow {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  z-index: 3;
  background:
    radial-gradient(circle at 42% 45%, rgba(9,7,18,0.94) 0%, rgba(7,6,15,0.96) 62%, rgba(7,6,15,0.88) 100%);
  transform: translateX(calc(var(--illum, 100) * -1.04%));
  transition: transform 1.1s ease;
  filter: blur(2px);
}
.moon[data-waxing="false"] .moon-shadow {
  transform: translateX(calc(var(--illum, 100) * 1.04%));
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
@keyframes halo {
  0%, 100% { opacity: .30; }
  50%      { opacity: .55; }
}

/* ─── Hero text ───────────────────────────────────── */
.hero-phase {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .5px;
  color: #f2eefc;
  margin-bottom: 12px;
}
.hero-sm .hero-phase { font-size: 28px; }

.hero-phase::after {
  content: '✦';
  display: block;
  font-size: 11px;
  color: var(--gold);
  opacity: .7;
  margin-top: 10px;
  font-weight: 400;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 0;
  font-size: 13.5px;
  color: var(--text);
  margin-bottom: 8px;
}
.hero-meta .dot {
  color: var(--muted2);
  font-style: normal;
  margin: 0 9px;
}
.hero-meta span b { color: var(--accent-lt); font-weight: 600; }

.hero-sub {
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: .3px;
}

/* ─── Rec sections ────────────────────────────────── */
.rec-wrap { padding: 6px 0 6px; }

.rec-section {
  margin: 0 14px 12px;
  background: linear-gradient(180deg, var(--card2) 0%, var(--card) 100%);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 17px 18px 16px;
  opacity: 0;
  transform: translateY(16px);
  animation: cardIn .55s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: var(--d, 0ms);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.rec-section:hover,
.rec-section:active {
  border-color: var(--line2);
  box-shadow: 0 0 0 1px rgba(157,127,232,0.10), 0 8px 30px rgba(157,127,232,0.10);
}

@keyframes cardIn {
  to { opacity: 1; transform: translateY(0); }
}

.rec-section-header {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 11px;
}
.rec-section-icon {
  font-size: 16px;
  line-height: 1;
  color: var(--gold);
  flex-shrink: 0;
}
.rec-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #ece6fa;
}

.rec-text {
  font-size: 14.5px;
  line-height: 1.78;
  color: #c5bfdb;
  white-space: pre-wrap;
}

.rec-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.rec-list li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #c5bfdb;
}
.rec-list li::before {
  content: '·';
  color: var(--gold);
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

/* accent colour per section */
.rec-general { border-left-color: var(--accent); }
.rec-good    { border-left-color: var(--good); }
.rec-good    .rec-section-icon { color: var(--good); }
.rec-bad     { border-left-color: var(--bad); }
.rec-bad     .rec-section-icon { color: #c87a8a; }
.rec-bad     .rec-list li::before { color: #c87a8a; }
.rec-career  { border-left-color: #7d9bd6; }
.rec-rel     { border-left-color: #c98bb0; }
.rec-health  { border-left-color: var(--good); }
.rec-finance { border-left-color: var(--gold); }

/* ─── Week strip ──────────────────────────────────── */
.week-scroll {
  display: flex;
  gap: 8px;
  padding: 4px 14px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.week-scroll::-webkit-scrollbar { display: none; }

.week-day-card {
  flex-shrink: 0;
  width: 66px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 11px 6px;
  text-align: center;
  transition: border-color .2s, background .2s;
}
.week-day-card.today {
  background: linear-gradient(180deg, rgba(157,127,232,0.16), rgba(157,127,232,0.05));
  border-color: rgba(157,127,232,0.45);
  box-shadow: 0 0 18px rgba(157,127,232,0.12);
}
.wdc-weekday { font-size: 11px; color: var(--muted2); font-weight: 500; margin-bottom: 4px; }
.wdc-date    { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.wdc-moon {
  height: 30px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-moon {
  position: relative;
  display: inline-block;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  overflow: hidden;
  background:
    url('/assets/moon-texture.png') center 48% / 128% 128% no-repeat,
    radial-gradient(circle at 58% 34%, #fff3d8 0%, #cbbba4 100%);
  box-shadow:
    inset -3px -4px 7px rgba(23,18,35,0.42),
    0 0 9px rgba(212,168,83,0.20),
    0 0 15px rgba(157,127,232,0.12);
}
.mini-moon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 68% 22%, rgba(255,244,210,0.28), transparent 30%),
    radial-gradient(circle at 40% 72%, rgba(92,70,118,0.20), transparent 44%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.moon-mini-shadow {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 45%, rgba(9,7,18,0.94) 0%, rgba(7,6,15,0.96) 64%, rgba(7,6,15,0.88) 100%);
  transform: translateX(calc(var(--illum, 100) * -1.04%));
  filter: blur(.7px);
}
.mini-moon[data-waxing="false"] .moon-mini-shadow {
  transform: translateX(calc(var(--illum, 100) * 1.04%));
}
.wdc-ld      { font-size: 11px; color: var(--accent-lt); font-weight: 600; }
.wdc-trans   { font-size: 10px; color: var(--muted2); margin-top: 2px; }

/* ─── Settings ────────────────────────────────────── */
.setting-card {
  margin: 0 14px 12px;
  background: linear-gradient(180deg, var(--card2) 0%, var(--card) 100%);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px;
}
.setting-row {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 15px;
}
.setting-icon  { font-size: 17px; line-height: 1; margin-top: 2px; color: var(--gold); }
.setting-label { font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }
.setting-val   { font-size: 14.5px; font-weight: 500; color: var(--text); }

.time-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
}
.time-input {
  width: 74px;
  padding: 11px;
  background: var(--bg);
  border: 1px solid var(--line2);
  border-radius: 11px;
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}
.time-input:focus { outline: none; border-color: rgba(157,127,232,0.55); }
.time-input::-webkit-inner-spin-button { display: none; }
.time-colon { font-size: 24px; font-weight: 700; color: var(--muted2); }

/* ─── Buttons ─────────────────────────────────────── */
.btn {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, #9d7fe8, #7a5fc4);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(157,127,232,0.22);
  transition: transform .12s ease, box-shadow .2s ease, opacity .2s;
}
.btn:hover  { box-shadow: 0 8px 28px rgba(157,127,232,0.32); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; box-shadow: none; cursor: default; }

.btn-outline {
  background: transparent;
  border: 1px solid rgba(157,127,232,0.45);
  color: var(--accent-lt);
  box-shadow: none;
}
.btn-outline:hover { background: rgba(157,127,232,0.08); box-shadow: none; }

/* ─── Status message ──────────────────────────────── */
.msg { font-size: 13px; text-align: center; min-height: 20px; margin-top: 10px; padding: 0 16px; }
.msg.ok  { color: #7ec89a; }
.msg.err { color: #d98a98; }

/* ─── Skeleton ────────────────────────────────────── */
.skeleton-wrap { padding: 4px 14px 0; }
.sk-block {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 12px;
}
.sk {
  background: linear-gradient(90deg,
    rgba(157,127,232,0.05) 25%,
    rgba(157,127,232,0.13) 50%,
    rgba(157,127,232,0.05) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
  margin-bottom: 11px;
}
.sk-h2  { height: 20px; width: 52%; }
.sk-p   { height: 13px; }
.sk.short { width: 68%; }

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ─── Desktop framing ─────────────────────────────── */
@media (min-width: 540px) {
  body { background-attachment: fixed; }
  #app {
    min-height: 100vh;
    box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0,0,0,0.5);
  }
}