/* =====================================================================
   SMM Panel Pro — storefront UI (modern, high-contrast, mobile-first)
   All styles are scoped under .smmpp-panel so they never leak into the theme.
   v1.2 adds: favorites, delivery progress, per-order notify, toasts, API tab.
   ===================================================================== */

.smmpp-panel {
	/* Light theme (default) — explicit, high-contrast tokens */
	--smm-primary: #6d28d9;
	--smm-primary-600: #7c3aed;
	--smm-primary-700: #6d28d9;
	--smm-primary-050: #f5f3ff;
	--smm-on-primary: #ffffff;

	--smm-page: #f1f5f9;          /* area behind the card */
	--smm-card: #ffffff;          /* card / body surface   */
	--smm-surface: #f8fafc;       /* subtle inset panels    */
	--smm-surface-2: #f1f5f9;
	--smm-border: #e2e8f0;
	--smm-border-strong: #cbd5e1;

	--smm-text: #0f172a;          /* primary text  ~16:1    */
	--smm-text-2: #334155;        /* secondary     ~9:1     */
	--smm-muted: #64748b;         /* meta          ~5:1 AA  */

	--smm-success: #15803d;
	--smm-success-bg: #dcfce7;
	--smm-danger: #b91c1c;
	--smm-danger-bg: #fee2e2;
	--smm-warning: #b45309;
	--smm-warning-bg: #fef3c7;
	--smm-info: #1d4ed8;
	--smm-info-bg: #dbeafe;

	--smm-radius: 16px;
	--smm-radius-sm: 10px;
	--smm-shadow: 0 10px 30px -12px rgba(15, 23, 42, .25);
	--smm-shadow-sm: 0 2px 6px -2px rgba(15, 23, 42, .18);
	--smm-ring: 0 0 0 3px rgba(124, 58, 237, .25);

	max-width: 1120px;
	margin: 0 auto;
	color: var(--smm-text);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.smmpp-panel *,
.smmpp-panel *::before,
.smmpp-panel *::after { box-sizing: border-box; }

/* Force the [hidden] attribute to win over theme form styles. */
.smmpp-panel [hidden] { display: none !important; }

.smmpp-panel a { color: var(--smm-primary-700); text-decoration: none; }
.smmpp-panel a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Top bar                                                            */
/* ------------------------------------------------------------------ */
.smmpp-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 18px 22px;
	background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 55%, #5b21b6 100%);
	color: #fff;
	border-radius: var(--smm-radius) var(--smm-radius) 0 0;
}
.smmpp-brand {
	font-weight: 800;
	font-size: 20px;
	letter-spacing: .2px;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 8px;
}
.smmpp-brand::before {
	content: "";
	width: 22px; height: 22px;
	border-radius: 7px;
	background: rgba(255, 255, 255, .25);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
}
.smmpp-balance { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.smmpp-balance-label {
	color: rgba(255, 255, 255, .82);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .6px;
	font-weight: 600;
}
.smmpp-balance-amount { font-weight: 800; font-size: 18px; color: #fff; }

/* ------------------------------------------------------------------ */
/* Tabs                                                               */
/* ------------------------------------------------------------------ */
.smmpp-tabs {
	display: flex;
	gap: 4px;
	padding: 8px 10px 0;
	background: var(--smm-card);
	border-bottom: 1px solid var(--smm-border);
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.smmpp-tabs::-webkit-scrollbar { height: 4px; }
.smmpp-tabs::-webkit-scrollbar-thumb { background: var(--smm-border-strong); border-radius: 4px; }
.smmpp-tab {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 12px 18px;
	font-size: 14px;
	font-weight: 700;
	color: var(--smm-muted);
	cursor: pointer;
	white-space: nowrap;
	border-radius: var(--smm-radius-sm) var(--smm-radius-sm) 0 0;
	border-bottom: 3px solid transparent;
	transition: color .15s, background .15s, border-color .15s;
}
.smmpp-tab:hover { color: var(--smm-text); background: var(--smm-surface); }
.smmpp-tab.is-active { color: var(--smm-primary-700); border-bottom-color: var(--smm-primary); }

/* ------------------------------------------------------------------ */
/* Body                                                               */
/* ------------------------------------------------------------------ */
.smmpp-body {
	background: var(--smm-card);
	border: 1px solid var(--smm-border);
	border-top: 0;
	border-radius: 0 0 var(--smm-radius) var(--smm-radius);
	padding: 22px;
	box-shadow: var(--smm-shadow);
}

/* Fields ----------------------------------------------------------- */
.smmpp-field { display: block; margin-bottom: 16px; }
.smmpp-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 7px;
	color: var(--smm-text-2);
}
.smmpp-label small { color: var(--smm-muted); font-weight: 500; }

.smmpp-input {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--smm-border-strong);
	border-radius: var(--smm-radius-sm);
	font-size: 15px;
	line-height: 1.4;
	background: var(--smm-card);
	color: var(--smm-text);
	transition: border-color .15s, box-shadow .15s;
	-webkit-appearance: none;
	appearance: none;
}
.smmpp-input::placeholder { color: var(--smm-muted); opacity: 1; }
.smmpp-input:focus {
	outline: none;
	border-color: var(--smm-primary);
	box-shadow: var(--smm-ring);
}
select.smmpp-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 40px;
}

