/* =========================================================================
   nyvvo — Caderno do Tópico (Obsidian-style notebook, tema claro)
   --------------------------------------------------------------------------
   Princípios:
   • "Folha de papel" — fundo claro, tipografia generosa, leitura prazerosa.
   • Chrome leve em cinza-quente; sem decoração que distrai.
   • Acentos nyvvo (verde/ciano) só onde o olhar precisa de guia.
   • Estilo neutro estilo Obsidian default: links em roxo-azulado, headings
     com separadores sutis, code blocks com fundo cinza-claro.
   ========================================================================= */

:root {
  /* superfícies */
  --gpsn-bg-shell:    #ffffff;
  --gpsn-bg-header:   #fafaf8;
  --gpsn-bg-toolbar:  #ffffff;
  --gpsn-bg-editor:   #fbfbf8;
  --gpsn-bg-preview:  #ffffff;
  --gpsn-bg-toc:      #f7f6f3;
  --gpsn-bg-footer:   #fafaf8;
  --gpsn-bg-code:     #f4f3ef;
  --gpsn-bg-soft:     #f7f6f3;
  --gpsn-bg-deep:     #efeeea;

  /* texto */
  --gpsn-text:        #2c2c2c;
  --gpsn-text-strong: #0f0f0f;
  --gpsn-text-soft:   #4a4a4a;
  --gpsn-text-muted:  #888781;

  /* bordas */
  --gpsn-border:        #e6e5e0;
  --gpsn-border-strong: #d2d1cc;

  /* marca */
  --gpsn-accent:        #1ea566;   /* verde nyvvo, escurecido p/ contraste em fundo claro */
  --gpsn-accent-soft:   #2edb7f;
  --gpsn-accent-bg:     #e6f7ee;
  --gpsn-accent-bg-2:   #d6f1e3;
  --gpsn-accent-2:      #008999;
  --gpsn-accent-3:      #2563eb;
  --gpsn-link:          #5d6ad2;   /* roxo-azulado estilo Obsidian default */
  --gpsn-link-hover:    #3b48b5;

  /* status */
  --gpsn-warn:          #c98014;
  --gpsn-danger:        #c5443c;
  --gpsn-mark:          #fff2a8;   /* highlight amarelo */
  --gpsn-selection:     #d4e7fa;

  /* tipografia */
  --gpsn-font-ui:    'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --gpsn-font-read:  'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --gpsn-font-mono:  'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --gpsn-font-quote: 'Iowan Old Style', 'Palatino', 'Georgia', serif;

  /* outros */
  --gpsn-radius:    14px;
  --gpsn-radius-sm: 8px;
  --gpsn-shadow:    0 24px 80px -20px rgba(15, 15, 15, 0.35),
                    0 0 0 1px var(--gpsn-border);
  --gpsn-tr:        160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================ Botão de gatilho ============================ */

.gps-action-button.gps-action-notebook-btn {
  position: relative;
  color: #b8c4d8;
  transition: color var(--gpsn-tr), transform var(--gpsn-tr);
}
.gps-action-button.gps-action-notebook-btn:hover {
  color: var(--gpsn-accent-soft);
}
.gps-action-button.gps-action-notebook-btn.has-note::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gpsn-accent-soft);
  box-shadow: 0 0 0 2px #060c18, 0 0 6px rgba(46, 219, 127, 0.55);
}

/* ============================== Overlay ================================== */
/* `!important` derrota a regra global em brand-system.css que reseta filhos
   diretos do body para position: relative. */
