:root{
  --primary:#ff2d2d; --primary-dark:#b11212; --accent:#ffb020;
  --gold:#ffd166; --gold-dark:#ffb020; --gold-soft: rgba(255,176,32,0.16);
  --bg:#0b0b10; --card:rgba(255,255,255,0.06); --card-2:rgba(255,255,255,0.08);
  --text:#f5f7fb; --muted:rgba(245,247,251,0.65);
  --shadow-sm:0 10px 26px rgba(0,0,0,0.30);
  --shadow-md:0 18px 60px rgba(0,0,0,0.45);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Lexend',sans-serif;
  background:
    radial-gradient(900px 420px at 20% -10%, rgba(255,45,45,0.22), transparent 60%),
    radial-gradient(700px 320px at 95% 0%, rgba(255,176,32,0.14), transparent 55%),
    radial-gradient(700px 420px at 30% 110%, rgba(99,102,241,0.14), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 10px, rgba(255,255,255,0.00) 10px 22px),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{
  max-width:480px; margin:auto;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  position:relative;
  animation:pageIn .8s cubic-bezier(.2,.8,.2,1);
}
@keyframes pageIn{ from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }

.header{
  position:relative; color:#fff; text-align:center;
  padding:calc(58px + var(--safe-top)) 18px 34px;
  border-radius:0 0 44px 44px; overflow:hidden;
  background:
    radial-gradient(980px 420px at 18% -35%, rgba(139,14,44,.26), transparent 62%),
    radial-gradient(820px 420px at 88% -10%, rgba(90,10,26,.22), transparent 64%),
    radial-gradient(920px 520px at 50% 120%, rgba(59,8,18,.28), transparent 66%),
    linear-gradient(135deg, rgba(12,12,16,1) 0%, rgba(5,5,7,1) 100%);
  border-bottom:1px solid rgba(255,255,255,0.08);
  box-shadow:0 26px 90px rgba(0,0,0,.80),0 0 0 1px rgba(255,255,255,.05) inset;
}
.header::before{
  content:""; position:absolute; inset:-12px;
  background:
    radial-gradient(520px 240px at 14% 0%, rgba(139,14,44,.30), transparent 68%),
    radial-gradient(520px 240px at 86% 8%, rgba(90,10,26,.26), transparent 68%),
    radial-gradient(900px 520px at 50% 55%, rgba(255,45,45,.08), transparent 72%);
  filter: blur(16px); opacity:1; pointer-events:none;
}
.header::after{
  content:""; position:absolute; inset:0;
  border-radius:0 0 44px 44px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 52%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 10px,rgba(0,0,0,0) 10px 22px);
  box-shadow:0 0 0 1px rgba(255,255,255,.07) inset,0 0 26px rgba(139,14,44,.12);
  opacity:1; pointer-events:none;
}
.header h1{
  margin:0; font-weight:900; font-size:1.20rem; letter-spacing:1px; text-transform:uppercase;
  position:relative; z-index:1;
  text-shadow:0 0 10px rgba(255,45,45,0.55),0 0 26px rgba(255,45,45,0.20);
}
.header p{
  margin:10px 0 0; font-weight:300; opacity:.88; font-size:.92rem;
  color:rgba(245,247,251,0.82); position:relative; z-index:1;
}
.badge{
  margin-top:14px; display:inline-flex; align-items:center; gap:10px;
  padding:9px 16px; border-radius:999px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.10);
  backdrop-filter:blur(12px); font-size:.86rem; font-weight:900;
  box-shadow:0 14px 30px rgba(0,0,0,.30);
  max-width:92%; position:relative; z-index:1;
}
.badge::before{content:"📍";}
.badge::after{
  
  margin-left:6px; font-size:.68rem; font-weight:900; letter-spacing:.8px;
  padding:3px 8px; border-radius:999px;
  background:rgba(255,45,45,0.18); border:1px solid rgba(255,45,45,0.25); color:#ffd1d1;
}

