:root{
    --paper:#F1F5F0;
    --surface:#FFFFFF;
    --surface-2:#E7EEE5;
    --ink:#1C2B22;
    --ink-soft:#5B6B5E;
    --ink-faint:#93A395;
    --blue:#3A62D8;
    --blue-soft:#E4E9FC;
    --rust:#E4602F;
    --rust-soft:#FCE3D6;
    --green:#1E8F63;
    --green-soft:#DEF2E7;
    --amber:#D99A2B;
    --accent-neutral:#6E7F72;
    --accent-neutral-soft:#E8EEE8;
    --journal-paper:#FBF8F1;
    --line:#E6E9E3;
    --chart-fat:#E4602F;
    --chart-muscle:#3A62D8;
    --chart-water:#B0559C;
    --radius:16px;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{height:100%;}
  body{
    margin:0;
    font-family:var(--font-sans);
    background:var(--paper);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  #app{max-width:520px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; background:transparent;}

  header.top{
    padding:20px 18px 12px;
    display:flex; align-items:baseline; justify-content:space-between;
  }
  header.top .brand{
    font-family:var(--font-sans); font-weight:800; font-size:20px; letter-spacing:-0.02em; color:var(--green);
  }
  header.top .brand small{display:block; font-weight:500; font-size:11px; color:var(--ink-soft); letter-spacing:.02em; margin-top:1px;}

  main{flex:1; padding:0 16px 90px; overflow-y:auto;}

  .daybar{
    display:flex; align-items:center; justify-content:space-between;
    background:var(--surface); border:none; border-radius:20px;
    padding:10px 12px; margin-bottom:16px;
    box-shadow:0 1px 3px rgba(28,43,34,.06), 0 8px 24px rgba(28,43,34,.04);
  }
  .daybar button{
    background:var(--green-soft); border:none; font-size:17px; color:var(--green); width:32px; height:32px; line-height:32px; text-align:center; padding:0; cursor:pointer; border-radius:10px;
  }
  .daybar button:active{background:var(--green); color:#fff;}
  .daybar .label{font-weight:700; font-size:14px; text-transform:capitalize;}
  .daybar .label small{display:block; font-weight:500; color:var(--ink-faint); font-size:11px; text-transform:none;}

  section.card{
    background:var(--surface); border:none; border-radius:20px;
    padding:18px; margin-bottom:16px;
    box-shadow:0 1px 3px rgba(28,43,34,.06), 0 8px 24px rgba(28,43,34,.04);
  }
  .card h2{margin:0 0 12px; font-size:12.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;}

  .hero-remaining{text-align:left; margin-bottom:6px;}
  .hero-remaining .num{font-family:var(--font-mono); font-size:46px; font-weight:700; line-height:1; letter-spacing:-0.02em; color:var(--green);}
  .hero-remaining .num.neg{color:var(--rust);}
  .hero-remaining .unit{font-family:var(--font-mono); font-size:16px; color:var(--ink-soft); margin-left:6px;}
  .hero-remaining .desc{font-size:13px; color:var(--ink-soft); margin-top:4px;}

  .bar{height:9px; border-radius:6px; background:var(--surface-2); overflow:hidden; margin-top:12px;}
  .bar > div{height:100%; background:var(--green); border-radius:6px; transition:width .25s ease;}
  .bar.over > div{background:var(--rust);}

  .trio{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:14px;}
  .trio .cell{border-top:none; border-radius:12px; padding:12px 8px; text-align:center; background:var(--surface-2);}
  .trio .cell .k{font-size:10.5px; color:var(--ink-soft);}
  .trio .cell .v{font-family:var(--font-mono); font-weight:700; font-size:17px; margin-top:3px; color:var(--ink);}
  .trio .cell.blue{background:var(--blue-soft);}
  .trio .cell.blue .v{color:var(--blue);}
  .trio .cell.rust{background:var(--rust-soft);}
  .trio .cell.rust .v{color:var(--rust);}
  .trio .cell.green{background:var(--green-soft);}
  .trio .cell.green .v{color:var(--green);}

  .macro-row{display:flex; align-items:center; gap:10px; margin-top:10px;}
  .macro-row .name{width:56px; font-size:12px; color:var(--ink-soft);}
  .macro-row .bar{flex:1; margin-top:0;}
  .macro-row .amt{font-family:var(--font-mono); font-size:12px; width:78px; text-align:right; color:var(--ink-soft);}

  .list-entry{
    display:flex; justify-content:space-between; align-items:center;
    padding:11px 0; border-bottom:1px solid var(--line);
  }
  .list-entry:last-child{border-bottom:none;}
  .list-entry .main{flex:1; min-width:0;}
  .list-entry .title{font-size:14px; font-weight:600;}
  .list-entry .sub{font-size:12px; color:var(--ink-faint); margin-top:1px; white-space:pre-wrap;}
  .list-entry .amount{font-family:var(--font-mono); font-size:14px; font-weight:700; margin-left:10px; white-space:nowrap;}
  .list-entry .amount.rust{color:var(--rust);}
  .list-entry .amount.blue{color:var(--blue);}
  .list-entry button.del{
    background:none; border:none; color:var(--ink-faint); font-size:16px; padding:4px 6px; margin-left:4px; cursor:pointer;
  }
  .empty{color:var(--ink-faint); font-size:13px; padding:8px 0;}

  input, textarea, select{
    width:100%; font-family:var(--font-sans); font-size:15px; color:var(--ink);
    background:var(--paper); border:1px solid transparent; border-radius:10px;
    padding:11px 12px; margin-top:4px;
  }
  input:focus, textarea:focus, select:focus{outline:none; border-color:var(--green); background:var(--surface); box-shadow:0 0 0 3px var(--green-soft);}
  label{font-size:12px; color:var(--ink-soft); font-weight:600; display:block; margin-top:12px;}
  label:first-child{margin-top:0;}
  textarea{min-height:90px; resize:vertical; font-family:var(--font-mono); font-size:13.5px;}

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    background:var(--green); color:#fff; border:none; border-radius:12px;
    font-family:var(--font-sans); font-size:14px; font-weight:700; padding:13px 16px;
    cursor:pointer; width:100%; margin-top:14px;
  }
  .btn:active{opacity:.85;}
  .btn.secondary{background:var(--blue-soft); color:var(--blue); border:none;}
  .btn.ghost{background:var(--surface-2); color:var(--ink-soft); border:none;}
  .settings-toggle{display:block; width:100%; text-align:left; background:none; border:none; padding:8px 0; margin-top:2px; font-size:12.5px; font-weight:700; color:var(--green); cursor:pointer;}
  .btn.rust{background:var(--rust);}
  .btn.small{width:auto; padding:8px 12px; font-size:13px; margin-top:0;}

  .search-results{margin-top:10px; max-height:260px; overflow-y:auto; border-top:1px solid var(--line);}
  .food-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 2px; border-bottom:1px solid var(--line); cursor:pointer;
  }
  .food-row:active{background:var(--green-soft);}
  .food-row .fn{font-size:14px; font-weight:600;}
  .food-row .fm{font-size:11px; color:var(--ink-faint); font-family:var(--font-mono);}
  .food-row button.edit{background:var(--surface-2); border:none; border-radius:8px; color:var(--ink-soft); font-size:13px; padding:5px 9px; margin-left:8px; cursor:pointer; flex-shrink:0;}
  .food-row button.edit:active{background:var(--blue-soft); color:var(--blue);}
  .food-row button.star{background:none; border:none; color:var(--ink-faint); font-size:19px; padding:2px 4px; margin-left:6px; cursor:pointer; flex-shrink:0; line-height:1;}
  .food-row button.star.active{color:var(--amber);}
  .food-chips{display:flex; flex-wrap:wrap; gap:8px; padding:2px 0 10px;}
  .food-chip{display:inline-flex; align-items:center; gap:6px; padding:7px 8px 7px 6px; border-radius:20px; background:var(--surface-2); cursor:pointer; max-width:100%;}
  .food-chip:active{background:var(--green-soft);}
  .food-chip .chip-star{background:none; border:none; color:var(--amber); font-size:13px; padding:0; margin:0; cursor:pointer; line-height:1; flex-shrink:0;}
  .food-chip .chip-name{font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

  .seg{display:flex; gap:6px; margin-top:4px;}
  .seg button{
    flex:1; padding:9px 4px; font-size:12.5px; border:none; background:var(--surface-2);
    border-radius:9px; color:var(--ink-soft); font-family:var(--font-sans); cursor:pointer;
  }
  .seg button.active{background:var(--green); color:#fff;}
  .preset-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
  .preset-chip{background:var(--green-soft); border:none; border-radius:20px; padding:8px 14px; font-size:13px; color:var(--green); font-weight:600; font-family:var(--font-sans); cursor:pointer;}
  .preset-chip:active{background:var(--green); color:#fff;}

  nav.tabs{
    position:fixed; bottom:0; left:0; right:0;
    background:rgba(255,255,255,.94); border-top:1px solid var(--line);
    display:flex; max-width:520px; margin:0 auto;
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -8px 24px rgba(28,43,34,.05);
    z-index:20;
  }
  nav.tabs button{
    position:relative; flex:1; background:none; border:none; padding:10px 2px 8px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    color:var(--ink-faint); font-family:var(--font-sans); font-size:10px; font-weight:600;
    transition:color .2s ease, transform .2s ease;
  }
  nav.tabs button::after{
    content:""; position:absolute; left:22%; right:22%; bottom:0; height:3px;
    border-radius:3px 3px 0 0; background:var(--green);
    transform:scaleX(0); transform-origin:center; opacity:0;
    transition:transform .25s cubic-bezier(.22,1,.36,1), opacity .2s ease;
  }
  nav.tabs button.active::after{transform:scaleX(1); opacity:1;}
  nav.tabs button:active{transform:translateY(1px);}
  nav.tabs button[title]::before{content:attr(title); display:none;}
  nav.tabs button svg{width:19px; height:19px; stroke:var(--ink-faint); fill:none; stroke-width:1.8;}
  nav.tabs .more-wrap{position:relative; flex:1; display:flex;}
  nav.tabs .more-toggle svg circle{fill:currentColor;}
  nav.tabs .more-menu{
    position:absolute; bottom:calc(100% + 10px); right:0; min-width:170px;
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    box-shadow:0 8px 24px rgba(28,43,34,.16); padding:6px;
    display:none; flex-direction:column; gap:2px; z-index:25;
  }
  nav.tabs .more-menu.open{display:flex;}
  nav.tabs .more-menu button{
    position:static; flex:none; flex-direction:row; justify-content:flex-start; align-items:center;
    gap:10px; padding:10px 12px; border-radius:9px; font-size:13px; font-weight:600; color:var(--ink); width:100%;
  }
  nav.tabs .more-menu button::after{display:none;}
  nav.tabs .more-menu button:active{background:var(--surface-2);}
  nav.tabs .more-menu button.active{background:var(--green-soft); color:var(--green);}
  nav.tabs .more-menu button svg{width:18px; height:18px; stroke:var(--ink-faint);}
  nav.tabs .more-menu button.active svg{stroke:var(--green);}
  nav.tabs button.active{color:var(--green);}
  nav.tabs button.active svg{stroke:var(--green);}
  @media (max-width:390px){
    nav.tabs button{font-size:0; padding-top:11px;}
    nav.tabs button svg{width:20px; height:20px;}
  }
  /* Le libellé au survol n'a de sens que sur un pointeur qui peut vraiment "hover"
     (souris) : sur tactile, le focus reste collé après un tap (pas de mouseleave),
     ce qui affichait le libellé en permanence tant qu'on ne touchait pas ailleurs. */
  @media (max-width:390px) and (hover:hover) and (pointer:fine){
    nav.tabs button:hover::before, nav.tabs button:focus-visible::before{
      display:block; position:absolute; bottom:48px; left:50%; transform:translateX(-50%);
      white-space:nowrap; background:var(--ink); color:#fff; padding:5px 8px;
      border-radius:8px; font-size:11px; font-weight:600; z-index:30;
    }
  }

  .modal-bg{
    position:fixed; inset:0; background:rgba(20,30,23,.5); display:flex; align-items:flex-end;
    z-index:50;
  }
  .modal{
    background:var(--paper); width:100%; max-width:520px; margin:0 auto;
    border-radius:20px 20px 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom));
    max-height:85vh; overflow-y:auto;
  }
  .modal h3{margin:0 0 4px; font-size:16px;}
  .modal .close{position:absolute; top:14px; right:16px; background:none; border:none; font-size:20px; color:var(--ink-soft);}
  .modal-wrap{position:relative;}

  .qty-preview{display:flex; gap:14px; margin-top:14px; padding:12px; background:var(--surface); border:none; border-radius:12px; box-shadow:0 1px 2px rgba(28,43,34,.05), 0 4px 14px rgba(28,43,34,.04);}
  .qty-preview .item{flex:1; text-align:center;}
  .qty-preview .item .n{font-family:var(--font-mono); font-weight:700; font-size:15px;}
  .qty-preview .item .l{font-size:10px; color:var(--ink-faint); margin-top:2px;}

  .toast{
    position:fixed; bottom:78px; left:50%; transform:translateX(-50%);
    background:var(--ink); color:var(--surface); padding:9px 16px; border-radius:20px;
    font-size:13px; z-index:80; opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .toast.show{opacity:1;}

  .hist-day{border:none; border-radius:14px; margin-bottom:10px; overflow:hidden; background:var(--surface); box-shadow:0 1px 2px rgba(28,43,34,.05), 0 4px 14px rgba(28,43,34,.04);}
  .hist-head{display:flex; justify-content:space-between; align-items:center; padding:13px 14px; cursor:pointer; background:var(--surface);}
  .hist-head .d{font-weight:700; font-size:13.5px; text-transform:capitalize;}
  .hist-head .n{font-family:var(--font-mono); font-size:13px; color:var(--ink-soft);}
  .hist-body{padding:0 14px 12px; display:none;}
  .hist-body.open{display:block;}
  .weekly-deficit{
    position:relative; overflow:hidden; padding:17px 16px 15px; margin-bottom:16px;
    background:linear-gradient(135deg, #193c2d 0%, #245843 100%); color:#fff;
    border-radius:16px; box-shadow:0 8px 22px rgba(28,43,34,.13);
  }
  .weekly-deficit::after{content:""; position:absolute; width:130px; height:130px; border:1px solid rgba(255,255,255,.15); border-radius:50%; right:-48px; top:-54px;}
  .weekly-deficit .eyebrow{position:relative; z-index:1; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#b8d8c5; font-weight:700;}
  .weekly-deficit .range{position:relative; z-index:1; margin-top:5px; font-size:14px; font-weight:650; text-transform:capitalize;}
  .weekly-deficit .total{position:relative; z-index:1; margin-top:13px; font-family:var(--font-mono); font-size:28px; font-weight:800; letter-spacing:-.03em;}
  .weekly-deficit .total.surplus{color:#ffc3a9;}
  .weekly-deficit .total.deficit{color:#d5f3df;}
  .weekly-deficit .meta{position:relative; z-index:1; margin-top:5px; font-size:11.5px; color:#b8d8c5;}
  .weekly-deficit .burned{position:relative; z-index:1; margin-top:9px; font-size:12px; font-weight:650; color:#ffc3a9; display:flex; align-items:center; gap:5px;}
  .weekly-deficit .burned .v{font-family:var(--font-mono); font-weight:800;}
  .hist-week-toggle{position:relative; z-index:1; cursor:pointer;}
  .weekly-deficit .expand-hint{position:relative; z-index:1; margin-top:11px; font-size:11px; font-weight:700; color:#b8d8c5; opacity:.85;}
  .weekly-deficit.past .expand-hint{color:var(--green);}
  .hist-week-days{position:relative; z-index:1; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.18);}
  .weekly-deficit.past .hist-week-days{border-top-color:var(--line);}
  .hist-week-days .hist-day{background:var(--surface-2);}
  .weekly-deficit.past{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(28,43,34,.05), 0 4px 14px rgba(28,43,34,.04); border:1px solid var(--line);}
  .weekly-deficit.past::after{border-color:rgba(30,143,99,.13);}
  .weekly-deficit.past .eyebrow,.weekly-deficit.past .meta{color:var(--ink-soft);}
  .weekly-deficit.past .range{color:var(--ink);}
  .weekly-deficit.past .total.deficit{color:var(--green);}
  .weekly-deficit.past .burned{color:var(--rust);}
  .weekly-deficit.past .total.surplus{color:var(--rust);}
  .weekly-history-label{font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin:4px 0 10px;}

  h1.page-title{font-size:19px; margin:2px 0 14px; letter-spacing:-0.01em;}
  .hint{font-size:12px; color:var(--ink-faint); margin-top:6px; line-height:1.4;}
  .row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .row3{display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); gap:10px;}
  .weigh-summary p{margin:0 0 8px; font-size:14px; line-height:1.5; color:var(--ink);}
  .macro-tip{margin:0 0 8px; font-size:14px; line-height:1.5; color:var(--ink);}
  .macro-tip:last-child{margin-bottom:0;}
  .weigh-summary p:last-of-type{margin-bottom:10px;}

  /* ---- Graphiques de tendance (onglet Poids) ---- */
  .chart-wrap{position:relative; margin-top:8px;}
  .trend-chart{width:100%; height:150px; display:block; overflow:visible;}
  .chart-grid{stroke:var(--line); stroke-width:1;}
  .chart-tick{font-size:8.5px; fill:var(--ink-faint); font-family:var(--font-mono);}
  .chart-line{stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;}
  .chart-dot{stroke:var(--surface); stroke-width:2;}
  .chart-endlabel{font-size:11px; font-weight:700; fill:var(--ink); font-family:var(--font-mono);}
  .chart-endlabel-bg{fill:var(--surface); opacity:.9;}
  .chart-hit{fill:transparent; cursor:crosshair;}
  .chart-crosshair{stroke:var(--ink-faint); stroke-width:1; opacity:0; pointer-events:none;}
  .chart-tooltip{
    display:none; position:absolute; top:2px; min-width:100px; max-width:180px;
    background:var(--ink); color:#fff; border-radius:10px; padding:8px 10px;
    font-size:11.5px; line-height:1.5; pointer-events:none; z-index:2;
    box-shadow:0 6px 16px rgba(0,0,0,.18);
  }
  .chart-tooltip .date{font-weight:700; text-transform:capitalize; margin-bottom:3px; font-size:11px;}
  .chart-tooltip .row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .chart-tooltip .key{display:flex; align-items:center; gap:5px; color:rgba(255,255,255,.75);}
  .chart-tooltip .val{font-family:var(--font-mono); font-weight:700;}
  .chart-tooltip .dot,.chart-legend .dot{width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0;}
  .chart-legend{display:flex; flex-wrap:wrap; gap:12px; margin-top:2px; font-size:12px; color:var(--ink-soft);}
  .chart-legend .item{display:flex; align-items:center; gap:6px;}

  /* --- Onglet To-do : objectifs et habitudes quotidiennes --- */
  .todo-intro{background:linear-gradient(135deg,#193c2d 0%,#245843 100%);color:#fff;position:relative;overflow:hidden;}
  .todo-intro::after{content:"✓";position:absolute;right:18px;top:8px;font-size:76px;font-weight:800;color:rgba(255,255,255,.09);transform:rotate(-10deg);}
  .todo-intro h2,.todo-intro p{position:relative;z-index:1}.todo-intro p{color:#c7e4d1;margin:5px 0 0;font-size:12px;line-height:1.45;max-width:330px}
  .todo-form{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center;margin-top:12px}
  .todo-form input{min-width:0}.todo-form .btn{padding-left:14px;padding-right:14px}
  .todo-options{grid-column:1 / -1;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-soft)}
  .todo-options input{accent-color:var(--green);width:16px;height:16px}
  .todo-list{display:flex;flex-direction:column;gap:8px;margin-top:2px}
  .todo-item{display:flex;align-items:center;gap:10px;padding:11px 10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(28,43,34,.04)}
  .todo-item.done{background:var(--surface-2)}.todo-item.done .todo-label{text-decoration:line-through;color:var(--ink-faint)}
  .todo-check{
    appearance:none; -webkit-appearance:none; width:21px; height:21px; flex:0 0 21px;
    border:1.5px solid var(--ink-faint); border-radius:7px; background:var(--surface);
    cursor:pointer; display:grid; place-content:center; transition:background .2s ease, border-color .2s ease, transform .18s ease;
  }
  .todo-check::after{content:"✓"; color:#fff; font-size:14px; font-weight:800; transform:scale(0); transition:transform .18s cubic-bezier(.22,1.45,.36,1);}
  .todo-check:checked{background:var(--green); border-color:var(--green); transform:scale(1.06);}
  .todo-check:checked::after{transform:scale(1);}
  .todo-check:active{transform:scale(.88);}
  .todo-check:focus-visible{outline:3px solid var(--green-soft); outline-offset:2px;}
  .todo-copy{min-width:0;flex:1}.todo-label{font-size:14px;font-weight:650;overflow-wrap:anywhere}.todo-kind{display:inline-block;margin-top:4px;padding:3px 7px;border-radius:10px;background:var(--green-soft);color:var(--green);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
  .todo-actions{display:flex;gap:3px}.todo-actions button{border:0;background:transparent;color:var(--ink-faint);font-size:15px;padding:5px;cursor:pointer;border-radius:7px}.todo-actions button:hover{background:var(--surface-2);color:var(--ink)}
  .todo-progress{
    display:block; margin-top:10px; font-family:var(--font-mono); font-size:11px;
    color:var(--ink-soft); font-weight:600; text-transform:none; letter-spacing:0;
  }
  .todo-progress-bar{height:6px; margin-top:7px; border-radius:10px; background:var(--surface-2); overflow:hidden;}
  .todo-progress-bar > span{display:block; height:100%; width:var(--progress,0%); border-radius:inherit; background:var(--green); transform-origin:left; animation:progressIn .55s cubic-bezier(.22,1,.36,1);}
  @keyframes progressIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  /* --- Onglet Notes : style carnet / page de rédaction --- */
  section.card.journal{
    background:var(--journal-paper);
  }
  .journal-textarea{
    width:100%; font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
    font-size:15px; color:var(--ink); line-height:28px;
    background-image:linear-gradient(rgba(120,105,75,.035) 1px, transparent 1px), repeating-linear-gradient(to bottom, transparent 0, transparent 27px, #DDE4D9 27px, #DDE4D9 28px);
    background-size:100% 5px, 100% 28px;
    background-attachment:local;
    border:none; border-left:2px solid var(--accent-neutral-soft);
    border-radius:0; padding:0 10px 4px 16px; margin-top:8px;
    min-height:168px; resize:vertical;
  }
  .journal-textarea:focus{outline:none; border-left-color:var(--accent-neutral);}
  .journal-entry{
    padding:12px 4px 12px 16px; border-left:2px solid var(--accent-neutral-soft); border-bottom:1px dashed var(--line);
    position:relative;
  }
  .journal-entry:last-child{border-bottom:none;}
  .journal-entry .jdate{
    font-family:var(--font-sans); font-size:10.5px; font-weight:700; color:var(--green);
    display:inline-block; background:var(--green-soft); padding:2px 8px; border-radius:20px;
    text-transform:uppercase; letter-spacing:.05em;
  }
  .journal-entry .jtext{
    font-family:Georgia,"Iowan Old Style","Times New Roman",serif; font-size:15.5px; line-height:1.6;
    color:var(--ink); margin-top:4px; white-space:pre-wrap; padding-right:22px;
  }
  .journal-entry .jdel{
    position:absolute; top:12px; right:2px; background:none; border:none; color:var(--ink-faint);
    font-size:14px; cursor:pointer; padding:2px 4px;
  }

  /* ====== V14 — Dashboard, charts, toasts, dark mode ====== */

  /* Smooth color transitions for theme switching */
  body, body * { transition-property: background-color, color, border-color, fill, stroke; transition-duration: .35s; transition-timing-function: ease; }

  /* ---- Dark theme: duplicated palette under body.dark ---- */
  body.dark{
    --paper:#0E1411;
    --surface:#171F1B;
    --surface-2:#222C26;
    --ink:#E8F1EA;
    --ink-soft:#9CB3A1;
    --ink-faint:#6D8473;
    --blue:#7A98F2;
    --blue-soft:#1F2A4A;
    --rust:#F0875A;
    --rust-soft:#3A1F18;
    --green:#46C18C;
    --green-soft:#163527;
    --amber:#E8B85A;
    --accent-neutral:#8C9D90;
    --accent-neutral-soft:#243027;
    --journal-paper:#14201B;
    --line:#28332C;
    --chart-fat:#D9713F;
    --chart-muscle:#5C7FE0;
    --chart-water:#B570A0;
  }
  body.dark #app{background:transparent;}
  body.dark section.card{background:var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);}
  body.dark nav.tabs{background:rgba(23,31,27,.94);}
  body.dark input, body.dark textarea, body.dark select{background:var(--surface-2); color:var(--ink);}
  body.dark .journal-textarea{background-image:linear-gradient(rgba(180,165,135,.05) 1px, transparent 1px), repeating-linear-gradient(to bottom, transparent 0, transparent 27px, #243027 27px, #243027 28px);}
  body.dark .weekly-deficit{background:linear-gradient(135deg,#0F2620 0%,#1B4336 100%);}
  body.dark .weekly-deficit.past{background:var(--surface);}
  body.dark .hist-day{background:var(--surface);}
  body.dark .todo-item{background:var(--surface);}
  body.dark .todo-intro{background:linear-gradient(135deg,#0F2620 0%,#1B4336 100%);}
  body.dark .seg button:not(.active){background:var(--surface-2); color:var(--ink-soft);}

  /* ---- Theme toggle button (header) ---- */
  .theme-toggle{
    background:var(--surface-2); border:none; border-radius:12px;
    width:44px; height:44px; display:grid; place-content:center; cursor:pointer;
    color:var(--ink-soft); margin-left:10px; flex-shrink:0;
    box-shadow:0 1px 2px rgba(28,43,34,.05);
  }
  .theme-toggle:active{transform:scale(.95);}
  .theme-toggle svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8;}
  body.dark .theme-toggle{color:var(--amber);}

  /* ---- Touch targets: 44px minimum ---- */
  .btn{ min-height:44px; }
  .seg button{ min-height:44px; }
  .preset-chip{ min-height:44px; }
  .food-row{ min-height:44px; padding:12px 4px; }
  .daybar button{ width:44px; height:44px; line-height:44px; border-radius:12px; }
  .list-entry .del{ min-width:44px; min-height:44px; display:inline-grid; place-content:center; border-radius:10px; }
  .food-row button.star{ min-width:44px; min-height:44px; }
  .food-row button.edit{ min-height:36px; }
  .todo-check{ min-width:44px; min-height:44px; appearance:none; position:relative; }
  .todo-check::before{content:""; position:absolute; inset:50% 50%; transform:translate(-50%,-50%); width:21px; height:21px; border-radius:7px; border:1.5px solid var(--ink-faint); background:var(--surface); transition:background .2s ease, border-color .2s ease, transform .18s ease;}
  .todo-check:checked::before{background:var(--green); border-color:var(--green);}
  .todo-actions button{ min-width:44px; min-height:44px; border-radius:10px; }
  .journal-entry .jdel{ min-width:44px; min-height:44px; border-radius:10px; }
  /* checkbox-friendly padding area around the visual box */
  .todo-check{ background:transparent; }
  .todo-check:focus-visible::before{outline:3px solid var(--green-soft); outline-offset:3px;}

  /* ---- Flash confirmation ---- */
  @keyframes flashBg{
    0%{background:rgba(70,193,140,0); box-shadow:0 0 0 0 rgba(70,193,140,0);}
    25%{background:rgba(70,193,140,.25); box-shadow:0 0 0 6px rgba(70,193,140,.15);}
    100%{background:rgba(70,193,140,0); box-shadow:0 0 0 0 rgba(70,193,140,0);}
  }
  .flash{ animation: flashBg .8s ease-out; }
  @keyframes flashRust{
    0%{background:rgba(240,135,90,0);}
    25%{background:rgba(240,135,90,.22);}
    100%{background:rgba(240,135,90,0);}
  }
  .flash-warn{ animation: flashRust .8s ease-out; }

  /* ---- Entry fade+slide animation ---- */
  @keyframes entryIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:translateY(0);} }
  @keyframes entryOut{ from{ opacity:1; transform:translateX(0);} to{ opacity:0; transform:translateX(20px);} }
  .list-entry.enter{ animation: entryIn .35s cubic-bezier(.22,1,.36,1); }
  .list-entry.leave{ animation: entryOut .35s ease forwards; pointer-events:none; }
  .food-row.enter{ animation: entryIn .3s cubic-bezier(.22,1,.36,1); }

  /* ---- Toast: icon + slide+fade ---- */
  .toast{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 18px;
    border-radius:22px;
    background:var(--ink); color:var(--surface);
    box-shadow:0 8px 22px rgba(20,30,23,.25);
    transform:translate(-50%, 12px);
  }
  .toast .ico{width:16px; height:16px; flex:0 0 16px; stroke:currentColor; fill:none; stroke-width:2.2;}
  .toast.show{ transform:translate(-50%, 0); }
  .toast.success{ background:linear-gradient(135deg,#1E8F63,#46C18C); color:#fff; }
  .toast.warn{ background:linear-gradient(135deg,#D99A2B,#E8B85A); color:#1C2B22; }
  .toast.error{ background:linear-gradient(135deg,#E4602F,#F0875A); color:#fff; }
  .toast.info{ background:linear-gradient(135deg,#3A62D8,#7A98F2); color:#fff; }

  /* ---- Dashboard SVG ring ---- */
  .kcal-ring-wrap{ position:relative; display:flex; align-items:center; gap:18px; }
  .kcal-ring{ width:120px; height:120px; flex-shrink:0; }
  .kcal-ring .track{ stroke:var(--surface-2); }
  .kcal-ring .fill{ stroke:var(--green); transition:stroke-dashoffset .55s cubic-bezier(.22,1,.36,1), stroke .2s ease; }
  .kcal-ring.over .fill{ stroke:var(--rust); }
  .kcal-ring text{ font-family:var(--font-mono); font-weight:700; }
  .kcal-summary{ flex:1; min-width:0; }
  .kcal-summary .big{ font-family:var(--font-mono); font-size:32px; font-weight:700; line-height:1.1; letter-spacing:-.02em; color:var(--green); }
  .kcal-summary .big.neg{ color:var(--rust); }
  .kcal-summary .sub{ font-size:13px; color:var(--ink-soft); margin-top:2px; line-height:1.45; }
  .kcal-summary .pill{ display:inline-block; padding:2px 8px; border-radius:20px; background:var(--surface-2); color:var(--ink-soft); font-size:11px; font-weight:600; margin-top:6px; }

  /* ---- Mini bar chart 7 days calories ---- */
  .mini-bars{ margin-top:10px; padding:4px 0; }
  .mini-bars .bars-row{ position:relative; display:flex; align-items:flex-end; gap:6px; height:54px; }
  .mini-bars .bar-col{ flex:1; min-width:0; }
  .mini-bars .bar-col .b{ width:100%; background:var(--green); border-radius:5px 5px 2px 2px; min-height:2px; transition:height .35s ease; }
  .mini-bars .bar-col.today .b{ background:linear-gradient(180deg,var(--green),#46C18C); }
  .mini-bars .bar-col.empty .b{ background:var(--surface-2); }
  .mini-bars .goal-line{ position:absolute; left:0; right:0; height:0; border-top:1.5px dashed var(--rust); z-index:1; pointer-events:none; }
  .mini-bars .labels-row{ display:flex; gap:6px; margin-top:5px; }
  .mini-bars .labels-row .l{ flex:1; min-width:0; text-align:center; font-size:10px; color:var(--ink-faint); font-weight:600; text-transform:uppercase; }
  .mini-bars .axis{ font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); text-align:right; margin-top:4px; display:flex; align-items:center; justify-content:flex-end; gap:5px; }
  .mini-bars .axis .goal-swatch{ display:inline-block; width:12px; height:0; border-top:1.5px dashed var(--rust); }

  /* ---- Recent foods section ---- */
  .recent-label{ display:flex; align-items:center; gap:8px; margin:6px 0 4px; color:var(--ink-soft); font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
  .recent-label.list-toggle{ cursor:pointer; }
  .recent-label.list-toggle .chev{ flex-shrink:0; }
  .recent-label::before{ content:""; flex:0 0 14px; height:2px; background:var(--green-soft); border-radius:2px; }
  .recent-label::after{ content:""; flex:1; height:2px; background:var(--green-soft); border-radius:2px; opacity:.5; }

  /* ---- Workout type cards ---- */
  .wk-cards{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:6px; }
  .wk-card{
    background:var(--surface); border:1.5px solid var(--line); border-radius:14px;
    padding:14px 12px; cursor:pointer; display:flex; flex-direction:column; gap:8px;
    transition:transform .15s ease, border-color .15s ease, background .2s ease;
    min-height:96px; text-align:left; font-family:inherit; color:inherit;
  }
  .wk-card:active{ transform:scale(.97); }
  .wk-card.active{ border-color:var(--green); background:var(--green-soft); }
  .wk-card .ico{ width:34px; height:34px; display:grid; place-content:center; border-radius:10px; background:var(--surface-2); color:var(--green); }
  .wk-card .ico svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; }
  .wk-card.active .ico{ background:var(--green); color:#fff; }
  .wk-card .lbl{ font-size:13.5px; font-weight:700; }
  .wk-card .hint{ font-size:11px; color:var(--ink-faint); }

  /* Live kcal estimate pill */
  .wk-estimate{
    display:flex; align-items:center; gap:10px;
    margin-top:14px; padding:11px 13px;
    background:linear-gradient(135deg, var(--blue-soft), var(--green-soft));
    border-radius:12px;
    font-family:var(--font-mono);
    transition:background .3s ease;
  }
  body.dark .wk-estimate{background:linear-gradient(135deg, rgba(122,152,242,.18), rgba(70,193,140,.18));}
  .wk-estimate .num{ font-size:22px; font-weight:800; color:var(--blue); }
  .wk-estimate .lbl{ font-family:var(--font-sans); font-size:12px; color:var(--ink-soft); }
  .wk-estimate .num.over{ color:var(--rust); }
  .wk-estimate.pulse .num{ animation: pulseKcal .4s ease; }
  @keyframes pulseKcal{ 0%{transform:scale(1);} 50%{transform:scale(1.12);} 100%{transform:scale(1);} }

/* ---- Scanner code-barres (Quagga2 injecte video/canvas dans ce conteneur) ---- */
.scanner-video-wrap{
  position:relative; width:100%; aspect-ratio:4/3; max-height:320px;
  overflow:hidden; border-radius:14px; background:#0d1310; margin-top:12px;
}
.scanner-video-wrap video, .scanner-video-wrap canvas{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.scanner-frame{
  position:absolute; inset:16% 10%; border:3px solid var(--green); border-radius:12px;
  pointer-events:none; box-shadow:0 0 0 2000px rgba(0,0,0,.25);
}