@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  /* Favicon lime (#a1e44d) is reserved for the brand; actions use a muted slate blue. */
  --brand: #a1e44d;
  --brand-ink: #000000;
  --paper: #f6f7f0;
  --paper-deep: #e7ebda;
  --ink: #1f2418;
  --muted: #595f50;
  --line: #d2d8c3;
  --moss: #3d6b12;
  --moss-dark: #2e520b;
  --button: #2f5d75;
  --button-hover: #244a5e;
  --accent: #6b3fb8;
  --danger: #b3382c;
  --known: #315f52;
  --learning: #b7791f;
  --unknown: #b84a35;
  --ignored: #777777;
  --white: #fdfdf8;
  --progress-new: #eeeae3;
  --progress-mastered: #000000;
  --shadow: 0 14px 40px rgb(31 36 24 / 12%);
  --panel: #eef1e3;
  --button-text: #fdfdf8;
  --field: #ffffff;
  --toolbar: rgb(246 247 240 / 92%);
  --document-hover: rgb(253 253 248 / 55%);
  --highlight: #e2d5fb;
  --backdrop: rgb(31 36 24 / 42%);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141414;
  --paper-deep: #2b2b2b;
  --panel: #1c1c1c;
  --white: #232323;
  --field: #141414;
  --ink: #ececec;
  --muted: #ababab;
  --line: #3e3e3e;
  --moss: #a1e44d;
  --moss-dark: #b9ef75;
  --button: #6f9cb5;
  --button-hover: #7aa5bd;
  --button-text: #0e1114;
  --accent: #c6a8ff;
  --danger: #ff9a8a;
  --progress-new: #2a2a2a;
  --progress-mastered: #ececec;
  --toolbar: #141414;
  --document-hover: #262626;
  --highlight: #3f3556;
  --shadow: 0 14px 40px rgb(0 0 0 / 45%);
  --backdrop: rgb(0 0 0 / 65%);
}

* { box-sizing: border-box; }

.library-filter { display: grid; gap: 6px; padding: 0 16px 10px; color: var(--muted); font-size: 13px; }
.library-filter select { width: 100%; min-height: 42px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--field); font: inherit; font-size: 15px; }

html, body { height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Nunito", "IPAGothic", "Yu Gothic", sans-serif;
}

button, input, textarea { font: inherit; }

button {
  border: 0;
  border-radius: 6px;
  color: var(--button-text);
  background: var(--button);
  cursor: pointer;
}

button:hover { background: var(--button-hover); }
button:disabled { cursor: wait; opacity: 0.65; }

.app-shell {
  display: grid;
  grid-template-columns: 270px minmax(420px, 1fr) 300px;
  grid-template-rows: minmax(0, 1fr);
  height: 100vh;
  overflow: clip;
}

.library-panel,
.inspector {
  background: var(--panel);
  border-color: var(--line);
  border-style: solid;
}

.library-panel { display: flex; flex-direction: column; min-height: 0; border-width: 0 1px 0 0; }
.side-column { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--panel); }
.inspector { flex: 1; min-height: 0; border-width: 0; padding: 24px; overflow-y: auto; }
.user-header { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 84px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.user-header .error { min-height: 0; margin-top: 6px; }
.user-header .error:empty { display: none; }
.account-menu-wrap { position: relative; }
.account-menu-button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 0; color: var(--ink); background: transparent; text-align: left; }
.account-menu-button:hover, .account-menu-button[aria-expanded="true"] { background: transparent; color: var(--accent); }
.account-avatar { display: inline-grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--button-text); background: var(--button); overflow: hidden; font: 700 20px/1 "Nunito", sans-serif; }
.account-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.account-name { min-width: 0; overflow: hidden; font-size: 20px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.account-caret { margin-left: auto; color: var(--muted); font-size: 14px; }
.account-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; min-width: 160px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); box-shadow: var(--shadow); }
.account-menu[hidden] { display: none; }
.account-menu button { width: 100%; padding: 9px 12px; text-align: left; }
#translation-model-help { margin-bottom: 22px; font-size: 13px; color: var(--muted); }
.settings-account { display: grid; gap: 4px; margin-bottom: 18px; font-size: 13px; }
.settings-account-link { color: var(--moss); font-size: 15px; font-weight: 700; }
.inspector-heading { display: flex; align-items: center; justify-content: space-between; }
.inspector-heading .section-label { padding: 0 0 18px; }
.close-inspector { display: none; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; }

