@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
	/* === STARK LINK Brand Dark Theme === */

	/* Primary — Brand Indigo-Blue */
	--primary: #5B7CF6;
	--primary-light: #7B9CFF;
	--primary-dark: #4A6AE8;
	--primary-container: rgba(91, 124, 246, 0.15);
	--on-primary: #FFFFFF;
	--on-primary-container: #A8BEFF;

	/* Accent — Brand Cyan */
	--accent: #3DD9F5;
	--accent-light: #6AE6FF;
	--accent-dark: #25C8E8;
	--accent-container: rgba(61, 217, 245, 0.12);
	--on-accent: #0A1520;
	--on-accent-container: #7AECFF;

	/* Brand Gradient */
	--brand-gradient: linear-gradient(135deg, #3DD9F5 0%, #5B7CF6 50%, #8B5CF6 100%);
	--brand-gradient-soft: linear-gradient(135deg, rgba(61,217,245,0.15) 0%, rgba(91,124,246,0.15) 50%, rgba(139,92,246,0.15) 100%);
	--brand-cyan: #3DD9F5;
	--brand-purple: #8B5CF6;

	/* Background & Surfaces — Dark Navy */
	--bg: #0D0F1A;
	--surface: #141728;
	--surface-variant: #1C2040;
	--surface-elevated: #1E2448;
	--surface-container: #1C2040;
	--surface-container-high: #252848;

	/* Legacy compatibility */
	--surface-strong: var(--surface);
	--surface-soft: var(--surface-variant);

	/* Text Hierarchy — Light on Dark */
	--ink: #F0F2FF;
	--text-primary: #F0F2FF;
	--text-secondary: #8892BB;
	--text-tertiary: #505880;
	--text-disabled: #363B5A;
	--muted: var(--text-secondary);

	/* Borders & Dividers */
	--outline: rgba(255, 255, 255, 0.1);
	--outline-variant: rgba(255, 255, 255, 0.05);
	--line: var(--outline-variant);
	--line-strong: var(--outline);

	/* Legacy color mappings */
	--navy: #F0F2FF;
	--navy-soft: rgba(240, 242, 255, 0.06);
	--turquoise: #3DD9F5;
	--turquoise-soft: rgba(61, 217, 245, 0.12);
	--coral: #5B7CF6;
	--coral-soft: rgba(91, 124, 246, 0.15);

	/* Status Colors — Dark-optimised */
	--success: #34D399;
	--success-container: rgba(52, 211, 153, 0.12);
	--warning: #FBBF24;
	--warning-container: rgba(251, 191, 36, 0.12);
	--error: #F87171;
	--error-container: rgba(248, 113, 113, 0.12);
	--info: #5B7CF6;
	--info-container: rgba(91, 124, 246, 0.15);

	/* Shadows — Deep */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
	--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
	--shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.7);
	--shadow: var(--shadow-lg);
	--shadow-soft: var(--shadow-md);

	/* Border Radius */
	--radius-xs: 4px;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 20px;
	--radius-2xl: 24px;
	--radius-3xl: 28px;
	--radius-full: 9999px;

	/* Safe areas & Viewport */
	--safe-top: 0px;
	--safe-right: 0px;
	--safe-bottom: 0px;
	--safe-left: 0px;
	--tg-top-floor: 0px;
	--viewport-height: 100vh;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	background: var(--bg);
	color: var(--text-primary);
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
	letter-spacing: -0.011em;
}

button,
input,
textarea {
	font: inherit;
}

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

a {
	color: inherit;
	text-decoration: none;
}

svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* === Typography System === */
.display-large {
	font-size: clamp(45px, 8vw, 57px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.025em;
}

.display-medium {
	font-size: clamp(36px, 7vw, 45px);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.02em;
}

.display-small {
	font-size: clamp(30px, 6vw, 36px);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.015em;
}

.headline-large {
	font-size: clamp(28px, 5.5vw, 32px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.headline-medium {
	font-size: clamp(24px, 5vw, 28px);
	font-weight: 700;
	line-height: 1.29;
	letter-spacing: -0.008em;
}

.headline-small {
	font-size: clamp(20px, 4.5vw, 24px);
	font-weight: 700;
	line-height: 1.33;
	letter-spacing: -0.005em;
}

.title-large {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.27;
	letter-spacing: -0.01em;
}

.title-medium {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.008em;
}

.title-small {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.43;
	letter-spacing: -0.005em;
}

.body-large {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.011em;
}

.body-medium {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.43;
	letter-spacing: -0.011em;
}

.body-small {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.33;
	letter-spacing: -0.008em;
}

.label-large {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.43;
	letter-spacing: -0.005em;
}

.label-medium {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.33;
	letter-spacing: -0.003em;
}

.label-small {
	font-size: 11px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

.mini-app-body,
.mini-app-root {
	min-height: 100vh;
	min-height: var(--viewport-height);
}

.mini-app-root {
	padding-top: max(24px, env(safe-area-inset-top), var(--safe-top), var(--tg-top-floor));
	padding-right: max(14px, env(safe-area-inset-right), var(--safe-right));
	padding-bottom: calc(118px + max(14px, env(safe-area-inset-bottom), var(--safe-bottom)));
	padding-left: max(14px, env(safe-area-inset-left), var(--safe-left));
}

.mini-shell {
	width: 100%;
	max-width: 780px;
	margin: 0 auto;
}

.screen-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* === Topbar === */
.topbar {
	position: sticky;
	top: max(18px, env(safe-area-inset-top), var(--safe-top), var(--tg-top-floor));
	z-index: 15;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
	padding: 12px 20px;
	border-radius: var(--radius-xl);
	border: 1px solid var(--outline);
	background: rgba(248, 250, 252, 0.85);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	box-shadow: var(--shadow-sm);
}

.topbar__brand {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.topbar__caption {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.brand-mark {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-size: clamp(20px, 5vw, 24px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
}

.brand-mark__vpn {
	color: var(--primary);
}

.brand-mark__my {
	color: var(--accent);
}

.topbar__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* === Language Switch === */
.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.04);
}

.lang-switch__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 34px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: rgba(15, 23, 42, 0.4);
	transition:
		background 0.2s cubic-bezier(0.16, 1, 0.3, 1),
		color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.lang-switch__item.is-active {
	background: #FFFFFF;
	color: var(--primary);
	box-shadow:
		0 1px 3px rgba(15, 23, 42, 0.08),
		0 0 0 1px rgba(99, 102, 241, 0.12);
}

.lang-switch__item:active {
	transform: scale(0.96);
}

/* === Chips, Badges, Pills === */
.chip,
.status-badge,
.platform-pill,
.pill-button,
.host-chip,
.sheet-plan {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 38px;
	padding: 0 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.chip {
	background: rgba(15, 23, 42, 0.05);
	color: rgba(15, 23, 42, 0.7);
}

.chip--coral {
	background: var(--coral-soft);
	color: var(--coral);
}

.chip--status {
	background: rgba(15, 23, 42, 0.05);
	color: var(--text-secondary);
}

.chip--status.is-active {
	background: rgba(16, 185, 129, 0.1);
	color: #059669;
}

.chip__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(15, 23, 42, 0.05);
	transition:
		transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
		background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.icon-button svg {
	width: 18px;
	height: 18px;
}

.icon-button:active {
	transform: scale(0.97);
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.eyebrow--light {
	color: rgba(255, 255, 255, 0.6);
}

/* === Animation entry === */
.hero-panel,
.panel,
.feature-card,
.plan-card,
.profile-hero,
.hero-strip,
.trial-strip {
	animation: rise-in 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* === Hero Panel === */
.hero-panel,
.profile-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-3xl);
	box-shadow: var(--shadow-xl);
}

.hero-panel {
	padding: 24px;
	background: linear-gradient(145deg, #0B1433 0%, #132040 50%, #1A2D5A 100%);
	color: #ffffff;
	min-height: 280px;
}

.hero-panel__content,
.profile-hero__content {
	position: relative;
	z-index: 2;
}

.hero-panel__decor,
.profile-hero__decor {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.5;
}

.hero-panel__decor--coral,
.profile-hero__decor--coral {
	width: 230px;
	height: 230px;
	top: -88px;
	right: -78px;
	background: rgba(99, 102, 241, 0.5);
}

.hero-panel__decor--turquoise,
.profile-hero__decor--turquoise {
	width: 240px;
	height: 240px;
	bottom: -120px;
	left: -86px;
	background: rgba(16, 185, 129, 0.35);
}

/* === Shared Title Styles === */
.hero-panel__title,
.hero-strip__title,
.panel__title,
.sheet__title,
.profile-hero h1,
.feature-card h3,
.plan-card h3 {
	margin: 10px 0 0;
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.06;
}

.hero-panel__title {
	font-size: clamp(34px, 8vw, 52px);
	max-width: 11ch;
}

.hero-panel__lead {
	margin: 12px 0 0;
	max-width: 30ch;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.6);
}

.hero-panel__actions,
.action-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

/* === Metric Cards === */
.metric-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 22px;
}

.metric-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	min-height: 108px;
	padding: 18px;
	border-radius: var(--radius-2xl);
}

.metric-card span {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.7;
}

.metric-card strong {
	font-size: clamp(24px, 6vw, 34px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
}

.metric-card--coral {
	background: var(--primary);
	color: #ffffff;
}

.metric-card--turquoise {
	background: var(--accent);
	color: #ffffff;
}

.metric-card--navy {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(12px);
}

/* === Panel (Card Container) === */
.panel {
	padding: 22px;
	border-radius: var(--radius-2xl);
	background: #FFFFFF;
	border: 1px solid var(--outline);
	box-shadow: var(--shadow-soft);
}

.panel--spotlight {
	background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
	border: 1px solid rgba(99, 102, 241, 0.08);
}

.panel--empty {
	text-align: center;
	padding: 36px 22px;
}

.panel--connect-main {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.panel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.panel__title {
	font-size: clamp(24px, 5vw, 34px);
	color: var(--text-primary);
}

.panel__copy {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--muted);
}

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

/* === Connect Summary Grid === */
.connect-summary {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.connect-summary__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px;
	border-radius: var(--radius-lg);
	background: var(--surface-variant);
}

.connect-summary__item span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.connect-summary__item strong {
	font-size: clamp(18px, 4vw, 22px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--text-primary);
}

/* === Connect Steps === */
.connect-steps {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.connect-step {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: var(--radius-lg);
	background: var(--surface-variant);
}

.connect-step__index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--primary-container);
	font-size: 14px;
	font-weight: 800;
	color: var(--primary);
}

.connect-step__copy strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text-primary);
}

.connect-step__copy span {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--muted);
}

.connect-actions {
	margin-top: 2px;
}

/* === Profile Panel === */
.panel--profile-main,
.panel--profile-section {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.panel--profile-main {
	position: relative;
	overflow: hidden;
}

.panel--profile-main::before {
	content: '';
	position: absolute;
	left: 22px;
	right: 22px;
	top: 0;
	height: 3px;
	border-radius: 0 0 999px 999px;
	background: linear-gradient(90deg, var(--primary), var(--accent));
}

.panel--profile-main::after {
	content: '';
	position: absolute;
	width: 8px;
	height: 8px;
	right: 24px;
	top: 24px;
	border-radius: 50%;
	background: var(--accent);
	opacity: 0.8;
}

.profile-main {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.profile-main__identity {
	display: flex;
	align-items: center;
	gap: 12px;
}

.profile-main__meta {
	flex: 1;
	min-width: 0;
}

.panel--profile-main .avatar {
	width: 52px;
	height: 52px;
	font-size: 18px;
	background: linear-gradient(135deg, var(--primary), var(--accent));
	color: #fff;
	box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25);
	flex-shrink: 0;
}

.profile-main__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--text-primary);
}

