:root {
  --navy: #0f2744;
  --ink: #102a43;
  --teal: #1f6f78;
  --paper: #f4f1ea;
  --panel: #fffdf8;
  --line: #d9d3c9;
  --muted: #627d98;
  --ok: #1e7a46;
  --warn: #9a6700;
  --bad: #b42318;
  --preview-bg: #c5c0b8;
  --topbar-h: 56px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

#file-protocol-hint {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 32px;
  background: var(--navy);
  color: #f4f1ea;
}

#file-protocol-hint[hidden] { display: none; }

.hint-card {
  max-width: 560px;
  background: #16324f;
  padding: 28px 32px;
  border-radius: 12px;
}

.hint-card pre {
  background: #0b1b2e;
  padding: 12px 14px;
  border-radius: 8px;
  overflow: auto;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: var(--topbar-h);
  flex: 0 0 var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 14px;
  background: var(--navy);
  color: #f4f1ea;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand .mark {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--teal);
  display: grid;
  place-items: center;
  font-weight: 700;
}

.brand .sub {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #8fd3cc;
}

.actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status {
  font-size: 12px;
  margin-right: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #16324f;
}

.status.compiling { color: #f0d78c; }
.status.ok { color: #8fd3cc; }
.status.bad { color: #f5c6c2; }

button, .file-btn {
  appearance: none;
  border: 0;
  background: var(--teal);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}

button:disabled { opacity: 0.55; cursor: default; }

#export-pdf { background: #2b4c6f; }

.file-btn {
  display: inline-block;
  background: transparent;
  color: #f4f1ea;
  border: 1px solid #4a6a86;
}

.file-btn input { display: none; }

#drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(15, 39, 68, 0.78);
  color: #f4f1ea;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}

#drop-overlay[hidden] { display: none !important; }

#app.drag-over #drop-overlay { display: grid; }

.workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 200px minmax(280px, 1fr) minmax(320px, 1fr);
  grid-template-rows: 1fr 176px;
  grid-template-areas:
    "files editor preview"
    "files editor log";
}

.files {
  grid-area: files;
  background: #ebe6dc;
  border-right: 1px solid var(--line);
  padding: 12px 10px;
  overflow: auto;
}

.files h2 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.files button,
.files .file-btn {
  background: var(--navy);
  border: 0;
  font-size: 12px;
  padding: 6px 8px;
}

.files ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.files li {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.files li.active, .files li:hover { background: #ddd6c8; }
.files li.main::after {
  content: " main";
  color: var(--teal);
  font-size: 10px;
}

.files .hint {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 16px;
}

.editor-pane {
  grid-area: editor;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
}

.preview-pane {
  grid-area: preview;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--preview-bg);
}

.log-pane {
  grid-area: log;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #1b2838;
  color: #d9e2ec;
  border-top: 1px solid #0b1b2e;
}

.pane-label {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  color: var(--muted);
  background: #efebe3;
  border-bottom: 1px solid var(--line);
}

.log-pane .pane-label {
  background: #243447;
  color: #9fb3c8;
  border-bottom-color: #0b1b2e;
}

.editor-shell {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #fffdf8;
}

/* Overlay and textarea must share one box: same font, padding, wrap, and
   scrollbar gutter. Token color only — weight/italic shifts glyph widths
   and walks the caret off the insert point. */
.editor-layer {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  border: 0;
  padding: 12px 14px;
  box-sizing: border-box;
  font: 13px/20px ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 400;
  font-style: normal;
  font-kerning: none;
  font-variant-ligatures: none;
  font-synthesis: none;
  letter-spacing: 0;
  tab-size: 4;
  -moz-tab-size: 4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  word-break: normal;
  overflow: auto;
  scrollbar-gutter: stable;
}

#source-highlight {
  pointer-events: none;
  color: #102a43;
  background: transparent;
}

#source-editor {
  appearance: none;
  -webkit-appearance: none;
  resize: none;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: #102a43;
  z-index: 1;
}

#source-editor[readonly] {
  caret-color: #627d98;
}

#source-editor::selection {
  background: rgba(31, 110, 120, 0.28);
  color: transparent;
}

#source-editor::-moz-selection {
  background: rgba(31, 110, 120, 0.28);
  color: transparent;
}

