/* Componentes da direcao "Azul eletrico" (spec 2026-10-29-visual-novo), carregado DEPOIS do
   base.css, do shell-ga.css e do app.css: o que esta aqui vence por ordem, sem !important.
   As cores vem todas dos tokens (base.css e shell-ga.css); este arquivo so muda forma.
   Referencia visual: os mockups aprovados em .superpowers/brainstorm/13932-1793272479/. */

body { font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }

/* ---------- Botoes: pilula. Primario preto, secundario claro. ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    border: 0; border-radius: 999px; padding: .62rem 1.15rem;
    background: var(--botao); color: var(--botao-texto);
    font-family: inherit; font-weight: 700; font-size: .9rem; line-height: 1.2;
    cursor: pointer; text-decoration: none; transition: background .12s ease, transform .08s ease;
}
.btn:hover { background: var(--botao-hover); color: var(--botao-texto); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--botao); color: var(--botao-texto); }
.btn-secondary { background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.btn-secondary:hover { background: var(--accent-soft); color: var(--text); }
.btn-destaque { background: var(--accent); color: #fff; }
.btn-destaque:hover { background: var(--accent-hover); color: #fff; }
.btn-icone { width: 36px; height: 36px; padding: 0; border-radius: 50%; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }

/* ---------- Campos: sem borda, fundo claro, cantos de 12px ---------- */
.form-group label { font-size: .82rem; font-weight: 600; color: var(--text-muted); }
.form-group input,
.form-group select,
.form-group textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], input[type="date"],
select, textarea {
    border: 0; border-radius: var(--raio-campo); background: var(--input-bg); color: var(--text);
    padding: .72rem .85rem; font: inherit; box-shadow: inset 0 0 0 1px transparent;
    transition: box-shadow .12s ease, background .12s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
input:focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); background: var(--card); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* Campo com rotulo dentro (painel "Titulo e bio"). */
.campo { background: var(--input-bg); border-radius: var(--raio-campo); padding: .55rem .85rem .6rem; transition: box-shadow .12s ease; }
.campo:focus-within { box-shadow: inset 0 0 0 2px var(--accent); background: var(--card); }
.campo label { display: block; font-size: .74rem; font-weight: 600; color: var(--text-muted); margin-bottom: .1rem; }
.campo input, .campo textarea { width: 100%; border: 0; background: transparent; padding: 0; box-shadow: none !important; font-size: .95rem; }
.campo textarea { resize: vertical; min-height: 4.5em; }
.contador { text-align: right; font-size: .75rem; color: var(--text-muted); margin: .25rem .2rem .8rem; font-variant-numeric: tabular-nums; }
.contador.passou { color: #d93025; font-weight: 700; }

/* ---------- Cartoes ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--raio-cartao); box-shadow: none; padding: 1.2rem 1.3rem; }
.card h2 { font-size: 1.02rem; font-weight: 800; margin: 0 0 .8rem; }
.cartao-linha { border-radius: var(--raio-cartao); }
.badge { border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .72rem; padding: .15rem .5rem; }
.vazio { border-radius: var(--raio-cartao); }

/* ---------- Shell: menu claro, item ativo em pilula azul suave ---------- */
.shell-ga .sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); }
.shell-ga .sidebar-nav a { border-radius: 10px; font-weight: 500; }
.shell-ga .sidebar-nav a.active { background: var(--sidebar-bg-active); color: var(--accent); font-weight: 700; }
.shell-ga .sidebar-nav a.active::before { display: none; }
.shell-ga .brand .brand-name { font-weight: 800; letter-spacing: -.01em; }
.shell-ga .topbar { background: transparent; border-bottom: 0; }
.shell-ga .page-title { font-weight: 800; letter-spacing: -.02em; }
.acesso-marca .brand-mark-logo { width: 30px; height: 30px; }