/* Buttons ---------------------------------------------------------- */
.smmpp-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1.5px solid var(--smm-border-strong);
	background: var(--smm-card);
	color: var(--smm-text);
	padding: 10px 16px;
	border-radius: var(--smm-radius-sm);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: transform .08s, background .15s, box-shadow .15s, border-color .15s;
}
.smmpp-btn:hover { background: var(--smm-surface); border-color: var(--smm-muted); }
.smmpp-btn:active { transform: translateY(1px); }
.smmpp-btn-primary {
	background: var(--smm-primary);
	border-color: var(--smm-primary);
	color: var(--smm-on-primary);
	box-shadow: var(--smm-shadow-sm);
}
.smmpp-btn-primary:hover { background: var(--smm-primary-700); border-color: var(--smm-primary-700); color: #fff; }
.smmpp-btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.smmpp-btn-block { width: 100%; padding: 14px; font-size: 15.5px; }
.smmpp-btn-sm { padding: 8px 12px; font-size: 13px; }
.smmpp-btn-xs { padding: 5px 9px; font-size: 12px; font-weight: 700; }

/* ------------------------------------------------------------------ */
/* New Order layout                                                   */
/* ------------------------------------------------------------------ */
.smmpp-order-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}

.smmpp-service-list {
	max-height: 520px;
	overflow-y: auto;
	border: 1px solid var(--smm-border);
	border-radius: var(--smm-radius-sm);
	background: var(--smm-surface);
	scrollbar-width: thin;
}
.smmpp-service-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--smm-border);
	background: transparent;
	cursor: pointer;
	font-size: 13.5px;
	color: var(--smm-text);
	transition: background .12s;
}
.smmpp-service-item:last-child { border-bottom: 0; }
.smmpp-service-item:hover { background: var(--smm-card); }
.smmpp-service-item.is-active {
	background: var(--smm-primary-050);
	box-shadow: inset 3px 0 0 var(--smm-primary);
}
.smmpp-si-id {
	color: var(--smm-muted);
	font-variant-numeric: tabular-nums;
	min-width: 52px;
	font-weight: 600;
	font-size: 12px;
}
.smmpp-si-name { flex: 1; color: var(--smm-text); line-height: 1.4; min-width: 0; }
.smmpp-si-rate {
	font-weight: 800;
	color: var(--smm-primary-700);
	white-space: nowrap;
	background: var(--smm-primary-050);
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 13px;
}
.smmpp-si-name img.emoji, .smmpp-selected-name img.emoji { height: 1em; width: 1em; vertical-align: -0.1em; }

