/* Estilo compartilhado das páginas /conectar e /docs (mesma identidade do Studio: azul-marinho + azul #0a5cff) */
:root { --bg:#05070f; --panel:#0b1020; --raise:#121a33; --line:#1a2440; --line2:#2a3868; --text:#eef1fb; --muted:#8792b8; --faint:#566290;
  --blue:#0a5cff; --blue-hi:#2f78ff; --blue-lo:#0048f8; --soft:#8db4ff; --ok:#4fb58a; --bad:#f0707a;
  --head:'Space Grotesk',Inter,system-ui,sans-serif; --body:Inter,system-ui,'Segoe UI',sans-serif; --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html,body { margin:0; }
body { background:var(--bg); color:var(--text); font:15px/1.6 var(--body); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button { font:inherit; color:inherit; cursor:pointer; }
img { display:block; }

.top { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:28px; padding:0 28px; height:62px; background:rgba(5,7,15,.88); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; font:600 18px var(--head); letter-spacing:-.01em; flex:none; }
.brand img { width:28px; height:28px; object-fit:contain; }
.brand i { font-style:normal; color:var(--blue-hi); } .brand span { color:var(--muted); font-weight:500; }
.top nav { display:flex; gap:4px; flex:1; }
.top nav a { text-decoration:none; color:var(--muted); padding:8px 13px; border-radius:9px; font-size:14.5px; }
.top nav a:hover { color:var(--text); background:rgba(255,255,255,.05); }
.top nav a.on { color:var(--soft); }
.top .side { display:flex; gap:8px; align-items:center; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid var(--line2); background:var(--raise); color:var(--text); border-radius:11px; padding:9px 16px; font-weight:500; font-size:14.5px; text-decoration:none; transition:background .15s,border-color .15s,transform .1s; }
.btn:hover { border-color:var(--muted); }
.btn:active { transform:translateY(1px); }
.btn.blue { background:var(--blue); border-color:var(--blue); color:#fff; } .btn.blue:hover { background:var(--blue-lo); border-color:var(--blue-lo); }
.btn.white { background:#f4f6ff; border-color:#f4f6ff; color:#0a1230; font-weight:600; } .btn.white:hover { background:#fff; }
.btn.big { padding:15px 24px; font-size:16.5px; border-radius:14px; }
.btn img { width:20px; height:20px; }

code, .mono { font-family:var(--mono); }
.code { position:relative; background:#070b17; border:1px solid var(--line); border-radius:12px; margin:10px 0 16px; }
.code .lab { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px 8px 14px; border-bottom:1px solid var(--line); color:var(--muted); font-size:12.5px; }
.code pre { margin:0; padding:14px; overflow-x:auto; font:13px/1.65 var(--mono); color:#d5def8; white-space:pre; scrollbar-width:thin; scrollbar-color:var(--line2) transparent; }
.code pre.wrap { white-space:pre-wrap; word-break:break-word; }
.cp { background:var(--raise); border:1px solid var(--line2); color:var(--text); border-radius:8px; padding:4px 11px; font-size:12.5px; }
.cp:hover { border-color:var(--muted); } .cp.done { color:var(--ok); border-color:var(--ok); }
.pill { display:inline-block; font:12px var(--mono); background:var(--raise); border:1px solid var(--line2); border-radius:7px; padding:2px 8px; color:var(--soft); }
.note { background:rgba(10,92,255,.1); border:1px solid rgba(47,120,255,.35); border-radius:12px; padding:12px 14px; font-size:14px; color:#c9d8ff; margin:12px 0; }
.note.warn { background:rgba(240,170,60,.08); border-color:rgba(240,170,60,.35); color:#f0d6a8; }
.foot { margin-top:80px; border-top:1px solid var(--line); padding:28px; text-align:center; color:var(--faint); font-size:13px; }
.foot a { color:var(--muted); margin:0 8px; }

@media (max-width:760px) { .top { padding:0 14px; gap:10px; } .top nav { display:none; } .top .side { margin-left:auto; } }