/* ============================================================
   Cosmo2 WIKI — STYLE.CSS UNIFICADO
   Tema dourado completo, num único ficheiro.
   (style.css + fixes.css fundidos)
============================================================ */

/* ══════════════════════════════════════
   1. VARIÁVEIS
══════════════════════════════════════ */
:root {
  --gold-primary: #c9a84c;
  --gold-light:   #f0d080;
  --gold-dark:    #9a7a25;
  --gold-glow:    rgba(201,168,76,.35);

  --dark-1: #0a0805;
  --dark-2: #14100a;
  --dark-3: #1a1208;
  --dark-4: #241a0e;

  --text-primary:   #e8d5a0;
  --text-secondary: rgba(232,213,160,.70);
  --text-muted:     rgba(232,213,160,.50);

  --border-color: rgba(201,168,76,.18);
  --card-bg: linear-gradient(145deg,rgba(26,18,8,.92),rgba(14,9,4,.96));

  --success: #22c55e;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #3b82f6;
}

/* ══════════════════════════════════════
   2. RESET & BASE
══════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family:'Crimson Pro','Georgia',serif;
  background:var(--dark-1);
  color:var(--text-primary);
  min-height:100vh;
  line-height:1.65;
  cursor:none;
}

body::before {
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse at 20% 20%,rgba(201,168,76,.05) 0%,transparent 55%),
    radial-gradient(ellipse at 80% 80%,rgba(139,26,26,.06) 0%,transparent 55%),
    linear-gradient(180deg,var(--dark-1) 0%,var(--dark-2) 100%);
  pointer-events:none; z-index:-2;
}

body::after {
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(201,168,76,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,168,76,.02) 1px,transparent 1px);
  background-size:60px 60px;
  pointer-events:none; z-index:-1; opacity:.5;
}

/* ══════════════════════════════════════
   3. SCROLLBAR
══════════════════════════════════════ */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:var(--dark-1); }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,var(--gold-primary),var(--gold-dark)); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--gold-light); }

/* ══════════════════════════════════════
   4. TIPOGRAFIA
══════════════════════════════════════ */
h1,h2,h3,h4,h5,h6 {
  font-family:'Cinzel','Georgia',serif;
  font-weight:700;
  color:var(--gold-primary);
  text-transform:uppercase;
  letter-spacing:.05em;
}
a { color:var(--gold-primary); text-decoration:none; transition:all .2s; }
a:hover { color:var(--gold-light); text-shadow:0 0 8px var(--gold-glow); }
::selection { background:var(--gold-primary); color:var(--dark-1); }

/* ══════════════════════════════════════
   5. TOP BAR
══════════════════════════════════════ */
.top-bar {
  height:3px;
  background:linear-gradient(90deg,transparent 0%,var(--gold-dark) 20%,var(--gold-primary) 50%,var(--gold-dark) 80%,transparent 100%);
}

/* ══════════════════════════════════════
   6. HEADER
══════════════════════════════════════ */
header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.6rem 2rem;
  background:linear-gradient(180deg,rgba(20,16,10,.98),rgba(10,8,5,.96));
  border-bottom:1px solid var(--border-color);
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(10px);
  flex-wrap:wrap;
}

.header-logo { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.header-logo-name {
  font-family:'Cinzel Decorative','Cinzel',serif;
  font-size:1.4rem;
  font-weight:700;
  color:var(--gold-primary);
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:0 0 18px rgba(201,168,76,.3);
}

#nav-tabs { display:flex; gap:.5rem; align-items:center; }
.tab-button {
  font-family:'Cinzel',serif;
  font-size:.65rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  padding:.42rem 1rem;
  border-radius:2px;
  background:rgba(201,168,76,.06);
  border:1px solid rgba(201,168,76,.16);
  color:rgba(212,184,122,.55);
  cursor:pointer;
  transition:all .2s;
}
.tab-button:hover,
.tab-button.active {
  background:rgba(201,168,76,.14);
  border-color:rgba(201,168,76,.4);
  color:var(--gold-primary);
  box-shadow:0 0 12px rgba(201,168,76,.12);
  transform:none;
}

#admin-controls {
  display:flex;
  align-items:center;
  gap:.45rem;
  flex-wrap:wrap;
  position:relative;
}

#admin-controls button,
#login-zone button {
  font-family:'Cinzel',serif;
  font-size:.62rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.4rem .9rem;
  border-radius:2px;
  border:1px solid rgba(201,168,76,.28);
  background:rgba(201,168,76,.10);
  color:var(--gold-primary);
  cursor:pointer;
  transition:all .2s;
}
#admin-controls button:hover,
#login-zone button:hover {
  background:rgba(201,168,76,.22);
  box-shadow:0 0 12px rgba(201,168,76,.18);
  transform:none;
}

#admin-menu {
  position:absolute;
  top:calc(100% + .4rem);
  right:0;
  background:linear-gradient(155deg,rgba(22,16,8,.99),rgba(10,7,3,.99));
  border:1px solid rgba(201,168,76,.22);
  border-radius:2px;
  padding:.5rem;
  z-index:200;
  display:flex;
  flex-direction:column;
  gap:.3rem;
  min-width:180px;
  box-shadow:0 12px 40px rgba(0,0,0,.7);
}
#admin-menu button {
  width:100%;
  text-align:left;
  padding:.45rem .75rem;
}

#login-zone {
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}
#login-zone input {
  width:auto;
  padding:.38rem .7rem;
  font-size:.82rem;
  background:rgba(26,18,8,.9);
  border:1px solid rgba(201,168,76,.22);
  color:var(--text-primary);
  border-radius:2px;
}
#login-zone input:focus {
  outline:none;
  border-color:rgba(201,168,76,.55);
  box-shadow:0 0 10px rgba(201,168,76,.15);
}