.profile-main__subtitle {
	margin: 3px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--muted);
}

/* === Profile Summary === */
.profile-summary {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-shrink: 0;
}

.profile-summary__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 12px;
	border-radius: var(--radius-md);
	background: var(--surface-variant);
	text-align: center;
	min-width: 64px;
}

.profile-summary__item span {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.profile-summary__item strong {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--text-primary);
}

.profile-summary__item--status.is-inactive {
	background: rgba(239, 68, 68, 0.06);
	border: 1px solid rgba(239, 68, 68, 0.08);
}

.profile-summary__item--status.is-active {
	background: rgba(16, 185, 129, 0.08);
	border: 1px solid rgba(16, 185, 129, 0.1);
}

.profile-actions {
	margin-top: 2px;
}

/* === Profile Status Row === */
.profile-status-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.profile-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: var(--radius-full);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.profile-status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}

.profile-status-pill.is-active {
	background: rgba(16, 185, 129, 0.1);
	color: #059669;
}

.profile-status-pill.is-active .profile-status-dot {
	background: #10B981;
}

.profile-status-pill.is-inactive {
	background: rgba(239, 68, 68, 0.07);
	color: #DC2626;
}

.profile-status-pill.is-inactive .profile-status-dot {
	background: #EF4444;
}

.profile-expiry-pill {
	padding: 6px 14px;
	border-radius: var(--radius-full);
	background: var(--surface-variant);
	border: 1px solid var(--outline);
	font-size: 13px;
	font-weight: 500;
	color: var(--text-secondary);
}

/* === Guide Card === */
.guide-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 18px;
	border-radius: var(--radius-2xl);
	text-align: left;
	background: #FFFFFF;
	border: 1px solid var(--outline);
	box-shadow: var(--shadow-soft);
	position: relative;
	overflow: hidden;
}

.guide-card::before {
	content: '';
	position: absolute;
	left: 18px;
	right: 18px;
	top: 0;
	height: 3px;
	border-radius: 0 0 999px 999px;
	background: linear-gradient(90deg, var(--primary), var(--accent));
}

.guide-card__copy span {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.guide-card__copy strong {
	display: block;
	margin-top: 8px;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.02;
	color: var(--text-primary);
}

.guide-card__copy p {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-secondary);
}

.guide-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	flex-shrink: 0;
	background: var(--primary-container);
	color: var(--primary);
}

.guide-card__icon svg {
	width: 18px;
	height: 18px;
}

/* === Referral Balance === */
.referral-balance {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.referral-balance strong {
	font-size: clamp(34px, 8vw, 46px);
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 1;
	color: var(--text-primary);
}

.referral-balance span {
	font-size: 15px;
	line-height: 1.5;
	color: var(--muted);
}

.referral-inline-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--text-secondary);
}

.referral-inline-meta span:last-child {
	color: var(--primary);
}

/* === Info Grid / Profile Stats === */
.info-grid,
.profile-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.info-card,
.profile-stat {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 18px;
	border-radius: var(--radius-lg);
}

.info-card span,
.profile-stat span {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.6;
}

.info-card strong,
.profile-stat strong {
	font-size: clamp(18px, 4vw, 24px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.2;
}

.info-card--muted {
	background: var(--surface-variant);
}

.info-card--coral {
	background: var(--primary-container);
	color: var(--text-primary);
}

/* === Shortcut / Method Grid === */
.shortcut-grid,
.empty-actions,
.method-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.shortcut-card,
.method-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 14px;
	min-height: 146px;
	padding: 18px;
	border-radius: var(--radius-3xl);
	transition:
		transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.shortcut-card:active,
.method-card:active,
.plan-card:active,
.key-row:active,
.list-action:active,
.plan-banner:active,
.trial-strip:active {
	transform: scale(0.985);
}

.shortcut-card__icon,
.method-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.18);
}

.shortcut-card__icon svg,
.method-card__icon svg {
	width: 19px;
	height: 19px;
}

.shortcut-card strong,
.method-card strong {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.shortcut-card span,
.method-card span {
	font-size: 14px;
	line-height: 1.45;
	opacity: 0.7;
}

.shortcut-card--coral,
.method-card--coral {
	background: var(--primary);
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(99, 102, 241, 0.18);
}

.shortcut-card--turquoise,
.method-card--turquoise {
	background: var(--accent);
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(16, 185, 129, 0.18);
}

.shortcut-card--navy,
.method-card--navy {
	background: var(--navy);
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
}

.shortcut-card--light {
	background: var(--surface-variant);
	color: var(--text-primary);
}

/* === Platform Row === */
.platform-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

/* === Profile Modules === */
.profile-modules {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 16px;
}

.module-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 18px;
	border-radius: var(--radius-3xl);
	background: #FFFFFF;
	border: 1px solid var(--outline);
}

.module-card--referral {
	background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
	border: 1px solid rgba(99, 102, 241, 0.08);
}

.module-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.module-card__title {
	margin: 8px 0 0;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.05;
	color: var(--text-primary);
}

.platform-pill,
.pill-button {
	background: rgba(15, 23, 42, 0.05);
	color: var(--text-primary);
}

/* === Device Tabs === */
.device-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.device-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--surface-variant);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-secondary);
	transition:
		background 0.2s cubic-bezier(0.16, 1, 0.3, 1),
		color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.device-tab.is-active {
	background: var(--primary);
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

/* === Device Card === */
.device-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	padding: 18px;
	border-radius: var(--radius-3xl);
	text-align: left;
	box-shadow: var(--shadow-soft);
}

.device-card__top,
.device-card__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.device-card__top span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.7;
}

.device-card__icon,
.device-card__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.18);
}

.device-card__icon svg,
.device-card__arrow svg {
	width: 18px;
	height: 18px;
}

.device-card__body strong {
	display: block;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
}

.device-card__body p {
	margin: 10px 0 0;
	max-width: 24ch;
	font-size: 14px;
	line-height: 1.55;
	opacity: 0.75;
}

.device-card__cta span {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.device-card--coral {
	background: var(--primary);
	color: #ffffff;
}

.device-card--navy {
	background: var(--navy);
	color: #ffffff;
}

.device-card--turquoise {
	background: var(--accent);
	color: #ffffff;
}

.device-card--turquoise .device-card__icon,
.device-card--turquoise .device-card__arrow {
	background: rgba(255, 255, 255, 0.18);
}

/* === Referral Amount === */
.referral-amount {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.referral-amount strong {
	font-size: clamp(30px, 6vw, 42px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--text-primary);
}

.referral-amount span {
	font-size: 14px;
	line-height: 1.55;
	color: var(--muted);
}

/* === Progress Track === */
.progress-track {
	position: relative;
	height: 10px;
	border-radius: 999px;
	background: var(--surface-variant);
	overflow: hidden;
}

.progress-bar {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	min-width: 10px;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--primary), var(--accent));
}

/* === Referral Meta === */
.referral-meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.referral-meta__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	border-radius: var(--radius-lg);
	background: var(--surface-variant);
}

.referral-meta__item span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.referral-meta__item strong {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--text-primary);
}

.pill-button svg {
	width: 16px;
	height: 16px;
}

.pill-button--action {
	width: fit-content;
}

.panel-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
}

/* === Feature Grid === */
.feature-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.feature-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	min-height: 176px;
	padding: 22px;
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow-soft);
}

.feature-card h3 {
	font-size: 28px;
	color: inherit;
}

.feature-card p {
	margin: 0;
	max-width: 24ch;
	font-size: 15px;
	line-height: 1.6;
	color: inherit;
	opacity: 0.75;
}

.feature-card--coral {
	background: var(--primary);
	color: #ffffff;
}

.feature-card--navy {
	background: var(--navy);
	color: #ffffff;
}

.feature-card--turquoise {
	background: var(--accent);
	color: #ffffff;
}

/* === Plan Banner / Trial Strip / List Action === */
.plan-banner,
.trial-strip,
.list-action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 16px 18px;
	border-radius: var(--radius-xl);
}

.plan-banner {
	background: var(--surface-variant);
	border: 1px solid var(--outline);
}

.plan-banner span,
.trial-strip span {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.list-action span {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 220px;
}

.list-action--danger strong { color: #ff5a5a; }
.list-action--danger:active { background: rgba(255,90,90,.08); }

.plan-banner strong,
.trial-strip strong,
.plan-banner__side strong {
	display: block;
	margin-top: 6px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--text-primary);
}

.list-action strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--text-primary);
}

