:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #17202b;
  --muted: #67707c;
  --line: #dfe3e9;
  --accent: #1f6feb;
  --accent-ink: #ffffff;
  --danger: #c62828;
  --shadow: 0 8px 24px rgba(15, 23, 42, .12);
  --editor-bg: #ffffff;
  --editor-ink: #111827;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #0f172a;
  --panel: #16213a;
  --ink: #e6edf7;
  --muted: #9aa7bb;
  --line: #26334d;
  --accent: #58a6ff;
  --accent-ink: #0b1220;
  --danger: #ff6b6b;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --editor-bg: #0d1526;
  --editor-ink: #dbe6f7;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  overflow: hidden;
}
.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ---------- App bar ---------- */
.appbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .5rem .75rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.title-area { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.logo { font-size: 1.25rem; }
.title-area h1 {
  font-size: 1.02rem; margin: 0; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw;
}
.doc-title {
  display: inline-flex; align-items: center; gap: .35rem;
  cursor: pointer; border-radius: .4rem; padding: .05rem .3rem;
}
.doc-title:hover { background: var(--bg); }
.doc-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rename-icon { font-size: .72em; opacity: .55; }
.doc-name { cursor: pointer; border-radius: .3rem; padding: .05rem .25rem; }
.doc-name:hover { background: var(--bg); }
.badge {
  font-size: .7rem; padding: .15rem .45rem; border-radius: 999px;
  background: #fff3cd; color: #7a5b00; border: 1px solid #f0dfa0;
}
html[data-theme="dark"] .badge { background: #4a3a10; color: #ffe08a; border-color: #6b5518; }
.toolbar { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.toolbar .group {
  display: flex; gap: .2rem; padding-inline-end: .45rem;
  border-inline-end: 1px solid var(--line);
}
.toolbar .group:last-child { border-inline-end: 0; padding-inline-end: 0; }
.toolbar button, .dialog-form button, .banner button, .findbar button {
  font: inherit; font-size: .82rem; color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: .45rem;
  padding: .35rem .55rem; cursor: pointer; white-space: nowrap;
}
.toolbar button:hover, .findbar button:hover, .banner button:hover, .dialog-form button:hover { background: var(--line); }
.toolbar button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.primary:hover { filter: brightness(1.08); background: var(--accent); }
button.icon { border: 1px solid var(--line); border-radius: 50%; width: 1.8rem; height: 1.8rem; padding: 0; line-height: 1; }

/* ---------- Editor ---------- */
.editor-area { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
#editor {
  flex: 1 1 auto; width: 100%; height: 100%;
  margin: 0; padding: 1rem 1.25rem;
  border: 0; outline: none; resize: none;
  background: var(--editor-bg); color: var(--editor-ink);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 16px; line-height: 1.9;
  white-space: pre; overflow: auto; tab-size: 4;
  unicode-bidi: plaintext;
}
#editor.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
#editor:focus { box-shadow: inset 0 0 0 2px rgba(31, 111, 235, .18); }

/* ---------- Find bar ---------- */
.findbar {
  position: absolute; inset-block-start: .5rem; inset-inline-end: .75rem;
  z-index: 5; display: flex; flex-direction: column; gap: .35rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: .6rem;
  box-shadow: var(--shadow); padding: .5rem .6rem; max-width: min(92vw, 44rem);
  font-size: .82rem;
}
.find-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.find-row input[type="search"], .find-row input[type="text"] {
  font: inherit; padding: .32rem .5rem; min-width: 10rem;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: .4rem;
}
.find-row input.invalid { border-color: var(--danger); }
.find-row label { display: inline-flex; align-items: center; gap: .25rem; color: var(--muted); }
.hint { color: var(--muted); font-size: .78rem; min-width: 4rem; }

/* ---------- Status bar ---------- */
.statusbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem;
  padding: .3rem .8rem; font-size: .78rem; color: var(--muted);
  background: var(--panel); border-top: 1px solid var(--line);
}
.statusbar .doc-name { color: var(--ink); font-weight: 600; max-width: 32vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statusbar .field { display: inline-flex; align-items: center; gap: .3rem; }
.statusbar select {
  font: inherit; font-size: .78rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: .35rem; padding: .1rem .25rem;
}
.statusbar .state { margin-inline-start: auto; color: var(--ink); }

/* ---------- Banner ---------- */
.banner {
  display: flex; align-items: center; gap: 1rem; justify-content: space-between;
  padding: .55rem .8rem; font-size: .85rem;
  background: #e8f1ff; color: #123a75; border-bottom: 1px solid #b9d3fb;
}
html[data-theme="dark"] .banner { background: #122b4d; color: #cfe2ff; border-bottom-color: #1d4580; }
.banner-actions { display: flex; gap: .4rem; }

/* ---------- Dialogs ---------- */
dialog {
  border: 1px solid var(--line); border-radius: .75rem; padding: 0;
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow);
  max-width: min(92vw, 30rem);
}
dialog::backdrop { background: rgba(9, 14, 24, .5); }
.dialog-form { display: grid; gap: .7rem; padding: 1rem 1.1rem; margin: 0; }
.dialog-form h2 { margin: 0 0 .2rem; font-size: 1.02rem; }
.dialog-form label { display: grid; gap: .25rem; font-size: .85rem; color: var(--muted); }
.dialog-form input, .dialog-form select {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: .45rem; padding: .4rem .55rem;
}
.dialog-form p { margin: 0; line-height: 1.7; font-size: .88rem; }
.features { margin: .2rem 0; padding-inline-start: 1.1rem; line-height: 1.8; font-size: .85rem; }
.dialog-actions { display: flex; justify-content: flex-start; gap: .5rem; margin-top: .35rem; }
code { background: var(--bg); border: 1px solid var(--line); border-radius: .3rem; padding: .05rem .3rem; font-size: .85em; }

/* ---------- Print ---------- */
.print-content { display: none; }
@media print {
  body { overflow: visible; background: #fff; color: #000; }
  .app, dialog { display: none !important; }
  .print-content {
    display: block; white-space: pre-wrap; overflow-wrap: anywhere;
    font-family: "Consolas", "Courier New", monospace; font-size: 11pt; line-height: 1.5;
    padding: 0; margin: 0; unicode-bidi: plaintext;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .appbar { padding: .4rem .5rem; }
  .toolbar button { padding: .3rem .42rem; font-size: .76rem; }
  .title-area h1 { max-width: 45vw; }
  .statusbar { gap: .2rem .7rem; }
  #editor { padding: .75rem; font-size: 15px; }
}