/*!
 * Stunning Related — admin interface
 *
 * Design DNA: warm cream canvas, soft dune gradients, pastel icon tiles,
 * amber as the single interactive accent, generous rounding, calm typography.
 */

:root {
	/* Accent */
	--srpp-amber: #f0a02e;
	--srpp-amber-deep: #dc8b18;
	--srpp-amber-soft: #fdf0dc;
	--srpp-amber-tint: #fff8ee;

	/* Ink */
	--srpp-ink: #1b2138;
	--srpp-ink-2: #5c6478;
	--srpp-ink-3: #949cae;

	/* Surfaces */
	--srpp-card: #ffffff;
	--srpp-canvas: #fffcf8;
	--srpp-cream: #fdf4ea;
	--srpp-line: #f0e7dc;
	--srpp-line-2: #e8eaf0;

	/* Pastel tiles */
	--srpp-teal: #d9f2ec;
	--srpp-teal-ink: #2a9d87;
	--srpp-violet: #eae4fb;
	--srpp-violet-ink: #7558d6;
	--srpp-coral: #fce3dc;
	--srpp-coral-ink: #e0705a;
	--srpp-blue: #e2ecfd;
	--srpp-blue-ink: #3d7fe0;
	--srpp-pink: #fbe2ee;
	--srpp-pink-ink: #d45c98;
	--srpp-mint: #dff5e6;
	--srpp-mint-ink: #2f9e5e;

	/* Geometry */
	--srpp-r-lg: 20px;
	--srpp-r: 16px;
	--srpp-r-sm: 10px;
	--srpp-shadow: 0 1px 2px rgba(27, 33, 56, .04), 0 8px 24px -18px rgba(27, 33, 56, .28);

	/* Motion */
	--srpp-motion-fast: .18s;
	--srpp-motion-slow: .20s;
}

body.srpp-admin-page #wpcontent,
body.srpp-admin-page #wpbody-content {
	background: var(--srpp-canvas);
}

body.srpp-admin-page #wpfooter {
	background: transparent;
}

.srpp-wrap {
	max-width: 1520px;
	margin-right: 22px;
	padding-bottom: 30px;
}

.srpp-wrap * {
	box-sizing: border-box;
}

.srpp-wrap h1,
.srpp-wrap h2,
.srpp-wrap h3 {
	font-weight: 700;
	letter-spacing: -.01em;
}

/* ==================================================================
   Hero
   ================================================================== */

