/* Smart LazyLoad logo palette — exact brand colors. */
:root {
	--smll-primary: #1632ff;
	--smll-primary-hover: #0866e8;
	--smll-primary-active: #1678ff;
	--smll-primary-soft: #eef4ff;
	--smll-primary-softer: #f7f9ff;
	--smll-primary-border: #d7e5ff;
	--smll-primary-focus: rgba(22, 120, 255, 0.16);
	--smll-secondary: #c78aff;
	--smll-accent: #1678ff;
	--smll-accent-hover-bg: #f8fbff;
	--smll-accent-hover-border: #1678ff;
	--smll-accent-hover-text: #1678ff;
	--smll-page-bg: #f6f7fb;
	--smll-surface: #ffffff;
	--smll-text: #242735;
	--smll-text-muted: #727786;
	--smll-border: #e4e7ef;
	--smll-border-soft: #eef0f5;
	--smll-success: #178b56;
	--smll-success-bg: #eaf9f0;
	--smll-danger: #b42318;
}

html {
	scroll-behavior: smooth;
}

.smll-settings {
	background: #f6f7fb;
	max-width: 100%;
	margin: 0 0 0-20px;
	padding: 20px 30px 50px;
}

.smll-settings * {
	box-sizing: border-box;
}

.smll-settings-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding: 30px 36px;
	background: radial-gradient(circle at 85% 10%,rgba(255,255,255,.12),transparent 32%),radial-gradient(circle at 10% 100%,rgba(255,255,255,.07),transparent 40%),linear-gradient(115deg,var(--smll-primary) 0%,var(--smll-primary-hover) 55%,var(--smll-primary-active) 100%);
	border-radius: 10px;
	margin-bottom: 20px;
	color: #fff;
	overflow: hidden
}

.smll-header-left,.smll-header-right {
	position: relative;
	z-index: 1
}

.smll-brand {
	display: flex;
	align-items: center;
	gap: 14px
}

.smll-brand-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 12px;
	background: rgba(255,255,255,.14);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.1)
}

.smll-brand-icon .dashicons {
	width: 24px;
	height: 24px;
	font-size: 24px;
	color: #fff
}

.smll-title {
	margin: 0;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: #fff
}

.smll-subtitle {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 5px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	opacity: .82
}

.smll-header-right {
	text-align: right;
	font-size: 13px;
}

.smll-active-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px;
	border-radius: 20px;
	background: #e8f8ef;
	border: 1px solid #b7e6cb;
	color: #1a9c63;
	font-size: 12.5px;
	font-weight: 600
}

.smll-active-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 3px rgba(34,197,94,.2)
}

.smll-settings .smll-feedback-button {
	display: flex;
	gap: 10px;
	margin-top: 20px;
	width: 100%;
	justify-content: center;
	text-decoration: none
}

.smll-stars {
	display: inline-flex;
	gap: 1px;
	color: #fbbf24 !important;
	text-decoration: none
}

.smll-stars .dashicons {
	width: 17px;
	height: 17px;
	font-size: 17px;
	line-height: 2.2 !important;
}

.smll-stars:hover .dashicons {
	transform: translateY(-1px)
}

.smll-settings-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0 20px;
	background: #fff;
	border: 1px solid #e4e4ea;
	border-radius: 10px;
	margin-bottom: 20px;
	align-items: stretch;
}

.smll-nav-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 15px 18px;
	color: #686d7b;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: color .15s ease,background .15s ease
}

.smll-nav-item .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px
}

.smll-nav-item:hover {
	color: var(--smll-primary);
	background: var(--smll-primary-softer)
}

.smll-nav-item.is-active {
	color: var(--smll-primary)
}

.smll-nav-item.is-active::after {
	position: absolute;
	right: 12px;
	bottom: -1px;
	left: 12px;
	height: 2px;
	background: var(--smll-primary);
	border-radius: 2px 2px 0 0;
	content: ""
}

.smll-settings-layout {
	display: grid;
	grid-template-columns: minmax(0,1fr) 340px;
	gap: 28px;
	align-items: start;
}

