:root{
    --cream:#FFF9F0;
    --paper:#FFFFFF;
    --ink:#3A342C;
    --ink-soft:#746B5D;

    --sage:#6FA25C;      --sage-l:#DFF0D4;
    /* мягкая тень: свет слева сверху, тень справа снизу */
    --sh-card:-7px -7px 14px rgba(255,255,255,.92), 6px 7px 16px rgba(58,52,44,.13);
    --sage-text:#4F7341; --sky-text:#307099; --coral-text:#9D4E61; --rust-text:#9E552B; --butter-text:#8B671C; --wheat-text:#856629; --plum-text:#994F70; --hazel-text:#845D34; --warn-text:#B83B3B;
    --rust:#E2793D;      --rust-l:#FBE4CF;
    --butter:#E8AC2E;    --butter-l:#FDF0D0;
    --sky:#3E8FC4;       --sky-l:#DCEEF7;
    --wheat:#C99A3E;     --wheat-l:#F7ECD3;
    --coral:#E0708A;     --coral-l:#FBE1E8;
    --plum:#A6567A;      --plum-l:#F5E1EA;
    --hazel:#966A3B;     --hazel-l:#EFE2CC;
    --warn:#D64545;      --warn-l:#FBE1E1;

    --line:#F1E4CE;      --line2:#EAD9B8;
    --hero1:var(--hero1);     --track:#F0E4CC;
    --cbox:#DDD0B4;      --grip:#E3D8BE;
    --btn-bg:#F1E7D2;    --react-b:#EADFC6;
    --text-dim:#756E5C;  --text-mid:#5C554A;  --text-tip:#4C463C;
    --glow:.16;

    --glass:rgba(255,249,240,0.55);
    --glass-brd:rgba(255,255,255,0.55);
    --glass-hi:rgba(255,255,255,0.55);
    --glass-sh:0 8px 30px rgba(58,52,44,0.14);
  }

  html[data-theme="dark"]{
    --cream:#17140F;     --paper:#221E18;
    --ink:#F0E8DA;       --ink-soft:#A79C88;

    --sage-l:#22301F;    --rust-l:#33241A;   --butter-l:#33301C;
    /* в темноте «свет» — не белый, иначе грязь вместо объёма */
    --sh-card:-7px -7px 14px rgba(255,255,255,.055), 6px 7px 18px rgba(0,0,0,.44);
    --sage-text:#6FA25C; --sky-text:#4895C7; --coral-text:#E0708A; --rust-text:#E2793D; --butter-text:#E8AC2E; --wheat-text:#C99A3E; --plum-text:#B57391; --hazel-text:#A9855E; --warn-text:#DD6363;
    --sky-l:#182833;     --wheat-l:#302A1B;  --coral-l:#331F28;
    --plum-l:#2A1C27;    --hazel-l:#2A231A;  --warn-l:#331C1C;

    --line:#37312A;      --line2:#3B3329;
    --hero1:#221E18;     --track:#332C22;
    --cbox:#4A4234;      --grip:#4A4234;
    --btn-bg:#2E2820;    --react-b:#3B3329;
    --text-dim:#8C8271;  --text-mid:#C9C0AE;  --text-tip:#DAD1BF;
    --glow:.26;

    --glass:rgba(28,25,20,0.44);
    --glass-brd:rgba(255,255,255,0.10);
    --glass-hi:rgba(255,255,255,0.10);
    --glass-sh:0 10px 34px rgba(0,0,0,0.45);
  }

  *{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
  html,body{margin:0; padding:0; min-height:100%; min-height:-webkit-fill-available;}
  html{ background:var(--cream); height:-webkit-fill-available; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
  body{
    background:var(--cream);
    font-family:'Nunito', sans-serif;
    color:var(--ink);
    min-height:100vh; min-height:100dvh; min-height:-webkit-fill-available;
    padding-bottom:calc(40px + env(safe-area-inset-bottom));
    overflow-x:hidden;
    transition: background .3s ease, color .3s ease;
  }
  :focus-visible{ outline:3px solid var(--sky); outline-offset:2px; border-radius:8px; }
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:calc(26px + env(safe-area-inset-top)) 20px 22px;
    background:
      radial-gradient(circle at 12% 20%, rgba(111,162,92,0.16), transparent 40%),
      radial-gradient(circle at 85% 15%, rgba(224,112,138,0.16), transparent 42%),
      radial-gradient(circle at 90% 80%, rgba(62,143,196,0.14), transparent 40%),
      radial-gradient(circle at 10% 85%, rgba(232,172,46,0.16), transparent 40%),
      linear-gradient(180deg, var(--hero1) 0%, var(--cream) 100%);
    border-bottom:1px solid var(--line);
    z-index:5;
    text-align:center;
    overflow:hidden;
  }
  .hero-plant{
    font-size: 34px;
    transition: font-size .5s cubic-bezier(.34,1.56,.64,1);
    display:inline-block;
    margin-bottom:4px;
  }
  .hero h1{
    font-family:'Fredoka', sans-serif;
    font-weight:700;
    font-size:22px;
    margin:2px 0 4px;
    letter-spacing:.2px;
    background:linear-gradient(90deg, var(--sage-text), var(--sky-text), var(--coral-text));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-wrap:balance;
  }
  .hero-sub{
    font-size:13px;
    color:var(--ink-soft);
    margin:0 0 14px;
    font-weight:700;
  }
  .stem-wrap{
    max-width:360px;
    margin:0 auto;
    height:9px;
    border-radius:99px;
    background:var(--track);
    overflow:hidden;
    position:relative;
  }
  .stem-fill{
    height:100%;
    border-radius:99px;
    background:linear-gradient(90deg, var(--sage-text), var(--sky-text) 35%, var(--coral-text) 70%, var(--wheat-text));
    width:0%;
    transition: width .6s cubic-bezier(.34,1.4,.6,1);
  }
  .hero-count{
    font-family:'Fredoka', sans-serif;
    font-size:12px;
    color:var(--ink-soft);
    margin-top:9px;
  }
  .hero-count b{ color:var(--ink); }

  .search-wrap{
    max-width:360px;
    margin:15px auto 0;
    position:relative;
  }
  .search-wrap .mag{
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    font-size:14px; opacity:.5; pointer-events:none;
  }
  .search-wrap input{
    width:100%;
    border:1px solid var(--line2);
    background:var(--paper);
    border-radius:99px;
    padding:11px 38px 11px 38px;
    font-family:'Nunito',sans-serif;
    font-weight:700;
    font-size:16px;
    color:var(--ink);
    box-shadow:0 2px 8px rgba(58,52,44,0.05);
  }
  .search-wrap input::placeholder{ color:var(--text-dim); font-weight:700; }
  .search-clear{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    width:26px; height:26px; border:none; background:var(--btn-bg); color:var(--ink-soft);
    border-radius:50%; font-size:15px; cursor:pointer; display:none;
    align-items:center; justify-content:center; font-weight:800;
  }
  .search-clear.show{ display:flex; }

  .chips{ display:flex; gap:8px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
  .chip{
    border:1px solid var(--line2); background:var(--paper); color:var(--ink-soft);
    border-radius:99px; padding:6px 15px; font-family:'Nunito',sans-serif;
    font-weight:800; font-size:12.5px; cursor:pointer; transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s;
  }
  .chip.active{ background:var(--sage); border-color:var(--sage-text); color:#fff; box-shadow:0 2px 8px rgba(111,162,92,.3); }

  .kids{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:12px; }
  .kid{
    border:1px solid var(--line2); background:var(--paper); color:var(--ink);
    font-family:'Nunito',sans-serif; font-weight:800; font-size:12.5px;
    padding:6px 14px; border-radius:99px; cursor:pointer; transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s;
  }
  .kid.active{ background:#286E9D; border-color:#286E9D; color:#fff; box-shadow:0 2px 8px rgba(40,110,157,.34); }
  /* Выбор ребёнка всегда остаётся читаемым: без прозрачной анимированной подложки. */
  .kids.m-pilled .m-pill{display:none;}
  .kids.m-pilled>.kid.active{background:#286E9D !important;border-color:#286E9D !important;box-shadow:0 2px 8px rgba(40,110,157,.34) !important;color:#fff !important;}
  .kid-add{ color:var(--ink-soft); border-style:dashed; }
  .kid-edit{ padding:6px 11px; }

  /* ---------- LAYOUT ---------- */
  .layout{
    max-width:940px;
    margin:0 auto;
    padding:18px 14px 10px;
    display:flex;
    gap:24px;
    align-items:flex-start;
  }
  main{ flex:1 1 auto; min-width:0; max-width:560px; }
  .no-results{
    text-align:center; color:var(--ink-soft); font-weight:700;
    padding:30px 10px; display:none;
  }
  .no-results.show{ display:block; }

  /* ---------- GUIDE PANEL (desktop) ---------- */
  .guide{
    width:320px; flex:0 0 320px;
    position:sticky; top:16px;
  }
  .guide-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:22px;
    padding:20px 20px 18px;
    box-shadow:0 4px 18px rgba(58,52,44,0.07);
  }
  .guide-card h2{
    font-family:'Fredoka',sans-serif; font-weight:600; font-size:17px;
    margin:0 0 10px;
  }
  .guide-card p{ font-size:13.5px; line-height:1.55; margin:0 0 10px; color:var(--text-mid); font-weight:600; }
  .guide-rules{ list-style:none; padding:0; margin:6px 0 4px; }
  .guide-rules li{
    font-size:13px; line-height:1.45; padding:6px 0 6px 26px; position:relative;
    font-weight:700; color:var(--ink);
  }
  .guide-rules li::before{
    content:attr(data-ic); position:absolute; left:0; top:5px; font-size:15px;
  }
  .guide-motivate{
    margin-top:14px; padding:12px 14px; border-radius:14px;
    background:linear-gradient(135deg, var(--sage-l), var(--sky-l));
    font-size:13px; font-weight:800; line-height:1.4; color:var(--ink);
  }
  .guide-disclaimer{
    margin-top:12px; font-size:11.5px; line-height:1.4; color:var(--ink-soft);
    font-weight:700; display:flex; gap:6px; align-items:flex-start;
  }
  .guide-hint{
    margin-top:12px; font-size:12px; color:var(--text-dim); font-weight:800; text-align:center;
  }

  /* product card (shared by guide + sheet) */
  .pcard{ animation: pcIn .28s cubic-bezier(.34,1.4,.6,1); }
  @keyframes pcIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
  .pcard-hero{
    height:96px; border-radius:16px; margin-bottom:12px;
    display:flex; align-items:center; justify-content:center; gap:6px;
    background:linear-gradient(135deg, var(--accent-l,#eee), color-mix(in srgb, var(--accent,#ddd) 22%, #fff));
    position:relative; overflow:hidden;
  }
  .pcard-animal{ font-size:46px; animation: bob 2.2s ease-in-out infinite; }
  .pcard-food{ font-size:38px; animation: bob 2.2s ease-in-out infinite .3s; }
  @keyframes bob{ 0%,100%{transform:translateY(0) rotate(-3deg);} 50%{transform:translateY(-7px) rotate(3deg);} }
  .pcard-badge{
    display:inline-block; font-size:11px; font-weight:800; color:#fff;
    background:var(--accent,#999); padding:3px 10px; border-radius:99px; margin-bottom:8px;
  }
  .pcard-name{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:19px; margin:0 0 8px; }
  .pcard-tip{ font-size:14px; line-height:1.55; color:var(--text-tip); font-weight:600; margin:0; }
  .pcard-date{ margin-top:11px; font-size:12.5px; font-weight:800; color:var(--accent,#777); display:flex; gap:6px; align-items:center; }
  .pcard-react{ margin-top:15px; }
  .pcard-react-title{ font-size:12px; font-weight:800; color:var(--ink-soft); margin-bottom:8px; }
  .react-btns{ display:flex; gap:8px; }
  .react-btn{ flex:1; border:1.5px solid var(--react-b); background:var(--paper); border-radius:13px; padding:9px 4px; font-size:22px; cursor:pointer; line-height:1; transition:transform .15s, border-color .2s, background .2s; }
  .react-btn:hover{ transform:translateY(-2px); }
  .react-btn.active{ border-color:var(--accent,#999); background:var(--accent-l,#eee); transform:translateY(-2px); }
  .react-btn small{ display:block; font-size:9.5px; font-weight:800; color:var(--ink-soft); margin-top:4px; }
  .row-react{ font-size:15px; flex-shrink:0; width:19px; text-align:center; }

  /* ---------- STAGES ---------- */
  .stage{
    background:var(--paper);
    border-radius:20px;
    margin-bottom:16px;
    overflow:hidden;
    box-shadow: var(--sh-card);
    border:1px solid var(--line);
    border-left:5px solid var(--accent, #ccc);
  }
  .stage.hide{ display:none; }
  .stage-head{
    display:flex; align-items:center; gap:12px;
    padding:16px 16px 14px; cursor:pointer; user-select:none;
  }
  .stage-emoji{
    font-size:24px; width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    border-radius:15px; flex-shrink:0;
    background: linear-gradient(135deg, var(--accent-l, #eee), var(--accent, #ddd) 130%);
  }
  .stage-title-wrap{ flex:1; min-width:0; }
  .stage-title{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:16px; margin:0; }
  .stage-progress-text{ font-size:12px; color:var(--ink-soft); margin-top:2px; font-weight:700; }
  .stage-chevron{ font-size:13px; color:var(--ink-soft); transition: transform .3s ease; flex-shrink:0; }
  .stage.collapsed .stage-chevron{ transform: rotate(-90deg); }
  .stage-medal{ font-size:18px; margin-left:2px; display:none; flex-shrink:0; }
  .stage.done .stage-medal{ display:inline-block; animation: medalPop .45s cubic-bezier(.34,1.6,.6,1); }
  @keyframes medalPop{ 0%{transform:scale(0) rotate(-40deg);} 60%{transform:scale(1.3) rotate(8deg);} 100%{transform:scale(1) rotate(0);} }

  .stage-bar-track{ height:6px; background:var(--line); margin:0 16px; border-radius:99px; overflow:hidden; }
  .stage-bar-fill{ height:100%; border-radius:99px; width:0%; background: var(--accent, #999); transition:width .5s cubic-bezier(.34,1.4,.6,1); }
  .stage.done .stage-emoji{ box-shadow:0 0 0 3px var(--accent); }

  .stage-body{
    max-height:3000px; overflow:hidden;
    transition: max-height .4s ease, opacity .3s ease, padding .3s ease;
    padding:12px 10px 14px;
  }
  .stage.collapsed .stage-body{ max-height:0; opacity:0; padding-top:0; padding-bottom:0; }

  .item{
    display:flex; align-items:center; gap:12px;
    padding:10px 8px; border-radius:12px;
    transition: background .2s ease;
    cursor:pointer; position:relative;
  }
  .item:hover{ background:var(--accent-l, #F7F2E7); }
  .item.hidden{ display:none; }
  .item.hl{ background:var(--accent-l, #F7F2E7); }

  .checkbox{
    width:26px; height:26px; border-radius:50%;
    border:2px solid var(--cbox); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    transition: all .25s cubic-bezier(.34,1.56,.64,1);
    font-size:14px; color:transparent;
  }
  .checkbox.checked{
    border-color: transparent; color:#fff;
    background: var(--accent, #999);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent, #999) 50%, transparent);
    transform: scale(1.06);
  }
  .item-label{
    flex:1; font-size:15px; font-weight:700; color:var(--ink);
    transition: color .25s ease, opacity .25s ease; line-height:1.3;
  }
  .item-label.checked{
    color:var(--ink-soft); text-decoration: line-through;
    text-decoration-color:var(--line2); opacity:.7; font-weight:600;
  }
  .info-btn{
    width:27px; height:27px; border-radius:50%; flex-shrink:0;
    border:1.5px solid color-mix(in srgb, var(--accent,#ccc) 55%, #fff);
    color:var(--accent,#999); background:transparent;
    font-family:'Fredoka',sans-serif; font-weight:600; font-size:14px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition: background .2s ease, transform .2s ease;
  }
  .info-btn:hover{ background:var(--accent-l,#eee); }
  .info-btn:active{ transform:scale(.88); }

  .goal-note{
    margin:8px 8px 2px; padding:12px 14px; border-radius:14px;
    font-size:13px; line-height:1.5; display:flex; gap:8px; align-items:flex-start;
    background: var(--accent-l, #eee); color: var(--ink); font-weight:700;
  }
  .goal-note span.ic{ font-size:15px; }
  .subtitle-note{ margin:-2px 8px 10px; font-size:12.5px; color:var(--ink-soft); font-weight:700; padding:0 8px; }

  .plain-list{ list-style:none; padding:0 8px; margin:0; }
  .plain-list li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; font-weight:700; padding:9px 8px; line-height:1.4; }
  .warn-list li{ color:#8C2E2E; }
  .warn-list li::before{
    content:"✕"; color:var(--warn-text); font-size:14px; font-weight:800; line-height:1.4;
    background: var(--warn-l); width:20px; height:20px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }

  .theme-sage{ --accent:var(--sage); --accent-l:var(--sage-l); }
  .theme-rust{ --accent:var(--rust); --accent-l:var(--rust-l); }
  .theme-butter{ --accent:var(--butter); --accent-l:var(--butter-l); }
  .theme-sky{ --accent:var(--sky); --accent-l:var(--sky-l); }
  .theme-wheat{ --accent:var(--wheat); --accent-l:var(--wheat-l); }
  .theme-coral{ --accent:var(--coral); --accent-l:var(--coral-l); }
  .theme-plum{ --accent:var(--plum); --accent-l:var(--plum-l); }
  .theme-hazel{ --accent:var(--hazel); --accent-l:var(--hazel-l); }
  .theme-warn{ --accent:var(--warn); --accent-l:var(--warn-l); }

  /* ---------- FOOTER ---------- */
  footer{ text-align:center; font-size:11.5px; color:var(--text-dim); padding:14px 20px 6px; max-width:560px; margin:0 auto; }
  .reset-btn{
    display:block; margin:6px auto 16px; background:none;
    border:1px solid var(--line2); color:var(--ink-soft);
    font-family:'Nunito',sans-serif; font-weight:800; font-size:12px;
    padding:9px 18px; border-radius:99px; cursor:pointer;
  }
  .made-with{ margin-top:6px; font-size:12.5px; color:var(--text-dim); font-weight:800; letter-spacing:.2px; }
  .made-with .heart{ color:var(--coral-text); }
  .social{ display:flex; justify-content:center; gap:14px; margin-top:11px; padding-bottom:4px; }
  .social a{
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--paper); border:1px solid var(--line);
    box-shadow:0 2px 9px rgba(58,52,44,0.08);
    transition: transform .2s ease;
  }
  .social a:active{ transform: scale(.9); }
  .social svg{ width:21px; height:21px; display:block; }

  /* ---------- BOTTOM SHEET (mobile) ---------- */
  .sheet-backdrop{
    position:fixed; inset:0; background:rgba(40,34,28,.42);
    opacity:0; pointer-events:none; transition:opacity .25s; z-index:80;
  }
  .sheet-backdrop.open{ opacity:1; pointer-events:auto; }
  .sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:81;
    background:var(--glass); border-radius:24px 24px 0 0;
    backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%);
    border-top:1px solid var(--glass-brd);
    padding:12px 22px calc(26px + env(safe-area-inset-bottom));
    transform:translateY(102%); transition:transform .34s cubic-bezier(.34,1.3,.5,1);
    max-width:520px; margin:0 auto; box-shadow:0 -8px 40px rgba(0,0,0,.22), inset 0 1px 0 var(--glass-hi);
    overflow:visible;
  }
  .sheet-inner{ max-height:76vh; overflow-y:auto; }
  .sheet.open{ transform:translateY(0); }
  .sheet-grip{ width:44px; height:6px; border-radius:99px; background:var(--grip); margin:2px auto 14px; cursor:grab; }
  .sheet-close{
    position:absolute; top:-26px; right:18px; width:50px; height:50px; z-index:3;
    border:1px solid var(--line); border-radius:50%; background:var(--paper); color:var(--ink);
    font-size:19px; font-weight:800; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 5px 18px rgba(58,52,44,.22);
    opacity:0; pointer-events:none;
    transition:transform .15s, background .2s, opacity .25s;
  }
  .sheet.open .sheet-close{ opacity:1; pointer-events:auto; }
  .sheet-close:hover{ background:var(--btn-bg); }
  .sheet-close:active{ transform:scale(.9); }
  .sheet .guide-disclaimer{ margin-top:14px; }
  @media(min-width:981px){ .sheet, .sheet-backdrop{ display:none !important; } }
  @media(max-width:980px){
    .layout{ display:block; }
    main{ max-width:520px; margin:0 auto; }
    .guide{ display:none; }
  }

  /* ---------- TOAST ---------- */
  .toast{
    position:fixed; left:50%; top:calc(14px + env(safe-area-inset-top));
    transform:translateX(-50%) translateY(-24px);
    background:#2C2721; color:#fff; padding:10px 20px; border-radius:99px;
    font-weight:800; font-size:13.5px; z-index:95; opacity:0;
    transition:all .32s cubic-bezier(.34,1.4,.6,1); box-shadow:0 8px 24px rgba(0,0,0,.22);
    pointer-events:none; white-space:nowrap;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ---------- FX ---------- */
  .fx-layer{ position:fixed; inset:0; pointer-events:none; z-index:90; overflow:hidden; }
  .fx-item{ position:fixed; will-change:transform,opacity; pointer-events:none; }

  /* dark-mode tweaks */
  html[data-theme="dark"] .warn-list li{ color:#F0A5A5; }
  html[data-theme="dark"] .item.warn-active{ color:#F0A5A5; }

  /* theme toggle */
  .theme-toggle{
    position:fixed; top:calc(env(safe-area-inset-top) + 12px); right:64px;
    width:42px; height:42px; border-radius:50%; z-index:82;
    border:1px solid var(--glass-brd); background:var(--glass); color:var(--ink);
    backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%);
    font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    box-shadow:var(--glass-sh), inset 0 1px 0 var(--glass-hi);
    transition:transform .12s ease;
  }
  .theme-toggle:active{ transform:scale(.9); }
  .profile-btn{
    position:fixed; top:calc(env(safe-area-inset-top) + 12px); right:14px;
    width:42px; height:42px; border-radius:50%; z-index:82;
    border:1px solid var(--glass-brd); background:var(--glass); color:var(--ink);
    backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%);
    font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
    box-shadow:var(--glass-sh), inset 0 1px 0 var(--glass-hi); transition:transform .12s ease;
  }
  .profile-btn:active{ transform:scale(.9); }
  .profile-btn-dot{ position:absolute; right:1px; bottom:2px; width:10px; height:10px; border:2px solid var(--paper); border-radius:50%; background:var(--ink-soft); }
  .profile-btn.is-signed-in .profile-btn-dot{ background:var(--sage); }

  /* notes */
  .pcard-notes{ margin-top:14px; }
  .pcard-notes label{ display:block; font-size:12px; font-weight:800; color:var(--ink-soft); margin-bottom:6px; }
  .pcard-notes textarea{
    width:100%; min-height:56px; resize:vertical;
    border:1.5px solid var(--line2); border-radius:12px; padding:9px 11px;
    font-family:'Nunito',sans-serif; font-weight:600; font-size:13.5px;
    color:var(--ink); background:var(--cream);
  }
  .pcard-notes textarea::placeholder{ color:var(--text-dim); }

  /* tools row */
  .tools{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:520px; margin:4px auto 0; padding:0 14px; }
  .tools button{
    border:1px solid var(--line2); background:var(--paper); color:var(--ink-soft);
    font-family:'Nunito',sans-serif; font-weight:800; font-size:12px;
    padding:8px 14px; border-radius:99px; cursor:pointer;
    display:inline-flex; align-items:center; gap:6px;
  }
  .tools button:active{ transform:scale(.95); }

  /* scroll-to-top */
  .fab-top{
    position:fixed; right:16px; bottom:calc(74px + env(safe-area-inset-bottom));
    width:46px; height:46px; border-radius:50%; z-index:70;
    border:none; background:var(--sage); color:#fff; font-size:20px;
    box-shadow:0 6px 18px rgba(111,162,92,.4); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transform:translateY(12px);
    transition:opacity .25s, transform .25s;
  }
  .fab-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }

  /* add own product */
  .add-product{
    display:flex; align-items:center; gap:9px; width:calc(100% - 16px);
    margin:8px 8px 2px; padding:11px 12px; border-radius:12px;
    border:1.5px dashed var(--line2); background:transparent; color:var(--ink-soft);
    font-family:'Nunito',sans-serif; font-weight:800; font-size:14px; cursor:pointer;
    transition: background .2s, border-color .2s, color .2s;
  }
  .add-product:hover{ background:var(--accent-l); border-color:var(--accent); color:var(--accent); }
  .ap-plus{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--accent,#999); color:#fff; font-size:16px; font-weight:800; line-height:1; flex-shrink:0; }
  .own-badge{
    margin-left:8px; font-size:9.5px; font-weight:800; color:var(--accent,#999);
    background:var(--accent-l,#eee); padding:2px 7px; border-radius:99px; vertical-align:middle;
  }
  .pcard-del{
    margin-top:14px; width:100%; border:1px solid var(--warn); background:transparent; color:var(--warn-text);
    font-family:'Nunito',sans-serif; font-weight:800; font-size:12.5px; padding:9px; border-radius:11px; cursor:pointer;
  }
  .pcard-del:active{ transform:scale(.97); }

  /* modal */
  .modal-backdrop{ position:fixed; inset:0; background:rgba(40,34,28,.5); opacity:0; pointer-events:none; transition:opacity .25s; z-index:88; }
  .modal-backdrop.open{ opacity:1; pointer-events:auto; }
  .modal{
    position:fixed; z-index:89; left:50%; top:50%;
    transform:translate(-50%,-46%) scale(.96);
    width:calc(100% - 34px); max-width:420px; max-height:88vh; overflow-y:auto;
    background:var(--glass); border:1px solid var(--glass-brd); border-radius:22px;
    backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%);
    padding:18px 18px calc(20px + env(safe-area-inset-bottom));
    box-shadow:0 24px 64px rgba(0,0,0,.34), inset 0 1px 0 var(--glass-hi);
    opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
  }
  .modal.open{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
  .modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
  .modal-head h3{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:17px; margin:0; }
  .modal-x{ width:32px; height:32px; border-radius:50%; border:none; background:var(--btn-bg); color:var(--ink-soft); font-size:15px; font-weight:800; cursor:pointer; }
  .fld-label{ display:block; font-size:12px; font-weight:800; color:var(--ink-soft); margin:12px 0 6px; }
  .fld{
    width:100%; border:1.5px solid var(--line2); border-radius:12px; padding:11px 13px;
    font-family:'Nunito',sans-serif; font-weight:700; font-size:16px; color:var(--ink); background:var(--cream);
  }
  textarea.fld{ min-height:72px; resize:vertical; font-weight:600; }
  .emoji-input{ width:80px; text-align:center; font-size:22px; }
  .emoji-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin-top:8px; }
  .emoji-pick{ border:1px solid var(--line2); background:var(--paper); border-radius:10px; padding:6px 0; font-size:20px; cursor:pointer; line-height:1; }
  .emoji-pick:hover{ background:var(--btn-bg); }
  .add-submit{
    margin-top:16px; width:100%; border:none; border-radius:13px; padding:13px;
    background:var(--sage); color:#fff; font-family:'Fredoka',sans-serif; font-weight:600; font-size:15px; cursor:pointer;
  }
  .add-submit:active{ transform:scale(.98); }

  /* ---- разделы / меню ---- */
  [hidden]{ display:none !important; }
  .menu-btn{
    position:fixed; top:calc(env(safe-area-inset-top) + 12px); left:14px; width:42px; height:42px;
    border-radius:13px; z-index:82; border:1px solid var(--glass-brd); background:var(--glass); color:var(--ink);
    backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%);
    font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    box-shadow:var(--glass-sh), inset 0 1px 0 var(--glass-hi);
    transition:transform .12s ease;
  }
  .menu-btn:active{ transform:scale(.9); }
  .drawer-backdrop{ position:fixed; inset:0; background:rgba(40,34,28,.45); opacity:0; pointer-events:none; transition:opacity .25s; z-index:96; }
  .drawer-backdrop.open{ opacity:1; pointer-events:auto; }
  .drawer{
    position:fixed; top:0; left:0; bottom:0; width:82%; max-width:300px; z-index:97;
    background:var(--glass); border-right:1px solid var(--glass-brd);
    backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%);
    box-shadow:var(--glass-sh), inset 1px 0 0 var(--glass-hi);
    transform:translateX(-102%); transition:transform .32s cubic-bezier(.34,1.2,.5,1);
    padding:calc(env(safe-area-inset-top) + 64px) 16px 20px; display:flex; flex-direction:column; gap:8px;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y;
  }
  .drawer.open{ transform:translateX(0); }
  .drawer-title{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:12px; color:var(--ink-soft); letter-spacing:.6px; text-transform:uppercase; margin:0 0 6px 6px; }
  .drawer-item{ text-align:left; border:1px solid var(--line2); background:var(--cream); color:var(--ink); font-family:'Nunito',sans-serif; font-weight:800; font-size:15px; padding:14px 16px; border-radius:14px; cursor:pointer; transition:all .2s; }
  .drawer-item.active{ background:var(--sage); border-color:var(--sage-text); color:#fff; }
  .drawer-account{ display:grid; grid-template-columns:26px 1fr; grid-template-rows:auto auto; column-gap:7px; row-gap:3px; align-items:center; background:var(--sage-l); border-color:color-mix(in srgb,var(--sage) 30%,var(--line2)); color:var(--ink); }
  .drawer-account > span:first-child{ grid-row:1 / 3; font-size:22px; color:var(--sage-text); }
  .drawer-account small{ font-size:12px; color:var(--text-mid); font-weight:700; }
  .drawer-separator{ height:1px; margin:2px 4px 4px; background:var(--line); }

  /* ---- сумка в роддом ---- */
  .sumka-main{ max-width:520px; margin:0 auto; padding:18px 14px 6px; }
  .sub-head{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:13px; color:var(--ink); margin:12px 8px 2px; padding:0 8px; }
  .note-btn{ width:27px; height:27px; border-radius:50%; flex-shrink:0; border:1.5px solid var(--line2); color:var(--ink-soft); background:transparent; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
  .note-btn.has{ color:var(--sage-text); border-color:var(--sage-text); background:var(--sage-l); }
  .s-note{ display:none; padding:12px 10px 14px 46px; }
  .s-note.open{ display:block; }
  .s-note textarea{ width:100%; min-height:46px; resize:vertical; border:1.5px solid var(--line2); border-radius:10px; padding:8px 10px; font-family:'Nunito',sans-serif; font-weight:600; font-size:13px; color:var(--ink); background:var(--cream); }
  .s-del{ margin-top:6px; border:none; background:none; color:var(--warn-text); font-weight:800; font-size:12px; cursor:pointer; padding:2px 0; }

  /* ---- развитие: инфо-блоки ---- */
  .dev-intro{ max-width:520px; margin:18px auto 6px; padding:0 14px; }
  .dev-intro div{ background:var(--btn-bg); border-radius:14px; padding:11px 14px; font-size:13px; font-weight:700; line-height:1.5; color:var(--text-mid); }
  .doc-sub{ display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-top:3px; line-height:1.45; }
  .item-label.checked .doc-sub{ opacity:.7; }
  .dev-info{ margin:10px 8px 2px; padding:12px 14px; border-radius:14px; background:var(--accent-l,#eee); }
  .dev-info.flags{ background:var(--warn-l); }
  .dev-info h4{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:13px; margin:0 0 7px; color:var(--ink); }
  .dev-info.flags h4{ color:#8C2E2E; }
  html[data-theme="dark"] .dev-info.flags h4{ color:#F0A5A5; }
  .dev-info ul{ list-style:none; margin:0; padding:0; }
  .dev-info li{ font-size:13px; line-height:1.5; font-weight:700; color:var(--ink); padding:3px 0 3px 18px; position:relative; }
  .dev-info li::before{ content:"•"; position:absolute; left:5px; color:var(--accent,#999); font-weight:800; }
  .dev-info.flags li{ color:#8C2E2E; }
  .dev-info.flags li::before{ content:"!"; left:5px; color:var(--warn-text); }
  html[data-theme="dark"] .dev-info.flags li{ color:#F0A5A5; }

  /* ---- дневник дня ---- */
  .diary-wrap{ max-width:520px; margin:0 auto; padding:14px 14px 6px; }
  .daynav{ display:flex; align-items:center; justify-content:center; gap:14px; margin:4px 0; }
  .daynav button{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line2); background:var(--paper); color:var(--ink); font-size:17px; cursor:pointer; }
  .daynav button:disabled{ opacity:.35; cursor:default; }
  .daynav .dn-date{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:15px; min-width:150px; text-align:center; }
  .diary-sum{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:10px 0; min-height:20px; }
  .diary-sum span{ background:var(--paper); border:1px solid var(--line2); border-radius:99px; padding:6px 13px; font-weight:800; font-size:12.5px; color:var(--ink); }
  .qadd{ display:grid; grid-template-columns:repeat(auto-fit, minmax(92px,1fr)); gap:9px; margin:12px 0 6px; }
  .qadd button{ border:1px solid var(--line2); background:var(--paper); border-radius:15px; padding:12px 8px; cursor:pointer; font-family:'Nunito',sans-serif; font-weight:800; font-size:12.5px; color:var(--ink); display:flex; flex-direction:column; align-items:center; gap:5px; transition:transform .12s; }
  .qadd button:active{ transform:scale(.94); }
  .qadd button .qi{ font-size:23px; }
  .diary-list{ list-style:none; margin:12px 0 0; padding:0; }
  .diary-entry{ display:flex; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:14px; background:var(--paper); margin-bottom:8px; box-shadow:0 2px 8px rgba(58,52,44,.05); cursor:pointer; }
  .diary-entry:hover{ border-color:var(--line2); }
  .diary-entry .de-time{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:15px; color:var(--ink); width:50px; flex-shrink:0; }
  .diary-entry .de-ic{ font-size:20px; }
  .diary-entry .de-label{ flex:1; font-weight:700; font-size:14px; }
  .diary-entry .de-note{ display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-top:1px; }
  .diary-entry .de-del{ border:none; background:none; color:var(--ink-soft); font-size:15px; cursor:pointer; padding:4px; flex-shrink:0; }
  .diary-empty{ text-align:center; color:var(--ink-soft); font-weight:700; line-height:1.6; padding:26px 10px; }
  .diary-hint{ text-align:center; font-size:12px; color:var(--ink-soft); font-weight:700; margin:4px auto 2px; max-width:430px; line-height:1.45; }
  .qadd-title{ text-align:center; font-family:'Fredoka',sans-serif; font-weight:600; font-size:13px; color:var(--ink); margin:14px 0 0; }

  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more){
    .menu-btn, .theme-toggle, .drawer, .sheet, .modal{
      background:var(--paper) !important;
      backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
      border-color:var(--line) !important;
    }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
    .stem-fill, .stage-bar-fill{ transition-duration:.3s !important; }
  }



  /* ambient color field so frosted glass has something to blur */
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(46rem 46rem at 10% 6%, rgba(255,180,90,0.22), transparent 58%),
      radial-gradient(44rem 44rem at 92% 12%, rgba(255,120,120,0.16), transparent 58%),
      radial-gradient(50rem 50rem at 82% 90%, rgba(120,180,255,0.16), transparent 60%),
      radial-gradient(46rem 46rem at 14% 94%, rgba(120,220,170,0.16), transparent 60%);}
  html[data-theme="dark"] body::before{
    background:
      radial-gradient(46rem 46rem at 10% 6%, rgba(255,170,70,0.30), transparent 58%),
      radial-gradient(44rem 44rem at 92% 12%, rgba(255,80,90,0.22), transparent 58%),
      radial-gradient(50rem 50rem at 82% 90%, rgba(90,170,255,0.20), transparent 60%),
      radial-gradient(46rem 46rem at 14% 94%, rgba(120,255,180,0.18), transparent 60%);}



/* Hero FX (v31) — liquid aurora + calm micro-animations. Concept sourced via 21st.dev (LiquidAurora), rebuilt in vanilla for the app's warm brand. */
.hero{ isolation:isolate; }
.hero > :not(.hero-aurora){ position:relative; z-index:1; }
.hero-aurora{ position:absolute; inset:-18% -8% -12% -8%; z-index:0; pointer-events:none; overflow:hidden; filter:blur(46px) saturate(1.25); opacity:.55; }
html[data-theme="dark"] .hero-aurora{ opacity:.8; filter:blur(52px) saturate(1.4); }
.hero-aurora b{ position:absolute; display:block; border-radius:50%; will-change:transform; }
.hero-aurora .b1{ width:44%; padding-bottom:44%; left:4%;  top:-6%;  background:radial-gradient(circle at 50% 50%, rgba(111,162,92,.75), rgba(111,162,92,0) 66%); animation:auA 19s ease-in-out infinite; }
.hero-aurora .b2{ width:50%; padding-bottom:50%; left:32%; top:6%;   background:radial-gradient(circle at 50% 50%, rgba(62,143,196,.72), rgba(62,143,196,0) 66%); animation:auB 24s ease-in-out infinite; }
.hero-aurora .b3{ width:42%; padding-bottom:42%; left:60%; top:22%;  background:radial-gradient(circle at 50% 50%, rgba(232,176,92,.68), rgba(232,176,92,0) 66%); animation:auC 21s ease-in-out infinite; }
@keyframes auA{ 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(14%,10%) scale(1.18)} 66%{transform:translate(-8%,5%) scale(.92)} }
@keyframes auB{ 0%,100%{transform:translate(0,0) scale(1)} 30%{transform:translate(-12%,8%) scale(1.1)} 60%{transform:translate(10%,-6%) scale(.94)} }
@keyframes auC{ 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(-14%,-8%) scale(1.15)} 75%{transform:translate(6%,10%) scale(.9)} }
.hero-plant{ transform-origin:bottom center; animation:sproutBreath 5s ease-in-out infinite; }
@keyframes sproutBreath{ 0%,100%{transform:scale(1) rotate(0deg)} 25%{transform:scale(1.05) rotate(-2.5deg)} 60%{transform:scale(1.02) rotate(2deg)} }
.hero h1{ animation:heroUp .75s cubic-bezier(.22,.9,.3,1) both; }
.hero .hero-sub{ animation:heroUp .75s .09s cubic-bezier(.22,.9,.3,1) both; }
@keyframes heroUp{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.stem-wrap{ overflow:hidden; }
.stem-wrap::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%); transform:translateX(-120%); animation:heroShimmer 3.6s ease-in-out 1s infinite; }
@keyframes heroShimmer{ 0%{transform:translateX(-120%)} 55%,100%{transform:translateX(120%)} }
.hero-spark{ position:absolute; z-index:0; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle,rgba(111,162,92,.8),rgba(111,162,92,0) 70%); pointer-events:none; will-change:transform,opacity; }
@keyframes heroFloatUp{ 0%{transform:translateY(20px) scale(.6); opacity:0} 15%{opacity:.7} 85%{opacity:.5} 100%{transform:translateY(-90px) scale(1); opacity:0} }
@media (prefers-reduced-motion: reduce){
  .hero-aurora b,.hero-plant,.hero h1,.hero .hero-sub,.stem-wrap::after,.hero-spark{ animation:none !important; }
  .hero h1,.hero .hero-sub{ opacity:1 !important; transform:none !important; }
}



/* Polish layer (v32): checkbox stroke-draw, glass toasts, accordion spring, search focus, hero tracking */

/* --- checkbox: stroke-draw check + bounce (only on real toggle) --- */
.checkbox .svgi svg path{ stroke-dasharray:30; stroke-dashoffset:0; }
.checkbox.m-just-checked .svgi svg path{ stroke-dashoffset:30; animation:cbDraw .42s cubic-bezier(.6,.15,.25,1) forwards; }
@keyframes cbDraw{ to{ stroke-dashoffset:0; } }
.checkbox.m-just-checked{ animation:cbBounce .36s cubic-bezier(.34,1.5,.5,1); }
@keyframes cbBounce{ 0%{transform:scale(.82)} 55%{transform:scale(1.13)} 100%{transform:scale(1)} }

/* --- glass toasts + type icon --- */
.toast{ background:rgba(44,39,33,.72) !important; backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); border:1px solid rgba(255,255,255,.12); box-shadow:0 12px 34px rgba(0,0,0,.32); display:flex !important; align-items:center; gap:9px; }
html:not([data-theme="dark"]) .toast{ background:rgba(255,252,246,.82) !important; border-color:rgba(0,0,0,.06); box-shadow:0 12px 34px rgba(60,50,30,.16); }
.m-toast-ico{ flex:0 0 auto; width:20px; height:20px; display:inline-flex; }
.m-toast-ico svg{ width:100%; height:100%; }

/* --- accordion: animate real measured height with a spring-like curve --- */


/* --- search: softer focus ring + clear-button motion --- */
.search-wrap{ transition:box-shadow .25s ease; }
.search-wrap:focus-within{ box-shadow:0 0 0 3px rgba(62,143,196,.18); }
.search-clear{ transition:transform .2s ease, opacity .2s ease; }
.search-clear:active{ transform:scale(.85) rotate(90deg); }

/* --- hero typography: tighter tracking on the big display title --- */
.hero h1{ letter-spacing:-.02em; }
.hero .hero-sub{ letter-spacing:.004em; }

@media (prefers-reduced-motion: reduce){
  .checkbox.m-just-checked, .checkbox.m-just-checked .svgi svg path{ animation:none !important; stroke-dashoffset:0 !important; }
  
}



/* Day-diary enhancements (v38): sleep/feed timer, structured entry fields, trust strip. */
.dy-timer{margin:14px 0;border-radius:18px;border:1px solid var(--line);background:var(--paper);padding:14px 15px;display:flex;flex-direction:column;gap:12px;}
.dy-timer.run{background:linear-gradient(135deg, color-mix(in srgb, var(--sky) 18%, var(--paper)), color-mix(in srgb, var(--sage) 14%, var(--paper)));border-color:color-mix(in srgb, var(--sky) 40%, var(--line));}
.dy-timer .dt-idle{display:flex;align-items:center;gap:10px;}
.dy-timer .dt-ic{font-size:22px;}
.dy-timer .dt-t{font-weight:800;color:var(--ink);font-size:15px;}
.dy-timer .dt-start{display:flex;gap:10px;flex-wrap:wrap;}
.dy-timer .dt-start button{flex:1;min-width:150px;border:1px solid var(--line);background:var(--cream);color:var(--ink);font:inherit;font-weight:800;font-size:14px;padding:12px;border-radius:13px;cursor:pointer;}
.dy-timer .dt-start button:active{transform:scale(.98);}
.dy-timer.run{flex-direction:row;align-items:center;justify-content:space-between;}
.dy-timer .dt-l{display:flex;align-items:center;gap:12px;}
.dy-timer .dt-time{font-size:26px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;margin-top:2px;}
.dy-timer .dt-stop{background:var(--rust);color:#fff;border:none;font:inherit;font-weight:800;font-size:16px;padding:13px 26px;border-radius:99px;cursor:pointer;}
.dy-timer .dt-stop:active{transform:scale(.97);}
#dyAdd button .tmr-b{font-size:11px;margin-left:5px;opacity:.7;}
/* structured modal */
#dyStruct{position:fixed;inset:0;z-index:270;display:none;align-items:flex-end;justify-content:center;}
#dyStruct.open{display:flex;}
#dyStruct .ds-back{position:absolute;inset:0;background:color-mix(in srgb, var(--ink) 45%, transparent);}
#dyStruct .ds-card{position:relative;width:100%;max-width:460px;background:var(--cream);border-radius:22px 22px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));max-height:88vh;overflow-y:auto;box-shadow:0 -8px 30px rgba(0,0,0,.2);}
@media(min-width:560px){ #dyStruct{align-items:center;} #dyStruct .ds-card{border-radius:22px;} }
#dyStruct .ds-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
#dyStruct .ds-h h3{font-size:19px;font-weight:800;color:var(--ink);margin:0;}
#dyStruct .ds-x{background:none;border:none;font-size:20px;color:var(--ink-soft);cursor:pointer;line-height:1;padding:4px;}
#dyStruct .ds-fl{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin:14px 2px 6px;}
#dyStruct input,#dyStruct textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:11px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);}
#dyStruct textarea{min-height:64px;resize:vertical;}
#dyStruct input:focus,#dyStruct textarea:focus{outline:none;border-color:var(--sky-text);}
#dyStruct .ds-two{display:flex;gap:10px;}
#dyStruct .ds-two>div{flex:1;}
#dyStruct .ds-chips{display:flex;flex-wrap:wrap;gap:8px;}
#dyStruct .ds-chip{font:inherit;font-size:13.5px;font-weight:700;padding:9px 13px;border-radius:99px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;}
#dyStruct .ds-chip.on{border-color:var(--sage-text);background:color-mix(in srgb, var(--sage) 16%, var(--paper));color:var(--sage-text);}
#dyStruct .ds-hint{font-size:12.5px;color:var(--ink-soft);margin-top:8px;font-weight:700;}
#dyStruct .ds-foot{display:flex;gap:10px;margin-top:20px;}
#dyStruct .ds-del{background:none;border:1.5px solid var(--line);color:var(--rust-text);font:inherit;font-weight:800;font-size:14px;padding:12px 16px;border-radius:99px;cursor:pointer;}
#dyStruct .ds-save{flex:1;background:var(--sage);color:#fff;border:none;font:inherit;font-weight:800;font-size:16px;padding:13px;border-radius:99px;cursor:pointer;}
/* trust strip (hub) */
.hub-trust{grid-column:1 / -1;margin-top:4px;display:flex;gap:11px;align-items:flex-start;background:color-mix(in srgb, var(--sage) 8%, var(--paper));border:1px solid var(--line);border-radius:16px;padding:13px 15px;}
.hub-trust .ht-ic{flex:0 0 auto;color:var(--sage-text);margin-top:1px;}
.hub-trust .ht-ic svg{width:22px;height:22px;}
.hub-trust .ht-tx{font-size:12px;line-height:1.5;color:var(--ink-soft);}
.hub-trust .ht-tx b{color:var(--ink);font-weight:800;}



/* Day summary + doctor export (v39) */
.dy-sum2{margin:0 0 14px;border-radius:18px;border:1px solid var(--line);background:var(--paper);padding:15px 16px;}
.dy-sum2 .s2-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 14px;}
.dy-sum2 .s2-cell{display:flex;flex-direction:column;gap:2px;}
.dy-sum2 .s2-k{font-size:11.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;}
.dy-sum2 .s2-v{font-size:17px;font-weight:800;color:var(--ink);line-height:1.1;}
.dy-sum2 .s2-sub{font-size:12px;color:var(--ink-soft);}
.dy-sum2 .s2-last{margin-top:12px;font-size:13px;color:var(--ink);background:color-mix(in srgb, var(--sky) 12%, var(--paper));border-radius:12px;padding:9px 12px;font-weight:700;}
.dy-sum2 .s2-tl{margin-top:14px;}
.dy-sum2 .s2-tl-lab{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-soft);margin-top:4px;}
.dy-sum2 .s2-export{margin-top:14px;width:100%;background:color-mix(in srgb, var(--sage) 14%, var(--paper));color:var(--sage-text);border:1px solid color-mix(in srgb, var(--sage) 40%, var(--line));font:inherit;font-weight:800;font-size:14px;padding:12px;border-radius:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
.dy-sum2 .s2-empty{font-size:13px;color:var(--ink-soft);text-align:center;padding:6px 0;}
/* report overlay */
#dyReport{position:fixed;inset:0;z-index:280;display:none;align-items:center;justify-content:center;background:color-mix(in srgb, var(--ink) 55%, transparent);padding:16px;}
#dyReport.open{display:flex;}
#dyReport .rp-card{position:relative;width:100%;max-width:640px;max-height:92vh;overflow-y:auto;background:var(--cream);border-radius:20px;padding:16px;}
#dyReport .rp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
#dyReport .rp-head h3{margin:0;font-size:18px;font-weight:800;color:var(--ink);}
#dyReport .rp-x{background:none;border:none;font-size:20px;color:var(--ink-soft);cursor:pointer;padding:4px;}
#dyReport .rp-preview{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;}
#dyReport .rp-preview svg{display:block;width:100%;height:auto;}
#dyReport .rp-actions{display:flex;gap:10px;margin-top:14px;}
#dyReport .rp-btn{flex:1;font:inherit;font-weight:800;font-size:15px;padding:13px;border-radius:99px;cursor:pointer;border:none;}
#dyReport .rp-png{background:var(--sage);color:#fff;}
#dyReport .rp-print{background:var(--paper);color:var(--ink);border:1.5px solid var(--line);}


/* Batch 1 (v40): full event catalog + structured forms */
#viewDiary .qadd-title, #viewDiary .diary-hint, #dyAdd{display:none !important;}
.dy-addbtn{width:100%;margin:0 0 14px;background:var(--sage);color:#fff;border:none;font:inherit;font-weight:800;font-size:16px;padding:15px;border-radius:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
.dy-addbtn:active{transform:scale(.99);}
/* picker */
#dyPicker{position:fixed;inset:0;z-index:275;display:none;align-items:flex-end;justify-content:center;background:color-mix(in srgb,var(--ink) 45%,transparent);}
#dyPicker.open{display:flex;}
#dyPicker .pk-card{width:100%;max-width:520px;max-height:88vh;overflow-y:auto;background:var(--cream);border-radius:24px 24px 0 0;padding:18px 18px calc(20px + env(safe-area-inset-bottom));}
@media(min-width:560px){#dyPicker{align-items:center;} #dyPicker .pk-card{border-radius:24px;}}
#dyPicker .pk-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px;}
#dyPicker .pk-h h3{margin:0;font-size:19px;font-weight:800;color:var(--ink);}
#dyPicker .pk-x{background:none;border:none;font-size:20px;color:var(--ink-soft);cursor:pointer;padding:4px;}
#dyPicker .pk-cat{font-size:12px;font-weight:800;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin:16px 2px 11px;}
#dyPicker .pk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 6px;}
@media(max-width:400px){#dyPicker .pk-grid{grid-template-columns:repeat(3,1fr);}}
#dyPicker .pk-item{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;}
#dyPicker .pk-ic{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;}
#dyPicker .pk-item:active .pk-ic{transform:scale(.93);}
#dyPicker .pk-lab{font-size:11.5px;font-weight:700;color:var(--ink);text-align:center;line-height:1.15;}
/* struct modal 3 */
#dyStruct3{position:fixed;inset:0;z-index:279;display:none;align-items:flex-end;justify-content:center;}
#dyStruct3.open{display:flex;}
#dyStruct3 .d3-back{position:absolute;inset:0;background:color-mix(in srgb, var(--ink) 45%, transparent);}
#dyStruct3 .d3-card{position:relative;width:100%;max-width:460px;background:var(--cream);border-radius:22px 22px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));max-height:88vh;overflow-y:auto;box-shadow:0 -8px 30px rgba(0,0,0,.2);}
@media(min-width:560px){#dyStruct3{align-items:center;} #dyStruct3 .d3-card{border-radius:22px;}}
#dyStruct3 .d3-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
#dyStruct3 .d3-h h3{margin:0;font-size:19px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px;}
#dyStruct3 .d3-x{background:none;border:none;font-size:20px;color:var(--ink-soft);cursor:pointer;padding:4px;}
#dyStruct3 .d3-fl{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin:14px 2px 6px;}
#dyStruct3 input,#dyStruct3 textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:11px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);}
#dyStruct3 textarea{min-height:64px;resize:vertical;}
#dyStruct3 input:focus,#dyStruct3 textarea:focus{outline:none;border-color:var(--sky-text);}
#dyStruct3 .d3-two{display:flex;gap:10px;}
#dyStruct3 .d3-two>div{flex:1;}
#dyStruct3 .d3-chips{display:flex;flex-wrap:wrap;gap:8px;}
#dyStruct3 .d3-chip{font:inherit;font-size:13.5px;font-weight:700;padding:9px 13px;border-radius:99px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;}
#dyStruct3 .d3-chip.on{border-color:var(--sage-text);background:color-mix(in srgb, var(--sage) 16%, var(--paper));color:var(--sage-text);}
#dyStruct3 .d3-hint{font-size:12.5px;color:var(--ink-soft);margin-top:8px;font-weight:700;}
#dyStruct3 .d3-foot{display:flex;gap:10px;margin-top:20px;}
#dyStruct3 .d3-del{background:none;border:1.5px solid var(--line);color:var(--rust-text);font:inherit;font-weight:800;font-size:14px;padding:12px 16px;border-radius:99px;cursor:pointer;}
#dyStruct3 .d3-save{flex:1;background:var(--sage);color:#fff;border:none;font:inherit;font-weight:800;font-size:16px;padding:13px;border-radius:99px;cursor:pointer;}



/* Batch 2 (v41): growth metrics + chart */
#dyGrowth{margin:0 0 14px;border-radius:18px;border:1px solid var(--line);background:var(--paper);padding:15px 16px;}
#dyGrowth .g-t{font-weight:800;font-size:15px;color:var(--ink);display:flex;gap:7px;align-items:center;margin-bottom:12px;}
#dyGrowth .g-tabs{display:flex;gap:8px;margin-bottom:14px;}
#dyGrowth .g-tab{flex:1;font:inherit;font-weight:700;font-size:12.5px;padding:9px 6px;border-radius:11px;border:1px solid var(--line);background:var(--cream);color:var(--ink-soft);cursor:pointer;}
#dyGrowth .g-tab.on{background:color-mix(in srgb,var(--sage) 16%,var(--paper));border-color:var(--sage-text);color:var(--sage-text);}
#dyGrowth .g-cur{display:flex;align-items:baseline;gap:8px;}
#dyGrowth .g-val{font-size:27px;font-weight:800;color:var(--ink);line-height:1;}
#dyGrowth .g-unit{font-size:14px;color:var(--ink-soft);font-weight:700;}
#dyGrowth .g-delta{font-size:12.5px;font-weight:700;}
#dyGrowth .g-delta.up{color:var(--sage-text);}
#dyGrowth .g-delta.down{color:var(--rust-text);}
#dyGrowth .g-date{font-size:12px;color:var(--ink-soft);margin-top:3px;}
#dyGrowth .g-chart{margin:12px 0 3px;}
#dyGrowth .g-chart svg{width:100%;height:auto;display:block;}
#dyGrowth .g-xlab{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-soft);}
#dyGrowth .g-empty{font-size:13px;color:var(--ink-soft);text-align:center;padding:14px 0;}
#dyGrowth .g-add{margin-top:13px;width:100%;background:color-mix(in srgb,var(--sage) 14%,var(--paper));color:var(--sage-text);border:1px solid color-mix(in srgb,var(--sage) 40%,var(--line));font:inherit;font-weight:800;font-size:14px;padding:11px;border-radius:12px;cursor:pointer;}
#dyGrowth .g-hist{margin-top:12px;display:flex;flex-direction:column;gap:6px;}
#dyGrowth .g-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--ink);background:var(--cream);border-radius:10px;padding:8px 11px;}
#dyGrowth .g-row b{font-weight:800;}
#dyGrowth .g-row .g-del{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:15px;line-height:1;padding:2px 4px;}
#gAdd{position:fixed;inset:0;z-index:282;display:none;align-items:flex-end;justify-content:center;}
#gAdd.open{display:flex;}
#gAdd .ga-back{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 45%,transparent);}
#gAdd .ga-card{position:relative;width:100%;max-width:440px;background:var(--cream);border-radius:22px 22px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));}
@media(min-width:560px){#gAdd{align-items:center;} #gAdd .ga-card{border-radius:22px;}}
#gAdd h3{margin:0 0 4px;font-size:18px;font-weight:800;color:var(--ink);}
#gAdd label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin:14px 2px 6px;}
#gAdd input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:12px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);}
#gAdd input:focus{outline:none;border-color:var(--sky-text);}
#gAdd .ga-save{margin-top:18px;width:100%;background:var(--sage);color:#fff;border:none;font:inherit;font-weight:800;font-size:16px;padding:13px;border-radius:99px;cursor:pointer;}



/* Batch 3 (v42): milestones / memory capsule */
#dyMiles{margin:0 0 14px;border-radius:18px;border:1px solid var(--line);background:var(--paper);padding:15px 16px;}
#dyMiles .m-t{font-weight:800;font-size:15px;color:var(--ink);display:flex;gap:7px;align-items:center;margin-bottom:4px;}
#dyMiles .m-sub{font-size:12px;color:var(--ink-soft);margin:0 0 12px;}
#dyMiles .m-empty{font-size:13px;color:var(--ink-soft);text-align:center;padding:14px 4px;line-height:1.5;}
#dyMiles .m-list{display:flex;flex-direction:column;gap:8px;}
#dyMiles .m-row{display:flex;align-items:flex-start;gap:11px;background:var(--cream);border-radius:13px;padding:10px 12px;}
#dyMiles .m-emo{font-size:22px;line-height:1.15;flex-shrink:0;}
#dyMiles .m-body{flex:1;min-width:0;}
#dyMiles .m-name{font-size:14px;font-weight:800;color:var(--ink);}
#dyMiles .m-meta{font-size:11.5px;color:var(--ink-soft);margin-top:2px;display:flex;flex-wrap:wrap;gap:4px 9px;}
#dyMiles .m-age{color:var(--butter-text);font-weight:800;}
#dyMiles .m-note{font-size:12.5px;color:var(--ink-soft);margin-top:5px;white-space:pre-wrap;word-break:break-word;}
#dyMiles .m-del{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:15px;line-height:1;padding:2px 4px;flex-shrink:0;}
#dyMiles .m-add{margin-top:13px;width:100%;background:color-mix(in srgb,var(--butter) 16%,var(--paper));color:color-mix(in srgb,var(--butter) 78%,var(--ink));border:1px solid color-mix(in srgb,var(--butter) 48%,var(--line));font:inherit;font-weight:800;font-size:14px;padding:11px;border-radius:12px;cursor:pointer;}

#msAdd{position:fixed;inset:0;z-index:284;display:none;align-items:flex-end;justify-content:center;}
#msAdd.open{display:flex;}
#msAdd .ms-back{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 45%,transparent);}
#msAdd .ms-card{position:relative;width:100%;max-width:460px;max-height:88vh;overflow:auto;background:var(--cream);border-radius:22px 22px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));}
@media(min-width:560px){#msAdd{align-items:center;} #msAdd .ms-card{border-radius:22px;}}
#msAdd h3{margin:0 0 3px;font-size:18px;font-weight:800;color:var(--ink);}
#msAdd .ms-hint{margin:0 0 12px;font-size:12.5px;color:var(--ink-soft);}
#msAdd .ms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
#msAdd .ms-chip{display:flex;flex-direction:column;align-items:center;gap:4px;font:inherit;font-weight:700;font-size:11px;line-height:1.2;text-align:center;color:var(--ink-soft);padding:10px 5px;border-radius:13px;border:1.5px solid var(--line);background:var(--paper);cursor:pointer;}
#msAdd .ms-chip .e{font-size:21px;}
#msAdd .ms-chip.on{border-color:var(--butter-text);background:color-mix(in srgb,var(--butter) 15%,var(--paper));color:color-mix(in srgb,var(--butter) 78%,var(--ink));}
#msAdd label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin:15px 2px 6px;}
#msAdd input,#msAdd textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:12px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);}
#msAdd textarea{min-height:64px;resize:vertical;}
#msAdd input:focus,#msAdd textarea:focus{outline:none;border-color:var(--sky-text);}
#msAdd .ms-custom{display:none;}
#msAdd .ms-custom.show{display:block;}
#msAdd .ms-save{margin-top:18px;width:100%;background:var(--butter);color:#3a2c07;border:none;font:inherit;font-weight:800;font-size:16px;padding:13px;border-radius:99px;cursor:pointer;}



/* Batch 4 (v43): full backup / restore (all localStorage) */
#dyBackup{margin:0 0 14px;border-radius:18px;border:1px solid var(--line);background:var(--paper);padding:15px 16px;}
#dyBackup .b-t{font-weight:800;font-size:15px;color:var(--ink);display:flex;gap:7px;align-items:center;margin-bottom:4px;}
#dyBackup .b-sub{font-size:12px;color:var(--ink-soft);margin:0 0 12px;line-height:1.5;}
#dyBackup .b-row{display:flex;gap:9px;}
#dyBackup .b-btn{flex:1;font:inherit;font-weight:800;font-size:13px;padding:11px 8px;border-radius:12px;cursor:pointer;border:1px solid;}
#dyBackup .b-exp{background:color-mix(in srgb,var(--sky) 14%,var(--paper));color:var(--sky-text);border-color:color-mix(in srgb,var(--sky) 40%,var(--line));}
#dyBackup .b-imp{background:var(--cream);color:var(--ink);border-color:var(--line);}
#dyBackup .b-note{font-size:12px;color:var(--ink-soft);margin-top:9px;text-align:center;}



/* Home hub v3 (v37) — onboarding + personalized focus + top bar + bottom tab bar. */
body{ padding-bottom:76px; }
#homeHub{position:fixed; inset:0; z-index:200; background:var(--cream); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:calc(16px + env(safe-area-inset-top)) 18px calc(94px + env(safe-area-inset-bottom));}
#homeHub .wrap{max-width:1060px; margin:0 auto;}
#homeHub .htop{display:flex; align-items:center; justify-content:space-between; min-height:42px; margin:2px 0 16px;}
#homeHub .htop .tbtn{width:42px;height:42px;border-radius:13px;background:var(--paper);border:1px solid var(--line);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;}
#homeHub .htop .tbtn svg{width:21px;height:21px;}
#homeHub .htop .brand{font-weight:800;color:var(--ink);font-size:16px;}
/* Keep the home controls on the exact same grid as every section: theme, then profile. */
#homeHub .htop .brand{position:fixed;top:calc(env(safe-area-inset-top) + 23px);left:50%;z-index:201;transform:translateX(-50%);}
#homeHub .htop .tbtn[data-menu]{position:fixed;top:calc(env(safe-area-inset-top) + 12px);left:14px;z-index:201;}
#homeHub .htop .tbtn[data-theme]{position:fixed;top:calc(env(safe-area-inset-top) + 12px);right:64px;z-index:201;border-radius:50%;}
#homeHub .htop .family-account-button{position:fixed;top:calc(env(safe-area-inset-top) + 12px);right:14px;z-index:201;border-radius:50%;}
#homeHub .hhead{display:flex; align-items:center; gap:13px; margin:0 2px 20px;}
#homeHub .hsprout{width:46px;height:46px;border-radius:15px;background:color-mix(in srgb, var(--sage) 20%, transparent);color:var(--sage-text);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
#homeHub .hsprout svg{width:26px;height:26px;}
#homeHub .hgreet{font-size:21px;font-weight:800;color:var(--ink);line-height:1.1;}
#homeHub .hsub{font-size:13px;color:var(--ink-soft);margin-top:2px;}
#homeHub .hsub .edit{color:var(--sage-text);font-weight:700;cursor:pointer;margin-left:7px;}
#homeHub .hgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;}
#homeHub .tile{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:16px;min-height:120px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;color:var(--ink);transition:transform .12s ease, border-color .2s;overflow:hidden;-webkit-tap-highlight-color:transparent;}
#homeHub .tile:active{transform:scale(.975);}
#homeHub .tile .ic{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
#homeHub .tile .ic svg{width:23px;height:23px;}
#homeHub .tile .n{font-size:16px;font-weight:800;line-height:1.12;}
#homeHub .tile .d{font-size:12.5px;color:var(--ink-soft);margin-top:3px;}
#homeHub .feat{grid-column:1 / -1;background:linear-gradient(140deg, color-mix(in srgb, var(--sage) 22%, var(--paper)), color-mix(in srgb, var(--sky) 20%, var(--paper)));min-height:150px;}
#homeHub .feat .k{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--sage-text);}
#homeHub .feat .n{font-size:22px;margin-top:5px;}
#homeHub .feat .d{max-width:340px;}
#homeHub .feat .cta{margin-top:auto;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:var(--sage);color:#fff;font-weight:800;font-size:13.5px;padding:10px 17px;border-radius:99px;}
#homeHub .feat .prog{font-size:12.5px;color:var(--ink-soft);font-weight:700;margin-left:10px;}
@media(min-width:820px){
  #homeHub .hgrid{grid-template-columns:repeat(4,1fr);grid-auto-rows:132px;}
  #homeHub .feat{grid-column:span 2;grid-row:span 2;min-height:0;}
  #homeHub .feat .n{font-size:26px;}
}
/* bottom tab bar (global) */
#mamaTabs{--tab-index:0;position:fixed;left:12px;right:12px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:250;display:flex;justify-content:space-around;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--paper) 76%,transparent),color-mix(in srgb,var(--cream) 52%,transparent));backdrop-filter:blur(26px) saturate(1.7);-webkit-backdrop-filter:blur(26px) saturate(1.7);border:1px solid color-mix(in srgb,var(--glass-brd) 80%,var(--line));border-radius:22px;padding:6px 4px;box-shadow:0 12px 32px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.58),inset 0 -1px 0 rgba(255,255,255,.08);}
#mamaTabs::before{content:"";position:absolute;inset:1px;border-radius:21px;z-index:-1;background:linear-gradient(120deg,rgba(255,255,255,.24),transparent 42%);pointer-events:none;}
#mamaTabs .tab-slider{position:absolute;left:4px;top:4px;bottom:4px;width:calc((100% - 8px)/5);z-index:0;border-radius:18px;pointer-events:none;background:linear-gradient(145deg,rgba(255,255,255,.42),rgba(255,255,255,.11));border:1px solid rgba(255,255,255,.42);box-shadow:0 5px 14px rgba(25,20,15,.18),inset 0 1px 1px rgba(255,255,255,.72),inset 0 -1px 1px rgba(0,0,0,.06);transform:translateX(calc(var(--tab-index) * 100%)) scale(var(--lens-scale,1));transition:transform .48s cubic-bezier(.22,1.32,.35,1),width .3s ease;}
#mamaTabs .tab{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;color:var(--ink-soft);font-weight:800;font-size:10.5px;padding:4px 0;transition:color .25s ease,transform .16s ease;}
#mamaTabs .tab:active{transform:scale(.92);}
#mamaTabs .tab svg{width:21px;height:21px;filter:drop-shadow(0 1px 0 rgba(255,255,255,.3));}
#mamaTabs .tab.on{color:var(--sage-text);text-shadow:0 1px 0 rgba(255,255,255,.35);}
#mamaTabs .tab.on{touch-action:none;}
#mamaTabs.is-dragging .tab-slider{transition:none;}
#mamaTabs.is-dragging .tab{transition:none;}
#mamaTabs.is-dragging .tab.on{cursor:grabbing;}
html[data-theme="dark"] #mamaTabs .tab-slider{background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.055));border-color:rgba(255,255,255,.16);box-shadow:0 5px 16px rgba(0,0,0,.35),inset 0 1px 1px rgba(255,255,255,.18);}
#mamaTabs.hidden{display:none;}
@media(min-width:820px){ #mamaTabs{max-width:520px;margin:0 auto;} }
.hub-homebtn{display:none !important;}
/* onboarding */
#onbOverlay{position:fixed;inset:0;z-index:260;background:var(--cream);display:flex;align-items:center;justify-content:center;padding:24px calc(20px + env(safe-area-inset-left));}
#onbOverlay .card{width:100%;max-width:440px;}
#onbOverlay .osprout{width:56px;height:56px;border-radius:18px;background:color-mix(in srgb, var(--sage) 20%, transparent);color:var(--sage-text);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
#onbOverlay .osprout svg{width:32px;height:32px;}
#onbOverlay h2{font-size:23px;font-weight:800;color:var(--ink);text-align:center;line-height:1.15;}
#onbOverlay p.osub{font-size:14px;color:var(--ink-soft);text-align:center;margin:6px 0 22px;}
#onbOverlay .opt{display:flex;flex-direction:column;gap:12px;}
#onbOverlay .obtn{display:flex;align-items:center;gap:13px;background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:16px 18px;cursor:pointer;color:var(--ink);text-align:left;transition:border-color .2s;}
#onbOverlay .obtn.sel{border-color:var(--sage-text);}
#onbOverlay .obtn .oi{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
#onbOverlay .obtn .oi svg{width:24px;height:24px;}
#onbOverlay .obtn .ot{font-size:16px;font-weight:800;}
#onbOverlay .obtn .od{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
#onbOverlay label.fl{display:block;font-size:13px;font-weight:700;color:var(--ink);margin:18px 2px 7px;}
#onbOverlay input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:13px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);}
#onbOverlay input:focus{outline:none;border-color:var(--sky-text);}
#onbOverlay .odone{margin-top:22px;width:100%;background:var(--sage);color:#fff;font-weight:800;font-size:16px;padding:14px;border:none;border-radius:99px;cursor:pointer;}
#onbOverlay .oskip{display:block;margin:14px auto 0;background:none;border:none;color:var(--ink-soft);font-weight:700;font-size:13.5px;cursor:pointer;}
#homeHub .tile-add{background:transparent;border:1.5px dashed color-mix(in srgb, var(--ink-soft) 45%, transparent);color:var(--ink-soft);min-height:120px;font:inherit;text-align:left;}
#homeHub .tile-add .ic{background:color-mix(in srgb, var(--ink-soft) 12%, transparent);color:var(--ink-soft);}
#homeHub .tile-add .n{color:var(--ink);font-size:15px;}
/* Development: sleep and personalised growth-week calendar */
.dev-insights{max-width:720px;margin:0 auto 16px;padding:14px 14px 0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;}
.dev-insights-intro{display:flex;align-items:center;gap:10px;padding:2px 4px 0;}
.dev-insight-mark{width:34px;height:34px;border-radius:12px;background:linear-gradient(145deg,color-mix(in srgb,var(--sky) 35%,var(--paper)),color-mix(in srgb,var(--plum) 18%,var(--paper)));position:relative;}
.dev-insight-mark::before{content:"";position:absolute;width:12px;height:12px;border:2px solid var(--sky);border-top-color:transparent;border-right-color:transparent;border-radius:50%;left:10px;top:9px;transform:rotate(35deg);}
.dev-insights h2,.dev-insights h3{margin:0;color:var(--ink);font-family:'Fredoka',sans-serif;}
.dev-insights h2{font-size:18px;}.dev-insights-intro p{margin:2px 0 0;color:var(--ink-soft);font-size:12px;font-weight:700;}
.dev-insight-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:15px;box-shadow:var(--sh-card);}
.dev-insight-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-width:0;}
.dev-insight-top>*{min-width:0;}
.dev-insight-card{max-width:100%;overflow-wrap:anywhere;}.dev-eyebrow{display:block;font-size:12px;letter-spacing:.08em;font-weight:900;color:var(--sage-text);margin-bottom:3px;}.dev-insight-card h3{font-size:19px;}
.dev-hours{min-width:74px;text-align:center;border-radius:14px;padding:8px 7px;background:color-mix(in srgb,var(--sky) 15%,var(--paper));color:var(--sky-text);font-size:18px;font-weight:900;line-height:1;}.dev-hours small{display:block;margin-top:4px;font-size:12px;color:var(--ink-soft);}
.sleep-line{margin-top:12px;padding:10px 11px;border-radius:13px;background:color-mix(in srgb,var(--sage) 12%,transparent);display:grid;gap:3px;}.sleep-line b{font-size:13px;color:var(--ink);}.sleep-line span,.growth-copy,.growth-note{font-size:12px;line-height:1.4;color:var(--ink-soft);font-weight:650;}
.sleep-age-picker{display:flex;gap:7px;overflow-x:auto;margin-top:12px;padding:1px 1px 5px;scrollbar-width:none;}.sleep-age-picker::-webkit-scrollbar{display:none;}.sleep-age-picker button{white-space:nowrap;border:1px solid var(--line);border-radius:99px;background:var(--cream);color:var(--ink-soft);font:700 12.5px 'Nunito',sans-serif;padding:9px 12px;cursor:pointer;}.sleep-age-picker button.on{background:var(--sage);border-color:var(--sage-text);color:#fff;box-shadow:0 3px 8px color-mix(in srgb,var(--sage) 30%,transparent);}.sleep-details{margin-top:8px;}.sleep-details summary{cursor:pointer;color:var(--sky-text);font-weight:800;font-size:12.5px;}.sleep-table{display:grid;gap:6px;margin-top:9px;}.sleep-table>button{width:100%;border:0;display:grid;grid-template-columns:1fr auto;gap:2px 9px;padding:8px 10px;border-radius:11px;background:var(--cream);color:var(--ink);font:inherit;text-align:left;cursor:pointer;}.sleep-table>button.now{outline:1.5px solid var(--sage);background:color-mix(in srgb,var(--sage) 12%,var(--paper));}.sleep-table small{grid-column:1/-1;color:var(--ink-soft);font-size:12px;}
.dev-calendar-icon{width:34px;height:34px;border:2px solid var(--coral);border-radius:10px;position:relative;opacity:.8;}.dev-calendar-icon::before{content:"";position:absolute;left:5px;right:5px;top:9px;border-top:2px solid var(--coral);}.dev-calendar-icon::after{content:"";position:absolute;left:8px;top:-5px;width:3px;height:8px;background:var(--coral);box-shadow:12px 0 0 var(--coral);border-radius:3px;}
.growth-copy{margin:11px 0 10px;}.growth-legend{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 11px;}.growth-legend span{font-size:12px;font-weight:800;color:var(--ink-soft);padding:5px 8px;border-radius:99px;background:var(--cream);}.growth-legend .legend-current{outline:1.5px solid var(--ink);}.growth-legend .legend-possible{background:color-mix(in srgb,var(--coral) 16%,var(--paper));color:var(--coral-text);}.growth-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}.growth-week{min-height:57px;border:0;border-radius:13px;padding:8px 6px;background:color-mix(in srgb,var(--sky) 9%,var(--paper));color:var(--sky-text);display:flex;flex-direction:column;justify-content:space-between;text-align:left;font:inherit;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;}.growth-week:active{transform:scale(.94);}.growth-week b{font-size:16px;line-height:1;}.growth-week span{font-size:12px;opacity:.85;font-weight:700;white-space:nowrap;}.growth-week.possible{background:color-mix(in srgb,var(--coral) 16%,var(--paper));color:var(--coral-text);}.growth-week.current{outline:2px solid var(--ink);outline-offset:1px;}.growth-week.selected{box-shadow:0 4px 10px rgba(58,52,44,.18),inset 0 0 0 2px currentColor;}.growth-selected{margin:11px 0 0;font-size:12px;font-weight:800;color:var(--ink);}.growth-note{margin:8px 0 0;font-size:12px;}
html[data-theme="dark"] .dev-insight-card{box-shadow:var(--sh-card);}
/* customize overlay */
#tilesOverlay{position:fixed;inset:0;z-index:265;background:color-mix(in srgb, var(--ink) 42%, transparent);display:flex;align-items:flex-end;justify-content:center;}
#tilesOverlay .card{width:100%;max-width:460px;background:var(--cream);border-radius:24px 24px 0 0;padding:22px 20px calc(24px + env(safe-area-inset-bottom));max-height:86vh;overflow-y:auto;}
@media(min-width:560px){ #tilesOverlay{align-items:center;} #tilesOverlay .card{border-radius:24px;} }
#tilesOverlay h2{font-size:19px;font-weight:800;color:var(--ink);}
#tilesOverlay .csub{font-size:13px;color:var(--ink-soft);margin-top:4px;}
#tilesOverlay .tlist{margin:16px 0 4px;display:flex;flex-direction:column;gap:9px;}
#tilesOverlay .trow{display:flex;align-items:center;gap:12px;width:100%;background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:11px 13px;cursor:pointer;color:var(--ink);text-align:left;font:inherit;}
#tilesOverlay .trow .ti{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
#tilesOverlay .trow .ti svg{width:21px;height:21px;}
#tilesOverlay .trow .tt{flex:1;}
#tilesOverlay .trow .tn{font-size:15px;font-weight:800;}
#tilesOverlay .trow .td{font-size:12px;color:var(--ink-soft);margin-top:1px;}
#tilesOverlay .trow .tsw{width:44px;height:26px;border-radius:99px;background:color-mix(in srgb, var(--ink-soft) 30%, transparent);flex:0 0 auto;position:relative;transition:background .18s;}
#tilesOverlay .trow .tsw .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .18s;box-shadow:0 1px 3px rgba(0,0,0,.25);}
#tilesOverlay .trow.on .tsw{background:var(--sage);}
#tilesOverlay .trow.on .tsw .knob{left:21px;}
#tilesOverlay .trow:not(.on){opacity:.62;}
#tilesOverlay .tdone{margin-top:16px;width:100%;background:var(--sage);color:#fff;font-weight:800;font-size:16px;padding:14px;border:none;border-radius:99px;cursor:pointer;}
@media (prefers-reduced-motion: reduce){ #homeHub .tile:active{transform:none;} }

/* Family account and shared access */
.family-account-button{font-size:19px;line-height:1;}
#familyModal{position:fixed;inset:0;z-index:400;display:flex;align-items:flex-end;justify-content:center;color:var(--ink);}
.family-modal-backdrop{position:absolute;inset:0;background:rgba(20,18,14,.5);backdrop-filter:blur(3px);}
.family-modal-card{position:relative;width:100%;max-width:480px;max-height:88vh;overflow:auto;background:var(--cream);border-radius:24px 24px 0 0;padding:20px 18px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.2);}
.family-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.family-modal-head h2{margin:0;font-family:'Fredoka',sans-serif;font-size:21px;}
.family-close{width:34px;height:34px;border:none;border-radius:50%;background:var(--btn-bg);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;}
.family-modal-body p{line-height:1.5;}
.family-form{display:flex;flex-direction:column;gap:13px;}
.family-form label,#familyInviteResult label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:800;color:var(--ink);}
.family-form input,#familyInviteResult input{width:100%;border:1.5px solid var(--line2);border-radius:13px;background:var(--paper);padding:12px;font:inherit;color:var(--ink);}
.family-form input:focus,#familyInviteResult input:focus{outline:3px solid color-mix(in srgb,var(--sky) 30%,transparent);border-color:var(--sky-text);}
.family-primary,.family-secondary,.family-danger,.family-actions button,.family-modal-buttons button{border:none;border-radius:13px;padding:12px 14px;font:inherit;font-weight:800;cursor:pointer;}
.family-primary{width:100%;background:var(--sage);color:#fff;}
.family-secondary{width:100%;margin-top:10px;background:var(--btn-bg);color:var(--ink);}
.family-danger{width:100%;margin-top:16px;background:transparent;color:var(--warn-text);text-decoration:underline;}
.family-actions,.family-modal-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.family-actions button,.family-modal-buttons button{background:var(--btn-bg);color:var(--ink);font-size:13px;}
.family-muted{color:var(--ink-soft);font-size:13px;line-height:1.45;}
.family-note{padding:14px;border:1px solid var(--butter);border-radius:14px;background:var(--butter-l);font-size:13px;line-height:1.45;}
.family-note code{font-size:11px;word-break:break-all;}
.restore-options{margin:16px 0 2px;padding-top:14px;border-top:1px solid var(--line);}
.restore-options::before{content:'Вернуть из удалённых';display:block;margin-bottom:8px;font-size:12px;font-weight:800;color:var(--ink-soft);}
.restore-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:10px 12px;margin:6px 0;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:inherit;font-size:13px;font-weight:700;text-align:left;cursor:pointer;}
.restore-option span:last-child{color:var(--sage-text);font-size:12px;white-space:nowrap;}
.family-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--paper);border:1px solid var(--line);padding:13px;border-radius:14px;}
.family-status{font-size:11px;font-weight:800;padding:5px 8px;border-radius:99px;background:var(--btn-bg);color:var(--ink-soft);white-space:nowrap;}
.family-status.ok{background:var(--sage-l);color:var(--sage-text);}.family-status.error{background:var(--warn-l);color:var(--warn-text);}
.family-members{list-style:none;margin:8px 0 14px;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;}.family-members li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;background:var(--paper);border-bottom:1px solid var(--line);font-size:14px;}.family-members li:last-child{border-bottom:0;}.family-members b{font-size:11px;color:var(--ink-soft);}
#familyInviteResult{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
@media(min-width:560px){#familyModal{align-items:center;padding:18px}.family-modal-card{border-radius:24px;max-height:80vh;padding:22px;}}

/* ==========================================================================
   Правки по дизайн-аудиту (сентябрь 2026)
   ========================================================================== */

/* Контраст: белый текст на фирменном зелёном давал 3,0 при норме 4,5.
   Заливки и акценты сохраняют прежний --sage, надписи получают тон темнее. */
:root{ --sage-strong:#4F7A3F; }
.chip.active{ background:var(--sage-strong); }
.drawer-item.active{ background:var(--sage-strong); }
#dyStruct .ds-save{ background:var(--sage-strong); }
#dyReport .rp-png{ background:var(--sage-strong); }
.dy-addbtn{ background:var(--sage-strong); }
#dyStruct3 .d3-save{ background:var(--sage-strong); }
#gAdd .ga-save{ background:var(--sage-strong); }
#homeHub .feat .cta{ background:var(--sage-strong); }
#onbOverlay .odone{ background:var(--sage-strong); }
.sleep-age-picker button.on{ background:var(--sage-strong); }
#tilesOverlay .tdone{ background:var(--sage-strong); }
.family-primary{ background:var(--sage-strong); }
.add-submit{ background:var(--sage-strong); }
.fab-top{ background:var(--sage-strong); }
.chip.active{ border-color:var(--sage-strong); }
.sleep-age-picker button.on{ border-color:var(--sage-strong); }

/* Область нажатия: значки были 27×27 при норме 44×44.
   Вид не меняется — растёт только невидимая зона касания. */
.info-btn, .note-btn, .modal-x, .s-del, .de-del{ position:relative; }
.info-btn::after, .note-btn::after, .modal-x::after, .de-del::after{
  content:""; position:absolute; inset:-9px; border-radius:inherit;
}
.chip, .kid{ min-height:36px; }

/* Периоды развития: «возможный период перемен» больше не различается
   одним лишь цветом — у таких недель появляется точка. */
.growth-week.possible{ position:relative; }
.growth-week.possible::after{
  content:""; position:absolute; top:6px; right:6px;
  width:5px; height:5px; border-radius:50%;
  background:currentColor; opacity:.55;
}

/* Дневник: кнопки таймера держат общую высоту, даже если подпись переносится */
.dy-timer-actions button{ min-height:52px; }

/* Главная: подпись плитки не съезжает, когда заголовок занимает две строки */
#homeHub .tile .n{ min-height:2.5em; }

/* Разделы без боковой колонки («Режим сна», «Периоды развития») центрируются
   на широком экране: у них общий main без авто-отступов, и он прижимался влево. */
#sleepMain, #growthMain{ margin-left:auto; margin-right:auto; }

/* ==========================================================================
   Нижнее меню: линза «жидкое стекло»
   Линза едет НАД невыбранными кнопками и преломляет их, а выбранная кнопка
   остаётся поверх стекла — чёткой и читаемой. При вождении стекло слегка
   растёт, как настоящая лупа.
   ========================================================================== */

/* Иконки и подписи всегда НАД стеклом — так они не мутнеют под линзой. */
#mamaTabs .tab{ z-index:3; }

#mamaTabs .tab-slider{
  z-index:2;
  border-radius:999px;
  /* никакой заливки и никакого размытия: центр линзы — чистое стекло */
  background:transparent;
  border:0;
  -webkit-backdrop-filter:saturate(112%) brightness(1.03);
  backdrop-filter:saturate(112%) brightness(1.03);
  box-shadow:
    0 8px 20px rgba(25,20,15,.16),
    0 1px 3px rgba(25,20,15,.10),
    inset 0 0 0 1px rgba(255,255,255,.50);   /* тонкий обод = кромка стекла */
}

/* Блик строго по кромке: резкие линии в 1px сверху и снизу, без тумана. */
#mamaTabs .tab-slider::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:
    inset 0 1.5px 0 -.5px rgba(255,255,255,.92),
    inset 0 -1.5px 0 -.5px rgba(255,255,255,.34);
}

/* Хроматическая кайма — тоже тонкой полоской по бокам. */
#mamaTabs .tab-slider::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:
    inset 1.5px 0 0 -.5px rgba(120,200,255,.50),
    inset -1.5px 0 0 -.5px rgba(255,190,135,.46);
  mix-blend-mode:screen;
}

/* Увеличение под линзой: выбранный значок крупнее соседних. */
#mamaTabs .tab svg{ transition:transform .34s cubic-bezier(.22,1.32,.35,1); }
#mamaTabs .tab span{ transition:transform .34s cubic-bezier(.22,1.32,.35,1); }
#mamaTabs .tab.on svg{ transform:scale(1.14); }
#mamaTabs .tab.on span{ transform:scale(1.05); }

/* Пока ведёшь пальцем — стекло чуть вырастает. */
#mamaTabs.is-dragging .tab-slider{ --lens-scale:1.07; }
#mamaTabs.is-dragging .tab.on svg{ transform:scale(1.2); }

html[data-theme="dark"] #mamaTabs .tab-slider{
  background:transparent;
  -webkit-backdrop-filter:saturate(110%) brightness(1.05);
  backdrop-filter:saturate(110%) brightness(1.05);
  box-shadow:
    0 8px 22px rgba(0,0,0,.45),
    0 1px 3px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.24);
}
html[data-theme="dark"] #mamaTabs .tab-slider::before{
  background:none;
  box-shadow:
    inset 0 1.5px 0 -.5px rgba(255,255,255,.52),
    inset 0 -1.5px 0 -.5px rgba(255,255,255,.18);
}

@media (prefers-reduced-motion: reduce){
  #mamaTabs .tab-slider,
  #mamaTabs .tab svg,
  #mamaTabs .tab span{ transition:none; }
  #mamaTabs.is-dragging .tab-slider{ --lens-scale:1; }
}

/* Плитки главного экрана получают тот же объём, что и карточки разделов. */
#homeHub .tile{ box-shadow:var(--sh-card); }
#homeHub .tile:active{ box-shadow:var(--sh-card); transform:scale(.985); }