/* Banner rotator */
.banner-rotator {
	position: relative;
	overflow: hidden;
}
.banner-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
	pointer-events: none;
}
.banner-slide.active {
	position: relative;
	opacity: 1;
	pointer-events: auto;
}

/* Feature announcement banner */
.feature-banner {
	background: linear-gradient(135deg, #eff6ff 0%, #ede9fe 100%);
	border-bottom: 1px solid #c7d2fe;
	padding: 12px 20px;
	font-size: 14px;
	color: #1e3a5f;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	text-align: center;
}
.feature-banner strong { color: #4f46e5; }
.feature-banner-close {
	background: none; border: none; font-size: 20px; color: var(--text-muted);
	cursor: pointer; padding: 0 4px; line-height: 1;
}
.feature-banner-close:hover { color: var(--text); }

/* Toggle switch on form cards */
.toggle-switch {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
	flex-shrink: 0;
}
.toggle-track {
	width: 40px;
	height: 22px;
	border-radius: 11px;
	background: var(--gray-300);
	position: relative;
	transition: background 0.2s;
}
.toggle-track.on {
	background: var(--primary);
}
.toggle-track::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--bg-surface);
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	transition: transform 0.2s;
}
.toggle-track.on::after {
	transform: translateX(18px);
}
.toggle-label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.toggle-label.on { color: var(--primary); }
.toggle-label.off { color: var(--text-faint); }

/* Dashboard page styles */
.dash-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
}
.dash-header h1 { font-size: 28px; }
.form-card {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 20px;
	box-shadow: var(--shadow);
	transition: box-shadow 0.15s;
}
.form-card:hover { box-shadow: var(--shadow-md); }
.form-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 12px;
}
.form-card h3 {
	font-size: 18px;
	color: var(--text);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.ai-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 10px;
	line-height: 1.5;
	white-space: nowrap;
}
.ai-badge-claude {
	background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
	color: #fff;
}
.ai-badge-chatgpt {
	background: linear-gradient(135deg, #10a37f 0%, #1fbd96 100%);
	color: #fff;
}
.form-card-meta {
	font-size: 13px;
	color: var(--text-faint);
	margin-top: 4px;
}
.form-card-stats {
	display: flex;
	gap: 16px;
	margin: 12px 0;
	font-size: 13px;
	color: var(--text-muted);
}
.form-card-stats strong { color: var(--text); }
.form-card-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--gray-100);
}
.form-link-row {
	display: flex;
	align-items: center;
	gap: 6px;
}
.form-link {
	font-size: 12px;
	color: var(--primary);
	word-break: break-all;
	text-decoration: none;
}
.form-link:hover { text-decoration: underline; }
.btn-copy-link {
	background: var(--bg-hover);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 2px 6px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	flex-shrink: 0;
}
.btn-copy-link:hover { background: var(--gray-200); }
.dash-toolbar {
	display: flex;
	gap: 10px;
	margin-bottom: 16px;
}
.empty-state {
	text-align: center;
	padding: 60px 24px;
	color: var(--text-faint);
}
.empty-state .icon { font-size: 48px; margin-bottom: 16px; }
.empty-state h2 { color: var(--text-muted); margin-bottom: 8px; }
.empty-state p { margin-bottom: 24px; }
/* New form modal */
.modal-overlay {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.5);
	z-index: 200;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.modal-overlay.active { display: flex; }
/* Lock the page behind the modal so touch / wheel scrolls land in the modal,
   not in the dashboard underneath. Reported on mobile — saved-template list
   wouldn't scroll inside the modal, the page behind it scrolled instead. */
body.modal-open { overflow: hidden; }
/* Hide the floating "Need Help?" Telegram bubble when any modal is open so it
   doesn't overlap the modal's action buttons on mobile. */
.modal-overlay.active ~ #chatWidget,
body:has(.modal-overlay.active) #chatWidget { display: none; }
.modal {
	background: var(--bg-surface);
	border-radius: var(--radius-lg);
	padding: 32px;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 48px);
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-lg);
	overflow: hidden; /* contain scroll to the inner form */
}
.modal h2 { font-size: 20px; margin-bottom: 20px; flex-shrink: 0; }
/* The form is the scroll container. Action row inside it sticks to the bottom. */
.modal > form {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
}
.modal > form > div:last-child {
	position: sticky;
	bottom: 0;
	background: var(--bg-surface);
	padding-top: 16px;
	margin-top: 16px;
	border-top: 1px solid var(--border);
	z-index: 1;
}

/* Widget dashboard */
.dash-header-actions { display: flex; gap: 10px; }
/* Pin every button in the header actions row to the same visual size — the
   four buttons (Build with AI / + New Form / Community / Widgets) come from
   different button classes (btn-ai-shortcut, btn-primary, btn-telegram,
   btn-secondary) with their own padding, font sizes, and heights, so without
   this rule they render as visibly different rectangles. Same height (38px),
   same horizontal padding (16px), same font size (13px), same min-width
   (110px) so short labels still look balanced next to longer ones. */
.dash-header-actions > .btn,
.dash-header-actions > .ai-shortcut-wrap > .btn {
	height: 38px;
	min-width: 110px;
	padding: 0 16px;
	font-size: 13px;
	font-weight: 600;
	box-sizing: border-box;
	white-space: nowrap;
}
.dash-header-actions > .ai-shortcut-wrap { display: inline-flex; }
.btn-widgets { gap: 6px; }
.widget-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 20px;
}
.widget-card {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	transition: box-shadow 0.15s, opacity 0.15s;
	overflow: hidden;
}
.widget-card:hover { box-shadow: var(--shadow-md); }
.widget-card[data-widget="forms"],
.widget-card[data-widget="shipping_queue"],
.widget-card[data-widget="low_stock"],
.widget-card[data-widget="order_status"],
.widget-card[data-widget="top_products"],
.widget-card[data-widget="coupon_usage"],
.widget-card[data-widget="revenue_by_form"],
.widget-card[data-widget="product_breakdown"] {
	grid-column: 1 / -1;
}
.widget-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--gray-100);
	cursor: grab;
	user-select: none;
}
.widget-header:active { cursor: grabbing; }
.widget-drag-handle {
	color: var(--gray-300);
	font-size: 14px;
	line-height: 1;
	flex-shrink: 0;
}
.widget-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	flex: 1;
}
.widget-collapse-btn {
	background: none;
	border: none;
	color: var(--text-faint);
	cursor: pointer;
	font-size: 12px;
	padding: 4px;
	border-radius: 4px;
	transition: color 0.15s;
}
.widget-collapse-btn:hover { color: var(--text-muted); }
.widget-body { padding: 16px; }
.widget-card.collapsed .widget-body { display: none; }
.widget-card.collapsed .widget-collapse-btn { transform: rotate(180deg); }

