:root {
  color-scheme: dark;
  --bg: #05080d;
  --panel: #0a0f16;
  --panel-2: #0e151f;
  --line: #1b2735;
  --line-strong: #2b3a4d;
  --text: #edf3f8;
  --dim: #93a0af;
  --faint: #667281;
  --teal: #20d9c1;
  --teal-ink: #031b18;
  --discord: #5865f2;
  --red: #ff5864;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 Inter, system-ui, sans-serif; }
a { color: inherit; }
button, input, select { font: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.pular { position: fixed; top: -5rem; left: 1rem; z-index: 100; padding: .7rem 1rem; background: var(--teal); color: var(--teal-ink); }
.pular:focus { top: 1rem; }

.topo { position: sticky; top: 0; z-index: 20; min-height: 66px; padding: 0 clamp(1rem, 4vw, 3rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); background: rgb(5 8 13 / .9); backdrop-filter: blur(14px); }
.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.marca span { position: relative; padding-bottom: .2rem; font: 1rem Michroma, sans-serif; letter-spacing: .05em; }
.marca span::after { content: ''; position: absolute; bottom: 0; left: 0; width: 42%; height: 2px; background: var(--teal); }
.marca small { padding: .15rem .4rem; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--dim); font: 700 .6rem/1.4 ui-monospace, monospace; letter-spacing: .12em; }
.usuario { display: flex; align-items: center; gap: .7rem; }
.usuario img { border-radius: 50%; background: var(--panel-2); }
.usuario > span { display: grid; line-height: 1.2; }
.usuario small { color: var(--dim); font-size: .72rem; }
.usuario form { margin-left: .4rem; }
.link-button { border: 0; background: none; color: var(--dim); cursor: pointer; }
.link-button:hover { color: var(--text); }

.login-page { background: radial-gradient(circle at 20% 10%, #102128 0, transparent 38%), var(--bg); }
.login-page main { min-height: calc(100vh - 132px); display: grid; align-items: center; }
.login-shell { width: min(1120px, calc(100% - 2rem)); margin: auto; padding: 4rem 0; display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.eyebrow { margin: 0 0 .8rem; color: var(--teal); font: 700 .72rem/1.4 ui-monospace, monospace; letter-spacing: .15em; }
h1, h2, p { margin-top: 0; }
.login-copy h1, .page-title h1 { margin-bottom: 1rem; font: 400 clamp(2.4rem, 6vw, 5rem)/1.08 Michroma, sans-serif; letter-spacing: -.03em; }
.login-copy h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px var(--teal); }
.lead { max-width: 42rem; color: #bdc7d2; font-size: clamp(1rem, 2vw, 1.25rem); }
.pontos { margin: 2.2rem 0 0; padding: 0; list-style: none; display: grid; gap: .85rem; color: var(--dim); }
.pontos li { display: flex; align-items: center; gap: .8rem; }
.pontos span { color: var(--teal); font: .72rem ui-monospace, monospace; }
.login-card { padding: clamp(1.4rem, 4vw, 2.3rem); border: 1px solid var(--line-strong); border-top: 3px solid var(--teal); border-radius: var(--radius); background: linear-gradient(155deg, var(--panel-2), var(--panel)); box-shadow: 0 24px 70px rgb(0 0 0 / .35); }
.login-card h2 { margin: 1.8rem 0 .65rem; font-size: 1.45rem; }
.login-card p, .login-card > small { color: var(--dim); }
.login-card > small { display: block; margin-top: 1rem; font-size: .76rem; }
.sinal { color: var(--dim); font: 700 .65rem ui-monospace, monospace; letter-spacing: .12em; }
.sinal span { display: inline-block; width: 7px; height: 7px; margin-right: .5rem; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px var(--teal); }
.discord-button { margin-top: 1.5rem; min-height: 3.25rem; display: flex; align-items: center; justify-content: center; gap: .65rem; border-radius: 7px; background: var(--discord); font-weight: 800; text-decoration: none; transition: transform .18s ease, filter .18s ease; }
.discord-button:hover { transform: translateY(-1px); filter: brightness(1.1); }
.erro { margin: 1rem 0; padding: .75rem; border: 1px solid rgb(255 88 100 / .4); border-radius: 6px; background: rgb(255 88 100 / .08); color: #ffb7bd; }

.page-shell { width: min(1180px, calc(100% - 2rem)); min-height: calc(100vh - 170px); margin: 0 auto; padding: 4rem 0; }
.page-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2.5rem; }
.page-title h1 { margin-bottom: .5rem; font-size: clamp(2rem, 4vw, 3.2rem); text-transform: uppercase; }
.page-title p:last-child { margin-bottom: 0; color: var(--dim); }
.contador { padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); white-space: nowrap; }
.guild-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.guild-card { min-height: 300px; padding: 1.35rem; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(150deg, var(--panel-2), var(--panel)); }
.guild-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.guild-head img, .server-mini img { border-radius: 14px; background: #121923; }
.guild-fallback { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 14px; background: #15232b; color: var(--teal); font: 1rem Michroma, sans-serif; }
.guild-card h2 { margin: 1.5rem 0 .25rem; font-size: 1.1rem; }
.mono { color: var(--faint); font: .74rem ui-monospace, monospace; }
.papel { flex: 1; color: var(--dim); }
.status { display: inline-flex; align-items: center; gap: .45rem; color: var(--dim); font-size: .72rem; font-weight: 700; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.status.online { color: #8cebdc; }
.status.online i { background: var(--teal); box-shadow: 0 0 8px rgb(32 217 193 / .7); }
.status.offline i { background: var(--red); }
.status.grande { padding: .55rem .8rem; border: 1px solid rgb(32 217 193 / .25); border-radius: 999px; background: rgb(32 217 193 / .06); }
.button { min-height: 2.75rem; padding: .65rem 1rem; display: inline-flex; align-items: center; justify-content: space-between; gap: .7rem; border: 1px solid transparent; border-radius: 7px; font-weight: 750; text-decoration: none; cursor: pointer; }
.button.primary { background: var(--teal); color: var(--teal-ink); }
.button.secondary { border-color: var(--line-strong); background: #0d141d; color: var(--text); }
.button:hover { filter: brightness(1.08); }
.vazio { grid-column: 1/-1; padding: 3rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); text-align: center; color: var(--dim); }
.vazio strong { display: block; color: var(--text); font-size: 1.2rem; }

.painel-layout { width: min(1440px, 100%); min-height: calc(100vh - 66px); margin: auto; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { position: sticky; top: 66px; height: calc(100vh - 66px); padding: 1.4rem; border-right: 1px solid var(--line); background: #070b10; }
.voltar { color: var(--dim); font-size: .82rem; text-decoration: none; }
.server-mini { margin: 1.7rem 0; padding-bottom: 1.5rem; display: flex; align-items: center; gap: .8rem; border-bottom: 1px solid var(--line); }
.server-mini > div { min-width: 0; display: grid; }
.server-mini strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guild-fallback.pequeno { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 10px; font-size: .75rem; }
.sidebar nav { display: grid; gap: .35rem; }
.sidebar nav a { padding: .65rem .75rem; border-left: 2px solid transparent; color: var(--dim); text-decoration: none; }
.sidebar nav a:hover { border-color: var(--teal); background: rgb(32 217 193 / .05); color: var(--text); }
.painel-main { min-width: 0; padding: 3rem clamp(1rem, 4vw, 4rem) 5rem; }
.page-title.compacto h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
.admin-section { padding: 2rem 0; border-top: 1px solid var(--line); }
.section-title { margin-bottom: 1.5rem; display: flex; gap: 1rem; }
.section-title > span { color: var(--teal); font: .72rem ui-monospace, monospace; }
.section-title h2 { margin: 0 0 .25rem; font-size: 1.25rem; }
.section-title p { margin: 0; color: var(--dim); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.stats article { min-height: 150px; padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.stats small { color: var(--faint); font: 700 .65rem ui-monospace, monospace; letter-spacing: .1em; }
.stats strong { display: block; margin: .7rem 0 .4rem; font: 1.4rem Michroma, sans-serif; }
.stats .verde { color: var(--teal); }
.stats p { margin: 0; color: var(--dim); font-size: .83rem; }
.config-form { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.config-form > label { padding: 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.config-form label > span { display: grid; }
.config-form label small { color: var(--dim); }
.config-form select { min-width: 210px; padding: .65rem; border: 1px solid var(--line-strong); border-radius: 6px; background: #070b10; color: var(--text); }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-row i { position: relative; width: 44px; height: 24px; flex: 0 0 auto; border-radius: 999px; background: #283343; transition: background .18s ease; }
.toggle-row i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: white; transition: transform .18s ease; }
.toggle-row input:checked + i { background: var(--teal); }
.toggle-row input:checked + i::after { transform: translateX(20px); }
.toggle-row input:focus-visible + i { outline: 2px solid var(--teal); outline-offset: 3px; }
.form-actions { padding: 1rem 1.2rem; display: flex; align-items: center; gap: 1rem; }
.form-actions span { color: var(--faint); font-size: .78rem; }
.command-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.command-list li { padding: 1rem 1.15rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.command-list code { color: var(--teal); font-weight: 700; }
.command-list p { margin: .25rem 0 0; color: var(--dim); font-size: .82rem; }
.command-list > li > span { color: var(--faint); font-size: .72rem; text-align: right; }
.vazio-lista { color: var(--dim); }
.toast { position: fixed; z-index: 30; top: 78px; right: 1rem; padding: .75rem 1rem; border: 1px solid rgb(32 217 193 / .35); border-radius: 7px; background: #09201d; color: #a6f3e8; box-shadow: 0 12px 30px rgb(0 0 0 / .35); }
.erro-page { min-height: calc(100vh - 160px); display: grid; place-items: center; align-content: center; text-align: center; padding: 2rem; }
.erro-page > span { color: var(--teal); font: 3rem Michroma, sans-serif; }
.erro-page h1 { margin: .5rem 0; }
.erro-page p { max-width: 34rem; color: var(--dim); }
.erro-page .button { margin-top: 1rem; }
footer { min-height: 66px; padding: 1.2rem clamp(1rem, 4vw, 3rem); border-top: 1px solid var(--line); color: var(--faint); font-size: .78rem; }
footer span { color: var(--dim); font-family: Michroma, sans-serif; }

@media (max-width: 820px) {
  .login-shell { grid-template-columns: 1fr; padding: 2.5rem 0; }
  .login-copy h1 { font-size: clamp(2.1rem, 12vw, 4rem); }
  .painel-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar nav { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .usuario > span { display: none; }
  .topo { min-height: 60px; }
  .page-title { align-items: flex-start; flex-direction: column; }
  .guild-card { min-height: 275px; }
  .painel-main { padding-top: 2rem; }
  .sidebar nav { grid-template-columns: 1fr; }
  .config-form > label, .form-actions, .command-list li { align-items: flex-start; flex-direction: column; }
  .config-form select { width: 100%; min-width: 0; }
  .form-actions .button { width: 100%; }
  .command-list > li > span { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }