/* ============================================================
   PROSE. — Minimalist Word Processor
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- CSS Variables / Themes --- */

:root {
  --font-ui: 'JetBrains Mono', monospace;
  --font-editor: 'JetBrains Mono', monospace;
  --transition: 0.2s ease;
  --sidebar-width: 240px;
  --editor-max-width: 680px;
  --focus-document-width: 1290px;
  --focus-page-gap: 78px;
  --focus-page-height: 900px;
  --focus-page-offset: 0px;
  --top-bar-h: 50px;
  --status-bar-h: 32px;
}

[data-theme="white"] {
  --bg:         #ffffff;
  --editor-bg:  #ffffff;
  --text:       #1c1c1c;
  --text-dim:   #999999;
  --chrome:     #f5f5f5;
  --border:     #e8e8e8;
  --accent:     #3a7bd5;
  --sidebar-bg: #f0f0f0;
  --sidebar-text: #444444;
  --hover-bg:   #e8e8e8;
  --active-bg:  #e0e8f5;
  --active-text:#1c1c1c;
  --scrollbar:  #d0d0d0;
  --placeholder:#bbbbbb;
  --caret:      #3a7bd5;
  --modal-bg:   #ffffff;
  --shadow:     0 2px 20px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.12);
  --toolbar-bg: #ffffff;
  --toolbar-surface: #fbfbfb;
  --toolbar-text: #2f2f2f;
  --toolbar-muted: #666666;
  --toolbar-border: #d9d9d9;
  --toolbar-hover: #eeeeee;
  --toolbar-active-bg: #dce9fb;
  --toolbar-active-text: #175aa8;
}

[data-theme="dark"] {
  --bg:         #191919;
  --editor-bg:  #191919;
  --text:       #d0d0d0;
  --text-dim:   #555555;
  --chrome:     #212121;
  --border:     #2e2e2e;
  --accent:     #5b9cf6;
  --sidebar-bg: #1f1f1f;
  --sidebar-text:#888888;
  --hover-bg:   #2a2a2a;
  --active-bg:  #263040;
  --active-text:#d0d0d0;
  --scrollbar:  #333333;
  --placeholder:#3a3a3a;
  --caret:      #5b9cf6;
  --modal-bg:   #242424;
  --shadow:     0 2px 20px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.5);
  --toolbar-bg: #242424;
  --toolbar-surface: #2b2b2b;
  --toolbar-text: #e2e2e2;
  --toolbar-muted: #bababa;
  --toolbar-border: #444444;
  --toolbar-hover: #363636;
  --toolbar-active-bg: #243e63;
  --toolbar-active-text: #9fc7ff;
}

[data-theme="sepia"] {
  --bg:         #f0dfbf;
  --editor-bg:  #f6e8cb;
  --text:       #3d2a1c;
  --text-dim:   #8d7357;
  --chrome:     #e6d0aa;
  --border:     #c9ab7e;
  --accent:     #8b5522;
  --sidebar-bg: #dfc69b;
  --sidebar-text:#6f5438;
  --hover-bg:   #d7bb8d;
  --active-bg:  #c79d61;
  --active-text:#2d1d12;
  --scrollbar:  #b69568;
  --placeholder:#a88b66;
  --caret:      #8b5522;
  --modal-bg:   #f2dfbd;
  --shadow:     0 2px 22px rgba(75,45,18,0.14);
  --shadow-lg:  0 8px 42px rgba(75,45,18,0.18);
  --toolbar-bg: #ead5ae;
  --toolbar-surface: #f2dfbd;
  --toolbar-text: #3d2a1c;
  --toolbar-muted: #6f4f31;
  --toolbar-border: #b98f5c;
  --toolbar-hover: #dfc496;
  --toolbar-active-bg: #c8914f;
  --toolbar-active-text: #24160c;
}

[data-theme="low-contrast"] {
  --bg:         #18191b;
  --editor-bg:  #1b1c1f;
  --text:       #a8abb1;
  --text-dim:   #6f737b;
  --chrome:     #202226;
  --border:     #31343a;
  --accent:     #8a92a0;
  --sidebar-bg: #1d1f23;
  --sidebar-text:#858a94;
  --hover-bg:   #272a2f;
  --active-bg:  #30343b;
  --active-text:#b7bac0;
  --scrollbar:  #3c4048;
  --placeholder:#555a63;
  --caret:      #a4adbc;
  --modal-bg:   #202226;
  --shadow:     0 2px 18px rgba(0,0,0,0.28);
  --shadow-lg:  0 8px 36px rgba(0,0,0,0.36);
  --toolbar-bg: #202226;
  --toolbar-surface: #25272c;
  --toolbar-text: #a8abb1;
  --toolbar-muted: #7c818a;
  --toolbar-border: #363941;
  --toolbar-hover: #2c2f35;
  --toolbar-active-bg: #343841;
  --toolbar-active-text: #bec2c9;
}

[data-theme="high-contrast"] {
  --bg:         #0f1115;
  --editor-bg:  #11141a;
  --text:       #f0f3f7;
  --text-dim:   #b9c0ca;
  --chrome:     #191d25;
  --border:     #6e7684;
  --accent:     #78a8ff;
  --sidebar-bg: #151922;
  --sidebar-text:#d5dae2;
  --hover-bg:   #242a35;
  --active-bg:  #2d4268;
  --active-text:#f6f8fb;
  --scrollbar:  #7b8491;
  --placeholder:#8f98a5;
  --caret:      #8fb7ff;
  --modal-bg:   #171b23;
  --shadow:     0 2px 24px rgba(0,0,0,0.42);
  --shadow-lg:  0 8px 46px rgba(0,0,0,0.5);
  --toolbar-bg: #171c26;
  --toolbar-surface: #202838;
  --toolbar-text: #ffffff;
  --toolbar-muted: #dde6f2;
  --toolbar-border: #8fa4c2;
  --toolbar-hover: #2a3448;
  --toolbar-active-bg: #2f5fa8;
  --toolbar-active-text: #ffffff;
}

