/**
 * Wallet Center — dark space / blue-purple / glass visual language
 * (CLAUDE.md's UI mandate). Sidebar Information Architecture added
 * 0.7.0 (Starway Account Layer) — replaces the old top nav-tabs row;
 * this is meant to be the FINAL shape, so future modules (Transfer,
 * Star Store, Notifications) are new sidebar entries, not a rebuild.
 */

.swp-wc {
	--swp-wc-bg: #0b0e1a;
	--swp-wc-card-bg: rgba(255, 255, 255, 0.06);
	--swp-wc-border: rgba(255, 255, 255, 0.12);
	--swp-wc-accent: #7c5cff;
	--swp-wc-accent-2: #4f8dfd;
	--swp-wc-text: #f2f2f7;
	--swp-wc-muted: #a3a8c2;

	/* Owner-requested 2026-08-02: apple-design skill pass across every
	   Wallet Center section. These are additive to the color tokens
	   above -- radius/shadow/easing were previously hardcoded per-rule
	   with inconsistent values; new rules from this pass reference these
	   instead. Easing curves are the apple-design skill's exact values
	   (critically-damped default / accelerate-away for exits). */
	--swp-wc-radius-sm: 10px;
	--swp-wc-radius-md: 14px;
	--swp-wc-radius-lg: 20px;
	--swp-wc-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.18);
	--swp-wc-shadow-card-heavy: 0 16px 40px rgba(0, 0, 0, 0.28);
	--swp-wc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--swp-wc-ease-in: cubic-bezier(0.7, 0, 0.84, 0);

	/* Owner-reported 2026-08-02: these four surfaces were hardcoded to
	   dark-theme-only literals (rgba(0,0,0,...) "sunken chip" fills, a
	   flat #10132a dropdown-menu background) that never adapted to
	   swc-light-default -- on the light theme this produced a dark box
	   with dark text on top of it (near-unreadable), or a plain dark box
	   sitting among otherwise-white cards. Redefined below, light theme. */
	--swp-wc-input-bg: rgba(0, 0, 0, 0.3);
	--swp-wc-tile-bg: rgba(0, 0, 0, 0.2);
	--swp-wc-menu-bg: #10132a;
	--swp-wc-menu-hover-bg: rgba(255, 255, 255, 0.06);

	color: var(--swp-wc-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.swp-wc-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 24px;
	max-width: 960px;
	margin: 0 auto;
	padding: 24px 16px;
	align-items: start;
	/* Cross-fade between views (owner-requested 2026-08-01) -- renderShell()
	   replaces root.innerHTML wholesale on every single navigation (Home,
	   Balance, Transfer, History, every state of Transfer/Star Mart's own
	   multi-step flows...), which used to hard-cut with zero transition.
	   @keyframes (not `transition`) is the right tool here specifically
	   because this element is always a brand-new DOM node on every
	   render -- it never has a "before" state to transition FROM, so it
	   needs an animation that plays automatically on insertion instead.
	   150ms keeps it under the "occasional" UI budget without feeling like
	   a wait on a screen switched many times per session. */
	animation: swp-wc-view-fade-in 150ms ease;
}

@keyframes swp-wc-view-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.swp-wc-layout,
	.swp-sm-standalone {
		animation: none;
	}

	/* Owner-requested 2026-08-02: this pass added several new transform-based
	   motions (press-scale on nav items/subtabs, the accordion chevron
	   rotation, the custom-select arrow rotation) plus the pre-existing
	   accordion max-height transition -- none of that was covered before.
	   Collapsed to instant/no-transform per apple-design skill's reduced-
	   motion guidance; colour/opacity transitions elsewhere are left alone
	   since those aid comprehension rather than trigger vestibular issues. */
	.swp-wc-nav-item:active,
	.swp-wc-subtab:active,
	.swp-wc-btn:active {
		transform: none;
	}
	.swp-wc-nav-accordion-toggle svg {
		transition: none;
	}
	.swp-wc-nav {
		transition: none;
	}
	.swp-wc-select-arrow {
		transition: none;
	}
}

/* Star Mart's own standalone page (no sidebar) -- wider than Wallet
   Center's 960px so the product grid actually has room to breathe
   instead of being squeezed into a sidebar+content layout. */
.swp-sm-standalone {
	max-width: 1400px;
	margin: 0 auto;
	padding: 24px 16px;
	animation: swp-wc-view-fade-in 150ms ease;
}

/* Sidebar */

.swp-wc-sidebar {
	position: relative;
	background: var(--swp-wc-card-bg);
	border: 1px solid var(--swp-wc-border);
	border-radius: 16px;
	padding: 16px;
	/* Owner-requested 2026-08-02 (apple-design skill "Materials" principle:
	   material weight encodes hierarchy -- the sidebar is structural, so it
	   reads heavier than a content card: stronger blur + saturation + a
	   deeper shadow, same idea as CLAUDE.md's "Glass" mandate, just tiered). */
	backdrop-filter: blur(20px) saturate(140%);
	box-shadow: var(--swp-wc-shadow-card-heavy);
}

.swp-wc-avatar-block {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 12px;
	margin-bottom: 12px;
}

.swp-wc-avatar-img {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	object-fit: cover;
}

.swp-wc-avatar-fallback {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--swp-wc-accent), var(--swp-wc-accent-2));
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	color: #fff;
}

