@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
:root {
  --cream:#f5f0e8; --warm-white:#faf8f4;
  --sage:#7a9e7e; --sage-dark:#4d7a52; --sage-light:#b5ceb8;
  --terracotta:#c4714f; --terracotta-light:#f0d8cc;
  --charcoal:#2c2c2c; --medium:#666; --light:#999;
  --border:#ddd5c8; --shadow:0 2px 16px rgba(0,0,0,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Ubuntu',sans-serif;background:var(--cream);color:var(--charcoal);min-height:100vh}

/* PRINT STYLES */
@media print {
  body{background:white;color:black;font-size:11pt}
  header,.tabs,.planner-layout>div:first-child,.plan-empty,.btn-primary,.add-plan-btn{display:none!important}
  .container{max-width:1280px;padding:12px;}
  .section-title{font-size:18pt;margin:8px 0 4px;page-break-after:avoid}
  .section-sub{font-size:9pt;margin-bottom:12px;color:#555}
  .planner-layout{display:block!important}
  .plan-meal-card{page-break-inside:avoid;border:1px solid #333;border-radius:4px;margin-bottom:12px;background:white;box-shadow:none}
  .pmc-header{background:#333!important;color:white;padding:8px 12px;font-size:12pt}
  .pmc-header button{display:none}
  .pmc-body{padding:10px 12px}
  .pmc-tag-row{margin-bottom:8px}
  .pmc-tag{background:#e0e0e0;color:#333;padding:2px 7px;border-radius:3px;font-size:8pt}
  .pmc-sg{font-size:9pt;font-weight:bold;margin:8px 0 4px;padding-top:6px;border-top:1px solid #ccc}
  .pmc-food-row{font-size:10pt;padding:3px 0;border-bottom:1px solid #eee}
  .pmc-food-qty{font-size:9pt}
  .print-header{display:block!important;text-align:center;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid #333}
  .print-header h1{font-size:20pt;margin-bottom:4px}
  .print-header p{font-size:9pt;color:#555}
  .print-totals{display:block!important;background:#f5f5f5;border:1px solid #ccc;border-radius:4px;padding:10px 12px;margin-bottom:16px;font-size:10pt}
  .print-totals strong{font-weight:bold}
}

header{background:var(--charcoal);color:var(--warm-white);padding:22px 36px;display:flex;align-items:center;gap:14px}
header .logo{font-size:24px}
header h1{font-family:'Ubuntu',serif;font-size:1.35rem;font-weight:400}
header p{font-size:0.78rem;color:#aaa;margin-top:2px}

.container{margin:0 auto;padding:0 22px 60px}

.tabs{display:flex;margin:26px 0 0;border-bottom:2px solid var(--border)}
.tab-btn{background:none;border:none;padding:10px 20px;font-family:'Ubuntu',sans-serif;font-size:0.75rem;font-weight:600;color:var(--light);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .2s;text-transform:uppercase;letter-spacing:.05em}
.tab-btn.active{color:var(--sage-dark);border-bottom-color:var(--sage-dark)}
.tab-btn:hover:not(.active){color:var(--charcoal)}
.tab-panel{display:none}
.tab-panel.active{display:block}

.section-title{font-family:'Ubuntu',serif;font-size:1.45rem;font-weight:400;margin:26px 0 4px}
.section-sub{color:var(--medium);font-size:0.86rem;margin-bottom:22px}

.card{background:var(--warm-white);border:1px solid var(--border);border-radius:12px;padding:20px;box-shadow:var(--shadow)}
.card-title{font-family:'Ubuntu',serif;font-size:.98rem;font-weight:700;margin-bottom:15px;display:flex;align-items:center;gap:7px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--sage);flex-shrink:0;display:inline-block}
.step-badge{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;background:var(--sage-dark);color:white;font-size:.7rem;font-weight:700;margin-right:5px;flex-shrink:0}

.field-label{font-size:.72rem;font-weight:700;color:var(--medium);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:6px}
.text-input{width:100%;border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-family:'Ubuntu',sans-serif;font-size:.88rem;background:var(--cream);color:var(--charcoal);outline:none;transition:border-color .2s}
.text-input:focus{border-color:var(--sage)}
.text-input::placeholder{color:var(--light)}

.preset-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.preset-btn{background:var(--cream);border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-family:'Ubuntu',sans-serif;font-size:.77rem;cursor:pointer;color:var(--charcoal);transition:all .15s;white-space:nowrap}
.preset-btn:hover{background:var(--sage-light);border-color:var(--sage);color:var(--sage-dark)}
.preset-btn.selected{background:var(--sage-dark);border-color:var(--sage-dark);color:white}

.equiv-row{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.equiv-row select,.equiv-row input[type=number]{border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-family:'Ubuntu',sans-serif;font-size:.72rem;background:var(--cream);color:var(--charcoal);outline:none;transition:border-color .2s}
.equiv-row select:focus,.equiv-row input:focus{border-color:var(--sage)}
.equiv-row select{flex:1}
.equiv-row input[type=number]{width:60px}
.remove-btn{background:none;border:none;color:var(--light);cursor:pointer;font-size:1rem;padding:3px 5px;border-radius:4px;transition:color .15s;line-height:1}
.remove-btn:hover{color:var(--terracotta)}
.add-equiv-btn{background:none;border:1px dashed var(--sage-light);border-radius:8px;padding:7px 13px;font-family:'Ubuntu',sans-serif;font-size:.81rem;color:var(--sage-dark);cursor:pointer;width:100%;transition:all .2s;margin-top:2px}
.add-equiv-btn:hover{background:var(--sage-light);color:white;border-style:solid}

.btn-primary{background:var(--sage-dark);color:white;border:none;border-radius:8px;padding:11px 18px;font-family:'Ubuntu',sans-serif;font-size:.87rem;font-weight:600;cursor:pointer;width:100%;transition:background .2s}
.btn-primary:hover{background:var(--sage)}

/* BUILDER 3-col layout */
.builder-layout{display:grid;grid-template-columns:290px 1fr 270px;gap:18px;margin-top:22px;align-items:start}
@media(max-width:1020px){.builder-layout{grid-template-columns:1fr 1fr}.step3-col{grid-column:1/-1}}
@media(max-width:640px){.builder-layout{grid-template-columns:1fr}}

/*  FOOD OPTIONS */
.group-section{margin-bottom:18px}
.group-section-hd{font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--terracotta);margin-bottom:7px;padding-bottom:4px;border-bottom:1px solid var(--terracotta-light);display:flex;align-items:center;justify-content:space-between}
.slot-pill{background:var(--terracotta-light);color:var(--terracotta);font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:20px}
.slot-done{color:var(--sage-dark);font-weight:600;font-size:.71rem}
.sg-label{font-size:.72rem;color:var(--medium);font-weight:600;margin:9px 0 5px}
.food-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:7px}

.food-option{background:var(--cream);border:2px solid var(--border);border-radius:9px;padding:8px 10px;font-size:.81rem;transition:all .15s;user-select:none;position:relative}
.food-option:hover:not(.dimmed){border-color:var(--sage);background:var(--warm-white)}
.food-option.selected{border-color:var(--sage-dark);background:linear-gradient(135deg,#e8f2e9,#f0f7f1);box-shadow:0 0 0 2px rgba(77,122,82,.1)}
.fo-name{font-weight:500;color:var(--charcoal);padding-right:12px}
.fo-qty{color:var(--sage-dark);font-size:.76rem;margin-top:2px}
.fo-note{color:var(--light);font-size:.71rem;font-style:italic;margin-top:2px}
.food-option.dimmed{opacity:.32;cursor:not-allowed}

/* Quantity controls */
.fo-qty-controls{display:flex;align-items:center;gap:4px;margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}
.qty-btn{background:var(--sage-dark);color:white;border:none;border-radius:5px;width:24px;height:24px;font-size:.85rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;padding:0;line-height:1}
.qty-btn:hover{background:var(--sage)}
.qty-btn:disabled{background:#ccc;cursor:not-allowed}
.qty-display{flex:1;text-align:center;font-weight:600;color:var(--sage-dark);font-size:.82rem}

.chooser-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;color:var(--light);text-align:center}
.chooser-scroll{max-height:580px;overflow-y:auto;padding-right:3px}
.chooser-scroll::-webkit-scrollbar{width:3px}
.chooser-scroll::-webkit-scrollbar-thumb{background:var(--sage-light);border-radius:3px}

/* SUMMARY */
.summary-empty{color:var(--light);font-size:.83rem;text-align:center;padding:26px 0}
.summary-item{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)}
.summary-item:last-child{border-bottom:none}
.si-body{flex:1}
.si-name{font-size:.84rem;font-weight:500}
.si-qty{font-size:.77rem;color:var(--sage-dark)}
.si-grp{font-size:.7rem;color:var(--light)}
.si-remove{background:none;border:none;color:var(--light);cursor:pointer;font-size:.88rem;padding:2px;transition:color .15s;flex-shrink:0;margin-top:1px}
.si-remove:hover{color:var(--terracotta)}
.sg-divider{font-size:.69rem;font-weight:700;color:var(--medium);text-transform:uppercase;letter-spacing:.06em;padding:7px 0 3px;border-top:1px solid var(--border);margin-top:4px}

.add-plan-btn{background:var(--terracotta);color:white;border:none;border-radius:8px;padding:11px 16px;font-family:'Ubuntu',sans-serif;font-size:.87rem;font-weight:600;cursor:pointer;width:100%;margin-top:13px;transition:background .2s}
.add-plan-btn:hover{background:#b5603e}
.add-plan-btn:disabled{background:#ccc;cursor:not-allowed}

/* DAILY PLAN */
.planner-layout{display:grid;grid-template-columns:300px 1fr;gap:22px;margin-top:22px;align-items:start}
@media(max-width:820px){.planner-layout{grid-template-columns:1fr}}

.plan-meal-card{background:var(--warm-white);border:1px solid var(--border);border-radius:11px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:13px}
.pmc-header{background:var(--charcoal);color:white;padding:10px 15px;font-size:.86rem;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.pmc-body{padding:11px 15px}
.pmc-tag-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.pmc-tag{background:var(--sage-light);color:var(--sage-dark);font-size:.71rem;font-weight:600;padding:2px 8px;border-radius:20px}
.pmc-sg{font-size:.69rem;font-weight:700;color:var(--medium);text-transform:uppercase;letter-spacing:.05em;margin:8px 0 3px;padding-top:6px;border-top:1px solid var(--border)}
.pmc-food-row{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;border-bottom:1px solid var(--border);font-size:.82rem}
.pmc-food-row:last-child{border-bottom:none}
.pmc-food-qty{color:var(--sage-dark);font-weight:500;font-size:.78rem;white-space:nowrap;margin-left:6px}
.plan-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:190px;color:var(--light);text-align:center}

/* REFERENCE */
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(295px,1fr));gap:17px;margin-top:22px}
.ref-card{background:var(--warm-white);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.ref-card-hd{padding:12px 16px;font-family:'Ubuntu',serif;font-size:.91rem;font-weight:700;color:white}
.g1{background:#6b9e8c}.g2{background:#6b9e70}.g3{background:#e09b4c}.g4{background:#c4914f}.g5{background:#b55c42}.g6{background:#7a6b9e}
.ref-card-body{padding:12px 16px}
.ref-macro{font-size:.76rem;color:var(--medium);margin-bottom:8px;font-style:italic;line-height:1.5}
.ref-list{max-height:360px;overflow-y:auto;padding-right:3px}
.ref-list::-webkit-scrollbar{width:3px}
.ref-list::-webkit-scrollbar-thumb{background:var(--sage-light);border-radius:3px}
.ref-item{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;border-bottom:1px solid var(--border);font-size:.8rem}
.ref-item:last-child{border-bottom:none}
.ri-qty{color:var(--sage-dark);font-weight:500;white-space:nowrap;margin-left:7px}
.ref-sg{font-size:.7rem;font-weight:700;color:var(--medium);text-transform:uppercase;letter-spacing:.05em;margin:10px 0 4px;padding-top:6px;border-top:1px solid var(--border)}

@media(max-width:600px){
  header{padding:14px}
  header h1{font-size:1.05rem}
  .container{padding:0 9px 40px}
  .tab-btn{padding:8px 10px;font-size:.68rem}
}