/* ============================================================
   QiCast — H5 Landing Page
   Style: same palette as app, elevated visual language
   ============================================================ */

:root {
  --gold:        #c9a227;
  --gold-light:  #f0d060;
  --gold-dim:    #7a6018;
  --gold-faint:  rgba(201,162,39,0.12);
  --ink:         #0a0603;
  --parchment:   #160e05;
  --text-light:  #e8d5a0;
  --text-dim:    #876f3a;
  --text-muted:  #4a3b1e;
  --radius-card: 14px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  font-family: 'Noto Serif SC', 'STSong', serif;
  color: var(--text-light);
  overflow-x: hidden;
  -webkit-user-select: none;
  user-select: none;
  padding-top:    env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- BG Canvas (fixed full-screen) ---------- */
#bg-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Scanline ---------- */
.l-scanline {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.07) 3px,
    rgba(0,0,0,0.07) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* ---------- Auth Entry (top-right) ---------- */
#l-auth-entry {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 100;
}

.l-signin-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(10,6,3,0.6);
  border: 1px solid rgba(201,162,39,0.3);
  color: rgba(201,162,39,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.l-signin-btn:hover {
  border-color: rgba(201,162,39,0.65);
  color: #c9a227;
  box-shadow: 0 0 16px rgba(201,162,39,0.18);
}

.l-user-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(201,162,39,0.14);
  border: 1px solid rgba(201,162,39,0.45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.2s;
}
.l-user-btn:hover { box-shadow: 0 0 16px rgba(201,162,39,0.2); }

.l-user-avatar {
  font-size: 14px;
  font-weight: 700;
  color: #c9a227;
  text-transform: uppercase;
  line-height: 1;
  font-family: 'Noto Serif SC', serif;
}

.l-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #120d08;
  border: 1px solid rgba(201,162,39,0.22);
  border-radius: 10px;
  min-width: 170px;
  padding: 10px 0;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}

.l-user-menu-email {
  padding: 4px 16px 10px;
  font-size: 11px;
  color: rgba(201,162,39,0.45);
  border-bottom: 1px solid rgba(201,162,39,0.1);
  margin-bottom: 4px;
  word-break: break-all;
  font-family: 'Noto Serif SC', serif;
}

.l-logout-btn {
  width: 100%;
  padding: 8px 16px;
  background: none;
  border: none;
  text-align: left;
  font-family: 'Noto Serif SC', serif;
  font-size: 13px;
  color: rgba(201,162,39,0.7);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, background 0.15s;
}
.l-logout-btn:hover { background: rgba(201,162,39,0.07); color: #c9a227; }

/* ---------- Auth Modal ---------- */
.l-auth-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6,3,1,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 20px max(24px, env(safe-area-inset-bottom, 24px));
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.l-auth-modal-overlay.show {
  opacity: 1;
  pointer-events: all;
}

.l-auth-modal-card {
  position: relative;
  background: #110b06;
  border: 1px solid rgba(201,162,39,0.22);
  border-radius: 16px;
  width: min(360px, calc(100vw - 40px));
  padding: 28px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 40px rgba(201,162,39,0.04);
  animation: l-card-in 0.22s ease-out;
  flex-shrink: 0;
}
@keyframes l-card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.l-auth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: rgba(201,162,39,0.35);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.l-auth-close:hover { color: rgba(201,162,39,0.7); }

.l-auth-modal-title {
  font-family: 'Cormorant Garamond', 'Noto Serif SC', serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 600;
  color: #c9a227;
  text-align: center;
  letter-spacing: 0.5px;
  text-shadow: 0 0 20px rgba(201,162,39,0.3);
}

.l-auth-tabs {
  display: flex;
  border-bottom: 1px solid rgba(201,162,39,0.14);
}

.l-auth-tab {
  flex: 1;
  padding: 8px 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: 'Noto Serif SC', serif;
  font-size: 13px;
  color: rgba(201,162,39,0.4);
  cursor: pointer;
  letter-spacing: 0.5px;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.l-auth-tab.active {
  color: #c9a227;
  border-bottom-color: #c9a227;
}

.l-auth-panel { display: none; flex-direction: column; gap: 14px; }
.l-auth-panel.active { display: flex; }

.l-auth-panel form { display: flex; flex-direction: column; gap: 14px; }
.l-auth-submit { margin-top: 4px; }

.l-auth-field { display: flex; flex-direction: column; gap: 6px; }

.l-auth-label {
  font-size: 11px;
  letter-spacing: 0.8px;
  color: rgba(201,162,39,0.5);
  text-transform: uppercase;
}

.l-auth-input {
  background: rgba(201,162,39,0.04);
  border: 1px solid rgba(201,162,39,0.2);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: 'Noto Serif SC', serif;
  font-size: 14px;
  color: #e8d5a0;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.l-auth-input::placeholder { color: rgba(232,213,160,0.2); }
.l-auth-input:focus {
  border-color: rgba(201,162,39,0.55);
  box-shadow: 0 0 0 3px rgba(201,162,39,0.08);
}

.l-auth-error {
  font-size: 12px;
  color: rgba(248,113,113,0.85);
  padding: 8px 10px;
  background: rgba(248,113,113,0.06);
  border: 1px solid rgba(248,113,113,0.15);
  border-radius: 6px;
}

.l-auth-submit {
  width: 100%;
  min-height: 44px;
  background: linear-gradient(135deg, rgba(201,162,39,0.18), rgba(201,162,39,0.10));
  border: 1px solid rgba(201,162,39,0.4);
  border-radius: 8px;
  color: #c9a227;
  font-family: 'Noto Serif SC', serif;
  font-size: 14px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.l-auth-submit:hover {
  background: linear-gradient(135deg, rgba(201,162,39,0.26), rgba(201,162,39,0.16));
  box-shadow: 0 0 20px rgba(201,162,39,0.18);
}
.l-auth-submit:disabled { opacity: 0.45; cursor: default; }

.l-auth-note {
  font-size: 10.5px;
  color: rgba(201,162,39,0.22);
  text-align: center;
  letter-spacing: 0.3px;
  line-height: 1.7;
}

.l-auth-note a,
.lf-links a {
  color: rgba(201,162,39,0.58);
  text-decoration: none;
}

.l-auth-note a:hover,
.lf-links a:hover {
  color: rgba(201,162,39,0.82);
}

/* Post-registration OTP notice */
#l-verify-notice {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 4px 0;
}
.l-verify-desc {
  font-size: 13px;
  color: rgba(232,213,160,0.55);
  line-height: 1.7;
  text-align: center;
}
.l-verify-em {
  color: rgba(201,162,39,0.85);
  font-style: italic;
}
.l-otp-wrap {
  display: flex;
  justify-content: center;
}
.l-otp-input {
  width: 160px;
  text-align: center;
  font-size: 28px;
  letter-spacing: 10px;
  font-family: monospace;
  background: rgba(201,162,39,0.05);
  border: 1px solid rgba(201,162,39,0.3);
  border-radius: 8px;
  padding: 10px 8px;
  color: #c9a227;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.l-otp-input:focus {
  border-color: rgba(201,162,39,0.6);
  box-shadow: 0 0 0 3px rgba(201,162,39,0.08);
}
.l-otp-input::placeholder { color: rgba(201,162,39,0.18); letter-spacing: 8px; }
.l-otp-resend {
  background: none;
  border: none;
  color: rgba(201,162,39,0.4);
  font-family: 'Noto Serif SC', serif;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.l-otp-resend:hover { color: rgba(201,162,39,0.7); }

/* ---------- Header ---------- */
#lheader {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 20px 10px;
  background: linear-gradient(180deg, rgba(10,6,3,0.9) 60%, transparent);
  pointer-events: none;
  transition: background 0.3s;
}

#lheader.scrolled {
  background: rgba(10,6,3,0.96);
  box-shadow: 0 1px 0 rgba(201,162,39,0.08);
}

.lh-logo {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(201,162,39,0.5);
}

.lh-dot { color: var(--gold-light); }

.lh-sub {
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--text-muted);
}

/* ---------- Hero ---------- */
#lhero {
  position: relative;
  min-height: 100dvh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  margin-top: -44px; /* bleed under header */
  padding: 60px 24px 80px;
  gap: 0;
}