.srpp-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	align-items: center;
	justify-content: space-between;
	margin: 20px 0 20px;
	padding: 34px 36px;
	border: 1px solid var(--srpp-line);
	border-radius: var(--srpp-r-lg);
	background:
		radial-gradient(120% 150% at 8% 120%, #f9e2cd 0%, rgba(249, 226, 205, 0) 55%),
		radial-gradient(90% 120% at 92% 0%, #fdf1e2 0%, rgba(253, 241, 226, 0) 60%),
		linear-gradient(112deg, #fdf6ee 0%, #fcefe2 52%, #fbe9d9 100%);
}

/* Soft dunes, drawn rather than shipped as images. */
.srpp-hero::before,
.srpp-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.srpp-hero::before {
	left: -90px;
	bottom: -170px;
	width: 420px;
	height: 260px;
	background: rgba(255, 255, 255, .5);
}

.srpp-hero::after {
	right: 4%;
	bottom: -140px;
	width: 520px;
	height: 220px;
	background: rgba(240, 160, 46, .09);
}

.srpp-hero-left {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: flex-start;
	flex: 1 1 420px;
	min-width: 0;
}

.srpp-hero-inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
}

.srpp-hero-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 20px;
	background: linear-gradient(150deg, #ffb454, #ef8f22);
	color: #fff;
	box-shadow: 0 12px 24px -12px rgba(224, 138, 24, .85), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.srpp-hero-icon svg {
	width: 30px;
	height: 30px;
}

.srpp-hero-text h1 {
	margin: 0;
	padding: 0;
	color: var(--srpp-ink);
	font-size: 34px;
	line-height: 1.12;
	letter-spacing: -.025em;
}

.srpp-hero-text p {
	margin: 7px 0 0;
	color: #8a8579;
	font-size: 14.5px;
	max-width: 46ch;
}

.srpp-sparkle {
	margin-left: 8px;
	color: var(--srpp-amber);
	font-size: 18px;
	vertical-align: super;
}

.srpp-hero-action {
	position: relative;
	z-index: 1;
}

.srpp-hero-left:only-child {
	flex-basis: auto;
}

/* Highlight card floating on the right of the hero */

.srpp-highlights {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
	gap: 4px;
	max-width: 720px;
	padding: 16px 6px;
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: var(--srpp-r);
	background: rgba(255, 255, 255, .62);
	backdrop-filter: blur(6px);
}

.srpp-highlight {
	display: flex;
	gap: 11px;
	padding: 4px 14px;
}

.srpp-highlight+.srpp-highlight {
	border-left: 1px solid rgba(27, 33, 56, .07);
}

.srpp-highlight strong {
	display: block;
	color: var(--srpp-ink);
	font-size: 12.5px;
	line-height: 1.3;
}

.srpp-highlight span {
	display: block;
	margin-top: 4px;
	color: #8a8579;
	font-size: 11.5px;
	line-height: 1.45;
}

/* ==================================================================
   Icon tiles
   ================================================================== */

.srpp-tile {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 13px;
}

.srpp-tile svg {
	width: 19px;
	height: 19px;
}

.srpp-tile-lg {
	width: 54px;
	height: 54px;
	border-radius: 17px;
}

.srpp-tile-lg svg {
	width: 24px;
	height: 24px;
}

.srpp-tone-amber {
	background: var(--srpp-amber-soft);
	color: var(--srpp-amber-deep);
}

.srpp-tone-teal {
	background: var(--srpp-teal);
	color: var(--srpp-teal-ink);
}

.srpp-tone-violet {
	background: var(--srpp-violet);
	color: var(--srpp-violet-ink);
}

.srpp-tone-coral {
	background: var(--srpp-coral);
	color: var(--srpp-coral-ink);
}

.srpp-tone-blue {
	background: var(--srpp-blue);
	color: var(--srpp-blue-ink);
}

.srpp-tone-pink {
	background: var(--srpp-pink);
	color: var(--srpp-pink-ink);
}

.srpp-tone-mint {
	background: var(--srpp-mint);
	color: var(--srpp-mint-ink);
}

/* ==================================================================
   Feature strip
   ================================================================== */

.srpp-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0;
	margin: 0 0 20px;
	padding: 26px 10px;
	border: 1px solid var(--srpp-line);
	border-radius: var(--srpp-r-lg);
	background: var(--srpp-card);
	box-shadow: var(--srpp-shadow);
}

.srpp-feature {
	display: flex;
	gap: 16px;
	padding: 4px 26px;
}

.srpp-feature+.srpp-feature {
	border-left: 1px solid var(--srpp-line);
}

.srpp-feature h3 {
	margin: 4px 0 6px;
	color: var(--srpp-ink);
	font-size: 15px;
}

.srpp-feature p {
	margin: 0;
	color: var(--srpp-ink-2);
	font-size: 12.8px;
	line-height: 1.62;
}

@media (max-width: 1100px) {
	.srpp-feature+.srpp-feature {
		border-left: 0;
		border-top: 1px solid var(--srpp-line);
		padding-top: 20px;
		margin-top: 16px;
	}
}

/* ==================================================================
   Panels
   ================================================================== */

.srpp-panel {
	margin: 0 0 20px;
	border: 1px solid var(--srpp-line);
	border-radius: var(--srpp-r-lg);
	background: var(--srpp-card);
	box-shadow: var(--srpp-shadow);
}

.srpp-panel>h2 {
	margin: 0;
	padding: 20px 26px;
	color: var(--srpp-ink);
	font-size: 16px;
}

.srpp-panel>h2+table {
	border-top: 1px solid var(--srpp-line);
}

.srpp-panel>p {
	margin: 0;
	padding: 0 26px 20px;
	color: var(--srpp-ink-2);
	font-size: 13.5px;
}

/* Section head with icon tile + filters, as on the reference */

.srpp-section-head {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding: 22px 26px;
	border-bottom: 1px solid var(--srpp-line);
}

.srpp-section-title {
	display: flex;
	align-items: center;
	gap: 14px;
}

.srpp-section-title h2 {
	margin: 0;
	padding: 0;
	color: var(--srpp-ink);
	font-size: 18px;
}

.srpp-section-title p {
	margin: 3px 0 0;
	color: var(--srpp-ink-3);
	font-size: 12.5px;
}

.srpp-section-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* Step panels in the editor — collapsible accordion */

.srpp-step {
	overflow: hidden;
}

/* The summary IS the clickable header */
.srpp-step>summary {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 22px 26px;
	border-bottom: 1px solid transparent;
	cursor: pointer;
	list-style: none;
	transition: border-color var(--srpp-motion-slow) ease, background var(--srpp-motion-slow) ease;
	-webkit-user-select: none;
	user-select: none;
}

.srpp-step[open]>summary {
	border-bottom-color: var(--srpp-line);
	background: var(--srpp-amber-tint);
}

.srpp-step>summary::-webkit-details-marker,
.srpp-step>summary::marker {
	display: none;
	content: "";
}

.srpp-step>summary:focus-visible {
	outline: 2px solid var(--srpp-amber);
	outline-offset: -2px;
	border-radius: var(--srpp-r-lg);
}

.srpp-step-head {
	/* alias kept for the summary element itself */
}

.srpp-step-head h2 {
	margin: 0;
	font-size: 17px;
	color: var(--srpp-ink);
	flex: 1;
}

.srpp-step-head p {
	margin: 5px 0 0;
	color: var(--srpp-ink-3);
	font-size: 13px;
	max-width: 70ch;
}

.srpp-step-num {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 12px;
	background: var(--srpp-amber-soft);
	color: var(--srpp-amber-deep);
	font-size: 14px;
	font-weight: 800;
}

/* Chevron indicator */
.srpp-step-chevron {
	flex: 0 0 auto;
	align-self: center;
	margin-left: auto;
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	border-radius: 6px;
	background: var(--srpp-amber-soft);
	color: var(--srpp-amber-deep);
	font-size: 13px;
	transition: transform var(--srpp-motion-slow) ease;
}

.srpp-step-chevron::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform var(--srpp-motion-slow) ease;
}

.srpp-step[open]>summary .srpp-step-chevron::before {
	transform: rotate(-135deg) translate(-1px, -1px);
}

.srpp-step-body {
	padding: 8px 26px 22px;
}

/* Open / close motion for the step accordion and the "Customize template"
   disclosure. ::details-content is the native <details> panel; pairing it
   with interpolate-size lets the collapse animate to and from height:auto.
   Browsers without support ignore all of this and open instantly, as before. */

.srpp-step,
.srpp-customize {
	interpolate-size: allow-keywords;
}

.srpp-step::details-content,
.srpp-customize::details-content {
	block-size: 0;
	opacity: 0;
	overflow: hidden;
	transition: block-size var(--srpp-motion-slow) ease,
		opacity var(--srpp-motion-fast) ease,
		content-visibility var(--srpp-motion-slow) allow-discrete;
}

.srpp-step[open]::details-content,
.srpp-customize[open]::details-content {
	block-size: auto;
	opacity: 1;
}

