/* =========================================================
   MythOS / Dark Neon — tema público para MicroCMS
   Compatível com as classes do default.css
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* paleta neon */
  --bg: #070814;
  --bg2: radial-gradient(1200px 800px at 20% -10%, rgba(122,60,255,.18), transparent 60%),
         radial-gradient(900px 600px at 90% 10%, rgba(36,227,255,.12), transparent 55%),
         #070814;
  --surface: rgba(10, 14, 28, .65);
  --text: #dff7ff;
  --muted:#9bc1d1;

  --primary: #24e3ff;
  --primary-hover: #67efff;
  --danger:#ff6b88;
  --danger-hover:#ff3d68;
  --ok:#2df0a9;

  --border: rgba(255,255,255,.12);
  --radius: 18px;
  --pad: 16px;
  --gap: 12px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", "Noto Sans", Arial;

  /* efeitos */
  --glow-cyan: 0 0 24px rgba(36,227,255,.45);
  --glow-magenta: 0 0 24px rgba(255,48,200,.45);
}

/* ---------- Reset leve ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:15px/1.6 var(--font);
  color:var(--text);
  background: var(--bg2);
  background-attachment: fixed;
}

/* micro “stars” */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.22),transparent 35%),
    radial-gradient(1px 1px at 80% 20%,rgba(255,255,255,.18),transparent 35%),
    radial-gradient(1px 1px at 60% 70%,rgba(255,255,255,.16),transparent 35%),
    radial-gradient(1px 1px at 30% 80%,rgba(255,255,255,.18),transparent 35%);
  opacity:.7;
  z-index:-1;
}

/* ---------- Layouts básicos ---------- */
.container{max-width:1100px;margin:0 auto;padding:24px}
.flex{display:flex;gap:var(--gap);align-items:center}
.stack{display:flex;flex-direction:column;gap:10px}
.grid{display:grid;gap:var(--gap)}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.center{display:grid;place-items:center}