.smll-settings-content {
	background: #fff;
	padding: 20px;
	min-width: 0;
	border: 1px solid #e4e4ea;
	border-radius: 10px
}

.smll-tab-panel {
	display: none;
}

.smll-tab-panel.is-active {
	display: block
}

.smll-tab-intro {
	margin: 0 0 22px
}

.smll-tab-intro h2 {
	margin: 0 0 5px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #1d202c;
	letter-spacing: -.01em
}

.smll-tab-intro p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: #727786
}

.smll-card {
	margin: 0 0 20px;
	background: #fff;
	border: 1px solid #e4e5eb;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(16,24,40,.02)
}

/* Cards dim + lock when the master switch is off (class added by JS). */
.smll-card-locked {
	opacity: .45;
	pointer-events: none;
	position: relative;
}

.smll-card-locked::after {
	content: "";
	position: absolute;
	inset: 0;
	cursor: not-allowed;
}

/* Per-post override dropdown on the editor screen. */
.smll-metabox-select {
	width: 100%
}

.smll-card-head {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 15px 18px;
	background: #fafafe;
	border-bottom: 1px solid #ececf1
}

.smll-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 31px;
	height: 31px;
	border-radius: 8px;
	background: var(--smll-primary-soft);
	flex-shrink: 0
}

.smll-card-icon .dashicons {
	width: 17px;
	height: 17px;
	font-size: 17px;
	color: var(--smll-primary)
}

.smll-card-heading {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: #242735
}

.smll-card-desc {
	margin: 2px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #818694
}

.smll-card-body {
	padding: 0
}

.smll-card-primary {
	border-color: var(--smll-primary-border)
}

.smll-card-primary .smll-card-head {
	background: linear-gradient(90deg,#f3f6ff 0,#fafbff 100%)
}

.smll-card-danger {
	border-color: #f0d3d0
}

.smll-card-danger .smll-card-head {
	background: snow
}

.smll-card-danger .smll-card-icon {
	background: #fef0ef
}

.smll-card-danger .smll-card-icon .dashicons {
	color: #b42318
}

.smll-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 20px;
	border-bottom: 1px solid #f0f0f4
}

.smll-row:last-child {
	border-bottom: 0
}

.smll-row-text {
	min-width: 0
}

.smll-row-text label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	color: #282b38;
	cursor: pointer
}

.smll-row-hint {
	max-width: 530px;
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.55;
	color: #818694
}

.smll-row-desc {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.55;
	color: #818694;
}

.smll-row-notice {
	margin: 8px 0 0;
	font-size: 12px;
	font-style: italic;
	line-height: 1.5;
	color: #9a6b1f
}

.smll-row-featured {
	background: var(--smll-primary-softer)
}

.smll-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	border-radius: 20px;
	background: #eaf9f0;
	color: #178b56;
	font-size: 9px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .04em;
	text-transform: uppercase
}

.smll-badge-info {
	background: var(--smll-primary-soft);
	color: var(--smll-primary)
}

.smll-switch {
	position: relative;
	display: inline-block;
	width: 42px;
	height: 24px;
	margin-top: 1px;
	flex-shrink: 0
}

.smll-switch input {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer
}

.smll-switch-track {
	position: absolute;
	inset: 0;
	background: #d7d9e2;
	border-radius: 20px;
	transition: background-color .18s ease,box-shadow .18s ease
}

.smll-switch-track::before {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
	content: "";
	transition: transform .18s ease
}

.smll-switch input:checked+.smll-switch-track {
	background: var(--smll-primary)
}

.smll-switch input:checked+.smll-switch-track::before {
	transform: translateX(18px)
}

.smll-switch input:focus-visible+.smll-switch-track {
	outline: 2px solid var(--smll-primary);
	outline-offset: 2px
}

.smll-field {
	padding: 16px 20px;
	border-bottom: 1px solid #f0f0f4
}

.smll-field:last-child {
	border-bottom: 0
}

.smll-field-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px
}

.smll-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	color: #282b38
}

