@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root {
  --ink: #123a61;
  --ink-soft: #63869e;
  --blue: #278ee0;
  --cobalt: #176fc9;
  --mint: #9be9d8;
  --mint-deep: #4ebea9;
  --glass: rgba(255, 255, 255, 0.68);
  --line: rgba(79, 171, 228, 0.23);
  --shadow: 0 20px 48px rgba(39, 117, 161, 0.15), 0 2px 4px rgba(56, 154, 204, 0.08);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: linear-gradient(180deg, #8dd9f8 0, rgba(162,225,249,.78) 76px, transparent 220px), radial-gradient(circle at 76% 8%, #b2efff, transparent 28%), radial-gradient(circle at 13% 87%, #b9f4e2, transparent 27%), linear-gradient(142deg, #fbfeff 0%, #e8f8ff 42%, #d9f1ff 100%); }
body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  background: transparent;
  isolation: isolate;
}
body::before, body::after {
  position: fixed;
  z-index: -1;
  content: '';
  pointer-events: none;
}
body::before {
  inset: 0;
  background:
    linear-gradient(180deg, #8dd9f8 0, rgba(162,225,249,.78) 76px, transparent 220px),
    radial-gradient(circle at 76% 8%, rgba(178, 239, 255, 0.98), transparent 28%),
    radial-gradient(circle at 13% 87%, rgba(185, 244, 226, 0.67), transparent 27%),
    linear-gradient(142deg, #fbfeff 0%, #e8f8ff 42%, #d9f1ff 100%);
}
body::after {
  top: -24vh;
  right: -24vw;
  width: min(72vw, 840px);
  height: min(72vw, 840px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 69%);
  filter: blur(2px);
}

button { border: 0; color: inherit; font: inherit; cursor: pointer; }
.app-shell { width: min(100%, 740px); margin: auto; padding: calc(22px + env(safe-area-inset-top)) 24px calc(122px + env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 49px; }
.brand { display: flex; align-items: center; color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: -1.2px; text-decoration: none; }
.brand-mark { width: 31px; height: 31px; margin-right: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 11px; box-shadow: 0 5px 14px rgba(31,129,201,.22); }
.icon-button { display: grid; width: 43px; height: 43px; padding: 10px; place-items: center; border: 1px solid rgba(255,255,255,.95); border-radius: 15px; background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(228,247,255,.56)); box-shadow: 0 9px 21px rgba(61,143,182,.13), inset 0 1px rgba(255,255,255,.9); transition: transform .22s, box-shadow .22s; }
.icon-button:hover { transform: translateY(-2px); box-shadow: 0 13px 26px rgba(61,143,182,.19), inset 0 1px white; }
.icon-button svg { width: 100%; height: 100%; fill: none; stroke: var(--cobalt); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; }

.eyebrow { margin: 0 0 12px; color: #598caa; font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 1.25px; }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.hero h1, .history-view h1 { margin: 0 0 10px; font-family: 'Playfair Display', serif; font-size: clamp(39px, 9vw, 57px); letter-spacing: -2.8px; line-height: .93; }
.hero h1 i { color: #347fae; }
.subtle { margin: 0; color: var(--ink-soft); font-size: 14px; }
.new-day { flex: 0 0 auto; padding: 11px 14px; color: #166fb5; border: 1px solid rgba(255,255,255,.95); border-radius: 14px; background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(219,245,255,.68)); box-shadow: 0 9px 20px rgba(67,148,184,.13), inset 0 1px white; font-size: 13px; font-weight: 700; transition: .22s; }
.new-day:hover { transform: translateY(-2px); box-shadow: 0 14px 25px rgba(67,148,184,.18), inset 0 1px white; }
.new-day span { margin-left: 5px; color: var(--mint-deep); font-size: 17px; }

.glass-card { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.98); border-radius: 27px; background: linear-gradient(125deg, rgba(255,255,255,.88), rgba(237,250,255,.55)); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.96), inset 0 -1px rgba(111,199,238,.1); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.glass-card::before { position: absolute; top: 0; left: 6%; width: 78%; height: 1px; content: ''; background: linear-gradient(90deg, transparent, rgba(255,255,255,.98), transparent); }
.totals { display: flex; align-items: center; min-height: 177px; padding: 30px 32px; margin-bottom: 24px; background: linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(218,245,255,.77) 48%, rgba(181,226,255,.64) 100%); }
.totals::after { position: absolute; right: -28px; bottom: -74px; width: 215px; height: 215px; content: ''; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: radial-gradient(circle at 35% 25%, rgba(171,255,237,.45), rgba(89,187,235,.12) 47%, transparent 68%); box-shadow: 0 0 50px rgba(130,238,216,.25); }
.total-block { position: relative; z-index: 1; flex: 1; }
.total-number { display: block; color: #134b78; font-size: clamp(44px, 10vw, 64px); font-weight: 700; letter-spacing: -3.6px; line-height: .95; }
.unit { margin-left: 3px; color: #237cb1; font-size: .46em; letter-spacing: -1px; }
.total-label { display: block; margin-top: 10px; color: #6089a3; font-size: 13px; font-weight: 600; }
.divider { flex: none; width: 1px; height: 74px; margin: 0 42px; background: linear-gradient(transparent, rgba(74,167,214,.34), transparent); }
.orb { position: absolute; pointer-events: none; border-radius: 50%; }.orb-one { top: -70px; right: 50px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(255,255,255,.8), rgba(255,255,255,0) 70%); }.orb-two { right: -45px; bottom: -46px; width: 130px; height: 130px; background: radial-gradient(circle, rgba(153,237,221,.32), transparent 70%); }

.entry-area, .weight-log { padding: 26px; }
.entry-heading { display: flex; align-items: flex-start; justify-content: space-between; }.entry-heading .eyebrow { margin-bottom: 7px; }.entry-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.7px; }
.time-chip { padding: 7px 9px; color: #4f91ad; border: 1px solid rgba(255,255,255,.75); border-radius: 9px; background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(208,241,255,.58)); box-shadow: inset 0 1px white; font-family: 'DM Mono', monospace; font-size: 10px; }
.inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 25px; }
.inputs label, .weight-input label { position: relative; display: block; padding: 10px 14px 8px; border: 1px solid rgba(130,202,234,.3); border-radius: 16px; background: rgba(255,255,255,.62); box-shadow: inset 0 1px rgba(255,255,255,.95); transition: .22s; }
.inputs label:focus-within, .weight-input label:focus-within { border-color: rgba(56,164,220,.72); background: rgba(255,255,255,.96); box-shadow: 0 0 0 4px rgba(79,185,233,.14), inset 0 1px white; }
.inputs label span, .weight-input label span { display: block; color: #6d96ad; font-size: 11px; font-weight: 600; }
.inputs input, .weight-input input { width: calc(100% - 25px); padding: 3px 0 0; outline: none; border: 0; background: transparent; color: var(--ink); font-size: 25px; font-weight: 700; letter-spacing: -1.2px; }
.inputs input::placeholder, .weight-input input::placeholder { color: #bfd8e5; }.inputs b { position: absolute; right: 14px; bottom: 12px; color: #6c99ae; font-size: 11px; }
.log-button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 15px; margin-top: 18px; color: white; border: 1px solid rgba(255,255,255,.43); border-radius: 15px; background: linear-gradient(112deg, #258dde, #1c72d1 59%, #37b9c7); box-shadow: 0 12px 22px rgba(35,123,198,.28), inset 0 1px rgba(255,255,255,.38); font-size: 14px; font-weight: 700; text-shadow: 0 1px rgba(0,72,139,.18); transition: .22s; }.log-button:hover { transform: translateY(-2px); box-shadow: 0 16px 27px rgba(35,123,198,.35), inset 0 1px rgba(255,255,255,.45); }.log-button:active { transform: translateY(1px) scale(.99); }.log-button span { color: #b5ffeb; font-size: 19px; line-height: 10px; }

.recent-section, .weight-history { margin-top: 35px; }.section-heading { display: flex; align-items: center; justify-content: space-between; }.section-heading .eyebrow { margin-bottom: 13px; }.section-heading span { color: #7899ad; font-size: 12px; }.entry-list, .history-list { display: grid; gap: 10px; }
.entry-shell { position: relative; border-radius: 18px; }.entry-shell:has(.entry-menu), .history-item:has(.day-menu) { z-index: 4; }.entry-row { position: relative; display: flex; align-items: center; padding: 15px 16px; border: 1px solid rgba(255,255,255,.85); border-radius: 18px; background: linear-gradient(140deg, rgba(255,255,255,.76), rgba(233,248,255,.52)); box-shadow: 0 7px 17px rgba(67,139,175,.07), inset 0 1px rgba(255,255,255,.88); transition: transform .2s, box-shadow .2s, background .2s; }
.log-item { cursor: pointer; -webkit-tap-highlight-color: transparent; }.log-item:hover { transform: translateY(-2px); background: rgba(255,255,255,.93); box-shadow: 0 12px 24px rgba(64,138,174,.12), inset 0 1px white; }.log-item:active { transform: scale(.987); }.log-item:focus-visible, .day-card-main:focus-visible { outline: 3px solid rgba(64,171,223,.36); outline-offset: 3px; }
.entry-icon { display: grid; width: 37px; height: 37px; margin-right: 12px; color: #2389d3; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 13px; background: linear-gradient(145deg, #ecfbff, #c9efff); box-shadow: inset 0 1px white, 0 5px 10px rgba(53,150,202,.11); font-size: 16px; }.weight-icon { color: #2c92c1; background: linear-gradient(145deg, #edfffb, #c5f2e8); }
.entry-meta { flex: 1; }.entry-name { display: block; font-size: 13px; font-weight: 700; }.entry-time { display: block; margin-top: 2px; color: #7898ac; font-size: 11px; }.entry-values { color: #568099; font-size: 12px; line-height: 1.6; text-align: right; }.entry-values b { color: var(--ink); font-weight: 700; }.entry-chevron { margin-left: 12px; color: #64a6c7; font-size: 13px; letter-spacing: 1px; }
.entry-menu, .day-menu { position: absolute; z-index: 6; top: calc(100% - 3px); right: 11px; min-width: 122px; padding: 5px; border: 1px solid rgba(255,255,255,.98); border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 16px 30px rgba(41,115,154,.21), inset 0 1px white; }.entry-menu button, .day-menu button { width: 100%; padding: 9px; color: #d14f63; border-radius: 8px; background: transparent; font-size: 12px; font-weight: 600; text-align: left; }.entry-menu button:hover, .day-menu button:hover { background: #fff0f3; }
.empty-state { padding: 28px 10px; color: #7c9aad; border: 1px dashed rgba(102,180,213,.38); border-radius: 18px; background: rgba(255,255,255,.25); font-size: 13px; text-align: center; }.hidden { display: none !important; }

.history-view, .weight-view { animation: fade .35s both; }.back-button { padding: 0; margin: 0 0 34px; color: #467b9b; background: transparent; font-size: 13px; font-weight: 600; }.back-button span { margin-right: 6px; color: var(--blue); font-size: 18px; vertical-align: -1px; }.history-view h1 { margin-bottom: 28px; }
.day-card { position: relative; display: flex; align-items: center; width: 100%; padding: 0; border: 1px solid rgba(255,255,255,.92); border-radius: 21px; background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(229,247,255,.53)); box-shadow: 0 9px 23px rgba(66,137,172,.1), inset 0 1px white; animation: rise .35s both; transition: transform .22s, background .22s; }.day-card:hover { transform: translateY(-2px); background: rgba(255,255,255,.9); }.day-card-main { display: flex; flex: 1; align-items: center; min-width: 0; padding: 20px; cursor: pointer; border-radius: inherit; }.day-date { flex: 1; }.day-date strong { display: block; font-size: 15px; letter-spacing: -.3px; }.day-date span { display: block; margin-top: 3px; color: #7f9bae; font-size: 11px; }.day-stats { padding-right: 11px; color: #67869a; font-size: 12px; line-height: 1.65; text-align: right; }.day-stats b { color: var(--ink); }.chevron { color: #54a2ca; font-size: 20px; }.day-options-button { align-self: center; padding: 8px 3px; margin: 0 16px 0 -4px; color: #64a0bf; background: transparent; font-weight: 700; letter-spacing: 1px; }.history-detail { margin: -2px 0 15px; animation: fade .3s; }.history-detail .entry-list { margin-top: 11px; }

.weight-hero { margin-bottom: 27px; }.weight-hero h1 { font-size: clamp(37px, 8vw, 53px); }.weight-summary, .chart-card { padding: 25px; margin-bottom: 18px; }.weight-summary { background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(213,251,243,.56) 58%, rgba(187,231,255,.55)); }.weight-summary .eyebrow { margin-bottom: 10px; }.weight-reading { display: flex; align-items: baseline; gap: 7px; }.weight-reading span { color: #124b74; font-size: 59px; font-weight: 700; letter-spacing: -3.5px; line-height: 1; }.weight-reading b { color: #348b9b; font-size: 16px; }.weight-change { margin: 12px 0 0; color: #658a9b; font-size: 13px; }.chart-heading { display: flex; align-items: flex-start; justify-content: space-between; }.chart-heading .eyebrow { margin-bottom: 6px; }.chart-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.65px; }.chart-heading > span { color: #5e9db5; font-family: 'DM Mono', monospace; font-size: 10px; }.chart-wrap { height: 190px; margin-top: 18px; }.chart-wrap svg { display: block; width: 100%; height: 164px; overflow: visible; }.chart-baseline { stroke: rgba(77,166,206,.19); stroke-width: 1; }.chart-line { fill: none; stroke: #2f9cd4; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; filter: drop-shadow(0 4px 3px rgba(54,160,210,.21)); }.chart-dot { fill: #ecfffa; stroke: #2792cf; stroke-width: 3; }.chart-labels { display: flex; justify-content: space-between; color: #7a9bab; font-size: 10px; }.chart-empty { display: grid; height: 164px; color: #7498a9; border: 1px dashed rgba(96,180,202,.35); border-radius: 16px; place-items: center; font-size: 13px; }.weight-input { display: grid; grid-template-columns: 1fr 76px; gap: 11px; margin-top: 23px; }.weight-input select { padding: 0 12px; color: #357a8e; outline: none; border: 1px solid rgba(117,206,198,.38); border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(208,249,239,.62)); box-shadow: inset 0 1px white; font: 700 13px 'DM Sans', sans-serif; }

.bottom-nav { position: fixed; z-index: 8; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; display: flex; gap: 5px; width: min(232px, calc(100% - 34px)); padding: 6px; border: 1px solid rgba(255,255,255,.98); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.85), rgba(214,244,255,.68)); box-shadow: 0 15px 34px rgba(42,122,159,.23), inset 0 1px white; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: translateX(-50%); }.nav-item { display: flex; flex: 1; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; color: #7396a9; border-radius: 14px; background: transparent; font-size: 12px; font-weight: 700; transition: .22s; }.nav-item.active { color: #176db4; background: linear-gradient(145deg, #fff, #e7f8ff); box-shadow: 0 4px 11px rgba(60,141,180,.13), inset 0 1px white; }.nav-icon { color: #65b6d9; font-size: 16px; line-height: 12px; }.nav-item.active .nav-icon { color: var(--mint-deep); }
.toast { position: fixed; z-index: 10; bottom: 93px; left: 50%; padding: 11px 17px; color: white; pointer-events: none; border: 1px solid rgba(255,255,255,.22); border-radius: 13px; background: linear-gradient(110deg, rgba(17,78,119,.94), rgba(27,122,161,.94)); box-shadow: 0 11px 26px rgba(19,79,111,.24), inset 0 1px rgba(255,255,255,.15); font-size: 13px; opacity: 0; translate: -50% 20px; transition: .3s; }.toast.show { opacity: 1; translate: -50% 0; }

.totals-slam { animation: card-slam .62s cubic-bezier(.18,.84,.23,1.35); }.number-charge { animation: number-charge .72s cubic-bezier(.18,.84,.23,1.15); }.impact-wave { position: absolute; z-index: 0; top: 50%; left: 50%; width: 28px; height: 28px; pointer-events: none; border: 2px solid rgba(94,223,198,.65); border-radius: 50%; transform: translate(-50%,-50%) scale(.4); animation: impact-wave .64s ease-out both; }.score-pop { position: absolute; z-index: 3; top: 12px; right: 17px; color: #198dca; pointer-events: none; font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .2px; text-shadow: 0 1px white; animation: score-pop .72s cubic-bezier(.12,.75,.24,1) both; }.weight-slam { animation: weight-slam .6s cubic-bezier(.17,.85,.25,1.25); }.chart-reveal .chart-line { stroke-dasharray: 650; stroke-dashoffset: 650; animation: draw-line .82s cubic-bezier(.25,.8,.25,1) forwards; }.chart-reveal .chart-dot { animation: dot-pop .38s cubic-bezier(.2,.9,.2,1.5) both; }
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes card-slam { 0% { transform:scale(1); } 31% { transform:scale(1.026); box-shadow:0 20px 52px rgba(31,151,206,.22), inset 0 1px white; } 53% { transform:scale(.988); } 72% { transform:scale(1.009); } 100% { transform:scale(1); } } @keyframes number-charge { 0% { color:#134b78; transform:translateY(0) scale(1); } 27% { color:#20a99e; transform:translateY(-5px) scale(1.09); text-shadow:0 8px 18px rgba(65,207,180,.22); } 57% { color:#134b78; transform:translateY(2px) scale(.975); } 100% { transform:none; } } @keyframes impact-wave { 0% { opacity:.95; transform:translate(-50%,-50%) scale(.35); } 72% { opacity:.22; } 100% { opacity:0; transform:translate(-50%,-50%) scale(14); } } @keyframes score-pop { 0% { opacity:0; transform:translateY(11px) scale(.75); } 28% { opacity:1; transform:translateY(-4px) scale(1.07); } 100% { opacity:0; transform:translateY(-28px) scale(.94); } } @keyframes weight-slam { 0% { transform:scale(1); } 42% { transform:scale(1.02); box-shadow:0 18px 45px rgba(55,177,165,.2); } 63% { transform:scale(.99); } 100% { transform:scale(1); } } @keyframes draw-line { to { stroke-dashoffset:0; } } @keyframes dot-pop { from { transform:scale(0); transform-origin:center; } to { transform:scale(1); transform-origin:center; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }
@media (max-width: 430px) { .app-shell { padding-right: 17px; padding-left: 17px; }.topbar { margin-bottom: 40px; }.totals { padding: 28px 23px; }.divider { margin: 0 29px; }.entry-area, .weight-log { padding: 21px; }.hero h1 { font-size: 41px; } }