:root {
	--bg: #ffffff;
	--border: #ddd;
	--card: #fff;
	--chip-bg: #eef;
	--chip-br: #ccd;
	--fg: #111;
	--log-bg: #0b1020;
	--log-fg: #c9e6ff;
	--muted: #666;
}

html, body { height: 100%; }
body {
	background: var(--bg);
	box-sizing: border-box;
	color: var(--fg);
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica, Arial, sans-serif;
	line-height: 1.45;
	margin: 24px auto;
	max-width: 980px;
	padding: 0 16px 24px;
}
@supports (padding: max(0px)) { body { padding-bottom: max(24px, env(safe-area-inset-bottom)); } }

h1 { font-size: 1.5rem; margin: 0 0 8px; }

.card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 14px;
	margin: 12px 0;
	padding: 16px;
}

.footer {
	border-radius: 14px;
	margin: 5px 0;
	padding: 5px 16px;
}

label { display: block; font-weight: 600; margin: 8px 0 6px; }

input, textarea, select, button {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-sizing: border-box;
	color: var(--fg);
	font-size: 16px;
	padding: 12px 14px;
	width: 100%;
}

textarea { font-family: ui-monospace, Consolas, monospace; min-height: 140px; }
select { background: var(--card); }

.controls button {
	cursor: pointer;
	flex: 1 1 auto;
	min-height: 44px;
	transition: opacity 0.2s ease;
}

.controls button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	color: #666;
}

.row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.grid-3 {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1fr 1fr;
}
.grid-2 {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1fr;
}

.muted, .muted ul li { color: var(--muted); font-size: .95rem; }

.log {
	-webkit-overflow-scrolling: touch;
	background: var(--log-bg);
	border-radius: 12px;
	color: var(--log-fg);
	font-family: ui-monospace, Consolas, monospace;
	min-height: 220px;
	max-height: min(50vh, 420px);
	overflow-y: auto;
	padding: 12px;
	white-space: pre-wrap;
}

.pill {
	background: var(--chip-bg);
	border: 1px solid var(--chip-br);
	border-radius: 999px;
	display: inline-block;
	font-size: .9rem;
	margin: 0 8px 8px 0;
	padding: 4px 10px;
}

#activeUsers {
	margin: 0 0 5px 0;
}

.controls { display: flex; flex-wrap: wrap; gap: 12px; }
.controls button { cursor: pointer; flex: 1 1 auto; min-height: 44px; }

.inline {
	display: flex; align-items: center; gap: 8px;
	font-weight: 600; margin: 8px 0;
}
.inline input[type="checkbox"] { width: auto; min-width: 20px; height: 20px; }

.ok { color: #4cd964; }
.err { color: #ffb3b3; }
.warn { color: #ffd27d; }
.small { font-size: .9rem; }

@media (max-width: 820px) {
	body { margin: 16px auto; padding: 0 12px 24px; }
	h1 { font-size: 1.25rem; }
	.row { grid-template-columns: 1fr; }
	.grid-3 { grid-template-columns: 1fr; }
	.controls { flex-direction: column; }
	.log { min-height: 55vh; font-size: 14px; }
}





#cookie_msg {
	padding: 20px 40px;
	color: #fff;
	font-size: 12pt;
	background: #222;
	line-height: 25px;
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
	z-index: 1000000;
}
#cookie_msg a {
	color: #56B6FF;
	font-size: 12pt;
	text-decoration: underline;
}
#cookie_msg a:hover {
	color: #CC0000;
	font-size: 12pt;
	text-decoration: none;
}
.inp_e {
	margin: 5px 0 0 0;
	padding: 8px 20px;
	width: 100px;
	color: #fff;
	font-size: 16px;
	background: #00b721;

	border: #00b721 1px solid;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

	cursor: pointer;
}
.inp_e:hover {
	background: #00d326;
}