/* Tema LCARS do PADD. Só fica ativo quando o tema escolhido é nebula,
   deep ou light (ver theme.js) — aí ele SUBSTITUI o note.css inteiro,
   por isso repete o básico (editor, painéis, preview). */

@font-face { font-family: Antonio; src: url(fonts/antonio-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Antonio; src: url(fonts/antonio-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Antonio; src: url(fonts/antonio-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

/* ---- Paletas ------------------------------------------------------------
   c1..c6: cores das peças (fundo dos blocos, com --ink por cima).
   --accent: a mesma família de cor, mas segura pra texto sobre o fundo. */
html[data-theme="nebula"] {
  color-scheme: dark;
  --space: #0c0510;
  --c1: #ff6a3d; --c2: #ec5f9f; --c3: #c54a92; --c4: #b462a8; --c5: #ff8a6a; --c6: #e8506a;
  --ink: #1a0710;
  --text: #f6e9f1;
  --muted: #c49ab8;
  --accent: #ec5f9f;
  --hi: #ff8a6a;
  --line: rgba(236, 95, 159, .38);
  --glass: rgba(18, 6, 20, .58);
  --glass-solid: rgba(24, 9, 27, .94);
  --grid: rgba(255, 255, 255, .035);
  --ok: #7ee0c3; --busy: #ffc46b; --off: #ff5a6e;
  --star: #fff; --star-o: 1;
  --scrim: rgba(5, 0, 8, .55);
  --nebula:
    radial-gradient(60% 45% at 72% 42%, rgba(214, 51, 108, .55), transparent 70%),
    radial-gradient(45% 40% at 88% 78%, rgba(255, 90, 60, .45), transparent 70%),
    radial-gradient(55% 50% at 18% 18%, rgba(88, 24, 120, .65), transparent 72%),
    radial-gradient(40% 35% at 35% 85%, rgba(150, 30, 90, .35), transparent 70%);
}
html[data-theme="deep"] {
  color-scheme: dark;
  --space: #030a16;
  --c1: #5ad1d6; --c2: #4fa8e8; --c3: #7a7de0; --c4: #4f86b8; --c5: #8fe3d0; --c6: #8d70dc;
  --ink: #04121c;
  --text: #e4f3fb;
  --muted: #8db3c9;
  --accent: #6cbcf0;
  --hi: #8fe3d0;
  --line: rgba(90, 209, 214, .35);
  --glass: rgba(3, 12, 26, .6);
  --glass-solid: rgba(6, 18, 36, .95);
  --grid: rgba(255, 255, 255, .035);
  --ok: #8fe3d0; --busy: #ffd27a; --off: #ff6b81;
  --star: #fff; --star-o: 1;
  --scrim: rgba(0, 4, 12, .55);
  --nebula:
    linear-gradient(115deg, transparent 30%, rgba(150, 215, 255, .10) 42%, transparent 55%),
    linear-gradient(120deg, transparent 45%, rgba(150, 215, 255, .07) 52%, transparent 62%),
    radial-gradient(55% 45% at 25% 5%, rgba(30, 140, 175, .55), transparent 70%),
    radial-gradient(50% 45% at 85% 85%, rgba(57, 73, 171, .40), transparent 70%),
    radial-gradient(60% 50% at 60% 50%, rgba(20, 60, 110, .45), transparent 75%);
}
html[data-theme="light"] {
  color-scheme: light;
  --space: #f1f0f5;
  --c1: #ec7436; --c2: #d65a9a; --c3: #8577da; --c4: #a993d9; --c5: #f3a85e; --c6: #e06060;
  --ink: #1b1424;
  --text: #221c2e;
  --muted: #6d6482;
  --accent: #b23574;
  --hi: #c4501a;
  --line: rgba(116, 102, 207, .38);
  --glass: rgba(255, 255, 255, .72);
  --glass-solid: rgba(255, 255, 255, .97);
  --grid: rgba(60, 40, 120, .05);
  --ok: #17a179; --busy: #d98a14; --off: #d63c3c;
  --star: #7466cf; --star-o: .35;
  --scrim: rgba(40, 30, 70, .25);
  --nebula:
    radial-gradient(50% 45% at 88% 12%, rgba(255, 160, 110, .30), transparent 70%),
    radial-gradient(55% 50% at 8% 92%, rgba(150, 140, 255, .28), transparent 70%),
    radial-gradient(45% 40% at 62% 58%, rgba(255, 130, 190, .16), transparent 70%);
}

/* ---- Base ------------------------------------------------------------------ */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--nebula), var(--space);
  background-attachment: fixed;
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
::selection { background: color-mix(in srgb, var(--c2) 40%, transparent); }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

#lc-stars { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
#lc-stars i {
  position: absolute; display: block; border-radius: 50%;
  background: var(--star); opacity: calc(var(--o) * var(--star-o));
}

.lc-mono {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
}

/* "Cotovelos" e barras horizontais */
.lc-elbow { position: relative; color: var(--ink); }
.lc-elbow::after { content: ""; position: absolute; left: 100%; width: 40px; height: 40px; }
#lc-top {
  background: var(--c1); border-top-left-radius: 70px;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end;
  padding: 0 16px 10px;
}
#lc-top::after { top: 26px; background: radial-gradient(circle at 100% 100%, transparent 39.5px, var(--c1) 40px); }
#lc-bottom {
  background: var(--c3); border-bottom-left-radius: 70px;
  display: flex; justify-content: flex-end; padding: 10px 16px 0;
}
#lc-bottom::after { bottom: 26px; background: radial-gradient(circle at 100% 0, transparent 39.5px, var(--c3) 40px); }
.lc-brand { font: 700 34px/1 Antonio, sans-serif; letter-spacing: .08em; }
.lc-sub { font-size: 10px; letter-spacing: .14em; opacity: .75; text-transform: uppercase; }

