/* ==========================================================================
   ElitSMM — Aurora Theme for Perfect Panel
   01. Design tokens · 02. Base · 03. Components · 04. App shell
   05. Order page · 06. Lists & pages · 07. Auth · 08. Landing · 09. Journal
   Brand colour: comes from --fsk-site-color (FSK panel), fallback #7346dd.
   ========================================================================== */

:root {
	--accent: var(--fsk-site-color, #7346dd);
	--iris: #a78bfa;
	--cyan: #38bdf8;
	--mint: #34d399;
	--amber: #fbbf24;
	--rose: #fb7185;
	--blue: #60a5fa;

	--ok: var(--mint);
	--warn: var(--amber);
	--bad: var(--rose);
	--note: var(--blue);

	--font: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Arabic", "Noto Sans KR", "Noto Sans SC", sans-serif;
	--font-serif: "Instrument Serif", "Times New Roman", serif;
	--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--r-xs: 8px;
	--r-sm: 12px;
	--r-md: 16px;
	--r-lg: 22px;
	--r-xl: 30px;
	--r-pill: 999px;

	--ease: cubic-bezier(.22, 1, .36, 1);
	--ease-soft: cubic-bezier(.4, 0, .2, 1);
	--t-fast: 180ms;
	--t-mid: 320ms;
	--t-slow: 700ms;

	--sidebar-w: 272px;
	--header-h: 72px;
	--dock-h: 68px;
	--gutter: 28px;
	--content-max: 1480px;
}

html,
html.dark {
	color-scheme: dark;
	--bg: #07070b;
	--bg-2: #0b0b11;
	--surface: #0f0f15;
	--surface-2: #15151d;
	--surface-3: #1c1c26;
	--glass: rgba(16, 16, 23, .68);
	--glass-strong: rgba(14, 14, 20, .86);
	--line: rgba(255, 255, 255, .075);
	--line-2: rgba(255, 255, 255, .13);
	--text: #f4f4f7;
	--text-2: #a9a9b6;
	--text-3: #71717f;
	--ink: #f6f6f8;
	--ink-text: #0a0a0f;
	--sheen: inset 0 1px 0 rgba(255, 255, 255, .055);
	--shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
	--shadow-2: 0 24px 70px -20px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .4);
	--accent-text: color-mix(in oklab, var(--accent) 55%, white);
	--accent-soft: color-mix(in oklab, var(--accent) 20%, transparent);
	--accent-line: color-mix(in oklab, var(--accent) 45%, transparent);
	--scrim: rgba(3, 3, 6, .66);
	--aurora-opacity: 1;
}

html.light {
	color-scheme: light;
	--bg: #f6f6f9;
	--bg-2: #fafafc;
	--surface: #ffffff;
	--surface-2: #f6f6fa;
	--surface-3: #eeeef4;
	--glass: rgba(255, 255, 255, .72);
	--glass-strong: rgba(255, 255, 255, .9);
	--line: rgba(12, 12, 28, .085);
	--line-2: rgba(12, 12, 28, .15);
	--text: #0c0c13;
	--text-2: #565665;
	--text-3: #8a8a99;
	--ink: #0d0d14;
	--ink-text: #ffffff;
	--sheen: inset 0 1px 0 rgba(255, 255, 255, .9);
	--shadow-1: 0 1px 2px rgba(20, 20, 40, .05), 0 10px 26px -14px rgba(20, 20, 40, .16);
	--shadow-2: 0 26px 70px -22px rgba(30, 20, 70, .26), 0 2px 6px rgba(20, 20, 40, .06);
	--accent-text: color-mix(in oklab, var(--accent) 88%, black);
	--accent-soft: color-mix(in oklab, var(--accent) 11%, transparent);
	--accent-line: color-mix(in oklab, var(--accent) 34%, transparent);
	--scrim: rgba(20, 18, 34, .34);
	--aurora-opacity: .8;
	--ok: #059669;
	--warn: #b45309;
	--bad: #e11d48;
	--note: #2563eb;
}

/* Soft cross-page transition (Chrome, Edge, Safari 18+) */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 260ms;
	animation-timing-function: var(--ease-soft);
}

/* ==========================================================================
   02. Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
	background: var(--bg);
	transition: background-color var(--t-mid) var(--ease-soft);
}

body {
	margin: 0;
	min-height: 100dvh;
	background: var(--bg);
	color: var(--text-2);
	font-family: var(--font);
	font-size: 14.5px;
	line-height: 1.55;
	font-weight: 400;
	letter-spacing: -.003em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: var(--text);
	font-weight: 600;
	letter-spacing: -.022em;
	line-height: 1.15;
}

p {
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--t-fast) var(--ease-soft);
}

img,
video,
canvas,
svg {
	max-width: 100%;
}

img {
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
}

b,
strong {
	font-weight: 600;
	color: var(--text);
}

::selection {
	background: var(--accent);
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--accent-text);
	outline-offset: 2px;
	border-radius: 6px;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--line-2);
	border-radius: 10px;
	border: 3px solid transparent;
	background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--text-3);
	background-clip: content-box;
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--line-2) transparent;
}

.hidden,
[hidden] {
	display: none !important;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: end;
}

.pull-right {
	float: inline-end;
}

.m-0 {
	margin: 0 !important;
}

.mb-0 {
	margin-bottom: 0 !important;
}

.pb-0 {
	padding-bottom: 0 !important;
}

.mt10 {
	margin-top: 10px;
}

.m-t-md {
	margin-top: 32px;
	margin-bottom: 12px;
}

.width-40 {
	width: 40%;
}

.img-responsive {
	display: inline-block;
	max-width: 100%;
	height: auto;
}

.btn-group-vertical {
	vertical-align: -3px;
	border-radius: 4px;
}

.small,
small {
	font-size: 12.5px;
}

.color-red {
	color: var(--bad);
}

.color-green {
	color: var(--ok);
}

/* Icons -------------------------------------------------------------------- */
.ic {
	display: inline-block;
	flex: none;
	width: 1.2em;
	height: 1.2em;
	vertical-align: -.24em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ib {
	display: inline-block;
	flex: none;
	width: 1.15em;
	height: 1.15em;
	vertical-align: -.2em;
	fill: currentColor;
}

.ic-tile {
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	color: var(--accent-text);
	background:
		linear-gradient(160deg, color-mix(in oklab, var(--accent) 26%, transparent), color-mix(in oklab, var(--accent) 6%, transparent));
	box-shadow: inset 0 0 0 1px var(--accent-line), var(--sheen);
	font-size: 15px;
}

.ic-btn {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	color: var(--text-2);
	background: transparent;
	transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease);
}

.ic-btn:hover {
	background: var(--surface-3);
	color: var(--text);
}

.ic-btn:active {
	transform: scale(.92);
}

/* Reveal on scroll. Only hides things once JS has confirmed it is running. */
.js-motion [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	filter: blur(6px);
	transition:
		opacity var(--t-slow) var(--ease),
		transform var(--t-slow) var(--ease),
		filter var(--t-slow) var(--ease);
	transition-delay: var(--d, 0ms);
	will-change: opacity, transform;
}

.js-motion [data-reveal].is-in {
	opacity: 1;
	transform: none;
	filter: none;
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

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

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: .55;
		transform: scale(.82);
	}
}

@keyframes shimmer {
	to {
		background-position: -200% 0;
	}
}

@keyframes fade-in-up {
	from {
		opacity: 0;
		transform: translate(-50%, 16px);
		bottom: 72px;
	}

	to {
		opacity: 1;
		transform: translate(-50%, 0);
		bottom: 92px;
	}
}

@keyframes fade-out-down {
	from {
		opacity: 1;
		transform: translate(-50%, 0);
		bottom: 92px;
	}

	to {
		opacity: 0;
		transform: translate(-50%, 16px);
		bottom: 72px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.js-motion [data-reveal] {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

/* ==========================================================================
   03. Components
   ========================================================================== */

/* Grid --------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 24px;
}

.container-fluid {
	width: 100%;
	max-width: var(--content-max);
	margin-inline: auto;
	padding: 8px var(--gutter) 48px;
}

.container .container {
	padding-inline: 0;
}

.grid-container {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 20px;
}

.col-span-12 { grid-column: span 12; min-width: 0; }
.col-span-7 { grid-column: span 7; min-width: 0; }
.col-span-6 { grid-column: span 6; min-width: 0; }
.col-span-5 { grid-column: span 5; min-width: 0; }
.col-span-4 { grid-column: span 4; min-width: 0; }
.col-span-3 { grid-column: span 3; min-width: 0; }

.col-span-12 > .col-span-12 {
	display: block;
}

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

.row > * {
	flex: 1 1 0;
	min-width: 140px;
}

/* Page title --------------------------------------------------------------- */
.page-title {
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 6px 0 20px;
	color: var(--text);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -.028em;
	line-height: 1.2;
	animation: rise var(--t-slow) var(--ease) backwards;
}

.page-title > .ic {
	box-sizing: content-box;
	width: 19px;
	height: 19px;
	padding: 9px;
	border-radius: 12px;
	color: var(--accent-text);
	background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 26%, transparent), color-mix(in oklab, var(--accent) 6%, transparent));
	box-shadow: inset 0 0 0 1px var(--accent-line), var(--sheen);
}

/* Card --------------------------------------------------------------------- */
.well,
.user-well,
.payment-box,
.ticket-form,
.child-order-form,
.massorder form {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 22px;
	box-shadow: var(--sheen), var(--shadow-1);
	transition: border-color var(--t-mid) var(--ease-soft);
}

.well > :first-child {
	margin-top: 0;
}

.well > :last-child {
	margin-bottom: 0;
}

.term-and-faq {
	padding: clamp(22px, 3vw, 40px);
	color: var(--text-2);
	line-height: 1.75;
	font-size: 15px;
}

.term-and-faq h1,
.term-and-faq h2,
.term-and-faq h3,
.term-and-faq h4 {
	margin: 1.5em 0 .55em;
}

.term-and-faq a,
.blog-content a {
	color: var(--accent-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.term-and-faq p {
	margin: 0 0 1em;
}

.well.marginTop,
.col-span-12 > .well:not(.term-and-faq):not(.neworder-form) {
	margin-bottom: 14px;
}

/* Buttons ------------------------------------------------------------------ */
.btn {
	--btn-bg: var(--surface-2);
	--btn-fg: var(--text);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-size: 14px;
	font-weight: 550;
	letter-spacing: -.01em;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	box-shadow: inset 0 0 0 1px var(--line);
	transition:
		transform var(--t-mid) var(--ease),
		box-shadow var(--t-mid) var(--ease),
		background-color var(--t-fast) var(--ease-soft),
		color var(--t-fast) var(--ease-soft);
}

.btn:hover {
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0) scale(.98);
	transition-duration: 80ms;
}

.btn[disabled],
.btn.disabled {
	opacity: .55;
	pointer-events: none;
}

.btn .ic {
	transition: transform var(--t-mid) var(--ease);
}

.btn:hover .ic-go {
	transform: translateX(3px);
}

.btn-main,
.btn-primary {
	--btn-bg: linear-gradient(180deg, color-mix(in oklab, var(--accent) 86%, white), var(--accent));
	--btn-fg: #fff;
	background: var(--btn-bg);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .28),
		inset 0 0 0 1px rgba(255, 255, 255, .08),
		0 1px 2px rgba(0, 0, 0, .25),
		0 10px 26px -10px color-mix(in oklab, var(--accent) 70%, transparent);
}

.btn-main:hover,
.btn-primary:hover {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .32),
		inset 0 0 0 1px rgba(255, 255, 255, .1),
		0 2px 4px rgba(0, 0, 0, .25),
		0 16px 36px -10px color-mix(in oklab, var(--accent) 86%, transparent);
}

.btn-ink {
	--btn-bg: var(--ink);
	--btn-fg: var(--ink-text);
	background: var(--btn-bg);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--ink) 12%, transparent), 0 10px 30px -10px rgba(0, 0, 0, .5);
}

.btn-ink:hover {
	box-shadow: 0 0 0 6px color-mix(in oklab, var(--ink) 14%, transparent), 0 14px 40px -10px rgba(0, 0, 0, .55);
}

.btn-border,
.btn-default,
.btn-ghost {
	--btn-bg: transparent;
	--btn-fg: var(--text);
	box-shadow: inset 0 0 0 1px var(--line-2);
	backdrop-filter: blur(10px);
}

.btn-border:hover,
.btn-default:hover,
.btn-ghost:hover {
	--btn-bg: var(--surface-2);
}

.btn-block {
	display: flex;
	width: 100%;
}

.btn-min {
	min-width: 170px;
}

.btn-sm {
	min-height: 36px;
	padding: 7px 14px;
	font-size: 13px;
}

.btn-xs {
	min-height: 30px;
	padding: 5px 12px;
	font-size: 12px;
}

.btn-lg {
	min-height: 50px;
	font-size: 15px;
}

.border-5,
.border-10 {
	/* legacy helpers kept in the markup */
	border-radius: var(--r-pill);
}

/* Forms -------------------------------------------------------------------- */
.form-group {
	margin-bottom: 16px;
}

.form-group:last-child {
	margin-bottom: 0;
}

label,
.control-label {
	display: block;
	margin-bottom: 7px;
	color: var(--text);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -.005em;
}

.form-control,
.login-form-control {
	display: block;
	width: 100%;
	min-height: 46px;
	padding: 11px 14px;
	border: 1px solid var(--line-2);
	border-radius: var(--r-sm);
	background: var(--bg-2);
	color: var(--text);
	font-size: 14.5px;
	line-height: 1.45;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	transition:
		border-color var(--t-fast) var(--ease-soft),
		box-shadow var(--t-mid) var(--ease),
		background-color var(--t-fast) var(--ease-soft);
}

.form-control::placeholder,
.login-form-control::placeholder {
	color: var(--text-3);
}

.form-control:hover {
	border-color: color-mix(in oklab, var(--text) 26%, transparent);
}

.form-control:focus,
.login-form-control:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 4px var(--accent-soft);
	background: var(--surface);
}

.form-control[readonly],
.form-control[disabled],
span.form-control {
	color: var(--text-2);
	background: var(--surface-2);
	cursor: default;
}

textarea.form-control {
	min-height: 120px;
	resize: vertical;
}

select.form-control {
	padding-inline-end: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2371717f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

[dir="rtl"] select.form-control {
	background-position: left 12px center;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="number"] {
	-moz-appearance: textfield;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--text);
	-webkit-box-shadow: 0 0 0 40px var(--surface-2) inset;
	caret-color: var(--text);
}

.help-block {
	display: block;
	margin-top: 7px;
	color: var(--text-3);
	font-size: 12.5px;
	font-family: var(--font-mono);
	letter-spacing: -.02em;
}

.has-error .form-control {
	border-color: var(--bad);
}

.has-error .help-block {
	color: var(--bad);
}

.checkbox label,
label.terms,
.terms {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--text-2);
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.checkbox a,
label.terms a,
.signup-alt-text a {
	color: var(--accent-text);
	font-weight: 500;
}

input[type="checkbox"],
input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	position: relative;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1.5px solid var(--line-2);
	border-radius: 6px;
	background: var(--bg-2);
	cursor: pointer;
	vertical-align: -4px;
	transition: background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

input[type="radio"] {
	border-radius: 50%;
}

input[type="checkbox"]::after {
	content: "";
	position: absolute;
	inset: 2px 5.5px 5px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(42deg) scale(0);
	transition: transform var(--t-mid) var(--ease);
}

input[type="radio"]::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: #fff;
	transform: scale(0);
	transition: transform var(--t-mid) var(--ease);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
	background: var(--accent);
	border-color: var(--accent);
}

input[type="checkbox"]:checked::after {
	transform: rotate(42deg) scale(1);
}

