@font-face {
	font-family: 'KyivTypeSans-Heavy';
	src: url('/web/fonts/KyivTypeSans-Heavy.otf') format('opentype');
}
@font-face {
	font-family: 'TBSGartek-Display';
	src: url('/web/fonts/TBSGartek-Display.otf') format('opentype');
}
@font-face {
	font-family: 'AGaramondPro-Bold';
	src: url('/web/fonts/AGaramondPro-Bold.otf') format('opentype');
}
@font-face {
	font-family: 'AuBordDeLaSeine';
	src: url('/web/fonts/AuBordDeLaSeine.ttf') format('truetype');
}
@font-face {
	font-family: 'Oswald-SemiBold';
	src: url('/web/fonts/Oswald-SemiBold.ttf') format('truetype');
}
@font-face {
	font-family: 'Roboto-Light';
	src: url('/web/fonts/Roboto-Light.ttf') format('truetype');
}

.fre-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--black-70);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--duration-quick);
}
.fre-overlay.visible {
	opacity: 1;
	pointer-events: auto;
}

.fre-container {
	background: var(--brand-cream);
	border-radius: var(--radius-panel);
	width: 92vw;
	max-width: 1200px;
	height: 88vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 12px 40px var(--black-30);
}

.fre-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
	border-bottom: 1px solid var(--neutral-100);
	background: var(--white);
}
.fre-header-title {
	font-family: var(--font-display);
	font-size: var(--type-body-xl);
	font-weight: 600;
	text-transform: none;
	color: var(--text-primary);
}
.fre-header-actions {
	display: flex;
	gap: 10px;
	align-items: center;
}
.fre-btn-save {
	min-width: 126px;
}
.fre-btn-saved {
	background: var(--editor-saved) !important;
	transition: background var(--duration-default);
}
.fre-body {
	display: flex;
	flex: 1;
	overflow: hidden;
}

.fre-preview-area {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--surface-muted);
	overflow: hidden;
	position: relative;
}
.fre-zoom-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-shrink: 0;
	z-index: 10;
	background: var(--white-92);
	backdrop-filter: blur(8px);
	padding: 6px 14px;
	border-radius: var(--radius-section);
	box-shadow: 0 2px 8px var(--shadow-lg);
	margin: 12px 0 8px 0;
}
.fre-zoom-btn {
	width: 28px;
	height: 28px;
	border: 1px solid var(--neutral-200);
	font-size: var(--type-body-lg);
	color: var(--text-strong);
}
.fre-zoom-btn:hover {
	background: var(--neutral-050);
	border-color: var(--text-muted);
}
.fre-zoom-level {
	font-family: var(--font-body);
	font-size: var(--type-label-sm);
	color: var(--text-soft);
	min-width: 36px;
	text-align: center;
}
.fre-spread-wrapper {
	flex: 1;
	overflow: auto;
	cursor: grab;
	width: 100%;
}
.fre-spread-wrapper:active {
	cursor: grabbing;
}
.fre-spread-sizer {
	display: inline-block;
}
.fre-spread {
	display: flex;
	box-shadow: none;
	transform-origin: center center;
	width: 860px;
	height: 608px;
	flex-shrink: 0;
	transition: transform var(--duration-snappy) ease;
}

.fre-page {
	width: 430px;
	height: 608px;
	position: relative;
	overflow: visible;
}

.fre-page-text {
	background: transparent;
	position: relative;
}
.fre-page-text::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	background: var(--white);
	z-index: 0;
	pointer-events: none;
}

.fre-page-text-inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: visible;
	z-index: 1;
}

.fre-category {
	font-family: 'Oswald-SemiBold', 'Oswald', sans-serif;
	font-size: 7.2px;
	text-transform: none;
	color: var(--text-primary);
	letter-spacing: 0.5px;
	position: absolute;
	top: 27px;
	left: 25px;
	right: 51px;
}

.fre-recipe-title {
	font-family: 'KyivTypeSans-Heavy', serif;
	font-size: 29px;
	color: var(--text-primary);
	line-height: 1.08;
	text-transform: none;
	position: absolute;
	left: 25px;
	right: 25px;
	min-height: 62.7px;
	max-height: 62.7px;
	overflow: hidden;
	top: 58px;
	white-space: normal;
}
.fre-title-line {
	display: block;
	white-space: nowrap;
}

.fre-indications {
	display: flex;
	justify-content: space-between;
	padding: 0;
	position: absolute;
	top: 142px;
	left: 25px;
	right: 51px;
}
.fre-indication-item {
	display: flex;
	flex-direction: column;
	min-width: 40px;
	align-items: center;
	text-align: center;
}
.fre-indication-label {
	font-family: 'Oswald-SemiBold', 'Oswald', sans-serif;
	font-size: 6.5px;
	text-transform: none;
	color: var(--text-primary);
	letter-spacing: 0.3px;
	margin-bottom: 2px;
}
.fre-indication-value {
	font-family: 'Roboto-Light', 'Roboto', sans-serif;
	font-size: 6.5px;
	color: var(--text-strong);
}
.fre-indications-line {
	height: 0.5px;
	background: var(--editor-guide-line);
	position: absolute;
	top: 173px;
	left: 25px;
	right: 51px;
}

.fre-content-columns {
	display: flex;
	gap: 16px;
	position: absolute;
	top: 194px;
	left: 25px;
	right: 39px;
}

.fre-ingredients-col {
	width: 119px;
	flex-shrink: 0;
}
.fre-steps-col {
	width: 231px;
	flex-shrink: 0;
}

.fre-section-title {
	font-family: 'Oswald-SemiBold', 'Oswald', sans-serif;
	font-size: 6.5px;
	text-transform: none;
	color: var(--text-primary);
	margin-bottom: 6px;
	letter-spacing: 0.3px;
}

.fre-zone-frame {
	height: 316px;
	border-radius: var(--radius-3xs);
	padding: 4px;
	position: relative;
	overflow: visible;
}
.fre-zone-frame.fre-frame-ok {
	border: 1px dashed var(--editor-valid);
}
.fre-zone-frame.fre-frame-overflow {
	border: 1px dashed var(--editor-invalid);
}
.fre-zone-content {
	position: relative;
}

.fre-zone-status {
	font-family: var(--font-body);
	font-size: var(--type-caption);
	margin-top: 4px;
	font-weight: 500;
}
.fre-zone-status.ok {
	color: var(--editor-valid);
}
.fre-zone-status.overflow {
	color: var(--editor-invalid);
}

.fre-ai-reduce-btn {
	display: block;
	margin-top: 8px;
	padding: 10px 16px;
	font-size: var(--type-body-sm);
	font-weight: 500;
	color: var(--text-ai-warning);
	background: var(--ai-warning-bg);
	border: 1px solid var(--ai-warning-border);
	border-radius: var(--radius-pill);
	transition:
		background var(--duration-fast),
		border-color var(--duration-fast);
}
.fre-ai-reduce-btn:hover {
	background: var(--ai-warning-bg-hover);
	border-color: var(--ai-warning-border-hover);
}
.fre-ai-reduce-btn.fre-ai-reducing {
	opacity: 0.6;
}
.fre-ai-undo-btn {
	margin-top: 6px;
	padding: 8px 16px;
	font-size: var(--type-body-2xs);
}

.fre-ingredient-line,
.fre-step-line {
	font-family: 'Roboto-Light', 'Roboto', sans-serif;
	font-size: 6.5px;
	color: var(--text-strong);
	line-height: 1.36;
	text-align: justify;
}
.fre-empty-line {
	line-height: 1.36;
}

.fre-page-photo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	background: var(--brand-beige);
}
.fre-bg-coral {
	background: var(--primary);
}
.fre-bg-sage {
	background: var(--brand-sage);
}
.fre-bg-beige {
	background: var(--brand-beige);
}
.fre-bg-olive {
	background: var(--brand-green);
}
.fre-bg-brown {
	background: var(--brand-brown);
}
.fre-modify-photo-btn {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	font-size: 8px;
	font-weight: 500;
	padding: 4px 16px;
	border-radius: var(--radius-2xl);
	background: var(--brand-beige);
	color: var(--text-primary);
	letter-spacing: 0.3px;
	transition: background var(--duration-snappy);
}
.fre-modify-photo-btn:hover {
	background: var(--brand-beige-hover);
}

