.sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
}

.tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3) 0;
  box-shadow: inset 0 -1px 0 var(--border);
  flex-shrink: 0;
}
.tabs button {
  height: 34px;
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  border-radius: 0;
  font: 400 13px/18px var(--font-sans);
  color: var(--ink-muted);
  position: relative;
}
.tabs button:hover:not(:disabled) { background: none; color: var(--ink); }
.tabs button.active { color: var(--ink); font-weight: 500; }
.tabs button.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--primary);
}
.tabs button:focus-visible { outline-offset: -2px; }

.count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: var(--radius-full);
  background: var(--surface-active);
  color: var(--ink-muted);
  font: 400 11px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.panel { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-4) var(--space-8); }

.sidebar-foot {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  box-shadow: inset 0 1px 0 var(--border);
  font: 400 11px/16px var(--font-sans);
  color: var(--ink-muted);
  text-align: center;
}

.empty { text-align: center; color: var(--ink-muted); padding: var(--space-12) var(--space-3); font: 400 13px/22px var(--font-sans); }
.empty.small { padding: var(--space-6) var(--space-3); }
.empty .hint { margin-top: var(--space-3); }
.empty-icon {
  width: 48px; height: 48px;
  margin: 0 auto var(--space-4);
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--surface-hover);
  color: var(--ink-muted);
  font: 400 20px/1 var(--font-read);
}

.cur-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.cur-head .link { margin-left: auto; }
.tag {
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--surface-hover);
  color: var(--ink-muted);
  font: 400 11px/18px var(--font-sans);
}
.quote {
  margin: 0 0 var(--space-5);
  padding: var(--space-3);
  background: var(--surface-subtle);
  border-left: 2px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font: 400 15px/1.6 var(--font-read);
  max-height: 180px;
  overflow-y: auto;
  overflow-wrap: anywhere;
}

.block { margin-bottom: var(--space-5); }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); min-height: 22px; }
.block h3 {
  font: 500 11px/16px var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.text { font: 400 14px/22px var(--font-sans); overflow-wrap: anywhere; }
.text:empty { display: none; }
.text.zh { font-size: 15px; line-height: 24px; }
.text.md p, .text.md ul, .text.md ol { margin: 0 0 .6em; }
.text.md > *:last-child { margin-bottom: 0; }
.text.md ul, .text.md ol { padding-left: 1.3em; }
.text.md li { margin-bottom: .2em; }
.text.md h1, .text.md h2, .text.md h3 {
  font: 500 11px/16px var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 1.2em 0 .4em;
}
.text.md h1:first-child, .text.md h2:first-child { margin-top: 0; }
.text.md strong { font-weight: 500; color: var(--ink); }
.text.md code { font-family: var(--font-mono); font-size: .88em; background: var(--surface-hover); padding: .1em .3em; border-radius: var(--radius-sm); }

.annotation { display: grid; gap: var(--space-2); }
.anno-word { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.anno-word b { font: 400 18px/24px var(--font-read); }
.anno-pos { font: 400 11px/16px var(--font-mono); color: var(--ink-muted); }
.anno-gloss { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.anno-zh { font: 400 15px/24px var(--font-sans); }
.anno-note { font: 400 12px/18px var(--font-sans); color: var(--ink-muted); padding-top: var(--space-2); box-shadow: inset 0 1px 0 var(--border); }

.chat { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.chat:empty { display: none; }
.msg { max-width: 92%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); font: 400 13px/20px var(--font-sans); overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--surface-active); border-bottom-right-radius: var(--radius-sm); }
.msg.assistant { align-self: flex-start; background: var(--surface-subtle); box-shadow: var(--material-base); border-bottom-left-radius: var(--radius-sm); }
.msg.assistant.error { background: var(--red-100); color: var(--red-900); box-shadow: none; }
.msg.md p { margin: 0 0 .5em; }
.msg.md > *:last-child { margin-bottom: 0; }
.msg.md ul, .msg.md ol { margin: 0 0 .5em; padding-left: 1.2em; }
.ask { display: flex; gap: var(--space-2); }
.ask input { flex: 1; }

.view-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.trans-list { display: flex; flex-direction: column; gap: var(--space-2); }
.trans-item {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--material-base);
  cursor: pointer;
  transition: box-shadow .15s, background .15s;
}
.trans-item:hover { background: var(--surface-hover); box-shadow: var(--material-small); }
.trans-item .src { font: 400 12px/18px var(--font-read); color: var(--ink-muted); margin-bottom: var(--space-2); }
.trans-item .dst { font: 400 14px/22px var(--font-sans); }
.trans-item .dst:empty::before { content: "…"; color: var(--ink-disabled); }

.ov-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); min-height: 28px; }
.text.overview h2 { margin-top: 1.4em; }

.notes-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.notes-list { display: flex; flex-direction: column; gap: var(--space-2); }
.note-page { font: 400 11px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin: var(--space-3) 0 var(--space-1); }
.note-page:first-child { margin-top: 0; }
.note-card {
  position: relative;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--material-base);
  cursor: pointer;
  transition: box-shadow .15s;
}
.note-card:hover { box-shadow: var(--material-small); }
.note-card.active { box-shadow: 0 0 0 1px var(--primary); }
.note-card.orphan { opacity: .7; }
.note-quote { font: 400 14px/20px var(--font-read); margin-bottom: var(--space-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note-zh { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note-flags { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.note-flags span { font: 400 11px/16px var(--font-sans); color: var(--ink-muted); }
.note-del { position: absolute; top: var(--space-1); right: var(--space-1); opacity: 0; }
.note-card:hover .note-del, .note-del:focus-visible { opacity: 1; }

.home-actions { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); flex-wrap: wrap; }
.library { display: flex; flex-direction: column; gap: var(--space-1); }
.lib-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .15s;
}
.lib-item:hover { background: var(--surface-hover); }
.lib-item.active { background: var(--surface-active); }
.lib-icon {
  width: 34px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-active);
  color: var(--ink-muted);
  font: 500 9px/1 var(--font-sans);
  letter-spacing: .04em;
}
.lib-name { font: 400 13px/18px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-meta { font: 400 11px/16px var(--font-sans); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-del { opacity: 0; }
.lib-item:hover .lib-del, .lib-del:focus-visible { opacity: 1; }
.library:empty::after {
  content: "No documents yet";
  display: block;
  padding: var(--space-4) 0;
  text-align: center;
  font: 400 12px/18px var(--font-sans);
  color: var(--ink-muted);
}
#storageInfo { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.meter { display: flex; flex-direction: column; gap: var(--space-1); font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.meter-head { display: flex; justify-content: space-between; gap: var(--space-2); }
.meter-head span:first-child { color: var(--ink); font-weight: 500; }
.meter-value { font-variant-numeric: tabular-nums; }
.meter-track { height: 6px; border-radius: var(--radius-full); background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.meter-fill { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width .3s ease; }
.meter-fill.full { background: var(--red-900); }
.meter-note { font-size: 11px; line-height: 16px; }