.swp-wc-avatar-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.swp-wc-avatar-name {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.swp-wc-badge {
	font-size: 11px;
	color: var(--swp-wc-muted);
}

.swp-wc-badge-approved {
	color: #4ade80;
}

.swp-wc-badge-pending,
.swp-wc-badge-resubmitted {
	color: #facc15;
}

.swp-wc-badge-rejected {
	color: #ff6b6b;
}

/* Accordion toggle -- desktop never shows it, the vertical nav list is
   already fully visible with no need to collapse it. Same pattern as
   Game Store's .sgs-cat-accordion-toggle. */
.swp-wc-nav-accordion-toggle {
	display: none;
}

.swp-wc-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.swp-wc-nav-item {
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--swp-wc-muted);
	text-decoration: none;
	font-size: 14px;
	/* Owner-requested 2026-08-02 (apple-design skill "Response" principle):
	   press feedback lives on the interaction itself, not just hover --
	   .swp-wc-btn already had this, nav items and subtabs didn't. */
	transition: background 160ms var(--swp-wc-ease-out), color 160ms var(--swp-wc-ease-out), transform 100ms var(--swp-wc-ease-out);
}

.swp-wc-nav-item:hover {
	background: rgba(255, 255, 255, 0.05);
	color: var(--swp-wc-text);
}

.swp-wc-nav-item:active {
	transform: scale(0.97);
	transition-duration: 100ms;
	transition-timing-function: var(--swp-wc-ease-in);
}

.swp-wc-nav-item:focus-visible {
	outline: 2px solid var(--swp-wc-accent-2);
	outline-offset: 2px;
}

.swp-wc-nav-item-active {
	background: linear-gradient(135deg, var(--swp-wc-accent), var(--swp-wc-accent-2));
	color: #fff;
}

/* Content */

.swp-wc-content {
	min-width: 0;
}

.swp-wc-card {
	background: var(--swp-wc-card-bg);
	border: 1px solid var(--swp-wc-border);
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 16px;
	backdrop-filter: blur(12px);
	/* Lighter material than the sidebar (12px blur vs 20px+saturate) --
	   content cards should draw attention to what's interactive inside
	   them, not compete with the structural chrome around them. */
	box-shadow: var(--swp-wc-shadow-card);
}

/* Owner-requested 2026-08-02: card section headings ("Recent History",
   "Recent Notifications", etc.) had no rule of their own -- relied on the
   browser default <h3>, unstyled and inconsistent with the rest of this
   pass's typography discipline (large text wants tighter tracking). */
.swp-wc-card h3 {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--swp-wc-text);
}

.swp-wc-cards-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.swp-wc-cards-row .swp-wc-card {
	margin-bottom: 0;
}

/* Balance page: Wallet gets its own full-width row (its Top Up form/
   Payment Method dropdown needs more room than a 1-of-3 column gives
   it); Stars and Pending share the row below. */
.swp-balance-row {
	grid-template-columns: repeat(2, 1fr);
}

.swp-balance-row > .swp-wc-card:first-child {
	grid-column: 1 / -1;
}

.swp-wc-balance {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.swp-wc-balance-item {
	display: flex;
	flex-direction: column;
}

.swp-wc-label {
	/* Owner-requested 2026-08-02 (apple-design skill typography pass):
	   small uppercase labels want a touch more weight + tracking for
	   legibility at size; large numbers below want the opposite --
	   negative tracking as they grow, per the skill's "tracking is
	   size-specific" rule. */
	font-size: 12px;
	font-weight: 600;
	color: var(--swp-wc-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.swp-wc-value {
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.swp-wc-muted {
	font-size: 13px;
	color: var(--swp-wc-muted);
}

.swp-wc-btn {
	display: inline-block;
	padding: 10px 24px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--swp-wc-accent), var(--swp-wc-accent-2));
	color: #fff;
	text-decoration: none;
	border: none;
	font-size: 14px;
	cursor: pointer;
	transition: transform 120ms ease-out, opacity 150ms ease;
}

/* Press feedback (owner-requested 2026-08-01, apple-design skill's
   "Response" principle) -- every primary/secondary button in Wallet
   Center (Top Up, Confirm, Redeem, Cancel, etc. -- all share this one
   class) had zero hover/active state. :active fires on pointer-down, not
   pointer-up, so this alone gives instant feedback with no JS. Hover is
   gated to real pointers only, same reasoning as the rest of this
   codebase's hover rules -- a touch tap would otherwise get stuck
   "hovered" until the next tap elsewhere. */
.swp-wc-btn:active {
	transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
	.swp-wc-btn:hover {
		opacity: 0.92;
	}
}

/* Owner-requested 2026-08-02: keyboard focus had zero visible indicator
   anywhere in this file (buttons, nav items, subtabs, inputs) -- inputs
   got their own :focus treatment above; this covers every clickable
   button/link-styled control that shares .swp-wc-btn. */
.swp-wc-btn:focus-visible {
	outline: 2px solid var(--swp-wc-accent-2);
	outline-offset: 2px;
}

.swp-wc-btn-secondary {
	background: transparent;
	border: 1px solid var(--swp-wc-border);
}

.swp-wc-quick-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.swp-wc-link {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--swp-wc-accent-2);
	text-decoration: none;
}

.swp-wc-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--swp-wc-border);
	font-size: 14px;
}

.swp-wc-row:last-child {
	border-bottom: none;
}

