:root {
	/* Core palette — light surface, the default theme. Amber reads as
	   "heat" (sales velocity, primary actions); teal reads as "tracked /
	   steady" (secondary accent, links, tracked state). */
	--ink: #f4f6f7;
	--panel: #ffffff;
	--panel-raised: #eef1f3;
	--panel-raised-hover: #e3e8ea;
	--line: #d7dde0;
	--line-soft: #e7ebed;
	--paper: #1a2126;
	--muted: #5c6b76;
	--muted-dim: #8b98a2;

	--amber: #a15417;
	--amber-hover: #c96a1f;
	--amber-dim: #fdecd8;
	--amber-line: #e8bb8a;
	--teal: #0e7d6c;
	--teal-dim: #daf3ee;

	--danger: #c23b3b;
	--danger-bg: #fbe6e6;
	--danger-line: #f0b8b8;
	--success: #1f8a4c;
	--success-bg: #e3f7ea;
	--success-line: #b8e6c9;

	--radius: 7px;
	--radius-sm: 5px;

	--font-display: "Space Grotesk", "Segoe UI", sans-serif;
	--font-ui: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
	--font-data: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}

/* Dark theme — an explicit user choice only (see the theme toggle in
   boot.js); no page follows the OS prefers-color-scheme, every one
   defaults to the light surface above. Neutrals invert; amber/teal/
   danger/success keep the same hue but shift brighter, tuned for
   contrast against a near-black ground instead of a white one. */
:root[data-theme="dark"] {
	--ink: #0b0f14;
	--panel: #131a21;
	--panel-raised: #1b242c;
	--panel-raised-hover: #212b34;
	--line: #253039;
	--line-soft: #1c2530;
	--paper: #e7ecef;
	--muted: #7c8a97;
	--muted-dim: #566371;

	--amber: #ff9a3c;
	--amber-hover: #ffaa5c;
	--amber-dim: #4a3420;
	--amber-line: #6b4a26;
	--teal: #3fd8c0;
	--teal-dim: #16332e;

	--danger: #ff6b6b;
	--danger-bg: #2a1418;
	--danger-line: #5c2a2f;
	--success: #4fd88a;
	--success-bg: #123324;
	--success-line: #1f5a3d;
}

/* Respect the OS-level "reduce motion" preference — collapses every
   transition/animation (hover states, the button spinner, chart
   transitions) to effectively instant, and stops CSS-driven smooth
   scrolling. Applies to every page automatically; nothing else needs to
   check for this. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

* {
	box-sizing: border-box;
}

/* The `hidden` attribute must always win. Without this, an element-level
   `display` rule (e.g. `.side-nav a { display: flex }`) overrides the
   browser's built-in `[hidden] { display: none }`, silently un-hiding
   things like the admin-only nav link for non-admin users. */
[hidden] {
	display: none !important;
}

html {
	-webkit-font-smoothing: antialiased;
}

body {
	margin: 0;
	font-family: var(--font-ui);
	background: var(--ink);
	color: var(--paper);
	font-size: 13.5px;
	line-height: 1.45;
}

a {
	color: var(--teal);
}

:focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 2px;
}

/* ---------- App shell: sidebar + main column ---------- */

.app-shell {
	display: flex;
	min-height: 100vh;
}

/* topbar is the persistent utility bar at the top of .main-col — nav
   stays purely in the left sidebar; everything account/notification-
   related lives here on the right, the same split used by Linear,
   Vercel, GitHub, and most other professional dashboards. topbar-left
   only ever holds the "reopen sidebar" control (hamburger + brand,
   built by initMobileNav): empty and invisible while the sidebar itself
   is visible, shown once it's collapsed — on a wide screen that's
   collapsed on purpose; on a narrow one it's the default starting
   state (see html:not(.sidebar-open) below). topbar-right — usage
   gauge, notifications bell, theme toggle, account — is always visible
   regardless of sidebar state. */
.topbar {
	position: sticky;
	top: 0;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 20px;
	/* viewport-fit=cover (added for the sidebar's bottom safe-area fix)
	   lets page content extend under a notch/status-bar area on the top
	   edge too; this keeps the topbar's own content clear of it. A no-op
	   on devices/browsers without a safe area. */
	padding-top: max(10px, env(safe-area-inset-top, 0px));
	background: var(--panel);
	border-bottom: 1px solid var(--line);
}

.topbar-left {
	display: none;
	align-items: center;
	gap: 10px;
}

html:not(.sidebar-open) .topbar-left {
	display: flex;
}

.topbar-right {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
}

.mobile-menu-btn {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	width: 44px;
	height: 44px;
	flex: none;
	padding: 0;
	background: transparent;
	border: 1px solid var(--line);
	color: var(--paper);
}

.mobile-menu-btn:hover {
	background: var(--panel-raised);
	border-color: var(--line);
}

.mobile-menu-btn .hamburger-line {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 1px;
	background: var(--paper);
}

.topbar-brand {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: -0.01em;
}

.sidebar-backdrop {
	display: none;
}

.sidebar {
	flex: 0 0 220px;
	display: flex;
	flex-direction: column;
	background: var(--panel);
	border-right: 1px solid var(--line);
	padding: 22px 16px;
	padding-top: max(22px, env(safe-area-inset-top, 0px));
	position: sticky;
	top: 0;
	/* 100vh is the layout viewport — on a phone it's taller than what's
	   actually visible+touchable whenever the browser's address bar/home-
	   indicator area is showing, so a fixed 100vh sidebar's bottom-most nav
	   links (Settings, Admin) render underneath that chrome: visible after
	   scrolling the nav, but not tappable. 100dvh tracks the real visible
	   viewport instead; the 100vh line stays first as a fallback for
	   browsers that don't support dvh. */
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	transition: flex-basis 0.2s ease, opacity 0.15s ease, padding 0.2s ease;
}

/* Collapsing on a wide-enough screen to have room beside it (a laptop,
   not just a phone) reflows the layout instead of overlaying it — the
   sidebar's flex-basis shrinks to 0 and .main-col simply grows to fill
   the freed width, so collapsing genuinely reclaims space for a wide
   results table instead of just hiding the sidebar behind a dimmed
   overlay (that's the narrower off-canvas treatment below, where there
   usually isn't spare width to reclaim into). */
@media (min-width: 861px) {
	html:not(.sidebar-open) .sidebar {
		flex-basis: 0;
		padding-left: 0;
		padding-right: 0;
		border-right-width: 0;
		opacity: 0;
		pointer-events: none;
	}
}

/* sidebar-collapse-btn (built by initMobileNav) sits in the brand row —
   the sidebar's own "close" control, naturally reachable only while the
   sidebar is visible, mirroring .mobile-menu-btn's hamburger glyph so
   it's the same one icon toggling the sidebar in both directions. */
.sidebar-collapse-btn {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 3px;
	width: 30px;
	height: 30px;
	flex: none;
	margin-left: auto;
	padding: 0;
	background: transparent;
	border: 1px solid var(--line);
	color: var(--paper);
}

.sidebar-collapse-btn:hover {
	background: var(--panel-raised);
}

.sidebar-collapse-btn .hamburger-line {
	display: block;
	width: 14px;
	height: 2px;
	border-radius: 1px;
	background: var(--paper);
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 4px 22px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--line);
}

/* The SoldPulse mark: a white pulse line rising to a "live" dot
   (logo-pulse.svg) on an amber gradient tile. favicon.svg is the same mark
   with the tile included. The gradient is fixed (not the theme's --amber)
   so the mark looks identical in light and dark mode, like any logo. */
.brand-mark {
	width: 22px;
	height: 22px;
	flex: none;
	background: url("/logo-pulse.svg") center / 100% no-repeat, linear-gradient(135deg, #f08a36, #b9531a);
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(185, 83, 26, 0.35);
}

/* Two-tone wordmark: "Sold" in the text colour, "Pulse" in amber. */
.brand-accent { color: var(--amber); }

.brand-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.brand-name small {
	display: block;
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	margin-top: 2px;
}

.side-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	/* The nav grows with the number of saved searches (see
	   .side-nav-saved) — flex: 1 1 auto with min-height: 0 lets it shrink
	   and scroll internally within the sidebar's fixed 100vh on a short
	   viewport, instead of forcing the whole sidebar to overflow. */
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	/* Bottom breathing room + the home-indicator/gesture-bar safe area on
	   notched phones, so the last link (Admin) never sits flush against
	   an edge that swallows taps. env() resolves to 0 on devices/browsers
	   without a safe area, so this is a no-op elsewhere. Needs
	   viewport-fit=cover in each page's <meta viewport> to be non-zero. */
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.side-nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: var(--radius-sm);
	color: var(--muted);
	text-decoration: none;
	font-weight: 500;
	font-size: 13px;
}

.side-nav-icon {
	width: 16px;
	height: 16px;
	flex: none;
}

.side-nav-group-label {
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted-dim);
	padding: 14px 10px 4px;
}

.side-nav-group-label:first-child {
	padding-top: 4px;
}

.side-nav a:hover {
	color: var(--paper);
	background: var(--panel-raised);
}

.side-nav a.active {
	color: var(--amber);
	background: var(--amber-dim);
}

/* side-nav-saved is a quick-access list of saved searches nested under the
   Search nav link (see initSavedSearchesNav in common.js) — empty and
   taking no space until there's at least one saved search. Indented under
   Search's own 10px inset (see .side-nav a) so it reads as a sub-list
   rather than a sibling nav item, and each row's delete "×" only shows on
   hover so the sidebar doesn't look busy at rest. */

.side-nav-saved-label {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	opacity: 0.7;
	padding: 8px 10px 4px 26px;
}

.side-nav-saved-row {
	display: flex;
	align-items: center;
	gap: 2px;
	padding-left: 16px;
}

.side-nav-saved-link {
	flex: 1 1 auto;
	min-width: 0;
	padding: 6px 8px;
	border-radius: var(--radius-sm);
	color: var(--muted);
	text-decoration: none;
	font-size: 12.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.side-nav-saved-link:hover {
	color: var(--paper);
	background: var(--panel-raised);
}

.side-nav-saved-delete {
	flex: 0 0 auto;
	font: inherit;
	font-size: 14px;
	line-height: 1;
	padding: 4px 7px;
	border: none;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--muted);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.side-nav-saved-row:hover .side-nav-saved-delete {
	opacity: 1;
}

.side-nav-saved-delete:hover {
	color: var(--amber);
	background: var(--panel-raised);
}

.theme-toggle-btn {
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 5px 9px;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	color: var(--paper);
}

.theme-toggle-btn:hover {
	background: var(--panel-raised);
	border-color: var(--line);
}

.notif-bell-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--paper);
	cursor: pointer;
}

.notif-bell-btn:hover {
	background: var(--panel-raised);
}

.notif-bell-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--amber);
	color: #1a1005;
	font-family: var(--font-data);
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

/* Appended straight to <body> (see initNotificationsBell), not nested
   inside .sidebar or .topbar — the sidebar's own overflow: hidden
   (needed to clip its content cleanly during the collapse transition)
   would otherwise clip this too, since a dropdown is supposed to pop
   out past its trigger's container. position: fixed with top/left
   computed in JS (positionDropdown) from the bell button's own
   position, recomputed every time it opens — opens downward since the
   bell lives in the top bar, with room below it. */
.notif-dropdown {
	position: fixed;
	display: flex;
	flex-direction: column;
	max-height: 70vh;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	z-index: 1100;
	overflow: hidden;
}

.notif-dropdown-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
}

.notif-dropdown-list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

/* Every row in the list is, by definition, unread (see ListNotifications)
   — no read/unread visual split needed; the badge count already carries
   that signal. A plain div, not <a>: notif-row-dismiss is a real <button>
   sibling rather than nested inside a link (invalid HTML — interactive
   content can't nest), with the row's own click handling "open the link"
   instead. */
.notif-row {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--line-soft);
	color: var(--paper);
	cursor: pointer;
}

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

.notif-row:hover,
.notif-row:focus-visible {
	background: var(--panel-raised);
}

.notif-row-body {
	flex: 1 1 auto;
	min-width: 0;
}