/* The body rides up slightly as the panel folds shut. */
.srpp-step-body,
.srpp-customize-body {
	transition: transform var(--srpp-motion-slow) ease;
}

.srpp-step:not([open]) .srpp-step-body,
.srpp-customize:not([open]) .srpp-customize-body {
	transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {

	.srpp-step>summary,
	.srpp-step-chevron,
	.srpp-step-chevron::before,
	.srpp-step::details-content,
	.srpp-customize::details-content,
	.srpp-step-body,
	.srpp-customize-body {
		transition: none;
	}

	.srpp-step:not([open]) .srpp-step-body,
	.srpp-customize:not([open]) .srpp-customize-body {
		transform: none;
	}
}


/* ==================================================================
   Buttons
   ================================================================== */

.srpp-wrap .button,
.srpp-wrap .button-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: auto;
	min-height: 38px;
	padding: 8px 18px;
	border: 1px solid var(--srpp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--srpp-ink);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: none;
	transition: .16s;
}

.srpp-wrap .button:hover {
	border-color: #e2d3c1;
	background: var(--srpp-amber-tint);
	color: var(--srpp-ink);
}

.srpp-wrap .button-primary {
	border-color: transparent;
	background: linear-gradient(150deg, #ffb454, #ef8f22);
	color: #fff;
	box-shadow: 0 10px 20px -12px rgba(224, 138, 24, .95);
}

.srpp-wrap .button-primary:hover,
.srpp-wrap .button-primary:focus {
	background: linear-gradient(150deg, #ffab3f, #e2820f);
	border-color: transparent;
	color: #fff;
}

.srpp-wrap .button-hero {
	min-height: 46px;
	padding: 11px 26px;
	font-size: 14.5px;
}

.srpp-wrap .button:focus {
	box-shadow: 0 0 0 3px rgba(240, 160, 46, .25);
	outline: 0;
}

.srpp-wrap .srpp-danger {
	color: #c0563f;
	border-color: #efd6cd;
}

.srpp-wrap .srpp-danger:hover {
	background: #fdf1ec;
}

/* ==================================================================
   Fields
   ================================================================== */

.srpp-field {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: 22px;
	align-items: start;
	padding: 18px 0;
	border-bottom: 1px solid #f6f1ea;
}

.srpp-field:last-child {
	border-bottom: 0;
}

.srpp-field-label label {
	display: block;
	color: var(--srpp-ink);
	font-size: 13.5px;
	font-weight: 650;
}

.srpp-help {
	display: block;
	margin-top: 4px;
	color: var(--srpp-ink-3);
	font-size: 12px;
	line-height: 1.55;
}

.srpp-input {
	min-height: 38px;
	padding: 7px 14px;
	border: 1px solid #e9e1d6;
	border-radius: var(--srpp-r-sm);
	background: #fff;
	color: var(--srpp-ink);
	font-size: 13.5px;
	box-shadow: none;
	transition: .16s;
}

.srpp-input:focus {
	border-color: var(--srpp-amber);
	box-shadow: 0 0 0 3px rgba(240, 160, 46, .16);
	outline: 0;
}

.srpp-input-wide {
	width: 100%;
	max-width: 480px;
}

select.srpp-input {
	min-width: 230px;
}

.srpp-number {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-right: 12px;
}

.srpp-number input {
	width: 104px;
}

.srpp-number em {
	color: var(--srpp-ink-3);
	font-style: normal;
	font-size: 12px;
}

.srpp-multi {
	min-width: 220px;
	padding: 8px;
	border: 1px solid #e9e1d6;
	border-radius: var(--srpp-r-sm);
	background: #fff;
}

/* Search field with icon, as on the reference */

.srpp-search {
	position: relative;
}

.srpp-search .srpp-input {
	width: 280px;
	padding-right: 40px;
	border-radius: 999px;
}

.srpp-search svg {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	color: var(--srpp-ink-3);
	pointer-events: none;
}

/* Filter pills */

.srpp-pill-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.srpp-pill-check input {
	position: absolute;
	opacity: 0;
}

.srpp-pill-check span {
	display: inline-block;
	padding: 8px 17px;
	border: 1px solid #ece3d8;
	border-radius: 999px;
	background: #fff;
	color: var(--srpp-ink-2);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: .16s;
}

.srpp-pill-check span:hover {
	border-color: #e0d0ba;
	background: var(--srpp-amber-tint);
}

.srpp-pill-check input:checked+span {
	border-color: transparent;
	background: linear-gradient(150deg, #ffb454, #ef8f22);
	color: #fff;
	box-shadow: 0 8px 16px -10px rgba(224, 138, 24, .9);
}

.srpp-pill-check input:focus-visible+span {
	box-shadow: 0 0 0 3px rgba(240, 160, 46, .28);
}

/* Radio cards */

.srpp-radio-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.srpp-radio-card {
	position: relative;
	min-width: 176px;
	max-width: 272px;
	padding: 14px 16px;
	border: 1px solid #ece3d8;
	border-radius: var(--srpp-r);
	background: #fff;
	cursor: pointer;
	transition: .16s;
}

.srpp-radio-card:hover {
	border-color: #e2d0b6;
	background: var(--srpp-amber-tint);
}

.srpp-radio-card input {
	position: absolute;
	opacity: 0;
}

.srpp-radio-card strong {
	display: block;
	color: var(--srpp-ink);
	font-size: 13.5px;
}

.srpp-radio-card span {
	display: block;
	margin-top: 4px;
	color: var(--srpp-ink-3);
	font-size: 12px;
	line-height: 1.5;
}

.srpp-radio-card.is-selected {
	border-color: var(--srpp-amber);
	background: var(--srpp-amber-tint);
	box-shadow: 0 0 0 1px var(--srpp-amber) inset;
}

/* Toggle */

.srpp-toggle {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	cursor: pointer;
}

.srpp-toggle input[type="checkbox"] {
	position: absolute;
	opacity: 0;
}

.srpp-toggle .srpp-track {
	position: relative;
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: #e4ddd3;
	transition: .18s;
}

.srpp-toggle .srpp-track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(27, 33, 56, .28);
	transition: .18s;
}

.srpp-toggle input:checked+.srpp-track {
	background: linear-gradient(150deg, #ffb454, #ef8f22);
}

.srpp-toggle input:checked+.srpp-track::after {
	transform: translateX(18px);
}

.srpp-toggle-label {
	color: var(--srpp-ink-2);
	font-size: 13px;
}

.srpp-toggle-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Weights */

.srpp-weights {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(198px, 1fr));
	gap: 10px;
	max-width: 660px;
}

.srpp-weight {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--srpp-line);
	border-radius: 12px;
	background: var(--srpp-cream);
	font-size: 12.4px;
	line-height: 1.35;
	color: var(--srpp-ink-2);
}

.srpp-weight input {
	width: 62px;
	padding: 5px 9px;
	border: 1px solid #e9ddcb;
	border-radius: 8px;
	background: #fff;
}

.srpp-formula {
	margin: 12px 0 0;
}

.srpp-formula code {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 10px;
	background: var(--srpp-cream);
	color: var(--srpp-ink-2);
	font-size: 12px;
}

/* Columns */

.srpp-cols {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.srpp-col-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12px;
	color: var(--srpp-ink-3);
}

.srpp-col-field input {
	width: 100px;
}

/* Pickers */

.srpp-picker {
	max-width: 540px;
}

.srpp-picker-sm {
	max-width: 100%;
}

.srpp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 9px;
}

