:root {
  --ink: #172a30;
  --ink-soft: #385158;
  --muted: #7b898d;
  --muted-light: #a7b3b2;
  --paper: #f4f6f1;
  --paper-deep: #e9eee8;
  --surface: #fffefa;
  --line: #dfe5df;
  --line-dark: #cfd8d2;
  --navy: #172b35;
  --navy-soft: #203d45;
  --teal: #2c7873;
  --teal-soft: #e0efea;
  --orange: #c56c3d;
  --orange-soft: #f6e4d7;
  --purple: #72598b;
  --purple-soft: #eee8f3;
  --red: #b85d58;
  --red-soft: #f4e1df;
  --yellow: #b08b37;
  --yellow-soft: #f5efd8;
  --blue: #487a91;
  --shadow: 0 12px 36px rgba(22, 43, 53, .12);
  --radius: 8px;
  font-family: "DM Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--paper); font-size: 14px; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { color: var(--surface); background: var(--teal); }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 248px; flex: 0 0 248px; min-height: 100vh; display: flex; flex-direction: column; color: #dbe5e1; background: var(--navy); padding: 22px 14px 16px; }
.sidebar-top, .topbar, .topbar-left, .topbar-actions, .brand, .workspace-switcher, .user-card, .storage-head, .stat-top, .stat-foot, .section-heading, .filter-bar, .search-wrap, .view-actions, .form-footer, .modal-header, .backup-row { display: flex; align-items: center; }
.sidebar-top { justify-content: space-between; padding: 0 9px 20px; }
.brand { gap: 10px; font-size: 16px; font-weight: 700; letter-spacing: .01em; }
.brand-mark { width: 24px; height: 25px; position: relative; display: inline-flex; align-items: flex-end; gap: 3px; }
.brand-mark i { display: block; width: 5px; border-radius: 2px 2px 1px 1px; background: #d9eae2; transform: skew(-17deg); }
.brand-mark i:nth-child(1) { height: 15px; opacity: .7; }
.brand-mark i:nth-child(2) { height: 21px; background: #75b9a7; }
.brand-mark i:nth-child(3) { height: 13px; opacity: .85; }
.brand-word { letter-spacing: -.02em; }
.workspace-switcher { gap: 10px; min-height: 54px; padding: 9px 10px; border: 1px solid rgba(219,229,225,.14); background: rgba(255,255,255,.045); border-radius: var(--radius); }
.workspace-avatar, .user-avatar { display: inline-grid; flex: 0 0 auto; place-items: center; color: #173238; background: #90bdac; font-weight: 700; }
.workspace-avatar { width: 29px; height: 29px; border-radius: 7px; font-size: 12px; }
.workspace-switcher span:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.workspace-switcher strong { font-size: 12px; color: #f6fbf8; font-weight: 600; white-space: nowrap; }
.workspace-switcher small { color: #92a7a6; font-size: 11px; }
.chevron { color: #849998; font-size: 18px; align-self: center; }
.main-nav { margin-top: 28px; }
.nav-label { color: #718a8b; font-size: 10px; font-weight: 700; letter-spacing: .14em; margin: 0 10px 8px; }
.nav-label-gap { margin-top: 28px; }
.nav-item { min-height: 38px; width: 100%; display: flex; align-items: center; gap: 11px; border: 0; border-radius: 6px; color: #abc0bc; background: transparent; padding: 0 11px; font-size: 13px; text-align: left; transition: background .16s ease, color .16s ease; }
.nav-item:hover, .nav-item.active { color: #f6fbf8; background: rgba(121,180,162,.16); }
.nav-item.active { box-shadow: inset 2px 0 0 #72b6a3; }
.nav-button { appearance: none; }
.nav-icon { width: 16px; color: #8aa29f; font-size: 18px; line-height: 1; text-align: center; }
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { color: #86c9b4; }
.nav-count { margin-left: auto; color: #87a5a0; font-family: "DM Mono", monospace; font-size: 11px; }
.sidebar-bottom { margin-top: auto; }
.storage-meter { padding: 15px 10px 18px; border-bottom: 1px solid rgba(219,229,225,.1); }
.storage-head { justify-content: space-between; color: #758d8c; font-size: 9px; letter-spacing: .11em; }
.storage-head span:last-child { color: #a4b6b3; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: 0; }
.meter { height: 4px; margin: 9px 0 8px; border-radius: 3px; background: #2d4449; overflow: hidden; }
.meter i { display: block; width: 27%; height: 100%; border-radius: 3px; background: #7bb7a4; }
.storage-meter small { color: #728b89; font-size: 10px; }
.user-card { gap: 9px; padding: 15px 9px 0; }
.user-avatar { width: 29px; height: 29px; border-radius: 50%; font-size: 11px; }
.user-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.user-meta strong { color: #ecf4f0; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta small { color: #79908e; font-size: 10px; }

.main-content { min-width: 0; flex: 1; }
.topbar { height: 67px; justify-content: space-between; padding: 0 44px; border-bottom: 1px solid var(--line); background: rgba(244,246,241,.93); }
.topbar-left, .topbar-actions { gap: 14px; }
.breadcrumb { color: var(--muted); font-size: 12px; }
.breadcrumb strong { color: var(--ink); font-weight: 600; }
.top-action { display: flex; align-items: center; gap: 8px; height: 32px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 0 9px; font-size: 11px; }
.top-action:hover { color: var(--ink); border-color: var(--line-dark); }
.search-glyph { color: var(--teal); font-size: 17px; line-height: 1; }
kbd { color: #94a09e; border: 1px solid var(--line); border-bottom-color: #c8d0ca; border-radius: 3px; background: #f5f7f3; padding: 2px 5px; font-family: "DM Mono", monospace; font-size: 9px; white-space: nowrap; }
.icon-button { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 0; color: inherit; background: transparent; border-radius: 6px; font-size: 18px; line-height: 1; }
.icon-button:hover { background: rgba(98,122,120,.1); }
.topbar .icon-button { color: var(--muted); }
.user-avatar.small { color: var(--ink); border: 2px solid var(--surface); outline: 1px solid var(--line); background: #e1b383; font-size: 10px; }
.mobile-only { display: none; }

.page-wrap { max-width: 1480px; margin: 0 auto; padding: 43px 44px 58px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 31px; }
.eyebrow { color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .13em; line-height: 1.4; }
.eyebrow-dot { display: inline-block; width: 4px; height: 4px; margin: 0 5px 2px; border-radius: 50%; background: var(--orange); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 9px 0 7px; color: var(--ink); font-family: "Noto Serif SC", Georgia, serif; font-size: 35px; font-weight: 600; letter-spacing: -.045em; line-height: 1.15; }
h1 span { margin-left: 7px; color: var(--muted-light); font-family: "DM Mono", monospace; font-size: 13px; font-weight: 400; letter-spacing: 0; vertical-align: middle; }
.page-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 6px; padding: 0 14px; font-size: 12px; font-weight: 600; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.button:active { transform: translateY(1px); }
.button.primary { color: #f9fffb; background: var(--teal); box-shadow: 0 4px 10px rgba(44,120,115,.14); }
.button.primary:hover { background: #236762; }
.button.secondary { color: var(--ink-soft); border-color: var(--line-dark); background: var(--surface); }
.button.secondary:hover { border-color: var(--teal); color: var(--teal); }
.add-button { padding: 0 16px 0 12px; }
.plus { color: #bce0d3; font-size: 18px; font-weight: 400; }
.full { width: 100%; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 43px; }
.stat-card { min-height: 127px; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,254,250,.68); }
.stat-top { justify-content: space-between; }
.stat-label { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.stat-icon { width: 23px; height: 23px; display: inline-grid; place-items: center; border-radius: 6px; font-size: 15px; }
.stat-icon.teal { color: var(--teal); background: var(--teal-soft); }
.stat-icon.orange { color: var(--orange); background: var(--orange-soft); }
.stat-icon.purple { color: var(--purple); background: var(--purple-soft); }
.stat-icon.red { color: var(--red); background: var(--red-soft); }
.stat-card > strong { display: block; margin: 13px 0 7px; font-family: "DM Mono", monospace; font-size: 24px; font-weight: 500; letter-spacing: -.04em; }
.stat-foot { gap: 7px; color: var(--muted); font-size: 10px; }
.trend { font-family: "DM Mono", monospace; font-size: 10px; }
.trend.up { color: var(--teal); }
.trend.down { color: var(--red); }
.stat-neutral { color: var(--purple); font-family: "DM Mono", monospace; }

.library-layout { display: grid; grid-template-columns: minmax(0, 1fr) 295px; gap: 46px; }
.section-heading { justify-content: space-between; gap: 12px; margin-bottom: 17px; }
h2 { margin: 0 0 4px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.section-subtitle { color: var(--muted); font-size: 10px; }
.view-actions { gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.view-button { width: 27px; height: 25px; border: 0; border-radius: 3px; color: var(--muted); background: transparent; font-size: 16px; line-height: 1; }
.view-button.active, .view-button:hover { color: var(--teal); background: var(--teal-soft); }
.filter-bar { gap: 8px; margin-bottom: 12px; }
.search-wrap { min-width: 220px; flex: 1; height: 37px; gap: 8px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.search-wrap > span { color: var(--teal); font-size: 19px; line-height: 1; }
.search-wrap input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.search-wrap input::placeholder { color: #9ba6a4; }
.filter-bar select, .advanced-filters select { height: 37px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 6px; outline: none; background: var(--surface); padding: 0 29px 0 10px; font-size: 11px; }
.filter-bar select:focus, .advanced-filters select:focus, input:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(44,120,115,.1); }
.filter-button { height: 37px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; background: transparent; padding: 0 11px; font-size: 12px; }
.filter-button:hover { color: var(--teal); border-color: var(--teal); }
.advanced-filters { display: none; align-items: center; gap: 9px; padding: 0 0 12px; }
.advanced-filters.open { display: flex; }
.advanced-filters label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.advanced-filters select { height: 30px; padding-right: 22px; font-size: 10px; }
.text-button { border: 0; color: var(--teal); background: transparent; font-size: 11px; }
.text-button:hover { text-decoration: underline; }
.article-list { border-top: 1px solid var(--line); }
.article-list.grid-view { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; border-top: 0; }
.article-list.grid-view .article-row { grid-template-columns: 28px minmax(0, 1fr); min-height: 150px; padding: 16px 13px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,254,250,.68); }
.article-list.grid-view .article-row:hover { border-color: var(--line-dark); }
.article-list.grid-view .article-right { grid-column: 2; align-items: flex-start; flex-direction: row; min-width: 0; }
.article-list.grid-view .article-date { order: 2; margin-left: auto; }
.article-list.grid-view .article-title, .article-list.grid-view .article-title-zh { white-space: normal; }
.article-row { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 99px; padding: 15px 6px 15px 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s ease; }
.article-row:hover { background: rgba(255,254,250,.72); }
.article-index { color: #b2bdb8; font-family: "DM Mono", monospace; font-size: 11px; text-align: center; }
.article-copy { min-width: 0; }
.article-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; color: var(--muted); font-size: 10px; }
.journal-name { color: var(--teal); font-weight: 600; }
.meta-separator { color: #bdc7c2; }
.article-title { display: block; overflow: hidden; color: var(--ink); font-family: "Noto Serif SC", Georgia, serif; font-size: 15px; font-weight: 600; letter-spacing: -.025em; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.article-title-zh { display: block; overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.article-extra { display: flex; align-items: center; gap: 11px; margin-top: 8px; color: var(--muted); font-size: 10px; }
.author { overflow: hidden; max-width: 260px; text-overflow: ellipsis; white-space: nowrap; }
.doi { color: #8a9897; font-family: "DM Mono", monospace; font-size: 9px; }
.article-right { min-width: 110px; display: flex; align-items: flex-end; flex-direction: column; gap: 9px; }
.article-date { color: var(--muted); font-family: "DM Mono", monospace; font-size: 10px; }
.tag { display: inline-flex; align-items: center; height: 21px; gap: 5px; border-radius: 4px; padding: 0 7px; font-size: 9px; font-weight: 600; }
.tag.ready { color: var(--teal); background: var(--teal-soft); }
.tag.review { color: var(--orange); background: var(--orange-soft); }
.tag.pdf { color: var(--purple); background: var(--purple-soft); }
.tag-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.list-footer { display: flex; align-items: center; justify-content: space-between; min-height: 46px; color: var(--muted); font-size: 10px; }
.list-footer .text-button { padding: 0; }
.loading-state { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 180px; color: var(--muted); font-size: 12px; }
.spinner { width: 14px; height: 14px; display: inline-block; border: 2px solid var(--line-dark); border-top-color: var(--teal); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-state { padding: 52px 20px; border-top: 1px solid var(--line); text-align: center; }
.empty-icon { color: var(--teal); font-size: 31px; }
.empty-state h3 { margin: 10px 0 5px; font-size: 16px; }
.empty-state p { margin-bottom: 17px; color: var(--muted); font-size: 12px; }
.hidden { display: none !important; }

.side-rail { min-width: 0; border-left: 1px solid var(--line); padding-left: 26px; }
.rail-section { padding: 1px 0 25px; border-bottom: 1px solid var(--line); }
.rail-section + .rail-section { padding-top: 25px; }
.section-heading.compact { align-items: flex-start; margin-bottom: 17px; }
.more-button { width: 26px; height: 24px; border: 0; color: var(--muted); background: transparent; font-size: 14px; letter-spacing: .1em; }
.reading-list { display: flex; flex-direction: column; gap: 3px; }
.reading-item { width: 100%; display: grid; grid-template-columns: 3px minmax(0,1fr) 13px; align-items: center; gap: 11px; border: 0; border-radius: 4px; color: var(--ink); background: transparent; padding: 8px 3px 8px 0; text-align: left; }
.reading-item:hover { background: var(--paper-deep); }
.reading-progress { width: 3px; height: 42px; display: flex; align-items: flex-end; border-radius: 2px; background: #d8e5df; overflow: hidden; }
.reading-progress i { display: block; width: 100%; border-radius: 2px; background: var(--teal); }
.reading-progress.amber { background: #eee5d3; }.reading-progress.amber i { background: var(--orange); }
.reading-progress.lavender { background: #e4ddec; }.reading-progress.lavender i { background: var(--purple); }
.reading-item strong { display: block; overflow: hidden; margin-bottom: 4px; font-family: "Noto Serif SC", Georgia, serif; font-size: 11px; font-weight: 600; line-height: 1.38; text-overflow: ellipsis; white-space: nowrap; }
.reading-item small { color: var(--muted); font-size: 9px; }
.reading-arrow { color: #a5b1ad; font-size: 19px; }
.rail-link { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; color: var(--teal); background: transparent; padding: 16px 0 0; font-size: 10px; font-weight: 600; text-align: left; }
.rail-link span { font-size: 17px; }
.activity-list { display: flex; flex-direction: column; }
.activity-item { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 11px; padding: 0 0 16px; }
.activity-dot { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; box-shadow: 0 0 0 3px var(--paper); }
.activity-dot.green { background: var(--teal); }.activity-dot.blue { background: var(--blue); }.activity-dot.yellow { background: var(--yellow); }
.activity-item p { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.activity-item strong { color: var(--ink); font-size: 11px; font-weight: 600; }
.activity-item span { color: var(--muted); }
.activity-item small { display: block; margin-top: 4px; color: #a0adaa; font-family: "DM Mono", monospace; font-size: 9px; }
.quote-card { margin-top: 26px; padding: 21px 20px 19px; border-radius: 7px; color: #eef7f1; background: var(--navy-soft); }
.quote-mark { display: block; height: 22px; color: #87c4af; font-family: Georgia, serif; font-size: 37px; line-height: 1; }
.quote-card p { margin: 4px 0 15px; font-family: "Noto Serif SC", Georgia, serif; font-size: 13px; line-height: 1.65; }
.quote-card small { color: #8fa9a3; font-size: 10px; }

.overlay { position: fixed; z-index: 20; inset: 0; display: none; background: rgba(18,38,43,.3); }
.overlay.open { display: block; }
.drawer { position: fixed; z-index: 21; top: 0; right: 0; bottom: 0; width: min(570px, 100vw); display: flex; flex-direction: column; color: var(--ink); background: var(--surface); box-shadow: -16px 0 42px rgba(17,37,44,.16); transform: translateX(102%); transition: transform .24s ease; }
.drawer.open { transform: translateX(0); }
.drawer-header { display: flex; justify-content: space-between; align-items: center; min-height: 74px; padding: 0 27px; border-bottom: 1px solid var(--line); }
.drawer-header .icon-button { color: var(--muted); font-size: 24px; }
.drawer-content { flex: 1; overflow-y: auto; padding: 35px 37px 50px; }
.detail-journal { margin-bottom: 10px; color: var(--teal); font-size: 11px; font-weight: 700; }
.detail-title { margin: 0 0 10px; font-family: "Noto Serif SC", Georgia, serif; font-size: 26px; line-height: 1.35; letter-spacing: -.04em; }
.detail-title-zh { margin: 0 0 20px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.detail-meta b { color: var(--ink-soft); font-weight: 600; }
.detail-actions { display: flex; gap: 8px; margin: 22px 0 31px; }
.detail-section { margin: 0 0 24px; }
.detail-section h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: var(--teal); font-size: 10px; letter-spacing: .11em; }
.detail-section h3::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--orange); }
.detail-section p { margin: 0; color: var(--ink-soft); font-family: "Noto Serif SC", Georgia, serif; font-size: 13px; line-height: 1.75; }
.detail-authors { display: flex; flex-wrap: wrap; gap: 5px; }
.author-chip, .keyword-chip { display: inline-flex; align-items: center; min-height: 25px; border-radius: 4px; padding: 0 8px; font-size: 10px; }
.author-chip { color: var(--ink-soft); background: var(--paper-deep); }.keyword-chip { color: var(--teal); background: var(--teal-soft); }
.detail-keywords { display: flex; flex-wrap: wrap; gap: 5px; }
.pdf-link { color: var(--purple); }
.pdf-link:hover { text-decoration: underline; }

dialog { border: 0; padding: 0; }
.modal { width: min(700px, calc(100vw - 28px)); max-height: calc(100vh - 34px); overflow-y: auto; border-radius: 9px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
.modal::backdrop, .command-modal::backdrop { background: rgba(18,38,43,.45); }
.modal-header { justify-content: space-between; align-items: flex-start; padding: 27px 30px 21px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 8px 0 0; font-family: "Noto Serif SC", Georgia, serif; font-size: 22px; letter-spacing: -.03em; }
.modal-header .icon-button { color: var(--muted); font-size: 24px; }
.modal-tabs, .settings-tabs { display: flex; gap: 3px; padding: 13px 30px 0; border-bottom: 1px solid var(--line); }
.modal-tab, .settings-tab { border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; padding: 8px 10px 11px; font-size: 11px; }
.modal-tab.active, .settings-tab.active { color: var(--teal); border-bottom-color: var(--teal); font-weight: 600; }
.tab-panel { display: none; padding: 23px 30px 0; }.tab-panel.active { display: block; }
.ai-intro, .settings-note { display: flex; gap: 12px; padding: 13px 14px; border-radius: 6px; color: var(--ink-soft); background: #eef5ef; }
.ai-spark { color: var(--orange); font-size: 21px; }.ai-intro strong { font-size: 12px; }.ai-intro p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
label { display: flex; flex-direction: column; gap: 7px; color: var(--ink-soft); font-size: 11px; font-weight: 600; }
label small { color: var(--muted); font-size: 9px; font-weight: 400; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 5px; outline: none; color: var(--ink); background: #fff; padding: 10px 11px; font-size: 12px; transition: border .16s ease, box-shadow .16s ease; }
textarea { resize: vertical; line-height: 1.55; }
.ai-intro + label { margin-top: 18px; }.ai-button { width: 100%; margin-top: 11px; color: #fffaf4; background: var(--orange); }.ai-button:hover { background: #b75c30; }.ai-button small { margin-left: auto; color: #f6d9c8; font-size: 9px; font-weight: 400; }
.ai-status { min-height: 26px; padding-top: 9px; color: var(--teal); font-size: 11px; }.ai-status.error { color: var(--red); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }.form-grid .span-2 { grid-column: span 2; }.form-grid label { min-width: 0; }
.file-field { position: relative; }.file-field input[type=file], .file-button input[type=file] { padding: 8px; cursor: pointer; }.file-field input[type=file] { color: var(--muted); }
.form-footer { justify-content: flex-end; gap: 8px; padding: 21px 30px 27px; margin-top: 24px; border-top: 1px solid var(--line); }
.settings-tabs { padding-left: 24px; padding-right: 24px; }.settings-panel { display: none; padding: 24px; }.settings-panel.active { display: block; }.narrow { width: min(550px, calc(100vw - 28px)); }.settings-note { margin-bottom: 20px; background: var(--purple-soft); }.settings-note > span { color: var(--purple); font-size: 18px; }.settings-note p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }.settings-note strong { color: var(--ink-soft); font-size: 11px; }
#settings-form { display: flex; flex-direction: column; gap: 14px; }.form-message { min-height: 17px; margin: 11px 0 0; color: var(--teal); font-size: 11px; }
.member-list { display: flex; flex-direction: column; margin-bottom: 17px; border-top: 1px solid var(--line); }.member-row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }.member-row .user-avatar { width: 28px; height: 28px; }.member-row strong { display: block; font-size: 11px; }.member-row small { color: var(--muted); font-size: 9px; }.member-role { color: var(--teal); font-size: 9px; }.member-delete { color: var(--red); border: 0; background: transparent; font-size: 11px; }.member-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.member-form button { grid-column: span 2; }.backup-row { justify-content: space-between; align-items: flex-start; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--line); }.backup-row strong { font-size: 12px; }.backup-row p { max-width: 290px; margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }.file-button { flex: 0 0 auto; position: relative; cursor: pointer; }.file-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.command-modal { width: min(530px, calc(100vw - 28px)); overflow: hidden; border-radius: 8px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }.command-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }.command-search > span { color: var(--teal); font-size: 20px; }.command-search input { border: 0; box-shadow: none; padding: 0; font-size: 14px; }.command-list { padding: 7px; }.command-list button { width: 100%; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 8px; border: 0; border-radius: 5px; color: var(--ink); background: transparent; padding: 11px 9px; text-align: left; }.command-list button:hover { background: var(--paper-deep); }.command-icon { color: var(--teal); font-size: 18px; text-align: center; }.command-list strong, .command-list small { display: block; }.command-list strong { font-size: 11px; }.command-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }.command-list kbd { font-size: 8px; }
.toast { position: fixed; z-index: 50; right: 24px; bottom: 24px; max-width: 300px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; font-size: 11px; }.toast.show { opacity: 1; transform: translateY(0); }

.login-body { display: grid; place-items: center; min-height: 100vh; color: var(--ink); background: var(--navy); }.login-shell { width: min(100%, 1020px); display: grid; grid-template-columns: .9fr 1fr; gap: 90px; align-items: center; padding: 50px; }.login-brand { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; color: #f0f7f2; font-size: 16px; font-weight: 700; }.login-brand .brand-mark i { background: #87c7b4; }.login-brand .brand-mark i:first-child, .login-brand .brand-mark i:last-child { opacity: .55; }.login-panel { padding: 38px 40px 32px; border-radius: 9px; background: var(--surface); box-shadow: 0 18px 60px rgba(6,21,29,.22); }.login-panel h1 { margin-top: 14px; margin-bottom: 13px; font-size: 37px; }.login-panel h1 em { color: var(--teal); font-style: normal; }.login-copy { margin-bottom: 27px; color: var(--muted); font-size: 13px; }.login-panel form { display: flex; flex-direction: column; gap: 14px; }.login-panel label { gap: 7px; }.login-panel input { height: 42px; background: #fafbf8; }.login-panel .button { height: 43px; margin-top: 5px; }.login-panel .button span { margin-left: auto; font-size: 17px; }.login-hint { margin: 18px 0 0; color: #9ba7a4; font-size: 10px; line-height: 1.75; }.login-error { margin: -10px 0 15px; padding: 8px 10px; border-radius: 4px; color: var(--red); background: var(--red-soft); font-size: 11px; }.login-shell footer { grid-column: 1 / -1; display: flex; justify-content: space-between; color: #6f8a89; font-size: 10px; }.login-shell footer span { color: #506d6c; font-family: "DM Mono", monospace; }

@media (max-width: 1120px) {
  .topbar { padding: 0 28px; }.page-wrap { padding: 35px 28px 50px; }.library-layout { gap: 28px; }.side-rail { padding-left: 19px; }.stat-card { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 860px) {
  .sidebar { position: fixed; z-index: 30; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow); }.sidebar.open { transform: translateX(0); }.mobile-only { display: inline-grid; }.topbar { padding: 0 19px; }.topbar .mobile-only { color: var(--ink); }.page-wrap { padding: 30px 19px 45px; }.library-layout { grid-template-columns: 1fr; }.side-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; border-left: 0; padding: 28px 0 0; border-top: 1px solid var(--line); }.rail-section { border-bottom: 0; }.rail-section + .rail-section { padding-top: 0; }.quote-card { grid-column: span 2; margin-top: 0; }.stat-grid { margin-bottom: 35px; }.article-right { min-width: 85px; }
}
@media (max-width: 600px) {
  .top-action { width: 32px; justify-content: center; padding: 0; }.top-action > :not(.search-glyph) { display: none; }.topbar-actions { gap: 5px; }.page-heading { align-items: flex-start; flex-direction: column; gap: 20px; margin-bottom: 25px; }.page-heading .add-button { align-self: stretch; }.stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.stat-card { min-height: 116px; }.stat-card > strong { font-size: 21px; }.filter-bar { flex-wrap: wrap; }.search-wrap { flex-basis: 100%; }.filter-bar select { flex: 1; }.filter-button { flex: 0 0 auto; }.article-row { grid-template-columns: 25px minmax(0,1fr); gap: 9px; padding-right: 0; }.article-right { display: none; }.article-title { font-size: 13px; }.article-title-zh { font-size: 10px; }.author { max-width: 160px; }.list-footer { margin-top: 3px; }.side-rail { display: block; }.activity-section { margin-top: 26px; padding-top: 26px !important; border-top: 1px solid var(--line); }.quote-card { margin-top: 26px; }.drawer-content { padding: 27px 22px 45px; }.detail-title { font-size: 22px; }.modal-header { padding-left: 20px; padding-right: 20px; }.modal-tabs { padding-left: 20px; padding-right: 20px; }.tab-panel { padding-left: 20px; padding-right: 20px; }.form-grid { grid-template-columns: 1fr; }.form-grid .span-2 { grid-column: span 1; }.form-footer { padding-left: 20px; padding-right: 20px; }.settings-tabs { overflow-x: auto; padding-left: 14px; padding-right: 14px; }.settings-panel { padding: 20px; }.member-form { grid-template-columns: 1fr; }.member-form button { grid-column: span 1; }.backup-row { align-items: flex-start; flex-direction: column; }.file-button { width: 100%; }.login-shell { display: block; padding: 30px 19px; }.login-brand { margin-bottom: 45px; }.login-panel { padding: 30px 24px 26px; }.login-panel h1 { font-size: 31px; }.login-shell footer { margin-top: 34px; }.login-shell footer span { display: none; }.advanced-filters { flex-wrap: wrap; }.article-list.grid-view { display: block; border-top: 0; }.article-list.grid-view .article-row { min-height: 99px; margin-bottom: 8px; padding: 15px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; }.article-list.grid-view .article-right { display: none; }
}