:root{
    --bg1:#f7f7ff;
    --bg2:#f0fbff;
    --card:#ffffffcc;
    --ink:#1f2330;
    --muted:#5f6677;
    --line:#e8e9f2;
    --shadow: 0 16px 50px rgba(31,35,48,.10);
    --primary:#6c63ff;
    --primary2:#34c3ff;
    --good:#22c55e;
    --warn:#f59e0b;
    --pink:#ff5fa2;
    --mint:#39d98a;
    --chip:#f3f5ff;
    --radius:22px;
  }

  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
  }

  *{box-sizing:border-box}
  body{
    margin:0;
    position:relative;
    font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color:var(--ink);
    background:
      radial-gradient(1200px 700px at 10% 5%, #ffe6f1 0%, transparent 45%),
      radial-gradient(900px 600px at 90% 15%, #d7f7ff 0%, transparent 45%),
      radial-gradient(1000px 700px at 50% 110%, #e9ffe9 0%, transparent 50%),
      linear-gradient(180deg, var(--bg1), var(--bg2));
    min-height:100vh;
    padding-bottom: 128px; /* space for bottom dock (2 rows + safe area) */
  }

  .wrap{
    max-width:520px;
    margin:0 auto;
    padding:16px 14px 24px;
    position:relative;
    z-index:1;
  }

  .top{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:6px 0 12px;
    padding:14px 14px 12px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.65);
    box-shadow: 0 20px 48px rgba(31,35,48,.12);
    overflow:hidden;
    background:
      radial-gradient(110% 140% at 10% 0%, rgba(255,236,168,.75) 0%, rgba(255,236,168,0) 55%),
      radial-gradient(130% 160% at 92% 4%, rgba(165,236,255,.85) 0%, rgba(165,236,255,0) 58%),
      linear-gradient(135deg, #ffe0ef 0%, #e1f6ff 55%, #e5ffe7 100%);
  }
  .top::before{
    content:"";
    position:absolute;
    inset:-2px -18px auto;
    height:34px;
    background:
      radial-gradient(16px 10px at 12% 60%, rgba(255,255,255,.76), rgba(255,255,255,0) 70%),
      radial-gradient(22px 14px at 35% 40%, rgba(255,255,255,.70), rgba(255,255,255,0) 72%),
      radial-gradient(18px 12px at 58% 58%, rgba(255,255,255,.72), rgba(255,255,255,0) 70%),
      radial-gradient(24px 14px at 82% 46%, rgba(255,255,255,.72), rgba(255,255,255,0) 72%);
    pointer-events:none;
  }
  .top::after{
    content:"🧸✈️   ☁️   🧸✈️   ☁️   🧸✈️";
    position:absolute;
    left:10px;
    right:10px;
    bottom:6px;
    font-size:14px;
    opacity:.5;
    letter-spacing:1px;
    text-align:center;
    pointer-events:none;
  }
  .topMoonWrap{
    position:absolute;
    top:8px;
    right:8px;
    display:flex;
    gap:6px;
    z-index:3;
  }
  .topMoonBtn{
    width:32px;
    height:32px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.78);
    background: rgba(255,255,255,.62);
    color:#263146;
    display:grid;
    place-items:center;
    font-size:15px;
    line-height:1;
    white-space:nowrap;
    font-weight:1000;
    cursor:pointer;
    box-shadow: 0 8px 16px rgba(31,35,48,.12);
    -webkit-tap-highlight-color: transparent;
  }
  .topMoonBtn.auto{
    font-size:11px;
    letter-spacing:-0.2px;
    font-weight:900;
  }
  .topMoonBtn.on{
    background: linear-gradient(135deg, #1f2b46, #344a73);
    color:#fff2b3;
    border-color: rgba(31,43,70,.75);
  }
  .topMoonBtn:active{ transform: translateY(1px) scale(.98); }

  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    position:relative;
    z-index:1;
    min-width:0;
    padding-right:78px;
  }

  .logo{
    width:46px;height:46px;border-radius:16px;
    background: linear-gradient(135deg, #ff8fb8, #6ec8ff);
    box-shadow: 0 10px 20px rgba(108,99,255,.22);
    display:grid;place-items:center;
    color:white;font-weight:900;
  }

  .title{ line-height:1.05; min-width:0; }
  .title .name{
    font-size:21px;
    font-weight:1000;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .title .sub{
    font-size:11.5px;
    color:#4f596d;
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }

  /* hide top tabs */
  .top .pillTabs{ display:none !important; }

  .pillTabs{
    display:flex;
    background: rgba(255,255,255,.65);
    border:1px solid var(--line);
    border-radius:999px;
    padding:4px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
    flex-wrap:nowrap;
    overflow:hidden;
    justify-content:flex-end;
    width:100%;
    max-width:520px;
    margin:0 auto;
  }

  .tab{
    border:0;
    background:transparent;
    padding:10px 12px;
    border-radius:999px;
    font-weight:900;
    color:var(--muted);
    cursor:pointer;
    display:flex;align-items:center;gap:8px;
    white-space:nowrap;
    flex:1;
    justify-content:center;

    /* micro animations */
    transition: transform .18s ease, box-shadow .24s ease, filter .24s ease, background .24s ease, color .24s ease;
    -webkit-tap-highlight-color: transparent;
    position:relative;
    overflow:hidden;
  }
  .tab .ico{
    font-size:14px;
    line-height:1;
  }
  .tab .lbl{
    line-height:1.05;
    font-size:12px;
  }
  .tab:active{ transform: translateY(1px) scale(.98); }

  .tab.active{
    background: white;
    color: var(--ink);
    box-shadow: 0 10px 24px rgba(31,35,48,.10);
    animation: tabGlow 520ms ease-out;
  }
  .tab::after{
    content:"";
    position:absolute;
    inset:-20% auto -20% -60%;
    width:38%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
    transform: translateX(-140%) skewX(-18deg);
    opacity:0;
    pointer-events:none;
  }
  @media (hover:hover){
    .tab:hover{
      transform: translateY(-1px);
      box-shadow: 0 12px 24px rgba(31,35,48,.12);
    }
    .tab:hover::after{
      animation: btnShine .9s ease-out;
    }
  }

  .card{
    background: var(--card);
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding:14px;
    margin-bottom:12px;
    backdrop-filter: blur(10px);

    /* micro animations */
    transition: transform .18s ease, box-shadow .18s ease;
  }
  @media (hover:hover){
    .card:hover{ transform: translateY(-1px); box-shadow: 0 22px 70px rgba(31,35,48,.12); }
  }

  h3{
    margin:0 0 10px;
    font-size:14px;
    color:var(--muted);
    letter-spacing:.2px;
  }
  .sectionHead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
    position:relative;
    padding-right:20px;
  }
  .sectionHead h3{
    margin:0;
  }
  .sectionAddBtn{
    position:absolute;
    right:0;
    top:0;
    width:14px;
    height:14px;
    min-width:14px;
    padding:0;
    border-radius:999px;
    font-size:10px;
    line-height:1;
    display:grid;
    place-items:center;
    border:0;
    color:#ffffff;
    background:
      radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,.34), rgba(255,255,255,0) 42%),
      linear-gradient(135deg, #0f9d58, #39d98a);
    box-shadow:
      0 3px 6px rgba(34,197,94,.16),
      inset 0 1px 0 rgba(255,255,255,.42);
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .toggles{
    display:flex;
    gap:10px;
    flex-wrap:nowrap;
    overflow:hidden;
    margin-bottom:10px;
  }

  .toggle input{display:none}
  .toggle span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 12px;
    font-size:13px;
    border-radius:999px;
    background: var(--chip);
    border:1px solid #e9ecff;
    font-weight:900;
    cursor:pointer;
    user-select:none;
    transition:.15s;
  }
  .toggle span:active{ transform: scale(.99); }

  .toggle input:checked + span{
    color:#fff;
    border-color: transparent;
    box-shadow: 0 12px 24px rgba(31,35,48,.12);
  }
  #pee:checked + span{ background: linear-gradient(135deg, #4facfe, #00f2fe); }
  #poop:checked + span{ background: linear-gradient(135deg, #ff8a00, #ff3d7f); }
  #vitd:checked + span{ background: linear-gradient(135deg, #b8ffd0, #5dd39e); }
  #entryEditorPee:checked + span{ background: linear-gradient(135deg, #4facfe, #00f2fe); }
  #entryEditorPoop:checked + span{ background: linear-gradient(135deg, #ff8a00, #ff3d7f); }
  #entryEditorVitd:checked + span{ background: linear-gradient(135deg, #b8ffd0, #5dd39e); }
  #espu:checked + span{ background: linear-gradient(135deg, #c7b0ff, #7dd3fc); }
  /* Espumisan highlight when given within last 4h */
  .toggle span.espuRecent{
    background: linear-gradient(135deg, #6c63ff, #a78bfa);
    color:#fff;
    border-color: transparent;
    box-shadow: 0 12px 24px rgba(108,99,255,.22);
  }


  label{
    display:block;
    margin-top:10px;
    font-weight:900;
    font-size:12px;
    color:var(--muted);
  }

  .row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    margin-top:8px;
  }

  .input{
    width:100%;
    border-radius:18px;
    border:1px solid var(--line);
    background:white;
    padding:12px 12px;
    font-size:15px;
    font-weight:800;
    outline:none;
    transition: box-shadow .18s ease, border-color .18s ease, transform .12s ease;
  }
  .input:focus{
    border-color: rgba(108,99,255,.55);
    box-shadow: 0 0 0 4px rgba(108,99,255,.12);
  }

  textarea.input{min-height:76px; resize:vertical; font-weight:700;}

  .btn{
    width:100%;
    border:0;
    border-radius:18px;
    padding:13px 14px;
    font-weight:1000;
    cursor:pointer;
    font-size:16px;
    color:white;
    background: linear-gradient(135deg, var(--primary), var(--primary2));
    box-shadow: 0 14px 28px rgba(108,99,255,.22);
    transition: transform .18s ease, box-shadow .22s ease, filter .22s ease;
    -webkit-tap-highlight-color: transparent;
    position:relative;
    overflow:hidden;
  }
  .btn:active{ transform: translateY(1px) scale(.985); filter: brightness(1.02); }
  .btn::after{
    content:"";
    position:absolute;
    inset:-30% auto -30% -65%;
    width:45%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.42), rgba(255,255,255,0));
    transform: translateX(-150%) skewX(-18deg);
    opacity:0;
    pointer-events:none;
  }
  @media (hover:hover){
    .btn:hover{
      transform: translateY(-1px);
      box-shadow: 0 18px 30px rgba(108,99,255,.28);
      filter: saturate(1.08);
    }
    .btn:hover::after{
      animation: btnShine 1s ease-out;
    }
  }

  
  /* ===== Breast one-shot button (full width) ===== */
  .btnBreast{
    margin-top:10px;
    background: linear-gradient(135deg, #ff8fab, #34c3ff);
    box-shadow: 0 14px 28px rgba(255,143,171,.22);
  }
.actions{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:8px;
  }
  .action{
    border:1px solid var(--line);
    border-radius:18px;
    padding:10px 6px;
    background:white;
    font-weight:1000;
    cursor:pointer;
    text-align:center;
    transition: transform .16s ease, box-shadow .22s ease, filter .22s ease, border-color .22s ease;
    box-shadow: 0 10px 18px rgba(31,35,48,.06);
    -webkit-tap-highlight-color: transparent;
    position:relative;
    overflow:hidden;
  }
  .action:active{ transform: translateY(1px) scale(.985); filter: brightness(1.02); }
  .action::after{
    content:"";
    position:absolute;
    inset:-30% auto -30% -70%;
    width:44%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0));
    transform: translateX(-150%) skewX(-18deg);
    opacity:0;
    pointer-events:none;
  }
  @media (hover:hover){
    .action:hover{
      transform: translateY(-2px);
      box-shadow: 0 16px 26px rgba(31,35,48,.12);
      border-color: rgba(108,99,255,.24);
    }
    .action:hover::after{
      animation: btnShine .95s ease-out;
    }
  }

  .action.bath{ background: linear-gradient(135deg, #c2ffd8, #465efb); color:white; border:0;}
  .action.walk{ background: linear-gradient(135deg, #ffe29f, #ffa99f); color:#2b1b00; border:0;}
  .action.vax{  background: linear-gradient(135deg, #fbc2eb, #a6c1ee); color:#1f2330; border:0;}

  /* Quick milk button */
  .action.milk{
    grid-column: auto;
    background: linear-gradient(135deg, rgba(52,195,255,.35), rgba(184,255,208,.35));
    border: 0;
    color: #1f2330;
  }

  .actions2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
  }
  .action.small{
    padding:12px 10px;
    font-size:14px;
  }

  /* ===== Smaller text for exercises/massage ===== */
  .actions2 .action.small{
    padding: 10px 8px;
    font-size: 12px;
  }
  .actions .action{
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .action.ex{
    background: linear-gradient(135deg, #d7f7ff, #a6c1ee);
    border:0;
    color:#1f2330;
  }
  .action.ms{
    background: linear-gradient(135deg, #ffe6f1, #ffd1dc);
    border:0;
    color:#2b1b00;
  }
  .sleepCard{
    position:relative;
    overflow:hidden;
    padding:11px 12px 12px;
    background:
      radial-gradient(120px 90px at 14% 18%, rgba(255,244,181,.42), rgba(255,244,181,0) 70%),
      radial-gradient(160px 120px at 86% 16%, rgba(164,214,255,.34), rgba(164,214,255,0) 72%),
      linear-gradient(160deg, rgba(29,42,83,.94), rgba(47,67,121,.92) 58%, rgba(93,92,181,.88));
    border:1px solid rgba(255,255,255,.16);
    box-shadow: 0 22px 54px rgba(18,24,49,.28);
  }
  .sleepCard::before{
    content:"✦  ✧   ✦    ✨    ✦   ✧";
    position:absolute;
    top:10px;
    right:12px;
    font-size:12px;
    letter-spacing:4px;
    color:rgba(255,244,181,.82);
    pointer-events:none;
  }
  .sleepCard h3,
  .sleepCard .msg,
  .sleepCard .sleepHint,
  .sleepCard .sleepTimeMeta{
    color:#1a2742;
  }
  .sleepCard h3{
    margin-bottom:7px;
    color:#22314f;
    text-shadow:none;
  }
  .sleepArt{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:-1px 0 5px;
    font-size:17px;
    filter: drop-shadow(0 6px 10px rgba(6,10,25,.28));
  }
  .sleepCounter{
    position:relative;
    z-index:1;
    margin:4px 0 7px;
    padding:10px 12px;
    border-radius:18px;
    text-align:center;
    background: rgba(255,255,255,.74);
    border:1px solid rgba(255,255,255,.46);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
  }
  .sleepCounterLabel{
    font-size:10px;
    font-weight:1000;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#42516f;
  }
  .sleepCounterValue{
    margin-top:3px;
    font-size:24px;
    line-height:1;
    font-weight:1000;
    color:#1d2944;
    text-shadow:none;
    font-variant-numeric: tabular-nums;
  }
  .sleepTimeMeta{
    margin-top:4px;
    min-height:16px;
    text-align:center;
    font-size:11px;
    font-weight:900;
    color:#23314e;
  }
  .sleepHint{
    margin-top:1px;
    text-align:center;
    font-size:10.5px;
    font-weight:900;
    color:#31415f;
  }
  .sleepActions{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
    margin-top:8px;
  }
  .action.sleepStart,
  .action.sleepEnd{
    border:0;
    color:#fff;
    padding:11px 8px;
    font-size:13px;
    box-shadow: 0 14px 26px rgba(10,14,31,.22);
  }
  .action.sleepStart{
    background: linear-gradient(135deg, #22c55e, #7ddf88);
  }
  .action.sleepEnd{
    background: linear-gradient(135deg, #ef4444, #ff7b7b);
  }
  .action[disabled]{
    cursor:not-allowed;
    opacity:.55;
    transform:none !important;
    filter:none !important;
    box-shadow:none;
  }

  .msg{ margin-top:10px; text-align:center; font-weight:900; font-size:13px; color:var(--muted); }
  .msg.good{ color: var(--good); }
  .msg.bad{ color: #ef4444; }
  .remRow3{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:8px;
    margin-top:8px;
  }
  .remCell label{
    margin-top:0;
    font-size:11px;
    line-height:1.1;
  }
  .remCell .input{
    padding:8px 8px;
    font-size:12px;
    border-radius:12px;
    font-weight:900;
  }
  .notifyCompact .action{
    padding:7px 6px;
    border-radius:12px;
    font-size:12px;
    line-height:1.1;
    min-height:0;
  }
  .notifyCompactBtn{
    padding:9px 10px;
    border-radius:12px;
    font-size:13px;
    line-height:1.1;
    margin-top:8px;
  }
  .nightQuick150{
    margin-left:auto;
    border-radius:999px;
    padding:9px 12px;
    font-size:13px;
    font-weight:900;
    line-height:1;
    min-width:0;
    white-space:nowrap;
  }
  .nightToggles{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:nowrap;
    overflow:visible;
  }

  .navrow{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap;
    overflow:hidden;
  }
  .navbtn{
    border:1px solid var(--line);
    background:white;
    border-radius:16px;
    padding:10px 12px;
    font-weight:1000;
    cursor:pointer;
    box-shadow: 0 10px 18px rgba(31,35,48,.06);
    transition: transform .16s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
    -webkit-tap-highlight-color: transparent;
    position:relative;
    overflow:hidden;
  }
  .navbtn:active{ transform: translateY(1px) scale(.985); }
  @media (hover:hover){
    .navbtn:hover{
      transform: translateY(-1px);
      border-color: rgba(108,99,255,.35);
      background: #fff;
      box-shadow: 0 12px 22px rgba(31,35,48,.10);
    }
  }
  input[type="date"].input{ padding:10px 12px; font-weight:900; }

  .list .item{
    padding:10px 0;
    border-bottom:1px dashed #e9eaf5;
    font-size:14px;
    font-weight:800;
    position:relative;
  }
  .list .item:last-child{border-bottom:0}
  .time{ display:inline-block; width:56px; color:var(--muted); font-weight:1000; font-size:12px; }

  .badges{ margin-top:8px; display:flex; flex-wrap:nowrap; overflow:hidden; gap:8px; }
  .badge{
    background:white;
    border:1px solid var(--line);
    border-radius:999px;
    padding:8px 10px;
    font-weight:1000;
    font-size:13px;
    box-shadow: 0 10px 18px rgba(31,35,48,.05);
    transition: transform .16s ease, box-shadow .18s ease;
  }
  @media (hover:hover){
    .badge:hover{ transform: translateY(-1px); box-shadow: 0 14px 26px rgba(31,35,48,.08); }
  }

  .hidden{display:none}

  .sprinkles{ display:flex;gap:6px;align-items:center; flex-wrap:wrap; justify-content:center; }
  .appVersion{
    margin: 0 auto;
    width: fit-content;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 10px;
    font-weight: 1000;
    color: #45516a;
    border: 1px solid rgba(255,255,255,.72);
    background: rgba(255,255,255,.62);
    box-shadow: 0 6px 12px rgba(31,35,48,.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .bottomTabs .appVersion{
    margin-top: 6px;
    margin-bottom: calc(env(safe-area-inset-bottom) * 0.2);
  }
  .dot{width:8px;height:8px;border-radius:50%}
  .d1{background:var(--primary)}
  .d2{background:var(--pink)}
  .d3{background:var(--mint)}
  .d4{background:var(--warn)}

  /* ====== Statystyka: kalendarz ====== */
  .cal-header{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    flex-wrap:nowrap;
    overflow:hidden;
  }
  .month-title{font-size:16px;font-weight:1000;letter-spacing:.2px;}
  .cal-grid{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:10px;
    margin-top:10px;
  }
  .dow{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em;padding:6px 6px 2px;}
  .day{
    min-height:76px;
    border-radius:16px;
    border:1px solid var(--line);
    background:white;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:6px;
    box-shadow: 0 10px 18px rgba(31,35,48,.05);
    cursor:pointer;
    transition: transform .12s ease, box-shadow .18s ease;
  }
  .day:hover{ transform: translateY(-1px); }
  .day.muted{
    opacity:.38;
    background: rgba(255,255,255,.55);
  }
  .day .num{font-weight:1000;font-size:12px;color:var(--muted);display:flex;justify-content:flex-start;align-items:center;}
  .mini{
    font-size:12px;
    font-weight:900;
    color: var(--ink);
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    overflow:visible;
  }
  .mini span{
    background: var(--chip);
    border:1px solid #e9ecff;
    border-radius:999px;
    padding:4px 7px;
    display:inline-flex;
    gap:6px;
    align-items:center;
  }

  .day.poopday{
    background: linear-gradient(135deg, #f3e1cf, #e7c6a2);
    border-color: rgba(150, 90, 40, .25);
  }
  .day.poopday .mini span{ background: rgba(255,255,255,.75); }

  /* --- Add view background based on today's Vit D --- */
  #viewAdd.add-ok, #viewAdd.add-miss{
    border-radius: var(--radius);
    padding: 12px;
    border: 1px solid rgba(31,35,48,.08);
    box-shadow: 0 18px 60px rgba(31,35,48,.08);
  }
  #viewAdd.add-ok{
    background: linear-gradient(135deg, rgba(184,255,208,.55), rgba(93,211,158,.28));
  }
  #viewAdd.add-miss{
    background: linear-gradient(135deg, rgba(255,226,159,.55), rgba(255,169,159,.28));
  }
  #viewAdd.add-ok .card, #viewAdd.add-miss .card{
    background: rgba(255,255,255,.78);
  }

  /* ====== Edit/Delete buttons ====== */
  .iconBtns{
    position:absolute;
    right:0;
    top:8px;
    display:inline-flex;
    gap:8px;
  }
  .iconBtn{
    border:1px solid var(--line);
    background:white;
    border-radius:12px;
    padding:6px 8px;
    font-weight:1000;
    cursor:pointer;
    box-shadow: 0 8px 14px rgba(31,35,48,.06);
    transition: transform .14s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .iconBtn:active{ transform: translateY(1px) scale(.985); }
  .iconBtn.danger{ border-color: rgba(239,68,68,.35); }
  @media (hover:hover){
    .iconBtn:hover{
      transform: translateY(-1px);
      box-shadow: 0 12px 18px rgba(31,35,48,.10);
      border-color: rgba(108,99,255,.32);
    }
    .iconBtn.danger:hover{
      border-color: rgba(239,68,68,.55);
      background: rgba(239,68,68,.06);
    }
  }

  /* ===== Vaccinations ===== */
  .vaxList .vaxItem{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding:12px 0;
    border-bottom:1px dashed #e9eaf5;
  }
  .vaxList .vaxItem:last-child{ border-bottom:0; }
  .vaxMeta{ flex:1; }
  .vaxMeta .when{ font-weight:1000; font-size:13px; color:var(--muted); }
  .vaxMeta .name{ font-weight:1000; font-size:15px; }
  .vaxMeta .sub{ font-weight:800; font-size:12px; color:var(--muted); margin-top:2px; }
  .shortcutItem{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:10px 0;
    border-bottom:1px dashed #e9eaf5;
  }
  .shortcutItem:last-child{
    border-bottom:0;
  }
  .shortcutMeta{
    flex:1;
    min-width:0;
  }
  .shortcutMetaMain{
    font-weight:1000;
    font-size:14px;
    color:var(--ink);
  }
  .shortcutMetaSub{
    margin-top:2px;
    font-size:12px;
    color:var(--muted);
    font-weight:800;
  }
  .shortcutActions{
    display:inline-flex;
    gap:6px;
    flex-shrink:0;
  }
  .vaxBtns{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
  }
  .vaxTopbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:10px 0 4px;
  }
  .vaxTopbar .msg{
    margin:0;
    text-align:left;
    font-size:12px;
  }
  .vaxAddBtn{
    width:42px;
    height:42px;
    min-width:42px;
    padding:0;
    border-radius:999px;
    font-size:24px;
    line-height:1;
    display:grid;
    place-items:center;
    background:
      radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,.34), rgba(255,255,255,0) 42%),
      linear-gradient(135deg, #0f9d58, #39d98a);
    box-shadow:
      0 14px 24px rgba(34,197,94,.22),
      inset 0 1px 0 rgba(255,255,255,.42);
  }
  .vaxEditBtn{
    border:1px solid rgba(108,99,255,.24);
    background: rgba(255,255,255,.92);
    color:#334155;
    border-radius:14px;
    padding:10px 11px;
    font-weight:1000;
    cursor:pointer;
    box-shadow: 0 10px 18px rgba(31,35,48,.06);
    line-height:1;
    -webkit-tap-highlight-color: transparent;
  }
  .vaxBtn{
    border:1px solid var(--line);
    background:white;
    border-radius:14px;
    padding:10px 12px;
    font-weight:1000;
    cursor:pointer;
    box-shadow: 0 10px 18px rgba(31,35,48,.06);
    white-space:nowrap;
    transition: transform .16s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
    -webkit-tap-highlight-color: transparent;
    position:relative;
    overflow:hidden;
  }
  .vaxBtn:active{ transform: translateY(1px) scale(.985); }
  .vaxBtn::after{
    content:"";
    position:absolute;
    inset:-25% auto -25% -64%;
    width:40%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0));
    transform: translateX(-150%) skewX(-18deg);
    opacity:0;
    pointer-events:none;
  }
  @media (hover:hover){
    .vaxEditBtn:hover{
      transform: translateY(-1px);
      border-color: rgba(108,99,255,.38);
      box-shadow: 0 14px 22px rgba(31,35,48,.10);
    }
    .vaxBtn:hover{
      transform: translateY(-1px);
      border-color: rgba(108,99,255,.33);
      box-shadow: 0 14px 22px rgba(31,35,48,.10);
    }
    .vaxBtn:hover::after{
      animation: btnShine .9s ease-out;
    }
  }
  .vaxBtn.done{
    border-color: rgba(34,197,94,.35);
    background: rgba(34,197,94,.10);
  }

  /* ===== VAX: done row highlight ===== */
  .vaxItem.done{
    background: linear-gradient(
      135deg,
      rgba(34,197,94,.18),
      rgba(34,197,94,.08)
    );
    border-radius: 16px;
    padding: 12px;
    border: 1px solid rgba(34,197,94,.35);
  }
  .vaxItem.done .when,
  .vaxItem.done .name,
  .vaxItem.done .sub{
    color: #166534;
  }
  .dietRules{
    display:grid;
    gap:8px;
  }
  .dietRule{
    font-size:13px;
    font-weight:900;
    color:var(--ink);
    padding:10px 12px;
    border-radius:12px;
    background: rgba(255,255,255,.72);
    border:1px solid rgba(148,163,184,.22);
  }
  .dietPlanList .vaxMeta .name{
    font-size:14px;
  }
  .vaxEditor{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px 12px calc(18px + env(safe-area-inset-bottom));
    overflow:auto;
    background: rgba(15,23,42,.34);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index:9998;
  }
  .vaxEditor.open{ display:flex; }
  .vaxEditorCard{
    width:min(100%, 460px);
    max-height:min(88vh, 760px);
    border-radius:28px;
    border:1px solid rgba(255,255,255,.62);
    box-shadow: 0 28px 70px rgba(15,23,42,.22);
    overflow:auto;
    background:
      radial-gradient(120% 100% at 0% 0%, rgba(251,194,235,.46), rgba(251,194,235,0) 48%),
      radial-gradient(120% 130% at 100% 0%, rgba(166,193,238,.48), rgba(166,193,238,0) 52%),
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,255,.98));
    transform: translateY(18px) scale(.98);
    opacity:0;
    transition: transform .24s ease, opacity .24s ease;
  }
  .vaxEditor.open .vaxEditorCard{
    transform: translateY(0) scale(1);
    opacity:1;
  }
  .vaxEditorHead{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:18px 18px 10px;
  }
  .vaxEditorEyebrow{
    font-size:11px;
    font-weight:1000;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#6b7280;
  }
  .vaxEditorTitle{
    margin-top:4px;
    font-size:22px;
    line-height:1.05;
    font-weight:1000;
    color:#1f2937;
  }
  .vaxEditorSub{
    margin-top:6px;
    font-size:12px;
    font-weight:900;
    line-height:1.4;
    color:#4b5563;
  }
  .vaxEditorClose{
    border:1px solid rgba(148,163,184,.28);
    background: rgba(255,255,255,.86);
    color:#334155;
    border-radius:999px;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    font-size:18px;
    font-weight:1000;
    cursor:pointer;
    box-shadow: 0 10px 18px rgba(31,35,48,.08);
    -webkit-tap-highlight-color: transparent;
  }
  .vaxEditorBody{
    padding:4px 18px 0;
  }
  .vaxEditorGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .vaxEditorField{
    margin-top:0;
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#667085;
  }
  .vaxEditorFieldFull{
    grid-column:1 / -1;
  }
  .vaxEditorInput{
    margin-top:7px;
    border-radius:18px;
    border:1px solid rgba(148,163,184,.22);
    background: rgba(255,255,255,.88);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
  }
  .vaxEditorActions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:16px 18px 18px;
  }
  .vaxEditorCancel{
    border:1px solid rgba(148,163,184,.22);
    background: rgba(255,255,255,.9);
    color:#334155;
    box-shadow: 0 10px 18px rgba(31,35,48,.06);
  }
  .vaxEditorSave{
    background: linear-gradient(135deg, #1d4ed8, #7c3aed);
    box-shadow: 0 16px 28px rgba(79,70,229,.22);
  }
  .vaxEditorHint{
    margin-top:8px;
    text-align:center;
    font-size:11px;
    font-weight:900;
    color:#64748b;
  }
  .vaxEditorTitleRow{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .vaxEditorBadge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:42px;
    height:42px;
    border-radius:14px;
    background: linear-gradient(135deg, rgba(29,78,216,.12), rgba(124,58,237,.14));
    color:#334155;
    font-size:20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
  }
  .positioningTimeline{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
  }
  .positioningChip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:999px;
    background: linear-gradient(135deg, rgba(214,244,255,.92), rgba(230,237,255,.92));
    border:1px solid rgba(148,163,184,.24);
    box-shadow: 0 8px 16px rgba(31,35,48,.06);
    font-size:13px;
    font-weight:1000;
    color:#334155;
  }
  .positioningChipTime{
    font-variant-numeric: tabular-nums;
    letter-spacing:.02em;
  }
  .positioningChipDel{
    border:0;
    background: rgba(255,255,255,.72);
    color:#ef4444;
    width:22px;
    height:22px;
    border-radius:999px;
    display:grid;
    place-items:center;
    cursor:pointer;
    font-size:12px;
    line-height:1;
    padding:0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
    -webkit-tap-highlight-color: transparent;
  }
  .positioningChipEdit{
    border:0;
    background: rgba(255,255,255,.72);
    color:#334155;
    width:22px;
    height:22px;
    border-radius:999px;
    display:grid;
    place-items:center;
    cursor:pointer;
    font-size:11px;
    line-height:1;
    padding:0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
    -webkit-tap-highlight-color: transparent;
  }
  .positioningMeta{
    font-size:12px;
    font-weight:900;
    color:var(--muted);
  }

  /* ===== Bottom dock — liquid glass ===== */
  .bottomTabs{
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.55),
        rgba(255,255,255,.18)
      ),
      linear-gradient(
        135deg,
        rgba(52,195,255,.35),
        rgba(108,99,255,.25)
      );

    border-top: 1px solid rgba(255,255,255,.55);

    backdrop-filter: blur(22px) saturate(200%);
    -webkit-backdrop-filter: blur(22px) saturate(200%);

    box-shadow:
      0 -18px 40px rgba(31,35,48,.18),
      inset 0 1px 0 rgba(255,255,255,.65);

    z-index: 9999;
  }

  /* ===== Bottom dock: 2 linie + NIE rozciągaj aktywnej pastylki ===== */
  .bottomTabs .pillTabs{
    display:grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    padding: 7px 8px;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 24px;
    box-shadow: 0 10px 24px rgba(31,35,48,.08);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    overflow: hidden;
    justify-content: center;
    max-width: 520px;
    margin: 0 auto;
  }
  .bottomTabs .pillTabs .tab{
    width:100%;
    min-width:0;
    min-height:54px;
    justify-self:stretch;
    padding: 7px 4px;
    gap: 3px;
    border-radius:14px;
    flex-direction:column;
    white-space:normal;
    text-align:center;
    line-height:1;
    font-size:10px;
  }
  .bottomTabs .pillTabs .tab .ico{
    font-size:16px;
  }
  .bottomTabs .pillTabs .tab .lbl{
    display:block;
    font-size:9.5px;
    font-weight:1000;
    letter-spacing:.01em;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* ===== Bottom dock: active tab peach ===== */
  .bottomTabs .pillTabs .tab.active{
    background: linear-gradient(135deg, #ffb7a5, #ff8fab);
    color: #3a1f1f;
    box-shadow:
      0 10px 22px rgba(255,143,171,.45),
      inset 0 1px 0 rgba(255,255,255,.65);
    animation: tabActivePulse 1.8s ease-in-out infinite;
  }

  /* ===== iPhone layout fix ===== */
  @media (max-width: 430px){
    .wrap{
      max-width:100%;
      padding:12px 12px 20px;
    }
    .top{
      align-items:flex-start;
      gap:10px;
      margin:6px 0 10px;
      padding:12px 12px 10px;
    }
    .logo{ width:40px;height:40px;border-radius:14px; }
    .title .name{ font-size:18px; }
    .title .sub{ font-size:11px; }

    .cal-header{
      flex-direction:column;
      align-items:stretch;
      gap:10px;
    }
    .cal-header .navrow{ justify-content:space-between; }
    .month-title{ font-size:15px; }
    .cal-grid{ gap:8px; }
    .day{ padding:8px; min-height:70px; }
    .mini{ gap:6px; }
    .mini span{ padding:4px 6px; font-size:12px; }
    .actions{
      gap:6px;
    }
    .actions .action{
      font-size:11px;
      padding:9px 4px;
    }
  }

  @media (max-width: 380px){
    .tab{ padding:9px 9px; font-size:12.5px; }
    .bottomTabs .pillTabs .tab{ padding: 6px 3px; min-height:52px; }
    .bottomTabs .pillTabs .tab .lbl{ font-size:9px; }
    .bottomTabs .pillTabs .tab .ico{ font-size:15px; }
  }

  /* ===== Micro animations keyframes ===== */
  @keyframes tabGlow{
    0%{ transform: translateY(0) scale(.98); filter: brightness(.98); }
    60%{ transform: translateY(-1px) scale(1.01); filter: brightness(1.02); }
    100%{ transform: translateY(0) scale(1); filter: none; }
  }
  @keyframes btnShine{
    0%{ transform: translateX(-150%) skewX(-18deg); opacity:0; }
    20%{ opacity:.35; }
    100%{ transform: translateX(300%) skewX(-18deg); opacity:0; }
  }
  @keyframes tabActivePulse{
    0%{ box-shadow: 0 10px 22px rgba(255,143,171,.40), inset 0 1px 0 rgba(255,255,255,.65); }
    50%{ box-shadow: 0 12px 24px rgba(255,143,171,.56), inset 0 1px 0 rgba(255,255,255,.72); }
    100%{ box-shadow: 0 10px 22px rgba(255,143,171,.40), inset 0 1px 0 rgba(255,255,255,.65); }
  }

  /* ====== Statystyka: ostatnie 14 dni (czytelnie na telefonie) ====== */
  .s14row{
    border:1px solid var(--line);
    background: rgba(255,255,255,.82);
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 10px 18px rgba(31,35,48,.06);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    cursor:pointer;
    transition: transform .12s ease, box-shadow .18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .s14row:active{ transform: translateY(1px) scale(.995); }
  @media (hover:hover){
    .s14row:hover{ transform: translateY(-1px); box-shadow: 0 14px 26px rgba(31,35,48,.09); }
  }
  .s14left{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width: 96px;
  }
  .s14date{
    font-weight:1000;
    font-size:13px;
    color: var(--ink);
    letter-spacing:.2px;
    line-height:1.1;
  }
  .s14dow{
    font-weight:900;
    font-size:11px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.12em;
  }
  .s14pills{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
    flex:1;
  }
  .s14pill{
    border-radius: 999px;
    padding: 8px 10px;
    font-weight:1000;
    font-size:13px;
    border: 1px solid rgba(31,35,48,.08);
    background: rgba(243,245,255,.85);
    box-shadow: 0 8px 14px rgba(31,35,48,.05);
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
  }
  .s14pill.milk{ background: linear-gradient(135deg, rgba(52,195,255,.30), rgba(255,255,255,.72)); }
  .s14pill.pee{  background: linear-gradient(135deg, rgba(79,172,254,.22), rgba(255,255,255,.72)); }
  .s14pill.poop{ background: linear-gradient(135deg, rgba(255,138,0,.18), rgba(255,255,255,.72)); }

  .weightStats{
    margin-top: 12px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.86);
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 10px 18px rgba(31,35,48,.06);
  }
  .weightStatsTop{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom: 8px;
  }
  .weightStatsTop .input{
    max-width: 180px;
    padding: 9px 10px;
    border-radius: 12px;
    font-size: 13px;
  }
  .weightStatsTop .navbtn{
    padding: 9px 11px;
    border-radius: 12px;
    font-size: 12px;
  }
  .weightChart{
    width:100%;
    min-height: 180px;
    border-radius: 14px;
    border:1px solid rgba(31,35,48,.08);
    background: linear-gradient(180deg, rgba(247,247,255,.86), rgba(240,251,255,.86));
    overflow: hidden;
    cursor: zoom-in;
  }
  .weightHint{
    margin-top: 6px;
    font-size: 11px;
    font-weight: 900;
    color: var(--muted);
  }
  .weightMeta{
    margin-top: 8px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 900;
    line-height: 1.35;
  }
  .weightCentile{
    margin-top: 6px;
    font-size: 13px;
    font-weight: 1000;
    color: var(--ink);
  }
  .chartZoom{
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(31,35,48,.55);
    backdrop-filter: blur(4px);
  }
  .chartZoom.open{ display:flex; }
  .chartZoomCard{
    width: min(1380px, 98vw);
    height: min(92vh, 920px);
    overflow: hidden;
    border-radius: 18px;
    border:1px solid rgba(255,255,255,.45);
    background: #fff;
    box-shadow: 0 24px 70px rgba(31,35,48,.35);
    padding: 10px;
    display:flex;
    flex-direction:column;
  }
  .chartZoomTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom: 8px;
    padding: 2px 2px 0;
  }
  .chartZoomClose{
    border:1px solid var(--line);
    background:#fff;
    border-radius:12px;
    padding:8px 10px;
    font-weight:1000;
    cursor:pointer;
  }
  .chartZoomBody{
    flex:1;
    border:1px solid rgba(31,35,48,.08);
    border-radius:14px;
    overflow:hidden;
    background: linear-gradient(180deg, rgba(247,247,255,.92), rgba(240,251,255,.92));
  }
  .chartZoomBody svg{
    display:block;
    width:100%;
    height:100%;
  }

  @media (max-width: 430px){
    .s14row{ padding: 10px; gap: 8px; }
    .s14left{ min-width: 90px; }
    .s14pill{ padding: 7px 9px; font-size: 13px; }
    .vaxTopbar{ align-items:stretch; flex-direction:column; }
    .vaxAddBtn{ width:42px; }
    .vaxEditorCard{ border-radius:24px; }
    .vaxEditorGrid{ grid-template-columns:1fr; }
    .vaxEditorActions{ grid-template-columns:1fr; }
  }


  /* ===== Mini hard refresh button ===== */
  .refreshMini{
    padding: 7px 12px;
    font-size: 12px;
    border-radius: 999px;
    opacity: .92;
  }
  .addVersionRow{
    display:flex;
    justify-content:center;
    margin: 2px 0 8px;
  }
  #nightModePanel{ display:none; }
  #nightSleepPanel{ display:none; }
  body.night-mode{
    background: linear-gradient(180deg, #090b11 0%, #0f1420 100%);
  }
  body.night-mode .top{
    border-color: rgba(148,158,180,.28);
    box-shadow: 0 16px 34px rgba(0,0,0,.34);
    background:
      linear-gradient(140deg, rgba(46,55,72,.95), rgba(27,33,46,.95));
  }
  body.night-mode .top::before{ opacity:.18; }
  body.night-mode .top::after{ opacity:.22; }
  body.night-mode .title .name{ color:#e8ecf8; }
  body.night-mode .title .sub{ color:#b7c0d6; }
  body.night-mode .topMoonBtn{
    background: rgba(15,20,31,.68);
    border-color: rgba(161,172,198,.35);
    color:#d9e2f7;
  }
  body.night-mode .topMoonBtn.on{
    background: linear-gradient(135deg, #111827, #1f2937);
    color:#ffe38d;
    border-color: rgba(148,163,184,.45);
  }
  body.night-mode #viewAdd,
  body.night-mode #viewAdd.add-ok,
  body.night-mode #viewAdd.add-miss{
    background: linear-gradient(165deg, rgba(17,23,35,.94), rgba(11,16,26,.96));
    border-color: rgba(124,143,176,.26);
    box-shadow: 0 18px 38px rgba(0,0,0,.40);
  }
  body.night-mode #viewAdd .card{
    background: rgba(19,27,41,.82);
    border-color: rgba(124,143,176,.30);
    box-shadow: 0 14px 30px rgba(0,0,0,.28);
  }
  body.night-mode #viewAdd h3{ color:#d7e0f5; }
  body.night-mode #viewAdd .msg{ color:#b8c4df; }
  body.night-mode #viewAdd .input{
    background: rgba(22,31,46,.92);
    border-color: rgba(124,143,176,.34);
    color:#e8eefb;
  }
  body.night-mode .bottomTabs{
    background:
      linear-gradient(180deg, rgba(20,26,37,.88), rgba(14,18,28,.92));
    border-top: 1px solid rgba(120,132,156,.38);
    box-shadow:
      0 -14px 34px rgba(0,0,0,.42),
      inset 0 1px 0 rgba(255,255,255,.05);
  }
  body.night-mode .bottomTabs .pillTabs{
    background: rgba(31,41,55,.58);
    border-color: rgba(148,163,184,.24);
    box-shadow: 0 10px 24px rgba(0,0,0,.30);
  }
  body.night-mode .bottomTabs .pillTabs .tab{
    color:#c9d2e6;
  }
  body.night-mode .bottomTabs .pillTabs .tab.active{
    background: linear-gradient(135deg, #4b5563, #6b7280);
    color:#eef2ff;
    box-shadow: 0 10px 20px rgba(0,0,0,.28);
    animation: none;
  }
  body.night-mode .bottomTabs .appVersion{
    color:#d1d9eb;
    border-color: rgba(148,163,184,.30);
    background: rgba(15,20,31,.62);
  }
  body.night-mode #nightModePanel .toggle span{
    background: rgba(28,36,52,.86);
    border-color: rgba(124,143,176,.35);
    color:#d8e1f4;
    box-shadow: 0 8px 16px rgba(0,0,0,.28);
  }
  body.night-mode #nightModePanel .toggle input:checked + span{
    color:#eef4ff;
    border-color: transparent;
    box-shadow: 0 10px 20px rgba(0,0,0,.34);
  }
  body.night-mode #nightPee:checked + span{
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
  }
  body.night-mode #nightPoop:checked + span{
    background: linear-gradient(135deg, #be185d, #db2777);
  }
  body.night-mode #nightModePanel .sleepCounter{
    background: linear-gradient(135deg, rgba(13,23,48,.68), rgba(30,41,59,.72));
    border-color: rgba(148,163,184,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 24px rgba(0,0,0,.28);
  }
  body.night-mode #nightModePanel .sleepCounterValue{
    color:#eaf0ff;
  }
  body.night-mode #nightModePanel .sleepCounterLabel,
  body.night-mode #nightModePanel .sleepTimeMeta,
  body.night-mode #nightModePanel .sleepHint{
    color:#b7c3e3;
  }
  body.night-mode #nightSleepPanel .sleepCounter{
    background: linear-gradient(135deg, rgba(13,23,48,.68), rgba(30,41,59,.72));
    border-color: rgba(148,163,184,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 24px rgba(0,0,0,.28);
  }
  body.night-mode #nightSleepPanel .sleepCounterValue{
    color:#eaf0ff;
  }
  body.night-mode #nightSleepPanel .sleepCounterLabel,
  body.night-mode #nightSleepPanel .sleepTimeMeta,
  body.night-mode #nightSleepPanel .sleepHint,
  body.night-mode #nightSleepPanel .msg,
  body.night-mode #nightSleepPanel h3{
    color:#b7c3e3;
  }
  body.night-mode #viewAdd > *{
    display:none !important;
  }
  body.night-mode #viewAdd > #nightModePanel{
    display:block !important;
  }
  body.night-mode #viewAdd > #nightSleepPanel{
    display:block !important;
  }