.smmpp-selected-service {
	background: linear-gradient(135deg, var(--smm-primary-050), var(--smm-surface));
	border: 1px solid var(--smm-border);
	border-left: 4px solid var(--smm-primary);
	border-radius: var(--smm-radius-sm);
	padding: 14px 16px;
	margin-bottom: 18px;
}
.smmpp-selected-name { font-weight: 800; color: var(--smm-text); line-height: 1.4; }
.smmpp-selected-meta { font-size: 13px; color: var(--smm-text-2); margin-top: 4px; font-weight: 600; }
.smmpp-selected-desc { font-size: 13px; margin-top: 10px; color: var(--smm-text-2); line-height: 1.5; }

.smmpp-charge-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--smm-text);
	color: #fff;
	padding: 14px 18px;
	border-radius: var(--smm-radius-sm);
	margin: 16px 0;
	font-size: 15px;
	font-weight: 600;
}
.smmpp-charge-box strong { color: #fff; font-size: 22px; font-weight: 800; }

.smmpp-check {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--smm-text);
	cursor: pointer;
	padding: 6px 0;
}
.smmpp-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--smm-primary); cursor: pointer; }
.smmpp-drip-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }

.smmpp-form-msg { margin-top: 12px; font-size: 14px; font-weight: 600; padding: 10px 14px; border-radius: var(--smm-radius-sm); display: none; }
.smmpp-form-msg.is-error { display: block; color: var(--smm-danger); background: var(--smm-danger-bg); }
.smmpp-form-msg.is-success { display: block; color: var(--smm-success); background: var(--smm-success-bg); }

/* ------------------------------------------------------------------ */
/* Toolbars & tables                                                  */
/* ------------------------------------------------------------------ */
.smmpp-orders-toolbar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.smmpp-orders-toolbar .smmpp-input { flex: 1; min-width: 180px; }