/* ---------- Paineis laterais (nav-drawer.js) ----------
   Diferente do Uplift (que cobre a area de conteudo inteira): aqui o painel e estreito,
   ancorado a direita, com veu escuro atras, como os mockups aprovados. Cada nivel a mais
   empilha 32px para a esquerda, deixando a borda do de baixo visivel. */
.drawer-pilha { position: fixed; inset: 0; pointer-events: none; z-index: 60; background: rgba(22, 23, 29, 0); transition: background .18s ease; }
body.com-drawer .drawer-pilha { pointer-events: auto; background: rgba(22, 23, 29, .28); }
.drawer {
    position: absolute; top: 0; bottom: 0; right: 0; width: min(460px, 100vw);
    background: var(--card); border-radius: 20px 0 0 20px; box-shadow: -12px 0 36px rgba(22, 23, 29, .16);
    display: flex; flex-direction: column; transform: translateX(105%); transition: transform .2s ease;
}
.drawer.aberto { transform: translateX(0); }
.drawer:nth-child(2) { right: 32px; } .drawer:nth-child(3) { right: 64px; } .drawer:nth-child(n+4) { right: 96px; }
.drawer-topo { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.1rem 1.3rem .6rem; flex-shrink: 0; }
.drawer-titulo { margin: 0; font-size: 1.05rem; font-weight: 800; flex: 1; text-align: center; }
.drawer-topo::before { content: ""; width: 32px; flex: none; }
.drawer-fechar { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--bg); color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer; flex: none; }
.drawer-fechar:hover { background: var(--accent-soft); }
.drawer-corpo { padding: .6rem 1.3rem 1.4rem; overflow-y: auto; flex: 1; }
.drawer-corpo .card { border: 0; padding: 0; background: transparent; }
.drawer-corpo .page-head { display: none; }
@media (max-width: 768px) {
    .drawer, .drawer:nth-child(n) { right: 0; width: 100vw; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-pilha { transition: none; } }

/* ---------- Menu ---------- */
.seletor-conta { display: flex; align-items: center; gap: .55rem; margin: .2rem .7rem .9rem; padding: .5rem .6rem; border-radius: 12px; background: var(--bg); color: var(--text); text-decoration: none; font-weight: 700; font-size: .88rem; }
.seletor-conta:hover { background: var(--accent-soft); text-decoration: none; }
.seletor-conta-inicial { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .78rem; flex: none; }
.seletor-conta-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seletor-conta-seta { color: var(--text-muted); }
.nav-secao { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 1rem .9rem .3rem; }
.sidebar-acoes { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; }
.sidebar-acoes .sair-form { margin-left: auto; }
.sidebar-acoes .sair-form button { width: auto; }
@media (min-width: 769px) { .shell-ga .topbar { display: none; } }

/* ---------- Editor: o menu recolhe e entra o trilho ---------- */
@media (min-width: 769px) {
    body.no-editor .sidebar { position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; transform: translateX(-105%); transition: transform .18s ease; box-shadow: 12px 0 36px rgba(22, 23, 29, .14); }
    body.no-editor.menu-aberto .sidebar { transform: none; }
    body.no-editor .main { margin-left: 0; }
}
.editor-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.trilho { display: flex; align-items: center; gap: .35rem; }
.trilho-menu { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.trilho-item { display: flex; align-items: center; gap: .45rem; padding: .5rem .85rem .5rem .5rem; border-radius: 999px; color: var(--text-muted); font-weight: 600; font-size: .88rem; text-decoration: none; }
.trilho-item:hover { background: var(--card); color: var(--text); text-decoration: none; }
.trilho-icone { width: 30px; height: 30px; border-radius: 50%; background: var(--card); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--border); }
.trilho-item.ativo { color: var(--text); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.trilho-item.ativo .trilho-icone { background: var(--botao); color: var(--botao-texto); box-shadow: none; }
@media (max-width: 768px) {
    .trilho { overflow-x: auto; width: 100%; }
    .trilho-menu { display: none; }
}
.editor-endereco { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.pilula-endereco { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .55rem .95rem; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); color: var(--text); font-weight: 600; font-size: .88rem; text-decoration: none; }
.pilula-endereco:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--accent); }
.copiado { background: var(--accent) !important; color: #fff !important; }

/* ---------- Inicio ---------- */
.inicio { max-width: 1040px; margin: 0 auto; }
.inicio-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.2rem; border-bottom: 1px solid var(--border); margin-bottom: 1.4rem; }
.inicio-topo h1 { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; }
.inicio-secao { font-size: 1.1rem; font-weight: 800; margin: 1.6rem 0 .8rem; }
.inicio-paginas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 270px)); gap: 1rem; }
.pagina-card { background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: .75rem; display: flex; flex-direction: column; gap: .7rem; text-decoration: none; color: var(--text); }
.pagina-card-capa { height: 190px; border-radius: 16px; background: linear-gradient(140deg, var(--accent-soft), var(--bg) 70%); display: flex; align-items: center; justify-content: center; }
.pagina-card-capa img, .pagina-card-inicial { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; background: var(--card); box-shadow: 0 6px 20px rgba(47, 91, 255, .15); }
.pagina-card-inicial { display: flex; align-items: center; justify-content: center; font-size: 2.6rem; font-weight: 800; color: var(--accent); }
.pagina-card-rodape { display: flex; align-items: center; gap: .45rem; padding: 0 .2rem .2rem; }
.pagina-card-texto { flex: 1; min-width: 0; }
.pagina-card-titulo { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pagina-card-sub { font-size: .82rem; color: var(--text-muted); }
.pagina-card-nova { align-items: center; justify-content: center; min-height: 260px; border-style: dashed; background: transparent; color: var(--text-muted); font-weight: 700; }
.pagina-card-nova:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pagina-card-mais { width: 52px; height: 52px; border-radius: 50%; background: var(--botao); color: var(--botao-texto); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.inicio-semana { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.inicio-destaque { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--botao); color: var(--botao-texto); border-radius: 20px; padding: 1.2rem 1.4rem; }
.inicio-destaque strong { font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 800; letter-spacing: -.01em; }
.inicio-destaque a { color: #9fb3ff; font-weight: 700; }
:root[data-theme="dark"] .inicio-destaque a { color: #2f5bff; }
@media (max-width: 640px) { .inicio-semana { grid-template-columns: 1fr; } }
.numero-card { border-radius: 18px; }

/* ---------- Editor > Conteudo (mockup telas-v1) ---------- */
.editor-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 1100px) {
    .editor-grade { grid-template-columns: minmax(0, 640px) 340px; justify-content: center; }
    .editor-ver-previa { display: none; }
}
.editor-conteudo { background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 1.4rem 1.4rem 1.6rem; min-width: 0; }
.editor-cabecalho { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.1rem; }
.editor-foto { width: 64px; height: 64px; border-radius: 50%; flex: none; overflow: hidden; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; text-decoration: none; }
.editor-foto img { width: 100%; height: 100%; object-fit: cover; }
.editor-foto:hover { box-shadow: 0 0 0 3px var(--accent-soft); text-decoration: none; }
.editor-identidade { min-width: 0; flex: 1; }
.editor-titulo { display: inline-block; font-weight: 800; font-size: 1.1rem; color: var(--text); text-decoration: none; }
.editor-titulo span { color: var(--text-muted); font-size: .85rem; opacity: 0; transition: opacity .12s; }
.editor-titulo:hover span { opacity: 1; }
.editor-bio { display: block; color: var(--text-muted); font-size: .9rem; margin-top: .15rem; text-decoration: none; overflow-wrap: anywhere; }
.editor-titulo:hover, .editor-bio:hover { text-decoration: none; color: var(--accent); }
.editor-redes { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; }
.editor-rede { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none; }
.editor-rede:hover { background: var(--bg); text-decoration: none; }
.editor-rede-mais { box-shadow: inset 0 0 0 1.5px var(--border); color: var(--text-muted); font-size: 1.1rem; font-weight: 700; }
.editor-acoes { display: grid; grid-template-columns: 1fr 1.6fr; gap: .6rem; margin: 0 0 1.1rem; }
.editor-acoes form { margin: 0; }
.editor-acoes .btn { width: 100%; padding: .8rem 1rem; font-size: .95rem; }

.lista-arrastavel { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.cartao { display: flex; align-items: center; gap: .7rem; padding: .7rem .75rem; border: 1px solid var(--border); border-radius: 18px; background: var(--card); }
.cartao.inativo .cartao-texto, .cartao.inativo .cartao-mini { opacity: .45; }
.arrastando { opacity: .35; }
.alca { cursor: grab; color: var(--text-muted); letter-spacing: -2px; user-select: none; }
.cartao-mini { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex: none; }
.cartao-mini-vazia { display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.cartao-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--text); text-decoration: none; }
.cartao-texto:hover { text-decoration: none; }
.cartao-texto:hover .cartao-titulo { color: var(--accent); }
.cartao-titulo { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-sub { font-size: .8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-mais { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.2rem; font-weight: 800; text-decoration: none; flex: none; }
.cartao-mais:hover { background: var(--bg); color: var(--text); text-decoration: none; }

.interruptor { position: relative; width: 38px; height: 22px; flex: none; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.interruptor span { position: absolute; inset: 0; border-radius: 999px; background: #cfd3df; transition: background .15s; pointer-events: none; }
.interruptor span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.interruptor input:checked + span { background: var(--accent); }
.interruptor input:checked + span::after { transform: translateX(16px); }
.interruptor input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); }

.colecao { background: var(--bg); border-radius: 20px; padding: .6rem .6rem .7rem; }
.colecao.inativo .colecao-titulo, .colecao.inativo .lista-colecao { opacity: .5; }
.colecao-topo { display: flex; align-items: center; gap: .6rem; padding: .2rem .3rem .55rem; }
.colecao-titulo { flex: 1; min-width: 0; font-weight: 800; color: var(--text); text-decoration: none; }
.colecao-titulo:hover { color: var(--accent); text-decoration: none; }
.lista-colecao { min-height: 12px; }
.colecao-dica { display: none; margin: 0; padding: .9rem; text-align: center; font-size: .82rem; color: var(--text-muted); border: 1.5px dashed var(--border); border-radius: 14px; }
.lista-colecao:empty + .colecao-dica { display: block; }

.editor-previa { position: sticky; top: 1rem; display: none; }
@media (min-width: 1100px) { .editor-previa { display: block; } }
.celular { width: 340px; height: 700px; border-radius: 40px; padding: 12px; background: #e6eaf4; box-shadow: inset 0 0 0 1px var(--border); }
:root[data-theme="dark"] .celular { background: #1c2030; }
.celular iframe { width: 100%; height: 100%; border: 0; border-radius: 30px; background: #fff; }
.editor-ver-previa { justify-self: start; }

/* ---------- Editor > Conteudo (mockup telas-v1) ---------- */
.editor-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 1100px) {
    .editor-grade { grid-template-columns: minmax(0, 640px) 340px; justify-content: center; }
    .editor-ver-previa { display: none; }
}
.editor-conteudo { background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 1.4rem 1.4rem 1.6rem; min-width: 0; }
.editor-cabecalho { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.1rem; }
.editor-foto { width: 64px; height: 64px; border-radius: 50%; flex: none; overflow: hidden; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; text-decoration: none; }
.editor-foto img { width: 100%; height: 100%; object-fit: cover; }
.editor-foto:hover { box-shadow: 0 0 0 3px var(--accent-soft); text-decoration: none; }
.editor-identidade { min-width: 0; flex: 1; }
.editor-titulo { display: inline-block; font-weight: 800; font-size: 1.1rem; color: var(--text); text-decoration: none; }
.editor-titulo span { color: var(--text-muted); font-size: .85rem; opacity: 0; transition: opacity .12s; }
.editor-titulo:hover span { opacity: 1; }
.editor-bio { display: block; color: var(--text-muted); font-size: .9rem; margin-top: .15rem; text-decoration: none; overflow-wrap: anywhere; }
.editor-titulo:hover, .editor-bio:hover { text-decoration: none; color: var(--accent); }
.editor-redes { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; }
.editor-rede { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none; }
.editor-rede:hover { background: var(--bg); text-decoration: none; }
.editor-rede-mais { box-shadow: inset 0 0 0 1.5px var(--border); color: var(--text-muted); font-size: 1.1rem; font-weight: 700; }
.editor-acoes { display: grid; grid-template-columns: 1fr 1.6fr; gap: .6rem; margin: 0 0 1.1rem; }
.editor-acoes form { margin: 0; }
.editor-acoes .btn { width: 100%; padding: .8rem 1rem; font-size: .95rem; }

.lista-arrastavel { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.cartao { display: flex; align-items: center; gap: .7rem; padding: .7rem .75rem; border: 1px solid var(--border); border-radius: 18px; background: var(--card); }
.cartao.inativo .cartao-texto, .cartao.inativo .cartao-mini { opacity: .45; }
.arrastando { opacity: .35; }
.alca { cursor: grab; color: var(--text-muted); letter-spacing: -2px; user-select: none; }
.cartao-mini { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex: none; }
.cartao-mini-vazia { display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.cartao-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--text); text-decoration: none; }
.cartao-texto:hover { text-decoration: none; }
.cartao-texto:hover .cartao-titulo { color: var(--accent); }
.cartao-titulo { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-sub { font-size: .8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-mais { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.2rem; font-weight: 800; text-decoration: none; flex: none; }
.cartao-mais:hover { background: var(--bg); color: var(--text); text-decoration: none; }

.interruptor { position: relative; width: 38px; height: 22px; flex: none; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.interruptor span { position: absolute; inset: 0; border-radius: 999px; background: #cfd3df; transition: background .15s; pointer-events: none; }
.interruptor span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.interruptor input:checked + span { background: var(--accent); }
.interruptor input:checked + span::after { transform: translateX(16px); }
.interruptor input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); }

.colecao { background: var(--bg); border-radius: 20px; padding: .6rem .6rem .7rem; }
.colecao.inativo .colecao-titulo, .colecao.inativo .lista-colecao { opacity: .5; }
.colecao-topo { display: flex; align-items: center; gap: .6rem; padding: .2rem .3rem .55rem; }
.colecao-titulo { flex: 1; min-width: 0; font-weight: 800; color: var(--text); text-decoration: none; }
.colecao-titulo:hover { color: var(--accent); text-decoration: none; }
.lista-colecao { min-height: 12px; }
.colecao-dica { display: none; margin: 0; padding: .9rem; text-align: center; font-size: .82rem; color: var(--text-muted); border: 1.5px dashed var(--border); border-radius: 14px; }
.lista-colecao:empty + .colecao-dica { display: block; }

.editor-previa { position: sticky; top: 1rem; display: none; }
@media (min-width: 1100px) { .editor-previa { display: block; } }
.celular { width: 340px; height: 700px; border-radius: 40px; padding: 12px; background: #e6eaf4; box-shadow: inset 0 0 0 1px var(--border); }
:root[data-theme="dark"] .celular { background: #1c2030; }
.celular iframe { width: 100%; height: 100%; border: 0; border-radius: 30px; background: #fff; }
.editor-ver-previa { justify-self: start; }

/* Desktop largo: o trilho vira a coluna de icones da esquerda (mockup), o endereco fica no
   alto a direita e o miolo ocupa o resto. */
@media (min-width: 1100px) {
    body.no-editor .content-largura { max-width: none; }
    .editor-pagina { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 1.2rem; align-items: start; }
    .editor-pagina > .editor-topo { display: contents; }
    .editor-pagina .trilho { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; align-items: center; gap: .6rem; position: sticky; top: 1rem; }
    .editor-pagina .trilho-item { flex-direction: column; gap: .3rem; padding: .3rem; border-radius: 16px; font-size: .74rem; text-align: center; background: transparent; box-shadow: none; }
    .editor-pagina .trilho-item.ativo { background: transparent; box-shadow: none; }
    .editor-pagina .trilho-icone { width: 46px; height: 46px; }
    .editor-pagina .trilho-menu { margin-bottom: .4rem; }
    .editor-pagina .editor-endereco { grid-column: 2; justify-self: end; margin-bottom: 1rem; }
    .editor-pagina > :not(.editor-topo) { grid-column: 2; }
}

/* ---------- Conteudo dos paineis (mockup paineis-v1) ---------- */
.painel-form { display: grid; gap: .1rem; margin-bottom: .8rem; }
.painel-form .campo { margin-bottom: .55rem; }
.painel-form > .contador { margin-top: -.45rem; }
.btn-bloco { width: 100%; margin-top: .5rem; padding: .8rem 1rem; }
.painel-nota { font-size: .8rem; color: var(--text-muted); margin: .5rem .2rem 1rem; }
.campo-prefixo-novo { display: flex; align-items: center; gap: .1rem; }
.campo-prefixo-novo span { color: var(--text-muted); font-size: .95rem; white-space: nowrap; }
.campo-prefixo-novo input { flex: 1; min-width: 0; }

.segmento { display: flex; background: var(--bg); border-radius: 999px; padding: 4px; margin-bottom: .9rem; }
.segmento label { flex: 1; position: relative; margin: 0; }
.segmento input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.segmento span { display: block; text-align: center; padding: .5rem; border-radius: 999px; font-weight: 700; color: var(--text-muted); font-size: .9rem; }
.segmento input:checked + span { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(22, 23, 29, .1); }
.segmento input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); }

.trocar-miniatura { display: flex; align-items: center; gap: .75rem; margin: 0 0 .8rem; cursor: pointer; color: var(--accent); font-weight: 700; font-size: .9rem; }
.trocar-miniatura img, .trocar-miniatura .cartao-mini { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.trocar-miniatura input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.trocar-miniatura:focus-within { outline: 3px solid var(--accent-soft); border-radius: 12px; }

.linha-interruptor { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .2rem; border-top: 1px solid var(--border); cursor: pointer; font-weight: 600; font-size: .92rem; }
.linha-interruptor small { display: block; font-weight: 400; font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }
.linha-interruptor + .linha-interruptor { border-top: 1px solid var(--border); }

.painel-numero { display: flex; justify-content: space-between; align-items: center; background: var(--bg); border-radius: 14px; padding: .8rem 1rem; margin: .4rem 0 .6rem; font-size: .9rem; }
.painel-numero strong { font-size: 1.15rem; }

.painel-foto { display: flex; justify-content: center; margin: .4rem 0 1rem; }
.painel-foto img, .painel-foto-vazia { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.painel-foto-vazia { display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: 2.6rem; font-weight: 800; }
.soltar-arquivo { display: grid; gap: .2rem; justify-items: center; text-align: center; padding: 1.2rem; border: 1.5px dashed var(--border); border-radius: 16px; cursor: pointer; }
.soltar-arquivo:hover { border-color: var(--accent); }
.soltar-arquivo span { font-weight: 700; color: var(--accent); }
.soltar-arquivo small { color: var(--text-muted); font-size: .78rem; }
.soltar-arquivo input[type="file"] { font-size: .8rem; max-width: 100%; }

.lista-redes, .escolher-rede { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .1rem; }
.linha-rede { display: flex; align-items: center; gap: .7rem; padding: .55rem .2rem; border-bottom: 1px solid var(--border); }
.linha-rede-icone { width: 38px; height: 38px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--text); flex: none; }
.linha-rede-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--text); text-decoration: none; font-weight: 700; }
.linha-rede-texto small { font-weight: 400; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-rede-texto:hover { text-decoration: none; color: var(--accent); }
.escolher-rede a { display: flex; align-items: center; gap: .75rem; padding: .55rem .3rem; border-radius: 12px; color: var(--text); font-weight: 700; text-decoration: none; }
.escolher-rede a:hover { background: var(--bg); text-decoration: none; }
.escolher-rede .seta { margin-left: auto; color: var(--text-muted); font-size: 1.3rem; }
.painel-rede-topo { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; font-size: 1rem; }

.colar-link { display: flex; align-items: center; gap: .5rem; background: var(--bg); border-radius: 999px; padding: .3rem .3rem .3rem 1rem; }
.colar-link input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none !important; padding: .5rem 0; }
.colar-link:focus-within { box-shadow: inset 0 0 0 2px var(--accent); background: var(--card); }
.tipos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .6rem; }
.tipo-form { margin: 0; display: grid; }
.tipo { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding: .95rem 1rem; background: var(--bg); border: 0; border-radius: 16px; color: var(--text); text-decoration: none; font: inherit; text-align: left; cursor: pointer; }
.tipo:hover { background: var(--accent-soft); text-decoration: none; }
.tipo-icone { width: 28px; height: 28px; border-radius: 8px; background: var(--card); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.tipo.em-breve { cursor: default; color: var(--text-muted); }
.tipo.em-breve:hover { background: var(--bg); }
.tipo.em-breve small { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

.excluir-colecao { margin-top: .4rem; }
.excluir-colecao > summary { list-style: none; cursor: pointer; }
.excluir-colecao > summary::-webkit-details-marker { display: none; }
.excluir-colecao[open] > summary { margin-bottom: .6rem; }

/* ---------- Abas do editor (Aparencia, Numeros, Meta) ---------- */
.aba-titulo { font-size: 1.1rem; font-weight: 800; margin: 0 0 1rem; }
.editor-aba { min-width: 0; }
.editor-aba > .card { margin-bottom: 1rem; }
@media (min-width: 1100px) { .editor-aba { max-width: 860px; } }
.page-actions .btn { white-space: nowrap; }

/* ---------- Assinatura "por AlanHeinz.com" e rodape de copyright ---------- */
.brand-assinatura { font-size: .68rem; font-weight: 500; letter-spacing: 0; color: var(--text-muted); margin-left: .1rem; }
.copyright { padding: 1.25rem 16px 1.5rem; text-align: center; font-size: .78rem; color: var(--text-muted); }
.copyright a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* O conteudo estica e empurra o rodape para o fundo da tela mesmo quando a pagina e curta. */
.shell-ga .content { flex: 1; }
/* Login: a caixa continua no meio (margin auto) e o rodape desce para o fim da tela. */
.acesso { flex-direction: column; }
.acesso-caixa { margin: auto 0; }
.acesso .copyright { padding-bottom: 0; }

/* ---------- Celular: conta, tema e Sair na barra de cima ---------- */
/* A barra de baixo recebia tudo da sidebar (seletor de conta, tema e Sair inclusive) e
   estourava a largura. Agora ela leva so a navegacao e o perfil; o resto vem para cima. */
.topbar-celular { gap: .4rem; }
.topbar-celular .sair-form { display: flex; margin: 0; flex: none; }
.topbar-celular .sair-form button { width: 36px; }
.topbar-celular .btn-icone svg { width: 16px; height: 16px; }
.topbar-conta { width: 36px; height: 36px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-weight: 700; font-size: .85rem; text-decoration: none; }
.topbar-conta:hover { text-decoration: none; color: #fff; }
@media (max-width: 768px) {
    .sidebar .seletor-conta,
    .sidebar .sidebar-acoes { display: none; }
}