.plan-banner__side {
	text-align: right;
}

.plan-banner__side em {
	font-style: normal;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.hero-strip {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 2px 2px;
}

.hero-strip__title {
	font-size: clamp(34px, 8vw, 50px);
	color: var(--text-primary);
	max-width: 11ch;
}

.hero-strip__price {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	padding: 18px 20px;
	border-radius: var(--radius-3xl);
	background: #FFFFFF;
	border: 1px solid var(--outline);
	box-shadow: var(--shadow-soft);
}

.hero-strip__price span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.hero-strip__price strong {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.03em;
}

/* === Trial Strip === */
.trial-strip {
	margin-top: 4px;
	background: var(--accent);
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(16, 185, 129, 0.15);
}

.trial-strip span,
.trial-strip strong {
	color: #ffffff;
}

.trial-strip__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 112px;
	height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
	font-size: 13px;
	font-weight: 700;
}

/* === Host Strip === */
.host-strip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: none;
}

.host-strip::-webkit-scrollbar {
	display: none;
}

.host-chip {
	flex-shrink: 0;
	background: #FFFFFF;
	border: 1px solid var(--outline);
	color: var(--text-secondary);
}

.host-chip.is-active {
	background: var(--primary);
	color: #ffffff;
	border-color: var(--primary);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

/* === Pricing Trust === */
.pricing-trust {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.pricing-trust__item,
.pricing-summary {
	background: #FFFFFF;
	border: 1px solid var(--outline);
	box-shadow: var(--shadow-soft);
}

.pricing-trust__item {
	padding: 16px 18px;
	border-radius: var(--radius-2xl);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--text-secondary);
}

.pricing-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 20px;
	border-radius: var(--radius-3xl);
}

.pricing-summary__copy {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pricing-summary__copy strong,
.pricing-summary__badge strong {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--text-primary);
}

.pricing-summary__copy span,
.pricing-summary__badge span {
	font-size: 13px;
	line-height: 1.45;
	color: var(--muted);
}

.pricing-summary__badge {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	min-width: 150px;
	padding: 16px 18px;
	border-radius: var(--radius-lg);
	background: var(--surface-variant);
}

/* === Plan Grid === */
.plan-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.plan-grid--premium {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
}

.plan-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	min-height: 222px;
	padding: 22px;
	border-radius: var(--radius-2xl);
	text-align: left;
	box-shadow: var(--shadow-soft);
}

.plan-card--coral {
	background: var(--primary);
	color: #ffffff;
}

.plan-card--navy {
	background: var(--navy);
	color: #ffffff;
}

.plan-card--turquoise {
	background: var(--accent);
	color: #ffffff;
}

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

.plan-card__label {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.65;
}

.plan-card h3 {
	font-size: clamp(28px, 6vw, 36px);
	color: inherit;
}

.plan-card__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 72px;
	min-height: 38px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
	font-size: 12px;
	font-weight: 700;
}

.plan-card--turquoise .plan-card__badge {
	background: rgba(255, 255, 255, 0.2);
}

.plan-card__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}

.plan-card__foot strong {
	font-size: clamp(26px, 6vw, 36px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
}

.plan-card__foot span {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* === Product Plan Card === */
.plan-card--product {
	position: relative;
	min-height: 348px;
	padding: 20px;
	border-radius: 28px;
	background: #FFFFFF;
	border: 1px solid var(--outline);
	box-shadow: var(--shadow-md);
	color: var(--text-primary);
	overflow: hidden;
}

.plan-card--product::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.06), transparent 40%),
		radial-gradient(circle at 0% 100%, rgba(16, 185, 129, 0.05), transparent 40%);
	pointer-events: none;
}

.plan-card--product > * {
	position: relative;
	z-index: 1;
}

.plan-card--plain {
	background: #FFFFFF;
}

.plan-card--premium {
	background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
	border: 1px solid rgba(99, 102, 241, 0.08);
}

.plan-card--recommended {
	background: linear-gradient(145deg, #0F172A 0%, #1E293B 100%);
	color: #ffffff;
	border: none;
	box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15);
}

.plan-card--recommended::before {
	background:
		radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.25), transparent 35%),
		radial-gradient(circle at 0% 100%, rgba(16, 185, 129, 0.15), transparent 35%);
}

.plan-card__topline,
.plan-card__pricing,
.plan-card__footer {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.plan-card__eyebrow,
.plan-card__tag {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.plan-card__eyebrow {
	background: rgba(15, 23, 42, 0.05);
	color: var(--text-secondary);
}

.plan-card__tag {
	background: rgba(16, 185, 129, 0.1);
	color: #059669;
}

.plan-card--recommended .plan-card__eyebrow {
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.6);
}

.plan-card--recommended .plan-card__tag {
	background: rgba(99, 102, 241, 0.2);
	color: #C7D2FE;
}

.plan-card__headline h3 {
	margin: 14px 0 0;
	font-size: clamp(30px, 6vw, 40px);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.02;
	color: inherit;
}

.plan-card__headline p {
	margin: 10px 0 0;
	max-width: 24ch;
	font-size: 14px;
	line-height: 1.55;
	color: inherit;
	opacity: 0.6;
}

.plan-card__pricing {
	align-items: flex-end;
	padding-top: 6px;
}

.plan-card__pricing strong {
	display: block;
	font-size: clamp(32px, 7vw, 42px);
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 1;
}

.plan-card__pricing > div > span,
.plan-card__price-note span {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.45;
	color: inherit;
	opacity: 0.5;
}

.plan-card__price-note {
	text-align: right;
}

.plan-card__price-note em {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.04);
	font-style: normal;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: inherit;
}

.plan-card--recommended .plan-card__price-note em {
	background: rgba(255, 255, 255, 0.1);
}

.plan-card__benefits {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 4px;
}

.plan-card__benefit {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	line-height: 1.45;
	color: inherit;
}

.plan-card__benefit-dot {
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.4;
}

.plan-card__footer {
	align-items: center;
	padding-top: 8px;
	margin-top: auto;
}

.plan-card__footer span,
.plan-card__footer em {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-style: normal;
}

.plan-card__footer span {
	opacity: 0.5;
}

.plan-card__footer em {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 14px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.05);
}

.plan-card--recommended .plan-card__footer em {
	background: rgba(255, 255, 255, 0.1);
}

/* === Plans Overview === */
.plans-overview {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	padding: 4px 2px 2px;
}

.plans-overview__title {
	margin: 10px 0 0;
	font-size: clamp(34px, 8vw, 50px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.02;
	color: var(--text-primary);
	max-width: 10ch;
}

.plans-overview__copy {
	margin: 12px 0 0;
	max-width: 32ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--muted);
}

.plans-overview__price {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	padding: 18px 20px;
	border-radius: var(--radius-3xl);
	background: #FFFFFF;
	border: 1px solid var(--outline);
	box-shadow: var(--shadow-soft);
}

.plans-overview__price span,
.plan-facts-panel__item span,
.plan-location-chip,
.subscription-panel__caption,
.subscription-panel__meta span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.plans-overview__price span {
	color: var(--text-tertiary);
}

.plans-overview__price strong {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--text-primary);
}

/* === Plan Single Shell === */
.plan-single-shell {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: #FFFFFF;
}

.plan-location-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--surface-variant);
	color: var(--text-secondary);
}

/* === Duration Switch === */
.duration-switch {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	padding: 6px;
	border-radius: var(--radius-lg);
	background: var(--surface-variant);
	border: 1px solid var(--outline);
}

.duration-switch__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 12px;
	border-radius: var(--radius-md);
	color: var(--text-secondary);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition:
		transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
		background 0.2s cubic-bezier(0.16, 1, 0.3, 1),
		color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.duration-switch__item.is-active {
	background: var(--primary);
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

/* === Subscription Panel === */
.subscription-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
	padding: 24px;
	border-radius: 28px;
	text-align: left;
	color: var(--text-primary);
	background: #FFFFFF;
	border: 1px solid var(--outline);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.subscription-panel::before {
	content: '';
	position: absolute;
	left: 24px;
	right: 24px;
	top: 0;
	height: 3px;
	border-radius: 0 0 999px 999px;
	background: linear-gradient(90deg, var(--primary), var(--accent));
	pointer-events: none;
}

.subscription-panel::after {
	content: '';
	position: absolute;
	width: 8px;
	height: 8px;
	right: 28px;
	top: 28px;
	border-radius: 50%;
	background: var(--accent);
	opacity: 0.7;
}

.subscription-panel > * {
	position: relative;
	z-index: 1;
}

.subscription-panel__pricing {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.subscription-panel__amount {
	display: block;
	font-size: clamp(54px, 12vw, 88px);
	font-weight: 800;
	letter-spacing: -0.06em;
	line-height: 0.92;
	color: var(--text-primary);
}

.subscription-panel__term {
	display: block;
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--muted);
}

.subscription-panel__monthly {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 42px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--primary-container);
	border: 1px solid rgba(99, 102, 241, 0.1);
	color: var(--primary-dark);
}

.subscription-panel__monthly span,
.subscription-panel__monthly em {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-style: normal;
}

.subscription-panel__context {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--text-secondary);
}

.subscription-panel__context span {
	white-space: nowrap;
}

.subscription-panel__context-item--accent {
	color: var(--primary);
	position: relative;
	padding-left: 14px;
}

.subscription-panel__context-item--accent::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	transform: translateY(-50%);
}

.subscription-panel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 0 20px;
	border-radius: var(--radius-lg);
	background: var(--primary);
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(99, 102, 241, 0.28);
}

