:root{
  --blue-50:#EFF6FF; --blue-100:#DBEAFE; --blue-200:#BFDBFE;
  --blue-300:#93C5FD; --blue-400:#60A5FA; --blue-500:#3B82F6;
  --blue-600:#2563EB; --blue-700:#1D4ED8; --blue-800:#1E40AF;

  --bg:#F4F7FB; --card:#FFFFFF; --ink:#0B1220;
  --muted:#64748B; --line:#E5EAF2; --soft:#F1F5F9;

  --green:#10B981; --amber:#F59E0B; --red:#EF4444;

  --shadow-sm:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.04);
  --shadow:0 4px 16px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.03);
  --shadow-lg:0 12px 40px rgba(30,64,175,.12),0 2px 6px rgba(15,23,42,.04);

  --radius:18px; --radius-lg:24px; --radius-sm:12px;

  --shell-max:560px;

  --font-sans:'Manrope', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif:'Fraunces', Georgia, ui-serif, "Times New Roman", serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--ink);
  font-size:15px; line-height:1.5; font-weight:500;
  overscroll-behavior-y:none; min-height:100vh;
}

/* SVG icon sprite refs */
.icon{
  width:1em; height:1em; vertical-align:-.15em;
  fill:currentColor; flex-shrink:0;
}

.shell{
  max-width:var(--shell-max); margin:0 auto;
  min-height:100vh; background:var(--bg);
  position:relative; padding-bottom:96px;
  overflow-x:hidden; /* belt-and-braces — never let content force a horizontal scroll */
}

/* Header — full width, inner content constrained like the tabbar */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,247,251,.85);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(229,234,242,.8);
}
.header-inner{
  max-width:var(--shell-max); margin:0 auto;
  padding:14px 18px;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:10px;
}
.header-left{justify-self:start; display:flex; gap:8px}
.header-actions{justify-self:end; display:flex; gap:8px; position:relative}
.header-title{
  justify-self:center; max-width:100%;
  font-family:var(--font-serif); font-weight:600;
  font-size:18px; margin:0; letter-spacing:-.02em;
  color:var(--ink); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.header-btn{
  width:38px; height:38px; border-radius:11px; border:1px solid var(--line);
  background:var(--card); display:grid; place-items:center; cursor:pointer;
  color:var(--muted); transition:color .15s, border-color .15s;
  flex-shrink:0;
}
.header-btn:hover{color:var(--blue-600); border-color:var(--blue-300)}

/* Language dropdown */
.lang-wrap{position:relative}
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-lg);
  padding:6px; min-width:200px; max-height:360px; overflow-y:auto;
  display:none; z-index:60;
}
.lang-menu.show{display:block; animation:fadeIn .15s}
.lang-menu a{
  display:block; padding:9px 12px; border-radius:9px;
  font-size:14px; font-weight:600; color:var(--ink);
  text-decoration:none;
}
.lang-menu a:hover{background:var(--soft); color:var(--blue-700)}
.lang-menu a.active{background:var(--blue-50); color:var(--blue-700)}
.lang-menu a .lang-code{
  font-size:11px; color:var(--muted); margin-left:6px;
  font-weight:600; text-transform:uppercase;
}
.lang-menu a.active .lang-code{color:var(--blue-600)}

/* Sidebar */
.sidebar-overlay{
  position:fixed; inset:0; z-index:90;
  background:rgba(15,23,42,.45);
  backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.sidebar-overlay.show{opacity:1; pointer-events:auto}
.sidebar{
  position:fixed; top:0; left:0; bottom:0; z-index:91;
  width:300px; max-width:85vw;
  background:var(--card);
  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.sidebar.show{transform:translateX(0)}

/* ===== RTL — Arabic / Hebrew =====
   Most layout already flips via dir="rtl" + flex/grid. These rules
   handle direction-specific positioning and icon mirroring. */
[dir="rtl"] .sidebar{
  left:auto; right:0;
  transform:translateX(100%);
}
[dir="rtl"] .sidebar.show{transform:translateX(0)}

/* Language dropdown — anchor to the inline-end of the trigger so it
   stays attached on both LTR and RTL. */
[dir="rtl"] .lang-menu{right:auto; left:0}

/* Mirror directional arrows so "back" / "previous" still points the
   right way in RTL. The chevrons in cal-nav and the back-to-fast
   button use these icons. */
[dir="rtl"] .back-to-fast .icon,
[dir="rtl"] .cal-nav button .icon,
[dir="rtl"] .goal-arrow .icon{
  transform:scaleX(-1);
}

/* Article TOC lists need RTL-aware indentation. */
[dir="rtl"] .article ol,
[dir="rtl"] .article ul,
[dir="rtl"] .article-toc ol{
  padding-left:0; padding-right:22px;
}
.sidebar-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 18px 14px;
  border-bottom:1px solid var(--line);
}
.sidebar-title{
  margin:0; font-family:var(--font-serif); font-weight:600;
  font-size:18px; letter-spacing:-.01em; color:var(--ink);
}
.sidebar-close{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); color:var(--muted); cursor:pointer;
  display:grid; place-items:center; font-size:14px;
  transition:color .15s, border-color .15s;
}
.sidebar-close:hover{color:var(--blue-600); border-color:var(--blue-300)}
.sidebar-nav{flex:1; overflow-y:auto; padding:14px 12px}
.nav-item{
  display:flex; align-items:center; gap:14px;
  padding:12px 14px; border-radius:12px;
  font-size:15px; font-weight:600; color:var(--ink);
  text-decoration:none; cursor:pointer; border:none; background:none;
  font-family:inherit; width:100%; text-align:left;
  transition:background .15s;
}
.nav-item:hover{background:var(--soft)}
.nav-item.active{background:var(--blue-50); color:var(--blue-700)}
.nav-item .icon{
  width:22px; text-align:center; font-size:16px; color:var(--muted);
}
.nav-item.active .icon{color:var(--blue-600)}