[data-theme="cool"] {
  --bg:         #edf5f7;
  --editor-bg:  #f6fbfc;
  --text:       #22343c;
  --text-dim:   #7b9098;
  --chrome:     #e0edf1;
  --border:     #bdd2d9;
  --accent:     #367c92;
  --sidebar-bg: #d9e8ed;
  --sidebar-text:#607b86;
  --hover-bg:   #cfe1e7;
  --active-bg:  #bfd8e1;
  --active-text:#22343c;
  --scrollbar:  #abc5cf;
  --placeholder:#9bb2bb;
  --caret:      #367c92;
  --modal-bg:   #edf5f7;
  --shadow:     0 2px 20px rgba(34,52,60,0.1);
  --shadow-lg:  0 8px 40px rgba(34,52,60,0.14);
  --toolbar-bg: #dcebf0;
  --toolbar-surface: #eef7f9;
  --toolbar-text: #20353d;
  --toolbar-muted: #4f707b;
  --toolbar-border: #a8c6d0;
  --toolbar-hover: #cbe0e7;
  --toolbar-active-bg: #b4d2dc;
  --toolbar-active-text: #1b3f4b;
}

[data-theme="warm"] {
  --bg:         #fff2e6;
  --editor-bg:  #fff8ef;
  --text:       #3d2a22;
  --text-dim:   #a9826d;
  --chrome:     #f2dcca;
  --border:     #e1bea6;
  --accent:     #bf6940;
  --sidebar-bg: #efd4bf;
  --sidebar-text:#875f49;
  --hover-bg:   #e8c8b0;
  --active-bg:  #e0ad8b;
  --active-text:#3d2a22;
  --scrollbar:  #d6a98e;
  --placeholder:#bf9c86;
  --caret:      #bf6940;
  --modal-bg:   #fff2e6;
  --shadow:     0 2px 20px rgba(101,55,32,0.1);
  --shadow-lg:  0 8px 40px rgba(101,55,32,0.15);
  --toolbar-bg: #f5dfcf;
  --toolbar-surface: #fff2e6;
  --toolbar-text: #3f281e;
  --toolbar-muted: #7d523c;
  --toolbar-border: #d39d7d;
  --toolbar-hover: #eccdb8;
  --toolbar-active-bg: #df9b74;
  --toolbar-active-text: #32190f;
}

[data-theme="forest"] {
  --bg:         #eaede4;
  --editor-bg:  #edf0e7;
  --text:       #2c3828;
  --text-dim:   #98a893;
  --chrome:     #e1e6da;
  --border:     #c8d0c2;
  --accent:     #4e7a45;
  --sidebar-bg: #dde3d7;
  --sidebar-text:#7a8e74;
  --hover-bg:   #d5dccf;
  --active-bg:  #c8d8c2;
  --active-text:#2c3828;
  --scrollbar:  #c0caba;
  --placeholder:#b8c4b2;
  --caret:      #4e7a45;
  --modal-bg:   #eaede4;
  --shadow:     0 2px 20px rgba(44,56,40,0.1);
  --shadow-lg:  0 8px 40px rgba(44,56,40,0.15);
  --toolbar-bg: #dde5d7;
  --toolbar-surface: #eef2e9;
  --toolbar-text: #273923;
  --toolbar-muted: #55714e;
  --toolbar-border: #aab99f;
  --toolbar-hover: #d0dbc9;
  --toolbar-active-bg: #bfd4b7;
  --toolbar-active-text: #21331d;
}

/* --- Base --- */

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  transition: background var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
}

/* --- AUTH SCREEN --- */

#auth-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 100;
  transition: background var(--transition);
}

.auth-container {
  width: min(380px, calc(100vw - 48px));
  animation: fadeUp 0.4s ease both;
}

.auth-logo {
  font-size: 2.4rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 4px;
}

.auth-tagline {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  margin-bottom: 40px;
}

.auth-paywall {
  border: 1px solid var(--border);
  background: var(--sidebar-bg);
  padding: 22px;
  margin-bottom: 24px;
}

.auth-paywall.hidden,
#auth-form.hidden {
  display: none;
}

.auth-paywall-kicker {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-bottom: 12px;
  text-transform: lowercase;
}

.auth-paywall-price {
  font-size: 15px;
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 10px;
}

.auth-paywall p {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 18px;
}

.auth-checkout-link {
  display: inline-block;
  background: var(--text);
  color: var(--bg);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 11px 24px;
  text-decoration: none;
  transition: opacity var(--transition);
}

.auth-checkout-link:hover {
  opacity: 0.75;
}