.srpp-chip-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 8px 5px 13px;
	border: 1px solid var(--srpp-line);
	border-radius: 999px;
	background: var(--srpp-cream);
	font-size: 12.5px;
	color: var(--srpp-ink);
}

.srpp-chip-x {
	border: 0;
	background: none;
	color: var(--srpp-ink-3);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
}

.srpp-chip-x:hover {
	color: var(--srpp-amber-deep);
}

.srpp-picker-search {
	width: 100%;
	border-radius: 999px;
}

.srpp-picker-results {
	display: none;
	margin-top: 6px;
	max-height: 240px;
	overflow: auto;
	border: 1px solid var(--srpp-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 16px 34px -18px rgba(27, 33, 56, .4);
	z-index: 20;
}

.srpp-picker-results.is-open {
	display: block;
}

.srpp-result {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px;
	cursor: pointer;
	font-size: 13px;
	border-bottom: 1px solid #f7f2eb;
}

.srpp-result:last-child {
	border-bottom: 0;
}

.srpp-result:hover {
	background: var(--srpp-amber-tint);
}

.srpp-result em {
	color: var(--srpp-ink-3);
	font-style: normal;
	font-size: 11.5px;
}

/* Term rules */

.srpp-term-rules {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
	gap: 14px;
	max-width: 740px;
}

.srpp-term-tax {
	display: block;
	margin-bottom: 5px;
	font-size: 11px;
	font-weight: 700;
	color: var(--srpp-ink-3);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.srpp-term-rule select {
	width: 100%;
}

/* ==================================================================
   Editor shell
   ================================================================== */

.srpp-editor {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 440px;
	gap: 22px;
	align-items: start;
}

.srpp-editor-side {
	position: sticky;
	top: 48px;
}

@media (max-width: 1400px) {
	.srpp-editor {
		grid-template-columns: minmax(0, 1fr);
	}

	.srpp-editor-side {
		position: static;
	}
}




.srpp-namebar {
	display: flex;
	gap: 24px;
	align-items: center;
	padding: 20px 26px;
}

.srpp-namebar-field {
	flex: 1 1 auto;
}

.srpp-namebar-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 700;
	color: var(--srpp-ink-3);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.srpp-title-input {
	width: 100%;
	font-size: 16px;
	font-weight: 600;
}

/* Template picker */

.srpp-template-picker {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
	gap: 14px;
}

.srpp-template-option {
	position: relative;
	display: block;
	padding: 12px;
	border: 1px solid #ece3d8;
	border-radius: var(--srpp-r);
	background: #fff;
	cursor: pointer;
	transition: .16s;
}

.srpp-template-option:hover {
	border-color: #e2d0b6;
}

.srpp-template-option input {
	position: absolute;
	opacity: 0;
}

.srpp-template-option strong {
	display: block;
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--srpp-ink);
}

.srpp-template-option em {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	font-style: normal;
	color: var(--srpp-ink-3);
	line-height: 1.45;
}

.srpp-template-option.is-selected {
	border-color: var(--srpp-amber);
	background: var(--srpp-amber-tint);
	box-shadow: 0 0 0 1px var(--srpp-amber) inset, 0 10px 22px -14px rgba(224, 138, 24, .9);
}

/* CSS-drawn template miniatures, warmed to match the palette */

.srpp-tpl-thumb {
	position: relative;
	display: block;
	height: 82px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--srpp-cream);
	border: 1px solid var(--srpp-line);
}

.srpp-tpl-thumb::before,
.srpp-tpl-thumb::after {
	content: "";
	position: absolute;
	background: #e3d5c3;
	border-radius: 4px;
}

.srpp-thumb-tpl-01::before {
	left: 12px;
	right: 12px;
	top: 22px;
	height: 7px;
}

.srpp-thumb-tpl-01::after {
	left: 12px;
	right: 38px;
	top: 42px;
	height: 7px;
}

.srpp-thumb-tpl-02::before {
	left: 12px;
	top: 16px;
	bottom: 16px;
	width: 32px;
	background: #d3c1aa;
}

