/* ═══════════════════════════════════════════════════════════════════
   NOTES — estilos (experiência Notion no tema escuro/RPG do 7KRoad)
   Usa os tokens do app: --bg, --s1..s5, --t1..t3, --gold, fontes.
   Layout: sidebar + palco. Responsivo. Herda tema claro/escuro do app.
   ═══════════════════════════════════════════════════════════════════ */

/* variáveis locais derivadas do tema */
#view-notes{
  --nt-line: rgba(255,255,255,.07);
  --nt-line-strong: rgba(255,255,255,.12);
  --nt-hover: rgba(255,255,255,.04);
  --nt-accent: var(--gold, #d9a441);
  --nt-radius: 12px;
  padding:0 !important;
}
/* tema claro do app → linhas escuras */
body.light #view-notes, .light #view-notes{
  --nt-line: rgba(0,0,0,.08);
  --nt-line-strong: rgba(0,0,0,.14);
  --nt-hover: rgba(0,0,0,.03);
}

/* ─────────── LAYOUT ─────────── */
.notes-app{
  display:flex; flex-direction:column; height:calc(100vh - 0px); min-height:520px;
  background:var(--bg); color:var(--t1);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  overflow:hidden; position:relative;
}
.notes-app-body{ display:flex; flex:1; overflow:hidden; min-height:0; }
.notes-app.focus .notes-side{ transform:translateX(-100%); width:0; }
.notes-app.focus .nd-toolbar,
.notes-app.focus .nd-actionbar .nd-crumbs,
.notes-app.focus .nd-meta,
.notes-app.focus .nd-tags{ opacity:0; pointer-events:none; height:0; overflow:hidden; margin:0; padding:0; }
.notes-app.side-hidden .notes-side{ transform:translateX(-100%); width:0; }

/* ─────────── SIDEBAR ─────────── */
.notes-side{
  width:300px; flex-shrink:0; border-right:1px solid var(--nt-line);
  background:var(--s1); display:flex; flex-direction:column;
  transition:transform .28s cubic-bezier(.4,0,.2,1), width .28s;
}
.ns-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 16px 12px; gap:8px;
}
.ns-title{ font-size:15px; font-weight:800; letter-spacing:-.01em; }
.ns-new{
  display:inline-flex; align-items:center; gap:4px; cursor:pointer;
  background:var(--nt-accent); color:#1a1206; border:none;
  padding:7px 12px; border-radius:9px; font-size:12.5px; font-weight:800;
  transition:transform .15s, filter .15s;
}
.ns-new span{ font-size:15px; line-height:1; }
.ns-new:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.ns-new:active{ transform:translateY(0); }
.ns-new.big{ padding:11px 20px; font-size:14px; margin-top:16px; }

.ns-search{ padding:0 16px 10px; }
.ns-search input{
  width:100%; box-sizing:border-box; background:var(--s2); color:var(--t1);
  border:1px solid var(--nt-line); border-radius:9px; padding:9px 12px;
  font-size:13px; outline:none; transition:border-color .18s;
}
.ns-search input:focus{ border-color:var(--nt-accent); }
.ns-search input::placeholder{ color:var(--t3); }

.ns-nav{ display:flex; flex-direction:column; padding:0 10px 8px; gap:1px; }
.ns-nav-i{
  text-align:left; background:none; border:none; color:var(--t2); cursor:pointer;
  padding:8px 12px; border-radius:8px; font-size:13px; font-weight:600;
  transition:background .15s, color .15s;
}
.ns-nav-i:hover{ background:var(--nt-hover); color:var(--t1); }
.ns-nav-i.active{ background:var(--nt-hover); color:var(--t1); font-weight:800; }