/* Metric widgets */
.widget-metric {
	font-size: 32px;
	font-weight: 700;
	color: var(--text);
	line-height: 1.1;
}
.widget-metric-sub {
	font-size: 13px;
	color: var(--text-faint);
	margin-top: 6px;
}
.widget-metric-up { color: #22c55e; }
.widget-metric-down { color: #ef4444; }
.widget-metric-arrow { font-size: 12px; margin-right: 2px; }
.widget-metric-link {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--primary);
	text-decoration: none;
}
.widget-metric-link:hover { text-decoration: underline; }

/* Widget table (shipping queue, low stock) */
.widget-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.widget-table th {
	text-align: left;
	padding: 6px 8px;
	border-bottom: 1px solid var(--border);
	color: var(--text-muted);
	font-weight: 500;
	font-size: 12px;
}
.widget-table td {
	padding: 8px;
	border-bottom: 1px solid var(--gray-50);
	color: var(--text);
}
.widget-table .num { text-align: right; }
.stock-zero { color: #ef4444; font-weight: 600; }
.stock-low { color: #f59e0b; font-weight: 500; }

/* Weekly/Monthly revenue grid */
.widget-rev-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.widget-rev-block {
	text-align: center;
	padding: 8px;
}
.widget-rev-label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-faint);
	margin-bottom: 4px;
}
.widget-rev-value {
	font-size: 26px;
	font-weight: 700;
	color: var(--text);
	line-height: 1.2;
}
.widget-rev-sub {
	font-size: 12px;
	color: var(--text-faint);
	margin-top: 2px;
}

/* Order status bar */
.status-bar {
	display: flex;
	height: 24px;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 12px;
}
.status-bar-seg {
	min-width: 4px;
	transition: width 0.3s;
}
.status-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
}
.status-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--text-muted);
}
.status-legend-item strong {
	color: var(--text);
}
.status-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Coupon code badge */
.coupon-code {
	font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
	font-size: 12px;
	background: var(--info-bg);
	color: var(--primary);
	padding: 2px 8px;
	border-radius: 4px;
	font-weight: 600;
	white-space: nowrap;
}

/* Revenue by form bars */
.rev-by-form-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.rev-by-form-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.rev-by-form-label {
	width: 160px;
	flex-shrink: 0;
	overflow: hidden;
}
.rev-by-form-name {
	font-size: 13px;
	font-weight: 500;
	color: var(--text);
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rev-by-form-meta {
	font-size: 11px;
	color: var(--text-faint);
}
.rev-by-form-bar-wrap {
	flex: 1;
	height: 20px;
	background: var(--bg-hover);
	border-radius: 4px;
	overflow: hidden;
}
.rev-by-form-bar {
	height: 100%;
	background: linear-gradient(90deg, var(--primary), #818cf8);
	border-radius: 4px;
	transition: width 0.3s;
}
.rev-by-form-amount {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	width: 80px;
	text-align: right;
	flex-shrink: 0;
}

/* Drag and drop */
.widget-card.dragging { opacity: 0.4; }
.widget-card.drag-over-top { border-top: 3px solid var(--primary); }
.widget-card.drag-over-bottom { border-bottom: 3px solid var(--primary); }

/* Settings panel */
.widget-settings {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: var(--shadow);
}
.widget-settings h3 {
	font-size: 16px;
	margin-bottom: 12px;
	color: var(--text);
}
.widget-toggle-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}
.widget-toggle-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--text-muted);
}
.widget-toggle-row input[type="checkbox"] { accent-color: var(--primary); }
.widget-settings-actions {
	display: flex;
	gap: 10px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--gray-100);
}

/* Widget request card */
.widget-request-card {
	background: var(--bg-surface);
	border: 1px dashed var(--gray-300);
	border-radius: var(--radius-lg);
	padding: 24px;
	margin-top: 24px;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	box-shadow: var(--shadow);
}
.widget-request-card.hidden { display: none !important; }
.wr-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--info-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.wr-content {
	flex-shrink: 0;
	max-width: 220px;
}
.wr-content h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 4px;
}
.wr-content p {
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.5;
	margin: 0;
}
.wr-form {
	flex: 1;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	flex-wrap: wrap;
}
.wr-form input[type="email"] {
	width: 200px;
	flex-shrink: 0;
}
.wr-form textarea {
	flex: 1;
	min-width: 200px;
	min-height: 44px;
}
@media (max-width: 768px) {
	.widget-request-card {
		flex-direction: column;
		gap: 12px;
	}
	.wr-content { max-width: none; }
	.wr-form {
		flex-direction: column;
		width: 100%;
	}
	.wr-form input[type="email"],
	.wr-form textarea { width: 100%; }
}

/* Empty widget state */
.widget-empty {
	text-align: center;
	padding: 20px;
	color: var(--text-faint);
	font-size: 13px;
}

/* Forms widget internals */
.forms-widget-toolbar {
	display: flex;
	gap: 10px;
	margin-bottom: 12px;
}
.forms-widget-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 16px;
}

/* =====================================================================
 * My Forms — refined card grid (Direction A from design handoff)
 *
 * Visual hierarchy inversion: stats lead, status toggle becomes a quiet
 * chip, primary action is the only loud button. URL becomes a single
 * ellipsed line with inline icon controls. Long lists of secondary
 * actions move into a ⋯ menu on each card.
 * ===================================================================== */

/* Toolbar: search + filter chips + sort dropdown */
.myf-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 12px 0 14px;
	margin: 0 0 14px;
	border-bottom: 1px solid var(--border);
}
.myf-search {
	position: relative;
	flex: 1 1 220px;
	max-width: 340px;
	min-width: 180px;
}
.myf-search svg {
	position: absolute;
	left: 10px; top: 50%;
	transform: translateY(-50%);
	color: var(--text-faint);
	pointer-events: none;
}
.myf-search input {
	width: 100%;
	padding: 8px 12px 8px 30px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg-surface);
	color: var(--text);
	font-size: 13px;
	font-family: inherit;
	transition: border-color .15s, box-shadow .15s;
}
.myf-search input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-light);
}

.myf-chips {
	display: inline-flex;
	gap: 4px;
	padding: 3px;
	background: var(--bg-surface-2);
	border: 1px solid var(--border);
	border-radius: 999px;
}
.myf-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: none;
	background: transparent;
	color: var(--text-muted);
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s, box-shadow .15s;
}
.myf-chip:hover { color: var(--text); }
.myf-chip.on {
	background: var(--bg-surface);
	color: var(--text);
	box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.myf-chip-count {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	font-weight: 600;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--bg-surface-2);
	color: var(--text-muted);
	border: 1px solid var(--border);
	min-width: 22px;
	text-align: center;
}
.myf-chip.on .myf-chip-count {
	background: var(--primary-light);
	color: var(--primary);
	border-color: transparent;
}

