/* ============================================================
   Central de Ajuda pública — Monado WP  (monado.com.br/ajuda)
   Cópia separada do help do app. Marca alinhada à landing.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --bg:#0a0f1c; --bg2:#131c2e; --bg3:#1e2a44;
  --surface:#0f1626; --surface2:#131c2e;
  --text:#f1f5f9; --text2:#94a3b8; --text-muted:#64748b;
  --accent:#0ea5e9; --accent2:#38bdf8; --accent-deep:#1a56db;
  --green:#22c55e; --green2:#16a34a; --green-bright:#4ade80;
  --yellow:#eab308; --danger:#ef4444;
  --border:rgba(148,163,184,.12);
  --border2:rgba(148,163,184,.22);
  --shadow:0 10px 40px -12px rgba(0,0,0,.6);
  --radius-sm:8px; --radius:12px; --radius-lg:16px;
  --code:#7dd3fc;
  --maxw:1180px;
}
[data-theme="light"]{
  --bg:#f6f8fb; --bg2:#eef2f7; --bg3:#e2e8f0;
  --surface:#ffffff; --surface2:#f8fafc;
  --text:#0f172a; --text2:#475569; --text-muted:#64748b;
  --accent:#0284c7; --accent2:#0ea5e9; --accent-deep:#1a56db;
  --green:#16a34a; --green-bright:#15803d;
  --border:rgba(15,23,42,.10);
  --border2:rgba(15,23,42,.16);
  --shadow:0 10px 30px -12px rgba(15,23,42,.18);
  --code:#0369a1;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.6; font-weight:400; letter-spacing:-0.004em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent2); text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
.serif{font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-0.01em}
.container{max-width:var(--maxw); margin:0 auto; padding:0 1.5rem}

/* ---------- Header ---------- */
header.top{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1.5rem; max-width:var(--maxw); margin:0 auto}
.brand{display:flex; align-items:center; gap:.7rem; font-weight:700; font-size:1.08rem; color:var(--text)}
.brand:hover{text-decoration:none}
.brand-logo{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg,var(--accent-deep),var(--accent));
  display:grid; place-items:center; color:#fff; font-weight:700; flex-shrink:0;
}
.brand small{display:block; font-size:.66rem; font-weight:500; color:var(--text-muted); letter-spacing:.04em; margin-top:-2px}
.nav-actions{display:flex; align-items:center; gap:.6rem}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.55rem 1.05rem; border-radius:10px; font-weight:600; font-size:.88rem;
  border:1px solid transparent; cursor:pointer; transition:transform .15s, box-shadow .2s, background .2s, border-color .2s;
  white-space:nowrap; font-family:inherit;
}
.btn:hover{text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--accent-deep),var(--accent)); color:#fff; box-shadow:0 4px 14px -2px rgba(14,165,233,.45)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 6px 20px -2px rgba(14,165,233,.6)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border2)}
.btn-ghost:hover{background:var(--bg2); border-color:var(--accent)}
.icon-btn{
  width:36px; height:36px; padding:0; border-radius:9px; background:transparent;
  border:1px solid var(--border2); color:var(--text2); display:grid; place-items:center; cursor:pointer;
}
.icon-btn:hover{color:var(--text); border-color:var(--accent)}

/* ---------- Hero ---------- */
.hero{
  text-align:center; padding:3.2rem 1.5rem 2.4rem;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(14,165,233,.16), transparent 55%),
    radial-gradient(ellipse at 80% 0%, rgba(34,197,94,.08), transparent 50%);
  border-bottom:1px solid var(--border);
}
.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem; padding:.32rem .8rem; margin-bottom:1.1rem;
  border:1px solid var(--border2); border-radius:999px; background:var(--surface);
  color:var(--accent2); font-size:.78rem; font-weight:500;
}
.hero-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green)}
.hero h1{margin:.2rem 0 .5rem; font-size:2.3rem; font-weight:700; letter-spacing:-0.02em; line-height:1.1}
.hero p.sub{margin:0 auto 1.6rem; max-width:620px; color:var(--text2); font-size:1.02rem}
.search-wrap{max-width:560px; margin:0 auto; position:relative}
.search-wrap svg{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none}
#help-search{
  width:100%; padding:.85rem 1.1rem .85rem 2.85rem; font-size:.95rem; font-family:inherit;
  border:1px solid var(--border2); border-radius:999px; background:var(--surface); color:var(--text);
  box-shadow:var(--shadow); transition:border-color .15s, box-shadow .15s;
}
#help-search::placeholder{color:var(--text-muted)}
#help-search:focus{outline:none; border-color:var(--accent); box-shadow:var(--shadow), 0 0 0 3px rgba(14,165,233,.18)}

