/* nsfw-website — clean landing/product CSS (no framework dependency) */
:root {
	--bg: #0e1116; --panel: #151a21; --panel-2: #1b222c;
	--text: #dde3ea; --muted: #8c97a5;
	--accent: #e85d75; --accent-2: #22a7f0; --danger: #f87171; --warn: #fbbf24;
	--border: #232b36;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
	font: 16px/1.6 system-ui, "Segoe UI", sans-serif; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: .95em;
	background: #0a0d12; border: 1px solid var(--border); border-radius: 4px;
	padding: .08em .35em; }
.container { max-width: 1080px; margin: 0 auto; padding: 1.2rem; }
.topbar { display: flex; align-items: center; gap: 1.2rem; padding: .7rem 1.2rem;
	background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; }
.brand { color: var(--text); font-weight: 600; font-size: 1.05rem; letter-spacing: .3px; }
.brand b { color: var(--accent); }
.brand-mark { color: var(--accent); }
.brand-flag { background: var(--accent); color: #06220e; border-radius: 4px;
	font-size: .68rem; padding: .1em .4em; margin-left: .4em; vertical-align: middle; }
.navlist { display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.navlist a { color: var(--text); padding: .4rem .8rem; border-radius: 6px; display: block; }
.navlist a:hover { background: var(--panel-2); text-decoration: none; }
.navlist .nav-link-active { background: var(--panel-2); color: var(--accent); }
.topbar-right { margin-left: auto; display: flex; gap: .6rem; align-items: center; }
.btn { display: inline-block; padding: .5rem 1rem; border-radius: 8px; font-weight: 600;
	border: 1px solid var(--border); cursor: pointer; }
.btn-primary { background: var(--accent); color: #06220e; }
.btn-ghost { color: var(--text); background: transparent; }
.btn:hover { filter: brightness(1.1); text-decoration: none; }
h1 { font-size: 2rem; margin: .8rem 0; }
h2 { font-size: 1.35rem; margin-top: 2rem; border-bottom: 1px solid var(--border); padding-bottom: .3rem; }
.muted { color: var(--muted); }
.pill { display: inline-block; border-radius: 999px; border: 1px solid var(--border);
	padding: .05em .7em; font-size: .85rem; margin-right: .4rem; }
.pill-ok { color: var(--accent); } .pill-bad { color: var(--danger); }
.pill-warn { color: var(--warn); } .pill-info { color: var(--accent-2); }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 1.2rem; }
.tool-card { display:flex; flex-direction:column; }
.tool-thumb { width:48px; height:48px; border-radius:10px; background:var(--panel-2); border:1px solid var(--border); margin-bottom:.75rem; display:flex; align-items:center; justify-content:center; }
.tool-thumb svg { width:100%; height:100%; }
.card h3 { margin: .2rem 0 .6rem; }
.hero { padding: 2.4rem 0 1rem; }
.hero .stat { font-size: 2.2rem; font-weight: 700; color: var(--accent); }
.price { font-size: 1.9rem; font-weight: 700; color: var(--accent); }
table.list { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.list th, table.list td { border: 1px solid var(--border); padding: .45rem .65rem; text-align: left; }
table.list th { background: var(--panel-2); }
table.list tr:hover td { background: #131a23; }
form.inline { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
input[type=text], input[type=email], input[type=password], select {
	background: #0a0d12; color: var(--text); border: 1px solid var(--border);
	border-radius: 6px; padding: .5rem .7rem; min-width: 260px; }
textarea { background: #0a0d12; color: var(--text); border: 1px solid var(--border);
	border-radius: 6px; padding: .5rem .7rem; width: 100%; min-height: 90px; }
.btn.small { padding: .32rem .8rem; font-size: .9rem; }
.infobox { border-radius: 8px; padding: .7rem 1rem; margin: .7rem 0; }
.infobox.error { background: #2b151a; border: 1px solid #7f1d1d; }
.infobox.success { background: #112417; border: 1px solid #14532d; }
.infobox.notice { background: #1f2410; border: 1px solid #5d4c10; }
.badge-alive { color: var(--accent); font-weight: 700; }
.badge-dead { color: var(--danger); font-weight: 700; }
.badge-parked, .badge-unknown { color: var(--warn); font-weight: 700; }
.badge-error { color: var(--danger); }
.badge-pending { color: var(--warn); font-weight: 700; }
.badge-running { color: var(--accent); font-weight: 700; }
.badge-done { color: var(--accent); font-weight: 700; }
.badge-skipped { color: var(--muted); font-weight: 700; }
.badge-pre-production { color: #fbbf24; font-weight: 700; }
.statline { display: flex; gap: 1.4rem; flex-wrap: wrap; margin: 1rem 0; }
.statline .item b { display: block; font-size: 1.4rem; color: var(--accent); }
pre.codeblock { background: #0a0d12; border: 1px solid var(--border); border-left: 4px solid var(--accent);
	border-radius: 8px; padding: 1rem; overflow-x: auto; }
.sitefooter { border-top: 1px solid var(--border); margin-top: 2.5rem; padding: 1.2rem;
	display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--panel); }
.kbd-note .muted { font-size: .88rem; }