/* =====================================================================
   POS THEME  ·  vybev
   ---------------------------------------------------------------------
   ĐỌC TRƯỚC KHI SỬA:
   Mọi token đều có tiền tố --pos-*  (namespace riêng).
   Lý do: theme gốc có khối :root định nghĩa --primary / --main-color và
   nó LOAD SAU file này. Nếu mình đặt tên trùng (--primary) sẽ bị theme
   ghi đè ngược về đỏ. Dùng --pos-* thì không component nào ngoài file này
   chạm tới được  ->  đổi màu 1 chỗ, cả app đổi theo, không sợ xung đột.

   ĐỔI MÀU CẢ APP: chỉ sửa 4 dòng --pos-accent* ngay bên dưới.
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;}

:root{
  /* ---------- 1. MÀU NHẤN (đổi ở đây là xong) ---------- */
  --pos-accent:#41B45F;       /* xanh lá tươi, thân thiện — màu chủ đạo */
  --pos-accent-dark:#33A04F;  /* trạng thái hover / nhấn        */
  --pos-accent-soft:#C5E9CF;  /* viền nhạt                      */
  --pos-accent-bg:#EBF7EE;    /* nền nhạt cho mục đang chọn     */

  /* ---------- 2. MÀU TRẠNG THÁI ---------- */
  --pos-warn:#C98A2B;   --pos-warn-bg:#F6EFE2;   /* chờ / cảnh báo  */
  --pos-danger:#D14343; --pos-danger-bg:#FBECEC; --pos-danger-bd:#EFCDCD; /* huỷ / xoá */
  --pos-ok:#41B45F;     --pos-ok-bg:#EBF7EE;     /* đã thu / thành công */
  --pos-info:#5A7184;   --pos-info-bg:#EDEFF2;   /* phụ / đặt trước */

  /* ---------- 3. XÁM TRUNG TÍNH (nền trắng, xám rất nhẹ) ---------- */
  --pos-g50:#FFFFFF;  --pos-g100:#EEF1F4; --pos-g200:#E2E6EB; --pos-g300:#C7CCD4;
  --pos-g400:#9AA1AD; --pos-g500:#6B7280; --pos-g600:#4B5563; --pos-g700:#374151;
  --pos-g800:#1F2733; --pos-g900:#111827;

  /* ---------- 4. HÌNH KHỐI ---------- */
  --pos-font:'Roboto','Segoe UI',system-ui,sans-serif;
  --pos-radius:16px; --pos-radius-sm:10px;
  --pos-shadow:0 2px 10px rgba(17,24,39,.06);
  --pos-shadow-lg:0 14px 36px rgba(17,24,39,.12);
  --pos-ring:0 0 0 3px rgba(65,180,95,.20);
  --pos-glow:0 4px 12px rgba(65,180,95,.22);
  --pos-nav-h:62px; --pos-top-h:56px;
}

/* =====================================================================
   GHI ĐÈ BIẾN CỦA THEME GỐC (vybev)
   ---------------------------------------------------------------------
   Khai báo kèm !important → THẮNG biến của theme DÙ theme load sau.
   Nhờ vậy CẢ APP GỐC (nút, giá, nhãn, link…) đổi theo màu nhấn,
   không cần sửa HTML. Đổi màu: chỉ cần đổi 4 dòng --pos-accent* ở trên.
   ===================================================================== */
:root{
  --primary:var(--pos-accent) !important;
  --main-color:var(--pos-accent) !important;
  --link-hover:var(--pos-accent) !important;
  --label-sale:var(--pos-accent) !important;
  --label-hot:var(--pos-accent) !important;
  --new-price:var(--pos-accent) !important;
  --price:var(--pos-g900) !important;
  --old-price:var(--pos-g400) !important;
  --label-new:var(--pos-info) !important;   /* nhãn phụ → xám xanh trầm, bỏ xanh dương chói */
  --success:var(--pos-ok) !important;
  --header-color:#2E8F47 !important;        /* header xanh thay vì gần đen */
  --footer-color:#2E8F47 !important;
  --link-color:var(--pos-g900) !important;
}

html,body{font-family:var(--pos-font);background:var(--pos-g50);color:var(--pos-g900);min-height:100vh;min-height:100dvh;}
a{text-decoration:none !important;color:inherit;}
.page{display:flex;flex-direction:column;min-height:100dvh;background:var(--pos-g50);position:relative;overflow:hidden;}

