:root{--bg:#f7f7fb;--card:#fff;--text:#1f2937;--muted:#6b7280;--brand:#7c3aed;--line:#e5e7eb;--orange:#f59e0b;--green:#16a34a;--dark:#374151}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.shell-topbar{height:94px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 16px;background:linear-gradient(135deg,#5b21b6,#f59e0b);color:#fff;box-shadow:0 3px 16px rgba(31,41,55,.16);position:relative;z-index:10}
.brand-wrap{display:flex;align-items:center;gap:13px;min-width:260px}.brand-logo{width:104px;height:auto;display:block;filter:drop-shadow(0 3px 10px rgba(0,0,0,.18))}.brand-wrap h1{font-size:21px;line-height:1.15;margin:0;white-space:nowrap}.brand-wrap p{margin:4px 0 0;font-size:12px;opacity:.92}
.shell-actions{display:grid;grid-template-columns:auto auto auto auto;grid-template-areas:"platform role refresh logout" "status status status status";gap:8px;align-items:center;justify-content:end;min-width:0}button{border:0;border-radius:11px;padding:10px 13px;font-weight:800;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.12)}button:disabled{opacity:.55;cursor:not-allowed}.refresh-all{grid-area:refresh;background:#16a34a;color:#fff;border:1px solid rgba(255,255,255,.25);white-space:nowrap}button.secondary.dark{background:#374151;color:#fff}.logout-main{grid-area:logout;min-width:92px}.role-pill{grid-area:role;display:inline-flex;align-items:center;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.24);font-size:12px;font-weight:800;color:#fff}.platform-buttons{grid-area:platform;display:flex;gap:6px;align-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:4px}.platform-btn{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.20);box-shadow:none;min-width:92px;padding:9px 12px}.platform-btn.active{background:#fff;color:#4c1d95;border-color:#fff}.refresh-status{grid-area:status;font-size:12px;color:rgba(255,255,255,.90);line-height:1.25;text-align:right;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-shell{height:calc(100vh - 94px);position:relative;background:#f7f7fb}.workspace-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:none;background:#fff}.workspace-frame.active{display:block}
.shell-toast{position:fixed;right:18px;bottom:18px;max-width:520px;background:#111827;color:#fff;border-radius:14px;padding:13px 15px;box-shadow:0 20px 60px rgba(15,23,42,.3);font-size:13px;line-height:1.45;z-index:9999}.shell-toast.success{background:#166534}.shell-toast.error{background:#991b1b}.prompt-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:99999;padding:20px}.prompt-card{width:min(620px,calc(100vw - 36px));background:#fff;color:#111827;border-radius:20px;border:1px solid #e5e7eb;box-shadow:0 24px 90px rgba(15,23,42,.35);padding:22px}.prompt-card h2{margin:0 0 8px;font-size:22px}.prompt-card p{line-height:1.5;color:#475569}.prompt-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:16px}.prompt-actions .primary{background:#16a34a;color:#fff}.prompt-actions .secondary{background:#fff;color:#374151;border:1px solid #d1d5db}.prompt-actions .danger{background:#dc2626;color:#fff}
@media(max-width:1100px){.brand-logo{width:90px}.brand-wrap h1{font-size:18px}.brand-wrap p{display:none}.role-pill{max-width:220px}.platform-btn{min-width:82px}.shell-actions{grid-template-columns:auto auto auto auto}}
@media(max-width:900px){.shell-topbar{height:auto;min-height:118px;align-items:flex-start;flex-direction:column}.brand-wrap{min-width:0}.shell-actions{width:100%;grid-template-columns:1fr 1fr;grid-template-areas:"platform platform" "role role" "refresh logout" "status status";justify-content:stretch}.platform-buttons{width:100%;display:grid;grid-template-columns:1fr 1fr}.platform-btn{min-width:0}.refresh-all,.logout-main{width:100%}.refresh-status{text-align:left;white-space:normal}.workspace-shell{height:calc(100vh - 168px)}.brand-wrap h1{white-space:normal}}


/* One-logo compact combined header */
.shell-topbar{height:78px!important;min-height:78px!important;align-items:center!important;flex-direction:row!important;padding:10px 16px!important;}
.brand-logo{width:88px!important;}
.brand-wrap{gap:12px!important;min-width:360px!important;}
.brand-wrap h1{font-size:20px!important;white-space:nowrap!important;}
.brand-wrap p{display:none!important;}
.shell-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:wrap!important;min-width:0!important;}
.platform-buttons{display:flex!important;gap:6px!important;align-items:center!important;width:auto!important;}
.platform-btn{min-width:88px!important;padding:9px 12px!important;}
.save-current{background:#4b5563!important;color:#fff!important;white-space:nowrap!important;}
.refresh-all,.logout-main{width:auto!important;white-space:nowrap!important;}
.role-pill{max-width:260px!important;}
.refresh-status{font-size:11px!important;opacity:.92!important;max-width:420px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:left!important;}
.workspace-shell{height:calc(100vh - 78px)!important;}
@media(max-width:1100px){
  .shell-topbar{height:auto!important;min-height:104px!important;align-items:flex-start!important;flex-direction:column!important;}
  .brand-wrap{min-width:0!important;}
  .brand-wrap h1{white-space:normal!important;}
  .shell-actions{width:100%!important;justify-content:flex-start!important;}
  .platform-buttons{display:grid!important;grid-template-columns:1fr 1fr!important;flex:1 1 280px!important;}
  .platform-btn{min-width:0!important;}
  .refresh-status{max-width:100%!important;white-space:normal!important;}
  .workspace-shell{height:calc(100vh - 132px)!important;}
}


/* Viewer / customer combined Catalogue Summary mode */
body.viewer-catalogue-mode .platform-buttons,
body.viewer-catalogue-mode .save-current{
  display:none!important;
}
body.viewer-catalogue-mode .workspace-frame{
  display:block!important;
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
  left:-9999px!important;
  top:-9999px!important;
}
body.viewer-catalogue-mode .workspace-shell{
  display:none!important;
}
.catalogue-view{
  display:none;
  height:calc(100vh - 78px);
  overflow:auto;
  padding:16px;
  background:#f7f7fb;
}
body.viewer-catalogue-mode .catalogue-view{display:block;}
.catalogue-head-card,.catalogue-search-card,.catalogue-card,.catalogue-kpis{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:14px 16px;
  margin-bottom:14px;
  box-shadow:0 6px 20px rgba(31,41,55,.04);
}
.catalogue-head-card{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.catalogue-head-card h2,.catalogue-card h3{margin:0 0 6px;}
.catalogue-head-card p{margin:0;color:#64748b;font-size:13px;}
.catalogue-search-card{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.catalogue-search-card input{flex:1 1 280px;min-width:220px;border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;font-size:14px;}
.catalogue-search-card select{min-width:170px;border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;font-size:14px;background:#fff;color:#111827;font-weight:800;}
.catalogue-kpis{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:10px;}
.catalogue-kpis div{background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;padding:12px;}
.catalogue-kpis b{display:block;font-size:24px;color:#111827;}
.catalogue-kpis span{font-size:12px;color:#64748b;font-weight:700;}
.catalogue-table-wrap{overflow:auto;border:1px solid #e5e7eb;border-radius:12px;background:#fff;max-height:42vh;}
.catalogue-table{border-collapse:separate;border-spacing:0;width:100%;min-width:980px;font-size:13px;}
.catalogue-table th{position:sticky;top:0;background:#111827;color:#fff;text-align:left;padding:9px;white-space:nowrap;z-index:2;}
.catalogue-table td{border-top:1px solid #e5e7eb;padding:8px;vertical-align:middle;white-space:nowrap;}
.platform-tag{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:900;background:#ede9fe;color:#5b21b6;border:1px solid #ddd6fe;}
.platform-tag.lazada{background:#fff7ed;color:#c2410c;border-color:#fed7aa;}
.muted{color:#64748b;font-size:13px;}
.catalogue-card.error{background:#fef2f2;border-color:#fecaca;color:#991b1b;}
@media(max-width:1100px){
  .catalogue-view{height:calc(100vh - 132px);padding:12px;}
  .catalogue-head-card{align-items:flex-start;flex-direction:column;}
  .catalogue-kpis{grid-template-columns:repeat(2,minmax(130px,1fr));}
}
@media(max-width:520px){.catalogue-kpis{grid-template-columns:1fr}.catalogue-search-card input,.catalogue-search-card select,.catalogue-search-card button{width:100%;}.catalogue-table{min-width:880px;}}


/* Combined web login + deployment polish */
.web-login-overlay{position:fixed;inset:0;z-index:999999;background:linear-gradient(135deg,#fff7ed 0%,#faf5ff 55%,#fef2f2 100%);display:flex;align-items:center;justify-content:center;padding:18px;}
.web-login-card{width:440px;max-width:calc(100vw - 28px);background:#fff;border:1px solid #e5e7eb;border-radius:22px;box-shadow:0 18px 60px rgba(0,0,0,.14);padding:28px;text-align:center;color:#111827;}
.web-login-logo{width:150px;height:auto;margin:0 auto 14px;display:block}.web-login-card h1{font-size:22px;margin:0 0 4px}.web-login-card p{font-size:13px;color:#6b7280;margin:0 0 14px}.web-login-notice{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;padding:10px;border-radius:12px;font-size:13px;text-align:left;margin:10px 0;line-height:1.45}.web-login-card label{display:block;text-align:left;font-size:13px;font-weight:700;margin:12px 0 6px;color:#374151}.web-login-card input{width:100%;border:1px solid #d1d5db;border-radius:12px;padding:12px;font-size:14px;background:#fff}.web-login-card input:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.14)}.web-login-card button{width:100%;border:0;border-radius:13px;padding:12px 14px;font-weight:800;font-size:14px;color:white;background:linear-gradient(90deg,#f59e0b,#ec4899,#8b5cf6);cursor:pointer;margin-top:14px}.web-login-card button:disabled{opacity:.55;cursor:not-allowed}.web-remember{display:flex!important;align-items:center;gap:8px;margin:10px 0 0!important;font-weight:600!important;color:#475569!important;cursor:pointer}.web-remember input{width:16px!important;height:16px!important;padding:0!important;accent-color:#7c3aed}.web-login-error{display:none;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:10px;border-radius:12px;font-size:13px;text-align:left;margin-top:12px;line-height:1.45}.web-login-status{font-size:12px;color:#6b7280;margin-top:12px;min-height:16px}.web-login-copy{margin-top:16px;font-size:11px;color:#9ca3af}body.auth-locked .shell-topbar,body.auth-locked .workspace-shell,body.auth-locked .catalogue-view{filter:blur(2px);pointer-events:none;}
body[data-build="tablet"] .brand-wrap h1{font-size:18px!important;}
body[data-build="tablet"] .workspace-shell{height:calc(100vh - 78px)!important;}
body[data-force-catalogue="true"] .platform-buttons,body[data-force-catalogue="true"] .save-current{display:none!important;}
body[data-force-catalogue="true"] .shell-topbar{height:auto!important;min-height:92px!important;align-items:flex-start!important;flex-direction:column!important;}
body[data-force-catalogue="true"] .brand-logo{width:82px!important;}body[data-force-catalogue="true"] .brand-wrap{min-width:0!important;}body[data-force-catalogue="true"] .brand-wrap h1{font-size:19px!important;white-space:normal!important;}.phone-catalogue-mode .catalogue-view{height:calc(100vh - 132px)!important;padding:10px!important;}.phone-catalogue-mode .catalogue-head-card,.phone-catalogue-mode .catalogue-search-card,.phone-catalogue-mode .catalogue-card,.phone-catalogue-mode .catalogue-kpis{border-radius:12px;padding:11px;margin-bottom:10px;}.phone-catalogue-mode .catalogue-kpis{grid-template-columns:1fr 1fr;}.phone-catalogue-mode .catalogue-table-wrap{max-height:48vh;}.phone-catalogue-mode .catalogue-table{min-width:980px;font-size:12px}.phone-catalogue-mode .catalogue-table td,.phone-catalogue-mode .catalogue-table th{padding:7px}.phone-catalogue-mode .catalogue-search-card{display:grid;grid-template-columns:1fr;}.phone-catalogue-mode .catalogue-search-card input,.phone-catalogue-mode .catalogue-search-card select,.phone-catalogue-mode .catalogue-search-card button{width:100%;min-width:0!important;}
@media(max-width:520px){.phone-catalogue-mode .catalogue-kpis{grid-template-columns:1fr}.phone-catalogue-mode .shell-actions{display:grid!important;grid-template-columns:1fr!important}.phone-catalogue-mode .role-pill,.phone-catalogue-mode .refresh-all,.phone-catalogue-mode .logout-main{width:100%!important;max-width:none!important;justify-content:center}.phone-catalogue-mode .refresh-status{width:100%;text-align:left!important}.phone-catalogue-mode .catalogue-table{min-width:960px;}}