.lc-arm { display: flex; gap: 6px; height: 26px; }
.lc-arm i { display: block; height: 100%; }
.lc-arm i:last-child { border-radius: 0 13px 13px 0; }
#lc-head .lc-arm i:nth-child(1) { flex: 6; background: var(--c1); }
#lc-head .lc-arm i:nth-child(2) { flex: 1; background: var(--c5); }
#lc-head .lc-arm i:nth-child(3) { flex: 2; background: var(--c2); }
#lc-head .lc-arm i:nth-child(4) { flex: .6; background: var(--c4); }
#lc-head .lc-arm i:nth-child(5) { flex: 1.4; background: var(--c3); }
#lc-foot .lc-arm i:nth-child(1) { flex: 1.2; background: var(--c3); }
#lc-foot .lc-arm i:nth-child(2) { flex: 4; background: var(--c4); }
#lc-foot .lc-arm i:nth-child(3) { flex: .5; background: var(--c2); }
#lc-foot .lc-arm i:nth-child(4) { flex: 1; background: var(--c1); }

/* ---- Página da nota: moldura em grid -----------------------------------
   #main-column e #status-bar viram "display: contents" — os filhos deles
   (editor, preview, status, links) passam a ser itens deste grid e cada
   um vai pro seu lugar na moldura. */
body.note-page {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  grid-template-rows: 108px auto minmax(0, 1fr) auto 100px;
  grid-template-areas:
    "top  head"
    "side screen"
    "fill screen"
    "act  screen"
    "bot  foot";
  padding: 18px 22px 18px 18px;
}
#main-column, #status-bar { display: contents; }
#lc-top { grid-area: top; }
#lc-head { grid-area: head; }
#sidebar { grid-area: side; }
#lc-fill { grid-area: fill; }
#status-bar .links { grid-area: act; }
#lc-screen, #editor, #preview { grid-area: screen; }
#lc-bottom { grid-area: bot; }
#lc-foot, #status { grid-area: foot; }

