:root{
	--bg-start:#fff;
	--bg-end:#e6edff;
	--text:#0f172a;
	--muted:#6b7280;
	--brand:#3d98b4;
	--brand-dark:#2f829b;
	--line:rgba(15,23,42,0.06);
	--glass:rgba(255,255,255,0.65);
	--panel:linear-gradient(180deg,#fff,rgba(255,255,255,0.95));
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
	margin:0;
	padding:36px 20px;
	display:flex;
	justify-content:center;
	background:linear-gradient(180deg,var(--bg-start),var(--bg-end)) fixed;
	color:var(--text);
	font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	-webkit-font-smoothing:antialiased;
}

.container{width:100%;max-width:1100px}
.page-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	margin-bottom:28px;
}

h1,h2,h3,p,figure{margin:0}
h1{font-size:20px}
h2{font-size:18px}
h3{font-size:15px}
.lead,.muted,.tool-note{color:var(--muted);font-size:14px;line-height:1.5}
.tool-note{font-size:13px}

.home-link,.nav-pill,.menu-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:38px;
	padding:8px 12px;
	border:1px solid rgba(15,23,42,0.04);
	border-radius:10px;
	background:var(--glass);
	color:inherit;
	font:inherit;
	font-weight:600;
	text-decoration:none;
	cursor:pointer;
	backdrop-filter:blur(6px);
}

.home-link:hover,.nav-pill:hover,.menu-button:hover{background:rgba(255,255,255,0.85)}
.menu-button{width:38px;padding:8px}
.nav-pill svg,.menu-button svg{width:18px;height:18px}

.hero{
	padding:28px;
	border-radius:14px;
	background:linear-gradient(180deg,rgba(255,255,255,0.6),rgba(255,255,255,0.4));
	box-shadow:0 8px 30px rgba(15,23,42,0.06);
}

.hero-grid{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(280px,420px);
	gap:20px;
	align-items:start;
}

.stack{display:grid;gap:14px}
.panel,.card{
	border:1px solid rgba(15,23,42,0.04);
	border-radius:12px;
	background:var(--panel);
}
.panel{padding:14px}
.panel-header{display:grid;gap:6px;margin-bottom:12px}
.section-title{margin-bottom:12px}

button,.button,.primary-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:10px 14px;
	border-radius:10px;
	font:inherit;
	font-weight:600;
	text-decoration:none;
	cursor:pointer;
	transition:background 0.15s,color 0.15s,opacity 0.15s,border-color 0.15s;
}

button,.button{
	border:1px solid rgba(15,23,42,0.08);
	background:#fff;
	color:var(--text);
}

button:hover:not(:disabled),.button:hover{background:#f8fafc}
.primary-button{
	border:0;
	background:var(--brand);
	color:#fff;
}
.primary-button:hover:not(:disabled){background:var(--brand-dark);color:#fff}
button:disabled{opacity:0.6;cursor:not-allowed}

input,textarea{
	width:100%;
	padding:10px 12px;
	border:1px solid var(--line);
	border-radius:10px;
	background:#fff;
	color:var(--text);
	font:inherit;
}

textarea{min-height:118px;resize:vertical;line-height:1.5}
.field{display:grid;gap:8px}
.field label{color:var(--muted);font-size:13px;font-weight:600}
.full-button{width:100%}
.divider{height:1px;margin:2px 0;background:var(--line)}
.status{padding:8px;color:var(--muted);font-size:13px;line-height:1.5}
.status.error{color:#b91c1c}
.status.success{color:#047857}

footer{
	margin-top:18px;
	color:var(--muted);
	font-size:13px;
	text-align:center;
}

@media (max-width:720px){
	body{padding:28px 16px}
	.page-header{align-items:flex-start;flex-direction:column}
	.hero{padding:20px}
	.hero-grid{grid-template-columns:1fr}
}