.tok-comment { color: #6b7280; }
.tok-cmd { color: #1f4e8c; }
.tok-env { color: #1f6f78; }
.tok-brace { color: #9a6700; }
.tok-opt { color: #7c3aed; }
.tok-math { color: #9f1239; }
.tok-special { color: #b45309; }
.tok-verb { color: #345; }

.pdf-stage {
  flex: 1;
  min-height: 480px;
  position: relative;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  padding: 16px;
}

#pdf-canvas,
.pdf-page {
  width: 720px;
  max-width: 100%;
  height: auto;
  background: transparent;
  box-shadow: 0 10px 28px rgba(16, 42, 67, 0.28);
}

#pdf-canvas.filled {
  background: #fff;
}

.empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #3e4c59;
  font-size: 14px;
  pointer-events: none;
}

.empty[hidden] { display: none; }

#compile-log {
  flex: 1;
  margin: 0;
  padding: 8px 12px 12px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
}

@media (max-width: 900px) {
  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: 120px minmax(220px, 1fr) minmax(320px, 1fr) 160px;
    grid-template-areas:
      "files"
      "editor"
      "preview"
      "log";
  }
  #pdf-canvas { width: 100%; max-width: 720px; height: auto; }
}

[hidden] { display: none !important; }
button:focus-visible, input:focus-visible, select:focus-visible, li:focus-visible { outline: 3px solid #43aaa4; outline-offset: 3px; }
.quiet { background: transparent; color: var(--ink); }
.topbar .quiet { color: #e5eee9; }
.danger { color: var(--bad); }
.eyebrow { font-size: 10px; letter-spacing: .16em; color: var(--teal); font-weight: 700; }
.entry-screen { min-height: 100%; display: grid; place-items: center; padding: 32px; background: radial-gradient(ellipse at top left, #d5e3dc, transparent 65%), var(--paper); }
.auth-card { max-width: 460px; width: 100%; padding: 40px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 80px #102a4312; }
.auth-card h1 { font-family: Georgia, serif; font-size: 34px; font-weight: 400; line-height: 1.15; }
.auth-card p { line-height: 1.6; color: var(--muted); font-size: 14px; }
label { display: block; font-size: 13px; font-weight: 600; }
input:not([type=file]), select { width: 100%; border: 1px solid #b7bcb7; background: var(--panel); color: var(--ink); border-radius: 5px; padding: 10px; font: inherit; margin-top: 6px; }
.auth-card label, #dialog-content label { margin-bottom: 18px; }
#auth-submit { width: 100%; padding: 12px; }
#auth-mode, #auth-back { margin-top: 10px; width: 100%; }
#auth-message, #library-message { color: #8d3e27; font-size: 13px; }
#library-screen { min-height: 100%; }
.library-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: calc(100vh - 56px); }
.library-sidebar { padding: 36px 20px; border-right: 1px solid var(--line); background: #eae7de; }
.library-sidebar h2 { margin: 8px 0 28px; font-family: Georgia, serif; font-size: 26px; font-weight: 400; }
.folder-button { background: transparent; color: var(--ink); text-align: left; width: 100%; padding: 11px; overflow-wrap: anywhere; }
.folder-button.selected { background: #d6dfd6; color: #145f63; }
.folder-row { display: flex; margin: 4px 0; }
.folder-menu { padding: 6px; }
#new-library-folder { margin-top: 18px; }
.library-content { padding: 44px clamp(24px, 4vw, 70px); max-width: 1500px; width: 100%; }
.library-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.library-heading h1 { font-family: Georgia, serif; font-weight: 400; font-size: 38px; margin: 10px 0 24px; overflow-wrap: anywhere; }
.file-btn.light { color: var(--ink); border-color: #b6beb7; }
.library-tools { display: flex; align-items: center; gap: 24px; padding: 18px 0; border-top: 1px solid var(--line); }
#project-search { max-width: 320px; margin: 0; font-size: 13px; }
#project-count { color: var(--muted); font-size: 12px; }
#project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.project-card { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 24px; border-top: 3px solid #407f80; }
.project-open { color: var(--ink); background: transparent; padding: 0; font-family: Georgia, serif; font-size: 23px; font-weight: 400; text-align: left; overflow-wrap: anywhere; width: 100%; min-height: 48px; }
.project-open:hover { color: var(--teal); }
.project-card p { color: var(--muted); font-size: 11px; line-height: 1.7; margin: 20px 0; }
.card-actions { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-wrap: wrap; gap: 4px; }
.card-actions button { font-size: 11px; padding: 6px; }
.library-empty { padding: 64px 32px; text-align: center; color: var(--muted); border: 1px dashed #b7bcb7; border-radius: 8px; grid-column: 1 / -1; line-height: 1.8; }
dialog { width: min(480px, calc(100vw - 32px)); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 28px; box-shadow: 0 20px 80px #102a4340; }
dialog::backdrop { background: #102a4370; }
dialog h2 { font-family: Georgia, serif; font-weight: 400; margin: 0 0 24px; }
dialog p { line-height: 1.5; font-size: 14px; color: var(--muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
#save-status { font-size: 11px; color: var(--teal); line-height: 1.5; overflow-wrap: anywhere; }
#project-title { overflow-wrap: anywhere; line-height: 1.5; }
.workspace { grid-template-columns: 230px minmax(280px, 1fr) minmax(320px, 1fr); }
@media (max-width: 900px) { .brand .sub { display: none; } .topbar { height: auto; min-height: 56px; flex-wrap: wrap; padding: 12px; } .actions { flex-wrap: wrap; } .library-shell { grid-template-columns: 180px minmax(0, 1fr); } .library-content { padding: 28px 20px; } .library-heading { align-items: flex-start; flex-direction: column; gap: 0; } .library-heading .actions { margin-bottom: 24px; } .workspace { grid-template-columns: 180px minmax(280px, 1fr); grid-template-rows: minmax(400px, 1fr) 400px 160px; grid-template-areas: 'files editor' 'files preview' 'files log'; overflow: auto; } }
@media (max-width: 560px) { .library-shell { display: block; } .library-sidebar { padding: 20px; border-bottom: 1px solid var(--line); } .library-sidebar h2 { margin-bottom: 12px; } #folder-list { display: flex; overflow: auto; } .folder-button { white-space: nowrap; } .folder-row { margin: 0; } #new-library-folder { margin-top: 8px; } .auth-card { padding: 28px; } .workspace { grid-template-columns: 140px minmax(220px, 1fr); } }