/* MTBApp Poke Bowl Generator v7.3 — Styles */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0a;--surface:#141414;--card:#1a1a1a;--card2:#202020;
  --border:#282828;--border2:#333;
  --orange:#FF6A1A;--orange-glow:rgba(255,106,26,0.1);
  --cyan:#22d3ee;--cyan-glow:rgba(34,211,238,0.08);
  --green:#7CB342;--green-glow:rgba(124,179,66,0.1);
  --text:#fff;--muted:#bbb;--dim:#777;
  --protein:#e8826a;--carb:#7cb342;--fat:#f0c040;
  --mono:'JetBrains Mono',monospace;
  --display:'Barlow Condensed',sans-serif;
  --body:'Barlow',sans-serif;
}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.6}
#pbc-wrap{max-width:860px;margin:0 auto;padding:2rem 1.25rem 4rem}

/* HEADER */
.pbc-header{padding-bottom:1.5rem;border-bottom:1px solid var(--border);margin-bottom:2rem}
.pbc-title{font-family:var(--display);font-size:clamp(2.8rem,9vw,4.5rem);font-weight:900;color:var(--orange);line-height:1;letter-spacing:0.02em}
.pbc-title span{color:#fff}
.pbc-sub{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:0.08em;margin-top:0.5rem}

/* FILTER BAR */
.pbc-filters{display:flex;flex-direction:column;gap:1.2rem;margin-bottom:1.8rem}
.pbc-filter-label{font-family:var(--mono);font-size:9px;letter-spacing:0.15em;color:var(--orange);text-transform:uppercase;margin-bottom:0.4rem}
.pbc-cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0.5rem}
@media(max-width:480px){.pbc-cat-grid{grid-template-columns:repeat(3,1fr)}}
.pbc-cat-btn{padding:0.65rem 0.5rem;background:var(--surface);border:1.5px solid var(--border2);border-radius:8px;cursor:pointer;text-align:center;transition:all 0.18s;color:var(--muted)}
.pbc-cat-btn .cb-icon{font-size:1.4rem;display:block;margin-bottom:0.25rem}
.pbc-cat-btn .cb-label{font-family:var(--display);font-size:0.9rem;font-weight:700;letter-spacing:0.02em;display:block;color:var(--muted);transition:color 0.18s}
.pbc-cat-btn:hover{border-color:var(--orange-dim);background:rgba(255,106,26,0.05)}
.pbc-cat-btn.active{border-color:var(--orange);background:var(--orange-glow)}
.pbc-cat-btn.active .cb-label{color:var(--orange)}