.auth-promo-gate {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.auth-promo-gate label {
  display: block;
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.auth-promo-row {
  display: flex;
  gap: 8px;
}

.auth-promo-row input {
  min-width: 0;
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 9px 0;
  outline: none;
  text-transform: uppercase;
}

.auth-promo-row input:focus {
  border-bottom-color: var(--accent);
}

.auth-promo-row button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 11px;
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.auth-promo-row button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.auth-subscriber-btn {
  display: block;
  margin-top: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 11px;
  cursor: pointer;
}

.auth-subscriber-btn:hover {
  text-decoration: underline;
}

.auth-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-field-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-field-stack.hidden {
  display: none;
}

.auth-hint {
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: -2px 0 4px;
}

.auth-hint.hidden {
  display: none;
}

.auth-checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.45;
  cursor: pointer;
  margin-top: 4px;
}

.auth-checkbox span {
  min-width: 0;
}

.auth-checkbox input {
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.auth-inline-link {
  color: var(--accent);
  text-decoration: none;
  pointer-events: auto;
}

.auth-inline-link:hover {
  text-decoration: underline;
}

.auth-fields input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 10px 0;
  outline: none;
  transition: border-color var(--transition);
  width: 100%;
}

.auth-fields input:focus {
  border-bottom-color: var(--accent);
}

.auth-fields input::placeholder {
  color: var(--placeholder);
}

.auth-fields button {
  margin-top: 16px;
  background: var(--text);
  color: var(--bg);
  border: none;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 11px 24px;
  cursor: pointer;
  transition: opacity var(--transition);
  align-self: flex-start;
}

.auth-fields button:hover { opacity: 0.75; }

.auth-error {
  margin-top: 12px;
  font-size: 11px;
  color: #e05252;
  min-height: 16px;
}

.auth-switch-text {
  margin-top: 28px;
  font-size: 11px;
  color: var(--text-dim);
}

.auth-switch-text a {
  color: var(--accent);
  text-decoration: none;
  margin-left: 4px;
}

.auth-switch-text a:hover { text-decoration: underline; }

/* --- APP LAYOUT --- */

#app-screen {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  transition: background var(--transition);
}

#app-screen.hidden { display: none; }
#auth-screen.hidden { display: none; }

/* --- SIDEBAR --- */

#sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  transition: width var(--transition), min-width var(--transition),
              opacity var(--transition), background var(--transition),
              border-color var(--transition);
  overflow: hidden;
}

#sidebar.collapsed {
  width: 0;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
}

#app-screen.sidebar-collapsed #sidebar {
  border-right-color: transparent;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: var(--top-bar-h);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-logo {
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--text);
}

.file-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
}

.file-list::-webkit-scrollbar { width: 4px; }
.file-list::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 2px; }

.file-tree-label {
  padding: 14px 16px 7px;
  color: var(--text-dim);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.file-tree-heading {
  color: var(--sidebar-text);
  font-size: 11px;
  line-height: 1.4;
}

.file-tree-heading--year {
  padding: 8px 16px 3px;
  color: var(--text);
  font-weight: 500;
}

.file-tree-heading--month {
  padding: 5px 16px 3px 28px;
  color: var(--sidebar-text);
}

.file-tree-heading--day {
  padding: 4px 16px 3px 40px;
  color: var(--text-dim);
  font-size: 10px;
}

.file-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  transition: background var(--transition);
  gap: 8px;
}

.file-item:hover { background: var(--hover-bg); }
.file-item.active { background: var(--active-bg); }

.file-item--journal-tree {
  padding-left: 52px;
}

.file-item-name {
  flex: 1;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.file-item.active .file-item-name { color: var(--active-text); }

.file-item-date {
  font-size: 10px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.file-item.active .file-item-date { color: var(--active-text); }

.file-item-actions {
  position: absolute;
  right: 8px;
  display: none;
  gap: 2px;
  background: var(--hover-bg);
}

.file-item:hover .file-item-actions { display: flex; }

.file-action-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 2px;
  transition: color var(--transition), background var(--transition);
}

.file-action-btn:hover { color: var(--text); background: var(--border); }
.file-action-btn.danger:hover { color: #e05252; }

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.sidebar-username {
  font-size: 11px;
  color: var(--sidebar-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-logout {
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--transition);
  flex-shrink: 0;
}

.sidebar-logout:hover { color: var(--text); }

/* --- EDITOR AREA --- */

#editor-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--editor-bg);
  transition: background var(--transition);
  position: relative;
}

/* --- MODE CHOOSER --- */

.mode-screen {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 72px);
  background:
    radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--editor-bg) 96%, var(--accent)), var(--editor-bg) 54%, color-mix(in srgb, var(--editor-bg) 88%, #000));
  overflow: hidden;
}

.mode-screen::before {
  content: '';
  position: absolute;
  inset: 22px;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  pointer-events: none;
}

.mode-screen::after {
  content: '';
  position: absolute;
  width: 38vmin;
  height: 38vmin;
  right: -8vmin;
  bottom: -10vmin;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  transform: rotate(16deg);
  pointer-events: none;
}

.mode-screen.hidden {
  display: none;
}

.mode-screen-inner {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  animation: fadeUp 0.45s ease both;
}

.mode-kicker {
  display: inline-block;
  margin-bottom: 18px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mode-heading {
  max-width: 720px;
  color: var(--text);
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.6rem, 7vw, 5.8rem);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.07em;
}

.mode-subtitle {
  max-width: 520px;
  margin-top: 20px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.7;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 18px);
  margin-top: clamp(30px, 5vw, 56px);
}

.mode-card {
  aspect-ratio: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  background: color-mix(in srgb, var(--toolbar-surface) 84%, transparent);
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-ui);
  text-align: left;
  overflow: hidden;
  transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}

.mode-card::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid transparent;
  transition: border-color 0.28s ease, inset 0.28s ease;
}