.notif-row-dismiss {
	flex: none;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--muted);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.notif-row-dismiss:hover {
	color: var(--paper);
	background: var(--panel-raised-hover);
}

.notif-row-title {
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.notif-row-message {
	font-size: 12px;
	color: var(--muted);
	margin-top: 2px;
}

.notif-row-time {
	font-size: 10.5px;
	color: var(--muted-dim);
	margin-top: 4px;
	font-family: var(--font-data);
}

.notif-empty {
	padding: 22px 14px;
	text-align: center;
	font-size: 12.5px;
	color: var(--muted);
}

/* Sits inline in .topbar-right (see the topbar markup on every page)
   rather than stacked in a narrow sidebar column — a fixed width keeps
   its progress bar from growing to fill the row alongside the other
   topbar-right items. */
.usage-gauge {
	min-width: 132px;
	flex: none;
	padding: 6px 10px 7px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--panel);
	font-family: var(--font-data);
	font-size: 11px;
	color: var(--muted);
	cursor: help;
}

.usage-gauge .gauge-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	white-space: nowrap;
}

.usage-gauge .gauge-label {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.usage-gauge .gauge-value {
	font-size: 12px;
	font-weight: 700;
	color: var(--paper);
}

.usage-gauge .gauge-track {
	margin-top: 5px;
	height: 5px;
	border-radius: 100px;
	background: var(--line);
	overflow: hidden;
}

.usage-gauge .gauge-fill {
	height: 100%;
	min-width: 3px;
	background: var(--teal);
	border-radius: 100px;
	transition: width 0.3s;
}

.usage-gauge.high .gauge-fill { background: var(--amber); }
.usage-gauge.full .gauge-fill { background: var(--danger); }
.usage-gauge.full .gauge-value { color: var(--danger); }

/* user-bar's items now sit close together in .topbar-right instead of
   space-between, which only made sense when it had a whole sidebar
   row's width to itself. */
.user-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--muted);
	white-space: nowrap;
}

.main-col {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.page-header {
	padding: 20px 28px;
	border-bottom: 1px solid var(--line);
}

.page-header h1 {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0;
}

.page-header p {
	margin: 4px 0 0;
	color: var(--muted);
	font-size: 12.5px;
}

main {
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
	padding: 24px 28px;
}

/* ---------- Login (no sidebar — pre-auth access panel) ---------- */

body.auth-gate {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

.login-main {
	width: 100%;
	max-width: 380px;
	padding: 0 24px;
}

.login-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: center;
	margin-bottom: 28px;
	text-decoration: none;
	color: inherit;
}

.login-home-link {
	text-align: center;
	margin-top: 18px;
	font-size: 13px;
}

.login-home-link a {
	color: var(--muted);
	text-decoration: none;
}

.login-home-link a:hover {
	text-decoration: underline;
}

.login-panel legend {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 16px;
	display: block;
}

.login-panel .field {
	margin-bottom: 14px;
}

.login-panel .field label {
	display: block;
	margin-bottom: 5px;
}

.login-panel input {
	width: 100%;
}

/* ---------- Panels, fieldsets, toolbars ---------- */

.panel {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 20px;
	margin-bottom: 18px;
}

fieldset.panel {
	min-width: 0;
}

fieldset.panel legend {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	padding: 0 6px;
}

/* filter-section is a collapsible <details class="panel filter-section">
   used for lower-priority filter groups (Price & delivery, Condition &
   buying options, Seller on the Search page) — collapsed by default so the
   page reads as short and scannable, with a badge on the summary showing
   how many filters are set inside so a collapsed section's state isn't
   invisible. The active-count badge reuses the amber-tint "on" convention
   from .filter-tag.active / .cal-day.selected elsewhere in this file. */
.filter-section > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	list-style: none;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	padding: 7px 8px;
	margin: -7px -8px;
	border-radius: var(--radius-sm);
	user-select: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.filter-section > summary:hover,
.filter-section > summary:focus-visible {
	background: var(--panel-raised-hover);
	color: var(--paper);
}

.filter-section > summary::-webkit-details-marker {
	display: none;
}

/* A chevron in its own circular chip, not just a bare glyph — reads as a
   toggle control at a glance instead of blending into the label text. */
.filter-section > summary::before {
	content: "▾";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--panel-raised);
	font-size: 9px;
	color: var(--muted);
	transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
	transform: rotate(-90deg);
}

.filter-section[open] > summary::before {
	transform: rotate(0deg);
}

.filter-section > summary:hover::before,
.filter-section > summary:focus-visible::before {
	background: var(--amber-dim);
	color: var(--amber);
}

.filter-section-badge {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--amber-dim);
	color: var(--amber);
}

.filter-section-body {
	margin-top: 14px;
}

.hint {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--muted);
}

.toolbar {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 16px;
}

.toolbar .field {
	min-width: 180px;
}

.toolbar-hint {
	margin: 0;
	flex: 1 1 260px;
	align-self: center;
}

.toolbar-actions {
	display: flex;
	gap: 10px;
	margin-left: auto;
}

.checkbox-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.checkbox-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 6px 16px;
}

.checkbox-list-actions {
	margin-top: 8px;
	display: flex;
	gap: 14px;
}

.link-btn {
	background: none;
	border: none;
	padding: 0;
	color: var(--teal);
	font-weight: 600;
	font-size: 12px;
	cursor: pointer;
	font-family: var(--font-ui);
}

.link-btn:hover {
	text-decoration: underline;
}

select[multiple] {
	padding: 4px;
}

/* ---------- Searchable category select (enhanceCategorySelect, common.js) ---------- */

.sr-only-select {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cat-combobox { position: relative; }

.cat-combobox-input { width: 100%; cursor: text; }
.cat-combobox-input:disabled { cursor: not-allowed; opacity: 0.6; }

.cat-combobox-list {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 320px;
	overflow-y: auto;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
	padding: 4px;
}

.cat-combobox-group {
	padding: 6px 10px 4px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
}

.cat-combobox-option {
	padding: 7px 10px;
	border-radius: calc(var(--radius-sm) - 2px);
	font-size: 13.5px;
	cursor: pointer;
}

.cat-combobox-option:hover,
.cat-combobox-option.active {
	background: var(--amber);
	color: var(--panel);
}

.cat-combobox-empty {
	padding: 10px;
	font-size: 13px;
	color: var(--muted);
}

.filters-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px 16px;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.field.hidden {
	display: none;
}

/* A vertical list of .field elements with no other layout (unlike
   .filters-grid or .toolbar, which already provide their own gap) —
   without this, consecutive .field blocks butt up against each other
   with zero space, since .field itself carries no margin. */
.fields-stack {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.fields-stack .fee-calc-rule {
	margin: 0;
}

.field label {
	font-size: 11px;
	font-weight: 600;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.field-pair {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.field-pair input {
	flex: 1 1 0;
	min-width: 0;
}

/* A bare "–" between the two inputs — without it, a filled-in min/max
   pair reads as two unrelated fields once the "min"/"max" placeholders
   are gone, with only the shared label above hinting they're a range. */
.field-pair-sep {
	flex: none;
	color: var(--muted-dim);
	font-size: 13px;
}

input, select, textarea {
	font: inherit;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--panel-raised);
	color: var(--paper);
}

textarea {
	resize: vertical;
}

input::placeholder, textarea::placeholder {
	color: var(--muted-dim);
}

input:focus, select:focus, textarea:focus {
	outline: 2px solid var(--amber);
	outline-offset: -1px;
	border-color: var(--amber);
}

input:disabled, select:disabled, textarea:disabled {
	background: transparent;
	border-style: dashed;
	color: var(--muted);
	cursor: not-allowed;
}

.checkbox-field {
	flex-direction: row;
	align-items: center;
	gap: 6px;
}

.checkbox-field label,
.checkbox-list label,
label.checkbox-field {
	text-transform: none;
	font-size: 13px;
	font-weight: 500;
	color: var(--paper);
}

.actions {
	margin-top: 18px;
	display: flex;
	align-items: center;
	gap: 12px;
}

button {
	font: inherit;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--amber);
	background: var(--amber);
	color: #1a1005;
	cursor: pointer;
}

button:hover {
	background: var(--amber-hover);
	border-color: var(--amber-hover);
}

button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* A button mid-request: label hides in place (keeps the button's width
   stable) and a small ring spinner takes its place. Applied alongside
   :disabled, not instead of it. */
button.is-loading {
	position: relative;
	color: transparent !important;
}
button.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(26, 16, 5, 0.35);
	border-top-color: #1a1005;
	border-radius: 50%;
	animation: btn-spin 0.6s linear infinite;
}
button.secondary.is-loading::after {
	border-color: var(--line);
	border-top-color: var(--paper);
}

@keyframes btn-spin {
	to { transform: rotate(360deg); }
}

button.secondary {
	background: transparent;
	color: var(--paper);
	border-color: var(--line);
}

button.secondary:hover {
	background: var(--panel-raised-hover);
	border-color: var(--line);
}

button.small {
	padding: 5px 12px;
	font-size: 12px;
}

.status-line {
	color: var(--muted);
}

.error-banner {
	background: var(--danger-bg);
	color: var(--danger);
	border: 1px solid var(--danger-line);
	border-radius: var(--radius);
	padding: 10px 14px;
	margin-bottom: 16px;
}

.success-banner {
	background: var(--success-bg);
	color: var(--success);
	border: 1px solid var(--success-line);
	border-radius: var(--radius);
	padding: 10px 14px;
	margin-bottom: 16px;
}

/* ---------- Tables ---------- */

table {
	width: 100%;
	border-collapse: collapse;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.tracked-table-scroll,
.table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--radius);
	/* Matches .panel's margin-bottom — a results table has no gap of its
	   own otherwise, so it sits flush against whatever section follows it
	   (e.g. Store Analyzer's watchlist panel right below the results). */
	margin-bottom: 18px;
}

table.tracked-table {
	table-layout: fixed;
	/* Column widths themselves are set via a <colgroup> in tracked.js
	   (COLUMN_WIDTHS) — colgroup/col widths take precedence over any
	   th/td width set here per the table-layout:fixed spec, so don't
	   duplicate per-column widths in this file; they'd be silently
	   ignored. min-width scales with COLUMN_WIDTHS' length (currently
	   14, after hiding "Sold 7d") — bump it if a column is ever added or
	   removed, or every column silently loses (or gains) real pixel
	   width even though the percentages still sum to 100%. */
	min-width: 1336px;
}

.select-cell {
	text-align: center;
	vertical-align: middle;
}

.bulk-actions-bar {
	align-items: center;
	border-left: 3px solid var(--amber);
}

/* Search results and Store Analyzer both render an 7-8 column table with no
   fixed layout — on a narrow viewport, the table's own `overflow: hidden`
   (above) would silently clip whichever columns don't fit rather than
   wrapping or shrinking gracefully. A min-width floor forces the table to
   keep a legible column width and scroll horizontally inside .table-scroll
   instead of losing columns. */
.table-scroll table {
	min-width: 720px;
}

table.tracked-table td,
table.tracked-table th {
	overflow-wrap: break-word;
}

/* The category <select>'s natural width is driven by its longest option
   text (e.g. "Mobile Phones & Communication"), which is wider than the
   fixed-layout column — without this it overflows the cell. */
table.tracked-table td select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	text-overflow: ellipsis;
}


th, td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: middle;
}

th {
	background: var(--panel-raised);
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
}

th.sortable {
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

/* A resting, dim "sortable" glyph on every sortable column — not just the
   one currently active — so the ability to sort is visible without having
   to hover or guess. Swaps to a solid, amber directional arrow once that
   column is the active sort. */
th.sortable::after {
	content: "⇅";
	display: inline-block;
	margin-left: 5px;
	color: var(--muted-dim);
	font-size: 10px;
}

th.sortable:hover::after {
	color: var(--amber);
}

th.sortable.sort-asc::after,
th.sortable.sort-desc::after {
	color: var(--amber);
}

th.sortable.sort-asc::after {
	content: "▲";
}

th.sortable.sort-desc::after {
	content: "▼";
}

th.sortable:hover {
	color: var(--amber);
}

tr:last-child td {
	border-bottom: none;
}

tbody tr:hover {
	background: var(--panel-raised);
}

td.thumb img {
	width: 46px;
	height: 46px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--panel-raised);
	display: block;
}

