/* ShipDesk public v0.1.108 — styles. Bump this marker (and config.frontEnd) whenever a file in public/ changes. */
:root {
--bg: #f4f5f9;
--panel: #ffffff;
--line: #e7e9f0;
--line-strong: #d6d9e3;
--text: #0f172a;
--text-2: #334155;
--muted: #64748b;
--muted-2: #94a3b8;
--accent: #4f46e5;
--accent-hover: #4338ca;
--accent-soft: #eef2ff;
--accent-ring: rgba(79, 70, 229, .18);
--ok: #047857;
--ok-bg: #dcfce7;
--warn: #b45309;
--warn-bg: #fef3c7;
--err: #b91c1c;
--err-bg: #fee2e2;
--info: #1d4ed8;
--info-bg: #dbeafe;
--sidebar: #0b1220;
--sidebar-2: #131c31;
--sidebar-text: #94a3b8;
--radius: 12px;
--radius-sm: 8px;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
--shadow-md: 0 10px 30px rgba(15, 23, 42, .10);
--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }
body { font-family: var(--font); font-size: 13.5px; color: var(--text); background: var(--bg); line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0; display: flex; align-items: center; gap: 10px; }
h2 { font-size: 14px; font-weight: 650; letter-spacing: -.01em; margin: 0; }
p { margin: 0 0 8px; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.block { display: block; }
/* ---------- Shell: Veeqo-style dark top bar ---------- */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.topbar { --tb-bg: #101a2c; --tb-text: #e5e9f2; height: 44px; background: var(--tb-bg); color: var(--tb-text); display: flex; align-items: stretch; padding: 0 12px 0 0; position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 2px 8px rgba(2, 6, 23, .25); }
.tb-brand { display: inline-flex; align-items: center; justify-content: center; width: 48px; color: #fff; background: #1a56db; flex-shrink: 0; }
.tb-brand:hover { background: #1746b0; text-decoration: none; }
.tb-brand svg { width: 20px; height: 20px; }
.tb-nav { display: flex; align-items: stretch; margin-left: 4px; overflow-x: auto; scrollbar-width: none; }
.tb-nav::-webkit-scrollbar { display: none; }
.tb-item { display: inline-flex; align-items: center; padding: 0 14px; color: var(--tb-text); font-size: 13px; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; }
.tb-item:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.tb-item.active { background: rgba(26, 86, 219, .55); color: #fff; font-weight: 600; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.tb-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; color: var(--tb-text); background: transparent; border: 0; cursor: pointer; font: inherit; list-style: none; }
.tb-icon:hover, .tb-icon.active { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.tb-icon .icon { width: 19px; height: 19px; }
.tb-icon.busy { opacity: .5; pointer-events: none; }
.tb-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #e11d48; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--tb-bg); }
.tb-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 6px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; cursor: pointer; list-style: none; }
.tb-dd > summary::-webkit-details-marker { display: none; }
.tb-dd { position: relative; display: flex; align-items: center; }
.tb-dd .vq-menu.tb-menu { left: auto; right: 0; top: calc(100% + 8px); min-width: 250px; color: var(--text); }
.tb-menu .vq-menuitem { color: var(--text); }
.tb-menu .icon { width: 16px; height: 16px; color: var(--muted); }
.tb-menuempty { padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
/* the printer icon's "Printed today" list */
.tb-printmenu { min-width: 340px; max-width: 420px; }
.tb-printlist { max-height: 360px; overflow-y: auto; }
.tb-printjob { align-items: flex-start; }
.tb-printjob .icon { margin-top: 2px; flex: 0 0 auto; }
.tb-printjob-text { display: flex; flex-direction: column; min-width: 0; }
.tb-printjob-title { font-weight: 600; }
.tb-printjob-meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.tb-printrow { display: flex; align-items: center; gap: 4px; }
.tb-printrow .tb-printjob { flex: 1 1 auto; min-width: 0; }
.tb-unprint { flex: 0 0 auto; font: inherit; font-size: 11.5px; font-weight: 600; color: #b45309; background: #fff7ed; border: 1px solid #fdba74; border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.tb-unprint:hover { background: #ffedd5; }
.tb-unprint:disabled { opacity: .5; cursor: default; }
.print-history-actions { white-space: nowrap; }
.tb-badge-print { background: #2563eb; }
.tb-who { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 13px; }
.tb-who .muted { font-size: 11.5px; }
.tb-usermenu form { margin: 0; }
.tb-version { padding: 8px 10px 4px; font-size: 11px; border-top: 1px solid var(--line); margin-top: 4px; }
/* (legacy) */
.brand { color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; padding: 2px 0 18px; }
.brand-mark { width: 36px; height: 36px; border-radius: 9px; background: linear-gradient(135deg, #6366f1, #22d3ee); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; box-shadow: 0 6px 16px rgba(99, 102, 241, .35); flex-shrink: 0; }
.brand.big { font-size: 22px; padding: 0 0 6px; color: var(--text); justify-content: center; }
.main { flex: 1; padding: 22px 28px 90px; min-width: 0; }
.banner { background: linear-gradient(90deg, #fff7ed, #fffbeb); border: 1px solid #fed7aa; color: #7c2d12; padding: 9px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 12.5px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.page-head .actions { display: flex; gap: 8px; align-items: center; }
.crumbs { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat .label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.stat .value { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.stat .sub { font-size: 12px; color: var(--muted); }
.stat.accent { background: linear-gradient(135deg, #4f46e5, #6366f1); border-color: transparent; color: #fff; }
.stat.accent .label, .stat.accent .sub { color: rgba(255, 255, 255, .78); }
@media (max-width: 1100px) { .stats { grid-template-columns: repeat(2, 1fr); } }
/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 550; cursor: pointer; line-height: 1.2; white-space: nowrap; box-shadow: var(--shadow-sm); transition: background .12s, box-shadow .12s, transform .05s; }
.btn:hover { background: #f8fafc; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(79, 70, 229, .3), 0 4px 12px rgba(79, 70, 229, .18); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }
.btn-ghost:hover { background: #eef0f5; color: var(--text); }
.btn-danger { color: var(--err); }
.btn-danger:hover { background: var(--err-bg); }
.btn-sm { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.btn-block { width: 100%; justify-content: center; }
.btn.busy { position: relative; color: transparent !important; }
.btn.busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.btn:not(.btn-primary).busy::after { border-color: rgba(15, 23, 42, .15); border-top-color: var(--text); }
@keyframes spin { to { transform: rotate(360deg); } }
/* ---------- Toolbar ---------- */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.tabs { display: inline-flex; gap: 2px; background: #e9ebf2; padding: 3px; border-radius: 10px; }
.tab { padding: 6px 12px; border-radius: 8px; color: var(--muted); font-weight: 550; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.tab:hover { text-decoration: none; color: var(--text); }
.tab.active { background: #fff; color: var(--text); box-shadow: var(--shadow-sm); }
.tab .count, .chip .count { background: rgba(15, 23, 42, .08); border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 600; }
.tab.active .count { background: var(--accent-soft); color: var(--accent); }
.search { position: relative; }
.search input { width: 320px; max-width: 100%; padding-left: 34px; }
.search::before { content: ""; position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: url("data:image/svg+xml;utf8,") no-repeat center / contain; pointer-events: none; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.chip { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; font-size: 12.5px; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { text-decoration: none; color: var(--text); border-color: var(--muted-2); }
.chip.active { background: var(--text); color: #fff; border-color: var(--text); }
.chip.active .count { background: rgba(255, 255, 255, .2); }
/* ---------- Floating bulk bar ---------- */
.bulkbar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: #0f172a; color: #fff; padding: 10px 12px 10px 18px; border-radius: 999px; box-shadow: 0 16px 40px rgba(15, 23, 42, .35); z-index: 40; font-size: 13.5px; animation: rise .18s ease-out; }
.bulkbar .btn { border-radius: 999px; }
.bulkbar .btn-ghost { color: #cbd5e1; }
.bulkbar .btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.bulkbar .btn:not(.btn-primary):not(.btn-ghost) { background: #1e293b; border-color: #334155; color: #fff; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* ---------- Tables ---------- */
.table-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; box-shadow: var(--shadow-sm); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th, .table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 650; background: #fafbfd; position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.table tbody tr { transition: background .1s; }
.table tbody tr:hover { background: #f8f9fc; }
.table tbody tr:last-child td { border-bottom: 0; }
.table.compact th, .table.compact td { padding: 8px 10px; }
.table td.empty { text-align: center; color: var(--muted); padding: 44px; }
.w-check { width: 36px; }
.w-actions { width: 96px; text-align: right; }
tr.row-busy { opacity: .5; }
tr.row-done { background: #f0fdf4 !important; }
tr.row-error { background: #fef2f2 !important; }
tr.selected { background: var(--accent-soft) !important; }
input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
/* Orders table specifics */
.orders-table td { font-size: 13px; }
.order-cell .order-name { font-weight: 650; font-size: 13.5px; }
.order-cell .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.customer-cell .name { font-weight: 650; }
.customer-cell .addr { color: var(--text-2); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.customer-cell .contact { color: var(--muted); font-size: 11.5px; margin-top: 3px; }
.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 240px; }
.items li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: baseline; }
.items .qty { display: inline-flex; justify-content: center; align-items: center; min-width: 30px; padding: 1px 6px; border-radius: 6px; background: #eef0f5; font-weight: 650; font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.items .qty.multi { background: var(--accent-soft); color: var(--accent); }
.items .title { font-size: 12.5px; line-height: 1.35; }
.items .sku { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.items .more { color: var(--muted); font-size: 12px; grid-column: 2; }
.weight-cell .w { font-weight: 600; font-variant-numeric: tabular-nums; }
.weight-cell .src { font-size: 11px; color: var(--muted-2); }
.weight-cell .src.est { color: var(--warn); }
.row-service { max-width: 210px; font-size: 12.5px; padding: 6px 8px; }
.svc-name { font-weight: 550; font-size: 12.5px; }
.svc-provider { font-size: 11.5px; color: var(--muted); }
/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 650; letter-spacing: .01em; background: #eef0f5; color: #334155; white-space: nowrap; line-height: 1.5; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.intl { background: #ede9fe; color: #5b21b6; }
.ch-temu { background: #ffedd5; color: #9a3412; }
.ch-amazon { background: #fef3c7; color: #92400e; }
.ch-ebay { background: #fee2e2; color: #991b1b; }
.ch-tiktok { background: #0f172a; color: #fff; }
.ch-etsy { background: #ffe4e6; color: #9f1239; }
.ch-shopify { background: #d1fae5; color: #065f46; }
.ch-pos, .ch-other { background: #eef0f5; color: #334155; }
.ch-manual { background: #e0f2fe; color: #075985; }
.no-form textarea { font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 9px; width: 100%; resize: vertical; }
.no .od-footer { justify-content: flex-end; }
#items-table input { padding: 6px 8px; }
#items-table input.num { text-align: right; }
.st-open { background: var(--info-bg); color: var(--info); }
.st-labelled { background: var(--warn-bg); color: var(--warn); }
.st-shipped, .st-created { background: var(--ok-bg); color: var(--ok); }
.st-cancelled, .st-voided, .st-error { background: var(--err-bg); color: var(--err); }
.st-archived { background: #eef0f5; color: #475569; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
/* ---------- Cards & forms ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .grid-2 { grid-template-columns: 1fr; } .main { padding: 16px 16px 90px; } }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; margin-bottom: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.field > span { font-weight: 600; color: var(--text-2); display: flex; gap: 6px; align-items: center; font-size: 12.5px; }
.field small { line-height: 1.35; }
input[type=text], input[type=password], input[type=search], input[type=number], input[type=email], input:not([type]), select, textarea { font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; color: var(--text); width: 100%; transition: border-color .12s, box-shadow .12s; }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 9px center; background-size: 14px; padding-right: 30px; }
.inline-check { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; }
.inline-check input { margin-top: 3px; }
.stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.service-picker { display: flex; gap: 8px; align-items: center; }
.service-picker select { flex: 1; }
.note { margin-top: 10px; padding: 9px 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-sm); font-size: 12.5px; }
details.help { margin-top: 8px; font-size: 13px; }
details.help summary { cursor: pointer; color: var(--accent); font-weight: 500; }
details.help p { margin-top: 8px; color: var(--text-2); }
.steps { margin: 8px 0 4px 18px; padding: 0; display: flex; flex-direction: column; gap: 6px; color: var(--text-2); }
.steps li { line-height: 1.5; }
.steps .mono { font-size: 11.5px; word-break: break-all; }
.alert { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 13px; }
.alert-warn { background: var(--warn-bg); color: #78350f; border: 1px solid #fcd34d; }
.alert-info { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }
.alert-error { background: var(--err-bg); color: var(--err); border: 1px solid #fca5a5; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
/* ---------- Login ---------- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: radial-gradient(1200px 600px at 20% -10%, #e0e7ff 0%, transparent 60%), radial-gradient(900px 500px at 100% 110%, #cffafe 0%, transparent 55%), var(--bg); }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 32px; width: 380px; max-width: 92vw; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 14px; text-align: center; }
.login-card .field { text-align: left; }
/* ---------- Toasts ---------- */
.toasts { position: fixed; right: 20px; top: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 60; max-width: 440px; }
.toast { background: #0f172a; color: #fff; padding: 11px 14px; border-radius: 10px; font-size: 13px; box-shadow: var(--shadow-md); animation: fade .18s ease-out; border-left: 4px solid #64748b; }
.toast.ok { border-left-color: #22c55e; }
.toast.err { border-left-color: #ef4444; }
.toast.warn { border-left-color: #f59e0b; }
@keyframes fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* =====================================================================
Orders queue — Veeqo-style layout
===================================================================== */
.page-orders .main { background: #fff; padding: 0 0 40px; }
:root { --vq-blue: #1a56db; --vq-blue-dark: #1746b0; --vq-blue-soft: #e8f0fe; --vq-border: #d0d5dd; --vq-line: #e4e7ec; --vq-text: #101828; --vq-text-2: #344054; --vq-muted: #667085; --vq-pill: #e4e7ec; }
.vq { font-size: 12.5px; color: var(--vq-text); }
.vq-ico { width: 15px; height: 15px; flex-shrink: 0; }
/* Views strip (saved views with live counts, Veeqo-style) */
.vq-views { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 8px 0 10px; border-bottom: 1px solid var(--vq-line); background: #fff; position: sticky; top: 44px; z-index: 20; }
.vq-viewstrip { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.vq-viewstrip::-webkit-scrollbar { display: none; }
.vq-view { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 6px; color: var(--vq-text); font-size: 13px; font-weight: 600; white-space: nowrap; max-width: 320px; flex-shrink: 0; }
.vq-view:hover { background: #f2f4f7; text-decoration: none; }
.vq-viewname { overflow: hidden; text-overflow: ellipsis; }
.vq-viewcount { font-size: 11.5px; color: var(--vq-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.vq-view.active { background: var(--vq-blue-soft); color: var(--vq-blue); }
.vq-view.active .vq-viewcount { background: var(--vq-blue); color: #fff; border-radius: 5px; padding: 1px 7px; font-weight: 700; }
.vq-view.attention .vq-viewcount { background: #fee4e2; color: #b42318; border-radius: 5px; padding: 1px 6px; font-weight: 600; }
.vq-view.attention.active .vq-viewcount { background: #b42318; color: #fff; }
.vq-view.tone-orange .vq-viewcount { background: #ffedd5; color: #c2410c; border-radius: 5px; padding: 1px 6px; font-weight: 600; }
.vq-viewshared { display: inline-flex; color: var(--vq-muted); opacity: 0.8; }
.vq-viewshared svg { width: 13px; height: 13px; }
.vq-view.active .vq-viewshared { color: var(--vq-blue); }
.vq-viewsmenu .vq-check { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; color: var(--vq-muted); cursor: pointer; }
.vq-view.tone-orange.active { background: #ffedd5; color: #c2410c; }
.vq-view.tone-orange.active .vq-viewcount { background: #ea580c; color: #fff; }
.vq-viewmenu { margin: 0 4px 0 -2px; }
.vq-viewmore, .vq-viewscroll { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; border: 0; background: transparent; color: var(--vq-text-2); cursor: pointer; list-style: none; padding: 0; }
.vq-viewmore { color: var(--vq-blue); background: var(--vq-blue-soft); border-radius: 0 6px 6px 0; width: 26px; height: 32px; }
.vq-viewmore:hover, .vq-viewscroll:hover { background: #e4e7ec; }
.vq-viewscroll { border: 1px solid var(--vq-border); background: #fff; }
.vq-viewtools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; padding-left: 6px; border-left: 1px solid var(--vq-line); }
.vq-viewsdd > summary::-webkit-details-marker { display: none; }
.vq-viewsmenu { min-width: 320px; max-width: 420px; padding: 10px 12px 8px; }
.vq-viewsmenu .small { margin: 0 0 8px; }
.vq-viewsmenu .vq-menuitem { padding: 8px 8px; }
.vq-viewsmenu .vq-menuitem.danger { color: #b42318; }
.vq-viewhint { margin-top: 8px !important; }
.vq-viewform { display: flex; gap: 6px; margin: 4px 0 6px; }
.vq-input { flex: 1; height: 34px; padding: 0 10px; border: 1px solid var(--vq-border); border-radius: 6px; font: inherit; font-size: 13px; min-width: 0; }
.vq-input:focus { border-color: var(--vq-blue); outline: none; box-shadow: 0 0 0 3px rgba(26, 86, 219, .15); }
.vq-viewsdd .vq-menu { left: auto; right: 0; }
.vq-viewmenu .vq-menu { left: 0; right: auto; }
.vq-body { padding: 12px 22px 0; }
.vq-spacer { flex: 1; }
.vq-sync { font-size: 12px; padding-right: 6px; }
/* Rows of controls */
.vq-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.vq-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--vq-border); background: #fff; color: var(--vq-text-2); border-radius: 6px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); list-style: none; }
.vq-btn:hover { background: #f9fafb; text-decoration: none; }
.vq-btn.primary { background: var(--vq-blue); border-color: var(--vq-blue); color: #fff; }
.vq-btn.primary:hover { background: var(--vq-blue-dark); }
.vq-btn.busy { opacity: .6; pointer-events: none; }
.vq-search { flex: 1; display: flex; align-items: center; position: relative; min-width: 260px; }
.vq-search input { height: 36px; border: 1px solid var(--vq-border); border-radius: 6px; padding: 0 40px 0 12px; font-size: 13px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.vq-search input:focus { border-color: var(--vq-blue); box-shadow: 0 0 0 3px rgba(26, 86, 219, .15); }
.vq-searchbtn { position: absolute; right: 4px; top: 4px; height: 28px; width: 32px; border: 0; background: transparent; color: var(--vq-muted); border-radius: 5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.vq-searchbtn:hover { background: #f2f4f7; color: var(--vq-text); }
.vq-searchbtn .vq-ico { width: 17px; height: 17px; }
/* Filter chips */
.vq-chiprow { gap: 6px; }
.vq-clear { color: var(--vq-blue); text-decoration: underline; font-size: 12.5px; margin-right: 4px; }
.vq-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px 0 10px; background: #eef0f3; border-radius: 6px; font-size: 12px; color: var(--vq-text-2); white-space: nowrap; }
.vq-chip .vq-ico { width: 13px; height: 13px; color: var(--vq-muted); }
.vq-chipselect { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0 2px; font: inherit; font-size: 12px; font-weight: 600; color: var(--vq-text); width: auto; cursor: pointer; }
.vq-chipselect:focus { outline: none; box-shadow: none; }
#product-filter { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.vq-x { color: var(--vq-muted); font-weight: 700; padding: 0 2px; text-decoration: none; }
.vq-x:hover { color: var(--vq-text); }
/* "Dispatch by" chip + pop-over (Veeqo-style: pick one, or a custom range, then Apply) */
.vq-duedd > summary.vq-chip { cursor: pointer; }
.vq-duedd > summary.vq-chip strong { color: var(--vq-text); font-weight: 600; margin-left: 2px; }
.vq-duedd[open] > summary.vq-chip { background: #e4e7ec; }
.vq-duedd.align-right .vq-menu { left: auto; right: 0; }
.vq-duemenu { min-width: 300px; padding: 10px 12px 12px; }
.vq-duetitle { font-size: 12px; font-weight: 600; color: var(--vq-text-2); margin: 2px 0 8px; }
.vq-dueopt { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 6px; font-size: 13px; color: var(--vq-text); cursor: pointer; }
.vq-dueopt:hover { background: #f2f4f7; }
.vq-dueopt input { margin: 0; accent-color: var(--vq-blue); }
.vq-dueopt small { margin-left: auto; font-size: 11px; }
.vq-duerange { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 6px 2px 28px; }
.vq-duerange label { display: grid; gap: 3px; font-size: 11.5px; color: var(--vq-text-2); }
.vq-duerange input[type=date] { height: 32px; padding: 0 8px; border: 1px solid var(--vq-border); border-radius: 6px; font: inherit; font-size: 12.5px; width: 100%; }
.vq-dueactions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--vq-line); }
.vq-duedate { font-size: 10.5px; color: var(--vq-muted); margin-top: 3px; white-space: nowrap; }
/* Actions row */
.vq-actionrow { margin-top: 2px; }
.vq-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--vq-border); border-radius: 6px; background: #fff; color: var(--vq-text-2); }
.vq-iconbtn:hover { background: #f9fafb; text-decoration: none; }
.vq-summary { font-size: 13px; color: var(--vq-text-2); margin-left: 4px; }
.vq-selcount { color: var(--vq-blue); font-weight: 600; margin-right: 8px; }
.vq-pager { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; white-space: nowrap; }
.vq-pg { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; color: var(--vq-text-2); }
.vq-pg:hover { background: #f2f4f7; text-decoration: none; }
.vq-pg.disabled { opacity: .35; pointer-events: none; }
.vq-pageform { display: inline-flex; align-items: center; gap: 6px; margin: 0 4px; }
.vq-pageinput { width: 56px; height: 30px; text-align: center; padding: 0 6px; border: 1px solid var(--vq-border); border-radius: 6px; font-size: 12.5px; }
.vq-pages { font-size: 12.5px; color: var(--vq-muted); }
.vq-select { height: 30px; padding: 0 26px 0 8px; font-size: 12.5px; border: 1px solid var(--vq-border); border-radius: 6px; background-color: #fff; width: auto; }
.vq-per { margin-left: 6px; }
/* Dropdown menus */
.vq-dd { position: relative; }
.vq-dd > summary { list-style: none; }
.vq-dd > summary::-webkit-details-marker { display: none; }
.vq-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 280px; background: #fff; border: 1px solid var(--vq-line); border-radius: 8px; box-shadow: 0 12px 32px rgba(16, 24, 40, .14); padding: 6px; }
.vq-menuitem { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: transparent; border-radius: 6px; font: inherit; font-size: 13px; color: var(--vq-text); cursor: pointer; }
.vq-menuitem:hover { background: #f2f4f7; }
.vq-menuitem .vq-ico { color: var(--vq-muted); }
.vq-menusep { height: 1px; background: var(--vq-line); margin: 6px 4px; }
.vq-filters { display: grid; gap: 10px; padding: 12px; min-width: 300px; }
.vq-filters label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--vq-text-2); }
.vq-filters .vq-select { width: 100%; height: 34px; }
/* Table */
.vq-tablewrap { border: 1px solid var(--vq-line); border-radius: 8px; overflow: auto; }
/* Fixed layout: every column but Products has a set width, so Products always gets the rest (≥ 280px at the min width). */
.vq-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1440px; table-layout: fixed; }
.vq-table th { position: sticky; top: 0; z-index: 2; background: #fff; text-align: left; font-size: 12px; font-weight: 600; color: var(--vq-text-2); padding: 10px 10px; border-bottom: 1px solid var(--vq-line); white-space: nowrap; }
.vq-table td { padding: 10px 10px; overflow: hidden; border-bottom: 1px solid var(--vq-line); vertical-align: middle; font-size: 12px; color: var(--vq-text-2); line-height: 1.4; }
.vq-table tbody tr:nth-child(even) td { background: #f9fafb; }
.vq-table tbody tr:hover td { background: #f2f6ff; }
.vq-table tbody tr:last-child td { border-bottom: 0; }
.vq-table tr.selected td { background: #e8f0fe !important; }
.vq-table tr.row-busy td { opacity: .55; }
.vq-table tr.row-done td { background: #ecfdf3 !important; }
.vq-table tr.row-error td { background: #fef3f2 !important; }
.vq-table .c-check { width: 36px; text-align: center; }
.vq-table .c-store { width: 74px; }
.vq-table .c-order { width: 150px; }
.vq-table .c-customer { width: 170px; }
.vq-table .c-sku { width: 180px; }
.vq-table .c-printed { width: 44px; text-align: center; }
.vq-table .c-products { /* flexible — takes whatever is left */ }
.vq-table .c-due { width: 86px; }
.vq-table .c-delivery { width: 196px; }
.vq-table .c-total { width: 80px; }
.vq-table .c-tags { width: 100px; }
.vq-table .c-weight { width: 84px; }
.vq-table .c-actions { width: 96px; text-align: center; }
.vq-table th.c-store .vq-ico, .vq-table th.c-due .vq-ico, .vq-table th.c-printed .vq-ico { color: var(--vq-muted); }
.vq-table th { border-right: 1px solid var(--vq-line); }
.vq-table th.c-actions, .vq-table th:last-child { border-right: 0; }
.vq-table th.c-check { border-right: 0; }
/* Printed column */
.vq-printed { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; color: var(--vq-muted); }
.vq-printed .vq-ico { width: 16px; height: 16px; }
.vq-printed.none { color: #c0c6d0; }
.vq-chipwrap { display: inline-flex; align-items: center; gap: 2px; }
.vq-storepick { position: relative; display: inline-block; }
.vq-storepick > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.vq-storepick > summary::-webkit-details-marker { display: none; }
.vq-storemenu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 260px; max-width: 360px; max-height: 60vh; overflow: auto; padding: 8px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .12); }
.vq-storeopt { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 6px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.vq-storeopt:hover { background: var(--bg-soft, #f3f4f8); }
.vq-storeall { border-bottom: 1px solid var(--line, #e5e7eb); margin-bottom: 4px; padding-bottom: 8px; font-weight: 600; }
.vq-storehint { padding: 6px 6px 2px; white-space: normal; max-width: 300px; }
.vq-filterstores { display: flex; align-items: center; gap: 8px; }
.vq-labelcount { display: inline-block; margin-left: 3px; padding: 1px 5px; border-radius: 999px; background: #e0e7ff; color: #3730a3; font-size: 10.5px; font-weight: 700; line-height: 1.3; text-decoration: none; vertical-align: middle; }
.vq-labelcount:hover { background: #c7d2fe; }
.vq-saved { display: inline-block; margin-left: 3px; padding: 1px 6px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: 10.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; vertical-align: middle; }
.vq-printed.todo { color: #b54708; background: #fef0c7; }
.vq-printed.ok { color: #027a48; background: #d1fadf; }
a.vq-printed:hover { text-decoration: none; box-shadow: 0 0 0 2px var(--vq-blue-soft); }
/* Tags column */
.vq-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.vq-tag { display: inline-block; max-width: 100%; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 500; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vq-orderline { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.vq-noteico { display: inline-flex; color: var(--vq-muted); margin-bottom: 4px; }
.vq-noteico .vq-ico { width: 14px; height: 14px; }
.vq-noteico:hover { color: var(--vq-blue); }
.vq-prime { display: inline-block; font-weight: 800; font-style: italic; color: #1a56db; letter-spacing: -.01em; }
.vq-empty { text-align: center; color: var(--vq-muted); padding: 48px 20px !important; font-size: 13px; }
.vq-sort { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.vq-sort:hover { text-decoration: none; color: var(--vq-blue); }
.vq-sort .vq-ico { width: 13px; height: 13px; color: var(--vq-muted); }
.vq-sort.active .vq-ico { color: var(--vq-blue); }
/* Cells */
.vq-pill { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 500; background: var(--vq-pill); color: var(--vq-text-2); white-space: nowrap; line-height: 1.5; margin-bottom: 4px; }
.vq-pill.status.st-labelled { background: #fef0c7; color: #93370d; }
.vq-pill.status.st-shipped { background: #d1fadf; color: #027a48; }
.vq-pill.status.st-elsewhere { background: #ffedd5; color: #c2410c; }
.vq-pill.status.st-merged { background: #fce7f3; color: #9d174d; }
/* Customers with several open orders: pink row, a pill saying how many, and a one-click Merge */
.vq-table tbody tr.row-hl-pink td, .bulk-row.row-hl-pink td { background: #fdf2f8; }
.vq-table tbody tr.row-hl-pink:hover td { background: #fce7f3; }
.vq-table tbody tr.row-hl-pink td:first-child { box-shadow: inset 4px 0 0 #ec4899; }
.vq-pill.vq-dup { background: #fce7f3; color: #9d174d; }
.vq-mergebtn { height: 20px; padding: 0 8px; border: 1px solid #f9a8d4; border-radius: 999px; background: #fff; color: #9d174d; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.vq-mergebtn:hover { background: #fce7f3; }
.vq-pill.vq-merged { background: #fce7f3; color: #9d174d; text-decoration: none; }
a.vq-pill.vq-merged:hover { background: #fbcfe8; }
.vq-mtag { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; background: #fce7f3; color: #9d174d; font-size: 10px; font-weight: 600; text-decoration: none; vertical-align: 1px; }
.od-merged .vq-btn { margin-left: 6px; }
/* Orders shipped from another platform (Veeqo, Shopify admin, Seller Central…): orange so the team can tell at a glance */
.vq-table tr.row-external td { background: #fff7ed; }
.vq-table tr.row-external td:first-child { box-shadow: inset 4px 0 0 #f97316; }
.vq-table tr.row-external:hover td { background: #ffedd5; }
.vq-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vq-muted); margin: 8px 0 -2px; }
.vq-backfill { color: #c2410c; font-weight: 600; }
.vq-rulehint { font-size: 10.5px; color: #6d28d9; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Rows a shipping rule highlights (e.g. out-of-area postcodes → Royal Mail only) */
.vq-table tbody tr.row-hl-yellow td, .bulk-row.row-hl-yellow td { background: #fefce8; }
.vq-table tbody tr.row-hl-yellow:hover td { background: #fef9c3; }
.vq-table tbody tr.row-hl-yellow td:first-child { box-shadow: inset 4px 0 0 #eab308; }
.vq-table tbody tr.row-hl-orange td, .bulk-row.row-hl-orange td { background: #fff7ed; }
.vq-table tbody tr.row-hl-orange:hover td { background: #ffedd5; }
.vq-table tbody tr.row-hl-orange td:first-child { box-shadow: inset 4px 0 0 #f97316; }
.vq-table tbody tr.row-hl-red td, .bulk-row.row-hl-red td { background: #fef2f2; }
.vq-table tbody tr.row-hl-red:hover td { background: #fee2e2; }
.vq-table tbody tr.row-hl-red td:first-child { box-shadow: inset 4px 0 0 #ef4444; }
.vq-table tbody tr.row-hl-green td, .bulk-row.row-hl-green td { background: #f0fdf4; }
.vq-table tbody tr.row-hl-green:hover td { background: #dcfce7; }
.vq-table tbody tr.row-hl-green td:first-child { box-shadow: inset 4px 0 0 #22c55e; }
.vq-table tbody tr.row-hl-blue td, .bulk-row.row-hl-blue td { background: #eff6ff; }
.vq-table tbody tr.row-hl-blue:hover td { background: #dbeafe; }
.vq-table tbody tr.row-hl-blue td:first-child { box-shadow: inset 4px 0 0 #3b82f6; }
.vq-tag.rule-tag, .od-tag.rule-tag { font-weight: 700; border: 1px solid transparent; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.rule-tag.hl-yellow { background: #fef08a !important; color: #713f12; border-color: #facc15 !important; }
.rule-tag.hl-orange { background: #fed7aa !important; color: #7c2d12; border-color: #fb923c !important; }
.rule-tag.hl-red { background: #fecaca !important; color: #7f1d1d; border-color: #f87171 !important; }
.rule-tag.hl-green { background: #bbf7d0 !important; color: #14532d; border-color: #4ade80 !important; }
.rule-tag.hl-blue { background: #bfdbfe !important; color: #1e3a8a; border-color: #60a5fa !important; }
.od-status.od-ruletag { margin-left: 8px; }
.od-status.od-ruletag.hl-yellow { background: #eab308; color: #1f2937; }
.od-status.od-ruletag.hl-orange { background: #f97316; }
.od-status.od-ruletag.hl-red { background: #ef4444; }
.od-status.od-ruletag.hl-green { background: #22c55e; }
.od-status.od-ruletag.hl-blue { background: #3b82f6; }
.od.od-hl-yellow .od-head { box-shadow: inset 0 -4px 0 #eab308; }
.rules-table .rule-postcodes { width: 180px; min-height: 40px; font-family: var(--mono); font-size: 11.5px; padding: 5px 8px; border-radius: 6px; resize: vertical; }
.rules-table .rule-tag { width: 120px; }
.rules-table input[type=text], .rules-table input[type=number], .rules-table select { padding: 5px 8px; font-size: 12.5px; border-radius: 6px; }
.rules-table .rule-min, .rules-table .rule-max { width: 92px; }
.rules-table .rule-channels { width: 120px; }
.rules-table .rule-name { min-width: 160px; }
.rules-table .rule-service { min-width: 260px; max-width: 420px; }
.rules-table td { vertical-align: top; }
.vq-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid #fdba74; background: #fff7ed; box-shadow: inset 3px 0 0 #f97316; }
.alert.alert-orange { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.vq-pill.status.st-cancelled, .vq-pill.status.st-archived { background: #fee4e2; color: #b42318; }
.vq-pill.warnpill { background: #fee4e2; color: #b42318; margin-left: 4px; }
.vq-pill.due-today { background: #fdf1c7; color: #7a5a00; margin: 0; }
.vq-pill.due-tomorrow { background: #e0f2fe; color: #075985; margin: 0; }
.vq-pill.due-later { background: #eef0f3; color: var(--vq-text-2); margin: 0; }
.vq-pill.due-overdue { background: #fee4e2; color: #b42318; margin: 0; font-weight: 600; }
.od-due-overdue { color: #b42318; }
.od-due-today { color: #7a5a00; }
.vq-pill.paid { background: #e4e7ec; color: #344054; }
.vq-pill.unpaid { background: #fef0c7; color: #93370d; }
.vq-link { display: block; color: var(--vq-blue); text-decoration: underline; font-size: 12.5px; font-weight: 500; }
.vq-ref { font-size: 10.5px; color: var(--vq-muted); font-family: var(--mono); }
.vq-date { font-size: 10.5px; color: var(--vq-muted); margin-top: 2px; }
.vq-shippedat { font-size: 10.5px; color: #027a48; font-weight: 600; margin-top: 1px; }
.vq-name { font-size: 12px; font-weight: 600; color: var(--vq-text); }
.vq-loc { display: flex; align-items: center; gap: 5px; color: var(--vq-blue); font-size: 12px; margin-top: 2px; }
.vq-flag { width: 16px; height: 8px; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); flex-shrink: 0; }
.vq-cc { font-size: 9.5px; font-weight: 700; background: #e4e7ec; color: #344054; border-radius: 3px; padding: 0 4px; }
.vq-addr { font-size: 11px; color: var(--vq-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vq-sku { font-size: 11.5px; color: var(--vq-text-2); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vq-sku.nosku { color: var(--vq-muted); font-family: var(--font); font-style: italic; }
/* SKU · Bin column: one line per order line — bin chip first, SKU after */
.vq-skuline { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 4px 2px 0; border-radius: 4px; }
.vq-skuline + .vq-skuline { margin-top: 2px; }
.vq-skuline.hit { background: #fff7e6; box-shadow: inset 2px 0 0 #f59e0b; padding-left: 5px; }
.vq-skuline .vq-sku { flex: 1; min-width: 0; }
.vq-skuline .vq-locchip { margin-right: 0; flex-shrink: 0; min-width: 30px; text-align: center; }
.vq-locchip.empty { background: transparent; color: var(--vq-muted); border: 1px dashed var(--vq-border); font-weight: 500; font-size: 10px; text-decoration: none; }
.vq-locchip.empty:hover { color: var(--vq-blue); border-color: var(--vq-blue); text-decoration: none; }
.vq-more { font-size: 11px; color: var(--vq-muted); }
.vq-delivery { font-size: 12px; margin-bottom: 4px; }
.row-service.vq-select { width: 100%; max-width: 100%; height: 28px; font-size: 11.5px; padding: 0 22px 0 6px; background-size: 12px; background-position: right 6px center; }
.vq-svc { font-size: 11.5px; color: var(--vq-muted); }
.vq-svcfull { font-size: 10.5px; color: var(--vq-muted); margin-top: 3px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vq-svcfull:empty { display: none; }
.vq-total { font-size: 12.5px; font-weight: 600; color: var(--vq-text); }
.vq-itemswrap { display: flex; align-items: flex-start; gap: 8px; }
.vq-itemlist { flex: 1; min-width: 0; }
.vq-item { font-size: 11.5px; color: var(--vq-text-2); }
/* Product lines: "2 × Product name (variant)" with the SKU underneath */
.vq-prod { display: flex; align-items: flex-start; gap: 7px; padding: 2px 4px 2px 0; border-radius: 4px; }
.vq-prod + .vq-prod { margin-top: 2px; }
.vq-prod.hit { background: #fff7e6; box-shadow: inset 2px 0 0 #f59e0b; padding-left: 5px; }
.vq-qty { flex-shrink: 0; min-width: 26px; text-align: right; font-size: 11.5px; font-weight: 500; color: var(--vq-text-2); border-radius: 4px; padding: 1px 3px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.vq-qty.multi { background: #fef0c7; color: #93370d; font-weight: 700; }
.vq-prodtext { min-width: 0; flex: 1; }
.vq-ptitle { font-size: 12px; font-weight: 500; color: var(--vq-blue); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vq-variant { font-weight: 500; color: var(--vq-text-2); }
.vq-prodtext .vq-sku { margin-top: 1px; }
.vq-chip.active { background: var(--vq-blue-soft); border-color: var(--vq-blue); }
.vq-productbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vq-plus { color: var(--vq-blue); display: inline-flex; padding: 2px; border-radius: 4px; flex-shrink: 0; }
.vq-plus:hover { background: var(--vq-blue-soft); }
.vq-units { font-size: 10.5px; color: var(--vq-muted); margin-top: 3px; }
.vq-weight { font-size: 12.5px; font-weight: 600; color: var(--vq-text); font-variant-numeric: tabular-nums; }
.vq-wsrc { font-size: 10.5px; color: var(--vq-muted); }
.vq-wsrc.est { color: #b54708; }
.vq-ship { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 30px; border-radius: 5px; border: 1px solid var(--vq-blue); background: var(--vq-blue); color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.vq-ship:hover { background: var(--vq-blue-dark); text-decoration: none; }
.vq-ship:disabled { opacity: .45; cursor: not-allowed; }
.vq-ship.secondary { background: #fff; color: var(--vq-blue); }
.vq-ship.secondary:hover { background: var(--vq-blue-soft); }
.vq-ship.busy { opacity: .6; pointer-events: none; }
.vq-footrow { margin-top: 10px; }
/* Account → change password: live rule checklist */
.pw-rules { list-style: none; margin: -4px 0 4px; padding: 0; display: grid; gap: 3px; font-size: 12px; color: var(--muted); grid-column: 1 / -1; }
.pw-rules li { padding-left: 22px; position: relative; }
.pw-rules li::before { content: ""; position: absolute; left: 2px; top: 3px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-strong); box-sizing: border-box; }
.pw-rules li.ok { color: var(--ok); }
.pw-rules li.ok::before { border-color: var(--ok); background: var(--ok) url("data:image/svg+xml;utf8,") no-repeat center / 9px; }
.pw-rules li.bad { color: var(--err); }
.pw-rules li.bad::before { border-color: var(--err); }
.pw-wrap { display: flex; gap: 6px; align-items: center; }
.pw-wrap input { flex: 1; }
.pw-eye { height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }
.pw-eye:hover { color: var(--text); }
.pw-error { grid-column: 1 / -1; }
#password-form .form-actions, #password-form > p { grid-column: 1 / -1; }
/* Products → aisle / bay / level pickers */
.loc-pick { display: inline-flex; align-items: center; gap: 4px; }
.loc-pick select { height: 30px; padding: 0 22px 0 8px; font-size: 12.5px; border: 1px solid var(--line-strong); border-radius: 6px; background-color: #fff; width: auto; background-size: 12px; background-position: right 6px center; }
.loc-pick select:disabled { opacity: .45; }
.loc-pick.saving { opacity: .6; pointer-events: none; }
.loc-code { display: inline-block; min-width: 44px; text-align: center; padding: 3px 7px; border-radius: 5px; background: #0f172a; color: #fff; font-family: var(--mono); font-size: 11.5px; font-weight: 600; margin-left: 4px; white-space: nowrap; }
.loc-code.empty { background: #eef0f3; color: var(--muted); font-weight: 500; padding: 3px 7px; }
/* A product kept in several places: + button, a chip per extra location (× removes), the row of pickers that adds one */
.loc-cell.saving { opacity: .6; pointer-events: none; }
.loc-more { width: 24px; height: 24px; margin-left: 2px; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; color: var(--vq-blue, #2563eb); font-size: 16px; line-height: 1; font-weight: 700; cursor: pointer; padding: 0; flex-shrink: 0; }
.loc-more:hover { background: #eff6ff; border-color: var(--vq-blue, #2563eb); }
.loc-extra { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.loc-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 3px 2px 7px; border-radius: 5px; background: #334155; color: #fff; font-family: var(--mono); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.loc-chip .loc-rm { border: 0; background: transparent; color: inherit; font-size: 13px; line-height: 1; padding: 0 3px; cursor: pointer; opacity: .65; }
.loc-chip .loc-rm:hover { opacity: 1; }
.loc-addpick { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 4px 6px; border: 1px dashed var(--line-strong); border-radius: 8px; background: #f8fafc; }
.loc-addpick[hidden] { display: none; }
.loc-addpick select { height: 28px; padding: 0 22px 0 8px; font-size: 12.5px; border: 1px solid var(--line-strong); border-radius: 6px; background-color: #fff; width: auto; background-size: 12px; background-position: right 6px center; }
.loc-addpick select:disabled { opacity: .45; }
.loc-addpick.saving { opacity: .6; pointer-events: none; }
.loc-addpick .loc-addsave { padding: 3px 9px; }
.loc-addpick .loc-addsave:disabled { opacity: .5; cursor: default; }
.loc-cancel { border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; }
.loc-cancel:hover { color: var(--text, #111); }
/* The queue / order page / bulk pop-up: the other places a product is kept are the lighter chips */
.vq-locchip.also { background: #64748b; }
/* Products → Box: chips for the boxes a product ships in + a drop-down to add one */
.box-pick { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; max-width: 260px; }
.box-pick.saving { opacity: .6; pointer-events: none; }
.box-pick select.box-add { height: 30px; padding: 0 22px 0 8px; font-size: 12.5px; border: 1px solid var(--line-strong); border-radius: 6px; background-color: #fff; width: auto; background-size: 12px; background-position: right 6px center; }
.box-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px 2px 7px; border-radius: 5px; background: #fef3c7; color: #78350f; border: 1px solid #fcd34d; font-family: var(--mono); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.box-chip.unknown { background: #f3f4f6; color: #6b7280; border-color: #d1d5db; text-decoration: line-through; }
.box-chip .box-rm { border: 0; background: transparent; color: inherit; font-size: 13px; line-height: 1; padding: 0 2px; cursor: pointer; opacity: .6; }
.box-chip .box-rm:hover { opacity: 1; }
.od-box .box-chip { padding: 1px 7px; }
.vq-box { display: inline-block; padding: 0 5px; border-radius: 4px; background: #fef3c7; color: #78350f; border: 1px solid #fcd34d; font-family: var(--mono); font-size: 10.5px; font-weight: 700; line-height: 1.5; vertical-align: 1px; white-space: nowrap; }
.field-wide { grid-column: 1 / -1; }
.field-wide textarea { min-height: 150px; resize: vertical; }
.vq-btn.vq-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.vq-productbar .vq-btn { margin: 0 6px; }
/* Ephemeral-storage warning */
.banner-storage { background: #fee4e2; border: 1px solid #fda29b; color: #912018; padding: 9px 14px; border-radius: var(--radius-sm); margin-bottom: 10px; font-size: 12.5px; }
/* Integrations switched off (Settings → Integrations): everyone sees it on every page */
.banner-off { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; padding: 9px 14px; border-radius: var(--radius-sm); margin-bottom: 10px; font-size: 12.5px; }
.banner-off a { color: inherit; font-weight: 600; }
.badge.off { background: #991b1b; color: #fff; letter-spacing: .06em; }
.btn-off { color: #b91c1c; border-color: #fca5a5; }
.btn-off:hover { background: #fef2f2; }
.btn-on { color: #15803d; border-color: #86efac; background: #f0fdf4; }
.btn-on:hover { background: #dcfce7; }
.card.card-off { border-color: #fca5a5; box-shadow: 0 0 0 3px #fee2e2; }
.integrations td { vertical-align: top; }
.integrations tr.row-hl-red td { background: #fef2f2; }
.integrations tr.row-hl-red td:first-child { box-shadow: inset 4px 0 0 #ef4444; }
.integrations a.plain { color: inherit; text-decoration: none; }
.integrations a.plain:hover { text-decoration: underline; }
.banner:empty { display: none; }
/* Extra parcels */
.od-extra { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 4px; background: #e0f2fe; color: #075985; font-size: 10.5px; font-weight: 600; vertical-align: middle; }
/* Table management dialog */
.columns-modal { align-items: flex-start; padding: 24px 18px; overflow: auto; }
.od-modal-card.columns-card { width: 880px; max-width: 100%; padding: 18px 22px 16px; gap: 6px; max-height: calc(100vh - 48px); overflow: auto; }
.columns-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 12px 0 4px; align-items: start; }
.columns-grid h3 { font-size: 12.5px; font-weight: 600; color: var(--vq-text-2); margin: 0 0 8px; }
.col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-height: 60px; }
.col-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--vq-border); border-radius: 6px; background: #fff; font-size: 13px; }
.col-grip { color: #c0c6d0; letter-spacing: -3px; font-size: 13px; cursor: default; }
.col-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.col-name small { font-size: 11px; }
.col-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid transparent; background: transparent; border-radius: 6px; color: var(--vq-text-2); cursor: pointer; }
.col-btn:hover { background: #f2f4f7; border-color: var(--vq-border); }
.col-btn:disabled { opacity: .3; cursor: not-allowed; }
.col-empty { padding: 10px; font-size: 12.5px; border: 1px dashed var(--vq-border); border-radius: 6px; }
/* =====================================================================
Order detail — Veeqo-style
===================================================================== */
.page-order .main { background: #eef0f3; padding: 0 0 80px; }
.od { --od-blue: #4a8ab5; --od-blue-dark: #3f7aa3; --od-line: #e1e4ea; --od-head: #f4f5f7; font-size: 12.5px; color: #1f2937; }
.od-head { background: var(--od-blue); color: #fff; padding: 14px 24px 0; }
.od-head-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.od-title { font-size: 21px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.od-status { display: inline-block; background: #f5a623; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; }
.od-status.st-labelled { background: #f59e0b; }
.od-status.st-shipped { background: #22c55e; }
.od-status.st-elsewhere { background: #f97316; }
.od-step-external strong { color: #c2410c; }
.od-shopify-check { margin-top: 6px; padding: 8px 10px; border: 1px solid var(--od-line); border-radius: 6px; background: #fafbfc; display: grid; gap: 4px; }
.od-shopify-fulfilments { margin: 0; padding-left: 18px; }
.od-shopify-fulfilments li { margin: 2px 0; }
.od-dot.orange { background: #f97316; border-color: #f97316; }
.od-status.st-cancelled, .od-status.st-archived { background: #ef4444; }
.od-ref { font-size: 12px; font-weight: 500; text-transform: none; opacity: .85; font-family: var(--mono); }
.od-meta { font-size: 11px; opacity: .92; margin-top: 6px; }
.od-head-right { display: flex; align-items: flex-start; gap: 18px; }
.od-account { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .12); padding: 6px 12px 6px 8px; border-radius: 6px; }
.od-account .badge { font-size: 10px; }
.od-acc-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.od-acc-sub { font-size: 11px; opacity: .85; }
.od-close { color: #fff; font-size: 30px; line-height: 1; text-decoration: none; opacity: .9; padding: 0 4px; }
.od-close:hover { opacity: 1; text-decoration: none; }
.od-tabs { display: flex; gap: 4px; margin-top: 14px; }
.od-tab { background: transparent; border: 0; color: rgba(255, 255, 255, .85); font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 9px 12px 10px; cursor: pointer; border-bottom: 3px solid transparent; }
.od-tab:hover { color: #fff; }
.od-tab.active { color: #fff; border-bottom-color: #fff; }
.od-body { padding: 12px 18px 0; }
.od-card { background: #fff; border: 1px solid var(--od-line); border-radius: 4px; margin-bottom: 12px; overflow: hidden; }
.od-cardhead { background: var(--od-head); border-bottom: 1px solid var(--od-line); padding: 8px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #374151; }
.od-cardbody { padding: 14px; }
.od-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.od-tag { display: inline-block; background: #e5edf7; color: #1e3a8a; border-radius: 3px; padding: 3px 8px; font-size: 11.5px; font-weight: 600; }
.od-tag.alt { background: #f1f5f9; color: #334155; font-weight: 500; }
.od-table { width: 100%; border-collapse: collapse; }
.od-table th { background: var(--od-head); border-bottom: 1px solid var(--od-line); padding: 9px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #374151; text-align: left; }
.od-table td { padding: 12px 14px; border-bottom: 1px solid var(--od-line); font-size: 12.5px; vertical-align: middle; }
.od-table tr:last-child td { border-bottom: 0; }
.od-product { font-weight: 700; text-transform: uppercase; font-size: 12px; color: #1f2937; }
.od-cols { display: grid; grid-template-columns: 1fr 1fr 1fr 1.1fr; }
.od-col { border-right: 1px solid var(--od-line); min-width: 0; }
.od-col .od-cardhead { border-bottom: 1px solid var(--od-line); }
.od-kv { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; font-size: 12.5px; }
.od-kv .vq-ico { color: #4a8ab5; width: 16px; height: 16px; }
.od-link { color: #2563eb; word-break: break-all; }
.od-addr div { line-height: 1.6; font-size: 12.5px; }
.od-addr-name { font-weight: 600; }
.od-postcode { color: #2563eb; text-decoration: underline; }
.od-verified { margin-top: 8px; font-size: 11px; color: #9ca3af; }
.od-totals { padding: 14px 18px; display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; }
.od-totals > div { display: flex; justify-content: space-between; gap: 12px; }
.od-totals span { font-weight: 700; color: #374151; }
.od-totals strong { font-weight: 700; }
.od-totals .od-grand span, .od-totals .od-grand strong { color: #2563eb; }
.od-grid2 { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
@media (max-width: 1100px) { .od-cols { grid-template-columns: 1fr 1fr; } .od-grid2 { grid-template-columns: 1fr; } }
.od-notes { display: flex; flex-direction: column; gap: 8px; min-height: 90px; margin-bottom: 12px; }
.od-empty { text-align: center; padding: 24px 10px; color: #4b5563; display: flex; flex-direction: column; gap: 4px; }
.od-empty strong { font-size: 14px; font-weight: 500; color: #374151; }
.od-empty span { font-size: 11.5px; color: #6b7280; }
.od-note { background: #f8fafc; border: 1px solid var(--od-line); border-radius: 6px; padding: 8px 10px; }
.od-note-body { white-space: pre-wrap; font-size: 12.5px; }
.od-note-meta { font-size: 11px; color: #6b7280; margin-top: 4px; display: flex; justify-content: space-between; align-items: center; }
.od-note-del { border: 0; background: transparent; color: #9ca3af; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.od-note-del:hover { color: #b91c1c; }
/* ---------- customer service portal ---------- */
.page-cs { max-width: 1240px; margin: 0 auto; display: grid; gap: 16px; }
.cs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cs-head p { margin: 4px 0 0; }
.cs-back { font-size: 12px; color: var(--muted); text-decoration: none; }
.cs-back:hover { text-decoration: underline; }
.cs-headline { font-size: 15px; font-weight: 600; color: var(--text); }
.cs-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 12px; }
.cs-search .cs-q { flex: 1 1 360px; font-size: 15px; padding: 10px 12px; border: 1px solid var(--border, #d1d5db); border-radius: 8px; }
.cs-card { display: grid; gap: 10px; align-content: start; }
.cs-card .card-head { margin-bottom: 0; }
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .cs-grid { grid-template-columns: 1fr; } }
.cs-empty { color: var(--muted); font-size: 13px; padding: 8px 2px; }
.cs-results td { vertical-align: top; }
.cs-customer { display: grid; gap: 4px; font-size: 13.5px; }
.cs-addr { margin-top: 6px; color: #374151; font-size: 13px; }
.cs-facts { margin: 0; display: grid; gap: 6px; font-size: 13.5px; }
.cs-facts > div { display: grid; grid-template-columns: 130px 1fr; gap: 8px; }
.cs-facts dt { color: var(--muted); font-weight: 500; }
.cs-facts dd { margin: 0; }
.cs-parcel { border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; background: #fafbfc; }
.cs-parcel-void { opacity: .75; background: #f9fafb; }
.cs-parcel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cs-parcel-track { font-size: 14px; }
.cs-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 12.5px; color: #374151; }
.cs-steps li.warn { color: #b45309; }
.cs-step-when { display: inline-block; min-width: 118px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cs-market { margin: 0; padding-left: 18px; font-size: 12.5px; display: grid; gap: 3px; }
.cs-market li.ok { color: #166534; }
.cs-market li.warn { color: #b45309; }
.cs-market li.muted { color: var(--muted); }
.cs-note-form { display: grid; gap: 8px; }
.cs-note-form > .vq-select { width: max-content; min-width: 220px; justify-self: start; }
.cs-note-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border, #d1d5db); border-radius: 8px; padding: 8px 10px; font: inherit; resize: vertical; }
.cs-note { border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 8px 10px; margin-top: 8px; background: #fff; }
.cs-note-head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cs-note-head .od-note-del { margin-left: auto; }
.cs-note-body { white-space: pre-wrap; font-size: 13px; margin-top: 4px; }
.cs-kind { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: #e5e7eb; color: #374151; }
.cs-kind-call { background: #dbeafe; color: #1e40af; }
.cs-kind-email { background: #e0e7ff; color: #3730a3; }
.cs-kind-callback { background: #fef3c7; color: #92400e; }
.cs-kind-complaint { background: #fee2e2; color: #991b1b; }
.cs-kind-refund { background: #fce7f3; color: #9d174d; }
.cs-kind-resolved { background: #dcfce7; color: #166534; }
.cs-recent { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; }
.cs-recent li { padding: 6px 0; border-bottom: 1px solid var(--border, #eef0f3); }
.cs-recent li:last-child { border-bottom: 0; }
.cs-note-text { color: #374151; }
.cs-voided { margin-top: 6px; }
.cs-voided summary { color: var(--muted); font-size: 12.5px; }
.cs-tk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cs-open-flag { margin: 6px 0 0; font-size: 13px; color: #b45309; font-weight: 600; }
.cs-open-flag a { color: inherit; }
.tb-count { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #e11d48; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; }
/* Customer service: cases */
.cs-subnav { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--border, #e5e7eb); padding-bottom: 0; }
.cs-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.cs-tab:hover { color: var(--text); text-decoration: none; }
.cs-tab.active { color: var(--accent, #4f46e5); border-bottom-color: var(--accent, #4f46e5); }
.cs-count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; background: #e5e7eb; color: #374151; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.cs-tab.active .cs-count { background: #e0e7ff; color: #3730a3; }
.cs-count-due { background: #fee2e2; color: #991b1b; }
.cs-newcase { margin-left: auto; margin-bottom: 6px; }
.cs-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.cs-filter { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border, #e5e7eb); color: var(--text); font-size: 12.5px; font-weight: 500; text-decoration: none; background: #fff; }
.cs-filter:hover { background: #f3f4f6; text-decoration: none; }
.cs-filter.active { background: #1f2937; border-color: #1f2937; color: #fff; }
.cs-filter.active .cs-count { background: rgba(255, 255, 255, .22); color: #fff; }
.cs-case-filters .cs-q-sm { flex: 1 1 260px; font-size: 13.5px; padding: 7px 10px; }
.cs-case-filters .inline-check { align-items: center; white-space: nowrap; }
.cs-cases td { vertical-align: top; }
.cs-case-subject { font-weight: 600; color: var(--text); }
.cs-case-row-resolved .cs-case-subject { color: var(--muted); font-weight: 500; }
.cs-status { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: #e5e7eb; color: #374151; vertical-align: middle; }
.cs-status-open { background: #dbeafe; color: #1e40af; }
.cs-status-waiting { background: #fef3c7; color: #92400e; }
.cs-status-resolved { background: #dcfce7; color: #166534; }
.cs-prio { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; vertical-align: middle; }
.cs-prio-high { background: #fee2e2; color: #991b1b; }
.cs-prio-low { background: #f3f4f6; color: #6b7280; }
.cs-due { font-size: 12.5px; color: #374151; }
.cs-due-over { color: #b91c1c; font-weight: 600; }
.cs-case-card { width: 640px; }
.cs-case-form { display: grid; gap: 10px; }
.cs-field { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 500; min-width: 0; }
.cs-field input, .cs-field select { min-width: 0; }
.cs-field input[type=text], .cs-field input[type=email], .cs-field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border, #d1d5db); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13.5px; color: var(--text); }
.cs-field textarea { resize: vertical; }
.cs-field .vq-select { width: 100%; height: 34px; }
.cs-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.cs-field-row-tight { grid-template-columns: max-content; margin-bottom: 4px; }
.cs-case-fields .vq-select { width: 100%; max-width: 280px; height: 32px; }
.cs-subject-input { font-size: 13px; }
.cs-case-order { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border, #eef0f3); display: grid; gap: 4px; }
.cs-case-parcels { display: grid; gap: 4px; margin-top: 4px; }
.cs-link-form { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.cs-link-form input { flex: 1; height: 32px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent, #4f46e5); font: inherit; font-size: inherit; cursor: pointer; text-decoration: underline; }
.cs-timeline { display: grid; gap: 0; margin-top: 4px; }
.cs-event-sys { display: flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: 12.5px; color: #4b5563; }
.cs-event-dot { width: 7px; height: 7px; border-radius: 50%; background: #c7cbd3; flex: none; }
.cs-timeline .cs-note { margin-top: 6px; margin-bottom: 4px; }
.cs-kind-reply { background: #d1fae5; color: #065f46; }
.cs-mail-in { border-left: 3px solid #93c5fd; }
.cs-mail-out { border-left: 3px solid #6ee7b7; }
.cs-mail-subject { color: var(--muted); margin-top: 2px; }
.cs-mail-long { max-height: 220px; overflow: hidden; position: relative; }
.cs-mail-long::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.cs-email-form { display: grid; gap: 10px; }
.cs-email-form .cs-field-row { grid-template-columns: 1fr 1fr; }
.cs-signature { padding: 6px 10px; background: #f9fafb; border-radius: 6px; }
.cs-email-form .inline-check { margin-left: 4px; }
.cs-mail-code { display: inline-block; font-family: var(--mono); font-size: 18px; font-weight: 700; letter-spacing: .12em; padding: 2px 10px; margin: 0 4px; border-radius: 6px; background: #fff; border: 1px solid #bfdbfe; color: #1e3a8a; }
.cs-mail-pending { line-height: 1.9; }
.od-noteform { display: flex; gap: 6px; }
.od-noteform input { border-radius: 6px; }
.od-send { border: 1px solid #d1d5db; background: #fff; color: #2563eb; border-radius: 6px; width: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.od-send:hover { background: #eff6ff; }
.od-custnote { white-space: pre-wrap; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 10px 12px; font-size: 12.5px; min-height: 90px; }
.od-breakdown { display: flex; flex-direction: column; gap: 14px; }
.od-step { display: flex; align-items: flex-start; gap: 10px; }
.od-step > div { flex: 1; }
.od-step strong { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #1f2937; }
.od-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; background: #d1d5db; flex-shrink: 0; }
.od-dot.on { background: #22c55e; box-shadow: 0 0 0 3px #dcfce7; }
.od-dot.done { background: #4a8ab5; }
.od-dot.off { background: #ef4444; }
.od-stepactions { display: flex; gap: 6px; flex: 0 0 auto !important; }
.od-stepactions .vq-btn { height: 30px; padding: 0 10px; font-size: 12px; }
.od-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.od-activity li { display: grid; grid-template-columns: 130px 200px 1fr; gap: 10px; font-size: 12px; align-items: baseline; }
.od-event { font-family: var(--mono); font-size: 11.5px; color: #374151; }
.od-footer { position: fixed; right: 0; bottom: 0; left: 76px; background: #fff; border-top: 1px solid var(--od-line); box-shadow: 0 -6px 20px rgba(15, 23, 42, .06); padding: 10px 24px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; z-index: 30; }
.od-footlink { margin-right: auto; font-size: 12.5px; color: #2563eb; }
.vq-dd.up .vq-menu { top: auto; bottom: calc(100% + 8px); left: auto; right: 0; }
.vq-btn.outline { border-color: #2563eb; color: #2563eb; text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.vq-btn.outline:hover { background: #eff6ff; }
.vq-btn.danger { border-color: #dc2626; color: #dc2626; }
.vq-btn.danger:hover { background: #fef2f2; }
.vq-menuitem.danger { color: #b91c1c; }
.vq-menuitem.danger .vq-ico { color: #b91c1c; }
.od-ship { min-width: 110px; justify-content: center; text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.od-ship:disabled { opacity: .6; cursor: not-allowed; }
.od .form-grid { margin-bottom: 8px; }
.od .field > span { font-size: 12px; }
.od .service-picker .vq-btn { height: 34px; }
.od-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; z-index: 80; padding: 20px; }
.od-modal-card { background: #fff; border-radius: 10px; padding: 22px 24px; width: 560px; max-width: 100%; box-shadow: 0 20px 60px rgba(15, 23, 42, .3); display: flex; flex-direction: column; gap: 10px; }
.od-modal-card h2 { font-size: 16px; }
.od-modal-card .inline-check { margin: 2px 0; }
.od-modal-card .form-actions { justify-content: flex-end; margin-top: 8px; }
/* Settings → Whistl → "Show what Whistl sent for each service" */
.svc-details { margin-top: 8px; }
.svc-details > summary { cursor: pointer; }
.svc-details .table-wrap { margin-top: 8px; }
.svc-table th, .svc-table td { padding: 6px 10px; font-size: 12px; vertical-align: top; }
/* Products page */
.products-table td { vertical-align: middle; }
.products-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.products-table tr.row-missing td { background: #fffaf0; }
.wt-edit { display: inline-flex; align-items: center; gap: 6px; }
.wt-edit input { width: 96px; height: 30px; padding: 0 8px; text-align: right; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; }
.inline-form input[type=search] { height: 32px; padding: 0 10px; min-width: 220px; }
#weight-check { margin-top: 10px; font-size: 12.5px; display: grid; gap: 4px; }
/* ---------- bulk shipping pop-up ---------- */
.bulk-modal { align-items: flex-start; padding: 24px 18px; overflow: auto; }
.bulk-card { width: 1340px; max-width: 100%; padding: 18px 22px 16px; gap: 12px; max-height: calc(100vh - 48px); }
.bulk-head { display: flex; align-items: center; gap: 12px; }
.bulk-head h2 { font-size: 17px; margin: 0; }
.bulk-titlecount { font-weight: 500; font-size: 13px; }
.bulk-x { margin-left: auto; width: 32px; height: 32px; border: 1px solid var(--vq-border); border-radius: 6px; background: #fff; font-size: 20px; line-height: 1; color: var(--vq-muted); cursor: pointer; }
.bulk-x:hover { background: #f3f4f6; color: var(--vq-text-2); }
.bulk-top { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; padding: 14px 16px; background: var(--vq-bg, #f8fafc); border: 1px solid var(--vq-line); border-radius: 8px; }
.bulk-top .field { min-width: 200px; }
.bulk-top .field > span { font-size: 12px; }
.bulk-top .vq-select { width: 100%; height: 34px; font-size: 13px; }
.bulk-svcfield { flex: 1 1 360px; }
.bulk-dims { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.bulk-dims .field { min-width: 0; width: 96px; }
.bulk-dims input { height: 34px; padding: 0 8px; font-size: 13px; border: 1px solid var(--vq-border); border-radius: 6px; width: 100%; }
.bulk-dims .vq-btn, .bulk-topactions .vq-btn { height: 34px; }
.bulk-help { margin: -4px 0 0; }
.bulk-tablewrap { overflow: auto; border: 1px solid var(--vq-line); border-radius: 8px; flex: 1 1 auto; min-height: 120px; }
.bulk-table { width: 100%; min-width: 1100px; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.bulk-table th { position: sticky; top: 0; background: #fff; z-index: 1; text-align: left; font-size: 11.5px; font-weight: 600; color: var(--vq-text-2); padding: 9px 8px; border-bottom: 1px solid var(--vq-line); white-space: nowrap; }
.bulk-table td { padding: 8px 8px; border-bottom: 1px solid var(--vq-line); vertical-align: middle; color: var(--vq-text-2); line-height: 1.35; }
.bulk-table tr:last-child td { border-bottom: 0; }
.bulk-c-order { white-space: nowrap; width: 112px; overflow: hidden; text-overflow: ellipsis; }
.bulk-c-to { width: 168px; overflow: hidden; }
.bulk-c-to div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulk-c-prod { width: 214px; overflow: hidden; }
.bulk-prod { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulk-c-svc { width: 230px; }
.bulk-c-svc .vq-select { width: 100%; max-width: 100%; height: 30px; font-size: 12px; padding: 0 22px 0 6px; }
.bulk-c-num { width: 66px; white-space: nowrap; }
.bulk-table th.bulk-c-w, .bulk-table td.bulk-c-w { width: 94px; }
.bulk-c-w .bulk-in { max-width: 86px; }
.bulk-in { box-sizing: border-box; width: 100%; max-width: 74px; -moz-appearance: textfield; appearance: textfield; height: 30px; padding: 0 4px 0 6px; font-size: 12.5px; border: 1px solid var(--vq-border); border-radius: 6px; font-variant-numeric: tabular-nums; }
.bulk-in:disabled, .bulk-c-svc .vq-select:disabled { background: #f3f4f6; color: var(--vq-muted); }
.bulk-wsrc { font-size: 10.5px; color: var(--vq-muted); margin-top: 2px; }
.bulk-wsrc.est { color: #b54708; }
.bulk-c-status { width: 190px; font-size: 12px; overflow-wrap: anywhere; }
.bulk-in::-webkit-inner-spin-button, .bulk-in::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.bulk-status { display: inline-block; }
.bulk-status.ready { color: var(--vq-muted); }
.bulk-status.skip { color: #b42318; }
.bulk-status.busy { color: #1d4ed8; }
.bulk-status.done { color: #027a48; font-weight: 600; }
.bulk-status.fail { color: #b42318; font-weight: 600; }
.bulk-status.okc { color: #027a48; }
.bulk-status.warnc { color: #b54708; }
.bulk-note { font-size: 11.5px; margin-top: 2px; }
.bulk-alts { margin-top: 4px; font-size: 11.5px; color: var(--vq-muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.bulk-alt { border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3; border-radius: 999px; padding: 1px 8px; font: inherit; font-size: 11.5px; cursor: pointer; }
.bulk-alt:hover { background: #e0e7ff; }
.bulk-intl { display: inline-block; background: #fef0c7; color: #93370d; border-radius: 4px; padding: 0 5px; font-size: 10.5px; }
.bulk-c-x { width: 30px; text-align: center; padding-left: 0; padding-right: 0; }
.bulk-remove { width: 26px; height: 26px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--vq-muted); font-size: 16px; line-height: 1; cursor: pointer; }
.bulk-remove:hover { background: #fee4e2; color: #b42318; border-color: #fecdca; }
.bulk-row.st-skip td { background: #fafafa; color: var(--vq-muted); }
.bulk-row.st-done td { background: #f0fdf4; }
.bulk-row.st-fail td { background: #fff7f7; }
.bulk-row.st-busy td { background: #eff6ff; }
.bulk-row.st-attention .bulk-svc { border-color: #b42318; box-shadow: 0 0 0 2px rgba(180, 35, 24, .15); }
.bulk-foot { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.bulk-foot .vq-btn.primary { min-width: 150px; justify-content: center; }
.bulk-modal.is-busy .bulk-x { visibility: hidden; }
@media (max-width: 900px) { .bulk-card { padding: 14px; } .bulk-c-prod, .bulk-c-to { max-width: 160px; } }
/* ---------- search as you type ---------- */
.vq-search input.searching { background-image: linear-gradient(90deg, transparent, rgba(79, 70, 229, .12), transparent); background-size: 200% 100%; animation: vq-shimmer 1s linear infinite; }
@keyframes vq-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* ---------- warehouse locations ---------- */
.vq-locchip { display: inline-block; background: #111827; color: #fff; font-weight: 700; font-size: 10.5px; letter-spacing: .02em; padding: 0 5px; border-radius: 4px; margin-right: 5px; line-height: 1.5; vertical-align: 1px; font-variant-numeric: tabular-nums; }
.vq-productbar .vq-locchip { font-size: 12px; padding: 1px 7px; }
.products-tabs { margin-top: 4px; }
.vq-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.vq-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--text); text-decoration: none; }
.vq-tab:hover { background: #f2f4f7; text-decoration: none; }
.vq-tab.active { background: var(--vq-blue-soft, #e8f0fe); color: var(--vq-blue, #2563eb); }
.vq-tab .vq-count { font-size: 11.5px; font-weight: 600; color: var(--vq-muted, #667085); background: #f2f4f7; border-radius: 5px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.vq-tab.active .vq-count { background: var(--vq-blue, #2563eb); color: #fff; }
.products-pager .products-per { display: inline-flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.products-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 6px; }
.products-filters .vq-chip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12.5px; color: var(--vq-muted, #667085); }
.products-filters .vq-chipselect { border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--text); max-width: 260px; }
.products-clear { font-size: 12.5px; margin-left: 4px; }
.products-pager { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 8px 0; }
.products-pages { display: inline-flex; gap: 6px; align-items: center; }
.products-pages .pg { padding: 2px 7px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }
.products-pages .pg:hover { background: #f2f4f7; }
.products-pages .pg-cur { padding: 2px 8px; border-radius: 6px; background: var(--vq-blue, #2563eb); color: #fff; font-weight: 700; }
.products-per select { font: inherit; font-size: 12.5px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.products-table th a.products-sort { color: inherit; text-decoration: none; }
.products-table th a.products-sort:hover { text-decoration: underline; }
.products-table th a.products-sort.active { color: var(--vq-blue, #2563eb); }
.product-location { height: 30px; padding: 0 22px 0 8px; font-size: 12.5px; border: 1px solid var(--vq-border, #d0d5dd); border-radius: 6px; background-color: #fff; min-width: 96px; }
.products-table tr.row-noloc .product-location { border-color: #f0b429; background: #fffbeb; }
.products-table td.num a { font-weight: 600; }
/* ---------- Amazon seller accounts (Settings) ---------- */
.card h3.sub { font-size: 13px; font-weight: 700; color: var(--text-2); margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.alert-ok { background: var(--ok-bg); color: var(--ok); border: 1px solid #a7f3d0; border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; }
.amazon-accounts td { vertical-align: middle; }
.shopify-stores td { vertical-align: middle; }
.shopify-stores input.shp-name { width: 180px; height: 30px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; font-size: 13px; }
.vq-storeref { font-family: inherit; color: var(--vq-text-2); font-weight: 600; }
.amazon-accounts input.amz-name { width: 180px; height: 30px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; font-size: 13px; }
.amazon-accounts select.amz-marketplaces { width: 170px; height: auto; padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; font-size: 12.5px; background: #fff; }
.amazon-add { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px 4px; margin-top: 10px; }
.amazon-add .form-actions { flex-wrap: wrap; margin-bottom: 8px; }
.vq-shipby { font-size: 10.5px; margin-top: 4px; white-space: nowrap; color: var(--vq-muted); }
.vq-shipby.today { color: #7a5a00; font-weight: 600; }
.vq-shipby.overdue { color: #b42318; font-weight: 700; }
.vq-prime { color: #0f766e; font-weight: 700; }
/* ---------- accounts, users, security ---------- */
.nav-user { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 8px; border-radius: 8px; color: var(--sidebar-text); font-size: 12.5px; text-decoration: none; overflow: hidden; }
.nav-user .icon { width: 18px; height: 18px; flex-shrink: 0; }
.nav-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user:hover, .nav-user.active { background: var(--sidebar-2); color: #fff; text-decoration: none; }
.code-input { font-size: 20px; letter-spacing: .18em; text-align: center; max-width: 220px; }
.login-card .code-input { max-width: 100%; }
.account-grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 900px; }
.mfa-setup { display: grid; grid-template-columns: 1fr 200px; gap: 16px 24px; align-items: start; }
.mfa-setup .steps { grid-column: 1; margin: 0; }
.mfa-qr { grid-column: 2; grid-row: 1 / span 2; width: 200px; min-height: 200px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; }
.mfa-qr svg { width: 100%; height: auto; }
.mfa-setup .inline-form { grid-column: 1; }
.mfa-secret { display: inline-block; font-size: 14px; letter-spacing: .08em; background: #f1f5f9; padding: 3px 8px; border-radius: 6px; user-select: all; }
.users-table select.user-role { height: 30px; padding: 0 22px 0 8px; font-size: 12.5px; border: 1px solid var(--line-strong); border-radius: 6px; background-color: #fff; max-width: 280px; }
.row-disabled td { opacity: .55; }
.logins-table tr.row-error td { background: #fff7f7; }
.logins-table tr.row-newdevice td { background: #fffbeb; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.stat .label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.stat .value { font-size: 18px; font-weight: 700; margin-top: 4px; color: var(--text); }
.stat.warnstat { border-color: #fcd34d; background: #fffbeb; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 13px; }
.checklist code { font-family: var(--mono); font-size: 12px; background: #f1f5f9; padding: 1px 5px; border-radius: 4px; }
@media (max-width: 720px) { .mfa-setup { grid-template-columns: 1fr; } .mfa-qr { grid-column: 1; grid-row: auto; } }
.svc-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; }
/* ---------- Dashboard ---------- */
.page-dashboard .main { max-width: 1240px; }
.dash-section { margin-bottom: 26px; }
.dash-h { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 650; margin: 0 0 10px; }
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dash-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dash-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dash-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dash-tile { --tile-ink: var(--text); --tile-accent: var(--accent); display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px 14px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--tile-accent); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: var(--text); transition: box-shadow .12s, transform .05s; }
.dash-tile.linked { cursor: pointer; position: relative; }
.dash-tile.linked:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
/* A tile that opens a list says so: a small arrow in the corner, brighter on hover, and the number goes link-blue */
.dash-tile.linked::after { content: '↗'; position: absolute; top: 10px; right: 12px; font-size: 13px; line-height: 1; color: var(--muted); opacity: .55; transition: opacity .12s, color .12s; }
.dash-tile.linked:hover::after { opacity: 1; color: var(--accent); }
.dash-tile.linked:hover .value { color: var(--accent); }
.dash-tile.linked .dash-main { text-decoration: none; color: inherit; }
.dash-main { display: block; color: inherit; }
.dash-main:hover { text-decoration: none; }
.dash-tile-head { display: flex; align-items: center; gap: 8px; }
.dash-tile .label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; }
.dash-ico { display: inline-flex; width: 26px; height: 26px; border-radius: 8px; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--tile-accent); flex-shrink: 0; }
.dash-ico svg { width: 15px; height: 15px; }
.dash-tile .value { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--tile-ink); font-variant-numeric: proportional-nums; }
.dash-tile .sub { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.dash-tile .sub a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
.dash-tile .sub a:hover { color: var(--accent); }
.dash-tile .sub a.warn { color: var(--warn); }
.dash-tile.tone-yellow { --tile-accent: #ca8a04; background: #fefce8; }
.dash-tile.tone-yellow .dash-ico { background: #fef08a; color: #854d0e; }
.dash-tile.tone-red { --tile-accent: var(--err); }
.dash-tile.tone-pink { --tile-accent: #db2777; background: #fdf2f8; }
.dash-tile.tone-pink .dash-ico { background: #fbcfe8; color: #9d174d; }
.dash-tile.tone-red .dash-ico { background: var(--err-bg); color: var(--err); }
.dash-tile.tone-green { --tile-accent: var(--ok); }
.dash-tile.tone-green .dash-ico { background: var(--ok-bg); color: var(--ok); }
.dash-overdue { display: inline-flex; align-items: center; gap: 4px; color: var(--err) !important; font-weight: 600; }
.dash-overdue svg { width: 13px; height: 13px; }
.dash-note { margin-top: 12px; font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-note.dash-tomorrow { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; border-radius: 8px; padding: 8px 12px; font-size: 13.5px; }
.vq-swatch.blue { border-color: #93c5fd; background: #eff6ff; box-shadow: inset 3px 0 0 #2563eb; }
.dash-card { padding: 0; overflow: hidden; }
.dash-table th, .dash-table td { padding: 10px 16px; }
.dash-table td.num, .dash-table th.num { font-variant-numeric: tabular-nums; }
.dash-table tbody tr.dash-today td { font-weight: 650; background: var(--accent-soft); }
.dash-table tfoot th { position: static; text-transform: none; font-size: 13px; color: var(--text); background: #fafbfd; border-bottom: 0; border-top: 1px solid var(--line); }
.dash-table tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.dash-check > summary { cursor: pointer; padding: 12px 16px; list-style: none; display: flex; gap: 8px; align-items: baseline; }
.dash-check > summary::-webkit-details-marker { display: none; }
.dash-check > summary::before { content: '▸'; color: var(--text-2); font-size: 12px; }
.dash-check[open] > summary::before { content: '▾'; }
.dash-check-table th { font-weight: 500; text-transform: none; font-size: 13px; letter-spacing: 0; }
.dash-check-table thead th { font-weight: 650; vertical-align: bottom; }
.dash-check-table thead th.num { text-align: right; }
.dash-check-table tbody th { text-align: left; color: var(--text); background: transparent; position: static; }
.dash-check-table tbody tr.muted th, .dash-check-table tbody tr.muted td { color: var(--text-2); }
.dash-check-window { font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 2px; }
.dash-check .dash-foot { padding: 10px 16px 14px; line-height: 1.5; }
.dash-foot { padding: 10px 16px 12px; }
.rep-daynav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rep-date { padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 9px; font-family: inherit; font-size: 13px; background: var(--panel); color: var(--text); }
.rep-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rep-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.rep-range label { display: inline-flex; align-items: center; gap: 6px; }
.rep-window { font-weight: 650; padding: 0 4px; }
.rep-quick a { color: var(--accent); text-decoration: none; }
.rep-quick a:hover { text-decoration: underline; }
.rep-stores td.rep-labels { font-size: 15px; }
.rep-stores tfoot th { border-top: 2px solid var(--line-strong); }
.rep-saving { color: #166534; font-weight: 600; text-decoration: none; }
.rep-saving:hover { text-decoration: underline; }
.rep-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rep-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 20px; }
/* Reports tabs (Dispatch / Amazon confirmations) and the Amazon confirmations list */
.rep-tabs { margin: 0 0 14px; }
.rep-amz-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.rep-amz-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rep-amz-filter select { padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 9px; font-family: inherit; font-size: 13px; background: var(--panel); color: var(--text); }
.rep-amz-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rep-amazon td { font-size: 13px; }
.rep-amazon td .mono, .rep-amazon td.mono { font-size: 12.5px; }
.rep-amazon input.amz-done { width: 16px; height: 16px; cursor: pointer; }
.rep-amazon tr.amz-handled td { color: var(--muted); }
.rep-amazon tr.amz-handled td a, .rep-amazon tr.amz-handled td .mono { color: var(--muted); }
.rep-amazon tr.amz-handled td:not(:first-child) { text-decoration: line-through; text-decoration-color: rgba(100, 116, 139, .5); }
.rep-amazon td.err, .reports-amazon .dash-h .err { color: var(--err); font-weight: 600; }
.rep-amz-status { background: #fafbfd; }
.rep-amz-status .tabs { background: #e9ebf2; }
@media (max-width: 900px) { .rep-actions { align-items: flex-start; } .rep-range { justify-content: flex-start; } }
@media (max-width: 1100px) { .rep-cols { grid-template-columns: 1fr; } }
.dash-table td a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); }
.dash-table td a:hover { color: var(--accent); }
.alert.alert-yellow { background: #fefce8; border: 1px solid #fde047; color: #713f12; }
.alert.alert-pink { background: #fdf2f8; border: 1px solid #f9a8d4; color: #831843; }
.vq-dupechip { background: #fce7f3; border-color: #f9a8d4; }
.vq-notprintedchip { background: var(--warn-bg); border-color: #fcd34d; }
.vq-duehelp { padding: 6px 2px 0; }
.vq-rulechip { background: #fef9c3; border-color: #fde047; }
@media (max-width: 1500px) { .dash-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1400px) { .dash-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .dash-grid, .dash-grid-4, .dash-grid-5, .dash-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dash-grid, .dash-grid-4, .dash-grid-5, .dash-grid-6 { grid-template-columns: 1fr; } .dash-tile .value { font-size: 32px; } }
/* late shipments */
.vq-pill.due-ontime { background: var(--ok-bg); color: var(--ok); margin: 0; font-weight: 600; }
.vq-latechip { background: var(--err-bg); border-color: #fca5a5; }
.dash-tile.tone-muted { --tile-accent: var(--line-strong); }
.dash-tile.tone-muted .dash-ico { background: #eef0f5; color: var(--muted); }
/* pre-flight checks */
.vq-issues { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.5; cursor: help; white-space: nowrap; }
.vq-issues.err { background: var(--err-bg); color: var(--err); }
.vq-issues.warn { background: var(--warn-bg); color: var(--warn); }
.vq-issuechip { background: var(--warn-bg); border-color: #fcd34d; }
.bulk-issues { margin-top: 4px; }
.bulk-issue { font-size: 11.5px; line-height: 1.35; white-space: normal; overflow: visible; text-overflow: clip; }
.bulk-issue.err { color: var(--err); }
.bulk-issue.warn { color: var(--warn); }
.od-issues { margin-bottom: 14px; }
.od-issues ul { margin: 6px 0 0; padding-left: 18px; }
.od-issues li.err { color: var(--err); }
.od-issues li.warn { color: #78350f; }
.dash-tile.tone-orange { --tile-accent: #ea580c; }
.dash-tile.tone-orange .dash-ico { background: #ffedd5; color: #9a3412; }
/* tracking */
.tk-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 650; line-height: 1.5; white-space: nowrap; background: #eef0f5; color: #475569; cursor: help; }
.tk-pill.small { padding: 0 6px; font-size: 10px; vertical-align: middle; }
.tk-pill.tk-pending, .tk-pill.tk-unknown { background: #eef0f5; color: #64748b; }
.tk-pill.tk-collected, .tk-pill.tk-in_transit { background: var(--info-bg); color: var(--info); }
.tk-pill.tk-out_for_delivery { background: #ede9fe; color: #5b21b6; }
.tk-pill.tk-delivered { background: var(--ok-bg); color: var(--ok); }
.tk-pill.tk-delayed { background: var(--warn-bg); color: var(--warn); }
.tk-pill.tk-problem { background: var(--err-bg); color: var(--err); }
.tk-pill.tk-returned { background: #ffedd5; color: #9a3412; }
.tk-desc { max-width: 220px; }
.tk-line { margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-history { margin: 6px 0 0; padding-left: 0; list-style: none; font-size: 12px; color: var(--text-2); }
.tk-history li { padding: 2px 0; border-left: 2px solid var(--line); padding-left: 8px; }
.tk-history .tk-when { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 6px; }
.tabs .tab-count { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #eef0f5; font-size: 11px; font-weight: 700; }
.tabs .tab.tab-warn .tab-count { background: var(--warn-bg); color: var(--warn); }
.tabs .tab.tab-err .tab-count { background: var(--err-bg); color: var(--err); }
/* product links to the store */
.vq-plink { color: inherit; }
.vq-plink:hover { color: var(--accent); text-decoration: underline; }
.vq-plink .vq-ext { font-size: 10px; margin-left: 3px; color: var(--muted-2); }
.vq-plink.search .vq-ext { color: var(--muted-2); }
.link-edit { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.link-edit .p-link { font-size: 12px; font-weight: 600; white-space: nowrap; }
.link-edit .product-url { width: 100%; font-size: 12px; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: 6px; }
.hs-edit input.product-hs { width: 110px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: 6px; }
.hs-edit input.product-hs.edited { border-color: #bfdbfe; background: #eff6ff; }
.tk-note { max-width: 720px; margin-top: 4px; line-height: 1.4; }
.od-veeqo { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.od-veeqo .table { margin-top: 8px; }
.od-veeqo .table tr.row-hl-green td { background: #f0fdf4; box-shadow: inset 4px 0 0 #22c55e; }
.od-veeqo .table tr.row-hl-green td + td { box-shadow: none; }
.veeqo-stores td { vertical-align: middle; }
.veeqo-stores input[type=text], .veeqo-stores input:not([type]) { width: 220px; height: 30px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; font-size: 13px; }
.veeqo-stores input[type=checkbox] { width: 18px; height: 18px; }
/* Heavy orders (over Settings → Split orders heavier than): red rows, a pill, and the split-into-parcels pop-up */
.vq-pill.vq-heavy { background: #dc2626; color: #fff; }
.vq-pill.vq-wflag { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
/* an open order whose label was voided and not shipped again (the Voided, not reshipped view) */
.vq-pill.vq-voided { background: #ffedd5; color: #9a3412; border: 1px solid #fdba74; }
.vq-shippedat.vq-voidedat { color: #c2410c; }
.vq-pill.vq-west { background: #ffedd5; color: #9a3412; }
.products-table tr.row-wflag td { background: #fff1f2; }
.vq-tab.vq-tab-warn .vq-count { background: #fee2e2; color: #991b1b; }
.products-table .wt-flag { color: var(--err); font-weight: 600; }
.vq-ship.vq-ship-split { background: #dc2626; border-color: #dc2626; }
.vq-ship.vq-ship-split:hover { background: #b91c1c; }
.od-ship.vq-ship-split { background: #dc2626; border-color: #dc2626; }
.split-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.split-card { width: 1100px; max-width: 100%; padding: 18px 22px 16px; gap: 10px; max-height: calc(100vh - 48px); overflow: auto; }
.split-why { font-size: 13px; color: #334155; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 8px 12px; }
.split-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); }
.split-tab { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: #475569; cursor: pointer; }
.split-tab.active { color: var(--vq-blue); border-bottom-color: var(--vq-blue); }
.split-table th, .split-table td { vertical-align: middle; }
.split-table td.split-prod, .split-table th.split-prod { min-width: 260px; }
.split-table input[type=number] { width: 84px; height: 30px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; font-size: 13px; text-align: right; }
.split-table input.split-weight { width: 96px; }
.split-table input.split-weight.warnw { border-color: #f59e0b; background: #fffbeb; }
.split-table input.split-weight.over { border-color: #dc2626; background: #fef2f2; color: #991b1b; }
.split-table select.split-svc { max-width: 240px; }
.split-table tr.split-trow td { background: #f8fafc; font-weight: 600; }
.split-table th.split-boxhead { white-space: nowrap; }
.split-rm { border: 0; background: none; color: #94a3b8; font-size: 15px; cursor: pointer; padding: 0 2px; }
.split-rm:hover { color: #dc2626; }
.split-add { width: 70px; }
.split-count { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.split-count input { width: 70px; height: 30px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; }
.split-dims { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: #475569; margin-top: 6px; }
.split-dims input { width: 64px; height: 28px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; font-size: 12.5px; }
.split-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; }
.split-actions { display: flex; gap: 8px; }
.split-card .ok { color: #15803d; }
.splitall-card { width: 1240px; }
.splitall-wrap { max-height: calc(100vh - 300px); overflow: auto; }
.splitall-table th.splitall-tick, .splitall-table td.splitall-tick { width: 32px; text-align: center; }
.splitall-table td { vertical-align: top; }
.splitall-table td.num { white-space: nowrap; }
.splitall-box { margin: 2px 0; font-size: 13px; }
.splitall-table tr.splitall-skip td { background: #fffbeb; }
.splitall-table tr.splitall-done td { background: #f0fdf4; }
.splitall-table tr.splitall-fail td { background: #fef2f2; }
.splitall-table .bulk-note { margin-top: 4px; font-size: 12px; }
/* Settings → ShipStation: the order-by-order result of the last order check */
.ss-check { margin: 6px 0 8px; padding-left: 18px; font-size: 12px; line-height: 1.45; max-height: 320px; overflow: auto; }
.ss-check li { margin: 2px 0; }
/* Bulk shipping: labels created — print now or later? */
.bulk-printprompt { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); background: #ecfdf3; }
.bulk-printprompt .bulk-printmsg { flex: 1; min-width: 0; }
.bulk-printprompt .bulk-printmsg > strong { display: block; font-size: 14px; color: #027a48; margin-bottom: 2px; }
.bulk-modal.has-printprompt .bulk-foot { display: none; }
@media (max-width: 900px) { .bulk-printprompt { flex-wrap: wrap; } }
.bulk-alt.bulk-alt-rate { background: #eef4ff; border-color: #b6ccfe; color: #1e40af; max-width: 100%; white-space: normal; text-align: left; }
/* Settings → Speed */
.restore-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 10px; }
.restore-row input[type="file"] { font-size: 12.5px; max-width: 100%; }
.speed-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 16px; margin: 6px 0 12px; font-size: 13px; }
.speed-facts > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; }
.speed-facts span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.speed-facts > div.warn strong { color: var(--err); }
.speed-table td.num, .speed-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.speed-table tr.row-slow td { background: #fff7ed; }
#speed-report { font-size: 12px; margin-top: 8px; }
/* Products page: editable title */
.products-table .title-edit input.product-title { width: 100%; min-width: 220px; font-weight: 600; font-size: 13px; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; }
.products-table .title-edit input.product-title:hover, .products-table .title-edit input.product-title:focus { border-color: var(--line-strong); background: #fff; }
.products-table .title-edit input.product-title.edited { border-color: #bfdbfe; background: #eff6ff; }
.products-pager { margin: 8px 0; }
.products-pager a { font-weight: 600; }
/* Orders page: new orders arrived while you were working — refresh when ready */
.refresh-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #111827; color: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 13px; }
.refresh-bar .refresh-msg { font-weight: 600; }
.refresh-bar .vq-btn { color: #fff; border-color: #4b5563; background: transparent; }
.refresh-bar .vq-btn.primary { background: #2563eb; border-color: #2563eb; }
/* Product pictures (order page items, Products page) — from Veeqo / Shopify / Temu */
.od-imgcell { width: 64px; padding-right: 4px !important; }
.od-thumb { display: inline-flex; width: 56px; height: 56px; border: 1px solid var(--line); border-radius: 6px; background: #fff; align-items: center; justify-content: center; overflow: hidden; }
.od-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.od-thumb.missing img { display: none; }
.od-thumb.none, .od-thumb.missing { background: repeating-linear-gradient(45deg, #f3f4f6 0 6px, #fff 6px 12px); }
.od-thumb:hover { border-color: var(--vq-blue, #2563eb); }
.products-table .p-thumb { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 6px; background: #fff; object-fit: contain; display: block; }
.products-table .p-thumb.none { background: repeating-linear-gradient(45deg, #f3f4f6 0 5px, #fff 5px 10px); }
.products-table td.p-imgcell { width: 52px; padding-right: 4px; }
.columns-who { margin: -4px 0 8px; color: var(--text-2); }
.columns-shared { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; color: var(--text-2); }
/* a saved view whose sort or filters were changed on the page: the dot on the tab and the save bar at the bottom */
.vq-view.modified .vq-viewname { font-style: italic; }
.vq-viewdot { color: #c2410c; font-weight: 700; margin-left: 2px; }
.vq-savebar { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0 0; padding: 10px 14px; background: #fff7ed; border: 1px solid #fdba74; border-radius: var(--radius-sm); box-shadow: 0 -6px 18px rgba(15, 23, 42, .08); font-size: 13px; color: #7c2d12; }
.vq-savebar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* ---------- Profit X (v0.1.84): the Sellerboard-style profit page ---------- */
.px { --px-sales: #4f46e5; --px-profit: #059669; --px-loss: #dc2626; }
.px .page-head { align-items: flex-start; }
.px-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.px-store { width: auto; min-width: 180px; padding: 6px 30px 6px 10px; }
.px-tabs { margin-bottom: 16px; }
.px-missing { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; padding: 10px 14px; background: var(--warn-bg); border: 1px solid #fcd34d; border-radius: var(--radius-sm); color: #7c2d12; font-size: 13px; }
.px-missing a { font-weight: 650; color: #7c2d12; white-space: nowrap; }
.pos { color: var(--ok); }
.neg { color: var(--err); }
/* the four period tiles */
.px-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.px-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.px-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.px-card-head a { font-weight: 700; font-size: 14px; color: var(--text); }
.px-card-head a:hover { color: var(--accent); }
.px-sales { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.px-big { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.px-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 1.7; }
.px-row .px-k { color: var(--muted); }
.px-row .px-v { font-variant-numeric: tabular-nums; }
.px-row.px-sub { border-top: 1px dashed var(--line); margin-top: 2px; padding-top: 2px; }
.px-row.px-sub .px-k { color: var(--text-2); font-weight: 600; }
.px-row.px-profit { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; font-weight: 700; font-size: 14px; }
.px-row.px-profit .px-k { color: var(--text); }
.px-row.pos .px-v { color: var(--ok); }
.px-row.neg .px-v { color: var(--err); }
.px-card-note { font-size: 11.5px; margin-top: 4px; }
/* the window */
.px-section { margin-top: 6px; }
.px-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.px-section-head h2 { font-size: 17px; font-weight: 700; margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.px-window { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.px-quick { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.px-pick { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 550; color: var(--muted); border: 1px solid transparent; }
.px-pick:hover { text-decoration: none; color: var(--text); background: #eef0f5; }
.px-pick.active { background: var(--accent-soft); color: var(--accent); border-color: #c7d2fe; }
.px-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.px-range label { display: inline-flex; align-items: center; gap: 6px; }
.px-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.px-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; min-width: 0; box-shadow: var(--shadow-sm); }
.px-tile-k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; }
.px-tile-v { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.px-tile-s { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-tile-profit { border-left: 4px solid var(--px-profit); }
.px-tile-profit.neg { border-left-color: var(--px-loss); }
.px-tile-profit.pos .px-tile-v { color: var(--ok); }
.px-tile-profit.neg .px-tile-v { color: var(--err); }
/* the chart */
.px-chart-card { padding: 14px 16px 8px; }
.px-chart { position: relative; }
.px-chart svg { display: block; width: 100%; height: 260px; overflow: visible; }
.px-legend { display: flex; gap: 16px; align-items: center; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; flex-wrap: wrap; }
.px-legend span { display: inline-flex; align-items: center; gap: 6px; }
.px-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.px-sw-sales { background: var(--px-sales); }
.px-sw-profit { background: var(--px-profit); }
.px-grid { stroke: var(--line); stroke-width: 1; }
.px-axis { stroke: var(--line-strong); stroke-width: 1; }
.px-tick { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.px-bar-sales { fill: var(--px-sales); }
.px-bar-profit { fill: var(--px-profit); }
.px-bar-profit.neg { fill: var(--px-loss); }
.px-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.px-line-sales { stroke: var(--px-sales); }
.px-line-profit { stroke: var(--px-profit); }
.px-hit { fill: transparent; cursor: crosshair; }
.px-hit:hover { fill: rgba(79, 70, 229, .06); }
.px-cursor { stroke: var(--line-strong); stroke-dasharray: 3 3; pointer-events: none; }
.px-tip { position: absolute; top: 28px; z-index: 5; background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow-md); padding: 8px 12px; font-size: 12.5px; line-height: 1.6; pointer-events: none; min-width: 190px; }
.px-tip-day { font-weight: 700; margin-bottom: 2px; }
.px-tip .px-sw { margin-right: 6px; vertical-align: -1px; }
/* tables on the dashboard */
.px-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.px-two > .card:only-child { grid-column: 1 / -1; }
.px-group { margin-bottom: 0; padding: 14px 16px; overflow: auto; min-width: 0; }
.px-group .card-head { margin-bottom: 8px; }
.px-group .dash-h { margin: 0; }
.px-table td, .px-table th { font-variant-numeric: tabular-nums; }
.px-table .num strong { font-weight: 700; }
.px-ptitle { font-weight: 550; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-group .px-ptitle { max-width: 230px; }
.px-group .table.compact th, .px-group .table.compact td { padding: 7px 8px; }
.px-foot { margin-top: 16px; line-height: 1.6; }
/* products and orders tabs */
.px-pfilters { justify-content: flex-start; }
.px-grow { flex: 1; }
.px-search { display: flex; gap: 6px; align-items: center; }
.px-search input[type=search] { width: 260px; padding: 6px 10px; }
.px-cogs-edit { display: flex; align-items: center; gap: 4px; }
.px-cogs-edit input.px-cogs { width: 96px; padding: 6px 8px; text-align: right; }
.px-cogs.saved { border-color: #86efac; box-shadow: 0 0 0 3px #dcfce7; }
select.px-vat { width: 130px; padding: 6px 28px 6px 8px; }
tr.px-nocogs td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
tr.px-refunded td { opacity: .7; }
.px-oline { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.nm-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.nm-bar > div { flex: 1 1 400px; }
.nm-removed { white-space: nowrap; }
.rule-pc-foot { margin-top: 2px; white-space: nowrap; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent, #2563eb); cursor: pointer; text-decoration: underline; }
.linkbtn:hover { color: #1d4ed8; }
.rule-pc-editor { margin-top: 12px; }
.rule-pc-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, 1.2fr); gap: 16px 24px; }
.rule-pc-grid textarea { width: 100%; font-size: 12.5px; }
.rule-pc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
@media (max-width: 900px) { .rule-pc-grid { grid-template-columns: 1fr; } }
.px-change-card { margin: 0 0 16px; }
.px-change-form { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(120px, 1fr)) minmax(160px, 1.5fr); gap: 12px 16px; align-items: start; margin-top: 10px; }
.px-change-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; }
.px-change-form input { font: inherit; font-weight: 400; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; width: 100%; }
.px-change-form .px-money { display: flex; align-items: center; gap: 6px; }
.px-change-form .px-money input { flex: 1 1 auto; }
.px-change-form .small { font-weight: 400; }
.px-change-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
@media (max-width: 900px) { .px-change-form { grid-template-columns: 1fr 1fr; } }
.px-pill { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #eef0f4; color: var(--muted); white-space: nowrap; }
.px-pill-ok { background: #dcfce7; color: #166534; }
.px-pill-soon { background: #dbeafe; color: #1e40af; }
.px-import { margin: 0 0 12px; }
.px-import textarea { width: 100%; font-family: var(--mono); font-size: 12.5px; }
.px-import-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
/* settings tab */
.px-settings .card { max-width: 860px; }
.px-grid { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.px-grid > label { display: flex; flex-direction: column; gap: 4px; font-weight: 550; }
.px-grid > label .small { font-weight: 400; max-width: 320px; }
.px-num { display: inline-flex; align-items: center; gap: 6px; }
.px-num input[type=number] { width: auto; }
.px-fee { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.px-fee strong { min-width: 70px; }
.px-grid > label.px-check { flex-direction: row; align-items: center; gap: 6px; font-weight: 550; }
@media (max-width: 1100px) { .px-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .px-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .px-two { grid-template-columns: 1fr; } .px-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .px-window { align-items: flex-start; } .px-quick { justify-content: flex-start; } .px-cards { grid-template-columns: 1fr; } }
/* Profit X → Price check (v0.1.85) */
.px-strip-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.px-cogs-edit input.px-base, .px-cogs-edit input.px-retail { width: 96px; padding: 6px 8px; text-align: right; }
.px-pricecheck .px-cogs-edit input { width: 80px; padding: 5px 6px; }
.px-pricecheck.table.compact th, .px-pricecheck.table.compact td { padding: 8px 7px; }
.px-pricecheck .small { font-size: 11.5px; }
.px-cogs-edit input.saved { border-color: #86efac; box-shadow: 0 0 0 3px #dcfce7; }
.px-pricecheck .px-ptitle { max-width: 300px; }
.px-verdict { display: inline-block; margin-top: 2px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 650; letter-spacing: .02em; background: #eef0f5; color: #334155; }
.px-verdict-profit { background: var(--ok-bg); color: var(--ok); }
.px-verdict-below { background: var(--warn-bg); color: var(--warn); }
.px-verdict-even { background: var(--warn-bg); color: var(--warn); }
.px-verdict-loss { background: var(--err-bg); color: var(--err); }
tr.px-v-loss td:first-child { box-shadow: inset 3px 0 0 var(--err); }
tr.px-v-below td:first-child, tr.px-v-even td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
tr.px-v-profit td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
tr.px-v-unknown td:first-child { box-shadow: inset 3px 0 0 var(--line-strong); }
.px-base-reset { font-weight: 600; }
@media (max-width: 1100px) { .px-strip-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---------- Sellercalc (v0.1.85): the Temu base-price & profit calculator ---------- */
.sc .page-head { align-items: flex-start; }
.sc-grid { display: grid; grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); gap: 16px; align-items: start; }
.sc-inputs { margin: 0; }
.sc-modes { display: flex; width: 100%; margin-bottom: 14px; }
.sc-modes .tab { flex: 1; justify-content: center; border: 0; background: transparent; font-family: inherit; cursor: pointer; }
.sc-modes .tab.active { background: #fff; }
.sc-vt .tab { border: 0; background: transparent; font-family: inherit; cursor: pointer; }
.sc-vt .tab.active { background: #fff; }
.sc-sec { padding: 12px 0; border-top: 1px solid var(--line); }
.sc-sec:first-of-type { border-top: 0; padding-top: 0; }
.sc-sec-h { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 650; margin: 4px 0 8px; display: flex; align-items: center; gap: 6px; }
.sc-sec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sc-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.sc-label { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.sc-help { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: #eef0f5; color: var(--muted); font-size: 10px; font-weight: 700; cursor: help; }
.sc-hint { margin-top: -2px; }
.sc-input { display: flex; align-items: center; gap: 6px; }
.sc-input input[type=number] { width: 130px; text-align: right; padding: 7px 9px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-toggle { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; cursor: pointer; }
.sc-toggle input { margin-top: 3px; }
.sc-toggle span span { display: block; }
.sc-reco { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px; background: var(--accent-soft); border-radius: var(--radius-sm); margin-bottom: 10px; }
.sc-reco strong { font-size: 18px; color: var(--accent); }
.sc-offer { margin-top: -4px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; }
.sc-offer.ok { background: var(--ok-bg); color: var(--ok); }
.sc-offer.loss { background: var(--err-bg); color: var(--err); }
.sc-note { margin-top: 6px; line-height: 1.5; }
.sc-loaded { margin: -6px 0 12px; padding: 8px 12px; background: var(--info-bg); color: var(--info); border-radius: var(--radius-sm); }
.sc-results { display: flex; flex-direction: column; gap: 14px; }
.sc-results .card { margin: 0; }
.sc-hero { text-align: center; padding: 22px 20px 18px; border-top: 4px solid var(--line-strong); }
.sc-hero.sc-profit { border-top-color: var(--ok); }
.sc-hero.sc-loss { border-top-color: var(--err); }
.sc-hero.sc-even { border-top-color: #f59e0b; }
.sc-hero-k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 650; }
.sc-hero-v { font-size: 46px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.sc-profit .sc-hero-v { color: var(--ok); }
.sc-loss .sc-hero-v { color: var(--err); }
.sc-even .sc-hero-v { color: #b45309; }
.sc-bar { height: 10px; background: #fee2e2; border-radius: 999px; overflow: hidden; margin: 14px auto 6px; max-width: 520px; }
.sc-bar-fill { height: 100%; border-radius: 999px; background: var(--ok); transition: width .3s; }
.sc-bar-fill.sc-loss { background: var(--err); }
.sc-bar-fill.sc-even { background: #f59e0b; }
.sc-bar-l { display: flex; justify-content: space-between; max-width: 520px; margin: 0 auto; color: var(--muted); }
.sc-pills { display: flex; gap: 8px; justify-content: center; margin: 12px 0 10px; }
.sc-pill { padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 650; background: #eef0f5; color: #334155; }
.sc-pill.g { background: var(--ok-bg); color: var(--ok); }
.sc-pill.b { background: var(--info-bg); color: var(--info); }
.sc-pill.a { background: var(--warn-bg); color: var(--warn); }
.sc-pill.r { background: var(--err-bg); color: var(--err); }
.sc-verdict { font-weight: 600; font-size: 13.5px; padding: 8px 12px; border-radius: var(--radius-sm); }
.sc-verdict.sc-profit { background: var(--ok-bg); color: var(--ok); }
.sc-verdict.sc-loss { background: var(--err-bg); color: var(--err); }
.sc-verdict.sc-even { background: var(--warn-bg); color: var(--warn); }
.sc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sc-list { padding: 14px 16px; }
.sc-list-h { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 8px; }
.sc-list-h strong { font-size: 16px; }
.sc-row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px dashed var(--line); font-size: 13px; }
.sc-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.sc-row-strong { font-weight: 700; }
.sc-vat { padding: 14px 16px; }
.sc-vat-grid { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; }
.sc-vat-hero { padding: 12px; background: var(--warn-bg); border-radius: var(--radius-sm); text-align: center; }
.sc-vat-amt { font-size: 26px; font-weight: 800; color: var(--warn); font-variant-numeric: tabular-nums; margin: 4px 0; }
.sc-vat-amt.pos { color: var(--ok); }
.sc-vat-how { margin-top: 8px; line-height: 1.5; }
.sc-metric { padding: 14px 16px; }
.sc-metric-v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0; font-variant-numeric: tabular-nums; }
.sc-saved { margin-top: 16px; }
.sc-saved-table .btn { margin-left: 4px; }
.sc-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 20px; }
.sc-modal-box { width: 100%; max-width: 420px; margin: 0; }
.sc-modal-box .sc-field input[type=text] { width: 100%; }
@media (max-width: 960px) { .sc-grid { grid-template-columns: 1fr; } .sc-two { grid-template-columns: 1fr; } .sc-vat-grid { grid-template-columns: 1fr; } .sc-sec-row { grid-template-columns: 1fr; } }
/* ---------- Stock (v0.1.94): levels per pool, the Book-in form, a product's page ---------- */
.stock .page-head { align-items: flex-start; }
.stock .page-head .muted.small { max-width: 760px; line-height: 1.5; }
.stock-tabs { margin-bottom: 14px; }
.stock-book-card { margin-bottom: 16px; }
.stock-book-card .card-head { margin-bottom: 4px; }
.stock-book-card .card-head .dash-h { margin: 0; }
.stock-form { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(200px, 1.4fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(110px, .8fr) minmax(130px, .9fr); gap: 12px 16px; align-items: start; margin-top: 10px; }
.stock-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; min-width: 0; }
.stock-form input, .stock-form select { font: inherit; font-weight: 400; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; width: 100%; background: #fff; }
.stock-form .stock-f-note { grid-column: span 2; }
.stock-form-fixed { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1fr); }
.stock-form-fixed .stock-f-note { grid-column: 1 / -1; }
.stock-form-details { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.stock-form-details .stock-f-note { grid-column: 1 / -1; }
.stock-form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
@media (max-width: 1100px) { .stock-form, .stock-form-fixed, .stock-form-details { grid-template-columns: 1fr 1fr 1fr; } .stock-form .stock-f-product { grid-column: 1 / -1; } }
@media (max-width: 700px) { .stock-form, .stock-form-fixed, .stock-form-details { grid-template-columns: 1fr 1fr; } }
.stock-table th.stock-poolhead { min-width: 118px; }
.stock-table th.stock-poolhead .small { font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 2px; }
.stock-table td.stock-name { max-width: 380px; }
.stock-table td.stock-name a { font-weight: 600; color: var(--text); }
.stock-table td.stock-name a:hover { color: var(--accent); }
.stock-table tr.stock-row { cursor: pointer; }
.stock-table tr.stock-row:hover td { background: #f8f9fc; }
.stock-table tr.row-untracked td.stock-name a { color: var(--text-2); }
.stock-cell { white-space: nowrap; vertical-align: top; }
.stock-cell .stock-lvl { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stock-cell .stock-sold { display: block; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.stock-cell .stock-badge { margin-top: 3px; }
.stock-cell.stock-low { background: #fffbeb; }
.stock-cell.stock-low .stock-lvl { color: #b45309; }
.stock-cell.stock-out { background: #fef2f2; }
.stock-cell.stock-out .stock-lvl { color: var(--err); }
.stock-cell.stock-untracked .stock-lvl { font-weight: 500; }
.stock-total strong { font-size: 15px; }
.stock-settings { margin-top: 16px; }
.stock-settings summary { cursor: pointer; font-size: 13.5px; }
.stock-settings-form { margin-top: 14px; }
.stock-pools-pick { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; }
.stock-pools-pick > div:first-child { flex: 1 1 100%; }
.stock-pool-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.stock-settings-row { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 12px; }
.stock-settings-row label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; flex-wrap: wrap; }
.stock-settings-row input { font: inherit; font-weight: 400; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
.stock-settings .stock-form-actions { margin-top: 4px; }
/* a product's page */
.stock-item .page-head h1 { margin: 2px 0 4px; }
.stock-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stock-levelcard { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stock-levelcard-head { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; }
.stock-levelcard-value { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stock-levelcard.stock-card-low { border-left-color: #ca8a04; background: #fefce8; }
.stock-levelcard.stock-card-low .stock-levelcard-value { color: #b45309; }
.stock-levelcard.stock-card-out { border-left-color: var(--err); background: #fef2f2; }
.stock-levelcard.stock-card-out .stock-levelcard-value { color: var(--err); }
.stock-levelcard.stock-card-untracked { border-left-color: var(--line); }
.stock-cols { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
.stock-cols > .card { margin-bottom: 16px; min-width: 0; }
@media (max-width: 1000px) { .stock-cols { grid-template-columns: 1fr; } }
.stock-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 12px; }
.stock-inline-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; flex: 1 1 320px; max-width: 520px; }
.stock-inline-form input { font: inherit; font-weight: 400; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; width: 100%; }
.stock-inline-form .btn { margin-bottom: 1px; }
.stock-inline-form .small { flex: 1 1 100%; }
.stock-moves td, .stock-sales td, .stock-links td { vertical-align: top; }
/* ---------- team chat (v0.1.95): the bubble in the corner, the panel with rooms and messages ---------- */
.chat { position: fixed; right: 20px; bottom: 20px; z-index: 55; font-size: 13px; }
.chat-fab { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(79, 70, 229, .35), 0 2px 6px rgba(15, 23, 42, .18); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .08s, background .12s; }
.chat-fab:hover { background: var(--accent-hover); transform: translateY(-1px); }
.chat-fab .icon { width: 24px; height: 24px; }
.chat-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #e11d48; color: #fff; font-size: 12px; font-weight: 800; line-height: 22px; text-align: center; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(225, 29, 72, .45); }
.chat-badge.pulse { animation: chat-pulse .9s ease-out 2; }
@keyframes chat-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 2px #fff, 0 0 0 0 rgba(225, 29, 72, .6); } 60% { transform: scale(1.18); box-shadow: 0 0 0 2px #fff, 0 0 0 12px rgba(225, 29, 72, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 2px #fff, 0 0 0 0 rgba(225, 29, 72, 0); } }
.chat-fab.has-unread { animation: chat-nudge 1.2s ease-in-out 2; }
@keyframes chat-nudge { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } 60% { transform: translateY(0); } 80% { transform: translateY(-2px); } }
.chat-livedot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 6px; vertical-align: middle; background: #cbd5e1; }
.chat-livedot.live { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.chat-livedot.poll { background: #f59e0b; }
.chat-livedot.wait { background: #cbd5e1; animation: chat-blink 1s ease-in-out infinite; }
@keyframes chat-blink { 50% { opacity: .3; } }
.chat-msg.pending .chat-text { opacity: .6; }
.chat-msg.failed .chat-text { background: #fee2e2; color: #991b1b; }
.chat-msg.mine.failed .chat-text { background: #fee2e2; color: #991b1b; }
.chat-msg.failed .chat-time { color: var(--err); }
.chat.open .chat-fab { display: none; }
.chat.open { width: 640px; height: 560px; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); }
.chat-panel { position: absolute; inset: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(15, 23, 42, .22), 0 2px 8px rgba(15, 23, 42, .1); display: flex; flex-direction: column; overflow: hidden; animation: fade .15s ease-out; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #f8f9fc; }
.chat-head-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.chat-head-text strong { font-size: 14px; }
.chat-head-text .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-sound { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.chat-close { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.chat-close:hover { background: #e9ebf2; color: var(--text); }
.chat-body { display: flex; flex: 1 1 auto; min-height: 0; }
.chat-rooms { width: 200px; flex: 0 0 200px; border-right: 1px solid var(--line); overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; background: #fbfbfd; }
.chat-rooms-h { padding: 10px 8px 4px; text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; font-weight: 650; }
.chat-room { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 8px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--text); }
.chat-room:hover { background: #eef0f5; }
.chat-room.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.chat-room-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; flex: 0 0 9px; box-shadow: 0 0 0 2px #fff; }
.chat-room.online .chat-dot { background: #22c55e; }
.chat-dot.team { background: var(--accent); border-radius: 3px; }
.chat-room.offline { color: var(--muted); }
.chat-unread { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e11d48; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; }
.chat-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.chat-roomhead { padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); font-weight: 650; font-size: 13.5px; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; }
.chat-clear { border: 1px solid var(--line-strong); background: #fff; color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.chat-clear:hover { color: var(--err); border-color: #fca5a5; background: #fef2f2; }
.chat-msgs { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.chat-empty { margin: auto; text-align: center; padding: 20px; }
.chat-day { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin: 4px 0 2px; }
.chat-day::before, .chat-day::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); }
.chat-msg { max-width: 92%; align-self: flex-start; }
.chat-msg.mine { align-self: flex-end; }
.chat-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; padding: 0 2px; }
.chat-msg.mine .chat-meta { justify-content: flex-end; }
.chat-who { font-weight: 650; font-size: 12px; }
.chat-time { color: var(--muted-2); font-size: 11px; }
.chat-del { border: 0; background: transparent; color: var(--muted-2); font-size: 11px; cursor: pointer; padding: 0; opacity: 0; transition: opacity .1s; }
.chat-msg:hover .chat-del { opacity: 1; }
.chat-del:hover { color: var(--err); text-decoration: underline; }
.chat-text { background: #f1f3f8; border-radius: 12px 12px 12px 4px; padding: 8px 12px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.mine .chat-text { background: var(--accent); color: #fff; border-radius: 12px 12px 4px 12px; }
.chat-msg.mine .chat-text em.muted { color: rgba(255, 255, 255, .8); }
.chat-compose { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--line); background: #f8f9fc; }
.chat-compose textarea { flex: 1 1 auto; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 10px; resize: none; min-height: 36px; max-height: 120px; line-height: 1.4; background: #fff; }
.chat-compose textarea:focus { outline: 2px solid var(--accent-ring); border-color: var(--accent); }
.chat-compose .btn { height: 36px; }
.chat-pops { position: absolute; right: 0; bottom: 64px; display: flex; flex-direction: column; gap: 8px; width: 320px; max-width: calc(100vw - 40px); }
.chat.open .chat-pops { bottom: calc(100% + 8px); }
.chat-pop { background: #0f172a; color: #fff; padding: 10px 12px; border-radius: 10px; border-left: 4px solid var(--accent); cursor: pointer; font-size: 13px; line-height: 1.4; box-shadow: var(--shadow-md); animation: fade .18s ease-out; display: flex; flex-direction: column; gap: 2px; }
.chat-pop span { color: rgba(255, 255, 255, .85); overflow-wrap: anywhere; }
.chat-pop:hover { background: #1e293b; }
@media (max-width: 720px) {
.chat { right: 12px; bottom: 12px; }
.chat.open { inset: 0; width: auto; height: auto; max-width: none; max-height: none; }
.chat-panel { border-radius: 0; }
.chat.open .chat-pops { bottom: auto; top: 60px; right: 10px; }
.chat-rooms { width: 130px; flex-basis: 130px; }
}
@media print { .chat { display: none !important; } }
/* ---------- Invoices (v0.1.100) ---------- */
.inv .page-head .muted.small { max-width: 820px; line-height: 1.5; }
.inv-new .card-head .dash-h { margin: 0; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; margin-bottom: 12px; align-items: start; }
.inv-f-go { align-self: end; }
.inv-grid .field { margin: 0; }
.inv-f-pool { grid-column: span 2; }
.inv-f-name { grid-column: span 2; }
.inv-f-address { grid-column: span 2; }
.inv-f-note { grid-column: span 2; }
.inv-f-go .btn { height: 36px; }
.inv-f-remember { align-self: center; }
.inv-form textarea { font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; width: 100%; resize: vertical; }
.inv-form h3.sub { margin-top: 18px; }
.inv-preview { margin: 6px 0 14px; padding: 14px 16px; background: #f8f9fc; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.inv-lines { margin-bottom: 12px; }
.inv-line { display: flex; gap: 14px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.inv-line-label { flex: 1 1 auto; font-weight: 600; }
.inv-line-qty { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-line-amt { white-space: nowrap; min-width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.inv-totals { display: flex; justify-content: flex-end; gap: 22px; padding: 10px 0 2px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.inv-totals strong { color: var(--text); margin-left: 6px; }
.inv-totals .inv-total strong { font-size: 16px; }
.inv-days td, .inv-days th { font-variant-numeric: tabular-nums; }
.inv-days tfoot th { border-top: 2px solid var(--line-strong); }
.inv-list td { vertical-align: top; }
.inv-customers td { vertical-align: top; }
/* one invoice, laid out like its PDF */
.inv-sheet { max-width: 900px; padding: 28px 32px; }
.inv-sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 26px; }
.inv-sheet-head .small { color: var(--text-2); line-height: 1.5; margin-top: 4px; }
.inv-sheet-title { text-align: right; }
.inv-sheet-big { font-size: 30px; letter-spacing: .04em; color: var(--text); }
.inv-sheet-parties { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.inv-sheet-parties .small { line-height: 1.5; color: var(--text-2); }
.inv-sheet-meta { display: flex; flex-direction: column; gap: 6px; min-width: 300px; font-size: 13px; }
.inv-sheet-meta > div { display: flex; justify-content: space-between; gap: 16px; }
.inv-sheet-due { background: #f3f4f6; padding: 6px 10px; border-radius: 6px; font-weight: 700; margin-top: 4px; }
.inv-sheet-notes { margin-top: 20px; line-height: 1.6; color: var(--text-2); }
.inv-sheet-notes > div { margin-top: 6px; }
.inv-pools { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; max-height: 180px; overflow-y: auto; }
.inv-pool { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; padding: 3px 0; cursor: pointer; }
.inv-pool input { margin: 0; }
.inv-pool.inv-pool-all span:first-of-type { color: var(--text-2); font-style: italic; }
.inv-f-pool { grid-column: 1 / -1; }