:root { --azul:#144d6b; --fundo:#fafaf8; --tinta:#1c2530; --borda:#e2e0da; --realce:#eef4f8; }
* { box-sizing:border-box }
body { margin:0; font-family:-apple-system,'Segoe UI',Roboto,sans-serif; color:var(--tinta); background:var(--fundo) }
.topbar { display:flex; align-items:center; gap:1rem; padding:.5rem 1rem; background:#fff; border-bottom:1px solid var(--borda); position:sticky; top:0; z-index:10 }
.topbar button#toggle-sidebar { background:none; border:none; font-size:1.1rem; cursor:pointer }
.breadcrumbs { flex:1; display:flex; gap:.4rem; font-size:.9rem; overflow:hidden; white-space:nowrap }
.breadcrumbs a { color:var(--azul); text-decoration:none }
.breadcrumbs .atual { color:#666 }
.userbox { font-size:.85rem } .userbox a { color:var(--azul) }
.layout { display:flex; min-height:calc(100vh - 42px) }
#sidebar { width:260px; flex-shrink:0; background:#fff; border-right:1px solid var(--borda); padding:1rem .8rem; overflow-y:auto; transition:margin-left .2s }
#sidebar.recolhida { margin-left:-260px }
.side-apres { margin-bottom:1rem }
.side-apres-titulo { display:flex; align-items:center; gap:.35rem; font-weight:600 }
.side-apres-titulo a { color:var(--tinta); text-decoration:none }
.side-apres ul { list-style:none; margin:.3rem 0 0; padding-left:.9rem }
.side-apres li { display:flex; align-items:center; gap:.3rem; padding:.12rem 0; font-size:.9rem }
.side-apres li a { color:#3a4a5a; text-decoration:none } .side-apres li a:hover { color:var(--azul) }
.badge { font-size:.65rem; background:#f2e8cf; color:#7a5c00; border-radius:6px; padding:0 .35rem }
.inline { display:inline } .mini { background:none; border:1px solid var(--borda); border-radius:5px; font-size:.7rem; cursor:pointer; color:#888; padding:.05rem .35rem }
.mini:hover { color:#b00; border-color:#b00 }
.nova input { width:100%; border:1px dashed var(--borda); border-radius:6px; padding:.25rem .4rem; font-size:.85rem; background:transparent }
.nova-apres { margin-top:1rem }
main { flex:1; padding:2rem clamp(1rem,6vw,4rem); max-width:980px }
.page-title { color:var(--azul) }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem }
.card { display:flex; flex-direction:column; gap:.3rem; border:1px solid var(--borda); border-radius:10px; padding:1rem; background:#fff; text-decoration:none; color:var(--tinta) }
.card:hover { border-color:var(--azul) }
.card span { font-size:.8rem; color:#777 }
.barra-modo { font-size:.85rem; background:var(--realce); border:1px solid var(--borda); border-radius:8px; padding:.4rem .7rem; margin-bottom:1.2rem; display:flex; gap:.6rem; align-items:center }
.pagina { background:#fff; border:1px solid var(--borda); border-radius:12px; padding:2.2rem clamp(1.2rem,4vw,3rem); line-height:1.65 }
.pagina img, .pagina svg, .pagina iframe { max-width:100% }
details.sec { margin:.2rem 0 }
details.sec > summary { list-style:none; cursor:pointer; position:relative }
details.sec > summary::before { content:"▾"; position:absolute; left:-1.1rem; top:.45em; font-size:.7em; color:#a9a9a9; transition:transform .15s }
details.sec:not([open]) > summary::before { transform:rotate(-90deg) }
.h { font-weight:700; color:var(--tinta) }
.h1 { font-size:1.9rem; color:var(--azul) } .h2 { font-size:1.4rem } .h3 { font-size:1.1rem }
.sec-body { padding-left:.1rem }
.callout { border-left:4px solid var(--azul); background:var(--realce); border-radius:0 8px 8px 0; padding:.7rem 1rem; margin:1rem 0 }
hr { border:none; border-top:1px solid var(--borda); margin:2rem 0 }
.pager { display:flex; justify-content:space-between; margin-top:1.4rem; font-size:.9rem }
.pager a { color:var(--azul); text-decoration:none }
.login-form { display:flex; flex-direction:column; gap:.7rem; max-width:280px }
.login-form input { padding:.5rem .7rem; border:1px solid var(--borda); border-radius:8px }
.login-form button { padding:.5rem; background:var(--azul); color:#fff; border:none; border-radius:8px; cursor:pointer }
.erro { color:#b00 }
table { border-collapse:collapse } td,th { border:1px solid var(--borda); padding:.35rem .6rem }
code { background:#f0efeb; border-radius:4px; padding:.1rem .3rem }
pre code { display:block; padding:.8rem; overflow-x:auto }
/* fase 3: edicao inline */
.pagina.editavel { cursor:text }
.pagina.editavel > details:hover, .pagina.editavel > p:hover, .pagina.editavel > .callout:hover, .pagina.editavel > table:hover, .pagina.editavel > pre:hover { outline:1px dashed #b8c6d0; outline-offset:4px; border-radius:4px }
.blkmark { display:inline }
#blk-overlay { position:fixed; inset:0; background:rgba(20,30,40,.45); display:flex; align-items:center; justify-content:center; z-index:50 }
.blk-caixa { background:#fff; border-radius:12px; padding:1rem; width:min(720px,92vw); box-shadow:0 12px 40px rgba(0,0,0,.25) }
.blk-caixa textarea, .editor-form textarea { width:100%; min-height:180px; font-family:ui-monospace,Menlo,monospace; font-size:.9rem; border:1px solid var(--borda); border-radius:8px; padding:.7rem; resize:vertical }
.editor-form textarea { min-height:60vh }
.editor-acoes { display:flex; gap:.6rem; margin-top:.6rem; align-items:center }
.editor-acoes button { padding:.4rem 1rem; background:var(--azul); color:#fff; border:none; border-radius:8px; cursor:pointer }
.editor-acoes .secundario { background:#8a97a3 }
.editor-acoes a { color:var(--azul); font-size:.9rem }
.dica { font-size:.75rem; color:#8a97a3 }
/* fase 4: embeds, figuras, previews */
figure.embed, figure.figura { margin:1.4rem 0; text-align:center }
figure.embed figcaption, figure.figura figcaption { font-size:.85rem; color:#68727c; margin-top:.45rem }
.video { position:relative; width:100%; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#000 }
.video iframe { position:absolute; inset:0; width:100%; height:100% }
.video.vertical { aspect-ratio:auto; height:560px; max-width:560px; margin:0 auto; background:#fff; border:1px solid var(--borda) }
.x-embed { display:flex; justify-content:center }
.preview-card { display:flex; gap:.9rem; align-items:stretch; border:1px solid var(--borda); border-radius:10px; overflow:hidden; text-decoration:none; color:var(--tinta); background:#fff; text-align:left; max-width:640px; margin:0 auto }
.preview-card img { width:180px; object-fit:cover; flex-shrink:0 }
.preview-card div { display:flex; flex-direction:column; gap:.25rem; padding:.8rem 1rem .8rem 0; justify-content:center }
.preview-card:not(:has(img)) div { padding-left:1rem }
.preview-card strong { font-size:.95rem }
.preview-card span { font-size:.82rem; color:#68727c }
.preview-card em { font-size:.75rem; color:#9aa4ae; font-style:normal }
figure.figura img { max-width:100%; border-radius:10px }
/* fase 5: mosaico, lightbox, albuns */
.mosaico { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.7rem; margin:1.2rem 0 }
.mosaico figure { margin:0; text-align:center }
.mosaico img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; display:block; transition:transform .12s }
.mosaico a:hover img { transform:scale(1.02) }
.mosaico figcaption { font-size:.75rem; color:#68727c; margin-top:.3rem; word-break:break-all }
.pagina video { max-width:100%; border-radius:10px }
#lightbox { position:fixed; inset:0; background:rgba(10,15,20,.92); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:60; gap:.8rem }
#lightbox img { max-width:92vw; max-height:82vh; border-radius:8px }
#lightbox .lb-legenda { color:#dfe6ec; font-size:.9rem; max-width:80vw; text-align:center }
#lightbox .lb-fechar { position:absolute; top:1rem; right:1.4rem; color:#fff; font-size:1.6rem; cursor:pointer; background:none; border:none }
#lightbox .lb-nav { position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:2rem; cursor:pointer; background:none; border:none; padding:1rem }
#lightbox .lb-ant { left:.4rem } #lightbox .lb-prox { right:.4rem }
.upload-form { display:flex; gap:.6rem; align-items:center; margin:1rem 0; flex-wrap:wrap }
.upload-form input[name=album] { padding:.4rem .6rem; border:1px solid var(--borda); border-radius:8px }
.upload-form button { padding:.4rem 1rem; background:var(--azul); color:#fff; border:none; border-radius:8px; cursor:pointer }
.upload-mini label { cursor:pointer }
.side-links { margin-top:1rem; font-size:.8rem } .side-links a { color:var(--azul) }
/* fase 6 */
.pdf-links { font-size:.8rem; color:#8a97a3; margin-top:1rem } .pdf-links a { color:var(--azul) }
/* fase 8 */
.estilo-form { display:flex; gap:.4rem; align-items:center; margin-left:auto }
.estilo-form select { font-size:.78rem; border:1px solid var(--borda); border-radius:6px; padding:.15rem .3rem; background:#fff; color:var(--tinta) }