/*
 * VPN Web Account — layout & components
 * All colors via CSS variables from themes/*.css
 * No hardcoded colors — everything is themeable.
 */

/* ── Reset ────────────────────────────────────────────────────────────────── */

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

/* ── Paper texture background (light theme) ──────────────────────────────── */

.paper-texture {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: var(--bg-texture, none);
	background-size: var(--bg-texture-size, auto);
	background-position: var(--bg-texture-position, 0 0);
	pointer-events: none;
	z-index: -1;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

body {
	font-family: var(--font-primary);
	background: var(--bg-page);
	color: var(--text-primary);
	min-height: 100vh;
	min-height: 100dvh;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

/* ── Tooltips — instant, 0ms delay per project guidelines ─────────────── */

[data-tooltip] {
	position: relative;
}

[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 8px;
	background: var(--text-primary);
	color: var(--bg-main);
	font-size: 0.75rem;
	border-radius: var(--border-radius-sm);
	white-space: nowrap;
	/* Cap tooltip width so long strings (e.g. "22 апреля 2026, 19:42") don't
	   exceed narrow mobile viewports — on small screens we allow the tooltip
	   to wrap to multiple lines rather than clip. */
	max-width: calc(100vw - 16px);
	opacity: 0;
	pointer-events: none;
	transition-delay: 0s;
	transition: opacity 0.15s;
	z-index: 10;
}

/* Keyboard-focused buttons (sort chips) get the same tooltip as mouse hover.
   :focus-visible only fires on keyboard navigation, not on touch/mouse click —
   no unwanted popups when the user clicks a sort chip. */
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
	transition-delay: 0s;
	opacity: 1;
}

@media (max-width: 620px) {
	[data-tooltip]::after {
		max-width: 240px;
		white-space: normal;
		word-break: break-word;
		text-align: center;
	}
}

/* ── Language toggle button ──────────────────────────────────────────── */

.btn-lang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 10px;
	border: 1px solid var(--border);
	border-radius: var(--border-radius-sm);
	background: var(--bg-main);
	color: var(--text-secondary);
	font-family: var(--font-primary);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	text-transform: uppercase;
	line-height: 1.4;
}

.btn-lang:hover {
	background: var(--nav-hover-bg);
	color: var(--text-primary);
	border-color: var(--text-muted);
}

/* ── Layout: Login page (centered card) ───────────────────────────────── */

.layout-login {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 16px;
}

.login-top-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 24px;
}

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

.logo-text {
	font-family: var(--font-heading);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--logo-color);
	text-decoration: none;
}

.logo-text:hover {
	text-decoration: none;
	color: var(--logo-color);
}

.logo-vezde {
	text-decoration: underline;
}

.logo-hod {
	font-style: italic;
}

.login-card {
	background: var(--bg-main);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-card);
	padding: 32px 28px;
	width: 100%;
	max-width: 420px;
	text-align: center;
}

.login-card h1 {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--text-heading);
	margin-bottom: 8px;
}

.login-card .subtitle {
	color: var(--text-secondary);
	font-size: 0.9rem;
	margin-bottom: 24px;
	line-height: 1.5;
}

.login-footer {
	margin-top: 32px;
	text-align: center;
	font-size: 0.8rem;
	color: var(--footer-text);
}

/* ── Layout: Cabinet (header + sidebar + content + footer) ────────────── */

.layout-cabinet {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

/* Header */

.cabinet-header {
	background: var(--bg-header);
	box-shadow: var(--shadow-header);
	padding: 0 20px;
	position: sticky;
	top: 0;
	z-index: 100;
}

.cabinet-header-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
}

.header-logo {
	font-family: var(--font-heading);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--logo-color);
	text-decoration: none;
}

.header-logo:hover {
	text-decoration: none;
	color: var(--logo-color);
}

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

.btn-header-action {
	padding: 4px 10px;
	border: 1px solid var(--border);
	border-radius: var(--border-radius-sm);
	background: var(--bg-main);
	color: var(--text-muted);
	font-family: var(--font-primary);
	font-size: 0.78rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	line-height: 1.4;
}

.btn-header-action:hover {
	background: var(--nav-hover-bg);
	color: var(--text-primary);
	border-color: var(--text-muted);
}

.header-user {
	font-size: 0.85rem;
	color: var(--text-secondary);
}

.header-user-id {
	font-weight: 500;
	color: var(--text-primary);
}

/* Navigation (horizontal tabs below header) */

.cabinet-nav {
	background: var(--nav-bg);
	border-bottom: 1px solid var(--border-light);
	padding: 0 20px;
}

.cabinet-nav-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	display: flex;
	gap: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cabinet-nav-inner::-webkit-scrollbar {
	display: none;
}

.nav-tab {
	padding: 12px 20px;
	font-size: 0.9rem;
	color: var(--nav-text);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	cursor: pointer;
	background: none;
	border-top: none;
	border-left: none;
	border-right: none;
	font-family: var(--font-primary);
	transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.nav-tab:hover {
	color: var(--text-primary);
	background: var(--nav-hover-bg);
	text-decoration: none;
}

.nav-tab.active {
	color: var(--nav-active-text);
	border-bottom-color: var(--nav-active-border);
	font-weight: 500;
}

/* Main content area */

.cabinet-body {
	flex: 1;
	display: flex;
	justify-content: center;
	padding: 24px 20px;
}

.cabinet-content {
	width: 100%;
	max-width: var(--max-width);
}

/* Section header (like reference site h2) */

.section-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.section-title-row .section-title {
	margin-bottom: 0;
}

.btn-icon-refresh {
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: var(--border-radius-sm);
	background: var(--bg-card);
	color: var(--text-secondary);
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-icon-refresh:hover {
	background: var(--bg-main);
	color: var(--accent);
	border-color: var(--accent);
}

.btn-icon-refresh:active {
	transform: scale(0.95);
}

.btn-icon-refresh:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.btn-icon-refresh.refreshing svg {
	animation: btn-refresh-spin 0.8s linear infinite;
}

@keyframes btn-refresh-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.connections-counter {
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-secondary);
	vertical-align: middle;
	margin-left: 8px;
}

.section-title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--text-heading);
	border-left: 4px solid var(--accent);
	padding-left: 12px;
	margin-bottom: 20px;
}

/* Content card */

.content-card {
	background: var(--bg-card);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-card);
	padding: 24px;
}

/* Placeholder for sections under development */

.placeholder-section {
	text-align: center;
	padding: 60px 20px;
}

.placeholder-icon {
	font-size: 3rem;
	margin-bottom: 16px;
	opacity: 0.4;
}

.placeholder-text {
	font-size: 1rem;
	color: var(--text-secondary);
}

.placeholder-hint {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-top: 8px;
}

/* Subscription status */

.subscription-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 12px;
}

@media (max-width: 620px) {
	.subscription-grid {
		grid-template-columns: 1fr;
	}
}

.subscription-status-card {
}

