Кнопка назад

src/lib/PaymentPage.svelte

@@ -48,7 +48,7 @@
 </script>
 <div class="payment-container">
 	<header class="payment-header">
-		<button class="back-btn" onclick={onBack}>← Назад</button>
+		<button class="back-btn" onclick={onBack}>←</button>
 		<h1>Оплата печати</h1>
 	</header>
 	<main class="payment-content">
@@ -119,11 +119,13 @@
 		/* Предотвращает горизонтальный скролл на мобильных */
 		overflow-x: hidden;
 	}
+	
+	/* --- ИЗМЕНЕНИЯ ЗДЕСЬ --- */
 	.payment-header {
 		padding: 20px 16px 8px;
-		display: flex; /* Делаем контейнер флексом */
+		display: flex; /* Включаем флекс */
 		align-items: center; /* Выравниваем по вертикали */
-		position: relative; /* Для позиционирования, если понадобится */
+		position: relative;
 	}
 
 	.back-btn {
@@ -134,12 +136,12 @@
 		font-weight: 600;
 		cursor: pointer;
 		padding: 12px 8px;
-		margin: -8px -8px -8px 0; /* Убираем лишние отступы, оставляем нулевой слева */
+		margin: -8px -8px -8px 0; /* Убираем лишние отступы */
 		min-height: 44px;
 		display: inline-flex;
 		align-items: center;
-		order: -1; /* Принудительно ставим кнопку первой в потоке */
+		order: -1; /* Гарантируем, что кнопка будет слева */
-		margin-right: auto; /* Теперь это сработает и прижмет кнопку к левому краю */
+		margin-right: auto; /* Прижимаем кнопку к левому краю */
 	}
 
 	.payment-header h1 {
@@ -147,9 +149,13 @@
 		font-size: 26px;
 		font-weight: 700;
 		letter-spacing: -0.02em;
-		flex-grow: 1; /* Заставляем заголовок занимать оставшееся место */
+		position: absolute; /* Абсолютное позиционирование для идеального центра */
-		text-align: center; /* Центрируем текст заголовка */
+		left: 50%;
+		transform: translateX(-50%); /* Сдвиг на 50% собственной ширины влево */
+		white-space: nowrap; /* Чтобы текст не переносился при сдвиге */
 	}
+	/* ----------------------- */
+
 	.payment-content {
 		flex: 1;
 		padding: 24px 16px 32px;

src/lib/PrintMenu.svelte

@@ -398,7 +398,7 @@
 {#if !activeFile && !showPayment}
 <div class="page-container">
 	<header class="header">
-		<button class="back-btn" onclick={onBack}>← Назад</button>
+		<button class="back-btn" onclick={onBack}>←</button>
 		<h1>Печать</h1>
 	</header>
 <main class="options">
@@ -533,9 +533,41 @@
 
 <style>
 	.page-container { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(120% 60% at 50% -10%, rgba(99, 102, 241, 0.18) 0%, transparent 60%); font-family: system-ui, -apple-system, sans-serif; color: #f5f7fa; }
-	.header { padding: 24px 20px 8px; }
+	
-	.back-btn { background: none; border: none; color: #6366f1; font-size: 15px; font-weight: 600; cursor: pointer; padding: 8px 4px; margin-bottom: 12px; }
+	/* --- ИЗМЕНЕНИЯ ДЛЯ ВЫРАВНИВАНИЯ ЗАГОЛОВКА И КНОПКИ --- */
-	.header h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
+	.header { 
+		padding: 24px 20px 8px; 
+		display: flex; /* Включаем флекс */
+		align-items: center;
+		position: relative;
+	}
+	.back-btn { 
+		background: none; 
+		border: none; 
+		color: #6366f1; 
+		font-size: 15px; 
+		font-weight: 600; 
+		cursor: pointer; 
+		padding: 8px 4px; 
+		margin: -8px -8px -8px 0; /* Компенсация отступов */
+		min-height: 44px;
+		display: inline-flex;
+		align-items: center;
+		order: -1; /* Кнопка всегда слева */
+		margin-right: auto; /* Прижимает кнопку к левому краю */
+	}
+	.header h1 { 
+		margin: 0; 
+		font-size: 28px; 
+		font-weight: 700; 
+		letter-spacing: -0.02em; 
+		position: absolute; /* Абсолютное позиционирование для идеального центра */
+		left: 50%;
+		transform: translateX(-50%);
+		white-space: nowrap;
+	}
+	/* ---------------------------------------------------- */
+
 	.options { flex: 1; padding: 24px 20px 16px; display: flex; flex-direction: column; gap: 14px; }
 	.option-title { font-size: 13px; font-weight: 600; color: #8b93a1; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; display: block; }
 	.option-title.compact { margin-bottom: 0; font-size: 12px; white-space: nowrap; margin-right: 8px; }