*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#50625a;--primary-ct:#d2e7dc;
  --bg:#f8faf8;--surface:#ffffff;--surface2:#f0f4f2;--surface3:#e9efec;
  --border:rgba(80,98,90,0.12);
  --accent:#50625a;--accent2:#c27600;--text:#2b3432;--muted:#57615f;
  --green:#2e9e6b;--red:#9f403d;--orange:#ea580c;--purple:#7c3aed;
  --radius:16px;--radius-pill:9999px;
  --brand:#8FA399;--nav-inactive:#9BA8B8;--nav-bg:#F0F2F0;
  --font-body:'Manrope','Noto Sans TC','PingFang TC',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --shadow-sm:0 1px 4px rgba(43,52,50,0.06);
  --shadow-md:0 4px 16px rgba(43,52,50,0.08),0 1px 4px rgba(43,52,50,0.04);
  --shadow-lg:0 12px 40px rgba(43,52,50,0.12),0 4px 12px rgba(43,52,50,0.06);
  --shadow-card:0px 12px 32px rgba(43,52,50,0.04);
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(80,98,90,0.2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(80,98,90,0.35)}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;vertical-align:middle}

/* ── Top Navigation (Stitch Desktop) ── */
.topnav{position:fixed;top:0;width:100%;z-index:50;background:rgba(240,242,240,0.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(155,168,184,0.2)}
.topnav-inner{max-width:1920px;margin:0 auto;height:64px;display:flex;align-items:center;padding:0 32px;gap:0;position:relative}
.topnav-logo{font-size:20px;font-weight:900;letter-spacing:-.04em;color:var(--brand);flex-shrink:0;margin-right:32px}
.topnav-links{display:flex;align-items:center;gap:32px;position:absolute;left:50%;transform:translateX(-50%)}
.topnav-item{position:relative;padding:8px 0;font-size:14px;font-weight:600;color:var(--nav-inactive);cursor:pointer;transition:color .2s;white-space:nowrap;user-select:none;border-bottom:2px solid transparent;padding-bottom:4px}
.topnav-item:hover{color:var(--brand)}
.topnav-item.active,.topnav-item.subnav-open{color:var(--brand);font-weight:700;border-bottom-color:var(--brand)}
.topnav-dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:160px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(43,52,50,0.1);padding:6px;z-index:200}
.topnav-item:hover .topnav-dropdown-menu{display:block}
.topnav-dropdown-item{display:block;padding:8px 14px;font-size:13px;font-weight:500;color:var(--muted);border-radius:8px;cursor:pointer;transition:all .15s}
.topnav-dropdown-item:hover,.topnav-dropdown-item.active{background:var(--surface3);color:var(--primary)}
.topnav-right{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted)}
.topnav-rate-badge{display:flex;align-items:center;gap:6px;padding:8px 16px;background:var(--surface3);border-radius:var(--radius-pill);font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;border:none;transition:all .15s}
.topnav-rate-badge:hover{background:var(--primary-ct);color:var(--primary)}
.topnav-rate-badge.open{background:var(--primary);color:#fff}
.topnav-hamburger{display:none}

/* ── Sub Navigation (Level 2) ── */
.subnav{position:fixed;top:64px;left:0;right:0;z-index:45;background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);height:48px;display:flex;align-items:center;overflow-x:auto;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav-inner{display:flex;align-items:center;gap:2px;padding:0 24px;white-space:nowrap}
.subnav-item{padding:6px 14px;font-size:13px;font-weight:600;color:var(--muted);border-radius:var(--radius-pill);cursor:pointer;transition:all .15s;white-space:nowrap;user-select:none}
.subnav-item:hover{background:var(--surface3);color:var(--text)}
.subnav-item.active{color:var(--primary);background:var(--primary-ct)}

/* ── Sub Navigation (Level 3 — Tokyo Characters) ── */
.subnav2{position:fixed;top:112px;left:0;right:0;z-index:44;background:rgba(248,250,248,0.96);border-bottom:1px solid var(--border);height:44px;display:flex;align-items:center;overflow-x:auto;scrollbar-width:none}
.subnav2::-webkit-scrollbar{display:none}
.subnav2-inner{display:flex;align-items:center;gap:2px;padding:0 24px;white-space:nowrap}
.subnav2-item{padding:5px 12px;font-size:12px;font-weight:600;color:var(--muted);border-radius:var(--radius-pill);cursor:pointer;transition:all .15s;white-space:nowrap;user-select:none}
.subnav2-item:hover{background:var(--surface3);color:var(--text)}
.subnav2-item.active{color:var(--primary);background:var(--primary-ct)}

/* ── Main Content ── */
.main-content{padding:72px 32px 48px;max-width:1920px;margin:0 auto;min-height:100vh}
.main-content.has-subnav{padding-top:120px}
.main-content.has-subnav2{padding-top:164px}
.main-content.shopee-open{padding-bottom:100px}
.page-title{font-size:24px;font-weight:800;margin-bottom:24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--text);letter-spacing:-.03em}
.badge{font-size:11px;padding:2px 10px;border-radius:9999px;background:var(--primary-ct);color:var(--primary);font-weight:600}
.badge-gray{background:#f3f4f6;color:#6b7280}.badge-blue{background:#dbeafe;color:#1d4ed8}.badge-orange{background:#ffedd5;color:#c2410c}.badge-green{background:#dcfce7;color:#15803d}.badge-yellow{background:#fef9c3;color:#a16207}
.desktop-only{display:block}.mobile-only{display:none}
@media(max-width:768px){.desktop-only{display:none!important}.mobile-only{display:block!important}}

/* ── Rate Bar ── */
.rate-bar{display:none;align-items:center;gap:12px;margin-bottom:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;flex-wrap:wrap;position:sticky;top:80px;z-index:40;box-shadow:var(--shadow-sm)}
.rate-open .rate-bar{display:flex}
.rate-bar label{font-size:12px;color:var(--muted);white-space:nowrap;margin-bottom:0;font-weight:500}
.rate-input{width:90px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:6px 10px;color:var(--text);font-family:var(--font-mono);font-size:13px;outline:none;transition:border-color .15s}
.rate-input:focus{border-color:var(--primary)}
.rate-badge{font-size:11px;color:var(--green);background:#dcfce7;border:1px solid #bbf7d0;border-radius:9999px;padding:2px 10px;white-space:nowrap;font-weight:600}

/* ── Section Labels ── */
.section-label{font-size:13px;font-weight:700;margin-bottom:12px;color:var(--text)}
.section-eyebrow{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary);margin-bottom:4px}
.section-title{font-size:18px;font-weight:800;color:var(--text);letter-spacing:-.3px;margin-bottom:16px}

/* ── Product Grid & Card (Stitch Design) ── */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:32px}
.product-card{background:#fff;border:1px solid rgba(169,180,177,0.1);border-radius:2rem;overflow:hidden;padding:0;box-shadow:var(--shadow-card);transition:all .3s;cursor:pointer;position:relative}
.product-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(43,52,50,0.1)}
.product-card-info{padding:24px}
.product-img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--surface2);margin-bottom:0;border-radius:0;transition:transform .5s cubic-bezier(.2,.8,.4,1)}
.product-card:hover .product-img{transform:scale(1.1)}
.product-img-placeholder{width:100%;aspect-ratio:1;background:var(--surface2);margin-bottom:0;border-radius:0;display:flex;align-items:center;justify-content:center;font-size:32px}
.product-card.soldout{opacity:0.55}
.product-card.soldout .product-img{filter:grayscale(50%)}
.soldout-badge{position:absolute;top:12px;right:12px;background:rgba(159,64,61,0.9);color:#fff;font-size:10px;padding:3px 10px;border-radius:9999px;font-weight:700}
.food-badge{position:absolute;top:12px;left:48px;background:rgba(159,64,61,0.9);color:#fff;font-size:10px;padding:3px 10px;border-radius:9999px;font-weight:700}
.product-card.food .product-name{color:var(--red)}
.wishlist-heart{position:absolute;bottom:44px;right:12px;font-size:14px;line-height:1;cursor:pointer;transition:transform .2s;z-index:5}
.wishlist-heart:active{transform:scale(1.4)}
.wishlist-heart.wishlisted{filter:none}
.wishlist-heart:not(.wishlisted){filter:grayscale(1) opacity(0.4)}
@keyframes heart-bounce{0%{transform:scale(1)}30%{transform:scale(1.4)}60%{transform:scale(0.9)}100%{transform:scale(1)}}
.wishlist-heart.bounce{animation:heart-bounce .4s ease}
.product-name{font-size:16px;font-weight:700;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text);line-height:1.4;height:44px}
.product-price-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.product-price-label{font-size:10px;color:var(--muted);font-weight:500}
.product-price{font-family:var(--font-mono);font-size:13px;color:var(--muted);font-weight:600}
.product-weight-row{margin:0 0 10px;padding:8px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);display:flex;flex-direction:column;gap:6px}
.product-weight-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.product-weight-label{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.04em}
.product-weight-state{font-size:10px;color:var(--primary);font-weight:600}
.product-weight-select{width:100%;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);font-size:11px;padding:5px 8px;outline:none}
.product-weight-select:focus{border-color:var(--primary)}
.product-weight-value{font-size:11px;color:var(--text);font-weight:700;font-family:var(--font-mono)}
.product-twd-row{display:flex;justify-content:space-between;align-items:flex-end;padding-top:8px;border-top:1px solid var(--border)}
.product-twd-col{display:flex;flex-direction:column;gap:2px}
.product-twd-label{font-size:9px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.product-twd{font-size:22px;font-weight:900;letter-spacing:-.04em;color:#065f46;font-family:var(--font-body)}
.product-suggest-col{display:flex;flex-direction:column;gap:2px;text-align:right}
.product-suggest-label{font-size:9px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.product-suggest{font-size:11px;color:var(--muted);font-family:var(--font-mono);font-weight:600;text-decoration:line-through}
.product-hint{margin-top:8px;font-size:11px;color:var(--primary);font-weight:600}

/* ── Search Bar ── */
.search-bar{display:flex;gap:10px;margin-bottom:20px}
.search-input{flex:1;background:var(--surface3);border:none;border-radius:var(--radius-pill);padding:12px 20px;color:var(--text);font-size:14px;font-family:var(--font-body);outline:none;transition:all .15s;box-shadow:none}
.search-input::placeholder{color:var(--muted)}
.search-input:focus{background:var(--surface);border:1px solid var(--primary);box-shadow:var(--shadow-sm)}

/* ── Buttons ── */
.btn{padding:10px 20px;border-radius:var(--radius-pill);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .15s;font-family:var(--font-body)}
.btn:active{transform:scale(0.95)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 12px rgba(80,98,90,0.2)}
.btn-primary:hover{background:#3a5249}
.btn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--muted)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn-sm{padding:6px 14px;font-size:12px;border-radius:var(--radius-pill)}
.btn-outline{background:transparent;border:1.5px solid var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-outline:disabled{opacity:.4;cursor:not-allowed}
.btn-orange{background:#ea580c;color:#fff}
.btn-orange:hover{background:#c2410c}
.btn-orange:disabled{background:#ccc;cursor:not-allowed;color:#999}
.btn-primary:disabled{background:#9eb8b2;cursor:not-allowed}
.btn-danger{background:#9f403d;color:#fff}
.btn-danger:hover{background:#7f3230}

/* ── Pagination ── */
.pagination{display:flex;gap:6px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.page-btn{padding:8px 14px;border-radius:9999px;font-size:13px;background:var(--surface);border:1px solid var(--border);color:var(--muted);cursor:pointer;transition:all .15s;font-weight:600}
.page-btn:hover,.page-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* ── Pricing Card ── */
.pricing-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.card-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:20px}
.form-group{margin-bottom:16px}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:500}
.form-input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--text);font-size:14px;font-family:var(--font-mono);outline:none;transition:border-color .15s}
.form-input:focus{border-color:var(--primary)}
.form-input[readonly]{color:var(--muted);cursor:default}
.result-row{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--border)}
.result-row:last-child{border-bottom:none}
.result-label{font-size:13px;color:var(--muted)}
.result-value{font-family:var(--font-mono);font-size:16px;font-weight:600}
.result-value.highlight{color:var(--accent2);font-size:22px}
.result-value.profit{color:var(--green)}
.result-value.cost{color:var(--red)}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(43,52,50,0.45);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:2rem;width:100%;max-width:700px;max-height:90vh;overflow-y:auto;padding:28px;box-shadow:var(--shadow-lg)}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:2rem;width:100%;max-width:420px;padding:28px;box-shadow:var(--shadow-lg)}
.modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;gap:16px}
.modal-title{font-size:18px;font-weight:800;line-height:1.4;color:var(--text)}
.modal-title-input{font-size:16px;font-weight:700;width:100%;border:none;border-bottom:2px solid var(--primary);background:transparent;color:var(--text);padding:4px 0;outline:none;font-family:var(--font-body)}
.modal-close{background:var(--surface2);border:none;color:var(--muted);font-size:18px;width:36px;height:36px;border-radius:9999px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s}
.modal-close:hover{color:var(--text);background:var(--surface3)}
.img-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:20px}
.img-gallery img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--surface2);border-radius:16px;border:1px solid var(--border)}
.detail-desc{font-size:13px;line-height:1.8;color:var(--text);background:var(--surface2);border-radius:16px;padding:16px;margin-bottom:16px}
.detail-price-row{display:flex;gap:16px;align-items:baseline;margin-bottom:20px;flex-wrap:wrap}
.price-jpy{font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--accent2)}
.price-twd{font-family:var(--font-mono);font-size:16px;color:var(--muted)}
.price-suggest{font-family:var(--font-mono);font-size:16px;color:var(--green);font-weight:700}
.weight-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:12px;color:var(--muted)}
.weight-tag{background:var(--surface2);border:1px solid var(--border);border-radius:9999px;padding:2px 10px;font-size:11px}