/* Oracle ring / hexagram container */
.oracle-ring-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  flex-shrink: 0;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ambient glow behind hexagram */
.hero-ambient-glow {
  position: absolute;
  inset: -50px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(180,130,60,0.08) 0%,
    rgba(180,130,60,0.03) 45%,
    transparent 70%);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.2);
}

/* SVG hexagram */
#hero-hex-svg {
  width: 220px;
  height: 220px;
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* Yao lines — initial hidden state (yang: dasharray 70) */
.yao .yl,
.yao .yr {
  stroke: #c9963a;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  transition:
    stroke-dashoffset 350ms cubic-bezier(0.25, 0, 0.1, 1),
    stroke 150ms ease-out;
}

/* Yin override: shorter segments, different dasharray */
.yao.yin .yl,
.yao.yin .yr {
  stroke-dasharray: 55;
  stroke-dashoffset: 55;
}

/* Active: grow from center outward */
.yao.active .yl,
.yao.active .yr {
  stroke-dashoffset: 0;
}

/* Pulse: brightness flash on settle */
.yao.pulse .yl,
.yao.pulse .yr {
  stroke: #f5e6c8;
}

/* Act 3: scale breathe */
@keyframes hex-scale-breathe {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Act 5: persistent opacity breathing */
@keyframes hex-breathe {
  0%, 100% { opacity: 0.92; }
  50%       { opacity: 1; }
}

/* Act 5: ambient glow breathing */
@keyframes glow-breathe {
  0%, 100% { transform: scale(0.95); opacity: 0.85; }
  50%       { transform: scale(1.05); opacity: 1; }
}

/* Text block */
.lhero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

/* Brand with shimmer */
.lhero-brand {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(40px, 10vw, 56px);
  font-weight: 700;
  letter-spacing: 4px;
  line-height: 1;
  margin-bottom: 10px;
  background: linear-gradient(
    120deg,
    #c9a227 0%,
    #f0d060 25%,
    #edd96a 40%,
    #c9a227 55%,
    #f0d060 70%,
    #c9a227 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: text-shimmer 4s linear infinite;
}

@keyframes text-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.brand-dot-char {
  /* inherit shimmer from parent */
}

.lhero-tagline {
  font-size: 11px;
  letter-spacing: 3.5px;
  color: var(--text-dim);
  margin-bottom: 18px;
}

/* Arts row */
.lhero-arts {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.art-item {
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--text-light);
  opacity: 0.65;
}

.art-sep {
  font-size: 11px;
  color: var(--gold-dim);
}

.lhero-desc {
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-dim);
  letter-spacing: 0.3px;
}

/* Hero CTA button — gold gateway (bridge to the oracle world) */
@keyframes cta-glow {
  0%, 100% {
    border-color: rgba(201,162,39,0.38);
    box-shadow: inset 0 1px 0 rgba(201,162,39,0.06);
  }
  50% {
    border-color: rgba(201,162,39,0.65);
    box-shadow: inset 0 1px 0 rgba(201,162,39,0.15), 0 0 32px rgba(180,130,40,0.28);
  }
}
.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  padding: 17px 24px;
  width: 100%;
  background: rgba(180,130,40,0.18);
  border: 1px solid rgba(201,162,39,0.62);
  border-radius: 10px;
  color: #c9a840;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 2.5px;
  text-decoration: none;
  text-transform: uppercase;
  animation: cta-glow 3s ease-in-out infinite;
  transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.15s, box-shadow 0.22s;
}
.hero-cta-btn:hover {
  background: rgba(180,130,40,0.14);
  border-color: rgba(201,162,39,0.80);
  color: #e8c860;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(160,110,20,0.22);
  animation: none;
}
.hero-cta-btn:active { transform: translateY(0); }

/* Scroll hint */
.lhero-scroll {
  position: absolute;
  bottom: max(60px, env(safe-area-inset-bottom, 60px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 3;
}

.sh-label {
  font-size: 10px;
  letter-spacing: 2.5px;
}

.sh-chevron {
  animation: chevron-bounce 2s ease-in-out infinite;
}

@keyframes chevron-bounce {
  0%, 100% { transform: translateY(0);   opacity: 0.5; }
  50%       { transform: translateY(4px); opacity: 1; }
}

/* ---------- Services Section ---------- */
#lservices {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 20px 14px 48px;
}

/* Section heading */
.lsvc-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.lsvc-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

.lsvc-heading-text {
  font-size: 11px;
  letter-spacing: 3.5px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ---------- Badges ---------- */
.lbadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
}

.lbadge-live {
  background: rgba(201,162,39,0.1);
  color: var(--gold);
  border: 1px solid rgba(201,162,39,0.28);
}

.live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(201,162,39,0.4); }
  50%       { opacity: 0.6; transform: scale(0.85); box-shadow: 0 0 0 4px rgba(201,162,39,0); }
}

.lbadge-soon {
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.07);
}

/* ---------- Featured Card ---------- */
.lcard {
  position: relative;
  background: rgba(22,14,5,0.9);
  border-radius: var(--radius-card);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.lcard:active { transform: scale(0.975); }

.lcard-featured {
  width: 100%;
  margin-bottom: 14px;
  border: 1px solid rgba(201,162,39,0.25);
  box-shadow:
    0 0 0 1px rgba(201,162,39,0.05),
    0 8px 32px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(201,162,39,0.1);
}

/* Sweeping shimmer highlight */
.lcard-shimmer {
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(201,162,39,0.04) 40%,
    rgba(240,208,96,0.08) 50%,
    rgba(201,162,39,0.04) 60%,
    transparent 100%
  );
  animation: card-sweep 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes card-sweep {
  0%   { left: -100%; }
  40%  { left: 160%; }
  100% { left: 160%; }
}

.lcard-inner {
  position: relative;
  z-index: 1;
  padding: 20px 18px;
}

.lcard-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.lcard-hex-icon {
  color: var(--gold);
  opacity: 0.8;
}

.lcard-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: var(--text-light);
  margin-bottom: 3px;
}

.lcard-title-zh {
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--gold-dim);
  margin-bottom: 10px;
}

.lcard-desc {
  font-size: 13px;
  line-height: 1.85;
  color: var(--text-dim);
  margin-bottom: 18px;
}

/* CTA Button */
.lcard-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  background: linear-gradient(135deg, rgba(201,162,39,0.18), rgba(201,162,39,0.08));
  border: 1px solid rgba(201,162,39,0.38);
  border-radius: 9px;
  color: var(--gold);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.lcard-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(201,162,39,0.12);
  opacity: 0;
  transition: opacity 0.2s;
}

.lcard-cta:active::before { opacity: 1; }

.lcard-cta:active {
  border-color: rgba(201,162,39,0.65);
  box-shadow: 0 0 20px rgba(201,162,39,0.25);
}

.cta-arrow {
  display: flex;
  align-items: center;
  transition: transform 0.2s;
}

.lcard-cta:active .cta-arrow { transform: translateX(3px); }

/* ---------- Coming Soon Grid ---------- */
.lsoon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lcard-soon {
  padding: 14px 12px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  position: relative;
  /* Subtle accent tint from --accent */
  background: linear-gradient(160deg, rgba(22,14,5,0.95) 60%, color-mix(in srgb, var(--ink) 85%, var(--accent, transparent)));
}

.lcard-soon .lbadge-soon {
  margin-bottom: 10px;
}

.soon-icon {
  margin-bottom: 8px;
  opacity: 0.65;
}

.soon-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.soon-name-zh {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.soon-desc {
  font-size: 11px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* BaZi card: full-width row */
.lcard-soon-row {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px 14px;
}

.lcard-soon-row .soon-icon {
  flex-shrink: 0;
  margin-bottom: 0;
}

.lcard-soon-row .lbadge-soon {
  display: inline-flex;
  margin-bottom: 4px;
}

.soon-text {
  flex: 1;
}

/* ---------- Footer ---------- */
#lfooter {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 28px 20px max(32px, env(safe-area-inset-bottom, 32px));
  border-top: 1px solid rgba(201,162,39,0.07);
}

.lf-logo {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.lf-logo span { color: var(--gold-dim); }

.lf-copy {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 5px;
  letter-spacing: 0.3px;
}

.lf-links {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.3px;
}

.lf-disc {
  font-size: 10px;
  color: rgba(74,59,30,0.45);
  letter-spacing: 0.2px;
}

/* ---------- Scroll Reveal ---------- */
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.65s cubic-bezier(.22,.68,0,1.2) var(--delay, 0s),
    transform 0.65s cubic-bezier(.22,.68,0,1.2) var(--delay, 0s);
}

.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Page Transition ---------- */
#page-transition {
  position: fixed;
  inset: 0;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  transition: opacity 0.45s ease;
}

#page-transition.active {
  opacity: 1;
  pointer-events: all;
}

