:root{
 --bg:#080b12;--bg2:#111726;--card:rgba(255,255,255,.075);--card-strong:rgba(255,255,255,.11);--text:#f6f7fb;--muted:#9da7ba;--line:rgba(255,255,255,.10);--accent:#17191d;--accent2:#ffffff;--success:#72d6a4;--danger:#ff8f8f;--warning:#f5bf76;--shadow:0 28px 70px rgba(0,0,0,.34)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top left,#151b2b 0,#0a0d14 44%,#070910 100%);color:var(--text)}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.025),transparent 30%,rgba(216,181,122,.025) 65%,transparent 100%)}a{text-decoration:none;color:inherit}
.ambient{position:fixed;border-radius:50%;filter:blur(70px);opacity:.30;pointer-events:none}.ambient-a{width:350px;height:350px;background:#8b6b3f;left:-120px;top:-100px}.ambient-b{width:280px;height:280px;background:#493f82;right:-100px;bottom:-90px}
.glass-panel{background:linear-gradient(135deg,rgba(255,255,255,.095),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.11);box-shadow:var(--shadow);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}.glass-inner{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
.layout{display:flex;min-height:100vh;position:relative;z-index:1}.sidebar{width:265px;padding:20px 14px;position:sticky;top:12px;height:calc(100vh - 24px);margin:12px;display:flex;flex-direction:column;border-radius:28px;overflow:hidden}.brand-wrap{display:flex;gap:12px;align-items:center;padding:7px 10px 18px}.brand-mark{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#f4f5f6,#70757c);color:#17120d;font-weight:900;box-shadow:0 10px 22px rgba(17,19,22,.10)}.brand{font-weight:800;font-size:16px;letter-spacing:.02em}.brand small{display:block;color:var(--muted);font-size:10px;font-weight:500;margin-top:4px}.sidebar-label{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#707b90;padding:14px 12px 7px}.sidebar nav{display:flex;flex-direction:column;gap:4px}.nav-link{position:relative;padding:11px 12px;border-radius:13px;color:#aeb8ca;font-size:13px;display:flex;align-items:center;gap:11px;border:1px solid transparent;transition:.22s ease}.nav-link:hover{background:rgba(255,255,255,.055);color:#fff;border-color:rgba(255,255,255,.06);transform:translateX(2px)}.nav-link.active{background:linear-gradient(90deg,rgba(17,19,22,.06),rgba(17,19,22,.03));color:#fff;border-color:rgba(17,19,22,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 8px 20px rgba(0,0,0,.12)}.nav-icon{width:22px;height:22px;display:grid;place-items:center;font-size:15px;color:#8f9ab1}.nav-link.active .nav-icon{color:var(--accent2)}.nav-active-dot{width:5px;height:5px;border-radius:50%;margin-left:auto;background:var(--accent);box-shadow:0 0 14px rgba(216,181,122,.9)}.nav-logout{color:#d19a9a}.sidebar-foot{margin-top:auto;padding:10px;border-radius:18px}.profile-row{display:flex;gap:10px;align-items:center}.avatar{width:35px;height:35px;border-radius:12px;background:linear-gradient(145deg,rgba(216,181,122,.4),rgba(255,255,255,.08));display:grid;place-items:center;font-weight:900;color:#fff}.sidebar-foot strong{font-size:12px}.badge{display:inline-block;border-radius:999px;padding:4px 8px;font-size:9px;font-weight:800;letter-spacing:.05em}.badge-role{background:rgba(216,181,122,.14);color:var(--accent2);border:1px solid rgba(17,19,22,.06)}
.content{flex:1;min-width:0;padding-bottom:30px}.topbar{height:76px;margin:12px 22px 0;padding:0 22px;border-radius:22px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:12px;z-index:20}.topbar .eyebrow{font-size:9px;letter-spacing:.18em;color:#768197;margin-bottom:4px}.topbar strong{font-size:16px;letter-spacing:.01em}.topbar-right{display:flex;align-items:center;gap:8px}.live-dot{width:7px;height:7px;border-radius:50%;background:#74d5a5;box-shadow:0 0 12px rgba(116,213,165,.8)}.topbar-date{color:var(--muted);font-size:11px}.content>section,.content>.page{padding:26px 22px}.grid{display:grid;gap:16px}.stats{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.035));border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 16px 40px rgba(0,0,0,.14);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.stat .label{font-size:11px;color:var(--muted)}.stat .value{font-size:25px;font-weight:800;margin-top:8px;letter-spacing:-.02em}.stat .hint{font-size:10px;color:#7f899a;margin-top:6px}.two{grid-template-columns:1.2fr .8fr}.three{grid-template-columns:repeat(3,1fr)}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:12px}.table th,.table td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.table th{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#7f899b}.table tbody tr:hover{background:rgba(255,255,255,.025)}.right{text-align:right!important}.actions{display:flex;gap:8px;flex-wrap:wrap}.btn{border:1px solid transparent;border-radius:11px;padding:10px 14px;font-weight:800;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.2s ease}.btn:hover{transform:translateY(-1px)}.btn-primary{background:linear-gradient(145deg,#17191d,#111316);color:#1b140d;box-shadow:0 10px 24px rgba(17,19,22,.08)}.btn-light{background:rgba(255,255,255,.065);color:#eff2f7;border-color:rgba(255,255,255,.08)}.btn-danger{background:rgba(255,143,143,.11);color:#ffabab;border-color:rgba(255,143,143,.15)}.btn-success{background:rgba(114,214,164,.12);color:#8ce7b9;border-color:rgba(114,214,164,.15)}.btn-warning{background:rgba(245,191,118,.12);color:#f7c989;border-color:rgba(245,191,118,.15)}.alert{margin:16px 22px 0;padding:13px 15px;border-radius:14px;font-size:12px}.alert.success{color:#b9f0cf}.alert.error{color:#ffb0b0}.alert.warning{color:#ffd69f}.page-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.page-head h2{margin:0;font-size:22px;letter-spacing:-.03em}.muted{color:var(--muted)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-row{display:flex;flex-direction:column;gap:6px}.form-row.full{grid-column:1/-1}.form-row label{font-size:11px;font-weight:700;color:#bdc5d3}.form-row input,.form-row select,.form-row textarea{border:1px solid rgba(255,255,255,.11);border-radius:11px;padding:11px 12px;font:inherit;background:rgba(255,255,255,.045);color:#f5f7fa;outline:none;transition:.2s ease}.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:rgba(216,181,122,.5);box-shadow:0 0 0 4px rgba(17,19,22,.05)}.form-row select option{background:#131925;color:#fff}.form-row textarea{min-height:90px;resize:vertical}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.line-items{width:100%}.line-items select,.line-items input{width:100%;padding:9px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.04);color:#fff}.remove-row{cursor:pointer;color:var(--danger);font-weight:800}.badge-green{background:rgba(114,214,164,.12);color:#8ce7b9}.badge-red{background:rgba(255,143,143,.11);color:#ffabab}.badge-yellow{background:rgba(245,191,118,.12);color:#f7c989}.toolbar{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}.filter{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.filter .form-row{min-width:145px}.print-only{display:none}.login-page{min-height:100vh;display:grid;place-items:center;padding:20px;overflow:hidden}.login-card{width:min(430px,100%);padding:30px;border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px)}.login-card h1{margin:0 0 5px}.login-card p{color:var(--muted);font-size:13px;margin:0 0 20px}.login-card .form-row{margin-bottom:12px}.login-brand{text-align:center;margin-bottom:22px}.login-logo{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;margin:0 auto 12px;background:linear-gradient(145deg,#f4f5f6,#70757c);color:#17120d;font-weight:900;font-size:20px;box-shadow:0 15px 30px rgba(216,181,122,.2)}.text-green{color:var(--success)}.text-red{color:var(--danger)}
.modal-backdrop{position:fixed;inset:0;background:rgba(5,8,14,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px;z-index:100}.modal-backdrop[hidden]{display:none}.modal-card{width:min(480px,100%);border-radius:24px;padding:24px;display:grid;grid-template-columns:auto 1fr;gap:14px}.modal-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(216,181,122,.14);border:1px solid rgba(216,181,122,.2);color:var(--accent2);font-weight:900}.modal-kicker{font-size:9px;letter-spacing:.17em;color:#777f91}.modal-copy h3{margin:4px 0 5px;font-size:18px}.modal-copy p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.modal-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
@media(max-width:1050px){.sidebar{width:225px}.stats{grid-template-columns:repeat(2,1fr)}.two,.three{grid-template-columns:1fr}}
@media(max-width:760px){.sidebar{display:none}.topbar{margin:10px 12px 0}.content>section,.content>.page{padding:18px 12px}.alert{margin-left:12px;margin-right:12px}.form-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}}
@media print{body{background:#fff;color:#111}.sidebar,.topbar,.no-print,.modal-backdrop{display:none!important}.content>section,.content>.page{padding:0}.print-only{display:block}.card{border:0;padding:0;box-shadow:none}.table th,.table td{border-color:#ddd}.muted{color:#666}}


/* FINAL RESPONSIVE NAVIGATION */
@media(max-width:760px){
  /* Admin/Kasir mobile */
  .topbar{height:64px;margin:8px 10px 0;padding:0 12px;top:8px;z-index:60}
  .topbar>div:first-of-type{min-width:0}
  .topbar .eyebrow{font-size:8px}.topbar strong{font-size:14px}
  .topbar-right{margin-left:auto}.topbar-date{font-size:9px}
  .content>section,.content>.page{padding:16px 10px}
  .alert{margin-left:10px;margin-right:10px}
  .page-head{gap:10px}.page-head h2{font-size:19px}
}

/* Storefront: index uses cart button, never hamburger */
.mobile-admin-login{display:none!important}
@media(max-width:980px){
  .store-links{display:flex!important;margin-left:auto;gap:7px}
  .store-links a:not(.store-cart-btn):not(.admin-login-btn){display:none!important}
  .store-links .desktop-admin-login{display:inline-flex!important}
  .store-links .store-cart-btn{display:inline-flex!important}
}
@media(max-width:620px){
  .store-nav{min-height:58px;padding:8px 10px;gap:8px}
  .store-links{position:static;display:flex!important;flex-direction:row;align-items:center;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .store-links a{width:auto!important;min-height:42px}
  .store-links .desktop-admin-login{font-size:0!important;padding:9px!important;width:42px!important;justify-content:center!important}
  .store-links .desktop-admin-login .admin-icon{font-size:12px!important;margin:0}
  .store-links .store-cart-btn{font-size:0!important;padding:9px!important;width:42px!important;justify-content:center!important;position:relative}
  .store-links .store-cart-btn>span:first-child{font-size:16px}
  .store-links .store-cart-btn .cart-count{position:absolute;right:-2px;top:-4px;min-width:17px;height:17px;padding:0 4px;font-size:9px}
}

/* Premium SVG mobile bottom navigation */
.mobile-bottom-nav{display:none}
@media(max-width:760px){
  .mobile-bottom-nav{display:block;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:90}
  .mobile-bottom-inner{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:7px;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.055));box-shadow:0 20px 55px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
  .mobile-bottom-item{min-width:0;min-height:58px;border-radius:17px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#9da7ba;position:relative;transition:.2s ease;border:1px solid transparent}
  .mobile-bottom-item:active{transform:scale(.97)}
  .mobile-bottom-item.active{color:var(--accent2);background:linear-gradient(145deg,rgba(17,19,22,.08),rgba(17,19,22,.03));border-color:rgba(17,19,22,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
  .mobile-bottom-item.active:after{content:"";position:absolute;top:5px;width:22px;height:2px;border-radius:999px;background:var(--accent)}
  .mobile-bottom-icon{width:22px;height:22px;display:grid;place-items:center}
  .mobile-bottom-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mobile-bottom-label{font-size:9px;font-weight:800;letter-spacing:.01em;white-space:nowrap}
  .mobile-more-sheet{position:absolute;right:0;bottom:calc(100% + 10px);width:min(230px,calc(100vw - 32px));padding:8px;border:1px solid rgba(255,255,255,.11);border-radius:20px;background:linear-gradient(135deg,rgba(22,27,39,.96),rgba(10,13,20,.94));box-shadow:0 20px 55px rgba(0,0,0,.5);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
  .mobile-more-sheet[hidden]{display:none}
  .mobile-more-sheet a{display:block;padding:12px 13px;border-radius:13px;color:#dfe4ed;font-size:12px;font-weight:700}
  .mobile-more-sheet a:hover,.mobile-more-sheet a:active{background:rgba(255,255,255,.06)}
  .mobile-more-sheet a.danger{color:#ffaaaa}
  .content{padding-bottom:92px}
}
/* Mobile admin bottom navigation: force visible and stay above page content */
@media (max-width:760px){
  .mobile-bottom-nav{display:block!important;position:fixed!important;left:8px!important;right:8px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;z-index:9999!important;visibility:visible!important;opacity:1!important}
  .mobile-bottom-inner{position:relative!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .mobile-bottom-item{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:inherit;cursor:pointer}
  .mobile-more-trigger{color:#9da7ba}
  .mobile-more-trigger.active{color:var(--accent2)}
  .content{padding-bottom:104px!important}
}
@media (min-width:761px){.mobile-bottom-nav{display:none!important}}
/* Make product choices unmistakable: name + volume + stock */
.line-items .prod{font-weight:700;min-width:250px}
/* Mobile admin uses bottom navigation; no hamburger/sidebar drawer */
@media (max-width:760px){
  .sidebar{display:none!important}
  .sidebar-backdrop{display:none!important}
  .content{padding-bottom:112px!important}
  .mobile-bottom-nav{display:block!important}
}

/* Reference-style mobile bottom navigation */
.mobile-bottom-nav{display:none}
@media (max-width:760px){
  .mobile-bottom-nav{display:block!important;position:fixed!important;left:12px!important;right:12px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;z-index:99999!important;pointer-events:none}
  .mobile-bottom-inner{position:relative;pointer-events:auto;height:76px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;padding:10px 8px 7px;border:1px solid rgba(220,220,220,.95);border-radius:28px;background:rgba(255,255,255,.96);box-shadow:0 16px 40px rgba(15,20,35,.22),0 2px 8px rgba(15,20,35,.08),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
  .mobile-bottom-item{appearance:none;-webkit-appearance:none;border:0;background:transparent;min-width:0;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#6d7179;text-decoration:none;position:relative;border-radius:18px;transition:transform .18s ease,color .18s ease,background .18s ease;cursor:pointer;font:inherit}
  .mobile-bottom-item:active{transform:scale(.95)}
  .mobile-bottom-icon{width:25px;height:25px;display:grid;place-items:center}.mobile-bottom-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.mobile-bottom-label{font-size:9px;font-weight:800;letter-spacing:.02em;line-height:1}.mobile-bottom-item.active{color:#17191d}.mobile-bottom-item.active:not(.nav-primary)::after{content:"";position:absolute;bottom:1px;width:5px;height:5px;border-radius:50%;background:#17191d;box-shadow:0 0 0 3px rgba(17,19,22,.08)}
  .mobile-bottom-item.nav-primary{width:72px;height:72px;justify-self:center;align-self:start;margin-top:-18px;border-radius:24px;color:#fff;background:linear-gradient(145deg,#17191d,#111316);box-shadow:0 14px 24px rgba(139,98,45,.30),inset 0 1px 0 rgba(255,255,255,.42),inset 0 -6px 14px rgba(110,72,27,.12);border:1px solid rgba(255,255,255,.42)}
  .mobile-bottom-item.nav-primary .mobile-bottom-icon{width:30px;height:30px}.mobile-bottom-item.nav-primary .mobile-bottom-icon svg{width:28px;height:28px;stroke-width:1.7}.mobile-bottom-item.nav-primary .mobile-bottom-label{color:#fff;font-size:9px}.mobile-bottom-item.nav-primary.active{transform:translateY(-1px)}.mobile-bottom-item.nav-primary.active::after{content:"";position:absolute;bottom:-8px;width:6px;height:6px;border-radius:50%;background:#d4aa68;box-shadow:0 0 0 3px rgba(212,170,104,.15)}
  .mobile-more-sheet{position:absolute;right:2px;bottom:calc(100% + 12px);width:min(245px,calc(100vw - 30px));padding:8px;border:1px solid rgba(255,255,255,.8);border-radius:22px;background:rgba(22,25,33,.94);box-shadow:0 20px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
  .mobile-more-sheet[hidden]{display:none}.mobile-more-sheet a{display:block;padding:12px 14px;border-radius:14px;color:#eef0f3;font-size:12px;font-weight:750;text-decoration:none}.mobile-more-sheet a:hover,.mobile-more-sheet a:active{background:rgba(255,255,255,.07)}.mobile-more-sheet a.danger{color:#ffb0b0}
   .content{padding-bottom:104px!important}.sidebar{display:none!important}.sidebar-backdrop{display:none!important}
}
@media (max-width:390px){.mobile-bottom-nav{left:7px!important;right:7px!important;bottom:max(6px,env(safe-area-inset-bottom))!important}.mobile-bottom-inner{height:71px;border-radius:25px;padding:8px 5px 5px}.mobile-bottom-item{height:52px}.mobile-bottom-item.nav-primary{width:64px;height:64px;border-radius:22px;margin-top:-15px}.mobile-bottom-label{font-size:8px}}
@media (min-width:761px){.mobile-bottom-nav{display:none!important}}

/* =========================================================
   MOBILE ADMIN/KASIR — FLOATING BOTTOM NAVIGATION
   No hamburger/sidebar drawer on phones.
   ========================================================= */
.mobile-bottom-nav{display:none}

@media (max-width:760px){
  /* Never show the desktop sidebar / any old mobile drawer. */
  .sidebar{display:none!important}
  .sidebar-backdrop{display:none!important}
  .mobile-menu-toggle,
  .hamburger,
  .menu-toggle,
  [data-sidebar-toggle]{display:none!important}

  .content{padding-bottom:124px!important;min-width:0}

  /* Floating bar: visually detached from page, like a mobile app tab bar. */
  .mobile-bottom-nav{
    display:block!important;
    position:fixed!important;
    left:14px!important;
    right:14px!important;
    bottom:max(12px,env(safe-area-inset-bottom))!important;
    z-index:99999!important;
    pointer-events:none;
  }
  .mobile-bottom-inner{
    position:relative!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:end!important;
    height:78px!important;
    padding:9px 9px 8px!important;
    border:1px solid rgba(255,255,255,.82)!important;
    border-radius:30px!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:
      0 22px 55px rgba(5,12,24,.28),
      0 4px 14px rgba(5,12,24,.10),
      inset 0 1px 0 rgba(255,255,255,.98)!important;
    -webkit-backdrop-filter:blur(24px)!important;
    backdrop-filter:blur(24px)!important;
    pointer-events:auto!important;
    overflow:visible!important;
  }
  .mobile-bottom-inner::before{
    content:"";
    position:absolute;
    left:10px;right:10px;top:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(180,141,79,.35),transparent);
    pointer-events:none;
  }
  .mobile-bottom-item{
    appearance:none!important;
    -webkit-appearance:none!important;
    border:0!important;
    background:transparent!important;
    min-width:0!important;
    height:58px!important;
    padding:0!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    color:#73767c!important;
    text-decoration:none!important;
    position:relative!important;
    border-radius:18px!important;
    transition:transform .18s ease,color .18s ease,background .18s ease!important;
    cursor:pointer!important;
    font:inherit!important;
    box-shadow:none!important;
  }
  .mobile-bottom-item:active{transform:scale(.94)!important}
  .mobile-bottom-icon{
    width:26px!important;height:26px!important;
    display:grid!important;place-items:center!important;
  }
  .mobile-bottom-icon svg{
    width:25px!important;height:25px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.85!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }
  .mobile-bottom-label{
    font-size:9px!important;
    font-weight:800!important;
    letter-spacing:.01em!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .mobile-bottom-item.active{color:#a47738!important;background:rgba(202,165,104,.10)!important}
  .mobile-bottom-item.active:not(.nav-primary)::after{
    content:"";
    position:absolute;
    bottom:3px;
    width:5px;height:5px;
    border-radius:50%;
    background:#c39b5f;
    box-shadow:0 0 0 3px rgba(195,155,95,.14);
  }

  /* Center action: lifted like the reference image. */
  .mobile-bottom-item.nav-primary{
    width:70px!important;
    height:70px!important;
    justify-self:center!important;
    align-self:start!important;
    margin-top:-22px!important;
    border-radius:24px!important;
    color:#fff!important;
    background:linear-gradient(145deg,#e0bf82 0%,#b78645 100%)!important;
    border:2px solid rgba(255,255,255,.78)!important;
    box-shadow:
      0 16px 28px rgba(137,94,35,.30),
      inset 0 1px 0 rgba(255,255,255,.52),
      inset 0 -6px 14px rgba(100,66,23,.10)!important;
    z-index:2!important;
  }
  .mobile-bottom-item.nav-primary .mobile-bottom-icon{
    width:31px!important;height:31px!important;
  }
  .mobile-bottom-item.nav-primary .mobile-bottom-icon svg{
    width:28px!important;height:28px!important;
    stroke-width:1.75!important;
  }
  .mobile-bottom-item.nav-primary .mobile-bottom-label{
    color:#fff!important;
    font-size:9px!important;
  }
  .mobile-bottom-item.nav-primary.active{
    transform:translateY(-1px)!important;
    background:linear-gradient(145deg,#e8c98e 0%,#bd9152 100%)!important;
  }

  .mobile-more-sheet{
    position:absolute!important;
    right:2px!important;
    bottom:calc(100% + 14px)!important;
    width:min(250px,calc(100vw - 30px))!important;
    padding:8px!important;
    border:1px solid rgba(255,255,255,.85)!important;
    border-radius:22px!important;
    background:rgba(20,24,32,.96)!important;
    box-shadow:0 22px 55px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08)!important;
    -webkit-backdrop-filter:blur(24px)!important;
    backdrop-filter:blur(24px)!important;
  }
  .mobile-more-sheet[hidden]{display:none!important}
  .mobile-more-sheet a{
    display:block!important;
    padding:12px 14px!important;
    border-radius:14px!important;
    color:#eef0f3!important;
    font-size:12px!important;
    font-weight:750!important;
  }
  .mobile-more-sheet a:hover,.mobile-more-sheet a:active{background:rgba(255,255,255,.07)!important}
  .mobile-more-sheet a.danger{color:#ffb0b0!important}

  /* Compact header/content for phones. */
  .topbar{height:64px!important;margin:9px 10px 0!important;padding:0 14px!important;border-radius:19px!important;position:relative!important;top:auto!important}
  .topbar-right .topbar-date{font-size:10px!important}
  .content>section,.content>.page{padding:18px 10px!important}
  .alert{margin-left:10px!important;margin-right:10px!important}
}

@media (max-width:390px){
  .mobile-bottom-nav{left:9px!important;right:9px!important;bottom:max(8px,env(safe-area-inset-bottom))!important}
  .mobile-bottom-inner{height:73px!important;border-radius:27px!important;padding:8px 6px 6px!important}
  .mobile-bottom-item{height:54px!important}
  .mobile-bottom-item.nav-primary{width:64px!important;height:64px!important;border-radius:22px!important;margin-top:-18px!important}
  .mobile-bottom-label{font-size:8px!important}
}

@media (min-width:761px){
  .mobile-bottom-nav{display:none!important}
}


/* =========================================================
   MOBILE VIEWPORT LOCK + CLEAN PRINT
   ========================================================= */
html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 760px) {
  html, body {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }
  body { touch-action: pan-y; }
  .mobile-bottom-nav {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
  }
}
@media print {
  .mobile-bottom-nav,
  .mobile-more-sheet,
  .sidebar,
  .topbar,
  .no-print,
  .modal-backdrop { display: none !important; visibility: hidden !important; }
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
}
.formula-hint{display:block;font-size:10px;line-height:1.35;margin-top:5px;color:#97a0b2}
@media (max-width:760px){.formula-hint{font-size:9px}.line-items th,.line-items td{vertical-align:top}}
@media print{.mobile-bottom-nav,.sidebar,.topbar,.no-print{display:none!important}.content{margin:0!important;padding:0!important}.layout{display:block!important}.page{padding:0!important}.card{box-shadow:none!important;border:0!important;background:#fff!important;color:#111!important}.muted{color:#666!important}.table{color:#111!important}.table th{background:#f4f4f4!important;color:#111!important}}
/* PWA / app install branding */
.brand-mark img, .login-logo img { width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.app-install-btn[hidden] { display:none !important; }
@media (max-width:760px){
  .app-install-btn { min-height:40px; padding:0 10px; }
}
@media print {
  [data-install-app], .app-install-btn { display:none !important; }
}

/* SK Jaya Store sidebar / branding */
.brand-logo-wide{width:100%;padding:4px 10px 18px;display:flex;align-items:center}
.brand-logo-wide img{display:block;width:190px;max-width:100%;height:auto}
.sidebar{background:linear-gradient(180deg,rgba(13,16,23,.97),rgba(17,20,28,.94));border-color:rgba(17,19,22,.06);box-shadow:0 22px 60px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.04)}
.sidebar-label{color:#8e97aa}
.nav-link{min-height:44px}
.nav-link.active{background:linear-gradient(90deg,rgba(194,151,78,.32),rgba(194,151,78,.08));border-color:rgba(216,181,122,.28);box-shadow:inset 3px 0 0 #caa266,0 10px 24px rgba(0,0,0,.12)}
.nav-link.active .nav-icon{color:#e4c281}
@media(max-width:760px){
  .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important;border-radius:14px}
  .table-wrap .table{min-width:max-content!important}
  .table-wrap::after{content:'Geser kiri/kanan untuk melihat kolom';display:block;color:#778092;font-size:10px;padding:7px 2px 0}
  .brand-logo-wide img{width:170px}
}
@media print{
  .mobile-bottom-nav,.sidebar,.topbar,.no-print,#confirm-modal{display:none!important}
  .content{margin:0!important;padding:0!important}
  .layout{display:block!important}
  .page{padding:0!important}
  .card{box-shadow:none!important;border:0!important;background:#fff!important;color:#111!important}
  .table{color:#111!important}
  .table th{background:#f5f5f5!important;color:#111!important}
  .table-wrap::after{display:none!important}
}

/* =========================================================
   SK JAYA STORE FINAL THEME
   ========================================================= */
body:not(.store-page){
  background:#f4f5f7;
  color:#1b1e25;
}
body:not(.store-page) .content{color:#1b1e25}
body:not(.store-page) .topbar{
  background:rgba(255,255,255,.92);
  border-color:rgba(26,29,36,.07);
  box-shadow:0 12px 28px rgba(21,26,35,.08);
}
body:not(.store-page) .topbar .eyebrow{color:#9a7a49}
body:not(.store-page) .topbar strong{color:#16181d}
body:not(.store-page) .page-head h2,body:not(.store-page) .page-head h3{color:#17191f}
body:not(.store-page) .muted{color:#737985}
body:not(.store-page) .card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(22,25,31,.07);
  box-shadow:0 12px 28px rgba(27,34,45,.06);
  color:#20242b;
}
body:not(.store-page) .table th{background:#f6f7f9;color:#626873}
body:not(.store-page) .table td{border-color:#eceef2;color:#272b32}
body:not(.store-page) input,body:not(.store-page) select,body:not(.store-page) textarea{
  background:#fff;color:#262a30;border-color:#dfe2e7;
}
body:not(.store-page) input:focus,body:not(.store-page) select:focus,body:not(.store-page) textarea:focus{
  border-color:rgba(181,139,64,.55);box-shadow:0 0 0 4px rgba(181,139,64,.10);outline:none;
}
body:not(.store-page) .btn-primary{background:linear-gradient(135deg,#c69b51,#a9772f);color:#fff;border-color:transparent;box-shadow:0 10px 20px rgba(169,122,47,.18)}
body:not(.store-page) .btn-light{background:#fff;color:#4b4f57;border-color:#e0e3e8}
body:not(.store-page) .stats .value{color:#17191f}
body:not(.store-page) .badge-green{background:#eaf8f1;color:#218152;border-color:#cfeedd}
body:not(.store-page) .badge-red{background:#fff0f0;color:#bd4f4f;border-color:#f3d1d1}
body:not(.store-page) .glass-inner{background:#f8f9fa;border-color:#eceef2}
body:not(.store-page) .formula-live{background:linear-gradient(135deg,#fffaf0,#fff);border-color:rgba(198,155,81,.18)}
.sidebar{background:linear-gradient(180deg,#14161b 0%,#1b1e24 100%)!important;border-color:rgba(211,170,100,.12)!important}
.brand-logo-wide{padding:4px 8px 20px!important;justify-content:flex-start}
.brand-logo-wide img{width:182px!important;max-width:100%;height:auto;filter:drop-shadow(0 12px 20px rgba(0,0,0,.25))}
.sidebar-label{color:#818896!important;font-size:9px!important;letter-spacing:.18em!important}
.nav-link{color:#b8beca!important;border-color:transparent!important}
.nav-link:hover{background:rgba(255,255,255,.05)!important;color:#fff!important}
.nav-link.active{background:linear-gradient(90deg,rgba(194,151,78,.38),rgba(194,151,78,.12))!important;color:#fff!important;border-color:rgba(217,179,110,.26)!important;box-shadow:inset 3px 0 0 #c79e57,0 10px 24px rgba(0,0,0,.16)!important}
.nav-link.active .nav-icon{color:#e6c583!important}
.sidebar-foot{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.08)!important}

/* Desktop admin layout closer to the supplied mockup */
@media (min-width:761px){
  body:not(.store-page) .sidebar{width:238px;margin:16px 14px;height:calc(100vh - 32px);top:16px;border-radius:22px;padding:16px 11px}
  body:not(.store-page) .content{padding-bottom:34px}
  body:not(.store-page) .topbar{margin:16px 20px 0;height:68px;border-radius:18px;top:16px}
  body:not(.store-page) .content>section,body:not(.store-page) .content>.page{padding:22px 20px}
  body:not(.store-page) .page-head{margin-bottom:18px}
  body:not(.store-page) .stats{gap:12px}
  body:not(.store-page) .stat{min-height:126px;border-radius:16px}
}

/* Mobile: keep the floating bar visually detached and print clean */
@media(max-width:760px){
  body:not(.store-page){background:#f4f5f7}
  body:not(.store-page) .topbar{background:#fff!important;border-color:#e8eaee!important;box-shadow:0 8px 18px rgba(21,26,35,.06)!important}
  body:not(.store-page) .card{border-radius:18px}
  body:not(.store-page) .page-head h2{font-size:22px}
}
@media print{
  body:not(.store-page){background:#fff!important}
  body:not(.store-page) .page-head{margin-bottom:12px}
}

/* =========================================================
   SK JAYA STORE SIDEBAR FINAL — scrollable & reference-like
   ========================================================= */
@media (min-width:761px){
  body:not(.store-page) .sidebar{
    width:258px!important;
    height:calc(100vh - 24px)!important;
    margin:12px!important;
    padding:18px 12px 14px!important;
    position:sticky!important;
    top:12px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-width:thin;
    scrollbar-color:rgba(209,171,98,.55) transparent;
    scrollbar-gutter:stable;
    align-self:flex-start;
  }
  body:not(.store-page) .sidebar::-webkit-scrollbar{width:7px}
  body:not(.store-page) .sidebar::-webkit-scrollbar-track{background:transparent}
  body:not(.store-page) .sidebar::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(214,181,122,.45),rgba(214,181,122,.20));border-radius:99px}
  body:not(.store-page) .brand-logo-wide{
    min-height:176px!important;
    padding:6px 10px 18px!important;
    justify-content:center!important;
    align-items:center!important;
  }
  body:not(.store-page) .brand-logo-wide img{
    width:170px!important;
    max-width:100%!important;
    max-height:145px!important;
    object-fit:contain!important;
  }
  body:not(.store-page) .sidebar-label{margin-top:4px!important;padding-top:14px!important}
  body:not(.store-page) .sidebar nav{gap:5px!important}
  body:not(.store-page) .nav-link{min-height:46px!important;padding:11px 13px!important;border-radius:13px!important}
  body:not(.store-page) .sidebar-foot{margin-top:18px!important;flex:0 0 auto!important}
}
@media print{
  body:not(.store-page) .sidebar{display:none!important}
}

/* =========================================================
   MOBILE OPTIMIZATION — keep desktop unchanged
   ========================================================= */
@media (max-width:760px){
  html, body:not(.store-page){
    max-width:100%;
    overflow-x:hidden;
  }

  /* Clean white mobile surface for admin/cashier pages */
  body:not(.store-page){
    background:#f7f7f8 !important;
    color:#20242a !important;
  }
  body:not(.store-page):before{display:none !important;}
  body:not(.store-page) .ambient{display:none !important;}

  body:not(.store-page) .glass-panel,
  body:not(.store-page) .glass-inner,
  body:not(.store-page) .card{
    background:#fff !important;
    color:#20242a !important;
    border-color:#e7e8eb !important;
    box-shadow:0 8px 24px rgba(20,24,31,.06) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  body:not(.store-page) .topbar{
    height:58px;
    margin:8px 8px 0;
    padding:0 10px;
    border-radius:16px;
    top:8px;
    gap:8px;
    box-shadow:0 7px 20px rgba(20,24,31,.07) !important;
  }
  body:not(.store-page) .topbar .eyebrow{
    font-size:7px;
    color:#8b919a;
    margin-bottom:2px;
  }
  body:not(.store-page) .topbar strong{
    display:block;
    max-width:52vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
    color:#20242a;
  }
  body:not(.store-page) .topbar-right{gap:5px;white-space:nowrap;}
  body:not(.store-page) .topbar-date{font-size:8px;color:#7b818b;}
  body:not(.store-page) .live-dot{width:6px;height:6px;}

  body:not(.store-page) .content>section,
  body:not(.store-page) .content>.page{
    padding:14px 8px;
  }
  body:not(.store-page) .content{
    min-width:0;
    padding-bottom:104px !important;
  }

  body:not(.store-page) .page-head{
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between;
    gap:8px;
    margin-bottom:12px;
    min-width:0;
  }
  body:not(.store-page) .page-head>div{
    min-width:0;
    flex:1 1 auto;
  }
  body:not(.store-page) .page-head h2{
    font-size:17px;
    line-height:1.2;
  }
  body:not(.store-page) .page-head h3{
    font-size:14px;
  }
  body:not(.store-page) .page-head .muted{
    display:block;
    font-size:9px;
    line-height:1.45;
  }

  /* Keep compact actions on one line instead of becoming oversized blocks */
  body:not(.store-page) .btn{
    min-width:0 !important;
    width:auto !important;
    max-width:100%;
    padding:8px 10px;
    min-height:34px;
    border-radius:9px;
    font-size:10px;
    line-height:1.1;
    white-space:nowrap;
  }
  body:not(.store-page) .form-actions,
  body:not(.store-page) .actions{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    min-width:0;
  }
  body:not(.store-page) .form-actions .btn,
  body:not(.store-page) .actions .btn{
    flex:0 1 auto;
  }

  /* Avoid mobile overflow in cards, forms and long labels */
  body:not(.store-page) .card{
    padding:13px;
    border-radius:15px;
    min-width:0;
    overflow:visible;
  }
  body:not(.store-page) .form-grid{
    grid-template-columns:minmax(0,1fr);
    gap:10px;
  }
  body:not(.store-page) .form-row{
    min-width:0;
    gap:5px;
  }
  body:not(.store-page) .form-row label{
    font-size:10px;
    color:#5f6670;
  }
  body:not(.store-page) .form-row input,
  body:not(.store-page) .form-row select,
  body:not(.store-page) .form-row textarea{
    width:100%;
    min-width:0;
    padding:9px 10px;
    min-height:36px;
    border-radius:9px;
    background:#fff !important;
    color:#20242a !important;
    border-color:#dfe2e6 !important;
    box-shadow:none !important;
    font-size:11px;
  }
  body:not(.store-page) .form-row textarea{min-height:76px;}
  body:not(.store-page) .form-row select option{
    background:#fff;
    color:#20242a;
  }
  body:not(.store-page) .muted{color:#777e88;}
  body:not(.store-page) .alert{
    margin:10px 8px 0;
    padding:10px 11px;
    border-radius:10px;
    font-size:10px;
    background:#fff !important;
    border:1px solid #e4e6e9;
    box-shadow:0 6px 18px rgba(20,24,31,.05);
  }

  /* Dashboard/stat cards: compact 2-column layout on phones */
  body:not(.store-page) .stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  body:not(.store-page) .stat .label{font-size:9px;}
  body:not(.store-page) .stat .value{
    font-size:17px;
    margin-top:5px;
  }
  body:not(.store-page) .stat .hint{font-size:8px;}

  body:not(.store-page) .two,
  body:not(.store-page) .three{
    grid-template-columns:minmax(0,1fr);
  }

  /* Tables remain desktop-like; only the table viewport scrolls horizontally */
  body:not(.store-page) .table-wrap{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto !important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    border-radius:10px;
  }
  body:not(.store-page) .table{
    width:max-content;
    min-width:100%;
    font-size:10px;
  }
  body:not(.store-page) .table th,
  body:not(.store-page) .table td{
    padding:8px 8px;
    white-space:nowrap;
  }
  body:not(.store-page) .table th{font-size:8px;}

  /* Transaction line items: allow the row to scroll instead of being cut off */
  body:not(.store-page) .line-items{
    width:100%;
    min-width:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  body:not(.store-page) .line-items .prod{
    min-width:210px;
    font-size:10px;
  }

  /* Smaller mobile bottom navigation */
  body:not(.store-page) .mobile-bottom-inner{
    height:66px;
    padding:7px 6px 5px;
    border-radius:22px;
  }
  body:not(.store-page) .mobile-bottom-item{
    height:50px;
    gap:3px;
    border-radius:14px;
  }
  body:not(.store-page) .mobile-bottom-icon,
  body:not(.store-page) .mobile-bottom-icon svg{
    width:20px;
    height:20px;
  }
  body:not(.store-page) .mobile-bottom-label{font-size:8px;}
  body:not(.store-page) .mobile-bottom-item.nav-primary{
    width:62px;
    height:62px;
    margin-top:-13px;
    border-radius:20px;
  }
  body:not(.store-page) .mobile-bottom-item.nav-primary .mobile-bottom-icon,
  body:not(.store-page) .mobile-bottom-item.nav-primary .mobile-bottom-icon svg{
    width:25px;
    height:25px;
  }
}

/* Very narrow phones */
@media (max-width:390px){
  body:not(.store-page) .content>section,
  body:not(.store-page) .content>.page{padding-left:6px;padding-right:6px;}
  body:not(.store-page) .topbar{margin-left:6px;margin-right:6px;}
  body:not(.store-page) .page-head h2{font-size:15px;}
  body:not(.store-page) .btn{padding:7px 8px;font-size:9px;}
  body:not(.store-page) .card{padding:11px;}
  body:not(.store-page) .stats{gap:6px;}
  body:not(.store-page) .stat .value{font-size:15px;}
}



/* SK Jaya Store modern notification UI */
#nv-notify-stack{position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;z-index:99999;display:flex;flex-direction:column;gap:9px;width:min(360px,calc(100vw - 28px));pointer-events:none}.nv-toast{pointer-events:auto;display:grid;grid-template-columns:40px 1fr 24px;gap:10px;align-items:center;width:100%;padding:11px;border:1px solid #e6dfd5;border-radius:16px;background:rgba(255,255,255,.97);box-shadow:0 18px 50px rgba(36,28,18,.18);transform:translateY(-10px);opacity:0;transition:.25s ease;text-align:left;cursor:pointer;font:inherit}.nv-toast.show{transform:none;opacity:1}.nv-toast-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:#171717;color:#d8b06f}.nv-toast-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.nv-toast-copy{min-width:0}.nv-toast-copy strong{display:block;font-size:11px;color:#1d1d1d}.nv-toast-copy span{display:block;font-size:9px;color:#777;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nv-toast-close{font-size:18px;color:#9a9a9a;text-align:center}@media(max-width:600px){#nv-notify-stack{top:max(9px,env(safe-area-inset-top));right:9px;width:calc(100vw - 18px)}}

.ui-emoji-svg{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.notif-enable-btn{border:1px solid #e7dfd4;background:#fff;border-radius:12px;padding:9px 12px;font-size:10px;font-weight:800;color:#5c4d3b;display:inline-flex;align-items:center;gap:7px;cursor:pointer;box-shadow:0 6px 18px rgba(64,48,26,.06)}.notif-enable-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.admin-notif-btn{width:38px;height:38px;border:1px solid #e2e2e2;background:#fff;border-radius:12px;display:grid;place-items:center;color:#555;cursor:pointer}.admin-notif-btn:hover{background:#f8f8f8}

/* Modern SVG notification icon */
.notif-enable-btn,.admin-notif-btn{position:relative;overflow:visible}.notif-icon-svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle}.notif-spark{stroke-width:1.7}.notif-status-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#d4af37;border:2px solid #fff;top:-2px;right:-2px;box-shadow:0 0 0 2px rgba(212,175,55,.16);animation:notifPulse 2s infinite}.admin-notif-btn .notif-status-dot{border-color:#161616}@keyframes notifPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.72}}

/* Final mobile fixes: notification state and cart SVG sizing */
.notification-active .notif-status-dot,.notification-active .notif-dot{display:none!important}
@media(max-width:620px){
  .nav-actions{gap:6px!important}
  .nav-action-bell,.nav-action-cart{width:38px!important;height:38px!important;min-width:38px!important;padding:0!important}
  .nav-action-bell .nav-action-icon,.nav-action-cart .nav-action-icon{width:20px!important;height:20px!important;display:grid!important;place-items:center!important;position:relative!important}
  .nav-action-bell svg,.nav-action-cart svg{width:20px!important;height:20px!important;min-width:20px!important;max-width:20px!important;display:block!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  .nav-action-cart .cart-badge{position:absolute!important;right:-8px!important;top:-8px!important;z-index:2!important}
  .nav-action-label{display:none!important}
  .notif-enable-btn svg,.quick-actions svg,.account-page .ui-emoji-svg{width:16px!important;height:16px!important;max-width:16px!important;flex:0 0 16px!important}
}


/* Final notification bell SVG */
.admin-notif-btn .notif-bell-svg,
.nav-action-bell .notif-bell-svg{
  width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;
  display:block!important;fill:none!important;stroke:currentColor!important;
  stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important;
  overflow:visible!important;
}
.admin-notif-btn .notif-bell-svg path{fill:none!important;stroke:currentColor!important}
@media(max-width:620px){
  .admin-notif-btn{width:36px!important;height:36px!important;min-width:36px!important;padding:0!important;border-radius:10px!important}
  .admin-notif-btn .notif-bell-svg{width:18px!important;height:18px!important}
  .admin-notif-btn .notif-status-dot{width:6px!important;height:6px!important;right:1px!important;top:1px!important;border-width:1.5px!important}
}