:root{
  --bg:#e9ecef;
  --text:#ffffff;
  --ink:#1b1f24;
  --card:#ffffff;
  --border:rgba(255,255,255,.18);
  --muted:rgba(255,255,255,.78);
  --shadow:0 10px 30px rgba(0,0,0,.16);
  --radius:24px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:#111}
body.mobile-body{max-width:430px;margin:0 auto;min-height:100vh;background:#dfe3e6}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
.app-shell{min-height:100vh;background:#d9dcdf}
.top-strip{display:flex;align-items:center;gap:12px;padding:14px 16px;position:static !important;top:auto !important;bottom:auto !important;left:auto !important;right:auto !important;z-index:auto !important;transform:none !important}
.icon-circle{width:40px;height:40px;border-radius:50%;border:none;background:#fff;color:#111;font-size:32px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);cursor:pointer}
.icon-circle.small{width:38px;height:38px;font-size:30px;flex-shrink:0}
.weight-box{margin-left:auto;text-align:right;color:#fff;display:block}
.weight-title{display:block;font-size:28px;font-weight:700;line-height:.95}
.weight-box strong{display:block;font-size:32px;line-height:1;font-weight:700}
.meal-card,.summary-card{color:#fff;padding:28px 18px 22px}
.meal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.meal-card h2{margin:0;font-size:2.5rem;line-height:.92;font-weight:700;letter-spacing:-1px}
.subtitle{font-size:1.05rem;font-weight:700;margin-top:10px}
.macro-line{font-size:.95rem;line-height:1.35;margin-top:8px;color:rgba(255,255,255,.95)}
.mini-summary{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mini-summary span,.tag{background:rgba(255,255,255,.16);padding:7px 10px;border-radius:999px;font-size:.8rem}
.mini-summary.empty{display:block;font-size:.88rem;color:rgba(255,255,255,.9)}
.summary-card{background:#f3f3f3;color:#fff;padding:0}
.summary-grid{display:grid;grid-template-columns:1fr 1fr}
.summary-box{padding:14px 16px;min-height:100px}
.summary-gray{background:#aeb4bb}
.summary-yellow{background:#F4D35E;color:#fff}
.summary-blue{background:#3A86FF}
.summary-green{background:#00c853}
.summary-box.block{min-height:132px}
.summary-title{font-size:1rem;font-weight:700;line-height:1.05}
.summary-title.light{font-size:1.15rem}
.summary-title.muted{font-weight:400;opacity:.9;font-size:.95rem}
.summary-strong{font-size:1.9rem;font-weight:700;line-height:1;margin-top:6px}
.summary-small{font-size:.9rem;margin-top:8px;line-height:1.2}
.right{text-align:right}
.activity-list{font-size:.84rem;line-height:1.35;margin-top:8px;opacity:.95}
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:25}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.modal-card{position:relative;background:#fff;border-radius:24px;padding:20px;box-shadow:var(--shadow);margin:10vh 14px 0;color:#111}
.modal-card.large{margin-top:12vh}
.modal-card h3{margin:0 0 16px;font-size:1.4rem}
.modal-link,.primary-btn,.secondary-btn,.back-link{display:block;width:100%;border:none;border-radius:16px;padding:14px 16px;text-align:center;cursor:pointer}
.modal-link,.primary-btn{background:#111;color:#fff;margin:10px 0}
.secondary-btn{background:#e9ecef;color:#111;margin-top:10px}
.page-shell{padding:14px}
.page-topbar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.page-topbar h1{margin:0;font-size:1.55rem;color:#111}
.back-link{width:auto;padding:10px 14px;background:#fff;box-shadow:var(--shadow);font-weight:700}
.page-card{background:#fff;border-radius:24px;padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
.page-card h2{margin:0 0 14px;font-size:1.2rem;color:#111}
.stack-form label,.stack-form legend{display:block;font-size:.95rem;font-weight:700;color:#111;margin-bottom:10px}
.stack-form input,.stack-form select{width:100%;border:1px solid #d8dde3;border-radius:16px;padding:13px 14px;margin-top:8px;background:#fff}
.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check-fieldset{border:none;padding:0;margin:6px 0 12px}
.chips-grid{display:flex;flex-wrap:wrap;gap:8px}
.chip-check{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;background:#f3f5f7;border-radius:999px;font-size:.88rem}
.inline-actions{margin-bottom:12px}
.components-list{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.component-row{display:grid;grid-template-columns:1.2fr .8fr auto;gap:8px;align-items:end;padding:10px;background:#f8f9fa;border-radius:18px}
.component-row button{width:48px;height:48px;border:none;border-radius:14px;background:#dc3545;color:#fff;font-size:1.4rem}
.page-note{font-size:.85rem;color:#495057;margin-bottom:12px}
.preview-box,.empty-card{background:#f8f9fa;border-radius:18px;padding:14px;color:#495057}
.list-cards{display:flex;flex-direction:column;gap:10px}
.list-card{background:#f8f9fa;padding:14px;border-radius:18px;color:#111}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tag{background:#e9ecef;color:#111}
.form-feedback{font-size:.9rem;margin-top:10px;color:#0a7a29;min-height:18px}
.chart-box{background:#f8f9fa;border-radius:18px;padding:12px;min-height:240px}
.chart-svg{width:100%;height:220px;display:block}
.chart-labels{display:flex;justify-content:space-between;gap:6px;font-size:.75rem;color:#495057;margin-top:8px}
@media (max-width:380px){
  .meal-card h2{font-size:2.45rem}
  .weight-title{font-size:22px}
  .weight-box strong{font-size:26px}
}

.component-qty-wrap{display:flex;flex-direction:column;gap:4px;flex:1}
.component-hint{font-size:.72rem;color:#6c757d;font-weight:700;padding-left:2px}