.gps-notebook-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  margin: 0 !important;
  background: rgba(8, 13, 24, 0.66);
  backdrop-filter: blur(8px) saturate(0.9);
  -webkit-backdrop-filter: blur(8px) saturate(0.9);
  z-index: 2147483600 !important;
  display: none;
  align-items: stretch;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 220ms ease;
  font-family: var(--gpsn-font-ui);
  color: var(--gpsn-text);
  box-sizing: border-box;
  isolation: isolate;
}
.gps-notebook-overlay.is-open {
  display: flex !important;
  opacity: 1;
}
.gps-notebook-overlay.is-open .gpsn-shell {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.gpsn-shell {
  width: min(1480px, 100%);
  max-height: 100%;
  background: var(--gpsn-bg-shell);
  border-radius: var(--gpsn-radius);
  box-shadow: var(--gpsn-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(8px) scale(0.99);
  opacity: 0.98;
  transition: transform 240ms cubic-bezier(0.34, 1.32, 0.64, 1), opacity 200ms ease;
}

/* =============================== Header ================================== */

.gpsn-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  border-bottom: 1px solid var(--gpsn-border);
  background: var(--gpsn-bg-header);
}
.gpsn-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.gpsn-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2edb7f 0%, #00c8d4 100%);
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 137, 153, 0.25);
}
.gpsn-icon-wrap svg { width: 18px; height: 18px; }
.gpsn-discipline {
  color: var(--gpsn-text-muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 240px;
}
.gpsn-sep { color: var(--gpsn-text-muted); font-size: 13px; }
.gpsn-topic-title {
  color: var(--gpsn-text-strong);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.gpsn-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.gpsn-save-status {
  font-size: 12px;
  color: var(--gpsn-text-soft);
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--gpsn-border);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--gpsn-tr);
  user-select: none;
  font-weight: 500;
}
.gpsn-save-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gpsn-text-muted);
}
.gpsn-save-status.is-saved { color: var(--gpsn-accent); border-color: var(--gpsn-accent-bg-2); background: var(--gpsn-accent-bg); }
.gpsn-save-status.is-saved::before { background: var(--gpsn-accent); }
.gpsn-save-status.is-saving::before { background: var(--gpsn-warn); animation: gpsn-pulse 1s infinite; }
.gpsn-save-status.is-error { color: var(--gpsn-danger); border-color: rgba(197, 68, 60, 0.2); background: #fdf3f3; }
.gpsn-save-status.is-error::before { background: var(--gpsn-danger); }

@keyframes gpsn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.gpsn-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--gpsn-text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--gpsn-tr);
}
.gpsn-icon-btn:hover {
  color: var(--gpsn-text-strong);
  background: var(--gpsn-bg-deep);
  border-color: var(--gpsn-border);
}
.gpsn-icon-btn svg { width: 16px; height: 16px; }

/* =============================== Toolbar ================================ */

.gpsn-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--gpsn-border);
  background: var(--gpsn-bg-toolbar);
  flex-wrap: wrap;
}
.gpsn-tools-group {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.gpsn-tool {
  height: 30px;
  min-width: 30px;
  padding: 0 8px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--gpsn-text-soft);
  font-family: var(--gpsn-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--gpsn-tr);
}
.gpsn-tool:hover {
  background: var(--gpsn-bg-deep);
  color: var(--gpsn-text-strong);
}
.gpsn-tool:active { background: var(--gpsn-border); }
.gpsn-tool svg { width: 15px; height: 15px; }
.gpsn-tool-sep {
  width: 1px;
  height: 20px;
  background: var(--gpsn-border);
  margin: 0 6px;
}

