:root{
    --blue:#2F6FED;
    --blue-dark:#1E4FBF;
    --orange:#FF8C42;
    --orange-dark:#F2701C;
    --green:#3FAE54;
    --green-dark:#2E9143;
    --red:#E5484D;
    --purple:#8B5CF6;
    --pink:#EC66B4;
    --ink:#1E2A44;
    --ink-soft:#5B6B8C;
    --paper:#F3F7FC;
    --card:#FFFFFF;
    --line: #E4ECF7;
    --shadow: 0 10px 30px -12px rgba(30,42,68,0.18);
    --shadow-sm: 0 4px 14px -6px rgba(30,42,68,0.14);
    --r-lg: 26px;
    --r-md: 18px;
    --r-sm: 12px;
    --display: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif;
    --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0; height:100%; overscroll-behavior:none; background:#EAF6FF;}
  body{
    font-family:var(--body);
    background:#EDF2FA;
    color:var(--ink);
    height:100dvh;
    width:100vw;
    overflow:hidden;
    position:fixed;
    inset:0;
  }

  #app{ position:absolute; inset:0; background:var(--card); display:flex; flex-direction:column; overflow:hidden; transition: padding-top .25s ease; }
  body.has-install-banner #app{ padding-top: var(--install-banner-h, 52px); }

  .install-banner{
    position:fixed; top:0; left:0; right:0; z-index:110;
    background:linear-gradient(120deg,var(--blue),var(--blue-dark));
    color:#fff;
    display:flex; align-items:center; gap:10px;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
    font-family:var(--body); font-size:12.5px; font-weight:700;
    box-shadow:0 6px 20px -8px rgba(30,42,68,0.35);
    transform:translateY(-100%);
    transition:transform .3s cubic-bezier(.32,.72,0,1);
  }
  .install-banner.show{ transform:translateY(0); }
  .install-banner-text{ flex:1; line-height:1.3; }
  .install-banner-btn{
    background:#fff; color:var(--blue-dark); border:none; font-weight:800; font-size:12.5px;
    padding:8px 16px; border-radius:100px; cursor:pointer; white-space:nowrap;
  }
  .install-banner-close{ background:none; border:none; color:#fff; font-size:15px; cursor:pointer; padding:4px; opacity:0.85; }

  .pull-refresh-toast{
    position:fixed; top:calc(env(safe-area-inset-top) + 12px); left:50%;
    transform:translateX(-50%) translateY(-70px);
    background:#fff; color:var(--blue-dark); border-radius:100px; padding:9px 18px;
    font-size:12.5px; font-weight:800; box-shadow:var(--shadow);
    display:flex; align-items:center; gap:7px; z-index:150;
    transition:transform .22s ease, opacity .22s ease; opacity:0; pointer-events:none;
  }
  .pull-refresh-toast.visible{ opacity:1; transform:translateX(-50%) translateY(0); }
  .pull-refresh-toast .pr-spin{ display:inline-block; font-size:14px; }
  .pull-refresh-toast.spinning .pr-spin{ animation: prSpin .7s linear infinite; }
  @keyframes prSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

  .install-guide-hero{ font-size:44px; text-align:center; margin-bottom:6px; }
  .install-guide-lead{ font-size:13.5px; color:var(--ink-soft); margin:0 0 16px; line-height:1.4; }
  .install-step{
    display:flex; align-items:flex-start; gap:12px;
    background:#F8FAFE; border:1px solid var(--line); border-radius:14px;
    padding:12px 14px; margin-bottom:10px; font-size:13.5px; color:var(--ink); line-height:1.4;
  }
  .install-step-num{
    width:24px; height:24px; border-radius:50%; flex:none;
    background:var(--blue); color:#fff; font-weight:800; font-size:12.5px;
    display:flex; align-items:center; justify-content:center;
  }
  .install-step-icon{ font-size:15px; }
  .install-guide-close{
    position:absolute; top:14px; right:16px; background:none; border:none;
    font-size:15px; color:var(--ink-soft); cursor:pointer; padding:6px;
  }

  /* Full-screen in-app viewer (Learn & Grow: videos + comics). Deliberately
     covers the entire viewport rather than a partial bottom sheet, so the
     video/PDF gets maximum space — but the header bar with its Close button
     is a fixed, non-scrolling part of THIS layer, always on top, so there's
     always a way back to the app even though the content looks "fullscreen". */
  .full-viewer{
    position:fixed; inset:0; z-index:300; background:#0B0E14;
    display:flex; flex-direction:column;
    transform:translateY(100%);
    transition:transform .28s cubic-bezier(.32,.72,0,1);
  }
  .full-viewer.open{ transform:translateY(0); }
  .full-viewer-header{
    flex:none; display:flex; align-items:center; gap:10px;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
    background:#111722; color:#fff;
  }
  .full-viewer-close{
    background:rgba(255,255,255,0.16); border:none; color:#fff; font-weight:800; font-size:13px;
    padding:9px 16px; border-radius:100px; cursor:pointer; flex:none;
  }
  .full-viewer-close:active{ background:rgba(255,255,255,0.28); }
  .full-viewer-frame{ flex:1; background:#fff; min-height:0; }
  .full-viewer-frame iframe{ width:100%; height:100%; border:0; display:block; }


  .screen{ height:100%; display:flex; flex-direction:column; }
  .scroll{ flex:1; overflow-y:auto; -ms-overflow-style:none; scrollbar-width:none; }
  .scroll::-webkit-scrollbar{display:none;}

  .statusbar{
    display:flex; justify-content:space-between; align-items:center;
    padding: max(14px, env(safe-area-inset-top)) 22px 4px; font-size:13px; font-weight:800; color:var(--ink);
    flex:none;
  }
  .statusbar .battery{ width:22px; height:11px; border:1.4px solid var(--ink); border-radius:3px; position:relative; }
  .statusbar .battery::after{content:"";position:absolute;inset:1.5px;width:70%;background:var(--ink);border-radius:1px;}

  .hero{ padding: max(34px, calc(env(safe-area-inset-top) + 20px)) 24px 26px; text-align:center; color:#fff; position:relative; border-radius: 0 0 26px 26px; }
  .hero .icon-badge{
    width:56px;height:56px;border-radius:50%;
    background:rgba(255,255,255,0.22); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 14px; font-size:24px;
  }
  .hero h2{font-family:var(--display); font-weight:700; font-size:22px; margin:0 0 6px;}
  .hero p{margin:0; font-size:13px; opacity:.92;}

  .body-pad{padding:18px 20px 110px;}

  .card{
    background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
    padding:16px; box-shadow:var(--shadow-sm); margin-bottom:14px; position:relative;
  }
  .row{display:flex; align-items:center; gap:12px;}
  .icon-circle{
    width:38px;height:38px;border-radius:11px; flex:none;
    display:flex; align-items:center; justify-content:center; font-size:17px;
  }
  .rowtext strong{display:block; font-size:14px; color:var(--ink);}
  .rowtext span{display:block; font-size:11.5px; color:var(--ink-soft);}
  .chev{margin-left:auto; color:#B9C4D8; font-size:16px;}

  .btn{
    display:block; width:100%; text-align:center; border:none; cursor:pointer;
    font-family:var(--body); font-weight:800; font-size:14.5px; color:#fff;
    padding:14px; border-radius:100px;
  }
  .btn:active{ transform:scale(0.98); }
  .btn-primary{background:linear-gradient(120deg,var(--orange),var(--orange-dark)); box-shadow:0 10px 20px -8px rgba(242,112,28,0.55);}
  .btn-outline{background:#fff; color:var(--blue); border:1.6px solid var(--blue); font-weight:800;}
  .pill{
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 12px; border-radius:100px; font-size:11.5px; font-weight:800;
  }
  .pill-green{background:#E6F7EA; color:var(--green-dark);}
  .pill-orange{background:#FFEFE1; color:var(--orange-dark);}
  .pill-blue{background:#E7EFFE; color:var(--blue-dark);}
  .pill-red{background:#FDE7E8; color:#C22A2F;}
  .pill-purple{background:#F1EAFE; color:#6D3FD1;}
  .pillmuted{background:#F1F4FA; color:var(--ink-soft);}

  .toggle{width:42px;height:24px;border-radius:100px;background:var(--ink); position:relative; flex:none; cursor:pointer; transition:background .15s ease;}
  .toggle::after{content:"";position:absolute; top:2px; right:2px; width:20px;height:20px;background:#fff;border-radius:50%; transition:all .15s ease;}
  .toggle.off{background:#DCE3F0;}
  .toggle.off::after{left:2px; right:auto;}

  .sectiontitle{font-family:var(--display); font-weight:700; font-size:15px; margin:2px 0 10px; color:var(--ink);}

  .dots{display:flex; gap:7px; justify-content:center; margin-top:26px;}
  .dots i{
    width:8px; height:8px; border-radius:50%; background:var(--orange);
    animation: dotPulse 1.2s ease-in-out infinite;
  }
  .dots i:nth-child(1){ animation-delay: 0s; }
  .dots i:nth-child(2){ animation-delay: 0.2s; }
  .dots i:nth-child(3){ animation-delay: 0.4s; }
  @keyframes dotPulse{
    0%, 80%, 100% { opacity:0.3; transform:scale(0.75); }
    40% { opacity:1; transform:scale(1.15); }
  }

  .onb-dots{ display:flex; gap:6px; align-items:center; }
  .onb-dot{ width:8px; height:8px; border-radius:100px; background:#CFE0F5; transition:all .2s ease; }
  .onb-dot.active{ width:22px; background:var(--orange); }
  .onb-skip{ font-size:13px; font-weight:800; color:var(--blue); cursor:pointer; }
  .onb-icon{
    width:70px; height:70px; border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center;
    font-size:28px; color:#fff; box-shadow:0 10px 20px -8px rgba(47,111,237,0.45);
  }
  .onb-title{ font-family:var(--display); font-weight:700; font-size:18px; color:var(--ink); text-align:center; margin:0 0 5px; line-height:1.2; }
  .onb-desc{ font-size:12.5px; color:var(--ink-soft); text-align:center; line-height:1.4; margin:0; max-width:250px; }
  .onb-back{
    background:#E7EDF8; color:var(--ink-soft); border:none; font-weight:800; font-size:13px;
    padding:10px 18px; border-radius:100px; cursor:pointer;
  }
  .onb-back.disabled{ opacity:0.45; pointer-events:none; }

  .field{margin-bottom:14px;}
  .field label{display:block; font-size:12.5px; font-weight:800; color:var(--ink-soft); margin-bottom:6px;}
  .input{
    width:100%; border:1.4px solid var(--line); border-radius:14px; padding:12px 14px;
    font-family:var(--body); font-size:14px; color:var(--ink); background:#F8FAFE;
  }
  select.input{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235B6B8C'><path d='M5 8l5 5 5-5z'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; }

  .footnote{ text-align:center; font-size:11px; color:var(--ink-soft); padding:10px 20px 4px; }

  .chart{height:130px; position:relative; margin:10px 0 4px;}
  .chart svg{width:100%; height:100%; display:block;}

  .thumb{
    width:52px; height:52px; border-radius:14px; flex:none;
    display:flex; align-items:center; justify-content:center; font-size:22px;
  }

  .progress{height:8px; background:#E7EDF8; border-radius:100px; overflow:hidden; margin-top:6px;}
  .progress > div{height:100%; background:linear-gradient(90deg,var(--orange),var(--orange-dark)); border-radius:100px;}

  .ring-wrap{display:flex; justify-content:center; margin:14px 0 6px;}
  .ring{width:150px;height:150px; border-radius:50%; position:relative;}
  .ring .center{
    position:absolute; inset:12px; background:#fff; border-radius:50%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  .ring .center b{font-family:var(--display); font-weight:700; font-size:26px; color:var(--ink);}
  .ring .center span{font-size:10.5px; color:var(--ink-soft);}

  .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
  .grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
  .stat{
    background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px 8px; text-align:center;
  }
  .stat b{display:block; font-family:var(--display); font-weight:700; font-size:18px;}
  .stat span{font-size:10.5px; color:var(--ink-soft);}

  .cat-card{
    background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; text-align:center;
  }
  .cat-card .cat-icon{ font-size:22px; margin-bottom:4px; }
  .cat-card .cat-label{ font-size:11px; font-weight:800; color:var(--ink-soft); margin-bottom:2px; }
  .cat-card .cat-value{ font-family:var(--display); font-weight:700; font-size:19px; }

  .combobox-wrap{ position:relative; }
  .combobox-suggestions{
    position:absolute; left:0; right:0; top:calc(100% + 4px);
    background:#fff; border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--shadow); max-height:220px; overflow-y:auto; z-index:20;
  }
  .combobox-item{
    display:flex; align-items:center; gap:10px; padding:10px 14px;
    cursor:pointer; font-size:13.5px; font-weight:700; color:var(--ink);
  }
  .combobox-item:active{ background:#F1F4FA; }
  .combobox-item .ci-icon{ font-size:16px; }
  .combobox-item .ci-carbs{ margin-left:auto; font-size:11px; color:var(--ink-soft); font-weight:800; }
  .combobox-empty{ padding:12px 14px; font-size:12.5px; color:var(--ink-soft); text-align:center; }

  .cat-badge{
    display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:100px;
    font-size:10.5px; font-weight:800;
  }

  .banner-note{
    background:#FFF7E9; border:1px solid #FBE3AE; border-radius:14px; padding:12px 14px; font-size:12px; color:#8A5A00;
  }

  /* segmented tab control (Login/SignUp, Daily/Weekly/Monthly, Videos/Articles/Tips) */
  .segtabs{ display:flex; background:#EEF2FA; padding:5px; border-radius:14px; margin:0 0 16px; gap:2px; }
  .segtab{ flex:1; text-align:center; padding:9px 4px; border-radius:10px; font-size:12.5px; font-weight:800; color:var(--ink-soft); cursor:pointer; user-select:none; }
  .segtab.active{ background:#fff; color:var(--blue-dark); box-shadow:var(--shadow-sm); }

  .addcircle{ width:44px;height:44px;border-radius:50%; background:var(--orange); color:#fff; border:none; font-size:20px; cursor:pointer; flex:none; }
  .addcircle:active{ transform:scale(0.93); }

  .eyebtn{ position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; font-size:16px; cursor:pointer; padding:4px; }

  .slider{ width:100%; margin:8px 0 4px; accent-color:var(--orange-dark); height:6px; }

  .removeBtn{ background:none; border:none; color:#C6D0E3; font-size:13px; cursor:pointer; padding:2px 4px; }
  .removeBtn:hover{ color:var(--red); }

  .popularFood, .treatBtn{ transition:transform .1s ease, box-shadow .15s ease; }
  .popularFood:active, .treatBtn:active{ transform:scale(0.95); }

  .navRow{ cursor:pointer; }
  .favBtn, .learnFavBtn{ transition:transform .15s ease; }
  .favBtn:active, .learnFavBtn:active{ transform:scale(1.3); }

  .miniLinkBtn{
    background:none; border:none; font-family:var(--body); font-weight:800; font-size:12.5px;
    color:var(--blue); cursor:pointer; padding:4px 2px;
  }
  .miniLinkBtn:active{ opacity:0.6; }

  .toneRow{ transition:background .15s ease; }
  .toneRow:active{ background:#F1F4FA; }
  .toneRow.selected{ background:#E7EFFE; }
  .toneRow.selected .icon-circle{ background:#fff !important; }
  .toneCheck{ font-size:16px; color:var(--blue); }

  /* toast */
  .toast{
    position:fixed; left:50%; bottom:96px; transform:translate(-50%,16px);
    background:var(--ink); color:#fff; padding:11px 20px; border-radius:100px;
    font-size:13px; font-weight:700; font-family:var(--body);
    opacity:0; pointer-events:none; transition:all .25s ease; z-index:200;
    box-shadow:var(--shadow); max-width:82vw; text-align:center;
  }
  .toast.show{ opacity:1; transform:translate(-50%,0); }

  /* ===================== Floating nav trigger ===================== */
  .fab{
    position:fixed; right:18px; bottom: max(48px, calc(env(safe-area-inset-bottom) + 26px));
    width:54px; height:54px; border-radius:50%;
    background:linear-gradient(135deg,var(--blue),var(--blue-dark));
    color:#fff; border:none; display:flex; align-items:center; justify-content:center;
    font-size:22px; box-shadow:0 12px 24px -8px rgba(47,111,237,0.65);
    z-index:80; cursor:pointer;
  }
  .fab:active{ transform:scale(0.94); }

  /* ===================== Select Screen sheet ===================== */
  .overlay{
    position:fixed; inset:0; background:rgba(15,23,42,0.42);
    opacity:0; pointer-events:none; transition:opacity .22s ease; z-index:90;
  }
  .overlay.open{ opacity:1; pointer-events:auto; }

  .sheet{
    position:fixed; left:0; right:0; bottom:0;
    background:#fff; border-radius:26px 26px 0 0;
    box-shadow:0 -18px 40px -14px rgba(15,23,42,0.35);
    transform:translateY(100%);
    transition:transform .28s cubic-bezier(.32,.72,0,1);
    z-index:95;
    max-height:82vh;
    display:flex; flex-direction:column;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .sheet.open{ transform:translateY(0); }
  .sheet-handle{ width:40px; height:5px; border-radius:100px; background:#DCE3F0; margin:10px auto 6px; }
  .sheet-title{
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--display); font-weight:700; font-size:17px; padding:6px 20px 12px;
    border-bottom:1px solid var(--line);
  }
  .sheet-list{ overflow-y:auto; padding:10px 12px 6px; }
  .sheet-group{
    font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
    color:var(--ink-soft); margin:14px 10px 6px;
  }
  .sheet-group:first-child{ margin-top:6px; }
  .sheet-item{
    display:flex; align-items:center; gap:12px; width:100%;
    border:none; background:transparent; text-align:left;
    padding:12px 12px; border-radius:16px; cursor:pointer;
    font-family:var(--body); font-weight:700; font-size:14.5px; color:var(--ink);
  }
  .sheet-item .ic{
    width:34px; height:34px; border-radius:10px; flex:none;
    display:flex; align-items:center; justify-content:center; font-size:16px;
    background:#F1F4FA;
  }
  .sheet-item.active{
    background:linear-gradient(120deg, rgba(47,111,237,0.12), rgba(139,92,246,0.10));
    color:var(--blue-dark);
  }
  .sheet-item.active .ic{ background:#fff; }