/* Hover-zoom: a subtle lift on the thumbnail itself, plus the floating
   larger preview (.thumb-zoom) that buildThumb pops next to it. */
.zoomable-thumb {
	cursor: zoom-in;
	transition: transform 0.12s ease, border-color 0.12s ease;
}
.zoomable-thumb:hover {
	transform: scale(1.12);
	border-color: var(--amber) !important;
	position: relative;
	z-index: 2;
}

.thumb-zoom {
	position: fixed;
	z-index: 300;
	width: 320px;
	height: 320px;
	padding: 6px;
	background: var(--panel-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
}
.thumb-zoom.visible {
	opacity: 1;
	visibility: visible;
}
.thumb-zoom img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: calc(var(--radius) - 3px);
	background: #ffffff;
	display: block;
}

td.title a {
	font-weight: 600;
	text-decoration: none;
	color: var(--paper);
}

td.title a:hover {
	color: var(--teal);
}

.muted {
	color: var(--muted);
}

/* Numeric/data columns — tabular monospace figures are the app's visual
   signature: prices, sold counts, and scores line up like a ticker instead
   of reading as prose. */
.data-cell {
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Sold-quantity is graded by volume — the tool's whole job is spotting
   which listings are actually moving, so that number carries color weight
   proportional to how hot it is, right where you're already looking. */
.sold-figure {
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

.sold-figure .unit {
	font-family: var(--font-ui);
	font-weight: 400;
	color: var(--muted);
	margin-left: 3px;
}

.sold-none { color: var(--muted-dim); font-weight: 400; }

/* Whole-listing sold across variations: dotted underline + info mark hint
   that hovering explains the figure. */
.sold-has-breakdown { cursor: help; }
.sold-has-breakdown .sold-info {
	margin-left: 4px;
	font-size: 11px;
	color: var(--muted);
}
.sold-popover {
	position: fixed;
	z-index: 1000;
	max-width: 320px;
	padding: 12px 14px;
	background: var(--panel);
	color: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
	font-size: 12.5px;
	line-height: 1.45;
	pointer-events: none;
}
.sold-pop-title { font-weight: 600; margin-bottom: 6px; }
.sold-pop-sub { color: var(--muted); font-size: 11.5px; margin: 4px 0 2px; }
.sold-pop-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 2px 0;
}
.sold-pop-label { flex: 1 1 auto; }
.sold-pop-muted { color: var(--muted); font-size: 11.5px; }
.sold-pop-num { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 34px; text-align: right; }
.sold-pop-stats { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.sold-pop-note { margin-top: 6px; color: var(--muted); font-size: 11.5px; }
.sold-cool { color: var(--muted); }
.sold-warm { color: var(--paper); }
.sold-hot { color: var(--amber); }
.sold-blazing { color: var(--amber); text-shadow: 0 0 12px var(--amber-line); }

.analyze-store-link {
	display: inline-block;
	margin-top: 4px;
}

.calc-fees-link,
.research-by-title-link {
	display: block;
	margin-top: 6px;
	white-space: nowrap;
}

.seller-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

.watch-seller-btn {
	margin-top: 4px;
}

.watch-seller-btn:hover {
	color: var(--teal);
}

.watch-seller-btn.active {
	color: var(--teal);
}

td.favorite-cell {
	text-align: center;
}

.fav-btn {
	background: none;
	border: none;
	padding: 2px;
	font-size: 18px;
	line-height: 1;
	color: var(--line);
	cursor: pointer;
}

.fav-btn:hover {
	color: var(--amber);
}

.fav-btn.active {
	color: var(--amber);
}

.badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 600;
	font-family: var(--font-data);
	background: var(--teal-dim);
	color: var(--teal);
}

/* A badge with a hover tooltip attached (see attachHoverTooltip) — the ⓘ
   mark is the visual cue that there's more to see on hover/focus, same
   convention as .sold-has-breakdown's info mark. */
.badge-hoverable { cursor: help; }
.badge-info {
	margin-left: 3px;
	font-size: 10px;
	opacity: 0.75;
}

.empty-state {
	padding: 40px 20px;
	text-align: center;
	color: var(--muted);
}

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 16px 0;
}

.pagination .page-indicator {
	color: var(--muted);
	font-size: 13px;
	font-family: var(--font-data);
}

footer.appfooter {
	display: none; /* usage now lives in the sidebar gauge */
}

.action-cell {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
}

.source-icons {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.source-icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	text-decoration: none;
	opacity: 0.9;
}

.source-icon-link svg {
	width: 17px;
	height: 17px;
	display: block;
}

.source-icon-link:hover {
	opacity: 1;
}

.source-icon-google { background: #4285f4; }
.source-icon-aliexpress { background: #ff4747; }
.source-icon-alibaba { background: #ff6a00; }
/* Not Amazon's own navy (#131921) — this app's own dark theme panel
   background (--panel, #131a21) is nearly identical to it, which made the
   badge all but disappear in dark mode (caught by live visual check).
   Amazon's other brand color (the smile-arrow orange) stays visible in
   both themes. */
.source-icon-amazon { background: #ff9900; }

.action-cell button {
	width: 100%;
}

/* Deliberately NOT width:100% like .action-cell above — this column is
   narrow enough that stretching the button to fill it leaves less room
   than the "Check" label's own padding needs, wrapping it onto two
   lines. Letting it size to its content, centered, keeps it legible. */
.competition-cell {
	text-align: center;
}

/* Only takes effect on the <span> variant (Discover's product rows) —
   margin is a no-op on a table cell, so the existing <td> usages
   elsewhere are unaffected. Keeps the "Check" button from sitting flush
   against whatever inline-block element (e.g. Analyze Store) precedes it. */
span.competition-cell {
	margin-left: 8px;
}

/* ---------- Quick start (presets + saved searches) ----------
   Both used to be full panels of their own (a grid of big description
   cards, and a stacked list of saved-search rows) sitting above the
   search form — together the biggest single contributor to the page
   feeling long before a user even reaches Search. Collapsed here into
   one compact panel: presets are single-line chips (their description
   moved to a title tooltip), saved searches are a dropdown instead of
   an ever-growing list of rows. */

#quickstart-panel {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.quickstart-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.quickstart-label {
	flex: 0 0 auto;
	min-width: 92px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
}

.presets-list {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	flex: 1 1 auto;
}

.preset-chip {
	font: inherit;
	font-size: 11.5px;
	font-weight: 500;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--panel-raised);
	color: var(--paper);
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.12s ease, background 0.12s ease;
}

.preset-chip:hover {
	border-color: var(--amber-line);
	background: var(--panel-raised-hover);
}

.preset-chip:disabled {
	cursor: default;
	opacity: 0.6;
}

.preset-chip.active {
	background: var(--amber-dim);
	border-color: var(--amber-line);
	color: var(--amber);
}

.save-search-row {
	margin-top: 12px;
	display: flex;
	gap: 10px;
	align-items: center;
}

.save-search-row input {
	flex: 1 1 260px;
}

/* ---------- Chip-toggle checkboxes ----------
   A checkbox + label pair styled as a pill instead of a checkbox row —
   used for Condition / Buying options / Qualified programs, which as
   plain checkbox lists took a lot of vertical space (14 conditions
   alone). Still a real <input type="checkbox">, just visually hidden,
   so existing checkedValues()/setCheckedValues() and keyboard/screen
   reader behavior are unchanged. Active-state color reuses the same
   amber-tint convention as .filter-tag.active / .cal-day.selected. */

.chip-toggle-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.chip-toggle {
	display: inline-flex;
	align-items: center;
	font-size: 11.5px;
	font-weight: 500;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--panel-raised);
	color: var(--muted);
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.chip-toggle:hover {
	border-color: var(--amber-line);
}

.chip-toggle input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.chip-toggle:has(input:checked) {
	background: var(--amber-dim);
	border-color: var(--amber-line);
	color: var(--amber);
}

.chip-toggle:has(input:focus-visible) {
	outline: 2px solid var(--amber);
	outline-offset: 2px;
}

/* ---------- Filter subsections (inside the "More filters" panel) ---------- */

.filter-subsection + .filter-subsection {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--line-soft);
}

.filter-subsection-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	margin-bottom: 14px;
}

/* ---------- Refresh alerts ---------- */

.refresh-alerts-panel {
	border-left: 3px solid var(--amber);
}

.refresh-alerts-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.refresh-alerts-header {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--amber);
}

.refresh-alert-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 0;
}

.refresh-alert-row:not(:last-child) {
	border-bottom: 1px solid var(--line-soft);
}

.refresh-alert-row a {
	font-weight: 500;
}

.refresh-alert-row .muted {
	font-family: var(--font-data);
	font-size: 12.5px;
	white-space: nowrap;
}

/* ---------- Trend charts & history modal ---------- */

.modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(4, 6, 9, 0.72);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 100;
}

.modal {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px 22px;
	width: 100%;
	max-width: 620px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}

.modal-header h2 {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 600;
	margin: 0;
	letter-spacing: -0.01em;
}

.modal-close {
	background: none;
	border: none;
	color: var(--muted);
	font-size: 22px;
	line-height: 1;
	padding: 0;
	cursor: pointer;
}

.modal-close:hover { color: var(--paper); }

.modal-confirm {
	max-width: 400px;
}

.folder-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.folder-list-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.modal-confirm-message {
	color: var(--paper);
	line-height: 1.5;
	margin: 0;
}

.modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}

button.danger {
	background: var(--danger);
	border-color: var(--danger);
	color: #2a0505;
}

button.danger:hover {
	filter: brightness(1.08);
}

button.danger-text {
	color: var(--danger);
	border-color: var(--danger);
}

button.danger-text:hover {
	background: var(--danger-bg);
}

.trend-chart-wrap {
	position: relative;
	margin-bottom: 18px;
}

.trend-chart-wrap:last-of-type {
	margin-bottom: 0;
}

.trend-chart-label {
	font-family: var(--font-data);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
	margin-bottom: 6px;
}

.trend-chart-empty {
	color: var(--muted-dim);
	font-size: 13px;
	padding: 20px 0;
}

.trend-svg {
	width: 100%;
	height: 140px;
	display: block;
	overflow: visible;
}