.gpsn-mode-switch {
  display: inline-flex;
  background: var(--gpsn-bg-deep);
  border: 1px solid var(--gpsn-border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.gpsn-mode-btn {
  height: 26px;
  padding: 0 10px;
  border-radius: 5px;
  background: transparent;
  border: none;
  color: var(--gpsn-text-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-family: var(--gpsn-font-ui);
  font-weight: 500;
  transition: all var(--gpsn-tr);
}
.gpsn-mode-btn:hover { color: var(--gpsn-text-strong); }
.gpsn-mode-btn.active {
  background: #ffffff;
  color: var(--gpsn-accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 0 0 1px var(--gpsn-accent-bg-2);
}
.gpsn-mode-btn svg { width: 14px; height: 14px; }

/* ================================ Body ================================== */

.gpsn-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 280px;
  min-height: 0;
  background: var(--gpsn-bg-shell);
  position: relative;
}
.gpsn-editor-pane  { grid-column: 1 / 2; grid-row: 1; }
.gpsn-preview-pane { grid-column: 2 / 3; grid-row: 1; }
.gpsn-toc-pane     { grid-column: 3 / 4; grid-row: 1; }

.gpsn-body[data-mode="edit"] { grid-template-columns: 1fr 0 280px; }
.gpsn-body[data-mode="edit"] .gpsn-editor-pane  { grid-column: 1 / 3; }
.gpsn-body[data-mode="edit"] .gpsn-preview-pane { display: none; }

.gpsn-body[data-mode="read"] { grid-template-columns: 0 1fr 280px; }
.gpsn-body[data-mode="read"] .gpsn-preview-pane { grid-column: 1 / 3; }
.gpsn-body[data-mode="read"] .gpsn-editor-pane  { display: none; }

.gpsn-editor-pane,
.gpsn-preview-pane {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gpsn-editor-pane  { background: var(--gpsn-bg-editor); border-right: 1px solid var(--gpsn-border); }
.gpsn-preview-pane { background: var(--gpsn-bg-preview); border-right: 1px solid var(--gpsn-border); }

/* ============================== Editor ================================== */

.gpsn-editor {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--gpsn-text);
  font-family: var(--gpsn-font-ui);
  font-size: 15.5px;
  line-height: 1.7;
  padding: 36px 44px 80px;
  letter-spacing: 0.005em;
  caret-color: var(--gpsn-accent);
  tab-size: 2;
  -moz-tab-size: 2;
}
.gpsn-editor::placeholder {
  color: var(--gpsn-text-muted);
  font-style: italic;
}
.gpsn-editor::selection { background: var(--gpsn-selection); }

/* Scrollbars sutis */
.gpsn-editor::-webkit-scrollbar,
.gpsn-preview-pane::-webkit-scrollbar,
.gpsn-toc::-webkit-scrollbar { width: 10px; }
.gpsn-editor::-webkit-scrollbar-track,
.gpsn-preview-pane::-webkit-scrollbar-track,
.gpsn-toc::-webkit-scrollbar-track { background: transparent; }
.gpsn-editor::-webkit-scrollbar-thumb,
.gpsn-preview-pane::-webkit-scrollbar-thumb,
.gpsn-toc::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.10);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.gpsn-editor::-webkit-scrollbar-thumb:hover,
.gpsn-preview-pane::-webkit-scrollbar-thumb:hover,
.gpsn-toc::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.22);
  background-clip: padding-box;
}

/* ============================== Preview ================================= */

.gpsn-preview-pane { overflow-y: auto; overflow-x: hidden; }
.gpsn-preview {
  max-width: none;
  margin: 0;
  padding: 48px 64px 96px;
  font-family: var(--gpsn-font-read);
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--gpsn-text);
  word-wrap: break-word;
  font-feature-settings: "kern", "liga";
}

.gpsn-preview > *:first-child { margin-top: 0; }
.gpsn-preview > *:last-child { margin-bottom: 0; }