.mode-card::after {
  content: '';
  position: absolute;
  top: 18px;
  right: 18px;
  width: 52px;
  height: 52px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transform: rotate(12deg);
  transition: transform 0.28s ease, background 0.28s ease;
}

.mode-card:hover,
.mode-card:focus-visible {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 58%, var(--text));
  background: color-mix(in srgb, var(--toolbar-surface) 72%, var(--accent));
  box-shadow: 0 24px 60px color-mix(in srgb, #000 16%, transparent);
  outline: none;
}

.mode-card:hover::before,
.mode-card:focus-visible::before {
  inset: 8px;
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
}

.mode-card:hover::after,
.mode-card:focus-visible::after {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  transform: rotate(45deg) scale(1.06);
}

.mode-card--journal {
  background: color-mix(in srgb, #f5dfcf 54%, var(--toolbar-surface));
}

.mode-card--outline {
  background: color-mix(in srgb, #dcebf0 54%, var(--toolbar-surface));
}

.journal-screen {
  position: absolute;
  inset: 0;
  z-index: 72;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 72px);
  background:
    radial-gradient(circle at 78% 12%, color-mix(in srgb, #bf6940 18%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--editor-bg) 94%, #f5dfcf), var(--editor-bg) 54%, color-mix(in srgb, var(--editor-bg) 88%, #000));
  overflow: auto;
}

.journal-screen.hidden {
  display: none;
}

.journal-screen::before {
  content: '';
  position: absolute;
  inset: 22px;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  pointer-events: none;
}

.journal-screen-inner {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  animation: fadeUp 0.45s ease both;
}

.journal-back {
  margin-bottom: 22px;
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  background: color-mix(in srgb, var(--toolbar-surface) 72%, transparent);
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  text-transform: lowercase;
}

.journal-back:hover,
.journal-back:focus-visible {
  border-color: var(--accent);
  color: var(--text);
  outline: none;
}

.journal-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 18px);
  margin-top: clamp(30px, 5vw, 48px);
}

.journal-card {
  position: relative;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  background: color-mix(in srgb, #f5dfcf 54%, var(--toolbar-surface));
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-ui);
  text-align: left;
  overflow: hidden;
  transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}

.journal-card--ai {
  background: color-mix(in srgb, #dcebf0 48%, var(--toolbar-surface));
}

.journal-card::after {
  content: '';
  position: absolute;
  top: 18px;
  right: 18px;
  width: 52px;
  height: 52px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transform: rotate(12deg);
  transition: transform 0.28s ease, background 0.28s ease;
}

.journal-card:hover,
.journal-card:focus-visible,
.journal-card.active {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 58%, var(--text));
  background: color-mix(in srgb, var(--toolbar-surface) 72%, var(--accent));
  box-shadow: 0 24px 60px color-mix(in srgb, #000 16%, transparent);
  outline: none;
}

.journal-card:hover::after,
.journal-card:focus-visible::after,
.journal-card.active::after {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  transform: rotate(45deg) scale(1.06);
}

.journal-ai-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--toolbar-surface) 92%, var(--accent)), var(--toolbar-surface));
  box-shadow: 0 18px 52px color-mix(in srgb, #000 14%, transparent);
}

.journal-ai-form.hidden {
  display: none;
}

.journal-ai-form label {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.journal-ai-form textarea {
  min-height: 130px;
  resize: vertical;
  border: 1px solid var(--toolbar-border);
  background: color-mix(in srgb, var(--editor-bg) 78%, transparent);
  color: var(--text);
  font-family: var(--font-editor);
  font-size: 14px;
  line-height: 1.65;
  padding: 12px;
  outline: none;
}

.journal-ai-form textarea:focus {
  border-color: var(--accent);
}

.journal-ai-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.journal-generate-btn {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 9px 13px;
  text-transform: lowercase;
}

.journal-generate-btn:disabled {
  cursor: wait;
  opacity: 0.62;
}

.journal-ai-status {
  min-height: 16px;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.5;
}

.mode-number {
  position: absolute;
  top: 18px;
  left: 18px;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.mode-title {
  max-width: 11ch;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.mode-copy {
  max-width: 24ch;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.55;
}

/* --- TOP BAR --- */

#top-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-bottom: 1px solid color-mix(in srgb, var(--toolbar-border) 78%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--toolbar-bg) 96%, #fff),
      color-mix(in srgb, var(--toolbar-bg) 96%, #000 4%));
  box-shadow:
    0 10px 30px color-mix(in srgb, #000 8%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent);
  flex-shrink: 0;
  position: relative;
  transition: background var(--transition), border-color var(--transition),
              box-shadow var(--transition), opacity var(--transition);
  z-index: 10;
}

#top-bar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--accent) 36%, transparent) 18%,
    color-mix(in srgb, var(--toolbar-border) 74%, transparent) 50%,
    transparent);
  pointer-events: none;
}

body.focus-mode #top-bar,
body.typewriter-mode #top-bar {
  opacity: 0;
  pointer-events: none;
}

body.focus-mode #editor-area:hover #top-bar,
body.typewriter-mode #editor-area:hover #top-bar {
  opacity: 1;
  pointer-events: all;
}

.top-bar-main {
  height: var(--top-bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  gap: 14px;
  flex-shrink: 0;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

#file-title-wrap {
  min-width: 0;
  max-width: min(440px, 52vw);
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: border-color var(--transition), background var(--transition);
}

#file-title-wrap:focus-within {
  border-color: color-mix(in srgb, var(--toolbar-border) 70%, var(--accent));
  background: color-mix(in srgb, var(--toolbar-surface) 74%, transparent);
}