#lc-head { display: grid; grid-template-rows: 26px 1fr; min-width: 0; }
.lc-heading {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 0 4px 6px 56px; min-width: 0;
}
.lc-heading > div:first-child { min-width: 0; }
#lc-crumb { color: var(--muted); font-size: 12px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lc-title {
  font: 600 44px/1 Antonio, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lc-stardate { text-align: right; flex-shrink: 0; }
.lc-stardate .lc-mono { color: var(--muted); }
#lc-stardate { font: 400 26px/1.1 Antonio, sans-serif; color: var(--hi); letter-spacing: .05em; }

/* Trilho lateral: sub-notas */
#sidebar { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; max-height: 42vh; overflow-y: auto; scrollbar-width: none; }
#sidebar::-webkit-scrollbar { display: none; }
#sidebar-up {
  display: flex; align-items: flex-end; justify-content: flex-end; flex-shrink: 0;
  min-height: 34px; padding: 0 14px 6px; background: var(--c3); color: var(--ink);
  text-decoration: none; font-size: 0;
}
#sidebar-up::after {
  content: "‹ " attr(data-parent);
  font: 600 18px/1 Antonio, sans-serif; letter-spacing: .07em; text-transform: uppercase;
}
#sidebar-title { font-size: 0; padding: 10px 0 2px 2px; }
#sidebar-title::before {
  content: "sub-notas · " attr(data-count);
  font: 400 11px/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
#sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#sidebar-list a {
  display: flex; align-items: center; justify-content: flex-end;
  min-height: 38px; padding: 0 14px;
  border: 1.5px solid var(--c2); border-left-width: 6px; border-radius: 0 19px 19px 0;
  background: color-mix(in srgb, var(--c2) 8%, transparent);
  color: var(--accent); text-decoration: none;
  font: 600 16px/1.1 Antonio, sans-serif; letter-spacing: .07em; text-transform: uppercase;
  text-align: right; overflow-wrap: anywhere;
}
#sidebar-list a .slash { display: none; }
@media (hover: hover) {
  #sidebar-list a:hover { background: color-mix(in srgb, var(--c2) 22%, transparent); }
}

/* Bloco de preenchimento do trilho */
#lc-fill {
  position: relative; margin: 6px 0; min-height: 30px;
  background: color-mix(in srgb, var(--c4) 40%, transparent);
}
.lc-pixels { position: absolute; left: 12px; bottom: 10px; display: grid; grid-template-columns: repeat(4, 10px); gap: 5px; }
.lc-pixels i { width: 10px; height: 10px; display: block; background: var(--c2); }
.lc-pixels i.o { background: transparent; outline: 1px solid var(--c2); outline-offset: -1px; }
.lc-pixels i.d { background: var(--c5); }
.lc-seg { display: none; }

/* Trilho lateral: ações (no desktop, cada link vira um bloco) */
#status-bar .links { display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; position: relative; }
#more-links, #logout-form { display: contents; }
#more-toggle, .links .history-link.lc-only { display: none; }
.links a, .links button {
  display: flex; align-items: flex-end; justify-content: flex-end;
  min-height: 42px; padding: 0 14px 6px; margin: 0;
  border: none; border-radius: 0; cursor: pointer;
  color: var(--ink); text-decoration: none; text-align: right;
  font: 600 18px/1 Antonio, sans-serif; letter-spacing: .07em; text-transform: uppercase;
}
#preview-toggle { background: var(--c2); }
.links .history-link { background: var(--c5); }
#notes-link { background: var(--c4); }
#zip-link { background: var(--c1); }
#theme-link { background: var(--c3); min-height: 34px; }
#logout-form button { background: var(--c6); min-height: 34px; }
@media (hover: hover) {
  .links a:hover, .links button:hover { filter: brightness(1.12); }
}