.smll-field input[type=number],.smll-field input[type=text],.smll-field select {
	min-height: 34px;
	padding: 5px 9px;
	background: #fff;
	border: 1px solid #d9dbe3;
	border-radius: 6px;
	color: #292c38;
	font-size: 12.5px;
	box-shadow: none
}

.smll-field select {
	min-width: 190px
}

.smll-field input[type=number] {
	width: 85px
}

.smll-field input:focus,.smll-field select:focus,.smll-field textarea:focus {
	border-color: var(--smll-primary);
	box-shadow: 0 0 0 3px var(--smll-primary-focus);
	outline: 0
}

.smll-field-hint {
	margin: 7px 0 0;
	font-size: 12px;
	line-height: 1.55;
	color: #858a98
}

.smll-field-control {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0
}

.smll-field-unit {
	font-size: 12px;
	font-weight: 600;
	color: #8a8f9d
}

.smll-textarea-field {
	display: block;
	width: 100%;
	max-width: 580px;
	min-height: 110px;
	margin-top: 9px;
	padding: 9px 10px;
	background: #fff;
	border: 1px solid #d9dbe3;
	border-radius: 7px;
	color: #303340;
	font-family: Consolas,Monaco,monospace;
	font-size: 12px;
	line-height: 1.55;
	resize: vertical
}

.smll-choice-group {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 10px;
	padding: 16px 18px
}

.smll-choice-group-compact {
	grid-template-columns: repeat(3,minmax(0,1fr))
}

.smll-choice {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 78px;
	padding: 13px;
	background: #fff;
	border: 1px solid #e1e2e8;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .15s ease,background .15s ease,box-shadow .15s ease
}

.smll-choice:hover {
	border-color: var(--smll-primary-border);
	background: var(--smll-primary-softer)
}

.smll-choice.is-selected {
	background: var(--smll-primary-softer);
	border-color: var(--smll-primary);
	box-shadow: 0 0 0 1px rgba(22,120,255,.06)
}

.smll-choice input {
	width: 16px;
	height: 16px;
	margin: 1px 0 0;
	flex-shrink: 0;
	accent-color: var(--smll-primary)
}

.smll-choice-content {
	display: block;
	min-width: 0
}

.smll-choice-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.45;
	color: #292c38
}

.smll-choice-desc {
	display: block;
	margin-top: 4px;
	font-size: 11.5px;
	line-height: 1.5;
	color: #838896
}

.smll-settings code {
	padding: 2px 5px;
	background: #f2f3f7;
	border-radius: 4px;
	color: #505463;
	font-size: 11px
}

.smll-code-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0
}

.smll-code-row code {
	padding: 3px 8px;
	background: #f2f3f7;
	border: 1px solid #e3e5ea;
	border-radius: 5px;
	color: #42526e;
	font-size: 11px;
	word-break: break-all
}

.smll-danger-action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px
}

.smll-danger-action strong {
	display: block;
	font-size: 13px;
	color: #7a271a
}

.smll-danger-action p {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #8c6a64
}

.smll-reset-button {
	min-height: 34px!important;
	padding: 4px 13px!important;
	background: #fff!important;
	border: 1px solid #e5b7b1!important;
	border-radius: 6px!important;
	color: #b42318!important;
	font-size: 12px!important;
	font-weight: 600!important;
	white-space: nowrap
}

.smll-reset-button:hover {
	background: #fff5f4!important;
	border-color: #cf8177!important
}

.smll-actions {
	position: static;
	bottom: 10px;
	z-index: 10;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 28px;
	padding: 14px 16px;
	background: rgba(255,255,255,.94);
	border: 1px solid #e1e2e8;
}

.smll-actions.is-sticky {
	display: flex;
	position: sticky;
	bottom: 10px;
	backdrop-filter: blur(10px)
}

.smll-save-status {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #808592;
	font-size: 12px
}

.smll-save-status .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: var(--smll-primary)
}

.smll-save-button.button-primary {
	background: var(--smll-primary);
	border: 0;
	border-radius: 7px;
	box-shadow: none;
	font-size: 12.5px;
	font-weight: 600;
	text-shadow: none
}