.srpp-thumb-tpl-02::after {
	left: 52px;
	right: 12px;
	top: 27px;
	height: 9px;
}

.srpp-thumb-tpl-03::before {
	left: 12px;
	right: 12px;
	top: 12px;
	height: 36px;
	background: #d3c1aa;
}

.srpp-thumb-tpl-03::after {
	left: 12px;
	right: 34px;
	top: 56px;
	height: 8px;
}

.srpp-thumb-tpl-04::before {
	left: 12px;
	top: 20px;
	height: 42px;
	width: 46px;
	background: #d3c1aa;
}

.srpp-thumb-tpl-04::after {
	left: 66px;
	right: 12px;
	top: 29px;
	height: 8px;
}

.srpp-thumb-tpl-05::before {
	left: 12px;
	top: 12px;
	bottom: 12px;
	width: 52%;
	background: #d3c1aa;
}

.srpp-thumb-tpl-05::after {
	right: 12px;
	top: 12px;
	width: 32%;
	height: 28px;
}

.srpp-thumb-tpl-06::before {
	left: 12px;
	top: 20px;
	width: 13px;
	height: 9px;
	background: var(--srpp-amber);
}

.srpp-thumb-tpl-06::after {
	left: 33px;
	right: 12px;
	top: 20px;
	height: 9px;
}

.srpp-thumb-tpl-07 {
	background: linear-gradient(140deg, #fdf3e8, #f7e6ee);
}

.srpp-thumb-tpl-07::before {
	left: 14px;
	right: 14px;
	top: 14px;
	height: 32px;
	background: rgba(255, 255, 255, .9);
}

.srpp-thumb-tpl-07::after {
	left: 14px;
	right: 42px;
	top: 54px;
	height: 8px;
	background: #dfcdb8;
}

.srpp-thumb-tpl-08::before {
	left: 12px;
	top: 14px;
	bottom: 14px;
	width: 40%;
	background: #d3c1aa;
}

.srpp-thumb-tpl-08::after {
	right: 12px;
	top: 27px;
	width: 42%;
	height: 10px;
}

.srpp-thumb-tpl-09::before {
	left: 12px;
	top: 33px;
	width: 62px;
	height: 17px;
	border-radius: 999px;
}

.srpp-thumb-tpl-09::after {
	left: 82px;
	top: 33px;
	width: 50px;
	height: 17px;
	border-radius: 999px;
}

.srpp-thumb-tpl-10::before {
	left: 14px;
	right: 14px;
	top: 10px;
	height: 34px;
	background: #d3c1aa;
}

.srpp-thumb-tpl-10::after {
	left: 36px;
	right: 36px;
	top: 54px;
	height: 13px;
	border-radius: 999px;
	background: var(--srpp-amber);
}

.srpp-thumb-tpl-11::before {
	left: 12px;
	top: 29px;
	width: 24px;
	height: 24px;
	background: #d3c1aa;
}

.srpp-thumb-tpl-11::after {
	left: 44px;
	right: 44px;
	top: 37px;
	height: 9px;
}

.srpp-thumb-tpl-12::before {
	left: 10px;
	top: 18px;
	width: 48px;
	height: 46px;
	background: #d3c1aa;
}

.srpp-thumb-tpl-12::after {
	left: 64px;
	top: 18px;
	width: 48px;
	height: 46px;
	background: #e6d9c8;
}

/* Disclosure panel ("Customize template" inside step 4) */

.srpp-customize {
	margin-top: 6px;
}

.srpp-customize>summary {
	padding: 14px 0;
	color: var(--srpp-ink);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.srpp-customize>summary::-webkit-details-marker,
.srpp-customize>summary::marker {
	display: none;
	content: "";
}

.srpp-customize>summary::before {
	content: "＋";
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-right: 10px;
	border-radius: 7px;
	background: var(--srpp-amber-soft);
	color: var(--srpp-amber-deep);
	font-size: 13px;
	vertical-align: -5px;
}

.srpp-customize[open]>summary::before {
	content: "－";
}

.srpp-customize-body {
	padding: 0 0 14px;
}

.srpp-color-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}

.srpp-color span {
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	color: var(--srpp-ink-3);
}

.srpp-slider-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
	gap: 14px;
}

.srpp-slider {
	display: block;
	font-size: 12px;
	color: var(--srpp-ink-3);
}

.srpp-slider span {
	display: block;
	margin-bottom: 5px;
}

.srpp-slider input[type="range"] {
	width: calc(100% - 46px);
	vertical-align: middle;
	accent-color: var(--srpp-amber);
}

.srpp-slider output {
	display: inline-block;
	width: 40px;
	text-align: right;
	color: var(--srpp-ink);
	font-weight: 700;
}

/* ==================================================================
   Live preview
   ================================================================== */

.srpp-preview-card {
	overflow: hidden;
	border: 1px solid var(--srpp-line);
	border-radius: var(--srpp-r-lg);
	background: #fff;
	box-shadow: var(--srpp-shadow);
}

.srpp-preview-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--srpp-line);
}

.srpp-preview-head h2 {
	margin: 0;
	font-size: 15px;
	color: var(--srpp-ink);
}

.srpp-devices {
	display: flex;
	gap: 5px;
}

.srpp-device {
	position: relative;
	width: 34px;
	height: 30px;
	border: 1px solid var(--srpp-line);
	border-radius: 9px;
	background: #fff;
	color: var(--srpp-ink-3);
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	transition: .16s;
	display: grid;
	place-items: center;
}

.srpp-device svg {
	width: 15px;
	height: 15px;
}

.srpp-device:hover {
	background: var(--srpp-amber-tint);
}

.srpp-device.is-active {
	border-color: var(--srpp-amber);
	color: var(--srpp-amber-deep);
	background: var(--srpp-amber-soft);
}

