/* ============================================================
   Stocktake for WooCommerce — premium admin UI
   ============================================================ */

.stwc-app {
	--stwc-primary: #6d28d9;
	--stwc-primary-2: #4f46e5;
	--stwc-primary-soft: #ede9fe;
	--stwc-ink: #0f172a;
	--stwc-text: #1e293b;
	--stwc-muted: #64748b;
	--stwc-border: #e7e8ee;
	--stwc-bg: #f6f7fb;
	--stwc-card: #ffffff;
	--stwc-pos: #15803d;
	--stwc-pos-bg: #dcfce7;
	--stwc-neg: #dc2626;
	--stwc-neg-bg: #fee2e2;
	--stwc-amber: #b45309;
	--stwc-amber-bg: #fef3c7;
	--stwc-radius: 14px;
	--stwc-radius-sm: 10px;
	--stwc-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
	--stwc-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);

	margin: 20px 20px 40px 0;
	color: var(--stwc-text);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.stwc-app * { box-sizing: border-box; }

/* Icons */
.stwc-i { width: 18px; height: 18px; vertical-align: -3px; }

/* ---------- Hero ---------- */
.stwc-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	background: linear-gradient(120deg, var(--stwc-primary) 0%, var(--stwc-primary-2) 100%);
	color: #fff;
	border-radius: var(--stwc-radius);
	padding: 22px 26px;
	margin-bottom: 22px;
	box-shadow: 0 10px 30px rgba(79, 70, 229, .25);
}
.stwc-hero__main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.stwc-hero__back {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 10px;
	background: rgba(255, 255, 255, .15); color: #fff; text-decoration: none;
	transition: background .15s;
}
.stwc-hero__back:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.stwc-hero__title { margin: 0; font-size: 22px; font-weight: 700; color: #fff; line-height: 1.2; }
.stwc-hero__sub { margin: 3px 0 0; color: rgba(255, 255, 255, .82); font-size: 13px; }
.stwc-hero__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Layout ---------- */
.stwc-cols { display: flex; gap: 22px; align-items: flex-start; }
.stwc-col-main { flex: 1 1 auto; min-width: 0; }
.stwc-col-side { flex: 0 0 340px; }

.stwc-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 20px;
}

/* ---------- Cards ---------- */
.stwc-card {
	background: var(--stwc-card);
	border: 1px solid var(--stwc-border);
	border-radius: var(--stwc-radius);
	box-shadow: var(--stwc-shadow);
	padding: 20px;
}
.stwc-card--flush { padding: 0; overflow: hidden; }
.stwc-card__title { margin: 0 0 16px; font-size: 15px; font-weight: 700; color: var(--stwc-ink); display: flex; align-items: center; gap: 8px; }

