*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f7f9fc;--bg2:#ffffff;--bg3:#ffffff;--border:#e3e8f0;--text:#0f172a;--text2:#5b6878;--text3:#64748b;--accent:#2563eb;--green:#059669;--yellow:#b45309;--radius:12px}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:15px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
nav{background:var(--bg2);border-bottom:1px solid var(--border)}
.nav-inner{max-width:760px;margin:0 auto;padding:0 20px;height:52px;display:flex;align-items:center}
.logo{font-weight:700;font-size:18px;color:var(--accent)}
.container{max-width:760px;margin:0 auto;padding:32px 20px}
.hero{text-align:center;margin-bottom:28px}
.hero h2{font-size:28px;font-weight:800;margin-bottom:8px}
.hero h2 em{color:var(--accent);font-style:normal}
.hero-sub{color:var(--text2);font-size:16px}
.calc-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:28px;margin-bottom:24px}
.input-section{margin-bottom:24px}
.date-inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{display:block;font-size:13px;color:var(--text2);margin-bottom:6px;font-weight:500}
.field input[type=date]{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 14px;font-size:15px;cursor:pointer}
.field input[type=date]:focus{outline:none;border-color:var(--accent)}
.as-of-row{display:flex;gap:8px}
.as-of-row input{flex:1}
.btn-today{background:var(--accent);border:none;color:#fff;padding:0 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn-today:hover{background:#3a7ae0}

/* AGE DISPLAY */
.age-display{text-align:center;padding:24px 0 20px;border-bottom:1px solid var(--border);margin-bottom:20px}
.age-big{display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap}
.age-num{font-size:64px;font-weight:900;color:var(--accent);line-height:1}
.age-unit{font-size:20px;color:var(--text2);font-weight:500}
.age-unit-small{font-size:18px;color:var(--text3)}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.stat-card{background:var(--bg3);border-radius:10px;padding:16px;text-align:center;border:1px solid var(--border)}
.stat-val{font-size:22px;font-weight:700;color:var(--text)}
.accent-green{color:var(--green)!important}
.stat-lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-top:4px}

/* FACTS */
.facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.fact-card{background:var(--bg3);border-radius:10px;padding:14px;display:flex;align-items:center;gap:10px;border:1px solid var(--border)}
.fact-icon{font-size:28px;flex-shrink:0}
.fact-title{font-size:13px;font-weight:600;color:var(--text)}
.fact-sub{font-size:11px;color:var(--text3);margin-top:2px}

/* MILESTONES */
.milestones-card{background:var(--bg3);border-radius:10px;padding:18px;border:1px solid var(--border)}
.milestones-card h3{font-size:14px;color:var(--text2);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:14px}
.milestones-list{display:flex;flex-direction:column;gap:6px}
.milestone-row{display:flex;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid rgba(42,51,71,.4)}
.milestone-row:last-child{border-bottom:none}
.milestone-age{font-size:13px;font-weight:700;min-width:60px;color:var(--accent)}
.milestone-date{font-size:13px;color:var(--text2);flex:1}
.milestone-status{font-size:12px;padding:2px 8px;border-radius:10px}
.ms-past{background:rgba(52,211,153,.12);color:var(--green)}
.ms-today{background:rgba(251,191,36,.15);color:var(--yellow)}
.ms-future{background:rgba(79,142,247,.12);color:var(--accent)}

/* EMPTY */
.empty-state{text-align:center;padding:40px;color:var(--text3)}
.empty-icon{font-size:48px;margin-bottom:12px}

/* COMPARE */
.compare-section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.compare-section h3{font-size:16px;margin-bottom:6px}
.section-sub{font-size:13px;color:var(--text2);margin-bottom:16px}
.compare-grid{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.compare-card{flex:1;min-width:200px}
.compare-card label{display:block;font-size:13px;color:var(--text2);margin-bottom:6px;font-weight:500}
.compare-card input{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 14px;font-size:14px;cursor:pointer}
.compare-card input:focus{outline:none;border-color:var(--accent)}
.compare-vs{font-size:18px;font-weight:800;color:var(--text3);flex-shrink:0;margin-top:22px}
.compare-result{background:var(--bg3);border-radius:10px;padding:18px;border:1px solid var(--border)}
.cmp-diff{font-size:22px;font-weight:700;color:var(--accent);margin-bottom:10px}
.cmp-row{display:flex;justify-content:space-between;font-size:14px;padding:4px 0;border-bottom:1px solid rgba(42,51,71,.3)}
.cmp-row:last-child{border-bottom:none}
.cmp-lbl{color:var(--text2)}
.cmp-val{font-weight:600}

@media(max-width:600px){
  .date-inputs{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .facts-grid{grid-template-columns:repeat(2,1fr)}
  .age-num{font-size:48px}
  .compare-vs{margin-top:0}
}