/* ══════════════════════════════════════
   7. HERO
══════════════════════════════════════ */
.hero {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:3.5rem 2rem 2.8rem;
  text-align:center;
  position:relative;
}
.hero::before {
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 60%,rgba(201,168,76,.06) 0%,transparent 70%);
  pointer-events:none;
}
.hero-emblem {
  width:96px; height:96px;
  object-fit:contain;
  filter:drop-shadow(0 0 24px rgba(201,168,76,.35));
  margin-bottom:1.2rem;
  animation:heroFloat 4s ease-in-out infinite;
}
@keyframes heroFloat {
  0%,100%  { transform:translateY(0); }
  50%      { transform:translateY(-6px); }
}
.hero-divider {
  display:flex;
  align-items:center;
  gap:.8rem;
  width:100%;
  max-width:360px;
  margin:.8rem auto;
}
.hero-divider::before,
.hero-divider::after {
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,.4),transparent);
}
.hero-diamond {
  width:6px; height:6px;
  background:var(--gold-primary);
  transform:rotate(45deg);
  box-shadow:0 0 8px rgba(201,168,76,.5);
}
.hero-subtitle {
  font-family:'Crimson Pro',serif;
  font-size:.95rem;
  color:var(--text-muted);
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-top:.2rem;
}

/* ══════════════════════════════════════
   8. WIKI BODY (sidebar + content)
══════════════════════════════════════ */
.wiki-body {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:1.5rem;
  max-width:1400px;
  margin:0 auto;
  padding:1.5rem 2rem 4rem;
}

/* ── Sidebar ── */
.wiki-sidebar {
  position:sticky;
  top:80px;
  height:fit-content;
}
.sidebar-label {
  font-family:'Cinzel',serif;
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(201,168,76,.45);
  margin-bottom:.7rem;
  padding-bottom:.45rem;
  border-bottom:1px solid rgba(201,168,76,.12);
}
.sidebar-panel {
  background:linear-gradient(155deg,rgba(22,16,8,.95),rgba(10,7,3,.95));
  border:1px solid rgba(201,168,76,.16);
  border-radius:3px;
  padding:.8rem;
}
#categoryList { list-style:none; display:flex; flex-direction:column; gap:.35rem; }
#categoryList li {
  padding:.6rem .8rem;
  border-radius:2px;
  cursor:pointer;
  transition:all .2s;
  border:1px solid transparent;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:'Cinzel',serif;
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(212,184,122,.55);
}
#categoryList li:hover {
  background:rgba(201,168,76,.08);
  border-color:rgba(201,168,76,.18);
  color:rgba(212,184,122,.85);
}

.category-item { background:transparent !important; }

/* ── Conteúdo ── */
.wiki-content { min-width:0; }

/* ══════════════════════════════════════
   9. PESQUISA
══════════════════════════════════════ */
.search-wrap { margin-bottom:1.8rem; }
.search-label {
  display:block;
  font-family:'Cinzel',serif;
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(201,168,76,.4);
  margin-bottom:.5rem;
}
.search-row {
  position:relative;
  display:flex;
  align-items:center;
}
.search-icon {
  position:absolute;
  left:.9rem;
  font-size:.95rem;
  color:rgba(201,168,76,.35);
  pointer-events:none;
}
#searchInput {
  width:100%;
  padding:.85rem 1rem .85rem 2.6rem;
  background:rgba(26,18,8,.95);
  border:1px solid rgba(201,168,76,.18);
  border-radius:2px;
  color:var(--text-primary);
  font-family:'Crimson Pro',serif;
  font-size:1rem;
  transition:all .25s;
}
#searchInput:focus {
  outline:none;
  border-color:rgba(201,168,76,.5);
  box-shadow:0 0 0 3px rgba(201,168,76,.08),0 0 20px rgba(201,168,76,.10);
}
#searchInput::placeholder { color:var(--text-muted); }

/* ══════════════════════════════════════
   10. SECTION TITLE
══════════════════════════════════════ */
.section-title {
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-bottom:1.2rem;
}
.section-title::before,
.section-title::after {
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,rgba(201,168,76,.18),transparent);
}
.section-title::after { background:linear-gradient(90deg,transparent,rgba(201,168,76,.18)); }
.section-title span {
  font-family:'Cinzel',serif;
  font-size:.65rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(201,168,76,.5);
  white-space:nowrap;
}

/* ══════════════════════════════════════
   11. ARTICLE CARDS
══════════════════════════════════════ */
.article-card {
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:3px;
  padding:1.5rem;
  margin-bottom:1.4rem;
  transition:all .28s;
  position:relative;
  overflow:hidden;
}
.article-card::before {
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-primary),transparent);
  opacity:0; transition:opacity .3s;
}
.article-card:hover { border-color:rgba(201,168,76,.30); transform:translateY(-1px); box-shadow:0 8px 32px rgba(0,0,0,.35),0 0 24px rgba(201,168,76,.05); }
.article-card:hover::before { opacity:1; }

.article-card h3 {
  font-family:'Cinzel',serif;
  font-size:1rem;
  letter-spacing:.08em;
  color:var(--text-primary);
  margin-bottom:.6rem;
}
.article-card h3:hover { color:var(--gold-primary); }