/* ===== Toggle pills: smaller on iPhone ===== */
@media (max-width: 430px){
  .toggles{
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-start;
    overflow:visible;
  }
  .toggle span{
    padding:8px 10px;
    font-size:12px;
    gap:6px;
  }
  .nightToggles{
    display:flex;
    gap:8px;
    flex-wrap:nowrap;
    overflow:visible;
  }
  .nightToggles .toggle span{
    padding:8px 10px;
    font-size:12px;
    gap:6px;
  }
  .nightToggles .nightQuick150{
    padding:8px 10px;
    font-size:12px;
  }
}



  /* ===== iPhone 17: keep 4 toggles in ONE row (no wrap) ===== */
  @media (max-width: 430px){
    .toggles{
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap:6px;
      overflow: visible;
    }
    .toggle span{
      width:100%;
      justify-content:center;
      padding:8px 6px;
      font-size:11px;
      gap:5px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
  }


  /* ===== Tap animation (click feedback) ===== */
  .tapPop{
    animation: tapPop 220ms ease-out;
  }
  @keyframes tapPop{
    0%{ transform: translateY(0) scale(1); }
    55%{ transform: translateY(1px) scale(.985); }
    100%{ transform: translateY(0) scale(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .tab,
    .btn,
    .action,
    .navbtn,
    .iconBtn,
    .vaxBtn{
      transition:none !important;
      animation:none !important;
    }
    .tab::after,
    .btn::after,
    .action::after,
    .vaxBtn::after{
      display:none !important;
    }
  }

  /* ===== Spectacular buttons ===== */
  .btn,
  .action,
  .navbtn,
  .vaxBtn,
  .iconBtn{
    transform-origin: center;
  }

  .btn{
    border: 1px solid rgba(255,255,255,.58);
    background:
      linear-gradient(135deg, #6b7dff 0%, #4fb9ff 48%, #42d8bc 100%);
    background-size: 160% 160%;
    animation: candyShift 8.4s ease-in-out infinite;
    letter-spacing: .01em;
    box-shadow:
      0 14px 24px rgba(66,96,224,.26),
      inset 0 1px 0 rgba(255,255,255,.55);
  }

  .action{
    border: 1px solid rgba(255,255,255,.64);
    border-radius: 16px;
    box-shadow:
      0 10px 18px rgba(31,35,48,.08),
      inset 0 1px 0 rgba(255,255,255,.58);
  }

  .navbtn,
  .vaxBtn,
  .iconBtn{
    background:
      linear-gradient(180deg, rgba(255,255,255,.97), rgba(245,249,255,.9));
    border: 1px solid rgba(148,172,255,.36);
    box-shadow:
      0 8px 15px rgba(31,35,48,.08),
      inset 0 1px 0 rgba(255,255,255,.7);
  }

  @media (hover:hover){
    .btn:hover,
    .action:hover,
    .navbtn:hover,
    .vaxBtn:hover,
    .iconBtn:hover{
      animation: buttonLift .28s ease-out forwards;
    }
  }

  @keyframes candyShift{
    0%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
    100%{ background-position: 0% 50%; }
  }
  @keyframes buttonLift{
    from{ transform: translateY(0) scale(1); }
    to{ transform: translateY(-2px) scale(1.015); }
  }

  #fxCanvas{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 12000;
  }