input[type="radio"]:checked::after {
	transform: scale(1);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.input-group {
	display: flex;
	align-items: stretch;
	position: relative;
	width: 100%;
}

.input-group .form-control {
	padding-inline-end: 52px;
	border-radius: var(--r-pill);
	padding-inline-start: 18px;
}

.input-group-btn {
	position: absolute;
	inset-inline-end: 5px;
	top: 5px;
	bottom: 5px;
	display: flex;
}

.input-group-btn .btn {
	min-height: 0;
	width: 36px;
	padding: 0;
	border-radius: 50%;
	background: var(--surface-3);
	box-shadow: none;
}

/* Alerts ------------------------------------------------------------------- */
.alert {
	--tone: var(--note);
	position: relative;
	display: block;
	margin-bottom: 16px;
	padding: 13px 44px 13px 16px;
	border-radius: var(--r-md);
	border: 1px solid color-mix(in oklab, var(--tone) 34%, transparent);
	background: color-mix(in oklab, var(--tone) 10%, var(--surface));
	color: var(--text);
	font-size: 14px;
	line-height: 1.5;
	animation: pop var(--t-mid) var(--ease) backwards;
}

[dir="rtl"] .alert {
	padding: 13px 16px 13px 44px;
}

.alert h4 {
	margin-bottom: 6px;
	font-size: 15px;
}

.alert a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.alert-success { --tone: var(--ok); }
.alert-danger { --tone: var(--bad); }
.alert-warning { --tone: var(--warn); }
.alert-info { --tone: var(--note); }

.close {
	position: absolute;
	inset-inline-end: 10px;
	top: 10px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	color: var(--text-2);
	font-size: 18px;
	line-height: 1;
	transition: background-color var(--t-fast);
}

.close:hover {
	background: color-mix(in oklab, var(--text) 10%, transparent);
}

.alert.fade:not(.in) {
	opacity: 0;
}

/* Modal -------------------------------------------------------------------- */
.modal {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: grid;
	place-items: center;
	padding: 20px;
	background: var(--scrim);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: opacity var(--t-mid) var(--ease-soft), visibility var(--t-mid);
}

.modal.disable {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.modal-content {
	display: flex;
	flex-direction: column;
	width: min(540px, 100%);
	max-height: min(84dvh, 760px);
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--r-lg);
	box-shadow: var(--sheen), var(--shadow-2);
	overflow: hidden;
	transition: transform var(--t-mid) var(--ease), opacity var(--t-mid);
}

.modal.disable .modal-content {
	transform: translateY(14px) scale(.97);
	opacity: 0;
}

.modal-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--line);
}

.modal-title {
	color: var(--text);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.02em;
}

.modal-close {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	color: var(--text-2);
	cursor: pointer;
	transition: background-color var(--t-fast), color var(--t-fast);
}

.modal-close:hover {
	background: var(--surface-3);
	color: var(--text);
}

.modal-center {
	padding: 18px;
	overflow: auto;
	color: var(--text-2);
	line-height: 1.65;
}

.modal-bottom {
	display: flex;
	gap: 10px;
	padding: 14px 18px;
	border-top: 1px solid var(--line);
}

.modal-bottom:empty {
	display: none;
}

.popupimg {
	display: block;
	margin-top: 12px;
	border-radius: var(--r-sm);
}

.popupaciklama h1, .popupaciklama h2, .popupaciklama h3 {
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: -.01em;
}

/* Pagination --------------------------------------------------------------- */
.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.nav-pills {
	grid-column: 1 / -1;
}

.pagination li a {
	display: grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border-radius: 11px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--text-2);
	font-family: var(--font-mono);
	font-size: 13px;
	transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.pagination li a:hover {
	color: var(--text);
	border-color: var(--line-2);
}

.pagination li.active a {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--ink-text);
}

/* Table -------------------------------------------------------------------- */
.table {
	width: 100%;
	margin-bottom: 18px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
	font-size: 14px;
}

.table th,
.table td {
	padding: 12px 16px;
	text-align: start;
	vertical-align: middle;
	border-bottom: 1px solid var(--line);
	overflow-wrap: anywhere;
}

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

.table th {
	background: var(--surface-2);
	color: var(--text-3);
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.table td:first-child {
	color: var(--text);
}

.user-well .table {
	border: 0;
	background: transparent;
}

/* Select2 ------------------------------------------------------------------ */
.select2-container {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
}

.select2.select2-container .select2-selection {
	display: flex;
	align-items: center;
	height: 46px;
	border: 1px solid var(--line-2);
	border-radius: var(--r-sm);
	background: var(--bg-2);
	outline: none;
	transition: border-color var(--t-fast), box-shadow var(--t-mid) var(--ease);
}

.select2.select2-container .select2-selection .select2-selection__rendered {
	flex: 1;
	padding-inline: 14px 34px;
	color: var(--text);
	font-size: 14.5px;
	line-height: 1.3;
}

.select2.select2-container .select2-selection .select2-selection__arrow {
	top: 50%;
	inset-inline-end: 10px;
	inset-inline-start: auto;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2371717f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center no-repeat;
	transition: transform var(--t-mid) var(--ease);
}

.select2.select2-container .select2-selection .select2-selection__arrow b {
	display: none;
}

.select2.select2-container.select2-container--open .select2-selection,
.select2.select2-container.select2-container--focus .select2-selection {
	border-color: var(--accent);
	box-shadow: 0 0 0 4px var(--accent-soft);
}

.select2.select2-container.select2-container--open .select2-selection__arrow {
	transform: translateY(-50%) rotate(180deg);
}

.select2-container .select2-dropdown {
	z-index: 95;
	border: 1px solid var(--line-2);
	border-radius: var(--r-sm) !important;
	background: var(--surface-2);
	box-shadow: var(--shadow-2);
	overflow: hidden;
	margin-top: 6px;
	animation: pop var(--t-fast) var(--ease) backwards;
}

.select2-container--above .select2-dropdown,
.select2-dropdown--above {
	margin-top: -6px;
}

.select2-container .select2-dropdown .select2-search {
	padding: 8px;
}

.select2-container .select2-dropdown .select2-search input {
	min-height: 38px;
	padding: 6px 10px;
	border: 1px solid var(--line-2);
	border-radius: var(--r-xs);
	background: var(--bg-2);
	color: var(--text);
	outline: none;
}

.select2-container .select2-dropdown .select2-results ul {
	max-height: 280px;
	padding: 5px;
	overflow: auto;
}

.select2-results__option {
	padding: 9px 11px;
	border-radius: var(--r-xs);
	color: var(--text-2);
	font-size: 14px;
}

.select2-container--default .select2-results__option[aria-selected=true] {
	background: var(--accent-soft);
	color: var(--text);
}

.select2-container .select2-dropdown .select2-results ul .select2-results__option--highlighted[aria-selected] {
	background: var(--surface-3);
	color: var(--text);
}

/* Date picker (bootstrap + tempus dominus, created by the panel) ----------- */
.bootstrap-datetimepicker-widget.dropdown-menu,
.tempus-dominus-widget {
	border: 1px solid var(--line-2) !important;
	border-radius: var(--r-md) !important;
	background: var(--surface-2) !important;
	color: var(--text) !important;
	box-shadow: var(--shadow-2) !important;
	font-family: var(--font) !important;
}

.tempus-dominus-widget div[data-action],
.tempus-dominus-widget .calendar-header {
	color: var(--text) !important;
}

.tempus-dominus-widget .disabled {
	color: var(--text-3) !important;
}

/* Status pill -------------------------------------------------------------- */
.order-status {
	--tone: var(--text-3);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px 5px 9px;
	border-radius: var(--r-pill);
	background: color-mix(in oklab, var(--tone) 12%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 28%, transparent);
	color: color-mix(in oklab, var(--tone) 88%, var(--text));
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
}

.order-status .ic {
	width: 14px;
	height: 14px;
}

.order-status.pending { --tone: var(--warn); }
.order-status.processing { --tone: var(--note); }
.order-status.processing .ic { animation: spin 1.1s linear infinite; }
.order-status.completed { --tone: var(--ok); }
.order-status.partial { --tone: var(--iris); }
.order-status.canceled { --tone: var(--bad); }

.order-status.progress {
	--tone: var(--note);
	padding: 0;
	overflow: hidden;
	background: transparent;
}

div.progress {
	position: relative;
	display: block;
	min-width: 170px;
	height: 28px;
	border-radius: var(--r-pill);
	background: color-mix(in oklab, var(--tone) 10%, transparent);
	overflow: hidden;
}

.progress-value {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	max-width: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, color-mix(in oklab, var(--tone) 34%, transparent), color-mix(in oklab, var(--tone) 60%, transparent));
	transition: width 1s var(--ease);
}

div.progress > span {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding-inline: 12px;
	color: var(--text);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}

/* Notify toast ------------------------------------------------------------- */
.notify-box {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: var(--r-pill);
	background: var(--ink);
	color: var(--ink-text);
	font-size: 13.5px;
	font-weight: 500;
	white-space: nowrap;
	box-shadow: var(--shadow-2);
}

#notification {
	z-index: 120 !important;
}

/* highlight.js ------------------------------------------------------------- */
.api-container {
	margin: 10px 0 8px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--bg-2);
}

.code-block-top {
	display: flex;
	justify-content: space-between;
	padding: 9px 14px;
	border-bottom: 1px solid var(--line);
	color: var(--text-3);
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: .05em;
}

.code-block-right {
	color: var(--accent-text);
}

.api-container pre {
	margin: 0;
	overflow: auto;
}

.api-container code,
.hljs {
	display: block;
	padding: 14px 16px;
	background: transparent !important;
	color: var(--text-2);
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1.7;
}

.hljs-attr { color: var(--accent-text); }
.hljs-string { color: var(--mint); }
.hljs-number, .hljs-literal { color: var(--amber); }
.hljs-punctuation { color: var(--text-3); }

/* ==========================================================================
   04. App shell — sidebar, header, dock, drawers
   ========================================================================== */

.page-container {
	position: relative;
	display: grid;
	grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
	min-height: 100dvh;
}

/* Quiet aurora wash behind the signed-in app */
.page-container::before {
	content: "";
	position: fixed;
	inset: -30vh -10vw auto auto;
	width: 70vw;
	height: 70vh;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(45% 45% at 62% 40%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%),
		radial-gradient(36% 36% at 84% 22%, color-mix(in oklab, var(--cyan) 12%, transparent), transparent 70%);
	opacity: var(--aurora-opacity);
	filter: blur(30px);
}

.logo {
	display: block;
	max-height: 36px;
	width: auto;
	max-width: 170px;
	object-fit: contain;
}

span.logo,
.brand-text {
	color: var(--text);
	font-size: 18px;
	font-weight: 650;
	letter-spacing: -.03em;
}

/* Sidebar ------------------------------------------------------------------ */
.sidebar {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	height: 100dvh;
	padding: 14px 12px 12px;
	background: color-mix(in oklab, var(--surface) 72%, transparent);
	border-inline-end: 1px solid var(--line);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.sidebar-brand {
	display: block;
	padding: 8px 10px 16px;
}

.sidebar-top {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}

.sidebar-top::-webkit-scrollbar {
	display: none;
}

.sidebar-menu {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: 22px;
}

.sidebar-menu-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 40px;
	padding: 8px 11px;
	border-radius: 11px;
	color: var(--text-2);
	font-size: 14px;
	font-weight: 450;
	letter-spacing: -.01em;
	transition: background-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}

.sidebar-menu-item .ic {
	width: 18px;
	height: 18px;
	transition: transform var(--t-mid) var(--ease), color var(--t-fast);
}

.sidebar-menu-item:hover {
	background: var(--surface-2);
	color: var(--text);
}

.sidebar-menu-item:hover .ic {
	transform: scale(1.1) rotate(-3deg);
}

.sidebar-menu-item.active {
	background: linear-gradient(90deg, var(--accent-soft), transparent);
	color: var(--text);
	font-weight: 500;
	box-shadow: inset 0 0 0 1px var(--line);
}

[dir="rtl"] .sidebar-menu-item.active {
	background: linear-gradient(-90deg, var(--accent-soft), transparent);
}

.sidebar-menu-item.active::before {
	content: "";
	position: absolute;
	inset-inline-start: -12px;
	top: 10px;
	bottom: 10px;
	width: 3px;
	border-start-end-radius: 4px;
	border-end-end-radius: 4px;
	background: var(--accent);
	box-shadow: 0 0 12px var(--accent);
}

.sidebar-menu-item.active .ic {
	color: var(--accent-text);
}

.sidebar-menu-title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sidebar-bottom {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

.sidebar-scroll {
	position: absolute;
	top: -32px;
	inset-inline-start: 50%;
	margin-inline-start: -13px;
	display: none;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--surface-3);
	color: var(--text-2);
	box-shadow: 0 0 0 1px var(--line);
	cursor: pointer;
	z-index: 2;
	font-size: 11px;
}

.sidebar-scroll.active {
	display: grid;
	animation: fade var(--t-mid) both;
}

/* Theme switch — shared with the guest menu */
.color-change-box {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	padding: 3px;
	border-radius: 12px;
	background: var(--bg-2);
	box-shadow: inset 0 0 0 1px var(--line);
}

.color-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 32px;
	padding: 4px;
	border-radius: 9px;
	color: var(--text-3);
	font-size: 12px;
	cursor: pointer;
	transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}

.color-btn span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.color-btn:hover {
	color: var(--text);
}

.color-btn.active {
	background: var(--surface-3);
	color: var(--text);
	box-shadow: var(--sheen), 0 1px 2px rgba(0, 0, 0, .25);
}

.sidebar-user-box {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 13px;
	transition: background-color var(--t-fast);
}

.sidebar-user-box:hover {
	background: var(--surface-2);
}

.user-avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 11px;
	background: linear-gradient(135deg, var(--accent), var(--cyan));
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
}

.user-box-left {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.user-box-title {
	color: var(--text);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.25;
}

.user-box-username {
	overflow: hidden;
	color: var(--text-3);
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.user-box-right {
	color: var(--text-3);
	transition: transform var(--t-mid) var(--ease);
}

.sidebar-user-box:hover .user-box-right {
	transform: translateX(2px);
}

.logout-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 38px;
	border-radius: 11px;
	color: var(--text-3);
	font-size: 13px;
	transition: color var(--t-fast), background-color var(--t-fast);
}

.logout-btn:hover {
	color: var(--bad);
	background: color-mix(in oklab, var(--bad) 10%, transparent);
}

.sidebar-content {
	display: none;
}

/* Header ------------------------------------------------------------------- */
.page-content {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.page-header {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	height: var(--header-h);
	padding-inline: max(var(--gutter), calc((100% - var(--content-max)) / 2 + var(--gutter)));
	transition: background-color var(--t-mid), box-shadow var(--t-mid);
}

.page-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--glass);
	backdrop-filter: blur(18px) saturate(1.3);
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	border-bottom: 1px solid var(--line);
	opacity: 0;
	transition: opacity var(--t-mid);
}

.is-scrolled .page-header::before {
	opacity: 1;
}

.header-left {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.header-left .logo {
	display: none;
	max-height: 30px;
	max-width: 118px;
}

.header-left .brand-text {
	display: none;
}

.header-title {
	color: var(--text-3);
	font-size: 13.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 8px;
}

.header-btn-box {
	display: flex;
	align-items: center;
	gap: 8px;
}

.head-btn,
.sidebar-btn {
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--surface);
	box-shadow: inset 0 0 0 1px var(--line), var(--sheen);
	color: var(--text-2);
	cursor: pointer;
	transition: color var(--t-fast), background-color var(--t-fast), transform var(--t-mid) var(--ease);
}

.head-btn:hover,
.sidebar-btn:hover {
	background: var(--surface-2);
	color: var(--text);
}

.head-btn:active,
.sidebar-btn:active {
	transform: scale(.94);
}

.sidebar-btn {
	display: none;
}

.head-btn .ic,
.sidebar-btn .ic {
	width: 18px;
	height: 18px;
}

.notify-dot {
	position: absolute;
	top: 9px;
	inset-inline-end: 10px;
	display: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent-text);
	box-shadow: 0 0 0 2px var(--surface);
}