.article-content {
  color:var(--text-secondary);
  line-height:1.8;
  font-size:.95rem;
}
.article-content h1 { font-size:1.6rem; color:var(--gold-primary); margin:1.2rem 0 .6rem; }
.article-content h2 { font-size:1.3rem; color:var(--gold-primary); margin:1rem 0 .5rem; }
.article-content h3 { font-size:1.1rem; color:var(--gold-primary); margin:.8rem 0 .4rem; }
.article-content strong { color:var(--text-primary); font-weight:600; }
.article-content em { color:var(--gold-light); }
.article-content code { background:var(--dark-1); padding:.2em .5em; border-radius:3px; font-family:'Fira Code','Monaco',monospace; font-size:.88em; color:var(--gold-primary); border:1px solid var(--border-color); }
.article-content pre { background:var(--dark-1); border:1px solid var(--border-color); border-radius:4px; padding:1rem; overflow-x:auto; margin:1rem 0; }
.article-content pre code { background:none; border:none; padding:0; color:#a5f3fc; }
.article-content blockquote { border-left:3px solid var(--gold-primary); padding:1rem 1rem 1rem 1.2rem; margin:1rem 0; color:var(--text-secondary); font-style:italic; background:rgba(201,168,76,.05); border-radius:0 4px 4px 0; }
.article-content table { width:100%; border-collapse:collapse; margin:1rem 0; background:var(--dark-3); border-radius:4px; overflow:hidden; }
.article-content th { background:rgba(201,168,76,.10); color:var(--gold-primary); font-weight:600; padding:.6rem .8rem; text-align:left; border:1px solid var(--border-color); }
.article-content td { padding:.6rem .8rem; border:1px solid var(--border-color); }
.article-content ul, .article-content ol { margin:.8rem 0; padding-left:1.4rem; }
.article-content li { margin:.4rem 0; color:var(--text-secondary); }
.article-content li::marker { color:var(--gold-primary); }

/* ── Imagens inline no conteúdo (emoji style) ── */
.article-content .inline-img {
  display:inline-block;
  vertical-align:middle;
  width:1.6em; height:1.6em;
  object-fit:contain;
  margin:0 .15em;
  cursor:zoom-in;
  border-radius:2px;
  transition:transform .15s;
}
.article-content .inline-img:hover { transform:scale(1.4); }

/* ── Blocos de conteúdo (texto/imagem misturado) ── */
.content-block { margin:.8rem 0; }
.content-block-image { display:flex; justify-content:center; margin:1rem 0; }
.content-block-image img { max-height:320px; border-radius:4px; cursor:zoom-in; transition:transform .25s; }
.content-block-image img:hover { transform:scale(1.02); }
.content-block-inline { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:.5rem 0; }

/* ══════════════════════════════════════
   12. BOTÕES GLOBAIS
══════════════════════════════════════ */
button, .btn {
  background:linear-gradient(90deg,var(--gold-primary),var(--gold-light));
  color:var(--dark-1);
  border:none;
  padding:.65rem 1.3rem;
  border-radius:2px;
  font-family:'Cinzel',serif;
  font-weight:700;
  cursor:pointer;
  transition:all .2s;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.75rem;
}
button:hover, .btn:hover { transform:translateY(-1px); box-shadow:0 0 14px rgba(201,168,76,.32); }
button:active, .btn:active { transform:translateY(0); }

.btn-secondary { background:var(--dark-3); color:var(--text-primary); border:1px solid var(--border-color); }
.btn-secondary:hover { border-color:var(--gold-primary); background:var(--dark-4); }
.btn-danger { background:linear-gradient(135deg,var(--danger),#dc2626) !important; color:#fff !important; }
.btn-success { background:linear-gradient(135deg,var(--success),#16a34a) !important; color:#fff !important; }

/* ══════════════════════════════════════
   13. INPUTS / SELECTS
══════════════════════════════════════ */
input, textarea, select {
  background:var(--dark-3);
  border:1px solid var(--border-color);
  color:var(--text-primary);
  padding:.65rem .9rem;
  border-radius:3px;
  font-size:.9rem;
  font-family:'Crimson Pro',serif;
  transition:all .2s;
  width:100%;
}
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--gold-primary); box-shadow:0 0 0 3px rgba(201,168,76,.10); }
input::placeholder, textarea::placeholder { color:var(--text-muted); }
select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23c9a84c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .75rem center; background-size:1.1rem; padding-right:2.2rem; }

/* ══════════════════════════════════════
   14. MODAL WIKI
══════════════════════════════════════ */
#modalOverlay {
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(10px);
}
#modalBox {
  background:linear-gradient(155deg,rgba(22,16,8,.99),rgba(10,7,3,.99));
  border:1px solid rgba(201,168,76,.24);
  border-radius:3px;
  max-width:720px;
  width:92%;
  /* Altura máxima da viewport, com espaço para o cabeçalho e botões */
  max-height:90vh;
  min-height:0;
  overflow:hidden; /* NÃO faz scroll aqui — o scroll é no #modalContent */
  padding:0;
  position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.85),0 0 36px rgba(201,168,76,.05);
  animation:modalPop .35s cubic-bezier(.16,1,.3,1);
  display:flex;
  flex-direction:column;
}
#modalBox::before { content:""; position:absolute; top:-1px; left:-1px; width:20px; height:20px; border-top:1px solid var(--gold-primary); border-left:1px solid var(--gold-primary); z-index:1; pointer-events:none; }
#modalBox::after  { content:""; position:absolute; bottom:-1px; right:-1px; width:20px; height:20px; border-bottom:1px solid var(--gold-primary); border-right:1px solid var(--gold-primary); z-index:1; pointer-events:none; }

#modalTitle {
  font-family:'Cinzel',serif;
  font-size:.95rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--gold-primary);
  margin:0;
  padding:1.3rem 1.8rem 1rem;
  border-bottom:1px solid rgba(201,168,76,.14);
  flex-shrink:0; /* nunca encolhe */
}

/* O scroll fica AQUI — o conteúdo do modal */
#modalContent {
  color:rgba(212,184,122,.7);
  line-height:1.7;
  font-size:.9rem;
  flex:1;           /* ocupa todo o espaço disponível */
  overflow-y:auto;  /* ESTE é o elemento que faz scroll */
  padding:1rem 1.8rem;
  min-height:0;     /* necessário para flex + overflow funcionar */
}
#modalContent::-webkit-scrollbar { width:6px; }
#modalContent::-webkit-scrollbar-track { background:rgba(10,7,3,.5); }
#modalContent::-webkit-scrollbar-thumb { background:rgba(201,168,76,.3); border-radius:3px; }
#modalContent::-webkit-scrollbar-thumb:hover { background:rgba(201,168,76,.55); }