.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.brand-row > div { display: flex; align-items: center; gap: 11px; }
.brand-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 7px; color: var(--brand-ink); background: var(--brand); font: 700 29px/1 "Nunito", "IPAGothic", "Yu Gothic", sans-serif; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 20px; letter-spacing: 0; }

.icon-button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
}

.section-label {
  padding: 20px 20px 10px;
  color: var(--muted);
  font: 700 11px/1 "Nunito", sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.document-list { flex: 1; min-height: 0; overflow-y: auto; }
.sidebar-navigation { display: grid; gap: 6px; padding: 14px 16px 0; }
.discovery-nav { width: 100%; padding: 10px 14px; text-align: left; }

.document-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  border-left: 3px solid transparent;
  color: var(--ink);
  background: transparent;
}

.document-item:hover { background: var(--document-hover); }
.document-item.active { border-left-color: var(--accent); background: var(--white); }
.document-open {
  min-width: 0;
  padding: 14px 8px 14px 17px;
  color: var(--ink);
  background: transparent;
  text-align: left;
}
.document-open:hover { background: transparent; }
.document-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-item small { color: var(--muted); }
.document-menu { position: relative; align-self: start; margin: 9px 8px 0 0; }
.document-menu summary {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  list-style: none;
  opacity: 0;
}
.document-menu summary::-webkit-details-marker { display: none; }
.document-item:hover .document-menu summary,
.document-item:focus-within .document-menu summary,
.document-menu[open] summary { opacity: 1; }
.document-menu summary:hover { background: var(--paper-deep); }
.document-menu-panel {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  display: grid;
  gap: 2px;
  width: max-content;
  min-width: 200px;
  max-width: min(280px, calc(100vw - 16px));
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.document-menu-panel button {
  width: 100%;
  min-height: 0;
  padding: 9px 11px;
  border-radius: 5px;
  color: var(--ink);
  background: transparent;
  font-size: 0.95rem;
  text-align: left;
  white-space: normal;
}
.document-menu-panel button:hover { color: var(--ink); background: var(--paper-deep); }
.document-menu-status { margin: 0; padding: 6px 11px 8px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; }
.document-menu-panel .document-delete { color: var(--danger); }
.document-menu-panel .document-delete:hover { color: var(--button-text); background: var(--danger); }

.reader-column { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }

.reader-toolbar {
  min-height: 84px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--toolbar);
}