.myf-sort {
	margin-left: auto;
	padding: 8px 30px 8px 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") right 10px center / 10px no-repeat;
	color: var(--text);
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.myf-sort:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-light);
}

@media (max-width: 540px) {
	.myf-search { max-width: 100%; flex-basis: 100%; }
	.myf-sort { margin-left: 0; }
	.myf-chips { flex-wrap: wrap; }
}

/* Card grid — per design spec: 2-column at ≥980px, collapses to 1-column below */
.myf-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	padding: 0;
}
@media (max-width: 980px) { .myf-grid { grid-template-columns: 1fr; } }

/* Card */
.myf-card {
	position: relative;
	z-index: 1;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 18px 18px 14px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: border-color .15s, box-shadow .15s;
}
/* When the per-card "More actions" popup is open, lift the card above its
   siblings so the menu doesn't get painted under the next form card in DOM
   order (every card has z-index:1, document-order tie-break otherwise wins). */
.myf-card:has(.myf-menu.open) { z-index: 100; }
.myf-card:hover {
	border-color: var(--border-strong);
	box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 6px 16px -4px rgba(15,23,42,.08);
}
.myf-card.is-inactive { opacity: .85; }

/* Status rail (left edge) */
.myf-rail {
	position: absolute;
	left: -1px; top: 14px; bottom: 14px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--text-faint);
	opacity: .4;
}
.myf-card.rail-earning .myf-rail { background: var(--success); opacity: 1; }
.myf-card.rail-live .myf-rail { background: var(--primary); opacity: .85; }
.myf-card.rail-inactive .myf-rail { background: var(--text-faint); opacity: .35; }

/* Card head: title + status chip */
.myf-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.myf-title-wrap { flex: 1 1 auto; min-width: 0; }
/* Per-card collapse chevron — pinned to the top-right corner of the card
   via `position: absolute` so it never consumes flex width in the head row
   and never wraps to its own line on narrow viewports (the head has
   `flex-wrap: wrap` under 540px to let title and status-stack stack, which
   was forcing the chevron onto a third row before this fix). The card
   already has `position: relative`, so this just anchors. Padding on the
   head's right side keeps the title and active-toggle from sliding under
   the absolute chevron. */
.myf-collapse-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	background: none; border: none; cursor: pointer; padding: 4px;
	color: var(--text-faint);
	border-radius: 4px;
	transition: color 0.15s, background 0.15s;
}
.myf-card-head { padding-right: 30px; }
.myf-collapse-btn:hover { color: var(--text-muted); background: var(--bg-hover); }
.myf-card.is-collapsed .myf-stats-panel,
.myf-card.is-collapsed .myf-empty-nudge,
.myf-card.is-collapsed .myf-url-strip {
	display: none !important;
}
/* Tighten the head→actions gap when nothing sits between them so a collapsed
   card reads as a single dense row pair, not two disconnected pieces. */
.myf-card.is-collapsed .myf-card-head { margin-bottom: 8px; }
/* Drop the top border on the actions row when collapsed — without the
   stats panel + url strip between it and the head, the border is a visual
   line orphaned in space. */
.myf-card.is-collapsed .myf-actions { border-top: none; padding-top: 6px; }
/* Mobile: the global `.myf-actions-spacer { flex-basis: 100% }` rule under
   the 768px media query forces a wrap that pushes the ⋯ kebab onto its
   own row, leaving a tall empty band when the card is collapsed. Override
   the spacer when collapsed so the entire actions row tries to fit on one
   line. Remaining wrap (if Edit/View are still too wide) is natural and
   tight, not forced. */
.myf-card.is-collapsed .myf-actions-spacer {
	flex-basis: auto !important;
	height: auto !important;
	flex: 0 1 auto !important;
}
.myf-title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 4px;
	color: var(--text);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.myf-meta {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	color: var(--text-faint);
}
.myf-status-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--bg-surface-2);
	border: 1px solid var(--border);
	color: var(--text-muted);
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
	flex-shrink: 0;
}
.myf-status-chip:hover { border-color: var(--border-strong); color: var(--text); }
.myf-status-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--text-faint);
}
.myf-status-chip.success {
	background: rgba(16,185,129,.10);
	border-color: rgba(16,185,129,.35);
	color: var(--success);
}
.myf-status-chip.success .myf-status-dot { background: var(--success); }
.myf-status-chip.live {
	background: var(--primary-light);
	border-color: transparent;
	color: var(--primary);
}
.myf-status-chip.live .myf-status-dot { background: var(--primary); }

/* Stats panel — the new visual anchor */
.myf-stats-panel {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	border: 1px solid var(--border);
	background: var(--bg-surface-2);
	border-radius: 10px;
	overflow: hidden;
}
.myf-stat-cell {
	padding: 12px 14px;
	border-right: 1px solid var(--border);
}
.myf-stat-cell:last-child { border-right: none; }
.myf-stat-num {
	font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.015em;
	color: var(--text);
}
.myf-stat-cell.faint .myf-stat-num { color: var(--text-faint); }
.myf-stat-cell.good .myf-stat-num { color: var(--success); }
.myf-stat-lbl {
	margin-top: 6px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--text-muted);
}

/* Empty-state nudge — replaces stats panel for brand-new forms */
.myf-empty-nudge {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px;
	border: 1px dashed var(--border-strong);
	border-radius: 10px;
	background: var(--bg-surface-2);
	font-size: 13px;
	color: var(--text-muted);
}
.myf-empty-nudge strong { color: var(--text); }
.myf-empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--primary-light);
	color: var(--primary);
	font-weight: 700;
	font-style: italic;
	flex-shrink: 0;
	font-family: 'Fraunces', Georgia, serif;
}

/* URL strip */
.myf-url-strip {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.myf-url-ico { color: var(--text-faint); flex-shrink: 0; }
.myf-url {
	flex: 1 1 auto;
	min-width: 0;
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	color: var(--primary);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.myf-url:hover { text-decoration: underline; }

/* Compact icon button */
.myf-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	background: transparent;
	border: none;
	border-radius: 6px;
	color: var(--text-muted);
	cursor: pointer;
	flex-shrink: 0;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.myf-icon-btn:hover { background: var(--bg-hover); color: var(--text); }

/* Actions row */
.myf-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--border);
}
.myf-actions-spacer { flex: 1 1 auto; }
.myf-btn-primary {
	display: inline-flex;
	align-items: center;
	background: var(--primary);
	color: var(--primary-fg);
	font-size: 12.5px;
	font-weight: 600;
	padding: 7px 13px;
	border-radius: 7px;
	border: 1px solid var(--primary);
	text-decoration: none;
	cursor: pointer;
	transition: background .15s;
}
.myf-btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-fg); }
.myf-btn-secondary {
	display: inline-flex;
	align-items: center;
	background: transparent;
	color: var(--text);
	font-size: 12.5px;
	font-weight: 600;
	padding: 6px 12px;
	border: 1px solid var(--border);
	border-radius: 7px;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.myf-btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); }

