/* Tools DZ • Nutrition Calculator: isolated styles, using the site design tokens */
.nutrition-page { --nutri-soft: color-mix(in srgb, var(--primary-color) 9%, var(--surface-color)); --nutri-line:var(--border-color); max-width:1200px; margin:2rem auto 3rem; min-width:0; }
.nutrition-page *, .nutrition-page *::before, .nutrition-page *::after { box-sizing:border-box; }
.nutrition-page button, .nutrition-page input { font:inherit; }
.nutrition-page button { cursor:pointer; }
.nutrition-hero { background:linear-gradient(125deg,#165d2a,#2e7d32 55%,#4caf50); color:#fff; border-radius:22px; padding:clamp(1.2rem,3vw,2.15rem); margin:0 0 1.4rem; display:flex; gap:1.2rem; align-items:center; justify-content:space-between; }
.nutrition-hero h1 { font-size:clamp(1.35rem,3vw,2rem); margin:0 0 .45rem; line-height:1.45; }
.nutrition-hero p { color:#e8f5e9; line-height:1.8; margin:0; max-width:720px; }
.nutri-hero-icon { background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.25); width:62px; height:62px; flex:0 0 62px; border-radius:18px; display:grid; place-items:center; font-size:1.75rem; }
.nutri-hero-copy { flex:1; min-width:0; }
.nutri-hero-actions { display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; justify-content:flex-end; }
.nutri-hero-actions button { border:1px solid rgba(255,255,255,.4); color:#fff; background:rgba(255,255,255,.13); padding:.7rem .85rem; border-radius:11px; }
.nutri-hero-actions button:hover { background:rgba(255,255,255,.23); }
.nutrition-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:1.25rem; align-items:start; }
.nutri-side, .nutri-results { display:grid; gap:1rem; min-width:0; }
.nutri-panel { background:var(--surface-color); border:1px solid var(--border-color); border-radius:19px; box-shadow:var(--box-shadow); padding:clamp(1rem,2.5vw,1.5rem); min-width:0; }
.nutri-panel h2 { font-size:1.09rem; color:var(--text-color); line-height:1.5; margin:0 0 1.1rem; display:flex; gap:.55rem; align-items:center; }
.nutri-panel h2 > i { color:var(--primary-color); }
.nutri-hint { font-size:.84rem; color:var(--text-muted); line-height:1.7; margin:-.6rem 0 1rem; }
.nutri-label { display:block; color:var(--text-color); font-weight:700; font-size:.92rem; margin:0 0 .5rem; }
.nutri-form-row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.nutri-measure { margin:1rem 0; }
.nutri-measure-head { display:flex; align-items:center; justify-content:space-between; gap:.55rem; margin-bottom:.45rem; }
.nutri-measure-head label { font-size:.93rem; font-weight:700; }
.nutri-number-wrap { display:flex; gap:.3rem; align-items:center; border:1px solid var(--border-color); border-radius:10px; padding:.15rem .5rem; background:var(--bg-color); }
.nutri-number-wrap input { max-width:72px; width:65px; min-width:0; text-align:center; color:var(--primary-color); font-weight:800; border:0; outline:0; padding:.3rem .1rem; background:transparent; }
.nutri-number-wrap span { color:var(--text-muted); font-size:.75rem; }
.nutrition-page input[type=range] { width:100%; accent-color:var(--primary-color); cursor:pointer; margin:.2rem 0 .5rem; }
.nutri-options { display:grid; gap:.55rem; }
.nutri-options.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.nutri-options.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.nutri-options .nutri-choice { width:100%; display:flex; gap:.3rem; align-items:center; flex-direction:column; justify-content:center; text-align:center; background:var(--bg-color); color:var(--text-color); padding:.8rem .5rem; border:1.5px solid var(--border-color); border-radius:12px; min-height:60px; font-size:.87rem; line-height:1.5; font-weight:700; }
.nutri-options .nutri-choice small { display:block; font-size:.74rem; color:var(--text-muted); font-weight:400; }
.nutri-options .nutri-choice i { color:var(--primary-color); font-size:1.15rem; }
.nutri-options .nutri-choice:hover { border-color:var(--primary-color); }
.nutri-options .nutri-choice[aria-pressed="true"] { background:var(--nutri-soft); border-color:var(--primary-color); color:var(--primary-color); box-shadow:inset 0 0 0 1px var(--primary-color); }
.nutri-options .nutri-choice[aria-pressed="true"] small { color:var(--text-color); }
.nutri-activity { display:grid; gap:.5rem; }
.nutri-activity .nutri-choice { text-align:right; align-items:flex-start; min-height:unset; padding:.75rem 1rem; }
.nutri-inline-note { font-size:.81rem; color:var(--text-muted); margin:.5rem 0 0; line-height:1.75; }
.nutri-custom { background:var(--bg-color); border:1px solid var(--border-color); border-radius:12px; padding:1rem; margin-top:.75rem; }
.nutri-custom-row { display:flex; justify-content:space-between; gap:.5rem; font-size:.84rem; }
.nutri-custom-row strong { color:var(--primary-color); }
.nutri-custom label { display:block; font-size:.82rem; font-weight:700; margin-top:.55rem; }
.nutri-banner { color:#fff; background:linear-gradient(120deg,#152b24,#205034); border:1px solid rgba(255,255,255,.1); border-radius:19px; padding:clamp(1.1rem,3vw,1.7rem); box-shadow:var(--box-shadow); min-width:0; }
.nutri-banner-top { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.nutri-banner h2 { font-size:.92rem; color:#e6f5ea; font-weight:600; margin:.65rem 0 .2rem; }
.nutri-target { display:flex; flex-wrap:wrap; align-items:baseline; gap:.55rem; }
.nutri-target strong { font-size:clamp(2rem,5vw,3rem); line-height:1.2; font-variant-numeric:tabular-nums; }
.nutri-target span { color:#b6eabe; }
.nutri-badge { display:inline-block; padding:.24rem .7rem; background:rgba(255,255,255,.12); color:#cff2d4; border-radius:999px; font-size:.78rem; font-weight:700; }
.nutri-banner .nutri-subtitle { font-size:.82rem; color:#d0dfd6; line-height:1.7; max-width:570px; margin:.6rem 0 0; }
.nutri-action-row { display:flex; gap:.45rem; flex-wrap:wrap; }
.nutri-action-row button { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:11px; padding:.63rem .8rem; white-space:nowrap; font-size:.84rem; }
.nutri-action-row button:first-child { background:var(--primary-color); }
.nutri-action-row button:hover { filter:brightness(1.13); }
.nutri-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; padding-top:1rem; margin-top:1.2rem; border-top:1px solid rgba(255,255,255,.2); }
.nutri-stat { background:rgba(255,255,255,.075); padding:.7rem .55rem; border:1px solid rgba(255,255,255,.12); border-radius:12px; min-width:0; }
.nutri-stat small { color:#ceded2; font-size:.75rem; display:block; line-height:1.5; }
.nutri-stat strong { font-size:1.1rem; display:block; overflow-wrap:anywhere; padding-top:.15rem; }
.nutri-stat span { font-size:.69rem; color:#d6e1d9; }
.nutri-macros { display:grid; grid-template-columns:180px minmax(0,1fr); gap:1rem; align-items:center; }
.nutri-donut-wrap { position:relative; width:174px; height:174px; margin:auto; }
.nutri-donut { transform:rotate(-90deg); width:100%; height:100%; }
.nutri-donut circle { transition:stroke-dasharray .2s ease, stroke-dashoffset .2s ease; }
.nutri-donut-label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; }
.nutri-donut-label strong { font-size:1.16rem; color:var(--text-color); }
.nutri-donut-label span { color:var(--text-muted); font-size:.72rem; }
.nutri-macro-list { display:grid; gap:.55rem; }
.nutri-macro { border:1px solid var(--border-color); border-radius:12px; padding:.8rem; display:grid; grid-template-columns:1fr auto; gap:.35rem; background:var(--bg-color); align-items:center; }
.nutri-macro strong { color:var(--text-color); }
.nutri-macro b { font-size:1.12rem; color:var(--primary-color); }
.nutri-macro small { font-size:.75rem; color:var(--text-muted); display:block; }
.nutri-macro .dot { width:10px; height:10px; border-radius:50%; display:inline-block; vertical-align:middle; margin-left:.4rem; }
.nutri-macro[data-macro="p"] .dot { background:#3b82f6; }
.nutri-macro[data-macro="c"] .dot { background:#ef9b16; }
.nutri-macro[data-macro="f"] .dot { background:#ed5674; }
.nutri-overview { margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--border-color); font-size:.8rem; color:var(--text-muted); display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; }
.nutri-meals { display:grid; gap:.7rem; }
.nutri-meal { border:1px solid var(--border-color); border-radius:14px; padding:1rem; background:var(--bg-color); display:flex; justify-content:space-between; align-items:center; gap:1rem; min-width:0; }
.nutri-meal-main { flex:1; min-width:0; }
.nutri-meal-top { display:flex; flex-wrap:wrap; gap:.35rem .7rem; align-items:center; }
.nutri-meal-top strong { color:var(--text-color); }
.nutri-meal-top span { color:var(--primary-color); font-weight:700; font-size:.78rem; }
.nutri-meal-main p { color:var(--text-muted); font-size:.81rem; line-height:1.7; margin:.4rem 0 0; }
.nutri-meal-numbers { display:grid; gap:.35rem; text-align:left; min-width:145px; }
.nutri-meal-numbers strong { color:var(--primary-color); font-size:1.1rem; }
.nutri-meal-numbers small { color:var(--text-muted); font-size:.76rem; }
.nutri-tips { background:var(--nutri-soft); }
.nutri-tips ul { list-style:disc; padding-right:1.2rem; }
.nutri-tips li { margin:.5rem 0; font-size:.89rem; line-height:1.85; }
.nutri-disclaimer { border-right:4px solid var(--accent-color); background:var(--surface-color); color:var(--text-muted); padding:.85rem 1rem; border-radius:12px; font-size:.84rem; line-height:1.8; margin:1.1rem 0 0; }
.nutri-invalid { color:var(--error-color); margin:.7rem 0 0; font-weight:700; font-size:.85rem; }
.nutrition-page .nutri-panel button:focus-visible, .nutrition-page .nutrition-hero button:focus-visible, .nutrition-page input:focus-visible, .nutri-modal button:focus-visible { outline:3px solid var(--accent-color); outline-offset:2px; }
.nutri-modal[hidden], .nutrition-page [hidden] { display:none !important; }
.nutri-modal { position:fixed; z-index:2200; inset:0; background:rgba(0,0,0,.68); display:grid; place-items:center; padding:1rem; }
.nutri-modal-dialog { background:var(--surface-color); color:var(--text-color); border-radius:19px; max-height:min(90dvh,800px); max-width:790px; width:100%; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 15px 60px rgba(0,0,0,.2); }
.nutri-modal-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; border-bottom:1px solid var(--border-color); padding:1rem 1.2rem; }
.nutri-modal-head h2 { font-size:1.1rem; margin:0; }
.nutri-modal-head button { color:var(--text-color); background:var(--bg-color); border:1px solid var(--border-color); border-radius:10px; width:38px; height:38px; }
.nutri-modal-body { padding:1.1rem; overflow:auto; overscroll-behavior:contain; }
.nutri-food-group { margin-bottom:1.2rem; padding:0; }
.nutri-food-group h3 { color:var(--primary-color); font-size:1rem; margin:0 0 .6rem; }
.nutri-food-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
.nutri-food-item { display:flex; flex-wrap:wrap; gap:.4rem; align-items:baseline; justify-content:space-between; padding:.7rem; background:var(--bg-color); border:1px solid var(--border-color); border-radius:10px; font-size:.82rem; }
.nutri-food-item strong { color:var(--primary-color); }
.nutri-toast { position:fixed; bottom:1.25rem; left:1.25rem; z-index:2300; border-radius:10px; background:var(--secondary-color); color:#fff; padding:.75rem 1rem; box-shadow:var(--hover-shadow); font-size:.87rem; max-width:calc(100% - 2.5rem); }
[data-theme="dark"] .nutrition-hero { background:linear-gradient(125deg,#123b21,#1d5f30); }
@media (max-width:980px) { .nutrition-grid { grid-template-columns:minmax(0,1fr); } .nutrition-page { margin:1.2rem auto 2rem; } }
@media (max-width:660px) { .nutrition-hero { align-items:flex-start; flex-wrap:wrap; gap:.75rem; } .nutri-hero-icon { width:45px; height:45px; flex-basis:45px; font-size:1.2rem; border-radius:12px; } .nutri-hero-copy { flex-basis:calc(100% - 65px); } .nutri-hero-actions { width:100%; justify-content:flex-start; } .nutri-hero-actions button { flex:1; } .nutri-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .nutri-macros { grid-template-columns:1fr; } .nutri-meal { flex-direction:column; align-items:stretch; } .nutri-meal-numbers { text-align:right; min-width:0; } .nutri-food-grid { grid-template-columns:1fr; } }
@media (max-width:390px) { .nutrition-page .nutri-options.three { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.3rem; } .nutri-options .nutri-choice { font-size:.75rem; padding:.55rem .25rem; } .nutri-banner-top .nutri-action-row button { flex:1; } .nutri-target strong { font-size:2rem; } }
@media print { #main-header, #main-footer, .ads-container, .nutri-side, .nutri-hero-actions, .nutri-action-row, .nutri-modal, .nutri-toast { display:none !important; } .nutrition-page { margin:0; max-width:none; } .nutrition-grid { display:block; } .nutri-results { display:block; } .nutri-panel,.nutri-banner { box-shadow:none; page-break-inside:avoid; break-inside:avoid; margin:0 0 1rem; } .nutrition-hero { background:#fff!important; color:#111; border:1px solid #ccc; } .nutrition-hero p { color:#333; } .nutri-hero-icon { display:none; } .nutri-banner { background:#e9f5ec!important; color:#142b1d; -webkit-print-color-adjust:exact; print-color-adjust:exact; } .nutri-banner h2,.nutri-banner .nutri-subtitle,.nutri-stat small,.nutri-stat span,.nutri-target span { color:#142b1d; } .nutri-stat { border-color:#bbb; } }
@media (prefers-reduced-motion:reduce) { .nutri-donut circle { transition:none; } }