.subscription-panel__button span {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* === Profile Hero === */
.profile-hero {
	padding: 24px;
	background: linear-gradient(145deg, #0B1433 0%, #132040 50%, #1A2D5A 100%);
	color: #ffffff;
}

.profile-head {
	display: flex;
	align-items: center;
	gap: 16px;
}

.avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: var(--radius-2xl);
	background: rgba(255, 255, 255, 0.1);
	font-size: 24px;
	font-weight: 800;
	color: #ffffff;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

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

.profile-head__meta {
	min-width: 0;
}

.profile-hero h1 {
	font-size: clamp(28px, 7vw, 42px);
	color: #ffffff;
}

.profile-hero p {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
}

.profile-stats {
	margin-top: 24px;
}

.profile-stat {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(12px);
}

/* === Status Badge === */
.status-badge {
	background: rgba(15, 23, 42, 0.05);
	color: var(--text-secondary);
}

.status-badge--navy {
	background: var(--navy);
	color: #ffffff;
}

.status-badge--light {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.status-badge--active {
	background: rgba(16, 185, 129, 0.1);
	color: #059669;
}

.status-badge--muted {
	background: rgba(15, 23, 42, 0.05);
	color: var(--text-secondary);
}

/* === Key List / Stack Actions === */
.key-list,
.stack-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.key-row,
.list-action {
	border-radius: var(--radius-lg);
	background: var(--surface-variant);
}

.key-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 16px 18px;
	text-align: left;
}

.key-row__main strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text-primary);
}

.key-row__main span {
	display: block;
	margin-top: 5px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--muted);
}

.list-action__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-md);
	background: rgba(15, 23, 42, 0.05);
	flex-shrink: 0;
}

.list-action__icon svg {
	width: 18px;
	height: 18px;
}

/* === Note / Notice === */
.note-card,
.inline-note,
.notice {
	padding: 16px 18px;
	border-radius: var(--radius-lg);
}

.note-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--surface-variant);
}

.note-card strong {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.note-card span,
.inline-note,
.notice {
	font-size: 14px;
	line-height: 1.6;
	color: var(--muted);
}

.notice--error {
	background: rgba(239, 68, 68, 0.06);
	color: #DC2626;
}

.notice--expiry {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border: 1px solid rgba(15, 23, 42, 0.06);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}

.notice--warning {
	background: rgba(245, 158, 11, 0.08);
	color: var(--ink);
}

.notice--expired {
	background: rgba(255, 122, 69, 0.1);
	color: var(--ink);
}

.notice__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.notice__body strong {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.notice__body span {
	color: var(--muted);
}

.notice__action {
	flex-shrink: 0;
	min-height: 48px;
	padding: 0 18px;
}

/* === Buttons === */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 20px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	transition:
		transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
		background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.button:active {
	transform: scale(0.985);
}

.button svg {
	width: 18px;
	height: 18px;
}

.button--coral {
	background: var(--primary);
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(99, 102, 241, 0.28);
}

.button--dark {
	background: var(--navy);
	color: #ffffff;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.button--ghost {
	background: rgba(15, 23, 42, 0.05);
	color: var(--text-primary);
}

.button--ghost-light {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.button--block {
	width: 100%;
}

/* === Bottom Navigation === */
.bottom-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(14px + max(0px, env(safe-area-inset-bottom), var(--safe-bottom)));
	z-index: 22;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	width: min(780px, calc(100vw - 28px));
	margin: 0 auto;
	padding: 8px;
	border-radius: var(--radius-3xl);
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid var(--outline);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
	backdrop-filter: blur(20px);
}

.bottom-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 62px;
	border-radius: var(--radius-lg);
	color: var(--text-tertiary);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition:
		transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
		background 0.2s cubic-bezier(0.16, 1, 0.3, 1),
		color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.bottom-nav__item.is-active {
	background: var(--primary);
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.bottom-nav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
}

.bottom-nav__label {
	line-height: 1;
}

/* === Sheet (Bottom Sheet Modal) === */
.sheet-backdrop {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: rgba(15, 23, 42, 0.4);
	backdrop-filter: blur(4px);
}

.sheet {
	position: fixed;
	left: 50%;
	bottom: 0;
	z-index: 41;
	width: min(780px, 100%);
	max-height: min(88vh, calc(var(--viewport-height) - 32px));
	padding:
		22px
		18px
		calc(22px + max(16px, env(safe-area-inset-bottom), var(--safe-bottom)))
		18px;
	overflow-y: auto;
	border-radius: 28px 28px 0 0;
	background: #FFFFFF;
	box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.1);
	transform: translateX(-50%);
}

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

.sheet__title {
	font-size: clamp(28px, 7vw, 40px);
	color: var(--text-primary);
}

.sheet__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--surface-variant);
	font-size: 28px;
	line-height: 1;
}

.sheet-banner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
	padding: 20px;
	border-radius: var(--radius-3xl);
	background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
	color: #ffffff;
}

.sheet-banner span {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.sheet-banner strong {
	display: block;
	margin-top: 8px;
	font-size: clamp(26px, 6vw, 34px);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
}

.sheet-plan-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 16px;
}

.sheet-plan {
	flex-direction: column;
	align-items: flex-start;
	min-height: 116px;
	padding: 16px;
	border-radius: var(--radius-2xl);
	background: var(--surface-variant);
	color: var(--text-primary);
}

.sheet-plan strong {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.sheet-plan span,
.sheet-plan em {
	font-size: 13px;
	line-height: 1.4;
	font-style: normal;
	color: var(--muted);
}

.sheet-plan.is-selected {
	background: var(--primary);
	color: #ffffff;
}

.sheet-plan.is-selected span,
.sheet-plan.is-selected em {
	color: rgba(255, 255, 255, 0.7);
}

.client-sheet__note {
	margin-top: 18px;
}

.client-sheet__copyhint {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding: 0 2px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--muted);
}

.client-sheet__copyhint svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.client-app-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 16px;
}

.client-app-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 18px 18px;
	border-radius: var(--radius-xl);
	background: #FFFFFF;
	border: 1px solid var(--outline);
	text-align: left;
	box-shadow: var(--shadow-soft);
}

.client-app-button.is-selected {
	border-color: rgba(255, 127, 80, 0.3);
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.client-app-button__main strong {
	display: block;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--text-primary);
}

.client-app-button__main span {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--muted);
}

.client-app-button__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 94px;
	height: 42px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--coral);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	flex-shrink: 0;
}

.client-sheet__actions {
	margin-top: 16px;
}

.list-action--soft {
	background: #FFFFFF;
	border: 1px solid var(--outline);
	box-shadow: none;
}

/* === Input Field === */
.input-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}

.input-field span {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.input-field input {
	width: 100%;
	height: 58px;
	padding: 0 18px;
	border: 1px solid var(--outline);
	border-radius: var(--radius-lg);
	background: var(--surface-variant);
	color: var(--text-primary);
	outline: none;
}

.input-field input:focus {
	border-color: rgba(99, 102, 241, 0.5);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.method-grid {
	margin-top: 16px;
}

/* === Sheet Key Layout === */
.sheet-key-layout {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 18px;
}

.qr-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	border-radius: 28px;
	background: var(--surface-variant);
}

.qr-panel img {
	display: block;
	width: 100%;
	max-width: 260px;
	border-radius: var(--radius-lg);
	background: #ffffff;
	box-shadow: var(--shadow-md);
}

.code-box {
	padding: 16px 18px;
	border-radius: var(--radius-lg);
	background: var(--surface-variant);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
		'Courier New', monospace;
	font-size: 13px;
	line-height: 1.65;
	color: var(--text-primary);
	word-break: break-all;
}

/* === Toast === */
.toast {
	position: fixed;
	left: 50%;
	bottom: calc(98px + max(16px, env(safe-area-inset-bottom), var(--safe-bottom)));
	z-index: 50;
	transform: translateX(-50%);
	max-width: calc(100vw - 28px);
	padding: 14px 20px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.88);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.3);
	white-space: nowrap;
}

/* === Loader / Fallback === */
.mini-app-loader,
.mini-app-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(var(--viewport-height) - 32px);
}

.mini-app-loader__card,
.fallback-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: min(420px, 100%);
	padding: 28px;
	border-radius: var(--radius-2xl);
	background: #FFFFFF;
	border: 1px solid var(--outline);
	box-shadow: var(--shadow-lg);
	text-align: center;
}

.fallback-card h1 {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.08;
}

.fallback-card p,
.mini-app-loader__card p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--muted);
}

.mini-app-loader-mark {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--primary);
}

/* === Busy Overlay === */
.busy-overlay {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(15, 23, 42, 0.12);
	backdrop-filter: blur(4px);
}

.busy-overlay__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 22px 24px;
	border-radius: var(--radius-3xl);
	background: #FFFFFF;
	box-shadow: var(--shadow-xl);
	font-size: 14px;
	font-weight: 700;
	color: var(--text-primary);
}

.busy-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid rgba(15, 23, 42, 0.08);
	border-top-color: var(--primary);
	border-radius: 50%;
	animation: spin 0.85s linear infinite;
}

/* === Animations === */
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes rise-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

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

