:root{ --bg:#0f172a; --card:#111827; --text:#e5e7eb; --muted:#94a3b8; --primary:#10b981; --danger:#ef4444; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:linear-gradient(180deg,#0b1220,#0f172a); color:var(--text); }
.container{ max-width:920px; margin:80px auto 60px; padding:0 16px; }
.topbar{ position:fixed; inset:0 0 auto 0; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; background:#0b1220cc; backdrop-filter:saturate(1.2) blur(6px); border-bottom:1px solid #1f2937; }
.topbar .brand{ color:#fff; text-decoration:none; font-weight:600; font-size:18px; }
.topbar nav a{ color:var(--muted); margin-left:16px; text-decoration:none; }
.session{ display:flex; align-items:center; gap:8px; }
.card{ background:var(--card); border:1px solid #1f2937; border-radius:16px; padding:20px; box-shadow:0 10px 30px #00000040; }
h1{ margin-top:0; font-size:22px; }
.row{ display:grid; grid-template-columns:1fr; gap:12px; }
label{ display:grid; gap:6px; color:var(--muted); font-size:14px; }
input, select{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid #273244; background:#0e1623; color:var(--text); }
.btn{ border:0; padding:12px 16px; border-radius:12px; cursor:pointer; background:#334155; color:#fff; }
.btn.primary{ background:var(--primary); }
.btn.danger{ background:var(--danger); }
.btn.small{ padding:8px 12px; font-size:13px; border-radius:10px; }
.active{ display:grid; justify-items:center; gap:10px; }
.time{ font-size:56px; font-weight:700; letter-spacing:1px; }
.muted{ color:var(--muted); font-size:14px; }
.table{ width:100%; border-collapse:collapse; font-size:14px; }
.table th,.table td{ border-bottom:1px solid #1f2937; padding:10px 8px; vertical-align:top; }
details summary{ cursor:pointer; margin-bottom:8px; }
[hidden]{ display:none !important; }
@media (min-width:600px){
  .row{ grid-template-columns: 1fr 2fr auto; align-items:end; }
}
/* Ring */
.ring-wrap{ position:relative; width:240px; height:240px; margin:0 auto 10px; }
.ring{ width:100%; height:100%; }
.ring-bg{ fill:none; stroke:#1f2937; stroke-width:10; opacity:0.9; }
.ring-fg{ fill:none; stroke:var(--primary); stroke-width:10; stroke-linecap:round; transform:rotate(-90deg); transform-origin:60px 60px; transition:stroke-dashoffset .25s ease; }
.ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.ring-center .elapsed{ font-size:24px; font-weight:700; }
.muted.small{ font-size:12px; }
/* simple bar chart */
.barchart{ width:100%; max-width:600px; margin:0 auto; position:relative; }
.chartsvg{ width:100%; height:auto; }
.chartsvg .grid{ stroke:#1f2937; stroke-width:1; }
.chartsvg .tick{ fill:#94a3b8; font-size:12px; text-anchor:end; }
.chartsvg .label{ fill:#94a3b8; font-size:12px; text-anchor:middle; }
.chartsvg .bar{ fill: var(--primary); rx:6; }

/* fasting stages markers */
.ring-mark{ fill:#fff; opacity:.95; }
.ring-mark.done{ opacity:1; }

/* fasting stages list */
.stage-box{ margin: 10px 0 14px; }
.stage-list{ display:grid; grid-template-columns: 1fr 1fr; gap:8px 20px; list-style:none; padding:0; margin:0; }
.stage-item{ display:flex; align-items:center; gap:8px; color:#94a3b8; font-size:14px; }
.stage-item .dot{ width:10px; height:10px; border-radius:999px; background:#1f2937; border:2px solid #334155; box-sizing:content-box; }
.stage-item.reached .dot{ background: var(--primary); border-color: var(--primary); }


/* Footer */
.footer{ text-align:center; padding:16px 0 24px; color:#94a3b8; }


/* -------- Nav responsive (mobile) -------- */
.menu-toggle{
  display:none;
  background:transparent;
  border:1px solid #334155;
  color:#e2e8f0;
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
}

.topbar{ display:flex; align-items:center; gap:12px; }
.topbar .nav-links{ display:flex; gap:14px; }
.topbar .session{ margin-left:auto; display:flex; align-items:center; gap:8px; }

@media (max-width: 640px){
  .topbar{
    height:auto;
    padding:8px 12px;
    flex-wrap:wrap;
    row-gap:8px;
  }
  .menu-toggle{ display:inline-flex; }

  .nav-links{
    display:none;
    width:100%;
    order:3;
    flex-direction:column;
    gap:8px;
    padding:8px 0;
  }
  body.menu-open .nav-links{ display:flex; }

  .container{ padding-top:80px; }
}


/* -------- Desktop: nav centrado (grid) -------- */
@media (min-width: 641px){
  .topbar{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    column-gap:12px;
  }
  .topbar .brand{ justify-self:start; }
  .topbar .nav-links{ display:flex; gap:14px; justify-self:center; }
  .topbar .session{ margin-left:0; justify-self:end; display:flex; align-items:center; gap:8px; }
  .menu-toggle{ display:none; }
}


/* -------- Desktop: centering override (strong) -------- */
@media (min-width: 641px){
  header.topbar{
    display:grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items:center !important;
    column-gap:12px !important;
  }
  header.topbar .brand{ justify-self:start !important; }
  header.topbar .nav-links{ display:flex !important; gap:14px !important; justify-self:center !important; }
  header.topbar .session{ margin-left:0 !important; justify-self:end !important; display:flex !important; align-items:center !important; gap:8px !important; }
  header.topbar .menu-toggle{ display:none !important; }
}

.chart-tooltip{
  position:absolute;
  z-index:5;
  background:#0f172a;
  color:#e2e8f0;
  border:1px solid #334155;
  border-radius:8px;
  padding:6px 8px;
  font-size:12px;
  pointer-events:none;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  transform: translate(-50%, -8px); /* center above */
  white-space: nowrap;
}

.flash-messages{margin:0 0 1rem 0;}
.flash{padding:.75rem 1rem;border-radius:12px;background:#eef7ee;border:1px solid #cde8cd;}
.muted{opacity:.72;}