.has-announcements .notify-dot {
	display: block;
}

/* Language ----------------------------------------------------------------- */
.language-box {
	position: relative;
}

.language-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding-inline: 12px;
	border-radius: 12px;
	background: var(--surface);
	box-shadow: inset 0 0 0 1px var(--line), var(--sheen);
	color: var(--text-2);
	font-size: 13.5px;
	cursor: pointer;
	transition: color var(--t-fast), background-color var(--t-fast);
}

.language-btn:hover,
.language-btn.active {
	color: var(--text);
	background: var(--surface-2);
}

.language-btn .ic-chev {
	width: 14px;
	height: 14px;
	transition: transform var(--t-mid) var(--ease);
}

.language-btn.active .ic-chev {
	transform: rotate(180deg);
}

.language-dropdown,
.currency-list,
.announcements-box {
	position: absolute;
	z-index: 60;
	background: var(--glass-strong);
	border: 1px solid var(--line-2);
	box-shadow: var(--sheen), var(--shadow-2);
	backdrop-filter: blur(22px) saturate(1.4);
	-webkit-backdrop-filter: blur(22px) saturate(1.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(.97);
	transform-origin: top right;
	transition: opacity var(--t-fast), transform var(--t-mid) var(--ease), visibility var(--t-fast);
}

[dir="rtl"] .language-dropdown,
[dir="rtl"] .currency-list,
[dir="rtl"] .announcements-box {
	transform-origin: top left;
}

.language-dropdown.active,
.currency-list.active,
.announcements-box.active {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.language-dropdown {
	top: calc(100% + 8px);
	inset-inline-end: 0;
	min-width: 190px;
	padding: 6px;
	border-radius: var(--r-md);
}

.language-list {
	display: flex;
	flex-direction: column;
	gap: 1px;
	max-height: 320px;
	overflow: auto;
}

.language-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 11px;
	border-radius: 10px;
	color: var(--text-2);
	font-size: 13.5px;
	transition: background-color var(--t-fast), color var(--t-fast);
}

.language-item b {
	color: var(--text-3);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
}

.language-item:hover {
	background: var(--surface-3);
	color: var(--text);
}

.language-item.selected {
	color: var(--text);
	background: var(--accent-soft);
}

.language-bg,
.currency-bg {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: none;
}

.language-bg.active,
.currency-bg.active {
	display: block;
}

/* Balance ------------------------------------------------------------------ */
.user-balance {
	position: relative;
	display: flex;
	align-items: center;
}

.balance-box {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 12px;
	border-radius: 12px 0 0 12px;
	background: var(--surface);
	box-shadow: inset 0 0 0 1px var(--line), var(--sheen);
	color: var(--text);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--t-fast);
}

[dir="rtl"] .balance-box {
	border-radius: 0 12px 12px 0;
}

.balance-box:hover,
.balance-box.active {
	background: var(--surface-2);
}

.balance-box > .ic:first-child {
	width: 17px;
	height: 17px;
	color: var(--accent-text);
}

.balance-box .ic-chev {
	width: 14px;
	height: 14px;
	color: var(--text-3);
	transition: transform var(--t-mid) var(--ease);
}

.balance-box.active .ic-chev {
	transform: rotate(180deg);
}

.balance-info {
	font-size: 14px;
	font-weight: 550;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
}

.balance-add {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-inline-start: -1px;
	border-radius: 0 12px 12px 0;
	background: var(--accent);
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
	transition: filter var(--t-fast);
}

[dir="rtl"] .balance-add {
	border-radius: 12px 0 0 12px;
}

.balance-add:hover {
	filter: brightness(1.12);
}

.currency-list {
	top: calc(100% + 8px);
	inset-inline-end: 0;
	width: 320px;
	padding: 12px;
	border-radius: var(--r-md);
}

.currency-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	color: var(--text);
	font-size: 14px;
	font-weight: 550;
}

.currencies-box {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}

.currency-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 10px;
	border-radius: 10px;
	background: var(--surface-2);
	color: var(--text-2);
	font-family: var(--font-mono);
	font-size: 12px;
	transition: background-color var(--t-fast), color var(--t-fast);
}

.currency-box b {
	color: var(--accent-text);
	font-weight: 500;
}

.currency-box:hover {
	background: var(--surface-3);
	color: var(--text);
}

.curency-pagination {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: 10px;
}

.curency-pagination button {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	color: var(--text-3);
	font-family: var(--font-mono);
	font-size: 12px;
}

.curency-pagination button.active {
	background: var(--surface-3);
	color: var(--text);
}

/* Announcements ------------------------------------------------------------ */
.announcements-box {
	position: fixed;
	top: calc(var(--header-h) - 4px);
	inset-inline-end: 24px;
	display: flex;
	flex-direction: column;
	width: 380px;
	max-width: calc(100vw - 32px);
	max-height: min(70dvh, 560px);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.announcements-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
	color: var(--text);
	font-size: 14.5px;
	font-weight: 550;
}

.notify-list {
	flex: 1;
	padding: 8px;
	overflow: auto;
}

.notify-list:empty::after {
	content: attr(data-empty);
	display: block;
	padding: 34px 12px;
	color: var(--text-3);
	font-size: 13px;
	text-align: center;
}

.announcements-item {
	padding: 12px;
	border-radius: var(--r-sm);
	transition: background-color var(--t-fast);
}

.announcements-item:hover {
	background: var(--surface-2);
}

.announcements-item-top {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.announcements-title {
	color: var(--text);
	font-size: 13.5px;
	font-weight: 500;
}

.announcements-content {
	font-size: 13px;
	line-height: 1.5;
}

.announcements-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
	color: var(--text-3);
	font-family: var(--font-mono);
	font-size: 11px;
}

.announcements-stats {
	color: var(--accent-text);
}

/* Bottom dock (mobile) ----------------------------------------------------- */
.bottom-navigaiton {
	display: none;
}

/* Voice assistant ---------------------------------------------------------- */
.voice-animation {
	position: fixed;
	inset: 0;
	z-index: 110;
	display: none;
	place-items: center;
	background: var(--scrim);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.voice-animation.active {
	display: grid;
	animation: fade var(--t-mid) both;
}

.voice-animation-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	transition: transform 120ms linear;
}

.voice-orb {
	position: relative;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, var(--accent), var(--cyan), var(--iris), var(--accent));
	filter: blur(1px);
	animation: spin 3.4s linear infinite;
	box-shadow: 0 0 80px color-mix(in oklab, var(--accent) 60%, transparent);
}

.voice-orb::after {
	content: "";
	position: absolute;
	inset: 12px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), transparent 55%), var(--bg);
	opacity: .78;
}

.voice-text {
	max-width: 80vw;
	color: var(--text);
	font-size: 18px;
	font-weight: 500;
	text-align: center;
}

/* Responsive shell --------------------------------------------------------- */
@media (max-width: 1100px) {
	:root {
		--gutter: 18px;
		--header-h: 62px;
	}

	.page-container {
		grid-template-columns: minmax(0, 1fr);
	}

	.sidebar {
		position: fixed;
		inset-block: 8px;
		inset-inline-start: 8px;
		z-index: 80;
		width: min(300px, calc(100vw - 48px));
		height: auto;
		border: 1px solid var(--line-2);
		border-radius: var(--r-lg);
		background: var(--glass-strong);
		box-shadow: var(--shadow-2);
		transform: translateX(calc(-100% - 12px));
		transition: transform 420ms var(--ease);
	}

	[dir="rtl"] .sidebar {
		transform: translateX(calc(100% + 12px));
	}

	.sidebar.active {
		transform: none;
	}

	.sidebar-menu-item {
		min-height: 44px;
	}

	.sidebar-content {
		position: fixed;
		inset: 0;
		z-index: 70;
		display: block;
		background: var(--scrim);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--t-mid), visibility var(--t-mid);
	}

	.sidebar-content.active {
		opacity: 1;
		visibility: visible;
	}

	.header-title,
	.head-btn.only-wide,
	.header-btn-box .language-box .language-label,
	.page-header .language-btn .ic-chev {
		display: none;
	}

	.header-left .logo,
	.header-left .brand-text {
		display: block;
	}

	.sidebar-btn {
		display: inline-grid;
	}

	.page-header .language-btn {
		width: 40px;
		padding: 0;
		justify-content: center;
	}

	.container-fluid {
		padding-bottom: calc(var(--dock-h) + 40px);
	}

	.bottom-navigaiton {
		position: fixed;
		inset-inline: 10px;
		bottom: calc(10px + env(safe-area-inset-bottom));
		z-index: 45;
		display: flex;
		align-items: stretch;
		justify-content: space-around;
		height: var(--dock-h);
		padding: 6px;
		border-radius: 22px;
		background: var(--glass-strong);
		border: 1px solid var(--line-2);
		box-shadow: var(--shadow-2);
		backdrop-filter: blur(22px) saturate(1.4);
		-webkit-backdrop-filter: blur(22px) saturate(1.4);
	}

	.bottom-item {
		position: relative;
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 2px;
		border-radius: 16px;
		color: var(--text-3);
		font-size: 10.5px;
		font-weight: 500;
		transition: color var(--t-fast), background-color var(--t-fast);
	}

	.bottom-item .ic {
		width: 20px;
		height: 20px;
		transition: transform var(--t-mid) var(--ease);
	}

	.bottom-item.active {
		color: var(--text);
		background: var(--accent-soft);
	}

	.bottom-item.active .ic {
		color: var(--accent-text);
		transform: translateY(-1px);
	}

	.bottom-item-name {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	#notification {
		bottom: 96px;
	}

	.announcements-box {
		inset-inline: 16px;
		width: auto;
	}
}

@media (max-width: 560px) {
	.head-btn.hide-sm {
		display: none;
	}

	.balance-info {
		font-size: 13px;
	}

	.balance-box {
		padding-inline: 10px;
	}

	.balance-box .ic-chev {
		display: none;
	}

	.currency-list {
		position: fixed;
		top: auto;
		bottom: 10px;
		inset-inline: 10px;
		width: auto;
		border-radius: var(--r-lg);
		z-index: 85;
		padding: 16px;
		transform: translateY(24px);
	}
}

@media (max-width: 560px) {
	.hide-sm {
		display: none !important;
	}

	.sidebar .drawer-langs {
		display: flex;
	}
}

/* ==========================================================================
   05. New order
   ========================================================================== */

.neworder-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.settings-btn {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
	border-radius: 12px;
	background: var(--surface);
	box-shadow: inset 0 0 0 1px var(--line), var(--sheen);
	color: var(--text-2);
	cursor: pointer;
	transition: color var(--t-fast), transform var(--t-mid) var(--ease);
}

.settings-btn:hover {
	color: var(--text);
	transform: rotate(8deg);
}

/* Stat tiles */
.stats-box-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 4px;
}

.stats-box {
	position: relative;
	padding: 16px 18px;
	border-radius: var(--r-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--sheen), var(--shadow-1);
	overflow: hidden;
	animation: rise var(--t-slow) var(--ease) backwards;
	transition: border-color var(--t-mid), transform var(--t-mid) var(--ease);
}

.stats-box:nth-child(2) { animation-delay: 60ms; }
.stats-box:nth-child(3) { animation-delay: 120ms; }
.stats-box:nth-child(4) { animation-delay: 180ms; }

.stats-box:hover {
	border-color: var(--line-2);
	transform: translateY(-2px);
}

.stats-box::after {
	content: "";
	position: absolute;
	inset: -40% -30% auto auto;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--accent-soft), transparent);
	pointer-events: none;
}

.stats-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.stats-top .ic {
	width: 17px;
	height: 17px;
	color: var(--accent-text);
}

.stats-name {
	color: var(--text-2);
	font-size: 13px;
}

.stats-center {
	margin-top: 10px;
}

.stats-text {
	color: var(--text);
	font-size: clamp(20px, 2.1vw, 28px);
	font-weight: 600;
	letter-spacing: -.035em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

/* Platform filter */
.platform-filter {
	position: relative;
	z-index: 25;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 6px;
	min-height: 78px;
	margin-bottom: 12px;
	animation: rise var(--t-slow) var(--ease) backwards;
}

.platform-chip {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 36px;
	padding-inline: 8px;
	border-radius: 10px;
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--text-2);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: -.01em;
	white-space: nowrap;
	transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-mid) var(--ease);
}

.platform-chip .ib,
.platform-chip .ic {
	width: 15px;
	height: 15px;
	color: var(--b, currentColor);
}

.platform-chip:active {
	transform: scale(.96);
}

@media (hover: hover) {
	.platform-chip:hover {
		border-color: color-mix(in oklab, var(--b, var(--text)) 38%, transparent);
		color: var(--text);
	}
}

.platform-chip.active {
	background: color-mix(in oklab, var(--b, var(--accent)) 14%, var(--surface));
	border-color: color-mix(in oklab, var(--b, var(--accent)) 46%, transparent);
	color: var(--text);
}

.platform-chip.pf-all.active {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--ink-text);
}

/* Search */
.service-search-box {
	position: relative;
	margin-bottom: 14px;
}

.has-search-icon {
	position: relative;
	margin-bottom: 0;
}

.has-search-icon > .ic {
	position: absolute;
	inset-inline-start: 15px;
	top: 50%;
	z-index: 1;
	width: 17px;
	height: 17px;
	color: var(--text-3);
	transform: translateY(-50%);
	pointer-events: none;
}

.has-search-icon .form-control {
	padding-inline-start: 42px;
	border-radius: var(--r-pill);
	background: var(--surface);
	border-color: var(--line);
}

.search-service-list {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline: 0;
	z-index: 25;
	display: none;
	padding: 6px;
	border-radius: var(--r-md);
	background: var(--glass-strong);
	border: 1px solid var(--line-2);
	box-shadow: var(--shadow-2);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
}

.search-service-list.active {
	display: block;
	animation: pop var(--t-mid) var(--ease) backwards;
}

.search-service-box {
	overflow: auto;
	max-height: 480px;
}

.search-service-box p {
	padding: 22px 12px;
	color: var(--text-3);
	text-align: center;
}

/* Form */
.neworder-form {
	padding: 22px;
	animation: rise var(--t-slow) var(--ease) backwards;
}

.neworder-form form,
.well form {
	margin: 0;
}

.dropdwon-box {
	position: relative;
}

.dropdown-select-box {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 8px 14px;
	border-radius: var(--r-sm);
	border: 1px solid var(--line-2);
	background: var(--bg-2);
	cursor: pointer;
	transition: border-color var(--t-fast), box-shadow var(--t-mid) var(--ease), background-color var(--t-fast);
}

.dropdown-select-box:hover {
	border-color: color-mix(in oklab, var(--text) 26%, transparent);
}

