:root{
  --navy:#0b2f6b; --blue:#0d6efd; --blue2:#2e8cff; --bg:#f4f7fb;
  --card:#fff; --text:#17324d; --muted:#6b7b8c; --green:#17a673;
  --red:#ef4d61; --border:#e6ecf3; --shadow:0 10px 30px rgba(11,47,107,.10);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text)}
button,input{font:inherit}.app-shell{min-height:100vh;max-width:560px;margin:0 auto;padding-bottom:88px}
.topbar{background:linear-gradient(135deg,#08295f,#0d5fc5);color:#fff;padding:20px 18px 28px;border-radius:0 0 28px 28px;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:11px}.logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#45d9ff,#1768ff);display:grid;place-items:center;font-weight:900;font-size:20px}
.brand h1{font-size:20px;margin:0}.brand span{color:#57ccff}.sub{font-size:12px;opacity:.8}.hero{margin-top:20px}.hero h2{margin:0 0 6px;font-size:25px}.hero p{margin:0;opacity:.85;font-size:13px}
.content{padding:16px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:-14px}.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:15px;box-shadow:0 6px 20px rgba(11,47,107,.06)}
.stat strong{font-size:20px;display:block;margin-top:6px}.label{font-size:12px;color:var(--muted)}.quick-title{display:flex;justify-content:space-between;align-items:center;margin:20px 2px 10px}.quick-title h3{margin:0;font-size:16px}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.quick{border:none;background:#fff;border-radius:16px;padding:14px 8px;color:var(--text);box-shadow:0 4px 18px rgba(11,47,107,.05);min-height:92px}.quick b{font-size:12px;display:block;margin-top:8px}
.page-head{display:flex;align-items:center;justify-content:space-between;padding:18px 16px 10px}.page-head h2{margin:0;font-size:20px}.search{display:flex;gap:8px;padding:0 16px 12px}.search input{width:100%;border:1px solid var(--border);border-radius:14px;padding:12px;background:#fff}
.primary,.outline,.danger{border:none;border-radius:14px;padding:12px 14px;font-weight:700}.primary{background:var(--blue);color:#fff}.outline{background:#fff;color:var(--blue);border:1px solid #a8c7ff}.danger{background:#fff0f2;color:var(--red)}
.product-list{display:grid;gap:10px;padding:0 16px 16px}.product{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:16px;padding:10px}.thumb{width:48px;height:48px;border-radius:12px;background:#eef4ff;display:grid;place-items:center;font-size:22px}.product h4{margin:0 0 4px;font-size:14px}.product small{color:var(--muted)}.price{font-weight:800;margin-top:5px}
.pill{display:inline-block;font-size:11px;padding:4px 8px;border-radius:999px;background:#e8fbf4;color:#0b8f64}.pill.low{background:#fff0f2;color:var(--red)}
.pos-wrap{padding:0 16px 16px}.cart{background:#fff;border:1px solid var(--border);border-radius:18px;padding:14px;margin-top:12px}.cart-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.total{display:flex;justify-content:space-between;align-items:center;padding-top:14px}.total strong{font-size:22px}.checkout{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.scan-box{margin:12px 16px;background:#111;border-radius:22px;min-height:410px;overflow:hidden;position:relative;color:#fff;display:grid;place-items:center}.scan-box video{width:100%;height:100%;object-fit:cover}.scan-frame{position:absolute;width:72%;height:180px;border:3px solid rgba(255,255,255,.9);border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.30)}.scan-line{position:absolute;width:72%;height:3px;background:#2cff97;box-shadow:0 0 14px #2cff97}.scan-tip{position:absolute;bottom:24px;font-size:13px;background:rgba(0,0,0,.55);padding:8px 12px;border-radius:999px}
.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(560px,100%);background:#fff;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(5,1fr);padding:8px 8px max(8px,env(safe-area-inset-bottom));z-index:10}.navbtn{border:none;background:transparent;color:#718096;padding:7px 2px;font-size:10px}.navbtn .ic{display:block;font-size:20px;margin-bottom:2px}.navbtn.active{color:var(--blue);font-weight:800}.navbtn.scan .ic{background:var(--blue);color:#fff;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin:-24px auto 3px;box-shadow:0 8px 20px rgba(13,110,253,.32)}
.empty{padding:28px;text-align:center;color:var(--muted)}.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:95px;background:#17324d;color:#fff;padding:10px 14px;border-radius:12px;font-size:12px;z-index:99}
.auth-card{display:grid;gap:10px}.auth-card label{font-size:12px;font-weight:700;color:var(--muted)}.field{width:100%;border:1px solid var(--border);border-radius:14px;padding:12px;background:#fff;color:var(--text)}.wide{width:100%;margin-top:4px}

.compact-top{padding-top:0}
.qty{display:flex;gap:8px;align-items:center}.qty button{width:28px;height:28px;border:none;border-radius:8px;background:#eef4ff}
.history-row{width:100%;border:1px solid var(--border);background:#fff;border-radius:16px;padding:14px;display:flex;justify-content:space-between;align-items:center;text-align:left;color:var(--text)}
.history-row .right{text-align:right;display:grid;gap:6px;justify-items:end}
.receipt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.receipt-title{text-align:center;font-weight:900;font-size:18px}.receipt hr{border:none;border-top:1px dashed var(--border);margin:14px 0}
.receipt-row{display:flex;justify-content:space-between;gap:12px;margin:8px 0}.total-line{font-size:18px}
.menu-stack{display:grid;gap:10px;margin-top:12px}.menu-row{width:100%;display:flex;gap:10px;align-items:center;border:none;text-align:left}
button:disabled{opacity:.6}
@media print{body{background:#fff}.bottom-nav,.page-head button,.receipt button{display:none!important}.app-shell{max-width:420px}.receipt{box-shadow:none;border:none}}


/* Audit Trail v10 */
.audit-list{padding-bottom:28px}
.audit-card{overflow:hidden}
.audit-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.audit-head>div{min-width:0}
.audit-head b{display:block;font-size:18px;line-height:1.25}
.audit-head small{flex:0 0 auto;color:var(--muted);text-align:right}
.audit-id{margin-top:12px;padding:10px 12px;background:#f7f9fc;border:1px solid var(--border);border-radius:12px}
.audit-id span{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.audit-id code{display:block;font-size:12px;white-space:normal;overflow-wrap:anywhere;word-break:break-word;color:var(--text)}
.audit-detail{margin-top:12px;display:grid;gap:8px}
.audit-kv{display:grid;grid-template-columns:minmax(110px,.8fr) minmax(0,1.2fr);gap:12px;align-items:start;padding:9px 0;border-top:1px solid var(--border)}
.audit-kv span{color:var(--muted);font-size:13px}
.audit-kv b{font-size:14px;line-height:1.35;overflow-wrap:anywhere;word-break:break-word;text-align:right}
.audit-kv .audit-detail{grid-column:1/-1;margin-top:0}
@media(max-width:520px){
  .audit-head{display:block}
  .audit-head small{display:block;text-align:left;margin-top:5px}
  .audit-kv{grid-template-columns:1fr}
  .audit-kv b{text-align:left}
}

.summary-title{font-weight:800;font-size:17px;margin-bottom:10px}
.cash-summary{border:1px solid var(--border)}
.cash-summary .total-line strong{font-size:20px}
.cash-diff-preview{margin:8px 0 4px;padding:10px 12px;border-radius:12px;background:#f7f9fc;border:1px solid var(--border)}

/* Stage A cashier controls */
.cart-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center}
.cart-main{min-width:0}
.qty-control{display:flex;align-items:center;gap:7px}
.qty-btn{width:34px;height:34px;min-width:34px;padding:0;border-radius:10px;font-size:20px;line-height:1}
.qty-value{min-width:24px;text-align:center}
.cart-price{text-align:right;display:grid;gap:4px;justify-items:end}
.cart-remove{border:0;background:transparent;color:#b42318;font-size:12px;font-weight:700;padding:4px}
.cash-change{display:flex;justify-content:space-between;align-items:center;margin:8px 0 12px;padding:12px;border-radius:12px;background:#f7f9fc;border:1px solid var(--border)}
.cash-change strong{font-size:18px}
@media(max-width:520px){
  .cart-item{grid-template-columns:minmax(0,1fr) auto}
  .cart-price{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;text-align:left;border-top:1px solid var(--border);padding-top:7px}
}

.tax-box{margin-top:12px}
.tax-box .field{margin-bottom:10px}

/* Tax settings */
.switch-row{display:flex!important;justify-content:space-between;align-items:center;gap:16px;padding:12px 0}
.switch-row span{display:grid;gap:3px}
.switch-row small{color:var(--muted);font-weight:400}
.switch-row input[type="checkbox"]{width:22px;height:22px;flex:0 0 auto}
.tax-preview{margin:10px 0 14px}

/* Stage B category filter */
.search{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,220px);gap:8px}
.search .field{margin:0}
@media(max-width:520px){.search{grid-template-columns:1fr}}

/* Stage C - money, history, receipt, pagination */
.money-field{font-variant-numeric:tabular-nums}
.history-filters{display:grid;gap:10px}
.filter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.filter-actions{display:flex;gap:8px}
.filter-actions>*{flex:1}
.load-more{margin:12px 0 28px}
.product-search{align-items:start}
.receipt-page{display:grid;justify-items:center}
.thermal-receipt{width:min(100%,360px);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.35;background:#fff;color:#111}
.thermal-receipt[data-paper="80"]{width:min(100%,460px)}
.receipt-head{text-align:center}
.receipt-logo{max-width:64px;max-height:64px;object-fit:contain;margin:0 auto 6px}
.receipt-title{font-size:17px;font-weight:900;text-align:center}
.receipt-center{text-align:center;font-size:11px}
.receipt-sep{border-top:1px dashed #111;margin:8px 0}
.receipt-meta{display:grid;gap:3px}
.receipt-meta>div{display:grid;grid-template-columns:70px 1fr;gap:8px}
.receipt-meta b{text-align:right;overflow-wrap:anywhere}
.receipt-items{display:grid;gap:8px}
.receipt-item{display:grid;gap:2px}
.receipt-item small{display:block;font-size:10px}
.receipt-item-calc{display:grid;grid-template-columns:1fr auto;gap:8px}
.receipt-bank,.receipt-footer{font-size:11px;text-align:center;margin-top:7px}
.receipt-actions{width:min(100%,460px);display:grid;gap:8px;margin-top:10px}
@media(max-width:520px){
  .filter-grid{grid-template-columns:1fr}
  .history-row{align-items:flex-start}
  .history-row .right{min-width:110px}
}
@media print{
  @page{margin:0}
  html,body{margin:0!important;padding:0!important;background:#fff!important;height:auto!important;min-height:0!important;overflow:visible!important}
  body *{visibility:hidden!important}
  #thermalReceipt,#thermalReceipt *{visibility:visible!important}
  #thermalReceipt{position:fixed!important;left:0!important;top:0!important;display:block!important;margin:0!important;padding:2mm!important;border:0!important;border-radius:0!important;box-shadow:none!important;max-width:none!important;min-height:0!important;break-inside:avoid!important;page-break-inside:avoid!important;box-sizing:border-box!important}
  #thermalReceipt[data-paper="58"]{width:58mm!important}
  #thermalReceipt[data-paper="80"]{width:80mm!important}
  .no-print,.bottom-nav,.receipt-actions{display:none!important}
  .receipt-page{padding:0!important;margin:0!important;min-height:0!important;display:block!important}
  .receipt-sep,.receipt-item,.receipt-row{break-inside:avoid;page-break-inside:avoid}
}

/* Smart Barcode Lookup */
.lookup-loading{text-align:center;display:grid;justify-items:center;gap:10px;padding:28px 18px}
.lookup-spinner{width:34px;height:34px;border:3px solid var(--border);border-top-color:currentColor;border-radius:50%;animation:dhun-spin .8s linear infinite}
@keyframes dhun-spin{to{transform:rotate(360deg)}}
.online-product-card{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:start;padding:12px;border:1px solid var(--border);border-radius:14px;background:#f8fafc;margin:10px 0}
.online-product-card img,.online-product-placeholder{width:84px;height:84px;border-radius:12px;object-fit:contain;background:#fff;border:1px solid var(--border)}
.online-product-placeholder{display:grid;place-items:center;font-size:30px}
.online-product-card>div{display:grid;gap:4px;min-width:0}
.lookup-category-hint{margin:-2px 0 10px;padding:9px 11px;border-radius:10px;background:#fff8e6;border:1px solid var(--border);font-size:12px}
@media(max-width:420px){
  .online-product-card{grid-template-columns:64px minmax(0,1fr)}
  .online-product-card img,.online-product-placeholder{width:64px;height:64px}
}

/* Online category normalization */
.category-suggestion-card{display:grid;gap:9px;margin:10px 0 14px;padding:12px;border:1px solid var(--border);border-radius:14px;background:#fffaf0}
.category-online,.category-suggested{display:grid;gap:3px}
.category-online span,.category-suggested span{font-size:12px;font-weight:700;color:var(--muted)}
.category-online small{font-size:12px;line-height:1.45}
.category-suggested b{font-size:16px}

/* Product photo editor */
.product-photo-card{display:grid;gap:10px;margin:8px 0 14px}
.product-photo-preview{width:100%;min-height:180px;max-height:280px;border:1px dashed var(--border);border-radius:16px;background:#f8fafc;display:grid;place-items:center;overflow:hidden}
.product-photo-preview img{width:100%;height:100%;max-height:280px;object-fit:contain;background:#fff}
.product-photo-placeholder{font-size:48px;opacity:.75}
.product-photo-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.product .thumb{overflow:hidden}
.product .thumb img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
@media(max-width:420px){.product-photo-actions{grid-template-columns:1fr}}


/* v23 visual refresh inspired by mobile POS reference */
:root{
  --navy:#08295f;
  --navy2:#0a4fa3;
  --blue:#0d6efd;
  --cyan:#48d8ff;
  --bg:#f3f7fc;
  --card:#ffffff;
  --text:#17324d;
  --muted:#6c7e92;
  --green:#18b878;
  --red:#ef5a67;
  --orange:#ffb547;
  --border:#e3eaf3;
}
body{background:linear-gradient(180deg,#eef5fb 0,#f8fbfe 48%,#f3f7fc 100%)}
.app-shell{background:#f7faff;box-shadow:0 0 40px rgba(18,55,94,.08)}
.dashboard-top{padding:18px 18px 34px;border-radius:0 0 30px 30px;background:linear-gradient(145deg,#06265c 0%,#0b4f9f 58%,#0d6efd 100%);position:relative;overflow:hidden}
.dashboard-top:after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-80px;top:-100px;background:rgba(72,216,255,.12)}
.dashboard-top .brand{position:relative;z-index:1}
.dashboard-top .logo{width:44px;height:44px;border-radius:15px;background:linear-gradient(135deg,#54efff,#1676ff);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.dashboard-top .top-status{margin-left:auto;width:38px;height:38px;border:1px solid rgba(255,255,255,.22);border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.dashboard-top .hero{position:relative;z-index:1;margin-top:18px}
.dashboard-top .hero h2{font-size:24px}
.dashboard-content{padding-top:16px}
.dashboard-content .store-switcher{margin-bottom:16px}

.modern-stats{margin-top:0;position:relative;z-index:2}
.stat-tile{border:0;border-radius:17px;padding:14px 14px 13px;color:#fff;text-align:left;min-height:104px;box-shadow:0 10px 24px rgba(10,42,86,.13);display:grid;grid-template-columns:1fr auto;grid-template-areas:"label icon" "value value";gap:3px}
.stat-tile>span:not(.stat-icon){grid-area:label;font-size:12px;opacity:.92}
.stat-tile strong{grid-area:value;font-size:19px;line-height:1.2;margin-top:5px;overflow-wrap:anywhere}
.stat-tile .stat-icon{grid-area:icon;width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.17);display:grid;place-items:center;font-weight:900}
.stat-blue{background:linear-gradient(135deg,#1673ff,#0d55cc)}
.stat-green{background:linear-gradient(135deg,#1fcb84,#0fa766)}
.stat-low{background:linear-gradient(135deg,#ff7b88,#eb4659)}
.stat-products{background:linear-gradient(135deg,#61b5ff,#2572ed)}
button.stat-tile{cursor:pointer}

.quick-title{margin-top:22px}
.link-btn{border:0;background:transparent;color:var(--blue);font-size:12px;font-weight:800;padding:5px}
.modern-quick .quick{min-height:96px;border:1px solid #e8eef6;box-shadow:0 5px 18px rgba(26,65,110,.06);display:grid;place-items:center;align-content:center;gap:5px}
.quick-icon{width:38px;height:38px;border-radius:13px;background:#eef5ff;color:#0d6efd;display:grid;place-items:center;font-size:19px;font-weight:900}
.modern-quick .quick:nth-child(2) .quick-icon{background:#eaf8ff;color:#0094d8}
.modern-quick .quick:nth-child(3) .quick-icon{background:#eef0ff;color:#5758e6}
.modern-quick .quick:nth-child(4) .quick-icon{background:#eef6ff;color:#2877db}
.modern-quick .quick:nth-child(5) .quick-icon{background:#edfdf6;color:#18a66f}
.modern-quick .quick:nth-child(6) .quick-icon{background:#f1f3f7;color:#52677d}

.app-page-head{background:linear-gradient(135deg,#08295f,#0c56ac);padding:16px 18px 18px;color:#fff;box-shadow:0 5px 18px rgba(11,47,107,.14)}
.app-page-head>div{display:grid;gap:1px}
.app-page-head small{font-size:11px;opacity:.72}
.app-page-head h2{color:#fff;font-size:20px}
.page-add{border:none;width:40px;height:40px;border-radius:50%;background:#1682ff;color:#fff;font-size:26px;line-height:1;box-shadow:0 7px 18px rgba(13,110,253,.32)}

.products-page{padding-top:12px}
.filter-chips{display:flex;gap:8px;overflow-x:auto;padding:0 0 11px;scrollbar-width:none}
.filter-chips::-webkit-scrollbar{display:none}
.filter-chip{white-space:nowrap;border:1px solid var(--border);background:#fff;color:var(--muted);border-radius:999px;padding:8px 13px;font-size:12px;font-weight:800}
.filter-chip.active{background:#0d6efd;color:#fff;border-color:#0d6efd}
.filter-chip.danger-chip{background:#fff0f2;color:#d93f52;border-color:#ffccd2}
.product-summary{font-size:12px;color:var(--muted);padding:2px 2px 9px}
.product-summary b{color:var(--text)}
.products-page .product-list{padding-left:0;padding-right:0}

.product{border-radius:14px;padding:10px 11px;grid-template-columns:52px minmax(0,1fr) auto;box-shadow:0 3px 13px rgba(25,65,110,.04)}
.product-low{border-color:#ffd1d7;background:linear-gradient(90deg,#fff 0%,#fff8f8 100%)}
.product .thumb{width:52px;height:52px;background:#f0f5fb;border:1px solid #e4ebf3}
.product-info{min-width:0}
.product-info h4{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stock-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:4px;font-size:11px;color:var(--muted)}
.stock-badge{font-size:10px;font-weight:900;padding:3px 7px;border-radius:999px}
.stock-badge.ok{background:#e9fbf3;color:#15915f}
.stock-badge.low{background:#ffecee;color:#dc4253}
.stock-min{font-size:10px;color:#d64a58;margin-top:3px}

.bottom-nav{border-top:0;box-shadow:0 -8px 24px rgba(24,59,98,.10);padding-top:10px}
.navbtn{font-weight:600}
.navbtn.active{color:#0876ef}
.navbtn.scan .ic{width:54px;height:54px;margin:-30px auto 3px;border:5px solid #f7faff;box-shadow:0 8px 23px rgba(13,110,253,.38)}
.navbtn.active .ic:not(:empty){transform:translateY(-1px)}

@media(max-width:420px){
  .modern-stats{gap:9px}
  .stat-tile{min-height:96px;padding:12px}
  .stat-tile strong{font-size:17px}
  .modern-quick{gap:8px}
  .modern-quick .quick{min-height:88px}
}

/* Owner user management */
.users-page{display:grid;gap:12px}
.user-summary{display:flex;justify-content:space-between;align-items:center;gap:12px}
.user-summary strong{display:block;font-size:22px;margin-top:3px}
.user-role-legend{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.user-role-legend span{font-size:10px;font-weight:800;padding:5px 8px;border-radius:999px;background:#eef4ff;color:#0b67d1}
.user-help{padding:0 2px}
.user-list{padding-left:0;padding-right:0}
.user-card{grid-template-columns:48px minmax(0,1fr) auto}
.user-inactive{opacity:.68}
.user-meta{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:3px 0 5px}
.role-badge{font-size:10px;font-weight:900;padding:4px 7px;border-radius:999px}
.role-admin{background:#eaf2ff;color:#0a5fc7}
.role-warehouse{background:#fff5df;color:#a76b00}
.role-cashier{background:#eafbf3;color:#16865a}
.status-dot{font-size:10px;color:#9a5a62}
.status-dot.active{color:#16865a}
.role-help{padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#f8fbff;font-size:12px;color:var(--muted);line-height:1.45}
.invite-info{display:grid;gap:4px;padding:12px;border-radius:12px;background:#eef8ff;border:1px solid #d7ebff}
.invite-info span{font-size:12px;color:var(--muted);line-height:1.45}
@media(max-width:420px){
  .user-summary{align-items:flex-start}
  .user-card{grid-template-columns:44px minmax(0,1fr)}
  .user-card .staff-toggle{grid-column:1/-1;width:100%}
}

/* Staff role edit */
.user-actions{display:grid;gap:6px;min-width:108px}
.promotion-note{padding:10px 12px;border-radius:12px;background:#fff8e8;border:1px solid #f3dfaa;font-size:12px;color:#7a642a;line-height:1.45}
@media(max-width:420px){
  .user-actions{grid-column:1/-1;grid-template-columns:1fr 1fr;width:100%}
}


/* Dynamic QRIS */
.qris-page{display:grid;gap:12px;justify-items:center}
.qris-payment-card{width:min(100%,420px);text-align:center;display:grid;gap:10px}
.qris-invoice{font-size:12px;color:var(--muted);letter-spacing:.04em}
.qris-amount{font-size:28px;font-weight:900;color:var(--navy)}
.qris-image{width:min(78vw,300px);aspect-ratio:1/1;object-fit:contain;margin:4px auto;border:10px solid #fff;border-radius:18px;box-shadow:0 6px 24px rgba(12,55,104,.12)}
.qris-placeholder{width:min(78vw,300px);aspect-ratio:1/1;margin:4px auto;border:2px dashed var(--border);border-radius:18px;display:grid;place-items:center;color:var(--muted);background:#f8fbff}
.qris-expiry{display:inline-flex;justify-content:center;align-items:center;margin:0 auto;padding:7px 12px;border-radius:999px;background:#fff6e5;color:#9a6800;font-size:12px;font-weight:800}
.qris-meta{display:grid;gap:7px;text-align:left;border-top:1px solid var(--border);padding-top:10px;margin-top:4px}
.qris-meta>div{display:flex;justify-content:space-between;gap:10px;font-size:12px}
.qris-meta span{color:var(--muted)}
.qris-actions{width:min(100%,420px);display:grid;gap:8px}
.qris-status-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-weight:900;background:rgba(255,255,255,.14)}
.qris-status-icon.paid{background:#1fbd7a}
.qris-status-icon.failed,.qris-status-icon.expired{background:#e94f61}
.qris-result{display:grid;gap:4px;padding:16px;border-radius:14px}
.qris-result span{font-size:12px;line-height:1.45}
.qris-paid{background:#eafaf3;color:#13724e}
.qris-failed,.qris-expired{background:#fff0f2;color:#a63b49}
.integration-card{display:grid;gap:14px}
.integration-status{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px}
.integration-status>span{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:900}
.integration-status.connected{background:#eafaf3}
.integration-status.connected>span{background:#18b878;color:#fff}
.integration-status.pending{background:#fff7e8}
.integration-status.pending>span{background:#ffb547;color:#fff}
.integration-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.integration-grid>div{display:grid;gap:3px;padding:10px;border:1px solid var(--border);border-radius:12px;background:#f8fbff}
.integration-grid span{font-size:11px;color:var(--muted)}
.integration-grid b{font-size:13px}
.integration-note{display:grid;gap:4px;padding:12px;border-radius:12px;background:#eef6ff}
.integration-note span{font-size:12px;color:var(--muted);line-height:1.45}
@media(max-width:420px){.integration-grid{grid-template-columns:1fr}}


/* C.5 operational finishing */
.pending-qris-alert{display:grid;gap:10px;border-color:#ffd59a;background:linear-gradient(135deg,#fffaf0,#fff4df)}
.pending-qris-alert b{color:#8a5b00}
.payment-status{font-weight:900}
.payment-status.status-paid{background:#e8fbf2;color:#14875b}
.payment-status.status-pending{background:#fff4d9;color:#9b6900}
.payment-status.status-failed{background:#ffecef;color:#c83d51}
.payment-status.status-expired{background:#f2f3f6;color:#687386}
.payment-status.status-void{background:#ffecef;color:#b53748}
.payment-status.status-refunded,.payment-status.status-partial{background:#eef3ff;color:#4666b0}
.role-matrix-wrap{overflow:hidden;display:grid;gap:14px}
.role-matrix{display:grid;grid-template-columns:minmax(145px,1.6fr) repeat(4,minmax(58px,.7fr));border:1px solid var(--border);border-radius:14px;overflow:auto}
.role-matrix>div{padding:9px 7px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);font-size:11px;text-align:center;min-width:58px;background:#fff}
.role-matrix .rm-head{font-weight:900;background:#eef5ff;color:#164a86}
.role-matrix .rm-feature{text-align:left;font-weight:800;min-width:145px}
.role-matrix .rm-yes{color:#16875b;font-weight:900}
.role-matrix .rm-no{color:#9aa6b3}
@media(max-width:420px){
  .role-matrix{grid-template-columns:minmax(135px,1.5fr) repeat(4,58px)}
}

/* Stage D boot fallback */
.boot-fallback{min-height:100vh;display:grid;place-items:center;padding:24px;font-family:system-ui;background:#f4f7fb;color:#0b2f6b}
.boot-fallback>div{max-width:440px;text-align:center}


/* Cashier read-only stock info */
.stock-info-page{display:grid;gap:12px}
.readonly-banner{display:grid;gap:4px;background:#eef6ff;border:1px solid #dcecff}
.readonly-banner span{font-size:12px;color:var(--muted);line-height:1.45}
.readonly-banner.compact{margin-top:4px}
.stock-scan-btn{margin-top:-2px}
.stock-info-row{width:100%;text-align:left;background:#fff}
.stock-info-row .price{margin-top:3px}
.stock-detail-page{display:grid;place-items:start center}
.stock-detail-card{width:min(100%,430px);display:grid;gap:12px;text-align:center}
.stock-detail-photo{width:112px;height:112px;border-radius:22px;background:#f0f5fb;border:1px solid var(--border);display:grid;place-items:center;margin:0 auto;font-size:44px;overflow:hidden}
.stock-detail-photo img{width:100%;height:100%;object-fit:cover}
.stock-detail-card h3{margin:0;font-size:20px}
.stock-detail-price{font-size:24px;font-weight:900;color:var(--navy)}
.stock-detail-status{display:flex;align-items:center;gap:10px;text-align:left;padding:12px;border-radius:14px}
.stock-detail-status>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:900}
.stock-detail-status div{display:grid;gap:2px}
.stock-detail-status small{font-size:11px}
.stock-detail-status.ok{background:#eafaf3;color:#157652}
.stock-detail-status.ok>span{background:#1db97a;color:#fff}
.stock-detail-status.low{background:#fff0f2;color:#ac3e4e}
.stock-detail-status.low>span{background:#eb5667;color:#fff}
.stock-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left}
.stock-detail-grid>div{display:grid;gap:3px;padding:10px;border-radius:12px;background:#f8fbff;border:1px solid var(--border)}
.stock-detail-grid span{font-size:10px;color:var(--muted)}
.stock-detail-grid b{font-size:12px;overflow-wrap:anywhere}
@media(max-width:380px){.stock-detail-grid{grid-template-columns:1fr}}


/* Stage E5 multi-store owner dashboard */
.store-switcher{display:grid;gap:10px;margin-bottom:12px}
.store-switcher>div:first-child{display:grid;gap:2px}
.store-switcher small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.store-switcher b{font-size:16px;color:var(--navy)}
.store-switch-actions{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.store-select{margin:0;min-width:0}
.group-dashboard{display:grid;gap:14px}
.group-hero{display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(135deg,#0b2f6b,#174f9c);color:#fff;border:0}
.group-hero>div:first-child{display:grid;gap:4px}
.group-hero small{opacity:.78;font-size:11px}
.group-hero strong{font-size:28px;line-height:1.05}
.group-hero span{font-size:11px;opacity:.82}
.group-store-count{width:66px;height:66px;border-radius:20px;background:rgba(255,255,255,.13);display:grid;place-items:center;font-size:22px}
.group-store-count b{font-size:13px;margin-top:-10px}
.best-store-card{display:grid;gap:4px;background:#f3f8ff;border-color:#d8e8ff}
.best-store-card small{font-size:10px;color:var(--muted);text-transform:uppercase;font-weight:800}
.best-store-card b{font-size:17px;color:var(--navy)}
.best-store-card strong{font-size:22px;color:#1769c2}
.group-store-list{display:grid;gap:10px}
.group-store-card{width:100%;text-align:left;display:grid;gap:10px;background:#fff}
.group-store-card.active-store{border:2px solid #2e74c8;background:#f7fbff}
.group-store-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.group-store-head>div{display:grid;gap:2px}
.group-store-head small{font-size:10px;color:var(--muted)}
.group-store-head>strong{font-size:15px;color:var(--navy);white-space:nowrap}
.group-store-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.group-store-metrics span{display:grid;gap:2px;padding:8px;border-radius:10px;background:#f7f9fc;font-size:9px;color:var(--muted)}
.group-store-metrics b{font-size:13px;color:var(--text)}
.group-store-foot{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted);border-top:1px solid var(--border);padding-top:8px}
.group-store-foot span:last-child{font-weight:800;color:#1769c2}
@media(max-width:390px){
  .store-switch-actions{grid-template-columns:1fr}
  .group-store-metrics{grid-template-columns:1fr 1fr}
  .group-store-head{display:grid}
}


/* Stage E5.1 owner branch creation */
.store-quota-bar{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.store-quota-bar>div:first-child{display:grid;gap:2px}
.store-quota-bar small,.store-quota small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:800}
.store-quota-bar b,.store-quota b{font-size:18px;color:var(--navy)}
.store-quota-bar span,.store-quota span{font-size:11px;color:var(--muted)}
.quota-limit-note{grid-column:1/-1;font-size:10px;color:#a85a00;background:#fff7e8;border:1px solid #ffe0aa;padding:9px 10px;border-radius:10px}
.branch-form{display:grid;gap:10px}
.store-quota{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#f4f8ff;border:1px solid #dce8f8}
.store-quota>div{display:grid;gap:2px}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.copy-master-option{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:14px;background:#f8fbff;border:1px solid var(--border);cursor:pointer}
.copy-master-option input{margin-top:3px;width:18px;height:18px;flex:0 0 auto}
.copy-master-option span{display:grid;gap:3px}
.copy-master-option b{font-size:12px;color:var(--text)}
.copy-master-option small{font-size:10px;color:var(--muted);line-height:1.4}
.stock-isolation-note{display:grid;gap:4px;background:#eefaf4;border-color:#d4f1e2}
.stock-isolation-note b{color:#177653}
.stock-isolation-note span{font-size:10px;color:var(--muted);line-height:1.45}
@media(max-width:390px){
  .store-quota-bar{grid-template-columns:1fr}
  .form-grid-2{grid-template-columns:1fr}
}


/* Subscription / package management */
.superadmin-page{display:grid;gap:14px}
.sa-section-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.subscription-request-list{display:grid;gap:10px;margin-top:10px}
.subscription-request{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:12px;background:#fbfdff}
.plan-change-line{display:flex;align-items:center;gap:7px;margin:5px 0;font-size:11px}
.plan-change-line span{padding:4px 7px;background:#f3f6fb;border-radius:8px}
.tenant-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.subscription-page{display:grid;gap:14px}
.current-plan-card{display:grid;gap:5px;background:#eef6ff;border-color:#d8e9ff}
.current-plan-card small{font-size:10px;color:var(--muted);text-transform:uppercase;font-weight:800}
.current-plan-card>b{font-size:20px;color:var(--navy)}
.plan-limit-row{display:flex;gap:8px;flex-wrap:wrap}
.plan-limit-row span{font-size:10px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:5px 8px}
.pending-subscription-card{display:grid;gap:4px;background:#fff8e8;border-color:#ffe0a5}
.pending-subscription-card b{color:#936100}
.plan-grid{display:grid;gap:10px}
.plan-card{display:grid;gap:10px}
.plan-card.active-plan{border:2px solid #2b75c8;background:#f7fbff}
.plan-card-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.plan-card-head>div{display:grid;gap:2px}
.plan-card-head small{font-size:9px;color:var(--muted);font-weight:800;letter-spacing:.08em}
.plan-card-head b{font-size:16px}
.plan-price{font-size:18px;font-weight:900;color:var(--navy)}
.plan-features{display:flex;flex-wrap:wrap;gap:6px}
.plan-features span{font-size:10px;padding:6px 8px;background:#f5f8fc;border-radius:9px}
.subscription-note{display:grid;gap:4px;background:#f8fbff}
.subscription-note span{font-size:10px;color:var(--muted);line-height:1.45}
@media(max-width:420px){
  .subscription-request{grid-template-columns:1fr}
  .subscription-request .primary{width:100%}
}


/* Smart Search v2 */
.smart-search-entry{margin-top:-2px}
.smart-search-page{display:grid;gap:12px}
.smart-search-box{display:grid;gap:8px}
.smart-search-input{display:grid;grid-template-columns:1fr auto;gap:8px}
.smart-search-meta{font-size:10px;color:var(--muted);font-weight:700;padding:0 2px}
.smart-search-results{display:grid;gap:9px}
.smart-result{width:100%;display:grid;grid-template-columns:72px 1fr;gap:10px;text-align:left;align-items:center}
.smart-result-photo{width:72px;height:72px;border-radius:14px;background:#f2f6fb;border:1px solid var(--border);display:grid;place-items:center;overflow:hidden;font-size:30px}
.smart-result-photo img{width:100%;height:100%;object-fit:cover}
.smart-result-info{min-width:0;display:grid;gap:3px}
.smart-result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.smart-result-head b{font-size:13px;line-height:1.3}
.confidence-badge{font-size:9px;font-weight:900;padding:4px 6px;border-radius:999px;background:#eaf7f0;color:#16724f;white-space:nowrap}
.smart-result-source{font-size:9px;color:#2c67a6;font-weight:800;margin-top:2px;overflow-wrap:anywhere}
@media(max-width:380px){
  .smart-search-input{grid-template-columns:1fr}
  .smart-result{grid-template-columns:60px 1fr}
  .smart-result-photo{width:60px;height:60px}
}


/* Retail Scanner Pro v37 */
.scan-pro-wrap{display:grid;gap:10px;padding-bottom:18px}
.scan-status{margin:0 16px;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.scan-status .scan-dot{width:9px;height:9px;border-radius:50%;background:#8da0b5;box-shadow:0 0 0 4px rgba(141,160,181,.14)}
.scan-status.active .scan-dot,.scan-status.detect .scan-dot{background:#2c7be5}
.scan-status.success{color:#16724f}
.scan-status.success .scan-dot{background:#21b97b;box-shadow:0 0 0 4px rgba(33,185,123,.15)}
.scan-status.compat{color:#7a5c00}
.scan-status.compat .scan-dot,.scan-status.warning .scan-dot{background:#f0a92f;box-shadow:0 0 0 4px rgba(240,169,47,.15)}
.scan-status.error{color:#b23a49}
.scan-status.error .scan-dot{background:#e65b6a}
.pro-scan-box{min-height:440px}
.scan-canvas{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pro-scan-box .scan-frame{width:82%;height:46%;max-height:210px;border:1px solid rgba(255,255,255,.35);border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.42)}
.scan-corner{position:absolute;width:28px;height:28px;border-color:#42ff9b}
.scan-corner.tl{left:-2px;top:-2px;border-left:4px solid;border-top:4px solid;border-radius:16px 0 0 0}
.scan-corner.tr{right:-2px;top:-2px;border-right:4px solid;border-top:4px solid;border-radius:0 16px 0 0}
.scan-corner.bl{left:-2px;bottom:-2px;border-left:4px solid;border-bottom:4px solid;border-radius:0 0 0 16px}
.scan-corner.br{right:-2px;bottom:-2px;border-right:4px solid;border-bottom:4px solid;border-radius:0 0 16px 0}
.pro-scan-box .scan-line{width:76%;animation:scanSweep 1.8s ease-in-out infinite}
@keyframes scanSweep{0%,100%{transform:translateY(-72px);opacity:.35}50%{transform:translateY(72px);opacity:1}}
.pro-scan-box .scan-tip{left:50%;transform:translateX(-50%);width:max-content;max-width:84%;text-align:center;white-space:normal;line-height:1.35}
.scan-controls{margin:0 16px;display:grid;gap:9px}
.zoom-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.zoom-controls>span{font-size:10px;color:var(--muted);font-weight:800;margin-right:auto}
.zoom-btn{border:1px solid var(--border);background:#fff;color:var(--text);border-radius:999px;padding:7px 11px;font-size:11px;font-weight:800}
.zoom-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.zoom-controls.disabled{opacity:.45;pointer-events:none}
.scan-help{font-size:10px;color:var(--muted);line-height:1.45}
.scan-failure{margin:0 16px;display:grid;gap:7px;background:#fff8e9;border-color:#ffe2ad}
.scan-failure>b{color:#946000}
.scan-failure>span{font-size:10px;color:var(--muted);line-height:1.45}
.scan-failure>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:380px){
  .pro-scan-box{min-height:390px}
  .scan-failure>div{grid-template-columns:1fr}
}


/* Super Admin package/payment forms */
.plan-admin-form,.payment-confirm-form{display:grid;gap:10px}
.plan-admin-info{padding:11px 12px;border-radius:12px;background:#f4f8ff;border:1px solid #dce8f8}
.plan-admin-info>div{display:grid;gap:3px}
.plan-admin-info b{font-size:14px;color:var(--navy)}
.plan-admin-info span{font-size:10px;color:var(--muted)}
.admin-warning{display:grid;gap:4px;background:#fff8e8;border-color:#ffe0a8}
.admin-warning b{color:#946000}
.admin-warning span{font-size:10px;color:var(--muted);line-height:1.45}
.payment-confirm-note{display:grid;gap:4px;background:#eef7ff;border-color:#d7e9ff}
.payment-confirm-note b{color:var(--navy)}
.payment-confirm-note span{font-size:10px;color:var(--muted);line-height:1.45}


/* Subscription payment verification flow v38 */
.request-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.payment-stage{font-size:9px;font-weight:900;padding:5px 8px;border-radius:999px;white-space:nowrap}
.payment-stage.pending{background:#fff4d8;color:#946300}
.payment-stage.verify{background:#eaf4ff;color:#1768b6}
.payment-stage.rejected{background:#ffecef;color:#b43c4e}
.invoice-line{display:flex;justify-content:space-between;gap:10px;margin-top:8px;padding:8px 10px;border-radius:10px;background:#f7f9fc;font-size:10px}
.invoice-line b{color:var(--navy)}
.payment-state-note{margin-top:8px;font-size:10px;color:#946300;background:#fff9ec;border:1px solid #ffe5b6;padding:8px 10px;border-radius:10px}
.payment-details{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
.payment-details>div{display:grid;gap:2px;padding:8px;border:1px solid var(--border);border-radius:10px;background:#fff}
.payment-details span{font-size:9px;color:var(--muted)}
.payment-details b{font-size:10px;overflow-wrap:anywhere}
.request-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.request-actions .danger-outline{grid-column:1/-1;color:#b43c4e;border-color:#efb9c1}
.subscription-status-verify{border:2px solid #cfe5ff;background:#fbfdff}
.subscription-status-rejected{border-color:#f2c8ce}
.pending-sub-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pending-sub-head>div{display:grid;gap:2px}
.pending-sub-head>div>b{font-size:16px;color:#9a6600}
.pending-subscription-card.status-awaiting_verification{background:#eef7ff;border-color:#cfe6ff}
.pending-subscription-card.status-awaiting_verification .pending-sub-head>div>b{color:#1768b6}
.pending-subscription-card.status-rejected{background:#fff1f3;border-color:#f4c7ce}
.pending-subscription-card.status-rejected .pending-sub-head>div>b{color:#b43c4e}
.invoice-amount{font-size:20px;font-weight:900;color:var(--navy);margin:4px 0}
.payment-reject-reason{font-size:10px;color:#a93647;background:#fff0f2;border:1px solid #f3c5cc;padding:8px 10px;border-radius:10px;margin-top:6px}
.owner-payment-form{display:grid;gap:10px}
.invoice-payment-summary{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;padding:12px;border-radius:14px;background:#f4f8ff;border:1px solid #dce9fb}
.invoice-payment-summary span{font-size:10px;color:var(--muted)}
.invoice-payment-summary b,.invoice-payment-summary strong{text-align:right}
.invoice-payment-summary strong{font-size:18px;color:var(--navy)}
.payment-confirm-note{display:grid;gap:4px;background:#eefaf4;border-color:#d2efdf}
.payment-confirm-note b{color:#177653}
.payment-confirm-note span{font-size:10px;color:var(--muted);line-height:1.45}
.plan-admin-info>div{display:grid;gap:3px;padding:10px;border-radius:12px;background:#f5f8fd;border:1px solid var(--border)}
.plan-admin-info span{font-size:10px;color:var(--muted)}
.admin-warning{display:grid;gap:4px;background:#fff7e8;border-color:#ffe0aa}
.admin-warning span{font-size:10px;color:var(--muted);line-height:1.45}
@media(max-width:390px){
  .payment-details,.request-actions{grid-template-columns:1fr}
  .request-actions .danger-outline{grid-column:auto}
  .request-title-row{display:grid}
}

/* iOS scanner preview hardening v51 */
.pro-scan-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:0}
.pro-scan-box .scan-frame,.pro-scan-box .scan-line,.pro-scan-box .scan-tip{z-index:2}
.pro-scan-box .scan-canvas{z-index:-1}

/* Locked package tile polish */
.quick.quick-locked{position:relative}
.quick.quick-locked .package-badge{display:inline-flex;align-items:center;justify-content:center;margin-top:6px;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700;line-height:1;background:rgba(255,183,0,.14);border:1px solid rgba(255,183,0,.28);color:#a86b00;white-space:nowrap}

/* Mr. DHUN Technology branding */
.brand-icon{width:44px;height:44px;object-fit:contain;display:block;flex:0 0 44px}
.login-card{padding-top:20px}
.login-brand-logo{display:flex;justify-content:center;align-items:center;padding:4px 0 10px}
.login-brand-logo img{width:min(100%,360px);height:auto;display:block}
@media(max-width:420px){
  .login-brand-logo img{width:min(100%,310px)}
}

/* Login refresh v61 */
.login-page{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:28px 20px 34px;background:linear-gradient(180deg,#f7fbff 0%,#eef5fb 100%)}
.login-brand-block{text-align:center;display:grid;justify-items:center;gap:4px}
.login-main-logo{display:block;width:min(100%,360px);height:auto;max-height:150px;object-fit:contain}
.login-product-name{font-size:22px;font-weight:900;color:var(--navy);margin-top:2px}
.login-tagline{font-size:12px;color:var(--muted);letter-spacing:.03em}
.login-card{width:100%;padding:20px;border-radius:22px}
.login-welcome h2{margin:4px 0 4px;font-size:22px;color:var(--text)}
.login-welcome p{margin:0 0 4px;color:var(--muted);font-size:13px;line-height:1.45}
.login-note{text-align:center;margin-top:8px}
.login-footer{text-align:center;color:var(--muted);font-size:11px;padding-top:2px}
@media(max-width:420px){
  .login-page{justify-content:flex-start;padding-top:28px}
  .login-main-logo{width:min(100%,320px);max-height:125px}
  .login-card{padding:18px}
}

/* Login exact artwork v63 */
.login-brand-block{margin:0 auto 2px;width:100%}
.login-main-logo{width:min(100%,390px)!important;max-height:none!important;object-fit:contain;display:block;margin:0 auto}
@media(max-width:420px){.login-main-logo{width:min(100%,360px)!important}}


/* v64 layout normalization — mobile/desktop polish */
html{min-height:100%;background:#eef5fb}
body{min-height:100vh;overflow-x:hidden}
.app-shell{width:100%;max-width:560px;min-height:100dvh;margin:0 auto;overflow-x:hidden}
.content{width:100%;min-width:0}
.card{min-width:0}
img{max-width:100%}

/* Login: logo is the only header/brand; compact and optically centered */
.login-page{
  min-height:100dvh;
  width:100%;
  max-width:560px;
  margin:0 auto;
  padding:clamp(20px,5vh,44px) 18px max(24px,env(safe-area-inset-bottom));
  justify-content:center;
  align-items:stretch;
  gap:14px;
}
.login-brand-block{
  width:100%;
  max-width:430px;
  margin:0 auto;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.login-main-logo{
  width:min(92%,390px)!important;
  max-width:390px!important;
  height:auto!important;
  margin:0 auto!important;
  object-fit:contain;
}
.login-card{
  width:100%;
  max-width:430px;
  margin:0 auto;
  padding:20px;
  border-radius:22px;
  box-shadow:0 12px 32px rgba(11,47,107,.08);
}
.login-card .filter-chips{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:0;
  overflow:visible;
}
.login-card .filter-chip{
  width:100%;
  min-width:0;
  padding:9px 10px;
  text-align:center;
}
.login-welcome{margin:2px 0 0}
.login-welcome h2{line-height:1.2}
.login-card label{margin-top:2px}
.login-card .field{min-height:46px}
.login-card .primary{min-height:46px}
.login-footer{width:100%;max-width:430px;margin:0 auto;padding:0;text-align:center}

/* Consistent application headers */
.app-page-head,.page-head{
  min-height:70px;
  gap:12px;
}
.app-page-head>div,.page-head>div{min-width:0}
.app-page-head h2,.page-head h2{
  line-height:1.2;
  overflow-wrap:anywhere;
}
.app-page-head .outline{
  flex:0 0 auto;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.dashboard-top .brand{min-width:0}
.dashboard-top .brand>div:not(.top-status){min-width:0}
.brand-icon{width:42px;height:42px;flex-basis:42px}
.dashboard-top .brand h1{line-height:1.1}
.dashboard-top .brand .sub{margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Normalize cards, forms and action grids */
.auth-card,.menu-stack,.users-page{min-width:0}
.field,select.field,textarea.field{max-width:100%;min-width:0}
.filter-grid,.form-grid-2,.checkout,.request-actions,.payment-details{min-width:0}
.history-row>*{min-width:0}
.history-row b,.history-row strong,.history-row .label{overflow-wrap:anywhere}
.quick-grid{align-items:stretch}
.modern-quick .quick{
  height:100%;
  min-width:0;
  padding:12px 7px;
}
.modern-quick .quick b{
  line-height:1.25;
  overflow-wrap:anywhere;
}
.quick.quick-locked .package-badge{
  max-width:100%;
  white-space:normal;
  text-align:center;
  line-height:1.2;
}

/* Store switcher and subscription/package areas stay inside their cards */
.store-switcher{min-width:0;overflow:hidden}
.store-switch-actions{min-width:0}
.store-select{width:100%;min-width:0}
.plan-admin-info,.pending-subscription-card,.subscription-status-verify{min-width:0;overflow:hidden}
.invoice-line,.request-title-row,.pending-sub-head{min-width:0}
.invoice-line>*{min-width:0;overflow-wrap:anywhere}

/* Mobile optical spacing */
@media(max-width:420px){
  .login-page{
    justify-content:center;
    padding:22px 14px max(22px,env(safe-area-inset-bottom));
    gap:12px;
  }
  .login-brand-block{max-width:360px}
  .login-main-logo{width:min(94%,340px)!important}
  .login-card{padding:17px 16px;border-radius:20px}
  .login-welcome h2{font-size:20px}
  .login-welcome p{font-size:12px}
  .content{padding-left:14px;padding-right:14px}
  .app-page-head,.page-head{padding-left:14px;padding-right:14px}
  .dashboard-top{padding-left:16px;padding-right:16px}
  .quick-grid{gap:8px}
  .modern-quick .quick{min-height:90px}
}
@media(max-width:360px){
  .login-main-logo{width:min(94%,310px)!important}
  .login-card .filter-chip{font-size:11px;padding-left:6px;padding-right:6px}
  .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-page-head h2,.page-head h2{font-size:18px}
}


/* v65 futuristic login */
.login-tech{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(circle at 82% 18%,rgba(21,139,255,.32),transparent 32%),
    radial-gradient(circle at 8% 82%,rgba(0,224,255,.22),transparent 34%),
    linear-gradient(145deg,#020d25 0%,#041c43 45%,#063b82 100%);
  color:#fff;
}
.login-tech:before{
  content:"";position:absolute;inset:0;z-index:-2;opacity:.34;
  background-image:
    linear-gradient(rgba(31,133,255,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(31,133,255,.16) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 88%);
}
.login-tech:after{
  content:"";position:absolute;left:-20%;right:-20%;bottom:-18%;height:38%;z-index:-1;
  border:2px solid rgba(0,211,255,.38);border-radius:50% 50% 0 0;
  transform:rotate(-5deg);box-shadow:0 -16px 55px rgba(0,111,255,.22);
}
.login-tech-inner{width:100%;max-width:440px;margin:auto;display:grid;gap:16px;position:relative;z-index:2}
.login-ambient{position:absolute;border-radius:50%;filter:blur(12px);pointer-events:none;z-index:-1}
.login-ambient-a{width:320px;height:320px;right:-170px;top:8%;background:rgba(0,112,255,.18);border:1px solid rgba(0,221,255,.22)}
.login-ambient-b{width:280px;height:280px;left:-160px;bottom:5%;background:rgba(0,221,255,.12);border:1px solid rgba(0,112,255,.25)}
.login-tech .login-brand-block{max-width:410px;filter:drop-shadow(0 10px 26px rgba(0,0,0,.32))}
.login-tech .login-main-logo{width:min(96%,400px)!important}
.login-glass{
  max-width:440px;
  background:linear-gradient(145deg,rgba(4,30,69,.78),rgba(3,19,49,.72));
  border:1px solid rgba(36,190,255,.55);
  box-shadow:0 20px 55px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.login-tech .login-welcome{text-align:center}
.login-tech .login-welcome h2{color:#fff}
.login-tech .login-welcome p,.login-tech .login-card label,.login-tech .login-note,.login-tech .login-footer{color:#b9cce8}
.login-tabs{background:rgba(1,14,39,.42);padding:4px!important;border:1px solid rgba(83,147,235,.3);border-radius:15px}
.login-tech .login-tabs .filter-chip{border:0;background:transparent;color:#b9cce8}
.login-tech .login-tabs .filter-chip.active{background:linear-gradient(90deg,#126dff,#10c9f4);color:#fff;box-shadow:0 7px 18px rgba(0,121,255,.28)}
.login-input-wrap{position:relative}
.login-input-wrap>span{position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:2;color:#8fb9f2;font-size:16px}
.login-tech .login-input-wrap .field{
  padding-left:42px;background:rgba(1,18,48,.58);color:#fff;
  border:1px solid rgba(88,148,226,.46);box-shadow:inset 0 1px 8px rgba(0,0,0,.12)
}
.login-tech .login-input-wrap .field::placeholder{color:#7692b8}
.login-tech .login-input-wrap .field:focus{outline:none;border-color:#17c9ff;box-shadow:0 0 0 3px rgba(23,201,255,.12)}
.login-button{border:1px solid rgba(92,222,255,.45);background:linear-gradient(90deg,#1167ff,#08c9ee);box-shadow:0 9px 25px rgba(0,111,255,.32);font-size:15px}
.login-button:active{transform:translateY(1px)}
.login-tech .login-footer{text-shadow:0 1px 8px rgba(0,0,0,.4)}
@media(max-width:420px){
  .login-tech{padding:18px 14px max(20px,env(safe-area-inset-bottom))}
  .login-tech-inner{gap:12px}
  .login-tech .login-brand-block{max-width:350px}
  .login-tech .login-main-logo{width:min(96%,340px)!important}
  .login-glass{padding:17px 16px}
}


/* v66 login logo size correction */
.login-tech .login-brand-block{max-width:205px!important}
.login-tech .login-main-logo{width:100%!important;max-width:205px!important}
@media(max-width:420px){
  .login-tech .login-brand-block{max-width:175px!important}
  .login-tech .login-main-logo{width:100%!important;max-width:175px!important}
}


/* v68 final login composition */
.login-tech .login-brand-block{
  max-width:410px!important;
  width:100%!important;
  margin:0 auto 4px!important;
  background:transparent!important;
  overflow:visible;
}
.login-tech .login-main-logo{
  width:min(96%,400px)!important;
  max-width:400px!important;
  height:auto!important;
  mix-blend-mode:screen;
  filter:contrast(1.08) saturate(1.08) drop-shadow(0 10px 24px rgba(0,0,0,.28));
}
@media(max-width:420px){
  .login-tech .login-brand-block{max-width:350px!important}
  .login-tech .login-main-logo{width:min(96%,340px)!important;max-width:340px!important}
}


/* v70 final uploaded transparent login logo */
.login-tech .login-main-logo{
  width:min(96%,400px)!important;
  max-width:400px!important;
  height:auto!important;
  mix-blend-mode:normal!important;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.28))!important;
  background:transparent!important;
}
@media(max-width:420px){
  .login-tech .login-main-logo{width:min(96%,340px)!important;max-width:340px!important}
}


/* v71 — light-blue futuristic login, CSS-only (no background image asset needed) */
body:has(.login-tech){
  background:
    radial-gradient(circle at 14% 18%,rgba(255,255,255,.92) 0 2px,transparent 3px),
    radial-gradient(circle at 82% 16%,rgba(255,255,255,.75) 0 3px,transparent 4px),
    radial-gradient(circle at 72% 76%,rgba(255,255,255,.58) 0 2px,transparent 3px),
    linear-gradient(135deg,#dff7ff 0%,#b9ebff 28%,#75cfff 62%,#2f91ed 100%)!important;
}
.login-tech{
  position:relative!important;
  overflow:hidden!important;
  min-height:100dvh!important;
  background:
    linear-gradient(135deg,transparent 0 43%,rgba(255,255,255,.25) 43.2% 44%,transparent 44.2% 100%),
    radial-gradient(ellipse at -5% 92%,rgba(0,92,224,.88) 0 25%,transparent 25.4%),
    radial-gradient(ellipse at 100% 93%,rgba(0,116,239,.76) 0 27%,transparent 27.4%),
    linear-gradient(145deg,#e8faff 0%,#c9f0ff 30%,#8ed9ff 63%,#50adf4 100%)!important;
}
.login-tech::before{
  content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important;opacity:.75!important;
  background-image:
    linear-gradient(30deg,transparent 48%,rgba(255,255,255,.36) 49%,rgba(255,255,255,.36) 50%,transparent 51%),
    linear-gradient(150deg,transparent 48%,rgba(20,125,220,.16) 49%,rgba(20,125,220,.16) 50%,transparent 51%)!important;
  background-size:130px 130px!important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 72%)!important;
}
.login-tech::after{
  content:""!important;position:absolute!important;left:-15%!important;right:-15%!important;bottom:-14%!important;height:42%!important;
  border-radius:50% 50% 0 0!important;pointer-events:none!important;
  background:linear-gradient(180deg,rgba(255,255,255,.68),rgba(74,182,255,.5) 25%,rgba(0,96,225,.88) 70%)!important;
  transform:rotate(-4deg)!important;box-shadow:0 -18px 0 rgba(255,255,255,.28),0 -36px 0 rgba(61,180,255,.22)!important;
}
.login-tech .login-card,.login-tech form,.login-tech .login-shell{position:relative!important;z-index:2!important}
.login-tech .login-card{
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(226,247,255,.70))!important;
  border:1px solid rgba(255,255,255,.92)!important;
  box-shadow:0 24px 70px rgba(0,71,145,.22),inset 0 1px 0 rgba(255,255,255,.9)!important;
  backdrop-filter:blur(18px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(125%)!important;
}
.login-tech .login-main-logo{filter:drop-shadow(0 8px 16px rgba(0,67,150,.18))!important}


/* v72 — login typography contrast fix for light background */
.login-tech .login-card h1,
.login-tech .login-card h2,
.login-tech .login-card h3,
.login-tech .login-title{
  color:#08245f!important;
  text-shadow:none!important;
  opacity:1!important;
}
.login-tech .login-card p,
.login-tech .login-subtitle{
  color:#5474a6!important;
  opacity:1!important;
}
.login-tech .login-card label{
  color:#315d96!important;
  opacity:1!important;
}
.login-tech .login-card input{
  color:#0b2d62!important;
  background:rgba(255,255,255,.90)!important;
  border-color:rgba(66,143,216,.32)!important;
  opacity:1!important;
}
.login-tech .login-card input::placeholder{
  color:#7893b8!important;
  opacity:1!important;
}
.login-tech .login-card .login-foot,
.login-tech .login-card .login-note{
  color:#6682a8!important;
  opacity:1!important;
}


/* Boot splash branding — use logo instead of DHUN System text */
.boot-fallback .boot-brand{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.boot-fallback .boot-brand img{display:block;width:min(68vw,330px);height:auto;object-fit:contain}
.boot-fallback .boot-brand small{display:block;color:#0b3d78;font-size:16px;letter-spacing:.1px}


/* PHASE 9 — responsive desktop workspace */
.owner-brand-icon{object-fit:contain}
.owner-brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:900px){
 body{background:#eef5fb}
 .dashboard-top{width:260px!important;position:fixed!important;left:0!important;top:0!important;bottom:0!important;min-height:100vh!important;border-radius:0!important;padding:30px 22px!important;z-index:20!important;box-shadow:10px 0 35px rgba(11,47,107,.10)!important}
 .dashboard-top .brand-icon{width:58px!important;height:58px!important;border-radius:16px!important}
 .dashboard-top .brand h1{font-size:20px!important}
 .dashboard-top .hero{margin-top:46px!important}
 .dashboard-top .hero h2{font-size:28px!important}
 .dashboard-content{margin-left:260px!important;width:calc(100% - 260px)!important;max-width:none!important;padding:32px 38px 110px!important;box-sizing:border-box!important}
 .dashboard-content .store-switcher{display:grid!important;grid-template-columns:minmax(240px,.8fr) minmax(440px,1.2fr)!important;gap:24px!important;align-items:center!important}
 .dashboard-content .store-switch-actions{display:grid!important;grid-template-columns:minmax(280px,1fr) auto!important;gap:14px!important}
 .dashboard-content .modern-stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important}
 .dashboard-content .modern-quick{display:grid!important;grid-template-columns:repeat(5,minmax(135px,1fr))!important;gap:16px!important}
 .dashboard-content .quick{min-height:132px!important}
 .bottom-nav,.mobile-bottom-nav{display:none!important}
}
@media (min-width:1280px){.dashboard-content .modern-quick{grid-template-columns:repeat(6,minmax(140px,1fr))!important}}


/* Phase 9 desktop navigation: reuse existing dashboard buttons, preserve click handlers */
@media(min-width:900px){
 .dashboard-top{overflow-y:auto!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important}
 .dashboard-top .brand{flex-wrap:wrap!important;gap:12px!important}
 .dashboard-top .owner-brand-name{font-size:18px!important;max-width:145px!important}
 .dashboard-top .hero{margin-top:28px!important}
 .dashboard-content .modern-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .dashboard-content .modern-quick{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .dashboard-content .quick{min-width:0!important}
 .dashboard-content .store-switcher{grid-template-columns:1fr!important}
 .dashboard-content .store-switch-actions{grid-template-columns:minmax(0,1fr) auto!important}
}
@media(min-width:1250px){
 .dashboard-content .modern-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important}
 .dashboard-content .modern-quick{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}
@media(min-width:1600px){
 .dashboard-content .modern-quick{grid-template-columns:repeat(6,minmax(0,1fr))!important}
}
@media(min-width:900px) and (max-width:1050px){
 .dashboard-top{width:220px!important}
 .dashboard-content{margin-left:220px!important;width:calc(100% - 220px)!important;padding:24px!important}
}


/* Phase 9 hotfix: remove inherited mobile 560px shell constraint on desktop */
@media screen and (min-width:900px){
 html,body,#app{width:100%!important;min-width:0!important;max-width:none!important}
 #app>.app-shell{display:block!important;width:100%!important;max-width:none!important;margin:0!important;overflow:visible!important;box-shadow:none!important;min-height:100vh!important;padding-bottom:0!important}
 #app>.app-shell>.dashboard-content{display:block!important;width:calc(100% - 260px)!important;max-width:none!important;margin:0 0 0 260px!important;padding:32px 38px 110px!important;min-width:0!important}
 .dashboard-content .modern-stats{margin-top:22px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .dashboard-content .modern-quick{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .dashboard-content .modern-quick .quick{width:100%!important;min-width:0!important;max-width:none!important;overflow-wrap:break-word!important;word-break:normal!important}
 .dashboard-content .modern-quick .quick b{white-space:normal!important;overflow-wrap:break-word!important}
 .dashboard-content .store-switcher{width:100%!important;max-width:none!important}
}
@media screen and (min-width:1051px){
 #app>.app-shell>.dashboard-content{width:calc(100% - 260px)!important;margin-left:260px!important}
}
@media screen and (min-width:900px) and (max-width:1050px){
 #app>.app-shell>.dashboard-content{width:calc(100% - 220px)!important;margin-left:220px!important;padding:24px!important}
}
@media screen and (min-width:1250px){
 .dashboard-content .modern-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important}
 .dashboard-content .modern-quick{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media screen and (min-width:1500px){
 .dashboard-content .modern-quick{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}

/* Phase 9 categorized desktop sidebar, mobile unchanged */
@media screen and (min-width:900px){
 #app>.app-shell{position:relative!important}
 #app>.app-shell>.dashboard-top{display:none!important}
 #app>.app-shell>.desktop-sidebar{position:fixed;inset:0 auto 0 0;width:260px;z-index:60;background:linear-gradient(170deg,#12275b,#2859bb);color:white;overflow-y:auto;overflow-x:hidden;padding:16px 12px;box-sizing:border-box;scrollbar-width:thin}
 #app>.app-shell>.desktop-sidebar .ds-brand{display:flex;gap:10px;align-items:center;padding:10px 8px 20px;border-bottom:1px solid #ffffff35}
 #app>.app-shell>.desktop-sidebar .ds-brand img{width:43px;height:43px;object-fit:contain;border-radius:10px}
 #app>.app-shell>.desktop-sidebar .ds-brand strong{display:block;max-width:155px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #app>.app-shell>.desktop-sidebar .ds-brand small{opacity:.75}
 #app>.app-shell>.desktop-sidebar .ds-group{border-bottom:1px solid #ffffff22;padding:6px 0}
 #app>.app-shell>.desktop-sidebar .ds-toggle{width:100%;border:0;background:transparent;color:#fff;text-align:left;padding:12px 9px;font-weight:750;display:flex;justify-content:space-between;cursor:pointer;border-radius:9px}
 #app>.app-shell>.desktop-sidebar .ds-toggle:hover,#app>.app-shell>.desktop-sidebar .ds-item:hover{background:#ffffff20}
 #app>.app-shell>.desktop-sidebar .ds-items{display:grid;gap:2px;padding:0 0 6px 8px}
 #app>.app-shell>.desktop-sidebar .ds-group:not(.ds-open) .ds-items{display:none}
 #app>.app-shell>.desktop-sidebar .ds-item{border:0;background:transparent;color:#dce8ff;text-align:left;border-radius:9px;padding:10px 9px;cursor:pointer;font-size:13px}
 #app>.app-shell>.desktop-sidebar .ds-item.active{background:#ffffff2b;color:#fff;font-weight:800}
 #app>.app-shell>.desktop-sidebar .ds-collapse{width:100%;margin-top:12px;background:#ffffff22;border:1px solid #ffffff44;color:#fff;border-radius:9px;padding:10px;cursor:pointer}
 #app>.app-shell>.desktop-sidebar.ds-compact{width:76px;padding:16px 8px}
 #app>.app-shell>.desktop-sidebar.ds-compact .ds-brand div,#app>.app-shell>.desktop-sidebar.ds-compact .ds-label,#app>.app-shell>.desktop-sidebar.ds-compact .ds-items{display:none}
 #app>.app-shell>.desktop-sidebar.ds-compact .ds-toggle{justify-content:center}
 #app>.app-shell:has(>.desktop-sidebar.ds-compact)>.dashboard-content{margin-left:76px!important;width:calc(100% - 76px)!important}
 #app>.app-shell:has(>.desktop-sidebar)>.dashboard-content{margin-left:260px!important;width:calc(100% - 260px)!important}
 #app>.app-shell:has(>.desktop-sidebar)>.content:not(.dashboard-content){margin-left:260px!important;width:calc(100% - 260px)!important;max-width:none!important;box-sizing:border-box!important}
 #app>.app-shell:has(>.desktop-sidebar.ds-compact)>.content:not(.dashboard-content){margin-left:76px!important;width:calc(100% - 76px)!important}
 #app>.app-shell:has(>.desktop-sidebar)>.page-head{margin-left:260px!important}
 #app>.app-shell:has(>.desktop-sidebar.ds-compact)>.page-head{margin-left:76px!important}
}
@media screen and (min-width:900px) and (max-width:1050px){
 #app>.app-shell:has(>.desktop-sidebar)>.dashboard-content{margin-left:260px!important;width:calc(100% - 260px)!important}
}


/* Phase 9 desktop-only dashboard analytics. Mobile menu remains untouched. */
.desktop-analytics{display:none}
@media screen and (min-width:900px){
 .dashboard-content>.quick-title,.dashboard-content>.modern-quick{display:none!important}
 .dashboard-content>.desktop-analytics{display:grid!important;grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);gap:20px;margin-top:26px}
 .desktop-analytics .da-panel{background:#fff;border:1px solid #e4ebf5;border-radius:18px;padding:22px;box-shadow:0 5px 18px rgba(20,58,112,.05);min-width:0}
 .desktop-analytics .da-panel h3{margin:0 0 18px;color:#183765;font-size:17px}
 .desktop-analytics .da-bars{height:200px;display:flex;gap:12px;align-items:end;padding:15px 0 28px;border-bottom:1px solid #e6edf6}
 .desktop-analytics .da-day{flex:1;min-width:0;text-align:center;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
 .desktop-analytics .da-bar{background:linear-gradient(180deg,#5ca6ff,#3151db);min-height:5px;border-radius:8px 8px 3px 3px;width:100%}
 .desktop-analytics .da-day small{font-size:11px;color:#7084a3}
 .desktop-analytics .da-metric{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid #edf1f7}
 .desktop-analytics .da-metric:last-child{border-bottom:0}
 .desktop-analytics .da-metric span{color:#687d9b}
 .desktop-analytics .da-metric strong{color:#1c3971}
 .desktop-analytics .da-foot{margin-top:15px;color:#6d819e;font-size:12px}
}
@media screen and (min-width:900px) and (max-width:1150px){
 .dashboard-content>.desktop-analytics{grid-template-columns:1fr}
}


/* Phase 9 desktop visual refresh — desktop only */
@media screen and (min-width:900px){
 body{background:#f3f6fc!important}
 #app>.app-shell>.desktop-sidebar{
  background:linear-gradient(165deg,#0c1735 0%,#142b60 62%,#1a3974 100%)!important;
  border-right:1px solid rgba(255,255,255,.1)!important;
  box-shadow:8px 0 30px rgba(19,39,83,.10)!important;
  padding:22px 14px!important
 }
 .desktop-sidebar .ds-brand{padding:8px 9px 23px!important;margin-bottom:14px!important;border-bottom:1px solid rgba(255,255,255,.12)!important}
 .desktop-sidebar .ds-brand img{width:46px!important;height:46px!important;border-radius:14px!important;background:rgba(255,255,255,.08)!important;padding:5px!important}
 .desktop-sidebar .ds-brand strong{font-size:15px!important;letter-spacing:.1px!important}
 .desktop-sidebar .ds-group{border:0!important;margin:4px 0!important;padding:0!important}
 .desktop-sidebar .ds-toggle{min-height:46px!important;border-radius:12px!important;padding:11px 13px!important;font-size:13px!important;font-weight:650!important;align-items:center!important;gap:12px!important;transition:background .18s ease!important}
 .desktop-sidebar .ds-toggle:hover{background:rgba(255,255,255,.10)!important}
 .desktop-sidebar .ds-group.ds-open>.ds-toggle{background:rgba(75,139,255,.20)!important;color:#fff!important}
 .desktop-sidebar .ds-items{padding:5px 0 9px 15px!important;gap:3px!important;border-left:1px solid rgba(255,255,255,.16)!important;margin-left:21px!important}
 .desktop-sidebar .ds-item{border-radius:9px!important;padding:10px 12px!important;font-size:12px!important;color:#b9c9e8!important;transition:background .15s ease,color .15s ease!important}
 .desktop-sidebar .ds-item:hover{background:rgba(255,255,255,.10)!important;color:#fff!important}
 .desktop-sidebar .ds-item.active{background:linear-gradient(100deg,#3474ec,#4a89f8)!important;color:white!important;box-shadow:0 5px 16px rgba(28,90,200,.25)!important}
 .desktop-sidebar .ds-collapse{margin-top:22px!important;border-radius:12px!important;background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.15)!important;color:#d9e5fc!important}
 .dashboard-content{background:#f3f6fc!important}
 .dashboard-content .store-switcher{border-radius:20px!important;border:1px solid #e4eaf4!important;box-shadow:0 10px 30px rgba(29,61,114,.045)!important;padding:20px 22px!important}
 .dashboard-content .store-switcher small{letter-spacing:.08em!important;text-transform:uppercase!important;font-weight:750!important;color:#8493ac!important}
 .dashboard-content .store-select{appearance:none!important;-webkit-appearance:none!important;border-radius:12px!important;border:1px solid #dce5f3!important;background-color:#f8faff!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%233b64a2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-position:right 16px center!important;background-repeat:no-repeat!important;padding:13px 45px 13px 15px!important;min-height:48px!important;color:#183764!important;font-weight:650!important;box-shadow:none!important}
 .dashboard-content .store-select:focus{outline:3px solid rgba(69,127,239,.14)!important;border-color:#588ff3!important}
 .dashboard-content .store-switch-actions .outline{border-radius:12px!important;min-height:48px!important;font-weight:700!important}
 .dashboard-content .stat-tile{border-radius:18px!important;box-shadow:0 10px 22px rgba(26,66,139,.10)!important;min-height:112px!important}
 .desktop-analytics .da-panel{border-radius:20px!important;border-color:#e5eaf3!important;box-shadow:0 12px 28px rgba(22,57,112,.05)!important;padding:25px!important}
 .desktop-analytics .da-panel h3{font-size:17px!important;font-weight:750!important}
}

@media screen and (min-width:900px){
 .desktop-analytics .da-empty{min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;background:linear-gradient(135deg,#f7faff,#eff5ff);border:1px dashed #d6e2f5;border-radius:14px;padding:20px}
 .desktop-analytics .da-empty strong{font-size:18px;color:#274b87}
 .desktop-analytics .da-empty span{max-width:410px;color:#6b83a8;font-size:13px;line-height:1.5}
}

/* Phase 9 desktop-only polish: sidebar clarity, store switch and module workspace */
@media screen and (min-width:900px){
 .desktop-sidebar .ds-toggle{justify-content:flex-start!important}
 .desktop-sidebar .ds-toggle .ds-label{flex:1!important;text-align:left!important}
 .desktop-sidebar .ds-toggle>span:first-child{width:23px!important;text-align:center!important;font-size:16px!important}
 .desktop-sidebar .ds-brand small{display:block;margin-top:3px;text-transform:capitalize}
 .desktop-sidebar.ds-compact .ds-brand{justify-content:center!important;padding:8px 0 18px!important}
 .desktop-sidebar.ds-compact .ds-brand img{width:40px!important;height:40px!important}
 .desktop-sidebar.ds-compact .ds-toggle{padding:12px 0!important}
 .desktop-sidebar.ds-compact .ds-collapse{font-size:0!important}
 .desktop-sidebar.ds-compact .ds-collapse::before{content:'☰';font-size:18px!important}
 #app>.app-shell:has(>.desktop-sidebar)>.content:not(.dashboard-content){padding:24px 32px 90px!important}
 #app>.app-shell:has(>.desktop-sidebar)>.page-head{padding:22px 32px!important}
 .dashboard-content .store-select{font-size:14px!important;line-height:1.4!important}
 .dashboard-content .store-switch-actions{min-width:0!important}
 .dashboard-content .store-switch-actions>*{min-width:0!important}
}

/* Phase 9 desktop searchable store picker; native select retained for mobile */
.desktop-store-picker{display:none}
@media screen and (min-width:900px){
 .dashboard-content .store-switch-actions{position:relative!important}
 .dashboard-content .store-switch-actions .store-select{display:none!important}
 .dashboard-content .desktop-store-picker{display:block;position:relative;min-width:0}
 .dashboard-content .desktop-store-trigger{width:100%;min-height:48px;padding:12px 16px;text-align:left;display:flex;align-items:center;justify-content:space-between;border:1px solid #dce5f3;background:#f8faff;color:#1c3d72;border-radius:13px;font-size:14px;font-weight:700;cursor:pointer}
 .dashboard-content .desktop-store-trigger:hover,.dashboard-content .desktop-store-trigger:focus{border-color:#5b91ef;outline:3px solid #568ff01c}
 .dashboard-content .desktop-store-popover{display:none;position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:100;background:#fff;border:1px solid #dbe5f3;border-radius:15px;padding:10px;box-shadow:0 18px 40px #163c7333}
 .dashboard-content .desktop-store-popover.open{display:block}
 .dashboard-content .desktop-store-popover input{width:100%;box-sizing:border-box;border-radius:10px;margin-bottom:8px}
 .dashboard-content .desktop-store-options{max-height:260px;overflow-y:auto;display:grid;gap:4px}
 .dashboard-content .desktop-store-option{display:flex;flex-direction:column;gap:3px;text-align:left;width:100%;border:0;border-radius:9px;padding:10px 12px;background:transparent;color:#193764;cursor:pointer}
 .dashboard-content .desktop-store-option:hover{background:#edf4ff}
 .dashboard-content .desktop-store-option small{font-size:11px;color:#7388a7}
 .dashboard-content .desktop-store-option[hidden]{display:none!important}
}

/* Phase 9 unified store picker: desktop dropdown, mobile bottom sheet */
.desktop-store-picker .store-picker-heading,.desktop-store-picker .store-picker-overlay,.desktop-store-picker .store-picker-empty{display:none}
@media(min-width:900px){
 .desktop-store-picker .store-picker-sheet{position:relative}
 .desktop-store-picker .store-picker-empty:not([hidden]){display:block;text-align:center;padding:14px;color:#7084a0}
}
@media(max-width:899px){
 .store-switch-actions>.store-select{display:none!important}
 .store-switch-actions>.desktop-store-picker{display:block!important;min-width:0;flex:1}
 .desktop-store-trigger{width:100%;min-height:44px;border:1px solid #d8e3f4;background:#f8faff;border-radius:12px;color:#16396e;text-align:left;padding:10px 14px;font-weight:700;cursor:pointer}
 .desktop-store-popover{display:none}
 .desktop-store-popover.open{display:block!important;position:fixed!important;inset:0!important;z-index:9999!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
 .desktop-store-popover .store-picker-overlay{display:block;position:absolute;inset:0;background:rgba(8,22,49,.58)}
 .desktop-store-popover .store-picker-sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:24px 24px 0 0;padding:18px 18px max(24px,env(safe-area-inset-bottom));max-height:78dvh;display:flex;flex-direction:column;box-shadow:0 -12px 45px #091d3d33}
 .desktop-store-popover .store-picker-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:18px;color:#16376a}
 .desktop-store-popover .store-picker-heading button{border:0;background:#f0f4fa;border-radius:50%;width:34px;height:34px;cursor:pointer}
 .desktop-store-popover input{width:100%;box-sizing:border-box;border-radius:12px;margin-bottom:12px;min-height:46px}
 .desktop-store-options{display:grid;gap:6px;overflow-y:auto;max-height:52dvh;min-height:0}
 .desktop-store-option{width:100%;border:1px solid #e7edf6;border-radius:12px;background:#fff;text-align:left;padding:13px 14px;display:flex;flex-direction:column;gap:4px;color:#1a386d}
 .desktop-store-option small{color:#7588a4}
 .desktop-store-option[hidden]{display:none!important}
 .desktop-store-popover .store-picker-empty:not([hidden]){display:block;text-align:center;color:#7487a3;padding:16px}
 body.store-picker-open{overflow:hidden}
}

/* Phase 9 desktop store picker correction: floating list, no layout shift */
@media screen and (min-width:900px){
 .dashboard-content .store-switcher{overflow:visible!important;position:relative!important;z-index:30!important}
 .dashboard-content .store-switch-actions{overflow:visible!important}
 .dashboard-content .desktop-store-picker{position:relative!important;z-index:40!important}
 .dashboard-content .desktop-store-popover{display:none!important;position:absolute!important;top:calc(100% + 8px)!important;left:0!important;right:0!important;bottom:auto!important;z-index:1000!important;background:#fff!important;border:1px solid #dbe5f3!important;border-radius:15px!important;padding:0!important;box-shadow:0 18px 40px rgba(22,60,115,.20)!important;overflow:hidden!important}
 .dashboard-content .desktop-store-popover.open{display:block!important}
 .dashboard-content .desktop-store-popover .store-picker-overlay{display:none!important}
 .dashboard-content .desktop-store-popover .store-picker-sheet{display:flex!important;flex-direction:column!important;position:static!important;max-height:350px!important;padding:12px!important;background:#fff!important;border-radius:15px!important;box-shadow:none!important;overflow:hidden!important}
 .dashboard-content .desktop-store-popover .store-picker-heading{display:flex!important;justify-content:space-between!important;align-items:center!important;margin:0 0 10px!important;font-size:14px!important;color:#173967!important}
 .dashboard-content .desktop-store-popover .store-picker-heading button{width:28px!important;height:28px!important;border:0!important;background:#edf3fb!important;border-radius:8px!important;cursor:pointer!important}
 .dashboard-content .desktop-store-popover #desktopStoreSearch{width:100%!important;box-sizing:border-box!important;min-height:42px!important;margin:0 0 8px!important;border-radius:10px!important}
 .dashboard-content .desktop-store-popover .desktop-store-options{display:flex!important;flex-direction:column!important;gap:4px!important;overflow-y:auto!important;max-height:240px!important;min-height:0!important}
 .dashboard-content .desktop-store-popover .desktop-store-option{display:flex!important;flex-direction:column!important;align-items:flex-start!important;width:100%!important;min-height:52px!important;flex-shrink:0!important;box-sizing:border-box!important;padding:10px 12px!important;border:0!important;border-radius:9px!important;background:transparent!important;color:#1c3a70!important;cursor:pointer!important}
 .dashboard-content .desktop-store-popover .desktop-store-option:hover{background:#edf4ff!important}
 .dashboard-content .desktop-store-popover .desktop-store-option small{color:#7589a5!important;font-size:11px!important}
 .dashboard-content .desktop-store-popover .desktop-store-option[hidden]{display:none!important}
}

/* Phase 9 desktop picker final layout containment */
@media screen and (min-width:900px){
 .dashboard-content .store-switcher{isolation:auto!important;overflow:visible!important}
 .dashboard-content .store-switch-actions{align-items:start!important}
 .dashboard-content .desktop-store-picker{align-self:start!important}
 .dashboard-content .desktop-store-popover{top:calc(100% + 6px)!important;max-height:min(390px,60vh)!important;overflow:hidden!important}
 .dashboard-content .desktop-store-popover:not(.open){display:none!important}
 .dashboard-content .desktop-store-popover.open{display:block!important}
 .dashboard-content .desktop-store-popover .store-picker-sheet{max-height:min(380px,58vh)!important;overflow:hidden!important}
 .dashboard-content .desktop-store-popover .store-picker-heading{flex-shrink:0!important}
 .dashboard-content .desktop-store-popover #desktopStoreSearch{flex-shrink:0!important;outline:none!important;border:1px solid #d9e4f2!important;box-shadow:none!important}
 .dashboard-content .desktop-store-popover #desktopStoreSearch:focus{border-color:#4c8bee!important;box-shadow:0 0 0 3px rgba(76,139,238,.13)!important}
 .dashboard-content .desktop-store-popover .desktop-store-options{display:flex!important;flex-direction:column!important;max-height:235px!important;overflow-y:auto!important}
 .dashboard-content .desktop-store-popover .desktop-store-option{display:flex!important;visibility:visible!important;opacity:1!important}
 .dashboard-content .desktop-store-popover .desktop-store-option[hidden]{display:none!important}
}


/* Phase 9 hotfix — desktop sidebar must never render on mobile */
@media screen and (max-width:899.98px){
 #app .desktop-sidebar{display:none!important}
 #app>.app-shell{display:block!important}
 #app>.app-shell>.dashboard-top{display:block!important}
 #app>.app-shell>.dashboard-content,#app>.app-shell>.content{margin-left:0!important;width:auto!important}
}

/* Desktop-only logout footer; mobile layout unchanged */
@media screen and (min-width:900px){
 #app>.app-shell>.desktop-sidebar{display:flex!important;flex-direction:column!important}
 .desktop-sidebar .ds-footer{margin-top:auto;padding-top:18px;display:grid;gap:10px;flex-shrink:0}
 .desktop-sidebar .ds-footer .ds-collapse{margin-top:0!important}
 .desktop-sidebar .ds-logout{width:100%;display:flex;justify-content:center;align-items:center;gap:9px;min-height:43px;border-radius:11px;border:1px solid rgba(255,150,150,.30);background:rgba(244,88,106,.13);color:#ffe2e6;font-weight:750;font-size:13px;cursor:pointer}
 .desktop-sidebar .ds-logout:hover{background:rgba(244,88,106,.28);color:#fff}
 .desktop-sidebar .ds-logout:disabled{opacity:.55;cursor:wait}
 .desktop-sidebar.ds-compact .ds-logout{font-size:22px;padding:6px 0}
}

/* Phase 9: full-width desktop login; keep mobile login unchanged */
@media screen and (min-width:900px){
 body:has(.login-tech){margin:0!important;background:#eaf5ff!important}
 body:has(.login-tech) #app{width:100%!important;max-width:none!important;min-height:100dvh!important}
 body:has(.login-tech) #app>.app-shell{width:100%!important;max-width:none!important;margin:0!important;min-height:100dvh!important;box-shadow:none!important;padding:0!important;overflow:visible!important;background:transparent!important}
 body:has(.login-tech) .login-page.login-tech{
  box-sizing:border-box!important;width:100%!important;max-width:none!important;margin:0!important;min-height:100dvh!important;
  display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;
  padding:55px max(30px,calc((100vw - 1100px)/2))!important;gap:22px!important;
  background:radial-gradient(circle at 14% 26%,rgba(255,255,255,.72),transparent 31%),radial-gradient(circle at 87% 77%,rgba(33,126,246,.23),transparent 37%),linear-gradient(130deg,#eafaff 0%,#b9eaff 48%,#80c6ff 100%)!important
 }
 body:has(.login-tech) .login-tech::before,body:has(.login-tech) .login-tech::after{opacity:.28!important}
 body:has(.login-tech) .login-tech-inner{width:100%!important;max-width:1100px!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(380px,440px)!important;align-items:center!important;gap:clamp(35px,6vw,100px)!important;margin:auto!important;position:relative!important;z-index:1!important}
 body:has(.login-tech) .login-brand-block{width:100%!important;max-width:none!important;display:flex!important;justify-content:center!important;align-items:center!important}
 body:has(.login-tech) .login-main-logo{width:min(100%,530px)!important;max-width:530px!important;max-height:none!important}
 body:has(.login-tech) .login-card{width:100%!important;max-width:440px!important;padding:30px!important;border-radius:24px!important;margin:0!important;box-sizing:border-box!important;box-shadow:0 25px 70px rgba(20,74,139,.17)!important}
 body:has(.login-tech) .login-card .field{min-height:49px!important}
 body:has(.login-tech) .login-card .primary{min-height:49px!important}
}
@media screen and (min-width:900px) and (max-width:1050px){
 body:has(.login-tech) .login-tech-inner{grid-template-columns:minmax(0,1fr) minmax(360px,420px)!important;gap:35px!important}
}

/* Copyright readability: blue login background on both desktop and mobile */
.login-page .login-footer,
.login-tech .login-footer{
 color:#ffffff!important;
 opacity:1!important;
 font-weight:650!important;
 letter-spacing:.25px!important;
 text-shadow:0 2px 6px rgba(5,29,72,.65)!important;
}

/* Copyright contrast correction — login on light blue background */
body:has(.login-tech) .login-footer,
.login-page .login-footer,
.login-tech .login-footer{
 color:#163d79!important;
 opacity:1!important;
 font-weight:750!important;
 font-size:12px!important;
 letter-spacing:.25px!important;
 text-shadow:none!important;
 background:rgba(255,255,255,.72)!important;
 border:1px solid rgba(46,102,179,.14)!important;
 border-radius:999px!important;
 padding:8px 16px!important;
 width:max-content!important;
 max-width:calc(100% - 32px)!important;
 margin:18px auto 0!important;
 text-align:center!important;
 box-shadow:0 4px 14px rgba(30,77,147,.07)!important;
}

.scan-product-search{margin:12px;padding:14px;display:grid;gap:9px;min-width:0}.scan-product-search .field{width:100%;box-sizing:border-box}.scan-product-results{display:grid;gap:6px;max-height:270px;overflow:auto}.scan-product-result{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;width:100%;padding:12px;border:1px solid #dce5f0;border-radius:11px;background:#fff;color:#183153;cursor:pointer}.scan-product-result span{display:grid;gap:4px;min-width:0}.scan-product-result small{color:#64748b}.scan-product-result strong{white-space:nowrap}@media(min-width:900px){.scan-product-search{margin:16px 24px;max-width:840px}}

/* Desktop scanner layout: reserve space for the fixed sidebar. */
@media screen and (min-width:900px){
 #app>.app-shell:has(>.desktop-sidebar)>.scan-pro-wrap,
 #app>.app-shell:has(>.desktop-sidebar)>.scan-product-search{margin-left:260px!important;width:calc(100% - 260px)!important;max-width:none!important;min-width:0!important;box-sizing:border-box!important}
 #app>.app-shell:has(>.desktop-sidebar.ds-compact)>.scan-pro-wrap,
 #app>.app-shell:has(>.desktop-sidebar.ds-compact)>.scan-product-search{margin-left:76px!important;width:calc(100% - 76px)!important}
 #app>.app-shell:has(>.desktop-sidebar)>.scan-product-search{padding:18px 24px!important}
 #app>.app-shell:has(>.desktop-sidebar)>.scan-pro-wrap{padding:0 24px 24px!important}
}

/* Searchable dropdown: search is visible only in the opened list. */
.dhun-select-search{position:relative;min-width:0;width:100%;margin:4px 0 10px}
.dhun-select-search .dhun-select-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none;overflow:hidden}
.dhun-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0;text-align:left;font:inherit;color:inherit;cursor:pointer}

.dhun-select-popup{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:100;background:var(--card,#fff);color:inherit;border:1px solid rgba(127,127,127,.3);border-radius:14px;padding:10px;box-shadow:0 12px 30px rgba(0,0,0,.16)}
.dhun-select-popup[hidden]{display:none!important}
.dhun-select-popup .dhun-select-query{width:100%;box-sizing:border-box;margin:0 0 8px;padding:10px 12px}
.dhun-select-options{max-height:220px;overflow-y:auto;overscroll-behavior:contain}
.dhun-select-option{display:block;width:100%;padding:12px;border:0;border-radius:8px;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.dhun-select-option:hover,.dhun-select-option:focus-visible,.dhun-select-option[aria-selected="true"]{background:rgba(59,130,246,.14)}
.dhun-select-option:disabled{opacity:.45;cursor:default}

/* Stock Opname responsive desktop table */
.opname-page{width:100%;min-width:0;box-sizing:border-box}
.opname-toolbar{display:flex;flex-direction:column;gap:12px}
.opname-search-row{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:12px;align-items:center}
.opname-search-row .field{width:100%;min-width:0;box-sizing:border-box}
.opname-table-card{padding:0;overflow:hidden;min-width:0}
.opname-table-scroll{width:100%;overflow-x:auto}
.opname-table{border-collapse:collapse;width:100%;min-width:690px;text-align:left}
.opname-table th{font-size:12px;font-weight:700;letter-spacing:.02em;white-space:nowrap;background:rgba(127,127,127,.06)}
.opname-table td,.opname-table th{padding:13px 16px;border-bottom:1px solid rgba(127,127,127,.13);vertical-align:middle}
.opname-table tr:last-child td{border-bottom:0}
.opname-table td:last-child,.opname-table th:last-child{text-align:right}
.opname-table td:nth-child(3){white-space:nowrap}
.opname-product{display:flex;align-items:center;gap:12px;min-width:0}
.opname-product b{overflow-wrap:anywhere}
.opname-thumb{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:12px;background:rgba(127,127,127,.1);overflow:hidden}
.opname-thumb img{width:100%;height:100%;object-fit:cover}
.opname-pill{display:inline-block;border-radius:99px;padding:5px 10px;font-size:12px;font-weight:700}
.opname-pill.ok{background:rgba(16,185,129,.12);color:#059669}
.opname-pill.warn{background:rgba(245,158,11,.14);color:#b45309}
.opname-empty{text-align:center;padding:26px;color:var(--muted,#64748b)}
.opname-mobile{display:none}
@media(max-width:700px){.opname-search-row{grid-template-columns:1fr}.opname-table-scroll{display:none}.opname-mobile{display:grid;gap:10px;padding:12px}.opname-mobile-item{border:1px solid rgba(127,127,127,.15);border-radius:14px;padding:12px;min-width:0}.opname-mobile-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}}


/* Phase 12 desktop refinements */
.supplier-search{max-width:760px;margin:0;padding:0 16px 14px}
.supplier-search input{width:100%;min-height:44px}
.supplier-edit[hidden]{display:none!important}
@media(min-width:900px){
 .app-shell .supplier-search,.app-shell:has(.supplier-edit) .product-list,
 .app-shell:has(.cat-edit) .product-list{max-width:780px;margin-left:0;margin-right:auto}
 .app-shell:has(.supplier-edit) .product-list,.app-shell:has(.cat-edit) .product-list{display:grid;grid-template-columns:1fr;gap:8px}
 .app-shell .supplier-edit,.app-shell .cat-edit{width:100%;min-height:64px;text-align:left;display:flex;align-items:center;gap:12px;border-radius:12px;padding:12px 16px}
 .app-shell .supplier-edit .thumb{flex:0 0 44px}
 .app-shell .supplier-edit>div:nth-child(2){min-width:0;flex:1}
 .app-shell .supplier-edit h4{margin:0 0 3px}
 .app-shell .supplier-edit>span:last-child,.app-shell .cat-edit>span:last-child{margin-left:auto}
 .app-shell:has(#payFrom) .history-filters{max-width:100%;padding:16px}
 .app-shell:has(#payFrom) .filter-grid{align-items:end;gap:12px}
 .app-shell:has(#payFrom) .field{min-height:42px}
 .app-shell:has(#pay) .checkout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;align-items:start}
 .app-shell:has(#pay) .checkout>label:first-child{grid-column:1;grid-row:1;margin:0 0 6px}
 .app-shell:has(#pay) .checkout>#pay{grid-column:1;grid-row:2;width:100%;min-height:44px}
 .app-shell:has(#pay) .checkout>#cashPanel{grid-column:2;grid-row:1 / span 2;min-width:0}
 .app-shell:has(#pay) .checkout>#cashPanel>label{display:block;margin:0 0 6px}
 .app-shell:has(#pay) .checkout>#cashPanel>#cashReceived{width:100%;min-height:44px}
 .app-shell:has(#pay) .checkout>#manualPaymentPanel,.app-shell:has(#pay) .checkout>#memberLimitPanel,.app-shell:has(#pay) .checkout>#co{grid-column:1 / -1}
}

/* Payment form: stack on phones, align payment and cash fields on desktop. */
.app-shell:has(#pay) .checkout{
  display:flex;flex-direction:column;gap:12px;align-items:stretch;
}
.app-shell:has(#pay) .checkout>label:first-child{margin:0 0 -6px}
.app-shell:has(#pay) .checkout>.dhun-select-search{margin:0;min-width:0}
.app-shell:has(#pay) .checkout .field{box-sizing:border-box;min-height:46px}
.app-shell:has(#pay) .checkout label{display:block;font-size:14px;line-height:1.4}
.app-shell:has(#pay) .checkout>#cashPanel{min-width:0}
.app-shell:has(#pay) .checkout>#cashPanel>label{margin:0 0 6px}
.app-shell:has(#pay) .checkout>#manualPaymentPanel,
.app-shell:has(#pay) .checkout>#memberLimitPanel{
  min-width:0;width:100%;box-sizing:border-box;margin:0!important;padding:14px;
}
.app-shell:has(#pay) .checkout>#manualPaymentPanel>label{margin:0 0 6px}
.app-shell:has(#pay) .checkout>#manualPaymentPanel>input{margin:0 0 12px}
.app-shell:has(#pay) .checkout>#manualPaymentPanel .label{font-size:12px;line-height:1.5}
.app-shell:has(#pay) .checkout>#co{
  width:100%;height:48px;min-height:48px;align-self:stretch;
  margin:0;padding:12px 16px;line-height:1.4;font-size:15px;
}
@media(min-width:900px){
  .app-shell:has(#pay) .checkout{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:20px auto;column-gap:16px;row-gap:6px;align-items:start;
  }
  .app-shell:has(#pay) .checkout>label:first-child{grid-column:1;grid-row:1;margin:0}
  .app-shell:has(#pay) .checkout>.dhun-select-search{grid-column:1;grid-row:2}
  .app-shell:has(#pay) .checkout>#cashPanel{grid-column:2;grid-row:1 / span 2}
  .app-shell:has(#pay) .checkout>label:first-child,
  .app-shell:has(#pay) .checkout>#cashPanel>label{line-height:20px}
  .app-shell:has(#pay) .checkout>#co{margin-top:6px}
  .app-shell:has(#pay) .checkout>#manualPaymentPanel,
  .app-shell:has(#pay) .checkout>#memberLimitPanel,
  .app-shell:has(#pay) .checkout>#co{grid-column:1 / -1}
}


/* Shared modern SVG chevrons: dropdown, disclosure and navigation. */
.dhun-chevron{width:18px;height:18px;display:inline-block;vertical-align:middle;flex-shrink:0;pointer-events:none;transition:transform .18s ease}
.dhun-chevron-right{transform:rotate(-90deg);margin-left:6px}
.dhun-chevron-left{transform:rotate(90deg);margin-right:4px}
.ds-label{display:flex;align-items:center;gap:8px}
.ds-label .dhun-chevron{margin-left:auto}
.ds-open>.ds-toggle .dhun-chevron-down,[aria-expanded="true"]>.dhun-chevron-down{transform:rotate(180deg)}
.desktop-store-trigger>.dhun-chevron{margin-left:8px}
.dhun-select-trigger::after{content:"";width:18px;height:18px;flex-shrink:0;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .18s ease}
.dhun-select-trigger[aria-expanded="true"]::after{transform:rotate(180deg)}
select:not([multiple]):not([size]),select[size="1"]{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='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:18px;padding-right:38px}
@media(prefers-reduced-motion:reduce){.dhun-chevron,.dhun-select-trigger::after{transition:none}}

/* Store picker shares the searchable dropdown layout on all screen sizes. */
.dashboard-content .store-switcher{overflow:visible!important;position:relative;z-index:30}
.dashboard-content .store-switcher .desktop-store-picker{display:block!important;position:relative!important;min-width:0;align-self:start}
.dashboard-content .store-switcher .desktop-store-trigger{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;min-height:48px!important;width:100%;box-sizing:border-box;font:inherit!important;font-weight:500!important;color:var(--text,#183153)!important;background:var(--card,#fff)!important;border:1px solid var(--border,#dce5f0)!important;border-radius:14px!important;padding:12px 14px!important;text-align:left;cursor:pointer}
.store-trigger-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashboard-content .store-switcher .desktop-store-trigger:focus-visible{outline:3px solid #3b82f633!important;outline-offset:2px}
.dashboard-content .store-switcher .desktop-store-picker .desktop-store-popover{display:none!important;position:absolute!important;inset:auto 0 auto 0!important;top:calc(100% + 6px)!important;z-index:1000!important;background:var(--card,#fff)!important;color:var(--text,#183153)!important;border:1px solid var(--border,#dce5f0)!important;border-radius:14px!important;padding:10px!important;box-sizing:border-box;box-shadow:0 12px 30px rgba(0,0,0,.16)!important;max-height:none!important;overflow:hidden!important}
.dashboard-content .store-switcher .desktop-store-picker .desktop-store-popover.open{display:block!important}
.dashboard-content .store-switcher .desktop-store-picker .store-picker-overlay,.dashboard-content .store-switcher .desktop-store-picker .store-picker-heading{display:none!important}
.dashboard-content .store-switcher .desktop-store-picker .store-picker-sheet{display:flex!important;flex-direction:column!important;position:static!important;inset:auto!important;padding:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;max-height:none!important;overflow:hidden!important}
.dashboard-content .store-switcher .desktop-store-picker #desktopStoreSearch{width:100%!important;box-sizing:border-box!important;margin:0 0 8px!important;padding:10px 12px!important;min-height:44px!important;border-radius:10px!important;font:inherit!important}
.dashboard-content .store-switcher .desktop-store-picker .desktop-store-options{display:flex!important;flex-direction:column!important;gap:4px!important;overflow-y:auto!important;overscroll-behavior:contain;max-height:min(240px,40dvh)!important;min-height:0!important}
.dashboard-content .store-switcher .desktop-store-picker .desktop-store-option{position:relative;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center;gap:4px!important;width:100%!important;min-height:52px!important;flex-shrink:0!important;box-sizing:border-box!important;border:0!important;border-radius:8px!important;padding:10px 38px 10px 12px!important;background:transparent!important;color:inherit!important;font:inherit!important;text-align:left;cursor:pointer}
.dashboard-content .store-switcher .desktop-store-picker .desktop-store-option strong{font-weight:500;max-width:100%;overflow-wrap:anywhere}
.dashboard-content .store-switcher .desktop-store-picker .desktop-store-option small{font-size:12px;color:var(--muted,#64748b);overflow-wrap:anywhere}
.dashboard-content .store-switcher .desktop-store-picker .desktop-store-option:hover,.dashboard-content .store-switcher .desktop-store-picker .desktop-store-option:focus-visible,.dashboard-content .store-switcher .desktop-store-picker .desktop-store-option[aria-current="true"]{background:rgba(59,130,246,.14)!important}
.desktop-store-option[aria-current="true"]::after{content:"";position:absolute;right:12px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center/contain no-repeat}
.dashboard-content .store-switcher .desktop-store-picker .desktop-store-option[hidden]{display:none!important}
.dashboard-content .store-switcher .desktop-store-picker .store-picker-empty:not([hidden]){display:block!important;text-align:center;padding:14px;margin:0;color:var(--muted,#64748b)}

/* Modern desktop navigation: consistent vector icons and clear hierarchy. */
@media(min-width:900px){
 #app>.app-shell>.desktop-sidebar{background:linear-gradient(175deg,#0c1730 0%,#14264a 65%,#193359 100%)!important;border-right:1px solid rgba(148,163,184,.12)!important;padding:22px 14px!important;box-shadow:6px 0 28px rgba(15,23,42,.08)!important}
 .desktop-sidebar .ds-brand{gap:12px!important;padding:4px 8px 22px!important;margin-bottom:18px!important;align-items:center!important}
 .desktop-sidebar .ds-brand strong{font-size:14px!important;font-weight:700!important;color:#f8fafc!important;line-height:1.4!important}
 .desktop-sidebar .ds-brand small{color:#94a3b8!important;font-size:12px!important;margin-top:4px!important;text-transform:capitalize}
 .desktop-sidebar .ds-group{margin:5px 0!important}
 .desktop-sidebar .ds-toggle{min-height:48px!important;padding:12px!important;gap:12px!important;border-radius:12px!important;color:#cbd5e1!important;font-size:13px!important;font-weight:600!important;background:transparent!important}
 .desktop-sidebar .ds-toggle .ds-group-icon{display:flex!important;align-items:center;justify-content:center;width:22px!important;color:#94a3b8}
 .ds-icon{display:block;width:20px;height:20px;flex-shrink:0;pointer-events:none}
 .desktop-sidebar .ds-toggle .ds-label{display:flex!important;align-items:center;gap:8px;min-width:0;line-height:1.4}
 .desktop-sidebar .ds-toggle .dhun-chevron{width:15px;height:15px;color:#94a3b8}
 .desktop-sidebar .ds-toggle:hover,.desktop-sidebar .ds-group.ds-open>.ds-toggle{background:rgba(148,163,184,.09)!important;color:#f8fafc!important}
 .desktop-sidebar .ds-group.ds-open .ds-group-icon{color:#7dd3fc!important}
 .desktop-sidebar .ds-items{margin:3px 0 8px 22px!important;padding:3px 0 3px 12px!important;border-left:1px solid rgba(148,163,184,.18)!important;gap:4px!important}
 .desktop-sidebar .ds-item{position:relative;display:flex;align-items:center;min-height:40px!important;padding:10px 12px!important;font-size:12px!important;font-weight:500!important;line-height:1.4!important;color:#aab9cf!important;border-radius:9px!important;text-align:left}
 .desktop-sidebar .ds-item:hover{color:#f8fafc!important;background:rgba(148,163,184,.10)!important}
 .desktop-sidebar .ds-item.active{background:rgba(59,130,246,.18)!important;color:#93c5fd!important;font-weight:650!important;box-shadow:none!important}
 .desktop-sidebar .ds-item.active::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:#60a5fa}
 .desktop-sidebar .ds-toggle:focus-visible,.desktop-sidebar .ds-item:focus-visible,.desktop-sidebar .ds-footer button:focus-visible{outline:2px solid #7dd3fc!important;outline-offset:2px}
 .desktop-sidebar .ds-footer{padding-top:16px!important;border-top:1px solid rgba(148,163,184,.14)!important;gap:8px!important}
 .desktop-sidebar .ds-footer button{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;min-height:44px!important;margin:0!important;padding:11px 12px!important;border-radius:10px!important;font-size:12px!important;font-weight:500!important}
 .desktop-sidebar .ds-collapse{background:rgba(148,163,184,.06)!important;color:#cbd5e1!important;border:1px solid rgba(148,163,184,.12)!important}
 .desktop-sidebar .ds-logout{background:transparent!important;color:#fca5a5!important;border:1px solid rgba(248,113,113,.16)!important}
 .desktop-sidebar .ds-logout:hover{background:rgba(248,113,113,.10)!important}
 .desktop-sidebar.ds-compact .ds-toggle .ds-label,.desktop-sidebar.ds-compact .ds-footer .ds-label{display:none!important}
 .desktop-sidebar.ds-compact .ds-toggle,.desktop-sidebar.ds-compact .ds-footer button{justify-content:center!important;padding:12px 0!important}
 .desktop-sidebar.ds-compact .ds-collapse .ds-icon{transform:rotate(180deg)}
}

/* SaaS package catalog and marketing controls */
.saas-page{max-width:1100px;margin:auto}.saas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:16px}.saas-card-title,.saas-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.saas-card-title h3{margin:5px 0}.saas-tags{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}.saas-tags span{padding:5px 9px;border-radius:8px;background:#edf4ff;color:#245184;font-size:12px}.saas-form{max-width:800px;margin:auto}.saas-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}.saas-fields>div{min-width:0}.saas-form label{display:block;margin-bottom:7px}.saas-form>.field{margin-bottom:18px}.saas-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border:1px solid #e0e7f0;border-radius:14px;padding:16px;margin:18px 0}.saas-checks label,.saas-checkbox{display:flex!important;align-items:center;gap:9px;font-size:14px}.saas-checks input,.saas-checkbox input{width:18px;height:18px;accent-color:#087bff;flex-shrink:0}.saas-row{padding:14px 0;border-bottom:1px solid #e6edf5}.saas-commission{padding:18px 0;border-bottom:1px solid #e6edf5}.saas-commission p{margin:8px 0}.saas-page .sa-section-head{gap:14px;flex-wrap:wrap}.saas-page .plan-price{display:block;margin-top:12px}.saas-page .tenant-actions{flex-wrap:wrap}.saas-page #spDays{margin-top:10px}.saas-page [hidden]{display:none!important}@media(max-width:600px){.saas-fields{grid-template-columns:1fr}.saas-checks{grid-template-columns:1fr}.saas-page .tenant-actions button{flex:1}.saas-page .saas-card-title .pill{font-size:11px}}

/* SaaS mobile: readable cards, touch targets and narrow-screen forms. */
.saas-page{display:grid;gap:16px;min-width:0}
.saas-page .card,.saas-page .saas-card-title>*,.saas-page .sa-section-head>div{min-width:0}
.saas-page p,.saas-page b,.saas-page strong,.saas-page small,.saas-page label{overflow-wrap:anywhere}
.saas-page .saas-fields label{display:block;margin-bottom:7px;font-size:13px;font-weight:600}
.saas-page .saas-commission:last-child{border-bottom:0}
@media(max-width:700px){
 .app-page-head:has(#saasBack){align-items:flex-start;gap:12px;padding:18px 14px 10px}
 .app-page-head:has(#saasBack)>div{min-width:0;flex:1}
 .app-page-head:has(#saasBack) h2{font-size:20px;line-height:1.3;overflow-wrap:anywhere}
 #saasBack{display:flex;align-items:center;justify-content:center;flex-shrink:0;min-height:44px;padding:10px 12px;font-size:13px}
 .saas-page{padding:12px 14px 24px;gap:14px}
 .saas-page .card{padding:16px;border-radius:16px}
 .saas-page .saas-grid{grid-template-columns:minmax(0,1fr);gap:12px}
 .saas-page .saas-fields{grid-template-columns:minmax(0,1fr);gap:14px}
 .saas-page .saas-checks{grid-template-columns:minmax(0,1fr);padding:12px;min-width:0}
 .saas-page .saas-checks label,.saas-page .saas-checkbox{min-height:44px;line-height:1.45;align-items:center}
 .saas-page .field,.saas-page .dhun-select-trigger{min-height:48px;min-width:0;font-size:16px}
 .saas-page input[type=date]{max-width:100%;appearance:none;-webkit-appearance:none}
 .saas-page textarea{resize:vertical}
 .saas-page button{min-height:44px;white-space:normal;line-height:1.4}
 .saas-page .label{font-size:13px;line-height:1.55}
 .saas-page .sa-section-head{align-items:stretch;flex-direction:column;gap:12px}
 .saas-page .sa-section-head>button,.saas-page .saas-edit-plan,#smSaveAssign{width:100%}
 .saas-page .saas-card-title{align-items:flex-start;gap:8px}
 .saas-page .plan-price{font-size:22px;line-height:1.4}
 .saas-page .saas-row{display:grid;gap:6px}
 .saas-page .tenant-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;margin-top:10px}
 .saas-page .saas-commission{padding:16px 12px;margin:12px 0 0;border:1px solid var(--border);border-radius:14px;background:var(--card)}
 .saas-page .saas-commission:last-child{border-bottom:1px solid var(--border)}
 .saas-page .saas-commission .saas-card-title{display:grid;gap:6px}
 .saas-page .saas-commission .saas-card-title strong{font-size:22px;color:var(--blue)}
 .saas-page .saas-commission .tenant-actions{grid-template-columns:minmax(0,1fr)}
 #scFilter>button{width:100%}
 .app-shell:has(#saasCatalog) #saasCatalog,.app-shell:has(#saasCatalog) #saasMarketing,.app-shell:has(#saasCatalog) #saasCommissions{flex:1 1 100%;min-height:48px}
}

/* Cashier workspace: compact entry, clear totals and aligned payment. */
.app-shell:has(#posBarcodeInput)>.content{display:grid;gap:18px;padding-top:18px}
.app-shell:has(#posBarcodeInput) .cart{margin-top:0;padding:20px;box-shadow:0 6px 20px rgba(11,47,107,.04)}
.app-shell:has(#posBarcodeInput) .cart>b{font-size:18px;display:block;margin-bottom:8px}
.app-shell:has(#posBarcodeInput) .cart-main{line-height:1.5}
.app-shell:has(#posBarcodeInput) .cart-main>b{font-size:15px}
.app-shell:has(#posBarcodeInput) .cart-item{padding:16px 0;gap:18px}
.app-shell:has(#posBarcodeInput) .qty-btn{width:40px;height:40px;min-width:40px}
.app-shell:has(#posBarcodeInput) .qty-value{min-width:28px;font-variant-numeric:tabular-nums}
.app-shell:has(#posBarcodeInput) .cart-price{min-width:110px;font-variant-numeric:tabular-nums}
.app-shell:has(#posBarcodeInput) .cart-remove{min-height:32px;padding:6px 10px}
.app-shell:has(#posBarcodeInput) .tax-box{background:#f8faff;box-shadow:none;padding:18px;margin-top:18px}
.app-shell:has(#posBarcodeInput) .tax-box label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.app-shell:has(#posBarcodeInput) #taxRate{max-width:130px;margin-bottom:8px}
.app-shell:has(#posBarcodeInput) .tax-box .receipt-row{padding:6px 0;margin:4px 0;font-size:14px;gap:16px}
.app-shell:has(#posBarcodeInput) .tax-box .total-line{margin-top:10px;padding-top:16px;border-top:1px solid var(--border);align-items:center;font-weight:700}
.app-shell:has(#posBarcodeInput) #grandTotalView{font-size:26px;color:var(--blue);font-variant-numeric:tabular-nums}
.app-shell:has(#posBarcodeInput) .checkout{margin-top:18px}
.app-shell:has(#posBarcodeInput) #co{background:var(--blue);border-radius:12px;box-shadow:0 4px 12px rgba(13,110,253,.16)}
.app-shell:has(#posBarcodeInput) .cash-change{margin:10px 0 0;border-radius:10px;font-size:13px}
@media(min-width:900px){
 #app>.app-shell:has(#posBarcodeInput)>.content{padding:18px 32px 32px!important}
 .app-shell:has(#posBarcodeInput)>.content>.card{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:8px 20px;padding:20px;align-items:center}
 .app-shell:has(#posBarcodeInput)>.content>.card>.label:first-child{grid-column:1;grid-row:1}
 .app-shell:has(#posBarcodeInput) #scanNow{grid-column:2;grid-row:3;align-self:stretch;margin:0!important;min-height:48px}
 .app-shell:has(#posBarcodeInput) label[for=posBarcodeInput]{grid-column:1;grid-row:2;align-self:start;margin:0!important;font-size:13px;font-weight:600}
 .app-shell:has(#posBarcodeInput) #posBarcodeInput{grid-column:1;grid-row:3;min-height:48px}
 .app-shell:has(#posBarcodeInput)>.content>.card>.label:last-child{grid-column:1/-1;grid-row:4;font-size:12px;line-height:1.5}
 .app-shell:has(#posBarcodeInput) .cart{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0 28px}
 .app-shell:has(#posBarcodeInput) .cart>b,.app-shell:has(#posBarcodeInput) .cart-item,.app-shell:has(#posBarcodeInput) .cart>.empty{grid-column:1/-1}
 .app-shell:has(#posBarcodeInput) .tax-box{grid-column:1;align-self:start;margin-top:20px}
 .app-shell:has(#posBarcodeInput) .checkout{grid-column:2;align-self:start;margin-top:20px;grid-template-rows:20px auto}
 .app-shell:has(#posBarcodeInput) .checkout label{font-size:13px;font-weight:600}
 .app-shell:has(#posBarcodeInput) #co{margin-top:16px;min-height:50px}
}
@media(max-width:600px){
 .app-shell:has(#posBarcodeInput) .cart{padding:16px}
 .app-shell:has(#posBarcodeInput) .cart-item{gap:10px}
 .app-shell:has(#posBarcodeInput) .cart-price{min-width:0}
 .app-shell:has(#posBarcodeInput) .qty-control{gap:5px;flex-wrap:wrap;justify-content:flex-end}
 .app-shell:has(#posBarcodeInput) .field{font-size:16px}
 .app-shell:has(#posBarcodeInput) #grandTotalView{font-size:24px}
}

/* General ledger: desktop table and mobile transaction cards. */
.ledger-page{display:grid;gap:16px;min-width:0}
.ledger-page .card{min-width:0}
.ledger-filters{display:grid;grid-template-columns:2fr 1.3fr 1fr 1fr auto;gap:12px;align-items:end}
.ledger-filters>div{min-width:0}.ledger-filters label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.ledger-filters .dhun-select-search{margin:0}
.ledger-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ledger-stat{display:grid;gap:8px;border:1px solid var(--border);border-radius:12px;padding:14px;background:#f8faff;min-width:0}
.ledger-stat span{font-size:12px;color:var(--muted)}.ledger-stat strong{font-size:18px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ledger-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ledger-toolbar h3{margin:0}.ledger-table-wrap{overflow:auto}.ledger-table{width:100%;border-collapse:collapse;min-width:680px}
.ledger-table th{font-size:12px;background:#f8faff;text-align:left}.ledger-table th,.ledger-table td{padding:13px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.ledger-table td:nth-child(n+3),.ledger-table th:nth-child(n+3){text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ledger-table small{display:block;font-size:12px;color:var(--muted);margin-top:5px;overflow-wrap:anywhere}.ledger-table td:nth-child(2){max-width:360px}
.ledger-link{border:0;background:transparent;color:var(--blue);padding:0;min-height:32px;text-align:left;font-weight:700;overflow-wrap:anywhere;cursor:pointer}
.ledger-pagination{display:flex;justify-content:space-between;gap:12px;margin-top:18px}
.ledger-mobile{display:none}.ledger-accounts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}
.ledger-account{border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--card);color:var(--text);text-align:left;cursor:pointer;min-width:0}
.ledger-account>b,.ledger-account>small{display:block;overflow-wrap:anywhere}.ledger-account>small{margin:6px 0 12px;color:var(--muted)}
.ledger-account>div{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:13px}.ledger-account strong{font-variant-numeric:tabular-nums;overflow-wrap:anywhere;text-align:right}
.ledger-account:focus-visible,.ledger-link:focus-visible{outline:3px solid #93c5fd;outline-offset:3px}
@media(max-width:1100px){.ledger-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.ledger-filters>button{grid-column:1/-1}.ledger-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
 .ledger-filters{grid-template-columns:minmax(0,1fr)}.ledger-page .field{min-height:48px;font-size:16px;min-width:0}.ledger-page input[type=date]{appearance:none;-webkit-appearance:none;max-width:100%}
 .ledger-page button{min-height:44px}.ledger-page .label{line-height:1.55}.ledger-table-wrap{display:none}.ledger-mobile{display:grid;gap:12px}
 .ledger-entry{border:1px solid var(--border);border-radius:14px;padding:14px;min-width:0}.ledger-entry-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.ledger-entry-head>*{min-width:0}.ledger-entry-head>small{flex-shrink:0;color:var(--muted);padding-top:12px}
 .ledger-entry p{margin:8px 0;overflow-wrap:anywhere}.ledger-entry>small{color:var(--muted)}.ledger-entry-amounts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
 .ledger-entry-amounts>div{display:grid;gap:4px;min-width:0}.ledger-entry-amounts span{font-size:12px;color:var(--muted)}.ledger-entry-amounts b{font-size:14px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.ledger-entry-amounts>div:last-child{grid-column:1/-1;border-top:1px solid var(--border);padding-top:10px}
 .ledger-toolbar>button{width:100%}.ledger-pagination>button{flex:1;min-width:0}.ledger-stat{padding:12px}.ledger-stat strong{font-size:16px}
}

/* Financial statement tables retain every column on narrow screens. */
.report-table-wrap{overflow:auto;max-width:100%}.report-table{width:100%;border-collapse:collapse;min-width:500px}.report-table th,.report-table td{padding:12px;border-bottom:1px solid var(--border);text-align:left}.report-table td:nth-child(n+3),.report-table th:nth-child(n+3){text-align:right;white-space:nowrap}.report-table tr:last-child{font-weight:700}.report-warning{padding:12px;border:1px solid #d97706;border-radius:10px}.report-mapping{display:grid;grid-template-columns:2fr 1fr auto;gap:12px;align-items:center;margin:12px 0}.report-mapping>*{min-width:0}.report-mapping label{overflow-wrap:anywhere}.reports-page .receipt-row{gap:16px}.reports-page .receipt-row b{overflow-wrap:anywhere}.reports-page .ledger-link{overflow-wrap:anywhere}@media(max-width:700px){.report-mapping{grid-template-columns:1fr}.report-table th,.report-table td{padding:10px}.reports-page .receipt-row>div{min-width:0}}

/* Closing checks, snapshots and append-only audit cards. */
.closing-checks{display:grid;gap:10px;margin:16px 0}.closing-check{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:10px}.closing-check.passed>b{color:#15803d}.closing-check.blocked>b{color:#b45309}.closing-check strong{font-size:12px}.closing-history{padding:16px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere}.closing-history>div:first-child{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.closing-history small{color:var(--muted)}.closing-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.closing-confirm{display:flex;align-items:flex-start;gap:12px;padding:16px 0;line-height:1.5}.closing-confirm input{width:20px;height:20px;flex-shrink:0}.audit-details{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;max-height:320px;overflow:auto}.closing-check span{min-width:0}@media(max-width:700px){.closing-check{grid-template-columns:24px 1fr}.closing-check strong{grid-column:2}.closing-actions{display:grid;grid-template-columns:1fr}.closing-actions button{min-height:44px}}

/* Purchasing and finance: scoped workspace shared by every list, detail and form. */
:is(.finance-workspace,.member-workspace){--finance-surface:#f8faff;--finance-line:#e1e8f2;background:var(--bg)}
:is(.finance-workspace,.member-workspace)>.page-head{gap:18px;align-items:center;border-bottom:1px solid var(--finance-line);background:var(--card);padding:22px 20px}
:is(.finance-workspace,.member-workspace)>.page-head h2{font-size:23px;line-height:1.35;letter-spacing:-.025em;overflow-wrap:anywhere}
:is(.finance-workspace,.member-workspace)>.page-head>div:first-child{min-width:0}
:is(.finance-workspace,.member-workspace)>.page-head small{display:block;margin-bottom:6px;font-size:12px;font-weight:600;color:var(--muted)}
:is(.finance-workspace,.member-workspace) .head-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
:is(.finance-workspace,.member-workspace)>.content{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:20px;padding:22px 20px 30px}
:is(.finance-workspace,.member-workspace) .content>.card,:is(.finance-workspace,.member-workspace) .content>.auth-card{margin:0}
:is(.finance-workspace,.member-workspace) .card{border-radius:16px;padding:22px;border-color:var(--finance-line);box-shadow:0 3px 14px rgba(24,53,90,.035);min-width:0}
:is(.finance-workspace,.member-workspace) .card h3{margin:0 0 16px;font-size:17px;line-height:1.4}
:is(.finance-workspace,.member-workspace) .card p{margin:10px 0;line-height:1.65;overflow-wrap:anywhere}
:is(.finance-workspace,.member-workspace) .label,:is(.finance-workspace,.member-workspace) small{line-height:1.55}
:is(.finance-workspace,.member-workspace) .card>.label{margin-top:8px}
:is(.finance-workspace,.member-workspace) .receipt-row{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;padding:12px 0;margin:0;line-height:1.5;border-bottom:1px solid #edf1f7}
:is(.finance-workspace,.member-workspace) .receipt-row:last-child{border-bottom:0}
:is(.finance-workspace,.member-workspace) .receipt-row>span,:is(.finance-workspace,.member-workspace) .receipt-row>div{min-width:0;overflow-wrap:anywhere}
:is(.finance-workspace,.member-workspace) .receipt-row>b,:is(.finance-workspace,.member-workspace) .receipt-row>strong{font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere;max-width:60%}
:is(.finance-workspace,.member-workspace) .total-line{margin-top:8px;padding-top:18px;font-weight:700;border-top:1px solid var(--finance-line)}
:is(.finance-workspace,.member-workspace) .total-line strong{font-size:21px;color:var(--navy)}
:is(.finance-workspace,.member-workspace) button{font:inherit;line-height:1.4;cursor:pointer}
:is(.finance-workspace,.member-workspace) :is(.primary,.outline,.danger){min-height:44px;padding:11px 16px;border-radius:10px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:normal}
:is(.finance-workspace,.member-workspace) .outline{border-color:#ccd9eb;background:var(--card);color:#235292}
:is(.finance-workspace,.member-workspace) .outline:hover{background:#f1f6ff;border-color:#a0b8dc}
:is(.finance-workspace,.member-workspace) button:disabled{cursor:default;opacity:.6}
:is(.finance-workspace,.member-workspace) :is(button,input,textarea):focus-visible{outline:3px solid #9ac1ff;outline-offset:2px}
:is(.finance-workspace,.member-workspace) .wide{margin-top:10px}
:is(.finance-workspace,.member-workspace) .field,:is(.finance-workspace,.member-workspace) .dhun-select-trigger{min-height:46px;border-radius:10px;font:inherit;font-size:14px;line-height:1.45;border-color:#dbe4f0;min-width:0}
:is(.finance-workspace,.member-workspace) input[type=date]{max-width:100%;min-width:0}
:is(.finance-workspace,.member-workspace) textarea{font:inherit;resize:vertical;min-height:96px}
:is(.finance-workspace,.member-workspace) label:not(.switch-row):not(.closing-confirm){display:block;font-size:13px;font-weight:600;line-height:1.5;margin:14px 0 7px}
:is(.finance-workspace,.member-workspace) input[type=checkbox]{width:20px;height:20px;flex-shrink:0;accent-color:var(--blue);vertical-align:middle}
:is(.finance-workspace,.member-workspace) .auth-card{display:grid;gap:8px;max-width:760px;width:100%;justify-self:start}
:is(.finance-workspace,.member-workspace) .auth-card>label{margin:8px 0 0!important}
:is(.finance-workspace,.member-workspace) .auth-card>.card{background:var(--finance-surface);box-shadow:none;margin:8px 0}
:is(.finance-workspace,.member-workspace) .switch-row{gap:16px;line-height:1.5;min-height:58px}
:is(.finance-workspace,.member-workspace) .filter-grid,:is(.finance-workspace,.member-workspace) .search{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;padding:0;margin:0;align-items:end;min-width:0}
:is(.finance-workspace,.member-workspace) .filter-grid>*,:is(.finance-workspace,.member-workspace) .search>*{min-width:0}
:is(.finance-workspace,.member-workspace) .filter-grid .field,:is(.finance-workspace,.member-workspace) .search .field{margin:0}
:is(.finance-workspace,.member-workspace) .filter-grid>button{margin:0;min-height:46px}
:is(.finance-workspace,.member-workspace) .card>.filter-grid{margin:16px 0}
:is(.finance-workspace,.member-workspace) .product-list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:0;margin:0;min-width:0}
:is(.finance-workspace,.member-workspace) .card>.product-list{margin-top:16px}
:is(.finance-workspace,.member-workspace) .history-row{gap:24px;padding:18px 20px;align-items:center;box-shadow:none}
:is(.finance-workspace,.member-workspace) .history-row>div{min-width:0;overflow-wrap:anywhere}
:is(.finance-workspace,.member-workspace) .history-row :is(strong,.right){flex-shrink:0;max-width:45%;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
:is(.finance-workspace,.member-workspace) .history-row b{font-size:14px;line-height:1.5}
:is(.finance-workspace,.member-workspace) .history-row .label{margin-top:4px}
:is(.finance-workspace,.member-workspace) button.history-row:hover,:is(.finance-workspace,.member-workspace) .menu-row:hover{border-color:#bad0ed;background:#f8fbff}
:is(.finance-workspace,.member-workspace) .stats{margin:0;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
:is(.finance-workspace,.member-workspace) .stat-tile,:is(.finance-workspace,.member-workspace) .stat{border-radius:14px;padding:20px;min-height:122px}
:is(.finance-workspace,.member-workspace) .stat strong,:is(.finance-workspace,.member-workspace) .stat-tile strong{font-size:23px;line-height:1.4;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
:is(.finance-workspace,.member-workspace) .quick-grid{gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));margin:0}
:is(.finance-workspace,.member-workspace) .quick{display:flex;align-items:center;gap:16px;min-height:88px;padding:18px 20px;text-align:left;border:1px solid var(--finance-line);box-shadow:none}
:is(.finance-workspace,.member-workspace) .quick b{margin:0;font-size:14px;line-height:1.5}
:is(.finance-workspace,.member-workspace) .quick-icon{flex-shrink:0}
:is(.finance-workspace,.member-workspace) .menu-stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px;margin:0}
:is(.finance-workspace,.member-workspace) .menu-row{min-height:76px;padding:20px;border:1px solid var(--finance-line);font-size:14px;font-weight:600;justify-content:space-between}
:is(.finance-workspace,.member-workspace) .menu-row::after{content:'›';font-size:22px;color:#8196b2;margin-left:auto}
:is(.finance-workspace,.member-workspace) .integration-note{gap:8px;line-height:1.6;background:#f5f9ff}
:is(.finance-workspace,.member-workspace) .empty{padding:32px 20px;border:1px dashed #d9e3f0;border-radius:12px;background:var(--finance-surface);line-height:1.6}
:is(.finance-workspace,.member-workspace) :is(#jfLines,#prLines,#autoRows){display:grid;gap:14px;margin:8px 0;min-width:0}
:is(.finance-workspace,.member-workspace) :is(#jfLines,#prLines)>.card{display:grid;gap:8px;background:var(--finance-surface);box-shadow:none}
:is(.finance-workspace,.member-workspace) :is(.jf-remove,.remove-pr-line){justify-self:end;margin-top:6px}
:is(.finance-workspace,.member-workspace) .ledger-table-wrap,:is(.finance-workspace,.member-workspace) .report-table-wrap{max-width:100%;min-width:0;overflow-x:auto;border:1px solid var(--finance-line);border-radius:12px}
:is(.finance-workspace,.member-workspace) :is(.ledger-table,.report-table) th{background:var(--finance-surface);font-size:12px;font-weight:600}
:is(.finance-workspace,.member-workspace) :is(.ledger-table,.report-table) td{font-size:13px;line-height:1.55;font-variant-numeric:tabular-nums}
:is(.finance-workspace,.member-workspace) .ledger-table tr:hover,:is(.finance-workspace,.member-workspace) .report-table tr:hover{background:#fbfdff}
:is(.finance-workspace,.member-workspace) .report-mapping{padding:14px 0;border-bottom:1px solid var(--finance-line);margin:0}
:is(.finance-workspace,.member-workspace) .report-mapping label{margin:0}
:is(.finance-workspace,.member-workspace) .closing-checks{margin:0;gap:12px}
:is(.finance-workspace,.member-workspace) .closing-check{padding:14px;background:var(--finance-surface)}
:is(.finance-workspace,.member-workspace) .closing-confirm{font-size:13px;font-weight:500;gap:12px}
:is(.finance-workspace,.member-workspace) .audit-details{padding:14px;background:var(--finance-surface);border-radius:10px;line-height:1.65}
@media screen and (min-width:900px){
 #app>:is(.finance-workspace,.member-workspace):has(>.desktop-sidebar)>.content{padding:26px 32px 40px!important}
 #app>:is(.finance-workspace,.member-workspace):has(>.desktop-sidebar)>.page-head{padding:24px 32px!important}
 #app>:is(.finance-workspace,.member-workspace)>.supplier-search,#app>:is(.finance-workspace,.member-workspace)>.product-list{margin-left:260px!important;width:calc(100% - 260px)!important;max-width:none!important;padding:20px 32px!important}
 #app>:is(.finance-workspace,.member-workspace):has(>.ds-compact)>.supplier-search,#app>:is(.finance-workspace,.member-workspace):has(>.ds-compact)>.product-list{margin-left:76px!important;width:calc(100% - 76px)!important}
 :is(.finance-workspace,.member-workspace) :is(#jfDate,#jfReference,#jfDescription) {max-width:100%}
 :is(.finance-workspace,.member-workspace) .auth-card:has(#jfLines){max-width:1100px}
 :is(.finance-workspace,.member-workspace) .supplier-edit{max-width:100%;padding:16px 20px!important;border-radius:14px!important}
}
@media screen and (max-width:700px){
 :is(.finance-workspace,.member-workspace)>.page-head{padding:20px 16px;gap:12px;align-items:flex-start}
 :is(.finance-workspace,.member-workspace)>.page-head h2{font-size:20px}
 :is(.finance-workspace,.member-workspace)>.page-head>button{flex-shrink:0;padding:10px 12px;font-size:12px}
 :is(.finance-workspace,.member-workspace)>.page-head:has(.head-actions){flex-wrap:wrap}
 :is(.finance-workspace,.member-workspace) .head-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 :is(.finance-workspace,.member-workspace)>.content{padding:16px;gap:16px}
 :is(.finance-workspace,.member-workspace) .card{padding:18px;border-radius:14px}
 :is(.finance-workspace,.member-workspace) .field,:is(.finance-workspace,.member-workspace) .dhun-select-trigger{font-size:16px;min-height:48px}
 :is(.finance-workspace,.member-workspace) .filter-grid,:is(.finance-workspace,.member-workspace) .search{grid-template-columns:minmax(0,1fr)}
 :is(.finance-workspace,.member-workspace) .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 :is(.finance-workspace,.member-workspace) .stat,:is(.finance-workspace,.member-workspace) .stat-tile{padding:14px;min-height:110px}
 :is(.finance-workspace,.member-workspace) .stat strong,:is(.finance-workspace,.member-workspace) .stat-tile strong{font-size:18px}
 :is(.finance-workspace,.member-workspace) .quick-grid,:is(.finance-workspace,.member-workspace) .menu-stack{grid-template-columns:minmax(0,1fr)}
 :is(.finance-workspace,.member-workspace) .quick,:is(.finance-workspace,.member-workspace) .menu-row{min-height:68px;padding:16px}
 :is(.finance-workspace,.member-workspace) .history-row{flex-direction:column;align-items:stretch;gap:10px;padding:16px}
 :is(.finance-workspace,.member-workspace) .history-row :is(strong,.right){max-width:100%;align-self:flex-end;text-align:right}
 :is(.finance-workspace,.member-workspace) .receipt-row{gap:14px;padding:11px 0;font-size:13px}
 :is(.finance-workspace,.member-workspace) .receipt-row>b,:is(.finance-workspace,.member-workspace) .receipt-row>strong{max-width:55%}
 :is(.finance-workspace,.member-workspace) .receipt-row:has(>.erp-target){align-items:center}
 :is(.finance-workspace,.member-workspace) .erp-target{flex-shrink:0;font-size:12px;padding:10px}
 :is(.finance-workspace,.member-workspace) .total-line strong{font-size:18px}
 :is(.finance-workspace,.member-workspace) .report-mapping{gap:10px}
 :is(.finance-workspace,.member-workspace)>.supplier-search{max-width:none;padding:16px}
 :is(.finance-workspace,.member-workspace)>.product-list{padding:0 16px 20px}
}
:is(.finance-workspace,.member-workspace) .card>.card{margin-top:14px;box-shadow:none}
:is(.finance-workspace,.member-workspace) .finance-mapping-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:16px;margin-top:18px;align-items:start}
:is(.finance-workspace,.member-workspace) .finance-mapping-grid>.card{margin:0;background:var(--finance-surface);box-shadow:none}
:is(.finance-workspace,.member-workspace) .finance-mapping-grid label{margin-top:0!important}
@media print{:is(.finance-workspace,.member-workspace)>.content{display:block}:is(.finance-workspace,.member-workspace) .card{box-shadow:none}:is(.finance-workspace,.member-workspace) .finance-mapping-grid{display:block}}

:is(.finance-workspace,.member-workspace)>.page-head>h2{min-width:0}

/* HR master — shared spacing and responsive forms. */
.hr-page{max-width:1320px;margin-inline:auto}.hr-toolbar,.hr-person-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.hr-actions,.hr-workdays{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}.hr-grid,.hr-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.hr-fields{margin:16px 0 24px}.hr-fields>div{min-width:0}.hr-page label{display:block;margin-bottom:8px}.hr-person h3{margin:0 0 6px;overflow-wrap:anywhere}.hr-person .hr-links{display:grid;gap:8px;margin:16px 0;color:var(--muted,#64748b);overflow-wrap:anywhere}.hr-page h3{margin-top:16px}.hr-page fieldset{border:0;padding:0;min-width:0}.hr-link-search{display:flex;gap:12px}.hr-link-search .field{flex:1;min-width:0}.hr-workdays label{display:flex;align-items:center;gap:6px}.hr-workdays input{width:auto}.hr-page input[type=checkbox]{accent-color:var(--primary,#2563eb)}
@media(max-width:700px){.hr-grid,.hr-fields{grid-template-columns:1fr}.hr-toolbar{flex-direction:column}.hr-toolbar .hr-actions{width:100%}.hr-actions>button{flex:1;min-width:120px}.hr-link-search{flex-direction:column}.hr-page .ledger-pagination{flex-wrap:wrap;gap:12px}}
/* Karyawan & Anggota: modern navigation and consistently spaced subpages. */
.member-workspace{--member-accent:#2563eb;--member-soft:#eff6ff}
.member-workspace .member-icon{width:24px;height:24px;display:block;flex-shrink:0}
.member-workspace .member-welcome{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px;border:1px solid #d9e7fb;border-radius:20px;background:linear-gradient(120deg,#edf5ff,#f8fbff);color:var(--text)}
.member-workspace .member-welcome h3{margin:8px 0;font-size:24px;line-height:1.3}
.member-workspace .member-welcome p{margin:0;color:var(--muted);line-height:1.6;max-width:680px}
.member-workspace .member-eyebrow{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#2563eb}
.member-workspace .member-welcome-icon{display:grid;place-items:center;flex-shrink:0;width:70px;height:70px;border-radius:20px;background:#fff;color:#2563eb;box-shadow:0 8px 24px #2563eb12}
.member-workspace .member-welcome-icon .member-icon{width:34px;height:34px}
.member-workspace .quick{position:relative;min-height:98px;padding-right:34px;transition:border-color .16s,box-shadow .16s,background .16s}
.member-workspace .quick::after{content:'›';position:absolute;right:16px;color:#94a3b8;font-size:24px}
.member-workspace .quick:hover{border-color:#94baf6;background:#f5f9ff;box-shadow:0 5px 18px #1e40af0a}
.member-workspace .quick-icon{width:46px;height:46px;border-radius:14px;background:var(--member-soft);color:#2563eb;display:grid;place-items:center}
.member-workspace .quick-title{margin:4px 0 -6px}.member-workspace .quick-title h3{font-size:16px;margin:0}
.member-workspace .hr-toolbar{align-items:center}.member-workspace .hr-toolbar p{margin:6px 0 0}.member-workspace .hr-toolbar .hr-actions{margin:0}
.member-workspace .hr-fields{gap:20px 24px;margin:18px 0 28px}.member-workspace .hr-fields label{margin:0 0 7px!important}.member-workspace .hr-fields .field{margin:0}
.member-workspace .hr-page h3{margin:0 0 12px}.member-workspace #hrEmployeeForm>h3:not(:first-child){border-top:1px solid #e2e8f0;padding-top:24px;margin-top:24px}
.member-workspace #hrEmployeeForm{max-width:1080px;width:100%}.member-workspace #hrConfigForm{max-width:1080px;width:100%}
.member-workspace .hr-person{display:flex;flex-direction:column;padding:22px}.member-workspace .hr-person-head{align-items:flex-start}.member-workspace .hr-person-head>div{min-width:0;flex:1}.member-workspace .hr-person-head .pill{white-space:nowrap;flex-shrink:0}
.member-workspace .hr-person h3{font-size:17px;line-height:1.45;margin:0}.member-workspace .hr-person p{margin:6px 0}.member-workspace .hr-person .hr-links{border-top:1px solid #e8edf5;padding-top:14px;font-size:13px;margin-top:14px}.member-workspace .hr-person .hr-edit{align-self:flex-start;margin-top:auto}
.member-workspace .hr-workdays{gap:10px;margin:16px 0 20px}.member-workspace .hr-workdays label{display:flex;align-items:center;gap:9px;margin:0;padding:10px 14px;background:var(--member-soft);border:1px solid #dbeafe;border-radius:10px;cursor:pointer;font-weight:500}
.member-workspace .hr-workdays label:has(:checked){border-color:#93baf6;background:#e5efff;color:#1d4ed8}.member-workspace .hr-workdays input{margin:0}
.member-workspace #hc_confirm{margin-right:8px}.member-workspace #hcSave{margin-top:12px}.member-workspace fieldset:disabled{opacity:.75}
.member-workspace .product-summary{font-size:13px;color:var(--muted);padding:0;margin:0}.member-workspace .history-row{width:100%;text-align:left}.member-workspace .history-row .pill{flex-shrink:0}
.member-workspace :is(.product-list,.hr-grid){align-items:stretch}.member-workspace .auth-card{max-width:820px}.member-workspace .auth-card .card{border:1px solid #e1e9f4;border-radius:12px;padding:18px;background:var(--member-soft)}
.member-workspace .search .dhun-select-search,.member-workspace .filter-grid .dhun-select-search{width:100%;min-width:0}.member-workspace .hr-link-search{align-items:center}.member-workspace .hr-link-search .outline{flex-shrink:0}
@media(min-width:1200px){.member-workspace .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.member-workspace .hr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.member-workspace .member-welcome{padding:20px;gap:14px;align-items:flex-start}.member-workspace .member-welcome h3{font-size:21px}.member-workspace .member-welcome-icon{width:44px;height:44px;border-radius:13px}.member-workspace .member-welcome-icon .member-icon{width:24px;height:24px}.member-workspace .hr-fields{gap:18px;margin-bottom:22px}.member-workspace .hr-toolbar{align-items:stretch}.member-workspace .hr-toolbar .hr-actions{gap:8px}.member-workspace .hr-workdays{gap:8px}.member-workspace .hr-workdays label{padding:10px;font-size:12px}.member-workspace .hr-link-search{align-items:stretch}.member-workspace .history-row .pill{align-self:flex-start}.member-workspace .ledger-pagination{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}.member-workspace .quick{min-height:78px}.member-workspace .hr-grid{gap:14px}}
@media(prefers-reduced-motion:reduce){.member-workspace .quick{transition:none}}
.member-workspace>.page-head,.member-workspace>.page-head h2{color:var(--text)}
.member-workspace>.page-head small{opacity:1}
.member-workspace .switch-row{display:flex!important;align-items:center;justify-content:space-between}
.member-workspace .filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
/* Screenshot correction: employee filters, empty state and compact pagination. */
.member-workspace #hrFilter.hr-filter{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,280px) 116px;gap:16px;align-items:end;padding:22px;margin:0}
.member-workspace #hrFilter>div{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
.member-workspace #hrFilter label{margin:0!important;line-height:20px;font-weight:600}
.member-workspace #hrFilter .field,.member-workspace #hrFilter .dhun-select-trigger,.member-workspace #hrFilter>button{height:46px;min-height:46px;margin:0;width:100%;box-sizing:border-box}
.member-workspace #hrFilter .dhun-select-search{width:100%;min-width:0}
.member-workspace .hr-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;min-height:240px;padding:32px!important;border:1px dashed #cddded;background:var(--card);box-shadow:none}
.member-workspace .hr-empty .hr-empty-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:var(--member-soft);color:#2563eb}
.member-workspace .hr-empty h3{margin:0;font-size:18px}.member-workspace .hr-empty p{margin:0 0 4px;color:var(--muted);max-width:490px;font-size:14px;line-height:1.6}
.member-workspace .hr-pagination{display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:4px 0;font-size:13px;color:var(--muted)}
.member-workspace .hr-integration{border-top:1px solid #dfe7f2;padding:16px 4px 0;font-size:13px;color:var(--muted)}
.member-workspace .hr-integration b{font-size:13px;color:var(--text)}.member-workspace .hr-integration p{margin:6px 0 0;line-height:1.6}
@media(max-width:700px){.member-workspace #hrFilter.hr-filter{grid-template-columns:minmax(0,1fr);padding:18px;gap:16px}.member-workspace .hr-empty{min-height:220px;padding:24px 18px!important}.member-workspace .hr-pagination{flex-wrap:wrap;justify-content:space-between}.member-workspace .hr-pagination button{flex:1}}

.member-workspace .member-editor{max-width:1120px;padding:26px!important}.member-editor>h3{margin:0 0 8px}.member-editor-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 24px;margin:24px 0}.member-editor-field{display:grid;gap:8px;min-width:0}.member-workspace .member-editor-field label{margin:0}.member-editor-field:has(#memberAddress),.member-editor-field:has(#memberNotes){grid-column:1/-1}.member-workspace .member-editor-field .field{margin:0;width:100%;min-height:46px}.member-editor>#saveMemberData{width:auto;min-width:180px;margin-top:20px}.hr-confirm-box{padding:16px;background:var(--soft,#f3f6fc);border:1px solid var(--line,#dce4f2);border-radius:12px;margin:18px 0}.hr-confirm-box label{display:flex;align-items:center;gap:10px}.hr-confirm-box p{margin:8px 0 0}.member-workspace #hcSave:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:700px){.member-editor-fields{grid-template-columns:minmax(0,1fr)}.member-workspace .member-editor{padding:18px!important}.member-editor>#saveMemberData{width:100%}}
/* HR per-day schedules and employee shifts */
.member-workspace .hr-schedule-section{max-width:none;padding:24px!important;min-width:0}.hr-section-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.hr-section-head h3,.hr-section-head h4{margin:0 0 8px}.hr-section-head p{margin:0;max-width:760px}.hr-section-head button{flex-shrink:0}.hr-week-summary{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:18px 0}.hr-day-card{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line,#dce4f2);border-radius:12px;padding:14px;background:var(--soft,#f3f6fc);min-width:0}.hr-day-card span{font-size:13px}.hr-day-card small{color:var(--muted);font-size:11px}.hr-day-off{opacity:.7}.hr-shift-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.hr-shift-card{border:1px solid var(--line,#dce4f2);border-radius:14px;padding:18px;min-width:0}.hr-shift-card .label{line-height:1.9}.hr-shift-card .hr-section-head{margin-bottom:6px}.hr-assignment-list{display:grid;gap:12px;margin:18px 0}.hr-assignment{border:1px solid var(--line,#dce4f2);border-radius:12px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:16px}.hr-assignment .label{margin:8px 0}.hr-week-labels,.hr-day-row{display:grid;grid-template-columns:minmax(110px,1fr) minmax(110px,1fr) minmax(110px,1fr) minmax(115px,1fr) minmax(120px,1fr);gap:16px;align-items:center}.hr-week-labels{font-size:12px;color:var(--muted);padding:12px 0}.hr-day-row{padding:14px 0;border-top:1px solid var(--line,#dce4f2)}.member-workspace .hr-day-row label{margin:0;display:flex;gap:8px;align-items:center}.hr-day-row label>span{display:none}.member-workspace .hr-day-row input.field{margin:0;width:100%;min-width:0}.member-workspace .hr-day-row input[type=checkbox],.member-workspace .hr-check input{width:20px;height:20px;flex-shrink:0;accent-color:var(--primary,#4f5cff)}.hr-check{display:flex;align-items:center;gap:10px;margin:22px 0!important}.hr-schedule-section>.hr-actions{margin-top:24px}.hr-schedule-section .hr-fields>div{display:flex;flex-direction:column;gap:8px;min-width:0}.hr-schedule-section .hr-fields>div>label{margin:0}.hr-schedule-section .hr-fields .field{margin:0}.hr-schedule-section .hr-fields button{align-self:flex-start}.hr-preview-result:not(:empty){margin-top:18px;padding:18px;background:var(--soft,#f3f6fc);border:1px solid var(--line,#dce4f2);border-radius:12px}.hr-schedule-link{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:22px 0;padding:18px;background:var(--soft,#f3f6fc);border-radius:12px;border:1px solid var(--line,#dce4f2)}.hr-schedule-link p{margin:6px 0 0}.hr-schedule-link button{flex-shrink:0}
@media(max-width:1200px){.hr-week-summary{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.hr-week-labels{display:none}.hr-day-row{grid-template-columns:repeat(2,minmax(0,1fr))}.hr-day-row .hr-day-enabled{grid-column:1/-1}.member-workspace .hr-day-row label:not(.hr-day-enabled){display:flex;flex-direction:column;align-items:stretch;gap:8px}.hr-day-row label>span{display:block;font-size:12px;color:var(--muted)}.member-workspace .hr-day-row .hr-next-day{flex-direction:row!important;align-items:center!important}.hr-shift-grid{grid-template-columns:1fr}}
@media(max-width:700px){.member-workspace .hr-schedule-section{padding:18px!important}.hr-section-head,.hr-assignment,.hr-schedule-link{align-items:flex-start;flex-direction:column}.hr-week-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.hr-section-head button,.hr-schedule-link button{width:100%}.hr-assignment>.hr-actions{width:100%;flex-wrap:wrap}.hr-day-card{padding:12px}}
/* Tax operating workspace */
.tax-page{display:grid;gap:20px;min-width:0}.tax-intro,.tax-toolbar,.tax-record-head{display:flex;justify-content:space-between;align-items:center;gap:18px}.tax-intro h3,.tax-record h3{margin:0 0 8px}.tax-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.tax-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;margin:18px 0}.tax-fields>div{display:flex;flex-direction:column;gap:8px;min-width:0}.tax-page .tax-fields label{margin:0}.tax-page .tax-fields .field{margin:0;width:100%;min-width:0}.tax-fields button{align-self:flex-start}.tax-filter{display:flex;align-items:end;gap:14px;flex-wrap:wrap}.tax-filter>div{min-width:180px;display:grid;gap:8px}.tax-page .tax-filter label{margin:0}.tax-filter .field{margin:0}.tax-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.tax-summary .card{display:flex;flex-direction:column;gap:12px;min-width:0}.tax-summary strong{font-size:23px;overflow-wrap:anywhere}.tax-summary small{color:var(--muted)}.tax-record-list{display:grid;gap:16px}.tax-record-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0}.tax-record-values span{display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:12px}.tax-record-values b{font-size:17px;color:var(--text);overflow-wrap:anywhere}.tax-recap{display:grid;gap:12px}.tax-recap>div{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:12px 0;border-bottom:1px solid var(--border)}.tax-page .tax-check{display:flex;gap:10px;align-items:center;margin:20px 0}.tax-page .tax-check input{width:20px;height:20px;flex-shrink:0;accent-color:var(--primary,#4f5cff)}.tax-estimate{padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--soft,#f3f6fc);margin:18px 0}.tax-empty{padding:30px!important;text-align:center}.tax-record-head>div{min-width:0}.tax-record h3{overflow-wrap:anywhere}
@media(max-width:1100px){.tax-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.tax-fields{grid-template-columns:minmax(0,1fr)}.tax-intro,.tax-toolbar,.tax-record-head{align-items:flex-start;flex-direction:column}.tax-summary{gap:10px}.tax-summary strong{font-size:18px}.tax-record-values{grid-template-columns:minmax(0,1fr);gap:12px}.tax-filter>div{flex:1;min-width:0}.tax-filter button{flex:1}.tax-recap>div{align-items:flex-start;flex-direction:column;gap:8px}.tax-page .tax-actions{width:100%}.tax-page .tax-actions button{flex:1}.tax-record-head .pill{align-self:flex-start}}

/* Internal DHUN platform workspace */
.platform-header{background:linear-gradient(120deg,#06366d,#087aec);color:#fff;padding:32px;display:flex;justify-content:space-between;gap:20px;align-items:center}.platform-header h1{margin:6px 0;font-size:28px}.platform-header p{margin:0;color:#d9edff}.platform-header button{background:#fff}.platform-page{max-width:1200px;margin:auto;padding-bottom:40px}.platform-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.platform-tabs button{border:1px solid #dbe7f2;border-radius:12px;background:#fff;padding:12px 16px;color:#17416b;font-weight:600}.platform-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.platform-metrics strong{display:block;font-size:26px;margin-top:12px;color:#0763ba}.platform-metrics small{color:#637c90}.platform-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;overflow-wrap:anywhere}.platform-row p{margin:8px 0}.platform-search{display:flex;gap:10px;align-items:center}.platform-search .field{margin:0;min-width:0;flex:1}@media(max-width:700px){.platform-header{padding:24px 18px;align-items:flex-start;flex-direction:column}.platform-header h1{font-size:24px}.platform-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.platform-metrics strong{font-size:21px}.platform-row{align-items:flex-start;flex-direction:column}.platform-search{flex-wrap:wrap}.platform-search .field{flex-basis:100%}.platform-tabs button{flex:1;padding:10px}.platform-page{padding:18px}}

/* Unified SaaS design: platform, catalog, referrals, payments and tenant forms. */
.saas-workspace{--saas-ink:#15324f;--saas-muted:#647b91;--saas-line:#dce7f1;background:radial-gradient(ellipse at 95% 0,#e0edff 0,transparent 45%),#f4f7fc;min-height:100vh;color:var(--saas-ink);padding-bottom:32px}
.saas-workspace>.page-head{max-width:1200px;margin:0 auto;padding:32px 28px 18px;align-items:center;border:0;background:transparent;gap:16px}
.saas-workspace>.page-head small{font-size:11px;font-weight:800;letter-spacing:1.8px;color:#3676b0}.saas-workspace>.page-head h2{font-size:28px;letter-spacing:-.7px;margin:7px 0;color:var(--saas-ink)}
.saas-workspace .content{width:100%;max-width:1200px;margin:0 auto;padding:12px 28px 40px;min-width:0;box-sizing:border-box;display:grid;gap:20px}
.saas-workspace .card{border:1px solid var(--saas-line);background:#fff;border-radius:20px;padding:24px;box-shadow:0 6px 24px #25497206;min-width:0;margin:0}
.saas-workspace h3{font-size:18px;line-height:1.4;margin:0 0 12px;letter-spacing:-.25px}.saas-workspace p{line-height:1.65}.saas-workspace .label{color:var(--saas-muted);font-size:13px;line-height:1.6}
.saas-workspace .primary,.saas-workspace .outline{min-height:44px;border-radius:12px;padding:11px 17px;font-size:13px;font-weight:700;line-height:1.4;box-shadow:none;white-space:normal}
.saas-workspace .primary{background:#086bdc;color:#fff;border:1px solid #086bdc}.saas-workspace .primary:hover{background:#055cbe}.saas-workspace .outline{background:#fff;color:#23557f;border:1px solid #cfdeec}.saas-workspace .outline:hover{background:#edf5ff;border-color:#9bc1ed}.saas-workspace button:focus-visible,.saas-workspace .field:focus-visible{outline:3px solid #82b8ff;outline-offset:3px}
.saas-workspace button:disabled{opacity:.5;cursor:not-allowed}.saas-workspace .field{background:#f9fbfe;border:1px solid #d5e2ef;border-radius:12px;min-height:46px;box-sizing:border-box;color:var(--saas-ink);font-size:14px;padding:12px 14px;width:100%;max-width:100%;min-width:0}.saas-workspace textarea.field{min-height:110px;resize:vertical;line-height:1.6}
.saas-workspace label{font-size:13px;font-weight:650;color:#405b75;line-height:1.5}.saas-workspace .saas-form{width:100%;max-width:880px;margin:0 auto;padding:30px}.saas-workspace .saas-fields{gap:22px;margin-bottom:22px;align-items:start}.saas-workspace .saas-form>.field{margin-bottom:22px}.saas-workspace .saas-checkbox{margin:18px 0;padding:12px 14px;border:1px solid #e0eaf5;border-radius:12px;background:#f8fbff}.saas-workspace .saas-checks{background:#f8fbff;padding:20px;border-color:#dce7f1}.saas-workspace .saas-checks legend{font-weight:700;font-size:13px;padding:0 8px;color:#315d87}
.saas-workspace .saas-grid{gap:20px}.saas-workspace .saas-grid>.card{display:flex;flex-direction:column;gap:8px}.saas-workspace .saas-grid .saas-edit-plan{margin-top:auto}.saas-workspace .saas-grid p{margin:4px 0}.saas-workspace .plan-price{font-size:28px;letter-spacing:-.7px;color:#0764cf;line-height:1.3}.saas-workspace .saas-tags span{background:#eff5fd;border:1px solid #dce9f7;border-radius:8px;padding:6px 9px;color:#44647f;font-weight:600}
.saas-workspace .pill{background:#eef6ff;color:#25659b;border:1px solid #d9e9f8;border-radius:999px;font-size:11px;padding:6px 11px;line-height:1.4;max-width:100%;overflow-wrap:anywhere}.saas-workspace .pill.low{background:#fff0f2;color:#b53152;border-color:#fad7e0}.saas-workspace .empty{padding:32px 16px;text-align:center;color:var(--saas-muted);border:1px dashed #d2dfed;border-radius:14px;background:#f9fbff;font-size:14px}
.saas-workspace .sa-section-head,.saas-workspace .request-title-row{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}.saas-workspace .saas-row{padding:18px 0}.saas-workspace .saas-commission{margin-top:14px;padding:20px;border:1px solid #e1eaf3;border-radius:16px;background:#fbfdff}.saas-workspace .tenant-actions{gap:10px;margin-top:16px}.saas-workspace .tenant-actions button{flex:0 1 auto}.saas-workspace .superadmin-page .product-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.saas-workspace .tenant-card .saas-card-title{align-items:flex-start}.saas-workspace .tenant-card .tenant-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.saas-workspace .quick-title{margin:4px 0 0}.saas-workspace .quick-title h3{margin:0}
.saas-workspace .subscription-request-list{gap:16px;margin-top:20px}.saas-workspace .subscription-request{padding:22px;border-radius:16px;background:#f9fbff;grid-template-columns:minmax(0,1fr) minmax(160px,220px);gap:24px}.saas-workspace .subscription-request-main{min-width:0}.saas-workspace .request-actions{display:grid;gap:8px}.saas-workspace .invoice-line{padding-top:12px;gap:12px;flex-wrap:wrap}.saas-workspace .payment-details{gap:10px}.saas-workspace .plan-change-line{flex-wrap:wrap}.saas-workspace .payment-confirm-form,.saas-workspace .plan-admin-form{width:100%;max-width:780px;margin:auto;display:grid;gap:14px}.saas-workspace .payment-confirm-form .card,.saas-workspace .plan-admin-form .card{padding:18px;background:#f2f7ff;box-shadow:none}.saas-workspace .auth-card{max-width:780px}
.saas-workspace .platform-header{padding:32px max(28px,calc((100vw - 1144px)/2));background:linear-gradient(115deg,#102e54,#0758ab);border-bottom:1px solid #ffffff26;min-height:170px;box-sizing:border-box}.saas-workspace .platform-header small{font-size:10px;font-weight:700;letter-spacing:2px;color:#b8d7f4}.saas-workspace .platform-header h1{font-size:30px;letter-spacing:-.8px}.saas-workspace .platform-header p{font-size:13px}.saas-workspace .platform-header .tenant-actions{margin:0}.saas-workspace .platform-page{padding-top:24px}.saas-workspace .platform-page>h2{font-size:23px;margin:0;letter-spacing:-.5px}.saas-workspace .platform-tabs{margin:0;gap:6px;padding:7px;background:#e8eff8;border:1px solid #d8e3ef;border-radius:16px}.saas-workspace .platform-tabs button{min-height:44px;border:0;background:transparent;color:#526e89;border-radius:10px;font-size:13px;padding:10px 16px;font-weight:700}.saas-workspace .platform-tabs button:hover{background:#fff8}.saas-workspace .platform-tabs button[aria-current=page]{background:#fff;color:#086bdc;box-shadow:0 2px 8px #173e6410}.saas-workspace .platform-metrics{gap:16px;margin:0}.saas-workspace .platform-metrics .card{position:relative;padding:22px;overflow:hidden}.saas-workspace .platform-metrics .card:before{content:'';display:block;width:28px;height:4px;border-radius:4px;background:#3288eb;margin-bottom:16px}.saas-workspace .platform-metrics small{font-size:12px;font-weight:600;line-height:1.5;display:block}.saas-workspace .platform-metrics strong{font-size:30px;letter-spacing:-.8px;margin-top:12px;line-height:1.3}.saas-workspace .platform-row{margin:0;gap:18px}.saas-workspace .platform-row b{font-size:16px}.saas-workspace .platform-row p{margin:6px 0}.saas-workspace .platform-row strong{font-size:24px;color:#0764cf}.saas-workspace .platform-search{gap:12px}.saas-workspace .platform-search button{flex-shrink:0}
@media(min-width:701px) and (max-width:1000px){.saas-workspace .platform-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.saas-workspace{padding-bottom:18px}.saas-workspace>.page-head{padding:24px 18px 10px;align-items:flex-start}.saas-workspace>.page-head h2{font-size:24px}.saas-workspace .content{padding:14px 16px 28px;gap:16px}.saas-workspace .card,.saas-workspace .saas-form{padding:20px;border-radius:16px}.saas-workspace .saas-fields{grid-template-columns:minmax(0,1fr);gap:18px}.saas-workspace .field{font-size:16px;min-height:48px}.saas-workspace .platform-header{padding:26px 20px;min-height:0}.saas-workspace .platform-header h1{font-size:26px}.saas-workspace .platform-header .tenant-actions{display:flex;width:auto}.saas-workspace .platform-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.saas-workspace .platform-tabs button{padding:10px 8px}.saas-workspace .platform-metrics{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.saas-workspace .platform-metrics .card{padding:17px}.saas-workspace .platform-metrics strong{font-size:23px;letter-spacing:-.5px}.saas-workspace .platform-row{align-items:stretch}.saas-workspace .platform-row>button{width:100%}.saas-workspace .superadmin-page .product-list{grid-template-columns:minmax(0,1fr)}.saas-workspace .tenant-card .tenant-actions{grid-template-columns:minmax(0,1fr)}.saas-workspace .subscription-request{grid-template-columns:minmax(0,1fr);padding:18px;gap:16px}.saas-workspace .request-actions{grid-template-columns:minmax(0,1fr)}.saas-workspace .saas-commission{padding:16px}.saas-workspace .sa-section-head{align-items:stretch}.saas-workspace .sa-section-head>button{width:100%}.saas-workspace .saas-checks{padding:14px}.saas-workspace .plan-price{font-size:25px}.saas-workspace .platform-search button{flex:1}.saas-workspace .saas-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:no-preference){.saas-workspace button{transition:background .15s,border-color .15s}.saas-workspace .card{animation:saas-enter .2s ease-out}@keyframes saas-enter{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:none}}}
/* Read-only AI assistant */
.ai-page{max-width:1000px;margin:auto;display:grid;gap:20px}.ai-intro h3{font-size:24px;margin:18px 0 10px}.ai-intro p{line-height:1.65;color:#567087}.ai-examples{display:flex;flex-wrap:wrap;gap:10px}.ai-examples button{text-align:left;min-height:44px}.ai-dialog form{border-top:1px solid #e2eaf4;margin-top:24px;padding-top:22px}.ai-dialog label{display:block;font-weight:600;margin-bottom:10px}.ai-dialog textarea{resize:vertical;font-size:16px}.ai-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px}.ai-response{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;font-size:15px;color:#25435d}.ai-question{padding:14px 18px;border-radius:14px;background:#eef5ff;color:#1763ac;margin-bottom:20px;white-space:pre-wrap;overflow-wrap:anywhere}.ai-sources{margin-top:22px;padding:16px;background:#f5f8fc;border-radius:12px;display:grid;gap:8px;font-size:12px;color:#5b728a}.ai-error{color:#b2334b;overflow-wrap:anywhere}.ai-page .card{min-width:0}@media(max-width:700px){.ai-page{padding:14px 16px 100px;gap:14px}.ai-page .card{padding:20px}.ai-intro h3{font-size:21px}.ai-controls{align-items:stretch;flex-direction:column}.ai-examples{display:grid;grid-template-columns:minmax(0,1fr)}.ai-response{font-size:14px}.ai-controls button{width:100%;min-height:48px}}

/* AI subscription management */
.saas-workspace .ai-admin{display:grid;gap:24px;min-width:0}.ai-admin-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(125deg,#102e54,#166ac2);border:1px solid #234f82;border-radius:22px;padding:30px;color:#fff}.saas-workspace .ai-admin-hero h3{font-size:26px;margin:10px 0;line-height:1.25;letter-spacing:-.6px}.ai-admin-hero p{margin:0;color:#d6e7fa;font-size:14px}.ai-eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:#a8d9ff}.ai-billing-link{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;text-decoration:none;background:#fff;color:#105b9e;padding:13px 18px;border-radius:12px;font-size:13px;font-weight:750;min-height:44px;box-sizing:border-box}.ai-admin-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.ai-admin-metrics article{padding:22px;background:#fff;border:1px solid #dce7f1;border-radius:18px;min-width:0}.ai-admin-metrics span{display:block;font-size:12px;color:#637b93}.ai-admin-metrics strong{display:block;font-size:30px;color:#155caa;margin-top:10px;overflow-wrap:anywhere}.ai-section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.saas-workspace .ai-section-heading h3{margin:0}.ai-section-heading p{margin:6px 0 0;color:#698097;font-size:13px}.ai-search-label{display:grid;gap:6px;width:280px;max-width:100%}.ai-search-label span{font-size:12px}.ai-tenant-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.saas-workspace .ai-addon-form{display:grid;gap:18px;background:#fff;border:1px solid #dce7f1;border-radius:20px;padding:24px;min-width:0;margin:0}.ai-addon-form[hidden]{display:none!important}.ai-tenant-heading{display:flex;align-items:center;gap:12px;min-width:0}.ai-tenant-heading>div:last-child{min-width:0}.ai-tenant-heading h4{margin:0 0 8px;font-size:16px;overflow-wrap:anywhere}.ai-tenant-avatar{display:grid;place-items:center;flex-shrink:0;width:46px;height:46px;border-radius:14px;background:#eaf3ff;color:#1765ba;font-weight:800;font-size:20px}.ai-status-badge{display:inline-block;font-size:10px;font-weight:700;color:#63768a;background:#f0f3f7;padding:5px 9px;border-radius:999px}.ai-status-badge.is-active{background:#e5f7ef;color:#19744f}.ai-quota-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#657b90}.ai-quota-summary strong{font-size:18px;color:#214868}.ai-quota-summary small{font-size:12px;color:#8394a4;font-weight:500}.ai-quota-progress{width:100%;height:6px;border:0;border-radius:99px;overflow:hidden;appearance:none;background:#edf2f8;margin-top:-8px}.ai-quota-progress::-webkit-progress-bar{background:#edf2f8}.ai-quota-progress::-webkit-progress-value{background:#287bdc;border-radius:99px}.ai-quota-progress::-moz-progress-bar{background:#287bdc;border-radius:99px}.ai-toggle-row{display:flex;align-items:center;justify-content:space-between;padding-top:18px;border-top:1px solid #edf1f6;gap:12px}.ai-toggle-row input{appearance:none;width:42px;height:24px;background:#ccd8e5;border-radius:99px;position:relative;flex-shrink:0;cursor:pointer;margin:0}.ai-toggle-row input:before{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002}.ai-toggle-row input:checked{background:#1475db}.ai-toggle-row input:checked:before{left:21px}.ai-settings-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.ai-settings-fields label{display:grid;gap:7px;min-width:0}.saas-workspace .ai-settings-fields .field{margin:0}.ai-addon-form>.primary{width:100%}.ai-usage-note{border:1px solid #dce7f1;border-radius:16px;background:#f8fbff;padding:18px 22px;font-size:13px;color:#62788e}.ai-usage-note summary{cursor:pointer;font-weight:700;color:#365b7c;min-height:24px}.ai-usage-note p:last-child{margin-bottom:0}.ai-admin input:focus-visible,.ai-admin a:focus-visible,.ai-admin summary:focus-visible{outline:3px solid #82b8ff;outline-offset:3px}@media(max-width:700px){.ai-admin-hero{flex-direction:column;align-items:stretch;padding:24px;border-radius:18px}.saas-workspace .ai-admin-hero h3{font-size:23px}.ai-admin-metrics{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}.ai-admin-metrics article:last-child{grid-column:1/-1}.ai-admin-metrics article{padding:18px}.ai-admin-metrics strong{font-size:25px}.ai-section-heading{flex-direction:column;align-items:stretch}.ai-search-label{width:100%}.ai-tenant-grid{grid-template-columns:minmax(0,1fr);gap:16px}.saas-workspace .ai-addon-form{padding:20px;gap:18px}.ai-settings-fields{grid-template-columns:minmax(0,1fr)}.ai-usage-note{padding:18px}.ai-admin{gap:20px}}

.ai-owner-stores{font-size:12px;color:#617a92}.ai-owner-stores summary{cursor:pointer;color:#25659b;font-weight:700}.ai-owner-stores p{display:flex;justify-content:space-between;gap:12px;overflow-wrap:anywhere}.ai-owner-stores b{flex-shrink:0;font-weight:600}

/* Floating tenant assistant */
.dhun-chat{position:fixed;right:24px;bottom:24px;z-index:1300;font-family:inherit}.chat-launcher{display:flex;align-items:center;gap:10px;padding:15px 20px;border:0;border-radius:999px;background:#086bdc;color:#fff;box-shadow:0 8px 26px #0754b344;font-size:14px;font-weight:700;min-height:52px}.chat-panel{position:absolute;right:0;bottom:68px;width:380px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100dvh - 130px);background:#fff;border:1px solid #dce7f1;border-radius:20px;box-shadow:0 18px 70px #15345435;display:flex;flex-direction:column;overflow:hidden;color:#183b59}.chat-panel[hidden]{display:none}.chat-panel header{background:linear-gradient(110deg,#143764,#086bdc);color:#fff;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}.chat-panel header strong{font-size:16px}.chat-panel header small{display:block;color:#c5def7;margin-top:5px;font-size:12px;overflow-wrap:anywhere}.chat-panel header button{border:0;background:#ffffff20;color:#fff;font-size:26px;border-radius:10px;min-width:40px;min-height:40px}.chat-scope{font-size:11px;color:#62798e;background:#f5f8fc;padding:12px 18px;margin:0;line-height:1.5}.chat-messages{flex:1;min-height:0;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}.chat-bubble{font-size:13px;line-height:1.65;border-radius:14px;padding:12px 14px;white-space:pre-wrap;overflow-wrap:anywhere;max-width:94%}.from-user{align-self:flex-end;background:#096ddd;color:#fff}.from-ai{align-self:flex-start;background:#eef3f9;color:#284761}.chat-welcome{font-size:14px;padding:16px 0}.chat-welcome p{font-size:13px;color:#73879a;line-height:1.6}.chat-quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px}.chat-quick button{background:#f1f6fd;border:1px solid #dbe8f8;color:#2563a4;border-radius:999px;padding:8px 12px;font-size:11px;min-height:36px}.chat-panel form{padding:12px 16px;border-top:1px solid #e4ebf3}.chat-input-label{display:block;font-size:11px;font-weight:700;margin-bottom:7px}.chat-panel textarea{width:100%;box-sizing:border-box;resize:none;border:1px solid #d5e2ef;border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;max-height:90px;background:#fafcff;color:#25465f}.chat-panel form>div{display:flex;justify-content:space-between;gap:10px;margin-top:8px}.chat-panel form button{padding:9px 14px;min-height:40px;border-radius:10px;border:0;font-size:12px;font-weight:700;background:#eef4fb;color:#37648f}.chat-panel #chatSubmit{background:#086bdc;color:#fff}.chat-panel button:disabled{opacity:.5}.chat-disclosure{padding:0 16px 12px;font-size:10px;color:#7b8da0;line-height:1.4}.dhun-chat button:focus-visible,.dhun-chat textarea:focus-visible{outline:3px solid #81b8ff;outline-offset:2px}@media(max-width:899px){.dhun-chat{right:16px;bottom:calc(90px + env(safe-area-inset-bottom,0px))}.chat-launcher{padding:14px;border-radius:50%}.chat-launcher span{display:none}.chat-panel{bottom:66px;width:calc(100vw - 32px);max-height:calc(100dvh - 210px);height:520px}.chat-panel textarea{font-size:16px}}


/* Compact member storefront, scoped to member shopping. */
.member-shop-page{background:var(--bg);padding-bottom:24px}
.member-shop-page button,.member-shop-page input{font:inherit}
.member-shop-header{display:flex;align-items:center;gap:12px;padding:22px 20px 18px;max-width:1100px;margin:auto}
.member-shop-header h2{font-size:21px;line-height:1.2;letter-spacing:-.6px;margin:4px 0 0;color:var(--text)}
.member-shop-header small{font-size:9px;letter-spacing:1.6px;font-weight:700;color:var(--muted)}
.member-shop-page .ms-back{display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text)}
.member-shop-page svg{width:22px;height:22px;flex-shrink:0}
.member-shop-page .ms-orders{margin-left:auto;border:0;background:transparent;color:var(--blue);font-size:12px;font-weight:650;padding:10px 0 10px 8px;white-space:nowrap}
.member-shop-main{padding:0 20px;max-width:1100px;margin:auto}
.ms-wallet{border:1px solid var(--border);border-radius:18px;background:var(--card);padding:16px;margin-bottom:22px;box-shadow:0 3px 12px rgba(11,47,107,.025)}
.ms-store{display:flex;align-items:center;gap:10px}
.ms-store-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(13,110,253,.07);color:var(--blue)}
.ms-store>div{display:grid;gap:3px;min-width:0}.ms-store b{font-size:13px;overflow-wrap:anywhere}.ms-store div span{font-size:11px;color:var(--muted)}
.ms-payment{margin-left:auto;font-size:9px;padding:5px 7px;border-radius:6px;color:var(--blue);background:rgba(13,110,253,.06);white-space:nowrap}
.ms-balances{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.ms-balances>div{display:grid;gap:5px}.ms-balances>div+div{border-left:1px solid var(--border);padding-left:16px}
.ms-balances span{font-size:11px;color:var(--muted)}.ms-balances strong{font-size:21px;letter-spacing:-.6px;color:var(--text)}.ms-balances b{font-size:16px;align-self:center;font-weight:600}
.member-shop-layout{display:grid;gap:24px}.ms-catalog-section{min-width:0}
.ms-search{display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:var(--card);border-radius:12px;padding:0 12px;margin:0}
.ms-search svg{width:18px;height:18px;color:var(--muted)}
.member-shop-page .ms-search input{border:0;box-shadow:none;outline:none;min-width:0;width:100%;background:transparent;padding:13px 0;border-radius:0;font-size:13px;color:var(--text)}
.ms-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(13,110,253,.08)}
.ms-section-title{display:flex;align-items:center;justify-content:space-between;margin:20px 0 12px}
.ms-section-title h3{font-size:15px;margin:0;letter-spacing:-.2px}.ms-section-title span{font-size:11px;color:var(--muted)}
.ms-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ms-product{border:1px solid var(--border);background:var(--card);border-radius:14px;overflow:hidden}
.ms-product-image{position:relative;height:88px;display:grid;place-items:center;background:rgba(13,110,253,.035);color:#9eb4cc}
.ms-product-image>svg{width:30px;height:30px;stroke-width:1.3}
.ms-product-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9px;background:var(--card)}
.ms-in-cart{position:absolute;bottom:7px;left:8px;padding:3px 6px;border-radius:5px;background:var(--card);color:var(--blue);font-size:9px;font-weight:650;border:1px solid var(--border)}
.ms-product-body{padding:12px}
.ms-product h4{margin:0 0 7px;font-size:13px;line-height:1.4;font-weight:650;min-height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ms-price{font-size:14px;font-weight:750;letter-spacing:-.3px}.ms-price small{font-size:10px;color:var(--muted);font-weight:400;letter-spacing:0}
.ms-stock{font-size:10px;color:var(--muted);margin:5px 0 11px}
.member-shop-page .ms-add{display:flex;justify-content:center;align-items:center;gap:6px;background:rgba(13,110,253,.065);color:var(--blue);border:0;border-radius:8px;min-height:40px;width:100%;font-size:12px;font-weight:650;padding:8px}
.ms-add>span{font-size:19px;line-height:1}
.member-shop-page button:disabled{opacity:.42;cursor:not-allowed}.member-shop-page button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.ms-sold-out .ms-product-image{filter:grayscale(1)}.ms-sold-out .ms-stock{color:var(--red)}
.ms-cart{border:1px solid var(--border);background:var(--card);border-radius:16px;padding:18px;height:fit-content;scroll-margin-top:20px}
.ms-cart-heading{display:flex;align-items:center;gap:9px}.ms-cart-heading svg{color:var(--blue);width:19px;height:19px}.ms-cart-heading h3{margin:0;font-size:15px}.ms-cart-heading>span{margin-left:auto;font-size:11px;color:var(--muted)}
.ms-cart-lines{display:grid;gap:14px;padding:18px 0}
.ms-cart-line{display:flex;align-items:center;gap:12px}.ms-cart-line>div{display:grid;gap:4px;flex:1;min-width:0}.ms-cart-line b{font-size:12px;font-weight:600;overflow-wrap:anywhere}.ms-cart-line span{font-size:11px;color:var(--muted)}
.member-shop-page .ms-remove{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:8px;width:40px;height:40px;padding:0;font-size:20px;flex:none}
.ms-totals{border-top:1px solid var(--border);padding-top:14px;display:grid;gap:9px}
.ms-totals>div{display:flex;justify-content:space-between;gap:8px;font-size:12px}.ms-totals span{color:var(--muted)}.ms-totals b{font-weight:600}
.ms-totals .ms-grand-total{margin:3px 0 10px;font-size:14px}.ms-grand-total strong{font-size:19px;letter-spacing:-.5px}.ms-grand-total span{color:var(--text)}
.member-shop-page .ms-checkout{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;border-radius:10px;background:var(--blue);color:white;min-height:46px;padding:12px 15px;font-size:13px;font-weight:650}
.ms-cart-note{font-size:10px;color:var(--muted);text-align:center;line-height:1.5;margin:10px 0 14px}
.ms-pickup-note{border-top:1px solid var(--border);padding-top:12px;font-size:11px;color:var(--muted)}.ms-pickup-note summary{cursor:pointer}.ms-pickup-note p{line-height:1.6;margin:8px 0 0}
.ms-limit-warning{font-size:12px;color:var(--red);line-height:1.5}
.ms-empty{grid-column:1/-1;display:grid;justify-items:center;gap:7px;text-align:center;padding:28px 12px;color:var(--muted)}.ms-empty b{font-size:12px;font-weight:500}.ms-empty span{font-size:11px}.ms-empty svg{width:30px;height:30px;opacity:.5;margin-bottom:3px}
.ms-cart-dock{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,560px);z-index:30;display:flex;align-items:center;gap:12px;padding:13px 20px calc(13px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--card);box-shadow:0 -4px 20px rgba(11,47,107,.04)}
.ms-cart-dock>div{display:grid;gap:3px}.ms-cart-dock div span{font-size:10px;color:var(--muted)}.ms-cart-dock strong{font-size:17px;letter-spacing:-.4px}
.member-shop-page .ms-cart-dock button{margin-left:auto;min-height:44px;padding:11px 14px;background:var(--blue);color:#fff;border:0;border-radius:10px;font-size:12px;font-weight:650}
@media(min-width:900px){.member-shop-page{padding-bottom:32px}.member-shop-header{padding-top:32px}.member-shop-header h2{font-size:25px}.member-shop-main{padding-bottom:20px}.ms-wallet{max-width:580px}.member-shop-layout{grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:28px}.ms-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ms-cart{position:sticky;top:20px}.ms-product-image{height:110px}.ms-cart-dock{display:none}}
@media(max-width:360px){.member-shop-header{gap:8px;padding:18px 14px}.member-shop-header h2{font-size:18px}.ms-orders{font-size:11px!important}.member-shop-main{padding:0 14px}.ms-product-grid{gap:9px}.ms-product-body{padding:10px}.ms-balances strong{font-size:18px}.ms-payment{display:none}}

/* Member usage history: keep currency intact on mobile. */
.member-usage-list{display:grid;gap:12px;margin-top:14px}
.member-usage-item{border:1px solid var(--border);border-radius:14px;padding:15px;background:var(--card);min-width:0}
.member-usage-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:7px 14px}
.member-usage-invoice{flex:1 1 150px;min-width:0;font-size:12px;line-height:1.5;font-weight:650;overflow-wrap:anywhere}
.member-usage-amount{flex:0 0 auto;margin-left:auto;white-space:nowrap;word-break:normal;overflow-wrap:normal;font-size:16px;line-height:1.5;font-weight:750;color:var(--text);font-variant-numeric:tabular-nums}
.member-usage-date{display:block;font-size:11px;color:var(--muted);margin-top:5px;line-height:1.5}
.member-usage-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);font-size:10px;line-height:1.6;color:var(--muted)}
.member-usage-billing{display:inline-block;padding:3px 7px;background:rgba(127,127,127,.07);border-radius:6px;white-space:nowrap}
.member-usage-billing.is-billed{color:var(--green);background:rgba(23,166,115,.08)}
@media(max-width:380px){.member-usage-invoice{flex-basis:100%}.member-usage-amount{flex-basis:100%;text-align:right;font-size:17px}.member-usage-item{padding:13px}}

.voluntary-page{max-width:900px;margin:auto}.vs-summary{display:grid;gap:16px;margin-bottom:16px}.vs-summary>div{display:grid;gap:5px}.vs-summary>div>span{font-size:12px;color:var(--muted)}.vs-summary strong{font-size:22px;font-variant-numeric:tabular-nums}.vs-summary p{margin:0;font-size:12px;line-height:1.6}.vs-form{display:grid;gap:10px;margin-bottom:22px}.vs-form h3{margin:0 0 5px;font-size:16px}.vs-form>label{font-size:12px;font-weight:600}.vs-form .field{margin:0}.vs-consent{display:flex;align-items:flex-start;gap:10px;line-height:1.6;padding:8px 0}.vs-consent input{width:18px;height:18px;flex:none;margin:2px 0 0}.vs-form .label{line-height:1.6;margin:0;font-weight:400}.vs-list-heading{display:flex;justify-content:space-between;align-items:center;margin:18px 0 12px}.vs-list-heading h3{font-size:16px;margin:0}.vs-list{display:grid;gap:12px}.vs-request-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.vs-request-actions:empty{display:none}.vs-request-actions button{font-size:12px;padding:10px 12px;min-height:40px}.vs-request p{line-height:1.5;overflow-wrap:anywhere}

.payroll-report{max-width:1400px;margin:0 auto}.payroll-export{grid-template-columns:repeat(3,minmax(0,1fr))}.payroll-group-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}.payroll-group-head h3{margin:0 0 6px}.payroll-group-head>strong{white-space:nowrap;color:var(--primary,#0869e8);font-size:20px}.payroll-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.payroll-table{border-collapse:collapse;width:100%;min-width:1050px;font-size:13px}.payroll-table th,.payroll-table td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--border,#dde5ef);vertical-align:top}.payroll-table th{background:#123d70;color:white;font-weight:600}.payroll-table .money{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}.payroll-table tfoot{font-weight:700;background:var(--bg,#edf4fc)}@media(max-width:600px){.payroll-group-head{display:block}.payroll-group-head>strong{display:block;margin-top:8px}.payroll-export button{padding:12px 6px;font-size:12px}}

.qris-admin-summary .pill{margin-left:12px}.qris-private-key{font-family:monospace;overflow-wrap:anywhere}.platform-page #pqForm label{display:block;margin-top:14px}.platform-page #pqCallbackUrl{font-size:13px}.platform-page #pqResult{overflow-wrap:anywhere}

.qris-dynamic-qr{display:grid;place-items:center;padding:14px;background:#fff;border-radius:16px;margin:16px auto;max-width:280px}.qris-dynamic-qr img,.qris-dynamic-qr canvas{max-width:100%;height:auto}