*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;}
:root{
  --orange:#EE4D2D;--orange-dark:#D43F22;--orange-light:#FFCBBF;--orange-bg:#FFF3F1;
  --amber:#F57C00;--red:#D32F2F;--red-bg:#FEE2E2;--green:#00833D;--green-bg:#DCFCE7;--blue:#1A73E8;
  --gray-50:#F9F9F9;--gray-100:#F0F0F0;--gray-200:#E0E0E0;--gray-300:#BDBDBD;
  --gray-400:#9E9E9E;--gray-500:#757575;--gray-600:#616161;--gray-700:#424242;--gray-800:#212121;--gray-900:#111111;
  --font:'Roboto',sans-serif;--radius:10px;--radius-sm:7px;
  --shadow:0 1px 4px rgba(0,0,0,0.12);--shadow-lg:0 4px 16px rgba(0,0,0,0.14);
  --nav-h:60px;--top-h:54px;
}
html,body{font-family:var(--font);background:var(--gray-50);min-height:100vh;min-height:100dvh;}
.page{display:flex;flex-direction:column;min-height:100dvh;background:var(--gray-50);}
.top-bar{position:sticky;top:0;z-index:100;background:var(--orange);height:var(--top-h);display:flex;align-items:center;padding:0 20px;box-shadow:0 2px 8px rgba(238,77,45,.3);flex-shrink:0;}
.top-bar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:0 4px;}
.app-name{font-size:18px;font-weight:900;color:white;letter-spacing:-.4px;}
.app-sub{font-size:11px;color:rgba(255,255,255,.65);font-weight:500;margin-top:1px;}
.page-title{font-size:15px;font-weight:700;color:white;letter-spacing:-.2px;}
.back-btn{width:34px;height:34px;background:rgba(255,255,255,.18);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;font-size:16px;color:white;flex-shrink:0;}
.avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;cursor:pointer;border:2px solid rgba(255,255,255,.3);flex-shrink:0;color:white;}
.header-right-placeholder{width:34px;}
.table-badge{background:white;color:var(--orange-dark);font-size:12px;font-weight:800;padding:4px 12px;border-radius:999px;}
.screen-body{flex:1;padding:16px 16px calc(var(--nav-h)+16px);overflow-y:auto;}
.screen-body.no-pad{padding:0;}
.screen-body.white-bg{background:white;}
.section-label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gray-500);margin-bottom:10px;margin-top:6px;}
.btn-primary{width:100%;padding:14px;background:var(--orange);border:none;border-radius:var(--radius-sm);color:white;font-family:var(--font);font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 3px 12px rgba(238,77,45,.35);transition:transform .15s;}
.btn-primary:active{transform:scale(.98);}
.btn-secondary{padding:11px 16px;border-radius:var(--radius-sm);border:1.5px solid var(--gray-200);background:white;font-family:var(--font);font-size:13px;font-weight:700;color:var(--gray-600);cursor:pointer;}
.btn-orange{padding:11px 16px;border-radius:var(--radius-sm);border:none;background:var(--orange);font-family:var(--font);font-size:13px;font-weight:700;color:white;cursor:pointer;box-shadow:0 2px 8px rgba(238,77,45,.3);}
.btn-red{padding:11px 16px;border-radius:var(--radius-sm);border:none;background:var(--red);font-family:var(--font);font-size:13px;font-weight:700;color:white;cursor:pointer;}
.form-field{margin-bottom:14px;}
.form-label{font-size:11px;font-weight:700;color:var(--gray-600);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em;display:block;}
.form-label .optional{font-weight:500;text-transform:none;letter-spacing:0;color:var(--gray-400);font-size:10px;}
.form-input{width:100%;padding:12px 14px;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);font-family:var(--font);font-size:14px;color:var(--gray-900);outline:none;transition:border-color .2s;background:white;}
.form-input:focus{border-color:var(--orange);}
.sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:200;pointer-events:none;transition:background .25s;}
.sheet-overlay.open{background:rgba(0,0,0,.5);pointer-events:all;}
.sheet{position:fixed;left:0;right:0;bottom:0;background:white;border-radius:18px 18px 0 0;padding:0 0 20px;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,1,.32,1);max-height:92dvh;overflow-y:auto;scrollbar-width:none;}
.sheet::-webkit-scrollbar{display:none;}
.sheet-overlay.open .sheet{transform:translateY(0);}
.sheet-handle{width:40px;height:4px;background:var(--gray-200);border-radius:99px;margin:12px auto 0;}
.sheet-title{font-size:16px;font-weight:800;color:var(--gray-900);padding:14px 20px 12px;border-bottom:1px solid var(--gray-100);}
.sheet-body{padding:14px 20px;}
.sheet-actions{display:flex;gap:8px;padding:12px 20px 0;}
.sheet-btn-save{flex:2;padding:13px;background:var(--orange);border:none;border-radius:var(--radius-sm);color:white;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;}
.sheet-btn-del{flex:1;padding:13px;background:var(--red);border:none;border-radius:var(--radius-sm);color:white;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;}
.sheet-btn-cancel{flex:1;padding:13px;background:white;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);color:var(--gray-600);font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;}
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:300;pointer-events:none;transition:background .2s;display:flex;align-items:center;justify-content:center;padding:24px;}
.confirm-overlay.open{background:rgba(0,0,0,.55);pointer-events:all;}
.confirm-box{background:white;border-radius:16px;padding:24px;width:100%;max-width:320px;transform:scale(.88);opacity:0;transition:all .2s cubic-bezier(.32,1,.32,1);text-align:center;}
.confirm-overlay.open .confirm-box{transform:scale(1);opacity:1;}
.confirm-icon{font-size:32px;margin-bottom:10px;}
.confirm-title{font-size:16px;font-weight:800;color:var(--gray-900);margin-bottom:6px;}
.confirm-msg{font-size:13px;color:var(--gray-600);margin-bottom:18px;line-height:1.5;}
.confirm-actions{display:flex;gap:10px;}
.confirm-cancel{flex:1;padding:12px;border:1.5px solid var(--gray-200);border-radius:9px;background:white;font-family:var(--font);font-size:13px;font-weight:700;color:var(--gray-600);cursor:pointer;}
.confirm-ok{flex:1;padding:12px;border:none;border-radius:9px;background:var(--red);font-family:var(--font);font-size:13px;font-weight:700;color:white;cursor:pointer;}
.toast{position:fixed;bottom:15px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--gray-900);color:white;padding:10px 20px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;transition:all .28s;z-index:999;white-space:nowrap;pointer-events:none;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);background:white;border-top:1px solid var(--gray-100);z-index:100;padding-bottom:env(safe-area-inset-bottom);}
.nav-inner{display:flex;align-items:stretch;height:100%;}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;transition:all .15s;}
.nav-icon{font-size:20px;}
.nav-label{font-size:10px;font-weight:700;color:var(--gray-400);}
.nav-item.active .nav-label{color:var(--orange);}
.nav-icon-wrap{position:relative;display:inline-block;}
.nav-badge{position:absolute;top:-4px;right:-7px;min-width:17px;height:17px;padding:0 4px;background:var(--red);border-radius:999px;font-size:9px;font-weight:800;color:white;display:flex;align-items:center;justify-content:center;}
.mgmt-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-top:4px;}
.mgmt-toolbar-count{font-size:12px;font-weight:700;color:var(--gray-500);}
.btn-add{padding:10px 18px;background:var(--orange);border:none;border-radius:var(--radius-sm);color:white;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(238,77,45,.3);}
.mgmt-row{
  background:white;
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 1px 4px rgba(0,0,0,0.08);
  border:1px solid var(--gray-100);
}
.mgmt-row-icon{
  width:44px;height:44px;
  border-radius:10px;
  background:var(--orange-bg);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  flex-shrink:0;
}
.mgmt-row-info{flex:1;min-width:0;}
.mgmt-row-name{
  font-size:14px;font-weight:700;
  color:var(--gray-900);
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mgmt-row-sub{
  font-size:11px;color:var(--gray-500);
  margin-top:3px;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mgmt-row-actions{display:flex;gap:6px;flex-shrink:0;}
.mgmt-edit-btn{
  padding:7px 14px;
  border-radius:8px;
  font-family:var(--font);font-size:12px;font-weight:700;
  cursor:pointer;
  background:var(--orange-bg);color:var(--orange-dark);
  border:1.5px solid var(--orange-light);
  white-space:nowrap;
}
.mgmt-del-btn{
  padding:7px 14px;
  border-radius:8px;
  font-family:var(--font);font-size:12px;font-weight:700;
  cursor:pointer;
  background:var(--red-bg);color:var(--red);
  border:1.5px solid #FECACA;
  white-space:nowrap;
}
.attr-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.attr-del-btn{width:32px;height:32px;flex-shrink:0;background:var(--red-bg);border:none;border-radius:7px;color:var(--red);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.attr-add-btn{display:flex;align-items:center;justify-content:center;gap:4px;padding:9px 12px;background:var(--gray-50);border:1.5px dashed var(--gray-300);border-radius:7px;font-family:var(--font);font-size:12px;font-weight:700;color:var(--gray-500);cursor:pointer;width:100%;margin-top:4px;transition:all .15s;}
.attr-add-btn:hover{border-color:var(--orange);color:var(--orange);}

/* === HISTORY === */
.filter-bar{display:flex;gap:8px;padding:12px 20px;background:white;border-bottom:1px solid var(--gray-100);overflow-x:auto;scrollbar-width:none;}
.filter-bar::-webkit-scrollbar{display:none;}
.filter-chip{padding:7px 14px;border-radius:999px;border:1.5px solid var(--gray-200);background:white;font-family:var(--font);font-size:12px;font-weight:700;color:var(--gray-500);cursor:pointer;white-space:nowrap;transition:all .15s;}
.filter-chip.active{background:var(--orange);border-color:var(--orange);color:white;}
.invoice-row{background:white;border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:8px;box-shadow:var(--shadow);border:1px solid var(--gray-100);cursor:pointer;transition:all .15s;}
.invoice-row:active{transform:scale(.99);}
.inv-top{display:flex;justify-content:space-between;align-items:center;}
.inv-id{font-size:13px;font-weight:800;color:var(--gray-900);}
.inv-amt{font-size:14px;font-weight:900;color:var(--orange);}
.inv-bot{display:flex;justify-content:space-between;margin-top:4px;}
.inv-table{font-size:12px;color:var(--gray-600);font-weight:600;}
.inv-time{font-size:11px;color:var(--gray-400);}
.inv-status{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;display:inline-block;margin-top:5px;}
.inv-status.paid{background:var(--green-bg);color:var(--green);}
.inv-status.cancel{background:var(--red-bg);color:var(--red);}
.inv-detail-row{display:flex;justify-content:space-between;align-items:flex-start;font-size:12px;color:var(--gray-700);padding:6px 0;border-bottom:1px solid var(--gray-100);gap:8px;}
.inv-detail-row .left{flex:1;}
.inv-detail-row .name{font-weight:700;color:var(--gray-900);}
.inv-detail-row .meta{font-size:10px;color:var(--gray-400);margin-top:1px;}
.inv-detail-row .price{font-weight:700;white-space:nowrap;}
.inv-total-row{display:flex;justify-content:space-between;padding-top:10px;font-size:14px;font-weight:900;border-top:2px solid var(--gray-200);margin-top:6px;}
.inv-total-row .amt{color:var(--orange);}
.inv-cancel-btn{width:100%;padding:12px;margin-top:12px;background:var(--red-bg);border:1.5px solid #FECACA;border-radius:var(--radius-sm);color:var(--red);font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;}
.inv-cancel-btn:disabled{opacity:.4;cursor:default;}

/* === HOME STAFF === */
.banner{position:relative;overflow:hidden;background:linear-gradient(135deg,#FF6B35,#EE4D2D,#C4390F);flex-shrink:0;}
.banner-inner{position:relative;z-index:1;padding:14px 20px 10px;display:flex;align-items:flex-start;justify-content:space-between;}
.user-avatar{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.25);border:2px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;color:white;flex-shrink:0;}
.user-name{font-size:14px;font-weight:900;color:white;line-height:1;}
.user-role{font-size:11px;color:rgba(255,255,255,.75);margin-top:2px;}
.banner-tagline{font-size:12px;color:rgba(255,255,255,.9);font-weight:500;line-height:1.4;}
.banner-tagline strong{font-weight:900;font-size:14px;display:block;margin-bottom:3px;}
.banner-actions{display:flex;gap:7px;padding:0 20px 14px;position:relative;z-index:1;}
.bact{flex:1;padding:9px 4px;border-radius:var(--radius-sm);text-align:center;cursor:pointer;border:none;font-family:var(--font);font-size:11px;font-weight:700;transition:all .15s;}
.bact.primary{background:white;color:var(--orange-dark);box-shadow:0 2px 8px rgba(0,0,0,.15);}
.bact.secondary{background:rgba(255,255,255,.2);color:white;border:1.5px solid rgba(255,255,255,.3);}
.bact:active{transform:scale(.97);}
.quick-stats{display:flex;background:white;border-bottom:1px solid var(--gray-100);flex-shrink:0;}
.qs-item{flex:1;padding:10px 8px;text-align:center;border-right:1px solid var(--gray-100);}
.qs-item:last-child{border-right:none;}
.qs-val{font-size:17px;font-weight:900;color:var(--gray-900);letter-spacing:-.5px;}
.qs-val.orange{color:var(--orange);}.qs-val.green{color:var(--green);}
.qs-lbl{font-size:9px;font-weight:700;color:var(--gray-400);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
.func-section{padding:14px 20px 8px;}
.func-title{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gray-400);margin-bottom:12px;}
.func-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.func-item{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;padding:6px 4px;border-radius:10px;transition:all .15s;}
.func-item:active{background:var(--gray-100);}
.func-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;position:relative;}
.fi-orange{background:var(--orange-bg);}.fi-blue{background:#EEF4FF;}.fi-green{background:#EDFBF1;}.fi-gray{background:var(--gray-100);}
.func-badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;background:var(--red);border-radius:999px;font-size:10px;font-weight:800;color:white;display:flex;align-items:center;justify-content:center;}
.func-name{font-size:11px;font-weight:700;color:var(--gray-700);text-align:center;line-height:1.3;}
.order-section{padding:4px 20px 80px;}
.order-row{background:white;border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow);border:1px solid var(--gray-100);cursor:pointer;}
.or-table{font-size:13px;font-weight:800;color:var(--gray-900);min-width:52px;}
.or-info{flex:1;}
.or-items{font-size:12px;color:var(--gray-600);}
.or-time{font-size:11px;color:var(--gray-400);margin-top:2px;}
.or-amt{font-size:13px;font-weight:800;color:var(--orange);}
.or-status{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;}
.or-status.open{background:var(--orange-bg);color:var(--orange-dark);}
.or-status.paid{background:var(--green-bg);color:var(--green);}

/* === LOGIN === */
.login-wrap{display:flex;flex-direction:column;align-items:center;padding:40px 24px 24px;flex:1;background:white;}
.login-logo{width:80px;height:80px;background:var(--orange);border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:38px;margin-bottom:18px;box-shadow:0 6px 20px rgba(238,77,45,.35);}
.login-title{font-size:24px;font-weight:900;color:var(--gray-900);}
.login-sub{font-size:13px;color:var(--gray-500);margin-top:4px;margin-bottom:32px;}
.role-select{display:flex;gap:10px;width:100%;max-width:400px;margin-bottom:22px;}
.role-btn{flex:1;padding:11px 8px;border-radius:var(--radius-sm);border:1.5px solid var(--gray-200);background:white;font-family:var(--font);font-size:13px;font-weight:700;color:var(--gray-500);cursor:pointer;text-align:center;transition:all .15s;}
.role-btn.active{border-color:var(--orange);background:var(--orange-bg);color:var(--orange-dark);}
.login-form{width:100%;max-width:400px;}

/* === MANAGE === */
.banner{position:relative;overflow:hidden;background:linear-gradient(135deg,#FF6B35,#EE4D2D,#C4390F);flex-shrink:0;}
.banner-inner{position:relative;z-index:1;padding:14px 20px 10px;display:flex;align-items:flex-start;justify-content:space-between;}
.user-avatar{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.25);border:2px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;color:white;flex-shrink:0;}
.user-name{font-size:14px;font-weight:900;color:white;line-height:1;}
.user-role{font-size:11px;color:rgba(255,255,255,.75);margin-top:2px;}
.banner-tag{font-size:12px;color:rgba(255,255,255,.9);font-weight:500;line-height:1.4;}
.banner-tag strong{font-weight:900;font-size:14px;display:block;margin-bottom:3px;}
.banner-actions{display:flex;gap:7px;padding:0 20px 14px;position:relative;z-index:1;}
.bact{flex:1;padding:9px 4px;border-radius:var(--radius-sm);text-align:center;cursor:pointer;border:none;font-family:var(--font);font-size:11px;font-weight:700;transition:all .15s;}
.bact.p{background:white;color:var(--orange-dark);box-shadow:0 2px 8px rgba(0,0,0,.15);}
.bact.s{background:rgba(255,255,255,.2);color:white;border:1.5px solid rgba(255,255,255,.3);}
.bact:active{transform:scale(.97);}
.qs{display:flex;background:white;border-bottom:1px solid var(--gray-100);flex-shrink:0;}
.qs-i{flex:1;padding:10px 6px;text-align:center;border-right:1px solid var(--gray-100);}
.qs-i:last-child{border-right:none;}
.qs-v{font-size:17px;font-weight:900;color:var(--gray-900);letter-spacing:-.5px;}
.qs-v.o{color:var(--orange);}.qs-v.g{color:var(--green);}
.qs-l{font-size:9px;font-weight:700;color:var(--gray-400);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
.func-sec{padding:14px 20px 8px;}
.func-ttl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gray-400);margin-bottom:12px;}
.func-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.func-item{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;padding:6px 4px;border-radius:10px;transition:all .15s;}
.func-item:active{background:var(--gray-100);}
.fi{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;position:relative;}
.fi.or{background:var(--orange-bg);}.fi.bl{background:#EEF4FF;}.fi.gr{background:#EDFBF1;}
.fi.pu{background:#F4EEFF;}.fi.ye{background:#FFFBEA;}.fi.te{background:#E6FAFE;}.fi.gy{background:var(--gray-100);}
.fi-badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;background:var(--red);border-radius:999px;font-size:10px;font-weight:800;color:white;display:flex;align-items:center;justify-content:center;}
.fn{font-size:11px;font-weight:700;color:var(--gray-700);text-align:center;line-height:1.3;}
.rev-card{margin:0 20px 16px;background:linear-gradient(135deg,var(--orange),var(--amber));border-radius:12px;padding:16px;color:white;box-shadow:0 4px 16px rgba(238,77,45,.3);}
.rev-lbl{font-size:11px;opacity:.8;margin-bottom:3px;}
.rev-amt{font-size:26px;font-weight:900;letter-spacing:-.5px;}
.rev-meta{font-size:11px;opacity:.7;margin-top:2px;}
.rev-row{display:flex;gap:10px;margin-top:12px;}
.rev-mini{background:rgba(255,255,255,.18);border-radius:8px;padding:8px 10px;flex:1;}
.rev-mini-v{font-size:14px;font-weight:800;}
.rev-mini-l{font-size:10px;opacity:.8;margin-top:1px;}

/* === ORDER === */
.order-body{display:flex;flex-direction:column;height:calc(100dvh - var(--top-h));overflow:hidden;}
.order-main{display:flex;flex:1;overflow:hidden;min-height:0;}
.cat-sidebar{width:72px;flex-shrink:0;background:white;border-right:1px solid var(--gray-100);overflow-y:auto;scrollbar-width:none;}
.cat-sidebar::-webkit-scrollbar{display:none;}
.cat-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:12px 4px;cursor:pointer;border-left:3px solid transparent;transition:all .15s;}
.cat-item.active{border-left-color:var(--orange);background:var(--orange-bg);}
.cat-icon{font-size:20px;}
.cat-name{font-size:9px;font-weight:700;color:var(--gray-500);text-align:center;line-height:1.2;}
.cat-item.active .cat-name{color:var(--orange-dark);}
.menu-panel{flex:1;overflow-y:auto;padding:10px;scrollbar-width:none;}
.menu-panel::-webkit-scrollbar{display:none;}
.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.menu-card{background:white;border-radius:10px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;border:1.5px solid transparent;transition:all .15s;position:relative;}
.menu-card:active{transform:scale(.97);}
.menu-card.in-cart{border-color:var(--orange);}
.menu-card-thumb{width:100%;aspect-ratio:1;background:linear-gradient(135deg,var(--orange-bg),#FEF3C7);display:flex;align-items:center;justify-content:center;font-size:36px;position:relative;}
.qty-badge{position:absolute;top:6px;right:6px;width:22px;height:22px;background:var(--orange);border-radius:50%;color:white;font-size:11px;font-weight:800;display:none;align-items:center;justify-content:center;}
.menu-card.in-cart .qty-badge{display:flex;}
.menu-card-body{padding:8px 10px;}
.menu-card-name{font-size:12px;font-weight:700;color:var(--gray-900);line-height:1.3;margin-bottom:5px;}
.menu-card-foot{display:flex;align-items:center;justify-content:space-between;}
.menu-card-price{font-size:12px;font-weight:800;color:var(--orange);}
.add-btn{width:24px;height:24px;background:var(--orange);border-radius:6px;display:flex;align-items:center;justify-content:center;color:white;font-size:15px;font-weight:900;cursor:pointer;border:none;}
.cart-panel{background:white;border-top:2px solid var(--gray-100);flex-shrink:0;}
.cart-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 8px;cursor:pointer;user-select:none;}
.cart-header-title{font-size:13px;font-weight:700;color:var(--gray-700);display:flex;align-items:center;gap:7px;}
.cart-count{background:var(--orange);color:white;font-size:11px;font-weight:800;padding:1px 7px;border-radius:999px;}
.cart-chevron{font-size:11px;color:var(--gray-400);transition:transform .2s;}
.cart-panel.expanded .cart-chevron{transform:rotate(180deg);}
.cart-items{max-height:0;overflow:hidden;padding:0 14px;transition:max-height .3s ease;}
.cart-panel.expanded .cart-items{max-height:200px;overflow-y:auto;}
.cart-row-wrap{position:relative;overflow:hidden;border-radius:5px;}
.cart-row-del-bg{position:absolute;right:0;top:0;bottom:0;width:60px;background:var(--red);display:flex;align-items:center;justify-content:center;color:white;font-size:16px;pointer-events:none;}
.cart-row{display:flex;align-items:center;gap:7px;padding:6px 2px;background:white;position:relative;transition:transform .25s ease;touch-action:pan-y;border-bottom:1px solid var(--gray-50);}
.cart-row.swiped{transform:translateX(-60px);}
.cart-row-info{flex:1;min-width:0;cursor:pointer;}
.cart-row-name{font-size:12px;font-weight:700;color:var(--gray-900);line-height:1.3;}
.cart-row-meta{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px;}
.cart-meta-tag{font-size:10px;font-weight:700;background:var(--gray-100);color:var(--gray-600);padding:1px 6px;border-radius:3px;border:1px solid var(--gray-200);}
.qty-controls{display:flex;align-items:center;gap:5px;flex-shrink:0;}
.qty-btn{width:22px;height:22px;background:var(--gray-100);border-radius:5px;border:1px solid var(--gray-200);font-family:var(--font);font-size:13px;font-weight:800;color:var(--gray-700);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.qty-num{font-size:12px;font-weight:800;color:var(--gray-900);min-width:16px;text-align:center;}
.cart-subtotal{font-size:12px;font-weight:800;color:var(--orange);min-width:58px;text-align:right;}
.cart-del-btn{width:22px;height:22px;background:var(--red-bg);border:none;border-radius:5px;color:var(--red);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cart-row-wrap.removing{animation:rowOut .22s ease forwards;}
@keyframes rowOut{to{opacity:0;max-height:0;padding:0;margin:0;transform:translateX(-100%);}}
.cart-footer{display:flex;align-items:center;justify-content:space-between;padding:8px 14px 6px;}
.cart-total-lbl{font-size:10px;font-weight:700;color:var(--gray-400);text-transform:uppercase;letter-spacing:.06em;}
.cart-total-amt{font-size:18px;font-weight:900;color:var(--orange);letter-spacing:-.5px;}
.cart-actions{display:flex;gap:8px;padding:0 14px 14px;}
.cart-actions .btn-secondary{flex:1;}
.cart-actions .btn-orange{flex:2;}
.item-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:200;pointer-events:none;transition:background .25s;}
.item-modal-overlay.open{background:rgba(0,0,0,.45);pointer-events:all;}
.item-modal-sheet{position:fixed;left:0;right:0;bottom:0;background:white;border-radius:18px 18px 0 0;padding:0 0 20px;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,1,.32,1);max-height:92dvh;overflow-y:auto;scrollbar-width:none;}
.item-modal-sheet::-webkit-scrollbar{display:none;}
.item-modal-overlay.open .item-modal-sheet{transform:translateY(0);}
.modal-handle{width:40px;height:4px;background:var(--gray-200);border-radius:99px;margin:12px auto 0;}
.modal-item-head{display:flex;align-items:center;gap:14px;padding:16px 20px 12px;border-bottom:1px solid var(--gray-100);}
.modal-thumb{width:58px;height:58px;border-radius:12px;flex-shrink:0;background:linear-gradient(135deg,var(--orange-bg),#FEF3C7);display:flex;align-items:center;justify-content:center;font-size:28px;}
.modal-item-name{font-size:16px;font-weight:800;color:var(--gray-900);}
.modal-item-price{font-size:13px;color:var(--orange);font-weight:700;margin-top:2px;}
.modal-section{padding:12px 20px 6px;}
.modal-section-title{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--gray-400);margin-bottom:10px;}
.size-chips{display:flex;gap:8px;flex-wrap:wrap;}
.size-chip{flex:1;min-width:58px;border:1.5px solid var(--gray-200);border-radius:9px;padding:8px 6px;text-align:center;cursor:pointer;transition:all .15s;}
.size-chip .sz-lbl{font-size:13px;font-weight:800;color:var(--gray-700);}
.size-chip .sz-ext{font-size:10px;color:var(--gray-400);margin-top:1px;}
.size-chip.active{border-color:var(--orange);background:var(--orange-bg);}
.size-chip.active .sz-lbl{color:var(--orange-dark);}
.size-chip.active .sz-ext{color:var(--orange);}
.topping-list{display:flex;flex-direction:column;gap:6px;}
.topping-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1.5px solid var(--gray-100);border-radius:9px;cursor:pointer;transition:all .15s;}
.topping-row.checked{border-color:var(--orange);background:var(--orange-bg);}
.topping-name{font-size:13px;font-weight:700;color:var(--gray-800);}
.topping-row.checked .topping-name{color:var(--orange-dark);}
.topping-right{display:flex;align-items:center;gap:10px;}
.topping-price{font-size:12px;font-weight:700;color:var(--gray-400);}
.topping-row.checked .topping-price{color:var(--orange);}
.topping-check{width:22px;height:22px;border:1.5px solid var(--gray-300);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;color:transparent;transition:all .15s;}
.topping-row.checked .topping-check{background:var(--orange);border-color:var(--orange);color:white;}
.modal-note{width:100%;border:1.5px solid var(--gray-200);border-radius:9px;padding:10px 12px;font-family:var(--font);font-size:13px;color:var(--gray-800);outline:none;resize:none;height:54px;}
.modal-note:focus{border-color:var(--orange);}
.modal-footer{display:flex;align-items:center;gap:12px;padding:14px 20px 0;border-top:1px solid var(--gray-100);margin-top:10px;}
.modal-qty-wrap{display:flex;align-items:center;gap:10px;background:var(--gray-50);border-radius:10px;padding:8px 12px;}
.modal-qty-btn{width:28px;height:28px;background:white;border:1.5px solid var(--gray-200);border-radius:8px;font-size:16px;font-weight:700;cursor:pointer;font-family:var(--font);color:var(--gray-700);display:flex;align-items:center;justify-content:center;}
.modal-qty-num{font-size:16px;font-weight:800;color:var(--gray-900);min-width:20px;text-align:center;}
.modal-add-btn{flex:1;padding:13px;background:var(--orange);border:none;border-radius:10px;color:white;font-family:var(--font);font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 3px 12px rgba(238,77,45,.3);display:flex;align-items:center;justify-content:center;gap:6px;}
.modal-add-price{opacity:.85;font-size:12px;}

/* === PAYMENT === */
.receipt{background:white;margin:12px 20px;border-radius:12px;padding:16px;box-shadow:var(--shadow);border:1px solid var(--gray-100);}
.receipt-header{text-align:center;padding-bottom:12px;border-bottom:2px dashed var(--gray-200);margin-bottom:12px;}
.receipt-logo{font-size:28px;margin-bottom:4px;}
.receipt-shop{font-size:16px;font-weight:900;color:var(--gray-900);}
.receipt-addr{font-size:11px;color:var(--gray-400);margin-top:2px;}
.receipt-table-badge{display:inline-block;background:var(--orange-bg);color:var(--orange-dark);font-size:12px;font-weight:700;padding:3px 12px;border-radius:999px;margin-top:6px;}
.receipt-item{display:flex;justify-content:space-between;align-items:flex-start;font-size:12px;color:var(--gray-700);padding:6px 0;border-bottom:1px solid var(--gray-100);gap:8px;}
.receipt-item-left{flex:1;min-width:0;}
.receipt-item-name{font-weight:700;color:var(--gray-900);}
.receipt-item-meta{margin-top:2px;display:flex;flex-wrap:wrap;gap:3px;}
.receipt-meta-tag{font-size:10px;font-weight:700;background:var(--gray-100);color:var(--gray-600);padding:1px 6px;border-radius:3px;}
.receipt-item-price{font-weight:700;color:var(--gray-900);white-space:nowrap;flex-shrink:0;}
hr.dashed{border:none;border-top:2px dashed var(--gray-200);margin:10px 0;}
.receipt-total-row{display:flex;justify-content:space-between;align-items:center;padding-top:10px;margin-top:4px;border-top:2px solid var(--gray-200);}
.receipt-total-lbl{font-size:14px;font-weight:700;color:var(--gray-800);}
.receipt-total-amt{font-size:22px;font-weight:900;color:var(--orange);letter-spacing:-.5px;}
.qr-section{text-align:center;padding:12px 0 4px;border-top:2px dashed var(--gray-200);margin-top:10px;}
.qr-box{width:72px;height:72px;margin:0 auto 6px;background:var(--gray-900);border-radius:8px;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:5px;}
.qr-box span{background:white;border-radius:1px;}
.qr-box span.off{opacity:0;}
.qr-label{font-size:10px;color:var(--gray-400);}
.pm-section{margin:0 20px 12px;}
.pm-title{font-size:11px;font-weight:700;color:var(--gray-400);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;}
.pm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.pm-btn{background:white;border:1.5px solid var(--gray-200);border-radius:10px;padding:12px 6px;text-align:center;cursor:pointer;transition:all .15s;font-family:var(--font);font-size:12px;font-weight:700;color:var(--gray-500);}
.pm-btn .pm-icon{font-size:22px;display:block;margin-bottom:4px;}
.pm-btn.active,.pm-btn:hover{border-color:var(--orange);background:var(--orange-bg);color:var(--orange-dark);}
.pay-action{padding:0 20px 16px;}
.btn-pay{width:100%;padding:15px;background:var(--orange);border:none;border-radius:var(--radius-sm);color:white;font-family:var(--font);font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 4px 14px rgba(238,77,45,.4);}

/* === REPORT === */
.date-chips{display:flex;gap:8px;padding:14px 0px 6px;}
.date-chip{flex:1;padding:8px 4px;border-radius:var(--radius-sm);text-align:center;border:1.5px solid var(--gray-200);background:white;font-family:var(--font);font-size:12px;font-weight:700;color:var(--gray-500);cursor:pointer;transition:all .15s;}
.date-chip.active{background:var(--orange);border-color:var(--orange);color:white;}
.hero-card{background:var(--orange);border-radius:12px;padding:16px;color:white;margin:8px 0px 14px;box-shadow:0 4px 16px rgba(238,77,45,.3);}
.hero-lbl{font-size:12px;opacity:.8;margin-bottom:3px;}
.hero-amt{font-size:28px;font-weight:900;letter-spacing:-.5px;}
.hero-row{display:flex;gap:10px;margin-top:12px;}
.hero-mini{background:rgba(255,255,255,.18);border-radius:8px;padding:8px 10px;flex:1;}
.hero-mini-val{font-size:15px;font-weight:800;}
.hero-mini-lbl{font-size:10px;opacity:.8;margin-top:1px;}
.top-row{display:flex;align-items:center;gap:10px;background:white;border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:7px;box-shadow:var(--shadow);border:1px solid var(--gray-100);}
.top-rank{font-size:14px;font-weight:900;color:var(--orange);min-width:20px;}
.top-emoji{font-size:20px;}
.top-info{flex:1;min-width:0;}
.top-name{font-size:13px;font-weight:700;color:var(--gray-900);}
.top-qty{font-size:11px;color:var(--gray-500);margin-top:1px;}
.top-rev{font-size:13px;font-weight:800;color:var(--orange);}

/* === SHOP INFO === */
.shop-preview{background:var(--orange);padding:20px 16px 18px;text-align:center;color:white;}
.shop-avatar-icon{width:68px;height:68px;border-radius:18px;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 8px;cursor:pointer;}
.shop-preview-name{font-size:17px;font-weight:900;}
.shop-preview-sub{font-size:11px;opacity:.75;margin-top:2px;}

/* === TABLES === */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;}
.stat-card{background:white;border-radius:var(--radius-sm);padding:10px 8px;text-align:center;box-shadow:var(--shadow);border:1px solid var(--gray-100);}
.stat-num{font-size:18px;font-weight:900;color:var(--gray-900);letter-spacing:-.5px;}
.stat-num.o{color:var(--orange);}.stat-num.g{color:var(--green);}
.stat-lbl{font-size:10px;color:var(--gray-500);font-weight:700;margin-top:2px;}
.legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.leg-i{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--gray-500);font-weight:600;}
.leg-d{width:10px;height:10px;border-radius:3px;}
.table-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
.tc{aspect-ratio:1;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border:1.5px solid transparent;transition:all .15s;}
.tc .tn{font-size:11px;font-weight:900;line-height:1;}
.tc .ti{font-size:9px;font-weight:600;margin-top:3px;opacity:.85;text-align:center;}
.tc.free{background:white;border-color:var(--gray-200);color:var(--gray-500);}
.tc.occupied{background:var(--orange);color:white;}
.tc.waiting{background:var(--amber);color:white;}
.tc.reserved{background:var(--blue);color:white;}

 @media (max-width: 768px) {
  .screen-body{
      margin: 15px !important;
    }
}
/* RESPONSIVE - Tablet 768px+, PC 1024px+ */
@media(min-width: 768px) {
  html, body { background: #C8CDD4; }
  .page { max-width: 720px; margin: 0 auto; box-shadow: 0 0 60px rgba(0,0,0,.2); }
  .top-bar { position: sticky; top: 0; width: 100%; background: var(--orange); }
  .bottom-nav { position: sticky; bottom: 0; left: auto; right: auto; width: 100%; transform: none; }
  .screen-body { padding: 20px 28px 16px; }
  .screen-body.no-pad { padding: 0; }
  .toast { bottom: 80px; }
  .sheet { left: 50%; right: auto; width: 560px; margin-left: -280px; transform: translateY(100%); }
  .sheet-overlay.open .sheet { transform: translateY(0); }
  .item-modal-sheet { position: fixed; left: 50%; right: auto; bottom: 0; width: 560px; margin-left: -280px; transform: translateY(100%); }
  .item-modal-overlay.open .item-modal-sheet { transform: translateY(0); }
  .confirm-box { max-width: 380px; }
  
  .func-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .table-grid { grid-template-columns: repeat(6, 1fr); }
  .menu-grid { grid-template-columns: repeat(3, 1fr); }
  
}
@media(min-width: 1024px) {
  .page { max-width: 800px; }
  .screen-body { padding: 24px 36px 16px; }
  .sheet { width: 600px; margin-left: -300px; }
  .item-modal-sheet { width: 600px; margin-left: -300px; }
  .table-grid { grid-template-columns: repeat(7, 1fr); }
}
.popup-order {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.popup-order.open {
  transform: translateX(0);
}

/* optional: blur background nhẹ */
.popup-order::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: -1;
}
.popup-order {
  box-shadow: -10px 0 30px rgba(0,0,0,0.1);
}
.page{
    position: relative;
    overflow: hidden;
}
#paymentPopup {
  align-items: flex-end;
  padding: 0;
  z-index: 500;
}

#paymentPopup > div {
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(.32,1,.32,1);
}

#paymentPopup.open > div {
  transform: translateY(0);
}
#paymentPopup {
  z-index: 1000;
  align-items: flex-end;
  padding: 0;
}
#customRange {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* FIX CỨNG */
#customRange input {
  width: auto !important;      /* quan trọng nhất */
  max-width: 160px;            /* tránh quá dài */
  flex: 0 0 auto !important;
  display: inline-block;

  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 14px;
}

/* Hover + focus */
#customRange input:hover {
  border-color: #ff5a2c;
}

#customRange input:focus {
  border-color: #ff5a2c;
  box-shadow: 0 0 0 2px rgba(255, 90, 44, 0.15);
}

/* Mũi tên giữa */
#customRange .arrow {
  font-size: 14px;
  color: #666;
}

/* Icon calendar */
#customRange input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(40%);
}


#customRange .arrow {
  flex: 0 0 auto;
}
/* Responsive nhẹ */
@media (max-width: 480px) {
  #customRange {
    flex-direction: row !important;
    align-items: center !important;
  }
}
a {
  text-decoration: none !important;
}