/* =============================================
	 Undernog Minimal Black & White UI
	 Foco: clareza, tipografia forte, contraste limpo
	 ============================================= */

/* Design Tokens */
 :root {
	--c-bg: #0f0f10;         /* fundo principal quase preto */
	--c-bg-alt: #161617;     /* blocos */
	--c-bg-soft: #1d1d1f;    /* hover/inputs */
	--c-line: #2a2a2d;       /* linhas sutis */
	--c-text: #fcfcfc;       /* texto primário */
	--c-text-dim: #b9b9bd;   /* texto secundário */
	--c-focus: #ffffff;      /* foco/brilho */
	--c-code: #111113;       /* fundo code */
	--radius-xs: 3px;
	--radius-sm: 6px;
	--radius-md: 12px;
	--shadow-sm: 0 1px 2px rgba(0,0,0,.5);
	--shadow-md: 0 4px 16px -4px rgba(0,0,0,.55);
	--transition: .18s cubic-bezier(.4,.2,.2,1);
	font-family: 'Inter', system-ui, 'Segoe UI', Arial, sans-serif;
	font-size: 16px;
}

/* Reset base */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--c-bg); color: var(--c-text); -webkit-font-smoothing: antialiased; }

/* Layout */
header {
	display: flex;
	align-items: center;
	gap: 2.2rem;
	padding: 1rem clamp(1rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--c-line);
	background: rgba(15,15,16,.85);
	backdrop-filter: blur(6px);
	position: sticky; top: 0; z-index: 30;
}
header h1 { font-size: 1.15rem; letter-spacing: .15em; font-weight: 600; }

nav { display: flex; flex-wrap: wrap; gap: .8rem; }
nav a {
	--underline-h: 1px;
	position: relative;
	text-decoration: none;
	color: var(--c-text-dim);
	font-size: .78rem;
	letter-spacing: .12em;
	padding: .55rem .9rem;
	display: inline-flex;
	align-items: center;
	border-radius: var(--radius-sm);
	background: transparent;
	transition: var(--transition);
}
nav a::after {
	content: '';
	position: absolute; left: .9rem; right: .9rem; bottom: .4rem;
	height: var(--underline-h);
	background: linear-gradient(90deg,#fff,#aaa,#fff);
	transform: scaleX(0);
	transform-origin: center;
	transition: var(--transition);
	opacity: .25;
}
nav a:hover, nav a:focus { color: var(--c-text); background: var(--c-bg-soft); }
nav a:hover::after, nav a:focus::after { transform: scaleX(1); opacity: .65; }

main { width: 100%; max-width: 1080px; margin: 2.4rem auto 3.5rem; padding: 0 clamp(1rem, 3vw, 2.4rem); }

section, .panel, form {
	background: var(--c-bg-alt);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	padding: 1.75rem clamp(1.3rem, 2.3vw, 2.1rem) 2.1rem;
	box-shadow: var(--shadow-sm);
	margin-bottom: 2rem;
	position: relative; overflow: hidden;
}
section::before, .panel::before, form::before {
	content: '';
	position: absolute; inset: 0;
	background:
		radial-gradient(circle at 18% 12%, rgba(255,255,255,.05), transparent 55%),
		radial-gradient(circle at 82% 85%, rgba(255,255,255,.04), transparent 60%);
	opacity: .6; pointer-events: none; mix-blend-mode: overlay;
}

/* Tipografia */
h1,h2,h3,h4 { font-weight: 500; line-height: 1.2; }
h2 { font-size: 1.35rem; margin: 0 0 1.4rem; letter-spacing: .08em; }
h3 { font-size: .95rem; letter-spacing: .18em; text-transform: uppercase; margin: 2.2rem 0 1rem; color: var(--c-text-dim); }
h4 { font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .65rem; }
p { line-height: 1.6; font-size: .92rem; color: var(--c-text-dim); }
p + p { margin-top: .9rem; }
ul { margin: .7rem 0 1.1rem 1.1rem; padding: 0; }
li { line-height: 1.5; font-size: .9rem; color: var(--c-text-dim); }
li + li { margin-top: .35rem; }

a { color: #fff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Cards de lista (posts, servidores) */
.posts-list { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.posts-list li { background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 1rem 1.1rem 1.2rem; box-shadow: var(--shadow-sm); }
.posts-list li + li { margin-top: .9rem; }
.posts-list h4 { margin: 0 0 .35rem; }
.meta { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--c-text-dim); margin: 0 0 .6rem; }

/* Grid */
.grid { display: grid; gap: 1.6rem; }
@media (min-width: 860px) { .grid.cols-2 { grid-template-columns: repeat(2,1fr); } }

.panel { background: var(--c-bg-alt); }
.panel h4 { margin-top: 0; }

.badge { display: inline-block; font-size: .55rem; letter-spacing: .25em; padding: .35rem .6rem .28rem; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-bg-soft); color: var(--c-text-dim); }

/* Form */
form label { display: block; font-size: .65rem; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; margin-bottom: .5rem; color: var(--c-text-dim); }
input[type=text], input[type=password], textarea {
	width: 100%;
	background: var(--c-bg-soft);
	border: 1px solid var(--c-line);
	color: var(--c-text);
	padding: .75rem .85rem;
	border-radius: var(--radius-sm);
	font: inherit;
	line-height: 1.4;
	resize: vertical;
	transition: var(--transition);
}
input:focus, textarea:focus { outline: 2px solid var(--c-focus); outline-offset: 2px; border-color: var(--c-focus); }

button {
	background: #fff; color: #000; border: none;
	font: inherit; font-weight: 600; letter-spacing: .12em;
	padding: .75rem 1.35rem; border-radius: var(--radius-sm);
	cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
	transition: var(--transition); box-shadow: var(--shadow-sm);
}
button::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,#fff,#dcdcdc 55%,#fff); opacity:0; transition:var(--transition); }
button:hover::before { opacity:.25; }
button:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
button:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

/* Código / utilitários */
code { background: var(--c-code); padding: .25rem .45rem; border-radius: var(--radius-xs); font-size: .75rem; letter-spacing: .05em; }
.center { text-align: center; }
.dim { color: var(--c-text-dim); }

/* Footer */
footer { margin-top: 4rem; padding: 2.2rem 1rem 3rem; text-align: center; font-size: .68rem; letter-spacing: .25em; color: var(--c-text-dim); border-top: 1px solid var(--c-line); position: relative; }
footer::before { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 60%); pointer-events:none; }

/* Animação de entrada leve */
@media (prefers-reduced-motion: no-preference) {
	section, .panel, form, .posts-list li { animation: fade .5s ease; }
	@keyframes fade { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0);} }
}

/* Scrollbar (opcional) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: var(--c-bg-soft); border-radius: 20px; border:2px solid var(--c-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--c-bg-alt); }

/* Acessibilidade foco navegável */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--c-focus); outline-offset: 2px; border-color: var(--c-focus);
}

/* Placeholder refine */
::placeholder { color: #7a7a7d; opacity: .9; }

/* Redução leve em telas muito largas */
@media (min-width:1600px) { body { font-size: 17px; } }