.smll-save-button.button-primary:hover,.smll-save-button.button-primary:focus {
	background: var(--smll-primary-hover)
}

.smll-action-buttons {
	display: flex;
	align-items: center;
	gap: 8px
}

.smll-discard-button {
	display: none;
	min-height: 36px;
	padding: 5px 15px;
	border-radius: 7px;
	font-size: 12.5px;
	font-weight: 600;
	color: #b3473a;
	border-color: #e1bec0
}

.smll-actions.is-sticky .smll-discard-button {
	display: inline-block
}

.smll-discard-button:hover,.smll-discard-button:focus {
	background: #fff5f4;
	border-color: #cf8177;
	color: #9a2f23
}

/* Bottom-right save-result toast */
.smll-toast {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 9px;
	max-width: 360px;
	padding: 13px 18px;
	color: #fff;
	background: #2f7d43;
	border-radius: 9px;
	box-shadow: 0 10px 34px rgba(16,24,40,.28);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	opacity: 0;
	transform: translateY(14px);
	visibility: hidden;
	transition: opacity .24s ease,transform .24s ease,visibility .24s
}

.smll-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
	visibility: visible
}

.smll-toast.is-error {
	background: #b3473a
}

.smll-toast .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px
}

/* Discard confirmation modal (Yoast-style) */
.smll-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease,visibility .2s
}

.smll-modal.is-open {
	opacity: 1;
	visibility: visible
}

.smll-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(16,24,40,.55)
}

.smll-modal-box {
	position: relative;
	width: 100%;
	max-width: 460px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(16,24,40,.32);
	padding: 26px 28px;
	transform: translateY(10px) scale(.98);
	transition: transform .2s ease
}

.smll-modal.is-open .smll-modal-box {
	transform: translateY(0) scale(1)
}

.smll-modal-head {
	display: flex;
	align-items: center;
	gap: 10px
}

.smll-modal-head .dashicons {
	color: #b3473a;
	font-size: 22px;
	width: 22px;
	height: 22px
}

.smll-modal-head h3 {
	margin: 0;
	font-size: 16px;
	line-height: 1.3
}

.smll-modal-text {
	margin: 12px 0 22px;
	color: #58606e;
	font-size: 13.5px;
	line-height: 1.55
}

.smll-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px
}

.smll-modal-confirm.button-primary {
	background: #b3473a !important;
	border-color: #b3473a !important;
	box-shadow: none
}

.smll-modal-confirm.button-primary:hover,.smll-modal-confirm.button-primary:focus {
	background: #9a2f23 !important;
	border-color: #9a2f23 !important
}

.smll-settings-sidebar {
	position: static;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 16px
}

.smll-settings-sidebar .smll-sticky-card {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	position: sticky;
	top: 42px;
}

.smll-sidebar-card {
	background: #fff;
	border: 1px solid #e3e4ea;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(16,24,40,.02)
}

.smll-sidebar-card-head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 13px 14px;
	background: #fafafe;
	border-bottom: 1px solid #eeeef3
}

.smll-sidebar-card-head h3 {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: #2b2e3b
}

.smll-sidebar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	border-radius: 7px;
	background: var(--smll-primary-soft)
}

.smll-sidebar-icon .dashicons {
	width: 15px;
	height: 15px;
	font-size: 15px;
	color: var(--smll-primary)
}

.smll-sidebar-card-body {
	padding: 20px;
}

.smll-sidebar-intro,.smll-sidebar-card-body>p {
	margin: 0;
	font-size: 12px;
	line-height: 1.6;
	color: #7b808e
}

.smll-sidebar-row p {
	margin-top: 0 !important
}

.smll-tip-card .smll-sidebar-row {
	display: flex;
	gap: 10px;
	padding: 12px 0;
	border-top: 1px solid #f1f1f6
}

.smll-tip-card .smll-sidebar-row:first-child {
	padding-top: 0;
	border-top: 0
}

.smll-tip-card .smll-sidebar-row:last-child {
	padding-bottom: 0
}