.subscription-limits-card {
}

.subscription-history-card {
	margin-bottom: 12px;
}

.subscription-status-label {
	font-size: 1.1em;
	font-weight: 600;
	margin-bottom: 8px;
}

.status-active {
	color: var(--success);
}

.status-expired {
	color: var(--accent);
}

.subscription-date {
	color: var(--text-secondary);
	margin-bottom: 4px;
}

.subscription-days {
	font-weight: 500;
}

.days-ok {
	color: var(--success);
}

.days-warning {
	color: var(--warning, #f9a825);
}

.days-critical {
	color: var(--accent);
}

.subscription-no-sub {
	color: var(--text-secondary);
	padding: 16px 0;
}

/* Connection limits */

.subscription-limits {
	font-size: 1em;
}

/* Renew/Buy action button */

.subscription-renew-action {
	margin-top: 16px;
}

.subscription-renew-btn {
	width: 100%;
	padding: 12px;
	font-size: 1em;
}

.subscription-renew-hint {
	color: var(--text-secondary);
	font-size: 0.9em;
	padding: 8px 0;
	margin-bottom: 12px;
}

/* Payment plans grid */

.payment-plans-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin: 12px 0;
}

.payment-plan-card {
	border: 2px solid var(--border-light);
	border-radius: var(--border-radius);
	padding: 16px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s;
	background: var(--bg-card);
}

.payment-plan-card:hover {
	border-color: var(--accent);
}

.payment-plan-card.selected {
	border-color: var(--accent);
	background: var(--nav-active-bg, rgba(255, 87, 34, 0.05));
}

.payment-plan-name {
	font-weight: 600;
	margin-bottom: 4px;
}

.payment-plan-price {
	font-size: 1.2em;
	color: var(--accent);
	font-weight: 700;
}

/* Payment methods */

.payment-methods-list {
	margin: 12px 0;
}

.payment-method-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	border-bottom: 1px solid var(--border-light);
	cursor: pointer;
	transition: background 0.1s;
}

.payment-method-item:last-child {
	border-bottom: none;
}

.payment-method-item:hover {
	background: var(--nav-active-bg, rgba(0, 0, 0, 0.02));
}

.payment-method-item.selected {
	background: var(--nav-active-bg, rgba(255, 87, 34, 0.05));
}

.payment-method-radio {
	width: 18px;
	height: 18px;
	min-width: 18px;
	border-radius: 50%;
	border: 2px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s;
}

.payment-method-item.selected .payment-method-radio {
	border-color: var(--accent);
}

.payment-method-item.selected .payment-method-radio::after {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--accent);
}

.payment-method-label {
	font-size: 0.95em;
}

/* Payment submit */

.payment-submit {
	width: 100%;
	padding: 14px;
	font-size: 1.1em;
	margin-top: 12px;
}

.payment-error {
	color: var(--danger, #c62828);
	margin-top: 8px;
	font-size: 0.9em;
}

.payment-success-msg {
	color: var(--success);
	margin-top: 12px;
	font-size: 0.95em;
	padding: 12px;
	background: rgba(34, 197, 94, 0.08);
	border-radius: var(--border-radius-sm);
}

.payment-success-link {
	color: var(--accent);
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.payment-success-link:hover {
	text-decoration: none;
}

/* Payment share block ("Ask someone else to pay") */

.payment-share-block {
	margin-top: 20px;
	padding: 16px;
	background: var(--bg-card);
	border: 1px solid var(--border-light);
	border-radius: var(--border-radius);
}

.payment-share-title {
	font-weight: 600;
	font-size: 1rem;
	color: var(--text-heading);
	margin-bottom: 8px;
}

.payment-share-desc {
	font-size: 0.9rem;
	color: var(--text-secondary);
	line-height: 1.45;
	margin-bottom: 12px;
}

.payment-share-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.payment-share-actions .btn {
	flex: 1 1 auto;
	min-width: 140px;
}

@media (max-width: 480px) {
	.payment-share-actions {
		flex-direction: column;
	}
	.payment-share-actions .btn {
		width: 100%;
	}
}

.payment-retry-btn {
	margin-left: 8px;
	padding: 4px 12px;
	font-size: 0.85rem;
}

/* Payment summary (step 3) */

.payment-summary-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid var(--border-light);
}

.payment-summary-row:last-child {
	border-bottom: none;
}

.payment-summary-label {
	color: var(--text-secondary);
}

.payment-summary-value {
	font-weight: 500;
}

/* Crypto step */

.crypto-tariff {
	font-weight: 600;
	font-size: 1.1em;
	margin-bottom: 12px;
}

.crypto-section-title {
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--accent);
}

.crypto-search {
	margin-bottom: 10px;
}

.crypto-search input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--border-light);
	border-radius: 8px;
	font-size: 0.9em;
	box-sizing: border-box;
}

.crypto-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-bottom: 16px;
}

.crypto-tag {
	background: var(--bg-card, #f5f5f5);
	border: 1px solid var(--border-light);
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 0.95em;
	font-weight: 600;
	font-family: monospace;
	text-align: center;
	color: var(--text-primary, #222);
	transition: background 0.15s;
}

.crypto-tag.highlight {
	background: #fff3cd;
	border-color: #f9a825;
}

.crypto-tag.dimmed {
	opacity: 0.3;
}

@media (max-width: 620px) {
	.crypto-search { display: none; }
	.crypto-list { grid-template-columns: repeat(2, 1fr); }
}

.crypto-plan-buttons {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.crypto-plan-btn {
	padding: 8px 16px;
	border: 2px solid var(--border-light);
	border-radius: 8px;
	background: var(--bg-card, #fff);
	cursor: pointer;
	font-size: 0.9em;
	transition: border-color 0.15s;
}

.crypto-plan-btn:hover {
	border-color: var(--accent);
}

.crypto-plan-btn.selected {
	border-color: var(--accent);
	background: var(--accent-bg, rgba(0,0,0,0.03));
	font-weight: 600;
}

.skeleton-tag {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
	background-size: 200% 100% !important;
	animation: skeleton-pulse 1.2s ease-in-out infinite;
	color: transparent !important;
	border-color: #e8e8e8 !important;
}

@keyframes skeleton-pulse {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.crypto-hint {
	color: var(--text-secondary);
	font-size: 0.9em;
	line-height: 1.4;
}

/* Transaction history */

.subscription-history-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	user-select: none;
}

.subscription-history-header h3 {
	margin: 0;
	font-size: 1em;
}

.toggle-arrow {
	font-size: 0.8em;
	color: var(--text-secondary);
}

.subscription-history-list {
	margin-top: 12px;
}

.subscription-history-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	padding: 8px 0;
	border-bottom: 1px solid var(--border-light);
	font-size: 0.9em;
}

.subscription-history-item:last-child {
	border-bottom: none;
}

.history-date {
	color: var(--text-secondary);
}

.history-type {
	flex: 1;
	min-width: 60px;
}

.history-days {
	color: var(--success);
	font-weight: 500;
	text-align: right;
	white-space: nowrap;
}

.subscription-history-empty {
	color: var(--text-secondary);
	padding: 8px 0;
}

.subscription-history-gap {
	text-align: center;
	padding: 4px 0;
	border-bottom: 1px dashed var(--border-light, #e0e0e0);
}

.history-gap-text {
	font-size: 0.85em;
	color: var(--text-secondary);
	font-style: italic;
}

/* Footer */

.cabinet-footer {
	text-align: center;
	padding: 20px;
	font-size: 0.8rem;
	color: var(--footer-text);
	border-top: 1px solid var(--border-light);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border: none;
	border-radius: var(--border-radius-sm);
	font-family: var(--font-primary);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, opacity 0.15s, transform 0.1s;
	text-decoration: none;
	line-height: 1.4;
}

.btn:hover {
	text-decoration: none;
}

.btn:active {
	transform: scale(0.98);
}

.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.btn-block {
	width: 100%;
}

.btn-primary {
	background: var(--accent);
	color: var(--accent-text);
}

.btn-primary:hover:not(:disabled) {
	background: var(--accent-hover);
	color: var(--accent-text);
}

.btn-secondary {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text-secondary);
}

.btn-secondary:hover:not(:disabled) {
	background: var(--nav-hover-bg);
	color: var(--text-primary);
}

.btn-danger {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text-secondary);
	font-weight: 500;
}

.btn-danger:hover:not(:disabled) {
	background: var(--danger);
	border-color: var(--danger);
	color: #ffffff;
}

.btn-sm {
	padding: 6px 14px;
	font-size: 0.85rem;
	height: 34px;
	box-sizing: border-box;
}

/* ── Telegram icon in button ──────────────────────────────────────────── */

.tg-icon {
	width: 20px;
	height: 20px;
}

/* ── Login: Email form & divider ──────────────────────────────────────── */

.login-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0;
	color: var(--text-muted);
	font-size: 0.85rem;
}

.login-divider::before,
.login-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--border);
}

