/* === Base Neobrutalist theme === */
:root{
	--blue:#1f4dd8;
	--ink:#000;
	--paper:#fff;
	--accent:#ffb109;
	--muted:#666;
	--banner-bg:#ffb109;
	--banner-color:#000;
	--banner-size:96px;
}

*{box-sizing:border-box}

body{
	margin:0;
	background:var(--blue);
	color:var(--ink);
	font-family:"Arial Black", Impact, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
	min-height:100vh;
	display:flex;
	flex-direction:column;
}

/* Top nav */
.site-header{
	border-bottom:4px solid var(--ink);
	background:var(--paper);
	box-shadow:0 6px 0 var(--ink);
}
.nav{
	display:flex;
	gap:12px;
	align-items:center;
	padding:10px 12px;
}
.nav-link,
.nav-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:8px 10px;
	border:3px solid var(--ink);
	background:var(--paper);
	color:var(--ink);
	text-decoration:none;
	box-shadow:4px 4px 0 var(--ink);
	font:inherit;
}
.nav-button{
	cursor:pointer;
	appearance:none;
	background:var(--paper);
}
.nav-link:active,
.nav-button:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.nav-spacer{ flex:1 }

#sigmasim-banner{
	font-size:var(--banner-size);
	text-align:center;
	background:var(--banner-bg);
	color:var(--banner-color);
	border-bottom:4px solid var(--ink);
	padding:20px 0;
	font-family:"Arial Black", Impact, sans-serif;
}

/* Stage */
#app{
	position:relative;
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
}

/* Auth card */
.card{
	width:min(520px,92vw);
	background:var(--paper);
	border:4px solid var(--ink);
	box-shadow:8px 8px 0 var(--ink);
	padding:20px;
	text-align:center;
	overflow:hidden;
	transition:max-height .35s ease-in-out;
	max-height:1000px;
}

/* Forms / UI bits */
.brand{
	margin:0 0 12px;
	font-size:32px;
	background:var(--accent);
	border:3px solid var(--ink);
	padding:6px 10px;
	display:inline-block;
}
.muted{ opacity:.85; font-size:13px; color:var(--muted); }
.hidden{ display:none !important; }
.toggle{ margin-top:8px; font-size:13px; text-decoration:underline; cursor:pointer; }

.form{
	display:grid;
	gap:12px;
	margin:14px 0;
	text-align:left;
}
input, button{
	padding:12px;
	font-size:14px;
	border:3px solid var(--ink);
	background:var(--paper);
	color:var(--ink);
	outline:none;
}
button{
	cursor:pointer;
	font-weight:bold;
	background:var(--accent);
	box-shadow:4px 4px 0 var(--ink);
}
button:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }

.checkbox-row{ display:flex; align-items:center; gap:8px; }

/* Profile */
.profile-main{ display:flex; align-items:center; gap:16px; }
.profile-main .stats{ display:flex; flex-direction:column; gap:4px; }
.profile-actions{ margin-top:16px; display:flex; }
.profile-actions button{ width:auto; }

/* Routed page area */
.page-root{
	width:min(900px, 92vw);
	margin:0 auto;
}
.page-root:empty{
	display:none;
}
.page{
	background:var(--paper);
	border:4px solid var(--ink);
	box-shadow:8px 8px 0 var(--ink);
	padding:16px;
}
.page h2{
	margin:0 0 12px;
	display:inline-block;
	background:var(--accent);
	border:3px solid var(--ink);
	padding:4px 8px;
}
.ok{ color:green; font-weight:bold; }
.err{ color:red; font-weight:bold; }