/* Headings */
.gpsn-preview h1,
.gpsn-preview h2,
.gpsn-preview h3,
.gpsn-preview h4,
.gpsn-preview h5,
.gpsn-preview h6 {
  font-family: var(--gpsn-font-ui);
  font-weight: 700;
  color: var(--gpsn-text-strong);
  letter-spacing: -0.022em;
  line-height: 1.3;
  scroll-margin-top: 24px;
}
.gpsn-preview h1 {
  font-size: 2.05em;
  margin: 0.6em 0 0.55em;
  padding-bottom: 0.28em;
  border-bottom: 1px solid var(--gpsn-border);
}
.gpsn-preview h2 {
  font-size: 1.55em;
  margin: 1.5em 0 0.5em;
  padding-bottom: 0.22em;
  border-bottom: 1px solid var(--gpsn-border);
}
.gpsn-preview h3 { font-size: 1.28em; margin: 1.4em 0 0.4em; color: #1a1a1a; }
.gpsn-preview h4 { font-size: 1.1em; margin: 1.2em 0 0.4em; color: #2c2c2c; }
.gpsn-preview h5 {
  font-size: 0.9em; margin: 1em 0 0.3em;
  color: var(--gpsn-text-muted);
  text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700;
}
.gpsn-preview h6 { font-size: 0.92em; margin: 1em 0 0.3em; color: var(--gpsn-text-soft); }

/* Texto */
.gpsn-preview p { margin: 0 0 1.1em; }
.gpsn-preview strong { color: var(--gpsn-text-strong); font-weight: 700; }
.gpsn-preview em { color: var(--gpsn-text); font-style: italic; }
.gpsn-preview del { color: var(--gpsn-text-muted); }
.gpsn-preview ::selection { background: var(--gpsn-selection); }

/* Links */
.gpsn-preview a {
  color: var(--gpsn-link);
  text-decoration: none;
  border-bottom: 1px solid rgba(93, 106, 210, 0.25);
  transition: all var(--gpsn-tr);
}
.gpsn-preview a:hover {
  color: var(--gpsn-link-hover);
  border-bottom-color: var(--gpsn-link-hover);
}

/* Listas */
.gpsn-preview ul,
.gpsn-preview ol { margin: 0 0 1.1em; padding-left: 1.6em; }
.gpsn-preview li { margin: 0.25em 0; }
.gpsn-preview li::marker { color: var(--gpsn-accent); }
.gpsn-preview ul ul,
.gpsn-preview ol ol,
.gpsn-preview ul ol,
.gpsn-preview ol ul { margin: 0.25em 0; }

/* Task list */
.gpsn-preview .gpsn-task-list-item { list-style: none; margin-left: -1.4em; padding-left: 0; }
.gpsn-preview .gpsn-task-list-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--gpsn-border-strong);
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: -3px;
  cursor: pointer;
  background: #ffffff;
  transition: all var(--gpsn-tr);
}
.gpsn-preview .gpsn-task-list-item input[type="checkbox"]:checked {
  background: var(--gpsn-accent);
  border-color: var(--gpsn-accent);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M6 11.5L2.5 8l1.4-1.4L6 8.7l6.1-6.1L13.5 4z'/%3E%3C/svg%3E");
  background-size: contain;
}
.gpsn-preview .gpsn-task-list-item input[type="checkbox"]:checked + * { color: var(--gpsn-text-muted); text-decoration: line-through; }

/* Citação simples (sem [!tipo]) */
.gpsn-preview blockquote {
  margin: 1.3em 0;
  padding: 0.4em 0 0.4em 1.4em;
  position: relative;
  color: var(--gpsn-text-soft);
  font-family: var(--gpsn-font-quote);
  font-style: italic;
  font-size: 1.04em;
}
.gpsn-preview blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.3em;
  width: 3px;
  border-radius: 2px;
  background: var(--gpsn-border-strong);
}

/* Separador */
.gpsn-preview hr {
  border: 0;
  height: 1px;
  background: var(--gpsn-border);
  margin: 2.2em 0;
}

/* Inline code */
.gpsn-preview code {
  font-family: var(--gpsn-font-mono);
  font-size: 0.86em;
  background: var(--gpsn-bg-code);
  color: #b03864;
  padding: 0.15em 0.42em;
  border-radius: 4px;
  border: 1px solid #e8e7e2;
}

/* Code blocks */
.gpsn-preview pre {
  margin: 1.4em 0;
  padding: 18px 20px;
  background: var(--gpsn-bg-code);
  border: 1px solid var(--gpsn-border);
  border-radius: var(--gpsn-radius-sm);
  overflow-x: auto;
  font-family: var(--gpsn-font-mono);
  font-size: 13.5px;
  line-height: 1.65;
  position: relative;
}
.gpsn-preview pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--gpsn-text);
  font-size: inherit;
}
.gpsn-preview pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gpsn-text-muted);
  font-family: var(--gpsn-font-ui);
}