.email-login-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.email-login-form .profile-email-input {
	width: 100%;
	min-width: 0;
}

.login-buttons-row {
	display: flex;
	gap: 8px;
}

.login-buttons-row .btn {
	flex: 1;
	padding: 6px 10px;
	font-size: 0.8rem;
	min-height: 0;
}

.login-forgot-password {
	margin-top: 14px;
	font-size: 0.82rem;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.login-forgot-link {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: var(--accent);
	cursor: pointer;
	text-decoration: underline;
}

.login-forgot-link:hover {
	text-decoration: none;
}

.login-forgot-link.disabled {
	color: var(--text-muted);
	cursor: default;
	pointer-events: none;
	text-decoration: none;
}

.login-coming-soon {
	color: var(--text-muted);
	font-size: 0.78rem;
}

/* ── Magic link inline success block ─────────────────────────────────── */

.magic-link-sent-inline {
	padding: 12px;
	text-align: center;
}

.magic-link-sent-line1 {
	color: var(--success);
	font-weight: 500;
	margin-bottom: 4px;
}

.magic-link-sent-line2 {
	color: var(--text-secondary);
	font-size: 0.85rem;
}

/* ── Registration: Mode toggle & link ────────────────────────────────── */

/* ── Auth tabs (login / register) ─────────────────────────────────────── */

.auth-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 20px;
	border-bottom: 2px solid var(--border);
}

.auth-tab {
	flex: 1;
	padding: 12px 16px;
	border: none;
	background: none;
	color: var(--text-secondary);
	font-family: var(--font-primary);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color 0.15s, border-color 0.15s;
}

.auth-tab:hover {
	color: var(--text-primary);
}

.auth-tab.active {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

.register-mode-toggle {
	display: flex;
	gap: 0;
	margin-bottom: 16px;
	border: 1px solid var(--border);
	border-radius: var(--border-radius-sm);
	overflow: hidden;
}

.register-mode-btn {
	flex: 1;
	padding: 8px 12px;
	border: none;
	background: var(--bg-main);
	color: var(--text-secondary);
	font-family: var(--font-primary);
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.register-mode-btn:not(:last-child) {
	border-right: 1px solid var(--border);
}

.register-mode-btn:hover {
	background: var(--nav-hover-bg);
	color: var(--text-primary);
}

.register-mode-btn.active {
	background: var(--accent);
	color: var(--accent-text);
}

/* ── State visibility ─────────────────────────────────────────────────── */

.state {
	display: none;
}

.state.active {
	display: block;
}

/* hidden class for cabinet sections */
.tab-panel {
	display: none;
}

.tab-panel.active {
	display: block;
}

/* ── Login: Waiting state ─────────────────────────────────────────────── */

.deeplink-box {
	background: var(--bg-deeplink);
	border: 1px solid var(--border-deeplink);
	border-radius: var(--border-radius);
	padding: 16px;
	margin-bottom: 16px;
	word-break: break-all;
}

.deeplink-box a {
	color: var(--accent);
	text-decoration: none;
	font-size: 0.9rem;
}

.deeplink-box a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

.timer {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 8px;
}

.timer-label {
	font-size: 0.85rem;
	color: var(--text-secondary);
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--spinner-track);
	border-top-color: var(--spinner-head);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	flex-shrink: 0;
}

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

/* ── Login: Authenticated state (avatar) ──────────────────────────────── */

.avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--avatar-bg);
	color: var(--avatar-text);
	font-size: 1.5rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.display-name {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 4px;
}

.auth-status {
	color: var(--success);
	font-size: 0.85rem;
	margin-bottom: 24px;
}

/* ── Error message ────────────────────────────────────────────────────── */

.error-msg {
	color: var(--danger);
	font-size: 0.85rem;
	margin-top: 12px;
	min-height: 1.2em;
}

/* ── Connections: Filter bar ──────────────────────────────────────────── */

.filter-bar {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}

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

.filter-bar:last-of-type {
	margin-bottom: 16px;
}

.filter-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	gap: 6px;
	padding: 6px 14px;
	height: 34px;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--bg-main);
	color: var(--text-secondary);
	font-family: var(--font-primary);
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	box-sizing: border-box;
}

.filter-btn:hover {
	background: var(--nav-hover-bg);
	color: var(--text-primary);
}

.filter-btn.active {
	background: var(--accent);
	color: var(--accent-text);
	border-color: var(--accent);
}

.filter-separator {
	color: var(--border);
	font-size: 1.2rem;
	line-height: 1;
	user-select: none;
}

.filter-count {
	font-size: 0.8rem;
	opacity: 0.8;
}

/* ── Connections: Loading spinner ────────────────────────────────────── */

.connections-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 60px 20px;
	color: var(--text-secondary);
	font-size: 0.9rem;
}

/* ── Connections: Empty state ────────────────────────────────────────── */

.connections-empty {
	text-align: center;
	padding: 60px 20px;
}

