/* ============================================================
   O TOMO LIDO — estética retro + cyberpunk
   paleta: ciano #2de2e6 · magenta #ff2a6d · amarelo #f9f871
           roxo #a663f7 · fundo #05050d
   ============================================================ */

:root {
  --cyan: #2de2e6;
  --pink: #ff2a6d;
  --yellow: #f9f871;
  --purple: #a663f7;
  --bg: #05050d;
  --panel: #0b0b18;
}

html { background: var(--bg); }

body {
  background:
    linear-gradient(rgba(45, 226, 230, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 226, 230, 0.045) 1px, transparent 1px),
    radial-gradient(ellipse at 50% -20%, #16163a 0%, var(--bg) 60%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
  color: #c9d7e2;
  font-family: 'Share Tech Mono', monospace;
  min-height: 100vh;
}

h1, h2, h3, .font-display { font-family: 'VT323', monospace; letter-spacing: 1px; }

/* ---------- efeito CRT ---------- */
.crt-scanlines {
  pointer-events: none; position: fixed; inset: 0; z-index: 50;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,0.16) 0px, rgba(0,0,0,0.16) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
}
.crt-vignette {
  pointer-events: none; position: fixed; inset: 0; z-index: 51;
  background: radial-gradient(ellipse at center, transparent 62%, rgba(0,0,5,0.5) 100%);
}

/* ---------- logo glitch ---------- */
.glitch {
  font-family: 'VT323', monospace;
  color: var(--cyan);
  position: relative;
  text-shadow: 0 0 8px rgba(45,226,230,.7);
  white-space: nowrap;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0; overflow: hidden;
}
.glitch::before { color: var(--pink); z-index: -1; }
.glitch::after  { color: var(--purple); z-index: -2; }
.logo:hover .glitch::before { animation: glitch-a .45s steps(2) infinite; }
.logo:hover .glitch::after  { animation: glitch-b .45s steps(2) infinite reverse; }
@keyframes glitch-a { 0%{transform:translate(2px,-1px)} 50%{transform:translate(-2px,1px)} 100%{transform:translate(1px,1px)} }
@keyframes glitch-b { 0%{transform:translate(-2px,1px)} 50%{transform:translate(2px,-1px)} 100%{transform:translate(-1px,-1px)} }
.logo-cursor { animation: blink 1s steps(1) infinite; }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- painéis com canto cortado ---------- */
.panel {
  background: rgba(11, 11, 24, 0.88);
  border: 1px solid rgba(45, 226, 230, 0.45);
  box-shadow: 0 0 14px rgba(45, 226, 230, 0.12), inset 0 0 30px rgba(45, 226, 230, 0.03);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  padding: 1.25rem;
}
.panel-pink {
  border-color: rgba(255, 42, 109, 0.5);
  box-shadow: 0 0 14px rgba(255, 42, 109, 0.14), inset 0 0 30px rgba(255, 42, 109, 0.03);
}
.panel-title {
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(45,226,230,.5);
  margin-bottom: .75rem;
}
.panel-title::before { content: '▞ '; color: var(--pink); }

