:root{
  --bg1: #0f172a; /* deep navy */
  --bg2: #071033; /* darker */
  --card: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  --muted: #9aa4bf;
  --accent: #7dd3fc;
  --accent-2: #60a5fa;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: radial-gradient(1200px 400px at 10% 10%, rgba(96,165,250,0.08), transparent), linear-gradient(180deg,var(--bg1),var(--bg2));
  color: #e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:36px 18px;
}
.container{
  max-width:840px;
  margin:0 auto;
  padding:32px;
  background:var(--card);
  border-radius:16px;
  box-shadow: 0 10px 40px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
}
h1{margin:0 0 8px;font-size:1.8rem;letter-spacing:0.2px}
.lead{color:var(--muted);margin-top:0}
.info{margin:16px 0 18px}
.info .badge{display:inline-block;background:rgba(255,255,255,0.04);color:var(--accent);padding:6px 10px;border-radius:999px;font-weight:700;font-size:0.85rem}
.info .fixed{margin:8px 0 4px;color:var(--accent-2)}
.info .muted{color:var(--muted);margin:0}
.display{margin-top:18px}
.counter{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.counter .big{display:flex;align-items:baseline;gap:16px}
.counter .big .label{color:var(--muted)}
.counter .big #totalDays{font-size:4rem;font-weight:800;color:var(--accent)}
.breakdown{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted)}
.breakdown > div{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:10px 14px;border-radius:10px;font-weight:700;color:#dff6ff}
footer{margin-top:22px;color:var(--muted);font-size:0.9rem}
code{background:#071033;padding:2px 6px;border-radius:6px}
@media (max-width:640px){.container{padding:20px}.counter .big #totalDays{font-size:3rem}}