/* Tela principal (painel de vidro + editor/preview por cima) */
#lc-screen {
  position: relative; margin: 20px 0 20px 30px; min-height: 0;
  border: 1px solid var(--line); border-radius: 30px;
  background:
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 96px),
    var(--glass);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  overflow: hidden;
}
.lc-tag { position: absolute; top: 14px; left: 28px; right: 90px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-tag b { color: var(--hi); font-weight: 500; }
.lc-hatch {
  position: absolute; right: 18px; top: 60px; width: 22px; height: 38%;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(-45deg, var(--c1) 0 2px, transparent 2px 7px);
  opacity: .75;
}
.lc-ticks { position: absolute; right: 18px; bottom: 16px; display: flex; gap: 6px; }
.lc-ticks i { width: 9px; height: 9px; display: block; background: var(--c2); }
.lc-ticks i:nth-child(2) { background: var(--c1); }
.lc-ticks i:nth-child(3) { opacity: .4; }
.lc-ring { position: absolute; width: 16px; height: 16px; border: 1px solid var(--line); border-radius: 50%; }

#editor, #preview {
  align-self: stretch; justify-self: stretch;
  width: auto; height: auto; min-width: 0; min-height: 0;
  margin: 64px 64px 52px 58px;
  z-index: 1;
}
#editor {
  border: none; outline: none; resize: none; padding: 0;
  background: transparent; color: var(--text); caret-color: var(--c1);
  font: 400 15px/1.65 "JetBrains Mono", ui-monospace, monospace;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--c4) 70%, transparent) transparent;
}
#editor::placeholder { color: var(--muted); opacity: .8; }

/* Preview de Markdown */
#preview {
  overflow-y: auto; overflow-wrap: anywhere;
  font: 400 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--c4) 70%, transparent) transparent;
}
#preview > :first-child { margin-top: 0; }
#preview h1, #preview h2, #preview h3, #preview h4, #preview h5, #preview h6 {
  font-family: Antonio, sans-serif; font-weight: 600; letter-spacing: .04em;
  color: var(--accent); margin: 1.2em 0 .45em; line-height: 1.2;
}
#preview h1 { font-size: 2em; }
#preview h2 { font-size: 1.6em; }
#preview h3 { font-size: 1.3em; }
#preview p { margin: .75em 0; }
#preview ul, #preview ol { margin: .75em 0; padding-left: 1.5em; }
#preview li { margin: .2em 0; }
#preview li::marker { color: var(--hi); }
#preview li:has(input[type="checkbox"]) { list-style: none; margin-left: -1.5em; }
#preview input[type="checkbox"] { accent-color: var(--c1); }
#preview a { color: var(--accent); }
#preview blockquote { margin: .75em 0; padding: .1em 1em; border-left: 4px solid var(--c1); color: var(--muted); }
#preview code {
  font-family: "JetBrains Mono", monospace; font-size: .88em;
  background: color-mix(in srgb, var(--c4) 18%, transparent); padding: .15em .35em; border-radius: 4px;
}
#preview pre {
  background: color-mix(in srgb, var(--c4) 14%, transparent); border: 1px solid var(--line);
  padding: .85em 1em; border-radius: 12px; overflow-x: auto;
}
#preview pre code { background: none; padding: 0; overflow-wrap: normal; }
#preview img { max-width: 100%; height: auto; }
#preview hr { border: none; border-top: 1px solid var(--line); margin: 1.5em 0; }
#preview table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: .75em 0; }
#preview th, #preview td { border: 1px solid var(--line); padding: .4em .7em; text-align: left; overflow-wrap: normal; }
#preview th { font-family: Antonio, sans-serif; letter-spacing: .05em; color: var(--accent); }