.pbc-phase-row{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
.pbc-phase-btn{padding:0.75rem 1rem;background:var(--surface);border:1.5px solid var(--border2);border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:0.6rem;color:var(--muted);font-family:var(--body);font-size:0.9rem;font-weight:500;transition:all 0.18s}
.pbc-phase-btn .pi{font-size:1.1rem}
.pbc-phase-btn .pn{font-family:var(--display);font-size:1rem;font-weight:700;letter-spacing:0.02em;color:var(--muted);transition:color 0.18s}
.pbc-phase-btn .ps{font-family:var(--mono);font-size:8px;letter-spacing:0.06em;color:var(--dim);display:block;margin-top:1px}
.pbc-phase-btn:hover{border-color:var(--orange-dim);background:rgba(255,106,26,0.05)}
.pbc-phase-btn.active{border-color:var(--orange);background:var(--orange-glow)}
.pbc-phase-btn.active .pn{color:var(--orange)}
.pbc-phase-btn.active-green{border-color:var(--green);background:var(--green-glow)}
.pbc-phase-btn.active-green .pn{color:var(--green)}

/* GENERATE BUTTON */
.pbc-gen-btn{width:100%;padding:1.1rem;background:var(--orange);border:none;border-radius:8px;color:#fff;font-family:var(--display);font-size:1.6rem;font-weight:900;letter-spacing:0.06em;cursor:pointer;transition:all 0.2s;margin-top:0.25rem}
.pbc-gen-btn:hover{background:#e05510;transform:translateY(-1px)}
.pbc-gen-btn:active{transform:translateY(0)}

/* RESULTS HEADER */
.pbc-results-header{display:flex;gap:0.75rem;margin-bottom:1.5rem;flex-wrap:wrap;align-items:center}
.pbc-reroll-btn{flex:1;min-width:180px;padding:0.85rem 1.2rem;background:var(--surface);border:1.5px solid var(--orange);border-radius:8px;color:var(--orange);font-family:var(--display);font-size:1.2rem;font-weight:700;letter-spacing:0.05em;cursor:pointer;transition:all 0.2s}
.pbc-reroll-btn:hover{background:var(--orange-glow)}
.pbc-back-btn{padding:0.85rem 1.2rem;background:transparent;border:1.5px solid var(--border2);border-radius:8px;color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:0.1em;cursor:pointer;transition:all 0.2s;white-space:nowrap}
.pbc-back-btn:hover{border-color:var(--muted);color:var(--text)}
.pbc-result-meta{font-family:var(--mono);font-size:9px;letter-spacing:0.08em;color:var(--dim);margin-left:auto}

/* CARDS */
.pbc-cards{display:flex;flex-direction:column;gap:1.5rem}
.pbc-card{background:var(--card);border:1px solid var(--border2);border-radius:12px;overflow:hidden;opacity:0;transform:translateY(14px);transition:opacity 0.4s,transform 0.4s}
.pbc-card.vis{opacity:1;transform:none}

/* CARD HEADER BAND */
.pbc-card-band{height:5px}
.pbc-card-band.fish{background:linear-gradient(90deg,#1a6b8a,#22d3ee)}
.pbc-card-band.chicken{background:linear-gradient(90deg,#8a4a00,#f0a020)}
.pbc-card-band.meat{background:linear-gradient(90deg,#6a1a1a,#c04040)}
.pbc-card-band.vegetarian{background:linear-gradient(90deg,#2a5a10,#7cb342)}

/* CARD HEADER */
.pbc-card-hd{padding:1.2rem 1.5rem 0.8rem}
.pbc-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:0.5rem}
.pbc-card-num{font-family:var(--mono);font-size:9px;letter-spacing:0.15em;color:var(--orange)}
.pbc-card-cat{font-family:var(--mono);font-size:9px;letter-spacing:0.1em;padding:2px 8px;border-radius:3px;text-transform:uppercase}
.pbc-card-cat.fish{background:rgba(34,211,238,0.1);color:#22d3ee}
.pbc-card-cat.chicken{background:rgba(240,160,32,0.12);color:#f0a020}
.pbc-card-cat.meat{background:rgba(192,64,64,0.12);color:#c04040}
.pbc-card-cat.vegetarian{background:rgba(124,179,66,0.12);color:#7cb342}
.pbc-card-name{font-family:var(--display);font-size:1.65rem;font-weight:800;line-height:1.1;margin-bottom:0.3rem;letter-spacing:0.01em}
.pbc-card-tagline{font-size:0.82rem;color:var(--muted);line-height:1.5}
.pbc-card-pills{display:flex;gap:0.4rem;flex-wrap:wrap;margin-top:0.75rem}
.pbc-pill{font-family:var(--mono);font-size:8px;letter-spacing:0.08em;padding:3px 8px;border-radius:3px}
.pbc-pill-cost{background:rgba(255,106,26,0.1);color:var(--orange);border:1px solid rgba(255,106,26,0.2)}
.pbc-pill-phase{background:rgba(255,255,255,0.06);color:var(--dim);border:1px solid var(--border)}
.pbc-pill-serve{background:rgba(255,255,255,0.06);color:var(--dim);border:1px solid var(--border)}

/* MACROS BAR */
.pbc-macros{display:flex;gap:0.5rem;flex-wrap:wrap;padding:0.9rem 1.5rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.pbc-macro{display:flex;flex-direction:column;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:0.45rem 0.8rem;min-width:52px;text-align:center}
.pbc-macro .mv{font-size:1rem;font-weight:600;line-height:1.1}
.pbc-macro .ml{font-family:var(--mono);font-size:7px;letter-spacing:0.08em;color:var(--dim);margin-top:2px}
.pbc-macro.p .mv{color:var(--protein)}
.pbc-macro.c .mv{color:var(--carb)}
.pbc-macro.f .mv{color:var(--fat)}

/* COLLAPSE BUTTONS */
.pbc-collapse-btn{width:100%;padding:0.75rem 1.5rem;background:transparent;border:none;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:var(--cyan);font-family:var(--mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;transition:background 0.18s}
.pbc-collapse-btn:hover{background:var(--cyan-glow)}
.pbc-collapse-btn .arr{transition:transform 0.28s;color:var(--cyan)}
.pbc-collapse-btn.open .arr{transform:rotate(180deg)}

.pbc-collapse-panel{display:none;padding:1.2rem 1.5rem 1.4rem;border-top:1px solid var(--border);background:var(--card2)}
.pbc-collapse-panel.open{display:block}

/* INGREDIENT TABLE */
.pbc-tbl-title{font-family:var(--mono);font-size:9px;letter-spacing:0.12em;color:var(--orange);text-transform:uppercase;margin-bottom:0.65rem}
.pbc-tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:6px;margin-bottom:0}
.pbc-tbl{width:100%;border-collapse:collapse;font-size:0.76rem;table-layout:fixed}
.pbc-tbl th{padding:0.4rem 0.6rem;font-family:var(--mono);font-size:7.5px;letter-spacing:0.1em;color:var(--dim);text-transform:uppercase;border-bottom:1px solid var(--border);text-align:right;background:var(--surface)}
.pbc-tbl th:first-child{text-align:left;width:44%}
.pbc-tbl td{padding:0.38rem 0.6rem;border-bottom:1px solid var(--border);text-align:right;color:var(--muted);white-space:nowrap}
.pbc-tbl td:first-child{text-align:left;color:var(--text);white-space:normal;word-break:break-word}
.pbc-tbl tr:last-child td{border-bottom:none}
.pbc-tbl .row-total td{font-weight:600;color:var(--text);background:var(--surface);border-top:1px solid var(--border2)}
.pbc-tbl td.p{color:var(--protein)}
.pbc-tbl td.c{color:var(--carb)}
.pbc-tbl td.f{color:var(--fat)}

/* METHOD */
.pbc-method-title{font-family:var(--mono);font-size:9px;letter-spacing:0.12em;color:var(--orange);text-transform:uppercase;margin-bottom:0.65rem}
.pbc-steps{padding-left:1.1rem;display:flex;flex-direction:column;gap:0.45rem;margin-bottom:1.2rem}
.pbc-steps li{font-size:0.84rem;color:var(--muted);line-height:1.55}

/* PERF NOTE */
.pbc-perf{background:rgba(255,106,26,0.05);border-left:2px solid var(--orange);padding:0.8rem 1rem;border-radius:0 6px 6px 0;margin-top:1rem}
.pbc-perf-lbl{font-family:var(--mono);font-size:8px;letter-spacing:0.12em;color:var(--orange);text-transform:uppercase;margin-bottom:0.35rem}
.pbc-perf p{font-size:0.82rem;color:var(--muted);line-height:1.6}

/* SHARE */
.pbc-share{padding:0.9rem 1.5rem;display:flex;align-items:center;gap:0.5rem;border-top:1px solid var(--border);flex-wrap:wrap}
.pbc-share-lbl{font-family:var(--mono);font-size:8px;letter-spacing:0.1em;color:var(--dim);width:100%;margin-bottom:0.2rem}
.pbc-share-btn{padding:0.38rem 0.85rem;border-radius:4px;border:none;font-family:var(--mono);font-size:8px;letter-spacing:0.06em;cursor:pointer;transition:all 0.18s;font-weight:500}
.pbc-share-btn.wa{background:#25D366;color:#fff}
.pbc-share-btn.wa:hover{background:#1eab52}
.pbc-share-btn.fb{background:#1877F2;color:#fff}
.pbc-share-btn.fb:hover{background:#1465cc}
.pbc-share-btn.x{background:#000;color:#fff;border:1px solid #333}
.pbc-share-btn.x:hover{background:#111}
.pbc-share-btn.cp{background:transparent;color:var(--muted);border:1px solid var(--border2)}
.pbc-share-btn.cp:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-glow)}
.pbc-share-btn.done{background:transparent;border-color:var(--green);color:var(--green)}

/* SKELETON */
.pbc-skeleton{background:var(--card);border:1px solid var(--border2);border-radius:12px;height:140px;animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:0.4}50%{opacity:0.8}}

/* SECTIONS */
#pbc-form{display:block}
#pbc-results{display:none}
/* ── MODAL OVERLAY ── */
#pbc-modal-overlay{
  display:none;position:fixed;inset:0;z-index:99999;
  background:rgba(0,0,0,0.88);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
#pbc-modal-overlay.open{display:flex;align-items:flex-start;justify-content:center;padding:2rem 1rem 3rem}
#pbc-modal-box{
  position:relative;width:100%;max-width:860px;
  background:#0a0a0a;
  border:1px solid #333;border-radius:12px;
  animation:pbc-slide-in 0.28s ease;
}
@keyframes pbc-slide-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
#pbc-modal-close{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:flex-end;
  padding:0.8rem 1rem;
  background:#0a0a0a;
  border-bottom:1px solid #222;
  border-radius:12px 12px 0 0;
}
#pbc-modal-close button{
  background:transparent;border:1px solid #444;border-radius:6px;
  color:#aaa;font-size:1.1rem;padding:0.3rem 0.7rem;cursor:pointer;
  font-family:'JetBrains Mono',monospace;letter-spacing:0.05em;
  transition:all 0.18s;
}
#pbc-modal-close button:hover{border-color:#FF6A1A;color:#FF6A1A}