/* Zuupx POS shared styles (POS + Admin) */
  
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;height:100%;background:var(--bg);font-family:var(--font);color:var(--text);overflow:hidden;}
  #root{height:100%;width:100%;position:relative;}
  button{font-family:inherit; cursor:pointer;}
  input,select,textarea{font-family:inherit;}
  ::-webkit-scrollbar{width:8px;height:8px;}
  ::-webkit-scrollbar-thumb{background:#DEDEDA;border-radius:8px;}
  ::-webkit-scrollbar-track{background:transparent;}
  img{-webkit-user-drag:none;user-select:none;}

  /* ---------- SPLASH ---------- */
  .splash{position:fixed;inset:0;background:linear-gradient(180deg,#FAFAF8 0%,#F0F6FF 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999;transition:opacity .5s ease, visibility .5s;}
  .splash.hide{opacity:0;visibility:hidden;pointer-events:none;}
  .splash-ring{width:150px;height:150px;border-radius:50%;background:var(--white);box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;overflow:hidden;opacity:0;transform:scale(0.85);animation:splashIn .8s cubic-bezier(.22,1,.36,1) forwards;}
  .splash-ring img{width:100%;height:100%;object-fit:cover;}
  @keyframes splashIn{to{opacity:1;transform:scale(1);}}
  .splash-word{margin-top:22px;font-weight:800;font-size:22px;letter-spacing:0.5px;opacity:0;animation:fadeUp .7s ease .3s forwards;}
  .splash-word b{color:var(--green);}
  .splash-tag{margin-top:4px;font-size:13px;color:var(--text2);opacity:0;animation:fadeUp .7s ease .45s forwards;}
  @keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
  .splash-dots{margin-top:28px;display:flex;gap:6px;opacity:0;animation:fadeUp .7s ease .6s forwards;}
  .splash-dots span{width:6px;height:6px;border-radius:50%;background:var(--green);animation:dotPulse 1.1s ease-in-out infinite;}
  .splash-dots span:nth-child(2){animation-delay:.15s;} .splash-dots span:nth-child(3){animation-delay:.3s;}
  @keyframes dotPulse{0%,80%,100%{opacity:.25;transform:scale(.8);}40%{opacity:1;transform:scale(1);}}

  /* ---------- LOGIN ---------- */
  .login-screen{position:fixed;inset:0;background:var(--white);display:flex;align-items:center;justify-content:center;z-index:900;padding:24px;}
  .login-card{width:100%;max-width:380px;}
  .login-logo{width:76px;height:76px;border-radius:50%;overflow:hidden;box-shadow:var(--shadow);margin:0 auto 18px;}
  .login-logo img{width:100%;height:100%;object-fit:cover;}
  .login-title{text-align:center;font-size:24px;font-weight:800;margin:0 0 2px;}
  .login-sub{text-align:center;color:var(--text2);font-size:13.5px;margin:0 0 28px;}
  .field{margin-bottom:14px;}
  .field label{display:block;font-size:12.5px;font-weight:600;color:var(--text2);margin-bottom:6px;}
  .field-input{position:relative;}
  .field input{width:100%;padding:13px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:15px;background:var(--bg);outline:none;transition:.15s;}
  .field input:focus{border-color:var(--green);background:var(--white);box-shadow:0 0 0 3px var(--green-light);}
  .pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text2);font-size:12.5px;font-weight:600;padding:4px;}
  .row-between{display:flex;align-items:center;justify-content:space-between;margin:2px 0 22px;}
  .remember{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--text2);}
  .remember input{width:16px;height:16px;accent-color:var(--green);}
  .btn-primary{width:100%;background:var(--green);color:#fff;border:none;padding:14px;border-radius:var(--radius-sm);font-size:15.5px;font-weight:700;box-shadow:0 8px 20px -8px rgba(201,162,75,.55);transition:.15s;}
  .btn-primary:active{transform:scale(.98);}
  .btn-primary:disabled{opacity:.6;}
  .login-note{text-align:center;font-size:11.5px;color:#B0B0AA;margin-top:16px;}
  .field-error{color:var(--err);font-size:12px;margin-top:5px;}

  /* ---------- APP LAYOUT ---------- */
  .app{position:fixed;inset:0;display:flex;background:var(--bg);z-index:10;opacity:0;visibility:hidden;transition:opacity .35s;}
  .app.show{opacity:1;visibility:visible;}
  .sidebar{width:230px;flex-shrink:0;background:var(--white);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:18px 14px;}
  .side-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 20px;}
  .side-brand img{width:38px;height:38px;border-radius:50%;}
  .side-brand-text b{display:block;font-size:15px;font-weight:800;}
  .side-brand-text span{font-size:10.5px;color:var(--text2);}
  .nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;font-size:13.8px;font-weight:600;color:var(--text2);cursor:pointer;margin-bottom:2px;transition:.15s;border:none;background:none;width:100%;text-align:left;}
  .nav-item:hover{background:var(--bg);color:var(--text);}
  .nav-item.active{background:var(--green-light);color:var(--green-dark);}
  .nav-item .ic{width:19px;text-align:center;font-size:15px;}
  .nav-sep{height:1px;background:var(--border);margin:10px 4px;}
  .side-foot{margin-top:auto;padding:10px 8px;font-size:11px;color:#BDBDB7;}

  .main-col{flex:1;min-width:0;display:flex;flex-direction:column;}
  .topbar{height:60px;flex-shrink:0;background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 22px;}
  .topbar h1{font-size:17px;font-weight:800;margin:0;}
  .top-right{display:flex;align-items:center;gap:14px;}
  .status-pill{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:20px;background:var(--green-light);color:var(--green-dark);}
  .status-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--green);}
  .status-pill.off{background:#FEF2F2;color:#B91C1C;}
  .status-pill.off .dot{background:var(--err);}
  .status-pill.warn{background:#FFFBEB;color:#B45309;}
  .status-pill.warn .dot{background:#F59E0B;}
  @media(max-width:640px){ .sync-pill{font-size:0;padding:7px;gap:0;} }
  .avatar{width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}

  .view-wrap{flex:1;overflow-y:auto;padding:20px;}
  @media(max-width:880px){ .view-wrap{padding:14px 14px 90px;} }

  /* bottom nav (mobile) */
  .bottom-nav{display:none;}
  /* More sheet: fixed overlay, hidden by default at ALL widths — only opened explicitly on mobile.
     (Previously this rule lived only inside the mobile media query, so on desktop the div rendered
     in normal flex flow next to the sidebar/main content and squeezed the whole layout.) */
  .more-sheet{position:fixed;inset:0;background:rgba(20,20,20,.4);z-index:60;display:none;align-items:flex-end;justify-content:center;}
  .more-sheet.open{display:flex;}
  .more-panel{background:#fff;width:100%;max-width:480px;border-radius:20px 20px 0 0;padding:18px;max-height:70vh;overflow-y:auto;}
  .more-panel h3{margin:2px 4px 14px;font-size:15px;}
  .more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
  .more-cell{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:14px;background:var(--bg);font-size:11px;font-weight:600;color:var(--text);border:none;}
  .more-cell .ic{font-size:20px;}
  @media(max-width:880px){
    .sidebar{display:none;}
    .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;height:64px;background:var(--white);border-top:1px solid var(--border);z-index:50;padding:4px 2px;justify-content:space-around;align-items:center;}
    .bn-item{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;color:var(--text2);font-size:9.5px;font-weight:600;flex:1;padding:6px 2px;}
    .bn-item .ic{font-size:19px;}
    .bn-item.active{color:var(--green);}
  }

  /* ---------- CARDS / GENERIC ---------- */
  .card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);}
  .pad{padding:18px;}
  .section-title{font-size:15px;font-weight:800;margin:0 0 4px;}
  .section-sub{font-size:12.5px;color:var(--text2);margin:0 0 14px;}
  .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  @media(max-width:880px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} .grid-2{grid-template-columns:1fr;} }
  .stat-card{padding:16px 18px;}
  .stat-label{font-size:11.5px;color:var(--text2);font-weight:600;margin-bottom:6px;}
  .stat-value{font-size:22px;font-weight:800;}
  .stat-sub{font-size:11px;color:var(--green-dark);margin-top:4px;font-weight:600;}
  .pill-btn{border:1.5px solid var(--border);background:var(--white);padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--text2);}
  .pill-btn.active{background:var(--text);color:#fff;border-color:var(--text);}
  .btn-sm{border:1.5px solid var(--border);background:var(--white);padding:7px 12px;border-radius:9px;font-size:12.5px;font-weight:700;color:var(--text);}
  .btn-sm.green{background:var(--green);border-color:var(--green);color:#fff;}
  .btn-sm.danger{color:var(--err);border-color:#FBD5D5;}
  .empty-state{text-align:center;padding:60px 20px;color:var(--text2);}
  .empty-state .ic{font-size:38px;margin-bottom:10px;}
  .empty-state h4{color:var(--text);margin:0 0 4px;font-size:15px;}

  /* ---------- BILLING SCREEN ---------- */
  .pos-layout{display:flex;gap:16px;height:100%;}
  .pos-center{flex:1;min-width:0;display:flex;flex-direction:column;}
  .pos-cart{width:360px;flex-shrink:0;display:flex;flex-direction:column;}
  @media(max-width:1000px){ .pos-cart{display:none;} }
  .search-row{position:relative;margin-bottom:12px;}
  .search-row input{width:100%;padding:12px 14px 12px 40px;border:1.5px solid var(--border);border-radius:14px;font-size:14px;background:var(--white);outline:none;}
  .search-row input:focus{border-color:var(--green);}
  .search-row .sic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text2);}
  .cat-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;margin-bottom:6px;}
  .cat-chip{flex-shrink:0;padding:8px 16px;border-radius:999px;border:1.5px solid var(--border);background:var(--white);font-size:13px;font-weight:600;color:var(--text2);white-space:nowrap;}
  .cat-chip.active{background:var(--green);border-color:var(--green);color:#fff;}
  .prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;overflow-y:auto;flex:1;padding-bottom:12px;}
  .prod-card{background:var(--white);border:1px solid var(--border);border-radius:16px;overflow:hidden;cursor:pointer;transition:.15s;position:relative;box-shadow:var(--shadow);display:flex;flex-direction:column;}
  .prod-card:active{transform:scale(.97);}
  .prod-img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--green-light);flex-shrink:0;}
  .prod-img-ph{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:var(--green-light);color:var(--green);font-size:26px;font-weight:800;flex-shrink:0;}
  .prod-info{padding:9px 10px 11px;min-height:44px;background:var(--white);}
  .prod-name{font-size:12.8px;font-weight:700;margin:0 0 3px;line-height:1.25;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .prod-price{font-size:13.5px;font-weight:800;color:var(--green-dark);}
  .prod-unavail{position:absolute;inset:0;background:rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--err);}
  .prod-qty-badge{position:absolute;top:7px;right:7px;background:var(--green);color:#fff;font-size:11px;font-weight:800;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

  .cart-head{padding:16px 16px 10px;display:flex;align-items:center;justify-content:space-between;}
  .cart-head h3{margin:0;font-size:15px;font-weight:800;}
  .cart-items{flex:1;overflow-y:auto;padding:0 12px;}
  .cart-empty{text-align:center;padding:60px 16px;color:var(--text2);font-size:13px;}
  .cart-line{display:flex;align-items:center;gap:10px;padding:10px 6px;border-bottom:1px solid var(--border);}
  .cart-line img,.cart-line .ph{width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0;}
  .cart-line .ph{background:var(--green-light);color:var(--green);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;}
  .cart-line-info{flex:1;min-width:0;}
  .cart-line-name{font-size:12.8px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .cart-line-price{font-size:11.5px;color:var(--text2);}
  .qty-ctrl{display:flex;align-items:center;gap:8px;}
  .qty-btn{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--border);background:var(--white);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;color:var(--text);}
  .qty-num{font-size:13px;font-weight:700;min-width:14px;text-align:center;}
  .cart-line-total{font-size:13px;font-weight:800;width:52px;text-align:right;}
  .cart-foot{padding:14px 16px 18px;border-top:1px solid var(--border);}
  .sum-row{display:flex;justify-content:space-between;font-size:13px;color:var(--text2);margin-bottom:7px;}
  .sum-row b{color:var(--text);font-weight:700;}
  .sum-row.total{font-size:16px;font-weight:800;color:var(--text);margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);}
  .disc-row{display:flex;gap:8px;margin-bottom:10px;}
  .disc-row select{border:1.5px solid var(--border);border-radius:8px;padding:6px;font-size:12px;background:var(--white);}
  .disc-row input{flex:1;border:1.5px solid var(--border);border-radius:8px;padding:6px 8px;font-size:12.5px;width:0;}
  .pay-methods{display:flex;gap:8px;margin:10px 0 12px;}
  .pay-btn{flex:1;padding:9px 4px;border-radius:11px;border:1.5px solid var(--border);background:var(--white);font-size:12px;font-weight:700;color:var(--text2);text-align:center;}
  .pay-btn.active{background:var(--green-light);border-color:var(--green);color:var(--green-dark);}
  .generate-btn{width:100%;background:var(--green);color:#fff;border:none;padding:15px;border-radius:14px;font-size:15px;font-weight:800;box-shadow:0 10px 24px -10px rgba(201,162,75,.6);display:flex;align-items:center;justify-content:center;gap:8px;}
  .generate-btn:disabled{opacity:.65;}
  .clear-cart-btn{background:none;border:none;color:var(--text2);font-size:12px;font-weight:600;}

  /* mobile bottom cart bar */
  .mobile-cart-bar{display:none;}
  @media(max-width:1000px){
    .mobile-cart-bar{display:flex;position:fixed;left:12px;right:12px;bottom:76px;background:var(--text);color:#fff;border-radius:16px;padding:12px 16px;align-items:center;justify-content:space-between;z-index:40;box-shadow:0 12px 30px -10px rgba(0,0,0,.4);}
    .mobile-cart-bar b{font-size:14px;}
    .mobile-cart-bar span{font-size:11.5px;opacity:.8;}
    .mobile-cart-bar .mc-btn{background:var(--green);color:#fff;border:none;padding:9px 16px;border-radius:10px;font-size:13px;font-weight:700;}
  }
  .sheet-overlay{position:fixed;inset:0;background:rgba(20,20,20,.45);z-index:200;display:none;align-items:flex-end;justify-content:center;}
  .sheet-overlay.open{display:flex;}
  .sheet{background:#fff;width:100%;max-width:480px;border-radius:20px 20px 0 0;max-height:88vh;display:flex;flex-direction:column;}

  /* ---------- MODAL ---------- */
  .modal-overlay{position:fixed;inset:0;background:rgba(20,20,20,.45);z-index:300;display:none;align-items:center;justify-content:center;padding:16px;}
  .modal-overlay.open{display:flex;}
  .modal{background:#fff;border-radius:20px;width:100%;max-width:460px;max-height:88vh;overflow-y:auto;padding:22px;}
  .modal h3{margin:0 0 16px;font-size:16.5px;font-weight:800;}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .form-field{margin-bottom:12px;}
  .form-field label{display:block;font-size:12px;font-weight:700;color:var(--text2);margin-bottom:5px;}
  .form-field input,.form-field select,.form-field textarea{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;font-size:13.5px;outline:none;background:var(--bg);}
  .form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--green);background:#fff;}
  .modal-actions{display:flex;gap:10px;margin-top:16px;}
  .modal-actions button{flex:1;padding:11px;border-radius:11px;font-weight:700;font-size:13.5px;border:1.5px solid var(--border);background:#fff;}
  .modal-actions .primary{background:var(--green);color:#fff;border-color:var(--green);}
  .img-upload-box{width:100%;height:120px;border:1.6px dashed var(--border);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text2);font-size:12px;font-weight:600;gap:6px;overflow:hidden;position:relative;cursor:pointer;background:var(--bg);}
  .img-upload-box img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}

  /* toast */
  #toast-wrap{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center;}
  .toast{background:#171717;color:#fff;padding:11px 18px;border-radius:12px;font-size:13px;font-weight:600;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(-10px);animation:toastIn .25s forwards;}
  .toast.err{background:#B91C1C;}
  .toast.warn{background:#B45309;}
  @keyframes toastIn{to{opacity:1;transform:translateY(0);}}

  /* table */
  table{width:100%;border-collapse:collapse;}
  th{text-align:left;font-size:11px;color:var(--text2);font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:10px 12px;border-bottom:1.5px solid var(--border);}
  td{padding:12px;font-size:13px;border-bottom:1px solid var(--border);}
  tr:last-child td{border-bottom:none;}
  .badge{padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;display:inline-block;}
  .badge.green{background:var(--green-light);color:var(--green-dark);}
  .badge.warn{background:#FEF3E0;color:#92400E;}
  .badge.err{background:#FEF2F2;color:#B91C1C;}
  .badge.gray{background:#F1F1EE;color:var(--text2);}

  .toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
  .toolbar-left{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

  #print-receipt{display:none;}
  @media print{
    body *{visibility:hidden;}
    #print-receipt, #print-receipt *{visibility:visible;}
    #print-receipt{display:block !important;position:absolute;left:0;top:0;width:100%;}
  }
  .receipt{width:280px;font-family:'Courier New',monospace;font-size:12px;color:#000;padding:8px;}
  .receipt .r-logo{width:46px;height:46px;border-radius:50%;display:block;margin:0 auto 6px;}
  .receipt center{text-align:center;}
  .receipt hr{border:none;border-top:1px dashed #000;margin:6px 0;}
  .receipt .r-row{display:flex;justify-content:space-between;}
  .receipt .r-item{margin-bottom:2px;}

  .toggle{position:relative;width:42px;height:24px;border-radius:20px;background:#DDD;border:none;flex-shrink:0;}
  .toggle.on{background:var(--green);}
  .toggle .knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.3);}
  .toggle.on .knob{left:20px;}
  .settings-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border);}
  .settings-row:last-child{border-bottom:none;}
  .settings-row .srt{font-size:13.5px;font-weight:700;}
  .settings-row .srs{font-size:11.5px;color:var(--text2);margin-top:2px;}

/* ---------- ADDITIONS (multi-cafe + admin) ---------- */
.banner{position:fixed;top:0;left:0;right:0;z-index:700;background:#171717;color:#fff;font-size:12.5px;font-weight:600;padding:8px 14px;display:flex;align-items:center;justify-content:center;gap:12px;}
.banner button{background:var(--green);color:#fff;border:none;border-radius:8px;padding:5px 12px;font-weight:700;font-size:12px;}
body.has-banner .app{top:36px;}
body.has-banner .login-screen{top:36px;}
.btn-sm.dark{background:var(--text);border-color:var(--text);color:#fff;}
.btn-sm:disabled{opacity:.5;}
.badge.blue{background:#F6EFD9;color:#7A5C14;}
.login-err-box{background:#FEF2F2;color:#B91C1C;border-radius:10px;padding:10px 12px;font-size:12.5px;font-weight:600;margin-bottom:12px;}
.inline-note{font-size:11.5px;color:var(--text2);margin-top:4px;}
.kv{display:grid;grid-template-columns:130px 1fr;gap:8px 12px;font-size:13px;}
.kv dt{color:var(--text2);font-weight:600;margin:0;} .kv dd{margin:0;font-weight:600;word-break:break-word;}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;}
.table-wrap{overflow-x:auto;}
.admin .sidebar{background:#111;border-right-color:#111;}
.admin .nav-item{color:#A3A3A3;} .admin .nav-item:hover{background:#1c1c1c;color:#fff;}

.admin .side-brand-text b{color:#fff;} .admin .nav-sep{background:#262626;} .admin .side-foot{color:#525252;}
.admin-tag{font-size:9.5px;font-weight:800;letter-spacing:.08em;background:#C9A24B;color:#1A1405;padding:2px 6px;border-radius:5px;margin-left:6px;vertical-align:middle;}
.modal.wide{max-width:640px;}
.bar-chart{display:flex;align-items:flex-end;gap:10px;height:150px;}
.bar-chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;}
.bar-chart .bar{width:100%;background:var(--green);border-radius:8px 8px 0 0;opacity:.88;}
.bar-chart span{font-size:10.5px;color:var(--text2);font-weight:600;}
.rank-row{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;margin-bottom:5px;}
.rank-bar{height:7px;background:var(--bg);border-radius:6px;margin-bottom:12px;overflow:hidden;} .rank-bar i{display:block;height:100%;background:var(--green);}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.search-inline{padding:8px 12px;border:1.5px solid var(--border);border-radius:10px;font-size:13px;background:var(--white);outline:none;min-width:200px;}
.search-inline:focus{border-color:var(--green);}
.select-inline{padding:8px 10px;border:1.5px solid var(--border);border-radius:10px;font-size:13px;background:var(--white);}
.order-type{display:flex;gap:8px;margin:0 0 10px;}
.order-type select{flex:1;border:1.5px solid var(--border);border-radius:8px;padding:6px;font-size:12px;background:var(--white);}
.suspended-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:950;padding:24px;text-align:center;}

/* ---------- FIXES ---------- */
/* product cards were being squashed on small screens (names/prices clipped) */
.prod-grid{align-content:start;grid-auto-rows:max-content;}
.prod-card{min-height:0;}


/* ======================= THEME v5 — Soft Glass (pastel, frosted, rounded) ======================= */
:root{--bg:#EEF3FB;--white:#FFFFFF;--green:#16A34A;--green-dark:#15803D;--green-light:#DCFCE7;--text:#0F172A;--text2:#64748B;--border:rgba(148,163,184,.28);
  --radius:20px;--radius-sm:14px;--glass:rgba(255,255,255,.66);--glass-b:rgba(255,255,255,.92);--accent:#16A34A;--accent2:#22C55E;--sky:#2563EB;--lav:#C4B5FD;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--warn:#F59E0B;--err:#EF4444;--shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -12px rgba(71,85,105,.25);--shadow-lg:0 20px 60px -20px rgba(15,23,42,.3);--gshadow:0 12px 34px -16px rgba(71,85,105,.38);--blur:blur(16px) saturate(1.3);}
body{background:linear-gradient(135deg,#E6F6EC 0%,#EAF1FF 55%,#E9F8F1 100%) fixed;color:var(--text);}
.svg-ic{flex-shrink:0;display:block;}
.zmark{display:block;flex-shrink:0;--mk-top:#0F172A;}
.wm i,.splash-word i,.side-brand-text b i,.lg-logo b i,.login-title i,.wl-brand b i{font-style:normal;color:var(--accent);}
.app{background:transparent;}
/* glass surfaces */
.card,.modal,.prod-card,.stat-card,.login-card,.more-panel,.cart-foot,.pos-cart{background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow);}
.card{border-radius:var(--radius);}
.modal{border-radius:26px;background:rgba(255,255,255,.88);}
.modal-overlay{background:rgba(15,23,42,.28);backdrop-filter:blur(6px);}
/* sidebar: floating glass */
.sidebar{width:236px;margin:12px 0 12px 12px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:var(--blur);box-shadow:var(--gshadow);padding:18px 12px;}
.side-brand{gap:11px;padding:2px 8px 18px;border-bottom:1px solid var(--border);margin-bottom:12px;}
.side-brand-text b{color:var(--text);font-size:15px;letter-spacing:.1em;} .side-brand-text span{color:var(--text2);font-size:11px;}
.nav-item{color:#475569;padding:10px 12px;border-radius:14px;font-size:13.6px;margin-bottom:3px;transition:.18s;}
.nav-item .ic{width:20px;display:flex;justify-content:center;}
.nav-item:hover{background:rgba(255,255,255,.7);color:var(--text);}
.nav-item.active{background:#fff;color:var(--accent);box-shadow:0 6px 16px -8px rgba(22,163,74,.45);font-weight:700;}
.nav-sep{background:var(--border);margin:10px 4px;}
.side-foot{color:var(--text2);background:rgba(255,255,255,.55);border-radius:14px;padding:12px;font-size:11.5px;}
.topbar{background:transparent;border-bottom:none;height:64px;padding:0 24px;}
.topbar h1{font-size:19px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;}
.top-mark{display:none;}
.view-wrap{padding:6px 24px 24px;}
.avatar{background:linear-gradient(135deg,#22C55E,#2563EB);color:#fff;}
.status-pill{background:rgba(255,255,255,.75);border:1px solid var(--glass-b);color:#15803D;border-radius:999px;}
.status-pill .dot{background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.2);}
.status-pill.off{color:#B91C1C;} .status-pill.off .dot{background:var(--err);box-shadow:none;}
/* dashboard */
.dash-hero{background:linear-gradient(120deg,#16A34A 0%,#22C55E 55%,#2563EB 100%);color:#fff;border-radius:24px;padding:22px 24px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;box-shadow:0 18px 40px -20px rgba(22,163,74,.7);}
.dash-hero h2{margin:0 0 4px;font-size:21px;letter-spacing:-.01em;} .dash-hero p{margin:0;opacity:.85;font-size:13px;} .dash-hero b{font-size:24px;white-space:nowrap;}
.stat-card{padding:18px 20px;border-radius:22px;position:relative;overflow:hidden;}
.stat-card::before{content:"";position:absolute;right:-18px;top:-18px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.28),transparent 70%);}
.stat-label{letter-spacing:.06em;font-size:11px;color:var(--text2);} .stat-value{font-size:26px;letter-spacing:-.02em;} .stat-sub{color:#15803D;}
.bar-chart .bar{background:linear-gradient(180deg,#86EFAC,#22C55E);border-radius:8px 8px 3px 3px;opacity:1;}
.rank-bar i{background:linear-gradient(90deg,#22C55E,#2563EB);}
/* products / controls */
.prod-card{border-radius:20px;overflow:hidden;transition:.2s;}
.prod-card:hover{transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(22,163,74,.45);border-color:#fff;}
.prod-price{color:var(--accent);} .prod-qty-badge{background:var(--accent);color:#fff;}
.cat-chip{background:rgba(255,255,255,.7);border:1px solid var(--glass-b);border-radius:999px;color:#475569;}
.cat-chip.active,.pill-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.pay-btn{border-radius:12px;background:rgba(255,255,255,.7);} .pay-btn.active{border-color:var(--accent);color:var(--accent);background:#fff;}
.btn-primary,.generate-btn,.modal-actions .primary,.btn-sm.green,.mobile-cart-bar .mc-btn,.banner button,.admin-tag{background:linear-gradient(135deg,#16A34A,#22C55E);color:#fff;border-color:transparent;}
.btn-primary,.generate-btn{padding:14px;border-radius:16px;font-weight:700;box-shadow:0 14px 26px -14px rgba(22,163,74,.8);transition:.18s;} .btn-primary:hover,.generate-btn:hover{transform:translateY(-1px);filter:brightness(1.05);}
.modal-actions button{border-radius:14px;background:rgba(255,255,255,.8);}
.badge.green{background:#DCFCE7;color:#15803D;} .badge.blue{background:#E6F6EC;color:#0369A1;}
.search-row input,.field input,select,textarea,.form-field input,.form-field select,.form-field textarea{border-radius:14px;border:1px solid var(--glass-b);background:rgba(255,255,255,.8);}
.field input:focus,.form-field input:focus,.search-row input:focus{border-color:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.16);outline:none;}
.toggle.on{background:#22C55E;} .toast{background:#0F172A;border-radius:16px;}
.mobile-cart-bar{background:#0F172A;} .more-cell .ic,.search-row .sic{display:flex;color:var(--accent);}
.admin .sidebar{background:var(--glass);border-right:1px solid var(--glass-b);} .admin .nav-item{color:#475569;} .admin .nav-item:hover{background:rgba(255,255,255,.7);color:var(--text);}
.admin .nav-item.active{background:#fff;color:var(--accent);} .admin .side-brand-text b{color:var(--text);} .admin .nav-sep{background:var(--border);} .admin .side-foot{color:var(--text2);}
.admin-tag{font-size:9px;border-radius:6px;padding:2px 6px;margin-left:6px;vertical-align:middle;}

/* splash */
.splash{background:linear-gradient(135deg,#E6F6EC,#EAF1FF 55%,#E9F8F1);}
.splash-ring{width:104px;height:104px;border-radius:30px;background:var(--glass);border:1px solid #fff;box-shadow:0 24px 60px -20px rgba(22,163,74,.5);animation:splashIn .8s cubic-bezier(.22,1,.36,1) forwards,ringPulse 1.8s ease-out .8s infinite;}
@keyframes ringPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.35),0 24px 60px -20px rgba(22,163,74,.5);}100%{box-shadow:0 0 0 26px rgba(34,197,94,0),0 24px 60px -20px rgba(22,163,74,.5);}}
.splash-word{color:var(--text);font-size:28px;font-weight:800;letter-spacing:.14em;} .splash-tag{color:var(--text2);font-size:13px;letter-spacing:.12em;} .splash-dots span{background:#22C55E;}

/* login */
.login-screen{background:radial-gradient(700px 480px at 8% 5%,#BFDBFE 0%,transparent 60%),radial-gradient(700px 500px at 95% 95%,#BBF7D0 0%,transparent 60%),linear-gradient(135deg,#E6F6EC,#EAF1FF 55%,#E9F8F1);overflow-y:auto;gap:64px;padding:32px 40px;}
.lg-brand{flex:1 1 560px;max-width:640px;color:var(--text);}
.lg-logo{display:flex;align-items:center;gap:14px;margin-bottom:32px;} .lg-logo b{display:block;font-size:24px;font-weight:800;letter-spacing:.12em;} .lg-logo span{font-size:12.5px;color:var(--text2);letter-spacing:.14em;}
.lg-chip{display:inline-block;padding:7px 14px;border:1px solid var(--glass-b);border-radius:999px;background:var(--glass);color:#334155;font-size:13px;font-weight:600;backdrop-filter:var(--blur);}
.lg-chip em{font-style:normal;color:var(--accent);margin:0 4px;}
.lg-brand h2{font-size:clamp(30px,3.6vw,48px);line-height:1.08;margin:18px 0 12px;font-weight:800;letter-spacing:-.02em;} .lg-brand h2 span{color:var(--accent);}
.lg-lead{font-size:16px;color:#475569;margin:0 0 26px;max-width:480px;}
.lg-mods{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px;}
.lg-mod{display:flex;flex-direction:column;gap:10px;padding:14px 12px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:var(--blur);font-size:13px;font-weight:600;color:#1E293B;line-height:1.25;box-shadow:var(--gshadow);transition:.2s;}
.lg-mod span{width:40px;height:40px;border-radius:14px;background:#fff;color:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -8px rgba(22,163,74,.5);}
.lg-mod.on{background:linear-gradient(135deg,#16A34A,#2563EB);color:#fff;border-color:transparent;} .lg-mod.on span{background:rgba(255,255,255,.25);color:#fff;box-shadow:none;}
.lg-mod:hover{transform:translateY(-3px);}
.lg-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:16px 18px;border-radius:22px;background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:var(--blur);}
.lg-feats div{display:flex;flex-direction:column;gap:3px;} .lg-feats span{color:var(--accent);margin-bottom:4px;} .lg-feats b{font-size:13px;} .lg-feats small{font-size:11.5px;color:var(--text2);}
.login-card{flex:0 0 400px;max-width:420px;border-radius:30px;padding:34px 30px 26px;background:rgba(255,255,255,.78);position:relative;}
.login-logo{width:auto;height:auto;border-radius:0;box-shadow:none;margin:0 auto 10px;display:flex;justify-content:center;overflow:visible;background:none;}
.login-hi{text-align:center;margin:0;color:var(--text2);font-size:14px;font-weight:600;}
.login-title{font-size:30px;font-weight:800;letter-spacing:.1em;margin:2px 0 4px;color:var(--text);} .login-sub{margin-bottom:22px;}
.field-input{display:flex;align-items:center;position:relative;} .field-input .fi{position:absolute;left:14px;color:#94A3B8;display:flex;pointer-events:none;}
.field-input .pre{position:absolute;left:44px;font-size:14.5px;font-weight:700;pointer-events:none;}
.field input{padding:14px 14px 14px 44px;} .field input.has-pre{padding-left:82px;}
.pw-toggle{display:flex;color:#94A3B8;padding:6px;} .pw-toggle:hover{color:var(--text);}
.remember input{accent-color:#16A34A;}
.field-error{display:none;align-items:center;gap:8px;background:#FFF1F2;color:#BE123C;border:1px solid #FECDD3;border-radius:12px;padding:10px 12px;font-size:12.5px;font-weight:600;margin:4px 0 12px;}
.err-in{animation:errIn .35s ease;} @keyframes errIn{from{opacity:0;transform:translateY(-6px) scale(.97);}to{opacity:1;transform:none;}}
.login-card.shake{animation:shake .55s cubic-bezier(.36,.07,.19,.97),redFlash .9s ease;}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(5px)}30%,50%,70%{transform:translateX(-10px)}40%,60%{transform:translateX(10px)}}
@keyframes redFlash{0%,100%{box-shadow:var(--gshadow);}25%{box-shadow:0 0 0 4px rgba(244,63,94,.55),0 24px 60px -20px rgba(244,63,94,.6);}}
.login-card.shake .field input{border-color:#FDA4AF;background:#FFF5F6;}
/* welcome */
.wl{position:fixed;inset:0;z-index:5000;background:linear-gradient(135deg,#E6F6EC,#EAF1FF 55%,#E9F8F1);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text);animation:wlIn .35s ease;overflow:hidden;} .wl.out{opacity:0;transition:opacity .5s;}
.wl-burst{position:absolute;width:140vmax;height:140vmax;background:radial-gradient(circle,rgba(34,197,94,.32) 0%,rgba(56,189,248,.1) 24%,transparent 46%);animation:burst 1.2s cubic-bezier(.16,1,.3,1) both;}
.wl-in{position:relative;padding:24px;}
.wl-ring{width:104px;height:104px;border-radius:50%;margin:0 auto 22px;background:linear-gradient(135deg,#16A34A,#2563EB);color:#fff;display:flex;align-items:center;justify-content:center;animation:pop .6s cubic-bezier(.34,1.56,.64,1) .1s both,wlPulse 1.4s ease-out .5s 2;box-shadow:0 0 0 0 rgba(34,197,94,.5);}
.wl-ring .svg-ic{stroke-width:2.6;stroke-dasharray:30;stroke-dashoffset:30;animation:draw .5s ease .45s forwards;}
.wl-hi{margin:0;font-size:15px;letter-spacing:.3em;color:var(--accent);font-weight:700;text-transform:uppercase;animation:rise .6s ease .35s both;}
.wl-name{margin:6px 0 8px;font-size:clamp(34px,8vw,64px);font-weight:800;letter-spacing:-.02em;animation:rise .6s ease .5s both;}
.wl-sub{margin:0 0 30px;font-size:16px;color:var(--text2);animation:rise .6s ease .65s both;} .wl-brand{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.2em;animation:rise .6s ease .8s both;}
@keyframes wlIn{from{opacity:0}} @keyframes burst{from{transform:scale(.2);opacity:0}} @keyframes pop{from{transform:scale(0);}} @keyframes wlPulse{to{box-shadow:0 0 0 40px rgba(34,197,94,0);}} @keyframes draw{to{stroke-dashoffset:0;}} @keyframes rise{from{opacity:0;transform:translateY(16px);}}
/* bill preview */
.rc-ok{display:flex;align-items:center;gap:12px;margin-bottom:12px;} .rc-ok>span:first-child{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#16A34A,#2563EB);color:#fff;display:flex;align-items:center;justify-content:center;}
.rc-ok b{display:block;font-size:16px;} .rc-ok small{color:var(--text2);font-size:12.5px;}
.rc-paper{background:linear-gradient(135deg,#E6F6EC,#EAF1FF);border-radius:20px;padding:14px;max-height:56vh;overflow:auto;}
.rc-paper .rc{margin:0 auto;background:#fff;width:300px;max-width:100%;padding:20px 16px;border-radius:18px;box-shadow:0 14px 34px -16px rgba(71,85,105,.5);}
.logo-up{display:flex;align-items:center;gap:14px;margin-bottom:18px;} .logo-up .rc-logo,.logo-up .rc-mono{width:56px;height:56px;margin:0;} .logo-up input{display:none;}
/* more sheet */
.more-panel{border-radius:28px 28px 0 0;} .more-grid{grid-template-columns:repeat(3,1fr);gap:10px;} .more-cell{padding:16px 6px;border-radius:20px;background:rgba(255,255,255,.75);border:1px solid var(--glass-b);font-size:12px;}

@media(max-width:880px){
  .bottom-nav{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));height:64px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-b);border-top:1px solid var(--glass-b);backdrop-filter:var(--blur);box-shadow:var(--gshadow);padding:6px;}
  .bn-item{color:#64748B;font-size:10.5px;border-radius:16px;position:relative;} .bn-item .ic{display:flex;}
  .bn-item.active{color:var(--accent);background:#fff;box-shadow:0 6px 14px -8px rgba(22,163,74,.5);}
  .mobile-cart-bar{bottom:88px;border-radius:20px;}
  .view-wrap{padding:4px 14px 100px;} .topbar{padding:0 14px;} .top-mark{display:flex;}
  .prod-grid{grid-template-columns:repeat(3,1fr);gap:8px;} .prod-info{padding:7px 7px 9px;} .prod-name{font-size:11.5px;} .prod-price{font-size:12px;}
  .stat-value{font-size:21px;} .dash-hero{padding:18px;border-radius:22px;} .dash-hero h2{font-size:18px;}
}
@media(max-width:900px){
  .login-screen{flex-direction:column;justify-content:flex-start;align-items:stretch;gap:22px;padding:22px 16px 30px;}
  .lg-brand{flex:none;max-width:none;} .lg-logo{margin-bottom:18px;} .lg-lead,.lg-feats{display:none;} .lg-brand h2{font-size:27px;margin:14px 0 14px;}
  .lg-mods{grid-template-columns:repeat(4,1fr);gap:7px;margin:0;} .lg-mod{padding:10px 4px;font-size:10px;align-items:center;text-align:center;gap:6px;border-radius:16px;} .lg-mod span{width:32px;height:32px;border-radius:11px;}
  .login-card{flex:none;width:100%;max-width:440px;margin:0 auto;padding:28px 22px 22px;}
}
@media (prefers-reduced-motion:reduce){.splash-ring,.wl *,.login-card.shake{animation-duration:.01s !important;animation-iteration-count:1 !important;}}



/* ======================= THEME v6 — Green & Blue, professional ======================= */
:root{--bg:#EEF4F7;--green:#16A34A;--green-dark:#15803D;--green-light:#DCFCE7;--accent:#16A34A;--accent2:#22C55E;--blue:#2563EB;--sky:#0EA5E9;
  --text:#0B1B33;--text2:#5B6B82;--glass:rgba(255,255,255,.86);--glass-b:rgba(255,255,255,.95);--border:rgba(100,116,139,.2);--ch-track:#E6EEF6;
  --shadow:0 1px 2px rgba(11,27,51,.04),0 8px 24px -14px rgba(30,64,120,.28);--gshadow:0 1px 2px rgba(11,27,51,.04),0 14px 34px -18px rgba(30,64,120,.38);}
body{background:radial-gradient(900px 520px at 0% 0%,rgba(22,163,74,.13),transparent 62%),radial-gradient(900px 620px at 100% 100%,rgba(37,99,235,.15),transparent 62%),#F1F6F9 fixed;}
.splash,.wl{background:linear-gradient(135deg,#E6F6EC,#EAF1FF);}
.avatar{background:linear-gradient(135deg,#16A34A,#2563EB);}
.status-pill{color:#15803D;}

/* --- sidebar: deep blue with green accent --- */
.sidebar,.admin .sidebar{background:linear-gradient(175deg,#0A2A5E 0%,#0E3C86 58%,#0B5A4A 130%);border:none;box-shadow:0 22px 44px -22px rgba(10,42,94,.75);backdrop-filter:none;}
.sidebar .zmark{--mk-top:#FFFFFF;}
.side-brand,.admin .side-brand{border-bottom-color:rgba(255,255,255,.14);}
.side-brand-text b,.admin .side-brand-text b{color:#fff;} .side-brand-text b i{color:#4ADE80 !important;} .side-brand-text span{color:#A9C3EE;}
.nav-item,.admin .nav-item{color:#C9D9F3;} .nav-item:hover,.admin .nav-item:hover{background:rgba(255,255,255,.1);color:#fff;}
.nav-item.active,.admin .nav-item.active{background:linear-gradient(135deg,#16A34A,#22C55E);color:#fff;box-shadow:0 10px 20px -10px rgba(34,197,94,.9);}
.nav-sep,.admin .nav-sep{background:rgba(255,255,255,.14);}
.side-foot,.admin .side-foot{background:rgba(255,255,255,.08);color:#B6CAEC;}
.admin-tag{background:#fff;color:#0E3C86;}

/* --- hero --- */
.dash-hero{background:linear-gradient(115deg,#15803D 0%,#16A34A 38%,#2563EB 100%);border-radius:24px;padding:24px 26px;box-shadow:0 22px 44px -22px rgba(37,99,235,.7);position:relative;overflow:hidden;}
.dash-hero::after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%);pointer-events:none;}
.dash-hero>*{position:relative;z-index:1;}
.hero-r{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.hero-r small{font-size:10.5px;letter-spacing:.14em;font-weight:700;opacity:.85;} .hero-r b{font-size:30px;letter-spacing:-.02em;line-height:1.1;}
.hero-dl .dl{background:rgba(255,255,255,.22);color:#fff;}

/* --- DASHBOARD KIT --- */
.kpis{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));margin-bottom:14px;}
.grid-4.kpis{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));}
.kpi{padding:16px 18px 14px;border-radius:22px;min-width:0;transition:.2s;} .kpi:hover{transform:translateY(-2px);box-shadow:0 20px 38px -20px rgba(37,99,235,.45);}
.kpi-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.kpi-ic{width:38px;height:38px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#16A34A,#22C55E);box-shadow:0 8px 16px -8px rgba(22,163,74,.8);flex-shrink:0;}
.tone-blue .kpi-ic{background:linear-gradient(135deg,#2563EB,#60A5FA);box-shadow:0 8px 16px -8px rgba(37,99,235,.8);}
.tone-sky .kpi-ic{background:linear-gradient(135deg,#0EA5E9,#38BDF8);box-shadow:0 8px 16px -8px rgba(14,165,233,.8);}
.tone-amber .kpi-ic{background:linear-gradient(135deg,#F59E0B,#FBBF24);box-shadow:0 8px 16px -8px rgba(245,158,11,.8);}
.kpi-label{font-size:11px;font-weight:700;color:var(--text2);letter-spacing:.07em;text-transform:uppercase;}
.kpi-mid{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;}
.kpi-val{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1;min-width:0;overflow-wrap:anywhere;}
.spark{width:92px;height:34px;flex-shrink:0;}
.kpi-sub{margin-top:9px;font-size:11.5px;color:var(--text2);font-weight:600;}
.dl{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap;}
.dl.up{background:#DCFCE7;color:#15803D;} .dl.down{background:#FEE2E2;color:#B91C1C;} .dl.flat{background:#EAF0F7;color:#5B6B82;}

.dgrid{display:grid;gap:14px;margin-bottom:14px;align-items:stretch;}
.dg-main{grid-template-columns:minmax(0,2fr) minmax(280px,1fr);}
.dg-3{grid-template-columns:repeat(auto-fit,minmax(285px,1fr));}
.dg-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.dg-1{grid-template-columns:1fr;}
@media(max-width:900px){.dg-main{grid-template-columns:minmax(0,1fr);}}
.chart-card{padding:18px 18px 16px;border-radius:22px;min-width:0;display:flex;flex-direction:column;}
.chart-card>:last-child{flex:1;}
.cc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.cc-head .section-title{font-size:15.5px;} .cc-head .section-sub{margin:0;}
.cc-legend{display:flex;gap:14px;font-size:11.5px;font-weight:600;color:var(--text2);padding-top:3px;}
.cc-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;}

.ch-svg{width:100%;height:auto;display:block;overflow:visible;}
.ch-grid{stroke:rgba(100,116,139,.2);stroke-dasharray:3 5;} .ch-ax{fill:#7889A2;font-size:11.5px;font-weight:600;font-family:inherit;}
.ch-hl{stroke:rgba(37,99,235,.4);stroke-width:1.5;stroke-dasharray:3 3;opacity:0;transition:.15s;}
.ch-pt circle{opacity:0;transition:.15s;} .ch-pt circle:first-of-type{opacity:1;r:3.6;} .ch-pt:hover circle{opacity:1;} .ch-pt:hover circle:first-of-type{r:5.6;} .ch-pt:hover .ch-hl{opacity:1;}
.ch-bar{transform-box:fill-box;transform-origin:bottom;animation:chGrow .7s cubic-bezier(.22,1,.36,1) both;transition:filter .15s;} .ch-pt:hover .ch-bar{filter:brightness(1.1);}
.ch-fade{animation:chFade .8s ease both;}
@keyframes chGrow{from{transform:scaleY(0);}} @keyframes chFade{from{opacity:0;}} @keyframes chGrowX{from{transform:scaleX(0);}} @keyframes chRing{from{stroke-dasharray:0 100;}}
.donut-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;}
.ch-donut{width:100%;max-width:190px;height:auto;display:block;}
.ch-donut .ch-arc{transition:stroke-width .15s;animation:chFade .7s ease both;} .ch-donut .ch-arc:hover{stroke-width:29;}
.ch-ctr{font-size:21px;font-weight:800;fill:var(--text);letter-spacing:-.02em;} .ch-ctr-sub{font-size:10px;font-weight:700;fill:#8493AA;letter-spacing:.16em;}
.ch-legend{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:9px;}
.ch-legend li{display:flex;align-items:center;gap:9px;font-size:12.5px;} .ch-legend i{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
.ch-legend span{flex:1;min-width:0;font-weight:600;color:#334155;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ch-legend b{font-weight:800;} .ch-legend em{font-style:normal;color:var(--text2);font-weight:700;min-width:38px;text-align:right;font-size:11.5px;}
.ch-empty{color:var(--text2);font-size:12.5px;text-align:center;padding:30px 8px;margin:0;}
.rings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:10px;align-items:start;}
.ring-box{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;}
.ch-ring{width:100%;max-width:108px;} .ch-ring .ch-arc{animation:chRing 1s cubic-bezier(.22,1,.36,1) both;} .ch-ring-n{font-size:23px;font-weight:800;fill:var(--text);letter-spacing:-.02em;}
.ring-box b{font-size:12.5px;margin-top:8px;} .ring-box small{font-size:11px;color:var(--text2);font-weight:600;}
.hb{margin-bottom:15px;} .hb:last-child{margin-bottom:0;}
.hb-top{display:flex;align-items:center;gap:9px;font-size:12.8px;font-weight:600;margin-bottom:7px;}
.hb-rank{width:22px;height:22px;border-radius:7px;background:#E7F0FF;color:#2563EB;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .hb-top b{font-weight:800;white-space:nowrap;}
.hb-track{height:8px;background:var(--ch-track);border-radius:8px;overflow:hidden;}
.hb-track i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#16A34A,#2563EB);transform-origin:left;animation:chGrowX .8s cubic-bezier(.22,1,.36,1) both;}

/* tables + misc polish */
th{background:rgba(238,244,247,.7);} tr:hover td{background:rgba(238,244,247,.45);}
.stat-card::before{background:radial-gradient(circle,rgba(37,99,235,.2),transparent 70%);} .stat-sub{color:#15803D;}
.bar-chart .bar{background:linear-gradient(180deg,#60A5FA,#2563EB);} .rank-bar i{background:linear-gradient(90deg,#16A34A,#2563EB);}
.badge.green{background:#DCFCE7;color:#15803D;} .badge.blue{background:#E7F0FF;color:#1D4ED8;}
@media(max-width:880px){ .dash-hero{flex-direction:column;align-items:flex-start;} .hero-r{align-items:flex-start;text-align:left;} .hero-r b{font-size:26px;} }
@media (prefers-reduced-motion:reduce){.ch-bar,.ch-fade,.ch-arc,.hb-track i{animation:none !important;}}
.chart-card>.ch-svg{flex:none;} .ch-ax{font-size:10.5px;}
.hero-dl .dl.up,.hero-dl .dl.down,.hero-dl .dl.flat{background:rgba(255,255,255,.22);color:#fff;}

/* aliases so newer feature styles pick up the green/blue palette */
:root{--grad:linear-gradient(135deg,#15803D 0%,#16A34A 55%,#2563EB 100%);--ink:#0A2A5E;--err:#DC2626;--gold:#2563EB;--gold-light:#DBEAFE;--display:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
.btn-primary,.generate-btn,.modal-actions .primary,.btn-sm.green,.mobile-cart-bar .mc-btn,.banner button{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 14px 26px -14px rgba(22,163,74,.85);}
.cat-chip.active,.pill-btn.active{background:var(--grad);border-color:transparent;color:#fff;} .prod-qty-badge{background:var(--grad);color:#fff;}
.pay-btn.active{border-color:var(--green);color:var(--green-dark);background:var(--green-light);} .prod-price{color:var(--green-dark);}
.toast,.banner,.mobile-cart-bar{background:#0A2A5E;} .btn-sm.dark{background:#0A2A5E;border-color:#0A2A5E;}
.field input:focus,.form-field input:focus,.search-row input:focus,.form-field select:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(34,197,94,.16);}
.toggle.on{background:var(--green);} .remember input{accent-color:#16A34A;}
.nav-badge{color:#fff;}
@media(max-width:880px){.bottom-nav{background:linear-gradient(135deg,#0A2A5E,#0E3C86);border-color:rgba(255,255,255,.14);} .bn-item{color:rgba(232,240,255,.7);} .bn-item.active{color:#fff;background:rgba(34,197,94,.3);box-shadow:inset 0 0 0 1px rgba(74,222,128,.5);}}

/* ======================= NEW FEATURES ======================= */
/* login mode tabs */
.lg-tabs{display:flex;gap:6px;background:var(--green-light);border-radius:14px;padding:4px;margin:0 0 18px;}
.lg-tabs button{flex:1;border:none;background:none;padding:9px 6px;border-radius:11px;font-weight:700;font-size:13px;color:var(--text2);display:flex;align-items:center;justify-content:center;gap:6px;}
.lg-tabs button.on{background:#fff;color:var(--green-dark);box-shadow:0 4px 12px -6px rgba(10,42,94,.4);}
.nav-badge{margin-left:auto;background:var(--gold);color:#FFFFFF;border-radius:999px;font-size:10.5px;font-weight:800;padding:2px 7px;min-width:20px;text-align:center;}
.bn-item{position:relative;} .bn-item .nav-badge{position:absolute;top:2px;right:8px;margin:0;padding:1px 5px;}
/* kitchen board */
.kds-wrap{display:flex;flex-direction:column;height:100%;}
.kds-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;flex:1;min-height:0;}
@media(max-width:900px){.kds-cols{grid-template-columns:1fr;overflow-y:auto;}}
.kds-col{display:flex;flex-direction:column;min-height:0;background:rgba(255,255,255,.55);border:1px solid var(--border);border-radius:22px;padding:12px;}
.kds-col h3{margin:2px 4px 10px;font-family:var(--display);font-size:16px;display:flex;align-items:center;justify-content:space-between;}
.kds-col h3 span{background:var(--green-light);color:var(--green-dark);font-family:var(--font);font-size:12px;border-radius:999px;padding:2px 9px;}
.kds-list{overflow-y:auto;display:flex;flex-direction:column;gap:10px;flex:1;}
.ticket{background:#fff;border:1px solid var(--border);border-left:5px solid var(--gold);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow);}
.ticket.preparing{border-left-color:#22C55E;} .ticket.ready{border-left-color:#15803D;opacity:.95;}
.ticket.late{box-shadow:0 0 0 2px rgba(192,57,43,.35),var(--shadow);}
.ticket-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;}
.ticket-head b{font-size:15px;} .ticket-meta{font-size:11.5px;color:var(--text2);}
.ticket ul{list-style:none;margin:6px 0 8px;padding:0;} .ticket li{display:flex;gap:8px;font-size:14px;padding:3px 0;font-weight:600;}
.ticket li i{font-style:normal;min-width:26px;color:var(--green);font-weight:800;}
.ticket .tnote{background:var(--gold-light);color:#1D4ED8;border-radius:10px;padding:6px 9px;font-size:12px;font-weight:600;margin-bottom:8px;}
.ticket .tact{display:flex;gap:8px;} .ticket .tact button{flex:1;}
.src-tag{font-size:10px;font-weight:800;letter-spacing:.06em;border-radius:6px;padding:2px 6px;background:var(--green-light);color:var(--green-dark);}
.src-tag.qr{background:var(--gold-light);color:#1D4ED8;}
.kitchen-shell{position:fixed;inset:0;display:flex;flex-direction:column;background:transparent;z-index:10;padding:0 18px 18px;}
.kitchen-top{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;}
.kitchen-top h1{margin:0;font-family:var(--display);font-size:22px;display:flex;align-items:center;gap:10px;}
/* QR orders inbox */
.qr-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow);}
.qr-card.new{border-left:5px solid var(--gold);}
.qr-lines{margin:8px 0;font-size:13.5px;} .qr-lines div{display:flex;justify-content:space-between;padding:2px 0;}
.qr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}
.qr-tile{background:#fff;border:1px solid var(--border);border-radius:18px;padding:14px;text-align:center;}
.qr-tile svg,.qr-tile img{width:100%;max-width:170px;height:auto;display:block;margin:0 auto 8px;}
.qr-tile b{display:block;font-family:var(--display);font-size:15px;}
.qr-tile small{display:block;color:var(--text2);font-size:10.5px;word-break:break-all;margin-top:4px;}
.dev-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;}
.dev-row:last-child{border-bottom:none;}
.num-in{width:90px !important;}
@media print{
  body.print-qr *{visibility:hidden;} body.print-qr #print-qr,body.print-qr #print-qr *{visibility:visible;}
  body.print-qr #print-qr{display:block !important;position:absolute;left:0;top:0;width:100%;}
}
#print-qr{display:none;}
#print-qr .pq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding:12px;}
#print-qr .pq{border:2px solid #15803D;border-radius:16px;padding:18px;text-align:center;page-break-inside:avoid;}
#print-qr .pq h2{margin:0 0 4px;font-family:Georgia,serif;color:#15803D;} #print-qr .pq p{margin:4px 0;font-size:13px;} #print-qr .pq svg{width:210px;height:210px;}