/**
 * Survey Master — modern polish layer.
 *
 * Loaded last on every Survey Master surface (dashboard shell, hub,
 * guest gate, locked screen, pricing). It only refines colors, radii,
 * shadows, motion, and alignment — no structural changes.
 *
 * Selector strategy:
 *   .sfp-dash-wrap   matches the logged-in dashboard + hub shells.
 *   .sfp-gate        matches the guest sign-in / register screen.
 *   .sfp-lock        matches the upgrade-gated screen.
 *   dialog.sfp-modal matches every popup across the app.
 */

:root {
	--sfp-radius-sm: 8px;
	--sfp-radius-md: 12px;
	--sfp-radius-lg: 16px;
	--sfp-radius-xl: 20px;
	--sfp-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
	--sfp-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
	--sfp-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
	--sfp-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
	--sfp-shadow-xl: 0 24px 56px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.04);
	--sfp-ring: rgba(99, 102, 241, 0.22);
	--sfp-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-sfp-theme='dark'] {
	--sfp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
	--sfp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
	--sfp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
	--sfp-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
	--sfp-shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.6);
	--sfp-ring: rgba(129, 140, 248, 0.35);
}

/* -----------------------------------------------------------------------
   Neutralize active-theme button:hover bleed (was showing a pink/accent
   background on our custom <button> elements that don't set a hover bg).
   Excludes components that intentionally style their own hover background.
   ----------------------------------------------------------------------- */