.dropdown-select-name {
	flex: 1;
	min-width: 0;
	display: -webkit-box;
	overflow: hidden;
	color: var(--text);
	font-size: 14.5px;
	line-height: 1.35;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.dropdown-select-name img,
.category-dropdown-item img,
.service-dropdown-name img {
	max-width: 20px;
	max-height: 20px;
	margin-inline-end: 6px;
	vertical-align: -4px;
	border-radius: 4px;
}

.dropdown-select-box > .ic {
	color: var(--text-3);
	transition: transform var(--t-mid) var(--ease);
}

/* Category / service / payment sheet */
.category-dropdown,
.service-dropdown,
.payment-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline: 0;
	z-index: 26;
	display: flex;
	flex-direction: column;
	max-height: min(460px, 62dvh);
	border-radius: var(--r-md);
	background: var(--glass-strong);
	border: 1px solid var(--line-2);
	box-shadow: var(--shadow-2);
	backdrop-filter: blur(24px) saturate(1.4);
	-webkit-backdrop-filter: blur(24px) saturate(1.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(.985);
	transform-origin: top center;
	transition: opacity var(--t-fast), transform var(--t-mid) var(--ease), visibility var(--t-fast);
	overflow: hidden;
}

.category-dropdown.active,
.service-dropdown.active,
.payment-dropdown.active {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.category-dropdown-header,
.service-dropdown-header,
.payment-dropdown-header {
	display: none;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
}

.service-dropdown-title {
	color: var(--text);
	font-size: 15px;
	font-weight: 550;
}

.category-dropdown-box,
.service-dropdown-box,
.payment-dropdown-box {
	flex: 1;
	padding: 6px;
	overflow: auto;
	overscroll-behavior: contain;
}

/* Lists: plain rows split by a hairline */
.category-dropdown-box,
.service-list,
#master-service-dropdown,
#search-service-list {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.category-dropdown-item + .category-dropdown-item::before,
.service-dropdown-item + .service-dropdown-item::before {
	content: "";
	position: absolute;
	top: -1px;
	inset-inline: 12px;
	height: 1px;
	background: var(--line-2);
	transition: opacity var(--t-fast);
}

.category-dropdown-item.active::before,
.category-dropdown-item.active + .category-dropdown-item::before,
.service-dropdown-item.active::before,
.service-dropdown-item.active + .service-dropdown-item::before {
	opacity: 0;
}

.category-dropdown-bg,
.service-dropdown-bg,
.payment-dropdown-bg,
.settings-bg,
.master-form-bg {
	position: fixed;
	inset: 0;
	z-index: 24;
	display: none;
}

.category-dropdown-bg.active,
.service-dropdown-bg.active,
.payment-dropdown-bg.active {
	display: block;
}

.settings-bg.active,
.master-form-bg.active {
	display: block;
	z-index: 75;
	background: var(--scrim);
	animation: fade var(--t-mid) both;
}

.category-dropdown-item {
	display: flex;
	align-items: center;
	position: relative;
	flex: none;
	gap: 8px;
	padding: 11px 12px;
	border-radius: 10px;
	color: var(--text);
	font-size: 14px;
	cursor: pointer;
	transition: background-color var(--t-fast);
}

@media (hover: hover) {
	.category-dropdown-item:hover {
		background: var(--surface-3);
	}
}

.category-dropdown-item.active {
	background: var(--accent-soft);
}

.service-dropdown-item {
	position: relative;
	flex: none;
	padding: 12px;
	border-radius: 12px;
	cursor: pointer;
	transition: background-color var(--t-fast);
}

@media (hover: hover) {
	.service-dropdown-item:hover {
		background: var(--surface-3);
	}
}

.service-dropdown-item.active {
	background: var(--accent-soft);
}

.service-dropdown-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.service-dropdown-name {
	min-width: 0;
	color: var(--text);
	font-size: 13.5px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.service-dropdown-price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex: none;
	color: var(--text);
	font-family: var(--font-mono);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: -.03em;
}

.service-dropdown-price small {
	color: var(--text-3);
	font-size: 10.5px;
	font-weight: 400;
}

.serivce-dropdown-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-top: 7px;
}

.service-dropdown-info,
.service-dropdown-minmax {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	color: var(--text-3);
	font-size: 12px;
}

.service-dropdown-info-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: -.02em;
}

.service-dropdown-info-item b {
	color: var(--text-2);
	font-weight: 500;
}

.service-dropdown-info-item .ic {
	width: 13px;
	height: 13px;
}

.service-features {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.service-features:empty {
	display: none;
}

.service-features-item {
	--tone: var(--iris);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	border-radius: var(--r-pill);
	background: color-mix(in oklab, var(--tone) 13%, transparent);
	color: color-mix(in oklab, var(--tone) 85%, var(--text));
	font-size: 11.5px;
	font-weight: 500;
	white-space: nowrap;
}

.service-features-item .ic {
	width: 12px;
	height: 12px;
}

.service-features-item.guaranteed { --tone: var(--ok); }
.service-features-item.recommended { --tone: var(--note); }
.service-features-item.faster { --tone: var(--cyan); }
.service-features-item.canceled { --tone: var(--warn); }
.service-features-item.timed { --tone: var(--iris); }
.service-features-item.discounted { --tone: var(--rose); }
.service-features-item.slow { --tone: var(--text-3); }

/* Master list mode */
.master-select {
	margin-bottom: 16px;
}

#master-service-dropdown {
	max-height: 520px;
	padding: 4px;
	overflow: auto;
	border-radius: var(--r-md);
	background: var(--bg-2);
	box-shadow: inset 0 0 0 1px var(--line);
}

.buy-btn-master {
	display: none;
}

/* Charge field */
#charge {
	color: var(--text);
	font-family: var(--font-mono);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -.03em;
	background: var(--surface-2);
}

.fields .counter {
	font-family: var(--font-mono);
}

#fields .row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

#fields .row > * {
	min-width: 0;
}

.master-form .btn[type="submit"] {
	width: 100%;
	min-height: 50px;
	font-size: 15px;
}

.master-form-mobile {
	display: none;
}

.order-form-title {
	color: var(--text);
	font-size: 16px;
	font-weight: 600;
}

/* Floating action */
.buy-btn {
	display: none;
}

/* Selected service */
.select-service-detail-box {
	position: sticky;
	top: calc(var(--header-h) + 8px);
	padding: 20px;
	border-radius: var(--r-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--sheen), var(--shadow-1);
	animation: rise var(--t-slow) var(--ease) 80ms both;
}

.select-service-detail-box:empty {
	min-height: 240px;
	background:
		linear-gradient(90deg, transparent, var(--surface-2), transparent) 0 0 / 200% 100%,
		var(--surface);
	animation: shimmer 1.6s linear infinite;
}

.select-service-title {
	display: block;
	margin: 18px 0 9px;
	color: var(--text-3);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.select-service-title:first-child {
	margin-top: 0;
}

.select-service-name {
	display: block;
	margin-bottom: 14px;
	color: var(--text);
	font-size: 16px;
	font-weight: 550;
	letter-spacing: -.02em;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.select-service-feature-item {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.select-service-feature-item > span {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	padding: 10px 12px;
	border-radius: var(--r-sm);
	background: var(--surface-2);
	color: var(--text-3);
	font-size: 12px;
}

.select-service-feature-item b {
	color: var(--text);
	font-family: var(--font-mono);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: -.03em;
	overflow-wrap: anywhere;
}

.select-service-feature-item .select-minmax b {
	font-size: 12.5px;
}

.select-service-item + .service-features {
	margin-top: 12px;
}

.select-service-description {
	color: var(--text-2);
	font-size: 14px;
	line-height: 1.7;
	overflow-wrap: anywhere;
	white-space: pre-line;
}

.select-service-description a {
	color: var(--accent-text);
	text-decoration: underline;
}

.instagram-flag-video video,
video.instagram-flag-video {
	display: block;
	width: 100%;
	margin-bottom: 12px;
	border-radius: var(--r-sm);
}

/* Page settings */
.settings-content {
	position: fixed;
	top: 0;
	bottom: 0;
	inset-inline-end: 0;
	z-index: 80;
	width: min(340px, 100vw);
	padding: 8px;
	transform: translateX(105%);
	transition: transform 440ms var(--ease);
	pointer-events: none;
}

[dir="rtl"] .settings-content {
	transform: translateX(-105%);
}

.settings-content.active {
	transform: none;
	pointer-events: auto;
}

.neworder-settings-box {
	height: 100%;
	padding: 18px;
	border-radius: var(--r-lg);
	background: var(--glass-strong);
	border: 1px solid var(--line-2);
	box-shadow: var(--shadow-2);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
	overflow: auto;
}

.close-settings {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
	color: var(--text);
	font-size: 16px;
	font-weight: 600;
}

.settings-title {
	display: block;
	margin: 18px 0 9px;
	color: var(--text-3);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.neworder-size,
.theme-type {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.size-select-box,
.theme-select-btn {
	padding: 12px;
	border-radius: var(--r-sm);
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--line);
	color: var(--text-2);
	font-size: 13px;
	text-align: center;
	cursor: pointer;
	transition: box-shadow var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}

.size-select-box:hover,
.theme-select-btn:hover {
	color: var(--text);
}

.size-select-box.active,
.theme-select-btn.active {
	background: var(--accent-soft);
	box-shadow: inset 0 0 0 1.5px var(--accent);
	color: var(--text);
}

.size-img {
	display: flex;
	gap: 4px;
	height: 42px;
	margin-bottom: 8px;
}

.size-img i {
	display: block;
	border-radius: 5px;
	background: var(--line-2);
}

.size-select-box.active .size-img i {
	background: var(--accent);
}

.size-text {
	font-family: var(--font-mono);
	font-size: 12px;
}

/* Order success dialog */
.order-alert-content {
	position: fixed;
	inset: 0;
	z-index: 88;
	background: var(--scrim);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	animation: fade var(--t-mid) both;
}

.order-alert-box {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 89;
	width: min(430px, calc(100vw - 32px));
	max-height: 88dvh;
	padding: 26px 22px 20px;
	overflow: auto;
	border-radius: var(--r-xl);
	background: var(--surface);
	border: 1px solid var(--line-2);
	box-shadow: var(--sheen), var(--shadow-2);
	transform: translate(-50%, -50%);
	animation: order-in 520ms var(--ease) both;
}

@keyframes order-in {
	from {
		opacity: 0;
		transform: translate(-50%, -46%) scale(.95);
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}

.order-alert-box.close,
.order-alert-content.close {
	display: none;
}

.alert-close {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	color: var(--text-2);
	transition: background-color var(--t-fast);
}

.alert-close:hover {
	background: var(--surface-3);
}

.alert-box-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	color: var(--text);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.02em;
	text-align: center;
}

.success-check {
	width: 64px;
	height: 64px;
	color: var(--ok);
	filter: drop-shadow(0 0 22px color-mix(in oklab, var(--ok) 50%, transparent));
}

.success-check svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.success-check circle {
	stroke-dasharray: 152;
	stroke-dashoffset: 152;
	animation: draw 700ms var(--ease) 100ms forwards;
	transform: rotate(-90deg);
	transform-origin: center;
}

.success-check path {
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: draw 420ms var(--ease) 560ms forwards;
}

@keyframes draw {
	to {
		stroke-dashoffset: 0;
	}
}

.alert-box-bottom {
	display: flex;
	flex-direction: column;
	border-radius: var(--r-md);
	background: var(--surface-2);
	overflow: hidden;
}

.alert-box-bottom span {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding: 9px 13px;
	border-bottom: 1px solid var(--line);
	font-size: 13.5px;
}

.alert-box-bottom span:last-child {
	border-bottom: 0;
}

.alert-box-bottom b {
	color: var(--text);
	font-weight: 500;
	text-align: end;
	overflow-wrap: anywhere;
}

/* Mobile order experience */
@media (max-width: 900px) {
	#size-1,
	#size-2 {
		grid-column: span 12;
	}

	.select-service-detail-box {
		position: static;
	}

	.stats-box-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.stats-box {
		padding: 10px 12px;
		border-radius: var(--r-md);
	}

	.stats-name {
		font-size: 12px;
	}

	.stats-center {
		margin-top: 3px;
	}

	.stats-text {
		font-size: 17px;
	}

	.stats-top .ic {
		width: 15px;
		height: 15px;
	}

	.neworder-form {
		padding: 16px;
	}

	/* One swipeable row of platforms */
	.platform-filter {
		display: flex;
		min-height: 38px;
		padding-inline-end: 30px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
	}

	.platform-filter::-webkit-scrollbar {
		display: none;
	}

	.platform-chip {
		height: 38px;
		padding-inline: 11px 14px;
		font-size: 13px;
	}

	[dir="rtl"] .platform-filter {
		-webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 30px), transparent);
		mask-image: linear-gradient(270deg, #000 calc(100% - 30px), transparent);
	}

	.category-dropdown,
	.service-dropdown,
	.payment-dropdown {
		position: fixed;
		inset: auto 8px calc(8px + env(safe-area-inset-bottom)) 8px;
		z-index: 86;
		max-height: 78dvh;
		background: var(--surface);
		border-radius: var(--r-xl) var(--r-xl) var(--r-lg) var(--r-lg);
		transform: translateY(40px);
		transform-origin: bottom center;
		transition: opacity var(--t-mid), transform 420ms var(--ease), visibility var(--t-mid);
	}

	.category-dropdown-header,
	.service-dropdown-header,
	.payment-dropdown-header {
		display: flex;
	}

	.category-dropdown-bg.active,
	.service-dropdown-bg.active,
	.payment-dropdown-bg.active {
		z-index: 85;
		background: var(--scrim);
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
		animation: fade var(--t-mid) both;
	}

	.buy-btn-master {
		display: block;
		margin-top: 8px;
	}

	.buy-btn-master .open-order-form {
		display: none;
	}

	#master-service-dropdown {
		max-height: min(420px, 52dvh);
	}

	.masterBox .buy-btn:not(.hidden) {
		position: fixed;
		bottom: calc(var(--dock-h) + 24px + env(safe-area-inset-bottom));
		inset-inline-end: 18px;
		z-index: 44;
		display: flex;
	}

	.buy-btn-item {
		display: grid;
		place-items: center;
		width: 54px;
		height: 54px;
		border-radius: 50%;
		background: var(--accent);
		color: #fff;
		box-shadow: 0 14px 34px -8px color-mix(in oklab, var(--accent) 90%, transparent);
		cursor: pointer;
	}

	.buy-btn-item .ic-btn {
		width: 100%;
		height: 100%;
		color: inherit;
		border-radius: 50%;
	}

	.buy-btn .open-order-form {
		display: none;
	}
}

@media (max-width: 400px) {
	#fields .row {
		grid-template-columns: 1fr;
	}
}

/* Checkbox / radio groups generated by the panel */
.form-group__checkbox {
	margin-bottom: 8px;
}

.form-group__checkbox-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

/* ==========================================================================
   06. Lists & inner pages
   ========================================================================== */

/* Filter toolbar shared by orders, refill, refunds, subs, drip, updates, services */
.services-top-box {
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	gap: 10px;
	margin-bottom: 16px;
	animation: rise var(--t-slow) var(--ease) backwards;
}

.services-top-box.has-currency {
	grid-template-columns: minmax(0, 280px) minmax(0, 170px) minmax(0, 1fr);
}

.services-top-box > .form-group,
.services-top-box > form {
	margin: 0;
	min-width: 0;
}

/* Order cards */
.order-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.order-box {
	display: flex;
	flex-direction: column;
	padding: 16px;
	border-radius: var(--r-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--sheen), var(--shadow-1);
	animation: rise var(--t-slow) var(--ease) backwards;
	transition: border-color var(--t-mid), transform var(--t-mid) var(--ease), box-shadow var(--t-mid);
}

.order-box:nth-child(2) { animation-delay: 40ms; }
.order-box:nth-child(3) { animation-delay: 80ms; }
.order-box:nth-child(4) { animation-delay: 120ms; }

.order-box:hover {
	border-color: var(--line-2);
}

.order-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}

.order-top-left {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.order-id {
	margin-inline-end: 4px;
	color: var(--text);
	font-family: var(--font-mono);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: -.02em;
	cursor: copy;
}

.o-tooltip {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	color: var(--text-3);
	cursor: pointer;
	transition: background-color var(--t-fast), color var(--t-fast);
}

.o-tooltip .ic {
	width: 15px;
	height: 15px;
}

.o-tooltip:hover {
	background: var(--surface-3);
	color: var(--text);
}

.report-order-btn:hover {
	color: var(--warn);
}

.order-tooltip {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	z-index: 5;
	padding: 4px 9px;
	border-radius: 8px;
	background: var(--ink);
	color: var(--ink-text);
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 4px);
	transition: opacity var(--t-fast), transform var(--t-mid) var(--ease), visibility var(--t-fast);
	pointer-events: none;
}

.o-tooltip:hover .order-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.order-center {
	display: flex;
	flex-wrap: wrap;
	gap: 7px 16px;
	padding-top: 12px;
	font-size: 13px;
}

