/* Painel de navegação do lado esquerdo (sidebar.js). Aberto = ícone + nome; fechado = só o ícone. Tema "Terminal": sem bordas, o ativo ganha a barra verde. */
:root { --sbw: 232px; }
:root[data-sn="closed"] { --sbw: 64px; }
body { padding-left: var(--sbw); transition: padding-left .18s ease; }

.sn { position: fixed; inset: 0 auto 0 0; width: var(--sbw); z-index: 30; background: var(--s0, #000); display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; transition: width .18s ease, transform .2s ease; box-shadow: 1px 0 0 var(--s2, #151515); scrollbar-width: none; }
.sn::-webkit-scrollbar { display: none; }
.sn-top { display: flex; align-items: center; gap: 6px; height: 64px; padding: 0 12px; flex: none; }
.sn-logo { display: flex; align-items: center; gap: 10px; color: var(--text, #f2f2f2); text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: -.01em; min-width: 0; flex: 1; }
.sn-logo em { font-style: normal; color: var(--muted, #8f8f8f); font-weight: 500; }
.sn-mark { width: 40px; height: 40px; flex: none; background: #000; display: grid; place-items: center; }
.sn-mark svg { width: 26px; height: 26px; }
.sn-name { white-space: nowrap; overflow: hidden; }
.sn-collapse { appearance: none; border: 0; background: transparent; color: var(--muted, #8f8f8f); width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; flex: none; }
.sn-collapse:hover { background: var(--s2, #151515); color: #fff; }
.sn-collapse svg { width: 18px; height: 18px; transition: transform .18s ease; }
:root[data-sn="closed"] .sn-collapse svg { transform: rotate(180deg); }

.sn-list { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 10px; flex: 1; }
.sn-item { position: relative; display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 12px; color: var(--muted, #8f8f8f); text-decoration: none; font-size: 14.5px; font-weight: 600; white-space: nowrap; flex: none; transition: background .12s, color .12s; }
.sn-item svg { width: 20px; height: 20px; flex: none; }
.sn-item:hover { background: var(--s2, #151515); color: #fff; }
.sn-item[aria-current="page"] { background: var(--s2, #151515); color: #fff; box-shadow: inset 3px 0 0 var(--green, #2478e0); }
.sn-item[aria-current="page"] svg { color: var(--green, #2478e0); }
.sn-item[hidden] { display: none; }
/* cartão da conta (só com carteira conectada) */
.sn-account { display: flex; align-items: center; gap: 12px; margin: 2px 10px 6px; padding: 8px 10px; color: var(--text, #f2f2f2); text-decoration: none; flex: none; min-width: 0; transition: background .12s; }
.sn-account[hidden] { display: none; }
.sn-account:hover { background: var(--s2, #151515); }
.sn-account[aria-current="page"] { background: var(--s2, #151515); box-shadow: inset 3px 0 0 var(--green, #2478e0); }
.sn-av { width: 38px; height: 38px; flex: none; display: grid; place-items: center; overflow: hidden; background: #2a6f64; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.sn-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sn-who { display: grid; gap: 2px; min-width: 0; }
.sn-who-name { font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-who-addr { font: 12px var(--mono, monospace); color: var(--muted, #8f8f8f); white-space: nowrap; }
.sn-label { overflow: hidden; text-overflow: ellipsis; }
.sn-badge { margin-left: auto; font: 700 9px/1 var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; background: var(--green-bg, rgba(36, 120, 224, .12)); color: var(--green, #2478e0); }
.sn-sep { height: 8px; flex: none; }
.sn-group { margin: 6px 12px 4px; font: 700 10.5px/1 var(--mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--faint, #5e5e5e); white-space: nowrap; overflow: hidden; }
.sn-create { margin-top: 10px; background: var(--green, #2478e0); color: var(--green-ink, #ffffff); justify-content: flex-start; }
.sn-create:hover { background: var(--green-2, #4c93ee); color: var(--green-ink, #ffffff); }
.sn-bottom { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 14px; flex: none; }

/* fechado: só os ícones (o nome aparece na dica ao passar o mouse) */
:root[data-sn="closed"] .sn-name, :root[data-sn="closed"] .sn-label, :root[data-sn="closed"] .sn-badge, :root[data-sn="closed"] .sn-group, :root[data-sn="closed"] .sn-who { display: none; }
:root[data-sn="closed"] .sn-account { justify-content: center; padding: 6px 0; }
:root[data-sn="closed"] .sn-top { flex-direction: column; height: auto; padding: 10px 12px 6px; gap: 6px; }
:root[data-sn="closed"] .sn-logo { flex: none; }
:root[data-sn="closed"] .sn-item { justify-content: center; padding: 0; }
:root[data-sn="closed"] .sn-sep { height: 1px; background: var(--s2, #151515); margin: 6px 6px; }

/* com o painel, o logo do cabeçalho some (já está no painel) */
.topbar .brand { display: none; }
.sn-burger { display: none; appearance: none; border: 0; background: var(--s2, #151515); color: #fff; width: 38px; height: 38px; place-items: center; cursor: pointer; flex: none; }
.sn-burger svg { width: 20px; height: 20px; }
.sn-backdrop { display: none; }

/* celular e telas estreitas: o painel vira uma gaveta */
@media (max-width: 900px) {
  :root, :root[data-sn="closed"] { --sbw: 0px; }
  body { padding-left: 0; }
  .sn { width: 250px; transform: translateX(-100%); z-index: 60; }
  :root[data-sn="closed"] .sn-name, :root[data-sn="closed"] .sn-label, :root[data-sn="closed"] .sn-group { display: initial; }
  :root[data-sn="closed"] .sn-who { display: grid; }
  :root[data-sn="closed"] .sn-account { justify-content: flex-start; padding: 8px 10px; }
  :root[data-sn="closed"] .sn-badge { display: inline; }
  :root[data-sn="closed"] .sn-top { flex-direction: row; height: 64px; padding: 0 12px; }
  :root[data-sn="closed"] .sn-item { justify-content: flex-start; padding: 0 12px; }
  :root[data-sn="closed"] .sn-sep { height: 8px; background: none; margin: 0; }
  .sn-collapse { display: none; }
  .sn-drawer .sn { transform: none; box-shadow: 0 0 60px rgba(0, 0, 0, .8); }
  .sn-drawer .sn-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 55; }
  .sn-burger { display: grid; }
  /* cabeçalho no celular: menu, busca (só o ícone) e, à direita, o seletor Manual | Instant e a conta. A marca fica na gaveta. */
  .topbar .brand { display: none; }
  .topbar .wrap.topbar-inner { gap: 8px; }
  .topbar .search-trigger { flex: none; width: 38px; min-width: 38px; padding: 0; justify-content: center; }
  .topbar .topbar-right { margin-left: auto; gap: 6px; min-width: 0; }
}
@media (max-width: 640px) {
  .topbar .wrap.topbar-inner { width: calc(100% - 20px); }
}
@media (max-width: 480px) {
  .topbar .mode-switch .mode-help { display: none; } /* o "?" explica Manual e Instant; sem espaço aqui, está na documentação */
}
@media (max-width: 400px) {
  .topbar .acct-sol { display: none; }
}
@media (max-width: 340px) {
  .topbar .mode-switch button { padding: 0 4px; font-size: 11px; gap: 3px; }
  .topbar .acct-btn { padding-left: 4px; gap: 5px; }
  .topbar #connect { padding: 0 7px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body, .sn, .sn-collapse svg { transition: none; }
}