/* Tokens (highlight leve em fundo claro) */
.gpsn-tk-kw  { color: #8839ef; font-weight: 600; }
.gpsn-tk-str { color: #40a02b; }
.gpsn-tk-num { color: #df8e1d; }
.gpsn-tk-cmt { color: #8a8a8a; font-style: italic; }
.gpsn-tk-fn  { color: #1e66f5; }

/* Tabelas */
.gpsn-preview table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 0.95em;
  border: 1px solid var(--gpsn-border);
  border-radius: var(--gpsn-radius-sm);
  overflow: hidden;
}
.gpsn-preview th,
.gpsn-preview td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--gpsn-border);
  border-right: 1px solid var(--gpsn-border);
  text-align: left;
  vertical-align: top;
}
.gpsn-preview th:last-child,
.gpsn-preview td:last-child { border-right: 0; }
.gpsn-preview tbody tr:last-child td { border-bottom: 0; }
.gpsn-preview thead th {
  background: var(--gpsn-bg-soft);
  font-weight: 600;
  color: var(--gpsn-text-strong);
  font-size: 0.92em;
  letter-spacing: 0.01em;
}
.gpsn-preview tbody tr:nth-child(even) { background: #fafaf8; }

/* Highlight (==texto==) */
.gpsn-preview mark {
  background: var(--gpsn-mark);
  color: var(--gpsn-text-strong);
  padding: 0.05em 0.3em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Callouts (Obsidian-style) */
.gpsn-preview .gpsn-callout {
  margin: 1.4em 0;
  padding: 14px 18px 14px 16px;
  border-radius: var(--gpsn-radius-sm);
  border-left: 4px solid var(--gpsn-link);
  background: #f4f5fc;
  color: var(--gpsn-text);
}
.gpsn-preview .gpsn-callout > *:last-child { margin-bottom: 0; }
.gpsn-preview .gpsn-callout-title {
  font-weight: 700;
  color: var(--gpsn-link);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.96em;
}
.gpsn-preview .gpsn-callout-title svg { width: 16px; height: 16px; }

.gpsn-preview .gpsn-callout-nota,
.gpsn-preview .gpsn-callout-info,
.gpsn-preview .gpsn-callout-question,
.gpsn-preview .gpsn-callout-quiz {
  border-left-color: var(--gpsn-link);
  background: #f4f5fc;
}
.gpsn-preview .gpsn-callout-nota .gpsn-callout-title,
.gpsn-preview .gpsn-callout-info .gpsn-callout-title,
.gpsn-preview .gpsn-callout-question .gpsn-callout-title,
.gpsn-preview .gpsn-callout-quiz .gpsn-callout-title { color: var(--gpsn-link); }

.gpsn-preview .gpsn-callout-dica,
.gpsn-preview .gpsn-callout-tip {
  border-left-color: #c98014;
  background: #fdf6e8;
}
.gpsn-preview .gpsn-callout-dica .gpsn-callout-title,
.gpsn-preview .gpsn-callout-tip .gpsn-callout-title { color: #a96510; }

.gpsn-preview .gpsn-callout-atencao,
.gpsn-preview .gpsn-callout-warning {
  border-left-color: #c5443c;
  background: #fdf0ee;
}
.gpsn-preview .gpsn-callout-atencao .gpsn-callout-title,
.gpsn-preview .gpsn-callout-warning .gpsn-callout-title { color: #a3322a; }

.gpsn-preview .gpsn-callout-importante {
  border-left-color: #b03864;
  background: #fbeff4;
}
.gpsn-preview .gpsn-callout-importante .gpsn-callout-title { color: #93304f; }

.gpsn-preview .gpsn-callout-exemplo {
  border-left-color: #7c3aed;
  background: #f4f0fc;
}
.gpsn-preview .gpsn-callout-exemplo .gpsn-callout-title { color: #6925cc; }

.gpsn-preview .gpsn-callout-resumo {
  border-left-color: var(--gpsn-accent);
  background: var(--gpsn-accent-bg);
}
.gpsn-preview .gpsn-callout-resumo .gpsn-callout-title { color: #167a4c; }

/* Mermaid */
.gpsn-preview .gpsn-mermaid {
  margin: 1.6em 0;
  padding: 22px;
  background: var(--gpsn-bg-soft);
  border: 1px solid var(--gpsn-border);
  border-radius: var(--gpsn-radius-sm);
  text-align: center;
  overflow-x: auto;
}
.gpsn-preview .gpsn-mermaid svg { max-width: 100%; height: auto; }
.gpsn-preview .gpsn-mermaid-error {
  color: var(--gpsn-danger);
  font-family: var(--gpsn-font-mono);
  font-size: 13px;
  text-align: left;
  white-space: pre-wrap;
}

/* Imagens */
.gpsn-preview img {
  max-width: 100%;
  height: auto;
  border-radius: var(--gpsn-radius-sm);
  border: 1px solid var(--gpsn-border);
  margin: 1em 0;
  display: block;
}

/* Estado vazio */
.gpsn-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--gpsn-text-muted);
  padding: 80px 30px;
}
.gpsn-preview-empty .gpsn-empty-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gpsn-accent-bg), #d8f4ee);
  border: 1px solid var(--gpsn-accent-bg-2);
  margin-bottom: 18px;
  color: var(--gpsn-accent);
}
.gpsn-preview-empty .gpsn-empty-icon svg { width: 28px; height: 28px; }
.gpsn-preview-empty h3 {
  font-size: 18px;
  margin: 0 0 8px;
  font-weight: 600;
  color: var(--gpsn-text-strong);
  letter-spacing: -0.01em;
}
.gpsn-preview-empty p {
  font-size: 14px;
  margin: 0 0 22px;
  max-width: 380px;
  line-height: 1.6;
  color: var(--gpsn-text-soft);
}
.gpsn-skeleton-btn {
  background: linear-gradient(135deg, #2edb7f, #00b3bf);
  color: #ffffff;
  border: 0;
  padding: 9px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform var(--gpsn-tr), box-shadow var(--gpsn-tr);
  box-shadow: 0 2px 8px rgba(0, 137, 153, 0.25);
}
.gpsn-skeleton-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 137, 153, 0.35);
}
.gpsn-skeleton-btn svg { width: 14px; height: 14px; }

/* ================================= TOC ================================== */

.gpsn-toc-pane {
  background: var(--gpsn-bg-toc);
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--gpsn-border);
}
.gpsn-toc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gpsn-text-muted);
  border-bottom: 1px solid var(--gpsn-border);
}
.gpsn-toc-header svg { width: 14px; height: 14px; }
.gpsn-toc {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 6px 20px;
  font-size: 13px;
  line-height: 1.55;
}
.gpsn-toc-item {
  display: block;
  padding: 5px 14px 5px 16px;
  color: var(--gpsn-text-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  transition: all var(--gpsn-tr);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.gpsn-toc-item:hover {
  color: var(--gpsn-text-strong);
  background: rgba(0, 0, 0, 0.04);
}
.gpsn-toc-item.is-active {
  color: var(--gpsn-accent);
  background: var(--gpsn-accent-bg);
  border-left-color: var(--gpsn-accent);
  font-weight: 600;
}
.gpsn-toc-item[data-level="1"] { padding-left: 16px; font-weight: 600; color: var(--gpsn-text-strong); }
.gpsn-toc-item[data-level="2"] { padding-left: 30px; }
.gpsn-toc-item[data-level="3"] { padding-left: 46px; font-size: 12.5px; color: var(--gpsn-text-soft); }
.gpsn-toc-item[data-level="4"] { padding-left: 60px; font-size: 12px; color: var(--gpsn-text-muted); }
.gpsn-toc-item[data-level="5"],
.gpsn-toc-item[data-level="6"] { padding-left: 70px; font-size: 11.5px; color: var(--gpsn-text-muted); }
.gpsn-toc-empty {
  padding: 20px;
  font-size: 12.5px;
  color: var(--gpsn-text-muted);
  font-style: italic;
  text-align: center;
}

/* =============================== Footer ================================= */

.gpsn-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  font-size: 11.5px;
  color: var(--gpsn-text-muted);
  border-top: 1px solid var(--gpsn-border);
  background: var(--gpsn-bg-footer);
  font-family: var(--gpsn-font-ui);
  user-select: none;
  gap: 16px;
}
.gpsn-count { font-variant-numeric: tabular-nums; font-weight: 500; }
.gpsn-shortcuts { font-size: 11px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================ Confirmação ================================ */

.gpsn-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(2px);
}
.gpsn-confirm-card {
  background: #ffffff;
  border: 1px solid var(--gpsn-border);
  border-radius: 12px;
  padding: 22px 24px;
  max-width: 360px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}
.gpsn-confirm-card h4 { font-size: 15px; margin: 0 0 8px; color: var(--gpsn-text-strong); font-weight: 700; }
.gpsn-confirm-card p { font-size: 13px; color: var(--gpsn-text-soft); margin: 0 0 16px; line-height: 1.55; }
.gpsn-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.gpsn-confirm-actions button {
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid var(--gpsn-border-strong);
  background: #ffffff;
  color: var(--gpsn-text-soft);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--gpsn-font-ui);
  transition: all var(--gpsn-tr);
}
.gpsn-confirm-actions button:hover { background: var(--gpsn-bg-deep); color: var(--gpsn-text-strong); }
.gpsn-confirm-actions button.is-primary {
  background: var(--gpsn-accent);
  border-color: var(--gpsn-accent);
  color: #ffffff;
  font-weight: 700;
}
.gpsn-confirm-actions button.is-primary:hover { background: #167a4c; border-color: #167a4c; color: #ffffff; }
.gpsn-confirm-actions button.is-danger {
  background: #fdf3f3;
  border-color: rgba(197, 68, 60, 0.3);
  color: var(--gpsn-danger);
}
.gpsn-confirm-actions button.is-danger:hover { background: #fae5e3; color: #8a302a; }

/* ============================ Responsivo ================================ */

@media (max-width: 1100px) {
  .gpsn-body { grid-template-columns: 1fr 1fr; }
  .gpsn-body[data-mode="edit"] { grid-template-columns: 1fr 0; }
  .gpsn-body[data-mode="read"] { grid-template-columns: 0 1fr; }
  .gpsn-toc-pane { display: none; }
  .gpsn-shortcuts { display: none; }
}

@media (max-width: 820px) {
  .gps-notebook-overlay { padding: 0; }
  .gpsn-shell { border-radius: 0; }
  .gpsn-body,
  .gpsn-body[data-mode="edit"],
  .gpsn-body[data-mode="read"] { grid-template-columns: 1fr; }
  .gpsn-editor-pane,
  .gpsn-preview-pane { grid-column: 1 / 2; }
  .gpsn-body[data-mode="split"] .gpsn-editor-pane { display: none; }
  .gpsn-body[data-mode="split"] .gpsn-preview-pane { display: flex; grid-column: 1 / 2; }
  .gpsn-toolbar { padding: 6px 10px; gap: 6px; }
  .gpsn-tool { height: 28px; min-width: 28px; padding: 0 6px; font-size: 11px; }
  .gpsn-preview { padding: 28px 22px 80px; font-size: 15.5px; }
  .gpsn-editor { padding: 24px 22px 80px; font-size: 15px; }
  .gpsn-discipline { display: none; }
  .gpsn-sep { display: none; }
}

/* ============================ Print ===================================== */

@media print {
  .gps-notebook-overlay { position: static !important; background: white; padding: 0; backdrop-filter: none; }
  .gpsn-shell { box-shadow: none; max-height: none; border-radius: 0; }
  .gpsn-header,
  .gpsn-toolbar,
  .gpsn-footer,
  .gpsn-toc-pane,
  .gpsn-editor-pane { display: none !important; }
  .gpsn-body { grid-template-columns: 1fr !important; background: white; }
  .gpsn-preview-pane { overflow: visible; border: 0; grid-column: 1 / 2 !important; }
  .gpsn-preview {
    color: #1a1a1a;
    font-size: 11.5pt;
    max-width: 100%;
    padding: 24px;
  }
  .gpsn-preview h1, .gpsn-preview h2, .gpsn-preview h3,
  .gpsn-preview h4, .gpsn-preview h5, .gpsn-preview h6 { color: #0a0a0a; }
  .gpsn-preview pre { background: #f4f4f4; color: #1a1a1a; border-color: #ddd; }
  .gpsn-preview code { background: #f4f4f4; color: #b03864; border-color: #ddd; }
  .gpsn-preview a { color: #0066cc; border-bottom: none; text-decoration: underline; }
  .gpsn-preview blockquote { color: #555; }
  .gpsn-preview .gpsn-callout { background: #f7f7f5 !important; border-left-color: #888 !important; color: #1a1a1a; }
  .gpsn-preview .gpsn-callout-title { color: #555 !important; }
  .gpsn-preview thead th { background: #f4f4f4 !important; }
}