:root{
  --gold:#c8972a;--gold-light:#f0d080;--gold-dim:#e8c870;
  --red:#b22222;--red-dark:#7a0000;
  --cream:#fdf6e3;--cream2:#f5e9c8;
  --brown:#6b3a1f;--text-dark:#2c1a0e;
  --wa-green:#25d366;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background-color:var(--cream);background-image:radial-gradient(circle at 20px 20px,rgba(200,151,42,.08) 2px,transparent 2px),radial-gradient(circle at 60px 60px,rgba(200,151,42,.05) 2px,transparent 2px);background-size:80px 80px;font-family:'Lato',sans-serif;color:var(--text-dark);min-height:100vh;}

/* ─── LOADING OVERLAY ─── */
#appLoading{position:fixed;inset:0;background:var(--cream);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
#appLoading.done{display:none;}
.loading-logo{font-family:'Noto Serif SC',serif;font-size:56px;color:var(--red-dark);}
.loading-spin{width:36px;height:36px;border:4px solid var(--cream2);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── SAVE INDICATOR ─── */
#saveIndicator{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:rgba(42,110,42,.92);color:#fff;padding:8px 20px;border-radius:20px;font-size:12px;font-weight:700;z-index:9000;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;}
#saveIndicator.show{opacity:1;}
#saveIndicator.err{background:rgba(180,30,30,.92);}

/* ─── HEADER ─── */
.page-header{background:linear-gradient(135deg,#7a0000 0%,#b22222 40%,#8b1a1a 100%);border-bottom:4px solid var(--gold);position:relative;overflow:hidden;}
.header-pattern{position:absolute;inset:0;pointer-events:none;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c8972a'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");background-size:60px 60px;}
.header-inner{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:18px 24px;position:relative;}
.header-notes{font-size:11px;color:var(--gold-light);line-height:2;min-width:160px;}
.header-notes span{color:#ffd700;font-weight:700;}
.logo-center{text-align:center;flex:1;position:relative;}
.logo-border{border:2px solid var(--gold);border-radius:8px;display:inline-block;padding:10px 24px;position:relative;}
.logo-border::before,.logo-border::after{content:'❖';color:var(--gold);position:absolute;top:50%;transform:translateY(-50%);font-size:14px;}
.logo-border::before{left:-20px;}.logo-border::after{right:-20px;}
.logo-img-wrap{display:flex;align-items:center;justify-content:center;gap:10px;}
.logo-custom-img{width:56px;height:56px;object-fit:contain;display:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));}
.logo-custom-img.visible{display:block;}
.logo-chinese{font-family:'Noto Serif SC',serif;font-size:48px;color:var(--gold-light);letter-spacing:4px;line-height:1;text-shadow:2px 2px 8px rgba(0,0,0,.5);}
.logo-en{font-family:'Cinzel',serif;font-size:22px;color:#fff;letter-spacing:6px;margin-top:2px;}
.logo-sub{font-size:12px;color:var(--gold-light);letter-spacing:2px;margin-top:4px;}
.logo-tagline{font-family:'Noto Serif SC',serif;font-size:16px;color:var(--gold);margin-top:6px;letter-spacing:3px;}
.hdr-text-edit{display:none;flex-direction:column;gap:6px;margin-top:8px;align-items:center;}
.hdr-text-edit input{background:rgba(255,255,255,.15);border:1px solid var(--gold);border-radius:5px;padding:4px 10px;color:#fff;font-size:12px;text-align:center;width:220px;}
.hdr-text-edit input::placeholder{color:rgba(255,255,255,.5);}
body.edit-mode .hdr-text-edit{display:flex;}
body.edit-mode .logo-en,body.edit-mode .logo-sub,body.edit-mode .logo-tagline{display:none;}
.logo-upload-btn{display:none;background:rgba(200,151,42,.25);border:1.5px dashed var(--gold);color:var(--gold-light);padding:4px 12px;border-radius:6px;cursor:pointer;font-size:10px;font-weight:700;margin-top:6px;transition:background .2s;}
.logo-upload-btn:hover{background:rgba(200,151,42,.45);}
body.edit-mode .logo-upload-btn{display:inline-block;}
.hdr-right{text-align:right;min-width:160px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.header-edit-btn{background:rgba(200,151,42,.2);border:1px solid var(--gold);color:var(--gold-light);padding:9px 18px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:700;letter-spacing:1px;transition:all .2s;}
.header-edit-btn:hover{background:rgba(200,151,42,.4);}
.header-edit-btn.active{background:var(--gold);color:#fff;}
.hdr-hint{font-size:10px;color:var(--gold-light);opacity:.75;}
.reset-btn{display:none;background:#7a0000;border:1px solid var(--gold);color:var(--gold-light);padding:6px 12px;border-radius:6px;cursor:pointer;font-size:11px;font-weight:700;transition:all .2s;}
.reset-btn:hover{background:#b22222;}
body.edit-mode .reset-btn{display:inline-block;}
.order-hdr-btn{background:var(--wa-green);border:none;color:#fff;padding:9px 14px;border-radius:6px;cursor:pointer;font-size:11px;font-weight:700;display:none;align-items:center;gap:5px;transition:opacity .2s;}
.order-hdr-btn:hover{opacity:.85;}
.order-badge{background:#fff;color:var(--wa-green);border-radius:50%;width:18px;height:18px;font-size:10px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;min-width:18px;}

/* ─── ORNAMENT ─── */
.ornament-bar{background:var(--cream2);border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);text-align:center;padding:6px;font-size:20px;letter-spacing:8px;color:var(--gold);}

/* ─── LAYOUT ─── */
.page-wrap{max-width:1200px;margin:0 auto;padding:20px 16px 40px;}
#categoriesWrap{display:flex;flex-direction:column;gap:26px;}

/* ─── SECTION ─── */
.cat-section{background:#fff;border-radius:14px;border:1.5px solid var(--cream2);box-shadow:0 2px 12px rgba(120,60,20,.08);overflow:hidden;}
.cat-sec-hdr{display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(90deg,rgba(245,233,200,.9),rgba(253,246,227,.3));border-bottom:1.5px solid var(--cream2);}
.section-badge{display:inline-flex;flex-direction:column;align-items:center;padding:6px 20px;font-family:'Cinzel',serif;font-size:17px;font-weight:700;letter-spacing:3px;border-radius:6px;color:#fff;border:2px solid var(--gold);min-width:104px;text-align:center;flex-shrink:0;}
.badge-zh{font-family:'Noto Serif SC',serif;font-size:11px;color:var(--gold-dim);display:block;margin-top:1px;letter-spacing:2px;}
.section-badge[data-color="red"]{background:#7a0000;}.section-badge[data-color="orange"]{background:#b05a00;}
.section-badge[data-color="green"]{background:#2a6e2a;}.section-badge[data-color="blue"]{background:#1a4a8a;}
.section-badge[data-color="purple"]{background:#5a2d82;}.section-badge[data-color="teal"]{background:#0d6e6e;}
.section-badge[data-color="brown"]{background:#6b3a1f;}.section-badge[data-color="gray"]{background:#555;}
.sec-name-view{display:flex;flex-direction:column;align-items:center;}
.sec-name-edit{display:none;flex-direction:column;gap:4px;align-items:center;}
.sec-name-edit input{font-family:'Cinzel',serif;font-size:12px;padding:3px 7px;border:1.5px solid var(--gold);border-radius:4px;color:var(--text-dark);background:#fff;width:100px;text-align:center;}
.sec-name-edit input.zh-inp{font-family:'Noto Serif SC',serif;}
body.edit-mode .sec-name-view{display:none;}
body.edit-mode .sec-name-edit{display:flex;}
.sec-line{flex:1;height:2px;background:linear-gradient(to right,var(--gold),transparent);}
.sec-color-row{display:none;gap:5px;align-items:center;flex-shrink:0;}
body.edit-mode .sec-color-row{display:flex;}
.cdot{width:19px;height:19px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .15s;}
.cdot:hover,.cdot.active{border-color:#fff;transform:scale(1.25);}
.cdot[data-c="red"]{background:#7a0000;}.cdot[data-c="orange"]{background:#b05a00;}
.cdot[data-c="green"]{background:#2a6e2a;}.cdot[data-c="blue"]{background:#1a4a8a;}
.cdot[data-c="purple"]{background:#5a2d82;}.cdot[data-c="teal"]{background:#0d6e6e;}
.cdot[data-c="brown"]{background:#6b3a1f;}.cdot[data-c="gray"]{background:#555;}
.sec-actions{display:none;gap:6px;flex-shrink:0;}
body.edit-mode .sec-actions{display:flex;}
.sec-btn{background:transparent;border:1.5px solid var(--gold);color:var(--gold);padding:4px 10px;border-radius:6px;cursor:pointer;font-size:11px;font-weight:700;transition:all .18s;white-space:nowrap;}
.sec-btn:hover{background:var(--gold);color:#fff;}
.sec-btn.del{border-color:#c44;color:#c44;}.sec-btn.del:hover{background:#c44;color:#fff;}

/* ─── GRID ─── */
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:14px;}
.add-tile{display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--gold);border-radius:10px;min-height:160px;cursor:pointer;color:var(--gold);font-size:12px;font-weight:700;background:rgba(200,151,42,.04);transition:background .18s;}
.add-tile:hover{background:rgba(200,151,42,.12);}
body.edit-mode .add-tile{display:flex;}

/* ─── ITEM CARD ─── */
.item-card{background:#fff;border-radius:10px;border:1.5px solid var(--cream2);overflow:hidden;box-shadow:0 2px 8px rgba(120,60,20,.07);transition:transform .2s,box-shadow .2s;position:relative;}
.item-card:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(120,60,20,.15);}
body.edit-mode .item-card{border:2px dashed var(--gold);}
.img-wrap{position:relative;width:100%;padding-top:100%;background:var(--cream2);overflow:hidden;cursor:pointer;}
.img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none;pointer-events:none;}
.item-card:hover .img-wrap img{transform:scale(1.07);}
.zoom-hint{position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.45);color:#fff;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;}
.item-card:hover .zoom-hint{opacity:1;}
.sp-badge{position:absolute;top:5px;left:5px;background:var(--red);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;z-index:2;}
.ptag-inline{display:inline-block;background:linear-gradient(135deg,var(--red-dark),var(--red));color:#ffd700;font-size:13px;font-weight:700;padding:4px 10px;border-radius:10px;border:1px solid var(--gold);white-space:nowrap;}
.price-row{padding:5px 12px 0;display:flex;align-items:center;gap:4px;}
body.edit-mode .ptag-inline{cursor:pointer;outline:2px dashed var(--gold);outline-offset:1px;}
.p-input-inline{display:none;width:100%;font-size:12px;font-weight:700;padding:4px 6px;border:2px solid var(--gold);border-radius:8px;text-align:center;background:#fff;color:var(--red-dark);}
body.edit-mode .price-row::after{content:'✏️';font-size:10px;opacity:.6;}
.edit-catch{display:none;position:absolute;inset:0;background:transparent;z-index:9;cursor:pointer;}
body.edit-mode .edit-catch{display:block;}
.edit-ov{display:none;position:absolute;top:30px;right:4px;background:#fff;align-items:stretch;justify-content:flex-start;flex-direction:column;gap:5px;padding:7px;border-radius:8px;border:1.5px solid var(--gold);box-shadow:0 6px 18px rgba(0,0,0,.28);z-index:20;width:145px;}
.edit-ov.ov-show{display:flex;}
.ov-toggle{display:none;position:absolute;top:4px;right:4px;z-index:16;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:4px;width:22px;height:22px;align-items:center;justify-content:center;font-size:16px;line-height:1;cursor:pointer;transition:background .15s;}
.ov-toggle:hover{background:rgba(200,151,42,.9);}
body.edit-mode .item-card[data-id] .ov-toggle{display:flex;}
.ov-btn{background:var(--cream2);border:none;border-radius:6px;padding:6px 8px;font-size:11px;font-weight:700;color:var(--red-dark);cursor:pointer;width:100%;text-align:center;transition:background .15s;}
.ov-btn:hover{background:#fff;box-shadow:0 0 0 1.5px var(--gold) inset;}
.ov-btn.danger{color:#c00;}
.item-info{padding:9px 12px 12px;}
.iname{font-size:14px;font-weight:700;color:var(--red-dark);line-height:1.35;margin-bottom:2px;}
.iznm{font-size:12px;color:#888;line-height:1.35;}
.name-edit{display:none;}
.name-edit input{width:100%;font-size:10px;padding:2px 4px;border:1px solid var(--gold);border-radius:4px;margin-bottom:2px;color:var(--text-dark);}
body.edit-mode .name-edit{display:block;}
body.edit-mode .iname,body.edit-mode .iznm{display:none;}
.order-ctrl{display:flex;align-items:stretch;justify-content:center;gap:0;padding:8px 8px 10px;border-top:1px solid var(--cream2);}
.order-ctrl:not(.order-ctrl--habis){border:1.5px solid #e0e0e0;border-radius:10px;overflow:hidden;background:#fff;width:fit-content;margin:8px auto 10px;}
.qty-btn{background:#fff;color:#333;border:none;border-radius:0;width:36px;height:36px;font-size:18px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;}
.qty-btn:first-child{border-right:1.5px solid #e0e0e0;}
.qty-btn:last-child{border-left:1.5px solid #e0e0e0;}
.qty-btn:hover{background:#f5f5f5;}
.qty-btn:active{background:#ececec;}
.qty-num{min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#e74c3c;}
body.edit-mode .order-ctrl{display:none;}


/* ─── EXPORT / IMPORT DATA ─── */
.sync-btn{display:none;background:rgba(42,110,42,.85);border:1px solid #4a8f4a;color:#fff;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:11px;font-weight:700;transition:all .2s;white-space:nowrap;}
.sync-btn:hover{background:#2a6e2a;}
.sync-btn.imp{background:rgba(26,74,138,.85);border-color:#2a5da8;}
.sync-btn.imp:hover{background:#1a4a8a;}
body.edit-mode .sync-btn{display:inline-block;}
.sync-row{display:none;gap:5px;flex-wrap:wrap;justify-content:flex-end;}
body.edit-mode .sync-row{display:flex;}

/* import modal */
#importModal .drop-zone{border:2px dashed var(--gold);border-radius:10px;padding:24px 16px;text-align:center;cursor:pointer;background:rgba(200,151,42,.04);transition:background .18s;}
#importModal .drop-zone:hover,#importModal .drop-zone.dragover{background:rgba(200,151,42,.14);}
#importModal .drop-zone-icon{font-size:36px;margin-bottom:8px;}
#importModal .drop-zone-text{font-size:13px;color:var(--gold);font-weight:700;}
#importModal .drop-zone-sub{font-size:11px;color:#aaa;margin-top:4px;}
#importModal .import-preview{background:#f5f9f5;border:1px solid #c3dfc3;border-radius:8px;padding:12px;font-size:12px;margin-top:12px;display:none;}
#importModal .import-preview table{width:100%;border-collapse:collapse;}
#importModal .import-preview td{padding:3px 6px;font-size:11px;}
#importModal .import-preview tr:first-child td{font-weight:700;color:#2a6e2a;}


/* ═══════════════════════════════════════
   DRAG & DROP — Geser Item & Kategori
   Hanya aktif saat Edit Mode
═══════════════════════════════════════ */
/* Handle ikon di pojok gambar */
.drag-handle{
  display:none;position:absolute;
  top:4px;right:30px;z-index:15;
  background:rgba(0,0,0,.55);color:#fff;
  border-radius:4px;width:22px;height:22px;
  align-items:center;justify-content:center;
  font-size:15px;line-height:1;
  cursor:grab;user-select:none;-webkit-user-select:none;
  touch-action:none;transition:background .15s;
}
.drag-handle:hover{background:rgba(200,151,42,.9);}
body.edit-mode .item-card[data-id] .drag-handle{display:flex;}

/* Kartu sedang didrag */
body.edit-mode .item-card.dg-dragging{
  opacity:.28;transform:scale(.95);
  box-shadow:none;
  border:2px dashed var(--gold)!important;
}
/* Target drop kartu */
body.edit-mode .item-card.dg-over{
  outline:3px solid var(--gold);outline-offset:2px;
  background:rgba(200,151,42,.09);
  transform:scale(1.04);
}
/* Kategori drag */
body.edit-mode .cat-sec-hdr{cursor:grab;}
body.edit-mode .cat-section.dg-dragging{opacity:.22;transform:scale(.98);}
body.edit-mode .cat-section.dg-over{
  outline:3px solid var(--gold);outline-offset:3px;
  background:rgba(200,151,42,.06);
}
/* Clone ghost saat touch */
.dg-ghost{
  position:fixed;pointer-events:none;z-index:8888;
  opacity:.82;border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  border:2px solid var(--gold);
  transition:none;transform:scale(1.06);
  background:#fff;overflow:hidden;
}

/* ─── UPLOAD PROGRESS ─── */
.upload-progress{display:none;height:4px;background:var(--cream2);border-radius:2px;margin-bottom:10px;}
.upload-progress-bar{height:100%;background:var(--gold);border-radius:2px;width:0%;transition:width .2s;}
.upload-progress.show{display:block;}

/* ─── ADD CATEGORY BAR ─── */
.add-cat-bar{display:none;justify-content:center;margin-top:18px;}
body.edit-mode .add-cat-bar{display:flex;}
.add-cat-btn{background:rgba(200,151,42,.1);border:2px dashed var(--gold);color:var(--gold);padding:10px 32px;border-radius:10px;cursor:pointer;font-family:'Cinzel',serif;font-size:13px;font-weight:700;letter-spacing:2px;transition:all .18s;}
.add-cat-btn:hover{background:rgba(200,151,42,.22);}

/* ─── FLOATING ORDER BAR ─── */
.order-float{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(135deg,#7a0000,#b22222);border-top:3px solid var(--gold);z-index:1500;transform:translateY(100%);transition:transform .3s ease;box-shadow:0 -4px 24px rgba(0,0,0,.3);}
.order-float.visible{transform:translateY(0);}
.order-float-inner{max-width:1200px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:12px;}
.of-summary{flex:1;color:var(--gold-light);font-size:12px;}
.of-total{font-size:16px;font-weight:700;color:#ffd700;}
.of-count{font-size:11px;opacity:.8;}
.of-btns{display:flex;gap:8px;flex-shrink:0;}
.of-btn{padding:8px 16px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;border:none;transition:opacity .15s;}
.of-btn:hover{opacity:.85;}
.of-clear{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3)!important;}
.of-detail{background:var(--gold);color:#fff;}
.of-wa{background:var(--wa-green);color:#fff;display:flex;align-items:center;gap:5px;}

/* ─── FOOTER ─── */
.page-footer{background:var(--red-dark);border-top:3px solid var(--gold);color:var(--gold-light);margin-top:32px;}
.ftr-inner{max-width:1200px;margin:0 auto;padding:40px 24px 0;}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:28px;}
.ftr-col-title{font-family:'Cinzel',serif;font-size:13px;font-weight:700;letter-spacing:1.5px;color:var(--gold);text-transform:uppercase;margin-bottom:14px;}
.ftr-brand-name{display:flex;align-items:center;gap:8px;font-family:'Cinzel',serif;font-size:17px;font-weight:700;color:#fff;letter-spacing:.5px;margin-bottom:10px;}
.ftr-brand-icon{display:inline-flex;color:var(--gold);}
.ftr-brand-icon svg{width:20px;height:20px;}
.ftr-desc{font-size:12.5px;line-height:1.7;color:rgba(245,233,200,.72);max-width:340px;margin-bottom:16px;}
.ftr-social{display:flex;gap:9px;}
.ftr-social-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:7px;background:rgba(200,151,42,.16);border:1px solid rgba(200,151,42,.4);color:var(--gold-light);text-decoration:none;transition:background .2s,color .2s,transform .15s;}
.ftr-social-btn svg{width:15px;height:15px;}
.ftr-social-btn:hover{background:var(--gold);color:#2a1a10;transform:translateY(-2px);}
.ftr-links{list-style:none;display:flex;flex-direction:column;gap:9px;}
.ftr-links a{color:rgba(245,233,200,.72);text-decoration:none;font-size:12.5px;transition:color .15s;}
.ftr-links a:hover{color:var(--gold-light);}
.ftr-contact{list-style:none;display:flex;flex-direction:column;gap:11px;}
.ftr-contact li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.5;color:rgba(245,233,200,.72);}
.ftr-contact-ic{display:inline-flex;flex-shrink:0;color:var(--gold);margin-top:1px;}
.ftr-contact-ic svg{width:14px;height:14px;}
.ftr-bottom{max-width:1200px;margin:26px auto 0;padding:16px 0;border-top:1px solid rgba(200,151,42,.25);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11.5px;color:rgba(245,233,200,.55);letter-spacing:.5px;}
@media(max-width:860px){
  .ftr-grid{grid-template-columns:1fr 1fr;row-gap:30px;}
}
@media(max-width:560px){
  .ftr-inner{padding:32px 18px 0;}
  .ftr-grid{grid-template-columns:1fr;gap:26px;text-align:left;}
  .ftr-desc{max-width:none;}
  .ftr-bottom{justify-content:center;text-align:center;padding:16px 18px;}
}

/* ═══════════════════ MODALS ═══════════════════ */
.mbg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:2000;align-items:center;justify-content:center;}
.mbg.open{display:flex;}
.mbox{background:#fff;border-radius:14px;padding:28px 30px;width:420px;max-width:93vw;border:2px solid var(--gold);box-shadow:0 10px 50px rgba(0,0,0,.35);}
.mtitle{font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:var(--red-dark);margin-bottom:16px;letter-spacing:1px;}
.mbox input[type=text],.mbox input[type=password],.mbox input[type=number]{width:100%;padding:10px 12px;border:1.5px solid #ddd;border-radius:8px;font-size:13px;margin-bottom:12px;color:var(--text-dark);outline:none;transition:border-color .2s;font-family:'Lato',sans-serif;}
.mbox input:focus{border-color:var(--gold);}
.mbtns{display:flex;gap:10px;justify-content:flex-end;margin-top:4px;}
.mbtns button{padding:8px 20px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;border:none;transition:opacity .15s;}
.bcn{background:#eee;color:#555;}.bap{background:var(--red);color:#fff;}.bap.grn{background:#2a6e2a;}.bap.wa{background:var(--wa-green);}
.bcn:hover,.bap:hover{opacity:.85;}
.pw-icon{text-align:center;font-size:42px;margin-bottom:8px;}
.pw-err{color:#c22;font-size:12px;margin-top:-8px;margin-bottom:10px;min-height:18px;}
.pw-try{font-size:11px;color:#aaa;text-align:center;margin-top:6px;}
.swatch-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px;}
.swatch{width:30px;height:30px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:transform .15s;}
.swatch:hover,.swatch.active{border-color:#222;transform:scale(1.2);}
.swatch[data-c="red"]{background:#7a0000;}.swatch[data-c="orange"]{background:#b05a00;}
.swatch[data-c="green"]{background:#2a6e2a;}.swatch[data-c="blue"]{background:#1a4a8a;}
.swatch[data-c="purple"]{background:#5a2d82;}.swatch[data-c="teal"]{background:#0d6e6e;}
.swatch[data-c="brown"]{background:#6b3a1f;}.swatch[data-c="gray"]{background:#555;}
.url-prev{width:100%;height:120px;object-fit:contain;border-radius:8px;background:var(--cream2);margin-bottom:14px;display:block;}
.ni-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.ni-row input,.ni-row select{margin-bottom:0;}
.ni-row select{padding:10px 8px;border:1.5px solid #ddd;border-radius:8px;font-size:13px;color:var(--text-dark);background:#fff;outline:none;}
.ni-row select:focus{border-color:var(--gold);}
.ni-gap{margin-bottom:12px;}
.order-modal .mbox{width:540px;max-height:85vh;display:flex;flex-direction:column;}
.order-list{flex:1;overflow-y:auto;max-height:50vh;margin-bottom:12px;}
.order-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--cream2);}
.order-row:last-child{border-bottom:none;}
.order-item-img{width:44px;height:44px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--cream2);}
.order-item-info{flex:1;min-width:0;}
.order-item-name{font-size:12px;font-weight:700;color:var(--red-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.order-item-price{font-size:11px;color:#888;}
.order-item-sub{font-size:12px;font-weight:700;color:var(--gold);text-align:right;flex-shrink:0;}
.order-qty-ctrl{display:flex;align-items:stretch;justify-content:center;gap:0;flex-shrink:0;border:1.5px solid #e0e0e0;border-radius:10px;overflow:hidden;background:#fff;width:fit-content;}
.oqb{background:#fff;color:#333;border:none;border-radius:0;width:26px;height:26px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.oqb:first-child{border-right:1.5px solid #e0e0e0;}
.oqb:last-child{border-left:1.5px solid #e0e0e0;}
.oqb:hover{background:#f5f5f5;}
.oqb:active{background:#ececec;}
.oqn{min-width:26px;height:26px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;font-weight:700;color:#e74c3c;}
.order-total-row{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:2px solid var(--gold);}
.order-total-label{font-family:'Cinzel',serif;font-size:13px;font-weight:700;color:var(--text-dark);}
.order-total-val{font-size:18px;font-weight:700;color:var(--red-dark);}
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:3000;align-items:center;justify-content:center;flex-direction:column;gap:16px;backdrop-filter:blur(4px);}
.lightbox.open{display:flex;}
.lb-img-wrap{max-width:88vw;max-height:72vh;border:3px solid var(--gold);border-radius:12px;overflow:hidden;box-shadow:0 0 60px rgba(200,151,42,.4);}
.lb-img-wrap img{max-width:88vw;max-height:72vh;object-fit:contain;display:block;}
.lb-close{position:fixed;top:20px;right:24px;background:var(--gold);color:#fff;border:none;border-radius:50%;width:38px;height:38px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;z-index:3001;}
.lb-name{font-size:20px;font-weight:700;color:var(--gold-light);text-align:center;}
.lb-price{font-size:15px;color:#ffd700;margin-top:4px;text-align:center;}
.lb-nav{display:flex;gap:12px;}
.lb-nav button{background:rgba(200,151,42,.3);border:1px solid var(--gold);color:var(--gold-light);padding:6px 18px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:700;transition:background .15s;}
.lb-nav button:hover{background:var(--gold);color:#fff;}
.wa-preview-modal .mtitle{font-weight:900;letter-spacing:.5px;color:#000;}
.wa-preview-modal .mbox{width:500px;max-height:85vh;display:flex;flex-direction:column;}
.wa-preview-box{flex:1;overflow-y:auto;background:#e5ddd5;border-radius:10px;padding:14px;font-family:monospace;font-size:12px;line-height:1.6;white-space:pre-wrap;max-height:55vh;margin-bottom:12px;border:1px solid #ddd;color:#000;font-weight:700;}
.wa-note{font-size:11px;color:#888;margin-bottom:10px;line-height:1.5;}

/* upload modal tabs */
.img-tab-btns{display:flex;gap:8px;margin-bottom:12px;}
.img-tab-btn{flex:1;padding:8px;border:1.5px solid var(--gold);background:transparent;border-radius:7px;cursor:pointer;font-size:12px;font-weight:700;color:var(--gold);transition:all .18s;}
.img-tab-btn.active{background:var(--gold);color:#fff;}
.img-tab-content{display:none;}
.img-tab-content.active{display:block;}
.img-tab{display:none;}.img-tab.active{display:block;}

@media(max-width:700px){
  .menu-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .header-notes{display:none;}
  .logo-chinese{font-size:34px;}
  .hdr-right{min-width:auto;}
  .header-edit-btn{font-size:10px;padding:7px 10px;}
  .order-float-inner{flex-wrap:wrap;gap:8px;}
  .of-btns{width:100%;justify-content:flex-end;}
}