: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; }
.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; }