/* ═══════════════════════════════════════════
   Horostore — Design System
   Mobile-first, Dark Mode, Inter + Thai Typography
   ═══════════════════════════════════════════ */

/* ── CSS Custom Properties ──────────────── */
:root {
    --bg: #FFFFFF;
    --bg-secondary: #F5F5F7;
    --bg-card: #FFFFFF;
    --text-primary: #1D1D1F;
    --text-secondary: #86868B;
    --text-tertiary: #AEAEB2;
    --accent: #0071E3;
    --accent-hover: #0077ED;
    --accent-dim: rgba(0, 113, 227, 0.10);
    --moon-gold: #C4A35A;
    --good: #34C759;
    --bad: #FF3B30;
    --moderate: #FF9500;
    --neutral: #8E8E93;
    --divider: #D2D2D7;
    --shadow: rgba(0, 0, 0, 0.04);
    --shadow-md: rgba(0, 0, 0, 0.08);
    --card-radius: 16px;
    --card-bg: var(--bg-card);
    --border: var(--divider);
    --hover-bg: rgba(0,0,0,0.06);
    --radius-sm: 10px;
    --radius-xs: 8px;
    --font: 'Inter', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    --radar-grid: rgba(0,0,0,0.09);
    --radar-axis: rgba(0,0,0,0.12);
    --radar-dot: #555555;
    --radar-label: #86868B;
    --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

    /* Tradition accent colors */
    --tradition-thai: #C4A35A;
    --tradition-lanna: #8B5E3C;
    --tradition-chinese: #DC2626;
    --tradition-hijri: #059669;
    --tradition-hebrew: #2563EB;
    --tradition-universal: #6B7280;

    /* Spacing scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Typography scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #000000;
        --bg-secondary: #1C1C1E;
        --bg-card: #1C1C1E;
        --text-primary: #F5F5F7;
        --text-secondary: #98989D;
        --text-tertiary: #636366;
        --accent: #0A84FF;
        --accent-hover: #409CFF;
        --accent-dim: rgba(10, 132, 255, 0.12);
        --moon-gold: #D4AF37;
        --good: #30D158;
        --bad: #FF453A;
        --moderate: #FF9F0A;
        --neutral: #98989D;
        --divider: #38383A;
        --shadow: rgba(0, 0, 0, 0.3);
        --shadow-md: rgba(0, 0, 0, 0.5);

        --radar-grid: rgba(255,255,255,0.07);
        --radar-axis: rgba(255,255,255,0.10);
        --radar-dot: #ffffff;
        --radar-label: #98989D;
        --tradition-thai: #D4AF37;
        --tradition-lanna: #A67C52;
        --tradition-chinese: #EF4444;
        --tradition-hijri: #34D399;
        --tradition-hebrew: #60A5FA;
        --tradition-universal: #9CA3AF;
    }
}


html[data-theme=light] {
    --bg: #FFFFFF;
    --bg-secondary: #F5F5F7;
    --bg-card: #FFFFFF;
    --text-primary: #1D1D1F;
    --text-secondary: #86868B;
    --text-tertiary: #AEAEB2;
    --accent: #0071E3;
    --accent-hover: #0077ED;
    --accent-dim: rgba(0, 113, 227, 0.10);
    --moon-gold: #C4A35A;
    --good: #34C759;
    --bad: #FF3B30;
    --moderate: #FF9500;
    --neutral: #8E8E93;
    --divider: #D2D2D7;
    --shadow: rgba(0,0,0,0.04);
    --shadow-md: rgba(0,0,0,0.08);
    --radar-grid: rgba(0,0,0,0.09);
    --radar-axis: rgba(0,0,0,0.12);
    --radar-dot: #555555;
    --radar-label: #86868B;
}
html[data-theme=dark] {
    --bg: #000000;
    --bg-secondary: #1C1C1E;
    --bg-card: #1C1C1E;
    --text-primary: #F5F5F7;
    --text-secondary: #98989D;
    --text-tertiary: #636366;
    --accent: #0A84FF;
    --accent-hover: #409CFF;
    --accent-dim: rgba(10, 132, 255, 0.12);
    --moon-gold: #D4AF37;
    --good: #30D158;
    --bad: #FF453A;
    --moderate: #FF9F0A;
    --neutral: #98989D;
    --divider: #38383A;
    --radar-grid: rgba(255,255,255,0.07);
    --radar-axis: rgba(255,255,255,0.10);
    --radar-dot: #ffffff;
    --radar-label: #98989D;
    --shadow: rgba(0,0,0,0.3);
    --shadow-md: rgba(0,0,0,0.5);
}

[x-cloak] { display: none !important; }
/* ── Reset ──────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }


/* ── Card Title — global utility class ──────────────────────────────────────
   All card headings use this. Individual component classes override only
   size / margin / color, never font-family or font-weight.
   Excludes decorative/editorial titles (dsg-legend-title = Cormorant).
   ─────────────────────────────────────────────────────────────────────────── */
.card-title,
.cw-title,
.ws-title,
.prof-card-title,
.prof-acc-title,
.profile-card-title,
.t0-title,
.td-title,
.ts-cards-title,
.reading-portal-title,
.reading-portal-card-title,
.narr-drawer-title,
.wg-title,
.ur-tradition-title,
.ks-tradition-title,
.cs-tradition-title,
.ur-feat-title,
.ds-title,
.hd-ur-locked-title,
.hd-ws-locked-title {
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px !important;
  letter-spacing: -0.015em;
}

/* ── Layout ─────────────────────────────── */
.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* ── Header ─────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 0.5px solid var(--divider);
    padding: 12px var(--space-md);
}

@supports (backdrop-filter: blur(20px)) {
    .site-header {
        background: color-mix(in srgb, var(--bg) 72%, transparent);
    }
}

.header-inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.header-brand-icon {
    font-size: 1.3rem;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--text-sm);
}

.header-nav a {
    color: var(--text-secondary);
    font-weight: 500;
}

.header-nav a.active { color: var(--accent); }
/* ── Right side group (pill + burger) ─────────────────────────────── */
.header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Nav links moved to drawer — hidden on all screen sizes */
.header-nav > a,
.lang-switcher {
    display: none;
}

/* Language Switcher */
.lang-switcher {
    position: relative;
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1.5px solid var(--divider);
    border-radius: 20px;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.15s;
}

.lang-btn:hover {
    border-color: var(--text-secondary);
}

.lang-btn svg {
    width: 14px;
    height: 14px;
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-card);
    border: 0.5px solid var(--divider);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 24px var(--shadow-md);
    min-width: 140px;
    padding: 4px;
    z-index: 200;
}

.lang-dropdown a {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: background 0.1s;
}

.lang-dropdown a:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.lang-dropdown a.current {
    color: var(--accent);
}

/* ── Hero Section ───────────────────────── */
.hero {
    text-align: center;
    padding: var(--space-xl) 0 var(--space-lg);
    position: relative;
    overflow: hidden;
}

/* Cosmic starfield background */
.hero::before {
    content: '';
    position: absolute;
    inset: -20px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(100, 80, 180, 0.18) 0%, transparent 65%),
        radial-gradient(ellipse at 80% 100%, rgba(60, 40, 120, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 80%, rgba(180, 130, 30, 0.08) 0%, transparent 45%);
    pointer-events: none;
    z-index: 0;
}

/* CSS starfield — tiny white dots via box-shadow */
.hero::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    top: 8%;
    left: 15%;
    box-shadow:
        40px 12px 0 0 rgba(255,255,255,0.5),
        90px 40px 0 0 rgba(255,255,255,0.3),
        150px 8px 0 0 rgba(255,255,255,0.6),
        220px 25px 0 0 rgba(255,255,255,0.4),
        280px 10px 0 0 rgba(255,255,255,0.5),
        330px 45px 0 0 rgba(255,255,255,0.3),
        380px 15px 0 0 rgba(255,255,255,0.6),
        430px 35px 0 0 rgba(255,255,255,0.4),
        500px 5px 0 0 rgba(255,255,255,0.5),
        560px 28px 0 0 rgba(255,255,255,0.3),
        610px 18px 0 0 rgba(255,255,255,0.4),
        -30px 55px 0 0 rgba(255,255,255,0.3),
        70px 80px 0 0 rgba(255,255,255,0.4),
        180px 65px 0 0 rgba(255,255,255,0.3),
        260px 90px 0 0 rgba(255,255,255,0.5),
        350px 70px 0 0 rgba(255,255,255,0.3),
        460px 85px 0 0 rgba(255,255,255,0.4),
        520px 60px 0 0 rgba(255,255,255,0.3);
    pointer-events: none;
    z-index: 0;
    animation: starTwinkle 6s ease-in-out infinite alternate;
}

@keyframes starTwinkle {
    0%   { opacity: 0.6; }
    50%  { opacity: 1; }
    100% { opacity: 0.7; }
}

.hero > * { position: relative; z-index: 1; }

.hero-date {
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-xs);
    /* Gradient gold→white title */
    background: linear-gradient(135deg, #E8C97A 0%, #F5E6B0 45%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Dark mode: keep gradient; light mode: solid dark text */
@media (prefers-color-scheme: light) {
    .hero-date {
        background: linear-gradient(135deg, #A07830 0%, #C4A35A 60%, #1D1D1F 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}
html[data-theme=light] .hero-date {
    background: linear-gradient(135deg, #A07830 0%, #C4A35A 60%, #1D1D1F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
html[data-theme=dark] .hero-date {
    background: linear-gradient(135deg, #E8C97A 0%, #F5E6B0 45%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-date-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── Premium Moon Component ─────────────── */
.hero-moon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    margin: var(--space-md) auto 0;
    max-width: 320px;
}

/* The SVG moon orb itself */
.moon-orb-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Outer glow ring — animated pulse */
.moon-orb-halo {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.22) 0%, rgba(212, 175, 55, 0.08) 50%, transparent 70%);
    animation: moonHaloPulse 3.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes moonHaloPulse {
    0%, 100% { transform: scale(1);   opacity: 0.8; }
    50%       { transform: scale(1.12); opacity: 1; }
}

/* Moon SVG floating animation */
.moon-svg {
    display: block;
    animation: moonFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.55)) drop-shadow(0 0 40px rgba(212, 175, 55, 0.25));
    transition: filter 0.4s;
}
.moon-svg:hover {
    filter: drop-shadow(0 0 28px rgba(212, 175, 55, 0.85)) drop-shadow(0 0 60px rgba(212, 175, 55, 0.4));
}

@keyframes moonFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
}

/* Glass info card below moon */
.hero-moon-glass {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 14px;
    min-width: 220px;
}

html[data-theme=light] .hero-moon-glass,
@media (prefers-color-scheme: light) {
    .hero-moon-glass {
        background: rgba(255, 248, 220, 0.5);
        border-color: rgba(180, 130, 30, 0.25);
    }
}

html[data-theme=light] .hero-moon-glass {
    background: rgba(255, 248, 220, 0.5);
    border-color: rgba(180, 130, 30, 0.25);
}

.hero-moon-phase {
    font-size: var(--text-base);
    font-weight: 700;
    background: linear-gradient(135deg, #D4AF37, #FFF8DC);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.02em;
}

.hero-moon-detail {
    font-size: 0.75rem;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
}

/* Gold illumination bar */
.moon-illumination-bar {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}
.moon-illumination-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #8B6914, #D4AF37, #FFF8DC);
    transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Score Circle (Homepage) ────────────── */
.score-circle-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: var(--space-lg) auto;
}

.score-circle {
    position: relative;
    width: 164px;
    height: 164px;
}

/* Outer quality glow ring behind SVG */
.score-circle::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.6s ease 0.8s;
    pointer-events: none;
}
.score-circle.glow-good::before   { box-shadow: 0 0 32px 8px rgba(52, 199, 89, 0.3);  opacity: 1; }
.score-circle.glow-bad::before    { box-shadow: 0 0 32px 8px rgba(255, 59, 48, 0.3);   opacity: 1; }
.score-circle.glow-moderate::before { box-shadow: 0 0 32px 8px rgba(255, 149, 0, 0.3); opacity: 1; }
.score-circle.glow-neutral::before  { box-shadow: 0 0 20px 6px rgba(142, 142, 147, 0.2); opacity: 1; }

.score-circle svg {
    transform: rotate(-90deg);
    width: 164px;
    height: 164px;
}

.score-circle-bg {
    fill: none;
    stroke: var(--bg-secondary);
    stroke-width: 8;
}

.score-circle-fill {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    /* Arc draws in on load */
    animation: drawArc 1.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

@keyframes drawArc {
    from { stroke-dashoffset: var(--arc-circumference, 1030); opacity: 0.4; }
    to   { stroke-dashoffset: var(--arc-offset, 0); opacity: 1; }
}

.score-circle-fill.good { stroke: var(--good); }
.score-circle-fill.bad { stroke: var(--bad); }
.score-circle-fill.moderate { stroke: var(--moderate); }
.score-circle-fill.neutral { stroke: var(--neutral); }

.score-circle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.score-circle-value {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    /* Gradient color matching quality set via inline style */
}
.score-circle-value.good     { background: linear-gradient(135deg, #30D158, #34C759); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.score-circle-value.bad      { background: linear-gradient(135deg, #FF6B6B, #FF3B30); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.score-circle-value.moderate { background: linear-gradient(135deg, #FFB347, #FF9500); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.score-circle-value.neutral  { color: var(--text-secondary); }

.score-circle-max {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.score-circle-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-sm);
}

/* ── Scroll-entrance animation (sections) ── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* ── Quick Glance Grid (Homepage) ───────── */
.glance-section {
    margin: var(--space-xl) 0;
}

.section-title {
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-md);
}

.section-subtitle {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: -12px;
    margin-bottom: var(--space-md);
}

.glance-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.glance-card {
    background: var(--bg-card);
    border: 0.5px solid var(--divider);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    transition: transform 0.15s;
}

.glance-card-label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.glance-card-value {
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
}

.glance-card-detail {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Color swatch for lucky color card */
.color-swatch {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--divider);
    vertical-align: middle;
    margin-right: var(--space-sm);
}

/* ── Calendar Strip (Homepage) ──────────── */
.calendar-strip {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    padding: var(--space-sm) 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.calendar-strip::-webkit-scrollbar { display: none; }

.calendar-card {
    flex: 0 0 auto;
    min-width: 120px;
    background: var(--bg-card);
    border: 0.5px solid var(--divider);
    border-radius: var(--radius-sm);
    padding: 12px var(--space-md);
    text-align: center;
}

.calendar-card-tradition {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-xs);
}

.calendar-card-value {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.3;
}

.calendar-card-badge {
    display: inline-block;
    margin-top: var(--space-xs);
    padding: 1px 8px;
    background: color-mix(in srgb, var(--tradition-thai) 15%, transparent);
    color: var(--tradition-thai);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

/* ── Deep Dive Preview Cards ────────────── */
.deep-dive-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.deep-dive-card {
    background: var(--bg-card);
    border: 0.5px solid var(--divider);
    border-radius: var(--radius-sm);
    padding: 12px var(--space-md);
    border-left: 3px solid var(--tradition-thai);
}

.deep-dive-card-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.deep-dive-card-value {
    font-size: var(--text-sm);
    font-weight: 600;
}

/* ── Tradition Showcase Cards ───────────── */
.tradition-showcase {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.showcase-card {
    background: var(--bg-card);
    border: 0.5px solid var(--divider);
    border-radius: var(--card-radius);
    overflow: hidden;
}

.showcase-card-header {
    padding: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
}

.showcase-card-header .tradition-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.showcase-card-body {
    padding: 0 var(--space-md) var(--space-md);
}

.showcase-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 0.5px solid var(--divider);
    font-size: var(--text-sm);
}

.showcase-item:last-child {
    border-bottom: none;
}

.showcase-item-label {
    color: var(--text-secondary);
}

.showcase-item-value {
    font-weight: 600;
    text-align: right;
}

/* ── CTA Section (Homepage) ─────────────── */
.cta-section {
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
    margin: var(--space-xl) calc(var(--space-md) * -1);
    background: var(--bg-secondary);
    border-radius: var(--card-radius);
}

.cta-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-sm);
}

.cta-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.cta-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.cta-stat {
    font-weight: 600;
    color: var(--text-primary);
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 14px 32px;
    background: var(--accent);
    color: #FFFFFF;
    border: none;
    border-radius: 28px;
    font-size: var(--text-base);
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.cta-btn:hover {
    background: var(--accent-hover);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── FAQ Accordion (Homepage) ───────────── */
.faq-section {
    margin: var(--space-xl) 0;
}

.faq-item {
    border-bottom: 0.5px solid var(--divider);
}

.faq-item:first-child {
    border-top: 0.5px solid var(--divider);
}

.faq-item summary {
    padding: var(--space-md) 0;
    font-weight: 600;
    font-size: var(--text-base);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: '+';
    font-size: var(--text-xl);
    font-weight: 300;
    color: var(--text-tertiary);
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: var(--space-md);
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 0 var(--space-md);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ── Language Banner ────────────────────── */
.lang-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-top: 0.5px solid var(--divider);
    box-shadow: 0 -2px 16px var(--shadow-md);
    padding: 12px var(--space-md);
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    font-size: var(--text-sm);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
}

.lang-banner.visible {
    transform: translateY(0);
}

.lang-banner-text {
    color: var(--text-secondary);
}

.lang-banner-btn {
    padding: 6px 16px;
    background: var(--accent);
    color: #FFFFFF;
    border: none;
    border-radius: 16px;
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    text-decoration: none;
}

.lang-banner-dismiss {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-family: var(--font);
    cursor: pointer;
    padding: 4px;
}

/* ── Filter Controls ────────────────────── */
.controls {
    padding: var(--space-md) 0;
    position: sticky;
    top: 49px;
    z-index: 50;
    background: var(--bg);
}

@supports (backdrop-filter: blur(20px)) {
    .controls {
        background: color-mix(in srgb, var(--bg) 88%, transparent);
        backdrop-filter: saturate(180%) blur(12px);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
    }
}

.filter-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: var(--space-sm);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.filter-row::-webkit-scrollbar { display: none; }

.filter-pill {
    flex-shrink: 0;
    padding: 6px 14px;
    border: 1.5px solid var(--divider);
    border-radius: 20px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.filter-pill:hover {
    border-color: var(--text-secondary);
}

.filter-pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.filter-pill .pill-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

.controls-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.controls-meta a {
    font-size: var(--text-xs);
}

.toggle-all-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: var(--text-xs);
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    padding: 2px 0;
}

/* ── Tradition Group Header ─────────────── */
.tradition-group {
    margin-bottom: var(--space-sm);
}

.tradition-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 20px 0 var(--space-sm);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.tradition-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--divider);
}

.tradition-count {
    font-weight: 400;
    color: var(--text-tertiary);
}

/* ── Methodology Card ───────────────────── */
.method-card {
    background: var(--bg-card);
    border-radius: var(--card-radius);
    box-shadow: 0 1px 8px var(--shadow);
    border: 0.5px solid var(--divider);
    margin-bottom: 12px;
    overflow: hidden;
    border-top: 3px solid var(--tradition-thai);
    transition: opacity 0.2s, transform 0.2s;
}

.method-card[data-tradition="thai"]     { border-top-color: var(--tradition-thai); }
.method-card[data-tradition="lanna"]    { border-top-color: var(--tradition-lanna); }
.method-card[data-tradition="chinese"]  { border-top-color: var(--tradition-chinese); }
.method-card[data-tradition="hijri"]    { border-top-color: var(--tradition-hijri); }
.method-card[data-tradition="hebrew"]   { border-top-color: var(--tradition-hebrew); }
.method-card[data-tradition="universal"]{ border-top-color: var(--tradition-universal); }

.method-card.hidden-card {
    display: none;
}

/* Card Header */
.method-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px var(--space-md) 10px;
}

.method-toggle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--divider);
    background: transparent;
    color: var(--text-tertiary);
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

.method-toggle.on {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.method-name-th {
    font-size: 0.95rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
}

.method-name-en {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card Primary Value */
.method-primary {
    padding: 0 var(--space-md) 12px;
}

.method-primary-value {
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.3;
}

.method-primary-label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* Quality Badge */
.quality-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: var(--text-xs);
    font-weight: 600;
    margin-left: var(--space-sm);
    vertical-align: middle;
}

.quality-good {
    background: color-mix(in srgb, var(--good) 15%, transparent);
    color: var(--good);
}

.quality-bad {
    background: color-mix(in srgb, var(--bad) 15%, transparent);
    color: var(--bad);
}

.quality-moderate {
    background: color-mix(in srgb, var(--moderate) 15%, transparent);
    color: var(--moderate);
}

.quality-neutral {
    background: color-mix(in srgb, var(--neutral) 15%, transparent);
    color: var(--neutral);
}

/* Score Bar */
.score-bar-wrap {
    padding: 0 var(--space-md) 12px;
}

.score-label {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin-bottom: var(--space-xs);
    display: flex;
    justify-content: space-between;
}

.score-bar {
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
}

.score-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease-out;
}

.score-bar-fill.score-good    { background: var(--good); }
.score-bar-fill.score-bad     { background: var(--bad); }
.score-bar-fill.score-moderate{ background: var(--moderate); }
.score-bar-fill.score-neutral { background: var(--accent); }

/* Details Section */
.method-details-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px var(--space-md);
    border-top: 0.5px solid var(--divider);
    background: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    width: 100%;
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--accent);
    text-align: left;
}

.method-details-toggle .arrow {
    transition: transform 0.2s;
    font-size: 0.65rem;
}

.method-details-toggle.open .arrow {
    transform: rotate(90deg);
}

.method-details {
    padding: 0 var(--space-md) 14px;
    display: none;
}

.method-details.open {
    display: block;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6px 0;
    border-bottom: 0.5px solid var(--divider);
    gap: 12px;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    max-width: 45%;
}

.detail-value {
    font-size: 0.8rem;
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

/* Array/list values as pills */
.detail-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: flex-end;
}

.detail-pill {
    display: inline-block;
    padding: 1px 8px;
    background: var(--bg-secondary);
    border-radius: 10px;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* Boolean values */
.bool-yes { color: var(--good); }
.bool-no  { color: var(--bad); }

/* ── Birth Day Selector (thai-mahataksa) ── */
.birth-day-selector {
    padding: var(--space-sm) var(--space-md) 14px;
    border-top: 0.5px solid var(--divider);
}

.birth-day-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.birth-day-grid {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.birth-day-btn {
    padding: 5px 10px;
    border: 1.5px solid var(--divider);
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.15s;
}

.birth-day-btn:hover {
    border-color: var(--accent);
}

.birth-day-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.birth-day-loading {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    padding: var(--space-xs) 0;
}

/* ── Footer ─────────────────────────────── */
.site-footer {
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.site-footer a {
    color: var(--text-secondary);
}

.footer-inner {
    max-width: 720px;
    margin: 0 auto;
}

.footer-brand {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.footer-tagline {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    font-size: var(--text-sm);
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.footer-links a:hover {
    color: var(--text-primary);
}

.powered-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 4px 12px;
    background: var(--bg-secondary);
    border-radius: 20px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

/* ── Error State ────────────────────────── */
.error-box {
    text-align: center;
    padding: 40px 20px;
    background: color-mix(in srgb, var(--bad) 8%, transparent);
    border-radius: var(--card-radius);
    margin: 20px 0;
}

.error-box h2 {
    color: var(--bad);
    margin-bottom: var(--space-sm);
}

/* ── Animations ─────────────────────────── */
.fade-in {
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Staggered card animation */
.method-card { animation: cardIn 0.35s ease-out backwards; }
.method-card:nth-child(1)  { animation-delay: 0.05s; }
.method-card:nth-child(2)  { animation-delay: 0.08s; }
.method-card:nth-child(3)  { animation-delay: 0.11s; }
.method-card:nth-child(4)  { animation-delay: 0.14s; }
.method-card:nth-child(5)  { animation-delay: 0.17s; }
.method-card:nth-child(6)  { animation-delay: 0.20s; }

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

/* ── Responsive ─────────────────────────── */
@media (min-width: 768px) {
    .container { padding: 0 var(--space-xl); }
    .hero-date { font-size: 1.75rem; }
    .hero-moon { max-width: 420px; }
    .method-card-header { padding: var(--space-md) 20px 12px; }
    .method-primary { padding: 0 20px 14px; }
    .score-bar-wrap { padding: 0 20px 14px; }
    .method-details-toggle { padding: 12px 20px; }
    .method-details { padding: 0 20px var(--space-md); }
    .birth-day-selector { padding: 10px 20px var(--space-md); }

    /* Homepage grid improvements */
    .glance-grid { grid-template-columns: repeat(3, 1fr); }
    .deep-dive-grid { grid-template-columns: repeat(3, 1fr); }
    .tradition-showcase { grid-template-columns: repeat(2, 1fr); }
    .cta-section { margin: var(--space-xl) 0; }
}

@media (min-width: 1024px) {
    .header-inner {
        max-width: 960px;
    }
    .container {
        max-width: 960px;
    }
    /* 2-col methodology cards — today page */
    .tradition-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
        align-items: start;
    }
    .tradition-group > .tradition-header {
        grid-column: 1 / -1;
    }
    .tradition-group > .method-card {
        margin-bottom: 0;
    }
}

@media (min-width: 1280px) {
    .header-inner {
        max-width: 1100px;
    }
    .container {
        max-width: 1100px;
    }
    .hero-obs-inner {
        max-width: 1100px;
    }
}

/* ── Date Picker ─────────────────────────── */
.date-picker-wrap {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    position: relative;
    margin-top: var(--space-sm);
    flex-wrap: wrap;
    justify-content: center;
}

.date-picker-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--divider);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    padding: 0;
    flex-shrink: 0;
}

.date-picker-trigger:hover {
    background: var(--bg-secondary);
    border-color: var(--accent);
    color: var(--accent);
}

.date-picker-trigger svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.date-picker-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--divider);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 24px var(--shadow-md);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    z-index: 200;
    white-space: nowrap;
    min-width: 260px;
}

.date-picker-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--divider);
    border-radius: var(--radius-xs);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: var(--font);
    outline: none;
    transition: border-color 0.15s;
    min-width: 0;
}

