/* Ideias Club — tema moderno/tech */
:root {
  --bg:#edf1f6;
  --card:#ffffff;
  --ink:#0f1e2e;
  --mut:#5b6b7f;
  --line:#dfe7ef;
  --acc:#0d9488;
  --acc2:#06b6d4;
  --navy:#0a1929;
  --grad:linear-gradient(135deg, #0d9488 0%, #06b6d4 100%);
  --ring:0 0 0 3px rgba(6,182,212,.22);
  --shadow:0 1px 2px rgba(15,30,46,.06), 0 8px 24px -12px rgba(15,30,46,.18);
  --shadow-lg:0 2px 4px rgba(15,30,46,.06), 0 16px 40px -12px rgba(13,148,136,.28);
  --r:16px;
  --t:all .18s ease;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; color:var(--ink);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:
    radial-gradient(900px 320px at 85% -80px, rgba(6,182,212,.14), transparent 60%),
    radial-gradient(700px 300px at 10% -60px, rgba(13,148,136,.12), transparent 60%),
    var(--bg);
  min-height:100vh;
}
.wrap { max-width:780px; margin:0 auto; padding:0 18px; }

/* Topo */
.top {
  color:#fff; padding:30px 0 24px; position:relative; overflow:hidden;
  background:
    radial-gradient(600px 200px at 80% 0%, rgba(6,182,212,.25), transparent 60%),
    linear-gradient(160deg, #0a1929 30%, #0c2b33 100%);
  border-bottom:1px solid rgba(6,182,212,.25);
}
.top h1 { margin:0 0 4px; font-size:1.75rem; letter-spacing:-.02em; }
.top-row { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; position:relative; }
.brand { color:#fff; text-decoration:none; }
.brand::after { content:""; display:block; height:3px; width:56px; border-radius:99px; background:var(--grad); margin-top:6px; }
.sub { margin:0; color:#a9bccb; }

/* Botões */
button, .btn-ghost, .btn-primary {
  font:inherit; font-weight:600; cursor:pointer; text-decoration:none;
  display:inline-block; border-radius:12px; padding:11px 18px;
  border:1px solid transparent; transition:var(--t);
}
button[type="submit"], .btn-primary {
  background:var(--grad); color:#fff; border:0;
  box-shadow:0 6px 18px -6px rgba(13,148,136,.55);
}
button[type="submit"]:hover, .btn-primary:hover { transform:translateY(-1px); box-shadow:var(--shadow-lg); filter:brightness(1.06); }
button[type="submit"]:active, .btn-primary:active { transform:translateY(0); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline:none; box-shadow:var(--ring);
}
/* Ghost corrigido: texto escuro visível sobre fundo claro */
.btn-ghost { background:rgba(255,255,255,.75); color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover { border-color:var(--acc); color:#0b5563; transform:translateY(-1px); }
.btn-danger { background:linear-gradient(135deg,#b91c1c,#ef4444); color:#fff; border:0; }
.btn-sm { padding:7px 14px; font-size:.9rem; border-radius:999px; }

/* Busca — barra espaçosa em pílula */
.search {
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:6px 6px 6px 20px; margin:22px 0 4px;
  box-shadow:var(--shadow); transition:var(--t);
}
.search:focus-within { border-color:var(--acc2); box-shadow:var(--ring), var(--shadow); }
.search input[type="search"] {
  flex:1; min-width:0; border:0; background:transparent; box-shadow:none;
  padding:10px 4px; font:inherit; color:var(--ink);
}
.search input[type="search"]:focus { box-shadow:none; }
.search button[type="submit"] { border-radius:999px; white-space:nowrap; }

/* Filtros */
.chips { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 6px; }
.chip {
  border:1px solid var(--line); background:rgba(255,255,255,.8); color:var(--ink);
  border-radius:999px; padding:8px 16px; font-size:.9rem; font-weight:500;
  text-decoration:none; transition:var(--t);
}
.chip:hover { transform:translateY(-1px); border-color:var(--acc); box-shadow:var(--shadow); }
.chip.active { background:var(--navy); color:#fff; border-color:var(--navy); box-shadow:var(--shadow); }

/* Cards */
.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; margin:18px 0; box-shadow:var(--shadow);
  animation:rise .35s ease both; transition:var(--t);
}
section > .card:hover, article.card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.card h2, .card h3 { margin-top:0; letter-spacing:-.01em; }
.card h3 a { color:var(--ink); text-decoration:none; }
.card h3 a:hover { color:#0b5563; }
@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* Campos */
input, textarea, select {
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:12px;
  font:inherit; background:#fff; color:var(--ink); transition:var(--t);
}
input:focus, textarea:focus, select:focus { border-color:var(--acc2); box-shadow:var(--ring); }
textarea { resize:vertical; }
label { display:block; margin:14px 0; font-weight:600; }
label input, label textarea { font-weight:400; margin-top:8px; }
.badge {
  display:inline-block; border-radius:999px; padding:3px 13px;
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
  color:#0b5563; background:linear-gradient(135deg,#ccfbf1,#cffafe);
  border:1px solid rgba(13,148,136,.3);
}
.meta { color:var(--mut); font-size:.9rem; }
.desc { white-space:pre-wrap; }

/* Votos */
.votes { display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; }
.votes form { margin:0; }
.vote-btn { background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:11px 20px; }
.vote-btn:hover { border-color:var(--acc); transform:translateY(-1px); box-shadow:var(--shadow); }
.vote-btn.voted { background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 6px 18px -6px rgba(13,148,136,.55); }
.mod-row { display:flex; gap:10px; }

/* Feedback */
.flash { padding:13px 16px; border-radius:12px; box-shadow:var(--shadow); animation:slidein .25s ease both; }
@keyframes slidein { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.flash.ok { background:#d9fbe8; border:1px solid #6ee7b7; color:#065f46; }
.flash.err { background:#fee4e4; border:1px solid #fca5a5; color:#7f1d1d; }
.empty { color:var(--mut); }
.comment { border-top:1px solid var(--line); padding:14px 2px; }
.pager { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 0 30px; }
.pager a { background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 18px; text-decoration:none; transition:var(--t); }
.pager a:hover { border-color:var(--acc); transform:translateY(-1px); }
.hint { color:var(--mut); font-size:.9rem; }
.hp { position:absolute !important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.foot { color:var(--mut); font-size:.85rem; padding:20px 18px 44px; text-align:center; }
a { color:#0b7d74; }

/* Home do Ideias Club */
.hero-home {
  margin:20px 0 6px; padding:30px 26px 24px; border-radius:20px; color:#fff;
  position:relative; overflow:hidden;
  background:
    radial-gradient(500px 200px at 85% -20%, rgba(6,182,212,.35), transparent 60%),
    radial-gradient(400px 200px at 10% 110%, rgba(13,148,136,.35), transparent 60%),
    linear-gradient(155deg, #0a1929 20%, #0d3038 100%);
  border:1px solid rgba(6,182,212,.3);
  box-shadow:var(--shadow-lg);
  animation:rise .4s ease both;
}
.eyebrow {
  margin:0 0 8px; font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#67e8f9;
}
.hero-home h2 { margin:0 0 8px; font-size:2rem; line-height:1.15; letter-spacing:-.02em; }
.grad-text { background:linear-gradient(120deg,#5eead4,#22d3ee); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub { margin:0 0 18px; color:#b9cbd9; max-width:52ch; }
.hero-ctas { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 20px; }
.hero-ctas .btn-ghost { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.25); }
.hero-ctas .btn-ghost:hover { border-color:#22d3ee; color:#fff; }
.hero-stats { display:flex; gap:26px; margin:0; padding:18px 0 0; border-top:1px solid rgba(255,255,255,.12); }
.hero-stats div { margin:0; }
.hero-stats dd { margin:0; font-size:1.5rem; font-weight:800; }
.hero-stats dt { font-size:.82rem; color:#8fa6b8; }
.section-title { font-size:1.25rem; margin:26px 0 4px; letter-spacing:-.01em; }
.top-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.top-card { margin:12px 0; padding:16px; position:relative; overflow:hidden; }
.top-card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad); }
.top-card h3 { font-size:1rem; line-height:1.4; }
.top-card p { margin:.4em 0 0; }

/* Detalhe da ideia */
.crumbs { margin:16px 0 0; }
.hero { position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--grad); }
.hero-title { font-size:1.7rem; margin:.15em 0 .3em; line-height:1.25; letter-spacing:-.02em; }
.hero-tags { margin:0; }
.signals { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:16px 0; }
.signal {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 6px; text-align:center; box-shadow:var(--shadow);
  transition:var(--t); animation:rise .35s ease both;
}
.signal:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.signal-ico { display:block; font-size:1.25rem; }
.signal-num {
  display:block; font-size:1.3rem; font-weight:800;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.signal-label { color:var(--mut); font-size:.82rem; }
.cta { text-align:center; }
.cta .votes { justify-content:center; }

/* Corpo rico */
.md { overflow-wrap:break-word; }
.md > :first-child { margin-top:0; }
.md > :last-child { margin-bottom:0; }
.md h3 { font-size:1.2rem; margin:1.1em 0 .4em; }
.md h4 { font-size:1.05rem; margin:1em 0 .35em; }
.md p { margin:.6em 0; }
.md ul, .md ol { margin:.6em 0; padding-left:1.5em; }
.md li + li { margin-top:.25em; }
.md blockquote { margin:.8em 0; padding:.6em 1em; border-left:4px solid var(--acc); background:var(--bg); border-radius:0 10px 10px 0; }
.md code { background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:.1em .4em; font-size:.9em; }
.md pre { background:#0a1929; color:#e8eef2; border-radius:12px; padding:12px 14px; overflow-x:auto; border:1px solid rgba(6,182,212,.25); }
.md pre code { background:none; border:0; padding:0; color:inherit; }
.md a { overflow-wrap:anywhere; }

/* Editor */
.toolbar { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.toolbar button {
  background:#fff; color:var(--ink); border:1px solid var(--line);
  border-radius:10px; padding:7px 13px; font:inherit; cursor:pointer; transition:var(--t);
}
.toolbar button:hover { border-color:var(--acc); transform:translateY(-1px); box-shadow:var(--shadow); }
.md-help { margin:4px 0 12px; font-size:.9rem; color:var(--mut); }
.md-help code { background:#fff; border:1px solid var(--line); border-radius:6px; padding:0 .35em; }

@media (max-width:520px) {
  .hero-title { font-size:1.35rem; }
  .signal-num { font-size:1.05rem; }
  .top h1 { font-size:1.45rem; }
  .hero-home { padding:24px 20px 20px; }
  .hero-home h2 { font-size:1.55rem; }
  .top-grid { grid-template-columns:1fr; }
  .hero-stats { gap:20px; }
}

/* Listas locais (Favoritas / Mais tarde) */
.chips-sep { width:1px; align-self:stretch; background:var(--line); margin:2px 4px; border-radius:1px; }
.chipbtn { font:inherit; cursor:pointer; }
.chipbtn.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.hero-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.save-row { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.save-btn {
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; font-size:.85rem; font-weight:600; color:var(--mut);
  cursor:pointer; transition:var(--t);
}
.save-btn:hover { border-color:var(--acc); color:var(--ink); transform:translateY(-1px); }
.save-btn[data-save="fav"].active {
  background:linear-gradient(135deg,#f59e0b,#f97316); color:#fff; border-color:transparent;
  box-shadow:0 6px 16px -6px rgba(249,115,22,.6);
}
.save-btn[data-save="later"].active {
  background:linear-gradient(135deg,#2563eb,#06b6d4); color:#fff; border-color:transparent;
  box-shadow:0 6px 16px -6px rgba(37,99,235,.6);
}
.is-hidden { display:none !important; }

/* Painel de listas (salvar com nome próprio) */
.mychips { display:contents; }
.save-wrap { position:relative; }
.save-main { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.save-main.active {
  background:linear-gradient(135deg,#0d9488,#06b6d4); color:#fff; border-color:transparent;
  box-shadow:0 6px 16px -6px rgba(13,148,136,.6);
}
.save-panel {
  margin-top:8px; background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; box-shadow:var(--shadow-lg); animation:slidein .2s ease both;
}
.save-rowline {
  display:flex; align-items:center; gap:8px; margin:0; padding:7px 2px;
  font-weight:500; cursor:pointer; border-radius:8px;
}
.save-rowline:hover { background:var(--bg); }
.save-rowline input[type="checkbox"] { width:auto; accent-color:var(--acc); margin:0; }
.save-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.save-count { color:var(--mut); font-size:.85rem; }
.save-hint { color:var(--mut); font-size:.9rem; margin:4px 0 8px; }
.mini-btn {
  background:#fff; border:1px solid var(--line); border-radius:8px; color:var(--mut);
  padding:3px 8px; font-size:.85rem; line-height:1.4; cursor:pointer; transition:var(--t);
}
.mini-btn:hover { border-color:var(--acc); color:var(--ink); }
.mini-danger:hover { border-color:#ef4444; color:#b91c1c; }
.save-new { display:flex; gap:8px; margin-top:8px; }
.save-new .save-input { flex:1; padding:8px 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
}