.trend-grid {
	stroke: var(--line);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.trend-axis-label {
	font-family: var(--font-data);
	font-size: 9px;
	fill: var(--muted-dim);
}

.trend-line {
	fill: none;
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
	/* The SVG's viewBox (560×140) rarely matches its rendered CSS width
	   (stretched to 100% of a panel, which can be 2x+ wider on a full-page
	   chart like Niche Analysis vs. a narrower modal) — without this, the
	   browser's implicit viewBox-to-viewport scale is applied unevenly to
	   x vs. y, so a steep diagonal segment gets a thicker/thinner, blurry-
	   looking stroke instead of a clean 2px line. This keeps stroke width
	   constant in screen pixels regardless of that scale. */
	vector-effect: non-scaling-stroke;
}

.trend-area {
	opacity: 0.1;
	stroke: none;
}

.trend-end-dot {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--dot-color);
	border: 2px solid var(--panel);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.trend-end-label {
	position: absolute;
	font-family: var(--font-data);
	font-size: 11px;
	font-weight: 600;
	color: var(--paper);
	white-space: nowrap;
	pointer-events: none;
	transform: translateX(8px);
}

.trend-end-label.trend-end-label-flip {
	transform: translateX(calc(-100% - 8px));
}

.trend-crosshair {
	stroke: var(--muted-dim);
	stroke-width: 1;
	pointer-events: none;
	vector-effect: non-scaling-stroke;
}

.trend-tooltip {
	position: absolute;
	top: 16px;
	transform: translateX(-50%);
	background: var(--panel-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 6px 10px;
	pointer-events: none;
	white-space: nowrap;
}

.trend-tooltip-value {
	font-family: var(--font-data);
	font-size: 13px;
	font-weight: 600;
	color: var(--paper);
}

.trend-tooltip-date {
	font-family: var(--font-data);
	font-size: 11px;
	color: var(--muted);
}

.trend-table-toggle {
	margin-top: 4px;
}

.trend-table-wrap {
	margin-top: 12px;
	max-height: 220px;
	overflow-y: auto;
	overflow-x: auto;
}

/* ---------- Sourcing modal ---------- */

.sourcing-source-title {
	margin-top: -4px;
	margin-bottom: 16px;
	word-break: break-word;
}

.sourcing-keyword-input {
	width: 100%;
}

.sourcing-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}

/* Each marketplace gets its own card (background + border) rather than a
   bare button floating on the modal's own background — gives the row
   visual structure and a clear boundary between the three options. */
.sourcing-link-col {
	flex: 1 1 150px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	background: var(--panel-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

.sourcing-filter-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
}

/* filter-tag is a clickable toggle chip (a <button>, not a static label —
   see buildFilterChipRow), so it needs font:inherit to escape the browser's
   default button font and a pointer cursor; .active uses the same
   amber-tint convention as .cal-day.selected / .admin-pill.admin elsewhere
   in this file, so "on" reads as a clear, familiar selected-state color
   rather than a one-off. */
.filter-tag {
	font: inherit;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 3px 7px;
	border-radius: 999px;
	background: var(--panel);
	border: 1px solid var(--line);
	color: var(--muted);
	white-space: nowrap;
	cursor: pointer;
}

.filter-tag:hover {
	border-color: var(--muted);
}

.filter-tag.active {
	background: var(--amber-dim);
	border-color: var(--amber-line);
	color: var(--amber);
}

.supplier-price-row {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.supplier-price-input {
	flex: 1 1 0;
	min-width: 0;
}

.btn-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 10px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--amber);
	background: var(--amber);
	color: #1a1005;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}

.btn-link:hover {
	background: var(--amber-hover);
	border-color: var(--amber-hover);
}

.btn-link-secondary {
	background: transparent;
	color: var(--paper);
	border-color: var(--line);
}

.btn-link-secondary:hover {
	background: var(--panel-raised-hover);
	border-color: var(--line);
}

/* Both sections sit below a divider (a plain top border, same weight as
   .modal-header's) so they read as a new part of the modal rather than an
   extension of the AliExpress/Alibaba/Amazon link row right above. */
.supplier-search-section,
.supplier-saved-section {
	margin-top: 4px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.supplier-search-btn {
	width: 100%;
	margin-top: 8px;
	padding: 9px 18px;
}

.supplier-search-section .hint {
	margin: 8px 0 0;
	min-height: 14px;
}

.supplier-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.supplier-search-section .supplier-list {
	margin-top: 10px;
}

.supplier-saved-section .supplier-list {
	margin-top: 4px;
}

.supplier-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--panel-raised);
}

.supplier-row img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
	background: var(--panel);
}

.supplier-row-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.supplier-row-title {
	font-size: 12px;
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.supplier-row-meta {
	font-size: 11px;
	color: var(--muted);
}

/* ---------- AI features (keyword refine, title generator) ---------- */

.sourcing-keyword-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.sourcing-keyword-row .sourcing-keyword-input {
	flex: 1 1 200px;
	min-width: 0;
}

.ai-refine-status {
	display: block;
	font-size: 11px;
	color: var(--muted);
	margin-top: 4px;
}

.title-counter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
}

.title-char-counter {
	font-size: 12px;
	color: var(--muted);
}

.title-char-counter.over-limit {
	color: var(--danger);
	font-weight: 600;
}

/* ---------- Title Builder ---------- */

.title-builder-input-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.title-builder-input-row input {
	flex: 1 1 200px;
	min-width: 0;
	font-size: 15px;
}

.title-builder-tables {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	align-items: start;
}

.title-builder-table-col {
	min-width: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sample-note {
	margin: 0 0 18px;
	padding: 14px 18px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	line-height: 1.6;
}

.title-builder-table-heading {
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 14px;
}

/* Lays a panel's heading and an action button (e.g. Top Titles' "Combine
   into one title") on the same row instead of stacking them — the
   heading's own bottom margin moves here so it isn't doubled. */
.title-builder-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.title-builder-panel-header .title-builder-table-heading {
	margin-bottom: 0;
}

table.title-builder-keyword-table {
	width: 100%;
}

table.title-builder-keyword-table th,
table.title-builder-keyword-table td {
	padding: 12px 16px;
}

.table-section-row td {
	background: var(--panel);
	border-top: 1px solid var(--line);
	padding-top: 8px;
	padding-bottom: 8px;
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
}

.keyword-row {
	cursor: pointer;
}

.keyword-row:hover,
.keyword-row:focus-visible {
	background: var(--panel-raised-hover);
	outline: none;
}

/* ---------- Fee Calculator ---------- */

.fee-calc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	align-items: start;
}

.fee-calc-heading {
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 16px;
}

.fee-calc-rule {
	border: none;
	border-top: 1px solid var(--line);
	margin: 18px 0;
}

.fee-calc-mode-toggle {
	display: flex;
	gap: 4px;
	padding: 3px;
	background: var(--panel-raised);
	border-radius: var(--radius-sm);
	margin-bottom: 16px;
}

.fee-calc-mode-btn {
	appearance: none;
	-webkit-appearance: none;
	flex: 1 1 0;
	padding: 9px 10px;
	border: none;
	border-radius: calc(var(--radius-sm) - 2px);
	background: transparent;
	color: var(--muted);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

.fee-calc-mode-btn:hover {
	color: var(--paper);
}

.fee-calc-mode-btn.active {
	background: var(--amber);
	color: var(--panel);
	font-weight: 600;
}

.hint-inline {
	color: var(--muted-dim);
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

.fee-calc-profit {
	text-align: center;
	padding: 18px 0 22px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 16px;
}

.fee-calc-profit-label,
.fee-calc-breakeven-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
}

.fee-calc-profit-value {
	font-family: var(--font-data);
	font-size: 32px;
	font-weight: 600;
	margin-top: 4px;
}

.fee-calc-profit-value.positive { color: var(--success); }
.fee-calc-profit-value.negative { color: var(--danger); }

.fee-calc-profit-margin {
	font-size: 13px;
	color: var(--muted);
	margin-top: 2px;
}

.fee-calc-lines {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 18px;
}

.fee-calc-line {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
}

.fee-calc-line:last-child {
	padding-top: 8px;
	border-top: 1px solid var(--line);
	font-weight: 600;
}

.fee-calc-breakeven {
	background: var(--panel-raised);
	border-radius: var(--radius);
	padding: 14px 16px;
}

.fee-calc-breakeven-value {
	font-family: var(--font-data);
	font-size: 22px;
	font-weight: 600;
	color: var(--amber);
	margin: 2px 0 4px;
}

.fee-calc-compare {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.fee-calc-compare-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	padding: 6px 0;
	font-size: 13px;
	font-family: var(--font-data);
}

.fee-calc-compare-row span:first-child {
	font-family: var(--font-ui);
	color: var(--muted);
}

.fee-calc-compare-row span:not(:first-child) {
	text-align: right;
}

.fee-calc-compare-header {
	font-family: var(--font-ui);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
}

.fee-calc-ranking-table {
	width: 100%;
}

.fee-calc-ranking-table th:not(:first-child),
.fee-calc-ranking-table td:not(:first-child) {
	text-align: right;
}

.fee-calc-ranking-table td.positive {
	color: var(--success);
}

.fee-calc-ranking-table td.negative {
	color: var(--danger);
}

.fee-calc-ranking-best {
	background: var(--amber-dim);
}

.fee-calc-ranking-best td:first-child {
	color: var(--amber);
	font-weight: 600;
}

.fee-calc-compare-header span:not(:first-child) {
	text-align: right;
}

.fee-calc-disclaimer {
	max-width: 90ch;
}

/* ---------- Search results scorecard ---------- */

.scorecard {
	margin-bottom: 16px;
}

.scorecard-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 18px;
}

.scorecard-stat-value {
	font-family: var(--font-data);
	font-size: 20px;
	font-weight: 600;
	color: var(--amber);
}

.scorecard-stat-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
	margin-top: 3px;
}

.scorecard-sellers {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.scorecard-sellers-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
	margin-bottom: 10px;
}

.scorecard-seller-row {
	display: grid;
	grid-template-columns: minmax(90px, 160px) 1fr 40px;
	align-items: center;
	gap: 12px;
	font-size: 12.5px;
	padding: 5px 0;
}

.scorecard-seller-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.scorecard-seller-bar-track {
	height: 6px;
	border-radius: 3px;
	background: var(--panel-raised);
	overflow: hidden;
}

.scorecard-seller-bar-fill {
	height: 100%;
	background: var(--teal);
	border-radius: 3px;
}

.scorecard-seller-share {
	text-align: right;
	color: var(--muted);
}

/* ---------- Title Builder: price-band chart ---------- */

.price-band-chart {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	height: 160px;
	padding-top: 8px;
}

.price-band-col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
}

.price-band-value {
	font-family: var(--font-data);
	font-size: 12px;
	font-weight: 600;
	color: var(--paper);
	margin-bottom: 4px;
}

.price-band-bar-track {
	flex: 1 1 auto;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.price-band-bar {
	width: 60%;
	min-height: 0;
	background: var(--amber);
	border-radius: 4px 4px 0 0;
}

.price-band-range {
	font-family: var(--font-data);
	font-size: 10.5px;
	color: var(--muted);
	margin-top: 8px;
	text-align: center;
}

.price-band-count {
	font-size: 10px;
	color: var(--muted-dim);
	margin-top: 2px;
}

.price-band-pct-sale {
	font-size: 10px;
	margin-top: 2px;
	cursor: help;
}

/* ---------- Admin: Usage analytics ranked-bar charts ---------- */

.analytics-charts-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 20px;
}
@media (max-width: 760px) {
	.analytics-charts-row { grid-template-columns: 1fr; }
}

.rank-bar-list { display: flex; flex-direction: column; gap: 9px; margin: 8px 0 4px; }

.rank-bar-row {
	display: grid;
	grid-template-columns: 108px 1fr auto;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
}

.rank-bar-label {
	color: var(--paper);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rank-bar-track {
	height: 10px;
	background: var(--panel-raised);
	border-radius: 100px;
	overflow: hidden;
}

.rank-bar-fill {
	display: block;
	height: 100%;
	border-radius: 100px;
	min-width: 3px;
	transition: width 0.3s;
}

.rank-bar-value {
	font-weight: 600;
	color: var(--muted);
	white-space: nowrap;
}

/* ---------- Title Builder: top-selling titles ---------- */

.top-titles {
	display: flex;
	flex-direction: column;
}

.top-title-row {
	display: grid;
	grid-template-columns: 24px 1fr auto auto auto;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border-top: 1px solid var(--line-soft);
	font-size: 13px;
}

.top-title-copy-btn {
	background: transparent;
	border: 1px solid var(--line);
	color: var(--muted);
	width: 26px;
	height: 26px;
	padding: 0;
	line-height: 1;
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.top-title-copy-btn:hover {
	color: var(--paper);
	background: var(--panel-raised);
}

.top-title-row:first-child {
	border-top: none;
}

.top-title-rank {
	color: var(--muted-dim);
	font-size: 11px;
}

.top-title-link {
	min-width: 0;
	color: var(--paper);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.top-title-link:hover {
	color: var(--teal);
	text-decoration: underline;
}

.top-title-price {
	color: var(--muted);
	white-space: nowrap;
}

.top-title-sold {
	color: var(--amber);
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- Competitor watchlist ---------- */

.watchlist-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 12px;
}

.watchlist-row {
	display: grid;
	grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 200px) auto;
	align-items: center;
	gap: 14px;
	padding: 10px 0;
	border-top: 1px solid var(--line-soft);
}

.watchlist-row:first-child {
	border-top: none;
}

.watchlist-row-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.watchlist-row-main .link-btn {
	font-size: 13.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.star-rating {
	display: flex;
	gap: 1px;
	white-space: nowrap;
}

.star-btn {
	background: none;
	border: none;
	padding: 1px;
	font-size: 15px;
	line-height: 1;
	color: var(--line);
	cursor: pointer;
}

.star-btn.filled {
	color: var(--amber);
}

.star-btn:hover {
	color: var(--amber);
}

.watchlist-note-input {
	font-size: 12.5px;
	padding: 5px 8px;
}

/* ---------- Favorites ---------- */

.type-filter {
	display: flex;
	gap: 8px;
}

.type-filter-btn {
	padding: 7px 14px;
	border-radius: 100px;
	border: 1px solid var(--line);
	background: var(--panel-raised);
	color: var(--muted);
	cursor: pointer;
	font-family: var(--font-ui);
	font-size: 12.5px;
	font-weight: 500;
}

.type-filter-btn:hover {
	color: var(--paper);
}

.type-filter-btn.active {
	background: var(--amber-dim);
	border-color: var(--amber-line);
	color: var(--amber);
}

.favorite-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: 10px;
}

.favorite-type-badge {
	flex: none;
	display: inline-block;
	padding: 3px 9px;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-family: var(--font-data);
}

.favorite-type-badge.product {
	background: var(--amber-dim);
	color: var(--amber);
}

.favorite-type-badge.seller {
	background: var(--teal-dim);
	color: var(--teal);
}

.favorite-type-badge.search {
	background: var(--panel-raised);
	color: var(--muted);
}

.favorite-thumb {
	flex: none;
}

.favorite-thumb img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--panel-raised);
}