.sfp-dash-wrap button:not(.sfp-btn):not(.sfp-q-icon-btn):not(.sfp-survey-card__share):not(.sfp-survey-card__embed):not(.sfp-theme-toggle):not(.sfp-dash-nav__link):not(.sfp-dash-sidebar__account):not(.sfp-dash-sidebar__signout):not(.sfp-dashx__range-btn):not(.sfp-dashx__legend-btn):not(.sfp-modal__close):not(.sfp-modal__x):not(.sfp-suggest__close):not(.sfp-share-dialog__close):hover,
.sfp-hub-app button:not(.sfp-btn):not(.sfp-q-icon-btn):not(.sfp-survey-card__share):not(.sfp-survey-card__embed):not(.sfp-theme-toggle):not(.sfp-dashx__range-btn):not(.sfp-dashx__legend-btn):hover,
.sfp-builder button:not(.sfp-btn):not(.sfp-q-icon-btn):not(.sfp-survey-card__share):not(.sfp-survey-card__embed):not(.sfp-theme-toggle):hover,
.sfp-gate button:not(.sfp-btn):not(.sfp-theme-toggle):not(.sfp-gate__nav-cta):not(.sfp-gate__tab):not(.sfp-gate__x):not(.sfp-gate__scrim):not(.sfp-gate__submit):not(.sfp-gate__switcher-btn):not(.sfp-gate__pw-toggle):not(.sfp-gate__text-link):hover,
.sfp-lock button:not(.sfp-btn):not(.sfp-theme-toggle):hover,
.sfp-landing button:not(.sfp-btn):not(.sfp-landing__btn):not(.sfp-theme-toggle):hover {
	background-color: var(--sfp-ui-btn-hover-bg, rgba(99, 102, 241, 0.1)) !important;
	color: var(--sfp-text, #334155) !important;
}

button.sfp-theme-toggle:hover,
button.sfp-theme-toggle:focus,
button.sfp-theme-toggle:active {
	background: transparent !important;
	background-color: transparent !important;
}

/* Modal scrims / overlay dismiss controls — block WP theme button:hover (pink bleed) */
button.sfp-gate__scrim,
button.sfp-gate__scrim:hover,
button.sfp-gate__scrim:focus,
button.sfp-gate__scrim:active,
button.sfp-builder__drawer-backdrop,
button.sfp-builder__drawer-backdrop:hover,
button.sfp-builder__drawer-backdrop:focus,
button.sfp-builder__palette-backdrop,
button.sfp-builder__palette-backdrop:hover,
button.sfp-builder__palette-backdrop:focus {
	background: rgba(15, 23, 42, 0.45) !important;
	background-color: rgba(15, 23, 42, 0.45) !important;
	border: none !important;
	box-shadow: none !important;
	color: transparent !important;
}

html[data-sfp-theme='dark'] button.sfp-gate__scrim,
html[data-sfp-theme='dark'] button.sfp-gate__scrim:hover,
html[data-sfp-theme='dark'] button.sfp-builder__drawer-backdrop,
html[data-sfp-theme='dark'] button.sfp-builder__drawer-backdrop:hover,
html[data-sfp-theme='dark'] button.sfp-builder__palette-backdrop,
html[data-sfp-theme='dark'] button.sfp-builder__palette-backdrop:hover {
	background: rgba(0, 0, 0, 0.62) !important;
	background-color: rgba(0, 0, 0, 0.62) !important;
}

/* Non-button modal backdrops (div overlays) */
.sfp-account-modal__backdrop,
.sfp-account-modal__backdrop:hover,
.sfp-data-dash__drawer-backdrop,
.sfp-data-dash__drawer-backdrop:hover,
.sfp-modal__backdrop,
.sfp-modal__backdrop:hover {
	background-color: rgba(15, 23, 42, 0.45) !important;
}

html[data-sfp-theme='dark'] .sfp-account-modal__backdrop,
html[data-sfp-theme='dark'] .sfp-data-dash__drawer-backdrop,
html[data-sfp-theme='dark'] .sfp-modal__backdrop {
	background-color: rgba(0, 0, 0, 0.62) !important;
}

/* Modal close buttons should never pick up the theme accent on hover. */
.sfp-modal__close:hover,
.sfp-modal__x:hover,
.sfp-suggest__close:hover,
.sfp-share-dialog__close:hover {
	background-color: var(--sfp-ui-close-hover-bg, rgba(15, 23, 42, 0.06)) !important;
	color: var(--sfp-text, #334155) !important;
}

/* UI chrome buttons — explicit hovers (beat WP theme white/pink on light mode) */
.sfp-gate__switcher-btn:hover:not(.is-active) {
	background-color: var(--sfp-ui-btn-hover-bg, rgba(99, 102, 241, 0.1)) !important;
	color: var(--sfp-gate-ink, #0f172a) !important;
}

.sfp-gate__switcher-btn.is-active:hover {
	background-color: transparent !important;
}

.sfp-gate .sfp-gate__submit:hover:not(:disabled) {
	background: var(--sfp-gate-grad) !important;
	color: #fff !important;
}

.sfp-gate__pw-toggle:hover {
	background-color: var(--sfp-ui-btn-hover-bg, rgba(99, 102, 241, 0.1)) !important;
	color: var(--sfp-gate-accent, #6366f1) !important;
}

.sfp-gate__text-link:hover {
	background-color: transparent !important;
	background: none !important;
	color: #4f46e5 !important;
}

.sfp-dashx__range-btn:hover:not(.is-active) {
	background-color: var(--sfp-ui-btn-hover-bg, rgba(99, 102, 241, 0.1)) !important;
	color: var(--sfp-text, #0f172a) !important;
}

.sfp-dashx__legend-btn:hover {
	background-color: var(--sfp-ui-btn-hover-bg, rgba(99, 102, 241, 0.1)) !important;
	border-color: rgba(99, 102, 241, 0.14) !important;
}

.sfp-dash-sidebar__account:hover {
	background-color: var(--sfp-ui-btn-hover-bg, rgba(99, 102, 241, 0.1)) !important;
	color: var(--sfp-text) !important;
}

.sfp-dash-wrap .sfp-btn--primary:hover,
.sfp-gate .sfp-btn--primary:hover,
.sfp-lock .sfp-btn--primary:hover,
.sfp-hub-app .sfp-btn--primary:hover,
.sfp-landing .sfp-btn--primary:hover,
.sfp-builder .sfp-btn--primary:hover,
.sfp-surveys-app .sfp-btn--primary:hover {
	background: linear-gradient(135deg, #4338ca 0%, #4f46e5 50%, #6366f1 100%) !important;
	background-color: transparent !important;
	color: #fff !important;
	border-color: transparent !important;
}

.sfp-dash-wrap .sfp-btn--ghost:hover,
.sfp-gate .sfp-btn--ghost:hover,
.sfp-hub-app .sfp-btn--ghost:hover,
.sfp-builder .sfp-btn--ghost:hover,
.sfp-surveys-app .sfp-btn--ghost:hover {
	background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%) !important;
	border-color: #a5b4fc !important;
	color: #4338ca !important;
}

html[data-sfp-theme='dark'] .sfp-dash-wrap .sfp-btn--ghost:hover,
html[data-sfp-theme='dark'] .sfp-gate .sfp-btn--ghost:hover,
html[data-sfp-theme='dark'] .sfp-hub-app .sfp-btn--ghost:hover,
html[data-sfp-theme='dark'] .sfp-builder .sfp-btn--ghost:hover,
html[data-sfp-theme='dark'] .sfp-surveys-app .sfp-btn--ghost:hover {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.22) 0%, rgba(129, 140, 248, 0.14) 100%) !important;
	border-color: #818cf8 !important;
	color: #c7d2fe !important;
}

/* Wizard cards keep their own hover / selected look (never pink). */
.sfp-wizard-card:hover {
	background-color: #fff;
	border-color: #93c5fd;
}

.sfp-wizard-card.is-selected,
.sfp-wizard-card.is-selected:hover {
	background-color: #eff6ff;
	border-color: #2563eb;
}

html[data-sfp-theme='dark'] .sfp-wizard-card:hover {
	background-color: rgba(99, 102, 241, 0.1);
}

/* -----------------------------------------------------------------------
   Page enter animation
   ----------------------------------------------------------------------- */
.sfp-dash-wrap .sfp-dash-main__body {
	animation: sfpPageIn 0.34s cubic-bezier(0.4, 0, 0.2, 1) both;
}

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

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* -----------------------------------------------------------------------
   Sidebar refinement
   ----------------------------------------------------------------------- */
.sfp-dash-wrap .sfp-dash-sidebar {
	border-right-color: rgba(99, 102, 241, 0.12);
	box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
}

.sfp-dash-wrap .sfp-dash-sidebar__head {
	padding: 18px 20px;
	border-bottom-color: rgba(99, 102, 241, 0.1);
}

.sfp-dash-wrap .sfp-dash-sidebar__wordmark {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.01em;
}

.sfp-dash-wrap .sfp-dash-nav__group + .sfp-dash-nav__group {
	margin-top: 4px;
}

.sfp-dash-wrap .sfp-dash-nav__heading {
	font-size: 11px;
	letter-spacing: 0.08em;
	margin-bottom: 8px;
	padding-left: 12px;
	border-left-width: 2px;
}

.sfp-dash-wrap .sfp-dash-nav__link {
	padding: 8px 12px;
	gap: 12px;
	border-radius: 10px;
	font-weight: 500;
	transition:
		background var(--sfp-transition),
		color var(--sfp-transition),
		transform var(--sfp-transition);
}

.sfp-dash-wrap .sfp-dash-nav__link:hover:not(.is-active):not(.is-disabled) {
	transform: translateX(2px);
	background: rgba(99, 102, 241, 0.07);
	color: #4338ca;
}

.sfp-dash-wrap .sfp-dash-nav__link.is-active {
	background: linear-gradient(90deg, rgba(99, 102, 241, 0.14), rgba(236, 72, 153, 0.08));
	color: #4338ca;
	box-shadow: inset 3px 0 0 #6366f1, 0 1px 2px rgba(99, 102, 241, 0.1);
	font-weight: 600;
}

.sfp-dash-wrap .sfp-dash-nav__icon {
	border-radius: 9px;
}

.sfp-dash-wrap .sfp-dash-sidebar__foot {
	gap: 6px;
	padding: 14px 18px;
	border-top-color: rgba(99, 102, 241, 0.1);
}

/* -----------------------------------------------------------------------
   Top bar
   ----------------------------------------------------------------------- */
.sfp-dash-wrap .sfp-dash-main {
	padding: 0 28px 56px;
	min-width: 0;
	max-width: 100%;
	overflow-x: clip;
	box-sizing: border-box;
}

.sfp-dash-wrap .sfp-dash-main__bar {
	padding: 18px 22px;
	margin-top: 22px;
	margin-bottom: 22px;
	border-radius: 16px;
	border-color: rgba(99, 102, 241, 0.12);
	box-shadow: var(--sfp-shadow-sm);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.sfp-dash-wrap .sfp-dash-main__title {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.025em;
}

/* -----------------------------------------------------------------------
   Buttons (apply broadly across plugin surfaces)
   ----------------------------------------------------------------------- */
.sfp-dash-wrap .sfp-btn,
.sfp-gate .sfp-btn,
.sfp-lock .sfp-btn,
.sfp-hub .sfp-btn {
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 10px;
	transition:
		background var(--sfp-transition),
		border-color var(--sfp-transition),
		color var(--sfp-transition),
		box-shadow var(--sfp-transition),
		transform var(--sfp-transition);
	letter-spacing: -0.005em;
}

.sfp-dash-wrap .sfp-btn:active,
.sfp-gate .sfp-btn:active,
.sfp-lock .sfp-btn:active {
	transform: translateY(1px) scale(0.99);
}

.sfp-dash-wrap .sfp-btn--primary,
.sfp-gate .sfp-btn--primary,
.sfp-lock .sfp-btn--primary,
.sfp-builder .sfp-btn--primary,
.sfp-surveys-app .sfp-btn--primary {
	background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #818cf8 100%);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.28);
}

.sfp-dash-wrap .sfp-btn--primary:hover,
.sfp-gate .sfp-btn--primary:hover,
.sfp-lock .sfp-btn--primary:hover,
.sfp-builder .sfp-btn--primary:hover,
.sfp-surveys-app .sfp-btn--primary:hover {
	background: linear-gradient(135deg, #4338ca 0%, #4f46e5 50%, #6366f1 100%);
	box-shadow: 0 6px 18px rgba(99, 102, 241, 0.38);
	transform: translateY(-1px);
	color: #fff !important;
	border-color: transparent;
}

.sfp-dash-wrap .sfp-btn--ghost,
.sfp-gate .sfp-btn--ghost,
.sfp-builder .sfp-btn--ghost,
.sfp-surveys-app .sfp-btn--ghost {
	background: var(--sfp-surface);
	border-color: var(--sfp-border);
	color: var(--sfp-text);
}

.sfp-dash-wrap .sfp-btn--ghost:hover,
.sfp-gate .sfp-btn--ghost:hover,
.sfp-builder .sfp-btn--ghost:hover,
.sfp-surveys-app .sfp-btn--ghost:hover {
	background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
	border-color: #a5b4fc;
	color: #4338ca !important;
	box-shadow: 0 2px 10px rgba(99, 102, 241, 0.15);
	transform: translateY(-1px);
}

.sfp-dash-wrap .sfp-btn--danger {
	background: #fff;
	color: #b91c1c;
	border-color: #fecaca;
}

.sfp-dash-wrap .sfp-btn--danger:hover,
.sfp-builder .sfp-btn--danger:hover,
.sfp-surveys-app .sfp-btn--danger:hover {
	background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
	border-color: #f87171 !important;
	color: #991b1b !important;
	box-shadow: 0 2px 10px rgba(248, 113, 113, 0.22);
	transform: translateY(-1px);
}

.sfp-dash-wrap .sfp-btn--sm {
	padding: 6px 12px;
	font-size: 13px;
	border-radius: 8px;
}

.sfp-dash-wrap .sfp-btn--xs {
	padding: 4px 10px;
	font-size: 12px;
	border-radius: 7px;
}

/* -----------------------------------------------------------------------
   Form controls (inputs / selects / textareas)
   ----------------------------------------------------------------------- */
.sfp-dash-wrap input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not(.sfp-survey-card__title input),
.sfp-dash-wrap select,
.sfp-dash-wrap textarea {
	padding: 9px 12px;
	border-radius: 10px;
	border: 1px solid var(--sfp-border);
	background: var(--sfp-input-bg, var(--sfp-surface));
	color: var(--sfp-text);
	font: inherit;
	font-size: 14px;
	line-height: 1.4;
	transition:
		border-color var(--sfp-transition),
		box-shadow var(--sfp-transition),
		background var(--sfp-transition);
}

.sfp-dash-wrap input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):hover,
.sfp-dash-wrap select:hover,
.sfp-dash-wrap textarea:hover {
	border-color: #a5b4fc;
}

.sfp-dash-wrap input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):focus,
.sfp-dash-wrap select:focus,
.sfp-dash-wrap textarea:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 3px var(--sfp-ring);
}

.sfp-dash-wrap textarea {
	min-height: 6rem;
	line-height: 1.5;
	resize: vertical;
}

.sfp-dash-wrap input[type='checkbox'],
.sfp-dash-wrap input[type='radio'] {
	accent-color: #6366f1;
	cursor: pointer;
}

/* Toolbar filter inputs (already compact in sfp-theme.css) — keep override
   minimal so they don't grow back to default size. */
.sfp-dash-wrap .sfp-surveys-list__search input,
.sfp-dash-wrap .sfp-surveys-list__select,
.sfp-dash-wrap .sfp-data-dash__toolbar-main .sfp-data-dash__input,
.sfp-dash-wrap .sfp-data-dash__toolbar-main .sfp-data-dash__select,
.sfp-dash-wrap .sfp-analytics__toolbar-main .sfp-analytics__input,
.sfp-dash-wrap .sfp-analytics__toolbar-main .sfp-analytics__select,
.sfp-dash-wrap .sfp-templates__input,
.sfp-dash-wrap .sfp-templates__select {
	padding: 7px 10px;
	font-size: 13px;
	border-radius: 8px;
}

/* -----------------------------------------------------------------------
   Cards & panels
   ----------------------------------------------------------------------- */
.sfp-dash-wrap .sfp-card,
.sfp-dash-wrap .sfp-survey-card,
.sfp-dash-wrap .sfp-tpl-card,
.sfp-dash-wrap .sfp-data-dash__tablewrap,
.sfp-dash-wrap .sfp-kpi {
	border-radius: 14px;
	border-color: rgba(99, 102, 241, 0.12);
	box-shadow: var(--sfp-shadow-xs);
	transition:
		box-shadow var(--sfp-transition),
		border-color var(--sfp-transition),
		transform var(--sfp-transition);
}

.sfp-dash-wrap .sfp-survey-card:hover,
.sfp-dash-wrap .sfp-tpl-card:hover {
	border-color: rgba(99, 102, 241, 0.28);
	box-shadow: var(--sfp-shadow-md);
	transform: translateY(-2px);
}

.sfp-dash-wrap .sfp-survey-card__title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--sfp-text);
}