/* ── Loading / Empty ── */
.loading{display:flex;flex-direction:column;align-items:center;padding:60px 20px;color:var(--muted);gap:12px}
.spinner{width:32px;height:32px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty-icon{font-size:40px;margin-bottom:12px}

/* ── Stat Cards (Stitch Design — 帳務/庫存) ── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:2rem;padding:20px;box-shadow:var(--shadow-sm);transition:all .2s}
.stat-card:hover{box-shadow:var(--shadow-md)}
.stat-card:nth-child(1){background:rgba(210,231,220,0.4);border-color:rgba(210,231,220,0.6)}
.stat-card:nth-child(2){background:rgba(215,228,245,0.4);border-color:rgba(215,228,245,0.6)}
.stat-card:nth-child(3){background:rgba(253,235,220,0.4);border-color:rgba(253,235,220,0.6)}
.stat-card:nth-child(4){background:rgba(225,234,231,0.4);border-color:rgba(225,234,231,0.6)}
.stat-label{font-size:11px;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.stat-value{font-size:20px;font-weight:900;font-family:var(--font-body);color:var(--text)}
.stat-value.green{color:var(--green)}
.stat-value.red{color:var(--red)}
.stat-value.orange{color:#ea580c}

/* ── Tables (Stitch Design — resizable columns) ── */
.table-wrap{overflow-x:auto;border-radius:2rem;border:1px solid rgba(203,213,225,0.5);background:var(--surface);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;font-size:13px;table-layout:auto}
thead th{background:#f8fafc;padding:12px 14px;text-align:left;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid rgba(203,213,225,0.5);border-right:1px solid rgba(203,213,225,0.3);white-space:nowrap;position:sticky;top:0;z-index:1;min-width:40px;position:relative;user-select:none}
thead th:last-child{border-right:none}
thead th.num{text-align:center}
thead th .th-resize{position:absolute;right:-1px;top:4px;bottom:4px;width:5px;cursor:col-resize;z-index:2;border-radius:2px}
thead th .th-resize:hover{background:var(--primary);opacity:0.4}
td{border-right:1px solid rgba(203,213,225,0.15)}
td:last-child{border-right:none}
tbody tr{border-bottom:1px solid rgba(203,213,225,0.3);transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:rgba(248,250,252,0.8)}
td{padding:14px 16px;vertical-align:middle;color:var(--text)}
td.mono{font-family:var(--font-mono);text-align:right}
td.green{color:var(--green);font-family:var(--font-mono);font-weight:600}
td.red{color:var(--red);font-family:var(--font-mono);font-weight:600}
td.orange{color:#ea580c;font-family:var(--font-mono);font-weight:600}

/* ── Editable table cells ── */
.cell-edit{background:transparent;border:none;font:inherit;color:inherit;text-align:inherit;padding:0;width:100%;outline:none;-moz-appearance:textfield}
.cell-edit::-webkit-inner-spin-button,.cell-edit::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cell-edit:focus{background:var(--surface2);border-radius:4px;padding:2px 4px;box-shadow:0 0 0 2px rgba(80,98,90,0.2)}
td.num{text-align:center;font-family:var(--font-mono)}
td.num .cell-edit{text-align:center}

/* ── Order/Inventory Cards (全域，桌面+手機共用) ── */
.m-card{background:var(--surface);border:1px solid var(--border);border-radius:1rem;padding:20px 22px;box-shadow:var(--shadow-sm)}
.m-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:10px}
.m-card-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.4;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.m-card-badge{flex-shrink:0}
.m-card-grid{display:flex;flex-wrap:wrap;gap:2px 16px;font-size:12px;margin-bottom:8px}
.m-card-grid > div{display:flex;align-items:baseline;gap:4px}
.m-card-grid-2col{display:flex;flex-wrap:nowrap;gap:0;font-size:12px;margin-bottom:10px;justify-content:space-between}
.m-card-grid-2col > div{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.m-card-label{color:var(--muted);font-size:10px;font-weight:600}
.m-card-value{font-weight:700;font-size:13px}
.m-cell-edit{font-weight:700;font-size:13px;width:62px;min-width:40px}
.m-card-grid-2col .m-cell-edit{width:56px}
.m-card-grid-2col .m-card-value{font-size:13px}
.m-card-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:4px 0;margin-bottom:4px}
.m-card-actions{display:flex;gap:6px;align-items:center;padding-top:10px;border-top:1px solid var(--border)}
.m-card-sku{font-size:11px;color:var(--muted);margin-bottom:6px}
.m-card-thumb{width:48px;height:48px;border-radius:6px;object-fit:cover;flex-shrink:0;border:1px solid var(--border)}
.m-card.unmatched{border-left:3px solid var(--red)}
.m-card.low-stock{border-left:3px solid var(--orange)}
.m-card.out-stock{border-left:3px solid var(--red)}
.m-card-sub{font-size:11px;color:var(--muted)}
.mobile-cards{display:none}
.item-card-meta-stack{display:flex;flex-direction:column;gap:2px;min-width:0}
.item-card-meta-line{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-card-meta-primary{color:var(--text)}
.item-card-meta-muted{color:var(--muted)}
.item-card-meta-alert{font-size:11px;color:var(--red)}
.inv-risk-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;min-height:26px}
.inv-risk-tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;border:1px solid transparent}
.inv-risk-tag.danger{background:rgba(220,38,38,.1);color:#b91c1c;border-color:rgba(220,38,38,.25)}
.inv-risk-tag.warning{background:rgba(245,158,11,.12);color:#b45309;border-color:rgba(245,158,11,.28)}

/* ── Filter pills ── */
.filter-pills{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.filter-pill{padding:6px 16px;border-radius:9999px;font-size:12px;font-weight:700;cursor:pointer;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);transition:all .15s}
.filter-pill:hover{border-color:var(--primary);color:var(--primary)}
.filter-pill.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.filter-pill .filter-count{margin-left:4px;opacity:0.7}

/* ── Chips / Badges (Stitch pill style) ── */
.chip{padding:4px 12px;border-radius:9999px;font-size:11px;font-weight:700;display:inline-block}
.chip-new{background:rgba(210,231,220,0.6);color:#43564d}
.chip-restock{background:rgba(253,235,220,0.6);color:#63564b}
.chip-matched{background:#dcfce7;color:#166534}
.chip-unmatched{background:#fee2e2;color:#991b1b}
.chip-pending{background:#fef3c7;color:#92400e}
.chip-done{background:#dcfce7;color:#166534}

/* ── Product card checkbox (Stitch: rounded, glass) ── */
.product-card-checkbox{position:absolute;top:10px;left:10px;width:32px !important;height:32px !important;min-width:32px;min-height:32px;max-width:32px;max-height:32px;cursor:pointer;z-index:10;margin:0;padding:0;flex-shrink:0;-webkit-appearance:none;appearance:none;border:2px solid rgba(169,180,177,0.5) !important;border-radius:9999px !important;background:rgba(255,255,255,0.8) !important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:all .15s;box-sizing:border-box;color:transparent !important;--tw-ring-offset-width:0 !important;--tw-ring-color:transparent !important;box-shadow:none !important}
.product-card-checkbox:focus{outline:none !important;--tw-ring-color:transparent !important;box-shadow:none !important}
.product-card-checkbox:focus-visible{box-shadow:0 0 0 3px var(--primary-ct) !important}
.product-card-checkbox:checked{background:var(--primary) !important;border-color:var(--primary) !important;background-image:none !important}
.product-card-checkbox:checked::after{content:'✓';display:block;text-align:center;line-height:28px;font-size:18px;font-weight:700;color:#fff}

/* ── Shopee sticky bar (Stitch: dark glass pill) ── */
.shopee-sticky{position:fixed !important;bottom:32px;left:50%;transform:translateX(-50%);width:90%;max-width:900px;background:rgba(12,15,14,0.92) !important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:9999px;padding:16px 28px;display:flex !important;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 24px 64px rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.06);z-index:200;gap:16px;color:#fff;transition:border-radius .25s ease}
.shopee-sticky--expanded{border-radius:20px;padding:20px 28px}
.collage-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.3);z-index:998;pointer-events:auto}
.shopee-sticky--collage{z-index:999;bottom:5vh;height:80vh;max-height:80vh;min-height:0;border-radius:20px;padding:16px 24px;max-width:1020px!important;background:rgba(245,243,235,0.97)!important;color:#222!important;border-color:rgba(0,0,0,0.08)!important;overflow:hidden}
.shopee-sticky--collage .shopee-sticky-label,
.shopee-sticky--collage .shopee-sticky-mode-badge,
.shopee-sticky--collage .shopee-sticky-row2-info{color:rgba(17,24,39,.72)!important}
.shopee-sticky--collage .shopee-sticky-back,
.shopee-sticky--collage .shopee-sticky-close{background:rgba(0,0,0,.05);color:#4b5563}
.shopee-sticky--collage .shopee-sticky-back:hover,
.shopee-sticky--collage .shopee-sticky-close:hover{background:rgba(0,0,0,.1);color:#111827}
.shopee-sticky--collage .shopee-sticky-export--ghost{background:rgba(0,0,0,.06)!important;color:#374151}
.shopee-sticky-left{display:flex;align-items:center;gap:12px;font-size:14px;flex-shrink:0}
.shopee-sticky-count{width:40px;height:40px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff;flex-shrink:0;transition:background .2s}
.shopee-sticky-label{color:rgba(255,255,255,0.7);font-weight:600;font-size:13px}
.shopee-sticky-divider{width:1px;height:28px;background:rgba(255,255,255,0.1)}
.shopee-sticky-total{display:flex;flex-direction:column;gap:1px}
.shopee-sticky-total-label{font-size:11px;color:rgba(255,255,255,0.45);font-weight:600}
.shopee-sticky-total-value{font-size:14px;font-weight:700;color:#fff}
.shopee-sticky-right{display:flex;align-items:center;gap:10px}
.shopee-sticky-export{background:linear-gradient(135deg,#50625a,#44564e);color:#fff;border:none;border-radius:9999px;padding:11px 22px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s;white-space:nowrap;box-shadow:0 4px 12px rgba(80,98,90,0.3)}
.shopee-sticky-export:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(80,98,90,0.4)}
.shopee-sticky-export:disabled{opacity:.5;cursor:not-allowed;transform:none}
.shopee-sticky-export--ghost{background:rgba(255,255,255,0.08)!important;box-shadow:none!important;color:rgba(255,255,255,0.6)}
.shopee-sticky-export--ghost:hover{background:rgba(255,255,255,0.12)!important;color:#fff}
.shopee-sticky-close{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.06);border:none;color:rgba(255,255,255,0.6);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.shopee-sticky-close:hover{background:rgba(255,255,255,0.12);color:#fff}
.shopee-sticky-back{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.06);border:none;color:rgba(255,255,255,0.6);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.shopee-sticky-back:hover{background:rgba(255,255,255,0.12);color:#fff}
.shopee-sticky-mode-badge{font-size:12px;font-weight:600;color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.06);padding:6px 14px;border-radius:9999px}
.shopee-sticky-row2{width:100%;display:flex;align-items:center;gap:12px;padding-top:14px;margin-top:0;border-top:1px solid rgba(255,255,255,0.06)}
.shopee-sticky--collage .shopee-sticky-row2{border-top:1px solid rgba(0,0,0,.08);margin-top:6px;padding-top:10px}
.shopee-sticky-row2-label{font-size:12px;font-weight:600;color:rgba(255,255,255,0.5);flex-shrink:0}
.shopee-sticky-input{flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:10px 16px;font-size:13px;color:#fff;outline:none;transition:border-color .2s}
.shopee-sticky-input:focus{border-color:rgba(255,255,255,0.25)}
.shopee-sticky-input::placeholder{color:rgba(255,255,255,0.35)}
.shopee-sticky-row2-info{flex:1;font-size:12px;color:rgba(255,255,255,0.5)}
.shopee-sticky-row2-info strong{color:#fff;font-weight:700}
.shopee-sticky-spin{display:inline-block;animation:shopee-spin 1s linear infinite}
@keyframes shopee-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.shopee-progress{font-size:12px;color:rgba(255,255,255,0.6);font-weight:600}

/* ── Collage picker ── */
.collage-pick-grid{width:100%;align-content:start}
.collage-pick-grid--desktop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:10px 8px 2px;max-height:58vh;overflow-y:auto;align-items:stretch;grid-auto-rows:max-content}
.collage-pick-item{position:relative;cursor:pointer;border:2px solid rgba(156,163,175,.35);border-radius:14px;overflow:hidden;background:#f8f5ed;transition:all .15s ease;display:flex;flex-direction:column;min-width:0}
.collage-pick-item:hover{border-color:#93a19a;transform:translateY(-1px)}
.collage-pick-item.is-selected{border-color:#07c160;box-shadow:0 0 0 2px rgba(7,193,96,.18)}
.collage-pick-item.is-featured{border-color:#f59e0b;box-shadow:0 0 0 2px rgba(245,158,11,.24)}
.collage-pick-image{width:100%;aspect-ratio:1/1;object-fit:contain;object-position:center;display:block;background:#ece5d9;padding:8px}
.collage-pick-meta{padding:8px 10px;background:#fffdf8;border-top:1px solid rgba(0,0,0,.06);min-height:70px;display:flex;flex-direction:column;justify-content:space-between}
.collage-pick-name{font-size:12px;line-height:1.45;color:#1f2937;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.collage-pick-pid{margin-top:4px;font-size:10px;line-height:1.2;color:#6b7280;font-family:var(--font-mono)}
.collage-pick-check{position:absolute;top:8px;right:8px;background:#07c160;color:#fff;border-radius:999px;width:22px;height:22px;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.collage-more-btn{position:absolute;right:8px;bottom:82px;z-index:2;border:0;border-radius:999px;background:rgba(17,24,39,.86);color:#fff;font-size:11px;font-weight:700;line-height:1;padding:7px 9px;box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer}
.collage-more-btn:active{transform:translateY(1px)}
.collage-pick-mode-back{border:1px solid rgba(7,193,96,.35);border-radius:999px;background:#ecfdf3;color:#047a3a;font-size:11px;font-weight:700;padding:5px 8px;white-space:nowrap}
.collage-pick-mode-chip{display:inline-flex;align-items:center;max-width:180px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:999px;background:rgba(7,193,96,.12);color:#047a3a;font-size:11px;font-weight:700;padding:5px 8px}
.collage-layout-chip{display:inline-flex;align-items:center;border-radius:999px;background:rgba(107,114,128,.12);color:#374151;font-size:11px;font-weight:800;padding:5px 8px;white-space:nowrap}
.collage-layout-chip.is-featured{background:rgba(245,158,11,.18);color:#92400e}
.collage-pick-image-badge{position:absolute;left:8px;top:8px;z-index:2;border-radius:999px;background:rgba(255,255,255,.94);color:#374151;font-size:11px;font-weight:700;padding:4px 7px;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.collage-feature-badge{position:absolute;left:8px;top:36px;z-index:3;border-radius:999px;background:#f59e0b;color:#fff;font-size:11px;font-weight:800;padding:4px 7px;box-shadow:0 1px 6px rgba(146,64,14,.35)}
.collage-feature-btn{margin-top:6px;align-self:flex-start;border:1px solid rgba(245,158,11,.4);border-radius:999px;background:#fff7ed;color:#92400e;font-size:11px;font-weight:800;line-height:1;padding:6px 8px}
.collage-feature-btn.is-active{background:#f59e0b;border-color:#f59e0b;color:#fff}
.collage-pick-item--extra{border-style:dashed;background:#f3fbf6}
.collage-pick-empty{border:1px dashed rgba(107,114,128,.35);border-radius:12px;background:rgba(255,255,255,.72);color:#4b5563;font-size:13px;font-weight:700;text-align:center;padding:18px 12px}

/* ── Shopee Upload Progress Card ── */
.shopee-upload-card{position:fixed;bottom:16px;right:16px;width:280px;background:rgba(12,15,14,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.08);z-index:1000;overflow:hidden;transition:all .3s ease}
.shopee-upload-card.success{border-color:rgba(7,193,96,0.3)}
.shopee-upload-card.error{border-color:rgba(239,68,68,0.3)}
.shopee-upload-card.pending{border-color:rgba(245,158,11,0.45)}
.shopee-upload-card-header{display:flex;align-items:center;gap:8px;padding:12px 14px;cursor:pointer;user-select:none}
.shopee-upload-card-icon{display:flex;align-items:center;justify-content:center;width:20px;flex-shrink:0;font-size:14px}
.upload-card-spinner{width:14px;height:14px;border-width:2px;border-style:solid;border-color:var(--upload-spinner-color,#ee4d2d) transparent var(--upload-spinner-color,#ee4d2d) transparent}
.shopee-upload-card-title{font-size:13px;font-weight:600;color:#fff;white-space:nowrap}
.shopee-upload-card-btn{width:24px;height:24px;border-radius:50%;border:none;background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.6);cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:auto;flex-shrink:0;transition:all .15s}
.shopee-upload-card-btn:hover{background:rgba(255,255,255,0.12);color:#fff}
.shopee-upload-card-body{padding:0 14px 14px}
.shopee-upload-bar-wrap{width:100%;height:4px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden}
.shopee-upload-bar{height:100%;background:#ee4d2d;border-radius:2px;transition:width .5s ease}
.shopee-upload-card.success .shopee-upload-bar{background:#07c160}
.shopee-upload-card.error .shopee-upload-bar{background:#ef4444}
.shopee-upload-card.pending .shopee-upload-bar{background:#f59e0b}
.shopee-upload-meta{display:flex;align-items:center;font-size:11px;color:rgba(255,255,255,0.5);margin-top:6px}
.shopee-upload-name{font-size:11px;color:rgba(255,255,255,0.7);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shopee-upload-step{font-size:11px;color:rgba(255,255,255,0.45);margin-top:4px}
.shopee-upload-step.error-text{color:#ef4444}
.shopee-upload-downloads{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.1)}
.shopee-upload-dl-link{display:block;font-size:11px;color:#60a5fa;text-decoration:none;padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shopee-upload-dl-link:hover{color:#93c5fd;text-decoration:underline}
.inventory-upload-card{bottom:112px}
.accounting-upload-card{bottom:208px}
.m-cell-edit.is-locked{opacity:.55;cursor:not-allowed;background:var(--surface2)}
@media(max-width:640px){
  .shopee-upload-card{width:calc(100vw - 32px);right:16px;bottom:80px}
  .inventory-upload-card{bottom:176px}
  .accounting-upload-card{bottom:272px}
}

/* ── Shopee Header Indicator ── */
.shopee-popover-anchor{position:relative}
.shopee-header-btn{position:relative;width:40px;height:40px;padding:0;border-radius:50%;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}
.shopee-header-btn:hover{background:rgba(255,255,255,0.08);color:var(--text)}
.shopee-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;border:2px solid var(--bg)}
.shopee-dot.ok{background:#07c160}
.shopee-dot.expiring{background:#f0b429;animation:pulse-yellow 2s ease-in-out infinite}
.shopee-dot.expired{background:#ef4444;animation:pulse-red 2s ease-in-out infinite}
.shopee-dot-inline{width:10px;height:10px;border-radius:50%;flex-shrink:0;display:inline-block}
.shopee-dot-inline.ok{background:#07c160}
.shopee-dot-inline.expiring{background:#f0b429}
.shopee-dot-inline.expired{background:#ef4444}
@keyframes pulse-yellow{0%,100%{box-shadow:0 0 0 0 rgba(240,180,41,0.4)}50%{box-shadow:0 0 0 4px rgba(240,180,41,0)}}
@keyframes pulse-red{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.4)}50%{box-shadow:0 0 0 4px rgba(239,68,68,0)}}

/* ── Shopee Popover ── */
.shopee-popover{position:absolute;top:calc(100% + 8px);right:0;width:300px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);z-index:999;overflow:hidden}
.shopee-popover-banner{padding:10px 18px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px}
.shopee-popover-banner.yellow{background:rgba(240,180,41,0.08);color:#b07d00}
.shopee-popover-banner.red{background:rgba(159,64,61,0.08);color:var(--red)}
.shopee-popover-header{padding:14px 18px 10px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.shopee-popover-close{width:28px;height:28px;border-radius:50%;background:var(--surface3);border:none;color:var(--muted);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}
.shopee-popover-close:hover{background:var(--surface2);color:var(--text)}
.shopee-popover-status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.shopee-popover-status-dot.ok{background:#07c160}
.shopee-popover-status-dot.expiring{background:#f0b429}
.shopee-popover-status-dot.expired{background:#ef4444}
.shopee-popover-body{padding:14px 18px 18px}
.shopee-popover-countdown{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--surface2);border-radius:10px;margin-bottom:14px;font-size:12px;color:var(--text)}
.shopee-popover-countdown.ok{color:var(--green)}
.shopee-popover-textarea{width:100%;background:var(--surface3);border:1.5px solid var(--border);border-radius:10px;padding:10px 14px;font-size:12px;color:var(--text);resize:vertical;min-height:72px;font-family:monospace;outline:none}
.shopee-popover-textarea:focus{border-color:var(--primary)}
.shopee-popover-textarea::placeholder{color:var(--muted);opacity:.6}
.shopee-popover-btn{padding:9px 16px;border-radius:9999px;border:none;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
.shopee-popover-btn.primary{background:#07c160;color:#fff}
.shopee-popover-btn.primary:hover:not(:disabled){background:#06a653}
.shopee-popover-btn.primary:disabled{opacity:.5;cursor:not-allowed}
.shopee-popover-btn.ghost{background:var(--surface3);color:var(--muted)}
.shopee-popover-btn.ghost:hover:not(:disabled){background:var(--surface2);color:var(--text)}
.shopee-popover-btn.ghost:disabled{opacity:.4;cursor:not-allowed}
.shopee-popover-input{width:100%;background:var(--surface3);border:1.5px solid var(--primary);border-radius:10px;padding:9px 14px;font-size:13px;color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s;box-sizing:border-box}
.shopee-popover-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--primary-ct)}
.shopee-popover-input::placeholder{color:var(--muted);opacity:.7}
.shopee-popover-input:disabled{opacity:.5;cursor:not-allowed}
.shopee-advanced-details>summary{font-size:11px;color:var(--muted);cursor:pointer;list-style:none;display:flex;align-items:center;gap:4px}
.shopee-advanced-details>summary::before{content:'›';font-size:14px;transition:transform .15s;display:inline-block}
.shopee-advanced-details[open]>summary::before{transform:rotate(90deg)}
.shopee-advanced-details>summary:hover{color:var(--text)}
.shopee-step{display:flex;align-items:center;gap:12px}
.shopee-step-num{width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
@keyframes shopee-spin{to{transform:rotate(360deg)}}
.shopee-login-spinner{width:12px;height:12px;border:2px solid rgba(255,255,255,0.4);border-top-color:#fff;border-radius:50%;animation:shopee-spin .6s linear infinite;flex-shrink:0}

/* ── Shopee VNC Modal ── */
.shopee-vnc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px}
.shopee-vnc-modal{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);width:min(1060px,96vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.shopee-vnc-header{padding:14px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);flex-shrink:0}
.shopee-vnc-body{flex:1;min-height:0;position:relative;background:#1a1a1a}
.shopee-vnc-frame{width:100%;height:100%;min-height:600px;display:block}
.shopee-vnc-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--surface2)}
.shopee-vnc-footer{padding:10px 20px;font-size:11px;color:var(--muted);text-align:center;border-top:1px solid var(--border);flex-shrink:0}

/* ── Shopee Toast ── */
.shopee-toast{position:fixed;top:80px;right:24px;background:var(--surface2,#212d28);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:14px 20px;box-shadow:0 12px 36px rgba(0,0,0,0.4);display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;z-index:1000;max-width:360px;color:var(--text)}
.shopee-toast-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.shopee-toast-dot.expiring{background:#f0b429}
.shopee-toast-dot.expired{background:#ef4444}
.shopee-toast-action{background:#f0b429;color:#000;border:none;border-radius:9999px;padding:6px 14px;font-size:11px;font-weight:700;cursor:pointer;flex-shrink:0}
.toast-slide-enter-active{animation:toastSlideIn .3s ease-out}
.toast-slide-leave-active{animation:toastSlideIn .3s ease-out reverse}
@keyframes toastSlideIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── Plaza placeholder ── */
.plaza-placeholder{text-align:center;padding:80px 20px}
.plaza-placeholder .plaza-icon{font-size:64px;margin-bottom:16px}
.plaza-placeholder h2{font-size:20px;color:var(--muted);margin-bottom:8px;font-weight:700}
.plaza-placeholder p{font-size:14px;color:var(--muted)}

/* ── Sites ── */
.sites-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.sites-row:last-child{border-bottom:none}
.sites-config-grid{display:grid;grid-template-columns:120px 1fr;gap:6px;font-size:12px;align-items:center}

/* ── Site Chat Panel ── */
.site-chat-panel{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.site-chat-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;background:var(--surface)}
.chat-messages{max-height:400px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.chat-bubble{max-width:85%;padding:10px 14px;border-radius:2rem;font-size:13px;line-height:1.6;word-break:break-word}
.chat-ai{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px;color:var(--text)}
.chat-user{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:4px}
.chat-bubble-text code{font-family:var(--font-mono)}
.chat-config-preview{padding:10px 16px;border-top:1px solid var(--border);background:rgba(80,98,90,0.04)}
.chat-config-preview code{font-family:var(--font-mono);font-size:11px;color:var(--primary);background:var(--surface);padding:1px 6px;border-radius:9999px}
.chat-input-row{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border)}
.chat-actions{display:flex;gap:8px;padding:8px 16px}
.chat-test-results{padding:12px 16px;border-top:1px solid var(--border);background:rgba(80,98,90,0.04)}
.chat-test-grid{display:flex;flex-direction:column;gap:6px}
.chat-test-item{display:flex;align-items:center;gap:10px;padding:6px 8px;background:var(--surface);border-radius:16px;border:1px solid var(--border)}
.chat-confirm-bar{display:flex;gap:10px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--border);background:var(--surface)}

/* ── Rate bar collapse ── */
.rate-bar-mobile-header{display:none}
.rate-bar-body{display:none}
.rate-open .rate-bar-body{display:contents}

/* ── Bottom Nav（桌面隱藏）── */
.bottom-nav{display:none}

/* ── Sidebar（手機 drawer 用，桌面隱藏）── */
.sidebar{display:none}
.drawer-overlay{display:none}
.nav-item{display:flex;align-items:center;gap:10px;padding:11px 20px;font-size:13.5px;font-weight:500;color:var(--muted);cursor:pointer;border-left:2px solid transparent;transition:all .15s;user-select:none}
.nav-item:hover{color:var(--text);background:var(--surface2)}
.nav-item.active{color:var(--primary);border-left-color:var(--primary);background:var(--primary-ct)}
.nav-icon{font-size:16px;width:20px;text-align:center}
.nav-badge{margin-left:auto;background:var(--red);color:#fff;font-size:10px;padding:1px 6px;border-radius:10px;font-weight:700}
.nav-expand{margin-left:auto;font-size:11px;color:var(--muted)}
.nav-children{background:rgba(80,98,90,0.04)}
.nav-child{padding:8px 20px 8px 46px;font-size:13px}
.nav-divider{height:1px;background:var(--border);margin:12px 20px}

/* ── Search Lightbox (mobile overlay) ── */
.search-lightbox{display:none}

/* ── Shopee Mini Bar (above bottom-nav on mobile) ── */
.shopee-mini{display:none}

/* ══════ Mobile RWD (Stitch Design) ══════ */
@media(max-width:768px){
  /* Top Nav → Mobile header */
  .topnav{position:fixed;top:0}
  .topnav-inner{padding:0 16px;height:56px}
  .topnav-links{display:none}
  .topnav-logo{font-size:16px}
  .topnav-hamburger{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:transparent;border:none;font-size:20px;color:var(--text);cursor:pointer;border-radius:9999px}
  .topnav-hamburger:hover{background:var(--surface3)}

  /* Sub Nav */
  .subnav{position:fixed;top:56px}
  .subnav2{position:fixed;top:104px}
  .subnav-inner{padding:0 12px;gap:1px}
  .subnav2-inner{padding:0 12px;gap:1px}
  .subnav-item{padding:5px 10px;font-size:12px}
  .subnav2-item{padding:4px 9px;font-size:11px}

  /* Main Content */
  .main-content{padding:62px 16px 120px}
  .main-content.has-subnav{padding-top:106px}
  .main-content.has-subnav2{padding-top:150px}

  /* Page titles — smaller on mobile */
  h2.mobile-title{font-size:17px !important;line-height:1.3 !important}
  .mobile-subtitle{font-size:11px !important}
  .mobile-header-actions{display:none !important}

  /* Rate bar — compact 2-column on mobile */
  .rate-open .rate-bar{display:flex !important}
  .rate-bar{top:auto;position:relative;flex-direction:column;padding:0;gap:0;border-radius:12px;overflow:hidden;margin-bottom:12px}
  .rate-bar-mobile-header{display:none}
  .rate-bar-body{display:grid !important;grid-template-columns:1fr 1fr;align-items:center;gap:6px 10px;padding:12px;background:var(--surface);border-radius:12px;font-size:12px}
  .rate-bar-body > label{margin-left:0 !important;font-size:11px;color:var(--muted);white-space:nowrap;margin-bottom:-4px}
  .rate-bar-body > input.rate-input{width:100% !important;padding:5px 8px;font-size:12px;border-radius:8px}
  .rate-bar-body > button{font-size:11px;padding:6px 10px}
  .rate-bar-body > span.rate-badge{font-size:10px;grid-column:1/-1}
  .rate-bar-body > button:last-child{grid-column:1/-1}

  /* Other layout */
  .pricing-layout{grid-template-columns:1fr}
  .modal{padding:20px;border-radius:1.5rem}
  .stat-grid{grid-template-columns:repeat(5,1fr)!important;gap:4px}
  .stat-card{padding:6px 4px;border-radius:0.75rem;text-align:center}
  .stat-label{font-size:8px;margin-bottom:2px;letter-spacing:0}
  .stat-value{font-size:14px}

  /* Product grid → 2 cols mobile */
  .product-grid{grid-template-columns:repeat(2,1fr);gap:10px;width:100%}
  .product-card{border-radius:1.25rem}
  .product-card-info{padding:10px}
  .product-name{font-size:12px;font-weight:700;height:32px;margin-bottom:6px}
  .product-twd{font-size:13px;font-weight:700}
  .product-price{font-size:10px}
  .product-price-label{font-size:9px}
  .product-twd-label{font-size:8px}
  .product-weight-row{padding:6px;gap:4px;border-radius:8px;margin-bottom:8px}
  .product-weight-label{font-size:9px}
  .product-weight-state{font-size:9px}
  .product-weight-select{font-size:10px;padding:4px 6px}
  .product-weight-value{font-size:10px}

  /* Shopee sticky → hidden on mobile (replaced by mini bar) */
  .shopee-sticky{display:none !important}

  /* Shopee Mini Bar — slim bar above bottom-nav */
  .shopee-mini{display:flex;position:fixed;bottom:80px;left:16px;right:16px;z-index:99;background:rgba(12,15,14,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:9999px;padding:8px 16px;align-items:center;justify-content:space-between;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,0.2)}
  .shopee-mini-left{display:flex;align-items:center;gap:8px;color:#fff;font-size:13px;font-weight:600}
  .shopee-mini-count{width:28px;height:28px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0}
  .shopee-mini-btn{background:linear-gradient(135deg,#50625a,#44564e);color:#fff;border:none;border-radius:9999px;padding:8px 16px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 4px 12px rgba(80,98,90,0.3)}
  .shopee-mini-btn:active{transform:scale(0.95)}
  .shopee-mini-close{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.1);border:none;color:rgba(255,255,255,0.7);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .shopee-mini--collage{z-index:1001;top:72px!important;bottom:calc(env(safe-area-inset-bottom, 0px) + 82px)!important;left:10px!important;right:10px!important;background:rgba(245,243,235,0.98)!important;border-radius:20px!important;padding:12px 14px!important;max-height:none!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;border:1px solid rgba(0,0,0,0.08);overflow:hidden;box-sizing:border-box}
  .shopee-mini--collage > div:first-child{flex:0 0 auto;flex-wrap:wrap;row-gap:6px;color:#1f2937}
  .shopee-mini--collage .shopee-mini-btn{box-shadow:none}
  .shopee-mini--collage .shopee-mini-close{background:rgba(0,0,0,0.08);color:#374151}
  .collage-pick-grid--mobile{display:grid;grid-template-columns:1fr;gap:8px;width:100%;padding:8px 2px 2px;flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .collage-pick-grid--mobile .collage-pick-item{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:104px;align-items:stretch;height:104px;min-height:104px}
  .collage-pick-grid--mobile .collage-pick-image{width:104px!important;min-width:104px;max-width:104px;height:104px!important;min-height:104px;max-height:104px;aspect-ratio:1/1;object-fit:contain;object-position:center;padding:6px;background:#ece5d9;box-sizing:border-box}
  .collage-pick-grid--mobile .collage-pick-meta{border-top:none;border-left:1px solid rgba(0,0,0,0.06)}
  .collage-pick-grid--mobile .collage-pick-name{font-size:12px;min-height:32px}
  .collage-pick-grid--mobile .collage-more-btn{right:auto;left:22px;bottom:8px;max-width:76px}
  .collage-pick-grid--mobile .collage-pick-image-badge{top:8px;left:8px;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .collage-pick-grid--mobile .collage-feature-badge{top:34px;left:8px;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .collage-pick-grid--mobile .collage-feature-btn{padding:6px 7px}
  .shopee-mini--collage .collage-pick-mode-chip{max-width:148px}

  /* Search lightbox — fullscreen overlay */
  .search-lightbox{position:fixed;inset:0;z-index:300;background:rgba(248,250,248,0.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:20px 16px;display:flex;flex-direction:column;gap:12px}
  .search-lightbox.hidden{display:none}
  .search-lightbox-header{display:flex;align-items:center;gap:12px}
  .search-lightbox-header .search-input{flex:1;border-radius:9999px;padding:12px 16px;font-size:16px;background:var(--surface3);border:none}
  .search-lightbox-header .search-input:focus{background:#fff;box-shadow:var(--shadow-md)}
  .search-lightbox-close{width:36px;height:36px;border-radius:9999px;background:var(--surface3);border:none;color:var(--muted);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .search-lightbox-actions{display:flex;gap:8px;flex-wrap:wrap}

  /* Search bar hidden on mobile (use lightbox instead) */
  .search-bar{display:none}

  /* Table → hidden on mobile, show cards instead */
  .table-wrap{display:none}
  .mobile-cards{display:flex;flex-direction:column;gap:10px}
  .m-card{background:var(--surface);border:1px solid var(--border);border-radius:1rem;padding:12px;box-shadow:var(--shadow-sm)}
  .m-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px}
  .m-card-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.4;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .m-card-badge{flex-shrink:0}
  .m-card-grid{display:flex;flex-wrap:wrap;gap:2px 16px;font-size:12px;margin-bottom:8px}
  .m-card-grid > div{display:flex;align-items:baseline;gap:4px}
  .m-card-grid-2col{display:flex;flex-wrap:nowrap;gap:0;font-size:12px;margin-bottom:8px;justify-content:space-between}
  .m-card-grid-2col > div{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
  .m-card-label{color:var(--muted);font-size:10px;font-weight:600}
  .m-card-value{font-weight:700;font-size:13px}
  .m-cell-edit{font-weight:700;font-size:13px;width:62px;min-width:40px}
  .m-card-grid-2col .m-cell-edit{width:56px}
  .m-card-grid-2col .m-card-value{font-size:13px}
  .m-card-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:3px 0}
  .m-card-actions{display:flex;gap:6px;align-items:center;padding-top:8px;border-top:1px solid var(--border)}
  .m-card-sku{font-size:11px;color:var(--muted);margin-bottom:6px}
  .m-card-thumb{width:48px;height:48px;border-radius:6px;object-fit:cover;flex-shrink:0;border:1px solid var(--border)}
  .m-card.unmatched{border-left:3px solid var(--red)}
  .m-card.low-stock{border-left:3px solid var(--orange)}
  .m-card.out-stock{border-left:3px solid var(--red)}

  /* Sidebar → Drawer (Stitch style) */
  .sidebar{display:block;position:fixed;top:0;left:-300px;width:280px;height:100vh;z-index:250;overflow-y:auto;padding:24px 0;border-right:none;background:var(--surface);box-shadow:none;transition:left .3s cubic-bezier(.4,0,.2,1),box-shadow .3s;border-radius:0 2rem 2rem 0}
  .sidebar.drawer-open{left:0;box-shadow:8px 0 32px rgba(43,52,50,0.2)}
  .drawer-overlay{display:block;position:fixed;inset:0;background:rgba(43,52,50,0.4);z-index:200;backdrop-filter:blur(2px);animation:fadeIn .2s ease}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}

  /* Bottom Navigation — Stitch rounded glass */
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:100;justify-content:space-around;align-items:center;padding:4px 12px calc(env(safe-area-inset-bottom, 12px) + 4px);border-top:1px solid rgba(155,168,184,0.1);border-radius:40px 40px 0 0;background:rgba(255,255,255,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 -4px 20px rgba(0,0,0,0.05)}
  .bottom-nav-item{flex:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 12px;cursor:pointer;font-size:10px;font-weight:600;color:var(--nav-inactive);border-radius:9999px;transition:all .2s}
  .bottom-nav-item.active{color:var(--brand);background:rgba(143,163,153,0.1)}
  .bottom-nav-icon{font-size:26px;line-height:1}
}

/* ── Focus-visible (A11y) ── */
.btn:focus-visible,.subnav-item:focus-visible,.page-btn:focus-visible,.filter-pill:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.search-input:focus-visible,.rate-input:focus-visible,.form-input:focus-visible{outline:2px solid var(--primary);outline-offset:1px}

/* ── Form validation ── */
.form-input--error{border-color:var(--red) !important;background:rgba(159,64,61,0.06) !important}
.form-error{font-size:11px;color:var(--red);margin-top:4px}

/* ── Button variants ── */
.btn-shopee{background:#ee4d2d;color:#fff;border:none}
.btn-shopee:hover{background:#d73211}
.btn-shopee:disabled{background:#ccc;color:#999;cursor:not-allowed}
.btn-wechat{background:#07c160;color:#fff;border:none}
.btn-wechat:hover{background:#06a452}
.btn-wechat:disabled{background:#ccc;color:#999;cursor:not-allowed}
.btn-ghost:disabled{opacity:.5;cursor:not-allowed}

/* ── Toast notification ── */
.toast-container{position:fixed;bottom:40px;left:50%;transform:translateX(-50%);z-index:10000;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{pointer-events:auto;padding:12px 24px;border-radius:var(--radius-pill);font-size:13px;font-weight:600;color:#fff;box-shadow:0 8px 32px rgba(0,0,0,0.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:toast-in .3s ease;max-width:90vw;text-align:center}
.toast--success{background:rgba(46,158,107,0.92)}
.toast--error{background:rgba(159,64,61,0.92)}
.toast--warning{background:rgba(194,118,0,0.92)}
.toast--info{background:rgba(80,98,90,0.92)}
@keyframes toast-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes toast-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(16px)}}

/* ── Contrast fix ── */
.shopee-sticky-total-label{color:rgba(255,255,255,0.7) !important}