/* Wide-screen: popup-trigger buttons get a tiny expand arrow cue */
@media (min-width: 1401px) {
	.srpp-device[data-popup="1"]::after {
		content: "↗";
		position: absolute;
		bottom: 1px;
		right: 2px;
		font-size: 7px;
		line-height: 1;
		color: var(--srpp-amber);
		pointer-events: none;
	}
}

.srpp-preview-stage {
	padding: 22px;
	min-height: 240px;
	overflow: auto;
	background:
		radial-gradient(90% 120% at 100% 0%, #fdf2e5 0%, rgba(253, 242, 229, 0) 60%),
		var(--srpp-cream);
}

.srpp-preview-body {
	margin: 0 auto;
	padding: 18px;
	background: #fff;
	border-radius: var(--srpp-r);
	box-shadow: 0 10px 26px -18px rgba(27, 33, 56, .5);
	transition: max-width .25s ease;
}

.srpp-device-desktop .srpp-preview-body {
	max-width: 100%;
}

.srpp-device-tablet .srpp-preview-body {
	max-width: 760px;
}

.srpp-device-mobile .srpp-preview-body {
	max-width: 390px;
}

.srpp-preview-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px;
	border-top: 1px solid var(--srpp-line);
}

.srpp-preview-note {
	color: var(--srpp-ink-3);
	font-size: 11.5px;
}

.srpp-preview-body.is-loading {
	opacity: .45;
}

.srpp-device-tablet .srpp-preview-body .srpp {
	--srpp-cols: var(--srpp-cols-t, 2);
}

.srpp-device-mobile .srpp-preview-body .srpp {
	--srpp-cols: var(--srpp-cols-m, 1);
}

/* ── Preview Popup (wide-screen desktop/tablet view) ── */

.srpp-preview-popup {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.srpp-preview-popup[hidden] {
	display: none;
}

.srpp-popup-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(27, 33, 56, .55);
	backdrop-filter: blur(4px);
	animation: srppFadeIn .2s ease;
}

@keyframes srppFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes srppSlideUp {
	from {
		opacity: 0;
		transform: translateY(24px) scale(.97);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.srpp-popup-shell {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: calc(100vw - 80px);
	max-width: 1400px;
	max-height: calc(100vh - 80px);
	background: #fff;
	border-radius: var(--srpp-r-lg);
	box-shadow: 0 32px 80px -20px rgba(27, 33, 56, .55), 0 0 0 1px rgba(27, 33, 56, .08);
	overflow: hidden;
	animation: srppSlideUp .22s ease;
}

.srpp-popup-head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 22px;
	border-bottom: 1px solid var(--srpp-line);
	background: var(--srpp-canvas);
	flex-shrink: 0;
}

.srpp-popup-head h2 {
	margin: 0;
	font-size: 15px;
	color: var(--srpp-ink);
	flex: 1;
}

.srpp-popup-close {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 1px solid var(--srpp-line);
	border-radius: 50%;
	background: #fff;
	color: var(--srpp-ink-3);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: .16s;
	flex-shrink: 0;
}

.srpp-popup-close:hover {
	background: var(--srpp-amber-tint);
	color: var(--srpp-amber-deep);
	border-color: var(--srpp-amber);
}

.srpp-popup-stage {
	flex: 1;
	overflow: auto;
	padding: 28px;
	background:
		radial-gradient(90% 120% at 100% 0%, #fdf2e5 0%, rgba(253, 242, 229, 0) 60%),
		var(--srpp-cream);
}

.srpp-popup-body {
	margin: 0 auto;
	padding: 24px;
	background: #fff;
	border-radius: var(--srpp-r);
	box-shadow: 0 10px 26px -18px rgba(27, 33, 56, .5);
	transition: max-width .28s ease;
}

/* Device widths inside the popup */
.srpp-popup-stage.srpp-popup-desktop .srpp-popup-body {
	max-width: 100%;
}

.srpp-popup-stage.srpp-popup-tablet .srpp-popup-body {
	max-width: 768px;
}

/* Column overrides inside popup */
.srpp-popup-stage.srpp-popup-tablet .srpp-popup-body .srpp {
	--srpp-cols: var(--srpp-cols-t, 2);
}

.srpp-popup-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 22px;
	border-top: 1px solid var(--srpp-line);
	background: var(--srpp-canvas);
	flex-shrink: 0;
	flex-wrap: wrap;
}

/* ── Template navigator ── */

.srpp-tpl-nav {
	display: inline-flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--srpp-line);
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(27, 33, 56, .06);
}

.srpp-tpl-nav-btn {
	display: grid;
	place-items: center;
	width: 36px;
	height: 34px;
	border: 0;
	background: transparent;
	color: var(--srpp-ink-2);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background .14s, color .14s;
	flex-shrink: 0;
	letter-spacing: -.04em;
}

.srpp-tpl-nav-btn:hover {
	background: var(--srpp-amber-tint);
	color: var(--srpp-amber-deep);
}

.srpp-tpl-nav-btn:disabled {
	opacity: .35;
	cursor: default;
}

.srpp-tpl-nav-btn:disabled:hover {
	background: transparent;
	color: var(--srpp-ink-2);
}

.srpp-tpl-nav-label {
	display: inline-block;
	min-width: 130px;
	padding: 0 10px;
	text-align: center;
	font-size: 12.5px;
	font-weight: 650;
	color: var(--srpp-ink);
	border-left: 1px solid var(--srpp-line);
	border-right: 1px solid var(--srpp-line);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 34px;
	animation: srppLabelFade .18s ease;
}