.reader-toolbar-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.document-heading { min-width: 0; margin-right: auto; }
.document-heading h2 { overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.document-heading span { color: var(--muted); font-size: 12px; }
.article-mastery { max-width: 420px; margin-top: 6px; }
.article-mastery-stats { margin: 0 0 5px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.article-mastery-bar { height: 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--progress-new); }
.article-mastery-fill { height: 100%; background: color-mix(in srgb, var(--progress-mastered) var(--mastery-percent), var(--progress-new)); transition: width 200ms ease, background-color 200ms ease; }
.toolbar-button, .mobile-library, .secondary { padding: 8px 12px; border: 1px solid var(--line); color: var(--ink); background: transparent; }
.toolbar-button:hover, .mobile-library:hover, .secondary:hover { background: var(--paper-deep); }
.icon-toolbar-button { width: 34px; height: 34px; border: 1px solid var(--line); color: var(--ink); background: transparent; font-size: 18px; }
.icon-toolbar-button:hover { background: var(--paper-deep); }
.icon-toolbar-button:disabled { cursor: default; opacity: 0.4; }
.icon-toolbar-button.pressed, .icon-toolbar-button[aria-pressed="true"] {
  background: var(--paper-deep);
  border-color: var(--ink);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 18%);
}
.live-reading-indicator {
  display: block;
  width: 100%;
  margin-top: 12px;
  min-width: 0;
  min-height: 64px;
  max-height: 160px;
  overflow: auto;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.6;
  padding: 10px 12px;
  border-radius: 3px;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  color: var(--muted);
}
.live-reading-indicator[hidden] { display: none; }
.sentence-delete { background: var(--danger); }
.live-reading-indicator.listening {
  color: var(--moss);
  border-color: var(--moss);
}
.live-reading-indicator.error {
  color: var(--danger);
  border-color: var(--danger);
}
.live-reading-stats {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.live-reading-indicator.matched {
  background: #00ff00;
  color: #000000;
  border-color: #00bb00;
}
.toolbar-select { max-width: 165px; padding: 7px 28px 7px 9px; border: 1px solid var(--line); color: var(--ink); background: var(--white); }
.mobile-library { display: none; }

.toggle { display: flex; align-items: center; gap: 7px; font-size: 14px; white-space: nowrap; }
.toggle input { accent-color: var(--moss); }

.reader {
  --reader-font-size: 18.75pt;
  overflow-y: auto;
  padding: clamp(44px, 8vh, 90px) clamp(28px, 9vw, 140px) 35vh;
  scroll-behavior: smooth;
}

.reader-body { position: relative; max-width: 820px; margin: 0 auto; }
.reader-line-numbers { position: absolute; inset: 0; pointer-events: none; user-select: none; }
.reader-line-number {
  position: absolute;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  color: var(--muted);
  font: 11px/1 "Nunito", sans-serif;
  font-variant-numeric: tabular-nums;
}
.reader-sentence { cursor: context-menu; }
.reader-sentence:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.reader-sentence.highlighted {
  background: var(--highlight);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.reader-body p {
  margin-bottom: 1.6em;
  font-family: "Nunito", "IPAGothic", "Yu Gothic", sans-serif;
  font-size: var(--reader-font-size);
  line-height: 2.15;
}

.token { border-bottom: 1px solid transparent; outline: none; }
.token:hover, .token:focus { border-bottom-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.token.active { border-bottom-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* Live Reading styles */
.reader-sentence .live-past {
  background-color: #000000 !important;
  color: #ffffff !important;
}
.reader-sentence .live-past rt {
  color: #bbbbbb !important;
}
.token.live-current {
  background-color: #00ff00 !important;
  color: #000000 !important;
  border-radius: 2px;
}
.token.live-current rt {
  color: #000000 !important;
  font-weight: 700;
}

.knowledge-known { color: var(--known); }
.knowledge-learning { color: var(--learning); background: color-mix(in srgb, var(--learning) 9%, transparent); }
.knowledge-unknown { color: var(--unknown); }
.knowledge-ignored { color: var(--ignored); }
:root[data-theme="dark"] .knowledge-known { color: color-mix(in srgb, var(--known) 60%, white); }
:root[data-theme="dark"] .knowledge-learning { color: color-mix(in srgb, var(--learning) 60%, white); }
:root[data-theme="dark"] .knowledge-unknown { color: color-mix(in srgb, var(--unknown) 60%, white); }
:root[data-theme="dark"] .knowledge-ignored { color: color-mix(in srgb, var(--ignored) 60%, white); }
rt { color: var(--moss); font-size: 0.48em; font-weight: 500; }
rt.furigana-hidden, .furigana-off rt { visibility: hidden; }
.token.furigana-temporary rt { visibility: visible !important; }

.empty-state { display: grid; min-height: 55vh; place-content: center; justify-items: center; gap: 18px; color: var(--muted); }
.empty-glyph { color: var(--line); font: 700 72px/1 "Nunito", "IPAGothic", "Yu Gothic", sans-serif; }
.empty-state button { padding: 10px 18px; }

.word-details h3 { font: 500 34px/1.4 "Nunito", "IPAGothic", "Yu Gothic", sans-serif; }
.reading { color: var(--moss); font: 500 18px/1.5 "Nunito", "IPAGothic", "Yu Gothic", sans-serif; }
.word-meta { margin: 18px 0; color: var(--muted); font-size: 13px; }
.knowledge-summary { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 20px 0; padding: 15px 0; border-block: 1px solid var(--line); font-size: 13px; }
.knowledge-summary dt { color: var(--muted); }
.knowledge-summary dd { margin: 0; }
.status-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.status-actions button { padding: 7px 10px; font-size: 12px; }
.word-progress-level { padding: 7px 10px; border-radius: 8px; background: var(--word-background); color: var(--word-color); font-size: 12px; opacity: 0.5; }
.word-progress-level.current { outline: 2px solid var(--word-color); outline-offset: -2px; font-weight: 700; opacity: 1; }
.status-actions button.active {
  outline: 0;
  background: var(--accent);
}
.definitions { padding-left: 20px; }
.definitions li { margin-bottom: 8px; }
.ollama-word-result { line-height: 1.55; }
.muted { color: var(--muted); line-height: 1.6; }
.dictionary-credit { margin-top: 28px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.dictionary-credit a { color: var(--moss); }

.debug-view {
  position: absolute;
  inset: 84px 300px 0 270px;
  z-index: 5;
  overflow: auto;
  padding: 28px;
  background: var(--white);
}

.discovery-view { position: absolute; inset: 0 300px 0 270px; z-index: 6; overflow-y: auto; padding: 34px clamp(24px, 5vw, 70px); background: var(--paper); }
.word-progress-view .discovery-header > div { display: grid; gap: 6px; }
.word-progress-view .discovery-header .section-label { padding: 0; }
.progress-controls { display: flex; align-items: end; gap: 12px; padding: 22px 0 10px; }
.progress-controls label { display: grid; flex: 1; gap: 5px; color: var(--muted); font-size: 12px; }
.progress-controls input { width: 100%; padding: 9px 10px; border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.progress-controls button { padding: 9px 13px; }
.word-progress-groups { display: grid; gap: 12px; margin-top: 12px; }
.word-progress-group { border: 1px solid var(--line); background: var(--white); }
.word-progress-group > header { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; background: var(--paper-deep); }
.word-progress-group > header h3 { font-size: 15px; }
.word-progress-group > header span { color: var(--muted); font-size: 12px; }
.word-progress-group > p { padding: 12px 16px; font-size: 13px; }
.token[data-progress-level="0"], .word-progress-group[data-level="0"], .word-progress-level[data-level="0"] { --word-background: transparent; --word-color: var(--ink); }
.token[data-progress-level="1"], .word-progress-group[data-level="1"], .word-progress-level[data-level="1"] { --word-background: #e9dff3; --word-color: #634080; }
.token[data-progress-level="2"], .word-progress-group[data-level="2"], .word-progress-level[data-level="2"] { --word-background: #f9e0d7; --word-color: #853b29; }
.token[data-progress-level="3"], .word-progress-group[data-level="3"], .word-progress-level[data-level="3"] { --word-background: #f8ebc9; --word-color: #75520f; }
.token[data-progress-level="4"], .word-progress-group[data-level="4"], .word-progress-level[data-level="4"] { --word-background: #d8e9f4; --word-color: #285571; }
.token[data-progress-level="5"], .word-progress-group[data-level="5"], .word-progress-level[data-level="5"] { --word-background: #d4eade; --word-color: #28553d; }
.token[data-progress-level="6"], .word-progress-group[data-level="6"], .word-progress-level[data-level="6"] { --word-background: transparent; --word-color: var(--progress-mastered); }
:root[data-theme="dark"] :is(.token[data-progress-level="1"], .word-progress-group[data-level="1"], .word-progress-level[data-level="1"]) { --word-background: #3e304e; --word-color: #dfc5f5; }
:root[data-theme="dark"] :is(.token[data-progress-level="2"], .word-progress-group[data-level="2"], .word-progress-level[data-level="2"]) { --word-background: #50352d; --word-color: #f5c5b4; }
:root[data-theme="dark"] :is(.token[data-progress-level="3"], .word-progress-group[data-level="3"], .word-progress-level[data-level="3"]) { --word-background: #493e25; --word-color: #f0d998; }
:root[data-theme="dark"] :is(.token[data-progress-level="4"], .word-progress-group[data-level="4"], .word-progress-level[data-level="4"]) { --word-background: #293e4d; --word-color: #b9dcf2; }
:root[data-theme="dark"] :is(.token[data-progress-level="5"], .word-progress-group[data-level="5"], .word-progress-level[data-level="5"]) { --word-background: #2b4338; --word-color: #b6e0c8; }
.token[data-progress-level] { color: var(--word-color); background: var(--word-background); }
.word-progress-group ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 14px 16px; list-style: none; }
.word-progress-word { max-width: 100%; padding: 6px 12px; border-radius: 12px; background: var(--word-background); color: var(--word-color); font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.word-progress-word button { display: block; margin: -6px -12px; padding: 6px 12px; max-width: calc(100% + 24px); border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; overflow-wrap: anywhere; cursor: pointer; }
.word-progress-word button:focus-visible { outline: 2px solid var(--word-color); outline-offset: 2px; }
.word-progress-tooltip { position: fixed; z-index: 20; width: 280px; max-width: calc(100vw - 16px); padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); box-shadow: var(--shadow); font-size: 13px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; pointer-events: none; }
.word-progress-tooltip strong { display: block; margin: -12px -14px 0; padding: 10px 14px; border-radius: 7px 7px 0 0; font-size: 16px; font-weight: 700; }
.discovery-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.discovery-header .section-label { padding: 0 0 8px; }
.discovery-controls { display: grid; grid-template-columns: minmax(280px, 1.5fr) minmax(170px, 1fr) 160px; align-items: end; gap: 14px; padding: 24px 0 10px; }
.source-controls { display: flex; align-items: end; gap: 14px; padding-bottom: 8px; }
.discovery-search, .source-refresh { display: flex; min-width: 0; gap: 8px; }
.query-presets { display: flex; gap: 10px; margin: -4px 0 12px; }
.query-presets .text-button { padding: 0; border: 0; background: transparent; color: var(--moss); font-size: 11px; }
.discovery-controls input, .discovery-controls select, .source-controls select { min-width: 0; padding: 9px 10px; border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.discovery-controls input, .source-refresh select { flex: 1; }
.discovery-controls button, .source-controls button { padding: 9px 13px; white-space: nowrap; }
.discovery-controls > label, .source-controls > label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.candidate-list { margin-top: 18px; border-top: 1px solid var(--line); }
.candidate-item { display: grid; grid-template-columns: minmax(0, 1fr) 180px 90px; gap: 28px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.candidate-source { margin-bottom: 7px; color: var(--accent); font: 700 11px/1 "Nunito", sans-serif; text-transform: uppercase; }
.candidate-main h3 { margin-bottom: 8px; font-size: 20px; }
.candidate-main p { color: var(--muted); line-height: 1.5; }
.candidate-meta, .source-status { color: var(--muted); font-size: 12px; }
.source-status { margin: 0 0 12px; text-transform: capitalize; }
.candidate-reasons { margin: 12px 0 0; padding-left: 18px; font-size: 13px; }
.candidate-study { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; }
.candidate-study span { color: var(--muted); }
.candidate-study b { padding: 2px 6px; border: 1px solid var(--line); font-weight: 500; }
.candidate-scores { display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 8px; margin: 0; font-size: 12px; }
.candidate-scores dt { color: var(--muted); }
.candidate-scores dd { margin: 0; font-weight: 700; }
.candidate-action { display: flex; align-items: flex-start; justify-content: flex-end; gap: 8px; }
.candidate-action a { padding: 8px 0; color: var(--moss); font-size: 12px; }
.candidate-action button { padding: 8px 12px; }
.candidate-state { padding: 8px 0; color: var(--muted); font-size: 12px; text-transform: capitalize; }
.discovery-empty { padding: 48px 0; color: var(--muted); text-align: center; }

.debug-view header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.debug-view header span { color: var(--muted); font-size: 12px; }
.debug-view button { padding: 8px 14px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-family: "Nunito", "IPAGothic", "Yu Gothic", sans-serif; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--muted); font: 700 11px/1 "Nunito", sans-serif; text-transform: uppercase; }

dialog { width: min(680px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--white); box-shadow: var(--shadow); }
dialog::backdrop { background: var(--backdrop); }
dialog form { padding: 24px; }
dialog header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
dialog label { display: grid; gap: 7px; margin-bottom: 16px; color: var(--muted); font-size: 13px; }
dialog input, dialog textarea, dialog select { width: 100%; border: 1px solid var(--line); border-radius: 3px; padding: 10px 12px; color: var(--ink); background: var(--field); }
dialog textarea { min-height: 280px; resize: vertical; font: 18px/1.8 "Nunito", "IPAGothic", "Yu Gothic", sans-serif; }
.sentence-dialog textarea { min-height: 150px; }
.sentence-dialog .form-actions { flex-wrap: wrap; }
.sentence-action-dialog { width: min(760px, calc(100vw - 32px)); }
.sentence-action-content { padding: 24px; }
.sentence-action-content header { margin-bottom: 16px; }
.sentence-action-content h2 { margin-top: 5px; }
.translation-language-label {
  display: block;
  margin: 16px 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sentence-action-source {
  margin: 0 0 18px;
  padding: 16px;
  border-left: 3px solid var(--accent);
  background: var(--paper);
  font-size: 18px;
  line-height: 1.8;
}
.sentence-action-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sentence-action-options[hidden],
.sentence-action-source[hidden],
.sentence-translation-result[hidden] { display: none; }
.sentence-action-options button { min-height: 48px; }
.sentence-translation-result #sentence-translation-text {
  margin: 0 0 28px;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.sentence-translation-result .error:empty { display: none; }
.sentence-action-content > .muted { margin-bottom: 0; }
.setting-toggle { display: flex; margin-bottom: 16px; }
#settings-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
#settings-fields h3 { margin-bottom: 16px; font-size: 15px; }
.setting-toggle input[type="checkbox"] {
  width: auto;
  min-width: 0;
  margin: 0;
  flex: 0 0 auto;
}
.translation-model-setting { width: 100%; min-width: 0; }
.translation-model-setting select { min-width: 0; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.form-actions button { padding: 9px 16px; }
.error { min-height: 20px; margin-top: 10px; color: var(--danger); font-size: 13px; }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .side-column { display: contents; }
  .user-header { position: fixed; top: 14px; right: 16px; z-index: 9; min-height: 0; padding: 0; border: 0; }
  .user-header .account-name, .user-header .account-caret { display: none; }
  .user-header .error:not(:empty) { position: absolute; top: 46px; right: 0; width: 220px; padding: 8px; background: var(--white); }
  .reader-toolbar { padding-right: 76px; }
  .discovery-header { padding-right: 56px; }
  .inspector { position: fixed; right: 0; bottom: 0; left: 220px; max-height: 42vh; border-width: 1px 0 0; box-shadow: var(--shadow); transform: translateY(100%); transition: transform 180ms ease; }
  .inspector.open { z-index: 7; transform: translateY(0); }
  .debug-view { right: 0; left: 220px; }
  .discovery-view { right: 0; left: 220px; }
  .discovery-controls { grid-template-columns: 1fr; }
  .source-controls { align-items: stretch; flex-direction: column; }
}

@media (max-width: 680px) {
  .app-shell { display: block; }
  .reader-column { width: 100%; height: 100%; grid-template-columns: minmax(0, 1fr); }
  .library-panel { position: fixed; inset: 0 48px 0 0; z-index: 10; transform: translateX(-100%); transition: transform 180ms ease; box-shadow: var(--shadow); }
  .library-panel.open { transform: translateX(0); }
  .mobile-library { display: inline-block; }
  .reader-toolbar { min-height: 72px; padding: 10px 68px 10px 14px; }
  .reader-toolbar-controls { gap: 10px; }
  .document-heading h2 { font-size: 16px; }
  .document-heading span { display: none; }
  .reader-toolbar .toggle span { display: none; }
  .furigana-switch { display: none; }
  .toolbar-select { min-width: 0; max-width: 110px; }
  .reader { padding: 42px 36px 30vh; }
  .reader { --reader-font-size: 16.5pt; }
  .reader-body p { line-height: 2.05; }
  .inspector { left: 0; }
  .close-inspector { display: grid; place-items: center; }
  .debug-view { inset: 72px 0 0; padding: 18px; }
  .discovery-view { inset: 0; padding: 20px; }
  .discovery-search, .source-refresh, .discovery-controls > label, .source-controls > label { width: 100%; }
  .discovery-controls > label select { width: 100%; }
  .candidate-item { grid-template-columns: 1fr; gap: 14px; }
  .candidate-action { justify-content: flex-start; }
}

.document-rename {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border-radius: 5px;
  color: var(--ink);
  background: transparent;
  text-align: left;
}
.document-rename:hover { background: var(--paper-deep); }