/* === Desktop === */
@media (min-width: 720px) {
	.feature-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

	.subscription-facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sheet-key-layout .info-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* === Mobile === */
@media (max-width: 719px) {
	.pricing-trust,
	.info-grid,
	.connect-summary,
	.profile-stats,
	.profile-modules,
	.shortcut-grid,
	.empty-actions,
	.method-grid,
	.sheet-plan-grid,
	.referral-meta,
	.subscription-facts,
	.plan-facts-panel {
		grid-template-columns: 1fr;
	}

	.metric-row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.metric-card {
		min-height: 88px;
		padding: 14px;
		border-radius: var(--radius-2xl);
	}

	.metric-card span {
		font-size: 10px;
		letter-spacing: 0.08em;
	}

	.metric-card strong {
		font-size: clamp(18px, 4.8vw, 24px);
	}

	.pricing-summary {
		flex-direction: column;
		align-items: flex-start;
	}

	.pricing-summary__badge {
		align-items: flex-start;
		width: 100%;
	}

	.plan-grid--premium {
		grid-template-columns: 1fr;
	}

	.plans-overview {
		flex-direction: column;
		align-items: flex-start;
	}

	.plans-overview__price {
		align-items: flex-start;
	}

	.notice--expiry {
		flex-direction: column;
		align-items: stretch;
	}

	.notice__action {
		width: 100%;
	}
}

@media (max-width: 560px) {
	.mini-app-root {
		padding-left: max(12px, env(safe-area-inset-left), var(--safe-left));
		padding-right: max(12px, env(safe-area-inset-right), var(--safe-right));
	}

	.topbar {
		padding: 12px 14px;
	}

	.topbar__meta {
		gap: 6px;
	}

	.lang-switch {
		padding: 3px;
	}

	.lang-switch__item {
		min-width: 34px;
		height: 32px;
		padding: 0 8px;
		font-size: 10px;
	}

	.chip--status {
		display: none;
	}

	.hero-panel,
	.profile-hero,
	.panel {
		padding: 18px;
		border-radius: var(--radius-3xl);
	}

	.hero-panel__title,
	.hero-strip__title,
	.plans-overview__title {
		max-width: none;
	}

	.hero-strip {
		flex-direction: column;
		align-items: flex-start;
	}

	.hero-strip__price,
	.plans-overview__price {
		align-items: flex-start;
	}

	.pricing-trust__item,
	.pricing-summary,
	.plan-card--product,
	.subscription-panel,
	.plan-facts-panel__item {
		border-radius: var(--radius-2xl);
	}

	.plan-card__topline,
	.plan-card__pricing,
	.plan-card__footer,
	.subscription-panel__head,
	.subscription-panel__body,
	.subscription-panel__cta,
	.plan-single-shell__head,
	.subscription-panel__pricing,
	.connect-main__head,
	.guide-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.plan-card__price-note {
		text-align: left;
	}

	.subscription-panel__meta {
		align-items: flex-start;
		text-align: left;
	}

	.subscription-panel__monthly {
		font-size: 14px;
	}

	.plan-card,
	.shortcut-card,
	.method-card,
	.feature-card,
	.device-card,
	.subscription-panel {
		min-height: auto;
	}

	.plan-banner,
	.trial-strip {
		flex-direction: column;
		align-items: flex-start;
	}

	.plan-banner__side {
		text-align: left;
	}

	.bottom-nav {
		padding: 8px;
		border-radius: var(--radius-2xl);
	}

	.bottom-nav__item {
		min-height: 58px;
	}

	.sheet {
		padding-left: 14px;
		padding-right: 14px;
	}
}

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

@media (max-width: 720px) {
	.device-slot-card__main,
	.device-slot-card__top,
	.device-slot-card__footer {
		flex-direction: column;
		align-items: stretch;
	}

	.device-slot-card__aux {
		justify-content: flex-start;
	}

	.device-slot-card__actions {
		width: 100%;
		justify-content: stretch;
	}

	.device-slot-card__button {
		flex: 1 1 0;
	}
}

/* ════════════════════════════════════════════
   PROFILE PAGE — KEY CARD
   ════════════════════════════════════════════ */
.profile-section-title {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.2;
	color: var(--text-primary);
}

.profile-devices__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.profile-devices__title-group,
.profile-devices__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.profile-devices__usage,
.profile-count-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--surface-muted);
	border: 1px solid var(--outline);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--text-secondary);
}

.profile-devices__add {
	flex-shrink: 0;
	min-height: 42px;
	padding-inline: 15px;
}

.device-slot-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.device-slot-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	border-radius: 24px;
	background: var(--surface);
	border: 1px solid var(--outline);
	box-shadow: 0 10px 32px rgba(15, 23, 42, 0.04);
	transition:
		border-color 160ms ease,
		box-shadow 160ms ease,
		transform 160ms ease;
}

.device-slot-card.is-active {
	border-color: rgba(99, 102, 241, 0.16);
}

.device-slot-card.is-expired {
	opacity: 0.88;
}

.device-slot-card__footer,
.device-slot-card__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.device-slot-card__top,
.device-slot-card__main {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.device-slot-card__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.device-slot-card__name {
	display: block;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.2;
	color: var(--text-primary);
}

.device-slot-card__meta,
.device-slot-card__expiry {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-secondary);
	line-height: 1.45;
}

.device-slot-card__aux {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	flex-shrink: 0;
}

.device-slot-card__days {
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 32px;
	padding: 0 10px;
	border-radius: 999px;
	background: rgba(32, 201, 151, 0.1);
	border: 1px solid rgba(32, 201, 151, 0.12);
	font-size: 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--text-primary);
}

.device-slot-card__actions {
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
}

.device-slot-card__button {
	min-height: 38px;
	padding-inline: 13px;
	font-size: 14px;
	font-weight: 600;
}

.button--ghost-danger {
	background: transparent;
	border: 1px solid rgba(209, 67, 53, 0.14);
	color: #c44536;
}

.button--ghost-danger:hover {
	background: rgba(209, 67, 53, 0.06);
}

.device-slot-card__footer {
	padding-top: 2px;
	border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.key-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 18px 20px;
	border-radius: var(--radius-2xl);
	background: var(--surface);
	border: 1.5px solid var(--outline);
	text-align: left;
	transition:
		transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.key-card:active {
	transform: scale(0.984);
}

.key-card--active {
	border-color: rgba(16, 185, 129, 0.35);
	background: linear-gradient(135deg, #ffffff 0%, rgba(16, 185, 129, 0.03) 100%);
	box-shadow: 0 2px 12px rgba(16, 185, 129, 0.08);
}

.key-card--expired {
	border-color: var(--outline);
	opacity: 0.7;
}

.key-card__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.key-card__name {
	display: block;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text-primary);
}

.key-card__date {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-secondary);
}

.key-card__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	flex-shrink: 0;
}

.key-card__days {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--accent);
}

.key-card__days small {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--text-secondary);
}

/* ════════════════════════════════════════════
   PROFILE PAGE — INSTALL SECTION HEAD
   ════════════════════════════════════════════ */
.install-head {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.install-head strong {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.25;
	color: var(--text-primary);
}

.install-head span {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--text-secondary);
}

/* ════════════════════════════════════════════
   PROFILE PAGE — REFERRAL HEADER
   ════════════════════════════════════════════ */
.referral-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.referral-header__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.referral-header__text strong {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--text-primary);
}

.referral-header__text span {
	font-size: 13px;
	color: var(--text-secondary);
}

.referral-amount-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.referral-amount-big {
	font-size: clamp(32px, 8vw, 44px);
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 1;
	color: var(--text-primary);
}

.referral-amount-hint {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-secondary);
}

/* ════════════════════════════════════════════
   PROFILE PAGE — SUPPORT CARD
   ════════════════════════════════════════════ */
.support-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 22px 20px;
	border-radius: var(--radius-3xl);
	background: linear-gradient(145deg, #f8f9ff 0%, #ffffff 100%);
	border: 1.5px solid rgba(99, 102, 241, 0.12);
}

.support-card__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.support-card__text strong {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--text-primary);
}

.support-card__text span {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-secondary);
}

.button--support {
	background: var(--surface-variant);
	color: var(--text-primary);
	border: 1.5px solid var(--outline);
}

.button--support:hover {
	background: var(--surface-container-high);
}

/* === VPN Status Card (Connect tab) === */
.vpn-status-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 20px;
	border-radius: var(--radius-xl);
	background: var(--surface-variant);
}

.vpn-status-card__info {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vpn-status-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.vpn-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--text-primary);
}

.vpn-status-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--accent);
	flex-shrink: 0;
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
	animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {
	0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22); }
	50% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.1); }
}

.vpn-status-card__date {
	font-size: 13px;
	font-weight: 500;
	color: var(--muted);
}

.vpn-status-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(18, 28, 84, 0.06);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--text-primary);
}

.vpn-status-card__remaining {
	font-size: clamp(17px, 4.5vw, 22px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--text-primary);
	white-space: nowrap;
	flex-shrink: 0;
}

.endpoint-summary {
	display: grid;
	gap: 10px;
	margin: 4px 0;
}

.endpoint-summary__title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.endpoint-summary__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--radius-xl);
	background: rgba(18, 28, 84, 0.04);
	border: 1px solid rgba(18, 28, 84, 0.08);
}

.endpoint-summary__item strong {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-primary);
}

/* === VPN Quick Action Grid (Connect tab) === */
.vpn-action-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.vpn-action-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 20px 16px;
	border-radius: var(--radius-xl);
	background: var(--surface-variant);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--text-primary);
	min-height: 88px;
	transition: background 0.15s ease, transform 0.1s ease;
}

.vpn-action-card:active {
	background: var(--outline);
	transform: scale(0.96);
}

.vpn-action-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-lg);
	background: rgba(99, 102, 241, 0.1);
	color: var(--primary);
	flex-shrink: 0;
}

.vpn-action-card__icon svg {
	width: 20px;
	height: 20px;
}

/* === Sheet lead text === */
.sheet__lead {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--muted);
}



/* === Key expiry row (QR sheet) === */
.key-expiry-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-radius: var(--radius-lg);
	background: var(--surface-variant);
}

.key-expiry-row span {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.key-expiry-row strong {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text-primary);
}

/* === Collapsible key code (QR sheet) === */
.key-code-details {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.key-code-details summary {
	padding: 14px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--muted);
	cursor: pointer;
	list-style: none;
	background: var(--surface-variant);
	border-radius: var(--radius-lg);
}

.key-code-details summary::-webkit-details-marker { display: none; }

.key-code-details[open] summary {
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	background: var(--surface-variant);
}

.key-code-details[open] .code-box {
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	background: var(--surface-variant);
}

/* === Plans page redesign === */

/* Duration switch: two-line buttons with price */
.duration-switch__item {
	flex-direction: column;
	gap: 2px;
	min-height: 58px;
	padding: 0 10px;
}

.duration-switch__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: inherit;
}

.duration-switch__price {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: inherit;
}

/* Plan preview card */
.plans-shell {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.plan-preview-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 22px 20px;
	border-radius: var(--radius-2xl);
	background: #FFFFFF;
	border: 1px solid var(--outline);
	box-shadow: var(--shadow-lg);
	position: relative;
	overflow: hidden;
}

.plan-preview-card::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--primary), var(--accent));
	pointer-events: none;
}

.plan-preview-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.plan-preview-price strong {
	display: block;
	font-size: clamp(42px, 11vw, 60px);
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 0.92;
	color: var(--text-primary);
}

.plan-preview-price span {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--muted);
}

