[hidden]{display:none!important}
/* ST POS — maroon sidebar workspace + MyanSan-inspired shop themes (wine, garden, lagoon) */
:root,html[data-shop-theme="clean"],html[data-shop-theme="pheel"]{--brand:#0f172a;--brand-d:#1e293b;--brand-dd:#0b0f17;--rose:#e2e8f0;--rose-2:#f1f5f9;--canvas:#f8fafc;--card:#fff;--surface-2:#f1f5f9;--line:rgba(15,23,42,0.08);--line-strong:rgba(15,23,42,0.16);--ink:#0f172a;--muted:#64748b;--blue:#0066ff;--blue-bg:#eff6ff;--green:#10b981;--amber:#f59e0b;--red:#ef4444;--radius:16px;--shadow:0 4px 20px -2px rgba(15,23,42,0.05);--shadow-dock:0 14px 44px -8px rgba(15,23,42,0.12);--ease-out:cubic-bezier(0.16,1,0.3,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1);--luxury-aura:rgba(15,23,42,0.18);--luxury-sheen:rgba(255,255,255,0.40);--luxury-glow:rgba(59,130,246,0.32);--luxury-card-aura:rgba(15,23,42,0.08);--popover-bg:#ffffff;--popover-ink:#0f172a;--popover-muted:#64748b;--popover-line:rgba(15,23,42,0.12);--popover-hover:#f1f5f9;--toast-bg:#0f172a;--toast-ink:#ffffff;--toast-border:rgba(255,255,255,0.14);font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Pyidaungsu","Noto Sans Myanmar","Padauk",sans-serif;color:var(--ink);}
html[data-shop-theme="wine"]{--brand:#8c2349;--brand-d:#6e1a39;--brand-dd:#5a1430;--rose:#f8dfe7;--rose-2:#fcedf2;--canvas:#faf5f6;--card:#fff;--line:#efe2e6;--ink:#2b1c22;--muted:#7d6a71;--green:#1f8a5b;--amber:#b7791f;--red:#c0392b;--radius:14px;--shadow:0 1px 2px #5a143008,0 6px 24px #5a14300d;--ease-out:cubic-bezier(0.16,1,0.3,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1);--ease-soft:cubic-bezier(0.4,0,0.2,1);--luxury-aura:rgba(140,35,73,0.22);--luxury-sheen:rgba(255,255,255,0.48);--luxury-glow:rgba(225,29,72,0.36);--luxury-card-aura:rgba(90,20,48,0.11);--popover-bg:#ffffff;--popover-ink:#2b1c22;--popover-muted:#7d6a71;--popover-line:#efe2e6;--popover-hover:#fcedf2;--toast-bg:#5a1430;--toast-ink:#ffffff;--toast-border:#8c2349;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Pyidaungsu","Noto Sans Myanmar","Padauk",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--ink);}
html[data-shop-theme="garden"]{--brand:#295F45;--brand-d:#173F32;--brand-dd:#102D24;--rose:#DCEB8A;--rose-2:#eef5c8;--canvas:#FBF7EA;--line:#e4dfd0;--ink:#172921;--muted:#5c6e64;--luxury-aura:rgba(41,95,69,0.22);--luxury-sheen:rgba(255,255,255,0.48);--luxury-glow:rgba(16,185,129,0.36);--luxury-card-aura:rgba(23,63,50,0.10);--popover-bg:#ffffff;--popover-ink:#172921;--popover-muted:#5c6e64;--popover-line:#e4dfd0;--popover-hover:#eef5c8;--toast-bg:#173F32;--toast-ink:#ffffff;--toast-border:#295F45;}
html[data-shop-theme="lagoon"]{--brand:#1E5E7E;--brand-d:#12344A;--brand-dd:#0c2434;--rose:#BDE7EC;--rose-2:#dff4f7;--canvas:#F6F7F1;--line:#dde3e5;--ink:#132632;--muted:#5a6e79;--luxury-aura:rgba(30,94,126,0.22);--luxury-sheen:rgba(255,255,255,0.48);--luxury-glow:rgba(6,182,212,0.36);--luxury-card-aura:rgba(18,52,74,0.10);--popover-bg:#ffffff;--popover-ink:#132632;--popover-muted:#5a6e79;--popover-line:#dde3e5;--popover-hover:#dff4f7;--toast-bg:#12344A;--toast-ink:#ffffff;--toast-border:#1E5E7E;}
html[data-shop-theme="glassy"]{--brand:#4f46e5;--brand-d:#312e81;--brand-dd:#0b0f1f;--rose:#e0e7ff;--rose-2:rgba(238,242,255,0.88);--canvas:#eef2ff;--card:rgba(255,255,255,0.72);--surface-2:rgba(255,255,255,0.62);--line:rgba(255,255,255,0.78);--line-strong:rgba(99,102,241,0.22);--ink:#0f172a;--muted:#475569;--blue:#4f46e5;--blue-bg:#eef2ff;--green:#10b981;--amber:#f59e0b;--red:#ef4444;--luxury-gold:#f59e0b;--luxury-rose:#ec4899;--radius:20px;--shadow:0 12px 36px -8px rgba(30,27,75,0.12),inset 0 1px 0 rgba(255,255,255,0.94);--shadow-dock:0 18px 48px -10px rgba(49,46,129,0.22);--ease-out:cubic-bezier(0.16,1,0.3,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1);--luxury-aura:rgba(99,102,241,0.30);--luxury-sheen:rgba(255,255,255,0.65);--luxury-glow:rgba(236,72,153,0.42);--luxury-card-aura:rgba(49,46,129,0.16);--popover-bg:#ffffff;--popover-ink:#0f172a;--popover-muted:#475569;--popover-line:rgba(99,102,241,0.20);--popover-hover:rgba(238,242,255,0.92);--toast-bg:#1e1b4b;--toast-ink:#ffffff;--toast-border:rgba(99,102,241,0.45);}
html[data-shop-theme="glassy-dark"]{--brand:#6366f1;--brand-d:#4f46e5;--brand-dd:#1e1b4b;--rose:rgba(99,102,241,0.24);--rose-2:rgba(30,41,59,0.72);--canvas:#030712;--card:rgba(15,23,42,0.82);--surface-2:rgba(30,41,59,0.75);--line:rgba(255,255,255,0.11);--line-strong:rgba(99,102,241,0.42);--ink:#f8fafc;--muted:#94a3b8;--blue:#38bdf8;--blue-bg:rgba(56,189,248,0.15);--green:#10b981;--amber:#f59e0b;--red:#ef4444;--luxury-gold:#f59e0b;--luxury-rose:#ec4899;--radius:20px;--shadow:0 16px 42px -8px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,255,255,0.15);--shadow-dock:0 18px 48px -10px rgba(0,0,0,0.85);--ease-out:cubic-bezier(0.16,1,0.3,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1);--luxury-aura:rgba(99,102,241,0.38);--luxury-sheen:rgba(255,255,255,0.55);--luxury-glow:rgba(56,189,248,0.48);--luxury-card-aura:rgba(0,0,0,0.75);--popover-bg:#0f172a;--popover-ink:#f8fafc;--popover-muted:#94a3b8;--popover-line:rgba(255,255,255,0.14);--popover-hover:rgba(30,41,59,0.92);--toast-bg:#1e293b;--toast-ink:#f8fafc;--toast-border:rgba(99,102,241,0.55);color:var(--ink);}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{margin:0;height:100%;background:var(--canvas);overflow-x:hidden!important;max-width:100vw!important}
body{margin:0;height:100%;height:100dvh;background:var(--canvas);overflow:hidden;overflow-x:hidden!important;max-width:100vw!important;width:100%;font-size:14px;line-height:1.5;padding-top:env(safe-area-inset-top,0px)}
#app{height:100%;height:100dvh;overflow-y:auto;overflow-x:hidden!important;max-width:100vw!important;display:flex;flex-direction:column}
#app:has(.shell){overflow:hidden;overflow-x:hidden!important}
button,input,select{font:inherit;color:inherit;max-width:100%}a{color:var(--brand)}
.ico, svg.ico{width:18px;height:18px;display:block;flex:none;vertical-align:middle}
.loading{display:grid;place-items:center;min-height:100dvh;color:var(--muted)}
.muted{color:var(--muted)}.mt{margin-top:20px}

/* Luxury Minimal Scrollbars (sleek frosted rails, zero visual clutter) */
*{scrollbar-width:thin;scrollbar-color:rgba(100,90,98,0.18) transparent}
*::-webkit-scrollbar{width:5px;height:5px}
*::-webkit-scrollbar-track{background:transparent;border-radius:999px}
*::-webkit-scrollbar-corner{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(100,90,98,0.18);border-radius:999px;border:1px solid transparent;background-clip:content-box;transition:background-color .2s ease}
*:hover::-webkit-scrollbar-thumb{background:rgba(100,90,98,0.34);background-clip:content-box}
*::-webkit-scrollbar-thumb:hover,*::-webkit-scrollbar-thumb:active{background:var(--brand);background-clip:content-box}
.section-tabs,.os-dock,.segmented,.chips,.chip-strip,.rush-chart-wrap{scrollbar-width:none;-ms-overflow-style:none}
.section-tabs::-webkit-scrollbar,.os-dock::-webkit-scrollbar,.segmented::-webkit-scrollbar,.chips::-webkit-scrollbar,.chip-strip::-webkit-scrollbar,.rush-chart-wrap::-webkit-scrollbar{display:none;width:0;height:0}
.nav{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.16) transparent}
.nav::-webkit-scrollbar{width:4px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.16);border-radius:999px}
.nav:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.34)}

/* buttons */
button,.button{cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 14px;display:inline-flex;align-items:center;gap:7px;font-weight:600;text-decoration:none;transition:transform .14s var(--ease-out),background .16s,border-color .16s,box-shadow .16s}
button:hover:not(:disabled),.button:hover:not(.disabled){border-color:#e1c6cf;background:var(--rose-2);transform:translateY(-1px);box-shadow:0 3px 10px #5a14300f}
button:active:not(:disabled),.button:active:not(.disabled){transform:scale(0.965);box-shadow:none}
button:disabled,.button.disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.primary{background:var(--brand);border-color:var(--brand);color:#fff}.primary:hover:not(:disabled){background:var(--brand-d);border-color:var(--brand-d);box-shadow:0 4px 14px #8c23493d}
.outline{background:#fff}.ghost{background:transparent;border-color:transparent}.danger{color:var(--red);border-color:#f0c6c0}
.small{padding:5px 10px;font-size:12.5px;border-radius:8px}.full{width:100%;justify-content:center;padding:13px}
.icon-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  max-width: 38px;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px;
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  font-size: 16px;
  flex: 0 0 38px !important;
  box-sizing: border-box;
  gap: 0 !important;
}
.icon-btn .ico,
.icon-btn svg {
  display: block !important;
  margin: 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}
.pill-btn {
  border-radius: 9999px;
  padding: 0 12px;
  font-size: 12.5px;
  height: 38px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  flex-shrink: 0;
  box-sizing: border-box;
}
.pill-btn .ico,
.pill-btn svg {
  display: block !important;
  margin: 0 !important;
  flex: none !important;
}
.pill-btn span {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

/* layout */
.shell{display:flex;height:100%;height:100dvh;width:100%;overflow:hidden;position:relative}
.sidebar{background:linear-gradient(180deg,var(--brand-d),var(--brand-dd));color:#f6e6ec;display:flex;flex-direction:column;position:relative;top:0;bottom:0;left:0;width:252px;flex:0 0 252px;height:100%;height:100dvh;padding:12px 10px calc(12px + env(safe-area-inset-bottom,0px));overflow:hidden;z-index:30;border-right:1px solid #ffffff12;transition:width .2s cubic-bezier(.4,0,.2,1),flex-basis .2s cubic-bezier(.4,0,.2,1)}
.shell.collapsed .sidebar{width:72px;flex:0 0 72px}
.brand{display:flex;align-items:center;gap:10px;padding:4px 6px 10px}
.brandmark{width:36px;height:36px;border-radius:10px;background:#fff;color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:13.5px;flex:none;letter-spacing:.5px;box-shadow:0 2px 8px #00000024;overflow:hidden}
.brandmark-img{width:100%;height:100%;object-fit:cover;display:block}
.logo-preview-box{width:64px;height:64px;border-radius:14px;background:#fff;border:1.5px dashed var(--line);display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.logo-preview-placeholder{font-size:10px;color:var(--muted);text-align:center;line-height:1.2}
.logo-preview-placeholder .ico{width:20px;height:20px;margin:0 auto 2px;color:var(--muted)}
.brand-text strong{display:block;color:#fff;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.brand-text small,.brand small{display:block;font-size:9.5px;letter-spacing:1.8px;opacity:.72}
.nav-tools{padding:0 4px 8px}
.nav-search{position:relative;display:flex;align-items:center}
.nav-search .ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:#f6e6ec99;pointer-events:none;display:block}
.nav-search input{width:100%;padding:6px 10px 6px 30px;border-radius:9px;border:1px solid #ffffff1f;background:#ffffff12;color:#fff;font-size:12px;outline:0;transition:background .15s,border-color .15s}
.nav-search input::placeholder{color:#f6e6ec85}
.nav-search input:focus{background:#ffffff21;border-color:#ffffff45}
.nav{display:flex;flex-direction:column;gap:8px;overflow-y:auto;overflow-x:hidden;flex:1;margin:0 -4px;padding:2px 4px 6px;scrollbar-width:thin;scrollbar-color:#ffffff24 transparent}
.nav::-webkit-scrollbar{width:4px}.nav::-webkit-scrollbar-thumb{background:#ffffff24;border-radius:99px}
.nav-group{display:flex;flex-direction:column;gap:1px}
.nav-group-head{background:transparent;border:0;color:#f6e6ec9e;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;padding:5px 9px 3px;display:flex;align-items:center;justify-content:space-between;border-radius:7px;width:100%}
.nav-group-head:hover:not(:disabled){background:#ffffff0d;color:#fff}
.nav-group-head .grp-chev{width:13px;height:13px;transform:rotate(-90deg);transition:transform .18s;opacity:.75}
.nav-group.group-closed .nav-group-head .grp-chev{transform:rotate(180deg)}
.nav-group.group-closed .nav-group-items{display:none}
.nav-group-items{display:flex;flex-direction:column;gap:2px}
.nav-group-items button,.side-link{background:transparent;border:0;color:#f3dfe6;justify-content:flex-start;padding:7.5px 10px;border-radius:9px;font-weight:500;font-size:13px;white-space:nowrap;text-decoration:none;display:flex;align-items:center;gap:10px;width:100%;position:relative}
.nav-group-items button .nav-label{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis}
.nav-group-items button:hover:not(:disabled),.side-link:hover{background:#ffffff14;color:#fff}
.nav-group-items button.active{background:var(--rose);color:var(--brand-d);font-weight:700;box-shadow:0 2px 10px #00000024}
.nav-group-items button.active::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3.5px;border-radius:0 4px 4px 0;background:var(--brand)}
.nav-badge{margin-left:auto;padding:1px 6.5px;border-radius:999px;font-size:10.5px;font-weight:800;background:#ffffff24;color:#fff;line-height:1.4}
.nav-badge.amber{background:#f59e0b;color:#fff}.nav-badge.red{background:#ef4444;color:#fff}
.nav-group-items button.active .nav-badge{background:var(--brand);color:#fff}
.nav-empty{font-size:12px;color:#f6e6ec99;text-align:center;padding:16px 8px;margin:0}
.side-foot{border-top:1px solid #ffffff1c;padding-top:8px;margin-top:auto;flex-shrink:0;display:flex;flex-direction:column;gap:6px}
.who{display:flex;align-items:center;gap:9px;padding:4px 6px}
.avatar{width:30px;height:30px;border-radius:50%;background:#ffffff26;color:#fff;display:grid;place-items:center;font-weight:700;font-size:12.5px;flex:none}
.who-text{min-width:0;flex:1}.who-text strong{display:block;color:#fff;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.who-text small{display:block;font-size:10.5px;opacity:.75;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:4px}
.side-act{background:#ffffff12;border:1px solid #ffffff17;color:#f6e6ec;border-radius:8px;padding:6px 6px;font-size:11px;font-weight:600;justify-content:center;gap:5px;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap;overflow:hidden}
.side-act .ico{width:15px;height:15px}
.side-act:hover:not(:disabled){background:#ffffff24;border-color:#ffffff38;color:#fff}
.side-act.danger-act:hover:not(:disabled){background:#ef444438;border-color:#ef444480;color:#ffd7d5}
.collapsed .nav-label,.collapsed .brand-text,.collapsed .who-text,.collapsed .nav-tools,.collapsed .nav-group-head{display:none}
.collapsed .nav-group.group-closed .nav-group-items{display:flex}
.collapsed .nav-group-items button{justify-content:center;padding:9px}
.collapsed .nav-badge, .collapsed .tab-badge{position:absolute!important;top:5px!important;right:8px!important;width:8px!important;height:8px!important;min-width:0!important;max-width:8px!important;padding:0!important;border-radius:50%!important;font-size:0!important;line-height:0!important;color:transparent!important;border:1.5px solid #0b0f17!important;display:block!important;overflow:hidden!important;}
.collapsed .nav-badge.amber, .collapsed .tab-badge.amber{background:#f59e0b!important}
.collapsed .nav-badge.red, .collapsed .tab-badge.red{background:#ef4444!important}
.collapsed .nav-badge.pro, .collapsed .tab-badge.pro{background:#0066ff!important}
.collapsed .nav-badge.pro_max, .collapsed .tab-badge.pro_max{background:#ec4899!important}
.collapsed .side-actions{grid-template-columns:1fr}
.collapsed .collapse-btn .ico{transform:rotate(180deg)}
.collapsed .who{justify-content:center;padding:4px 0}
.collapsed .brand{justify-content:center;padding:4px 0 12px}
.scrim{display:none}
.main{flex:1 1 0%;min-width:0;height:100%;height:100dvh;margin-left:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.shell.collapsed .main{margin-left:0}

/* top bar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 26px;background:#fffffff2;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.global-search{flex:1;max-width:440px;position:relative;display:flex;align-items:center}
.global-search>.ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:block}
.global-search input{width:100%;padding:9px 12px 9px 38px;border:1px solid var(--line);border-radius:10px;background:var(--canvas)}
.top-controls{margin-left:auto;display:flex;align-items:center;gap:8px}
.clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;padding:0 6px}.clock strong{font-size:13px}.clock small{font-size:10px;color:var(--muted);letter-spacing:.5px}
.pill{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;padding:0 4px 0 10px;background:#fff}
.pill select{border:0;background:transparent;padding:8px 4px;font-weight:600;font-size:12.5px;max-width:160px}
.dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px #22c55e26}
.dot-count{position:absolute;top:-5px;right:-5px;background:var(--brand);color:#fff;border-radius:999px;font-size:10px;min-width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0 4px;border:2px solid #fff}
.popover-host{position:relative}
.popover{position:absolute;top:calc(100% + 8px);left:0;width:min(380px,90vw);max-height:420px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px #5a143026;padding:6px;z-index:40}
.popover.right{left:auto;right:0}
.pop-title{margin:8px 10px 4px;font-size:10.5px;letter-spacing:1.4px;color:var(--muted);font-weight:700;text-transform:uppercase}
.pop-item{width:100%;border:0;background:transparent;justify-content:flex-start;text-align:left;font-weight:500;padding:9px 10px;border-radius:8px}
.pop-item small{color:var(--muted);font-weight:400}
.pop-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--amber)}.pop-dot.red{background:var(--red)}
.pop-empty{padding:14px;color:var(--muted);margin:0}

/* content */
.content{padding:22px 28px 60px;max-width:1360px;width:100%;min-width:0;margin:0 auto;box-sizing:border-box;overflow-x:clip!important;animation:pageIn .22s var(--ease-out)}
.section-tabs{position:relative!important;display:flex;align-items:center;gap:6px;padding:5px;margin-bottom:16px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow-x:auto;overflow-y:hidden;max-width:100%;width:100%;box-sizing:border-box;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.section-tabs::-webkit-scrollbar{display:none}
.sec-tab{border:0;background:transparent;color:var(--muted);padding:7px 13px;border-radius:9px;font-size:12.5px;font-weight:600;white-space:nowrap;flex:none;gap:7px;transition:transform .14s var(--ease-out),background .14s,color .14s,box-shadow .14s}
.sec-tab .ico{width:16px;height:16px}
.sec-tab:hover:not(:disabled){background:var(--rose-2);color:var(--ink);transform:translateY(-1px)}
.sec-tab:active:not(:disabled){transform:scale(0.96)}
.sec-tab.active{background:var(--brand);color:#fff;font-weight:700;box-shadow:0 2px 8px #5a143026}
.tab-badge{font-style:normal;padding:1px 6px;border-radius:999px;font-size:10.5px;font-weight:800;background:var(--rose-2);color:var(--brand-d)}
.tab-badge.amber{background:#fef3c7;color:#b45309}.tab-badge.red{background:#fee2e2;color:#b91c1c}
.sec-tab.active .tab-badge{background:#ffffff2e;color:#fff}
.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.eyebrow{font-size:11px;letter-spacing:2px;color:var(--muted);font-weight:700;margin:0 0 4px}
.page-heading h1{font-size:26px;margin:0;color:var(--ink);letter-spacing:-.3px;line-height:1.18}
.sub{color:var(--muted);margin:6px 0 0;max-width:680px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:20px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);min-width:0;transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),border-color .18s}
.stat:hover{transform:translateY(-2px);box-shadow:0 8px 24px #5a143014}
.stat-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.stat .label,.stat .stat-label{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:transparent!important;border:none!important;padding:0!important;box-shadow:none!important;border-radius:0!important;display:inline-block!important}
.stat-ico{width:32px;height:32px;border-radius:9px;background:var(--rose-2);color:var(--brand);display:grid;place-items:center;flex:none}
.stat .number{font-size:23px;font-weight:800;margin:8px 0 2px;letter-spacing:-.4px;overflow-wrap:anywhere}
.stat .note{font-size:12px;color:var(--muted);line-height:1.35}
.stat.featured{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;border-color:transparent}
.stat.featured .label,.stat.featured .note{color:#f6dbe4}.stat.featured .stat-ico{background:#ffffff26;color:#fff}
.stat.warn{border-color:#f0d3a8;background:#fffaf1}.stat.warn .stat-ico{background:#fdf0dc;color:var(--amber)}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;margin-bottom:20px}
.quick-btn{padding:11px 14px;border-radius:12px;background:#fff;justify-content:center;text-align:center;transition:transform .14s var(--ease-out),box-shadow .14s,background .14s}.quick-btn .ico{color:var(--brand)}
.quick-btn:hover:not(:disabled){transform:translateY(-1.5px);box-shadow:0 4px 14px #5a143012;background:var(--rose-2)}
.quick-btn:active:not(:disabled){transform:scale(0.965)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:18px;margin-bottom:24px}
.dummy-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.9fr);gap:18px;align-items:start;margin-bottom:24px}
.dummy-preview-col{min-width:0;width:100%}
.dummy-preview-box{padding:14px;background:var(--canvas);border-radius:12px;border:1px solid var(--line);overflow-x:auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;min-width:0;margin-bottom:24px}
.card:last-child{margin-bottom:0}
.grid > .card,.dummy-grid .card,.bento-grid-2 > .card,.register > .card,.steps > .card{margin-bottom:0}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card-head h2{font-size:15.5px;margin:0}.card-head p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.card-body{padding:16px 18px}.card-foot{padding:14px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:700;padding:11px 16px;background:#fcf8f9;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 16px;border-bottom:1px solid #f5ecef;vertical-align:middle}
tr:last-child td{border-bottom:0}tbody tr:hover{background:#fdf8fa}
td small{display:block;color:var(--muted);font-size:12px}
.money{font-weight:700;white-space:nowrap}
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--rose-2);color:var(--brand-d);text-transform:capitalize;white-space:nowrap}
.badge.green{background:#e5f5ec;color:var(--green)}.badge.amber{background:#fdf1dc;color:var(--amber)}.badge.red{background:#fbe5e2;color:var(--red)}.badge.gray{background:#efeef0;color:#6b6670}
.empty{text-align:center;padding:34px 18px;color:var(--muted)}
.empty-symbol{width:50px;height:50px;margin:0 auto 10px;border-radius:14px;background:var(--rose-2);color:var(--brand);display:grid;place-items:center}.empty-symbol .ico{width:24px;height:24px}
.empty h3{margin:0 0 4px;color:var(--ink);font-size:15px}.empty p{margin:0 0 14px}
.notice{background:var(--surface-2);border:1px solid var(--line);color:var(--ink);padding:12px 16px;border-radius:12px;margin-bottom:16px;box-shadow:var(--shadow)}
.notice p{margin:6px 0 0}
.error{background:#fbe5e2;color:var(--red);padding:12px 16px;border-radius:12px;margin-bottom:12px}
.form-error{color:var(--red);font-size:13px;min-height:1px;margin-top:6px}
.toolbar{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;margin-bottom:16px}
.search-box{position:relative;flex:1;min-width:min(100%,220px);max-width:460px;display:flex;align-items:center}
.search-box .ico{position:absolute;left:12px;color:var(--muted);pointer-events:none}
.search,.toolbar select,.copies{width:100%;padding:10px 12px 10px 38px;border:1px solid var(--line);border-radius:10px;background:#fff}
.toolbar select{width:auto;padding-left:12px}.copies{width:76px;padding:7px 10px}
.segmented{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px;max-width:100%;overflow-x:auto}
.segmented button{border:0!important;padding:7px 14px;font-size:12.5px;border-radius:9px;background:transparent!important;color:var(--muted);white-space:nowrap;font-weight:600;box-shadow:none!important;transform:none!important;transition:background .16s,color .16s}
.segmented button:hover:not(:disabled){background:var(--card)!important;color:var(--ink)!important;box-shadow:none!important;transform:none!important}
.segmented button.on,.segmented button.on:hover,.segmented button.on:focus{background:linear-gradient(135deg,var(--brand),var(--brand-d))!important;color:#fff!important;font-weight:700!important;box-shadow:0 4px 14px -2px var(--luxury-aura)!important}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600;background:#fff;transition:transform .14s var(--ease-out),background .14s,border-color .14s,box-shadow .14s;cursor:pointer}
.chip:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 3px 10px #5a14300f}
.chip:active:not(:disabled){transform:scale(0.95)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.summary-line{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;margin-top:22px}
.step{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out)}
.step:hover{transform:translateY(-2px);box-shadow:0 8px 24px #5a143012}
.step-number{font-weight:800;color:var(--brand);font-size:20px}.step h3{margin:0 0 4px;font-size:15px}.step p{margin:0 0 10px;color:var(--muted)}

/* categories & branches */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:14px;margin-bottom:24px}
.cat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-width:0;transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out),border-color .16s}
.cat-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #5a143017;border-color:#e6c8d3}
.cat-card:active{transform:scale(0.985)}
.cat-card h3{margin:6px 0 0;font-size:16px}.cat-card p{margin:0 0 4px;color:var(--muted);font-size:12.5px}.cat-card .actions{margin-top:8px}
.cat-ico{width:40px;height:40px;border-radius:11px;background:var(--rose-2);color:var(--brand);display:grid;place-items:center}

/* checkout */
.register{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:20px;align-items:start}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:11px}
.product{flex-direction:column;align-items:flex-start;text-align:left;padding:13px;border-radius:13px;gap:4px;background:#fff;min-height:142px;width:100%;min-width:0;cursor:pointer;transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out),border-color .16s}
.product:hover{transform:translateY(-2px);border-color:#dcb0c0;box-shadow:0 8px 22px #5a143018}
.product:active{transform:scale(0.965);box-shadow:none}
.product .tile{width:38px;height:38px;border-radius:10px;background:var(--rose);color:var(--brand-d);display:grid;place-items:center;font-weight:800;font-size:15px;margin-bottom:4px}
.product strong{font-size:13.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product small{color:var(--muted);font-weight:500;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.product .price{margin-top:auto;color:var(--brand);font-weight:800}
.basket{position:sticky;top:78px}
.basket-items{max-height:44vh;overflow:auto;padding:6px 18px}
.basket-line{padding:10px 0;border-bottom:1px solid #f5ecef}
.line-title{display:flex;justify-content:space-between;gap:10px}
.quantity{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.basket-total{padding:15px 18px;border-top:1px solid var(--line);background:#fcf8f9}
.total-row{display:flex;justify-content:space-between;padding:4px 0}
.total-row.grand{font-size:18px;font-weight:800;color:var(--brand-d);margin:4px 0 12px}

/* assistant */
.chat{display:flex;flex-direction:column;height:calc(100dvh - 280px);min-height:380px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.chat-log{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px;background:var(--surface-2)}
.msg{max-width:82%;padding:12px 16px;border-radius:16px;line-height:1.6;overflow-wrap:anywhere;font-size:13.5px;box-shadow:0 2px 8px rgba(0,0,0,0.04);transition:transform .18s var(--ease-spring),box-shadow .18s ease}
.msg:hover{transform:translateY(-1px)}
.msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#ffffff;border-bottom-right-radius:4px;box-shadow:0 6px 18px -4px var(--luxury-aura);font-weight:500}
.msg.bot{align-self:flex-start;background:var(--card);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px;box-shadow:0 4px 14px -2px rgba(0,0,0,0.05)}
.msg-tag{display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:1.2px;color:var(--brand);font-weight:800;margin-bottom:6px;text-transform:uppercase}
.msg-tag .ico{width:13px;height:13px;color:var(--brand)}
.chat .chips{padding:12px 18px 4px;margin:0;border-top:1px solid var(--line);overflow-x:auto;flex-wrap:nowrap;gap:8px;background:var(--card)}
.chat .chip{white-space:nowrap;flex:none;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);padding:6px 13px;border-radius:999px;font-size:12px;font-weight:600}
.chat-input{display:flex;gap:10px;padding:12px 18px 16px;background:var(--card)}
.chat-input input{flex:1;min-width:0;padding:11px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--ink);font-size:13.5px;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
.chat-input input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--rose);background:var(--card)}

/* barcodes */
.label-sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:10px;padding:16px}
.label-sheet .label{border:1px dashed #d9c3cb;border-radius:8px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:3px;break-inside:avoid;background:#fff}
.label-sheet .label strong{font-size:12px;text-align:center;line-height:1.2}
.bc{width:100%;height:44px;fill:#000}
.label-sheet .label .sku{font-family:ui-monospace,Consolas,monospace;font-size:11px;letter-spacing:1px}.label-sheet .label .lprice{font-weight:800;font-size:13px}

/* animations & keyframes */
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes modalPop{from{opacity:0;transform:scale(0.95) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,14px) scale(0.93)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes cartBump{0%{transform:scale(1)}30%{transform:scale(1.28)}60%{transform:scale(0.9)}100%{transform:scale(1)}}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.22);opacity:.85}}

/* dialog & forms */
dialog{border:0;border-radius:20px;}
dialog:has(.plan-grid), dialog:has(.plan-modal-body){width:min(1020px,95vw);}
dialog{border:0;border-radius:20px;padding:0;width:min(600px,94vw);max-height:90dvh;box-shadow:0 20px 70px #2b1c2240}
dialog[open]{animation:modalPop .24s var(--ease-spring)}
dialog::backdrop{background:#2b1c2266;backdrop-filter:blur(2px);animation:modalFade .18s ease-out}
.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid var(--line)}.dialog-head h2{margin:0;font-size:16.5px}
.dialog-body{padding:18px 20px;max-height:calc(90dvh - 64px);overflow-y:auto}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;flex-wrap:wrap}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:#5b4950;min-width:0}
.field input,.field select{width:100%;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:500;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--rose-2)}
.field.wide{grid-column:1/-1}
.toolbar .field{min-width:140px;flex:1}
.receipt{max-width:340px;margin:0 auto;font-size:13px}.receipt h2{text-align:center;margin:0 0 4px}.receipt td,.receipt th{padding:6px 4px}
#toast{display:none;position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--toast-bg,#0f172a)!important;color:var(--toast-ink,#ffffff)!important;border:1.5px solid var(--toast-border,rgba(255,255,255,0.15))!important;padding:10px 18px!important;border-radius:12px!important;font-family:inherit!important;font-size:13px!important;font-weight:600!important;line-height:1.4!important;letter-spacing:0.01em!important;z-index:10000!important;box-shadow:0 14px 38px -4px rgba(0,0,0,0.38)!important;max-width:min(92vw,440px)!important;text-align:center!important;white-space:normal!important;word-break:break-word!important;animation:toastIn .28s var(--ease-spring)!important}
.cart-bump{animation:cartBump .35s var(--ease-spring) !important}
.dot{animation:pulseDot 2.4s ease-in-out infinite}

/* login & registration */
.login{display:grid;grid-template-columns:1.05fr 1fr;min-height:100dvh;background:var(--canvas)}
.login-art{background:linear-gradient(160deg,var(--brand),var(--brand-dd));color:#fff;padding:44px;display:flex;flex-direction:column;justify-content:space-between}
.login-art .brand{font-weight:700;font-size:16px}.login-art .eyebrow{color:#f3cfdb}
.login-art h1{font-size:40px;line-height:1.1;margin:10px 0 16px}.login-art p{color:#f6dbe4;max-width:460px}.login-art footer{opacity:.7;font-size:12px}
.login-form{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px 16px calc(28px + env(safe-area-inset-bottom,0px));background:var(--canvas);min-width:0}
.login-box{width:100%;max-width:430px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 22px;box-shadow:var(--shadow)}
.login-box h1{font-size:24px;margin:2px 0 6px;line-height:1.2}.login-box>p{color:var(--muted);margin:0 0 12px;font-size:13px}
.login-mobile-brand{display:none;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.login-mobile-brand .brandmark{width:36px;height:36px;border-radius:10px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800}
.login-mobile-brand strong{display:block;font-size:14px;color:var(--ink)}
.login-mobile-brand small{font-size:10.5px;color:var(--muted);letter-spacing:1px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--rose-2);padding:4px;border-radius:12px;margin:10px 0 14px}
.auth-tab{justify-content:center;padding:9px 8px;border-radius:9px;border:0;background:transparent;color:var(--muted);font-weight:700;font-size:12.5px;text-align:center}
.auth-tab.active{background:#fff;color:var(--brand-d);box-shadow:0 2px 8px #2b1c2214}
.auth-divider{display:flex;align-items:center;gap:10px;margin:12px 0;color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-fields{display:flex;flex-direction:column;gap:11px}
.auth-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:10px}
.auth-switch{margin-top:12px;text-align:center;font-size:12.5px;color:var(--muted)}
.auth-switch button{display:inline;border:0;background:none;color:var(--brand);font-weight:700;padding:2px 4px;text-decoration:underline}
.login-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.login-top h1{margin:0}
.server-status{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:10px;font-size:12px;margin:6px 0 12px;background:#f3f4f6;border:1px solid #e5e7eb}
.server-status.ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.server-status.ok .dot{background:#10b981;box-shadow:0 0 0 3px #10b9812b}
.server-status.down{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.server-status.down .dot{background:#ef4444;box-shadow:0 0 0 3px #ef44442b}
.server-status small{margin-left:auto;font-family:ui-monospace,Consolas,monospace;font-size:11px;opacity:.7}
.onetap-card{background:linear-gradient(145deg,#ffffff,var(--rose-2));border:1.5px solid #e8cad4;border-radius:14px;padding:12px 14px;margin:10px 0 12px;box-shadow:0 4px 16px #8c23490f;display:flex;flex-direction:column;gap:10px;transition:border-color .18s,box-shadow .18s,transform .18s}
.onetap-card:hover{border-color:var(--brand);box-shadow:0 6px 22px #8c234924;transform:translateY(-1px)}
.onetap-head{display:flex;align-items:center;gap:10px;text-align:left}
.onetap-head strong{display:block;font-size:13px;color:var(--ink);line-height:1.25}
.onetap-head small{display:block;font-size:11px;color:var(--muted);line-height:1.2}
.g-logo{width:26px;height:26px;flex-shrink:0}
.google-slot{margin:4px 0 2px;display:flex;justify-content:center;min-height:44px}
.google-slot:empty{display:none;margin:0}
.auth-note{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--muted);background:var(--rose-2);padding:9px 12px;border-radius:10px;margin:2px 0}
.auth-note .ico{width:16px;height:16px;color:var(--brand);flex-shrink:0;margin-top:1px}
.login-footer{margin-top:16px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}

/* mobile bottom navigation bar */
.mobile-nav{display:none!important}
.m-ico{position:relative;display:inline-flex;align-items:center;justify-content:center}
.m-badge{position:absolute;top:-5px;right:-9px;font-style:normal;background:var(--brand);color:#fff;font-size:9.5px;font-weight:800;min-width:15px;height:15px;border-radius:999px;display:grid;place-items:center;padding:0 3.5px;border:1.5px solid #fff}
.m-badge.amber{background:#f59e0b}.m-badge.red{background:#ef4444}


/* ---------- Zero-Error Custom Dropdowns & Popovers (ST POS Design) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid var(--line-strong, rgba(15,23,42,0.16));
  border-radius: 9999px;
  padding: 0 12px 0 14px;
  height: 38px;
  cursor: pointer;
  position: relative;
  transition: all .18s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.pill:hover {
  border-color: var(--muted);
  background: #ffffff;
}
.pill:focus-within {
  border-color: #0066ff;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
}
.pill select {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 22px 0 0 !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 14px 14px !important;
}
.pill select:focus, .pill select:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
.branch-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: 8px;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

/* Form selects (custom chevron & no raw Windows borders) */
select:not(.pill select) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px 15px;
  padding: 8px 36px 8px 12px;
  border: 1.5px solid var(--line-strong, rgba(15,23,42,0.16));
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  outline: none;
  height: 40px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
select:not(.pill select):hover {
  border-color: var(--muted);
}
select:not(.pill select):focus, select:not(.pill select):focus-visible {
  border-color: #0066ff;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
  outline: none;
}

/* Custom Dropdown Popover (ST POS Solid Backdrop) */
.advanced-dropdown {
  min-width: 260px;
  max-width: 340px;
  background: #ffffff !important;
  border: 1.5px solid var(--line-strong, rgba(15, 23, 42, 0.16));
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 16px 40px -4px rgba(15, 23, 42, 0.24), 0 4px 12px rgba(15, 23, 42, 0.08);
  z-index: 100;
  animation: popoverFadeIn .18s var(--ease-spring);
}
@keyframes popoverFadeIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.dd-head {
  padding: 8px 12px 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: all .15s ease;
  user-select: none;
}
.dropdown-item:hover {
  background: var(--rose-2);
  border-color: var(--line);
}
.dropdown-item.active {
  background: rgba(0, 102, 255, 0.08);
  border-color: rgba(0, 102, 255, 0.25);
  color: var(--blue, #0066ff);
  font-weight: 700;
}
.dropdown-item .dd-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--ink);
}
.dropdown-item.active .dd-ico {
  background: rgba(0, 102, 255, 0.1);
  border-color: rgba(0, 102, 255, 0.3);
  color: #0066ff;
}
.dropdown-item .dd-text {
  flex: 1;
  min-width: 0;
}
.dropdown-item .dd-text strong {
  display: block;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.dropdown-item .dd-text small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropdown-item .dd-check {
  margin-left: auto;
  color: #10b981;
  display: grid;
  place-items: center;
  flex: none;
}
.dropdown-item .dd-check .ico {
  width: 16px;
  height: 16px;
}
.dropdown-item .dd-flag {
  font-size: 20px;
  line-height: 1;
  flex: none;
}
.pop-chev {
  width: 13px;
  height: 13px;
  opacity: .65;
  transition: transform .18s ease;
  flex: none;
  margin-left: 2px;
}
.popover-host:focus-within .pop-chev {
  transform: rotate(180deg);
}

/* responsive */
@media (max-width:1180px){.dummy-grid{grid-template-columns:1fr}}
@media (max-width:860px){.register{grid-template-columns:1fr}.basket{position:static}}
@media (min-width:861px) and (max-width:1100px){.register{grid-template-columns:1fr 330px;gap:14px}.basket{position:sticky;top:calc(var(--top-h) + 14px);max-height:calc(100dvh - var(--top-h) - 28px)}}
@media (max-width:1100px){.clock{display:none}}
@media (max-width:900px){
 .shell{display:block;height:100%;height:100dvh;overflow:hidden;overflow-x:hidden!important;max-width:100vw!important}
 .main,.shell.collapsed .main{margin-left:0;height:100%;height:100dvh;overflow-y:auto;overflow-x:hidden!important;max-width:100vw!important}
 .sidebar,.shell.collapsed .sidebar{position:fixed;left:0;top:0;bottom:0;width:min(276px,84vw);flex:none;height:100%;height:100dvh;transform:translateX(-105%);transition:transform .22s cubic-bezier(.4,0,.2,1);z-index:60;padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
 .shell.nav-open .sidebar{transform:none}
 .shell.nav-open .scrim{display:block;position:fixed;inset:0;background:#2b1c2266;backdrop-filter:blur(2px);z-index:55}
 .collapsed .nav-label,.collapsed .brand-text,.collapsed .who-text,.collapsed .nav-tools{display:initial}
 .collapsed .nav-group-head{display:flex}
 .collapsed .nav-group.group-closed .nav-group-items{display:none}
 .collapsed .nav-group-items button{justify-content:flex-start;padding:8px 10px}
 .collapsed .nav-badge{position:static;padding:1px 6.5px;font-size:10.5px;min-width:auto;height:auto}
 .collapsed .side-actions{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
 .collapsed .who{justify-content:flex-start;padding:4px 6px}
 .collapsed .brand{justify-content:flex-start;padding:4px 6px 10px}
 .collapse-btn{display:none!important}
 .topbar{padding:10px 12px;gap:8px;flex-wrap:wrap}
 .top-controls{gap:6px;margin-left:auto}
 .global-search{order:5;flex-basis:100%;max-width:none}
 .content{padding:14px 12px calc(82px + env(safe-area-inset-bottom,0px))}
 .section-tabs{margin-bottom:12px;padding:4px}
 .sec-tab{padding:6px 11px;font-size:12px}
 .page-heading{gap:10px;margin-bottom:14px}
 .page-heading h1{font-size:21px}
 .page-heading .actions{width:100%}
 .grid,.dummy-grid{grid-template-columns:1fr;gap:14px}
 .fields{grid-template-columns:1fr}
 .msg{max-width:92%}
 .login{grid-template-columns:1fr}
 .login-art{display:none}
 .login-mobile-brand{display:flex}
 .login-form{padding:14px 12px calc(20px + env(safe-area-inset-bottom,0px));justify-content:flex-start}
 .login-box{padding:20px 16px;border-radius:16px;max-width:460px;margin:16px auto !important}
 .pill{padding:0 2px 0 8px}
 .pill select{max-width:115px;padding:6px 2px;font-size:12px}
 .chat{height:calc(100dvh - 260px);min-height:340px}
 .mobile-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;background:#fffffffa;backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px));z-index:45;box-shadow:0 -4px 18px #2b1c220f}
 .mobile-nav button{flex-direction:column;gap:2px;padding:6px 2px;border:0;background:transparent;border-radius:10px;font-size:10.5px;font-weight:600;color:var(--muted);justify-content:center}
 .mobile-nav button .ico{width:19px;height:19px}
 .mobile-nav button.active{color:var(--brand);background:var(--rose-2);font-weight:700}
 #toast{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:600px){
 .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .stat{padding:13px 12px}
 .stat .number{font-size:18px;margin:6px 0 2px}
 .stat .note{font-size:11px}
 .stat-ico{width:28px;height:28px}
 .quick{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .quick-btn{padding:10px;font-size:12.5px}
 .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .product{min-height:126px;padding:11px}
 .auth-row{grid-template-columns:1fr}
 .onetap-quick{flex-direction:column;align-items:stretch}
 .onetap-btn{width:100%;padding:10px 14px}
 input,select,textarea{font-size:16px}
 th,td{padding:10px 12px}
 .apk-banner{padding:14px 16px}
 .theme-grid{grid-template-columns:1fr;padding:14px}
}

/* theme swatches & thermal receipt customizer */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px;padding:18px 20px}
.theme-card{border:2px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;background:#fff;text-align:left;display:flex;flex-direction:column;gap:10px;transition:border-color .15s,box-shadow .15s}
.theme-card.active{border-color:var(--brand);box-shadow:0 0 0 3px var(--rose)}
.swatches{display:flex;gap:6px}
.swatch{width:24px;height:24px;border-radius:7px;border:1px solid #00000018}
.receipt.paper-58{max-width:290px;font-size:12.5px}
.receipt.paper-80{max-width:380px;font-size:13.5px}
.receipt.tpl-bold h2{font-size:21px;font-weight:900;letter-spacing:.5px}
.receipt.tpl-compact{padding:12px;font-size:12px}
.apk-banner{background:linear-gradient(135deg,var(--brand-d),var(--brand));color:#fff;border-radius:var(--radius);padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.apk-banner h3{margin:0 0 4px;font-size:16px;color:#fff}
.apk-banner p{margin:0;font-size:13px;opacity:.9}
.apk-banner .btn-light{background:#fff;color:var(--brand-d);border-color:#fff;text-decoration:none;padding:9px 15px;border-radius:10px;font-weight:700;display:inline-flex;align-items:center;gap:7px}

/* password setup & modal styling */
.password-setup-card{display:flex;flex-direction:column;gap:14px;padding:4px 0}
.pwd-callout{display:flex;align-items:flex-start;gap:12px;background:var(--rose-2);border:1px solid #e1c6cf;border-radius:12px;padding:12px 14px}
.pwd-callout .ico{width:22px;height:22px;color:var(--brand);flex-shrink:0;margin-top:2px}
.pwd-callout strong{display:block;font-size:14px;color:var(--brand-d);margin-bottom:2px}
.pwd-callout small{display:block;font-size:12px;color:var(--muted);line-height:1.4}
.pwd-field-row{display:flex;align-items:center;position:relative;width:100%}
.pwd-field-row input{width:100%;padding-right:40px}
.pwd-field-row .btn-eye{position:absolute;right:6px;background:transparent;border:none;color:var(--muted);padding:6px;border-radius:6px;cursor:pointer;display:grid;place-items:center;min-height:unset}
.pwd-field-row .btn-eye:hover{color:var(--brand);background:#00000008;transform:none;box-shadow:none}
.pwd-hint{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);background:var(--canvas);padding:8px 12px;border-radius:8px;border:1px solid var(--line);margin-top:4px}
.pwd-hint .ico{width:15px;height:15px;color:var(--green);flex-shrink:0}
.ico-lg{width:24px;height:24px;color:var(--brand);flex-shrink:0}

/* ==========================================================================
   ST POS Retail OS Bento Grid, OS Dock & Plan Plugins
   ========================================================================== */

/* Plan Pills & Shiny Badges */
.plan-pill{border-radius:999px;padding:3px 9px;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;display:inline-flex;align-items:center;gap:4px;border:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.plan-pill.free{background:var(--line);color:var(--muted)}
.plan-pill.pro{background:linear-gradient(135deg,#1E5E7E,#25749d);color:#fff;box-shadow:0 2px 6px #1e5e7e33}
.plan-pill.pro_max{background:linear-gradient(135deg,#c0392b,#e67e22,#f39c12);color:#fff;box-shadow:0 2px 8px #e67e224d;animation:planGlow 3s infinite alternate}
@keyframes planGlow{0%{filter:brightness(1)}100%{filter:brightness(1.15);box-shadow:0 3px 12px #e67e2277}}
.plan-pill:hover{transform:translateY(-1px);filter:brightness(1.1)}
.plan-pill .ico{width:11px;height:11px}
.pill-pro{background:#1E5E7E !important;color:#fff !important}
.pill-max{background:linear-gradient(135deg,#c0392b,#e67e22) !important;color:#fff !important}

/* ST POS Bento Hero */
.bento-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(135deg,#fff,#faf5f6);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin-bottom:18px;box-shadow:var(--shadow);flex-wrap:wrap}
.os-pill{display:inline-flex;align-items:center;gap:8px;background:var(--rose-2);color:var(--brand-d);font-size:11px;font-weight:700;letter-spacing:.8px;padding:5px 12px;border-radius:999px;margin-bottom:8px;border:1px solid #e1c6cf}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px #1f8a5b28;animation:pulse 2s infinite}
@keyframes pulse{0%{transform:scale(0.95);box-shadow:0 0 0 0 #1f8a5b66}70%{transform:scale(1);box-shadow:0 0 0 6px #1f8a5b00}100%{transform:scale(0.95);box-shadow:0 0 0 0 #1f8a5b00}}
.hero-title{font-size:22px;margin:0 0 4px;font-weight:800;letter-spacing:-.3px}
.hero-sub{margin:0;font-size:13px;color:var(--muted)}
.hero-plan-box{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 16px;text-align:right;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.hero-plan-box:hover{border-color:var(--brand);box-shadow:0 4px 12px #0000000f}
.plan-hero-tag{font-size:9.5px;letter-spacing:1.2px;color:var(--muted);font-weight:800;display:block}
.plan-hero-status{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink);margin:2px 0}
.hero-plan-box small{font-size:11px;color:var(--brand);font-weight:600}
.ico-gold{color:#f39c12}.ico-blue{color:#1E5E7E}

/* Floating OS Command Dock */
.os-dock-bar{margin-bottom:18px}
.os-dock-title{font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin-bottom:8px;padding-left:4px}
.os-dock{display:flex;align-items:center;gap:10px;overflow-x:auto;padding:6px 4px 10px;scrollbar-width:none}
.os-dock::-webkit-scrollbar{display:none}
.dock-btn{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:13px;color:var(--ink);box-shadow:0 2px 8px #5a14300a;white-space:nowrap;flex-shrink:0;transition:transform .15s var(--ease-spring),background .15s,border-color .15s,box-shadow .15s}
.dock-btn:hover{transform:translateY(-2px);border-color:#d5bcc4;background:var(--rose-2);box-shadow:0 6px 16px #5a143014}
.dock-btn.highlight{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;border-color:var(--brand)}
.dock-btn.highlight:hover{background:var(--brand-d);box-shadow:0 6px 18px #8c234944}
.dock-btn.danger-dock{color:var(--red)}
.dock-ico{display:grid;place-items:center}
.dock-ico .ico{width:18px;height:18px}
.dock-tag{font-size:8.5px;font-weight:900;letter-spacing:.5px;padding:2px 5px;border-radius:99px;position:absolute;top:-6px;right:-4px}
.dock-tag.pro{background:#1E5E7E;color:#fff}
.dock-tag.pro-max{background:linear-gradient(135deg,#c0392b,#f39c12);color:#fff}

/* Bento KPI Grid */
.bento-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px}
.bento-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.bento-card.kpi{display:flex;flex-direction:column;justify-content:space-between}
.bento-card.kpi.featured{border-left:4px solid var(--brand);background:linear-gradient(180deg,#fff,#fffdfd)}
.bento-card.kpi.warn{border-left:4px solid var(--amber)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.bento-kpi-label, .kpi-label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.bento-kpi-ico, .kpi-ico{width:32px;height:32px;border-radius:10px;background:var(--rose-2);color:var(--brand);display:grid;place-items:center}
.kpi.warn .kpi-ico{background:#fff8e6;color:var(--amber)}
.bento-kpi-val, .kpi-num{font-size:24px;font-weight:800;letter-spacing:-.5px;color:var(--ink);margin:4px 0 6px}
.kpi-num.neg{color:var(--red)}
.kpi-foot{display:flex;align-items:center;justify-content:space-between;font-size:12px;gap:8px}
.kpi-trend{font-weight:700}
.kpi-trend.up{color:var(--green)}.kpi-trend.down{color:var(--red)}.kpi-trend.neutral{color:var(--muted)}
.kpi-meta{color:var(--muted);font-size:11px}
.target-progress-wrap{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.target-progress-head{display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px;color:var(--muted)}
.target-progress-head strong{color:var(--brand)}
.target-bar-track, .progress-bar-bg{height:6px;background:var(--rose-2);border-radius:99px;overflow:hidden}
.target-bar-fill, .progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--brand),#e67e22);border-radius:99px;transition:width .4s var(--ease-out)}
.kpi-methods-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.pay-chip{background:var(--canvas);border:1px solid var(--line);border-radius:6px;padding:3px 7px;font-size:10.5px;font-weight:700;color:var(--ink)}

/* Hourly Rush Chart Radar */
.bento-grid-2{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-bottom:24px}
@media (max-width:960px){.bento-grid-2{grid-template-columns:1fr}}
.rush-chart-wrap{padding:14px 4px 6px;margin-bottom:24px}
.rush-bars{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;height:170px;padding-bottom:24px;position:relative}
.rush-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.rush-bar-val{font-size:10px;font-weight:800;color:var(--brand);margin-bottom:2px;white-space:nowrap;min-height:14px}
.rush-bar-tube{width:100%;max-width:38px;height:110px;background:var(--canvas);border-radius:8px;display:flex;align-items:flex-end;padding:3px;overflow:hidden}
.rush-col.active .rush-bar-tube{background:var(--rose-2)}
.rush-bar-fill{width:100%;border-radius:6px;background:linear-gradient(180deg,var(--brand),var(--brand-d));transition:height .3s var(--ease-out)}
.rush-col:hover .rush-bar-fill{filter:brightness(1.15)}
.rush-label{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.rush-count{font-size:9.5px;color:var(--muted);white-space:nowrap}

/* Low stock mini list */
.low-stock-list{display:flex;flex-direction:column;gap:8px}
.low-stock-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:var(--canvas);border-radius:10px;border:1px solid var(--line);gap:10px}
.low-stock-info strong{display:block;font-size:13px}
.low-stock-info small{display:block;font-size:11px;color:var(--muted)}
.low-stock-act{display:flex;align-items:center;gap:8px}

/* Plan Board Modal & Dribbble Luxury Pricing Grid */
.plan-modal-body,.plan-modal-wrap{padding:2px 0;display:flex;flex-direction:column;gap:18px}
.plan-modal-hero{text-align:center;margin-bottom:2px;padding:4px 8px}
.plan-tag-top{display:inline-flex;align-items:center;gap:6px;background:var(--rose-2);color:var(--brand-d);font-size:10.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;padding:4px 12px;border-radius:999px;margin-bottom:10px;border:1px solid var(--line)}
.plan-modal-hero h2,.plan-modal-hero h3{font-size:22px;margin:0 0 6px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.plan-modal-hero .sub{max-width:560px;margin:0 auto;font-size:13px;color:var(--muted);line-height:1.5}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.plan-card{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:22px 20px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .22s var(--ease-out),border-color .2s,box-shadow .22s;box-shadow:0 4px 16px rgba(15,23,42,0.04)}
.plan-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px -10px rgba(15,23,42,0.12);border-color:#d4c8ce}
.plan-card.current,.plan-card.active{border-color:var(--brand)!important;box-shadow:0 0 0 2px var(--rose),0 14px 32px -8px rgba(140,35,73,0.18)!important}
.plan-card.featured{border-color:#1E5E7E;background:linear-gradient(180deg,#ffffff 0%,#f5fbfe 100%);box-shadow:0 10px 28px -8px rgba(30,94,126,0.16)}
.plan-card.featured::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#0284c7,#1E5E7E,#38bdf8)}
.plan-card.pro-max-card{border-color:#d97706;background:linear-gradient(180deg,#ffffff 0%,#fff9f2 60%,#fdf4ff 100%);box-shadow:0 12px 32px -8px rgba(180,83,9,0.18)}
.plan-card.pro-max-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#7c3aed,#ec4899,#f59e0b)}
.plan-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px;margin-bottom:10px}
.plan-ribbon{position:static;display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:900;letter-spacing:.9px;text-transform:uppercase;background:linear-gradient(135deg,#0284c7,#1E5E7E);color:#fff;padding:3px 10px;border-radius:999px;box-shadow:0 2px 8px rgba(30,94,126,0.25);white-space:nowrap}
.plan-ribbon.max,.plan-ribbon.pro-max-ribbon{background:linear-gradient(135deg,#7c3aed,#ec4899,#f59e0b);box-shadow:0 3px 10px rgba(124,58,237,0.32)}
.plan-active-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;background:#ecfdf5;color:#059669;border:1px solid #a7f3d0;padding:3px 9px;border-radius:999px;white-space:nowrap}
.plan-head,.plan-card-head{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px dashed var(--line)}
.plan-head h4,.plan-name{display:block;font-size:18px;font-weight:800;margin:4px 0 2px;color:var(--ink);letter-spacing:-.01em}
.plan-desc{display:block;font-size:12px;color:var(--muted);line-height:1.4}
.plan-price{font-size:24px;font-weight:900;margin:4px 0 0;color:var(--ink);letter-spacing:-.02em;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.plan-price span{font-size:12px;font-weight:600;color:var(--muted)}
.plan-features{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:10px;font-size:12.5px;line-height:1.45;color:var(--ink);flex:1}
.plan-features li{display:flex;align-items:flex-start;gap:9px}
.plan-features li .plan-chk{width:19px;height:19px;border-radius:999px;background:#ecfdf5;color:#059669;display:grid;place-items:center;flex:none;margin-top:1px}
.plan-features li .plan-chk .ico,.plan-features li>.ico{width:12px;height:12px;flex:none}
.plan-features li>.ico{color:#059669;margin-top:3px}
.plan-action{margin-top:auto;padding-top:14px;border-top:1px solid rgba(15,23,42,0.06)}
.plan-btn,.plan-action .button,.plan-action button{width:100%;min-height:42px;border-radius:12px;font-size:13px;font-weight:700;justify-content:center}
.plan-action .plan-current-btn{background:var(--rose-2);border:1.5px solid var(--rose);color:var(--brand-d);font-weight:800;opacity:1;cursor:default}
.plan-action .plan-included-btn{background:var(--surface-2,#f8fafc);border:1px solid var(--line);color:var(--muted);font-weight:700;opacity:.88;cursor:default}
.pro-max-btn{background:linear-gradient(135deg,#7c3aed 0%,#db2777 60%,#f59e0b 100%)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 8px 20px -4px rgba(124,58,237,0.42)!important}
.pro-max-btn:hover{filter:brightness(1.07);box-shadow:0 12px 26px -4px rgba(219,39,119,0.5)!important}
.plan-modal-foot{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center;background:var(--surface-2,#f8fafc);border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:12.5px;color:var(--muted)}
.plan-modal-foot a{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--brand);font-weight:700;text-decoration:none;transition:transform .15s,border-color .15s,box-shadow .15s}
.plan-modal-foot a:hover{transform:translateY(-1px);border-color:var(--brand);box-shadow:0 4px 12px rgba(15,23,42,0.08)}
@media (max-width:860px){
  .plan-grid{grid-template-columns:1fr;gap:14px}
  .plan-card{padding:18px 16px;border-radius:16px}
  .plan-modal-hero h2,.plan-modal-hero h3{font-size:19px}
  .plan-price{font-size:21px}
}

/* Notifications UI */
.notif-item-row{display:flex;flex-direction:column;gap:3px;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}
.notif-item-row:hover{background:var(--rose-2)}
.notif-item-row.unread{background:#fffdf6;border-left:3px solid var(--amber)}
.notif-row-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.notif-row-title{font-size:12.5px;font-weight:700;color:var(--ink)}
.notif-row-body{font-size:11.5px;color:var(--muted);line-height:1.3}
.notif-row-time{font-size:10px;color:var(--muted)}
.notif-modal-body{display:flex;flex-direction:column;gap:12px;padding:4px 0}
.notif-modal-meta{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding-bottom:8px}
.notif-modal-content{font-size:14px;line-height:1.6;color:var(--ink);background:var(--canvas);padding:14px;border-radius:10px;border:1px solid var(--line)}

/* Landing Page Feature Bento */
.landing-bento-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
.landing-bento-item{background:#ffffff14;border:1px solid #ffffff1f;border-radius:12px;padding:10px 12px}
.landing-bento-item strong{display:block;font-size:12.5px;color:#fff;margin-bottom:2px}
.landing-bento-item p{margin:0;font-size:11px;color:#f6e6ecb0;line-height:1.3}
.btn-tier-preview{background:#ffffff21;border:1px solid #ffffff3d;color:#fff;border-radius:10px;padding:8px 14px;font-size:12px;display:inline-flex;align-items:center;gap:7px;margin-top:14px;cursor:pointer;transition:background .15s}
.btn-tier-preview:hover{background:#ffffff38}

/* Detailed Voucher & Print Layout */
.receipt-addr{text-align:center;margin:2px 0 8px;font-size:11.5px;color:var(--muted);line-height:1.4}
.receipt-meta{display:flex;flex-direction:column;gap:3px;padding:6px 8px;background:var(--surface-2,#f8fafc);border:1px solid var(--line);border-radius:8px;margin-bottom:8px;font-size:11.5px}
.r-meta-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.r-meta-row span:first-child{color:var(--muted);white-space:nowrap}
.r-meta-row strong,.r-meta-row span:last-child{text-align:right;overflow-wrap:anywhere}
.receipt-status-returned{text-align:center;font-size:11px;font-weight:800;letter-spacing:.6px;padding:4px 8px;border-radius:6px;background:#fbe5e2;color:#b91c1c;margin:6px 0}
.receipt-items-table{width:100%!important;border-collapse:collapse;table-layout:fixed}
.receipt-items-table .r-item-col{width:64%;text-align:left;vertical-align:top}
.receipt-items-table .r-amt-col{width:36%;text-align:right;vertical-align:top;font-weight:700;white-space:nowrap}
.receipt-items-table td small{display:block;font-size:10.5px;color:var(--muted);line-height:1.25}
.total-row.grand-receipt{font-size:15px;padding:6px 0;margin:3px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.total-row.due-highlight{color:var(--red)}
.total-row.small-row{font-size:11px;color:var(--muted);padding:2px 0}
.receipt-pay-hist{padding:2px 0}.r-subhead{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:3px}
.receipt-footer-text{text-align:center;margin:4px 0 0;font-size:11.5px}

/* print: only receipts / label sheets */
@media print{
 @page{margin:4mm}
 html,body,#app,.shell,.main,dialog,#dialog-content,.dialog-body{position:static!important;width:auto!important;height:auto!important;max-height:none!important;overflow:visible!important;margin:0!important;padding:0!important;background:#fff!important;border:0!important;box-shadow:none!important}
 body *{visibility:hidden}
 .sidebar,.topbar,.mobile-nav,.scrim,#toast,.dialog-head,.dialog-actions,.shell::before,.shell::after,.promo-pip-wrap{display:none!important}
 dialog::backdrop{display:none!important;background:transparent!important}
 .print-area,.print-area *{visibility:visible!important;color:#000!important}
 .print-area{position:static!important;left:auto!important;top:auto!important;width:100%!important;margin:0 auto!important;padding:0!important;box-shadow:none!important;border:0!important;background:#fff!important}
 .receipt.paper-58.print-area{max-width:58mm!important;font-size:11px!important}
 .receipt.paper-80.print-area{max-width:76mm!important;font-size:12px!important}
 .receipt-meta{background:#fff!important;border:1px solid #000!important}
 .receipt-status-returned{background:#fff!important;border:1px solid #000!important;color:#000!important}
 .receipt hr{border-top:1px dashed #000!important}
 .label-sheet{grid-template-columns:repeat(3,1fr);padding:0}.label-sheet .label{border:1px solid #ccc}
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
 *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}


/* Dedicated Button Pill & Custom Popover Menus */
button.pill {
  border: 1.5px solid var(--line-strong, rgba(15,23,42,0.16));
  background: #ffffff;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  cursor: pointer;
  padding: 0 14px;
  height: 38px;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: all .18s ease;
  user-select: none;
  line-height: 1 !important;
  box-sizing: border-box;
}
button.pill:hover {
  border-color: var(--muted);
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
button.pill:focus-visible, button.pill:active {
  border-color: #0066ff;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
}
.branch-pill-name, .shop-pill-name {
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}
.dd-header {
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dd-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
}
.dd-subtitle {
  font-size: 11.5px;
  color: var(--ink);
  font-weight: 600;
}
.dd-footer {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.dd-foot-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.dd-foot-btn:hover {
  background: var(--rose-2);
  border-color: #0066ff;
  color: #0066ff;
}
.shop-badge-avatar {
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
  background: #0f172a !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
.avatar-ico {
  font-weight: 800 !important;
  font-size: 12px !important;
  background: #0f172a !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center !important;
}
.popover.advanced-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 100;
}
.popover.advanced-dropdown.right {
  right: 0;
  left: auto;
}


/* ========================================================
   ST POS Advanced Cross-Device Responsiveness (Mobile, APK & Tablets)
   ======================================================== */

/* Mobile Drawer Close Button */
.mobile-drawer-close {
  display: none !important;
}
.mobile-only-act {
  display: none !important;
}

/* Real-time Cart Count Badge & Bump Effect */
.cart-count-badge {
  position: absolute !important;
  top: -6px !important;
  right: -10px !important;
  background: #10b981 !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  border-radius: 9999px !important;
  padding: 1px 4.5px !important;
  min-width: 16px !important;
  height: 16px !important;
  line-height: 14px !important;
  display: grid !important;
  place-items: center !important;
  border: 1.5px solid #fff !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
  z-index: 2;
}
@keyframes cartBump {
  0% { transform: scale(1); }
  35% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.cart-bump {
  animation: cartBump .25s ease-out;
}

/* Mobile Sticky Cart Summary Bar (Checkout) */
.mobile-cart-bar-wrap {
  display: block;
}
.mobile-cart-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  z-index: 44;
  background: rgba(11, 15, 23, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
  animation: slideUpBar .22s var(--ease-spring);
}
@keyframes slideUpBar {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.mcb-left {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  user-select: none;
}
.mcb-count-badge {
  background: #0066ff;
  color: #fff;
  border-radius: 10px;
  padding: 6px 9px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
}
.mcb-count-badge .ico {
  width: 15px;
  height: 15px;
}
.mcb-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mcb-sub {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
}
.mcb-total {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcb-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.mcb-clear-btn {
  color: rgba(255, 255, 255, 0.65) !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 9px !important;
  padding: 7px 9px !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}
.mcb-clear-btn:hover {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  background: rgba(239, 68, 68, 0.15) !important;
}
.mcb-pay-btn {
  background: linear-gradient(135deg, #0066ff 0%, #0046fc 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 11px !important;
  padding: 9px 16px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.4) !important;
  transition: transform .15s ease !important;
}
.mcb-pay-btn:active {
  transform: scale(0.96) !important;
}

/* Hide mobile cart summary bar on desktops (> 860px) */
@media (min-width: 861px) {
  .mobile-cart-bar-wrap, .mobile-cart-bar {
    display: none !important;
  }
}

/* Mobile & Touch Optimizations (< 900px) */
@media (max-width: 900px) {
  .sidebar .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 10px 12px !important;
    gap: 8px !important;
  }
  .sidebar .brand-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .sidebar .brand-text strong {
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .mobile-drawer-close,
  .sidebar .mobile-drawer-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
    margin-left: auto !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    padding: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background .15s ease, transform .15s ease !important;
  }
  .mobile-drawer-close:hover, .mobile-drawer-close:active {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
  }
  .mobile-drawer-close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6) !important;
    outline-offset: 2px !important;
  }
  .mobile-drawer-close svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
  }
  .mobile-only-act {
    display: flex !important;
  }

  /* Horizontally scrollable category chips in Checkout on mobile */
  .chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding: 2px 2px 8px !important;
    margin-bottom: 12px !important;
    scrollbar-width: none !important;
  }
  .chips::-webkit-scrollbar {
    display: none !important;
  }
  .chip {
    flex: none !important;
    white-space: nowrap !important;
    padding: 7px 14px !important;
    font-size: 12.5px !important;
  }

  /* Smooth momentum touch scrolling for content */
  .content {
    -webkit-overflow-scrolling: touch;
  }
}

/* Tablet & Mobile Breakpoint (< 900px) */
@media (max-width: 900px) {
  .desktop-only,
  .clock,
  .clock-btn,
  #clock,
  .branch-select-host,
  .top-controls button[data-action="refresh"],
  .top-controls button[data-action="export-page"] {
    display: none !important;
  }
  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    padding: 6px 10px !important;
    gap: 6px !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "menu controls"
      "search search" !important;
    align-items: center !important;
    background: var(--card) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .topbar > button[data-action="menu"] {
    grid-area: menu !important;
    align-self: center !important;
    justify-self: start !important;
    flex: none !important;
  }
  .top-controls {
    grid-area: controls !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }
  .global-search {
    grid-area: search !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .global-search input {
    height: 36px !important;
    font-size: 13px !important;
  }
  .global-search .popover {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    background: var(--card) !important;
    color: var(--ink) !important;
    opacity: 1 !important;
    z-index: 100 !important;
    border: 1.5px solid var(--line-strong, rgba(15, 23, 42, 0.16)) !important;
    box-shadow: 0 16px 40px -4px rgba(15, 23, 42, 0.24) !important;
  }
  .top-controls .popover-host {
    position: static !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
  button.pill {
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 11.5px !important;
    gap: 4px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
  .branch-pill-name, .shop-pill-name {
    min-width: 0 !important;
    flex: 0 1 auto !important;
    max-width: 68px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
  }
  .pill-btn {
    padding: 0 8px !important;
    font-size: 11.5px !important;
    height: 34px !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    line-height: 1 !important;
  }
  .pill-btn span {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
  }
  .icon-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    flex: 0 0 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    font-size: 15px;
    box-sizing: border-box !important;
    gap: 0 !important;
    position: relative !important;
  }
  .icon-btn .ico,
  .icon-btn svg {
    display: block !important;
    margin: 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }

  /* Popovers anchored to viewport on mobile to prevent clipping and bleed-through */
  .top-controls .popover,
  .popover.advanced-dropdown,
  .topbar .popover.advanced-dropdown,
  .topbar .top-controls .popover.advanced-dropdown,
  .topbar .top-controls #notif-panel,
  #shop-panel,
  #branch-panel,
  #lang-panel,
  #notif-panel {
    position: fixed !important;
    top: calc(96px + env(safe-area-inset-top, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    max-height: calc(100dvh - 120px) !important;
    overflow-y: auto !important;
    background: var(--popover-bg, #ffffff) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--popover-ink, #0f172a) !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    border-radius: 16px !important;
    border: 1.5px solid var(--popover-line, rgba(15, 23, 42, 0.18)) !important;
    box-shadow: 0 24px 50px -8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
    animation: popoverFadeIn .18s var(--ease-spring) !important;
  }
}

/* Extra-small mobile screens (< 480px) */
@media (max-width: 480px) {
  .hide-on-xs {
    display: none !important;
  }
  .topbar {
    padding: 6px 8px !important;
    gap: 4px 6px !important;
  }
  .top-controls {
    gap: 3px !important;
  }
  button.pill {
    padding: 0 6px !important;
    gap: 3px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .pill-btn {
    padding: 0 6px !important;
    gap: 3px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .branch-pill-name, .shop-pill-name {
    max-width: 48px !important;
  }
  .lang-select-host .pop-chev {
    display: none !important;
  }
  .pill-btn span {
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
  }
  .icon-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
  .icon-btn .ico,
  .icon-btn svg {
    display: block !important;
    margin: auto !important;
    flex: none !important;
  }
}

/* Soft keyboard safety (automatically hides bottom navigation and floating cart when keyboard is open) */
@media (max-width: 900px) and (max-height: 480px) {
  .mobile-nav, .mobile-cart-bar {
    display: none !important;
  }
  .content {
    padding-bottom: 16px !important;
  }
}

/* Native Android APK Specific Styling */
.native-apk {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}
.native-apk .topbar {
  padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
}
.native-apk .sidebar {
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
}
.native-apk .mobile-nav {
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  height: calc(62px + env(safe-area-inset-bottom, 0px));
}
.native-apk .mobile-cart-bar {
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
}
.native-apk button, .native-apk .chip, .native-apk .product, .native-apk .dropdown-item {
  touch-action: manipulation;
}


/* ========================================================
   Precision UI/UX & Cross-Device Layout Perfection
   ======================================================== */

/* Receipt & Thermal Print Table Safety (Zero horizontal overflow) */
.receipt, .paper-58, .paper-80 {
  overflow-x: hidden !important;
}
.receipt table,
.receipt .table-wrap,
.receipt .table-wrap table {
  min-width: auto !important;
  width: 100% !important;
  table-layout: fixed;
}
.receipt th, .receipt td {
  padding: 4px 2px !important;
  font-size: 11.5px !important;
  word-break: break-word;
}
.receipt hr {
  border: 0;
  border-top: 1px dashed var(--line);
  margin: 8px 0;
}

/* Stat Cards Mobile Grid Balance (Odd card spans full width) */
@media (max-width: 600px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .stats > .stat:last-child:nth-child(odd),
  .bento-kpi-grid > .bento-card:last-child:nth-child(odd) {
    grid-column: span 2;
  }
  .stat .number, .kpi-num, .bento-kpi-val {
    font-size: clamp(17px, 4.2vw, 22px) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Mobile Dialog & Modal Full-Width Ergonomics (< 600px) */
@media (max-width: 600px) {
  dialog {
    width: 95vw !important;
    max-height: 90dvh !important;
    border-radius: 18px !important;
    margin: auto !important;
  }
  .dialog-head {
    padding: 12px 16px !important;
  }
  .dialog-head h2 {
    font-size: 16.5px !important;
  }
  .dialog-body {
    padding: 14px 16px !important;
    max-height: calc(90dvh - 56px) !important;
  }
  .dialog-actions {
    flex-direction: column-reverse !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .dialog-actions button, .dialog-actions .button {
    width: 100% !important;
    justify-content: center !important;
    height: 42px !important;
    font-size: 13.5px !important;
  }
}

/* Hourly Rush Radar Mobile Touch Scroll */
@media (max-width: 600px) {
  .rush-chart-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .rush-bars {
    min-width: 320px;
    gap: 6px;
  }
  .rush-label, .rush-hour-label {
    font-size: 9.5px !important;
  }
}

/* Popover Screen Edge Guard (< 480px) */
@media (max-width: 480px) {
  .popover.advanced-dropdown,
  .topbar .popover.advanced-dropdown,
  .topbar .top-controls .popover.advanced-dropdown,
  #shop-panel,
  #branch-panel,
  #lang-panel,
  #notif-panel {
    position: fixed !important;
    top: calc(96px + env(safe-area-inset-top, 0px)) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    margin: 0 auto !important;
    background: var(--popover-bg, #ffffff) !important;
    color: var(--popover-ink, #0f172a) !important;
    border-color: var(--popover-line, rgba(15, 23, 42, 0.18)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .dd-header {
    padding: 8px 10px 8px !important;
  }
  .dropdown-item {
    padding: 8px 10px !important;
    font-size: 12.5px !important;
  }
}

/* Modern Pill Button Touch Targets */
button.pill, .pill-btn, .icon-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Toast Floating Offset above Mobile Navigation */
@media (max-width: 900px) {
  #toast {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* ========================================================
   Audit-Driven Component & Device Refinements
   ======================================================== */

/* Hourly Rush Radar Peak Badge */
.rush-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #d97706;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.rush-badge .ico {
  width: 14px;
  height: 14px;
}

/* OS Command Dock Button Label */
.dock-label {
  font-size: 12.5px;
  font-weight: 700;
  color: inherit;
  white-space: nowrap;
}

/* Landing Page Feature Bento Icons */
.bento-ico {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}
.bento-ico .ico {
  width: 18px;
  height: 18px;
}

/* Dropdown Scroll Container Guard */
.dd-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 280px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}
.dd-body::-webkit-scrollbar {
  width: 4px;
}
.dd-body::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}

/* Bento Hero Cross-Device Alignment */
.bento-hero-main {
  flex: 1;
  min-width: min(100%, 260px);
}
.bento-hero-side {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .bento-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 16px 18px !important;
    gap: 14px !important;
  }
  .bento-hero-main {
    width: 100% !important;
  }
  .bento-hero-side {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  .hero-plan-box {
    text-align: left !important;
    padding: 8px 12px !important;
  }
  .hero-plan-box .plan-pill {
    margin-top: 2px;
  }
}

/* Mobile Settings Logo Uploader */
@media (max-width: 480px) {
  .logo-uploader {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .landing-bento-grid {
    grid-template-columns: 1fr !important;
  }
  #report-filter button[type="submit"] {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Print Area Margins Safety for ESC/POS Thermal Printers */
@media print {
  .receipt.print-area {
    margin: 0 auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }
}


/* ========================================================
   Mobile Phone UI/UX Precision Polish (Touch Ergonomics)
   ======================================================== */

/* Mobile Bottom Navigation Label Guard (No uneven wrapping) */
@media (max-width: 900px) {
  .mobile-nav button {
    min-height: 48px;
    padding: 4px 1px !important;
  }
  .mobile-nav button span:not(.m-ico) {
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-top: 1px;
  }
}

/* Basket Quantity Buttons Touch Targets */
.quantity button {
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  touch-action: manipulation;
}
.quantity span {
  min-width: 24px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
}

/* Table Row Action Buttons Safety (No multi-line wrapping on mobile) */
td .actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  align-items: center !important;
  white-space: nowrap !important;
}
td .actions button, td .actions .button {
  flex-shrink: 0 !important;
  padding: 6px 10px !important;
  min-height: 32px !important;
  font-size: 12px !important;
  touch-action: manipulation;
}

/* Mobile Segmented Filter Buttons Full-Width */
@media (max-width: 600px) {
  .segmented {
    display: flex !important;
    width: 100% !important;
    padding: 3px !important;
  }
  .segmented button {
    flex: 1 1 0% !important;
    padding: 8px 4px !important;
    font-size: 11.5px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
}

/* Mobile Banner Buttons Full-Width Ergonomics */
@media (max-width: 600px) {
  .apk-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .apk-banner .actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .apk-banner .btn-light {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 14px !important;
    text-align: center !important;
  }
}

/* Myanmar Unicode Safe Line Heights across touch targets */
button, .btn, .pill, .chip, .dropdown-item {
  line-height: 1.35;
}


/* ========================================================
   v3.0 Comprehensive UI/UX Polish, QR & Custom Timezone
   ======================================================== */

/* Desktop Guard: Never display mobile nav or cart bar on desktop */
@media (min-width: 901px) {
  .mobile-nav, .mobile-cart-bar-wrap, .mobile-cart-bar {
    display: none !important;
  }
}

/* Custom ST POS Select Input Controls (Eliminate blocky native 90s select) */
select:not(.pill select) {
  appearance: none;
  -webkit-appearance: none;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 34px !important;
  border: 1.5px solid var(--line-strong, rgba(15, 23, 42, 0.16)) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  font-weight: 500;
  color: var(--ink);
}

/* Opaque Popover Backdrop & Zero-Clipping Guards */
.advanced-dropdown, .popover {
  background: var(--popover-bg, #ffffff) !important;
  color: var(--popover-ink, #0f172a) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1.5px solid var(--popover-line, rgba(15, 23, 42, 0.18)) !important;
  box-shadow: 0 20px 45px -4px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.1) !important;
  font-family: inherit !important;
  z-index: 100 !important;
}

/* Topbar Clock Button */
.clock-btn {
  background: #ffffff !important;
  border: 1.5px solid var(--line-strong, rgba(15, 23, 42, 0.16)) !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  cursor: pointer;
  transition: all .16s ease;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.clock-btn:hover {
  background: var(--rose-2) !important;
  border-color: var(--blue, #0066ff) !important;
  transform: translateY(-1px);
}

/* Interactive Timezone Modal */
.tz-select-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tz-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}
.tz-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--surface-2, var(--rose-2));
  cursor: pointer;
  transition: all .15s ease;
}
.tz-opt:hover {
  border-color: var(--blue, #0066ff);
  background: var(--popover-hover, rgba(0, 102, 255, 0.08));
}
.tz-opt.active {
  border-color: var(--blue, #0066ff);
  background: rgba(0, 102, 255, 0.12);
  box-shadow: 0 0 0 1.5px var(--blue, #0066ff);
}
.tz-opt input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--blue, #0066ff);
  margin: 0;
  cursor: pointer;
}
.tz-opt-text strong {
  display: block;
  font-size: 13.5px;
  color: var(--ink);
}
.tz-opt-text small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
html[data-shop-theme="glassy-dark"] .tz-opt {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-shop-theme="glassy-dark"] .tz-opt:hover {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
}
html[data-shop-theme="glassy-dark"] .tz-opt.active {
  background: rgba(99, 102, 241, 0.22) !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 1.5px #6366f1 !important;
}
html[data-shop-theme="glassy-dark"] .tz-opt-text strong {
  color: #f8fafc !important;
}
html[data-shop-theme="glassy-dark"] .tz-opt-text small {
  color: #94a3b8 !important;
}

/* Product Image Upload & Catalog Thumbnails */
.prod-image-uploader {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.prod-preview-box {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  border: 1.5px dashed var(--line-strong, rgba(15, 23, 42, 0.18));
  background: var(--canvas);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.prod-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prod-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  color: var(--muted);
}
.prod-preview-empty .ico {
  width: 22px;
  height: 22px;
  color: var(--muted);
}
.prod-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.prod-thumb {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--rose-2);
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile.has-img {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tile-img {
  width: 100%;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 6px;
  display: block;
}
.basket-thumb {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--line);
}

/* Receipt QR Code Presentation */
.receipt-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 0 6px;
  margin: 6px 0;
}
.receipt-qr-box {
  width: 112px;
  height: 112px;
  background: #ffffff;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.receipt-qr-box svg {
  width: 100%;
  height: 100%;
  display: block;
}
.receipt-qr-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  margin: 6px 0 2px;
  text-align: center;
}
.receipt-qr-sub {
  font-size: 10px;
  color: var(--muted);
  font-family: monospace;
}

/* Company Hero Card & Bento Styling */
.company-hero-card {
  background: linear-gradient(135deg, #0b0f17 0%, #1e293b 100%);
  color: #ffffff;
  border-radius: 18px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px -5px rgba(11, 15, 23, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.company-hero-main {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 340px;
}
.company-shield-ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(0, 102, 255, 0.18);
  border: 1.5px solid rgba(0, 102, 255, 0.45);
  color: #38bdf8;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.company-shield-ico .ico {
  width: 28px;
  height: 28px;
}
.company-hero-details {
  flex: 1;
  min-width: 0;
}
.company-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.badge-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.3px;
}
.badge-pill.green {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.badge-pill.blue {
  background: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.4);
}
.badge-pill.slate {
  background: rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.company-hero-title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.3px;
}
.company-hero-desc {
  margin: 0;
  font-size: 12.5px;
  color: #94a3b8;
  line-height: 1.4;
}
.company-apk-btn {
  background: #ffffff;
  color: #0b0f17 !important;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: all .16s ease;
  flex-shrink: 0;
}
.company-apk-btn:hover {
  background: #f1f5f9;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.company-apk-btn .ico {
  width: 24px;
  height: 24px;
  color: #0066ff;
}
.company-apk-btn span {
  display: flex;
  flex-direction: column;
}
.company-apk-btn strong {
  font-size: 13px;
  line-height: 1.2;
}
.company-apk-btn small {
  font-size: 10.5px;
  color: #64748b;
}
.bento-kpi {
  background: #ffffff !important;
  border: 1.5px solid var(--line-strong, rgba(15, 23, 42, 0.14)) !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.06) !important;
}


/* Notification Center & Read State Styling */
.notif-row {
  transition: all .15s ease;
  font-family: inherit !important;
}
.notif-row:hover {
  background: var(--popover-hover, var(--rose-2)) !important;
}
.notif-row.is-read {
  opacity: 0.6;
}
.pop-item {
  color: var(--popover-ink, var(--ink)) !important;
  font-family: inherit !important;
}
.pop-item.read-item {
  cursor: pointer;
}
.pop-dot.faint {
  opacity: 0.45;
  filter: grayscale(0.5);
  transform: scale(0.85);
}
.btn-check-notif {
  background: var(--surface-2, var(--rose-2)) !important;
  color: var(--popover-muted, var(--muted)) !important;
  border: 1px solid var(--popover-line, var(--line)) !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  transition: all .15s ease !important;
}
.btn-check-notif:hover {
  background: var(--brand) !important;
  color: #ffffff !important;
  border-color: var(--brand) !important;
}
.panel-unread-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  font-family: inherit !important;
}
.notif-read-tag {
  font-size: 10px !important;
  color: var(--popover-muted, var(--muted)) !important;
  font-family: inherit !important;
}

/* ========================================================
   Dribbble-Inspired Visual Content Animations & Micro-Interactions
   ======================================================== */
.number, .bento-kpi-val, .kpi-num, .money, .price {
  font-variant-numeric: tabular-nums;
}
.theme-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.luxury-theme-pill {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f46e5, #ec4899, #f59e0b);
  background-size: 200% 200%;
  color: #ffffff;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.35);
  animation: luxuryGradientFlow 4s ease infinite;
}
.theme-card-luxury {
  position: relative;
  overflow: hidden;
  border-color: rgba(79, 70, 229, 0.28);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(238, 242, 255, 0.88));
}

@keyframes luxuryRiseIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes luxuryGradientFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes glassSheenSweep {
  0% { transform: translateX(-140%) skewX(-22deg); }
  100% { transform: translateX(240%) skewX(-22deg); }
}
@keyframes auroraFloatA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(4%, 6%, 0) scale(1.08); }
}
@keyframes auroraFloatB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.04); }
  50% { transform: translate3d(-5%, -4%, 0) scale(0.96); }
}

/* Staggered Visual Content Entrance */
.content .bento-hero,
.content .page-heading,
.content .apk-banner,
.content .company-hero-card {
  animation: luxuryRiseIn .42s var(--ease-out) both;
}
.content .os-dock-bar {
  animation: luxuryRiseIn .46s var(--ease-out) .04s both;
}
.bento-kpi-grid > .bento-card,
.stats > .stat,
.quick > .quick-btn,
.cat-grid > .cat-card,
.theme-grid > .theme-card {
  animation: luxuryRiseIn .44s var(--ease-out) both;
}
.bento-kpi-grid > .bento-card:nth-child(1),
.stats > .stat:nth-child(1),
.quick > .quick-btn:nth-child(1),
.cat-grid > .cat-card:nth-child(1),
.theme-grid > .theme-card:nth-child(1) { animation-delay: 0.03s; }
.bento-kpi-grid > .bento-card:nth-child(2),
.stats > .stat:nth-child(2),
.quick > .quick-btn:nth-child(2),
.cat-grid > .cat-card:nth-child(2),
.theme-grid > .theme-card:nth-child(2) { animation-delay: 0.07s; }
.bento-kpi-grid > .bento-card:nth-child(3),
.stats > .stat:nth-child(3),
.quick > .quick-btn:nth-child(3),
.cat-grid > .cat-card:nth-child(3),
.theme-grid > .theme-card:nth-child(3) { animation-delay: 0.11s; }
.bento-kpi-grid > .bento-card:nth-child(4),
.stats > .stat:nth-child(4),
.quick > .quick-btn:nth-child(4),
.cat-grid > .cat-card:nth-child(4),
.theme-grid > .theme-card:nth-child(4) { animation-delay: 0.15s; }
.theme-grid > .theme-card:nth-child(5),
.quick > .quick-btn:nth-child(5),
.cat-grid > .cat-card:nth-child(5) { animation-delay: 0.19s; }

.bento-grid-2 > *,
.grid > .card,
.mt > .card {
  animation: luxuryRiseIn .48s var(--ease-out) .12s both;
}
.product-grid > .product {
  animation: luxuryRiseIn .36s var(--ease-out) both;
}
.product-grid > .product:nth-child(1) { animation-delay: 0.02s; }
.product-grid > .product:nth-child(2) { animation-delay: 0.04s; }
.product-grid > .product:nth-child(3) { animation-delay: 0.06s; }
.product-grid > .product:nth-child(4) { animation-delay: 0.08s; }
.product-grid > .product:nth-child(5) { animation-delay: 0.10s; }
.product-grid > .product:nth-child(6) { animation-delay: 0.12s; }
.product-grid > .product:nth-child(7) { animation-delay: 0.14s; }
.product-grid > .product:nth-child(8) { animation-delay: 0.16s; }

/* ========================================================
   LUXURY HOVER AWARENESS & SENSORY MICRO-INTERACTIONS
   ======================================================== */

/* 1. Global Interactive Controls Base & Smooth Sensory Transition */
button,
.button,
.quick-btn,
.dock-btn,
.sec-tab,
.chip,
.pill,
.pro-max-btn,
.icon-btn {
  transition:
    transform .24s var(--ease-spring),
    background .2s var(--ease-out),
    border-color .2s var(--ease-out),
    box-shadow .24s var(--ease-out),
    color .18s var(--ease-out),
    letter-spacing .2s var(--ease-out),
    text-shadow .2s var(--ease-out),
    filter .2s var(--ease-out) !important;
}

/* 2. Button Hover Awareness: Crisp Typography, Ambient Specular Aura & Micro-Elevation */
button:hover:not(:disabled),
.button:hover:not(.disabled) {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 10px 24px -4px var(--luxury-aura),
    0 2px 6px -1px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  letter-spacing: 0.016em;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.06);
}

/* Primary Hero Actions Hover Awareness */
.primary:hover:not(:disabled) {
  transform: translateY(-2.5px);
  box-shadow:
    0 14px 30px -4px var(--luxury-aura),
    0 4px 12px -2px var(--luxury-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.38) !important;
}

/* Button Icon Micro-Spring Reaction */
button:hover:not(:disabled) .ico,
.button:hover:not(.disabled) .ico,
.quick-btn:hover:not(:disabled) .ico,
.dock-btn:hover:not(:disabled) .ico,
.actions button:hover:not(:disabled) .ico {
  transform: scale(1.12) translateY(-0.5px);
  filter: drop-shadow(0 2px 5px var(--luxury-aura));
  transition: transform .22s var(--ease-spring), filter .2s ease;
}
button .ico,
.button .ico,
.quick-btn .ico,
.dock-btn .ico,
.actions button .ico {
  transition: transform .22s var(--ease-spring), filter .2s ease;
}

/* 3. Interactive Specular Gleam Sweep Family */
.primary,
.button,
.quick-btn,
.dock-btn.highlight,
.stat.featured,
.bento-card.kpi.featured,
.theme-card-luxury,
.plan-card.featured,
.pro-max-btn {
  position: relative;
  overflow: hidden;
}
.primary::after,
.button::after,
.quick-btn::after,
.dock-btn.highlight::after,
.stat.featured::after,
.bento-card.kpi.featured::after,
.theme-card-luxury::after,
.plan-card.featured::after,
.pro-max-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--luxury-sheen, rgba(255, 255, 255, 0.28)), transparent);
  transform: translateX(-160%) skewX(-22deg);
  pointer-events: none;
}
.primary:hover:not(:disabled)::after,
.button:hover:not(.disabled)::after,
.quick-btn:hover:not(:disabled)::after,
.dock-btn.highlight:hover::after,
.stat.featured:hover::after,
.bento-card.kpi.featured:hover::after,
.theme-card-luxury:hover::after,
.plan-card.featured:hover::after,
.pro-max-btn:hover::after {
  animation: glassSheenSweep .75s var(--ease-out);
}

/* 4. Cards & Modules Hover Awareness: Dimensional Depth, Rim Lighting & Title Polish */
.card,
.stat,
.product,
.cat-card,
.bento-card,
.onetap-card,
.plan-card,
.theme-card {
  transition:
    transform .25s var(--ease-spring),
    box-shadow .26s var(--ease-out),
    border-color .22s var(--ease-out),
    background .2s ease;
}
.card:hover,
.stat:hover,
.product:hover,
.cat-card:hover,
.bento-card:hover,
.onetap-card:hover,
.plan-card:hover,
.theme-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong, rgba(140, 35, 73, 0.26)) !important;
  box-shadow:
    0 20px 42px -10px var(--luxury-card-aura),
    0 6px 18px -3px rgba(15, 23, 42, 0.04),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95) !important;
}

/* Card Heading & Stat Typography Awareness */
.card:hover .card-head h2,
.stat:hover h3,
.product:hover h3,
.cat-card:hover strong,
.bento-card:hover h3 {
  color: var(--brand);
  letter-spacing: 0.014em;
  transition: color .22s var(--ease-out), letter-spacing .22s var(--ease-out);
}
.stat:hover .stat-val {
  letter-spacing: -0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: text-shadow .2s ease;
}

/* Card Icons 3D Elastic Reaction */
.stat:hover .stat-ico,
.bento-card:hover .bento-kpi-ico,
.cat-card:hover .cat-ico {
  transform: scale(1.15) rotate(-3.5deg);
  filter: drop-shadow(0 6px 14px var(--luxury-aura));
  transition: transform .24s var(--ease-spring), filter .22s ease;
}
.stat-ico, .bento-kpi-ico, .cat-ico {
  transition: transform .22s var(--ease-spring), filter .22s ease;
}

/* 5. Luxury Table Row Awareness: Glass Highlighting & Left Rim Indicator */
tbody tr {
  transition:
    background .2s var(--ease-out),
    box-shadow .2s var(--ease-out),
    transform .18s var(--ease-out);
}
tbody tr:hover {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, var(--rose-2) 18%, var(--rose-2) 82%, rgba(255, 255, 255, 0.96) 100%) !important;
  box-shadow:
    inset 3.5px 0 0 0 var(--brand),
    0 4px 14px -3px var(--luxury-aura) !important;
}
tbody tr:hover td strong {
  color: var(--brand);
  letter-spacing: 0.016em;
  transition: color .18s ease, letter-spacing .18s ease;
}
tbody tr:hover td small {
  color: var(--ink);
  opacity: 0.88;
}
tbody tr:hover .badge {
  transform: scale(1.05);
  box-shadow: 0 2px 8px var(--luxury-aura);
  transition: transform .18s var(--ease-spring), box-shadow .18s ease;
}

/* 6. Sidebar Navigation & Side Links Hover Awareness */
.nav-group-items button,
.side-link {
  transition:
    transform .22s var(--ease-spring),
    background .2s var(--ease-out),
    box-shadow .22s var(--ease-out),
    color .18s var(--ease-out),
    letter-spacing .2s var(--ease-out) !important;
}
.nav-group-items button:hover:not(:disabled):not(.active),
.side-link:hover:not(.active) {
  transform: translateX(4px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
  color: #ffffff !important;
}

/* Sidebar Active Tab: Rock-solid contrast when clicked and hover-held */
.nav-group-items button.active,
.nav-group-items button.active:hover,
.nav-group-items button.active:focus {
  background: var(--rose) !important;
  color: var(--brand-d) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  transform: translateX(3px) !important;
}
.nav-group-items button.active .nav-badge,
.nav-group-items button.active:hover .nav-badge {
  background: var(--brand) !important;
  color: #ffffff !important;
}
html[data-shop-theme="glassy"] .nav-group-items button.active,
html[data-shop-theme="glassy"] .nav-group-items button.active:hover,
html[data-shop-theme="glassy"] .nav-group-items button.active:focus {
  background: #ffffff !important;
  color: #312e81 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.28) !important;
}
.nav-group-items button:hover:not(:disabled) .ico,
.side-link:hover .ico {
  transform: scale(1.15) rotate(-3deg);
  filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.4));
  transition: transform .22s var(--ease-spring), filter .2s ease;
}
.nav-group-items button .ico,
.side-link .ico {
  transition: transform .22s var(--ease-spring), filter .2s ease;
}

/* 7. Dock Bar Items Hover Awareness */
.dock-btn {
  transition:
    transform .24s var(--ease-spring),
    box-shadow .24s var(--ease-out),
    background .2s var(--ease-out),
    border-color .2s var(--ease-out) !important;
}
.dock-btn:hover {
  transform: translateY(-3.5px) scale(1.03);
  box-shadow:
    0 12px 26px -4px var(--luxury-aura),
    0 3px 8px -1px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}
.dock-btn:hover .dock-lbl {
  letter-spacing: 0.022em;
  font-weight: 800;
  color: var(--brand);
  transition: letter-spacing .2s ease, color .2s ease;
}
.dock-btn:hover .dock-ico {
  transform: scale(1.15);
  filter: drop-shadow(0 2px 6px var(--luxury-aura));
  transition: transform .22s var(--ease-spring), filter .2s ease;
}
.dock-ico,
.dock-lbl {
  transition: transform .22s var(--ease-spring), filter .2s ease, letter-spacing .2s ease, color .2s ease;
}

/* 8. Form Inputs & Selects Hover Awareness */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select:not(.pill select) {
  transition:
    border-color .2s var(--ease-out),
    box-shadow .2s var(--ease-out),
    transform .2s var(--ease-out),
    background-color .2s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover:not(:disabled):not(:focus),
select:not(.pill select):hover:not(:disabled):not(:focus) {
  border-color: var(--brand);
  box-shadow:
    0 4px 14px -2px var(--luxury-aura),
    inset 0 1px 2px rgba(0, 0, 0, 0.02);
  transform: translateY(-0.5px);
}

/* 9. Badges, Pills & Quick Tags Hover Awareness */
.badge,
.pill,
.chip,
.plan-tag-top,
.cat-tag {
  transition:
    transform .2s var(--ease-spring),
    box-shadow .2s ease,
    letter-spacing .2s ease;
}
.badge:hover,
.pill:hover,
.chip:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 4px 12px -2px var(--luxury-aura);
  letter-spacing: 0.022em;
}

/* 10. Floating Video Ad Widget (.promo-pip) Full Luxury Sensory Hover Suite */
.promo-pip {
  transition:
    transform .28s var(--ease-spring),
    box-shadow .28s var(--ease-out),
    border-color .24s var(--ease-out),
    backdrop-filter .24s ease !important;
}
.promo-pip:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow:
    0 32px 72px -12px rgba(2, 6, 23, 0.72),
    0 0 0 1.5px rgba(255, 255, 255, 0.45),
    0 12px 32px -4px var(--luxury-aura) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

/* Promo PIP Typography Awareness */
.promo-pip:hover .promo-pip-title {
  color: #ffffff !important;
  letter-spacing: 0.018em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75), 0 0 14px rgba(255, 255, 255, 0.35);
  transition: letter-spacing .24s var(--ease-out), text-shadow .24s var(--ease-out), color .2s ease;
}
.promo-pip:hover .promo-pip-caption {
  color: #f8fafc !important;
  letter-spacing: 0.012em;
  transition: color .24s ease, letter-spacing .24s ease;
}
.promo-pip:hover .promo-pip-overlay {
  background: linear-gradient(to top, rgba(2, 6, 23, 0.98), rgba(2, 6, 23, 0.52) 65%, transparent);
}
.promo-pip:hover .promo-pip-video {
  filter: brightness(1.04);
  transition: filter .28s ease;
}

/* Promo PIP CTA Button Luxury Hover & Sheen */
.promo-pip-cta {
  position: relative;
  overflow: hidden;
  transition:
    transform .24s var(--ease-spring),
    filter .2s ease,
    box-shadow .24s var(--ease-out),
    letter-spacing .2s ease,
    text-shadow .2s ease,
    background .2s ease !important;
}
.promo-pip-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: translateX(-160%) skewX(-22deg);
  pointer-events: none;
}
.promo-pip-cta:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 100%) !important;
  box-shadow:
    0 14px 32px -4px rgba(37, 99, 235, 0.85),
    0 4px 12px -2px rgba(99, 102, 241, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  letter-spacing: 0.024em;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.45);
  color: #ffffff !important;
}
.promo-pip-cta:hover::after {
  animation: glassSheenSweep .75s var(--ease-out);
}
.promo-pip-cta:active {
  transform: scale(0.965) translateY(1px) !important;
  background: linear-gradient(135deg, #1e40af 0%, #3730a3 100%) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45) !important;
  color: #ffffff !important;
}

/* Promo PIP Icon Buttons (Mute, Minimize, Close) Luxury Hover */
.promo-pip-icon-btn {
  transition:
    transform .24s var(--ease-spring),
    background .2s ease,
    border-color .2s ease,
    box-shadow .22s ease,
    color .18s ease !important;
}
.promo-pip-icon-btn:hover {
  transform: scale(1.18) translateY(-1px);
  background: rgba(255, 255, 255, 0.32) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.35),
    0 0 10px rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
}
.promo-pip-icon-btn:active {
  transform: scale(0.92) translateY(1px) !important;
  background: rgba(255, 255, 255, 0.48) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35) !important;
}
#promo-close-btn:hover {
  background: rgba(239, 68, 68, 0.45) !important;
  border-color: rgba(248, 113, 113, 0.85) !important;
  color: #ffffff !important;
}
#promo-close-btn:active {
  background: rgba(220, 38, 38, 0.65) !important;
}

/* Promo PIP Top Pill Badge Hover */
.promo-pip-pill {
  transition:
    transform .22s var(--ease-spring),
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    color .18s ease !important;
}
.promo-pip-pill:hover {
  background: rgba(15, 23, 42, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  color: #ffffff !important;
  transform: translateY(-1.5px) scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 10px rgba(255, 255, 255, 0.25);
  letter-spacing: 0.022em;
}

/* Promo PIP Collapsed Bubble Hover */
.promo-pip.is-collapsed {
  transition:
    transform .24s var(--ease-spring),
    background .2s ease,
    border-color .2s ease,
    box-shadow .24s ease !important;
}
.promo-pip.is-collapsed:hover {
  transform: translateY(-3px) scale(1.03);
  background: rgba(15, 23, 42, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    0 14px 34px -6px rgba(2, 6, 23, 0.55),
    0 0 16px -2px var(--luxury-aura) !important;
}
.promo-pip.is-collapsed:hover .promo-pip-bubble {
  letter-spacing: 0.024em;
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
}
.promo-pip.is-collapsed:hover .promo-pip-dot {
  transform: scale(1.18);
  box-shadow: 0 0 0 6px rgba(236, 72, 153, 0.45);
}
.promo-pip.is-collapsed:active {
  transform: scale(0.97) translateY(0);
}

/* Promo Hello Mini Bubble Floating Pill Hover */
.promo-hello-bubble {
  transition:
    transform .24s var(--ease-spring),
    background .2s ease,
    box-shadow .24s ease,
    border-color .2s ease,
    color .18s ease,
    letter-spacing .2s ease !important;
}
.promo-hello-bubble:hover {
  transform: translateY(-4px) scale(1.06);
  background: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow:
    0 16px 34px -6px rgba(2, 6, 23, 0.4),
    0 0 12px rgba(56, 189, 248, 0.45) !important;
  color: #0284c7 !important;
  letter-spacing: 0.022em;
}
.promo-hello-bubble:active {
  transform: scale(0.96) translateY(-1px);
}

/* Mini State Pip Video Card Hover */
.promo-pip-wrap.is-mini .promo-pip {
  transition:
    transform .28s var(--ease-spring),
    box-shadow .28s var(--ease-out),
    border-color .22s ease !important;
}
.promo-pip-wrap.is-mini .promo-pip:hover {
  transform: translateY(-4px) scale(1.06);
  border-color: rgba(255, 255, 255, 0.65) !important;
  box-shadow:
    0 24px 50px -8px rgba(2, 6, 23, 0.75),
    0 0 0 2px rgba(255, 255, 255, 0.5),
    0 0 20px rgba(59, 130, 246, 0.5) !important;
}
.promo-pip-wrap.is-mini .promo-pip:active {
  transform: scale(0.96) translateY(0);
}
.target-bar-fill {
  position: relative;
  overflow: hidden;
}

/* ========================================================
   GLASSSY GLORY LUXURY THEME — Dribbble Crystal Glassmorphism Concept
   ======================================================== */
html[data-shop-theme="glassy"] body,
html[data-shop-theme="glassy"] #app {
  background:
    radial-gradient(circle at 12% 14%, rgba(199, 210, 254, 0.75) 0%, transparent 45%),
    radial-gradient(circle at 88% 12%, rgba(251, 207, 232, 0.65) 0%, transparent 42%),
    radial-gradient(circle at 75% 86%, rgba(165, 243, 252, 0.58) 0%, transparent 46%),
    radial-gradient(circle at 18% 82%, rgba(253, 230, 138, 0.44) 0%, transparent 44%),
    linear-gradient(rgba(99, 102, 241, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, #eef2ff 0%, #f8fafc 48%, #fdf2f8 100%);
  background-size: auto, auto, auto, auto, 28px 28px, 28px 28px, auto;
  background-attachment: fixed;
}
html[data-shop-theme="glassy"] .shell {
  position: relative;
  isolation: isolate;
}
html[data-shop-theme="glassy"] .shell::before,
html[data-shop-theme="glassy"] .shell::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
html[data-shop-theme="glassy"] .shell::before {
  width: 44vw;
  height: 44vw;
  max-width: 520px;
  max-height: 520px;
  top: -8%;
  right: 6%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.34), rgba(236, 72, 153, 0.22), transparent 70%);
  animation: auroraFloatA 16s ease-in-out infinite;
}
html[data-shop-theme="glassy"] .shell::after {
  width: 40vw;
  height: 40vw;
  max-width: 480px;
  max-height: 480px;
  bottom: -10%;
  left: 16%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.28), rgba(245, 158, 11, 0.18), transparent 70%);
  animation: auroraFloatB 19s ease-in-out infinite;
}
html[data-shop-theme="glassy"] .main {
  position: relative;
  z-index: 1;
}

/* Obsidian-Sapphire Frosted Sidebar */
html[data-shop-theme="glassy"] .sidebar {
  background: linear-gradient(175deg, rgba(11, 15, 31, 0.92) 0%, rgba(30, 27, 75, 0.94) 52%, rgba(15, 23, 42, 0.96) 100%) !important;
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 10px 0 36px -12px rgba(15, 23, 42, 0.45);
}
html[data-shop-theme="glassy"] .brandmark {
  background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
  color: #312e81;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4), inset 0 1px 0 #ffffff;
}
html[data-shop-theme="glassy"] .nav-search input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}
html[data-shop-theme="glassy"] .nav-group-items button.active {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #ec4899 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px -4px rgba(99, 102, 241, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html[data-shop-theme="glassy"] .nav-group-items button.active::before {
  background: #fde68a;
}
html[data-shop-theme="glassy"] .nav-group-items button.active .nav-badge {
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

/* Crystal Frosted Topbar & Segmented Tabs */
html[data-shop-theme="glassy"] .topbar {
  background: rgba(255, 255, 255, 0.68) !important;
  backdrop-filter: blur(24px) saturate(185%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(185%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 6px 24px -8px rgba(30, 27, 75, 0.1);
}
html[data-shop-theme="glassy"] .global-search input {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
html[data-shop-theme="glassy"] .pill,
html[data-shop-theme="glassy"] .pill-btn,
html[data-shop-theme="glassy"] .icon-btn,
html[data-shop-theme="glassy"] .topbar > button[data-action="menu"],
html[data-shop-theme="glassy"] .clock-btn {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 4px 12px -2px rgba(30, 27, 75, 0.08), inset 0 1px 0 #ffffff !important;
  color: var(--ink) !important;
}
html[data-shop-theme="glassy"] #shop-panel,
html[data-shop-theme="glassy"] #branch-panel,
html[data-shop-theme="glassy"] #lang-panel,
html[data-shop-theme="glassy"] #notif-panel,
html[data-shop-theme="glassy"] .topbar .popover {
  background: #ffffff !important;
  color: #0f172a !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  box-shadow: 0 24px 60px -8px rgba(30, 27, 75, 0.35), 0 0 0 1px rgba(99, 102, 241, 0.2) !important;
}
html[data-shop-theme="glassy"] .section-tabs {
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 28px -8px rgba(30, 27, 75, 0.1), inset 0 1px 0 #ffffff;
}
html[data-shop-theme="glassy"] .sec-tab.active {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 6px 16px -3px rgba(79, 70, 229, 0.45);
}

/* Dribbble Frosted Crystal Cards, Bento Grid & Widgets */
html[data-shop-theme="glassy"] .card,
html[data-shop-theme="glassy"] .bento-card,
html[data-shop-theme="glassy"] .stat,
html[data-shop-theme="glassy"] .cat-card,
html[data-shop-theme="glassy"] .product,
html[data-shop-theme="glassy"] .step,
html[data-shop-theme="glassy"] .quick-btn,
html[data-shop-theme="glassy"] .plan-card,
html[data-shop-theme="glassy"] .dock-btn,
html[data-shop-theme="glassy"] .low-stock-row,
html[data-shop-theme="glassy"] .theme-card,
html[data-shop-theme="glassy"] .bento-kpi {
  background: rgba(255, 255, 255, 0.68) !important;
  backdrop-filter: blur(22px) saturate(185%);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
  border: 1px solid rgba(255, 255, 255, 0.88) !important;
  box-shadow:
    0 14px 36px -10px rgba(30, 27, 75, 0.13),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(79, 70, 229, 0.06) !important;
}
html[data-shop-theme="glassy"] .bento-hero {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.80) 0%, rgba(238, 242, 255, 0.66) 55%, rgba(252, 231, 243, 0.68) 100%) !important;
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 18px 42px -12px rgba(49, 46, 129, 0.16),
    inset 0 1.5px 0 #ffffff !important;
}
html[data-shop-theme="glassy"] .os-pill {
  background: rgba(79, 70, 229, 0.10);
  border-color: rgba(79, 70, 229, 0.24);
  color: #312e81;
}
html[data-shop-theme="glassy"] .hero-plan-box {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 20px -6px rgba(49, 46, 129, 0.14);
}

/* Signature Dribbble "Obsidian Gold Holo" Featured Card */
html[data-shop-theme="glassy"] .stat.featured,
html[data-shop-theme="glassy"] .bento-card.kpi.featured {
  background: linear-gradient(135deg, #0b0f1f 0%, #1e1b4b 46%, #4c1d95 82%, #701a75 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  box-shadow:
    0 20px 44px -10px rgba(49, 46, 129, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}
html[data-shop-theme="glassy"] .bento-card.kpi.featured .bento-kpi-label,
html[data-shop-theme="glassy"] .bento-card.kpi.featured small,
html[data-shop-theme="glassy"] .bento-card.kpi.featured .target-progress-wrap div,
html[data-shop-theme="glassy"] .stat.featured .label,
html[data-shop-theme="glassy"] .stat.featured .note {
  color: rgba(224, 231, 255, 0.84) !important;
}
html[data-shop-theme="glassy"] .bento-card.kpi.featured .bento-kpi-val,
html[data-shop-theme="glassy"] .stat.featured .number {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(255, 255, 255, 0.2);
}
html[data-shop-theme="glassy"] .bento-card.kpi.featured .bento-kpi-ico,
html[data-shop-theme="glassy"] .stat.featured .stat-ico {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fde68a !important;
  border: 1px solid rgba(253, 230, 138, 0.35);
}
html[data-shop-theme="glassy"] .bento-card.kpi.featured .target-bar-track {
  background: rgba(255, 255, 255, 0.16);
}
html[data-shop-theme="glassy"] .bento-card.kpi.featured .target-bar-fill {
  background: linear-gradient(90deg, #fbbf24, #f472b6, #60a5fa);
}

/* Luxury Primary CTA & Glass Buttons */
html[data-shop-theme="glassy"] .primary {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px -4px rgba(79, 70, 229, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
html[data-shop-theme="glassy"] .primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -4px rgba(124, 58, 237, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
html[data-shop-theme="glassy"] .dock-btn.highlight {
  background: linear-gradient(135deg, #4f46e5, #db2777) !important;
  color: #ffffff !important;
}
html[data-shop-theme="glassy"] .stat:hover,
html[data-shop-theme="glassy"] .bento-card:hover,
html[data-shop-theme="glassy"] .product:hover,
html[data-shop-theme="glassy"] .cat-card:hover,
html[data-shop-theme="glassy"] .theme-card:hover {
  transform: translateY(-3px);
  border-color: rgba(99, 102, 241, 0.42) !important;
  box-shadow:
    0 20px 44px -10px rgba(79, 70, 229, 0.22),
    inset 0 1.5px 0 #ffffff !important;
}
html[data-shop-theme="glassy"] .theme-card.active {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.26), 0 18px 36px -8px rgba(79, 70, 229, 0.24) !important;
}

/* Frosted Tables, Inputs & Checkout Basket */
html[data-shop-theme="glassy"] th {
  background: rgba(238, 242, 255, 0.65);
  color: #334155;
}
html[data-shop-theme="glassy"] td {
  border-bottom-color: rgba(148, 163, 184, 0.16);
}
html[data-shop-theme="glassy"] tbody tr:hover {
  background: rgba(238, 242, 255, 0.52);
}
html[data-shop-theme="glassy"] .basket-total {
  background: rgba(238, 242, 255, 0.72);
  border-top-color: rgba(255, 255, 255, 0.85);
}
html[data-shop-theme="glassy"] .rush-bar-tube {
  background: rgba(224, 231, 255, 0.58);
}
html[data-shop-theme="glassy"] .rush-bar-fill {
  background: linear-gradient(180deg, #ec4899 0%, #6366f1 100%);
}
html[data-shop-theme="glassy"] .mobile-nav {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(24px) saturate(185%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(185%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.9) !important;
}
html[data-shop-theme="glassy"] dialog {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 28px 80px -12px rgba(15, 23, 42, 0.35);
}
html[data-shop-theme="glassy"] .login {
  position: relative;
  overflow-x: hidden;
  isolation: isolate;
  background: transparent;
}
html[data-shop-theme="glassy"] .login::before,
html[data-shop-theme="glassy"] .login::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(78px);
  pointer-events: none;
  z-index: 0;
}
html[data-shop-theme="glassy"] .login::before {
  width: 48vw;
  height: 48vw;
  max-width: 560px;
  max-height: 560px;
  top: -12%;
  right: -6%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.36), rgba(236, 72, 153, 0.24), transparent 72%);
  animation: auroraFloatA 16s ease-in-out infinite;
}
html[data-shop-theme="glassy"] .login::after {
  width: 42vw;
  height: 42vw;
  max-width: 500px;
  max-height: 500px;
  bottom: -14%;
  left: 34%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.30), rgba(245, 158, 11, 0.18), transparent 72%);
  animation: auroraFloatB 19s ease-in-out infinite;
}
html[data-shop-theme="glassy"] .login-art {
  position: relative;
  z-index: 2;
  background: linear-gradient(148deg, #090d1c 0%, #1e1b4b 44%, #43187a 80%, #831843 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 24px 0 60px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}
html[data-shop-theme="glassy"] .login-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 25%, rgba(99, 102, 241, 0.32), transparent 45%),
    radial-gradient(circle at 82% 72%, rgba(236, 72, 153, 0.28), transparent 48%);
  pointer-events: none;
}
html[data-shop-theme="glassy"] .login-art > * {
  position: relative;
  z-index: 1;
}
html[data-shop-theme="glassy"] .login-art .brandmark {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.luxury-login-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fde68a;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(236, 72, 153, 0.2));
  border: 1px solid rgba(253, 230, 138, 0.36);
  backdrop-filter: blur(12px);
  margin-bottom: 12px;
}
html[data-shop-theme="glassy"] .landing-bento-item {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 12px 28px rgba(9, 13, 28, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform .22s var(--ease-out), border-color .22s ease, background .22s ease;
}
html[data-shop-theme="glassy"] .landing-bento-item:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.32);
}
html[data-shop-theme="glassy"] .btn-tier-preview {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.32), rgba(236, 72, 153, 0.28));
  border: 1px solid rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(14px);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.28);
}
html[data-shop-theme="glassy"] .login-form {
  background: transparent;
  position: relative;
  z-index: 2;
}
html[data-shop-theme="glassy"] .login-box {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 255, 0.74));
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1.5px solid rgba(255, 255, 255, 0.96);
  border-radius: 26px;
  padding: 26px 24px;
  box-shadow: 0 28px 70px -14px rgba(30, 27, 75, 0.22), inset 0 1px 0 rgba(255, 255, 255, 1);
  animation: luxuryBoxRise .45s var(--ease-out) both;
}
@keyframes luxuryBoxRise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
html[data-shop-theme="glassy"] .login-mobile-brand .brandmark {
  background: linear-gradient(135deg, #4f46e5, #ec4899);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
}
html[data-shop-theme="glassy"] .auth-tabs {
  background: rgba(224, 231, 255, 0.56);
  border: 1px solid rgba(99, 102, 241, 0.14);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 4px;
}
html[data-shop-theme="glassy"] .auth-tab.active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(238, 242, 255, 0.9));
  color: #312e81;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.16);
}
html[data-shop-theme="glassy"] .onetap-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(238, 242, 255, 0.72));
  border: 1.5px solid rgba(99, 102, 241, 0.26);
  backdrop-filter: blur(16px);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(79, 70, 229, 0.1);
}
html[data-shop-theme="glassy"] .onetap-card:hover {
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 14px 32px rgba(79, 70, 229, 0.18);
}
html[data-shop-theme="glassy"] .server-status.ok {
  background: rgba(236, 253, 245, 0.8);
  border-color: rgba(16, 185, 129, 0.28);
  backdrop-filter: blur(10px);
}
html[data-shop-theme="glassy"] .auth-note {
  background: rgba(238, 242, 255, 0.68);
  border: 1px solid rgba(99, 102, 241, 0.16);
}

/* Glassy Glory Luxury Scrollbars & Plan Board Enhancements */
html[data-shop-theme="glassy"] * {
  scrollbar-color: rgba(99, 102, 241, 0.22) transparent;
}
html[data-shop-theme="glassy"] *::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.20);
  background-clip: content-box;
}
html[data-shop-theme="glassy"] *:hover::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.38);
  background-clip: content-box;
}
html[data-shop-theme="glassy"] *::-webkit-scrollbar-thumb:hover,
html[data-shop-theme="glassy"] *::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #6366f1, #ec4899);
  background-clip: content-box;
}
html[data-shop-theme="glassy"] .plan-tag-top {
  background: rgba(79, 70, 229, 0.12);
  color: #3730a3;
  border-color: rgba(99, 102, 241, 0.26);
}
html[data-shop-theme="glassy"] .plan-card.current,
html[data-shop-theme="glassy"] .plan-card.active {
  border-color: #4f46e5 !important;
  box-shadow:
    0 0 0 2px rgba(99, 102, 241, 0.34),
    0 20px 44px -10px rgba(79, 70, 229, 0.24) !important;
}
html[data-shop-theme="glassy"] .plan-card.featured {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(238, 242, 255, 0.72) 100%) !important;
  border-color: rgba(79, 70, 229, 0.45) !important;
}
html[data-shop-theme="glassy"] .plan-card.pro-max-card {
  background: linear-gradient(145deg, #0b0f1f 0%, #1e1b4b 52%, #4c1d95 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  color: #ffffff !important;
  box-shadow:
    0 24px 52px -12px rgba(49, 46, 129, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
html[data-shop-theme="glassy"] .plan-card.pro-max-card .plan-head,
html[data-shop-theme="glassy"] .plan-card.pro-max-card .plan-action {
  border-color: rgba(255, 255, 255, 0.14);
}
html[data-shop-theme="glassy"] .plan-card.pro-max-card h4,
html[data-shop-theme="glassy"] .plan-card.pro-max-card .plan-price,
html[data-shop-theme="glassy"] .plan-card.pro-max-card .plan-features {
  color: #f8fafc !important;
}
html[data-shop-theme="glassy"] .plan-card.pro-max-card .plan-desc,
html[data-shop-theme="glassy"] .plan-card.pro-max-card .plan-price span {
  color: rgba(224, 231, 255, 0.78) !important;
}
html[data-shop-theme="glassy"] .plan-card.pro-max-card .plan-features li .plan-chk {
  background: rgba(253, 230, 138, 0.16);
  color: #fde68a;
}
html[data-shop-theme="glassy"] .plan-card.pro-max-card .plan-active-chip {
  background: rgba(16, 185, 129, 0.22);
  color: #a7f3d0;
  border-color: rgba(167, 243, 208, 0.35);
}
html[data-shop-theme="glassy"] .plan-card.pro-max-card .plan-current-btn {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}
html[data-shop-theme="glassy"] .plan-modal-foot {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px);
}
html[data-shop-theme="glassy"] .plan-modal-foot a {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(99, 102, 241, 0.25);
  color: #4f46e5;
}

/* ========================================================
   Integrated Daily-Loop Counter UX, Shifts, Park Cart, Sandbox & Offline
   ======================================================== */
.pay-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
}
.pay-pill {
  justify-content: center;
  padding: 9px 10px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  min-height: 40px;
}
.pay-pill.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.22);
}
.quick-cash-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.cash-chip {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--line);
}
.cash-chip:hover {
  border-color: var(--brand);
  background: var(--rose-2);
}
.change-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  margin: 10px 0 4px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--surface-2, #f8fafc);
}
.change-banner.change-ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.change-banner.change-due {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.parked-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--line);
}
.parked-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 4px 2px 10px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.parked-pill button {
  border: 0;
  background: transparent;
  padding: 3px 6px;
  font-size: 12px;
  border-radius: 999px;
}
.parked-pill .parked-del {
  color: var(--red);
}
.qty-val-btn {
  min-width: 32px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--surface-2, #f8fafc);
  font-weight: 800;
  font-size: 13px;
  justify-content: center;
}
.shift-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.shift-stat {
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}
.shift-stat small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
}
.shift-stat strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
.sandbox-banner,
.offline-queue-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 18px;
  margin: 10px 24px 0;
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 600;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .sandbox-banner,
  .offline-queue-banner {
    margin: 8px 12px 0;
    padding: 9px 14px;
  }
}
.sandbox-banner {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.92), rgba(253, 230, 138, 0.75));
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #78350f;
  box-shadow: 0 4px 16px -2px rgba(245, 158, 11, 0.14);
}
.sandbox-banner strong {
  color: #92400e;
  font-weight: 800;
}
.sandbox-banner small {
  color: #a16207;
  font-weight: 500;
}
.sandbox-banner button,
.sandbox-banner .button {
  background: #ffffff !important;
  border: 1.5px solid rgba(217, 119, 6, 0.45) !important;
  color: #b45309 !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.12) !important;
  transition: all .16s ease !important;
}
.sandbox-banner button:hover:not(:disabled) {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
}
html[data-shop-theme="glassy"] .sandbox-banner {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.92), rgba(253, 230, 138, 0.72)) !important;
  border: 1px solid rgba(245, 158, 11, 0.42) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px -3px rgba(245, 158, 11, 0.18) !important;
}
html[data-shop-theme="glassy-dark"] .sandbox-banner {
  background: linear-gradient(135deg, rgba(41, 37, 36, 0.9), rgba(69, 26, 3, 0.75)) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  color: #fef3c7 !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.65), 0 0 16px rgba(245, 158, 11, 0.15) !important;
}
html[data-shop-theme="glassy-dark"] .sandbox-banner strong {
  color: #fde68a !important;
}
html[data-shop-theme="glassy-dark"] .sandbox-banner small {
  color: #fcd34d !important;
}
html[data-shop-theme="glassy-dark"] .sandbox-banner button,
html[data-shop-theme="glassy-dark"] .sandbox-banner .button {
  background: rgba(245, 158, 11, 0.18) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.5) !important;
  color: #fde68a !important;
  box-shadow: none !important;
}
html[data-shop-theme="glassy-dark"] .sandbox-banner button:hover:not(:disabled) {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #1c1917 !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45) !important;
}
.offline-queue-banner {
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.95), rgba(224, 231, 255, 0.8));
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #1e1b4b;
  box-shadow: 0 4px 16px -2px rgba(79, 70, 229, 0.12);
}
.offline-queue-banner strong {
  color: #312e81;
  font-weight: 800;
}
html[data-shop-theme="glassy-dark"] .offline-queue-banner {
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.88), rgba(15, 23, 42, 0.92)) !important;
  border: 1px solid rgba(99, 102, 241, 0.45) !important;
  color: #e0e7ff !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.65) !important;
}
html[data-shop-theme="glassy-dark"] .offline-queue-banner strong {
  color: #a5b4fc !important;
}
.offline-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}
@media (max-width: 600px) {
  .shift-grid {
    grid-template-columns: 1fr;
  }
}

/* Reduced Motion Accessibility Guard */
@media (prefers-reduced-motion: reduce) {
  .content *,
  .luxury-theme-pill,
  button,
  .button,
  .card,
  .stat,
  .dock-btn,
  .side-link,
  .nav-group-items button,
  tbody tr,
  .promo-pip,
  html[data-shop-theme="glassy"] .shell::before,
  html[data-shop-theme="glassy"] .shell::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}

/* ---------- Dribbble Floating News Video Ad Widget (.promo-pip) ---------- */
.promo-pip {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1050;
  width: 240px;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 24px 54px -12px rgba(2, 6, 23, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  color: #fff;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease, width 0.28s ease;
  animation: promoPipEnter 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes promoPipEnter {
  from { opacity: 0; transform: translateY(22px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.promo-pip.is-collapsed {
  width: auto;
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.promo-pip.is-collapsed .promo-pip-stage,
.promo-pip.is-collapsed .promo-pip-body {
  display: none;
}
.promo-pip-bubble {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.promo-pip.is-collapsed .promo-pip-bubble {
  display: inline-flex;
}
.promo-pip-dot {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #ec4899);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.25);
  animation: promoPulse 2s infinite;
}
@keyframes promoPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.28); }
  50% { box-shadow: 0 0 0 7px rgba(236, 72, 153, 0.08); }
}
.promo-pip-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 12;
  background: #020617;
  overflow: hidden;
}
.promo-pip-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.promo-pip-controls {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  z-index: 2;
}
.promo-pip-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  font-size: 10.5px;
  font-weight: 700;
  color: #f8fafc;
}
.promo-pip-btns {
  display: flex;
  align-items: center;
  gap: 5px;
}
.promo-pip-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(8px);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  font-size: 12px;
  transition: transform 0.16s ease, background 0.16s ease;
}
.promo-pip-icon-btn:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: scale(1.06);
}
.promo-pip-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 28px 12px 10px;
  background: linear-gradient(to top, rgba(2, 6, 23, 0.94), rgba(2, 6, 23, 0.45) 60%, transparent);
  pointer-events: none;
}
.promo-pip-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
}
.promo-pip-caption {
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(248, 250, 252, 0.82);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.promo-pip-body {
  padding: 10px 12px 12px;
  display: grid;
  gap: 6px;
  background: rgba(15, 23, 42, 0.94);
}
.promo-pip-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb 0%, #6366f1 100%);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(37, 99, 235, 0.65);
  transition: transform 0.16s ease, filter 0.16s ease;
}
.promo-pip-cta:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.promo-pip-tier-note {
  font-size: 10px;
  line-height: 1.3;
  color: rgba(226, 232, 240, 0.68);
  text-align: center;
}
html[data-shop-theme="glassy"] .promo-pip {
  background: rgba(18, 24, 48, 0.72);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: 0 28px 60px -12px rgba(15, 23, 42, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}
@media (max-width: 600px) {
  .promo-pip {
    right: 12px;
    bottom: 84px;
    width: 196px;
    border-radius: 18px;
  }
  .promo-pip.is-collapsed {
    bottom: 84px;
    right: 12px;
  }
}

/* Dribbble Mini-Bubble Start State & Expanded Video Card Enhancements */
.promo-pip-wrap {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.promo-pip-wrap .promo-pip {
  position: relative;
  right: auto;
  bottom: auto;
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
}
.promo-hello-bubble {
  display: none;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 12.5px;
  font-weight: 800;
  padding: 6px 13px;
  border-radius: 14px 14px 4px 14px;
  box-shadow: 0 10px 24px -6px rgba(2, 6, 23, 0.35);
  border: 1px solid rgba(56, 189, 248, 0.45);
  cursor: pointer;
  animation: promoFloat 2.6s ease-in-out infinite;
}
.promo-pip-wrap.is-mini .promo-hello-bubble {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
@keyframes promoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.promo-pip-wrap.is-mini .promo-pip {
  width: 112px;
  border-radius: 18px;
  cursor: pointer;
}
.promo-pip-wrap.is-mini .promo-pip-stage {
  aspect-ratio: 9 / 11;
}
.promo-pip-wrap.is-mini .promo-pip-body,
.promo-pip-wrap.is-mini .promo-pip-overlay,
.promo-pip-wrap.is-mini .promo-pip-pill,
.promo-pip-wrap.is-mini #promo-mute-btn,
.promo-pip-wrap.is-mini #promo-min-btn {
  display: none;
}
.promo-pip-wrap.is-mini .promo-pip-controls {
  justify-content: flex-end;
  top: 6px;
  right: 6px;
}
.promo-pip-wrap.is-mini .promo-pip-icon-btn {
  width: 22px;
  height: 22px;
  font-size: 10px;
}
@media (max-width: 900px) {
  .promo-pip-wrap {
    right: 14px;
    bottom: 84px;
  }
}
@media (max-width: 600px) {
  .promo-pip-wrap {
    right: 12px;
    bottom: 84px;
  }
  .promo-pip-wrap.is-mini .promo-pip {
    width: 96px;
  }
  .connect-modal .auth-row {
    grid-template-columns: 1fr;
  }
  .connect-tabs {
    flex-wrap: wrap;
  }
  .service-card {
    grid-template-columns: 64px 1fr;
    gap: 10px;
    padding: 10px;
  }
  .service-thumb {
    width: 64px;
    height: 60px;
    font-size: 16px;
  }
}

/* Reassuring Maintenance Mode Banner */
.maint-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 24px;
  margin: 0;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.10), rgba(16, 185, 129, 0.08));
  border-bottom: 1px solid rgba(2, 132, 199, 0.22);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}
@media (max-width: 900px) {
  .maint-banner {
    padding: 10px 14px;
  }
}
.maint-banner strong {
  color: #0369a1 !important;
  font-weight: 800;
}
html[data-shop-theme="glassy"] .maint-banner strong,
html[data-shop-theme="clean"] .maint-banner strong,
html[data-shop-theme="pheel"] .maint-banner strong {
  color: #0369a1 !important;
  font-weight: 800;
}
html[data-shop-theme="glassy"] .maint-banner {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.10), rgba(16, 185, 129, 0.08)) !important;
  border-bottom: 1px solid rgba(2, 132, 199, 0.22) !important;
  color: #0f172a !important;
}
html[data-shop-theme="glassy-dark"] .maint-banner {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(16, 185, 129, 0.14)) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.22) !important;
  color: #f8fafc !important;
}
html[data-shop-theme="glassy-dark"] .maint-banner strong {
  color: #38bdf8 !important;
  font-weight: 800;
}
.maint-pill-preview {
  background: rgba(245, 158, 11, 0.88) !important;
  color: #111827 !important;
  border-color: rgba(253, 224, 71, 0.8) !important;
}

/* Connect with Studio Modal (Message + Services Tabs) - Fully Theme Adaptive */
.connect-modal {
  display: grid;
  gap: 14px;
  max-width: 520px;
}
.connect-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.connect-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-d, #1e1b4b), var(--brand, #4f46e5));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  flex: none;
  box-shadow: 0 8px 18px -6px var(--luxury-aura, rgba(79, 70, 229, 0.45));
}
.connect-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.connect-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .16s var(--ease-out);
}
.connect-tab:hover:not(:disabled):not(.active) {
  background: var(--surface-2, rgba(15, 23, 42, 0.05)) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  transform: translateY(-1px);
}
.connect-tab.active {
  background: var(--brand, #4f46e5) !important;
  color: #ffffff !important;
  border-color: var(--brand, #4f46e5) !important;
  box-shadow: 0 4px 14px -2px var(--luxury-aura, rgba(79, 70, 229, 0.35)) !important;
}
.connect-tab.active .badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}
.connect-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.connect-ai-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.connect-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--card, #ffffff);
  color: var(--brand, #4f46e5);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .16s ease;
}
.connect-ai-btn:hover:not(:disabled) {
  border-color: var(--brand, #4f46e5) !important;
  background: var(--brand, #4f46e5) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}
.service-list {
  display: grid;
  gap: 12px;
  max-height: 410px;
  overflow-y: auto;
  padding-right: 4px;
}
.service-card {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  align-items: start;
  transition: transform .18s var(--ease-out), background .18s ease, border-color .18s ease, box-shadow .18s ease;
  position: relative;
}
.service-card:hover {
  background: var(--card, #ffffff);
  border-color: var(--brand, #4f46e5);
  box-shadow: 0 10px 28px -4px var(--luxury-aura, rgba(15, 23, 42, 0.12)), 0 2px 8px -2px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}
.service-thumb {
  width: 84px;
  height: 76px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  flex: none;
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.22);
}
.service-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.service-price {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--brand, #4f46e5);
  margin: 3px 0 5px;
}
.service-desc {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.service-hire-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line-strong, var(--line));
  background: var(--card, #ffffff);
  color: var(--brand, #4f46e5);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .16s var(--ease-out);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
button.service-hire-btn:hover:not(:disabled),
.service-hire-btn:hover {
  background: var(--brand, #4f46e5) !important;
  border-color: var(--brand, #4f46e5) !important;
  color: #ffffff !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 18px -2px var(--luxury-aura, rgba(79, 70, 229, 0.45)) !important;
}
button.service-hire-btn:active:not(:disabled),
.service-hire-btn:active {
  background: var(--brand-dd, #1e1b4b) !important;
  border-color: var(--brand-dd, #1e1b4b) !important;
  color: #ffffff !important;
  transform: scale(0.96) !important;
}

/* Glassy Theme Hover & Adaptive Colors */
html[data-shop-theme="glassy"] .service-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 18px -3px rgba(30, 27, 75, 0.08);
}
html[data-shop-theme="glassy"] .service-card:hover {
  background: #ffffff !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
  box-shadow: 0 12px 32px -4px rgba(79, 70, 229, 0.22) !important;
}
html[data-shop-theme="glassy"] .service-title {
  color: #0f172a !important;
}
html[data-shop-theme="glassy"] .service-desc {
  color: #475569 !important;
}
html[data-shop-theme="glassy"] .service-price {
  color: #4f46e5 !important;
}
html[data-shop-theme="glassy"] button.service-hire-btn {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(99, 102, 241, 0.28) !important;
  color: #4f46e5 !important;
}
html[data-shop-theme="glassy"] button.service-hire-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(79, 70, 229, 0.4) !important;
}

/* Obsidian Dark Theme Hover & Adaptive Colors */
html[data-shop-theme="glassy-dark"] .service-card {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5) !important;
}
html[data-shop-theme="glassy-dark"] .service-card:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: rgba(99, 102, 241, 0.55) !important;
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.85), 0 0 20px rgba(99, 102, 241, 0.25) !important;
}
html[data-shop-theme="glassy-dark"] .service-title {
  color: #f8fafc !important;
}
html[data-shop-theme="glassy-dark"] .service-desc {
  color: #94a3b8 !important;
}
html[data-shop-theme="glassy-dark"] .service-price {
  color: #38bdf8 !important;
}
html[data-shop-theme="glassy-dark"] .connect-switch-row {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
}
html[data-shop-theme="glassy-dark"] .connect-tab {
  color: #94a3b8 !important;
}
html[data-shop-theme="glassy-dark"] .connect-tab:hover:not(:disabled):not(.active) {
  background: rgba(30, 41, 59, 0.85) !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
html[data-shop-theme="glassy-dark"] .connect-tab.active,
html[data-shop-theme="glassy-dark"] .connect-tab.active:hover {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #ffffff !important;
  border-color: #6366f1 !important;
}
html[data-shop-theme="glassy-dark"] button.service-hire-btn {
  background: rgba(30, 41, 59, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #38bdf8 !important;
}
html[data-shop-theme="glassy-dark"] button.service-hire-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #6366f1, #38bdf8) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.45) !important;
}
html[data-shop-theme="glassy-dark"] .connect-ai-btn {
  background: rgba(30, 41, 59, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #38bdf8 !important;
}
html[data-shop-theme="glassy-dark"] .connect-ai-btn:hover:not(:disabled) {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #ffffff !important;
}

/* ========================================================
   CLICK & ACTIVE / FOCUS HARMONIOUS COLOR PAIRINGS
   (Prevents background & text color mismatch on click & hover-hold)
   ======================================================== */

/* 1. Default Buttons when clicked / pressed down (:active) */
button:active:not(:disabled),
.button:active:not(.disabled) {
  background: var(--rose-2) !important;
  border-color: var(--brand) !important;
  color: var(--brand-d) !important;
  transform: scale(0.965) translateY(1px) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.10) !important;
  text-shadow: none !important;
}

/* 2. Primary Buttons when clicked / pressed down (:active) */
.primary:active:not(:disabled) {
  background: var(--brand-dd) !important;
  border-color: var(--brand-dd) !important;
  color: #ffffff !important;
  transform: scale(0.965) translateY(1px) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

/* 3. Primary Buttons when focused and hovered after click */
.primary:focus,
.primary:focus:hover:not(:disabled) {
  background: var(--brand-d) !important;
  border-color: var(--brand-d) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.38) !important;
}

/* 4. Section & Category Tabs when clicked / active & hover-held */
.sec-tab.active,
.sec-tab.active:hover,
.sec-tab.active:focus {
  background: var(--brand) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
  box-shadow: 0 4px 12px var(--luxury-aura) !important;
  border-color: var(--brand) !important;
  transform: translateY(-1px) !important;
}
.sec-tab.active .tab-badge,
.sec-tab.active:hover .tab-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}
.sec-tab:not(.active):hover {
  background: var(--rose-2) !important;
  color: var(--brand) !important;
}
.sec-tab:not(.active):active {
  background: var(--rose) !important;
  color: var(--brand-d) !important;
  transform: scale(0.96) !important;
}

/* 5. Danger Buttons when clicked (:active) */
.danger:active:not(:disabled),
.danger-act:active:not(:disabled) {
  background: #fee2e2 !important;
  border-color: var(--red) !important;
  color: #991b1b !important;
  transform: scale(0.965) translateY(1px) !important;
  box-shadow: inset 0 2px 4px rgba(239, 68, 68, 0.2) !important;
}

/* 6. Quick Action Buttons when clicked (:active) */
.quick-btn:active:not(:disabled) {
  background: var(--rose-2) !important;
  border-color: var(--brand) !important;
  color: var(--brand-d) !important;
  transform: scale(0.965) translateY(1px) !important;
}
.quick-btn:active:not(:disabled) .ico {
  color: var(--brand-d) !important;
}

/* 7. Dock Buttons when active / clicked */
.dock-btn:active {
  background: var(--rose-2) !important;
  border-color: var(--brand) !important;
  color: var(--brand-d) !important;
  transform: scale(0.96) translateY(1px) !important;
}
.dock-btn.highlight:active {
  background: var(--brand-dd) !important;
  border-color: var(--brand-dd) !important;
  color: #ffffff !important;
}

/* 8. Segmented & Chip Buttons on/active when hover-held */
.segmented button.on,
.segmented button.on:hover,
.segmented button.on:focus {
  background: var(--brand) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
.chip.on,
.chip.on:hover,
.chip.on:focus,
.chip.on:active {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #ffffff !important;
}

/* 9. Auth Tabs & Plan Tabs on/active when hover-held */
.auth-tab.active,
.auth-tab.active:hover,
.auth-tab.active:focus {
  background: #ffffff !important;
  color: var(--brand-d) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

/* 10. Pay Pills & Plan Pills on/active when hover-held */
.pay-pill.active,
.pay-pill.active:hover,
.pay-pill.active:focus {
  background: var(--brand) !important;
  color: #ffffff !important;
  border-color: var(--brand) !important;
}

/* 11. Connect Modal Tabs on/active */
.connect-tab.active,
.connect-tab.active:hover,
.connect-tab.active:focus {
  background: var(--brand, #4f46e5) !important;
  color: #ffffff !important;
  border-color: var(--brand, #4f46e5) !important;
  box-shadow: 0 4px 14px -2px var(--luxury-aura, rgba(79, 70, 229, 0.35)) !important;
}

/* 12. Focus Ring Consistency (no harsh browser default clashing) */
button:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--brand) !important;
  outline-offset: 2px !important;
}
button:focus:not(:focus-visible),
.button:focus:not(:focus-visible) {
  outline: none !important;
}

/* ========================================================
   GLASSY GLORY OBSIDIAN DARKMODE & TECH DETAIL LUXURY SUITE
   ======================================================== */

html[data-shop-theme="glassy-dark"] body,
html[data-shop-theme="glassy-dark"] #app {
  background:
    radial-gradient(circle at 14% 12%, rgba(99, 102, 241, 0.32) 0%, transparent 46%),
    radial-gradient(circle at 86% 14%, rgba(236, 72, 153, 0.25) 0%, transparent 42%),
    radial-gradient(circle at 75% 85%, rgba(6, 182, 212, 0.24) 0%, transparent 48%),
    radial-gradient(circle at 18% 82%, rgba(245, 158, 11, 0.18) 0%, transparent 44%),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    #030712;
  background-size: auto, auto, auto, auto, 28px 28px, 28px 28px, auto;
  background-attachment: fixed;
  color: #f8fafc;
}

html[data-shop-theme="glassy-dark"] .shell {
  position: relative;
  isolation: isolate;
}
html[data-shop-theme="glassy-dark"] .shell::before,
html[data-shop-theme="glassy-dark"] .shell::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
html[data-shop-theme="glassy-dark"] .shell::before {
  width: 44vw;
  height: 44vw;
  max-width: 520px;
  max-height: 520px;
  top: -8%;
  right: 6%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.45), rgba(236, 72, 153, 0.25), transparent 70%);
  animation: auroraFloatA 16s ease-in-out infinite;
}
html[data-shop-theme="glassy-dark"] .shell::after {
  width: 40vw;
  height: 40vw;
  max-width: 480px;
  max-height: 480px;
  bottom: -10%;
  left: 16%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.35), rgba(245, 158, 11, 0.2), transparent 70%);
  animation: auroraFloatB 19s ease-in-out infinite;
}

/* Obsidian Smoky Frosted Sidebar */
html[data-shop-theme="glassy-dark"] .sidebar {
  background: linear-gradient(175deg, rgba(8, 11, 22, 0.96) 0%, rgba(15, 23, 42, 0.98) 55%, rgba(11, 15, 31, 0.96) 100%) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 12px 0 40px -10px rgba(0, 0, 0, 0.7);
}
html[data-shop-theme="glassy-dark"] .brandmark {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
html[data-shop-theme="glassy-dark"] .brand-text strong {
  color: #f8fafc;
}
html[data-shop-theme="glassy-dark"] .nav-search input {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f8fafc;
}
html[data-shop-theme="glassy-dark"] .nav-group-items button.active {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #ec4899 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px -4px rgba(99, 102, 241, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
html[data-shop-theme="glassy-dark"] .nav-group-items button.active::before {
  background: #ffffff;
  box-shadow: 0 0 10px #ffffff;
}
html[data-shop-theme="glassy-dark"] .nav-group-items button.active .nav-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Frosted Obsidian Topbar & Glass Pills */
html[data-shop-theme="glassy-dark"] .topbar {
  background: rgba(11, 15, 31, 0.85) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.65);
}
html[data-shop-theme="glassy-dark"] .global-search input {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f8fafc;
}
html[data-shop-theme="glassy-dark"] .pill,
html[data-shop-theme="glassy-dark"] .pill-btn,
html[data-shop-theme="glassy-dark"] .icon-btn,
html[data-shop-theme="glassy-dark"] .topbar > button[data-action="menu"],
html[data-shop-theme="glassy-dark"] .clock-btn {
  background: rgba(30, 41, 59, 0.72) !important;
  backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
}
html[data-shop-theme="glassy-dark"] #shop-panel,
html[data-shop-theme="glassy-dark"] #branch-panel,
html[data-shop-theme="glassy-dark"] #lang-panel,
html[data-shop-theme="glassy-dark"] #notif-panel,
html[data-shop-theme="glassy-dark"] .topbar .popover {
  background: #0f172a !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 24px 60px -8px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
}
html[data-shop-theme="glassy-dark"] .pill select {
  color: #f8fafc;
}
html[data-shop-theme="glassy-dark"] .pill select option {
  background: #0f172a;
  color: #f8fafc;
}
html[data-shop-theme="glassy-dark"] .section-tabs {
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
html[data-shop-theme="glassy-dark"] .sec-tab {
  color: #94a3b8;
}
html[data-shop-theme="glassy-dark"] .sec-tab.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px -3px rgba(99, 102, 241, 0.6) !important;
}

/* Frosted Obsidian Cards, Bento Modules & Widgets */
html[data-shop-theme="glassy-dark"] .card,
html[data-shop-theme="glassy-dark"] .bento-card,
html[data-shop-theme="glassy-dark"] .stat,
html[data-shop-theme="glassy-dark"] .cat-card,
html[data-shop-theme="glassy-dark"] .product,
html[data-shop-theme="glassy-dark"] .step,
html[data-shop-theme="glassy-dark"] .quick-btn,
html[data-shop-theme="glassy-dark"] .plan-card,
html[data-shop-theme="glassy-dark"] .dock-btn,
html[data-shop-theme="glassy-dark"] .low-stock-row,
html[data-shop-theme="glassy-dark"] .theme-card,
html[data-shop-theme="glassy-dark"] .bento-kpi {
  background: rgba(15, 23, 42, 0.82) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 16px 42px -10px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  color: #f8fafc;
}
html[data-shop-theme="glassy-dark"] .card-head h2,
html[data-shop-theme="glassy-dark"] .bento-kpi-val,
html[data-shop-theme="glassy-dark"] .stat-val,
html[data-shop-theme="glassy-dark"] h1,
html[data-shop-theme="glassy-dark"] h2,
html[data-shop-theme="glassy-dark"] h3,
html[data-shop-theme="glassy-dark"] h4,
html[data-shop-theme="glassy-dark"] strong {
  color: #f8fafc !important;
}
html[data-shop-theme="glassy-dark"] .card-head p,
html[data-shop-theme="glassy-dark"] .sub,
html[data-shop-theme="glassy-dark"] .muted,
html[data-shop-theme="glassy-dark"] small,
html[data-shop-theme="glassy-dark"] td small {
  color: #94a3b8 !important;
}
html[data-shop-theme="glassy-dark"] .money {
  color: #38bdf8 !important;
}

/* Bento Hero Tech Dark Gradient */
html[data-shop-theme="glassy-dark"] .bento-hero {
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.9) 0%, rgba(15, 23, 42, 0.94) 55%, rgba(49, 46, 129, 0.88) 100%) !important;
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
  box-shadow:
    0 20px 48px -12px rgba(0, 0, 0, 0.82),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.22) !important;
  color: #f8fafc !important;
}
html[data-shop-theme="glassy-dark"] .os-pill {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.45);
  color: #a5b4fc;
}
html[data-shop-theme="glassy-dark"] .hero-plan-box {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.55);
}

/* Featured KPI & Specular Sheen */
html[data-shop-theme="glassy-dark"] .stat.featured,
html[data-shop-theme="glassy-dark"] .bento-card.kpi.featured {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.35) 0%, rgba(236, 72, 153, 0.28) 55%, rgba(245, 158, 11, 0.2) 100%) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  box-shadow: 0 20px 48px -10px rgba(99, 102, 241, 0.4), inset 0 1.5px 0 rgba(255, 255, 255, 0.3) !important;
}
html[data-shop-theme="glassy-dark"] .primary {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 26px -4px rgba(99, 102, 241, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
html[data-shop-theme="glassy-dark"] .primary:hover:not(:disabled) {
  transform: translateY(-2.5px);
  box-shadow: 0 14px 34px -4px rgba(168, 85, 247, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
html[data-shop-theme="glassy-dark"] button:not(.primary),
html[data-shop-theme="glassy-dark"] .button:not(.primary) {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.16);
  color: #f8fafc;
}
html[data-shop-theme="glassy-dark"] button:hover:not(:disabled):not(.primary),
html[data-shop-theme="glassy-dark"] .button:hover:not(.disabled):not(.primary) {
  background: rgba(51, 65, 85, 0.95) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  color: #ffffff !important;
}
html[data-shop-theme="glassy-dark"] .dock-btn.highlight {
  background: linear-gradient(135deg, #6366f1, #ec4899) !important;
  color: #ffffff !important;
}

/* Card Hover in Obsidian Darkmode */
html[data-shop-theme="glassy-dark"] .stat:hover,
html[data-shop-theme="glassy-dark"] .bento-card:hover,
html[data-shop-theme="glassy-dark"] .product:hover,
html[data-shop-theme="glassy-dark"] .cat-card:hover,
html[data-shop-theme="glassy-dark"] .theme-card:hover {
  transform: translateY(-3.5px);
  border-color: rgba(99, 102, 241, 0.55) !important;
  box-shadow:
    0 24px 54px -10px rgba(0, 0, 0, 0.85),
    0 0 20px -2px rgba(99, 102, 241, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}
html[data-shop-theme="glassy-dark"] .theme-card.active {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45), 0 20px 42px -8px rgba(99, 102, 241, 0.4) !important;
}

/* Smoky Dark Tables & Row Hover */
html[data-shop-theme="glassy-dark"] th {
  background: rgba(15, 23, 42, 0.95);
  color: #94a3b8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
html[data-shop-theme="glassy-dark"] td {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
}
html[data-shop-theme="glassy-dark"] tbody tr:hover {
  background: rgba(30, 41, 59, 0.72) !important;
  box-shadow: inset 3.5px 0 0 0 #6366f1, 0 4px 14px -2px rgba(0, 0, 0, 0.6) !important;
}
html[data-shop-theme="glassy-dark"] .basket-total {
  background: rgba(15, 23, 42, 0.88);
  border-top-color: rgba(255, 255, 255, 0.16);
  color: #f8fafc;
}
html[data-shop-theme="glassy-dark"] .rush-bar-tube {
  background: rgba(30, 41, 59, 0.75);
}
html[data-shop-theme="glassy-dark"] .rush-bar-fill {
  background: linear-gradient(180deg, #ec4899 0%, #6366f1 100%);
}
html[data-shop-theme="glassy-dark"] .mobile-nav {
  background: rgba(11, 15, 31, 0.92) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Inputs, Selects & Dialogs in Obsidian Dark */
html[data-shop-theme="glassy-dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html[data-shop-theme="glassy-dark"] select:not(.pill select),
html[data-shop-theme="glassy-dark"] textarea {
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #f8fafc !important;
}
html[data-shop-theme="glassy-dark"] input:focus,
html[data-shop-theme="glassy-dark"] select:focus,
html[data-shop-theme="glassy-dark"] textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3) !important;
}
html[data-shop-theme="glassy-dark"] dialog {
  background: rgba(11, 15, 31, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 32px 84px -16px rgba(0, 0, 0, 0.9) !important;
  color: #f8fafc !important;
}
html[data-shop-theme="glassy-dark"] .popover {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.85) !important;
  color: #f8fafc !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-shop-theme="glassy-dark"] .promo-pip {
  background: rgba(11, 15, 31, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 32px 72px -12px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
html[data-shop-theme="glassy-dark"] .maint-banner strong {
  color: #38bdf8 !important;
}

/* ========================================================
   ST ASSISTANT AI THEMED GLASSMORPHISM SUITE
   ======================================================== */

/* Glassy Glory Tech Light AI Assistant */
html[data-shop-theme="glassy"] .chat {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 16px 42px -10px rgba(30, 27, 75, 0.12), inset 0 1.5px 0 #ffffff !important;
}
html[data-shop-theme="glassy"] .chat-log {
  background: rgba(238, 242, 255, 0.45) !important;
}
html[data-shop-theme="glassy"] .msg.bot {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  color: #0f172a !important;
  box-shadow: 0 6px 20px -4px rgba(79, 70, 229, 0.12), inset 0 1px 0 #ffffff !important;
}
html[data-shop-theme="glassy"] .msg.user {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px -4px rgba(79, 70, 229, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
html[data-shop-theme="glassy"] .msg-tag {
  color: #4f46e5 !important;
}
html[data-shop-theme="glassy"] .chat .chips,
html[data-shop-theme="glassy"] .chat-input {
  background: rgba(255, 255, 255, 0.6) !important;
  border-top-color: rgba(255, 255, 255, 0.85) !important;
}
html[data-shop-theme="glassy"] .chat .chip {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  color: #312e81 !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.08) !important;
}
html[data-shop-theme="glassy"] .chat-input input {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Glassy Glory Obsidian Darkmode AI Assistant */
html[data-shop-theme="glassy-dark"] .chat {
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 20px 54px -12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}
html[data-shop-theme="glassy-dark"] .chat-log {
  background: rgba(8, 11, 22, 0.78) !important;
}
html[data-shop-theme="glassy-dark"] .msg.bot {
  background: rgba(30, 41, 59, 0.88) !important;
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
html[data-shop-theme="glassy-dark"] .msg.user {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px -4px rgba(99, 102, 241, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
html[data-shop-theme="glassy-dark"] .msg-tag {
  color: #38bdf8 !important;
}
html[data-shop-theme="glassy-dark"] .msg-tag .ico {
  color: #38bdf8 !important;
}
html[data-shop-theme="glassy-dark"] .chat .chips,
html[data-shop-theme="glassy-dark"] .chat-input {
  background: rgba(15, 23, 42, 0.9) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
}
html[data-shop-theme="glassy-dark"] .chat .chip {
  background: rgba(30, 41, 59, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html[data-shop-theme="glassy-dark"] .chat .chip:hover {
  background: rgba(51, 65, 85, 0.95) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px -2px rgba(99, 102, 241, 0.3) !important;
}
html[data-shop-theme="glassy-dark"] .chat-input input {
  background: rgba(8, 11, 22, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
html[data-shop-theme="glassy-dark"] .chat-input input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3), inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* ========================================================
   INCOMING STOCK & KPI STATS LUXURY GLASS SUITE
   ======================================================== */

/* Glassy Glory Tech Light Suite */
html[data-shop-theme="glassy"] .stat {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 12px 32px -8px rgba(30, 27, 75, 0.08), inset 0 1px 0 #ffffff !important;
}
html[data-shop-theme="glassy"] .stat .stat-label,
html[data-shop-theme="glassy"] .stat .label {
  color: #475569 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
html[data-shop-theme="glassy"] .stat .number {
  color: #0f172a !important;
}
html[data-shop-theme="glassy"] .stat .note {
  color: #64748b !important;
}
html[data-shop-theme="glassy"] .stat-ico {
  background: rgba(79, 70, 229, 0.08) !important;
  color: #4f46e5 !important;
  border: 1px solid rgba(79, 70, 229, 0.15) !important;
}
html[data-shop-theme="glassy"] .stat.featured {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 16px 36px -6px rgba(79, 70, 229, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
html[data-shop-theme="glassy"] .stat.featured .stat-label,
html[data-shop-theme="glassy"] .stat.featured .label,
html[data-shop-theme="glassy"] .stat.featured .note {
  color: rgba(238, 242, 255, 0.9) !important;
}
html[data-shop-theme="glassy"] .stat.featured .number {
  color: #ffffff !important;
}
html[data-shop-theme="glassy"] .stat.featured .stat-ico {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}
html[data-shop-theme="glassy"] .stat.warn {
  border-color: rgba(245, 158, 11, 0.4) !important;
  background: rgba(255, 251, 235, 0.88) !important;
}
html[data-shop-theme="glassy"] .stat.warn .stat-label,
html[data-shop-theme="glassy"] .stat.warn .label {
  color: #b45309 !important;
}
html[data-shop-theme="glassy"] .stat.warn .stat-ico {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #d97706 !important;
}
html[data-shop-theme="glassy"] .notice {
  background: rgba(238, 242, 255, 0.75) !important;
  border: 1px solid rgba(199, 210, 254, 0.8) !important;
  color: #312e81 !important;
  box-shadow: 0 4px 16px -2px rgba(79, 70, 229, 0.08) !important;
}
html[data-shop-theme="glassy"] .segmented {
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.06), inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}
html[data-shop-theme="glassy"] .segmented button {
  color: #475569 !important;
  background: transparent !important;
  border: 0 !important;
}
html[data-shop-theme="glassy"] .segmented button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #1e1b4b !important;
}
html[data-shop-theme="glassy"] .segmented button.on {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px -2px rgba(79, 70, 229, 0.45) !important;
}

/* Glassy Glory Obsidian Darkmode Suite */
html[data-shop-theme="glassy-dark"] .stat {
  background: rgba(15, 23, 42, 0.82) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 42px -8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
html[data-shop-theme="glassy-dark"] .stat .stat-label,
html[data-shop-theme="glassy-dark"] .stat .label {
  color: #94a3b8 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
html[data-shop-theme="glassy-dark"] .stat .number {
  color: #f8fafc !important;
}
html[data-shop-theme="glassy-dark"] .stat .note {
  color: #94a3b8 !important;
}
html[data-shop-theme="glassy-dark"] .stat-ico {
  background: rgba(99, 102, 241, 0.18) !important;
  color: #818cf8 !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
}
html[data-shop-theme="glassy-dark"] .stat.featured {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.45) 0%, rgba(236, 72, 153, 0.35) 55%, rgba(245, 158, 11, 0.25) 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.5) !important;
  box-shadow: 0 20px 48px -10px rgba(99, 102, 241, 0.4), inset 0 1.5px 0 rgba(255, 255, 255, 0.3) !important;
}
html[data-shop-theme="glassy-dark"] .stat.featured .stat-label,
html[data-shop-theme="glassy-dark"] .stat.featured .label {
  color: #e0e7ff !important;
}
html[data-shop-theme="glassy-dark"] .stat.featured .number {
  color: #ffffff !important;
}
html[data-shop-theme="glassy-dark"] .stat.featured .note {
  color: #e0e7ff !important;
}
html[data-shop-theme="glassy-dark"] .stat.featured .stat-ico {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
html[data-shop-theme="glassy-dark"] .stat.warn {
  border-color: rgba(245, 158, 11, 0.45) !important;
  background: rgba(41, 30, 15, 0.8) !important;
}
html[data-shop-theme="glassy-dark"] .stat.warn .stat-label,
html[data-shop-theme="glassy-dark"] .stat.warn .label {
  color: #fbbf24 !important;
}
html[data-shop-theme="glassy-dark"] .stat.warn .stat-ico {
  background: rgba(245, 158, 11, 0.22) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
}
html[data-shop-theme="glassy-dark"] .notice {
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
html[data-shop-theme="glassy-dark"] .notice strong {
  color: #38bdf8 !important;
}
html[data-shop-theme="glassy-dark"] .segmented {
  background: rgba(15, 23, 42, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.6), inset 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}
html[data-shop-theme="glassy-dark"] .segmented button {
  color: #94a3b8 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-shop-theme="glassy-dark"] .segmented button:hover:not(:disabled) {
  background: rgba(30, 41, 59, 0.85) !important;
  color: #f8fafc !important;
  border: 0 !important;
}
html[data-shop-theme="glassy-dark"] .segmented button.on,
html[data-shop-theme="glassy-dark"] .segmented button.on:hover,
html[data-shop-theme="glassy-dark"] .segmented button.on:focus {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 4px 14px -2px rgba(99, 102, 241, 0.65) !important;
}
html[data-shop-theme="glassy-dark"] .badge {
  background: rgba(30, 41, 59, 0.8) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
html[data-shop-theme="glassy-dark"] .badge.green {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}
html[data-shop-theme="glassy-dark"] .badge.amber {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}
html[data-shop-theme="glassy-dark"] .badge.red {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}
html[data-shop-theme="glassy-dark"] .badge.gray {
  background: rgba(148, 163, 184, 0.14) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
}
html[data-shop-theme="glassy-dark"] .empty {
  color: #94a3b8 !important;
}
html[data-shop-theme="glassy-dark"] .empty h3 {
  color: #f8fafc !important;
}
html[data-shop-theme="glassy-dark"] .empty p {
  color: #94a3b8 !important;
}
html[data-shop-theme="glassy-dark"] .empty-symbol {
  background: rgba(99, 102, 241, 0.16) !important;
  color: #818cf8 !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  box-shadow: 0 4px 16px -2px rgba(99, 102, 241, 0.25) !important;
}
html[data-shop-theme="glassy-dark"] .field {
  color: #cbd5e1 !important;
}
html[data-shop-theme="glassy-dark"] .field strong {
  color: #f8fafc !important;
}

/* ========================================================
   ST POS MASTER RESPONSIVENESS SUITE (ALL DEVICES & FORM FACTORS)
   ======================================================== */

/* 1. Mobile Data Table Scroll & Column Protection */
@media (max-width: 768px) {
  .table-wrap:not(.receipt .table-wrap) table {
    min-width: 580px !important;
  }
  .table-wrap {
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
  }
}

/* 2. Ultra-Compact Mobile (< 380px: iPhone SE, Galaxy Fold cover) */
@media (max-width: 380px) {
  .stats {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .stat {
    padding: 12px 14px !important;
  }
  .stat .number {
    font-size: 20px !important;
  }
  .quick {
    grid-template-columns: 1fr !important;
  }
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .product {
    min-height: 118px !important;
    padding: 8px 10px !important;
  }
  .product .tile {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }
  .section-tabs {
    padding: 3px !important;
    gap: 4px !important;
  }
  .sec-tab {
    padding: 5px 9px !important;
    font-size: 11px !important;
  }
  .promo-pip {
    width: 190px !important;
  }
}

/* 3. Mobile Floating Cart Spacing & Bottom Padding */
@media (max-width: 900px) {
  .shell:has(.mobile-cart-bar) .content {
    padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* 4. Landscape Orientation Support on Mobile / Tablets (< 520px height) */
@media (max-height: 520px) and (orientation: landscape) {
  .topbar {
    padding: 4px 10px !important;
  }
  .section-tabs {
    margin-bottom: 8px !important;
    padding: 3px !important;
  }
  .sec-tab {
    padding: 4px 10px !important;
    font-size: 11.5px !important;
  }
  .page-heading {
    margin-bottom: 10px !important;
    gap: 6px !important;
  }
  .page-heading h1 {
    font-size: 18px !important;
  }
  dialog {
    max-height: 94dvh !important;
    border-radius: 14px !important;
  }
  .dialog-body {
    max-height: calc(94dvh - 54px) !important;
    padding: 10px 14px !important;
  }
  .dialog-actions {
    margin-top: 10px !important;
  }
  .chat {
    height: calc(100dvh - 160px) !important;
    min-height: 220px !important;
  }
  .promo-pip-wrap {
    bottom: 10px !important;
    right: 10px !important;
  }
  .promo-pip {
    width: 170px !important;
  }
}

/* 5. Mobile Theme-Specific Bottom Navigation Bar */
html[data-shop-theme="glassy"] .mobile-nav {
  background: rgba(255, 255, 255, 0.84) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.9) !important;
}
html[data-shop-theme="glassy"] .mobile-nav button {
  color: #64748b;
}
html[data-shop-theme="glassy"] .mobile-nav button.active {
  color: #4f46e5 !important;
  background: rgba(79, 70, 229, 0.12) !important;
}
html[data-shop-theme="glassy"] .mobile-nav button.active .m-ico {
  color: #4f46e5 !important;
}
html[data-shop-theme="glassy-dark"] .mobile-nav {
  background: rgba(11, 15, 31, 0.94) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.7) !important;
}
html[data-shop-theme="glassy-dark"] .mobile-nav button {
  color: #94a3b8;
}
html[data-shop-theme="glassy-dark"] .mobile-nav button.active {
  color: #ffffff !important;
  background: rgba(99, 102, 241, 0.22) !important;
}
html[data-shop-theme="glassy-dark"] .mobile-nav button.active .m-ico {
  color: #818cf8 !important;
  filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.6));
}

/* 6. Touch Momentum & Tap Response for All Touchscreens */
.table-wrap, .section-tabs, .chips, .os-dock, .segmented, .chat-log {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
@media (pointer: coarse) {
  button, .button, .chip, .dock-btn, .sec-tab, .nav-group-items button {
    touch-action: manipulation;
  }
}
@media (max-width: 600px) {
  .chat-input input {
    font-size: 16px !important;
  }
}