@keyframes srppLabelFade {
	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Only show popup on wide screens; hide on narrower screens */
@media (max-width: 1400px) {
	.srpp-preview-popup {
		display: none !important;
	}
}


/* ==================================================================
   Tables
   ================================================================== */

.srpp-table {
	border: 0;
	background: transparent;
	border-collapse: collapse;
}

.srpp-table thead th {
	padding: 14px 22px;
	border-bottom: 1px solid var(--srpp-line);
	color: var(--srpp-ink-3);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
}

.srpp-table td {
	padding: 16px 22px;
	border-bottom: 1px solid #f7f2eb;
	vertical-align: middle;
	color: var(--srpp-ink-2);
	font-size: 13px;
	background: transparent;
}

.srpp-table tbody tr:last-child td {
	border-bottom: 0;
}

.srpp-table tbody tr {
	transition: background .15s;
}

.srpp-table tbody tr:hover td {
	background: #fffaf3;
}

.srpp-col-name {
	min-width: 260px;
}

.srpp-name-cell {
	display: flex;
	align-items: center;
	gap: 13px;
}

.srpp-name {
	display: block;
	color: var(--srpp-ink);
	font-size: 14px;
	font-weight: 650;
	text-decoration: none;
}

.srpp-name:hover {
	color: var(--srpp-amber-deep);
}

.srpp-sub {
	display: block;
	margin-top: 4px;
	color: var(--srpp-ink-3);
	font-size: 11.5px;
	white-space: nowrap;
}

.srpp-avatar {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .02em;
}

.srpp-avatar.srpp-tone-teal {
	background: #3fb9a1;
}

.srpp-avatar.srpp-tone-coral {
	background: #ef8168;
}

.srpp-avatar.srpp-tone-amber {
	background: #f3a63c;
}

.srpp-avatar.srpp-tone-violet {
	background: #8b6ce0;
}

.srpp-avatar.srpp-tone-blue {
	background: #5a92e8;
}

.srpp-avatar.srpp-tone-pink {
	background: #e279ad;
}

.srpp-row-actions {
	margin-top: 6px;
	font-size: 12px;
	opacity: 0;
	transition: opacity .15s;
}

.srpp-table tbody tr:hover .srpp-row-actions,
.srpp-row-actions:focus-within {
	opacity: 1;
}

.srpp-row-actions a {
	text-decoration: none;
	color: var(--srpp-ink-2);
}

.srpp-row-actions a:hover {
	color: var(--srpp-amber-deep);
}

.srpp-row-actions .srpp-delete {
	color: #c0563f;
}

.srpp-dot-sep {
	color: #ddd3c6;
}

.srpp-chevron {
	color: #cfc4b5;
	display: inline-flex;
}

.srpp-table tbody tr:hover .srpp-chevron {
	color: var(--srpp-amber);
}

/* Badges */

.srpp-status {
	display: inline-block;
	padding: 5px 13px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .01em;
}

.srpp-status.is-active {
	background: var(--srpp-mint);
	color: #1f8a52;
}

.srpp-status.is-paused {
	background: #f2efeb;
	color: #948b7e;
}

.srpp-status.is-new {
	background: var(--srpp-amber-soft);
	color: var(--srpp-amber-deep);
}

.srpp-status.is-info {
	background: var(--srpp-blue);
	color: #2f6fce;
}

.srpp-copy {
	display: inline-block;
	white-space: nowrap;
	padding: 6px 12px;
	border-radius: 9px;
	background: var(--srpp-cream);
	color: var(--srpp-ink-2);
	font-size: 12px;
	cursor: pointer;
	transition: .16s;
}

.srpp-copy:hover {
	background: var(--srpp-amber-soft);
	color: var(--srpp-amber-deep);
}

.srpp-copy.is-copied {
	background: var(--srpp-mint);
	color: #1f8a52;
}

/* ==================================================================
   Analytics
   ================================================================== */

.srpp-range {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}

.srpp-chip {
	padding: 8px 17px;
	border: 1px solid var(--srpp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--srpp-ink-2);
	font-size: 12.8px;
	font-weight: 600;
	text-decoration: none;
	transition: .16s;
}

.srpp-chip:hover {
	background: var(--srpp-amber-tint);
	color: var(--srpp-ink);
}

.srpp-chip.is-active {
	border-color: transparent;
	background: linear-gradient(150deg, #ffb454, #ef8f22);
	color: #fff;
	box-shadow: 0 8px 16px -10px rgba(224, 138, 24, .9);
}

.srpp-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
	margin-bottom: 22px;
}

.srpp-stat {
	display: flex;
	gap: 15px;
	align-items: flex-start;
	padding: 22px 24px;
	border: 1px solid var(--srpp-line);
	border-radius: var(--srpp-r-lg);
	background: #fff;
	box-shadow: var(--srpp-shadow);
}

.srpp-stat-body span {
	display: block;
	color: var(--srpp-ink-3);
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.srpp-stat-body strong {
	display: block;
	margin-top: 7px;
	color: var(--srpp-ink);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1;
}

.srpp-stat-accent {
	border-color: transparent;
	background:
		radial-gradient(120% 160% at 100% 0%, #fdf0dc 0%, rgba(253, 240, 220, 0) 60%),
		linear-gradient(135deg, #fff6ea, #fdeddb);
}

.srpp-ctr {
	font-weight: 700;
	color: var(--srpp-amber-deep);
}

.srpp-empty {
	padding: 22px 26px;
	color: var(--srpp-ink-3);
	font-size: 13px;
}

/* ==================================================================
   Gallery, tools, cheat sheet, footnote
   ================================================================== */

.srpp-template-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
	gap: 18px;
}

.srpp-template-card {
	padding: 16px;
	border: 1px solid var(--srpp-line);
	border-radius: var(--srpp-r-lg);
	background: #fff;
	box-shadow: var(--srpp-shadow);
}

.srpp-template-card h3 {
	margin: 12px 0 5px;
	font-size: 14.5px;
	color: var(--srpp-ink);
}

.srpp-template-card p {
	margin: 0 0 7px;
	color: var(--srpp-ink-2);
	font-size: 12.5px;
	line-height: 1.6;
}

.srpp-tpl-meta {
	color: var(--srpp-ink-3) !important;
	font-size: 11.5px !important;
}

.srpp-tpl-thumb span {
	display: none;
}

.srpp-tool-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px;
	margin-bottom: 20px;
}

.srpp-tool {
	padding: 24px 26px;
	margin: 0;
}

.srpp-tool h2 {
	margin: 14px 0 7px;
	padding: 0;
	font-size: 16px;
}

.srpp-tool p {
	padding: 0 0 16px;
}

.srpp-import-form {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 0 26px 22px;
	flex-wrap: wrap;
}

.srpp-cheat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	padding: 22px 26px;
}

.srpp-cheat-grid h3 {
	margin: 0 0 8px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--srpp-ink-3);
}

