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

:root {
	--black: #000000;
	--surface: #0A0A0A;
	--border: #1A1A1A;
	--white: #FFFFFF;
	--white-50: rgba(255, 255, 255, 0.50);
	--white-30: rgba(255, 255, 255, 0.30);
	--white-10: rgba(255, 255, 255, 0.10);
	--white-05: rgba(255, 255, 255, 0.05);
	--radius: 12px;
	--radius-sm: 8px;
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-mono: 'JetBrains Mono', monospace;
}

html {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--font-sans);
	background: var(--black);
	color: var(--white);
	min-height: 100vh;
	display: flex;
	justify-content: center;
	padding: 48px 24px;
}

.app {
	width: 100%;
	max-width: 880px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}

.app-title {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--white);
	user-select: none;
}

.dropzone {
	width: 100%;
	height: 280px;
	border: 1px dashed var(--white-30);
	border-radius: var(--radius);
	background: var(--surface);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}

.dropzone:hover,
.dropzone.drag-over {
	border-color: var(--white);
	background: rgba(255, 255, 255, 0.03);
}

.dropzone-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	pointer-events: none;
}

.dropzone-icon { color: var(--white-50); }

.dropzone-text {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--white-50);
}

.dropzone-hint {
	font-size: 13px;
	font-family: var(--font-mono);
	color: var(--white-30);
}

.dropzone-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.controls {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.control-group {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.control-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--white-50);
}

.algo-selector {
	display: flex;
	gap: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	width: 100%;
}

.algo-btn {
	flex: 1;
	height: 40px;
	border: none;
	background: transparent;
	color: var(--white-30);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.algo-btn + .algo-btn { border-left: 1px solid var(--border); }

.algo-btn:hover {
	color: var(--white);
	background: rgba(255, 255, 255, 0.03);
}

.algo-btn.active {
	color: var(--black);
	background: var(--white);
}

.slider-row {
	display: flex;
	align-items: center;
	gap: 16px;
}

.slider {
	-webkit-appearance: none;
	appearance: none;
	flex: 1;
	height: 4px;
	background: var(--white-10);
	border-radius: 2px;
	outline: none;
	cursor: pointer;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--white);
	border: none;
	cursor: pointer;
	transition: transform 0.15s;
}

.slider::-webkit-slider-thumb:hover { transform: scale(1.2); }

.slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--white);
	border: none;
	cursor: pointer;
}

.slider-value {
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 500;
	color: var(--white);
	min-width: 32px;
	text-align: right;
}

.slider-sm { height: 3px; }
.slider-sm::-webkit-slider-thumb { width: 12px; height: 12px; }
.slider-sm::-moz-range-thumb { width: 12px; height: 12px; }
.slider-value-sm { font-size: 12px; min-width: 24px; }

