/* Supper 2.3 — personal, mobile-first interface */
:root {
  --bg: #f7f8f5;
  --paper: #fff;
  --ink: #233328;
  --deep: #2b5840;
  --green: #376a4e;
  --muted: #697970;
  --line: #e6ebe5;
  --shadow: none;
  --radius: 17px;
}
html{scroll-padding-bottom:96px}
body, button, input, select, textarea {font-family:'Rethink Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
h1,h2,h3,.serif,.brand,.ai-workhead h3,.swap-head h3,.price-total strong,.stat-value {font-family:'Rethink Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:-.035em}
h1{font-size:33px;font-weight:750;line-height:1.1;letter-spacing:-.045em}
h2{font-size:26px;font-weight:740}
h3{font-weight:720}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn{border-radius:12px;min-height:44px;padding:11px 16px;font-weight:700;box-shadow:none}
.btn.secondary{background:#edf2ed;color:#29593e;border:1px solid #dfe8e0}
.btn.ghost {border:1px solid var(--line)}
.icon-btn{border-radius:12px}
.shell{max-width:790px;padding:0 22px 120px}
.header{height:70px;margin:0 0 28px;border-bottom:1px solid var(--line)}
.brand{font-size:26px;font-weight:800;letter-spacing:-.08em;gap:8px}
.brand-symbol{height:35px;width:35px;border-radius:12px}
.brand-symbol svg{width:22px;height:22px}
.header-right .icon-btn{width:42px;height:42px}
.bottom-nav{max-width:none;padding:8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom));box-shadow:0 -7px 28px #152c1b0b;background:#fffc;justify-content:center}
.nav-btn{width:25%;max-width:150px;min-width:0;min-height:55px;padding:8px 4px;gap:5px;font-size:11px;font-weight:730;border-radius:13px}
.nav-btn span{font-size:11px!important}
.nav-btn svg{height:23px;width:23px}
.nav-btn.active{background:#edf4ec;color:#295c41}
.nav-btn.active:before{display:none}
.nav-count{right:calc(50% - 25px)}
.page-intro{align-items:center;margin:0 0 20px;gap:12px}
.page-intro h1{font-size:31px}
.page-intro p{font-size:12px;margin-top:5px;color:var(--muted)}
.page-intro .btn{flex:none;font-size:13px;padding:10px 15px}
.section-overline{font-size:10px;font-weight:800;letter-spacing:.14em;color:#779282}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.plan-top h1{margin:4px 0 0}
.quiet-control{border:1px solid var(--line);background:var(--paper);border-radius:12px;min-height:40px;padding:8px 13px;font-weight:680;font-size:12px;color:#3f5947;white-space:nowrap}
.quiet-control span{padding-left:5px;color:#879d8b}
.week-switch{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:7px;margin-bottom:12px}
.week-switch .round-btn{flex:none;background:#f1f5f0;border:0;width:38px;height:38px;font-size:24px;border-radius:11px}
.week-date{flex:1;text-align:center;font-size:13px;font-weight:750;white-space:nowrap}
.today-link{background:none;border:0;font-size:12px;font-weight:720;color:#37694d;padding:10px 8px}
.plan-actions{display:grid;grid-template-columns:1.05fr 1fr;gap:9px;margin-bottom:13px}
.plan-actions .btn{width:100%;font-size:13px;padding:11px 6px}
.compact-summary{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:0 0 16px;padding:11px 15px;border:1px solid var(--line);border-radius:14px;background:#fff;color:#647669;font-size:12px}
.compact-summary>div strong{font-size:20px;color:var(--ink);margin-right:4px}
.summary-price{display:flex;flex-direction:column;align-items:flex-end;gap:1px;border:0;background:none;color:var(--ink);padding:2px;text-align:right}
.summary-price strong{font-size:19px;line-height:1.15}
.summary-price span{font-size:10px;font-weight:600;color:#6d8575}
.day-grid{display:grid;grid-template-columns:1fr;gap:11px}
.day-card{border-radius:15px;box-shadow:none}
.day-card.today{border-color:#8caf95;box-shadow:0 0 0 1px #bbd8bf}
.day-header{padding:12px 16px 11px;border-bottom:1px solid #f1f3ee}
.day-name{font-size:14px;font-weight:800}
.day-date{font-size:12px;margin-left:9px;color:var(--muted)}
.today-pill{font-size:10px;letter-spacing:.08em;background:#ecf4eb;color:#3f7654;border-radius:7px;padding:4px 7px}
.day-card .slot-row{min-height:70px;gap:11px;padding:9px 14px;border-top:0}
.day-card .slot-row+.slot-row{border-top:1px solid #f2f3f0}
.day-card .food-art{width:50px;height:50px;flex:none;border-radius:12px;font-size:27px}
.day-card .food-art:before{width:41px;height:41px;border-width:1px}
.slot-label{font-size:10px;color:#78927e;text-transform:uppercase;letter-spacing:.065em;font-weight:760}
.slot-title{font-size:14px;line-height:1.25;font-weight:735;margin-top:2px}
.slot-meta{font-size:11px;margin-top:5px;gap:9px;color:#79857c}
.swap-btn{min-height:44px;min-width:44px;border:0;background:#f3f6f1;border-radius:11px;font-size:22px;color:#4e7859}
.slot-empty{min-height:68px;padding:8px 14px}
.slot-empty .empty-title{font-size:13px}
.slot-empty .btn{min-height:37px;padding:8px 15px;font-size:12px}
.card-footer{display:none}
.searchbar{padding:12px 14px;margin-bottom:12px;min-height:47px}
.filters{margin-bottom:16px;gap:8px;padding-bottom:4px;scrollbar-width:none}
.filters .filter{white-space:nowrap;min-height:38px;border-radius:11px;padding:8px 13px}
.recipe-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.recipe-card{border-radius:14px;box-shadow:none}
.recipe-card .food-art.recipe-art{height:122px;border-radius:14px 14px 0 0;font-size:50px}
.recipe-card-content{padding:12px}
.recipe-card h3{font-size:13px;font-weight:760;min-height:0;margin-bottom:7px;line-height:1.35}
.recipe-card .slot-meta{font-size:11px;gap:7px}
.fav-btn{min-height:36px;min-width:36px}
.shop-tools{padding:14px;background:var(--paper);border:1px solid var(--line);border-radius:15px;margin:0 0 12px}
.shop-tools .detail-row{margin-bottom:11px;font-size:13px}
.shop-tools .progress{margin-bottom:14px}
.shop-tools .add-inline{margin:0;gap:8px}
.shop-tools .add-inline input{min-width:0;flex:1}
.shop-tools .add-inline .btn{min-width:66px;padding:10px}
.shop-layout{display:block}
.shop-group{margin-bottom:18px}
.shop-group-title{margin:0 0 9px;font-size:11px;letter-spacing:.085em}
.shop-list{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.shop-item{min-height:59px;padding:11px 12px;gap:10px}
.shop-item .item-name{font-size:13px}
.shop-item .item-qty{font-size:12px;white-space:nowrap}
.price-manual-btn{min-width:40px;min-height:40px;background:#f1f6f1;border:0;border-radius:11px;font-size:14px}
.price-panel{padding:0;background:var(--paper);border:1px solid var(--line);border-radius:15px;margin:12px 0 20px;box-shadow:none}
.price-summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 14px}
.price-summary>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.price-summary strong{font-size:14px}
.price-summary span{font-size:11px;color:var(--muted)}
.price-summary .btn{font-size:11px;white-space:nowrap;min-height:38px;padding:8px 11px}
.price-body{padding:0 14px 15px;border-top:1px solid var(--line)}
.price-panel-actions{margin:14px 0 10px}
.price-panel-actions .btn{font-size:12px}
.price-body>.small{margin:10px 0;line-height:1.5}
.price-body .price-total{padding:12px;border:1px solid var(--line);box-shadow:none}
.price-body .price-total strong{font-size:24px}
.price-body .price-result{padding:11px}
.price-body .price-note{font-size:10px;margin-top:10px}
.price-empty-note{margin:10px 0}
.swap-panel{background:#eff5ed;border:1px solid #deeadb;padding:15px;border-radius:14px;margin:10px 0 13px;box-shadow:none}
.swap-head h3{font-size:17px;margin:0 0 11px;color:var(--ink)}
.swap-count{font-size:10px;background:#fff;color:#427c57;padding:5px 7px;border-radius:7px;letter-spacing:0;white-space:nowrap}
.swap-items{gap:9px}
.swap-item{border-radius:11px;padding:11px;gap:9px}
.swap-copy strong{font-size:13px}
.swap-copy span{font-size:11px}
.swap-actions .btn{min-height:38px;padding:9px 12px;font-size:12px}
.swap-disclaimer{font-size:10px;margin:10px 0 0}
.swap-applied{margin-top:10px;border-radius:10px}
.pantry-panel{padding:15px;border-radius:15px}
.pantry-title{margin-bottom:18px}
.pantry-add-grid{margin:0;grid-template-columns:minmax(0,1.7fr) 110px 85px 85px;gap:8px}
.pantry-add-grid input,.pantry-add-grid select{min-height:46px;border-radius:11px;background:#fff;padding:10px}
.pantry-add-grid .btn{padding:10px}
.pantry-hint{font-size:11px;color:var(--muted);line-height:1.5;margin:9px 0 12px!important}
.pantry-items{gap:8px;margin:12px 0 8px}
.pantry-tag{border:1px solid var(--line);background:#f7faf6;border-radius:12px;gap:0}
.pantry-tag .pantry-edit{font-size:12px;font-weight:740;color:var(--ink);max-width:none}
.pantry-tag .pantry-edit small{font-size:10px;color:#6e8575}
.pantry-tag>button:last-child{min-height:38px;min-width:34px}
.pantry-empty{padding:23px 10px}
.quick-add{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.quick-title{font-size:11px;font-weight:750;margin-bottom:9px;color:#768479}
.suggest-items{display:flex;flex-wrap:wrap;gap:7px}
.suggest-items button{border-radius:9px;min-height:36px;padding:7px 10px;font-size:11px}
.pantry-footnote{margin:14px 2px;font-size:11px;color:var(--muted);line-height:1.55}
.ai-title{margin-bottom:18px}
.back-link{display:block;background:none;border:0;padding:0 0 4px;color:#4f7b5a;font-size:12px;font-weight:730}
.connection-link{background:#f0f5ed;border:1px solid #e0e9df;border-radius:12px;min-height:42px;display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:12px;font-weight:730;white-space:nowrap}
.connection-link .ai-online-dot{flex:none;margin-right:0}
.ai-modes{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 12px;padding:1px 0 7px}
.ai-modes::-webkit-scrollbar{display:none}
.ai-mode{min-height:43px;flex:none;border-radius:11px;padding:10px 13px;white-space:nowrap;font-size:12px;gap:6px}
.ai-mode span{font-size:16px}
.ai-mode.selected{background:#305d44;box-shadow:none}
.ai-workbench{border-radius:15px;padding:18px;box-shadow:none}
.ai-workhead{margin:0 0 7px}
.ai-workhead h3{font-size:20px;margin:0;font-weight:770}
.ai-pref-line{font-size:11px;line-height:1.6;margin-top:8px}
.inline-pref{border:0;background:none;color:#36764e;font-size:11px;text-decoration:underline;text-underline-offset:2px;font-weight:750;padding:2px 4px}
.ai-workbench textarea{margin-top:15px;min-height:122px;border-radius:12px;padding:13px;font-size:14px;line-height:1.5}
.ai-workfoot{margin-top:12px}
.ai-workfoot .btn{font-size:13px}
.ai-preview{margin-top:18px;padding-top:18px}
.ai-preview-list{grid-template-columns:1fr;gap:8px;margin:12px 0}
.ai-preview-list article{padding:11px}
.ai-caution{font-size:10px;line-height:1.5;color:var(--muted);margin:15px 0}
.modal-body h2,.detail-main h2{font-family:'Rethink Sans',sans-serif;font-weight:760}
.modal-body{font-size:14px}
.field input,.field select,.field textarea{font-size:16px}
/* Phone layouts */
@media(max-width:620px){
  body{font-size:14px}
  .shell{padding:0 14px calc(96px + env(safe-area-inset-bottom))}
  .header{height:59px;margin:0 0 21px}
  .brand{font-size:25px}
  .brand-symbol{width:32px;height:32px}
  .header-right .icon-btn{height:41px;width:41px}
  .bottom-nav{justify-content:space-around;padding:7px 7px calc(6px + env(safe-area-inset-bottom))}
  .nav-btn{width:25%;min-height:51px;padding:6px 2px;gap:3px}
  .nav-btn span{font-size:10px!important}
  .nav-btn svg{height:21px;width:21px}
  .plan-top h1{font-size:31px}
  .week-switch{gap:4px}
  .week-switch .round-btn{width:34px;height:36px}
  .week-date{font-size:12px}
  .today-link{font-size:11px;padding:6px 5px}
  .plan-actions .btn{min-height:46px;font-size:12px}
  .compact-summary{margin-bottom:13px;padding:10px 12px}
  .compact-summary>div{font-size:11px}
  .summary-price strong{font-size:18px}
  .day-grid{gap:9px}
  .day-header{padding:11px 13px}
  .day-card .slot-row{padding:8px 11px;gap:9px}
  .day-card .food-art{width:44px;height:44px;font-size:25px}
  .day-card .food-art:before{width:36px;height:36px}
  .slot-title{font-size:13px}
  .slot-meta{font-size:10px}
  .swap-btn{min-width:42px;min-height:42px}
  .page-intro h1{font-size:30px}
  .page-intro{margin-bottom:16px}
  .recipe-grid{gap:9px}
  .recipe-card .food-art.recipe-art{height:108px;font-size:43px}
  .recipe-card .food-art.recipe-art:before{width:84px;height:84px}
  .recipe-card-content{padding:10px}
  .recipe-card h3{font-size:12px}
  .recipe-card .slot-meta{font-size:10px}
  .pantry-add-grid{grid-template-columns:minmax(0,1fr) minmax(67px,.65fr) minmax(75px,.6fr)}
  .pantry-add-grid input:first-child{grid-column:1/-1}
  .pantry-add-grid .btn{padding:8px;font-size:13px}
  .pantry-panel{padding:13px}
  .ai-modes{margin-bottom:10px}
  .ai-mode{min-height:43px}
  .ai-workbench{padding:15px}
  .ai-workhead h3{font-size:19px}
  .ai-workfoot{align-items:stretch}
  .ai-workfoot .btn{min-width:0}
  .price-panel{margin:10px 0 15px}
  .price-summary{padding:12px}
  .shop-item{padding:9px 11px}
  .modal-overlay{align-items:flex-end;padding:0}
  .modal{border-radius:20px 20px 0 0;max-height:94dvh;padding-bottom:env(safe-area-inset-bottom)}
  .modal-body{padding:20px 17px}
  .modal-body h2{font-size:26px}
}
@media(max-width:360px){
  .shell{padding-left:10px;padding-right:10px}
  .slot-meta{gap:5px}
  .week-date{font-size:11px}
  .price-summary{gap:5px}
  .price-summary .btn{padding:7px 9px}
  .ai-mode{font-size:11px;padding:9px}
}
@media(min-width:780px){
  .day-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .day-card .slot-row{min-height:82px}
  .recipe-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}