.lang-toggle{
  position:absolute; top:calc(14px + var(--safe-top)); right:14px;
  display:flex; gap:6px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.10);
  padding:4px; border-radius:14px; z-index:100;
  backdrop-filter:blur(12px); box-shadow:0 14px 30px rgba(0,0,0,0.30);
}
.lang-toggle button{
  border:none;background:none;color:#fff;
  padding:6px 14px;border-radius:10px;
  font-size:11px;cursor:pointer;font-family:'Lexend';
  opacity:.65;transition:.25s;font-weight:900;
}
.lang-toggle button.active{
  background:rgba(255,255,255,0.92); color:#111218; opacity:1;
  box-shadow:0 10px 18px rgba(0,0,0,.24);
}
.lang-toggle button:active{ transform:scale(.96); }

.top-actions{ display:flex; gap:10px; padding:14px 18px 0; }
.small-btn{
  flex:1;
  border-radius:18px; padding:12px 14px;
  font-family:'Lexend'; cursor:pointer; font-size:.9rem; font-weight:900;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.92);
  box-shadow:var(--shadow-sm);
  backdrop-filter: blur(10px);
  transition:transform .15s ease, background .25s ease, border-color .25s ease;
}

.small-btn.staff{
  background:rgba(255,176,32,0.10);
  border-color:rgba(255,176,32,0.22);
  color:rgba(255,244,220,0.92);
}
.small-btn.feedback{
  background:rgba(99,102,241,0.12);
  border-color:rgba(99,102,241,0.22);
  color:rgba(236,238,255,0.92);
}

.small-btn:hover{ background:rgba(255,255,255,0.08); }
.small-btn.staff:hover{ background:rgba(255,176,32,0.14); }
.small-btn.feedback:hover{ background:rgba(99,102,241,0.16); }
.small-btn.back{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); color:rgba(255,255,255,0.92); }
.small-btn.cart{
  background:rgba(255,45,45,0.18); border:1px solid rgba(255,45,45,0.24); color:#ffd1d1;
  box-shadow:0 18px 44px rgba(0,0,0,0.45);
}
.small-btn:active{ transform:scale(.98); }

.section{ padding:16px 18px 0; }
.section-title{ display:flex; justify-content:space-between; align-items:center; margin:14px 0 12px; }
.section-title h2{ margin:0; font-size:1.02rem; font-weight:1000; color:rgba(255,255,255,0.92); }
.section-title span{ font-size:.78rem; color:var(--muted); font-weight:300; }

.list{ display:flex; flex-direction:column; gap:12px; }

.item{
  background:rgba(255,255,255,0.06); border-radius:24px; padding:14px;
  box-shadow:var(--shadow-sm); border:1px solid rgba(255,255,255,0.10);
  display:flex; gap:12px; align-items:center;
  backdrop-filter: blur(10px); position:relative; overflow:hidden;
}
.item::before{
  content:""; position:absolute; inset:-1px;
  background: linear-gradient(120deg,rgba(255,45,45,0.45),rgba(255,176,32,0.25),rgba(99,102,241,0.22));
  opacity:0.14; filter: blur(14px); pointer-events:none;
}
.item > *{ position:relative; z-index:1; }