.plan-saving-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.25);
	font-size: 13px;
	font-weight: 700;
	color: #059669;
	white-space: nowrap;
	flex-shrink: 0;
	margin-top: 4px;
}

.plan-monthly-hint {
	font-size: 15px;
	font-weight: 600;
	color: var(--muted);
	padding: 11px 14px;
	background: var(--surface-variant);
	border-radius: var(--radius-md);
}

.plan-facts-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.plan-fact-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--text-secondary);
}

.plan-fact-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	flex-shrink: 0;
}

.plan-guarantee {
	text-align: center;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-tertiary);
	margin: 0;
}

/* ===================================================
   GOOGLE-LEVEL POLISH PASS
   =================================================== */

/* 1. Duration switch — revert to single-line after removing price */
.duration-switch__item {
	flex-direction: row;
	min-height: 48px;
	gap: 0;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0em;
	text-transform: none;
}

/* 2. Bottom nav — Material You indicator pill style */
.bottom-nav {
	padding: 6px;
	gap: 4px;
}

.bottom-nav__item {
	gap: 4px;
	min-height: 58px;
	border-radius: var(--radius-xl);
	position: relative;
}

.bottom-nav__item.is-active {
	background: transparent;
	color: var(--primary);
	box-shadow: none;
}

.bottom-nav__icon {
	width: auto;
	height: auto;
	padding: 4px 16px;
	border-radius: 999px;
	transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.bottom-nav__item.is-active .bottom-nav__icon {
	background: var(--primary-container);
}

.bottom-nav__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
}

/* 3. Sheets — drag handle pill */
.sheet::before {
	content: '';
	display: block;
	width: 36px;
	height: 4px;
	border-radius: 999px;
	background: var(--outline);
	margin: 0 auto 18px;
	flex-shrink: 0;
}

/* 4. list-action icon — circular, primary colour */
.list-action__icon {
	border-radius: 50%;
	background: var(--primary-container);
	color: var(--primary);
	width: 44px;
	height: 44px;
}

/* 5. Primary button — stronger press feedback */
.button--coral:active {
	transform: scale(0.975);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

/* 6. Panel — unified border-radius upgrade */
.panel {
	border-radius: var(--radius-2xl);
}

/* 7. Plan preview card — remove duplicate top bar
   (already in .plan-preview-card::before) */

/* 8. vpn-action-card — softer press */
.vpn-action-card:active {
	transform: scale(0.94);
}

/* 9. Sheet close button — softer, more refined */
.sheet__close {
	font-size: 22px;
	background: var(--surface-variant);
	color: var(--text-secondary);
	transition: background 0.15s ease;
}

/* 10. client-app-button — cleaner selected state */
.client-app-button.is-selected {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* 11. status-badge active — brighter green */
.status-badge--active {
	background: var(--accent-container);
	color: var(--accent-dark);
	border: 1px solid rgba(16, 185, 129, 0.2);
}

/* 12. Expiry notice — rounder */
.notice {
	border-radius: var(--radius-xl);
}

/* === HOTFIX: bottom nav icon sizes === */
.bottom-nav__icon {
	width: 18px;
	height: 18px;
	padding: 0;
	border-radius: 0;
	background: transparent !important;
}

.bottom-nav__item {
	min-height: 62px;
}

.bottom-nav__item.is-active {
	background: var(--primary);
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

/* =============================================
   REDESIGNED DEVICE SLOTS (2026-03-25)
   ============================================= */

.devices-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.devices-counter {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--primary-container);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--primary);
}

.device-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Device card */
.device-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-radius: 20px;
	border: 1.5px solid var(--outline);
	background: var(--surface);
	overflow: hidden;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.device-card--active {
	border-color: rgba(99, 102, 241, 0.22);
	box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);
}

.device-card--expired {
	opacity: 0.72;
}

.device-card__head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 16px 14px;
}

.device-card__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--primary-container);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--primary);
	flex-shrink: 0;
}

.device-card__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.device-card__info strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.2;
	color: var(--text-primary);
}

.device-card__info span {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--muted);
}

/* Actions row */
.device-card__actions {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 0 12px 12px;
	border-top: 1px solid rgba(15, 23, 42, 0.05);
	margin-top: 2px;
	padding-top: 10px;
}

.device-card__open {
	flex: 1;
	min-height: 40px;
	font-size: 14px;
	font-weight: 600;
	justify-content: center;
	gap: 6px;
	border-radius: 12px;
}

.device-card__open svg {
	width: 16px;
	height: 16px;
}

.device-card__delete {
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 600;
	color: #c44536;
	background: none;
	border: none;
	cursor: pointer;
	opacity: 0.8;
	white-space: nowrap;
	border-radius: 12px;
	transition: opacity 0.12s ease, background 0.12s ease;
}

.device-card__delete:active {
	opacity: 1;
	background: rgba(196, 69, 54, 0.06);
}

/* Add device row */
.device-add-row {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 14px 16px;
	border-radius: 20px;
	border: 1.5px dashed rgba(99, 102, 241, 0.3);
	background: transparent;
	font-size: 15px;
	font-weight: 600;
	color: var(--primary);
	letter-spacing: -0.01em;
	text-align: left;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.device-add-row:active {
	background: var(--primary-container);
	border-color: var(--primary);
}

.device-add-row__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--primary-container);
	flex-shrink: 0;
}

.device-add-row__icon svg {
	width: 16px;
	height: 16px;
}

/* =============================================
   HOST SEGMENTED CONTROL (redesign 2026-03-25)
   ============================================= */
.host-strip {
	display: flex;
	align-items: center;
	gap: 4px;
	background: var(--surface-variant, #f1f5f9);
	border-radius: 16px;
	padding: 4px;
	overflow: visible;
	margin-bottom: 16px;
}

.host-chip {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 9px 12px;
	border-radius: 12px;
	border: none;
	background: transparent;
	color: var(--text-secondary);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	flex-shrink: 1;
	white-space: nowrap;
}

.host-chip.is-active {
	background: #ffffff;
	color: var(--text-primary);
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.09), 0 1px 2px rgba(15, 23, 42, 0.04);
	border-color: transparent;
}

.host-chip:active:not(.is-active) {
	background: rgba(15, 23, 42, 0.06);
}

/* =============================================
   SPLASH SPEED ANIMATION (2026-03-26)
   ============================================= */

/* Full-screen dark splash */
.splash {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #0d1224;
	overflow: hidden;
	z-index: 999;
	animation: splash-in 0.25s ease both;
}

@keyframes splash-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Radial glow behind icon */
.splash::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 340px;
	height: 340px;
	transform: translate(-50%, -56%);
	background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.18) 0%, transparent 70%);
	pointer-events: none;
}

/* ── Rings ────────────────────────────────── */
.splash__rings {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	margin-top: -60px;
}

.splash__ring {
	position: absolute;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	border: 1.5px solid rgba(99, 102, 241, 0.55);
	animation: ring-expand 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}

.splash__ring:nth-child(2) { animation-delay: 0.8s; }
.splash__ring:nth-child(3) { animation-delay: 1.6s; }

@keyframes ring-expand {
	0%   { transform: scale(0.85); opacity: 0.9; border-color: rgba(99, 102, 241, 0.6); }
	100% { transform: scale(4.8);  opacity: 0;   border-color: rgba(99, 102, 241, 0);   }
}

/* ── Center icon ──────────────────────────── */
.splash__icon {
	position: relative;
	z-index: 2;
	width: 76px;
	height: 76px;
	border-radius: 24px;
	background: linear-gradient(145deg, #6366f1 0%, #818cf8 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 0 0 10px rgba(99, 102, 241, 0.12),
		0 0 48px rgba(99, 102, 241, 0.55),
		0 12px 40px rgba(0, 0, 0, 0.5);
	animation:
		icon-enter 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both,
		icon-glow  2.2s 0.65s ease-in-out infinite;
	margin-bottom: 0;
}

@keyframes icon-enter {
	from { opacity: 0; transform: scale(0.4); }
	to   { opacity: 1; transform: scale(1);   }
}

@keyframes icon-glow {
	0%, 100% {
		box-shadow:
			0 0 0 10px rgba(99, 102, 241, 0.12),
			0 0 48px rgba(99, 102, 241, 0.55),
			0 12px 40px rgba(0, 0, 0, 0.5);
	}
	50% {
		box-shadow:
			0 0 0 14px rgba(99, 102, 241, 0.18),
			0 0 80px rgba(99, 102, 241, 0.75),
			0 12px 40px rgba(0, 0, 0, 0.5);
	}
}

.splash__icon svg {
	width: 36px;
	height: 36px;
	color: #ffffff;
	filter: drop-shadow(0 0 6px rgba(255,255,255,0.4));
}

/* ── Speed streaks ────────────────────────── */
.splash__streaks {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.splash__streak {
	position: absolute;
	top: 50%;
	left: 0;
	height: 1.5px;
	border-radius: 99px;
	background: linear-gradient(90deg, transparent 0%, rgba(165, 180, 252, 0.65) 50%, transparent 100%);
	opacity: 0;
	animation: streak-fly 1.8s ease-in-out infinite;
}

.splash__streak:nth-child(1) { width: 48%; margin-top: -90px; animation-delay: 0.05s; }
.splash__streak:nth-child(2) { width: 62%; margin-top: -55px; animation-delay: 0.38s; }
.splash__streak:nth-child(3) { width: 38%; margin-top: -22px; animation-delay: 0.12s; }
.splash__streak:nth-child(4) { width: 55%; margin-top:  18px; animation-delay: 0.52s; }
.splash__streak:nth-child(5) { width: 44%; margin-top:  52px; animation-delay: 0.28s; }
.splash__streak:nth-child(6) { width: 58%; margin-top:  86px; animation-delay: 0.45s; }

@keyframes streak-fly {
	0%   { transform: translateX(-110%); opacity: 0; }
	12%  { opacity: 1; }
	85%  { opacity: 0.7; }
	100% { transform: translateX(210vw); opacity: 0; }
}

/* ── Brand & status ───────────────────────── */
.splash__brand {
	position: relative;
	z-index: 2;
	margin-top: 30px;
	font-size: 20px;
	font-weight: 900;
	letter-spacing: 0.16em;
	color: #ffffff;
	text-transform: uppercase;
	animation: text-rise 0.7s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.splash__status {
	position: relative;
	z-index: 2;
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.35);
	animation: text-rise 0.7s 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes text-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   REDESIGNED CONNECT TAB (2026-03-26)
   ============================================= */

/* --- Status row at top of active panel --- */
.connect-status-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* --- Days hero — the big centered number --- */
.days-hero {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px 0 16px;
}

.days-hero__number {
	font-size: clamp(64px, 18vw, 88px);
	font-weight: 900;
	letter-spacing: -0.06em;
	line-height: 1;
	color: var(--text-primary);
	flex-shrink: 0;
}

.days-hero__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.days-hero__label {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text-secondary);
	line-height: 1.1;
}

.days-hero__date {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-tertiary);
	line-height: 1.3;
}

/* --- Secondary outline button --- */
.button--outline {
	background: transparent;
	color: var(--text-primary);
	border: 1.5px solid var(--outline);
	box-shadow: none;
}

.button--outline:active {
	transform: scale(0.975);
	background: var(--surface-variant);
}

/* --- Empty connect state --- */
.panel--connect-empty {
	text-align: center;
}

.empty-vpn-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 12px 0 20px;
}