/* History rows (redesigned 2026-07-16): icon + order id column, then the
   item description with its generic type label underneath, then the
   date -- replaces the old 3-plain-columns layout that just printed the
   raw transaction_type string and a run-on "Wallet Payment — X (Order
   #N)" sentence. */
/* Owner-requested 2026-08-02 (apple-design skill polish pass): rows are
   static display, not clickable (no href/handler on .swp-wc-history-row),
   so no hover state is added here -- an interactive-looking hover on a
   non-interactive row is a false affordance. Polish instead comes from
   typography hierarchy (description now the heaviest weight in the row,
   type/date de-emphasized) and tighter vertical rhythm. Shared by both
   the Home page's "Recent History" preview and the full History list --
   one function (renderHistoryRow) builds both. */
.swp-wc-history-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--swp-wc-border);
}

.swp-wc-history-row:last-child {
	border-bottom: none;
}

.swp-wc-history-icon-col {
	flex: 0 0 auto;
	width: 52px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	/* Optically aligns the icon's vertical center with the description's
	   first line of text, now that the row is align-items:flex-start
	   (needed so multi-line descriptions don't stretch the icon column). */
	padding-top: 1px;
}

.swp-wc-history-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(124, 92, 255, 0.16);
	color: var(--swp-wc-accent);
}

.swp-wc-history-icon svg {
	width: 18px;
	height: 18px;
}

.swp-wc-history-icon--purchase { background: rgba(79, 141, 253, 0.18); color: #4f8dfd; }
.swp-wc-history-icon--topup { background: rgba(61, 220, 151, 0.18); color: #3ddc97; }
.swp-wc-history-icon--refund { background: rgba(255, 93, 122, 0.18); color: #ff5d7a; }
.swp-wc-history-icon--transfer { background: rgba(124, 92, 255, 0.18); color: #7c5cff; }
.swp-wc-history-icon--adjustment { background: rgba(245, 166, 35, 0.18); color: #f5a623; }
.swp-wc-history-icon--bonus { background: rgba(245, 166, 35, 0.18); color: #f5a623; }
.swp-wc-history-icon--fee { background: rgba(163, 168, 194, 0.18); color: var(--swp-wc-muted); }
.swp-wc-history-icon--default { background: rgba(163, 168, 194, 0.18); color: var(--swp-wc-muted); }

.swp-wc-history-order-id {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--swp-wc-muted);
	white-space: nowrap;
}

.swp-wc-history-main {
	/* Owner-reported 2026-08-02: on mobile, a long description (e.g.
	   "Top-Up Failure Compensation — Order #4211") was pushing this
	   column onto its OWN line below the icon instead of sitting beside
	   it. flex-basis:auto measures the item's wrap-point against its
	   *unshrunk* content width (a flexbox spec quirk) -- min-width:0
	   only prevents overflow, it doesn't stop that oversized measurement
	   from tripping flex-wrap's line-break decision. flex-basis:0 forces
	   the wrap decision to ignore content size and rely purely on
	   flex-grow, which is the standard fix for this exact class of bug. */
	flex: 1 1 0;
	min-width: 0;
}

.swp-wc-history-desc {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--swp-wc-text);
	overflow-wrap: break-word;
}

.swp-wc-history-type {
	margin-top: 3px;
	font-size: 12px;
	font-weight: 500;
	color: var(--swp-wc-muted);
}

/* PIN Code/Digital Voucher delivered content, owner-requested 2026-07-16 --
   same card language as StarwayCore's own Order_Item_Display on the order
   page, restyled with Wallet Center's own tokens. */
.swp-wc-history-delivered {
	margin-top: 8px;
	padding: 12px 14px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(124, 92, 255, 0.15), rgba(79, 141, 253, 0.15));
	border: 1px solid rgba(124, 92, 255, 0.35);
}

.swp-wc-history-delivered-label {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--swp-wc-accent);
}

.swp-wc-history-delivered-value {
	font-size: 14px;
	font-weight: 600;
	word-break: break-all;
	color: var(--swp-wc-text);
}

.swp-wc-history-delivered-value a {
	color: var(--swp-wc-accent-2);
}

.swp-wc-history-delivered-expiry {
	margin-top: 6px;
	font-size: 12px;
	color: var(--swp-wc-muted);
}

.swp-wc-history-date {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--swp-wc-muted);
	white-space: nowrap;
	text-align: right;
	padding-top: 1px;
}

@media (max-width: 480px) {
	.swp-wc-history-row {
		flex-wrap: wrap;
	}
	.swp-wc-history-date {
		flex-basis: 100%;
		text-align: left;
		margin-left: 66px;
	}
}

.swp-wc-card input,
.swp-wc-card select,
.swp-wc-card textarea {
	background: var(--swp-wc-input-bg);
	border: 1px solid var(--swp-wc-border);
	color: var(--swp-wc-text);
	border-radius: 8px;
	padding: 8px 12px;
	width: 100%;
	max-width: 320px;
	box-sizing: border-box;
	font-family: inherit;
	/* Owner-reported 2026-08-02: with no focus/disabled states at all, an
	   editable field and the genuinely-disabled Username field looked
	   identical -- both just a flat gray box. Focus now visibly lights up
	   (border + soft glow); disabled now visibly recedes. */
	transition: border-color 160ms var(--swp-wc-ease-out), box-shadow 160ms var(--swp-wc-ease-out), opacity 160ms var(--swp-wc-ease-out);
}

.swp-wc-card input:focus,
.swp-wc-card select:focus,
.swp-wc-card textarea:focus {
	outline: none;
	border-color: var(--swp-wc-accent-2);
	box-shadow: 0 0 0 3px rgba(79, 141, 253, 0.22);
}

.swp-wc-card input:focus-visible,
.swp-wc-card select:focus-visible,
.swp-wc-card textarea:focus-visible {
	outline: 2px solid var(--swp-wc-accent-2);
	outline-offset: 2px;
}

.swp-wc-card input:disabled,
.swp-wc-card select:disabled,
.swp-wc-card textarea:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.swp-wc-card label {
	display: block;
	font-size: 13px;
	color: var(--swp-wc-muted);
	margin-bottom: 4px;
}

/* Owner-reported 2026-07-19: native number-input spin arrows don't match
   the theme -- strip them. Still a real type="number" input (numeric
   keyboard on mobile, native min/max validation), just without the
   browser-drawn stepper buttons. */
.swp-wc-card input[type="number"]::-webkit-inner-spin-button,
.swp-wc-card input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.swp-wc-card input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Custom Payment Method dropdown (owner-reported 2026-07-19): a native
   <select>'s closed box can be themed (see the rule above), but its OPEN
   option list is rendered by the browser/OS and can't be restyled --
   built a small div-based dropdown instead, matching the glass/pill
   language already used elsewhere (.swp-auth-tabs, .stc-cat-link). A
   hidden input still carries the real form value so submit handlers
   that read form.<name>.value don't need to change. */
.swp-wc-select {
	position: relative;
	max-width: 320px;
}

.swp-wc-select-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	background: var(--swp-wc-input-bg);
	border: 1px solid var(--swp-wc-border);
	color: var(--swp-wc-text);
	border-radius: 8px;
	padding: 8px 12px;
	font-family: inherit;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	transition: border-color 150ms ease;
}