/* Botões ficam fixos no fundo do modal */
#modal-footer {
  display:flex;
  justify-content:flex-end;
  gap:.5rem;
  padding:.9rem 1.8rem;
  border-top:1px solid rgba(201,168,76,.12);
  background:rgba(10,7,3,.6);
  flex-shrink:0;
}

#modalCancel { font-family:'Cinzel',serif; font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; padding:.45rem .9rem; border-radius:2px; background:rgba(22,16,8,.9); border:1px solid rgba(255,255,255,.08); color:rgba(212,184,122,.45); cursor:pointer; }
#modalCancel:hover { background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.26); color:#fca5a5; transform:none; box-shadow:none; }
#modalOk { font-family:'Cinzel',serif; font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; padding:.45rem 1.1rem; border-radius:2px; background:linear-gradient(135deg,rgba(201,168,76,.18),rgba(201,168,76,.08)); border:1px solid rgba(201,168,76,.38); color:#f0d080; cursor:pointer; }
#modalOk:hover { background:linear-gradient(135deg,rgba(201,168,76,.30),rgba(201,168,76,.15)); box-shadow:0 0 14px rgba(201,168,76,.17); transform:none; }

@keyframes modalPop { from { opacity:0; transform:scale(.94) translateY(-10px); } to { opacity:1; transform:none; } }

/* ══════════════════════════════════════
   15. PAINEL MASTER
══════════════════════════════════════ */
#master-panel { background:rgba(0,0,0,.84); backdrop-filter:blur(12px); }
#master-panel > div { background:linear-gradient(155deg,rgba(22,16,8,.99),rgba(10,7,3,.99)); border:1px solid rgba(201,168,76,.22); border-radius:3px; max-height:85vh; overflow-y:auto; position:relative; }
#master-panel h3 { font-family:'Cinzel',serif; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-primary); padding-bottom:.6rem; border-bottom:1px solid rgba(201,168,76,.14); margin-bottom:.8rem; }

/* ══════════════════════════════════════
   16. ZOOM DE IMAGEM
══════════════════════════════════════ */
.zoom-overlay { position:fixed; inset:0; background:rgba(0,0,0,.95); display:flex; align-items:center; justify-content:center; z-index:1000; cursor:zoom-out; }
.zoom-overlay img { max-width:90vw; max-height:90vh; object-fit:contain; border:2px solid var(--gold-primary); border-radius:4px; box-shadow:0 0 50px var(--gold-glow); }