/* ============================================================
   SILVER-WHITE THEME OVERRIDES
   Premium cool palette — gold atmosphere reserved for Six Lines
   ============================================================ */

/* ── Base ───────────────────────────────────────────────── */
body {
  background: #06070e;
  color: #c4c9d8;
}

/* ── Header ─────────────────────────────────────────────── */
#lheader {
  background: linear-gradient(180deg, rgba(6,7,14,0.94) 60%, transparent);
}
#lheader.scrolled {
  background: rgba(6,7,14,0.97);
  box-shadow: 0 1px 0 rgba(170,180,220,0.08);
}
.lh-sub { color: #363a4e; }

/* ── Auth entry (icon button) ───────────────────────────── */
.l-signin-btn {
  background: rgba(10,11,22,0.75);
  border-color: rgba(170,185,220,0.42);
  color: rgba(190,200,230,0.82);
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.l-signin-btn:hover {
  border-color: rgba(200,215,255,0.75);
  color: #e8ecf8;
  box-shadow: 0 0 18px rgba(170,185,220,0.18);
}
.l-user-btn {
  background: rgba(170,185,220,0.14);
  border-color: rgba(170,185,220,0.48);
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.l-user-btn:hover { box-shadow: 0 0 18px rgba(170,185,220,0.18); }
.l-user-avatar { color: #dce2f8; font-weight: 700; }
.l-user-menu {
  background: #0a0b18;
  border-color: rgba(170,185,220,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.65);
}
.l-user-menu-email {
  color: rgba(170,185,220,0.5);
  border-bottom-color: rgba(170,185,220,0.1);
}
.l-logout-btn { color: rgba(190,200,230,0.65); }
.l-logout-btn:hover { background: rgba(170,185,220,0.08); color: #c4c9d8; }

/* ── Hero hexagram SVG lines — silver ───────────────────── */
.yao .yl,
.yao .yr {
  stroke: #5e6882;
}
.yao.pulse .yl,
.yao.pulse .yr {
  stroke: #b0bace;
}
.hero-ambient-glow {
  background: radial-gradient(ellipse at center,
    rgba(100,120,200,0.07) 0%,
    rgba(100,120,200,0.02) 45%,
    transparent 70%);
}

/* ── Brand shimmer — silver ─────────────────────────────── */
.lhero-brand {
  background: linear-gradient(
    120deg,
    #8a93b5 0%,
    #dce2f8 20%,
    #f2f4ff 36%,
    #dce2f8 50%,
    #8a93b5 65%,
    #dce2f8 80%,
    #8a93b5 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Hero text ──────────────────────────────────────────── */
.lhero-tagline { color: #424660; }
.art-item { color: #6e7490; opacity: 1; }
.art-sep { color: #32364a; }
.lhero-desc { color: #484c64; }

/* ── Scroll hint — bigger, brighter ─────────────────────── */
.lhero-scroll { color: #7880a0; }
.sh-label {
  font-size: 14px;
  letter-spacing: 3.5px;
  color: #9098b8;
}
.sh-chevron svg { width: 28px; height: 17px; }
.sh-chevron path {
  stroke: #9098b8;
  stroke-width: 2.2;
}

/* ── Section heading — bigger, prominent, silver ────────── */
.lsvc-heading { margin-bottom: 30px; }
.lsvc-heading-text {
  font-size: 16px;
  letter-spacing: 3px;
  color: #c4c9d8;
  font-weight: 400;
  white-space: nowrap;
}
.lsvc-rule {
  background: linear-gradient(90deg, transparent, rgba(160,175,215,0.4), transparent);
}

/* ── Six Lines Oracle card — warm gold atmosphere ────────── */
/* Card background stays warm, all gold accents preserved   */
.lcard-featured {
  background: rgba(14,9,3,0.96);
}

/* ── Coming-soon cards — cool silver/dark ───────────────── */
.lcard:not(.lcard-featured) {
  background: rgba(7,8,18,0.94);
}
/* Coming Soon: text-only, muted */
.lcard-soon {
  border-color: rgba(160,175,215,0.07);
  box-shadow: none;
  background: rgba(6,7,14,0.7);
}
.lcard-dim {
  opacity: 0.7;
}
.soon-name { color: #42475c; font-size: 13px; font-weight: 600; }
.soon-name-zh { color: #2a2e3e; }
.soon-desc { color: #2e3244; }
.lbadge-soon {
  color: #353848;
  border-color: rgba(160,175,215,0.08);
  background: transparent;
}

/* ── Link cards (Support / Community) ───────────────────── */
a.lcard-link {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  text-decoration: none;
  cursor: pointer;
  background: rgba(10,11,24,0.95);
  border-color: rgba(160,175,215,0.18);
  box-shadow: inset 0 1px 0 rgba(160,175,215,0.07);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s, background 0.18s;
}
a.lcard-link:hover {
  border-color: rgba(160,175,215,0.35);
  background: rgba(14,16,32,0.98);
  box-shadow: inset 0 1px 0 rgba(160,175,215,0.12), 0 6px 24px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}
a.lcard-link:active { transform: translateY(0); }
.lcard-link-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(160,175,215,0.06);
  transition: background 0.18s;
}
a.lcard-link:hover .lcard-link-icon { background: rgba(160,175,215,0.1); }
.lcard-link-body { flex: 1; }
.lcard-link-title {
  font-size: 15px;
  font-weight: 700;
  color: #9098b8;
  letter-spacing: 0.2px;
  margin-bottom: 3px;
  transition: color 0.18s;
}
a.lcard-link:hover .lcard-link-title { color: #dce2f8; }
.lcard-link-desc {
  font-size: 12px;
  color: #4a5068;
  line-height: 1.5;
  transition: color 0.18s;
}
a.lcard-link:hover .lcard-link-desc { color: #7880a0; }
.lcard-link-arrow {
  font-size: 18px;
  color: #42475c;
  flex-shrink: 0;
  transition: color 0.18s, transform 0.18s;
}
a.lcard-link:hover .lcard-link-arrow {
  color: #8890a8;
  transform: translateX(4px);
}

/* ── Community card silver shimmer ──────────────────────── */
@keyframes community-shimmer {
  0%   { transform: translateX(-100%) skewX(-18deg); opacity: 0; }
  8%   { opacity: 1; }
  40%  { transform: translateX(200%) skewX(-18deg); opacity: 0; }
  100% { transform: translateX(200%) skewX(-18deg); opacity: 0; }
}
@keyframes community-glow {
  0%, 100% { border-color: rgba(160,175,215,0.18); box-shadow: inset 0 1px 0 rgba(160,175,215,0.07); }
  50%       { border-color: rgba(200,215,255,0.38); box-shadow: inset 0 1px 0 rgba(200,215,255,0.14), 0 0 18px rgba(120,140,220,0.12); }
}
.lcard-community {
  overflow: hidden;
  animation: community-glow 3s ease-in-out infinite;
}
.lcard-community::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(200,215,255,0.13) 50%, transparent 65%);
  animation: community-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}

/* ── Footer ─────────────────────────────────────────────── */
#lfooter { border-top-color: rgba(160,175,215,0.07); }
.lf-disc { color: #6e7490; }
.lf-links { margin: 6px 0; }
.lf-links a {
  color: #8890b0;
  text-decoration: none;
  margin: 0 8px;
  font-size: 12px;
  transition: color 0.15s;
}
.lf-links a:hover { color: #c4c9d8; }

.lf-contact {
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lf-contact a {
  color: #8890b0;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}
.lf-contact a:hover { color: #c4c9d8; }
.lf-contact-sep { color: #6e7490; font-size: 12px; }

/* ── Auth modal — silver-white theme ─────────────────────── */
.l-auth-modal-overlay {
  background: rgba(4,5,12,0.88);
}
.l-auth-modal-card {
  background: #0a0b1a;
  border-color: rgba(160,175,215,0.2);
  box-shadow: 0 24px 64px rgba(0,0,0,0.75), 0 0 0 1px rgba(160,175,215,0.06);
}
.l-auth-close {
  color: rgba(160,175,215,0.35);
}
.l-auth-close:hover { color: rgba(200,215,255,0.75); }

.l-auth-modal-title {
  font-family: 'Cormorant Garamond', serif;
  color: #dce2f8;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-shadow: none;
}

.l-auth-tabs {
  border-bottom-color: rgba(160,175,215,0.12);
}
.l-auth-tab {
  color: rgba(160,175,215,0.38);
  font-family: inherit;
  letter-spacing: 0.6px;
}
.l-auth-tab.active {
  color: #c4c9d8;
  border-bottom-color: #6e7490;
}

.l-auth-label {
  color: rgba(160,175,215,0.55);
  font-family: inherit;
  font-size: 10.5px;
  letter-spacing: 1px;
}
.l-auth-input {
  background: rgba(160,175,215,0.04);
  border-color: rgba(160,175,215,0.18);
  color: #dce2f8;
  font-family: inherit;
  font-size: 14px;
}
.l-auth-input::placeholder { color: rgba(160,175,215,0.2); }
.l-auth-input:focus {
  border-color: rgba(160,175,215,0.45);
  box-shadow: 0 0 0 3px rgba(160,175,215,0.07);
}

.l-auth-submit {
  background: rgba(160,175,215,0.1);
  border-color: rgba(160,175,215,0.3);
  color: #c4c9d8;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.6px;
}
.l-auth-submit:hover {
  background: rgba(160,175,215,0.17);
  border-color: rgba(200,215,255,0.5);
  box-shadow: 0 0 20px rgba(160,175,215,0.1);
  color: #e8ecf8;
}

.l-auth-note {
  color: rgba(160,175,215,0.28);
  font-family: inherit;
}
.l-auth-note a { color: rgba(160,175,215,0.5); }
.l-auth-note a:hover { color: #c4c9d8; }

.l-verify-desc {
  color: rgba(160,175,215,0.6);
  font-family: inherit;
}
.l-verify-em { color: #c4c9d8; font-style: normal; }

.l-otp-input {
  background: rgba(160,175,215,0.05);
  border-color: rgba(160,175,215,0.22);
  color: #dce2f8;
}
.l-otp-input:focus {
  border-color: rgba(160,175,215,0.5);
  box-shadow: 0 0 0 3px rgba(160,175,215,0.07);
}
.l-otp-input::placeholder { color: rgba(160,175,215,0.15); }

.l-otp-resend {
  color: rgba(160,175,215,0.35);
  font-family: inherit;
}
.l-otp-resend:hover { color: rgba(160,175,215,0.7); }

/* ============================================================
   VISUAL DEPTH IMPROVEMENTS
   ============================================================ */

/* ── Hero: atmospheric background glow ─────────────────── */
#lhero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 52% at 50% 36%,
      rgba(70,90,210,0.13) 0%,
      rgba(50,65,160,0.06) 50%,
      transparent 74%);
  pointer-events: none;
  z-index: 0;
}
.oracle-ring-wrap { position: relative; z-index: 1; }
.lhero-text { position: relative; z-index: 1; }
.lhero-scroll { z-index: 1; }

/* ── Hero: much stronger hexagram glow ──────────────────── */
.hero-ambient-glow {
  background: radial-gradient(ellipse at center,
    rgba(110,130,230,0.22) 0%,
    rgba(90,110,210,0.10) 40%,
    transparent 70%) !important;
}

/* ── Hero: bigger hexagram ──────────────────────────────── */
.oracle-ring-wrap { width: 240px; height: 240px; }
#hero-hex-svg { width: 240px; height: 240px; }

/* ── Hero: brighter yao lines ───────────────────────────── */
.yao .yl, .yao .yr { stroke: #7a84a8; }

/* ── Hero text: breathable spacing ─────────────────────── */
.lhero-text { gap: 0; margin-top: 4px; }
.lhero-tagline {
  color: #6068a0 !important;
  margin-top: 8px;
}
.lhero-arts {
  margin-top: 14px;
  margin-bottom: 2px;
}
.art-item { color: #8088b8 !important; }
.art-sep  { color: #3a3f58 !important; }
.lhero-desc {
  color: #5a6090 !important;
  margin-top: 10px;
  line-height: 1.85;
}

/* ── Services: breathing room + subtle separator ────────── */
#lservices {
  padding: 40px 18px 64px;
  border-top: 1px solid rgba(160,175,215,0.05);
}
#lservices::before {
  content: '';
  display: block;
  height: 1px;
  width: 48px;
  background: linear-gradient(90deg, transparent, rgba(160,175,215,0.25), transparent);
  margin: 0 auto 32px;
}

/* ── Cards: slightly more padding, border visibility ────── */
.lsoon-grid { gap: 12px; }
a.lcard-link { padding: 20px 22px; }
.lcard-link-title { font-size: 16px; }
.lcard-link-desc { font-size: 13px; color: #505670; }

/* ── Coming soon cards: just a touch more visible ───────── */
.lcard-soon {
  padding: 18px 16px;
  border-color: rgba(160,175,215,0.09) !important;
}
.soon-name { color: #4a5070 !important; }
.soon-desc { color: #363a52 !important; }

/* ============================================================
   TAB APP LAYOUT
   ============================================================ */

/* ── App Shell ───────────────────────────────────────────── */
.sg-app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

/* ── Tab Panels ──────────────────────────────────────────── */
.sg-tab-panel {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.sg-tab-panel.active {
  display: flex;
}

/* ── Header ──────────────────────────────────────────────── */
.sg-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: max(14px, calc(env(safe-area-inset-top) + 10px)) 20px 10px;
}

.sg-logo {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1px;
  background: linear-gradient(120deg, #8a93b5 0%, #dce2f8 35%, #f0f3ff 50%, #dce2f8 65%, #8a93b5 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sg-page-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 17px;
  font-weight: 600;
  color: #c4c9d8;
  letter-spacing: 0.5px;
}

/* ── Scrollable Content ──────────────────────────────────── */
.sg-main {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 14px 24px;
  min-height: 0;
}

/* ── Entry Card ──────────────────────────────────────────── */
.sg-entry-card {
  position: relative;
  width: 100%;
  /* Fill most of the screen — dominant element (10% smaller than full) */
  height: calc((100dvh - 180px) * 0.9);
  min-height: 288px;
  max-height: 522px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(201,162,39,0.22);
  box-shadow:
    0 0 0 1px rgba(201,162,39,0.05),
    0 16px 48px rgba(0,0,0,0.7);
  transition: transform 0.14s ease;
  margin-bottom: 18px;
  display: block;
  user-select: none;
  -webkit-user-select: none;
}
.sg-entry-card:active { transform: scale(0.984); }

.sg-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  pointer-events: none;
}

/* Dark overlay — deep bottom for text legibility */
.sg-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(4,  3, 12, 0.95) 0%,
    rgba(8,  5, 20, 0.90) 22%,
    rgba(14, 9, 30, 0.72) 40%,
    rgba(18,12, 38, 0.30) 58%,
    transparent 76%
  );
  pointer-events: none;
}

/* Content block: editorial layout */
.sg-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 18px 20px;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

/* Category label */
.sg-card-meta {
  font-family: 'Noto Serif SC', serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(205, 175, 72, 0.80);
  margin: 0 0 8px;
}

/* Large headline */
.sg-card-headline {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.22;
  color: rgba(255, 242, 188, 0.97);
  margin: 0 0 12px;
  letter-spacing: 0.3px;
}

/* Footer row: description left, button right */
.sg-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.sg-card-desc {
  font-family: 'Noto Serif SC', serif;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(215, 195, 130, 0.72);
  margin: 0;
  flex: 1;
}

/* Flat pill button with shimmer sweep */
@keyframes flat-btn-shimmer {
  0%        { left: -80%; opacity: 0; }
  8%        { opacity: 1; }
  55%, 100% { left: 130%; opacity: 0; }
}

.sg-card-flat-btn {
  flex-shrink: 0;
  padding: 10px 22px;
  background: rgba(214, 176, 44, 0.97);
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sg-card-flat-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -80%;
  width: 45%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  animation: flat-btn-shimmer 3.2s ease-in-out 0.8s infinite;
}

.sg-card-flat-btn-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #120d02;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

/* ── Discord Card ─────────────────────────────────────────── */
@keyframes discord-glow {
  0%, 100% {
    border-color: rgba(88,101,242,0.35);
    box-shadow: 0 0 0 0 rgba(88,101,242,0);
  }
  50% {
    border-color: rgba(88,101,242,0.7);
    box-shadow: 0 0 16px rgba(88,101,242,0.18), inset 0 1px 0 rgba(88,101,242,0.1);
  }
}
.sg-link-discord {
  border-color: rgba(88,101,242,0.3);
  animation: discord-glow 2.8s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.sg-link-discord .sg-link-icon { color: #7289da; }
.sg-link-discord .sg-link-title { color: #9da8f0; }
.sg-link-discord::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(88,101,242,0.08) 50%, transparent 65%);
  animation: discord-shimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes discord-shimmer {
  0%   { transform: translateX(-100%); }
  40%  { transform: translateX(200%); }
  100% { transform: translateX(200%); }
}

/* ── Palm Reading Entry Card ─────────────────────────────── */
.sg-palm-card {
  position: relative;
  display: block;
  width: 100%;
  height: calc((100dvh - 180px) * 0.9);
  min-height: 288px;
  max-height: 522px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(185, 152, 180, 0.22);
  box-shadow:
    0 0 0 1px rgba(185, 152, 180, 0.06),
    0 12px 40px rgba(0,0,0,0.65);
  transition: transform 0.14s ease;
  margin-bottom: 18px;
  user-select: none;
  -webkit-user-select: none;
}
.sg-palm-card:active { transform: scale(0.984); }

.sg-palm-card .sg-card-img {
  object-position: center 20%;
}

.sg-palm-overlay {
  background: linear-gradient(
    to top,
    rgba(6,  2, 14, 0.97) 0%,
    rgba(10, 4, 22, 0.85) 25%,
    rgba(14, 6, 28, 0.50) 48%,
    rgba(10, 4, 20, 0.12) 68%,
    transparent 85%
  ) !important;
}

.sg-palm-meta {
  color: rgba(195, 162, 190, 0.82) !important;
}

.sg-palm-headline {
  color: rgba(238, 225, 235, 0.97) !important;
  font-size: 24px !important;
}

.sg-palm-desc {
  color: rgba(185, 155, 180, 0.70) !important;
}

.sg-palm-flat-btn {
  flex-shrink: 0;
  padding: 10px 22px;
  background: rgba(185, 152, 180, 0.92);
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sg-palm-flat-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -80%;
  width: 45%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.40),
    transparent
  );
  animation: flat-btn-shimmer 3.4s ease-in-out 1.2s infinite;
}

.sg-palm-btn-text {
  position: relative;
  z-index: 1;
  color: #1a0a1c !important;
}

/* ── Daily Fortune Card ──────────────────────────────────── */
.sg-fortune-card {
  position: relative;
  width: 100%;
  height: calc((100dvh - 180px) * 0.38);
  min-height: 160px;
  max-height: 240px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(
    155deg,
    rgba(8, 6, 22, 0.97) 0%,
    rgba(20, 12, 48, 0.98) 45%,
    rgba(28, 18, 58, 0.97) 70%,
    rgba(14, 8, 32, 0.98) 100%
  );
  border: 1px solid rgba(130,148,200,0.18);
  box-shadow:
    0 0 0 1px rgba(130,148,200,0.05),
    0 16px 48px rgba(0,0,0,0.70);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 24px 30px;
  gap: 0;
}

/* Faint star-field texture */
.sg-fortune-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 18% 22%, rgba(210,220,248,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 15%, rgba(205,218,245,0.28) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 68%, rgba(215,225,250,0.20) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 78%, rgba(205,218,245,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 85%, rgba(210,220,248,0.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 55%, rgba(200,215,245,0.20) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 42%, rgba(210,220,248,0.22) 0%, transparent 100%);
  pointer-events: none;
}

/* Top ambient glow */
.sg-fortune-card::after {
  content: '';
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 120px;
  background: radial-gradient(ellipse, rgba(120,140,205,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.sg-fortune-icon {
  color: rgba(148,165,220,0.72);
  margin-bottom: 14px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.sg-fortune-label {
  font-family: 'Noto Serif SC', serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(135,152,210,0.60);
  margin-bottom: 22px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.sg-fortune-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.6;
  color: rgba(218,224,242,0.90);
  text-align: center;
  letter-spacing: 0.2px;
  max-width: 280px;
  margin: 0 0 24px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.sg-fortune-day {
  font-family: 'Noto Serif SC', serif;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: rgba(120,138,192,0.45);
  text-transform: uppercase;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ── Bottom Navigation ───────────────────────────────────── */
.sg-bottom-nav {
  flex-shrink: 0;
  height: calc(60px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(5,6,12,0.97);
  border-top: 1px solid rgba(160,175,215,0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  z-index: 50;
}

.sg-nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: rgba(196,201,216,0.48);
  font-family: 'Noto Serif SC', serif;
  font-size: 10px;
  letter-spacing: 0.4px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.sg-nav-tab.active {
  color: rgba(192,207,240,0.92);
  text-shadow: 0 0 10px rgba(175,195,235,0.28);
}
.sg-nav-tab svg { transition: opacity 0.15s; }

/* ── Support: Link Cards ─────────────────────────────────── */
.sg-link-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.sg-link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px;
  background: rgba(10,11,22,0.85);
  border: 1px solid rgba(160,175,215,0.09);
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.sg-link-card:active {
  background: rgba(14,16,30,0.95);
  border-color: rgba(160,175,215,0.18);
}

.sg-link-icon {
  flex-shrink: 0;
  color: rgba(160,175,215,0.38);
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sg-link-body { flex: 1; }

.sg-link-title {
  font-size: 14px;
  font-weight: 600;
  color: #7a82a0;
  letter-spacing: 0.2px;
  margin-bottom: 2px;
  font-family: 'Noto Serif SC', serif;
}

.sg-link-desc {
  font-size: 12px;
  color: #38404e;
  font-family: 'Noto Serif SC', serif;
}

.sg-link-arrow {
  flex-shrink: 0;
  color: rgba(160,175,215,0.2);
}

.sg-disclaimer {
  text-align: center;
  font-size: 10px;
  color: #1e2230;
  letter-spacing: 0.2px;
  margin-top: 28px;
  line-height: 1.7;
  font-family: 'Noto Serif SC', serif;
}

/* ── Account: Auth Card ──────────────────────────────────── */
.sg-auth-card {
  background: rgba(9,10,20,0.8);
  border: 1px solid rgba(160,175,215,0.1);
  border-radius: 14px;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 4px;
}

/* ── Account: Logged-in User Row ─────────────────────────── */
.sg-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0 4px;
}

.sg-user-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(201,162,39,0.1);
  border: 1px solid rgba(201,162,39,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #c9a227;
  font-family: 'Noto Serif SC', serif;
  flex-shrink: 0;
}

.sg-user-email-text {
  font-size: 13px;
  color: rgba(196,201,216,0.55);
  word-break: break-all;
  font-family: 'Noto Serif SC', serif;
}

.sg-logout-full { width: 100%; margin-top: 6px; }

/* ══════════════════════════════════════════════════════════
   DESKTOP LAYOUT  ·  min-width: 900px
   Mobile styles above are untouched — these only override
   ══════════════════════════════════════════════════════════ */

/* Hidden on mobile by default */
.sg-top-nav        { display: none; }
.sg-desktop-overlay { display: none; }

@media (min-width: 900px) {

  /* ── App shell: leave fixed-full-screen, allow internal scroll ── */
  .sg-app {
    position: relative;
    inset: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  /* ── Top Nav ─────────────────────────────────────────────────── */
  .sg-top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 62px;
    padding: 0 40px;
    background: rgba(5, 6, 13, 0.88);
    border-bottom: 1px solid rgba(160, 175, 215, 0.07);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    position: sticky;
    top: 0;
    z-index: 50;
    flex-shrink: 0;
  }

  .sg-top-nav-logo {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    background: linear-gradient(120deg, #8a93b5 0%, #dce2f8 35%, #f0f3ff 50%, #dce2f8 65%, #8a93b5 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    cursor: default;
    user-select: none;
  }

  .sg-top-nav-actions { display: flex; align-items: center; gap: 8px; }

  .sg-top-nav-btn {
    padding: 7px 18px;
    background: transparent;
    border: 1px solid rgba(160, 175, 215, 0.14);
    border-radius: 8px;
    color: rgba(180, 190, 220, 0.68);
    font-family: 'Noto Serif SC', serif;
    font-size: 13px;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
  }
  .sg-top-nav-btn:hover {
    border-color: rgba(175, 192, 235, 0.38);
    color: rgba(200, 212, 238, 0.90);
    background: rgba(175, 192, 235, 0.06);
  }

  /* ── Hide mobile chrome ──────────────────────────────────────── */
  .sg-bottom-nav          { display: none; }
  #tab-home .sg-header    { display: none; }

  /* Support / Account panels hidden (shown via modal overlay) */
  #tab-support,
  #tab-account { display: none !important; }

  /* ── Home tab always visible ─────────────────────────────────── */
  #tab-home {
    display: flex !important;
    flex-direction: column;
    flex: none;
    overflow: visible;
    min-height: 0;
  }

  /* ── Two-column grid ─────────────────────────────────────────── */
  #tab-home .sg-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 36px 40px 56px;
    overflow: visible;
    flex: none;
    min-height: 0;
  }

  /* ── Cards: fixed height on desktop ─────────────────────────── */
  .sg-entry-card,
  .sg-palm-card {
    height: 480px;
    min-height: unset;
    max-height: unset;
    margin-bottom: 0;
  }

  /* Fortune card spans both columns on desktop, compact */
  .sg-fortune-card {
    grid-column: 1 / -1;
    height: 180px;
    min-height: unset;
    max-height: unset;
    margin-bottom: 0;
  }

  .sg-card-headline { font-size: 24px; }

  /* Hover lift on desktop (has mouse) */
  .sg-entry-card,
  .sg-palm-card {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }
  .sg-entry-card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 0 0 1px rgba(201,162,39,0.12),
      0 24px 60px rgba(0,0,0,0.75);
  }
  .sg-palm-card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 0 0 1px rgba(185,152,180,0.14),
      0 24px 60px rgba(0,0,0,0.75);
  }
  .sg-entry-card:active,
  .sg-palm-card:active { transform: scale(0.99); }

  /* ── Desktop Modal Overlay ───────────────────────────────────── */
  .sg-desktop-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.20s ease;
  }
  .sg-desktop-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  .sg-desktop-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .sg-desktop-overlay-panel {
    position: relative;
    z-index: 1;
    background: rgba(8, 9, 22, 0.98);
    border: 1px solid rgba(160, 175, 215, 0.12);
    border-radius: 18px;
    width: 460px;
    max-height: 82dvh;
    overflow-y: auto;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.80);
    transform: translateY(10px);
    transition: transform 0.22s ease;
  }
  .sg-desktop-overlay.open .sg-desktop-overlay-panel {
    transform: translateY(0);
  }

  .sg-desktop-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 0;
    margin-bottom: 16px;
  }

  .sg-desktop-overlay-title {
    font-family: 'Noto Serif SC', serif;
    font-size: 17px;
    font-weight: 600;
    color: #c4c9d8;
    letter-spacing: 0.5px;
  }

  .sg-desktop-overlay-close {
    width: 30px;
    height: 30px;
    background: rgba(160, 175, 215, 0.08);
    border: none;
    border-radius: 8px;
    color: rgba(160, 175, 215, 0.55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    flex-shrink: 0;
  }
  .sg-desktop-overlay-close:hover { background: rgba(160, 175, 215, 0.16); }

  #sg-desktop-overlay-body {
    padding: 0 24px 28px;
  }

  /* Strip mobile padding from content moved into overlay */
  #sg-desktop-overlay-body .sg-main {
    display: block;
    padding: 0;
    overflow: visible;
    min-height: 0;
  }
}