.date-picker-input:focus {
    border-color: var(--accent);
}

.date-picker-btn {
    padding: 6px 14px;
    border-radius: var(--radius-xs);
    font-size: var(--text-sm);
    font-family: var(--font);
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.15s, opacity 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.date-picker-btn:not(.secondary):not(.today-btn) {
    background: var(--accent);
    color: #fff;
}

.date-picker-btn:not(.secondary):not(.today-btn):hover {
    background: var(--accent-hover);
}

.date-picker-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--divider);
}

.date-picker-btn.secondary:hover {
    background: var(--divider);
}

.date-picker-btn.today-btn {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 5px 12px;
    font-size: var(--text-xs);
}

.date-picker-btn.today-btn:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.date-override-badge {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    background: var(--bg-secondary);
    border: 1px solid var(--divider);
    border-radius: 20px;
    padding: 2px 10px;
    white-space: nowrap;
}


/* ═══════════════════════════════════════════
   Calendar Widget
   ═══════════════════════════════════════════ */

.calendar-container {
    padding: var(--space-lg) 0 var(--space-2xl);
}

/* ── Navigation bar ─────────────────────── */
.calendar-nav {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.calendar-month-title {
    flex: 1;
    text-align: center;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    min-width: 180px;
}

.cal-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--divider);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1.4rem;
    font-family: var(--font);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    line-height: 1;
    flex-shrink: 0;
}

.cal-nav-btn:hover:not(:disabled) {
    background: var(--bg-card);
    border-color: var(--accent);
    color: var(--accent);
}

.cal-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cal-today-btn {
    padding: 6px 14px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: var(--text-sm);
    font-family: var(--font);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.cal-today-btn:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ── Grid ───────────────────────────────── */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    transition: opacity 0.2s;
}

.calendar-grid.loading {
    opacity: 0.45;
    pointer-events: none;
}

.calendar-header-row {
    margin-bottom: 4px;
}

/* ── Day header labels ───────────────────── */
.calendar-day-header {
    text-align: center;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    padding: 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.calendar-day-header.sunday {
    color: color-mix(in srgb, #FF3B30 60%, var(--text-tertiary));
}

/* ── Day cells ───────────────────────────── */
.calendar-day {
    position: relative;
    min-height: 60px;
    border-radius: var(--radius-xs);
    background: var(--bg-card);
    border: 1px solid var(--divider);
    padding: 6px 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background 0.12s, border-color 0.12s, transform 0.1s;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.calendar-day:hover {
    background: var(--bg-secondary);
    border-color: var(--accent);
    transform: translateY(-1px);
}

.calendar-day:active {
    transform: translateY(0);
}

.calendar-day.other-month {
    opacity: 0.28;
    pointer-events: none;
}

.calendar-day.today {
    border-color: var(--accent);
    border-width: 2px;
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
}

.calendar-day.today .calendar-day-number {
    color: var(--accent);
    font-weight: 700;
}

.calendar-day.sunday .calendar-day-number {
    color: color-mix(in srgb, #FF3B30 80%, var(--text-primary));
}

/* ── Day number ─────────────────────────── */
.calendar-day-number {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
}

/* ── Indicators area (empty for now) ────── */
.calendar-day-indicators {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: flex-end;
    min-height: 16px;
}

/* ── Subtitle ────────────────────────────── */
.calendar-subtitle {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-top: var(--space-lg);
}

/* ── Mobile ─────────────────────────────── */
@media (max-width: 480px) {
    .calendar-container {
        padding: var(--space-md) var(--space-sm) var(--space-xl);
    }

    .calendar-month-title {
        font-size: var(--text-lg);
        min-width: 140px;
    }

    .calendar-day {
        min-height: 48px;
        padding: 5px 5px 3px;
    }

    .calendar-day-number {
        font-size: var(--text-xs);
    }

    .calendar-grid {
        gap: 2px;
    }
}

@media (max-width: 360px) {
    .calendar-day {
        min-height: 42px;
        padding: 4px 3px 2px;
    }
}

/* ── Today Nav Button ───────────────────── */
.today-nav-btn {
    background: none;
    border: 1px solid var(--divider);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.today-nav-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* ── Calendar Filters ───────────────────── */
.calendar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: center;
    padding-top: 20px;
}
.filter-chip {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: var(--text-sm);
    border: 1px solid var(--divider);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s;
}
.filter-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.filter-chip.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}
.filter-chip.clear {
    border-color: var(--bad);
    color: var(--bad);
}
.filter-chip.clear:hover {
    background: var(--bad);
    color: white;
}

/* ── Day Indicators ─────────────────────── */
.calendar-day-indicators {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 4px;
    font-size: 11px;
    line-height: 1;
}
.day-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.day-indicator.wan-phra {
    color: var(--moon-gold);
}
.day-indicator.moon {
    font-size: 12px;
}
.day-indicator.riksa {
    font-size: 8px;
}
.day-indicator.riksa.good { color: var(--good); }
.day-indicator.riksa.bad  { color: var(--bad); }
.day-indicator.riksa.neutral { color: var(--text-tertiary); }
.day-indicator.lanna {
    background: var(--tradition-lanna, #8B5E3C);
    color: white;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   LANNA DAY CLASSIFICATION — today.php and home.php
   ═══════════════════════════════════════════════════════════ */

/* Calendar indicator: dithi */
.day-indicator.dithi {
    background: var(--tradition-lanna, #8B5E3C);
    color: white;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
}
.day-indicator.dithi.good   { background: var(--good); }
.day-indicator.dithi.bad    { background: var(--bad); }
.day-indicator.dithi.neutral { background: var(--text-tertiary); }

/* Calendar indicator: chok */
.day-indicator.chok {
    font-size: 11px;
    color: var(--text-tertiary);
}
.day-indicator.chok.good   { color: var(--moon-gold, #d4a017); }
.day-indicator.chok.bad    { color: var(--bad); }

/* Lanna Day Classification section on today.php */
.lanna-classification {
    margin: 24px 0;
}
.lanna-class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.lanna-class-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
}
.lanna-class-card-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}
.lanna-class-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.lanna-class-card-quality {
    margin-bottom: 6px;
}
.lanna-class-card-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.lanna-class-overall {
    border-left: 3px solid var(--tradition-lanna, #8B5E3C);
}
.lanna-warning-item {
    font-size: 13px;
    color: var(--bad, #e55);
    margin-top: 4px;
}
.lanna-class-prasatha {
    font-size: 13px;
    color: var(--bad, #e55);
    margin-top: 6px;
    font-weight: 500;
}
.prasatha-days {
    color: var(--text-secondary);
    font-weight: 400;
    margin-left: 4px;
}

/* Suitable/Not-suitable pill lists */
.lanna-suitable-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.suitable-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}
.suitable-pill.good {
    background: color-mix(in srgb, var(--good) 15%, transparent);
    color: var(--good);
    border: 1px solid color-mix(in srgb, var(--good) 30%, transparent);
}
.suitable-pill.bad {
    background: color-mix(in srgb, var(--bad) 12%, transparent);
    color: var(--bad);
    border: 1px solid color-mix(in srgb, var(--bad) 25%, transparent);
}

@media (max-width: 480px) {
    .lanna-class-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════
   LANNA DAY CLASSIFICATION — today.php and home.php
   ═══════════════════════════════════════════════════════════ */

/* Calendar indicator: dithi */
.day-indicator.dithi {
    background: var(--tradition-lanna, #8B5E3C);
    color: white;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
}
.day-indicator.dithi.good    { background: var(--good); }
.day-indicator.dithi.bad     { background: var(--bad); }
.day-indicator.dithi.neutral { background: var(--text-tertiary); }

/* Calendar indicator: chok */
.day-indicator.chok {
    font-size: 11px;
    color: var(--text-tertiary);
}
.day-indicator.chok.good { color: var(--moon-gold, #d4a017); }
.day-indicator.chok.bad  { color: var(--bad); }

/* Lanna Day Classification section on today.php */
.lanna-classification {
    margin: 24px 0;
}
.lanna-class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.lanna-class-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
}
.lanna-class-card-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}
.lanna-class-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.lanna-class-card-quality {
    margin-bottom: 6px;
}
.lanna-class-card-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.lanna-class-overall {
    border-left: 3px solid var(--tradition-lanna, #8B5E3C);
}
.lanna-warning-item {
    font-size: 13px;
    color: var(--bad, #e55);
    margin-top: 4px;
}
.lanna-class-prasatha {
    font-size: 13px;
    color: var(--bad, #e55);
    margin-top: 6px;
    font-weight: 500;
}
.prasatha-days {
    color: var(--text-secondary);
    font-weight: 400;
    margin-left: 4px;
}

/* Suitable / Not-suitable pill lists */
.lanna-suitable-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.suitable-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}
.suitable-pill.good {
    background: rgba(var(--good-rgb, 52, 168, 83), 0.12);
    color: var(--good);
    border: 1px solid rgba(var(--good-rgb, 52, 168, 83), 0.25);
}
.suitable-pill.bad {
    background: rgba(var(--bad-rgb, 217, 48, 37), 0.1);
    color: var(--bad);
    border: 1px solid rgba(var(--bad-rgb, 217, 48, 37), 0.2);
}

@media (max-width: 480px) {
    .lanna-class-grid {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════════════
   AUTH STYLES — Firebase Authentication (added 2026-04-16)
   ═══════════════════════════════════════════════════════════════ */

/* [x-cloak] hide until Alpine initialises */
[x-cloak] { display: none !important; }

/* ── Auth Pill (navbar top-right) ─────────────────────────────── */
.auth-pill {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.auth-pill-signin-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    font-family: inherit;
    white-space: nowrap;
}
.auth-pill-signin-btn:hover {
    background: var(--accent);
    color: #fff;
}

.auth-pill-user {
    position: relative;
}

.auth-pill-avatar-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px 4px 4px;
    border-radius: 20px;
    border: 1px solid var(--divider);
    background: var(--card-bg);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    transition: border-color 0.18s, box-shadow 0.18s;
}
.auth-pill-avatar-btn:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0,113,227,0.12);
}

.auth-pill-avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.auth-pill-initials {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.auth-pill-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-pill-caret {
    opacity: 0.5;
    flex-shrink: 0;
}

.auth-pill-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    overflow: hidden;
    z-index: 1000;
}

.auth-pill-dropdown-item {
    display: block;
    width: 100%;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.auth-pill-dropdown-item:hover {
    background: var(--hover-bg, rgba(0,0,0,0.05));
}

.auth-pill-signout {
    color: var(--bad, #e55);
    border-top: 1px solid var(--divider);
}

/* ── Auth Modal (popup on pill "Sign In") ─────────────────────── */
.auth-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    z-index: 1100;
}

.auth-backdrop-enter { transition: opacity 0.2s ease; }
.auth-backdrop-enter-start { opacity: 0; }
.auth-backdrop-enter-end { opacity: 1; }
.auth-backdrop-leave { transition: opacity 0.15s ease; }
.auth-backdrop-leave-start { opacity: 1; }
.auth-backdrop-leave-end { opacity: 0; }

.auth-modal-wrap {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 16px;
}

.auth-modal-enter { transition: opacity 0.2s ease, transform 0.2s ease; }
.auth-modal-enter-start { opacity: 0; transform: scale(0.96) translateY(8px); }
.auth-modal-enter-end { opacity: 1; transform: scale(1) translateY(0); }
.auth-modal-leave { transition: opacity 0.15s ease, transform 0.15s ease; }
.auth-modal-leave-start { opacity: 1; transform: scale(1) translateY(0); }
.auth-modal-leave-end { opacity: 0; transform: scale(0.96) translateY(8px); }

.auth-modal-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    padding: 32px 28px;
    width: 100%;
    max-width: 400px;
    position: relative;
}

.auth-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--hover-bg, rgba(0,0,0,0.07));
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: inherit;
    transition: background 0.15s;
}
.auth-modal-close:hover {
    background: var(--divider);
}

.auth-modal-header {
    text-align: center;
    margin-bottom: 24px;
}
.auth-modal-brand-icon {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
    color: var(--accent);
}
.auth-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.auth-modal-error {
    background: rgba(217,48,37,0.1);
    border: 1px solid rgba(217,48,37,0.25);
    color: var(--bad, #d93025);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 14px;
}

.auth-modal-success {
    background: rgba(52,168,83,0.1);
    border: 1px solid rgba(52,168,83,0.25);
    color: var(--good, #34a853);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 14px;
}

.auth-modal-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 20px;
    border: 1.5px solid var(--divider);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.auth-modal-google-btn:hover:not(:disabled) {
    border-color: #4285F4;
    box-shadow: 0 0 0 3px rgba(66,133,244,0.12);
    background: rgba(66,133,244,0.04);
}
.auth-modal-google-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-modal-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: var(--text-tertiary);
    font-size: 12px;
}
.auth-modal-divider::before,
.auth-modal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--divider);
}

.auth-modal-field {
    margin-bottom: 12px;
}
.auth-modal-field input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--divider);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.18s;
}
.auth-modal-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0,113,227,0.12);
}

.auth-modal-submit-btn {
    width: 100%;
    padding: 11px 20px;
    border: none;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.18s;
    margin-top: 4px;
}
.auth-modal-submit-btn:hover:not(:disabled) {
    opacity: 0.88;
}
.auth-modal-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-modal-footer {
    text-align: center;
    margin-top: 14px;
    font-size: 13px;
}
.auth-modal-link {
    color: var(--accent);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    text-decoration: none;
    padding: 0;
}
.auth-modal-link:hover {
    text-decoration: underline;
}
.auth-modal-sep {
    color: var(--text-tertiary);
    margin: 0 4px;
}
.auth-modal-reset-note {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

/* ── Auth Gate Page ────────────────────────────────────────────── */
.auth-gate-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 160px);
    padding: 24px 16px;
}

.auth-gate-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    padding: 40px 36px;
    width: 100%;
    max-width: 440px;
}

.auth-gate-brand {
    text-align: center;
    margin-bottom: 28px;
}
.auth-gate-icon {
    font-size: 36px;
    display: block;
    margin-bottom: 10px;
    color: var(--accent);
}
.auth-gate-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 6px;
}
.auth-gate-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.auth-gate-body {
    margin-bottom: 24px;
}

.auth-gate-error {
    background: rgba(217,48,37,0.1);
    border: 1px solid rgba(217,48,37,0.25);
    color: var(--bad, #d93025);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 14px;
}

.auth-gate-success {
    background: rgba(52,168,83,0.1);
    border: 1px solid rgba(52,168,83,0.25);
    color: var(--good, #34a853);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 14px;
}

.auth-gate-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 20px;
    border: 1.5px solid var(--divider);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.auth-gate-google-btn:hover:not(:disabled) {
    border-color: #4285F4;
    box-shadow: 0 0 0 3px rgba(66,133,244,0.12);
}
.auth-gate-google-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.auth-gate-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--text-tertiary);
    font-size: 12px;
}
.auth-gate-divider::before,
.auth-gate-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--divider);
}

.auth-gate-field {
    margin-bottom: 14px;
}
.auth-gate-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.auth-gate-field input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--divider);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.18s;
}
.auth-gate-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0,113,227,0.12);
}

.auth-gate-submit-btn {
    width: 100%;
    padding: 13px 20px;
    border: none;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.18s;
}
.auth-gate-submit-btn:hover:not(:disabled) { opacity: 0.88; }
.auth-gate-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.auth-gate-footer {
    text-align: center;
    margin-top: 14px;
    font-size: 13px;
}
.auth-gate-link {
    color: var(--accent);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    padding: 0;
}
.auth-gate-link:hover { text-decoration: underline; }
.auth-gate-sep { color: var(--text-tertiary); margin: 0 6px; }

.auth-gate-reset-intro {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.auth-gate-features {
    border-top: 1px solid var(--divider);
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-gate-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}
.auth-gate-feature-icon {
    font-size: 16px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

/* ── Profile Page ─────────────────────────────────────────────── */
.profile-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 0 48px;
}

.profile-header-section {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 32px;
    padding: 28px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.profile-avatar-wrap {
    flex-shrink: 0;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.profile-avatar-initials {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
}

.profile-header-info {
    flex: 1;
    min-width: 0;
}

.profile-name-row {
    margin-bottom: 4px;
}

.profile-display-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    cursor: pointer;
    display: inline-block;
    border-bottom: 1.5px dashed var(--divider);
    transition: border-color 0.15s;
}
.profile-display-name:hover {
    border-color: var(--accent);
}

.profile-name-edit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-name-input {
    padding: 6px 10px;
    border: 1.5px solid var(--accent);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text-primary);
    font-size: 18px;
    font-family: inherit;
    font-weight: 600;
    min-width: 160px;
}
.profile-name-input:focus { outline: none; }

.profile-name-save-btn,
.profile-name-cancel-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-name-save-btn {
    background: var(--good, #34a853);
    color: #fff;
}
.profile-name-save-btn:disabled { opacity: 0.6; }
.profile-name-cancel-btn {
    background: var(--divider);
    color: var(--text-secondary);
}

.profile-email {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 4px;
}

.profile-joined {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 0;
}

/* Profile grid */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.profile-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 24px;
}

.profile-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Birth date + zodiac */
.profile-birthdate-card {
    grid-column: 1 / -1;
}

.profile-field {
    margin-bottom: 16px;
}

.profile-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-birth-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.profile-date-input {
    padding: 8px 12px;
    border: 1.5px solid var(--divider);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.18s;
}
.profile-date-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0,113,227,0.12);
}

.profile-save-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.18s;
}
.profile-save-btn:hover:not(:disabled) { opacity: 0.85; }
.profile-save-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.profile-field-note {
    font-size: 12px;
    color: var(--good, #34a853);
    margin-top: 6px;
}
.profile-field-error {
    font-size: 12px;
    color: var(--bad, #e55);
    margin-top: 6px;
}

.profile-zodiac-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.profile-zodiac-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 18px;
    background: var(--bg);
    border: 1px solid var(--divider);
    border-radius: 10px;
    min-width: 100px;
    text-align: center;
}

.profile-zodiac-icon {
    font-size: 22px;
}
.profile-zodiac-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}
.profile-zodiac-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Language preference */
.profile-locale-options {
    display: flex;
    gap: 10px;
}

.profile-locale-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1.5px solid var(--divider);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.profile-locale-option input[type="radio"] {
    display: none;
}
.profile-locale-option.active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0,113,227,0.06);
    font-weight: 700;
}
.profile-locale-option:hover {
    border-color: var(--accent);
}

/* Reading history */
.profile-history-card {
    grid-column: 1 / -1;
}

.profile-empty-note {
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 0 0 12px;
}

.profile-cta-link {
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.profile-cta-link:hover { text-decoration: underline; }

.profile-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--divider);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.profile-history-item:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0,113,227,0.1);
}

.profile-history-date {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
}

.profile-history-score {
    font-size: 13px;
    color: var(--moon-gold, #d4a017);
    letter-spacing: 1px;
}

.profile-history-arrow {
    color: var(--text-tertiary);
    font-size: 14px;
}

/* Favorites */
.profile-favorites-card {
    grid-column: 1 / -1;
}

.profile-favorites-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.profile-favorite-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--divider);
    border-radius: 10px;
}

.profile-favorite-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.profile-favorite-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-unfavorite-btn {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    padding: 2px;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.profile-unfavorite-btn:hover { opacity: 1; }
.profile-unfavorite-btn:disabled { opacity: 0.4; }

/* Account section */
.profile-account-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-signout-btn {
    padding: 10px 24px;
    border: 1.5px solid var(--divider);
    border-radius: 10px;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.18s, background 0.18s;
    align-self: flex-start;
}
.profile-signout-btn:hover {
    border-color: var(--accent);
    background: rgba(0,113,227,0.06);
    color: var(--accent);
}

.profile-danger-zone {
    border: 1px solid rgba(217,48,37,0.25);
    border-radius: 10px;
    overflow: hidden;
}

.profile-danger-summary {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--bad, #d93025);
    list-style: none;
    user-select: none;
}
.profile-danger-summary::-webkit-details-marker { display: none; }
.profile-danger-summary::before {
    content: '▶ ';
    font-size: 10px;
}
details[open] .profile-danger-summary::before {
    content: '▼ ';
}

.profile-danger-body {
    padding: 14px 16px;
    border-top: 1px solid rgba(217,48,37,0.15);
    background: rgba(217,48,37,0.04);
}

.profile-danger-note {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 12px;
}

.profile-delete-btn {
    padding: 8px 18px;
    border: 1.5px solid var(--bad, #d93025);
    border-radius: 8px;
    background: transparent;
    color: var(--bad, #d93025);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s, color 0.18s;
}
.profile-delete-btn:hover {
    background: var(--bad, #d93025);
    color: #fff;
}

/* Responsive */
@media (max-width: 640px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }
    .profile-birthdate-card,
    .profile-history-card,
    .profile-favorites-card {
        grid-column: 1;
    }
    .profile-header-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .auth-gate-card {
        padding: 28px 20px;
    }
    .auth-modal-card {
        padding: 24px 20px;
    }
    .auth-pill-name {
        display: none;
    }
}

/* ============================================================
   SOFT AUTH — Upsell Bar, Save Reading, Favorites, Calendar tip
   Added: 2026-04-16
   ============================================================ */

/* ── Upsell Bar ─────────────────────────────────────────────── */
.upsell-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: #1a1a2e;
    border-top: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
    flex-wrap: wrap;
}

@media (prefers-color-scheme: light) {
    .upsell-bar {
        background: #1a1a2e;  /* keep dark regardless of light mode */
        color: #e8e8f0;
    }
}

.upsell-bar-icon {
    font-size: 18px;
    color: var(--accent, #0071E3);
    flex-shrink: 0;
}

.upsell-bar-text {
    flex: 1;
    font-size: 13px;
    color: #c8c8d8;
    min-width: 180px;
    line-height: 1.4;
}

.upsell-bar-cta {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border-radius: 20px;
    background: var(--accent, #0071E3);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, transform 0.1s;
    flex-shrink: 0;
}
.upsell-bar-cta:hover {
    background: #0062cc;
    transform: translateY(-1px);
}

.upsell-bar-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #a0a0b8;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.upsell-bar-dismiss:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* ── Save Reading Button ────────────────────────────────────── */
.save-reading-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin: 12px 0 4px;
}

.save-reading-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--divider, rgba(0,0,0,0.12));
    background: transparent;
    color: var(--text-secondary, #666);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.save-reading-btn:hover {
    border-color: var(--accent, #0071E3);
    color: var(--accent, #0071E3);
}
.save-reading-btn.saved {
    border-color: var(--accent, #0071E3);
    background: rgba(0,113,227,0.08);
    color: var(--accent, #0071E3);
}
.save-reading-btn.saving {
    opacity: 0.6;
    cursor: default;
}

.save-reading-icon {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
}
.save-reading-btn.saved .save-reading-icon {
    fill: var(--accent, #0071E3);
}

.save-reading-error {
    font-size: 12px;
    color: var(--quality-bad-color, #e74c3c);
}

/* ── Methodology Favorite Button ────────────────────────────── */
.methodology-favorite-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-tertiary, #aaa);
    padding: 0;
    transition: color 0.2s, transform 0.15s;
    flex-shrink: 0;
}
.methodology-favorite-btn:hover {
    color: #f0b429;
    transform: scale(1.15);
}
.methodology-favorite-btn.active {
    color: #f0b429;
}
.methodology-favorite-btn.loading {
    opacity: 0.5;
    cursor: default;
}
.methodology-favorite-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}
.methodology-favorite-btn.active svg {
    fill: #f0b429;
    stroke: #f0b429;
}

/* ── Calendar Upsell Tooltip ────────────────────────────────── */
.cal-upsell-tip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.35);
    z-index: 200;
    flex-wrap: wrap;
    max-width: 320px;
    font-size: 13px;
    color: #c8c8d8;
}
.cal-upsell-tip-text {
    flex: 1;
    min-width: 120px;
}
.cal-upsell-tip-btn {
    padding: 5px 14px;
    border-radius: 16px;
    background: var(--accent, #0071E3);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
.cal-upsell-tip-close {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: #a0a0b8;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}
.cal-upsell-tip-close:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
/* The calendar container needs position:relative for tooltip positioning */
.calendar-container {
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════════
   PROFILE PAGE — Phase 1 Accordion (2026-04-17)
═══════════════════════════════════════════════════════════════════ */

/* ── Page Layout ─────────────────────────────────────────────── */
.profile-accordion-page {
    padding: 24px 0 60px;
}

/* ── Profile Header (avatar + name) ─────────────────────────── */
.prof-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
    padding: 20px;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--divider);
}
.prof-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.prof-avatar {
    width: 80px; height: 80px; border-radius: 50%;
    object-fit: cover; background: var(--accent-dim);
    border: 2px solid var(--divider);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700; color: var(--accent);
}
.prof-avatar-initials { font-size: 22px; font-weight: 700; color: var(--accent); }
.prof-avatar-hint {
    font-size: 11px; color: var(--text-secondary);
    background: none; border: none; cursor: not-allowed;
    opacity: 0.55; padding: 0;
}
.prof-header-info { flex: 1; min-width: 0; }
.prof-display-name { font-size: 20px; font-weight: 700; margin: 0 0 4px; color: var(--text-primary); }
.prof-email { font-size: 13px; color: var(--text-secondary); margin: 0 0 4px; }
.prof-joined { font-size: 12px; color: var(--text-secondary); margin: 0; }

/* ── Progress Bar ────────────────────────────────────────────── */
.prof-progress-section {
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--bg-card);
    border-radius: 14px;
    border: 1px solid var(--divider);
}
.prof-progress-dots {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.prof-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.prof-dot-circle {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    border: 2px solid var(--divider);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.prof-dot.done .prof-dot-circle {
    background: #22C55E; border-color: #22C55E; color: #fff;
}
.prof-dot.current .prof-dot-circle {
    background: var(--accent-dim); border-color: var(--accent); color: var(--accent);
}
.prof-dot-label {
    font-size: 10px; font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.prof-dot.done .prof-dot-label,
.prof-dot.current .prof-dot-label { color: var(--text-primary); }
.prof-dot-line {
    flex: 1; height: 2px; margin: 0 4px; margin-bottom: 16px;
    background: var(--divider);
    transition: background 0.2s;
}
.prof-dot-line.done { background: #22C55E; }
.prof-progress-status {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.prof-tier-label { font-size: 13px; color: var(--text-secondary); }
.prof-tier-label strong { color: var(--text-primary); }
.prof-fields-from-next {
    font-size: 12px;
    background: var(--accent-dim);
    color: var(--accent);
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
}
.prof-tier-complete {
    font-size: 12px;
    background: rgba(34,197,94,0.12);
    color: #22C55E;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
}
.prof-unlock-toast {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(34,197,94,0.12);
    border: 1px solid rgba(34,197,94,0.3);
    border-radius: 10px;
    font-size: 13px;
    color: #16a34a;
}
.prof-global-error {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: rgba(239,68,68,0.10);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 10px;
    font-size: 13px;
    color: #EF4444;
}

/* ── Accordion Sections ──────────────────────────────────────── */
.prof-accordion-section {
    margin-bottom: 10px;
    background: var(--bg-card);
    border-radius: 14px;
    border: 1px solid var(--divider);
    overflow: hidden;
    transition: border-color 0.2s;
}
.prof-accordion-section.is-open {
    border-color: rgba(0,113,227,0.35);
}
.prof-acc-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.prof-acc-header:hover { background: var(--accent-dim); }
.prof-acc-dot {
    width: 10px; height: 10px; border-radius: 50%;
    flex-shrink: 0;
    background: var(--divider);
}
.prof-acc-dot.done { background: #22C55E; }
.prof-acc-dot.current { background: var(--accent); }
.prof-acc-dot.locked { background: var(--divider); opacity: 0.5; }
.prof-acc-title {
    font-size: 14px; font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
}
.prof-acc-unlock-preview {
    font-size: 12px; color: var(--text-secondary);
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prof-acc-badge {
    font-size: 11px; font-weight: 600;
    padding: 2px 9px; border-radius: 20px;
    flex-shrink: 0;
}
.prof-acc-badge.done {
    background: rgba(34,197,94,0.12); color: #22C55E;
}
.prof-acc-chevron {
    font-size: 18px; color: var(--text-secondary);
    transform: rotate(90deg);
    transition: transform 0.2s;
    flex-shrink: 0; line-height: 1;
}
.prof-acc-chevron.open { transform: rotate(270deg); }
.prof-acc-body { padding: 0 18px 18px; }

/* ── Form fields ─────────────────────────────────────────────── */
.prof-form { display: flex; flex-direction: column; gap: 16px; }
.prof-field { display: flex; flex-direction: column; gap: 5px; }
.prof-field.has-error .prof-input,
.prof-field.has-error .prof-select,
.prof-field.has-error .prof-textarea {
    border-color: #EF4444;
}
.prof-label {
    font-size: 13px; font-weight: 600;
    color: var(--text-primary);
}
.prof-required { color: #EF4444; margin-left: 2px; }
.prof-input, .prof-select, .prof-textarea {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--divider);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.prof-input:focus, .prof-select:focus, .prof-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0,113,227,0.15);
}
.prof-input:disabled { opacity: 0.55; cursor: not-allowed; }
.prof-textarea { resize: vertical; min-height: 80px; }
.prof-field-error {
    font-size: 12px; color: #EF4444;
    padding: 2px 0;
}
.prof-field-hint {
    font-size: 12px; color: var(--text-secondary);
    margin: 0;
}
.prof-field-note {
    font-size: 12px; color: var(--text-secondary);
    padding: 6px 10px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border-left: 3px solid var(--accent);
}

/* ── Radio group ─────────────────────────────────────────────── */
.prof-radio-group {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.prof-radio-opt {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--divider);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    transition: border-color 0.15s, background 0.15s;
}
.prof-radio-opt input { display: none; }
.prof-radio-opt.selected,
.prof-radio-opt:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
    font-weight: 600;
}
.prof-radio-opt:hover { border-color: rgba(0,113,227,0.4); }

/* ── Checkbox group ──────────────────────────────────────────── */
.prof-checkbox-group {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.prof-checkbox-opt {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--divider);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    transition: border-color 0.15s, background 0.15s;
}
.prof-checkbox-opt:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
    font-weight: 600;
}
.prof-toggle-opt {
    display: flex; align-items: center; gap: 9px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
}
.prof-toggle-opt input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* ── Avatar panel ────────────────────────────────────────────── */
.prof-avatar-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.prof-avatar-sm {
    width: 48px; height: 48px; border-radius: 50%;
    object-fit: cover; background: var(--accent-dim);
    border: 2px solid var(--divider);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: var(--accent);
    flex-shrink: 0;
}
.prof-avatar-initials-sm { font-size: 14px; }
.prof-avatar-upload-note {
    font-size: 12px; color: var(--text-secondary); font-style: italic;
}
.prof-avatar-reset-btn {
    font-size: 12px;
}

/* ── Username field ──────────────────────────────────────────── */
.prof-username-wrap {
    display: flex; align-items: center;
    border: 1px solid var(--divider);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-secondary);
}
.prof-username-at {
    padding: 9px 10px;
    font-size: 12px; color: var(--text-secondary);
    background: var(--bg-secondary);
    border-right: 1px solid var(--divider);
    white-space: nowrap;
}
.prof-username-wrap .prof-input {
    border: none; border-radius: 0;
    background: transparent;
    flex: 1;
}
.prof-username-wrap .prof-input:focus { box-shadow: none; }

/* ── Location autocomplete ───────────────────────────────────── */
.prof-location-field { position: relative; }
.prof-location-wrap { position: relative; }
.prof-location-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--bg-card);
    border: 1px solid var(--divider);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    z-index: 100;
    max-height: 220px;
    overflow-y: auto;
}
.prof-location-result {
    display: block; width: 100%;
    padding: 9px 14px;
    text-align: left;
    background: none; border: none; cursor: pointer;
    font-size: 13px; color: var(--text-primary);
    border-bottom: 1px solid var(--divider);
    transition: background 0.12s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prof-location-result:last-child { border-bottom: none; }
.prof-location-result:hover { background: var(--accent-dim); color: var(--accent); }
.prof-location-searching {
    padding: 10px 14px;
    font-size: 13px; color: var(--text-secondary);
}
.prof-coord-display {
    font-size: 11px; color: var(--text-secondary);
    display: flex; gap: 10px; margin-top: 4px;
}

/* ── Save button ─────────────────────────────────────────────── */
.prof-form-footer { margin-top: 4px; }
.prof-save-btn {
    padding: 10px 28px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
}
.prof-save-btn:hover { opacity: 0.88; }
.prof-save-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.prof-btn-secondary {
    padding: 7px 14px;
    background: transparent;
    border: 1px solid var(--divider);
    border-radius: 9px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.prof-btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ── Locked notice ───────────────────────────────────────────── */
.prof-locked-notice {
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    border-left: 3px solid var(--divider);
}

/* ── Secondary grid (history, favorites, account) ────────────── */
.prof-secondary-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.prof-card {
    background: var(--bg-card);
    border-radius: 14px;
    border: 1px solid var(--divider);
    padding: 18px 20px;
}
.prof-card-title {
    font-size: 15px; font-weight: 700;
    margin: 0 0 14px;
    color: var(--text-primary);
}
.prof-empty-note {
    font-size: 13px; color: var(--text-secondary); margin: 0 0 10px;
}
.prof-cta-link {
    font-size: 13px; color: var(--accent); text-decoration: none; font-weight: 600;
}
.prof-cta-link:hover { text-decoration: underline; }
.prof-history-list { display: flex; flex-direction: column; gap: 6px; }
.prof-history-item {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    background: var(--bg-secondary);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.12s;
}
.prof-history-item:hover { background: var(--accent-dim); color: var(--accent); }
.prof-history-date { font-size: 13px; flex: 1; }
.prof-history-score { font-size: 13px; color: #F59E0B; }
.prof-history-arrow { font-size: 16px; color: var(--text-secondary); }
.prof-favorites-list { display: flex; flex-direction: column; gap: 6px; }
.prof-favorite-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 10px;
    font-size: 13px;
}
.prof-favorite-icon { font-size: 15px; }
.prof-favorite-name { flex: 1; color: var(--text-primary); }

/* ── Account section ─────────────────────────────────────────── */
.prof-account-actions { display: flex; flex-direction: column; gap: 10px; }
.prof-signout-btn {
    padding: 9px 18px;
    background: transparent;
    border: 1px solid var(--divider);
    border-radius: 10px;
    font-size: 13px; font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    align-self: flex-start;
}
.prof-signout-btn:hover { background: rgba(239,68,68,0.08); color: #EF4444; border-color: rgba(239,68,68,0.3); }
.prof-danger-summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 4px 0;
}
.prof-danger-body {
    margin-top: 10px;
    padding: 12px;
    background: rgba(239,68,68,0.06);
    border-radius: 10px;
    border: 1px solid rgba(239,68,68,0.2);
}
.prof-danger-note {
    font-size: 12px; color: #EF4444; margin: 0 0 10px;
}
.profile-delete-btn {
    padding: 8px 16px;
    background: #EF4444;
    color: #fff;
    border: none; border-radius: 8px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.profile-delete-btn:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════════════
   PUBLIC PROFILE PAGE (/u/{username})
═══════════════════════════════════════════════════════════════════ */
.prof-public-page {
    max-width: 500px;
    margin: 40px auto;
    padding: 0 16px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.prof-public-card {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--divider);
    border-radius: 20px;
    padding: 36px 28px;
    text-align: center;
}
.prof-public-avatar-wrap { margin-bottom: 16px; }
.prof-public-avatar {
    width: 96px; height: 96px; border-radius: 50%;
    object-fit: cover;
    background: var(--accent-dim);
    border: 3px solid var(--divider);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 700; color: var(--accent);
}
.prof-public-avatar-initials {
    font-size: 28px; font-weight: 700; color: var(--accent);
}
.prof-public-name {
    font-size: 24px; font-weight: 700; margin: 0 0 4px;
    color: var(--text-primary);
}
.prof-public-handle {
    font-size: 14px; color: var(--text-secondary); margin: 0 0 16px;
}
.prof-public-bio {
    font-size: 14px; color: var(--text-primary);
    line-height: 1.6;
    margin: 0 0 16px;
}
.prof-public-since {
    font-size: 13px; color: var(--text-secondary); margin: 0 0 20px;
}
.prof-public-edit-btn {
    display: inline-block;
    padding: 9px 20px;
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}
.prof-public-edit-btn:hover { opacity: 0.88; }
.prof-public-not-found {
    max-width: 400px;
    margin: 60px auto;
    padding: 40px 28px;
    text-align: center;
    background: var(--bg-card);
    border-radius: 20px;
    border: 1px solid var(--divider);
}
.prof-public-404-icon { font-size: 48px; margin-bottom: 16px; }
.prof-public-not-found h1 { font-size: 22px; margin: 0 0 12px; }
.prof-public-not-found p { font-size: 14px; color: var(--text-secondary); margin: 0 0 20px; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (min-width: 640px) {
    .prof-secondary-grid {
        grid-template-columns: 1fr 1fr;
    }
    .prof-account-card {
        grid-column: 1 / -1;
    }
}
@media (max-width: 480px) {
    .prof-header { flex-direction: column; text-align: center; }
    .prof-avatar-wrap { align-items: center; }
    .prof-acc-unlock-preview { display: none; }
}

/* ── Avatar Upload (Phase 2) ─────────────────────────────────── */
.prof-avatar-upload-group {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.prof-avatar-upload-btn {
    font-size: 12px;
}
.prof-avatar-toast {
    margin-top: 6px;
    font-size: 12px;
    color: var(--accent);
    font-weight: 500;
}

/* ── Methodology Card (meth-card) ─────────────────────────────────────── */

/* Base card */
.meth-card {
    background: var(--card-bg);
    border: 1px solid var(--divider);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 0;
}

/* Mode variants */
.meth-card--hero {
    max-width: 680px;
    margin: 0 auto 24px;
}
.meth-card--feed {
    margin-bottom: 16px;
}
.meth-card--compact {
    padding: 14px 16px;
    border-radius: 12px;
}

/* Card header */
.meth-card-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}
.meth-card-title-group { flex: 1; min-width: 0; }
.meth-card-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
}
.meth-card-name-sub {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}
.meth-card-tradition-dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}

/* Share button */
.meth-card-share-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--divider);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.meth-card-share-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.meth-card-share-btn[data-copied="1"] { color: var(--accent); border-color: var(--accent); }
.meth-card-share-btn[data-copied="1"] .meth-card-share-label::before {
    content: attr(data-copied);
}
.meth-card-share-btn:not([data-copied]) .meth-card-share-label::before {
    content: attr(data-default);
}
.meth-card-share-label { display: none; } /* hidden on mobile; shown at >480 */
@media (min-width: 480px) { .meth-card-share-label { display: inline; } }
.meth-card-share-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Primary value */
.meth-card-primary {
    margin-bottom: 12px;
}
.meth-card-primary-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-right: 8px;
}
.meth-card--compact .meth-card-primary-value { font-size: 16px; }
.meth-card-primary-label {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

/* Details: hero (always open) */
.meth-card-details {
    border-top: 1px solid var(--divider);
    padding-top: 12px;
    margin-top: 4px;
}
.meth-card-details--open { display: block; }
.meth-card-details--feed-stub { display: block; }

/* Feed-mode extras */
.meth-card-details-more { margin-top: 8px; }
.meth-card-more-link {
    font-size: 12px;
    color: var(--accent);
    text-decoration: none;
}
.meth-card-more-link:hover { text-decoration: underline; }

.meth-card-feed-footer {
    margin-top: 14px;
    border-top: 1px solid var(--divider);
    padding-top: 12px;
    display: flex;
    justify-content: flex-end;
}
.meth-card-view-full {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
}
.meth-card-view-full:hover { text-decoration: underline; }
.meth-card-view-full svg { width: 14px; height: 14px; }

/* ── Tier Hint Banner ──────────────────────────────────────────────────── */

.tier-hint {
    background: var(--surface-2);
    border: 1px solid var(--divider);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.tier-hint-inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.tier-hint-icon {
    flex-shrink: 0;
    color: var(--accent);
    margin-top: 2px;
}
.tier-hint-icon svg { width: 18px; height: 18px; }
.tier-hint-copy { flex: 1; min-width: 0; }
.tier-hint-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
}
.tier-hint-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 8px;
    line-height: 1.5;
}
.tier-hint-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tier-hint-cta {
    display: inline-block;
    padding: 5px 12px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.5;
    transition: opacity 0.15s;
}
.tier-hint-cta:hover { opacity: 0.88; color: #fff; }
.tier-hint-dismiss {
    background: none;
    border: none;
    font-size: 12px;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 5px 2px;
}
.tier-hint-dismiss:hover { color: var(--text-secondary); }

/* ── Methodology Detail Page ──────────────────────────────────────────── */

.methodology-detail-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px 48px;
}

.meth-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-tertiary);
    padding: 16px 0 8px;
    flex-wrap: wrap;
}
.meth-breadcrumb a {
    color: var(--accent);
    text-decoration: none;
}
.meth-breadcrumb a:hover { text-decoration: underline; }
.meth-breadcrumb-sep { color: var(--text-tertiary); }

.meth-detail-hero {
    text-align: center;
    padding-top: 24px;
}
.meth-detail-hero-tradition {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: 5px;
    margin-bottom: 12px;
}
.meth-detail-date {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 4px 0 16px;
}

.meth-detail-description {
    margin-top: 24px;
    padding: 20px;
    background: var(--surface-2);
    border-radius: 12px;
    border: 1px solid var(--divider);
}
.meth-detail-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 10px;
}
.meth-detail-description p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}

.meth-detail-explore {
    margin-top: 24px;
    text-align: center;
}
.meth-detail-explore-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    border: 1px solid var(--accent);
    border-radius: 10px;
    padding: 10px 18px;
    transition: background 0.15s;
}
.meth-detail-explore-link:hover { background: var(--accent); color: #fff; }
.meth-detail-explore-link svg { width: 16px; height: 16px; }

/* ── Phase C: generic render types ─────────────────────────────── */
.detail-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(129,140,248,0.15);
    color: #a5b4fc;
    font-size: 0.82rem;
    font-weight: 500;
}
.detail-emoji { font-size: 1.6em; vertical-align: middle; }
.detail-img {
    display: inline-block;
    max-width: 48px; max-height: 48px;
    border-radius: 6px;
    vertical-align: middle;
}
.detail-progress {
    display: inline-block;
    width: 80px; height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    vertical-align: middle;
    overflow: hidden;
}
.detail-progress-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #818cf8, #a855f7);
}
.meth-card-approximation {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0.75rem 0;
    padding: 0.6rem 0.8rem;
    background: rgba(251,191,36,0.08);
    border: 1px solid rgba(251,191,36,0.25);
    border-radius: 10px;
    font-size: 0.82rem;
    color: #fcd34d;
}
.meth-card-approximation-icon { flex-shrink: 0; font-size: 1rem; line-height: 1.3; }
.meth-card-approximation-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.meth-card-approximation-list li + li { margin-top: 0.25rem; }

/* ── Phase F: paywall CTA ────────────────────────────────────── */
.meth-card-paywall {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem 1.4rem;
    margin: 1rem 0;
    background: linear-gradient(135deg, rgba(129,140,248,0.08), rgba(168,85,247,0.06));
    border: 1px solid rgba(129,140,248,0.25);
    border-radius: 14px;
}
.meth-card-paywall-icon { font-size: 1.7rem; line-height: 1.2; flex-shrink: 0; }
.meth-card-paywall-body { flex: 1; }
.meth-card-paywall-title { display: block; font-size: 1rem; color: var(--text-primary); margin-bottom: 0.3rem; }
.meth-card-paywall-desc  { font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 0.6rem; line-height: 1.5; }
.meth-card-paywall-bundles { font-size: 0.82rem; color: var(--text-tertiary); margin-bottom: 0.8rem; }
.meth-card-paywall-bundle {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(129,140,248,0.12);
    color: #a5b4fc;
    margin: 0 4px 4px 0;
    font-size: 0.78rem;
}
.meth-card-paywall-cta {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #818cf8, #a855f7);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    transition: opacity 0.15s;
}
.meth-card-paywall-cta:hover { opacity: 0.9; }


/* ── Widget auth notices ────────────────────────────────────── */
.widget-host { padding-top: 1.5rem; padding-bottom: 2rem; }

.widget-notice {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.88rem;
    margin-bottom: 1.2rem;
    border: 1px solid;
}
.widget-notice-info { background: var(--accent-dim); border-color: var(--accent); color: var(--text-primary); }
.widget-notice-warn { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.4); color: var(--text-primary); }
.widget-notice a { font-weight: 600; color: var(--accent); }


/* ── Tier 0 Universal Container ──────────────────────────────── */

/* ── Auth Nudge — conversion strip (desktop: 1-row | mobile: stacked) ── */
.auth-nudge {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 32px 0 20px;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(139,92,246,0.10) 0%, rgba(255,255,255,0.03) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(139,92,246,0.30);
    border-radius: var(--card-radius, 12px);
    box-shadow: 0 4px 24px rgba(139,92,246,0.15), inset 0 1px 0 rgba(255,255,255,0.07);
}
.auth-nudge-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.auth-nudge-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}
.auth-nudge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.auth-nudge-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #e2e8f0;
}
.auth-nudge-sub {
    font-size: 0.72rem;
    color: #64748b;
}
.auth-nudge-btns {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.auth-nudge-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 18px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 9px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #e2e8f0;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.auth-nudge-google:hover { background: rgba(255,255,255,0.12); }
.auth-nudge-email-link {
    background: none;
    border: none;
    font-size: 0.72rem;
    color: #64748b;
    cursor: pointer;
    padding: 2px 4px;
    white-space: nowrap;
    transition: color 0.15s;
}
.auth-nudge-email-link:hover { color: #94a3b8; }

/* ── Auth-nudge: light mode contrast overrides ─────────────────────────────
   Dark-mode values (#e2e8f0, #64748b, rgba(255,255,255,...)) are near-
   invisible on white/light-purple backgrounds. Override everything that
   uses hardcoded dark-mode colors.
   Pattern mirrors lines 465-473: both data-theme=light AND prefers-color-scheme:light
   (excluding explicit data-theme=dark) to cover toggle + system-pref users.
──────────────────────────────────────────────────────────────────────────── */
html[data-theme=light] .auth-nudge-title {
    color: #1D1D1F;
}
@media (prefers-color-scheme: light) {
    html:not([data-theme=dark]) .auth-nudge-title { color: #1D1D1F; }
}

html[data-theme=light] .auth-nudge-sub {
    color: #515154;
}
@media (prefers-color-scheme: light) {
    html:not([data-theme=dark]) .auth-nudge-sub { color: #515154; }
}

html[data-theme=light] .auth-nudge-google {
    color: #1D1D1F;
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.14);
}
html[data-theme=light] .auth-nudge-google:hover {
    background: rgba(0,0,0,0.08);
}
@media (prefers-color-scheme: light) {
    html:not([data-theme=dark]) .auth-nudge-google {
        color: #1D1D1F;
        background: rgba(0,0,0,0.04);
        border-color: rgba(0,0,0,0.14);
    }
    html:not([data-theme=dark]) .auth-nudge-google:hover {
        background: rgba(0,0,0,0.08);
    }
}

html[data-theme=light] .auth-nudge-email-link {
    color: #515154;
}
html[data-theme=light] .auth-nudge-email-link:hover {
    color: #1D1D1F;
}
@media (prefers-color-scheme: light) {
    html:not([data-theme=dark]) .auth-nudge-email-link { color: #515154; }
    html:not([data-theme=dark]) .auth-nudge-email-link:hover { color: #1D1D1F; }
}


/* Mobile override — stack to column */
@media (max-width: 600px) {
    .auth-nudge {
        flex-direction: column;
        gap: 12px;
        padding: 14px 16px;
        margin: 24px 0 16px;
    }
    .auth-nudge-left { width: 100%; }
    .auth-nudge-btns {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 10px;
    }
    .auth-nudge-google {
        width: 100%;
        height: 42px;
        border-radius: 10px;
        font-size: 0.82rem;
        padding: 0;
    }
    .auth-nudge-email-link { font-size: 0.72rem; padding: 2px 8px; }
}
.t0-container {
    margin: 32px 0 24px;
    border: 1px solid var(--divider);
    border-radius: var(--card-radius, 12px);
    overflow: hidden;
    background: var(--bg-card);
}
.t0-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; cursor: pointer; user-select: none;
    transition: background 0.15s;
}
.t0-header:hover { background: var(--hover-bg); }
.t0-header-left { display: flex; align-items: center; gap: 12px; }
.t0-icon { font-size: 1.25rem; }
.t0-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.t0-sub { font-size: 0.75rem; color: var(--text-secondary); margin: 2px 0 0; }
.t0-header-right { display: flex; align-items: center; gap: 10px; }
.t0-free-badge {
    font-size: 0.7rem; font-weight: 600; padding: 2px 8px;
    border-radius: 20px; background: rgba(16,185,129,0.15);
    color: #10b981; border: 1px solid rgba(16,185,129,0.3);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.t0-chevron {
    color: var(--text-secondary); font-size: 1.4rem;
    display: inline-block; transform: rotate(-90deg);
    transition: transform 0.2s ease; line-height: 1;
}
.t0-chevron--open { transform: rotate(90deg); }
.t0-body { padding: 0 16px 16px; }
.t0-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px; padding-top: 12px;
}
.t0-card-wrap { position: relative; }
.t0-card-link { display: block; text-decoration: none; color: inherit; border-radius: 10px; overflow: hidden; }
.t0-card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.t0-card-inner { position: relative; }
.t0-hide-btn {
    position: absolute; top: 6px; right: 6px; z-index: 10;
    width: 22px; height: 22px; border-radius: 50%; border: none;
    background: rgba(0,0,0,0.4); color: rgba(255,255,255,0.6);
    font-size: 0.65rem; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s;
}
.t0-card-wrap:hover .t0-hide-btn { opacity: 1; }
.t0-empty { padding: 16px; color: var(--text-secondary); font-size: 0.85rem; text-align: center; }
.t0-footer { padding-top: 12px; text-align: center; }
.t0-reset-btn {
    background: none; border: 1px solid var(--divider);
    color: var(--text-secondary); border-radius: 8px;
    padding: 5px 14px; font-size: 0.8rem; cursor: pointer;
}
.t0-reset-btn:hover { color: var(--text-primary); border-color: var(--text-secondary); }

/* Issue 3 — t0-grid: 2-column compact grid on mobile (was single column at 390px) */
@media (max-width: 600px) {
  .t0-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}
/* Wrap context for Today page and dashboard (constrain width, add horizontal padding) */
.t0-page-wrap { padding: 0; }

/* ── Mobile Spacing Tightening (≤480px) ───────────────────── */
@media (max-width: 480px) {
  /* Fix 1: container padding */
  .container { padding: 0 20px; }

  /* Fix 2: glance grid gap + card padding */
  .glance-grid { gap: 6px; }
  .glance-card { padding: 10px 12px; }

  /* Fix 4: hero inner padding */
  .hero-obs-inner { padding: 0 20px; }
}


/* ── Widget card default view classes (wc-) ─────────────────── */
/* Used by Default1x1, Default2x1 and other default view classes  */
.wc-1x1 {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 12px 8px; height: 100%; min-height: 80px;
    gap: 4px; box-sizing: border-box;
}
.wc-icon { font-size: 1.6rem; line-height: 1; }
.wc-value { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); word-break: break-word; }
.wc-sub { font-size: 0.7rem; color: var(--text-secondary); margin-top: 2px; }
.wc-2x1 {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; height: 100%; min-height: 80px; box-sizing: border-box;
}
.wc-icon-lg { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.wc-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wc-info .wc-value { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-info .wc-sub { font-size: 0.72rem; color: var(--text-secondary); }


/* ═══ Observatory Hero ═══ */
.hero-obs {
  position: relative;
  overflow: visible;
  padding: 20px 0 30px;
  background: radial-gradient(ellipse at 20% 50%, #0e0b1e 0%, #070710 60%, #020208 100%);
}

/* Star field */
/* ── Star field v1 (legacy — keep for rollback) ── */
.hero-obs-stars--v1 {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 10%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 60%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 25%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 70%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 45%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 75%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 85%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 90%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 55%, rgba(255,255,255,0.3) 0%, transparent 100%);
}

/* ── Star field v2.2 — falling meteors + persistent nebula + lens flare + 24 stars + drift ── */

/* ─── Keyframes ─── */

/* Far-field slow drift */
@keyframes starDrift {
  0%,100% { transform: translateX(0);   opacity: 0.18; }
  50%      { transform: translateX(8px); opacity: 0.38; }
}
/* Mid-field independent twinkle */
@keyframes starTwinkle2 {
  0%,100% { opacity: 0.22; } 55% { opacity: 0.65; }
}
/* Near-field bright pulse */
@keyframes starTwinkle3 {
  0%,100% { opacity: 0.3;  transform: scale(1);   }
  50%      { opacity: 1;   transform: scale(1.4); }
}

/*
 * Meteor keyframes — portrait element falls upper-right → lower-left.
 * Element is vertical (tall/thin). Rotation ~-12deg tilts top to the right
 * so the streak leans correctly. Translation: negative X (left) + positive Y (down).
 * Head = bright bottom edge (leading). Tail = dim top edge (trailing).
 * Flash appears for ~12-14% of the cycle then invisible.
 */
@keyframes meteor1 {
  0%    { transform: translate(0,0) rotate(12deg);           opacity: 0; }
  3%    { opacity: 1; }
  14%   { transform: translate(-160px,300px) rotate(12deg);  opacity: 0; }
  15%,100% { transform: translate(-160px,300px) rotate(12deg); opacity: 0; }
}
@keyframes meteor2 {
  0%    { transform: translate(0,0) rotate(9deg);            opacity: 0; }
  2%    { opacity: 0.75; }
  12%   { transform: translate(-110px,240px) rotate(9deg);   opacity: 0; }
  13%,100% { transform: translate(-110px,240px) rotate(9deg); opacity: 0; }
}

/*
 * Nebula keyframes — always persistently visible (base 0.12–0.14).
 * Gentle breath from dim to slightly brighter. Never near-zero.
 */
@keyframes nebulaA {
  0%,100% { opacity: 0.13; transform: scale(1);    }
  50%      { opacity: 0.26; transform: scale(1.07); }
}
@keyframes nebulaB {
  0%,100% { opacity: 0.10; transform: scale(1.03); }
  50%      { opacity: 0.21; transform: scale(0.97); }
}
@keyframes nebulaC {
  0%,100% { opacity: 0.08; transform: scale(1);    }
  50%      { opacity: 0.15; transform: scale(1.1);  }
}

/* ─── Container ─── */
.hero-obs-stars {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}

/* ─── Layer 1: far field — 24 stars + slow drift ─── */
.hero-obs-stars::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at  8%  12%, rgba(255,255,255,0.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 19%  38%, rgba(255,255,255,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 33%  68%, rgba(255,255,255,0.20) 0%, transparent 100%),
    radial-gradient(1px 1px at 48%  22%, rgba(255,255,255,0.30) 0%, transparent 100%),
    radial-gradient(1px 1px at 57%  78%, rgba(255,255,255,0.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 72%  14%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 83%  55%, rgba(255,255,255,0.22) 0%, transparent 100%),
    radial-gradient(1px 1px at 91%  32%, rgba(255,255,255,0.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 64%  91%, rgba(255,255,255,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at  4%  82%, rgba(255,255,255,0.28) 0%, transparent 100%),
    radial-gradient(1px 1px at 26%   5%, rgba(255,255,255,0.30) 0%, transparent 100%),
    radial-gradient(1px 1px at 95%  72%, rgba(255,255,255,0.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 44%  47%, rgba(255,255,255,0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 77%  88%, rgba(255,255,255,0.20) 0%, transparent 100%),
    radial-gradient(1px 1px at 13%  28%, rgba(255,255,255,0.10) 0%, transparent 100%),
    radial-gradient(1px 1px at 52%  62%, rgba(255,255,255,0.14) 0%, transparent 100%),
    radial-gradient(1px 1px at 30%  85%, rgba(255,255,255,0.09) 0%, transparent 100%),
    radial-gradient(1px 1px at 68%   8%, rgba(255,255,255,0.16) 0%, transparent 100%),
    radial-gradient(1px 1px at 87%  44%, rgba(255,255,255,0.11) 0%, transparent 100%),
    radial-gradient(1px 1px at  2%  50%, rgba(255,255,255,0.13) 0%, transparent 100%),
    radial-gradient(1px 1px at 40%  96%, rgba(255,255,255,0.08) 0%, transparent 100%),
    radial-gradient(1px 1px at 75%  30%, rgba(255,255,255,0.17) 0%, transparent 100%),
    radial-gradient(1px 1px at 60%  18%, rgba(255,255,255,0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 22%  72%, rgba(255,255,255,0.10) 0%, transparent 100%);
  animation: starDrift 22s ease-in-out infinite;
}

/* ─── Layer 2: mid field ─── */
.hero-obs-stars::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 15%  58%, rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 38%  18%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 61%  42%, rgba(255,255,255,0.42) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 86%   8%, rgba(255,255,255,0.48) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 22%  88%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 74%  62%, rgba(255,255,255,0.44) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50%  95%, rgba(255,255,255,0.30) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 93%  44%, rgba(255,255,255,0.38) 0%, transparent 100%);
  animation: starTwinkle2 5.2s ease-in-out infinite 1.8s;
}

/* ─── Layer 3: near field — lens flare on 2 stars ─── */
.star-near {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
}
.star-near-1 {
  width: 2px; height: 2px;
  top: 18%; left: 67%;
  box-shadow:
    0 0 4px 1px rgba(255,255,255,0.5),
    0 -9px 0 0 rgba(255,255,255,0.12),
    0  9px 0 0 rgba(255,255,255,0.12),
    -9px 0 0 0 rgba(255,255,255,0.12),
     9px 0 0 0 rgba(255,255,255,0.12);
  animation: starTwinkle3 3.8s ease-in-out infinite 0.4s;
}
.star-near-2 {
  width: 2px; height: 2px;
  top: 28%; left: 91%;
  box-shadow:
    0 0 4px 1px rgba(255,255,255,0.45),
    0 -7px 0 0 rgba(255,255,255,0.10),
    0  7px 0 0 rgba(255,255,255,0.10),
    -7px 0 0 0 rgba(255,255,255,0.10),
     7px 0 0 0 rgba(255,255,255,0.10);
  animation: starTwinkle3 4.4s ease-in-out infinite 2.1s;
}
.star-near-3 {
  width: 2px; height: 2px;
  top: 62%; left: 8%;
  box-shadow: 0 0 3px 1px rgba(255,255,255,0.3);
  animation: starTwinkle3 3.1s ease-in-out infinite 1.2s;
}

/*
 * Meteors — portrait orientation (1.5px wide × 70-80px tall).
 * Top of element = tail (dim). Bottom = head (bright, leading direction).
 * Rotation: -12deg tilts top right so streak leans upper-right → lower-left.
 * Translation: negative X + positive Y = moves left and down = falling direction.
 * Appears briefly (~12% of cycle), long invisible pause for "rare event" feel.
 */
.star-shoot {
  position: absolute;
  top: 6%; left: 72%;
  width: 1.5px; height: 75px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.20) 25%,
    rgba(255,255,255,0.65) 65%,
    rgba(255,255,255,1)    88%,
    rgba(255,255,255,0.15) 100%
  );
  border-radius: 2px;
  animation: meteor1 14s ease-in-out infinite 2s backwards;
}
.star-shoot-2 {
  position: absolute;
  top: 4%; left: 44%;
  width: 1.5px; height: 60px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0.55) 65%,
    rgba(255,255,255,0.85) 88%,
    rgba(255,255,255,0.10) 100%
  );
  border-radius: 2px;
  animation: meteor2 19s ease-in-out infinite 9s backwards;
}

/* ─── Nebula — 3 zones, persistent base opacity ─── */
.nebula-1 {
  position: absolute;
  top: -30%; left: -8%;
  width: 52%; height: 160%;
  background: radial-gradient(ellipse at 38% 48%,
    rgba(88,50,180,0.9)  0%,
    rgba(60,30,130,0.55) 35%,
    transparent 68%);
  animation: nebulaA 13s ease-in-out infinite backwards;
  pointer-events: none;
  mix-blend-mode: screen;
}
.nebula-2 {
  position: absolute;
  top: -40%; right: -12%;
  width: 55%; height: 180%;
  background: radial-gradient(ellipse at 62% 40%,
    rgba(40,65,180,0.8)  0%,
    rgba(25,45,130,0.45) 38%,
    transparent 70%);
  animation: nebulaB 18s ease-in-out infinite 4s backwards;
  pointer-events: none;
  mix-blend-mode: screen;
}
.nebula-3 {
  position: absolute;
  top: -10%; left: -5%;
  width: 38%; height: 120%;
  background: radial-gradient(ellipse at 30% 52%,
    rgba(200,145,42,0.6) 0%,
    rgba(160,100,20,0.3) 30%,
    transparent 62%);
  animation: nebulaC 10s ease-in-out infinite 1s backwards;
  pointer-events: none;
  mix-blend-mode: screen;
}

.hero-obs-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 1;
}

/* Globe slot — replaces moon orb */
.hero-obs-moon {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  width: var(--ug-size);
  height: var(--ug-size);
}

/* Data panel */
.hero-obs-data {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; gap: 20px;
}

/* Date */
.obs-date-block { display: flex; flex-direction: column; gap: 4px; }
.obs-day-label {
  display: flex; align-items: center; gap: 8px;
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif;
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.obs-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: livePulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes livePulse {
  0%,100% { opacity: 1; box-shadow: 0 0 6px #10b981; }
  50%      { opacity: 0.5; box-shadow: 0 0 12px #10b981; }
}
.obs-date-main {
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif;
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 600; line-height: 1.1;
  color: #F5F5F7; margin: 0;
  animation: fadeUp 0.6s ease both;
}
.obs-date-sub {
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif;
  font-size: 0.8rem; color: rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
  animation: fadeUp 0.6s ease 0.1s both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Score bar */
.obs-score-block {
  display: none;
  animation: fadeUp 0.6s ease 0.2s both;
}
.obs-score-header {
  display: flex; justify-content: space-between; align-items: baseline;
}
.obs-score-label {
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.obs-score-value {
  font-family: 'Cormorant Garamond', 'Noto Sans Thai', serif;
  font-size: 1.6rem; font-weight: 400; line-height: 1;
}
.obs-score-max {
  font-size: 0.85rem; color: rgba(255,255,255,0.3); margin-left: 2px;
}
.obs-score-good    { color: #10b981; }
.obs-score-great   { color: #34d399; }
.obs-score-moderate{ color: #f59e0b; }
.obs-score-caution { color: #f97316; }
.obs-score-bad     { color: #ff3b30; }
.obs-score-neutral { color: rgba(255,255,255,0.5); }

.obs-bar-track {
  position: relative; height: 4px;
  background: rgba(255,255,255,0.08); border-radius: 2px;
  overflow: visible;
}
.obs-bar-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  border-radius: 2px;
  width: var(--bar-pct, 0%);
  animation: barSweep 1.2s cubic-bezier(0.22,1,0.36,1) 0.4s both;
  transform-origin: left;
}
.obs-bar-glow {
  position: absolute; left: 0; top: -3px; height: 10px;
  border-radius: 5px;
  width: var(--bar-pct, 0%);
  opacity: 0.4; filter: blur(4px);
  animation: barSweep 1.2s cubic-bezier(0.22,1,0.36,1) 0.4s both;
}
@keyframes barSweep {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
.obs-bar-good,
.obs-bar-great   { background: #10b981; }
.obs-bar-moderate { background: #f59e0b; }
.obs-bar-caution  { background: #f97316; }
.obs-bar-bad      { background: #ff3b30; }
.obs-bar-neutral  { background: rgba(255,255,255,0.3); }

.obs-quality-word {
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif;
  font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase;
  font-weight: 500;
}
.obs-q-good,
.obs-q-great     { color: #10b981; }
.obs-q-moderate  { color: #f59e0b; }
.obs-q-caution   { color: #f97316; }
.obs-q-bad       { color: #ff3b30; }
.obs-q-neutral   { color: rgba(255,255,255,0.3); }

/* Live ticker */
.obs-ticker-wrap {
  display: flex; align-items: center; gap: 10px;
  animation: fadeUp 0.6s ease 0.35s both;
}
.obs-ticker-tag {
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif;
  font-size: 0.6rem; letter-spacing: 0.2em; font-weight: 600;
  color: #10b981; background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.25);
  padding: 2px 7px; border-radius: 4px; flex-shrink: 0;
}
.obs-ticker-track {
  flex: 1; min-width: 0; overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.obs-ticker-inner {
  display: flex; white-space: nowrap;
  animation: tickerScroll 28s linear infinite;
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif;
  font-size: 0.75rem; color: rgba(255,255,255,0.45);
  letter-spacing: 0.03em;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Date picker row */
.obs-datepicker-row {
  display: flex; gap: 8px; align-items: center;
  position: relative;
  animation: fadeUp 0.6s ease 0.45s both;
}
.obs-datepicker-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif;
  font-size: 0.72rem; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  background: var(--border);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; padding: 5px 12px;
  cursor: pointer; transition: all 0.15s;
}
.obs-datepicker-btn:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.08); }
.obs-datepicker-today { color: #C8912A; border-color: rgba(200,145,42,0.3); background: rgba(200,145,42,0.06); }

/* Mobile */
@media (max-width: 600px) {
  .hero-obs { padding: 36px 0 96px; }
  .hero-obs-inner {
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding: 0 20px;
  }
  .hero-obs-moon {
    overflow: visible;
  }
  .hero-obs-data {
    width: 100%;
    min-width: 0;
  }
  .obs-date-block {
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .obs-day-label  { justify-content: center; }
  .obs-date-main  { font-size: 2rem; text-align: center; }
  .obs-date-sub   { text-align: center; }
  .obs-score-block { width: 100%; }
  .obs-bar-track  { overflow: hidden; }
  .obs-quality-word { text-align: center; }
  .obs-ticker-wrap { width: 100%; max-width: 100%; }
  .obs-datepicker-row { justify-content: center; flex-wrap: wrap; }
}

/* ── Dashboard live subtitle ───────────────────────────────────────────── */
.hd-hero-sub--live {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    margin: 0.2rem 0 0;
}
.hd-sub-date     { color: var(--text-primary); font-size: 13px; }
.hd-sub-sep      { color: var(--text-secondary); opacity: 0.4; }
.hd-sub-location { color: var(--text-secondary); font-size: 13px; }
.hd-sub-moon {
    color: var(--text-secondary);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.hd-sub-moon::before { content: "\00b7"; margin-right: 4px; opacity: 0.4; }
.hd-sub-edit {
    color: var(--text-secondary);
    opacity: 0.5;
    font-size: 12px;
    text-decoration: none;
    transition: opacity 0.15s ease;
    cursor: pointer;
    margin-left: 2px;
}
.hd-sub-edit:hover { opacity: 1; color: var(--accent); }

.hd-sub-add-location {
    color: var(--accent);
    opacity: 0.7;
    font-size: 13px;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.hd-sub-add-location:hover { opacity: 1; }

.prof-field-hint--success {
    color: #10b981;
}

/* -- Profile: Timezone auto-detect button -------------------------------- */
.prof-tz-detect-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.15);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.prof-tz-detect-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}
.prof-tz-detect-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}
.prof-tz-detect-result {
    font-size: 12px;
    color: var(--accent);
    margin-top: 6px;
}

.widget-notice-anon { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.3); color: var(--text-secondary); font-size: 13px; }

/* Live dashboard clock */
.hd-sub-time {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-size: 0.82rem;
}
.hd-sub-sep--time { margin: 0 4px; }
.hd-blink-colon {
    animation: hd-colon-blink 2s ease-in-out infinite;
    display: inline-block;
}
@keyframes hd-colon-blink {
    0%, 45%, 100% { opacity: 1; }
    55%, 90%      { opacity: 0.15; }
}

/* Home page — obs timezone live strip */
.obs-tz-strip {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.obs-tz-time {
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-weight: 500;
}
.obs-tz-colon {
    animation: hd-colon-blink 2s ease-in-out infinite;
    display: inline-block;
}
.obs-tz-sep { color: rgba(148,163,184,0.3); margin: 0 8px; font-size: 0.82rem; }
.obs-tz-city { font-size: 0.82rem; color: var(--text-secondary); font-weight: 500; }
.obs-tz-moon { font-size: 0.82rem; color: var(--text-secondary); }
.obs-tz-detect {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    color: var(--accent);
    opacity: 0.5;
    background: none;
    border: none;
    cursor: pointer;
    padding: 1px 5px;
    border-radius: 5px;
    margin-left: 2px;
    transition: opacity 0.15s, background 0.15s;
}
.obs-tz-detect:hover { opacity: 1; background: var(--accent-dim); }

/* ── Obs Date Navigator (top-right hero) ──────────────────────────────── */
.obs-date-nav {
    position: absolute;
    top: 20px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 10;
}

.obs-nav-arrow {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 7px;
    color: #64748b;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    flex-shrink: 0;
    padding: 0;
}
.obs-nav-arrow:hover {
    background: rgba(255,255,255,0.09);
    color: #e2e8f0;
    border-color: rgba(255,255,255,0.15);
}
.obs-nav-arrow.is-disabled,
.obs-nav-arrow:disabled {
    opacity: 0.22;
    cursor: not-allowed;
    pointer-events: none;
}

.obs-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 7px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
    color: #94a3b8;
}
.obs-nav-pill:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.15);
    color: #cbd5e1;
}
.obs-nav-pill.is-override {
    border-color: rgba(139,92,246,0.35);
}
.obs-nav-pill.is-override .obs-nav-date-txt { color: #c4b5fd; }
.obs-nav-pill.is-override .obs-nav-cal-icon { stroke: #8b5cf6; }

.obs-nav-date-txt {
    font-size: 0.76rem;
    font-weight: 600;
    color: #cbd5e1;
    letter-spacing: 0.01em;
    transition: color .15s;
}
.obs-nav-cal-icon { opacity: 0.5; transition: opacity .15s, stroke .15s; flex-shrink: 0; }
.obs-nav-pill:hover .obs-nav-cal-icon { opacity: 0.75; }

.obs-nav-today {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    background: rgba(139,92,246,0.1);
    border: 1px solid rgba(139,92,246,0.28);
    border-radius: 7px;
    font-size: 0.71rem;
    font-weight: 700;
    color: #a78bfa;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.obs-nav-today:hover {
    background: rgba(139,92,246,0.18);
    border-color: rgba(139,92,246,0.45);
}

/* Calendar dropdown */
.obs-nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #12121e;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 14px;
    min-width: 214px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.65);
    z-index: 99;
}
.obs-nav-drop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.obs-nav-drop-month {
    font-size: 0.78rem;
    font-weight: 700;
    color: #e2e8f0;
}
.obs-nav-drop-nav {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 0.88rem;
    padding: 3px 7px;
    border-radius: 5px;
    transition: color .1s, background .1s;
}
.obs-nav-drop-nav:hover { color: #e2e8f0; background: rgba(255,255,255,0.06); }

.obs-nav-drop-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.obs-nav-drop-wl {
    font-size: 0.64rem;
    color: #475569;
    text-align: center;
    padding: 2px 0 6px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.obs-nav-drop-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.73rem;
    color: #94a3b8;
    border-radius: 5px;
    cursor: pointer;
    background: none;
    border: none;
    transition: background .1s, color .1s;
    padding: 0;
}
.obs-nav-drop-day:hover:not(:disabled) {
    background: rgba(255,255,255,0.08);
    color: #e2e8f0;
}
.obs-nav-drop-day.is-today { color: #8b5cf6; font-weight: 700; }
.obs-nav-drop-day.is-selected {
    background: #8b5cf6;
    color: #fff;
    font-weight: 700;
}
.obs-nav-drop-day.is-other { color: #2d3748; }
.obs-nav-drop-day.is-future,
.obs-nav-drop-day:disabled {
    opacity: 0.2;
    cursor: not-allowed;
    pointer-events: none;
}

/* Mobile — compress the date nav */
@media (max-width: 600px) {
    .obs-date-nav {
        top: auto; right: auto;
        bottom: 16px; left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 40px);
        justify-content: center;
        gap: 6px;
    }
    .obs-nav-arrow { width: 44px; height: 44px; font-size: 1.1rem; }
    .obs-nav-pill { height: 44px; flex: 1; justify-content: center; padding: 0 12px; gap: 5px; }
    .obs-nav-date-txt { font-size: 0.82rem; }
    .obs-nav-today { height: 44px; flex: 1; justify-content: center; padding: 0 12px; font-size: 0.78rem; }
}

/* ── /en/precision page ─────────────────────────────── */

/* Hero */
.prec-hero {
  background: radial-gradient(ellipse at 50% 0%, #0d1b3e 0%, #020208 70%);
  padding: var(--space-2xl) var(--space-md) var(--space-xl);
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.prec-hero-inner { max-width: 600px; margin: 0 auto; }
.prec-badges { display: flex; gap: var(--space-sm); justify-content: center; margin-bottom: var(--space-md); flex-wrap: wrap; }
.prec-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 14px; border-radius: 99px; font-size: var(--text-xs); font-weight: 600;
}
.prec-badge--nasa {
  border: 1px solid #4a7eff; color: #7ea8ff;
  background: rgba(74,126,255,0.08);
  animation: precBadgePulse 3s ease-in-out infinite;
}
.prec-badge--sub { border: 1px solid rgba(255,255,255,0.15); color: #98989D; }

@keyframes precBadgePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(74,126,255,0); }
  50%      { box-shadow: 0 0 12px 3px rgba(74,126,255,0.25); }
}

.prec-title { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-sm); color: #F5F5F7; }
.prec-sub { color: #98989D; font-size: var(--text-sm); line-height: 1.6; }

/* Controls */
.prec-controls {
  display: flex; gap: var(--space-sm); align-items: center;
  flex-wrap: wrap; margin-bottom: var(--space-lg);
  padding: var(--space-md) 0;
}
.prec-date-input {
  background: var(--bg-card); border: 1px solid var(--divider);
  color: var(--text-primary); border-radius: 8px;
  padding: 8px 12px; font-size: var(--text-sm);
}
.prec-run-btn {
  background: var(--accent); color: #fff; border: none;
  border-radius: 8px; padding: 8px 20px; font-size: var(--text-sm);
  font-weight: 600; cursor: pointer; position: relative;
  overflow: hidden; min-width: 160px; height: 38px;
  transition: background 0.2s, transform 0.1s;
}
.prec-run-btn:hover:not(:disabled) { background: #5a8fff; transform: translateY(-1px); }
.prec-run-btn:active { transform: translateY(0); }
.prec-run-btn.loading { background: var(--bg-secondary); cursor: wait; }
.prec-btn-bar {
  display: block; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%); height: 3px;
  background: var(--accent); border-radius: 2px;
  animation: precBtnProgress 1.6s ease-in-out infinite;
}
@keyframes precBtnProgress {
  0%   { left:0; width:0%; }
  40%  { left:0; width:70%; }
  80%  { left:30%; width:70%; }
  100% { left:100%; width:0%; }
}

/* Skeleton shimmer */
.prec-skeleton { display: flex; flex-direction: column; gap: 2px; }
.prec-skel-row {
  height: 44px; border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-secondary) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: precShimmer 1.4s ease-in-out infinite;
}
.prec-skel-row:nth-child(2)  { animation-delay: 0.1s; }
.prec-skel-row:nth-child(3)  { animation-delay: 0.2s; }
.prec-skel-row:nth-child(4)  { animation-delay: 0.3s; }
.prec-skel-row:nth-child(5)  { animation-delay: 0.4s; }
@keyframes precShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Table */
.prec-table-wrap { overflow-x: auto; }
.prec-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prec-table thead th {
  text-align: left; padding: var(--space-xs) var(--space-sm);
  color: var(--text-secondary); font-weight: 600; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--divider);
}
.prec-row {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  animation: precRowIn 0.35s ease both;
}
.prec-row:hover { background: var(--bg-secondary); }
@keyframes precRowIn {
  from { opacity:0; transform: translateY(8px); }
  to   { opacity:1; transform: translateY(0); }
}
.prec-table td { padding: 10px var(--space-sm); vertical-align: middle; }
.prec-glyph { font-size: 1.1em; margin-right: 6px; opacity: 0.8; }
.prec-deg { font-family: 'Courier New', monospace; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.prec-jpl { color: var(--text-secondary); }

.prec-delta { font-family: 'Courier New', monospace; font-variant-numeric: tabular-nums; font-weight: 600; }
.prec-delta--great { color: var(--good); }
.prec-delta--good  { color: var(--accent); }
.prec-delta--warn  { color: var(--moderate); }
.prec-delta--fail  { color: var(--bad); }

.prec-tick {
  color: var(--good); font-weight: 700; margin-right: 4px;
  display: inline-block;
  animation: precTickPop 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes precTickPop {
  from { transform: scale(0); opacity:0; }
  to   { transform: scale(1); opacity:1; }
}
.prec-warn { color: var(--moderate); margin-right: 4px; }
.prec-pending { color: var(--text-secondary); margin-right: 4px; }
.prec-threshold { font-size: var(--text-xs); color: var(--text-secondary); }

/* Precision table footnote row */
.prec-footnote-row td { padding: 6px var(--space-sm) !important; }
.prec-footnote {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  border-top: 1px dashed var(--divider);
  font-style: italic;
  opacity: 0.75;
}

/* Source badge */
.prec-source-row {
  display: flex; align-items: center; gap: var(--space-xs);
  flex-wrap: wrap; font-size: var(--text-xs);
  color: var(--text-secondary); margin-top: var(--space-sm);
}
.prec-source-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: 99px; font-weight: 600;
  font-size: var(--text-xs);
}
.prec-source--live {
  background: rgba(52,199,89,0.12); color: #34c759; border: 1px solid rgba(52,199,89,0.3);
}
.prec-source--cache {
  background: rgba(255,159,10,0.1); color: #ff9f0a; border: 1px solid rgba(255,159,10,0.25);
}
.prec-source-dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.prec-source--live .prec-source-dot {
  animation: precSourcePulse 2s ease-in-out infinite;
}
@keyframes precSourcePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}
.prec-source-detail { color: var(--text-secondary); }
.prec-source-refresh { color: #ff9f0a; }

/* Summary bar */
.prec-summary {
  display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
  padding: var(--space-md) 0; border-top: 1px solid var(--divider);
  flex-wrap: wrap;
}
.prec-score-ring { width: 40px; height: 40px; flex-shrink: 0; }
.prec-ring-bg   { fill: none; stroke: var(--bg-secondary); stroke-width: 4; }
.prec-ring-fill {
  fill: none; stroke: var(--good); stroke-width: 4;
  stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: center;
  transition: stroke-dasharray 0.8s cubic-bezier(0.4,0,0.2,1);
}
.prec-score-text { font-weight: 700; font-size: var(--text-lg); }
.prec-score-label { color: var(--text-secondary); font-size: var(--text-sm); flex: 1; }
.prec-jpl-link { font-size: var(--text-xs); color: var(--accent); text-decoration: none; margin-left: auto; }
.prec-jpl-link:hover { text-decoration: underline; }

/* Summary cards */
.prec-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md); margin: var(--space-xl) 0;
}
.prec-card {
  background: var(--bg-card); border-radius: var(--card-radius);
  padding: var(--space-lg); border: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  transition: transform 0.2s, border-color 0.2s;
}
.prec-card:hover { transform: translateY(-2px); border-color: rgba(74,126,255,0.3); }
.prec-card-num  { font-size: var(--text-2xl); font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.prec-card-title { font-weight: 600; margin-bottom: 4px; }
.prec-card-sub  { font-size: var(--text-xs); color: var(--text-secondary); }

/* Algorithm details */
.prec-algo {
  background: var(--bg-card); border: 1px solid var(--divider);
  border-radius: var(--card-radius); margin: var(--space-xl) 0;
  overflow: hidden;
}
.prec-algo summary {
  padding: var(--space-md); font-weight: 600; cursor: pointer;
  user-select: none; list-style: none;
  display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
}
.prec-algo summary::before { content: '\25B6'; font-size: 0.7em; transition: transform 0.2s; }
.prec-algo[open] summary::before { transform: rotate(90deg); }
.prec-algo-body { padding: 0 var(--space-md) var(--space-md); }
.prec-algo-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.prec-algo-table td { padding: 6px var(--space-sm); border-bottom: 1px solid var(--divider); }
.prec-algo-table td:last-child { color: var(--good); font-family: monospace; }

/* Precision page container */
.prec-main { max-width: 860px; margin: 0 auto; padding: var(--space-xl) var(--space-md); }
.prec-section-label {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-secondary); margin-bottom: var(--space-sm);
}

/* Mobile */
@media (max-width: 640px) {
  .prec-cards { grid-template-columns: 1fr; }
  .prec-table { font-size: 0.72rem; }
  .prec-table td { padding: 8px 6px; }
}

/* ── /en/precision/how-this-works ─────────────────────────────────────────── */
.prec-how-breadcrumb {
  margin-bottom: var(--space-md);
}
.prec-how-breadcrumb a {
  color: var(--accent); font-size: var(--text-sm); text-decoration: none; opacity: 0.8;
}
.prec-how-breadcrumb a:hover { opacity: 1; text-decoration: underline; }

.prec-how-flow {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-md); flex-wrap: wrap;
  padding: var(--space-xl) var(--space-md);
  max-width: 800px; margin: 0 auto;
}
.prec-how-step {
  flex: 1; min-width: 180px; max-width: 220px;
  background: var(--bg-card); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--card-radius); padding: var(--space-md);
  text-align: center;
}
.prec-how-step-num {
  font-size: 1.5rem; font-weight: 700; color: var(--accent);
  margin-bottom: var(--space-xs); font-family: monospace;
}
.prec-how-step-title { font-weight: 600; font-size: var(--text-sm); margin-bottom: 4px; }
.prec-how-step-sub { font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.5; }
.prec-how-arrow { font-size: 1.5rem; color: var(--accent); opacity: 0.5; }
@media (max-width: 640px) { .prec-how-arrow { transform: rotate(90deg); } }

.prec-how-cards {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md); margin: var(--space-xl) 0;
}
.prec-how-card {
  background: var(--bg-card); border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--card-radius); padding: var(--space-lg);
  transition: border-color 0.2s, transform 0.2s;
}
.prec-how-card:hover { border-color: rgba(74,126,255,0.3); transform: translateY(-2px); }
.prec-how-card-icon { font-size: 1.8rem; margin-bottom: var(--space-sm); }
.prec-how-card-title { font-weight: 700; margin-bottom: var(--space-xs); }
.prec-how-card-body { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }
.prec-how-card-acc {
  display: inline-block; margin-top: var(--space-sm);
  font-size: var(--text-xs); font-family: monospace;
  background: rgba(52,199,89,0.1); color: #34c759;
  padding: 2px 8px; border-radius: 4px;
}

.prec-how-nasa {
  background: linear-gradient(135deg, rgba(13,27,62,0.8) 0%, rgba(2,2,8,0.95) 100%);
  border: 1px solid rgba(74,126,255,0.2); border-radius: var(--card-radius);
  padding: var(--space-xl); margin: var(--space-xl) 0;
  position: relative; overflow: hidden;
}
.prec-how-nasa::before {
  content: 'NASA JPL';
  position: absolute; top: var(--space-md); right: var(--space-md);
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.15em;
  color: rgba(74,126,255,0.3);
}
.prec-how-nasa-quote {
  font-size: var(--text-md); line-height: 1.7;
  color: var(--text-primary); font-style: italic;
}
.prec-how-nasa-attr {
  margin-top: var(--space-md); font-size: var(--text-xs);
  color: var(--text-secondary);
}

.prec-how-table { width: 100%; border-collapse: collapse; margin: var(--space-lg) 0; }
.prec-how-table th {
  text-align: left; font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-secondary); font-weight: 600;
  padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--divider);
}
.prec-how-table td {
  padding: 9px var(--space-sm); border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: var(--text-sm);
}
.prec-how-table .acc { font-family: monospace; color: #34c759; font-size: var(--text-xs); }
.prec-how-table .acc-conv { font-family: monospace; color: #ff9f0a; font-size: var(--text-xs); }
.prec-how-table .chk { color: #34c759; }

.prec-how-cta {
  background: var(--bg-card); border: 1px solid var(--accent);
  border-radius: var(--card-radius); padding: var(--space-xl);
  text-align: center; margin: var(--space-xl) 0;
}
.prec-how-cta-title { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-sm); }
.prec-how-cta-sub { color: var(--text-secondary); margin-bottom: var(--space-md); font-size: var(--text-sm); }
.prec-how-cta-btn {
  display: inline-block; background: var(--accent); color: #fff;
  padding: 10px 28px; border-radius: 8px; font-weight: 600;
  text-decoration: none; font-size: var(--text-sm);
  transition: background 0.2s, transform 0.1s;
}
.prec-how-cta-btn:hover { background: #5a8fff; transform: translateY(-1px); }

.prec-how-link {
  text-align: center; padding: var(--space-md) 0;
}
.prec-how-link a {
  color: var(--accent); font-size: var(--text-sm); text-decoration: none;
}
.prec-how-link a:hover { text-decoration: underline; }

.prec-section {
  margin-bottom: var(--space-xl);
}
.prec-section-title {
  font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-sm);
}
.prec-section-intro {
  color: var(--text-secondary); font-size: var(--text-sm);
  margin-bottom: var(--space-md); line-height: 1.6;
}

@media (max-width: 640px) {
  .prec-how-cards { grid-template-columns: 1fr; }
}


/* ── Precision History ─────────────────── */
.prec-hist-bar { margin-bottom: var(--space-md); }
.prec-hist-link { font-size: var(--text-xs); color: var(--accent); text-decoration: none; }
.prec-hist-link:hover { text-decoration: underline; }

.prec-hist-section { margin-bottom: var(--space-2xl); }
.prec-hist-section h2 { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-xs); }
.prec-hist-sub { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-md); }
.prec-hist-empty { font-size: var(--text-sm); color: var(--text-secondary); padding: var(--space-lg) 0; }
.prec-hist-empty a { color: var(--accent); text-decoration: none; }

.prec-hist-table { width: 100%; border-collapse: collapse; }
.prec-hist-table th {
  text-align: left; font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-secondary); font-weight: 600;
  padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--divider);
}
.prec-hist-row { border-bottom: 1px solid rgba(255,255,255,0.04); }
.prec-hist-row:hover { background: var(--bg-secondary); }
.prec-hist-table td { padding: 10px var(--space-sm); font-size: var(--text-sm); vertical-align: middle; }
.prec-hist-date { font-family: monospace; font-weight: 600; }
.prec-hist-score { font-weight: 700; font-size: var(--text-xs); }
.prec-hist-pass { color: #34c759; }
.prec-hist-warn { color: #ff9f0a; }
.prec-hist-ts { color: var(--text-secondary); font-size: var(--text-xs); }
.prec-hist-rerun { color: var(--accent); text-decoration: none; font-size: var(--text-xs); }
.prec-hist-rerun:hover { text-decoration: underline; }
.prec-hist-clear {
  margin-top: var(--space-md); background: none; border: 1px solid var(--divider);
  color: var(--text-secondary); border-radius: 6px; padding: 6px 16px;
  font-size: var(--text-xs); cursor: pointer;
}
.prec-hist-clear:hover { border-color: #ff453a; color: #ff453a; }

.prec-hist-loading { color: var(--text-secondary); font-size: var(--text-sm); padding: var(--space-md) 0; }
.prec-hist-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.prec-hist-chip {
  display: inline-block; padding: 5px 14px; border-radius: 99px;
  background: var(--bg-card); border: 1px solid var(--divider);
  font-size: var(--text-xs); font-family: monospace; color: var(--text-primary);
  text-decoration: none; transition: border-color 0.15s, background 0.15s;
}
.prec-hist-chip:hover { border-color: var(--accent); background: rgba(74,126,255,0.08); color: var(--accent); }

.prec-breadcrumb { margin-bottom: var(--space-sm); }
.prec-breadcrumb-link { font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; }
.prec-breadcrumb-link:hover { color: var(--accent); }

/* Engine status badge (footer) */
.engine-status-bar {
  display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
  margin-top: var(--space-sm); flex-wrap: wrap;
}
.engine-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); color: var(--text-secondary);
}
.engine-status-dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  flex-shrink: 0;
}
.engine-ok  { color: #34c759; }
.engine-warn { color: #ff9f0a; }
.engine-status-link {
  font-size: var(--text-xs); color: var(--accent); text-decoration: none;
}
.engine-status-link:hover { text-decoration: underline; }

/* Precision force-refresh button */
.prec-refresh-btn {
  background: none; border: 1px solid var(--divider); color: var(--text-secondary);
  border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 1rem;
  transition: border-color 0.15s, color 0.15s;
}
.prec-refresh-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.prec-refresh-btn:disabled { opacity: 0.4; cursor: wait; }

/* ── Western Precision Page (precision-western.php) ─────────────────────── */
.prec-hero--western { background: radial-gradient(ellipse at 50% 0%, rgba(74,126,255,0.18) 0%, transparent 65%), var(--bg-primary); }

.wprec-form-card {
  background: var(--bg-card);
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.wprec-form-title { font-size: var(--text-md); font-weight: 700; margin-bottom: var(--space-md); }
.wprec-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.wprec-field { display: flex; flex-direction: column; gap: 4px; }
.wprec-label { font-size: var(--text-xs); color: var(--text-secondary); font-weight: 500; }
.wprec-select { background: var(--bg-secondary); color: var(--text-primary); }
.wprec-form-actions { display: flex; gap: var(--space-sm); align-items: center; }

.wprec-error {
  background: rgba(255,69,58,0.1);
  border: 1px solid rgba(255,69,58,0.3);
  border-radius: 8px;
  padding: var(--space-md);
  color: #ff453a;
  font-size: var(--text-sm);
  margin-bottom: var(--space-xl);
}

.wprec-section { margin-bottom: var(--space-2xl); }
.wprec-section-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.wprec-section-note {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.wprec-sign { font-size: var(--text-xs); color: var(--text-secondary); margin-left: 4px; }
.wprec-sign-badge {
  display: inline-block;
  background: rgba(74,126,255,0.1);
  border: 1px solid rgba(74,126,255,0.2);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: var(--text-xs);
  color: var(--accent);
}

.wprec-house-sys { font-size: var(--text-sm); font-weight: 400; color: var(--text-secondary); }
.wprec-house-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  margin-right: 6px;
}
.wprec-angle-tag {
  font-size: var(--text-xs);
  font-weight: 700;
  color: #ff9f0a;
  margin-left: 4px;
}
.wprec-row--angle { background: rgba(255,159,10,0.04); }
.wprec-row--angle:hover { background: rgba(255,159,10,0.08) !important; }

.wprec-aspect-glyph { font-size: 1.1em; margin-right: 4px; }
.wprec-aspect-name { font-size: var(--text-sm); }

.wprec-applying   { color: #34c759; font-size: var(--text-xs); font-weight: 600; }
.wprec-separating { color: var(--text-secondary); font-size: var(--text-xs); }

.wprec-angles-table .prec-glyph { font-family: monospace; font-size: 0.75em; font-weight: 700; letter-spacing: -0.03em; }

@media (max-width: 640px) {
  .wprec-form-grid { grid-template-columns: 1fr 1fr; }
  .wprec-form-card { padding: var(--space-md); }
}

/* ── Precision Page Tabs (reusable for all engine precision pages) ─────────── */
.prec-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid rgba(255,255,255,0.08);
  margin-bottom: var(--space-lg);
}
.prec-tab {
  padding: 10px 20px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  border-radius: 0;
  letter-spacing: 0.01em;
}
.prec-tab:hover {
  color: var(--text-primary);
}
.prec-tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.prec-tabpanel { display: block; }
.prec-tabpanel--hidden { display: none; }

/* Engine Output Explorer (Tab 2) */
.prec-explorer-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--card-radius);
}
.prec-explorer-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.prec-explorer-meta-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.prec-explorer-meta-value {
  font-size: var(--text-sm);
  font-family: monospace;
  color: var(--text-primary);
  word-break: break-all;
}
.prec-explorer-meta-value--badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: inherit;
}
.prec-explorer-meta-value--cache {
  background: rgba(52,199,89,0.12);
  color: #34c759;
}
.prec-explorer-meta-value--computed {
  background: rgba(255,159,10,0.12);
  color: #ff9f0a;
}
.prec-explorer-section {
  margin-bottom: var(--space-xl);
}
.prec-explorer-section-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.prec-explorer-count {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 1px 7px;
  font-family: monospace;
}
.prec-retro-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  color: #ff453a;
  background: rgba(255,69,58,0.1);
  border-radius: 8px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
}
.prec-json-viewer {
  background: var(--bg-secondary, #111);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--card-radius);
  padding: var(--space-md);
  overflow: auto;
  max-height: 400px;
  position: relative;
}
.prec-json-viewer pre {
  margin: 0;
  font-size: 0.72rem;
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
  color: var(--text-primary);
  white-space: pre;
  line-height: 1.6;
}
.prec-json-actions {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
}
.prec-copy-btn {
  padding: 5px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  background: rgba(255,255,255,0.07);
  color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.prec-copy-btn:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text-primary);
}
.prec-api-url-link {
  font-size: var(--text-xs);
  color: var(--accent);
  text-decoration: none;
  font-family: monospace;
  word-break: break-all;
  opacity: 0.8;
}
.prec-api-url-link:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 640px) {
  .prec-tab { padding: 8px 12px; font-size: 0.78rem; }
  .prec-explorer-meta { grid-template-columns: 1fr 1fr; }
}

/* ── Precision: Load from Profile button ─────────────────── */
.prec-profile-btn {
    background: transparent;
    border: 1px solid var(--border-color, rgba(255,255,255,.15));
    color: var(--text-secondary, #aaa);
    border-radius: 8px;
    padding: 0 14px;
    height: 40px;
    font-size: .8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: border-color .2s, color .2s;
    white-space: nowrap;
}
.prec-profile-btn:hover:not(:disabled) {
    border-color: var(--accent-blue, #3b82f6);
    color: var(--text-primary, #fff);
}
.prec-profile-btn:disabled { opacity: .45; cursor: not-allowed; }


/* ═══════════════════════════════════════════════════════════════════════
   URANIAN DAILY — Home sections (cosmic-weather + dashboard)
   Tradition color: --tradition-uranian: #7C3AED (deep violet)
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --tradition-uranian: #7C3AED;
  --tradition-uranian-dim: rgba(124, 58, 237, 0.18);
  --tradition-uranian-glow: rgba(124, 58, 237, 0.35);
}

/* ── Guest Section: Today's Cosmic Weather ────────────────────────── */

.cosmic-weather-section {
  position: relative;
  margin: 2.5rem 0;
}

.cw-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 1.75rem 2rem;
  /* Gradient border via box-shadow + outline trick */
  border: 1.5px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 0 1.5px var(--tradition-uranian-glow),
    0 8px 32px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  /* Subtle violet tint overlay */
  background-image: linear-gradient(
    135deg,
    rgba(124,58,237,0.04) 0%,
    transparent 60%
  );
}

.cw-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1.5px var(--tradition-uranian),
    0 14px 40px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.cw-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cw-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tradition-uranian);
  font-weight: 600;
  margin: 0 0 0.3rem;
  opacity: 0.9;
}

.cw-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

/* Transit pictures list */
.cw-pictures-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.cw-picture-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--divider, rgba(255,255,255,0.07));
  flex-wrap: wrap;
}

.cw-picture-item:last-child {
  border-bottom: none;
}

.cw-eq {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tradition-uranian);
  letter-spacing: 0.03em;
  min-width: 8ch;
}

.cw-keyword {
  flex: 1;
  font-size: 0.88rem;
  color: var(--text-secondary);
  font-style: italic;
}

.cw-orb {
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.65;
  white-space: nowrap;
}

.cw-orb-quality {
  display: inline-block;
  font-size: 0.68rem;
  padding: 0.1rem 0.45rem;
  border-radius: 99px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cw-orb-quality.exact { background: rgba(16,185,129,0.15); color: #10b981; }
.cw-orb-quality.close { background: rgba(245,158,11,0.15); color: #f59e0b; }
.cw-orb-quality.wide  { background: rgba(107,114,128,0.12); color: #9ca3af; }

/* Energy + Best For chip row */
.cw-chips-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.cw-chip {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  min-width: 110px;
  flex: 1;
}

.cw-chip-label {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.7;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.cw-chip-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Energy level chip accent bar */
.cw-energy-chip {
  position: relative;
  overflow: hidden;
}

.cw-energy-chip::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
}

.cw-energy-chip.harmonious::before  { background: #10b981; }
.cw-energy-chip.moderate::before    { background: #f59e0b; }
.cw-energy-chip.cautious::before    { background: #3b82f6; }
.cw-energy-chip.challenging::before { background: #ef4444; }

/* AP activations */
.cw-ap-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.6rem 0.8rem;
  background: rgba(124,58,237,0.07);
  border-left: 3px solid var(--tradition-uranian);
  border-radius: 0 8px 8px 0;
}

.cw-ap-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tradition-uranian);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cw-ap-tag {
  font-size: 0.8rem;
  background: rgba(124,58,237,0.12);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 99px;
  padding: 0.15rem 0.6rem;
  color: var(--text-primary);
}

/* Login CTA strip */
.cw-login-cta {
  border-top: 1px solid var(--divider, rgba(255,255,255,0.07));
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.cw-cta-teaser {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
  opacity: 0.8;
}

.cw-cta-btn {
  display: inline-flex;
  align-items: center;
  background: var(--tradition-uranian);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.55rem 1.35rem;
  border-radius: 99px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.18s;
  white-space: nowrap;
  flex-shrink: 0;
}

.cw-cta-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* Skeleton loader for guest section */
.cw-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 0;
}

.cw-sk-bar {
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: cw-shimmer 1.5s infinite;
  width: 100%;
}

.cw-sk-bar--short { width: 55%; }
.cw-sk-bar--medium { width: 75%; }

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

/* Desktop: 2-col layout for transit + chips */
@media (min-width: 640px) {
  .cw-card-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: start;
  }

  .cw-chips-row {
    flex-direction: column;
    min-width: 160px;
    margin-bottom: 0;
  }

  .cw-login-cta {
    grid-column: 1 / -1;
  }
}

/* ── Dashboard Section: Your Uranian Daily Reading ────────────────── */

.hd-uranian-daily {
  margin: 0 0 1.5rem;
  position: relative;
}

.hd-ur-card {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  border: 1.5px solid transparent;
  box-shadow:
    0 0 0 1px var(--tradition-uranian-glow),
    0 6px 24px rgba(0,0,0,0.25);
  background-image: linear-gradient(
    135deg,
    rgba(124,58,237,0.05) 0%,
    transparent 55%
  );
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hd-ur-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1.5px var(--tradition-uranian),
    0 10px 32px rgba(0,0,0,0.32);
}

/* Header row */
.hd-ur-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hd-ur-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tradition-uranian);
  font-weight: 700;
  opacity: 0.9;
}

.hd-ur-active-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(16,185,129,0.15);
  color: #10b981;
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 99px;
  padding: 0.18rem 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.hd-ur-active-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  animation: hd-ur-pulse 2.2s infinite;
}

@keyframes hd-ur-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.8); }
}

.hd-ur-birth-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.65;
  margin-left: auto;
}

/* Three-chip stat row */
.hd-ur-chips {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.hd-ur-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.hd-ur-chip-label {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.65;
  margin-bottom: 0.3rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hd-ur-chip-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'SF Mono', 'Fira Code', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hd-ur-chip-sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
  opacity: 0.7;
}

/* Energy chip left accent */
.hd-ur-chip-energy::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.hd-ur-chip-energy.harmonious::before  { background: #10b981; }
.hd-ur-chip-energy.moderate::before    { background: #f59e0b; }
.hd-ur-chip-energy.cautious::before    { background: #3b82f6; }
.hd-ur-chip-energy.challenging::before { background: #ef4444; }

/* Midpoints list */
.hd-ur-section-label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.6;
  font-weight: 600;
  margin: 0 0 0.6rem;
}

.hd-ur-mp-list {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
}

.hd-ur-mp-item {
  display: flex;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px dotted var(--divider, rgba(255,255,255,0.07));
  gap: 0.5rem;
}

.hd-ur-mp-item:last-child { border-bottom: none; }

.hd-ur-mp-eq {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tradition-uranian);
  min-width: 12ch;
  flex-shrink: 0;
}

.hd-ur-mp-keyword {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-style: italic;
  flex: 1;
}

/* Guidance box */
.hd-ur-guidance {
  border-left: 3px solid var(--tradition-uranian);
  background: rgba(124,58,237,0.06);
  border-radius: 0 8px 8px 0;
  padding: 0.75rem 1rem;
  margin-bottom: 1.1rem;
}

.hd-ur-guidance-text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0;
  opacity: 0.9;
}

/* CTA row */
.hd-ur-cta-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hd-ur-cta-link {
  display: inline-flex;
  align-items: center;
  background: var(--tradition-uranian);
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.5rem 1.2rem;
  border-radius: 99px;
  text-decoration: none;
  transition: opacity 0.18s;
}
.hd-ur-cta-link:hover { opacity: 0.85; }

.hd-ur-cta-link--secondary {
  background: transparent;
  border: 1px solid rgba(124,58,237,0.4);
  color: var(--tradition-uranian);
}
.hd-ur-cta-link--secondary:hover {
  background: rgba(124,58,237,0.1);
  opacity: 1;
}

/* Degraded / locked state */
.hd-ur-degraded-notice {
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: rgba(245,158,11,0.08);
  border-left: 3px solid #f59e0b;
  border-radius: 0 6px 6px 0;
  padding: 0.5rem 0.8rem;
  margin-bottom: 0.8rem;
}

.hd-ur-locked {
  padding: 1.25rem 1.5rem;
  background: var(--bg-card);
  border-radius: 14px;
  border: 1px solid rgba(124,58,237,0.15);
  margin-bottom: 1.5rem;
}

.hd-ur-locked-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  color: var(--tradition-uranian);
}

.hd-ur-locked-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0 0 0.85rem;
}

.hd-ur-locked a {
  font-size: 0.82rem;
  color: var(--tradition-uranian);
  font-weight: 600;
  text-decoration: none;
}

/* Skeleton loader */
.hd-ur-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.5rem 0;
}

.hd-ur-sk-bar {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 200% 100%;
  animation: cw-shimmer 1.5s infinite;
  width: 100%;
}

.hd-ur-sk-bar--short { width: 45%; }

/* Loading text */
.hd-ur-loading-text {
  font-size: 0.8rem;
  color: var(--text-secondary);
  opacity: 0.6;
  text-align: center;
  padding: 0.5rem 0;
}

/* Desktop responsive */
@media (min-width: 640px) {
  .hd-ur-chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .cw-card { padding: 1.25rem 1.1rem; }
  .cw-chips-row { gap: 0.5rem; }
  .cw-login-cta { flex-direction: column; align-items: stretch; }
  .cw-cta-btn { text-align: center; justify-content: center; }
  .hd-ur-card { padding: 1.1rem 1rem; }
  .hd-ur-chips { flex-direction: column; gap: 0.5rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   WESTERN ASTROLOGY HOME CARDS
   Token: --tradition-western (#059669 emerald) — distinct from
   Uranian (#7C3AED violet) and Thai (#C4A35A gold)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --tradition-western:      #059669;
  --tradition-western-dim:  rgba(5, 150, 105, 0.15);
  --tradition-western-glow: rgba(5, 150, 105, 0.35);
}

/* ── Guest card — Today's Sky ─────────────────────────────────────────────── */
.ws-section {
  padding: 2rem 0 1.5rem;
}

.ws-card {
  background: var(--bg-card);
  border: 1px solid var(--tradition-western-dim);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow:
    0 0 0 1px var(--tradition-western-dim),
    0 4px 24px rgba(0, 0, 0, 0.35),
    0 0 32px var(--tradition-western-glow);
  position: relative;
  overflow: hidden;
}

.ws-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(5, 150, 105, 0.06) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.ws-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}

.ws-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tradition-western);
  margin: 0 0 0.25rem;
}

.ws-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

/* ── Sky Strip ────────────────────────────────────────────────────────────── */
.ws-sky-strip {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.ws-sky-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 500;
}

.ws-sky-pill--sun  { border-color: rgba(251, 191, 36, 0.35); }
.ws-sky-pill--moon { border-color: rgba(148, 163, 184, 0.35); }

.ws-sky-pill-glyph {
  font-size: 1rem;
  line-height: 1;
}

/* ── Headline Aspect ──────────────────────────────────────────────────────── */
.ws-headline-aspect {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.2);
  border-radius: 10px;
  padding: 0.55rem 1rem;
  margin-bottom: 0.9rem;
  font-size: 0.88rem;
  color: var(--text-primary);
  flex-wrap: wrap;
}

.ws-headline-aspect-label { font-weight: 600; }

.ws-aspect-harmonious { color: #34d399; }
.ws-aspect-challenging { color: #f87171; }
.ws-aspect-neutral { color: var(--text-secondary); }

/* ── Mercury Rx Badge ─────────────────────────────────────────────────────── */
.ws-mercury-rx {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #f87171;
  letter-spacing: 0.05em;
}

/* ── Card Inner Two-Col ───────────────────────────────────────────────────── */
.ws-card-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .ws-card-inner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ── Element + Energy Chips ───────────────────────────────────────────────── */
.ws-chips-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ws-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ws-chip-label {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.ws-chip-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Element energy colours */
.ws-energy-fire  .ws-chip-value { color: #f97316; }
.ws-energy-earth .ws-chip-value { color: var(--tradition-western); }
.ws-energy-air   .ws-chip-value { color: #60a5fa; }
.ws-energy-water .ws-chip-value { color: #2dd4bf; }

/* ── Category Score Bars (locked) ─────────────────────────────────────────── */
.ws-category-chips {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ws-category-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}

.ws-cat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 3.5rem;
}

.ws-score-dots {
  display: flex;
  gap: 4px;
}

.ws-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tradition-western);
  opacity: 0.85;
}

.ws-dot--empty {
  background: rgba(255, 255, 255, 0.12);
  opacity: 1;
}

/* Locked blur state */
.ws-score-locked .ws-score-dots {
  filter: blur(2.5px);
  pointer-events: none;
  user-select: none;
}

.ws-score-locked .ws-lock-icon {
  font-size: 0.75rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

/* Unlocked label */
.ws-cat-score-label {
  font-size: 0.72rem;
  color: var(--tradition-western);
  font-weight: 600;
  margin-left: auto;
}

/* ── Login CTA ────────────────────────────────────────────────────────────── */
.ws-login-cta {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ws-cta-teaser {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0;
}

.ws-cta-btn {
  background: var(--tradition-western);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.ws-cta-btn:hover { opacity: 0.88; }

/* ── Skeleton loader ──────────────────────────────────────────────────────── */
.ws-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.5rem 0;
}

.ws-sk-bar {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.09) 50%,
    rgba(255, 255, 255, 0.03) 75%
  );
  background-size: 200% 100%;
  animation: cw-shimmer 1.5s infinite;
  width: 100%;
}
.ws-sk-bar--medium { width: 70%; }
.ws-sk-bar--short  { width: 40%; }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD WESTERN CARD — Your Daily Horoscope
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-western-daily {
  background: var(--bg-card);
  border: 1px solid var(--tradition-western-dim);
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow:
    0 0 0 1px var(--tradition-western-dim),
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 0 24px var(--tradition-western-glow);
  margin-bottom: 1.2rem;
  position: relative;
  overflow: hidden;
}

.hd-western-daily::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(5, 150, 105, 0.05) 0%,
    transparent 55%
  );
  pointer-events: none;
}

/* ── Dashboard Header ─────────────────────────────────────────────────────── */
.hd-ws-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.hd-ws-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tradition-western);
}

.ws-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(5, 150, 105, 0.15);
  border: 1px solid rgba(5, 150, 105, 0.4);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #34d399;
  letter-spacing: 0.08em;
}

.ws-active-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  animation: ws-pulse 1.8s infinite;
}

@keyframes ws-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

.hd-ws-birth-hint {
  font-size: 0.72rem;
  color: var(--text-secondary);
  opacity: 0.7;
}

/* ── Big Three Strip ──────────────────────────────────────────────────────── */
.ws-big-three {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.ws-bt-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.5rem 0.85rem;
  min-width: 4.5rem;
  gap: 0.15rem;
}

.ws-bt-symbol {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tradition-western);
  opacity: 0.85;
}

.ws-bt-sign {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}

.ws-bt-glyph {
  font-size: 1rem;
  line-height: 1;
}

@media (min-width: 640px) {
  .ws-big-three {
    flex-wrap: nowrap;
  }
  .ws-bt-badge {
    flex: 1;
  }
}

/* ── VoC Moon Warning ─────────────────────────────────────────────────────── */
.ws-voc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 8px;
  padding: 0.3rem 0.75rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #fbbf24;
  margin-bottom: 0.75rem;
}

/* ── Moon Natal Transit ───────────────────────────────────────────────────── */
.hd-ws-moon-transit {
  background: rgba(5, 150, 105, 0.06);
  border: 1px solid rgba(5, 150, 105, 0.15);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.85rem;
}

.hd-ws-mt-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}

.hd-ws-mt-interp {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

/* ── Dashboard Category Chips (unlocked) ──────────────────────────────────── */
.hd-ws-categories {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.hd-ws-cat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 0.55rem 0.5rem;
  gap: 0.3rem;
}

.hd-ws-cat-name {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.hd-ws-cat-dots {
  display: flex;
  gap: 3px;
}

.hd-ws-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tradition-western);
  opacity: 0.85;
}

.hd-ws-dot--empty {
  background: rgba(255, 255, 255, 0.12);
  opacity: 1;
}

.hd-ws-cat-score-lbl {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--tradition-western);
}

/* ── Top Transit ──────────────────────────────────────────────────────────── */
.hd-ws-top-transit {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.85rem;
  font-size: 0.8rem;
}

.hd-ws-tt-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tradition-western);
  margin-bottom: 0.25rem;
}

.hd-ws-tt-text {
  color: var(--text-primary);
  font-weight: 500;
}

/* ── Guidance ─────────────────────────────────────────────────────────────── */
.hd-ws-guidance {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 0.9rem;
  font-style: italic;
}

/* ── Dashboard CTAs ───────────────────────────────────────────────────────── */
.hd-ws-cta-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.hd-ws-cta-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tradition-western);
  text-decoration: none;
  border: 1px solid rgba(5, 150, 105, 0.35);
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  transition: background 0.15s;
}

.hd-ws-cta-link:hover {
  background: rgba(5, 150, 105, 0.1);
}

.hd-ws-cta-link--secondary {
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.1);
}

.hd-ws-cta-link--secondary:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

/* ── Locked / degraded ────────────────────────────────────────────────────── */
.hd-ws-locked {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(5, 150, 105, 0.2);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.2rem;
}

.hd-ws-locked-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.3rem;
}

.hd-ws-locked-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 0 0 0.6rem;
}

.hd-ws-degraded-notice {
  font-size: 0.76rem;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.08);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  margin-bottom: 0.75rem;
}


/* ══════════════════════════════════════════════════════════════════════
   DAILY SCORE GLANCE (DSG) — premium card
   ══════════════════════════════════════════════════════════════════════ */

.dsg-section { margin: 1.5rem 0; }

/* Card shell */
.dsg-card {
  background: var(--bg-secondary);
  border-radius: 20px;
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 24px var(--shadow-md);
}
.dsg-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 0%, rgba(124,58,237,0.06) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 100%, rgba(5,150,105,0.05) 0%, transparent 60%);
  pointer-events: none;
}

/* Header */
.dsg-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: relative; z-index: 1;
  gap: 12px; flex-wrap: wrap;
}
.dsg-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  color: var(--text-secondary); text-transform: uppercase; margin-bottom: 2px;
}
.dsg-card-date {
  font-family: 'DM Mono', monospace;
  font-size: 11px; color: var(--text-tertiary);
}
.dsg-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.dsg-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dsg-badge {
  padding: 3px 10px; border-radius: 100px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.05em;
}
.dsg-badge--uranian { background: rgba(124,58,237,0.15); color: #a78bfa; border: 1px solid rgba(124,58,237,0.3); }
.dsg-badge--western { background: rgba(5,150,105,0.15); color: #34d399; border: 1px solid rgba(5,150,105,0.3); }
.dsg-badge--thai    { background: rgba(196,163,90,0.15); color: #e0c97a; border: 1px solid rgba(196,163,90,0.3); }
.dsg-badge--chinese { background: rgba(220,38,38,0.15);  color: #f87171; border: 1px solid rgba(220,38,38,0.3); }
.dsg-badge--hindu   { background: rgba(234,88,12,0.15);  color: #fb923c; border: 1px solid rgba(234,88,12,0.3); }
.dsg-tabs { display: flex; gap: 4px; }
.dsg-tab {
  font-size: 11px; padding: 5px 14px; border-radius: 100px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); cursor: pointer; transition: all 0.2s; font-family: 'DM Sans', sans-serif;
}
.dsg-tab--active, .dsg-tab:hover { background: #7C3AED; color: #fff; border-color: #7C3AED; }

/* Loading */
.dsg-loading { padding: 2rem 24px; }
.dsg-shimmer {
  height: 12px; border-radius: 6px; margin-bottom: 12px;
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-card) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite;
}
.dsg-shimmer--short { width: 60%; }
.dsg-error { color: var(--text-secondary); font-size: 0.8rem; padding: 1.5rem 24px; }

/* Body layouts */
.dsg-body {
  display: flex; padding: 28px 24px; gap: 32px; align-items: center; position: relative; z-index: 1;
}

/* -- RADAR layout -- */
.dsg-body--radar { align-items: flex-start; overflow: visible; padding: 15px 24px 0px 0; gap: 8px; }
.dsg-radar-wrap { flex-shrink: 0; padding: 0px 8px 8px 36px; overflow: visible; }
.dsg-radar-svg { width: 250px; height: 250px; filter: drop-shadow(0 0 24px rgba(196,163,90,0.08)); overflow: visible; display: block; }
.dsg-radar-poly {
  opacity: 0;
  animation: dsg-radar-reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
  transform-origin: center;
}
@keyframes dsg-radar-reveal {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: scale(1); }
}
.dsg-radar-dot {
  opacity: 0;
  animation: dsg-dot-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes dsg-dot-pop {
  from { r: 0; opacity: 0; }
  to   { r: 4; opacity: 1; }
}
.dsg-radar-axis-label {
  font-family: 'Syne', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; fill: var(--text-secondary);
}
.dsg-radar-axis-value {
  font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 500;
}

.dsg-legend-col { flex: 1; display: flex; flex-direction: column; gap: 4px; padding-left: 40px; }
.dsg-legend-title {
  font-family: var(--font);
  font-size: 16px; font-weight: 600; font-style: normal;
  color: var(--text-primary); margin-bottom: 12px; line-height: 1.3;
}
.dsg-legend-sub {
  font-style: normal; font-size: 11px; font-family: 'DM Sans', sans-serif;
  color: var(--text-secondary); display: block; margin-bottom: 2px; font-weight: 400;
}
.dsg-legend-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 10px; transition: background 0.15s;
}
.dsg-legend-item:hover { background: var(--hover-bg); }
.dsg-legend-left { display: flex; align-items: center; gap: 10px; }
.dsg-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dsg-legend-name { font-size: 13px; color: var(--text-secondary); width: 80px; flex-shrink: 0; }
.dsg-legend-right { display: flex; align-items: center; gap: 10px; flex: 1; }
.dsg-legend-bar-wrap { flex: 1; height: 3px; background: var(--bg-card); border-radius: 100px; overflow: hidden; }
.dsg-legend-bar { height: 100%; border-radius: 100px; animation: dsg-bar-in 1s cubic-bezier(0.34, 1.56, 0.64, 1) both; transform-origin: left; }
@keyframes dsg-bar-in { from { transform: scaleX(0); } }
.dsg-legend-pct { font-family: 'DM Mono', monospace; font-size: 14px; font-weight: 500; width: 40px; text-align: right; }


/* -- INFO tab layout -- */
.dsg-tab--info { font-size: 10px; letter-spacing: 0.06em; opacity: 0.75; }
.dsg-tab--info.dsg-tab--active { opacity: 1; }
.dsg-body--info { padding: 24px; }
.dsg-info-wrap { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.dsg-info-mode { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-card); }
.dsg-info-mode--collective { border-color: rgba(136,136,170,0.2); }
.dsg-info-mode--personal { border-color: rgba(124,58,237,0.3); background: rgba(124,58,237,0.04); }
.dsg-info-mode-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; color: var(--text-primary); flex-wrap: wrap; }
.dsg-info-icon { font-size: 16px; }
.dsg-info-badge { font-size: 10px; font-family: 'DM Mono', monospace; padding: 2px 8px; border-radius: 100px; background: rgba(136,136,170,0.15); color: var(--text-secondary); border: 1px solid var(--border); }
.dsg-info-badge--personal { background: rgba(124,58,237,0.2); color: #a78bfa; border-color: rgba(124,58,237,0.4); }
.dsg-info-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.6; }
.dsg-info-desc em { color: var(--text-primary); font-style: normal; }
.dsg-info-desc a.dsg-info-link { color: #a78bfa; text-decoration: underline; }
.dsg-info-rows { display: flex; flex-direction: column; gap: 10px; }
.dsg-info-row { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; }
.dsg-info-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.dsg-info-row strong { display: block; color: var(--text-primary); margin-bottom: 1px; }
.dsg-info-row span { color: var(--text-secondary); line-height: 1.5; }
.dsg-info-divider { display: flex; align-items: center; gap: 10px; color: rgba(136,136,170,0.4); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-family: 'DM Mono', monospace; }
.dsg-info-divider::before, .dsg-info-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.05); }
.dsg-info-traditions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dsg-info-trad-label { font-size: 10px; color: var(--text-secondary); font-family: 'DM Mono', monospace; }
.dsg-info-trad-pill { font-size: 10px; font-family: 'DM Mono', monospace; padding: 3px 10px; border-radius: 100px; border: 1px solid rgba(136,136,170,0.25); }
.dsg-info-trad-dim { color: rgba(136,136,170,0.4); border-color: rgba(136,136,170,0.15); font-style: italic; }

/* -- RINGS layout -- */
.dsg-rings-col { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.dsg-ring-row {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 10px; border-radius: 12px; transition: background 0.2s;
}
.dsg-ring-row:hover { background: var(--hover-bg); }
.dsg-ring-label { width: 88px; flex-shrink: 0; }
.dsg-ring-icon { font-size: 15px; display: block; margin-bottom: 2px; }
.dsg-ring-name { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.08em; }
.dsg-ring-track { flex: 1; display: flex; align-items: center; gap: 14px; height: 44px; }
.dsg-ring-svg { width: 44px; height: 44px; flex-shrink: 0; }
.dsg-ring-bg  { fill: none; stroke-width: 4; stroke-linecap: round; opacity: 0.12; }
.dsg-ring-fg  {
  fill: none; stroke-width: 4; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  animation: dsg-ring-in 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes dsg-ring-in { from { stroke-dasharray: 0 999; opacity: 0; } }
.dsg-ring-row:nth-child(1) .dsg-ring-fg { animation-delay: 0.1s; }
.dsg-ring-row:nth-child(2) .dsg-ring-fg { animation-delay: 0.2s; }
.dsg-ring-row:nth-child(3) .dsg-ring-fg { animation-delay: 0.3s; }
.dsg-ring-row:nth-child(4) .dsg-ring-fg { animation-delay: 0.4s; }
.dsg-ring-row:nth-child(5) .dsg-ring-fg { animation-delay: 0.5s; }
.dsg-bar-wrap { flex: 1; height: 4px; background: var(--bg-card); border-radius: 100px; overflow: hidden; }
.dsg-bar { height: 100%; border-radius: 100px; animation: dsg-bar-in 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both; transform-origin: left; }
.dsg-ring-pct { font-family: 'DM Mono', monospace; font-size: 18px; font-weight: 500; width: 52px; text-align: right; flex-shrink: 0; }
.dsg-pct-symbol { font-size: 11px; opacity: 0.5; }

.dsg-summary-col { width: 200px; flex-shrink: 0; padding-left: 24px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 18px; }
.dsg-summary-score { text-align: center; }
.dsg-summary-score-label { font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 6px; }
.dsg-summary-score-num {
  font-family: 'Syne', sans-serif; font-size: 52px; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, #C4A35A, #e85d8a, #7C3AED);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.dsg-summary-score-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.dsg-summary-divider { height: 1px; background: var(--border); }
.dsg-energy-section { display: flex; flex-direction: column; gap: 8px; }
.dsg-energy-label { font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; color: var(--text-secondary); text-transform: uppercase; }
.dsg-energy-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 100px;
  background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.25);
  font-size: 13px; font-weight: 500; color: #a78bfa; width: fit-content;
}
.dsg-energy-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #7C3AED;
  box-shadow: 0 0 6px #7C3AED; animation: dsg-pulse 2s ease-in-out infinite;
}
@keyframes dsg-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(0.85)} }
.dsg-insight { font-size: 12px; line-height: 1.6; color: var(--text-secondary); }

/* -- SCORE (cosmic index) layout -- */
.dsg-body--score { justify-content: center; }
.dsg-center-gauge { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dsg-gauge-wrap { position: relative; width: 200px; height: 200px; }
.dsg-gauge-svg {
  width: 200px; height: 200px;
  transform: rotate(-225deg);
  filter: drop-shadow(0 0 20px rgba(196,163,90,0.25)) drop-shadow(0 0 40px rgba(124,58,237,0.15));
}
.dsg-gauge-bg { fill: none; stroke: var(--border); stroke-width: 10; stroke-linecap: round; }
.dsg-gauge-fill {
  fill: none; stroke-width: 10; stroke-linecap: round; stroke: url(#dsgGaugeGrad);
  stroke-dasharray: 0 502.65;
  transition: stroke-dasharray 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.dsg-gauge-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding-bottom: 16px;
}
.dsg-gauge-center-label { font-family: 'Syne', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.2em; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 4px; }
.dsg-gauge-number {
  font-family: 'Rajdhani', sans-serif; font-size: 56px; font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, #C4A35A 0%, #f0d070 50%, #e85d8a 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: dsg-count-up 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}
@keyframes dsg-count-up { from { opacity: 0; transform: scale(0.7); } }
.dsg-gauge-center-sub { font-size: 11px; color: var(--text-secondary); }
.dsg-gauge-min, .dsg-gauge-max { position: absolute; bottom: 10px; font-family: 'DM Mono', monospace; font-size: 10px; color: #3a3a52; }
.dsg-gauge-min { left: 14px; }
.dsg-gauge-max { right: 14px; }
.dsg-center-tag {
  display: flex; align-items: center; gap: 6px; padding: 6px 14px;
  border-radius: 100px; background: rgba(196,163,90,0.1); border: 1px solid rgba(196,163,90,0.2);
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 600; color: #C4A35A;
}
.dsg-center-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: #C4A35A; box-shadow: 0 0 8px rgba(196,163,90,0.6); animation: dsg-pulse 2.5s ease-in-out infinite; }
.dsg-sub-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; max-width: 280px; }
.dsg-sub-gauge {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: transform 0.2s, border-color 0.2s; cursor: default;
}
.dsg-sub-gauge:hover { transform: translateY(-2px); border-color: var(--divider); }
.dsg-sub-bg { fill: none; stroke-width: 6; stroke-linecap: round; opacity: 0.1; }
.dsg-sub-fg {
  fill: none; stroke-width: 6; stroke-linecap: round;
  transform: rotate(-225deg); transform-origin: 40px 40px;
  stroke-dasharray: 0 188.5;
  transition: stroke-dasharray 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0;
  animation: dsg-sub-fade-in 0.4s ease both;
}
@keyframes dsg-sub-fade-in { to { opacity: 1; } }
.dsg-sub-gauge:nth-child(1) .dsg-sub-fg { animation-delay: 0.6s; transition-delay: 0.6s; }
.dsg-sub-gauge:nth-child(2) .dsg-sub-fg { animation-delay: 0.75s; transition-delay: 0.75s; }
.dsg-sub-gauge:nth-child(3) .dsg-sub-fg { animation-delay: 0.9s; transition-delay: 0.9s; }
.dsg-sub-gauge:nth-child(4) .dsg-sub-fg { animation-delay: 1.05s; transition-delay: 1.05s; }
.dsg-sub-num {
  font-family: 'Rajdhani', sans-serif; font-size: 22px; font-weight: 700; line-height: 1;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateY(-4px);
}
.dsg-sub-info { text-align: center; }
.dsg-sub-name { font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #8888aa; margin-bottom: 2px; }
.dsg-sub-label { font-size: 11px; color: #8888aa; opacity: 0.7; }

/* Footer */
.dsg-card-footer {
  padding: 14px 24px; border-top: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 1; flex-wrap: wrap; gap: 10px;
}
.dsg-footer-note { font-family: 'Cormorant Garamond', serif; font-size: 14px; color: #44445a; font-style: italic; }
.dsg-unlock-btn {
  padding: 8px 20px; border-radius: 100px;
  background: linear-gradient(135deg, rgba(124,58,237,0.8), rgba(5,150,105,0.6));
  border: none; color: white; font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 500; cursor: pointer; letter-spacing: 0.02em;
  transition: opacity 0.2s, transform 0.2s;
}
.dsg-unlock-btn:hover { opacity: 0.85; transform: translateY(-1px); }

/* Responsive */
@media (max-width: 600px) {
  .dsg-body { flex-direction: column; padding: 20px 16px; gap: 20px; }
  .dsg-body--radar .dsg-radar-svg { width: 240px; height: 240px; }
  .dsg-radar-wrap { display: flex; justify-content: center; width: 100%; }
  .dsg-summary-col { width: 100%; border-left: none; border-top: 1px solid rgba(255,255,255,0.07); padding-left: 0; padding-top: 20px; }
  .dsg-body--score .dsg-sub-gauges { max-width: 100%; }
  .dsg-card-header { flex-direction: column; }
  .dsg-header-right { align-items: flex-start; }
}

/* -- DSG footer layout with badges -- */
.dsg-card-footer { display: flex; align-items: center; justify-content: space-between; }
.dsg-footer-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dsg-badges--footer { display: flex; gap: 6px; }


/* ══════════════════════════════════════════════════════════════════════════════
   CHINESE DAILY ALMANAC  (cs- = Chinese suite, ts- = Tung Shu elements)
   ══════════════════════════════════════════════════════════════════════════════ */

.cs-daily-section {
  position: relative;
  margin: 2.5rem 0;
}

.cs-daily-card {
  background: var(--bg-card);
  border: 1.5px solid transparent;
  background-clip: padding-box;
  border-radius: 16px;
  padding: 1.75rem 2rem;
  box-shadow:
    0 0 0 1.5px rgba(185, 28, 28, 0.35),
    0 8px 32px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  background-image: linear-gradient(
    135deg,
    rgba(185, 28, 28, 0.04) 0%,
    rgba(180, 130, 30, 0.03) 60%,
    transparent 100%
  );
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.cs-daily-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1.5px rgba(220, 38, 38, 0.5),
    0 14px 40px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ── Solar Term ribbon ──────────────────────────────────────────────────────── */
.ts-solar-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(90deg, rgba(185,28,28,0.15) 0%, rgba(180,130,30,0.12) 100%);
  border: 1px solid rgba(185, 28, 28, 0.25);
  border-radius: 20px;
  padding: 0.25rem 0.85rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 1.1rem;
}

.ts-solar-ribbon-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dc2626;
  flex-shrink: 0;
}

/* ── Card header ────────────────────────────────────────────────────────────── */
.cs-daily-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.35rem;
}

.cs-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #dc2626;
  margin: 0 0 0.25rem;
}

.cs-daily-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

/* Lunar date badge */
.ts-lunar-badge {
  font-size: 0.78rem;
  font-weight: 600;
  color: #b45309;
  background: rgba(180, 130, 30, 0.12);
  border: 1px solid rgba(180, 130, 30, 0.25);
  border-radius: 8px;
  padding: 0.2rem 0.65rem;
  white-space: nowrap;
}

/* ── Three-pillar table ─────────────────────────────────────────────────────── */
.ts-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.ts-pillar-col {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(185, 28, 28, 0.18);
  border-radius: 10px;
  padding: 0.9rem 0.6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  transition: border-color 0.2s;
}

.ts-pillar-col:hover {
  border-color: rgba(185, 28, 28, 0.4);
}

.ts-pillar-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted, var(--text-secondary));
  opacity: 0.7;
}

.ts-pillar-stem {
  font-size: 2rem;
  line-height: 1;
  color: #dc2626;
  font-weight: 700;
}

.ts-pillar-branch {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-primary);
  font-weight: 600;
}

.ts-pillar-animal {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.ts-pillar-element {
  font-size: 0.65rem;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-weight: 600;
}

/* ── Element weather mini-bar ───────────────────────────────────────────────── */
.ts-elem-weather {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.ts-elem-weather-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.75;
  flex-shrink: 0;
}

.ts-elem-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.18rem 0.5rem;
}