.empty-vpn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-xl);
	background: var(--primary-container);
	color: var(--primary);
	margin-bottom: 4px;
}

.empty-vpn-icon svg {
	width: 26px;
	height: 26px;
}

.empty-vpn-title {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--text-primary);
	margin: 0;
}

.empty-vpn-lead {
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-secondary);
	max-width: 28ch;
	margin: 0 auto;
}

/* --- Profile identity row (same panel as connect) --- */
.profile-ident-row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.profile-ident-meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.profile-ident-name {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.profile-ident-sub {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-tertiary);
}

/* inactive status badge variant */
.vpn-status-badge--muted {
	color: var(--text-secondary);
}

/* --- Profile module section headers --- */
.profile-section-label {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text-primary);
	flex: 1;
}

/* --- Danger action row (e.g. delete device) --- */
.list-action--danger {
	background: var(--error-container);
	justify-content: center;
}

.list-action--danger span {
	color: var(--error);
	font-size: 14px;
	font-weight: 600;
	margin-top: 0;
	max-width: none;
}

/* =============================================
   STARK LINK BRAND THEME — Overrides 2026-03-26
   ============================================= */

/* --- Topbar: dark glass --- */
.topbar {
	background: rgba(20, 23, 40, 0.85);
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

/* --- Panel: dark surface --- */
.panel {
	background: var(--surface);
	border-color: var(--outline);
}

.panel--spotlight {
	background: linear-gradient(180deg, var(--surface) 0%, var(--surface-variant) 100%);
	border: 1px solid rgba(91, 124, 246, 0.15);
}

/* --- Bottom nav: dark glass + gradient active --- */
.bottom-nav {
	background: rgba(20, 23, 40, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.07);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
}

.bottom-nav__item.is-active {
	background: var(--brand-gradient);
	box-shadow: 0 4px 16px rgba(91, 124, 246, 0.4);
}

/* --- Sheet: dark surface --- */
.sheet {
	background: var(--surface);
	border-top: 1px solid var(--outline);
}

/* --- Main CTA button: brand gradient --- */
.button--coral {
	background: var(--brand-gradient);
	box-shadow: 0 8px 28px rgba(91, 124, 246, 0.4);
}

.button--coral:active {
	box-shadow: 0 4px 12px rgba(91, 124, 246, 0.3);
	transform: scale(0.975);
}

/* --- Ghost button: dark variant --- */
.button--ghost {
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-primary);
}

.button--ghost:active {
	background: rgba(255, 255, 255, 0.1);
}

/* --- Outline button: dark variant --- */
.button--outline {
	background: transparent;
	color: var(--text-primary);
	border: 1.5px solid rgba(255, 255, 255, 0.15);
	box-shadow: none;
}

.button--outline:active {
	background: rgba(255, 255, 255, 0.05);
}

/* --- Avatar: brand gradient background --- */
.avatar {
	background: var(--brand-gradient);
}

/* --- Active status dot: brand cyan --- */
.vpn-status-dot {
	background: var(--brand-cyan);
	box-shadow: 0 0 0 3px rgba(61, 217, 245, 0.2);
}

@keyframes pulse-dot {
	0%, 100% { box-shadow: 0 0 0 3px rgba(61, 217, 245, 0.2); }
	50%       { box-shadow: 0 0 0 6px rgba(61, 217, 245, 0.08); }
}

/* --- Status pill: subtle dark variant --- */
.vpn-status-pill {
	background: rgba(255, 255, 255, 0.08);
	color: var(--text-secondary);
}

/* --- Days hero number: gradient text --- */
.days-hero__number {
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* --- Platform tabs active: gradient --- */
.device-tab.is-active {
	background: var(--brand-gradient);
	box-shadow: 0 4px 16px rgba(91, 124, 246, 0.35);
}

/* --- Splash: updated brand colors --- */
.splash {
	background: #0D0F1A;
}

.splash::before {
	background: radial-gradient(ellipse at center,
		rgba(61, 217, 245, 0.12) 0%,
		rgba(91, 124, 246, 0.15) 40%,
		transparent 70%);
}

.splash__ring {
	border-color: rgba(61, 217, 245, 0.5);
}

@keyframes ring-expand {
	0%   { transform: scale(0.85); opacity: 0.9; border-color: rgba(61, 217, 245, 0.55); }
	100% { transform: scale(4.8);  opacity: 0;   border-color: rgba(61, 217, 245, 0); }
}

.splash__icon {
	background: var(--brand-gradient);
	box-shadow:
		0 0 0 10px rgba(91, 124, 246, 0.1),
		0 0 52px rgba(61, 217, 245, 0.45),
		0 12px 40px rgba(0, 0, 0, 0.5);
}

@keyframes icon-glow {
	0%, 100% {
		box-shadow:
			0 0 0 10px rgba(91, 124, 246, 0.1),
			0 0 52px rgba(61, 217, 245, 0.45),
			0 12px 40px rgba(0, 0, 0, 0.5);
	}
	50% {
		box-shadow:
			0 0 0 14px rgba(91, 124, 246, 0.16),
			0 0 88px rgba(61, 217, 245, 0.7),
			0 12px 40px rgba(0, 0, 0, 0.5);
	}
}

.splash__streak {
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(61, 217, 245, 0.5) 40%,
		rgba(139, 92, 246, 0.4) 60%,
		transparent 100%);
}


/* =============================================
   DARK THEME FIX — Color Corrections 2026-03-26
   ============================================= */

/* ── Language switch ── */
.lang-switch {
	background: rgba(255, 255, 255, 0.07);
}

.lang-switch__item {
	color: rgba(255, 255, 255, 0.4);
}

.lang-switch__item.is-active {
	background: var(--brand-gradient);
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(91, 124, 246, 0.35);
}

/* ── Icon button ── */
.icon-button {
	background: rgba(255, 255, 255, 0.08);
	color: var(--text-secondary);
}

.icon-button:active {
	background: rgba(255, 255, 255, 0.13);
}

/* ── Chips & status badges ── */
.chip,
.chip--status,
.status-badge {
	background: rgba(255, 255, 255, 0.07);
	color: var(--text-secondary);
}

.chip--coral {
	background: var(--coral-soft);
	color: var(--primary-light);
}

.chip--status.is-active,
.status-badge--active {
	background: rgba(61, 217, 245, 0.12);
	color: var(--brand-cyan);
}

.status-badge--navy {
	background: var(--surface-variant);
	color: var(--text-primary);
}

.status-badge--muted {
	background: rgba(255, 255, 255, 0.05);
	color: var(--text-tertiary);
}

/* ── Host chips ── */
.host-chip {
	background: var(--surface-variant);
	border-color: var(--outline);
	color: var(--text-secondary);
}

.host-chip.is-active {
	background: var(--brand-gradient);
	border-color: transparent;
	box-shadow: 0 4px 16px rgba(91, 124, 246, 0.35);
}

/* ── Plan cards — dark redesign ── */
.plan-card--product {
	background: var(--surface);
	border-color: var(--outline);
	color: var(--text-primary);
}

.plan-card--product::before {
	background:
		radial-gradient(circle at 100% 0%, rgba(61, 217, 245, 0.07), transparent 40%),
		radial-gradient(circle at 0% 100%, rgba(139, 92, 246, 0.06), transparent 40%);
}

.plan-card--plain {
	background: var(--surface);
}

.plan-card--premium {
	background: linear-gradient(180deg, var(--surface) 0%, var(--surface-variant) 100%);
	border-color: rgba(91, 124, 246, 0.15);
}

.plan-card--navy {
	background: var(--surface-elevated);
	color: var(--text-primary);
}

.plan-card--recommended {
	background: var(--brand-gradient);
	color: #ffffff;
	border: none;
	box-shadow: 0 16px 40px rgba(91, 124, 246, 0.45);
}

.plan-card--recommended::before {
	background:
		radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.12), transparent 40%),
		radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0.1), transparent 35%);
}

/* Plan card inner elements on dark */
.plan-card__eyebrow {
	background: rgba(255, 255, 255, 0.1);
	color: var(--text-secondary);
}

.plan-card__tag {
	background: rgba(61, 217, 245, 0.15);
	color: var(--brand-cyan);
}

.plan-card--recommended .plan-card__eyebrow {
	background: rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.7);
}