.swp-wc-select-trigger:hover {
	border-color: var(--swp-wc-accent-2);
}

.swp-wc-select-trigger-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.swp-wc-select-arrow {
	flex-shrink: 0;
	color: var(--swp-wc-muted);
	transition: transform 0.15s ease;
}

.swp-wc-select.is-open .swp-wc-select-arrow {
	transform: rotate(180deg);
}

.swp-wc-select-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 20;
	background: var(--swp-wc-menu-bg);
	border: 1px solid var(--swp-wc-border);
	border-radius: 10px;
	padding: 4px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(12px);
	/* Grows from the trigger it belongs to (apple-design skill, owner-
	   requested 2026-08-01) -- transform-origin: top since this menu
	   always opens directly below its trigger, never above. `display:none`
	   was replaced with opacity/transform + visibility so this can
	   actually transition; visibility keeps the closed menu out of tab
	   order/hit-testing same as display:none did (delayed on close so the
	   exit animation gets to play, instant on open). */
	opacity: 0;
	transform: scale(0.96) translateY(-4px);
	transform-origin: top;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 160ms cubic-bezier(.2,.8,.2,1), transform 160ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 160ms;
}

.swp-wc-select.is-open .swp-wc-select-menu {
	opacity: 1;
	transform: scale(1) translateY(0);
	visibility: visible;
	pointer-events: auto;
	transition: opacity 160ms cubic-bezier(.2,.8,.2,1), transform 160ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
	.swp-wc-select-menu {
		transform: none;
	}
	.swp-wc-select.is-open .swp-wc-select-menu {
		transform: none;
	}
}

.swp-wc-select-option {
	display: block;
	width: 100%;
	background: transparent;
	border: none;
	color: var(--swp-wc-text);
	font-family: inherit;
	font-size: 14px;
	text-align: left;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 120ms ease;
}

.swp-wc-select-option:hover {
	background: var(--swp-wc-menu-hover-bg);
}

.swp-wc-select-option.is-selected {
	background: linear-gradient(135deg, var(--swp-wc-accent), var(--swp-wc-accent-2));
	color: #fff;
}

.swp-wc-subtabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.swp-wc-subtab {
	padding: 6px 14px;
	border-radius: 999px;
	background: transparent;
	border: 1px solid var(--swp-wc-border);
	color: var(--swp-wc-muted);
	font-size: 13px;
	cursor: pointer;
	/* Owner-requested 2026-08-02: History/Referral filter pills used to hard-cut
	   between states -- same Response + press-feedback treatment as nav items. */
	transition: background 160ms var(--swp-wc-ease-out), color 160ms var(--swp-wc-ease-out), border-color 160ms var(--swp-wc-ease-out), transform 100ms var(--swp-wc-ease-out);
}

.swp-wc-subtab:active {
	transform: scale(0.96);
	transition-duration: 100ms;
	transition-timing-function: var(--swp-wc-ease-in);
}

.swp-wc-subtab:focus-visible {
	outline: 2px solid var(--swp-wc-accent-2);
	outline-offset: 2px;
}

.swp-wc-subtab-active {
	background: linear-gradient(135deg, var(--swp-wc-accent), var(--swp-wc-accent-2));
	color: #fff;
	border-color: transparent;
}

.swp-wc-stepper {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--swp-wc-muted);
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.swp-wc-step-active,
.swp-wc-step-done {
	color: var(--swp-wc-text);
	font-weight: 600;
}

.swp-wc-step-sep {
	color: var(--swp-wc-muted);
}