/* ---------- inputs ---------- */
.input-neon {
  background: #07070f;
  border: 1px solid rgba(45,226,230,.4);
  color: var(--yellow);
  padding: .55rem .8rem;
  font-family: 'Share Tech Mono', monospace;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.input-neon:focus { border-color: var(--pink); box-shadow: 0 0 10px rgba(255,42,109,.35); }
.input-neon::placeholder { color: #3d4b66; }
label.lbl { display:block; color: var(--cyan); font-size:.75rem; letter-spacing:2px; text-transform:uppercase; margin-bottom:.3rem; }

/* ---------- botões ---------- */
.btn {
  display: inline-block;
  font-family: 'VT323', monospace;
  font-size: 1.15rem;
  letter-spacing: 2px;
  padding: .45rem 1.4rem;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  background: rgba(45,226,230,.06);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
.btn:hover { background: var(--cyan); color: #05050d; box-shadow: 0 0 18px rgba(45,226,230,.55); }
.btn-pink { border-color: var(--pink); color: var(--pink); background: rgba(255,42,109,.07); }
.btn-pink:hover { background: var(--pink); color: #fff; box-shadow: 0 0 18px rgba(255,42,109,.55); }
.btn-yellow { border-color: var(--yellow); color: var(--yellow); background: rgba(249,248,113,.06); }
.btn-yellow:hover { background: var(--yellow); color: #05050d; box-shadow: 0 0 18px rgba(249,248,113,.5); }
.btn-ghost { border-color: #2a3550; color: #6d7f9c; }
.btn-ghost:hover { background:#1a2338; color:#c9d7e2; box-shadow:none; }
.btn-sm { font-size: .95rem; padding: .25rem .8rem; }

/* ---------- navegação ---------- */
.nav-links a { color: #6fb7c9; letter-spacing: 1px; transition: color .15s, text-shadow .15s; }
.nav-links a:hover { color: var(--yellow); text-shadow: 0 0 8px rgba(249,248,113,.6); }
.nav-links .nav-admin { color: var(--pink); }
.nav-links .nav-admin:hover { color: #ff7aa5; }

/* ---------- flash ---------- */
.flash {
  padding: .7rem 1rem; font-size: .9rem;
  border-left: 3px solid; background: rgba(11,11,24,.9);
}
.flash-ok    { border-color: #37e28a; color: #7df0b6; }
.flash-error { border-color: var(--pink); color: #ff7aa5; }
.flash-info  { border-color: var(--cyan); color: #8be5e8; }

/* ---------- estrelas ---------- */
.stars { position: relative; display: inline-block; font-size: 1em; line-height: 1; color: #2a3550; letter-spacing: 2px; }
.stars-fg {
  position: absolute; left: 0; top: 0;
  overflow: hidden; white-space: nowrap;
  color: var(--yellow); text-shadow: 0 0 6px rgba(249,248,113,.7);
  letter-spacing: 2px;
}

/* seletor de estrelas (meia em meia) */
.starpick { display: inline-flex; font-size: 2rem; line-height: 1; cursor: pointer; user-select: none; }
.starpick .s { position: relative; color: #2a3550; letter-spacing: 2px; transition: color .1s; }
.starpick .s.on { color: var(--yellow); text-shadow: 0 0 8px rgba(249,248,113,.75); }
.starpick .s.half::after {
  content: '★'; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden;
  color: var(--yellow); text-shadow: 0 0 8px rgba(249,248,113,.75);
}

/* ---------- avatar ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'VT323', monospace;
  background: #07070f; color: var(--av, var(--cyan));
  border: 1px solid var(--av, var(--cyan));
  box-shadow: 0 0 8px color-mix(in srgb, var(--av, var(--cyan)) 45%, transparent);
  flex-shrink: 0;
}

/* ---------- capas ---------- */
.cover {
  background: #0e0e20;
  border: 1px solid rgba(166, 99, 247, 0.45);
  box-shadow: 0 0 12px rgba(166, 99, 247, 0.2);
  object-fit: cover;
  image-rendering: auto;
}
a .cover { transition: transform .15s, box-shadow .15s; }
a:hover .cover { transform: translateY(-3px); box-shadow: 0 6px 22px rgba(166,99,247,.4); }
.cover-fallback {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: 'VT323', monospace; color: var(--purple); padding: .5rem; font-size: 1.05rem;
}

/* ---------- badges de status (solicitações) ---------- */
.badge { font-size: .7rem; letter-spacing: 2px; padding: .2rem .6rem; border: 1px solid; text-transform: uppercase; }
.badge-pendente { color: var(--yellow); border-color: var(--yellow); }
.badge-aceito   { color: #37e28a; border-color: #37e28a; }
.badge-recusado { color: var(--pink); border-color: var(--pink); }
.badge-admin    { color: var(--pink); border-color: var(--pink); }
.badge-banido   { color: #ff5c5c; border-color: #ff5c5c; }

/* ---------- tabelas admin ---------- */
.tbl { width: 100%; font-size: .85rem; border-collapse: collapse; }
.tbl th { color: var(--cyan); text-align: left; letter-spacing: 2px; font-weight: normal;
          border-bottom: 1px solid rgba(45,226,230,.35); padding: .5rem .6rem; text-transform: uppercase; font-size: .7rem; }
.tbl td { border-bottom: 1px solid rgba(45,226,230,.12); padding: .55rem .6rem; vertical-align: middle; }
.tbl tr:hover td { background: rgba(45,226,230,.04); }

/* ---------- título de página ---------- */
.h-page {
  font-family: 'VT323', monospace; font-size: 2.4rem; color: var(--cyan);
  text-shadow: 0 0 14px rgba(45,226,230,.55);
}
.h-page::before { content: '// '; color: var(--pink); }

::selection { background: var(--pink); color: #fff; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #07070f; }
::-webkit-scrollbar-thumb { background: #1c2b45; border: 2px solid #07070f; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }