/* Age Calculator — Theme: Indigo (#6366F1) */
:root { --accent: #6366F1; --accent-dim: rgba(99,102,241,0.15); --accent-glow: rgba(99,102,241,0.3); }
.accent-text { color: var(--accent); }

.inputs-row { margin-bottom: var(--space-4); }
.date-input { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; color: var(--accent); }
.date-input::-webkit-calendar-picker-indicator { filter: invert(1); }

.age-hero-card { text-align: center; margin-top: var(--space-5); padding: var(--space-6); }
.age-label { font-size: var(--text-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-3); }
.age-main { display: flex; justify-content: center; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.age-num { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; color: var(--accent); }
.age-unit { font-size: var(--text-sm); color: var(--text-muted); margin-right: var(--space-3); }
.age-sub { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.stat-card { text-align: center; padding: var(--space-4); }
.stat-icon { font-size: 1.5rem; margin-bottom: var(--space-1); }
.stat-val { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--accent); margin-bottom: var(--space-1); }
.stat-name { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.birthday-card { margin-top: var(--space-5); text-align: center; }
.birthday-card h2 { font-size: var(--text-xl); margin-bottom: var(--space-5); }
.countdown { display: flex; justify-content: center; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-3); }
.cd-item { text-align: center; }
.cd-num { display: block; font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 900; color: var(--accent); }
.cd-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; }
.birthday-info { font-size: var(--text-sm); color: var(--text-secondary); }

.planets-card { margin-top: var(--space-5); }
.planets-card h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.planets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); }
.planet-item { text-align: center; padding: var(--space-3); background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.planet-emoji { font-size: 1.5rem; margin-bottom: var(--space-1); display: block; }
.planet-name { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; display: block; margin-bottom: var(--space-1); }
.planet-age { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--accent); }

.facts-card { margin-top: var(--space-5); }
.facts-card h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.fact-item { padding: var(--space-3); background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-secondary); }
.fact-label { font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-1); display: block; }

.related-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.related-list a { display: block; padding: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-sm); transition: all var(--duration-fast); }
.related-list a:hover { background: var(--accent-dim); color: var(--accent); }