.tools-toggle {
  position: relative;
  min-width: 76px;
  padding-right: 24px;
  text-align: left;
}

.tools-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  transition: transform var(--transition);
}

#top-bar.tools-collapsed .tools-toggle::after {
  transform: translateY(-35%) rotate(-135deg);
}

.editor-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(4px, 0.65vw, 8px);
  width: 100%;
  min-width: 0;
  min-height: 54px;
  max-height: 170px;
  padding: 8px clamp(8px, 1.4vw, 18px) 12px;
  overflow-x: hidden;
  overflow-y: visible;
  opacity: 1;
  transform: translateY(0);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--toolbar-surface) 28%, transparent),
      transparent 62%);
  transition: max-height var(--transition), min-height var(--transition),
              padding var(--transition), opacity var(--transition),
              transform var(--transition);
}

#top-bar.tools-collapsed .editor-tools {
  min-height: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-4px);
}

.tool-group {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.55vw, 8px);
  flex: 0 1 auto;
  min-width: 0;
  min-height: 36px;
  padding: 5px clamp(6px, 0.8vw, 10px);
  border: 1px solid color-mix(in srgb, var(--toolbar-border) 86%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--toolbar-surface) 96%, #fff),
      color-mix(in srgb, var(--toolbar-surface) 94%, #000 3%));
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent),
    0 6px 18px color-mix(in srgb, #000 7%, transparent);
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}

.tool-group:hover,
.tool-group:focus-within {
  border-color: color-mix(in srgb, var(--toolbar-border) 58%, var(--accent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 38%, transparent),
    0 10px 24px color-mix(in srgb, #000 9%, transparent);
}

.tool-group--document {
  border-radius: 16px;
}

.tool-group--mode {
  gap: 3px;
  padding-left: 7px;
  padding-right: 7px;
}

.tool-group--export {
  margin-left: 0;
}

.tool-label {
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 0.55vw, 8px);
  flex-shrink: 0;
  color: var(--toolbar-muted);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 700;
}

.tool-label::after {
  content: '';
  width: 1px;
  height: 16px;
  background: color-mix(in srgb, var(--toolbar-border) 76%, transparent);
}

.tool-field {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--toolbar-muted);
  font-size: 10px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .editor-tools {
    justify-content: flex-start;
    overflow-x: auto;
    padding-left: 10px;
    padding-right: 10px;
  }

  .tool-group--export {
    margin-left: 0;
  }

  .tool-group--document {
    order: 0;
    width: auto;
    flex-shrink: 0;
    justify-content: flex-start;
  }

  #file-title-wrap {
    max-width: 58vw;
  }
}

@media (max-width: 1180px) {
  .tool-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .tool-label::after {
    display: none;
  }

  .font-select {
    max-width: 132px;
  }

  .text-btn {
    padding-left: 8px;
    padding-right: 8px;
  }
}

.file-title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  outline: none;
  min-width: 60px;
  max-width: 100%;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  border-bottom: 1px solid transparent;
  padding-bottom: 0;
  transition: border-color var(--transition), color var(--transition);
}

.file-title:focus { border-bottom-color: var(--border); }
.file-title:empty::before { content: attr(data-placeholder); color: var(--text-dim); }
#top-bar .file-title { color: var(--toolbar-text); }
#top-bar .file-title:focus { border-bottom-color: var(--toolbar-border); }
#top-bar .file-title:empty::before { color: var(--toolbar-muted); }

.font-select,
.tool-select {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--toolbar-bg) 72%, transparent),
      color-mix(in srgb, var(--toolbar-hover) 38%, transparent));
  border: 1px solid color-mix(in srgb, var(--toolbar-border) 82%, transparent);
  color: var(--toolbar-text);
  font-family: var(--font-ui);
  font-size: 11px;
  min-height: 26px;
  max-width: 150px;
  padding: 4px 26px 4px 9px;
  cursor: pointer;
  outline: none;
  border-radius: 9px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent);
  transition: border-color var(--transition), color var(--transition),
              background var(--transition), box-shadow var(--transition);
}

.tool-select {
  max-width: 76px;
  padding-right: 22px;
}

.font-select:hover,
.font-select:focus,
.tool-select:hover,
.tool-select:focus {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--toolbar-hover) 68%, transparent),
      color-mix(in srgb, var(--toolbar-surface) 82%, transparent));
  border-color: color-mix(in srgb, var(--toolbar-text) 56%, var(--toolbar-border));
  color: var(--toolbar-text);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}

.font-select option,
.tool-select option {
  background: var(--toolbar-bg);
  color: var(--toolbar-text);
}

/* Theme switcher dots */
.theme-switcher {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px;
}