/* ---------- Cartões ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 0 40px rgba(36,227,255,.06);
  backdrop-filter: blur(6px);
}
.card.narrow{max-width:560px;margin:0 auto}

/* ---------- Tipografia ---------- */
h1,h2,h3{margin:0 0 12px}
h1{
  font-size:40px; line-height:1.05; font-weight:900;
  color:var(--primary); text-shadow: var(--glow-cyan);
}
h2{font-size:26px}
h3{font-size:20px}
.muted{color:var(--muted)}
.muted2{color:#86a8b6}

/* ---------- Botões ---------- */
.btn{
  appearance:none;
  border:1px solid rgba(36,227,255,.28);
  background: linear-gradient(180deg, rgba(36,227,255,.08), rgba(255,48,200,.08));
  color:#eafcff;
  padding:10px 16px;
  border-radius:12px;
  cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
  box-shadow: 0 0 18px rgba(36,227,255,.25);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease, background .12s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--glow-magenta); border-color:#ff30c8 }
.btn.secondary{ background:rgba(36,227,255,.04) }
.btn.secondary:hover{ background:rgba(255,48,200,.08) }
.btn.danger{ background: linear-gradient(180deg, rgba(255,56,120,.25), rgba(255,56,120,.1)); border-color: rgba(255,56,120,.4); color:#fff }
.btn.danger:hover{ background: linear-gradient(180deg, rgba(255,56,120,.35), rgba(255,56,120,.15)) }
.btn.ok{ background: linear-gradient(180deg, rgba(45,240,169,.25), rgba(45,240,169,.08)); border-color: rgba(45,240,169,.4); color:#062b20 }

/* ---------- Pílulas ---------- */
.pill{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:12px;
  border:1px solid var(--border);
  background:rgba(36,227,255,.06);
  color:#bfefff;
}

/* ---------- Formulários ---------- */
.row{display:grid; grid-template-columns: 160px 1fr; gap:12px; align-items:center; margin-bottom:12px}
.row > label{color:var(--muted)}
input[type="text"],input[type="email"],input[type="password"],select,textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--border);
  background:rgba(12,16,28,.7);
  color:var(--text); outline:none;
  box-shadow: inset 0 0 12px rgba(36,227,255,.06);
}
textarea{min-height:130px; resize:vertical}
input:focus,select:focus,textarea:focus{
  border-color:#24e3ff; box-shadow:0 0 0 3px rgba(36,227,255,.18), inset 0 0 16px rgba(36,227,255,.1)
}

.err,.ok{
  padding:10px 12px; border-radius:12px; margin:10px 0;
  border:1px solid var(--border); background:rgba(12,16,28,.7)
}
.err{border-color:#7f1d1d; color:#ffccd0; background:rgba(48,8,16,.6)}
.ok{border-color:#064e3b; color:#c9ffe6; background:rgba(8,32,22,.6)}

/* ---------- Tabelas ---------- */
table{width:100%; border-collapse:collapse; overflow:hidden; border-radius:12px}
thead th{
  text-align:left; font-weight:700; color:#bfefff;
  background:linear-gradient(180deg, rgba(36,227,255,.12), rgba(36,227,255,.04));
  border-bottom:1px solid var(--border); padding:12px 14px
}
tbody td{padding:12px 14px; border-bottom:1px solid var(--border)}
tbody tr:hover{background:rgba(36,227,255,.05)}
td.flex{display:flex; gap:10px; align-items:center}

/* ---------- Conteúdo público (HTML colado) ---------- */
.content h1, .content h2, .content h3 { margin: 12px 0 8px }
.content p { margin: 10px 0 }
.content ul, .content ol { margin: 10px 0 10px 18px }
.content img { max-width: 100%; height: auto; display: block; margin: 10px 0 }
.content a { color: var(--primary); text-decoration: none; text-shadow: var(--glow-cyan) }
.content a:hover { text-decoration: underline }
.content blockquote {
  margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--border);
  background: rgba(12,16,28,.7);
}

/* ---------- Layout 2 colunas com aside ---------- */
.layout { display:grid; gap:24px }
@media (min-width: 900px){ .layout.has-aside { grid-template-columns: 320px 1fr } }
.aside { position: sticky; top: 16px; align-self: start }
.aside .card { margin: 0 }

/* ---------- Links “textuais” ---------- */
.link { color: var(--primary); text-decoration: none }
.link:hover { text-decoration: underline }

/* ---------- Rodapé ---------- */
.footer { border-top:1px solid var(--border); margin-top:24px; padding-top:16px }

/* ---------- Cabeçalho público (layout atual) ---------- */
header.container strong{
  font-size:28px; font-weight:900; letter-spacing:.4px;
  color:#e6fcff;
  text-shadow: var(--glow-cyan);
}
header.container nav .btn{
  padding:8px 14px;
}

/* ---------- Busca (caixinha do aside) ---------- */
.search-box{ background:rgba(122,60,255,.08); border:1px solid var(--border); border-radius:12px; padding:14px; }
.search-box input[type="text"]{ background:#0e1322 }
.search-box .btn{ width:100% }

/* ---------- Utilitários ---------- */
.mt-2{margin-top:8px}
.mt-3{margin-top:12px}
.mt-4{margin-top:16px}
.ml-auto{margin-left:auto}
.hide{display:none !important}

/* ===================================================================== */
/* =================== AJUSTES ESPECÍFICOS DO ADMIN ==================== */
/* ===================================================================== */

/* Título/Subtítulo do header do admin (cores pedidas) */
.admin-header .brand-title{
  color:#FF64D5;
  text-shadow: 0 0 18px rgba(255,100,213,.55);
  font-weight:900;
}
.admin-header .brand-subtitle{
  color:#48E9FF;
  text-shadow: 0 0 14px rgba(72,233,255,.50);
}

/* Ícones sociais maiores (~2x) */
.admin-header .admin-socials a{
  font-size: 2rem;
  line-height: 1;
  display:inline-flex;
  align-items:center;
  filter: drop-shadow(0 0 8px rgba(36,227,255,.45));
}

/* Navbar com linhas neon e links como botões */
.admin-nav{
  position: relative;
  margin-top: 6px;
  padding: 6px 0;
}
.admin-nav::before,
.admin-nav::after{
  content:""; position:absolute; left:0; right:0; height:2px;
}
.admin-nav::before{  /* superior roxa */
  top:-1px; background:#2605B0;
  box-shadow: 0 0 10px #2605B0, 0 0 20px rgba(38,5,176,.7);
}
.admin-nav::after{   /* inferior magenta */
  bottom:-1px; background:#FF64D5;
  box-shadow: 0 0 12px #FF64D5, 0 0 26px rgba(255,100,213,.7);
}
.admin-nav a.btn{
  padding:8px 14px;
  border:1px solid rgba(36,227,255,.28);
  background: linear-gradient(180deg, rgba(36,227,255,.08), rgba(255,48,200,.08));
  color:#eafcff; border-radius:12px;
  box-shadow: 0 0 18px rgba(36,227,255,.25);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.admin-nav a.btn:hover{
  transform: translateY(-1px);
  border-color:#ff30c8;
  box-shadow: 0 0 24px rgba(255,48,200,.45);
}

/* Cartão de saudação mais compacto */
.card.welcome{
  padding: 12px 16px;
  margin-bottom: 16px;
}
.card.welcome p{ margin: 6px 0 0 }

/* Social do header do admin */
.admin-header .admin-socials a{
  color:#24E3FF;
  text-decoration:none;
}
.admin-header .admin-socials a:hover{
  color:#FF64D5;
  text-decoration:none;
  filter: drop-shadow(0 0 12px rgba(255,100,213,.55));
}

/* ===================================================================== */
/* ===================== AJUSTES ESPECÍFICOS DO PÚBLICO ================= */
/* ===================================================================== */

/* Título/Subtítulo iguais ao admin */
.site-header .brand-title{
  color:#FF64D5;
  text-shadow: 0 0 18px rgba(255,100,213,.55);
  font-weight:900;
  font-size: 34px;
}
.site-header .brand-subtitle{
  color:#48E9FF;
  text-shadow: 0 0 14px rgba(72,233,255,.50);
}

/* Ícones sociais do público (mesmo visual do admin) */
.site-header .site-socials a{
  font-size: 2rem;                 /* ~2x */
  line-height: 1;
  display:inline-flex;
  align-items:center;
  color:#24E3FF;
  text-decoration:none;
  filter: drop-shadow(0 0 8px rgba(36,227,255,.45));
}
.site-header .site-socials a:hover{
  color:#FF64D5;
  text-decoration:none;
  filter: drop-shadow(0 0 12px rgba(255,100,213,.55));
}

/* Navbar pública com linhas neon e botões */
.public-nav{
  position:relative;
  margin-top: 10px;
  padding: 8px 0;
}
.public-nav::before,
.public-nav::after{
  content:""; position:absolute; left:0; right:0; height:2px;
}
.public-nav::before{
  top:-1px; background:#2605B0;
  box-shadow: 0 0 10px #2605B0, 0 0 20px rgba(38,5,176,.7);
}
.public-nav::after{
  bottom:-1px; background:#FF64D5;
  box-shadow: 0 0 12px #FF64D5, 0 0 26px rgba(255,100,213,.7);
}
.public-nav a.btn{
  padding:8px 14px;
  border:1px solid rgba(36,227,255,.28);
  background: linear-gradient(180deg, rgba(36,227,255,.08), rgba(255,48,200,.08));
  color:#eafcff; border-radius:12px;
  box-shadow: 0 0 18px rgba(36,227,255,.25);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.public-nav a.btn:hover{
  transform: translateY(-1px);
  border-color:#ff30c8;
  box-shadow: 0 0 24px rgba(255,48,200,.45);
}
.public-nav a.btn.active{
  border-color:#FF64D5;
  box-shadow: 0 0 24px rgba(255,100,213,.55);
}