/* =========================================================
     DESIGN TOKENS — masukkan ini ke :root project asli
     ========================================================= */
  :root{
    /* Sidebar (dark blue) */
    --sb-bg: #0b1f3f;
    --sb-bg-deep: #07173016;
    --sb-text: rgba(255,255,255,.78);
    --sb-text-strong: #ffffff;
    --sb-muted: rgba(255,255,255,.46);
    --sb-section: rgba(255,255,255,.38);
    --sb-hover: rgba(255,255,255,.07);
    --sb-active-bg: #ffffff;
    --sb-active-text: #0b1f3f;
    --sb-border: rgba(255,255,255,.08);
    --sb-pill-bg: rgba(255,255,255,.12);

    /* App surface */
    --page-bg: #f3f5fa;
    --card: #ffffff;
    --card-soft: #f8fafc;
    --border: #e6e9f0;
    --border-soft: #eef1f6;

    /* Text */
    --text: #0b1f3f;
    --text-2: #334155;
    --text-3: #64748b;
    --text-4: #94a3b8;

    /* Brand */
    --primary: #2563eb;
    --primary-strong: #1d4ed8;
    --primary-soft: #eff4ff;
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #ef4444;
    --build: #0369a1;
    --build-bg: #f0f9ff;
    --build-border: #bae6fd;

    /* Layout */
    --sb-w: 264px;
    --sb-rail-w: 76px;
    --radius: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
    --shadow-md: 0 4px 14px rgba(15,23,42,.06);
    --shadow-lg: 0 12px 32px rgba(15,23,42,.08);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    font-family:'Outfit', system-ui, -apple-system, sans-serif;
    background:var(--page-bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    line-height:1.45;
    min-height:100vh;
  }
  .num{ font-family:'Inter Tight', 'Outfit', sans-serif; font-variant-numeric:tabular-nums; }

  /* =========================================================
     APP SHELL
     ========================================================= */
  .app{
    display:grid;
    grid-template-columns: var(--sb-w) 1fr;
    min-height:100vh;
  }

  /* =========================================================
     SIDEBAR
     ========================================================= */
  .sb{
    background:var(--sb-bg);
    color:var(--sb-text);
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh;
    overflow:hidden;
    border-right:1px solid var(--sb-border);
  }

  .sb-brand{
    display:flex; align-items:center; gap:11px;
    padding:18px 18px 14px;
    border-bottom:1px solid var(--sb-border);
  }
  .sb-brand-mark{
    width:38px; height:38px; border-radius:11px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:17px;
    box-shadow: 0 6px 18px rgba(37,99,235,.45);
  }
  .sb-brand-name{
    color:var(--sb-text-strong);
    font-weight:800;
    font-size:15px;
    letter-spacing:-.2px;
    line-height:1.1;
  }
  .sb-brand-sub{
    color:var(--sb-muted);
    font-size:11px;
    font-weight:600;
    margin-top:2px;
  }

  /* Scroll area */
  .sb-scroll{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    padding:14px 12px 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
  }
  .sb-scroll::-webkit-scrollbar{ width:6px; }
  .sb-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:99px; }

  /* Section header */
  .sb-section{
    padding:14px 14px 6px;
    margin-top:6px;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--sb-section);
  }
  .sb-section:first-of-type{ margin-top:0; padding-top:6px; }

  /* Menu item */
  .sb-item{
    width:100%;
    display:flex; align-items:center; gap:12px;
    padding:10px 12px;
    margin:1px 0;
    border:none;
    background:transparent;
    color:var(--sb-text);
    border-radius:11px;
    font: inherit;
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
    text-align:left;
    text-decoration:none;
    transition: background .15s ease, color .15s ease, transform .12s ease;
    position:relative;
  }
  a.sb-item,
  a.sb-item:visited,
  a.sb-item:hover,
  a.sb-item:focus,
  a.sb-item:active{
    text-decoration:none;
    color:var(--sb-text);
  }
  a.sb-item.is-active,
  a.sb-item.is-active:visited{
    color:var(--sb-active-text);
  }
  .sb-item:hover{
    background:var(--sb-hover);
    color:var(--sb-text-strong);
  }
  .sb-item:active{ transform: scale(.99); }
  .sb-item .ic{
    width:20px; text-align:center; font-size:15px;
    color:var(--sb-muted);
    flex-shrink:0;
  }
  .sb-item:hover .ic{ color:var(--sb-text-strong); }
  .sb-item .lbl{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* Active state — white pill */
  .sb-item.is-active{
    background:var(--sb-active-bg);
    color:var(--sb-active-text);
    font-weight:700;
    box-shadow: 0 3px 10px rgba(0,0,0,.18);
  }
  .sb-item.is-active .ic{ color:var(--primary); }

  /* Alt active style: left strip (toggled via Tweaks) */
  body.sb-style-strip .sb-item.is-active{
    background: rgba(255,255,255,.07);
    color: var(--sb-text-strong);
    box-shadow:none;
    border-radius: 9px;
    padding-left: 16px;
  }
  body.sb-style-strip .sb-item.is-active::before{
    content:""; position:absolute; left:4px; top:8px; bottom:8px;
    width:3px; border-radius:99px;
    background: #60a5fa;
  }
  body.sb-style-strip .sb-item.is-active .ic{ color: #60a5fa; }
  body.sb-style-strip .sb-item.is-active .sb-count{
    background: rgba(255,255,255,.18);
    color: #fff;
  }

  /* Right-side meta on items: counts and badges */
  .sb-count{
    font-size:11px;
    font-weight:800;
    background:var(--sb-pill-bg);
    color:var(--sb-text-strong);
    padding:2px 8px;
    border-radius:99px;
    min-width:22px;
    text-align:center;
  }
  .sb-item.is-active .sb-count{
    background: var(--primary-soft);
    color: var(--primary-strong);
  }
  .sb-item.sb-sub-item{
    padding-left: 22px;
    font-size: 13px;
  }
  .sb-item.sb-sub-item .ic{
    font-size: 12px;
    opacity: .85;
  }
  .sb-item--soon,
  button.sb-item--soon{
    cursor: not-allowed;
    opacity: .65;
    pointer-events: none;
  }
  .sb-item--soon:hover,
  button.sb-item--soon:hover{
    background: transparent;
    color: var(--sb-text);
    transform: none;
  }
  .sb-item--soon .ic,
  button.sb-item--soon .ic{
    opacity: .75;
  }
  .sb-item--soon:hover .ic,
  button.sb-item--soon:hover .ic{
    color: var(--sb-muted);
  }
  .sb-soon{
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(148, 163, 184, .14);
    color: var(--sb-muted);
    border: 1px solid rgba(148, 163, 184, .22);
    flex-shrink: 0;
    white-space: nowrap;
  }
  .orders-hub-nav{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
  }
  .orders-hub-tab{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    border-radius:12px;
    border:1px solid var(--border);
    background:#fff;
    color:var(--text-2);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    transition:background .15s,border-color .15s,color .15s;
  }
  .orders-hub-tab:hover{
    border-color:#cbd5e1;
    color:var(--text);
  }
  .orders-hub-tab.is-on{
    background:var(--primary-soft);
    border-color:#93c5fd;
    color:var(--primary-strong);
  }
  .orders-hub-hint{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:12px 14px;
    margin-bottom:14px;
    border-radius:12px;
    border:1px solid #e0e7ff;
    background:linear-gradient(135deg,#f8fafc,#eff6ff);
    font-size:12.5px;
    line-height:1.55;
    color:var(--text-2);
  }
  .orders-hub-hint i{
    color:#2563eb;
    margin-top:2px;
    flex-shrink:0;
  }
  .order-type-badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:10px;
    font-weight:800;
    padding:2px 7px;
    border-radius:99px;
    white-space:nowrap;
  }
  .order-type-satuan{
    background:#f0fdf4;
    color:#15803d;
  }
  .order-type-batch{
    background:#eff6ff;
    color:#1d4ed8;
  }
  .order-batch-link{
    display:block;
    margin-top:4px;
    font-size:10.5px;
    font-weight:700;
    color:#2563eb;
    cursor:pointer;
    text-decoration:none;
    max-width:140px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .order-batch-link:hover{ text-decoration:underline; }

  .order-product-link,
  .order-product-plain{
    display:inline-block;
    max-width:100%;
    font-size:11.5px;
    font-weight:600;
    color:var(--primary, #2563eb);
    line-height:1.35;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    vertical-align:bottom;
  }
  .order-product-plain{ color:var(--text-2, #475569); font-weight:500; cursor:default; }
  .order-product-link:hover{ text-decoration:underline; }
  .sb-build{
    font-size:9.5px; font-weight:800; letter-spacing:.06em;
    padding:2px 7px; border-radius:5px;
    background:rgba(3,105,161,.14);
    color:#38bdf8;
    border:1px solid rgba(3,105,161,.28);
  }
  .sb-item.is-active .sb-build{
    background:var(--build-bg);
    color:var(--build);
    border-color:var(--build-border);
  }
  .sb-ext{
    font-size:11px; color:var(--sb-muted);
  }

  /* Sidebar bottom */
  .sb-bottom{
    padding:14px 14px 16px;
    border-top:1px solid var(--sb-border);
    background: linear-gradient(0deg, rgba(0,0,0,.18), transparent);
  }
  .sb-user{
    display:flex; align-items:center; gap:10px;
    padding:8px 8px;
    border-radius:12px;
    background:rgba(255,255,255,.04);
    margin-bottom:10px;
  }
  .sb-avatar{
    width:34px; height:34px; border-radius:50%;
    background: linear-gradient(135deg, #60a5fa, #2563eb);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:800; font-size:13px;
    flex-shrink:0;
  }
  .sb-user-info{ min-width:0; flex:1; }
  .sb-user-name{
    color:var(--sb-text-strong);
    font-weight:700; font-size:13px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .sb-user-mail{
    color:var(--sb-muted);
    font-size:11px; font-weight:500;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .sb-user-btn{
    width:32px; height:32px; border-radius:9px;
    border:none; background:transparent; color:var(--sb-muted);
    cursor:pointer; flex-shrink:0;
    transition: background .15s, color .15s;
  }
  .sb-user-btn:hover{ background:var(--sb-hover); color:var(--sb-text-strong); }

  /* =========================================================
     MAIN AREA
     ========================================================= */
  .main{
    min-width:0;
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
  }
  .dash-viewport{
    position:relative;
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  .dash-viewport > .page{
    flex:1;
    min-height:0;
    position:relative;
  }
  .dash-page-loading{
    position:absolute;
    inset:0;
    z-index:25;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(243,245,250,.78);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    opacity:0;
    pointer-events:none;
    transition:opacity .15s ease;
  }
  .dash-page-loading.is-visible{
    opacity:1;
    pointer-events:auto;
  }
  .dash-page-loading-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    color:var(--text-3);
    font-size:13px;
    font-weight:600;
  }
  .dash-page-loading-inner i{
    font-size:22px;
    color:var(--primary);
  }

  /* Page skeleton (shimmer placeholders) */
  @keyframes dash-sk-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  .dash-sk {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: dash-sk-shimmer 1.4s ease-in-out infinite;
    border-radius: 10px;
  }
  .dash-skeleton-layer {
    position: absolute;
    inset: 0;
    z-index: 15;
    background: var(--page-bg, #f3f5fa);
    padding: 24px 28px 64px;
    overflow: auto;
    pointer-events: none;
  }
  .dash-sk-wrap { display: flex; flex-direction: column; gap: 14px; }
  .dash-sk-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; padding: 22px 24px; border-radius: 16px;
    background: var(--card, #fff); border: 1px solid var(--border-soft);
  }
  .dash-sk-kpis {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  }
  @media (max-width: 900px) {
    .dash-sk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 520px) {
    .dash-sk-kpis { grid-template-columns: 1fr; }
  }
  .dash-sk-kpi {
    padding: 16px 18px; border-radius: 14px;
    background: var(--card, #fff); border: 1px solid var(--border-soft);
  }
  .dash-sk-panel {
    padding: 18px 20px; border-radius: 14px;
    background: var(--card, #fff); border: 1px solid var(--border-soft);
  }
  .dash-sk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .dash-sk-chip { height: 32px; border-radius: 99px; }
  .dash-sk-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px;
  }
  .dash-sk-prod {
    border-radius: 14px; overflow: hidden;
    background: var(--card, #fff); border: 1px solid var(--border-soft);
  }
  .dash-sk-prod-img { height: 160px; border-radius: 0; }
  .dash-sk-prod-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 8px; }
  .dash-sk-toko {
    display: grid; grid-template-columns: 1fr 340px; gap: 14px;
  }
  @media (max-width: 1024px) {
    .dash-sk-toko { grid-template-columns: 1fr; }
  }
  .dash-sk-pd-hero {
    display: grid; grid-template-columns: 200px 1fr auto; gap: 18px; align-items: center;
    padding: 20px; border-radius: 16px;
    background: var(--card, #fff); border: 1px solid var(--border-soft);
  }
  @media (max-width: 768px) {
    .dash-sk-pd-hero { grid-template-columns: 1fr; }
  }
  .dash-sk-pd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 14px;
    align-items: start;
  }
  @media (max-width: 1024px) {
    .dash-sk-pd-layout { grid-template-columns: 1fr; }
  }
  .dash-sk-pd-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .dash-sk-pd-sidebar { min-width: 0; }
  .dash-sk-pd-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
  }
  .dash-sk-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
  .dash-sk-tab { height: 36px; width: 110px; border-radius: 10px; }
  .topbar{
    position:sticky; top:0; z-index:30;
    background: rgba(243,245,250,.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom:1px solid var(--border-soft);
    padding: 14px 28px;
    display:flex; align-items:center; gap:16px;
  }
  .topbar-burger{
    display:none;
    width:40px; height:40px;
    border-radius:11px;
    border:1px solid var(--border);
    background:#fff;
    color:var(--text);
    cursor:pointer;
    align-items:center; justify-content:center;
  }
  .topbar-title{ flex:1; min-width:0; }
  .topbar-title h1{
    margin:0; font-size:18px; font-weight:800;
    letter-spacing:-.3px; line-height:1.1;
  }
  .topbar-crumb{
    color:var(--text-3);
    font-size:12px; font-weight:600;
    margin-top:2px;
  }
  .topbar-search{
    flex: 0 1 360px;
    position:relative;
  }
  .topbar-search input{
    width:100%;
    border:1px solid var(--border);
    background:#fff;
    border-radius:12px;
    padding:9px 12px 9px 38px;
    font: inherit; font-size:13px;
    color:var(--text);
    outline:none;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
  }
  .topbar-search input::-webkit-search-cancel-button,
  .topbar-search input::-webkit-search-decoration,
  .topbar-search input::-webkit-search-results-button,
  .topbar-search input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }
  .topbar-search input::placeholder{ color:var(--text-4); }
  .topbar-search input:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(37,99,235,.12);
  }
  .topbar-search i{
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    color:var(--text-4); font-size:13px; pointer-events:none;
    transition: color .15s;
  }
  .topbar-search:focus-within i{ color:var(--primary); }
  .topbar-search .ts-clear{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    width:22px; height:22px; border-radius:6px;
    background:var(--border-soft); border:none; cursor:pointer;
    display:none; align-items:center; justify-content:center;
    color:var(--text-3); font-size:11px; pointer-events:all;
  }
  .topbar-search .ts-clear:hover{ background:var(--border); color:var(--text); }
  .topbar-search.has-query .ts-clear{ display:flex; }
  .topbar-search.has-query input{ padding-right:34px; }
  .topbar-actions{ display:flex; align-items:center; gap:8px; }
  .icon-btn{
    width:40px; height:40px;
    border-radius:11px;
    border:1px solid var(--border);
    background:#fff;
    color:var(--text-2);
    cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    position:relative;
    transition: border-color .15s, transform .12s, background .15s;
  }
  .icon-btn:hover{ border-color: #cbd5e1; background:#fff; color:var(--text); }
  a.icon-btn.topbar-cart-btn { text-decoration: none; color: inherit; position: relative; }
  /* .dot removed — replaced by .notif-badge (dynamic count) */

  /* Page content */
  .page{
    position: relative;
    padding: 24px 28px 64px;
    max-width: 100%;
    width:100%;
  }
  body[data-dash-shell] #dash-page-root > .page-head {
    display: none;
  }
  .page-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
    margin-bottom:22px; flex-wrap:wrap;
  }
  .page-head h2{
    margin:0; font-size:24px; font-weight:800; letter-spacing:-.4px;
  }
  .page-head .sub{
    color:var(--text-3); font-size:13.5px; margin-top:4px; font-weight:500;
  }

  /* Buttons */
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid var(--border);
    background:#fff; color:var(--text);
    font: inherit; font-weight:700; font-size:13px;
    padding:9px 14px; border-radius:11px;
    cursor:pointer;
    transition: background .15s, border-color .15s, transform .12s;
  }
  .btn:hover{ background:var(--card-soft); border-color:#cbd5e1; }
  .btn:active{ transform: scale(.98); }
  .btn-primary{
    background:var(--primary); color:#fff; border-color:var(--primary);
    box-shadow: 0 4px 12px rgba(37,99,235,.28);
  }
  .btn-primary:hover{ background:var(--primary-strong); border-color:var(--primary-strong); }
  .btn-ghost{ background:transparent; border-color:transparent; color:var(--text-2); }
  .btn-ghost:hover{ background:var(--card-soft); }

  /* Cards */
  .card{
    background:var(--card);
    border:1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  /* =========================================================
     DASHBOARD CONTENT — Overview
     ========================================================= */

  /* Greeting hero */
  .hero{
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 60%, #3b82f6 100%);
    color:#fff;
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    flex-wrap:wrap;
    position:relative; overflow:hidden;
    margin-bottom:22px;
  }
  .hero::before{
    content:""; position:absolute; right:-60px; top:-80px;
    width:280px; height:280px; border-radius:50%;
    background: radial-gradient(circle, rgba(255,255,255,.12), transparent 60%);
  }
  .hero h2{ margin:0 0 6px 0; font-size:22px; font-weight:800; letter-spacing:-.3px; }
  .hero p{ margin:0; color:rgba(255,255,255,.85); font-size:13.5px; max-width:480px; }
  .hero-actions{ display:flex; gap:10px; flex-wrap:wrap; position:relative; }
  .hero-actions .btn{
    background:rgba(255,255,255,.16);
    color:#fff; border-color: rgba(255,255,255,.22);
    backdrop-filter: blur(6px);
  }
  .hero-actions .btn:hover{ background:rgba(255,255,255,.24); }
  .hero-actions .btn-primary{
    background:#fff; color:var(--primary-strong); border-color:#fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
  }
  .hero-actions .btn-primary:hover{ background:#f1f5f9; }

  .dash-profile-status{ margin-bottom:14px; }
  .dash-profile-status-box{
    border:1px solid #fde68a; background:linear-gradient(180deg,#fffbeb 0%,#ffffff 100%);
    padding:18px 20px 20px;
  }
  .dash-profile-status-head{
    display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
    margin-bottom:14px;
  }
  .dash-profile-status-eyebrow{
    font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    color:#b45309; margin-bottom:6px;
  }
  .dash-profile-status-head h3{
    margin:0 0 6px; font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--text);
  }
  .dash-profile-status-head p{
    margin:0; font-size:13px; line-height:1.55; color:var(--text-3); max-width:560px;
  }
  .dash-profile-status-score{
    min-width:72px; text-align:center; background:#fff; border:1px solid #fde68a;
    border-radius:14px; padding:10px 14px; flex-shrink:0;
  }
  .dash-profile-status-score-val{
    font-size:24px; font-weight:900; line-height:1; color:#b45309;
  }
  .dash-profile-status-score-val span{ font-size:14px; font-weight:700; color:var(--text-3); }
  .dash-profile-status-score-lbl{ font-size:11px; font-weight:700; color:var(--text-3); margin-top:4px; }
  .dash-profile-status-bar{
    height:8px; border-radius:99px; background:#fef3c7; overflow:hidden; margin-bottom:14px;
  }
  .dash-profile-status-bar-fill{
    height:100%; border-radius:99px; background:linear-gradient(90deg,#f59e0b,#16a34a);
    transition:width .25s ease;
  }
  .dash-profile-status-list{
    list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:8px;
  }
  .dash-profile-status-item{
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    padding:11px 14px; border-radius:12px; border:1px solid var(--border-soft); background:#fff;
  }
  .dash-profile-status-item.is-done{ border-color:#bbf7d0; background:#f0fdf4; }
  .dash-profile-status-item.is-missing{ border-color:#fde68a; background:#fffdf5; }
  .dash-profile-status-item-main{
    display:flex; align-items:center; gap:10px; min-width:0; flex:1;
  }
  .dash-profile-status-item-ic{
    width:34px; height:34px; border-radius:10px; background:var(--card-soft);
    display:flex; align-items:center; justify-content:center; color:var(--text-2); flex-shrink:0;
  }
  .dash-profile-status-item.is-done .dash-profile-status-item-ic{ background:#dcfce7; color:#16a34a; }
  .dash-profile-status-item.is-missing .dash-profile-status-item-ic{ background:#fef3c7; color:#b45309; }
  .dash-profile-status-item-label{ font-size:13.5px; font-weight:700; color:var(--text); }
  .dash-profile-status-item-badge{
    font-size:11.5px; font-weight:700; color:var(--text-3); margin-left:auto; white-space:nowrap;
  }
  .dash-profile-status-item.is-done .dash-profile-status-item-badge{ color:#15803d; }
  .dash-profile-status-item.is-missing .dash-profile-status-item-badge{ color:#b45309; }
  .dash-profile-status-item-btn{ flex-shrink:0; }
  .dash-profile-status-actions{ display:flex; gap:8px; flex-wrap:wrap; }

  /* KPIs */
  .kpis{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:14px;
    margin-bottom:22px;
  }
  .kpi{
    background:var(--card);
    border:1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding:18px 18px 16px;
    box-shadow: var(--shadow-sm);
    position:relative;
  }
  .kpi-head{
    display:flex; align-items:center; gap:10px;
    color:var(--text-3); font-size:12px; font-weight:700;
  }
  .kpi-ic{
    width:32px; height:32px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    background:var(--primary-soft); color:var(--primary-strong);
    font-size:13px;
  }
  .kpi-ic.green{ background:#ecfdf5; color:#059669; }
  .kpi-ic.amber{ background:#fffbeb; color:#b45309; }
  .kpi-ic.pink{ background:#fdf2f8; color:#be185d; }
  .kpi-val{
    font-family:'Inter Tight','Outfit',sans-serif;
    font-size:28px; font-weight:700; letter-spacing:-.5px;
    color:var(--text);
    margin-top:8px;
    font-variant-numeric: tabular-nums;
  }
  .kpi-trend{
    margin-top:6px; font-size:12px; font-weight:600;
    display:inline-flex; align-items:center; gap:5px;
  }
  .kpi-trend.up{ color:var(--success); }
  .kpi-trend.down{ color:var(--danger); }
  .kpi-trend .vs{ color:var(--text-4); font-weight:500; }

  /* Dashboard overview — grafik & ringkasan */
  .dash-overview-insights{
    display:flex; flex-direction:column; gap:16px;
    margin-top:4px;
  }
  .dash-overview-chart-panel .panel-head{ margin-bottom:12px; }
  .dash-orders-chart{
    display:flex; align-items:flex-end; justify-content:space-between; gap:8px;
    min-height:160px; padding:8px 4px 0;
  }
  .dash-orders-chart-empty,
  .dash-overview-empty{
    width:100%; text-align:center; color:var(--text-4); font-size:13px; padding:24px 12px;
  }
  .dash-orders-bar-col{
    flex:1; min-width:0; max-width:72px;
    display:flex; flex-direction:column; align-items:center; gap:6px;
  }
  .dash-orders-bar-wrap{
    width:100%; height:120px; display:flex; align-items:flex-end; justify-content:center;
  }
  .dash-orders-bar{
    width:min(100%, 40px); min-height:4px; border-radius:8px 8px 4px 4px;
    background:linear-gradient(180deg, #34d399 0%, #059669 100%);
    transition:height .25s ease;
  }
  .dash-orders-bar-val{
    font-size:11px; font-weight:800; color:var(--text-2); font-family:'Inter Tight',sans-serif;
  }
  .dash-orders-bar-lbl{
    font-size:10px; font-weight:700; color:var(--text-3); text-align:center; line-height:1.2;
  }
  .dash-overview-split{
    display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap:16px; align-items:stretch;
  }
  .dash-overview-split > .panel{
    display:flex; flex-direction:column; min-height:100%;
  }
  .dash-overview-split .dash-overview-table-wrap,
  .dash-top-products-panel .dash-top-products-list{
    flex:1;
  }
  .dash-overview-table-wrap{ overflow-x:auto; }
  .dash-overview-table tbody tr{ cursor:pointer; }
  .dash-overview-table tbody tr:hover{ background:#f8fafc; }
  .dash-top-products-list{
    display:flex; flex-direction:column; gap:0;
    padding:4px 0 8px;
  }
  .dash-top-product-row{
    display:grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items:center; gap:12px;
    padding:14px 8px; border-bottom:1px solid var(--border-soft);
  }
  .dash-top-product-row:last-child{ border-bottom:none; }
  .dash-top-product-rank{
    width:32px; height:32px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:800; background:var(--primary-soft); color:var(--primary-strong);
  }
  .dash-top-product-rank.is-1{ background:#fef3c7; color:#b45309; }
  .dash-top-product-rank.is-2{ background:#f1f5f9; color:#475569; }
  .dash-top-product-rank.is-3{ background:#fff7ed; color:#c2410c; }
  .dash-top-product-body{ min-width:0; }
  .dash-top-product-name,
  a.dash-top-product-name{
    display:block;
    font-size:13px; font-weight:700; color:var(--text);
    line-height:1.35;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-decoration:none;
  }
  a.dash-top-product-name:hover{ color:var(--primary-strong); }
  .dash-top-product-meta{ font-size:11.5px; color:var(--text-3); margin-top:3px; }
  .dash-top-product-stat{
    flex-shrink:0; text-align:right; min-width:52px;
    padding:6px 10px; border-radius:10px; background:#f0fdf4;
  }
  .dash-top-product-stat-val{
    display:block; font-size:14px; font-weight:800; color:#047857;
    font-family:'Inter Tight',sans-serif; line-height:1.2;
  }
  .dash-top-product-stat-lbl{
    display:block; font-size:10px; font-weight:700; color:#059669;
    text-transform:uppercase; letter-spacing:.04em; margin-top:1px;
  }
  @media (max-width: 960px){
    .dash-overview-split{ grid-template-columns: 1fr; }
  }
  @media (max-width: 640px){
    .dash-orders-chart{ min-height:140px; gap:4px; }
    .dash-orders-bar-wrap{ height:96px; }
    .dash-orders-bar-lbl{ font-size:9px; }
    .dash-top-product-row{ padding:12px 4px; gap:10px; }
    .dash-top-product-stat{ min-width:48px; padding:5px 8px; }
  }

  /* 2-col grid */
  .grid-2{
    display:grid;
    grid-template-columns: 2fr 1fr;
    gap:16px;
    margin-bottom:22px;
  }

  /* Recent orders card */
  .panel{
    background:var(--card);
    border:1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow:hidden;
  }
  .panel-head{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
  }
  .panel-head h3{
    margin:0; font-size:15px; font-weight:800; letter-spacing:-.2px;
  }
  .panel-head .meta{ color:var(--text-3); font-size:12px; font-weight:600; }

  table.t{
    width:100%; border-collapse: collapse;
  }
  table.t thead th{
    text-align:left;
    padding: 10px 20px;
    background: var(--card-soft);
    color:var(--text-3);
    font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
    border-bottom:1px solid var(--border-soft);
  }
  table.t tbody td{
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-soft);
    font-size:13.5px;
    color:var(--text-2);
    vertical-align: middle;
  }
  table.t tbody tr:last-child td{ border-bottom:none; }
  table.t tbody tr:hover td{ background: var(--card-soft); }
  .cust{ display:flex; align-items:center; gap:10px; }
  .cust-avt{
    width:30px; height:30px; border-radius:50%;
    background: var(--primary-soft); color: var(--primary-strong);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:12px;
    flex-shrink:0;
  }
  .cust-name{ font-weight:700; color:var(--text); font-size:13px; line-height:1.2; }
  .cust-meta{ color:var(--text-4); font-size:11.5px; }

  .pill{
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 10px;
    border-radius:99px;
    font-size:11.5px;
    font-weight:700;
    border:1px solid;
  }
  .pill::before{
    content:""; width:6px; height:6px; border-radius:50%;
    background: currentColor;
  }
  .pill-paid{ color:#047857; background:#ecfdf5; border-color:#a7f3d0; }
  .pill-proc{ color:#1d4ed8; background:#eff4ff; border-color:#bfdbfe; }
  .pill-wait{ color:#b45309; background:#fffbeb; border-color:#fcd34d; }
  .pill-cncl{ color:#b91c1c; background:#fef2f2; border-color:#fecaca; }

  /* Quick actions panel */
  .quick{
    background:var(--card);
    border:1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding:18px;
    box-shadow: var(--shadow-sm);
  }
  .quick h3{ margin:0 0 12px 0; font-size:15px; font-weight:800; letter-spacing:-.2px; }
  .quick-list{ display:flex; flex-direction:column; gap:8px; }
  .quick-btn{
    display:flex; align-items:center; gap:12px;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid var(--border-soft);
    background:var(--card-soft);
    color:var(--text);
    font: inherit; font-weight:700; font-size:13.5px;
    cursor:pointer; text-align:left;
    transition: border-color .15s, background .15s, transform .12s;
  }
  .quick-btn:hover{ border-color:#cbd5e1; background:#fff; }
  .quick-btn:active{ transform: scale(.99); }
  .quick-btn .qi{
    width:34px; height:34px; border-radius:10px;
    background: var(--primary-soft); color:var(--primary-strong);
    display:flex; align-items:center; justify-content:center; font-size:14px;
    flex-shrink:0;
  }
  .quick-btn .qi.amber{ background:#fffbeb; color:#b45309; }
  .quick-btn .qi.green{ background:#ecfdf5; color:#059669; }
  .quick-btn .qi.pink{ background:#fdf2f8; color:#be185d; }
  .quick-btn .qm{ flex:1; min-width:0; }
  .quick-btn .qm small{ display:block; color:var(--text-3); font-weight:500; font-size:11.5px; margin-top:1px; }
  .quick-btn .qa{ color:var(--text-4); font-size:12px; }

  /* Build info strip */
  .build-strip{
    display:flex; align-items:center; gap:14px;
    padding:14px 16px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border:1px solid #bae6fd;
    color:#0c4a6e;
    font-size:13px;
  }
  .build-strip i{ font-size:18px; color:#0369a1; }
  .build-strip strong{ color:#0c4a6e; }

  /* Section view switching */
  .view{ display:none; }
  .view.is-active{ display:block; }

  /* Empty / placeholder section style */
  .placeholder{
    background:var(--card);
    border:1px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 24px;
    text-align:center;
    color:var(--text-3);
  }
  .placeholder h3{ margin:0 0 6px 0; color:var(--text); font-size:16px; font-weight:800; }
  .placeholder p{ margin:0 auto; max-width:420px; font-size:13.5px; }

  /* Filter chips for orders/products list views */
  .chips{
    display:flex; gap:8px; flex-wrap:wrap;
    margin-bottom:14px;
  }
  .chip{
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 12px; border-radius:99px;
    background:#fff; border:1px solid var(--border);
    color:var(--text-2); font-size:12.5px; font-weight:600;
    cursor:pointer;
    transition: background .15s, border-color .15s, color .15s;
  }
  .chip:hover{ border-color:#cbd5e1; }
  .chip.is-on{
    background: var(--text); color:#fff; border-color: var(--text);
  }
  .chip .ct{
    font-size:11px; padding:1px 7px; border-radius:99px;
    background:#eef2f7; color:var(--text-3); font-weight:800;
  }
  .chip.is-on .ct{ background:rgba(255,255,255,.18); color:#fff; }
  .prod-bulk-tools{
    margin:-2px 0 12px;
    padding:10px 12px;
    border:1px solid var(--border-soft);
    border-radius:12px;
    background:#f8fafc;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
  }
  .prod-bulk-info{
    font-size:12.5px;
    font-weight:700;
    color:var(--text-2);
  }
  .prod-bulk-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .prod-bulk-kat-label{
    font-size:12px;
    font-weight:700;
    color:var(--text-3);
    margin:0;
  }
  .prod-bulk-kategori-select{
    min-width:min(160px, 42vw);
    padding:7px 10px;
    border:1px solid var(--border);
    border-radius:9px;
    font:inherit;
    font-size:12.5px;
    font-weight:600;
    background:#fff;
    color:var(--text-2);
  }

  .prod-kategori-panel{
    margin:0 0 14px;
    padding:12px 14px;
    border:1px solid var(--border-soft);
    border-radius:12px;
    background:#fff;
  }
  .prod-kat-head strong{
    display:block;
    font-size:13.5px;
    color:var(--text-1);
  }
  .prod-kat-desc{
    margin:4px 0 0;
    font-size:12px;
    color:var(--text-3);
    line-height:1.45;
  }
  .prod-kat-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:12px 0 10px;
  }
  .prod-kat-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 8px 5px 10px;
    border-radius:999px;
    background:var(--primary-soft);
    color:var(--primary-strong);
    font-size:12px;
    font-weight:700;
  }
  .prod-kat-chip-del{
    border:0;
    background:transparent;
    color:inherit;
    opacity:.65;
    cursor:pointer;
    padding:0 2px;
    line-height:1;
  }
  .prod-kat-chip-del:hover{ opacity:1; }
  .prod-kat-empty{
    font-size:12px;
    color:var(--text-3);
    font-style:italic;
  }
  .prod-kat-add-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
  }
  .prod-kat-new-input{
    flex:1 1 220px;
    min-width:min(220px, 100%);
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:9px;
    font:inherit;
    font-size:12.5px;
  }
  .prod-kat-loading{
    font-size:12.5px;
    color:var(--text-3);
  }

  /* Product list (Produk Saya) */
  .prod-list-host { min-width: 0; }
  .prod-list-wrap {
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-sm);
  }
  .prod-list-head,
  .prod-row {
    display: grid;
    grid-template-columns: 40px 52px minmax(120px, 1.35fr) 96px 100px 128px 128px minmax(200px, 1fr);
    align-items: center;
    gap: 10px 12px;
    padding: 11px 16px;
  }
  .prod-list-head {
    background: #f8fafc;
    border-bottom: 1px solid var(--border-soft);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .prod-list { display: flex; flex-direction: column; }
  .prod-row {
    border-bottom: 1px solid var(--border-soft);
    transition: background .12s;
  }
  .prod-row:last-child { border-bottom: none; }
  .prod-row:hover { background: #fafbff; }
  .prod-row.is-selected { background: #eef2ff; }
  .prod-row.is-draft { background: #fffdf7; }
  .prod-row-name {
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .prod-list-col-check { display: flex; align-items: center; justify-content: center; }
  .prod-list-col-thumb { display: flex; align-items: center; justify-content: center; }
  .prod-row-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid var(--border-soft);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .prod-row-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .prod-row-thumb-ph {
    color: var(--text-4);
    font-size: 16px;
    line-height: 1;
  }
  .prod-list-col-status,
  .prod-list-col-live,
  .prod-list-col-mode,
  .prod-list-col-kategori { min-width: 0; }
  .prod-row-kategori {
    display: inline-block;
    max-width: 100%;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    padding: 4px 8px;
    border-radius: 8px;
    background: #f1f5f9;
    border: 1px solid var(--border-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .prod-list-col-action { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
  .prod-row-self-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 9px;
    border: 1.5px solid #7dd3fc;
    background: #f0f9ff;
    color: #0369a1;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
  }
  .prod-row-self-order:hover {
    background: #e0f2fe;
    border-color: #0369a1;
    color: #0c4a6e;
  }
  .prod-row-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 9px;
    border: 1.5px solid #c7d2fe;
    background: #eef2ff;
    color: #4338ca;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
  }
  .prod-row-edit:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
    color: #3730a3;
  }
  .prod-row-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 9px;
    border: 1.5px solid #a7f3d0;
    background: #ecfdf5;
    color: #047857;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
  }
  .prod-row-share:hover {
    background: #d1fae5;
    border-color: #6ee7b7;
    color: #065f46;
  }
  @media (max-width: 860px) {
    .prod-list-head { display: none; }
    .prod-row {
      grid-template-columns: 36px 44px 1fr auto;
      grid-template-areas:
        "check thumb name action"
        "check thumb kategori action"
        "check thumb status action"
        "check thumb live action"
        "check thumb mode action";
      gap: 6px 10px;
      padding: 14px 12px;
    }
    .prod-list-col-check { grid-area: check; align-self: start; margin-top: 2px; }
    .prod-list-col-thumb { grid-area: thumb; align-self: start; }
    .prod-row-thumb { width: 40px; height: 40px; }
    .prod-list-col-name { grid-area: name; }
    .prod-list-col-kategori { grid-area: kategori; }
    .prod-list-col-status { grid-area: status; }
    .prod-list-col-live { grid-area: live; }
    .prod-list-col-mode { grid-area: mode; }
    .prod-list-col-action { grid-area: action; align-self: center; flex-direction: column; align-items: flex-end; }
    .prod-row-self-order span { display: none; }
    .prod-row-self-order { padding: 7px 10px; }
    .prod-row-share span { display: none; }
    .prod-row-share { padding: 7px 10px; }
  }

  /* Legacy card grid (unused — kept for modal/thumb refs) */
  .prod-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:14px;
  }
  .prod{
    background:var(--card);
    border:1px solid var(--border-soft);
    border-radius:16px;
    overflow:hidden;
    box-shadow: var(--shadow-sm);
    cursor:pointer;
    transition: transform .15s, box-shadow .15s;
  }
  .prod.is-selected{
    border-color:#6366f1;
    box-shadow:0 0 0 3px rgba(99,102,241,.14), var(--shadow-sm);
  }
  .prod-select{
    width:18px;
    height:18px;
    accent-color:#4f46e5;
    cursor:pointer;
  }
  .prod-media{
    position:relative;
  }
  .prod:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .prod-img{
    aspect-ratio: 4/3;
    background:
      repeating-linear-gradient(45deg, #f1f5f9 0 8px, #e2e8f0 8px 16px);
    display:flex; align-items:center; justify-content:center;
    color: var(--text-4); font-size:11px; font-family:ui-monospace, monospace;
  }
  .prod-body{ padding:12px 14px 14px; }
  .prod-name{ font-weight:700; font-size:13.5px; line-height:1.3; }
  .prod-meta{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:6px;
  }
  .prod-price{ font-weight:800; color:var(--text); font-size:13.5px; }
  .prod-tag{
    font-size:11px; font-weight:700;
    color:var(--text-3);
  }
  /* Draft product card style */
  .prod.is-draft { border: 1.5px dashed #f59e0b; }
  .prod-status-draft {
    display:inline-flex; align-items:center; gap:4px;
    background:#fef3c7; color:#92400e;
    font-size:11px; font-weight:700;
    padding:2px 8px; border-radius:6px;
  }
  .prod-status-aktif {
    display:inline-flex; align-items:center; gap:4px;
    background:#dcfce7; color:#166534;
    font-size:11px; font-weight:700;
    padding:2px 8px; border-radius:6px;
  }
  .prod-moda { margin:0; }
  .prod-moda-satuan {
    display:inline-flex; align-items:center; gap:4px;
    background:#eff6ff; color:#1d4ed8;
    font-size:10px; font-weight:700; letter-spacing:.3px;
    padding:2px 8px; border-radius:6px;
    border:1px solid #bfdbfe;
  }
  .prod-moda-batch {
    display:inline-flex; align-items:center; gap:4px;
    background:#fef3c7; color:#92400e;
    font-size:10px; font-weight:700; letter-spacing:.3px;
    padding:2px 8px; border-radius:6px;
    border:1px solid #fde68a;
  }
  .prod-gig-pill-row { margin:6px 14px 0; }
  .gig-publish-pill {
    display:inline-flex; align-items:center;
    font-size:10.5px; font-weight:800; letter-spacing:.02em;
    padding:3px 9px; border-radius:7px; line-height:1.3;
  }
  .gig-pill-draft    { background:#f1f5f9; color:#64748b; border:1px solid #e2e8f0; }
  .gig-pill-ready    { background:#ecfdf5; color:#047857; border:1px solid #a7f3d0; }
  .gig-pill-waiting  { background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; }
  .gig-pill-private  { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
  .gig-pill-live     { background:#dcfce7; color:#166534; border:1px solid #86efac; }
  .prod-gig-hint {
    margin:6px 14px 0;
    padding:8px 10px;
    background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px;
    font-size:11px; font-weight:600; color:#475569;
    line-height:1.45; display:flex; align-items:flex-start; gap:6px;
  }
  .prod-gig-hint i { color:#64748b; margin-top:2px; flex-shrink:0; }
  .prod-draft-cta {
    margin:8px 14px 14px;
    padding:8px 12px;
    background:linear-gradient(135deg,#fffbeb,#fef9c3);
    border:1px solid #fde68a; border-radius:10px;
    font-size:12px; font-weight:600; color:#92400e;
    cursor:pointer; transition:.15s;
    display:flex; align-items:center; gap:8px;
  }
  .prod-draft-cta:hover { background:#fef3c7; }
  .prod-edit-cta {
    margin:8px 14px 0;
    padding:8px 12px;
    background:linear-gradient(135deg,#eef2ff,#e0e7ff);
    border:1px solid #c7d2fe; border-radius:10px;
    font-size:12px; font-weight:600; color:#4338ca;
    transition:.15s;
    display:flex; align-items:center; gap:8px;
    text-decoration:none;
  }
  .prod-edit-cta:hover { background:#e0e7ff; border-color:#a5b4fc; color:#3730a3; }
  .prod-batch-cta {
    margin:8px 14px 14px;
    padding:8px 12px;
    background:linear-gradient(135deg,#eff6ff,#dbeafe);
    border:1px solid #bfdbfe; border-radius:10px;
    font-size:12px; font-weight:600; color:#1d4ed8;
    cursor:pointer; transition:.15s;
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:calc(100% - 28px);
    font-family:inherit;
  }
  .prod-batch-cta:hover { background:#dbeafe; border-color:#93c5fd; }
  .prod-batch-cta:disabled { opacity:.65; cursor:wait; }
  /* Step 2 — opsi satuan (aktif untuk produk tersediaSatuan) */
  #mp-cm-step2-satuan-note.is-disabled { opacity:.45; cursor:default; }
  #mp-cm-step2-satuan-note:not(.is-disabled):hover {
    border-color:#86efac; background:#ecfdf5;
  }
  /* Batch modal — produk terkunci (dibuka dari card produk) */
  .bcm-produk-locked {
    display:flex; align-items:center; gap:10px;
    padding:10px 12px;
    background:var(--primary-soft); border:1.5px solid #bfdbfe; border-radius:10px;
  }
  .bcm-produk-locked-img {
    width:40px; height:40px; border-radius:8px; object-fit:cover;
    background:#e0e7ff; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    color:#4338ca; font-size:14px; overflow:hidden;
  }
  .bcm-produk-locked-img img { width:100%; height:100%; object-fit:cover; display:block; }
  .bcm-produk-locked-info { flex:1; min-width:0; }
  .bcm-produk-locked-nama { font-size:13px; font-weight:700; color:var(--text); }
  .bcm-produk-locked-id   { font-size:11px; color:var(--text-3); margin-top:2px; }
  .bcm-produk-locked-badge {
    font-size:10px; font-weight:700; color:#1d4ed8;
    background:#dbeafe; border:1px solid #93c5fd; border-radius:5px;
    padding:1px 7px; flex-shrink:0;
  }
  /* Produk aktif tapi belum punya cara jual — belum tampil di toko */
  .prod-toko-hidden {
    margin:4px 14px 0;
    padding:6px 10px;
    background:#fff7ed; border:1px solid #fed7aa; border-radius:8px;
    font-size:11px; font-weight:600; color:#9a3412;
    display:flex; align-items:center; gap:6px; line-height:1.3;
  }
  /* Step 2: Pilih cara jual */
  .mp-cm-step2-success {
    text-align:center; padding:28px 24px 16px;
    border-bottom:1px solid var(--border-soft);
    margin-bottom:4px;
  }
  .mp-cm-step2-check {
    display:inline-flex; align-items:center; justify-content:center;
    width:48px; height:48px; border-radius:50%;
    background:#dcfce7; color:#16a34a; font-size:22px;
    margin-bottom:12px;
  }
  .mp-cm-step2-success h3 { margin:0 0 6px; font-size:17px; font-weight:800; color:var(--text); }
  .mp-cm-step2-success p  { margin:0; font-size:13px; color:var(--text-3); }
  .mp-cm-cara-jual { display:flex; flex-direction:column; gap:10px; padding:16px 20px; }
  .mp-cm-jual-opt {
    display:flex; align-items:center; gap:14px;
    padding:14px 16px; border-radius:14px;
    border:1.5px solid var(--border); background:var(--card);
    cursor:pointer; transition:.15s; text-align:left;
    font-family:inherit; width:100%;
  }
  .mp-cm-jual-opt:not(.is-disabled):hover { border-color:#93c5fd; background:#f0f9ff; }
  .mp-cm-jual-opt.is-disabled { opacity:.55; cursor:not-allowed; }
  .mp-cm-jual-ic {
    width:40px; height:40px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:16px;
  }
  .mp-cm-jual-text { flex:1; min-width:0; }
  .mp-cm-jual-text strong { display:block; font-size:13.5px; font-weight:700; color:var(--text); }
  .mp-cm-jual-text span   { display:block; font-size:11.5px; color:var(--text-3); margin-top:2px; line-height:1.4; }
  .mp-cm-soon {
    display:inline-block;
    background:#f0f9ff; color:#0369a1;
    font-size:9px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
    padding:1px 6px; border-radius:4px; border:1px solid #bae6fd; margin-left:4px;
    vertical-align:middle;
  }
  .prod-empty {
    text-align:center; padding:56px 20px;
    color:var(--text-4);
    border:1px dashed var(--border);
    border-radius:14px;
    background:#fafbff;
  }
  .prod-empty i { font-size:40px; opacity:.25; margin-bottom:14px; display:block; }
  .prod-empty h3 { font-size:16px; font-weight:700; color:var(--text-3); margin:0 0 8px; }
  .prod-empty p  { font-size:13px; margin:0 auto; max-width:360px; }
  .prod-img-thumb {
    aspect-ratio:4/3; object-fit:cover;
    width:100%; display:block;
  }
  /* ── Batch Order ──────────────────────────────────── */
  .batch-card {
    background:#fff; border-radius:18px; border:1.5px solid #e2e8f0;
    overflow:hidden; transition:box-shadow .2s, transform .15s;
    display:flex; flex-direction:column;
  }
  .batch-card:hover { box-shadow:0 6px 24px rgba(0,0,0,.08); transform:translateY(-2px); }
  .batch-card-simple {
    display:flex; gap:12px; align-items:flex-start; padding:14px;
  }
  .batch-simple-media { flex-shrink:0; }
  .batch-simple-photo,
  .batch-simple-photo-fallback {
    width:76px; height:76px; border-radius:12px;
    border:1px solid #e2e8f0;
  }
  .batch-simple-photo { object-fit:cover; display:block; }
  .batch-simple-photo-fallback {
    background:#f8fafc; color:#94a3b8; display:flex; align-items:center; justify-content:center; font-size:20px;
  }
  .batch-simple-content {
    flex:1; min-width:0; display:flex; flex-direction:column; gap:8px;
  }
  .batch-simple-row {
    display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
    font-size:12px; line-height:1.45;
  }
  .batch-simple-label { color:#64748b; font-weight:600; }
  .batch-simple-value { color:#0f172a; font-weight:600; }
  .batch-simple-actions { margin-top:2px; }
  .batch-simple-actions .batch-btn { padding:7px 12px; font-size:11.5px; }
  .batch-card-head {
    padding:16px 18px 12px;
    border-bottom:1px solid #f1f5f9;
    display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  }
  .batch-card-body { padding:14px 18px; flex:1; }
  .batch-card-foot {
    padding:12px 18px; border-top:1px solid #f1f5f9;
    display:flex; gap:8px; flex-wrap:wrap;
  }
  .batch-nama { font-weight:700; font-size:14px; color:#0f172a; margin:0 0 4px; line-height:1.3; }
  .batch-id   { font-size:11px; font-family:monospace; color:#94a3b8; margin:0; }
  .batch-stat {
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px;
    white-space:nowrap;
  }
  .batch-stat-buka     { background:#dcfce7; color:#166534; }
  .batch-stat-ditutup  { background:#fef3c7; color:#92400e; }
  .batch-stat-bayar    { background:#dbeafe; color:#1e40af; }
  .batch-stat-produksi { background:#ede9fe; color:#5b21b6; }
  .batch-stat-selesai  { background:#f0fdf4; color:#166534; }
  .batch-stat-batal    { background:#fee2e2; color:#991b1b; }
  .batch-stat-gray     { background:#f1f5f9; color:#475569; }

  /* Status description text di bawah badge (dalam card) */
  .batch-stat-desc {
    font-size:11px; color:#64748b; margin-top:5px; line-height:1.4;
  }

  /* Step tracker di detail modal */
  .batch-stepper {
    display:flex; align-items:flex-start; gap:0;
    margin-bottom:18px; overflow-x:auto; padding-bottom:2px;
  }
  .bs-step {
    display:flex; flex-direction:column; align-items:center;
    flex:1; min-width:56px; position:relative;
  }
  .bs-step:not(:last-child)::after {
    content:''; position:absolute;
    top:13px; left:calc(50% + 15px); right:calc(-50% + 15px);
    height:2px; background:#e2e8f0; z-index:0;
  }
  .bs-step.done::after { background:#4f46e5; }
  .bs-dot {
    width:28px; height:28px; border-radius:50%;
    background:#e2e8f0; color:#94a3b8;
    font-size:10px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    position:relative; z-index:1; flex-shrink:0;
  }
  .bs-step.done .bs-dot    { background:#4f46e5; color:#fff; }
  .bs-step.current .bs-dot { background:#fff; border:2.5px solid #4f46e5; color:#4f46e5; }
  .bs-label {
    font-size:9px; font-weight:600; color:#94a3b8;
    text-align:center; margin-top:5px; line-height:1.3;
    letter-spacing:.02em; white-space:normal;
  }
  .bs-step.done .bs-label, .bs-step.current .bs-label { color:#4f46e5; }

  /* Status info banner di detail modal */
  .batch-status-info {
    border-radius:12px; padding:13px 16px; margin-bottom:16px;
    display:flex; flex-direction:column; gap:3px;
  }
  .batch-status-info.batch-stat-buka     { background:#dcfce7; }
  .batch-status-info.batch-stat-ditutup  { background:#fef9c3; }
  .batch-status-info.batch-stat-bayar    { background:#dbeafe; }
  .batch-status-info.batch-stat-produksi { background:#ede9fe; }
  .batch-status-info.batch-stat-selesai  { background:#f0fdf4; }
  .batch-status-info.batch-stat-batal    { background:#fee2e2; }
  .bsi-top   { display:flex; align-items:center; gap:7px; }
  .bsi-label { font-size:13px; font-weight:700; }
  .bsi-desc  { font-size:12px; opacity:.75; margin-top:1px; }
  .bsi-next  { font-size:11.5px; margin-top:5px; font-style:italic; opacity:.65; border-top:1px solid rgba(0,0,0,.08); padding-top:5px; }

  /* ── Order status badges ───────────────────────────────────── */
  .order-stat {
    display:inline-flex; align-items:center; gap:4px;
    font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px;
    white-space:nowrap;
  }
  .os-menunggu-bayar  { background:#fef3c7; color:#92400e; }
  .os-menunggu-verif  { background:#dbeafe; color:#1e40af; }
  .os-bayar-diterima  { background:#dcfce7; color:#166534; }
  .os-menunggu-batch  { background:#e0f2fe; color:#0369a1; }
  .os-antre-produksi  { background:#f1f5f9; color:#334155; }
  .os-proses-cetak    { background:#faf5ff; color:#6d28d9; }
  .os-proses-press    { background:#ede9fe; color:#5b21b6; }
  .os-siap-kirim      { background:#ecfdf5; color:#065f46; }
  .os-siap-ambil      { background:#d1fae5; color:#065f46; }
  .os-pengiriman      { background:#dbeafe; color:#1e40af; }
  .os-selesai         { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
  .os-dibatalkan      { background:#fee2e2; color:#991b1b; }
  .os-retur           { background:#fce7f3; color:#9d174d; }

  /* Tabel order di detail modal */
  .order-table { width:100%; border-collapse:collapse; font-size:12.5px; }
  .order-table th {
    font-family:monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
    color:#64748b; font-weight:600; padding:8px 10px; border-bottom:2px solid #e2e8f0;
    text-align:left; white-space:nowrap;
  }
  .order-table td { padding:10px 10px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
  .order-table tbody tr:hover { background:#f8fafc; }

  /* Paginasi tabel dashboard */
  .dash-pagination {
    display: flex;
    justify-content: center;
    padding: 14px 12px 6px;
  }
  .dash-pagination.is-hidden { display: none; }
  .dash-pagination-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .dash-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--border-soft, #e2e8f0);
    background: #fff;
    color: var(--text-2, #475569);
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
  }
  .dash-page-btn:hover:not(:disabled) {
    border-color: #93c5fd;
    color: #1d4ed8;
    background: #eff6ff;
  }
  .dash-page-btn.is-on {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    border-color: #1d4ed8;
    color: #fff;
    cursor: default;
  }
  .dash-page-btn:disabled { opacity: .45; cursor: not-allowed; }
  .dash-page-ellipsis {
    min-width: 28px;
    text-align: center;
    color: var(--text-4, #94a3b8);
    font-weight: 700;
    font-size: 13px;
    user-select: none;
  }
  .dash-page-info {
    width: 100%;
    text-align: center;
    font-size: 11.5px;
    color: var(--text-3, #64748b);
    font-weight: 600;
    margin-top: 4px;
  }

  .bdm-title-link {
    color: var(--text, #0f172a);
    text-decoration: none;
    transition: color .15s;
  }
  .bdm-title-link:hover {
    color: var(--primary, #2563eb);
    text-decoration: underline;
  }

  .od-product-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    border: 1px solid var(--border-soft, #e2e8f0);
    background: #fff;
    transition: border-color .15s, box-shadow .15s, background .15s;
  }
  .od-product-link:hover {
    border-color: #93c5fd;
    background: #f8fbff;
    box-shadow: 0 2px 10px rgba(37, 99, 235, .08);
  }
  .od-product-link-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
  }
  .od-product-link-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--primary-soft, #eff6ff);
    color: var(--primary, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
  }
  .od-product-link-text { flex: 1; min-width: 0; }
  .od-product-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text, #0f172a);
    line-height: 1.35;
  }
  .od-product-sku {
    font-size: 11.5px;
    color: var(--text-3, #64748b);
    font-weight: 600;
    margin-top: 2px;
  }
  .od-product-link-arrow {
    color: var(--text-4, #94a3b8);
    font-size: 12px;
    flex-shrink: 0;
  }
  .od-product-link:hover .od-product-link-arrow { color: var(--primary, #2563eb); }

  .batch-meta { display:flex; flex-wrap:wrap; gap:12px 20px; margin:10px 0 0; }
  .batch-meta-item { font-size:12px; color:#64748b; }
  .batch-meta-item strong { color:#0f172a; font-weight:600; }
  .batch-countdown {
    font-size:12px; font-weight:700; color:#dc2626;
    background:#fee2e2; padding:3px 10px; border-radius:999px;
    display:inline-flex; align-items:center; gap:4px;
  }
  .batch-countdown.ok { background:#dcfce7; color:#166534; }
  .batch-btn {
    font-size:12px; font-weight:600; padding:7px 14px; border-radius:10px;
    border:1.5px solid; cursor:pointer; transition:all .15s; white-space:nowrap;
  }
  .batch-btn-primary { background:#4f46e5; color:#fff; border-color:#4f46e5; }
  .batch-btn-primary:hover { background:#4338ca; }
  .batch-btn-outline { background:#fff; color:#4f46e5; border-color:#c7d2fe; }
  .batch-btn-outline:hover { background:#eef2ff; }
  .batch-btn-blue {
    background:#2563eb; color:#fff; border-color:#2563eb;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
  }
  .batch-btn-blue:hover { background:#1d4ed8; border-color:#1d4ed8; }
  .batch-btn-blue-outline {
    background:#fff; color:#2563eb; border-color:#93c5fd;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
  }
  .batch-btn-blue-outline:hover { background:#eff6ff; border-color:#60a5fa; }
  .batch-btn-warn   { background:#fff; color:#dc2626; border-color:#fca5a5; }
  .batch-btn-warn:hover { background:#fee2e2; }
  .batch-btn-gray   { background:#f8fafc; color:#64748b; border-color:#e2e8f0; }
  .batch-btn-gray:hover { background:#e2e8f0; }
  .batch-list-row { cursor: pointer; }
  .batch-list-row:hover { background: var(--card-soft, #f8fafc); }
  .batch-list-go {
    width: 36px;
    text-align: center;
    color: var(--text-4, #94a3b8);
    font-size: 12px;
    vertical-align: middle;
  }
  .batch-list-row:hover .batch-list-go { color: var(--primary, #4f46e5); }
  /* Rekap billing di detail modal */
  .bdm-rekap { border:1.5px solid #e2e8f0; border-radius:14px; overflow:hidden; }
  .bdm-rekap-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 16px; border-bottom:1px solid #f1f5f9; font-size:13px;
  }
  .bdm-rekap-row:last-child { border-bottom:none; }
  .bdm-rekap-row.total { background:#f8fafc; font-weight:700; font-size:14px; }
  .bdm-rekap-row.total .val { color:#4f46e5; font-size:15px; }
  .bdm-rekap-label { color:#64748b; }
  .bdm-rekap-val { font-weight:600; color:#0f172a; }

  .batch-summary-chips {
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-bottom:4px;
  }
  @media (min-width:420px) {
    .batch-summary-chips { grid-template-columns:repeat(4, minmax(0, 1fr)); }
  }
  .batch-chip {
    background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px;
    padding:10px 12px; display:flex; flex-direction:column; gap:2px; min-width:0;
  }
  .batch-chip-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; }
  .batch-chip-val { font-size:13px; font-weight:800; color:#0f172a; line-height:1.25; }
  .batch-chip--due .batch-chip-val { color:#b45309; }
  .batch-chip--wait .batch-chip-val { color:#1d4ed8; }
  .batch-chip--ok .batch-chip-val { color:#059669; }

  .batch-proof-card {
    border-radius:12px; padding:12px 14px; border:1px solid #e2e8f0; background:#f8fafc;
  }
  .batch-proof-card--due { background:#fffbeb; border-color:#fde68a; }
  .batch-proof-card--ok { background:#ecfdf5; border-color:#bbf7d0; }
  .batch-proof-card-head {
    display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:#0f172a;
  }
  .batch-proof-card-desc { font-size:12px; color:#64748b; margin:6px 0 0; line-height:1.45; }
  .batch-proof-link {
    display:inline-flex; align-items:center; gap:6px; margin-top:8px;
    font-size:12px; font-weight:700; color:#1d4ed8; text-decoration:none;
  }
  .batch-proof-link:hover { text-decoration:underline; }

  .batch-order-list-section {
    background:var(--card-soft, #f8fafc);
    border:1px solid var(--border-soft, #e2e8f0);
    border-radius:14px;
    padding:16px;
  }
  .batch-order-list-head {
    display:flex; align-items:center; gap:12px;
    margin-bottom:14px; padding-bottom:12px;
    border-bottom:1px solid var(--border-soft, #e2e8f0);
  }
  .batch-order-list-head-icon {
    width:40px; height:40px; border-radius:12px; flex-shrink:0;
    background:linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color:#4f46e5;
    display:flex; align-items:center; justify-content:center;
    font-size:16px;
    box-shadow:inset 0 0 0 1px rgba(79,70,229,.12);
  }
  .batch-order-list-head-text { flex:1; min-width:0; }
  .batch-order-list-head-title {
    font-size:11px; font-weight:800; letter-spacing:.1em;
    text-transform:uppercase; color:var(--text-3, #64748b);
    line-height:1.2;
  }
  .batch-order-list-head-sub {
    font-size:12.5px; font-weight:600; color:var(--text-2, #475569);
    margin-top:3px; line-height:1.35;
  }
  .batch-order-list-count {
    flex-shrink:0; min-width:28px; height:28px; padding:0 8px;
    border-radius:999px; background:#4f46e5; color:#fff;
    font-size:12px; font-weight:800;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .batch-order-summary-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:14px;
  }
  .batch-order-summary-card {
    border-radius:10px;
    padding:10px 12px;
  }
  .batch-order-summary-card--cust {
    background:#fff;
    border:1px solid var(--border-soft, #e2e8f0);
  }
  .batch-order-summary-card--profit {
    background:#ecfdf5;
    border:1px solid #a7f3d0;
  }
  .batch-order-summary-label {
    font-size:11px;
    font-weight:700;
    margin-bottom:3px;
  }
  .batch-order-summary-card--cust .batch-order-summary-label { color:var(--text-3, #64748b); }
  .batch-order-summary-card--profit .batch-order-summary-label { color:#047857; }
  .batch-order-summary-val {
    font-weight:800;
    font-size:15px;
    font-family:'Inter Tight', sans-serif;
    line-height:1.2;
  }
  .batch-order-summary-card--cust .batch-order-summary-val { color:var(--text, #0f172a); }
  .batch-order-summary-card--profit .batch-order-summary-val { color:#047857; }
  .batch-pay-section .batch-order-list-head { margin-bottom:16px; }
  .batch-pay-body { margin-top:4px; }

  /* Drawer detail: header/footer tetap, isi yang scroll (hindari thead menimpa judul) */
  .dash-detail-drawer {
    display: none;
    flex-direction: column;
    overflow: hidden;
  }
  .dash-detail-drawer-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-soft);
    background: #fff;
    z-index: 10;
  }
  .dash-detail-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dash-detail-drawer-foot {
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid var(--border-soft);
    z-index: 10;
  }

  /* Modal Buka / Edit Preorder — token sama mp-cm-* */
  #batch-create-modal {
    font-family: var(--f-ui, 'Outfit', system-ui, sans-serif);
  }
  .bcm-modal-icon { color: #4f46e5; font-size: 16px; margin-right: 6px; }
  .bcm-modal-hint { font-size: 12px; color: #64748b; margin: 0 0 10px; line-height: 1.45; }
  .bcm-field-hint { font-size: 11px; color: #64748b; margin: 4px 0 0; line-height: 1.4; }
  .bcm-drawer-foot-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
  }
  .drawer-pay-detail-table-wrap {
    overflow: auto;
    max-height: 250px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #fff;
  }
  .drawer-pay-detail-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }
  .drawer-pay-detail-table-wrap thead th {
    position: sticky;
    top: 0;
    background: #eff6ff;
    z-index: 1;
    padding: 8px 10px;
    border-bottom: 1px solid #bfdbfe;
    color: #1e3a8a;
    font-size: 11px;
    font-weight: 800;
  }
  .drawer-pay-detail-table-wrap thead th.text-right { text-align: right; }
  .drawer-pay-detail-table-wrap tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #e0e7ff;
  }

  /* Drawer detail pesanan Satuan */
  .od-drawer-body {
    padding: 20px;
    padding-bottom: 92px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .od-drawer-step1 {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .od-drawer-overview {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;
  }
  .od-drawer-card {
    background: var(--card-soft);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 16px;
  }
  .od-drawer-step2 {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Progress bar alur pembayaran (Detail → Pembayaran) */
  .pay-flow-progress {
    background:var(--card-soft, #f8fafc);
    border:1px solid var(--border-soft, #e2e8f0);
    border-radius:12px;
    padding:12px 14px 10px;
  }
  .pay-flow-progress-track {
    height:6px; border-radius:999px; background:#e2e8f0;
    overflow:hidden; margin-bottom:10px;
  }
  .pay-flow-progress-fill {
    display:block; height:100%; border-radius:999px;
    background:linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
    transition:width .28s ease;
  }
  .pay-flow-progress-labels {
    display:flex; justify-content:space-between; gap:8px;
  }
  .pay-flow-progress-label {
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:700; color:#94a3b8;
    letter-spacing:.02em; transition:color .2s;
  }
  .pay-flow-progress-label i { font-size:10px; }
  .pay-flow-progress-label.is-done { color:#2563eb; }
  .pay-flow-progress-label.is-active { color:#1d4ed8; font-weight:800; }

  /* Progress unggah bukti pembayaran (modal / drawer) */
  .pay-upload-progress {
    background: #f8fbff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 10px 12px;
  }
  .pay-upload-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
  }
  .pay-upload-progress-label {
    font-size: 12px;
    font-weight: 700;
    color: #1d4ed8;
  }
  .pay-upload-progress-pct {
    font-size: 11.5px;
    font-weight: 800;
    color: #3b82f6;
    font-variant-numeric: tabular-nums;
  }
  .pay-upload-progress-track {
    height: 8px;
    border-radius: 999px;
    background: #e0e7ff;
    overflow: hidden;
  }
  .pay-upload-progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 100%);
    transition: width .18s ease;
  }
  .pay-upload-progress-fill.is-indeterminate {
    width: 40% !important;
    animation: pay-upload-indeterminate 1.1s ease-in-out infinite;
  }
  @keyframes pay-upload-indeterminate {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
  }
  .batch-order-card-ship {
    display:flex; flex-direction:column; gap:6px;
    margin-top:8px; padding:8px 10px;
    background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px;
    font-size:11.5px;
  }
  .batch-order-card-ship-row {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
  }
  .batch-order-card-ship-ongkir {
    color:#92400e; font-weight:700; font-size:11.5px;
  }
  .batch-order-card-ship-ongkir i { margin-right:4px; }
  .batch-order-card-ship-resi {
    color:#334155; font-weight:600;
    font-family:ui-monospace, monospace;
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .batch-order-card-ship-resi i { color:#64748b; margin-right:4px; }
  .batch-order-card-ship-track {
    flex-shrink:0; color:#2563eb; font-weight:700; text-decoration:none; font-size:11.5px;
  }
  .batch-order-card-ship-track.is-muted { color:#94a3b8; font-weight:600; }
  .batch-order-card-ship-track:hover { text-decoration:underline; }

  .batch-order-card-list { display:flex; flex-direction:column; gap:8px; }
  .batch-order-card {
    border:1px solid #e2e8f0; border-radius:12px; padding:10px 12px; background:#fff;
  }
  .batch-order-card-top {
    display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px;
  }
  .batch-order-inv {
    font-size:11px; font-family:ui-monospace,monospace; color:#475569; background:#f1f5f9;
    padding:2px 6px; border-radius:6px;
  }
  .batch-order-meta { font-size:11px; color:#64748b; font-weight:600; white-space:nowrap; }
  .batch-order-card-name { font-size:13.5px; font-weight:700; color:#0f172a; margin-bottom:4px; }
  .batch-order-card-row {
    display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
    font-size:12px; color:#64748b;
  }
  .batch-order-varian { flex:1; min-width:0; line-height:1.35; }
  .batch-order-qty { font-weight:800; color:#0f172a; white-space:nowrap; }
  .batch-order-card-foot {
    display:flex; align-items:center; justify-content:flex-end; gap:8px;
    flex-wrap:wrap; margin-top:8px; padding-top:8px; border-top:1px solid #f1f5f9;
  }
  .batch-order-card-actions { display:flex; gap:6px; flex-wrap:wrap; }
  .batch-order-done-tag { font-size:11px; font-weight:700; color:#059669; }
  .batch-empty-orders {
    font-size:13px; color:#94a3b8; text-align:center; padding:20px 0; margin:0;
  }
  .batch-detail-actions { display:flex; flex-wrap:wrap; gap:8px; }
  .bdm-rekap-details summary {
    cursor:pointer; font-size:12.5px; font-weight:700; color:#4f46e5;
    list-style:none; display:flex; align-items:center; gap:6px; padding:4px 0;
  }
  .bdm-rekap-details summary::-webkit-details-marker { display:none; }
  .bdm-rekap-details[open] summary { margin-bottom:10px; }

  /* Checkbox rows in create modal */
  .bcm-check-row {
    display:flex; align-items:flex-start; gap:10px; cursor:pointer;
    padding:10px 14px; border:1.5px solid #e2e8f0; border-radius:12px;
    transition:border .15s, background .15s;
  }
  .bcm-check-row:has(input:checked) { border-color:#a5b4fc; background:#eef2ff; }
  .bcm-check-row input { margin-top:2px; accent-color:#4f46e5; width:16px; height:16px; flex-shrink:0; }
  .bcm-check-row span { font-size:13px; color:#475569; line-height:1.45; }
  .bcm-check-row span strong { color:#0f172a; font-weight:700; }
  .bcm-check-row span em { color:#64748b; font-style:normal; font-size:12px; }
  .bcm-date-control {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s;
  }
  .bcm-date-control:focus-within { border-color: #4f46e5; }
  .bcm-date-native {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
  }
  .bcm-date-display {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    pointer-events: none;
  }
  .bcm-date-display.is-placeholder { color: var(--text-4); font-weight: 500; }
  .bcm-date-icon {
    color: var(--text-3);
    font-size: 15px;
    pointer-events: none;
    flex-shrink: 0;
  }
  /* Pickup order table */
  .pickup-table { width:100%; border-collapse:collapse; font-size:13px; }
  .pickup-table th { text-align:left; padding:8px 10px; font-size:11px; font-weight:700; color:#64748b; background:#f8fafc; border-bottom:1px solid #e2e8f0; }
  .pickup-table td { padding:10px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
  .pickup-table tr:last-child td { border:none; }

  /* Merchant Product Completion Modal */
  #mp-complete-modal {
    position:fixed; inset:0; z-index:7000;
    display:none; align-items:flex-end; justify-content:center;
    font-family:var(--f-ui,'Outfit',system-ui,sans-serif);
  }
  #mp-complete-modal.is-open { display:flex; }
  @media (min-width:600px) {
    #mp-complete-modal { align-items:center; padding:20px; }
  }
  .mp-cm-backdrop {
    position:absolute; inset:0;
    background:rgba(2,6,23,.52);
    animation:mp-fade-in .2s ease;
  }
  @keyframes mp-fade-in { from{opacity:0} to{opacity:1} }
  .mp-cm-dialog {
    position:relative; z-index:1;
    width:100%; max-width:520px;
    max-height:92dvh; overflow-y:auto;
    background:#fff; border-radius:20px 20px 0 0;
    box-shadow:0 -8px 40px rgba(15,23,42,.18);
    animation:mp-slide-up .25s cubic-bezier(.22,.68,0,1.2);
  }
  @media(min-width:600px) {
    .mp-cm-dialog { border-radius:20px; max-height:88dvh; animation:mp-pop-in .25s cubic-bezier(.22,.68,0,1.2); }
  }
  @keyframes mp-slide-up { from{transform:translateY(60px);opacity:0} to{transform:translateY(0);opacity:1} }
  @keyframes mp-pop-in    { from{transform:scale(.92);opacity:0}       to{transform:scale(1);opacity:1} }
  .mp-cm-head {
    padding:18px 20px 14px; border-bottom:1px solid #f1f5f9;
    position:sticky; top:0; background:#fff; z-index:1;
    display:flex; align-items:flex-start; gap:12px;
  }
  .mp-cm-head-text { flex:1; min-width:0; }
  .mp-cm-head h2 { margin:0; font-size:18px; font-weight:800; color:#0f172a; }
  .mp-cm-head p  { margin:4px 0 0; font-size:12px; color:#64748b; }
  .mp-cm-close {
    flex-shrink:0; width:32px; height:32px; border-radius:50%;
    background:#f1f5f9; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:14px; color:#64748b; transition:.15s;
    margin-top:2px;
  }
  .mp-cm-close:hover { background:#e2e8f0; color:#0f172a; }
  .mp-cm-body { padding:20px; display:flex; flex-direction:column; gap:20px; }
  .mp-cm-section-title {
    font-size:11px; font-weight:800; text-transform:uppercase;
    letter-spacing:.06em; color:#4f46e5; margin:0 0 12px;
  }
  .mp-cm-field { margin-bottom:14px; }
  .mp-cm-field:last-child { margin-bottom:0; }
  .mp-cm-label {
    display:block; font-size:12px; font-weight:700;
    color:#374151; margin-bottom:6px;
  }
  .mp-cm-input, .mp-cm-textarea, .mp-cm-select {
    width:100%; padding:10px 12px; border-radius:10px;
    border:1.5px solid #e2e8f0; font-family:inherit; font-size:14px;
    color:#0f172a; background:#fff; outline:none; box-sizing:border-box;
    transition:border-color .15s;
  }
  .mp-cm-input:focus, .mp-cm-textarea:focus, .mp-cm-select:focus { border-color:#4f46e5; }
  .mp-cm-textarea { min-height:90px; resize:vertical; }
  /* Color / Size chip toggles */
  .mp-cm-chips { display:flex; flex-wrap:wrap; gap:8px; }
  .mp-cm-chip {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 12px; border-radius:8px;
    border:1.5px solid #e2e8f0; background:#f8fafc;
    font-size:13px; font-weight:600; color:#374151;
    cursor:pointer; transition:.15s; user-select:none;
  }
  .mp-cm-chip:hover { border-color:#a5b4fc; }
  .mp-cm-chip.is-on { border-color:#4f46e5; background:#eff6ff; color:#1d4ed8; }
  .mp-cm-chip.is-muted { opacity:.5; cursor:not-allowed; }
  .mp-cm-chip.is-muted:hover { border-color:#e2e8f0; opacity:.65; }
  .pd-colors-meta { font-size:11.5px; font-weight:600; color:var(--text-3); margin-top:8px; }
  .mp-cm-color-dot {
    width:14px; height:14px; border-radius:50%;
    border:1px solid rgba(0,0,0,.12); flex-shrink:0;
  }
  /* Photo upload */
  .mp-cm-photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:10px; }
  .mp-cm-photo-slot {
    aspect-ratio:1; border-radius:12px;
    border:2px dashed #e2e8f0; background:#f8fafc;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; cursor:pointer; transition:.15s; position:relative; overflow:hidden;
    font-size:11px; font-weight:600; color:#94a3b8;
  }
  .mp-cm-photo-slot:hover { border-color:#a5b4fc; background:#eff6ff; color:#4f46e5; }
  .mp-cm-photo-slot.has-photo { border-style:solid; border-color:#e2e8f0; }
  .mp-cm-photo-slot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .mp-cm-photo-slot .mp-del-photo {
    position:absolute; top:4px; right:4px;
    width:22px; height:22px; border-radius:50%;
    background:rgba(0,0,0,.55); color:#fff; border:none;
    font-size:11px; cursor:pointer; display:none;
    align-items:center; justify-content:center;
  }
  .mp-cm-photo-slot:hover .mp-del-photo { display:flex; }
  .mp-cm-photo-slot .mp-upload-prog {
    position:absolute; inset:0; background:rgba(255,255,255,.8);
    display:flex; align-items:center; justify-content:center;
    font-size:12px; color:#4f46e5; font-weight:700;
  }
  /* Price input */
  .mp-cm-price-row {
    display:flex; align-items:center;
    border:1.5px solid #e2e8f0; border-radius:10px; overflow:hidden;
    transition:border-color .15s;
  }
  .mp-cm-price-row:focus-within { border-color:#4f46e5; }
  .mp-cm-price-prefix {
    flex-shrink:0; padding:10px 12px;
    background:#f1f5f9; font-size:14px; font-weight:700;
    color:#64748b; border-right:1.5px solid #e2e8f0;
  }
  .mp-cm-price-row input {
    flex:1; min-width:0; padding:10px 12px;
    border:none; outline:none; font-family:inherit;
    font-size:14px; font-weight:700; color:#0f172a;
  }
  /* Variant table in completion modal */
  .mp-cv-table { width:100%; border-collapse:collapse; font-size:13px; }
  .mp-cv-table th {
    text-align:left; padding:8px 10px; font-size:11px; font-weight:700;
    color:#64748b; background:#f8fafc; border-bottom:1px solid #e2e8f0;
  }
  .mp-cv-table td { padding:8px 10px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
  .mp-cv-table tr:last-child td { border-bottom:none; }
  .mp-cv-table tr.row-off td { opacity:.45; }
  .mp-cv-hpp { font-size:11px; color:#64748b; font-weight:500; }
  .mp-cv-price-row { display:flex; align-items:center; gap:4px; }
  .mp-cv-prefix { font-size:12px; color:#64748b; white-space:nowrap; }
  .mp-cv-input {
    flex:1; border:1.5px solid #e2e8f0; border-radius:8px;
    padding:5px 8px; font-size:13px; width:100%; min-width:80px; max-width:120px;
    outline:none; transition:border .15s;
  }
  .mp-cv-input:focus { border-color:#4f46e5; }
  .mp-cv-input.err   { border-color:#ef4444; }
  .mp-cv-margin { font-size:11px; color:#059669; font-weight:600; white-space:nowrap; }
  .mp-cv-margin.bad { color:#dc2626; }
  .mp-cv-wrap { border:1.5px solid #e2e8f0; border-radius:14px; overflow:hidden; }
  .mp-cv-price-val { font-size:13px; font-weight:800; color:#0f172a; font-family:'Inter Tight',sans-serif; white-space:nowrap; }
  .mp-cv-price-val.bad { color:#dc2626; }
  .mp-cm-margin-bar {
    display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
    padding:12px 14px; margin-bottom:12px;
    background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:12px;
  }
  .mp-cm-margin-bar label { font-size:12px; font-weight:700; color:#374151; }
  .mp-cm-margin-mode {
    border:1.5px solid #e2e8f0; border-radius:10px; padding:7px 10px;
    font:inherit; font-size:13px; font-weight:700; color:#374151;
    background:#fff; outline:none; cursor:pointer; min-width:128px;
  }
  .mp-cm-margin-mode:focus { border-color:#4f46e5; box-shadow:0 0 0 3px rgba(79,70,229,.12); }
  .mp-cm-margin-input-wrap { display:flex; align-items:center; gap:6px; }
  .mp-cm-margin-prefix { font-size:13px; font-weight:700; color:#64748b; }
  .mp-cm-margin-input {
    width:72px; padding:8px 10px; border:1.5px solid #e2e8f0; border-radius:10px;
    font-size:14px; font-weight:800; color:#0f172a; text-align:center;
    font-family:'Inter Tight',sans-serif;
  }
  .mp-cm-margin-input:focus { outline:none; border-color:#4f46e5; box-shadow:0 0 0 3px rgba(79,70,229,.12); }
  .mp-cm-margin-input.err { border-color:#ef4444; }
  .mp-cm-margin-suffix { font-size:13px; font-weight:700; color:#64748b; }
  .mp-cm-margin-hint { flex:1 1 220px; font-size:11px; color:#94a3b8; line-height:1.45; min-width:200px; }
  /* Footer */
  .mp-cm-foot {
    padding:16px 20px; border-top:1px solid #f1f5f9;
    position:sticky; bottom:0; background:#fff;
    display:flex; gap:10px;
  }
  .mp-cm-btn {
    flex:1; padding:13px 16px; border-radius:12px;
    font-family:inherit; font-size:15px; font-weight:700;
    cursor:pointer; border:none; transition:.15s;
  }
  .mp-cm-btn-submit {
    background:linear-gradient(135deg,#059669,#0ea5e9); color:#fff;
  }
  .mp-cm-btn-submit:disabled { opacity:.5; cursor:not-allowed; }
  .mp-cm-btn-cancel {
    background:#f1f5f9; color:#64748b;
    flex:0 0 auto; padding:13px 20px;
  }
  .mp-cm-btn-cancel:hover { background:#e2e8f0; }
  .mp-cm-btn-edit {
    background:#eef2ff; color:#4338ca; border:1px solid #c7d2fe;
    flex:0 0 auto; padding:13px 16px; text-decoration:none;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
  }
  .mp-cm-btn-edit:hover { background:#e0e7ff; }
  /* Loading state inside modal */
  .mp-cm-loading {
    text-align:center; padding:40px 20px; color:#64748b;
    font-size:14px;
  }

  /* Settings list */
  .stg-list{ display:flex; flex-direction:column; }
  .stg-row{
    display:flex; align-items:center; gap:14px;
    padding:16px 20px;
    border-bottom: 1px solid var(--border-soft);
  }
  .stg-row:last-child{ border-bottom:none; }
  .stg-field-hint{
    font-size:11px;
    color:var(--text-3);
    margin:4px 0 0;
    line-height:1.35;
  }
  .stg-field-hint.is-error{ color:var(--danger, #ef4444); }
  .stg-field-hint.is-warn{ color:var(--amber, #f59e0b); }
  .stg-field-hint.is-ok{ color:var(--green, #22c55e); }
  .stg-ic{
    width:38px; height:38px; border-radius:11px;
    background: var(--primary-soft); color: var(--primary-strong);
    display:flex; align-items:center; justify-content:center; font-size:15px;
    flex-shrink:0;
  }
  .stg-body{ flex:1; min-width:0; }
  .stg-title{ font-weight:700; font-size:14px; color:var(--text); }
  .stg-sub{ color:var(--text-3); font-size:12.5px; margin-top:2px; }
  .stg-badge{
    font-size:11px; font-weight:800; border-radius:99px; padding:3px 10px; flex-shrink:0;
  }
  .stg-badge.on{ background:#dcfce7; color:#16a34a; }
  .stg-badge.off{ background:#f1f5f9; color:#64748b; }
  .stg-badge.info{ background:#eff6ff; color:#2563eb; }
  .stg-pw-panel{
    padding:18px 0 6px;
    border-top:1px solid var(--border-soft);
  }
  .stg-pw-panel .stg-field{ margin-bottom:12px; }
  .stg-pw-panel label{
    font-size:12px; font-weight:700; color:var(--text-3);
    display:block; margin-bottom:5px;
  }
  .stg-pw-panel input{
    width:100%; border:1px solid var(--border); border-radius:10px;
    padding:9px 12px; font:inherit; font-size:13.5px; outline:none; box-sizing:border-box;
  }
  .stg-password-field{ position:relative; }
  .stg-password-field input{ padding-right:44px; }
  .stg-password-toggle{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    background:none; border:none; padding:6px; color:var(--text-3);
    cursor:pointer; font-size:15px; line-height:1;
  }
  .stg-password-toggle:hover{ color:var(--text); }
  .stg-pw-hint{ font-size:11.5px; margin-top:4px; color:var(--text-3); }
  .stg-pw-hint.warn{ color:#b45309; }
  .stg-pw-hint.ok{ color:#16a34a; }
  .stg-pw-meter{
    display:flex; gap:6px; margin:10px 0 8px;
  }
  .stg-pw-meter span{
    flex:1; height:6px; border-radius:999px;
    background:var(--border-soft, #e2e8f0); transition:background .25s;
  }
  .stg-pw-meter.s1 span:nth-child(1){ background:#ef4444; }
  .stg-pw-meter.s2 span:nth-child(-n+2){ background:#f59e0b; }
  .stg-pw-meter.s3 span:nth-child(-n+3){ background:#3b82f6; }
  .stg-pw-meter.s4 span{ background:#22c55e; }
  .stg-pw-meter-label{
    font-size:12px; font-weight:600; margin:0 0 10px; color:var(--text-3);
  }
  .stg-pw-meter-label.s1{ color:#ef4444; }
  .stg-pw-meter-label.s2{ color:#d97706; }
  .stg-pw-meter-label.s3{ color:#2563eb; }
  .stg-pw-meter-label.s4{ color:#16a34a; }
  .stg-pw-criteria{
    list-style:none; margin:0 0 6px; padding:0;
    display:grid; grid-template-columns:1fr 1fr; gap:6px 12px;
  }
  .stg-pw-criteria li{
    display:flex; align-items:center; gap:8px;
    font-size:12px; color:var(--text-3); transition:color .15s;
  }
  .stg-pw-criteria li i{
    font-size:12px; color:#94a3b8; width:14px; text-align:center; transition:color .15s;
  }
  .stg-pw-criteria li.ok{ color:#334155; }
  .stg-pw-criteria li.ok i{ color:#22c55e; }
  .stg-pw-confirm-hint{
    font-size:11.5px; margin-top:4px; color:var(--text-3); line-height:1.4;
  }
  .stg-pw-no-password-note{
    margin:0 0 14px; padding:10px 12px; border-radius:10px;
    background:#fffbeb; border:1px solid #fde68a;
    font-size:12.5px; line-height:1.5; color:#92400e;
  }
  @media (max-width:520px){
    .stg-pw-criteria{ grid-template-columns:1fr; }
  }
  .stg-pay-card{
    border:1px solid var(--border-soft); border-radius:12px;
    padding:14px 16px; margin-bottom:10px; background:var(--card-soft);
  }
  .stg-pay-card-head{
    display:flex; align-items:flex-start; gap:12px;
  }
  .stg-pay-card-ic{
    width:36px; height:36px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:15px;
  }
  .stg-pay-card-ic.bank{ background:#eff6ff; color:#2563eb; }
  .stg-pay-card-ic.ewallet{ background:#ecfdf5; color:#059669; }
  .stg-pay-card-ic.qris{ background:#faf5ff; color:#7c3aed; }
  .stg-pay-type-tabs{
    display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;
  }
  .stg-pay-type-tab{
    border:1px solid var(--border); background:#fff; border-radius:999px;
    padding:7px 14px; font:inherit; font-size:12.5px; font-weight:700;
    cursor:pointer; color:var(--text-2);
  }
  .stg-pay-type-tab.is-on{
    border-color:var(--primary); background:var(--primary-soft); color:var(--primary-strong);
  }
  .stg-pay-qris-preview{
    width:120px; height:120px; border-radius:10px; border:1px dashed var(--border);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    background:#fff; cursor:pointer;
  }
  .stg-pay-qris-preview img{ width:100%; height:100%; object-fit:contain; }

  /* Toggle switch untuk notifikasi & preferensi */
  .stg-toggle{
    position:relative; flex-shrink:0;
    width:44px; height:26px;
    border-radius:999px;
    background: #cbd5e1;
    border: none; cursor:pointer;
    transition: background .2s;
    padding:0;
    outline:none;
  }
  .stg-toggle::after{
    content:'';
    position:absolute;
    top:3px; left:3px;
    width:20px; height:20px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s;
  }
  .stg-toggle.is-on{
    background: var(--primary);
  }
  .stg-toggle.is-on::after{
    transform: translateX(18px);
  }
  .stg-toggle-sm{
    width:38px; height:22px;
  }
  .stg-toggle-sm::after{
    width:16px; height:16px;
  }
  .stg-toggle-sm.is-on::after{
    transform: translateX(16px);
  }
  .stg-toggle:disabled,
  .stg-notif-email-detail.is-disabled .stg-toggle{
    opacity:.45; cursor:not-allowed;
  }

  /* Detail notifikasi email per jenis */
  #stg-section-notif{
    flex-direction:column;
  }
  .stg-notif-master-row{
    flex-wrap:wrap;
  }
  .stg-notif-detail-btn{
    font-size:12px; padding:6px 12px; white-space:nowrap;
  }
  .stg-notif-detail-btn.is-open{
    background:var(--primary-soft); border-color:var(--primary); color:var(--primary-strong);
  }
  .stg-notif-email-detail{
    padding:4px 0 12px 52px;
    border-bottom:1px solid var(--border-soft);
  }
  .stg-notif-email-detail[hidden]{ display:none; }
  .stg-notif-email-detail.is-disabled{
    opacity:.55; pointer-events:none;
  }
  .stg-notif-detail-hint{
    margin:0 0 14px; font-size:12px; color:var(--text-3); line-height:1.45;
  }
  .stg-notif-group{ margin-bottom:16px; }
  .stg-notif-group:last-child{ margin-bottom:4px; }
  .stg-notif-group-title{
    font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
    color:var(--text-3); margin-bottom:8px;
    display:flex; align-items:center; gap:7px;
  }
  .stg-notif-group-title i{ font-size:11px; opacity:.85; }
  .stg-notif-item{
    display:flex; align-items:center; gap:12px;
    padding:10px 12px; margin-bottom:6px;
    border-radius:10px; background:#f8fafc;
    border:1px solid var(--border-soft);
  }
  .stg-notif-item-body{ flex:1; min-width:0; }
  .stg-notif-item-title{
    font-size:13px; font-weight:700; color:var(--text);
  }
  .stg-notif-item-sub{
    font-size:11.5px; color:var(--text-3); margin-top:2px; line-height:1.35;
  }
  @media (max-width:640px){
    .stg-notif-email-detail{ padding-left:0; }
    .stg-notif-master-row .stg-notif-detail-btn{ order:4; width:100%; margin-top:4px; }
  }

  /* Bar simpan bawah halaman Pengaturan */
  #stg-action-bar.toko-action-bar{
    display:none;
    margin-top:20px;
    margin-bottom:0;
  }
  #stg-action-bar.toko-action-bar.is-visible{
    display:flex;
  }
  #stg-action-bar .btn-primary{
    min-width:120px;
  }

  /* Legacy topbar autosave (tidak dipakai) */
  .stg-autosave-status{
    display:none;
    align-items:center; gap:7px;
    font-size:12px; font-weight:700;
    padding:7px 13px;
    border-radius:99px;
    border:1px solid var(--border-soft);
    background:#fff;
    box-shadow: var(--shadow-sm);
    white-space:nowrap;
    color:var(--text-3);
    line-height:1;
    flex-shrink:0;
  }
  .stg-autosave-status.is-visible{ display:inline-flex; }
  .stg-autosave-status.is-saving{
    color:var(--text-2);
    border-color:var(--border);
  }
  .stg-autosave-status.is-saving i{ color:var(--primary); }
  .stg-autosave-status.is-saved{
    color:#15803d;
    background:#f0fdf4;
    border-color:#bbf7d0;
  }
  .stg-autosave-status.is-saved i{ color:#16a34a; }
  .stg-autosave-status.is-error{
    color:#b91c1c;
    background:#fef2f2;
    border-color:#fecaca;
  }
  .stg-autosave-status.is-error i{ color:#dc2626; }
  /* Dialog tunggu / batalkan simpan Pengaturan */
  #stg-save-guard-scrim{
    display:none; position:fixed; inset:0; z-index:10050;
    background:rgba(8,15,30,.45); backdrop-filter:blur(3px);
  }
  #stg-save-guard-modal{
    display:none; position:fixed; top:50%; left:50%; z-index:10051;
    transform:translate(-50%,-50%);
    width:min(420px,calc(100vw - 32px));
    background:#fff; border-radius:18px; padding:22px 22px 18px;
    box-shadow:0 24px 64px rgba(11,31,63,.2);
    font-family:'Outfit',sans-serif;
  }
  #stg-save-guard-modal h3{
    margin:0 0 8px; font-size:17px; font-weight:800; color:var(--text);
  }
  #stg-save-guard-modal p{
    margin:0 0 18px; font-size:13.5px; line-height:1.55; color:var(--text-3);
  }
  #stg-save-guard-actions{
    display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap;
  }
  @media (max-width: 720px){
    .stg-autosave-status{ font-size:11px; padding:6px 10px; gap:5px; }
  }

  /* Tombol toast */
  #stg-toast{
    font-family:'Outfit',system-ui,sans-serif;
  }

  /* Pricing cards for langganan */
  .price-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:14px;
  }
  .price{
    background:var(--card);
    border:1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding:22px;
    box-shadow: var(--shadow-sm);
    position:relative;
  }
  .price.is-featured{
    border-color: #2563eb;
    box-shadow: 0 12px 32px rgba(37,99,235,.16);
  }
  .price-tag{
    position:absolute; top:-10px; right:18px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color:#fff; font-size:11px; font-weight:800;
    padding:3px 10px; border-radius:99px;
    letter-spacing:.04em;
  }
  .price h3{ margin:0; font-size:16px; font-weight:800; }
  .price .amt{
    font-family:'Inter Tight','Outfit',sans-serif;
    font-size:36px; font-weight:700; letter-spacing:-.5px;
    margin:8px 0 2px;
  }
  .price .per{ color:var(--text-3); font-size:12.5px; font-weight:600; }
  .price ul{
    list-style:none; padding:0; margin:18px 0;
    display:flex; flex-direction:column; gap:8px;
  }
  .price ul li{
    display:flex; align-items:flex-start; gap:9px;
    font-size:13px; color:var(--text-2);
  }
  .price ul li i{
    color:var(--success); margin-top:3px; font-size:11px;
  }

  /* Build badge (replaces Pro badge) */
  .build-badge{
    display:inline-flex; align-items:center; gap:5px;
    background:var(--build-bg); color:var(--build);
    border:1px solid var(--build-border);
    padding:2px 8px; border-radius:6px;
    font-size:10.5px; font-weight:800; letter-spacing:.04em;
    text-transform: uppercase;
  }

  /* =========================================================
     TOKO SAYA — Storefront customizer
     ========================================================= */
  .toko-grid{
    display:grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap:20px;
    align-items:start;
  }
  .toko-form{ display:flex; flex-direction:column; gap:18px; min-width:0; }
  .toko-layout-map{
    background:var(--card-soft); border:1px solid var(--border-soft); border-radius:12px;
    padding:14px 16px; font-size:12.5px; line-height:1.55; color:var(--text-2);
  }
  .toko-layout-map strong{ color:var(--text); font-weight:700; }
  .toko-layout-map ol{ margin:8px 0 0; padding-left:20px; }
  .toko-layout-map li{ margin-bottom:3px; }
  .toko-layout-group{ display:flex; flex-direction:column; gap:10px; }
  .toko-layout-head{
    display:flex; align-items:center; gap:10px; padding:2px 0 0;
    font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3);
  }
  .toko-layout-head .num{
    width:24px; height:24px; border-radius:7px; background:var(--primary-soft); color:var(--primary);
    display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0;
  }
  .toko-layout-head .lbl{ text-transform:none; font-weight:700; letter-spacing:0; color:var(--text); font-size:12.5px; }
  .toko-layout-note{
    background:#f8fafc; border:1px dashed var(--border); border-radius:10px;
    padding:12px 14px; font-size:12px; color:var(--text-3); line-height:1.5;
  }
  .toko-profile-hint{
    background:#f8fafc; border:1px solid var(--border-soft); border-radius:10px;
    padding:10px 12px; font-size:12px; color:var(--text-3); line-height:1.45;
  }
  .toko-profile-hint a{ color:var(--primary); font-weight:600; }
  .toko-setup-gate{ margin-bottom:14px; }
  .toko-setup-gate-box{
    padding:32px 24px 24px; width:100%; box-sizing:border-box;
  }
  .toko-setup-gate-top{ text-align:center; margin-bottom:20px; }
  .toko-setup-gate-body{ width:100%; }
  .toko-setup-gate-icon{
    width:64px; height:64px; margin:0 auto 18px; border-radius:18px;
    background:var(--primary-soft); color:var(--primary);
    display:flex; align-items:center; justify-content:center; font-size:26px;
  }
  .toko-setup-gate-title{
    margin:0 0 8px; font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--text);
  }
  .toko-setup-gate-sub{
    margin:0; font-size:13.5px; line-height:1.55; color:var(--text-3);
  }
  .toko-setup-gate-list{
    list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:10px; width:100%;
  }
  .toko-setup-gate-item{
    width:100%; box-sizing:border-box;
    display:flex; align-items:center;
    background:var(--card-soft); border:1px solid var(--border-soft); border-radius:12px;
    padding:12px 14px;
  }
  .toko-setup-gate-item.is-done{ border-color:#bbf7d0; background:#f0fdf4; }
  .toko-setup-gate-item.is-missing{ border-color:#fde68a; background:#fffdf5; }
  .toko-setup-gate-item-main{
    display:flex; align-items:center; gap:12px; width:100%; min-width:0;
  }
  .toko-setup-gate-item-ic{
    width:36px; height:36px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:15px;
    background:#fef3c7; color:#b45309;
  }
  .toko-setup-gate-item.is-done .toko-setup-gate-item-ic{ background:#dcfce7; color:#16a34a; }
  .toko-setup-gate-item-label{
    flex:1; min-width:0; font-size:13.5px; font-weight:700; color:var(--text);
  }
  .toko-setup-gate-badge{
    flex-shrink:0; font-size:11.5px; font-weight:700;
  }
  .toko-setup-gate-badge.is-done{ color:#15803d; }
  .toko-setup-gate-badge.is-missing{ color:#b45309; }
  .toko-setup-gate-actions{
    width:100%; margin-top:14px;
  }
  .toko-setup-gate-actions .btn{
    width:100%; justify-content:center;
  }
  .toko-action-bar{
    position:sticky; bottom:0; z-index:25;
    margin:28px -28px -64px;
    padding:14px 28px;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--border-soft);
    display:flex; justify-content:flex-end; align-items:center;
    gap:8px; flex-wrap:wrap;
  }
  .tk-social-prefix{
    display:flex; align-items:stretch; gap:0;
    border:1px solid var(--border); border-radius:11px; overflow:hidden; background:#fff;
  }
  .tk-social-prefix .pfx{
    padding:9px 10px; font-size:12px; color:var(--text-3); background:var(--card-soft);
    border-right:1px solid var(--border); white-space:nowrap; flex-shrink:0;
  }
  .tk-social-prefix .tk-input{
    border:none; border-radius:0; box-shadow:none; flex:1; min-width:0;
  }

  .toko-form .tk-card{
    background:var(--card);
    border:1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow:hidden;
  }
  .toko-form .tk-card-head{
    display:flex; align-items:center; gap:12px;
    padding:14px 18px;
    border-bottom:1px solid var(--border-soft);
  }
  .toko-form .tk-card-head .ic{
    width:32px; height:32px; border-radius:9px;
    background: var(--primary-soft); color: var(--primary-strong);
    display:flex; align-items:center; justify-content:center; font-size:13px;
    flex-shrink:0;
  }
  .toko-form .tk-card-head h3{ margin:0; font-size:14.5px; font-weight:800; letter-spacing:-.2px; flex:1; }
  .toko-form .tk-card-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:14px; }

  .tk-field-label{
    display:flex; align-items:center; justify-content:space-between;
    font-size:12.5px; font-weight:700;
    color:var(--text-2);
    margin-bottom:6px;
  }
  .tk-input, .tk-textarea, .tk-select{
    width:100%;
    border:1px solid var(--border);
    background:#fff;
    border-radius:11px;
    padding:10px 12px;
    font: inherit; font-size:13.5px;
    color:var(--text);
    outline:none;
    transition: border-color .15s, box-shadow .15s;
  }
  .tk-input:focus, .tk-textarea:focus, .tk-select:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(37,99,235,.12);
  }
  .tk-textarea{ resize:vertical; min-height:78px; line-height:1.5; }

  .tk-help{ font-size:11.5px; color:var(--text-3); margin-top:6px; }
  .tk-row-2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }

  /* Color swatches */
  .tk-swatches{
    display:flex; flex-wrap:wrap; gap:8px;
  }
  .tk-swatch{
    width:34px; height:34px; border-radius:10px;
    border:2px solid transparent;
    cursor:pointer; padding:3px;
    background:transparent;
    transition: transform .12s;
  }
  .tk-swatch:hover{ transform: scale(1.08); }
  .tk-swatch i{
    display:block; width:100%; height:100%; border-radius:6px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  }
  .tk-swatch.is-on{
    border-color: var(--text);
  }

  /* Segmented radio */
  .tk-seg{
    display:flex; gap:0;
    background: var(--card-soft);
    border:1px solid var(--border);
    border-radius:11px;
    padding:3px;
  }
  .tk-seg-btn{
    flex:1;
    border:none; background:transparent;
    color:var(--text-2);
    font: inherit; font-weight:600; font-size:12.5px;
    padding:7px 10px;
    border-radius:8px;
    cursor:pointer;
    transition: background .15s, color .15s;
  }
  .tk-seg-btn:hover{ color:var(--text); }
  .tk-seg-btn.is-on{
    background:#fff;
    color:var(--text);
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
  }

  /* Upload zone */
  .tk-upload{
    border:1.5px dashed var(--border);
    border-radius: 12px;
    padding:18px;
    text-align:center;
    background: var(--card-soft);
    cursor:pointer;
    transition: border-color .15s, background .15s;
  }
  .tk-upload:hover{ border-color: var(--primary); background: var(--primary-soft); }
  .tk-upload .ic{
    width:42px; height:42px; border-radius:50%;
    background:#fff; color:var(--primary);
    display:flex; align-items:center; justify-content:center; margin:0 auto 8px;
    font-size:16px; box-shadow: var(--shadow-sm);
  }
  .tk-upload .ttl{ font-weight:700; font-size:13px; }
  .tk-upload .hint{ font-size:11.5px; color:var(--text-3); margin-top:2px; }
  .tk-upload-banner{ padding:30px 18px; }

  .sf-img-upload-wrap{ display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
  .sf-img-upload-wrap:has(.sf-img-preview.banner){
    flex-direction:column; align-items:stretch; gap:8px; width:100%;
  }
  .sf-img-upload-wrap:has(.sf-img-preview.banner) .tk-help{ width:100%; margin-top:0; }
  .sf-img-preview{
    position:relative;
    border:1.5px dashed var(--border); border-radius:12px; overflow:hidden;
    background:var(--card-soft); display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:border-color .15s, background .15s;
  }
  .sf-img-preview.is-empty:hover{ border-color:var(--primary); background:var(--primary-soft); }
  .sf-img-preview.logo{ width:112px; min-height:92px; height:auto; }
  .sf-img-preview.logo.is-empty{ min-height:92px; }
  .sf-img-preview.logo .sf-img-preview-btn{ padding:5px 8px; font-size:10px; }
  .sf-img-preview.banner{
    width:100%; max-width:100%; aspect-ratio:4/3; min-height:200px;
  }
  .sf-img-preview-media{
    position:absolute; inset:0; display:block;
  }
  .sf-img-preview-media img{
    width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  }
  .sf-img-preview-actions{
    position:relative; z-index:2; display:flex; align-items:center; justify-content:center;
    gap:6px; flex-wrap:wrap; padding:8px;
  }
  .sf-img-preview.is-filled .sf-img-preview-actions{
    position:absolute; inset:0; background:rgba(15,23,42,.52);
    opacity:0; transition:opacity .15s;
  }
  .sf-img-preview.is-filled:hover .sf-img-preview-actions{ opacity:1; }
  .sf-img-preview-btn{
    display:inline-flex; align-items:center; gap:5px;
    border:1px solid rgba(255,255,255,.85); background:#fff; color:var(--text);
    border-radius:8px; padding:6px 10px; font:inherit; font-size:11px; font-weight:700;
    cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s;
  }
  .sf-img-preview-btn:hover{ background:#f8fafc; }
  .sf-img-preview-btn.primary{
    border-color:var(--primary); background:var(--primary); color:#fff;
  }
  .sf-img-preview-btn.primary:hover{ background:var(--primary-strong, #1d4ed8); }
  .sf-img-preview-btn.danger{ border-color:#fecaca; color:#b91c1c; }
  .sf-img-preview-btn.danger:hover{ background:#fef2f2; }
  .sf-img-preview-loading{
    display:flex; align-items:center; justify-content:center; width:100%; height:100%;
    font-size:22px; color:var(--primary);
  }

  /* ── Theme color editor ── */
  .sf-theme-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:10px 16px;
  }
  .sf-theme-row{ display:flex; align-items:center; gap:8px; }
  .sf-theme-row-label{ font-size:11.5px; font-weight:600; color:var(--text-2); flex:1; min-width:0; }
  .sf-theme-row input[type=color]{
    width:34px; height:28px; border:1.5px solid var(--border);
    border-radius:7px; padding:2px 3px; cursor:pointer;
    background:none; flex-shrink:0;
  }
  .sf-theme-hex{
    font-size:10.5px; font-family:ui-monospace,monospace;
    color:var(--text-3); min-width:50px; flex-shrink:0;
  }
  .sf-theme-presets{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .sf-theme-preset{
    width: 34px; height: 34px; padding: 0;
    border-radius: 50%; border: 2px solid var(--border);
    cursor: pointer; background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .15s, transform .15s, box-shadow .15s;
  }
  .sf-theme-preset:hover{
    border-color: var(--primary);
    transform: scale(1.06);
    box-shadow: 0 2px 8px rgba(15,23,42,.12);
  }
  .sf-theme-preset.is-on{
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
    transform: scale(1.06);
  }
  .sf-theme-preset-dot{
    width: 24px; height: 24px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.1);
  }

  /* ── Banner product picker ── */
  .sf-banner-prod-picker{
    display:flex; gap:8px; overflow-x:auto; padding:4px 0 8px;
    scrollbar-width:thin;
  }
  .sf-banner-prod-card{
    flex-shrink:0; width:80px;
    border:2px solid var(--border); border-radius:10px;
    overflow:hidden; cursor:pointer;
    transition:border-color .15s, box-shadow .15s;
    background:var(--card-soft);
  }
  .sf-banner-prod-card:hover{ border-color:var(--primary); }
  .sf-banner-prod-card.is-active{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
  .sf-banner-prod-card img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
  .sf-banner-prod-card .sf-bpc-label{
    font-size:10px; font-weight:600; color:var(--text-2);
    padding:3px 5px; text-align:center; line-height:1.2;
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  }
  .sf-banner-prod-none{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; height:80px;
  }
  .sf-banner-prod-none i{ font-size:18px; color:var(--text-3); }
  .sf-banner-prod-none span{ font-size:10px; color:var(--text-3); font-weight:600; }
  .sf-banner-prod-empty{ font-size:12px; color:var(--text-3); padding:4px 0; }

  /* Toggle switch */
  .tk-toggle{
    position:relative; width:38px; height:22px;
    background: #cbd5e1;
    border-radius:99px;
    cursor:pointer;
    transition: background .15s;
    flex-shrink:0; border:none;
  }
  .tk-toggle::after{
    content:""; position:absolute; top:2px; left:2px;
    width:18px; height:18px; border-radius:50%;
    background:#fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .15s;
  }
  .tk-toggle.is-on{ background: var(--primary); }
  .tk-toggle.is-on::after{ transform: translateX(16px); }

  .tk-toggle-row{
    display:flex; align-items:center; gap:14px;
    padding:6px 0;
  }
  .tk-toggle-row .tx{ flex:1; min-width:0; }
  .tk-toggle-row .ttl{ font-weight:700; font-size:13.5px; color:var(--text); }
  .tk-toggle-row .sub{ font-size:11.5px; color:var(--text-3); margin-top:1px; }

  /* =========================================================
     STOREFRONT PREVIEW
     ========================================================= */
  .tk-preview-wrap{
    position:sticky; top:80px;
    min-width:0;
  }
  .tk-preview-label{
    font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-3);
    display:flex; align-items:center; gap:8px;
    margin-bottom:8px;
  }
  .tk-preview-label .live{
    display:inline-flex; align-items:center; gap:5px;
    color:#059669;
  }
  .tk-preview-label .live::before{
    content:""; width:7px; height:7px; border-radius:50%;
    background:#10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.18);
  }

  .tk-preview-frame{
    background:#fff;
    border:1px solid var(--border);
    border-radius: 16px;
    overflow:hidden;
    box-shadow: var(--shadow-md);
  }
  .tk-frame-chrome{
    display:flex; align-items:center; gap:8px;
    padding: 9px 12px;
    background: #f8fafc;
    border-bottom:1px solid var(--border-soft);
  }
  .tk-frame-dots{ display:flex; gap:5px; }
  .tk-frame-dots i{ width:9px; height:9px; border-radius:50%; background:#e2e8f0; }
  .tk-frame-dots i:nth-child(1){ background:#f87171; }
  .tk-frame-dots i:nth-child(2){ background:#fbbf24; }
  .tk-frame-dots i:nth-child(3){ background:#34d399; }
  .tk-frame-url{
    flex:1; min-width:0;
    background:#fff; border:1px solid var(--border-soft);
    border-radius:8px; padding:4px 10px;
    font-family:ui-monospace, monospace; font-size:11px;
    color:var(--text-3);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .tk-frame-url b{ color:var(--text); font-weight:600; }

  /* The storefront mock — its CSS vars drive everything for live preview */
  .sf{
    --sf-brand: #2563eb;
    --sf-brand-deep: #1d4ed8;
    --sf-bg: #ffffff;
    --sf-text: #0f172a;
    --sf-muted: #64748b;
    --sf-border: #e6e9f0;
    --sf-bg-soft: #fbfaf7;
    --sf-card-bg: #ffffff;
    --sf-header-bg: #ffffff;
    --sf-footer-bg: #0b1f3f;
    --sf-footer-text: #cbd5e1;
    background: var(--sf-bg);
    color: var(--sf-text);
    font-family: 'Outfit', sans-serif;
    max-height: 720px;
    overflow-x:hidden;
    overflow-y:auto;
    position:relative;
  }
  .sf.is-dark{
    --sf-bg: #0b1220;
    --sf-text: #f1f5f9;
    --sf-muted: #94a3b8;
    --sf-border: #1e293b;
  }
  .sf-header{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px;
    border-bottom:1px solid var(--sf-border);
    background: var(--sf-header-bg);
  }
  .sf-brand{ display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
  .sf-logo{
    width:32px; height:32px; border-radius:9px;
    background: var(--sf-brand);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:800; font-size:13px;
    flex-shrink:0;
  }
  .sf-name{ min-width:0; }
  .sf-name .n1{ font-weight:800; font-size:14px; line-height:1.1; letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sf-name .n2{ font-size:10.5px; color:var(--sf-muted); font-weight:500; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sf-nav{
    display:flex; gap:10px;
    font-size:9px; color:var(--sf-muted); font-weight:700;
    white-space:nowrap;
  }
  .sf-nav span{ opacity:.9; }
  .sf-nav span.is-on{ color:var(--sf-text); opacity:1; }
  .sf-nav-right{ display:flex; align-items:center; gap:5px; margin-left:auto; }
  .sf-nav-icon{
    width:21px; height:21px; border-radius:6px;
    border:1px solid var(--sf-border);
    background:var(--sf-card-bg);
    color:var(--sf-muted);
    display:flex; align-items:center; justify-content:center;
    font-size:9px;
    position:relative;
    flex-shrink:0;
  }
  .sf-nav-cart b{
    position:absolute; top:-4px; right:-4px;
    min-width:10px; height:10px; padding:0 2px;
    border-radius:99px;
    background:var(--sf-brand); color:#fff;
    font-size:7px; font-weight:800; line-height:10px; text-align:center;
  }
  .sf-cart{
    width:30px; height:30px; border-radius:8px;
    background: rgba(0,0,0,.04);
    display:flex; align-items:center; justify-content:center;
    color:var(--sf-text);
    font-size:11px;
  }
  .sf.is-dark .sf-cart{ background: rgba(255,255,255,.08); }
  .sf.is-dark .sf-nav-icon{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); color:#cbd5e1; }

  .sf-logo img{ width:100%; height:100%; object-fit:cover; border-radius:9px; }
  .sf-beranda-wrap{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:10px;
    padding:12px 14px 14px; background:var(--sf-bg-soft);
    border-bottom:1px solid var(--sf-border); align-items:center;
  }
  .sf-beranda-wrap.sf-beranda-wrap--center{
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
  }
  .sf-beranda-wrap.sf-beranda-wrap--center .sf-beranda-desc{ margin-left:auto; margin-right:auto; }
  .sf-beranda-col{ min-width:0; }
  .sf-beranda-label{
    font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--sf-muted); margin-bottom:8px;
  }
  .sf-beranda-eyebrow{
    display:inline-flex; align-items:center; gap:5px;
    background:var(--sf-brand-soft, rgba(37,99,235,.12)); color:var(--sf-brand-deep);
    padding:3px 8px; border-radius:99px;
    font-size:9px; font-weight:700; margin-bottom:8px;
  }
  .sf-beranda h2{ margin:0 0 6px; font-size:15px; font-weight:900; line-height:1.2; letter-spacing:-.2px; }
  .sf-beranda h2 em{ font-style:normal; color:var(--sf-brand); }
  .sf-beranda-desc{ margin:0; font-size:10.5px; color:var(--sf-muted); line-height:1.5; }
  .sf-hero-actions{
    display:flex; gap:6px; flex-wrap:wrap;
    margin-top:8px;
  }
  .sf-hero-btn{
    display:inline-flex; align-items:center; gap:4px;
    padding:4px 8px; border-radius:7px;
    border:1px solid var(--sf-border);
    background:var(--sf-card-bg); color:var(--sf-text);
    font-size:8px; font-weight:700;
  }
  .sf-hero-btn.primary{
    border-color:var(--sf-brand);
    background:var(--sf-brand);
    color:#fff;
  }
  .sf-hero-stats{
    display:flex; gap:10px; flex-wrap:wrap;
    margin-top:8px;
  }
  .sf-hero-stat b{
    display:block; font-size:10px; font-weight:800; line-height:1.1;
  }
  .sf-hero-stat span{
    display:block; font-size:8px; color:var(--sf-muted); margin-top:1px;
  }
  .sf-hero-banner{
    border-radius:10px; overflow:hidden; aspect-ratio:4/3;
    background:linear-gradient(135deg, var(--sf-brand) 0%, var(--sf-brand-deep) 55%, var(--sf-footer-bg, #0b1f3f) 100%);
    color:#fff; font-size:9px; text-align:center;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:10px; position:relative; box-sizing:border-box;
  }
  .sf-hero-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .sf-hero-banner-tag{
    position:relative; z-index:1; background:rgba(255,255,255,.22);
    padding:2px 7px; border-radius:99px; font-size:8px; font-weight:700; margin-bottom:5px;
  }
  .sf-hero-banner strong{
    position:relative; z-index:1; font-size:11px; font-weight:900; display:block; line-height:1.2;
  }
  .sf-hero-banner p{
    position:relative; z-index:1; margin:4px 0 0; opacity:.9; font-size:8px; line-height:1.35; max-width:120px;
  }
  .sf-theme-note{
    padding:8px 16px; font-size:10px; color:var(--sf-muted); text-align:center;
    background:var(--sf-bg); border-top:1px dashed var(--sf-border);
  }
  .sf-footer-prev{
    background:var(--sf-footer-bg); color:var(--sf-footer-text); padding:12px 14px 10px;
    font-size:9px; line-height:1.45;
  }
  .sf-footer-prev .sf-f-brand{ display:flex; gap:8px; align-items:flex-start; margin-bottom:10px; }
  .sf-footer-prev .sf-f-logo{
    width:28px; height:28px; border-radius:8px; background:var(--sf-brand);
    color:#fff; font-weight:800; font-size:11px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    overflow:hidden;
  }
  .sf-footer-prev .sf-f-logo img{ width:100%; height:100%; object-fit:cover; }
  .sf-footer-prev .sf-f-name{ font-weight:800; color:var(--sf-footer-text); font-size:11px; }
  .sf-footer-prev .sf-f-desc{ margin:3px 0 6px; color:rgba(255,255,255,.74); font-size:9px; max-width:200px; }
  .sf-footer-prev .sf-f-social{ display:flex; gap:6px; }
  .sf-footer-prev .sf-f-social i{
    width:22px; height:22px; border-radius:6px; background:rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center; font-size:10px; color:#e2e8f0;
  }
  .sf-footer-prev .sf-f-grid{
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;
    margin-bottom:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.08);
  }
  .sf-footer-prev .sf-f-grid b{ display:block; color:#fff; font-size:9px; font-weight:800; margin-bottom:3px; }
  .sf-footer-prev .sf-f-grid span{ display:block; color:rgba(255,255,255,.78); font-size:8px; font-weight:500; }
  .sf-footer-prev .sf-f-grid span i{ width:10px; text-align:center; margin-right:3px; color:rgba(255,255,255,.72); }
  .sf-footer-prev .sf-f-bar{
    padding-top:8px; border-top:1px solid rgba(255,255,255,.08);
    display:flex; justify-content:space-between; align-items:center; gap:8px 12px; flex-wrap:wrap;
    color:rgba(255,255,255,.58); font-size:8px;
  }
  .sf-footer-prev .sf-f-bar > #sf-footer-powered{ flex-shrink:0; margin-left:auto; text-align:right; }
  .sf-footer-pay{
    flex:1 1 auto; min-width:0;
    display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:5px;
    text-align:left;
  }
  .sf-footer-pay-item{
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 8px; border:1px solid rgba(255,255,255,.18); border-radius:99px;
    font-size:7.5px; font-weight:600; line-height:1; color:rgba(255,255,255,.75); white-space:nowrap;
  }
  .sf-footer-pay-item i{ font-size:8px; }

  .sf-products{
    padding: 14px 16px 16px;
    display:grid; gap:10px;
    background: var(--sf-bg);
  }
  .sf-products.cols-2{ grid-template-columns: repeat(2, 1fr); }
  .sf-products.cols-3{ grid-template-columns: repeat(3, 1fr); }
  .sf-products.cols-4{ grid-template-columns: repeat(4, 1fr); }

  .sf-prod{
    border:1px solid var(--sf-border);
    border-radius:10px;
    overflow:hidden;
    background: var(--sf-card-bg);
  }
  .sf-prod-img{
    aspect-ratio: 1/1;
    background: repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 6px, rgba(0,0,0,.07) 6px 12px);
    position:relative; overflow:hidden;
  }
  .sf.is-dark .sf-prod-img{ background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 6px, rgba(255,255,255,.1) 6px 12px); }
  .sf-prod-badge{
    position:absolute; left:6px; top:6px; z-index:2;
    font-size:7px; font-weight:800; line-height:1;
    padding:2px 6px; border-radius:6px;
    border:1px solid var(--sf-border);
    background:#fff; color:var(--sf-text);
  }
  .sf-prod-badge.batch{
    background:var(--sf-bg-soft); color:var(--sf-muted);
  }
  .sf-prod-badge.satuan{
    background:rgba(34,197,94,.14); color:#15803d; border-color:rgba(34,197,94,.35);
  }
  .sf-prod-body{ padding: 7px 9px 8px; }
  .sf-prod-name{ font-size:9.5px; font-weight:700; line-height:1.25; min-height:23px; }
  .sf-prod-price{ font-size:9.8px; font-weight:800; color:var(--sf-brand); margin-top:2px; font-family:'Inter Tight',sans-serif; }
  .sf-prod-price .from{ display:block; font-size:7px; color:var(--sf-muted); font-weight:600; margin-bottom:1px; }
  .sf-prod-price .is-empty{ color:var(--sf-muted); font-weight:700; font-size:8px; }
  .sf-prod-actions{ display:flex; gap:5px; margin-top:6px; }
  .sf-prod-cta{
    flex:1; text-align:center;
    background:var(--sf-bg-soft); color:var(--sf-brand-deep);
    border-radius:6px; padding:4px 6px;
    font-size:7.5px; font-weight:700;
  }
  .sf-prod-icon{
    width:22px; border-radius:6px;
    border:1px solid var(--sf-border); background:var(--sf-card-bg);
    display:flex; align-items:center; justify-content:center;
    font-size:8px; color:var(--sf-muted);
  }
  .sf-prod-stock{ font-size:9.5px; color:var(--sf-muted); margin-top:1px; font-weight:600; }

  .sf-prods-section{
    padding:10px 14px 12px;
    background:var(--sf-bg);
    border-bottom:1px solid var(--sf-border);
  }
  .sf-prods-head{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:8px; margin-bottom:8px;
  }
  .sf-prods-head h3{ margin:0; font-size:11px; font-weight:800; letter-spacing:-.1px; }
  .sf-prods-head p{ margin:2px 0 0; font-size:9px; color:var(--sf-muted); line-height:1.35; }
  .sf-prods-more{ font-size:9px; font-weight:700; color:var(--sf-brand); white-space:nowrap; padding-top:2px; }
  .sf-prod.is-placeholder .sf-prod-name,
  .sf-prod.is-placeholder .sf-prod-price,
  .sf-prod.is-placeholder .sf-prod-stock{
    background:var(--sf-border);
    border-radius:4px;
    color:transparent;
    user-select:none;
  }
  .sf-prod.is-placeholder .sf-prod-name{ height:8px; width:82%; }
  .sf-prod.is-placeholder .sf-prod-price{ height:8px; width:48%; margin-top:5px; }
  .sf-prod.is-placeholder .sf-prod-stock{ height:7px; width:58%; margin-top:4px; }
  .sf-prod-img.is-empty{
    display:flex; align-items:center; justify-content:center;
    color:var(--sf-muted); font-size:14px; opacity:.35;
  }
  .sf-prod-img img{ width:100%; height:100%; object-fit:cover; display:block; }

  .sf-feats-section{
    padding:12px 14px 14px;
    background:var(--sf-bg);
    border-bottom:1px solid var(--sf-border);
  }
  .sf-feats-head h3{ margin:0; font-size:11.5px; font-weight:800; letter-spacing:-.12px; }
  .sf-feats-head p{ margin:3px 0 10px; font-size:9px; color:var(--sf-muted); line-height:1.35; }
  .sf-feats-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  .sf-feat-card{
    display:flex; align-items:flex-start; gap:8px;
    border:1px solid var(--sf-border);
    background:var(--sf-card-bg);
    border-radius:12px;
    padding:10px 9px;
    box-shadow: 0 2px 8px rgba(15,23,42,.06);
  }
  .sf-feat-ic{
    width:22px; height:22px; border-radius:7px;
    display:flex; align-items:center; justify-content:center;
    background:var(--sf-feature-icon-bg, var(--sf-bg-soft));
    color:var(--sf-feature-icon-fg, var(--sf-brand));
    font-size:10px;
    flex-shrink:0;
  }
  .sf-feat-card h4{
    margin:0 0 3px;
    font-size:9px; font-weight:800; line-height:1.25;
  }
  .sf-feat-card p{
    margin:0;
    font-size:8.2px; color:var(--sf-muted); line-height:1.4;
  }

  .sf-about-prev{
    padding:10px 14px 12px;
    background:var(--sf-bg);
    border-bottom:1px solid var(--sf-border);
  }
  .sf-about-prev h3{
    margin:0 0 5px;
    font-size:11px; font-weight:800; letter-spacing:-.1px;
  }
  .sf-about-prev p{
    margin:0 0 6px;
    font-size:9px; color:var(--sf-muted); line-height:1.4;
  }
  .sf-about-prev ul{
    margin:0; padding-left:14px;
    font-size:8.5px; color:var(--sf-text); line-height:1.5;
  }
  .sf-about-prev li + li{ margin-top:2px; }

  .sf-fab{
    position:absolute;
    right:14px; bottom:14px;
    width:42px; height:42px; border-radius:50%;
    background:#25d366;
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
    box-shadow: 0 8px 20px rgba(37,211,102,.45);
    cursor:pointer;
  }
  .sf-watermark{
    position:absolute; bottom:6px; left:14px;
    font-size:9.5px; color:var(--sf-muted); font-weight:600;
    opacity:.7;
  }
  .tk-preview-note{
    font-size:11.5px; color:var(--text-3); margin-top:10px; line-height:1.5; text-align:center;
  }
  .tk-preview-note code{
    font-family:ui-monospace, monospace; font-size:10.5px;
    background:var(--card-soft); padding:1px 5px; border-radius:4px;
  }

  @media (max-width: 1080px){
    .toko-grid{ grid-template-columns: 1fr; }
    .tk-preview-wrap{ position:static; }
  }

  /* =========================================================
     TWEAKS PANEL (vanilla)
     ========================================================= */
  .twk{
    position:fixed; right:16px; bottom:16px; z-index:9999;
    width:280px; max-height: calc(100vh - 32px);
    display:none; flex-direction:column;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border:1px solid rgba(15,23,42,.08);
    border-radius:14px;
    box-shadow: 0 12px 40px rgba(15,23,42,.18);
    font-size:12px; color:var(--text);
    overflow:hidden;
  }
  .twk.is-open{ display:flex; }
  .twk-hd{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 8px 10px 14px;
    border-bottom:1px solid var(--border-soft);
    cursor:move; user-select:none;
  }
  .twk-hd b{ font-weight:800; font-size:12px; }
  .twk-x{
    width:22px; height:22px; border-radius:6px;
    border:none; background:transparent; color:var(--text-3);
    cursor:pointer; font-size:13px; line-height:1;
  }
  .twk-x:hover{ background: var(--card-soft); color:var(--text); }
  .twk-body{
    padding:6px 14px 14px;
    overflow-y:auto; min-height:0;
    display:flex; flex-direction:column; gap:10px;
  }
  .twk-sect{
    font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    color:var(--text-4);
    padding:10px 0 2px;
  }
  .twk-sect:first-child{ padding-top:2px; }
  .twk-row{ display:flex; flex-direction:column; gap:6px; }
  .twk-row.h{ flex-direction:row; align-items:center; justify-content:space-between; }
  .twk-lbl{ font-weight:600; color:var(--text-2); font-size:11.5px; }

  .twk-swatches{ display:flex; gap:6px; }
  .twk-swatches button{
    flex:1; height:30px; border-radius:7px; border:0; cursor:pointer;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
    transition: transform .12s, box-shadow .12s;
    padding:0;
  }
  .twk-swatches button:hover{ transform: translateY(-1px); }
  .twk-swatches button.is-on{
    box-shadow: inset 0 0 0 2px var(--text), 0 2px 6px rgba(0,0,0,.15);
  }

  .twk-seg{
    display:flex; padding:2px;
    background:rgba(0,0,0,.06); border-radius:8px;
  }
  .twk-seg button{
    flex:1; border:0; background:transparent;
    font: inherit; font-weight:600; font-size:11.5px;
    color:var(--text-2);
    padding:5px 6px; border-radius:6px;
    cursor:pointer;
  }
  .twk-seg button.is-on{
    background:#fff; color:var(--text);
    box-shadow:0 1px 2px rgba(0,0,0,.1);
  }

  .twk-toggle-mini{
    width:32px; height:18px; position:relative;
    border:0; background: rgba(0,0,0,.15);
    border-radius:99px; cursor:pointer; padding:0;
    transition: background .15s;
  }
  .twk-toggle-mini::after{
    content:""; position:absolute; top:2px; left:2px;
    width:14px; height:14px; border-radius:50%;
    background:#fff; box-shadow: 0 1px 2px rgba(0,0,0,.25);
    transition: transform .15s;
  }
  .twk-toggle-mini.is-on{ background: var(--primary); }
  .twk-toggle-mini.is-on::after{ transform: translateX(14px); }

  /* =========================================================
     RESPONSIVE
     ========================================================= */
  @media (max-width: 1080px){
    .grid-2{ grid-template-columns: 1fr; }
    .kpis{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  }

  @media (max-width: 900px){
    .app{ grid-template-columns: 1fr; }
    .sb{
      position:fixed;
      left:0; top:0;
      width: 280px; height:100vh;
      transform: translateX(-100%);
      transition: transform .24s ease;
      z-index: 50;
      box-shadow: 24px 0 60px rgba(0,0,0,.28);
    }
    body.sb-open .sb{ transform: translateX(0); }
    body.sb-open .scrim{
      opacity:1; pointer-events:auto;
    }
    .scrim{
      position:fixed; inset:0; background:rgba(8,15,30,.5);
      z-index:40; opacity:0; pointer-events:none;
      transition: opacity .2s;
      backdrop-filter: blur(2px);
    }
    .topbar-burger{ display:inline-flex; }
    .topbar{ padding:12px 16px; gap:10px; }
    .topbar-search{ display:none; }
    .page{ padding: 18px 16px 64px; }
    .toko-action-bar{ margin-left:-16px; margin-right:-16px; padding:12px 16px; }
    .hero{ padding: 20px; }
    .hero h2{ font-size:19px; }
  }

  @media (max-width: 540px){
    .kpis{ grid-template-columns: 1fr 1fr; gap:10px; }
    .kpi{ padding:14px; }
    .kpi-val{ font-size:24px; }
    table.t thead{ display:none; }
    table.t tbody td{ display:block; padding:8px 16px; border:none; }
    table.t tbody tr{
      display:block; padding:10px 0; border-bottom:1px solid var(--border-soft);
    }
    .topbar-title h1{ font-size:15px; }
    .hero{ flex-direction:column; align-items:flex-start; }
  }

  /* ───────────────────────────────────────────
     NOTIFICATION SYSTEM
     ─────────────────────────────────────────── */

  /* Badge on bell button */
  .notif-badge{
    position:absolute; top:7px; right:7px;
    min-width:16px; height:16px; border-radius:8px;
    background:var(--danger);
    border:2px solid #fff;
    color:#fff;
    font-size:9px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    padding:0 3px; line-height:1;
    pointer-events:none;
  }

  /* Overlay backdrop */
  #notif-overlay{
    position:fixed; inset:0; z-index:198;
    display:none;
  }
  #notif-overlay.is-open{ display:block; }

  /* Panel */
  .notif-panel{
    position:fixed; top:70px; right:16px; z-index:199;
    width:390px;
    background:#fff;
    border-radius:18px;
    box-shadow: 0 8px 40px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
    border:1px solid var(--border-soft);
    display:flex; flex-direction:column;
    max-height:580px;
    opacity:0; transform:translateY(-10px) scale(.98);
    pointer-events:none;
    transition: opacity .18s ease, transform .18s ease;
    overflow:hidden;
  }
  .notif-panel.is-open{
    opacity:1; transform:translateY(0) scale(1);
    pointer-events:all;
  }

  /* Panel header */
  .notif-ph{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px 14px;
    border-bottom:1px solid var(--border-soft);
    flex-shrink:0;
  }
  .notif-ph-title{ margin:0; font-size:15px; font-weight:800; }
  .notif-ph-sub{
    font-size:11.5px; color:var(--text-4); font-weight:600; margin-top:2px;
  }
  .notif-readall-btn{
    width:32px; height:32px; border-radius:9px;
    border:1px solid var(--border); background:#fff;
    color:var(--text-3); cursor:pointer; font-size:13px;
    display:flex; align-items:center; justify-content:center;
    transition:background .12s, color .12s;
  }
  .notif-readall-btn:hover{ background:var(--primary-soft); color:var(--primary); border-color:var(--primary); }
  .notif-x-btn{
    width:32px; height:32px; border-radius:9px;
    border:1px solid var(--border); background:#fff;
    color:var(--text-3); cursor:pointer; font-size:13px;
    display:flex; align-items:center; justify-content:center;
    transition:background .12s, color .12s;
  }
  .notif-x-btn:hover{ background:#fef2f2; color:var(--danger); border-color:#fecaca; }

  /* List scroll area */
  .notif-list{
    overflow-y:auto; flex:1;
  }
  .notif-list::-webkit-scrollbar{ width:4px; }
  .notif-list::-webkit-scrollbar-track{ background:transparent; }
  .notif-list::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }

  /* Loading / empty states */
  .notif-loading, .notif-empty{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; padding:40px 20px;
    color:var(--text-4); font-size:13.5px;
  }
  .notif-empty i{ font-size:28px; }

  /* Notification item */
  .notif-item{
    padding:14px 18px;
    border-bottom:1px solid var(--border-soft);
    cursor:pointer;
    transition:background .1s;
    border-left:3px solid transparent;
    display:flex; flex-direction:column; gap:5px;
  }
  .notif-item:last-child{ border-bottom:none; }
  .notif-item:hover{ background:var(--primary-soft); }
  .notif-item.unread{
    border-left-color:var(--primary);
    background:#f8faff;
  }
  .notif-item.unread:hover{ background:var(--primary-soft); }
  .notif-item-head{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
  }
  .notif-item-title{
    font-weight:700; font-size:13.5px; color:var(--text); line-height:1.3;
  }
  .notif-item.unread .notif-item-title{ color:var(--primary-strong); }
  .notif-item-date{
    font-size:11px; color:var(--text-4); white-space:nowrap; flex-shrink:0;
  }
  .notif-item-preview{
    font-size:12.5px; color:var(--text-3); line-height:1.45;
  }

  /* Status pill (panel + modal) */
  .notif-status-pill{
    display:inline-flex; align-items:center;
    padding:2px 9px; border-radius:6px;
    font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  }
  .notif-status-pill.aktif{ background:var(--primary-soft); color:var(--primary-strong); }
  .notif-status-pill.penting{ background:#fff7ed; color:#b45309; }
  .notif-status-pill.darurat{ background:#fef2f2; color:#b91c1c; }
  .notif-status-pill.info{ background:var(--primary-soft); color:var(--primary-strong); }

  /* Content modal */
  .notif-modal{
    position:fixed; inset:0; z-index:300;
    background:rgba(15,23,42,.45);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    opacity:0; pointer-events:none;
    transition:opacity .18s ease;
  }
  .notif-modal.is-open{ opacity:1; pointer-events:all; }
  .notif-modal-box{
    background:#fff; border-radius:20px;
    width:min(640px, 100%);
    max-height:calc(100vh - 80px);
    display:flex; flex-direction:column;
    box-shadow:0 24px 80px rgba(0,0,0,.2);
    overflow:hidden;
    transform:translateY(16px) scale(.97);
    transition:transform .2s ease;
  }
  .notif-modal.is-open .notif-modal-box{
    transform:translateY(0) scale(1);
  }
  .notif-modal-head{
    display:flex; align-items:flex-start; gap:14px; justify-content:space-between;
    padding:22px 24px;
    border-bottom:1px solid var(--border-soft);
    flex-shrink:0;
  }
  .notif-modal-meta{
    font-size:12px; color:var(--text-4); font-weight:600; margin-top:4px;
  }
  .notif-modal-body{
    padding:24px 26px;
    overflow-y:auto; flex:1;
    font-size:14px; line-height:1.75; color:var(--text-2);
  }
  /* Typography inside HTML content */
  .notif-modal-body h1,.notif-modal-body h2,.notif-modal-body h3{
    color:var(--text); margin:18px 0 8px; line-height:1.3;
  }
  .notif-modal-body h1{ font-size:1.35em; }
  .notif-modal-body h2{ font-size:1.2em; }
  .notif-modal-body h3{ font-size:1.05em; }
  .notif-modal-body p{ margin:0 0 12px; }
  .notif-modal-body ul,.notif-modal-body ol{
    padding-left:20px; margin:0 0 12px;
  }
  .notif-modal-body li{ margin-bottom:6px; }
  .notif-modal-body a{ color:var(--primary); text-decoration:underline; }
  .notif-modal-body a:hover{ color:var(--primary-strong); }
  .notif-modal-body img{ max-width:100%; border-radius:10px; margin:8px 0; }
  .notif-modal-body blockquote{
    border-left:4px solid var(--primary); margin:12px 0;
    padding:8px 16px; background:var(--primary-soft); border-radius:0 8px 8px 0;
    color:var(--text-2);
  }
  .notif-modal-body pre,.notif-modal-body code{
    background:var(--bg); border:1px solid var(--border); border-radius:6px;
    padding:2px 6px; font-size:.9em;
  }
  .notif-modal-body pre{ padding:12px 14px; overflow-x:auto; }
  .notif-modal-body hr{ border:none; border-top:1px solid var(--border-soft); margin:18px 0; }
  .notif-modal-body table{ width:100%; border-collapse:collapse; font-size:13px; }
  .notif-modal-body table th,.notif-modal-body table td{
    border:1px solid var(--border-soft); padding:8px 12px; text-align:left;
  }
  .notif-modal-body table th{ background:var(--bg); font-weight:700; }

  /* Responsive panel */
  @media(max-width:440px){
    .notif-panel{ right:8px; left:8px; width:auto; }
    .help-panel{ right:8px; left:8px; width:auto; }
  }

  /* ───────────────────────────────────────────
     HELP PANEL
     ─────────────────────────────────────────── */
  #help-overlay{
    position:fixed; inset:0; z-index:198; display:none;
  }
  #help-overlay.is-open{ display:block; }

  .help-panel{
    position:fixed; top:70px; right:64px; z-index:199;
    width:340px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 8px 40px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06);
    border:1px solid var(--border-soft);
    overflow:hidden;
    opacity:0; transform:translateY(-10px) scale(.98);
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .help-panel.is-open{
    opacity:1; transform:translateY(0) scale(1); pointer-events:all;
  }
  .help-ph{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px 12px;
    border-bottom:1px solid var(--border-soft);
  }
  .help-ph-title{ margin:0; font-size:14px; font-weight:800; }
  .help-row{
    display:flex; align-items:center; gap:12px;
    padding:13px 16px;
    border-bottom:1px solid var(--border-soft);
    text-decoration:none; color:inherit;
    transition:background .1s;
  }
  .help-row:last-of-type{ border-bottom:none; }
  .help-row:hover{ background:var(--primary-soft); }
  .help-row-ic{
    width:38px; height:38px; border-radius:11px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:15px;
  }
  .help-row-body{ flex:1; min-width:0; }
  .help-row-title{ font-size:13.5px; font-weight:700; color:var(--text); line-height:1.2; }
  .help-row-sub{ font-size:12px; color:var(--text-3); margin-top:2px; }
  .help-row-ext{ font-size:11px; color:var(--text-4); flex-shrink:0; }
  .help-footer{
    padding:10px 16px;
    font-size:12px; color:var(--text-4); text-align:center;
    border-top:1px solid var(--border-soft);
  }
  .help-footer a{ color:var(--primary); text-decoration:none; font-weight:700; }

  /* ───────────────────────────────────────────
     TIKET & KELUHAN
     ─────────────────────────────────────────── */
  .tkt-list{
    display:flex; flex-direction:column; gap:10px;
    margin-top:4px;
  }
  .tkt-card{
    background:var(--card);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    padding:14px 18px;
    cursor:pointer;
    transition:box-shadow .12s, border-color .12s, background .1s;
    border-left:4px solid transparent;
    display:flex; flex-direction:column; gap:6px;
    box-shadow:var(--shadow-sm);
  }
  .tkt-card:hover{
    border-color:var(--border);
    background:#fafbff;
  }
  .tkt-card.status-menunggu{ border-left-color:#f59e0b; }
  .tkt-card.status-diproses{ border-left-color:var(--primary); }
  .tkt-card.status-perlu   { border-left-color:#f97316; }
  .tkt-card.status-selesai { border-left-color:var(--success); }
  .tkt-card.status-ditutup { border-left-color:var(--text-4); }

  .tkt-card-head{
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  }
  .tkt-card-meta{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    flex:1; min-width:0;
  }
  .tkt-card-id{
    font-size:11.5px; font-weight:800; color:var(--text-3);
    font-family:'Inter Tight','Outfit',sans-serif; font-variant-numeric:tabular-nums;
  }
  .tkt-card-date{
    font-size:11px; color:var(--text-4); white-space:nowrap; flex-shrink:0;
    padding-top:1px;
  }
  .tkt-card-dot{
    width:7px; height:7px; border-radius:50%;
    background:#f97316; flex-shrink:0;
  }
  .tkt-card-judul{
    font-weight:700; font-size:14px; color:var(--text); line-height:1.35;
    overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  }
  .tkt-card-preview{
    font-size:12.5px; color:var(--text-3); line-height:1.45;
    overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  }
  .tkt-card-foot{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    flex-wrap:wrap; margin-top:2px;
  }
  .tkt-card-tags{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }
  .tkt-kat-tag{
    font-size:11px; font-weight:700;
    padding:2px 9px; border-radius:6px;
    background:var(--card-soft); color:var(--text-3);
    border:1px solid var(--border-soft);
    white-space:nowrap;
  }
  .tkt-kat-tag--order{
    background:#fef3c7; color:#92400e; border-color:#fde68a;
  }
  .tkt-card-msgs{
    font-size:11.5px; color:var(--text-4); white-space:nowrap; flex-shrink:0;
  }
  .tkt-empty{
    text-align:center; padding:48px 20px; color:var(--text-4);
  }
  .tkt-empty i{ font-size:28px; margin-bottom:12px; display:block; }
  .tkt-empty-msg{ font-size:13.5px; margin-bottom:14px; }

  /* Status pills for tickets */
  .pill-tk-menunggu{ background:#fef3c7; color:#92400e; }
  .pill-tk-diproses{ background:var(--primary-soft); color:var(--primary-strong); }
  .pill-tk-perlu   { background:#fff7ed; color:#c2410c; }
  .pill-tk-selesai { background:#dcfce7; color:#166534; }
  .pill-tk-ditutup { background:#f1f5f9; color:#64748b; }

  /* Ticket thread bubbles */
  .tk-bubble{
    display:flex; gap:10px; flex-direction:column;
  }
  .tk-msg{
    max-width:88%;
    padding:10px 14px;
    border-radius:14px;
    font-size:13.5px; line-height:1.55;
  }
  .tk-msg.mitra{
    align-self:flex-end;
    background:var(--primary); color:#fff;
    border-bottom-right-radius:4px;
  }
  .tk-msg.admin{
    align-self:flex-start;
    background:var(--card-soft); color:var(--text-2);
    border:1px solid var(--border-soft);
    border-bottom-left-radius:4px;
  }
  .tk-msg-meta{
    font-size:11px; margin-top:4px;
    opacity:.7;
  }
  .tk-msg.mitra .tk-msg-meta{ text-align:right; }
  .tk-msg-wrap{ display:flex; flex-direction:column; }
  .tk-msg-wrap.mitra{ align-items:flex-end; }
  .tk-msg-wrap.admin{ align-items:flex-start; }
  .tk-msg-sender{
    font-size:11px; font-weight:700; color:var(--text-4);
    margin-bottom:3px;
  }
  .tk-msg-wrap.mitra .tk-msg-sender{ text-align:right; }

  /* Page loading overlay */
  #db-loading {
    position: fixed; inset: 0; z-index: 9999;
    display: none; flex-direction: column;
    align-items: center; justify-content: center;
    transition: opacity .4s;
  }
  #db-loading.fade-out { opacity: 0; pointer-events: none; }
  #db-loading.is-boot {
    background: var(--page-bg);
    gap: 16px;
  }
  #db-loading.is-busy {
    background: rgba(243, 245, 250, 0.78);
    backdrop-filter: blur(4px);
    gap: 14px;
    font-family: 'Outfit', sans-serif;
  }
  .db-loading-boot {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 16px;
  }
  .loading-brand {
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 22px;
    letter-spacing: -.02em; color: var(--text);
    animation: dbBrandFade 1.6s ease-in-out infinite;
  }
  .loading-dots {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    height: 10px;
  }
  .loading-dots span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
    animation: dbDotMove 1.1s ease-in-out infinite;
  }
  .loading-dots span:nth-child(2) { animation-delay: .15s; }
  .loading-dots span:nth-child(3) { animation-delay: .3s; }
  @keyframes dbBrandFade { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  @keyframes dbDotMove {
    0%, 80%, 100% { opacity: .25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-7px); }
  }
  .db-loading-busy {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px;
  }
  .db-loading-spinner {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; color: var(--primary);
  }
  #db-loading-msg {
    color: var(--text-4); font-size: 13.5px; font-weight: 600;
    margin: 0;
  }

  /* Sembunyikan dashboard sampai data awal selesai dimuat */
  body.dash-boot-pending .app{
    visibility: hidden;
    pointer-events: none;
  }
  body.dash-boot-pending #dash-page-loading{
    display: none !important;
  }

  /* ── Merchant order shop (Fase 1: PDP + keranjang) ── */
  .mop-head { align-items: flex-start; }
  .mop-crumb {
    font-size: 12px; font-weight: 600; color: var(--text-3);
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  }
  .mop-crumb a { color: var(--primary); }
  .mop-sub { font-size: 13px; color: var(--text-3); margin: 4px 0 0; }
  .mop-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .mop-cart-link { position: relative; }
  .mop-cart-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
    border-radius: 99px; background: var(--primary); color: #fff;
    font-size: 10px; font-weight: 800;
  }
  .mop-loading, .mop-error {
    text-align: center; padding: 48px 20px; color: var(--text-3); font-size: 14px;
  }
  .mop-pdp {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 28px; align-items: start;
  }
  @media (max-width: 900px) {
    .mop-pdp { grid-template-columns: 1fr; }
  }
  .mop-main-img {
    aspect-ratio: 1; border-radius: 14px; overflow: hidden;
    background: var(--card-soft); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }
  .mop-main-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
  .mop-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
  .mop-thumb {
    width: 56px; height: 56px; padding: 0; border: 2px solid var(--border);
    border-radius: 10px; overflow: hidden; cursor: pointer; background: #fff;
  }
  .mop-thumb.is-on { border-color: var(--primary); }
  .mop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mop-title { margin: 0 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
  .mop-price-box {
    padding: 14px 16px; border-radius: 12px;
    background: var(--card-soft); border: 1px solid var(--border-soft); margin-bottom: 14px;
  }
  .mop-price-from { font-size: 11px; font-weight: 600; color: var(--text-3); }
  .mop-price-val { font-size: 26px; font-weight: 800; font-family: 'Inter Tight', sans-serif; }
  .mop-price-note { font-size: 12px; color: var(--text-3); margin-top: 4px; }
  .mop-hint {
    font-size: 12.5px; padding: 10px 12px; border-radius: 10px; margin-bottom: 14px; line-height: 1.45;
  }
  .mop-hint--ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
  .mop-hint--batch { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
  .mop-section { margin-bottom: 14px; }
  .mop-label { font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; display: block; }
  .mop-opts { display: flex; flex-wrap: wrap; gap: 8px; }
  .mop-opt {
    border: 1.5px solid var(--border); background: #fff; padding: 8px 12px;
    border-radius: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  }
  .mop-opt:hover { border-color: #cbd5e1; }
  .mop-opt.is-on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-strong, #1d4ed8); }
  .mop-batch-opt { text-align: left; max-width: 100%; }
  .mop-color-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1.5px solid var(--border); background: #fff; padding: 6px 10px;
    border-radius: 99px; font-size: 12px; font-weight: 600; cursor: pointer;
  }
  .mop-color-chip.is-on { border-color: var(--primary); background: var(--primary-soft); }
  .mop-color-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); }
  .mop-qty-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .mop-qty {
    display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden;
  }
  .mop-qty button {
    width: 36px; height: 36px; border: none; background: #fff; cursor: pointer; font-size: 16px;
  }
  .mop-qty input {
    width: 48px; height: 36px; border: none; text-align: center; font-weight: 700; font-size: 14px;
  }
  .mop-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
  .mop-footnote { font-size: 11.5px; color: var(--text-4); margin-top: 12px; line-height: 1.45; }
  .mop-channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media (max-width: 520px) { .mop-channel-grid { grid-template-columns: 1fr; } }
  .mop-channel-opt {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
    border: 1.5px solid var(--border); background: #fff; border-radius: 12px; padding: 12px 14px;
    cursor: pointer; transition: border-color .15s, background .15s;
  }
  .mop-channel-opt i { color: var(--primary); font-size: 15px; }
  .mop-channel-opt.is-on { border-color: var(--primary); background: var(--primary-soft); }
  .mop-channel-title { font-weight: 700; font-size: 13px; color: var(--text); }
  .mop-channel-desc { font-size: 11px; color: var(--text-3); line-height: 1.4; }

  .moc-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start;
  }
  @media (max-width: 860px) { .moc-layout { grid-template-columns: 1fr; } }
  .moc-item {
    display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-soft);
  }
  .moc-item:last-child { border-bottom: none; }
  .moc-item-img {
    width: 72px; height: 72px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
    background: var(--card-soft); display: flex; align-items: center; justify-content: center;
    color: var(--text-4);
  }
  .moc-item-img img { width: 100%; height: 100%; object-fit: cover; }
  .moc-item-body { flex: 1; min-width: 0; }
  .moc-item-name { font-weight: 700; font-size: 14px; }
  .moc-item-meta { font-size: 12px; color: var(--text-3); margin-top: 4px; }
  .moc-item-qty { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
  .moc-item-right { text-align: right; flex-shrink: 0; }
  .moc-item-price { font-weight: 800; font-size: 14px; color: #047857; }
  .moc-remove {
    border: none; background: none; color: var(--text-4); cursor: pointer; margin-top: 8px; padding: 4px;
  }
  .moc-remove:hover { color: #dc2626; }
  .moc-summary h3 { margin: 0 0 14px; font-size: 15px; font-weight: 800; }
  .moc-sum-row {
    display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px;
  }
  .moc-sum-note { font-size: 11.5px; color: var(--text-4); margin-top: 10px; line-height: 1.45; }
  .moc-empty { text-align: center; padding: 48px 24px; }
  .moc-empty-ic {
    width: 64px; height: 64px; border-radius: 50%; background: var(--card-soft);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
    font-size: 24px; color: var(--text-4);
  }
  .moc-empty-cta {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px;
  }
  .moc-item-actions {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px;
  }
  .moc-item-edit {
    font-size: 12px; font-weight: 600; color: var(--brand, #2563eb); text-decoration: none;
  }
  .moc-item-edit:hover { text-decoration: underline; }
  .moc-item-co { font-size: 12px; padding: 4px 10px; }
  .od-copy-inv {
    border: none; background: transparent; color: var(--text-3); cursor: pointer;
    padding: 2px 6px; margin-left: 4px; vertical-align: middle; font-size: 13px;
  }
  .od-copy-inv:hover { color: var(--brand, #2563eb); }

  /* Toast & banner feedback dashboard */
  .dash-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    z-index: 10050;
    max-width: min(520px, 92vw);
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    color: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.28s ease, transform 0.28s ease;
  }
  .dash-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .dash-toast--success { background: #059669; }
  .dash-toast--error { background: #dc2626; }
  .dash-toast--info { background: #1e293b; }

  .dash-feedback-banner {
    display: none;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
  }
  .dash-feedback-banner--success {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #6ee7b7;
    color: #065f46;
  }
  .dash-feedback-banner--success .dash-feedback-banner__icon { color: #059669; }
  .dash-feedback-banner--error {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border: 1px solid #fca5a5;
    color: #991b1b;
  }
  .dash-feedback-banner--error .dash-feedback-banner__icon { color: #dc2626; }
  .dash-feedback-banner__icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .dash-feedback-banner__body { flex: 1; min-width: 0; }
  .dash-feedback-banner__title { font-weight: 800; font-size: 14px; margin-bottom: 2px; }
  .dash-feedback-banner__detail { font-size: 12.5px; opacity: 0.92; }
  .dash-feedback-banner__close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.65);
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dash-feedback-banner__close:hover { background: rgba(255, 255, 255, 0.95); }

  /* Modal pembayaran QRIS — panel kanan */
  #qris-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(8, 15, 30, 0.55);
    z-index: 400;
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.22s ease;
  }
  #qris-scrim.is-open { opacity: 1; }

  #qris-modal.qris-pay-panel {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(720px, 100vw);
    max-height: 100vh;
    overflow-y: auto;
    background: #fff;
    z-index: 401;
    border-radius: 22px 0 0 22px;
    box-shadow: -12px 0 48px rgba(11, 31, 63, 0.18);
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.22s ease, transform 0.28s ease;
    pointer-events: none;
  }
  #qris-modal.qris-pay-panel.is-open {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
  #qris-modal .qris-pay-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-soft);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    border-radius: 22px 0 0 0;
  }
  #qris-modal .qris-pay-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 0;
  }
  #qris-modal .qris-pay-col-qris {
    padding: 22px;
    border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  #qris-modal .qris-pay-col-form {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  #qris-modal .qris-pay-img-wrap {
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 12px;
    background: #fafafa;
  }
  #qris-modal .qris-pay-img-wrap img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    display: block;
    border-radius: 8px;
  }
  #qris-modal .qris-pay-dl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: 224px;
    background: #fff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
  }
  #qris-modal .qris-pay-dl-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
  }
  #qris-modal .qris-pay-nominal-box {
    width: 100%;
    background: linear-gradient(135deg, #eff4ff, #dbeafe);
    border: 1.5px solid #bfdbfe;
    border-radius: 14px;
    padding: 14px;
    text-align: center;
  }

  @media (max-width: 720px) {
    #qris-modal.qris-pay-panel {
      width: 100vw;
      border-radius: 0;
    }
    #qris-modal .qris-pay-head { border-radius: 0; }
    #qris-modal .qris-pay-body {
      grid-template-columns: 1fr;
    }
    #qris-modal .qris-pay-col-qris {
      border-right: none;
      border-bottom: 1px solid var(--border-soft);
    }
  }