@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+Lao:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #222333;
  --muted: #77798c;
  --subtle: #a0a1ae;
  --line: #e9e8ef;
  --surface: #fff;
  --bg: #f6f6f3;
  --purple: #665df2;
  --purple-dark: #5148df;
  --purple-soft: #f0efff;
  --acid: #c7ed61;
  --green: #168568;
  --red: #c34f62;
  --blue: #5968df;
  --shadow: 0 10px 32px rgba(38, 35, 70, .055);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { min-height: 100vh; margin: 0; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
body.nav-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .brand-wordmark { font-family: 'DM Sans', 'Noto Sans Thai', sans-serif; }
h1 { margin-bottom: 9px; color: var(--ink); font-size: clamp(27px, 2.6vw, 36px); font-weight: 750; letter-spacing: -.025em; line-height: 1.38; }
h2 { margin-bottom: 12px; color: var(--ink); font-size: 18px; font-weight: 750; letter-spacing: -.015em; line-height: 1.5; }
h3 { margin-bottom: 8px; color: var(--ink); font-size: 15px; font-weight: 750; }
::selection { color: #26233e; background: #e2dfff; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.eyebrow { color: var(--purple); font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.highlight { color: var(--green); font-weight: 800; }
.danger-text { color: var(--red); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Workspace frame */
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; display: flex; width: 266px; flex-direction: column; overflow: hidden auto; padding: 25px 17px 16px; border-right: 1px solid #292838; background: #1d1c29; color: #e9e8f4; transition: transform .28s cubic-bezier(.2,.75,.25,1), box-shadow .28s; }
.sidebar::before { position: absolute; z-index: -1; right: -135px; bottom: 87px; width: 290px; height: 290px; border: 1px solid rgba(198,193,255,.09); border-radius: 50%; box-shadow: 0 0 0 36px rgba(198,193,255,.025), 0 0 0 78px rgba(198,193,255,.02); content: ''; pointer-events: none; }
.brand-mark { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 0 7px 25px; }
.brand-icon { position: relative; display: grid; width: 43px; height: 43px; flex: none; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 15px; background: linear-gradient(145deg,#8c80ff,#5c51e8); color: #fff; font-size: 22px; font-weight: 800; box-shadow: 0 8px 23px rgba(93,81,232,.24); }
.brand-icon::after { position: absolute; right: 6px; bottom: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 3px rgba(199,237,97,.15); content: ''; }
.brand-wordmark { min-width: 0; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: -.025em; line-height: 1.25; }
.brand-wordmark small { display: block; margin-top: 5px; color: #a7a5b8; font: 500 10px 'Noto Sans Thai','DM Sans',sans-serif; letter-spacing: 0; }
.sidebar-caption { display: flex; align-items: center; gap: 10px; margin: 0 3px 20px; padding: 12px; border: 1px solid rgba(222,218,255,.1); border-radius: 13px; background: rgba(255,255,255,.045); color: #b2b0c2; font-size: 10px; line-height: 1.45; }
.sidebar-caption-mark { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border: 1px solid rgba(164,154,255,.22); border-radius: 11px; background: rgba(114,99,239,.18); color: #b7adff; font: 700 10px 'DM Sans',sans-serif; }
.sidebar-caption > span:last-child { display: grid; gap: 2px; }
.sidebar-caption-label { color: #858396; font: 700 8px 'DM Sans',sans-serif; letter-spacing: .14em; }
.sidebar-caption strong { color: #f6f5fa; font-size: 11px; }
.app-nav { display: grid; align-content: start; gap: 14px; min-height: 0; overflow: auto; padding: 0 1px 16px; scrollbar-color: #4c4a5c transparent; scrollbar-width: thin; }
.nav-group { display: grid; gap: 3px; }
.nav-caption { display: flex; align-items: center; justify-content: space-between; margin: 1px 0 5px; padding: 4px 11px; color: #858396; font-size: 9px; font-weight: 750; letter-spacing: .09em; }
.nav-caption span { width: 21px; height: 1px; background: rgba(222,218,255,.14); }
.nav-link { position: relative; display: flex; min-height: 43px; align-items: center; gap: 12px; overflow: hidden; padding: 8px 11px; border: 1px solid transparent; border-radius: 11px; color: #b1afc0; font-size: 12px; font-weight: 550; transition: color .17s,background .17s,border-color .17s,transform .17s; }
.nav-link:hover { transform: translateX(2px); border-color: rgba(220,216,255,.08); background: rgba(255,255,255,.055); color: #fff; }
.nav-link.active { border-color: rgba(171,162,255,.16); background: linear-gradient(100deg,rgba(114,99,239,.27),rgba(114,99,239,.11)); color: #fff; font-weight: 700; }
.nav-link.active::before { position: absolute; top: 9px; bottom: 9px; left: 0; width: 3px; border-radius: 0 5px 5px 0; background: var(--acid); content: ''; }
.nav-icon { display: grid; width: 22px; height: 22px; flex: none; place-items: center; color: #9290a5; }
.nav-icon-svg { display: block; width: 19px; height: 19px; }
.nav-link.active .nav-icon { color: #c9c3ff; }
.nav-link-label { min-width: 0; flex: 1; }
.nav-link-indicator { color: var(--acid); font: 700 12px 'DM Sans',sans-serif; opacity: .85; }
.side-user { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 2px 0; border-top: 1px solid rgba(223,220,245,.13); }
.avatar { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border: 1px solid rgba(180,171,255,.2); border-radius: 12px; background: rgba(130,116,249,.17); color: #c9c3ff; font-size: 13px; font-weight: 800; }
.side-user > div:nth-child(2) { min-width: 0; }
.side-user strong { display: block; max-width: 126px; overflow: hidden; color: #f7f6fa; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.side-user span { color: #a6a4b5; font-size: 9px; }
.side-user form { margin-left: auto; }
.sidebar-scrim { display: none; }
.main-area { min-height: 100vh; margin-left: 266px; }
.topbar { position: sticky; z-index: 20; top: 0; display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(22px,3.3vw,52px); border-bottom: 1px solid rgba(231,230,237,.9); background: rgba(255,255,255,.84); box-shadow: 0 5px 22px rgba(32,30,58,.025); backdrop-filter: blur(18px); }
.topbar-context { display: grid; min-width: 0; gap: 1px; }
.topbar-overline { color: #9897a6; font: 800 8px 'DM Sans',sans-serif; letter-spacing: .15em; }
.topbar-overline i { margin: 0 4px; color: #c5c2d0; font-style: normal; }
.breadcrumb { display: flex; min-width: 0; align-items: center; gap: 8px; color: #9594a3; font-size: 10px; font-weight: 550; }
.breadcrumb-root { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb-divider { color: #b9b7c4; font-size: 16px; }
.breadcrumb strong { overflow: hidden; color: #28283a; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.topbar-right { display: flex; flex: none; align-items: center; gap: 15px; }
.workspace-status { display: inline-flex; align-items: center; gap: 8px; color: #747688; font-size: 10px; font-weight: 650; white-space: nowrap; }
.workspace-status-dot,.overview-live-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #22aa82; box-shadow: 0 0 0 4px #e4f6ef; }
.topbar-separator { width: 1px; height: 29px; background: #e9e8ee; }
.topbar-account { display: flex; align-items: center; gap: 9px; }
.topbar-account-avatar { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border: 1px solid #e4e0fb; border-radius: 12px; background: linear-gradient(145deg,#f2efff,#ebe9ff); color: #5c54d9; font-size: 12px; font-weight: 800; }
.topbar-account-copy { display: grid; gap: 1px; }
.topbar-account-copy strong { max-width: 170px; overflow: hidden; color: #2e2d40; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-account-copy small { color: #9291a0; font-size: 9px; }
.nav-toggle { display: none; }
.content { width: min(100%, 1640px); margin-inline: auto; padding: 34px clamp(22px,3.3vw,52px) 58px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 26px; }
.page-head-copy { min-width: 0; }
.page-head .eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: #7770e9; }
.page-head-marker { width: 7px; height: 7px; border-radius: 2px; background: #766ef1; box-shadow: 0 0 0 4px #efedff; transform: rotate(45deg); }
.page-head h1 { margin-bottom: 4px; color: #232337; }
.page-head p { max-width: 740px; margin: 0; color: #858596; font-size: 12px; }
.page-head-actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 9px; }
.grid { display: grid; gap: 16px; }
.stats { grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 20px; }
.stats-fees { grid-template-columns: repeat(3,minmax(0,1fr)); }
.two-col { grid-template-columns: minmax(0,1.25fr) minmax(270px,.75fr); align-items: start; }
.three-col { grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; }

/* Shared surfaces and data cards */
.card,.stat-card { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.card { min-width: 0; margin-bottom: 16px; padding: 23px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 19px; }
.card-head h2,.card-head h3 { margin: 0; color: #29283c; font-size: 16px; letter-spacing: -.01em; }
.card-head p { margin: 4px 0 0; color: #9291a0; font-size: 10px; }
.stat-card { position: relative; min-height: 126px; overflow: hidden; padding: 17px 19px; transition: transform .2s,border-color .2s,box-shadow .2s; }
.stat-card:hover { transform: translateY(-3px); border-color: #d8d4fb; box-shadow: 0 14px 30px rgba(56,49,118,.1); }
.stat-card::after { position: absolute; top: -30px; right: -21px; width: 94px; height: 94px; border-radius: 50%; background: var(--stat-tint,#f0efff); content: ''; opacity: .75; transition: transform .3s; }
.stat-card:hover::after { transform: scale(1.17); }
.stat-card-top,.stat-value,.stat-note { position: relative; z-index: 1; }
.stat-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.stat-label { color: #77788b; font-size: 10px; font-weight: 650; }
.stat-symbol { display: grid; width: 25px; height: 25px; flex: none; place-items: center; border: 1px solid rgba(112,100,227,.13); border-radius: 8px; background: rgba(255,255,255,.75); color: #766cf0; font: 700 12px 'DM Sans',sans-serif; }
.stat-value { margin: 5px 0 3px; color: #25253a; font: 750 28px 'DM Sans','Noto Sans Thai',sans-serif; letter-spacing: -.04em; line-height: 1.35; overflow-wrap: anywhere; }
.stat-note { display: flex; align-items: center; gap: 7px; color: #9595a3; font-size: 9px; }
.stat-note-dot { width: 5px; height: 5px; flex: none; border-radius: 50%; background: #aaa5c9; }
.stat-card.tint-neutral { --stat-tint:#efefff; }.stat-card.tint-blue { --stat-tint:#e7f0ff; }.stat-card.tint-green { --stat-tint:#e4f6ef; }.stat-card.tint-gold { --stat-tint:#fbf1db; }.stat-card.tint-red { --stat-tint:#fde9ed; }
.stat-card.tint-blue .stat-symbol { color:#5474de; }.stat-card.tint-green .stat-symbol { color:#168568; }.stat-card.tint-gold .stat-symbol { color:#b98729; }.stat-card.tint-red .stat-symbol { color:#c34f62; }

/* Forms and controls */
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.form-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.field { display: grid; min-width: 0; align-content: start; gap: 7px; }
.field.full { grid-column: 1/-1; }
.field label,.field-label { color: #48475a; font-size: 11px; font-weight: 700; }
.field label .req { color: var(--red); }
input,select,textarea { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #e3e2e9; border-radius: 10px; outline: none; background: #fff; color: #2a293c; transition: border-color .18s,box-shadow .18s,background .18s; }
input::placeholder,textarea::placeholder { color: #aaa9b6; }
input:hover,select:hover,textarea:hover { border-color: #cfccdf; }
input:focus,select:focus,textarea:focus { border-color: #8d84f7; box-shadow: 0 0 0 3px rgba(102,93,242,.13); }
input[type=checkbox],input[type=radio] { width: 17px; min-height: 17px; height: 17px; padding: 0; accent-color: var(--purple); vertical-align: middle; }
.checkline { display: flex; align-items: center; gap: 9px; color: #5d5c6e; font-size: 11px; }
.checkline input { width: 16px; height: 16px; flex: none; }
textarea { min-height: 104px; resize: vertical; }
.help { color: #90909f; font-size: 10px; line-height: 1.65; }
input[type=file] { min-height: auto; padding: 7px; color: #77778a; font-size: 10px; }
input[type=file]::file-selector-button { margin-right: 9px; padding: 7px 10px; border: 1px solid #e4e1fa; border-radius: 7px; background: #f4f2ff; color: #5850cc; font: 650 10px 'Noto Sans Thai','DM Sans',sans-serif; cursor: pointer; }
input[type=color] { min-height: 42px; padding: 5px; }
input:disabled,select:disabled,textarea:disabled { background: #f5f5f7; color: #a09fac; cursor: not-allowed; }

/* Actions */
.btn { position: relative; isolation: isolate; display: inline-flex; min-height: 41px; align-items: center; justify-content: center; gap: 8px; overflow: hidden; padding: 9px 15px; border: 1px solid transparent; border-radius: 10px; background: #665df2; color: #fff; font-size: 11px; font-weight: 750; cursor: pointer; box-shadow: 0 5px 12px rgba(102,93,242,.16); transition: transform .16s,background .16s,box-shadow .16s,border-color .16s,color .16s; }
.btn::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(110deg,transparent 16%,rgba(255,255,255,.19) 50%,transparent 84%); content: ''; transform: translateX(-120%); transition: transform .4s; }
.btn:hover { transform: translateY(-1px); background: #554be4; box-shadow: 0 8px 18px rgba(102,93,242,.21); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: scale(.985); }
.btn:disabled { transform: none; opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn.secondary { border-color: #e4e3ec; background: #fff; color: #514f65; box-shadow: none; }
.btn.secondary:hover { border-color: #d7d2fa; background: #f8f7ff; color: #554be4; }
.btn.gold { background: #6058e8; color: #fff; box-shadow: 0 7px 17px rgba(96,88,232,.22); }
.btn.gold:hover { background: #4f47d8; box-shadow: 0 10px 22px rgba(96,88,232,.27); }
.btn.danger { border-color: #f1d7dd; background: #fff; color: #bc4c60; box-shadow: none; }
.btn.danger:hover { border-color: #edc3cc; background: #fff5f6; color: #a7354c; }
.btn.success { border-color: #2a8d5d; background: #2e9c67; color: #fff; box-shadow: 0 7px 17px rgba(36,133,86,.22); }
.btn.success:hover { border-color: #24794f; background: #288f5e; color: #fff; box-shadow: 0 10px 22px rgba(36,133,86,.27); }
.btn.small { min-height: 32px; padding: 6px 10px; border-radius: 8px; font-size: 10px; }
.btn.linklike { min-height: 26px; padding: 3px 5px; border: 0; background: transparent; color: #5a53d6; box-shadow: none; }
.btn.linklike:hover { background: #f1efff; box-shadow: none; }
.btn:focus-visible,.nav-link:focus-visible,.pill-tabs a:focus-visible,.nav-toggle:focus-visible,.website-studio-nav a:focus-visible { outline: 3px solid rgba(102,93,242,.42); outline-offset: 3px; }
.actions,.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.form-actions { margin-top: 17px; }
form { min-width: 0; }

/* Data tables and status */
.table-wrap { overflow: auto; margin: 0 -4px; border: 1px solid #ecebf1; border-radius: 11px; background: #fff; scrollbar-color: #d4d0e7 transparent; scrollbar-width: thin; }
.table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; }
.table th { padding: 12px 13px; border-bottom: 1px solid #ebeaf0; background: #f9f9fb; color: #858495; font-size: 9px; font-weight: 750; letter-spacing: .025em; text-align: left; white-space: nowrap; }
.table td { padding: 13px; border-bottom: 1px solid #f0eff4; color: #5b5a6c; font-size: 11px; vertical-align: middle; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: #faf9ff; }
.table tr:last-child td { border-bottom: 0; }
.table td strong { color: #343348; }
.table .nowrap { white-space: nowrap; }
.table form { display: inline; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid transparent; border-radius: 999px; background: #f1f0f5; color: #6d6c7b; font-size: 9px; font-weight: 750; line-height: 1.35; white-space: nowrap; }
.badge-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; opacity: .76; }
.badge.success { border-color: #d4eee4; background: #eaf7f1; color: #19805f; }
.badge.danger { border-color: #f2dce0; background: #fff0f2; color: #b8475b; }
.badge.info { border-color: #dce3ff; background: #eff1ff; color: #5968cb; }
.badge.warning { border-color: #f1e7c8; background: #fff8e8; color: #9a7622; }
.badge.neutral { border-color: #ebeaf0; background: #f5f5f7; color: #777687; }
.alert { margin-bottom: 14px; padding: 12px 15px; border: 1px solid transparent; border-radius: 11px; font-size: 11px; }
.alert.success { border-color: #d2eee1; background: #edf9f3; color: #167451; }
.alert.error { border-color: #f0d7dc; background: #fff1f3; color: #ae3e53; }
.alert.info { border-color: #dce5fa; background: #f1f5ff; color: #45638e; }
.alert.warning { border-color: #f0e3bf; background: #fff8e7; color: #886919; }
.empty { padding: 42px 17px; color: #868596; font-size: 12px; text-align: center; }
.empty .empty-icon { display: grid; width: 50px; height: 50px; place-items: center; margin: 0 auto 12px; border: 1px solid #e7e3fb; border-radius: 15px; background: #f3f1ff; color: #7066e8; font-size: 22px; }
.pill-tabs { display: flex; width: fit-content; max-width: 100%; overflow: auto; gap: 4px; margin-bottom: 17px; padding: 5px; border: 1px solid #e9e8ef; border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(38,35,70,.035); }
.pill-tabs a { padding: 8px 13px; border-radius: 8px; color: #777687; font-size: 10px; font-weight: 700; white-space: nowrap; transition: background .17s,color .17s,transform .17s; }
.pill-tabs a:hover { transform: translateY(-1px); background: #f7f6fc; color: #504b82; }
.pill-tabs a.active { background: #262532; color: #fff; box-shadow: 0 3px 8px rgba(38,37,50,.15); }

/* Common operational modules */
.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 14px; }
.toolbar .field { min-width: 170px; }
.product-row { display: grid; grid-template-columns: minmax(170px,2fr) 95px minmax(130px,1fr) 40px; align-items: end; gap: 10px; margin-bottom: 10px; padding: 12px; border: 1px solid #eeedf2; border-radius: 12px; background: #fbfbfc; }
.product-row .field { gap: 5px; }
.product-row .field label { font-size: 10px; }
.remove-row { width: 40px; height: 40px; padding: 0; font-size: 18px !important; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(205px,1fr)); gap: 12px; }
.category-card { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 11px; border: 1px solid #ece9f5; border-radius: 14px; background: #fbfbfe; color: inherit; transition: transform .18s,border-color .18s,box-shadow .18s,background .18s; }
.category-card:hover { border-color: #d8d4fb; background: #fff; box-shadow: 0 10px 24px rgba(56,49,118,.08); transform: translateY(-2px); }
.category-thumb { display: block; width: 56px; height: 56px; flex: none; overflow: hidden; border-radius: 12px; background: #f0eeff; object-fit: cover; }
.category-thumb-fallback { display: grid; place-items: center; color: #6f66e8; font-size: 19px; font-weight: 800; }
.category-card-body { display: grid; min-width: 0; gap: 2px; }
.category-card-body strong { overflow: hidden; color: #363549; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.category-card-body small { color: var(--muted); font-size: 9px; }
.category-card-arrow { margin-left: auto; color: #8b87a3; font-size: 14px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(235px,1fr)); gap: 12px; }
.product-card { display: grid; min-width: 0; grid-template-columns: 70px minmax(0,1fr); align-items: start; gap: 12px; padding: 13px; border: 1px solid #ece9f5; border-radius: 14px; background: #fbfbfe; }
.product-thumb { display: block; width: 70px; height: 70px; overflow: hidden; border-radius: 12px; background: #f2f0ff; object-fit: cover; }
.product-thumb-fallback { display: grid; place-items: center; color: #7a71e8; font-size: 22px; }
.product-card-body { display: grid; min-width: 0; gap: 6px; }
.product-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.product-card-head h3 { margin: 0; font-size: 13px; line-height: 1.45; }
.product-card-head .badge { flex: none; }
.product-card-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--muted); font-size: 10px; }
.product-card-stock { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px dashed #e9e6f1; color: var(--muted); font-size: 10px; }
.product-card-stock strong { color: var(--ink); font-size: 13px; }
.variant-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.variant-chip { padding: 2px 8px; border: 1px solid #e3dfff; border-radius: 999px; background: #f4f2ff; color: #5f57c9; font-size: 9px; font-weight: 600; }
.product-card-muted { color: var(--subtle); font-size: 9px; }
.stock-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--muted); font-size: 11px; }
.stock-breadcrumb .btn { padding: 0; }
.stock-breadcrumb-current { color: var(--ink); font-weight: 700; }
.warehouse-new-pill { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #eef0ff; color: #5b52d8; font-size: 9px; font-weight: 800; white-space: nowrap; }
.warehouse-new-pill::before { width: 5px; height: 5px; border-radius: 50%; background: #7066e8; content: ""; }
.warehouse-notice-item { align-items: flex-start; }
.warehouse-notice-copy { display: grid; min-width: 0; gap: 4px; }
.warehouse-notice-copy p { margin: 0; }
.warehouse-notice-category { color: var(--muted); font-size: 10px; }
.warehouse-notice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.warehouse-notice-actions .btn { padding: 0; }
.category-card.has-new { border-color: #dcd6ff; background: #fdfcff; }
.warehouse-category-new { display: inline-flex; width: fit-content; align-items: center; gap: 4px; margin-top: 2px; padding: 2px 6px; border-radius: 999px; background: #f0efff; color: #5b52d8; font-size: 8px; font-weight: 800; }
.warehouse-category-new > span { font-size: 6px; }
.warehouse-product-grid { grid-template-columns: repeat(auto-fill,minmax(315px,1fr)); }
.warehouse-product-card { grid-template-columns: 84px minmax(0,1fr); }
.warehouse-product-card .product-thumb { width: 84px; height: 84px; }
.product-card-badges { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; }
.warehouse-color-panel { display: grid; gap: 6px; margin-top: 2px; padding-top: 8px; border-top: 1px solid #efedf6; }
.warehouse-color-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; }
.warehouse-color-head strong { color: #4b4860; font-size: 9.5px; }
.warehouse-color-row { display: grid; grid-template-columns: minmax(0,1fr) 72px 34px; align-items: center; gap: 6px; padding: 6px 7px; border: 1px solid #eeecf4; border-radius: 9px; background: #fff; }
.warehouse-color-name { display: grid; min-width: 0; gap: 1px; }
.warehouse-color-name b { overflow: hidden; color: #4b4860; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.warehouse-color-name small { color: var(--muted); font-size: 9px; }
.warehouse-color-row input { width: 100%; min-height: 30px; padding: 4px 6px; border: 1px solid #e7e4f0; border-radius: 7px; font-size: 10px; text-align: right; }
.warehouse-color-row .btn { min-height: 30px; padding: 0 6px; font-size: 14px !important; }
.variant-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 17px 0 9px; }
.variant-editor-head p { margin: 2px 0 0; }
.variant-editor { display: grid; gap: 8px; }
.variant-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 38px; align-items: end; gap: 8px; padding: 10px; border: 1px solid #eeecf4; border-radius: 12px; background: #fbfbfd; }
.variant-remove { display: grid; min-height: 38px; place-items: center; padding: 0; font-size: 16px !important; }
.orders-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.orders-bulk-bar .help { margin: 0; }
.order-select-cell { width: 38px; }
.order-index-cell { width: 54px; white-space: nowrap; }
.order-index-value { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 7px; background: #f3f1fb; color: #625b7a; font-size: 9.5px; font-weight: 800; }
.brand-orders-table tbody tr:has([data-order-checkbox]:checked) { background: #fbfaff; }
.order-studio { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,360px); align-items: start; gap: 16px; }
.order-studio-main { display: grid; min-width: 0; gap: 16px; }
.order-studio-main .card { margin-bottom: 0; }
.order-studio-side { position: sticky; top: 16px; min-width: 0; }
.order-form-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px 12px; }
.order-form-grid .field { gap: 5px; }
.order-form-grid input,.order-form-grid select { min-height: 38px; padding: 7px 10px; font-size: 11px; }
.order-picker-card { padding-bottom: 18px; }
.order-picker-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 12px; }
.order-search { flex: 1 1 220px; min-width: 0; }
.order-search input { min-height: 36px; padding: 7px 11px; font-size: 11px; }
.order-category-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.order-category-chip { min-height: 28px; padding: 4px 10px; border: 1px solid #e7e4f2; border-radius: 999px; background: #fff; color: #67657d; font-size: 9px; font-weight: 700; cursor: pointer; }
.order-category-chip:hover { border-color: #d7d2fa; color: #554be4; }
.order-category-chip.active { border-color: #665df2; background: #f0efff; color: #5148df; }
.order-picker-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 10px; max-height: 390px; overflow: auto; padding: 2px 4px 2px 1px; }
.order-product-card { display: grid; min-width: 0; grid-template-columns: 44px minmax(0,1fr) 30px; align-items: center; gap: 9px; padding: 9px; border: 1px solid #ece9f5; border-radius: 12px; background: #fbfbfe; }
.order-product-thumb { display: block; width: 44px; height: 44px; overflow: hidden; border-radius: 10px; background: #f0eeff; object-fit: cover; }
.order-product-thumb-fallback { display: grid; place-items: center; color: #7a71e8; font-size: 16px; font-weight: 800; }
.order-product-copy { display: grid; min-width: 0; gap: 1px; }
.order-product-copy strong { overflow: hidden; color: #363549; font-size: 10.5px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.order-product-copy small { color: var(--muted); font-size: 8.5px; }
.order-product-copy .variant-chips { gap: 3px; margin-top: 2px; }
.order-product-copy .variant-chip { padding: 1px 6px; font-size: 8px; }
.order-product-add { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 1px solid #ddd8ff; border-radius: 9px; background: #f2efff; color: #5b52d8; font-size: 17px; font-weight: 700; cursor: pointer; }
.order-product-add:hover { border-color: #665df2; background: #665df2; color: #fff; }
.order-product-add:disabled { opacity: .4; cursor: not-allowed; }
.order-picker-empty { grid-column: 1/-1; padding: 22px; color: var(--muted); font-size: 11px; text-align: center; }
.order-summary-card { display: flex; flex-direction: column; max-height: calc(100vh - 32px); margin-bottom: 0; padding: 0; overflow: hidden; }
.order-summary-card .card-head { flex: none; margin: 0; padding: 15px 17px 12px; border-bottom: 1px solid #eeecf4; }
.order-summary-card .card-head h2 { font-size: 15px; }
.order-summary-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 17px; }
.order-cart-empty { margin: 0; padding: 17px 0; color: var(--muted); font-size: 11px; text-align: center; }
.order-cart-item { padding: 9px 0; border-bottom: 1px dashed #ece9f4; }
.order-cart-item:first-child { padding-top: 2px; }
.order-cart-item:last-child { border-bottom: 0; }
.order-cart-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.order-cart-item-head strong { overflow: hidden; font-size: 11px; line-height: 1.5; text-overflow: ellipsis; }
.order-cart-remove { display: grid; width: 22px; height: 22px; flex: none; place-items: center; padding: 0; border: 1px solid #f0dbe0; border-radius: 7px; background: #fff7f8; color: #bc4c60; font-size: 14px; line-height: 1; cursor: pointer; }
.order-cart-item-sub { display: flex; flex-wrap: wrap; gap: 3px 8px; color: var(--muted); font-size: 8.5px; }
.order-cart-item-fields { display: grid; grid-template-columns: minmax(0,1.2fr) 64px minmax(0,.9fr); gap: 6px; margin-top: 6px; }
.order-cart-item-fields label { display: grid; gap: 2px; color: var(--muted); font-size: 8px; font-weight: 600; }
.order-cart-item-fields input,.order-cart-item-fields select { min-height: 30px; padding: 4px 7px; border-radius: 8px; font-size: 10px; }
.order-cart-item-total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 5px; color: var(--muted); font-size: 9px; }
.order-cart-item-total strong { color: #363549; font-size: 10px; }
.order-cart-stock { display: block; margin-top: 4px; color: #7b7890; font-size: 8px; }
.order-cart-stock.is-empty { color: #bc4c60; }
.order-category-trigger { display: flex; min-height: 36px; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid #e7e4f2; border-radius: 11px; background: #fff; color: #67657d; text-align: left; cursor: pointer; }
.order-category-trigger:hover { border-color: #d7d2fa; }
.order-category-trigger-icon { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; background: #f0efff; color: #5b52d8; font-size: 12px; }
.order-category-trigger > span:nth-child(2) { display: grid; gap: 1px; }
.order-category-trigger small { color: #9694a6; font-size: 7.5px; }
.order-category-trigger strong { color: #5148df; font-size: 9.5px; }
.order-category-options { display: grid; gap: 7px; }
.order-category-option { display: grid; grid-template-columns: minmax(0,1fr) auto 18px; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #ece9f5; border-radius: 11px; background: #fbfbfe; color: #4b4961; text-align: left; cursor: pointer; }
.order-category-option:hover { border-color: #d7d2fa; background: #f8f6ff; }
.order-category-option.active { border-color: #665df2; background: #f0efff; }
.order-category-option-name { font-size: 11px; font-weight: 750; }
.order-category-option small { color: #8c8b9b; font-size: 8.5px; }
.order-category-option > span:last-child { color: #7a71e8; font-size: 12px; }
.order-color-details,.product-color-details { margin-top: 4px; }
.order-color-details summary,.product-color-details summary { color: #5b52d8; font-size: 8.5px; font-weight: 700; cursor: pointer; list-style: none; }
.order-color-details summary::-webkit-details-marker,.product-color-details summary::-webkit-details-marker { display: none; }
.order-color-details summary::before,.product-color-details summary::before { display: inline-block; margin-right: 4px; content: '▸'; }
.order-color-details[open] summary::before,.product-color-details[open] summary::before { content: '▾'; }
.order-color-list { display: grid; gap: 4px; margin-top: 5px; padding: 6px 8px; border-radius: 8px; background: #f5f3ff; }
.order-color-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #66647a; font-size: 8.5px; }
.order-color-name { font-weight: 650; }
.order-color-row strong { color: #45425a; font-size: 8.5px; white-space: nowrap; }
.order-color-row strong.is-empty { color: #bc4c60; }
.stock-color-list { display: flex; flex-wrap: wrap; gap: 4px; }
.stock-color-item { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid #e8e5f4; border-radius: 999px; background: #faf9ff; color: #6d6a82; font-size: 8px; }
.stock-color-item b { color: #4b4860; font-weight: 700; }
.stock-color-item span { color: #5b52d8; font-weight: 750; }
.order-slip-image { display: block; max-width: 100%; max-height: 65vh; margin: 0 auto 14px; border: 1px solid #ece9f5; border-radius: 14px; object-fit: contain; }
.withdrawal-detail-meta { margin-bottom: 14px; }
.withdrawal-slip-preview { max-width: 360px; max-height: 46vh; margin: 10px 0 12px; }
.withdrawal-admin-table { min-width: 1020px; }
.withdrawal-admin-table th { white-space: nowrap; }
.withdrawal-bank-cell { min-width: 205px; }
.withdrawal-bank-cell > strong { display: block; color: #363549; font-size: 10px; }
.withdrawal-bank-number { color: #4b4860; font-size: 10px; }
.withdrawal-bank-holder, .withdrawal-bank-more { color: var(--muted); font-size: 9px; }
.withdrawal-bank-more { display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 999px; background: #f3f1fb; color: #635d7a; }
.withdrawal-bank-empty { display: inline-block; padding: 5px 7px; border-radius: 7px; background: #fff7e9; color: #9a6a22; font-size: 9px; line-height: 1.5; }
.withdrawal-status-badge { white-space: nowrap; }
.withdrawal-status-note-text { max-width: 190px; margin-top: 4px; color: var(--muted); font-size: 8.5px; line-height: 1.5; }
.withdrawal-row-actions { flex-direction: row; flex-wrap: wrap; gap: 5px; min-width: 120px; }
.withdrawal-status-form { min-width: 210px; align-items: stretch; }
.withdrawal-status-form select, .withdrawal-status-form input[type="file"] { min-height: 32px; font-size: 9px; }
.withdrawal-admin-status .withdrawal-status-form { max-width: 620px; padding: 10px; border: 1px solid #efedf6; border-radius: 12px; background: #fbfbfe; }
.withdrawal-admin-status .withdrawal-status-form select { flex: 1 1 180px; }
.withdrawal-admin-detail .app-dialog-body { max-height: min(82vh,860px); }
.withdrawal-admin-detail .order-detail-items { min-width: 720px; }
.withdrawal-order-lines > td { padding: 4px 10px 11px; background: #fbfbfd; }
.withdrawal-product-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.withdrawal-product-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 12px; padding: 5px 9px; border: 1px solid #eeecf4; border-radius: 8px; background: #fff; font-size: 10px; }
.withdrawal-product-name { display: grid; gap: 1px; min-width: 0; }
.withdrawal-product-name small { color: var(--muted); font-size: 9px; }
.withdrawal-product-math { color: var(--muted); font-size: 9.5px; }
.withdrawal-product-total { margin-top: 6px; color: var(--muted); font-size: 9.5px; }
.withdrawal-product-total strong { color: var(--ink); }
.withdrawal-fee-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.withdrawal-fee-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid #efedf6; border-radius: 10px; background: #fbfbfe; color: var(--muted); font-size: 10px; }
.withdrawal-fee-summary strong { color: var(--ink); font-size: 11px; white-space: nowrap; }
.withdrawal-fee-summary .is-total { grid-column: 1/-1; border-color: #dcd6ff; background: #f7f5ff; }
.withdrawal-fee-summary .is-total strong { color: #5148df; font-size: 14px; }
.withdrawal-balance-card { display: grid; gap: 4px; padding: 13px; border: 1px solid #d4ebdc; border-radius: 12px; background: #f1faf5; }
.withdrawal-balance-card > span { color: #49735b; font-size: 9px; font-weight: 800; letter-spacing: .02em; }
.withdrawal-balance-card > strong { color: #166b43; font-size: 24px; line-height: 1.1; }
.withdrawal-balance-card small { color: #6f8b7c; font-size: 9px; line-height: 1.65; }
.withdrawal-bank-list { display: grid; gap: 7px; }
.withdrawal-bank-account { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px solid #efedf6; border-radius: 10px; background: #fbfbfe; }
.withdrawal-bank-account.is-primary { border-color: #dcd6ff; background: #f8f6ff; }
.withdrawal-bank-account > div { display: grid; gap: 1px; }
.withdrawal-bank-account strong { color: #363549; font-size: 10px; }
.withdrawal-bank-account span { color: #4b4860; font-size: 10px; }
.withdrawal-bank-account small { color: var(--muted); font-size: 9px; }
.withdrawal-primary-tag { flex: none; padding: 2px 6px; border-radius: 999px; background: #ece9ff; color: #5b52d8; font-size: 8px; font-weight: 800; white-space: nowrap; }
@media (max-width: 760px) {
  .withdrawal-fee-summary { grid-template-columns: 1fr; }
  .withdrawal-admin-detail .order-detail-items { min-width: 640px; }
}
.qty-input { width: 84px; }
.order-totals { display: grid; gap: 5px; margin-top: 9px; padding: 10px 11px; border: 1px solid #efedf6; border-radius: 11px; background: #fbfbfe; }
.order-totals > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; }
.order-totals strong { color: var(--ink); font-size: 11px; }
.order-totals .order-grand { padding-top: 7px; border-top: 1px dashed #e5e2ef; color: var(--ink); font-weight: 700; }
.order-totals .order-grand strong { color: #5148df; font-size: 15px; }
.order-payment-block { display: grid; gap: 9px; margin-top: 11px; }
.order-payment-block .field { gap: 4px; }
.order-payment-block .field label { font-size: 10px; }
.order-payment-block select,.order-payment-block input[type=file] { min-height: 36px; }
.order-summary-actions { flex: none; padding: 12px 17px 14px; border-top: 1px solid #eeecf4; }
.order-summary-actions .btn { width: 100%; }
.order-summary-actions .help { margin: 7px 0 0; text-align: center; }
.order-confirm-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.order-confirm-block { margin-bottom: 14px; }
.order-confirm-block h3 { margin: 0 0 6px; font-size: 12px; }
.order-confirm-grid .order-confirm-block { margin-bottom: 0; }
.order-confirm-lines { display: grid; }
.order-confirm-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed #f0eef6; font-size: 10px; }
.order-confirm-line span { flex: none; color: var(--muted); }
.order-confirm-line strong { overflow-wrap: anywhere; font-weight: 600; text-align: right; }
.order-confirm-items { display: grid; gap: 6px; }
.order-confirm-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid #eeecf4; border-radius: 9px; background: #fbfbfe; font-size: 10px; }
.order-confirm-item small { color: var(--muted); }
.bank-row { position: relative; margin-bottom: 10px; padding: 15px 57px 14px 14px; border: 1px solid #eae9f0; border-radius: 13px; background: #fbfbfc; }
.bank-row .remove-bank { position: absolute; top: 13px; right: 12px; width: 34px; height: 34px; padding: 0; }
.bank-row-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.brand-accounts-head { margin: 20px 0 10px; }
.round-box { margin: 13px 0; padding: 15px; border: 1px solid #e8e5fa; border-radius: 12px; background: #f8f7ff; }
.detail-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.profile-accounts { display: grid; gap: 2px; }
.profile-accounts .round-box { margin: 0 0 10px; }
.profile-accounts .card-head { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #ece9f7; }
.detail-list div { padding: 11px 12px; border: 1px solid #eeedf2; border-radius: 10px; background: #fbfbfc; }
.detail-list span { display: block; margin-bottom: 3px; color: #898898; font-size: 9px; }
.detail-list strong { color: #363549; font-size: 11px; overflow-wrap: anywhere; }
.inline-form { display: flex; align-items: center; gap: 7px; }
.orders-filter-card { padding: 20px 22px; }
.orders-filter-row { display: grid; gap: 14px; }
.orders-filter-form { display: grid; grid-template-columns: minmax(160px,1.1fr) minmax(150px,1fr) minmax(130px,.8fr) minmax(130px,.8fr) auto; align-items: end; gap: 10px; }
.orders-filter-form .field { gap: 5px; }
.orders-filter-form .field label { font-size: 10px; }
.alerts-filter-form { grid-template-columns: minmax(150px,1.1fr) minmax(130px,.9fr) minmax(130px,.9fr) repeat(2,minmax(120px,.8fr)) auto; }
.orders-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.orders-export-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid #f0eef5; }
.orders-export-form .help { margin: 0; }
.orders-table { min-width: 1060px; }
.order-call-actions { display: flex; align-items: center; gap: 6px; }
.order-call-actions form { display: inline-flex; }
.order-call-actions .btn { min-width: 28px; padding: 4px 7px; }
.order-call-latest { margin-top: 6px; color: #67667a; font-size: 9px; line-height: 1.6; }
.order-call-latest span { color: #8d8c9c; font-weight: 700; }
.order-call-latest small { display: block; color: #a3a2af; font-size: 8px; }
.order-call-note-form { display: flex; gap: 6px; margin-top: 7px; }
.order-call-note-form input { min-height: 32px; padding: 5px 8px; font-size: 10px; }
.order-status-form { display: grid; min-width: 215px; gap: 8px; }
.order-status-form select { min-height: 34px; padding: 5px 9px; font-size: 10px; }
.order-fee-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.order-fee-fields label { display: grid; gap: 3px; color: #6f6e80; font-size: 8px; font-weight: 700; }
.order-fee-fields input { min-height: 32px; padding: 5px 8px; font-size: 10px; }
.order-status-form .btn { justify-self: start; min-height: 32px; }
.orders-table-compact { min-width: 1270px; table-layout: fixed; }
.orders-table-compact th, .orders-table-compact td { vertical-align: top; }
.orders-table-compact .order-col-select { width: 36px; }
.orders-table-compact .order-col-main { width: 185px; }
.orders-table-compact .order-col-brand { width: 120px; }
.orders-table-compact .order-col-recipient { width: 130px; }
.orders-table-compact .order-col-status { width: 105px; }
.orders-table-compact .order-col-shipping { width: 296px; }
.orders-table-compact .order-col-calls { width: 185px; }
.orders-table-compact .order-col-fees { width: 210px; }
.orders-table-compact tbody tr:has([data-order-checkbox]:checked) { background: #fbfaff; }
.orders-table-compact tbody tr.order-row-returned { animation: order-row-return 2.6s ease-out 1; }
@keyframes order-row-return { 0%, 60% { background: #fff5d8; box-shadow: inset 3px 0 0 #d9a441; } 100% { background: transparent; box-shadow: inset 3px 0 0 transparent; } }
.order-main-cell { min-width: 0; }
.order-main-cell .order-code { display: inline-block; font-size: 11px; }
.order-main-cell .muted.small { font-size: 8.5px; }
.order-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.order-row-actions .btn { min-height: 26px; padding: 3px 7px; font-size: 8.5px; }
.orders-table-compact .order-row-actions { min-width: 0; gap: 4px; }
.order-shipping-cell { min-width: 0; }
.order-shipping-form-compact { display: grid; gap: 5px; margin-top: 0; }
.order-compact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.order-carrier-select { width: 78px; min-height: 29px; padding: 3px 5px; font-size: 9px; }
.order-tracking-input { width: 98px; min-height: 29px; padding: 3px 6px; font-size: 9.5px; }
.order-shipping-form-compact .badge { flex: none; white-space: nowrap; }
.order-slip-row { gap: 6px; }
.order-slip-link { color: #5148df; font-size: 9px; font-weight: 750; }
.order-slip-state { font-size: 9px; font-weight: 750; }
.order-slip-state.is-missing { color: #b4770e; }
.order-slip-sent { color: #a47013; font-size: 8px; }
.order-slip-sent.is-sent { color: #27805a; }
.order-file-chip { display: inline-flex; min-width: 0; max-width: 122px; align-items: center; min-height: 25px; padding: 3px 7px; border: 1px dashed #c9c3e6; border-radius: 8px; color: #5b54d6; font-size: 8px; font-weight: 750; cursor: pointer; }
.order-file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-file-chip input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.order-call-cell { min-width: 0; }
.order-call-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.order-call-head > strong { font-size: 10px; white-space: nowrap; }
.order-call-head .btn { min-height: 24px; padding: 2px 6px; font-size: 8px; }
.order-call-cell .order-call-latest { max-width: 192px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8.5px; }
.order-call-note-form { gap: 4px; margin-top: 5px; }
.order-call-note-form input { flex: 1 1 auto; width: auto; min-width: 0; min-height: 29px; padding: 4px 7px; font-size: 9px; }
.order-call-note-form .btn { flex: none; min-height: 29px; padding: 3px 7px; font-size: 8.5px; }
.order-status-form-compact { min-width: 0; gap: 5px; }
.order-status-form-compact select { min-height: 30px; padding: 3px 6px; font-size: 9.5px; }
.order-status-top { display: flex; align-items: center; gap: 5px; }
.order-status-top select { flex: 1 1 auto; min-width: 0; }
.order-status-top .btn { flex: none; min-height: 30px; padding: 3px 7px; font-size: 9px; }
.order-fee-row { display: flex; align-items: center; gap: 5px; }
.order-fee-inline { display: flex; align-items: center; gap: 3px; color: #6f6e80; font-size: 8px; font-weight: 700; }
.order-fee-inline input { width: 58px; min-height: 28px; padding: 3px 5px; font-size: 9px; }
.order-status-bottom .btn { min-height: 28px; padding: 3px 8px; font-size: 9px; }
.order-print-dialog .print-preview-body { padding: 0; background: #f1eff6; }
.print-preview-frame { display: block; width: 100%; height: min(66vh,620px); border: 0; background: #fff; }
.order-print-actions { flex-wrap: wrap; }
.app-dialog { width: min(640px,calc(100% - 30px)); max-height: 86vh; padding: 0; overflow: hidden; border: 1px solid #e8e5f0; border-radius: 18px; background: #fff; color: #2a293c; box-shadow: 0 32px 90px rgba(30,27,60,.3); }
.app-dialog[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.app-dialog::backdrop { background: rgba(24,22,40,.46); backdrop-filter: blur(2px); }
.app-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 22px 14px; border-bottom: 1px solid #efedf4; }
.app-dialog-head h2 { margin: 2px 0 0; color: #26253a; font-size: 18px; }
.app-dialog-head p { margin: 4px 0 0; color: #8d8c9b; font-size: 10px; }
.app-dialog-close { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border: 1px solid #ebe8f2; border-radius: 10px; background: #faf9fd; color: #6d6b7d; font-size: 18px; line-height: 1; cursor: pointer; }
.app-dialog-close:hover { background: #f1eff9; color: #514ee0; }
.app-dialog-body { overflow: auto; padding: 18px 22px; }
.app-dialog-body .table-wrap { margin: 0; }
.app-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 18px; border-top: 1px solid #f1eff5; }
.app-dialog-form { display: grid; max-height: 86vh; grid-template-rows: auto minmax(0,1fr) auto; }
.app-dialog-form .app-dialog-body { min-height: 0; }
.app-dialog-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.app-dialog-wide { width: min(880px,calc(100% - 30px)); }
.intl-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.intl-edit-form .form-actions { margin-top: 16px; }
.field-hint { margin-top: 5px; color: #8d8c9b; font-size: 9px; line-height: 1.6; }
.field-hint a { color: #5b54e0; font-weight: 700; }
.field input[readonly] { border-color: #e9e7f2; background: #f7f6fb; color: #6f6e80; }
.intl-filter-card .card-head { margin-bottom: 12px; }
.intl-filter-form { display: grid; grid-template-columns: minmax(170px,1.4fr) minmax(140px,1fr) minmax(120px,.8fr) repeat(2,minmax(120px,.8fr)) auto; align-items: end; gap: 10px; margin-bottom: 0; }
.intl-filter-form .field { min-width: 0; gap: 5px; }
.intl-filter-form .field label { font-size: 10px; }
.toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 900px) { .orders-filter-form { grid-template-columns: repeat(2,minmax(0,1fr)); } .orders-filter-actions { grid-column: 1/-1; } }
@media (max-width: 760px) { .orders-filter-form { grid-template-columns: 1fr; } .order-fee-fields { grid-template-columns: 1fr; } }
.inline-form select,.inline-form input { width: auto; min-width: 118px; }
.brand-account-controls { display: grid; min-width: 210px; justify-items: start; gap: 9px; }
.brand-account-controls > div:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.brand-account-controls form { display: grid; width: 100%; gap: 7px; }
.brand-account-controls .btn { justify-self: start; }
.brand-account-password { width: 100%; }
.brand-account-password summary { color: #5c53d4; cursor: pointer; font-size: 10px; font-weight: 750; }
.brand-account-password-form { display: grid; gap: 7px; padding-top: 9px; }
.brand-account-password-form input { min-width: 0; }
.staff-edit-form { display: grid; min-width: 215px; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: 8px; }
.staff-edit-form > input[type=password] { grid-column: 1/-1; }
.staff-edit-form > button { justify-self: start; }
.staff-permission-list { display: grid; grid-column: 1/-1; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; max-height: 145px; overflow: auto; padding: 10px; border: 1px solid #e9e8ef; border-radius: 10px; background: #fafafd; }
.staff-permission-list .checkline { align-items: flex-start; line-height: 1.45; }
.check-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.section-label { margin: 17px 0 8px; color: #454457; font-size: 11px; font-weight: 750; }
.active-account-check { margin-top: 13px; }
.payment-slip-field { margin-top: 14px; }
.shipping-option-list { display: grid; gap: 10px; margin-top: 17px; }
.bank-primary-check { margin-top: 10px; }
.exchange-rate-note { margin-top: 15px; }
.notice-inline-form { display: inline; }
.notice-list { display: grid; gap: 9px; }
.notice-item { display: flex; align-items: flex-start; gap: 11px; padding: 13px; border: 1px solid #ecebf1; border-radius: 11px; background: #fff; }
.notice-dot { width: 8px; height: 8px; flex: none; margin-top: 8px; border-radius: 50%; background: #776ff0; box-shadow: 0 0 0 4px #f0efff; }
.notice-item p { min-width: 0; margin: 0; }
.notice-item time { color: var(--muted); font-size: 10px; }
.tracking-query-field { flex: 1; }
.footnote { margin-top: 29px; padding-top: 14px; border-top: 1px solid #e7e6ed; color: #a1a0ad; font-size: 9px; text-align: center; }

/* Website content studio */
.public-site-admin-intro { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 5px 0 22px; }
.public-site-admin-intro h2 { margin: 5px 0 6px; color: #242338; font-size: 26px; letter-spacing: -.035em; }
.public-site-admin-intro p { max-width: 650px; margin: 0; color: #858596; font-size: 11px; }
.website-studio-layout { display: grid; grid-template-columns: 218px minmax(0,1fr); align-items: start; gap: 20px; }
.website-studio-nav { position: sticky; top: 90px; display: grid; gap: 4px; padding: 14px; border: 1px solid #e9e8ef; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.studio-nav-heading { display: grid; gap: 4px; margin: 0 0 8px; padding: 4px 7px 13px; border-bottom: 1px solid #efedf4; }
.studio-nav-heading span { color: #9493a2; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.studio-nav-heading strong { color: #302f43; font-size: 13px; }
.website-studio-nav > a { display: flex; align-items: center; gap: 9px; padding: 9px 8px; border-left: 2px solid transparent; border-radius: 7px; color: #686779; font-size: 10px; font-weight: 650; transition: background .15s,color .15s,border .15s; }
.website-studio-nav > a span { color: #9695a3; font: 800 8px 'DM Sans',sans-serif; }
.website-studio-nav > a:hover,.website-studio-nav > a.is-active { border-left-color: #7067ec; background: #f3f2ff; color: #5148c7; }
.website-studio-nav > a.is-active span { color: #7067ec; }
.studio-nav-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 9px; padding: 11px 7px 2px; border-top: 1px solid #efedf4; color: #7f7e90; font-size: 9px; line-height: 1.6; }
.studio-live-dot { width: 7px; height: 7px; flex: none; margin-top: 5px; border-radius: 50%; background: #766ff0; box-shadow: 0 0 0 4px #f0efff; }
.public-site-admin-form .card { padding: 24px; scroll-margin-top: 90px; }
.public-site-admin-heading { margin-bottom: 19px; padding-bottom: 14px; border-bottom: 1px solid #eeedf3; }
.public-site-admin-heading h2 { margin: 0 0 4px; color: #302f43; font-size: 16px; }
.public-site-admin-heading p { margin: 0; color: #898898; font-size: 10px; }
.public-site-admin-form .field { align-content: start; }
.public-site-admin-form input[type=color] { min-height: 43px; padding: 5px; }
.public-site-admin-form .section-label { margin: 1px 0 8px; }
.public-site-admin-form .field.full + .field { margin-top: 2px; }
.public-site-admin-actions { padding: 2px 0 10px; }
.public-site-admin-actions .btn { min-width: 190px; min-height: 44px; }

/* Operations overview */
.overview-welcome { position: relative; display: flex; min-height: 220px; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; margin-bottom: 19px; padding: 29px 34px; border: 1px solid #302d50; border-radius: 19px; background: radial-gradient(ellipse at 78% 5%,rgba(155,145,255,.24),transparent 37%),linear-gradient(115deg,#252339 0%,#302e55 62%,#39376a 100%); color: #fff; box-shadow: 0 16px 34px rgba(42,39,81,.14); }
.overview-welcome::before,.overview-welcome::after { position: absolute; top: -125px; right: 15%; width: 340px; height: 340px; border: 1px solid rgba(223,219,255,.12); border-radius: 50%; content: ''; pointer-events: none; }
.overview-welcome::after { top: -184px; right: 7%; width: 465px; height: 465px; border-color: rgba(223,219,255,.075); }
.overview-welcome-copy,.overview-welcome-panel { position: relative; z-index: 1; }
.overview-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; color: #c4c0e5; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.overview-kicker span:first-child { color: #dedbfa; }
.overview-kicker i { width: 21px; height: 1px; background: rgba(226,222,255,.45); }
.overview-welcome h1 { margin: 0 0 5px; color: #fff; font-size: clamp(26px,2.7vw,36px); font-weight: 700; letter-spacing: 0; }
.overview-welcome h1 span { color: #c7ed61; }
.overview-welcome-copy > p { margin: 0; color: #cfccdf; font-size: 11px; }
.overview-welcome-meta { display: flex; align-items: center; gap: 9px; margin-top: 20px; color: #b5b2c9; font-size: 9px; }
.overview-live-dot { width: 6px; height: 6px; background: #b9e85c; box-shadow: 0 0 0 4px rgba(199,237,97,.12); }
.overview-welcome-panel { width: 225px; flex: none; padding: 17px 18px 14px; border: 1px solid rgba(220,217,255,.18); border-radius: 14px; background: rgba(22,21,39,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(9px); }
.overview-panel-top { display: flex; align-items: center; gap: 8px; color: #c7c4dc; font-size: 8px; font-weight: 800; letter-spacing: .11em; }
.overview-panel-icon { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; background: rgba(170,160,255,.17); color: #c7c0ff; font-size: 14px; }
.overview-welcome-panel > strong { display: block; margin-top: 9px; color: #fff; font: 750 35px 'DM Sans','Noto Sans Thai',sans-serif; letter-spacing: -.04em; }
.overview-panel-label { display: block; margin-top: -2px; color: #d0cede; font-size: 9px; }
.overview-route { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: #aaa6c5; font: 700 8px 'DM Sans',sans-serif; letter-spacing: .1em; }
.overview-route i { position: relative; flex: 1; border-top: 1px dashed rgba(208,201,255,.47); }
.overview-route i::after { position: absolute; top: -3px; right: 23%; width: 5px; height: 5px; border-radius: 50%; background: #c7ed61; content: ''; }
.overview-route b { color: #c9c4f3; font-size: 8px; }
.overview-stats { gap: 13px; margin-bottom: 17px; }
.overview-stats .stat-card { min-height: 116px; }
.overview-grid { display: grid; grid-template-columns: minmax(0,1.58fr) minmax(280px,.82fr); align-items: start; gap: 16px; }
.overview-main-stack,.overview-side-stack { display: grid; min-width: 0; gap: 0; }
.overview-grid .card { margin-bottom: 15px; }
.overview-section-head { align-items: flex-start; }
.overview-section-head h2,.overview-recent-card .card-head h2,.overview-business-card .card-head h2,.overview-shortcut-card .card-head h2 { margin: 2px 0 0; }
.overview-section-kicker { display: block; margin-bottom: 5px; color: #8884b0; font: 800 8px 'DM Sans',sans-serif; letter-spacing: .13em; }
.overview-period { flex: none; padding: 6px 9px; border: 1px solid #edecf2; border-radius: 8px; background: #fbfbfd; color: #828192; font-size: 9px; }
.overview-chart-summary { display: flex; align-items: baseline; gap: 9px; margin: 3px 0 0; }
.overview-chart-summary strong { color: #2b2942; font: 750 24px 'DM Sans','Noto Sans Thai',sans-serif; letter-spacing: -.035em; }
.overview-chart-summary span { color: #8c8b9b; font-size: 9px; }
.overview-chart { display: grid; height: 155px; grid-template-columns: repeat(7,minmax(0,1fr)); align-items: end; gap: 12px; margin-top: 8px; padding: 0 8px; }
.overview-chart-column { display: grid; height: 100%; grid-template-rows: 18px minmax(0,1fr) 18px 15px; justify-items: center; gap: 3px; }
.overview-chart-count { color: #7c7b8d; font: 600 8px 'DM Sans','Noto Sans Thai',sans-serif; }
.overview-chart-track { display: flex; width: min(100%,27px); height: 100%; align-items: flex-end; justify-content: center; overflow: hidden; border-radius: 8px 8px 4px 4px; background: #f5f4f9; }
.overview-chart-bar { display: block; width: 100%; min-height: 4px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg,#a69dff,#6960ed); box-shadow: 0 4px 9px rgba(102,93,242,.15); }
.overview-chart-column:nth-child(2n) .overview-chart-bar { background: linear-gradient(180deg,#c7c1ff,#9086f5); }
.overview-chart-column:last-child .overview-chart-bar { background: linear-gradient(180deg,#c7ed61,#92c438); }
.overview-chart-bar.bar-level-0 { height: 4px; opacity: .38; }.overview-chart-bar.bar-level-1 { height: 10%; }.overview-chart-bar.bar-level-2 { height: 20%; }.overview-chart-bar.bar-level-3 { height: 30%; }.overview-chart-bar.bar-level-4 { height: 40%; }.overview-chart-bar.bar-level-5 { height: 50%; }.overview-chart-bar.bar-level-6 { height: 60%; }.overview-chart-bar.bar-level-7 { height: 70%; }.overview-chart-bar.bar-level-8 { height: 80%; }.overview-chart-bar.bar-level-9 { height: 90%; }.overview-chart-bar.bar-level-10 { height: 100%; }
.overview-chart-day { color: #706f81; font-size: 8px; font-weight: 700; }
.overview-chart-date { color: #a09fac; font: 8px 'DM Sans',sans-serif; }
.overview-chart-legend { display: flex; justify-content: space-between; gap: 8px; margin-top: 13px; padding-top: 10px; border-top: 1px solid #efedf3; color: #9a99a7; font-size: 8px; }
.overview-chart-legend span:first-child { display: flex; align-items: center; gap: 6px; color: #777689; }
.overview-chart-legend i { width: 7px; height: 7px; border-radius: 50%; background: #786ff0; }
.overview-recent-card .card-head { align-items: center; }
.overview-recent-card .btn { flex: none; }
.overview-orders-table { min-width: 620px; }
.overview-orders-table th { background: #faf9fc; }
.overview-orders-table td { font-size: 10px; }
.overview-orders-table td .muted { margin-top: 2px; font-size: 9px; }
.overview-business-card { padding: 20px; }
.overview-business-card .card-head { align-items: flex-start; }
.overview-summary-icon { display: grid; width: 33px; height: 33px; flex: none; place-items: center; border: 1px solid #e8e4fb; border-radius: 11px; background: #f4f2ff; color: #655ce4; font-size: 14px; font-weight: 800; }
.overview-revenue { display: grid; padding: 15px 0; border-top: 1px solid #efedf3; border-bottom: 1px solid #efedf3; }
.overview-revenue > span:first-child { color: #77778a; font-size: 9px; }
.overview-revenue strong { margin: 4px 0 1px; color: #292840; font: 750 25px 'DM Sans','Noto Sans Thai',sans-serif; letter-spacing: -.035em; overflow-wrap: anywhere; }
.overview-revenue strong small { color: #77778a; font-size: 13px; }
.overview-revenue-caption { color: #9a99a7; font-size: 8px; }
.overview-summary-list { display: grid; gap: 10px; padding-top: 14px; }
.overview-summary-list div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.overview-summary-list span { color: #7e7d8e; font-size: 9px; }
.overview-summary-list strong { color: #3c3b50; font-size: 10px; }
.overview-attention-card { display: flex; align-items: center; gap: 10px; margin: 0 0 15px; padding: 13px; border: 1px solid #dcefe8; border-radius: 13px; background: #f2faf6; }
.overview-attention-card.needs-attention { border-color: #f0e4c5; background: #fffaf0; }
.overview-attention-icon { display: grid; width: 31px; height: 31px; flex: none; place-items: center; border-radius: 10px; background: #e1f4eb; color: #188264; font-size: 13px; font-weight: 800; }
.overview-attention-card.needs-attention .overview-attention-icon { background: #fbf0d4; color: #a77d22; }
.overview-attention-card > div { display: grid; min-width: 0; gap: 2px; }
.overview-attention-card strong { color: #246b53; font-size: 9px; }
.overview-attention-card.needs-attention strong { color: #87631c; }
.overview-attention-card > div > span { color: #89998f; font-size: 8px; }
.overview-attention-card.needs-attention > div > span { color: #9b895f; }
.overview-attention-card > a { margin-left: auto; color: #8d9a90; font-size: 17px; }
.overview-shortcut-card { padding: 19px; }
.overview-shortcuts { display: grid; }
.overview-shortcuts > a { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #efedf3; transition: transform .16s; }
.overview-shortcuts > a:first-child { border-top: 0; }
.overview-shortcuts > a:hover { transform: translateX(2px); }
.overview-shortcut-icon { display: grid; width: 35px; height: 35px; flex: none; place-items: center; border-radius: 11px; font-size: 15px; }
.shortcut-orders { background: #f0efff; color: #6a61e7; }.shortcut-stock { background: #e8f6f0; color: #239a77; }.shortcut-customers { background: #fff4e7; color: #c98535; }.shortcut-tracking { background: #f2efff; color: #8165ca; }
.overview-shortcuts > a > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.overview-shortcuts strong { color: #424155; font-size: 9px; }
.overview-shortcuts small { overflow: hidden; color: #90909f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.overview-shortcuts > a > b { margin-left: auto; color: #a7a5b1; font-size: 13px; }
.overview-shortcuts-empty { margin: 0; padding: 10px 0 2px; color: #838292; font-size: 9px; }
.overview-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 17px; padding: 13px 15px; border: 1px solid #e9e7f1; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.overview-filter-block { display: grid; gap: 5px; }
.overview-filter-label { color: #8a8998; font-size: 9px; font-weight: 750; letter-spacing: .04em; }
.overview-filter-block .pill-tabs { margin-bottom: 0; box-shadow: none; }
.overview-range-active { padding: 8px 12px; border-radius: 8px; background: #262532; color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; }
.overview-filter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.overview-filter-form select { min-height: 36px; width: auto; min-width: 170px; padding: 6px 10px; border-radius: 9px; font-size: 11px; }
.overview-filter-field { display: grid; gap: 4px; }
.overview-filter-field > span { color: #777687; font-size: 9px; font-weight: 700; }
.overview-filter-field input { min-height: 36px; width: auto; padding: 6px 9px; border-radius: 9px; font-size: 11px; }
.overview-filter-form .btn { min-height: 36px; }
.overview-filter-reset { align-self: flex-end; margin-left: auto; }
.overview-brand-table td:first-child { min-width: 160px; }
.overview-brand-flag { display: inline-flex; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #efeaff; color: #5b52d6; font-size: 8px; font-weight: 750; }
.overview-brand-table tr.is-selected td { background: #f7f5ff; }
.overview-brand-total td { background: #fbfbfd; color: #454358; font-weight: 750; }
.overview-chart.chart-medium { gap: 6px; }
.overview-chart.chart-dense { gap: 3px; padding: 0 4px; }
.overview-chart.chart-dense .overview-chart-track { width: min(100%,16px); }
.overview-chart.chart-dense .overview-chart-count,.overview-chart.chart-dense .overview-chart-day,.overview-chart.chart-dense .overview-chart-date { font-size: 7px; }
.dashboard-sales-card { margin-top: 16px; }
.dashboard-sales-head { align-items: flex-start; gap: 18px; }
.dashboard-scope-note { margin: 0 0 14px; }
.dashboard-sales-tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 12px 18px; }
.dashboard-export-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dashboard-export-form .help { max-width: 190px; }
.dashboard-month-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.dashboard-month-form .field { gap: 4px; }
.dashboard-month-form label { font-size: 9px; }
.dashboard-month-form input[type="month"] { min-width: 150px; min-height: 36px; padding: 8px 10px; }
.dashboard-sales-summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 18px; }
.dashboard-sales-thb { color: #8c8b9b; font-size: 10px; }
.sales-chart { height: 185px; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; padding: 0 8px; }
.sales-chart.sales-weeks-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.sales-chart .overview-chart-track { width: min(100%,52px); }
.dashboard-sales-empty { margin-top: 12px; }
@media (max-width: 760px) {
  .dashboard-sales-head { flex-direction: column; }
  .dashboard-month-form { width: 100%; }
  .dashboard-month-form .field { flex: 1; }
  .dashboard-month-form input[type="month"] { width: 100%; }
  .sales-chart { gap: 8px; }
  .overview-filters { align-items: stretch; flex-direction: column; gap: 10px; }
  .overview-filter-form { align-items: stretch; }
  .overview-filter-form select { flex: 1; min-width: 0; }
  .overview-filter-field { flex: 1; min-width: 140px; }
  .overview-filter-reset { align-self: stretch; margin-left: 0; }
}

/* Login and service-unavailable screens */
.login-page { display: grid; min-height: 100vh; grid-template-columns: minmax(0,1.02fr) minmax(420px,.98fr); background: #f6f6f3; }
.login-visual { position: relative; isolation: isolate; display: flex; min-height: 100vh; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(34px,6vw,82px); background: radial-gradient(ellipse at 76% 73%,rgba(132,120,255,.18),transparent 35%),linear-gradient(145deg,#211f32 0%,#302c50 62%,#3c3869 100%); color: #fff; }
.login-visual::before { position: absolute; z-index: -1; top: 13%; right: -21%; width: 87%; aspect-ratio: 1; border: 1px solid rgba(224,220,255,.16); border-radius: 50%; box-shadow: 0 0 0 39px rgba(224,220,255,.035),0 0 0 82px rgba(224,220,255,.025),0 0 0 128px rgba(224,220,255,.02); content: ''; animation: orbit-line 48s linear infinite; }
.login-visual .brand-mark { padding: 0 0 40px; }
.login-visual .brand-icon { border-color: rgba(255,255,255,.2); background: linear-gradient(145deg,#8d82ff,#5c51e8); }
.login-visual .brand-wordmark { color: #fff; }
.login-visual .brand-wordmark small { color: rgba(239,237,255,.67); }
.login-visual .eyebrow { color: #c7ed61; }
.login-visual h1 { max-width: 620px; margin: 17px 0 15px; color: #fff; font-size: clamp(39px,5.6vw,72px); font-weight: 750; letter-spacing: -.04em; line-height: 1.24; }
.login-visual p { max-width: 480px; color: rgba(239,237,255,.76); font-size: 13px; line-height: 1.9; }
.login-feature { position: relative; z-index: 1; display: grid; max-width: 680px; grid-template-columns: repeat(3,1fr); gap: 13px; }
.login-feature div { padding-top: 12px; border-top: 1px solid rgba(236,233,255,.25); color: rgba(239,237,255,.77); font-size: 10px; }
.login-feature b { display: block; margin-bottom: 4px; color: #c7ed61; font-size: 12px; font-weight: 800; }
.login-route { position: absolute; right: 8%; bottom: 23%; display: flex; align-items: center; gap: 9px; color: rgba(239,237,255,.7); font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.login-route i { width: 88px; border-top: 1px dashed #c7c0ff; }
.login-route b { color: #c7ed61; font-size: 8px; }
.login-panel { display: grid; min-height: 100vh; place-items: center; padding: 40px; background: radial-gradient(ellipse at 90% 5%,rgba(116,104,230,.065),transparent 34%),#f6f6f3; }
.login-box { position: relative; width: min(100%,410px); padding: 34px; border: 1px solid #e9e7ef; border-radius: 19px; background: #fff; box-shadow: 0 25px 75px rgba(39,35,77,.1); animation: login-enter .6s cubic-bezier(.2,.75,.25,1) both; }
.login-panel-mark { position: absolute; top: 23px; right: 23px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #e9e5ff; border-radius: 11px; background: #f4f2ff; color: #675de4; font-size: 16px; font-weight: 800; }
.login-box > .eyebrow { margin-bottom: 8px; color: #7770e9; }
.login-box h2 { margin-bottom: 5px; color: #252439; font-size: 26px; }
.login-box > p { margin-bottom: 22px; color: #858495; font-size: 11px; }
.login-box .field { margin-bottom: 14px; }
.login-box .field label { font-size: 11px; }
.login-box input { min-height: 47px; }
.login-box .btn { width: 100%; min-height: 47px; margin-top: 7px; }
.login-brand { display: none; }
.secure-note { margin-top: 19px; padding-top: 14px; border-top: 1px solid #eeedf2; color: #8d8c9a; font-size: 9px; line-height: 1.8; }

/* Motion, utility and print */
.motion-item { transition: opacity .57s cubic-bezier(.2,.75,.25,1),transform .57s cubic-bezier(.2,.75,.25,1); }
.motion-delay-0 { transition-delay: 0ms; }.motion-delay-1 { transition-delay: 65ms; }.motion-delay-2 { transition-delay: 130ms; }.motion-delay-3 { transition-delay: 195ms; }
.motion-ready .motion-item:not(.is-visible) { opacity: 0; transform: translate3d(0,16px,0); }
.motion-item.is-visible { opacity: 1; transform: translate3d(0,0,0); }
@keyframes login-enter { from { opacity: 0; transform: translate3d(0,15px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes orbit-line { to { transform: rotate(360deg); } }

@media (max-width: 1200px) {
  .sidebar { width: 238px; }
  .main-area { margin-left: 238px; }
  .content { padding-inline: 26px; }
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .two-col { grid-template-columns: 1fr; }
  .order-studio { grid-template-columns: minmax(0,1fr) 320px; }
  .order-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .website-studio-layout { grid-template-columns: 190px minmax(0,1fr); gap: 15px; }
  .overview-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .overview-side-stack { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 0 14px; }
  .overview-shortcut-card { grid-column: 1/-1; }
  .login-route { bottom: 20%; }
}
@media (max-width: 980px) {
  .intl-filter-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .order-studio { grid-template-columns: 1fr; }
  .order-studio-side { position: static; }
  .order-summary-card { max-height: none; }
  .order-summary-scroll { overflow: visible; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 68px; }
  .intl-filter-form { grid-template-columns: 1fr; }
  .sidebar { z-index: 41; width: min(310px,88vw); padding: 20px 16px; transform: translateX(-105%); box-shadow: none; }
  .nav-open .sidebar { transform: translateX(0); box-shadow: 18px 0 55px rgba(18,17,32,.28); }
  .sidebar-scrim { position: fixed; z-index: 40; inset: 0; display: block; visibility: hidden; border: 0; background: rgba(25,23,40,.48); opacity: 0; transition: opacity .25s,visibility .25s; }
  .nav-open .sidebar-scrim { visibility: visible; opacity: 1; }
  .main-area { margin-left: 0; }
  .topbar { min-height: 63px; justify-content: flex-start; gap: 11px; padding-inline: 16px; }
  .nav-toggle { display: grid; width: 37px; height: 37px; flex: none; align-content: center; justify-items: center; gap: 4px; border: 1px solid #e7e5ef; border-radius: 11px; background: #fff; cursor: pointer; }
  .nav-toggle span { display: block; width: 15px; height: 2px; border-radius: 2px; background: #49465e; }
  .topbar-context { flex: 1; }
  .topbar-overline { font-size: 7px; }
  .breadcrumb { gap: 5px; font-size: 9px; }
  .breadcrumb strong { font-size: 11px; }
  .topbar-right { gap: 9px; }
  .topbar-account-copy,.topbar-separator { display: none; }
  .workspace-status { gap: 0; font-size: 0; }
  .workspace-status-dot { width: 8px; height: 8px; }
  .topbar-account-avatar { width: 33px; height: 33px; }
  .content { padding: 25px 17px 40px; }
  .page-head { display: block; margin-bottom: 21px; }
  .page-head-actions { margin-top: 13px; }
  .page-head-actions .btn { flex: 1; }
  .stats { gap: 10px; }
  .stats-fees { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stat-card { min-height: 112px; padding: 13px; }
  .stat-value { font-size: 23px; }
  .card { margin-bottom: 12px; padding: 18px; }
  .three-col { grid-template-columns: 1fr; }
  .category-grid, .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .order-picker-grid { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: none; }
  .order-confirm-grid { grid-template-columns: 1fr; }
  .form-grid.three { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .check-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-row { grid-template-columns: minmax(0,1fr) 78px 38px; gap: 8px; }
  .product-row .price-field { grid-column: 1/3; }
  .product-row .remove-row { grid-column: 3; grid-row: 1; }
  .toolbar { align-items: stretch; }
  .toolbar .field { flex: 1; }
  .detail-list { grid-template-columns: 1fr; }
  .inline-form { align-items: stretch; flex-direction: column; }
  .inline-form select,.inline-form input { width: 100%; }
  .brand-account-controls { min-width: 190px; }
  .brand-account-password-form input { width: 100%; }
  .website-studio-layout { grid-template-columns: 1fr; }
  .website-studio-nav { position: relative; top: auto; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 5px; padding: 8px; }
  .studio-nav-heading,.studio-nav-note { display: none; }
  .website-studio-nav > a { flex: none; gap: 6px; padding: 8px; border: 0; border-bottom: 2px solid transparent; font-size: 9px; }
  .website-studio-nav > a:hover,.website-studio-nav > a.is-active { border-bottom-color: #7067ec; }
  .public-site-admin-intro { align-items: flex-start; flex-direction: column; }
  .public-site-admin-intro h2 { font-size: 23px; }
  .public-site-admin-form .card { padding: 18px; }
  .public-site-admin-actions { align-items: flex-start; flex-direction: column; }
  .public-site-admin-actions .btn { width: 100%; }
  .overview-welcome { min-height: 190px; gap: 12px; padding: 22px; }
  .overview-welcome-panel { width: 175px; padding: 13px; }
  .overview-welcome-panel > strong { font-size: 29px; }
  .overview-side-stack { grid-template-columns: 1fr; }
  .overview-shortcut-card { grid-column: auto; }
  .overview-chart { gap: 7px; padding-inline: 1px; }
  .overview-chart-track { width: min(100%,24px); }
  .overview-grid .card { padding: 18px; }
  .login-page { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .login-panel { min-height: 100vh; padding: 24px; }
  .login-brand { display: flex; padding: 0 0 24px; }
  .login-brand .brand-wordmark { color: #29283c; }
  .login-brand .brand-wordmark small { color: var(--muted); }
  .login-panel-mark { top: 0; right: 0; }
}
@media (max-width: 500px) {
  .content { padding: 21px 13px 35px; }
  .topbar { gap: 9px; padding-inline: 12px; }
  .workspace-status { display: none; }
  .overview-welcome { display: block; min-height: 0; padding: 21px 18px; }
  .overview-welcome-copy > p { max-width: 290px; }
  .overview-welcome-meta { margin-top: 13px; }
  .overview-welcome-panel { display: none; }
  .overview-stats { gap: 9px; }
  .overview-stats .stat-card { min-height: 106px; padding: 12px; }
  .overview-chart { height: 138px; gap: 5px; }
  .overview-chart-count,.overview-chart-day,.overview-chart-date { font-size: 7px; }
  .overview-chart-legend { font-size: 7px; }
  .overview-recent-card .card-head { align-items: flex-start; flex-direction: column; }
  .overview-recent-card .btn { align-self: flex-start; }
  .overview-grid .card { padding: 16px; }
  .form-grid,.form-grid.three { grid-template-columns: 1fr; }
  .category-grid, .product-grid { grid-template-columns: 1fr; }
  .order-form-grid, .order-picker-grid { grid-template-columns: 1fr; }
  .order-cart-item-fields { grid-template-columns: 1fr 1fr; }
  .order-cart-item-fields label:last-child { grid-column: 1/-1; }
  .variant-row { grid-template-columns: 1fr 1fr 34px; }
  .field.full { grid-column: 1; }
  .check-grid,.staff-permission-list { grid-template-columns: 1fr 1fr; }
  .page-head h1 { font-size: 25px; }
  .card-head { align-items: flex-start; }
  .card-head > .btn { flex: none; }
  .public-site-admin-intro h2 { font-size: 22px; }
  .login-panel { padding: 16px; }
  .login-box { padding: 25px 20px; }
  .login-box h2 { font-size: 23px; }
}

.language-switcher { display: flex; width: fit-content; flex-wrap: wrap; align-items: center; gap: 5px; }
.language-switcher select { width: auto; min-width: 116px; min-height: 35px; padding: 5px 28px 5px 10px; border-color: rgba(255,255,255,.14); border-radius: 8px; background: #2a2938; color: #f0eff7; font-size: 10px; font-weight: 700; cursor: pointer; }
.language-switcher select option { background: #fff; color: #222333; }
.language-switcher select:focus-visible { outline: 2px solid rgba(199,237,97,.55); outline-offset: 2px; }
.sidebar > .language-switcher { margin: -6px 3px 17px; }
.login-box > .language-switcher { margin: -11px 0 21px; }
.login-box > .language-switcher select { border-color: #e9e8ef; background: #fff; color: #48475a; }
.login-box > .language-switcher select:focus-visible { outline-color: rgba(102,93,242,.45); }
.language-switcher-public select { min-width: 76px; min-height: 34px; padding: 5px 24px 5px 9px; border-color: rgba(27,51,83,.13); border-radius: 7px; background: #fff; color: #52617a; font-size: 9px; }
.language-switcher-public select:focus-visible { outline: 3px solid rgba(0,102,255,.3); outline-offset: 2px; }
@media (max-width: 820px) {
  .language-switcher-public select { min-width: 69px; min-height: 30px; padding: 5px 20px 5px 6px; font-size: 8px; }
}
@media (max-width: 560px) {
  .language-switcher-public select { min-width: 64px; min-height: 28px; padding: 4px 19px 4px 6px; font-size: 7px; }
}
html[lang="zh"],html[lang="lo"] { font-family:'DM Sans','Noto Sans SC','Noto Sans Lao',sans-serif; }
html[lang="zh"] body { font-family:'Noto Sans SC','DM Sans',sans-serif; line-height:1.72; }
html[lang="lo"] body { font-family:'Noto Sans Lao','DM Sans',sans-serif; line-height:1.8; }
html[lang="zh"] h1,html[lang="zh"] h2,html[lang="zh"] h3 { font-family:'Noto Sans SC','DM Sans',sans-serif; letter-spacing:0; }
html[lang="lo"] h1,html[lang="lo"] h2,html[lang="lo"] h3 { font-family:'Noto Sans Lao','DM Sans',sans-serif; letter-spacing:0; }
html[lang="zh"] .sidebar-caption-label,html[lang="lo"] .sidebar-caption-label { letter-spacing:.05em; }
html[lang="zh"] .sidebar-caption-label,html[lang="lo"] .sidebar-caption-label { letter-spacing:.05em; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .motion-item,.motion-ready .motion-item:not(.is-visible) { opacity: 1 !important; transform: none !important; }
  .overview-shortcuts > a { transition: none; }
}
/* Order workspace: tabs, history table, details, shipping label */
.order-workspace-tabs { margin-bottom: 16px; }
.order-workspace-tabs .tab-count { display: inline-flex; min-width: 18px; align-items: center; justify-content: center; margin-left: 4px; padding: 1px 5px; border-radius: 999px; background: #f0eef8; color: #57536f; font-size: 9px; }
.order-workspace-tabs a.active .tab-count { background: rgba(255,255,255,.16); color: #fff; }
.brand-orders-table { min-width: 940px; }
.brand-orders-table th, .brand-orders-table td { vertical-align: top; }
.order-note-cell { max-width: 210px; min-width: 150px; font-size: 10px; }
.order-note-cell small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.order-row-actions { flex-direction: row; flex-wrap: wrap; gap: 6px; min-width: 200px; }
.tracking-check { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.tracking-ok { background: #eaf7ef; color: #1d7a45; }
.tracking-warn { background: #fff5e3; color: #9a6400; }
.tracking-bad { background: #fdeceb; color: #b32d23; }
.tracking-muted { background: #f2f1f6; color: #6f6b80; }
.order-detail-dialog .app-dialog-body { max-height: min(78vh,720px); overflow: auto; }
.order-detail-items { min-width: 560px; }
.order-detail-items th, .order-detail-items td { font-size: 10px; }
.order-detail-summary { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: 14px; }
.order-detail-note { margin: 0 0 6px; padding: 10px 12px; border-radius: 10px; background: #f8f7fc; font-size: 11px; }
.order-shipping-cell { min-width: 230px; }
.order-shipping-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 10px; }
.order-shipping-form { display: grid; gap: 6px; margin-top: 6px; }
.order-shipping-form input { min-height: 32px; font-size: 10px; }
.order-shipping-form .btn { justify-self: start; }
.tracking-hint { display: block; color: var(--muted); font-size: 9px; }
.tracking-hint.is-valid { color: #1d7a45; }
.tracking-hint.is-invalid { color: #b32d23; }
.intl-table { min-width: 1080px; }
.intl-file-cell { min-width: 102px; vertical-align: top; }
.intl-file-box { display: grid; gap: 4px; justify-items: start; }
.intl-file-thumb { display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; color: #5d586f; text-align: center; cursor: pointer; }
.intl-file-thumb img,.intl-file-pdf { width: 64px; height: 64px; border: 1px solid #e6e3ef; border-radius: 9px; background: #f7f6fb; object-fit: cover; transition: transform .17s, box-shadow .17s; }
.intl-file-thumb:hover img,.intl-file-thumb:hover .intl-file-pdf { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(38,35,70,.14); }
.intl-file-pdf { display: grid; place-items: center; color: #665df2; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.intl-file-label { font-size: 9px; font-weight: 700; }
.intl-file-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.print-doc { margin: 0; padding: 22px 16px 40px; background: #f4f3f8; }
.print-toolbar { display: flex; max-width: 760px; align-items: center; justify-content: space-between; gap: 10px; margin: 0 auto 14px; }
.print-sheet { max-width: 760px; margin: 0 auto; padding: 26px 30px; border-radius: 14px; background: #fff; box-shadow: 0 10px 40px rgba(30,28,60,.10); color: #1f1e2b; }
.print-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid #262532; }
.print-head h1 { margin: 4px 0; font-size: 24px; }
.print-head p { margin: 0; color: #6b6879; font-size: 11px; }
.print-code { text-align: right; }
.print-code strong { display: block; font-size: 16px; }
.print-code small { color: #6b6879; font-size: 9px; }
.print-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.print-grid > div { padding: 10px 12px; border: 1px solid #ecebf2; border-radius: 10px; }
.print-grid span { display: block; color: #6b6879; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.print-grid strong { font-size: 13px; }
.print-grid p { margin: 2px 0 0; font-size: 11px; }
.print-items-title { margin: 18px 0 6px; font-size: 12px; }
.print-items { width: 100%; border-collapse: collapse; font-size: 11px; }
.print-items th, .print-items td { padding: 7px 8px; border-bottom: 1px solid #ecebf2; text-align: left; }
.print-items th { background: #faf9fd; color: #6b6879; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.print-items small { display: block; color: #6b6879; font-size: 9px; }
.print-totals { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #f6f4ff; font-size: 12px; }
.print-totals strong { font-size: 18px; }
.print-foot { display: flex; justify-content: space-between; gap: 14px; margin-top: 18px; padding-top: 10px; border-top: 1px dashed #ddd9e9; color: #6b6879; font-size: 9px; }
.print-stack { max-width: 760px; margin: 0 auto; }
.print-label + .print-label { margin-top: 22px; }
.print-brand-code { margin-top: 5px !important; color: #45435a !important; font-size: 11px !important; }
.print-brand-phone { margin-top: 2px !important; }
.print-fees { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 8px 12px; border: 1px dashed #e3e0ee; border-radius: 10px; color: #6b6879; font-size: 10px; }
.print-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.print-slip { margin-top: 22px; padding-top: 16px; border-top: 2px dashed #d8d4e6; }
.print-slip h2 { margin: 0 0 8px; font-size: 13px; }
.print-slip img { display: block; width: 100%; height: auto; border: 1px solid #ecebf2; border-radius: 8px; }
@media (max-width: 760px) {
  .order-detail-summary, .print-grid { grid-template-columns: 1fr; }
  .brand-orders-table { min-width: 820px; }
  .print-sheet { padding: 18px; }
}
@media print {
  .sidebar,.topbar,.page-head-actions,.no-print,.btn,.sidebar-scrim { display: none !important; }
  .main-area { margin: 0; }
  .content { max-width: none; padding: 0; }
  .card,.stat-card { box-shadow: none; break-inside: avoid; }
  .print-doc { padding: 0; background: #fff; }
  .print-toolbar { display: none !important; }
  .print-sheet { max-width: none; width: 100%; padding: 0; border-radius: 0; box-shadow: none; }
  .print-sheet a { color: inherit; text-decoration: none; }
  .print-stack { max-width: none; }
  .print-label + .print-label { break-before: page; margin-top: 0; }
  .print-slip { break-before: page; }
}
@media (max-width: 820px) {
  .warehouse-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .warehouse-product-card { grid-template-columns: 70px minmax(0,1fr); }
  .warehouse-product-card .product-thumb { width: 70px; height: 70px; }
}
@media (max-width: 500px) {
  .warehouse-product-grid { grid-template-columns: 1fr; }
  .warehouse-product-card { grid-template-columns: 64px minmax(0,1fr); }
  .warehouse-product-card .product-thumb { width: 64px; height: 64px; }
  .warehouse-color-row { grid-template-columns: minmax(0,1fr) 66px 32px; }
}