.smll-tip-num {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--smll-primary-soft);
	color: var(--smll-primary);
	font-size: 11px;
	font-weight: 700;
	line-height: 1
}

.smll-tip-text p:last-child {
	margin-bottom: 0
}

.smll-check-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none
}

.smll-check-list li {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: #565b69;
	margin-bottom: 0;
}

.smll-check-list .dashicons {
	width: 17px;
	height: 17px;
	font-size: 17px;
	color: #20a862
}

.smll-check-list li.is-off .dashicons {
	color: #d63638
}

.smll-settings .smll-sidebar-button {
	display: block;
	width: 100%;
	min-height: 34px!important;
	padding: 5px 10px!important;
	border-radius: 6px!important;
	font-size: 12px!important;
	font-weight: 600!important;
	text-align: center
}

.smll-settings .smll-sidebar-button {
	background: var(--smll-primary);
	border-color: var(--smll-primary);
	color: #fff
}

.smll-settings .smll-sidebar-button:hover {
	background: var(--smll-primary-hover);
	border-color: var(--smll-primary-hover)
}

.smll-settings .smll-sidebar-link {
	display: inline-flex;
	width: 100%;
	gap: 4px;
	margin-top: 13px;
	color: var(--smll-primary);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	justify-content: center;
	align-items: center;
}

.smll-sidebar-link:hover {
	color: var(--smll-primary-active)
}

.smll-sidebar-link .dashicons {
	width: 15px;
	height: 15px;
	font-size: 15px;
}

