/* ============================================================
   Biller UI mocks — hand-built representations of the live
   biller.app screens (no raw product screenshots). Dark theme
   matching the real product: near-black canvas, amber accent.
   All classes are namespaced .bm- to avoid clashing with the site.
   ============================================================ */
.bm{
  --bg:#0f1116; --pnl:#191d24; --p2:#232830; --brd:#2b313b;
  --tx:#e8eaed; --mu:#8b909a; --g:#f5a623; --grn:#46c46a;
  --red:#ef5b5b; --blu:#4a90e2; --pur:#9b7ad6;
  background:var(--bg); color:var(--tx);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  border-radius:10px; overflow:hidden; width:100%;
  font-size:12px; line-height:1.3; letter-spacing:.1px;
}
.bm *{box-sizing:border-box; margin:0;}
.bm u{text-decoration:underline; text-underline-offset:2px;}

/* ---- desktop shell: left nav + main ---- */
.bm-d{aspect-ratio:16/10; display:flex;}
.bm-nav{width:28%; min-width:132px; background:#121519; border-right:1px solid var(--brd);
  padding:14px 11px; display:flex; flex-direction:column; gap:13px;}
.bm-nav .r{display:flex; gap:8px;}
.bm-nav .r i{width:15px; height:15px; border-radius:4px; background:var(--p2); flex:none; margin-top:1px;}
.bm-nav .r.on i{background:var(--g);}
.bm-nav .r.on{background:rgba(245,166,35,.08); border-left:2px solid var(--g);
  margin:-4px -11px -4px -11px; padding:4px 11px; border-radius:0 6px 6px 0;}
.bm-nav .r b{font-weight:600; font-size:10.5px; display:block; color:var(--tx);}
.bm-nav .r s{font-size:8px; color:var(--mu); text-decoration:none; display:block;}
.bm-tab{display:flex; justify-content:space-between; margin-top:auto;
  background:var(--p2); border:1px solid var(--brd); border-radius:9px; padding:7px 12px;}
.bm-tab span{width:14px; height:13px; border-radius:3px; background:var(--mu);}
.bm-tab span.on{background:var(--g);}
.bm-main{flex:1; padding:15px 16px; position:relative; overflow:hidden;}

/* shared bits */
.bm-crumb{display:inline-flex; align-items:center; gap:8px; background:var(--p2);
  border:1px solid var(--brd); border-radius:8px; padding:6px 10px; font-size:10px;}
.bm-crumb b{font-weight:600;} .bm-crumb em{color:var(--mu); font-style:normal;}
.bm-h{font-size:8.5px; letter-spacing:.14em; color:var(--mu); text-transform:uppercase; font-weight:700;}
.bm-btn{display:inline-flex; align-items:center; gap:6px; border-radius:8px;
  padding:7px 12px; font-size:10px; font-weight:600; white-space:nowrap;}
