:root{
	--bg:#0b0f14;
	--panel:#101821;
	--panel2:#0f1620;
	--text:#e9eef2;
	--muted:#9aa7b2;
	--line:#1c2a38;
	--btn:#162231;
	--btn2:#1a2b3f;
	--accent:#76d7ff;
	--accent2:#8cffb0;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
	margin:0;
	font-family: ui-sans-serif, system-ui, Segoe UI, Arial;
	background: radial-gradient(1200px 600px at 20% 0%, #102033 0%, var(--bg) 60%);
	color:var(--text);
}

a{ color:inherit; text-decoration:none; }
code{ color:#cbe8ff; }
.textLink{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

.topbar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:14px 18px;
	border-bottom:1px solid var(--line);
	background:rgba(9,14,20,.7);
	backdrop-filter: blur(10px);
	position:sticky;
	top:0;
	z-index:10;
}

.brand{ display:flex; align-items:center; gap:12px; }
.logo{ height:42px; width:auto; }
.wordmark{ font-size:25px; font-weight:800; letter-spacing:.5px; }
.wordmark span{ color:var(--accent2); }

.nav{ display:flex; gap:16px; align-items:center; }
.nav a{
	padding:10px 10px;
	border-radius:10px;
	color:var(--muted);
}
.nav a:hover{ background:rgba(255,255,255,.04); color:var(--text); }

.wrap{ max-width:1100px; margin:0 auto; padding:18px; }

.hero{
	display:grid;
	grid-template-columns: 1.2fr .8fr;
	gap:18px;
	padding:18px 0;
}
@media (max-width: 900px){
	.hero{ grid-template-columns:1fr; }
}

.heroText h1{ margin:0 0 10px 0; font-size:42px; letter-spacing:.2px; }
.sub{ margin:0 0 14px 0; color:var(--muted); line-height:1.4; }

.heroButtons{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; }

.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:10px 14px;
	border:1px solid var(--line);
	border-radius:12px;
	background:linear-gradient(180deg, var(--btn2), var(--btn));
	color:var(--text);
}
.btn:hover{ border-color:#2a3c50; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn.primary{
	border-color: rgba(118,215,255,.35);
	box-shadow: 0 0 0 2px rgba(118,215,255,.10) inset;
}
.btn.full{ width:100%; }
.btn.danger{ color:#ffc2c2; }

.statusRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.pill{
	padding:8px 10px;
	border-radius:999px;
	border:1px solid var(--line);
	background:rgba(16,24,33,.6);
	color:var(--muted);
	font-size:13px;
}

.card{
	border:1px solid var(--line);
	background:linear-gradient(180deg, rgba(16,24,33,.92), rgba(15,22,32,.92));
	border-radius:16px;
	padding:14px;
	box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.cardTitle{ font-weight:700; margin-bottom:8px; }
.small{ color:var(--muted); font-size:13px; line-height:1.35; }
.muted{ color:var(--muted); }

.lbl{ display:block; font-size:12px; color:var(--muted); margin:10px 0 6px; }
.in{
	width:100%;
	padding:10px 12px;
	border-radius:12px;
	border:1px solid var(--line);
	background:#0c121a;
	color:var(--text);
	outline:none;
}
.in:focus{ border-color:#2a3c50; }
.passwordField{ position:relative; }
.passwordField .in{ padding-right:48px; }
.passwordToggle{
	position:absolute;
	top:50%;
	right:4px;
	width:40px;
	height:34px;
	padding:0;
	transform:translateY(-50%);
	border:0;
	border-radius:9px;
	background:transparent;
	color:var(--muted);
	cursor:pointer;
	font-size:18px;
	line-height:1;
}
.passwordToggle:hover,
.passwordToggle:focus-visible{
	background:rgba(255,255,255,.06);
	color:var(--text);
	outline:none;
}
.passwordToggle[aria-pressed="true"]::after{
	content:"";
	position:absolute;
	width:24px;
	left:8px;
	top:16px;
	border-top:2px solid currentColor;
	transform:rotate(-42deg);
}

.divider{ height:1px; background:var(--line); margin:12px 0; }
.hidden{ display:none !important; }
.hint{ color:var(--muted); font-size:12px; margin-top:5px; }
.notice{ color:var(--muted); font-size:14px; margin-top:14px; line-height:1.45; }
.notice.error{ color:#ffb2b2; }
.notice.success{ color:#b9f6c9; }
.recoveryLinks{ display:flex; justify-content:space-between; gap:10px; margin-top:10px; }
.formButton{ margin-top:16px; }
.narrow{ max-width:640px; margin:0 auto; padding:38px 18px; }
.narrow.wide{ max-width:1000px; }
.pageCard{ padding:24px; }
.pageCard h1{ margin:4px 0 10px; }
.pageCard h2{ margin:24px 0 10px; font-size:18px; }
.eyebrow{ color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.captchaBox{ min-height:70px; margin:16px 0 12px; }
.linkButton{
	border:0;
	background:none;
	color:var(--muted);
	font:inherit;
	padding:10px;
	cursor:pointer;
}
.accountGrid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:18px; }
.inlineForm{ display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:14px; }
.permissionList{ display:flex; flex-wrap:wrap; gap:8px; }
.permission{ border:1px solid var(--line); border-radius:999px; padding:6px 9px; color:#b9f6c9; font-size:12px; }
.newCode{ text-align:center; border:1px solid rgba(140,255,176,.25); border-radius:14px; padding:14px; margin-top:14px; background:rgba(140,255,176,.04); }
.newCode output{ display:block; color:var(--accent2); font-size:34px; font-weight:800; letter-spacing:.18em; margin:4px 0; }
.recoveryCode output{ font-size:20px; letter-spacing:.08em; overflow-wrap:anywhere; }
.completionActions{ margin-top:14px; }
.codeInput{ text-transform:uppercase; letter-spacing:.08em; }
.deviceList{ display:flex; flex-direction:column; gap:9px; margin-top:16px; }
.deviceRow{ display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid var(--line); padding-top:10px; }
@media (max-width:700px){
	.accountGrid{ grid-template-columns:1fr; }
	.inlineForm{ grid-template-columns:1fr; }
	.nav{ gap:3px; }
	.nav a{ padding:8px 5px; }
}

.grid{
	display:grid;
	grid-template-columns: 1.2fr .8fr .8fr;
	gap:18px;
	padding:10px 0 30px;
}
@media (max-width: 900px){
	.grid{ grid-template-columns:1fr; }
}

.boards{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.boardRow{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
	padding:10px;
	border-radius:12px;
	border:1px solid rgba(255,255,255,.06);
	background:rgba(0,0,0,.10);
}
.boardRow .name{ font-weight:650; }
.boardRow .meta{ color:var(--muted); font-size:12px; margin-top:3px; }
.boardRow .top{ text-align:right; color:var(--muted); font-size:12px; }

.foot{
	max-width:1100px;
	margin:0 auto;
	padding:16px 18px 30px;
	color:var(--muted);
	display:flex;
	gap:10px;
	align-items:center;
}
.dot{ opacity:.45; }

.adminHeading{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.adminHeading h1{ margin:4px 0 10px; }
.adminSearch{ max-width:260px; }
.adminUserList{ display:flex; flex-direction:column; gap:14px; margin-top:18px; }
.adminUser{ border:1px solid var(--line); border-radius:14px; padding:14px; background:rgba(0,0,0,.10); }
.adminUserHeader{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.roleBadge{ border:1px solid var(--line); border-radius:999px; padding:5px 9px; color:var(--muted); font-size:12px; }
.role-admin{ color:var(--accent); border-color:rgba(118,215,255,.30); }
.role-founder{ color:var(--accent2); border-color:rgba(140,255,176,.30); }
.adminPermissionGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.permissionToggle{ display:flex; align-items:center; gap:8px; padding:8px 9px; border:1px solid rgba(255,255,255,.06); border-radius:10px; color:var(--muted); font-size:13px; cursor:pointer; }
.permissionToggle:has(input:checked){ color:var(--text); border-color:rgba(140,255,176,.20); background:rgba(140,255,176,.04); }
.permissionToggle:has(input:disabled){ cursor:default; opacity:.85; }
.permissionToggle input{ accent-color:#8cffb0; }
.founderNote{ margin:10px 0 0; }
@media (max-width:800px){
	.adminHeading{ flex-direction:column; }
	.adminSearch{ max-width:none; }
	.adminPermissionGrid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
	.adminPermissionGrid{ grid-template-columns:1fr; }
}
.adminFilters{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.adminFilters select{ width:auto; min-width:130px; }
@media(max-width:700px){ .adminFilters{ width:100%; justify-content:flex-start; } .adminFilters .adminSearch{ flex:1 1 100%; } }
.adminSectionDivider{ margin:28px 0 22px; }
.adminRomForm{ display:grid; grid-template-columns:1fr 1.6fr .7fr 1.5fr; gap:10px; align-items:end; margin-top:12px; }
.adminRomDescriptionField{ grid-column:1 / 4; }
.adminRomSubmit{ display:flex; align-items:end; }
.adminRomSubmit .btn{ width:100%; }
.adminRomList{ display:flex; flex-direction:column; gap:14px; margin-top:18px; }
.adminRom{ border:1px solid var(--line); border-radius:14px; padding:14px; background:rgba(0,0,0,.10); }
.adminRomEditGrid{ display:grid; grid-template-columns:1fr 1.6fr .7fr 1.4fr; gap:9px; }
.lblBlock{ color:var(--muted); font-size:12px; }
.lblBlock .in{ margin-top:6px; }
.adminRomWide{ grid-column:span 2; }
.romMeta{ overflow-wrap:anywhere; margin-top:10px; }
.romActions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.romPublished{ color:#b9f6c9; }
.romUnpublished{ color:#ffe0a3; }
.romReleaseHistory{ margin-top:12px; border-top:1px solid rgba(255,255,255,.06); padding-top:10px; }
.romReleaseHistory summary{ cursor:pointer; color:var(--muted); font-size:12px; }
.romReleaseRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.romReleaseRow:last-child{ border-bottom:0; }
.romReleaseInfo{ min-width:0; font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.romReleaseInfo strong{ color:var(--text); }
.romReleaseButtons{ display:flex; gap:6px; flex-wrap:wrap; flex:0 0 auto; }
.romReleaseNotes{ white-space:pre-wrap; margin-top:4px; }
.romList{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.romRow{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; border:1px solid var(--line); border-radius:14px; padding:14px; background:rgba(0,0,0,.10); }
.romRoomId{ font-family:ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--accent2); letter-spacing:.05em; }
@media(max-width:850px){
	.adminRomForm,.adminRomEditGrid{ grid-template-columns:1fr 1fr; }
	.adminRomDescriptionField,.adminRomWide{ grid-column:1 / -1; }
	.adminRomSubmit{ grid-column:span 1; }
}
@media(max-width:560px){
	.adminRomForm,.adminRomEditGrid{ grid-template-columns:1fr; }
	.adminRomDescriptionField,.adminRomWide,.adminRomSubmit{ grid-column:1; }
	.romRow{ flex-direction:column; }
}

.adminOpsHeading{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.adminOpsHeading h1{ margin:4px 0 10px; }
.opsGrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.opsPanel{ border:1px solid var(--line); border-radius:14px; padding:14px; background:rgba(0,0,0,.10); min-width:0; }
.opsPanel h2{ margin:3px 0 0; }
.opsPanel h3{ margin:18px 0 8px; font-size:14px; }
.opsPanelTitle{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.opsState{ display:inline-flex; align-items:center; padding:5px 9px; border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--muted); white-space:nowrap; }
.opsState.opsLive{ color:#b9f6c9; border-color:rgba(140,255,176,.30); background:rgba(140,255,176,.04); }
.opsState.opsWarn{ color:#ffe0a3; border-color:rgba(255,210,120,.28); background:rgba(255,210,120,.04); }
.opsState.opsDown{ color:#ffb2b2; border-color:rgba(255,120,120,.28); background:rgba(255,120,120,.04); }
.metricGrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:14px; }
.metricCard{ border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:9px; min-width:0; }
.metricCard strong{ display:block; font-size:18px; color:var(--text); overflow:hidden; text-overflow:ellipsis; }
.metricCard span{ display:block; color:var(--muted); font-size:11px; margin-top:2px; }
.metricCard small{ display:block; color:var(--muted); font-size:10px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.opsTableWrap{ overflow:auto; border:1px solid rgba(255,255,255,.06); border-radius:10px; }
.opsTable{ width:100%; border-collapse:collapse; font-size:12px; min-width:520px; }
.opsTable th,.opsTable td{ padding:7px 8px; text-align:left; border-bottom:1px solid rgba(255,255,255,.05); white-space:nowrap; }
.opsTable th{ color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.opsTable tbody tr:last-child td{ border-bottom:0; }
.opsTable td:first-child{ color:var(--text); }
@media(max-width:900px){
	.opsGrid{ grid-template-columns:1fr; }
}
@media(max-width:650px){
	.adminOpsHeading{ flex-direction:column; }
	.metricGrid{ grid-template-columns:1fr 1fr; }
}

.opsAction{ padding:5px 9px; border-radius:8px; font-size:12px; white-space:nowrap; }

/* Forum invite enrollment administration. */
.adminInviteForm{ display:grid; grid-template-columns:1.1fr .55fr 1.6fr auto; gap:10px; align-items:end; margin-top:12px; }
.adminInviteSubmit{ display:flex; align-items:end; }
.adminInviteSubmit .btn{ width:100%; }
.adminTerminalToggle{ display:flex; gap:7px; align-items:center; color:var(--muted); font-size:13px; white-space:nowrap; padding-top:8px; }
.inviteSecret{ margin-top:14px; padding:14px; border:1px solid var(--accent); border-radius:14px; background:rgba(0,0,0,.18); display:flex; align-items:center; justify-content:space-between; gap:14px; }
.inviteSecret code{ display:block; font-size:20px; letter-spacing:.08em; margin:5px 0; user-select:all; }
.adminInviteList{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.adminInvite{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:flex; justify-content:space-between; gap:14px; align-items:center; background:rgba(0,0,0,.08); }
.adminInviteMain strong{ display:inline-block; margin-right:8px; }
.inviteState{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; border:1px solid var(--line); border-radius:999px; padding:2px 7px; }
.inviteState-new{ color:#b9f6c9; }
.inviteState-enrolling{ color:#ffe39a; }
.inviteState-active{ color:#9ad7ff; }
.inviteState-revoked,.inviteState-expired{ color:var(--muted); }
@media(max-width:820px){ .adminInviteForm{ grid-template-columns:1fr 1fr; } .adminInviteNote{ grid-column:1 / -1; } }
@media(max-width:560px){ .adminInviteForm{ grid-template-columns:1fr; } .adminInviteNote{ grid-column:1; } .adminInvite,.inviteSecret{ align-items:flex-start; flex-direction:column; } }
.accountDangerActions{ margin-top:14px; display:flex; justify-content:flex-end; }
.adminUserActions{ display:flex; justify-content:flex-end; margin-top:12px; gap:8px; }

.lifecyclePanel{margin-top:1rem}
#lifecycleWarnings:empty{display:none}