/* CompactCSS source: /apps/bookCoverMaker/style.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 * The Awtsmoos gathers a creative world through small ordered vessels;
 * Awtsmoos.com keeps the first screen quiet while deeper controls unfold only when desired.
 */

/* CompactCSS source: /apps/bookCoverMaker/styles/foundation.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 * The Awtsmoos gives the maker one calm vessel beneath every possible cover;
 * Awtsmoos.com keeps the mobile page whole while depth lives in spacing, light, and order.
 */
:root {
	color-scheme: dark;
	--cover-bg: #05070c;
	--cover-panel: rgba(12, 18, 29, .86);
	--cover-panel-strong: rgba(16, 24, 38, .96);
	--cover-border: rgba(135, 221, 255, .16);
	--cover-text: #f2f7fb;
	--cover-muted: #93a7b7;
	--cover-accent: #82e6ff;
	--cover-accent-2: #9b8cff;
	--cover-radius: 20px;
	--cover-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-width: 0;
	min-height: 100%;
}

body {
	min-height: 100dvh;
	font-family: Inter, ui-sans-serif, system-ui, sans-serif;
	color: var(--cover-text);
	background:
		radial-gradient(circle at 10% 0%, rgba(130, 230, 255, .12), transparent 30%),
		radial-gradient(circle at 90% 8%, rgba(155, 140, 255, .1), transparent 28%),
		linear-gradient(150deg, #070b13, var(--cover-bg) 72%);
}

.cover-page {
	width: min(1160px, 100%);
	margin: 0 auto;
	padding:
		max(20px, env(safe-area-inset-top))
		max(16px, env(safe-area-inset-right))
		max(28px, env(safe-area-inset-bottom))
		max(16px, env(safe-area-inset-left));
}

.cover-header {
	margin-bottom: 18px;
}

.cover-kicker,
.cover-title,
.cover-description {
	margin: 0;
}

.cover-kicker {
	color: var(--cover-accent);
	font-size: .7rem;
	font-weight: 850;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.cover-title {
	margin-top: 5px;
	font-size: clamp(1.9rem, 8vw, 3.8rem);
	line-height: .98;
	letter-spacing: -.055em;
}

.cover-description {
	max-width: 680px;
	margin-top: 9px;
	color: var(--cover-muted);
	font-size: .92rem;
	line-height: 1.55;
}

.cover-layout {
	display: grid;
	gap: 16px;
	align-items: start;
}

.cover-card {
	min-width: 0;
	border: 1px solid var(--cover-border);
	border-radius: var(--cover-radius);
	background: var(--cover-panel);
	box-shadow: var(--cover-shadow);
	backdrop-filter: blur(18px) saturate(1.08);
}

@media (min-width: 900px) {
	.cover-layout {
		grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
	}
}



/* CompactCSS source: /apps/bookCoverMaker/styles/form.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 * The Awtsmoos gathers form fields and action controls without letting either responsibility swallow the other;
 * Awtsmoos.com keeps disclosure and creation in separate vessels so the mobile cascade stays simple, clean, and clear.
 */

/* CompactCSS source: /apps/bookCoverMaker/styles/form-fields.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 * The Awtsmoos lets essential fields remain simple while advanced measure waits behind one quiet fold;
 * Awtsmoos.com keeps every input complete, touchable, and bounded so no unfinished control escapes the mold.
 */
.creator-card {
	padding: 18px;
}

.cover-form {
	display: grid;
	gap: 14px;
}

.cover-field {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.cover-field label,
.advanced-label {
	color: #dce9f2;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .02em;
}

.cover-field input,
.advanced-grid input {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var(--cover-border);
	border-radius: 12px;
	outline: none;
	color: var(--cover-text);
	background: rgba(255, 255, 255, .035);
}

.cover-field input[type="file"] {
	padding: 7px;
	color: var(--cover-muted);
}

.cover-field input[type="file"]::file-selector-button {
	min-height: 32px;
	margin-right: 10px;
	padding: 6px 10px;
	border: 1px solid rgba(130, 230, 255, .24);
	border-radius: 8px;
	color: var(--cover-text);
	background: rgba(130, 230, 255, .08);
	cursor: pointer;
}

.advanced-controls {
	border-top: 1px solid rgba(135, 221, 255, .1);
	padding-top: 4px;
}

.advanced-controls summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
	color: var(--cover-muted);
	font-size: .8rem;
	font-weight: 800;
	list-style: none;
}

.advanced-controls summary::-webkit-details-marker {
	display: none;
}

.advanced-controls summary::after {
	content: "+";
	margin-left: auto;
	color: var(--cover-accent);
	font-size: 1.1rem;
}

.advanced-controls[open] summary::after {
	content: "−";
}

.advanced-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 4px 0 10px;
}

.advanced-grid label {
	display: grid;
	gap: 6px;
	min-width: 0;
}



/* CompactCSS source: /apps/bookCoverMaker/styles/form-actions.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 * The Awtsmoos turns intention into action through small ordered controls that never crowd the page;
 * Awtsmoos.com keeps primary creation obvious, secondary export restrained, and every finite button inside its proper stage.
 */
.cover-actions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 9px;
}