.smmpp-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--smm-border);
	border-radius: var(--smm-radius-sm);
	-webkit-overflow-scrolling: touch;
}
.smmpp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--smm-text); }
.smmpp-table th, .smmpp-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--smm-border); vertical-align: middle; }
.smmpp-table th {
	background: var(--smm-surface);
	font-weight: 700;
	color: var(--smm-text-2);
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .5px;
	white-space: nowrap;
}
.smmpp-table tbody tr:last-child td { border-bottom: 0; }
.smmpp-table tbody tr:hover { background: var(--smm-surface); }
.smmpp-link-cell { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smmpp-link-cell a { color: var(--smm-primary-700); }
.smmpp-empty { text-align: center; color: var(--smm-muted); padding: 32px 16px !important; font-weight: 600; }
.smmpp-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.smmpp-cat-tag {
	display: inline-block;
	font-size: 11px;
	color: var(--smm-text-2);
	background: var(--smm-surface-2);
	padding: 2px 8px;
	border-radius: 6px;
	margin-top: 4px;
	font-weight: 600;
}

/* Status badges ---------------------------------------------------- */
.smmpp-status {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .2px;
	white-space: nowrap;
}
.smm-st-pending, .smm-st-processing { background: var(--smm-warning-bg); color: var(--smm-warning); }
.smm-st-in-progress { background: var(--smm-info-bg); color: var(--smm-info); }
.smm-st-completed { background: var(--smm-success-bg); color: var(--smm-success); }
.smm-st-partial { background: #ffedd5; color: #9a3412; }
.smm-st-canceled, .smm-st-cancelled, .smm-st-refunded, .smm-st-error { background: var(--smm-danger-bg); color: var(--smm-danger); }

.smmpp-txn-credit { color: var(--smm-success); font-weight: 800; }
.smmpp-txn-debit { color: var(--smm-danger); font-weight: 800; }

/* ------------------------------------------------------------------ */
/* Add funds                                                          */
/* ------------------------------------------------------------------ */
.smmpp-funds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.smmpp-card {
	border: 1px solid var(--smm-border);
	border-radius: var(--smm-radius);
	padding: 22px;
	background: var(--smm-card);
	box-shadow: var(--smm-shadow-sm);
}
.smmpp-card h3 { margin: 0 0 6px; font-size: 17px; color: var(--smm-text); }
.smmpp-muted { color: var(--smm-muted); font-size: 13.5px; margin: 0 0 16px; }
.smmpp-amount-presets { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.smmpp-preset {
	border: 1.5px solid var(--smm-border-strong);
	background: var(--smm-card);
	color: var(--smm-text);
	border-radius: 999px;
	padding: 9px 18px;
	cursor: pointer;
	font-weight: 700;
	font-size: 13.5px;
	transition: .12s;
}
.smmpp-preset:hover { border-color: var(--smm-primary); color: var(--smm-primary-700); background: var(--smm-primary-050); }

/* Pagination ------------------------------------------------------- */
.smmpp-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.smmpp-page {
	border: 1.5px solid var(--smm-border-strong);
	background: var(--smm-card);
	color: var(--smm-text);
	border-radius: var(--smm-radius-sm);
	padding: 8px 14px;
	cursor: pointer;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
}
.smmpp-page:hover:not(:disabled) { border-color: var(--smm-primary); color: var(--smm-primary-700); }
.smmpp-page:disabled { opacity: .4; cursor: default; }
.smmpp-page-info { font-size: 13.5px; color: var(--smm-text-2); font-weight: 700; }

/* Notices & spinner ------------------------------------------------ */
.smmpp-notice { padding: 18px; border-radius: var(--smm-radius-sm); background: var(--smm-surface); border: 1px solid var(--smm-border); color: var(--smm-text); }
.smmpp-notice a { color: var(--smm-primary-700); font-weight: 700; }
.smmpp-spinner {
	display: inline-block;
	width: 15px; height: 15px;
	border: 2px solid var(--smm-border-strong);
	border-top-color: var(--smm-primary);
	border-radius: 50%;
	animation: smmpp-spin .7s linear infinite;
	vertical-align: -2px;
	margin-right: 6px;
}
@keyframes smmpp-spin { to { transform: rotate(360deg); } }

/* ================================================================== */
/* Responsive                                                         */
/* ================================================================== */
@media (max-width: 860px) {
	.smmpp-order-grid { grid-template-columns: 1fr; }
	.smmpp-funds-grid { grid-template-columns: 1fr; }
	.smmpp-service-list { max-height: 340px; }
}

@media (max-width: 640px) {
	.smmpp-panel { font-size: 14.5px; }
	.smmpp-topbar { padding: 16px; }
	.smmpp-brand { font-size: 18px; }
	.smmpp-body { padding: 16px; }
	.smmpp-tab { padding: 11px 14px; font-size: 13.5px; }
	.smmpp-btn { padding: 11px 15px; }        /* larger touch targets */
	.smmpp-input { padding: 13px 14px; font-size: 16px; } /* 16px stops iOS zoom */
	.smmpp-drip-rows { grid-template-columns: 1fr; }
	.smmpp-orders-toolbar { flex-direction: column; }
	.smmpp-orders-toolbar .smmpp-input { width: 100%; }

	/* Reflow data tables into stacked cards.
	   Uses an absolutely-positioned label + left-padded value so that long
	   service names / URLs wrap inside the card instead of overflowing. */
	.smmpp-table-wrap { border: 0; overflow: visible; }
	.smmpp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.smmpp-table, .smmpp-table tbody, .smmpp-table tr, .smmpp-table td { display: block; width: 100%; }
	.smmpp-table tr {
		border: 1px solid var(--smm-border);
		border-radius: var(--smm-radius-sm);
		margin-bottom: 12px;
		padding: 4px 14px;
		background: var(--smm-card);
		box-shadow: var(--smm-shadow-sm);
	}
	.smmpp-table tbody tr:hover { background: var(--smm-card); }
	.smmpp-table td {
		position: relative;
		padding: 10px 0 10px 40%;
		text-align: right;
		border-bottom: 1px dashed var(--smm-border);
		min-height: 40px;
		overflow-wrap: anywhere;
		word-break: break-word;
	}
	.smmpp-table tr td:last-child { border-bottom: 0; }
	.smmpp-table td::before {
		content: attr(data-label);
		position: absolute;
		left: 0;
		top: 10px;
		width: 36%;
		text-align: left;
		font-weight: 700;
		color: var(--smm-muted);
		font-size: 11.5px;
		text-transform: uppercase;
		letter-spacing: .4px;
		line-height: 1.5;
	}
	.smmpp-table td[data-label=""] { padding-left: 0; text-align: right; }
	.smmpp-table td[data-label=""]::before { content: none; }
	.smmpp-table td.smmpp-empty { padding-left: 0 !important; text-align: center; }
	.smmpp-link-cell { max-width: 100%; }
	.smmpp-cat-tag { display: inline-block; margin-top: 6px; }
	.smmpp-row-actions { justify-content: flex-end; }
}

/* ================================================================== */
/* Dark theme (respects the visitor's OS/browser preference)          */
/* ================================================================== */
@media (prefers-color-scheme: dark) {
	.smmpp-panel {
		--smm-primary: #8b5cf6;
		--smm-primary-600: #7c3aed;
		--smm-primary-700: #a78bfa;
		--smm-primary-050: rgba(139, 92, 246, .16);
		--smm-on-primary: #ffffff;

		--smm-page: #0b1120;
		--smm-card: #111827;
		--smm-surface: #1e293b;
		--smm-surface-2: #0f172a;
		--smm-border: #334155;
		--smm-border-strong: #475569;

		--smm-text: #f1f5f9;
		--smm-text-2: #cbd5e1;
		--smm-muted: #94a3b8;

		--smm-success: #4ade80; --smm-success-bg: rgba(34, 197, 94, .18);
		--smm-danger: #f87171;  --smm-danger-bg: rgba(239, 68, 68, .18);
		--smm-warning: #fbbf24; --smm-warning-bg: rgba(245, 158, 11, .18);
		--smm-info: #93c5fd;    --smm-info-bg: rgba(59, 130, 246, .20);

		--smm-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
		--smm-shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, .5);
	}
	.smmpp-charge-box { background: #000; }
	.smm-st-partial { background: rgba(234, 88, 12, .22); color: #fdba74; }
}

/* ================================================================== */
/* v1.2 components                                                    */
/* ================================================================== */

/* Favorites */
.smmpp-fav-filter {
	display: inline-flex; align-items: center; gap: 6px;
	margin-bottom: 12px; padding: 8px 14px;
	border: 1.5px solid var(--smm-border-strong); background: var(--smm-card);
	color: var(--smm-text-2); border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer;
}
.smmpp-fav-filter .smmpp-star { color: #f59e0b; }
.smmpp-fav-filter.is-active { border-color: var(--smm-primary); color: var(--smm-primary-700); background: var(--smm-primary-050); }
.smmpp-si-star {
	color: var(--smm-border-strong); font-size: 17px; line-height: 1; cursor: pointer;
	flex-shrink: 0; transition: color .12s, transform .12s; align-self: flex-start; margin-top: 2px;
}
.smmpp-si-star:hover { transform: scale(1.2); color: #f59e0b; }
.smmpp-si-star.is-fav { color: #f59e0b; }

/* Service item: title + attribute chips */
.smmpp-service-item { align-items: flex-start; }
.smmpp-si-id { margin-top: 2px; }
.smmpp-si-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.smmpp-si-title { color: var(--smm-text); font-weight: 600; line-height: 1.35; }
.smmpp-si-rate { align-self: flex-start; margin-top: 2px; display: inline-flex; align-items: baseline; gap: 2px; }
.smmpp-si-rate small { font-size: 9px; font-weight: 700; opacity: .7; }

/* Attribute chips */
.smmpp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.smmpp-chip {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 11px; line-height: 1.4; padding: 3px 8px; border-radius: 6px;
	background: var(--smm-surface-2); color: var(--smm-text-2); font-weight: 600;
	border: 1px solid var(--smm-border);
}
.smmpp-chip-k { color: var(--smm-muted); font-weight: 700; }
.smmpp-chip-more { background: var(--smm-primary-050); color: var(--smm-primary-700); border-color: transparent; }
.smmpp-chip img.emoji { height: 1em; width: 1em; vertical-align: -0.1em; }

/* Selected service spec */
.smmpp-sel-attrs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.smmpp-sel-attrs .smmpp-chip { font-size: 12px; padding: 4px 10px; }
.smmpp-selected-meta strong { color: var(--smm-primary-700); font-size: 18px; }
.smmpp-sel-perk { color: var(--smm-muted); font-size: 12px; font-weight: 500; margin-left: 4px; }

/* Notify opt-in on order form */
.smmpp-notify-opt { margin: 2px 0 10px; font-size: 13.5px; }

/* Delivery progress bar */
.smmpp-progress { height: 6px; background: var(--smm-border); border-radius: 999px; overflow: hidden; margin-top: 8px; min-width: 70px; }
.smmpp-progress-fill { height: 100%; background: linear-gradient(90deg, var(--smm-primary-600), var(--smm-primary)); border-radius: 999px; transition: width .5s ease; }

/* Notification bell button */
.smmpp-bell { filter: grayscale(1); opacity: .65; }
.smmpp-bell.is-on { filter: none; opacity: 1; }

/* Toasts */
.smmpp-toasts {
	position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
	z-index: 99999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
}
.smmpp-toast {
	background: #111827; color: #fff; padding: 11px 18px; border-radius: 10px;
	font-size: 14px; font-weight: 600; box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .45);
	opacity: 0; transform: translateY(12px); transition: opacity .28s, transform .28s; max-width: 92vw;
}
.smmpp-toast.is-in { opacity: 1; transform: none; }
.smmpp-toast-success { background: #15803d; }
.smmpp-toast-error { background: #b91c1c; }

/* Developer API tab */
.smmpp-api-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.smmpp-copyrow { display: flex; gap: 8px; flex-wrap: wrap; }
.smmpp-copyrow .smmpp-input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.smmpp-code {
	background: #0f172a; color: #e2e8f0; padding: 14px 16px; border-radius: 10px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
	line-height: 1.7; overflow-x: auto; white-space: pre; margin: 8px 0 0;
}
.smmpp-api-table code { background: var(--smm-surface-2); padding: 2px 6px; border-radius: 5px; font-size: 12px; color: var(--smm-primary-700); }

@media (max-width: 860px) {
	.smmpp-api-wrap { grid-template-columns: 1fr; }
}

/* ================================================================== */
/* v1.3 components (mass order, subscriptions, tiers, rewards)        */
/* ================================================================== */

/* Tier badge in topbar */
.smmpp-tier-badge {
	background: rgba(255, 255, 255, .22); color: #fff; font-weight: 800;
	font-size: 11px; letter-spacing: .3px; padding: 3px 10px; border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .35);
}

/* Subscription status badges */
.smm-st-active { background: var(--smm-success-bg); color: var(--smm-success); }
.smm-st-paused { background: var(--smm-warning-bg); color: var(--smm-warning); }
.smm-st-done { background: var(--smm-surface-2); color: var(--smm-muted); }

/* Mass order results */
.smmpp-mass-results { margin-top: 16px; }
.smmpp-mass-summary { font-weight: 800; font-size: 15px; margin-bottom: 10px; }
.smmpp-mass-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.smmpp-mass-list li {
	display: flex; gap: 10px; align-items: baseline; font-size: 13px;
	padding: 8px 12px; border-radius: 8px; border: 1px solid var(--smm-border);
}
.smmpp-mass-list li span { font-weight: 800; color: var(--smm-muted); flex-shrink: 0; }
.smmpp-mass-list li.ok { background: var(--smm-success-bg); }
.smmpp-mass-list li.ok span { color: var(--smm-success); }
.smmpp-mass-list li.err { background: var(--smm-danger-bg); }
.smmpp-mass-list li.err span { color: var(--smm-danger); }

/* Rewards card */
.smmpp-reward-row {
	display: flex; align-items: center; justify-content: space-between;
	padding: 10px 0; border-bottom: 1px solid var(--smm-border); font-size: 14px;
}
.smmpp-reward-row span { color: var(--smm-text-2); }
.smmpp-reward-row strong { color: var(--smm-text); font-weight: 800; }
.smmpp-reward-block { margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--smm-border); }
.smmpp-reward-block h4 { margin: 0 0 4px; font-size: 14px; color: var(--smm-text); }
.smmpp-reward-block .smmpp-copyrow { margin-top: 8px; }

/* ================================================================== */
/* v1.4 — AI assistant chat                                           */
/* ================================================================== */
.smmpp-chat { display: flex; flex-direction: column; max-width: 760px; margin: 0 auto; }
.smmpp-chat-log {
	height: 440px; overflow-y: auto; padding: 8px 4px;
	display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin;
}
.smmpp-msg { display: flex; }
.smmpp-msg-user { justify-content: flex-end; }
.smmpp-msg-ai { justify-content: flex-start; }
.smmpp-msg-bubble {
	max-width: 80%; padding: 11px 15px; border-radius: 16px; font-size: 14.5px; line-height: 1.5;
	white-space: pre-wrap; word-wrap: break-word;
}
.smmpp-msg-ai .smmpp-msg-bubble { background: var(--smm-surface); color: var(--smm-text); border-bottom-left-radius: 4px; }
.smmpp-msg-user .smmpp-msg-bubble { background: var(--smm-primary); color: #fff; border-bottom-right-radius: 4px; }

.smmpp-chat-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.smmpp-suggest { cursor: pointer; border-color: var(--smm-border-strong); }
.smmpp-suggest:hover { border-color: var(--smm-primary); color: var(--smm-primary-700); }

.smmpp-chat-form { display: flex; gap: 8px; margin-top: 8px; }
.smmpp-chat-form .smmpp-input { flex: 1; }
.smmpp-chat-note { font-size: 12px; color: var(--smm-muted); margin: 8px 2px 0; text-align: center; }

/* Approval (accept/reject) card */
.smmpp-approval {
	align-self: flex-start; max-width: 85%; background: var(--smm-card);
	border: 2px solid var(--smm-primary); border-radius: 14px; padding: 14px 16px; margin: 2px 0;
	box-shadow: var(--smm-shadow-sm);
}
.smmpp-appr-title { font-weight: 800; color: var(--smm-primary-700); margin-bottom: 8px; }
.smmpp-appr-line { font-size: 13.5px; color: var(--smm-text); padding: 3px 0; border-bottom: 1px dashed var(--smm-border); }
.smmpp-appr-line:last-of-type { border-bottom: 0; }
.smmpp-appr-actions { display: flex; gap: 8px; margin-top: 12px; }
.smmpp-approval.is-approved { border-color: var(--smm-success); }
.smmpp-approval.is-rejected { border-color: var(--smm-border-strong); opacity: .7; }
.smmpp-appr-done { font-weight: 800; color: var(--smm-text-2); }

@media (max-width: 640px) {
	.smmpp-chat-log { height: 60vh; }
	.smmpp-msg-bubble { max-width: 88%; }
}