:root {
      --ink: #182033;
      --muted: #6d7485;
      --line: #e8e6e2;
      --pink: #cb3c7a;
      --pink2: #fff0f6;
      --blue: #568edc;
      --blue2: #eef5ff;
      --green: #198754;
      --green2: #eaf8f1;
      --shadow: 0 18px 55px #2d304018
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      background: linear-gradient(145deg, #fff8ef, #f5fbff 50%, #fff5fa);
      color: var(--ink);
      font: 15px/1.55 Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif
    }

    button,
    input,
    select {
      font: inherit
    }

    button {
      cursor: pointer
    }

    a {
      color: #245fb4
    }

    .page {
      width: min(1160px, calc(100% - 32px));
      margin: auto;
      padding: 30px 0 55px
    }

    .hero,
    .card {
      border: 1px solid #ffffffcc;
      border-radius: 24px;
      background: #fffffff0;
      box-shadow: var(--shadow)
    }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 36px
    }

    .hero-top {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px
    }

    .hero-copy {
      max-width: 720px
    }

    .hero-copy p {
      max-width: 620px;
      margin-top: 8px
    }

    .hero-time {
      min-width: 220px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 10px 24px #2d304012
    }

    .hero-time-label {
      display: block;
      color: var(--pink);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase
    }

    .hero-time strong,
    .hero-time small {
      display: block
    }

    .hero-time strong {
      margin-top: 6px;
      font-size: 16px;
      line-height: 1.35
    }

    .hero-time small {
      margin-top: 5px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35
    }

    .hero:after {
      content: "";
      position: absolute;
      width: 230px;
      height: 230px;
      right: -75px;
      top: -100px;
      border-radius: 50%;
      background: #ffd6e6
    }

    .hero h1 {
      position: relative;
      z-index: 1;
      margin: 0 0 10px;
      font-size: clamp(34px, 5vw, 56px);
      line-height: 1.08;
      letter-spacing: -.04em
    }

    .hero p {
      position: relative;
      z-index: 1;
      max-width: 720px;
      margin: 0;
      color: var(--muted)
    }

    .export-time {
      margin: 0 0 12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700
    }

    .nav {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 18px
    }

    .nav a {
      padding: 8px 13px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: var(--ink);
      text-decoration: none;
      font-weight: 800;
      font-size: 13px
    }

    .grid {
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      gap: 20px;
      margin-top: 20px
    }

    .card {
      padding: 25px;
      border-color: #e4e1dc
    }

    .title {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px
    }

    .title h2 {
      margin: 0;
      font-size: 23px
    }

    .title p {
      margin: 3px 0 0;
      color: var(--muted);
      font-size: 12px
    }

    .pill {
      height: max-content;
      padding: 5px 9px;
      border-radius: 999px;
      background: var(--blue2);
      color: #326dbb;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap
    }

    .fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px
    }

    label,
    legend {
      display: block;
      color: #495166;
      font-size: 13px;
      font-weight: 800
    }

    fieldset {
      min-width: 0;
      margin: 0;
      padding: 0;
      border: 0
    }

    .full {
      grid-column: 1/-1
    }

    input,
    select {
      width: 100%;
      margin-top: 6px;
      padding: 11px 12px;
      border: 1px solid #d8dce4;
      border-radius: 11px;
      background: #fff;
      color: var(--ink);
      outline: 0
    }

    input:focus,
    select:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 4px #568edc20
    }

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

    .sex input {
      position: absolute;
      opacity: 0
    }

    .sex span {
      display: block;
      padding: 10px;
      text-align: center;
      border: 1px solid #d8dce4;
      border-radius: 11px;
      background: #fff;
      color: #60687a
    }

    .sex input:checked+span {
      border-color: var(--pink);
      background: var(--pink2);
      color: #a61f5a;
      font-weight: 900
    }

    .primary {
      width: 100%;
      margin-top: 17px;
      padding: 13px;
      border: 0;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--pink), #e45d92);
      color: #fff;
      font-weight: 900;
      box-shadow: 0 10px 22px #cb3c7a35
    }

    .primary:hover {
      transform: translateY(-1px)
    }

    .metrics {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 11px
    }

    .metric {
      padding: 14px;
      border: 1px solid #eceef3;
      border-radius: 15px;
      background: #f8f9fb
    }

    .metric.good {
      border-color: #cdebdc;
      background: var(--green2)
    }

    .metric small {
      display: block;
      color: var(--muted);
      font-weight: 700
    }

    .metric strong {
      display: block;
      margin: 1px 0 -2px;
      font-size: 27px
    }

    .metric span {
      color: var(--muted);
      font-size: 11px
    }

    .track {
      position: relative;
      height: 10px;
      margin: 21px 0 7px;
      border-radius: 999px;
      background: linear-gradient(90deg, #70a6e9 0 25%, #56b98a 25% 55%, #f1ba54 55% 75%, #df6574 75%)
    }

    .marker {
      position: absolute;
      top: 50%;
      width: 17px;
      height: 17px;
      border: 3px solid #fff;
      border-radius: 50%;
      background: var(--ink);
      box-shadow: 0 2px 7px #0004;
      transform: translate(-50%, -50%)
    }

    .track-labels {
      display: flex;
      justify-content: space-between;
      color: var(--muted);
      font-size: 10px
    }

    .summary {
      margin: 16px 0 0;
      padding: 13px;
      border-left: 4px solid var(--blue);
      border-radius: 0 11px 11px 0;
      background: var(--blue2);
      color: #35455f;
      font-size: 13px
    }

    .actions {
      display: flex;
      gap: 8px;
      margin-top: 13px
    }

    .secondary,
    .swap,
    .load {
      padding: 8px 11px;
      border: 1px solid #dfe2e8;
      border-radius: 10px;
      background: #fff;
      color: #3d4b61;
      font-weight: 800
    }

    .formula {
      margin-top: 13px;
      padding-top: 13px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 11px
    }

    .food-card {
      margin-top: 20px;
      padding: 0;
      overflow: hidden
    }

    .food-head {
      padding: 25px 25px 17px;
      background: linear-gradient(120deg, #fff, #fff7fb)
    }

    .converter {
      display: grid;
      grid-template-columns: 1fr 145px 175px;
      gap: 10px;
      align-items: end;
      margin-top: 16px;
      padding: 14px;
      border: 1px solid #f1dda8;
      border-radius: 15px;
      background: #fff8e4
    }

    .converter input {
      margin-top: 5px
    }

    .food-output {
      display: flex;
      min-height: 43px;
      align-items: center;
      justify-content: center;
      padding: 9px;
      border-radius: 11px;
      background: #fff;
      color: #9b5f00;
      font-weight: 900
    }

    .toolbar {
      display: grid;
      grid-template-columns: 1fr 185px 170px;
      gap: 10px;
      padding: 0 25px 17px
    }

    .toolbar input,
    .toolbar select {
      margin: 0
    }

    .table-wrap {
      overflow: auto;
      border-top: 1px solid var(--line)
    }

    table {
      width: 100%;
      min-width: 790px;
      border-collapse: collapse
    }

    th,
    td {
      padding: 12px 17px;
      border-bottom: 1px solid #eeece8;
      text-align: left;
      font-size: 13px
    }

    th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #faf9f7;
      color: #606779;
      font-size: 11px
    }

    td:nth-child(3),
    th:nth-child(3),
    td:nth-child(5),
    th:nth-child(5) {
      text-align: right
    }

    tbody tr:hover {
      background: #fff8fb
    }

    .food-name {
      font-weight: 900
    }

    .tag {
      display: inline-block;
      padding: 3px 7px;
      border-radius: 999px;
      background: #f0f2f6;
      color: #626a7b;
      font-size: 10px;
      font-weight: 800
    }

    .source {
      color: var(--muted);
      font-size: 10px
    }

    .swap {
      padding: 5px 8px;
      font-size: 11px
    }

    .load {
      display: block;
      margin: 17px auto 22px;
      border-radius: 999px
    }

    .notice {
      margin-top: 20px;
      padding: 18px 22px;
      border: 1px solid #ebdfbb;
      border-radius: 17px;
      background: #fffaf0;
      color: #635330;
      font-size: 12px
    }

    .sources {
      margin-top: 20px
    }

    .sources h2 {
      margin-top: 0;
      font-size: 20px
    }

    .sources ul {
      margin: 0;
      padding-left: 19px;
      color: var(--muted);
      font-size: 12px
    }

    .sources li+li {
      margin-top: 6px
    }

    footer {
      margin-top: 22px;
      text-align: center;
      color: #7d8491;
      font-size: 11px
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0)
    }

    @media(max-width:830px) {
      .grid {
        grid-template-columns: 1fr
      }

      .converter,
      .toolbar {
        grid-template-columns: 1fr 1fr
      }

      .food-output {
        grid-column: 1/-1
      }

      .page {
        width: min(100% - 20px, 1160px)
      }
    }

    


    .daily-card {
      margin-top: 20px
    }

    .daily-target {
      display: grid;
      grid-template-columns: minmax(210px, 270px) minmax(210px, 270px) 1fr;
      gap: 14px;
      align-items: end;
      padding: 14px;
      border-radius: 15px;
      background: var(--blue2)
    }

    .daily-target p {
      margin: 0;
      color: #4a5d78;
      font-size: 12px
    }

    .daily-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 16px
    }

    .daily-panel {
      min-width: 0;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: #fff
    }

    .daily-panel h3 {
      margin: 0 0 4px
    }

    .daily-panel>p {
      margin: 0;
      color: var(--muted);
      font-size: 11px
    }

    .daily-card .converter {
      grid-template-columns: 1fr 110px;
      margin-top: 12px;
      padding: 11px
    }

    .daily-card .meal-box {
      padding: 11px
    }

    .exercise-adder {
      display: grid;
      grid-template-columns: 1fr 100px 105px;
      gap: 10px;
      align-items: end;
      margin-top: 12px;
      padding: 11px;
      border: 1px solid #cfe7db;
      border-radius: 15px;
      background: var(--green2)
    }

    .exercise-add {
      min-height: 43px;
      border: 0;
      border-radius: 11px;
      background: var(--green);
      color: #fff;
      font-weight: 900
    }

    .exercise-summary {
      margin-top: 11px;
      padding: 11px 13px;
      border-radius: 11px;
      background: var(--green2);
      color: #315f4a;
      font-size: 12px
    }

    .budget-metrics {
      grid-template-columns: repeat(4, 1fr);
      margin-top: 16px
    }

    .budget-metrics .metric strong {
      font-size: 24px
    }

    .metric.remaining {
      border-color: #f0cddc;
      background: var(--pink2)
    }

    .metric.remaining.negative {
      border-color: #efc6c6;
      background: #fff1f1
    }

    .recommendations {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--line)
    }

    .recommendations h3 {
      margin: 0
    }

    .recommendations>p {
      margin: 2px 0 10px;
      color: var(--muted);
      font-size: 11px
    }

    .recommend-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px
    }

    .recommend-card {
      padding: 13px;
      border: 1px solid #e5e7ec;
      border-radius: 14px;
      background: #fafbfc
    }

    .recommend-card h4 {
      margin: 0
    }

    .recommend-card ul {
      margin: 7px 0;
      padding-left: 18px;
      color: #596174;
      font-size: 12px
    }

    .recommend-card strong {
      color: #a61f5a
    }

    .recommend-card button {
      width: 100%;
      padding: 7px;
      border: 1px solid #e1cade;
      border-radius: 9px;
      background: #fff;
      color: #a61f5a;
      font-weight: 900
    }

    .recommend-actions {
      display: grid;
      grid-template-columns: 90px 1fr;
      gap: 7px
    }

    .recommend-card .recommend-swap {
      color: #526078
    }

    @media(max-width:830px) {
      .daily-layout {
        grid-template-columns: 1fr
      }

      .budget-metrics {
        grid-template-columns: 1fr 1fr
      }

      .recommend-grid {
        grid-template-columns: 1fr
      }
    }

    



    

    

    

    .sex input {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      border: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
      opacity: 0
    }

    .food-search-label {
      grid-column: 1/-1
    }

    .recommend-actions {
      align-items: start
    }

    


    /* ===== 2026 dashboard redesign ===== */
    :root {
      --ink: #172033;
      --muted: #778094;
      --line: #e5e8ee;
      --panel: #ffffff;
      --panel-soft: #f7f8fb;
      --pink: #c83b77;
      --blue: #4f83d9;
      --shadow-soft: 0 12px 32px rgba(35, 43, 60, .08);
    }
    html { scroll-padding-top: 24px; }
    body {
      background:
        radial-gradient(circle at 6% 8%, rgba(255, 224, 236, .6), transparent 25%),
        radial-gradient(circle at 92% 12%, rgba(220, 237, 255, .7), transparent 27%),
        #f5f6f8;
      color: var(--ink);
    }
    .page-shell {
      width: min(1440px, calc(100% - 40px));
      margin: 0 auto;
      padding: 22px 0 42px;
      display: grid;
      grid-template-columns: 248px minmax(0, 1fr);
      gap: 24px;
      align-items: start;
    }
    .side-nav {
      position: sticky;
      top: 18px;
      min-height: calc(100vh - 36px);
      padding: 20px 16px;
      border: 1px solid #e0e4ea;
      border-radius: 24px;
      background: rgba(255,255,255,.9);
      box-shadow: var(--shadow-soft);
      display: flex;
      flex-direction: column;
    }
    .brand-block { display:flex; align-items:center; gap:11px; padding: 4px 6px 22px; }
    .brand-mark { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; overflow:hidden; border-radius:12px; background:linear-gradient(135deg,#172033,#41506a); color:white; font-weight:900; letter-spacing:-.04em; }
    .brand-mark img { width:100%; height:100%; max-width:100%; max-height:100%; display:block; object-fit:contain; }
    .brand-block strong { display:block; font-size:14px; letter-spacing:.02em; }
    .brand-block span { display:block; margin-top:2px; color:#9aa2b2; font-size:9px; font-weight:900; letter-spacing:.12em; }
    .side-label { padding:0 10px 8px; color:#a0a7b5; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
    .side-links { display:grid; gap:6px; }
    .side-links a { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; align-items:center; padding:11px 10px; border-radius:15px; text-decoration:none; color:#5f6879; border:1px solid transparent; transition:.18s ease; }
    .side-links a:hover { background:#f5f7fa; border-color:#e7eaf0; color:var(--ink); }
    .side-links a.is-active { background:#fff3f8; color:#9f2557; border-color:#f0d2df; }
    .side-num { font-size:10px; font-weight:900; color:#aab1bf; align-self:start; padding-top:2px; }
    .side-links a.is-active .side-num { color:var(--pink); }
    .side-links b { display:block; font-size:13px; line-height:1.25; }
    .side-links small { display:block; margin-top:3px; font-size:9px; color:#9aa2af; line-height:1.25; }
    .side-footer { margin-top:auto; padding:16px 6px 4px; }
    .side-export { width:100%; padding:11px 12px; border:1px solid #dfe3e9; border-radius:12px; background:#fff; color:#303b4d; font-weight:900; display:flex; justify-content:space-between; align-items:center; }
    .side-footer p { margin:9px 4px 0; color:#a1a8b5; font-size:9px; line-height:1.4; }
    .content-flow { min-width:0; }
    .hero { margin:0; padding:0; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; }
    .topbar { min-height:102px; display:flex; align-items:stretch; justify-content:space-between; gap:20px; padding:4px 2px 18px; }
    .topbar-title { min-width:0; }
    .eyebrow { display:block; color:#9aa2b2; font-size:9px; font-weight:900; letter-spacing:.16em; }
    .topbar h1 { margin:7px 0 6px; font-size:clamp(28px,3.2vw,42px); line-height:1.05; letter-spacing:-.04em; }
    .topbar p { margin:0; color:var(--muted); font-size:12px; }
    .hero-time { min-width:174px; align-self:flex-start; padding:12px 14px; border:1px solid #e0e4ea; border-radius:16px; background:rgba(255,255,255,.9); box-shadow:none; }
    .hero-time-label { color:#9a315d; font-size:9px; letter-spacing:.1em; }
    .hero-time strong { margin-top:4px; font-size:17px; letter-spacing:.01em; }
    .hero-time small { margin-top:3px; font-size:10px; }
    .grid { margin-top:18px; gap:18px; }
    .card, .daily-card, .food-card, .sources { border:1px solid #e1e5eb; border-radius:20px; background:rgba(255,255,255,.94); box-shadow:var(--shadow-soft); }
    .card { padding:22px; }
    .daily-card { margin-top:0; padding:24px; }
    .food-card, .sources, .notice { margin-top:18px; }
    .title { margin-bottom:15px; }
    .title h2 { font-size:20px; letter-spacing:-.02em; }
    .title p { font-size:11px; }
    .pill { background:#f1f4f8; color:#647086; }
    .daily-target { background:#f4f7fb; border:1px solid #e1e7ef; }
    .daily-panel { background:#fbfcfd; }
    .meal-box { background:#fff; }
    .metrics { gap:10px; }
    .metric { border-color:#e5e8ee; background:#f8f9fb; }
    .budget-metrics { margin-top:14px; }
    .recommendations { margin-top:14px; padding-top:14px; }
    .toolbar { padding-top:0; }
    .food-head { background:#fbfcfd; border-bottom:1px solid #edf0f4; }
    .notice { border-color:#eadfbd; background:#fffaf0; }
    .sources { padding:22px; }
    footer { margin-top:18px; padding:4px 0; }

    @media(max-width:1050px) {
      .page-shell { grid-template-columns: 210px minmax(0,1fr); gap:18px; width:min(100% - 24px, 1440px); }
      .side-nav { padding:17px 12px; }
      .side-links b { font-size:12px; }
      .side-links small { font-size:8px; }
    }
    @media(max-width:830px) {
      .page-shell { display:block; width:min(100% - 20px, 1160px); padding-top:12px; }
      .side-nav { position:static; min-height:0; margin-bottom:12px; padding:10px; border-radius:18px; }
      .brand-block { padding:3px 5px 9px; }
      .brand-mark { width:30px; height:30px; flex-basis:30px; border-radius:9px; }
      .side-footer { display:none; }
      .side-label { display:none; }
      .side-links { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
      .side-links a { grid-template-columns:1fr; gap:2px; padding:8px 7px; }
      .side-num { display:none; }
      .side-links b { font-size:11px; }
      .side-links small { font-size:7px; }
      .topbar { padding-bottom:12px; }
      .topbar h1 { font-size:30px; }
    }
    



/* ===== Refined product layer ===== */
.hero:after { display:none !important; }
.topbar { position:relative; }
.topbar-title { padding-right:20px; }
.hero-time { position:relative; z-index:5; flex:0 0 auto; }
.side-nav { z-index:10; }
.side-export { cursor:pointer; transition:.18s ease; }
.side-export:hover { border-color:#d2b8c5; background:#fff7fa; transform:translateY(-1px); }

/* Export is a report, not a screenshot of the dashboard. */
.print-report { display:none; }
.print-report__header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding-bottom:16px; border-bottom:2px solid #182033; }
.print-report__eyebrow { display:block; color:#9b315c; font-size:9px; font-weight:900; letter-spacing:.16em; }
.print-report__header h1 { margin:5px 0 4px; font-size:26px; letter-spacing:-.035em; }
.print-report__header p { margin:0; color:#70798a; font-size:10px; }
.print-report__brand { min-width:90px; text-align:right; font-weight:900; font-size:24px; line-height:.9; letter-spacing:-.06em; }
.print-report__brand small { display:block; margin-top:7px; color:#9299a7; font-size:6px; letter-spacing:.12em; line-height:1.2; }
.print-report__grid { display:grid; gap:9px; }
.print-report__grid--metrics { grid-template-columns:repeat(4,1fr); margin:15px 0; }
.print-metric { padding:11px 12px; border:1px solid #dfe4eb; border-radius:10px; background:#f8f9fb; }
.print-metric small { display:block; color:#778094; font-size:8px; font-weight:800; }
.print-metric strong { display:block; margin-top:3px; font-size:18px; letter-spacing:-.02em; }
.print-metric span { color:#778094; font-size:8px; }
.print-report__two-col { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.print-report__section { border:1px solid #dfe4eb; border-radius:11px; padding:12px; background:#fff; break-inside:avoid; page-break-inside:avoid; }
.print-report__section-head { display:flex; align-items:center; gap:7px; padding-bottom:8px; border-bottom:1px solid #edf0f4; }
.print-report__section-head span { color:#bd3b70; font-size:8px; font-weight:900; }
.print-report__section-head h2 { margin:0; font-size:12px; }
.print-kv { display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding-top:8px; font-size:9px; }
.print-kv span { color:#697284; }
.print-kv strong { text-align:right; }
.print-table { width:100%; border-collapse:collapse; margin-top:8px; font-size:8.5px; }
.print-table th,.print-table td { padding:6px 5px; border-bottom:1px solid #edf0f4; text-align:left; vertical-align:top; }
.print-table th { color:#6c7587; font-size:7.5px; background:#fafbfc; }
.print-table td:last-child,.print-table th:last-child { text-align:right; }
.print-empty { color:#8a92a0; font-size:9px; padding-top:8px; }
.print-list { margin:8px 0 0; padding-left:17px; color:#505a6d; font-size:9px; }
.print-list li+li { margin-top:4px; }
.print-report__footer { margin-top:12px; padding-top:9px; border-top:1px solid #dfe4eb; color:#818998; font-size:7.5px; text-align:center; letter-spacing:.01em; }
.print-report__footer span { margin-left:7px; padding-left:7px; border-left:1px solid #d8dde5; color:#967087; }

@media(max-width:830px) {
  .topbar-title { padding-right:0; }
}

@media print {
  @page { size:A4; margin:10mm 10mm 18mm; }
  html, body { background:#fff !important; }
  body > .page-shell { display:none !important; }
  body > footer { display:none !important; }
  .print-report { display:block !important; width:100%; color:#1d2433; font-size:10px; }
  .print-report__footer { position:fixed; z-index:1; right:0; bottom:0; left:0; margin:0; padding:0; border:0; color:#818998; font-size:7.5px; line-height:1.4; text-align:center; }
  .print-report__footer span { margin-left:7px; padding-left:7px; border-left:1px solid #d8dde5; color:#967087; }
}


/* ===== Final desktop interaction/layout fixes ===== */
.section-view { display:none; min-width:0; }
.section-view.is-current { display:block; animation:sectionIn .34s cubic-bezier(.22,.8,.28,1); }
.section-view.is-entering { transform-origin:top center; }
@keyframes sectionIn { from { opacity:0; transform:translateY(14px) scale(.992); filter:blur(2px); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }

/* Navigation and content now move as one composed experience. */
.side-links { position:relative; isolation:isolate; }
.side-active-indicator { position:absolute; z-index:-1; left:0; right:0; display:block; border:1px solid #f0d2df; border-radius:15px; background:linear-gradient(100deg,#fff0f6,#fff8fb); box-shadow:0 8px 20px rgba(180,53,108,.09); transition:transform .36s cubic-bezier(.22,.8,.28,1), height .36s cubic-bezier(.22,.8,.28,1); pointer-events:none; }
.side-links a { position:relative; z-index:1; transition:color .22s ease, transform .22s ease, background .22s ease; }
.side-links a:hover { transform:translateX(3px); }
.side-links a.is-active { border-color:transparent; background:transparent; }
.side-links a.is-active::after { content:""; position:absolute; left:-1px; top:50%; width:3px; height:22px; border-radius:999px; background:var(--pink); transform:translateY(-50%); box-shadow:0 0 0 4px #cb3c7a12; }
.topbar-title { transition:opacity .22s ease, transform .22s ease; }
footer > span { margin-left:10px; padding-left:10px; border-left:1px solid #dce1e8; color:#8d6277; white-space:nowrap; }

.assessment-guide { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid #e8ebf0; }
.assessment-guide > div { display:flex; gap:8px; min-width:0; padding:10px; border-radius:12px; background:#f8f9fb; }
.assessment-guide span { flex:0 0 auto; color:#bd4e7d; font-size:10px; font-weight:900; letter-spacing:.04em; }
.assessment-guide p { margin:0; color:#697385; font-size:11px; line-height:1.6; }
.assessment-guide strong { color:#3b4658; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.brand-mark { width:38px; height:38px; min-width:38px; min-height:38px; flex:0 0 38px; overflow:hidden; }
.brand-mark img { width:100%; height:100%; max-width:100%; max-height:100%; display:block; object-fit:contain; }

.meal-row { grid-template-columns:minmax(0,1fr) minmax(82px,100px) minmax(78px,90px) 34px; gap:8px; min-width:0; }
.meal-row > div:first-child { min-width:0; overflow:hidden; }
.meal-row > div:first-child strong { display:block; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.meal-row > div:first-child small { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.meal-row input { width:100%; min-width:0; }
.meal-kcal { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.meal-remove { flex:0 0 34px; }
.meal-total { flex-wrap:wrap; }

.side-export { min-width:0; }

.print-report__brand { display:flex; flex-direction:column; align-items:flex-end; min-width:64px; }
.print-report__brand img { width:48px; height:48px; display:block; object-fit:contain; border-radius:11px; }
.print-report__brand small { margin-top:6px; }

.data-load-error { margin:0 0 18px; padding:14px 16px; border:1px solid #efcaca; border-radius:14px; background:#fff3f3; color:#8d3030; display:grid; gap:4px; }
.data-load-error strong { font-size:13px; }
.data-load-error span { font-size:12px; }
.data-load-error small { color:#a36a6a; font-size:10px; }

@media (max-width: 1050px) {
  .meal-row { grid-template-columns:minmax(0,1fr) 92px 84px 34px; }
}

@media (max-width: 830px) {
  .side-active-indicator { display:none; }
  .side-links a:hover { transform:none; }
  .side-links a.is-active { background:#fff0f6; border-color:#f0d2df; }
  .side-links a.is-active::after { display:none; }
  footer > span { display:block; margin:5px 0 0; padding:0; border:0; }
  .assessment-guide { grid-template-columns:1fr; }
}