/* More menu */
.myf-more-wrap { position: relative; }
.myf-menu {
	display: none;
	position: absolute;
	/* Anchor to the trigger's RIGHT edge so the popup grows LEFTWARD into the
	 * card body — the ⋯ button now lives in the lower-right of the card
	 * (`.myf-actions` row, last child after the spacer + sheet button), so
	 * growing left keeps the popup inside the card and off the next card. */
	right: 0; left: auto; bottom: calc(100% + 6px);
	min-width: 180px;
	max-width: calc(100vw - 24px);
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 6px;
	box-shadow: 0 8px 24px -8px rgba(15,23,42,.18), 0 1px 3px rgba(15,23,42,.06);
	z-index: 50;
}
.myf-menu.open { display: block; }
.myf-menu a, .myf-menu button {
	display: block;
	width: 100%;
	background: transparent;
	border: none;
	color: var(--text);
	text-align: left;
	font-size: 13px;
	font-weight: 500;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
}
.myf-menu a:hover, .myf-menu button:hover { background: var(--bg-hover); }
.myf-menu .danger { color: var(--danger); }
.myf-menu .danger:hover { background: rgba(239,68,68,.08); color: var(--danger); }
.myf-menu-divider {
	height: 1px;
	background: var(--border);
	margin: 4px 2px;
}