.ns-filters{ padding:4px 14px 8px; border-top:1px solid var(--nt-line); margin-top:4px; }
.ns-fgrp{ margin-top:8px; }
.ns-flabel{ font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--t3); font-weight:800; }
.ns-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.ns-chip{
  background:var(--s2); border:1px solid var(--nt-line); color:var(--t2);
  padding:3px 9px; border-radius:100px; font-size:11px; font-weight:700; cursor:pointer;
  transition:all .15s;
}
.ns-chip:hover{ color:var(--t1); border-color:var(--nt-line-strong); }
.ns-chip.on{ background:var(--nt-accent); color:#1a1206; border-color:transparent; }

.ns-list{ flex:1; overflow-y:auto; padding:8px 10px 40px; }
.ns-list::-webkit-scrollbar{ width:8px; }
.ns-list::-webkit-scrollbar-thumb{ background:var(--nt-line-strong); border-radius:4px; }
.ns-empty{ color:var(--t3); font-size:12.5px; text-align:center; padding:24px 8px; }

.ns-card{
  display:flex; flex-direction:column; gap:3px; width:100%; text-align:left;
  background:none; border:1px solid transparent; border-radius:10px;
  padding:10px 11px; cursor:pointer; margin-bottom:2px; transition:background .14s, border-color .14s;
}
.ns-card:hover{ background:var(--nt-hover); }
.ns-card.active{ background:var(--nt-hover); border-color:var(--nt-line-strong); }
.ns-card-top{ display:flex; align-items:center; gap:6px; }
.ns-card-title{ font-size:13.5px; font-weight:700; color:var(--t1); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ns-card-star{ font-size:11px; }
.ns-card-assunto{ font-size:10.5px; color:var(--nt-accent); font-weight:700; }
.ns-card-preview{ font-size:12px; color:var(--t3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ns-card-date{ font-size:10.5px; color:var(--t3); }

/* ─────────── PALCO / EDITOR ─────────── */
.notes-stage{ flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--bg); min-width:0; }

.notes-empty{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--t2); padding:40px; gap:6px;
}
.ne-empty-art{ font-size:52px; margin-bottom:8px; filter:grayscale(.2); }
.notes-empty h2{ font-size:20px; color:var(--t1); margin:0; font-weight:800; }
.notes-empty p{ font-size:13.5px; color:var(--t3); max-width:340px; margin:0; line-height:1.6; }

.notes-doc{ flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* barra de ações */
.nd-actionbar{
  display:flex; align-items:center; gap:10px; padding:10px 18px;
  border-bottom:1px solid var(--nt-line); background:var(--s1); flex-shrink:0;
}
.nd-side-toggle{ display:none; background:none; border:none; color:var(--t2); font-size:18px; cursor:pointer; }
.nd-crumbs{ font-size:12.5px; color:var(--t3); font-weight:600; flex:1; }
.nd-actions{ display:flex; align-items:center; gap:2px; }
.nd-actions button{
  background:none; border:none; color:var(--t2); cursor:pointer; font-size:15px;
  width:32px; height:32px; border-radius:8px; transition:background .14s, color .14s;
  display:inline-flex; align-items:center; justify-content:center;
}
.nd-actions button:hover{ background:var(--nt-hover); color:var(--t1); }
.nd-actions button.on{ color:var(--nt-accent); }
.nd-save{
  font-size:11px; color:var(--t3); font-weight:700; margin-right:6px;
  padding:3px 8px; border-radius:6px; transition:color .2s; white-space:nowrap;
}
.nd-save.saving{ color:var(--nt-accent); }

/* busca dentro da nota */
.nd-find{
  display:flex; align-items:center; gap:8px; padding:8px 18px;
  border-bottom:1px solid var(--nt-line); background:var(--s2);
}
.nd-find input{
  flex:1; background:var(--s1); border:1px solid var(--nt-line); border-radius:8px;
  padding:7px 10px; color:var(--t1); font-size:13px; outline:none;
}
.nd-find input:focus{ border-color:var(--nt-accent); }
.nd-find span{ font-size:11.5px; color:var(--t3); }
.nd-find button{ background:none; border:none; color:var(--t2); cursor:pointer; font-size:14px; }

/* área de rolagem + papel */
.nd-scroll{ flex:1; overflow-y:auto; padding:0 0 120px; }
.nd-scroll::-webkit-scrollbar{ width:10px; }
.nd-scroll::-webkit-scrollbar-thumb{ background:var(--nt-line-strong); border-radius:5px; }
.nd-paper{ max-width:760px; margin:0 auto; padding:34px 32px 0; }

.nd-title{
  width:100%; box-sizing:border-box; background:none; border:none; outline:none;
  color:var(--t1); font-size:34px; font-weight:800; letter-spacing:-.02em;
  font-family:var(--font-display,Georgia,serif); padding:0 0 6px;
}
.nd-title::placeholder{ color:var(--t3); opacity:.5; }

.nd-assunto-row{ margin-bottom:8px; }
.nd-assunto{
  background:none; border:none; outline:none; color:var(--nt-accent);
  font-size:13.5px; font-weight:700; padding:2px 0; width:100%;
}
.nd-assunto::placeholder{ color:var(--t3); font-weight:600; }

.nd-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; align-items:center; }
.nd-tag{
  display:inline-flex; align-items:center; gap:4px; background:var(--s2);
  border:1px solid var(--nt-line); border-radius:100px; padding:3px 5px 3px 10px;
  font-size:11.5px; font-weight:700; color:var(--t2);
}
.nd-tag button{ background:none; border:none; color:var(--t3); cursor:pointer; font-size:10px; padding:0 2px; }
.nd-tag button:hover{ color:#ef4444; }
.nd-tag-add{
  background:none; border:1px dashed var(--nt-line-strong); color:var(--t3);
  border-radius:100px; padding:3px 10px; font-size:11.5px; font-weight:700; cursor:pointer;
}
.nd-tag-add:hover{ color:var(--t1); border-color:var(--nt-accent); }

.nd-meta{ display:flex; flex-wrap:wrap; gap:5px; font-size:11.5px; color:var(--t3); margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--nt-line); }

/* ─────────── TOOLBAR ─────────── */
.nd-toolbar{
  position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; gap:3px;
  padding:8px; margin-bottom:14px; background:var(--s1);
  border:1px solid var(--nt-line); border-radius:var(--nt-radius);
  backdrop-filter:blur(8px);
}
.tb-grp{ display:flex; gap:1px; padding:0 3px; }
.tb-grp:not(:last-child){ border-right:1px solid var(--nt-line); }
.nd-toolbar button, .tb-size{
  min-width:30px; height:30px; padding:0 7px; background:none; border:none;
  color:var(--t2); cursor:pointer; border-radius:7px; font-size:13.5px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; transition:background .14s, color .14s;
}
.nd-toolbar button:hover, .tb-size:hover{ background:var(--nt-hover); color:var(--t1); }
.nd-toolbar button.active{ background:var(--nt-accent); color:#1a1206; }
.tb-hl{ background:#ffe58a; color:#4a3a00; border-radius:3px; padding:0 4px; }
.tb-size{ background:var(--s2); border:1px solid var(--nt-line); font-size:12px; }

/* ─────────── EDITOR (conteúdo) ─────────── */
.ne-editor{
  min-height:400px; outline:none; color:var(--t1); font-size:16px; line-height:1.75;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.ne-editor:empty:before{ content:'Comece a escrever… use a barra acima pra formatar.'; color:var(--t3); opacity:.6; }
.ne-editor h1{ font-size:28px; font-weight:800; margin:20px 0 8px; font-family:var(--font-display,Georgia,serif); letter-spacing:-.01em; }
.ne-editor h2{ font-size:22px; font-weight:800; margin:18px 0 6px; font-family:var(--font-display,Georgia,serif); }
.ne-editor h3{ font-size:18px; font-weight:800; margin:14px 0 4px; }
.ne-editor p, .ne-editor div{ margin:2px 0; }
.ne-editor ul, .ne-editor ol{ padding-left:26px; margin:6px 0; }
.ne-editor li{ margin:3px 0; }
.ne-editor a{ color:var(--nt-accent); text-decoration:underline; text-underline-offset:2px; }
.ne-editor blockquote{
  position:relative; margin:14px 0; padding:14px 18px 14px 46px;
  color:var(--t1); font-style:italic; font-size:15.5px; line-height:1.7;
  background:linear-gradient(90deg, color-mix(in srgb, var(--nt-accent) 8%, transparent), transparent 70%);
  border-left:4px solid var(--nt-accent); border-radius:0 10px 10px 0;
}
.ne-editor blockquote::before{
  content:'\201C'; position:absolute; left:12px; top:2px;
  font-size:40px; line-height:1; font-family:Georgia,serif; color:var(--nt-accent); opacity:.5;
}
.ne-editor mark, .ne-editor [style*="background"]{ border-radius:3px; padding:0 2px; }
.ne-editor .ne-hr{ border:none; border-top:1px solid var(--nt-line-strong); margin:20px 0; }
.ne-editor .ne-code{
  background:var(--s2); border:1px solid var(--nt-line); border-radius:10px;
  padding:14px 16px; margin:12px 0; overflow-x:auto;
  font-family:var(--mono,monospace); font-size:13.5px; line-height:1.6; color:#8fe3c8;
}
.ne-editor .ne-img{ max-width:100%; border-radius:10px; margin:12px 0; display:block; }
.ne-editor .ne-table{ border-collapse:collapse; width:100%; margin:12px 0; font-size:14px; }
.ne-editor .ne-table td, .ne-editor .ne-table th{ border:1px solid var(--nt-line-strong); padding:8px 10px; min-width:40px; }
.ne-editor .ne-table th{ background:var(--s2); font-weight:800; text-align:left; }
.ne-editor .ne-checklist{ list-style:none; padding-left:2px; margin:8px 0; }
.ne-editor .ne-check-item{ display:flex; align-items:flex-start; gap:9px; margin:5px 0; padding-left:0; }
.ne-editor .ne-check-item::marker{ content:''; }
.ne-editor .ne-check-box{
  flex-shrink:0; width:19px; height:19px; margin-top:2px; border-radius:5px;
  border:2px solid var(--nt-line-strong); cursor:pointer; position:relative; transition:all .15s;
  display:inline-block; user-select:none;
}
.ne-editor .ne-check-box:hover{ border-color:var(--nt-accent); }
.ne-editor .ne-check-item.done .ne-check-box{ background:var(--nt-accent); border-color:var(--nt-accent); }
.ne-editor .ne-check-item.done .ne-check-box::after{
  content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#1a1206; font-size:13px; font-weight:900;
}
.ne-editor .ne-check-label{ flex:1; outline:none; line-height:1.6; }
.ne-editor .ne-check-item.done .ne-check-label{ text-decoration:line-through; color:var(--t3); }
.ne-editor mark.ne-find{ background:#ffd54a; color:#3a2c00; }

/* ─────────── POPUPS (emoji, menu) ─────────── */
.ne-emoji-pop{
  position:fixed; z-index:9999; width:228px; background:var(--s1);
  border:1px solid var(--nt-line-strong); border-radius:12px; padding:8px;
  display:grid; grid-template-columns:repeat(8,1fr); gap:2px; box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.ne-emoji-pop button{ background:none; border:none; font-size:18px; cursor:pointer; border-radius:6px; padding:4px; }
.ne-emoji-pop button:hover{ background:var(--nt-hover); }

.nd-menu-pop{
  position:fixed; z-index:9999; width:200px; background:var(--s1);
  border:1px solid var(--nt-line-strong); border-radius:12px; padding:6px;
  display:flex; flex-direction:column; gap:1px; box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.nd-menu-pop button{
  text-align:left; background:none; border:none; color:var(--t2); cursor:pointer;
  padding:9px 12px; border-radius:8px; font-size:13px; font-weight:600; transition:background .12s, color .12s;
}
.nd-menu-pop button:hover{ background:var(--nt-hover); color:var(--t1); }
.nd-menu-pop button.danger{ color:#ef5a6a; }
.nd-menu-pop button.danger:hover{ background:rgba(239,90,106,.1); }
.nd-menu-sep{ height:1px; background:var(--nt-line); margin:4px 8px; }

/* ─────────── MODAL ─────────── */
.notes-modal{
  position:fixed; inset:0; z-index:9998; background:rgba(4,5,10,.72);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:nmFade .2s ease;
}
@keyframes nmFade{ from{opacity:0} to{opacity:1} }
.nm-box{
  width:100%; max-width:520px; max-height:80vh; overflow:hidden; display:flex; flex-direction:column;
  background:var(--s1); border:1px solid var(--nt-line-strong); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.nm-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--nt-line); font-weight:800; }
.nm-head button{ background:none; border:none; color:var(--t2); cursor:pointer; font-size:16px; }
.nm-body{ padding:16px 20px; overflow-y:auto; }
.nh-list{ display:flex; flex-direction:column; gap:6px; }
.nh-item{ display:flex; flex-direction:column; gap:3px; text-align:left; background:var(--s2); border:1px solid var(--nt-line); border-radius:10px; padding:10px 12px; cursor:pointer; transition:border-color .14s; }
.nh-item:hover{ border-color:var(--nt-accent); }
.nh-item span:first-child{ font-size:12px; font-weight:700; color:var(--t1); }
.nh-prev{ font-size:11.5px; color:var(--t3); }

/* ─────────── RESPONSIVO ─────────── */
@media (max-width:860px){
  .notes-side{ position:absolute; z-index:20; height:100%; box-shadow:8px 0 30px rgba(0,0,0,.4); }
  .notes-app:not(.side-open) .notes-side{ transform:translateX(-100%); }
  .nd-side-toggle{ display:inline-flex; }
  .nd-paper{ padding:22px 18px 0; }
  .nd-title{ font-size:26px; }
  .ne-editor{ font-size:15.5px; }
}
@media (max-width:480px){
  .nd-toolbar{ gap:1px; padding:6px; }
  .nd-toolbar button, .tb-size{ min-width:28px; height:28px; font-size:12.5px; }
  .nd-actions button{ width:30px; height:30px; font-size:14px; }
  .nd-save{ display:none; }
}

/* respeita redução de movimento */
@media (prefers-reduced-motion:reduce){
  .notes-side, .ns-new, .notes-modal{ transition:none; animation:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   LARGURA CHEIA no desktop — a aba Notas escapa do limite de 480px do app
   Ativado por body.notes-fullwidth (ligado/desligado no goView).
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 860px) {
  body.notes-fullwidth {
    max-width: none !important;
    width: 100% !important;
  }
  /* topnav e botbar continuam centralizados como "celular"; só a view de notas ocupa tudo */
  body.notes-fullwidth #view-notes {
    position: fixed;
    left: 0; right: 0;
    top: var(--nav, 58px);
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    z-index: 40;
    /* garante visibilidade (a classe .view tem opacity/transform de entrada) */
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  body.notes-fullwidth #view-notes .notes-app {
    height: 100%;
  }
  /* esconde a botbar flutuante enquanto edita (mais espaço, foco total) */
  body.notes-fullwidth #botbar { z-index: 41; }
}

/* barra de navegação própria da aba notas (pra voltar), já que ela cobre tudo */
.notes-topbar {
  display: none;
}
@media (min-width: 860px) {
  body.notes-fullwidth .notes-topbar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 16px; border-bottom: 1px solid var(--nt-line);
    background: var(--s1); flex-shrink: 0;
  }
  .notes-topbar-back {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; color: var(--t2); cursor: pointer;
    font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 8px;
    transition: background .14s, color .14s;
  }
  .notes-topbar-back:hover { background: var(--nt-hover); color: var(--t1); }
  .notes-topbar-brand { font-size: 13px; font-weight: 800; color: var(--t1); }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — a aba Notas não abre; mostra aviso de "só no desktop"
   ═══════════════════════════════════════════════════════════════════ */
.notes-mobile-block { display: none; }
@media (max-width: 859px) {
  .notes-app { display: none !important; }
  .notes-mobile-block {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; min-height: 60vh; padding: 40px 28px; gap: 14px;
    color: var(--t2);
  }
  .nmb-icon {
    font-size: 46px;
    filter: grayscale(.15);
  }
  .nmb-title {
    font-size: 20px; font-weight: 800; color: var(--t1);
    font-family: var(--font-display, Georgia, serif); letter-spacing: -.01em;
  }
  .nmb-text {
    font-size: 14px; line-height: 1.65; color: var(--t3); max-width: 320px;
  }
  .nmb-badge {
    margin-top: 6px; display: inline-flex; align-items: center; gap: 7px;
    background: var(--s2); border: 1px solid var(--nt-line);
    padding: 8px 16px; border-radius: 100px; font-size: 12.5px; font-weight: 700; color: var(--t2);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   CADERNOS (pastas) na sidebar
   ═══════════════════════════════════════════════════════════════════ */
.ns-cadernos-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px 4px; margin-top:2px; border-top:1px solid var(--nt-line);
}
.ns-cad-add{
  background:none; border:1px solid var(--nt-line-strong); color:var(--t2);
  width:22px; height:22px; border-radius:6px; cursor:pointer; font-size:15px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; transition:all .14s;
}
.ns-cad-add:hover{ background:var(--nt-accent); color:#1a1206; border-color:transparent; }
.ns-cadernos{ padding:0 10px 6px; display:flex; flex-direction:column; gap:1px; }
.ns-cad-empty{ font-size:11.5px; color:var(--t3); padding:6px 12px; line-height:1.5; }
.ns-cad{ display:flex; align-items:center; border-radius:8px; transition:background .14s; }
.ns-cad:hover{ background:var(--nt-hover); }
.ns-cad.on{ background:var(--nt-hover); }
.ns-cad.on .ns-cad-name{ color:var(--t1); font-weight:800; }
.ns-cad-main{
  flex:1; display:flex; align-items:center; gap:8px; background:none; border:none;
  color:var(--t2); cursor:pointer; padding:8px 6px 8px 12px; font-size:13px; font-weight:600; text-align:left;
  min-width:0;
}
.ns-cad-ico{ font-size:15px; flex-shrink:0; }
.ns-cad-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ns-cad-count{ font-size:10.5px; color:var(--t3); background:var(--s2); border-radius:100px; padding:1px 7px; font-weight:700; }
.ns-cad-menu{ background:none; border:none; color:var(--t3); cursor:pointer; font-size:14px; padding:0 8px; opacity:0; transition:opacity .14s; }
.ns-cad:hover .ns-cad-menu{ opacity:1; }
.ns-cad-menu:hover{ color:var(--t1); }

/* swatches de cor/ícone no menu do caderno */
.cad-swatch-lbl{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--t3); font-weight:800; padding:4px 10px 2px; }
.cad-swatches{ display:flex; flex-wrap:wrap; gap:5px; padding:2px 10px 6px; }
.cadcolor{ width:20px; height:20px; border-radius:50%; border:2px solid transparent; cursor:pointer; }
.cadcolor:hover{ border-color:var(--t1); }
.cad-icons{ display:grid; grid-template-columns:repeat(8,1fr); gap:2px; padding:2px 10px 6px; }
.cadicon{ background:none; border:none; font-size:16px; cursor:pointer; border-radius:5px; padding:3px; }
.cadicon:hover{ background:var(--nt-hover); }

/* ═══════════════════════════════════════════════════════════════════
   CADERNO no cabeçalho da nota (crumb clicável)
   ═══════════════════════════════════════════════════════════════════ */
.nd-crumb-cad{
  background:none; border:none; color:var(--t2); cursor:pointer; font-size:12.5px;
  font-weight:700; padding:3px 8px; border-radius:6px; transition:background .14s;
  display:inline-flex; align-items:center; gap:4px;
}
.nd-crumb-cad:hover{ background:var(--nt-hover); color:var(--t1); }
.nd-crumb-sep{ color:var(--t3); margin:0 2px; }

/* ═══════════════════════════════════════════════════════════════════
   SELETOR DE COR (texto / destaque)
   ═══════════════════════════════════════════════════════════════════ */
.ne-color-pop{
  position:fixed; z-index:9999; background:var(--s1); border:1px solid var(--nt-line-strong);
  border-radius:12px; padding:10px; box-shadow:0 12px 40px rgba(0,0,0,.5); width:186px;
}
.ncp-lbl{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--t3); font-weight:800; margin-bottom:6px; }
.ncp-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.ncp-grid button{
  width:26px; height:26px; border-radius:7px; border:1px solid rgba(255,255,255,.12); cursor:pointer;
  font-size:12px; color:var(--t3); display:flex; align-items:center; justify-content:center;
}
.ncp-grid button:hover{ transform:scale(1.12); }
.tb-color-ico{ border-bottom:3px solid #ff6a6a; line-height:1; padding-bottom:1px; font-weight:800; }

/* ═══════════════════════════════════════════════════════════════════
   LISTAS ANINHADAS (subtópicos) — indentação visual clara
   ═══════════════════════════════════════════════════════════════════ */
.ne-editor ul ul, .ne-editor ol ol, .ne-editor ul ol, .ne-editor ol ul{ margin:2px 0; }
.ne-editor ul ul{ list-style-type:circle; }
.ne-editor ul ul ul{ list-style-type:square; }
.ne-editor ul, .ne-editor ol{ padding-left:24px; }
.ne-editor li{ padding-left:2px; }

/* headings com um leve marcador (ajuda a ver a hierarquia de tópicos) */
.ne-editor h1{ border-bottom:1px solid var(--nt-line); padding-bottom:4px; }
.ne-editor h2::before{ content:''; display:inline-block; width:3px; height:16px; background:var(--nt-accent); border-radius:2px; margin-right:8px; vertical-align:-2px; opacity:.6; }

/* ═══════════════════════════════════════════════════════════════════
   EDITOR AVANÇADO — callouts, toggles, sub/super, seletor de cor rico
   ═══════════════════════════════════════════════════════════════════ */

/* seletor de cor melhorado */
.ne-color-pop{ width:216px; max-height:min(70vh,420px); overflow-y:auto; }
.ncp-sub{ font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--t3); font-weight:800; margin:8px 0 4px; }
.ncp-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:5px; }
.ncp-grid button{ width:26px; height:26px; border-radius:7px; border:1px solid rgba(255,255,255,.14); cursor:pointer; font-size:11px; color:var(--t3); display:flex; align-items:center; justify-content:center; transition:transform .12s; }
.ncp-grid button:hover{ transform:scale(1.15); z-index:1; }
.ncp-custom{ margin-top:10px; padding-top:8px; border-top:1px solid var(--nt-line); }
.ncp-custom-lbl{ display:flex; align-items:center; gap:8px; cursor:pointer; font-size:12px; color:var(--t2); font-weight:600; }
.ncp-custom-lbl input[type=color]{ width:28px; height:28px; border:none; border-radius:7px; background:none; cursor:pointer; padding:0; }

/* subscrito / sobrescrito nos botões */
.nd-toolbar button sub, .nd-toolbar button sup{ font-size:9px; }

/* CALLOUTS — caixas de destaque */
.ne-callout{
  display:flex; gap:10px; align-items:flex-start; margin:12px 0; padding:12px 14px;
  border-radius:10px; border-left:4px solid var(--nt-accent); background:var(--s2);
}
.ne-cal-ico{ font-size:18px; line-height:1.5; flex-shrink:0; user-select:none; }
.ne-cal-body{ flex:1; outline:none; line-height:1.6; }
.ne-callout.cal-dica{ border-left-color:#ffd24a; background:rgba(255,210,74,.08); }
.ne-callout.cal-atencao{ border-left-color:#ff9f4a; background:rgba(255,159,74,.08); }
.ne-callout.cal-importante{ border-left-color:#ff6a6a; background:rgba(255,106,106,.08); }
.ne-callout.cal-resumo{ border-left-color:#4ade80; background:rgba(74,222,128,.08); }
.ne-callout.cal-duvida{ border-left-color:#7c9cff; background:rgba(124,156,255,.08); }
.ne-callout.cal-meta{ border-left-color:#c98cff; background:rgba(201,140,255,.08); }

/* TOGGLE — seções recolhíveis */
.ne-toggle{ margin:12px 0; border:1px solid var(--nt-line); border-radius:10px; overflow:hidden; background:var(--s1); }
.ne-toggle-head{ display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--s2); user-select:none; }
.ne-toggle-arrow{
  flex-shrink:0; background:none; border:none; color:var(--nt-accent); cursor:pointer;
  font-size:14px; width:22px; height:22px; border-radius:5px; transition:transform .18s, background .14s;
  display:inline-flex; align-items:center; justify-content:center;
}
.ne-toggle-arrow:hover{ background:var(--nt-hover); }
.ne-toggle.open .ne-toggle-arrow{ transform:rotate(90deg); }
.ne-toggle-title{ flex:1; font-weight:700; color:var(--t1); outline:none; font-size:15px; }
.ne-toggle-del{
  flex-shrink:0; background:none; border:none; color:var(--t3); cursor:pointer;
  font-size:13px; width:24px; height:24px; border-radius:6px; opacity:0;
  display:inline-flex; align-items:center; justify-content:center; transition:opacity .14s, background .14s, color .14s;
}
.ne-toggle-head:hover .ne-toggle-del{ opacity:1; }
.ne-toggle-del:hover{ background:rgba(239,90,106,.14); color:#ef5a6a; }
.ne-toggle-body{ padding:12px 14px 12px 42px; outline:none; line-height:1.7; border-top:1px solid var(--nt-line); }
.ne-toggle:not(.open) .ne-toggle-body{ display:none; }

/* código com melhor cara */
.ne-editor .ne-code{ position:relative; }

/* callout picker herda .nd-menu-pop */

/* alinhamento — garante que blocos alinhados funcionem */
.ne-editor [style*="text-align"]{ width:100%; }

/* níveis de lista mais ricos */
.ne-editor ul{ list-style-type:disc; }
.ne-editor ul ul{ list-style-type:circle; }
.ne-editor ul ul ul{ list-style-type:square; }
.ne-editor ol{ list-style-type:decimal; }
.ne-editor ol ol{ list-style-type:lower-alpha; }
.ne-editor ol ol ol{ list-style-type:lower-roman; }

/* ═══════════════════════════════════════════════════════════════════
   RECURSOS AVANÇADOS v2 — bubble menu, code highlight, templates,
   status, links entre notas, painel de ajuda
   ═══════════════════════════════════════════════════════════════════ */

/* BUBBLE MENU (menu flutuante ao selecionar texto) */
.ne-bubble{
  position:fixed; z-index:9999; display:none; align-items:center; gap:1px;
  background:var(--s1); border:1px solid var(--nt-line-strong); border-radius:10px;
  padding:4px; box-shadow:0 8px 30px rgba(0,0,0,.55);
}
.ne-bubble button{
  min-width:30px; height:30px; background:none; border:none; color:var(--t2); cursor:pointer;
  border-radius:6px; font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s;
}
.ne-bubble button:hover{ background:var(--nt-hover); color:var(--t1); }
.ne-bubble-sep{ width:1px; height:18px; background:var(--nt-line); margin:0 3px; }
.ne-bubble-hl{ background:#ffe58a; color:#4a3a00; border-radius:3px; padding:0 4px; }

/* CÓDIGO com syntax highlight */
.ne-codeblock{ margin:12px 0; border:1px solid var(--nt-line); border-radius:10px; overflow:hidden; background:#0d1117; }
.ne-code-bar{ display:flex; align-items:center; justify-content:space-between; padding:6px 10px; background:var(--s2); border-bottom:1px solid var(--nt-line); }
.ne-code-lang{ background:var(--s1); color:var(--t2); border:1px solid var(--nt-line); border-radius:6px; font-size:11px; font-weight:700; padding:2px 6px; cursor:pointer; text-transform:uppercase; }
.ne-code-copy{ background:none; border:none; color:var(--t3); cursor:pointer; font-size:11.5px; font-weight:700; padding:2px 6px; border-radius:6px; }
.ne-code-copy:hover{ color:var(--t1); background:var(--nt-hover); }
.ne-codeblock .ne-code{ margin:0; border:none; border-radius:0; background:#0d1117; padding:14px 16px; }
.ne-code-src{ outline:none; display:block; white-space:pre-wrap; word-break:break-word; color:#c9d1d9; font-family:var(--mono,'SF Mono',Monaco,monospace); font-size:13px; line-height:1.6; }
.ne-code-src .kw{ color:#ff7b72; font-weight:600; }
.ne-code-src .st{ color:#a5d6ff; }
.ne-code-src .nu{ color:#79c0ff; }
.ne-code-src .cm{ color:#8b949e; font-style:italic; }
/* código inline */
.ne-inline-code{ background:var(--s2); border:1px solid var(--nt-line); border-radius:4px; padding:1px 5px; font-family:var(--mono,monospace); font-size:.9em; color:#8fe3c8; }

/* TEMPLATES (modal de escolha) */
.tpl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tpl-opt{ display:flex; flex-direction:column; gap:3px; align-items:flex-start; text-align:left; background:var(--s2); border:1px solid var(--nt-line); border-radius:12px; padding:14px; cursor:pointer; transition:border-color .14s, transform .1s; }
.tpl-opt:hover{ border-color:var(--nt-accent); transform:translateY(-2px); }
.tpl-name{ font-size:14px; font-weight:800; color:var(--t1); }
.tpl-hint{ font-size:11px; color:var(--t3); }

/* STATUS de estudo */
.nd-status-bar{ display:flex; align-items:center; gap:8px; padding:8px 18px 0; }
.nd-status-chip{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; color:var(--sc); background:color-mix(in srgb, var(--sc) 14%, transparent); border:1px solid color-mix(in srgb, var(--sc) 40%, transparent); border-radius:100px; padding:3px 12px; }
.nd-status-btn.on{ color:var(--nt-accent); }
.ns-card-status{ font-size:11px; }

/* LINK entre notas */
.ne-notelink{ color:var(--nt-accent); text-decoration:none; background:color-mix(in srgb, var(--nt-accent) 12%, transparent); border-radius:5px; padding:1px 6px; font-weight:600; font-size:.95em; }
.ne-notelink:hover{ background:color-mix(in srgb, var(--nt-accent) 22%, transparent); }
.nd-notelink{ width:240px; }
.nl-search{ width:100%; box-sizing:border-box; background:var(--s2); border:1px solid var(--nt-line); border-radius:8px; padding:7px 10px; color:var(--t1); font-size:12.5px; outline:none; margin:4px 0 6px; }
.nl-list{ max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:1px; }
.nl-item{ text-align:left; background:none; border:none; color:var(--t2); cursor:pointer; padding:8px 10px; border-radius:7px; font-size:12.5px; font-weight:600; }
.nl-item:hover{ background:var(--nt-hover); color:var(--t1); }
.nl-empty{ font-size:12px; color:var(--t3); padding:8px 10px; }

/* PAINEL DE AJUDA */
.help-sec{ margin-bottom:18px; }
.help-h{ font-size:13px; font-weight:800; color:var(--t1); margin-bottom:8px; }
.help-tbl{ width:100%; border-collapse:collapse; font-size:12.5px; }
.help-tbl td{ padding:5px 8px; border-bottom:1px solid var(--nt-line); color:var(--t2); }
.help-tbl td:first-child{ width:42%; }
.help-tbl code{ background:var(--s2); border:1px solid var(--nt-line); border-radius:5px; padding:2px 7px; font-family:var(--mono,monospace); font-size:12px; color:#8fe3c8; }
.help-list{ margin:0; padding-left:18px; font-size:12.5px; color:var(--t2); line-height:1.7; }

/* status picker herda .nd-menu-pop */

/* ═══════════════════════════════════════════════════════════════════
   MENU "/" (slash commands) + ARRASTAR TOGGLES
   ═══════════════════════════════════════════════════════════════════ */

/* menu de barra */
.ne-slash{
  position:fixed; z-index:9999; width:270px; max-height:340px; overflow-y:auto;
  background:var(--s1); border:1px solid var(--nt-line-strong); border-radius:12px;
  padding:6px; box-shadow:0 14px 44px rgba(0,0,0,.55);
}
.ne-slash-item{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:none; border:none; cursor:pointer; padding:8px 10px; border-radius:9px;
  transition:background .12s;
}
.ne-slash-item:hover, .ne-slash-item.active{ background:var(--nt-hover); }
.ne-slash-item.active{ box-shadow:inset 0 0 0 1px var(--nt-line-strong); }
.ne-slash-ico{
  flex-shrink:0; width:34px; height:34px; border-radius:8px; background:var(--s2);
  border:1px solid var(--nt-line); display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; color:var(--t1);
}
.ne-slash-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.ne-slash-nome{ font-size:13.5px; font-weight:700; color:var(--t1); }
.ne-slash-desc{ font-size:11.5px; color:var(--t3); }

/* punho de arrastar no toggle */
.ne-toggle-grip{
  flex-shrink:0; cursor:grab; color:var(--t3); font-size:16px; line-height:1;
  padding:3px 5px; border-radius:5px; user-select:none; transition:color .14s, background .14s;
  letter-spacing:-2px; touch-action:none;
}
.ne-toggle-grip:hover{ color:var(--nt-accent); background:var(--nt-hover); }
.ne-toggle-grip:active{ cursor:grabbing; }
/* o cabeçalho todo (menos título e seta) também arrasta */
.ne-toggle-head{ cursor:grab; touch-action:none; }
.ne-toggle-head:active{ cursor:grabbing; }
.ne-toggle-title{ cursor:text; touch-action:auto; }
.ne-toggle-arrow{ cursor:pointer; touch-action:auto; }
.ne-toggle-del{ touch-action:auto; }

/* estado arrastando */
.ne-toggle.ne-dragging{ opacity:.5; outline:2px dashed var(--nt-accent); }

/* marcador de onde vai soltar */
.ne-drop-marker{
  height:3px; background:var(--nt-accent); border-radius:2px; margin:4px 0;
  box-shadow:0 0 8px color-mix(in srgb, var(--nt-accent) 60%, transparent);
}