.item-icon{
  width:52px;height:52px;border-radius:18px;background:rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex-shrink:0;
  border:1px solid rgba(255,255,255,0.12);box-shadow:0 14px 28px rgba(0,0,0,0.30);
  overflow:hidden; /* ✅ để ảnh cắt gọn */
}
.item-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.item-info{ flex:1; min-width:0; }
.item-name{
  font-size:1.02rem;font-weight:1000;margin:0;color:rgba(255,255,255,0.92);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* item-desc vẫn giữ CSS cho khỏi đụng layout, nhưng JS sẽ không render nữa */
.item-desc{
  margin:4px 0 0;font-size:.78rem;font-weight:300;color:rgba(245,247,251,0.65);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.item-right{ display:flex;flex-direction:column;gap:8px;align-items:flex-end; }
.price{ font-size:.85rem;font-weight:1000;color:var(--accent); }
.add-btn{
  border:none;border-radius:16px;padding:10px 12px;background:rgba(255,45,45,0.18);
  color:#ffd1d1;font-family:'Lexend';font-weight:1000;cursor:pointer;font-size:.82rem;
  box-shadow:0 18px 44px rgba(0,0,0,0.45);border:1px solid rgba(255,45,45,0.24);white-space:nowrap;
}
.add-btn:active{ transform:scale(.96); }

.hr{ height:1px; background:rgba(255,255,255,0.10); margin:18px 0; }

.toast{
  position:fixed; bottom:calc(40px + var(--safe-bottom)); left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,0.72); color:#fff; padding:14px 22px; border-radius:22px; font-size:0.9rem;
  opacity:0; transition:.35s; z-index:10001; text-align:center; max-width:86%;
  backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,0.10); box-shadow:0 22px 60px rgba(0,0,0,0.50);
}
.toast.show{ opacity:1; bottom:calc(58px + var(--safe-bottom)); }

.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px);
  display:none; align-items:flex-end; justify-content:center; z-index:10000; padding:0;
}
.sheet{
  width:100%; max-width:480px; background:rgba(255,255,255,0.08);
  border-radius:28px 28px 0 0; padding:18px 16px calc(18px + var(--safe-bottom));
  box-shadow:0 -20px 80px rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px); animation: slideUp .25s ease;
}
@keyframes slideUp{ from{transform:translateY(18px);opacity:.85;} to{transform:translateY(0);opacity:1;} }
.sheet-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.sheet-head h3{ margin:0; font-size:1.05rem; font-weight:1000; color:rgba(255,255,255,0.92); }
.sheet-close{
  border:none; background:rgba(255,255,255,0.08); width:34px;height:34px;border-radius:14px;
  cursor:pointer;font-weight:1000;color:rgba(255,255,255,0.88);border:1px solid rgba(255,255,255,0.12);
}
.sheet-close:active{ transform:scale(.95); }

.cart-list{ display:flex; flex-direction:column; gap:10px; max-height:38vh; overflow:auto; padding-right:4px; }
.cart-item{
  border:1px solid rgba(255,255,255,0.10); border-radius:18px; padding:12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:rgba(255,255,255,0.06); box-shadow:0 14px 34px rgba(0,0,0,0.40); backdrop-filter: blur(10px);
}
.cart-left{ min-width:0; }
.cart-left b{
  display:block; font-size:.95rem; color:rgba(255,255,255,0.92);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; font-weight:1000;
}
.cart-left span{ font-size:.75rem; color:rgba(245,247,251,0.65); font-weight:300; }

.qty{
  display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.06);
  border-radius:14px; padding:3px 6px; border:1px solid rgba(255,255,255,0.12);
}
.qty button{
  width:26px;height:26px;border:none;border-radius:10px;background:rgba(255,255,255,0.08);
  cursor:pointer;font-weight:1000;color:rgba(255,255,255,0.92);box-shadow:0 12px 28px rgba(0,0,0,0.35);
}
.qty button:active{ transform:scale(.93); }
.qty input{
  width:34px;border:none;background:transparent;text-align:center;font-family:'Lexend';font-weight:1000;outline:none;color:rgba(255,255,255,0.92);
}

.cart-note{ margin-top:12px; }
.cart-note label{ display:block; font-size:.82rem; font-weight:1000; color:rgba(255,255,255,0.88); margin-bottom:8px; }
.cart-note textarea{
  width:100%; min-height:46px; max-height:110px; resize:none; padding:12px 12px;
  border-radius:18px; border:1px solid rgba(255,255,255,0.12); outline:none; font-family:'Lexend'; font-size:.9rem;
  background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.92); line-height:1.4;
}
.cart-note textarea:focus{ border-color: rgba(255,45,45,0.26); box-shadow: 0 18px 44px rgba(0,0,0,0.35); }