/* Views */
.view{display:none; animation:fadeIn .3s ease}
.view.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
main{padding:18px 16px 8px}

/* Cards */
.card{
  background:var(--card);
  border-radius:var(--radius-lg);
  padding:22px;
  box-shadow:var(--shadow);
  margin-bottom:14px;
  border:1px solid rgba(229,234,242,.6);
}
.card-title{
  font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:700; margin:0 0 14px;
}
.card-title.lg{
  font-size:18px; text-transform:none; letter-spacing:-.01em; color:var(--ink);
}

/* Back to Fast button (shown on weight/water/history) */
.back-to-fast{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:99px;
  background:var(--card); color:var(--blue-700);
  border:1px solid var(--line);
  font-family:inherit; font-size:13px; font-weight:700;
  cursor:pointer; margin-bottom:12px;
  box-shadow:var(--shadow-sm);
  transition:background .15s, border-color .15s, color .15s;
}
.back-to-fast:hover{background:var(--blue-50); border-color:var(--blue-300); color:var(--blue-700)}
.back-to-fast .icon{font-size:11px}

/* ============ FASTING HERO CARD ============ */
.fast-card{
  background:linear-gradient(165deg,#F0F7FF 0%,#FFFFFF 70%);
  position:relative; overflow:hidden;
  border:1px solid rgba(191,219,254,.5);
}
.fast-card::before{
  content:''; position:absolute; inset:-40% -20% auto auto;
  width:300px; height:300px;
  background:radial-gradient(circle,rgba(59,130,246,.10),transparent 60%);
  pointer-events:none;
}

.fast-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:6px; position:relative;
}
.fast-status{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.01em;
  background:#fff; color:var(--blue-700);
  border:1px solid var(--blue-100);
  box-shadow:var(--shadow-sm);
}
.fast-status.active{background:#FEF3C7; color:#92400E; border-color:#FDE68A}
.fast-status.scheduled{background:#fff; color:var(--blue-700)}
.fast-status .dot{
  width:6px; height:6px; border-radius:50%;
  background:currentColor; animation:pulse 2s infinite;
}
.fast-status.active .dot{animation:pulseFast 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes pulseFast{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
.edit-fast-btn{
  width:32px; height:32px; border-radius:10px; border:none;
  background:rgba(255,255,255,.6); color:var(--muted);
  display:grid; place-items:center; cursor:pointer;
  transition:background .15s, color .15s, transform .15s;
  font-size:13px;
}
.edit-fast-btn:hover{background:#fff; color:var(--blue-600); transform:rotate(-15deg)}

/* Ring */
.ring-wrap{
  position:relative; width:240px; height:240px; margin:14px auto 8px;
}
.ring-wrap svg{transform:rotate(-90deg); overflow:visible}
.ring-bg{fill:none; stroke:#E5EBF5; stroke-width:9}
.ring-fg{
  fill:none; stroke:url(#ringGrad); stroke-width:10;
  stroke-linecap:round;
  transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1);
  filter:drop-shadow(0 4px 8px rgba(37,99,235,.25));
}
/* ring-center: empty layout box; children are absolutely positioned so the
   time sits at the geometric center of the ring */
.ring-center{position:absolute; inset:0;}
.ring-time{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-sans); font-variant-numeric:tabular-nums;
  font-size:38px; font-weight:700; letter-spacing:-.02em;
  color:var(--ink); line-height:1; white-space:nowrap;
}
.ring-label{
  position:absolute; left:0; right:0;
  top:62%;
  text-align:center;
  font-size:11px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--muted); font-weight:700;
}
.ring-toggle{
  position:absolute; left:50%; top:74%;
  transform:translateX(-50%);
  background:none; border:none;
  color:var(--blue-600); font-size:12px; font-weight:600;
  cursor:pointer; padding:4px 10px; border-radius:8px;
}
.ring-toggle:hover{background:var(--blue-50)}
.ring-plan{
  text-align:center; font-size:15px; color:var(--ink);
  margin:6px 0 0; font-weight:700;
}

/* Start | Goal | End row */
.fast-meta{
  display:flex; justify-content:space-around; align-items:center;
  margin:18px 0 16px;
}
.fast-meta-item{text-align:center}
.fast-meta-item .label{
  font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:700; margin-bottom:3px;
}
.fast-meta-item .value{
  font-size:14px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.fast-meta-item.center .value{color:var(--blue-600)}

/* Buttons — no vertical bounce on hover */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 20px; border-radius:14px; border:none;
  font-family:inherit; font-size:15px; font-weight:700;
  cursor:pointer; transition:background .15s, box-shadow .15s, color .15s, border-color .15s;
  text-decoration:none; width:100%; letter-spacing:-.01em;
}
.btn-primary{
  background:linear-gradient(135deg,var(--blue-500),var(--blue-700));
  color:#fff; box-shadow:0 6px 18px rgba(37,99,235,.35);
}
.btn-primary:hover{box-shadow:0 10px 24px rgba(37,99,235,.4)}
.btn-danger{
  background:linear-gradient(135deg,#EF4444,#DC2626);
  color:#fff; box-shadow:0 6px 18px rgba(239,68,68,.3);
}
.btn-ghost{background:var(--soft); color:var(--ink)}
.btn-ghost:hover{background:var(--blue-50); color:var(--blue-700)}
.btn-outline{
  background:transparent; color:var(--blue-600);
  border:1.5px solid var(--blue-200);
}
.btn-outline:hover{background:var(--blue-50); border-color:var(--blue-400)}
.btn-sm{padding:9px 14px; font-size:13px; border-radius:10px; width:auto}

/* Milestone icons */
.milestones{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  margin-top:18px;
}
.milestone{
  /* Flex column keeps icons aligned at the top across the row even when
     some labels wrap to two lines and others don't. */
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center; padding:10px 4px; border-radius:14px;
  cursor:pointer; transition:opacity .25s, filter .25s;
  background:transparent; border:none;
  opacity:.4; filter:grayscale(.4);
}
.milestone.active{opacity:1; filter:none}
.m-circle{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; margin:0 0 6px;
  font-size:16px; transition:transform .3s;
  flex-shrink:0;
}
.milestone[data-hours="12"] .m-circle{background:#FFEDD5; color:#EA580C}
.milestone[data-hours="14"] .m-circle{background:#F3E8FF; color:#9333EA}
.milestone[data-hours="16"] .m-circle{background:#FFE4E6; color:#E11D48}
.milestone[data-hours="18"] .m-circle{background:#D1FAE5; color:#059669}
.milestone .m-label{
  font-size:10px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em;
  /* Reserve room for two lines so single-word labels keep the same
     overall button height as wrapping ones. */
  line-height:1.2;
  min-height:calc(1.2em * 2);
  display:flex; align-items:center; justify-content:center;
  hyphens:auto;
}
.milestone.active .m-label{color:var(--ink)}

#statusExplain{
  margin-top:14px; padding:12px 14px; border-radius:12px;
  background:#fff; border:1px solid var(--blue-100);
  font-size:13px; color:var(--blue-800);
  line-height:1.5; display:none;
}
#statusExplain.visible{display:block; animation:fadeIn .3s}
#statusExplain b{font-weight:700; color:var(--blue-700)}

/* Weight */
.weight-hero{text-align:center; padding:6px 0 4px}
.weight-num{
  font-family:var(--font-serif); font-weight:400;
  font-size:64px; letter-spacing:-.04em;
  color:var(--ink); line-height:1;
  font-variant-numeric:tabular-nums;
}
.weight-num em{
  font-size:20px; font-style:normal; color:var(--muted);
  font-weight:500; margin-left:6px; font-family:var(--font-sans);
}
.weight-tag{font-size:13px; color:var(--muted); margin:8px 0 18px}

.unit-toggle{
  display:flex; background:var(--soft); padding:4px; border-radius:12px;
  margin-bottom:18px;
}
.unit-toggle input{display:none}
.unit-toggle label{
  flex:1; padding:9px; text-align:center; border-radius:8px;
  font-size:13px; font-weight:700; color:var(--muted);
  cursor:pointer; transition:background .15s, color .15s;
}
.unit-toggle input:checked + label{
  background:#fff; color:var(--blue-600); box-shadow:var(--shadow-sm);
}

.goal-row{
  display:grid; grid-template-columns:1fr auto 1fr; gap:12px;
  align-items:center; margin:18px 0 14px;
  padding:14px; background:var(--soft); border-radius:var(--radius);
}
.goal-cell{text-align:center}
.goal-cell .lab{
  font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:700;
}
.goal-cell .v{font-size:18px; font-weight:700; margin-top:3px; font-variant-numeric:tabular-nums}
.goal-arrow{color:var(--muted); font-size:16px}

/* Form */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px}
.field label,
.field .field-label,
.field-block .field-label{
  display:block; font-size:12px; font-weight:700;
  color:var(--muted); margin-bottom:6px; letter-spacing:.02em;
}
.field input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1.5px solid var(--line); background:#fff;
  font-family:inherit; font-size:15px; font-weight:600;
  color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
.field input:focus{
  outline:none; border-color:var(--blue-400);
  box-shadow:0 0 0 3px var(--blue-100);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:8px}

.gender-toggle{
  display:flex; background:var(--soft); padding:4px; border-radius:12px;
}
.gender-toggle input{display:none}
.gender-toggle label{
  flex:1; padding:10px; text-align:center; border-radius:8px;
  font-size:13px; font-weight:700; color:var(--muted); cursor:pointer;
}
.gender-toggle input:checked + label{background:#fff; color:var(--blue-600); box-shadow:var(--shadow-sm)}

#bmiResult{
  text-align:center; margin:14px 0 12px; font-size:15px; font-weight:600;
  color:var(--muted);
}
#bmiResult.has-result{color:var(--ink); font-size:16px}
#bmiResult b{font-size:24px; font-weight:700; font-family:var(--font-serif); color:var(--ink)}

.bmi-bar-wrap{padding:0 8px; direction:ltr}
.bmi-bar{
  height:10px; border-radius:10px;
  background:linear-gradient(to right,
    var(--blue-400) 0%,var(--blue-400) 18.5%,
    var(--green) 18.5%,var(--green) 43.5%,
    var(--amber) 43.5%,var(--amber) 73.5%,
    var(--red) 73.5%,var(--red) 100%);
  position:relative;
}
.bmi-marker{
  position:absolute; top:50%; width:18px; height:18px;
  background:#fff; border:3px solid var(--blue-600);
  border-radius:50%; transform:translate(-50%,-50%);
  transition:left .5s cubic-bezier(.4,0,.2,1);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.bmi-cats{
  display:flex; justify-content:space-between;
  margin-top:10px; font-size:10px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em;
}

/* Water */
.water-card{text-align:center}
.water-vis{
  width:180px; height:180px; margin:8px auto 14px;
  border-radius:50%; background:var(--blue-50);
  position:relative; overflow:hidden;
  border:6px solid var(--blue-100);
  box-shadow:inset 0 4px 12px rgba(37,99,235,.08);
}
.water-fill{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg,#60A5FA,#2563EB);
  transition:height .6s cubic-bezier(.4,0,.2,1);
}
.water-fill::before,.water-fill::after{
  content:''; position:absolute; left:-50%; width:200%; height:8px; top:-4px;
  background:rgba(255,255,255,.3); border-radius:50%;
}
.water-fill::after{top:-2px; background:rgba(255,255,255,.15)}
.water-pct{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-serif); font-weight:600;
  font-size:36px; color:var(--blue-800); letter-spacing:-.02em;
  text-shadow:0 2px 8px rgba(255,255,255,.6);
}
.water-amount{
  font-size:14px; color:var(--muted); margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.water-amount b{color:var(--ink); font-weight:700; font-size:16px}
.water-controls{display:flex; gap:10px; justify-content:center}
.water-btn{
  width:48px; height:48px; border-radius:50%;
  border:1.5px solid var(--blue-200); background:#fff; color:var(--blue-600);
  font-size:20px; font-weight:700; cursor:pointer;
  transition:background .15s;
}
.water-btn:hover{background:var(--blue-50)}

/* History */
.history-item{
  display:flex; align-items:center; gap:12px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.history-item:last-child{border-bottom:none}
.h-icon{
  width:42px; height:42px; border-radius:12px;
  background:var(--blue-50); color:var(--blue-600);
  display:grid; place-items:center; font-size:18px; flex-shrink:0;
}
.h-body{flex:1; min-width:0}
.h-title{font-weight:700; font-size:14px}
.h-sub{font-size:12px; color:var(--muted); margin-top:2px; font-variant-numeric:tabular-nums}
.h-right{font-weight:700; font-size:14px; font-variant-numeric:tabular-nums}
.h-right.up{color:var(--red)}
.h-right.down{color:var(--green)}
.h-del{
  width:32px; height:32px; border-radius:10px; border:none;
  background:transparent; color:var(--muted); cursor:pointer;
  display:grid; place-items:center; font-size:13px; flex-shrink:0;
  transition:background .15s, color .15s;
}
.h-del:hover{background:#FEE2E2; color:var(--red)}
.empty{text-align:center; padding:32px 16px; color:var(--muted)}
.empty .icon{font-size:32px; color:var(--blue-200); margin-bottom:10px; display:block}
.empty p{margin:0; font-size:14px}

/* Calendar */
.cal-nav{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px; gap:8px;
}
.cal-nav button{
  width:32px; height:32px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); color:var(--muted); cursor:pointer;
  display:grid; place-items:center; font-size:12px;
  transition:color .15s, border-color .15s;
  flex-shrink:0;
}
.cal-nav button:hover{color:var(--blue-600); border-color:var(--blue-300)}
.cal-nav-title{
  font-weight:700; font-size:15px; color:var(--ink);
  min-width:0; text-align:center; flex:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cal-grid{
  display:grid;
  /* minmax(0, 1fr) so cells can shrink below intrinsic min-content on narrow screens */
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:4px;
  width:100%;
}
.cal-head{
  font-size:10px; color:var(--muted); font-weight:700;
  text-align:center; padding:6px 0;
  text-transform:uppercase; letter-spacing:.02em;
  min-width:0; overflow:hidden;
}
.cal-cell{
  aspect-ratio:1; display:grid; place-items:center;
  border-radius:10px; font-size:13px; font-weight:600;
  color:var(--ink); background:var(--soft);
  position:relative; cursor:default;
  min-width:0; min-height:0;
  font-variant-numeric:tabular-nums;
}
.cal-cell.empty{background:transparent}
.cal-cell.cal-today{box-shadow:inset 0 0 0 2px var(--blue-500)}
.cal-cell.cal-completed{background:#D1FAE5; color:#065F46}
.cal-cell.cal-partial{background:#FEF3C7; color:#92400E}
.cal-legend{
  display:flex; gap:14px; margin-top:14px; flex-wrap:wrap;
  font-size:11px; color:var(--muted); font-weight:600;
}
.cal-legend span{display:inline-flex; align-items:center; gap:6px}
.cal-legend i{
  width:10px; height:10px; border-radius:3px; display:inline-block;
  flex-shrink:0;
}

/* Tighten the calendar for narrow viewports so it never overflows the card. */
@media (max-width:420px){
  .cal-grid{gap:3px}
  .cal-cell{border-radius:8px; font-size:12px}
  .cal-head{font-size:9px; padding:4px 0; letter-spacing:0}
}

/* Weight chart */
.weight-chart{margin-bottom:6px}
.weight-chart svg{width:100%; height:140px; display:block}
.weight-chart-axes{
  display:flex; justify-content:space-between;
  margin-top:8px; font-size:11px; color:var(--muted); font-weight:600;
}

/* Tabbar */
.tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid rgba(229,234,242,.8);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
}
.tabbar-inner{
  max-width:var(--shell-max); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:4px;
}
.tab{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 4px; border-radius:12px; background:none; border:none;
  color:var(--muted); font-family:inherit; font-size:10px; font-weight:700;
  cursor:pointer; transition:color .15s;
  text-transform:uppercase; letter-spacing:.04em;
}
.tab .icon{font-size:18px; transition:transform .2s}
.tab.active{color:var(--blue-600)}
.tab.active .icon{transform:scale(1.15)}

/* Modal */
.modal-backdrop{
  position:fixed; inset:0; z-index:100;
  background:rgba(15,23,42,.5);
  backdrop-filter:blur(4px);
  display:none; align-items:flex-end; justify-content:center;
  animation:fadeIn .2s;
}
.modal-backdrop.show{display:flex}
.modal{
  background:var(--card); border-radius:24px 24px 0 0;
  width:100%; max-width:var(--shell-max);
  padding:8px 0 calc(20px + env(safe-area-inset-bottom));
  animation:slideUp .3s cubic-bezier(.4,0,.2,1);
  max-height:90vh; overflow-y:auto;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
.modal-handle{
  width:40px; height:4px; background:var(--line); border-radius:2px;
  margin:0 auto 8px;
}
.modal-head{
  padding:8px 20px 14px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.modal-head h3{margin:0; font-size:18px; font-weight:700; letter-spacing:-.01em}
.modal-close{
  width:32px; height:32px; border-radius:10px; border:none;
  background:var(--soft); color:var(--muted); cursor:pointer;
  display:grid; place-items:center;
}
.modal-body{padding:18px 20px}
.modal-foot{padding:0 20px; display:flex; gap:10px}
.modal-foot .btn{flex:1}

select.field-input,input.field-input,textarea.field-input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1.5px solid var(--line); background:#fff;
  font-family:inherit; font-size:15px; font-weight:600; color:var(--ink);
}
select.field-input:focus,input.field-input:focus,textarea.field-input:focus{
  outline:none; border-color:var(--blue-400); box-shadow:0 0 0 3px var(--blue-100);
}
.field-block{margin-bottom:14px}
.field-block label,
.field-block .field-label{
  display:block; font-size:12px; font-weight:700;
  color:var(--muted); margin-bottom:6px; letter-spacing:.02em;
}

/* Plan picker */
.plan-list{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
.plan-option{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px; border-radius:14px;
  background:#fff; border:2px solid var(--line);
  cursor:pointer; transition:border-color .15s, background .15s;
  font-family:inherit; width:100%; text-align:left;
}
.plan-option:hover{border-color:var(--blue-300)}
.plan-option.selected{
  border-color:var(--blue-500); background:var(--blue-50);
}
.plan-option .p-name{font-size:16px; font-weight:700; color:var(--ink)}
.plan-option .p-desc{font-size:12px; color:var(--muted); margin-top:2px}
.plan-option .p-check{
  width:24px; height:24px; border-radius:50%;
  border:2px solid var(--line); background:#fff;
  display:grid; place-items:center; color:#fff;
  transition:background .15s, border-color .15s;
  flex-shrink:0;
}
.plan-option.selected .p-check{
  background:var(--blue-600); border-color:var(--blue-600);
}
.plan-option .p-check .icon{font-size:12px; opacity:0; transition:opacity .15s}
.plan-option.selected .p-check .icon{opacity:1}

/* Mood */
.mood-row{
  display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:6px;
}
.mood-btn{
  padding:10px 4px; border-radius:12px; border:1.5px solid var(--line);
  background:#fff; cursor:pointer; font-size:24px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  transition:background .15s, border-color .15s, box-shadow .15s;
}
.mood-btn .lbl{
  font-size:9px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em;
}
.mood-btn:hover{border-color:var(--blue-300)}
.mood-btn.active{
  background:var(--blue-50); border-color:var(--blue-500);
  box-shadow:0 4px 12px rgba(37,99,235,.15);
}
.mood-btn.active .lbl{color:var(--blue-700)}

.toggle{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px; border-radius:14px; background:var(--soft);
  margin-bottom:10px;
}
.toggle-text{flex:1}
.toggle-text .t{font-weight:700; font-size:14px}
.toggle-text .s{font-size:12px; color:var(--muted); margin-top:2px}
.switch{
  position:relative; width:46px; height:26px;
  background:var(--line); border-radius:99px; cursor:pointer;
  transition:background .2s; flex-shrink:0;
}
.switch::after{
  content:''; position:absolute; top:3px; left:3px;
  width:20px; height:20px; background:#fff; border-radius:50%;
  transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.switch.on{background:var(--blue-500)}
.switch.on::after{transform:translateX(20px)}

.milestone-item{
  display:flex; align-items:center; gap:12px;
  padding:12px; border-radius:12px; background:var(--soft);
  margin-bottom:8px;
}
.milestone-info{flex:1; min-width:0}
.milestone-info .h{font-size:13px; font-weight:700}
.milestone-info .m{font-size:11px; color:var(--muted); margin-top:2px}
.milestone-info .hrs{font-size:11px; font-weight:700; color:var(--blue-600)}
.milestone-remove{
  width:28px; height:28px; border-radius:8px; border:none;
  background:#FEE2E2; color:var(--red); cursor:pointer;
  display:grid; place-items:center; font-size:11px;
}

/* History sub-tabs */
.section-tabs{
  display:flex; background:var(--card); padding:4px;
  border-radius:14px; margin-bottom:14px; box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
}
.section-tab{
  flex:1; padding:9px; text-align:center; border-radius:10px;
  font-size:13px; font-weight:700; color:var(--muted);
  cursor:pointer; border:none; background:none; font-family:inherit;
  transition:background .15s, color .15s;
}
.section-tab.active{background:var(--blue-50); color:var(--blue-700)}

#fastDuration{
  font-family:var(--font-serif); font-weight:600;
  font-size:48px; color:var(--blue-700); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; margin:8px 0 18px; text-align:center;
}

/* Generic page hero */
.page-hero{
  background:linear-gradient(135deg,var(--blue-50),#FFFFFF);
  border-radius:var(--radius-lg);
  padding:32px 24px; text-align:center;
  margin-bottom:14px; border:1px solid rgba(191,219,254,.5);
}
.page-hero-icon{
  width:64px; height:64px; border-radius:18px;
  background:linear-gradient(135deg,var(--blue-500),var(--blue-700));
  color:#fff; display:grid; place-items:center;
  margin:0 auto 14px; font-size:24px;
  box-shadow:0 8px 24px rgba(37,99,235,.3);
}
.page-hero h2{
  font-family:var(--font-serif); font-weight:600;
  font-size:28px; margin:0 0 6px; letter-spacing:-.02em;
}
.page-hero p{margin:0; color:var(--muted); font-size:14px}
.coming-soon-badge{
  display:inline-block; padding:5px 12px; border-radius:99px;
  background:var(--amber); color:#fff;
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; margin-top:14px;
}
.placeholder-list{display:flex; flex-direction:column; gap:8px}
.placeholder-row{
  display:flex; align-items:center; gap:12px;
  padding:14px; border-radius:14px;
  background:var(--soft);
}
.placeholder-row .ico{
  width:40px; height:40px; border-radius:10px;
  background:var(--blue-100); color:var(--blue-600);
  display:grid; place-items:center; flex-shrink:0;
}
.placeholder-row .body{flex:1; min-width:0}
.placeholder-row .body .t{font-weight:700; font-size:14px}
.placeholder-row .body .s{font-size:12px; color:var(--muted); margin-top:2px}

/* Calculator pages */
.lead-copy{
  margin:0 0 18px; color:var(--muted);
  font-size:14px; line-height:1.7;
}

/* Reset all data card */
.reset-card{
  border:1px solid #FECACA;
  background:linear-gradient(180deg,#FFF5F5 0%,#FFFFFF 60%);
}
.reset-desc{
  margin:0 0 14px; font-size:13px; color:var(--muted); line-height:1.6;
}
.result-block{
  margin-top:18px; padding:18px; border-radius:14px;
  background:var(--blue-50); border:1px solid var(--blue-100);
}
.result-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 0;
  border-bottom:1px solid rgba(191,219,254,.5);
}
.result-row:last-child{border-bottom:none}
.result-row .result-label{
  font-size:12px; color:var(--blue-700); font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
}
.result-row .result-value{
  font-family:var(--font-serif); font-weight:600;
  font-size:18px; color:var(--ink);
  text-align:right;
}
.result-row.big .result-value{
  font-size:26px; color:var(--blue-700);
}

.cal-table{display:flex; flex-direction:column; gap:6px}
.cal-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 14px; border-radius:12px;
  background:#fff; border:1px solid var(--blue-100);
  font-size:13px; font-weight:600; color:var(--ink);
}
.cal-row b{
  font-family:var(--font-serif); font-weight:600;
  font-size:18px; color:var(--blue-700);
}
.cal-row.loss{background:#FEF3C7; border-color:#FDE68A}
.cal-row.loss b{color:#92400E}
.cal-row.gain{background:#D1FAE5; border-color:#A7F3D0}
.cal-row.gain b{color:#065F46}

/* Quick-add buttons (water tracker) */
.quick-adds{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:8px; margin-top:14px;
}
.quick-add{
  padding:11px 10px; border-radius:12px;
  border:1.5px solid var(--blue-200);
  background:#fff; color:var(--blue-700);
  font-family:inherit; font-size:13px; font-weight:700;
  cursor:pointer; transition:background .15s, border-color .15s;
}
.quick-add:hover{background:var(--blue-50); border-color:var(--blue-400)}

/* Week bar chart (water tracker) */
.week-bars{
  display:grid; grid-template-columns:repeat(7,1fr); gap:8px;
  align-items:end; height:140px;
}
.week-bar{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  height:100%;
}
.week-bar-track{
  width:100%; flex:1;
  background:var(--soft); border-radius:8px;
  position:relative; overflow:hidden; min-height:4px;
}
.week-bar-fill{
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(180deg,#60A5FA,#2563EB);
  border-radius:8px; transition:height .3s ease;
}
.week-bar-label{
  font-size:10px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em;
}

/* Article (FAQ + legal pages) */
.article{padding:24px 22px}
.article h2, .article h3{
  font-family:var(--font-serif); font-weight:600;
  font-size:20px; letter-spacing:-.01em;
  margin:24px 0 8px; color:var(--ink); line-height:1.3;
}
.article h2:first-child, .article h3:first-child{margin-top:0}
.article h2.lead{font-size:18px}
.article p{
  margin:0 0 12px; color:var(--muted); font-size:14px; line-height:1.7;
}
.article p b{color:var(--ink); font-weight:700}
.article ol, .article ul{
  margin:0 0 12px; padding-left:22px;
  color:var(--muted); font-size:14px; line-height:1.7;
}
.article ol li, .article ul li{margin-bottom:6px}
.article ol li::marker{color:var(--blue-600); font-weight:700}
.article ul li::marker{color:var(--blue-400)}
.article-section + .article-section{
  margin-top:18px; padding-top:18px; border-top:1px solid var(--line);
}
.article-toc{
  background:var(--blue-50); border-radius:14px;
  padding:16px 18px; margin-bottom:28px;
  border:1px solid var(--blue-100);
}
.article-toc h4{
  font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--blue-700); font-weight:700; margin:0 0 10px;
}
.article-toc ol{
  margin:0; padding-left:18px; color:var(--blue-800); font-size:13px;
}
.article-toc ol li{margin-bottom:4px}
.article-toc a{color:var(--blue-700); text-decoration:none; font-weight:600}
.article-toc a:hover{text-decoration:underline}
.notice{
  margin-top:18px; padding:16px;
  background:#FEF3C7; border:1px solid #FDE68A;
  border-radius:14px;
}
.notice .nh{
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; color:#92400E; margin-bottom:6px;
}
.notice p{margin:0; font-size:13px; color:#78350F; line-height:1.6}

/* Share section */
.share-card{padding:22px}
.share-card h3{
  font-family:var(--font-serif); font-weight:600;
  font-size:20px; letter-spacing:-.01em;
  margin:0 0 6px; color:var(--ink);
}
.share-card .sub{margin:0 0 16px; font-size:13px; color:var(--muted)}
.share-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:8px;
  margin-bottom:14px;
}
.share-btn{
  width:100%; aspect-ratio:1; border-radius:14px; border:none;
  display:grid; place-items:center; cursor:pointer;
  color:#fff; font-size:18px; transition:filter .15s;
  text-decoration:none;
}
.share-btn:hover{filter:brightness(1.1)}
.share-fb{background:#1877F2}
.share-tw{background:#000000}
.share-li{background:#0A66C2}
.share-rd{background:#FF4500}
.share-wa{background:#25D366}
.share-tg{background:#229ED9}
.share-em{background:#64748B}

.copy-row{
  display:flex; gap:8px; align-items:center;
  background:var(--soft); padding:6px 6px 6px 14px;
  border-radius:12px; border:1px solid var(--line);
}
.copy-url{
  flex:1; font-size:12px; color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.copy-btn{
  padding:9px 14px; border-radius:9px; border:none;
  background:var(--blue-600); color:#fff;
  font-family:inherit; font-size:13px; font-weight:700;
  cursor:pointer; transition:background .15s; flex-shrink:0;
}
.copy-btn:hover{background:var(--blue-700)}
.copy-btn.copied{background:var(--green)}

@media (max-width:420px){
  .share-grid{grid-template-columns:repeat(7,1fr); gap:6px}
  .share-btn{font-size:15px; border-radius:11px}
}

/* Footer */
.app-footer{
  margin-top:14px; padding:24px 22px 28px;
  text-align:center; color:var(--muted);
  background:transparent;
}
.app-footer .links{
  display:flex; justify-content:center; gap:18px;
  margin-bottom:12px; flex-wrap:wrap;
}
.app-footer .links a, .app-footer .links button{
  background:none; border:none; padding:0;
  font-family:inherit; font-size:13px; font-weight:600;
  color:var(--muted); cursor:pointer; transition:color .15s;
  text-decoration:none;
}
.app-footer .links a:hover, .app-footer .links button:hover{color:var(--blue-600)}
.app-footer .copy{font-size:12px; color:var(--muted); margin:0}

/* Toast */
.toast{
  position:fixed; bottom:110px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff;
  padding:11px 18px; border-radius:99px;
  font-size:13px; font-weight:600;
  box-shadow:0 12px 32px rgba(15,23,42,.25);
  z-index:200; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s cubic-bezier(.4,0,.2,1);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast .icon{margin-right:6px; color:var(--green)}

@media (max-width:380px){
  main{padding:14px 12px 8px}
  .card{padding:18px}
  .ring-wrap{width:200px; height:200px}
  .ring-time{font-size:32px}
  .weight-num{font-size:54px}
  .article{padding:18px}
  .share-card{padding:18px}
  .app-footer{padding:20px 18px 24px}
}