/* ── Day master flavor line ─────────────────────────────────────────────────── */
.ts-day-master-line {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.ts-day-master-em {
  font-weight: 700;
  color: var(--text-primary);
}

/* ── Officer badge ──────────────────────────────────────────────────────────── */
.ts-officer-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.ts-officer-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.7;
}

.ts-officer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 0.2rem 0.6rem;
}

.ts-officer-badge--auspicious {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
}

.ts-officer-badge--inauspicious {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444;
}

/* Mansion pill */
.ts-mansion-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
}

/* ── Yi/Ji (宜/忌) activities ───────────────────────────────────────────────── */
.ts-activities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.ts-activity-col-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

.ts-activity-col-label--yi { color: #10b981; }
.ts-activity-col-label--ji { color: #ef4444; }

.ts-activity-items {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.ts-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.76rem;
  line-height: 1.35;
}

.ts-activity-item--yi .ts-act-icon { color: #10b981; }
.ts-activity-item--ji .ts-act-icon { color: #ef4444; }

.ts-act-zh {
  font-weight: 600;
  color: var(--text-primary);
}

.ts-act-en {
  color: var(--text-secondary);
  font-size: 0.7rem;
}

/* ── Directions ─────────────────────────────────────────────────────────────── */
.ts-directions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.ts-dir-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.7;
  flex-shrink: 0;
}

.ts-dir-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(180, 130, 30, 0.12);
  border: 1px solid rgba(180, 130, 30, 0.25);
  border-radius: 20px;
  padding: 0.18rem 0.55rem;
  color: #b45309;
}

.ts-dir-god {
  font-size: 0.65rem;
  opacity: 0.8;
}

/* ── Peng Zu taboo strip ────────────────────────────────────────────────────── */
.ts-pengzu {
  font-size: 0.72rem;
  color: var(--text-secondary);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 0.75rem;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
}

.ts-pengzu-label {
  font-weight: 700;
  color: var(--text-primary);
  margin-right: 0.35rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Personalized pillar comparison table ───────────────────────────────────── */
.ts-personal-section {
  border-top: 1px solid rgba(185, 28, 28, 0.2);
  margin-top: 1.1rem;
  padding-top: 1.1rem;
}

.ts-personal-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #dc2626;
  margin-bottom: 0.75rem;
}

.ts-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-bottom: 0.85rem;
}

.ts-compare-table th {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0.25rem 0.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.ts-compare-table td {
  padding: 0.35rem 0.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.ts-compare-row-label {
  text-align: left !important;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  opacity: 0.75;
}

.ts-pillar-cell {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.ts-pillar-cell span {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-secondary);
  display: block;
  margin-top: 0.1rem;
}

/* Relation badges */
.ts-rel-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 0.12rem 0.4rem;
  letter-spacing: 0.03em;
}

.ts-rel-clash    { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); color: #ef4444; }
.ts-rel-harmony  { background: rgba(16,185,129,0.13); border: 1px solid rgba(16,185,129,0.28); color: #10b981; }
.ts-rel-echo     { background: rgba(168,85,247,0.13); border: 1px solid rgba(168,85,247,0.28); color: #a855f7; }
.ts-rel-neutral  { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: var(--text-secondary); }

/* Day master tone block */
.ts-dm-tone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
}

.ts-dm-tone-badge {
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
}

.ts-tone-pos     { background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); color: #10b981; }
.ts-tone-neutral { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: var(--text-secondary); }
.ts-tone-neg     { background: rgba(239,68,68,0.13); border: 1px solid rgba(239,68,68,0.25); color: #ef4444; }

.ts-dm-desc { color: var(--text-secondary); font-size: 0.76rem; }

/* Activity caution flag */
.ts-clash-flag {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  font-size: 0.74rem;
  color: #ef4444;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

/* ── Login CTA (guest) ──────────────────────────────────────────────────────── */
.cs-login-cta {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cs-cta-teaser {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
  min-width: 0;
}

.cs-cta-btn {
  background: linear-gradient(135deg, #dc2626, #b45309);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1.1rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s, transform 0.18s;
  letter-spacing: 0.02em;
}

.cs-cta-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* ── Skeleton loading ───────────────────────────────────────────────────────── */
.cs-skeleton .cs-sk-bar {
  background: rgba(255,255,255,0.07);
  border-radius: 6px;
  height: 14px;
  margin-bottom: 0.6rem;
  animation: cs-shimmer 1.5s infinite;
}
.cs-skeleton .cs-sk-bar--medium { width: 55%; height: 18px; }
.cs-skeleton .cs-sk-bar { width: 90%; }
.cs-skeleton .cs-sk-bar--short  { width: 35%; }

@keyframes cs-shimmer {
  0%   { opacity: 0.5; }
  50%  { opacity: 1; }
  100% { opacity: 0.5; }
}

/* ── Element colours ────────────────────────────────────────────────────────── */
.cs-elem-wood  { background: rgba(34,197,94,0.14);  border: 1px solid rgba(34,197,94,0.28);  color: #22c55e; }
.cs-elem-fire  { background: rgba(239,68,68,0.14);  border: 1px solid rgba(239,68,68,0.28);  color: #ef4444; }
.cs-elem-earth { background: rgba(180,130,30,0.15); border: 1px solid rgba(180,130,30,0.3);  color: #d97706; }
.cs-elem-metal { background: rgba(148,163,184,0.14);border: 1px solid rgba(148,163,184,0.28);color: #94a3b8; }
.cs-elem-water { background: rgba(59,130,246,0.14); border: 1px solid rgba(59,130,246,0.28); color: #3b82f6; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cs-daily-card { padding: 1.25rem 1rem; }
  .ts-pillars { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .ts-pillar-stem { font-size: 1.5rem; }
  .ts-pillar-branch { font-size: 1.1rem; }
  .ts-activities { grid-template-columns: 1fr; gap: 0.6rem; }
  .cs-login-cta { flex-direction: column; align-items: flex-start; }
  .ts-compare-table { font-size: 0.7rem; }
}


/* ════════════════════════════════════════════════════════════════════════════
   THAI DAILY CARD — th-daily-*
   Palette: blue #2E55A0 / maroon #8B1A1A / cream #F5F0E8 / dark-accent #6B8FD4
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Section wrapper ──────────────────────────────────────────────────────── */
.th-daily-section {
  position: relative;
  margin: 2.5rem 0;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.th-daily-card {
  background: #F5F0E8;
  border: 1.5px solid transparent;
  background-clip: padding-box;
  border-radius: 16px;
  padding: 1.75rem 2rem;
  box-shadow:
    0 0 0 1.5px rgba(139, 26, 26, 0.35),
    0 8px 32px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  font-family: 'Noto Sans Thai', 'Sarabun', sans-serif;
}

/* Yantra watermark */
.th-daily-card::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 260px; height: 260px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%238B1A1A' stroke-width='0.6'/%3E%3Cpolygon points='50,10 90,75 10,75' fill='none' stroke='%238B1A1A' stroke-width='0.6'/%3E%3Cpolygon points='50,90 10,25 90,25' fill='none' stroke='%238B1A1A' stroke-width='0.6'/%3E%3Ccircle cx='50' cy='50' r='8' fill='none' stroke='%238B1A1A' stroke-width='0.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

/* Top border diamond */
.th-daily-card-border {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(80, 12, 12, 0.75);
  border-radius: 16px 16px 0 0;
}
.th-daily-card-diamond {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  color: #2E55A0;
  font-size: 0.9rem;
  line-height: 1;
  background: #F5F0E8;
  padding: 0 4px;
}

/* ── Dark mode ────────────────────────────────────────────────────────────── */
html[data-theme=dark] .th-daily-card {
  background: #1a1410;
  box-shadow:
    0 0 0 1.5px rgba(46, 85, 160, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-theme=dark] .th-daily-card-diamond {
  background: #1a1410;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.th-daily-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}

.th-daily-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8B1A1A;
  font-weight: 700;
  opacity: 0.85;
  margin-bottom: 0.15rem;
}

.th-daily-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #8B1A1A;
  line-height: 1.2;
  margin: 0;
}

html[data-theme=dark] .th-daily-eyebrow { color: #6B8FD4; }
html[data-theme=dark] .th-daily-title   { color: #6B8FD4; }

/* ── Skeleton ─────────────────────────────────────────────────────────────── */
.th-sk-bar {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(139,26,26,0.08) 25%, rgba(139,26,26,0.15) 50%, rgba(139,26,26,0.08) 75%);
  background-size: 200% 100%;
  animation: th-shimmer 1.4s ease infinite;
  margin-bottom: 0.6rem;
}
.th-sk-bar--medium { width: 55%; }
.th-sk-bar--short  { width: 35%; }

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

/* ── Tab bar ──────────────────────────────────────────────────────────────── */
.th-daily-tabs {
  display: flex;
  gap: 0;
  background: #8B1A1A;
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
  z-index: 1;
}
.th-daily-tabs::-webkit-scrollbar { display: none; }
html[data-theme=dark] .th-daily-tabs { background: rgba(30, 8, 8, 0.85); }

.th-tab {
  flex: 1;
  min-width: 80px;
  padding: 0.45rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(245, 240, 232, 0.75);
  border-radius: 5px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
  text-align: center;
  font-family: 'Noto Sans Thai', 'Sarabun', sans-serif;
}

.th-tab:hover {
  color: #F5F0E8;
  background: rgba(46, 85, 160, 0.15);
}

.th-tab.th-tab--active {
  background: #2E55A0;
  color: #FFFFFF;
  font-weight: 700;
}

/* ── Tab panels ───────────────────────────────────────────────────────────── */
.th-tab-panel {
  position: relative;
  z-index: 1;
}

/* ── Wan Phra banner ──────────────────────────────────────────────────────── */
.th-wan-phra-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.9rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 0.03em;
}

.th-wan-phra-banner--active {
  background: linear-gradient(90deg, rgba(46,85,160,0.18) 0%, rgba(46,85,160,0.08) 100%);
  border: 1px solid rgba(46, 85, 160, 0.45);
  color: #8B1A1A;
}

.th-wan-phra-banner--next {
  background: rgba(139, 26, 26, 0.07);
  border: 1px solid rgba(139, 26, 26, 0.2);
  color: #8B1A1A;
  opacity: 0.75;
}

html[data-theme=dark] .th-wan-phra-banner--active {
  color: #6B8FD4;
  background: rgba(46,85,160,0.15);
}
html[data-theme=dark] .th-wan-phra-banner--next {
  color: rgba(245, 240, 232, 0.6);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}

/* ── Score arc row ────────────────────────────────────────────────────────── */
.th-score-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}

.th-score-arc-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.th-score-arc-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.th-score-arc-svg { color: #2E55A0; }
html[data-theme=dark] .th-score-arc-svg { color: #6B8FD4; }

.th-score-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #2E55A0;
  line-height: 1;
}

.th-score-max {
  font-size: 0.6rem;
  color: #6B4226;
  opacity: 0.7;
}

html[data-theme=dark] .th-score-max { color: rgba(245,240,232,0.5); }

.th-score-info {
  flex: 1;
  min-width: 120px;
}

.th-quality-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: #8B1A1A;
  margin-bottom: 0.2rem;
}

.th-quality-desc {
  font-size: 0.78rem;
  color: #6B4226;
  line-height: 1.4;
}

html[data-theme=dark] .th-quality-label { color: #6B8FD4; }
html[data-theme=dark] .th-quality-desc  { color: rgba(245,240,232,0.6); }

/* ── Data rows ────────────────────────────────────────────────────────────── */
.th-data-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(46, 85, 160, 0.2);
}

.th-data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(46, 85, 160, 0.12);
  gap: 0.5rem;
}

.th-data-label {
  font-size: 0.72rem;
  color: #6B4226;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.th-data-value {
  font-size: 0.82rem;
  color: #3a2010;
  text-align: right;
  font-family: 'Noto Sans Thai', 'Sarabun', sans-serif;
}

html[data-theme=dark] .th-data-label { color: rgba(107,143,212,0.8); }
html[data-theme=dark] .th-data-value { color: rgba(245,240,232,0.85); }

/* ── Quality badges ───────────────────────────────────────────────────────── */
.th-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.th-badge--auspicious {
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.35);
  color: #15803d;
}

.th-badge--inauspicious {
  background: rgba(100, 116, 139, 0.10);
  border: 1px solid rgba(100, 116, 139, 0.25);
  color: #475569;
}

html[data-theme=dark] .th-badge--auspicious { color: #4ade80; background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.3); }
html[data-theme=dark] .th-badge--inauspicious { color: rgba(148,163,184,0.75); background: rgba(100,116,139,0.08); border-color: rgba(100,116,139,0.2); }

/* Current yam row: badge always blue regardless of quality */
.th-yam-row--current .th-badge {
  background: rgba(46, 85, 160, 0.18);
  border-color: rgba(46, 85, 160, 0.4);
  color: #2E55A0;
}
html[data-theme=dark] .th-yam-row--current .th-badge {
  background: rgba(46, 85, 160, 0.2);
  border-color: rgba(107, 143, 212, 0.4);
  color: #6B8FD4;
}

/* ── Tab 1 Sky ────────────────────────────────────────────────────────────── */
.th-sky-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.th-sky-cell {
  background: rgba(139, 26, 26, 0.04);
  border: 1px solid rgba(46, 85, 160, 0.18);
  border-radius: 10px;
  padding: 0.75rem;
}

html[data-theme=dark] .th-sky-cell {
  background: rgba(255,255,255,0.03);
  border-color: rgba(46,85,160,0.15);
}

.th-sky-cell-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8B1A1A;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

html[data-theme=dark] .th-sky-cell-label { color: #6B8FD4; opacity: 0.8; }

.th-sky-cell-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: #3a2010;
  font-family: 'Noto Sans Thai', 'Sarabun', sans-serif;
  line-height: 1.3;
}

html[data-theme=dark] .th-sky-cell-value { color: rgba(245,240,232,0.9); }

.th-sky-cell-sub {
  font-size: 0.7rem;
  color: #6B4226;
  margin-top: 0.2rem;
}

html[data-theme=dark] .th-sky-cell-sub { color: rgba(245,240,232,0.5); }

/* Planet glyph */
.th-planet-glyph {
  font-size: 2.2rem;
  color: #8B1A1A;
  line-height: 1;
  font-family: 'Noto Sans Thai', 'Sarabun', sans-serif;
}

html[data-theme=dark] .th-planet-glyph { color: #6B8FD4; }

/* Lucky color swatch */
.th-color-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(139,26,26,0.3);
  vertical-align: middle;
  margin-right: 6px;
  flex-shrink: 0;
}

/* ── Tab 2 Yam Table ──────────────────────────────────────────────────────── */
.th-yam-loading {
  text-align: center;
  padding: 1.5rem;
  color: #6B4226;
  font-size: 0.8rem;
}

html[data-theme=dark] .th-yam-loading { color: rgba(245,240,232,0.5); }

.th-yam-current-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(46,85,160,0.18) 0%, rgba(46,85,160,0.08) 100%);
  border: 1px solid rgba(46, 85, 160, 0.45);
  color: #8B1A1A;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
  font-family: 'Noto Sans Thai', 'Sarabun', sans-serif;
}

html[data-theme=dark] .th-yam-current-pill { color: #6B8FD4; }

.th-hora-line {
  font-size: 0.75rem;
  color: #6B4226;
  margin-bottom: 0.85rem;
  padding: 0.35rem 0.7rem;
  background: rgba(139,26,26,0.04);
  border-radius: 6px;
  border-left: 3px solid rgba(46,85,160,0.4);
}

html[data-theme=dark] .th-hora-line { color: rgba(245,240,232,0.6); background: rgba(255,255,255,0.03); }

.th-yam-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  margin-bottom: 0.75rem;
}

.th-yam-table th {
  text-align: left;
  padding: 0.35rem 0.5rem;
  color: #8B1A1A;
  font-weight: 700;
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid rgba(46,85,160,0.25);
}

html[data-theme=dark] .th-yam-table th { color: #6B8FD4; border-color: rgba(107,143,212,0.2); }

.th-yam-table td {
  padding: 0.45rem 0.5rem;
  color: #3a2010;
  border-bottom: 1px solid rgba(46,85,160,0.10);
  font-family: 'Noto Sans Thai', 'Sarabun', sans-serif;
}

html[data-theme=dark] .th-yam-table td { color: rgba(245,240,232,0.8); border-color: rgba(255,255,255,0.06); }

.th-yam-row--current {
  border-left: 4px solid #2E55A0;
}

/* dark mode yam pulse handled by yamRowBreatheDark animation */

.th-yam-row--current td:first-child {
  padding-left: 0.35rem;
}

/* ── Tab 3 Your Chart ─────────────────────────────────────────────────────── */
.th-chart-gate {
  position: relative;
}

.th-blur-rows {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
  margin-bottom: 0.5rem;
}

.th-chart-cta-box {
  text-align: center;
  padding: 1.25rem;
  border: 1px dashed rgba(46,85,160,0.3);
  border-radius: 10px;
  background: rgba(46,85,160,0.04);
  margin-top: 0.75rem;
}

.th-chart-cta-link {
  color: #8B1A1A;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.th-chart-cta-link:hover { color: #2E55A0; }

html[data-theme=dark] .th-chart-cta-box { background: rgba(46,85,160,0.08); border-color: rgba(107,143,212,0.25); }
html[data-theme=dark] .th-chart-cta-link { color: #6B8FD4; }
html[data-theme=dark] .th-chart-cta-link:hover { color: #9bb8e8; }

/* Takha octagon mini */
.th-takha-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.th-takha-svg-wrap {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
}

.th-takha-info {
  flex: 1;
  min-width: 120px;
}

.th-takha-position-label {
  font-size: 0.7rem;
  color: #6B4226;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.2rem;
}

html[data-theme=dark] .th-takha-position-label { color: rgba(107,143,212,0.65); }

.th-takha-position-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: #8B1A1A;
  font-family: 'Noto Sans Thai', 'Sarabun', sans-serif;
}

html[data-theme=dark] .th-takha-position-value { color: #6B8FD4; }

/* Dasa progress bar */
.th-dasa-bar-wrap {
  background: rgba(139,26,26,0.1);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
  margin-top: 0.35rem;
}

.th-dasa-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2E55A0, #4A7EC0);
  border-radius: 4px;
  transition: width 0.6s ease;
}

/* Login CTA */
.th-daily-cta {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  border-top: 1px solid rgba(46,85,160,0.25);
  padding-top: 1rem;
}

.th-daily-cta-teaser {
  font-size: 0.78rem;
  color: #6B4226;
  flex: 1;
  min-width: 160px;
}

html[data-theme=dark] .th-daily-cta-teaser { color: rgba(245,240,232,0.55); }

.th-daily-cta-btn {
  padding: 0.45rem 1rem;
  background: #8B1A1A;
  color: #F5F0E8;
  border: none;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s;
  font-family: 'Noto Sans Thai', 'Sarabun', sans-serif;
  flex-shrink: 0;
}

.th-daily-cta-btn:hover { background: #2E55A0; color: #FFFFFF; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .th-daily-card { padding: 1.25rem 1rem; }
  .th-sky-grid { grid-template-columns: 1fr; }
  .th-tab { font-size: 0.65rem; min-width: 70px; padding: 0.4rem 0.4rem; }
  .th-takha-row { flex-direction: column; align-items: flex-start; }
  .th-daily-cta { flex-direction: column; align-items: flex-start; }
}

/* ── Thai card timezone note ──────────────────────────────── */
.th-tz-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(46,85,160,0.2);
  font-size: 0.72rem;
  color: #6B4226;
  opacity: 0.75;
  font-family: 'Noto Sans Thai', sans-serif;
}
.th-tz-icon { font-size: 0.8rem; }
.th-tz-sep  { opacity: 0.4; }
html[data-theme=dark] .th-tz-note { color: rgba(107,143,212,0.6); }

/* ── Yam table local-time column ──────────────────────────── */
.th-yam-tz-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.55;
  margin-left: 3px;
  vertical-align: middle;
}
.th-yam-local-col {
  color: var(--text-secondary);
  font-size: 0.78rem;
}

/* ── Thai ยาม day/night section headers (added 2026-04-27) ──────────────────── */
.th-yam-section-header td {
  padding: 0.4rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2E55A0;
  background: rgba(46,85,160,0.08);
  border-top: 1px solid rgba(46,85,160,0.25);
}
.th-yam-section-header--night td {
  color: #98a4b8;
  background: rgba(100,120,160,0.06);
  border-top: 1px solid rgba(100,120,160,0.2);
}

/* ── Yam current row pulse animation ──────────────────────── */
@keyframes yamRowBreathe {
  0%, 100% { background: rgba(46,85,160,0.08); }
  50%       { background: rgba(46,85,160,0.18); }
}
@keyframes yamRowBreatheDark {
  0%, 100% { background: rgba(46,85,160,0.12); }
  50%       { background: rgba(46,85,160,0.28); }
}
@keyframes yamDotPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.7); }
}

.th-yam-row--current {
  border-left: 4px solid #2E55A0;
  animation: yamRowBreathe 3s ease-in-out infinite;
}
html[data-theme=dark] .th-yam-row--current {
  animation: yamRowBreatheDark 3s ease-in-out infinite;
}

/* Live dot before ยาม number */
.th-yam-row--current td:first-child::before {
  content: '●';
  color: #2E55A0;
  font-size: 0.55rem;
  margin-right: 5px;
  vertical-align: middle;
  display: inline-block;
  animation: yamDotPulse 2s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LANNA DAILY CARD  (ln-*)
   Prefix: ln-  |  Alpine: lannaDailyCard
   Palette: Lanna authentic — temple gold, lacquer black, rice paper, etc.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties (Lanna palette) ──────────────────────────────── */
:root {
  --ln-lacquer-black:  #0F1419;
  --ln-rice-paper:     #FBF8F1;
  --ln-temple-gold:    #C9A45C;
  --ln-ochre-stone:    #C4943A;
  --ln-cinnabar-red:   #B8391C;
  --ln-teak:           #7A5C3E;
  --ln-celadon:        #93A287;
  --ln-chedi-white:    #EDE8DC;
  --ln-manuscript-ink: #1C1410;
  --ln-mo-hom:         #26314A;
  --ln-lue-yellow:     #E59518;
  /* Quality badge fills */
  --ln-q-gold:         rgba(201,164,92,0.18);
  --ln-q-yellow:       rgba(229,149,24,0.18);
  --ln-q-celadon:      rgba(147,162,135,0.18);
  --ln-q-terracotta:   rgba(184,57,28,0.12);
  --ln-q-mohom:        rgba(38,49,74,0.22);
}

/* ── Section wrapper ────────────────────────────────────────────────────── */
.ln-section {
  margin: 2.5rem auto;
}

/* ── Card shell ─────────────────────────────────────────────────────────── */
.ln-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid rgba(201,164,92,0.35);
  border-radius: 14px;
  padding: 1.75rem 1.5rem 1.5rem;
  overflow: hidden;
}

/* Yantra watermark */
.ln-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23C9A45C' stroke-width='0.6' opacity='0.06'%3E%3Crect x='20' y='20' width='40' height='40' transform='rotate(45 40 40)'/%3E%3Crect x='15' y='15' width='50' height='50' transform='rotate(45 40 40)'/%3E%3Ccircle cx='40' cy='40' r='25'/%3E%3Ccircle cx='40' cy='40' r='18'/%3E%3Cline x1='40' y1='15' x2='40' y2='65'/%3E%3Cline x1='15' y1='40' x2='65' y2='40'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 80px 80px;
  opacity: 0.035;
  pointer-events: none;
  border-radius: 14px;
}

/* Gold ring accent top */
.ln-card-border {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--ln-temple-gold) 30%, var(--ln-ochre-stone) 70%, transparent);
  border-radius: 14px 14px 0 0;
}

/* Diamond ornament */
.ln-card-diamond {
  position: absolute;
  top: -1px; left: 50%; transform: translateX(-50%);
  color: var(--ln-temple-gold);
  font-size: 0.6rem;
  line-height: 1;
  opacity: 0.8;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.ln-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 0.75rem;
}
.ln-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ln-temple-gold);
  margin: 0 0 0.2rem;
  font-family: 'DM Mono', monospace;
}
.ln-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}
.ln-header-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(201,164,92,0.12);
  border: 1px solid rgba(201,164,92,0.3);
  border-radius: 20px;
  padding: 0.3rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ln-temple-gold);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Skeleton ───────────────────────────────────────────────────────────── */
.ln-sk-bar {
  height: 14px;
  background: var(--skeleton-bg, rgba(128,128,128,0.1));
  border-radius: 6px;
  margin-bottom: 0.6rem;
  animation: pulse 1.5s ease-in-out infinite;
}
.ln-sk-bar--wide  { width: 80%; }
.ln-sk-bar--med   { width: 60%; }
.ln-sk-bar--short { width: 40%; }

/* ── Tab bar ────────────────────────────────────────────────────────────── */
.ln-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid rgba(201,164,92,0.15);
  margin-bottom: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.ln-tabs::-webkit-scrollbar { display: none; }
.ln-tab {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0.5rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: 4px 4px 0 0;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
  font-family: 'Noto Sans Thai', sans-serif;
  white-space: nowrap;
}
.ln-tab:hover {
  color: var(--ln-temple-gold);
  background: rgba(201,164,92,0.06);
}
.ln-tab--active {
  color: var(--ln-temple-gold);
  border-bottom-color: var(--ln-temple-gold);
  background: rgba(201,164,92,0.09);
}

/* ── Tab panel ──────────────────────────────────────────────────────────── */
.ln-tab-panel {
  min-height: 200px;
}