.cart-footer{ margin-top:12px; display:flex; gap:10px; }
.cart-footer button{
  flex:1; border:none; border-radius:18px; padding:13px 14px;
  cursor:pointer; font-family:'Lexend'; font-weight:1000; font-size:.95rem;
}
.btn-clear{ background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.92); border:1px solid rgba(255,255,255,0.12); }
.btn-send{ background:rgba(255,45,45,0.18); color:#ffd1d1; border:1px solid rgba(255,45,45,0.24); box-shadow:0 18px 44px rgba(0,0,0,0.45); }
.btn-send:active,.btn-clear:active{ transform:scale(.98); }

.empty{
  background:rgba(255,255,255,0.06); padding:14px 12px; border-radius:18px;
  border:1px dashed rgba(255,255,255,0.16); text-align:center; color:rgba(245,247,251,0.70);
  font-size:0.86rem; box-shadow:0 12px 28px rgba(0,0,0,0.35); backdrop-filter:blur(10px);
}

.history-item{
  background:rgba(255,255,255,0.06); border-radius:20px; border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 14px 34px rgba(0,0,0,0.40); padding:12px 12px;
  display:flex; justify-content:space-between; gap:10px; align-items:center; backdrop-filter: blur(10px);
}
.h-left{ min-width:0; }
.h-left b{
  display:block; font-size:.92rem; color:rgba(255,255,255,0.92);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:250px; font-weight:1000;
}
.h-left span{ display:block; margin-top:4px; font-size:.72rem; font-weight:300; color:rgba(245,247,251,0.65); }

.h-pill{ padding:6px 10px; border-radius:999px; font-size:.7rem; font-weight:1000; white-space:nowrap; border:1px solid rgba(255,255,255,0.10); }
.p-wait{ background:rgba(255,176,32,0.16); color:#ffd9a8; border-color: rgba(255,176,32,0.20); }
.p-doing{ background:rgba(99,102,241,0.18); color:#d5d8ff; border-color: rgba(99,102,241,0.22); }
.p-done{ background:rgba(34,197,94,0.16); color:#caffdd; border-color: rgba(34,197,94,0.20); }
.p-cancel{ background:rgba(239,68,68,0.16); color:#ffd1d1; border-color: rgba(239,68,68,0.22); }

.scroll-box{ max-height: 46vh; overflow-y: auto; padding-right: 6px; -webkit-overflow-scrolling: touch; }
.scroll-box.history{ max-height: 34vh; }
.scroll-box::-webkit-scrollbar{ width: 6px; }
.scroll-box::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.18); border-radius: 999px; }
.scroll-box::-webkit-scrollbar-track{ background: transparent; }

.more-btn{
  width:100%; margin:12px 0 0; border:none; border-radius:18px; padding:12px 14px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10);
  font-family:'Lexend'; font-weight:1000; font-size:.88rem; color:rgba(255,255,255,0.92);
  cursor:pointer; box-shadow:var(--shadow-sm); backdrop-filter: blur(10px);
}
.more-btn:active{ transform:scale(.98); }

#vipCartBar{
  position:fixed; left:50%; transform:translateX(-50%);
  width:calc(100% - 24px); max-width:480px;
  bottom:0; z-index:10002;
  padding:10px 14px calc(14px + var(--safe-bottom));
  background:rgba(255,255,255,0.08);
  border-top-left-radius:18px; border-top-right-radius:18px;
  box-shadow:0 -14px 60px rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  display:none;
  animation:slideUpCart .32s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideUpCart{ from{transform:translateX(-50%) translateY(120%);opacity:0;} to{transform:translateX(-50%) translateY(0);opacity:1;} }
#vipCartMsg{ font-size:13px; font-weight:1000; color:var(--accent); padding:6px 4px 10px; }
#vipCartMain{
  width:100%;
  background:rgba(255,45,45,0.18);
  border:1px solid rgba(255,45,45,0.24);
  color:#ffd1d1;
  border-radius:18px;
  padding:14px 16px;
  font-family:'Lexend';
  font-weight:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  box-shadow:0 18px 44px rgba(0,0,0,0.45);
  transition:0.2s;
}
#vipCartMain:active{ transform:scale(.98); }
#vipCartLeft{ font-size:15px; }
#vipCartRight{ font-size:16px; }
@keyframes cartShake{ 0%{transform:scale(1);} 30%{transform:scale(1.03);} 60%{transform:scale(.99);} 100%{transform:scale(1);} }
.cartPop{ animation:cartShake .35s ease; }

body{ font-weight:400 !important; }

.search-wrap{ padding: 8px 18px 0; margin-top: 4px; }
.search-box{
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  backdrop-filter: blur(10px);
}
.search-box input{
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-family: 'Lexend';
  font-size: 0.9rem;
}
.search-box input::placeholder{ color: rgba(255, 255, 255, 0.4); }
.search-icon{ margin-right: 10px; font-size: 0.9rem; opacity: 0.5; }
#clearSearch{ background: none; border: none; color: #fff; opacity: 0.6; font-size: 1.1rem; padding: 0 5px; }

#searchSuggest{
  margin-top:10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
  display:none;
}
.sug-item{
  padding:12px 14px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.sug-item:hover{ background: rgba(255,255,255,0.06); }
.sug-name{ font-weight:1000; font-size:.9rem; color:rgba(255,255,255,0.92); display:flex; align-items:center; gap:10px; min-width:0; }
.sug-thumb{
  width:34px; height:34px; border-radius:12px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.08);
  flex-shrink:0;
}
.sug-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sug-price{ font-weight:1000; color: var(--accent); font-size:.85rem; white-space:nowrap; }

