/* =====================================================
   Subs — фронтенд: единая дизайн-система
   Источник: «Вход.html», «Регистрация.html», «Забыли пароль.html»,
            «Личный кабинет дизайн.html», «Успешная оплата.html»,
            «Оплата не прошла.html», «Чек.html», «Сообщения.html»
   ===================================================== */

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

/* =====================================================
   ОБЁРТКИ И ОБЩИЕ ПЕРЕМЕННЫЕ
   ===================================================== */
.subs-wrap-frontend,
.subs-auth-page,
.subs-dashboard {
	--bg: #F4F4F4;
	--accent-light: #EDEDED;
	--accent-mid: #DEDEDE;
	--accent-dark: #C3C3C3;
	--headline: #606A77;
	--text: #2D333C;
	--extra: #5D6D84;
	--card-bg: #FFFFFF;
	--success: #4CAF50;
	--danger: #F44336;
	font-family: 'Onest', 'Segoe UI', Helvetica, Arial, sans-serif;
	color: var(--text);
	line-height: 1.5;
}

.subs-wrap-frontend *,
.subs-wrap-frontend *::before,
.subs-wrap-frontend *::after,
.subs-auth-page *,
.subs-auth-page *::before,
.subs-auth-page *::after,
.subs-dashboard *,
.subs-dashboard *::before,
.subs-dashboard *::after { box-sizing: border-box; }

.subs-wrap-frontend h1, .subs-wrap-frontend h2, .subs-wrap-frontend h3, .subs-wrap-frontend h4,
.subs-auth-page h1, .subs-auth-page h2, .subs-auth-page h3, .subs-auth-page h4,
.subs-dashboard h1, .subs-dashboard h2, .subs-dashboard h3, .subs-dashboard h4 {
	font-family: 'Unbounded', sans-serif;
	font-weight: 600;
}

/* =====================================================
   СТРАНИЦЫ ОПЛАТЫ/ЧЕКА (фон-градиент)
   ===================================================== */