/* ============================ TOP BAR ============================ */
.top-bar{position:sticky;top:0;z-index:100;background:var(--pos-accent);height:var(--pos-top-h);display:flex;align-items:center;padding:0 20px;box-shadow:0 1px 0 rgba(0,0,0,.05);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:800;color:#fff;letter-spacing:-.3px;}
.app-sub{font-size:11px;color:rgba(255,255,255,.7);font-weight:500;margin-top:1px;}
.page-title{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.2px;}
.back-btn{width:34px;height:34px;background:rgba(255,255,255,.16);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;font-size:16px;color:#fff;flex-shrink:0;transition:background .15s;}
.back-btn:active{background:rgba(255,255,255,.28);}
.avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;cursor:pointer;border:2px solid rgba(255,255,255,.35);flex-shrink:0;color:#fff;}
.header-right-placeholder{width:34px;}
.table-badge{background:#fff;color:var(--pos-accent-dark);font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;}

/* ============================ LAYOUT ============================ */
.screen-body{flex:1;padding:16px 16px calc(var(--pos-nav-h) + 16px);overflow-y:auto;}
.screen-body.no-pad{padding:0;}
.screen-body.white-bg{background:#fff;}
.section-label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--pos-g400);margin-bottom:10px;margin-top:6px;}

/* ============================ BUTTONS ============================ */
.btn-primary{width:100%;padding:14px;background:var(--pos-accent);border:none;border-radius:var(--pos-radius-sm);color:#fff;font-family:var(--pos-font);font-size:15px;font-weight:700;cursor:pointer;box-shadow:var(--pos-glow);transition:transform .12s,background .15s;}
.btn-primary:hover{background:var(--pos-accent-dark);}
.btn-primary:active{transform:scale(.985);}
.btn-secondary{padding:11px 16px;border-radius:var(--pos-radius-sm);border:1.5px solid var(--pos-g200);background:#fff;font-family:var(--pos-font);font-size:13px;font-weight:700;color:var(--pos-g600);cursor:pointer;transition:border-color .15s,color .15s;}
.btn-secondary:hover{border-color:var(--pos-g300);color:var(--pos-g800);}
.btn-orange{padding:11px 16px;border-radius:var(--pos-radius-sm);border:none;background:var(--pos-accent);font-family:var(--pos-font);font-size:13px;font-weight:700;color:#fff;cursor:pointer;box-shadow:var(--pos-glow);transition:background .15s;}
.btn-orange:hover{background:var(--pos-accent-dark);}
.btn-red{padding:11px 16px;border-radius:var(--pos-radius-sm);border:none;background:var(--pos-danger);font-family:var(--pos-font);font-size:13px;font-weight:700;color:#fff;cursor:pointer;}

/* ============================ FORM ============================ */
.form-field{margin-bottom:14px;}
.form-label{font-size:11px;font-weight:700;color:var(--pos-g600);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(--pos-g400);font-size:10px;}
.form-input{width:100%;padding:12px 14px;border:1.5px solid var(--pos-g200);border-radius:var(--pos-radius-sm);font-family:var(--pos-font);font-size:14px;color:var(--pos-g900);outline:none;transition:border-color .15s,box-shadow .15s;background:#fff;}
.form-input:focus{border-color:var(--pos-accent);box-shadow:var(--pos-ring);}

/* ============================ BOTTOM SHEET ============================ */
.sheet-overlay{position:fixed;inset:0;background:rgba(15,23,42,0);z-index:200;pointer-events:none;transition:background .25s;}
.sheet-overlay.open{background:rgba(15,23,42,.45);pointer-events:all;}
.sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:20px 20px 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;box-shadow:var(--pos-shadow-lg);}
.sheet::-webkit-scrollbar{display:none;}
.sheet-overlay.open .sheet{transform:translateY(0);}
.sheet-handle{width:40px;height:4px;background:var(--pos-g200);border-radius:99px;margin:12px auto 0;}
.sheet-title{font-size:16px;font-weight:800;color:var(--pos-g900);padding:14px 20px 12px;border-bottom:1px solid var(--pos-g100);}
.sheet-body{padding:14px 20px;}
.sheet-actions{display:flex;gap:8px;padding:12px 20px 0;}
.sheet-btn-save{flex:2;padding:13px;background:var(--pos-accent);border:none;border-radius:var(--pos-radius-sm);color:#fff;font-family:var(--pos-font);font-size:14px;font-weight:700;cursor:pointer;}
.sheet-btn-save:hover{background:var(--pos-accent-dark);}
.sheet-btn-del{flex:1;padding:13px;background:var(--pos-danger);border:none;border-radius:var(--pos-radius-sm);color:#fff;font-family:var(--pos-font);font-size:14px;font-weight:700;cursor:pointer;}
.sheet-btn-cancel{flex:1;padding:13px;background:#fff;border:1.5px solid var(--pos-g200);border-radius:var(--pos-radius-sm);color:var(--pos-g600);font-family:var(--pos-font);font-size:14px;font-weight:700;cursor:pointer;}

/* ============================ CONFIRM DIALOG ============================ */
.confirm-overlay{position:fixed;inset:0;background:rgba(15,23,42,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(15,23,42,.5);pointer-events:all;}
.confirm-box{background:#fff;border-radius:16px;padding:24px;width:100%;max-width:320px;transform:scale(.9);opacity:0;transition:all .2s cubic-bezier(.32,1,.32,1);text-align:center;box-shadow:var(--pos-shadow-lg);}
.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(--pos-g900);margin-bottom:6px;}
.confirm-msg{font-size:13px;color:var(--pos-g600);margin-bottom:18px;line-height:1.5;}
.confirm-actions{display:flex;gap:10px;}
.confirm-cancel{flex:1;padding:12px;border:1.5px solid var(--pos-g200);border-radius:9px;background:#fff;font-family:var(--pos-font);font-size:13px;font-weight:700;color:var(--pos-g600);cursor:pointer;}
.confirm-ok{flex:1;padding:12px;border:none;border-radius:9px;background:var(--pos-danger);font-family:var(--pos-font);font-size:13px;font-weight:700;color:#fff;cursor:pointer;}

/* ============================ TOAST ============================ */
.toast{position:fixed;bottom:15px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--pos-g900);color:#fff;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;box-shadow:var(--pos-shadow-lg);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ============================ BOTTOM NAV ============================ */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--pos-nav-h);background:#fff;border-top:1px solid var(--pos-g100);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:3px;cursor:pointer;transition:all .15s;}
.nav-icon{font-size:20px;}
.nav-label{font-size:10px;font-weight:700;color:var(--pos-g400);}
.nav-item.active .nav-label{color:var(--pos-accent);}
.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(--pos-danger);border-radius:999px;font-size:9px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;}

/* ============================ MANAGEMENT LIST ============================ */
.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(--pos-g500);}
.btn-add{padding:10px 18px;background:var(--pos-accent);border:none;border-radius:var(--pos-radius-sm);color:#fff;font-family:var(--pos-font);font-size:13px;font-weight:700;cursor:pointer;box-shadow:var(--pos-glow);transition:background .15s;}
.btn-add:hover{background:var(--pos-accent-dark);}
.mgmt-row{background:#fff;border-radius:12px;padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:12px;box-shadow:var(--pos-shadow);border:1px solid var(--pos-g100);transition:border-color .15s;}
.mgmt-row:hover{border-color:var(--pos-g200);}
.mgmt-row-icon{width:44px;height:44px;border-radius:10px;background:var(--pos-accent-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(--pos-g900);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mgmt-row-sub{font-size:11px;color:var(--pos-g500);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(--pos-font);font-size:12px;font-weight:700;cursor:pointer;background:var(--pos-accent-bg);color:var(--pos-accent-dark);border:1.5px solid var(--pos-accent-soft);white-space:nowrap;}
.mgmt-del-btn{padding:7px 14px;border-radius:8px;font-family:var(--pos-font);font-size:12px;font-weight:700;cursor:pointer;background:var(--pos-danger-bg);color:var(--pos-danger);border:1.5px solid var(--pos-danger-bd);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(--pos-danger-bg);border:none;border-radius:7px;color:var(--pos-danger);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(--pos-g50);border:1.5px dashed var(--pos-g300);border-radius:7px;font-family:var(--pos-font);font-size:12px;font-weight:700;color:var(--pos-g500);cursor:pointer;width:100%;margin-top:4px;transition:all .15s;}
.attr-add-btn:hover{border-color:var(--pos-accent);color:var(--pos-accent);}

/* ============================ HISTORY ============================ */
.filter-bar{display:flex;gap:8px;padding:12px 16px 10px;background:#fff;border-bottom:1px solid var(--pos-g100);overflow-x:auto;scrollbar-width:none;}
.filter-bar::-webkit-scrollbar{display:none;}
.filter-chip{flex:1;text-align:center;padding:8px 14px;border-radius:8px;border:1.5px solid var(--pos-g200);background:#fff;font-family:var(--pos-font);font-size:13px;font-weight:600;color:var(--pos-g500);cursor:pointer;white-space:nowrap;transition:all .15s;}
.filter-chip.active{background:var(--pos-accent);border-color:var(--pos-accent);color:#fff;}

.invoice-row{background:#fff;border-radius:var(--pos-radius-sm);padding:12px 14px;margin-bottom:8px;box-shadow:var(--pos-shadow);border:1px solid var(--pos-g100);cursor:pointer;transition:all .15s;}
.invoice-row:hover{border-color:var(--pos-g200);}
.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(--pos-g900);}
.inv-amt{font-size:14px;font-weight:900;color:var(--pos-accent);}
.inv-bot{display:flex;justify-content:space-between;margin-top:4px;}
.inv-table{font-size:12px;color:var(--pos-g600);font-weight:600;}
.inv-time{font-size:11px;color:var(--pos-g400);}
.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(--pos-ok-bg);color:var(--pos-ok);}
.inv-status.cancel{background:var(--pos-danger-bg);color:var(--pos-danger);}
.inv-detail-row{display:flex;justify-content:space-between;align-items:flex-start;font-size:12px;color:var(--pos-g700);padding:6px 0;border-bottom:1px solid var(--pos-g100);gap:8px;}
.inv-detail-row .left{flex:1;}
.inv-detail-row .name{font-weight:700;color:var(--pos-g900);}
.inv-detail-row .meta{font-size:10px;color:var(--pos-g400);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(--pos-g200);margin-top:6px;}
.inv-total-row .amt{color:var(--pos-accent);}
.inv-cancel-btn{width:100%;padding:12px;margin-top:12px;background:var(--pos-danger-bg);border:1.5px solid var(--pos-danger-bd);border-radius:var(--pos-radius-sm);color:var(--pos-danger);font-family:var(--pos-font);font-size:14px;font-weight:700;cursor:pointer;}
.inv-cancel-btn:disabled{opacity:.4;cursor:default;}

/* ============================ HOME / BANNER ============================ */
.banner{position:relative;overflow:hidden;background:var(--pos-accent);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,.22);border:2px solid rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff;flex-shrink:0;}
.user-name{font-size:14px;font-weight:800;color:#fff;line-height:1;}
.user-role{font-size:11px;color:rgba(255,255,255,.75);margin-top:2px;}
.banner-tagline,.banner-tag{font-size:12px;color:rgba(255,255,255,.9);font-weight:500;line-height:1.4;}
.banner-tagline strong,.banner-tag strong{font-weight:800;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(--pos-radius-sm);text-align:center;cursor:pointer;border:none;font-family:var(--pos-font);font-size:11px;font-weight:700;transition:all .15s;}
.bact.primary,.bact.p{background:#fff;color:var(--pos-accent-dark);box-shadow:0 2px 8px rgba(0,0,0,.12);}
.bact.secondary,.bact.s{background:rgba(255,255,255,.18);color:#fff;border:1.5px solid rgba(255,255,255,.32);}
.bact:active{transform:scale(.97);}

.quick-stats,.qs{display:flex;background:#fff;border-bottom:1px solid var(--pos-g100);flex-shrink:0;}
.qs-item,.qs-i{flex:1;padding:10px 8px;text-align:center;border-right:1px solid var(--pos-g100);}
.qs-item:last-child,.qs-i:last-child{border-right:none;}
.qs-val,.qs-v{font-size:17px;font-weight:900;color:var(--pos-g900);letter-spacing:-.5px;}
.qs-val.orange,.qs-v.o{color:var(--pos-accent);}
.qs-val.green,.qs-v.g{color:var(--pos-ok);}
.qs-lbl,.qs-l{font-size:9px;font-weight:700;color:var(--pos-g400);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}

.func-section,.func-sec{padding:14px 20px 8px;}
.func-title,.func-ttl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--pos-g400);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(--pos-g100);}
.func-icon,.fi{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;position:relative;}
/* nền icon: 1 tông xám đồng nhất cho gọn, không cầu vồng */
.fi-orange,.fi.or,.fi-blue,.fi.bl,.fi-green,.fi.gr,.fi-gray,.fi.gy,.fi.pu,.fi.ye,.fi.te{background:var(--pos-g100);}
.func-badge,.fi-badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;background:var(--pos-danger);border-radius:999px;font-size:10px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;}
.func-name,.fn{font-size:11px;font-weight:700;color:var(--pos-g700);text-align:center;line-height:1.3;}

.order-section{padding:4px 20px 80px;}
.order-row{background:#fff;border-radius:var(--pos-radius-sm);padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:12px;box-shadow:var(--pos-shadow);border:1px solid var(--pos-g100);cursor:pointer;transition:border-color .15s;}
.order-row:hover{border-color:var(--pos-g200);}
.or-table{font-size:13px;font-weight:800;color:var(--pos-g900);min-width:52px;}
.or-info{flex:1;}
.or-items{font-size:12px;color:var(--pos-g600);}
.or-time{font-size:11px;color:var(--pos-g400);margin-top:2px;}
.or-amt{font-size:13px;font-weight:800;color:var(--pos-accent);}
.or-status{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;}
.or-status.open{background:var(--pos-accent-bg);color:var(--pos-accent-dark);}
.or-status.paid{background:var(--pos-ok-bg);color:var(--pos-ok);}

/* ============================ REVENUE CARD ============================ */
.rev-card{margin:0 20px 16px;background:var(--pos-accent);border-radius:14px;padding:16px;color:#fff;box-shadow:var(--pos-shadow);}
.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;}

/* ============================ LOGIN ============================ */
.login-wrap{display:flex;flex-direction:column;align-items:center;padding:40px 24px 24px;flex:1;background:#fff;}
.login-logo{width:80px;height:80px;background:var(--pos-accent);border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:38px;margin-bottom:18px;box-shadow:var(--pos-glow);color:#fff;}
.login-title{font-size:24px;font-weight:900;color:var(--pos-g900);}
.login-sub{font-size:13px;color:var(--pos-g500);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(--pos-radius-sm);border:1.5px solid var(--pos-g200);background:#fff;font-family:var(--pos-font);font-size:13px;font-weight:700;color:var(--pos-g500);cursor:pointer;text-align:center;transition:all .15s;}
.role-btn.active{border-color:var(--pos-accent);background:var(--pos-accent-bg);color:var(--pos-accent-dark);}
.login-form{width:100%;max-width:400px;}

/* ============================ ORDER SCREEN ============================ */
.order-body{display:flex;flex-direction:column;height:calc(100dvh - var(--pos-top-h));overflow:hidden;}
.order-main{display:flex;flex:1;overflow:hidden;min-height:0;}
.cat-sidebar{width:72px;flex-shrink:0;background:#fff;border-right:1px solid var(--pos-g100);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(--pos-accent);background:var(--pos-accent-bg);}
.cat-icon{font-size:20px;}
.cat-name{font-size:9px;font-weight:700;color:var(--pos-g500);text-align:center;line-height:1.2;}
.cat-item.active .cat-name{color:var(--pos-accent-dark);}
.menu-panel{flex:1;overflow-y:auto;padding:10px;scrollbar-width:none;}
.menu-panel::-webkit-scrollbar{display:none;}

/* Search box */
.menu-search-wrap{padding:8px 10px 4px;position:sticky;top:0;background:#fff;z-index:10;}
.menu-search-input{width:100%;box-sizing:border-box;padding:8px 12px 8px 34px;border:1.5px solid var(--pos-g200);border-radius:10px;font-size:13px;outline:none;background:var(--pos-g50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239AA1AD' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center;transition:border-color .15s,box-shadow .15s;}
.menu-search-input:focus{border-color:var(--pos-accent);background-color:#fff;box-shadow:var(--pos-ring);}
.menu-search-empty{display:none;text-align:center;font-size:12px;color:var(--pos-g400);padding:16px 0 8px;}

.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.menu-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:var(--pos-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(--pos-accent);}
.menu-card-thumb{width:100%;aspect-ratio:1;background:var(--pos-g100);display:flex;align-items:center;justify-content:center;font-size:36px;position:relative;overflow:hidden;}
.menu-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.qty-badge{position:absolute;top:6px;right:6px;width:22px;height:22px;background:var(--pos-accent);border-radius:50%;color:#fff;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(--pos-g900);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(--pos-accent);}
.add-btn{width:24px;height:24px;background:var(--pos-accent);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:900;cursor:pointer;border:none;}

/* Cart */
.cart-panel{background:#fff;border-top:2px solid var(--pos-g100);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(--pos-g700);display:flex;align-items:center;gap:7px;}
.cart-count{background:var(--pos-accent);color:#fff;font-size:11px;font-weight:800;padding:1px 7px;border-radius:999px;}
.cart-chevron{font-size:11px;color:var(--pos-g400);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(--pos-danger);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;pointer-events:none;}
.cart-row{display:flex;align-items:center;gap:7px;padding:6px 2px;background:#fff;position:relative;transition:transform .25s ease;touch-action:pan-y;border-bottom:1px solid var(--pos-g50);}
.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(--pos-g900);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(--pos-g100);color:var(--pos-g600);padding:1px 6px;border-radius:3px;border:1px solid var(--pos-g200);}
.qty-controls{display:flex;align-items:center;gap:5px;flex-shrink:0;}
.qty-btn{width:22px;height:22px;background:var(--pos-g100);border-radius:5px;border:1px solid var(--pos-g200);font-family:var(--pos-font);font-size:13px;font-weight:800;color:var(--pos-g700);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.qty-num{font-size:12px;font-weight:800;color:var(--pos-g900);min-width:16px;text-align:center;}
.cart-subtotal{font-size:12px;font-weight:800;color:var(--pos-accent);min-width:58px;text-align:right;}
.cart-del-btn{width:22px;height:22px;background:var(--pos-danger-bg);border:none;border-radius:5px;color:var(--pos-danger);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(--pos-g400);text-transform:uppercase;letter-spacing:.06em;}
.cart-total-amt{font-size:18px;font-weight:900;color:var(--pos-accent);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 */
.item-modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,0);z-index:200;pointer-events:none;transition:background .25s;}
.item-modal-overlay.open{background:rgba(15,23,42,.42);pointer-events:all;}
.item-modal-sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:20px 20px 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;box-shadow:var(--pos-shadow-lg);}
.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(--pos-g200);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(--pos-g100);}
.modal-thumb{width:58px;height:58px;border-radius:12px;flex-shrink:0;background:var(--pos-g100);display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden;}
.modal-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.modal-item-name{font-size:16px;font-weight:800;color:var(--pos-g900);}
.modal-item-price{font-size:13px;color:var(--pos-accent);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(--pos-g400);margin-bottom:10px;}
.size-chips{display:flex;gap:8px;flex-wrap:wrap;}
.size-chip{flex:1;min-width:58px;border:1.5px solid var(--pos-g200);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(--pos-g700);}
.size-chip .sz-ext{font-size:10px;color:var(--pos-g400);margin-top:1px;}
.size-chip.active{border-color:var(--pos-accent);background:var(--pos-accent-bg);}
.size-chip.active .sz-lbl{color:var(--pos-accent-dark);}
.size-chip.active .sz-ext{color:var(--pos-accent);}
.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(--pos-g100);border-radius:9px;cursor:pointer;transition:all .15s;}
.topping-row.checked{border-color:var(--pos-accent);background:var(--pos-accent-bg);}
.topping-name{font-size:13px;font-weight:700;color:var(--pos-g800);}
.topping-row.checked .topping-name{color:var(--pos-accent-dark);}
.topping-right{display:flex;align-items:center;gap:10px;}
.topping-price{font-size:12px;font-weight:700;color:var(--pos-g400);}
.topping-row.checked .topping-price{color:var(--pos-accent);}
.topping-check{width:22px;height:22px;border:1.5px solid var(--pos-g300);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(--pos-accent);border-color:var(--pos-accent);color:#fff;}
.modal-note{width:100%;border:1.5px solid var(--pos-g200);border-radius:9px;padding:10px 12px;font-family:var(--pos-font);font-size:13px;color:var(--pos-g800);outline:none;resize:none;height:54px;transition:border-color .15s,box-shadow .15s;}
.modal-note:focus{border-color:var(--pos-accent);box-shadow:var(--pos-ring);}
.modal-footer{display:flex;align-items:center;gap:12px;padding:14px 20px 0;border-top:1px solid var(--pos-g100);margin-top:10px;}
.modal-qty-wrap{display:flex;align-items:center;gap:10px;background:var(--pos-g50);border-radius:10px;padding:8px 12px;}
.modal-qty-btn{width:28px;height:28px;background:#fff;border:1.5px solid var(--pos-g200);border-radius:8px;font-size:16px;font-weight:700;cursor:pointer;font-family:var(--pos-font);color:var(--pos-g700);display:flex;align-items:center;justify-content:center;}
.modal-qty-num{font-size:16px;font-weight:800;color:var(--pos-g900);min-width:20px;text-align:center;}
.modal-add-btn{flex:1;padding:13px;background:var(--pos-accent);border:none;border-radius:10px;color:#fff;font-family:var(--pos-font);font-size:14px;font-weight:800;cursor:pointer;box-shadow:var(--pos-glow);display:flex;align-items:center;justify-content:center;gap:6px;}
.modal-add-price{opacity:.85;font-size:12px;}

/* ============================ PAYMENT / RECEIPT ============================ */
.receipt{background:#fff;margin:12px 20px;border-radius:12px;padding:16px;box-shadow:var(--pos-shadow);border:1px solid var(--pos-g100);}
.receipt-header{text-align:center;padding-bottom:12px;border-bottom:2px dashed var(--pos-g200);margin-bottom:12px;}
.receipt-logo{font-size:28px;margin-bottom:4px;}
.receipt-shop{font-size:16px;font-weight:900;color:var(--pos-g900);}
.receipt-addr{font-size:11px;color:var(--pos-g400);margin-top:2px;}
.receipt-table-badge{display:inline-block;background:var(--pos-accent-bg);color:var(--pos-accent-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(--pos-g700);padding:6px 0;border-bottom:1px solid var(--pos-g100);gap:8px;}
.receipt-item-left{flex:1;min-width:0;}
.receipt-item-name{font-weight:700;color:var(--pos-g900);}
.receipt-item-meta{margin-top:2px;display:flex;flex-wrap:wrap;gap:3px;}
.receipt-meta-tag{font-size:10px;font-weight:700;background:var(--pos-g100);color:var(--pos-g600);padding:1px 6px;border-radius:3px;}
.receipt-item-price{font-weight:700;color:var(--pos-g900);white-space:nowrap;flex-shrink:0;}
hr.dashed{border:none;border-top:2px dashed var(--pos-g200);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(--pos-g200);}
.receipt-total-lbl{font-size:14px;font-weight:700;color:var(--pos-g800);}
.receipt-total-amt{font-size:22px;font-weight:900;color:var(--pos-accent);letter-spacing:-.5px;}
.qr-section{text-align:center;padding:12px 0 4px;border-top:2px dashed var(--pos-g200);margin-top:10px;}
.qr-box{width:72px;height:72px;margin:0 auto 6px;background:var(--pos-g900);border-radius:8px;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:5px;}
.qr-box span{background:#fff;border-radius:1px;}
.qr-box span.off{opacity:0;}
.qr-label{font-size:10px;color:var(--pos-g400);}
.pm-section{margin:0 20px 12px;}
.pm-title{font-size:11px;font-weight:700;color:var(--pos-g400);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;}
.pm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.pm-btn{background:#fff;border:1.5px solid var(--pos-g200);border-radius:10px;padding:12px 6px;text-align:center;cursor:pointer;transition:all .15s;font-family:var(--pos-font);font-size:12px;font-weight:700;color:var(--pos-g500);}
.pm-btn .pm-icon{font-size:22px;display:block;margin-bottom:4px;}
.pm-btn.active,.pm-btn:hover{border-color:var(--pos-accent);background:var(--pos-accent-bg);color:var(--pos-accent-dark);}
.pay-action{padding:0 20px 16px;}
.btn-pay{width:100%;padding:15px;background:var(--pos-accent);border:none;border-radius:var(--pos-radius-sm);color:#fff;font-family:var(--pos-font);font-size:15px;font-weight:800;cursor:pointer;box-shadow:var(--pos-glow);transition:background .15s;}
.btn-pay:hover{background:var(--pos-accent-dark);}

/* ============================ REPORT ============================ */
.date-chips{display:flex;gap:8px;padding:14px 0 6px;}
.date-chip{flex:1;padding:10px 4px;border-radius:8px;text-align:center;border:1.5px solid var(--pos-g200);background:#fff;font-family:var(--pos-font);font-size:13px;font-weight:600;color:var(--pos-g500);cursor:pointer;transition:all .15s;}
.date-chip.active{background:var(--pos-accent);border-color:var(--pos-accent);color:#fff;}
.hero-card{background:var(--pos-accent);border-radius:14px;padding:16px;color:#fff;margin:8px 0 14px;box-shadow:var(--pos-glow);}
.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:#fff;border-radius:var(--pos-radius-sm);padding:10px 12px;margin-bottom:7px;box-shadow:var(--pos-shadow);border:1px solid var(--pos-g100);}
.top-rank{font-size:14px;font-weight:900;color:var(--pos-accent);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(--pos-g900);}
.top-qty{font-size:11px;color:var(--pos-g500);margin-top:1px;}
.top-rev{font-size:13px;font-weight:800;color:var(--pos-accent);}

/* ============================ SHOP INFO ============================ */
.shop-preview{background:var(--pos-accent);padding:20px 16px 18px;text-align:center;color:#fff;}
.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:#fff;border-radius:var(--pos-radius-sm);padding:10px 8px;text-align:center;box-shadow:var(--pos-shadow);border:1px solid var(--pos-g100);}
.stat-num{font-size:18px;font-weight:900;color:var(--pos-g900);letter-spacing:-.5px;}
.stat-num.o{color:var(--pos-accent);}
.stat-num.g{color:var(--pos-ok);}
.stat-lbl{font-size:10px;color:var(--pos-g500);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(--pos-g500);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:10px;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:#fff;border-color:var(--pos-g200);color:var(--pos-g500);}
.tc.occupied{background:var(--pos-accent);color:#fff;}
.tc.waiting{background:var(--pos-warn);color:#fff;}
.tc.reserved{background:var(--pos-info);color:#fff;}

/* ============================ POPUP / SLIDE-IN PANELS ============================ */
.popup-order{position:absolute;inset:0;background:#fff;z-index:999;transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;box-shadow:-10px 0 30px rgba(17,24,39,.1);}
.popup-order.open{transform:translateX(0);}

#paymentPopup{z-index:1000;align-items:flex-end;padding:0;}
#paymentPopup>div{transform:translateY(100%);transition:transform .3s cubic-bezier(.32,1,.32,1);}
#paymentPopup.open>div{transform:translateY(0);}

#confirmOverlay{z-index:1000;}
.action-btn button{padding:3px 8px !important;}

/* ============================ DATE PICKER / CUSTOM RANGE ============================ */
input[type="date"]{
  -webkit-appearance:none;appearance:none;background-color:#fff;
  border:1.5px solid var(--pos-g200);border-radius:10px;padding:10px 12px;
  font-size:16px;height:40px;box-sizing:border-box;font-family:var(--pos-font);
}
input[type="date"]:focus{outline:none;border-color:var(--pos-accent);box-shadow:var(--pos-ring);}

.range{display:flex;align-items:center;gap:8px;}
.range input{flex:1;min-width:0;}

#customRange{display:flex;gap:12px;align-items:center;margin-top:8px;flex-wrap:wrap;}
#customRange>span{display:none;}
.arrow-sep{display:none;}
.custom-picker-row{display:flex;gap:12px;align-items:center;width:100%;margin-top:8px;}

.date-card{position:relative;background:#fff;border-radius:14px;padding:12px 48px 12px 16px;box-shadow:var(--pos-shadow);flex:1;cursor:pointer;min-width:130px;border:1px solid var(--pos-g100);}
.date-card .date-label{font-size:14px;color:var(--pos-g600);margin-bottom:4px;}
.date-card .date-value{font-size:20px;font-weight:600;color:var(--pos-g900);letter-spacing:.3px;min-height:24px;}
.date-card .calendar-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;color:var(--pos-accent);pointer-events:none;}
.date-card input[type="date"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:none;background:transparent;cursor:pointer;z-index:2;}
.date-card input[type="date"]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}

/* ============================ VOUCHER TYPE TOGGLE ============================ */
.voucher-type-toggle{display:flex;gap:8px;margin-bottom:16px;}
.voucher-type-btn{flex:1;padding:10px 0;border-radius:8px;border:2px solid var(--pos-g200);background:var(--pos-g50);font-size:15px;font-weight:600;cursor:pointer;transition:all .18s;font-family:var(--pos-font);color:var(--pos-g600);}
.voucher-type-btn.income.active{background:var(--pos-ok-bg);border-color:var(--pos-ok);color:var(--pos-ok);}
.voucher-type-btn.expense.active{background:var(--pos-danger-bg);border-color:var(--pos-danger);color:var(--pos-danger);}

/* ============================ EXPIRED STATE ============================ */
.expired-box{max-width:400px;margin:50px auto;padding:24px;border:1.5px solid var(--pos-danger-bd);border-radius:14px;background:var(--pos-danger-bg);color:var(--pos-danger);text-align:center;font-family:var(--pos-font);}
.expired-box h2{margin-bottom:10px;font-size:20px;font-weight:800;}
.expired-box p{font-size:16px;}
@media (max-width:480px){
  .expired-box{margin:30px 10px;padding:16px;}
  .expired-box h2{font-size:18px;}
  .expired-box p{font-size:14px;}
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:768px){
  .menu-card-name{font-size:11px;}
  .menu-card-price{font-size:11px;}
  .add-btn{font-size:13px;}
}
@media (min-width:768px){
  html,body{background:#EFF2F5;}
  .page{max-width:720px;margin:0 auto;box-shadow:0 0 60px rgba(17,24,39,.14);}
  .top-bar{position:sticky;top:0;width:100%;background:var(--pos-accent);}
  .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);}
}
@supports (-webkit-touch-callout:none){
  .bottom-nav{margin-bottom:-10px;}
}