.swp-wc-stepper-rejected {
	color: #ff6b6b;
}

/* Membership Card (v0.9.0) */

.swp-mem-card {
	background: linear-gradient(135deg, rgba(124, 92, 255, 0.15), rgba(79, 141, 253, 0.1));
}

.swp-mem-tier {
	font-size: 16px;
	font-weight: 700;
}

/* Owner-requested 2026-07-20 (item 3): History link beside the tier name. */
.swp-mem-tier-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.swp-wc-stars-credit {
	color: #4ade80;
	font-weight: 700;
}

.swp-wc-stars-debit {
	color: #ff6b6b;
	font-weight: 700;
}

.swp-mem-stars-row {
	display: flex;
	gap: 32px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.swp-mem-stars-row > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.swp-mem-progress {
	width: 100%;
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
	margin-bottom: 8px;
}

.swp-mem-progress-bar {
	height: 100%;
	background: linear-gradient(135deg, var(--swp-wc-accent), var(--swp-wc-accent-2));
}

.swp-mem-countdown {
	font-size: 13px;
	color: var(--swp-wc-muted);
}

/* Activity Center (v0.10.0) */

.swp-act-heading {
	margin: 0 0 16px;
}

.swp-act-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

.swp-act-card {
	margin-bottom: 0;
}

.swp-act-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.swp-act-name {
	font-weight: 600;
}

.swp-act-status {
	font-size: 12px;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.swp-act-status-eligible {
	background: rgba(74, 222, 128, 0.15);
	color: #4ade80;
}

.swp-act-status-already_claimed {
	background: rgba(255, 255, 255, 0.08);
	color: var(--swp-wc-muted);
}

.swp-act-status-ineligible {
	background: rgba(255, 107, 107, 0.15);
	color: #ff6b6b;
}

.swp-act-bonus {
	font-size: 18px;
	font-weight: 700;
	margin: 4px 0;
}

.swp-act-min,
.swp-act-detail {
	font-size: 13px;
	color: var(--swp-wc-muted);
	margin: 2px 0;
}

/* Star Mart (v0.8.1, rebuilt into a storefront at v0.11.1) */

.swp-sm-search-bar {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.swp-sm-search-bar input[type="text"] {
	flex: 1;
	min-width: 200px;
	max-width: none !important;
}

/* Category Navigation (v0.11.1) -- a persistent left sidebar within Star
   Mart's own content area, not a <select> dropdown (owner's explicit
   direction, comparing to Steam's storefront). Mirrors the same "narrow
   sidebar + flexible content" pattern .swp-wc-layout already uses one
   level up, just nested for Star Mart specifically. */

.swp-sm-layout {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 20px;
	align-items: start;
}

/* Accordion toggle -- desktop never shows it, same pattern as
   .swp-wc-nav-accordion-toggle above. */
.swp-sm-cat-accordion-toggle {
	display: none;
}

.swp-sm-cat-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--swp-wc-card-bg);
	border: 1px solid var(--swp-wc-border);
	border-radius: 16px;
	padding: 12px;
	backdrop-filter: blur(12px);
}

.swp-sm-cat-link {
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--swp-wc-muted);
	text-decoration: none;
	font-size: 14px;
}

.swp-sm-cat-link:hover {
	background: rgba(255, 255, 255, 0.05);
	color: var(--swp-wc-text);
}

.swp-sm-cat-link-active {
	background: linear-gradient(135deg, var(--swp-wc-accent), var(--swp-wc-accent-2));
	color: #fff;
}

.swp-sm-main {
	min-width: 0;
}

.swp-sm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
}

.swp-sm-card {
	background: var(--swp-wc-tile-bg);
	border: 1px solid var(--swp-wc-border);
	border-radius: 12px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}

.swp-sm-card:hover {
	border-color: var(--swp-wc-accent-2);
}

.swp-sm-card-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
}

.swp-sm-card-img-placeholder {
	background: linear-gradient(135deg, rgba(124, 92, 255, 0.25), rgba(79, 141, 253, 0.25));
}

.swp-sm-card-name {
	font-size: 14px;
	font-weight: 600;
}

.swp-sm-card-price {
	font-size: 13px;
	color: var(--swp-wc-muted);
}

/* Feature Badges (v0.11.1) -- derived from fulfillment_type/subtype,
   no database column; shown on both the grid card and Product Detail. */