/* Base: status + decoração */
#status {
  align-self: start; justify-self: start;
  margin: 22px 0 0 56px; max-width: calc(100% - 420px);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--glass);
  font: 400 11px/1.2 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  z-index: 1;
}
#status::before {
  content: ""; flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--busy); box-shadow: 0 0 10px var(--busy);
}
#status[data-state="ok"]::before { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
#status[data-state="offline"]::before { background: var(--off); box-shadow: 0 0 10px var(--off); }
#lc-foot {
  display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: 1fr 26px;
  column-gap: 40px; align-items: center; min-width: 0;
}
.lc-slashes { grid-column: 2; color: var(--accent); opacity: .6; letter-spacing: .35em; font-size: 15px; }
.lc-swatches { grid-column: 3; display: flex; gap: 4px; padding-right: 4px; }
.lc-swatches i { width: 26px; height: 14px; display: block; }
.lc-swatches i:nth-child(1) { background: var(--c4); }
.lc-swatches i:nth-child(2) { background: var(--c1); }
.lc-swatches i:nth-child(3) { background: var(--c5); width: 44px; }
.lc-swatches i:nth-child(4) { background: var(--c3); }
.lc-swatches i:nth-child(5) { background: var(--c2); width: 60px; }
#lc-foot .lc-arm { grid-column: 1 / -1; grid-row: 2; }

