/* The dev panel's one stylesheet (the CSP allows no other style). The game's colours (src/client/UI/Theme.luau);
   Titillium Web when the computer has it, else the system's font: the panel loads nothing from elsewhere. */
:root {
	--bg: #15171d;
	--surface: #1b1e25;
	--surface2: #22252d;
	--line: #2c303a;
	--text: #f4f1ea;
	--dim: #a7acb6;
	--good: #4fd18b;
	--bad: #e0483e;
	--warn: #ffc23d;
	--primary: #f06a2b;
	--primary-hover: #ff8447;
	--button: #2c303a;
	--button-hover: #383d49;
	color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 15px/1.5 "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	padding: 12px 16px;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}
.brand { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.brand b { color: var(--primary); }
nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
nav a { color: var(--dim); text-decoration: none; padding: 4px 10px; border-radius: 6px; }
nav a:hover { color: var(--text); background: var(--surface2); }
nav a.on { color: var(--text); background: var(--surface2); box-shadow: inset 0 -2px 0 var(--primary); }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 16px 20px;
	margin: 0 0 16px;
}
.narrow { max-width: 420px; margin: 48px auto; }
h1 { font-size: 22px; margin: 0 0 8px; }
h2 { font-size: 17px; margin: 0 0 8px; }
h3 { font-size: 15px; margin: 16px 0 4px; }
a { color: var(--primary-hover); }
code, pre { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; }
code { background: var(--surface2); padding: 1px 5px; border-radius: 4px; }
pre {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 12px;
	overflow-x: auto;
	white-space: pre;
	max-height: 480px;
}
.muted { color: var(--dim); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
label { display: block; margin: 12px 0 4px; color: var(--dim); }
input[type="password"] {
	width: 100%;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--text);
	font: inherit;
}
input[type="password"]:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
button, a.button {
	display: inline-block;
	font: inherit;
	font-weight: 600;
	color: var(--text);
	background: var(--button);
	border: 0;
	border-radius: 8px;
	padding: 7px 14px;
	cursor: pointer;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
button:hover, a.button:hover { background: var(--button-hover); }
button.primary, a.button.primary { background: var(--primary); }
button.primary:hover, a.button.primary:hover { background: var(--primary-hover); }
button[disabled] { opacity: 0.45; cursor: not-allowed; }
form.inline { display: inline; margin: 0; }
form.out { margin: 0; }
.narrow form button { margin-top: 16px; width: 100%; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--dim); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
td.name { white-space: nowrap; }
td.st-live { color: var(--good); }
td.st-hidden, td.st-scheduled { color: var(--warn); }
td.st-draft { color: var(--dim); }
ul.tools { list-style: none; padding: 0; margin: 0; }
ul.tools li { padding: 6px 0; }
ul.tools a { font-weight: 600; margin-right: 6px; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 8px 0 0; }
dt { color: var(--dim); }
dd { margin: 0; }