/* ── TAB 0: วันนี้ ──────────────────────────────────────────────────────── */
.ln-hero-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}
.ln-day-hero {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--ln-temple-gold);
  line-height: 1;
  letter-spacing: -0.01em;
  font-family: 'Noto Sans Thai', 'Cormorant', serif;
}
.ln-day-meta {
  flex: 1;
  min-width: 0;
}
.ln-lunar-date {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
  font-family: 'Noto Sans Thai', sans-serif;
}
.ln-year-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(201,164,92,0.12);
  border: 1px solid rgba(201,164,92,0.28);
  border-radius: 20px;
  padding: 0.2rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ln-temple-gold);
  font-family: 'Noto Sans Thai', sans-serif;
}
.ln-cs-label {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.04em;
}
.ln-data-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ln-data-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(201,164,92,0.08);
  font-size: 0.85rem;
}
.ln-data-row:last-child { border-bottom: none; }
.ln-data-label {
  color: var(--text-secondary);
  font-size: 0.78rem;
  flex-shrink: 0;
  font-family: 'Noto Sans Thai', sans-serif;
}
.ln-data-value {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
  font-family: 'Noto Sans Thai', sans-serif;
}

/* ── TAB 1: ดิถี-โชค ────────────────────────────────────────────────────── */
.ln-dq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 480px) { .ln-dq-grid { grid-template-columns: 1fr; } }

.ln-dq-box {
  background: rgba(201,164,92,0.05);
  border: 1px solid rgba(201,164,92,0.15);
  border-radius: 10px;
  padding: 0.85rem 0.9rem;
}
.ln-dq-box-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
  font-family: 'DM Mono', monospace;
}
.ln-dq-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'Noto Sans Thai', sans-serif;
  margin-bottom: 0.3rem;
}
.ln-dq-en {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 0.6rem;
}

/* Dithi dots (5-dot indicator) */
.ln-dithi-dots {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}
.ln-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(201,164,92,0.15);
  border: 1.5px solid rgba(201,164,92,0.3);
  transition: background 0.2s;
}
.ln-dot--on {
  background: var(--ln-temple-gold);
  border-color: var(--ln-temple-gold);
  box-shadow: 0 0 5px rgba(201,164,92,0.5);
}
.ln-dot--today {
  background: var(--ln-ochre-stone);
  border-color: var(--ln-ochre-stone);
  box-shadow: 0 0 8px rgba(196,148,58,0.7);
  transform: scale(1.2);
}

/* Chok level meter */
.ln-chok-meter {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}
.ln-meter-seg {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(201,164,92,0.12);
  transition: background 0.2s;
}
.ln-meter-seg--fill { background: var(--ln-temple-gold); }
.ln-meter-seg--fill-2 { background: var(--ln-lue-yellow); }

.ln-quality-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 12px;
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-family: 'Noto Sans Thai', sans-serif;
}
.ln-q-gold      { background: var(--ln-q-gold);       color: var(--ln-temple-gold);  border: 1px solid rgba(201,164,92,0.35); }
.ln-q-yellow    { background: var(--ln-q-yellow);     color: var(--ln-lue-yellow);   border: 1px solid rgba(229,149,24,0.35); }
.ln-q-celadon   { background: var(--ln-q-celadon);    color: var(--ln-celadon);      border: 1px solid rgba(147,162,135,0.4); }
.ln-q-terracotta{ background: var(--ln-q-terracotta); color: var(--ln-cinnabar-red); border: 1px solid rgba(184,57,28,0.3); }
.ln-q-mohom     { background: var(--ln-q-mohom);      color: var(--ln-mo-hom);       border: 1px solid rgba(38,49,74,0.3); }

/* Prasatha warning chip */
.ln-prasatha-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(184,57,28,0.07);
  border: 1px solid rgba(184,57,28,0.25);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.9rem;
  font-size: 0.78rem;
  color: var(--ln-cinnabar-red);
  font-family: 'Noto Sans Thai', sans-serif;
}
.ln-prasatha-icon { font-size: 0.9rem; flex-shrink: 0; }

/* Suitable-for list */
.ln-suitable-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.ln-suitable-item {
  background: rgba(147,162,135,0.12);
  border: 1px solid rgba(147,162,135,0.3);
  border-radius: 16px;
  padding: 0.2rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ln-celadon);
  font-family: 'Noto Sans Thai', sans-serif;
}
.ln-suitable-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0.8rem 0 0.4rem;
  font-family: 'DM Mono', monospace;
}

/* Overall quality badge row */
.ln-overall-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(201,164,92,0.1);
}
.ln-overall-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.08em;
}

/* ── TAB 2: ดาว-กอง ─────────────────────────────────────────────────────── */
.ln-nak-hero {
  text-align: center;
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: rgba(201,164,92,0.06);
  border: 1px solid rgba(201,164,92,0.15);
  border-radius: 10px;
}
.ln-nak-lanna {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ln-temple-gold);
  font-family: 'Noto Sans Thai', 'Cormorant', serif;
  line-height: 1.15;
}
.ln-nak-central {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  font-family: 'Noto Sans Thai', sans-serif;
}
.ln-nak-num {
  font-size: 0.68rem;
  font-family: 'DM Mono', monospace;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  opacity: 0.7;
}

/* Kao Kong 3x3 grid */
.ln-kao-grid-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  font-family: 'DM Mono', monospace;
}
.ln-kao-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
  margin-bottom: 1rem;
}
.ln-kao-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: 700;
  background: rgba(201,164,92,0.05);
  border: 1px solid rgba(201,164,92,0.12);
  color: var(--text-secondary);
  font-family: 'DM Mono', monospace;
  transition: all 0.2s;
  position: relative;
}
.ln-kao-cell--today {
  background: rgba(201,164,92,0.2);
  border-color: var(--ln-temple-gold);
  color: var(--ln-temple-gold);
  font-size: 1.3rem;
  box-shadow: 0 0 12px rgba(201,164,92,0.3);
}
.ln-kao-cell-label {
  position: absolute;
  bottom: 2px; right: 3px;
  font-size: 0.42rem;
  opacity: 0.5;
  letter-spacing: 0;
}

/* Wan-Di type tag */
.ln-wandi-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(201,164,92,0.1);
  border: 1px solid rgba(201,164,92,0.25);
  border-radius: 20px;
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ln-temple-gold);
  font-family: 'Noto Sans Thai', sans-serif;
  margin-top: 0.5rem;
}
.ln-wandi-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 0.4rem;
  font-family: 'Noto Sans Thai', sans-serif;
  line-height: 1.5;
}

/* ── TAB 3: บุญ-วัด ─────────────────────────────────────────────────────── */
.ln-temple-card {
  background: rgba(201,164,92,0.06);
  border: 1px solid rgba(201,164,92,0.2);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.ln-temple-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
  font-family: 'DM Mono', monospace;
}
.ln-temple-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ln-temple-gold);
  font-family: 'Noto Sans Thai', 'Cormorant', serif;
  margin-bottom: 0.2rem;
}
.ln-temple-location {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-family: 'Noto Sans Thai', sans-serif;
}
.ln-temple-zodiac {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: var(--ln-ochre-stone);
  font-weight: 600;
  font-family: 'Noto Sans Thai', sans-serif;
}

/* Festivals list */
.ln-festivals-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
  font-family: 'DM Mono', monospace;
}
.ln-festival-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(201,164,92,0.08);
}
.ln-festival-row:last-child { border-bottom: none; }
.ln-festival-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ln-temple-gold);
  flex-shrink: 0;
  opacity: 0.5;
}
.ln-festival-dot--next {
  background: var(--ln-lue-yellow);
  opacity: 1;
  box-shadow: 0 0 6px rgba(229,149,24,0.5);
}
.ln-festival-name {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'Noto Sans Thai', sans-serif;
}
.ln-festival-month {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.04em;
}
.ln-festival-next-chip {
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(229,149,24,0.15);
  border: 1px solid rgba(229,149,24,0.4);
  border-radius: 10px;
  padding: 0.1rem 0.45rem;
  color: var(--ln-lue-yellow);
}

/* ── Timezone note ──────────────────────────────────────────────────────── */
.ln-tz-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(201,164,92,0.12);
  font-size: 0.7rem;
  color: var(--ln-teak);
  opacity: 0.75;
  font-family: 'Noto Sans Thai', sans-serif;
}
html[data-theme=dark] .ln-tz-note { color: rgba(201,164,92,0.5); }

/* ── Guest CTA ──────────────────────────────────────────────────────────── */
.ln-cta {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  background: rgba(201,164,92,0.07);
  border: 1px dashed rgba(201,164,92,0.3);
  border-radius: 10px;
  text-align: center;
}
.ln-cta-teaser {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0 0 0.6rem;
  font-family: 'Noto Sans Thai', sans-serif;
}
.ln-cta-btn {
  display: inline-block;
  background: var(--ln-temple-gold);
  color: #0F1419;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.5rem 1.25rem;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.18s;
  font-family: 'Noto Sans Thai', sans-serif;
}
.ln-cta-btn:hover { opacity: 0.88; transform: translateY(-1px); }

/* ── Dark theme overrides ───────────────────────────────────────────────── */
html[data-theme=dark] .ln-card {
  border-color: rgba(201,164,92,0.25);
}
html[data-theme=dark] .ln-dq-box {
  background: rgba(201,164,92,0.04);
  border-color: rgba(201,164,92,0.12);
}
html[data-theme=dark] .ln-temple-card {
  background: rgba(201,164,92,0.04);
  border-color: rgba(201,164,92,0.15);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .ln-day-hero { font-size: 1.8rem; }
  .ln-title    { font-size: 1.1rem; }
  .ln-tab      { font-size: 0.7rem; padding: 0.4rem 0.6rem; }
}


/* ═══════════════════════════════════════════════════════════════
   KOREAN DAILY CARD — 사주팔자 四柱八字
   Obangsaek palette + hanji/dancheong aesthetic
   ═══════════════════════════════════════════════════════════════ */

/* CSS variables — Obangsaek 오방색 */
:root {
  --kr-ink-navy:    #0c1a2e;
  --kr-hanji:       #FAF8F4;
  --kr-dancheong:   #1a3c6e;
  --kr-korean-red:  #C8102E;
  --kr-gold:        #D4A017;
  --kr-ink-text:    #1a1a2e;
  --kr-white-text:  #EEF0F5;
  --kr-cheong:      #1a3c6e;
  --kr-jeok:        #C8102E;
  --kr-hwang:       #D4A017;
  --kr-baek:        #8a8a8a;
  --kr-heuk:        #1a1a2e;
  /* Element colors */
  --kr-wood:  #4CAF50;
  --kr-fire:  #E53935;
  --kr-earth: #F9A825;
  --kr-metal: #9E9E9E;
  --kr-water: #1565C0;
}

/* ── Section wrapper ─────────────────────────────────────────── */
.kr-daily-section {
  padding: 3rem 0;
  background: transparent;
}

/* ── Card shell ──────────────────────────────────────────────── */
.kr-daily-card {
  background: var(--kr-ink-navy);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(12, 26, 46, 0.55), 0 2px 8px rgba(0,0,0,0.2);
  position: relative;
  color: var(--kr-white-text);
  margin: 0 auto;
}

/* ── Obangsaek top ribbon ────────────────────────────────────── */
.kr-obangsaek-ribbon {
  display: flex;
  height: 5px;
  width: 100%;
}
.kr-obangsaek-ribbon span {
  flex: 1;
}
.kr-ob-cheong { background: var(--kr-cheong); }
.kr-ob-jeok   { background: var(--kr-jeok); }
.kr-ob-hwang  { background: var(--kr-hwang); }
.kr-ob-baek   { background: var(--kr-baek); }
.kr-ob-heuk   { background: var(--kr-heuk); }

/* ── Header ──────────────────────────────────────────────────── */
.kr-daily-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem 1.6rem 0.8rem;
  gap: 1rem;
}
.kr-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kr-gold);
  margin: 0 0 0.3rem;
  font-weight: 600;
}
.kr-daily-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--kr-white-text);
  margin: 0;
  line-height: 1.25;
}
.kr-header-hanja {
  font-size: 2rem;
  font-weight: 900;
  color: var(--kr-gold);
  line-height: 1;
  opacity: 0.85;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ── Tabs ────────────────────────────────────────────────────── */
.kr-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 0 1rem;
  gap: 0.2rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.kr-tabs::-webkit-scrollbar { display: none; }
.kr-tab {
  background: none;
  border: none;
  color: rgba(238,240,245,0.55);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.65rem 0.9rem;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
  letter-spacing: 0.02em;
}
.kr-tab:hover { color: var(--kr-white-text); }
.kr-tab.kr-tab--active {
  color: var(--kr-gold);
  border-bottom-color: var(--kr-gold);
}

/* ── Tab panels ──────────────────────────────────────────────── */
.kr-tab-panel {
  padding: 1.4rem 1.6rem 1.6rem;
}

/* ── Tab 0: Today ────────────────────────────────────────────── */
.kr-today-hero {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 1.2rem;
}
.kr-hero-hanja {
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--kr-gold);
  text-shadow: 0 2px 12px rgba(212,160,23,0.35);
  letter-spacing: -0.04em;
}
.kr-hero-info {
  flex: 1;
  min-width: 0;
}
.kr-hero-roman {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--kr-white-text);
  margin: 0 0 0.3rem;
}
.kr-hero-roman-kr {
  font-size: 0.85rem;
  color: rgba(238,240,245,0.7);
  margin: 0 0 0.5rem;
}
.kr-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.kr-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.kr-chip-elem { background: rgba(255,255,255,0.08); }
.kr-chip-wood   { background: rgba(76,175,80,0.18);  color: #6FCF72; border: 1px solid rgba(76,175,80,0.35); }
.kr-chip-fire   { background: rgba(229,57,53,0.18);  color: #EF7775; border: 1px solid rgba(229,57,53,0.35); }
.kr-chip-earth  { background: rgba(249,168,37,0.18); color: #FBCC5A; border: 1px solid rgba(249,168,37,0.35); }
.kr-chip-metal  { background: rgba(158,158,158,0.18);color: #C8C8C8; border: 1px solid rgba(158,158,158,0.35); }
.kr-chip-water  { background: rgba(21,101,192,0.18); color: #639FE0; border: 1px solid rgba(21,101,192,0.35); }
.kr-chip-yang { background: rgba(212,160,23,0.15); color: var(--kr-gold); border: 1px solid rgba(212,160,23,0.3); }
.kr-chip-yin  { background: rgba(100,120,180,0.15); color: #9AAEE8; border: 1px solid rgba(100,120,180,0.3); }
.kr-chip-animal { background: rgba(255,255,255,0.06); color: var(--kr-white-text); border: 1px solid rgba(255,255,255,0.12); }
.kr-cycle-pos {
  font-size: 0.72rem;
  color: rgba(238,240,245,0.5);
  letter-spacing: 0.05em;
}

/* Day tone pill */
.kr-day-tone-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 1rem;
  border-radius: 30px;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 0.04em;
}
.kr-tone-0 { background: rgba(212,160,23,0.2);   color: var(--kr-gold);     border: 1px solid rgba(212,160,23,0.4); }
.kr-tone-1 { background: rgba(21,101,192,0.2);   color: #639FE0;            border: 1px solid rgba(21,101,192,0.4); }
.kr-tone-2 { background: rgba(229,57,53,0.2);    color: #EF7775;            border: 1px solid rgba(229,57,53,0.35); }
.kr-tone-3 { background: rgba(158,158,158,0.15); color: #BBBBBB;            border: 1px solid rgba(158,158,158,0.3); }

/* Lucky row */
.kr-lucky-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  margin-top: 0.8rem;
}
.kr-lucky-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0.65rem 0.7rem;
  text-align: center;
}
.kr-lucky-label {
  font-size: 0.65rem;
  color: rgba(238,240,245,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}
.kr-lucky-value {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--kr-white-text);
}
.kr-lucky-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
}

/* ── Tab 1: Pillars ──────────────────────────────────────────── */
.kr-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.kr-pillar-col {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 1rem 0.8rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  transition: border-color 0.2s;
}
.kr-pillar-col.kr-day-col {
  border-color: var(--kr-gold);
  background: rgba(212,160,23,0.07);
}
.kr-pillar-label {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: rgba(238,240,245,0.5);
  text-transform: uppercase;
}
.kr-pillar-hanja-big {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  color: var(--kr-white-text);
}
.kr-day-col .kr-pillar-hanja-big { color: var(--kr-gold); }
.kr-pillar-roman {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(238,240,245,0.8);
}
.kr-pillar-roman-kr {
  font-size: 0.72rem;
  color: rgba(238,240,245,0.5);
}
.kr-pillars-hour-note {
  font-size: 0.72rem;
  color: rgba(238,240,245,0.4);
  text-align: center;
  padding: 0.5rem;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border: 1px dashed rgba(255,255,255,0.08);
}

/* ── Tab 2: Zodiac ───────────────────────────────────────────── */
.kr-zodiac-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}
.kr-animal-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.5rem 0.3rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: all 0.18s;
}
.kr-animal-btn:hover {
  border-color: var(--kr-gold);
  background: rgba(212,160,23,0.08);
}
.kr-animal-btn.kr-animal--active {
  border-color: var(--kr-gold);
  background: rgba(212,160,23,0.15);
  box-shadow: 0 0 0 2px rgba(212,160,23,0.25);
}
.kr-animal-emoji { font-size: 1.2rem; line-height: 1; }
.kr-animal-name  { font-size: 0.58rem; color: rgba(238,240,245,0.6); }

/* Fortune card */
.kr-fortune-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
}
.kr-fortune-stars {
  font-size: 1rem;
  color: var(--kr-gold);
  margin-bottom: 0.4rem;
  letter-spacing: 0.05em;
}
.kr-fortune-text {
  font-size: 0.85rem;
  line-height: 1.65;
  color: rgba(238,240,245,0.85);
  margin-bottom: 0.9rem;
}
.kr-focus-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.kr-focus-pill {
  padding: 0.22rem 0.7rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(212,160,23,0.12);
  color: var(--kr-gold);
  border: 1px solid rgba(212,160,23,0.25);
}

/* No animal selected state */
.kr-animal-prompt {
  text-align: center;
  padding: 1.5rem 1rem;
  color: rgba(238,240,245,0.45);
  font-size: 0.85rem;
}

/* ── Tab 3: My Saju ──────────────────────────────────────────── */
.kr-my-saju-guest {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.kr-my-saju-blur {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
  opacity: 0.4;
}
.kr-my-saju-cta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  text-align: center;
  padding: 1.5rem;
  background: rgba(12,26,46,0.7);
  backdrop-filter: blur(4px);
  border-radius: 12px;
  border: 1px solid rgba(212,160,23,0.2);
}
.kr-my-saju-cta p {
  font-size: 0.88rem;
  color: rgba(238,240,245,0.8);
  margin: 0;
  max-width: 300px;
}
.kr-saju-cta-btn {
  display: inline-block;
  background: var(--kr-korean-red);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.6rem 1.4rem;
  border-radius: 24px;
  border: none;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.2s, transform 0.1s;
}
.kr-saju-cta-btn:hover { background: #a80d25; transform: translateY(-1px); }

/* Day Master badge */
.kr-dm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.2rem;
  border-radius: 14px;
  border: 2px solid var(--kr-gold);
  background: rgba(212,160,23,0.1);
  margin-bottom: 1rem;
}
.kr-dm-hanja {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--kr-gold);
  line-height: 1;
}
.kr-dm-info-block { display: flex; flex-direction: column; }
.kr-dm-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(238,240,245,0.5); }
.kr-dm-name  { font-size: 0.92rem; font-weight: 700; color: var(--kr-white-text); }
.kr-dm-sub   { font-size: 0.75rem; color: rgba(238,240,245,0.6); }

.kr-interaction-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(238,240,245,0.8);
  margin-bottom: 1.1rem;
  padding: 0.8rem 1rem;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  border-left: 3px solid var(--kr-gold);
}

/* Element balance bars */
.kr-elem-bars {
  margin-bottom: 1rem;
}
.kr-elem-bar-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}
.kr-elem-bar-label {
  width: 72px;
  font-size: 0.72rem;
  color: rgba(238,240,245,0.65);
  flex-shrink: 0;
}
.kr-elem-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.kr-elem-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}
.kr-elem-bar-count {
  width: 20px;
  text-align: right;
  font-size: 0.72rem;
  color: rgba(238,240,245,0.5);
}

/* Daeun + Sewun cards */
.kr-luck-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-top: 0.8rem;
}
.kr-luck-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 0.9rem 1rem;
}
.kr-luck-card-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(238,240,245,0.45);
  margin-bottom: 0.35rem;
}
.kr-luck-card-hanja {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--kr-white-text);
  line-height: 1;
  margin-bottom: 0.2rem;
}
.kr-luck-card-sub {
  font-size: 0.75rem;
  color: rgba(238,240,245,0.6);
}
.kr-luck-card-age {
  font-size: 0.68rem;
  color: rgba(238,240,245,0.4);
}
.kr-luck-card-elem-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 3px;
}

.kr-no-birth-prompt {
  text-align: center;
  padding: 1.8rem 1rem;
  color: rgba(238,240,245,0.6);
  font-size: 0.88rem;
  line-height: 1.6;
}
.kr-add-birth-btn {
  display: inline-block;
  margin-top: 0.8rem;
  background: rgba(212,160,23,0.15);
  color: var(--kr-gold);
  border: 1px solid rgba(212,160,23,0.4);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.55rem 1.3rem;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
}
.kr-add-birth-btn:hover { background: rgba(212,160,23,0.25); }

/* Full chart link */
.kr-full-chart-link {
  display: block;
  text-align: right;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--kr-gold);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.kr-full-chart-link:hover { opacity: 1; }

/* ── Loading / error states ──────────────────────────────────── */
.kr-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: rgba(238,240,245,0.45);
  font-size: 0.85rem;
}
.kr-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(212,160,23,0.2);
  border-top-color: var(--kr-gold);
  border-radius: 50%;
  animation: kr-spin 0.7s linear infinite;
}
@keyframes kr-spin { to { transform: rotate(360deg); } }

/* ── Light mode overrides ─────────────────────────────────────  */
@media (prefers-color-scheme: light) {
  .kr-daily-card {
    background: #F0EDE8;
    color: var(--kr-ink-text);
    box-shadow: 0 4px 24px rgba(12,26,46,0.12);
  }
  .kr-eyebrow       { color: #8B6914; }
  .kr-daily-title   { color: var(--kr-ink-text); }
  .kr-header-hanja  { color: #8B6914; }
  .kr-tab           { color: rgba(26,26,46,0.45); }
  .kr-tab.kr-tab--active { color: #8B6914; border-bottom-color: #8B6914; }
  .kr-hero-hanja    { color: #8B6914; }
  .kr-hero-roman    { color: var(--kr-ink-text); }
  .kr-pillar-hanja-big { color: var(--kr-ink-text); }
  .kr-day-col .kr-pillar-hanja-big { color: #8B6914; }
  .kr-dm-hanja      { color: #8B6914; }
  .kr-pillar-col    { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); }
  .kr-pillar-col.kr-day-col { background: rgba(212,160,23,0.06); }
  .kr-pillar-roman  { color: rgba(26,26,46,0.8); }
  .kr-pillar-roman-kr { color: rgba(26,26,46,0.5); }
  .kr-lucky-item    { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
  .kr-lucky-label   { color: rgba(26,26,46,0.5); }
  .kr-lucky-value   { color: var(--kr-ink-text); }
  .kr-animal-btn    { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); }
  .kr-animal-name   { color: rgba(26,26,46,0.6); }
  .kr-fortune-card  { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
  .kr-fortune-text  { color: rgba(26,26,46,0.85); }
  .kr-fortune-stars { color: #8B6914; }
  .kr-focus-pill    { background: rgba(212,160,23,0.1); color: #8B6914; border-color: rgba(212,160,23,0.25); }
  .kr-interaction-text { color: rgba(26,26,46,0.8); background: rgba(0,0,0,0.03); border-left-color: #8B6914; }
  .kr-elem-bar-track { background: rgba(0,0,0,0.08); }
  .kr-elem-bar-label { color: rgba(26,26,46,0.6); }
  .kr-elem-bar-count { color: rgba(26,26,46,0.5); }
  .kr-luck-card     { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
  .kr-luck-card-label { color: rgba(26,26,46,0.45); }
  .kr-luck-card-hanja { color: var(--kr-ink-text); }
  .kr-luck-card-sub  { color: rgba(26,26,46,0.6); }
  .kr-luck-card-age  { color: rgba(26,26,46,0.4); }
  .kr-dm-badge      { background: rgba(212,160,23,0.08); border-color: #8B6914; }
  .kr-dm-label      { color: rgba(26,26,46,0.5); }
  .kr-dm-name       { color: var(--kr-ink-text); }
  .kr-dm-sub        { color: rgba(26,26,46,0.6); }
  .kr-no-birth-prompt { color: rgba(26,26,46,0.6); }
  .kr-full-chart-link { color: #8B6914; }
  .kr-add-birth-btn { background: rgba(212,160,23,0.1); color: #8B6914; border-color: rgba(212,160,23,0.3); }
  .kr-cycle-pos     { color: rgba(26,26,46,0.45); }
  .kr-pillars-hour-note { color: rgba(26,26,46,0.4); }
  .kr-animal-prompt { color: rgba(26,26,46,0.4); }
  .kr-loading       { color: rgba(26,26,46,0.4); }
  .kr-chip-yang { background: rgba(212,160,23,0.1); color: #8B6914; }
  .kr-chip-yin  { background: rgba(60,90,180,0.1); color: #5070C0; }
  .kr-chip-animal { background: rgba(0,0,0,0.05); color: var(--kr-ink-text); }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .kr-daily-header { padding: 1.1rem 1.1rem 0.5rem; }
  .kr-tab-panel    { padding: 1rem 1rem 1.2rem; }
  .kr-hero-hanja   { font-size: 3.5rem; }
  .kr-pillars-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .kr-pillar-hanja-big { font-size: 1.9rem; }
  .kr-zodiac-grid  { grid-template-columns: repeat(6, 1fr); gap: 0.3rem; }
  .kr-animal-emoji { font-size: 1rem; }
  .kr-lucky-row    { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
  .kr-luck-row     { grid-template-columns: 1fr; }
  .kr-header-hanja { font-size: 1.5rem; }
}
@media (max-width: 400px) {
  .kr-zodiac-grid  { grid-template-columns: repeat(4, 1fr); }
  .kr-pillars-grid { grid-template-columns: repeat(3, 1fr); }
}