.swp-sm-card-badges {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.swp-sm-badge {
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(124, 92, 255, 0.18);
	color: var(--swp-wc-accent-2);
	white-space: nowrap;
}

.swp-sm-redeem-btn {
	width: 100%;
	margin-top: 12px;
}

/* Product Detail (v0.11.1) */

.swp-sm-detail {
	display: grid;
	grid-template-columns: minmax(220px, 320px) 1fr;
	gap: 24px;
}

.swp-sm-detail-image img,
.swp-sm-detail-image .swp-sm-card-img-placeholder {
	width: 100%;
	border-radius: 12px;
	object-fit: contain;
	aspect-ratio: 1 / 1;
	background: rgba(255, 255, 255, 0.04);
}

.swp-sm-gallery-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.swp-sm-gallery-thumb {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	cursor: pointer;
	border: 1px solid var(--swp-wc-border);
}

.swp-sm-detail-info h2 {
	margin: 0 0 8px;
}

.swp-sm-detail-price {
	font-size: 22px;
	font-weight: 700;
	margin: 8px 0;
}

.swp-sm-description {
	font-size: 14px;
	line-height: 1.6;
	margin: 12px 0;
}

.swp-sm-specs {
	width: 100%;
	margin: 12px 0;
	border-collapse: collapse;
}

.swp-sm-specs th,
.swp-sm-specs td {
	text-align: left;
	padding: 6px 8px;
	font-size: 13px;
	border-bottom: 1px solid var(--swp-wc-border);
}

.swp-sm-specs th {
	color: var(--swp-wc-muted);
	font-weight: 500;
	width: 40%;
}

/* Dynamic Form (v0.11.1) -- one generic field renderer, styling stays
   generic regardless of which product type's schema is being shown. */

.swp-sm-form-field {
	margin: 10px 0;
}

.swp-sm-form-field label {
	font-size: 13px;
	color: var(--swp-wc-muted);
	display: block;
}

.swp-sm-form-field input,
.swp-sm-form-field textarea {
	margin-top: 4px;
}

.swp-sm-processing {
	text-align: center;
	padding: 40px 20px;
}

.swp-sm-confirm .swp-wc-row,
.swp-sm-success .swp-wc-row {
	font-size: 15px;
}

.swp-sm-confirm-actions {
	display: flex;
	gap: 12px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.swp-wc-error-text {
	color: #ff6b6b;
	font-size: 14px;
}

.swp-wc-success-text {
	color: #4ade80;
	font-size: 14px;
}

.swp-wc-muted-text {
	color: rgba(255, 255, 255, 0.55);
	font-size: 14px;
}

.swp-wc-theme-options {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.swp-wc-theme-option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.04);
	cursor: pointer;
	font-size: 14px;
}

.swp-wc-theme-option:has(input:checked) {
	border-color: #6366f1;
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(147, 51, 234, 0.18) 100%);
}

.swp-sm-success h3 {
	margin-top: 0;
}

/* Referral Growth Engine (v0.12.0) */

.swp-ref-stats {
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 16px;
}

.swp-ref-stats h4 {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--swp-wc-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.swp-ref-stat-value {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.swp-ref-reward-copy {
	color: var(--swp-wc-muted);
	font-size: 14px;
}

.swp-ref-reward-copy strong {
	color: var(--swp-wc-text);
}

.swp-ref-code-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 12px 0;
}

.swp-ref-code-row code {
	font-size: 18px;
	padding: 8px 14px;
	background: var(--swp-wc-input-bg);
	border: 1px solid var(--swp-wc-border);
	border-radius: 8px;
	letter-spacing: 0.05em;
}

.swp-ref-copy-message {
	font-size: 13px;
	color: #4ade80;
	min-height: 18px;
}

.swp-ref-share-buttons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 12px 0;
}

.swp-ref-share-card {
	overflow: hidden;
}

.swp-ref-qr {
	margin-top: 16px;
	margin-bottom: 4px;
}

.swp-ref-qr svg {
	max-width: 160px;
	height: auto;
	border-radius: 8px;
	background: #fff;
	padding: 8px;
}

.swp-ref-rank {
	font-size: 14px;
	color: var(--swp-wc-muted);
	margin: 12px 0;
}

.swp-ref-leaderboard {
	list-style: none;
	margin: 0;
	padding: 0;
}

.swp-ref-leaderboard-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--swp-wc-border);
}

.swp-ref-leaderboard-row:last-child {
	border-bottom: none;
}

.swp-ref-leaderboard-rank {
	width: 28px;
	color: var(--swp-wc-muted);
	font-size: 13px;
}

.swp-ref-leaderboard-name {
	flex: 1;
	font-size: 14px;
}

.swp-ref-leaderboard-count {
	font-size: 13px;
	color: var(--swp-wc-muted);
}

.swp-ref-avatar,
.swp-ref-avatar-fallback {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	object-fit: cover;
	flex-shrink: 0;
}

.swp-ref-avatar-fallback {
	background: linear-gradient(135deg, var(--swp-wc-accent), var(--swp-wc-accent-2));
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 13px;
	color: #fff;
}

.swp-ref-history-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--swp-wc-border);
	flex-wrap: wrap;
}

.swp-ref-history-row:last-child {
	border-bottom: none;
}

.swp-ref-history-name {
	font-size: 14px;
	min-width: 120px;
}

.swp-ref-history-date {
	font-size: 12px;
	color: var(--swp-wc-muted);
	min-width: 90px;
}

.swp-ref-progress {
	display: flex;
	gap: 6px;
	margin-left: auto;
}

.swp-ref-progress-dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
}

.swp-ref-progress-dot-active {
	background: linear-gradient(135deg, var(--swp-wc-accent), var(--swp-wc-accent-2));
}

/* Notification Center (v0.14.0) */

.swp-wc-nav-item {
	position: relative;
}

.swp-wc-nav-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #ff6b6b;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	vertical-align: middle;
}

.swp-notif-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.swp-notif-header h3 {
	margin: 0;
}

.swp-notif-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--swp-wc-border);
	cursor: pointer;
}

.swp-notif-row:last-child {
	border-bottom: none;
}

.swp-notif-row:hover {
	background: rgba(255, 255, 255, 0.04);
}

.swp-notif-unread {
	background: rgba(124, 92, 255, 0.06);
}

/* Owner-requested 2026-08-02: matches .swp-wc-history-icon's circular
   SVG-badge treatment exactly (same variant names/colors) -- Notifications
   used to be raw emoji text, now shares History's icon language. */
.swp-notif-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: rgba(124, 92, 255, 0.16);
	color: var(--swp-wc-accent);
}

.swp-notif-icon svg {
	width: 18px;
	height: 18px;
}

.swp-notif-icon--purchase { background: rgba(79, 141, 253, 0.18); color: #4f8dfd; }
.swp-notif-icon--topup { background: rgba(61, 220, 151, 0.18); color: #3ddc97; }
.swp-notif-icon--refund { background: rgba(255, 93, 122, 0.18); color: #ff5d7a; }
.swp-notif-icon--transfer { background: rgba(124, 92, 255, 0.18); color: #7c5cff; }
.swp-notif-icon--adjustment { background: rgba(245, 166, 35, 0.18); color: #f5a623; }
.swp-notif-icon--bonus { background: rgba(245, 166, 35, 0.18); color: #f5a623; }
.swp-notif-icon--default { background: rgba(163, 168, 194, 0.18); color: var(--swp-wc-muted); }

.swp-notif-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.swp-notif-title {
	font-size: 14px;
	font-weight: 600;
}

.swp-notif-message {
	font-size: 13px;
	color: var(--swp-wc-muted);
}

.swp-notif-time {
	font-size: 11px;
	color: var(--swp-wc-muted);
}

.swp-notif-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--swp-wc-accent-2);
	flex-shrink: 0;
	margin-top: 6px;
}

/* Mobile: sidebar collapses to a top bar */

@media (max-width: 720px) {
	.swp-wc-layout {
		/* Owner-reported 2026-07-19 (2nd report): the horizontal-scroll nav
		   strip below was stretching the WHOLE PAGE instead of scrolling
		   within its own box -- a CSS grid track's default min-width is
		   `auto`, which lets wide content (the nav row) force the track
		   wider than the viewport instead of respecting overflow-x. The
		   `minmax(0, 1fr)` here is the actual fix; grid-template-columns
		   alone (plain `1fr`) does NOT clamp this. */
		grid-template-columns: minmax(0, 1fr);
	}

	.swp-wc-sidebar {
		position: static;
		/* Same "min-width: auto" default applies one level down (a flex/
		   grid item), so the fix has to be repeated here too or the
		   .swp-wc-nav scroll strip still pushes this box wider than the
		   grid track allows. */
		min-width: 0;
	}

	/* Owner-requested 2026-08-01: the horizontal-scroll pill strip (2026-
	   07-19 fix, kept in git history/backups) wasn't obviously scrollable/
	   discoverable on a phone -- switched to a proper accordion instead,
	   same pattern as Game Store's .sgs-cat-accordion-toggle. Collapsed by
	   default: a single button showing the active section, tap to expand
	   a normal vertical list (same list/behavior as desktop's sidebar,
	   just hidden until opened). */
	.swp-wc-nav-accordion-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		text-align: left;
		background: var(--swp-wc-card-bg);
		border: 1px solid var(--swp-wc-border);
		border-radius: 12px;
		padding: 10px 14px;
		font-size: 14px;
		font-weight: 600;
		color: var(--swp-wc-text);
		margin-bottom: 8px;
	}

	.swp-wc-nav-accordion-toggle svg {
		transition: transform 0.2s ease;
		color: var(--swp-wc-muted);
	}

	.swp-wc-nav-accordion-toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	.swp-wc-nav {
		flex-direction: column;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.25s ease;
	}

	.swp-wc-nav.is-expanded {
		/* max-height is set inline by JS to the real measured content
		   height -- see .sgs-sidebar.is-expanded's CSS comment (Game
		   Store) for why a flat guessed value makes the collapse
		   animation feel like it keeps going after the content already
		   stopped moving. 400px stays here only as a fallback if JS ever
		   fails to run. */
		max-height: 400px;
	}

	.swp-wc-nav-item {
		white-space: normal;
		font-size: 13px;
		padding: 8px 12px;
	}

	.swp-wc-cards-row,
	.swp-ref-stats {
		grid-template-columns: 1fr;
	}

	.swp-ref-history-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.swp-ref-progress {
		margin-left: 0;
	}

	.swp-sm-grid,
	.swp-act-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.swp-sm-layout {
		grid-template-columns: 1fr;
	}

	/* Same accordion conversion as .swp-wc-nav above, same reasoning
	   (owner-requested 2026-08-01). */
	.swp-sm-cat-accordion-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		text-align: left;
		background: var(--swp-wc-card-bg);
		border: 1px solid var(--swp-wc-border);
		border-radius: 12px;
		padding: 10px 14px;
		font-size: 14px;
		font-weight: 600;
		color: var(--swp-wc-text);
		margin-bottom: 8px;
	}

	.swp-sm-cat-accordion-toggle svg {
		transition: transform 0.2s ease;
		color: var(--swp-wc-muted);
	}

	.swp-sm-cat-accordion-toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	.swp-sm-cat-nav {
		flex-direction: column;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.25s ease;
		padding: 0 12px;
		border-width: 0;
	}

	.swp-sm-cat-nav.is-expanded {
		/* Same fallback-guess reasoning as .swp-wc-nav.is-expanded above. */
		max-height: 400px;
		padding: 12px;
		border-width: 1px;
	}

	.swp-sm-detail {
		grid-template-columns: 1fr;
	}
}

/* Owner-reported 2026-07-29 (mobile/tablet UI audit, verified logged in
   with a real test account): Wallet Center was never given a light-theme
   pass -- every value on the dashboard (balance, Stars, membership
   progress, notifications, history) uses the --swp-wc-* tokens below,
   which were only ever defined for the original always-dark theme, so on
   the light theme they rendered as near-white text on a near-white card
   (e.g. the balance amount computed to rgb(255,255,255)). Redefining just
   the tokens -- same minimal pattern already used for starway-auth.css's
   light-theme card -- fixes every element that reads var(--swp-wc-text)/
   var(--swp-wc-muted)/var(--swp-wc-card-bg)/var(--swp-wc-border) without
   touching each one individually. */
body.swc-light-default .swp-wc {
	--swp-wc-card-bg: #ffffff;
	--swp-wc-border: rgba(20, 25, 60, 0.12);
	--swp-wc-text: #182B43;
	--swp-wc-muted: #5a6b85;

	/* Owner-reported 2026-08-02: same reasoning as the block above -- these
	   four were still hardcoded dark-theme literals (see the base .swp-wc
	   token comment). Inputs/select-trigger/code chip get a subtle navy-
	   tinted fill matching --swp-wc-border's existing light-theme language;
	   Star Mart's product tiles (--swp-wc-tile-bg) get plain white per
	   owner request, same surface as .swp-wc-card itself; the dropdown
	   menu gets a real light-theme dropdown treatment (white bg, dark
	   tinted hover instead of a white-on-white hover). */
	--swp-wc-input-bg: rgba(20, 25, 60, 0.05);
	--swp-wc-tile-bg: #ffffff;
	--swp-wc-menu-bg: #ffffff;
	--swp-wc-menu-hover-bg: rgba(20, 25, 60, 0.05);
}

body.swc-light-default .swp-wc-card {
	box-shadow: 0 10px 40px -20px rgba(20, 25, 60, 0.25);
}

/* Not covered by the token redefinition above -- explicit hardcoded
   translucent-white color, meant to sit on the old dark card background. */
body.swc-light-default .swp-wc-muted-text {
	color: rgba(20, 25, 60, 0.55);
}

/* Owner-reported 2026-08-02: five more spots (membership progress-bar
   track, Activities' "already claimed" pill, Star Mart's product-detail
   image placeholder, the Settings theme-picker pill, Referral's progress
   dots) used a subtle rgba(255,255,255,X) tint meant to lighten a DARK
   surface -- on the light theme (white cards) that's nearly invisible
   instead of subtle. Same navy-tinted direction as --swp-wc-border above,
   scaled per rule to keep each element's original visual weight. */
body.swc-light-default .swp-mem-progress {
	background: rgba(20, 25, 60, 0.08);
}
body.swc-light-default .swp-act-status-already_claimed {
	background: rgba(20, 25, 60, 0.08);
}
body.swc-light-default .swp-sm-detail-image .swp-sm-card-img-placeholder {
	background: rgba(20, 25, 60, 0.04);
}
body.swc-light-default .swp-wc-theme-option {
	border-color: rgba(20, 25, 60, 0.15);
	background: rgba(20, 25, 60, 0.04);
}
body.swc-light-default .swp-ref-progress-dot {
	background: rgba(20, 25, 60, 0.15);
}

/* Owner-reported 2026-08-02: the sitewide purple-button-text rule
   (starway-default-light-theme.php: body.swc-light-default a:where(...)
   {color:#182B43 !important} -- see CLAUDE.md's CSS Rules section) was
   clobbering every custom-colored <a> in Wallet Center, since none of
   these had !important of their own to compete with it. Needs matching
   !important + higher specificity, same fix pattern already applied to
   Star Mart's intro button / mobile drawer buttons / footer social icons
   elsewhere on the site this session. Primary buttons (Top Up, Save
   Changes, membership card's gradient CTAs, etc.) were rendering navy
   text on their purple/blue gradient fill instead of white; the active
   sidebar nav item (same gradient fill) had the same problem; inactive
   nav items lost their intended muted tone (fell back to full-strength
   navy, same as the active item's text, so active vs. inactive read as
   near-identical); .swp-wc-link (the "History" link in the Membership
   card, "View all", back-links) rendered navy instead of accent-blue,
   losing its link affordance. .swp-wc-btn-secondary is deliberately
   excluded -- transparent background, so it was already correctly
   readable in navy and forcing it white would make it invisible. */
body.swc-light-default .swp-wc a.swp-wc-btn:not(.swp-wc-btn-secondary) {
	color: #fff !important;
}
body.swc-light-default .swp-wc a.swp-wc-nav-item-active {
	color: #fff !important;
}
body.swc-light-default .swp-wc a.swp-wc-nav-item:not(.swp-wc-nav-item-active) {
	color: var(--swp-wc-muted) !important;
}
body.swc-light-default .swp-wc a.swp-wc-link {
	color: var(--swp-wc-accent-2) !important;
}
/* Same bug, Star Mart's category sidebar (owner-reported 2026-08-03): the
   active category link (.swp-sm-cat-link-active) is also an `<a>` with a
   gradient fill expecting white text, missing the !important+specificity
   needed to beat the sitewide rule above -- was rendering as near-
   invisible navy-on-gradient. */
body.swc-light-default .swp-wc a.swp-sm-cat-link.swp-sm-cat-link-active {
	color: #fff !important;
}