.smll-examples-card .smll-sidebar-card-body {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.smll-example {
	padding-bottom: 10px;
	border-bottom: 1px solid #f0f0f4
}

.smll-example:last-child {
	padding-bottom: 0;
	border-bottom: 0
}

.smll-example span {
	display: block;
	margin-bottom: 5px;
	font-size: 11px;
	color: #8a8f9b
}

.smll-example code {
	display: block;
	width: 100%;
	padding: 6px 7px;
	overflow: hidden;
	background: #f5f6fa;
	border-radius: 5px;
	color: #525767;
	font-family: Consolas,Monaco,monospace;
	font-size: 10.5px;
	text-overflow: ellipsis;
	white-space: nowrap
}

.smll-help-card .smll-sidebar-button {
	margin-top: 14px;
	background: #fff;
	border-color: #d9dbe4;
	color: var(--smll-primary)
}

.smll-help-card .smll-sidebar-button:hover {
	border-color: var(--smll-primary-border);
	background: var(--smll-primary-softer)
}

.smll-settings .button {
	padding: 2px 20px;
	border-radius: 7px!important;
}

.smll-settings .button-primary {
	background: var(--smll-primary);
	color: #fff;
	box-shadow: none;
	transition: background .15s ease,border-color .15s ease,color .15s ease
}

.smll-settings .button-secondary {
	border-radius: 10px
}

@media (min-width:1080px) {
	.smll-settings-content, .smll-sidebar-card-body {
		padding: 30px
	}
}

@media (max-width:1100px) {
	.smll-settings-layout {
		grid-template-columns: minmax(0,1fr) 250px;
		gap: 20px
	}

	.smll-choice-group-compact {
		grid-template-columns: 1fr
	}
}

@media (max-width:960px) {
	.smll-settings-layout {
		grid-template-columns: 1fr;
	}

	.smll-settings-sidebar {
		position: static;
		display: grid;
		grid-template-columns: repeat(2,minmax(0,1fr));
		align-items: start
	}

	.smll-settings-sidebar .smll-sticky-card {
		position: static
	}
}

@media (max-width:782px) {
	.smll-settings {
		padding: 10px 10px 10px 20px;
	}

	.smll-settings-header {
		align-items: flex-start;
		flex-direction: column;
		padding: 25px 22px;
		gap: 20px
	}

	.smll-header-right {
		max-width: none;
		text-align: left
	}

	.smll-settings-nav {
		padding: 0 8px;
	}

	.smll-nav-item {
		padding: 14px 13px
	}

	.smll-field-top {
		align-items: flex-start;
		flex-direction: column
	}

	.smll-field select {
		width: 100%
	}

	.smll-choice-group {
		grid-template-columns: 1fr
	}

	.smll-settings-sidebar {
		grid-template-columns: 1fr
	}

	.smll-row {
		gap: 14px
	}

	.smll-danger-action {
		align-items: flex-start;
		flex-direction: column
	}

	.smll-actions {
		position: static;
		align-items: stretch;
		flex-direction: column
	}

	.smll-save-button.button-primary {
		width: 100%
	}
}

@media (max-width:480px) {
	.smll-brand {
		align-items: flex-start
	}

	.smll-brand-icon {
		width: 42px;
		height: 42px
	}

	.smll-title {
		font-size: 22px
	}

	.smll-card-head {
		padding: 14px
	}

	.smll-row,.smll-field {
		padding-right: 14px;
		padding-left: 14px
	}

	.smll-choice-group {
		padding: 14px
	}
}
.smll-field-hidden {
	display: none;
}

/* Master switch: when Smart LazyLoad is off, gray out every other option
   (the reset card stays usable so settings can always be restored). */
.smll-master-off .smll-card:not(.smll-card-primary):not(.smll-reset-card) {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* Native engine loads no plugin JavaScript, so appearance and JS-only
   options are unavailable and shown as disabled. */
.smll-engine-native [data-smll-native-off] {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.2s ease;
}


/* Exact logo blue is the default for primary interactive controls. */
.smll-settings .smll-nav-item.is-active,
.smll-settings .smll-card-icon .dashicons,
.smll-settings .smll-save-status .dashicons,
.smll-settings .smll-sidebar-icon .dashicons,
.smll-settings .smll-sidebar-link,
.smll-settings .smll-tip-num {
	color: var(--smll-primary);
}

.smll-settings .smll-nav-item.is-active::after,
.smll-settings .smll-switch input:checked + .smll-switch-track {
	background: var(--smll-primary);
}

.smll-settings .smll-card-icon,
.smll-settings .smll-sidebar-icon,
.smll-settings .smll-tip-num,
.smll-settings .smll-badge-info {
	background: var(--smll-primary-soft);
}

.smll-settings .smll-choice input,
.smll-settings input[type="checkbox"],
.smll-settings input[type="radio"] {
	accent-color: var(--smll-primary);
}

.smll-settings .smll-choice.is-selected {
	background: var(--smll-primary-softer);
	border-color: var(--smll-primary-border);
	box-shadow: 0 0 0 1px rgba(22,120,255,.06);
}

.smll-settings .smll-field input:focus,
.smll-settings .smll-field select:focus,
.smll-settings .smll-field textarea:focus,
.smll-settings .smll-textarea-field:focus {
	border-color: var(--smll-primary);
	box-shadow: 0 0 0 3px var(--smll-primary-focus);
	outline: 0;
}

.smll-settings .smll-save-button.button-primary,
.smll-settings .smll-sidebar-button,
.smll-settings .button-primary {
	background-color: var(--smll-primary);
	border-color: var(--smll-primary);
	color: #fff;
}

.smll-settings .smll-save-button.button-primary:hover,
.smll-settings .smll-sidebar-button:hover,
.smll-settings .button-primary:hover {
	background-color: var(--smll-primary-hover);
	border-color: var(--smll-primary-hover);
}

/* Violet is secondary; lavender is used mostly for hover feedback. */
.smll-settings .smll-nav-item:hover {
	color: var(--smll-accent-hover-text);
	background: var(--smll-accent-hover-bg);
}

.smll-settings .smll-choice:hover,
.smll-settings .smll-help-card .smll-sidebar-button:hover,
.smll-settings .button-secondary:hover,
.smll-settings .button-secondary:focus-visible {
	border-color: var(--smll-accent-hover-border);
	background-color: var(--smll-accent-hover-bg);
}

.smll-settings .smll-sidebar-link:hover {
	color: var(--smll-accent-hover-text);
}

.smll-settings .smll-nav-item,
.smll-settings .smll-choice,
.smll-settings .button,
.smll-settings .smll-sidebar-button {
	transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

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