.canvas-area {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.canvas-header { display: flex; justify-content: center; }

.view-toggle {
	display: flex;
	gap: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.view-btn {
	height: 32px;
	padding: 0 20px;
	border: none;
	background: transparent;
	color: var(--white-30);
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.view-btn + .view-btn { border-left: 1px solid var(--border); }

.view-btn:hover {
	color: var(--white);
	background: rgba(255, 255, 255, 0.03);
}

.view-btn.active {
	color: var(--white);
	background: rgba(255, 255, 255, 0.08);
}

.canvas-grid {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.canvas-grid.view-pixelated .canvas-wrapper:first-child { display: none; }
.canvas-grid.view-pixelated { grid-template-columns: 1fr; }

.canvas-wrapper {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.canvas-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--white-30);
	text-align: center;
}

.canvas-wrapper canvas {
	width: 100%;
	height: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	display: block;
}

.canvas-footer { display: flex; justify-content: center; }

.dimension-info {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--white-30);
}

.ascii-section {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.ascii-tools {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.ascii-tool {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tool-label {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--white-30);
	letter-spacing: 0.5px;
	white-space: nowrap;
}

.ascii-select {
	height: 28px;
	padding: 0 8px;
	background: var(--surface);
	color: var(--white-50);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-size: 10px;
	outline: none;
	cursor: pointer;
}

.ascii-select:focus { border-color: var(--white-30); }

.ascii-input {
	height: 28px;
	padding: 0 8px;
	background: var(--surface);
	color: var(--white-50);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-size: 11px;
	outline: none;
	width: 120px;
}

.ascii-input:focus { border-color: var(--white-30); }

.ascii-check {
	-webkit-appearance: none;
	appearance: none;
	width: 28px;
	height: 28px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, border-color 0.15s;
}

.ascii-check:hover { border-color: var(--white-30); }

.ascii-check:checked {
	background: var(--white);
	border-color: var(--white);
}

.ascii-check:checked::after {
	content: '';
	width: 10px;
	height: 10px;
	background: var(--black);
	border-radius: 2px;
}

.ascii-toggle-label {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.ascii-toggle {
	-webkit-appearance: none;
	appearance: none;
	width: 28px;
	height: 16px;
	border-radius: 8px;
	background: var(--white-10);
	border: none;
	cursor: pointer;
	position: relative;
	transition: background 0.15s;
}

.ascii-toggle::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--white-30);
	transition: transform 0.15s, background 0.15s;
}

.ascii-toggle:checked {
	background: var(--white-30);
}

.ascii-toggle:checked::after {
	transform: translateX(12px);
	background: var(--white);
}

.ascii-toggle:hover { background: var(--white-20); }

.ascii-viewport {
	width: 100%;
	max-height: 400px;
	overflow: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	padding: 12px;
}

.ascii-output {
	font-family: var(--font-mono);
	font-size: 7px;
	line-height: 6px;
	color: var(--white-50);
	white-space: pre;
	word-break: break-all;
	letter-spacing: 0;
}

.ascii-output span {
	font-size: inherit;
	line-height: inherit;
}

.ascii-placeholder {
	font-size: 11px;
	color: var(--white-10);
	display: block;
	text-align: center;
	padding: 24px 0;
}

.ascii-footer {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ascii-meta {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--white-30);
}

.actions {
	display: flex;
	gap: 12px;
	align-items: center;
}

.btn {
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: opacity 0.2s, background 0.2s, border-color 0.2s;
}

.btn:hover { opacity: 0.85; }
.btn:active { opacity: 0.7; }

.btn-primary {
	height: 64px;
	padding: 0 48px;
	background: var(--white);
	color: var(--black);
	border-radius: calc(var(--radius) + 4px);
	font-size: 15px;
	letter-spacing: 2px;
}

.btn-secondary {
	height: 40px;
	padding: 0 24px;
	background: transparent;
	color: var(--white);
	border: 1px solid var(--white-10);
	border-radius: calc(var(--radius) - 2px);
}

.btn-secondary:active { background: rgba(255, 255, 255, 0.05); }

.btn-tertiary {
	height: 28px;
	padding: 0 12px;
	background: transparent;
	color: var(--white-30);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: 10px;
	letter-spacing: 0.8px;
}

.btn-tertiary:hover {
	color: var(--white-50);
	border-color: var(--white-30);
}

.btn-tertiary:active { background: rgba(255, 255, 255, 0.03); }

.shortcuts-hint {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--white-10);
	letter-spacing: 0.5px;
	user-select: none;
}

.status {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 20px;
}

.status-text {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--white-30);
}

.spinner {
	width: 14px;
	height: 14px;
	border: 2px solid var(--white-10);
	border-top-color: var(--white-50);
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}

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

@media (max-width: 600px) {
	.canvas-grid { grid-template-columns: 1fr; }
	.app { padding: 24px 0; gap: 24px; }
	.btn-primary { padding: 0 32px; height: 56px; }
	.actions { flex-direction: column; width: 100%; }
	.actions .btn { width: 100%; }
	.algo-selector { flex-direction: column; }
	.algo-btn + .algo-btn { border-left: none; border-top: 1px solid var(--border); }
	.section-header { flex-direction: column; align-items: flex-start; }
	.ascii-tools { width: 100%; }
	.ascii-footer { flex-wrap: wrap; }
}