.order-service {
	flex: 1 0 100%;
	color: var(--text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.order-date,
.order-remains {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text-2);
}

.order-remains a {
	color: var(--accent-text);
}

.order-date .ic,
.order-remains .ic,
.order-link .ic {
	width: 14px;
	height: 14px;
	color: var(--text-3);
}

.order-link {
	flex: 1 0 100%;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	padding: 7px 10px;
	border-radius: 10px;
	background: var(--surface-2);
	color: var(--text-2);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: -.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: copy;
	transition: color var(--t-fast);
}

.order-link:hover {
	color: var(--text);
}

.order-center-bottom {
	flex: 1 0 100%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}

.order-box.subscriptions .order-center-bottom {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.order-center-bottom.dripfeed {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.order-center-bottom span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	color: var(--text-3);
	font-size: 11.5px;
}

.order-center-bottom b {
	color: var(--text);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -.02em;
	overflow-wrap: anywhere;
}

.order-center-bottom a {
	color: var(--accent-text);
}

.order-btn {
	margin-top: 12px;
}

.order-modal-bottom .btn {
	width: 100%;
	min-height: 38px;
	font-size: 13px;
}

.cancel-btn .btn {
	--btn-bg: color-mix(in oklab, var(--bad) 12%, transparent);
	--btn-fg: var(--bad);
	background: var(--btn-bg);
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bad) 30%, transparent);
}

.refil-btn .btn {
	--btn-bg: color-mix(in oklab, var(--ok) 12%, transparent);
	--btn-fg: var(--ok);
	background: var(--btn-bg);
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ok) 30%, transparent);
}

.sliding-text {
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--surface-2);
	color: var(--text-2);
	font-size: 12.5px;
	text-align: center;
	overflow-wrap: anywhere;
}

.sliding-text.cancelReason {
	background: color-mix(in oklab, var(--bad) 9%, transparent);
	color: var(--bad);
}

/* Services */
.services-category-box {
	position: sticky;
	top: var(--header-h);
	z-index: 8;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 22px 0 8px;
	padding: 9px 13px;
	border-radius: 12px;
	background: var(--glass-strong);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: inset 0 0 0 1px var(--line);
	color: var(--text);
	font-size: 14px;
	font-weight: 550;
	letter-spacing: -.01em;
}

.services-category-box::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent-text);
	box-shadow: 0 0 10px var(--accent);
}

.services-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.services-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 15px;
	border-radius: var(--r-md);
	background: var(--surface);
	border: 1px solid var(--line);
	transition: border-color var(--t-fast), background-color var(--t-fast);
	content-visibility: auto;
	contain-intrinsic-size: auto 78px;
}

.services-list-item:hover {
	border-color: var(--line-2);
	background: var(--surface-2);
}

.services-list-left {
	min-width: 0;
	flex: 1;
}

.services-item-top {
	color: var(--text);
	font-size: 14px;
	font-weight: 450;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.services-item-top img {
	margin-inline-end: 3px;
}

.favbox {
	margin-inline-end: 5px;
	color: var(--text-3);
	cursor: pointer;
	transition: color var(--t-fast), transform var(--t-mid) var(--ease);
}

.favbox:hover {
	transform: scale(1.18);
	color: var(--amber);
}

.favbox.favorite-active {
	color: var(--amber);
}

.services-item-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 14px;
	margin-top: 6px;
}

.services-item-feature {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--text-3);
	font-size: 12px;
}

.services-item-feature .ic {
	width: 13px;
	height: 13px;
}

.services-item-feature b {
	margin-inline-start: 2px;
	color: var(--text-2);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: -.02em;
}

.services-list-right {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
}

.services-item-price {
	color: var(--text);
	font-family: var(--font-mono);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -.03em;
	white-space: nowrap;
}

.btn-service {
	--btn-bg: transparent;
	--btn-fg: var(--text);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--line-2);
}

.btn-service:hover {
	--btn-bg: var(--surface-3);
	background: var(--surface-3);
	box-shadow: inset 0 0 0 1px var(--line-2);
}

/* Add funds */
.payment-title,
.ticket-title {
	display: block;
	margin-bottom: 12px;
	color: var(--text);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.015em;
}

.payment-box {
	padding: 22px;
}

/* Amount with its Turkish lira counterpart */
.amount-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 10px;
	align-items: end;
}

.amount-pair > * {
	grid-column: 1 / -1;
}

.amount-pair > label:not(.try-label),
.amount-pair > input:not(.try-input) {
	grid-column: 1;
}

.amount-pair > .try-label,
.amount-pair > .try-input {
	grid-column: 2;
}

.amount-pair > label {
	grid-row: 1;
}

.amount-pair > input {
	grid-row: 2;
	min-width: 0;
}

.amount-code {
	margin-inline-start: 4px;
	padding: 1px 6px;
	border-radius: 6px;
	background: var(--surface-3);
	color: var(--text-2);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
}

.amount-rate {
	margin-top: 7px;
	color: var(--text-3);
	font-size: 12.5px;
}

.payment-box .dropdwon-box {
	margin-bottom: 12px;
}

.payment-dropdown-bg {
	z-index: 24;
}

.select-amount {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 14px;
}

.amount-item {
	display: grid;
	place-items: center;
	min-height: 42px;
	border-radius: 12px;
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--line);
	color: var(--text);
	font-family: var(--font-mono);
	font-size: 14px;
	cursor: pointer;
	transition: background-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-mid) var(--ease);
}

.amount-item:hover {
	background: var(--accent-soft);
	box-shadow: inset 0 0 0 1px var(--accent-line);
	transform: translateY(-1px);
}

.amount-item:active {
	transform: scale(.96);
}

.payment-method {
	display: block;
	padding: 11px 12px;
	border-radius: 11px;
	cursor: pointer;
	transition: background-color var(--t-fast);
}

.payment-method:hover {
	background: var(--surface-3);
}

.payment-method.active {
	background: var(--accent-soft);
}

.payment-name {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text);
	font-size: 14px;
}

.payment-description {
	display: block;
	margin-top: 4px;
	margin-inline-start: 30px;
	color: var(--text-3);
	font-size: 12.5px;
	line-height: 1.45;
}

.payment-history {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.history-box {
	padding: 12px 14px;
	border-radius: var(--r-md);
	background: var(--surface);
	border: 1px solid var(--line);
	transition: border-color var(--t-fast);
}

.history-box:hover {
	border-color: var(--line-2);
}

.history-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.history-payment-name {
	min-width: 0;
	color: var(--text);
	font-size: 14px;
	font-weight: 500;
	overflow-wrap: anywhere;
}

.history-amount {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 3px;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -.03em;
	white-space: nowrap;
}

.history-amount .ic {
	width: 13px;
	height: 13px;
}

.history-bottom {
	margin-top: 3px;
	color: var(--text-3);
	font-size: 12px;
}

/* Tickets */
.subject-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 16px;
}

.subject-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px;
	border-radius: 12px;
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--line);
	cursor: pointer;
	transition: background-color var(--t-fast), box-shadow var(--t-fast);
}

.subject-item input {
	display: none;
}

.subject-item label {
	margin: 0;
	color: var(--text-2);
	font-size: 13.5px;
	cursor: pointer;
}

.subject-item.active {
	background: var(--accent-soft);
	box-shadow: inset 0 0 0 1.5px var(--accent);
}

.subject-item.active label {
	color: var(--text);
}

.tickets-uploader {
	padding: 12px 14px;
	border-radius: var(--r-sm);
	border: 1px dashed var(--line-2);
	color: var(--text-2);
	font-size: 13px;
	cursor: pointer;
	transition: border-color var(--t-fast), background-color var(--t-fast);
}

.tickets-uploader:hover {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.tickets-uploader .paperclip,
.tickets-uploader svg {
	color: var(--text-2);
}

.tickets-uploader .files-label {
	color: var(--text);
}

#history-search {
	margin-bottom: 14px;
}

.services-top-box #history-search {
	margin-bottom: 0;
}

.ticket-list {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.ticket-box {
	display: block;
	padding: 13px 15px;
	border-radius: var(--r-md);
	background: var(--surface);
	border: 1px solid var(--line);
	transition: border-color var(--t-fast), transform var(--t-mid) var(--ease);
}

.ticket-box:hover {
	border-color: var(--line-2);
	transform: translateX(2px);
}

[dir="rtl"] .ticket-box:hover {
	transform: translateX(-2px);
}

.ticket-box.active {
	border-color: var(--accent-line);
	background: linear-gradient(90deg, var(--accent-soft), transparent 70%), var(--surface);
}

.ticket-box-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ticket-top-content {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.ticket-id {
	flex: none;
	color: var(--text-3);
	font-family: var(--font-mono);
	font-size: 12.5px;
}

.ticket-subject {
	color: var(--text);
	font-size: 14px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ticket-status {
	flex: none;
	padding: 3px 9px;
	border-radius: var(--r-pill);
	background: var(--surface-2);
	color: var(--text-2);
	font-size: 12px;
}

.ticket-bottom {
	margin-top: 4px;
	color: var(--text-3);
	font-size: 12px;
}

/* Ticket conversation */
.ticket-view-page {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: calc(100dvh - var(--header-h) - 16px);
	min-height: 480px;
}

.ticket-view-top {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-radius: var(--r-md);
	background: var(--surface);
	border: 1px solid var(--line);
}

.ticket-view-id {
	color: var(--accent-text);
	font-family: var(--font-mono);
	font-size: 13px;
}

.ticket-view-subject {
	min-width: 0;
	color: var(--text);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ticket-view-message-list {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
	padding: 8px 2px;
	overflow: auto;
}

.message-right,
.message-left {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: min(76%, 620px);
	padding: 11px 14px;
	border-radius: 16px;
	animation: pop var(--t-mid) var(--ease) backwards;
}

.message-right {
	align-self: flex-end;
	background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 90%, white), var(--accent));
	color: #fff;
	border-end-end-radius: 5px;
}

.message-left {
	align-self: flex-start;
	background: var(--surface);
	border: 1px solid var(--line);
	border-end-start-radius: 5px;
}

.message-text {
	color: inherit;
	font-size: 14.5px;
	line-height: 1.55;
	overflow-wrap: anywhere;
	white-space: pre-line;
}

.message-left .message-text {
	color: var(--text);
}

.message-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	font-size: 11.5px;
	opacity: .72;
}

.message-author {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.message-author .ic {
	width: 12px;
	height: 12px;
}

.ticket-image {
	max-width: 240px;
	border-radius: 10px;
	cursor: zoom-in;
	transition: transform var(--t-mid) var(--ease);
}

.ticket-image.enlarged {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 100;
	max-width: 92vw;
	max-height: 88dvh;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 100vmax var(--scrim);
	cursor: zoom-out;
}

.ticket-view-bottom {
	padding: 14px;
}

.ticket-view-bottom .form-group {
	margin-bottom: 10px;
}

.ticket-view-bottom textarea.form-control {
	min-height: 76px;
}

/* Account */
.user-info-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 20px;
	border-radius: var(--r-lg);
	background:
		radial-gradient(90% 180% at 100% 0, var(--accent-soft), transparent 60%),
		var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--sheen), var(--shadow-1);
}

.user-box-info {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.user-image {
	display: grid;
	place-items: center;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--accent), var(--cyan));
	color: #fff;
	font-size: 22px;
	font-weight: 600;
}

.user-info-detail {
	min-width: 0;
}

.userbox-username {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--text);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.02em;
}

.userbox-username .ic {
	color: var(--accent-text);
}

.userbox-mail {
	color: var(--text-2);
	font-size: 13.5px;
	overflow-wrap: anywhere;
}

.user-info-apibox form {
	margin: 0;
}

.btn-apikey {
	box-shadow: inset 0 0 0 1px var(--line-2);
}

.user-well {
	height: 100%;
}

.user-well-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 16px;
	color: var(--text);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.015em;
}

.user-well-title .ic {
	width: 17px;
	height: 17px;
	color: var(--accent-text);
}

.tfa-span {
	display: block;
	margin-bottom: 14px;
	color: var(--text-2);
	font-size: 13.5px;
}

.active-2fa {
	display: inline-flex;
	padding: 4px 11px;
	border-radius: var(--r-pill);
	background: color-mix(in oklab, var(--ok) 13%, transparent);
	color: var(--ok);
	font-size: 12.5px;
}

/* Affiliates */
.affiliate-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	padding: 26px;
	margin-bottom: 14px;
	border-radius: var(--r-xl);
	background:
		radial-gradient(80% 160% at 0 0, var(--accent-soft), transparent 60%),
		radial-gradient(60% 120% at 100% 100%, color-mix(in oklab, var(--cyan) 10%, transparent), transparent 60%),
		var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--sheen), var(--shadow-1);
}

.affiliate-left {
	flex: 1;
	min-width: min(280px, 100%);
}

.affiliate-title {
	margin-bottom: 14px;
	color: var(--text);
	font-size: clamp(20px, 2.6vw, 28px);
	font-weight: 600;
	letter-spacing: -.03em;
	line-height: 1.2;
}

.affiliate-url {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 560px;
	padding: 11px 14px;
	border-radius: var(--r-sm);
	background: var(--bg-2);
	box-shadow: inset 0 0 0 1px var(--line-2);
	color: var(--text);
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: -.02em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: copy;
}

.unpaid-progress {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.unpaid-progress svg {
	width: 112px;
	height: 112px;
	transform: rotate(-90deg);
}

.affiliate-bar-bg,
.affiliate-bar {
	fill: none;
	stroke-width: 2.6;
}

.affiliate-bar-bg {
	stroke: var(--line-2);
}

.affiliate-bar {
	stroke: var(--accent-text);
	stroke-linecap: round;
	stroke-dasharray: 100 100;
	transition: stroke-dashoffset 1.2s var(--ease);
}

.unpaid-amount-text {
	fill: var(--text);
	font-size: 6px;
	font-family: var(--font-mono);
	font-weight: 500;
}

.affiliate-stats-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}

.affiliate-stats-box {
	padding: 14px 16px;
	border-radius: var(--r-md);
	background: var(--surface);
	border: 1px solid var(--line);
}

.affiliate-stats-top {
	color: var(--text-2);
	font-size: 12.5px;
}

.affiliate-stats-bottom {
	margin-top: 5px;
	color: var(--text);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
}

.affiliate-pay-list {
	border-radius: var(--r-md);
	background: var(--surface);
	border: 1px solid var(--line);
	overflow: hidden;
}

.payout-box {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-bottom: 1px solid var(--line);
}

.payout-box:last-child {
	border-bottom: 0;
}

.payout-item {
	min-width: 0;
	padding: 11px 16px;
}

.payout-top {
	color: var(--text-3);
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.payout-bottom {
	color: var(--text);
	font-size: 13.5px;
	overflow-wrap: anywhere;
}

/* Child panels */
.panel-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
}

.panel-content {
	border-radius: var(--r-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--sheen), var(--shadow-1);
	overflow: hidden;
	transition: border-color var(--t-mid), transform var(--t-mid) var(--ease);
}

.panel-content:hover {
	border-color: var(--line-2);
	transform: translateY(-2px);
}

.panel-img-box {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--surface-2);
	overflow: hidden;
}

.panel-img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.loading-img {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--text-3);
}

.loading-img .ic {
	animation: spin 1.1s linear infinite;
}

.panel-content-top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--line);
}

.panel-date {
	padding: 10px 14px;
	font-size: 12px;
	color: var(--text-3);
}

.panel-date span {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.panel-date b {
	color: var(--text);
	font-family: var(--font-mono);
	font-size: 12.5px;
	font-weight: 500;
}

.panel-content-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 14px;
}

.panel-title {
	min-width: 0;
	color: var(--text);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.panel-content-bottom .btn-min {
	min-width: 0;
}

.child-order-form {
	max-width: 620px;
}

.child-name-servers {
	margin-bottom: 16px;
	padding: 13px;
	border-radius: var(--r-sm);
	background: var(--surface-2);
}

.name-servers-top {
	margin-bottom: 8px;
	color: var(--text-2);
	font-size: 13px;
}

.name-servers-list {
	display: grid;
	gap: 6px;
}

.name-servers-item {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--text);
	font-family: var(--font-mono);
	font-size: 12.5px;
	cursor: copy;
}

.child-price-box {
	margin-bottom: 14px;
	color: var(--text);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -.03em;
}

/* Updates */
.update-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.update-box {
	padding: 13px 15px;
	border-radius: var(--r-md);
	background: var(--surface);
	border: 1px solid var(--line);
	transition: border-color var(--t-fast);
}

.update-box:hover {
	border-color: var(--line-2);
}

.update-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.update-service-name {
	min-width: 0;
	color: var(--text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.update-date {
	flex: none;
	color: var(--text-3);
	font-family: var(--font-mono);
	font-size: 11.5px;
}

.update-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 6px;
	color: var(--text-2);
	font-size: 13px;
}

.update-icon .ic {
	width: 16px;
	height: 16px;
	color: var(--text-3);
}

.update-icon .ic[data-tone="ok"] { color: var(--ok); }
.update-icon .ic[data-tone="note"] { color: var(--note); }
.update-icon .ic[data-tone="bad"] { color: var(--bad); }
.update-icon .ic[data-tone="warn"] { color: var(--warn); }

/* Blog (fallback list, the Journal below upgrades it) */
.blog-box {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border-radius: var(--r-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	transition: border-color var(--t-mid), transform var(--t-mid) var(--ease);
}

.blog-box:hover {
	border-color: var(--line-2);
	transform: translateY(-3px);
}

.blog-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--r-sm);
}

.blog-title {
	color: var(--text);
	font-size: 16.5px;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.3;
}

.blog-text {
	flex: 1;
	font-size: 13.5px;
}

.blog-top {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 28px 24px 8px;
}

.blog-view-image img {
	display: block;
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: var(--r-lg);
}

.blog-view-title {
	margin-top: 22px;
	font-size: clamp(28px, 4.4vw, 46px);
	letter-spacing: -.035em;
}

.blog-content {
	max-width: 780px;
	margin: 0 auto 26px;
	color: var(--text-2);
	font-size: 16px;
	line-height: 1.8;
}

.blog-content h2,
.blog-content h3 {
	margin: 1.6em 0 .55em;
}

.blog-content p {
	margin: 0 0 1.1em;
}

.blog-content img {
	border-radius: var(--r-md);
}

.noneAuth {
	padding-top: 112px;
	padding-bottom: 64px;
}

/* Responsive */
@media (max-width: 1280px) {
	.order-list,
	.update-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.grid-container {
		gap: 14px;
	}

	.col-span-7,
	.col-span-6,
	.col-span-5,
	.col-span-4,
	.col-span-3 {
		grid-column: span 12;
	}

	.affiliate-stats-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.page-title {
		font-size: 19px;
		margin-bottom: 14px;
	}

	.services-top-box {
		grid-template-columns: minmax(0, 1fr);
	}

	.services-top-box.has-currency {
		grid-template-columns: minmax(0, 1fr) minmax(0, 132px);
	}

	.services-top-box.has-currency > .has-search-icon {
		grid-column: 1 / -1;
	}

	.services-list-item {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.services-list-right {
		justify-content: space-between;
	}

	.order-center-bottom.dripfeed {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.message-right,
	.message-left {
		max-width: 90%;
	}

	.ticket-view-page {
		height: auto;
	}

	.table {
		display: block;
		overflow-x: auto;
	}

	.btn-min {
		width: 100%;
	}

	.affiliate-box {
		padding: 18px;
	}

	.unpaid-progress {
		width: 100%;
	}
}

@media (max-width: 768px) {
	/* 16px stops iOS Safari zooming into focused fields */
	.form-control,
	.login-form-control,
	.select2-container .select2-dropdown .select2-search input {
		font-size: 16px;
	}
}

/* ==========================================================================
   07. Auth screens — sign up, reset, 2FA, confirm
   ========================================================================== */

.auth-screen-container {
	position: relative;
	display: grid;
	place-items: center;
	min-height: calc(100dvh - 120px);
	padding: 120px 0 72px;
}

/* Quiet aurora behind the card */
.auth-screen-container::before {
	content: "";
	position: absolute;
	top: 6%;
	left: 50%;
	z-index: 0;
	width: min(880px, 130vw);
	height: 560px;
	transform: translateX(-50%);
	background:
		radial-gradient(44% 50% at 34% 46%, color-mix(in oklab, var(--accent) 72%, transparent), transparent 72%),
		radial-gradient(40% 44% at 70% 56%, color-mix(in oklab, var(--cyan) 38%, transparent), transparent 72%);
	opacity: var(--aurora-opacity);
	filter: blur(46px);
	pointer-events: none;
	animation: fade 1.2s var(--ease) both;
}

.auth-screen,
.sms-verify {
	position: relative;
	z-index: 1;
	width: min(460px, 100%);
	padding: clamp(22px, 4vw, 34px);
	border-radius: var(--r-xl);
	background: var(--glass);
	border: 1px solid var(--line-2);
	box-shadow: var(--sheen), var(--shadow-2);
	backdrop-filter: blur(26px) saturate(1.3);
	-webkit-backdrop-filter: blur(26px) saturate(1.3);
	animation: pop 640ms var(--ease) backwards;
}

.auth-screen.signup {
	width: min(520px, 100%);
}

.auth-screen-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 22px;
	color: var(--text);
	font-size: 25px;
	font-weight: 600;
	letter-spacing: -.032em;
	line-height: 1.15;
}

.auth-screen-title .ic {
	box-sizing: content-box;
	width: 19px;
	height: 19px;
	padding: 10px;
	border-radius: 13px;
	color: var(--accent-text);
	background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 26%, transparent), color-mix(in oklab, var(--accent) 6%, transparent));
	box-shadow: inset 0 0 0 1px var(--accent-line), var(--sheen);
}

.auth-screen-form {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.auth-screen .form-group {
	margin-bottom: 14px;
}

.auth-screen .form-control {
	background: color-mix(in oklab, var(--bg-2) 70%, transparent);
}

.auth-screen .btn {
	margin-top: 4px;
	min-height: 48px;
}

.signup-alt-text {
	display: block;
	margin-top: 16px;
	color: var(--text-2);
	font-size: 13.5px;
	text-align: center;
}

.signup-social {
	display: flex;
	justify-content: center;
	margin-top: 12px;
}

/* Google draws its own button here; the icon only shows until/unless it loads */
.custom-google-btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--line-2);
	color: var(--text);
}

.custom-google-btn > div {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
}

.confirm-mail-btn {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.confirm-mail-btn .btn {
	flex: 1;
}

/* 2FA */
.sms-verify {
	text-align: center;
}

.verify-icon {
	display: flex;
	justify-content: center;
	margin-bottom: 16px;
}

.ic-tile-lg {
	width: 60px;
	height: 60px;
	border-radius: 19px;
	font-size: 22px;
}

.verify-title {
	color: var(--text);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -.03em;
}

.verify-small-text {
	margin: 6px 0 22px;
	color: var(--text-2);
	font-size: 14px;
}

.verify-input-box {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 16px;
}

.verify-input {
	min-height: 56px;
	padding: 0;
	color: var(--text);
	font-family: var(--font-mono);
	font-size: 22px;
	text-align: center;
}

/* Recaptcha never overflows on narrow phones */
.g-recaptcha {
	max-width: 100%;
	margin-bottom: 12px;
	overflow: hidden;
}

@media (max-width: 380px) {
	.g-recaptcha {
		transform: scale(.86);
		transform-origin: 0 0;
	}
}

/* ==========================================================================
   08. Guest shell & landing
   ========================================================================== */

.guest-main {
	position: relative;
	min-height: 60dvh;
	overflow-x: clip;
}

/* Floating navigation ------------------------------------------------------ */
.main-header {
	position: fixed;
	top: 14px;
	inset-inline: 0;
	z-index: 50;
	padding-inline: 14px;
	pointer-events: none;
}

.main-header-content {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	width: min(1100px, 100%);
	height: 60px;
	margin-inline: auto;
	padding-inline: 18px 9px;
	border-radius: var(--r-pill);
	background: var(--glass);
	border: 1px solid var(--line);
	box-shadow: var(--sheen);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	pointer-events: auto;
	transition: border-color var(--t-mid), box-shadow var(--t-mid), background-color var(--t-mid);
}

[dir="rtl"] .main-header-content {
	padding-inline: 18px 9px;
}

.is-scrolled .main-header-content {
	background: var(--glass-strong);
	border-color: var(--line-2);
	box-shadow: var(--sheen), var(--shadow-2);
}

.main-header-logo {
	display: inline-flex;
	align-items: center;
}

.main-header-logo .logo {
	max-height: 30px;
}

.main-header-link {
	display: flex;
	align-items: center;
	gap: 2px;
}

.main-header-link-item {
	padding: 7px 13px;
	border-radius: var(--r-pill);
	color: var(--text-2);
	font-size: 14px;
	white-space: nowrap;
	transition: color var(--t-fast), background-color var(--t-fast);
}

.main-header-link-item:hover,
.main-header-link-item.active {
	color: var(--text);
}

.main-header-link-item:hover {
	background: var(--surface-3);
}

.main-header-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 7px;
}

.main-header-right .language-btn {
	height: 40px;
	background: transparent;
	box-shadow: none;
	border-radius: var(--r-pill);
	text-transform: uppercase;
	font-family: var(--font-mono);
	font-size: 12px;
}

.theme-toggle {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--text-2);
	transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-mid) var(--ease);
}

.theme-toggle:hover {
	background: var(--surface-3);
	color: var(--text);
	transform: rotate(14deg);
}

html.dark .theme-toggle .ic-moon,
html.light .theme-toggle .ic-sun {
	display: none;
}

.main-header-cta {
	min-height: 42px;
	padding-inline: 18px;
	box-shadow: none;
}

.main-header-mobile-btn {
	display: none;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--surface-3);
	color: var(--text);
}

.main-header-mobile {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	padding: 16px;
	background: var(--bg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-14px);
	transition: opacity var(--t-mid), transform 420ms var(--ease), visibility var(--t-mid);
}

.main-header-mobile.active {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.main-header-mobile-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 26px;
}

.main-header-mobile-link {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.main-header-mobile-link-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 2px;
	border-bottom: 1px solid var(--line);
	color: var(--text);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -.025em;
}

.main-header-mobile-link-item .ic {
	color: var(--text-3);
}

.main-header-mobile-bottom {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.drawer-langs {
	display: none;
	flex-wrap: wrap;
	gap: 4px;
}

.main-header-mobile .drawer-langs {
	display: flex;
}

.drawer-langs a {
	padding: 5px 10px;
	border-radius: 8px;
	background: var(--surface-2);
	color: var(--text-2);
	font-family: var(--font-mono);
	font-size: 11.5px;
	text-transform: uppercase;
}

.drawer-langs a.selected {
	background: var(--accent-soft);
	color: var(--text);
}

/* Footer ------------------------------------------------------------------- */
.site-footer {
	position: relative;
	margin-top: 40px;
	padding: 44px 0 26px;
	border-top: 1px solid var(--line);
}

.footer-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 26px 60px;
}

.footer-brand {
	max-width: 340px;
}

.footer-brand p {
	margin-top: 12px;
	color: var(--text-2);
	font-size: 14px;
}

.footer-link {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	align-content: flex-start;
}

.footer-link-item {
	color: var(--text-2);
	font-size: 14px;
	transition: color var(--t-fast);
}

.footer-link-item:hover {
	color: var(--text);
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 30px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	color: var(--text-3);
	font-size: 13px;
}

.footer-theme {
	width: 126px;
}

/* Hero --------------------------------------------------------------------- */
.home-section {
	position: relative;
	padding: 152px 0 0;
	overflow: hidden;
	isolation: isolate;
}

.aurora {
	position: absolute;
	inset: 0 0 auto;
	z-index: -1;
	height: min(100dvh, 900px);
	opacity: var(--aurora-opacity);
	background:
		radial-gradient(38% 52% at 26% 22%, color-mix(in oklab, var(--accent) 62%, transparent), transparent 70%),
		radial-gradient(32% 44% at 78% 16%, color-mix(in oklab, var(--cyan) 40%, transparent), transparent 70%),
		radial-gradient(46% 42% at 54% 62%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 72%);
	mask-image: linear-gradient(to bottom, #000 58%, transparent);
	-webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent);
	pointer-events: none;
}

.aurora canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.4s var(--ease);
}

.aurora.is-live canvas {
	opacity: 1;
}

.home-section-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 13px 4px 4px;
	border-radius: var(--r-pill);
	background: var(--glass);
	border: 1px solid var(--line-2);
	color: var(--text);
	font-size: 13px;
	font-weight: 450;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	animation: rise 800ms var(--ease) backwards;
}

.badge-dot {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent), var(--cyan));
	color: #fff;
	font-size: 11px;
}

.home-title {
	max-width: 980px;
	margin-top: 22px;
	font-size: clamp(42px, 7.2vw, 88px);
	font-weight: 600;
	line-height: .98;
	letter-spacing: -.045em;
	animation: rise 900ms var(--ease) 80ms both;
}

.home-title em {
	display: block;
	padding-bottom: .08em;
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -.025em;
	background: linear-gradient(100deg, var(--iris) 8%, #dcd3ff 48%, var(--cyan) 96%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

html.light .home-title em {
	background-image: linear-gradient(100deg, var(--accent) 8%, #8f5cf6 48%, #0284c7 96%);
}

.home-lead {
	max-width: 620px;
	margin-top: 20px;
	color: var(--text-2);
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.6;
	animation: rise 900ms var(--ease) 160ms both;
}

/* Login bar */
.login-box {
	width: min(860px, 100%);
	margin: 30px auto 0;
	animation: rise 900ms var(--ease) 240ms both;
}

.login-box .alert {
	margin-bottom: 10px;
	text-align: start;
}

.login-box-form {
	padding: 13px;
	border-radius: 32px;
	background: var(--glass);
	border: 1px solid var(--line-2);
	box-shadow: var(--sheen), var(--shadow-2);
	backdrop-filter: blur(24px) saturate(1.4);
	-webkit-backdrop-filter: blur(24px) saturate(1.4);
}

.login-box-content {
	display: flex;
	align-items: center;
	gap: 6px;
}

.login-box-content > .closedCaptcha {
	min-width: 0;
}

.login-field {
	position: relative;
	flex: 1;
}

.login-field > .ic {
	position: absolute;
	inset-inline-start: 15px;
	top: 50%;
	width: 17px;
	height: 17px;
	color: var(--text-3);
	transform: translateY(-50%);
	pointer-events: none;
}

.login-form-control {
	min-height: 50px;
	padding-inline-start: 42px;
	border: 1px solid transparent;
	border-radius: 19px;
	background: color-mix(in oklab, var(--text) 5%, transparent);
}

.login-btn-group {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: none;
}

.login-remember,
.login-resetpassword {
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: 15px;
	color: var(--text-3);
	cursor: pointer;
	transition: color var(--t-fast), background-color var(--t-fast);
}

.login-remember:hover,
.login-resetpassword:hover {
	background: var(--surface-3);
	color: var(--text);
}

#remember:checked + .login-remember {
	background: var(--accent-soft);
	color: var(--accent-text);
}

.login-tip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	padding: 4px 9px;
	border-radius: 8px;
	background: var(--ink);
	color: var(--ink-text);
	font-size: 12px;
	font-weight: 450;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 4px);
	transition: opacity var(--t-fast), transform var(--t-mid) var(--ease);
	pointer-events: none;
}

.login-remember:hover .login-tip,
.login-resetpassword:hover .login-tip {
	opacity: 1;
	transform: translate(-50%, 0);
}

.login-signin-btn {
	margin-inline-start: 3px;
}

.login-btn {
	min-height: 50px;
	padding-inline: 26px;
	border-radius: 19px;
}

.captchaContent {
	flex: 1;
}

.captchaBox {
	display: flex;
	justify-content: center;
	padding: 6px;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 18px;
	margin-top: 20px;
	color: var(--text-2);
	font-size: 14px;
	animation: rise 900ms var(--ease) 300ms both;
}

.hero-actions a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text);
	font-weight: 500;
}

.hero-actions a .ic {
	transition: transform var(--t-mid) var(--ease);
}

.hero-actions a:hover .ic {
	transform: translate(2px, -2px);
}

.hero-sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--text-3);
}

/* Product mock */
.mock {
	position: relative;
	width: min(1120px, calc(100% - 32px));
	margin: 64px auto 0;
	padding: 10px;
	border-radius: 28px 28px 0 0;
	background: linear-gradient(180deg, var(--line-2), transparent);
	animation: rise 1100ms var(--ease) 360ms both;
}

.mock::before {
	content: "";
	position: absolute;
	top: -46px;
	left: 12%;
	right: 12%;
	height: 120px;
	border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 66%, transparent), transparent);
	filter: blur(26px);
	z-index: -1;
}

.mock-window {
	position: relative;
	display: grid;
	grid-template-columns: 196px minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	min-height: 440px;
	max-height: 460px;
	border-radius: 20px 20px 0 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-bottom: 0;
	box-shadow: var(--sheen);
	overflow: hidden;
	mask-image: linear-gradient(to bottom, #000 72%, transparent);
	-webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
	text-align: start;
}

.mock-bar {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
}

.mock-bar i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--line-2);
}

.mock-bar i:nth-child(1) { background: #fb7185; }
.mock-bar i:nth-child(2) { background: #fbbf24; }
.mock-bar i:nth-child(3) { background: #34d399; }

.mock-url {
	margin-inline-start: 10px;
	padding: 3px 10px;
	border-radius: 7px;
	background: var(--surface-2);
	color: var(--text-3);
	font-family: var(--font-mono);
	font-size: 11.5px;
}

.mock-side {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 10px;
	border-inline-end: 1px solid var(--line);
}

.mock-nav {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 10px;
	color: var(--text-3);
	font-size: 13px;
}

.mock-nav.on {
	background: var(--accent-soft);
	color: var(--text);
}

.mock-nav.on .ic {
	color: var(--accent-text);
}

.mock-main {
	padding: 16px;
	min-width: 0;
}

.mock-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.mock-stat {
	padding: 12px 14px;
	border-radius: 14px;
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--line);
}

.mock-stat small {
	display: block;
	color: var(--text-3);
	font-size: 12px;
}

.mock-chart {
	display: block;
	width: 100%;
	height: 34px;
	margin-top: 8px;
	overflow: visible;
}

.mock-chart path {
	fill: none;
	stroke: var(--accent-text);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 300;
	stroke-dashoffset: 300;
	animation: draw 2s var(--ease) 800ms forwards;
}

.mock-chart.alt path {
	stroke: var(--cyan);
}

.mock-chart.mint path {
	stroke: var(--mint);
}

.mock-rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 12px;
}

.mock-row {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--line);
	color: var(--text);
	font-size: 13px;
}

.mock-row .ib {
	flex: none;
	width: 17px;
	height: 17px;
	color: var(--text-2);
}

.mock-row > span:first-of-type {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mock-id {
	color: var(--text-3);
	font-family: var(--font-mono);
	font-size: 12px;
}

/* Sections ----------------------------------------------------------------- */
.section {
	position: relative;
	padding: clamp(64px, 9vw, 120px) 0 0;
}

.section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 720px;
	margin: 0 auto clamp(30px, 4vw, 52px);
	text-align: center;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 11px;
	border-radius: var(--r-pill);
	background: var(--accent-soft);
	box-shadow: inset 0 0 0 1px var(--accent-line);
	color: var(--accent-text);
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.section-title {
	font-size: clamp(30px, 4.6vw, 54px);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -.038em;
}

.section-title em,
.cta-title em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -.02em;
	color: var(--accent-text);
}

/* Platform marquee */
.marquee {
	position: relative;
	margin-top: 54px;
	padding: 4px 0;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
	display: flex;
	width: max-content;
	gap: 10px;
	animation: marquee 46s linear infinite;
}

[dir="rtl"] .marquee-track {
	animation-name: marquee-rtl;
}

.marquee:hover .marquee-track {
	animation-play-state: paused;
}

@keyframes marquee {
	to {
		transform: translateX(calc(-50% - 5px));
	}
}

@keyframes marquee-rtl {
	to {
		transform: translateX(calc(50% + 5px));
	}
}

.social-item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 16px;
	border-radius: var(--r-pill);
	background: var(--surface);
	box-shadow: inset 0 0 0 1px var(--line);
	color: var(--text-2);
	font-size: 14px;
	font-weight: 450;
	white-space: nowrap;
	transition: color var(--t-fast), box-shadow var(--t-fast);
}

.social-item .ib {
	width: 17px;
	height: 17px;
}

.social-item:hover {
	color: var(--text);
	box-shadow: inset 0 0 0 1px var(--line-2);
}

/* Bento */
.bento {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 14px;
}

.bento-card {
	position: relative;
	grid-column: span 4;
	display: flex;
	flex-direction: column;
	min-height: 330px;
	padding: 12px;
	border-radius: var(--r-xl);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--sheen), var(--shadow-1);
	overflow: hidden;
	transition: border-color var(--t-mid), transform var(--t-mid) var(--ease);
}

.bento-card.w7 { grid-column: span 7; }
.bento-card.w5 { grid-column: span 5; }

.bento-card:hover {
	border-color: var(--line-2);
}

/* Pointer spotlight (positioned from script) */
.bento-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%);
	opacity: 0;
	transition: opacity var(--t-mid);
	pointer-events: none;
}

.bento-card:hover::after {
	opacity: 1;
}

.bento-visual {
	position: relative;
	flex: 1;
	min-height: 170px;
	border-radius: 20px;
	background: var(--bg-2);
	box-shadow: inset 0 0 0 1px var(--line);
	overflow: hidden;
}

.bento-copy {
	padding: 16px 12px 10px;
}

.feature-title {
	color: var(--text);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -.024em;
	line-height: 1.25;
}

.feature-text {
	margin-top: 6px;
	color: var(--text-2);
	font-size: 14px;
	line-height: 1.55;
}

/* Visual: pipeline */
.v-flow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	height: 100%;
	padding: 18px;
}

.v-node {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 18px;
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--line-2), var(--sheen);
	color: var(--text-2);
	font-size: 17px;
}

.v-node.on {
	color: #fff;
	background: linear-gradient(145deg, var(--accent), color-mix(in oklab, var(--accent) 50%, var(--cyan)));
	box-shadow: 0 0 34px color-mix(in oklab, var(--accent) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.v-node.done {
	color: var(--ok);
}

.v-line {
	position: relative;
	flex: 1;
	max-width: 110px;
	height: 2px;
	background: var(--line-2);
	overflow: hidden;
}

.v-line::after {
	content: "";
	position: absolute;
	inset-block: 0;
	width: 44%;
	background: linear-gradient(90deg, transparent, var(--accent-text), transparent);
	animation: flow 1.9s linear infinite;
}

.v-line:nth-of-type(2n)::after {
	animation-delay: .6s;
}

@keyframes flow {
	from {
		transform: translateX(-120%);
	}

	to {
		transform: translateX(300%);
	}
}

/* Visual: growth */
.v-growth {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.v-growth .area {
	fill: url(#g-area);
}

.v-growth .stroke {
	fill: none;
	stroke: url(#g-line);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 700;
	stroke-dashoffset: 700;
}

.is-in .v-growth .stroke,
html:not(.js-motion) .v-growth .stroke {
	animation: draw 2.2s var(--ease) 200ms forwards;
}

.v-grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(ellipse at 50% 60%, #000 28%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 28%, transparent 78%);
}

/* Visual: bars */
.v-bars {
	display: flex;
	align-items: flex-end;
	gap: 7px;
	height: 100%;
	padding: 18px 18px 0;
}

.v-bars i {
	flex: 1;
	height: var(--h);
	border-radius: 7px 7px 0 0;
	background: linear-gradient(180deg, var(--cyan), color-mix(in oklab, var(--accent) 70%, transparent));
	transform-origin: bottom;
	transform: scaleY(.12);
	transition: transform 1.1s var(--ease);
	transition-delay: calc(var(--i) * 60ms);
}

.is-in .v-bars i,
html:not(.js-motion) .v-bars i {
	transform: none;
}

/* Visual: chat */
.v-chat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 9px;
	height: 100%;
	padding: 18px;
}

.v-bubble {
	max-width: 78%;
	padding: 10px 13px;
	border-radius: 16px;
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--line);
}

.v-bubble.me {
	align-self: flex-end;
	background: var(--accent);
}

.v-bubble i {
	display: block;
	height: 7px;
	border-radius: 4px;
	background: var(--line-2);
}

.v-bubble.me i {
	background: rgba(255, 255, 255, .45);
}

.v-bubble i + i {
	width: 62%;
	margin-top: 6px;
}

.v-typing {
	display: inline-flex;
	gap: 4px;
	padding: 12px 14px;
	align-self: flex-start;
}

.v-typing i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--text-3);
	animation: pulse 1.2s var(--ease-soft) infinite;
}

.v-typing i:nth-child(2) { animation-delay: .15s; }
.v-typing i:nth-child(3) { animation-delay: .3s; }

/* Visual: orbit */
.v-orbit {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.v-ring {
	position: absolute;
	width: var(--s);
	height: var(--s);
	border-radius: 50%;
	border: 1px dashed var(--line-2);
	animation: spin var(--t) linear infinite;
}

.v-ring.rev {
	animation-direction: reverse;
}

.v-sat {
	position: absolute;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin: -17px;
	border-radius: 11px;
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--line-2);
	color: var(--text);
	animation: spin var(--t) linear infinite reverse;
}

.v-ring.rev .v-sat {
	animation-direction: normal;
}

.v-sat .ib {
	width: 16px;
	height: 16px;
}

.v-core {
	position: relative;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 17px;
	background: linear-gradient(145deg, var(--accent), var(--cyan));
	color: #fff;
	box-shadow: 0 0 44px color-mix(in oklab, var(--accent) 70%, transparent);
}

/* Steps */
.step-list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.step-box {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 20px;
	border-radius: var(--r-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--sheen);
	transition: border-color var(--t-mid), transform var(--t-mid) var(--ease);
}

.step-box:hover {
	border-color: var(--line-2);
	transform: translateY(-3px);
}

.step-number {
	position: absolute;
	top: 18px;
	inset-inline-end: 18px;
	color: var(--text-3);
	font-family: var(--font-mono);
	font-size: 12px;
}

.step-text {
	margin-top: 18px;
}

.step-text h3 {
	font-size: 17px;
	letter-spacing: -.022em;
}

.step-text p {
	margin-top: 6px;
	color: var(--text-2);
	font-size: 14px;
	line-height: 1.55;
}

/* FAQ */
.faq-list {
	max-width: 800px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.faq-item {
	border-radius: var(--r-md);
	background: var(--surface);
	border: 1px solid var(--line);
	transition: border-color var(--t-mid), background-color var(--t-mid);
}

.faq-item.active {
	border-color: var(--line-2);
	background: var(--surface-2);
}

.faq-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 17px 18px;
	color: var(--text);
	font-size: 15.5px;
	font-weight: 500;
	letter-spacing: -.015em;
	text-align: start;
	cursor: pointer;
}

.faq-icon {
	position: relative;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 8px;
	background: var(--surface-3);
	transition: transform var(--t-mid) var(--ease), background-color var(--t-mid);
}

.faq-icon::before,
.faq-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 1.5px;
	margin: -.75px -5px;
	border-radius: 2px;
	background: var(--text);
}

.faq-icon::after {
	transform: rotate(90deg);
}

.faq-item.active .faq-icon {
	transform: rotate(45deg);
	background: var(--accent-soft);
}

.faq-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 440ms var(--ease);
}

.faq-item.active .faq-body {
	grid-template-rows: 1fr;
}

.faq-content {
	min-height: 0;
	overflow: hidden;
	padding-inline: 18px;
	color: var(--text-2);
	font-size: 14.5px;
	line-height: 1.65;
	opacity: 0;
	transition: opacity var(--t-mid), padding var(--t-mid) var(--ease);
}

.faq-item.active .faq-content {
	padding-bottom: 18px;
	opacity: 1;
}

/* Closing CTA */
.cta-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: clamp(64px, 9vw, 120px);
	padding: clamp(46px, 7vw, 88px) 24px;
	border-radius: var(--r-xl);
	border: 1px solid var(--line);
	background: var(--surface);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}

.cta-card::before {
	content: "";
	position: absolute;
	inset: 34% -10% -60%;
	z-index: -1;
	background:
		radial-gradient(38% 60% at 34% 50%, color-mix(in oklab, var(--accent) 70%, transparent), transparent 72%),
		radial-gradient(34% 56% at 70% 50%, color-mix(in oklab, var(--cyan) 42%, transparent), transparent 72%);
	filter: blur(30px);
	animation: breathe 8s var(--ease-soft) infinite alternate;
}

@keyframes breathe {
	to {
		transform: scale(1.14) translateY(-4%);
	}
}

.cta-title {
	max-width: 760px;
	font-size: clamp(34px, 5.4vw, 64px);
	line-height: 1.02;
	letter-spacing: -.04em;
}

.cta-card p {
	max-width: 520px;
	color: var(--text-2);
	font-size: 16px;
}

.cta-card .btn {
	margin-top: 8px;
}

/* Responsive landing */
@media (max-width: 980px) {
	.main-header-content {
		grid-template-columns: 1fr auto;
		padding-inline: 16px 8px;
	}

	.main-header-link,
	.main-header-right .theme-toggle,
	.main-header-right .language-box {
		display: none;
	}

	.main-header-mobile-btn {
		display: grid;
	}

	.bento-card,
	.bento-card.w7,
	.bento-card.w5 {
		grid-column: span 6;
	}

	.step-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.login-box {
		width: min(480px, 100%);
	}

	.login-box-content {
		flex-direction: column;
		align-items: stretch;
	}

	.login-box-form {
		padding: 14px;
		border-radius: 33px;
	}

	.login-box-content {
		gap: 8px;
	}

	.login-btn-group {
		width: 100%;
	}

	.login-signin-btn {
		flex: 1;
	}

	.mock-window {
		grid-template-columns: minmax(0, 1fr);
	}

	.mock-side {
		display: none;
	}
}