.theme-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--toolbar-border) 66%, transparent);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease;
  flex-shrink: 0;
  padding: 0;
  box-shadow:
    inset 0 1px 1px color-mix(in srgb, #fff 28%, transparent),
    0 1px 2px color-mix(in srgb, #000 16%, transparent);
}

.theme-dot:hover { transform: translateY(-1px) scale(1.12); }
.theme-dot.active {
  border-color: color-mix(in srgb, var(--toolbar-text) 76%, var(--accent));
  box-shadow:
    0 0 0 2px var(--toolbar-surface),
    0 0 0 4px color-mix(in srgb, var(--accent) 34%, transparent),
    inset 0 1px 1px color-mix(in srgb, #fff 28%, transparent);
}
.theme-dot--white  { background: #e8e8e8; }
.theme-dot--dark   { background: #3a3a3a; }
.theme-dot--sepia { background: #c79d61; }
.theme-dot--forest { background: #7a9e70; }
.theme-dot--low-contrast { background: #30343b; }
.theme-dot--high-contrast { background: linear-gradient(135deg, #0f1115 0 48%, #78a8ff 48% 54%, #f0f3f7 54% 100%); }
.theme-dot--cool { background: #bfd8e1; }
.theme-dot--warm { background: #e0ad8b; }

.theme-tooltip {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--toolbar-border) 86%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--toolbar-bg) 96%, #fff),
      var(--toolbar-bg));
  color: var(--toolbar-text);
  box-shadow: 0 12px 28px color-mix(in srgb, #000 16%, transparent);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(-100% - 14px));
  transition: opacity 0.12s ease, visibility 0.12s ease;
  white-space: nowrap;
}

.theme-tooltip.visible {
  opacity: 1;
  visibility: visible;
}

/* Icon and text buttons */
.icon-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: color var(--transition), background var(--transition);
  font-size: 14px;
  line-height: 1;
}

.icon-btn:hover { color: var(--text); background: var(--hover-bg); }
#top-bar .icon-btn {
  color: var(--toolbar-muted);
  border: 1px solid transparent;
  border-radius: 9px;
  transition: color var(--transition), background var(--transition),
              border-color var(--transition), box-shadow var(--transition);
}
#top-bar .icon-btn:hover {
  color: var(--toolbar-text);
  background: var(--toolbar-hover);
  border-color: color-mix(in srgb, var(--toolbar-border) 70%, transparent);
}
.icon-btn.active { color: var(--accent); }
#top-bar .icon-btn.active { color: var(--toolbar-active-text); background: var(--toolbar-active-bg); }

#app-screen.sidebar-collapsed #sidebar-toggle {
  color: var(--toolbar-active-text);
  background: var(--toolbar-active-bg);
}

.text-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 9px;
  transition: color var(--transition), background var(--transition),
              border-color var(--transition), box-shadow var(--transition);
  letter-spacing: 0.02em;
}

.text-btn:hover { color: var(--text); background: var(--hover-bg); }
#top-bar .text-btn { color: var(--toolbar-muted); }
#top-bar .text-btn:hover {
  color: var(--toolbar-text);
  background: var(--toolbar-hover);
  border-color: color-mix(in srgb, var(--toolbar-border) 66%, transparent);
}
.text-btn.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
#top-bar .text-btn.active {
  color: var(--toolbar-active-text);
  border-color: color-mix(in srgb, var(--toolbar-active-text) 34%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--toolbar-active-bg) 92%, #fff 8%),
      var(--toolbar-active-bg));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent),
    0 4px 12px color-mix(in srgb, var(--accent) 16%, transparent);
}

.mode-btn {
  border: 1px solid transparent;
  padding-left: 7px;
  padding-right: 7px;
}

.mode-btn.hidden {
  display: none;
}

.mode-btn.active {
  border-color: color-mix(in srgb, var(--toolbar-active-text) 58%, transparent);
}

.segmented-control {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--toolbar-border) 82%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--toolbar-bg) 50%, transparent);
}

.segment-btn {
  background: transparent;
  border: none;
  border-right: 1px solid color-mix(in srgb, var(--toolbar-border) 74%, transparent);
  color: var(--toolbar-muted);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 10px;
  padding: 6px clamp(5px, 0.55vw, 8px);
  transition: color var(--transition), background var(--transition);
}

.segment-btn:last-child {
  border-right: none;
}

.segment-btn:hover {
  color: var(--toolbar-text);
  background: var(--toolbar-hover);
}

.segment-btn.active {
  color: var(--toolbar-active-text);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--toolbar-active-bg) 92%, #fff 8%),
      var(--toolbar-active-bg));
}

/* Export dropdown */
.export-wrap { position: relative; }

.export-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  padding: 6px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--modal-bg) 96%, #fff),
      var(--modal-bg));
  border: 1px solid color-mix(in srgb, var(--toolbar-border) 88%, transparent);
  border-radius: 13px;
  box-shadow:
    0 22px 52px color-mix(in srgb, #000 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  min-width: 212px;
  z-index: 50;
  animation: fadeDown 0.12s ease;
}

.export-menu.hidden { display: none; }

.export-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--toolbar-text);
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.export-menu button:hover {
  color: var(--toolbar-active-text);
  background: color-mix(in srgb, var(--toolbar-active-bg) 76%, transparent);
}

/* --- EDITOR WRAP & TEXTAREA --- */

#editor-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

#editor-wrap::after {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s ease, border-color 0.28s ease;
}

#editor-wrap::before {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.focus-pages {
  position: absolute;
  top: 62px;
  left: 0;
  right: 0;
  z-index: 0;
  height: var(--focus-page-height);
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(var(--focus-page-offset) * -1));
  transition: opacity 0.28s ease, transform 0.08s linear;
}

body.focus-mode .focus-pages {
  opacity: 1;
}

.focus-page {
  position: absolute;
  left: 50%;
  width: min(var(--focus-document-width), calc(100% - 56px));
  height: var(--focus-page-height);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  border-radius: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--editor-bg) 86%, transparent),
    color-mix(in srgb, var(--editor-bg) 96%, transparent));
  box-shadow:
    0 22px 70px color-mix(in srgb, #000 15%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
  transform: translateX(-50%);
}

