/* Gyöngybetű — minimal írótábla */
:root {
	--bg: #FDF6E3;
	--text: #3E3630;
	--line: #C4B8A0;
	--line-mid: #D8CEBC;
	--line-base: #A89880;
	--margin-line: rgba(200, 80, 70, 0.25);
	--toolbar-bg: rgba(255, 255, 255, 0.95);
	--toolbar-border: rgba(0, 0, 0, 0.08);
	--btn-bg: rgba(0, 0, 0, 0.04);
	--btn-hover: rgba(0, 0, 0, 0.08);
	--fs: 48px;
	--rh: 96px;
	--margin-left: 70px;
	--pad-top: 17px;
	--font: 'Magyar Folyoiras', cursive;
	--ln-top: 24px;
	--ln-mid: 36px;
	--ln-base: 60px;
}

[data-theme="light"] {
	--bg: #FFFFFF;
	--text: #333333;
	--line: #B0C4DE;
	--line-mid: #D0DCE8;
	--line-base: #8AA8C8;
	--margin-line: rgba(220, 80, 80, 0.25);
	--toolbar-bg: rgba(240, 244, 248, 0.95);
}
[data-theme="cream"] {
	--bg: #FDF6E3;
	--text: #3E3630;
	--line: #C4B8A0;
	--line-mid: #D8CEBC;
	--line-base: #A89880;
}
[data-theme="mint"] {
	--bg: #E8F5E9;
	--text: #2E4030;
	--line: #A5D6A7;
	--line-mid: #C8E6C9;
	--line-base: #81C784;
}
[data-theme="sky"] {
	--bg: #E3F2FD;
	--text: #263238;
	--line: #90CAF9;
	--line-mid: #BBDEFB;
	--line-base: #64B5F6;
}
[data-theme="dark"] {
	--bg: #1A1A2E;
	--text: #FFD700;
	--line: #2A2A4E;
	--line-mid: #252545;
	--line-base: #3A3A5E;
	--margin-line: rgba(200, 80, 70, 0.15);
	--toolbar-bg: rgba(26, 26, 46, 0.95);
	--toolbar-border: rgba(255, 255, 255, 0.08);
	--btn-bg: rgba(255, 255, 255, 0.08);
	--btn-hover: rgba(255, 255, 255, 0.14);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; min-height: 100vh; }
body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	transition: background-color 0.25s, color 0.25s;
}

#gb-bar {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 8px 12px;
	background: var(--toolbar-bg);
	border-bottom: 1px solid var(--toolbar-border);
	backdrop-filter: blur(8px);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 13px;
}
#gb-bar a, #gb-bar button, #gb-bar select {
	font: inherit;
	color: var(--text);
	background: var(--btn-bg);
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 6px 10px;
	cursor: pointer;
	text-decoration: none;
}
#gb-bar a:hover, #gb-bar button:hover { background: var(--btn-hover); }
#gb-bar .gb-brand {
	font-weight: 600;
	margin-right: 4px;
	background: transparent !important;
	padding-left: 4px;
}
#gb-status {
	margin-left: auto;
	opacity: 0.7;
	font-size: 12px;
	padding: 4px 8px;
}

#editor-wrap {
	width: 100%;
	min-height: 100vh;
	padding-top: 52px;
}
#editor {
	display: block;
	width: 100%;
	min-height: calc(100vh - 52px);
	padding: var(--pad-top) 40px 60px var(--margin-left);
	border: none;
	outline: none;
	resize: none;
	overflow: hidden;
	font-family: var(--font);
	font-size: var(--fs);
	line-height: var(--rh);
	color: var(--text);
	background-color: var(--bg);
	caret-color: var(--text);
	word-wrap: break-word;
	white-space: pre-wrap;
	-webkit-font-smoothing: antialiased;
}
#editor.gb-lines {
	background-image:
		linear-gradient(
			90deg,
			transparent calc(var(--margin-left) - 11px),
			var(--margin-line) calc(var(--margin-left) - 11px),
			var(--margin-line) calc(var(--margin-left) - 9px),
			transparent calc(var(--margin-left) - 9px)
		),
		repeating-linear-gradient(
			to bottom,
			transparent 0px,
			transparent calc(var(--ln-top) - 0.5px),
			var(--line) calc(var(--ln-top) - 0.5px),
			var(--line) calc(var(--ln-top) + 0.5px),
			transparent calc(var(--ln-top) + 0.5px),
			transparent calc(var(--ln-mid) - 0.5px),
			var(--line-mid) calc(var(--ln-mid) - 0.5px),
			var(--line-mid) calc(var(--ln-mid) + 0.5px),
			transparent calc(var(--ln-mid) + 0.5px),
			transparent calc(var(--ln-base) - 0.75px),
			var(--line-base) calc(var(--ln-base) - 0.75px),
			var(--line-base) calc(var(--ln-base) + 0.75px),
			transparent calc(var(--ln-base) + 0.75px),
			transparent var(--rh)
		);
	background-position: 0 0, 0 var(--pad-top);
}

@media print {
	#gb-bar { display: none !important; }
	#editor-wrap { padding-top: 0; }
	#editor { min-height: auto; }
}