@media (max-width: 640px) {
	.home-section {
		padding-top: 118px;
	}

	.bento-card,
	.bento-card.w7,
	.bento-card.w5 {
		grid-column: span 12;
		min-height: 300px;
	}

	.step-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.mock {
		margin-top: 44px;
	}

	.mock-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mock-stat:nth-child(3) {
		display: none;
	}

	.mock-id,
	.hero-sep {
		display: none;
	}

	.footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Instrument Serif has no Arabic, Cyrillic or CJK glyphs */
html:lang(ar) .home-title em,
html:lang(ru) .home-title em,
html:lang(zh) .home-title em,
html:lang(ko) .home-title em,
html:lang(ar) .cta-title em,
html:lang(ru) .cta-title em,
html:lang(zh) .cta-title em,
html:lang(ko) .cta-title em {
	font-family: var(--font);
	font-style: normal;
	font-weight: 600;
	letter-spacing: -.035em;
}

html:lang(ar) .home-title,
html:lang(ar) .section-title,
html:lang(ar) .cta-title {
	letter-spacing: 0;
	line-height: 1.2;
}

/* Platform logos ----------------------------------------------------------- */
.pf-instagram { --b: #e4405f; }
.pf-tiktok, .pf-x, .pf-threads { --b: var(--text); }
.pf-youtube { --b: #ff2d46; }
.pf-telegram { --b: #29a9eb; }
.pf-facebook { --b: #4b95f5; }
.pf-spotify { --b: #1ed760; }
.pf-twitch { --b: #a970ff; }
.pf-kick { --b: #53fc18; }
.pf-linkedin { --b: #4a9be0; }
.pf-whatsapp { --b: #25d366; }

html.light .pf-spotify { --b: #15a349; }
html.light .pf-kick { --b: #2a9d0c; }
html.light .pf-whatsapp { --b: #16a34a; }
html.light .pf-facebook { --b: #1877f2; }
html.light .pf-linkedin { --b: #0a66c2; }

.pf-tile {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	color: var(--b, var(--accent-text));
	background: color-mix(in oklab, var(--b, var(--accent)) 13%, var(--surface));
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--b, var(--accent)) 28%, transparent), var(--sheen);
	font-size: 18px;
	transition: transform var(--t-mid) var(--ease);
}

.social-item .ib {
	color: var(--b);
}

.hero-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 26px;
}

.hero-logos .pf-tile {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	font-size: 16px;
	animation: rise var(--t-slow) var(--ease) backwards;
}

.hero-logos .pf-tile:hover,
.who-card:hover .pf-tile,
.platform-card:hover .pf-tile {
	transform: translateY(-3px);
}

.section-lead {
	max-width: 640px;
	margin: 14px auto 0;
	color: var(--text-2);
	font-size: 16px;
	line-height: 1.65;
}

.section-cta {
	display: flex;
	justify-content: center;
	margin-top: 26px;
}

/* Platforms ---------------------------------------------------------------- */
.platform-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.platform-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 18px;
	border-radius: var(--r-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--sheen);
	transition: border-color var(--t-mid), background-color var(--t-mid), opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease);
}

.platform-card:hover {
	border-color: color-mix(in oklab, var(--b) 45%, transparent);
}

.platform-card h3 {
	color: var(--text);
	font-size: 16px;
	letter-spacing: -.02em;
}

.platform-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.platform-tags span {
	padding: 3px 8px;
	border-radius: var(--r-pill);
	background: var(--surface-2);
	color: var(--text-2);
	font-size: 12px;
	white-space: nowrap;
}

.platform-go {
	position: absolute;
	top: 18px;
	inset-inline-end: 18px;
	color: var(--text-3);
	transition: transform var(--t-mid) var(--ease), color var(--t-fast);
}

[dir="rtl"] .platform-go {
	scale: -1 1;
}

.platform-card:hover .platform-go,
.guide-item:hover .platform-go {
	color: var(--text);
	transform: translate(2px, -2px);
}

/* What is an SMM panel ----------------------------------------------------- */
.seo-split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(28px, 6vw, 80px);
	align-items: start;
}

.seo-side {
	position: sticky;
	top: 110px;
}

.seo-side .section-title {
	margin-top: 14px;
	text-align: start;
}

.seo-logos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

.seo-copy p {
	margin-bottom: 18px;
	color: var(--text-2);
	font-size: 16px;
	line-height: 1.75;
}

.seo-copy p:last-child {
	margin-bottom: 0;
}

.seo-copy .seo-promo {
	color: var(--text);
	font-size: clamp(19px, 2.2vw, 23px);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.4;
}

/* Who it is for ------------------------------------------------------------ */
.who-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.who-card {
	padding: 20px;
	border-radius: var(--r-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--sheen);
}

.who-logos {
	display: flex;
	margin-bottom: 16px;
}

.who-logos .pf-tile {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 2px solid var(--surface);
	font-size: 16px;
}

.who-logos .pf-tile + .pf-tile {
	margin-inline-start: -10px;
}

/* Panel tools -------------------------------------------------------------- */
.tool-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-radius: var(--r-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--sheen);
	overflow: hidden;
}

.tool-item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	border-inline-end: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.tool-item:nth-child(4n) {
	border-inline-end: 0;
}

.tool-item:nth-last-child(-n + 4) {
	border-bottom: 0;
}

.tool-item h3 {
	color: var(--text);
	font-size: 15px;
	letter-spacing: -.015em;
}

.tool-item p {
	margin-top: 5px;
	color: var(--text-2);
	font-size: 13.5px;
	line-height: 1.55;
}

/* Guides ------------------------------------------------------------------- */
.guide-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.guide-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 14px 42px 14px 14px;
	border-radius: var(--r-md);
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--text);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.35;
	transition: border-color var(--t-mid), opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease);
}

.guide-item:hover {
	border-color: var(--line-2);
}

.guide-item .platform-go {
	top: calc(50% - 9px);
	inset-inline-end: 14px;
}

.cta-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 22px;
}

.cta-logos .pf-tile {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	font-size: 15px;
}

@media (max-width: 980px) {
	.platform-grid,
	.who-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tool-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tool-item:nth-child(4n) {
		border-inline-end: 1px solid var(--line);
	}

	.tool-item:nth-child(2n) {
		border-inline-end: 0;
	}

	.tool-item:nth-last-child(-n + 4) {
		border-bottom: 1px solid var(--line);
	}

	.tool-item:nth-last-child(-n + 2) {
		border-bottom: 0;
	}

	.seo-split,
	.guide-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.seo-side {
		position: static;
	}
}

@media (max-width: 640px) {
	.platform-card {
		padding: 14px;
		gap: 10px;
	}

	.platform-card h3 {
		font-size: 14.5px;
	}

	.platform-tags span {
		font-size: 11.5px;
		padding: 2px 7px;
	}

	.platform-go {
		top: 14px;
		inset-inline-end: 14px;
	}

	.who-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.tool-item {
		padding: 16px;
	}

	.seo-copy p {
		font-size: 15.5px;
	}
}

/* ==========================================================================
   09. ElitSMM Journal — blog index built by script
   ========================================================================== */
#esj2026 {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: clamp(52px, 7vw, 92px);
	min-width: 0;
	color: var(--text-2);
}

#esj2026 [hidden] {
	display: none !important;
}

#esj2026 em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -.02em;
	color: var(--accent-text);
}

.esj-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-xl);
	border: 1px solid var(--line);
	background:
		radial-gradient(60% 90% at 86% 12%, var(--accent-soft), transparent 70%),
		radial-gradient(50% 80% at 70% 90%, color-mix(in oklab, var(--cyan) 12%, transparent), transparent 70%),
		var(--surface);
	box-shadow: var(--sheen), var(--shadow-1);
}

.esj-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	min-height: 440px;
}

.esj-hero-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(28px, 5vw, 60px);
}

.esj-eyebrow,
.esj-section-index,
.esj-minilabel,
.esj-cta-label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var(--text-3);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.esj-eyebrow-line {
	width: 22px;
	height: 1px;
	background: var(--line-2);
}

.esj-eyebrow-divider,
.esj-edition {
	color: var(--text-3);
}

.esj-hero h1 {
	margin: 26px 0 16px;
	font-size: clamp(44px, 6vw, 78px);
	line-height: 1;
	letter-spacing: -.045em;
}

.esj-hero-copy > p {
	max-width: 480px;
	font-size: 16px;
	line-height: 1.65;
}

.esj-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 26px;
}

.esj-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border-radius: var(--r-pill);
	background: var(--ink);
	color: var(--ink-text);
	font-size: 14px;
	font-weight: 550;
	transition: transform var(--t-mid) var(--ease);
}

.esj-primary:hover {
	transform: translateY(-2px);
}

.esj-secondary {
	color: var(--text);
	font-size: 14px;
	font-weight: 500;
}

.esj-hero-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 28px;
	color: var(--text-3);
	font-size: 12px;
}

.esj-live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mint);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--mint) 18%, transparent);
}

.esj-line-sep {
	width: 16px;
	height: 1px;
	background: var(--line-2);
}

.esj-hero-art {
	position: relative;
	overflow: hidden;
}

.esj-art-aura {
	position: absolute;
	inset: 12%;
	border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 50%, transparent), transparent);
	filter: blur(26px);
}

.esj-art-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 360px;
	height: 360px;
	margin: -180px;
	border-radius: 50%;
	border: 1px dashed var(--line-2);
	animation: spin 48s linear infinite;
}

.esj-art-ring-2 {
	width: 250px;
	height: 250px;
	margin: -125px;
	animation-direction: reverse;
	animation-duration: 34s;
}

.esj-art-core {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 130px;
	height: 130px;
	margin: -65px;
	border-radius: 38px;
	background: linear-gradient(145deg, var(--accent), var(--cyan));
	color: #fff;
	font-family: var(--font-serif);
	font-size: 76px;
	font-style: italic;
	box-shadow: 0 30px 70px -20px var(--accent);
}

.esj-art-pill {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	border-radius: var(--r-pill);
	background: var(--glass);
	border: 1px solid var(--line-2);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	color: var(--text);
	font-size: 11.5px;
	white-space: nowrap;
}

.esj-art-pill-top {
	top: 18%;
	inset-inline-start: 6%;
}

.esj-art-pill-bottom {
	bottom: 18%;
	inset-inline-end: 6%;
}

.esj-art-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent-text);
}

.esj-art-index {
	position: absolute;
	bottom: 18px;
	inset-inline-start: 22px;
	color: var(--text-3);
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: .1em;
}

.esj-section-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 14px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--line);
	color: var(--text-3);
	font-size: 13px;
}

.esj-section-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 24px;
}

.esj-section-heading h2 {
	margin-top: 10px;
	font-size: clamp(32px, 4.6vw, 54px);
	line-height: 1.04;
	letter-spacing: -.038em;
}

.esj-section-heading p {
	max-width: 400px;
}

.esj-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}

.esj-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.esj-filter {
	padding: 7px 13px;
	border-radius: var(--r-pill);
	background: var(--surface);
	box-shadow: inset 0 0 0 1px var(--line);
	color: var(--text-2);
	font-size: 13px;
	white-space: nowrap;
	transition: background-color var(--t-fast), color var(--t-fast);
}

.esj-filter:hover {
	color: var(--text);
}

.esj-filter[aria-pressed="true"] {
	background: var(--ink);
	color: var(--ink-text);
}

.esj-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 240px;
	margin: 0;
	padding: 0 13px;
	height: 40px;
	border-radius: var(--r-pill);
	background: var(--surface);
	box-shadow: inset 0 0 0 1px var(--line);
	transition: box-shadow var(--t-fast);
}

.esj-search:focus-within {
	box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft);
}

.esj-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--text);
	font-size: 14px;
}

.esj-search-icon {
	color: var(--text-3);
}

.esj-search-shortcut {
	color: var(--text-3);
	font-family: var(--font-mono);
	font-size: 11px;
}

.esj-result-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	color: var(--text-3);
	font-size: 12.5px;
}

.esj-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

#esj2026 .esj-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	grid-column: auto;
	padding: 10px 10px 16px;
	border-radius: var(--r-lg);
	overflow: hidden;
}

.esj-cover {
	position: relative;
	height: 176px;
	border-radius: 16px;
	background:
		radial-gradient(70% 90% at 80% 10%, color-mix(in oklab, var(--accent) 40%, transparent), transparent 70%),
		radial-gradient(60% 80% at 10% 100%, color-mix(in oklab, var(--cyan) 18%, transparent), transparent 70%),
		var(--surface-2);
	overflow: hidden;
}

.esj-cover-text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 13px 14px;
	color: var(--text-2);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .09em;
}

.esj-cover-mark {
	align-self: flex-end;
	color: var(--text);
	font-family: var(--font-serif);
	font-size: 54px;
	font-style: italic;
	font-weight: 400;
	line-height: 1;
}

.esj-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 13px 6px 8px;
}

.esj-category {
	color: var(--accent-text);
	font-size: 12.5px;
	font-weight: 500;
}

.esj-reading {
	color: var(--text-3);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .06em;
}

#esj2026 .esj-card .blog-title {
	padding-inline: 6px;
}

#esj2026 .esj-card .blog-text {
	padding: 7px 6px 0;
}

#esj2026 .esj-card > a.btn {
	align-self: flex-start;
	margin: 12px 6px 0;
	min-height: 36px;
	padding: 7px 14px;
	font-size: 13px;
	width: auto;
	display: inline-flex;
	--btn-bg: transparent;
	--btn-fg: var(--text);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--line-2);
}

#esj2026 .esj-card > a.btn:hover {
	background: var(--surface-3);
}

#esj2026 .esj-card-featured {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: auto auto 1fr auto;
	column-gap: 22px;
	padding: 12px;
}

#esj2026 .esj-card-featured .esj-cover {
	grid-row: 1 / -1;
	height: auto;
	min-height: 300px;
}

#esj2026 .esj-card-featured .esj-cover-mark {
	font-size: 110px;
}

#esj2026 .esj-card-featured .blog-title {
	font-size: clamp(22px, 2.8vw, 32px);
	letter-spacing: -.03em;
}

#esj2026 .esj-card-featured .blog-text {
	font-size: 15px;
}

.esj-empty {
	padding: 56px 16px;
	text-align: center;
}

.esj-empty-icon {
	font-size: 28px;
}

.esj-empty h3 {
	margin: 8px 0 4px;
}

.esj-reset {
	margin-top: 12px;
	color: var(--accent-text);
	font-weight: 500;
}

.esj-pagination .pagination {
	margin-top: 22px;
}

.esj-bottom-cta {
	position: relative;
	padding: clamp(32px, 6vw, 70px);
	border-radius: var(--r-xl);
	border: 1px solid var(--line);
	background:
		radial-gradient(60% 120% at 80% 100%, var(--accent-soft), transparent 70%),
		var(--surface);
	overflow: hidden;
}

.esj-bottom-cta h2 {
	margin: 12px 0 10px;
	font-size: clamp(34px, 5vw, 60px);
	line-height: 1.02;
	letter-spacing: -.04em;
}

.esj-bottom-cta p {
	max-width: 460px;
	margin-bottom: 14px;
}

.esj-bottom-cta a {
	display: inline-flex;
	gap: 8px;
	color: var(--text);
	font-weight: 550;
}

.esj-cta-light {
	display: none;
}

.esj-cta-shape {
	position: absolute;
	bottom: -56px;
	inset-inline-end: 24px;
	color: var(--line-2);
	font-family: var(--font-serif);
	font-size: 280px;
	font-style: italic;
	line-height: 1;
	pointer-events: none;
}

.esj-mini-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	color: var(--text-3);
	font-size: 12.5px;
}

.esj-animate {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

.esj-animate.esj-in-view {
	opacity: 1;
	transform: none;
}

@media (max-width: 980px) {
	.esj-hero-inner {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.esj-hero-art {
		display: none;
	}

	.esj-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#esj2026 .esj-card-featured {
		display: flex;
	}

	#esj2026 .esj-card-featured .esj-cover {
		height: 200px;
		min-height: 0;
	}
}

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

	.esj-filters {
		flex-wrap: nowrap;
		width: 100%;
		overflow: auto;
		scrollbar-width: none;
	}

	.esj-search {
		width: 100%;
	}

	.esj-search-shortcut,
	.esj-current-page {
		display: none;
	}
}

/* Support contact cards */
.contact-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 4px;
	animation: rise var(--t-slow) var(--ease) backwards;
}

.contact-item {
	position: relative;
	min-width: 0;
}

.contact-card {
	display: flex;
	align-items: center;
	gap: 13px;
	padding-block: 14px;
	padding-inline: 14px 58px;
	border-radius: var(--r-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--sheen);
	transition: border-color var(--t-mid), background-color var(--t-mid);
}

.contact-card:hover {
	background: var(--surface-2);
	border-color: color-mix(in oklab, var(--b, var(--accent)) 45%, transparent);
}

.contact-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.contact-text b {
	color: var(--text);
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: -.012em;
}

.contact-text span {
	color: var(--text-2);
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: -.02em;
	overflow-wrap: anywhere;
	text-align: start;
}

.contact-copy {
	position: absolute;
	top: calc(50% - 17px);
	inset-inline-end: 12px;
}

@media (max-width: 640px) {
	.contact-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.contact-card {
		padding-block: 11px;
		padding-inline: 11px 54px;
	}
}