.connections-empty-icon {
	font-size: 3rem;
	margin-bottom: 16px;
	opacity: 0.35;
}

.connections-empty-text {
	font-size: 1rem;
	color: var(--text-secondary);
}

/* ── Connections: Card list ──────────────────────────────────────────── */

.connections-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ── Connection card ─────────────────────────────────────────────────── */

.connection-card {
	background: var(--bg-card);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-card);
	padding: 20px 24px;
	transition: box-shadow 0.15s;
}

.connection-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.connection-card.disabled {
	opacity: 0.55;
}

.connection-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px;
}

.connection-location {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1rem;
	font-weight: 500;
	color: var(--text-primary);
}

.connection-location-flag {
	width: 24px;
	height: 18px;
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	vertical-align: middle;
}

.connection-badges {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

/* ── Protocol badge ──────────────────────────────────────────────────── */

.protocol-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
	line-height: 1.4;
}

.protocol-badge.amnezia1 {
	background: #e3f2fd;
	color: #1565c0;
}

.protocol-badge.wireguard {
	background: #e8f5e9;
	color: #2e7d32;
}

.protocol-badge.amnezia2 {
	background: #f3e5f5;
	color: #7b1fa2;
}

.protocol-badge.vless {
	background: #fff3e0;
	color: #e65100;
}

.disabled-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 600;
	background: #fce4ec;
	color: #c62828;
	line-height: 1.4;
}

/* ── Connection name ─────────────────────────────────────────────────── */

.connection-name {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text-heading);
	margin-bottom: 12px;
}

.connection-name.connection-name-inline {
	margin-bottom: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── Connection details ──────────────────────────────────────────────── */

.connection-details {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-bottom: 16px;
	font-size: 0.85rem;
	color: var(--text-secondary);
}

.connection-filename {
	margin-left: auto;
	font-size: 0.8rem;
	color: var(--text-muted);
	font-family: monospace;
}

.connection-detail-label {
	color: var(--text-muted);
}

/* ── Traffic info ────────────────────────────────────────────────────── */

.traffic-info {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.traffic-down {
	color: var(--text-secondary);
}

.traffic-up {
	color: var(--text-secondary);
}

.traffic-arrow {
	font-weight: 700;
	margin-right: 2px;
}

.traffic-arrow.down {
	color: #2196f3;
}

.traffic-arrow.up {
	color: #ff9800;
}

/* ── Action buttons ──────────────────────────────────────────────────── */

.action-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--border-light);
}

.btn-action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid var(--border);
	border-radius: var(--border-radius-sm);
	background: var(--bg-main);
	color: var(--text-secondary);
	font-family: var(--font-primary);
	font-size: 0.82rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	white-space: nowrap;
}

.btn-action:hover {
	background: var(--nav-hover-bg);
	color: var(--text-primary);
	border-color: var(--text-muted);
}

.btn-action:active {
	transform: scale(0.97);
}

.btn-action:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.btn-action-icon {
	font-size: 1rem;
	line-height: 1;
}

/* ── Copy link panel (inline below button) ───────────────────────────── */

.copy-link-panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-top: 10px;
	padding: 8px 12px;
	background: var(--bg-deeplink);
	border: 1px solid var(--border-deeplink);
	border-radius: var(--border-radius-sm);
	font-size: 0.82rem;
	word-break: break-all;
}

.copy-link-hint {
	width: 100%;
	font-size: 0.78rem;
	color: var(--text-muted);
	line-height: 1.4;
	margin-top: 4px;
}

.copy-link-url {
	flex: 1;
	color: var(--accent);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.btn-copy {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border: 1px solid var(--border);
	border-radius: var(--border-radius-sm);
	background: var(--bg-main);
	color: var(--text-secondary);
	font-family: var(--font-primary);
	font-size: 0.78rem;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s;
	flex-shrink: 0;
}

.btn-copy:hover {
	background: var(--nav-hover-bg);
	color: var(--text-primary);
}

.btn-copy.copied {
	background: var(--success);
	color: #ffffff;
	border-color: var(--success);
}

/* ── QR Modal ────────────────────────────────────────────────────────── */

.qr-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.qr-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
}

.qr-modal-card {
	position: relative;
	background: var(--bg-main);
	border-radius: var(--border-radius-lg);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
	padding: 28px;
	text-align: center;
	max-width: 360px;
	width: 100%;
	z-index: 1;
}

.qr-modal-title {
	font-family: var(--font-heading);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--text-heading);
	margin-bottom: 20px;
}

.qr-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: var(--text-muted);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, color 0.15s;
}

.qr-modal-close:hover {
	background: var(--nav-hover-bg);
	color: var(--text-primary);
}

.qr-modal-image {
	max-width: 280px;
	width: 100%;
	height: auto;
	border-radius: var(--border-radius-sm);
}

.qr-modal-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 40px 0;
	color: var(--text-secondary);
	font-size: 0.9rem;
}

.qr-modal-error {
	padding: 40px 0;
	color: var(--danger);
	font-size: 0.9rem;
}

/* ── Delete button (danger variant of btn-action) ──────────────────── */

.btn-action-danger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid var(--border);
	border-radius: var(--border-radius-sm);
	background: var(--bg-main);
	color: var(--text-secondary);
	font-family: var(--font-primary);
	font-size: 0.82rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	white-space: nowrap;
}

.btn-action-danger:hover {
	background: var(--danger);
	color: #ffffff;
	border-color: var(--danger);
}

.btn-action-danger:active {
	transform: scale(0.97);
}

.btn-action-danger:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Inline rename ─────────────────────────────────────────────────── */

.rename-inline {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.rename-input {
	flex: 1;
	min-width: 120px;
	padding: 8px 10px;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text-heading);
	background: var(--surface-color);
	border: 1.5px solid var(--border-color);
	border-radius: 8px;
	outline: none;
	transition: border-color 0.15s;
	box-sizing: border-box;
}

.rename-input:focus {
	border-color: var(--accent-color);
}

.rename-input-error {
	border-color: var(--danger-color, #e74c3c);
}

.rename-input:disabled {
	opacity: 0.6;
}

.rename-error-msg {
	font-size: 0.82rem;
	color: var(--danger-color, #e74c3c);
	margin-top: 6px;
}

/* ── Confirm dialog ────────────────────────────────────────────────── */

.confirm-dialog-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.confirm-dialog {
	position: relative;
	background: var(--bg-main);
	border-radius: var(--border-radius-lg);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
	padding: 28px;
	max-width: 400px;
	width: 100%;
	z-index: 1;
}

.confirm-dialog-title {
	font-family: var(--font-heading);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--text-heading);
	margin-bottom: 12px;
}

.confirm-dialog-message {
	font-size: 0.9rem;
	color: var(--text-secondary);
	line-height: 1.5;
	margin-bottom: 8px;
}

.confirm-dialog-info {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	color: var(--text-primary);
	margin-bottom: 20px;
}

.confirm-dialog-flag {
	width: 24px;
	height: 18px;
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.confirm-dialog-buttons {
	display: flex;
	gap: 10px;
}

.confirm-dialog-buttons .btn {
	flex: 1;
}

.btn-danger-confirm {
	background: var(--danger);
	color: #ffffff;
	border: none;
}

.btn-danger-confirm:hover:not(:disabled) {
	background: var(--danger-hover);
}

.btn-danger-confirm:disabled {
	opacity: 0.7;
}

/* ── Profile blocks ──────────────────────────────────────────────────── */

.profile-block {
	background: var(--bg-card);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-card);
	padding: 20px 24px;
	margin-bottom: 16px;
}

.profile-block-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.profile-block-icon {
	font-size: 1.2rem;
	line-height: 1;
}

.profile-block-title {
	font-family: var(--font-heading);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text-heading);
}