@media (max-width: 640px) {
	.widget-grid { grid-template-columns: 1fr; }
	.forms-widget-grid { grid-template-columns: 1fr; }
	.widget-metric { font-size: 26px; }
	.dash-header { flex-direction: column; align-items: flex-start; gap: 12px; }
	/* On phone widths the four header buttons (Build with AI / + New Form /
	   Community / Widgets) don't fit on a single row at a readable tap size,
	   so stack them 2 over 2 in a CSS grid. Each cell stretches its button
	   to fill so the four cards line up flush. */
	.dash-header-actions {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	.dash-header-actions > .btn,
	.dash-header-actions > .ai-shortcut-wrap,
	.dash-header-actions > .ai-shortcut-wrap > .btn {
		width: 100%;
		min-width: 0;
	}
	.widget-toggle-list { flex-direction: column; }
}

/* First-run empty state (F-02) */
.first-run-empty {
	max-width: 760px;
	margin: 24px auto 0;
}
.first-run-head {
	text-align: center;
	margin-bottom: 28px;
}
.first-run-head h2 {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--gray-800, #1f2937);
}
.first-run-head p {
	color: var(--text-muted);
	margin: 0;
	font-size: 15px;
}
.first-run-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.first-run-card {
	display: block;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 24px 22px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.first-run-card:hover {
	border-color: var(--primary);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(79,70,229,0.10);
}
.first-run-card-primary {
	background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
	border-color: #c7d2fe;
}
.first-run-icon {
	font-size: 28px;
	margin-bottom: 10px;
	line-height: 1;
}
.first-run-card h3 {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--gray-800, #1f2937);
}
.first-run-card p {
	font-size: 14px;
	color: var(--gray-600, #4b5563);
	margin: 0 0 12px;
	line-height: 1.5;
}
.first-run-cta {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: var(--primary);
}
.first-run-card-primary .first-run-cta {
	background: var(--primary);
	color: white;
	padding: 6px 12px;
	border-radius: 6px;
}
.first-run-whatsnew {
	margin-top: 36px;
	padding: 24px 24px 22px;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: 14px;
}
.whatsnew-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px dashed var(--border);
}
.whatsnew-head h3 {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	color: var(--gray-800, #1f2937);
}
.whatsnew-sub {
	font-size: 13px;
	color: var(--text-muted);
}
.whatsnew-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
.whatsnew-item {
	padding: 14px 16px;
	background: var(--gray-50, #f9fafb);
	border: 1px solid var(--border);
	border-radius: 10px;
}
.wn-icon {
	font-size: 22px;
	margin-bottom: 6px;
	line-height: 1;
}
.wn-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--gray-800, #1f2937);
	margin-bottom: 4px;
}
.wn-desc {
	font-size: 13px;
	color: var(--gray-600, #4b5563);
	line-height: 1.5;
}
@media (max-width: 640px) {
	.whatsnew-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.first-run-grid { grid-template-columns: 1fr; }
}

/* F-07: Build with AI shortcut button */
.btn-ai-shortcut {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: linear-gradient(135deg, #4f46e5, #7c3aed);
	color: white;
	font-size: 13px;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: opacity 0.15s, transform 0.15s;
	box-shadow: 0 1px 3px rgba(79,70,229,0.3);
}
.btn-ai-shortcut:hover { opacity: 0.93; transform: translateY(-1px); }

/* Telegram community pill in the dashboard header actions row */
.btn-telegram {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: transparent;
	color: #27A6E5;
	font-size: 13px;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	border: 1px solid rgba(39, 166, 229, 0.4);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-telegram:hover {
	background: #27A6E5;
	border-color: #27A6E5;
	color: white;
	text-decoration: none;
}

.ai-shortcut-wrap { position: relative; display: inline-block; }
.ai-shortcut-menu { min-width: 260px; padding: 8px; }
.ai-shortcut-item {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px !important;
	text-decoration: none;
	color: var(--gray-800, #1f2937);
}
.ai-shortcut-item .ai-shortcut-icon { font-size: 20px; line-height: 1.2; flex-shrink: 0; }
.ai-shortcut-item .ai-shortcut-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.ai-shortcut-item .ai-shortcut-text strong { font-size: 14px; font-weight: 600; }
.ai-shortcut-item .ai-shortcut-text span { font-size: 12px; color: var(--text-muted); }
.ai-shortcut-item:hover .ai-shortcut-text strong { color: var(--primary); }

/* F-15: Dashboard kebab menu */
.dash-menu-wrap { position: relative; display: inline-block; }
.btn-icon {
	width: 38px;
	padding: 0 10px !important;
	font-size: 18px;
	line-height: 1;
}
.dash-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 200px;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(15,23,42,0.12);
	padding: 6px;
	z-index: 50;
}
.dash-menu.hidden { display: none; }
.dash-menu-item {
	display: block;
	width: 100%;
	padding: 9px 12px;
	font-size: 14px;
	color: var(--gray-800, #1f2937);
	background: transparent;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	text-align: left;
}
.dash-menu-item:hover { background: var(--bg-surface-2); color: var(--primary); }

/* F-30: Template tiles */
.template-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.template-tile {
	padding: 14px 14px;
	background: var(--bg-surface);
	border: 2px solid var(--gray-200);
	border-radius: 10px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.template-tile:hover { border-color: var(--border-strong); background: var(--bg-surface-2); }
.template-tile.selected {
	border-color: var(--primary);
	background: var(--primary-light, #eef2ff);
}
.template-tile { position: relative; }
.template-tile .tt-icon { font-size: 20px; margin-bottom: 6px; line-height: 1; }
.template-tile .tt-title { font-size: 14px; font-weight: 700; color: var(--gray-800, #1f2937); margin-bottom: 2px; }
.template-tile .tt-sub { font-size: 12px; color: var(--text-muted); }
.template-tile.selected .tt-title { color: var(--primary); }
/* Inline delete control on user-saved template tiles. */
.template-tile .tt-delete {
	position: absolute;
	top: 6px; right: 6px;
	width: 22px; height: 22px;
	padding: 0; line-height: 1;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: 50%;
	color: var(--text-muted);
	font-size: 16px; font-weight: 700;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.template-tile .tt-delete:hover {
	background: var(--danger, #dc2626);
	border-color: var(--danger, #dc2626);
	color: #fff;
}
@media (max-width: 480px) {
	.template-tiles { grid-template-columns: 1fr; }
}

/* ===== Incoming Form Transfer banner ===== */
.incoming-transfers-bar {
	display: flex; gap: 16px; align-items: flex-start;
	margin-bottom: 20px; padding: 16px 20px;
	background: linear-gradient(135deg, #fef3c7 0%, #ddd6fe 100%);
	border: 2px solid #fcd34d;
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.itb-icon {
	flex: 0 0 44px; height: 44px;
	background: var(--bg-surface); color: #f59e0b;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.itb-content { flex: 1; min-width: 0; }
.itb-title {
	font-size: 15px; font-weight: 700; color: #92400e;
	margin-bottom: 10px;
}
.itb-list { display: flex; flex-direction: column; gap: 8px; }
.itb-item {
	display: flex; gap: 12px; align-items: center;
	padding: 10px 12px;
	background: rgba(255,255,255,0.7);
	border-radius: 8px;
}
.itb-meta { flex: 1; min-width: 0; font-size: 13px; color: var(--text); }
.itb-message {
	font-size: 12px; color: var(--text-muted);
	font-style: italic; margin-top: 4px;
	max-width: 480px;
}
.itb-actions { display: flex; gap: 6px; flex-shrink: 0; }

@media (max-width: 600px) {
	.incoming-transfers-bar { flex-direction: column; }
	.itb-item { flex-direction: column; align-items: flex-start; }
	.itb-actions { align-self: stretch; }
	.itb-actions .btn { flex: 1; }
}

/* =====================================================================
 * My Forms — view toggle, stats picker, Direction B list
 * ===================================================================== */

/* Toolbar view toggle (A/B) */
.myf-view-toggle {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: var(--bg-surface-2);
	border: 1px solid var(--border);
	border-radius: 8px;
}
.myf-view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 26px;
	background: transparent;
	border: none;
	color: var(--text-muted);
	border-radius: 6px;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.myf-view-btn:hover { color: var(--text); }
.myf-view-btn.on { background: var(--bg-surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* Stats picker bar */
.myf-stats-picker {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 12px;
	margin: -6px 0 14px;
	background: var(--bg-surface-2);
	border: 1px solid var(--border);
	border-radius: 8px;
	font-size: 12px;
}
.myf-spbar-label {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--text-faint);
	margin-right: 4px;
}
.myf-spchip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 4px 3px 8px;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: 6px;
	color: var(--text);
	font-size: 12px;
	font-weight: 500;
}
.myf-spchip-grip {
	color: var(--text-faint);
	font-size: 12px;
	cursor: grab;
	user-select: none;
}
.myf-spchip-x {
	background: transparent;
	border: none;
	color: var(--text-faint);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
	border-radius: 3px;
}
.myf-spchip-x:hover { background: var(--bg-hover); color: var(--text); }
.myf-spchip-add {
	background: transparent;
	border: 1px dashed var(--border-strong);
	color: var(--text-muted);
	cursor: pointer;
	padding: 3px 10px;
	border-radius: 6px;
	font-weight: 500;
}
.myf-spchip-add:hover:not(.disabled) { color: var(--text); border-color: var(--text-faint); }
.myf-spchip-add.disabled { opacity: .5; cursor: not-allowed; }
.myf-sp-reset {
	margin-left: auto;
	background: transparent;
	border: none;
	color: var(--text-muted);
	font-size: 12px;
	cursor: pointer;
	text-decoration: underline;
}
.myf-sp-reset:hover { color: var(--text); }

/* Stats popover */
.myf-sppop-wrap { position: relative; display: inline-block; }
.myf-sppop {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 200px;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 6px;
	box-shadow: 0 8px 24px -8px rgba(15,23,42,.18);
	z-index: 60;
}
.myf-sppop.open { display: block; }
.myf-sppop-item {
	display: block;
	width: 100%;
	background: transparent;
	border: none;
	color: var(--text);
	text-align: left;
	font-size: 13px;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	font-family: inherit;
}
.myf-sppop-item:hover { background: var(--bg-hover); }
.myf-sppop-item.selected { background: var(--primary-light); color: var(--primary); }
.myf-sppop-empty { padding: 8px 10px; font-size: 12px; color: var(--text-faint); }
.myf-sppop-hdr {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--text-faint);
	padding: 4px 10px 6px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 4px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.myf-sppop-clear {
	background: transparent;
	border: none;
	color: var(--primary);
	font-size: 10px;
	font-weight: 600;
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
}

/* Per-card stats gear (Direction A only) */
.myf-card-stats-wrap { position: relative; }
.myf-card-gear {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 24px; height: 24px;
	background: transparent;
	border: none;
	color: var(--text-faint);
	border-radius: 6px;
	cursor: pointer;
	opacity: .35;
	transition: opacity .15s, background .15s, color .15s;
}
.myf-card:hover .myf-card-gear { opacity: 1; }
.myf-card-gear:hover { background: var(--bg-hover); color: var(--text); }
/* Cards with a per-card stats override get a fuller-opacity, primary-colored
 * gear so it's obvious at a glance that this card has its own stat picks */
.myf-card-stats-wrap.has-override .myf-card-gear { opacity: .85; color: var(--primary); }
.myf-card-stats-pop {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 4px;
	min-width: 200px;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 6px;
	box-shadow: 0 8px 24px -8px rgba(15,23,42,.18);
	z-index: 60;
}
.myf-card-stats-pop.open { display: block; }

/* Direction B — dense list */
.myf-list { padding: 0; }
.myf-list-grouphdr {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin: 14px 6px 6px;
}
.myf-list-grouphdr:first-child { margin-top: 4px; }
.myf-list-rule {
	flex: 1;
	height: 1px;
	background: var(--border);
}

.myf-row {
	display: grid;
	/* Title shrinks to fit; stats column gets the lion's share so 4–5 cells
	 * don't crush together; sparkline + actions are right-sized fixed. */
	grid-template-columns: 14px minmax(220px, 1.4fr) minmax(0, 2.2fr) 200px 110px;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid transparent;
	border-radius: 10px;
	transition: background .15s, border-color .15s;
}
.myf-row + .myf-row { border-top: 1px solid var(--border); border-radius: 0; }
.myf-row:hover {
	background: var(--bg-surface-2);
	border-color: var(--border);
	border-radius: 10px;
}
.myf-row:hover + .myf-row { border-top-color: transparent; }

.myf-row-led {
	width: 10px; height: 10px;
	border-radius: 50%;
	border: none;
	background: var(--text-faint);
	cursor: pointer;
	padding: 0;
	transition: box-shadow .15s, background .15s;
}
.myf-row-led.led-earning {
	background: var(--success);
	box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}
.myf-row-led.led-live {
	background: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-light);
}
.myf-row-led.led-off { background: var(--text-faint); opacity: .5; }

.myf-row-title-col { min-width: 0; overflow: hidden; }
.myf-row-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.myf-row-sub {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	color: var(--text-faint);
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	min-width: 0;
}
.myf-row-sub .myf-url {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.myf-row-copy {
	background: transparent;
	border: none;
	color: var(--text-faint);
	font-size: 12px;
	cursor: pointer;
	padding: 0 2px;
	border-radius: 3px;
}
.myf-row-copy:hover { color: var(--text); }
.myf-row-dot { color: var(--border-strong); }

.myf-row-stats {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	min-width: 0;
}
.myf-row-stat-num {
	font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.015em;
	color: var(--text);
}
.myf-row-stat.faint .myf-row-stat-num { color: var(--text-faint); }
.myf-row-stat.good .myf-row-stat-num { color: var(--success); }
.myf-row-stat-lbl {
	margin-top: 4px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--text-muted);
}

/* Sparkline */
.myf-row-spark {
	color: var(--primary);
	min-width: 0;
}
.myf-row-spark.spark-earning { color: var(--success); }
.myf-sparkline {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.myf-sparkline.empty {
	font-size: 11px;
	color: var(--text-faint);
	font-style: italic;
}
.myf-spark-svg {
	width: 100%;
	height: 32px;
	display: block;
}
.myf-spark-lbl {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10px;
	color: var(--text-faint);
}
.myf-row-spark.spark-earning .myf-spark-lbl { color: var(--success); }

/* Row actions */
.myf-row-actions {
	display: flex;
	gap: 4px;
	justify-content: flex-end;
	opacity: .55;
	transition: opacity .15s;
}
.myf-row:hover .myf-row-actions { opacity: 1; }
.myf-icon-btn.primary {
	background: var(--primary);
	color: var(--primary-fg);
}
.myf-icon-btn.primary:hover { background: var(--primary-hover); color: var(--primary-fg); }

/* Direction B responsive collapse */
@media (max-width: 1080px) {
	.myf-row { grid-template-columns: 14px minmax(200px, 1fr) minmax(0, 1.8fr) 140px; }
	.myf-row-spark { display: none; }
}
@media (max-width: 840px) {
	.myf-row { grid-template-columns: 14px 1fr 160px; }
	.myf-row-stats { grid-template-columns: 1fr 1fr; }
	.myf-row-stats > .myf-row-stat:nth-child(3) { display: none; }
}
@media (max-width: 540px) {
	.myf-row { grid-template-columns: 10px 1fr auto; gap: 10px; }
	.myf-row-stats, .myf-row-spark { display: none; }
	.myf-row-actions { gap: 2px; }
	.myf-row-actions > a, .myf-row-actions > .myf-more-wrap > button { width: 28px; height: 28px; }
}

/* =====================================================================
 * My Forms — fixes for v2: full-bleed body, prominent view toggle,
 * tighter visual hierarchy. The original padding made the toolbar feel
 * cramped and let the view toggle disappear when wrapping.
 * ===================================================================== */

/* Let the My Forms widget use the full widget-card width — the inner
 * sections handle their own padding now. */
.widget-card[data-widget="forms"] .widget-body {
	padding: 0;
}

/* Toolbar: sticky-feeling top bar, never wraps the view toggle off-screen.
 * The toggle is locked to the right; sort + chips can wrap below if narrow. */
.myf-toolbar {
	display: grid;
	grid-template-columns: minmax(180px, 320px) 1fr auto auto;
	gap: 12px;
	align-items: center;
	padding: 14px 18px;
	margin: 0;
	border-bottom: 1px solid var(--border);
	background: var(--bg-surface);
}
.myf-toolbar .myf-search { max-width: none; flex: none; }
.myf-toolbar .myf-chips { justify-self: start; }
.myf-toolbar .myf-sort { margin-left: 0; }
.myf-toolbar .myf-view-toggle { justify-self: end; }

/* Make the view toggle clearly affordant — it's the headline interaction */
.myf-view-toggle {
	border-color: var(--border-strong);
}
.myf-view-btn {
	width: 32px; height: 30px;
}
.myf-view-btn.on {
	background: var(--primary-light);
	color: var(--primary);
	box-shadow: none;
}

/* Stats picker — sits inside the widget body, no longer floating in margin */
.myf-stats-picker {
	margin: 0;
	padding: 10px 18px;
	border: none;
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	background: var(--bg-surface-2);
}

/* Card grid + dense list — full widget width.
 * Grid stays 2-column per design spec (collapses to 1-column at <980px). */
.myf-grid {
	padding: 18px;
	gap: 16px;
}
.myf-list {
	padding: 8px 12px;
}

/* Toolbar collapse: under 900px the grid layout would crush the view toggle
 * off-screen. Switch to a flex-column where each control gets a full row,
 * EXCEPT the sort dropdown + view toggle which share a single row at the
 * bottom — sort takes the available width, view toggle docks at the right.
 * Saves a row vs the previous "view toggle alone on its own line" layout. */
@media (max-width: 900px) {
	.myf-toolbar {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"search   search"
			"chips    chips"
			"sort     view";
		align-items: center;
		gap: 10px;
	}
	.myf-search { grid-area: search; max-width: none; width: 100%; }
	.myf-chips { grid-area: chips; }
	.myf-toolbar .myf-sort { grid-area: sort; width: 100%; margin-left: 0; }
	.myf-toolbar .myf-view-toggle { grid-area: view; }
}
/* Phone widths: drop the chip-group pill container entirely (its 999px
 * border-radius bulges weirdly when 4 chips wrap to 2 rows) and re-style
 * each chip as its own self-contained pill. Lay the chips out in a 2x2
 * grid so they line up flush instead of wrapping at unpredictable widths.
 * Also tighten font + padding so the strip doesn't dominate the widget. */
@media (max-width: 540px) {
	.myf-chips {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
		padding: 0;
		background: none;
		border: none;
		border-radius: 0;
	}
	.myf-chip {
		justify-content: space-between;
		padding: 7px 12px;
		font-size: 12px;
		background: var(--bg-surface);
		border: 1px solid var(--border);
		border-radius: 8px;
	}
	.myf-chip.on {
		background: var(--primary-light);
		color: var(--primary);
		border-color: var(--primary);
		box-shadow: none;
	}
}
@media (max-width: 540px) {
	.myf-toolbar { padding: 12px; }
	.myf-stats-picker { padding: 10px 12px; }
	.myf-grid { padding: 12px; }
	/* Hard-cap the card to its container width so long URLs / fonts can't
	 * push it past the viewport on phones. Reduce inner padding too so the
	 * three stat cells fit without being cropped. */
	.myf-card { padding: 14px 12px; max-width: 100%; box-sizing: border-box; min-width: 0; }
	.myf-stats-panel { min-width: 0; }
	.myf-stat-cell { padding: 10px 8px; min-width: 0; overflow: hidden; }
	.myf-stat-num { font-size: 20px; }
	.myf-stat-lbl { font-size: 9px; }
	/* Stats picker chips wrap to multiple lines on phones — ensure
	 * the "Reset" link drops to a new line instead of being squished. */
	.myf-stats-picker { flex-wrap: wrap; gap: 6px 8px; }
	.myf-sp-reset { margin-left: 0; }
	/* Card head can wrap — title and status stack on top of each other
	 * if the title is long. */
	.myf-card-head { flex-wrap: wrap; }
	.myf-status-stack { align-self: flex-start; }
	/* URL strip: hide the open-in-new-tab + QR icons on phones — the URL
	 * itself is already a tap target, copy is enough secondary action. */
	.myf-url-strip > a.myf-icon-btn[target="_blank"],
	.myf-url-strip > button.myf-icon-btn:last-of-type {
		display: none;
	}
	/* Card actions wrap: primary + secondary on first row, sheet + ⋯ menu
	 * stay inline. Without wrap, "View orders →" overflows. */
	.myf-actions { flex-wrap: wrap; }
	.myf-actions-spacer { flex-basis: 100%; height: 0; }
	/* Push the wrapped row 2 (sheet btn + ⋯ menu) to the right edge of the card so
	 * the kebab popup — anchored `right: 0` to its wrap — opens leftward into the
	 * card body instead of off the left edge of the screen. */
	.myf-actions > .myf-actions-spacer + * { margin-left: auto; }
}

/* Stats popover: optional "Replaces X" hint when at the 3-stat cap */
.myf-sppop-hint {
	display: block;
	font-size: 11px;
	color: var(--text-faint);
	margin-top: 2px;
	font-weight: 400;
}

/* Status stack — chip + toggle switch on a single row to the right of the
   title, with the chevron sitting beside them. Originally stacked vertically
   ("status stack" name is now legacy); switched to a horizontal row to
   shrink the vertical footprint of every card so the collapsed view is
   genuinely compact and the expanded view doesn't waste space on a tall
   right rail. */
.myf-status-stack {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.myf-status-stack .toggle-switch {
	flex-direction: row-reverse;
	gap: 6px;
}
.myf-status-stack .toggle-label { font-size: 10px; }
.myf-status-stack .toggle-track {
	width: 32px;
	height: 18px;
	border-radius: 9px;
}
.myf-status-stack .toggle-track::after {
	width: 12px;
	height: 12px;
}
.myf-status-stack .toggle-track.on::after {
	transform: translateX(14px);
}

/* View toggle: labeled Cards / List buttons */
.myf-view-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	padding: 5px 10px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}
.myf-view-btn span {
	display: inline-block;
}
@media (max-width: 540px) {
	.myf-view-btn span { display: none; }
	.myf-view-btn { padding: 5px 8px; }
}

/* Stats chip drag-drop affordances. Drop indicator is an insertion line
 * (pseudo-element) drawn between chips, not a ring around the target. */
.myf-spchip {
	cursor: grab;
	user-select: none;
	position: relative;
}
.myf-spchip.dragging { opacity: .4; }
.myf-spchip-grip { cursor: grab; }
.myf-spchip:active { cursor: grabbing; }

.myf-spchip::before,
.myf-spchip::after {
	content: '';
	position: absolute;
	top: 2px;
	bottom: 2px;
	width: 3px;
	border-radius: 2px;
	background: var(--primary);
	opacity: 0;
	pointer-events: none;
	transition: opacity .08s linear;
	box-shadow: 0 0 0 2px var(--primary-light);
}
.myf-spchip::before { left: -6px; }
.myf-spchip::after { right: -6px; }
.myf-spchip.drop-before::before { opacity: 1; }
.myf-spchip.drop-after::after { opacity: 1; }

/* Dashboard uses the full viewport — the global .container caps at 1100px,
 * which leaves huge gutters on wide monitors. The dashboard's widget grid
 * is built to spread, so override the cap and just keep a small page margin. */
.container.container-wide {
	max-width: 1800px;
	padding-left: 32px;
	padding-right: 32px;
}
@media (max-width: 720px) {
	.container.container-wide { padding-left: 16px; padding-right: 16px; }
}

/* Stats grids auto-fit: cells reflow based on available width. With a
 * minimum of 130px per cell, 5 stats fit on a wide panel and gracefully
 * wrap to 2 rows on narrow ones. Min-content prevents text overflow. */
.myf-stats-panel {
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.myf-row-stats {
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
/* When wrapping, divider lines between cells get awkward — drop them */
.myf-stats-panel .myf-stat-cell { border-right: 1px solid var(--border); }
.myf-stats-panel .myf-stat-cell:last-child { border-right: none; }

/* Dense list stats — each cell gets a comfortable min-width so 4–5 stats
 * don't visually collide on wide rows. Override the earlier 1080px rule
 * that was forcing 2-cell layout across the board. */
.myf-row-stats {
	gap: 16px;
}
.myf-row-stat {
	min-width: 0;
	overflow: hidden;
}
.myf-row-stat-num {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.myf-row-stat-lbl {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* On touch devices, the grip stays visible — touch-drag handlers below
 * give it real reorder behavior. touch-action:none on the grip prevents
 * the browser from intercepting the gesture for scrolling. */
.myf-spchip-grip {
	touch-action: none;
	padding: 0 2px;
}

/* Dense list LED: bump the tap area on phones (visual dot stays the same) */
@media (max-width: 540px) {
	.myf-row-led {
		box-sizing: content-box;
		padding: 11px;
		margin: -11px;
		width: 10px; height: 10px;
	}
	/* Add a "More options" alternative to the LED for clarity — nothing to do
	 * here, just documenting that the LED still toggles is_active on tap. */

	/* Card actions: spread primary + secondary across the full row */
	.myf-btn-primary, .myf-btn-secondary { flex: 1 1 calc(50% - 4px); justify-content: center; }
	/* Row title can wrap to multiple lines if long */
	.myf-row-title { white-space: normal; }
}

/* Card on phones — give the title room before status chip wraps below */
@media (max-width: 480px) {
	.myf-card { padding: 14px; }
	.myf-title { font-size: 16px; }
	.myf-stat-num { font-size: 22px; }
}

/* =====================================================================
 * Reviews widget — dashboard tile
 * ===================================================================== */
.widget-card[data-widget="reviews"] {
	grid-column: 1 / -1;
}
.reviews-widget { display: grid; gap: 16px; }
.reviews-widget-hero {
	display: flex; align-items: center; gap: 18px;
	padding: 16px 18px;
	background: linear-gradient(135deg, var(--bg-surface-2) 0%, rgba(245,158,11,0.08) 100%);
	border-radius: 12px;
	border: 1px solid var(--border);
}
.reviews-widget-num {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 56px; line-height: 1;
	font-weight: 600; letter-spacing: -.03em;
	color: var(--text);
}
.reviews-widget-stars { color: #f59e0b; font-size: 18px; letter-spacing: 3px; }
.reviews-widget-count { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.reviews-widget-recent { display: flex; flex-direction: column; gap: 8px; }
.reviews-widget-recent-row {
	display: grid;
	grid-template-columns: 90px 130px 1fr;
	gap: 12px;
	align-items: center;
	padding: 8px 12px;
	background: var(--bg-surface-2);
	border-radius: 8px;
	font-size: 13px;
}
.reviews-widget-recent-stars { color: #f59e0b; letter-spacing: 1px; font-size: 12px; }
.reviews-widget-recent-author { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reviews-widget-recent-snippet { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.reviews-widget-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.reviews-widget-empty {
	text-align: center; padding: 28px 20px;
	background: linear-gradient(135deg, var(--bg-surface-2) 0%, rgba(245,158,11,0.08) 100%);
	border: 1px dashed var(--border-strong);
	border-radius: 12px;
}
.reviews-widget-empty-stars {
	color: #f59e0b; font-size: 32px; letter-spacing: 6px; opacity: .55;
	margin-bottom: 8px;
}
.reviews-widget-empty h3 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 20px; margin-bottom: 6px; color: var(--text);
}
.reviews-widget-empty p { color: var(--text-muted); font-size: 13px; max-width: 480px; margin: 0 auto 14px; line-height: 1.5; }

@media (max-width: 700px) {
	.reviews-widget-recent-row { grid-template-columns: 1fr; gap: 4px; }
	.reviews-widget-num { font-size: 44px; }
}

/* ============== Product Breakdown widget ============== */
/* Full-width per-form chart of product / variant performance. Toolbar at top
   (form picker + 4 toggle groups), then chart body (bar list or pie+legend),
   then optional Show all / Show top 10 expand button. Reuses the existing
   widget-empty / widget-card chrome from sibling widgets. */
.pb-toolbar {
	display: flex; flex-direction: column; gap: 10px;
	padding: 0 16px 12px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 12px;
}
.pb-toolbar-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pb-form-picker {
	flex: 1; min-width: 220px; max-width: 480px;
	padding: 8px 10px;
	font-size: 14px; font-weight: 500;
	border: 1px solid var(--border); border-radius: var(--radius);
	background: var(--bg-surface); color: var(--text);
}
.pb-toggles { gap: 14px; }
.pb-toggle-group { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pb-toggle-label { font-size: 12px; color: var(--text-muted); margin-right: 4px; }
.pb-toggle-btn {
	padding: 4px 10px; font-size: 12px; font-weight: 500;
	border: 1px solid var(--border); border-radius: var(--radius);
	background: var(--bg-surface); color: var(--text-muted);
	cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pb-toggle-btn:hover { color: var(--text); border-color: var(--gray-300); }
.pb-toggle-btn.active {
	background: var(--primary); color: #fff; border-color: var(--primary);
}
.pb-body { padding: 0 16px 16px; }
.pb-totals {
	display: flex; flex-wrap: wrap; gap: 18px;
	padding: 10px 12px; margin-bottom: 14px;
	background: var(--bg-surface-2); border: 1px solid var(--border);
	border-radius: var(--radius); font-size: 13px; color: var(--text-muted);
}
.pb-totals strong { color: var(--text); font-weight: 700; margin-right: 2px; }

/* Bar list — one row per product/variant. Label on left, bar in middle,
   metric value + secondary metric on right. Mirrors the rev-by-form widget. */
.pb-bar-list { display: flex; flex-direction: column; gap: 8px; }
.pb-bar-row {
	display: grid;
	grid-template-columns: minmax(180px, 1fr) minmax(120px, 2fr) minmax(140px, 0.8fr);
	gap: 10px; align-items: center;
}
.pb-bar-label {
	font-size: 13px; font-weight: 500; color: var(--text);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pb-bar-other .pb-bar-label { color: var(--text-muted); font-style: italic; }
.pb-bar-wrap {
	background: var(--gray-100); border-radius: 999px; height: 18px; overflow: hidden;
}
.pb-bar {
	background: linear-gradient(90deg, var(--primary), #8b5cf6);
	height: 100%; transition: width 0.3s ease;
}
.pb-bar-other .pb-bar { background: var(--gray-300); }
.pb-bar-value {
	font-size: 13px; color: var(--text); text-align: right;
	display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.pb-bar-pct { color: var(--text-muted); font-size: 12px; margin-left: 4px; }
.pb-bar-other-metric { color: var(--text-faint); font-size: 11px; }

/* Pie chart — SVG circle on the left, scrollable legend on the right. On
   narrow screens the legend wraps below the SVG. */
.pb-pie-wrap {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 24px; align-items: start;
}
.pb-pie-svg { display: block; max-width: 100%; height: auto; }
.pb-pie-legend { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.pb-pie-legend-row {
	display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center;
	font-size: 13px;
}
.pb-pie-swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.pb-pie-label { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-pie-value strong { color: var(--text); font-weight: 700; margin-right: 2px; }

.pb-expand-btn {
	display: block; width: 100%; margin-top: 12px;
	padding: 8px; font-size: 13px; font-weight: 500;
	background: var(--bg-surface-2); color: var(--text-muted);
	border: 1px dashed var(--border); border-radius: var(--radius);
	cursor: pointer;
}
.pb-expand-btn:hover { color: var(--text); border-color: var(--gray-300); }

@media (max-width: 760px) {
	.pb-bar-row { grid-template-columns: 1fr; gap: 4px; }
	.pb-bar-wrap { height: 14px; }
	.pb-bar-value { flex-direction: row; gap: 6px; align-items: center; justify-content: flex-start; }
	.pb-pie-wrap { grid-template-columns: 1fr; }
	.pb-pie-svg { margin: 0 auto; }
	.pb-toggles { gap: 10px; }
	.pb-toggle-group { width: 100%; }
}