/* ---- Painéis (histórico, tema) ------------------------------------------- */
.panel {
  position: fixed; inset: 0; z-index: 20;
  background: var(--scrim);
  align-items: center; justify-content: center; padding: 2rem;
}
.panel:not([hidden]) { display: flex; }
.panel-inner {
  width: min(520px, 100%); max-height: 80vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--glass-solid); color: var(--text);
  border: 1px solid var(--line); border-radius: 0 26px 26px 0;
  border-left: 10px solid var(--c1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.panel-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--line);
}
.panel-header strong { font: 600 24px/1 Antonio, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.panel-header button {
  border: none; border-radius: 0 16px 16px 0; padding: 8px 16px 6px;
  background: var(--c3); color: var(--ink); cursor: pointer;
  font: 600 16px/1 Antonio, sans-serif; letter-spacing: .07em; text-transform: uppercase;
}
.panel-list { overflow-y: auto; padding: 8px; }
.panel-list button {
  display: block; width: 100%; text-align: left;
  padding: 11px 12px; margin: 0 0 2px; border: none; border-radius: 10px;
  background: none; color: var(--text); cursor: pointer;
  font: 400 13px/1.45 "JetBrains Mono", monospace; overflow-wrap: anywhere;
}
.panel-list small { color: var(--muted); font-size: 11px; }
.panel-list button.current { background: color-mix(in srgb, var(--c1) 18%, transparent); box-shadow: inset 4px 0 0 var(--c1); }
.panel-list button.current::after { content: "  ●"; color: var(--c1); }
@media (hover: hover) {
  .panel-list button:hover { background: color-mix(in srgb, var(--c2) 14%, transparent); }
}
#theme-list button { font: 600 18px/1.3 Antonio, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
#theme-list small { font: 400 11px "JetBrains Mono", monospace; letter-spacing: .04em; text-transform: none; }

/* ---- Celular ----------------------------------------------------------------- */
@media (max-width: 640px) {
  body.note-page {
    grid-template-columns: 20px minmax(0, 1fr);
    grid-template-rows: 74px auto minmax(0, 1fr) auto 58px;
    grid-template-areas:
      "top  head"
      "fill side"
      "fill screen"
      "fill act"
      "bot  foot";
    padding: 10px 10px 10px 8px;
  }
  #lc-top { border-top-left-radius: 26px; padding: 0; }
  #lc-bottom { border-bottom-left-radius: 26px; padding: 0; }
  #lc-top > *, #lc-bottom > * { display: none; }
  .lc-elbow::after { width: 18px; height: 18px; }
  #lc-top::after { top: 14px; background: radial-gradient(circle at 100% 100%, transparent 17.5px, var(--c1) 18px); }
  #lc-bottom::after { bottom: 14px; background: radial-gradient(circle at 100% 0, transparent 17.5px, var(--c3) 18px); }
  .lc-arm { height: 14px; gap: 4px; }
  .lc-arm i:last-child { border-radius: 0 7px 7px 0; }
  #lc-head .lc-arm i:nth-child(4) { display: none; }
  #lc-head { grid-template-rows: 14px 1fr; }
  .lc-heading { padding: 0 2px 2px 26px; }
  #lc-title { font-size: 34px; }
  #lc-crumb { font-size: 10px; margin-bottom: 2px; }
  #lc-stardate { font-size: 17px; }
  .lc-stardate .lc-mono { font-size: 9px; }

  /* trilho fino segmentado à esquerda */
  #lc-fill { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 4px 0; background: none; }
  .lc-pixels { display: none; }
  .lc-seg { display: block; }
  .lc-seg:nth-child(2) { flex: 2; background: var(--c2); }
  .lc-seg:nth-child(3) { flex: .6; background: var(--c5); }
  .lc-seg:nth-child(4) { flex: 3; background: var(--c4); }
  .lc-seg:nth-child(5) { flex: .8; background: var(--c2); }
  .lc-seg:nth-child(6) { flex: 1.5; background: var(--c1); }

  /* sub-notas numa faixa que rola de lado */
  #sidebar {
    flex-direction: row; align-items: center; gap: 6px;
    padding: 10px 0 0 10px; max-height: none;
    overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  }
  #sidebar-title { display: none; }
  #sidebar-up { min-height: 32px; padding: 0 14px; align-items: center; border-radius: 16px; }
  #sidebar-up::after { font-size: 15px; }
  #sidebar-list { flex-direction: row; }
  #sidebar-list a { min-height: 32px; font-size: 14px; border-left-width: 1.5px; border-radius: 16px; padding: 0 12px; white-space: nowrap; overflow-wrap: normal; }

  #lc-screen { margin: 10px 0 10px 10px; border-radius: 22px; }
  .lc-tag { left: 18px; top: 12px; right: 40px; font-size: 9px; }
  .lc-hatch { right: 12px; width: 14px; top: 50px; height: 30%; }
  .lc-ring { display: none; }
  #editor, #preview { margin: 46px 40px 26px 28px; }
  #editor { font-size: 14px; line-height: 1.6; }
  #preview { font-size: 15px; }

  /* ações: barra de blocos embaixo + menu "⋯" */
  #status-bar .links { flex-direction: row; gap: 5px; padding: 0 0 0 10px; }
  .links a, .links button { min-height: 46px; font-size: 16px; padding: 0 10px 6px; }
  #preview-toggle, .links .history-link.lc-only { display: flex; flex: 1; }
  .links .history-link.lc-only { background: var(--c5); }
  #more-toggle {
    display: flex; flex: 0 0 56px; justify-content: center; align-items: center; padding: 0 0 6px;
    background: var(--c4); border-radius: 0 23px 23px 0; font-size: 22px;
  }
  #status-bar.menu-open #more-toggle { filter: brightness(1.15); }
  #more-links {
    display: none; position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 10;
    flex-direction: column; gap: 4px; min-width: 13rem; padding: 6px;
    background: var(--glass-solid); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
  }
  #status-bar.menu-open #more-links { display: flex; }
  #more-links #history-link { display: none; }
  #more-links a, #more-links button { width: 100%; min-height: 42px; border-radius: 0 10px 10px 0; }
  #logout-form { display: block; }

  #status { margin: 8px 0 0 26px; max-width: calc(100% - 26px); padding: 5px 12px 5px 9px; font-size: 9px; gap: 7px; }
  #status::before { width: 7px; height: 7px; }
  #lc-foot { grid-template-rows: 1fr 14px; }
  .lc-slashes, .lc-swatches { display: none; }

  .panel { padding: 0; }
  .panel:not([hidden]) { align-items: flex-end; }
  .panel-inner { width: 100%; max-height: 85dvh; border-radius: 22px 22px 0 0; border-left-width: 1px; border-top: 8px solid var(--c1); }
}

/* ---- Login e lista de notas: mesma moldura, conteúdo no meio ---------- */
body.login-page, body.list-page {
  height: 100vh; height: 100dvh; overflow: hidden;
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  grid-template-rows: 108px minmax(0, 1fr) auto 100px;
  grid-template-areas:
    "top  head"
    "fill main"
    "act  main"
    "bot  foot";
  padding: 18px 22px 18px 18px;
}
.login-page #lc-foot .lc-arm, .list-page #lc-foot .lc-arm { grid-row: 2; }