.sfp-dash-wrap .sfp-survey-card__badge {
	font-size: 10px;
	letter-spacing: 0.05em;
	padding: 3px 9px;
	font-weight: 700;
}

.sfp-dash-wrap .sfp-survey-card__meta {
	font-size: 12.5px;
	color: var(--sfp-muted);
	gap: 4px 12px;
}

/* -----------------------------------------------------------------------
   Toolbars (filters bar)
   ----------------------------------------------------------------------- */
.sfp-dash-wrap .sfp-surveys-list__toolbar,
.sfp-dash-wrap .sfp-data-dash__toolbar,
.sfp-dash-wrap .sfp-analytics__toolbar,
.sfp-dash-wrap .sfp-templates__toolbar {
	border-radius: 14px;
	box-shadow: var(--sfp-shadow-xs);
	border-color: rgba(99, 102, 241, 0.12);
}

/* -----------------------------------------------------------------------
   Data tables
   ----------------------------------------------------------------------- */
.sfp-dash-wrap .sfp-data-dash__table {
	font-size: 13.5px;
}

.sfp-dash-wrap .sfp-data-dash__table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	font-size: 11px;
	letter-spacing: 0.06em;
	padding: 11px 14px;
}

.sfp-dash-wrap .sfp-data-dash__table tbody tr {
	transition: background var(--sfp-transition);
}