.cart-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.del-btn{
  width:34px;
  height:34px;
  border:none;
  border-radius:14px;
  cursor:pointer;
  font-weight:1000;
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.92);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 12px 28px rgba(0,0,0,0.35);
}
.del-btn:active{ transform:scale(.93); }

// --- Added by refactor: wrappers to avoid inline onclick
window.changeQtyInc = (id)=> window.changeQty?.(id, 1);
window.changeQtyDec = (id)=> window.changeQty?.(id, -1);


/* ===== Quick drink card ===== */
.quick-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border-radius:18px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 18px 46px rgba(0,0,0,0.35);
  cursor:pointer;
  margin: 10px 0 14px;
}
.quick-card:active{ transform:scale(.99); }
.quick-card .qc-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.quick-card .qc-ic{
  width:46px;height:46px;border-radius:16px;
  background:rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center;
  font-size:22px; flex-shrink:0;
  border:1px solid rgba(255,255,255,0.12);
}
.quick-card .qc-txt{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.quick-card .qc-txt b{ font-size:1.02rem; color:rgba(255,255,255,0.92); }
.quick-card .qc-txt span{ font-size:.82rem; color:rgba(245,247,251,0.70); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.quick-card .qc-go{ opacity:.75; font-size:20px; padding-left:8px; }


#feedbackModal{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10005;
  padding:20px;
}
.modal{
  background:rgba(255,255,255,0.08);
  width:100%;
  max-width:380px;
  padding:26px 22px;
  border-radius:28px;
  text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  animation: modalUp .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes modalUp{
  from{transform:scale(.92) translateY(18px);opacity:0;}
  to{transform:scale(1) translateY(0);opacity:1;}
}
.fb-btn{
  width:100%;
  padding:14px;
  border:none;
  border-radius:18px;
  margin-top:12px;
  font-size:1rem;
  cursor:pointer;
  font-family:'Lexend';
  transition:.18s;
  font-weight:400;
}
.fb-btn.gray{
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.92);
  border:1px solid rgba(255,255,255,0.12);
}
.fb-btn.red{
  background:rgba(255,45,45,0.16);
  color:#ffd1d1;
  border:1px solid rgba(255,45,45,0.22);
}
.fb-btn:active{ transform:scale(.97); }

.overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10000;
  padding:20px;
}

