:root{
	--bg:#0b0f14;
	--surface:#0f1620;
	--card:#0f1720;
	--accent:#4ea1ff;
	--muted:#9aa4b2;
	--text:#e6eef8;
	--border:#1f2933;
}
*{box-sizing:border-box}
body{font-family:Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);margin:0}
.wrap{max-width:900px;margin:0 auto;padding:20px}
.site-header{background:var(--surface);border-bottom:1px solid var(--border)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.site-header h1{margin:0;font-size:1.2rem}
.site-header nav a{margin-left:12px;color:var(--accent);text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:600;border:1px solid rgba(78,161,255,0.08);background:rgba(78,161,255,0.03)}
.site-header nav a:hover{background:rgba(78,161,255,0.12);box-shadow:0 2px 8px rgba(9,30,66,0.18)}
.site-header nav a:focus{outline:3px solid rgba(78,161,255,0.14);outline-offset:2px}
.brand-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand-link:hover .logo{transform:scale(1.03)}

/* General link styling for better visibility */
a{color:var(--accent);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
a:hover,a:focus{color:var(--accent);text-decoration-color:var(--accent)}

/* ensure links inside tool cards are noticeable */
.tool-card a{background:transparent;border:1px solid rgba(255,255,255,0.03);padding:6px 8px;border-radius:6px;color:var(--accent);text-decoration:none;font-weight:600}
.tool-card a:hover{background:rgba(78,161,255,0.04)}
.features ul{padding-left:1.2rem}
.tool-card{background:var(--card);padding:18px;margin:14px 0;border:1px solid var(--border)}
.code{background:#07121a;color:var(--text);padding:12px;overflow:auto;border:1px solid rgba(255,255,255,0.03)}
.site-footer{padding:14px 0;text-align:center;color:var(--muted);font-size:0.9rem}

/* logo/avatar */
.logo{width:48px;height:48px;border-radius:50%;display:block;object-fit:cover;border:2px solid rgba(255,255,255,0.06);background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent)}

@media (max-width:520px){
	.wrap{padding:12px}
	.logo{width:40px;height:40px}
}

/* form and tool styles */
.simple .lead{color:var(--muted);margin-bottom:18px}
.quick-links{display:flex;gap:10px;flex-wrap:wrap}
.btn{background:var(--accent);color:#021124;border:0;padding:8px 12px;border-radius:6px;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(255,255,255,0.04)}
.btn:hover{opacity:0.95}
.tool-row{display:flex;gap:12px;align-items:center;margin-top:10px}
.tool-row input{flex:1;padding:10px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text)}
.output{margin-top:10px;padding:12px;border-radius:6px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border:1px solid rgba(255,255,255,0.02);min-height:36px}
.ip-grid input{max-width:260px}

/* small screens */
@media (max-width:640px){
	.tool-row{flex-direction:column;align-items:stretch}
	.ip-grid input{max-width:100%}
}

.result-table{width:100%;border-collapse:collapse;margin-top:8px}
.result-table th{width:160px;text-align:left;padding:6px;color:var(--muted);border-bottom:1px solid rgba(255,255,255,0.02)}
.result-table td{padding:6px;border-bottom:1px solid rgba(255,255,255,0.02)}
.result-table.small th{width:120px}
.subnet-list{margin-top:8px;overflow:auto}
.muted{color:var(--muted);font-size:0.95rem}

/* prefer light mode fallback if user requests (optional) */
@media (prefers-color-scheme: light) {
	:root{
		--bg:#f7f8fb;
		--surface:#ffffff;
		--card:#ffffff;
		--accent:#0b5fff;
		--muted:#666;
		--text:#222;
		--border:#e6e9ef;
	}
}