.fre-photo-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.fre-photo-img {
	object-fit: cover;
	width: 61.4%;
	height: 55.3%;
	border-radius: var(--radius-xs);
}
.fre-photo-format-landscape .fre-photo-img,
.fre-photo-format-landscape .fre-photo-placeholder {
	width: 76.1%;
	height: 43.4%;
}
.fre-photo-format-portrait .fre-photo-img,
.fre-photo-format-portrait .fre-photo-placeholder {
	width: 61.4%;
	height: 55.3%;
}
.fre-photo-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 2px dashed var(--white-50);
	border-radius: var(--radius-md);
	color: var(--white);
	cursor: pointer;
	font-family: var(--font-body);
	font-size: var(--type-body-sm);
}
.fre-photo-placeholder:hover {
	border-color: var(--white);
	background: var(--white-08);
}
.fre-photo-placeholder svg {
	opacity: 0.7;
}

.fre-personal-note {
	position: absolute;
	bottom: 10%;
	left: 9.5%;
	right: 9.5%;
	text-align: center;
	font-family: 'AuBordDeLaSeine', cursive;
	font-size: 8.7px;
	color: var(--text-strong);
	line-height: 1.4;
}

.fre-panel {
	width: 380px;
	background: var(--white);
	border-left: 1px solid var(--neutral-100);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.fre-tabs {
	display: flex;
	border-bottom: 1px solid var(--neutral-100);
}
.fre-tab {
	flex: 1;
	padding: 12px 8px;
	font-family: var(--font-display);
	font-size: var(--type-body-xs);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0.5px;
	color: var(--text-muted);
	background: none;
	border-bottom: 2px solid transparent;
	transition:
		border-bottom-color var(--duration-fast),
		color var(--duration-fast);
}
.fre-tab.active {
	color: var(--text-primary);
	border-bottom-color: var(--primary);
}
.fre-tab:hover:not(.active) {
	color: var(--text-soft);
}

.fre-panel-scroll {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
}

.fre-field-group {
	margin-bottom: 18px;
}
.fre-field-label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}
.fre-field-label {
	font-family: var(--font-body);
	font-size: var(--type-body-2xs);
	font-weight: 500;
	color: var(--text-primary);
}
.fre-field-counter {
	font-family: var(--font-body);
	font-size: var(--type-micro);
}
.fre-field-counter.ok {
	color: var(--editor-valid);
}
.fre-field-counter.max {
	color: var(--editor-invalid);
}

.fre-field-input,
.fre-field-textarea {
	border-color: var(--editor-valid);
	border-width: 1.5px;
	background: var(--surface-field);
	transition:
		border-color var(--duration-fast),
		background var(--duration-fast);
}
.fre-field-input.overflow,
.fre-field-textarea.overflow {
	border-color: var(--editor-invalid) !important;
}

.fre-field-input {
	font-size: var(--type-body-md);
	padding: 10px 12px;
}
.fre-field-input:focus,
.fre-field-textarea:focus {
	border-color: var(--editor-valid);
	background: var(--white);
}
select.fre-category-select {
	cursor: pointer;
	appearance: auto;
	-webkit-appearance: menulist;
	-moz-appearance: menulist;
}

.fre-field-textarea {
	font-size: var(--type-body-sm);
	padding: 10px 12px;
	resize: vertical;
	min-height: 80px;
	line-height: 1.5;
}

.fre-field-hint {
	font-family: var(--font-body);
	font-size: var(--type-micro);
	color: var(--text-muted);
	margin: 0 0 6px 0;
	font-style: italic;
}

.fre-time-row {
	display: flex;
	gap: 10px;
}
.fre-time-field {
	flex: 1;
}
.fre-time-input {
	font-size: var(--type-body-md);
	padding: 8px 10px;
	border-color: var(--neutral-200);
	border-width: 1.5px;
	background: var(--surface-field);
	text-align: center;
}
.fre-time-input:focus {
	border-color: var(--primary);
}

.fre-color-row {
	display: flex;
	gap: 10px;
	margin-top: 4px;
}
.fre-color-circle {
	width: 36px;
	height: 36px;
	border: 3px solid transparent;
	transition:
		border-color var(--duration-snappy),
		transform var(--duration-snappy);
}
.fre-color-circle:hover {
	transform: scale(1.1);
}
.fre-color-circle.selected {
	border-color: var(--text-primary);
}
.fre-color-circle .check-icon {
	color: var(--white);
	font-size: var(--type-body-md);
	font-weight: 400;
}