.srpp-cheat-grid code {
	display: inline-block;
	padding: 8px 13px;
	border-radius: 10px;
	background: var(--srpp-cream);
	color: var(--srpp-ink);
	font-size: 12.5px;
}

.srpp-cheat-grid p {
	padding: 8px 0 0;
	font-size: 12px;
	color: var(--srpp-ink-3);
	line-height: 1.55;
}

.srpp-zero {
	padding: 54px 40px;
	text-align: center;
}

.srpp-zero .srpp-tile {
	margin: 0 auto 16px;
}

.srpp-zero h2 {
	padding: 0;
	font-size: 20px;
}

.srpp-zero p {
	padding: 8px 0 22px;
	max-width: 52ch;
	margin: 0 auto;
}

/* Footnote band, mirroring the reference footer */

.srpp-footnote {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 20px;
	padding: 22px 26px;
	border: 1px solid var(--srpp-line);
	border-radius: var(--srpp-r-lg);
	background:
		radial-gradient(80% 140% at 0% 100%, #fbe9d6 0%, rgba(251, 233, 214, 0) 62%),
		var(--srpp-cream);
}

.srpp-footnote-main {
	display: flex;
	gap: 16px;
	align-items: center;
}

.srpp-footnote strong {
	display: block;
	color: var(--srpp-ink);
	font-size: 14px;
}

.srpp-footnote p {
	margin: 4px 0 0;
	padding: 0;
	color: var(--srpp-ink-2);
	font-size: 12.8px;
}

/* Sticky save bar */

.srpp-sticky-save {
	position: sticky;
	bottom: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 20px;
	padding: 14px 26px;
	border: 1px solid var(--srpp-line);
	border-radius: var(--srpp-r-lg) var(--srpp-r-lg) 0 0;
	background: rgba(255, 252, 248, .93);
	backdrop-filter: blur(8px);
	box-shadow: 0 -8px 22px -16px rgba(27, 33, 56, .55);
}

.srpp-save-hint {
	color: var(--srpp-ink-3);
	font-size: 12px;
}

/* ==================================================================
   Metabox
   ================================================================== */

.srpp-metabox .srpp-mb-mode {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	color: #1b2138;
}

.srpp-mb-label {
	margin: 14px 0 6px;
	font-size: 11px;
	font-weight: 700;
	color: #949cae;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.srpp-mb-help {
	margin-top: 12px;
	color: #949cae;
	font-size: 11.5px;
	line-height: 1.55;
}

.srpp-metabox .srpp-input {
	width: 100%;
	min-height: 34px;
	border-radius: 8px;
	border: 1px solid #e9e1d6;
}

.srpp-metabox .srpp-chip-item {
	background: #fdf4ea;
	border-color: #f0e7dc;
}

/* ==================================================================
   Notices + misc
   ================================================================== */

.srpp-wrap .notice {
	border-radius: 12px;
	border-left-width: 4px;
}

.srpp-hidden {
	display: none !important;
}

/* ── Notice Dock ────────────────────────────────────────────────────── */

.srpp-notice-dock {
	max-width: 1180px;
	margin-bottom: 16px;
	padding: 0;
	background: rgba(255, 255, 255, .85);
	border: 1px solid var(--srpp-line);
	border-radius: var(--srpp-r-sm);
	overflow: hidden;
}

.srpp-notice-summary {
	padding: 10px 16px;
	color: var(--srpp-ink-3);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.srpp-notice-summary::-webkit-details-marker {
	display: none;
}

.srpp-notice-summary::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 9px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(-45deg) translateY(-1px);
	transition: transform 0.15s ease;
}

.srpp-notice-dock[open] .srpp-notice-summary::before {
	transform: rotate(45deg);
}

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

.srpp-notice-list {
	padding: 0 12px 10px;
}

.srpp-notice-list .notice,
.srpp-notice-list .updated,
.srpp-notice-list .error,
.srpp-notice-list .update-nag {
	margin: 8px 0;
	border-radius: var(--srpp-r-sm);
}

@media (max-width: 782px) {
	.srpp-hero {
		padding: 24px;
	}

	.srpp-hero-text h1 {
		font-size: 26px;
	}

	.srpp-field {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.srpp-search .srpp-input {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   4. Form controls
   -------------------------------------------------------------------------- */

.srpp-wrap input[type="text"],
.srpp-wrap input[type="url"],
.srpp-wrap input[type="search"],
.srpp-wrap input[type="number"],
.srpp-wrap input[type="datetime-local"],
.srpp-wrap select,
.srpp-wrap textarea {
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 8px 12px;
	background-color: #fff;
	border: 1px solid var(--srpp-line);
	border-radius: var(--srpp-r-sm);
	box-shadow: none;
	color: var(--srpp-ink);
	font-family: inherit;
	font-size: 13px;
	line-height: 1.4;
	transition: border-color var(--srpp-motion-fast) ease, box-shadow var(--srpp-motion-fast) ease;
}