.favorite-main {
	flex: 1 1 auto;
	min-width: 0;
}

.favorite-title-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.favorite-title {
	font-weight: 600;
	color: var(--paper);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
}

a.favorite-title:hover {
	color: var(--teal);
}

.favorite-sub {
	font-size: 12px;
	margin-top: 3px;
}

.favorite-rating-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

.favorite-rating-row .watchlist-note-input {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 260px;
}

/* ---------- Dropship-sourced badge ---------- */

.dropship-signal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
}

/* VeRO risk flag: a red brand tag + warning triangle prepended to the
   listing title, with a styled hover tooltip (see attachHoverTooltip). */
.vero-flag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-right: 7px;
	cursor: help;
	vertical-align: middle;
}
.vero-brand-tag {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 4px;
	background: var(--danger);
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	font-family: var(--font-data);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.vero-warn {
	color: var(--danger);
	font-size: 13px;
	line-height: 1;
}
.vero-flag-low {
	opacity: 0.72;
}

/* In Tracked Products' narrow VeRO column the flag must fit the cell: the
   brand tag shrinks and ellipsises instead of spilling over the Price
   column (the hover tooltip still names the full brand). */
.vero-cell .vero-flag {
	max-width: 100%;
	margin-right: 0;
}
.vero-cell .vero-brand-tag {
	max-width: none;
	min-width: 0;
	flex: 0 1 auto;
}

/* Restricted Keyword flag: a genuinely different signal from VeRO above —
   item-type/category restrictions, not brand/IP ownership (see
   internal/restricted) — so it gets its own color (amber, not the VeRO
   red) to stay visually distinct at a glance. */
.restricted-keyword-flag {
	display: inline-block;
	margin-right: 7px;
	color: var(--amber);
	font-size: 13px;
	line-height: 1;
	cursor: help;
	vertical-align: middle;
}

/* The matched word/phrase inline within the title itself — a plain <mark>
   styled to fit the app's own palette instead of the browser default. */
.restricted-keyword-highlight {
	background: var(--amber);
	color: var(--ink);
	padding: 0 2px;
	border-radius: 2px;
}

.hover-tip {
	position: fixed;
	z-index: 400;
	max-width: 260px;
	padding: 9px 12px;
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
	font-size: 12px;
	line-height: 1.45;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.1s ease;
}
.hover-tip.visible {
	opacity: 1;
	visibility: visible;
}

/* ---------- My Competitors ---------- */

.competitor-count { margin-left: auto; }
.competitors-table { min-width: 720px; }
.competitors-table th,
.competitors-table td { vertical-align: middle; }
.competitor-name { font-weight: 600; text-decoration: none; color: var(--paper); }
.competitor-name:hover { color: var(--amber); }
.competitor-note-input {
	width: 100%;
	min-width: 180px;
	padding: 6px 9px;
	font-size: 13px;
}
.competitor-actions-col { white-space: nowrap; text-align: right; }
.competitor-row-actions { display: flex; gap: 12px; justify-content: flex-end; }
.competitor-row-actions .danger-text { color: var(--danger); }

/* ---------- Seasonal Calendar ---------- */

.cal-topbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.cal-country-toggle { display: inline-flex; gap: 4px; background: var(--panel-raised); border: 1px solid var(--line); border-radius: 100px; padding: 3px; flex: none; }
.cal-country-btn {
	background: transparent; border: none; color: var(--muted);
	padding: 6px 16px; border-radius: 100px; font-size: 13px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease;
}
.cal-country-btn.active { background: var(--amber); color: #1a1005; font-weight: 600; }
.cal-intro { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 60ch; }
.cal-intro strong { color: var(--paper); }

/* Focal hero card: selected event + countdown + keyword ideas */
.cal-hero { margin-bottom: 18px; overflow: hidden; }
.cal-hero-inner { display: flex; gap: 20px; align-items: flex-start; }
.cal-hero-emoji {
	flex: none; width: 68px; height: 68px; display: flex; align-items: center; justify-content: center;
	font-size: 38px; border-radius: var(--radius); background: var(--amber-dim); border: 1px solid var(--amber-line);
}
.cal-hero-body { flex: 1 1 auto; min-width: 0; }
.cal-hero-eyebrow { font-family: var(--font-data); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-dim); }
.cal-hero-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 2px; }
.cal-hero-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.cal-hero-countdown {
	font-family: var(--font-data); font-size: 12px; font-weight: 600; color: var(--teal);
	background: var(--teal-dim); border: 1px solid var(--teal); border-radius: 100px; padding: 3px 11px; white-space: nowrap;
}
.cal-hero-date { font-size: 13px; }
.cal-hero-kw-label { font-size: 12.5px; color: var(--muted); margin: 16px 0 9px; }

.cal-grid-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.cal-panel { margin: 0; }

.cal-month-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-month-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--teal); }
.cal-nav {
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent; border: 1px solid var(--line); color: var(--paper);
	width: 32px; height: 32px; border-radius: var(--radius-sm); cursor: pointer; padding: 0;
}
.cal-nav:hover { border-color: var(--amber); background: var(--panel-raised); color: var(--amber); }
.cal-nav svg { display: block; }

.cal-weekdays, .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-weekday { text-align: center; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding-bottom: 8px; }
.cal-day {
	position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 3px;
	border-radius: var(--radius-sm); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted);
}
.cal-day.empty { visibility: hidden; }
.cal-day.today .cal-day-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--teal); color: var(--teal); font-weight: 600;
}
.cal-day.has-event {
	cursor: pointer; color: var(--paper); font-weight: 600;
	background: var(--amber-dim); border: 1px solid var(--amber-line);
}
.cal-day.has-event:hover { background: var(--panel-raised-hover); border-color: var(--amber); }
.cal-day.selected { background: var(--amber-dim); border-color: var(--amber); box-shadow: 0 0 0 1.5px var(--amber) inset; }
.cal-day-emoji { font-size: 14px; line-height: 1; }

.cal-legend { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.cal-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.cal-legend-dot { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.cal-legend-dot.today { border-radius: 50%; border: 1.5px solid var(--teal); background: transparent; }
.cal-legend-dot.event { background: var(--amber-dim); border: 1px solid var(--amber-line); }

.cal-keywords { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-kw-chip {
	display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 100px;
	background: var(--panel-raised); border: 1px solid var(--line); color: var(--paper);
	font-size: 13px; text-decoration: none; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease;
}
.cal-kw-chip::before { content: "🔍"; font-size: 11px; opacity: 0.6; }
.cal-kw-chip:hover { border-color: var(--amber); background: var(--panel-raised-hover); }
.cal-kw-note { margin: 14px 0 0; }

.cal-upcoming { display: flex; flex-direction: column; }
.cal-upcoming-row {
	display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 12px;
	background: transparent; border: none; border-radius: var(--radius-sm);
	padding: 11px 10px; cursor: pointer; text-align: left; color: var(--paper); font-size: 14px; width: 100%;
	transition: background 0.12s ease;
}
.cal-upcoming-row:hover { background: var(--panel-raised); }
.cal-upcoming-row.active { background: var(--amber-dim); }
.cal-upcoming-emoji { font-size: 17px; }
.cal-upcoming-name { font-weight: 500; }
.cal-upcoming-date { font-size: 12.5px; }
.cal-upcoming-days {
	color: var(--amber); font-size: 11px; font-weight: 600; font-family: var(--font-data);
	background: var(--amber-dim); border-radius: 100px; padding: 2px 9px; text-align: center; min-width: 40px;
}

@media (max-width: 820px) {
	.cal-grid-layout { grid-template-columns: minmax(0, 1fr); }
	.cal-hero-emoji { width: 56px; height: 56px; font-size: 30px; }
	.cal-hero-title { font-size: 20px; }
}

/* ---------- Market Insights ---------- */

.mi-toolbar { align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.mi-datanote { margin-left: auto; font-size: 12.5px; font-family: var(--font-data); }

.mi-banner {
	background: var(--teal-dim); border: 1px solid var(--teal); border-radius: var(--radius);
	padding: 16px 18px; margin-bottom: 18px;
}
.mi-banner-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--teal); }
.mi-banner-body { color: var(--paper); font-size: 13.5px; margin-top: 5px; max-width: 80ch; }

.mi-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.mi-side { display: flex; flex-direction: column; gap: 18px; }
.mi-panel { margin: 0; }
.mi-panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.mi-panel-sub { font-size: 12px; }
.mi-empty { padding: 10px 2px; font-size: 13px; }

.mi-product-row {
	display: grid; grid-template-columns: 20px 46px minmax(0, 1fr) auto; align-items: center; gap: 12px;
	padding: 10px 4px; border-bottom: 1px solid var(--line-soft);
	border-radius: var(--radius-sm); transition: background 0.1s ease;
}
.mi-product-row:last-child { border-bottom: none; }
.mi-product-row:hover { background: var(--panel-raised); }
/* The thumbnail is a buildThumb() <img>, which is only sized by the table
   CSS (td.thumb img) — here it lives in a grid, so size it explicitly or
   it renders at the image's natural (huge) resolution. */
.mi-product-row img {
	width: 46px; height: 46px; object-fit: cover; display: block;
	border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-raised);
}
.mi-rank { color: var(--muted-dim); font-size: 12px; text-align: center; }
.mi-product-main { min-width: 0; }
.mi-product-title {
	display: block; font-weight: 600; font-size: 13.5px; color: var(--paper); text-decoration: none;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mi-product-title:hover { color: var(--amber); }
.mi-product-sub { font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-product-metric { text-align: right; }
.mi-sold { color: var(--success); font-size: 16px; font-weight: 600; }
.mi-sold-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.mi-sold-caveat { font-size: 10px; font-style: italic; margin-top: 2px; cursor: help; }

.mi-niche-row {
	display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
	padding: 9px 6px; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--paper);
	border-radius: var(--radius-sm);
}
.mi-niche-row:last-child { border-bottom: none; }
.mi-niche-row:hover { background: var(--panel-raised); }
.mi-niche-name { font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-niche-metric { color: var(--success); font-size: 12.5px; font-weight: 600; }
.mi-niche-rev { font-size: 11.5px; }

.mi-seller-row {
	display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name metric" "sub metric"; gap: 0 12px;
	padding: 9px 6px; border-bottom: 1px solid var(--line-soft); align-items: center;
}
.mi-seller-row:last-child { border-bottom: none; }
.mi-seller-name { grid-area: name; font-weight: 600; font-size: 13.5px; color: var(--paper); text-decoration: none; }
.mi-seller-name:hover { color: var(--amber); }
.mi-seller-sub { grid-area: sub; font-size: 11.5px; }
.mi-seller-metric { grid-area: metric; color: var(--success); font-size: 13px; font-weight: 600; }

.mi-disclaimer { margin-top: 18px; max-width: 90ch; }
.mi-disclaimer strong { color: var(--paper); }

.dropship-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 100px;
	border: 1px solid var(--amber-line);
	background: var(--amber-dim);
	color: var(--amber);
	font-size: 10px;
	font-weight: 600;
	font-family: var(--font-data);
	white-space: nowrap;
	cursor: help;
}

.dropship-check-btn {
	font-size: 10.5px;
	white-space: nowrap;
}

.dropship-check-result {
	display: block;
	width: 100%;
	font-size: 11px;
	line-height: 1.4;
}

/* ---------- Responsive floor ----------
   Below this width there isn't room to reflow the sidebar alongside
   content the way the wide-screen collapse above does — it used to
   squeeze into a horizontal scrolling strip, which read fine with a
   handful of nav links but broke down once the sidebar grew a variable-
   length saved-searches list (see .side-nav-saved). It's now a fixed
   off-canvas drawer instead: closed by default, full-width vertical
   layout (identical to the desktop sidebar) when open, dimming the page
   behind it since there's no spare width to give it. Same
   html.sidebar-open toggle as the wide-screen collapse — set by
   initMobileNav in common.js, present on every page with a sidebar —
   just a different visual treatment for the width. */

@media (max-width: 860px) {
	.title-builder-tables,
	.fee-calc-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sidebar {
		position: fixed;
		top: 0;
		left: 0;
		width: 260px;
		max-width: 82vw;
		height: 100vh;
		height: 100dvh;
		z-index: 1000;
		transform: translateX(-100%);
		transition: transform 0.22s ease;
		box-shadow: 12px 0 32px rgba(0, 0, 0, 0.35);
	}

	html.sidebar-open .sidebar {
		transform: translateX(0);
	}

	.sidebar-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease;
	}

	html.sidebar-open .sidebar-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	html.sidebar-open {
		overflow: hidden;
	}

	main, .page-header {
		padding-left: 16px;
		padding-right: 16px;
	}

	.topbar {
		padding: 10px 16px;
	}

	/* The usage gauge and the username text are the least essential things
	   in the topbar-right cluster — worth dropping below a width where
	   hamburger + brand (topbar-left) and bell + theme + Log out
	   (topbar-right) would otherwise fight for the same ~350px. */
	.usage-gauge,
	.user-bar-name {
		display: none;
	}
}

/* ---------- Phone floor ---------- */

@media (max-width: 480px) {
	.watchlist-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.sidebar {
		gap: 8px;
		padding: 12px;
	}

	.page-header {
		padding: 16px;
	}

	.page-header h1 {
		font-size: 17px;
	}

	.panel {
		padding: 14px 16px;
	}

	.toolbar-actions {
		width: 100%;
		margin-left: 0;
		flex-wrap: wrap;
	}

	.toolbar-actions button {
		flex: 1 1 auto;
	}

	.modal-backdrop {
		padding: 12px;
	}

	.modal {
		padding: 16px;
	}
}

/* ---------- Global loading bar ----------
   Fixed to the top of the viewport, driven from apiFetch in common.js —
   fires automatically for every API call on every page. Trickles toward
   90% while a request is in flight, then snaps to 100% and fades out. */
#global-loading-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 9999;
	pointer-events: none;
	background: transparent;
}