.plan-card--recommended .plan-card__tag {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

.plan-card__price-note em {
	background: rgba(255, 255, 255, 0.08);
	color: var(--text-secondary);
}

.plan-card--recommended .plan-card__price-note em {
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}

.plan-card__footer em {
	background: rgba(255, 255, 255, 0.1);
	color: var(--text-primary);
}

.plan-card--recommended .plan-card__footer em {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

/* ── Plans overview price block ── */
.plans-overview__price {
	background: var(--surface);
	border-color: var(--outline);
}

/* ── Pricing trust items ── */
.pricing-trust__item,
.pricing-summary {
	background: var(--surface);
	border-color: var(--outline);
}

/* ── Plan single shell ── */
.plan-single-shell {
	background: var(--bg);
}

/* ── Loader / fallback card ── */
.mini-app-loader__card,
.fallback-card {
	background: var(--surface);
	border: 1px solid var(--outline);
}

/* ── Notices ── */
.notice--expiry {
	border-color: var(--outline);
	background: var(--surface);
}

.notice--warning {
	background: rgba(251, 191, 36, 0.1);
	color: #FDE68A;
}

.notice--expired {
	background: rgba(248, 113, 113, 0.1);
	color: #FCA5A5;
}

.notice--error {
	background: rgba(248, 113, 113, 0.1);
	color: #FCA5A5;
}

.notice__body strong {
	color: var(--text-primary);
}

/* ── Toast ── */
.toast {
	background: rgba(30, 36, 72, 0.95);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ── Sheet drag handle area ── */
.sheet {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Duration switch ── */
.duration-switch__item {
	color: var(--text-secondary);
}

.duration-switch__item.is-active {
	background: var(--surface);
	color: var(--text-primary);
	box-shadow: var(--shadow-md);
}


/* =============================================
   PLANS PAGE — Dark Theme Match (2026-03-27)
   ============================================= */

/* Duration switch — gradient active tab */
.duration-switch {
	background: var(--surface-variant);
	border-color: var(--outline);
}

.duration-switch__item {
	color: var(--text-tertiary);
	font-weight: 700;
}

.duration-switch__item.is-active {
	background: var(--brand-gradient);
	color: #ffffff;
	box-shadow: 0 4px 16px rgba(91, 124, 246, 0.4);
}

/* Saving badge — cyan instead of green */
.plan-saving-badge {
	background: rgba(61, 217, 245, 0.12);
	border-color: rgba(61, 217, 245, 0.25);
	color: var(--brand-cyan);
}

/* Plan preview card background (fallback) */
.plan-preview-card {
	background: var(--surface);
	border-color: var(--outline);
}

.plan-preview-card::before {
	background: var(--brand-gradient);
}

/* Facts list */
.plan-fact-item {
	color: var(--text-secondary);
}

.plan-fact-dot {
	background: var(--brand-cyan);
	opacity: 0.7;
}

/* Monthly hint */
.plan-monthly-hint {
	background: var(--surface-variant);
	color: var(--text-secondary);
}

/* Plans-shell removes extra gap */
.plans-shell {
	padding: 22px;
}


/* =============================================
   FIXES: days-hero layout + client sheet (2026-03-27)
   ============================================= */

/* Fix overlap: anchor to bottom so meta never rides above number */
.days-hero {
	align-items: flex-end;
}

/* Sheet base (dark surface already set, update shadow + handle) */
.sheet {
	background: var(--surface);
	box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.6);
}

.sheet::before {
	content: '';
	display: block;
	width: 36px;
	height: 4px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.15);
	margin: 0 auto 20px;
}

/* Sheet lead text */
.sheet__lead {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-secondary);
}

/* stack-actions inside sheet gets top margin */
.sheet .stack-actions {
	margin-top: 16px;
}

/* Preferred client row — gradient left border accent */
.list-action--preferred {
	border-left: 3px solid var(--brand-cyan);
}

/* "Открыть" badge — gradient pill */
.client-open-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 80px;
	height: 38px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--brand-gradient);
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	flex-shrink: 0;
}

/* Fix list-action--soft for dark theme */
.list-action--soft {
	background: var(--surface-variant);
	border: 1px solid var(--outline);
	box-shadow: none;
}



/* ═══════════════════════════════════════════════════════════════════════════
   WEB LOGIN SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */

.web-login-screen {
	position: fixed;
	inset: 0;
	background: var(--bg, #0D0F1A);
	overflowY: auto;
	z-index: 10;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.web-login-screen__bg {
	position: fixed;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 40% at 20% 10%, rgba(61,217,245,0.10) 0%, transparent 60%),
		radial-gradient(ellipse 50% 50% at 80% 85%, rgba(139,92,246,0.10) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}

.web-login-screen__scroll {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 420px;
	padding: 40px 16px 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.web-login-screen__logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 28px;
}

.web-login-screen__icon-wrap {
	width: 64px;
	height: 64px;
	border-radius: 18px;
	background: var(--brand-gradient);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	box-shadow: 0 8px 32px rgba(61,217,245,0.22);
}

.web-login-screen__icon-wrap svg {
	width: 32px;
	height: 32px;
	color: #fff;
	stroke: #fff;
}

.web-login-screen__brand {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 0.06em;
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.web-login-screen__tagline {
	margin: 5px 0 0;
	font-size: 14px;
	color: var(--text-secondary, rgba(255,255,255,0.45));
	text-align: center;
}

.web-login-screen__footer {
	margin-top: 20px;
	font-size: 12px;
	color: var(--text-tertiary, rgba(255,255,255,0.25));
	text-align: center;
	line-height: 1.5;
	padding: 0 16px;
}

.web-login-screen__link {
	color: var(--brand-cyan, #3DD9F5);
	cursor: pointer;
}

/* ── Auth card ────────────────────────────────────────────────────────────── */

.web-auth-card {
	width: 100%;
	background: var(--surface, #141728);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 20px;
	padding: 0 0 20px;
	overflow: hidden;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */

.web-auth-tabs {
	display: flex;
	border-bottom: 1px solid rgba(255,255,255,0.07);
	margin-bottom: 24px;
}

.web-auth-tab {
	flex: 1;
	padding: 14px 8px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-secondary, rgba(255,255,255,0.45));
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}

.web-auth-tab.is-active {
	color: var(--text-primary, #f0f4ff);
	border-bottom-color: var(--brand-cyan, #3DD9F5);
}

/* ── Form ─────────────────────────────────────────────────────────────────── */

.web-auth-form {
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.web-auth-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.web-auth-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary, rgba(255,255,255,0.55));
	letter-spacing: 0.02em;
}

.web-auth-input {
	width: 100%;
	height: 48px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 12px;
	padding: 0 14px;
	font-size: 15px;
	color: var(--text-primary, #f0f4ff);
	outline: none;
	transition: border-color 0.2s, background 0.2s;
	-webkit-appearance: none;
	box-sizing: border-box;
}

.web-auth-input::placeholder {
	color: rgba(255,255,255,0.2);
}

.web-auth-input:focus {
	border-color: var(--brand-cyan, #3DD9F5);
	background: rgba(61,217,245,0.06);
}

.web-auth-pwd-wrap {
	position: relative;
}

.web-auth-pwd-wrap .web-auth-input {
	padding-right: 44px;
}

.web-auth-eye {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	color: rgba(255,255,255,0.3);
	transition: color 0.2s;
}

.web-auth-eye:hover { color: rgba(255,255,255,0.7); }
.web-auth-eye svg { width: 18px; height: 18px; display: block; }

.web-auth-error {
	background: rgba(239,68,68,0.12);
	border: 1px solid rgba(239,68,68,0.3);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13px;
	color: #f87171;
	line-height: 1.4;
}

.web-auth-submit {
	width: 100%;
	height: 50px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 13px;
	margin-top: 4px;
	transition: opacity 0.2s;
}

.web-auth-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.web-auth-switch {
	text-align: center;
	font-size: 13px;
	color: var(--text-secondary, rgba(255,255,255,0.45));
	margin: 0;
}

.web-auth-switch-link {
	color: var(--brand-cyan, #3DD9F5);
	cursor: pointer;
	font-weight: 600;
}

/* ── OTP code step ────────────────────────────────────────────────────────── */

.web-auth-code-hint {
	font-size: 13px;
	color: var(--text-secondary, rgba(255,255,255,0.5));
	text-align: center;
	padding: 0 4px 4px;
	line-height: 1.5;
}

.web-auth-code-hint strong {
	color: var(--text-primary, #fff);
	font-weight: 600;
	word-break: break-all;
}

.web-auth-change-email {
	display: inline;
	background: none;
	border: none;
	padding: 0;
	margin-left: 6px;
	color: var(--brand-cyan, #3DD9F5);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	line-height: inherit;
}

.web-auth-input--code {
	text-align: center;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 10px;
	font-variant-numeric: tabular-nums;
}

/* ── Divider + Telegram ───────────────────────────────────────────────────── */

.web-auth-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 20px 0;
	color: rgba(255,255,255,0.2);
	font-size: 12px;
}

.web-auth-divider::before,
.web-auth-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(255,255,255,0.08);
}

.web-auth-tg-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px 4px;
	min-height: 52px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRIAL MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.trial-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.75);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 200;
	animation: overlayIn 0.2s ease;
}

@keyframes overlayIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.trial-card {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 40px);
	max-width: 380px;
	background: var(--surface, #141728);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 20px;
	padding: 28px 24px 24px;
	z-index: 201;
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: cardIn 0.3s cubic-bezier(0.34,1.4,0.64,1);
}

@keyframes cardIn {
	from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)); }
	to   { opacity: 1; transform: translate(-50%, -50%); }
}

.trial-card__badge {
	display: inline-block;
	background: var(--brand-gradient);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 999px;
	margin-bottom: 20px;
}

.trial-card__title {
	font-size: 20px;
	font-weight: 800;
	color: var(--text-primary, #f0f4ff);
	text-align: center;
	margin: 0 0 8px;
}

.trial-card__desc {
	font-size: 13px;
	color: var(--text-secondary, rgba(255,255,255,0.45));
	text-align: center;
	margin: 0 0 20px;
	line-height: 1.5;
}

.trial-card__features {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.trial-card__feature {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--text-primary, #f0f4ff);
}

.trial-card__check {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--brand-gradient);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	flex-shrink: 0;
}

.trial-card__cta {
	width: 100%;
	height: 50px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 12px;
}

/* Telegram login button (shown before widget loads) */
.web-tg-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	height: 44px;
	background: #229ED9;
	border: none;
	border-radius: 10px;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s;
}
.web-tg-btn:hover { opacity: 0.88; }