.subs-wrap-frontend {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: linear-gradient(135deg, #F4F4F4 0%, #EDEDED 100%);
	min-height: 100vh;
}

@keyframes subsFadeUp {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

.subs-wrap-frontend .success-card,
.subs-wrap-frontend .error-card {
	max-width: 500px;
	width: 100%;
	background: #fff;
	border-radius: 24px;
	border: 1px solid var(--accent-mid);
	box-shadow: 0 20px 35px -10px rgba(0,0,0,0.08);
	overflow: hidden;
	text-align: center;
	animation: subsFadeUp 0.5s ease;
}
.subs-wrap-frontend .success-header,
.subs-wrap-frontend .error-header {
	background: linear-gradient(135deg, #5D6D84 0%, #3a4a5c 100%);
	padding: 2rem;
	color: #fff;
}
.subs-wrap-frontend .success-icon,
.subs-wrap-frontend .error-icon {
	width: 80px; height: 80px;
	background: #fff;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 1rem;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.subs-wrap-frontend .success-icon i { font-size: 3rem; color: var(--success); }
.subs-wrap-frontend .error-icon i   { font-size: 3rem; color: var(--danger); }
.subs-wrap-frontend .success-header h1,
.subs-wrap-frontend .error-header h1 {
	font-family: 'Unbounded', sans-serif;
	font-size: 1.6rem; color: #fff; margin: 0 0 0.3rem 0;
}
.subs-wrap-frontend .success-header p,
.subs-wrap-frontend .error-header p { color: rgba(255,255,255,0.8); font-size: 0.9rem; margin: 0; }
.subs-wrap-frontend .success-body,
.subs-wrap-frontend .error-body { padding: 2rem; }

.subs-wrap-frontend .payment-details {
	background: #FAFAFA; border-radius: 16px; padding: 1.2rem;
	margin-bottom: 1.5rem; text-align: left;
	border: 1px solid var(--accent-light);
}
.subs-wrap-frontend .detail-row {
	display: flex; justify-content: space-between;
	padding: 0.7rem 0; border-bottom: 1px solid var(--accent-light);
}
.subs-wrap-frontend .detail-row:last-child { border-bottom: none; }
.subs-wrap-frontend .detail-label { color: var(--headline); font-size: 0.85rem; }
.subs-wrap-frontend .detail-value { font-weight: 600; color: var(--text); font-size: 0.95rem; }

.subs-wrap-frontend .next-steps,
.subs-wrap-frontend .help-box {
	background: var(--accent-light); border-radius: 16px;
	padding: 1.2rem; margin-bottom: 1.5rem; text-align: left;
}
.subs-wrap-frontend .next-steps h3,
.subs-wrap-frontend .help-box h3 {
	font-family: 'Unbounded', sans-serif; font-size: 0.9rem;
	color: var(--headline); margin: 0 0 0.8rem 0;
}
.subs-wrap-frontend .next-steps ul,
.subs-wrap-frontend .help-box ul { list-style: none; padding-left: 0; margin: 0; }
.subs-wrap-frontend .next-steps li,
.subs-wrap-frontend .help-box li {
	padding: 0.4rem 0; display: flex; align-items: center; gap: 0.5rem;
	font-size: 0.85rem; color: var(--text);
}
.subs-wrap-frontend .next-steps li i,
.subs-wrap-frontend .help-box li i { color: var(--extra); width: 1.2rem; text-align: center; }

.subs-wrap-frontend .error-message {
	background: #FFF5F5; border-radius: 16px; padding: 1.2rem;
	margin-bottom: 1.5rem; text-align: left; border: 1px solid #FFCDD2;
}
.subs-wrap-frontend .error-message p {
	color: #C62828; font-size: 0.9rem;
	display: flex; align-items: center; gap: 0.5rem; margin: 0;
}
.subs-wrap-frontend .error-message p + p { margin-top: 0.8rem; }
.subs-wrap-frontend .error-message p i { font-size: 1rem; }

.subs-wrap-frontend .buttons {
	display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}
.subs-wrap-frontend .btn {
	font-family: 'Onest', sans-serif; font-weight: 500;
	border: none; border-radius: 12px; padding: 0.8rem 1.8rem;
	cursor: pointer; font-size: 0.9rem;
	display: inline-flex; align-items: center; gap: 0.5rem;
	text-decoration: none; transition: all 0.2s;
}
.subs-wrap-frontend .btn-primary { background: var(--extra); color: #fff; }
.subs-wrap-frontend .btn-primary:hover { background: #4a5a6e; color: #fff; transform: translateY(-2px); }
.subs-wrap-frontend .btn-secondary { background: var(--accent-light); color: var(--text); }
.subs-wrap-frontend .btn-secondary:hover { background: var(--accent-mid); }
.subs-wrap-frontend .btn-outline { background: transparent; border: 1px solid var(--accent-mid); color: var(--text); }
.subs-wrap-frontend .btn-outline:hover { background: var(--accent-light); }

/* Чек / счёт */
.subs-wrap-frontend .invoice {
	max-width: 800px; width: 100%; background: #fff;
	border-radius: 24px; border: 1px solid var(--accent-mid);
	box-shadow: 0 20px 35px -10px rgba(0,0,0,0.08);
	overflow: hidden; animation: subsFadeUp 0.5s ease;
}
.subs-wrap-frontend .invoice-header {
	background: linear-gradient(135deg, #5D6D84 0%, #3a4a5c 100%);
	padding: 1.8rem 2rem; color: #fff;
	display: flex; justify-content: space-between; align-items: center;
	flex-wrap: wrap; gap: 1rem;
}
.subs-wrap-frontend .invoice-logo h2 {
	font-family: 'Unbounded', sans-serif; font-size: 1.5rem;
	margin: 0 0 0.2rem 0; color: #fff;
}
.subs-wrap-frontend .invoice-logo p { font-size: 0.8rem; opacity: 0.8; margin: 0; }
.subs-wrap-frontend .invoice-badge {
	background: rgba(255,255,255,0.2); padding: 0.5rem 1rem;
	border-radius: 50px; font-size: 0.85rem; font-weight: 500;
}
.subs-wrap-frontend .invoice-body { padding: 2rem; }
.subs-wrap-frontend .invoice-title {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 1.5rem; padding-bottom: 1rem;
	border-bottom: 2px solid var(--accent-light);
	flex-wrap: wrap; gap: 0.5rem;
}
.subs-wrap-frontend .invoice-title h3 {
	font-family: 'Unbounded', sans-serif; font-size: 1.3rem; color: var(--text); margin: 0;
}
.subs-wrap-frontend .invoice-status {
	padding: 0.3rem 1rem; border-radius: 50px; font-size: 0.8rem; font-weight: 600;
	display: inline-flex; align-items: center; gap: 0.4rem;
}
.subs-wrap-frontend .invoice-status-paid     { background: #E8F5E9; color: #4CAF50; }
.subs-wrap-frontend .invoice-status-pending  { background: #FFF3CD; color: #856404; }
.subs-wrap-frontend .invoice-status-failed   { background: #F8D7DA; color: #721C24; }
.subs-wrap-frontend .invoice-status-refunded { background: var(--accent-light); color: var(--headline); }
.subs-wrap-frontend .info-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem;
}
.subs-wrap-frontend .info-box {
	background: #FAFAFA; padding: 1rem; border-radius: 16px;
	border: 1px solid var(--accent-light);
}
.subs-wrap-frontend .info-box h4 {
	font-family: 'Unbounded', sans-serif; font-size: 0.8rem; color: var(--headline); margin: 0 0 0.8rem 0;
}
.subs-wrap-frontend .info-box p { font-size: 0.9rem; margin: 0 0 0.3rem 0; color: var(--text); }
.subs-wrap-frontend .info-box .small { font-size: 0.75rem; color: #999; }
.subs-wrap-frontend .items-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.subs-wrap-frontend .items-table th {
	text-align: left; padding: 0.8rem 0; font-weight: 600;
	color: var(--headline); border-bottom: 1px solid var(--accent-mid); font-size: 0.8rem;
}
.subs-wrap-frontend .items-table td {
	padding: 0.8rem 0; border-bottom: 1px solid var(--accent-light); font-size: 0.9rem; color: var(--text);
}
.subs-wrap-frontend .items-table .text-right { text-align: right; }
.subs-wrap-frontend .total-row {
	display: flex; justify-content: flex-end; margin-top: 1rem;
	padding-top: 1rem; border-top: 2px solid var(--accent-light);
}
.subs-wrap-frontend .total-box { width: 250px; max-width: 100%; }
.subs-wrap-frontend .total-line { display: flex; justify-content: space-between; padding: 0.5rem 0; }
.subs-wrap-frontend .total-line.grand-total {
	font-weight: 700; font-size: 1.1rem; color: var(--text);
	border-top: 1px solid var(--accent-mid); margin-top: 0.5rem; padding-top: 0.8rem;
}
.subs-wrap-frontend .invoice-footer {
	background: #FAFAFA; padding: 1.5rem 2rem; text-align: center;
	border-top: 1px solid var(--accent-light); font-size: 0.75rem; color: #999;
}
.subs-wrap-frontend .invoice-footer p { margin: 0; }
.subs-wrap-frontend .btn-download {
	background: var(--extra); color: #fff; border: none; border-radius: 12px;
	padding: 0.6rem 1.2rem; font-family: 'Onest', sans-serif; font-weight: 500;
	cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
	margin-top: 1rem; text-decoration: none; transition: background 0.2s;
}
.subs-wrap-frontend .btn-download:hover { background: #4a5a6e; color: #fff; }

/* =====================================================
   СТРАНИЦЫ АВТОРИЗАЦИИ (Вход / Регистрация / Забыли пароль)
   Источник: Вход.html, Регистрация.html, Забыли пароль.html
   ===================================================== */
.subs-auth-page {
	background: #F4F4F4;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.subs-auth-page .auth-wrapper {
	max-width: 500px;
	width: 100%;
	margin: 0 auto;
}
.subs-auth-page .brand-header {
	text-align: center;
	margin-bottom: 2rem;
}
.subs-auth-page .brand-icon {
	width: 64px; height: 64px;
	background: #FFFFFF;
	border: 1px solid var(--accent-mid);
	border-radius: 16px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.8rem; color: var(--extra);
	margin-bottom: 1rem;
}
.subs-auth-page .brand-header h1 {
	font-family: 'Unbounded', sans-serif;
	font-size: 1.5rem; font-weight: 600;
	color: var(--text); margin: 0 0 0.3rem;
}
.subs-auth-page .brand-header p { font-size: 0.85rem; color: var(--extra); margin: 0; }

.subs-auth-page .auth-card {
	background: #FFFFFF;
	border: 1px solid var(--accent-mid);
	border-radius: 16px;
	padding: 2rem;
	box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

.subs-auth-page .form-group { margin-bottom: 1.2rem; }
.subs-auth-page .form-label {
	display: block;
	font-weight: 500;
	margin-bottom: 0.5rem;
	color: var(--headline);
	font-size: 0.85rem;
}
.subs-auth-page .input-wrapper { position: relative; }
.subs-auth-page .input-wrapper i {
	position: absolute;
	left: 1rem; top: 50%;
	transform: translateY(-50%);
	color: var(--accent-dark);
	font-size: 1rem;
}
.subs-auth-page .form-control {
	width: 100%;
	padding: 0.85rem 1rem 0.85rem 2.8rem;
	border: 1px solid var(--accent-mid);
	border-radius: 12px;
	font-family: 'Onest', sans-serif;
	font-size: 0.95rem;
	color: var(--text);
	background: #FFFFFF;
	transition: all 0.2s;
}
.subs-auth-page .form-control:focus {
	outline: none;
	border-color: var(--extra);
	box-shadow: 0 0 0 3px rgba(93,109,132,0.1);
}
.subs-auth-page .form-control::placeholder { color: var(--accent-dark); }

.subs-auth-page .form-row {
	display: flex;
	gap: 1rem;
}
.subs-auth-page .form-row .form-group { flex: 1; }

.subs-auth-page .checkbox-group {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 1.5rem;
}
.subs-auth-page .checkbox-label {
	display: flex; align-items: center; gap: 0.5rem;
	cursor: pointer; font-size: 0.85rem; color: var(--extra);
}
.subs-auth-page .checkbox-label input {
	width: 16px; height: 16px; cursor: pointer; accent-color: var(--headline);
}
.subs-auth-page .forgot-link {
	font-size: 0.85rem; color: var(--extra);
	text-decoration: none; transition: color 0.2s;
}
.subs-auth-page .forgot-link:hover { color: var(--text); text-decoration: underline; }

.subs-auth-page .terms {
	display: flex; align-items: center; gap: 0.5rem;
	margin-bottom: 1.5rem; font-size: 0.75rem; color: var(--extra);
}
.subs-auth-page .terms input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--headline); }
.subs-auth-page .terms a { color: var(--headline); text-decoration: none; }
.subs-auth-page .terms a:hover { text-decoration: underline; }

.subs-auth-page .btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 0.5rem; width: 100%;
	padding: 0.85rem 1.5rem; border-radius: 12px;
	font-family: 'Onest', sans-serif; font-weight: 600; font-size: 1rem;
	cursor: pointer; transition: all 0.2s;
	border: 1px solid transparent;
	text-decoration: none;
}
.subs-auth-page .btn-primary { background: var(--headline); color: white; border-color: var(--headline); }
.subs-auth-page .btn-primary:hover { background: var(--text); border-color: var(--text); color: #fff; }
.subs-auth-page .btn-outline { background: transparent; color: var(--extra); border-color: var(--accent-mid); }
.subs-auth-page .btn-outline:hover { background: var(--accent-light); border-color: var(--accent-dark); }
.subs-auth-page .btn-secondary { background: transparent; color: var(--extra); border-color: var(--accent-mid); }
.subs-auth-page .btn-secondary:hover { background: var(--accent-light); }

.subs-auth-page .divider {
	display: flex; align-items: center; text-align: center;
	margin: 1.5rem 0; color: var(--accent-dark); font-size: 0.8rem;
}
.subs-auth-page .divider::before,
.subs-auth-page .divider::after {
	content: ''; flex: 1; border-bottom: 1px solid var(--accent-light);
}
.subs-auth-page .divider span { margin: 0 1rem; }

.subs-auth-page .auth-footer {
	text-align: center;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--accent-light);
	font-size: 0.85rem; color: var(--extra);
}
.subs-auth-page .auth-footer a {
	color: var(--headline); text-decoration: none; font-weight: 600;
}
.subs-auth-page .auth-footer a:hover { text-decoration: underline; }

.subs-auth-page .error-message {
	background: #F8D7DA;
	border: 1px solid #F5C6CB;
	border-radius: 12px;
	padding: 0.8rem 1rem;
	margin-bottom: 1.2rem;
	color: #721C24; font-size: 0.85rem;
	display: flex; align-items: center; gap: 0.5rem;
}
.subs-auth-page .info-message,
.subs-auth-page .success-message {
	background: #D4EDDA;
	border: 1px solid #C3E6CB;
	border-radius: 12px;
	padding: 0.8rem 1rem;
	margin-bottom: 1.2rem;
	color: #155724; font-size: 0.85rem;
	display: flex; align-items: center; gap: 0.5rem;
}

.subs-auth-page .back-to-login {
	display: flex; justify-content: center; margin-top: 1rem;
}
.subs-auth-page .back-to-login a {
	color: var(--extra); text-decoration: none; font-size: 0.85rem;
	display: inline-flex; align-items: center; gap: 0.4rem;
}
.subs-auth-page .back-to-login a:hover { color: var(--text); }

/* =====================================================
   ЛИЧНЫЙ КАБИНЕТ (по «Личный кабинет обновление.html»)
   ===================================================== */
.subs-dashboard {
	background: #F4F4F4;
	padding: 2rem 1.25rem;
	min-height: 100vh;
	font-family: 'Onest', sans-serif;
}
.subs-dashboard .dashboard-container {
	max-width: 1400px;
	margin: 0 auto;
}

.subs-dashboard .subs-lk-notice {
	margin-bottom: 1.5rem;
}

.subs-dashboard .dashboard-grid {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 2rem;
	align-items: start;
}

.subs-dashboard .sidebar {
	background: #FFFFFF;
	border-radius: 20px;
	border: 1px solid #EDEDED;
	overflow: hidden;
	height: fit-content;
}

.subs-dashboard .user-card {
	text-align: center;
	padding: 2rem 1.5rem;
	border-bottom: 1px solid #EDEDED;
	background: #F8FAFD;
}

.subs-dashboard .user-card h3 {
	font-family: 'Unbounded', sans-serif;
	font-size: 1rem;
	margin: 0 0 0.2rem;
	color: var(--text);
}

.subs-dashboard .user-card p {
	font-size: 0.8rem;
	color: #5D6D84;
	margin: 0;
}

.subs-dashboard .user-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: #D4EDDA;
	color: #155724;
	padding: 0.2rem 0.8rem;
	border-radius: 20px;
	font-size: 0.7rem;
	margin-top: 0.5rem;
	font-weight: 500;
}

.subs-dashboard .user-avatar {
	width: 80px;
	height: 80px;
	background: #EDEDED;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
	font-size: 2.5rem;
	color: #5D6D84;
}

.subs-dashboard .user-avatar-letter {
	font-family: 'Unbounded', sans-serif;
	font-weight: 600;
	font-size: 2rem;
	line-height: 1;
	color: #5D6D84;
}

.subs-dashboard .sidebar-menu {
	padding: 1rem 0;
}

.subs-dashboard .sidebar-divider {
	height: 1px;
	background: #EDEDED;
	margin: 0.5rem 1.5rem;
}

.subs-dashboard .sidebar-logout {
	padding: 1rem 1.5rem 1.5rem;
	border-top: 1px solid #EDEDED;
	background: #FFFFFF;
}

.subs-dashboard .menu-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.5rem;
	color: #5D6D84;
	transition: all 0.2s;
	border-left: 3px solid transparent;
	font-weight: 500;
	text-decoration: none;
	font-size: 0.95rem;
}
.subs-dashboard .menu-item i {
	width: 1.5rem;
	font-size: 1.1rem;
	text-align: center;
}
.subs-dashboard .menu-item:hover {
	background: #EDEDED;
	color: #2D333C;
}
.subs-dashboard .menu-item.active {
	background: #EDEDED;
	border-left-color: #606A77;
	color: #2D333C;
}

.subs-dashboard .main-content {
	background: #FFFFFF;
	border-radius: 20px;
	border: 1px solid #EDEDED;
	padding: 2rem;
}

.subs-dashboard .section-title {
	font-family: 'Unbounded', sans-serif;
	font-weight: 600;
	font-size: 1.2rem;
	color: #606A77;
	margin-bottom: 1.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #EDEDED;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.subs-dashboard .section-title-spaced {
	margin-top: 2rem;
}

.subs-dashboard .settings-lead {
	font-size: 0.9rem;
	color: var(--extra);
	margin: -0.5rem 0 1.25rem;
}

.subs-dashboard .settings-submit-wrap {
	margin-top: 1.5rem;
}

.subs-dashboard .form-group { margin-bottom: 1.2rem; }
.subs-dashboard .form-label {
	display: block; font-weight: 500; margin-bottom: 0.4rem;
	color: #606A77; font-size: 0.85rem;
}
.subs-dashboard .form-control {
	width: 100%; padding: 0.75rem 1rem;
	border: 1px solid #DEDEDE; border-radius: 12px;
	font-family: 'Onest', sans-serif; font-size: 0.9rem;
	color: var(--text); background: #FFFFFF; transition: all 0.2s;
}
.subs-dashboard .form-control:focus {
	outline: none;
	border-color: #5D6D84;
	box-shadow: 0 0 0 3px rgba(93, 109, 132, 0.1);
}
.subs-dashboard .form-row {
	display: flex; gap: 1rem; flex-wrap: wrap;
}
.subs-dashboard .form-row .form-group { flex: 1; min-width: 180px; }

.subs-dashboard .btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1.5rem; border-radius: 12px;
	font-family: 'Onest', sans-serif; font-weight: 500; font-size: 0.9rem;
	cursor: pointer; transition: all 0.2s;
	border: 1px solid transparent; background: none;
	text-decoration: none;
	box-sizing: border-box;
}
.subs-dashboard .btn-primary {
	background: #606A77;
	color: #fff;
	border-color: #606A77;
}
.subs-dashboard .btn-primary:hover {
	background: #2D333C;
	border-color: #2D333C;
	color: #fff;
}
.subs-dashboard .btn-secondary {
	background: #EDEDED;
	color: #2D333C;
	border-color: #EDEDED;
}
.subs-dashboard .btn-secondary:hover { background: #DEDEDE; }
.subs-dashboard .btn-outline {
	background: transparent;
	color: #5D6D84;
	border-color: #DEDEDE;
}
.subs-dashboard .btn-outline:hover { background: #EDEDED; color: #2D333C; }
.subs-dashboard .btn-danger { background: #F8D7DA; color: #721C24; border-color: #F5C6CB; }
.subs-dashboard .btn-danger:hover { background: #F5C6CB; }
.subs-dashboard .btn-block { width: 100%; }

.subs-dashboard .subscription-card {
	background: linear-gradient(135deg, #F8FAFD 0%, #FFFFFF 100%);
	border: 1px solid #EDEDED;
	border-radius: 16px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}
.subs-dashboard .subscription-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1rem;
}
.subs-dashboard .subscription-plan h3 {
	font-family: 'Unbounded', sans-serif;
	font-size: 1.2rem;
	color: #2D333C;
	margin: 0 0 0.2rem;
}
.subs-dashboard .subscription-plan p {
	font-size: 0.8rem;
	color: #5D6D84;
	margin: 0;
}
.subs-dashboard .subscription-price { text-align: right; }
.subs-dashboard .price-value {
	font-size: 1.5rem;
	font-weight: 700;
	color: #2D333C;
}
.subs-dashboard .price-period {
	font-size: 0.8rem;
	color: #5D6D84;
}
.subs-dashboard .subscription-progress { margin: 1rem 0; }
.subs-dashboard .progress-label {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	color: #5D6D84;
	margin-bottom: 0.3rem;
}
.subs-dashboard .progress-bar {
	height: 8px;
	background: #EDEDED;
	border-radius: 10px;
	overflow: hidden;
}
.subs-dashboard .progress-fill {
	height: 100%;
	background: #606A77;
	border-radius: 10px;
	width: 0%;
	transition: width 0.4s ease;
}
.subs-dashboard .subscription-actions {
	display: flex;
	gap: 0.8rem;
	flex-wrap: wrap;
	margin-top: 1rem;
	align-items: center;
}
.subs-dashboard .subs-inline-form {
	display: inline-block;
	margin: 0;
	vertical-align: middle;
}
.subs-dashboard .subscription-hint {
	margin-top: 1rem;
	padding: 1rem;
	background: #EDEDED;
	border-radius: 10px;
}
.subs-dashboard .subscription-hint p {
	font-size: 0.8rem;
	color: #5D6D84;
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.subs-dashboard .subs-lk-empty {
	text-align: center;
	padding: 2rem 1rem;
	background: #FAFAFA;
	border-radius: 12px;
	border: 1px dashed #DEDEDE;
	color: #5D6D84;
}
.subs-dashboard .subs-lk-empty i {
	font-size: 2rem;
	display: block;
	margin-bottom: 0.75rem;
	opacity: 0.85;
}
.subs-dashboard .subs-lk-empty-lg { padding: 2.5rem 1.5rem; }
.subs-dashboard .subs-lk-empty .btn { margin-top: 0.5rem; }

.subs-dashboard .session-row {
	padding: 0.8rem 0;
	border-bottom: 1px solid #EDEDED;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.subs-dashboard .session-meta {
	font-size: 0.7rem;
	color: #5D6D84;
}
.subs-dashboard .badge-session {
	background: #EDEDED;
	color: #2D333C;
	font-weight: 500;
}
.subs-dashboard .subs-session-form { margin-top: 1rem; }

.subs-dashboard .badge {
	display: inline-flex; align-items: center; gap: 0.3rem;
	padding: 0.2rem 0.8rem; border-radius: 20px;
	font-size: 0.7rem; font-weight: 600;
}
.subs-dashboard .badge-active  { background: #D4EDDA; color: #155724; }
.subs-dashboard .badge-expired { background: #F8D7DA; color: #721C24; }
.subs-dashboard .badge-pending { background: #FFF3CD; color: #856404; }

.subs-dashboard .table-wrap { overflow-x: auto; }
.subs-dashboard table,
.subs-dashboard .subs-lk-table { width: 100%; border-collapse: collapse; }
.subs-dashboard th {
	text-align: left; padding: 0.8rem 0.5rem; font-weight: 600;
	color: #606A77; border-bottom: 2px solid #EDEDED; font-size: 0.8rem;
}
.subs-dashboard td { padding: 0.8rem 0.5rem; border-bottom: 1px solid #EDEDED; font-size: 0.85rem; }

.subs-dashboard .status-dot {
	display: inline-block; width: 8px; height: 8px;
	border-radius: 50%; margin-right: 0.4rem;
}
.subs-dashboard .status-success { background: var(--success); }
.subs-dashboard .status-pending { background: #FFC107; }
.subs-dashboard .status-failed  { background: var(--danger); }

.subs-dashboard .notification-item {
	display: flex; justify-content: space-between; align-items: center;
	padding: 0.8rem 0; border-bottom: 1px solid #EDEDED;
}
.subs-dashboard .toggle-switch {
	position: relative; display: inline-block; width: 44px; height: 22px;
}
.subs-dashboard .toggle-switch input { opacity: 0; width: 0; height: 0; }
.subs-dashboard .toggle-slider {
	position: absolute; cursor: pointer;
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: var(--accent-dark); transition: 0.3s; border-radius: 22px;
}
.subs-dashboard .toggle-slider:before {
	position: absolute; content: "";
	height: 16px; width: 16px; left: 3px; bottom: 3px;
	background-color: white; transition: 0.3s; border-radius: 50%;
}
.subs-dashboard input:checked + .toggle-slider { background-color: var(--headline); }
.subs-dashboard input:checked + .toggle-slider:before { transform: translateX(22px); }

.subs-dashboard .info-message {
	background: #D4EDDA; border: 1px solid #C3E6CB;
	border-radius: 10px; padding: 0.8rem 1rem;
	color: #155724; font-size: 0.9rem;
	display: flex; align-items: center; gap: 0.5rem;
}

/* Тарифы (страница [subs_pricing]) */
.subs-pricing-wrap {
	background: #F4F4F4;
	padding: 2rem 1rem;
	min-height: 100vh;
}
.subs-pricing {
	max-width: 1100px; margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
}
.subs-plan-card {
	background: #fff; border: 1px solid var(--accent-mid); border-radius: 16px;
	padding: 1.8rem 1.5rem; text-align: center;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	transition: transform 0.2s, box-shadow 0.2s;
	font-family: 'Onest', sans-serif;
}
.subs-plan-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.08); }
.subs-plan-card h3 {
	font-family: 'Unbounded', sans-serif; font-size: 1.2rem;
	color: var(--text); margin: 0 0 0.5rem;
}
.subs-plan-price {
	font-family: 'Unbounded', sans-serif; font-size: 2rem;
	color: var(--extra); font-weight: 700; margin: 1rem 0 0.3rem;
}
.subs-plan-period { color: var(--headline); font-size: 0.85rem; margin-bottom: 1rem; }
.subs-plan-desc   { color: var(--text); font-size: 0.9rem; margin-bottom: 1.2rem; min-height: 3rem; }

/* Защищённый блок (inline) */
.subs-access-denied {
	background: #fff; border: 1px dashed var(--accent-mid);
	border-radius: 16px; padding: 2rem; text-align: center;
	margin: 2rem auto; max-width: 600px;
	font-family: 'Onest', sans-serif;
}
.subs-access-denied h3 {
	font-family: 'Unbounded', sans-serif; color: var(--headline); margin: 0 0 0.5rem;
}
.subs-access-denied p { color: var(--text); margin: 0 0 1rem; }
.subs-access-denied .subs-buttons { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.subs-access-denied .subs-btn {
	font-family: 'Onest', sans-serif; font-weight: 500;
	border: none; border-radius: 10px; padding: 0.7rem 1.4rem;
	cursor: pointer; font-size: 0.9rem;
	display: inline-flex; align-items: center; gap: 0.5rem;
	text-decoration: none; transition: all 0.2s;
}
.subs-access-denied .subs-btn-primary { background: var(--extra); color: #fff; }
.subs-access-denied .subs-btn-primary:hover { background: #4a5a6e; }
.subs-access-denied .subs-btn-secondary { background: var(--accent-light); color: var(--text); }
.subs-access-denied .subs-btn-secondary:hover { background: var(--accent-mid); }

/* Уведомления */
.subs-notice {
	background: var(--accent-light, #EDEDED);
	border-left: 4px solid #5D6D84;
	padding: 1rem 1.2rem; border-radius: 10px;
	margin: 1rem 0; font-size: 0.95rem;
	font-family: 'Onest', sans-serif;
}
.subs-error {
	background: #FFEBEE; border-left-color: #C62828; color: #C62828;
}

/* Адаптив */
@media (max-width: 900px) {
	.subs-dashboard .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.subs-wrap-frontend { padding: 1rem; }
	.subs-wrap-frontend .success-body,
	.subs-wrap-frontend .error-body,
	.subs-wrap-frontend .invoice-body { padding: 1.5rem; }
	.subs-wrap-frontend .info-grid { grid-template-columns: 1fr; }
	.subs-wrap-frontend .invoice-header { flex-direction: column; text-align: center; }
	.subs-auth-page .form-row { flex-direction: column; gap: 0; }
}

/* Печать чека */
@media print {
	body * { visibility: hidden; }
	.subs-wrap-frontend, .subs-wrap-frontend * { visibility: visible; }
	.subs-wrap-frontend {
		position: absolute; left: 0; top: 0;
		padding: 0; background: #fff; min-height: auto;
	}
	.subs-wrap-frontend .btn-download { display: none !important; }
	.subs-wrap-frontend .invoice {
		box-shadow: none; border-radius: 0; border: none; max-width: 100%;
	}
}