:root{
	--bg:#0b0f14;
	--panel:#0f1621;
	--panel2:#111b29;
	--border:rgba(255,255,255,.10);
	--text:rgba(255,255,255,.88);
	--muted:rgba(255,255,255,.60);
	--accent:#5aa2ff;
}

html, body {
	height: 100%;
}

body{
	margin: 0;
	overflow: hidden;
	background: var(--bg);
	color: var(--text);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* =========================
   APP LAYOUT
========================= */

.app-root{
	height: 100vh;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem;
}

.topbar{
	flex: 0 0 auto;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: .75rem;
	padding: .75rem 1rem;
}

.small-muted{
	font-size: .875rem;
	color: var(--muted);
}

/* =========================
   FORM (DARK, DE CKEDITOR-T NEM ÉRINTI)
========================= */

.form-check-label{
	user-select: none;
}

.form-check-input{
	background-color: transparent;
	border-color: var(--border);
}

.form-check-input:checked{
	background-color: var(--accent);
	border-color: var(--accent);
}

.btn-primary{
	background-color: var(--accent);
	border-color: var(--accent);
}

.btn-primary:hover{
	filter: brightness(1.05);
}

.btn-outline-secondary{
	color: var(--text);
	border-color: var(--border);
}

.btn-outline-secondary:hover{
	background: rgba(255,255,255,.06);
	border-color: rgba(255,255,255,.18);
}

/* =========================
   EDITORS GRID
========================= */

.editors{
	flex: 1 1 auto;
	min-height: 0;
}

.editors > [class^="col"]{
	min-width: 0;
}

.editor-wrap{
	height: 100%;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.editor-box{
	flex: 1 1 auto;
	min-height: 0;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: .75rem;
	overflow: hidden;
}

/* =========================
   CKEDITOR 4 – CSAK MÉRET + SCROLL
   ❗ SEMMI SZÍN, SEMMI SKIN
========================= */

.editor-box .cke{
	height: 100% !important;
}

.editor-box .cke_inner{
	height: 100% !important;
	display: flex;
	flex-direction: column;
}

.editor-box .cke_top{
	flex: 0 0 auto;
}

.editor-box .cke_contents{
	flex: 1 1 auto;
	height: auto !important;
}

.editor-box .cke_bottom{
	flex: 0 0 auto;
}

.editor-box .cke_wysiwyg_frame{
	height: 100% !important;
}