/* ---------- Layout ---------- */
.layout{display:grid; grid-template-columns:280px 1fr; gap:2rem; max-width:var(--maxw); margin:2rem auto 4rem; padding:0 1.5rem; align-items:flex-start}
.sidebar{
  position:sticky; top:80px; max-height:calc(100vh - 100px); overflow-y:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.6rem;
}
.sidebar::-webkit-scrollbar{width:8px} .sidebar::-webkit-scrollbar-thumb{background:var(--border2); border-radius:8px}
.cat{margin-bottom:.4rem}
.cat-label{
  display:flex; align-items:center; gap:.5rem; padding:.6rem .7rem .35rem;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted);
}
.cat-label svg{opacity:.75; flex-shrink:0}
.cat ul{list-style:none; margin:0 0 0 .85rem; padding:0 0 0 .5rem; border-left:1px solid var(--border)}
.cat li a{
  display:block; padding:.38rem .7rem; font-size:.84rem; color:var(--text2);
  border-radius:7px; border-left:2px solid transparent; margin-left:-2px; transition:background .15s, color .15s, border-color .15s;
}
.cat li a:hover{background:var(--bg2); color:var(--text); text-decoration:none}
.cat li.active a{background:rgba(14,165,233,.12); color:var(--text); border-left-color:var(--accent); font-weight:600}

.content{min-width:0}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2rem 2.3rem; min-height:420px}

/* ---------- Home ---------- */
.home-intro{margin:0 0 1.6rem}
.home-intro h2{margin:0 0 .4rem; font-size:1.5rem; font-weight:700}
.home-intro p{margin:0; color:var(--text2)}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1rem}
.card{
  border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; cursor:pointer;
  background:var(--surface2); transition:transform .15s, border-color .15s, box-shadow .2s; text-align:left;
}
.card:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:0 8px 24px -10px rgba(14,165,233,.35)}
.card-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; margin-bottom:.8rem;
  background:rgba(14,165,233,.12); color:var(--accent2);
}
.card h3{margin:0 0 .25rem; font-size:.98rem; font-weight:600; color:var(--text)}
.card p{margin:0; font-size:.82rem; color:var(--text-muted); line-height:1.5}
.card .count{font-size:.72rem; color:var(--accent2); font-weight:600; margin-top:.55rem; display:block}

/* ---------- Article ---------- */
.breadcrumb{display:flex; align-items:center; gap:.5rem; font-size:.84rem; color:var(--text-muted); margin-bottom:1.4rem; flex-wrap:wrap}
.breadcrumb a{color:var(--accent2); cursor:pointer}
.breadcrumb .sep{opacity:.5}
.article{max-width:780px}
.article h2{margin:0 0 1rem; font-size:1.7rem; font-weight:700; letter-spacing:-0.02em; line-height:1.2}
.article h3{margin:1.8rem 0 .6rem; font-size:1.15rem; font-weight:600; color:var(--text)}
.article h4{margin:1.3rem 0 .4rem; font-size:1rem; font-weight:600; color:var(--text)}
.article p, .article li{font-size:.97rem; line-height:1.72; color:var(--text)}
.article ul, .article ol{padding-left:1.5rem; margin:.6rem 0}
.article li{margin-bottom:.4rem}
.article strong{color:var(--text); font-weight:650}
.article em{color:var(--text2)}
.article a{color:var(--accent2); text-decoration:underline; text-underline-offset:2px}
.article code{
  background:var(--bg2); padding:1px 6px; border-radius:5px; font-size:.86em;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; color:var(--code);
  border:1px solid var(--border);
}
.article pre{
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:1rem 1.1rem; overflow-x:auto; max-width:100%; white-space:pre-wrap; word-break:break-word;
  font-size:.86rem; line-height:1.55;
}
.article pre code{background:none; border:none; padding:0; color:var(--text2)}
.article table{border-collapse:collapse; width:100%; margin:1rem 0; font-size:.9rem; overflow:hidden; border-radius:var(--radius-sm)}
.article th, .article td{border:1px solid var(--border); padding:.55rem .75rem; text-align:left; vertical-align:top; white-space:normal}
.article th{background:var(--bg2); font-weight:600; color:var(--text)}
.article tr:nth-child(even) td{background:color-mix(in srgb, var(--bg2) 45%, transparent)}
.article img{border-radius:var(--radius-sm); border:1px solid var(--border)}
.article hr{border:none; border-top:1px solid var(--border); margin:1.8rem 0}
.article blockquote{margin:1rem 0; padding:.6rem 1rem; border-left:3px solid var(--accent); background:rgba(14,165,233,.06); border-radius:0 8px 8px 0; color:var(--text2)}

/* article footer nav (prev / next) */
.article-nav{display:flex; justify-content:space-between; gap:1rem; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border)}
.article-nav a{
  flex:1; padding:.85rem 1rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface2);
  font-size:.86rem; color:var(--text2); transition:border-color .15s, color .15s;
}
.article-nav a:hover{border-color:var(--accent); color:var(--text); text-decoration:none}
.article-nav a.next{text-align:right}
.article-nav a span{display:block; font-size:.7rem; color:var(--text-muted); margin-bottom:.15rem}

/* ---------- Mermaid diagrams ---------- */
.mermaid-wrap{
  margin:1.4rem 0; padding:1.2rem; background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); overflow-x:auto; text-align:center;
}
.mermaid-wrap .mermaid{display:inline-block; min-width:100%}
.mermaid-caption{display:block; margin-top:.6rem; font-size:.78rem; color:var(--text-muted); text-align:center}
.mermaid-wrap svg{max-width:100%; height:auto}

/* search "no results" + results group */
.empty{padding:1rem; font-size:.85rem; color:var(--text-muted)}

/* ---------- Footer ---------- */
footer.bottom{border-top:1px solid var(--border); background:var(--surface); margin-top:2rem}
.foot{max-width:var(--maxw); margin:0 auto; padding:2.2rem 1.5rem; display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; align-items:center}
.foot .brand{font-size:1rem}
.foot-links{display:flex; gap:1.4rem; flex-wrap:wrap}
.foot-links a{color:var(--text2); font-size:.88rem}
.foot-links a:hover{color:var(--text)}
.foot-legal{width:100%; border-top:1px solid var(--border); padding:1rem 1.5rem; max-width:var(--maxw); margin:0 auto; color:var(--text-muted); font-size:.78rem; text-align:center}

/* ---------- Mobile ---------- */
.sidebar-toggle{display:none}
@media (max-width:900px){
  .layout{grid-template-columns:1fr; gap:1rem; margin-top:1rem}
  .sidebar{position:static; max-height:none; order:2}
  .sidebar.collapsed .cat{display:none}
  .sidebar-toggle{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    padding:.7rem .9rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    color:var(--text); font-weight:600; font-size:.9rem; cursor:pointer; margin-bottom:.5rem; font-family:inherit;
  }
  .panel{padding:1.4rem 1.2rem}
  .hero h1{font-size:1.8rem}
  .article h2{font-size:1.4rem}
  .article-nav{flex-direction:column}
}
@media (max-width:560px){
  .nav .brand small{display:none}
  .nav-actions .btn-label{display:none}
}