.global-loading-bar-fill {
	height: 100%;
	width: 0%;
	opacity: 0;
	background: linear-gradient(90deg, var(--amber-dim), var(--amber) 55%, var(--amber-hover));
	box-shadow: 0 0 8px var(--amber), 0 0 3px var(--amber-hover);
}

/* ---------- Admin panel ---------- */

.admin-toolbar { align-items: center; gap: 20px; flex-wrap: wrap; }
.admin-stat { display: flex; flex-direction: column; line-height: 1.1; }
.admin-stat-value { font-size: 22px; font-weight: 600; font-family: var(--font-data); color: var(--amber); }
.admin-stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
.admin-toolbar-spacer { flex: 1 1 auto; }

.admin-table { min-width: 860px; }
.admin-table th, .admin-table td { vertical-align: middle; }
.admin-table th { white-space: nowrap; }
.admin-username { display: flex; align-items: center; gap: 8px; }
.admin-realname { font-size: 12px; margin-top: 2px; }
.admin-you-badge {
	font-family: var(--font-data); font-size: 9.5px; font-weight: 600; text-transform: uppercase;
	letter-spacing: .04em; color: var(--teal); background: var(--teal-dim);
	padding: 1px 6px; border-radius: 100px;
}

.admin-pill {
	display: inline-block; font-family: var(--font-data); font-size: 10.5px; font-weight: 600;
	letter-spacing: .03em; padding: 3px 9px; border-radius: 100px; white-space: nowrap;
}
.admin-pill.ok { background: var(--success-bg); color: var(--success); }
.admin-pill.off { background: var(--danger-bg); color: var(--danger); }
.admin-pill.admin { background: var(--amber-dim); color: var(--amber); }
.admin-pill.plain { background: var(--panel-raised); color: var(--muted); }

.admin-actions-col { white-space: nowrap; }
.admin-row-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.admin-action { font-size: 12.5px; }
.admin-action.danger-text { color: var(--danger); }
.admin-edit-section { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.admin-use-package { font-size: 12px; margin-top: 2px; align-self: flex-start; padding: 0; text-align: left; }
.admin-form-status { color: var(--danger); margin-top: 10px; min-height: 1em; }

/* ---------- Settings page ---------- */

.tab-bar {
	display: flex;
	gap: 4px;
	padding: 3px;
	background: var(--panel-raised);
	border-radius: var(--radius-sm);
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.tab-btn {
	position: relative; /* anchors .tab-btn-dot */
	appearance: none;
	-webkit-appearance: none;
	flex: 1 1 auto;
	padding: 9px 14px;
	border: none;
	border-radius: calc(var(--radius-sm) - 2px);
	background: transparent;
	color: var(--muted);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
}
.tab-btn:hover { color: var(--paper); }
.tab-btn.active { background: var(--amber); color: var(--panel); font-weight: 600; }
.tab-btn:disabled { cursor: default; opacity: 0.5; }

.settings-panel[hidden] { display: none; }

.settings-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	align-items: start;
}

/* Each column is its own vertical stack, so a short card (Your plan)
   never leaves a hole beside a tall one (Account details). */
.settings-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.field-pair-row {
	display: flex;
	gap: 14px;
}
.field-pair-row .field { flex: 1 1 0; min-width: 0; }

/* ---------- Niche Analysis ---------- */

.niche-back-link {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 12.5px;
}

.market-share-body {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

.market-share-donut {
	width: 130px;
	height: 130px;
	flex: 0 0 auto;
}

.market-share-legend {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 160px;
	min-width: 0;
}

.market-share-legend-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
}

.market-share-swatch {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	flex: 0 0 auto;
}

.market-share-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.market-share-pct {
	color: var(--muted);
	font-size: 12px;
}

/* ---------- My Store ---------- */

.my-store-setup-card {
	max-width: 440px;
	margin: 0 auto;
	text-align: center;
}

.my-store-setup-fields {
	text-align: left;
	margin-top: 16px;
}

.my-store-setup-fields button {
	margin-top: 4px;
	width: 100%;
}

.my-store-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.my-store-refresh-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.my-store-username {
	font-size: 18px;
	font-weight: 600;
	color: var(--paper);
}

.my-store-header-actions {
	display: flex;
	gap: 8px;
}

.my-store-listings-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.my-store-listings-search {
	max-width: 220px;
}

.my-store-competitor-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 2px;
	border-bottom: 1px solid var(--line-soft);
	font-size: 13px;
}

.my-store-competitor-row:last-of-type {
	border-bottom: none;
}

/* A small hand-drawn accent icon in front of a panel heading — this page's
   own convention (Sales trend / Rush day / Weekly best sellers / Your
   listings / My Competitors), not a shared icon system, since the rest of
   the app deliberately has none. Sized to sit on the heading's baseline. */
.panel-heading-icon {
	display: inline-flex;
	vertical-align: -3px;
	margin-right: 8px;
	color: var(--amber);
}

.rush-day-svg {
	width: 100%;
	height: 150px;
	display: block;
	overflow: visible;
}

.rush-day-bar {
	fill: var(--amber);
	opacity: 0.85;
}

.rush-day-value-label {
	font-family: var(--font-data);
	font-size: 11px;
	font-weight: 600;
	fill: var(--paper);
}

.rush-day-day-label {
	font-family: var(--font-data);
	font-size: 10px;
	fill: var(--muted);
}

@media (max-width: 900px) {
	.mi-grid { grid-template-columns: minmax(0, 1fr); }
	.settings-grid { grid-template-columns: minmax(0, 1fr); }
	#niche-detail-grid { grid-template-columns: minmax(0, 1fr); }
	.my-store-header-row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
	.field-pair-row { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------- Discover page ---------- */

.discover-seller-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	grid-template-areas: "name metric action" "sub metric action";
	gap: 0 12px;
	padding: 9px 6px;
	border-bottom: 1px solid var(--line-soft);
	align-items: center;
}
.discover-seller-row:last-child { border-bottom: none; }
.discover-seller-name { grid-area: name; font-weight: 600; font-size: 13.5px; color: var(--paper); }
.discover-seller-sub { grid-area: sub; font-size: 11.5px; }
.discover-seller-metric { grid-area: metric; color: var(--success); font-size: 13px; font-weight: 600; text-align: right; }
.discover-seller-action { grid-area: action; }

/* Submit Feedback page + the admin "User feedback" panel */
.feedback-form textarea { width: 100%; min-height: 200px; resize: vertical; }
.feedback-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.feedback-new-count {
	margin-left: 8px;
	font-size: 12px;
	font-weight: 500;
	color: var(--muted);
}
.feedback-card {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 12px 14px;
	margin-bottom: 10px;
}
.feedback-card.feedback-done { opacity: 0.7; }
.feedback-card-head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}
.feedback-from { font-weight: 600; }
.feedback-message { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.feedback-card-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
}

.ai-options { margin-top: 10px; }
.ai-options-list { display: flex; flex-direction: column; gap: 8px; }
.ai-option { border: 1px solid var(--border, #d0d0d0); border-radius: 8px; padding: 8px 10px; }
.ai-option-text { font-weight: 500; overflow-wrap: anywhere; }
.ai-option-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.ai-option-meta { font-size: 0.8rem; opacity: 0.75; }
.ai-option-meta.over-limit { color: #c0392b; opacity: 1; }
.ai-option-actions { display: flex; gap: 6px; }
.ai-options-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

/* ---------- Listing Templates ---------- */
.lt-steps { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 14px; padding: 0; }
.lt-steps li { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; padding: 6px 14px 6px 6px; border: 1px solid var(--border, #d0d0d0); border-radius: 999px; }
.lt-steps li span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent, #f5a03a); color: #111; font-size: .8rem; }
.lt-topbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.lt-grow { flex: 1 1 220px; }
.lt-section-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lt-section-head .title-builder-table-heading { margin: 0; }
.lt-jump-preview { font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--accent, #f5a03a); white-space: nowrap; }
.lt-jump-preview:hover { text-decoration: underline; }
.lt-starters { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.lt-starter { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; padding: 8px; background: transparent; color: inherit; border: 1px solid var(--border, #d0d0d0); border-radius: 10px; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.lt-starter:hover { border-color: var(--accent, #f5a03a); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.lt-thumb { position: relative; width: 100%; height: 130px; overflow: hidden; border-radius: 6px; background: #f2f2f2; margin-bottom: 6px; border: 1px solid rgba(128,128,128,.3); }
.lt-thumb iframe { position: absolute; top: 0; left: 0; width: 1040px; height: 720px; border: 0; transform: scale(.195); transform-origin: top left; pointer-events: none; background: #fff; }
.lt-design-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 8px; }
.lt-span2 { grid-column: span 2; } @media (max-width: 640px) { .lt-span2 { grid-column: auto; } }
.lt-palettes { display: flex; flex-wrap: wrap; gap: 8px; }
.lt-palette { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; background: transparent; color: inherit; border: 1px solid var(--border, #d0d0d0); border-radius: 999px; cursor: pointer; font-size: .85rem; }
.lt-palette:hover:not(:disabled) { border-color: var(--accent, #f5a03a); }
.lt-palette-sw { width: 38px; height: 18px; border-radius: 999px; border: 1px solid rgba(128,128,128,.4); }
.lt-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 10px; }
.lt-colors input[type=color], .lt-toolbar .lt-tool-color { width: 100%; height: 36px; padding: 2px; cursor: pointer; border-radius: 6px; }
.lt-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.lt-work .panel { margin-bottom: 0; }
.lt-preview-panel { position: sticky; top: 12px; }
@media (max-width: 1100px) { .lt-work { grid-template-columns: 1fr; } .lt-preview-panel { position: static; } }
.lt-seg { display: inline-flex; flex-wrap: wrap; }
.lt-seg button { border-radius: 0; margin: 0 0 0 -1px; background: transparent; color: inherit; border: 1px solid var(--border, #d0d0d0); padding: 6px 12px; font-size: .85rem; cursor: pointer; }
.lt-seg button:first-child { border-radius: 8px 0 0 8px; margin-left: 0; } .lt-seg button:last-child { border-radius: 0 8px 8px 0; }
.lt-seg button.active, .lt-tabs button.active { background: var(--accent, #f5a03a); color: #111; border-color: var(--accent, #f5a03a); font-weight: 600; }
.lt-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.lt-tabs button { background: transparent; color: inherit; border: 1px solid var(--border, #d0d0d0); border-radius: 8px; padding: 6px 14px; cursor: pointer; }
.lt-toolbar { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; padding: 6px; border: 1px solid var(--border, #d0d0d0); border-bottom: 0; border-radius: 10px 10px 0 0; background: rgba(128,128,128,.07); }
.lt-tool { min-width: 32px; height: 32px; padding: 0 8px; background: transparent; color: inherit; border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-size: .85rem; }
.lt-tool:hover { background: rgba(128,128,128,.18); }
.lt-tool.b { font-weight: 700; } .lt-tool.i { font-style: italic; } .lt-tool.u { text-decoration: underline; } .lt-tool.s { text-decoration: line-through; }
.lt-toolbar .lt-tool-color { width: 36px; height: 32px; }
.lt-sep { width: 1px; height: 20px; background: var(--border, #d0d0d0); margin: 0 5px; }
.lt-editor { position: relative; min-height: 420px; max-height: 720px; overflow: auto; padding: 18px; background: #fff; color: #1a1a1a; border: 1px solid var(--border, #d0d0d0); border-radius: 0 0 10px 10px; line-height: 1.6; }
.lt-editor img.lt-img-selected { outline: 2px solid var(--accent, #f5a03a); outline-offset: 1px; cursor: default; }
.lt-resize-handle { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--accent, #f5a03a); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.45); cursor: nwse-resize; z-index: 5; touch-action: none; }
.lt-editor h2 { font-size: 1.5rem; margin: 0 0 .6em; } .lt-editor h3 { font-size: 1.15rem; margin: 1em 0 .4em; }
.lt-editor img { max-width: 100%; }
.lt-editor table { border-collapse: collapse; } .lt-editor td, .lt-editor th { border: 1px solid #bbb; padding: 4px 8px; }
.lt-source { width: 100%; min-height: 420px; font-family: 'IBM Plex Mono', monospace; font-size: .8rem; }
.lt-preview-wrap { overflow: hidden; border: 1px solid var(--border, #d0d0d0); border-radius: 10px; background: #fff; }
.lt-preview-panel.lt-expanded { position: fixed; inset: 16px; z-index: 1000; display: flex; flex-direction: column; margin: 0; box-shadow: 0 0 0 100vmax rgba(0,0,0,.6); overflow: auto; }
.lt-preview-panel.lt-expanded .lt-preview-wrap { flex: 1; min-height: 0; }
body.lt-noscroll { overflow: hidden; }
.lt-preview-wrap iframe { border: 0; transform-origin: top left; background: #fff; }
.lt-compliance { margin-top: 10px; padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(230,150,20,.4); background: rgba(230,150,20,.08); font-size: .85rem; }
.lt-compliance:empty { display: none; }
.lt-compliance.lt-compliance-clean { border-color: rgba(46,158,91,.4); background: rgba(46,158,91,.08); }
.lt-compliance-head { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; align-items: baseline; font-weight: 600; }
.lt-compliance-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-weight: 400; }
.lt-copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.lt-guide { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 4px; }

.no-access { max-width: 560px; text-align: center; margin: 40px auto; }
.no-access h2 { margin-bottom: 4px; }
.button-link { display: inline-block; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border, #d0d0d0); text-decoration: none; color: inherit; }


/* ---------- Admin: tiles, package tiers, filters ---------- */
.admin-tiles { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-bottom: 16px; }
.admin-tiles-packages { display: contents; }
.admin-tiles .admin-toolbar-spacer { flex: 1 1 0; }
.admin-tiles > button { align-self: center; }
.admin-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; min-width: 104px; }
.admin-tile .admin-stat-value { font-size: 26px; }
.pkg-tile { border-top-width: 3px; }
.pkg-tile.tier-0 { border-top-color: var(--muted); } .pkg-tile.tier-0 .admin-stat-value { color: var(--muted); }
.pkg-tile.tier-1 { border-top-color: var(--teal); }  .pkg-tile.tier-1 .admin-stat-value { color: var(--teal); }
.pkg-tile.tier-2 { border-top-color: var(--amber); } .pkg-tile.tier-2 .admin-stat-value { color: var(--amber); }

.admin-action-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.admin-action-tile { cursor: pointer; text-align: left; font: inherit; color: inherit; }
.admin-action-tile:hover { border-color: var(--amber); }

.admin-recent-list { display: flex; flex-direction: column; margin-top: 4px; }
.admin-recent-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.admin-recent-row:last-child { border-bottom: none; }

.admin-section-head { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }

.prompt-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: var(--panel-raised); }
.prompt-card-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.prompt-card-head strong { margin-right: 8px; }
.prompt-card-head .hint { margin: 0; }
.prompt-textarea { width: 100%; font-family: var(--font-data); font-size: 12.5px; line-height: 1.5; resize: vertical; min-height: 220px; }
.prompt-card-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

/* Small dot on a tab-btn marking that prompt as customized — an "at a
   glance, which ones did I change" signal without opening each tab. */
.tab-btn-dot { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--amber); vertical-align: middle; }
.tab-btn.active .tab-btn-dot { background: var(--panel); }
.admin-section-head .title-builder-table-heading { margin: 0 0 4px; }
.admin-section-head .hint { margin: 0; max-width: 60ch; }
.admin-section-actions { display: flex; align-items: center; gap: 12px; }
.admin-search { min-width: 260px; }
.admin-empty { text-align: center; padding: 22px 0; }

.pkg-badge { display: inline-block; font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 4px 12px; border-radius: 100px; border: 1px solid transparent; white-space: nowrap; }
.pkg-badge.tier-0, .pkg-badge.tier-none { background: var(--panel-raised); color: var(--muted); border-color: var(--line); }
.pkg-badge.tier-1 { background: var(--teal-dim); color: var(--teal); }
.pkg-badge.tier-2 { background: var(--amber-dim); color: var(--amber); }
.pkg-badge.tier-admin { background: var(--panel-raised); color: var(--paper); border-color: var(--line); }
select.pkg-badge { appearance: auto; cursor: pointer; padding-right: 6px; }

.admin-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.admin-chip { font-size: 12.5px; font-weight: 600; padding: 5px 14px; border-radius: 100px; background: transparent; color: var(--muted); border: 1px solid var(--line); cursor: pointer; }
.admin-chip:hover { border-color: var(--amber-line); color: var(--paper); }
.admin-chip.active { background: var(--amber-dim); color: var(--amber); border-color: var(--amber-line); }

.admin-users-table tbody tr:hover { background: var(--panel-raised); }

.packages-grid { min-width: 620px; border-collapse: separate; border-spacing: 0; }
.packages-grid th, .packages-grid td { text-align: center; vertical-align: middle; padding: 10px 14px; }
.packages-grid .pkg-feature-col { text-align: left; font-weight: 600; }
.packages-grid tbody tr + tr td { border-top: 1px solid var(--line); }
.packages-grid .pkg-head { border-top: 4px solid var(--muted); background: var(--panel-raised); border-radius: 10px 10px 0 0; min-width: 150px; }
.packages-grid .pkg-head.tier-1 { border-top-color: var(--teal); }
.packages-grid .pkg-head.tier-2 { border-top-color: var(--amber); }
.packages-grid .pkg-name { width: 100%; text-align: center; font-weight: 700; font-size: 15px; background: transparent; border-color: transparent; }
.packages-grid .pkg-name:hover, .packages-grid .pkg-name:focus { border-color: var(--line); background: var(--panel); }
.pkg-meta { margin-top: 4px; font-size: 11.5px; color: var(--muted); font-weight: 500; }

.pkg-switch { appearance: none; -webkit-appearance: none; width: 40px; height: 22px; border-radius: 100px; background: var(--panel-raised-hover); border: 1px solid var(--line); position: relative; cursor: pointer; transition: background .15s; vertical-align: middle; }
.pkg-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: transform .15s; }
.pkg-switch:checked { background: var(--success); border-color: var(--success); }
.pkg-switch:checked::after { transform: translateX(18px); }
.pkg-switch:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Plan pill in the topbar + the Settings "Your plan" card */
.user-bar-plan { text-decoration: none; padding: 2px 10px; font-size: 10.5px; margin: 0 2px; }
a.user-bar-plan:hover { filter: brightness(1.08); }
.plan-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.plan-head .pkg-badge { font-size: 13px; padding: 5px 16px; }
.plan-list { margin-top: 10px; }
.plan-list-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.plan-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.plan-list + .plan-list, .plan-list > .plan-list-title { margin-top: 18px; }
.plan-yes, .plan-no { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.plan-yes li, .plan-no li { font-size: 13.5px; padding: 8px 12px 8px 34px; position: relative; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.plan-yes li::before, .plan-no li::before { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-weight: 700; }
.plan-yes li::before { content: "✓"; color: var(--success); }
.plan-no li { color: var(--muted); background: var(--panel-raised); }
.plan-no li::before { content: "🔒"; font-size: 11px; }

.limit-tag { margin-left: 6px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 100px; }
.limit-tag.custom { background: var(--amber-dim); color: var(--amber); }
.pkg-limit { width: 92px; text-align: center; font-family: var(--font-data); font-weight: 600; }
.pkg-limit-row td { background: var(--panel-raised); border-bottom: 2px solid var(--line); }
.upgrade-arrow { color: var(--muted); }
.upgrade-msg { max-width: 340px; overflow-wrap: anywhere; }

.upgrade-card { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); text-align: left; }
.upgrade-card .field { margin-bottom: 8px; }
.upgrade-card select, .upgrade-card textarea { width: 100%; }
.upgrade-actions { display: flex; align-items: center; gap: 12px; }
.upgrade-state { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); margin-bottom: 10px; }
.upgrade-state.pending { background: var(--amber-dim); border-color: var(--amber-line); }
.upgrade-state.rejected { background: var(--danger-bg); border-color: transparent; }
.plan-limit { font-weight: 600; margin: 0 0 8px; }
.no-access-upgrade { max-width: 420px; margin: 0 auto; }

.limits-cell .limit-line { white-space: nowrap; line-height: 1.5; font-size: 12.5px; }
.plan-list .plan-meters, .plan-meters { list-style: none; margin: 0 0 6px; padding: 14px 16px; display: grid; gap: 16px; background: var(--panel-raised); border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; }
.plan-meter-row { display: flex; align-items: baseline; gap: 8px; }
.plan-meter-label { color: var(--muted); }
.plan-meter-value { margin-left: auto; font-family: var(--font-data); font-weight: 700; }
.plan-meter-row .limit-tag { margin-left: 0; align-self: center; }
.plan-bar { height: 6px; margin-top: 7px; border-radius: 100px; background: var(--line); overflow: hidden; }
.plan-bar-fill { display: block; height: 100%; border-radius: 100px; background: var(--teal, #2a9d8f); min-width: 3px; transition: width .3s; }
.plan-bar-fill.high { background: var(--amber); }
.plan-bar-fill.full { background: var(--danger, #c0392b); }
.pkg-limit-row .pkg-limit { width: 92px; }

.ai-option.has-warning { border-color: var(--amber-line); }
.ai-option-warning { margin-top: 4px; font-size: 12px; color: var(--amber); }

/* ---------- Listing Templates extras: menus, image library, header, products ---------- */
.lt-menu { position: relative; display: inline-block; }
.lt-menu-btn { font-weight: 600; }
.lt-menu-list { position: absolute; z-index: 30; top: 100%; left: 0; min-width: 260px; max-height: 340px; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.28); padding: 6px; }
.lt-menu-heading { padding: 4px 10px 6px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.lt-menu-item { display: block; width: 100%; text-align: left; background: transparent; color: var(--paper); border: 0; border-radius: 6px; padding: 7px 10px; font-size: 13.5px; cursor: pointer; }
.lt-menu-item:hover { background: var(--panel-raised); }
.lt-modal-wide { width: min(760px, 94vw); }
.lt-picker-row { display: flex; gap: 8px; margin-bottom: 12px; }
.lt-picker-row input { flex: 1; }
.lt-drop { display: grid; gap: 4px; place-items: center; text-align: center; padding: 22px 12px; border: 2px dashed var(--line); border-radius: 12px; cursor: pointer; margin-bottom: 12px; }
.lt-drop:hover, .lt-drop.over { border-color: var(--amber); background: var(--amber-dim); }
.lt-public-note { font-size: 12.5px; color: var(--amber); background: var(--amber-dim); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.lt-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 10px; max-height: 300px; overflow: auto; }
.lt-tile { position: relative; aspect-ratio: 1; border: 2px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--panel-raised); }
.lt-tile.selected { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-dim); }
.lt-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lt-tile-del { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; min-height: 0; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85); background: rgba(20,20,24,.72); color: #fff; font-size: 16px; font-weight: 400; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, transform .12s; }
.lt-tile:hover .lt-tile-del, .lt-tile-del:focus-visible { opacity: 1; }
.lt-tile-del:hover { background: #d33a3a; border-color: #fff; transform: scale(1.08); }
@media (hover: none) { .lt-tile-del { opacity: 1; } }
.lt-header-extras { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.lt-inline { display: flex; gap: 8px; } .lt-inline input { flex: 1; min-width: 0; }
.lt-field-msg { font-size: 12px; line-height: 1.4; margin-top: 4px; }
.lt-field-msg:empty { display: none; }
.lt-nav-row .lt-field-msg { grid-column: 1 / -1; margin-top: -2px; }
.lt-msg-error { color: #c0392b; }
.lt-msg-warn { color: #9a6700; }
.lt-msg-note { color: var(--muted); }
.lt-nav-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 8px; margin-bottom: 8px; }
.lt-product-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }
.lt-product-row label { font-size: 12.5px; font-weight: 600; }
.lt-product-row select { flex: 1 1 200px; min-width: 0; }
.lt-bulk-list { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; }
.lt-bulk-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13.5px; }
.lt-bulk-row:last-child { border-bottom: 0; }
.lt-bulk-all { border: 0; padding-left: 2px; }

/* ---------- Public site shell (free tool pages) ----------
   The free public pages (/ebay-fee-calculator/, /ebay-seasonal-calendar/)
   reuse this stylesheet so the embedded tool looks exactly like it does
   in the app, but swap the sidebar for a marketing-style header/footer
   matching the home page. Everything here is site-* prefixed so none of it
   can leak into the app's own pages. */

/* Logged-in vs logged-out content — site.js adds .is-authed to <html>
   once /api/me confirms a session; until then the logged-out set shows. */
html.is-authed [data-auth="out"] { display: none !important; }
html:not(.is-authed) [data-auth="in"] { display: none !important; }

body.site { font-size: 14.5px; }

.site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: color-mix(in srgb, var(--ink) 90%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.site-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

.site-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 64px;
}

.site-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--paper);
}

.site-brand .brand-name { font-size: 17px; }

.site-nav {
	display: flex;
	align-items: center;
	gap: 22px;
	font-weight: 500;
}

.site-nav a {
	color: var(--muted);
	text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
	color: var(--paper);
}

.site-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.site-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 14px;
	border-radius: var(--radius);
	padding: 9px 16px;
	border: 1px solid transparent;
	text-decoration: none;
	white-space: nowrap;
}

.site-btn-primary { background: var(--amber); color: #fff8f0; }
.site-btn-primary:hover { background: var(--amber-hover); }
.site-btn-ghost { border-color: var(--line); color: var(--paper); }
.site-btn-ghost:hover { background: var(--panel-raised); }

@media (max-width: 860px) {
	.site-nav { display: none; }
}

@media (max-width: 420px) {
	.site-actions .site-btn-ghost { display: none; }
}

.site-main {
	max-width: 1180px;
	padding: 20px 20px 48px;
}

.site-crumbs {
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 6px;
}

.site-crumbs a { color: var(--muted); text-decoration: none; }
.site-crumbs a:hover { color: var(--paper); text-decoration: underline; }

.site-page-header {
	padding: 4px 0 18px;
}

.site-page-header h1 {
	font-family: var(--font-display);
	font-size: clamp(26px, 3.4vw, 36px);
	letter-spacing: -0.015em;
	line-height: 1.12;
	margin: 0;
}

.site-page-header p {
	color: var(--muted);
	font-size: 16px;
	max-width: 70ch;
	margin: 10px 0 0;
}

.site-free-pill {
	display: inline-block;
	font-family: var(--font-data);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--teal);
	background: var(--teal-dim);
	border-radius: 100px;
	padding: 3px 10px;
	margin-bottom: 10px;
}

.site-prose {
	max-width: 780px;
	margin: 48px auto 0;
	font-size: 15px;
	line-height: 1.65;
}

.site-prose h2 {
	font-family: var(--font-display);
	font-size: 22px;
	letter-spacing: -0.01em;
	margin: 36px 0 10px;
}

.site-prose h3 {
	font-size: 16px;
	margin: 22px 0 6px;
}

.site-prose p,
.site-prose ul,
.site-prose ol { margin: 0 0 12px; }

.site-prose li { margin-bottom: 6px; }

.site-prose .muted { color: var(--muted); }

.site-table {
	width: 100%;
	border-collapse: collapse;
	margin: 8px 0 16px;
	font-size: 14px;
}

.site-table th,
.site-table td {
	text-align: left;
	padding: 9px 10px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

.site-table th { font-weight: 600; color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; }

.site-table-wrap { overflow-x: auto; }

.site-faq details {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel);
	padding: 0 16px;
	margin-bottom: 8px;
}

.site-faq summary {
	cursor: pointer;
	font-weight: 600;
	padding: 14px 0;
}

.site-faq details > p { color: var(--muted); padding-bottom: 14px; margin: 0; }

.site-cta {
	margin: 44px auto 0;
	max-width: 780px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-top: 3px solid var(--amber);
	border-radius: var(--radius);
	padding: 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}

.site-cta h2 {
	font-family: var(--font-display);
	font-size: 20px;
	margin: 0 0 4px;
}

.site-cta p { color: var(--muted); margin: 0; }

.site-related {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin-top: 12px;
}

.site-related a {
	display: block;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel);
	padding: 14px 16px;
	color: var(--paper);
	text-decoration: none;
}

.site-related a:hover { border-color: var(--muted-dim); }
.site-related a strong { display: block; margin-bottom: 3px; }
.site-related a span { color: var(--muted); font-size: 13.5px; }

.site-footer {
	border-top: 1px solid var(--line);
	padding: 28px 0 40px;
	margin-top: 40px;
	color: var(--muted);
	font-size: 13.5px;
}

.site-footer-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--paper); }
.site-footer-note { margin-top: 14px; font-size: 12.5px; color: var(--muted-dim); }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 100;
	background: var(--panel);
	padding: 8px 14px;
	border-radius: var(--radius);
}

.skip-link:focus { left: 8px; }

/* Legal and contact pages (/terms/, /privacy/, /refunds/, /contact/). */
.site-legal { margin-top: 8px; }
/* Line the heading up with the narrower text column on these pages. */
.site-main:has(.site-legal) .site-crumbs,
.site-main:has(.site-legal) .site-page-header {
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}
.site-legal h2 { font-size: 19px; }

.site-contact-card {
	background: var(--panel);
	border: 1px solid var(--line);
	border-top: 3px solid var(--amber);
	border-radius: var(--radius);
	padding: 22px 24px;
	margin-bottom: 8px;
}

.site-contact-label {
	font-family: var(--font-data);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 4px;
}

.site-contact-email { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 6px; }
.site-contact-email a { color: var(--paper); text-decoration: none; }
.site-contact-email a:hover { text-decoration: underline; }

.site-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 14px;
	font-size: 12.5px;
}

/* Free-trial countdown in the top bar (initUserBar in common.js). */
.trial-badge {
	font-family: var(--font-data);
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--amber);
	background: var(--amber-dim);
	border: 1px solid var(--amber-line);
	border-radius: 100px;
	padding: 3px 10px;
	text-decoration: none;
}

.trial-badge:hover { border-color: var(--amber); }

/* Trial-ended page (trial-ended.html). */
.trial-ended-main { max-width: 460px; }
.trial-ended-title { font-family: var(--font-display); font-size: 21px; line-height: 1.25; margin: 0 0 10px; }
.trial-ended-lede { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.trial-plans { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.trial-plans li { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; font-size: 14px; }
.trial-plans li span { font-family: var(--font-data); color: var(--muted); }
.trial-plans li.featured { border-color: var(--teal); box-shadow: inset 3px 0 0 var(--teal); }
.trial-ended-cta { display: block; text-align: center; margin-bottom: 10px; background: var(--amber); border-color: var(--amber); color: #fff8f0; font-weight: 600; padding: 11px 16px; }
.trial-ended-cta:hover { background: var(--amber-hover); }
.trial-ended-free { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: 13.5px; }
.trial-ended-free .hint { margin: 0; width: 100%; }

/* Admin Accounts: free-trial / access window under the status pill. */
.admin-access { font-size: 11.5px; color: var(--amber); margin-top: 4px; white-space: nowrap; }
.admin-access.expired { color: var(--danger); }

.signup-trial-note { margin: -6px 0 14px; }

/* Paddle checkout card in Settings (billing.js). */
.billing-test-badge { font-size: 12px; font-weight: 600; color: var(--amber); background: var(--amber-dim); border: 1px solid var(--amber-line); border-radius: var(--radius); padding: 6px 10px; margin-bottom: 12px; }
.billing-toggle { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 100px; margin: 4px 0 12px; }
.billing-opt { font: inherit; font-size: 13px; font-weight: 600; border: 0; background: none; color: var(--muted); border-radius: 100px; padding: 6px 14px; cursor: pointer; }
.billing-opt[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.billing-plans { display: grid; gap: 8px; margin-bottom: 10px; }
.billing-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.billing-plan b { display: block; }
.billing-price { font-family: var(--font-data); font-size: 12.5px; color: var(--muted); }
.billing-sub-line { font-weight: 600; margin: 4px 0; }
.billing-status { min-height: 1em; }

/* Admin > Payments */
.pay-test-note { font-size: 12px; font-weight: 600; color: var(--amber); background: var(--amber-dim); border: 1px solid var(--amber-line); border-radius: var(--radius); padding: 6px 10px; margin-bottom: 12px; }
.pay-periods { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.pay-period { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-raised); padding: 12px 14px; min-width: 0; }
.pay-period.is-today { border-color: var(--success-line); background: var(--success-bg); }
.pay-period-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pay-period-net { font-size: 22px; font-weight: 600; margin: 4px 0 2px; overflow-wrap: anywhere; }
.pay-period-sub { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.pay-subs { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 4px 2px 8px; }
.pay-new-badge { display: inline-block; font-size: 11px; font-weight: 700; color: var(--success); background: var(--success-bg); border: 1px solid var(--success-line); border-radius: 999px; padding: 0 7px; margin-right: 6px; }
.pay-row-refund td { color: var(--danger); }
.admin-action-tile.has-new { border-color: var(--success-line); background: var(--success-bg); }

/* Theme toggle on the login / signup / trial-ended screens (no topbar). */
.auth-theme-toggle {
	position: fixed;
	top: max(14px, env(safe-area-inset-top, 0px));
	right: 16px;
}