.sheet{
  background:rgba(255,255,255,0.08);
  width:100%;
  max-width:360px;
  border-radius:28px;
  padding:22px 18px;
  text-align:center;
  box-shadow:0 30px 90px rgba(0,0,0,0.60);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  animation: modalUp .35s cubic-bezier(.2,.8,.2,1);
}

.sheet-icon{
  width:68px;height:68px;border-radius:22px;
  background:rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px;
  font-size:28px;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 18px 40px rgba(0,0,0,0.40);
}

.sheet h3{margin:0;font-size:1.2rem;color:rgba(255,255,255,0.95);font-weight:1000;}
.sheet p{margin:10px 0 16px;color:rgba(245,247,251,0.72);font-size:.9rem;line-height:1.45;}
.sheet-close{
  margin-top:16px;
  background:none;border:none;color:rgba(245,247,251,0.55);width:100%;
  cursor:pointer;font-size:.9rem;
}

#codeModal input{
  width:100%;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.12);
  outline:none;
  font-family:'Lexend';
  font-size:1.15rem;
  text-align:center;
  letter-spacing:6px;
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.92);
}
.code-row{
  display:flex;
  gap:12px;
  margin-top:20px;
}
.code-row button{
  flex:1;
  padding:14px;
  border:none;
  border-radius:18px;
  font-family:'Lexend';
  cursor:pointer;
  font-size:.95rem;
}
.btn-gray{
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.92);
  border:1px solid rgba(255,255,255,0.12);
}
.btn-main{
  background:rgba(255,45,45,0.18);
  color:#ffd1d1;
  border:1px solid rgba(255,45,45,0.24);
  box-shadow:0 18px 44px rgba(0,0,0,0.45);
}

/* ===== BEER MODAL ===== */
#beerModal.overlay{
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(10px);
}
#beerModal .sheet{
  background:rgba(255,255,255,0.08);
  width:100%;
  max-width:360px;
  border-radius:28px;
  padding:18px 16px;
  box-shadow:0 30px 90px rgba(0,0,0,0.60);
  display:flex;
  flex-direction:column;
  max-height: calc(100dvh - 90px);
  overflow:hidden;
  text-align:left !important;
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
}
#beerModal .beer-head{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:2px;
}
#beerModal .sheet-icon{
  width:60px;
  height:60px;
  border-radius:20px;
  background:rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  font-size:26px;
  border:1px solid rgba(255,255,255,0.12);
}
#beerModal .beer-x{
  position:absolute;
  right:0;
  top:0;
  width:34px;
  height:34px;
  border:none;
  border-radius:14px;
  background:rgba(255,255,255,0.08);
  cursor:pointer;
  font-size:15px;
  font-weight:700;
  color:rgba(255,255,255,0.88);
  border:1px solid rgba(255,255,255,0.12);
}
#beerModal .beer-x:active{ transform:scale(0.95); }

#beerModal,
#beerModal *{
  font-family:'Lexend',sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#beerModal h3{
  text-align:center;
  margin:4px 0 4px;
  font-size:1.18rem;
  font-weight:600 !important;
  letter-spacing:0.2px;
  color:rgba(255,255,255,0.95);
}
#beerModal p{
  text-align:center;
  margin:0 0 6px;
  font-size:0.9rem;
  font-weight:300 !important;
  opacity:0.86;
  color:rgba(245,247,251,0.72);
}
#beerModal .beer-scroll{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-right:6px;
  margin-top:6px;
  flex:1;
}
#beerModal .beer-scroll::-webkit-scrollbar{ width:6px; }
#beerModal .beer-scroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.18);
  border-radius:999px;
}