body.focus-mode #app-screen.sidebar-collapsed .focus-page {
  width: min(var(--focus-document-width), calc(100vw - 72px));
}

body.typewriter-mode #editor-wrap {
  --typewriter-caret-x: 50%;
}

body.typewriter-mode #editor-wrap::before {
  top: 62px;
  left: 50%;
  z-index: 0;
  width: min(var(--focus-document-width), calc(100% - 56px));
  height: var(--focus-page-height);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  border-radius: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--editor-bg) 86%, transparent),
    color-mix(in srgb, var(--editor-bg) 96%, transparent));
  box-shadow:
    0 22px 70px color-mix(in srgb, #000 15%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
  opacity: 1;
  transform: translateX(-50%);
}

body.typewriter-mode #editor-wrap::after {
  display: none;
}

body.typewriter-mode #app-screen.sidebar-collapsed #editor-wrap::before {
  width: min(var(--focus-document-width), calc(100vw - 72px));
}

.typewriter-caret-arrow {
  position: absolute;
  top: calc(50% + 2.45em);
  left: var(--typewriter-caret-x, 50%);
  z-index: 2;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid var(--accent);
  filter: drop-shadow(0 1px 4px color-mix(in srgb, #000 18%, transparent));
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.18s ease, left 0.08s linear;
}

body.typewriter-mode .typewriter-caret-arrow {
  opacity: 0.86;
}

.focus-overlay {
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#focus-overlay-top {
  top: 0;
  background: linear-gradient(to bottom, var(--editor-bg) 0%, transparent 100%);
}

#focus-overlay-bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--editor-bg) 0%, transparent 100%);
}

body.focus-mode .focus-overlay,
body.typewriter-mode .focus-overlay {
  opacity: 1;
}

#editor {
  flex: 1;
  width: 100%;
  max-width: var(--editor-max-width);
  margin: 0 auto;
  padding: 48px 24px 48px;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--font-editor);
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
  caret-color: var(--caret);
  transition: color var(--transition), font-family var(--transition),
              line-height var(--transition), text-align var(--transition),
              max-width var(--transition), padding var(--transition),
              font-size var(--transition);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
  display: block;
  position: relative;
  z-index: 1;
}

#app-screen.sidebar-collapsed #editor {
  max-width: min(920px, calc(100vw - 64px));
}

#editor::-webkit-scrollbar { width: 4px; }
#editor::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 2px; }
#editor::placeholder { color: var(--placeholder); }

body.free-mode #editor {
  max-width: none;
  padding: 42px clamp(24px, 8vw, 110px) 54px;
}

body.free-mode #app-screen.sidebar-collapsed #editor {
  max-width: none;
}

body.document-kind-journal #editor-wrap {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent) 0 1px, transparent 1px 100%) calc(50% - 333px) 0 / 28px 100% no-repeat,
    radial-gradient(circle at 82% 8%, color-mix(in srgb, #bf6940 12%, transparent), transparent 26%),
    var(--editor-bg);
}

body.document-kind-journal #editor {
  max-width: 760px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 54px clamp(34px, 7vw, 84px);
  border: 1px solid color-mix(in srgb, var(--border) 74%, var(--accent));
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(1.85em - 1px),
      color-mix(in srgb, var(--accent) 14%, transparent) calc(1.85em - 1px),
      color-mix(in srgb, var(--accent) 14%, transparent) 1.85em
    ),
    color-mix(in srgb, var(--editor-bg) 94%, #fff);
  box-shadow: 0 18px 60px color-mix(in srgb, #000 10%, transparent);
}

body.document-kind-outline #editor {
  max-width: min(720px, calc(100% - 430px));
  margin-left: clamp(24px, 7vw, 96px);
  margin-right: auto;
  padding-right: 32px;
}

body.document-kind-outline #app-screen.sidebar-collapsed #editor {
  max-width: min(760px, calc(100% - 460px));
}

.outline-ai-panel {
  position: absolute;
  top: 28px;
  right: 28px;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(340px, calc(100% - 56px));
  max-height: calc(100% - 56px);
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--toolbar-surface) 92%, var(--accent)), var(--toolbar-surface));
  box-shadow: 0 22px 60px color-mix(in srgb, #000 18%, transparent);
  overflow: auto;
}

.outline-ai-panel.hidden {
  display: none;
}

.outline-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.outline-ai-eyebrow {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.outline-ai-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--toolbar-muted);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.outline-ai-field textarea {
  min-height: 112px;
  resize: none;
  border: 1px solid var(--toolbar-border);
  background: color-mix(in srgb, var(--editor-bg) 78%, transparent);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.55;
  padding: 10px;
  outline: none;
  box-sizing: border-box;
  overflow-y: hidden;
  text-transform: none;
  letter-spacing: 0;
}

.outline-ai-field textarea:focus {
  border-color: var(--accent);
}

.outline-ai-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.outline-ai-status {
  min-height: 16px;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.5;
}

.outline-ai-result {
  white-space: pre-wrap;
  color: var(--text);
  font-family: var(--font-editor);
  font-size: 12px;
  line-height: 1.6;
}

.outline-ai-insert {
  align-self: flex-start;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 8px 12px;
}

.outline-ai-insert.hidden {
  display: none;
}

