@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

#humn-hub{
  --bg:#000000; --field-bg:#F5F2EA; --surface:#FFFFFF; --surface-alt:#EFEAE0;
  --ink:#23241F; --ink-soft:#78766C; --muted-on-dark:#9C978A; --line:#DDD5C4;
  --resist:#A85C3F; --resist-tint:#F0E1D8; --recover:#7C8B6F; --recover-tint:#E7EBE0;
  --renew:#BE9A5C; --renew-tint:#F1E8D5; --rhythm:#5F7887; --rhythm-tint:#E1E7E9;
  --font-display:'Manrope', sans-serif; --font-body:'Inter Tight', sans-serif; --font-mono:'JetBrains Mono', monospace;
  width:100%; box-sizing:border-box; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-weight:500; -webkit-font-smoothing:antialiased;
  padding:48px 24px 96px;
}
#humn-hub *{ box-sizing:border-box; }
#humn-hub .wrap{ max-width:960px; margin:0 auto; }
#humn-hub .wrap.narrow{ max-width:440px; }
#humn-hub .card{ background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:36px; }
#humn-hub h2.section-title{ font-family:var(--font-display); font-weight:700; font-size:26px; margin:0 0 6px; }
#humn-hub p.section-sub{ color:var(--ink-soft); font-size:14px; margin:0 0 28px; line-height:1.5; }
#humn-hub label.field-label{ display:block; font-size:12px; font-family:var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
#humn-hub .field{ margin-bottom:24px; }
#humn-hub input[type="text"], #humn-hub input[type="email"], #humn-hub input[type="password"],
#humn-hub input[type="number"], #humn-hub select{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:4px;
  background:var(--field-bg); font-family:var(--font-body); font-size:15px; color:var(--ink);
}
#humn-hub input:focus, #humn-hub select:focus{ outline:2px solid var(--ink); outline-offset:1px; }
#humn-hub .goal-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
#humn-hub .goal-card{ border:1px solid var(--line); border-radius:4px; padding:16px; cursor:pointer; background:var(--field-bg); transition:border-color .15s; }
#humn-hub .goal-card:hover{ border-color:var(--ink-soft); }
#humn-hub .goal-card.selected{ border-color:var(--ink); border-width:1.5px; background:var(--surface); }
#humn-hub .goal-card .g-title{ font-weight:600; font-size:14.5px; margin-bottom:4px; }
#humn-hub .goal-card .g-desc{ font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
#humn-hub .checkbox-label{ display:flex; align-items:center; gap:9px; font-size:14px; cursor:pointer; }
#humn-hub .checkbox-label input{ width:16px; height:16px; flex-shrink:0; }
#humn-hub .freedom-field{ margin-top:4px; }
#humn-hub .freedom-slider-row{ display:flex; align-items:center; gap:14px; }
#humn-hub input[type="range"]{ flex:1; -webkit-appearance:none !important; appearance:none !important; height:4px !important; border-radius:2px !important; background:var(--line) !important; outline:none !important; cursor:pointer; margin:0 !important; padding:0 !important; }
#humn-hub input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none !important; appearance:none !important; width:18px !important; height:18px !important; border-radius:50% !important; background:var(--ink) !important; border:none !important; cursor:pointer; }
#humn-hub input[type="range"]::-moz-range-thumb{ width:18px !important; height:18px !important; border-radius:50% !important; background:var(--ink) !important; border:none !important; cursor:pointer; }
#humn-hub .freedom-value{ font-family:var(--font-mono) !important; font-size:14px !important; font-weight:600 !important; min-width:76px; text-align:right; color:var(--ink) !important; }
#humn-hub .freedom-caption{ font-size:12.5px !important; color:var(--ink-soft) !important; margin-top:8px !important; line-height:1.5 !important; }
#humn-hub .meals-stepper{ display:flex; align-items:center; gap:16px; }
#humn-hub .meals-btn{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--field-bg); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink); }
#humn-hub .meals-count{ font-family:var(--font-mono); font-size:22px; min-width:70px; text-align:center; }
#humn-hub .btn-primary{ background:var(--ink); color:var(--field-bg); border:none; border-radius:4px; padding:14px 28px; font-family:var(--font-body); font-weight:600; font-size:14.5px; cursor:pointer; letter-spacing:.01em; width:100%; }
#humn-hub .btn-primary:hover{ opacity:.88; }
#humn-hub .btn-primary:disabled{ opacity:.5; cursor:not-allowed; }
#humn-hub .btn-secondary{ background:none; border:1px solid var(--line); border-radius:4px; padding:13px 24px; font-family:var(--font-body); font-weight:500; font-size:14.5px; cursor:pointer; color:var(--ink); }
#humn-hub .btn-secondary:hover{ border-color:var(--ink); }
#humn-hub .row-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:32px; }
#humn-hub .portion-guide{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
#humn-hub .portion-tile{ border-radius:5px; padding:20px 14px; text-align:center; }
#humn-hub .portion-tile.p-resist{ background:var(--resist-tint); }
#humn-hub .portion-tile.p-recover{ background:var(--recover-tint); }
#humn-hub .portion-tile.p-renew{ background:var(--renew-tint); }
#humn-hub .portion-tile.p-rhythm{ background:var(--rhythm-tint); }
#humn-hub .portion-tile svg{ width:36px; height:36px; margin-bottom:10px; }
#humn-hub .portion-amt{ font-family:var(--font-mono); font-size:20px; font-weight:500; }
#humn-hub .portion-cat{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-top:4px; }
#humn-hub .portion-unit{ font-size:11px; color:var(--ink-soft); margin-top:2px; }
#humn-hub .daily-total-row{ display:flex; gap:12px; margin-bottom:28px; flex-wrap:wrap; }
#humn-hub .daily-total-tile{ flex:1; min-width:120px; border:1px solid var(--line); border-radius:5px; padding:14px; text-align:center; background:var(--field-bg); }
#humn-hub .daily-total-tile .dt-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:4px; }
#humn-hub .daily-total-tile .dt-val{ font-family:var(--font-mono); font-size:16px; }
#humn-hub .info-line{ font-size:13px; color:var(--ink-soft); border-left:2px solid var(--line); padding-left:14px; margin-bottom:32px; line-height:1.6; }
#humn-hub .tracker-table{ width:100%; border-collapse:collapse; margin-bottom:8px; }
#humn-hub .tracker-table th{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); text-align:left; padding:8px; border-bottom:1px solid var(--line); }
#humn-hub .tracker-table td{ padding:10px 8px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle; }
#humn-hub .meal-check-group{ display:flex; gap:6px; flex-wrap:wrap; }
#humn-hub .meal-check{ width:26px; height:26px; border:1px solid var(--line); border-radius:4px; background:var(--field-bg); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); cursor:pointer; user-select:none; }
#humn-hub .meal-check.checked{ background:var(--recover); border-color:var(--recover); color:#fff; }
#humn-hub .water-check-group{ display:flex; gap:4px; }
#humn-hub .water-check{ width:16px; height:16px; border:1px solid var(--line); border-radius:50%; background:var(--field-bg); cursor:pointer; }
#humn-hub .water-check.checked{ background:var(--rhythm); border-color:var(--rhythm); }
#humn-hub .notes-input{ width:100%; border:none; border-bottom:1px solid var(--line); background:transparent; font-size:13px; font-family:var(--font-body); color:var(--ink); padding:4px 2px; }
#humn-hub .notes-input:focus{ outline:none; border-bottom:1px solid var(--ink); }
#humn-hub .top-bar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
#humn-hub .top-bar .greeting{ font-family:var(--font-display); font-weight:700; font-size:20px; color:#fff; }
#humn-hub .top-bar .link-btn{ background:none; border:none; color:var(--muted-on-dark); font-family:var(--font-body); font-size:13px; cursor:pointer; text-decoration:underline; padding:0; }
#humn-hub .link-btn:hover{ color:#fff; }
#humn-hub .error-box{ border:1px solid var(--resist); background:var(--resist-tint); border-radius:5px; padding:14px 16px; font-size:13.5px; margin-bottom:20px; }
#humn-hub .success-box{ border:1px solid var(--recover); background:var(--recover-tint); border-radius:5px; padding:14px 16px; font-size:13.5px; margin-bottom:20px; }
#humn-hub .auth-switch{ text-align:center; margin-top:20px; font-size:13.5px; color:var(--ink-soft); }
#humn-hub .auth-switch a{ color:var(--ink); }
#humn-hub .loading-state{ text-align:center; padding:60px 20px; color:var(--muted-on-dark); }
#humn-hub footer{ text-align:center; margin-top:56px; font-size:12px; color:var(--muted-on-dark); }
@media (max-width:680px){
  #humn-hub .goal-grid{ grid-template-columns:1fr; }
  #humn-hub .portion-guide{ grid-template-columns:repeat(2,1fr); }
  #humn-hub .card{ padding:22px; }
}