.bm-btn.p{background:var(--g); color:#141414;}
.bm-btn.o{background:var(--pnl); border:1px solid var(--brd); color:var(--tx);}
.bm-btn.mut{background:var(--p2); color:var(--mu);}
.bm-card{background:var(--pnl); border:1px solid var(--brd); border-radius:10px; padding:12px;}

/* ---- billing board ---- */
.bm-bill-l{width:44%; border-right:1px solid var(--brd); padding:13px; display:flex; flex-direction:column; gap:9px;}
.bm-usage{background:var(--pnl); border:1px solid var(--brd); border-radius:8px;
  padding:7px 9px; font-size:9px; color:var(--g); font-weight:600;}
.bm-newbill{display:flex; gap:8px; align-items:center;}
.bm-newbill span{flex:1; background:var(--p2); border:1px solid var(--brd); border-radius:8px;
  padding:8px 10px; color:var(--mu); font-size:10px;}
.bm-newbill b{width:32px; height:32px; border-radius:9px; background:var(--g); color:#141414;
  display:grid; place-items:center; font-size:17px; font-weight:600; flex:none;}
.bm-drop{background:var(--pnl); border:1px solid var(--brd); border-radius:7px;
  padding:6px 10px; font-size:9.5px; width:max-content;}
.bm-bills{list-style:none; display:flex; flex-direction:column; gap:2px; padding:0;}
.bm-bills li{display:flex; align-items:center; gap:9px; padding:7px 4px; border-bottom:1px solid rgba(255,255,255,.03);}
.bm-bills li i{width:8px; height:8px; border-radius:50%; flex:none;}
.bm-bills li div{flex:1;}
.bm-bills li b{display:block; font-size:10.5px; font-weight:600;}
.bm-bills li s{display:block; font-size:7.5px; text-decoration:none; font-weight:600;}
.bm-bills li em{font-style:normal; font-size:10px; color:var(--mu);}
.bm-empty{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:20px; text-align:center;}
.bm-empty .ic{width:34px; height:34px; border-radius:8px; border:1.5px solid var(--p2);}
.bm-empty b{letter-spacing:.14em; font-size:11px;}
.bm-empty p{color:var(--mu); font-size:9.5px; max-width:160px;}

/* ---- open bill (desktop + phone share these) ---- */
.bm-bill-head{display:flex; align-items:center; gap:8px; margin-bottom:12px;}
.bm-bill-head .back{width:22px; height:22px; border-radius:50%; border:1px solid var(--brd); flex:none;}
.bm-bill-head b{font-size:13px;} .bm-bill-head span{color:var(--mu); font-size:9px;}
.bm-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px;}
.bm-tile{background:var(--pnl); border:1px solid var(--brd); border-radius:9px; padding:8px 10px;}
.bm-tile.tot{border-left:3px solid var(--g);}
.bm-tile s{display:block; font-size:7.5px; color:var(--mu); text-decoration:none; letter-spacing:.1em;}
.bm-tile b{font-size:16px; font-weight:700;}
.bm-action{background:var(--pnl); border:1px solid var(--brd); border-radius:10px; padding:11px; margin-bottom:11px;}
.bm-action p{font-size:9.5px; color:var(--tx); margin-bottom:9px;}
.bm-item{display:flex; align-items:center; gap:9px; background:var(--pnl); border:1px solid var(--brd);
  border-radius:9px; padding:7px 9px; margin-bottom:7px;}
.bm-item .step{width:24px; height:24px; border-radius:6px; border:1px solid var(--brd); display:grid; place-items:center; color:var(--mu); font-size:13px; flex:none;}
.bm-item div{flex:1;} .bm-item b{font-size:10.5px;} .bm-item s{display:block; font-size:9px; color:var(--mu); text-decoration:none;}

/* ---- menu scan modal ---- */
.bm-ai{background:linear-gradient(90deg,rgba(245,166,35,.12),rgba(245,166,35,.03));
  border:1px solid rgba(245,166,35,.28); border-left:3px solid var(--g);
  border-radius:10px; padding:11px 13px; margin:10px 0;}
.bm-ai b{display:block; font-size:13px; font-weight:600; margin:3px 0;}
.bm-ai p{font-size:9.5px; color:var(--mu); margin-bottom:9px;}
.bm-modal{position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  width:74%; background:#1b1f27; border:1px solid var(--brd); border-radius:12px;
  padding:13px; box-shadow:0 20px 50px rgba(0,0,0,.5);}
.bm-modal b{font-size:12px; font-weight:600;}
.bm-modal p{font-size:9px; color:var(--mu); margin:4px 0 10px;}
.bm-drop-area{border:1.5px dashed var(--mu); border-radius:10px; background:#14171c;
  padding:16px; text-align:center; color:var(--tx); font-size:9.5px;}
.bm-drop-area span{display:block; color:var(--mu); font-size:8px; margin-top:3px;}
.bm-modal-foot{display:flex; gap:8px; margin-top:11px;}
.bm-modal-foot .bm-btn{flex:1; justify-content:center;}