.profile-block-body {
	padding-left: 28px;
}

.profile-email-display {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.profile-email-address {
	font-weight: 600;
	color: var(--text-primary);
	word-break: break-all;
}

.profile-email-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
}

.profile-email-badge.verified {
	background: #e8f5e9;
	color: #2e7d32;
}

.profile-email-badge.unverified {
	background: #fff3e0;
	color: #e65100;
}

.profile-status-text {
	color: var(--text-secondary);
	font-size: 0.9rem;
	margin-bottom: 4px;
}

.profile-hint-text {
	color: var(--text-muted);
	font-size: 0.85rem;
	line-height: 1.5;
	margin-bottom: 12px;
}

.profile-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.profile-verification-sent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 12px 16px;
	background: #e8f5e9;
	border-radius: var(--border-radius-sm);
	margin-bottom: 12px;
}

.profile-verification-sent-icon {
	font-size: 1.2rem;
	line-height: 1;
	flex-shrink: 0;
}

.profile-verification-sent-text {
	font-size: 0.9rem;
	color: var(--text-primary);
}

.profile-verification-sent-text strong {
	font-weight: 600;
}

.profile-verification-sent-hint {
	font-size: 0.85rem;
	color: var(--text-secondary);
	margin-top: 4px;
}

/* Passwordless registration — "Без пароля" checkbox and hint text.
   Replaces inline styles that previously lived in app.js and the implicit
   zero-CSS state of #register-nopassword-wrap. */

.register-nopassword-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0 4px;
	font-size: 0.9rem;
	color: var(--text-secondary);
	cursor: pointer;
}

.register-nopassword-label input[type="checkbox"] {
	flex-shrink: 0;
	cursor: pointer;
}

.register-nopassword-label input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.register-magic-link-hint {
	margin-top: 6px;
	opacity: 0.85;
}

/* Profile email edit form */

.profile-email-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.profile-email-input {
	flex: 1;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: var(--border-radius-sm);
	font-family: var(--font-primary);
	font-size: 0.9rem;
	color: var(--text-primary);
	background: var(--bg-main);
	outline: none;
	transition: border-color 0.15s;
}

.profile-email-input:focus {
	border-color: var(--accent);
}

.profile-email-input::placeholder {
	color: var(--text-muted);
}

/* ── Payment-status polling loader ───────────────────────────────────── */

.payment-checking-loader {
	margin-top: 12px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--text-secondary);
	font-size: 0.9rem;
}

.payment-checking-loader .spinner {
	width: 14px;
	height: 14px;
}

/* ── Toast notification ──────────────────────────────────────────────── */

.toast-success {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%) translateY(-100px);
	background: #2e7d32;
	color: #fff;
	padding: 14px 28px;
	border-radius: 8px;
	font-size: 0.95rem;
	font-weight: 500;
	box-shadow: 0 4px 20px rgba(0,0,0,0.2);
	z-index: 10000;
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.toast-success.visible,
.toast-error.visible {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
}

.toast-error {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%) translateY(-100px);
	background: #c62828;
	color: #fff;
	padding: 14px 28px;
	border-radius: 8px;
	font-size: 0.95rem;
	font-weight: 500;
	box-shadow: 0 4px 20px rgba(0,0,0,0.2);
	z-index: 10000;
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.toast-persistent {
	padding-right: 48px;
	position: fixed;
}

.toast-close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	opacity: 0.7;
	border-radius: 4px;
}

.toast-close:hover,
.toast-close:focus-visible {
	opacity: 1;
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.profile-progress {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	margin-top: 12px;
	background: #e3f2fd;
	border-radius: 4px;
	font-size: 0.9rem;
	color: var(--text-primary);
}

.profile-email-error {
	width: 100%;
	color: var(--danger);
	font-size: 0.82rem;
	margin-top: 4px;
}

/* Inline per-field validation message (shown as user types) */
.field-error {
	color: var(--danger, #c0392b);
	font-size: 0.82rem;
	margin-top: 4px;
	line-height: 1.3;
}

/* ── Create connection: Button ───────────────────────────────────────── */

.create-connection-btn {
	margin-bottom: 20px;
	gap: 6px;
}

/* ── Create connection: Step container ──────────────────────────────── */

.create-step {
	background: var(--bg-card);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-card);
	padding: 24px;
	margin-bottom: 16px;
}

.create-step-title {
	font-family: var(--font-heading);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--text-heading);
	margin-bottom: 16px;
}

.create-step-hint {
	color: var(--text-muted);
	font-size: 0.85rem;
	margin: -8px 0 12px 0;
}

.create-step-actions {
	margin-top: 16px;
}

.create-back-btn {
	margin-top: 16px;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 10px 24px;
	background: #fff;
	color: var(--text-primary);
	font-size: 0.95rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.create-back-btn:hover {
	background: var(--nav-hover-bg);
	border-color: var(--text-primary);
}

/* ── Create connection: Protocol options ────────────────────────────── */

.protocol-options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
}

.protocol-option {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 20px;
	border: 2px solid var(--border);
	border-radius: var(--border-radius);
	background: var(--bg-main);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
	text-align: left;
	font-family: var(--font-primary);
}

.protocol-option:hover {
	border-color: var(--accent);
	background: var(--nav-hover-bg);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.protocol-option:active {
	transform: scale(0.98);
}

.protocol-option-name {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
}

.protocol-option-desc {
	font-size: 0.82rem;
	color: var(--text-secondary);
	line-height: 1.4;
}

.protocol-option-badge {
	display: inline-flex;
	align-self: flex-start;
	margin-top: 4px;
}

/* ── Create connection: Location options ────────────────────────────── */

.location-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.location-option {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 18px;
	border: 2px solid var(--border);
	border-radius: var(--border-radius);
	background: var(--bg-main);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	text-align: left;
	font-family: var(--font-primary);
	width: 100%;
}

.location-option:hover {
	border-color: var(--accent);
	background: var(--nav-hover-bg);
}

.location-option:active {
	transform: scale(0.98);
}

.location-option-name-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.location-option-flag {
	width: 32px;
	height: 24px;
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	flex-shrink: 0;
}

.location-option-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.location-option-name {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text-primary);
}

