:root{
  --ivory:#F4F0E7;--paper:#FBF8F2;--paper2:#F7F2EA;--ink:#3F493E;--muted:#7A8278;
  --sage:#AAB69A;--sage-deep:#7C8D6D;--sage-pale:#E2E6D8;--blue:#B9C9D5;--blue-pale:#E5ECF0;
  --sand:#E6D0A8;--sand-pale:#F4E8D3;--rose:#D4A08F;--rose-pale:#F2DED7;--clay:#B97D6D;
  --line:rgba(99,104,94,.14);--danger:#A95E58;--shadow:0 10px 30px rgba(70,72,62,.08);--shadow-soft:0 5px 18px rgba(70,72,62,.06);
  --nav-h:76px;
}
:root[data-theme="dark"]{
  --ivory:#182126;--paper:#222D32;--paper2:#28343A;--ink:#F1EEE6;--muted:#AAB2AE;
  --sage:#83906F;--sage-deep:#A8B795;--sage-pale:#344038;--blue:#7E94A4;--blue-pale:#2B3942;
  --sand:#B69561;--sand-pale:#3E382E;--rose:#B77868;--rose-pale:#42302D;--clay:#D18B78;
  --line:rgba(234,235,226,.1);--danger:#DD8B82;--shadow:0 12px 34px rgba(0,0,0,.18);--shadow-soft:0 5px 18px rgba(0,0,0,.14)
}
*{box-sizing:border-box}html{background:var(--ivory)}body{margin:0;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:radial-gradient(circle at 2% 0,rgba(170,182,154,.16),transparent 25%),radial-gradient(circle at 98% 8%,rgba(212,160,143,.13),transparent 24%),var(--ivory);min-height:100vh;transition:background .2s,color .2s}
button,input,select,textarea{font:inherit}.hidden{display:none!important}.shell{max-width:720px;margin:auto;padding:14px 14px calc(var(--nav-h) + 30px)}
.offlinebar{position:sticky;top:0;z-index:90;text-align:center;background:var(--ink);color:var(--paper);padding:8px 12px;font-size:12px}
.hero{padding:15px 5px 14px}.hero-row{display:flex;align-items:center;gap:10px}.brandmark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--sage-deep);font-family:Georgia,serif;font-size:27px}.brand-copy{flex:1;text-align:center;margin-left:42px}.eyebrow{text-transform:uppercase;letter-spacing:.22em;color:var(--rose);font-size:9px;font-weight:800}.hero h1{font:500 35px/1 Georgia,"Times New Roman",serif;letter-spacing:.01em;margin:3px 0;color:var(--sage-deep)}.hero p{text-align:center;font:italic 13px/1.45 Georgia,serif;color:var(--muted);margin:8px 0 0}.hero-actions{display:flex;gap:6px}.round-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);box-shadow:var(--shadow-soft);font-size:19px}
.card,.card-soft{background:color-mix(in srgb,var(--paper) 96%,transparent);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:15px;margin:11px 0}.card-soft{box-shadow:var(--shadow-soft);margin-top:0}.auth-wrap{max-width:520px;margin:auto}.auth-card{padding:22px}.card-kicker,.page-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--sage-deep);font-weight:850}.page-head{padding:9px 4px 2px}.page-head h2,.card h2{font:500 26px/1.1 Georgia,serif;margin:4px 0 8px}.today-head{display:flex;justify-content:space-between;align-items:center}.today-title{font-size:20px;font-weight:850}.today-date{font-size:12px;color:var(--muted);margin-top:3px}.sync-pill{border:0;border-radius:999px;padding:8px 10px;background:var(--sage-pale);color:var(--sage-deep);font-size:11px;font-weight:850;display:flex;align-items:center;gap:6px}.sync-dot{width:7px;height:7px;background:currentColor;border-radius:50%;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 14%,transparent)}
label{display:block;font-size:11px;font-weight:850;color:var(--muted);margin:12px 0 5px}input,select,textarea{width:100%;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:14px;padding:12px;font-size:16px;outline:none}textarea{min-height:92px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--sage);box-shadow:0 0 0 3px color-mix(in srgb,var(--sage) 23%,transparent)}
.primary,.secondary,.danger,.small-action{border:0;border-radius:14px;padding:13px 14px;font-weight:850}.primary{background:var(--sage-deep);color:#fff;width:100%;margin-top:10px}.secondary{background:var(--paper2);color:var(--ink);border:1px solid var(--line);margin-top:10px}.danger{background:var(--rose-pale);color:var(--danger);margin-top:10px}.full{width:100%}.small-action{background:var(--sage-deep);color:#fff;padding:9px 12px;font-size:12px}.link-btn,.text-btn{border:0;background:transparent;color:var(--sage-deep);font-weight:850;font-size:12px}.link-btn{width:100%;padding:13px 5px 3px;text-decoration:underline;text-underline-offset:3px}.text-btn{padding:6px}.muted{color:var(--muted);font-size:13px;line-height:1.5}.optional{font-weight:500}.message{font-size:12px;margin-top:9px;line-height:1.4}.message.error{color:var(--danger)}.message.ok{color:var(--sage-deep)}
.choice-grid,.filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.choice{border:1px solid var(--line);padding:11px;border-radius:14px;background:var(--paper2);color:var(--muted);font-weight:850}.choice.selected{background:var(--sage-deep);color:#fff}.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-title{font-size:14px;font-weight:900;margin-bottom:12px}.section-meta{font-size:10px;color:var(--muted);font-weight:650}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:10px 0 2px}.quick{border:1px solid rgba(255,255,255,.4);border-radius:18px;min-height:104px;padding:13px 7px;text-align:center;color:#394236;box-shadow:var(--shadow-soft);transition:transform .08s,filter .08s}.quick:active{transform:scale(.975);filter:brightness(.97)}.quick-icon{display:block;font-size:27px;margin-bottom:9px}.quick b{display:block;font-size:13px}.quick small{display:block;font-size:9px;margin-top:4px;opacity:.72;font-weight:700}.quick.feed{background:linear-gradient(150deg,#DCE2D2,var(--sage))}.quick.pee{background:linear-gradient(150deg,#E8EEF2,var(--blue))}.quick.poo{background:linear-gradient(150deg,#F6EAD2,var(--sand))}.quick.sleep{background:linear-gradient(150deg,#EEDCD5,var(--rose));color:#4B3C37}.quick.sleep.active{outline:3px solid color-mix(in srgb,var(--rose) 60%,transparent)}
:root[data-theme="dark"] .quick{color:var(--ink);border-color:var(--line)}:root[data-theme="dark"] .quick.feed{background:linear-gradient(150deg,#344035,#4B5942)}:root[data-theme="dark"] .quick.pee{background:linear-gradient(150deg,#2B3942,#40505A)}:root[data-theme="dark"] .quick.poo{background:linear-gradient(150deg,#413A2F,#554932)}:root[data-theme="dark"] .quick.sleep{background:linear-gradient(150deg,#44322F,#5A3D37)}
.sleep-banner{display:flex;align-items:center;gap:10px;background:var(--rose-pale);border:1px solid color-mix(in srgb,var(--rose) 25%,transparent);border-radius:17px;padding:11px 13px;margin-top:10px}.sleep-banner small,.sleep-banner strong{display:block}.sleep-banner strong{margin-top:2px}.pulse-dot{width:10px;height:10px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 5px color-mix(in srgb,var(--rose) 18%,transparent)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.metric{background:var(--paper2);border:1px solid var(--line);border-radius:15px;padding:10px 5px;text-align:center}.metric-icon{display:block;font-size:16px;min-height:21px;color:var(--sage-deep)}.metric strong{display:block;font-size:18px;letter-spacing:-.03em;margin:3px 0}.metric>span:not(.metric-icon){font-size:10px;color:var(--muted);font-weight:750}.metric small{display:block;font-size:8px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.last-feed-line{display:flex;justify-content:space-between;align-items:center;background:var(--sage-pale);border-radius:13px;padding:10px 12px;margin-top:8px;font-size:11px}.last-feed-line span{color:var(--muted)}
.handover-card{background:linear-gradient(145deg,var(--paper),color-mix(in srgb,var(--sand-pale) 45%,var(--paper)))}.handover{font-size:12px;line-height:1.72}.handover b{color:var(--ink)}
.event{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}.event:last-child{border-bottom:0}.event-bullet{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:0 0 38px;background:var(--paper2);font-size:17px}.event-body{flex:1;min-width:0}.event-title{font-size:13px;font-weight:880}.event-meta{font-size:10px;color:var(--muted);margin-top:3px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.event-actions{display:flex;gap:5px}.event-actions button{border:1px solid var(--line);background:var(--paper2);color:var(--ink);border-radius:999px;padding:7px 9px;font-size:10px;font-weight:850}.empty{text-align:center;color:var(--muted);font-size:12px;padding:20px 4px}
.backup-card{display:flex;align-items:center;gap:11px;background:linear-gradient(145deg,var(--paper),var(--sand-pale));border:1px solid var(--line);border-radius:20px;padding:13px 14px;margin:11px 0;box-shadow:var(--shadow-soft)}.backup-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--sage-deep);font-size:19px}.backup-copy{flex:1;min-width:0}.backup-copy strong,.backup-copy span{display:block}.backup-copy strong{font-size:12px}.backup-copy span{font-size:10px;color:var(--muted);margin-top:3px}
.data-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px}.profile-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}.invite-box{margin-top:12px;background:var(--paper2);border-radius:15px;padding:12px}.invite-box span{display:block;font-size:10px;color:var(--muted)}.invite-box strong{font-size:20px;letter-spacing:.08em;display:inline-block;margin:5px 7px 0 0}.sync-state{font-size:11px;color:var(--muted);margin-top:10px}.tiny-text{font-size:10px}
.bottom-tabs{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:60;width:min(720px,100%);height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding:7px 11px calc(7px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(16px);border-top:1px solid var(--line);box-shadow:0 -8px 25px rgba(70,72,62,.05)}.bottom-tabs button{border:0;background:transparent;color:var(--muted);border-radius:14px;padding:5px;font-size:10px}.bottom-tabs button span{display:block;font-size:18px;line-height:1.2}.bottom-tabs button b{display:block;font-size:9px;margin-top:2px}.bottom-tabs button.active{color:var(--sage-deep);background:var(--sage-pale)}
dialog{width:min(92vw,520px);max-height:88vh;overflow:auto;border:0;padding:0;border-radius:24px;background:var(--paper);color:var(--ink);box-shadow:0 26px 75px rgba(25,30,25,.28)}dialog::backdrop{background:rgba(30,34,31,.42);backdrop-filter:blur(3px)}.modal{padding:20px}.modal h3{font:500 23px/1.1 Georgia,serif;margin:0 0 7px}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.dialog-actions.three{grid-template-columns:.9fr 1fr 1fr}.dialog-actions button{width:100%;margin-top:0}.event-type-badge{display:inline-block;background:var(--sage-pale);color:var(--sage-deep);border-radius:999px;padding:6px 9px;font-size:11px;font-weight:850;margin-bottom:4px}
.undo-bar{position:fixed;z-index:110;left:50%;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);transform:translateX(-50%);width:min(680px,calc(100% - 24px));display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:18px;background:var(--sage-deep);color:#fff;box-shadow:0 15px 36px rgba(44,55,43,.27)}.undo-bar>div{flex:1;min-width:0}.undo-bar strong,.undo-bar span{display:block}.undo-bar strong{font-size:12px}.undo-bar span{font-size:10px;opacity:.82;margin-top:2px}.undo-bar button{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;border-radius:12px;padding:8px 10px;font-size:11px;font-weight:850}.undo-bar .undo-close{border:0;background:transparent;font-size:20px;padding:4px}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);transform:translateX(-50%) translateY(10px);opacity:0;background:var(--ink);color:var(--paper);border-radius:999px;padding:10px 14px;font-size:11px;font-weight:800;transition:.18s;z-index:120;pointer-events:none}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:390px){.shell{padding-left:10px;padding-right:10px}.quick-grid{gap:6px}.quick{min-height:96px;padding:11px 4px}.quick b{font-size:12px}.metric strong{font-size:16px}.metric small{font-size:7px}.brand-copy{margin-left:36px}}
@media(min-width:650px){.shell{padding-left:18px;padding-right:18px}.quick{min-height:112px}.metrics{gap:10px}}

/* v5.0 · Diario + Andamento */
.day-picker-card{padding:11px 12px}.day-nav{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:8px}.day-arrow{width:42px;height:42px;border:1px solid var(--line);border-radius:14px;background:var(--paper2);color:var(--sage-deep);font-size:28px;line-height:1}.day-nav-center{text-align:center;min-width:0}.day-nav-center>span{display:block;font:500 18px/1.15 Georgia,serif;color:var(--ink);text-transform:capitalize}.day-date-input{border:0!important;box-shadow:none!important;background:transparent!important;padding:4px 2px!important;text-align:center;color:var(--muted);font-size:11px!important;height:auto}.today-chip{display:block;margin:6px auto 0;border:0;background:var(--sage-pale);color:var(--sage-deep);border-radius:999px;padding:6px 10px;font-size:10px;font-weight:850}.compact-select{width:auto;min-width:116px;padding:7px 28px 7px 9px;font-size:11px;border-radius:999px}
.timeline-card{overflow:hidden}.timeline-scale{display:flex;justify-content:space-between;color:var(--muted);font-size:9px;margin:0 1px 5px}.timeline-track{position:relative;height:92px;border-radius:15px;background:linear-gradient(to right,transparent 24.8%,var(--line) 25%,transparent 25.2%,transparent 49.8%,var(--line) 50%,transparent 50.2%,transparent 74.8%,var(--line) 75%,transparent 75.2%),var(--paper2);border:1px solid var(--line);overflow:hidden}.timeline-sleep{position:absolute;top:10px;height:24px;border-radius:9px;background:var(--blue);opacity:.82;min-width:2px}.timeline-marker{position:absolute;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:9px;border:2px solid var(--paper);box-shadow:0 2px 7px rgba(50,55,48,.15)}.timeline-marker.feed{top:46px;background:var(--sage);color:#263024}.timeline-marker.pee{top:66px;background:var(--blue);color:#27343b}.timeline-marker.poo{top:66px;background:var(--sand);color:#463a25}.timeline-marker.health,.timeline-marker.note{top:46px;background:var(--rose);color:#49322d}.timeline-now{position:absolute;top:0;bottom:0;width:1px;background:var(--clay);opacity:.65}.timeline-now:before{content:'';position:absolute;top:2px;left:-3px;width:7px;height:7px;border-radius:50%;background:var(--clay)}.timeline-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:11px}.timeline-legend{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:9px;color:var(--muted);font-size:9px}.timeline-legend span{display:flex;align-items:center;gap:5px}.timeline-legend i{width:8px;height:8px;border-radius:3px;display:inline-block}.legend-sleep{background:var(--blue)}.legend-feed{background:var(--sage)}.legend-pee{background:var(--blue-pale);border:1px solid var(--blue)}.legend-poo{background:var(--sand)}
.range-card{padding-bottom:12px}.segmented{display:grid;grid-template-columns:1fr 1fr;background:var(--paper2);border:1px solid var(--line);padding:4px;border-radius:15px}.segmented button{border:0;background:transparent;color:var(--muted);padding:9px;border-radius:11px;font-size:11px;font-weight:850}.segmented button.active{background:var(--sage-deep);color:#fff;box-shadow:var(--shadow-soft)}
.trend-summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:11px 0}.trend-summary{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:var(--shadow-soft)}.trend-summary>span{font-size:17px}.trend-summary strong{display:block;font-size:20px;margin:5px 0 2px}.trend-summary small{font-size:9px;color:var(--muted)}.chart-card{padding-bottom:12px}.chart-wrap{min-height:174px}.chart-wrap svg{display:block;width:100%;height:auto;overflow:visible}.chart-empty{height:160px;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:11px;padding:20px}.chart-axis-label{font-size:8px;fill:var(--muted)}.chart-grid-line{stroke:var(--line);stroke-width:1}.chart-line{fill:none;stroke:var(--sage-deep);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.chart-area{fill:color-mix(in srgb,var(--sage) 18%,transparent)}.chart-dot{fill:var(--paper);stroke:var(--sage-deep);stroke-width:2}.chart-bar-a{fill:var(--blue)}.chart-bar-b{fill:var(--sand)}.chart-bar-feed{fill:var(--sage)}.chart-bar-count{fill:var(--rose);opacity:.75}.chart-value{font-size:8px;fill:var(--ink);font-weight:700}
@media(max-width:390px){.bottom-tabs button span{font-size:16px}.bottom-tabs button b{font-size:8px}.timeline-track{height:88px}.chart-wrap{min-height:155px}}


/* =========================================================
   v5.1 · Warm UI / accessibility polish
   Visual-only release: typography, spacing, palette, icons.
   ========================================================= */

:root{
  --ivory:#F8F1E6;
  --paper:#FFFDF8;
  --paper2:#F8F0E4;
  --ink:#3F4038;
  --muted:#786F64;

  --sage:#B8C6A5;
  --sage-deep:#788A63;
  --sage-pale:#E9EEDF;

  --blue:#BFD4CF;
  --blue-pale:#E6F0EC;

  --sand:#E9CD9A;
  --sand-pale:#F8EBCF;

  --rose:#DFA795;
  --rose-pale:#F8E3DC;
  --clay:#C98069;

  --line:rgba(105,91,74,.14);
  --danger:#A85E54;
  --shadow:0 10px 30px rgba(105,82,57,.075);
  --shadow-soft:0 5px 18px rgba(105,82,57,.055);
  --nav-h:82px;
}

:root[data-theme="dark"]{
  --ivory:#201E1B;
  --paper:#292722;
  --paper2:#312E28;
  --ink:#F7F0E7;
  --muted:#C0B6AA;

  --sage:#91A17B;
  --sage-deep:#BAC99D;
  --sage-pale:#384033;

  --blue:#809E99;
  --blue-pale:#2F3E3A;

  --sand:#C7A36B;
  --sand-pale:#443929;

  --rose:#CA8A78;
  --rose-pale:#49342F;
  --clay:#E19A80;

  --line:rgba(247,240,231,.11);
  --danger:#E89A91;
  --shadow:0 12px 34px rgba(0,0,0,.22);
  --shadow-soft:0 5px 18px rgba(0,0,0,.16);
}

html{font-size:16px}
body{
  font-size:16px;
  line-height:1.45;
  background:
    radial-gradient(circle at 4% 0,rgba(184,198,165,.17),transparent 27%),
    radial-gradient(circle at 98% 9%,rgba(223,167,149,.15),transparent 25%),
    radial-gradient(circle at 45% 105%,rgba(233,205,154,.10),transparent 32%),
    var(--ivory);
}

.shell{padding-top:16px}
.hero{padding:16px 5px 16px}
.brandmark{width:38px;height:38px;font-size:30px}
.brand-copy{margin-left:45px}
.eyebrow{font-size:10.5px;letter-spacing:.20em}
.hero h1{font-size:37px;color:var(--sage-deep)}
.hero p{font-size:14px;line-height:1.5;margin-top:9px}
.round-btn{width:42px;height:42px;font-size:21px}

.card,.card-soft{
  border-radius:23px;
  padding:17px;
  margin:12px 0;
}
.auth-card{padding:23px}

.card-kicker,.page-kicker{font-size:11.5px;letter-spacing:.13em}
.page-head{padding:11px 5px 3px}
.page-head h2,.card h2{font-size:28px}
.today-title{font-size:22px}
.today-date{font-size:13px;margin-top:4px}
.sync-pill{font-size:12px;padding:9px 11px;gap:7px}
.sync-dot{width:8px;height:8px}

label{font-size:12.5px;margin-top:13px}
input,select,textarea{font-size:16px;padding:13px 13px;border-radius:15px}
.muted{font-size:14px;line-height:1.55}
.message{font-size:13px}
.primary,.secondary,.danger{font-size:14px;padding:14px 15px}
.small-action{font-size:13px;padding:10px 13px}
.link-btn,.text-btn{font-size:13px}

.section-title{font-size:16px;margin-bottom:13px}
.section-meta{font-size:11.5px}
.choice{font-size:13px;padding:12px}

.quick-grid{gap:9px;margin-top:11px}
.quick{
  min-height:112px;
  padding:15px 6px 13px;
  border-radius:20px;
  border-color:rgba(255,255,255,.58);
}
.quick-icon{font-size:32px;margin-bottom:10px;line-height:1}
.quick b{font-size:13.5px}
.quick small{font-size:10px;margin-top:5px;opacity:.76}

.quick.feed{background:linear-gradient(150deg,#EEF2E6,#C9D5B8)}
.quick.pee{background:linear-gradient(150deg,#EDF5F2,#CBE0DA)}
.quick.poo{background:linear-gradient(150deg,#FFF2D9,#EBCF9C)}
.quick.sleep{background:linear-gradient(150deg,#FBE9E2,#E2AA98);color:#4B3A34}

:root[data-theme="dark"] .quick.feed{background:linear-gradient(150deg,#343A2F,#4B5740)}
:root[data-theme="dark"] .quick.pee{background:linear-gradient(150deg,#2E3B37,#435550)}
:root[data-theme="dark"] .quick.poo{background:linear-gradient(150deg,#40372A,#574833)}
:root[data-theme="dark"] .quick.sleep{background:linear-gradient(150deg,#46312C,#614039)}

.sleep-banner{padding:13px 14px;border-radius:18px}
.sleep-banner small{font-size:12px}
.sleep-banner strong{font-size:15px}

.metrics{gap:8px}
.metric{border-radius:17px;padding:12px 5px}
.metric-icon{font-size:20px;min-height:25px}
.metric strong{font-size:20px;margin:4px 0}
.metric>span:not(.metric-icon){font-size:11px}
.metric small{font-size:9.5px;margin-top:4px}
.last-feed-line{font-size:12px;padding:11px 13px}

.handover{font-size:13.5px;line-height:1.7}

.event{gap:11px;padding:12px 0}
.event-bullet{
  width:43px;height:43px;flex-basis:43px;
  font-size:20px;
  background:var(--paper2)
}
.event-title{font-size:14px}
.event-meta{font-size:11.5px;margin-top:4px}
.event-actions button{font-size:11.5px;padding:8px 10px}
.empty{font-size:13px}

.backup-card{padding:14px 15px;border-radius:21px}
.backup-icon{width:42px;height:42px;font-size:21px}
.backup-copy strong{font-size:13px}
.backup-copy span{font-size:11.5px;line-height:1.35}

.data-row{font-size:13px;padding:10px 0}
.invite-box span{font-size:11.5px}
.invite-box strong{font-size:21px}
.sync-state{font-size:12.5px}
.tiny-text{font-size:11.5px}

/* Bottom navigation: larger and calmer. */
.bottom-tabs{
  padding:8px 9px calc(8px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  box-shadow:0 -8px 28px rgba(102,79,54,.06);
}
.bottom-tabs button{
  min-height:58px;
  border-radius:15px;
  padding:5px 2px;
  font-size:11px;
}
.bottom-tabs button span{font-size:22px;line-height:1.15}
.bottom-tabs button b{font-size:10.5px;margin-top:3px;letter-spacing:-.01em}
.bottom-tabs button.active{
  color:var(--sage-deep);
  background:linear-gradient(145deg,var(--sage-pale),color-mix(in srgb,var(--sand-pale) 30%,var(--sage-pale)));
}

/* Dialogs should be comfortable to read at night and one-handed. */
.modal{padding:21px}
.modal h3{font-size:25px}
.event-type-badge{font-size:12px;padding:7px 10px}
.undo-bar{padding:13px 14px;border-radius:19px}
.undo-bar strong{font-size:13px}
.undo-bar span{font-size:11.5px}
.undo-bar button{font-size:12px;padding:9px 11px}
.toast{font-size:12.5px;padding:11px 15px}

/* Diary / timeline */
.day-picker-card{padding:13px}
.day-nav{grid-template-columns:46px 1fr 46px}
.day-arrow{width:46px;height:46px;font-size:30px;border-radius:15px}
.day-nav-center>span{font-size:20px}
.day-date-input{font-size:12.5px!important}
.today-chip{font-size:11.5px;padding:7px 11px}
.compact-select{font-size:12px;padding:8px 30px 8px 10px}

.timeline-scale{font-size:10.5px;margin-bottom:7px}
.timeline-track{height:104px;border-radius:17px}
.timeline-sleep{top:11px;height:27px;border-radius:10px;background:var(--blue)}
.timeline-marker{
  width:19px;height:19px;
  font-size:10px;
  border-width:2px;
  box-shadow:0 3px 9px rgba(83,66,48,.14)
}
.timeline-marker.feed{top:51px}
.timeline-marker.pee,.timeline-marker.poo{top:75px}
.timeline-marker.health,.timeline-marker.note{top:51px}
.timeline-legend{font-size:10.5px;gap:11px 15px;margin-top:10px}
.timeline-legend i{width:10px;height:10px}
.timeline-empty{font-size:12.5px}
#timelineSummary{font-size:12px!important}

/* Trends / charts: warmer, clearer, more legible. */
.segmented{padding:5px;border-radius:16px}
.segmented button{font-size:12.5px;padding:10px}
.trend-summary-grid{gap:9px;margin:12px 0}
.trend-summary{border-radius:19px;padding:14px}
.trend-summary>span{font-size:22px}
.trend-summary strong{font-size:22px;margin:6px 0 3px}
.trend-summary small{font-size:11.5px}

.chart-card{padding-bottom:14px}
.chart-wrap{min-height:190px}
.chart-empty{height:176px;font-size:12.5px}
.chart-axis-label{font-size:9.8px;fill:var(--muted)}
.chart-line{stroke:var(--clay);stroke-width:2.8}
.chart-area{fill:color-mix(in srgb,var(--rose) 17%,transparent)}
.chart-dot{fill:var(--paper);stroke:var(--clay);stroke-width:2.2}
.chart-bar-a{fill:var(--blue)}
.chart-bar-b{fill:var(--sand)}
.chart-bar-feed{fill:var(--sage)}
.chart-bar-count{fill:var(--rose);opacity:.88}
.chart-value{font-size:9.5px}

/* Small iPhones: preserve readability rather than shrinking typography. */
@media(max-width:390px){
  .shell{padding-left:10px;padding-right:10px}
  .brand-copy{margin-left:39px}
  .hero h1{font-size:34px}
  .quick-grid{gap:6px}
  .quick{min-height:106px;padding:13px 3px 11px}
  .quick-icon{font-size:29px}
  .quick b{font-size:12.5px}
  .quick small{font-size:9.5px}
  .metric strong{font-size:18px}
  .metric small{font-size:9px}
  .bottom-tabs button span{font-size:21px}
  .bottom-tabs button b{font-size:9.8px}
  .timeline-track{height:100px}
  .chart-wrap{min-height:178px}
}

@media(min-width:650px){
  .quick{min-height:118px}
  .quick-icon{font-size:34px}
}


/* =========================================================
   v5.1.1 · Douly branding
   Logo lockup + brand colors. No data/backend changes.
   ========================================================= */
.hero-row{
  align-items:center;
}
.brand-lockup{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-logo-full{
  display:block;
  width:154px;
  max-width:45vw;
  height:auto;
  object-fit:contain;
}
.brand-subtitle{
  display:none;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:9px;
  font-weight:850;
  color:var(--muted);
}
.hero-actions{
  margin-left:auto;
}
.auth-card::before{
  content:"";
  display:block;
  width:58px;
  height:58px;
  margin:0 auto 14px;
  background:url("./branding/douly-symbol-transparent.png") center/contain no-repeat;
}
@media(min-width:520px){
  .brand-logo-full{width:170px}
}
@media(max-width:390px){
  .brand-logo-full{width:142px;max-width:48vw}
  .hero{padding-left:2px;padding-right:2px}
}


/* =========================================================
   v5.1.2 · Child / family context
   Shared baby profile + contextual baby name across Douly.
   ========================================================= */

.baby-context-badge{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:10px;
  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(145deg,var(--rose-pale),color-mix(in srgb,var(--sand-pale) 48%,var(--rose-pale)));
  border:1px solid color-mix(in srgb,var(--rose) 28%,transparent);
  color:var(--ink);
  font-size:12.5px;
  box-shadow:var(--shadow-soft);
}
.baby-context-badge.hidden{display:none}
.baby-context-heart{
  font-size:17px;
  line-height:1;
  color:var(--clay);
}
.baby-context-badge b{
  color:var(--clay);
  font-weight:850;
}

.baby-profile-card{
  position:relative;
  overflow:hidden;
}
.baby-profile-card::after{
  content:"";
  position:absolute;
  width:145px;
  height:145px;
  right:-65px;
  top:-65px;
  border-radius:50%;
  background:color-mix(in srgb,var(--rose-pale) 60%,transparent);
  pointer-events:none;
}
.baby-profile-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:5px;
}
.baby-profile-head .section-title{
  margin-bottom:3px;
}
.baby-profile-symbol{
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:15px;
  background:
    var(--paper)
    url("./branding/douly-symbol-transparent.png")
    center / 82% no-repeat;
  box-shadow:var(--shadow-soft);
  border:1px solid var(--line);
}
.baby-profile-card label,
.baby-profile-card input,
.baby-profile-card button,
.baby-profile-card .message{
  position:relative;
  z-index:1;
}

@media(max-width:390px){
  .baby-context-badge{font-size:12px;padding:7px 10px}
  .baby-profile-symbol{width:44px;height:44px;flex-basis:44px}
}


/* =========================================================
   v5.1.3 · Sync safety
   Pending data remains visible; sync errors are explicit.
   ========================================================= */
.sync-error-detail{
  margin-top:9px;
  padding:10px 12px;
  border-radius:14px;
  background:var(--rose-pale);
  border:1px solid color-mix(in srgb,var(--rose) 35%,transparent);
  color:var(--danger);
  font-size:11.5px;
  line-height:1.45;
}
.sync-error-detail.hidden{display:none}
.sync-retry-btn{
  margin-top:10px;
}


/* =========================================================
   v5.1.4 · Growth units
   Accept kg or grams and normalize to kg before Supabase.
   ========================================================= */
.field-hint{
  margin-top:6px;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.35;
}


/* =========================================================
   v5.1.5 · Edit every recent event
   ========================================================= */
.event-actions{
  flex:0 0 auto;
  align-self:center;
}
.event-actions button{
  white-space:nowrap;
}
@media(max-width:390px){
  .event{align-items:flex-start}
  .event-body{min-width:0}
  .event-actions{margin-top:2px}
}


/* =========================================================
   v5.1.6 · Trends readability
   Fixed sleep scale, labelled axes/values and 30-day scroll.
   ========================================================= */

.chart-wrap{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  padding:2px 0 7px;
  scrollbar-width:thin;
}
.chart-wrap svg.trend-svg{
  display:block;
  max-width:none;
  height:auto;
  min-width:100%;
}
.chart-x-label{
  font-size:9.2px;
}
.chart-y-label{
  font-size:8.8px;
}
.chart-axis-title{
  font-size:9px;
  fill:var(--muted);
  font-weight:750;
}
.chart-grid-line{
  stroke:color-mix(in srgb,var(--line) 78%,transparent);
}
.chart-value{
  font-size:8.7px;
  fill:var(--ink);
  font-weight:800;
  paint-order:stroke;
  stroke:var(--paper);
  stroke-width:2.5px;
  stroke-linejoin:round;
}
.chart-bar-sleep{
  fill:var(--blue);
}
.chart-feed-line{
  fill:none;
  stroke:var(--rose);
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.chart-feed-dot{
  fill:var(--paper);
  stroke:var(--rose);
  stroke-width:2.2;
}
.chart-value-feeds{
  fill:var(--clay);
}
.chart-caption{
  margin-top:4px;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.45;
}
.chart-legend-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:4px;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.35;
}
.chart-legend-row span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.chart-key{
  width:10px;
  height:10px;
  border-radius:3px;
  display:inline-block;
  flex:0 0 auto;
}
.chart-key.milk{background:var(--sage)}
.chart-key.feeds{
  border-radius:50%;
  background:var(--rose);
}
.chart-key.pee{background:var(--blue)}
.chart-key.poo{background:var(--sand)}

@media(max-width:390px){
  .chart-caption,.chart-legend-row{font-size:10px}
  .chart-x-label{font-size:8.8px}
}


/* =========================================================
   v5.1.7 · Douly custom icon system
   ========================================================= */

.ui-icon,
.metric-icon svg,
.quick-icon svg{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.ui-icon svg,
.metric-icon svg,
.quick-icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.account-icon{
  width:24px;
  height:24px;
  color:var(--ink);
}

#accountBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.nav-icon{
  width:25px;
  height:25px;
  margin:0 auto;
  color:currentColor;
}

.bottom-tabs button span.nav-icon{
  font-size:initial;
  line-height:1;
}

.metric-icon{
  width:25px;
  height:25px;
  margin:0 auto 3px;
}

.metric-icon svg{
  stroke-width:1.75;
}

.metric:nth-child(1) .metric-icon{color:var(--clay)}
.metric:nth-child(2) .metric-icon{color:#7FAAA5}
.metric:nth-child(3) .metric-icon{color:#C69B62}

.bottom-tabs button.active .nav-icon{
  transform:translateY(-1px);
}

.bottom-tabs button .nav-icon{
  transition:transform .16s ease, opacity .16s ease;
}

.bottom-tabs button:active .nav-icon{
  transform:scale(.94);
}

@media(max-width:390px){
  .nav-icon{width:24px;height:24px}
  .metric-icon{width:24px;height:24px}
  .account-icon{width:23px;height:23px}
}


/* =========================================================
   v5.1.8 · Unified Today summary
   One informational panel instead of four button-like tiles.
   ========================================================= */

.metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  overflow:hidden;
  background:linear-gradient(
    145deg,
    color-mix(in srgb,var(--paper2) 92%,var(--sage-pale)),
    var(--paper2)
  );
  border:1px solid var(--line);
  border-radius:19px;
  box-shadow:none;
}

.metric{
  position:relative;
  min-width:0;
  background:transparent;
  border:0;
  border-radius:0;
  padding:13px 5px 12px;
  text-align:center;
  box-shadow:none;
}

.metric + .metric{
  border-left:1px solid var(--line);
}

.metric-icon{
  margin:0 auto 4px;
}

.metric strong{
  margin:4px 0 2px;
}

.metric>span:not(.metric-icon){
  display:block;
}

.metric small{
  margin-top:4px;
}

.metric:nth-child(1) .metric-icon{color:var(--clay)}
.metric:nth-child(2) .metric-icon{color:#7FAAA5}
.metric:nth-child(3) .metric-icon{color:#C69B62}
.metric:nth-child(4) .metric-icon{color:var(--sage-deep)}

@media(max-width:390px){
  .metric{
    padding:12px 3px 11px;
  }
  .metric strong{
    font-size:17px;
  }
  .metric>span:not(.metric-icon){
    font-size:10px;
  }
  .metric small{
    font-size:8.5px;
  }
}


/* =========================================================
   v5.1.9 · Diary event icon fix
   ========================================================= */
.event-bullet svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* =========================================================
   v5.1.12 · Event icon color consistency
   ========================================================= */
.event-bullet{
  color:var(--clay);
}
.event-bullet svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* =========================================================
   v5.1.13 · Unified activity icon system
   ========================================================= */
:root{--douly-activity-icon:#B68A52}
:root[data-theme="dark"]{--douly-activity-icon:#D0A56B}

.douly-icon-sprite{
  position:absolute;width:0;height:0;overflow:hidden;pointer-events:none
}
.douly-shared-icon{
  display:block;width:100%;height:100%;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round
}
.metric-icon,
.event-bullet{
  color:var(--douly-activity-icon)!important
}
.metric:nth-child(1) .metric-icon,
.metric:nth-child(2) .metric-icon,
.metric:nth-child(3) .metric-icon,
.metric:nth-child(4) .metric-icon{
  color:var(--douly-activity-icon)!important
}
.metric-icon .douly-shared-icon{width:25px;height:25px}
.event-bullet .douly-shared-icon{width:22px;height:22px}


/* =========================================================
   v5.1.14 · Activity icon palette tuning
   Requested palette:
   - bottle: white
   - pee: light blue
   - poo: ochre
   - sleep: black / ink
   ========================================================= */
:root{
  --douly-icon-bottle:#F5F2EA;
  --douly-icon-pee:#54B8F1;
  --douly-icon-poo:#C89B61;
  --douly-icon-sleep:#1F1B17;
}
/* In dark mode keep the same intent while preserving visibility */
:root[data-theme="dark"]{
  --douly-icon-bottle:#F7F4ED;
  --douly-icon-pee:#66C1F6;
  --douly-icon-poo:#D2A469;
  --douly-icon-sleep:#E8E1D3;
}

/* Summary */
.metric:nth-child(1) .metric-icon{color:var(--douly-icon-bottle)!important}
.metric:nth-child(2) .metric-icon{color:var(--douly-icon-pee)!important}
.metric:nth-child(3) .metric-icon{color:var(--douly-icon-poo)!important}
.metric:nth-child(4) .metric-icon{color:var(--douly-icon-sleep)!important}

/* Events / Diary */
.event-bullet-feeding{color:var(--douly-icon-bottle)!important}
.event-bullet-pee{color:var(--douly-icon-pee)!important}
.event-bullet-poo{color:var(--douly-icon-poo)!important}
.event-bullet-sleep{color:var(--douly-icon-sleep)!important}

/* Fallback */
.event-bullet-health,
.event-bullet-note{
  color:var(--ink)!important;
}


/* =========================================================
   v5.1.15 · White bottle visibility
   Keep the bottle white, but make it readable on light cards.
   ========================================================= */
:root{
  --douly-icon-bottle-outline:rgba(182,138,82,.9);
}
:root[data-theme="dark"]{
  --douly-icon-bottle-outline:rgba(208,165,107,.9);
}

/* Summary */
.metric:nth-child(1) .douly-shared-icon{
  filter:
    drop-shadow(0 0 0.35px var(--douly-icon-bottle-outline))
    drop-shadow(0 0 0.35px var(--douly-icon-bottle-outline))
    drop-shadow(0 0 0.35px var(--douly-icon-bottle-outline));
}

/* Events / Diary */
.event-bullet-feeding .douly-shared-icon{
  filter:
    drop-shadow(0 0 0.35px var(--douly-icon-bottle-outline))
    drop-shadow(0 0 0.35px var(--douly-icon-bottle-outline))
    drop-shadow(0 0 0.35px var(--douly-icon-bottle-outline));
}


/* =========================================================
   v5.1.16 · Bottle icon to green
   Requested change:
   - bottle -> green for better visibility
   ========================================================= */
:root{
  --douly-icon-bottle:#95A774;
}
:root[data-theme="dark"]{
  --douly-icon-bottle:#AABD87;
}

/* Override the previous white-bottle visibility trick */
.metric:nth-child(1) .douly-shared-icon,
.event-bullet-feeding .douly-shared-icon{
  filter:none !important;
}


/* =========================================================
   v5.1.17 · Diario timeline rhythm markers
   References: 02 · 06 · 10 · 14 · 18 · 20
   ========================================================= */
.timeline-scale.rhythm-scale{
  position:relative;
  height:20px;
  margin-bottom:7px;
}
.timeline-scale.rhythm-scale span{
  position:absolute;
  top:0;
  transform:translateX(-50%);
  font-size:10.5px;
  line-height:1;
  white-space:nowrap;
  color:var(--muted);
}
.timeline-track{
  background-image:
    linear-gradient(to right, transparent calc(8.333% - .5px), color-mix(in srgb,var(--line) 72%,transparent) calc(8.333% - .5px), color-mix(in srgb,var(--line) 72%,transparent) calc(8.333% + .5px), transparent calc(8.333% + .5px)),
    linear-gradient(to right, transparent calc(25% - .5px), color-mix(in srgb,var(--line) 72%,transparent) calc(25% - .5px), color-mix(in srgb,var(--line) 72%,transparent) calc(25% + .5px), transparent calc(25% + .5px)),
    linear-gradient(to right, transparent calc(41.667% - .5px), color-mix(in srgb,var(--line) 72%,transparent) calc(41.667% - .5px), color-mix(in srgb,var(--line) 72%,transparent) calc(41.667% + .5px), transparent calc(41.667% + .5px)),
    linear-gradient(to right, transparent calc(58.333% - .5px), color-mix(in srgb,var(--line) 72%,transparent) calc(58.333% - .5px), color-mix(in srgb,var(--line) 72%,transparent) calc(58.333% + .5px), transparent calc(58.333% + .5px)),
    linear-gradient(to right, transparent calc(75% - .5px), color-mix(in srgb,var(--line) 72%,transparent) calc(75% - .5px), color-mix(in srgb,var(--line) 72%,transparent) calc(75% + .5px), transparent calc(75% + .5px)),
    linear-gradient(to right, transparent calc(83.333% - .5px), color-mix(in srgb,var(--line) 72%,transparent) calc(83.333% - .5px), color-mix(in srgb,var(--line) 72%,transparent) calc(83.333% + .5px), transparent calc(83.333% + .5px));
}
@media(max-width:390px){
  .timeline-scale.rhythm-scale span{font-size:9.8px}
}


/* =========================================================
   v5.1.18 · Crescita+
   ========================================================= */
.growth-hero-card{
  background:
    radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--sage-pale) 85%,transparent),transparent 35%),
    var(--paper);
}
.growth-age-badge{
  font-size:11px;
  font-weight:800;
  padding:7px 10px;
  border-radius:999px;
  background:var(--sage-pale);
  color:var(--sage-deep);
}
.growth-latest-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  margin-top:10px;
}
.growth-latest{
  padding:14px 8px 12px;
  text-align:center;
  min-width:0;
}
.growth-latest+.growth-latest{border-left:1px solid var(--line)}
.growth-latest span{display:block;font-size:10.5px;color:var(--muted);font-weight:750}
.growth-latest strong{display:block;font-size:19px;margin:5px 0 3px;white-space:nowrap}
.growth-latest small{font-size:9.5px;color:var(--muted);line-height:1.25}
.growth-since-birth{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:11px;
}
.growth-since-birth span{
  padding:8px 10px;
  border-radius:13px;
  background:var(--paper2);
  font-size:10.5px;
  color:var(--muted);
}
.growth-since-birth b{color:var(--ink)}

.percentile-card{
  overflow:hidden;
}
.percentile-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:9px;
}
.percentile-item{
  padding:13px 10px;
  border-radius:17px;
  background:var(--paper2);
  border:1px solid var(--line);
  min-width:0;
}
.percentile-item>span{font-size:9.8px;color:var(--muted);font-weight:750}
.percentile-item>strong{display:block;font-size:23px;margin:5px 0 8px}
.percentile-item>small{display:block;font-size:9px;color:var(--muted);margin-top:6px;line-height:1.3}
.percentile-track{
  position:relative;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue-pale),var(--sage-pale),var(--sand-pale),var(--rose-pale));
}
.percentile-track i{
  position:absolute;
  top:50%;
  width:11px;height:11px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--ink);
  border:2px solid var(--paper);
  box-shadow:0 1px 5px rgba(0,0,0,.15);
}
.percentile-track i.hidden{display:none}
.percentile-profile-note{
  padding:11px 12px;
  border-radius:15px;
  background:var(--sand-pale);
  font-size:11px;
  line-height:1.5;
}
.percentile-profile-note.hidden{display:none}

.growth-metric-switch{margin-bottom:10px}
.growth-history-row .event-bullet{
  color:var(--sage-deep)!important;
}
.baby-profile-subtitle{
  margin-top:16px;
  font-size:12.5px;
  font-weight:850;
  color:var(--ink);
}
.baby-who-note{
  margin:9px 0 2px;
}

@media(max-width:390px){
  .growth-latest strong{font-size:17px}
  .growth-latest small{font-size:8.8px}
  .percentile-grid{gap:5px}
  .percentile-item{padding:11px 7px}
  .percentile-item>strong{font-size:20px}
}


/* =========================================================
   v5.1.19 · Restore Diario timeline from v5.1.17
   Single authoritative timeline grid.
   ========================================================= */

.timeline-scale.rhythm-scale{
  display:block !important;
  position:relative;
  height:20px;
  margin:0 1px 7px;
  color:var(--muted);
}

.timeline-scale.rhythm-scale span{
  position:absolute;
  top:0;
  transform:translateX(-50%);
  font-size:10.5px;
  line-height:1;
  white-space:nowrap;
  color:var(--muted);
}

/* Reset the legacy 06/12/18 background grid completely. */
.timeline-track{
  background-color:var(--paper2) !important;
  background-image:
    linear-gradient(to right,
      transparent calc(8.333% - .5px),
      var(--line) calc(8.333% - .5px),
      var(--line) calc(8.333% + .5px),
      transparent calc(8.333% + .5px)),
    linear-gradient(to right,
      transparent calc(25% - .5px),
      var(--line) calc(25% - .5px),
      var(--line) calc(25% + .5px),
      transparent calc(25% + .5px)),
    linear-gradient(to right,
      transparent calc(41.667% - .5px),
      var(--line) calc(41.667% - .5px),
      var(--line) calc(41.667% + .5px),
      transparent calc(41.667% + .5px)),
    linear-gradient(to right,
      transparent calc(58.333% - .5px),
      var(--line) calc(58.333% - .5px),
      var(--line) calc(58.333% + .5px),
      transparent calc(58.333% + .5px)),
    linear-gradient(to right,
      transparent calc(75% - .5px),
      var(--line) calc(75% - .5px),
      var(--line) calc(75% + .5px),
      transparent calc(75% + .5px)),
    linear-gradient(to right,
      transparent calc(83.333% - .5px),
      var(--line) calc(83.333% - .5px),
      var(--line) calc(83.333% + .5px),
      transparent calc(83.333% + .5px)) !important;
  background-repeat:no-repeat !important;
}

@media(max-width:390px){
  .timeline-scale.rhythm-scale span{font-size:9.8px}
}


/* =========================================================
   v5.1.20 · Diario timeline a griglia
   ========================================================= */
:root{
  --timeline-axis-width:84px;
  --timeline-c-breast:#94A96E;
  --timeline-c-bottle:#7F9A5F;
  --timeline-c-pee:#79BFE7;
  --timeline-c-poo:#C99858;
  --timeline-c-sleep:#D88C83;
}
:root[data-theme="dark"]{
  --timeline-c-breast:#AFC088;
  --timeline-c-bottle:#9FB779;
  --timeline-c-pee:#8ACAF0;
  --timeline-c-poo:#D5A76C;
  --timeline-c-sleep:#E3A096;
}
.timeline-card{--timeline-axis-width:84px}
.timeline-scale.rhythm-scale{
  display:block !important;
  position:relative;
  width:calc(100% - var(--timeline-axis-width) - 4px);
  margin:0 2px 8px var(--timeline-axis-width);
}
.timeline-track{
  position:relative;
  height:204px !important;
  border-radius:18px;
  background:var(--paper2) !important;
  border:1px solid var(--line);
  overflow:hidden;
}
.timeline-grid-shell{
  display:grid;
  grid-template-columns:var(--timeline-axis-width) 1fr;
  height:100%;
}
.timeline-y-axis{
  display:grid;
  grid-template-rows:repeat(5,1fr);
  background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 95%,transparent),color-mix(in srgb,var(--paper2) 92%,transparent));
}
.timeline-lane-label{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 8px 0 9px;
  border-right:1px solid var(--line);
}
.timeline-lane-label:not(:last-child){border-bottom:1px solid var(--line)}
.timeline-y-badge{
  width:28px;height:28px;border-radius:10px;display:grid;place-items:center;
  background:var(--paper);
  border:1px solid color-mix(in srgb,currentColor 18%,var(--line));
  box-shadow:var(--shadow-soft);
  flex:0 0 28px;
}
.timeline-y-text{font-size:10px;font-weight:850;color:var(--muted);line-height:1.15}
.timeline-lane-label-breast,.timeline-marker.breast{color:var(--timeline-c-breast)}
.timeline-lane-label-bottle,.timeline-marker.bottle{color:var(--timeline-c-bottle)}
.timeline-lane-label-pee,.timeline-marker.pee{color:var(--timeline-c-pee)}
.timeline-lane-label-poo,.timeline-marker.poo{color:var(--timeline-c-poo)}
.timeline-lane-label-sleep{color:var(--timeline-c-sleep)}

.timeline-grid-canvas{
  position:relative;
  background:
    linear-gradient(to right,transparent calc(8.333% - .5px),var(--line) calc(8.333% - .5px),var(--line) calc(8.333% + .5px),transparent calc(8.333% + .5px)),
    linear-gradient(to right,transparent calc(25% - .5px),var(--line) calc(25% - .5px),var(--line) calc(25% + .5px),transparent calc(25% + .5px)),
    linear-gradient(to right,transparent calc(41.667% - .5px),var(--line) calc(41.667% - .5px),var(--line) calc(41.667% + .5px),transparent calc(41.667% + .5px)),
    linear-gradient(to right,transparent calc(58.333% - .5px),var(--line) calc(58.333% - .5px),var(--line) calc(58.333% + .5px),transparent calc(58.333% + .5px)),
    linear-gradient(to right,transparent calc(75% - .5px),var(--line) calc(75% - .5px),var(--line) calc(75% + .5px),transparent calc(75% + .5px)),
    linear-gradient(to right,transparent calc(83.333% - .5px),var(--line) calc(83.333% - .5px),var(--line) calc(83.333% + .5px),transparent calc(83.333% + .5px)),
    var(--paper2);
}
.timeline-row-guide{position:absolute;left:0;right:0;border-bottom:1px solid var(--line)}
.timeline-row-guide-breast{background:color-mix(in srgb,var(--timeline-c-breast) 5%,transparent)}
.timeline-row-guide-bottle{background:color-mix(in srgb,var(--timeline-c-bottle) 4%,transparent)}
.timeline-row-guide-pee{background:color-mix(in srgb,var(--timeline-c-pee) 5%,transparent)}
.timeline-row-guide-poo{background:color-mix(in srgb,var(--timeline-c-poo) 5%,transparent)}
.timeline-row-guide-sleep{background:color-mix(in srgb,var(--timeline-c-sleep) 5%,transparent)}

.timeline-mini-icon{
  width:14px;height:14px;display:block;
  stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}

.timeline-sleep{
  position:absolute;
  height:18px;
  transform:translateY(-50%);
  border-radius:999px;
  background:color-mix(in srgb,var(--timeline-c-sleep) 78%,var(--paper));
  box-shadow:0 3px 10px rgba(106,79,72,.12);
  min-width:2px;
  opacity:.96;
}
.timeline-sleep.active{
  background:linear-gradient(90deg,color-mix(in srgb,var(--timeline-c-sleep) 80%,var(--paper)),color-mix(in srgb,var(--timeline-c-sleep) 92%,var(--paper)));
}

.timeline-marker{
  position:absolute;
  transform:translate(-50%,-50%);
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);
  border:1.5px solid currentColor;
  box-shadow:0 4px 11px rgba(70,72,62,.14);
}
.timeline-marker .timeline-mini-icon{width:12px;height:12px}
.timeline-now{
  position:absolute;
  top:0;bottom:0;width:1px;background:var(--clay);opacity:.7;
}
.timeline-now:before{
  content:'';position:absolute;top:3px;left:-3px;width:7px;height:7px;border-radius:50%;background:var(--clay);
}
.timeline-empty{
  position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:11px;
  background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--paper) 35%,transparent) 100%);
  text-align:center;padding:14px;
}
.timeline-legend{
  display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:10px;color:var(--muted);font-size:9px;
}
.timeline-legend span{display:flex;align-items:center;gap:6px}
.timeline-legend i{width:8px;height:8px;border-radius:999px;display:inline-block;background:currentColor}
.timeline-legend .legend-breast{color:var(--timeline-c-breast)}
.timeline-legend .legend-bottle{color:var(--timeline-c-bottle)}
.timeline-legend .legend-pee{color:var(--timeline-c-pee)}
.timeline-legend .legend-poo{color:var(--timeline-c-poo)}
.timeline-legend .legend-sleep{color:var(--timeline-c-sleep)}

@media(max-width:390px){
  .timeline-card{--timeline-axis-width:74px}
  .timeline-track{height:196px !important}
  .timeline-y-badge{width:24px;height:24px;flex-basis:24px}
  .timeline-y-text{font-size:9px}
  .timeline-marker{width:20px;height:20px}
  .timeline-marker .timeline-mini-icon{width:11px;height:11px}
  .timeline-scale.rhythm-scale span{font-size:9.4px}
}


/* v5.1.21 · andamento alimentazione più leggibile */
.chart-key.bottle-formula{background:var(--sand);border-radius:50%;}
.chart-key.bottle-breastmilk{background:var(--blue);border-radius:50%;}
.chart-key.breast-left{background:transparent;border-radius:999px;width:14px;height:4px;border:0;box-shadow:inset 0 0 0 999px var(--rose)}
.chart-key.breast-right{background:transparent;border-radius:999px;width:14px;height:4px;border:0;box-shadow:inset 0 0 0 999px var(--clay)}
.chart-bar-feed{fill:color-mix(in srgb,var(--sage) 88%,white 12%)}
.chart-bottle-dot{stroke:var(--paper);stroke-width:1.2}
.chart-bottle-dot-formula{fill:var(--sand)}
.chart-bottle-dot-breastmilk{fill:var(--blue)}
.chart-bottle-dot-mixed-base{fill:var(--blue);stroke:var(--paper);stroke-width:1.1}
.chart-bottle-dot-mixed-top{fill:var(--sand);stroke:none}
.chart-breast-line{fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.chart-breast-left-line{stroke:var(--rose)}
.chart-breast-right-line{stroke:var(--clay)}
.chart-breast-dot{fill:var(--paper);stroke-width:2.2}
.chart-breast-left-dot{stroke:var(--rose)}
.chart-breast-right-dot{stroke:var(--clay)}
.chart-value-breast-left{fill:var(--rose)}
.chart-value-breast-right{fill:var(--clay)}


/* =========================================================
   v5.1.22 · Alimentazione chart polish
   ========================================================= */

/* The two breastfeeding series must remain readable even when values overlap. */
.chart-breast-left-line{
  stroke:var(--rose);
  stroke-width:2.8;
}
.chart-breast-right-line{
  stroke:var(--clay);
  stroke-width:2.8;
}
.chart-breast-left-dot{
  stroke:var(--rose);
  fill:var(--paper);
}
.chart-breast-right-dot{
  stroke:var(--clay);
  fill:var(--paper);
}
.chart-value-breast-left,
.chart-value-breast-right{
  font-size:9px;
  font-weight:900;
}

/* Slightly larger bottle dots, with a crisp light rim. */
.chart-bottle-dot{
  stroke:var(--paper);
  stroke-width:1.5;
}
.chart-bottle-dot-formula{
  fill:var(--sand);
}
.chart-bottle-dot-breastmilk{
  fill:var(--blue);
}

/* Daily compact summary: useful on iPhone where SVG tooltips are awkward. */
.feeding-daily-summary{
  display:flex;
  gap:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:5px 0 2px;
  margin-top:3px;
  scrollbar-width:thin;
}
.feeding-summary-day{
  min-width:126px;
  flex:0 0 126px;
  border:1px solid var(--line);
  background:var(--paper2);
  border-radius:14px;
  padding:9px 10px;
  display:grid;
  gap:4px;
}
.feeding-summary-day>strong{
  font-size:11px;
  text-transform:capitalize;
}
.feeding-summary-ml{
  font-size:10.5px;
  font-weight:850;
  color:var(--ink);
}
.feeding-summary-bottles{
  font-size:9px;
  color:var(--muted);
  line-height:1.35;
}
.feed-summary-dot{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  vertical-align:middle;
  margin-right:2px;
}
.feed-summary-dot.formula{background:var(--sand)}
.feed-summary-dot.maternal{background:var(--blue)}
.feed-summary-dot.mixed{
  background:linear-gradient(90deg,var(--sand) 0 50%,var(--blue) 50% 100%);
}
.feeding-summary-breast{
  display:flex;
  gap:6px;
  margin-top:2px;
}
.feeding-summary-breast b{
  font-size:9.5px;
  padding:4px 6px;
  border-radius:999px;
  background:var(--paper);
  border:1px solid var(--line);
}
.feeding-summary-breast b:first-child{color:var(--rose)}
.feeding-summary-breast b:last-child{color:var(--clay)}

@media(max-width:390px){
  .feeding-summary-day{
    min-width:118px;
    flex-basis:118px;
  }
}


/* =========================================================
   v5.1.25 · Sonno Andamento+
   ========================================================= */
:root{
  --sleep-day:#F1D7D0;
  --sleep-night:#D88C83;
  --sleep-session:#B96F64;
  --sleep-longest:#7E665F;
}
:root[data-theme="dark"]{
  --sleep-day:#704B46;
  --sleep-night:#D28E84;
  --sleep-session:#E3A096;
  --sleep-longest:#E7CEC6;
}

.chart-key.sleep-day{background:var(--sleep-day)}
.chart-key.sleep-night{background:var(--sleep-night)}
.chart-key.sleep-sessions{
  width:14px;height:4px;border-radius:999px;background:var(--sleep-session)
}
.chart-key.sleep-longest{
  width:9px;height:9px;border-radius:50%;background:var(--paper);border:2px solid var(--sleep-longest)
}

.chart-bar-sleep-day{fill:var(--sleep-day)}
.chart-bar-sleep-night{fill:var(--sleep-night)}
.chart-sleep-session-line{
  fill:none;
  stroke:var(--sleep-session);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.chart-sleep-session-dot{
  fill:var(--paper);
  stroke:var(--sleep-session);
  stroke-width:2.1;
}
.chart-sleep-longest{
  fill:var(--paper);
  stroke:var(--sleep-longest);
  stroke-width:2;
}
.chart-value-sleep-total{fill:var(--ink)}
.chart-sleep-hit{cursor:pointer}

.sleep-day-detail{
  margin-top:7px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--paper2);
}
.sleep-detail-date{
  font-size:11px;
  font-weight:900;
  text-transform:capitalize;
  margin-bottom:8px;
}
.sleep-detail-metrics{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
}
.sleep-detail-metrics span{
  min-width:0;
  text-align:center;
  padding:7px 3px;
  background:var(--paper);
  border-radius:11px;
}
.sleep-detail-metrics b{
  display:block;
  font-size:11px;
  white-space:nowrap;
}
.sleep-detail-metrics small{
  display:block;
  margin-top:3px;
  font-size:8px;
  color:var(--muted);
}

.sleep-rhythm-title{
  margin:14px 1px 8px;
  font-size:11px;
  font-weight:900;
  color:var(--ink);
}
.sleep-rhythm-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
.sleep-rhythm-item{
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:14px;
  padding:10px;
}
.sleep-rhythm-item>span{
  display:block;
  font-size:9px;
  color:var(--muted);
  font-weight:800;
}
.sleep-rhythm-item>strong{
  display:block;
  margin:4px 0 2px;
  font-size:16px;
  color:var(--ink);
}
.sleep-rhythm-item>small{
  display:block;
  font-size:8.5px;
  line-height:1.3;
  color:var(--muted);
}

@media(max-width:390px){
  .sleep-detail-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .sleep-detail-metrics span:nth-child(4),
  .sleep-detail-metrics span:nth-child(5){
    grid-column:auto;
  }
}


/* =========================================================
   v5.1.28 · Report CSV leggibile
   ========================================================= */
.csv-report-modal h3{margin-bottom:5px}
.csv-report-dates{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.csv-report-options{
  display:grid;
  gap:8px;
  margin:13px 0;
}
.check-row{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:0;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper2);
  color:var(--ink);
  font-size:11px;
  font-weight:750;
  line-height:1.35;
}
.check-row input{
  width:18px;
  height:18px;
  flex:0 0 18px;
  margin:0;
  padding:0;
}
.report-package-preview{
  display:grid;
  gap:4px;
  margin-top:11px;
  padding:12px;
  border-radius:15px;
  border:1px solid var(--line);
  background:var(--sage-pale);
}
.report-package-preview strong{
  font-size:11px;
  color:var(--sage-deep);
  margin-bottom:2px;
}
.report-package-preview span{
  font-size:10px;
  color:var(--muted);
}


/* =========================================================
   v5.1.29 · Report pediatrico PDF
   ========================================================= */
.export-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.export-grid .secondary{margin-top:0}
.export-grid .pdf-report-btn{
  grid-column:1/-1;
  background:var(--sage-pale);
  color:var(--sage-deep);
  border-color:color-mix(in srgb,var(--sage) 55%,var(--line));
}
.pdf-report-modal h3{margin-bottom:5px}
.pdf-report-preview{background:color-mix(in srgb,var(--sage-pale) 72%,var(--paper))}
.report-medical-note{
  margin-top:10px;
  padding:10px 11px;
  border-radius:13px;
  background:var(--rose-pale);
  border:1px solid color-mix(in srgb,var(--rose) 32%,var(--line));
  color:var(--muted);
  font-size:10px;
  line-height:1.4;
}

/* v5.1.30 P0 Account, Privacy e Famiglia */
.account-privacy-card,.family-management-card,.account-danger-card{position:relative}.settings-action-list{display:grid;gap:7px;margin-top:10px}.settings-link-btn{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;text-align:left;border:1px solid var(--line);background:var(--paper2);border-radius:14px;padding:11px 12px;color:var(--ink)}.settings-link-btn span{font-weight:900;font-size:11px}.settings-link-btn small{font-size:9px;color:var(--muted);font-weight:650}.family-security-notice{padding:10px 11px;border-radius:13px;background:var(--rose-pale);border:1px solid color-mix(in srgb,var(--rose) 35%,var(--line));color:var(--muted);font-size:10px;line-height:1.4;margin-bottom:9px}.family-members-list{display:grid;gap:7px;margin:9px 0}.family-member-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px 11px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}.family-member-main{min-width:0}.family-member-name{font-size:11px;font-weight:900;color:var(--ink);display:flex;gap:6px;align-items:center;flex-wrap:wrap}.family-member-sub{font-size:9px;color:var(--muted);margin-top:3px}.role-badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 7px;background:var(--sage-pale);color:var(--sage-deep);font-size:8px;font-weight:900}.role-badge.owner{background:var(--rose-pale);color:var(--rose)}.role-badge.read_only{background:var(--paper2);color:var(--muted)}.family-member-actions{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.family-member-actions select{width:auto;min-width:116px;margin:0;padding:7px 24px 7px 8px;font-size:9px}.member-mini-btn{border:1px solid var(--line);background:var(--paper2);border-radius:9px;padding:7px 8px;font-size:8.5px;font-weight:850;color:var(--ink)}.member-mini-btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,var(--line))}.family-admin-controls{display:grid;gap:8px;margin-top:10px}.secure-invite-box{display:grid;gap:4px}.secure-invite-box small{color:var(--muted);font-size:8.5px}.family-leave-btn{margin-top:12px}.danger-outline{border:1px solid color-mix(in srgb,var(--danger) 55%,var(--line));background:transparent;color:var(--danger);font-weight:900}.account-danger-card .danger+.muted,.account-danger-card .danger-outline+.danger{margin-top:8px}.legal-placeholder-box{border:1px solid var(--line);background:var(--paper2);border-radius:15px;padding:13px;margin:10px 0 14px}.legal-placeholder-box strong{display:block;margin-bottom:7px;color:var(--sage-deep)}.legal-placeholder-box p{font-size:10px;line-height:1.45;color:var(--muted)}.destructive-warning{padding:11px;border-radius:14px;background:var(--rose-pale);border:1px solid color-mix(in srgb,var(--rose) 35%,var(--line));color:var(--muted);font-size:10px;line-height:1.45;margin:9px 0 12px}.destructive-warning.strong{color:var(--danger);font-weight:800}.confirm-name{margin:6px 0;padding:9px 10px;border-radius:10px;background:var(--paper2);border:1px solid var(--line);font-size:11px;font-weight:900;color:var(--ink)}button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}@media(max-width:430px){.family-member-row{grid-template-columns:1fr}.family-member-actions{justify-content:flex-start}}