/* ---- kitchen ticket wall ---- */
.bm-kwrap{padding:0;}
.bm-ktop{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--brd);}
.bm-ktop b{letter-spacing:.06em; font-size:12px;} .bm-ktop s{color:var(--mu); font-size:9px; text-decoration:none; letter-spacing:.12em;}
.bm-ktick{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:16px;}
.bm-tk{background:var(--pnl); border:1px solid var(--brd); border-radius:10px; padding:10px; border-top:3px solid var(--grn);}
.bm-tk.amber{border-top-color:var(--g);} .bm-tk.red{border-top-color:var(--red);} .bm-tk.pur{border-top-color:var(--pur);}
.bm-tk .no{font-size:10px; font-weight:700;} .bm-tk .no s{color:var(--mu); font-weight:600; text-decoration:none; font-size:7.5px;}
.bm-tk .time{font-size:15px; font-weight:800; margin:3px 0 6px;}
.bm-bar{height:4px; border-radius:3px; background:var(--p2); overflow:hidden; margin-bottom:8px;}
.bm-bar i{display:block; height:100%; border-radius:3px;}
.bm-tk .grp{font-size:7px; color:var(--mu); letter-spacing:.12em; margin:6px 0 3px;}
.bm-tk .li{background:var(--p2); border-radius:6px; padding:5px 7px; font-size:9px; margin-bottom:4px;}
.bm-tk .li b{color:var(--g);}
.bm-ready{background:var(--grn); color:#0c1b10; font-size:7px; font-weight:800; padding:2px 6px; border-radius:20px; letter-spacing:.06em;}

/* ---- guest QR ordering (centered) ---- */
.bm-guest{aspect-ratio:16/10; padding:16px; display:flex; flex-direction:column; align-items:center; gap:12px; overflow-y:hidden;}
.bm-guest .t{display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600;}
.bm-guest .t i{width:16px; height:14px; border-radius:3px; background:var(--blu);}
.bm-gcard{width:min(360px,90%); background:var(--pnl); border:1px solid var(--brd); border-radius:12px; padding:14px;}
.bm-gcard h5{font-size:12px; font-weight:600; margin-bottom:4px;}
.bm-gcard p{font-size:9px; color:var(--mu); margin-bottom:9px;}
.bm-gcard .warn{color:var(--red); font-size:9px; margin-bottom:9px;}
.bm-input{background:var(--p2); border:1px solid var(--brd); border-radius:8px; padding:9px 10px; font-size:9.5px; color:var(--mu); margin-bottom:7px;}
.bm-guest .or{font-size:8px; letter-spacing:.12em; color:var(--mu);}
.bm-full{display:block; text-align:center;}

/* ---- inventory ---- */
.bm-tabs2{display:flex; gap:20px; border-bottom:1px solid var(--brd); margin:12px 0; font-size:10px;}
.bm-tabs2 span{padding-bottom:7px; color:var(--mu);}
.bm-tabs2 span.on{color:var(--g); border-bottom:2px solid var(--g);}
.bm-chip{display:inline-block; background:var(--p2); border:1px solid var(--brd); border-radius:20px; padding:4px 10px; font-size:9px; margin-bottom:10px;}
.bm-invrow{display:flex; align-items:center; justify-content:space-between; background:var(--pnl);
  border:1px solid var(--brd); border-radius:9px; padding:10px 12px;}
.bm-invrow .l{display:flex; align-items:center; gap:8px; font-size:10.5px;}
.bm-invrow .l i{width:8px; height:8px; border-radius:50%; background:var(--g);}
.bm-invrow .d{color:var(--g); font-size:9.5px; font-weight:600;}

/* ---- insights ---- */
.bm-report{border-left:3px solid var(--g); background:var(--pnl); border:1px solid var(--brd);
  border-left:3px solid var(--g); border-radius:10px; padding:12px; margin-bottom:12px;}
.bm-lang{display:inline-flex; gap:0; border-radius:20px; overflow:hidden; border:1px solid var(--brd); margin-bottom:8px;}
.bm-lang span{font-size:8px; padding:3px 9px; color:var(--mu);} .bm-lang span.on{background:var(--g); color:#141414; font-weight:700;}
.bm-report .big{font-size:14px; font-weight:700; margin-bottom:6px;}
.bm-report li{font-size:9px; color:var(--mu); margin:3px 0 3px 14px;}
.bm-todo{background:rgba(245,166,35,.07); border-left:2px solid var(--g); border-radius:6px; padding:8px 10px; margin-top:9px;}
.bm-todo s{color:var(--g); font-size:7.5px; letter-spacing:.1em; text-decoration:none; font-weight:700; display:block; margin-bottom:3px;}
.bm-todo p{font-size:9px; color:var(--tx);}
.bm-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.bm-stat{background:var(--pnl); border:1px solid var(--brd); border-radius:10px; padding:10px;}
.bm-stat .top{display:flex; justify-content:space-between; align-items:center;}
.bm-stat .top b{font-size:9px; letter-spacing:.1em;} .bm-stat .top em{font-style:normal; font-size:13px; font-weight:700;}
.bm-stat svg{width:100%; height:38px; margin-top:6px; display:block;}

/* ---- phone frame ---- */
.bm-p{max-width:290px; margin:0 auto; aspect-ratio:390/844; padding:16px; overflow:hidden; display:flex; flex-direction:column;}
.bm-p .bm-tiles{grid-template-columns:1fr 1fr;}
.bm-p .bm-tiles .tot{grid-column:1 / -1;}

/* responsiveness: keep the desktop nav readable on small viewports */
@media (max-width:520px){
  .bm{font-size:11px;}
  .bm-ktick{grid-template-columns:repeat(2,1fr);}
}