.cover-button {
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid rgba(130, 230, 255, .24);
	border-radius: 12px;
	color: var(--cover-text);
	background: rgba(130, 230, 255, .07);
	font: inherit;
	font-weight: 850;
	cursor: pointer;
}

.cover-button-primary {
	border-color: rgba(130, 230, 255, .38);
	background: linear-gradient(135deg, rgba(41, 121, 164, .92), rgba(104, 83, 176, .9));
}

.cover-button:disabled {
	cursor: not-allowed;
	opacity: .42;
}

@media (min-width: 520px) {
	.cover-actions {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}





/* CompactCSS source: /apps/bookCoverMaker/styles/preview.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 * The Awtsmoos lets the finished image rest in one bounded vessel without forcing its true resolution onto the page;
 * Awtsmoos.com keeps preview, status, and export visually complete from the smallest phone to the widest stage.
 */
.preview-card {
	display: grid;
	gap: 14px;
	padding: 18px;
}

.preview-header {
	display: grid;
	gap: 4px;
}

.preview-header h2,
.preview-header p {
	margin: 0;
}

.preview-header h2 {
	font-size: 1rem;
	letter-spacing: -.02em;
}

.preview-header p {
	color: var(--cover-muted);
	font-size: .76rem;
	line-height: 1.45;
}

.preview-stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(260px, 64vw, 560px);
	min-width: 0;
	padding: 14px;
	overflow: auto;
	overscroll-behavior: contain;
	border: 1px solid rgba(135, 221, 255, .1);
	border-radius: 16px;
	background:
		linear-gradient(45deg, rgba(255, 255, 255, .018) 25%, transparent 25%) 0 0 / 18px 18px,
		linear-gradient(-45deg, rgba(255, 255, 255, .018) 25%, transparent 25%) 0 9px / 18px 18px,
		rgba(0, 0, 0, .18);
}

#coverCanvas {
	display: none;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
}

.preview-stage[data-ready="true"] #coverCanvas {
	display: block;
}

.preview-empty {
	max-width: 280px;
	margin: 0;
	color: var(--cover-muted);
	font-size: .82rem;
	line-height: 1.55;
	text-align: center;
}

.preview-stage[data-ready="true"] .preview-empty {
	display: none;
}

.cover-status {
	min-height: 1.35em;
	margin: 0;
	color: var(--cover-muted);
	font-size: .76rem;
	line-height: 1.4;
}

.cover-status[data-state="ready"] {
	color: #9ff3d0;
}

.cover-status[data-state="error"] {
	color: #ffaaa7;
}

.cover-status[data-state="loading"] {
	color: var(--cover-accent);
}

@media (min-width: 900px) and (min-height: 700px) {
	.preview-card {
		position: sticky;
		top: 20px;
	}
}



/* CompactCSS source: /apps/bookCoverMaker/styles/interactions.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 * The Awtsmoos lets every finite control answer hover, press, focus, and stillness without spectacle;
 * Awtsmoos.com keeps motion brief and professional so interaction clarifies the vessel rather than becoming an obstacle.
 */
.cover-button,
.advanced-controls summary,
.cover-field input,
.advanced-grid input,
.cover-field input[type="file"]::file-selector-button {
	transition:
		transform .16s ease,
		border-color .16s ease,
		background-color .16s ease,
		box-shadow .16s ease,
		filter .16s ease;
}

@media (hover: hover) and (pointer: fine) {
	.cover-button:not(:disabled):hover,
	.advanced-controls summary:hover,
	.cover-field input[type="file"]::file-selector-button:hover {
		transform: translateY(-1px);
		border-color: rgba(130, 230, 255, .58);
		filter: brightness(1.08);
	}

	.cover-field input:hover,
	.advanced-grid input:hover {
		border-color: rgba(130, 230, 255, .38);
		background: rgba(130, 230, 255, .04);
	}
}

.cover-button:not(:disabled):active,
.advanced-controls summary:active,
.cover-field input[type="file"]::file-selector-button:active {
	transform: translateY(1px) scale(.985);
	filter: brightness(.96);
}

.cover-field input:active,
.advanced-grid input:active {
	border-color: rgba(130, 230, 255, .56);
}

.cover-button:focus-visible,
.advanced-controls summary:focus-visible,
.cover-field input:focus-visible,
.advanced-grid input:focus-visible {
	outline: 3px solid var(--cover-accent);
	outline-offset: 3px;
}

.cover-button-primary:not(:disabled):hover {
	box-shadow: 0 10px 28px rgba(80, 164, 220, .2);
}

@media (prefers-reduced-motion: reduce) {
	.cover-button,
	.advanced-controls summary,
	.cover-field input,
	.advanced-grid input,
	.cover-field input[type="file"]::file-selector-button {
		transition: none;
	}

	.cover-button:hover,
	.cover-button:active,
	.advanced-controls summary:hover,
	.advanced-controls summary:active,
	.cover-field input[type="file"]::file-selector-button:hover,
	.cover-field input[type="file"]::file-selector-button:active {
		transform: none;
	}
}