.location-option-via {
	font-size: 0.8rem;
	color: var(--text-muted);
}

.location-option-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 6px;
}

.location-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 0.72rem;
	font-weight: 600;
	white-space: nowrap;
	line-height: 1.4;
	background: var(--border-light);
	color: var(--text-secondary);
}

.location-tag-ultrafast {
	background: #e0f7f7;
	color: #0a9396;
}

.location-tag-fast {
	background: #e8f5e9;
	color: #2e7d32;
}

.location-tag-youtube {
	background: #fce4ec;
	color: #c62828;
}

.location-tag-torrents {
	background: #e3f2fd;
	color: #1565c0;
}

/* ── Create connection: Name suggestions ────────────────────────────── */

.name-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.name-suggestion {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--border);
	border-radius: var(--border-radius-sm);
	background: var(--bg-main);
	color: var(--text-secondary);
	font-family: var(--font-primary);
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.name-suggestion:hover {
	background: var(--nav-hover-bg);
	color: var(--text-primary);
	border-color: var(--text-muted);
}

.name-suggestion.selected {
	background: var(--accent);
	color: var(--accent-text);
	border-color: var(--accent);
}

.name-suggestion-icon {
	font-size: 1rem;
	line-height: 1;
}

#connection-name-input {
	width: 100%;
	max-width: 400px;
}

/* ── Create connection: Result step ─────────────────────────────────── */

.create-result-qr {
	display: flex;
	justify-content: center;
	margin-bottom: 16px;
}

.create-result-qr img {
	max-width: 240px;
	width: 100%;
	height: auto;
	border-radius: var(--border-radius-sm);
}

.create-result-qr .spinner {
	margin: 40px 0;
}

.create-result-location {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: 20px;
}

.create-result-connname {
	font-size: 0.9rem;
	color: var(--text-secondary);
	margin-bottom: 16px;
}

.create-result-hint {
	text-align: left;
	font-size: 0.85rem;
	color: var(--text-secondary);
	margin-bottom: 16px;
	line-height: 1.5;
}


.create-result-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.create-result-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

/* ── Mobile bottom navigation ────────────────────────────────────────── */

/* ── Profile action badge (pulsing red dot) ─────────────────────────────── */

.profile-badge {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #e53935;
	border-radius: 50%;
	margin-left: 4px;
	vertical-align: top;
	animation: pulse-badge 1.5s ease-in-out infinite;
}

@keyframes pulse-badge {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.5; transform: scale(1.3); }
}

/* ── Telegram-origin banner (shown once per LK arrival from TG autologin) ── */

/*
 * Prompts the user to bookmark the LK URL so they can reach the account page
 * even if VPN/Telegram become unreachable later. Structure mirrors the profile
 * prompt banner (sibling above) but uses a slightly more prominent accent-tinted
 * card: the message is one-time and actionable, not an ambient hint. All colours
 * come from theme variables so franchises restyle automatically.
 */
.tg-origin-banner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px;
	background: var(--bg-card);
	border: 1px solid var(--accent);
	border-left: 4px solid var(--accent);
	border-radius: var(--border-radius-sm);
	margin-bottom: 12px;
	color: var(--text-primary);
	position: relative;
}

.tg-origin-banner-content {
	flex: 1 1 auto;
	min-width: 0;  /* lets the URL wrap instead of overflowing on narrow screens */
	padding-right: 24px;  /* room for the absolute-positioned close button */
}

.tg-origin-banner-title {
	font-weight: 700;
	font-size: 0.95rem;
	margin-bottom: 6px;
	line-height: 1.3;
}

.tg-origin-banner-body1,
.tg-origin-banner-body2 {
	font-size: 0.88rem;
	line-height: 1.4;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.tg-origin-banner-body1 {
	margin-bottom: 6px;
}

/* URL snippet — monospaced, selectable, visually distinct from surrounding prose. */
.tg-origin-banner-body1 code {
	display: inline;
	padding: 1px 6px;
	background: var(--bg-subtle, rgba(0, 0, 0, 0.05));
	border-radius: 3px;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.9em;
	user-select: all;
	word-break: break-all;
}

.tg-origin-banner-body2 a {
	color: var(--accent);
	text-decoration: underline;
	font-weight: 600;
}

.tg-origin-banner-body2 a:hover,
.tg-origin-banner-body2 a:focus {
	text-decoration: none;
}

.tg-origin-banner-close {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 32px;
	min-height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--text-secondary, var(--text-primary));
	cursor: pointer;
	padding: 0;
}

.tg-origin-banner-close:hover {
	color: var(--text-primary);
}

.tg-origin-banner-close:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	color: var(--text-primary);
}

@media (max-width: 600px) {
	.tg-origin-banner {
		padding: 10px 12px;
		gap: 8px;
	}
	.tg-origin-banner-title {
		font-size: 0.9rem;
	}
	.tg-origin-banner-body1,
	.tg-origin-banner-body2 {
		font-size: 0.82rem;
	}
}

/* ── Profile prompt banner (yellow, on connections tab) ──────────────────── */

.profile-prompt-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	padding: 10px 16px;
	background: #fff8e1;
	border: 1px solid #ffe082;
	border-radius: var(--border-radius-sm);
	margin-bottom: 12px;
	font-size: 0.85rem;
	color: #5d4037;
	position: relative;
}

.profile-prompt-banner .profile-prompt-close {
	position: absolute;
	top: 6px;
	right: 8px;
}

.profile-prompt-text {
	flex: 1 1 100%;
	padding-right: 20px;
}

.profile-prompt-link {
	color: var(--accent);
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
}

.profile-prompt-link:hover {
	text-decoration: underline;
}

.profile-prompt-close {
	background: none;
	border: none;
	font-size: 1.2rem;
	color: #8d6e63;
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
}

/* ── Subscription summary chip (inline next to "Подключения" title) ──────── */

.section-title-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	min-height: 32px;
}

.subscription-summary-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--border-radius-sm);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	background: var(--bg-card);
	color: var(--text-primary);
	border: none;
}

.subscription-summary-chip.active {
	background: var(--chip-success, #15803d);
	color: var(--chip-success-text, #ffffff);
}

.subscription-summary-chip.inactive {
	background: var(--chip-danger, #b91c1c);
	color: var(--chip-danger-text, #ffffff);
}

@media (max-width: 480px) {
	.section-title-row {
		flex-wrap: wrap;
	}
	.section-title-row > .subscription-summary-chip {
		width: 100%;
		margin-top: 4px;
	}
	.subscription-summary-chip {
		font-size: 0.78rem;
		padding: 5px 10px;
	}
}

.mobile-bottom-nav {
	display: none;
}

.connections-actions-row {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 8px;
}

/* ── Mobile: fixed create button bar (hidden by default) ─────────────── */

.mobile-create-bar {
	display: none;
}

@media (max-width: 620px) {
	/* Bottom navigation */
	.mobile-bottom-nav {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: var(--bg-main);
		border-top: 1px solid var(--border);
		z-index: 100;
		padding: 6px 0;
		justify-content: space-around;
	}

	.mobile-nav-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		background: none;
		border: none;
		color: var(--text-muted);
		font-size: 0.68rem;
		font-family: var(--font-primary);
		cursor: pointer;
		padding: 4px 12px;
		transition: color 0.15s;
		position: relative;
	}

	.mobile-nav-btn .profile-badge {
		position: absolute;
		top: 2px;
		right: 8px;
	}

	.mobile-nav-btn.active {
		color: var(--accent);
	}

	.mobile-nav-icon {
		font-size: 1.3rem;
		line-height: 1;
	}

	/* Hide top nav on mobile */
	.cabinet-nav {
		display: none;
	}

	/* Space for bottom nav + create bar */
	.cabinet-footer {
		margin-bottom: 116px;
	}

	/* Hide inline create button on mobile (redundant with fixed bar) */
	#create-connection-btn {
		display: none !important;
	}

	/* ── Mobile: fixed create button above bottom nav ──────────────── */

	.mobile-create-bar {
		position: fixed;
		bottom: 56px;
		left: 0;
		right: 0;
		padding: 8px 16px;
		background: var(--bg-main);
		border-top: 1px solid var(--border);
		z-index: 100;
	}

	.mobile-create-bar .btn {
		width: 100%;
	}

	/* ── Mobile: confirm dialog as bottom sheet ─────────────────────── */

	.confirm-dialog-overlay {
		align-items: flex-end;
		padding: 0;
	}

	.confirm-dialog {
		border-radius: 16px 16px 0 0;
		max-width: none;
		padding: 20px;
		transform: translateY(100%);
		transition: transform 0.25s ease-out;
	}

	.confirm-dialog-overlay.open .confirm-dialog {
		transform: translateY(0);
	}

	.confirm-dialog-buttons {
		flex-direction: column;
	}

	.btn-action-danger {
		padding: 6px 10px;
		justify-content: center;
		font-size: 0.78rem;
	}
}

/* ── Existing 620px responsive ──────────────────────────────────────── */

@media (max-width: 620px) {
	.login-card {
		padding: 24px 16px;
	}

	.login-card h1 {
		font-size: 1.3rem;
	}

	.cabinet-header-inner {
		height: 48px;
	}

	.header-logo {
		font-size: 1.1rem;
	}

	.header-user {
		display: none;
	}

	.nav-tab {
		padding: 10px 14px;
		font-size: 0.85rem;
	}

	.cabinet-body {
		padding: 16px 12px;
	}

	.section-title {
		font-size: 1.25rem;
	}

	.content-card {
		padding: 16px;
	}

	.placeholder-section {
		padding: 40px 12px;
	}

	/* Create connection responsive */
	.protocol-options {
		grid-template-columns: 1fr;
	}

	.protocol-option {
		padding: 14px 16px;
	}

	.location-option {
		padding: 12px 14px;
		gap: 10px;
	}

	.location-option-flag {
		width: 28px;
		height: 20px;
	}

	.create-step {
		padding: 16px;
	}

	.name-suggestions {
		gap: 6px;
	}

	.name-suggestion {
		padding: 6px 10px;
		font-size: 0.8rem;
	}

	.create-result-actions {
		flex-direction: column;
	}

	.create-result-actions .btn-action,
	.create-result-actions .btn {
		width: 100%;
		justify-content: center;
	}

	/* Profile responsive */
	.profile-block {
		padding: 16px;
	}

	.profile-block-body {
		padding-left: 0;
	}

	/* On mobile, profile edit forms stack: input on its own row,
	   buttons wrap to a second row */
	.profile-email-form .profile-email-input {
		flex-basis: 100%;
	}

	/* Connections responsive */
	.connection-card {
		padding: 16px;
	}

	.connection-card-header {
		flex-wrap: wrap;
		gap: 8px;
	}

	.connection-location {
		font-size: 0.9rem;
	}

	.connection-name {
		font-size: 0.9rem;
	}

	.connection-details {
		font-size: 0.8rem;
		gap: 6px 16px;
	}

	.action-buttons {
		gap: 6px;
	}

	.btn-action {
		padding: 6px 10px;
		font-size: 0.78rem;
	}

	.filter-bar {
		gap: 6px;
	}

	.filter-btn {
		padding: 5px 10px;
		font-size: 0.8rem;
	}
}

@media (max-width: 360px) {
	.login-card {
		padding: 20px 12px;
	}

	.btn {
		padding: 10px 16px;
		font-size: 0.9rem;
	}

	.action-buttons {
		flex-direction: column;
	}

	.btn-action {
		width: 100%;
		justify-content: center;
	}
}

/* ── Support tab — rendered markdown content ───────────────────────────── */

.support-content {
	line-height: 1.6;
	color: var(--text-primary);
}

.support-content p {
	margin: 0 0 12px 0;
}

.support-content ul {
	list-style: none;
	padding: 0;
	margin: 0 0 16px 0;
}

.support-content ul li {
	padding: 10px 14px;
	margin-bottom: 8px;
	background: var(--bg-main);
	border: 1px solid var(--border);
	border-radius: var(--border-radius-sm);
	font-size: 0.95rem;
}

.support-content a {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	font-weight: 500;
}

.support-content a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.support-content a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.support-content blockquote {
	margin: 16px 0 0 0;
	padding: 12px 16px;
	background: rgba(34, 197, 94, 0.08);
	border-left: 3px solid var(--success);
	border-radius: var(--border-radius-sm);
	color: var(--text-secondary);
	font-size: 0.9rem;
}

.support-content blockquote p:last-child {
	margin-bottom: 0;
}

/* ── Support tab — user-manuals help block (accordion + fallback CTA) ──── */

.support-help-block {
	margin-bottom: 24px;
	padding: 16px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
}

/* On the create-result step the block sits under the actions row with no gap —
   add top spacing so it doesn't visually merge with the "Получить ссылку" button. */
#create-step-result .support-help-block {
	margin-top: 24px;
}

/* ── Skeleton shimmer (shared base) ──────────────────────────────────── */

.skeleton-line {
	background: linear-gradient(
		90deg,
		var(--border) 0%,
		var(--bg-main) 50%,
		var(--border) 100%
	);
	background-size: 200% 100%;
	animation: skeleton-shimmer 1.4s ease-in-out infinite;
	border-radius: 4px;
}

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

/* Respect reduced-motion preference — freeze the shimmer. */
@media (prefers-reduced-motion: reduce) {
	.skeleton-line {
		animation: none;
		background: var(--border);
	}
}

/* ── Support-help skeleton (same outer shape as .support-help-block) ──── */

.support-help-skeleton .skeleton-title {
	width: 40%;
	max-width: 160px;
	height: 22px;
	margin: 4px 0 18px 0;
}

.support-help-skeleton .skeleton-row {
	height: 38px;
	margin-bottom: 8px;
}

.support-help-skeleton .skeleton-row:last-child {
	margin-bottom: 0;
}

/* ── Connection card skeleton (same .connection-card outer box) ──────── */

.connection-card-skeleton {
	pointer-events: none;
}

.connection-card-skeleton .skeleton-card-flag-name {
	width: 140px;
	height: 18px;
}

.connection-card-skeleton .skeleton-card-badge {
	width: 80px;
	height: 20px;
	border-radius: 12px;
	margin-left: auto;
}

.connection-card-skeleton .skeleton-card-name {
	width: 60%;
	max-width: 240px;
	height: 16px;
	margin: 10px 0 12px 0;
}

.connection-card-skeleton .skeleton-card-details {
	width: 80%;
	height: 12px;
	margin-bottom: 16px;
}

.connection-card-skeleton .skeleton-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--border-light);
}

.connection-card-skeleton .skeleton-card-btn {
	width: 90px;
	height: 30px;
	border-radius: var(--border-radius-sm);
}

@media (max-width: 620px) {
	.connection-card-skeleton .skeleton-card-btn {
		width: 72px;
		height: 26px;
	}
}

/* ── Subscription tab skeleton (mimics .subscription-grid + history card) */

.subscription-skeleton {
	pointer-events: none;
}

.subscription-skeleton .skeleton-sub-title {
	height: 20px;
	width: 45%;
	max-width: 180px;
	margin: 0 0 16px 0;
}

.subscription-skeleton .skeleton-sub-line {
	height: 14px;
	margin-bottom: 10px;
}

.subscription-skeleton .skeleton-sub-line-short {
	width: 60%;
}

.subscription-skeleton .skeleton-sub-line:last-child {
	margin-bottom: 0;
}

/* ── QR modal skeleton (mimics 280×280 QR image) ─────────────────────── */

.qr-skeleton {
	width: 280px;
	height: 280px;
	max-width: 100%;
	margin: 0 auto;
}

/* ── Protocol-options skeleton (mimics .protocol-option cards on Step 1) */

.protocol-option-skeleton {
	pointer-events: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 20px;
	border: 2px solid var(--border);
	border-radius: var(--border-radius);
	background: var(--bg-main);
}

.protocol-option-skeleton .skeleton-proto-name {
	height: 16px;
	width: 55%;
	max-width: 140px;
}

.protocol-option-skeleton .skeleton-proto-desc {
	height: 12px;
	width: 85%;
}

/* ── Payment-plan skeleton (mimics .payment-plan-card in the plans grid) */

.payment-plan-skeleton {
	pointer-events: none;
	border: 2px solid var(--border-light);
	border-radius: var(--border-radius);
	padding: 16px;
	background: var(--bg-card);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.payment-plan-skeleton .skeleton-plan-name {
	height: 16px;
	width: 60%;
	max-width: 120px;
}

.payment-plan-skeleton .skeleton-plan-price {
	height: 20px;
	width: 45%;
	max-width: 90px;
}

.support-help-title {
	margin: 0 0 12px 0;
	color: var(--text-heading);
	/* Inherit font-family (var(--font-primary)) from body — the whole block (summary,
	   subtitle, count, links, text) uses the primary font, mixing in --font-heading
	   here makes the title look like a foreign element. */
	font-size: 1.1rem;
	font-weight: 600;
}

.support-help-accordion details {
	border: 1px solid var(--border);
	border-radius: var(--border-radius-sm);
	background: var(--bg-main);
	margin-bottom: 8px;
	overflow: hidden;
}

.support-help-accordion details:last-child {
	margin-bottom: 0;
}

.support-help-accordion summary {
	cursor: pointer;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	flex-wrap: wrap; /* allow subtitle / count to wrap on narrow screens instead of overflowing */
	gap: 8px;
	color: var(--text-primary);
	font-size: 0.95rem;
	font-weight: 500;
	list-style: none; /* Firefox */
	user-select: none;
}

/* Hide native disclosure marker (Safari/Chrome) */
.support-help-accordion summary::-webkit-details-marker {
	display: none;
}

/* Custom disclosure marker — ASCII triangle to avoid emoji font fallbacks on older OSes */
.support-help-accordion summary::before {
	content: '\25B6'; /* ▶ */
	display: inline-block;
	font-size: 0.7rem;
	color: var(--text-muted);
	transition: transform 0.15s ease;
	flex-shrink: 0;
}

.support-help-accordion details[open] summary::before {
	transform: rotate(90deg);
}

.support-help-accordion summary:hover {
	background: var(--bg-card);
}

.support-help-accordion summary:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.support-help-name {
	/* Icon+name glued together but can wrap as a whole to the next line on narrow
	   viewports. min-width: 0 lets the flex item shrink below content size if needed. */
	white-space: normal;
	word-break: break-word;
	min-width: 0;
	flex: 1 1 auto;
}

.support-help-subtitle {
	color: var(--text-secondary);
	font-size: 0.85rem;
	font-weight: 400;
}

.support-help-count {
	margin-left: auto; /* push to right edge of summary */
	color: var(--text-muted);
	font-size: 0.8rem;
	font-weight: 400;
}

.support-help-accordion ul {
	list-style: none;
	margin: 0;
	padding: 4px 14px 10px 28px; /* align item text with summary name, leave room for marker */
	border-top: 1px solid var(--border-light);
}

.support-help-accordion ul li {
	padding: 6px 0;
	/* Override .support-content ul li defaults (this block is a sibling, not a descendant) */
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	font-size: 0.9rem;
}

.support-help-accordion a {
	color: var(--accent);
	text-decoration: none;
	font-weight: 400;
}

.support-help-accordion a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

.support-help-accordion a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Simple CTA card — shown when TOC failed but the public help URL is configured */
.support-help-fallback {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.support-help-text {
	margin: 0;
	color: var(--text-secondary);
	font-size: 0.95rem;
	line-height: 1.5;
}

.support-help-cta {
	align-self: flex-start;
	color: var(--accent);
	font-weight: 500;
	text-decoration: none;
}

.support-help-cta:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

.support-help-cta:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Mobile — tighter spacing to match other support-tab breakpoints */
@media (max-width: 620px) {
	.support-help-block {
		padding: 12px;
		margin-bottom: 18px;
	}

	.support-help-title {
		font-size: 1rem;
		margin-bottom: 10px;
	}

	.support-help-accordion summary {
		padding: 10px 12px;
		font-size: 0.9rem;
		gap: 6px;
	}

	.support-help-subtitle {
		font-size: 0.8rem;
	}

	.support-help-count {
		font-size: 0.75rem;
	}

	.support-help-accordion ul {
		padding: 4px 12px 10px 22px;
	}

	.support-help-accordion ul li {
		font-size: 0.88rem;
	}
}


/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
}