.sfp-dash-wrap .sfp-data-dash__table tbody tr:hover {
	background: rgba(99, 102, 241, 0.05);
}

.sfp-dash-wrap .sfp-data-dash__table tbody tr:nth-child(even) {
	background: rgba(99, 102, 241, 0.018);
}

.sfp-dash-wrap .sfp-data-dash__table tbody tr:nth-child(even):hover {
	background: rgba(99, 102, 241, 0.07);
}

.sfp-dash-wrap .sfp-data-dash__table td {
	padding: 11px 14px;
}

/* -----------------------------------------------------------------------
   Pills / badges
   ----------------------------------------------------------------------- */
.sfp-dash-wrap .sfp-pill {
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 3px 11px;
}

.sfp-dash-wrap .sfp-tag {
	border: 1px solid rgba(15, 23, 42, 0.06);
	padding: 3px 10px;
	border-radius: 999px;
}

/* -----------------------------------------------------------------------
   KPI tiles
   ----------------------------------------------------------------------- */
.sfp-dash-wrap .sfp-kpi {
	min-width: 140px;
	padding: 14px 18px;
	border-radius: 14px;
}

.sfp-dash-wrap .sfp-kpi__label {
	font-size: 12px;
	color: var(--sfp-muted);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.sfp-dash-wrap .sfp-kpi__value {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* -----------------------------------------------------------------------
   Modal polish
   ----------------------------------------------------------------------- */
dialog.sfp-modal[open] .sfp-modal__card,
dialog.sfp-modal[open] .sfp-modal__panel,
dialog.sfp-modal[open] .sfp-suggest,
dialog.sfp-modal[open] .sfp-share-dialog__panel,
dialog.sfp-modal[open] .sfp-embed-dialog .sfp-share-dialog__panel,
dialog.sfp-modal[open] .sfp-template-picker {
	box-shadow: var(--sfp-shadow-xl);
}

dialog.sfp-modal::backdrop {
	background: rgba(15, 23, 42, 0.45);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

html[data-sfp-theme='dark'] dialog.sfp-modal::backdrop {
	background: rgba(0, 0, 0, 0.65);
}

/* -----------------------------------------------------------------------
   Drawer (responses / leads detail)
   ----------------------------------------------------------------------- */
.sfp-data-dash__drawer {
	box-shadow: -12px 0 36px rgba(15, 23, 42, 0.14);
	border-top-left-radius: 18px;
	border-bottom-left-radius: 0;
}

.sfp-data-dash__drawer-header {
	background: linear-gradient(90deg, rgba(99, 102, 241, 0.08), rgba(236, 72, 153, 0.05));
	border-bottom-color: rgba(99, 102, 241, 0.12);
	padding: 16px 20px;
}

/* -----------------------------------------------------------------------
   Survey list — head + actions
   ----------------------------------------------------------------------- */
.sfp-dash-wrap .sfp-surveys-list__head {
	margin-bottom: 16px;
}

.sfp-dash-wrap .sfp-surveys-list__title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.sfp-dash-wrap .sfp-surveys-list__sub {
	color: var(--sfp-muted);
	font-size: 14px;
}

.sfp-dash-wrap .sfp-survey-card__actions {
	gap: 6px;
}

/* -----------------------------------------------------------------------
   Empty states (uniform tone)
   ----------------------------------------------------------------------- */
.sfp-dash-wrap .sfp-empty-state,
.sfp-dash-wrap .sfp-surveys-list__empty,
.sfp-dash-wrap .sfp-data-dash__empty,
.sfp-dash-wrap .sfp-templates__empty {
	color: var(--sfp-muted);
}

/* -----------------------------------------------------------------------
   Scrollbar (subtle, modern)
   ----------------------------------------------------------------------- */
.sfp-dash-wrap *::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.sfp-dash-wrap *::-webkit-scrollbar-track {
	background: transparent;
}

.sfp-dash-wrap *::-webkit-scrollbar-thumb {
	background: rgba(99, 102, 241, 0.18);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}

.sfp-dash-wrap *::-webkit-scrollbar-thumb:hover {
	background: rgba(99, 102, 241, 0.32);
	background-clip: padding-box;
	border: 2px solid transparent;
}

/* -----------------------------------------------------------------------
   Hub-specific topbar polish
   ----------------------------------------------------------------------- */
.sfp-hub-app__topbar {
	padding: 14px 0;
	border-bottom-color: rgba(99, 102, 241, 0.14);
}

.sfp-hub-app__brand-text {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.sfp-hub-app__user {
	padding: 5px 12px;
	transition:
		border-color var(--sfp-transition),
		background var(--sfp-transition),
		box-shadow var(--sfp-transition);
}

.sfp-hub-app__user:hover {
	border-color: #a5b4fc;
	background: rgba(99, 102, 241, 0.05);
	box-shadow: 0 1px 6px rgba(99, 102, 241, 0.14);
}

.sfp-hub-app__hero {
	border-radius: 18px;
	border-color: rgba(99, 102, 241, 0.16);
	box-shadow: var(--sfp-shadow-sm);
}

/* -----------------------------------------------------------------------
   Guest gate (sign-in / register)
   ----------------------------------------------------------------------- */
.sfp-gate .sfp-gate__sheet {
	border-radius: 20px;
	box-shadow: var(--sfp-shadow-xl);
	border-color: rgba(99, 102, 241, 0.14);
}

.sfp-gate .sfp-gate__nav-link,
.sfp-gate .sfp-gate__inline-link,
.sfp-gate .sfp-gate__link {
	transition: color var(--sfp-transition);
}

html[data-sfp-theme='dark'] .sfp-gate .sfp-gate__sheet {
	border-color: rgba(129, 140, 248, 0.22);
}

html[data-sfp-theme='dark'] .sfp-gate .sfp-gate__tab.is-active {
	background: #1a1d32;
}

/* -----------------------------------------------------------------------
   Locked / upgrade screen
   ----------------------------------------------------------------------- */
.sfp-lock .sfp-lock__card {
	border-radius: 18px;
	box-shadow: var(--sfp-shadow-lg);
	border-color: rgba(99, 102, 241, 0.16);
}

/* -----------------------------------------------------------------------
   Dark mode refinements
   ----------------------------------------------------------------------- */
html[data-sfp-theme='dark'] .sfp-dash-wrap .sfp-dash-main__bar {
	background: linear-gradient(90deg, rgba(96, 165, 250, 0.08), rgba(167, 139, 250, 0.05));
	border-color: rgba(99, 102, 241, 0.22);
}

html[data-sfp-theme='dark'] .sfp-dash-wrap .sfp-dash-nav__link:hover:not(.is-active) {
	background: rgba(255, 255, 255, 0.05);
	color: #e2e8f0;
}

html[data-sfp-theme='dark'] .sfp-dash-wrap .sfp-dash-nav__link.is-active {
	background: linear-gradient(90deg, rgba(99, 102, 241, 0.28), rgba(236, 72, 153, 0.16));
	color: #c7d2fe;
	box-shadow: inset 3px 0 0 #818cf8, 0 1px 2px rgba(0, 0, 0, 0.3);
}

html[data-sfp-theme='dark'] .sfp-dash-wrap .sfp-card,
html[data-sfp-theme='dark'] .sfp-dash-wrap .sfp-survey-card,
html[data-sfp-theme='dark'] .sfp-dash-wrap .sfp-tpl-card,
html[data-sfp-theme='dark'] .sfp-dash-wrap .sfp-data-dash__tablewrap,
html[data-sfp-theme='dark'] .sfp-dash-wrap .sfp-kpi {
	border-color: rgba(129, 140, 248, 0.18);
}

html[data-sfp-theme='dark'] .sfp-dash-wrap .sfp-survey-card:hover,
html[data-sfp-theme='dark'] .sfp-dash-wrap .sfp-tpl-card:hover {
	border-color: rgba(129, 140, 248, 0.4);
}

html[data-sfp-theme='dark'] .sfp-dash-wrap .sfp-btn--ghost:hover {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.22) 0%, rgba(129, 140, 248, 0.14) 100%);
	border-color: #818cf8;
	color: #c7d2fe;
}

html[data-sfp-theme='dark'] .sfp-dash-wrap .sfp-data-dash__table tbody tr:hover {
	background: rgba(129, 140, 248, 0.1);
}

html[data-sfp-theme='dark'] .sfp-dash-wrap .sfp-data-dash__table tbody tr:nth-child(even) {
	background: rgba(129, 140, 248, 0.04);
}

/* -----------------------------------------------------------------------
   Responsive — slightly tighter padding on small screens
   ----------------------------------------------------------------------- */
@media (max-width: 768px) {
	.sfp-dash-wrap .sfp-dash-main {
		padding: 52px 16px 40px;
	}

	.sfp-dash-wrap .sfp-dash-main__bar {
		padding: 14px 16px;
		margin-top: 14px;
		margin-bottom: 16px;
		border-radius: 12px;
	}

	.sfp-dash-wrap .sfp-dash-main__title {
		font-size: 20px;
	}

	.sfp-dash-wrap .sfp-surveys-list__title {
		font-size: 18px;
	}
}