/* ══════════════════════════════════════
   17. NOTIFICAÇÕES / SYNC
══════════════════════════════════════ */
.sync-notification {
  position:fixed; bottom:1.5rem; right:1.5rem;
  background:var(--dark-2);
  border:1px solid var(--gold-primary);
  border-radius:3px;
  padding:.85rem 1.3rem;
  color:var(--text-primary);
  box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 20px var(--gold-glow);
  z-index:1000;
  font-family:'Cinzel',serif;
  font-size:.7rem;
  letter-spacing:.06em;
  animation:slideIn .3s ease;
}
@keyframes slideIn { from { transform:translateX(110%); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes slideOut { from { transform:translateX(0); opacity:1; } to { transform:translateX(110%); opacity:0; } }

/* ══════════════════════════════════════
   18. DRAG & DROP
══════════════════════════════════════ */
.drag-handle { cursor:grab; user-select:none; opacity:.45; transition:all .2s; font-size:1.1rem; padding:.2rem; border-radius:3px; }
.drag-handle:hover { opacity:1; background:rgba(201,168,76,.10); color:var(--gold-primary); }
.drag-handle:active { cursor:grabbing; }

.dragging { opacity:.5; transform:scale(.98); box-shadow:0 10px 40px rgba(0,0,0,.5); border:2px dashed var(--gold-primary) !important; }
.drag-over { border:2px solid var(--gold-primary) !important; background:rgba(201,168,76,.10) !important; box-shadow:0 0 20px rgba(201,168,76,.25); }
.drag-over-category { border:2px solid var(--success) !important; background:rgba(34,197,94,.12) !important; }

/* ══════════════════════════════════════
   19. EDITOR — RICH CONTENT BUILDER
══════════════════════════════════════ */
.rich-editor-wrap {
  background:rgba(10,7,3,.95);
  border:1px solid rgba(201,168,76,.18);
  border-radius:3px;
  overflow:hidden;
}

/* Toolbar de formatação */
.editor-toolbar {
  background:rgba(26,18,8,.98);
  border-bottom:1px solid rgba(201,168,76,.14);
  padding:.5rem .6rem;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.3rem;
}
.editor-toolbar button:not(.color-swatch) {
  background:rgba(36,26,14,.9) !important;
  color:rgba(212,184,122,.75) !important;
  padding:.28rem .6rem !important;
  font-size:.78rem !important;
  border-radius:2px !important;
  border:1px solid rgba(201,168,76,.14) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-family:inherit !important;
  font-weight:600 !important;
  box-shadow:none !important;
  transition:all .15s !important;
}
.editor-toolbar button:not(.color-swatch):hover {
  background:rgba(201,168,76,.16) !important;
  color:var(--gold-primary) !important;
  transform:none !important;
}
.editor-toolbar .sep { width:1px; height:1.4rem; background:rgba(201,168,76,.14); margin:0 .2rem; }

/* Paleta de cores — os swatches preservam a cor inline (background definido no HTML via style=) */
.color-swatch {
  width:1.6rem !important;
  height:1.6rem !important;
  padding:0 !important;
  min-width:0 !important;
  border-radius:3px !important;
  border:2px solid rgba(255,255,255,.18) !important;
  box-shadow:none !important;
  /* NÃO definir background aqui — vem do style= inline no HTML */
  background:revert !important; /* deixa o style= inline ganhar */
  position:relative;
  flex-shrink:0;
}
/* Fallback: se o style= inline não funcionar por algum override, usar attribute selector */
.editor-toolbar button[data-fmt="#ef4444"] { background:#ef4444 !important; }
.editor-toolbar button[data-fmt="#f97316"] { background:#f97316 !important; }
.editor-toolbar button[data-fmt="#eab308"] { background:#eab308 !important; }
.editor-toolbar button[data-fmt="#22c55e"] { background:#22c55e !important; }
.editor-toolbar button[data-fmt="#06b6d4"] { background:#06b6d4 !important; }
.editor-toolbar button[data-fmt="#3b82f6"] { background:#3b82f6 !important; }
.editor-toolbar button[data-fmt="#8b5cf6"] { background:#8b5cf6 !important; }
.editor-toolbar button[data-fmt="#ec4899"] { background:#ec4899 !important; }
.editor-toolbar button[data-fmt="#ffc800"] { background:#ffc800 !important; }
.color-swatch:hover {
  transform:scale(1.25) !important;
  border-color:#fff !important;
  box-shadow:0 0 8px currentColor !important;
}

/* Blocos do editor */
.editor-blocks {
  padding:.6rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  /* SEM max-height aqui — o scroll está no modal (max-height:80vh) */
  overflow-y:visible;
}
.editor-block {
  background:rgba(26,18,8,.9);
  border:1px solid rgba(201,168,76,.12);
  border-radius:2px;
  overflow:visible; /* era hidden — impedia de ver os campos */
  position:relative;
}
.editor-block-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.4rem;
  padding:.3rem .5rem;
  background:rgba(10,7,3,.7);
  border-bottom:1px solid rgba(201,168,76,.08);
}
.editor-block-label {
  font-family:'Cinzel',serif;
  font-size:.58rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(201,168,76,.45);
  flex:1;
}
.editor-block-del {
  background:none !important;
  border:none !important;
  color:rgba(239,68,68,.5) !important;
  font-size:.9rem !important;
  padding:.1rem .3rem !important;
  cursor:pointer !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
  transition:color .15s !important;
}
.editor-block-del:hover { color:#ef4444 !important; transform:none !important; }

/* ── Drag & Drop de blocos do editor ── */
.editor-block-drag-handle {
  cursor: grab;
  color: rgba(201,168,76,.35);
  font-size: 1rem;
  padding: 0 .35rem 0 .1rem;
  user-select: none;
  flex-shrink: 0;
  line-height: 1;
  transition: color .15s;
}
.editor-block-drag-handle:hover { color: rgba(201,168,76,.75); }
.editor-block-drag-handle:active { cursor: grabbing; }

.editor-block-dragging {
  opacity: .35;
  border: 1px dashed rgba(201,168,76,.5) !important;
  background: rgba(26,18,8,.5) !important;
}
.editor-block-drag-over-top {
  border-top: 3px solid #c9a84c !important;
  background: rgba(201,168,76,.05) !important;
}
.editor-block-drag-over-bot {
  border-bottom: 3px solid #c9a84c !important;
  background: rgba(201,168,76,.05) !important;
}

.editor-block textarea {
  width:100%; border:none !important; border-radius:0 !important;
  background:transparent !important;
  color:var(--text-primary) !important;
  font-family:'Crimson Pro',serif !important;
  font-size:.92rem !important;
  resize:vertical;
  padding:.5rem .6rem !important;
  min-height:70px;
}
.editor-block textarea:focus { outline:none !important; box-shadow:none !important; }

/* Bloco de imagem no editor */
.editor-block-img {
  padding:.55rem .65rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.editor-block-img input[type="text"] {
  border:1px solid rgba(201,168,76,.16) !important;
  padding:.38rem .6rem !important;
  font-size:.82rem !important;
  width:100%;
}
.editor-block-img select {
  background:rgba(26,18,8,.9) !important;
  border:1px solid rgba(201,168,76,.18) !important;
  color:#e8d5a0 !important;
  padding:.28rem .5rem !important;
  font-size:.78rem !important;
  width:auto !important;
  border-radius:2px !important;
}
.editor-img-size-row {
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  padding:.4rem .5rem;
  background:rgba(10,7,3,.4);
  border:1px solid rgba(201,168,76,.08);
  border-radius:2px;
}
.editor-img-size-row span.size-label {
  font-family:'Cinzel',serif;
  font-size:.58rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(201,168,76,.5);
  white-space:nowrap;
}
.img-custom-fields input[type="number"] {
  width:60px !important;
  padding:.25rem .4rem !important;
  font-size:.78rem !important;
  border:1px solid rgba(201,168,76,.18) !important;
  background:rgba(26,18,8,.9) !important;
  color:#e8d5a0 !important;
  border-radius:2px !important;
}
.editor-block-img-mode {
  display:flex; gap:.8rem; align-items:center; flex-wrap:wrap;
}
.editor-block-img-mode label {
  font-size:.78rem;
  color:rgba(212,184,122,.7);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:.35rem;
}
.editor-block-img-mode input[type="radio"] { width:auto; cursor:pointer; }
.editor-img-preview {
  max-height:90px;
  max-width:180px;
  border-radius:3px;
  border:1px solid rgba(201,168,76,.16);
  object-fit:contain;
  display:none;
  margin-top:.2rem;
}
.editor-img-preview.visible { display:block; }

/* Botões "Adicionar bloco" */
.editor-add-btns {
  display:flex; gap:.4rem; flex-wrap:wrap;
  padding:.5rem .6rem;
  border-top:1px solid rgba(201,168,76,.10);
  background:rgba(10,7,3,.5);
}
.editor-add-btn {
  background:rgba(36,26,14,.85) !important;
  color:rgba(212,184,122,.65) !important;
  padding:.3rem .65rem !important;
  font-size:.68rem !important;
  border-radius:2px !important;
  border:1px solid rgba(201,168,76,.16) !important;
  text-transform:none !important;
  letter-spacing:.04em !important;
  font-family:'Cinzel',serif !important;
  box-shadow:none !important;
  transition:all .15s !important;
}
.editor-add-btn:hover {
  background:rgba(201,168,76,.14) !important;
  color:var(--gold-primary) !important;
  transform:none !important;
}

/* Upload dentro do editor */
.upload-row { display:flex; align-items:center; gap:.4rem; margin-top:.3rem; }
.btn-upload, .btn-upload-inline {
  padding:.32rem .6rem !important;
  border-radius:2px !important;
  background:rgba(36,26,14,.9) !important;
  color:rgba(212,184,122,.7) !important;
  border:1px solid rgba(201,168,76,.18) !important;
  font-size:.75rem !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  cursor:pointer !important;
  transition:all .15s !important;
  box-shadow:none !important;
}
.btn-upload:hover, .btn-upload-inline:hover { border-color:rgba(201,168,76,.4) !important; color:var(--gold-primary) !important; transform:none !important; }
.btn-upload.uploading, .btn-upload-inline.uploading { opacity:.6; cursor:progress; }
.upload-inline { display:inline-flex; align-items:center; gap:.3rem; }
.upload-status { font-size:.78rem; color:var(--text-muted); }
.upload-preview { max-height:44px; border-radius:3px; border:1px solid var(--border-color); }
.upload-preview-inline { display:none; }

/* ══════════════════════════════════════
   20. BOTÕES INLINE DO JS (sem Tailwind)
══════════════════════════════════════ */
button.bg-amber-600, button.bg-amber-500 { background:rgba(217,119,6,.85) !important; color:#fff !important; padding:.32rem .7rem !important; font-size:.74rem !important; border-radius:3px !important; border:none !important; text-transform:none !important; letter-spacing:normal !important; font-family:inherit !important; font-weight:500 !important; box-shadow:none !important; }
button.bg-red-600, button.bg-red-500 { background:rgba(220,38,38,.85) !important; color:#fff !important; padding:.32rem .7rem !important; font-size:.74rem !important; border-radius:3px !important; border:none !important; text-transform:none !important; letter-spacing:normal !important; font-family:inherit !important; font-weight:500 !important; box-shadow:none !important; }
button.bg-blue-600, button.bg-blue-500 { background:rgba(37,99,235,.85) !important; color:#fff !important; padding:.32rem .7rem !important; font-size:.74rem !important; border-radius:3px !important; border:none !important; text-transform:none !important; letter-spacing:normal !important; font-family:inherit !important; font-weight:500 !important; box-shadow:none !important; }
button.bg-neutral-700, button.bg-neutral-600 { background:rgba(55,55,55,.85) !important; color:#e0c88a !important; padding:.32rem .7rem !important; font-size:.74rem !important; border-radius:3px !important; border:1px solid rgba(201,168,76,.16) !important; text-transform:none !important; letter-spacing:normal !important; font-family:inherit !important; font-weight:500 !important; box-shadow:none !important; }
button.bg-green-600  { background:rgba(22,163,74,.85) !important;  color:#fff !important; padding:.32rem .7rem !important; font-size:.74rem !important; border-radius:3px !important; border:none !important; text-transform:none !important; letter-spacing:normal !important; box-shadow:none !important; }
button.bg-orange-600 { background:rgba(234,88,12,.85) !important;  color:#fff !important; padding:.32rem .7rem !important; font-size:.74rem !important; border-radius:3px !important; border:none !important; text-transform:none !important; letter-spacing:normal !important; box-shadow:none !important; }
button.bg-purple-600 { background:rgba(124,58,237,.85) !important; color:#fff !important; padding:.32rem .7rem !important; font-size:.74rem !important; border-radius:3px !important; border:none !important; text-transform:none !important; letter-spacing:normal !important; box-shadow:none !important; }
button.bg-indigo-600, button.bg-indigo-700 { background:rgba(79,70,229,.85) !important; color:#fff !important; padding:.32rem .7rem !important; font-size:.74rem !important; border-radius:3px !important; border:none !important; text-transform:none !important; letter-spacing:normal !important; box-shadow:none !important; }
button.bg-amber-600:hover, button.bg-red-600:hover, button.bg-blue-600:hover,
button.bg-neutral-700:hover, button.bg-green-600:hover, button.bg-orange-600:hover,
button.bg-purple-600:hover, button.bg-indigo-600:hover, button.bg-indigo-700:hover { transform:none !important; }

/* Botões de cor (paleta editor) */
button.w-6, button[class*="w-6"][class*="h-6"] {
  width:1.55rem !important; height:1.55rem !important;
  padding:0 !important; border-radius:3px !important; min-width:0 !important;
  border:2px solid rgba(255,255,255,.12) !important; text-transform:none !important;
  letter-spacing:0 !important; box-shadow:none !important;
}
button.w-6:hover, button[class*="w-6"][class*="h-6"]:hover { transform:scale(1.18) !important; border-color:#fff !important; }

/* Botões de formatação B/I/U/H1/H2/H3 */
#modalContent button.rounded,
.editor-toolbar button.rounded {
  background:rgba(36,26,14,.9) !important; color:#e0c88a !important;
  padding:.28rem .6rem !important; font-size:.78rem !important;
  border-radius:3px !important; border:1px solid rgba(201,168,76,.14) !important;
  text-transform:none !important; letter-spacing:0 !important;
  font-weight:600 !important; line-height:1.3 !important; box-shadow:none !important;
}

/* Botão X de remover item */
#descImagesContainer button, button.bg-red-600.px-3 {
  background:rgba(180,28,28,.8) !important; color:#fff !important;
  padding:.3rem .55rem !important; font-size:.78rem !important;
  border-radius:3px !important; border:none !important;
  text-transform:none !important; letter-spacing:0 !important;
  min-width:0 !important; box-shadow:none !important;
}

/* ══════════════════════════════════════
   21. WORKSPACE — HEADER
══════════════════════════════════════ */
.workspace-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 1.2rem;
  border-bottom:1px solid var(--border-color);
  background:rgba(10,7,3,.9);
  flex-wrap:wrap; gap:.5rem;
}
.workspace-header h2 { font-family:'Cinzel',serif; font-size:.85rem; letter-spacing:.1em; color:var(--gold-primary); text-transform:uppercase; }

/* ══════════════════════════════════════
   22. WORKSPACE — TRELLO
══════════════════════════════════════ */
#trello-board { display:flex; gap:1rem; padding:1rem; overflow-x:auto; min-height:calc(100vh - 200px); -webkit-overflow-scrolling:touch; }

.trello-column {
  flex:0 0 300px;
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:3px;
  padding:1rem;
  display:flex; flex-direction:column;
  max-height:calc(100vh - 220px);
  transition:all .2s;
}
.trello-column.drag-over, .trello-column.column-drag-over {
  border-color:var(--gold-primary) !important;
  box-shadow:0 0 20px rgba(201,168,76,.28) !important;
}
.trello-column.column-dragging { opacity:.4; border-style:dashed !important; }

.column-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; padding-bottom:.7rem; border-bottom:1px solid var(--border-color); gap:.5rem; }
.column-title { font-size:1rem; color:var(--gold-primary); font-weight:600; margin:0; outline:none; flex:1; padding:.2rem; border-radius:2px; transition:background .2s; font-family:'Cinzel',serif; letter-spacing:.06em; }
.column-title:focus { background:rgba(201,168,76,.10); }
.column-actions { display:flex; gap:.4rem; }

.btn-add-card, .btn-delete-column {
  background:var(--dark-3) !important; border:1px solid var(--border-color) !important;
  border-radius:3px !important; padding:.35rem .55rem !important;
  font-size:.9rem !important; cursor:pointer !important; transition:all .2s !important;
  color:var(--text-primary) !important; text-transform:none !important;
  letter-spacing:0 !important; box-shadow:none !important;
}
.btn-add-card:hover { background:rgba(34,197,94,.18) !important; border-color:var(--success) !important; transform:none !important; }
.btn-delete-column:hover { background:rgba(239,68,68,.18) !important; border-color:var(--danger) !important; transform:none !important; }

.column-cards, .cards-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:.65rem; padding:.4rem .2rem; min-height:80px; transition:all .2s; }
.cards-list.drag-over { background:rgba(201,168,76,.05) !important; border-radius:2px; outline:1px dashed rgba(201,168,76,.3); }
.column-cards::-webkit-scrollbar { width:5px; }
.column-cards::-webkit-scrollbar-thumb { background:rgba(201,168,76,.25); border-radius:3px; }

.trello-card { background:var(--dark-3); border:1px solid var(--border-color); border-radius:3px; padding:.8rem; cursor:pointer; transition:all .2s; position:relative; user-select:none; -webkit-user-select:none; }
.trello-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(201,168,76,.14); border-color:rgba(201,168,76,.28); }
.trello-card.dragging, .trello-card.touch-dragging { opacity:.4; border:1px dashed rgba(201,168,76,.4) !important; pointer-events:none; }
.trello-card.card-over { border-top:2px solid var(--gold-primary) !important; }
.trello-card::before { content:'✏️'; position:absolute; top:7px; right:7px; opacity:0; transition:opacity .2s; font-size:.8rem; }
.trello-card:hover::before { opacity:.5; }

.card-title { font-weight:600; color:var(--text-primary); margin-bottom:.4rem; font-size:.88rem; line-height:1.4; }
.trello-card:hover .card-title { color:var(--gold-primary); }
.card-description { color:var(--text-secondary); font-size:.8rem; line-height:1.5; margin-bottom:.6rem; max-height:56px; overflow:hidden; }
.card-footer { display:flex; justify-content:space-between; align-items:center; margin-top:.6rem; padding-top:.6rem; border-top:1px solid rgba(201,168,76,.10); font-size:.72rem; color:var(--text-muted); }
.card-footer button { background:none !important; border:none !important; cursor:pointer !important; padding:.2rem !important; color:var(--text-primary) !important; box-shadow:none !important; text-transform:none !important; }
.card-footer button:hover { transform:scale(1.2) !important; }

/* Ghost drag */
#drag-ghost, #drag-ghost-col { cursor:grabbing !important; border-radius:3px; user-select:none; }

/* Workspace toast */
.workspace-toast { position:fixed; z-index:9999; bottom:1rem; right:1rem; background:linear-gradient(155deg,rgba(22,16,8,.98),rgba(10,7,3,.98)); border:1px solid rgba(201,168,76,.22); border-radius:3px; padding:.6rem 1rem; color:rgba(212,184,122,.85); font-family:'Cinzel',serif; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; box-shadow:0 8px 24px rgba(0,0,0,.5); animation:slideIn .25s ease; }

/* Card modal */
.card-modal { position:fixed; inset:0; background:rgba(0,0,0,.85); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:10000; padding:1rem; }
.card-modal-content { background:linear-gradient(155deg,rgba(22,16,8,.99),rgba(10,7,3,.99)); border:1px solid rgba(201,168,76,.22); border-radius:3px; padding:1.8rem; max-width:500px; width:100%; max-height:90vh; overflow-y:auto; animation:modalPop .3s cubic-bezier(.16,1,.3,1); position:relative; }
.card-modal-content::before { content:""; position:absolute; top:-1px; left:-1px; width:18px; height:18px; border-top:1px solid rgba(201,168,76,.65); border-left:1px solid rgba(201,168,76,.65); }
.card-modal-content::after  { content:""; position:absolute; bottom:-1px; right:-1px; width:18px; height:18px; border-bottom:1px solid rgba(201,168,76,.65); border-right:1px solid rgba(201,168,76,.65); }

.modal-field { margin-bottom:1.1rem; }
.modal-field label { display:block; color:var(--gold-primary); font-family:'Cinzel',serif; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.4rem; }
.modal-actions { display:flex; gap:.8rem; margin-top:1.4rem; }
.modal-actions button { flex:1; padding:.65rem 1.1rem; font-size:.68rem; letter-spacing:.09em; }
.btn-save   { background:linear-gradient(135deg,#22c55e,#16a34a) !important; color:#fff !important; }
.btn-cancel { background:rgba(22,16,8,.9) !important; color:rgba(212,184,122,.5) !important; border:1px solid rgba(201,168,76,.14) !important; }
.btn-save:hover   { box-shadow:0 0 14px rgba(34,197,94,.28) !important; transform:translateY(-1px) !important; }
.btn-cancel:hover { border-color:rgba(239,68,68,.28) !important; color:#fca5a5 !important; transform:none !important; box-shadow:none !important; }

/* Coluna collapse */
.trello-column.col-is-collapsed .column-header { border-bottom:none; }
.col-collapse-btn:hover { background:rgba(201,168,76,.22) !important; }
.col-drop-target { border-color:var(--gold-primary) !important; box-shadow:0 0 0 2px rgba(201,168,76,.32),0 0 24px rgba(201,168,76,.18) !important; }

/* ══════════════════════════════════════
   23. ACCESS DENIED WORKSPACE
══════════════════════════════════════ */
.denied-box {
  background:linear-gradient(155deg,rgba(22,16,8,.98),rgba(10,7,3,.98));
  border:1px solid rgba(201,168,76,.22);
  border-radius:3px;
  padding:3rem 2rem;
  text-align:center;
  max-width:420px;
  margin:4rem auto;
}
.denied-box h2 { font-family:'Cinzel',serif; font-size:1.1rem; color:var(--gold-primary); margin-bottom:.8rem; letter-spacing:.1em; }
.denied-box p { color:var(--text-muted); font-size:.9rem; }

/* ══════════════════════════════════════
   24. FOOTER
══════════════════════════════════════ */
.site-footer { padding:1rem 2rem; text-align:center; border-top:1px solid rgba(201,168,76,.10); background:rgba(8,6,4,.88); }
.footer-inner { display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.footer-line { display:flex; align-items:center; gap:.8rem; width:100%; max-width:300px; }
.footer-line::before { content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(201,168,76,.18)); }
.footer-line::after  { content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(201,168,76,.18),transparent); }
.footer-gem { width:5px; height:5px; background:rgba(201,168,76,.28); transform:rotate(45deg); }
.footer-text { font-family:'Cinzel',serif; font-size:.52rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(212,184,122,.28); }
.footer-text strong { color:rgba(201,168,76,.45); }

/* ══════════════════════════════════════
   25. CURSOR CUSTOMIZADO
══════════════════════════════════════ */
#custom-cursor { position:fixed; width:14px; height:14px; border:1px solid rgba(201,168,76,.65); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .12s,height .12s,border-color .12s,box-shadow .12s; }
.cursor-trail { position:fixed; width:5px; height:5px; background:radial-gradient(circle,rgba(201,168,76,.4),transparent); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:opacity .32s,transform .32s; }

/* ══════════════════════════════════════
   26. UTILITÁRIOS
══════════════════════════════════════ */
.hidden { display:none !important; }
.flex   { display:flex; }
.flex-1 { flex:1; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-1  { gap:.25rem; }
.gap-2  { gap:.5rem; }
.gap-4  { gap:1rem; }
.mt-2   { margin-top:.5rem; }
.mt-4   { margin-top:1rem; }
.mb-2   { margin-bottom:.5rem; }
.mb-4   { margin-bottom:1rem; }
.p-2    { padding:.5rem; }
.p-4    { padding:1rem; }
.w-full { width:100%; }
.rounded    { border-radius:.375rem; }
.rounded-lg { border-radius:.5rem; }
.rounded-xl { border-radius:.75rem; }
.text-sm { font-size:.875rem; }
.text-xs { font-size:.75rem; }
.font-bold      { font-weight:700; }
.font-semibold  { font-weight:600; }
.uppercase      { text-transform:uppercase; }
.transition     { transition:all .2s ease; }
.overflow-y-auto { overflow-y:auto; }
.space-y-2 > * + * { margin-top:.5rem; }
.space-y-4 > * + * { margin-top:1rem; }
.text-amber-400 { color:#fbbf24; }
.text-gray-300  { color:#d1d5db; }
.text-gray-400  { color:#9ca3af; }
.text-white     { color:#fff; }
.bg-neutral-800 { background:#262626; }
.bg-neutral-900 { background:#171717; }
.border-neutral-700 { border-color:#404040; }
.border-neutral-600 { border-color:#525252; }

/* ══════════════════════════════════════
   27. ANIMAÇÕES
══════════════════════════════════════ */
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.7; } }
@keyframes dropSuccess { 0% { transform:scale(1.04); box-shadow:0 0 28px rgba(34,197,94,.45); } 100% { transform:scale(1); box-shadow:none; } }
.drop-success { animation:dropSuccess .3s ease-out; }

/* ══════════════════════════════════════
   28. RESPONSIVO
══════════════════════════════════════ */
@media (max-width:1024px) {
  .wiki-body { grid-template-columns:200px 1fr; }
}
@media (max-width:768px) {
  .wiki-body { grid-template-columns:1fr; padding:1rem .75rem 3rem; gap:1.2rem; }
  .wiki-sidebar { position:relative; top:0; }
  header { padding:.5rem .85rem; flex-wrap:wrap; }
  .hero { padding:2.2rem 1rem 1.8rem; }
  .hero-emblem { width:62px; height:62px; }
  .article-card { padding:1.1rem; }
  #trello-board { gap:.65rem; padding:.75rem; }
  .trello-column { flex:0 0 268px; }
}
@media (max-width:640px) {
  .header-logo-name { font-size:1.1rem; }
}
@media (hover:none) and (pointer:coarse) {
  body { cursor:auto; }
  #custom-cursor, .cursor-trail { display:none; }
  .drag-handle { opacity:.75; font-size:1.4rem; }
  .trello-card:hover { transform:none; }
  .trello-card:active { transform:scale(.98); }
  .column-cards { -ms-overflow-style:none; scrollbar-width:none; }
  .column-cards::-webkit-scrollbar { display:none; }
}