.fre-format-row {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}
.fre-format-btn {
	flex: 1;
	padding: 10px 12px;
	font-size: var(--type-body-xs);
	font-weight: 500;
	border: 1.5px solid var(--neutral-200);
	border-radius: var(--radius-md);
	background: var(--surface-field);
	text-align: center;
	gap: 6px;
	transition:
		background var(--duration-snappy),
		border-color var(--duration-snappy),
		color var(--duration-snappy);
}
.fre-format-btn:hover {
	border-color: var(--text-muted);
}
.fre-format-btn.selected {
	border-color: var(--primary);
	background: var(--surface-primary-soft);
	color: var(--primary);
}
.fre-format-icon {
	border: 1.5px solid var(--text-muted);
	border-radius: var(--radius-2xs);
}
.fre-format-icon.portrait {
	width: 14px;
	height: 18px;
}
.fre-format-icon.landscape {
	width: 18px;
	height: 14px;
}
.fre-format-btn.selected .fre-format-icon {
	border-color: var(--primary);
}

.fre-font-row {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}
.fre-font-btn {
	flex: 1;
	flex-direction: column;
	gap: 2px;
	padding: 10px 8px;
	border: 1.5px solid var(--neutral-200);
	border-radius: var(--radius-md);
	background: var(--surface-field);
	text-align: center;
	transition:
		background var(--duration-snappy),
		border-color var(--duration-snappy),
		color var(--duration-snappy);
}
.fre-font-btn:hover {
	border-color: var(--text-muted);
}
.fre-font-btn.selected {
	border-color: var(--primary);
	background: var(--surface-primary-soft);
}
.fre-font-preview {
	font-size: var(--type-heading-sm);
	color: var(--text-primary);
	display: block;
	margin-bottom: 2px;
}
.fre-title-font-kyiv,
.fre-title-font-kyiv .fre-font-preview {
	font-family: 'KyivTypeSans-Heavy', serif;
}
.fre-title-font-gartek,
.fre-title-font-gartek .fre-font-preview {
	font-family: 'TBSGartek-Display', serif;
}
.fre-title-font-garamond,
.fre-title-font-garamond .fre-font-preview {
	font-family: 'AGaramondPro-Bold', serif;
}
.fre-title-single-line {
	top: 74px;
}
.fre-title-multi-line {
	top: 58px;
}
.fre-font-name {
	font-family: var(--font-body);
	font-size: var(--type-micro-sm);
	color: var(--text-muted);
	display: block;
}
.fre-font-btn.selected .fre-font-name {
	color: var(--primary);
}

.fre-photo-upload-area {
	margin-top: 4px;
	border: 2px dashed var(--neutral-200);
	border-radius: var(--radius-md);
	padding: 20px;
	text-align: center;
	cursor: pointer;
	transition:
		border-color var(--duration-snappy),
		background var(--duration-snappy);
}
.fre-photo-upload-area:hover {
	border-color: var(--primary);
	background: var(--surface-primary-soft);
}
.fre-photo-upload-text {
	font-family: var(--font-body);
	font-size: var(--type-body-sm);
	color: var(--text-muted);
}
.fre-photo-upload-area.has-photo {
	border-style: solid;
	border-color: var(--editor-valid);
	padding: 8px;
}
.fre-photo-upload-area.has-photo img {
	max-width: 100%;
	max-height: 120px;
	border-radius: var(--radius-xs);
	object-fit: cover;
}
.fre-photo-upload-icon {
	color: var(--text-muted);
	margin-bottom: 4px;
}
.fre-photo-actions {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	justify-content: center;
}
.fre-photo-action-btn {
	font-size: var(--type-label-sm);
	padding: 4px 12px;
}

.fre-ai-generate-btn {
	margin-top: 10px;
	padding: 10px 16px;
	font-size: var(--type-body-sm);
}
.fre-ai-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--white-30);
	border-top-color: var(--white);
	border-radius: var(--radius-round);
	animation: fre-spin 0.7s linear infinite;
	margin-right: 4px;
	flex-shrink: 0;
}
@keyframes fre-spin {
	to {
		transform: rotate(360deg);
	}
}