/* login */
.login-page .card {
  grid-area: main; align-self: center; justify-self: center;
  width: min(420px, calc(100% - 30px)); margin-left: 30px;
  padding: 26px 26px 24px;
  background: var(--glass); color: var(--text);
  border: 1px solid var(--line); border-left: 10px solid var(--c1); border-radius: 0 30px 30px 0;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.login-page h1 { margin: 0; font: 600 40px/1 Antonio, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.lc-auth { margin: 8px 0 18px; color: var(--muted); }
.login-page input[type="password"] {
  display: block; width: 100%; margin: 0 0 14px; padding: 12px 14px;
  font: 400 16px "JetBrains Mono", monospace; color: var(--text);
  background: color-mix(in srgb, var(--space) 55%, transparent);
  border: 1px solid var(--line); border-left: 4px solid var(--c2); border-radius: 0;
  outline: none;
}
.login-page input[type="password"]:focus { border-color: var(--c2); }
.login-page button {
  display: flex; align-items: flex-end; justify-content: flex-end;
  width: 100%; min-height: 50px; padding: 0 20px 8px;
  border: none; border-radius: 0 25px 25px 0; cursor: pointer;
  background: var(--c1); color: var(--ink);
  font: 600 22px/1 Antonio, sans-serif; letter-spacing: .1em; text-transform: uppercase;
}
.login-page .error { margin: 0 0 12px; color: var(--off); font: 400 12px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }

/* lista de notas */
.list-page > header:not(#lc-head) { display: none; }
.lc-actions { grid-area: act; display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; }
.lc-actions a {
  display: flex; align-items: flex-end; justify-content: flex-end;
  min-height: 46px; padding: 0 14px 6px;
  background: var(--c2); color: var(--ink); text-decoration: none;
  font: 600 18px/1 Antonio, sans-serif; letter-spacing: .07em; text-transform: uppercase;
}
.list-page #list {
  grid-area: main; list-style: none; margin: 20px 0 20px 30px; padding: 10px 0; overflow-y: auto; min-height: 0;
  background: var(--glass); border: 1px solid var(--line); border-radius: 30px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--c4) 70%, transparent) transparent;
}
.list-page #list li { border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.list-page #list li:last-child { border-bottom: none; }
.list-page #list a { display: block; padding: 12px 26px; color: var(--text); text-decoration: none; }
.list-page #list .path { font: 600 21px/1.2 Antonio, sans-serif; letter-spacing: .04em; color: var(--accent); overflow-wrap: anywhere; }
.list-page #list .meta { margin-top: 3px; font: 400 11px "JetBrains Mono", monospace; letter-spacing: .06em; color: var(--muted); }
@media (hover: hover) {
  .list-page #list a:hover { background: color-mix(in srgb, var(--c2) 10%, transparent); }
}
.list-page #empty { grid-area: main; align-self: center; justify-self: center; color: var(--muted); font: 400 13px "JetBrains Mono", monospace; z-index: 1; }
.list-page #empty a { color: var(--accent); }

@media (max-width: 640px) {
  body.login-page, body.list-page {
    grid-template-columns: 20px minmax(0, 1fr);
    grid-template-rows: 74px minmax(0, 1fr) auto 58px;
    grid-template-areas:
      "top  head"
      "fill main"
      "fill act"
      "bot  foot";
    padding: 10px 10px 10px 8px;
  }
  .login-page .card { margin-left: 10px; width: calc(100% - 10px); padding: 22px 18px 18px; }
  .login-page h1 { font-size: 32px; }
  .lc-actions { flex-direction: row; padding: 10px 0 0 10px; }
  .lc-actions a { flex: 1; border-radius: 0 23px 23px 0; }
  .list-page #list { margin: 10px 0 0 10px; border-radius: 22px; }
  .list-page #list a { padding: 12px 18px; }
  .list-page #list .path { font-size: 19px; }
}