/* ---------- Stat tiles ---------- */
.stwc-stat {
	background: var(--stwc-card);
	border: 1px solid var(--stwc-border);
	border-radius: var(--stwc-radius);
	box-shadow: var(--stwc-shadow-sm);
	padding: 16px 18px;
}
.stwc-stat__num { font-size: 26px; font-weight: 800; color: var(--stwc-ink); letter-spacing: -.5px; }
.stwc-stat__num .amount, .stwc-stat__num bdi { font-size: 24px; }
.stwc-stat__lbl { color: var(--stwc-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; margin-top: 2px; }

/* ---------- Progress bar ---------- */
.stwc-bar { height: 8px; border-radius: 99px; background: #eceef4; overflow: hidden; }
.stwc-bar--mt { margin-top: 10px; }
.stwc-bar--lg { height: 12px; }
.stwc-bar__fill {
	display: block; height: 100%;
	background: linear-gradient(90deg, var(--stwc-primary-2), var(--stwc-primary));
	border-radius: 99px; transition: width .4s ease;
}

/* ---------- Tables ---------- */
.stwc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.stwc-table thead th {
	text-align: left; padding: 13px 18px;
	font-size: 11px; font-weight: 700; letter-spacing: .05em;
	color: var(--stwc-muted); background: #fbfbfe; border-bottom: 1px solid var(--stwc-border);
}
.stwc-table tbody td { padding: 14px 18px; border-bottom: 1px solid #f1f2f6; vertical-align: middle; }
.stwc-table tbody tr:last-child td { border-bottom: 0; }
.stwc-table tbody tr:hover { background: #fafafe; }
.stwc-right { text-align: right; }
.stwc-w-progress { width: 200px; }
.stwc-code { background: #f1f2f6; padding: 2px 7px; border-radius: 6px; font-size: 12px; color: var(--stwc-text); }
.stwc-link { color: var(--stwc-primary-2); text-decoration: none; }
.stwc-link:hover { text-decoration: underline; }
.stwc-sub { color: var(--stwc-muted); font-size: 12px; margin-top: 3px; }
.stwc-muted { color: var(--stwc-muted); }
.stwc-neg { color: var(--stwc-neg) !important; }
.stwc-pos { color: var(--stwc-pos) !important; }

/* ---------- Pills & tags ---------- */
.stwc-pill {
	display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.7;
	padding: 0 10px; border-radius: 99px; background: #eef0f6; color: var(--stwc-text);
}
.stwc-pill--open { background: #dbeafe; color: #1d4ed8; }
.stwc-pill--completed { background: var(--stwc-pos-bg); color: var(--stwc-pos); }
.stwc-pill--cancelled { background: var(--stwc-neg-bg); color: var(--stwc-neg); }
.stwc-pill--blind { background: var(--stwc-primary-soft); color: var(--stwc-primary); }
.stwc-pill--review { background: var(--stwc-amber-bg); color: var(--stwc-amber); }

/* count sheet */
.stwc-sheet-cell { border-bottom: 1px solid #cbd5e1 !important; }
@media print {
	.stwc-sheet .stwc-card { border: 0; padding: 0; }
	.stwc-sheet-table td, .stwc-sheet-table th { padding: 8px 6px; }
}

.stwc-mode-tag {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 12px; font-weight: 600; color: var(--stwc-text);
	background: #f3f4fa; padding: 3px 10px; border-radius: 99px;
}
.stwc-mode-tag .stwc-i { width: 15px; height: 15px; color: var(--stwc-primary); }
.stwc-mode-tag--hero { background: rgba(255, 255, 255, .16); color: #fff; }
.stwc-mode-tag--hero .stwc-i { color: #fff; }

/* ---------- Buttons ---------- */
.stwc-btn {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 9px 15px; border-radius: var(--stwc-radius-sm);
	font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer;
	background: #fff; color: var(--stwc-text); border: 1px solid var(--stwc-border);
	text-decoration: none; transition: all .15s; box-shadow: var(--stwc-shadow-sm);
}
.stwc-btn:hover { background: #f8f8fc; color: var(--stwc-ink); border-color: #d7d9e3; }
.stwc-btn .stwc-i { width: 16px; height: 16px; }
.stwc-btn--sm { padding: 7px 12px; font-size: 12px; }
.stwc-btn--primary {
	background: linear-gradient(120deg, var(--stwc-primary), var(--stwc-primary-2));
	color: #fff; border: 0; box-shadow: 0 4px 14px rgba(79, 70, 229, .3);
}
.stwc-btn--primary:hover {
	/* Re-assert the gradient: the generic .stwc-btn:hover white background has
	   EQUAL specificity and would otherwise paint white-on-white text. */
	background: linear-gradient(120deg, var(--stwc-primary), var(--stwc-primary-2));
	color: #fff;
	border-color: transparent;
	filter: brightness(1.06);
}
.stwc-btn--ghost { background: transparent; box-shadow: none; }
.stwc-btn--danger { color: var(--stwc-neg); border-color: #f3d2d2; }
.stwc-btn--danger:hover { background: var(--stwc-neg-bg); color: var(--stwc-neg); }
.stwc-btn--block { width: 100%; justify-content: center; padding: 12px; font-size: 14px; }

.stwc-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }

/* ---------- Forms ---------- */
.stwc-form { display: block; }
.stwc-label { display: block; font-weight: 600; font-size: 13px; color: var(--stwc-text); margin: 14px 0 6px; display: flex; align-items: center; gap: 6px; }
.stwc-form > .stwc-label:first-of-type { margin-top: 0; }
.stwc-input {
	width: 100%; padding: 10px 12px; border-radius: var(--stwc-radius-sm);
	border: 1px solid var(--stwc-border); background: #fff; font-size: 14px; color: var(--stwc-text);
	transition: border .15s, box-shadow .15s;
}
.stwc-input:focus { outline: 0; border-color: var(--stwc-primary); box-shadow: 0 0 0 3px var(--stwc-primary-soft); }
select.stwc-input[multiple] { padding: 6px; }
.stwc-check { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; font-size: 13px; cursor: pointer; }
.stwc-check input { margin-top: 2px; }
.stwc-check em { color: var(--stwc-muted); font-style: normal; }
.stwc-hint { color: var(--stwc-muted); font-size: 12px; margin: 10px 0 0; }

/* ---------- Mode selector cards ---------- */
.stwc-modes { display: grid; gap: 9px; }
.stwc-mode { position: relative; display: block; cursor: pointer; }
.stwc-mode input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.stwc-mode__body {
	display: flex; align-items: flex-start; gap: 11px;
	border: 1.5px solid var(--stwc-border); border-radius: var(--stwc-radius-sm);
	padding: 11px 13px; transition: all .15s; background: #fff;
}
.stwc-mode__icon {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 9px; background: #f3f4fa; color: var(--stwc-muted);
}
.stwc-mode__icon .stwc-i { width: 19px; height: 19px; }
.stwc-mode__title { display: block; font-weight: 700; font-size: 13.5px; color: var(--stwc-ink); }
.stwc-mode__desc { display: block; font-size: 12px; color: var(--stwc-muted); margin-top: 2px; line-height: 1.45; }
.stwc-mode:hover .stwc-mode__body { border-color: #c9cbe0; }
.stwc-mode input:checked + .stwc-mode__body {
	border-color: var(--stwc-primary);
	background: linear-gradient(0deg, var(--stwc-primary-soft), #fff);
	box-shadow: 0 0 0 3px var(--stwc-primary-soft);
}
.stwc-mode input:checked + .stwc-mode__body .stwc-mode__icon { background: var(--stwc-primary); color: #fff; }
.stwc-mode input:focus-visible + .stwc-mode__body { box-shadow: 0 0 0 3px var(--stwc-primary-soft); }

/* locked (Pro) mode cards */
a.stwc-mode--locked { text-decoration: none; display: block; }
.stwc-mode--locked .stwc-mode__body { background: #fafafd; border-style: dashed; }
.stwc-mode--locked .stwc-mode__icon { opacity: .55; }
.stwc-mode--locked .stwc-mode__desc { opacity: .75; }
.stwc-mode--locked:hover .stwc-mode__body { border-color: var(--stwc-primary); background: var(--stwc-primary-soft); }

.stwc-pro-pill {
	display: inline-flex; align-items: center; gap: 3px; vertical-align: 1px;
	font-size: 9px; font-weight: 800; letter-spacing: .05em; line-height: 1.7;
	padding: 0 7px; border-radius: 99px;
	background: linear-gradient(120deg, var(--stwc-primary), var(--stwc-primary-2)); color: #fff;
}
.stwc-pro-pill .stwc-i { width: 10px; height: 10px; }

/* ---------- Flash ---------- */
.stwc-flash { border-radius: var(--stwc-radius-sm); padding: 12px 16px; margin-bottom: 18px; font-weight: 600; font-size: 13px; }
.stwc-flash--ok { background: var(--stwc-pos-bg); color: var(--stwc-pos); }

/* ---------- Empty state ---------- */
.stwc-empty { text-align: center; padding: 50px 24px; }
.stwc-empty__icon {
	width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px;
	display: flex; align-items: center; justify-content: center;
	background: var(--stwc-primary-soft); color: var(--stwc-primary);
}
.stwc-empty__icon .stwc-i { width: 30px; height: 30px; }
.stwc-empty h3 { margin: 0 0 6px; font-size: 17px; color: var(--stwc-ink); }
.stwc-empty p { margin: 0 auto; max-width: 360px; color: var(--stwc-muted); }

/* ============================================================
   Count screen
   ============================================================ */
.stwc-count-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; }

.stwc-scan-card { padding: 26px; transition: box-shadow .2s, border-color .2s; }
.stwc-scan-card.is-ok { border-color: var(--stwc-pos); box-shadow: 0 0 0 4px var(--stwc-pos-bg); }
.stwc-scan-card.is-err { border-color: var(--stwc-neg); box-shadow: 0 0 0 4px var(--stwc-neg-bg); }
.stwc-scan-input {
	width: 100%; margin-top: 4px; padding: 16px 18px;
	font-size: 22px; font-weight: 600; letter-spacing: .3px;
	border: 2px solid var(--stwc-border); border-radius: 12px; background: #fbfbfe;
	transition: border .15s, box-shadow .15s;
}
.stwc-scan-input:focus { outline: 0; border-color: var(--stwc-primary); box-shadow: 0 0 0 4px var(--stwc-primary-soft); background: #fff; }

/* type-ahead suggestions */
.stwc-suggest {
	list-style: none; margin: 10px 0 0; padding: 0;
	border: 1px solid var(--stwc-border); border-radius: 12px; overflow: hidden;
	box-shadow: var(--stwc-shadow); background: #fff;
}
.stwc-suggest:empty { display: none; }
.stwc-suggest__item {
	display: flex; align-items: center; gap: 12px;
	padding: 9px 12px; cursor: pointer; border-bottom: 1px solid #f1f2f6;
}
.stwc-suggest__item:last-child { border-bottom: 0; }
.stwc-suggest__item.is-active { background: var(--stwc-primary-soft); }
.stwc-suggest__img {
	width: 44px; height: 44px; flex: 0 0 auto; border-radius: 9px;
	object-fit: cover; background: #f3f4fa; border: 1px solid var(--stwc-border);
}
.stwc-suggest__body { flex: 1 1 auto; min-width: 0; }
.stwc-suggest__name { font-weight: 600; font-size: 13.5px; color: var(--stwc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stwc-suggest__meta { font-size: 12px; color: var(--stwc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.stwc-suggest__right { flex: 0 0 auto; text-align: right; }
.stwc-suggest__price { font-weight: 700; font-size: 13px; color: var(--stwc-text); white-space: nowrap; }
.stwc-suggest__tag { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 1px 8px; border-radius: 99px; }
.stwc-suggest__tag.is-in { background: #dbeafe; color: #1d4ed8; }
.stwc-suggest__tag.is-add { background: var(--stwc-pos-bg); color: var(--stwc-pos); }

/* Variation attributes as always-visible chips (long names ellipsize; the
   "Red, S" tail is exactly what tells variant rows apart). */
.stwc-suggest__variants { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.stwc-vchip {
	display: inline-block; padding: 1px 8px; border-radius: 99px;
	font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
	background: var(--stwc-primary-soft); color: var(--stwc-primary);
	border: 1px solid rgba(109, 40, 217, .14);
	white-space: nowrap;
}

.stwc-stage { margin-top: 18px; min-height: 10px; }
.stwc-stage__error { color: var(--stwc-neg); font-weight: 600; background: var(--stwc-neg-bg); padding: 12px 14px; border-radius: var(--stwc-radius-sm); }

/* qty entry (injected) */
.stwc-qty { border: 1px solid var(--stwc-border); border-radius: var(--stwc-radius); padding: 18px; background: #fff; box-shadow: var(--stwc-shadow-sm); }
.stwc-qty__name { font-size: 18px; font-weight: 700; color: var(--stwc-ink); }
.stwc-qty__meta { color: var(--stwc-muted); font-size: 13px; margin-top: 4px; display: flex; gap: 14px; flex-wrap: wrap; }
.stwc-qty__meta b { color: var(--stwc-text); }
.stwc-qty__stepper { display: flex; align-items: stretch; gap: 10px; margin: 16px 0; }
.stwc-step {
	flex: 0 0 auto; width: 56px; font-size: 26px; font-weight: 700;
	border: 1px solid var(--stwc-border); background: #f7f7fc; border-radius: 12px; cursor: pointer;
	color: var(--stwc-ink); transition: background .12s;
}
.stwc-step:hover { background: var(--stwc-primary-soft); }
.stwc-step:active { transform: scale(.96); }
.stwc-qty__input {
	flex: 1 1 auto; width: 100%; text-align: center;
	font-size: 34px; font-weight: 800; color: var(--stwc-ink);
	border: 2px solid var(--stwc-border); border-radius: 12px; padding: 6px;
	-moz-appearance: textfield;
}
.stwc-qty__input::-webkit-outer-spin-button, .stwc-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stwc-qty__input:focus { outline: 0; border-color: var(--stwc-primary); box-shadow: 0 0 0 4px var(--stwc-primary-soft); }
.stwc-qty__actions { display: flex; gap: 10px; }
.stwc-qty__actions .stwc-btn { flex: 1; justify-content: center; padding: 12px; font-size: 15px; }

/* side card */
.stwc-side-card { position: sticky; top: 50px; }
.stwc-progress-cap { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--stwc-muted); margin-bottom: 4px; }
.stwc-progress-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.stwc-progress-pct { font-size: 26px; font-weight: 800; color: var(--stwc-ink); letter-spacing: -.5px; }
.stwc-side-title { margin: 22px 0 10px; font-size: 13px; letter-spacing: .05em; color: var(--stwc-muted); }
.stwc-recent { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.stwc-recent li {
	display: flex; flex-direction: column; gap: 8px;
	padding: 11px 12px; border-radius: 10px; border: 1px solid #f1f2f6; margin-bottom: 7px;
	animation: stwc-pop .25s ease;
	transition: border-color .3s ease, box-shadow .3s ease;
}
.stwc-recent li.is-saved { border-color: var(--stwc-pos); box-shadow: 0 0 0 1px var(--stwc-pos); }
.stwc-recent li.is-err { border-color: var(--stwc-neg); box-shadow: 0 0 0 1px var(--stwc-neg); }
.stwc-recent__empty { color: var(--stwc-muted); flex-direction: row !important; justify-content: center !important; border-style: dashed !important; animation: none !important; }
.stwc-recent__main { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.stwc-recent__name { font-weight: 600; font-size: 13px; color: var(--stwc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stwc-recent__tools { display: flex; align-items: center; gap: 6px; }
.stwc-rstep {
	flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid #dde0ea;
	background: #fff; color: var(--stwc-ink); font-size: 15px; font-weight: 700; line-height: 1;
	cursor: pointer; touch-action: manipulation;
}
.stwc-rstep:hover { background: #f4f5f9; }
.stwc-recent__qty {
	flex: 1 1 auto; width: 100%; min-width: 0; height: 30px; text-align: center;
	border: 1px solid #dde0ea; border-radius: 8px; font-size: 13px; font-weight: 700;
}
.stwc-recent__qty.is-invalid { border-color: var(--stwc-neg); }
.stwc-recent__del {
	flex: 0 0 auto; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 8px;
	border: 1px solid #f0d5d5; background: #fff; color: var(--stwc-neg); font-size: 12px; font-weight: 700;
	line-height: 1; cursor: pointer; touch-action: manipulation; white-space: nowrap;
}
.stwc-recent__del:hover { background: var(--stwc-neg-bg); }
.stwc-recent__del.is-armed { background: var(--stwc-neg); border-color: var(--stwc-neg); color: #fff; }
.stwc-chip { flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: #eef0f6; color: var(--stwc-text); }
.stwc-chip--pos { background: var(--stwc-pos-bg); color: var(--stwc-pos); }
.stwc-chip--neg { background: var(--stwc-neg-bg); color: var(--stwc-neg); }
.stwc-chip--zero { background: var(--stwc-pos-bg); color: var(--stwc-pos); }

@keyframes stwc-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* last-item edit panel: the count is already saved; this is a correction
   surface, not a prompt */
.stwc-last { transition: border-color .3s ease, box-shadow .3s ease; animation: stwc-pop .25s ease; }
.stwc-last.is-saved { border-color: var(--stwc-pos); box-shadow: 0 0 0 1px var(--stwc-pos); }
.stwc-last.is-err { border-color: var(--stwc-neg); box-shadow: 0 0 0 1px var(--stwc-neg); }
.stwc-last__warn {
	display: flex; align-items: center; gap: 8px;
	margin-bottom: 10px; padding: 11px 14px; border-radius: 10px;
	background: #fff7e6; border: 1px solid #f2d59b; color: #8a5a00;
	font-size: 14px; animation: stwc-pop .25s ease;
}
.stwc-last__warn b { font-size: 16px; white-space: nowrap; }
.stwc-last__info {
	display: flex; align-items: center; gap: 8px;
	margin-bottom: 10px; padding: 11px 14px; border-radius: 10px;
	background: #eef4ff; border: 1px solid #c3d5f5; color: #1d4f9e;
	font-size: 14px; animation: stwc-pop .25s ease;
}
.stwc-last__note { margin-top: 10px; color: var(--stwc-muted); font-size: 12px; }

/* hero white button */
.stwc-btn--hero { background: #fff; color: var(--stwc-primary-2); border: 0; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.stwc-btn--hero:hover { background: #fff; color: var(--stwc-primary); filter: brightness(1); transform: translateY(-1px); }

/* info banner */
.stwc-info {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	background: #eff6ff; border: 1px solid #dbeafe; color: #1e40af;
	border-radius: var(--stwc-radius-sm); padding: 11px 14px; margin-bottom: 16px; font-size: 13px;
}
.stwc-info .stwc-i { color: #2563eb; flex: 0 0 auto; }
.stwc-info span { flex: 1 1 auto; min-width: 160px; }

/* scan input + camera button */
.stwc-scan-wrap { position: relative; }
.stwc-scan-wrap .stwc-scan-input { padding-right: 60px; }
.stwc-cam-btn {
	position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border: 0; border-radius: 10px; cursor: pointer;
	background: linear-gradient(120deg, var(--stwc-primary), var(--stwc-primary-2)); color: #fff;
	display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(79,70,229,.3);
}
.stwc-cam-btn:hover { filter: brightness(1.07); }
.stwc-cam-btn .stwc-i { width: 22px; height: 22px; }
.stwc-cam-beta {
	position: absolute; top: -7px; right: -7px;
	background: #f59e0b; color: #fff; font-size: 9px; font-weight: 800; line-height: 1.6;
	padding: 0 5px; border-radius: 8px; letter-spacing: .02em;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .28); pointer-events: none;
}

/* remaining */
.stwc-remain { margin-top: 10px; font-size: 14px; color: var(--stwc-muted); }
.stwc-remain strong { color: var(--stwc-ink); font-size: 18px; }
.stwc-saved { margin-top: 8px; font-size: 12px; color: var(--stwc-pos); display: flex; align-items: center; gap: 6px; }
.stwc-saved .stwc-i { width: 14px; height: 14px; }

/* qty head + thumbnail */
.stwc-qty__head { display: flex; align-items: center; gap: 12px; }
.stwc-qty__img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; border: 1px solid var(--stwc-border); flex: 0 0 auto; }

/* ---------- Camera modal ---------- */
.stwc-cam-ov {
	position: fixed; inset: 0; z-index: 100000; background: rgba(2, 6, 23, .82);
	display: flex; align-items: center; justify-content: center; padding: 14px;
}
/* Focused programmatically when it opens, to keep a handheld scanner's
   trailing Enter off the Close button; no ring around the whole panel. */
.stwc-cam:focus { outline: none; }
.stwc-cam {
	width: 100%; max-width: 460px; background: #0f172a; color: #fff;
	border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.stwc-cam-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-weight: 700; }
.stwc-cam-x { background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
.stwc-cam-headbeta { font-size: 10px; font-weight: 800; letter-spacing: .04em; background: #f59e0b; color: #1f2937; padding: 1px 7px; border-radius: 99px; margin-left: 6px; }
.stwc-cam-note { padding: 4px 16px 14px; font-size: 12px; color: #94a3b8; line-height: 1.45; }
.stwc-cam-stage { position: relative; background: #000; aspect-ratio: 3 / 4; max-height: 56vh; overflow: hidden; }
.stwc-cam-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.stwc-cam-guide { position: absolute; left: 7%; right: 7%; top: 50%; height: 2px; background: #ef4444; box-shadow: 0 0 0 1px rgba(0,0,0,.4); transform: translateY(-50%); }
.stwc-cam-guide::before, .stwc-cam-guide::after { content: ''; position: absolute; top: -60px; bottom: -60px; width: 2px; background: rgba(255,255,255,.35); }
.stwc-cam-guide::before { left: 0; } .stwc-cam-guide::after { right: 0; }
/* Centred, and every control flows in the same order. Zoom, light and photo
   are revealed by what the phone can actually do, so pinning one of them
   to an edge moved the others depending on the device -- a merchant who
   learned where Photo scan was found it somewhere else on the next phone. */
.stwc-cam-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; padding: 12px 16px; }
.stwc-cam-tools button, .stwc-cam-shot {
	background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 9px;
	padding: 11px 14px; cursor: pointer; font-size: 13px; font-weight: 600;
	/* 44px is the smallest target both platforms call reliable, and this control
	   set is used one-handed at a shelf. inline-flex so the min-height applies
	   to the file-input label as well as the buttons. */
	min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
	touch-action: manipulation;
}
.stwc-cam-tools button.on { background: #f59e0b; color: #1f2937; }
/* No margin-left: auto here -- see .stwc-cam-tools above. */
/* Two lines reserved: the confirmations run long ("already counted 3 + 1 = 4")
   and a one-line box pushed the tools down on every scan. */
/* The one line a counter reads between two items, at arm's length, holding
   a phone in one hand. It carries an outcome, so it is sized and coloured
   to be read at a glance -- the words still say everything, the colour
   only saves the glance. Fixed min-height so a one-word status and a long
   one do not move the controls above it. */
.stwc-cam-status {
	padding: 8px 16px 14px; font-size: 15px; font-weight: 600; line-height: 1.4;
	color: #e2e8f0; min-height: 46px;
}
.stwc-cam-status.is-ok { color: #4ade80; }
.stwc-cam-status.is-warn { color: #fbbf24; }
.stwc-cam-status.is-info { color: #7dd3fc; }
.stwc-cam-status.is-err { color: #fca5a5; }
.stwc-cam-confirm { padding: 14px 16px 18px; background: #111c33; border-top: 1px solid rgba(255,255,255,.08); }
.stwc-cam-confirm__name { font-size: 16px; font-weight: 700; }
.stwc-cam-confirm__meta { color: #94a3b8; font-size: 13px; margin-top: 3px; }
.stwc-cam-qty { display: flex; gap: 10px; margin: 12px 0; }
.stwc-cam-qty .stwc-step { width: 54px; }
.stwc-cam-input { flex: 1; text-align: center; font-size: 30px; font-weight: 800; border-radius: 12px; border: 2px solid rgba(255,255,255,.18); background: #0b1424; color: #fff; -moz-appearance: textfield; }
.stwc-cam-input::-webkit-outer-spin-button, .stwc-cam-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stwc-cam-confirm__actions { display: flex; gap: 10px; }
.stwc-cam-confirm__actions .stwc-btn { flex: 1; justify-content: center; padding: 12px; font-size: 15px; }
.stwc-cam-confirm__actions .stwc-btn--ghost { color: #cbd5e1; border-color: rgba(255,255,255,.2); }

/* ---------- Print (valuation report -> browser PDF) ---------- */
@media print {
	#adminmenumain, #wpadminbar, #wpfooter, .stwc-toolbar, .stwc-hero__back, .stwc-flash { display: none !important; }
	#wpcontent { margin-left: 0 !important; }
	.stwc-card, .stwc-stat { box-shadow: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.stwc-grid { grid-template-columns: repeat(2, 1fr); }
	.stwc-count-grid { grid-template-columns: 1fr; }
	.stwc-side-card { position: static; }
}
@media (max-width: 782px) {
	.stwc-app { margin-right: 10px; }
	.stwc-cols { flex-direction: column; }
	.stwc-col-side { flex-basis: auto; width: 100%; }
	/* The main column needs the same 100% the side column already got. In a
	   column flex container align-items:flex-start does NOT stretch items across
	   the cross axis, so each column takes its own CONTENT width -- and this
	   one's content is the table. Measured at 375px: the column stood at 610px
	   inside a 355px page and pushed the whole admin screen 245px sideways,
	   which also meant the overflow-x:auto added to .stwc-card--flush just below
	   never engaged: the card was never narrower than its table. */
	.stwc-col-main { width: 100%; }
	.stwc-hero { padding: 18px; }
	.stwc-hero__title { font-size: 19px; }
	.stwc-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.stwc-scan-input { font-size: 19px; }
	.stwc-step { width: 64px; }
	/* Wide tables scroll sideways instead of being clipped by the card
	   (overflow:hidden was silently cutting the value/applied/by columns). */
	.stwc-card--flush { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
	.stwc-table tbody td { padding: 12px 12px; }
	.stwc-table thead th { padding: 11px 12px; }
}

/* Codes, prices and dates never letter-wrap inside squeezed table cells. */
.stwc-code { white-space: nowrap; }
.stwc-table th { white-space: nowrap; }
.stwc-table .amount, .stwc-table .stwc-sub { white-space: nowrap; }

/* ============================================================
   Design polish pass (v0.10.2) — applies to both Free & Pro
   ============================================================ */
.stwc-app { font-variant-numeric: tabular-nums; }

/* Accessible focus rings on everything interactive */
.stwc-app a:focus-visible,
.stwc-app button:focus-visible,
.stwc-app input:focus-visible,
.stwc-app select:focus-visible,
.stwc-app textarea:focus-visible {
	outline: 2px solid var(--stwc-primary);
	outline-offset: 2px;
	border-radius: 6px;
}
.stwc-mode input:focus-visible + .stwc-mode__body { outline: 2px solid var(--stwc-primary); outline-offset: 2px; }

/* Hero: soft light sheen for depth + keep content above it. No overflow:hidden
   here — it would clip the language dropdown; the sheen matches the hero's
   rounded corners via border-radius:inherit instead. */
.stwc-hero { position: relative; }
.stwc-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
	background: radial-gradient( 130% 130% at 88% -30%, rgba(255,255,255,.22), transparent 55% );
}
.stwc-hero__main, .stwc-hero__meta { position: relative; z-index: 1; }

/* Buttons: springier feedback + stronger primary hover */
.stwc-btn { transition: transform .12s ease, box-shadow .15s ease, background .15s, border-color .15s, filter .15s; }
.stwc-btn:active { transform: translateY(1px); }
.stwc-btn--primary:hover { box-shadow: 0 7px 20px rgba(79, 70, 229, .4); }
.stwc-btn--hero:active { transform: translateY(0); }

/* Stat tiles: top accent bar + gentle hover lift */
.stwc-stat { position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.stwc-stat::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
	background: linear-gradient( 90deg, var(--stwc-primary), var(--stwc-primary-2) );
}
.stwc-stat:hover { transform: translateY(-2px); box-shadow: var(--stwc-shadow); }

/* Mode cards: subtle lift on hover, smoother transitions */
.stwc-mode__body { transition: border-color .15s, box-shadow .15s, background .15s, transform .12s; }
.stwc-mode:hover .stwc-mode__body { transform: translateY(-1px); }

/* Thumbnails degrade gracefully (neutral fill if the image is missing) */
.stwc-suggest__img, .stwc-qty__img { background: #eef0f6 center / cover no-repeat; }
.stwc-suggest__item { transition: background .12s ease; }

/* Recent-scan list: tidy custom scrollbar */
.stwc-recent { scrollbar-width: thin; scrollbar-color: #cbcfdb transparent; }
.stwc-recent::-webkit-scrollbar { width: 8px; }
.stwc-recent::-webkit-scrollbar-thumb { background: #cbcfdb; border-radius: 8px; }
.stwc-recent::-webkit-scrollbar-track { background: transparent; }

/* Pro pill: a touch of shine */
.stwc-pro-pill { box-shadow: 0 1px 3px rgba(79, 70, 229, .35); }

/* Flash messages slide in */
.stwc-flash { animation: stwc-flash-in .25s ease; }
@keyframes stwc-flash-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Tables: quieter zebra + clearer hover, rounded last row corners */
.stwc-table tbody tr { transition: background .12s ease; }
.stwc-table tbody tr:hover { background: #f5f3ff; }
.stwc-card--flush .stwc-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--stwc-radius); }
.stwc-card--flush .stwc-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--stwc-radius); }

/* Count screen: make the scan card feel like the focal point */
.stwc-scan-card { border-width: 1px; }
.stwc-scan-card:focus-within { border-color: var(--stwc-primary); box-shadow: 0 0 0 4px var(--stwc-primary-soft), var(--stwc-shadow); }

/* Progress bar: animated stripe while it fills */
.stwc-bar--lg .stwc-bar__fill { background-size: 200% 100%; }

/* Empty state icon: soft ring */
.stwc-empty__icon { box-shadow: 0 0 0 8px rgba(109, 40, 217, .06); }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.stwc-app *, .stwc-recent li, .stwc-flash { animation: none !important; transition: none !important; }
	.stwc-stat:hover, .stwc-mode:hover .stwc-mode__body { transform: none; }
}

/* Hero brand badge (shown when there is no back arrow) */
.stwc-hero__badge {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px;
	background: rgba(255, 255, 255, .16); color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.stwc-hero__badge .stwc-i { width: 22px; height: 22px; }

/* Third-party admin notices must never sit inside the hero (belt & braces —
   they are removed on our screens and relocated above via .wp-header-end). */
.stwc-hero .notice,
.stwc-hero .update-nag,
.stwc-hero div.updated,
.stwc-hero div.error { display: none !important; }
.stwc-app hr.wp-header-end { margin: 0; border: 0; height: 0; }

/* Hero language switcher (per-user, flags) */
.stwc-flag {
	width: 20px; height: 14px; flex: 0 0 auto; display: inline-block;
	border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.stwc-flag svg { display: block; width: 100%; height: 100%; }
.stwc-flag--auto { display: inline-flex; align-items: center; justify-content: center; background: #eef0f6; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.stwc-flag--auto .stwc-i { width: 12px; height: 12px; color: var(--stwc-primary); }

.stwc-lang { position: relative; margin: 0; }
.stwc-lang__toggle {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
	background: rgba(255, 255, 255, .14); color: #fff; border: 0; border-radius: 10px;
	padding: 7px 10px; font-size: 12.5px; font-weight: 600;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background .15s;
}
.stwc-lang__toggle:hover { background: rgba(255, 255, 255, .24); }
.stwc-lang__toggle .stwc-i { width: 14px; height: 14px; opacity: .85; }
.stwc-lang__label { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.stwc-lang__menu {
	position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 30;
	margin: 0; padding: 6px; list-style: none; min-width: 210px;
	background: #fff; border: 1px solid var(--stwc-border); border-radius: 12px; box-shadow: var(--stwc-shadow);
	animation: stwc-pop .16s ease;
}
.stwc-lang__menu li { margin: 0; }
.stwc-lang__opt {
	display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; cursor: pointer;
	background: transparent; border: 0; border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--stwc-text);
}
.stwc-lang__opt:hover { background: var(--stwc-primary-soft); }
.stwc-lang__opt.is-cur { font-weight: 700; }
.stwc-lang__optlbl { flex: 1 1 auto; }
.stwc-lang__opt .stwc-i { width: 15px; height: 15px; color: var(--stwc-primary); flex: 0 0 auto; }

/* ---------- Reports hub sub-navigation ---------- */
.stwc-subnav {
	display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 20px;
	padding: 5px; background: var(--stwc-card); border: 1px solid var(--stwc-border);
	border-radius: 12px; box-shadow: var(--stwc-shadow-sm); width: fit-content; max-width: 100%;
}
.stwc-subnav__item {
	display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
	padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
	color: var(--stwc-muted); transition: background .12s, color .12s;
}
.stwc-subnav__item .stwc-i { width: 15px; height: 15px; }
.stwc-subnav__item:hover { background: var(--stwc-bg); color: var(--stwc-text); }
.stwc-subnav__item.is-active { background: var(--stwc-primary); color: #fff; box-shadow: 0 2px 8px rgba(109, 40, 217, .28); }
.stwc-subnav__item.is-active .stwc-i { color: #fff; }
.stwc-subnav__item .stwc-pro-pill { margin-inline-start: 2px; }

/* ---------- Inline note / completeness banner ---------- */
.stwc-note {
	display: flex; align-items: center; gap: 13px; margin: 0 0 18px;
	padding: 13px 16px; border-radius: var(--stwc-radius-sm);
	background: var(--stwc-primary-soft); color: var(--stwc-text); border: 1px solid transparent;
}
.stwc-note--warn { background: var(--stwc-amber-bg); border-color: rgba(180, 83, 9, .18); }
.stwc-note__icon { display: inline-flex; flex: 0 0 auto; }
.stwc-note__icon .stwc-i { width: 20px; height: 20px; color: var(--stwc-primary); }
.stwc-note--warn .stwc-note__icon .stwc-i { color: var(--stwc-amber); }
.stwc-note__body { flex: 1 1 auto; font-size: 13px; }
.stwc-note .stwc-btn { flex: 0 0 auto; }

/* ---------- Low-stock badge ---------- */
.stwc-badge {
	display: inline-block; padding: 2px 9px; border-radius: 99px;
	font-size: 11px; font-weight: 700; letter-spacing: .03em;
}
.stwc-badge--low { background: var(--stwc-amber-bg); color: var(--stwc-amber); }

/* ---------- ABC accent tiles ---------- */
.stwc-abc--a::before { background: linear-gradient( 90deg, #6d28d9, #4f46e5 ); }
.stwc-abc--b::before { background: linear-gradient( 90deg, #0ea5e9, #6366f1 ); }
.stwc-abc--c::before { background: linear-gradient( 90deg, #94a3b8, #cbd5e1 ); }

/* ---------- Trend chart (dependency-free CSS bars) ---------- */
.stwc-chart {
	display: flex; align-items: flex-end; gap: 10px; overflow-x: auto;
	padding: 6px 2px 0; min-height: 190px;
}
.stwc-chart__col { flex: 1 0 62px; min-width: 62px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.stwc-chart__acc { font-size: 12px; font-weight: 700; color: var(--stwc-primary); margin-bottom: 6px; }
.stwc-chart__track {
	width: 100%; height: 120px; display: flex; align-items: flex-end; justify-content: center;
	background: linear-gradient( var(--stwc-bg), transparent ); border-radius: 8px 8px 0 0;
}
.stwc-chart__bar {
	width: 60%; max-width: 44px; min-height: 3px; border-radius: 6px 6px 0 0;
	background: linear-gradient( 180deg, #f87171, var(--stwc-neg) ); transition: height .4s ease;
}
.stwc-chart__val { font-size: 12px; font-weight: 700; margin-top: 8px; }
.stwc-chart__date { font-size: 11px; color: var(--stwc-muted); margin-top: 2px; }

@media print {
	.stwc-subnav, .stwc-note { display: none !important; }
}

/* ---------- Pro mini landing pages (locked features) ---------- */
.stwc-pitch {
	position: relative; background: var(--stwc-card);
	border: 1px solid var(--stwc-border); border-radius: var(--stwc-radius);
	box-shadow: var(--stwc-shadow-sm); padding: 30px 30px 26px; overflow: hidden;
}
.stwc-pitch::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
	background: linear-gradient( 90deg, var(--stwc-primary), var(--stwc-primary-2) );
}
.stwc-pitch__head { max-width: 640px; }
.stwc-pitch__title { margin: 12px 0 6px; font-size: 22px; font-weight: 800; color: var(--stwc-ink); letter-spacing: -.3px; }
.stwc-pitch__tag { margin: 0; color: var(--stwc-muted); font-size: 14px; line-height: 1.6; }
.stwc-pitch__cols {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 26px; align-items: center; margin: 24px 0 6px;
}
.stwc-pitch__benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.stwc-pitch__benefits li { display: flex; gap: 12px; align-items: flex-start; }
.stwc-pitch__bicon {
	flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--stwc-primary-soft); color: var(--stwc-primary);
}
.stwc-pitch__bicon .stwc-i { width: 18px; height: 18px; }
.stwc-pitch__btext { display: block; font-size: 13px; line-height: 1.5; color: var(--stwc-muted); }
.stwc-pitch__btext strong { display: block; font-size: 14px; color: var(--stwc-ink); margin-bottom: 1px; }
.stwc-pitch__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.stwc-pitch__btn { padding: 12px 26px; font-size: 14px; }
.stwc-pitch__note { font-size: 12px; color: var(--stwc-muted); }
@media (max-width: 900px) {
	.stwc-pitch__cols { grid-template-columns: 1fr; }
}

/* CSS-drawn feature preview (wireframe style — no words, nothing to translate) */
.stwc-pitch__mock {
	background: linear-gradient( 160deg, #f6f4ff, #eef1fb 60%, #f8f7ff );
	border: 1px solid rgba(109, 40, 217, .12); border-radius: 14px; padding: 18px;
}
.stwc-mock { display: flex; flex-direction: column; gap: 10px; }
.stwc-mock__scan {
	display: flex; align-items: center; justify-content: space-between;
	background: #fff; border: 2px solid var(--stwc-primary); border-radius: 10px; padding: 10px 12px;
}
.stwc-mock__cam {
	width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient( 135deg, var(--stwc-primary), var(--stwc-primary-2) ); color: #fff;
}
.stwc-mock__cam .stwc-i { width: 15px; height: 15px; }
.stwc-mock__row {
	display: flex; align-items: center; gap: 10px;
	background: #fff; border-radius: 10px; padding: 10px 12px; box-shadow: var(--stwc-shadow-sm);
}
.stwc-mock__row.is-hi { outline: 2px solid var(--stwc-primary); outline-offset: -2px; }
.stwc-mock__img { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 7px; background: #e4e6f2; }
.stwc-mock__dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 99px; background: var(--stwc-primary); opacity: .55; }
.stwc-mock__dot.is-user { background: #0ea5e9; opacity: .8; }
.stwc-mock__dot.is-user2 { background: #f59e0b; opacity: .8; }
.stwc-mock__grow { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.stwc-mock__bar { display: block; height: 9px; border-radius: 99px; background: #dfe2ef; }
.stwc-mock__bar.is-dim { height: 7px; opacity: .6; }
.stwc-mock__chips { display: flex; gap: 5px; }
.stwc-mock__chips i { width: 34px; height: 12px; border-radius: 99px; background: var(--stwc-primary-soft); border: 1px solid rgba(109, 40, 217, .18); }
.stwc-mock__num { flex: 0 0 auto; font-size: 15px; font-weight: 800; color: var(--stwc-ink); font-variant-numeric: tabular-nums; }
.stwc-mock__num.is-pos { color: var(--stwc-pos); }
.stwc-mock__num.is-neg { color: var(--stwc-neg); }
.stwc-mock__pill { flex: 0 0 auto; width: 44px; height: 20px; border-radius: 99px; background: #eceef4; }
.stwc-mock__pill.is-primary { background: linear-gradient( 135deg, var(--stwc-primary), var(--stwc-primary-2) ); }
.stwc-mock__tiles { display: flex; gap: 10px; }
.stwc-mock__tile {
	flex: 1 1 0; background: #fff; border-radius: 10px; padding: 10px; box-shadow: var(--stwc-shadow-sm);
	display: flex; flex-direction: column; gap: 6px;
}
.stwc-mock__tile b { font-size: 16px; font-weight: 800; color: var(--stwc-primary); }
.stwc-mock__tile.is-b b { color: #0ea5e9; }
.stwc-mock__tile.is-c b { color: #94a3b8; }
.stwc-mock__tile i { display: block; height: 8px; border-radius: 99px; background: #dfe2ef; }
.stwc-mock__chart {
	display: flex; align-items: flex-end; gap: 8px; height: 90px;
	background: #fff; border-radius: 10px; padding: 12px; box-shadow: var(--stwc-shadow-sm);
}
.stwc-mock__chart span { flex: 1 1 0; border-radius: 6px 6px 0 0; background: linear-gradient( 180deg, #f87171, var(--stwc-neg) ); }

/* ---------- Quick stock check (Pro) ---------- */
.stwc-checklist { list-style: none; margin: 0; padding: 0; }
.stwc-checklist li { margin: 0; }
.stwc-checklist__item {
	display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
	background: transparent; border: 0; border-bottom: 1px solid #f1f2f6;
	padding: 12px 16px; cursor: pointer; transition: background .12s ease;
}
.stwc-checklist li:last-child .stwc-checklist__item { border-bottom: 0; }
.stwc-checklist__item:hover { background: var(--stwc-primary-soft); }
.stwc-checklist__body { min-width: 0; display: block; }

.stwc-check__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.stwc-check__warn {
	display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 99px;
	background: var(--stwc-amber-bg); color: var(--stwc-amber); font-size: 12px; font-weight: 600;
}
.stwc-check__warn--sm { font-size: 11px; margin-top: 6px; padding: 1px 8px; }
.stwc-check__units { display: flex; flex-direction: column; }
.stwc-check__unit {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	padding: 13px 4px; border-top: 1px solid #f1f2f6; border-radius: 8px;
	transition: background .3s ease;
}
.stwc-check__unit.is-scanned { background: var(--stwc-primary-soft); padding-inline: 10px; }
.stwc-check__unit.is-saved { background: var(--stwc-pos-bg); }
.stwc-check__unitinfo { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stwc-check__stock { flex: 0 0 auto; text-align: center; font-size: 22px; font-weight: 800; min-width: 74px; }
.stwc-check__stock small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--stwc-muted); }
.stwc-check__fix { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.stwc-check__qty { width: 92px; text-align: center; font-size: 16px; font-weight: 700; }
.stwc-check__msg { flex: 1 1 100%; font-size: 12px; font-weight: 600; min-height: 0; }
.stwc-check__msg.is-ok { color: var(--stwc-pos); }
.stwc-check__msg.is-err { color: var(--stwc-neg); }
#stwc-check-stage { margin-top: 18px; }
.stwc-radio { display: flex; align-items: flex-start; gap: 9px; margin: 9px 0; font-size: 13px; color: var(--stwc-text); cursor: pointer; }
.stwc-radio input { margin-top: 2px; }
#stwc-check-card.is-ok { border-color: var(--stwc-pos); box-shadow: 0 0 0 4px var(--stwc-pos-bg); }
#stwc-check-card.is-err { border-color: var(--stwc-neg); box-shadow: 0 0 0 4px var(--stwc-neg-bg); }


/* ---------- Help & FAQ ---------- */
.stwc-faq__item { border-bottom: 1px solid var(--stwc-border); padding: 4px 0; }
.stwc-faq__item:last-child { border-bottom: 0; }
.stwc-faq__item summary { cursor: pointer; font-weight: 600; padding: 10px 4px; list-style-position: inside; }
.stwc-faq__item summary:hover { color: var(--stwc-primary); }
.stwc-faq__item[open] summary { color: var(--stwc-primary); }
.stwc-faq__item p { margin: 0 4px 12px 22px; color: #50575e; }

/* ---------- Stock pulse (Pro) ---------- */
.stwc-pulse-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 16px; }
.stwc-health { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-weight: 600; font-size: 12px; }
.stwc-health.is-ok { background: var(--stwc-pos-bg, #e7f7ee); color: var(--stwc-pos, #1e7f4f); }
.stwc-health.is-warn { background: var(--stwc-amber-bg); color: var(--stwc-amber); }
.stwc-health.is-bad { background: var(--stwc-neg-bg); color: var(--stwc-neg); }
.stwc-pulse-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .stwc-pulse-grid { grid-template-columns: 1fr; } }

/* ---------- Stock check: access-grants picker ---------- */
.stwc-rolegrid { display: flex; flex-wrap: wrap; gap: 8px; }
.stwc-rolechip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--stwc-border); border-radius: 999px; cursor: pointer; background: #fff; }
.stwc-rolechip input { margin: 0; }
.stwc-rolechip--locked { opacity: .55; cursor: default; }
.stwc-rolechip:has(input:checked):not(.stwc-rolechip--locked) { border-color: var(--stwc-primary); background: var(--stwc-primary-soft); }
.stwc-upick { position: relative; }
.stwc-upick__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.stwc-uchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--stwc-primary-soft); color: var(--stwc-primary); font-weight: 600; cursor: pointer; }
.stwc-uchip input { margin: 0; }
.stwc-uchip:has(input:not(:checked)) { opacity: .45; text-decoration: line-through; }
.stwc-upick__list { position: absolute; z-index: 20; inset-inline: 0; background: #fff; border: 1px solid var(--stwc-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.08); max-height: 220px; overflow: auto; }
.stwc-upick__item { display: block; width: 100%; text-align: start; padding: 8px 12px; border: 0; background: none; cursor: pointer; }
.stwc-upick__item:hover { background: var(--stwc-primary-soft); }
.stwc-upick__empty { padding: 8px 12px; color: #777; }

/* ---------- RTL (e.g. Arabic) — mirror our UI only ---------- */
.stwc-locale-rtl .stwc-app { direction: rtl; }
.stwc-locale-rtl .stwc-app .stwc-hero__back .stwc-i { transform: scaleX(-1); }
.stwc-locale-rtl .stwc-app .stwc-right { text-align: left; }