#beerModal .beer-section{ margin-top:12px; }
#beerModal .beer-section-title{
  font-size:0.82rem;
  font-weight:600 !important;
  color:rgba(255,255,255,0.85);
  margin:8px 4px 10px;
  letter-spacing:0.2px;
  opacity:0.9;
}
#beerModal .beer-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
#beerModal .beer-item{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border-radius:22px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 18px 46px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
}
#beerModal .beer-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
#beerModal .beer-ic{
  width:46px;
  height:46px;
  border-radius:16px;
  background:rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  flex-shrink:0;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 14px 30px rgba(0,0,0,0.35);
  overflow:hidden;
}
#beerModal .beer-text{
  flex:1;
  min-width:0;
}
#beerModal .beer-name{
  font-size:1.02rem;
  font-weight:600 !important;
  color:rgba(255,255,255,0.92);
  line-height:1.25;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;

  word-break:keep-all;
  white-space:normal;
}
#beerModal .beer-sub{
  font-size:0.78rem;
  font-weight:300 !important;
  color:rgba(245,247,251,0.65);
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* row 2 */
#beerModal .beer-right{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-top:10px;
  border-top:1px dashed rgba(255,255,255,0.12);
}

/* Toggle Lon/Chai */
#beerModal .unitToggle{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
#beerModal .unitBtn{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:0.68rem;
  font-weight:800;
  color:rgba(255,255,255,0.88);

  box-shadow:0 12px 28px rgba(0,0,0,0.35);
  transition:.22s;
}
#beerModal .unitBtn.active{
  background:rgba(255,45,45,0.18);
  color:#ffd1d1;
  border-color:rgba(255,45,45,0.24);
  box-shadow:0 18px 44px rgba(0,0,0,0.45);
  transform:scale(1.03);
}
#beerModal .unitBtn:active{ transform:scale(0.94); }

/* Qty */
#beerModal .qty{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:2px;
  background:rgba(255,255,255,0.06);
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  flex-shrink:0;
}
#beerModal .qtyBtn{
  width:24px;
  height:24px;
  border:none;
  border-radius:10px;
  background:rgba(255,255,255,0.08);
  font-weight:700;
  font-size:14px;
  line-height:24px;
  padding:0;
  cursor:pointer;
  color:rgba(255,255,255,0.88);
  box-shadow:0 12px 28px rgba(0,0,0,0.35);
}
#beerModal .qtyBtn:active{ transform:scale(0.92); }
#beerModal .qtyInput{
  width:30px;
  height:24px;
  border:none;
  background:transparent;
  text-align:center;
  font-weight:600 !important;
  font-size:0.92rem;
  color:rgba(255,255,255,0.92);
  outline:none;
}
#beerModal .qtyInput::-webkit-outer-spin-button,
#beerModal .qtyInput::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
#beerModal .qtyInput{ -moz-appearance:textfield; }

#beerModal .sendBtn{
  flex-shrink:0;
  border:none;
  border-radius:14px;
  padding:8px 12px;
  background:rgba(255,45,45,0.18);
  color:#ffd1d1;
  font-weight:600 !important;
  font-size:0.78rem;
  cursor:pointer;
  border:1px solid rgba(255,45,45,0.24);
  box-shadow:0 18px 44px rgba(0,0,0,0.45);
  white-space:nowrap;
}
#beerModal .sendBtn:active{ transform:scale(0.96); }

/* Font override */
body{
  font-family:'Lexend',sans-serif !important;
  font-weight:400 !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.brand,
.header h1{ font-weight:600 !important; letter-spacing:1px !important; }
.welcome,
.header p{ font-weight:300 !important; font-size:0.95rem !important; opacity:0.85 !important; }
.badge,
#banText{ font-weight:600 !important; font-size:0.85rem !important; letter-spacing:0.2px !important; }
.lang-toggle button{ font-family:'Lexend',sans-serif !important; font-weight:400 !important; }
.lang-toggle button.active{ font-weight:600 !important; }
.label b{ font-weight:600 !important; font-size:1.05rem !important; }
.label span{ font-weight:300 !important; font-size:0.82rem !important; }
.sheet h3,
.modal h3{ font-weight:600 !important; }
.pill-new,
.history-pill{ font-weight:700 !important; letter-spacing:0.2px !important; }
#txt-history-title{ font-weight:600 !important; }