@charset "UTF-8";
html {
	scroll-behavior: smooth;
}

b, strong {
	font-weight: 500;
}

/* Cancel the bg white for dark mode */
body[data-theme-style="dark"].bg-white {
	background: var(--body-bg) !important;
}

/* App */
.app {
	background: hsl(210, 50%, 99%);
}

[data-theme-style="dark"].app {
	background: #0D0F11;
}

.app-container {
}

.app-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	background: var(--gray-100);
	z-index: 100;
	opacity: .5;
}

.app-sidebar {
	display: flex;
	flex-direction: column;
	min-width: 260px;
	max-width: 260px;
	background: var(--white);
	border: 1px solid var(--gray-100);
	border-radius: var(--border-radius);
	margin: 3rem 1.5rem 3rem -300px;
	transition: margin-left .15s linear, margin-right .15s linear;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 101;
}

[dir="rtl"] .app-sidebar {
	margin-left: initial;
	left: initial;
	right: 0;
	margin-right: -300px;
	border-left: 1px solid var(--gray-100);
	border-right: 0;
}

[dir="rtl"] [data-theme-style="dark"] .app-sidebar {
	border-right: 0;
	border-left: 1px solid var(--gray-100);
}

body.app-sidebar-opened .app-sidebar {
	margin-left: 1.5rem;
}

[dir="rtl"] body.app-sidebar-opened .app-sidebar {
	margin-right: 1.5rem;
}

@media (min-width: 992px) {
	.app-sidebar {
		margin-left: 1.5rem;
	}

	[dir="rtl"] .app-sidebar {
		margin-right: 1.5rem;
	}
}

.app-sidebar-title {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: .5rem;
	margin: .5rem;
	height: 75px;
}

.app-sidebar-title a {
	font-size: 1.4rem;
	color: var(--gray-900);
	font-weight: 600;
}

.app-sidebar-title a:hover {
	text-decoration: none;
}

.app-sidebar-footer {
	width: 100%;
}

.app-sidebar-footer > a {
	width: 100%;
	padding: .75rem 1.75rem;
	border-top: 1px solid var(--gray-100);
	display: flex;
	align-items: center;
	color: var(--gray-500);
	font-size: .9rem;
	font-weight: 500;
	transition: background .3s;
	border-radius: var(--border-radius);
}

.app-sidebar-footer > a:hover {
	text-decoration: none;
	background: var(--gray-200);
	color: var(--gray-600);
}

.app-sidebar-links-wrapper {
	overflow-y: scroll;
	width: calc(100% - 6px);
	padding-bottom: .25rem;
	scrollbar-width: none;
}

.app-sidebar-links-wrapper:hover {
	width: 100%;
	scrollbar-color: var(--gray-200) var(--white) !important;
	scrollbar-width: thin !important;
}

.app-sidebar-links-wrapper::-webkit-scrollbar {
	background-color: transparent;
	width: 0;
}

.app-sidebar-links-wrapper::-webkit-scrollbar-thumb {
	background: var(--gray-200);
	border-radius: 10px;
}

.app-sidebar-links-wrapper:hover::-webkit-scrollbar {
	width: 6px;
}

.app-sidebar-links-wrapper:hover::-webkit-scrollbar-track {
	width: 6px;
}

.app-sidebar-links {
	display: flex;
	flex-direction: column;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

.app-sidebar-links > li {
	width: 100%;
	padding: 0.25rem calc(1rem - 6px) 0.25rem 1rem;
}

.app-sidebar-links > .divider-wrapper {
	width: 100%;
	padding: 0 calc(0.75rem - 6px) 0 0.75rem;
	margin: .25rem 0;
}

.app-sidebar-links > .divider-wrapper > .divider {
	border-top: 1px solid var(--gray-100);
}

.app-sidebar-links > li > a {
	width: 100%;
	display: flex;
	align-items: center;
	color: var(--gray-600);
	border-radius: var(--border-radius);
	padding: 0.75rem 1rem;
	transition: background .3s;
	font-size: .9rem;
	font-weight: 500;
}

.app-sidebar-links > li > a:hover {
	text-decoration: none;
	background: var(--gray-200);
	color: var(--gray-600);
}

[data-theme-style="dark"] .app-sidebar-links > li > a:hover {
	background: var(--gray-200);
	color: var(--gray-800);
}

.app-sidebar-links > li.active > a:not(.default) {
	background: var(--primary);
	color: var(--white);
	font-weight: 500;
}

[data-theme-style="dark"] .app-sidebar-links > li.active > a:not(.default) {
	background: var(--primary-800);
	color: var(--white);
}

.app-sidebar-avatar {
	width: 35px;
	height: 35px;
	border-radius: 50%;
}

.app-sidebar-footer-block {
	max-width: 100%;
}

.app-sidebar-footer-text {
	color: var(--gray-600);
}

.app-content {
	margin-left: 0;
	flex-grow: 1;
}

[dir="rtl"] .app-content {
	margin-left: initial;
	margin-right: 0;
}

@media (min-width: 992px) {
	.app-content {
		margin-left: 300px;
	}
	[dir="rtl"] .app-content {
		margin-left: initial;
		margin-right: 300px;
	}
}

.app-navbar {
	min-height: 75px;
	border-bottom: 1px solid var(--gray-100);
}

[data-theme-style="dark"] .app-navbar {
	border-color: var(--gray-200);
}

/* Modal */
.modal-header {
	padding: 1rem;
	border-bottom: 0;
}

.modal-content {
	padding: 1rem;
	border: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	border-radius: calc(2 * var(--border-radius));
}

/* Forms */
.input-group-text {
	font-size: 0.9rem;
}

.form-control-range {
	/* removing default appearance */
	-webkit-appearance: none;
	appearance: none;

	/*  slider progress trick  */
	overflow: hidden;

	/* creating a custom design */
	accent-color: var(--primary);
	background: var(--gray-200);
	border-radius: var(--border-radius);
	height: .5rem;
	margin: 0.75rem 0;
}

/* Track: webkit browsers */
.form-control-range::-webkit-slider-runnable-track, .form-control-range::-moz-range-track {
	background: var(--gray-200);
}

/* Thumb: webkit */
.form-control-range::-webkit-slider-thumb {
	/* removing default appearance */
	-webkit-appearance: none;
	appearance: none;

	/* creating a custom design */
	height: .75rem;
	width: .75rem;
	background-color: var(--primary);
	border-radius: 50%;
	border: 2px solid var(--white);

	/*  slider progress trick  */
	box-shadow: -2007px 0 0 2000px var(--primary-300);
}

.form-control-range::-moz-range-thumb {
	/* removing default appearance */
	-webkit-appearance: none;
	appearance: none;

	/* creating a custom design */
	height: .75rem;
	width: .75rem;
	background-color: var(--primary);
	border-radius: 50%;
	border: 2px solid var(--white);

	/*  slider progress trick  */
	box-shadow: -2007px 0 0 2000px var(--primary-300);
}

/* Footer */
.footer {
	margin: 3rem 0 3rem 0;
	padding-top: 3rem;
	padding-bottom: 3rem;
	background: var(--white);
}

.footer {
	color: var(--gray-700);
}

.footer a:not(.dropdown-item), .footer a:hover:not(.dropdown-item) {
	color: var(--gray-700);
}

.footer a.icon {
	color: var(--gray-700);
}

.footer button, .footer button:hover {
	color: var(--gray) !important;
}

.footer-logo {
	max-height: 2.5rem;
	height: 2.5rem;
}

.footer-heading {
	color: var(--black) !important;
}

/* App footer */
.app-footer {
	border: 1px solid var(--gray-100);
	border-radius: var(--border-radius);
	padding: 1.25rem;
}

/* Filters */
.filters-dropdown {
	width: 18rem;
	max-height: 30rem;
	overflow-y: auto;
}

/* Custom breadcrumbs */
.custom-breadcrumbs {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.custom-breadcrumbs > li {
	margin-right: .5rem;
}

.custom-breadcrumbs > li > a {
	color: var(--gray);
}

.custom-breadcrumbs > li > svg {
	color: var(--gray-400);
	margin-left: .5rem;
}

.custom-breadcrumbs > li.active {
}

/* Helper classes */
.list-style-none {
	list-style: none;
	padding: 0;
}

img {
	vertical-align: inherit !important;
}

.icon-favicon {
	width: .95rem;
	height: auto;
}

.icon-favicon-small {
	width: .75rem;
	height: auto;
}

/* Dropdown */
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active {
	border-radius: var(--border-radius);
}

.dropdown-item svg {
	color: var(--gray-600);
}

.dropdown-item:active svg, .dropdown-item.active svg {
	color: var(--white);
}

/* Navbar */
.navbar-main {
	min-height: 0 !important;
	background: var(--white);
	border-bottom: 1px solid var(--gray-100);
}

.navbar-main .navbar-nav > li {
	padding: .5rem 0 !important;
}

@media (min-width: 992px) {
	.navbar-main .navbar-nav > li {
		padding: .5rem !important;
	}
}

.navbar-logo {
	max-height: 2.5rem;
	height: 2.5rem;
}

.navbar-logo-mini {
	max-height: 1.25rem;
	height: 1.25rem;
}

.navbar-avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
}

.navbar-custom-toggler {
	padding: 0.5rem .8rem;
	font-size: 1.25rem;
	line-height: 1;
	background-color: transparent;
	border-radius: var(--border-radius);

	color: var(--gray-700);
	border-color: var(--gray-300);
}

.navbar-dark .navbar-nav .nav-link {
	color: rgba(255,255,255,.85);
}

.chart-container {
	position: relative;
	margin: auto;
	height: 275px;
	width: 100%;
}

@media print {
	.chart-container canvas {
		min-height: 100%;
		max-width: 100%;
		max-height: 100%;
		height: auto!important;
		width: auto!important;
	}
}

/* Dropdown */
.dropdown-toggle-simple::after {
	display:none;
}

/* Index */
.index {
	background: #f9fcff;
}

[data-theme-style="dark"].index {
	background: var(--body-bg);
}

.index .navbar-main .btn {
	border-radius: 5rem;
	padding: 0.5rem 1rem;
	min-width: 100px;
}

.index-container-content {
	margin-top: 6rem;
	margin-bottom: 4rem;
}

.index-container {
	width: 100%;
	padding: 0 0 4rem 0;
}

@media (min-width: 992px) {
	.index-container {
		padding: 0 0 8rem 0;
	}
}

.index-image {
	width: 100%;
	height: auto;
	position: absolute;
	top: -4rem;
}

@media (min-width: 1375px) {
	.index-image {
		/*width: 115%;*/
		/*top: -5.5rem;*/
	}
}

.index-header {
	font-size: 4rem;
	font-weight: bold;
	color: var(--black);
}

.index-subheader {
	font-size: 1.35rem;
}

.index-button {
	padding: 1.2rem 2.2rem;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	transition: all .3s ease-in-out;
}

.index-button-white, .index-button-white:hover {
	color: white;
}

.index-card-image {
	max-width: 100%;
	height: auto;
	object-fit: cover;
	box-shadow: 10px 10px 0 #ebf5ff;
	border: 1px solid var(--gray-300);
	transition: all .3s ease-in-out;
}

.index-card-image:hover {
	box-shadow: 0 0 0 var(--gray-300);
}

.index-highly-rounded {
	border-radius: 1rem;
}

.index-fade {
	position: absolute;
	background: linear-gradient(0deg, var(--body-bg), hsla(0, 0%, 100%, 0)) !important;
	bottom: 0;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
}

/* Index testimonial */
.index-testimonial-avatar {
	width: 85px;
	height: 85px;
	border-radius: 50%;
	transform: translateY(-70%);
	border: 4px solid var(--white);
	position: absolute;
	left: 50%;
	margin-left: -52px;
}

/* Index FAQ */
.index-faq svg {
	transition: all .15s;
	color: var(--primary-800);
}

/* Index call to action */
.index-cta {
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 1920 1080" width="1920" height="1080"><defs><linearGradient gradientTransform="rotate(0, 0.5, 0.5)" x1="50%" y1="0%" x2="50%" y2="100%" id="ffflux-gradient"><stop stop-color="%230063ef" stop-opacity="1" offset="0%"></stop><stop stop-color="%23aa02b4" stop-opacity="1" offset="100%"></stop></linearGradient><filter id="ffflux-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feTurbulence type="fractalNoise" baseFrequency="0.005 0.003" numOctaves="1" seed="131" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"></feTurbulence><feGaussianBlur stdDeviation="20 0" x="0%" y="0%" width="100%" height="100%" in="turbulence" edgeMode="duplicate" result="blur"></feGaussianBlur><feBlend mode="color-dodge" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" in2="blur" result="blend"></feBlend></filter></defs><rect width="1920" height="1080" fill="url(%23ffflux-gradient)" filter="url(%23ffflux-filter)"></rect></svg>');
	background-repeat: no-repeat;
	background-size: cover;
	color: white !important;
}

.index-cta a.btn {
	color: white;
	background: var(--dark);
	border-color: var(--dark);
	padding: 1.1rem 4rem;
	font-size: 1.15rem;
}

.index-cta a.btn:hover {
	background: var(--primary-900);
	border-color: var(--primary-900);
}

[data-theme-style="dark"] .index-cta a.btn {
	background: var(--light);
	border-color: var(--light);
}

.user-avatar {
	border-radius: 50%;
	max-width: 80px;
	max-height: 80px;
}

/* Link Settings page */
.link-background-type-preset {
	width: 100%;
	height: 5rem;
	border-radius: var(--border-radius);
	transition: .3s transform, opacity;
}

.link-background-type-preset:hover {
	cursor: pointer;
	transform: scale(1.025);
}

input[type="radio"]:checked ~ .link-background-type-preset {
	transform: scale(1.05);
	opacity: .25;
}

/* Biolink directory */
.link-directory-avatar {
	width: 60px;
	height: 60px;
	object-fit: cover;
}

/* Biolink theme */
.link-biolink-theme {
	transition: .3s transform, .3s opacity, .3s border-color;
	height: 10rem !important;
}

.link-biolink-theme:hover {
	cursor: pointer;
	transform: scale(1.025);
}

input[type="radio"]:checked ~ .link-biolink-theme {
	transform: scale(1.05);
	border-color: var(--primary);
}

.link-biolink-theme-custom {
	background: linear-gradient(to left, var(--body-bg), var(--primary-100));
}

.link-btn-straight {
	border-radius: 0;
}

.link-btn-round {
	border-radius: 50px;
}

.link-btn-rounded {
	border-radius: .4rem;
}


/* Biolink preview iframe */
.biolink-preview {
	position: relative;
	margin: 0 auto;
	height: auto;
	width: auto;
	display: inline-block;
	text-align: left;
}

.biolink-preview-iframe-container {
	overflow: hidden;
	width: 300px;
	height: 625px;
	border-radius: 2.5rem;
	border: 10px solid black;
	position: relative;
	box-shadow: 0 0 30px rgba(0,0,0,0.20);
}

@media (min-width: 768px) {
	.biolink-preview-iframe-container {
		width: 375px;
		height: 800px;
	}
}

.biolink-preview-iframe-loading {
	width: 100%;
	height: 100%;
	background: hsla(0, 0%, 0%, .7);
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
}

.biolink-preview-iframe {
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
	padding: 0;
}

/* Others */
.container-disabled {
	pointer-events: none;
	opacity: .5;
}

.container-disabled-simple {
	pointer-events: none;
}

/* Custom row */
.custom-row {
	border-radius: var(--border-radius);
	padding: 1.25rem;
	position: relative;
	border: 1px solid var(--gray-100);
	background: var(--white);
}

.custom-row-inactive {
	background: var(--gray-100);
}

.custom-row-side-controller {
	right: 100%;
	top: 25%;
	font-size: 1.2em;
	padding: .2em .2em;
}

[dir="rtl"] .custom-row-side-controller {
	right: initial;
	left: 100%;
}

@media (min-width: 992px) {
	.custom-row-side-controller {
		position: absolute;
		padding: .4em .8em;
	}
}

.custom-row-side-controller-grab {
	cursor: grab;
}

/* Tables */
.table-custom-container {
	border-radius: var(--border-radius);
	border: 1px solid var(--gray-100);
}

.table-custom {
	margin-bottom: 0;
}

.table-custom thead th {
	border-top: 0;
	border-bottom: 0;
	background: var(--white);
	color: var(--gray-900)
}

.table-custom th {
	padding: 1.25rem 1rem;
}

.table-custom td {
	padding: 1.55rem 1rem;
	background: var(--white);
	vertical-align: middle;
}

/* Helpers */
.appearance-none {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}

/* Pricing */
.pricing-plan {
	border: 1px solid var(--gray-100);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.pricing-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2.2rem 2.2rem 0 2.2rem;
	background: var(--white);
	border-bottom: 1px solid var(--gray-100);
}

[data-theme-style="dark"] .pricing-header {
	border-color: var(--gray-100);
}

.pricing-name {
	background: var(--primary-200);
	padding: .15rem 1.25rem;
	color: var(--primary-600);
	font-size: .85rem;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: var(--border-radius);
}

.pricing-price {
	margin: 1rem 0;
}

.pricing-price-amount {
	font-size: 3.3rem;
	font-weight: bold;
}

.pricing-price-currency {
	font-size: .9rem;
	color: var(--gray);
}

.pricing-details {
	text-align: center;
	font-size: .85rem;
	color: var(--primary-800);
	margin-bottom: 1.5rem;
}

.pricing-body {
	padding: 0 2.2rem 2.2rem 2.2rem;
	background: var(--white);
	height: 100%;
}

.pricing-features {
	margin: 3rem 0;
	list-style: none;
	padding: 0;
}

.pricing-features li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 1rem 0;
}

/* Custom Radio Boxes */
.custom-radio-box {
	cursor: pointer;
}

.custom-radio-box .custom-radio-box-main-text {
	font-size: 1.15rem;
	font-weight: bold;
}

.custom-radio-box .custom-radio-box-main-icon {
	font-size: 1.25rem;
}

.custom-radio-box input[type="radio"] + div {
	transition: all .3s ease-in-out;
	border: 1px solid var(--gray-100);
	background: var(--white);
}

.custom-radio-box input[type="radio"]:checked + div {
	border: 1px solid var(--primary);
}

.custom-radio-box input[type="radio"]:hover + div {
	border: 1px solid var(--primary);
}

/* QR Codes */
.qr-code {
	width: 100rem;
}

.qr-code-loading {
	animation: opacity-loading 3s infinite ease-in-out;
}

@keyframes opacity-loading {
	0% { opacity: 1; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
}

.qr-code-avatar {
	width: 65px;
	height: 65px;
	border-radius: var(--border-radius);
	padding: .25rem;
	border: 1px solid var(--gray-100);
}

/* Round circles */
.round-circle-md {
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}

.round-circle-lg {
	width: 4.5rem;
	height: 4.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}

/* Badge colors */
.badge {
	padding: 0.45em 0.9em;
}

.badge-primary {
	color: var(--primary-700);
	background: var(--primary-100);
}

[data-theme-style="dark"] .badge-primary {
	background: var(--primary-800);
	color: var(--primary-100);
}

.badge-secondary {
	color: hsl(208, 7%, 35%);
	background-color: hsl(208, 7%, 85%);
}

[data-theme-style="dark"] .badge-secondary {
	background-color: hsl(208, 7%, 35%);
	color: hsl(208, 7%, 85%);
}

.badge-success {
	color: hsla(134, 50%, 30%, 1);
	background-color: hsla(134, 50%, 85%, 1);
}

[data-theme-style="dark"] .badge-success {
	background-color: hsla(134, 50%, 30%, 1);
	color: hsla(134, 50%, 85%, 1);
}

.badge-danger {
	color: hsla(354, 70%, 35%, 1);
	background-color: hsla(354, 70%, 85%, 1);
}

[data-theme-style="dark"] .badge-danger {
	background-color: hsla(354, 70%, 35%, 1);
	color: hsla(354, 70%, 85%, 1);
}

.badge-warning {
	background-color: hsla(45, 100%, 85%, 1);
	color: hsla(40, 80%, 30%, 1);
}

[data-theme-style="dark"] .badge-warning {
	background-color: hsla(50, 10%, 20%, 1);
	color: hsla(45, 100%, 85%, 1);
}

.badge-info {
	color: hsla(188, 60%, 30%, 1);
	background-color: hsla(188, 78%, 85%, 1);
}

[data-theme-style="dark"] .badge-info {
	background-color: hsla(188, 60%, 30%, 1);
	color: hsla(188, 78%, 85%, 1);
}

.badge-light {
	color: hsla(210, 15%, 35%, 1);
	background-color: hsl(210, 17%, 95%);
}

[data-theme-style="dark"] .badge-light {
	background-color: hsla(210, 15%, 35%, 1);
	color: hsl(210, 17%, 95%);
}

.badge-dark {
	color: hsla(210, 10%, 90%, 1);
	background-color: hsla(210, 10%, 20%, 1);
}

[data-theme-style="dark"] .badge-dark {
	background-color: hsla(210, 10%, 90%, 1);
	color: hsla(210, 10%, 20%, 1);
}

/* Invoice css */
.invoice-table th {
	border-top: 0 !important;
}

.invoice-table td {
	vertical-align: baseline !important;
}

@media print {
	.invoice-logo {
		filter: grayscale(100%);
	}
}

/* Base animation */
.surveymaker-animate {
	-webkit-animation-duration:500ms;
	animation-duration:500ms;
}

.surveymaker-animate-fill-both {
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}

.surveymaker-animate-fill-none {
	-webkit-animation-fill-mode:none;
	animation-fill-mode:none;
}

@-webkit-keyframes fadeIn{
	0% {
		opacity:0
	}
	to {
		opacity:1
	}
}
@keyframes fadeIn{
	0% {
		opacity:0
	}
	to {
		opacity:1
	}
}
.surveymaker-animate-fade-in {
	-webkit-animation-name:fadeIn;
	animation-name:fadeIn
}


/* Custom button */
.btn-custom {
	padding: .5rem 1.5rem;
	color: var(--gray);
	border-radius: var(--border-radius);
	border: 1px solid var(--gray-100) !important;
	font-size: .9rem;
	background: var(--white);
}

.btn-custom:hover {
	color: var(--gray);
	border: 1px solid var(--gray-200) !important;
}

.btn-custom.active {
	color: var(--primary);
	border: 1px solid var(--primary);
}

/* Blog */
.blog-post-image {
	max-height: 20rem;
	object-fit: cover;
}

.blog-post-image-small {
	height: 13rem;
	max-height: 13rem;
	object-fit: cover;
}

/* File input */
.surveymaker-file-input {
	padding: 1rem;
	background: var(--gray-100);
	border: 1px solid var(--gray-100);
	border-radius: 0.25rem;
	cursor: pointer;
	font-size: .9rem;
}

.surveymaker-file-input:hover {
	border-color: var(--gray-300);
}

.surveymaker-file-input::file-selector-button {
	border: 0;
	padding: .4rem .75rem;
	border-radius: var(--border-radius);
	background-color: var(--white);
	cursor: pointer;
	font-size: .9rem;
	margin-right: 1rem;
}

/* File input preview */
.surveymaker-file-input-preview {
	max-width: 100%;
	max-height: 68px;
	min-height: 68px;
	object-fit: cover;
}

/* File input preview */
.surveymaker-file-input-preview {
	max-width: 100%;
	max-height: 68px;
	min-height: 68px;
	object-fit: cover;
}

.sticky {
	position: sticky !important;
	top: 1rem;
	height: min-content;
}

/* Icons on links animations */
a svg {
	transition: transform .15s;
}

a:hover svg {
	transform: scale(1.1);
}

a:active svg {
	transform: scale(.9);
}

/* Helper zoom class for icons */
.icon-zoom-animation svg {
	transition: transform .15s;
}

.icon-zoom-animation:hover svg {
	transform: scale(1.1);
}

/* Self zoom */
.zoom-animation {
	transition: transform .15s;
}

.zoom-animation:hover {
	transform: scale(1.05);
}

.zoom-animation:active {
	transform: scale(.95);
}

.zoom-animation-subtle {
	transition: transform .3s;
}

.zoom-animation-subtle:hover {
	transform: scale(1.025);
}

.up-animation {
	transition: transform .3s;
}

.up-animation:hover {
	transform: translateY(-10px);
}

/* Color picker */
@media print {
	.pcr-app {
		display: none;
	}
}

.pcr-button {
	border: 1px solid white !important;
	outline: 1px solid var(--gray-300) !important;
	height: calc(var(--input-padding-y) + var(--input-padding-x) + var(--input-font-size) + calc(var(--input-font-size) / 2.75)) !important;
	border-radius: var(--border-radius) !important;
	width: 100% !important;
}

.pcr-button::before, .pcr-button::after {
	border-radius: var(--border-radius) !important;
}

/* Width fit content */
.w-fit-content {
	width: fit-content !important;
}

/* Signatures */
.signature-avatar {
	width: 50px;
	height: 50px;
	max-width: 50px;
	max-height: 50px;
}

/* Ajax loading overlay */
.loading-overlay {
	padding: 1.25rem;
	border-radius: var(--border-radius);
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--white);
	z-index: 100;
	opacity: 0.8;
}

[data-theme-style="dark"] .loading-overlay {
	background: var(--gray-50);
}

/* Input group button */
.input-group > .input-group-append > .btn {
	font-size: .9rem;
}

/* AIX */
.ai-chat-avatar {
	width: 35px;
	height: 35px;
}

.ai-chat-big-avatar {
	width: 50px;
	height: 50px;
}

.chat-messages {
	height: 25rem;
	overflow-y: scroll;
}

.chat-image > img {
	max-height: 15rem;
}

.chat-content {
	word-break: break-word;
}

/* Shiki code highlighter */
.shiki {
	overflow: auto;
	border-radius: var(--border-radius);
	padding: 1.5rem;
	font-size: .9rem;
	line-height: 1.5rem;
}

.shiki code {
	background: initial !important;
}

/* Fa stack small */
.fa-stack-small {
	font-size: 0.65rem;
	vertical-align: middle;
}

/* Btn group */
.btn-group-custom {
	border: 1px solid var(--gray-100);
	padding: 0.5rem 0;
	border-radius: var(--border-radius);
}

.btn-group-custom .btn {
	margin: 0 .5rem;
	border-radius: var(--border-radius) !important;
	background: var(--gray-200);
}

.btn-group-custom .btn.active {
	background: var(--dark);
	color: var(--white);
}

/* Custom scrollbar */
body * {
    scrollbar-color: var(--gray-200) var(--white) !important;
    scrollbar-width: thin !important;
}

body *::-webkit-scrollbar-thumb  {
    background: var(--gray-200);
    border-radius: 10px;
    width: 6px;
    height: 6px;
}

body *::-webkit-scrollbar, body *::-webkit-scrollbar-track {
    background: var(--white);
    border-radius: 10px;
    width: 6px;
    height: 6px;
}

/* Notification bell */
.internal-notification-icon {
	animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
	0% {
		box-shadow: 0 0 0 0px var(--danger);
	}
	100% {
		box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
	}
}

/* Gradient text */
.text-gradient-primary {
	background: linear-gradient(135deg, var(--gradient-one), var(--gradient-two));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Gradient background */
.bg-gradient {
	animation: bg-gradient-animation 3s ease infinite alternate;
	background: linear-gradient(60deg,#f79533,#f37055,#ef4e7b,#a166ab,#5073b8,#1098ad,#07b39b,#6fba82);
	background-size: 300% 300%;
}

@keyframes bg-gradient-animation {
	0% {
		background-position: 0 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}

/* Teams */
.team-delegate-access-wrapper {
	margin: .75rem;
	border-radius: .5rem;
}

@media (min-width: 992px) {
	.team-delegate-access-wrapper {
		border-radius: 5rem;
	}
}

/* Announcements */
.announcement-wrapper {
	margin: .75rem;
	border-radius: .5rem;
	opacity: 0;
	transition: opacity .3s ease-in;
	animation: ac-fade-in-down .3s ease-in .6s forwards;
}

@media (min-width: 992px) {
	.announcement-wrapper {
		border-radius: 5rem;
	}
}

@keyframes ac-fade-in-down {
	from {
		opacity: 0;
		transform: translate3d(0, -100%, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* PWA */
.pwa-wrapper {
	position: fixed;
	bottom: 0;
	width: calc(100% - 1.5rem);
	z-index: 1000;
}

/* Button hover stupid bootstrap fix */
.btn:hover {
	border-color: transparent !important;
}

.rounded-2x {
	border-radius: calc(2*var(--border-radius));
}

.rounded-3x {
	border-radius: calc(3*var(--border-radius));
}

/* Toolkit */
.tool-icon {
	min-width: 2.75rem;
	max-height: 2.75rem;
	width: 2.75rem;
	height: 2.75rem;
}

.tool-icon-wrapper {
	padding: 0 1.25rem;
}


/* ============================================================
 * SurveyMaker.io ? Sprint 1 additions
 * Create-survey wizard + dashboard card polish.
 * Namespaced under .smk- so existing styles are not affected.
 * ============================================================ */

:root {
    /* Colour tokens defer to the canonical brand block further down this
       file; only the sizing/elevation tokens are owned here. */
    --smk-radius: 14px;
    --smk-radius-sm: 10px;
    --smk-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .03);
    --smk-shadow-md: 0 4px 18px -2px rgba(15, 23, 42, .08), 0 2px 6px -1px rgba(15, 23, 42, .04);
    --smk-shadow-lg: 0 24px 48px -12px rgba(15, 23, 42, .18);
    --smk-border-strong: #d1d5db;
    --smk-ink: var(--text-primary);
    --smk-ink-2: #475569;
    --smk-ink-3: var(--text-secondary);
    --smk-bg: var(--background);
}

/* ---------- Wizard modal shell ---------- */
.smk-wizard-modal .modal-dialog { max-width: 920px; }
.smk-wizard-modal .modal-content.smk-wizard {
    border: 0;
    border-radius: var(--smk-radius);
    box-shadow: var(--smk-shadow-lg);
    overflow: hidden;
    background: #fff;
}

.smk-wizard__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--smk-border);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.smk-wizard__title { flex: 1 1 auto; }
.smk-wizard__title h5 { font-weight: 600; color: var(--smk-ink); }
.smk-wizard__header .close { font-size: 1.5rem; line-height: 1; opacity: .55; }
.smk-wizard__header .close:hover { opacity: 1; }

.smk-wizard__steps {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var(--smk-ink-3);
}
.smk-wizard__step {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: var(--smk-ink-3);
    font-weight: 600;
    transition: all .25s ease;
}
.smk-wizard__step small {
    font-weight: 500;
    font-size: .75rem;
    color: inherit;
}
.smk-wizard__step.is-active {
    background: var(--smk-brand-soft);
    color: var(--smk-brand);
}
.smk-wizard__step.is-done {
    background: #ecfdf5;
    color: #047857;
}
.smk-wizard__step-divider {
    width: 28px;
    height: 1px;
    background: var(--smk-border-strong);
}

.smk-wizard__body {
    padding: 1.75rem 1.5rem;
    min-height: 340px;
    background: #fff;
}

.smk-wizard__pane { display: none; animation: smkFade .25s ease both; }
.smk-wizard__pane.is-active { display: block; }
@keyframes smkFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.smk-wizard__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--smk-border);
    background: #fff;
}

/* ---------- Step 1 ? chooser cards ---------- */
.smk-chooser {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
}
.smk-choice {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--smk-border);
    border-radius: var(--smk-radius-sm);
    text-align: left;
    transition: all .2s ease;
    cursor: pointer;
    width: 100%;
}
.smk-choice:hover,
.smk-choice:focus-visible {
    border-color: var(--smk-brand);
    box-shadow: var(--smk-shadow-md);
    transform: translateY(-1px);
    outline: none;
}
.smk-choice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.smk-choice__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.smk-choice__title { font-weight: 600; color: var(--smk-ink); display: inline-flex; align-items: center; }
.smk-choice__desc { color: var(--smk-ink-3); font-size: .85rem; }
.smk-choice__arrow { color: var(--smk-ink-3); transition: transform .2s ease, color .2s ease; }
.smk-choice:hover .smk-choice__arrow {
    color: var(--smk-brand);
    transform: translateX(2px);
}
.smk-choice--soft { opacity: .92; }

/* ---------- Step 2 ? Blank form ---------- */
.smk-label { font-weight: 600; color: var(--smk-ink); font-size: .85rem; }
.smk-input-group .form-control,
.smk-input-group .custom-select,
.smk-input-group .input-group-text {
    border-radius: var(--smk-radius-sm);
}
.smk-input-group .input-group-prepend > * { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.smk-input-group > .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.smk-tip {
    margin-top: 1rem;
    padding: .85rem 1rem;
    background: #fffbeb;
    border: 1px solid #fef3c7;
    border-radius: var(--smk-radius-sm);
    font-size: .85rem;
    color: #78350f;
}

/* ---------- Step 2 ? Template picker ---------- */
.smk-tpl-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.smk-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 380px;
}
.smk-search i {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--smk-ink-3);
    pointer-events: none;
}
.smk-search .form-control {
    padding-left: 2.25rem;
    border-radius: var(--smk-radius-sm);
}

.smk-tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .75rem;
    max-height: 440px;
    overflow-y: auto;
    padding: 4px 2px;
}
.smk-tpl-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    background: #fff;
    border: 1px solid var(--smk-border);
    border-radius: var(--smk-radius-sm);
    text-align: left;
    transition: all .2s ease;
    cursor: pointer;
}
.smk-tpl-card:hover {
    border-color: var(--smk-brand);
    box-shadow: var(--smk-shadow-md);
    transform: translateY(-1px);
}
.smk-tpl-card.is-selected {
    border-color: var(--smk-brand);
    background: var(--smk-brand-soft);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.smk-tpl-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    font-weight: 700;
    font-size: .85rem;
    color: #fff;
    flex-shrink: 0;
    background: linear-gradient(135deg, #2563eb, #2563eb);
    letter-spacing: .02em;
}
.smk-tpl-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.smk-tpl-name {
    font-weight: 600;
    color: var(--smk-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.smk-tpl-meta { color: var(--smk-ink-3); font-size: .78rem; }
.smk-tpl-preview {
    color: var(--smk-ink-3);
    opacity: 0;
    transition: opacity .15s ease, color .15s ease;
}
.smk-tpl-card:hover .smk-tpl-preview { opacity: 1; }
.smk-tpl-preview:hover { color: var(--smk-brand); }

/* ---------- Step 2 ? AI prompt ---------- */
.smk-ai-card {
    background: linear-gradient(180deg, #fff7ed 0%, #ffffff 60%);
    border: 1px solid #fed7aa;
    border-radius: var(--smk-radius-sm);
    padding: 1.25rem;
}
.smk-ai-card__head { display: flex; align-items: center; gap: .85rem; }
.smk-ai-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #fff7ed;
    color: #06b6d4;
}
.smk-ai-card__notice {
    padding: .85rem 1rem;
    background: #f8fafc;
    border: 1px solid var(--smk-border);
    border-radius: var(--smk-radius-sm);
    font-size: .85rem;
    color: var(--smk-ink-2);
}

/* ---------- Empty state ---------- */
.smk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 3rem 1rem;
    color: var(--smk-ink-3);
}
.smk-empty__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--smk-bg);
    color: var(--smk-ink-3);
    font-size: 1.5rem;
    margin-bottom: .5rem;
}

/* ---------- Soft badges ---------- */
.badge-soft-primary {
    background: var(--smk-brand-soft);
    color: var(--smk-brand);
    font-weight: 600;
}
.badge-soft-warning {
    background: #fffbeb;
    color: #b45309;
    font-weight: 600;
}

/* ---------- Dashboard / grid card polish ---------- */
.grid-card {
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    border: 1px solid var(--smk-border) !important;
    border-radius: var(--smk-radius-sm) !important;
}
.grid-card:hover {
    box-shadow: var(--smk-shadow-md) !important;
    transform: translateY(-2px);
    border-color: var(--smk-border-strong) !important;
}

/* Small responsive tweaks */
@media (max-width: 575.98px) {
    .smk-wizard__header { flex-wrap: wrap; }
    .smk-wizard__steps { order: 3; width: 100%; justify-content: center; }
    .smk-tpl-grid { grid-template-columns: 1fr; }
    .smk-wizard__body { padding: 1.25rem 1rem; }
    .smk-wizard__footer { padding: .85rem 1rem; }
}

/* RTL polish */
[dir="rtl"] .smk-choice__arrow i { transform: scaleX(-1); }
[dir="rtl"] .smk-search i { left: auto; right: .85rem; }
[dir="rtl"] .smk-search .form-control { padding-left: .75rem; padding-right: 2.25rem; }

/* ============================================================
 * App-wide: full-bleed Bootstrap containers.
 * Override the 1500px cap that custom-bootstrap.min.css applies at
 * >=1200px so the dashboard, settings, footer, etc. extend across the
 * full viewport ? matches the editor's full-width feel.
 *
 * To pull back the cap (e.g. for readability on 4K monitors) change the
 * 100% below to a px value like 1800px.
 * ============================================================ */
@media (min-width: 1200px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 100%;
    }
}

/* ============================================================
 * Full-bleed top navbar: kill the .container max-width, the rounded
 * corners (.index-highly-rounded gives 1rem) and the side borders, so
 * the nav sits flush against the viewport edges.
 * Scoped via #navbar so other usages of .index-highly-rounded are
 * unaffected.
 * ============================================================ */
#navbar.navbar {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
}


/* ============================================================
 * Dashboard: stats row + grid/list view toggle.
 * ============================================================ */

/* --- Stats row --- */
.smk-stats-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 0 1.25rem 0;
}
@media (max-width: 991.98px) {
    .smk-stats-row { grid-template-columns: 1fr; }
}
.smk-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    transition: box-shadow .2s ease, transform .2s ease;
}
.smk-stat-card:hover {
    box-shadow: 0 4px 18px -2px rgba(15,23,42,.08);
    transform: translateY(-1px);
}
.smk-stat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.smk-stat-card__body { flex: 1 1 auto; min-width: 0; }
.smk-stat-card__label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
    font-weight: 600;
}
.smk-stat-card__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    color: #0f172a;
    margin: 2px 0;
}
.smk-stat-card__sub { display: flex; flex-wrap: wrap; gap: .35rem; }

.smk-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
}
.smk-pill--green { background: #ecfdf5; color: #047857; }
.smk-pill--gray  { background: #f1f5f9; color: #64748b; }
.smk-pill--soft  { background: rgba(37,99,235,.08); color: #2563eb; }

/* --- View toggle toolbar --- */
.smk-view-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 .85rem 0;
    padding: 0 .25rem;
}
.smk-view-btn {
    border: 1px solid #e5e7eb !important;
    color: #64748b !important;
}
.smk-view-btn.is-active {
    background: rgba(37,99,235,.08) !important;
    color: #2563eb !important;
    border-color: rgba(37,99,235,.25) !important;
}

/* --- List view rendering. Re-style the existing grid card markup
       as compact rows when the wrapper opts into list mode. --- */
.smk-survey-list[data-smk-view="list"] > .row {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
/* ===== Default (grid view) — list-only cells hidden ============== */
.smk-list-only { display: none !important; }

/* ===== LIST VIEW — table-style rows (matches reference design) =====
   The whole list becomes one big rounded card with a header row, then
   each survey is a 7-column grid row: icon+name | responses | views |
   langs | created | status | actions. */

/* The outer survey-box becomes flush-edge for the table chrome. */
.smk-survey-box:has(.smk-survey-list[data-smk-view="list"]) {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
.smk-survey-box:has(.smk-survey-list[data-smk-view="list"]) .smk-survey-box__header {
    margin-bottom: 1rem !important;
    padding: 0 .25rem !important;
}

.smk-survey-list[data-smk-view="list"] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
}
[data-theme-style="dark"] .smk-survey-list[data-smk-view="list"] {
    background: #111827;
    border-color: #1f2a3a;
}

/* Shared 7-column grid template — header + every row use the same. */
.smk-survey-list[data-smk-view="list"] .smk-list-header,
.smk-survey-list[data-smk-view="list"] .smk-survey-card {
    display: grid !important;
    /* Tighter than v1 — most cells use fr units only so the visible
       columns sit close together instead of fanning out on wide
       monitors. Fixed widths on Responses / Views / Visitors stop
       those small numeric cells from stretching to absurd widths. */
    grid-template-columns:
        minmax(240px, 2.2fr)  /* Survey (icon + name + url) */
        minmax(120px, 1.1fr)  /* Languages */
        230px                 /* Responses / Views — dual sparkline + R/V */
        minmax(95px, 0.9fr)   /* Created */
        minmax(105px, 0.9fr)  /* Status */
        minmax(150px, 1fr);   /* Actions (icon bar) */
    /* row-gap is intentionally tight: the URL row sits in grid-row 2
       directly under the title; a large row-gap would push it visibly
       away. Column gap stays at 12px to keep cells separated. */
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
}

/* Overlap fix: CSS-grid children default to min-width:auto, so a wide survey
   title / URL cell refuses to shrink and bleeds over the Responses / Views
   numbers (the reported overlap). Force every cell to be allowed to shrink and
   clip its own overflow so columns stay in their lanes. */
.smk-survey-list[data-smk-view="list"] .smk-survey-card > *,
.smk-survey-list[data-smk-view="list"] .smk-list-header  > * { min-width: 0; }
.smk-survey-list[data-smk-view="list"] .smk-survey-card__head { overflow: hidden; }
.smk-survey-list[data-smk-view="list"] .smk-list-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.smk-survey-list[data-smk-view="list"] .smk-list-cell--responses,
.smk-survey-list[data-smk-view="list"] .smk-list-cell--views {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.15;
}

/* On narrower screens the sparkline column is the first to fold away —
   the trend chart is decorative; the number is what matters and that's
   still in the Views/Responses cells. */
@media (max-width: 1280px) {
    /* 6 columns, tighter. The Responses/Views column stays — it now holds
       the R/V figure, not just a decorative trend, so it must not fold. */
    .smk-survey-list[data-smk-view="list"] .smk-list-header,
    .smk-survey-list[data-smk-view="list"] .smk-survey-card {
        grid-template-columns:
            minmax(190px, 2fr)   /* Survey */
            minmax(100px, 1fr)   /* Languages */
            200px                /* Responses / Views */
            minmax(88px, 0.9fr)  /* Created */
            minmax(96px, 0.9fr)  /* Status */
            minmax(140px, 1fr);  /* Actions */
    }
}

/* =================================================================
   Rich list-page header (Surveys + count pill + subtitle)
   Used in place of the old "10 surveys" line.
   ================================================================= */
.smk-survey-box__header--rich {
    padding: 20px 24px !important;
    align-items: flex-start !important;
    gap: 16px;
}
.smk-survey-box__title--rich { flex: 1 1 auto; min-width: 0; }
.smk-survey-box__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.smk-survey-box__h1 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--smk-text, #0f172a);
    margin: 0;
    line-height: 1;
}
.smk-survey-box__count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(6, 182, 212, .12);
    color: #2563eb;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.smk-survey-box__subtitle {
    margin: 0;
    color: var(--smk-text-muted, #64748b);
    font-size: 13.5px;
}
.smk-survey-box__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.smk-cta-create {
    background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 14px rgba(6, 182, 212, .28);
    transition: transform .12s, box-shadow .12s;
}
.smk-cta-create:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(6, 182, 212, .35);
    color: #fff !important;
}
.smk-filter-btn {
    border-radius: 10px !important;
    padding: 9px 18px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: var(--smk-text, #0f172a) !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 40px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: background .12s, border-color .12s;
}
.smk-filter-btn:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}
.smk-filter-btn i { font-size: 13px; }
.smk-filter-btn__lbl { font-size: 14px; }
/* Icon-only variant — square button, no label. */
.smk-filter-btn--icon-only {
    padding: 0 !important;
    width: 40px !important;
    justify-content: center !important;
}
.smk-filter-btn--icon-only i { margin: 0 !important; }

/* =================================================================
   Realtime "reconnecting" banner — shown by the quiz host + player
   views whenever the Pusher/Soketi WebSocket isn't in the
   `connected` state. Anchored to the top of the viewport so it
   stays visible even on the full-bleed live screens.
   ================================================================= */
.smk-rt-banner {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #06b6d4 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(234, 88, 12, .35);
    animation: smkRtPulse 1.4s ease-in-out infinite;
}
@keyframes smkRtPulse {
    0%, 100% { opacity: 1;   transform: translateX(-50%) scale(1); }
    50%      { opacity: .75; transform: translateX(-50%) scale(.97); }
}
[data-theme-style="dark"] .smk-filter-btn {
    background: #111827 !important;
    border-color: #1f2a3a !important;
    color: #f1f5f9 !important;
}
[data-theme-style="dark"] .smk-filter-btn:hover { background: #0b1220 !important; }
/* Match the view-toggle group height + spacing so the toolbar feels even. */
.smk-list-toolbar__actions .btn-group .smk-view-btn {
    height: 40px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
}
.smk-list-toolbar__actions .btn-group { gap: 4px; margin-right: 10px !important; }
@media (max-width: 575px) {
    /* Drop the "Filter" label on tiny viewports — keep the funnel. */
    .smk-filter-btn__lbl { display: none; }
    .smk-filter-btn i { margin-right: 0 !important; }
    .smk-filter-btn { padding: 9px 12px !important; }
}
@media (max-width: 575px) {
    .smk-survey-box__header--rich { flex-wrap: wrap; }
    .smk-cta-create { padding: 8px 14px !important; }
}
[data-theme-style="dark"] .smk-survey-box__h1 { color: #f1f5f9; }
[data-theme-style="dark"] .smk-survey-box__subtitle { color: #94a3b8; }

/* =================================================================
   Stats strip — a SINGLE connected pill bar with 5 inline segments.
   One outer rounded background + soft border, vertical dividers
   between segments. Markup is unchanged (still 5 .smk-stat-tile
   elements) but the visual model is one bar, not five cards.
   ================================================================= */
.smk-stats-strip {
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    padding: 0;
    /* Horizontal margin is 0 — .smk-survey-box already pads 24px on
       each side, so the pill fills the same inner width as the list
       table below it. Bottom margin keeps breathing room before the
       list header row. */
    margin: 0 0 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
[data-theme-style="dark"] .smk-stats-strip { background: #111827; border-color: #1f2a3a; }

.smk-stat-tile {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
    min-width: 0;
    /* Soft vertical divider between segments. */
    border-left: 1px solid #eef0f3;
}
.smk-stat-tile:first-child { border-left: 0; }
[data-theme-style="dark"] .smk-stat-tile { border-left-color: #1f2a3a; }
.smk-stat-tile:hover { background: rgba(15, 23, 42, .025); }
[data-theme-style="dark"] .smk-stat-tile:hover { background: rgba(255, 255, 255, .03); }

.smk-stat-tile__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.smk-stat-tile__body { min-width: 0; display: flex; flex-direction: row; align-items: baseline; gap: 8px; white-space: nowrap; }
.smk-stat-tile__num {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    color: var(--smk-text, #0f172a);
    letter-spacing: -.02em;
}
.smk-stat-tile__lbl {
    font-size: 12px;
    color: var(--smk-text-muted, #64748b);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme-style="dark"] .smk-stat-tile__num { color: #f1f5f9; }
[data-theme-style="dark"] .smk-stat-tile__lbl { color: #94a3b8; }

/* Per-segment accent — icon background + color. */
.smk-stat-tile--surveys   .smk-stat-tile__icon { background: rgba(6, 182, 212,.12); color: #2563eb; }
.smk-stat-tile--responses .smk-stat-tile__icon { background: rgba(16,185,129,.12); color: #059669; }
.smk-stat-tile--views     .smk-stat-tile__icon { background: rgba(37,99,235,.12);  color: #2563eb; }
.smk-stat-tile--active    .smk-stat-tile__icon { background: rgba(245,158,11,.14); color: #d97706; }
.smk-stat-tile--langs     .smk-stat-tile__icon { background: rgba(13,148,136,.12); color: #0d9488; }

@media (max-width: 1100px) {
    /* Number stacks above label below this width so the pill stays one row. */
    .smk-stat-tile__body { flex-direction: column; align-items: flex-start; gap: 2px; }
    .smk-stat-tile__num { font-size: 16px; }
    .smk-stat-tile { padding: 10px 12px; gap: 8px; }
    .smk-stat-tile__icon { width: 28px; height: 28px; font-size: 12px; }
}
@media (max-width: 767px) {
    /* On phones the connected pill wraps into rows. */
    .smk-stats-strip { flex-wrap: wrap; margin: 0 0 14px; }
    .smk-stat-tile { flex: 1 1 33%; border-top: 1px solid #eef0f3; }
    .smk-stat-tile:nth-child(-n+3) { border-top: 0; }
    .smk-stat-tile:nth-child(3n+1) { border-left: 0; }
    [data-theme-style="dark"] .smk-stat-tile { border-top-color: #1f2a3a; }
}
@media (max-width: 480px) {
    .smk-stat-tile { flex: 1 1 50%; }
    .smk-stat-tile:nth-child(-n+2) { border-top: 0; }
    .smk-stat-tile:nth-child(-n+3) { border-top: 1px solid #eef0f3; }
    .smk-stat-tile:nth-child(3) { border-top: 1px solid #eef0f3; }
    .smk-stat-tile:nth-child(odd) { border-left: 0; }
    .smk-stat-tile:nth-child(even) { border-left: 1px solid #eef0f3; }
}

/* =================================================================
   Sparkline cell — inline SVG with stroke + soft area fill + dots.
   The stroke color uses --c-spark, set on each cell by an
   nth-child(6n+k) rule below so rows cycle through 6 palette colors
   (purple / blue / green / orange / pink / teal) for visual variety —
   matching the target design.
   ================================================================= */
.smk-list-cell--sparkline {
    align-items: center !important;
    justify-content: flex-start !important;
    /* Default color, overridden by the nth-child rules below. */
    --c-spark: #2563eb;
}
/* Row color rotation. .colm wraps each card in the listing. */
.smk-survey-list[data-smk-view="list"] .colm:nth-child(6n+1) .smk-list-cell--sparkline { --c-spark: #2563eb; }
.smk-survey-list[data-smk-view="list"] .colm:nth-child(6n+2) .smk-list-cell--sparkline { --c-spark: #2563eb; }
.smk-survey-list[data-smk-view="list"] .colm:nth-child(6n+3) .smk-list-cell--sparkline { --c-spark: #16a34a; }
.smk-survey-list[data-smk-view="list"] .colm:nth-child(6n+4) .smk-list-cell--sparkline { --c-spark: #2563eb; }
.smk-survey-list[data-smk-view="list"] .colm:nth-child(6n+5) .smk-list-cell--sparkline { --c-spark: #db2777; }
.smk-survey-list[data-smk-view="list"] .colm:nth-child(6n)   .smk-list-cell--sparkline { --c-spark: #0d9488; }

.smk-sparkline-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-wrap: nowrap;
}
.smk-sparkline {
    width: 120px;          /* fixed width so flat lines don't stretch */
    height: 32px;
    display: block;
    flex: 0 0 120px;
    overflow: visible;
}
.smk-sparkline__line {
    fill: none;
    stroke: var(--c-spark, #2563eb);
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.smk-sparkline__fill {
    fill: var(--c-spark, #2563eb);
    fill-opacity: .12;
    stroke: none;
}
.smk-sparkline__dot {
    fill: #ffffff;
    stroke: var(--c-spark, #2563eb);
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
}
[data-theme-style="dark"] .smk-sparkline__dot { fill: #111827; }

/* Empty (all-zero) variant — soften the line + dots so the "no real
   data yet" state is obvious without looking broken. */
.smk-sparkline-wrap--empty .smk-sparkline__line {
    stroke: var(--ink-300, #cbd5e1);
    stroke-dasharray: 3 3;
    stroke-width: 1.4;
}
.smk-sparkline-wrap--empty .smk-sparkline__dot {
    stroke: var(--ink-300, #cbd5e1);
    fill: #fff;
}

/* ---- Dual-line variant: Responses vs Views merged into one column ----
   Fixed two-color scheme (views = blue, responses = purple) matching the
   dashboard's main activity-chart legend, so the two overlaid lines are
   always distinguishable regardless of the per-row --c-spark rotation. */
.smk-sparkline-wrap--dual .smk-sparkline__line--views { stroke: #2563eb; }
.smk-sparkline-wrap--dual .smk-sparkline__line--resp  { stroke: #06b6d4; stroke-width: 2; }
.smk-sparkline-wrap--dual .smk-sparkline__fill        { fill: #2563eb; fill-opacity: .10; }
.smk-sparkline-wrap--dual.smk-sparkline-wrap--empty .smk-sparkline__line--views,
.smk-sparkline-wrap--dual.smk-sparkline-wrap--empty .smk-sparkline__line--resp {
    stroke: var(--ink-300, #cbd5e1);
    stroke-dasharray: 3 3;
    stroke-width: 1.4;
}

/* The responses/views figure (e.g. 3/8 = 3 responses, 8 views). */
.smk-sparkline-meta {
    display: flex; flex-direction: column;
    align-items: flex-start; line-height: 1.15; min-width: 0;
}
/* Was 18px/800 — the counts and their icons out-shouted the survey titles.
   Colours follow the chart legend: cyan = responses, blue = views. */
.smk-rv { font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; display: inline-flex; align-items: center; }
.smk-rv__r     { color: var(--accent-cyan-ink);    display: inline-flex; align-items: center; }
.smk-rv__v     { color: var(--brand-primary-text); display: inline-flex; align-items: center; }
.smk-rv__r i, .smk-rv__v i { font-size: .92em; margin-right: 4px; opacity: .7; }
.smk-rv__slash { color: #cbd5e1; margin: 0 4px; font-weight: 600; }
.smk-sparkline-meta .smk-list-cell__lbl { font-size: 11px; color: #6b7280; font-weight: 500; white-space: nowrap; }
[data-theme-style="dark"] .smk-rv__slash { color: #475569; }

.smk-sparkline-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
    white-space: nowrap;
}
.smk-sparkline-meta .smk-list-cell__num {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: var(--smk-text, #0f172a);
}
.smk-sparkline-meta .smk-list-cell__lbl {
    font-size: 11px;
    color: var(--smk-text-muted, #64748b);
    font-weight: 500;
}
[data-theme-style="dark"] .smk-sparkline-meta .smk-list-cell__num { color: #f1f5f9; }
[data-theme-style="dark"] .smk-sparkline-meta .smk-list-cell__lbl { color: #94a3b8; }
.smk-list-header__cell--sparkline { text-align: left; }

/* ----- Header row ----- */
.smk-survey-list[data-smk-view="list"] .smk-list-only.smk-list-header {
    display: grid !important;
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfc;
}
[data-theme-style="dark"] .smk-survey-list[data-smk-view="list"] .smk-list-only.smk-list-header {
    background: #0b1220;
    border-bottom-color: #1f2a3a;
}
.smk-survey-list[data-smk-view="list"] .smk-list-header__cell {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ----- Each card as a row ----- */
.smk-survey-list[data-smk-view="list"] .colm {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card {
    background: #ffffff !important;
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    box-shadow: none !important;
    transition: background .12s ease;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card:hover {
    background: #fafbfc !important;
    transform: none !important;
    box-shadow: none !important;
}
[data-theme-style="dark"] .smk-survey-list[data-smk-view="list"] .smk-survey-card { background: #111827 !important; border-top-color: #1f2a3a !important; }
[data-theme-style="dark"] .smk-survey-list[data-smk-view="list"] .smk-survey-card:hover { background: #0b1220 !important; }

/* Show list-only cells (the ones rendered in PHP for table cells) */
.smk-survey-list[data-smk-view="list"] .smk-list-only.smk-list-cell {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
}

/* ----- Col 1: Survey (icon + title + url) ----- */
.smk-survey-list[data-smk-view="list"] .smk-survey-card__head {
    grid-column: 1;
    display: grid !important;
    grid-template-columns: 52px 1fr;
    gap: 14px;
    padding: 0 !important;
    align-items: center;
}
/* Icon: 52x52 rounded square colored by type */
.smk-survey-list[data-smk-view="list"] .smk-survey-card__ring {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px;
    border-radius: 12px !important;
    background: var(--smk-c-soft) !important;
    position: relative;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__ring::before {
    display: none !important;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__ring-num,
.smk-survey-list[data-smk-view="list"] .smk-survey-card__ring-lbl {
    display: none !important;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__ring::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--smk-c-deep);
    -webkit-mask: var(--smk-icon-url) center/24px no-repeat;
            mask: var(--smk-icon-url) center/24px no-repeat;
}
/* Per-type icon (font-awesome unicode rendered via pseudo-element text) */
.smk-survey-list[data-smk-view="list"] .smk-survey-card[data-type="survey"] .smk-survey-card__ring::after {
    content: "📋"; -webkit-mask: none; mask: none; background: transparent;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: var(--smk-c-deep);
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card[data-type="qr"] .smk-survey-card__ring::after,
.smk-survey-list[data-smk-view="list"] .smk-survey-card[data-type="link"] .smk-survey-card__ring::after,
.smk-survey-list[data-smk-view="list"] .smk-survey-card[data-type="vcard"] .smk-survey-card__ring::after,
.smk-survey-list[data-smk-view="list"] .smk-survey-card[data-type="event"] .smk-survey-card__ring::after,
.smk-survey-list[data-smk-view="list"] .smk-survey-card[data-type="file"] .smk-survey-card__ring::after,
.smk-survey-list[data-smk-view="list"] .smk-survey-card[data-type="static"] .smk-survey-card__ring::after {
    -webkit-mask: none; mask: none; background: transparent;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: var(--smk-c-deep);
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card[data-type="qr"]     .smk-survey-card__ring::after { content: "▣"; }
.smk-survey-list[data-smk-view="list"] .smk-survey-card[data-type="link"]   .smk-survey-card__ring::after { content: "🔗"; font-size: 18px; }
.smk-survey-list[data-smk-view="list"] .smk-survey-card[data-type="vcard"]  .smk-survey-card__ring::after { content: "👤"; font-size: 18px; }
.smk-survey-list[data-smk-view="list"] .smk-survey-card[data-type="event"]  .smk-survey-card__ring::after { content: "📅"; font-size: 18px; }
.smk-survey-list[data-smk-view="list"] .smk-survey-card[data-type="file"]   .smk-survey-card__ring::after { content: "📄"; font-size: 18px; }
.smk-survey-list[data-smk-view="list"] .smk-survey-card[data-type="static"] .smk-survey-card__ring::after { content: "</>"; font-family: monospace; font-size: 14px; font-weight: 700; }

/* Body inside col 1 */
.smk-survey-list[data-smk-view="list"] .smk-survey-card__body {
    min-width: 0;
    gap: 4px !important;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__title.title-input {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-theme-style="dark"] .smk-survey-list[data-smk-view="list"] .smk-survey-card__title.title-input { color: #f1f5f9 !important; }
.smk-survey-list[data-smk-view="list"] .smk-survey-card__title.title-input:focus {
    border: 1px solid var(--smk-brand) !important;
    background: #f9fafb !important;
}
/* Hide chips + meta in list mode (the URL row replaces this info) */
.smk-survey-list[data-smk-view="list"] .smk-survey-card__sub,
.smk-survey-list[data-smk-view="list"] .smk-survey-card__meta {
    display: none !important;
}

/* URL row → tucked under the title as a compact line.
   The URL block is now a CHILD of .smk-survey-card__body (moved in
   the PHP view) so it inherits column 1 naturally; explicit grid
   placement is removed to avoid forcing a phantom second row.
   The boxed bg/border styling from the base rule is also stripped
   here — in list view the URL should read as a quiet link line
   under the title, not a separately framed component. */
.smk-survey-list[data-smk-view="list"] .smk-survey-card__url.url-row {
    grid-column: auto !important;
    grid-row: auto !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    max-width: 100%;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__url input[type="text"] {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 12px !important;
    color: #2563eb !important;             /* muted indigo link tone */
    min-width: 0;
    flex: 0 1 auto;
    max-width: 180px;
    text-overflow: ellipsis;
    cursor: text;
}
[data-theme-style="dark"] .smk-survey-list[data-smk-view="list"] .smk-survey-card__url input[type="text"] {
    color: #a5b4fc !important;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__url input[type="text"] {
    font-size: 12px !important;
    color: #6b7280 !important;
    padding: 0 !important;
    height: auto !important;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__url .url-row__icon { font-size: 10px !important; color: #9ca3af !important; }
.smk-survey-list[data-smk-view="list"] .smk-survey-card__url .copy-btn,
.smk-survey-list[data-smk-view="list"] .smk-survey-card__url .open-btn {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px;
}
/* Q count under URL */
.smk-survey-list[data-smk-view="list"] .smk-survey-card__head + .smk-list-only.smk-list-cell--qcount {
    grid-column: 1;
    grid-row: 3;
    margin-left: 66px;
}

/* ----- Col 2: Responses (big number) ----- */
.smk-survey-list[data-smk-view="list"] .smk-list-cell--responses {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}
.smk-survey-list[data-smk-view="list"] .smk-list-cell--views {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
}
.smk-survey-list[data-smk-view="list"] .smk-list-cell__num {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #2563eb !important;
    line-height: 1.2;
}
.smk-survey-list[data-smk-view="list"] .smk-list-cell__lbl {
    font-size: 12px !important;
    color: #6b7280;
    font-weight: 500;
}

/* ----- Col 4: Languages ----- */
/* The original .smk-survey-card__chips lives inside body so it can't sit
   at grid-column 4 directly. Hide it here and use the duplicate cell
   (.smk-list-cell--langs) which IS a direct grid child. */
.smk-survey-list[data-smk-view="list"] .smk-survey-card__chips {
    display: none !important;
}
.smk-survey-list[data-smk-view="list"] .smk-list-cell--langs {
    grid-column: 2 !important;
    grid-row: 1 !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 4px !important;
    align-self: center;
}
.smk-survey-list[data-smk-view="list"] .smk-list-cell--langs .lang-badge {
    padding: 3px 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    background: #f3f4f6 !important;
    border: none !important;
    color: #4b5563 !important;
    line-height: 1.4 !important;
    cursor: pointer;
}
.smk-survey-list[data-smk-view="list"] .smk-list-cell--langs .lang-badge.active {
    background: #ecfeff !important;
    color: #0e7490 !important;
}

/* Default-language tick. The active language pill is the survey's DEFAULT
   language (the one shown first to respondents). A leading check makes that
   obvious at a glance — users were confused about what the highlighted pill
   meant. Targets .smk-lang-pick so it applies in BOTH grid and list views;
   placeholders aren't .smk-lang-pick so they're untouched. */
.smk-lang-pick.active::before {
    content: "\2713";
    font-weight: 900;
    font-size: 0.9em;
    line-height: 1;
    margin-right: 3px;
}
.smk-survey-list[data-smk-view="list"] .smk-list-cell--langs .smk-lang-placeholder {
    background: #f9fafb !important;
    color: #d1d5db !important;
    cursor: default;
}

/* ----- Col 5: Visitors (sparkline) — placed BETWEEN Languages and
   Created so the new column appears in the right slot. */
.smk-survey-list[data-smk-view="list"] .smk-list-cell--sparkline {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center;
}

/* ----- Col 4: Created ----- */
.smk-survey-list[data-smk-view="list"] .smk-list-cell--created {
    grid-column: 4;
    grid-row: 1;
    align-self: center;
}
.smk-survey-list[data-smk-view="list"] .smk-list-cell__date {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}
[data-theme-style="dark"] .smk-survey-list[data-smk-view="list"] .smk-list-cell__date { color: #f1f5f9 !important; }
.smk-survey-list[data-smk-view="list"] .smk-list-cell__time {
    font-size: 12px !important;
    color: #6b7280 !important;
}

/* ----- Col 7/8: Status + Actions (unwrap from .smk-survey-card__foot)
   Shifted +1 from the original 7-col layout to make room for the new
   col 5 (Visitors / sparkline). */
.smk-survey-list[data-smk-view="list"] .smk-survey-card__foot {
    display: contents !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__status {
    grid-column: 5 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: static !important;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__status-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__status-label::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--smk-c);
    display: inline-block;
}
/* Status dot inside the toggle wrapper gets hidden (we use the ::before above) */
.smk-survey-list[data-smk-view="list"] .smk-survey-card__dot {
    display: none !important;
}

/* Actions column */
.smk-survey-list[data-smk-view="list"] .smk-survey-card__actions {
    grid-column: 6 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}
/* Icon-only action bar: uniform 32px hit targets, subtle hover. */
.smk-survey-list[data-smk-view="list"] .smk-actions-bar .smk-btn-icon {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 auto;
    border-radius: 8px;
}
.smk-survey-list[data-smk-view="list"] .smk-actions-bar .smk-btn-icon:hover {
    background: #ecfeff;
    color: #0e7490;
}
.smk-survey-list[data-smk-view="list"] .smk-actions-bar .share-link:hover {
    background: var(--smk-brand, #2563eb);
    color: #fff;
}
.smk-survey-list[data-smk-view="list"] .smk-btn-cta {
    background: #f3f4f6 !important;
    color: #4b5563 !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.smk-survey-list[data-smk-view="list"] .smk-btn-cta:hover {
    background: #ecfeff !important;
    color: #0e7490 !important;
    border-color: #67e8f9 !important;
}
.smk-survey-list[data-smk-view="list"] .smk-btn-cta i {
    color: inherit !important;
}
.smk-survey-list[data-smk-view="list"] .smk-card-menu__toggle {
    width: 32px !important;
    height: 32px !important;
}

/* Mobile fallback: stack into a single column */
@media (max-width: 991.98px) {
    .smk-survey-list[data-smk-view="list"] .smk-list-header { display: none !important; }
    .smk-survey-list[data-smk-view="list"] .smk-survey-card {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .smk-survey-list[data-smk-view="list"] .smk-survey-card > * {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    .smk-survey-list[data-smk-view="list"] .smk-survey-card__url.url-row {
        margin-left: 66px !important;
    }
}

/* Legacy list view CSS (below) is now superseded — kept as no-op for any
   stale matches but mostly overridden by the rules above. */
.legacy-list-view-marker { display: none; }

/* ===== Legacy/redundant list rules (kept for safety, neutralized) ============================
   The new rules above take precedence. Old version targeted the old card
   structure (.qr-row/.url-row/.title-row) — kept disabled. */

/* Each row spans full width, stacks vertically with a small gap. */
.smk-survey-list[data-smk-view="list"] .colm,
body .smk-dash-main .smk-survey-list[data-smk-view="list"] .colm:has(> .smk-survey-card) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
}

/* Card → horizontal flex row instead of vertical. */
.smk-survey-list[data-smk-view="list"] .smk-survey-card {
    margin-bottom: 0;
    border-radius: 12px;
    border-top-width: 1px;                         /* drop the colored stripe in list mode */
    border-left: 4px solid var(--smk-c);           /* move it to the left edge instead */
}
[dir="rtl"] .smk-survey-list[data-smk-view="list"] .smk-survey-card {
    border-left: 1px solid var(--smk-border);
    border-right: 4px solid var(--smk-c);
}

/* Header becomes the main row. Lay out: ring | body | URL | actions. */
.smk-survey-list[data-smk-view="list"] .smk-survey-card__head {
    display: grid;
    grid-template-columns: 56px minmax(220px, 1.4fr) minmax(160px, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: .65rem 1rem;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__ring {
    width: 44px; height: 44px; flex: 0 0 44px;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__ring::before { inset: 4px; }
.smk-survey-list[data-smk-view="list"] .smk-survey-card__ring-num { font-size: .85rem; }
.smk-survey-list[data-smk-view="list"] .smk-survey-card__ring-lbl { font-size: .55rem; }

.smk-survey-list[data-smk-view="list"] .smk-survey-card__body {
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__title.title-input {
    font-size: .95rem;
    padding: 1px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__sub {
    font-size: .72rem;
    gap: .25rem;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__type {
    padding: 1px 6px;
    font-size: .64rem;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__chip { font-size: .62rem; padding: 0 6px; }
/* Meta + langs hidden in list mode to keep rows tidy; they remain in grid mode. */
.smk-survey-list[data-smk-view="list"] .smk-survey-card__meta { display: none; }
.smk-survey-list[data-smk-view="list"] .smk-survey-card__chips { display: none; }

/* URL block — show inline as third column with copy/open buttons. */
.smk-survey-list[data-smk-view="list"] .smk-survey-card__url.url-row {
    margin: 0;
    padding: .25rem .5rem;
    background: var(--smk-ink-50);
    border: 1px solid var(--smk-border-soft);
    border-radius: 8px;
    min-width: 0;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__url input[type="text"] {
    font-size: .72rem;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__url .copy-btn,
.smk-survey-list[data-smk-view="list"] .smk-survey-card__url .open-btn {
    width: 24px; height: 24px;
}

/* Footer collapses into the last column (toggle pill + actions). The
   border-top + bg gradient disappear since this isn't a separate band. */
.smk-survey-list[data-smk-view="list"] .smk-survey-card__foot {
    grid-column: 4;
    background: transparent !important;
    border-top: 0 !important;
    padding: 0;
    margin: 0;
    flex-wrap: nowrap;
    gap: .35rem;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__status {
    display: none;                               /* the toggle re-appears in the menu */
}
.smk-survey-list[data-smk-view="list"] .smk-btn-cta { padding: .35rem .75rem; font-size: .78rem; }

/* Hide the head wrapper's status row from the head grid — footer floats
   into the 4th column via positioning. We override the natural document
   flow by absolutely-positioning the foot relative to the card. */
.smk-survey-list[data-smk-view="list"] .smk-survey-card {
    position: relative;
    padding-right: 220px;                        /* reserve room for the floated actions */
}
[dir="rtl"] .smk-survey-list[data-smk-view="list"] .smk-survey-card {
    padding-right: 0;
    padding-left: 220px;
}
.smk-survey-list[data-smk-view="list"] .smk-survey-card__foot {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: auto;
    flex-direction: row;
    align-items: center;
}
[dir="rtl"] .smk-survey-list[data-smk-view="list"] .smk-survey-card__foot {
    right: auto; left: 16px;
}

@media (max-width: 991.98px) {
    .smk-survey-list[data-smk-view="list"] .smk-survey-card { padding-right: 0; }
    [dir="rtl"] .smk-survey-list[data-smk-view="list"] .smk-survey-card { padding-left: 0; }
    .smk-survey-list[data-smk-view="list"] .smk-survey-card__head {
        grid-template-columns: 44px 1fr auto;
    }
    .smk-survey-list[data-smk-view="list"] .smk-survey-card__url.url-row { display: none; }
    .smk-survey-list[data-smk-view="list"] .smk-survey-card__foot {
        position: static; transform: none;
        margin-top: .35rem;
        grid-column: 1 / -1;
        padding: .35rem .75rem .65rem;
        border-top: 1px solid var(--smk-border-soft) !important;
        background: var(--smk-ink-50) !important;
    }
    .smk-survey-list[data-smk-view="list"] .smk-survey-card__status { display: inline-flex; }
}

/* ============================================================
 * Dashboard PRO: 4-col stat row, charts, country/device/feed panels.
 * ============================================================ */

.smk-stats-row--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1199.98px) {
    .smk-stats-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .smk-stats-row--4 { grid-template-columns: 1fr; }
}

.smk-stat-card__hint {
    color: #94a3b8;
    font-size: .72rem;
    font-weight: 500;
}
.smk-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 4px;
    opacity: .8;
}
.smk-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}
.smk-delta--up   { background:#ecfdf5; color:#047857; }
.smk-delta--down { background:#fef2f2; color:#b91c1c; }
.smk-delta--flat { background:#f1f5f9; color:#64748b; }

/* --- Pro grid: chart + 3 panels --- */
.smk-pro-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
    margin: 1.25rem 0 1.5rem 0;
}
.smk-pro-grid .smk-panel--chart { grid-row: 1 / span 2; }
.smk-pro-grid .smk-panel--feed  { grid-column: 1; }

@media (max-width: 1199.98px) {
    .smk-pro-grid {
        grid-template-columns: 1fr 1fr;
    }
    .smk-pro-grid .smk-panel--chart { grid-column: 1 / -1; grid-row: auto; }
    .smk-pro-grid .smk-panel--feed  { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    .smk-pro-grid { grid-template-columns: 1fr; }
}

.smk-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.smk-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}
.smk-panel__title {
    font-weight: 700;
    color: #0f172a;
    font-size: .98rem;
}
.smk-panel__sub {
    color: #94a3b8;
    font-size: .78rem;
}
.smk-panel__legend {
    display: flex;
    gap: .85rem;
    font-size: .75rem;
    color: #475569;
}
.smk-panel__legend span { display: inline-flex; align-items: center; gap: 6px; }
.smk-swatch {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 3px;
}

.smk-chart-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 280px;
}

/* --- Country list --- */
.smk-country-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.smk-country-list li {
    display: grid;
    grid-template-columns: 22px 30px 1fr auto;
    align-items: center;
    gap: .65rem;
}
.smk-country-flag { font-size: 1.1rem; line-height: 1; }
.smk-country-code { font-weight: 600; color: #475569; font-size: .8rem; }
.smk-country-bar {
    background: #f1f5f9;
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
}
.smk-country-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #06b6d4);
    border-radius: 999px;
}
.smk-country-count { font-weight: 700; color: #0f172a; font-size: .82rem; }

/* --- Device donut --- */
.smk-donut-wrap {
    position: relative;
    height: 180px;
    margin-bottom: .85rem;
}
.smk-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.smk-donut-center__num {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
}
.smk-donut-center__lbl {
    font-size: .72rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px;
}
.smk-device-legend {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    font-size: .82rem;
    color: #475569;
}
.smk-device-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Activity feed --- */
.smk-feed {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.smk-feed li {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .65rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.smk-feed li:last-child { border-bottom: 0; }
.smk-feed-flag {
    font-size: 1.4rem;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border-radius: 10px;
    flex-shrink: 0;
}
.smk-feed-body { flex: 1 1 auto; min-width: 0; }
.smk-feed-title {
    display: block;
    font-weight: 600;
    color: #0f172a;
    font-size: .9rem;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.smk-feed-title:hover { color: #2563eb; text-decoration: none; }
.smk-feed-meta {
    color: #94a3b8;
    font-size: .75rem;
    margin-top: 2px;
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}
.smk-feed-time {
    color: #94a3b8;
    font-size: .75rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Empty state inside panel --- */
.smk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 2rem 1rem;
    color: #94a3b8;
    flex: 1 1 auto;
    text-align: center;
}
.smk-empty i { font-size: 1.8rem; color: #cbd5e1; }
.smk-empty span { font-size: .85rem; }

/* ============================================================
 * Dashboard layout: main (surveys) + aside (analytics).
 * At >=992px the aside docks to the right; below that it stacks
 * underneath. The --solo modifier collapses the grid to one
 * column when there are no stats to show.
 * ============================================================ */
.smk-dash-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas: "main aside";
    gap: 1.25rem;
    align-items: start;
    margin-bottom: 1.5rem;
}
.smk-dash-layout--solo {
    grid-template-columns: 1fr;
    grid-template-areas: "main";
}

.smk-dash-main  { grid-area: main;  min-width: 0; }
.smk-dash-aside { grid-area: aside; min-width: 0; }

@media (max-width: 1199.98px) {
    .smk-dash-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 991.98px) {
    .smk-dash-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "aside";
    }
}

/* Promoted analytics row — the aside now sits ABOVE the survey grid as a
   full-width horizontal strip. The 4 panels lay out as:
       [ Chart 2× ] [ Countries ] [ Devices ]
       [ Recent responses (spans all 4)         ]
   On tablets it collapses to 2 columns; on mobile it stacks. */
.smk-dash-layout {
    display: flex !important;
    flex-direction: column;
    gap: 1.25rem;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
}
.smk-dash-aside { order: 0; width: 100%; min-width: 0; }
.smk-dash-main  { order: 1; width: 100%; min-width: 0; }

/* === Highlighted "primary" tray around the analytics panels ===
   Makes the 4 panels feel grouped + draws the eye there first. The
   tint is slightly stronger than the survey box below so the visual
   hierarchy reads top → bottom. */
.smk-dash-aside {
    background: linear-gradient(180deg, #e3ebf7 0%, #e8eef9 100%);
    border: 1px solid #d6e0ef;
    border-radius: 22px;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
[data-theme-style="dark"] .smk-dash-aside {
    background: linear-gradient(180deg, #131c30 0%, #0f1727 100%);
    border-color: #1f2a3e;
}
/* Panels inside the highlighted tray stay white with a flat border so they
   contrast cleanly against the tinted backdrop. */
.smk-dash-aside .smk-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
[data-theme-style="dark"] .smk-dash-aside .smk-panel {
    background: #131a2a;
    border-color: #1f2a3a;
}

/* 4 equal-width panels in a single row at the top:
       [ Chart ] [ Countries ] [ Devices ] [ Recent responses ]
   All panels share the same row + height. The recent-responses feed scrolls
   internally so the row height stays predictable. */
.smk-dash-aside .smk-pro-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 1rem;
    margin: 0;
}
.smk-dash-aside .smk-pro-grid > .smk-panel {
    grid-row: 1;
    min-width: 0;
}
.smk-dash-aside .smk-panel--chart { grid-column: 1 / 2; }
.smk-dash-aside .smk-pro-grid > .smk-panel:nth-of-type(2) { grid-column: 2 / 3; } /* Countries */
.smk-dash-aside .smk-pro-grid > .smk-panel:nth-of-type(3) { grid-column: 3 / 4; } /* Devices   */
.smk-dash-aside .smk-panel--feed  { grid-column: 4 / 5; }                        /* Recent    */

.smk-dash-aside .smk-panel { padding: 1rem; display: flex; flex-direction: column; min-height: 320px; }
.smk-dash-aside .smk-panel__head { margin-bottom: .5rem; }
.smk-dash-aside .smk-panel__title { font-size: .9rem; }
.smk-dash-aside .smk-panel__sub { font-size: .72rem; }
.smk-dash-aside .smk-chart-wrap { flex: 1 1 auto; min-height: 220px; }
.smk-dash-aside .smk-donut-wrap { height: 160px; }

/* Country list compact: each row uses smaller text + bars. */
.smk-dash-aside .smk-country-list { flex: 1 1 auto; overflow-y: auto; padding-right: 4px; }
.smk-dash-aside .smk-country-list li { font-size: .78rem; }

/* Recent responses feed: scroll inside the panel so the row stays tidy. */
.smk-dash-aside .smk-panel--feed .smk-feed { flex: 1 1 auto; overflow-y: auto; max-height: 240px; padding-right: 4px; }
.smk-dash-aside .smk-panel--feed .smk-feed li { padding: .4rem 0; font-size: .78rem; }

@media (max-width: 1399.98px) {
    /* Drop to 2x2 on medium-large screens so panels stay readable. */
    .smk-dash-aside .smk-pro-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto;
    }
    .smk-dash-aside .smk-panel--chart                              { grid-column: 1 / 2; grid-row: 1; }
    .smk-dash-aside .smk-pro-grid > .smk-panel:nth-of-type(2)      { grid-column: 2 / 3; grid-row: 1; }
    .smk-dash-aside .smk-pro-grid > .smk-panel:nth-of-type(3)      { grid-column: 1 / 2; grid-row: 2; }
    .smk-dash-aside .smk-panel--feed                                { grid-column: 2 / 3; grid-row: 2; }
}
@media (max-width: 767.98px) {
    .smk-dash-aside .smk-pro-grid { grid-template-columns: 1fr; }
    .smk-dash-aside .smk-pro-grid > .smk-panel { grid-column: 1; grid-row: auto; }
}

/* Bulk-select checkbox overlay for survey cards (Sprint 2 Bug B fix). */
.grid-card { position: relative; }
.smk-bulk-check {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.smk-bulk-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: #2563eb;
}
[dir="rtl"] .smk-bulk-check { left: auto; right: 10px; }
[data-theme-style="dark"] .smk-bulk-check {
    background: #1e293b;
    border-color: #334155;
}

/* =========================================================================
   SurveyMaker Design System (v2026.05) — single-file token + component layer.
   Progressive enhancement: overrides only what makes the UI feel modern,
   keeps all existing markup intact. RTL and dark-mode aware throughout.
   ========================================================================= */

:root {
    /* ---------------------------------------------------------------
       SurveyMaker brand identity — single source of truth.
       Blue carries the product. Cyan is the secondary accent and the
       AI signal. No violet: it competed with blue instead of supporting
       it, so the palette now runs blue -> cyan on one hue axis.
       Canonical names first, --smk-* kept as aliases for existing rules.
       --------------------------------------------------------------- */
    --brand-primary:        #2563eb;
    --brand-primary-hover:  #1d4ed8;
    --brand-deep:           #1e40af;
    --brand-primary-soft:   #eff6ff;
    /* Text/icon blue. Split from --brand-primary because #2563eb as TEXT
       on the dark surface (#111827) is only 2.5:1; buttons keep the solid
       blue with white text, text uses this. */
    --brand-primary-text:   #2563eb;

    --accent-cyan:          #06b6d4;
    --accent-cyan-hover:    #0891b2;
    --accent-cyan-soft:     #ecfeff;
    --accent-cyan-border:   #a5f3fc;
    /* Darker cyan for text on --accent-cyan-soft (4.9:1; #06b6d4 is 2.2:1
       there and fails AA, so never use the base cyan for small text). */
    --accent-cyan-ink:      #0e7490;

    --success:              #10b981;
    --success-soft:         #ecfdf5;
    --warning:              #f59e0b;
    --danger:               #ef4444;

    --text-primary:         #0f172a;
    --text-secondary:       #64748b;
    --text-muted:           #94a3b8;
    --background:           #f8fafc;
    --surface:              #ffffff;
    --surface-subtle:       #f1f5f9;
    --border:               #e2e8f0;

    --brand-gradient:       linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);

    /* Elevation / geometry (spec: 16px cards, 10-12px controls) */
    --shadow-card:          0 4px 16px rgba(15, 23, 42, .06);
    --shadow-raised:        0 6px 20px rgba(37, 99, 235, .18);
    --focus-ring:           0 0 0 3px rgba(37, 99, 235, .15);
    --radius-card:          16px;
    --radius-control:       12px;
    --radius-control-sm:    10px;

    /* Brand (aliases) */
    --smk-brand:        var(--brand-primary);
    --smk-brand-hover:  var(--brand-primary-hover);
    --smk-brand-2:      var(--accent-cyan);
    --smk-brand-soft:   var(--brand-primary-soft);
    --smk-ai-soft:      var(--accent-cyan-soft);
    /* Accent resolves to cyan. It has been, at various points, orange and
       then violet; both read as separate colour families rather than as an
       accent to the blue. */
    --smk-accent:       var(--accent-cyan);
    --smk-success:      var(--success);
    --smk-warn:         var(--warning);
    --smk-danger:       var(--danger);
    /* Back-compat: older rules still reference the violet token names. */
    --brand-ai:         var(--accent-cyan);
    --brand-ai-soft:    var(--accent-cyan-soft);
    /* Neutral scale */
    --smk-ink-900:      #0f172a;
    --smk-ink-700:      #334155;
    --smk-ink-500:      #64748b;
    --smk-ink-300:      #cbd5e1;
    --smk-ink-100:      #f1f5f9;
    --smk-ink-50:       #f8fafc;
    --smk-surface:      #ffffff;
    --smk-surface-2:    #f8fafc;
    --smk-border:       #e2e8f0;
    --smk-border-soft:  #eef2f7;
    /* Radius */
    --smk-r-sm:         8px;
    --smk-r-md:         12px;
    --smk-r-lg:         16px;
    --smk-r-xl:         24px;
    --smk-r-pill:       999px;
    /* Spacing scale (4-pt) */
    --smk-s-1:          .25rem;
    --smk-s-2:          .5rem;
    --smk-s-3:          .75rem;
    --smk-s-4:          1rem;
    --smk-s-6:          1.5rem;
    --smk-s-8:          2rem;
    --smk-s-12:         3rem;
    --smk-s-16:         4rem;
    /* Elevation */
    --smk-shadow-1:     0 1px 2px rgba(15, 23, 42, .06);
    --smk-shadow-2:     0 4px 12px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --smk-shadow-3:     0 12px 32px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .04);
    --smk-shadow-pop:   0 20px 60px rgba(37, 99, 235, .18);
    /* Motion */
    --smk-ease:         cubic-bezier(.4, 0, .2, 1);
    --smk-dur-fast:     150ms;
    --smk-dur-base:     220ms;
    --smk-dur-slow:     360ms;
    /* Gradients */
    --smk-grad-hero:    radial-gradient(1200px 600px at 0% 0%, rgba(6, 182, 212, .10) 0%, transparent 60%),
                        radial-gradient(900px  500px at 100% 0%, rgba(37, 99, 235, .10) 0%, transparent 55%),
                        linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
    --smk-grad-cta:     var(--brand-gradient);
}

[data-theme-style="dark"] {
    --smk-brand-soft:   #1e293b;
    --smk-ink-900:      #f1f5f9;
    --smk-ink-700:      #cbd5e1;
    --smk-ink-500:      #94a3b8;
    --smk-ink-300:      #475569;
    --smk-ink-100:      #1e293b;
    --smk-ink-50:       #0f172a;
    --smk-surface:      #111827;
    --smk-surface-2:    #0b1220;
    --smk-border:       #1f2a3a;
    --smk-border-soft:  #182234;
    --smk-shadow-1:     0 1px 2px rgba(0, 0, 0, .35);
    --smk-shadow-2:     0 4px 12px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .25);
    --smk-shadow-3:     0 12px 32px rgba(0, 0, 0, .55), 0 4px 8px rgba(0, 0, 0, .25);
    --smk-grad-hero:    radial-gradient(1200px 600px at 0% 0%, rgba(6, 182, 212, .22) 0%, transparent 60%),
                        radial-gradient(900px  500px at 100% 0%, rgba(37, 99, 235, .22) 0%, transparent 55%),
                        linear-gradient(180deg, #0b1220 0%, #0a0f1c 100%);
}

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   Landing / Hero modernization — applied via existing class hooks so the
   1670-line legacy view need not be rewritten.
   ===================================================================== */

.hero-section {
    position: relative;
    background: var(--smk-grad-hero);
    padding: clamp(3rem, 6vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
    overflow: hidden;
    isolation: isolate;
}
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12px 12px, rgba(15, 23, 42, .035) 1px, transparent 1.5px);
    background-size: 24px 24px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.1) 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.1) 100%);
    pointer-events: none;
    z-index: -1;
}
[data-theme-style="dark"] .hero-section::before {
    background-image: radial-gradient(circle at 12px 12px, rgba(255,255,255,.05) 1px, transparent 1.5px);
}

.hero-title {
    font-weight: 800 !important;
    font-size: clamp(2rem, 4.4vw, 3.5rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
    color: var(--smk-ink-900) !important;
    margin-bottom: var(--smk-s-6) !important;
}
.hero-title small {
    color: var(--smk-ink-500) !important;
    font-weight: 500 !important;
    font-size: clamp(1rem, 1.6vw, 1.4rem) !important;
    display: inline-block;
    margin-top: var(--smk-s-3);
    line-height: 1.5 !important;
}
.hero-title .typewriter-cursor {
    background: linear-gradient(120deg, var(--smk-brand) 0%, var(--smk-brand-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    border-color: var(--smk-brand-2) !important;
}

.hero-subtitle {
    font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
    line-height: 1.7 !important;
    color: var(--smk-ink-500) !important;
    max-width: 56ch;
    margin-bottom: var(--smk-s-6) !important;
}

/* Modern button polish — overlay onto existing .btn-primary / .btn-outline. */
.hero-section .btn,
.smk-btn {
    font-weight: 600 !important;
    border-radius: var(--smk-r-pill) !important;
    padding: .75rem 1.5rem !important;
    transition: transform var(--smk-dur-base) var(--smk-ease),
                box-shadow var(--smk-dur-base) var(--smk-ease),
                background var(--smk-dur-base) var(--smk-ease) !important;
    border: 1px solid transparent !important;
    letter-spacing: .005em;
}
.hero-section .btn-primary,
.smk-btn-primary {
    background: var(--smk-grad-cta) !important;
    border: none !important;
    box-shadow: var(--smk-shadow-pop) !important;
    color: #fff !important;
}
.hero-section .btn-primary:hover,
.smk-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 24px 70px rgba(6, 182, 212, .24), 0 2px 4px rgba(15,23,42,.08) !important;
}
.hero-section .btn-primary:active,
.smk-btn-primary:active {
    transform: translateY(0);
}
.hero-section .btn-outline {
    background: var(--smk-surface) !important;
    border: 1px solid var(--smk-border) !important;
    color: var(--smk-ink-700) !important;
    box-shadow: var(--smk-shadow-1) !important;
    opacity: 1 !important;
}
.hero-section .btn-outline:hover {
    border-color: var(--smk-ink-300) !important;
    background: var(--smk-ink-50) !important;
}

/* Trust-row platform icons polish. */
.platforms {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--smk-s-3);
    align-items: center;
    margin-top: var(--smk-s-6);
    padding-top: var(--smk-s-6);
    border-top: 1px solid var(--smk-border-soft);
}
.platforms .platform {
    width: 40px;
    height: 40px;
    border-radius: var(--smk-r-md);
    background: var(--smk-surface);
    border: 1px solid var(--smk-border-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--smk-dur-fast) var(--smk-ease);
}
.platforms .platform:hover { transform: translateY(-2px); }
.platforms .platform svg { width: 20px !important; height: 20px; opacity: .75; }

/* Pricing tab content modernization. */
.tab-content {
    background: var(--smk-surface) !important;
    border: 1px solid var(--smk-border) !important;
    border-radius: var(--smk-r-lg) !important;
    box-shadow: var(--smk-shadow-1) !important;
    padding: var(--smk-s-6) !important;
}

/* Feature/section card pattern usable anywhere. */
.smk-feature-card {
    background: var(--smk-surface);
    border: 1px solid var(--smk-border);
    border-radius: var(--smk-r-lg);
    padding: var(--smk-s-6);
    transition: transform var(--smk-dur-base) var(--smk-ease),
                box-shadow var(--smk-dur-base) var(--smk-ease),
                border-color var(--smk-dur-base) var(--smk-ease);
}
.smk-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--smk-shadow-2);
    border-color: var(--smk-ink-300);
}
.smk-feature-card__icon {
    width: 44px; height: 44px;
    border-radius: var(--smk-r-md);
    background: var(--smk-brand-soft);
    color: var(--smk-brand);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: var(--smk-s-4);
    font-size: 18px;
}
.smk-feature-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--smk-ink-900);
    margin: 0 0 var(--smk-s-2);
}
.smk-feature-card p {
    color: var(--smk-ink-500);
    margin: 0;
    line-height: 1.6;
}

/* =====================================================================
   Empty states (utility component) — pair with existing partials/no_data.
   ===================================================================== */
.smk-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--smk-s-12) var(--smk-s-6);
    background: var(--smk-surface);
    border: 1px dashed var(--smk-border);
    border-radius: var(--smk-r-lg);
    color: var(--smk-ink-500);
}
.smk-empty-state__icon {
    width: 64px; height: 64px;
    border-radius: var(--smk-r-pill);
    background: var(--smk-ink-100);
    color: var(--smk-ink-500);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px;
    margin-bottom: var(--smk-s-4);
}
.smk-empty-state__title {
    color: var(--smk-ink-900);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 var(--smk-s-2);
}
.smk-empty-state__desc {
    max-width: 44ch;
    line-height: 1.6;
    margin: 0 0 var(--smk-s-4);
}
.smk-empty-state .btn {
    margin-top: var(--smk-s-2);
}

/* =====================================================================
   Skeleton loaders — drop a <span class="smk-sk"> with width on it.
   ===================================================================== */
.smk-sk,
.smk-sk-line,
.smk-sk-circle,
.smk-sk-card {
    position: relative;
    overflow: hidden;
    background: var(--smk-ink-100);
    border-radius: var(--smk-r-sm);
}
.smk-sk-line { height: 12px; width: 100%; }
.smk-sk-line.smk-sk-line--lg { height: 18px; }
.smk-sk-line.smk-sk-line--sm { height: 8px; }
.smk-sk-circle { width: 40px; height: 40px; border-radius: var(--smk-r-pill); }
.smk-sk-card { height: 120px; border-radius: var(--smk-r-md); }
.smk-sk::after,
.smk-sk-line::after,
.smk-sk-circle::after,
.smk-sk-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, .55) 50%,
        transparent 100%);
    transform: translateX(-100%);
    animation: smk-shimmer 1.4s var(--smk-ease) infinite;
}
[data-theme-style="dark"] .smk-sk::after,
[data-theme-style="dark"] .smk-sk-line::after,
[data-theme-style="dark"] .smk-sk-circle::after,
[data-theme-style="dark"] .smk-sk-card::after {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(148, 163, 184, .15) 50%,
        transparent 100%);
}
@keyframes smk-shimmer {
    100% { transform: translateX(100%); }
}
[dir="rtl"] .smk-sk::after,
[dir="rtl"] .smk-sk-line::after,
[dir="rtl"] .smk-sk-circle::after,
[dir="rtl"] .smk-sk-card::after {
    animation-name: smk-shimmer-rtl;
}
@keyframes smk-shimmer-rtl {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* =====================================================================
   Dashboard polish carry-over — bring stat cards / panels in line with
   the design tokens above (uses tokens, doesn't redefine).
   ===================================================================== */
.smk-stat-card {
    background: var(--smk-surface);
    border: 1px solid var(--smk-border);
    border-radius: var(--smk-r-lg);
    box-shadow: var(--smk-shadow-1);
    transition: transform var(--smk-dur-base) var(--smk-ease),
                box-shadow var(--smk-dur-base) var(--smk-ease);
}
.smk-stat-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--smk-shadow-2);
}
.smk-panel {
    background: var(--smk-surface) !important;
    border: 1px solid var(--smk-border) !important;
    border-radius: var(--smk-r-lg) !important;
    box-shadow: var(--smk-shadow-1) !important;
}

/* =====================================================================
   Accessibility helpers.
   ===================================================================== */
.smk-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.smk-focus-ring:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--smk-brand) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .15) !important;
}

/* =====================================================================
   Mobile responsiveness top-up.
   ===================================================================== */
@media (max-width: 767.98px) {
    .hero-section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .hero-section .btn { width: 100%; margin-bottom: .5rem; }
    .platforms { justify-content: center; }
    .smk-feature-card { padding: var(--smk-s-4); }
    .smk-empty-state { padding: var(--smk-s-8) var(--smk-s-4); }
}

/* =========================================================================
   SurveyMaker Three-Column App Shell (v2026.05) — replaces the legacy
   horizontal navbar + dashboard sidebar on every authenticated app page.
   Pattern: icon rail (76px) | secondary nav (264px) | main canvas | floating
   top-right actions. Inspired by Linear/Notion/Stirling-PDF.
   ========================================================================= */

/* When the shell is present, hide the legacy app navbar entirely. */
body.app #navbar,
body.app nav.navbar-main { display: none !important; }
body.app .app-footer { display: none !important; }
body.app { margin: 0 !important; background: var(--smk-ink-50) !important; }
body.app main.surveymaker-animate { animation: none !important; }

.smk-shell {
    display: grid;
    grid-template-columns: 76px 264px 1fr;
    grid-template-areas: "rail nav main";
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: var(--smk-ink-50);
}
[dir="rtl"] .smk-shell {
    grid-template-columns: 1fr 264px 76px;
    grid-template-areas: "main nav rail";
}

/* Collapsed mode: hide the secondary sidebar (icon rail stays). */
body.smk-shell-nav-collapsed .smk-shell { grid-template-columns: 76px 0 1fr; }
body.smk-shell-nav-collapsed[dir="rtl"] .smk-shell { grid-template-columns: 1fr 0 76px; }
body.smk-shell-nav-collapsed .smk-shell__nav { transform: translateX(-100%); pointer-events: none; visibility: hidden; }
body.smk-shell-nav-collapsed[dir="rtl"] .smk-shell__nav { transform: translateX(100%); }
body.smk-shell-nav-collapsed .smk-shell__collapse i { transform: rotate(180deg); }

/* Icon rail (primary) */
.smk-shell__rail {
    grid-area: rail;
    background: var(--smk-surface);
    border-right: 1px solid var(--smk-border);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: .75rem .25rem 1rem;
    overflow-y: auto;
    overflow-x: hidden;
}
[dir="rtl"] .smk-shell__rail { border-right: 0; border-left: 1px solid var(--smk-border); }

.smk-shell__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin: .25rem .25rem .75rem;
    border-radius: 10px;
    text-decoration: none !important;
    color: inherit;
}
.smk-shell__brand img { max-width: 80%; max-height: 32px; object-fit: contain; }
/* The brand asset is now a full-color SurveyMaker badge that reads
   correctly on both light and dark surfaces, so no recoloring filter
   is applied in either theme. (Previously a white-only logo was
   flattened to black on the light rail, which turned the new colored
   badge into a solid black box.) */
[data-theme-style="light"] .smk-shell__brand img {
    filter: none !important;
}
[data-theme-style="dark"] .smk-shell__brand img {
    filter: none !important;
}
.smk-shell__brand-mark {
    width: 36px; height: 36px;
    background: var(--smk-grad-cta);
    color: #fff;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.1rem;
    box-shadow: var(--smk-shadow-pop);
}

.smk-shell__rail-nav,
.smk-shell__rail-foot {
    display: flex; flex-direction: column; gap: 2px; padding: 0;
}
.smk-shell__rail-nav { flex: 1 1 auto; }
.smk-shell__rail-foot {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--smk-border-soft);
}

.smk-shell__rail-item {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    padding: .55rem .25rem;
    border-radius: 10px;
    text-decoration: none !important;
    color: var(--smk-ink-500);
    transition: background var(--smk-dur-fast) var(--smk-ease),
                color var(--smk-dur-fast) var(--smk-ease);
}
.smk-shell__rail-item i { font-size: 1.05rem; line-height: 1; }
.smk-shell__rail-item span {
    font-size: .65rem; font-weight: 600;
    letter-spacing: .01em; line-height: 1;
}
.smk-shell__rail-item:hover { background: var(--smk-ink-100); color: var(--smk-ink-900); }
.smk-shell__rail-item.is-active { background: var(--smk-brand-soft); color: var(--smk-brand); }
[data-theme-style="dark"] .smk-shell__rail-item.is-active { color: #93c5fd; }

/* Secondary sidebar */
.smk-shell__nav {
    grid-area: nav;
    background: var(--smk-surface);
    border-right: 1px solid var(--smk-border);
    display: flex; flex-direction: column;
    overflow: hidden;
    transition: transform var(--smk-dur-base) var(--smk-ease);
}
[dir="rtl"] .smk-shell__nav { border-right: 0; border-left: 1px solid var(--smk-border); }

.smk-shell__nav-head {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .75rem .75rem .5rem;
    border-bottom: 1px solid var(--smk-border-soft);
}

/* ----- Search field (takes the available space; sits at the START) ----- */
.smk-shell__search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.smk-shell__search-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: var(--smk-ink-500);
    font-size: .8rem;
    pointer-events: none;
    z-index: 2;
}
[dir="rtl"] .smk-shell__search-icon { left: auto; right: 10px; }
.smk-shell__search .form-control {
    width: 100%;
    height: 34px;
    padding: 0 .75rem 0 32px;
    border-radius: 8px;
    border: 1px solid var(--smk-border);
    background: var(--smk-ink-50);
    font-size: .85rem;
    color: var(--smk-ink-900);
    transition: background var(--smk-dur-fast) var(--smk-ease),
                border-color var(--smk-dur-fast) var(--smk-ease),
                box-shadow var(--smk-dur-fast) var(--smk-ease);
}
[dir="rtl"] .smk-shell__search .form-control { padding: 0 32px 0 .75rem; }
.smk-shell__search .form-control::placeholder { color: var(--smk-ink-500); opacity: 1; }
.smk-shell__search .form-control:focus {
    background: var(--smk-surface);
    border-color: var(--smk-brand);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
    outline: none;
}
/* Defeat Chrome's autofill yellow background that leaks through even when
   autocomplete="off" is honored after our JS clears the value. */
.smk-shell__search .form-control:-webkit-autofill,
.smk-shell__search .form-control:-webkit-autofill:focus,
.smk-shell__search .form-control:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--smk-ink-900) !important;
    box-shadow: 0 0 0 1000px var(--smk-ink-50) inset !important;
    transition: background-color 99999s ease-in-out 0s !important;
}
.smk-shell__search input::-webkit-search-cancel-button { display: none; }

/* ----- Collapse arrow (now at the END of the row → right in LTR / left in RTL) ----- */
.smk-shell__collapse {
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: none; background: transparent;
    color: var(--smk-ink-500);
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--smk-dur-fast) var(--smk-ease),
                color var(--smk-dur-fast) var(--smk-ease);
}
.smk-shell__collapse:hover { background: var(--smk-ink-100); color: var(--smk-ink-900); }
.smk-shell__collapse i {
    transition: transform var(--smk-dur-base) var(--smk-ease);
    /* «  by default points left → that's "collapse to the left (= start)"
       which is correct when the arrow sits on the END (right) of the bar. */
}
[dir="rtl"] .smk-shell__collapse i { transform: rotate(180deg); }
body.smk-shell-nav-collapsed .smk-shell__collapse i { transform: rotate(180deg); }
[dir="rtl"] body.smk-shell-nav-collapsed .smk-shell__collapse i { transform: rotate(0deg); }

.smk-shell__nav-scroll {
    flex: 1 1 auto; overflow-y: auto;
    padding: .5rem .5rem 1rem;
}
.smk-shell__nav-scroll::-webkit-scrollbar { width: 6px; }
.smk-shell__nav-scroll::-webkit-scrollbar-thumb { background: var(--smk-ink-300); border-radius: 3px; }

.smk-shell__group { margin: .5rem 0 1rem; }
.smk-shell__group-label {
    padding: .25rem .65rem;
    font-size: .7rem; font-weight: 700;
    color: var(--smk-ink-500);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.smk-shell__item {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .65rem;
    margin: 1px 0;
    border-radius: 8px;
    color: var(--smk-ink-700);
    text-decoration: none !important;
    font-size: .9rem;
    transition: background var(--smk-dur-fast) var(--smk-ease),
                color var(--smk-dur-fast) var(--smk-ease);
}
.smk-shell__item i {
    width: 16px; text-align: center;
    color: var(--smk-ink-500); font-size: .85rem;
}
.smk-shell__item:hover {
    background: var(--smk-ink-100);
    color: var(--smk-ink-900);
}
.smk-shell__item:hover i { color: var(--smk-ink-700); }
.smk-shell__item.is-active {
    background: var(--smk-brand-soft);
    color: var(--smk-brand);
    font-weight: 600;
}
.smk-shell__item.is-active i { color: var(--smk-brand); }
[data-theme-style="dark"] .smk-shell__item.is-active { color: #93c5fd; }
[data-theme-style="dark"] .smk-shell__item.is-active i { color: #93c5fd; }

.smk-shell__nav-empty {
    text-align: center;
    color: var(--smk-ink-500);
    padding: 2rem .5rem;
    font-size: .85rem;
}

/* Main canvas */
.smk-shell__main {
    grid-area: main;
    display: flex; flex-direction: column;
    overflow: hidden;
    background: var(--smk-ink-50);
}

.smk-shell__topbar {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem 1.25rem;
    background: var(--smk-surface);
    border-bottom: 1px solid var(--smk-border);
    min-height: 56px;
    flex: 0 0 auto;
}
/* Top-bar bars/menu button: always visible. On desktop it toggles the
   sidebar between expanded/collapsed; on mobile it opens the drawer. */
.smk-shell__nav-toggle {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    border: none; background: transparent;
    color: var(--smk-ink-700);
    width: 36px; height: 36px;
    border-radius: 8px; cursor: pointer;
}
.smk-shell__nav-toggle:hover { background: var(--smk-ink-100); color: var(--smk-ink-900); }
.smk-shell__nav-toggle i { transition: transform var(--smk-dur-base) var(--smk-ease); }
/* Subtle visual cue: when the sidebar is collapsed, rotate the bars icon
   so the user gets feedback that clicking again will expand. */
body.smk-shell-nav-collapsed .smk-shell__nav-toggle i { transform: rotate(180deg); }
[dir="rtl"] body.smk-shell-nav-collapsed .smk-shell__nav-toggle i { transform: rotate(180deg); }
.smk-shell__crumb {
    flex: 1 1 auto;
    font-weight: 700;
    color: var(--smk-ink-900);
    font-size: 1rem;
    letter-spacing: -.005em;
}

.smk-shell__topbar-actions {
    display: flex; align-items: center; gap: .35rem;
}
.smk-shell__icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: transparent; border: none;
    color: var(--smk-ink-700);
    border-radius: 8px; cursor: pointer;
    transition: background var(--smk-dur-fast) var(--smk-ease);
}
.smk-shell__icon-btn:hover { background: var(--smk-ink-100); color: var(--smk-ink-900); }
.smk-shell__icon-btn i { font-size: 1rem; }

/* Primary "Create" CTA button — pill with gradient. */
.smk-shell__cta-btn {
    display: inline-flex; align-items: center;
    height: 36px;
    padding: 0 .85rem 0 .75rem;
    background: var(--smk-grad-cta);
    color: #fff !important;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(37,99,235,.28), 0 1px 2px rgba(15,23,42,.08);
    transition: transform var(--smk-dur-fast) var(--smk-ease),
                box-shadow var(--smk-dur-fast) var(--smk-ease);
}
.smk-shell__cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(6, 182, 212,.32), 0 2px 4px rgba(15,23,42,.08);
}
.smk-shell__cta-btn:active { transform: translateY(0); }
.smk-shell__cta-btn span { line-height: 1; }
@media (max-width: 575.98px) {
    .smk-shell__cta-btn span { display: none; }
    .smk-shell__cta-btn { padding: 0 .65rem; }
    .smk-shell__cta-btn i { margin: 0 !important; }
}
.smk-shell__cta-menu {
    min-width: 220px;
    border: 1px solid var(--smk-border);
    border-radius: 12px;
    box-shadow: var(--smk-shadow-3);
    padding: .35rem;
}
.smk-shell__cta-menu .dropdown-item {
    border-radius: 6px;
    padding: .5rem .65rem;
    font-size: .88rem;
}
.smk-shell__cta-menu .dropdown-item:hover { background: var(--smk-ink-100); }
.smk-shell__cta-menu .dropdown-divider { margin: .25rem 0; }

/* Notification dot on bell. */
.smk-shell__notif { position: relative; }
.smk-shell__notif-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px; height: 8px;
    background: var(--smk-danger);
    border: 2px solid var(--smk-surface);
    border-radius: 999px;
}
[dir="rtl"] .smk-shell__notif-dot { right: auto; left: 7px; }
#internal_notifications_content {
    border: 1px solid var(--smk-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--smk-shadow-3) !important;
}

.smk-shell__avatar {
    width: 34px; height: 34px;
    border-radius: 999px;
    background: var(--smk-grad-cta);
    color: #fff; font-weight: 700;
    border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(15,23,42,.18);
}
.smk-shell__avatar:focus { outline: 2px solid var(--smk-brand); outline-offset: 2px; }

.smk-shell__avatar-menu {
    min-width: 240px;
    border: 1px solid var(--smk-border);
    border-radius: 12px;
    box-shadow: var(--smk-shadow-3);
    padding: .5rem;
}
.smk-shell__avatar-head { padding: .5rem .75rem .75rem; }
.smk-shell__avatar-name {
    font-weight: 700;
    color: var(--smk-ink-900);
    font-size: .95rem;
    line-height: 1.2;
}
.smk-shell__avatar-email {
    font-size: .8rem;
    color: var(--smk-ink-500);
    line-height: 1.4;
    word-break: break-all;
}
.smk-shell__avatar-menu .dropdown-item {
    border-radius: 6px;
    padding: .45rem .65rem;
    font-size: .88rem;
}
.smk-shell__avatar-menu .dropdown-item:hover { background: var(--smk-ink-100); }
.smk-shell__avatar-menu .dropdown-divider { margin: .35rem 0; border-color: var(--smk-border-soft); }

.smk-shell__canvas {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 1.5rem 1.5rem 1.5rem;
}
/* Editor pages (survey editor / data / graphs / qr maker) — full-bleed:
   canvas flush against icon rail + topbar, no internal padding so the
   Creator's own chrome touches every edge. */
body.smk-route-editor .smk-shell__canvas {
    padding: 0 !important;
    overflow-x: hidden;
    box-sizing: border-box;
}
/* The landing/dashboard styling for `.tab-content` (border + radius +
   shadow + 1.5rem padding) bleeds into the editor as well — strip it on
   editor surfaces so the SurveyJS tabs hug their parent without a gap. */
body.smk-route-editor .tab-content {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
/* Any inner Creator wrapper that may have padding from theme defaults. */
body.smk-route-editor #surveyCreatorContainer,
body.smk-route-editor .svc-creator,
body.smk-route-editor .svc-creator__area {
    padding: 0 !important;
    margin: 0 !important;
}

/* The /data/{id} and /graphs/{id} views wrap their content in a Bootstrap
   .container (max-width + horizontal padding). On editor routes we want
   full-bleed content like /link/{id}, so neutralise .container's chrome
   and let the inner content (tables, charts) fill the canvas. */
body[data-smk-route="data"]   .smk-shell__canvas > .container,
body[data-smk-route="data"]   .smk-shell__canvas .container,
body[data-smk-route="graphs"] .smk-shell__canvas > .container,
body[data-smk-route="graphs"] .smk-shell__canvas .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Also kill the legacy heading container at the very top of each view
   (the in-page breadcrumb + URL + actions bar — same one we hid on the
   /link editor with `if(false)`). For /data and /graphs we can't easily
   wrap it in a PHP false-block from CSS, so hide it via the parent. */
body[data-smk-route="data"]   .smk-shell__canvas > .container > .row.mb-4:first-of-type,
body[data-smk-route="graphs"] .smk-shell__canvas > .container > .row.mb-4:first-of-type,
body[data-smk-route="data"]   .smk-shell__canvas .container > .row > .col .custom-breadcrumbs,
body[data-smk-route="graphs"] .smk-shell__canvas .container > .row > .col .custom-breadcrumbs {
    display: none !important;
}

/* Inner cards / tables on these pages get a slim top margin so they don't
   slam into the topbar; padding inside cards stays as-is. */
body[data-smk-route="data"]   .smk-shell__canvas > .container > :first-child,
body[data-smk-route="graphs"] .smk-shell__canvas > .container > :first-child {
    margin-top: 8px !important;
}

/* Make the SurveyJS Creator (or any direct editor child) cap at the
   canvas width — without `min-width: 0` flex children inherit `auto`
   which is the source of the horizontal overflow on narrow viewports. */
body.smk-route-editor .smk-shell__main,
body.smk-route-editor .smk-shell__canvas,
body.smk-route-editor .smk-shell__canvas > *,
body.smk-route-editor .svc-creator,
body.smk-route-editor .svc-creator__area,
body.smk-route-editor .svc-flex-row,
body.smk-route-editor .svc-flex-column,
body.smk-route-editor .svc-tab-designer,
body.smk-route-editor .svc-side-bar,
body.smk-route-editor .svc-page__content,
body.smk-route-editor .svc-question__content {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
body.smk-route-editor .svc-creator__content-wrapper,
body.smk-route-editor .svc-creator__banner,
body.smk-route-editor .svc-top-bar {
    max-width: 100%;
}

/* ============================================================
   SurveyJS Creator — fit-to-viewport overrides.
   The bundled CSS sets fixed pixel widths (toolbox 280px, side-bar 450px,
   AI helper 540px) that overflow narrow viewports. Force every layer to
   shrink to the canvas, and clip any rogue absolute overflow at the body. */

/* Hard stop at the body level — nothing on editor pages can push the page
   wider than the viewport. */
body.smk-route-editor {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* Side bar container — owns the right panel width. */
body.smk-route-editor .svc-side-bar__container,
body[data-smk-route] .svc-side-bar__container {
    width: 320px !important;
    min-width: 0 !important;
    max-width: 28vw !important;
    box-sizing: border-box !important;
}
body.smk-route-editor .svc-side-bar,
body.smk-route-editor .svc-side-bar__wrapper,
body.smk-route-editor .svc-side-bar__container-wrapper {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 1399.98px) {
    body.smk-route-editor .svc-side-bar__container { width: 280px !important; }
}
@media (max-width: 991.98px) {
    body.smk-route-editor .svc-side-bar__container { width: 240px !important; }
}

/* The Creator root + its layout area. */
body.smk-route-editor .svc-creator,
body.smk-route-editor .svc-creator__area,
body.smk-route-editor .svc-creator__content-holder,
body.smk-route-editor .svc-creator__content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Toolbox (left column) — let it shrink if needed. */
body.smk-route-editor .svc-toolbox {
    max-width: 280px !important;
    flex-shrink: 1 !important;
}

/* The AI Helper panel — defined inline in biolink.php with
   `min-width: 320px; max-width: 540px`. Cap it so it fits inside our
   320px side bar without overflowing. */
body.smk-route-editor #ai-helper-chat-panel > div {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Any direct grid/flex children of the Creator must respect their parent. */
body.smk-route-editor .svc-creator * {
    box-sizing: border-box;
}
@media (max-width: 1199.98px) {
    body.smk-route-editor .svc-side-bar,
    body.smk-route-editor .svc-creator__side-bar,
    body.smk-route-editor [data-sv-drop-target-side-bar] {
        width: 280px !important;
        flex: 0 0 280px !important;
    }
}
/* NOTE (2026-07-09): the old ≤991px rule here forced .svc-side-bar to
   position:absolute; right:0 with a white background and NO hide logic,
   which plastered an empty property-grid panel over the right of the
   canvas. The Creator now runs in its native mobile view below 992px
   (isMobileView in biolink.php), which renders the side-bar as a proper
   flyout (svc-side-bar--flyout, hidden until opened), so that override is
   removed — let SurveyJS own the side-bar positioning on small screens. */

/* Long content inside the side-bar must wrap, not push the panel wider. */
body.smk-route-editor .svc-side-bar *,
body.smk-route-editor .svc-creator__side-bar * {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
/* Inputs and selects inside the side-bar fill the available width. */
body.smk-route-editor .svc-side-bar .sd-input,
body.smk-route-editor .svc-side-bar .spg-input,
body.smk-route-editor .svc-side-bar input[type="text"],
body.smk-route-editor .svc-side-bar input[type="search"],
body.smk-route-editor .svc-side-bar textarea,
body.smk-route-editor .svc-side-bar select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* The page hosts an .smk-shell__topbar, an empty
   <div class="d-flex"> (now display:none), then the SurveyJS Creator.
   Force the editor itself to occupy the full remaining height so the
   internal scrollbars (not the page) handle long forms. */
body.smk-route-editor .smk-shell__canvas {
    display: flex;
    flex-direction: column;
}
body.smk-route-editor .smk-shell__canvas > * { flex: 0 0 auto; }
body.smk-route-editor .smk-shell__canvas > .svc-creator,
body.smk-route-editor .smk-shell__canvas > div:last-child {
    flex: 1 1 auto;
    min-height: 0;
}
/* Strip any margin-top legacy views add on the very first child so the
   uniform canvas padding governs the gap between topbar and content. */
.smk-shell__canvas > *:first-child { margin-top: 0 !important; }
.smk-shell__canvas .smk-dash-layout { margin-top: 0; }
.smk-shell__canvas .smk-dash-aside  { margin-top: 0; }
.smk-shell__canvas::-webkit-scrollbar { width: 8px; }
.smk-shell__canvas::-webkit-scrollbar-thumb { background: var(--smk-ink-300); border-radius: 4px; }

/* The legacy container.* inside views adds horizontal padding that fights
   the canvas padding. Neutralize when we are inside the shell. */
.smk-shell__canvas > .container,
.smk-shell__canvas > * > .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.smk-shell__footer {
    flex: 0 0 auto;
    padding: .55rem 1.25rem;
    background: var(--smk-surface);
    border-top: 1px solid var(--smk-border);
    display: flex; align-items: center; justify-content: space-between;
    font-size: .78rem;
}

.smk-shell__overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 998;
}
body.smk-shell-nav-open .smk-shell__overlay { display: block; }

/* Responsive */
@media (max-width: 991.98px) {
    .smk-shell {
        grid-template-columns: 76px 1fr;
        grid-template-areas: "rail main";
    }
    [dir="rtl"] .smk-shell {
        grid-template-columns: 1fr 76px;
        grid-template-areas: "main rail";
    }
    .smk-shell__nav {
        position: fixed;
        top: 0; left: 76px; bottom: 0;
        width: 264px;
        z-index: 999;
        transform: translateX(-110%);
        box-shadow: var(--smk-shadow-3);
    }
    [dir="rtl"] .smk-shell__nav {
        left: auto; right: 76px;
        transform: translateX(110%);
    }
    body.smk-shell-nav-open .smk-shell__nav {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* Hide the legacy account sub-tabs inside the shell — the sidebar already
   provides this navigation, so the duplicate pill row becomes clutter. */
.smk-shell__canvas .smk-account-header-menu { display: none !important; }

/* Polish the standard Bootstrap form .card on /account-* pages so they
   feel like first-class shell content. */
.smk-shell__canvas .card {
    border-radius: var(--smk-r-lg);
    border-color: var(--smk-border);
    box-shadow: var(--smk-shadow-1);
    transition: box-shadow var(--smk-dur-base) var(--smk-ease);
}
.smk-shell__canvas .card:hover { box-shadow: var(--smk-shadow-2); }
.smk-shell__canvas .card .card-body { padding: 1.5rem; }
.smk-shell__canvas h1.h4, .smk-shell__canvas h1.h3 {
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--smk-ink-900);
    margin-bottom: 1rem;
}
.smk-shell__canvas .form-group label {
    font-weight: 600;
    color: var(--smk-ink-700);
    margin-bottom: .35rem;
    font-size: .88rem;
}
.smk-shell__canvas .form-control {
    border-radius: 8px;
    border-color: var(--smk-border);
}
.smk-shell__canvas .form-control:focus {
    border-color: var(--smk-brand);
    box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}
.smk-shell__canvas .btn-primary {
    border-radius: 999px;
    padding: .55rem 1.25rem;
    font-weight: 600;
    background: var(--smk-grad-cta);
    border: none;
    box-shadow: 0 4px 14px rgba(37,99,235,.18);
}
.smk-shell__canvas .btn-primary:hover {
    background: var(--smk-grad-cta);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(6, 182, 212,.24);
}
.smk-shell__canvas .btn-danger {
    border-radius: 999px;
    padding: .55rem 1.25rem;
    font-weight: 600;
}

/* Plan cards on /account-plan get a hero treatment */
.smk-shell__canvas .plan-card,
.smk-shell__canvas .pricing-card {
    border-radius: var(--smk-r-lg);
    border: 1px solid var(--smk-border);
    background: var(--smk-surface);
    transition: transform var(--smk-dur-base) var(--smk-ease),
                box-shadow var(--smk-dur-base) var(--smk-ease);
}
.smk-shell__canvas .plan-card:hover,
.smk-shell__canvas .pricing-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--smk-shadow-2);
}

@media (max-width: 575.98px) {
    .smk-shell { grid-template-columns: 0 1fr; grid-template-areas: "rail main"; }
    [dir="rtl"] .smk-shell { grid-template-columns: 1fr 0; grid-template-areas: "main rail"; }
    .smk-shell__rail {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 999;
        width: 76px;
        transform: translateX(-110%);
        box-shadow: var(--smk-shadow-3);
    }
    [dir="rtl"] .smk-shell__rail { left: auto; right: 0; transform: translateX(110%); }
    body.smk-shell-nav-open .smk-shell__rail { transform: translateX(0); }
    body.smk-shell-nav-open .smk-shell__nav { left: 76px; }
    .smk-shell__canvas { padding: 1rem; }
    .smk-shell__topbar { padding: .5rem .75rem; }
    .smk-shell__crumb { font-size: .9rem; }
}

/* =========================================================================
   Survey card v2 — colored status strip + progress ring + counter + status
   row + actions. Inspired by the assignment-card pattern (Unit 7 Exercise…).
   Built on top of the existing .grid-card so legacy JS (.title-input,
   .copy-btn, .open-btn, .lang-badge, .toggle-switch input, .icon-btn, …)
   continues to find its hooks. Every feature of the old card is kept;
   only the layout and chrome change.
   ========================================================================= */

/* ===== Per-type color tokens — gives each survey TYPE a distinct accent so
   the grid feels varied even when all surveys share one status. The status
   is conveyed by the dot's pulse animation + the badge text. ===== */
.smk-survey-card {
    --smk-c: #2563eb; --smk-c-bg: #ecfeff;          /* survey link (default) */
    --smk-c-soft: #ecfeff; --smk-c-deep: #0e7490;
}
.smk-survey-card[data-type="link"]    { --smk-c:#2563eb; --smk-c-bg:#dbeafe; --smk-c-soft:#eff6ff; --smk-c-deep:#1d4ed8; }
.smk-survey-card[data-type="qr"]      { --smk-c:#2563eb; --smk-c-bg:#fed7aa; --smk-c-soft:#fff7ed; --smk-c-deep:#c2410c; }
.smk-survey-card[data-type="vcard"]   { --smk-c:#10b981; --smk-c-bg:#d1fae5; --smk-c-soft:#ecfdf5; --smk-c-deep:#047857; }
.smk-survey-card[data-type="event"]   { --smk-c:#ef4444; --smk-c-bg:#ffe4e6; --smk-c-soft:#fff1f2; --smk-c-deep:#be123c; }
.smk-survey-card[data-type="file"]    { --smk-c:#0891b2; --smk-c-bg:#cffafe; --smk-c-soft:#ecfeff; --smk-c-deep:#0e7490; }
.smk-survey-card[data-type="static"]  { --smk-c:#475569; --smk-c-bg:#e2e8f0; --smk-c-soft:#f1f5f9; --smk-c-deep:#334155; }

/* Status hints — currently only used for the dot animation + badge text. */
.smk-survey-card[data-status="paused"] { filter: saturate(.55); }

/* Equal-height cards in a row — the .colm wrapper from the legacy view uses
   inline-grid; we override it so the card itself fills the column and pushes
   its footer to the bottom regardless of body content (langs / no langs). */
.colm:has(> .smk-survey-card) {
    display: flex !important;
    align-self: stretch;
}
.smk-survey-card {
    position: relative;
    background: var(--smk-surface);
    border: 1px solid var(--smk-border);
    border-top: 4px solid var(--smk-c);
    border-radius: var(--smk-r-lg);
    padding: 0;
    margin-bottom: 1rem;
    box-shadow: var(--smk-shadow-1);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    transition: transform var(--smk-dur-base) var(--smk-ease),
                box-shadow var(--smk-dur-base) var(--smk-ease),
                border-color var(--smk-dur-base) var(--smk-ease);
}
/* The footer is the last child and should pin to the bottom — header & body
   take whatever space they need, then a flexible spacer eats the rest. */
.smk-survey-card__head { flex: 0 0 auto; }
.smk-survey-card__url  { flex: 0 0 auto; }
.smk-survey-card__foot { margin-top: auto !important; }
.smk-survey-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--smk-c) 12%, rgba(15,23,42,.08));
    border-color: color-mix(in srgb, var(--smk-c) 30%, var(--smk-border));
}
[data-theme-style="dark"] .smk-survey-card {
    background: #111827;
    border-bottom-color: #1f2a3a;
    border-left-color: #1f2a3a;
    border-right-color: #1f2a3a;
}

/* Header row: ring | body (no more right counter — questions/answers are
   shown as chips in the subtitle line instead). */
.smk-survey-card__head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1.25rem 1.25rem .75rem;
    align-items: start;
}

/* Progress / status ring (CSS conic-gradient — no JS or SVG needed). */
.smk-survey-card__ring {
    position: relative;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: conic-gradient(var(--smk-c) 100%, var(--smk-c-bg) 0);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    flex: 0 0 64px;
}
.smk-survey-card[data-status="paused"] .smk-survey-card__ring {
    background: conic-gradient(var(--smk-c) 25%, var(--smk-c-bg) 0);
}
.smk-survey-card[data-status="draft"]  .smk-survey-card__ring {
    background: conic-gradient(var(--smk-c) 50%, var(--smk-c-bg) 0);
}
.smk-survey-card[data-status="idle"]   .smk-survey-card__ring {
    background: conic-gradient(var(--smk-c) 75%, var(--smk-c-bg) 0);
}
.smk-survey-card__ring::before {
    content: "";
    position: absolute;
    inset: 5px;
    background: var(--smk-surface);
    border-radius: 50%;
}
[data-theme-style="dark"] .smk-survey-card__ring::before { background: #111827; }
.smk-survey-card__ring-num,
.smk-survey-card__ring-lbl {
    position: relative;
    z-index: 1;
    line-height: 1;
}
.smk-survey-card__ring-num {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--smk-ink-900);
    letter-spacing: -.02em;
}
.smk-survey-card__ring-lbl {
    font-size: .62rem;
    font-weight: 600;
    color: var(--smk-ink-500);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
[data-theme-style="dark"] .smk-survey-card__ring-num { color: #f1f5f9; }

/* Body column (title + subtitle + meta + chips) */
.smk-survey-card__body {
    min-width: 0; /* lets text-truncate work in a grid child */
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.smk-survey-card__title.title-input {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 2px 6px;
    margin: 0;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--smk-ink-900);
    letter-spacing: -.005em;
    width: 100%;
    transition: border-color var(--smk-dur-fast) var(--smk-ease),
                background var(--smk-dur-fast) var(--smk-ease);
}
.smk-survey-card__title.title-input:hover {
    border-color: var(--smk-border-soft);
}
.smk-survey-card__title.title-input:focus {
    outline: none;
    border-color: var(--smk-brand);
    background: var(--smk-ink-50);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
[data-theme-style="dark"] .smk-survey-card__title.title-input { color: #f1f5f9; }
.smk-survey-card__sub {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    font-size: .82rem;
    color: var(--smk-ink-500);
}
.smk-survey-card__type {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 2px 8px;
    background: var(--smk-c-soft);
    color: var(--smk-c-deep);
    border-radius: 999px;
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .01em;
    text-transform: none;
}
.smk-survey-card__type i { font-size: .68rem; }
/* Stats chips — Questions count + Answers count. Same shape, slightly
   different tints so they're distinguishable at a glance. */
.smk-survey-card__chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: 1px 8px;
    background: var(--smk-ink-100);
    color: var(--smk-ink-700);
    border-radius: 999px;
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .02em;
}
.smk-survey-card__chip i { font-size: .62rem; color: var(--smk-ink-500); }
.smk-survey-card__chip--a {
    background: var(--smk-c-soft);
    color: var(--smk-c-deep);
}
.smk-survey-card__chip--a i { color: var(--smk-c); }
[data-theme-style="dark"] .smk-survey-card__type { background: rgba(255,255,255,.06); }
[data-theme-style="dark"] .smk-survey-card__chip { background: #1f2a3a; color: #cbd5e1; }
[data-theme-style="dark"] .smk-survey-card__chip i { color: #94a3b8; }
.smk-survey-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .78rem;
    color: var(--smk-ink-500);
    margin-top: .15rem;
}
.smk-survey-card__meta i { margin-right: .25rem; }
[dir="rtl"] .smk-survey-card__meta i { margin-right: 0; margin-left: .25rem; }

.smk-survey-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .35rem;
}
.smk-survey-card__chips .lang-badge {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--smk-border);
    background: var(--smk-surface);
    color: var(--smk-ink-500);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
}
.smk-survey-card__chips .lang-badge.active {
    background: var(--smk-brand-soft);
    border-color: var(--smk-brand);
    color: var(--smk-brand);
}

/* Right counter (views) */
.smk-survey-card__counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .55rem .75rem;
    background: var(--smk-ink-50);
    border: 1px solid var(--smk-border-soft);
    border-radius: 10px;
    min-width: 64px;
    color: var(--smk-ink-500);
}
[data-theme-style="dark"] .smk-survey-card__counter {
    background: #0b1220;
    border-color: #1f2a3a;
}
.smk-survey-card__counter i {
    font-size: 1rem;
    margin-bottom: 2px;
    color: var(--smk-ink-500);
}
.smk-survey-card__counter-num {
    font-weight: 800;
    font-size: .95rem;
    color: var(--smk-ink-900);
    line-height: 1;
}
[data-theme-style="dark"] .smk-survey-card__counter-num { color: #f1f5f9; }
.smk-survey-card__counter-lbl {
    font-size: .6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 2px;
}

/* Quick-share URL row (compact strip between header and footer). */
.smk-survey-card__url.url-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem .35rem 1.25rem;
    margin: 0 .5rem;
    background: var(--smk-ink-50);
    border: 1px solid var(--smk-border-soft);
    border-radius: 8px;
}
[data-theme-style="dark"] .smk-survey-card__url.url-row {
    background: #0b1220;
    border-color: #1f2a3a;
}
.smk-survey-card__url .url-row__icon { flex: 0 0 auto; }
.smk-survey-card__url input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    padding: .25rem 0;
    font-size: .78rem;
    color: var(--smk-ink-700);
    cursor: text;
    text-overflow: ellipsis;
}
[data-theme-style="dark"] .smk-survey-card__url input[type="text"] { color: #cbd5e1; }
.smk-survey-card__url input[type="text"]:focus { outline: none; }
.smk-survey-card__url .copy-btn,
.smk-survey-card__url .open-btn {
    border: none;
    background: transparent;
    width: 28px; height: 28px;
    border-radius: 6px;
    color: var(--smk-ink-500);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--smk-dur-fast) var(--smk-ease), color var(--smk-dur-fast) var(--smk-ease);
}
.smk-survey-card__url .copy-btn:hover,
.smk-survey-card__url .open-btn:hover {
    background: var(--smk-brand-soft);
    color: var(--smk-brand);
}
/* Hide the legacy inline QR thumbnail but keep it in DOM so the QR JS hook
   (data-qr) still runs and the per-row share modal has a source. */
.smk-survey-card .qr-img.sr-only-ish {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    pointer-events: none;
}

/* Footer: status (with toggle) | actions — flex-wraps on narrow widths so
   long status labels never overlap the Share button. */
.smk-survey-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    flex-wrap: wrap;
    padding: .65rem 1.25rem .85rem;
    margin-top: .5rem;
    border-top: 1px solid var(--smk-border-soft);
    background: linear-gradient(180deg, transparent 0%, var(--smk-ink-50) 100%);
}
[data-theme-style="dark"] .smk-survey-card__foot {
    background: linear-gradient(180deg, transparent 0%, #0b1220 100%);
    border-top-color: #1f2a3a;
}
.smk-survey-card__status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}
.smk-survey-card__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--smk-c);
    box-shadow: 0 0 0 3px var(--smk-c-bg);
    flex: 0 0 auto;
}
.smk-survey-card[data-status="active"] .smk-survey-card__dot {
    animation: smk-pulse 1.8s var(--smk-ease) infinite;
}
@keyframes smk-pulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--smk-c-bg); }
    50%      { box-shadow: 0 0 0 6px var(--smk-c-bg); }
}
.smk-survey-card__toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    cursor: pointer;
    font-size: .8rem;
    color: var(--smk-ink-700);
    font-weight: 600;
}
.smk-survey-card__toggle input[type="checkbox"] {
    width: 30px; height: 16px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--smk-ink-300);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background var(--smk-dur-fast) var(--smk-ease);
    margin: 0;
}
.smk-survey-card__toggle input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 12px; height: 12px;
    background: #fff;
    border-radius: 50%;
    transition: left var(--smk-dur-fast) var(--smk-ease);
}
.smk-survey-card__toggle input[type="checkbox"]:checked { background: var(--smk-c); }
.smk-survey-card__toggle input[type="checkbox"]:checked::after { left: 16px; }
[dir="rtl"] .smk-survey-card__toggle input[type="checkbox"]::after { left: auto; right: 2px; }
[dir="rtl"] .smk-survey-card__toggle input[type="checkbox"]:checked::after { right: 16px; }
.smk-survey-card__status-label {
    color: var(--smk-ink-700);
}
[data-theme-style="dark"] .smk-survey-card__status-label,
[data-theme-style="dark"] .smk-survey-card__toggle { color: #cbd5e1; }

.smk-survey-card__actions.card-actions {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
}
.smk-btn-cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    border: none;
    background: var(--smk-c);
    color: #fff !important;
    font-weight: 600;
    font-size: .82rem;
    cursor: pointer;
    transition: transform var(--smk-dur-fast) var(--smk-ease),
                box-shadow var(--smk-dur-fast) var(--smk-ease);
    text-decoration: none !important;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--smk-c) 25%, transparent);
}
.smk-btn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--smk-c) 30%, transparent);
    color: #fff !important;
}
.smk-btn-icon {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--smk-ink-500);
    cursor: pointer;
    text-decoration: none !important;
    transition: background var(--smk-dur-fast) var(--smk-ease),
                color var(--smk-dur-fast) var(--smk-ease);
}
.smk-btn-icon:hover,
.smk-btn-icon:focus {
    background: var(--smk-ink-100);
    color: var(--smk-ink-900);
    text-decoration: none;
}
.smk-survey-card__actions .dropdown-menu {
    border: 1px solid var(--smk-border);
    border-radius: 10px;
    box-shadow: var(--smk-shadow-3);
    padding: .35rem;
}
.smk-survey-card__actions .dropdown-item {
    border-radius: 6px;
    padding: .45rem .65rem;
    font-size: .85rem;
}
.smk-survey-card__actions .dropdown-item:hover {
    background: var(--smk-ink-100);
}

/* Responsive: stack ring + counter horizontally, collapse meta. */
@media (max-width: 575.98px) {
    .smk-survey-card__head {
        grid-template-columns: auto 1fr;
        gap: .75rem;
        padding: 1rem 1rem .65rem;
    }
    .smk-survey-card__foot { padding: .65rem 1rem .75rem; flex-wrap: wrap; }
    .smk-btn-cta span { display: none; }
    .smk-btn-cta { padding: .4rem .55rem; }
}

/* =========================================================================
   Insights pages — Analytics + Responses (aggregated, list-driven).
   ========================================================================= */
.smk-insights-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.smk-insights-header__title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--smk-ink-900);
    margin: 0 0 .25rem;
}
.smk-insights-header__sub {
    color: var(--smk-ink-500);
    margin: 0;
    font-size: .9rem;
}

.smk-insights-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 991.98px) { .smk-insights-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .smk-insights-tiles { grid-template-columns: 1fr; } }
.smk-insights-tile {
    background: var(--smk-surface);
    border: 1px solid var(--smk-border);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    box-shadow: var(--smk-shadow-1);
}
[data-theme-style="dark"] .smk-insights-tile { background: #111827; border-color: #1f2a3a; }
.smk-insights-tile__lbl {
    font-size: .7rem;
    font-weight: 700;
    color: var(--smk-ink-500);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .35rem;
}
.smk-insights-tile__val {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--smk-ink-900);
    letter-spacing: -.02em;
    line-height: 1.1;
}
[data-theme-style="dark"] .smk-insights-tile__val { color: #f1f5f9; }
.smk-insights-tile__sub {
    font-size: .78rem;
    color: var(--smk-ink-500);
    margin-top: .35rem;
}

.smk-insights-list {
    background: var(--smk-surface);
    border: 1px solid var(--smk-border);
    border-radius: 14px;
    box-shadow: var(--smk-shadow-1);
    overflow: hidden;
}
[data-theme-style="dark"] .smk-insights-list { background: #111827; border-color: #1f2a3a; }
.smk-insights-list__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--smk-border-soft);
}
.smk-insights-list__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--smk-ink-900);
    margin: 0;
}
[data-theme-style="dark"] .smk-insights-list__title { color: #f1f5f9; }
.smk-insights-list__hint {
    font-size: .78rem;
    color: var(--smk-ink-500);
}

.smk-insights-table-wrap { overflow-x: auto; }
.smk-insights-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.smk-insights-table thead th {
    text-align: left;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--smk-ink-500);
    background: var(--smk-ink-50);
    padding: .65rem 1.25rem;
    border-bottom: 1px solid var(--smk-border-soft);
    white-space: nowrap;
}
[data-theme-style="dark"] .smk-insights-table thead th { background: #0b1220; color: #94a3b8; }
.smk-insights-table tbody td {
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--smk-border-soft);
    vertical-align: middle;
    font-size: .9rem;
    color: var(--smk-ink-900);
}
[data-theme-style="dark"] .smk-insights-table tbody td { color: #cbd5e1; border-bottom-color: #1f2a3a; }
.smk-insights-table tbody tr:last-child td { border-bottom: 0; }

.smk-insights-row { cursor: pointer; transition: background var(--smk-dur-fast) var(--smk-ease); }
.smk-insights-row:hover { background: var(--smk-ink-50); }
[data-theme-style="dark"] .smk-insights-row:hover { background: #0b1220; }
.smk-insights-row.is-muted td { color: var(--smk-ink-500); }
.smk-insights-row__title { font-weight: 600; color: var(--smk-ink-900); }
[data-theme-style="dark"] .smk-insights-row__title { color: #f1f5f9; }
.smk-insights-row__url   { margin-top: 1px; }
.smk-insights-row__cta {
    border: 1px solid var(--smk-border);
    border-radius: 8px;
    font-weight: 600;
    color: var(--smk-ink-700);
    background: var(--smk-surface);
    padding: .35rem .75rem;
}
.smk-insights-row__cta:hover {
    background: var(--smk-brand-soft);
    color: var(--smk-brand);
    border-color: var(--smk-brand);
}

.smk-insights-row__chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: 2px 8px;
    background: #eff6ff; color: #0e7490;
    border-radius: 999px;
    font-weight: 600; font-size: .72rem;
}
.smk-insights-row__chip[data-type="link"]   { background:#eff6ff; color:#1d4ed8; }
.smk-insights-row__chip[data-type="qr"]     { background:#fff7ed; color:#c2410c; }
.smk-insights-row__chip[data-type="vcard"]  { background:#ecfdf5; color:#047857; }
.smk-insights-row__chip[data-type="event"]  { background:#fff1f2; color:#be123c; }
.smk-insights-row__chip[data-type="file"]   { background:#ecfeff; color:#0e7490; }
.smk-insights-row__chip[data-type="static"] { background:#f1f5f9; color:#334155; }
.smk-insights-row__chip i { font-size: .65rem; }

/* =========================================================================
   Survey "box" / tray — Google Search Console-style section card.
   Outer: soft tinted background, generous padding, large radius, no border.
   Inside: header (title + actions) + survey cards on white.
   ========================================================================= */
/* === Secondary "supporting" tray around the survey grid ===
   Intentionally softer / less saturated than the analytics tray above so
   the visual hierarchy is: analytics (primary) → surveys (secondary). */
.smk-survey-box {
    background: linear-gradient(180deg, #f3f5f9 0%, #f5f7fa 100%);
    border: 1px solid #ebeef3;
    border-radius: 22px;
    padding: 1.5rem 1.5rem 1.25rem;
    margin-top: .5rem;
    box-shadow: none;
}
[data-theme-style="dark"] .smk-survey-box {
    background: linear-gradient(180deg, #0e1422 0%, #0c1320 100%);
    border-color: #182234;
}

.smk-survey-box__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 0 1.25rem 0;
    padding: 0 .25rem;
}
.smk-survey-box__title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}
.smk-survey-box__h {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--smk-ink-900);
    letter-spacing: -.015em;
    line-height: 1.2;
}
[data-theme-style="dark"] .smk-survey-box__h { color: #f1f5f9; }
.smk-survey-box__hint {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 22px; height: 22px;
    color: var(--smk-ink-500);
    cursor: help;
    border-radius: 50%;
}
.smk-survey-box__hint:hover { background: rgba(15,23,42,.06); color: var(--smk-ink-700); }

/* Survey cards inside the tray: pure white, no border, soft shadow — they
   pop against the tinted tray instead of blending in. */
.smk-survey-box .smk-survey-card {
    background: #ffffff;
    border-top-width: 4px;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.03);
}
.smk-survey-box .smk-survey-card:hover {
    box-shadow: 0 12px 28px color-mix(in srgb, var(--smk-c) 14%, rgba(15,23,42,.10));
    border-color: transparent;
}
[data-theme-style="dark"] .smk-survey-box .smk-survey-card {
    background: #131a2a;
}

/* Footer inside cards loses its gradient on tinted tray — replace with
   a flat divider line so the visual hierarchy reads cleanly. */
.smk-survey-box .smk-survey-card__foot {
    background: transparent !important;
}

.smk-survey-box .row { margin-left: 0; margin-right: 0; }

/* Pagination row under the box gets a bit more breathing room. */
.smk-survey-box + .mt-3 { margin-top: 1.25rem !important; padding: 0 .25rem; }

/* Toolbar slot inside the tray header — the relocation JS drops the
   filter / view-toggle / bulk-enable buttons here. */
.smk-survey-box__header .smk-list-toolbar__actions { gap: .35rem; }

/* The empty legacy toolbar in the page top is hidden (handled above by
   the inline `display:none` on its wrapper). Both the empty `.smk-list-
   toolbar` and the legacy in-list `.smk-view-toolbar` slot stay hidden. */
.smk-list-toolbar--empty { display: none !important; }
.smk-view-toolbar--legacy { display: none !important; }

@media (max-width: 575.98px) {
    .smk-survey-box { padding: 1rem; border-radius: 16px; }
    .smk-survey-box__header { flex-wrap: wrap; gap: .5rem; margin-bottom: .85rem; }
    .smk-survey-box__h { font-size: 1.1rem; }
}

/* =========================================================================
   List toolbar — filter + grid/list toggle inline on the same line
   ========================================================================= */
.smk-list-toolbar__actions {
    gap: .35rem;
}
.smk-list-toolbar__actions .btn-group .smk-view-btn,
.smk-list-toolbar__actions .filters-button,
.smk-list-toolbar__actions #bulk_enable {
    width: 38px; height: 38px;
    border-radius: 8px;
    border: 1px solid var(--smk-border);
    background: var(--smk-surface);
    color: var(--smk-ink-700);
    padding: 0;
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: background var(--smk-dur-fast) var(--smk-ease),
                color var(--smk-dur-fast) var(--smk-ease),
                border-color var(--smk-dur-fast) var(--smk-ease);
}
.smk-list-toolbar__actions .btn-group {
    border-radius: 8px;
    overflow: hidden;
}
.smk-list-toolbar__actions .btn-group .smk-view-btn {
    border-radius: 0;
    border-right-width: 0;
}
.smk-list-toolbar__actions .btn-group .smk-view-btn:first-child {
    border-top-left-radius: 8px; border-bottom-left-radius: 8px;
}
.smk-list-toolbar__actions .btn-group .smk-view-btn:last-child {
    border-top-right-radius: 8px; border-bottom-right-radius: 8px;
    border-right-width: 1px;
}
.smk-list-toolbar__actions .smk-view-btn:hover,
.smk-list-toolbar__actions .filters-button:hover,
.smk-list-toolbar__actions #bulk_enable:hover {
    background: var(--smk-ink-100);
    color: var(--smk-ink-900);
}
.smk-list-toolbar__actions .smk-view-btn.is-active {
    background: var(--smk-brand-soft);
    color: var(--smk-brand);
    border-color: var(--smk-brand);
    z-index: 1;
}
.smk-list-toolbar__actions .filters-button.btn-dark {
    background: var(--smk-brand);
    color: #fff;
    border-color: var(--smk-brand);
}

/* The grid/list toggle that used to live inside the survey list area is now
   redundant — hide it (but keep .smk-view-toolbar so the "10 surveys" count
   still renders). */
.smk-dash-main > .smk-view-toolbar { justify-content: flex-start; }
.smk-dash-main > .smk-view-toolbar > .btn-group[aria-label="View mode"] { display: none; }

/* =========================================================================
   Survey card v3 — additional polish:
   • 4 cards per row on wide screens (was 3)
   • Disabled language placeholders so every card matches height
   • Single dropdown ("⋮ More actions") in the footer with proper z-index
   • QR modal styling
   ========================================================================= */

/* ----- 4 cards per row -----
   The legacy .colm uses flex: 0 0 375px (fixed pixel width) → variable
   number of columns. We override to use a percentage-based width capped at
   4 columns on wide screens. Cards still share equal-height behavior. */
.smk-dash-main .row:has(> .colm > .smk-survey-card),
.smk-dash-main .row.row-cards {
    margin-left: -8px;
    margin-right: -8px;
}
.smk-dash-main .colm:has(> .smk-survey-card) {
    flex: 0 0 calc(25% - 16px) !important;
    max-width: calc(25% - 16px) !important;
    margin: 8px !important;
}
@media (max-width: 1399.98px) {
    .smk-dash-main .colm:has(> .smk-survey-card) {
        flex: 0 0 calc(33.3333% - 16px) !important;
        max-width: calc(33.3333% - 16px) !important;
    }
}
@media (max-width: 991.98px) {
    .smk-dash-main .colm:has(> .smk-survey-card) {
        flex: 0 0 calc(50% - 16px) !important;
        max-width: calc(50% - 16px) !important;
    }
}
@media (max-width: 575.98px) {
    .smk-dash-main .colm:has(> .smk-survey-card) {
        flex: 0 0 calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
    }
}

/* ----- Language placeholders for cards without multi-language -----
   Renders ghost pills that look "available but disabled" so single-language
   cards reserve the same height as multi-language cards. */
.smk-lang-placeholder {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px dashed var(--smk-border);
    background: var(--smk-ink-50);
    color: var(--smk-ink-300);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.5;
    cursor: default;
    user-select: none;
}
.smk-lang-placeholder--ghost {
    opacity: .55;
    border-style: dotted;
}
[data-theme-style="dark"] .smk-lang-placeholder {
    background: #0b1220;
    border-color: #1f2a3a;
    color: #475569;
}

/* ----- Unified single dropdown menu (the "⋮ More actions" button) -----
   Footer actions are now just [ Share ] + [ ⋮ ]. The previous inline
   Edit/Stats/Data icon buttons are gone — everything lives in the menu. */
.smk-card-menu {
    position: relative;
}
.smk-card-menu__toggle {
    width: 36px; height: 36px;
    border-radius: 8px;
    color: var(--smk-ink-500);
}
.smk-card-menu__toggle:hover,
.smk-card-menu__toggle[aria-expanded="true"] {
    background: var(--smk-ink-100);
    color: var(--smk-ink-900);
}
.smk-card-menu__toggle::after { display: none !important; }   /* kill the Bootstrap caret */

.smk-card-menu__menu {
    z-index: 1080;                        /* float above sibling cards */
    border: 1px solid var(--smk-border);
    border-radius: 12px;
    box-shadow: var(--smk-shadow-3);
    padding: .35rem;
    min-width: 200px;
}
.smk-card-menu__menu .dropdown-item {
    border-radius: 6px;
    padding: .5rem .65rem;
    font-size: .87rem;
    display: flex;
    align-items: center;
    gap: .25rem;
}
.smk-card-menu__menu .dropdown-item:hover { background: var(--smk-ink-100); }
.smk-card-menu__menu .dropdown-item.text-danger:hover { background: #fef2f2; color: #b91c1c !important; }
.smk-card-menu__menu .dropdown-divider { margin: .25rem 0; border-color: var(--smk-border-soft); }
[data-theme-style="dark"] .smk-card-menu__menu .dropdown-item:hover { background: #1e293b; }

/* When an open dropdown sits inside a card, raise the card so its menu
   never appears behind the next row of cards. */
.smk-survey-card:has(.smk-card-menu__toggle[aria-expanded="true"]) {
    z-index: 50;
}

/* =========================================================================
   QR code editor modal — full inline customization (no iframe).
   ========================================================================= */
.smk-qr-modal .modal-dialog { max-width: 760px; }
.smk-qr-modal__content {
    border: 1px solid var(--smk-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--smk-shadow-3);
}
.smk-qr-modal__header {
    border-bottom: 1px solid var(--smk-border-soft);
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--smk-ink-50) 100%);
}
[data-theme-style="dark"] .smk-qr-modal__header { background: #111827; }
.smk-qr-modal__body { padding: 1.25rem; }

.smk-qr-modal__preview-wrap {
    background: var(--smk-ink-50);
    border-radius: 14px;
    padding: 1rem;
    display: flex; align-items: center; justify-content: center;
    min-height: 320px;
}
[data-theme-style="dark"] .smk-qr-modal__preview-wrap { background: #0b1220; }

.smk-qr-modal__canvas {
    display: inline-block;
    line-height: 0;
    transition: background var(--smk-dur-base) var(--smk-ease);
}
.smk-qr-modal__canvas canvas,
.smk-qr-modal__canvas img,
.smk-qr-modal__canvas svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }

.smk-qr-modal__dl-row {
    display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap;
}

.smk-qr-modal__tabs {
    border-bottom: 1px solid var(--smk-border-soft);
}
.smk-qr-modal__tabs .nav-link {
    border: none;
    color: var(--smk-ink-500);
    font-weight: 600;
    padding: .5rem .9rem;
    border-radius: 8px 8px 0 0;
    font-size: .85rem;
}
.smk-qr-modal__tabs .nav-link:hover { color: var(--smk-ink-900); background: var(--smk-ink-100); }
.smk-qr-modal__tabs .nav-link.active {
    color: var(--smk-brand);
    background: transparent;
    border-bottom: 2px solid var(--smk-brand);
}
.smk-qr-modal__tab-content {
    padding-top: 1rem;
}

.smk-qr-modal__color {
    height: 38px;
    padding: 2px;
    border-radius: 8px;
    cursor: pointer;
}

.smk-qr-modal__swatches {
    display: flex; align-items: center; flex-wrap: wrap; gap: .35rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--smk-border-soft);
}
.smk-qr-modal__swatch {
    width: 24px; height: 24px;
    border-radius: 6px;
    border: 1px solid var(--smk-border);
    background:
        linear-gradient(135deg, var(--a) 0%, var(--a) 50%, var(--b) 50%, var(--b) 100%);
    cursor: pointer;
    transition: transform var(--smk-dur-fast) var(--smk-ease);
}
.smk-qr-modal__swatch:hover { transform: scale(1.15); }
.smk-qr-modal__swatch:focus { outline: 2px solid var(--smk-brand); outline-offset: 2px; }

/* Range slider polish inside the QR modal. */
.smk-qr-modal__body .form-control-range {
    width: 100%;
    accent-color: var(--smk-brand);
}

@media (max-width: 575.98px) {
    .smk-qr-modal .modal-dialog { margin: .5rem; max-width: calc(100vw - 1rem); }
    .smk-qr-modal__preview-wrap { min-height: 240px; }
    .smk-qr-modal__form-col { margin-top: 1rem; }
}

/* ============================================================
   Analytics / Responses page — 4-panel top sections
   ------------------------------------------------------------
   Distinct grid for /analytics (visitor focus) and /responses
   (submission focus). Both build on the existing .smk-panel base.
   ============================================================ */

.smk-analytics-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 420px;
    margin: 0 0 24px 0;
}

/* All 4 panels are equal-width quarter columns and capped to row height —
   no panel can blow up the row by being naturally tall. Inner lists scroll
   inside the panel instead (see scrollable-content rules below). */
.smk-analytics-grid > .smk-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.smk-analytics-grid > .smk-panel > .smk-panel__head { flex-shrink: 0; }
/* Anything that isn't the header becomes the scrollable region. */
.smk-analytics-grid .smk-feed,
.smk-analytics-grid .smk-leaderboard,
.smk-analytics-grid .smk-ref-list,
.smk-analytics-grid .smk-mini-list,
.smk-analytics-grid .smk-lang-list,
.smk-analytics-grid .smk-country-list--inline,
.smk-analytics-grid .smk-split-grid,
.smk-analytics-grid .smk-heatmap-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
/* Heatmap is horizontally-scrolling specifically. */
.smk-analytics-grid .smk-heatmap-wrap { overflow-x: auto; }
/* Chart panels: canvas wrap fills the remaining height without scrolling. */
.smk-analytics-grid .smk-chart-wrap {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}
.smk-analytics-grid .smk-chart-wrap > canvas { width: 100% !important; height: 100% !important; }

/* Responsive collapse: 2-up on tablets, 1-up on phones. */
@media (max-width: 1399.98px) { .smk-analytics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px)  { .smk-analytics-grid { grid-template-columns: 1fr; } }

/* --- World map --- */
.smk-world-map {
    width: 100%;
    min-height: 180px;
    height: 210px;
    margin-top: 4px;
}
.smk-world-map .svgMap-map-wrapper { background: transparent; }
.smk-world-map .svgMap-tooltip { z-index: 9999; }

.smk-map-legend { display: inline-flex; align-items: center; gap: 8px; color: var(--smk-text-muted, #64748b); font-size: 12px; }
.smk-map-legend__bar {
    display: inline-block;
    width: 80px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ecfeff, #67e8f9, #06b6d4, #155e75);
}

/* Top-countries strip below the map (now stacked, one per row). */
.smk-country-list--inline {
    list-style: none;
    margin: 12px 0 0 0;
    padding: 10px 0 0 0;
    border-top: 1px solid var(--smk-border, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.smk-country-list--inline li {
    display: grid;
    grid-template-columns: 20px 28px 1fr 40px;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

/* --- Referrers list --- */
.smk-ref-list {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.smk-ref-list li {
    display: grid;
    grid-template-columns: 24px minmax(60px, 1.2fr) minmax(40px, 1fr) auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    min-width: 0;
}
.smk-ref-list li > * { min-width: 0; }
.smk-ref-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.smk-ref-name { color: var(--smk-text, #0f172a); font-weight: 500; }
.smk-ref-bar { background: var(--smk-surface-2, #f1f5f9); border-radius: 999px; height: 6px; overflow: hidden; }
.smk-ref-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; }
.smk-ref-count { text-align: right; font-weight: 600; color: var(--smk-text, #0f172a); }

/* --- OS / Browsers split — stacked vertically in narrow quarter-column. --- */
.smk-split-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
}
.smk-split__title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--smk-text-muted, #64748b);
    font-weight: 600;
    margin-bottom: 12px;
}
.smk-mini-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.smk-mini-list li {
    display: grid;
    grid-template-columns: minmax(60px, 1.2fr) minmax(40px, 1fr) auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    min-width: 0;
}
.smk-mini-list li > * { min-width: 0; }
.smk-mini-list__name { color: var(--smk-text, #0f172a); font-weight: 500; }
.smk-mini-list__bar { background: var(--smk-surface-2, #f1f5f9); border-radius: 999px; height: 6px; overflow: hidden; }
.smk-mini-list__bar > span { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; }
.smk-mini-list__count { text-align: right; font-weight: 600; color: var(--smk-text, #0f172a); }

/* --- Languages list --- */
.smk-lang-list {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.smk-lang-list li {
    display: grid;
    grid-template-columns: 36px minmax(40px, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    min-width: 0;
}
.smk-lang-list li > * { min-width: 0; }
.smk-lang-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    background: var(--smk-surface-2, #f1f5f9);
    color: var(--smk-text, #0f172a);
    border-radius: 6px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .05em;
}
.smk-lang-bar { background: var(--smk-surface-2, #f1f5f9); border-radius: 999px; height: 6px; overflow: hidden; }
.smk-lang-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #06b6d4, #2563eb); border-radius: 999px; transition: width .3s ease; }
.smk-lang-pct { text-align: right; }
.smk-lang-count { text-align: right; font-weight: 600; color: var(--smk-text, #0f172a); }

/* --- Top surveys leaderboard (Responses) --- */
.smk-leaderboard {
    list-style: none;
    counter-reset: smk-rank;
    margin: 8px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.smk-leaderboard li {
    display: grid;
    grid-template-columns: 32px 1fr 60px;
    align-items: center;
    gap: 12px;
}
.smk-leaderboard__rank {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--smk-surface-2, #f1f5f9);
    color: var(--smk-text-muted, #64748b);
    font-weight: 700;
    font-size: 12px;
}
.smk-leaderboard li:nth-child(1) .smk-leaderboard__rank { background: #fef3c7; color: #b45309; }
.smk-leaderboard li:nth-child(2) .smk-leaderboard__rank { background: #e5e7eb; color: #4b5563; }
.smk-leaderboard li:nth-child(3) .smk-leaderboard__rank { background: #fde68a; color: #92400e; }
.smk-leaderboard__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.smk-leaderboard__title {
    color: var(--smk-text, #0f172a);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: block;
    max-width: 100%;
}
.smk-leaderboard__title:hover { color: var(--smk-brand, #2563eb); text-decoration: none; }
.smk-leaderboard__bar { background: var(--smk-surface-2, #f1f5f9); border-radius: 999px; height: 6px; overflow: hidden; }
.smk-leaderboard__bar > span { display: block; height: 100%; background: linear-gradient(90deg, #06b6d4, #06b6d4); border-radius: 999px; transition: width .3s ease; }
.smk-leaderboard__count { text-align: right; font-weight: 700; color: var(--smk-text, #0f172a); }

/* --- Submission-time heatmap (Responses) --- */
.smk-heatmap-wrap { overflow-x: auto; margin-top: 12px; padding-bottom: 4px; }
.smk-heatmap { display: inline-grid; grid-template-columns: 32px repeat(24, minmax(14px, 1fr)); gap: 2px; min-width: 100%; }
.smk-heatmap__head, .smk-heatmap__row { display: contents; }
.smk-heatmap__hr {
    text-align: center;
    font-size: 10px;
    color: var(--smk-text-muted, #94a3b8);
    line-height: 16px;
}
.smk-heatmap__day {
    text-align: right;
    padding-right: 8px;
    font-size: 11px;
    color: var(--smk-text-muted, #64748b);
    font-weight: 600;
    align-self: center;
}
.smk-heatmap__cell {
    height: 18px;
    border-radius: 2px;
    display: block;
    cursor: default;
    transition: transform .15s ease;
}
.smk-heatmap__cell:hover { transform: scale(1.25); outline: 2px solid #fff; outline-offset: -1px; }

.smk-heat-legend { display: inline-flex; align-items: center; gap: 4px; color: var(--smk-text-muted, #64748b); font-size: 12px; }
.smk-heat-cell { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }

/* --- Latest-responses feed: ensure timestamp aligns right --- */
.smk-analytics-grid--resp .smk-feed li { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; }
.smk-feed-time { white-space: nowrap; }

/* Smaller empty-state variant for split panels. */
.smk-empty--sm { padding: 16px 0; font-size: 12px; }

/* Dark-mode overrides — keep tones consistent with the rest of the shell. */
body[data-theme-style="dark"] .smk-ref-bar,
body[data-theme-style="dark"] .smk-mini-list__bar,
body[data-theme-style="dark"] .smk-lang-bar,
body[data-theme-style="dark"] .smk-leaderboard__bar { background: rgba(255,255,255,.06); }
body[data-theme-style="dark"] .smk-lang-chip,
body[data-theme-style="dark"] .smk-leaderboard__rank { background: rgba(255,255,255,.08); color: #cbd5e1; }
body[data-theme-style="dark"] .smk-heatmap__cell[style*="#f1f5f9"] { background: rgba(255,255,255,.04) !important; }
body[data-theme-style="dark"] .smk-country-list--inline { border-top-color: rgba(255,255,255,.08); }

/* ============================================================
   Files page — Windows-explorer-style icon grid + context menu
   ============================================================ */

.smk-files-page { padding: 0; }

/* --- Header --- */
.smk-files-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 8px 0 20px 0;
    flex-wrap: wrap;
}
.smk-files-header__title { font-size: 1.6rem; font-weight: 700; margin: 0; color: var(--smk-text, #0f172a); }
.smk-files-header__sub   { font-size: 13px; color: var(--smk-text-muted, #64748b); margin: 6px 0 0 0; }
.smk-files-header__rhs   { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.smk-files-stat {
    font-size: 13px;
    color: var(--smk-text, #0f172a);
    background: var(--smk-surface, #fff);
    border: 1px solid var(--smk-border, #e5e7eb);
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
.smk-files-stat--warn { color: #b45309; background: #fef3c7; border-color: #fde68a; }

/* --- Toolbar --- */
/* The toolbar has TWO modes living in the same row — default tools and
   selection actions. We swap visibility in JS so right-clicking a tile
   never pushes the grid down. The background tints when selecting to
   give a subtle visual cue. */
.smk-files-toolbar {
    background: var(--smk-surface, #fff);
    border: 1px solid var(--smk-border, #e5e7eb);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 16px;
    transition: background .15s, border-color .15s;
}
.smk-files-toolbar:has(> .smk-files-toolbar__selecting:not([hidden])) {
    background: linear-gradient(90deg, rgba(6, 182, 212,.06), rgba(6, 182, 212,.02));
    border-color: rgba(6, 182, 212,.25);
}
.smk-files-toolbar__default,
.smk-files-toolbar__selecting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.smk-files-toolbar__default[hidden],
.smk-files-toolbar__selecting[hidden] { display: none !important; }
.smk-files-toolbar__lhs, .smk-files-toolbar__rhs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.smk-files-search {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.smk-files-search > i {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--smk-text-muted, #94a3b8); font-size: 12px;
}
.smk-files-search > input {
    border: 1px solid var(--smk-border, #e5e7eb);
    background: var(--smk-surface-2, #f8fafc);
    border-radius: 8px;
    padding: 7px 10px 7px 30px;
    font-size: 13px;
    min-width: 240px;
    color: var(--smk-text, #0f172a);
    transition: border-color .15s, box-shadow .15s;
}
.smk-files-search > input:focus {
    outline: 0;
    border-color: var(--smk-brand, #2563eb);
    box-shadow: 0 0 0 3px rgba(6, 182, 212,.12);
}

.smk-files-select {
    border: 1px solid var(--smk-border, #e5e7eb);
    background: var(--smk-surface, #fff);
    border-radius: 8px;
    padding: 7px 28px 7px 10px;
    font-size: 13px;
    color: var(--smk-text, #0f172a);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.smk-files-view-toggle .btn { padding: 6px 10px; }
.smk-files-view-toggle .btn.active {
    background: var(--smk-brand, #2563eb);
    color: #fff;
    border-color: var(--smk-brand, #2563eb);
}
.smk-files-upload-btn { white-space: nowrap; }

/* --- Selection-mode chips --- */
.smk-files-selbar__count {
    font-weight: 600;
    color: var(--smk-brand, #2563eb);
    font-size: 13px;
    background: rgba(6, 182, 212,.12);
    padding: 4px 10px;
    border-radius: 999px;
}
.smk-files-selbar__clear { color: var(--smk-text-muted, #64748b); font-size: 12px; padding: 0 4px; }

/* --- Grid --- */
.smk-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 12px;
    user-select: none;
    -webkit-user-select: none;
}

/* --- Tile --- */
.smk-file {
    --ico-color: #475569;
    position: relative;
    background: var(--smk-surface, #fff);
    border: 1px solid var(--smk-border, #e5e7eb);
    border-radius: 12px;
    padding: 14px 10px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s, transform .08s, background .12s;
    text-align: center;
}
.smk-file:hover {
    border-color: var(--smk-brand, #2563eb);
    background: rgba(6, 182, 212,.03);
    transform: translateY(-1px);
}
.smk-file:focus { outline: 0; }
.smk-file.is-selected {
    border-color: var(--smk-brand, #2563eb);
    background: rgba(6, 182, 212,.08);
    box-shadow: 0 0 0 1px var(--smk-brand, #2563eb);
}
.smk-file.is-selected:hover { background: rgba(6, 182, 212,.12); }

.smk-file__thumb {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 14px;
    background: #f1f5f9;
    background: color-mix(in srgb, var(--ico-color, #475569) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.smk-file__thumb > i {
    font-size: 44px;
    color: var(--ico-color, #475569);
    line-height: 1;
}
.smk-file__thumb > img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 14px;
}
.smk-file__ext {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,.85);
    color: var(--ico-color, #475569);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
}

.smk-file__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    background: #fff;
    color: #64748b;
    border: 1px solid var(--smk-border, #e5e7eb);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
.smk-file__badge + .smk-file__badge { right: 30px; }
.smk-file__badge + .smk-file__badge + .smk-file__badge { right: 56px; }
.smk-file__badge--warn   { color: #b45309; border-color: #fde68a; }
.smk-file__badge--danger { color: #dc2626; border-color: #fecaca; }

.smk-file__body { min-width: 0; width: 100%; }
.smk-file__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--smk-text, #0f172a);
    line-height: 1.3;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.6em;
    margin-bottom: 4px;
}
.smk-file__meta {
    font-size: 11px;
    color: var(--smk-text-muted, #64748b);
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.smk-file__dot { opacity: .5; }

/* --- List view --- */
.smk-files-grid--list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.smk-files-grid--list .smk-file {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 8px 12px;
    border-radius: 8px;
    gap: 12px;
}
.smk-files-grid--list .smk-file:hover { transform: none; }
.smk-files-grid--list .smk-file__thumb {
    width: 40px; height: 40px; border-radius: 8px;
    margin-bottom: 0; flex-shrink: 0;
}
.smk-files-grid--list .smk-file__thumb > i { font-size: 18px; }
.smk-files-grid--list .smk-file__ext { display: none; }
.smk-files-grid--list .smk-file__body { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; width: 100%; }
.smk-files-grid--list .smk-file__name { max-height: none; -webkit-line-clamp: 1; }
.smk-files-grid--list .smk-file__meta { font-size: 12px; }

/* --- Context menu --- */
.smk-files-ctx {
    position: fixed;
    z-index: 9999;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--smk-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.06);
    padding: 6px;
    animation: smkCtxIn .12s ease;
}
@keyframes smkCtxIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.smk-files-ctx[hidden] { display: none; }
.smk-files-ctx button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    background: none;
    border: 0;
    color: var(--smk-text, #0f172a);
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    transition: background .1s, color .1s;
}
.smk-files-ctx button:hover { background: var(--smk-surface-2, #f1f5f9); }
.smk-files-ctx button > i { width: 16px; color: var(--smk-text-muted, #64748b); font-size: 12px; }
.smk-files-ctx__danger { color: #dc2626; }
.smk-files-ctx__danger:hover { background: rgba(220,38,38,.08); color: #dc2626; }
.smk-files-ctx__danger > i { color: #dc2626; }
.smk-files-ctx hr {
    margin: 4px 6px;
    border: 0;
    border-top: 1px solid var(--smk-border, #e5e7eb);
}

/* --- Info modal --- */
.smk-file-info-modal .modal-content { border: 0; border-radius: 16px; box-shadow: 0 20px 48px rgba(15,23,42,.22); }
.smk-file-info-modal__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--smk-border, #e5e7eb);
}
.smk-file-info-modal__icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgba(6, 182, 212,.12);
    color: var(--smk-brand, #2563eb);
    flex-shrink: 0;
}
.smk-file-info-modal__title { min-width: 0; flex: 1; }
.smk-file-info-modal__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--smk-text, #0f172a);
    word-break: break-all;
}
.smk-file-info-modal__type { font-size: 13px; color: var(--smk-text-muted, #64748b); }
.smk-file-info-modal__body { padding: 18px 20px; }
.smk-file-info-grid {
    display: grid;
    grid-template-columns: 110px 1fr;
    row-gap: 10px; column-gap: 16px;
    margin: 0;
    font-size: 13px;
}
.smk-file-info-grid dt { color: var(--smk-text-muted, #64748b); font-weight: 500; }
.smk-file-info-grid dd { margin: 0; color: var(--smk-text, #0f172a); word-break: break-all; }
.smk-file-info-modal__foot { gap: 8px; padding: 14px 20px; border-top: 1px solid var(--smk-border, #e5e7eb); }

/* --- Empty state --- */
.smk-files-empty {
    background: var(--smk-surface, #fff);
    border: 1px dashed var(--smk-border, #e5e7eb);
    border-radius: 16px;
    padding: 60px 20px;
    text-align: center;
}
.smk-files-empty__icon { font-size: 48px; color: var(--smk-brand, #2563eb); opacity: .6; margin-bottom: 12px; }
.smk-files-empty__title { font-size: 18px; font-weight: 700; color: var(--smk-text, #0f172a); margin-bottom: 6px; }
.smk-files-empty__desc  { font-size: 14px; color: var(--smk-text-muted, #64748b); margin-bottom: 12px; }

/* --- Toast --- */
.smk-files-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(8px);
    background: #0f172a;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(15,23,42,.3);
    opacity: 0;
    transition: opacity .2s, transform .2s;
    z-index: 10000;
    pointer-events: none;
}
.smk-files-toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- Dark mode --- */
body[data-theme-style="dark"] .smk-files-stat { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: #e2e8f0; }
body[data-theme-style="dark"] .smk-files-stat--warn { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: #fbbf24; }
body[data-theme-style="dark"] .smk-files-toolbar { background: #111827; border-color: rgba(255,255,255,.08); }
body[data-theme-style="dark"] .smk-files-search > input,
body[data-theme-style="dark"] .smk-files-select { background: #1e293b; border-color: rgba(255,255,255,.1); color: #e2e8f0; }
body[data-theme-style="dark"] .smk-file { background: #111827; border-color: rgba(255,255,255,.08); }
body[data-theme-style="dark"] .smk-file:hover { background: rgba(6, 182, 212,.1); }
body[data-theme-style="dark"] .smk-file.is-selected { background: rgba(6, 182, 212,.18); }
body[data-theme-style="dark"] .smk-file__name { color: #e2e8f0; }
body[data-theme-style="dark"] .smk-file__ext { background: rgba(0,0,0,.5); }
body[data-theme-style="dark"] .smk-file__badge { background: #1e293b; border-color: rgba(255,255,255,.1); color: #cbd5e1; }
body[data-theme-style="dark"] .smk-files-ctx { background: #1e293b; border-color: rgba(255,255,255,.1); }
body[data-theme-style="dark"] .smk-files-ctx button { color: #e2e8f0; }
body[data-theme-style="dark"] .smk-files-ctx button:hover { background: rgba(255,255,255,.06); }
body[data-theme-style="dark"] .smk-files-ctx hr { border-top-color: rgba(255,255,255,.08); }
body[data-theme-style="dark"] .smk-file-info-modal .modal-content { background: #111827; }
body[data-theme-style="dark"] .smk-file-info-modal__head,
body[data-theme-style="dark"] .smk-file-info-modal__foot { border-color: rgba(255,255,255,.08); }
body[data-theme-style="dark"] .smk-file-info-modal__name { color: #e2e8f0; }
body[data-theme-style="dark"] .smk-file-info-grid dd { color: #e2e8f0; }
body[data-theme-style="dark"] .smk-files-empty { background: #111827; border-color: rgba(255,255,255,.1); }
body[data-theme-style="dark"] .smk-files-empty__title { color: #e2e8f0; }

/* ============================================================
   QR codes page — mirrors the dashboard survey treatment with
   a per-type accent, list (default) + grid view, unified menu.
   ============================================================ */

/* --- Box reuses .smk-survey-box header; just override padding so the
   list cells go edge-to-edge inside the white card. --- */
.smk-qr-box { padding-bottom: 0; }
.smk-qr-box form#table { padding: 0; }

/* --- Per-type color palette (CSS vars look-up). --- */
.smk-qr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #eff6ff;
    color: #1d4ed8;
}
.smk-qr-chip[data-color="blue"]   { background: rgba(37,99,235,.10);  color: #2563eb; }
.smk-qr-chip[data-color="purple"] { background: rgba(124,58,237,.10); color: #7c3aed; }
.smk-qr-chip[data-color="green"]  { background: rgba(22,163,74,.10);  color: #16a34a; }
.smk-qr-chip[data-color="orange"] { background: rgba(234,88,12,.10);  color: #ea580c; }
.smk-qr-chip[data-color="cyan"]   { background: rgba(13,148,136,.10); color: #0d9488; }
.smk-qr-chip[data-color="indigo"] { background: rgba(79,70,229,.10);  color: #4f46e5; }
.smk-qr-chip[data-color="slate"]  { background: rgba(71,85,105,.10);  color: #475569; }
.smk-qr-chip[data-color="red"]    { background: rgba(220,38,38,.10);  color: #dc2626; }

/* ====== LIST VIEW ====== */
.smk-qr-list {
    display: flex;
    flex-direction: column;
}
.smk-qr-list__head,
.smk-qr-row {
    display: grid;
    grid-template-columns: 44px minmax(220px, 2.4fr) minmax(110px, 1fr) minmax(110px, 1fr) 80px minmax(120px, 1fr) 88px;
    align-items: center;
    gap: 0;
    padding: 10px 16px;
    border-bottom: 1px solid var(--smk-border, #eef0f3);
}
.smk-qr-list__head {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--smk-text-muted, #64748b);
    background: var(--smk-surface-2, #f8fafc);
    border-top: 1px solid var(--smk-border, #eef0f3);
}
.smk-qr-list__head .smk-qr-list__cell--check { padding-left: 4px; }
.smk-qr-row { transition: background .12s; }
.smk-qr-row:hover { background: rgba(6, 182, 212,.03); }
.smk-qr-row:last-child { border-bottom: 0; }

.smk-qr-list__cell { min-width: 0; }
.smk-qr-list__cell--name {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: center;
    min-width: 0;
}
.smk-qr-list__cell--scans { text-align: right; padding-right: 16px; font-weight: 600; color: var(--smk-text, #0f172a); }
.smk-qr-list__cell--created { font-size: 12px; color: var(--smk-text-muted, #64748b); }
.smk-qr-list__cell--actions { text-align: right; }

.smk-qr-row__thumb {
    display: inline-flex;
    width: 40px; height: 40px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--smk-border, #eef0f3);
    padding: 4px;
    flex-shrink: 0;
    transition: transform .12s, border-color .12s;
}
.smk-qr-row__thumb:hover { transform: scale(1.06); border-color: var(--smk-brand, #2563eb); }
.smk-qr-row__thumb > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.smk-qr-row__body { min-width: 0; }
.smk-qr-row__name {
    display: block;
    color: var(--smk-text, #0f172a);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.smk-qr-row__name:hover { color: var(--smk-brand, #2563eb); text-decoration: none; }
.smk-qr-row__sub { font-size: 12px; line-height: 1.2; margin-top: 2px; }

/* Type-tinted left rail on each row. */
.smk-qr-row { position: relative; }
.smk-qr-row::before {
    content: '';
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
}
.smk-qr-row[data-color="blue"]::before   { background: #2563eb; }
.smk-qr-row[data-color="purple"]::before { background: #7c3aed; }
.smk-qr-row[data-color="green"]::before  { background: #16a34a; }
.smk-qr-row[data-color="orange"]::before { background: #ea580c; }
.smk-qr-row[data-color="cyan"]::before   { background: #0d9488; }
.smk-qr-row[data-color="indigo"]::before { background: #4f46e5; }
.smk-qr-row[data-color="slate"]::before  { background: #94a3b8; }
.smk-qr-row[data-color="red"]::before    { background: #dc2626; }

/* Responsive list collapse */
@media (max-width: 991.98px) {
    .smk-qr-list__head { display: none; }
    .smk-qr-row {
        grid-template-columns: 44px 1fr 88px;
        grid-template-areas:
            'check name actions'
            '.     meta meta';
        row-gap: 6px;
        padding: 12px 14px;
    }
    .smk-qr-list__cell--check { grid-area: check; }
    .smk-qr-list__cell--name  { grid-area: name; }
    .smk-qr-list__cell--actions { grid-area: actions; }
    .smk-qr-list__cell--type,
    .smk-qr-list__cell--proj,
    .smk-qr-list__cell--scans,
    .smk-qr-list__cell--created { grid-area: meta; display: inline-flex; gap: 10px; align-items: center; font-size: 12px; }
    .smk-qr-list__cell--scans { text-align: left; padding-right: 0; }
}

/* ====== GRID VIEW ====== */
.smk-qr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
    padding: 16px;
}
.smk-qr-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--smk-border, #eef0f3);
    border-top: 4px solid #94a3b8;
    border-radius: 14px;
    padding: 14px 14px 0 14px;
    display: flex;
    flex-direction: column;
    transition: border-color .12s, box-shadow .12s, transform .08s;
    /* No overflow:hidden — the ⋮ dropdown menu must be able to escape the
       card edges or it gets clipped and looks invisible. */
}
.smk-qr-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15,23,42,.06);
}

/* Type-tinted top stripe via border-top (was a pseudo-element + overflow
   hidden — that combo clipped the actions dropdown). */
.smk-qr-card[data-color="blue"]   { border-top-color: #2563eb; }
.smk-qr-card[data-color="purple"] { border-top-color: #7c3aed; }
.smk-qr-card[data-color="green"]  { border-top-color: #16a34a; }
.smk-qr-card[data-color="orange"] { border-top-color: #ea580c; }
.smk-qr-card[data-color="cyan"]   { border-top-color: #0d9488; }
.smk-qr-card[data-color="indigo"] { border-top-color: #4f46e5; }
.smk-qr-card[data-color="slate"]  { border-top-color: #94a3b8; }
.smk-qr-card[data-color="red"]    { border-top-color: #dc2626; }

.smk-qr-card__check {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 2;
    opacity: 0;
    transition: opacity .15s;
}
.smk-qr-card:hover .smk-qr-card__check,
.smk-qr-card:has(input:checked) .smk-qr-card__check,
body.smk-bulk-active .smk-qr-card__check { opacity: 1; }

.smk-qr-card__menu {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
}

.smk-qr-card__thumb {
    display: block;
    width: 140px;
    height: 140px;
    margin: 12px auto 8px auto;
    padding: 10px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--smk-border, #eef0f3);
    transition: transform .15s, border-color .15s;
}
.smk-qr-card__thumb:hover { transform: scale(1.04); border-color: var(--smk-brand, #2563eb); }
.smk-qr-card__thumb > img { width: 100%; height: 100%; object-fit: contain; display: block; }

.smk-qr-card__body { padding: 4px 0 10px 0; min-width: 0; }
.smk-qr-card__name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--smk-text, #0f172a);
    text-decoration: none;
    margin-bottom: 8px;
}
.smk-qr-card__name:hover { color: var(--smk-brand, #2563eb); text-decoration: none; }
.smk-qr-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 4px;
}
.smk-qr-card__scans {
    font-size: 12px;
    color: var(--smk-text-muted, #64748b);
    font-weight: 600;
}
.smk-qr-card__sub { font-size: 12px; line-height: 1.25; }

.smk-qr-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-top: 1px solid var(--smk-border, #eef0f3);
    margin: 0 -14px;
    padding: 6px 14px;
    font-size: 11px;
    color: var(--smk-text-muted, #94a3b8);
}
.smk-qr-card__foot .btn { padding: 2px 6px; }

/* The grid's checkbox lives in a tiny corner pill so it doesn't fight
   the QR preview visually. */
.smk-qr-card__check .custom-control { padding-left: 0; }
.smk-qr-card__check .custom-control-label::before,
.smk-qr-card__check .custom-control-label::after {
    background: #fff;
    border: 1.5px solid var(--smk-border, #cbd5e1);
}

/* --- Dark mode --- */
body[data-theme-style="dark"] .smk-qr-list__head { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.06); color: #94a3b8; }
body[data-theme-style="dark"] .smk-qr-row { border-bottom-color: rgba(255,255,255,.06); }
body[data-theme-style="dark"] .smk-qr-row:hover { background: rgba(6, 182, 212,.08); }
body[data-theme-style="dark"] .smk-qr-row__thumb,
body[data-theme-style="dark"] .smk-qr-card,
body[data-theme-style="dark"] .smk-qr-card__thumb { background: #1e293b; border-color: rgba(255,255,255,.08); }
body[data-theme-style="dark"] .smk-qr-row__thumb > img,
body[data-theme-style="dark"] .smk-qr-card__thumb > img { filter: invert(0.92); }
body[data-theme-style="dark"] .smk-qr-row__name,
body[data-theme-style="dark"] .smk-qr-card__name { color: #e2e8f0; }
body[data-theme-style="dark"] .smk-qr-card__foot { border-top-color: rgba(255,255,255,.06); }

/* ============================================================
   LIVE QUIZ (Kahoot-style)
   Pages: /quizzes  /quiz-create  /quiz-builder  /quiz-host
          /join     /play
   ============================================================ */

/* --- Shell badge for the new "Live Quiz" sidebar entry --- */
.smk-shell__badge {
    margin-left: auto;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 1px 6px;
    border-radius: 4px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
}
.smk-shell__item--quiz > i { color: #f59e0b; }

/* "NEW" pill inside the Create dropdown menu, next to "Create Live Quiz". */
.smk-shell__menu-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 1px 6px;
    border-radius: 4px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    vertical-align: middle;
}

/* ====== /quizzes list ====== */
.smk-quizzes-page { padding-top: 8px; }
.smk-quizzes-header {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
    margin-bottom: 18px; flex-wrap: wrap;
}
.smk-quizzes-header__actions { display: flex; gap: 8px; }

.smk-quizzes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.smk-quiz-card {
    background: #fff;
    border: 1px solid var(--smk-border, #eef0f3);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
.smk-quiz-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15,23,42,.08);
    border-color: var(--smk-brand, #2563eb);
}
.smk-quiz-card[data-difficulty="easy"]   { border-top: 4px solid #16a34a; }
.smk-quiz-card[data-difficulty="medium"] { border-top: 4px solid #f59e0b; }
.smk-quiz-card[data-difficulty="hard"]   { border-top: 4px solid #ef4444; }
.smk-quiz-card__cover {
    position: relative;
    height: 110px;
    background: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.smk-quiz-card__initials { font-family: 'Space Grotesk', sans-serif; font-size: 44px; font-weight: 800; letter-spacing: -.04em; }
.smk-quiz-card__status {
    position: absolute; top: 8px; right: 8px;
    font-size: 10px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; padding: 2px 8px;
    background: rgba(0,0,0,.35); color: #fff; border-radius: 4px;
}
.smk-quiz-card__body { padding: 12px 14px; flex: 1; }
.smk-quiz-card__title { font-size: 15px; font-weight: 700; margin: 0 0 6px 0; color: var(--smk-text, #0f172a); }
.smk-quiz-card__desc {
    font-size: 12.5px; margin: 0 0 10px 0; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.8em;
}
.smk-quiz-card__meta {
    display: flex; gap: 10px; font-size: 11.5px; color: var(--smk-text-muted, #64748b); align-items: center;
}
.smk-quiz-card__diff {
    margin-left: auto; padding: 2px 8px; border-radius: 999px;
    background: var(--smk-surface-2, #f1f5f9); font-weight: 600; font-size: 10.5px;
}
.smk-quiz-card__foot {
    display: flex; gap: 8px; padding: 10px 14px;
    border-top: 1px solid var(--smk-border, #eef0f3);
}
.smk-quiz-card__foot > * { flex: 1; }

.smk-quizzes-empty {
    text-align: center;
    padding: 48px 20px;
    background: #fff;
    border: 1px dashed var(--smk-border, #e5e7eb);
    border-radius: 18px;
}
.smk-quizzes-empty__hero {
    width: 84px; height: 84px;
    margin: 0 auto;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    border-radius: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 36px;
    box-shadow: 0 10px 30px rgba(225,29,72,.25);
}

/* ====== /quiz-create form ====== */
.smk-quiz-create-page { padding-top: 8px; }
.smk-quiz-create-form {
    background: #fff;
    border: 1px solid var(--smk-border, #eef0f3);
    border-radius: 16px;
    padding: 24px;
    max-width: 640px;
}

/* ====== /quiz-builder ====== */
.smk-builder-page { padding-top: 8px; }
.smk-builder-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
.smk-builder-header__actions { display: flex; gap: 8px; }
.smk-builder-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    align-items: flex-start;
}
@media (max-width: 991.98px) { .smk-builder-grid { grid-template-columns: 1fr; } }

.smk-builder-sidebar {
    background: #fff;
    border: 1px solid var(--smk-border, #eef0f3);
    border-radius: 14px;
    overflow: hidden;
    position: sticky; top: 12px;
}
.smk-builder-sidebar__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px;
    background: var(--smk-surface-2, #f8fafc);
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--smk-text-muted, #64748b);
}
.smk-builder-qlist { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.smk-builder-qitem {
    display: flex; gap: 10px; align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    border-top: 1px solid var(--smk-border, #eef0f3);
    transition: background .12s;
}
.smk-builder-qitem:hover { background: rgba(6, 182, 212,.04); }
.smk-builder-qitem.is-active { background: rgba(6, 182, 212,.1); border-left: 3px solid var(--smk-brand, #2563eb); padding-left: 9px; }
.smk-builder-qitem__n {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--smk-surface-2, #f1f5f9);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px;
    flex-shrink: 0;
}
.smk-builder-qitem.is-active .smk-builder-qitem__n { background: var(--smk-brand, #2563eb); color: #fff; }
.smk-builder-qitem__title { font-size: 13px; font-weight: 600; color: var(--smk-text, #0f172a); }
.smk-builder-qitem__meta { display: flex; gap: 6px; font-size: 11px; color: var(--smk-text-muted, #94a3b8); margin-top: 2px; }
.smk-builder-qitem__type { background: rgba(6, 182, 212,.1); color: var(--smk-brand, #2563eb); font-weight: 700; padding: 1px 6px; border-radius: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.smk-builder-empty { padding: 16px; text-align: center; color: var(--smk-text-muted, #94a3b8); font-size: 12.5px; }

.smk-builder-editor {
    background: #fff;
    border: 1px solid var(--smk-border, #eef0f3);
    border-radius: 14px;
    padding: 20px;
    min-height: 400px;
}
.smk-builder-form { display: none; }
.smk-builder-form.is-active { display: block; }
.smk-builder-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--smk-text-muted, #64748b); margin-bottom: 6px; display: block; }
.smk-builder-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
}
@media (max-width: 767.98px) { .smk-builder-row { grid-template-columns: 1fr 1fr; } }
.smk-builder-switch {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--smk-text, #0f172a); margin: 0;
    cursor: pointer; padding: 4px 0;
}
.smk-builder-answers { margin-top: 8px; }
.smk-builder-answer {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px; align-items: center;
    background: color-mix(in srgb, var(--c) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--c) 28%, #fff);
    border-left: 4px solid var(--c);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
}
.smk-builder-answer input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: var(--c);
}
.smk-builder-answer input[type="text"] {
    border: 0; background: transparent; padding: 6px 4px;
    font-weight: 600; color: var(--smk-text, #0f172a);
}
.smk-builder-answer input[type="text"]:focus { outline: 0; box-shadow: none; background: rgba(255,255,255,.4); border-radius: 6px; }
.smk-builder-tfgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.smk-builder-tf {
    border: 2px solid var(--smk-border, #eef0f3); border-radius: 12px;
    padding: 16px; text-align: center; cursor: pointer;
    font-size: 18px; font-weight: 700;
    transition: border-color .12s, background .12s;
}
.smk-builder-tf input { display: none; }
.smk-builder-tf:has(input:checked) { border-color: var(--smk-brand, #2563eb); background: rgba(6, 182, 212,.08); color: var(--smk-brand, #2563eb); }
.smk-builder-formfoot { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--smk-border, #eef0f3); }
.smk-builder-blank { text-align: center; color: var(--smk-text-muted, #94a3b8); padding: 60px 20px; }
.smk-builder-blank i { font-size: 60px; opacity: .35; }

/* ====== /quiz-host ====== */
.smk-host {
    min-height: 100vh;
    background: linear-gradient(135deg, #0b1220 0%, #0f172a 50%, #164e63 100%);
    color: #fff;
    padding: 16px 24px 32px;
}
.smk-host__top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px;
}
.smk-host__top-l { display: flex; align-items: center; gap: 12px; }
.smk-host__top-r { display: flex; gap: 8px; align-items: center; }
.smk-host__pill {
    background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em;
    padding: 3px 10px; border-radius: 999px;
    animation: smkPulse 1.6s ease-in-out infinite;
}
@keyframes smkPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.smk-host__title { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 800; margin: 0; }
.smk-host__progress { color: rgba(255,255,255,.7); font-size: 13px; letter-spacing: .04em; margin-right: 6px; font-weight: 600; }

.smk-host__lobby-grid {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px;
    align-items: start;
}
@media (max-width: 991.98px) { .smk-host__lobby-grid { grid-template-columns: 1fr; } }
.smk-host__pinbox {
    background: #fff; color: var(--smk-text, #0f172a);
    border-radius: 22px;
    padding: 24px; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.smk-host__pinbox-lbl { font-size: 14px; color: var(--smk-text-muted, #64748b); margin-bottom: 6px; }
.smk-host__pinbox-pin {
    font-family: 'Space Grotesk', sans-serif; font-weight: 900;
    font-size: 76px; letter-spacing: .08em; color: var(--smk-text, #0f172a);
    line-height: 1; margin: 8px 0 16px 0;
}
.smk-host__pinbox-qr { display: flex; justify-content: center; margin: 10px 0; }
.smk-host__pinbox-qr img, .smk-host__pinbox-qr canvas { border-radius: 8px; }
.smk-host__pinbox-url { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--smk-text-muted, #64748b); margin-top: 8px; word-break: break-all; }

.smk-host__roster { color: #fff; }
.smk-host__roster-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 16px; font-weight: 600; }
.smk-host__roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.smk-host__player {
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex; align-items: center; gap: 10px;
    animation: smkSlideIn .35s ease;
    position: relative;
}
@keyframes smkSlideIn { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.smk-host__player-av {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--c); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 12px;
    overflow: hidden;
    flex-shrink: 0;
}
.smk-host__player-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.smk-host__player-name { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smk-host__player-kick {
    background: rgba(225,29,72,.2); color: #fecdd3; border: 0;
    width: 20px; height: 20px; border-radius: 50%;
    font-size: 14px; line-height: 1; cursor: pointer;
    opacity: 0; transition: opacity .12s;
}
.smk-host__player:hover .smk-host__player-kick { opacity: 1; }
.smk-host__roster-empty { padding: 40px 20px; text-align: center; color: rgba(255,255,255,.5); font-size: 14px; }

.smk-host__qhead {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 20px;
}
.smk-host__qnum { font-size: 14px; font-weight: 600; opacity: .8; }
.smk-host__qtimer {
    margin-left: auto;
    background: #fff; color: #0f172a;
    width: 72px; height: 72px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 900;
    box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.smk-host__qansd { font-size: 14px; opacity: .85; }
.smk-host__qtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(28px, 4vw, 52px); font-weight: 800;
    line-height: 1.15; margin: 0 0 28px 0;
    text-align: center;
}
.smk-host__answers {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    max-width: 1100px; margin: 0 auto;
}
@media (max-width: 767.98px) { .smk-host__answers { grid-template-columns: 1fr; } }
.smk-host__a {
    background: var(--c); color: #fff;
    border-radius: 16px; padding: 22px 24px;
    display: flex; align-items: center; gap: 16px;
    font-size: 22px; font-weight: 700;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
    position: relative;
    overflow: hidden;
}
.smk-host__a-ico {
    width: 44px; height: 44px;
    background: rgba(255,255,255,.18);
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.smk-host__a-text { flex: 1; }
.smk-host__a--reveal { padding-right: 80px; }
.smk-host__a--reveal.is-wrong { opacity: .45; }
.smk-host__a--reveal.is-correct { box-shadow: 0 0 0 4px #16a34a, 0 10px 30px rgba(0,0,0,.25); animation: smkBoom .5s ease; }
@keyframes smkBoom { from { transform: scale(.95); } 50% { transform: scale(1.04); } to { transform: scale(1); } }
.smk-host__a-tally {
    position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
    min-width: 60px;
}
.smk-host__a-bar { display: block; height: 4px; width: 0; background: rgba(255,255,255,.6); border-radius: 2px; transition: width .6s ease; }
.smk-host__a-n   { font-size: 16px; font-weight: 800; }

.smk-host__rexpl {
    max-width: 800px; margin: 16px auto 0;
    background: rgba(255,255,255,.1); padding: 12px 16px;
    border-radius: 12px; text-align: center;
}
.smk-host__leaderboard {
    max-width: 700px; margin: 28px auto 0;
    background: rgba(255,255,255,.08); border-radius: 16px; padding: 16px;
}
.smk-host__lb-title { font-size: 14px; color: rgba(255,255,255,.85); margin: 0 0 10px 0; }
.smk-host__leaderboard ol { list-style: none; padding: 0; margin: 0; }
.smk-host__lb-row {
    display: grid; grid-template-columns: 28px 32px 1fr auto;
    align-items: center; gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    animation: smkSlideIn .25s ease;
}
.smk-host__lb-row:last-child { border-bottom: 0; }
.smk-host__lb-pos { font-weight: 800; color: rgba(255,255,255,.55); font-size: 14px; }
.smk-host__lb-av { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 13px; overflow: hidden; flex-shrink: 0; }
.smk-host__lb-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.smk-host__lb-name { font-weight: 600; }
.smk-host__lb-score { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 16px; }
.smk-host__lb-row:nth-child(1) .smk-host__lb-pos { color: #fde047; }
.smk-host__lb-row:nth-child(2) .smk-host__lb-pos { color: #cbd5e1; }
.smk-host__lb-row:nth-child(3) .smk-host__lb-pos { color: #fdba74; }

/* PODIUM */
.smk-host__podium { text-align: center; position: relative; }
.smk-host__podium-title { font-family: 'Space Grotesk', sans-serif; font-size: 44px; font-weight: 900; margin: 14px 0 30px 0; }
.smk-host__podium-stage {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items: end;
    max-width: 700px; margin: 0 auto;
}
.smk-host__podium-slot {
    background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 18px 18px 0 0;
    padding: 22px 14px 18px;
    text-align: center;
}
.smk-host__podium-slot--1 { background: linear-gradient(180deg, #fde047, #ca8a04); color: #422006; min-height: 240px; }
.smk-host__podium-slot--2 { background: linear-gradient(180deg, #e2e8f0, #94a3b8); color: #0f172a; min-height: 200px; }
.smk-host__podium-slot--3 { background: linear-gradient(180deg, #fdba74, #c2410c); color: #fff;     min-height: 170px; }
.smk-host__podium-pos { font-family: 'Space Grotesk', sans-serif; font-size: 38px; font-weight: 900; }
.smk-host__podium-name { font-size: 16px; font-weight: 700; margin: 8px 0 4px; }
.smk-host__podium-score { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 800; }
.smk-host__podium-rest { max-width: 600px; margin: 24px auto 0; background: rgba(255,255,255,.06); border-radius: 14px; padding: 14px 18px; text-align: left; }
.smk-host__podium-rest h3 { font-size: 14px; opacity: .8; margin: 0 0 8px 0; }
.smk-host__podium-rest ol { list-style: none; padding: 0; margin: 0; }
.smk-host__podium-rest li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.smk-host__podium-actions { margin-top: 30px; display: flex; gap: 10px; justify-content: center; }
.smk-host__confetti {
    position: fixed; inset: 0; pointer-events: none; z-index: 9999;
    width: 100%; height: 100%;
}

/* When the host page is loaded, ditch the shell completely. */
body[data-smk-route="quiz-host"] .smk-shell__rail,
body[data-smk-route="quiz-host"] .smk-shell__nav,
body[data-smk-route="quiz-host"] .smk-shell__topbar { display: none !important; }
body[data-smk-route="quiz-host"] .smk-shell { display: block !important; }
body[data-smk-route="quiz-host"] .smk-shell__canvas { padding: 0 !important; }

/* ====== /join ====== */
.smk-join {
    min-height: 100vh;
    background: linear-gradient(135deg, #0b1220 0%, #0f172a 50%, #164e63 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 24px 16px;
}
.smk-join__inner {
    background: #fff;
    border-radius: 22px;
    padding: 32px;
    max-width: 420px; width: 100%;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.smk-join__logo {
    width: 84px; height: 84px;
    border-radius: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
    overflow: hidden;
}
.smk-join__logo img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* Fallback gradient ✓ for installs that haven't set a logo. */
.smk-join__logo:not(:has(img)) {
    background: linear-gradient(135deg, #06b6d4, #2563eb);
    color: #fff; font-size: 40px; font-weight: 900;
}
.smk-join__brand { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--smk-text-muted, #64748b); margin: 0 0 4px 0; font-weight: 600; }
.smk-join__h { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 800; margin: 0 0 18px 0; color: var(--smk-text, #0f172a); }
.smk-join__game-title { font-size: 13px; color: var(--smk-text-muted, #64748b); margin-bottom: 18px; }
.smk-join__label { display: block; text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--smk-text-muted, #64748b); margin: 0 0 6px 0; }
.smk-join__form input[type="text"] {
    width: 100%; padding: 14px 16px;
    border: 1.5px solid var(--smk-border, #e5e7eb);
    border-radius: 12px;
    font-size: 16px; color: var(--smk-text, #0f172a);
    background: #fff; transition: border-color .12s, box-shadow .12s;
}
.smk-join__form input[type="text"]:focus {
    outline: 0; border-color: var(--smk-brand, #2563eb);
    box-shadow: 0 0 0 4px rgba(6, 182, 212,.15);
}
#smk_pin {
    font-family: 'Space Grotesk', sans-serif; font-size: 32px;
    text-align: center; letter-spacing: .2em; font-weight: 800;
}
.smk-join__avatars {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
    margin-top: 6px;
}
.smk-join__av {
    aspect-ratio: 1; border-radius: 50%;
    border: 3px solid transparent;
    background: var(--c, #f1f5f9);
    padding: 0; overflow: hidden;
    cursor: pointer;
    transition: transform .12s, border-color .12s, box-shadow .15s;
    position: relative;
}
.smk-join__av img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.smk-join__av:hover { transform: scale(1.08); }
.smk-join__av.is-selected {
    border-color: var(--c, #0f172a);
    transform: scale(1.08);
    box-shadow: 0 0 0 4px rgba(0,0,0,.08), 0 8px 18px color-mix(in srgb, var(--c, #0f172a) 35%, transparent);
}
.smk-join__err {
    margin-top: 14px; padding: 10px 14px;
    background: #fee2e2; color: #b91c1c; border-radius: 8px;
    font-size: 13px; font-weight: 600;
}

/* ====== /play ====== */
.smk-play {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--c, #06b6d4) 0%, #0b1220 100%);
    color: #fff;
    padding: 14px;
    display: flex; flex-direction: column;
}
.smk-play__state { flex: 1; display: flex; flex-direction: column; }
.smk-play__lobby { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; }
.smk-play__lobby-av {
    width: 120px; height: 120px; border-radius: 50%;
    background: rgba(255,255,255,.18); border: 4px solid rgba(255,255,255,.4);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    animation: smkBob 2.2s ease-in-out infinite;
}
.smk-play__lobby-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes smkBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.smk-play__lobby-nick { font-family: 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 800; margin: 0; }
.smk-play__lobby-msg { color: rgba(255,255,255,.85); font-size: 15px; }
.smk-play__lobby-pulse {
    width: 80px; height: 6px; border-radius: 3px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    background-size: 50% 100%; background-repeat: no-repeat;
    animation: smkSlide 1.6s ease-in-out infinite;
}
@keyframes smkSlide { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } }

.smk-play__qhead { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 6px 4px 14px; }
.smk-play__qhead-n { font-size: 13px; opacity: .85; font-weight: 700; }
.smk-play__qhead-timer { background: #fff; color: #0f172a; padding: 4px 12px; border-radius: 999px; font-weight: 800; font-family: 'Space Grotesk', sans-serif; }
.smk-play__qhead-score { font-size: 13px; font-weight: 700; }
.smk-play__qtitle { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 800; margin: 0 0 18px 0; text-align: center; line-height: 1.25; }
.smk-play__answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; }
.smk-play__a {
    background: var(--c); color: #fff;
    border: 0; border-radius: 18px;
    padding: 22px 16px;
    font-size: 17px; font-weight: 700;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
    cursor: pointer;
    transition: transform .1s, opacity .25s, filter .25s;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.smk-play__a:active { transform: scale(.96); }
.smk-play__a.is-fade { opacity: .35; filter: grayscale(.6); }
.smk-play__a.is-chosen { box-shadow: 0 0 0 4px #fff, 0 6px 16px rgba(0,0,0,.4); }
.smk-play__a-ico { font-size: 28px; }
.smk-play__open input { width: 100%; padding: 14px; border-radius: 12px; border: 0; font-size: 16px; }
.smk-play__locked {
    margin-top: 14px; padding: 12px;
    background: rgba(0,0,0,.3); border-radius: 12px;
    text-align: center; font-weight: 700;
    animation: smkSlideIn .25s ease;
}
.smk-play__rcard { background: rgba(0,0,0,.3); border-radius: 22px; padding: 26px; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.smk-play__rbig { font-family: 'Space Grotesk', sans-serif; font-size: 44px; font-weight: 900; }
.smk-play__rbig.is-correct { color: #4ade80; }
.smk-play__rbig.is-wrong   { color: #fb7185; }
.smk-play__rbig.is-skip    { color: #cbd5e1; }
.smk-play__rsub { opacity: .85; }
.smk-play__rscore { margin-top: 12px; display: flex; flex-direction: column; align-items: center; }
.smk-play__rscore span { font-family: 'Space Grotesk', sans-serif; font-size: 56px; font-weight: 900; line-height: 1; }
.smk-play__rscore small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.smk-play__rscoretotal { margin-top: 6px; font-size: 14px; opacity: .85; }
.smk-play__end { text-align: center; padding: 40px 20px; }
.smk-play__end-trophy { font-size: 72px; line-height: 1; margin-bottom: 14px; animation: smkBob 2.2s ease-in-out infinite; }
.smk-play__end h2 { font-family: 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 800; margin: 0 0 18px 0; }
.smk-play__end-rank { font-family: 'Space Grotesk', sans-serif; font-size: 64px; font-weight: 900; color: #fde047; line-height: 1; margin: 4px 0 14px 0; }
.smk-play__end-score { font-family: 'Space Grotesk', sans-serif; font-size: 44px; font-weight: 800; }

body[data-smk-route="play"] .smk-shell__rail,
body[data-smk-route="play"] .smk-shell__nav,
body[data-smk-route="play"] .smk-shell__topbar,
body[data-smk-route="join"] .smk-shell__rail,
body[data-smk-route="join"] .smk-shell__nav,
body[data-smk-route="join"] .smk-shell__topbar { display: none !important; }

/* Strip the basic_wrapper chrome on /join and /play — the .smk-join /
   .smk-play views own their full-screen layout and don't need the
   wrapper's top logo, card frame, or constrained column. The wrapper is
   still used (for cookie banner, scripts, etc.) — only the visual chrome
   is hidden. */
body[data-smk-route="join"] .navbar-logo,
body[data-smk-route="play"] .navbar-logo { display: none !important; }
body[data-smk-route="join"] .mb-5.text-center:has(.navbar-logo),
body[data-smk-route="play"] .mb-5.text-center:has(.navbar-logo) { display: none !important; }
body[data-smk-route="join"] .card,
body[data-smk-route="play"] .card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
body[data-smk-route="join"] .card-body,
body[data-smk-route="play"] .card-body { padding: 0 !important; }
/* Let the join/play view escape the wrapper's narrow column so the
   gradient covers the full viewport like Kahoot. */
body[data-smk-route="join"] .col-xs-12,
body[data-smk-route="play"] .col-xs-12,
body[data-smk-route="join"] [class*="col-md-"],
body[data-smk-route="play"] [class*="col-md-"],
body[data-smk-route="join"] [class*="col-lg-"],
body[data-smk-route="play"] [class*="col-lg-"],
body[data-smk-route="join"] [class*="col-xl-"],
body[data-smk-route="play"] [class*="col-xl-"] {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
}
body[data-smk-route="join"] .d-flex.flex-column.align-items-center,
body[data-smk-route="play"] .d-flex.flex-column.align-items-center { display: block !important; }

/* ============================================================
   BOOKING SYSTEM
   ============================================================ */

.smk-shell__item--book > i { color: #16a34a; }

/* --- /bookings list --- */
.smk-bookings-page { padding-top: 8px; }
.smk-bookings-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.smk-bookings-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
.smk-booking-card {
    background: #fff;
    border: 1px solid var(--smk-border, #eef0f3);
    border-radius: 16px;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
.smk-booking-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15,23,42,.08);
    border-color: var(--c, #2563eb);
}
.smk-booking-card__cover {
    position: relative; height: 96px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--c, #06b6d4) 70%, #fff) 0%, var(--c, #06b6d4) 100%);
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.smk-booking-card__initials { font-family: 'Space Grotesk', sans-serif; font-size: 36px; font-weight: 800; letter-spacing: -.04em; }
.smk-booking-card__status {
    position: absolute; top: 8px; right: 8px;
    font-size: 10px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; padding: 2px 8px;
    background: rgba(0,0,0,.35); color: #fff; border-radius: 4px;
}
.smk-booking-card__body { padding: 12px 14px; flex: 1; }
.smk-booking-card__title { font-size: 15px; font-weight: 700; margin: 0 0 6px 0; color: var(--smk-text, #0f172a); }
.smk-booking-card__desc {
    font-size: 12.5px; margin: 0 0 10px 0; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.8em;
}
.smk-booking-card__meta {
    display: flex; gap: 10px; font-size: 11.5px; color: var(--smk-text-muted, #64748b); align-items: center;
}
.smk-booking-card__cat {
    padding: 2px 8px; border-radius: 999px;
    background: var(--smk-surface-2, #f1f5f9); font-weight: 600; font-size: 10.5px; text-transform: capitalize;
}
.smk-booking-card__url { font-size: 11px; color: var(--smk-text-muted, #64748b); margin-top: 8px; }
.smk-booking-card__foot {
    display: flex; gap: 8px; padding: 10px 14px;
    border-top: 1px solid var(--smk-border, #eef0f3);
}
.smk-booking-card__foot > * { flex: 1; }

.smk-bookings-empty {
    text-align: center; padding: 48px 20px;
    background: #fff; border: 1px dashed var(--smk-border, #e5e7eb); border-radius: 18px;
}
.smk-bookings-empty__hero {
    width: 84px; height: 84px; margin: 0 auto;
    background: linear-gradient(135deg, #16a34a, #0d9488);
    border-radius: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 36px;
    box-shadow: 0 10px 30px rgba(22,163,74,.25);
}

/* --- /booking-create form --- */
.smk-booking-create-form {
    background: #fff;
    border: 1px solid var(--smk-border, #eef0f3);
    border-radius: 16px;
    padding: 24px;
    max-width: 720px;
}

/* --- /booking-page manage view --- */
.smk-booking-mgmt-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
}
.smk-booking-mgmt-header__dot {
    display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle; margin-right: 6px;
}
.smk-booking-stats {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
    background: #fff; border: 1px solid var(--smk-border, #eef0f3); border-radius: 14px;
    padding: 12px 14px; margin-bottom: 14px;
}
@media (max-width: 767.98px) { .smk-booking-stats { grid-template-columns: repeat(3, 1fr); } }
.smk-booking-stat { text-align: center; padding: 4px 8px; }
.smk-booking-stat__n { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 800; color: var(--smk-text, #0f172a); line-height: 1; }
.smk-booking-stat__n--pending   { color: #d97706; }
.smk-booking-stat__n--confirmed { color: #2563eb; }
.smk-booking-stat__n--completed { color: #16a34a; }
.smk-booking-stat__n--cancelled { color: #94a3b8; }
.smk-booking-stat__l { font-size: 10.5px; color: var(--smk-text-muted, #64748b); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; font-weight: 600; }

.smk-booking-tabs {
    display: flex; gap: 4px; background: #fff;
    border: 1px solid var(--smk-border, #eef0f3); border-bottom: 0;
    border-radius: 14px 14px 0 0; padding: 6px 6px 0 6px; flex-wrap: wrap;
}
.smk-booking-tabs a {
    padding: 10px 14px; border-radius: 10px 10px 0 0;
    color: var(--smk-text-muted, #64748b); font-weight: 600; font-size: 13px;
    text-decoration: none; border-bottom: 2px solid transparent;
}
.smk-booking-tabs a:hover { background: var(--smk-surface-2, #f8fafc); }
.smk-booking-tabs a.is-active {
    color: var(--smk-brand, #2563eb);
    background: var(--smk-surface-2, #f8fafc);
    border-bottom-color: var(--smk-brand, #2563eb);
}

.smk-booking-panel {
    background: #fff;
    border: 1px solid var(--smk-border, #eef0f3); border-top: 0;
    border-radius: 0 0 14px 14px;
    padding: 20px; margin-bottom: 18px;
}
.smk-booking-panel__head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
.smk-booking-panel__empty {
    text-align: center; padding: 50px 20px; color: var(--smk-text-muted, #94a3b8);
}
.smk-booking-panel__empty i { font-size: 48px; opacity: .35; margin-bottom: 10px; }

/* --- Services list (in manage view) --- */
.smk-svc-list { display: flex; flex-direction: column; gap: 8px; }
.smk-svc-row {
    display: grid; grid-template-columns: 6px 1fr auto auto; gap: 12px;
    align-items: center; padding: 10px 14px;
    background: #fff; border: 1px solid var(--smk-border, #eef0f3); border-radius: 10px;
}
.smk-svc-row__color { width: 6px; height: 32px; background: var(--c, #2563eb); border-radius: 4px; }
.smk-svc-row__name { font-weight: 700; font-size: 14px; color: var(--smk-text, #0f172a); }
.smk-svc-row__meta { display: flex; gap: 12px; font-size: 12px; color: var(--smk-text-muted, #64748b); margin-top: 2px; flex-wrap: wrap; }

/* --- Availability grid --- */
.smk-avail-grid { display: flex; flex-direction: column; gap: 6px; }
.smk-avail-row {
    display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center;
    padding: 10px 12px; background: #fff;
    border: 1px solid var(--smk-border, #eef0f3); border-radius: 10px;
    transition: opacity .15s;
}
.smk-avail-row.is-closed { opacity: .45; }
.smk-avail-row.is-closed .smk-avail-row__times input { pointer-events: none; }
.smk-avail-row__day { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; margin: 0; cursor: pointer; }
.smk-avail-row__day input { width: 18px; height: 18px; }
.smk-avail-row__times { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--smk-text-muted, #64748b); }
.smk-avail-row__times input[type="time"] { width: 110px; }
.smk-holiday-list { list-style: none; padding: 0; margin: 0; }
.smk-holiday-list li {
    padding: 6px 10px; background: var(--smk-surface-2, #f8fafc); border-radius: 6px; margin-bottom: 4px;
    font-size: 13px;
}

/* --- Appointments list --- */
.smk-appt-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.smk-appt-filters .btn.is-active { background: var(--smk-brand, #2563eb); color: #fff; }
.smk-appt-list { display: flex; flex-direction: column; gap: 8px; }
.smk-appt-row {
    display: grid; grid-template-columns: 72px 1fr auto auto; gap: 14px; align-items: center;
    padding: 12px 14px;
    background: #fff; border: 1px solid var(--smk-border, #eef0f3); border-radius: 12px;
    transition: box-shadow .12s, border-color .12s;
}
.smk-appt-row:hover { box-shadow: 0 4px 12px rgba(15,23,42,.06); border-color: var(--smk-ink-300, #cbd5e1); }
.smk-appt-row__date {
    background: var(--c, #2563eb); color: #fff; text-align: center;
    border-radius: 10px; padding: 6px 0;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--c, #2563eb) 25%, transparent);
}
.smk-appt-row__day { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 800; line-height: 1; }
.smk-appt-row__mon { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; opacity: .85; margin-top: 2px; }
.smk-appt-row__time { font-size: 11px; margin-top: 4px; font-weight: 600; background: rgba(0,0,0,.15); border-radius: 4px; padding: 1px 4px; }
.smk-appt-row__name { font-weight: 700; font-size: 14px; color: var(--smk-text, #0f172a); }
.smk-appt-row__svc { font-size: 12.5px; color: var(--smk-text-muted, #64748b); }
.smk-appt-row__meta { display: flex; gap: 12px; font-size: 11px; color: var(--smk-text-muted, #94a3b8); margin-top: 4px; flex-wrap: wrap; }
.smk-appt-row__notes { margin-top: 4px; font-style: italic; }
.smk-appt-row__status { text-align: right; min-width: 90px; }
.smk-appt-row__price { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px; color: var(--smk-text, #0f172a); margin-top: 4px; }
.smk-appt-row__actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.smk-appt-row__actions form { margin: 0; }
.smk-appt-row__actions .btn { padding: 4px 8px; }

.smk-status {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.smk-status--pending      { background: #fef3c7; color: #b45309; }
.smk-status--confirmed    { background: #dbeafe; color: #1d4ed8; }
.smk-status--completed    { background: #dcfce7; color: #15803d; }
.smk-status--cancelled    { background: #f1f5f9; color: #64748b; }
.smk-status--rescheduled  { background: #ecfeff; color: #2563eb; }
.smk-status--no_show      { background: #ffe4e6; color: #be123c; }

/* ============================================================
   PUBLIC BOOKING PAGE — /book/{slug}
   ============================================================ */

.smk-book {
    --brand: #2563eb;
    min-height: 100vh;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, #f7f7fb) 0%, #f7f7fb 220px);
    padding: 0 0 40px 0;
}
.smk-book__preview-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 760px;
    margin: 14px auto 0;
    padding: 12px 16px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 10px;
    color: #9a3412;
    font-size: 13.5px;
    line-height: 1.5;
}
.smk-book__preview-banner i { margin-top: 3px; color: #c2410c; }
.smk-book__preview-banner a { color: #c2410c; font-weight: 600; text-decoration: underline; margin-left: 6px; }
.smk-book__hero {
    background: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 70%, #2563eb) 100%);
    color: #fff;
    padding: 36px 20px 32px;
}
.smk-book__hero-inner {
    max-width: 720px; margin: 0 auto;
    display: flex; align-items: center; gap: 18px;
}
.smk-book__avatar {
    width: 64px; height: 64px; border-radius: 18px;
    background: #fff; color: var(--brand);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 800;
    overflow: hidden; flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.smk-book__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.smk-book__h1 { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.smk-book__hero-desc { font-size: 14px; opacity: .85; margin: 4px 0 0 0; }

.smk-book__steps {
    max-width: 720px; margin: -16px auto 16px; padding: 12px 14px;
    background: #fff; border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15,23,42,.08);
    display: flex; gap: 6px; justify-content: space-between;
    font-size: 11.5px; font-weight: 600; color: var(--smk-text-muted, #94a3b8);
}
.smk-book__steps span {
    padding: 4px 10px; border-radius: 999px;
    transition: background .15s, color .15s;
}
.smk-book__steps span.is-active { background: var(--brand); color: #fff; }
@media (max-width: 575.98px) { .smk-book__steps { font-size: 10px; gap: 2px; padding: 8px; } .smk-book__steps span { padding: 4px 6px; } }

.smk-book__panel {
    max-width: 720px; margin: 0 auto 14px;
    background: #fff; border-radius: 16px;
    padding: 22px;
    box-shadow: 0 4px 12px rgba(15,23,42,.06);
    position: relative;
}
.smk-book__panel-h { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 800; margin: 0 0 16px 0; letter-spacing: -.02em; }
.smk-book__back {
    position: absolute; top: 14px; right: 14px;
    background: var(--smk-surface-2, #f1f5f9); border: 0; border-radius: 8px;
    padding: 4px 10px; font-size: 12px; color: var(--smk-text, #0f172a); cursor: pointer;
}
.smk-book__back:hover { background: var(--smk-ink-200, #e2e8f0); }
.smk-book__empty { text-align: center; padding: 40px 20px; color: var(--smk-text-muted, #64748b); }

/* Service list */
.smk-book__services { display: flex; flex-direction: column; gap: 8px; }
.smk-book__svc {
    display: grid; grid-template-columns: 6px 1fr auto; gap: 14px;
    align-items: center; padding: 14px 16px;
    background: #fff; border: 1.5px solid var(--smk-border, #eef0f3); border-radius: 12px;
    cursor: pointer; text-align: left;
    transition: border-color .12s, box-shadow .12s, transform .08s;
}
.smk-book__svc:hover {
    border-color: var(--c, var(--brand));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--c, var(--brand)) 12%, transparent);
    transform: translateY(-1px);
}
.smk-book__svc-color { width: 6px; height: 36px; background: var(--c, var(--brand)); border-radius: 4px; }
.smk-book__svc-name { font-weight: 700; font-size: 15px; color: var(--smk-text, #0f172a); }
.smk-book__svc-desc { margin: 2px 0 6px 0; }
.smk-book__svc-meta { display: flex; gap: 10px; font-size: 12px; color: var(--smk-text-muted, #64748b); }

/* Calendar */
.smk-book__cal { position: relative; }
.smk-book__cal-head {
    display: flex; align-items: center; justify-content: space-between;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px;
    margin-bottom: 10px;
}
.smk-book__cal-nav {
    background: var(--smk-surface-2, #f1f5f9); border: 0; border-radius: 8px;
    width: 32px; height: 32px; cursor: pointer; color: var(--smk-text, #0f172a);
}
.smk-book__cal-nav:hover { background: var(--smk-ink-200, #e2e8f0); }
.smk-book__cal-dow {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
    font-size: 10px; color: var(--smk-text-muted, #94a3b8); text-align: center;
    text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    padding-bottom: 6px;
}
.smk-book__cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.smk-book__cal-cell {
    aspect-ratio: 1; border: 0; background: transparent; cursor: pointer;
    border-radius: 10px;
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 13px; color: var(--smk-text, #0f172a); font-weight: 600;
    transition: background .12s, color .12s;
}
.smk-book__cal-cell.is-empty { visibility: hidden; }
.smk-book__cal-cell.is-past, .smk-book__cal-cell.is-closed {
    color: var(--smk-ink-300, #cbd5e1); cursor: not-allowed;
}
.smk-book__cal-cell.is-open:hover { background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); }
.smk-book__cal-dot {
    width: 4px; height: 4px; border-radius: 50%; background: var(--brand);
    margin-top: 1px;
}
.smk-book__cal-loading { position: absolute; inset: 50px 0 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.7); color: var(--smk-text-muted, #64748b); font-size: 12px; }
.smk-book__cal-loading[hidden] { display: none; }

/* Time slots */
.smk-book__chosen {
    background: color-mix(in srgb, var(--brand) 10%, #fff);
    color: var(--brand);
    padding: 8px 12px; border-radius: 8px;
    font-weight: 600; font-size: 13px; margin-bottom: 12px;
}
.smk-book__slots {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px;
}
.smk-book__slot {
    padding: 10px 8px; background: #fff;
    border: 1.5px solid var(--smk-border, #eef0f3); border-radius: 10px;
    cursor: pointer; font-weight: 700; font-size: 14px;
    color: var(--smk-text, #0f172a);
    transition: border-color .12s, background .12s, color .12s, transform .08s;
}
.smk-book__slot:hover {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 10%, #fff);
    color: var(--brand);
    transform: translateY(-1px);
}
.smk-book__slots-empty { text-align: center; padding: 30px 20px; color: var(--smk-text-muted, #64748b); font-size: 14px; }

/* Details form */
.smk-book__summary {
    background: color-mix(in srgb, var(--brand) 8%, #fff);
    padding: 10px 14px; border-radius: 10px; font-size: 14px; color: var(--smk-text, #0f172a);
    margin-bottom: 16px;
}
.smk-book__err {
    margin-top: 12px; padding: 10px 14px;
    background: #fee2e2; color: #b91c1c; border-radius: 8px;
    font-size: 13px; font-weight: 600;
}
.smk-book__form .btn-primary { background: var(--brand); border-color: var(--brand); }
.smk-book__form .btn-primary:hover { background: color-mix(in srgb, var(--brand) 80%, #000); border-color: color-mix(in srgb, var(--brand) 80%, #000); }

/* Confirmation */
.smk-book__success { text-align: center; padding: 16px 0; }
.smk-book__success-ico {
    width: 80px; height: 80px; border-radius: 50%;
    background: #dcfce7; color: #16a34a; display: inline-flex; align-items: center; justify-content: center;
    font-size: 44px; margin-bottom: 14px;
    animation: smkBookPop .35s ease;
}
@keyframes smkBookPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.smk-book__success h2 { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 800; margin: 0 0 6px 0; }
.smk-book__success-card {
    background: var(--smk-surface-2, #f8fafc);
    padding: 14px 18px; border-radius: 12px; margin: 14px 0;
}
.smk-book__success-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.smk-book__brandfoot { text-align: center; padding: 14px; opacity: .6; }

/* Follow-up page (re-uses smk-book__panel) */
.smk-track__status { display: inline-block; margin-bottom: 14px; }
.smk-track__h { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 800; margin: 6px 0 4px 0; }
.smk-track__grid {
    display: grid; grid-template-columns: 130px 1fr; row-gap: 8px; column-gap: 12px;
    font-size: 14px; margin: 18px 0;
}
.smk-track__grid dt { color: var(--smk-text-muted, #64748b); font-weight: 600; }
.smk-track__grid dd { margin: 0; color: var(--smk-text, #0f172a); }
.smk-track__notes { background: var(--smk-surface-2, #f8fafc); padding: 12px 14px; border-radius: 10px; margin-bottom: 18px; }
.smk-track__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.smk-track__actions form { margin: 0; }

/* Hide app shell chrome on /book and /booking/track */
body[data-smk-route="book"]          .navbar-logo,
body[data-smk-route="booking-track"] .navbar-logo { display: none !important; }
body[data-smk-route="book"]          .mb-5.text-center:has(.navbar-logo),
body[data-smk-route="booking-track"] .mb-5.text-center:has(.navbar-logo) { display: none !important; }
body[data-smk-route="book"]          .card,
body[data-smk-route="booking-track"] .card {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
}
body[data-smk-route="book"]          .card-body,
body[data-smk-route="booking-track"] .card-body { padding: 0 !important; }
body[data-smk-route="book"]          .col-xs-12,
body[data-smk-route="booking-track"] .col-xs-12,
body[data-smk-route="book"]          [class*="col-md-"],
body[data-smk-route="booking-track"] [class*="col-md-"],
body[data-smk-route="book"]          [class*="col-lg-"],
body[data-smk-route="booking-track"] [class*="col-lg-"],
body[data-smk-route="book"]          [class*="col-xl-"],
body[data-smk-route="booking-track"] [class*="col-xl-"] {
    max-width: 100% !important; flex: 0 0 100% !important; padding: 0 !important;
}
body[data-smk-route="book"]          .d-flex.flex-column.align-items-center,
body[data-smk-route="booking-track"] .d-flex.flex-column.align-items-center { display: block !important; }

/* ============================================================
   QR edit-in-modal (iframe) + embed mode
   ============================================================ */
.smk-qr-edit-modal .modal-dialog { max-width: 1140px; }
.smk-qr-edit-modal .modal-content {
    height: 86vh;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15,23,42,.28);
}
.smk-qr-edit-modal__head {
    padding: 10px 16px;
    border-bottom: 1px solid var(--smk-border, #eef0f3);
    background: var(--smk-surface, #fff);
    display: flex;
    align-items: center;
    gap: 8px;
}
.smk-qr-edit-modal__head .modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--smk-text, #0f172a);
    margin-right: auto;
}
.smk-qr-edit-modal__body {
    position: relative;
    height: 100%;
    flex: 1 1 auto;
    overflow: hidden;
    background: #f7f7f9;
}
.smk-qr-edit-modal__body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.smk-qr-edit-modal__loader {
    position: absolute;
    inset: 0;
    background: #f7f7f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--smk-text-muted, #64748b);
    font-size: 14px;
    z-index: 1;
}
body[data-theme-style="dark"] .smk-qr-edit-modal__head { background: #111827; border-bottom-color: rgba(255,255,255,.08); }
body[data-theme-style="dark"] .smk-qr-edit-modal__head .modal-title { color: #e2e8f0; }
body[data-theme-style="dark"] .smk-qr-edit-modal__body,
body[data-theme-style="dark"] .smk-qr-edit-modal__loader { background: #0b1220; }

/* ---- Embed mode: hide the shell so iframe shows only the editor ---- */
body.smk-embed .smk-shell__rail,
body.smk-embed .smk-shell__nav,
body.smk-embed .smk-shell__topbar { display: none !important; }
body.smk-embed .smk-shell {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
}
body.smk-embed .smk-shell__canvas {
    padding: 0 1rem 1rem 1rem !important;
    height: auto !important;
    overflow: visible !important;
}
body.smk-embed,
body.smk-embed .app {
    background: #fff !important;
}
/* Also hide any modal/share/cookie partials that don't make sense inside
   an iframe context. */
body.smk-embed #cookie_consent,
body.smk-embed .smk-account-header-menu,
body.smk-embed [data-pwa-install],
body.smk-embed .ac-banner { display: none !important; }
/* Smaller container padding inside the editor when embedded. */
body.smk-embed .container { max-width: 100% !important; padding-left: 12px; padding-right: 12px; }

/* =========================================================================
   MARKETING HOMEPAGE — Apple-glass landing layout
   ========================================================================= */

.smk-home {
    --smk-bg: #f5f7fb;
    --smk-bg-soft: #eff6ff;
    --smk-text: #0f172a;
    --smk-muted: #64748b;
    --smk-line: rgba(15, 23, 42, .08);
    --smk-blue: #2563eb;
    --smk-violet: #2563eb;
    --smk-cyan: #06b6d4;
    --smk-pink: #2563eb;
    --smk-green: #10b981;
    --smk-orange: #f97316;
    --smk-radius: 28px;
    --smk-shadow-1: 0 4px 14px rgba(15, 23, 42, .04);
    --smk-shadow-2: 0 20px 60px rgba(15, 23, 42, .10);
    --smk-shadow-3: 0 30px 80px rgba(31, 41, 99, .14);
    --smk-grad-blue: linear-gradient(135deg, #2563eb 0%, #2563eb 100%);
    --smk-grad-violet: linear-gradient(135deg, #06b6d4 0%, #06b6d4 100%);
    --smk-grad-pink: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
    --smk-grad-green: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    --smk-grad-cyan: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
    --smk-grad-orange: linear-gradient(135deg, #fb923c 0%, #f97316 100%);

    background:
        radial-gradient(1200px 600px at 80% -100px, rgba(6, 182, 212, .10), transparent 60%),
        radial-gradient(900px 600px at -10% 200px, rgba(37, 99, 235, .12), transparent 60%),
        linear-gradient(180deg, #fafbff 0%, #f3f5fc 100%);
    color: var(--smk-text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
.smk-home * { box-sizing: border-box; }
.smk-home img { max-width: 100%; height: auto; }

/* ----- scroll-in reveal ----- */
.smk-home [data-smk-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
}
.smk-home [data-smk-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .smk-home [data-smk-reveal] { opacity: 1; transform: none; transition: none; }
    .smk-hero__blob, .smk-hero__chip { animation: none !important; }
}

/* ----- typography ----- */
.smk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .08);
    color: var(--smk-blue);
    border: 1px solid rgba(37, 99, 235, .14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.smk-eyebrow--blue   { color: #2563eb; background: rgba(37, 99, 235, .08); border-color: rgba(37, 99, 235, .15); }
.smk-eyebrow--violet { color: #2563eb; background: rgba(6, 182, 212, .10); border-color: rgba(6, 182, 212, .18); }
.smk-eyebrow--cyan   { color: #06b6d4; background: rgba(6, 182, 212, .10); border-color: rgba(6, 182, 212, .18); }
.smk-eyebrow--pink   { color: #2563eb; background: rgba(236, 72, 153, .10); border-color: rgba(236, 72, 153, .18); }
.smk-eyebrow--green  { color: #10b981; background: rgba(16, 185, 129, .10); border-color: rgba(16, 185, 129, .18); }
.smk-eyebrow__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--smk-blue);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .18);
    animation: smk-pulse 2.4s ease-in-out infinite;
}
@keyframes smk-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(37, 99, 235, .18); }
    50% { box-shadow: 0 0 0 9px rgba(37, 99, 235, .06); }
}
.smk-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 3px 8px;
    border-radius: 6px;
    margin-left: 8px;
    color: #fff;
    background: var(--smk-grad-green);
    vertical-align: middle;
}
.smk-pill--new { background: linear-gradient(135deg, #34d399, #10b981); }

.smk-h2 {
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 14px 0 14px 0;
    color: var(--smk-text);
}
.smk-h2--light { color: #fff; }
.smk-h3 {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 8px 0;
}
.smk-lead {
    font-size: clamp(16px, 1.4vw, 19px);
    color: var(--smk-muted);
    line-height: 1.6;
    max-width: 640px;
}
.smk-lead--light { color: rgba(255,255,255,.78); }

.smk-grad-text {
    background: linear-gradient(120deg, #2563eb 0%, #06b6d4 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ----- buttons ----- */
.smk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}
.smk-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
    box-shadow: 0 10px 30px rgba(37, 99, 235, .35);
}
.smk-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(37, 99, 235, .45);
    color: #fff;
}
.smk-btn--ghost {
    color: var(--smk-text);
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(15, 23, 42, .10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.smk-btn--ghost:hover {
    background: #fff;
    color: var(--smk-text);
    transform: translateY(-2px);
    box-shadow: var(--smk-shadow-2);
}
.smk-btn--ghost-light {
    background: rgba(255,255,255,.08);
    color: #fff;
    border-color: rgba(255,255,255,.20);
}
.smk-btn--ghost-light:hover {
    background: rgba(255,255,255,.16);
    color: #fff;
}

/* =========================================================================
   HERO
   ========================================================================= */
.smk-hero {
    position: relative;
    padding: 120px 0 80px 0;
    overflow: hidden;
}
.smk-hero__inner {
    position: relative;
    text-align: center;
    z-index: 2;
}
.smk-hero__title {
    font-size: clamp(44px, 7vw, 96px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 22px 0 22px 0;
    color: var(--smk-text);
}
.smk-hero__sub {
    margin: 0 auto 36px auto;
    max-width: 680px;
    font-size: clamp(17px, 1.6vw, 21px);
    color: var(--smk-muted);
    line-height: 1.55;
}
.smk-hero__cta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.smk-hero__meta {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    gap: 26px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: var(--smk-muted);
}
.smk-hero__meta span i { margin-right: 6px; }

/* gradient blobs */
.smk-hero__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
}
.smk-hero__blob--a { width: 480px; height: 480px; background: #93c5fd; top: -120px; left: -120px; animation: smk-float-blob 18s ease-in-out infinite; }
.smk-hero__blob--b { width: 540px; height: 540px; background: #67e8f9; top: 40px; right: -160px; animation: smk-float-blob 22s ease-in-out infinite reverse; }
.smk-hero__blob--c { width: 380px; height: 380px; background: #f9a8d4; bottom: -200px; left: 30%; animation: smk-float-blob 24s ease-in-out infinite; opacity: .35; }
@keyframes smk-float-blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, -40px) scale(1.08); }
}

/* hero floating glass stack */
.smk-hero__stage {
    position: relative;
    margin: 70px auto 0;
    max-width: 1080px;
    height: clamp(360px, 50vw, 600px);
}
.smk-hero__glass {
    position: absolute;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(255, 255, 255, .65);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    box-shadow: var(--smk-shadow-3);
}
.smk-hero__glass img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.smk-hero__glass--main {
    inset: 0 10% 5% 10%;
    z-index: 3;
    animation: smk-float-y 8s ease-in-out infinite;
}
.smk-hero__glass--side {
    width: 36%; aspect-ratio: 4/3;
    bottom: 18%;
    z-index: 2;
}
.smk-hero__glass--left  { left: -3%; transform: rotate(-7deg); animation: smk-float-y 9s ease-in-out infinite .8s; }
.smk-hero__glass--right { right: -3%; transform: rotate(7deg);  animation: smk-float-y 9s ease-in-out infinite 1.4s; }
@keyframes smk-float-y {
    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50%      { transform: translateY(-14px) rotate(var(--r, 0deg)); }
}
.smk-hero__glass--left  { --r: -7deg; }
.smk-hero__glass--right { --r: 7deg; }

.smk-hero__chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: var(--smk-shadow-2);
    z-index: 4;
    font-size: 13px;
}
.smk-hero__chip img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.smk-hero__chip i { font-size: 18px; color: #f59e0b; }
.smk-hero__chip strong { display: block; font-weight: 700; color: var(--smk-text); }
.smk-hero__chip span { display: block; color: var(--smk-muted); font-size: 12px; }
.smk-hero__chip--a { top: 8%; left: -2%; animation: smk-float-y 6s ease-in-out infinite; }
.smk-hero__chip--b { top: 28%; right: -2%; animation: smk-float-y 7s ease-in-out infinite 1.2s; }

@media (max-width: 768px) {
    .smk-hero { padding: 80px 0 40px; }
    .smk-hero__stage { height: 360px; }
    .smk-hero__glass--main { inset: 0 0 0 0; }
    .smk-hero__glass--side, .smk-hero__chip { display: none; }
}

/* =========================================================================
   STAT STRIP
   ========================================================================= */
.smk-stats {
    padding: 60px 0;
}
.smk-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 28px 32px;
    border-radius: var(--smk-radius);
    background: rgba(255, 255, 255, .65);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, .65);
    box-shadow: var(--smk-shadow-2);
}
.smk-stat { text-align: center; }
.smk-stat__num {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.1;
}
.smk-stat__num span { font-size: .55em; opacity: .7; margin-left: 2px; }
.smk-stat__label { font-size: 13px; color: var(--smk-muted); margin-top: 4px; }
@media (max-width: 768px) {
    .smk-stats__grid { grid-template-columns: repeat(2, 1fr); padding: 20px; }
}

/* =========================================================================
   SECTION + HEAD
   ========================================================================= */
.smk-section { padding: 100px 0; }
.smk-section__head {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}
.smk-section__head .smk-lead { margin: 16px auto 0; }
@media (max-width: 768px) { .smk-section { padding: 70px 0; } }

/* =========================================================================
   FEATURE GRID
   ========================================================================= */
.smk-grid--6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.smk-card {
    position: relative;
    padding: 32px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(255, 255, 255, .65);
    box-shadow: var(--smk-shadow-1);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .25s ease;
}
.smk-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--smk-shadow-2);
    border-color: rgba(6, 182, 212, .18);
}
.smk-card__icon {
    width: 54px; height: 54px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 22px;
    margin-bottom: 18px;
    box-shadow: 0 12px 24px rgba(15,23,42,.10);
}
.smk-grad-1 { background: var(--smk-grad-blue); }
.smk-grad-2 { background: var(--smk-grad-violet); }
.smk-grad-3 { background: var(--smk-grad-cyan); }
.smk-grad-4 { background: var(--smk-grad-green); }
.smk-grad-5 { background: var(--smk-grad-pink); }
.smk-grad-6 { background: var(--smk-grad-orange); }
.smk-card h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 8px 0;
}
.smk-card p {
    color: var(--smk-muted);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
}
.smk-card__badge {
    position: absolute;
    top: 16px; right: 16px;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: var(--smk-grad-green);
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: .08em;
}
@media (max-width: 960px) { .smk-grid--6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .smk-grid--6 { grid-template-columns: 1fr; } }

/* =========================================================================
   SHOWCASE — alternating image/copy
   ========================================================================= */
.smk-showcase { padding: 100px 0; position: relative; }
.smk-showcase--dark {
    background:
        radial-gradient(900px 500px at 80% 10%, rgba(6, 182, 212,.35), transparent 60%),
        radial-gradient(700px 500px at 10% 90%, rgba(37,99,235,.30), transparent 60%),
        linear-gradient(180deg, #0f172a 0%, #0f172a 100%);
    color: #fff;
    margin: 30px 0;
    border-radius: 36px;
}
.smk-showcase__row {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 60px;
    align-items: center;
}
.smk-showcase__row--reverse {
    grid-template-columns: 1.05fr 1fr;
}
.smk-showcase__row--reverse .smk-showcase__copy { order: 2; }
.smk-showcase__row--reverse .smk-showcase__media { order: 1; }
.smk-showcase__copy { padding: 20px 0; }
.smk-showcase__copy .smk-eyebrow { margin-bottom: 18px; }
.smk-showcase__media { position: relative; }

.smk-frame {
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(255, 255, 255, .65);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: var(--smk-shadow-3);
    transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.smk-frame:hover { transform: translateY(-6px); }
.smk-frame img { display: block; width: 100%; }
.smk-frame--violet {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
}
.smk-frame--float {
    position: absolute;
    right: -8%;
    bottom: -10%;
    width: 56%;
    z-index: 2;
    animation: smk-float-y 8s ease-in-out infinite;
}
.smk-frame--float.smk-frame--right { right: -8%; left: auto; }
.smk-showcase__row .smk-frame--float:not(.smk-frame--right) { left: -8%; right: auto; }

.smk-checklist {
    list-style: none;
    padding: 0;
    margin: 22px 0 28px;
    font-size: 15px;
    color: var(--smk-muted);
    line-height: 1.7;
}
.smk-checklist--light { color: rgba(255,255,255,.78); }
.smk-checklist li {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 0;
}
.smk-checklist li i {
    color: #10b981;
    font-size: 16px;
}
.smk-checklist--light li i { color: #34d399; }

.smk-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--smk-blue);
    font-weight: 600;
    text-decoration: none;
    transition: gap .25s ease;
}
.smk-link--light { color: #67e8f9; }
.smk-link:hover { gap: 14px; color: var(--smk-violet); }
.smk-link--light:hover { color: #fff; }

@media (max-width: 960px) {
    .smk-showcase__row,
    .smk-showcase__row--reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .smk-showcase__row--reverse .smk-showcase__copy,
    .smk-showcase__row--reverse .smk-showcase__media { order: initial; }
    .smk-frame--float { position: relative; right: auto; left: auto; bottom: auto; width: 80%; margin-top: -40px; margin-left: auto; }
    .smk-showcase--dark { border-radius: 24px; margin: 12px; }
}

/* =========================================================================
   MASCOTS
   ========================================================================= */
.smk-mascots {
    margin-top: 80px;
    text-align: center;
}
.smk-mascots__h {
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 30px;
}
.smk-mascots__row {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
}
.smk-mascot {
    width: 130px; height: 130px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
    transition: transform .4s cubic-bezier(.16,1,.3,1);
    position: relative;
    overflow: hidden;
    border: 4px solid rgba(255,255,255,.10);
    animation: smk-bob 6s ease-in-out infinite;
}
.smk-mascot:nth-child(1) { animation-delay: 0s; }
.smk-mascot:nth-child(2) { animation-delay: .4s; }
.smk-mascot:nth-child(3) { animation-delay: .8s; }
.smk-mascot:nth-child(4) { animation-delay: 1.2s; }
.smk-mascot:nth-child(5) { animation-delay: 1.6s; }
.smk-mascot:hover { transform: translateY(-10px) scale(1.05); }
.smk-mascot img { width: 100%; height: 100%; object-fit: cover; }
.smk-mascot--green  { background: linear-gradient(135deg, #34d399, #059669); }
.smk-mascot--orange { background: linear-gradient(135deg, #fb923c, #06b6d4); }
.smk-mascot--purple { background: linear-gradient(135deg, #06b6d4, #06b6d4); }
.smk-mascot--blue   { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.smk-mascot--red    { background: linear-gradient(135deg, #f87171, #dc2626); }
@keyframes smk-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* =========================================================================
   PAIR CARDS (PDF + File Manager)
   ========================================================================= */
.smk-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.smk-pair__card {
    background: rgba(255, 255, 255, .65);
    border-radius: 28px;
    padding: 40px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--smk-shadow-1);
    transition: transform .35s ease, box-shadow .35s ease;
}
.smk-pair__card:hover { transform: translateY(-6px); box-shadow: var(--smk-shadow-2); }
.smk-pair__card .smk-eyebrow { margin-bottom: 14px; }
.smk-pair__copy { margin-bottom: 24px; }
.smk-pair__card p { color: var(--smk-muted); margin: 0; font-size: 15px; }
.smk-pair__card img {
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(15,23,42,.18);
    transition: transform .5s ease;
}
.smk-pair__card:hover img { transform: scale(1.03); }
@media (max-width: 800px) { .smk-pair { grid-template-columns: 1fr; } }

/* =========================================================================
   HOW IT WORKS
   ========================================================================= */
.smk-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    counter-reset: step;
}
.smk-step {
    position: relative;
    padding: 32px 28px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(255, 255, 255, .65);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--smk-shadow-1);
    transition: transform .35s ease, box-shadow .35s ease;
}
.smk-step:hover { transform: translateY(-6px); box-shadow: var(--smk-shadow-2); }
.smk-step__num {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -.02em;
    background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 16px;
}
.smk-step h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
}
.smk-step p {
    color: var(--smk-muted);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}
@media (max-width: 900px) { .smk-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .smk-steps { grid-template-columns: 1fr; } }

/* =========================================================================
   PRICING — softens the plans partial inside the home page
   ========================================================================= */
.smk-pricing .smk-section__head { margin-bottom: 40px; }
.smk-pricing .container > .row,
.smk-pricing .container > .plans { margin: 0 auto; }

/* =========================================================================
   FAQ
   ========================================================================= */
.smk-faq__grid {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}
.smk-faq__item {
    background: rgba(255, 255, 255, .70);
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.smk-faq__item[open] {
    border-color: rgba(37, 99, 235, .22);
    box-shadow: var(--smk-shadow-1);
}
.smk-faq__item summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 24px;
    font-weight: 600;
    font-size: 16px;
    color: var(--smk-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.smk-faq__item summary::-webkit-details-marker { display: none; }
.smk-faq__icon {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(37, 99, 235, .10);
    color: var(--smk-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    transition: transform .3s ease, background .3s ease;
}
.smk-faq__item[open] .smk-faq__icon {
    transform: rotate(45deg);
    background: var(--smk-blue);
    color: #fff;
}
.smk-faq__body {
    padding: 0 24px 22px 24px;
    color: var(--smk-muted);
    font-size: 15px;
    line-height: 1.65;
}

/* =========================================================================
   FINAL CTA
   ========================================================================= */
.smk-final-cta {
    position: relative;
    border-radius: 32px;
    padding: 80px 40px;
    text-align: center;
    overflow: hidden;
    color: #fff;
    box-shadow: var(--smk-shadow-3);
}
.smk-final-cta__bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(800px 400px at 20% 0%, rgba(255,255,255,.18), transparent 60%),
        radial-gradient(700px 400px at 80% 100%, rgba(236,72,153,.30), transparent 60%),
        linear-gradient(135deg, #2563eb 0%, #06b6d4 60%, #06b6d4 100%);
    z-index: 0;
    pointer-events: none;
}
/* Lift the content above __bg WITHOUT also targeting __bg itself — the
   earlier rule used `> *` which kicked __bg into the normal flow and
   collapsed it to 0 height, leaving the white text on a white page. */
.smk-final-cta > *:not(.smk-final-cta__bg) { position: relative; z-index: 1; }
.smk-final-cta__h {
    font-size: clamp(30px, 4vw, 50px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 0 0 14px;
}
.smk-final-cta p {
    color: rgba(255,255,255,.85);
    font-size: 17px;
    margin: 0 0 28px;
}
.smk-final-cta .smk-hero__cta { justify-content: center; }

/* Marketing homepage uses wrapper.php directly (no narrow card column), so
   no wrapper overrides are needed here. Just make sure container is allowed
   the full breathing room the new sections expect. */
.smk-home .container {
    max-width: 1200px;
}
.smk-home .smk-hero__stage,
.smk-home .smk-stats__grid,
.smk-home .smk-grid--6,
.smk-home .smk-showcase__row,
.smk-home .smk-steps,
.smk-home .smk-pair {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.smk-showcase--dark .container { max-width: 1200px; }

/* ============================================================
   "Built differently" + "vs SurveyMonkey" landing page additions
   (added with the V1 positioning rewrite). Designed to drop in
   without conflicting with existing .smk-* tokens.
   ============================================================ */
.smk-section--tinted {
    background: linear-gradient(180deg, #f8f7ff 0%, #fff 100%);
    position: relative;
}
.smk-section--tinted::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(6, 182, 212,.06), transparent 50%),
                radial-gradient(circle at 20% 80%, rgba(37, 99, 235,.06), transparent 50%);
    pointer-events: none;
}
.smk-section--tinted > * { position: relative; }

/* Comparison table — purposely NOT a real <table> so it stacks
   beautifully on mobile (each row collapses into a card). */
.smk-vs {
    max-width: 1100px;
    margin: 32px auto 0;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 20px 50px rgba(15,23,42,.06);
    border: 1px solid #eef0f5;
}
.smk-vs__row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    align-items: center;
    border-top: 1px solid #f3f4f6;
    transition: background .15s;
}
.smk-vs__row:hover { background: #fafbff; }
.smk-vs__row:first-child { border-top: 0; }
.smk-vs__row--head {
    background: #111827;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.smk-vs__row--head:hover { background: #111827; }
.smk-vs__cell {
    padding: 18px 22px;
    font-size: 15px;
    line-height: 1.5;
    color: #374151;
}
.smk-vs__cell--axis {
    font-weight: 600;
    color: #111827;
    border-right: 1px solid #f3f4f6;
}
.smk-vs__row--head .smk-vs__cell--axis,
.smk-vs__row--head .smk-vs__cell--us,
.smk-vs__row--head .smk-vs__cell--them {
    color: #fff;
    border-right-color: rgba(255,255,255,.1);
}
.smk-vs__cell--us {
    background: linear-gradient(180deg, rgba(37, 99, 235,.04), rgba(37, 99, 235,.08));
    border-right: 1px solid #f3f4f6;
    font-weight: 500;
    color: #0f172a;
}
.smk-vs__row--head .smk-vs__cell--us {
    background: linear-gradient(180deg, rgba(37, 99, 235,.3), rgba(6, 182, 212,.3));
}
.smk-vs__yes      { color: #16a34a; margin-right: 6px; }
.smk-vs__no       { color: #ef4444; margin-right: 6px; opacity:.55; }
.smk-vs__partial  { color: #f59e0b; margin-right: 6px; }
.smk-vs__footer   { text-align: center; margin-top: 32px; }

/* Mobile collapse — each row becomes a stacked mini-card with
   labels above each value. The "Axis" label is implicit (it's
   the header of the card), the other two are prefixed. */
@media (max-width: 760px) {
    .smk-vs__row {
        grid-template-columns: 1fr;
        padding: 8px 0;
    }
    .smk-vs__row--head { display: none; }
    .smk-vs__cell {
        padding: 10px 18px;
        border-right: 0;
        background: transparent !important;
    }
    .smk-vs__cell--axis {
        font-size: 17px;
        padding-top: 14px;
        padding-bottom: 4px;
    }
    .smk-vs__cell--us::before,
    .smk-vs__cell--them::before {
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        margin-bottom: 2px;
    }
    .smk-vs__cell--us::before   { content: 'SurveyMaker'; color: #1d4ed8; }
    .smk-vs__cell--them::before { content: 'Legacy survey tools'; color: #9ca3af; }
}
/* End "Built differently" + "vs" additions */

/* ============================================================
   BENTO grid — asymmetric product layout. Hero tile spans 2x2,
   two medium tiles 1x2 each, four small tiles 1x1. Collapses
   to single-column on mobile.
   ============================================================ */
.smk-bento {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
    max-width: 1200px;
    margin: 32px auto 0;
}
.smk-bento__tile {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: 22px;
    color: #fff;
    text-decoration: none;
    transition: transform .35s cubic-bezier(.25,.8,.25,1), box-shadow .35s;
    box-shadow: 0 12px 40px rgba(15,23,42,.10);
    display: flex; flex-direction: column;
}
.smk-bento__tile:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 22px 60px rgba(15,23,42,.18);
    text-decoration: none; color: #fff;
}
.smk-bento__tile--hero      { grid-column: span 2; grid-row: span 2; padding: 32px; }
.smk-bento__tile--sm        { /* default 1x1 */ }
.smk-bento__tile:not(.smk-bento__tile--hero):not(.smk-bento__tile--sm) {
    grid-row: span 2; /* medium tiles span 2 rows like the hero */
}

/* Tile gradients (palette progression) */
.smk-bento__tile--indigo { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 60%, #1e3a8a 100%); }
.smk-bento__tile--violet { background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%); }
.smk-bento__tile--green  { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
.smk-bento__tile--amber  { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }
.smk-bento__tile--pink   { background: linear-gradient(135deg, #06b6d4 0%, #be185d 100%); }
.smk-bento__tile--cyan   { background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%); }
.smk-bento__tile--slate  { background: linear-gradient(135deg, #475569 0%, #1e293b 100%); }

.smk-bento__chip {
    display: inline-flex; align-items: center;
    padding: 5px 11px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    align-self: flex-start;
    margin-bottom: 14px;
    letter-spacing: .02em;
}
.smk-bento__newdot {
    width: 8px; height: 8px; border-radius: 50%; background: #fbbf24;
    box-shadow: 0 0 0 0 rgba(251,191,36,.7);
    margin-left: 8px; animation: smk-bento-pulse 1.6s infinite;
}
@keyframes smk-bento-pulse {
    0% { box-shadow: 0 0 0 0 rgba(251,191,36,.7); }
    70% { box-shadow: 0 0 0 8px rgba(251,191,36,0); }
    100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); }
}

.smk-bento__h     { font-size: 32px; font-weight: 800; line-height: 1.1; margin: 0 0 10px; color: #fff; letter-spacing: -.02em; }
.smk-bento__h--md { font-size: 24px; }
.smk-bento__h--sm { font-size: 18px; margin-bottom: 6px; }
.smk-bento__p     { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.85); margin: 0 0 14px; max-width: 340px; }
.smk-bento__p--sm { font-size: 13px; line-height: 1.5; max-width: none; margin: 0; }

.smk-bento__bullets { list-style: none; padding: 0; margin: 0 0 12px; }
.smk-bento__bullets li {
    font-size: 13.5px;
    margin: 6px 0;
    color: rgba(255,255,255,.92);
    display: flex; align-items: center;
}
.smk-bento__bullets i { color: #fff; opacity: .85; margin-right: 8px; }

.smk-bento__metric {
    margin-top: auto;
    background: rgba(0,0,0,.22);
    color: #fff;
    padding: 7px 12px;
    border-radius: 10px;
    align-self: flex-start;
    font-size: 13px;
}
.smk-bento__arrow {
    position: absolute; right: 22px; bottom: 22px;
    width: 38px; height: 38px;
    background: rgba(255,255,255,.18);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: transform .25s;
}
.smk-bento__tile:hover .smk-bento__arrow { transform: translateX(4px); background: rgba(255,255,255,.28); }

.smk-bento__art {
    position: absolute; right: -18px; bottom: -18px;
    width: 55%; max-width: 360px;
    transform: rotate(-5deg);
    opacity: .85;
    pointer-events: none;
}
.smk-bento__art img {
    width: 100%; border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,.30);
}
.smk-bento__art--surveys { right: -40px; bottom: -40px; }

/* Mobile — collapse to single column, all tiles auto-height */
@media (max-width: 900px) {
    .smk-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
    .smk-bento__tile--hero { grid-column: span 2; grid-row: auto; min-height: 340px; }
    .smk-bento__tile:not(.smk-bento__tile--hero):not(.smk-bento__tile--sm) { grid-row: auto; min-height: 220px; }
    .smk-bento__art { width: 45%; }
}
@media (max-width: 580px) {
    .smk-bento { grid-template-columns: 1fr; }
    .smk-bento__tile, .smk-bento__tile--hero { grid-column: span 1; min-height: 200px; }
    .smk-bento__art { display: none; }
    .smk-bento__h { font-size: 26px; }
}

/* ============================================================
   BUILT FOR (use-case cards) — dark section, 6 cards (3x2 on
   desktop, 2x3 on tablet, 1x6 on mobile)
   ============================================================ */
.smk-section--dark { background: #0b1020; color: #fff; position: relative; overflow: hidden; }
.smk-section--dark::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(37, 99, 235,.18), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(236,72,153,.14), transparent 40%);
    pointer-events: none;
}
.smk-section--dark > * { position: relative; }

.smk-bf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1200px;
    margin: 32px auto 0;
}
.smk-bf-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 22px;
    transition: all .3s;
}
.smk-bf-card:hover {
    border-color: rgba(37, 99, 235,.45);
    background: rgba(37, 99, 235,.08);
    transform: translateY(-3px);
}
.smk-bf-card__ico {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #fff;
    margin-bottom: 14px;
}
.smk-bf-card h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: #fff; }
.smk-bf-card p  { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.7); margin: 0 0 12px; }
.smk-bf-card__tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #a5b4fc;
    background: rgba(37, 99, 235,.14);
    border: 1px solid rgba(37, 99, 235,.3);
    padding: 4px 10px;
    border-radius: 999px;
}

@media (max-width: 900px) { .smk-bf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .smk-bf-grid { grid-template-columns: 1fr; } }
/* End BENTO + BUILT FOR additions */

/* ============================================================
   HERO v3 — split asymmetric (text left, AI demo card right).
   Overrides the v1 centered-stage layout. All keyed under
   .smk-hero--v3 so the v1 layout is preserved if needed.
   ============================================================ */
.smk-hero--v3 { padding: 110px 0 80px; overflow: hidden; position: relative; }
.smk-hero--v3 .smk-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
}

.smk-hero--v3 .smk-hero__copy { max-width: 600px; }
.smk-hero--v3 .smk-hero__title--v3 {
    font-size: clamp(40px, 5.2vw, 72px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 18px 0 18px;
    color: #0b1020;
}
.smk-hero--v3 .smk-hero__title--v3 .smk-grad-text {
    display: block;
    background: linear-gradient(135deg, #2563eb 0%, #06b6d4 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.smk-hero--v3 .smk-hero__sub {
    font-size: 18px;
    line-height: 1.6;
    color: #4b5563;
    max-width: 540px;
    margin-bottom: 32px;
}
.smk-hero--v3 .smk-hero__cta { margin-bottom: 22px; }
.smk-hero--v3 .smk-hero__meta {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: #6b7280;
}

/* ============== Demo card — the right column ============== */
.smk-hero--v3 .smk-hero__demo {
    position: relative;
    min-height: 460px;
}
.smk-demo {
    position: relative;
    background: #fff;
    border-radius: 16px;
    box-shadow:
        0 30px 60px rgba(15, 23, 42, .12),
        0 6px 18px rgba(37, 99, 235, .08);
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .04);
    z-index: 2;
    /* Subtle hover lift only on desktop */
    transition: transform .4s cubic-bezier(.25,.8,.25,1);
}
@media (hover: hover) { .smk-demo:hover { transform: translateY(-3px); } }

.smk-demo__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
    font-size: 12px;
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.smk-demo__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.smk-demo__dot--r { background: #ef4444; }
.smk-demo__dot--y { background: #f59e0b; }
.smk-demo__dot--g { background: #10b981; }
.smk-demo__path  { margin-left: 10px; opacity: .8; }

.smk-demo__prompt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px dashed #eef2f7;
    background: linear-gradient(90deg, rgba(37, 99, 235,.04), transparent);
}
.smk-demo__prompt-ico { color: #f59e0b; }
.smk-demo__prompt-text { font-size: 14px; color: #1f2937; font-weight: 500; }
.smk-demo__caret {
    display: inline-block;
    width: 2px; height: 16px;
    background: #2563eb;
    margin-left: 2px;
    vertical-align: -3px;
    animation: smk-caret 1.1s steps(1) infinite;
}
@keyframes smk-caret { 50% { opacity: 0; } }

.smk-demo__status {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    background: #ecfeff;
    color: #0e7490;
    font-size: 12.5px;
    font-weight: 500;
    border-bottom: 1px solid #ecfeff;
}
.smk-demo__status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #2563eb;
    animation: smk-pulse 1.4s ease-in-out infinite;
}
@keyframes smk-pulse {
    0%, 100% { transform: scale(1); opacity: .9; box-shadow: 0 0 0 0 rgba(6, 182, 212,.4); }
    50%      { transform: scale(1.25); opacity: 1; box-shadow: 0 0 0 6px rgba(6, 182, 212,0); }
}

/* Each question card animates in on a stagger */
.smk-demo__q {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #f3f4f6;
    opacity: 0;
    transform: translateY(8px);
    animation: smk-q-in .55s ease-out forwards;
}
.smk-demo__q--1 { animation-delay: .6s; }
.smk-demo__q--2 { animation-delay: 1.4s; }
.smk-demo__q--3 { animation-delay: 2.2s; }
@keyframes smk-q-in {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.smk-demo__q-num {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.smk-demo__q-body { flex: 1; }
.smk-demo__q-title { font-size: 14px; font-weight: 600; color: #0b1020; margin-bottom: 6px; }

.smk-demo__q-stars { display: flex; gap: 4px; color: #f59e0b; font-size: 14px; }
.smk-demo__q-stars .fa-star.far { color: #d1d5db; }

.smk-demo__q-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.smk-demo__opt {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f9fafb;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}
.smk-demo__opt.is-pick {
    background: #ecfeff;
    color: #155e75;
    border-color: #67e8f9;
    font-weight: 600;
}

.smk-demo__q-text {
    font-size: 13px;
    color: #6b7280;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px 10px;
    font-style: italic;
}

.smk-demo__live {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(90deg, #16a34a08, transparent);
    border-top: 1px solid #f3f4f6;
}
.smk-demo__live-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, .5);
    animation: smk-pulse-g 1.6s ease-in-out infinite;
}
@keyframes smk-pulse-g {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); }
    70%      { box-shadow: 0 0 0 10px rgba(22,163,74,0); }
}
.smk-demo__live-text { font-size: 12.5px; color: #166534; font-weight: 500; }
.smk-demo__live-text strong { color: #14532d; font-weight: 700; }

/* Floating badges around the demo card */
.smk-demo__float {
    position: absolute;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    z-index: 3;
    border: 1px solid rgba(15,23,42,.05);
}
.smk-demo__float i { color: #2563eb; }
.smk-demo__float--a { top: -18px; left: -22px; animation: smk-bob 5s ease-in-out infinite; }
.smk-demo__float--b { bottom: 12px; right: -28px; animation: smk-bob 5s ease-in-out infinite reverse; }
@keyframes smk-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Mobile — single column, demo below */
@media (max-width: 1024px) {
    .smk-hero--v3 .smk-hero__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .smk-hero--v3 .smk-hero__copy { max-width: 720px; margin: 0 auto; text-align: center; }
    .smk-hero--v3 .smk-hero__sub { margin-left: auto; margin-right: auto; }
    .smk-hero--v3 .smk-hero__cta { justify-content: center; }
    .smk-hero--v3 .smk-hero__meta { justify-content: center; }
    .smk-hero--v3 .smk-hero__title--v3 .smk-grad-text { display: inline; }
    .smk-demo__float--a { left: 8px; top: -16px; }
    .smk-demo__float--b { right: 8px; bottom: 8px; }
}
@media (max-width: 580px) {
    .smk-hero--v3 { padding: 70px 0 50px; }
    .smk-hero--v3 .smk-hero__title--v3 { font-size: clamp(34px, 8vw, 48px); }
    .smk-demo__float { display: none; }
}
/* End HERO v3 */

/* ============================================================
   HERO v4 — centered copy + huge tilted product screenshot.
   Uses the new v2_home.png screenshot with perspective, glow,
   and four floating callout chips anchored to the corners.
   Pure CSS animation, no JS dependency for the visuals.
   ============================================================ */
.smk-hero--v4 {
    position: relative;
    padding: 96px 0 40px;
    text-align: center;
    overflow: hidden;
}
.smk-hero--v4 .smk-hero__center {
    max-width: 880px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.smk-hero--v4 .smk-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 22px;
    padding: 6px 14px;
    background: rgba(37, 99, 235, 0.10);
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 999px;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.smk-hero--v4 .smk-hero__eyebrow .smk-eyebrow__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 0 rgba(37, 99, 235,.6);
    animation: smk-v4-dot 1.8s ease-out infinite;
}
@keyframes smk-v4-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235,.6); }
    70%      { box-shadow: 0 0 0 8px rgba(37, 99, 235,0); }
}

.smk-hero__title--v4 {
    font-size: clamp(44px, 6vw, 84px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin: 0 0 20px;
    color: #0b1020;
}
.smk-hero__title-line { display: block; }

/* Shimmer / gradient breath on the highlighted line */
.smk-grad-text--shimmer {
    background: linear-gradient(110deg,
        #2563eb 0%,
        #06b6d4 22%,
        #06b6d4 44%,
        #f59e0b 66%,
        #06b6d4 78%,
        #06b6d4 92%,
        #2563eb 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: smk-v4-shimmer 6s linear infinite;
}
@keyframes smk-v4-shimmer {
    0%   { background-position:   0% 50%; }
    100% { background-position: 220% 50%; }
}

.smk-hero__sub--v4 {
    max-width: 640px;
    margin: 0 auto 32px;
    font-size: 18px;
    line-height: 1.6;
    color: #4b5563;
}

.smk-hero--v4 .smk-hero__cta {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.smk-btn--lift {
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.30);
}
.smk-btn--lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 44px rgba(37, 99, 235, 0.45);
}

.smk-hero__meta--center {
    justify-content: center;
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: #6b7280;
}

/* ---------- The big product image below the copy ---------- */
.smk-hero__stage--v4 {
    position: relative;
    max-width: 1180px;
    margin: 60px auto 0;
    padding: 0 24px;
    perspective: 1400px;
    z-index: 1;
}
.smk-hero__glow {
    position: absolute;
    left: 10%; right: 10%;
    top: 30%;
    height: 60%;
    background: radial-gradient(ellipse at center,
        rgba(37, 99, 235,.35) 0%,
        rgba(236,72,153,.18) 35%,
        transparent 70%);
    filter: blur(60px);
    z-index: 0;
    animation: smk-v4-glow 7s ease-in-out infinite alternate;
}
@keyframes smk-v4-glow {
    0%   { opacity: .6; transform: scale(1) translateY(0); }
    100% { opacity: 1;  transform: scale(1.05) translateY(-8px); }
}

.smk-hero__product {
    position: relative;
    z-index: 1;
    transform: rotateX(8deg) rotateY(-1deg);
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.25,.8,.25,1);
    animation: smk-v4-float 7s ease-in-out infinite alternate;
}
@media (hover: hover) {
    .smk-hero__product:hover { transform: rotateX(2deg) rotateY(0deg); }
}
@keyframes smk-v4-float {
    0%   { transform: rotateX(8deg) rotateY(-1deg) translateY(0); }
    100% { transform: rotateX(8deg) rotateY(-1deg) translateY(-10px); }
}
.smk-hero__product-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.20),
        0 8px 20px rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

/* Floating callout chips */
.smk-hero__chip {
    position: absolute;
    background: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
    border: 1px solid rgba(15, 23, 42, 0.05);
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    z-index: 2;
    animation: smk-v4-bob 5s ease-in-out infinite;
    backdrop-filter: blur(8px);
}
.smk-hero__chip small {
    display: block;
    width: 100%;
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
    margin-top: 2px;
}
.smk-hero__chip--tl { top: -22px;   left: -18px;   animation-delay: 0s;   }
.smk-hero__chip--tr { top: -22px;   right: -18px;  animation-delay: 1.5s; }
.smk-hero__chip--bl { bottom: 8%;   left: -28px;   animation-delay: 0.7s; }
.smk-hero__chip--br { bottom: 14%;  right: -32px;  animation-delay: 2.2s; }
@keyframes smk-v4-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.smk-hero__chip-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #2563eb; margin-right: 4px;
}
.smk-hero__chip-dot--pulse {
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239,68,68,.6);
    animation: smk-v4-pulse 1.6s ease-out infinite;
}
@keyframes smk-v4-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
    70%      { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
}
.smk-hero__chip-ico { margin-right: 4px; font-size: 14px; }
.smk-hero__chip-ico--yellow { color: #f59e0b; }
.smk-hero__chip-ico--violet { color: #2563eb; }
.smk-hero__chip-ico--green  { color: #16a34a; }

/* Hide the chips on mobile — they overlap the image awkwardly */
@media (max-width: 880px) {
    .smk-hero__chip { display: none; }
    .smk-hero__stage--v4 { padding: 0 12px; margin-top: 40px; }
    .smk-hero__product { transform: none; animation: none; }
    .smk-hero--v4 { padding: 56px 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .smk-grad-text--shimmer { animation: none; }
    .smk-hero__product, .smk-hero__chip, .smk-hero__glow { animation: none; }
    .smk-hero__product { transform: none; }
}

/* ============================================================
   THEMES palette grid — 10 live colored cards + Custom slot,
   plus a strip of three real survey screenshots underneath.
   ============================================================ */
.smk-themes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    max-width: 1100px;
    margin: 40px auto 36px;
}
.smk-theme-card {
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
    transition: transform .25s, box-shadow .25s;
    border: 1px solid rgba(15, 23, 42, 0.04);
    opacity: 0;
    animation: smk-theme-in .55s ease-out forwards;
}
@keyframes smk-theme-in {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}
.smk-theme-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 40px rgba(15, 23, 42, 0.12);
}
.smk-theme-card__label {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 10px;
}
.smk-theme-card__chips {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.smk-theme-card__chip {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smk-theme-card--custom {
    background: linear-gradient(135deg, #fafbff, #f0f0ff);
    border: 1px dashed #bfdbfe;
}
.smk-theme-card--custom .smk-theme-card__label { color: #111827; }
.smk-theme-card__custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 0;
    color: #2563eb;
    font-weight: 600;
}
.smk-theme-card__custom i { font-size: 28px; margin-bottom: 6px; }

.smk-themes-peek {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 960px;
    margin: 24px auto 0;
}
.smk-themes-peek__card {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
    background: #fff;
    transition: transform .3s, box-shadow .3s;
}
.smk-themes-peek__card:hover {
    transform: translateY(-4px) rotate(-1deg);
    box-shadow: 0 28px 50px rgba(15, 23, 42, 0.16);
}
.smk-themes-peek__card img {
    display: block; width: 100%; height: auto;
}
.smk-themes-peek__card--a { transform: rotate(-1.5deg); }
.smk-themes-peek__card--b { transform: rotate( 0deg);    }
.smk-themes-peek__card--c { transform: rotate( 1.5deg);  }
@media (max-width: 720px) {
    .smk-themes-peek { grid-template-columns: 1fr; }
    .smk-themes-peek__card, .smk-themes-peek__card--a, .smk-themes-peek__card--b, .smk-themes-peek__card--c {
        transform: none;
    }
}
/* End HERO v4 + THEMES additions */

/* ============================================================
   POLISH PASS — marquee, animated CTA, bento upgrades, smoother
   transitions. Layered on top of v4 so nothing earlier breaks.
   ============================================================ */

/* ---- Trusted-by marquee ---- */
.smk-marquee {
    padding: 20px 0 6px;
    overflow: hidden;
    position: relative;
}
.smk-marquee__label {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 14px;
}
.smk-marquee__viewport {
    position: relative;
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    overflow: hidden;
}
.smk-marquee__track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: smk-marq 40s linear infinite;
}
@keyframes smk-marq {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.smk-marquee__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.smk-marquee__chip i { color: #2563eb; }
@media (max-width: 580px) { .smk-marquee { display: none; } }

/* ---- Stats: bigger emphasis, gradient on the numbers ---- */
.smk-stats {
    padding: 56px 0 40px;
}
.smk-stat__num {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    letter-spacing: -.02em;
    background: linear-gradient(135deg, #0b1020 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    line-height: 1.05;
}
.smk-stat__label {
    font-size: 13px;
    color: #6b7280;
    margin-top: 6px;
    font-weight: 500;
}

/* ---- Bento upgrade: gradient border ring on hover, sharper shadows ---- */
.smk-bento__tile {
    position: relative;
    will-change: transform;
}
.smk-bento__tile::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 23px;
    padding: 1px;
    background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.smk-bento__tile:hover::before { opacity: 1; }
.smk-bento__tile:hover {
    box-shadow:
        0 30px 70px rgba(15, 23, 42, 0.20),
        0 8px 20px rgba(37, 99, 235, 0.16);
}

/* ---- Final CTA: animated gradient background + pulse glow ---- */
.smk-final-cta {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 80px 32px;
    text-align: center;
    color: #fff;
    isolation: isolate;
}
.smk-final-cta::before {
    content: '';
    position: absolute;
    inset: -30%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        #2563eb 0deg,
        #06b6d4 60deg,
        #06b6d4 120deg,
        #f59e0b 180deg,
        #10b981 240deg,
        #06b6d4 300deg,
        #2563eb 360deg
    );
    filter: blur(40px);
    z-index: -2;
    opacity: .55;
    animation: smk-final-spin 22s linear infinite;
}
.smk-final-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15,23,42,.85) 0%, rgba(49,46,129,.78) 60%, rgba(15,23,42,.85) 100%);
    z-index: -1;
}
@keyframes smk-final-spin {
    0%   { transform: rotate(0deg);   }
    100% { transform: rotate(360deg); }
}
.smk-final-cta__bg { display: none; } /* hide any pre-existing legacy bg */
.smk-final-cta__h {
    font-size: clamp(32px, 4.5vw, 56px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 0 0 14px;
    color: #fff;
}
.smk-final-cta p {
    font-size: 17px;
    color: rgba(255,255,255,0.85);
    margin: 0 0 28px;
    max-width: 600px;
    margin-left: auto; margin-right: auto;
}
.smk-final-cta .smk-btn--primary {
    background: #fff;
    color: #1d4ed8;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .35);
    animation: smk-cta-pulse 3s ease-in-out infinite;
}
@keyframes smk-cta-pulse {
    0%, 100% { transform: translateY(0);    box-shadow: 0 12px 36px rgba(0,0,0,.35); }
    50%      { transform: translateY(-3px); box-shadow: 0 22px 54px rgba(0,0,0,.45); }
}
.smk-final-cta .smk-btn--primary:hover {
    background: #f9fafb;
    color: #1d4ed8;
    animation: none;
    transform: translateY(-3px);
}

/* ---- Showcase frames: 3D tilt + glow ---- */
.smk-frame {
    will-change: transform;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
}
.smk-frame:hover {
    box-shadow:
        0 36px 80px rgba(15, 23, 42, 0.22),
        0 0 60px rgba(37, 99, 235, 0.18);
}

/* ---- Section transitions: softer background bands ---- */
.smk-showcase + .smk-showcase {
    /* nothing — keep existing background flow */
}

/* ---- Section header spacing tightened for rhythm ---- */
.smk-section__head {
    margin-bottom: 36px;
}
.smk-section__head .smk-h2 {
    margin-top: 12px;
}

/* ---- FAQ items: animated chevron, smoother open ---- */
.smk-faq__item {
    border-radius: 12px;
    transition: background .2s, box-shadow .2s;
}
.smk-faq__item[open] {
    background: rgba(37, 99, 235, 0.04);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.08);
}
.smk-faq__item summary { transition: color .2s; }
.smk-faq__item summary::-webkit-details-marker { display: none; }
.smk-faq__icon { transition: transform .25s ease; }
.smk-faq__item[open] .smk-faq__icon { transform: rotate(45deg); color: #2563eb; }

/* ---- Headers: top blur scroll background for the hero ---- */
.smk-home { scroll-behavior: smooth; }

/* End POLISH PASS */

/* =====================================================================
   POLISH PASS V2 — dramatic landing-page enhancements
   - Hero word rotator + animated caret
   - Floating particle field over hero
   - Magnetic CTA with sheen sweep
   - Live activity ticker cards
   - SVG section dividers
   - Mascot wiggle on hover
   - Interactive product switcher
   ===================================================================== */

/* ---- Hero rotating sub-line ----------------------------------------- */
.smk-hero__rotline {
    margin-top: 14px;
    font-size: clamp(16px, 2.4vw, 22px);
    color: #4b5563;
    display: inline-flex;
    align-items: baseline;
    gap: .35em;
    line-height: 1.4;
}
.smk-hero__rotline-prefix { color: #6b7280; }

.smk-rotator {
    display: inline-block;
    position: relative;
    min-width: 7.5ch;
    height: 1.3em;
    text-align: left;
    vertical-align: baseline;
    overflow: hidden;
}
.smk-rotator__word {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity .5s cubic-bezier(.22,.61,.36,1),
                transform .5s cubic-bezier(.22,.61,.36,1);
    /* Each word gets its OWN gradient. Cannot inherit from a parent
       .smk-grad-text because background-clip:text doesn't cascade. */
    font-weight: 700;
    background: linear-gradient(120deg, #2563eb 0%, #06b6d4 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.smk-rotator__word.is-active {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .smk-rotator__word { transition: none; }
}

/* ---- Hero floating particle field ----------------------------------- */
.smk-hero__particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.smk-particle {
    position: absolute;
    left: var(--p-x);
    bottom: -20px;
    width:  var(--p-s);
    height: var(--p-s);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235,.85) 0%, rgba(167,139,250,.45) 60%, transparent 100%);
    opacity: var(--p-o);
    animation: smk-particle-rise var(--p-d) linear infinite;
    animation-delay: var(--p-delay);
    filter: blur(.5px);
}
@keyframes smk-particle-rise {
    0%   { transform: translate3d(0, 0, 0)   scale(.6); opacity: 0; }
    8%   {                                              opacity: var(--p-o); }
    50%  { transform: translate3d(20px, -50vh, 0) scale(1); }
    92%  {                                              opacity: var(--p-o); }
    100% { transform: translate3d(-10px, -110vh, 0) scale(.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .smk-particle { display: none; } }

/* Make sure hero content sits above particles. */
.smk-hero__center, .smk-hero__stage { position: relative; z-index: 1; }

/* ---- Magnetic CTA with sheen sweep ---------------------------------- */
.smk-btn--magnet {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.smk-btn__inner {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25em;
    transform: translateZ(0);
    will-change: transform;
}
.smk-btn__sheen {
    position: absolute;
    top: 0; left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
    transform: skewX(-22deg);
    transition: left .65s cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
}
.smk-btn--magnet:hover .smk-btn__sheen { left: 130%; }

/* ---- Live activity ticker ------------------------------------------- */
.smk-livefeed {
    padding: 24px 0 8px;
}
.smk-livefeed__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #6b7280;
}
.smk-livefeed__pulse {
    position: relative;
    width: 12px; height: 12px;
}
.smk-livefeed__pulse-dot {
    position: absolute; inset: 3px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16,185,129,.18);
}
.smk-livefeed__pulse-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(16,185,129,.5);
    animation: smk-pulse-ring 1.6s ease-out infinite;
}
@keyframes smk-pulse-ring {
    0%   { transform: scale(.6); opacity: .9; }
    100% { transform: scale(2.4); opacity: 0; }
}
.smk-livefeed__label    { font-weight: 600; color: #111827; }
.smk-livefeed__sublabel { color: #9ca3af; }

.smk-livefeed__stage {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow: hidden;
    min-height: 64px;
    padding: 4px 2px;
}
.smk-livefeed__card {
    flex: 1 1 0;
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
    opacity: 0;
    transform: translateX(40px) scale(.96);
    transition: transform .45s cubic-bezier(.22,.61,.36,1),
                opacity .45s ease;
}
.smk-livefeed__card.is-in  { opacity: 1; transform: translateX(0) scale(1); }
.smk-livefeed__card.is-out { opacity: 0; transform: translateX(-30px) scale(.96); }

.smk-livefeed__card-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #eff6ff, #ecfeff);
    color: #2563eb;
    font-size: 13px;
    flex-shrink: 0;
}
.smk-livefeed__card-body {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    font-size: 13px;
    color: #111827;
    min-width: 0;
}
.smk-livefeed__card-target {
    color: #1d4ed8;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smk-livefeed__card-meta {
    color: #9ca3af;
    font-size: 11px;
    margin-top: 1px;
}
.smk-livefeed__card-tick {
    margin-left: auto;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #d1fae5;
    color: #047857;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

@media (max-width: 760px) {
    .smk-livefeed__stage { flex-wrap: wrap; }
    .smk-livefeed__card  { flex: 1 1 calc(50% - 10px); min-width: 0; }
}

/* ---- SVG section dividers ------------------------------------------- */
.smk-divider {
    line-height: 0;
    margin: 0;
    padding: 0;
    display: block;
}
.smk-divider svg {
    display: block;
    width: 100%;
    height: 60px;
}
@media (min-width: 960px) { .smk-divider svg { height: 80px; } }

/* ---- Mascot wiggle on hover ----------------------------------------- */
.smk-mascot--wiggle {
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
    cursor: pointer;
}
.smk-mascot--wiggle:hover {
    animation: smk-mascot-wiggle .6s ease-in-out;
}
.smk-mascot--wiggle img {
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.smk-mascot--wiggle:hover img {
    transform: scale(1.1) translateY(-4px);
}
@keyframes smk-mascot-wiggle {
    0%   { transform: rotate(0); }
    20%  { transform: rotate(-8deg); }
    40%  { transform: rotate(8deg); }
    60%  { transform: rotate(-5deg); }
    80%  { transform: rotate(4deg); }
    100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
    .smk-mascot--wiggle:hover,
    .smk-mascot--wiggle:hover img { animation: none; transform: none; }
}

/* ---- Interactive product switcher ----------------------------------- */
.smk-switcher-section { padding-top: 30px; padding-bottom: 60px; }

.smk-switcher__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 28px;
}
.smk-switcher__chip {
    appearance: none;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.smk-switcher__chip:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    transform: translateY(-2px);
}
.smk-switcher__chip.is-active {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 22px rgba(37, 99, 235, .35);
}
.smk-switcher__chip.is-active i { color: #fff; }

.smk-switcher__stage {
    position: relative;
    min-height: 460px;
}
.smk-switcher__panel {
    display: none;
    grid-template-columns: 1fr 1.4fr;
    gap: 48px;
    align-items: center;
    animation: smk-switcher-pop .45s cubic-bezier(.22,.61,.36,1);
}
.smk-switcher__panel.is-active { display: grid; }
@media (max-width: 880px) {
    .smk-switcher__panel { grid-template-columns: 1fr; gap: 24px; }
}
@keyframes smk-switcher-pop {
    0%   { opacity: 0; transform: translateY(20px) scale(.985); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.smk-switcher__copy h3 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.smk-switcher__copy p {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.55;
    margin: 0 0 18px;
}
.smk-switcher__frame {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow:
        0 30px 60px rgba(15, 23, 42, .12),
        0 12px 24px rgba(15, 23, 42, .08);
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    position: relative;
    transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
    transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.smk-switcher__frame:hover {
    transform: perspective(1400px) rotateY(0) rotateX(0);
}
.smk-switcher__frame::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 28px;
    background: linear-gradient(180deg, rgba(0,0,0,.05), transparent);
    z-index: 1;
    pointer-events: none;
}
.smk-switcher__frame img {
    width: 100%;
    height: auto;
    display: block;
}
@media (prefers-reduced-motion: reduce) {
    .smk-switcher__panel { animation: none; }
    .smk-switcher__frame { transform: none; }
}

/* End POLISH PASS V2 */
/* End MARKETING HOMEPAGE */

/* ==========================================================================
   ████  PREMIUM UPGRADE 2026  ████
   Apple / Voiceflow / GitHub Universe / CodePen visual language.
   Adds: aurora mesh bg, dot-grid + noise overlays, mouse-spotlight on
   bento tiles, glowing gradient borders, brand-logo trust strip,
   cursor halo, refined display typography, dramatic dark-hero shell.
   ALL ADDITIVE — overrides earlier rules where needed via higher specificity
   (`.smk-home.smk-home`) so we don't have to edit the existing 9000+ lines.
   ========================================================================== */

/* --- 1. Body shell: subtle dot-grid + soft mesh that runs the whole page --- */
.smk-home.smk-home {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(1200px 700px at 85% -120px, rgba(6, 182, 212, .14), transparent 60%),
        radial-gradient(900px 700px at -10% 240px, rgba(37, 99, 235, .16), transparent 60%),
        radial-gradient(700px 500px at 50% 110%, rgba(236, 72, 153, .10), transparent 65%),
        linear-gradient(180deg, #fafbff 0%, #f3f5fc 100%);
}
.smk-home.smk-home::before {
    /* dot-grid overlay (GitHub / Linear) */
    content: "";
    position: fixed;
    inset: 0;
    background-image: radial-gradient(rgba(15, 23, 42, .07) 1px, transparent 1px);
    background-size: 26px 26px;
    background-position: 0 0;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 35%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 35%, transparent 80%);
}
/* Stack content above the dot-grid pseudo-element, but DON'T touch elements
   like .smk-cursor-halo that need position:fixed. Scope to actual content
   wrappers. */
.smk-home.smk-home > section,
.smk-home.smk-home > footer { position: relative; z-index: 1; }

/* --- 2. HERO becomes a "stage": dark cinematic block with aurora --- */
.smk-home .smk-hero.smk-hero--v4 {
    position: relative;
    padding: 110px 0 90px;
    overflow: hidden;
    background:
        radial-gradient(900px 600px at 18% 12%, rgba(37, 99, 235, .35), transparent 60%),
        radial-gradient(700px 600px at 82% 18%, rgba(236, 72, 153, .28), transparent 60%),
        radial-gradient(900px 700px at 50% 100%, rgba(34, 211, 238, .22), transparent 60%),
        linear-gradient(180deg, #0a0e1f 0%, #0b1228 55%, #0a0e1f 100%);
    color: #fff;
    border-bottom-left-radius: 36px;
    border-bottom-right-radius: 36px;
    margin: 0 12px;
    box-shadow: 0 40px 80px -40px rgba(15, 23, 42, .55);
}

/* Aurora animated mesh layer */
.smk-home .smk-hero--v4::before {
    content: "";
    position: absolute;
    inset: -20% -10% -20% -10%;
    background:
        radial-gradient(circle at 20% 30%, rgba(37, 99, 235, .55), transparent 38%),
        radial-gradient(circle at 80% 25%, rgba(236, 72, 153, .42), transparent 36%),
        radial-gradient(circle at 30% 80%, rgba(56, 189, 248, .35), transparent 38%),
        radial-gradient(circle at 75% 75%, rgba(6, 182, 212, .35), transparent 36%);
    filter: blur(60px);
    opacity: .9;
    animation: smk-aurora 22s ease-in-out infinite alternate;
    z-index: 0;
    pointer-events: none;
}
@keyframes smk-aurora {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-3%, 2%, 0) scale(1.06); }
    100% { transform: translate3d(2%, -3%, 0) scale(1.04); }
}

/* Subtle grid + noise on top of the aurora */
.smk-home .smk-hero--v4::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 75% 75% at 50% 35%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 35%, #000 30%, transparent 75%);
    z-index: 0;
    pointer-events: none;
}

/* Hero content sits ABOVE the layers */
.smk-home .smk-hero--v4 .container,
.smk-home .smk-hero--v4 .smk-hero__stage--v4,
.smk-home .smk-hero--v4 .smk-hero__particles { position: relative; z-index: 2; }

/* Re-skin hero text for dark stage */
.smk-home .smk-hero--v4 .smk-hero__title--v4 {
    font-size: clamp(48px, 7.6vw, 104px);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: .98;
    color: #fff;
    text-shadow: 0 4px 30px rgba(15, 23, 42, .35);
}
.smk-home .smk-hero--v4 .smk-hero__title-line { display: block; }
.smk-home .smk-hero--v4 .smk-hero__sub--v4 {
    color: rgba(255,255,255,.75);
    max-width: 700px;
    font-size: 19px;
}
.smk-home .smk-hero--v4 .smk-hero__meta--center { color: rgba(255,255,255,.65); }
.smk-home .smk-hero--v4 .smk-hero__meta--center span i.text-success { color: #4ade80 !important; }

/* Eyebrow becomes a "What's new" link-pill (Vercel / Linear) */
.smk-home .smk-hero--v4 .smk-hero__eyebrow {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.18);
    color: #e2e8f0;
    box-shadow: 0 6px 18px rgba(37, 99, 235,.20), inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.smk-home .smk-hero--v4 .smk-hero__eyebrow .smk-eyebrow__dot { background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); }

/* CTA: primary button gets a glow + sheen */
.smk-home .smk-hero--v4 .smk-btn--primary {
    background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
    box-shadow:
        0 18px 40px rgba(37, 99, 235, .55),
        inset 0 1px 0 rgba(255,255,255,.25);
    position: relative;
    overflow: hidden;
}
.smk-home .smk-hero--v4 .smk-btn--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.40) 50%, transparent 70%);
    transform: translateX(-110%);
    animation: smk-sheen-loop 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes smk-sheen-loop {
    0%   { transform: translateX(-110%); }
    55%  { transform: translateX(110%); }
    100% { transform: translateX(110%); }
}
.smk-home .smk-hero--v4 .smk-btn--ghost {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.smk-home .smk-hero--v4 .smk-btn--ghost:hover {
    background: rgba(255,255,255,.14);
    color: #fff;
}

/* Hero "rotline" prefix text on dark bg */
.smk-home .smk-hero--v4 .smk-hero__rotline-prefix { color: rgba(255,255,255,.55); }

/* Product image — frame it like a real macOS window */
.smk-home .smk-hero--v4 .smk-hero__product {
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    padding: 10px 10px 0;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow:
        0 60px 120px -30px rgba(15, 23, 42, .80),
        0 24px 60px -10px rgba(37, 99, 235, .35),
        inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.smk-home .smk-hero--v4 .smk-hero__product::before {
    /* traffic-light dots */
    content: "";
    position: absolute;
    top: 14px; left: 22px;
    width: 52px; height: 12px;
    background:
        radial-gradient(circle at 6px 6px, #ff5f57 5px, transparent 5px),
        radial-gradient(circle at 22px 6px, #febc2e 5px, transparent 5px),
        radial-gradient(circle at 38px 6px, #28c840 5px, transparent 5px);
    z-index: 5;
    pointer-events: none;
    opacity: .9;
}
.smk-home .smk-hero--v4 .smk-hero__product-img {
    border-radius: 10px;
    border: 0;
    box-shadow: none;
    margin-top: 22px;
}

/* Floating chips — re-style for dark bg with conic-gradient border */
.smk-home .smk-hero--v4 .smk-hero__chip {
    background: rgba(15, 23, 42, .72);
    color: #fff;
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.smk-home .smk-hero--v4 .smk-hero__chip small { color: rgba(255,255,255,.55); }

/* --- 3. TRUST STRIP — under-the-hero "as used by" logo row --- */
.smk-trust {
    margin: 28px auto 0;
    padding: 28px 16px 8px;
    max-width: 1120px;
    text-align: center;
}
.smk-trust__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-bottom: 22px;
}
.smk-trust__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 5vw, 64px);
    flex-wrap: wrap;
}
.smk-trust__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.78);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    opacity: .8;
    transition: opacity .25s ease, transform .25s ease;
}
.smk-trust__logo:hover { opacity: 1; transform: translateY(-2px); }
.smk-trust__logo i { font-size: 26px; }
.smk-trust__logo--mono { font-family: 'SF Mono', 'JetBrains Mono', monospace; letter-spacing: -.02em; }

/* --- 4. BENTO tiles: mouse-tracking spotlight + conic gradient border --- */
.smk-home .smk-bento__tile {
    position: relative;
    isolation: isolate;
    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        box-shadow .35s ease;
}
.smk-home .smk-bento__tile::before {
    /* spotlight layer follows the mouse via --mx/--my (set by JS) */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        320px circle at var(--mx, 50%) var(--my, 50%),
        rgba(255, 255, 255, .22),
        transparent 60%
    );
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
    z-index: 1;
}
.smk-home .smk-bento__tile:hover::before { opacity: 1; }
.smk-home .smk-bento__tile::after {
    /* glowing gradient border ring on hover */
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--smk-angle, 0deg),
        #2563eb, #2563eb, #f59e0b, #22d3ee, #2563eb
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 2;
    animation: smk-ring-spin 6s linear infinite;
}
.smk-home .smk-bento__tile:hover::after { opacity: .85; }
@property --smk-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes smk-ring-spin {
    to { --smk-angle: 360deg; }
}
/* Make sure content sits above the spotlight/border layers */
.smk-home .smk-bento__tile > * { position: relative; z-index: 3; }

/* --- 5. DIFF / CARDS: glowing gradient border on hover --- */
.smk-home .smk-card.smk-card--glass {
    position: relative;
    isolation: isolate;
    transition: transform .25s ease, box-shadow .25s ease;
}
.smk-home .smk-card.smk-card--glass:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 50px -18px rgba(37, 99, 235, .35);
}
.smk-home .smk-card.smk-card--glass::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(37, 99, 235,.6), rgba(236,72,153,.4), rgba(34,211,238,.5));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.smk-home .smk-card.smk-card--glass:hover::after { opacity: 1; }

/* --- 6. BUILT-FOR cards: glow lift --- */
.smk-home .smk-bf-card {
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    position: relative;
    overflow: hidden;
}
.smk-home .smk-bf-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(
        260px circle at var(--mx, 50%) var(--my, 50%),
        rgba(37, 99, 235, .25),
        transparent 55%
    );
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.smk-home .smk-bf-card:hover::before { opacity: 1; }
.smk-home .smk-bf-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 50px -18px rgba(15,23,42,.45);
}

/* --- 7. CURSOR HALO (desktop pointer only) --- */
.smk-cursor-halo {
    position: fixed !important;  /* must beat .smk-home>* { position:relative } or it eats 320px of layout flow */
    top: 0; left: 0;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235,.18), rgba(236,72,153,.06) 45%, transparent 70%);
    filter: blur(20px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    mix-blend-mode: screen;
    transition: opacity .35s ease;
}
.smk-cursor-halo.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .smk-cursor-halo { display: none !important; }
}

/* --- 8. SECTION HEAD: tighter, more Apple-y --- */
.smk-home .smk-section__head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.smk-home .smk-section__head .smk-lead { margin-left: auto; margin-right: auto; }
.smk-home .smk-h2 {
    font-size: clamp(36px, 5.4vw, 64px);
    letter-spacing: -0.035em;
    line-height: 1.02;
}

/* --- 9. STAT STRIP — sit on a darker glass card, brighter numbers --- */
.smk-home .smk-stats__grid {
    background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
    border: 1px solid rgba(255,255,255,.7);
    box-shadow:
        0 30px 70px -20px rgba(15,23,42,.18),
        inset 0 1px 0 rgba(255,255,255,.85);
    padding: 36px 32px;
}
.smk-home .smk-stat__num {
    font-size: clamp(34px, 4vw, 52px);
}

/* --- 10. THEMES grid: animated lift on each card --- */
.smk-home .smk-theme-card {
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.smk-home .smk-theme-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 26px 60px -20px rgba(15,23,42,.40);
}

/* --- 11. SWITCHER chip: glow active --- */
.smk-home .smk-switcher__chip.is-active {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 14px 28px rgba(37, 99, 235,.40);
}

/* --- 12. FINAL CTA — make it dramatic --- */
.smk-home .smk-final-cta {
    position: relative;
    background:
        radial-gradient(800px 400px at 20% 0%, rgba(37, 99, 235,.40), transparent 60%),
        radial-gradient(700px 400px at 80% 100%, rgba(236,72,153,.35), transparent 60%),
        linear-gradient(135deg, #0b1228 0%, #1a1142 100%);
    color: #fff;
    border-radius: 32px;
    padding: 72px 24px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(37, 99, 235,.45);
}
.smk-home .smk-final-cta::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 80%);
    pointer-events: none;
}
.smk-home .smk-final-cta__h {
    font-size: clamp(36px, 5.4vw, 64px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0 0 12px;
    background: linear-gradient(110deg, #fff 0%, #bfdbfe 50%, #fff 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    animation: smk-v4-shimmer 6s linear infinite;
}
.smk-home .smk-final-cta p { color: rgba(255,255,255,.70); max-width: 600px; margin: 0 auto 28px; }

/* --- 13. FAQ items: nicer open animation --- */
.smk-home .smk-faq__item {
    transition: background .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.smk-home .smk-faq__item[open] {
    background: linear-gradient(135deg, rgba(37, 99, 235,.05), rgba(236,72,153,.03));
    border-color: rgba(37, 99, 235,.20);
    box-shadow: 0 14px 30px -16px rgba(37, 99, 235,.30);
}

/* --- 14. SECTION DIVIDERS — soft glow rule between sections --- */
.smk-home .smk-section + .smk-section::before {
    content: "";
    display: block;
    height: 1px;
    margin: 0 auto -1px;
    width: 60%;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235,.25), transparent);
}

/* --- 15. RESPONSIVE polish --- */
@media (max-width: 880px) {
    .smk-home .smk-hero.smk-hero--v4 { margin: 0; border-radius: 0; padding: 80px 0 60px; }
    .smk-trust__row { gap: 24px; }
    .smk-trust__logo { font-size: 18px; }
    .smk-trust__logo i { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .smk-home .smk-hero--v4::before,
    .smk-home .smk-bento__tile::after,
    .smk-home .smk-final-cta__h,
    .smk-home .smk-hero--v4 .smk-btn--primary::after { animation: none !important; }
}

/* End PREMIUM UPGRADE 2026 */

/* ==========================================================================
   ████  PREMIUM UPGRADE — ROUND 2 (bug fixes + drama amplification)  ████
   Fixes:
     - Live activity cards jumpy resize (cards now sit in stable 4-up grid)
     - Trust strip logos too small / crowded against the CTA buttons
     - "Built for teams running" marquee getting clipped (more breathing room)
     - FAQ heading overlapping pricing (proper section spacing)
   Drama:
     - Massive display H2/H3 typography w/ tighter tracking
     - Auto-scrolling brand wall (big logos, GitHub Universe style)
     - Testimonial wall (3-up cards w/ star ratings + gradient borders)
     - "Watch it build" terminal-style code window (Voiceflow / Stripe style)
     - Stronger section contrast (alternating tinted + dark blocks)
     - Bento tiles get a stronger shadow + gradient overlay on the hero tile
   ========================================================================== */

/* ---------- FIX 1 — live activity feed: stable 4-up grid, no reflow ---------- */
.smk-home .smk-livefeed { padding: 40px 0 8px; }
.smk-home .smk-livefeed__stage {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    min-height: 76px;
    overflow: visible;
    flex-wrap: initial;
}
.smk-home .smk-livefeed__card {
    min-width: 0 !important;
    width: 100%;
    flex: initial !important;
    /* Stop the "shrink-then-expand" reflow by writing both initial and final
       transform explicitly and never letting flexbox renegotiate widths. */
    transform: translateY(20px) scale(.96);
    opacity: 0;
    transition:
        transform .55s cubic-bezier(.22,.61,.36,1),
        opacity  .45s ease;
    background: linear-gradient(180deg, #ffffff, #f9fafb);
    border: 1px solid #e5e7eb;
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 10px 24px -12px rgba(15,23,42,.15);
}
.smk-home .smk-livefeed__card.is-in {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}
.smk-home .smk-livefeed__card.is-out {
    transform: translateY(-12px) scale(.96) !important;
    opacity: 0 !important;
}
@media (max-width: 980px) {
    .smk-home .smk-livefeed__stage { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 540px) {
    .smk-home .smk-livefeed__stage { grid-template-columns: 1fr; }
}

/* ---------- FIX 2 — trust strip: bigger, more spacing from CTA ---------- */
.smk-home .smk-trust { margin: 48px auto 8px; padding: 36px 16px 16px; }
.smk-home .smk-trust__label {
    font-size: 13px;
    color: rgba(255,255,255,.50);
    letter-spacing: .22em;
    margin-bottom: 28px;
}
.smk-home .smk-trust__row {
    gap: clamp(36px, 6vw, 80px);
}
.smk-home .smk-trust__logo {
    font-size: clamp(20px, 2vw, 26px);
    color: rgba(255,255,255,.85);
    opacity: .88;
    font-weight: 700;
    letter-spacing: -.015em;
}
.smk-home .smk-trust__logo i {
    font-size: clamp(24px, 2.4vw, 32px);
    color: rgba(255,255,255,.92);
}
.smk-home .smk-trust__logo:hover { opacity: 1; }

/* ---------- FIX 3 — "Built for teams running" marquee: more breathing room ---------- */
.smk-home .smk-marquee { padding: 56px 0 32px; }
.smk-home .smk-marquee__label {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 22px;
    letter-spacing: .22em;
}
.smk-home .smk-marquee__chip {
    padding: 12px 22px;
    font-size: 14px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 6px rgba(15,23,42,.05);
}
.smk-home .smk-marquee__chip i {
    color: #2563eb;
    font-size: 16px;
}

/* ---------- FIX 4 — Section spacing: prevent overlap ---------- */
.smk-home .smk-section { padding-top: 110px; padding-bottom: 110px; }
.smk-home .smk-section + .smk-section { padding-top: 0; }
.smk-home .smk-section .smk-section__head { margin-bottom: 64px; }
.smk-home .smk-faq { padding-top: 140px; }
.smk-home .smk-pricing { padding-bottom: 60px; }
@media (max-width: 768px) {
    .smk-home .smk-section { padding-top: 80px; padding-bottom: 80px; }
    .smk-home .smk-faq { padding-top: 100px; }
}

/* ---------- DRAMA 1 — Display typography (huge H2 with optical tracking) ---------- */
.smk-home .smk-h2 {
    font-size: clamp(40px, 6vw, 80px);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: .98;
}
.smk-home .smk-section__head .smk-lead {
    font-size: clamp(17px, 1.5vw, 21px);
    color: #4b5563;
    line-height: 1.55;
}

/* ---------- DRAMA 2 — Brand wall (auto-scrolling massive logos) ---------- */
.smk-brandwall {
    padding: 80px 0 60px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.6) 30%, rgba(255,255,255,.6) 70%, transparent);
    position: relative;
    overflow: hidden;
}
.smk-brandwall__title {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 36px;
}
.smk-brandwall__viewport {
    position: relative;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    overflow: hidden;
}
.smk-brandwall__track {
    display: flex;
    gap: 88px;
    align-items: center;
    width: max-content;
    animation: smk-brandwall-scroll 38s linear infinite;
}
@keyframes smk-brandwall-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.smk-brandwall__logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 700;
    color: #1f2937;
    letter-spacing: -.025em;
    white-space: nowrap;
    opacity: .55;
    filter: grayscale(1);
    transition: opacity .25s ease, filter .25s ease;
}
.smk-brandwall__logo:hover { opacity: 1; filter: grayscale(0); }
.smk-brandwall__logo i { font-size: clamp(34px, 3.5vw, 46px); }
@media (max-width: 580px) {
    .smk-brandwall__track { gap: 56px; }
}

/* ---------- DRAMA 3 — Testimonial wall ---------- */
.smk-testimonials {
    padding: 110px 0;
    position: relative;
    background:
        radial-gradient(1000px 500px at 20% 0%, rgba(37, 99, 235,.07), transparent 70%),
        radial-gradient(1000px 500px at 80% 100%, rgba(236,72,153,.06), transparent 70%);
}
.smk-test-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 56px;
}
@media (max-width: 980px) { .smk-test-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .smk-test-grid { grid-template-columns: 1fr; } }

.smk-test {
    position: relative;
    background: #fff;
    border-radius: 22px;
    padding: 28px 26px;
    border: 1px solid rgba(15,23,42,.06);
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 18px 40px -22px rgba(15,23,42,.18);
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
    overflow: hidden;
    isolation: isolate;
}
.smk-test:hover {
    transform: translateY(-6px);
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 30px 60px -22px rgba(37, 99, 235,.30);
}
.smk-test::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(37, 99, 235,.55), rgba(236,72,153,.45), rgba(34,211,238,.50));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.smk-test:hover::after { opacity: 1; }
.smk-test__stars {
    color: #f59e0b;
    margin-bottom: 12px;
    font-size: 14px;
    letter-spacing: 2px;
}
.smk-test__quote {
    font-size: 16px;
    line-height: 1.55;
    color: #111827;
    margin: 0 0 22px;
    font-weight: 500;
}
.smk-test__author {
    display: flex;
    align-items: center;
    gap: 12px;
}
.smk-test__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .02em;
    flex-shrink: 0;
    box-shadow: 0 6px 14px -6px rgba(15,23,42,.30);
}
.smk-test__avatar--a { background: linear-gradient(135deg, #2563eb, #06b6d4); }
.smk-test__avatar--b { background: linear-gradient(135deg, #06b6d4, #f97316); }
.smk-test__avatar--c { background: linear-gradient(135deg, #06b6d4, #10b981); }
.smk-test__avatar--d { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.smk-test__avatar--e { background: linear-gradient(135deg, #14b8a6, #2563eb); }
.smk-test__avatar--f { background: linear-gradient(135deg, #d946ef, #06b6d4); }
.smk-test__name { font-weight: 700; color: #0f172a; font-size: 14px; line-height: 1.2; }
.smk-test__role { color: #64748b; font-size: 12px; margin-top: 2px; }

/* ---------- DRAMA 4 — "Watch it build" terminal/code window ---------- */
.smk-terminal-section {
    padding: 110px 0;
    background: linear-gradient(180deg, #0a0e1f 0%, #0b1228 100%);
    position: relative;
    overflow: hidden;
}
.smk-terminal-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(800px 500px at 80% 20%, rgba(37, 99, 235,.25), transparent 60%),
        radial-gradient(700px 500px at 20% 80%, rgba(236,72,153,.18), transparent 60%);
    pointer-events: none;
}
.smk-terminal-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
    pointer-events: none;
}
.smk-terminal-section .container { position: relative; z-index: 2; }
.smk-terminal-section .smk-section__head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.smk-terminal-section .smk-eyebrow {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.15);
    color: #bfdbfe;
}
.smk-terminal-section .smk-h2 { color: #fff; }
.smk-terminal-section .smk-lead { color: rgba(255,255,255,.65); margin-left: auto; margin-right: auto; }

.smk-terminal {
    max-width: 900px;
    margin: 0 auto;
    background: #0d1117;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow:
        0 50px 100px -30px rgba(0,0,0,.7),
        0 24px 60px -20px rgba(37, 99, 235,.40);
    overflow: hidden;
    font-family: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, monospace;
}
.smk-terminal__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: linear-gradient(180deg, #1c2230, #161b22);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.smk-terminal__dots { display: flex; gap: 6px; }
.smk-terminal__dot {
    width: 12px; height: 12px;
    border-radius: 50%;
}
.smk-terminal__dot--r { background: #ff5f57; }
.smk-terminal__dot--y { background: #febc2e; }
.smk-terminal__dot--g { background: #28c840; }
.smk-terminal__title {
    color: #8b949e;
    font-size: 12px;
    font-weight: 500;
}
.smk-terminal__body {
    padding: 24px 28px;
    font-size: 14px;
    line-height: 1.7;
    color: #c9d1d9;
    min-height: 240px;
}
.smk-terminal__line { display: block; opacity: 0; transform: translateY(8px); animation: smk-line-in .4s ease forwards; }
.smk-terminal__line:nth-child(1) { animation-delay: .2s; }
.smk-terminal__line:nth-child(2) { animation-delay: .8s; }
.smk-terminal__line:nth-child(3) { animation-delay: 1.5s; }
.smk-terminal__line:nth-child(4) { animation-delay: 2.2s; }
.smk-terminal__line:nth-child(5) { animation-delay: 3.0s; }
.smk-terminal__line:nth-child(6) { animation-delay: 3.8s; }
@keyframes smk-line-in {
    to { opacity: 1; transform: translateY(0); }
}
.smk-terminal__prompt { color: #58a6ff; user-select: none; margin-right: 8px; }
.smk-terminal__cmd    { color: #c9d1d9; }
.smk-terminal__ok     { color: #56d364; }
.smk-terminal__info   { color: #a5d6ff; }
.smk-terminal__dim    { color: #6e7681; }
.smk-terminal__caret {
    display: inline-block;
    width: 8px; height: 16px;
    background: #58a6ff;
    margin-left: 4px;
    vertical-align: middle;
    animation: smk-caret 1s steps(1) infinite;
}
@keyframes smk-caret { 50% { opacity: 0; } }

/* ---------- BENTO hero tile — bigger drama on the surveys tile ---------- */
.smk-home .smk-bento__tile--hero {
    background:
        radial-gradient(600px 400px at 100% 100%, rgba(255,255,255,.18), transparent 50%),
        linear-gradient(135deg, #2563eb 0%, #1d4ed8 60%, #1e3a8a 100%) !important;
}
.smk-home .smk-bento__tile--hero .smk-bento__h {
    font-size: clamp(28px, 3.4vw, 44px);
    letter-spacing: -.03em;
    line-height: 1.05;
}

/* ---------- Section eyebrow color treatments — saturate ---------- */
.smk-home .smk-eyebrow {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 8px 16px;
}

/* ---------- Marquee strip — show on small screens too (was display:none) ---------- */
.smk-home .smk-marquee { display: block !important; }
@media (max-width: 580px) {
    .smk-home .smk-marquee__chip { padding: 8px 14px; font-size: 12px; }
}

/* End PREMIUM UPGRADE — ROUND 2 */

/* ==========================================================================
   ████  PREMIUM UPGRADE — ROUND 3 (max-drama pass)  ████
   Adds:
     - Hero star-rating badge with avatar stack
     - Animated gradient on KEY phrases in every H2
     - Aurora + grid backdrop on every dark section (built-for, quiz, analytics, terminal, final-cta)
     - Bigger bento (450px hero tile, taller small tiles)
     - Bigger stat numbers (clamp 56–96px) with separate underline accent
     - Showcase frames: bigger, more lift, gradient glow underneath
     - Mascot row: floating bob loop
     - Switcher chips: bigger pill style
     - Themes: each card has subtle inner shadow + bigger label
   ========================================================================== */

/* ---------- Hero badge: "★★★★★ Loved by 50,000+" ---------- */
.smk-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 18px 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    margin-bottom: 22px;
    font-size: 13.5px;
    font-weight: 600;
    color: #e2e8f0;
}
.smk-hero__badge-avatars {
    display: inline-flex;
    align-items: center;
}
.smk-hero__badge-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid #1a1142;
    margin-left: -8px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.smk-hero__badge-avatar:first-child { margin-left: 0; }
.smk-hero__badge-avatar--a { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.smk-hero__badge-avatar--b { background: linear-gradient(135deg, #2563eb, #06b6d4); }
.smk-hero__badge-avatar--c { background: linear-gradient(135deg, #06b6d4, #10b981); }
.smk-hero__badge-avatar--d { background: linear-gradient(135deg, #06b6d4, #f97316); }
.smk-hero__badge-stars { color: #f59e0b; letter-spacing: 2px; font-size: 13px; }
.smk-hero__badge strong { color: #fff; font-weight: 700; }

/* ---------- Gradient key-word that runs the same shimmer animation ---------- */
.smk-key {
    background: linear-gradient(110deg,
        #2563eb 0%, #2563eb 22%, #2563eb 44%, #f59e0b 66%, #2563eb 78%, #2563eb 92%, #2563eb 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    animation: smk-v4-shimmer 6s linear infinite;
    display: inline;
}
.smk-key--blue {
    background: linear-gradient(110deg, #38bdf8 0%, #2563eb 50%, #38bdf8 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    animation: smk-v4-shimmer 6s linear infinite;
}

/* ---------- Dark sections — give them ALL the aurora treatment ---------- */
.smk-home .smk-section--dark,
.smk-home .smk-showcase--dark {
    position: relative;
    background:
        radial-gradient(800px 500px at 18% 12%, rgba(37, 99, 235,.30), transparent 60%),
        radial-gradient(700px 500px at 82% 20%, rgba(236,72,153,.22), transparent 60%),
        radial-gradient(900px 600px at 50% 100%, rgba(34,211,238,.18), transparent 60%),
        linear-gradient(180deg, #0a0e1f 0%, #0b1228 55%, #0a0e1f 100%) !important;
    overflow: hidden;
    color: #fff;
}
.smk-home .smk-section--dark::before,
.smk-home .smk-showcase--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}
.smk-home .smk-section--dark::after,
.smk-home .smk-showcase--dark::after {
    content: "";
    position: absolute;
    inset: -20% -10% -20% -10%;
    background:
        radial-gradient(circle at 25% 30%, rgba(37, 99, 235,.30), transparent 38%),
        radial-gradient(circle at 75% 75%, rgba(236,72,153,.24), transparent 36%);
    filter: blur(70px);
    opacity: .8;
    animation: smk-aurora 24s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}
.smk-home .smk-section--dark > *,
.smk-home .smk-showcase--dark > * { position: relative; z-index: 1; }

/* ---------- SVG-style wavy divider (used between alternating sections) ---------- */
.smk-divider-wave {
    display: block;
    width: 100%;
    height: 80px;
    background:
        radial-gradient(80% 100% at 50% 0%, rgba(37, 99, 235,.10), transparent 60%);
}

/* ---------- BIGGER bento — hero tile gets real estate ---------- */
.smk-home .smk-bento { grid-auto-rows: minmax(220px, auto); gap: 16px; }
.smk-home .smk-bento__tile--hero {
    min-height: 460px;
    padding: 40px !important;
}
.smk-home .smk-bento__tile {
    padding: 28px;
    border-radius: 24px;
}
.smk-home .smk-bento__h { font-size: clamp(22px, 2.2vw, 30px); }
.smk-home .smk-bento__h--md { font-size: clamp(20px, 2vw, 26px); }
.smk-home .smk-bento__h--sm { font-size: clamp(17px, 1.5vw, 19px); }
.smk-home .smk-bento__p { font-size: 14.5px; }
.smk-home .smk-bento__tile { box-shadow: 0 20px 40px -18px rgba(15,23,42,.30); }
.smk-home .smk-bento__tile:hover { box-shadow: 0 36px 60px -20px rgba(37, 99, 235,.35); }

/* ---------- Bigger stats — give the numbers gravity ---------- */
.smk-home .smk-stats { padding: 80px 0 40px; }
.smk-home .smk-stats__grid {
    border-radius: 28px;
    padding: 44px 36px;
}
.smk-home .smk-stat__num {
    font-size: clamp(40px, 5.6vw, 76px) !important;
    line-height: 1;
    letter-spacing: -0.045em;
    font-weight: 800;
    margin-bottom: 10px;
}
.smk-home .smk-stat__label {
    font-size: 13.5px;
    color: #475569;
    font-weight: 600;
    letter-spacing: .02em;
}

/* ---------- Showcase frames — bigger lift + glow ---------- */
.smk-home .smk-frame {
    transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
    box-shadow:
        0 30px 70px -20px rgba(15,23,42,.20),
        0 10px 30px -10px rgba(37, 99, 235,.18);
    border-radius: 18px;
    overflow: hidden;
}
.smk-home .smk-frame:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow:
        0 50px 90px -20px rgba(37, 99, 235,.40),
        0 18px 40px -10px rgba(236,72,153,.25);
}
.smk-home .smk-showcase .smk-frame::before {
    content: "";
    position: absolute;
    inset: -10% -5% -20% -5%;
    background: radial-gradient(60% 50% at 50% 100%, rgba(37, 99, 235,.40), transparent 70%);
    filter: blur(30px);
    z-index: -1;
    opacity: 0;
    transition: opacity .45s ease;
}
.smk-home .smk-showcase .smk-frame:hover::before { opacity: 1; }

/* ---------- Mascots: smooth bob loop ---------- */
.smk-home .smk-mascot {
    animation: smk-mascot-bob 4.5s ease-in-out infinite;
}
.smk-home .smk-mascot:nth-child(2) { animation-delay: .3s; }
.smk-home .smk-mascot:nth-child(3) { animation-delay: .6s; }
.smk-home .smk-mascot:nth-child(4) { animation-delay: .9s; }
.smk-home .smk-mascot:nth-child(5) { animation-delay: 1.2s; }
@keyframes smk-mascot-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* ---------- Switcher chips: bigger + glow ---------- */
.smk-home .smk-switcher__chip {
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(15,23,42,.10);
    color: #1f2937;
    backdrop-filter: blur(8px);
    transition: all .22s ease;
}
.smk-home .smk-switcher__chip:hover { background: #fff; }
.smk-home .smk-switcher__chip.is-active {
    box-shadow: 0 18px 36px rgba(37, 99, 235,.40);
    transform: translateY(-1px);
}

/* ---------- Themes cards: bigger labels + inner shadow ---------- */
.smk-home .smk-theme-card {
    border-radius: 18px;
    min-height: 160px;
    padding: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 10px 30px -14px rgba(15,23,42,.25);
}
.smk-home .smk-theme-card__label {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

/* ---------- BF cards: bigger icons + better hover state ---------- */
.smk-home .smk-bf-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 20px;
    padding: 28px 26px;
    color: #fff;
    backdrop-filter: blur(10px);
}
.smk-home .smk-bf-card__ico {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(37, 99, 235,.25), rgba(236,72,153,.20));
    color: #bfdbfe;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}
.smk-home .smk-bf-card h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
}
.smk-home .smk-bf-card p { color: rgba(255,255,255,.70); font-size: 14px; line-height: 1.55; }
.smk-home .smk-bf-card__tag {
    display: inline-block;
    margin-top: 14px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    color: #bfdbfe;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
}

/* ---------- Section heading — make sure key word in heading shimmers ---------- */
.smk-home .smk-h2 .smk-key,
.smk-home .smk-h2 .smk-grad-text,
.smk-home .smk-h2 .smk-grad-text--shimmer {
    display: inline;
}

/* ---------- "How it works" steps — number gets gradient ---------- */
.smk-home .smk-step__num {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    font-size: clamp(40px, 4vw, 56px);
    font-weight: 800;
    letter-spacing: -0.04em;
    margin-bottom: 12px;
}

/* ---------- Final CTA: bigger + more glow ---------- */
.smk-home .smk-final-cta { padding: 100px 40px; border-radius: 36px; }
.smk-home .smk-final-cta .smk-btn--primary {
    background: #fff;
    color: #1d4ed8;
    font-weight: 700;
    box-shadow:
        0 20px 50px rgba(255,255,255,.20),
        0 0 0 1px rgba(255,255,255,.50);
}
.smk-home .smk-final-cta .smk-btn--primary:hover { color: #1d4ed8; }

/* ---------- Comparison table: bigger ---------- */
.smk-home .smk-vs__cell { padding: 14px 18px; font-size: 14.5px; }

/* End PREMIUM UPGRADE — ROUND 3 */

/* ==========================================================================
   ████  PREMIUM UPGRADE — ROUND 4 (compaction + bug fixes)  ████
   - Hide oversized hero product screenshot (user feedback: too big)
   - Hero now ends with the trust strip + CTA; cleaner, faster scroll
   - Stat numbers were too dominant — pull back to clamp 28–42px
   - Marquee top padding was 56px on top of section padding → trim
   - Live feed: switch from grid (which leaves empty cells) back to a
     stable flex row with fixed 25% widths so cards always sit side-by-side
     and the leftmost slot is reused, not "down there"
   ========================================================================== */

/* ---------- Hide hero product image (and its glow + floating chips) ---------- */
.smk-home .smk-hero--v4 .smk-hero__stage--v4 { display: none !important; }

/* Tighten hero bottom — was padding-bottom: 90px with the image; now smaller */
.smk-home .smk-hero.smk-hero--v4 { padding-bottom: 40px; }

/* ---------- Stats: pull the numbers WAY back ---------- */
.smk-home .smk-stats { padding: 40px 0 30px; }
.smk-home .smk-stats__grid { padding: 28px 32px; border-radius: 22px; }
.smk-home .smk-stat__num {
    font-size: clamp(26px, 2.8vw, 40px) !important;
    margin-bottom: 6px;
}
.smk-home .smk-stat__label { font-size: 13px; }

/* ---------- Marquee: tighten the empty space above it ---------- */
.smk-home .smk-marquee { padding: 14px 0 24px; }
.smk-home .smk-marquee__label { margin-bottom: 14px; font-size: 11px; }
.smk-home .smk-livefeed { padding: 18px 0 8px; }

/* ---------- Live feed: stable flex row, no empty grid slots ---------- */
.smk-home .smk-livefeed__stage {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    align-items: stretch;
    justify-content: flex-start;
    grid-template-columns: none !important;
}
.smk-home .smk-livefeed__card {
    flex: 0 0 calc(25% - 8px) !important;
    max-width: calc(25% - 8px);
    width: calc(25% - 8px);
}
@media (max-width: 980px) {
    .smk-home .smk-livefeed__card { flex: 0 0 calc(50% - 6px) !important; max-width: calc(50% - 6px); width: calc(50% - 6px); }
}
@media (max-width: 540px) {
    .smk-home .smk-livefeed__stage { flex-wrap: wrap !important; }
    .smk-home .smk-livefeed__card  { flex: 0 0 100% !important; max-width: 100%; width: 100%; }
}

/* When fading out, collapse width so the row doesn't push the new card
   to a second line during the 600ms fade transition. */
.smk-home .smk-livefeed__card.is-out {
    flex: 0 0 0 !important;
    max-width: 0 !important;
    width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -10px !important;  /* swallow the row gap */
    overflow: hidden;
    transition:
        flex-basis .55s cubic-bezier(.22,.61,.36,1),
        max-width  .55s cubic-bezier(.22,.61,.36,1),
        width      .55s cubic-bezier(.22,.61,.36,1),
        margin     .55s cubic-bezier(.22,.61,.36,1),
        opacity    .35s ease,
        transform  .55s cubic-bezier(.22,.61,.36,1) !important;
}

/* End PREMIUM UPGRADE — ROUND 4 */

/* ==========================================================================
   ████  PREMIUM UPGRADE — ROUND 5 (final spacing + animation cleanup)  ████
   - Collapse all whitespace between hero bottom and marquee top
   - Tighten the trust strip inside the hero so it sits close to the CTA
   - Live feed cards: no more scale() in the animation (translateY only)
     so cards don't visually grow/shrink each insertion
   - Live feed stage: fix min-height so it never reflows when cards swap
   ========================================================================== */

/* ---------- Aggressively collapse hero → marquee gap ---------- */
.smk-home .smk-hero.smk-hero--v4 {
    padding-bottom: 24px !important;
    margin-bottom: 0 !important;
}
.smk-home .smk-hero--v4 .smk-trust {
    margin: 28px auto 0 !important;
    padding: 20px 16px 0 !important;
}
.smk-home .smk-marquee {
    padding-top: 28px !important;
    padding-bottom: 16px !important;
    margin-top: 0 !important;
}
.smk-home .smk-livefeed {
    padding-top: 8px !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}
.smk-home .smk-stats {
    padding-top: 20px !important;
    margin-top: 0 !important;
}

/* ---------- Live feed cards: translateY-only, no scale, fixed height ---------- */
.smk-home .smk-livefeed__stage {
    min-height: 86px !important;
    align-items: stretch !important;
}
.smk-home .smk-livefeed__card {
    height: 70px;
    min-height: 70px;
    box-sizing: border-box;
    transform: translateY(16px) !important;  /* no scale */
    opacity: 0;
}
.smk-home .smk-livefeed__card.is-in {
    transform: translateY(0) !important;
    opacity: 1 !important;
}
.smk-home .smk-livefeed__card.is-out {
    transform: translateY(-8px) !important;
    opacity: 0 !important;
}

/* End PREMIUM UPGRADE — ROUND 5 */

/* ==========================================================================
   ████  PREMIUM UPGRADE — ROUND 6 (rock-solid feed-card height)  ████
   - Lock card to exactly 76px height + overflow:hidden so content can never
     spill and grow the row
   - Stage min-height matches so the row never collapses or expands when a
     card is inserted/removed mid-animation
   ========================================================================== */
.smk-home .smk-livefeed__stage {
    min-height: 76px !important;
    height: 76px !important;
}
.smk-home .smk-livefeed__card {
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    overflow: hidden;
    padding: 10px 14px !important;
}
/* When the card is collapsing out, it shrinks horizontally — keep its
   vertical box untouched so the row height never changes. */
.smk-home .smk-livefeed__card.is-out {
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
}

/* End PREMIUM UPGRADE — ROUND 6 */

/* ==========================================================================
   ████  PREMIUM UPGRADE — ROUND 7 (hero title scaling + rotator alignment)  ████
   - Hero title was too big (was clamp 48-104px). Pull back to 40-76px.
   - "Built for [word]" rotator: word was visually above "Built for" because
     .smk-rotator had height:1.3em + word at top:0 + flex baseline. Re-baseline
     the rotator so the word sits ON the same line as the prefix.
   - Add proper margin-bottom under the rotline so it doesn't crush the CTA.
   ========================================================================== */

/* Tame the giant title */
.smk-home .smk-hero--v4 .smk-hero__title--v4 {
    font-size: clamp(40px, 5.6vw, 76px) !important;
    line-height: 1.02 !important;
    margin-bottom: 16px !important;
}
.smk-home .smk-hero--v4 .smk-hero__sub--v4 {
    font-size: clamp(15px, 1.4vw, 18px);
    margin-bottom: 20px;
}

/* "Built for [word]" — keep prefix + rotating word on one baseline */
.smk-home .smk-hero--v4 .smk-hero__rotline {
    display: inline-flex !important;
    align-items: center !important;
    gap: .5em;
    font-size: clamp(16px, 1.6vw, 20px);
    line-height: 1.2;
    margin: 8px 0 28px !important;  /* breathing room above the CTA buttons */
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.smk-home .smk-hero--v4 .smk-rotator {
    height: 1.2em !important;
    min-width: 8.5ch;
    display: inline-block;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
}
.smk-home .smk-hero--v4 .smk-rotator__word {
    position: absolute;
    left: 0;
    top: 0;            /* sits flush to the top of the 1.2em container — same baseline as prefix in line-height 1.2 */
    line-height: 1.2;  /* matches container so it's centred on the prefix */
    font-weight: 700;
}

/* End PREMIUM UPGRADE — ROUND 7 */

/* ==========================================================================
   ████  PREMIUM UPGRADE — ROUND 8 (bento row height + trust on one line)  ████
   - Bento was growing unbounded because grid-auto-rows used minmax(_, auto)
     AND the hero tile had min-height: 460px. Lock rows to a fixed 230px
     and let the hero span 2 rows naturally (= 478px).
   - Trust strip wrapping to 2 lines: pull gap + font down so all 7 logos
     fit on one row across normal desktop widths.
   ========================================================================== */

/* Bento: fixed row height, no auto-grow */
.smk-home .smk-bento {
    grid-auto-rows: 230px !important;
    gap: 16px;
}
.smk-home .smk-bento__tile--hero {
    min-height: 0 !important;          /* let span 2/2 dictate the size */
    height: auto;
    padding: 32px !important;
}

/* Trust strip: smaller logos + tighter gap so they fit on one line */
.smk-home .smk-trust__row {
    flex-wrap: nowrap;
    gap: clamp(20px, 2.6vw, 44px);
    overflow-x: auto;        /* graceful fallback if window is super narrow */
    scrollbar-width: none;
    padding-bottom: 4px;
}
.smk-home .smk-trust__row::-webkit-scrollbar { display: none; }
.smk-home .smk-trust__logo {
    font-size: clamp(15px, 1.4vw, 20px) !important;
    white-space: nowrap;
}
.smk-home .smk-trust__logo i {
    font-size: clamp(18px, 1.7vw, 24px) !important;
}
@media (max-width: 720px) {
    .smk-home .smk-trust__row { flex-wrap: wrap; justify-content: center; }
}

/* End PREMIUM UPGRADE — ROUND 8 */

/* ==========================================================================
   ████  PREMIUM UPGRADE — ROUND 9 (Apple-style glass navbar on landing)  ████
   - Pin the navbar to top, float with glass blur
   - Adapts: translucent dark-glass over the dark hero, white-glass once
     the user scrolls past it (.is-scrolled toggled by JS below)
   - Scoped to body.index so the rest of the app (dashboard, editor, etc.)
     keeps its existing layout untouched
   ========================================================================== */
body.index .navbar-custom {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 18px !important;
    min-height: 60px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(10, 18, 36, .55) !important;
    backdrop-filter: blur(22px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
    box-shadow: none !important;
    z-index: 1050;
    transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* Reserve room for the fixed nav. With top:0, only the nav's own height
   needs to be cleared (no 12px offset anymore). */
body.index { padding-top: 64px; }
body.index .smk-home .smk-hero.smk-hero--v4 { margin-top: -64px; }  /* let hero bleed up under the bar */

/* Light text + logo while over the dark hero */
body.index .navbar-custom .navbar-brand,
body.index .navbar-custom .nav-link,
body.index .navbar-custom .navbar-text {
    color: rgba(255,255,255,.92) !important;
}
body.index .navbar-custom .nav-link:hover,
body.index .navbar-custom .nav-link:focus {
    color: #fff !important;
}
body.index .navbar-custom [data-logo] img,
body.index .navbar-custom .navbar-logo,
body.index .navbar-custom #loadlogo,
body.index .navbar-custom img.navbar-logo {
    filter: brightness(0) invert(1) !important;    /* force the logo white on dark glass */
    transition: filter .35s ease !important;
}

/* Scrolled state (JS adds .is-scrolled when window.scrollY > 80) —
   the page beneath is dark on every public route, so we just deepen
   the glass instead of flipping to white (which used to jar the eye
   when the user crossed the 80px threshold). */
body.index .navbar-custom.is-scrolled {
    background: rgba(8, 14, 28, .82) !important;
    border-color: rgba(255, 255, 255, .06) !important;
    box-shadow:
        0 8px 24px -12px rgba(0, 0, 0, .55),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.index .navbar-custom.is-scrolled .navbar-brand,
body.index .navbar-custom.is-scrolled .nav-link,
body.index .navbar-custom.is-scrolled .navbar-text { color: #ffffff !important; }
body.index .navbar-custom.is-scrolled .nav-link:hover { color: #ffffff !important; }
body.index .navbar-custom.is-scrolled [data-logo] img,
body.index .navbar-custom.is-scrolled .navbar-logo,
body.index .navbar-custom.is-scrolled #loadlogo,
body.index .navbar-custom.is-scrolled img.navbar-logo { filter: brightness(0) invert(1) !important; }

/* Toggler (hamburger) for mobile */
body.index .navbar-custom .navbar-toggler {
    border-color: rgba(255,255,255,.20);
}
body.index .navbar-custom .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}
body.index .navbar-custom.is-scrolled .navbar-toggler { border-color: rgba(15,23,42,.10); }
body.index .navbar-custom.is-scrolled .navbar-toggler-icon { filter: none; }

/* Mobile collapsed menu — give it a solid glass panel so links are readable */
@media (max-width: 991px) {
    body.index .navbar-custom .navbar-collapse {
        background: rgba(15, 17, 35, .92);
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        border-radius: 14px;
        margin-top: 10px;
        padding: 12px 14px;
        border: 1px solid rgba(255,255,255,.08);
    }
    body.index .navbar-custom.is-scrolled .navbar-collapse {
        background: rgba(255,255,255,.95);
        border-color: rgba(15,23,42,.06);
    }
}

/* Kill the legacy inline `style="background: white"` on the <nav> and
   stretch the inner container so the glass bar fills edge-to-edge. */
body.index .navbar-custom {
    background: rgba(10, 18, 36, .55) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}
body.index .navbar-custom > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}
body.index .navbar-custom.is-scrolled {
    background: rgba(8, 14, 28, .82) !important;
}

/* The brand wordmark has hardcoded `color: black` inline. Force white over
   the dark hero and revert to black once the navbar is scrolled past it. */
body.index .navbar-custom .navbar-brand span,
body.index .navbar-custom .navbar-brand span span {
    color: #fff !important;
    transition: color .35s ease;
}
body.index .navbar-custom.is-scrolled .navbar-brand span,
body.index .navbar-custom.is-scrolled .navbar-brand span span {
    color: #ffffff !important;
}

/* End PREMIUM UPGRADE — ROUND 9 */

/* ==========================================================================
   ████  PREMIUM UPGRADE — ROUND 10 (navbar top spacing)  ████
   - User feedback: "no space on top". Push the navbar down a touch more
     from the viewport edge and remove the body padding-top trick so the
     hero gradient flows up cleanly behind the floating glass pill.
   ========================================================================== */
body.index { padding-top: 0 !important; }
body.index .smk-home .smk-hero.smk-hero--v4 {
    margin-top: 0 !important;
    padding-top: 130px !important;   /* enough room for the floating navbar above content */
}
body.index .navbar-custom {
    top: 16px !important;
}

/* End PREMIUM UPGRADE — ROUND 10 */

/* ==========================================================================
   ████  PREMIUM UPGRADE — ROUND 11 (always-white glass navbar)  ████
   User wanted the scrolled look at all times — no dark transparent state.
   Override Round 9's dark-glass default + force the logo to its natural
   colors (no white invert) and the brand text to dark.
   ========================================================================== */
body.index .navbar-custom {
    background: rgba(255, 255, 255, .80) !important;
    border-color: rgba(15, 23, 42, .06) !important;
    box-shadow:
        0 14px 30px rgba(15, 23, 42, .10),
        inset 0 1px 0 rgba(255,255,255,.80) !important;
}
body.index .navbar-custom .navbar-brand,
body.index .navbar-custom .nav-link,
body.index .navbar-custom .navbar-text,
body.index .navbar-custom .navbar-brand span,
body.index .navbar-custom .navbar-brand span span {
    color: #0f172a !important;
}
body.index .navbar-custom .nav-link:hover { color: #1d4ed8 !important; }
body.index .navbar-custom [data-logo] img,
body.index .navbar-custom .navbar-logo,
body.index .navbar-custom #loadlogo,
body.index .navbar-custom img.navbar-logo { filter: none !important; }
body.index .navbar-custom .navbar-toggler { border-color: rgba(15,23,42,.10) !important; }
body.index .navbar-custom .navbar-toggler-icon { filter: none !important; }

@media (max-width: 991px) {
    body.index .navbar-custom .navbar-collapse {
        background: rgba(255,255,255,.95) !important;
        border-color: rgba(15,23,42,.06) !important;
    }
}

/* End PREMIUM UPGRADE — ROUND 11 */

/* ==========================================================================
   ████  PREMIUM UPGRADE — ROUND 12 (header cleanup)  ████
   - The dismissable announcement banner ("[X]" partial) was rendering
     edge-to-edge BEHIND the floating navbar pill on the landing page,
     making the navbar look like it had a stray X glued to it. Hide the
     banner on the index route so the navbar reads cleanly. (Admins can
     still see announcements on the dashboard.)
   - Defensive: same hide on every support route too.
   ========================================================================== */
body.index .announcement-wrapper,
body[data-smk-route="index"] .announcement-wrapper,
body[data-smk-route="support"] .announcement-wrapper,
body[data-smk-route="support-kb"] .announcement-wrapper,
body[data-smk-route="support-tickets"] .announcement-wrapper,
body[data-smk-route="support-ticket"] .announcement-wrapper { display: none !important; }
/* End PREMIUM UPGRADE — ROUND 12 */

/* ==========================================================================
   SUPPORT CENTER — attachments + CSAT + reply attach button (Phase 2)
   ========================================================================== */
.smk-supp-msg__atts { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.smk-supp-att {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; background: #f1f5f9; color: #1f2937;
    border-radius: 8px; font-size: 13px; text-decoration: none;
    transition: background .15s, color .15s;
}
.smk-supp-att:hover { background: #e0e7ff; color: var(--c-brand); }
.smk-supp-att small { color: #94a3b8; }

.smk-supp-reply__attach {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px;
    background: #f1f5f9; color: #475569;
    font-size: 13px; cursor: pointer;
    transition: background .15s, color .15s;
    margin: 0;
}
.smk-supp-reply__attach:hover { background: #e0e7ff; color: var(--c-brand); }

/* CSAT block */
.smk-supp-csat {
    max-width: 820px; margin: 28px auto 0;
    background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius);
    padding: 28px; box-shadow: var(--c-shadow-1); text-align: center;
}
.smk-supp-csat h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
.smk-supp-csat p { color: var(--c-muted); margin: 0 0 18px; }
.smk-supp-csat__form { display: grid; gap: 16px; max-width: 480px; margin: 0 auto; }
.smk-supp-csat__stars {
    display: inline-flex; flex-direction: row-reverse; gap: 4px;
    justify-content: center;
}
.smk-supp-csat__stars input { display: none; }
.smk-supp-csat__stars label {
    cursor: pointer; font-size: 32px; color: #cbd5e1;
    transition: color .15s; margin: 0;
}
.smk-supp-csat__stars label:hover,
.smk-supp-csat__stars label:hover ~ label,
.smk-supp-csat__stars input:checked ~ label { color: #f59e0b; }

.smk-supp-csat__done {
    color: var(--c-text); font-size: 16px;
}
.smk-supp-csat__done strong { display: block; font-size: 18px; margin-bottom: 4px; }
.smk-supp-csat__done span { display: block; color: #f59e0b; font-size: 24px; letter-spacing: 4px; margin: 4px 0; }
.smk-supp-csat__done p { color: var(--c-muted); margin: 6px 0 0; }
/* End SUPPORT CENTER Phase 2 CSS */

/* ==========================================================================
   SUPPORT CENTER — Visual polish pass (matches landing-page energy)
   ========================================================================== */

/* Hero: bigger, more dramatic gradient + animated blobs */
.smk-supp-hero {
    padding: 72px 0 56px;
    position: relative;
    overflow: hidden;
}
.smk-supp-hero__blob--a {
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(37, 99, 235, .65), transparent 70%);
    left: 8%; top: -140px;
    animation: smk-supp-blob 20s ease-in-out infinite;
}
.smk-supp-hero__blob--b {
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(236, 72, 153, .55), transparent 70%);
    right: 5%; top: -40px;
    animation: smk-supp-blob 22s ease-in-out infinite reverse;
}
@keyframes smk-supp-blob {
    0%, 100% { transform: translate(0,0) scale(1); }
    50%      { transform: translate(40px, 30px) scale(1.05); }
}
.smk-supp-hero__h1 {
    font-size: clamp(40px, 5.6vw, 68px);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.02;
    background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 50%, #06b6d4 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}
.smk-supp-hero__sub {
    font-size: 18px;
    color: #475569;
    max-width: 640px;
    margin: 14px auto 32px;
}

/* Search bar: bigger, glow on focus */
.smk-supp-search { padding: 8px 8px 8px 22px; border-radius: 999px; max-width: 760px; }
.smk-supp-search__input { height: 52px; font-size: 17px; }
.smk-supp-search__btn { height: 44px; padding: 0 22px; font-size: 14px; }
.smk-supp-search:focus-within {
    box-shadow:
        0 0 0 6px rgba(37, 99, 235,.12),
        0 20px 40px -16px rgba(37, 99, 235,.30);
}

/* Category tiles: gradient backdrops + better lift */
.smk-supp-cats { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 16px; }
.smk-supp-cat {
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #fafbff);
    overflow: hidden;
}
.smk-supp-cat::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--c, #2563eb) 18%, transparent), transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}
.smk-supp-cat:hover::before { opacity: 1; }
.smk-supp-cat:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--c, #2563eb) 30%, transparent);
}
.smk-supp-cat__ico { width: 48px; height: 48px; font-size: 20px; }
.smk-supp-cat__name { font-size: 16px; }

/* Section heads — keep title centered but more spaced */
.smk-supp-section { margin-top: 64px; }
.smk-supp-section__h2 {
    font-size: clamp(24px, 2.8vw, 34px);
    letter-spacing: -0.025em;
}

/* Popular articles list: cards instead of inline rows */
.smk-supp-pop {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    display: grid !important;
}
.smk-supp-pop__link {
    background: linear-gradient(180deg, #ffffff, #fafbff);
    border-radius: 14px;
    padding: 18px 20px;
}
.smk-supp-pop__ico {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #eff6ff, #fdf2f8);
    color: var(--c-brand);
    display: inline-flex; align-items: center; justify-content: center;
}

/* CTA card: more drama with grid texture */
.smk-supp-cta { margin-top: 80px; }
.smk-supp-cta__inner {
    padding: 64px 40px;
    background:
        radial-gradient(800px 400px at 20% 0%, rgba(37, 99, 235,.40), transparent 60%),
        radial-gradient(700px 400px at 80% 100%, rgba(236,72,153,.35), transparent 60%),
        linear-gradient(135deg, #0b1228 0%, #1a1142 100%);
    position: relative;
}
.smk-supp-cta__inner::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 80%);
    pointer-events: none;
    border-radius: inherit;
}
.smk-supp-cta__inner h2 {
    background: linear-gradient(110deg, #fff 0%, #bfdbfe 50%, #fff 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    animation: smk-v4-shimmer 6s linear infinite;
}
.smk-supp-cta__inner .smk-supp-btn--primary {
    background: #fff;
    color: #1d4ed8;
    font-weight: 700;
    box-shadow: 0 20px 40px rgba(255,255,255,.20);
}
.smk-supp-cta__inner .smk-supp-btn--primary:hover { color: #1d4ed8; }

/* KB index columns: bigger headings, more breathing room */
.smk-supp-kbi { gap: 22px; }
.smk-supp-kbi__col {
    padding: 22px 22px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #fafbff);
}
.smk-supp-kbi__head { font-size: 17px; margin-bottom: 14px; }
.smk-supp-kbi__list li { padding: 7px 0; }
.smk-supp-kbi__list a { display: flex; align-items: center; transition: color .15s, transform .15s; }
.smk-supp-kbi__list a:hover { transform: translateX(2px); }

/* Sub-tab strip: nicer spacing + pill polish */
.smk-supp__tabs-inner { padding: 10px 24px; gap: 8px; }
.smk-supp__tab { padding: 10px 18px; font-weight: 600; }
.smk-supp__tab i { color: var(--c-brand); }
.smk-supp__tab.is-active i { color: #fff; }
/* End SUPPORT CENTER visual polish */

/* Full-page dark background for the Support Center on every surface
   (public landing + logged-in dashboard). Scoped via data-smk-route^="support"
   so it kicks in on /support, /support-kb, /support-tickets, /support-ticket. */
body.index[data-smk-route^="support"],
body.app[data-smk-route^="support"] {
    background: #ffffff !important;
}
body.index[data-smk-route^="support"] .smk-supp,
body.app[data-smk-route^="support"] .smk-supp {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
}
/* Dashboard shell surfaces sit on top of the body — keep them white too so
   the content area matches the page background. */
body.app[data-smk-route^="support"] .smk-shell,
body.app[data-smk-route^="support"] .smk-shell__main,
body.app[data-smk-route^="support"] .smk-shell__canvas,
body.app[data-smk-route^="support"] .smk-shell__footer {
    background: #ffffff !important;
}
/* Content sits on a white page now — keep the dark hero/CTA (self-contained)
   but make the on-page headings & popular-article text dark for contrast. */
body[data-smk-route^="support"] .smk-supp-section__h2 { color: #0f172a !important; }
body[data-smk-route^="support"] .smk-supp-pop__link,
body[data-smk-route^="support"] .smk-supp-pop__link strong { color: #0f172a !important; }
body[data-smk-route^="support"] .smk-supp-pop__link small { color: #64748b !important; }
/* Give the white cards/links a hairline border so they read on white. */
body[data-smk-route^="support"] .smk-supp-cat,
body[data-smk-route^="support"] .smk-supp-pop__link { border: 1px solid #e9edf3 !important; }

/* ==========================================================================
   SUPPORT CENTER — Colored heroes (matches landing-page energy).
   Every support page top section gets a dark mesh-gradient backdrop so the
   floating white-glass navbar pill has contrast and the page feels premium.
   ========================================================================== */

/* Reset the support shell main container so the hero can bleed full-bleed */
.smk-supp__main { max-width: none; padding: 0 0 80px; }
.smk-supp__main > .container,
.smk-supp__main > section:not(.smk-supp-hero):not(.smk-supp-cta):not(.smk-supp-terminal):not(.smk-supp-darkstripe) {
    max-width: 1180px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* ----------------------------------------------------------------
   Dark hero shell — used on /support. Pure dark navy (no purple
   aurora) + grid mask. Full-bleed, full-screen height like the
   landing-page hero.
---------------------------------------------------------------- */
.smk-supp-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    color: #fff;
    border-radius: 0;
    padding: clamp(100px, 14vw, 180px) 24px clamp(80px, 10vw, 140px);
    min-height: 70vh;
    background: linear-gradient(135deg, #0a0e1f 0%, #0b1228 50%, #111041 100%);
    box-shadow: 0 40px 80px -40px rgba(15, 23, 42, .55);
    /* Full-bleed trick: break out of any parent container so the hero
       always spans the full viewport width regardless of which wrapper
       (main.surveymaker-animate / .smk-supp / .smk-supp__main) it sits in. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.smk-supp-hero::before {
    /* Grid pattern with radial mask — same recipe as the bottom CTA */
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 80%);
    pointer-events: none;
}
.smk-supp-hero::after { content: none; }

/* Hide the legacy floating blobs (now redundant with the aurora layer) */
.smk-supp-hero__blob { display: none; }

.smk-supp-hero__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.smk-supp-hero__h1 {
    font-size: clamp(40px, 5.6vw, 68px);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.02;
    color: #fff;
    background: none;
    -webkit-text-fill-color: #fff;
    margin: 0 0 14px;
    text-shadow: 0 4px 30px rgba(15,23,42,.35);
}
/* Highlight key word(s) inside the H1 if you wrap them in .smk-key */
.smk-supp-hero__h1 .smk-key,
.smk-supp-hero__h1 strong,
.smk-supp-hero__h1 .grad {
    background: linear-gradient(110deg, #2563eb 0%, #06b6d4 22%, #06b6d4 44%, #f59e0b 66%, #06b6d4 78%, #06b6d4 92%, #2563eb 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    animation: smk-v4-shimmer 6s linear infinite;
    font-weight: 800;
}
.smk-supp-hero__sub {
    color: rgba(255,255,255,.78);
    font-size: 18px;
    line-height: 1.55;
    max-width: 640px;
    margin: 0 auto 32px;
}

/* Search input on dark hero — needs darker fill so the white text shows */
.smk-supp-hero .smk-supp-search {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow:
        0 20px 50px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.10);
}
.smk-supp-hero .smk-supp-search:focus-within {
    box-shadow:
        0 0 0 6px rgba(255,255,255,.10),
        0 30px 60px rgba(0,0,0,.40);
    border-color: rgba(255,255,255,.30);
}
.smk-supp-hero .smk-supp-search__icon { color: rgba(255,255,255,.55); }
.smk-supp-hero .smk-supp-search__input { color: #fff; }
.smk-supp-hero .smk-supp-search__input::placeholder { color: rgba(255,255,255,.55); }
.smk-supp-hero .smk-supp-search__btn {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    box-shadow: 0 14px 28px rgba(37, 99, 235,.45);
}
/* Search dropdown stays light (readable results) */
.smk-supp-hero .smk-supp-search__pop {
    background: #fff;
    color: var(--c-text);
}

/* ----------------------------------------------------------------
   Full-bleed dark page header for KB / tickets / ticket-view / csat.
   Same recipe as .smk-supp-hero (dark navy + grid + full viewport
   width). Shorter than the /support hero — content needs more room.
---------------------------------------------------------------- */
.smk-supp-pageh {
    position: relative;
    padding: clamp(80px, 11vw, 140px) 24px clamp(40px, 6vw, 60px);
    margin: 0;
    border-radius: 0;
    color: #fff;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(135deg, #0a0e1f 0%, #0b1228 50%, #111041 100%);
    box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .55);
    /* Same full-bleed trick as .smk-supp-hero so it spans the viewport
       regardless of which container it's nested in. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.smk-supp-pageh::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 80%);
    pointer-events: none;
}
.smk-supp-pageh > * {
    position: relative; z-index: 1;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.smk-supp-pageh__h1 {
    color: #fff;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
}
.smk-supp-pageh__sub { color: rgba(255,255,255,.75); font-size: 17px; margin-top: 8px; }
.smk-supp-pageh__chip {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
}
.smk-supp-pageh--row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.smk-supp-pageh--row > * { width: auto; }
.smk-supp-pageh--row::before {
    /* Force the flex children to share the max-width row */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Action button (e.g. "New ticket") inside the dark pageh — keep gradient */
.smk-supp-pageh .smk-supp-btn--primary {
    background: #fff;
    color: #1d4ed8;
}
.smk-supp-pageh .smk-supp-btn--primary:hover { color: #1d4ed8; }

/* Breadcrumb on light bg before pageh — but we now have a dark hero, so the
   breadcrumb that sits ABOVE the dark hero needs to be on a white strip OR
   moved inside the hero. Keep above as light text for visual continuity. */

/* Search inside any dark page header (hero OR pageh) */
.smk-supp-hero .smk-supp-search,
.smk-supp-pageh .smk-supp-search {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow:
        0 20px 50px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.10);
    margin-top: 18px;
}
.smk-supp-hero .smk-supp-search__icon,
.smk-supp-pageh .smk-supp-search__icon { color: rgba(255,255,255,.55); }
.smk-supp-hero .smk-supp-search__input,
.smk-supp-pageh .smk-supp-search__input { color: #fff; }
.smk-supp-hero .smk-supp-search__input::placeholder,
.smk-supp-pageh .smk-supp-search__input::placeholder { color: rgba(255,255,255,.55); }

/* Breadcrumb that lives ABOVE a colored pageh — make it sit on light bg */
.smk-supp-crumb { padding: 0 24px; max-width: 1180px; margin: 0 auto 12px; }
.smk-supp-crumb a:hover { color: var(--c-brand); }

/* Sub-tab strip — pull it up so it overlaps the dark hero edge (Apple/Vercel
   pattern: tabs sit on the transition between dark hero and light body) */
.smk-supp__tabs {
    background: rgba(255,255,255,.92);
    border: 1px solid var(--c-line);
    border-radius: 999px;
    margin: -20px auto 32px;
    max-width: 900px;
    position: relative;
    z-index: 10;
    box-shadow: 0 20px 40px -20px rgba(15,23,42,.20);
}
.smk-supp__tabs-inner { padding: 6px; gap: 4px; justify-content: center; }
.smk-supp__tab { padding: 9px 18px; }

/* When the support pages render inside the dashboard shell, the dark hero
   is OK but the bordered margin doesn't make sense — let the hero fill. */
body.app .smk-supp-hero,
body.app .smk-supp-pageh { margin-left: 0; margin-right: 0; border-radius: 0; }
body.app .smk-supp__main { padding-top: 0; }
body.app .smk-supp__tabs { margin-top: -20px; }

/* Tickets table page header — match new colored treatment */
body.index .smk-supp__main .smk-supp-pageh,
body.app .smk-supp__main .smk-supp-pageh { position: relative; }

/* Stats / KB / cards on light bg — already styled, just make sure they
   pop after the dark hero break */
.smk-supp__main .smk-supp-section { margin-top: 40px; }

/* End SUPPORT CENTER colored heroes */

/* ==========================================================================
   ████  SUPPORT CENTER — FINAL HERO REWRITE  ████
   Single, aggressive, !important-loaded ruleset that obliterates every
   earlier hero/tabs rule. The shell renders hero FIRST, tabs SECOND
   (see _shell.php + _tabs.php), so we don't need flex re-ordering.
   ========================================================================== */

/* Zero out everything between viewport top and the hero on /support* */
body.index[data-smk-route^="support"],
body.index[data-smk-route^="support"] main.surveymaker-animate,
body.index[data-smk-route^="support"] .smk-supp,
body.index[data-smk-route^="support"] .smk-supp > .smk-supp-hero,
body.index[data-smk-route^="support"] .smk-supp > .smk-supp-pageh {
    margin: 0 !important;
    padding-top: 0 !important;
}
body.index[data-smk-route^="support"] { margin: 0 !important; padding-top: 0 !important; }
body.index[data-smk-route^="support"] main.surveymaker-animate { padding: 0 !important; }
body.index[data-smk-route^="support"] .smk-supp { padding: 0 !important; background: transparent !important; }

/* The hero — full bleed, dark navy, grid, no purple, sits at viewport y=0 */
body.index[data-smk-route^="support"] .smk-supp-hero,
body.index[data-smk-route^="support"] .smk-supp-pageh {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    text-align: center !important;
    overflow: hidden !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #0a0e1f 0%, #0b1228 50%, #111041 100%) !important;
    box-shadow: 0 40px 80px -40px rgba(15, 23, 42, .55);
}
body.index[data-smk-route="support"] .smk-supp-hero {
    min-height: 72vh !important;
    padding: clamp(120px, 16vw, 200px) 24px clamp(70px, 9vw, 120px) !important;
}
body.index[data-smk-route^="support"]:not([data-smk-route="support"]) .smk-supp-pageh {
    min-height: 0 !important;
    padding: clamp(110px, 13vw, 160px) 24px clamp(40px, 6vw, 70px) !important;
}

/* Hero/pageh grid pattern overlay */
body.index[data-smk-route^="support"] .smk-supp-hero::before,
body.index[data-smk-route^="support"] .smk-supp-pageh::before {
    content: "" !important;
    position: absolute !important; inset: 0 !important;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) !important;
    background-size: 48px 48px !important;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 80%) !important;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 80%) !important;
    pointer-events: none !important;
    background-color: transparent !important;
}
body.index[data-smk-route^="support"] .smk-supp-hero::after { content: none !important; }

/* Hero content (h1, sub, search) — constrain width, white text */
body.index[data-smk-route^="support"] .smk-supp-hero > *,
body.index[data-smk-route^="support"] .smk-supp-pageh > * {
    position: relative;
    z-index: 2;
    max-width: 760px;
    width: 100%;
}
body.index[data-smk-route^="support"] .smk-supp-pageh.smk-supp-pageh--row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
}
body.index[data-smk-route^="support"] .smk-supp-pageh.smk-supp-pageh--row > * { max-width: none; width: auto; }
body.index[data-smk-route^="support"] .smk-supp-pageh.smk-supp-pageh--row {
    padding-left: clamp(24px, 5vw, 100px) !important;
    padding-right: clamp(24px, 5vw, 100px) !important;
}

/* Tabs strip — sits BELOW the main navbar pill as a dark glass strip
   that bleeds into the top of the dark hero (no visible white seam). */
body.index[data-smk-route^="support"] .smk-supp__tabs {
    position: sticky !important;
    top: 75px !important;
    z-index: 1040;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background: rgba(10, 14, 31, .55) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 12px 24px -16px rgba(0,0,0,.30) !important;
}
body.index[data-smk-route^="support"] .smk-supp__tabs-inner {
    padding: 10px 24px !important;
    justify-content: center !important;
    gap: 6px !important;
}
body.index[data-smk-route^="support"] .smk-supp__tab {
    color: rgba(255,255,255,.75) !important;
    padding: 8px 16px !important;
    font-size: 13.5px !important;
}
body.index[data-smk-route^="support"] .smk-supp__tab:hover {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
}
body.index[data-smk-route^="support"] .smk-supp__tab.is-active {
    background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px -8px rgba(37, 99, 235,.55) !important;
}
body.index[data-smk-route^="support"] .smk-supp__tab i {
    color: inherit !important;
}

/* Body content under tabs — give it inner padding + max width */
body.index[data-smk-route^="support"] .smk-supp__main {
    display: block !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 8px 24px 80px !important;
}

/* Inner content of dark hero — bigger and bolder */
body.index[data-smk-route^="support"] .smk-supp-hero__inner { z-index: 2; }
body.index[data-smk-route^="support"] .smk-supp-hero__h1,
body.index[data-smk-route^="support"] .smk-supp-pageh__h1 {
    font-size: clamp(40px, 6vw, 72px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.045em !important;
    line-height: 1.02 !important;
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    margin: 0 0 14px !important;
    text-shadow: 0 4px 30px rgba(15,23,42,.35);
}
body.index[data-smk-route^="support"] .smk-supp-hero__sub,
body.index[data-smk-route^="support"] .smk-supp-pageh__sub {
    color: rgba(255,255,255,.78) !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
    margin: 0 auto 28px !important;
    max-width: 640px !important;
}

/* Search bar on dark hero */
body.index[data-smk-route^="support"] .smk-supp-search {
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    box-shadow:
        0 20px 50px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
    margin: 0 auto !important;
    max-width: 720px !important;
}
body.index[data-smk-route^="support"] .smk-supp-search__icon { color: rgba(255,255,255,.55) !important; }
body.index[data-smk-route^="support"] .smk-supp-search__input { color: #fff !important; }
body.index[data-smk-route^="support"] .smk-supp-search__input::placeholder { color: rgba(255,255,255,.55) !important; }

/* Hide the legacy blobs */
body.index[data-smk-route^="support"] .smk-supp-hero__blob { display: none !important; }

/* End SUPPORT CENTER FINAL HERO REWRITE */

/* ----------------------------------------------------------------
   Hot-fix: 100vw on the hero/pageh + visible scrollbar = horizontal
   page scroll. Clip the body on support routes (overflow-x only —
   NO max-width because that breaks Bootstrap's navbar responsive
   detection and makes the navbar collapse into mobile mode).
---------------------------------------------------------------- */
body.index[data-smk-route^="support"] {
    overflow-x: hidden !important;
}

/* Categories grid — force 4 columns on wide screens, scale down responsively */
body.index[data-smk-route^="support"] .smk-supp-cats {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 6px !important;
}
body.index[data-smk-route^="support"] .smk-supp-pop {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 10px !important;
}
body.index[data-smk-route^="support"] .smk-supp-kbi {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 18px !important;
}

/* ==========================================================================
   ████  SUPPORT CENTER  ████
   Entirely scoped under .smk-supp so it can't leak into the rest of the
   app. Lives outside the standard navbar — its own glass header + footer.
   ========================================================================== */
.smk-supp {
    --c-bg:        #f7f8fc;
    --c-bg-2:      #eef2f8;
    --c-text:      #0f172a;
    --c-muted:     #64748b;
    --c-line:      rgba(15,23,42,.08);
    --c-brand:     #2563eb;
    --c-brand-2:   #2563eb;
    --c-radius-l:  22px;
    --c-radius:    14px;
    --c-shadow-1:  0 1px 0 rgba(255,255,255,.6) inset, 0 10px 30px -14px rgba(15,23,42,.15);
    --c-shadow-2:  0 24px 60px -20px rgba(15,23,42,.30);
    color: var(--c-text);
    background:
        radial-gradient(900px 500px at 80% -10%, rgba(6, 182, 212,.10), transparent 60%),
        radial-gradient(700px 500px at -10% 200px, rgba(37,99,235,.08), transparent 60%),
        linear-gradient(180deg, #fafbff 0%, var(--c-bg) 100%);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
.smk-supp * { box-sizing: border-box; }
.smk-supp a { color: inherit; }

/* ---- Header ---- */
.smk-supp__bar {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    background: rgba(255,255,255,.78);
    border-bottom: 1px solid var(--c-line);
}
.smk-supp__bar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 24px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
}
.smk-supp__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-text); font-weight: 600; }
.smk-supp__brand-mark {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--c-brand), var(--c-brand-2));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px;
}
.smk-supp__brand-text strong { font-weight: 800; }
.smk-supp__nav { display: flex; gap: 4px; justify-content: center; }
.smk-supp__nav-item {
    padding: 8px 14px; border-radius: 999px;
    color: var(--c-muted);
    text-decoration: none;
    font-size: 14px; font-weight: 500;
    transition: background .2s ease, color .2s ease;
}
.smk-supp__nav-item:hover { background: rgba(37, 99, 235,.08); color: var(--c-text); }
.smk-supp__nav-item.is-active { background: rgba(37, 99, 235,.12); color: var(--c-brand); }
.smk-supp__bar-cta {
    background: linear-gradient(135deg, var(--c-brand), var(--c-brand-2));
    color: #fff;
    padding: 9px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    box-shadow: 0 10px 20px -8px rgba(37, 99, 235,.50);
    transition: transform .15s ease, box-shadow .15s ease;
}
.smk-supp__bar-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 24px -10px rgba(37, 99, 235,.65); color: #fff; }

.smk-supp__main { max-width: 1180px; margin: 0 auto; padding: 0 24px 80px; }
/* Hero is the first child on /support — kill its old top padding to avoid
   a double-margin under the sub-tab strip. */
.smk-supp__main .smk-supp-hero { padding-top: 24px; }

/* ---- Footer ---- */
.smk-supp__foot { border-top: 1px solid var(--c-line); padding: 24px; background: rgba(255,255,255,.5); }
.smk-supp__foot-inner { max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; color: var(--c-muted); font-size: 13px; }
.smk-supp__foot-links a { margin-left: 18px; text-decoration: none; }
.smk-supp__foot-links a:hover { color: var(--c-brand); }

/* ---- Buttons ---- */
.smk-supp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; text-decoration: none; border: 0; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
.smk-supp-btn--primary { background: linear-gradient(135deg, var(--c-brand), var(--c-brand-2)); color: #fff; box-shadow: 0 12px 24px -10px rgba(37, 99, 235,.45); }
.smk-supp-btn--primary:hover { transform: translateY(-1px); color: #fff; }
.smk-supp-btn--ghost { background: rgba(255,255,255,.85); color: var(--c-text); border: 1px solid var(--c-line); }
.smk-supp-btn--ghost:hover { background: #fff; }

/* ---- Hero ---- */
.smk-supp-hero { position: relative; padding: 56px 0 36px; text-align: center; overflow: hidden; }
.smk-supp-hero__blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; }
.smk-supp-hero__blob--a { width: 360px; height: 360px; background: #67e8f9; left: 10%; top: -100px; }
.smk-supp-hero__blob--b { width: 320px; height: 320px; background: #fbcfe8; right: 8%; top: 0; }
.smk-supp-hero__inner { position: relative; max-width: 760px; margin: 0 auto; }
.smk-supp-hero__h1 { font-size: clamp(34px, 4.5vw, 56px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 12px; }
.smk-supp-hero__sub { color: var(--c-muted); font-size: 17px; line-height: 1.55; margin: 0 0 30px; }

/* ---- Search ---- */
.smk-supp-search {
    position: relative;
    display: flex; align-items: center;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    padding: 6px 8px 6px 18px;
    max-width: 720px; margin: 0 auto;
    box-shadow: var(--c-shadow-1);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.smk-supp-search:focus-within { border-color: rgba(37, 99, 235,.4); box-shadow: 0 0 0 6px rgba(37, 99, 235,.10), var(--c-shadow-1); }
.smk-supp-search__icon { color: var(--c-muted); margin-right: 10px; }
.smk-supp-search__input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; height: 44px; padding: 0; color: var(--c-text); }
.smk-supp-search__btn { background: linear-gradient(135deg, var(--c-brand), var(--c-brand-2)); color: #fff; border: 0; padding: 0 18px; height: 40px; border-radius: 999px; font-weight: 600; font-size: 13px; cursor: pointer; }
.smk-supp-search__pop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border-radius: 16px; border: 1px solid var(--c-line); box-shadow: var(--c-shadow-2); padding: 8px; max-height: 420px; overflow-y: auto; z-index: 10; }
.smk-supp-search__row { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--c-text); }
.smk-supp-search__row:hover { background: rgba(37, 99, 235,.08); }
.smk-supp-search__row strong { display: block; font-size: 14px; }
.smk-supp-search__row span { display: block; font-size: 12.5px; color: var(--c-muted); margin-top: 2px; }
.smk-supp-search__none { padding: 14px; color: var(--c-muted); font-size: 13px; text-align: center; }
.smk-supp-search--inline { margin-top: 14px; }

/* ---- Sections ---- */
.smk-supp-section { margin-top: 56px; }
.smk-supp-section__head { text-align: center; margin-bottom: 24px; }
.smk-supp-section__h2 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.02em; margin: 0; }

/* ---- Category tiles ---- */
.smk-supp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.smk-supp-cat {
    display: flex; align-items: flex-start; gap: 14px;
    background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius); padding: 18px;
    text-decoration: none; color: inherit;
    transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
    box-shadow: var(--c-shadow-1);
    position: relative; overflow: hidden;
}
.smk-supp-cat:hover { transform: translateY(-3px); box-shadow: var(--c-shadow-2); border-color: rgba(37, 99, 235,.2); }
.smk-supp-cat__ico {
    width: 44px; height: 44px; border-radius: 12px;
    background: color-mix(in srgb, var(--c, var(--c-brand)) 14%, transparent);
    color: var(--c, var(--c-brand));
    display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.smk-supp-cat__name { display: block; font-weight: 700; font-size: 15px; }
.smk-supp-cat__desc { display: block; color: var(--c-muted); font-size: 13px; margin-top: 2px; line-height: 1.4; }
.smk-supp-cat__count { display: block; color: var(--c-muted); font-size: 11px; margin-top: 8px; text-transform: uppercase; letter-spacing: .06em; }
.smk-supp-cat__arrow { color: var(--c-muted); margin-left: auto; align-self: center; transition: transform .2s ease, color .2s ease; }
.smk-supp-cat:hover .smk-supp-cat__arrow { color: var(--c-brand); transform: translateX(2px); }

/* ---- Popular list ---- */
.smk-supp-pop { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.smk-supp-pop__link { display: flex; gap: 14px; align-items: center; padding: 14px 18px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius); text-decoration: none; color: inherit; transition: border-color .2s, transform .15s; }
.smk-supp-pop__link:hover { border-color: rgba(37, 99, 235,.30); transform: translateX(2px); }
.smk-supp-pop__ico { color: var(--c-brand); }
.smk-supp-pop__link strong { font-weight: 600; font-size: 14.5px; display: block; }
.smk-supp-pop__link small { color: var(--c-muted); font-size: 12.5px; display: block; margin-top: 2px; }

/* ---- CTA card ---- */
.smk-supp-cta { margin-top: 70px; }
.smk-supp-cta__inner {
    background: linear-gradient(135deg, #0b1228 0%, #1a1142 100%);
    border-radius: 24px;
    padding: 48px 32px;
    text-align: center;
    color: #fff;
    position: relative; overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(37, 99, 235,.40);
}
.smk-supp-cta__inner h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.smk-supp-cta__inner p { color: rgba(255,255,255,.75); margin: 0 0 20px; }

/* ---- Page headers ---- */
.smk-supp-pageh { margin: 12px 0 26px; }
.smk-supp-pageh--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.smk-supp-pageh__h1 { font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -.025em; margin: 0; display: inline-flex; align-items: center; gap: 12px; }
.smk-supp-pageh__sub { color: var(--c-muted); margin: 8px 0 0; }
.smk-supp-pageh__chip { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c, var(--c-brand)) 14%, transparent); color: var(--c, var(--c-brand)); font-size: 18px; }

.smk-supp-crumb { color: var(--c-muted); font-size: 13px; margin: 4px 0 14px; }
.smk-supp-crumb a { text-decoration: none; }
.smk-supp-crumb a:hover { color: var(--c-brand); }

/* ---- KB index ---- */
.smk-supp-kbi { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 8px; }
.smk-supp-kbi__col { background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius); padding: 18px; box-shadow: var(--c-shadow-1); }
.smk-supp-kbi__head { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-weight: 700; font-size: 16px; margin-bottom: 12px; }
.smk-supp-kbi__ico { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c, var(--c-brand)) 14%, transparent); color: var(--c, var(--c-brand)); font-size: 14px; }
.smk-supp-kbi__list { list-style: none; padding: 0; margin: 0; }
.smk-supp-kbi__list li { padding: 6px 0; font-size: 14px; }
.smk-supp-kbi__list a { text-decoration: none; color: var(--c-muted); display: block; }
.smk-supp-kbi__list a:hover { color: var(--c-brand); }
.smk-supp-kbi__empty { color: var(--c-muted); font-size: 13px; font-style: italic; }

/* ---- Article cards (category page) ---- */
.smk-supp-art-list { display: grid; grid-template-columns: 1fr; gap: 14px; }
.smk-supp-art-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius); padding: 20px 24px; text-decoration: none; color: inherit; box-shadow: var(--c-shadow-1); transition: transform .15s ease, box-shadow .2s ease, border-color .2s; }
.smk-supp-art-card:hover { transform: translateY(-2px); border-color: rgba(37, 99, 235,.3); box-shadow: var(--c-shadow-2); }
.smk-supp-art-card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.smk-supp-art-card p { color: var(--c-muted); margin: 0 0 10px; font-size: 14px; }
.smk-supp-art-card__meta { display: flex; gap: 18px; color: var(--c-muted); font-size: 12px; }

/* ---- Article view ---- */
.smk-supp-art { max-width: 780px; margin: 0 auto; background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius-l); padding: 40px clamp(20px, 3vw, 48px); box-shadow: var(--c-shadow-1); }
.smk-supp-art__h1 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; letter-spacing: -.025em; margin: 0 0 12px; }
.smk-supp-art__lead { color: var(--c-muted); font-size: 17px; line-height: 1.55; margin: 0 0 18px; }
.smk-supp-art__meta { color: var(--c-muted); font-size: 12.5px; display: flex; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--c-line); margin-bottom: 24px; }
.smk-supp-art__body { font-size: 15.5px; line-height: 1.7; color: #1f2937; }
.smk-supp-art__body h2 { font-size: 24px; font-weight: 800; margin: 32px 0 12px; }
.smk-supp-art__body h3 { font-size: 18px; font-weight: 700; margin: 24px 0 10px; }
.smk-supp-art__body p { margin: 0 0 14px; }
.smk-supp-art__body code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.smk-supp-art__body pre { background: #0d1117; color: #c9d1d9; padding: 16px 20px; border-radius: 10px; overflow-x: auto; font-size: 13px; }
.smk-supp-art__body ul, .smk-supp-art__body ol { padding-left: 22px; margin: 0 0 14px; }
.smk-supp-art__body img { max-width: 100%; border-radius: 8px; margin: 12px 0; }

.smk-supp-rate { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--c-line); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.smk-supp-rate__q { color: var(--c-muted); margin-right: 8px; }
.smk-supp-rate__btn { background: #fff; border: 1px solid var(--c-line); padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; transition: border-color .2s, background .2s; }
.smk-supp-rate__btn:hover { border-color: rgba(37, 99, 235,.4); background: rgba(37, 99, 235,.04); }
.smk-supp-rate__thanks { color: #10b981; font-weight: 600; font-size: 13px; }

.smk-supp-related { margin-top: 50px; }
.smk-supp-related__h { font-size: 20px; font-weight: 700; margin: 0 0 14px; }
.smk-supp-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.smk-supp-related__card { display: block; background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius); padding: 16px; text-decoration: none; color: inherit; transition: border-color .2s, transform .15s; }
.smk-supp-related__card:hover { border-color: rgba(37, 99, 235,.3); transform: translateY(-2px); }
.smk-supp-related__card strong { display: block; font-size: 14.5px; }
.smk-supp-related__card small { display: block; color: var(--c-muted); font-size: 12.5px; margin: 4px 0 10px; }
.smk-supp-related__card span { color: var(--c-brand); font-size: 12.5px; font-weight: 600; }

/* ---- Forms ---- */
.smk-supp-form { background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius-l); padding: 32px; box-shadow: var(--c-shadow-1); max-width: 760px; margin: 0 auto; display: grid; gap: 18px; }
.smk-supp-form__row { display: grid; gap: 18px; }
.smk-supp-form__row--two { grid-template-columns: 1fr 1fr; }
.smk-supp-form label { display: block; }
.smk-supp-form__lab { display: block; font-size: 13px; font-weight: 600; color: var(--c-muted); margin-bottom: 6px; }
.smk-supp-form__inp { width: 100%; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; font-size: 15px; font-family: inherit; transition: border-color .2s, box-shadow .2s; }
.smk-supp-form__inp:focus { outline: none; border-color: rgba(37, 99, 235,.5); box-shadow: 0 0 0 4px rgba(37, 99, 235,.10); }
.smk-supp-form__ta { resize: vertical; min-height: 140px; line-height: 1.55; }
.smk-supp-form__actions { display: flex; gap: 10px; align-items: center; }
@media (max-width: 640px) { .smk-supp-form__row--two { grid-template-columns: 1fr; } }

/* ---- Tickets table ---- */
.smk-supp-table-wrap { background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius); overflow: hidden; box-shadow: var(--c-shadow-1); }
.smk-supp-table { width: 100%; border-collapse: collapse; }
.smk-supp-table th { background: #f8fafc; padding: 12px 16px; text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); font-weight: 600; }
.smk-supp-table td { padding: 14px 16px; border-top: 1px solid var(--c-line); font-size: 14px; }
.smk-supp-table tbody tr { cursor: pointer; transition: background .15s; }
.smk-supp-table tbody tr:hover { background: rgba(37, 99, 235,.04); }
.smk-supp-table a { text-decoration: none; color: var(--c-text); }

.smk-supp-ref { font-family: 'SF Mono', 'JetBrains Mono', monospace; background: #f1f5f9; padding: 3px 8px; border-radius: 6px; font-size: 12px; color: var(--c-muted); }
.smk-supp-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.smk-supp-badge--open             { background: #e0e7ff; color: #1d4ed8; }
.smk-supp-badge--pending          { background: #fef3c7; color: #92400e; }
.smk-supp-badge--waiting_customer { background: #cffafe; color: #155e75; }
.smk-supp-badge--resolved         { background: #dcfce7; color: #166534; }
.smk-supp-badge--closed           { background: #e2e8f0; color: #475569; }
.smk-supp-badge--prio-low    { background: #f1f5f9; color: #475569; }
.smk-supp-badge--prio-normal { background: #e0e7ff; color: #1d4ed8; }
.smk-supp-badge--prio-high   { background: #fed7aa; color: #9a3412; }
.smk-supp-badge--prio-urgent { background: #fecaca; color: #b91c1c; }

/* ---- Ticket thread ---- */
.smk-supp-thread { display: grid; gap: 14px; max-width: 820px; margin: 0 auto 24px; }
.smk-supp-msg { background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius); padding: 18px 22px; box-shadow: var(--c-shadow-1); }
.smk-supp-msg--agent { background: linear-gradient(180deg, #eff6ff, #fff); border-left: 4px solid var(--c-brand); }
.smk-supp-msg--customer { background: #fff; }
.smk-supp-msg--system { background: #f8fafc; font-size: 13px; color: var(--c-muted); text-align: center; padding: 12px; }
.smk-supp-msg__head { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.smk-supp-msg__author { font-weight: 600; }
.smk-supp-msg__when { color: var(--c-muted); }
.smk-supp-msg__body { font-size: 14.5px; line-height: 1.55; color: #1f2937; white-space: pre-wrap; }

.smk-supp-reply { max-width: 820px; margin: 0 auto; background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius); padding: 18px; box-shadow: var(--c-shadow-1); }
.smk-supp-reply__actions { display: flex; justify-content: flex-end; margin-top: 12px; }

.smk-supp-ticket__actions { display: flex; gap: 8px; }
.smk-supp-empty { text-align: center; padding: 60px 20px; color: var(--c-muted); background: #fff; border: 1px dashed var(--c-line); border-radius: var(--c-radius); }

@media (max-width: 880px) {
    .smk-supp__bar-inner { grid-template-columns: auto auto; }
    .smk-supp__nav { grid-column: 1 / -1; order: 3; justify-content: flex-start; overflow-x: auto; }
    .smk-supp__bar-cta { display: none; }
}

/* ---- Support routes — use the SAME landing-page glass navbar
   (no separate support header). The support shell adds a sub-tab
   strip under the navbar; alerts get pushed below the floating pill. ---- */

/* Make the landing page navbar apply on every support route too */
body.index[data-smk-route="support"] .navbar-custom,
body.index[data-smk-route="support-kb"] .navbar-custom,
body.index[data-smk-route="support-tickets"] .navbar-custom,
body.index[data-smk-route="support-ticket"] .navbar-custom,
body.index[data-smk-route="support-rate"] .navbar-custom,
body.index[data-smk-route="support-csat"] .navbar-custom,
body.index[data-smk-route="support-attachment"] .navbar-custom {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 18px !important;
    min-height: 60px !important;
    border-radius: 0 !important;
    background: rgba(10, 18, 36, .55) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(22px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
    box-shadow: none !important;
    z-index: 1050 !important;
}
body[data-smk-route="support"] .navbar-custom > .container,
body[data-smk-route="support-kb"] .navbar-custom > .container,
body[data-smk-route="support-tickets"] .navbar-custom > .container,
body[data-smk-route="support-ticket"] .navbar-custom > .container,
body[data-smk-route="support-rate"] .navbar-custom > .container,
body[data-smk-route="support-csat"] .navbar-custom > .container,
body[data-smk-route="support-attachment"] .navbar-custom > .container {
    padding-left: 0 !important; padding-right: 0 !important;
    margin: 0 !important; max-width: 100% !important;
}

/* ----------------------------------------------------------------
   FULL-BLEED HERO FIX — every /support* route on the marketing wrapper
   gets the hero at viewport y=0 with ZERO white above it.
   The shell renders <tabs> BEFORE <main>, so we use flexbox order
   to visually swap them: hero first, sub-tab pill overlaps below.
---------------------------------------------------------------- */
body.index[data-smk-route^="support"],
body.index[data-smk-route^="support"] main.surveymaker-animate {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.index[data-smk-route^="support"] .smk-supp {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
}
/* NO flex reordering — _shell.php outputs tabs FIRST in DOM, hero second.
   That's the order we want visually: navbar → tabs → hero → content. */

/* ==========================================================================
   DASHBOARD VARIANT — completely separate styling.
   Support pages rendered inside body.app use the dashboard chrome
   (sidebar + topbar). No full-bleed hero, no 100vh, just normal
   dashboard-page content with the SurveyMaker app spacing.
   ========================================================================== */
body.app .smk-supp { background: transparent; padding: 0 !important; margin: 0 !important; }
body.app .smk-supp__tabs { display: none !important; }
body.app .smk-supp__main { padding: 0 !important; max-width: none !important; margin: 0 !important; }

/* Convert the dramatic full-bleed dark hero into a compact dashboard
   "page header" card — same look as other dashboard pages. */
body.app .smk-supp-hero,
body.app .smk-supp-pageh {
    position: relative !important;
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 0 20px !important;
    padding: 32px clamp(20px, 3vw, 40px) !important;
    border-radius: 18px !important;
    color: #fff !important;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0e1f 0%, #0b1228 50%, #111041 100%) !important;
    box-shadow: 0 14px 28px -14px rgba(15,23,42,.30);
    text-align: left;
}
body.app .smk-supp-hero::before,
body.app .smk-supp-pageh::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 90%);
    border-radius: inherit;
    pointer-events: none;
}
body.app .smk-supp-hero::after { content: none !important; }
body.app .smk-supp-hero > *,
body.app .smk-supp-pageh > * { position: relative; z-index: 2; max-width: none; width: auto; }
body.app .smk-supp-hero__h1,
body.app .smk-supp-pageh__h1 {
    color: #fff !important;
    font-size: clamp(22px, 2.5vw, 32px) !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.025em !important;
    text-shadow: none !important;
}
body.app .smk-supp-hero__sub,
body.app .smk-supp-pageh__sub {
    color: rgba(255,255,255,.75) !important;
    font-size: 14px !important;
    margin: 0 0 16px !important;
    max-width: 640px !important;
}
body.app .smk-supp-search {
    max-width: 560px !important;
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.18) !important;
    margin: 0 !important;
}
body.app .smk-supp-hero__blob,
body.app .smk-supp-hero__inner { /* keep inner natural */ }
body.app .smk-supp-hero__inner { max-width: none; width: auto; }

/* Section spacing inside dashboard support pages */
body.app .smk-supp-section { margin-top: 28px; }
body.app .smk-supp-section__h2 { font-size: 18px !important; text-align: left !important; }
body.app .smk-supp-section__head { text-align: left !important; margin-bottom: 14px !important; }

/* Cards on dashboard — keep compact */
body.app .smk-supp-cats {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 12px !important;
}
body.app .smk-supp-cat { padding: 16px !important; border-radius: 12px !important; }
body.app .smk-supp-pop { gap: 8px !important; }
body.app .smk-supp-cta__inner { padding: 32px !important; border-radius: 18px !important; }

/* Push the flash-alerts strip below the floating navbar */
body.index[data-smk-route="support"] #notification_messages,
body.index[data-smk-route="support-kb"] #notification_messages,
body.index[data-smk-route="support-tickets"] #notification_messages,
body.index[data-smk-route="support-ticket"] #notification_messages,
body.index[data-smk-route="support-rate"] #notification_messages,
body.index[data-smk-route="support-csat"] #notification_messages,
body.index[data-smk-route="support-attachment"] #notification_messages,
body.index[data-smk-route="support"] .alert,
body.index[data-smk-route="support-kb"] .alert,
body.index[data-smk-route="support-tickets"] .alert,
body.index[data-smk-route="support-ticket"] .alert,
body.index[data-smk-route="support-rate"] .alert,
body.index[data-smk-route="support-csat"] .alert {
    margin-top: 12px !important;
}

/* Hide the old smk-supp internal bar + footer if any remnants render */
.smk-supp__bar, .smk-supp__foot { display: none !important; }

/* Sub-tab strip under the navbar */
.smk-supp__tabs {
    position: sticky;
    top: 96px;
    z-index: 40;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid var(--c-line);
    margin-bottom: 24px;
}
.smk-supp__tabs-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
}
.smk-supp__tab {
    padding: 9px 16px;
    border-radius: 999px;
    color: var(--c-muted);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.smk-supp__tab:hover { background: rgba(37, 99, 235,.08); color: var(--c-text); }
.smk-supp__tab.is-active {
    background: linear-gradient(135deg, var(--c-brand), var(--c-brand-2));
    color: #fff;
    box-shadow: 0 8px 16px -8px rgba(37, 99, 235,.45);
}

/* End SUPPORT CENTER */


/* =========================================================================
   ████  RTL FINAL PASS — guarantees a real mirror in Arabic  ████
   Lives at the end of the stylesheet so it wins the cascade over any
   earlier LTR-biased rule. Covers the dashboard shell, support sub-shell,
   admin sidebar, mobile breakpoints, and a handful of left/right
   positionings that the original CSS overlooked.
   ========================================================================= */

/* --- Dashboard shell columns: rail goes RIGHT, main canvas goes LEFT ---
   CSS Grid + `dir="rtl"` is treacherous: when the container inherits RTL,
   the browser auto-flips column placement, which fights any explicit
   `grid-template-areas` we set. Force the grid CONTAINER to LTR so areas
   land exactly where we name them, then restore `direction: rtl` on the
   children so the actual content inside each cell still reads RTL. */
[dir="rtl"] .smk-shell {
    direction: ltr !important;
    grid-template-columns: 1fr 264px 76px !important;
    grid-template-areas: "main nav rail" !important;
}
[dir="rtl"] .smk-shell > * { direction: rtl; }
[dir="rtl"] body.smk-shell-nav-collapsed .smk-shell,
body.smk-shell-nav-collapsed[dir="rtl"] .smk-shell {
    direction: ltr !important;
    grid-template-columns: 1fr 0 76px !important;
    grid-template-areas: "main nav rail" !important;
}
[dir="rtl"] .smk-shell__rail {
    border-right: 0 !important;
    border-left: 1px solid var(--smk-border) !important;
}
[dir="rtl"] .smk-shell__nav {
    border-right: 0 !important;
    border-left: 1px solid var(--smk-border) !important;
}

/* --- Topbar: brand-side actions land on the right, page crumb on the right --- */
[dir="rtl"] .smk-shell__topbar { flex-direction: row-reverse; }
[dir="rtl"] .smk-shell__topbar-actions { flex-direction: row-reverse; }
[dir="rtl"] .smk-shell__crumb { text-align: right; }
[dir="rtl"] .smk-shell__nav-toggle { margin-left: .75rem; margin-right: 0; }

/* --- Sidebar items: icons sit on the start (right) edge of the row --- */
[dir="rtl"] .smk-shell__item,
[dir="rtl"] .smk-shell__rail-item { text-align: right; }
[dir="rtl"] .smk-shell__item i,
[dir="rtl"] .smk-shell__rail-item i { margin-right: 0; margin-left: .5rem; }
[dir="rtl"] .smk-shell__group-label { text-align: right; padding-right: .85rem; padding-left: 0; }

/* --- Search field in nav head: icon stays on the leading edge (right) --- */
[dir="rtl"] .smk-shell__search-icon { left: auto !important; right: 10px !important; }
[dir="rtl"] .smk-shell__search .form-control {
    padding-left: .75rem !important;
    padding-right: 32px !important;
}

/* --- Collapse arrow points the natural way --- */
[dir="rtl"] .smk-shell__collapse i { transform: scaleX(-1); }
body.smk-shell-nav-collapsed[dir="rtl"] .smk-shell__collapse i { transform: scaleX(1); }

/* --- Mobile drawer: slides from the right edge --- */
@media (max-width: 991.98px) {
    [dir="rtl"] .smk-shell {
        direction: ltr !important;
        grid-template-columns: 1fr 76px !important;
        grid-template-areas: "main rail" !important;
    }
    [dir="rtl"] .smk-shell__nav {
        left: auto !important;
        right: 76px !important;
        transform: translateX(110%) !important;
    }
    body.smk-shell-nav-open[dir="rtl"] .smk-shell__nav {
        transform: translateX(0) !important;
    }
}
@media (max-width: 575.98px) {
    [dir="rtl"] .smk-shell {
        direction: ltr !important;
        grid-template-columns: 1fr 0 !important;
        grid-template-areas: "main rail" !important;
    }
    [dir="rtl"] .smk-shell__rail {
        left: auto !important;
        right: 0 !important;
        transform: translateX(110%) !important;
    }
    body.smk-shell-nav-open[dir="rtl"] .smk-shell__rail {
        transform: translateX(0) !important;
    }
    body.smk-shell-nav-open[dir="rtl"] .smk-shell__nav { left: auto; right: 76px; }
}

/* --- Avatar dropdown: align to the right edge of the topbar in RTL --- */
[dir="rtl"] .smk-shell__avatar-menu { right: 0 !important; left: auto !important; }
[dir="rtl"] .smk-shell__cta-menu    { right: 0 !important; left: auto !important; }

/* --- Support sub-shell (the .smk-supp tabs strip) --- */
[dir="rtl"] .smk-supp__tabs-inner { flex-direction: row-reverse; }
[dir="rtl"] .smk-supp__tab i { margin-right: 0; margin-left: .25rem; }

/* --- Admin sidebar: stick to the right edge in Arabic --- */
@media (min-width: 992px) {
    [dir="rtl"] .admin-sidebar {
        right: 1.5rem !important;
        left: auto !important;
        margin-right: 0 !important;
        margin-left: initial !important;
    }
    [dir="rtl"] .admin-content {
        margin-right: calc(275px + 1.5rem) !important;
        margin-left: 1.5rem !important;
    }
}
[dir="rtl"] .admin-sidebar-links li > a i,
[dir="rtl"] .admin-sidebar-links li > a svg {
    margin-right: 0 !important;
    margin-left: .5rem !important;
}
[dir="rtl"] .admin-sidebar-links li > a { text-align: right; }

/* --- Caret on sub-menu toggles flips so the affordance still reads correctly --- */
[dir="rtl"] .admin-sidebar-links li > a .fa-caret-down { float: left; }

/* End RTL FINAL PASS */

/* =========================================================================
   SMK Auth shell — split-screen layout used by /login and /register only.
   Form markup is unchanged; this just retheme the surrounding container
   and gives inputs/buttons a modern feel. Dark + RTL aware via tokens.
   ========================================================================= */
body.smk-auth-shell {
    margin: 0;
    background: var(--smk-surface-2);
    color: var(--smk-ink-900);
}
/* On the auth shell, the announcement banner sits as a normal flow strip
   above the split-screen layout. Strip the pill radius + outer margin so it
   reads as a full-width ribbon rather than a floating pill, and let the
   split shell consume the remaining viewport height beneath it. */
body.smk-auth-shell .announcement-wrapper {
    position: relative;
    z-index: 2;
    margin: 0 !important;
    border-radius: 0 !important;
}
body.smk-auth-shell .smk-auth { min-height: 100vh; }

.smk-auth {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    min-height: 100vh;
    width: 100%;
    background: var(--smk-surface-2);
}

/* --- Hero (left on LTR, right on RTL) ------------------------------------ */
.smk-auth__hero {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 4vw, 4rem);
    color: #ffffff;
    background: linear-gradient(135deg, #1d4ed8 0%, #0e7490 55%, #db2777 100%);
    /* Center the title/chips group vertically so the panel never has the giant
       empty top half we used to get with space-between + bottom-pinned body.
       The brand chip is absolutely positioned at the top-left so it doesn't
       pull the body off-center. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    isolation: isolate;
}
.smk-auth__hero::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(800px 400px at 90% 110%, rgba(255,255,255,.12) 0%, transparent 60%),
        radial-gradient(600px 300px at 10% -10%, rgba(255,255,255,.10) 0%, transparent 55%);
    pointer-events: none;
    z-index: -1;
}
.smk-auth__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    pointer-events: none;
    z-index: -1;
}
.smk-auth__blob--a { width: 380px; height: 380px; background: #22d3ee; top: -120px; left: -120px; }
.smk-auth__blob--b { width: 320px; height: 320px; background: #22d3ee; bottom: -100px; right: -80px; }
.smk-auth__blob--c { width: 260px; height: 260px; background: #22d3ee; top: 40%; right: 20%; opacity: .35; }

.smk-auth__hero-brand {
    position: absolute;
    top: clamp(1.5rem, 3vw, 2.5rem);
    left: clamp(1.5rem, 3vw, 2.5rem);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #ffffff;
    z-index: 2;
}
.smk-auth__hero-brand:hover { text-decoration: none; color: #ffffff; opacity: .9; }
.smk-auth__hero-logo {
    max-height: 44px;
    width: auto;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}
.smk-auth__hero-wordmark { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
[dir="rtl"] .smk-auth__hero-brand { left: auto; right: clamp(1.5rem, 3vw, 2.5rem); }

.smk-auth__hero-body {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin-top: clamp(2rem, 6vh, 4rem); /* leave room for the absolute brand */
}
.smk-auth__hero-title {
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 1rem 0;
    color: #ffffff;
}
.smk-auth__hero-subtitle {
    font-size: 1rem;
    color: rgba(255,255,255,.85);
    margin: 0 0 2rem 0;
}
.smk-auth__hero-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}
.smk-auth__hero-points li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .9rem;
    border-radius: var(--smk-r-pill);
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    color: #ffffff;
    font-size: .85rem;
    font-weight: 500;
    backdrop-filter: blur(6px);
}
.smk-auth__hero-points i { font-size: .8rem; opacity: .9; }

/* --- Panel (form side) --------------------------------------------------- */
.smk-auth__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 3vw, 3rem);
    background: var(--smk-surface);
}
.smk-auth__panel-inner {
    width: 100%;
    max-width: 460px;
}
.smk-auth__mobile-brand {
    display: none;
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--smk-ink-900);
}
.smk-auth__mobile-brand img { max-height: 40px; width: auto; }

.smk-auth__card {
    background: var(--smk-surface);
    color: var(--smk-ink-900);
    border-radius: var(--smk-r-lg);
    padding: clamp(1.25rem, 2.2vw, 2rem);
}
@media (max-width: 991.98px) {
    .smk-auth__card {
        background: var(--smk-surface);
        border: 1px solid var(--smk-border-soft);
        box-shadow: var(--smk-shadow-2);
    }
}

/* --- Form modernization (scoped to the auth shell so nothing leaks) ------ */
.smk-auth__card h1.h5 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--smk-ink-900);
    margin-bottom: .25rem;
}
.smk-auth__card h1.h5 + form { margin-top: 1.5rem !important; }

.smk-auth__card .form-group { margin-bottom: 1rem; }
.smk-auth__card .form-group label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--smk-ink-700);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: .35rem;
}
.smk-auth__card .form-control {
    height: 48px;
    border-radius: var(--smk-r-md);
    border: 1px solid var(--smk-border);
    background: var(--smk-surface);
    color: var(--smk-ink-900);
    padding: .65rem .9rem;
    font-size: .95rem;
    transition: border-color var(--smk-dur-base) var(--smk-ease),
                box-shadow var(--smk-dur-base) var(--smk-ease),
                background var(--smk-dur-base) var(--smk-ease);
}
.smk-auth__card .form-control:focus {
    border-color: var(--smk-brand);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .15);
    outline: 0;
}
.smk-auth__card .form-control.is-invalid {
    border-color: var(--smk-danger);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .12);
}
/* Browsers (Chrome especially) paint a yellow/grey background on autofilled
   inputs which fights the white field. Repaint to match the surface. */
.smk-auth__card .form-control:-webkit-autofill,
.smk-auth__card .form-control:-webkit-autofill:hover,
.smk-auth__card .form-control:-webkit-autofill:focus,
.smk-auth__card .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--smk-surface) inset !important;
    -webkit-text-fill-color: var(--smk-ink-900) !important;
    caret-color: var(--smk-ink-900);
    transition: background-color 5000s ease-in-out 0s;
}
[data-theme-style="dark"] .smk-auth__card .form-control:-webkit-autofill,
[data-theme-style="dark"] .smk-auth__card .form-control:-webkit-autofill:hover,
[data-theme-style="dark"] .smk-auth__card .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--smk-surface-2) inset !important;
}

/* Input affix wrapper — optional icon prefix added by the view */
.smk-auth__field { position: relative; }
.smk-auth__field-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--smk-ink-500);
    pointer-events: none;
    font-size: .9rem;
}
.smk-auth__field .form-control { padding-left: 42px; }
[dir="rtl"] .smk-auth__field-icon { left: auto; right: 14px; }
[dir="rtl"] .smk-auth__field .form-control { padding-left: .9rem; padding-right: 42px; }

/* Primary CTA */
.smk-auth__card .btn-primary {
    height: 48px;
    border-radius: var(--smk-r-md);
    font-weight: 600;
    letter-spacing: .01em;
    border: 0;
    background: var(--smk-grad-cta);
    box-shadow: 0 8px 22px rgba(37, 99, 235, .25);
    transition: transform var(--smk-dur-fast) var(--smk-ease),
                box-shadow var(--smk-dur-base) var(--smk-ease),
                filter var(--smk-dur-base) var(--smk-ease);
}
.smk-auth__card .btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(37, 99, 235, .32);
    filter: brightness(1.04);
}
.smk-auth__card .btn-primary:disabled {
    opacity: .65;
    box-shadow: none;
}

/* Divider with label between form and social row */
.smk-auth__divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--smk-ink-500);
    font-size: .8rem;
    margin: 1.5rem 0 1rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.smk-auth__divider::before,
.smk-auth__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--smk-border);
}

/* Social row — pill icon buttons that scale with how many providers are on */
.smk-auth__social {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: .5rem;
}
.smk-auth__social .btn {
    height: 46px;
    border-radius: var(--smk-r-md);
    background: var(--smk-surface);
    border: 1px solid var(--smk-border);
    color: var(--smk-ink-900);
    font-weight: 500;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 0 .9rem;
    transition: border-color var(--smk-dur-fast) var(--smk-ease),
                background var(--smk-dur-fast) var(--smk-ease),
                transform var(--smk-dur-fast) var(--smk-ease);
}
.smk-auth__social .btn:hover {
    border-color: var(--smk-brand);
    background: var(--smk-brand-soft);
    transform: translateY(-1px);
}
.smk-auth__social .btn img { width: 18px; height: 18px; margin: 0; }
.smk-auth__social .btn span.smk-auth__social-label { white-space: nowrap; }

/* Footer line: switch between login <-> register */
.smk-auth__switch {
    margin-top: 2rem;
    text-align: center;
    color: var(--smk-ink-500);
    font-size: .9rem;
}
.smk-auth__switch a {
    color: var(--smk-brand);
    font-weight: 600;
}

/* --- Responsive: stack on tablet/phone ---------------------------------- */
@media (max-width: 991.98px) {
    .smk-auth { grid-template-columns: 1fr; min-height: 100vh; }
    .smk-auth__hero {
        min-height: 220px;
        padding: 1.5rem 1.25rem 1.75rem;
    }
    .smk-auth__hero-body { display: none; }
    .smk-auth__hero-brand { margin: 0 auto; }
    .smk-auth__panel {
        padding: 1.5rem 1rem 2.5rem;
        background: var(--smk-surface-2);
    }
    .smk-auth__mobile-brand { display: block; }
    .smk-auth__panel .smk-auth__panel-inner > .smk-auth__mobile-brand { display: none; } /* hero already has brand */
}
@media (max-width: 575.98px) {
    .smk-auth__hero { min-height: 170px; }
    .smk-auth__hero-logo { max-height: 32px; }
    .smk-auth__hero-wordmark { font-size: 1.2rem; }
}

/* --- RTL: hero swaps to the right side --------------------------------- */
[dir="rtl"] .smk-auth { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
@media (max-width: 991.98px) {
    [dir="rtl"] .smk-auth { grid-template-columns: 1fr; }
}

/* --- Dark mode ---------------------------------------------------------- */
[data-theme-style="dark"] body.smk-auth-shell { background: var(--smk-surface-2); }
[data-theme-style="dark"] .smk-auth { background: var(--smk-surface-2); }
[data-theme-style="dark"] .smk-auth__panel { background: var(--smk-surface); }
[data-theme-style="dark"] .smk-auth__card { background: var(--smk-surface); }
[data-theme-style="dark"] .smk-auth__card .form-control {
    background: var(--smk-surface-2);
    border-color: var(--smk-border);
    color: var(--smk-ink-900);
}
[data-theme-style="dark"] .smk-auth__card .form-control:focus {
    box-shadow: 0 0 0 4px rgba(6, 182, 212, .25);
    border-color: var(--smk-brand-2);
}
[data-theme-style="dark"] .smk-auth__social .btn {
    background: var(--smk-surface-2);
    border-color: var(--smk-border);
    color: var(--smk-ink-900);
}
[data-theme-style="dark"] .smk-auth__social .btn:hover {
    background: var(--smk-brand-soft);
    border-color: var(--smk-brand-2);
}
[data-theme-style="dark"] .smk-auth__divider { color: var(--smk-ink-500); }
[data-theme-style="dark"] .smk-auth__divider::before,
[data-theme-style="dark"] .smk-auth__divider::after { background: var(--smk-border); }

/* End SMK Auth shell */

/* ==========================================================================
   ████  PREMIUM UPGRADE — ROUND 13 (white header text on landing pages)  ████
   User feedback: header text on the marketing/landing pages was unreadable
   over the dark hero gradient. Force ALL navbar text (brand, links, CTAs,
   toggler) to white across every landing route (body.index covers index,
   templates, partners, helpcenter, support, etc.), in both the initial and
   .is-scrolled states. Background returns to dark glass so the text
   contrasts cleanly.
   ========================================================================== */
body.index .navbar-custom,
body.index .navbar-custom.is-scrolled {
    background: rgba(15, 17, 35, .45) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow:
        0 10px 30px rgba(15, 23, 42, .25),
        inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

body.index .navbar-custom .navbar-brand,
body.index .navbar-custom .navbar-brand span,
body.index .navbar-custom .navbar-brand span span,
body.index .navbar-custom .nav-link,
body.index .navbar-custom .navbar-text,
body.index .navbar-custom.is-scrolled .navbar-brand,
body.index .navbar-custom.is-scrolled .navbar-brand span,
body.index .navbar-custom.is-scrolled .navbar-brand span span,
body.index .navbar-custom.is-scrolled .nav-link,
body.index .navbar-custom.is-scrolled .navbar-text {
    color: #ffffff !important;
}

body.index .navbar-custom .nav-link:hover,
body.index .navbar-custom .nav-link:focus,
body.index .navbar-custom.is-scrolled .nav-link:hover,
body.index .navbar-custom.is-scrolled .nav-link:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, .10) !important;
}

body.index .navbar-custom .nav-link.active,
body.index .navbar-custom.is-scrolled .nav-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, .14) !important;
}

/* Logo: keep its natural colors (no invert) — otherwise the brand icon
   washes out to a solid white square against the dark glass. */
body.index .navbar-custom [data-logo] img,
body.index .navbar-custom .navbar-logo,
body.index .navbar-custom #loadlogo,
body.index .navbar-custom img.navbar-logo,
body.index .navbar-custom.is-scrolled [data-logo] img,
body.index .navbar-custom.is-scrolled .navbar-logo,
body.index .navbar-custom.is-scrolled #loadlogo,
body.index .navbar-custom.is-scrolled img.navbar-logo {
    filter: none !important;
}

/* Inline SVG icons inside the navbar (Login / Sign up Now / dropdowns)
   have hardcoded dark strokes like stroke="#1C274C". Force every stroke
   and fill inside the navbar SVGs to white so they read on the dark
   glass. The selector is intentionally broad + uses !important to beat
   the SVG presentation attributes. */
body.index .navbar-custom svg,
body.index .navbar-custom svg path,
body.index .navbar-custom svg circle,
body.index .navbar-custom svg rect,
body.index .navbar-custom svg line,
body.index .navbar-custom svg polyline,
body.index .navbar-custom svg polygon,
body.index .navbar-custom svg g,
body.index .navbar-custom.is-scrolled svg,
body.index .navbar-custom.is-scrolled svg path,
body.index .navbar-custom.is-scrolled svg circle,
body.index .navbar-custom.is-scrolled svg rect,
body.index .navbar-custom.is-scrolled svg line,
body.index .navbar-custom.is-scrolled svg polyline,
body.index .navbar-custom.is-scrolled svg polygon,
body.index .navbar-custom.is-scrolled svg g {
    stroke: #ffffff !important;
    color: #ffffff !important;
}
body.index .navbar-custom svg [fill]:not([fill="none"]),
body.index .navbar-custom svg path[fill]:not([fill="none"]),
body.index .navbar-custom.is-scrolled svg [fill]:not([fill="none"]),
body.index .navbar-custom.is-scrolled svg path[fill]:not([fill="none"]) {
    fill: #ffffff !important;
}

/* FontAwesome / Bootstrap icon fonts (<i class="fas fa-…">) inside the
   navbar — make sure they inherit the white color too. */
body.index .navbar-custom .nav-link i,
body.index .navbar-custom .nav-link .fa,
body.index .navbar-custom .nav-link .fas,
body.index .navbar-custom .nav-link .far,
body.index .navbar-custom .nav-link .fab,
body.index .navbar-custom.is-scrolled .nav-link i,
body.index .navbar-custom.is-scrolled .nav-link .fa,
body.index .navbar-custom.is-scrolled .nav-link .fas,
body.index .navbar-custom.is-scrolled .nav-link .far,
body.index .navbar-custom.is-scrolled .nav-link .fab {
    color: #ffffff !important;
}

/* "Login" ghost button — white outline / white text */
body.index .navbar-custom a.btn[href*="login"]:not([href*="logout"]) {
    color: #ffffff !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
}
body.index .navbar-custom a.btn[href*="login"]:not([href*="logout"]):hover {
    background: rgba(255, 255, 255, .12) !important;
    border-color: rgba(255, 255, 255, .60) !important;
}

/* Primary CTA ("Sign up Now") — keep solid pill, white text */
body.index .navbar-custom .btn-primary,
body.index .navbar-custom a.btn[href*="register"] {
    color: #ffffff !important;
}

/* Hamburger toggler on mobile — white icon over dark glass */
body.index .navbar-custom .navbar-toggler,
body.index .navbar-custom.is-scrolled .navbar-toggler {
    border-color: rgba(255, 255, 255, .25) !important;
}
body.index .navbar-custom .navbar-toggler-icon,
body.index .navbar-custom.is-scrolled .navbar-toggler-icon {
    filter: brightness(0) invert(1) !important;
}

/* Mobile collapsed panel — keep dark glass so white links are readable */
@media (max-width: 991px) {
    body.index .navbar-custom .navbar-collapse,
    body.index .navbar-custom.is-scrolled .navbar-collapse {
        background: rgba(15, 17, 35, .92) !important;
        border-color: rgba(255, 255, 255, .08) !important;
    }
}

/* End PREMIUM UPGRADE — ROUND 13 */


/* ==========================================================================
   ████  TOUR RAIL — 4-step walkthrough strip in the hero  ████
   Renders the <ol class="smk-tour">…</ol> block in index.php as a
   horizontal rail of numbered pill cards joined by short connectors.
   Lives over the dark hero gradient, so the surface uses the same
   liquid-glass treatment as the navbar / templates.
   ========================================================================== */
.smk-tour{
    list-style: none;
    margin: 28px auto 8px;
    padding: 0;
    max-width: 980px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}
.smk-tour__step{
    flex: 1 1 200px;
    min-width: 200px;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 16px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 14px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    color: rgba(255,255,255,.92);
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.smk-tour__step:hover{
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.30);
    box-shadow: 0 20px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.16);
}
.smk-tour__num{
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a5b4fc, #67e8f9);
    color: #0b1020;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: 0 4px 10px rgba(103,232,249,.35);
}
.smk-tour__icon{
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: rgba(255,255,255,.10);
    color: #fff;
    font-size: .85rem;
}
.smk-tour__body{ display: block; }
.smk-tour__title{
    margin: 0 0 2px;
    font-size: .98rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
}
.smk-tour__desc{
    margin: 0;
    font-size: .82rem;
    line-height: 1.35;
    color: rgba(255,255,255,.72);
}
.smk-tour__connector{
    flex: 0 0 30px;
    min-width: 30px;
    list-style: none;
    align-self: center;
    position: relative;
    height: 2px;
    background: linear-gradient(90deg, rgba(165,180,252,.6), rgba(103,232,249,.6));
    border-radius: 2px;
    opacity: .65;
}
.smk-tour__connector::after{
    content: '';
    position: absolute;
    right: -3px; top: 50%;
    width: 0; height: 0;
    transform: translateY(-50%);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid rgba(103,232,249,.7);
}
@media (max-width: 880px){
    .smk-tour{ gap: 10px; }
    .smk-tour__connector{ display: none; }
    .smk-tour__step{ max-width: none; min-width: 0; flex-basis: calc(50% - 5px); }
}
@media (max-width: 540px){
    .smk-tour__step{ flex-basis: 100%; }
}

/* ==========================================================================
   ████  TEMPLATE STRIP — true full-bleed on the landing hero  ████
   Break out of the .container's 1140px max-width and span the full
   viewport. Uses `margin-inline: calc(50% - 50vw)` (no position: absolute,
   no `left: 50%` shift) so the surrounding hero column stays
   in-flow and doesn't collapse. The page already has `overflow-x: clip`
   on .smk-home so this can't introduce horizontal scroll.
   ========================================================================== */
.smk-ai-try--hero ~ .smk-ai-templates{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: clamp(16px, 4vw, 48px);
    padding-right: clamp(16px, 4vw, 48px);
    box-sizing: border-box;
}
/* The "Or start from a template" divider stays centred on a sane
   width even though the strip itself is edge-to-edge. */
.smk-ai-try--hero ~ .smk-ai-templates .smk-ai-templates__divider{
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
}
.smk-ai-try--hero ~ .smk-ai-templates .smk-ai-templates__nav--prev{ left: 14px; }
.smk-ai-try--hero ~ .smk-ai-templates .smk-ai-templates__nav--next{ right: 14px; }

/* ==========================================================================
   ████  TEMPLATE CARDS — compact, solid surface  ████
   Smaller cards so more fit per slideshow page. Uses SOLID background
   colours (no backdrop-filter) because stacking another blur layer over
   the hero's aurora caused visible flicker on some GPUs.
   ========================================================================== */
.smk-ai-template{
    flex-basis: 188px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    gap: 4px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 6px 14px rgba(15,23,42,.06) !important;
}
.smk-ai-template:hover{
    border-color: #2563eb !important;
    box-shadow: 0 10px 22px rgba(15,23,42,.10) !important;
}
.smk-ai-template__icon{
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    font-size: .78rem !important;
}
.smk-ai-template__name{
    font-size: .85rem !important;
    margin: 4px 0 0 !important;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.smk-ai-template__desc{
    font-size: .72rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.smk-ai-template__type{
    margin-top: 4px !important;
    padding: 1px 6px !important;
    font-size: .6rem !important;
    letter-spacing: .05em !important;
}

/* Hero variant — solid dark surface (no blur) so the cards read as
   their own opaque layer on the hero's animated aurora. */
.smk-ai-try--hero ~ .smk-ai-templates .smk-ai-template{
    background: #1a1f3a !important;
    border-color: rgba(255,255,255,.10) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.28) !important;
}
.smk-ai-try--hero ~ .smk-ai-templates .smk-ai-template:hover{
    border-color: rgba(255,255,255,.30) !important;
}
.smk-ai-try--hero ~ .smk-ai-templates .smk-ai-template__name{ color: #fff !important; }
.smk-ai-try--hero ~ .smk-ai-templates .smk-ai-template__desc{ color: rgba(255,255,255,.72) !important; }
.smk-ai-try--hero ~ .smk-ai-templates .smk-ai-template__type{
    color: rgba(255,255,255,.85) !important;
    background: rgba(255,255,255,.10) !important;
}


/* ==========================================================================
   ████  HARD VISIBILITY FIX — hero copy + AI widget  ████
   Several stacked rules (data-smk-reveal opacity:0, dark text color
   inherited from base styles, multi-layer backdrop-filter compositing)
   were rendering the hero text and AI form invisible / flickering on
   the landing page. This block FORCES the layout the page is meant to
   show, with !important so it beats any earlier override regardless
   of source order.
   ========================================================================== */

/* 1. Hero section: ALWAYS visible — drop the reveal gate. */
.smk-home .smk-hero,
.smk-home .smk-hero--v4,
.smk-home [data-smk-reveal] {
    opacity: 1 !important;
    transform: none !important;
}

/* 2. Hero title + subtitle + badge: white text, no shimmer-induced
      transparency, no backdrop blur on the containing element. */
.smk-home .smk-hero--v4 .smk-hero__title,
.smk-home .smk-hero--v4 .smk-hero__title--v4,
.smk-home .smk-hero--v4 .smk-hero__title-line {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.smk-home .smk-hero--v4 .smk-hero__sub,
.smk-home .smk-hero--v4 .smk-hero__sub--v4 {
    color: rgba(255,255,255,.85) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.smk-home .smk-hero--v4 .smk-hero__badge,
.smk-home .smk-hero--v4 .smk-hero__badge * {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.smk-home .smk-hero--v4 .smk-hero__badge-stars { color: #f59e0b !important; }

/* 3. AI widget (hero variant): force visibility, drop backdrop-filter
      stack to a single layer so multi-blur compositing can't flicker. */
.smk-home .smk-hero--v4 .smk-ai-try,
.smk-home .smk-hero--v4 .smk-ai-try--hero {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15, 17, 35, .55) !important;
}
.smk-home .smk-hero--v4 .smk-ai-try * {
    opacity: 1 !important;
    visibility: visible !important;
}
.smk-home .smk-hero--v4 .smk-ai-try__header-title,
.smk-home .smk-hero--v4 .smk-ai-try--hero .smk-ai-try__header-title { color: #ffffff !important; }
.smk-home .smk-hero--v4 .smk-ai-try__header-sub,
.smk-home .smk-hero--v4 .smk-ai-try--hero .smk-ai-try__header-sub { color: rgba(255,255,255,.78) !important; }
.smk-home .smk-hero--v4 .smk-ai-try__input,
.smk-home .smk-hero--v4 .smk-ai-try--hero .smk-ai-try__input { color: #ffffff !important; }

/* 4. Pause the shimmer animation so the title stays static (the user
      reported it was flashing). Keep the gradient, drop the motion. */
.smk-home .smk-hero--v4 .smk-grad-text--shimmer {
    animation: none !important;
    background-position: 50% 50% !important;
}

/* End HARD VISIBILITY FIX */

/* ==========================================================================
   ████  TEMP: hide "Or start from a template" block  ████
   Hides the slideshow + divider entirely on both landing-hero and
   dashboard-modal variants. To restore later, delete this single block.
   ========================================================================== */
.smk-ai-templates,
.smk-ai-templates-grid-wrap { display: none !important; }

/* ==========================================================================
   ████  MEGA-MENU TEXT FIX  ████
   The Round 13 navbar rules forced every `.nav-link` + `<i>` inside
   `.navbar-custom` to white. But the Templates mega-menu dropdown is
   also rendered inside `.navbar-custom` and uses a WHITE background —
   so the category list (Business/Corporate/Customer/…) and its icons
   were white-on-white = invisible. Restore dark colours scoped to the
   mega-dropdown only; the top-level nav links stay white.
   ========================================================================== */
body.index .navbar-custom .mega-dropdown-menu,
body.index .navbar-custom .mega-dropdown-menu * {
    color: #333 !important;
}

body.index .navbar-custom .mega-dropdown-menu .templates-nav .nav-link {
    color: #555 !important;
    background: transparent !important;
}
body.index .navbar-custom .mega-dropdown-menu .templates-nav .nav-link:hover {
    color: #111 !important;
    background-color: #f5f5f5 !important;
}
body.index .navbar-custom .mega-dropdown-menu .templates-nav .nav-link.active {
    color: #111 !important;
    background-color: #e9ecef !important;
    font-weight: 600 !important;
}

/* Category + sub-template icons: revert from forced-white to a neutral
   slate so the Font-Awesome glyphs render against the white dropdown. */
body.index .navbar-custom .mega-dropdown-menu i,
body.index .navbar-custom .mega-dropdown-menu .nav-link i,
body.index .navbar-custom .mega-dropdown-menu .subtemplate-item i {
    color: #1d4ed8 !important;
}

/* Sub-template card text */
body.index .navbar-custom .mega-dropdown-menu .subtemplate-item h6 { color: #1f2937 !important; }
body.index .navbar-custom .mega-dropdown-menu .subtemplate-item p  { color: #6b7280 !important; }
body.index .navbar-custom .mega-dropdown-menu .subtemplate-item:hover h6 { color: #111 !important; }

/* Belt + braces: any SVG accidentally landing inside the dropdown
   should not inherit the navbar-level white-stroke override. */
body.index .navbar-custom .mega-dropdown-menu svg,
body.index .navbar-custom .mega-dropdown-menu svg path,
body.index .navbar-custom .mega-dropdown-menu svg * {
    stroke: currentColor !important;
    color: inherit !important;
    fill: currentColor !important;
}

/* ==========================================================================
   ████  MEGA-MENU — GLASS SKIN  ████
   Replace the white panel with a translucent dark-glass dropdown so the
   navbar + mega-menu read as one floating Apple-style surface. Overrides
   the earlier mega-menu fix above (and the legacy white-background CSS
   from menu.php's inline <style>). Text + icons become light so they
   contrast cleanly against the blurred dark backdrop.
   ========================================================================== */

/* Surface: dark translucent + backdrop blur. Top/left/right borders
   are removed so the dropdown flows out of the flush navbar with no
   visible seam at the viewport edges; only a faint hairline survives
   at the bottom to separate the panel from the hero. Background is
   intentionally light (~45% opacity) so the hero video reads through
   the glass — the backdrop-filter blur keeps text readable. */
body.index .navbar-custom .dropdown-menu.mega-dropdown-menu,
body.index .navbar-custom .mega-dropdown-menu {
    background: rgba(15, 17, 35, .45) !important;
    background-color: rgba(15, 17, 35, .45) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 0 !important;
    box-shadow:
        0 24px 40px -12px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    backdrop-filter: blur(26px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(160%) !important;
    color: rgba(255, 255, 255, .92) !important;
    padding: 1.5rem 1.25rem !important;
}

/* Default text colour inside the dropdown — light on dark glass. */
body.index .navbar-custom .mega-dropdown-menu,
body.index .navbar-custom .mega-dropdown-menu * {
    color: rgba(255, 255, 255, .90) !important;
}

/* LEFT — category nav (Business / Corporate / Customer / …) */
body.index .navbar-custom .mega-dropdown-menu .templates-nav .nav-link {
    color: rgba(255, 255, 255, .80) !important;
    background: transparent !important;
    border-radius: 10px !important;
    transition: background-color .15s ease, color .15s ease;
}
body.index .navbar-custom .mega-dropdown-menu .templates-nav .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, .08) !important;
}
body.index .navbar-custom .mega-dropdown-menu .templates-nav .nav-link.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(37, 99, 235,.45), rgba(56,189,248,.30)) !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235,.25), inset 0 1px 0 rgba(255,255,255,.10) !important;
    font-weight: 600 !important;
}
/* Vertical hairline divider between category list and templates grid */
body.index .navbar-custom .mega-dropdown-menu .border-right {
    border-right-color: rgba(255, 255, 255, .10) !important;
}

/* Category icons (fa-briefcase, fa-building, …) — cyan/violet tint
   so they're visible on glass without being shouty. */
body.index .navbar-custom .mega-dropdown-menu i,
body.index .navbar-custom .mega-dropdown-menu .nav-link i,
body.index .navbar-custom .mega-dropdown-menu .subtemplate-item i {
    color: #67e8f9 !important;
}

/* RIGHT — sub-template cards (the .subtemplate-item blocks) */
body.index .navbar-custom .mega-dropdown-menu .subtemplate-item {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, .92) !important;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
body.index .navbar-custom .mega-dropdown-menu .subtemplate-item:hover {
    background: rgba(255, 255, 255, .12) !important;
    border-color: rgba(255, 255, 255, .22) !important;
    transform: translateY(-2px);
    text-decoration: none !important;
}
body.index .navbar-custom .mega-dropdown-menu .subtemplate-item h6 {
    color: #ffffff !important;
    margin-bottom: .35rem;
}
body.index .navbar-custom .mega-dropdown-menu .subtemplate-item p {
    color: rgba(255, 255, 255, .68) !important;
}
body.index .navbar-custom .mega-dropdown-menu .subtemplate-item:hover h6 { color: #ffffff !important; }
body.index .navbar-custom .mega-dropdown-menu .subtemplate-item:hover i  { color: #a5b4fc !important; }

/* Belt + braces: any SVG accidentally inside the dropdown should not
   inherit the navbar-level white-stroke override. */
body.index .navbar-custom .mega-dropdown-menu svg,
body.index .navbar-custom .mega-dropdown-menu svg path,
body.index .navbar-custom .mega-dropdown-menu svg * {
    stroke: currentColor !important;
    color: inherit !important;
    fill: currentColor !important;
}

/* The global ".tab-content" rule near line 3516 ("Pricing tab content
   modernization") paints every .tab-content with --smk-surface — which
   is #ffffff in the light theme. That dropped an opaque white panel
   on top of the templates mega-menu's right pane (where .tab-content
   holds the sub-template grid), hiding all the cards underneath. Strip
   that surface inside the mega menu so the glass + cards show. */
body.index .navbar-custom .mega-dropdown-menu .tab-content,
body.index .navbar-custom .mega-dropdown-menu .tab-pane {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ==========================================================================
   ████  HERO BACKGROUND VIDEO  ████
   Full-bleed looping video behind the hero. Positioned absolutely to
   cover the entire section, sits below content (z-index 0). The
   overlay is a layered gradient that darkens the video edges + adds a
   soft purple/cyan brand tint, keeping the title + AI widget readable.
   On reduced-motion or narrow screens we fall back to a static poster.
   ========================================================================== */
.smk-hero__video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
    /* Slight saturation bump so the brand tint reads through */
    filter: saturate(115%) brightness(.78);
}

.smk-hero__video-overlay{
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(900px 600px at 18% 12%, rgba(37, 99, 235, .42), transparent 60%),
        radial-gradient(700px 600px at 82% 18%, rgba(236, 72, 153, .32), transparent 60%),
        radial-gradient(900px 700px at 50% 100%, rgba(34, 211, 238, .26), transparent 60%),
        linear-gradient(180deg, rgba(10, 14, 31, .55) 0%, rgba(11, 18, 40, .55) 55%, rgba(10, 14, 31, .70) 100%);
}

/* Existing blob/particle layers sit BELOW the overlay but above the
   video — they remain visible as soft accents. Hero content (title,
   widget, screenshot) stays on top via z-index:2 (already set by the
   ".smk-home .smk-hero--v4 .container" rule at line ~9889). */
.smk-home .smk-hero--v4 .smk-hero__blob,
.smk-home .smk-hero--v4 .smk-hero__particles { z-index: 1; }

/* The hero's own aurora ::before pseudo-element used to provide the
   background. Lower its opacity now that the video carries that role,
   otherwise the layers fight for visibility. */
.smk-home .smk-hero--v4::before { opacity: .35 !important; }

/* Respect reduced-motion: pause the video and dim the overlay. */
@media (prefers-reduced-motion: reduce) {
    .smk-hero__video { display: none; }
}

/* ==========================================================================
   ████  HERO VIDEO — LOADER → MAIN FADE  ████
   The lightweight clip (.smk-hero__video--light) plays immediately so
   the hero has motion from frame one; the heavy clip
   (.smk-hero__video--main) starts hidden and fades in once it has
   buffered enough to play through. JS in index.php toggles the
   `.is-ready` class on the main video.
   ========================================================================== */
.smk-hero__video{ z-index: 0; }
.smk-hero__video--main{
    opacity: 0;
    transition: opacity .8s ease;
    z-index: 0;
}
.smk-hero__video--main.is-ready{ opacity: 1; }
.smk-hero__video--light{ z-index: 0; }
/* When main is visible we lift its stacking slightly so it covers the
   loader, then JS removes the loader entirely after the fade. */
.smk-hero__video--main.is-ready{ z-index: 1; }
.smk-hero__video-overlay{ z-index: 2; }

/* ==========================================================================
   ████  AI WIDGET — RTL flow (Arabic translations now in place)  ████
   The widget used to be force-LTR on RTL pages because every string
   was hardcoded English. Now the labels come from the language file
   (en + ar seeded), so we let the widget inherit page direction. The
   <input> uses `unicode-bidi: plaintext` so the user's prompt
   auto-mirrors based on the first strong character they type (Arabic
   vs English).
   ========================================================================== */
body.rtl .smk-ai-try,
.rtl .smk-ai-try,
[dir="rtl"] .smk-ai-try {
    direction: rtl;
    text-align: right;
}
body.rtl .smk-ai-try__input,
.rtl .smk-ai-try__input,
[dir="rtl"] .smk-ai-try__input {
    direction: rtl;
    text-align: right;
    unicode-bidi: plaintext;
}

/* ==========================================================================
   ████  NAVBAR RTL FIX (Arabic / Hebrew etc.)  ████
   The floating navbar pill was built for LTR. On RTL pages the items
   were sliding to the left edge, leaving the right side empty (because
   `direction` defaults to inherit and flex children weren't reversing
   correctly inside the centred container). Force RTL flow on the whole
   bar so the brand sits on the right (start of an RTL line) and the
   action buttons + nav items flow toward the left.
   ========================================================================== */
body.rtl .navbar-custom,
body[dir="rtl"] .navbar-custom,
.rtl .navbar-custom {
    direction: rtl !important;
    text-align: right !important;
}
body.rtl .navbar-custom .container-fluid,
body[dir="rtl"] .navbar-custom .container-fluid,
.rtl .navbar-custom .container-fluid {
    direction: rtl !important;
}

/* Brand anchors at the RTL "start" (= visually right). */
body.rtl .navbar-custom .navbar-brand,
.rtl .navbar-custom .navbar-brand {
    margin-right: 0 !important;
    margin-left: 16px !important;
    float: none !important;
}

/* The centered nav UL: flexbox already centres via `margin:auto`, but
   we explicitly set the flex-direction so the visual order matches
   the source order in RTL (first item appears on the right). */
body.rtl .navbar-custom .navbar-nav.homemenu,
.rtl .navbar-custom .navbar-nav.homemenu {
    flex-direction: row !important;        /* row, not row-reverse — direction:rtl already mirrors */
    margin: auto !important;
}

/* Stop the Round-13 navbar collapse from sitting flush-left in RTL. */
body.rtl .navbar-custom .navbar-collapse,
.rtl .navbar-custom .navbar-collapse {
    justify-content: flex-end;
}

/* Login + Sign up Now nav-items at the end of the homemenu sit on the
   LEFT in RTL (end of an RTL line). Reset their LTR-specific margins. */
body.rtl .navbar-custom .nav-item.ml-2,
.rtl .navbar-custom .nav-item.ml-2 {
    margin-left: 0 !important;
    margin-right: .5rem !important;
}

/* Tabs/links inside the navbar: padding was hardcoded
   `padding-left: 15px; padding-right: 15px` — already symmetric,
   nothing to undo. But .top-item link's `padding:20px` inline style
   is symmetric too — leave alone. */

/* SVG icons inside Login / Sign-up Now had `margin:3px` / `margin:2.51px`
   symmetric — OK. But the inline SVGs sit at the LTR "start" of each
   link (visually left). On RTL we want them on the visual right of the
   Arabic text. Flip just those inline SVGs back to LTR so they line up
   on the leading edge of the Arabic word. */
body.rtl .navbar-custom .nav-link svg,
.rtl .navbar-custom .nav-link svg {
    margin-left: 6px !important;
    margin-right: 0 !important;
}

/* ==========================================================================
   ████  NAVBAR RTL — FULL POWER FIX  ████
   The earlier RTL patch wasn't enough: Bootstrap 4's navbar uses
   `justify-content: space-between` with two flex children (brand +
   navbar-collapse), and the collapse hugs its own width — so in RTL
   the whole collapse slid to the LEFT viewport edge and nothing
   filled the right half. Also `direction: rtl` was inherited from the
   <html> tag but Bootstrap's CSS rules with `!important` on the
   navbar positioning kept things misaligned.

   Strategy:
     1. Make the collapse `flex-grow: 1` so it fills the gap between
        brand and the right edge in LTR (and brand + left edge in RTL).
     2. Use CSS grid on .container-fluid so brand/collapse have
        explicit columns and don't drift with flexbox quirks.
     3. Force the UL inside the collapse to centre with margin:auto.
     4. Apply this for BOTH LTR and RTL so we don't regress LTR.
   ========================================================================== */

/* 1. Apply to .navbar-custom whenever expanded (≥ lg) — Grid layout
      with three logical zones: brand | nav | actions. We still nest
      everything inside the existing single .navbar-collapse > .ul
      structure, so this is a pure CSS change. */
@media (min-width: 992px) {
    body.index .navbar-custom > .container-fluid {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }

    /* Brand: fixed width, doesn't grow */
    body.index .navbar-custom .navbar-brand {
        flex: 0 0 auto !important;
    }

    /* Collapse fills ALL remaining space between brand and the
       opposite edge. Without this, Bootstrap leaves it hugging its
       content and the UL has no flex space to centre into. */
    body.index .navbar-custom .navbar-collapse {
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    /* The UL with all the nav items: centre it horizontally inside
       the now-stretched collapse. Works identically in LTR and RTL —
       direction: rtl flips child order automatically. */
    body.index .navbar-custom .navbar-nav.homemenu {
        flex: 0 1 auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        list-style: none !important;
    }
}

/* 2. Per user request: LOCK the navbar to LTR even on Arabic pages.
      The full-RTL attempt overflowed the navbar off the viewport's
      left edge with no horizontal scroll to recover. Locking the
      navbar layout to LTR keeps brand-left / nav-centre / actions-
      right regardless of page direction. Arabic LABELS inside each
      link still display correctly because Arabic characters are
      reordered by the browser's bidi algorithm at the glyph level —
      we only pin the flex container, not the text content. */
html[dir="rtl"] body.index .navbar-custom,
body.rtl .navbar-custom,
html[dir="rtl"] body.index .navbar-custom > .container-fluid,
body.rtl .navbar-custom > .container-fluid,
html[dir="rtl"] body.index .navbar-custom .navbar-collapse,
body.rtl .navbar-custom .navbar-collapse,
html[dir="rtl"] body.index .navbar-custom .navbar-nav.homemenu,
body.rtl .navbar-custom .navbar-nav.homemenu {
    direction: ltr !important;
}
/* Allow the label *content* inside each link to render with its
   natural script direction (so a mixed Arabic+English label still
   reads correctly), without flipping the surrounding flex flow. */
html[dir="rtl"] body.index .navbar-custom .nav-link,
body.rtl .navbar-custom .nav-link {
    direction: rtl;
    unicode-bidi: isolate;
}

/* 3. Login + Sign up spacing — physical margins (the navbar is now
      locked LTR, so `margin-left` is correct again). */
body.index .navbar-custom .nav-item.ml-2 {
    margin-left: .5rem !important;
    margin-right: 0 !important;
}

/* 4. Inline SVG icons inside Login / Sign-up Now: physical right
      margin so they sit before the label text in the LTR-locked nav. */
body.index .navbar-custom .nav-link svg {
    margin-right: 6px !important;
    margin-left: 0 !important;
}

/* ============================================================
   BLOG — modern editorial layout (smk-blog__* / smk-article__*)
   Self-contained; overrides the default SurveyMaker card markup.
   ============================================================ */
.smk-blog { padding-bottom: 3rem; }

/* ---- Hero header ---- */
/* Full-bleed hero uses calc(50% - 50vw); with a visible scrollbar that can
   add a few px of horizontal page scroll. Clip the body on blog routes
   (overflow-x only — NO max-width, which would break Bootstrap's navbar
   responsive detection). Mirrors the support-route hot-fix above. */
body.index[data-smk-route="blog"] { overflow-x: hidden; }

.smk-blog__hero {
    position: relative;
    border-radius: 0;
    /* full-bleed band: stretch the dark background edge-to-edge. The inner
       .smk-blog__hero-inner (a .container) keeps the text/search aligned with
       the rest of the page, whatever the real container width is. */
    margin: 20px calc(50% - 50vw) 2.5rem;
    padding: clamp(2.25rem, 5vw, 4rem) 0;
    background:
        radial-gradient(900px 420px at 100% 0%, rgba(6, 182, 212,.30), transparent 60%),
        radial-gradient(720px 380px at 0% 110%, rgba(37,99,235,.32), transparent 55%),
        linear-gradient(135deg, #0b1120 0%, #131c40 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.smk-blog__hero::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(700px 340px at 75% 10%, #000 0%, transparent 75%);
            mask-image: radial-gradient(700px 340px at 75% 10%, #000 0%, transparent 75%);
}
.smk-blog__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: #bfdbfe; margin-bottom: .9rem;
}
.smk-blog__eyebrow i { color: #818cf8; }
.smk-blog__title {
    font-size: clamp(1.95rem, 4.2vw, 3rem); font-weight: 800; line-height: 1.07;
    letter-spacing: -.025em; margin: 0 0 .65rem; color: #fff;
}
.smk-blog__lead { font-size: 1.06rem; line-height: 1.6; color: rgba(255,255,255,.72); max-width: 40rem; margin: 0; }
.smk-blog__hero-search { margin-top: 1.6rem; max-width: 30rem; }
.smk-blog__hero-search .input-group { box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); border-radius: 13px; }
.smk-blog__hero-search .form-control {
    height: 50px; border: 0; border-radius: 13px 0 0 13px;
    padding-left: 1.1rem; font-size: .98rem; background: rgba(255,255,255,.97);
}
.smk-blog__hero-search .form-control:focus { box-shadow: none; background: #fff; }
.smk-blog__hero-search .btn {
    border: 0; border-radius: 0 13px 13px 0; padding: 0 1.35rem;
    background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%); color: #fff;
}
.smk-blog__hero-search .btn:hover { filter: brightness(1.07); color: #fff; }
.smk-blog__hero-rss {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem;
    font-size: .85rem; color: rgba(255,255,255,.6); text-decoration: none;
}
.smk-blog__hero-rss:hover { color: #fff; }

/* ---- Category pills ---- */
.smk-blog__cats { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2rem; }
.smk-blog__cat {
    font-size: .85rem; font-weight: 600; padding: .5rem 1rem; border-radius: 999px;
    background: #fff; border: 1px solid var(--smk-border); color: var(--smk-ink-2);
    text-decoration: none; transition: all .16s ease; white-space: nowrap;
}
.smk-blog__cat:hover, .smk-blog__cat.is-active {
    background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
    border-color: transparent; color: #fff; box-shadow: 0 6px 16px -6px rgba(37,99,235,.55);
}

/* ---- Post grid + cards ---- */
.smk-blog__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
@media (max-width: 575.98px) { .smk-blog__grid { grid-template-columns: 1fr; } }

.smk-blog__card {
    display: flex; flex-direction: column; background: #fff;
    border: 1px solid var(--smk-border); border-radius: 18px; overflow: hidden;
    box-shadow: var(--smk-shadow-sm);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.smk-blog__card:hover { transform: translateY(-5px); box-shadow: var(--smk-shadow-lg); border-color: rgba(6, 182, 212,.25); }
.smk-blog__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #eff6ff, #ecfeff); }
.smk-blog__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.smk-blog__card:hover .smk-blog__thumb img { transform: scale(1.06); }
.smk-blog__thumb--ph { display: flex; align-items: center; justify-content: center; color: #a5b4fc; }
.smk-blog__thumb--ph i { font-size: 2.4rem; }
.smk-blog__card-body { padding: 1.3rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1; }
.smk-blog__pill {
    align-self: flex-start; font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--smk-brand); background: var(--smk-brand-soft);
    padding: .32rem .62rem; border-radius: 7px; margin-bottom: .75rem; text-decoration: none;
}
.smk-blog__pill:hover { color: #fff; background: var(--smk-brand); }
.smk-blog__card-title { font-size: 1.2rem; font-weight: 700; line-height: 1.3; margin: 0 0 .55rem; }
.smk-blog__card-title a { color: var(--smk-ink); text-decoration: none; }
.smk-blog__card-title a:hover { color: var(--smk-brand); }
.smk-blog__excerpt { color: var(--smk-ink-3); font-size: .93rem; line-height: 1.58; margin: 0 0 1.1rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.smk-blog__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .8rem; color: var(--smk-ink-3); margin-top: auto; }
.smk-blog__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.smk-blog__meta i { opacity: .7; }

/* ---- Featured (first) post ---- */
.smk-blog__featured {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; margin-bottom: 2.2rem;
    background: #fff; border: 1px solid var(--smk-border); border-radius: 22px; overflow: hidden;
    box-shadow: var(--smk-shadow-md); transition: transform .22s ease, box-shadow .22s ease;
}
.smk-blog__featured:hover { transform: translateY(-4px); box-shadow: var(--smk-shadow-lg); }
.smk-blog__featured-thumb { overflow: hidden; min-height: 260px; background: linear-gradient(135deg, #eff6ff, #ecfeff); }
.smk-blog__featured-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.smk-blog__featured:hover .smk-blog__featured-thumb img { transform: scale(1.05); }
.smk-blog__featured-thumb--ph { display: flex; align-items: center; justify-content: center; color: #a5b4fc; }
.smk-blog__featured-thumb--ph i { font-size: 3.4rem; }
.smk-blog__featured-body { padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; justify-content: center; }
.smk-blog__featured-flag {
    align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: #2563eb; background: rgba(6, 182, 212,.1); padding: .35rem .7rem; border-radius: 7px; margin-bottom: 1rem;
}
.smk-blog__featured-title { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .7rem; }
.smk-blog__featured-title a { color: var(--smk-ink); text-decoration: none; }
.smk-blog__featured-title a:hover { color: var(--smk-brand); }
.smk-blog__featured-excerpt { color: var(--smk-ink-2); font-size: 1rem; line-height: 1.6; margin: 0 0 1.2rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 767.98px) { .smk-blog__featured { grid-template-columns: 1fr; } .smk-blog__featured-thumb { min-height: 200px; } }

/* ---- Sidebar widgets ---- */
.smk-blog__side-card { background: #fff; border: 1px solid var(--smk-border); border-radius: 16px; padding: 1.4rem; margin-bottom: 1.5rem; box-shadow: var(--smk-shadow-sm); }
.smk-blog__side-title { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--smk-ink-3); margin: 0 0 1.1rem; }
.smk-blog__side-search .form-control { border-radius: 11px 0 0 11px; height: 46px; }
.smk-blog__side-search .btn { border-radius: 0 11px 11px 0; background: var(--smk-brand); border-color: var(--smk-brand); color: #fff; }
.smk-blog__side-search .btn:hover { filter: brightness(1.08); color: #fff; }
.smk-blog__pop { list-style: none; margin: 0; padding: 0; }
.smk-blog__pop-item { display: flex; gap: .85rem; align-items: flex-start; padding: .8rem 0; border-top: 1px solid var(--smk-border); }
.smk-blog__pop-item:first-child { padding-top: 0; border-top: 0; }
.smk-blog__pop-rank {
    flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .9rem; color: var(--smk-brand); background: var(--smk-brand-soft);
}
.smk-blog__pop-item:first-child .smk-blog__pop-rank { color: #fff; background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%); }
.smk-blog__pop-link { font-weight: 600; font-size: .92rem; line-height: 1.35; color: var(--smk-ink); text-decoration: none; display: block; }
.smk-blog__pop-link:hover { color: var(--smk-brand); }
.smk-blog__pop-meta { font-size: .78rem; color: var(--smk-ink-3); margin-top: .2rem; }
.smk-blog__cta-card {
    border: 0; color: #fff; text-align: center;
    background: radial-gradient(420px 200px at 50% 0%, rgba(6, 182, 212,.5), transparent 70%), linear-gradient(135deg, #1e3a8a 0%, #164e63 100%);
}
.smk-blog__cta-card .smk-blog__side-title { color: rgba(255,255,255,.7); }
.smk-blog__cta-card p { color: rgba(255,255,255,.85); font-size: .92rem; margin-bottom: 1.1rem; }
.smk-blog__cta-card .btn { background: #fff; color: #1e3a8a; font-weight: 700; border-radius: 11px; }
.smk-blog__cta-card .btn:hover { background: #f1f5f9; color: #1e3a8a; }

/* ============================================================
   Single article
   ============================================================ */
.smk-article__hero {
    border-radius: 24px; padding: clamp(1.75rem, 4vw, 3rem); margin: 1.25rem 0 2rem;
    background:
        radial-gradient(800px 380px at 100% 0%, rgba(6, 182, 212,.28), transparent 60%),
        radial-gradient(640px 320px at 0% 120%, rgba(37,99,235,.3), transparent 55%),
        linear-gradient(135deg, #0b1120 0%, #131c40 100%);
    color: #fff;
}
.smk-article__breadcrumb { font-size: .82rem; color: rgba(255,255,255,.6); margin-bottom: 1.1rem; }
.smk-article__breadcrumb a { color: rgba(255,255,255,.78); text-decoration: none; }
.smk-article__breadcrumb a:hover { color: #fff; }
.smk-article__cat {
    display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; color: #bfdbfe; background: rgba(199,210,254,.12);
    padding: .35rem .7rem; border-radius: 7px; margin-bottom: 1rem; text-decoration: none;
}
.smk-article__cat:hover { color: #fff; background: rgba(199,210,254,.22); }
.smk-article__title { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 1rem; color: #fff; }
.smk-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; font-size: .87rem; color: rgba(255,255,255,.72); }
.smk-article__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.smk-article__cover { display: block; width: 100%; border-radius: 18px; margin: 0 0 1.75rem; box-shadow: var(--smk-shadow-md); }
.smk-article__body { background: #fff; border: 1px solid var(--smk-border); border-radius: 20px; padding: clamp(1.4rem, 3.5vw, 2.75rem); box-shadow: var(--smk-shadow-sm); }
.smk-article__lead { font-size: 1.18rem; line-height: 1.6; color: var(--smk-ink-2); font-weight: 500; margin: 0 0 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--smk-border); }

/* Prose typography */
.smk-prose { font-size: 1.07rem; line-height: 1.8; color: #2b3543; }
.smk-prose > *:first-child { margin-top: 0; }
.smk-prose h2 { font-size: 1.55rem; font-weight: 700; letter-spacing: -.015em; color: var(--smk-ink); margin: 2.2rem 0 .9rem; line-height: 1.25; }
.smk-prose h3 { font-size: 1.25rem; font-weight: 700; color: var(--smk-ink); margin: 1.8rem 0 .7rem; }
.smk-prose h4 { font-size: 1.08rem; font-weight: 700; color: var(--smk-ink); margin: 1.5rem 0 .6rem; }
.smk-prose p { margin: 0 0 1.25rem; }
.smk-prose a { color: var(--smk-brand); text-decoration: underline; text-underline-offset: 2px; }
.smk-prose a:hover { color: #1d4ed8; }
.smk-prose ul, .smk-prose ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }
.smk-prose li { margin-bottom: .5rem; }
.smk-prose ul li::marker { color: var(--smk-brand); }
.smk-prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 1.5rem 0; }
.smk-prose blockquote {
    margin: 1.75rem 0; padding: 1rem 1.4rem; border-left: 4px solid var(--smk-brand);
    background: var(--smk-brand-soft); border-radius: 0 12px 12px 0; color: var(--smk-ink-2); font-style: italic;
}
.smk-prose pre { background: #0f172a; color: #e2e8f0; padding: 1.1rem 1.3rem; border-radius: 12px; overflow-x: auto; margin: 1.5rem 0; font-size: .9rem; }
.smk-prose code { background: var(--smk-brand-soft); color: #1d4ed8; padding: .15rem .4rem; border-radius: 5px; font-size: .9em; }
.smk-prose pre code { background: transparent; color: inherit; padding: 0; }
.smk-prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.smk-prose th, .smk-prose td { border: 1px solid var(--smk-border); padding: .65rem .85rem; text-align: left; }
.smk-prose th { background: var(--smk-bg); font-weight: 700; }
.smk-prose hr { border: 0; border-top: 1px solid var(--smk-border); margin: 2rem 0; }

/* Share row */
.smk-article__share { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--smk-border); }
.smk-article__share-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--smk-ink-3); margin-right: .35rem; }
.smk-share-btn {
    width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px; border: 1px solid var(--smk-border); background: #fff; color: var(--smk-ink-2);
    transition: all .16s ease; text-decoration: none;
}
.smk-share-btn:hover { color: #fff; background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%); border-color: transparent; transform: translateY(-2px); }

/* RTL niceties */
html[dir="rtl"] .smk-blog__hero-search .form-control { border-radius: 0 13px 13px 0; }
html[dir="rtl"] .smk-blog__hero-search .btn { border-radius: 13px 0 0 13px; }
html[dir="rtl"] .smk-prose ul, html[dir="rtl"] .smk-prose ol { padding-left: 0; padding-right: 1.4rem; }
html[dir="rtl"] .smk-prose blockquote { border-left: 0; border-right: 4px solid var(--smk-brand); border-radius: 12px 0 0 12px; }

/* ============================================================
   Scroll-aware navbar logo swap (marketing header)
   - Top of page (dark hero): show the light logo (3.png / toplogo).
   - Scrolled (.is-scrolled): swap to the colored brand badge.
   Appended last so it wins the cascade over the earlier logo filters.
   ============================================================ */
body.index .navbar-custom .navbar-logo-light {
    display: inline-block;
    height: 40px;
    filter: none !important;          /* never invert the light logo */
    transition: opacity .35s ease;
}
/* Top state: light logo shown, colored badge hidden */
body.index .navbar-custom #loadlogo,
body.index .navbar-custom img.navbar-logo { display: none !important; }

/* Scrolled state: colored badge back, light logo hidden */
body.index .navbar-custom.is-scrolled .navbar-logo-light { display: none !important; }
body.index .navbar-custom.is-scrolled #loadlogo,
body.index .navbar-custom.is-scrolled img.navbar-logo {
    display: inline-block !important;
    filter: none !important;          /* keep the badge its real colors */
}

/* ============================================================
   ELEGANT PRICING — Adobe/Apple-flavoured cards.
   Shared by the PARTNERS page and the HOMEPAGE pricing section
   (.smk-pricing). Scoped via :is() so the plans partial keeps its
   default layout anywhere else it's rendered (e.g. /pay).
   ============================================================ */

/* Partners-only: break the pricing out of the narrow centered hero
   column so the cards have full width to sit on one line. */
@media (min-width: 992px) {
  body[data-smk-route="partners"] .hero-2up-wrapper .col-md-10.offset-md-1 {
    flex: 0 0 100% !important; max-width: 100% !important; margin-left: 0 !important;
  }
  body[data-smk-route="partners"] .hero-2up-content { width: 100%; }
  body[data-smk-route="partners"] .copy-container {
    margin-left: 0 !important; margin-right: 0 !important; width: 100%; max-width: 1240px;
  }
}

/* One line: equal, compact columns (both pages). */
@media (min-width: 992px) {
  :is(body[data-smk-route="partners"] .copy-container, .smk-pricing) .row.justify-content-around {
    flex-wrap: nowrap !important;
    align-items: flex-start;   /* each card sizes to its own content (no forced equal height) */
    justify-content: center !important;
    gap: 16px;
  }
  :is(body[data-smk-route="partners"] .copy-container, .smk-pricing) .row.justify-content-around > [class*="col-"] {
    flex: 1 1 0 !important;
    max-width: 236px !important;
    width: auto !important;
    padding: 0 !important;
  }
}

/* Homepage: the plans sit in a Bootstrap .row (−15px side margins) which
   makes the cards overflow the 1200px container. Zero those margins so the
   pricing row lines up exactly with the "Ready to engage…" CTA band below. */
.smk-pricing .row.justify-content-around { margin-left: 0 !important; margin-right: 0 !important; }

/* Frequency toggle — segmented pill */
:is(body[data-smk-route="partners"], .smk-pricing) .btn-group-custom {
  display: inline-flex; background: rgba(15,23,42,.05);
  border-radius: 999px; padding: 4px; gap: 2px; border: 0;
}
:is(body[data-smk-route="partners"], .smk-pricing) .btn-group-custom .btn {
  border: 0 !important; border-radius: 999px !important;
  font-size: .82rem; font-weight: 600; padding: .42rem 1.15rem; color: #475569; box-shadow: none !important;
}
:is(body[data-smk-route="partners"], .smk-pricing) .btn-group-custom .btn.active {
  background: #fff !important; color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.12) !important;
}

/* ---- Adobe/Apple-style card: left-aligned, airy, minimal ---- */
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-plan {
  position: relative;
  border: 1px solid #e6e8ee !important;
  border-radius: 16px !important;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  overflow: hidden;
  text-align: left;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-plan:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 50px -18px rgba(15,23,42,.22);
  border-color: #cdd2dd !important;
}

/* Header — left aligned, no divider */
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-header {
  align-items: flex-start !important;
  text-align: left !important;
  padding: 1.6rem 1.4rem .4rem !important;
  border-bottom: 0 !important;
}
/* Plan name → bold heading (not a pill) */
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-name {
  background: transparent !important;
  color: #0f172a !important;
  font-size: 1.02rem !important; font-weight: 700 !important;
  letter-spacing: -.01em !important; text-transform: none !important;
  padding: 0 !important; border-radius: 0 !important;
}
/* Price → big, currency first, "/mo" appended on paid plans */
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-price {
  display: flex !important; flex-wrap: wrap; align-items: baseline; gap: .28rem;
  margin: 1rem 0 .15rem !important; line-height: 1;
}
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-price-amount {
  font-size: 2.2rem !important; font-weight: 800 !important; letter-spacing: -.03em; color: #1d1d1f;
}
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-price-currency { order: -1; font-size: 1.05rem !important; font-weight: 700; color: #1d1d1f; }
:is(body[data-smk-route="partners"], .smk-pricing) [data-plan-monthly] .pricing-price::after {
  content: "/mo"; order: 99; font-size: 1rem; font-weight: 700; color: #1d1d1f; margin-left: -.1rem;
}
/* Italic sub-labels, Adobe-style — only on paid plans */
:is(body[data-smk-route="partners"], .smk-pricing) [data-plan-monthly] .pricing-details::before {
  content: "per plan · billed monthly, excl. VAT";
  display: block; font-style: italic; font-size: .76rem; color: #86868b;
  margin-bottom: .7rem;
}
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-details {
  text-align: left !important;
  font-size: .82rem !important; line-height: 1.5; color: #515154 !important;
  margin-bottom: 1.1rem !important;
}

/* Body — hide the feature checklist (compare table / homepage features
   list carries the detail); keep button + trust line at the bottom. */
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-body {
  justify-content: flex-end !important;
  gap: .6rem;
  padding: 0 1.4rem 1.4rem !important;
}
/* Each card sizes to its own content — button sits right after the features, no
   forced equal-height / empty gap (esp. on the short Member card). */
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-plan { height: auto !important; }
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-body { justify-content: flex-start !important; }

/* Price-based staircase (desktop): cheapest plan is the shortest, each pricier
   plan steps up. Min-heights ascend per column; content can only make a card
   taller, never shorter, so the order always holds. */
@media (min-width: 992px) {
  :is(body[data-smk-route="partners"], .smk-pricing) .row.justify-content-around > [class*="col-"]:nth-child(1) .pricing-plan { min-height: 290px; }
  :is(body[data-smk-route="partners"], .smk-pricing) .row.justify-content-around > [class*="col-"]:nth-child(2) .pricing-plan { min-height: 380px; }
  :is(body[data-smk-route="partners"], .smk-pricing) .row.justify-content-around > [class*="col-"]:nth-child(3) .pricing-plan { min-height: 450px; }
  :is(body[data-smk-route="partners"], .smk-pricing) .row.justify-content-around > [class*="col-"]:nth-child(4) .pricing-plan { min-height: 520px; }
  :is(body[data-smk-route="partners"], .smk-pricing) .row.justify-content-around > [class*="col-"]:nth-child(5) .pricing-plan { min-height: 590px; }
}
/* Lift the "Most popular" card so it reads as featured (badge is inside, safe). */
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-plan.smk-plan-popular { transform: translateY(-14px); }
@media (max-width: 991px){ :is(body[data-smk-route="partners"], .smk-pricing) .pricing-plan.smk-plan-popular { transform: none; } }

/* Compact cards show the MAIN features (trimmed list), small + tight so the
   cards stay short. */
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-features {
  display: block !important;
  list-style: none; margin: .25rem 0 .9rem; padding: 0 1.3rem !important; text-align: left;
}
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-features li {
  margin: 0 0 .32rem; padding: 0; border: 0 !important; background: none !important;
}
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-features li > div {
  display: flex; align-items: flex-start; gap: .4rem;
  font-size: .7rem !important; line-height: 1.3; color: #1d1d1f !important; font-weight: 500;
}
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-features .layout-icon { flex: 0 0 12px; width: 12px; height: 12px; margin-top: 2px; }
[data-theme-style="dark"] :is(body[data-smk-route="partners"], .smk-pricing) .pricing-features li > div { color: #f5f5f7 !important; }
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-body::after {
  content: "\1F512  Secure checkout";
  font-size: .7rem; color: #a1a1a6; text-align: center;
}

/* CTA button — clean royal-blue pill (Adobe vibe) */
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-plan .btn {
  border-radius: 999px !important; font-size: .9rem !important; font-weight: 600 !important;
  padding: .7rem 1rem !important; line-height: 1.2;
}
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-plan .btn-primary {
  background: #2563eb !important; border: 0 !important;
  box-shadow: 0 10px 22px -10px rgba(37,99,235,.65) !important;
}
:is(body[data-smk-route="partners"], .smk-pricing) .pricing-plan .btn-primary:hover { background: #1d4ed8 !important; }

/* The "Most popular" badge is now data-driven (.smk-plan-popular on the Premier
   plan via its smk_popular setting) — see the block further below. The old
   positional :nth-child(2) badge was removed because reordering the plans made
   it land on the wrong card. */

/* Tablet: keep price legible */
@media (min-width: 768px) and (max-width: 991.98px) {
  :is(body[data-smk-route="partners"], .smk-pricing) .pricing-price-amount { font-size: 2.3rem !important; }
}

/* ---- i18n for the CSS-generated pricing labels (content: can't call l()).
        Swapped per <html lang>. Codes: ar es fr ru ch ---- */
/* sublabel */
html[lang="ar"] :is(body[data-smk-route="partners"], .smk-pricing) [data-plan-monthly] .pricing-details::before { content: "لكل خطة · فوترة شهرية، غير شامل الضريبة"; }
html[lang="es"] :is(body[data-smk-route="partners"], .smk-pricing) [data-plan-monthly] .pricing-details::before { content: "por plan · facturación mensual, sin IVA"; }
html[lang="fr"] :is(body[data-smk-route="partners"], .smk-pricing) [data-plan-monthly] .pricing-details::before { content: "par plan · facturé mensuellement, hors TVA"; }
html[lang="ru"] :is(body[data-smk-route="partners"], .smk-pricing) [data-plan-monthly] .pricing-details::before { content: "за план · ежемесячно, без НДС"; }
html[lang="ch"] :is(body[data-smk-route="partners"], .smk-pricing) [data-plan-monthly] .pricing-details::before { content: "每套餐 · 按月计费，不含增值税"; }
/* Secure checkout */
html[lang="ar"] :is(body[data-smk-route="partners"], .smk-pricing) .pricing-body::after { content: "\1F512  دفع آمن"; }
html[lang="es"] :is(body[data-smk-route="partners"], .smk-pricing) .pricing-body::after { content: "\1F512  Pago seguro"; }
html[lang="fr"] :is(body[data-smk-route="partners"], .smk-pricing) .pricing-body::after { content: "\1F512  Paiement sécurisé"; }
html[lang="ru"] :is(body[data-smk-route="partners"], .smk-pricing) .pricing-body::after { content: "\1F512  Безопасная оплата"; }
html[lang="ch"] :is(body[data-smk-route="partners"], .smk-pricing) .pricing-body::after { content: "\1F512  安全结账"; }

/* ---- Pricing: "Most popular" highlighted plan (Premier) ---- */
.pricing-plan.smk-plan-popular {
    position: relative;
    overflow: visible;
    border: 2px solid #2563eb !important;
    box-shadow: 0 24px 50px -20px rgba(6, 182, 212,.45) !important;
}
/* Badge sits inside the card's top-right corner so it can never be clipped. */
.pricing-plan.smk-plan-popular .smk-plan-badge {
    position: absolute;
    top: 14px; right: 14px; z-index: 4;
    background: linear-gradient(135deg,#06b6d4,#2563eb);
    color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
    padding: .32rem .72rem; border-radius: 999px; white-space: nowrap;
    box-shadow: 0 6px 18px -6px rgba(6, 182, 212,.7);
}
.pricing-plan.smk-plan-popular .smk-plan-badge::before { content: "\2605  "; }
/* Push the plan name down so the badge never overlaps it. */
.pricing-plan.smk-plan-popular .pricing-header { padding-top: 1.9rem !important; }
[dir="rtl"] .pricing-plan.smk-plan-popular .smk-plan-badge { right: auto; left: 14px; }

/* =====================================================================
   MOBILE — survey / data / graphs / QR editor (phones + tablets < 992px)
   ---------------------------------------------------------------------
   The three-column shell + SurveyJS Creator's fixed 280px toolbox column
   don't fit a small screen: 76px rail + 280px toolbox pushed the design
   surface off the right edge (blank page under the left menu), and the
   docked property-grid plastered an empty white panel over the canvas.
   Below 992px we give the editor the ENTIRE viewport — icon rail hidden
   (all nav still reachable via the top-bar ☰ drawer), no shell footer —
   and SurveyJS runs in its native mobile view (isMobileView, set in
   biolink.php) so the toolbox + property grid become popups/flyouts over
   a full-width design surface.
   ===================================================================== */
@media (max-width: 991.98px) {

    /* ---- Full-bleed: single-column shell, no icon rail ---- */
    body.smk-route-editor .smk-shell,
    body.smk-route-editor[dir="rtl"] .smk-shell {
        grid-template-columns: 1fr;
        grid-template-areas: "main";
    }
    body.smk-route-editor .smk-shell__rail { display: none !important; }

    /* Nav drawer hugs the edge now that the rail is gone. */
    body.smk-route-editor .smk-shell__nav { left: 0; }
    body.smk-route-editor[dir="rtl"] .smk-shell__nav { left: auto; right: 0; }

    /* Reclaim vertical space while editing. */
    body.smk-route-editor .smk-shell__footer { display: none !important; }

    /* Tighten the top bar so the ☰ + credits + create + avatar fit. */
    body.smk-route-editor .smk-shell__topbar { padding: .5rem .75rem; gap: .4rem; }
    body.smk-route-editor .smk-shell__crumb  { display: none; }

    /* ---- Height chain: canvas → creator fill the area under the top bar.
       Drop the desktop `calc(100vh - 100px)`, which double-counted the
       shell top-bar once the editor lives INSIDE the shell. ---- */
    body.smk-route-editor .smk-shell__canvas {
        padding: 0 !important;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    body.smk-route-editor #surveyCreatorContainer {
        height: 100% !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
    }
    body.smk-route-editor .svc-creator,
    body.smk-route-editor .svc-creator__area,
    body.smk-route-editor .svc-creator__content-holder,
    body.smk-route-editor .svc-creator__content-wrapper {
        height: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Design surface owns the full width (toolbox is a popup in mobile
       view, so it must not reserve an inline column). */
    body.smk-route-editor .svc-tab-designer,
    body.smk-route-editor .svc-designer,
    body.smk-route-editor .svc-page__content,
    body.smk-route-editor .svc-question__content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* SurveyJS's mobile footer toolbar is position:fixed — leave room so
       the last question isn't hidden behind it. */
    body.smk-route-editor .svc-creator__content-holder,
    body.smk-route-editor .svc-tab-designer { padding-bottom: 72px !important; }

    /* Action bars: if the icon row is wider than the screen, scroll it
       instead of clipping the buttons. */
    body.smk-route-editor .svc-top-bar .sv-action-bar,
    body.smk-route-editor .svc-footer-bar .sv-action-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    body.smk-route-editor .svc-top-bar .sv-action-bar::-webkit-scrollbar,
    body.smk-route-editor .svc-footer-bar .sv-action-bar::-webkit-scrollbar { height: 0; }

    /* Property-grid / side-bar, when opened in mobile view, is a near
       full-width sheet rather than a cramped 240px column. */
    body.smk-route-editor .svc-side-bar__container {
        width: min(92vw, 380px) !important;
        max-width: 92vw !important;
    }

    /* Full-width designer in responsive mode: never let the DOCKED property
       grid reserve layout width (that empty panel pinned to the right). When
       SurveyJS is in mobile view it renders the grid as a flyout (--flyout) —
       an overlay hidden until opened — which we leave alone. Only the
       non-flyout docked panel is suppressed, so the editor fills the screen. */
    body.smk-route-editor .svc-side-bar:not(.svc-side-bar--flyout) {
        display: none !important;
    }
    body.smk-route-editor .svc-creator__content-wrapper,
    body.smk-route-editor .svc-flex-row {
        width: 100% !important;
    }
}

/* ===== One-click AI Translate picker (survey editor Translation tab) =====
   Vanilla overlay injected by biolink.php's window.smkOpenAiTranslate. */
.smk-tr-picker { position: fixed; inset: 0; z-index: 20000; display: flex; align-items: center; justify-content: center; }
.smk-tr-picker .smk-ai-tr__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(2px); }
.smk-tr-picker .smk-ai-tr__dialog {
    position: relative; width: min(92vw, 460px); max-height: 86vh; display: flex; flex-direction: column;
    background: #fff; border-radius: 18px; box-shadow: 0 24px 60px -12px rgba(15,23,42,.4); overflow: hidden;
}
.smk-tr-picker .smk-ai-tr__head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 12px; }
.smk-tr-picker .smk-ai-tr__title { font-size: 1.05rem; font-weight: 800; color: #0f172a; }
.smk-tr-picker .smk-ai-tr__sub { font-size: .82rem; color: #667085; margin-top: 4px; line-height: 1.4; }
.smk-tr-picker .smk-ai-tr__x { margin-left: auto; border: none; background: transparent; font-size: 1.6rem; line-height: 1; color: #98a2b3; cursor: pointer; padding: 0 4px; }
.smk-tr-picker .smk-ai-tr__search { margin: 0 20px 10px; padding: .55rem .8rem; border: 1.5px solid #e4e7ec; border-radius: 10px; font-size: .9rem; outline: none; }
.smk-tr-picker .smk-ai-tr__search:focus { border-color: #06b6d4; box-shadow: 0 0 0 4px rgba(6, 182, 212,.12); }
.smk-tr-picker .smk-ai-tr__list { overflow-y: auto; padding: 0 12px; margin: 0 8px; flex: 1 1 auto; }
.smk-tr-picker .smk-ai-tr__item { display: flex; align-items: center; gap: 10px; padding: .5rem .6rem; border-radius: 10px; cursor: pointer; font-size: .92rem; color: #1f2937; }
.smk-tr-picker .smk-ai-tr__item:hover { background: #f4f1fe; }
/* Force a real, visibly-ticked checkbox — the app applies a global
   appearance:none reset that otherwise swallows the native check mark.
   We draw our own box + tick so the selected state is unmistakable. */
.smk-tr-picker .smk-ai-tr__item input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px; height: 18px; flex: 0 0 auto;
    margin: 0; cursor: pointer;
    border: 2px solid #cbd5e1; border-radius: 5px;
    background: #fff; position: relative;
    transition: background .12s, border-color .12s;
}
.smk-tr-picker .smk-ai-tr__item input[type="checkbox"]:checked {
    background: #06b6d4; border-color: #06b6d4;
}
.smk-tr-picker .smk-ai-tr__item input[type="checkbox"]:checked::after {
    content: ""; position: absolute;
    left: 5px; top: 1.5px; width: 4px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.smk-tr-picker .smk-ai-tr__item > span:nth-of-type(1) { flex: 1 1 auto; }
.smk-tr-picker .smk-ai-tr__code { font-size: .68rem; font-weight: 700; color: #98a2b3; background: #f3f4f6; padding: 2px 6px; border-radius: 6px; }
.smk-tr-picker .smk-ai-tr__status { padding: 4px 20px; font-size: .82rem; }
.smk-tr-picker .smk-ai-tr__busy { color: #0e7490; }
.smk-tr-picker .smk-ai-tr__ok { color: #16a34a; font-weight: 600; }
.smk-tr-picker .smk-ai-tr__err { color: #dc2626; }
.smk-tr-picker .smk-ai-tr__foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px 18px; border-top: 1px solid #f1f2f4; }
.smk-tr-picker .smk-ai-tr__count { font-size: .82rem; color: #667085; margin: 0; }
.smk-tr-picker .smk-ai-tr__cancel { border: 1.5px solid #e4e7ec; background: #fff; color: #475467; border-radius: 10px; padding: .5rem .9rem; font-weight: 600; font-size: .86rem; cursor: pointer; }
.smk-tr-picker .smk-ai-tr__go { border: none; background: linear-gradient(135deg,#06b6d4,#0e7490); color: #fff; border-radius: 10px; padding: .5rem 1.1rem; font-weight: 700; font-size: .86rem; cursor: pointer; box-shadow: 0 4px 14px rgba(6, 182, 212,.3); }
.smk-tr-picker .smk-ai-tr__go:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
[data-theme-style="dark"] .smk-tr-picker .smk-ai-tr__dialog { background: #111827; }
[data-theme-style="dark"] .smk-tr-picker .smk-ai-tr__title { color: #f1f5f9; }
[data-theme-style="dark"] .smk-tr-picker .smk-ai-tr__item { color: #e5e7eb; }
[data-theme-style="dark"] .smk-tr-picker .smk-ai-tr__item:hover { background: #1f2937; }

/* =============================================================================
   SurveyMaker — Brand identity layer
   -----------------------------------------------------------------------------
   Blue (#2563EB) is the primary brand colour. Violet (#06b6d4) marks AI
   features only. This block is loaded last so it settles the cascade; the
   rules below are the identity contract — change them here, not inline.
   ========================================================================== */

/* 1. Retarget the Bootstrap base scale. It shipped teal (#38b2ac), which was
      the largest single source of off-brand colour: every default button,
      link, focus ring and badge inherited it. */
:root {
    --primary:      #2563eb;
    --primary-100:  #dbeafe;
    --primary-200:  #bfdbfe;
    --primary-300:  #93c5fd;
    --primary-400:  #60a5fa;
    --primary-600:  #2563eb;
    --primary-700:  #1d4ed8;
    --primary-800:  #1e40af;
    --primary-900:  #1e3a8a;
}

/* 2. Sidebar active item — soft blue wash, blue text and icon (was a solid
      fill with white text, which read as a heavy block in the rail). */
.app-sidebar-links > li.active > a:not(.default) {
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--brand-primary);
}
.app-sidebar-links > li.active > a:not(.default) i,
.app-sidebar-links > li.active > a:not(.default) svg {
    color: var(--brand-primary);
}
[data-theme-style="dark"] .app-sidebar-links > li.active > a:not(.default) {
    background: rgba(37, 99, 235, .16);
    color: #bfdbfe;
    box-shadow: inset 3px 0 0 0 var(--brand-primary);
}
[data-theme-style="dark"] .app-sidebar-links > li.active > a:not(.default) i,
[data-theme-style="dark"] .app-sidebar-links > li.active > a:not(.default) svg {
    color: #bfdbfe;
}

/* 3. The brand gradient is reserved for the Create action, the assistant
      identity, and headline marketing moments — nowhere else. */
.btn-brand-gradient,
a[data-target="#create_survey_wizard"].btn,
button[data-target="#create_survey_wizard"].btn {
    background: var(--brand-gradient);
    border: 0;
    color: #fff;
}
.btn-brand-gradient:hover,
a[data-target="#create_survey_wizard"].btn:hover,
button[data-target="#create_survey_wizard"].btn:hover {
    background: var(--brand-gradient);
    color: #fff;
    filter: saturate(1.08) brightness(1.04);
}

/* 4. Ordinary buttons and links stay flat blue — no gradient, no violet. */
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}
.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-outline-primary:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}
/* Scoped to content areas. Unscoped, this selector is (0,3,1) and outranked
   `.smk-shell__item` at (0,1,0) — which is why every sidebar entry rendered
   blue instead of only the active one. Chrome keeps its own colours. */
.smk-shell__pagecol a:not(.btn):not(.nav-link):not(.dropdown-item),
.modal-body a:not(.btn):not(.nav-link):not(.dropdown-item) { color: var(--brand-primary-text); }
.smk-shell__pagecol a:not(.btn):not(.nav-link):not(.dropdown-item):hover,
.modal-body a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: var(--brand-primary-hover); }
.form-control:focus,
.custom-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15);
}

/* 5. AI surfaces carry the violet. The assistant card previously used an
      orange wash (#fff7ed / #fed7aa / #ea580c) — a colour family that
      appeared nowhere else in the product. */
.smk-ai-card {
    background: linear-gradient(180deg, var(--brand-ai-soft) 0%, #ffffff 60%);
    border: 1px solid #a5f3fc;
}
.smk-ai-card__icon {
    background: var(--brand-ai-soft);
    color: var(--brand-ai);
}
/* Assistant window (the AI survey wizard): gradient header, white body.
   The ID selector matches the specificity of the view's inline <style>. */
#create_survey_wizard .smk-wizard__header {
    background: var(--brand-gradient);
    border-bottom: 0;
}
#create_survey_wizard .smk-wizard__title h5,
#create_survey_wizard .smk-wizard__steps { color: #fff; }
#create_survey_wizard .smk-wizard__header .close { color: #fff; opacity: .9; text-shadow: none; }
#create_survey_wizard .smk-wizard__step {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}
#create_survey_wizard .smk-wizard__body,
#create_survey_wizard .smk-wizard__footer { background: var(--surface); }

/* AI-only affordances: badges and chips. */
.smk-ai-badge,
.badge-ai {
    background: var(--brand-ai-soft);
    color: #0e7490;               /* darker violet: 6.9:1 on --brand-ai-soft */
    border: 1px solid #a5f3fc;
}

/* 6. Metrics keep a fixed meaning: blue = views, violet = responses,
      emerald = active. Charts must not re-map these. */
.smk-stat-tile--views     .smk-stat-tile__num  { color: var(--brand-primary); }
.smk-stat-tile--responses .smk-stat-tile__num  { color: var(--brand-ai); }
.smk-stat-tile--active    .smk-stat-tile__num  { color: var(--success); }
.smk-stat-tile--views     .smk-stat-tile__icon { background: var(--brand-primary-soft); color: var(--brand-primary); }
.smk-stat-tile--responses .smk-stat-tile__icon { background: var(--brand-ai-soft);      color: var(--brand-ai); }
.smk-stat-tile--active    .smk-stat-tile__icon { background: #d1fae5;                   color: #047857; }

/* 7. Calm the page behind the cards so the cards themselves carry the
      contrast, instead of a saturated blue field competing with them. */
body.app,
.app-content,
.smk-shell__canvas {
    background: var(--background);
}
.smk-shell__canvas > .smk-section,
.smk-card,
.card {
    background: var(--surface);
    border-color: var(--border);
}


/* =============================================================================
   Dashboard redesign — blue primary, cyan accent
   -----------------------------------------------------------------------------
   Loaded last so it settles the cascade. Geometry and colour come from the
   tokens declared in the brand block above; avoid new literals here.
   ========================================================================== */

/* ---------- 1. Sidebar ---------------------------------------------------- */
.smk-shell__rail,
.smk-shell__nav {
    background: var(--surface);
    border-right-color: var(--border);
}
[dir="rtl"] .smk-shell__rail,
[dir="rtl"] .smk-shell__nav { border-left-color: var(--border); }

.smk-shell__item,
.smk-shell__rail-item { color: var(--text-secondary); }
.smk-shell__item i,
.smk-shell__rail-item i { color: var(--text-secondary); }

.smk-shell__item:hover,
.smk-shell__rail-item:hover {
    background: var(--brand-primary-soft);
    color: var(--brand-primary-text);
}
.smk-shell__item:hover i,
.smk-shell__rail-item:hover i { color: var(--brand-primary-text); }

/* Active: soft blue wash + a thin indicator on the leading edge. */
.smk-shell__item.is-active,
.smk-shell__rail-item.is-active {
    position: relative;
    background: var(--brand-primary-soft);
    color: var(--brand-primary-text);
    font-weight: 600;
}
.smk-shell__item.is-active i,
.smk-shell__rail-item.is-active i { color: var(--brand-primary-text); }
.smk-shell__item.is-active::before,
.smk-shell__rail-item.is-active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: 0 3px 3px 0;
    background: var(--brand-primary);
}
[dir="rtl"] .smk-shell__item.is-active::before,
[dir="rtl"] .smk-shell__rail-item.is-active::before { border-radius: 3px 0 0 3px; }

/* Quieter group labels, more air between groups. */
.smk-shell__group { margin: .25rem 0 1.25rem; }
.smk-shell__group-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    /* --text-muted (#94a3b8) is 2.6:1 on white and fails AA at this size. */
    color: var(--text-secondary);
    padding: .25rem .65rem .35rem;
}
.smk-shell__item { padding: .55rem .65rem; margin: 2px 0; }

/* ---------- 2. Top header ------------------------------------------------- */
.smk-shell__topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}
.smk-shell__cta-btn {
    background: var(--brand-gradient);
    border: 0;
    color: #fff;
    border-radius: var(--radius-control);
    font-weight: 600;
    box-shadow: var(--shadow-raised);
    transition: filter .15s ease, transform .15s ease;
}
.smk-shell__cta-btn:hover,
.smk-shell__cta-btn:focus {
    color: #fff;
    filter: saturate(1.08) brightness(1.04);
    transform: translateY(-1px);
}
.smk-shell__cta-btn:focus-visible { outline: none; box-shadow: var(--shadow-raised), var(--focus-ring); }
.smk-shell__topbar-actions { gap: .5rem; }
.smk-shell__icon-btn {
    color: var(--text-secondary);
    border-radius: var(--radius-control-sm);
}
.smk-shell__icon-btn:hover { background: var(--brand-primary-soft); color: var(--brand-primary-text); }

/* ---------- 3. Analytics panels ------------------------------------------- */
.smk-panel {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-card) !important;
    padding: 1.25rem 1.35rem !important;
}
.smk-pro-grid { gap: 1.25rem; }
.smk-panel__title { color: var(--text-primary); font-weight: 600; }
.smk-panel__sub   { color: var(--text-secondary); }
/* The canvas behind the cards stays the plain page background so the cards
   themselves carry the contrast. */
.smk-shell__canvas,
.smk-shell__pagecol { background: var(--background); }

/* ---------- 4. Stats row -------------------------------------------------- */
.smk-stats-strip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
.smk-stat-tile__icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-control-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .95rem;
}
.smk-stat-tile__num { color: var(--text-primary); font-weight: 700; }
.smk-stat-tile__lbl { color: var(--text-secondary); font-size: .8rem; }

.smk-stat-tile--surveys   .smk-stat-tile__icon { background: var(--brand-primary-soft); color: var(--brand-primary-text); }
.smk-stat-tile--responses .smk-stat-tile__icon { background: var(--accent-cyan-soft);   color: var(--accent-cyan-ink); }
.smk-stat-tile--views     .smk-stat-tile__icon { background: var(--brand-primary-soft); color: var(--brand-primary-text); }
.smk-stat-tile--active    .smk-stat-tile__icon { background: var(--success-soft);       color: #047857; }
.smk-stat-tile--langs     .smk-stat-tile__icon { background: var(--surface-subtle);     color: var(--text-secondary); }

.smk-stat-tile--surveys   .smk-stat-tile__num { color: var(--brand-primary-text); }
.smk-stat-tile--responses .smk-stat-tile__num { color: var(--accent-cyan-ink); }
.smk-stat-tile--views     .smk-stat-tile__num { color: var(--brand-primary-text); }
.smk-stat-tile--active    .smk-stat-tile__num { color: #047857; }

/* ---------- 5. Survey table ----------------------------------------------- */
.smk-list-header {
    border-bottom: 1px solid var(--border);
    background: transparent;
}
.smk-list-header__cell {
    color: var(--text-secondary);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.smk-survey-box {
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    transition: background .15s ease;
}
.smk-survey-box:last-child { border-bottom: 0; }
.smk-survey-box:hover { background: var(--background); }
.smk-list-cell { padding-top: .95rem; padding-bottom: .95rem; }
.smk-list-cell__date { color: var(--text-primary); font-weight: 600; font-size: .82rem; }
.smk-list-cell__time { color: var(--text-secondary); font-size: .75rem; }

/* Action icons: one size, one rhythm, blue by default, red when destructive. */
.smk-survey-box .smk-actions-bar a,
.smk-survey-box .smk-actions-bar button {
    color: var(--text-secondary);
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
}
.smk-survey-box .smk-actions-bar a:hover,
.smk-survey-box .smk-actions-bar button:hover {
    background: var(--brand-primary-soft);
    color: var(--brand-primary-text);
}
.smk-survey-box .smk-actions-bar .text-danger:hover,
.smk-survey-box .smk-actions-bar [data-danger]:hover {
    background: #fef2f2;
    color: var(--danger);
}

/* ---------- 6. Buttons and controls --------------------------------------- */
.btn { border-radius: var(--radius-control-sm); }
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}
.btn-secondary,
.btn-outline-secondary,
.btn-light {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text-primary);
}
.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-light:hover {
    background-color: var(--background);
    border-color: var(--border);
    color: var(--brand-primary);
}
.btn-brand-gradient,
a[data-target="#create_survey_wizard"].btn,
button[data-target="#create_survey_wizard"].btn {
    background: var(--brand-gradient);
    border: 0;
    color: #fff;
}

/* One focus treatment everywhere — no violet rings left anywhere. */
.btn:focus-visible,
.form-control:focus,
.custom-select:focus,
.custom-control-input:focus ~ .custom-control-label::before,
a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--brand-primary);
}
.form-control, .custom-select { border-radius: var(--radius-control-sm); border-color: var(--border); }

/* Toggles / switches / selected states resolve to blue. */
.custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.badge-primary { background-color: var(--brand-primary); }
.badge-soft-primary { background-color: var(--brand-primary-soft); color: var(--brand-primary-text); }
.badge-info, .badge-soft-info { background-color: var(--accent-cyan-soft); color: var(--accent-cyan-ink); }

/* ---------- 7. Typography ------------------------------------------------- */
/* Scoped on purpose. A blanket h1-h6 colour leaks into coloured chrome: it
   turned the Assistant's gradient-header title near-black, because a direct
   element rule beats the white it was inheriting from the header. */
.smk-shell__pagecol :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5),
.smk-panel :is(h1, h2, h3, h4, h5, h6),
.modal-body :is(h1, h2, h3, h4, h5, h6) { color: var(--text-primary); }

/* Anything on a brand-coloured surface keeps its inherited colour. */
.smk-asst-head :is(h1, h2, h3, h4, h5, h6, span),
.smk-wizard__header :is(h1, h2, h3, h4, h5, h6),
.smk-shell__cta-btn :is(h1, h2, h3, h4, h5, h6, span) { color: inherit; }

h1, .h1 { font-size: 1.5rem;  font-weight: 700; letter-spacing: -.01em; }
h2, .h2 { font-size: 1.25rem; font-weight: 700; }
h3, .h3 { font-size: 1.05rem; font-weight: 600; }
.text-muted, .smk-muted { color: var(--text-secondary) !important; }
small, .small { color: var(--text-secondary); }

/* ---------- 8. Responsiveness --------------------------------------------- */
html, body { overflow-x: hidden; }
.smk-shell__canvas, .smk-shell__pagecol { max-width: 100%; }
.smk-stats-strip { flex-wrap: wrap; }
@media (max-width: 991.98px) {
    .smk-pro-grid { grid-template-columns: 1fr; }
    .smk-stats-strip > * { flex: 1 1 50%; }
}
@media (max-width: 575.98px) {
    .smk-stats-strip > * { flex: 1 1 100%; }
    .smk-panel { padding: 1rem !important; }
}

/* =============================================================================
   Dark mode — values for the redesign tokens
   -----------------------------------------------------------------------------
   The tokens introduced above (--surface, --background, --text-primary,
   --border, --brand-primary-soft, ...) had no dark counterpart, so dark mode
   rendered light-theme values: near-black panel titles on dark panels and a
   glaring pale-blue block for the active nav item. These mirror the existing
   --smk-* dark scale rather than inventing a second one.
   ========================================================================== */
[data-theme-style="dark"] {
    --surface:              #111827;   /* = --smk-surface   */
    --surface-subtle:       #1e293b;   /* = --smk-ink-100   */
    --background:           #0b1220;   /* = --smk-surface-2 */
    --text-primary:         #f1f5f9;   /* = --smk-ink-900   */
    --text-secondary:       #94a3b8;   /* = --smk-ink-500   */
    --text-muted:           #64748b;
    --border:               #1f2a3a;   /* = --smk-border    */

    /* Tints become translucent so they sit on the dark surface instead of
       punching a light hole in it. */
    --brand-primary-soft:   rgba(37, 99, 235, .18);
    --accent-cyan-soft:     rgba(6, 182, 212, .16);
    --accent-cyan-border:   rgba(6, 182, 212, .35);
    --success-soft:         rgba(16, 185, 129, .15);

    /* Text hues lighten: #2563eb text on #111827 is 2.5:1 and fails AA,
       #60a5fa is 6.8:1. Solid buttons keep --brand-primary + white text. */
    --brand-primary-text:   #60a5fa;
    --accent-cyan-ink:      #67e8f9;

    --shadow-card:          0 4px 16px rgba(0, 0, 0, .45);
    --shadow-raised:        0 6px 20px rgba(0, 0, 0, .50);
    --focus-ring:           0 0 0 3px rgba(96, 165, 250, .30);
}

/* Chrome that reads colour directly rather than through a token. */
[data-theme-style="dark"] .btn-outline-primary { color: var(--brand-primary-text); border-color: var(--brand-primary-text); }
[data-theme-style="dark"] .btn-outline-primary:hover { background-color: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
/* No dark link override needed: the scoped content-area rule already reads
   --brand-primary-text, which switches theme on its own. An unscoped one
   here would re-break the sidebar in dark mode. */
[data-theme-style="dark"] .smk-shell__pagecol a:not(.btn):not(.nav-link):not(.dropdown-item):hover,
[data-theme-style="dark"] .modal-body a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: #93c5fd; }
[data-theme-style="dark"] .smk-shell__item.is-active::before,
[data-theme-style="dark"] .smk-shell__rail-item.is-active::before { background: var(--brand-primary-text); }
[data-theme-style="dark"] .smk-survey-box:hover { background: rgba(255, 255, 255, .03); }
[data-theme-style="dark"] .smk-survey-box .smk-actions-bar .text-danger:hover { background: rgba(239, 68, 68, .14); }
[data-theme-style="dark"] .smk-list-header__cell { color: var(--text-secondary); }
[data-theme-style="dark"] .smk-panel { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme-style="dark"] .smk-stats-strip { background: var(--surface); border-color: var(--border); }
[data-theme-style="dark"] .smk-shell__topbar { background: var(--surface); border-bottom-color: var(--border); }
[data-theme-style="dark"] .smk-stat-tile--active .smk-stat-tile__icon,
[data-theme-style="dark"] .smk-stat-tile--active .smk-stat-tile__num { color: #34d399; }

/* ---------- Icon rail refinement -----------------------------------------
   The rail packed a 1.05rem icon and a .65rem label into .55rem of padding
   with a 4px gap, so entries read as cramped and the longer labels
   ("Campaigns", "Responses") had no room to breathe. */
.smk-shell__rail { padding: .85rem .4rem 1rem; }
.smk-shell__rail-nav { display: flex; flex-direction: column; gap: 6px; }
.smk-shell__rail-item {
    gap: 6px;
    padding: .6rem .2rem .5rem;
    border-radius: var(--radius-control);
}
.smk-shell__rail-item i { font-size: 1.15rem; }
.smk-shell__rail-item span {
    font-size: .625rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* The rail is only 76px wide, so the active indicator would crowd the icon;
   the filled background alone carries the state here. */
.smk-shell__rail-item.is-active::before { display: none; }
.smk-shell__rail-item.is-active { box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .25); }
[data-theme-style="dark"] .smk-shell__rail-item.is-active { box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .35); }