@media (max-width: 960px) {
  .mode-grid {
    grid-template-columns: 1fr;
  }

  .mode-card {
    aspect-ratio: auto;
    min-height: 190px;
  }

  .journal-choice-grid {
    grid-template-columns: 1fr;
  }

  body.document-kind-outline #editor,
  body.document-kind-outline #app-screen.sidebar-collapsed #editor {
    max-width: none;
    margin-left: auto;
    padding-bottom: 330px;
  }

  .outline-ai-panel {
    top: auto;
    right: 18px;
    bottom: 18px;
    left: 18px;
    width: auto;
    max-height: 280px;
  }
}

body.focus-mode #editor {
  flex: none;
  width: min(var(--focus-document-width), calc(100% - 56px));
  max-width: none;
  height: calc(100% - 124px);
  margin: 62px auto;
  font-size: 16px;
  padding: 50px clamp(40px, 9vw, 120px);
  border-radius: 0;
}

body.focus-mode #app-screen.sidebar-collapsed #editor {
  width: min(var(--focus-document-width), calc(100vw - 72px));
  max-width: none;
}

body.typewriter-mode #editor {
  max-width: 720px;
  font-size: 16px;
  padding: 46vh clamp(40px, 8vw, 120px) 48vh;
  scroll-padding-top: 45vh;
  scroll-padding-bottom: 45vh;
  text-align: left !important;
}

body.typewriter-mode #app-screen.sidebar-collapsed #editor {
  max-width: min(720px, calc(100vw - 72px));
}

/* --- STATUS BAR --- */

#status-bar {
  height: var(--status-bar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  border-top: 1px solid var(--border);
  background: var(--chrome);
  flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition),
              opacity var(--transition);
}

body.focus-mode #status-bar,
body.typewriter-mode #status-bar {
  opacity: 0;
}

body.focus-mode #editor-area:hover #status-bar,
body.typewriter-mode #editor-area:hover #status-bar {
  opacity: 1;
}

#status-bar span {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}

.stat-sep { color: var(--border) !important; }
.stat-sep--right { margin-left: auto; }

.save-status { font-size: 10px; transition: opacity 0.3s ease; }
.save-status.saving { color: var(--text-dim) !important; }
.save-status.saved  { color: var(--accent) !important; }
.save-status.error  { color: #e05252 !important; }

/* --- FIND & REPLACE --- */

#find-panel {
  position: fixed;
  top: 54px;
  right: 24px;
  background: var(--modal-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 10px 12px;
  z-index: 100;
  min-width: 320px;
  animation: fadeDown 0.14s ease;
}

#find-panel.hidden { display: none; }

.find-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.find-row:last-child { margin-bottom: 0; }

.find-row input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 4px 0;
  outline: none;
  transition: border-color var(--transition);
}

.find-row input:focus { border-bottom-color: var(--accent); }
.find-row input::placeholder { color: var(--text-dim); }

.find-count {
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  min-width: 36px;
}

.find-close { font-size: 16px; }

.text-btn-sm {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  padding: 3px 8px;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  white-space: nowrap;
  border-radius: 2px;
}

.text-btn-sm:hover { color: var(--text); border-color: var(--text-dim); background: var(--hover-bg); }

/* --- MODALS --- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: fadeIn 0.15s ease;
}

.modal-overlay.hidden { display: none; }

.modal {
  background: var(--modal-bg);
  border: 1px solid var(--border);
  padding: 24px;
  min-width: 280px;
  max-width: 360px;
  box-shadow: var(--shadow-lg);
  animation: scaleIn 0.15s ease;
}

.modal-label {
  font-size: 12px;
  color: var(--text);
  margin-bottom: 12px;
  display: block;
}

.modal-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: -6px;
  margin-bottom: 16px;
}

.modal input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 6px 0;
  outline: none;
  margin-bottom: 16px;
  transition: border-color var(--transition);
}

.modal input:focus { border-bottom-color: var(--accent); }

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.modal-confirm { color: var(--accent); border-color: var(--accent); }
.modal-danger:hover  { color: #e05252 !important; border-color: #e05252 !important; }

/* --- PRINT STYLES --- */

@media print {
  #auth-screen, #sidebar, #top-bar, #status-bar,
  #find-panel, #rename-modal, #delete-modal,
  #mode-screen, #journal-screen, #outline-ai-panel, .focus-overlay,
  .typewriter-caret-arrow { display: none !important; }

  #app-screen { display: block !important; }
  #editor-area { height: auto; overflow: visible; }
  #editor-wrap { overflow: visible; height: auto; }

  #editor {
    max-width: 100%;
    padding: 0;
    font-size: 12pt;
    line-height: 1.7;
    color: #000;
    background: #fff;
    border: none;
    overflow: visible;
    height: auto;
    resize: none;
  }
}

/* --- ANIMATIONS --- */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- EMPTY FILE LIST --- */

.file-list-empty {
  padding: 24px 16px;
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.6;
}

/* --- SELECTION HIGHLIGHT (find) --- */

::selection { background: rgba(90, 140, 255, 0.25); }
[data-theme="sepia"] ::selection { background: rgba(139, 85, 34, 0.28); }
[data-theme="forest"] ::selection { background: rgba(78, 122, 69, 0.25); }
[data-theme="low-contrast"] ::selection { background: rgba(138, 146, 160, 0.24); }
[data-theme="high-contrast"] ::selection { background: rgba(120, 168, 255, 0.34); }
[data-theme="cool"] ::selection { background: rgba(54, 124, 146, 0.24); }
[data-theme="warm"] ::selection { background: rgba(191, 105, 64, 0.24); }