:root {
  --green:#1b5340; --green-dark:#173f32; --ink:#183b30; --muted:#65776d;
  --line:#d8e2d8; --soft:#edf3eb; --danger:#a83227; --radius:10px;
  font:15px/1.6 system-ui,-apple-system,"Microsoft YaHei",sans-serif;
  color:var(--ink); background:#f1f4ef;
}
* { box-sizing:border-box; }
body { margin:0; }
header { background:var(--green-dark); color:white; padding:24px max(24px,calc((100vw - 1180px)/2)); }
h1 { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:0; font-size:28px; }
header p { margin:8px 0 0; color:#ccded1; overflow-wrap:anywhere; }
main { max-width:1180px; margin:auto; padding:20px 20px calc(32px + env(safe-area-inset-bottom,0px)); }
h2 { font-size:20px; line-height:1.5; margin:0 0 16px; overflow-wrap:anywhere; }
h3 { font-size:16px; margin:24px 0 12px; }
p { margin:12px 0; }
button,a.download,.file-trigger {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:10px 16px; border:1px solid transparent; border-radius:var(--radius);
  background:var(--green); color:white;
  font-family:inherit; font-size:14px; font-weight:600; line-height:22px;
  cursor:pointer; text-decoration:none; text-align:center; white-space:nowrap;
  touch-action:manipulation; vertical-align:middle; max-width:100%;
}
button.secondary { color:var(--green-dark); background:var(--soft); border-color:var(--line); }
button.danger { color:var(--danger); background:#fff3ef; border-color:#efccc4; }
button.danger-confirm { color:white; background:var(--danger); border-color:var(--danger); }
button:disabled { opacity:.48; cursor:not-allowed; }
button:focus-visible,.file-trigger:focus-visible,a.download:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid #65a189; outline-offset:3px;
}
@media(hover:hover) { button:not(:disabled):hover,a.download:hover,.file-trigger:hover { filter:brightness(.95); } }
nav { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:8px; margin:20px 0; }
nav button { padding:10px 8px; background:white; color:var(--green-dark); border-color:var(--line); }
nav button.active { background:var(--green); border-color:var(--green); color:white; }
.card { min-width:0; background:white; border:1px solid #e3eae1; border-radius:16px; padding:24px; margin:16px 0; }
#bookBar { border-left:4px solid var(--green); }
.book-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.book-identity { display:flex; align-items:center; flex-wrap:wrap; gap:10px; min-width:0; }
.book-identity strong { overflow-wrap:anywhere; }
.book-summary>button { flex-shrink:0; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:16px 0; }
.actions>button,.actions>a { flex:0 1 auto; }
.actions:last-child { margin-bottom:0; }
.actions:first-child { margin-top:0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); align-items:stretch; gap:16px; }
.grid>* { min-width:0; }
.metrics-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.metric { padding:12px 0; }
.metric span { display:block; color:var(--muted); font-size:13px; }
.metric strong { display:block; font-size:clamp(23px,3vw,30px); line-height:1.4; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.muted { color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.warn,.err { padding:14px 16px; border-radius:var(--radius); margin:16px 0; overflow-wrap:anywhere; }
.warn { background:#fff2d9; color:#80500f; }
.err { background:#ffe7e1; color:#962d20; white-space:pre-wrap; }
label { display:block; font-size:14px; margin:0 0 16px; overflow-wrap:anywhere; }
.grid>label { display:flex; flex-direction:column; gap:6px; margin:0; }
.field-caption { font-weight:600; line-height:22px; }
.field-hint { color:var(--muted); font-size:13px; line-height:20px; }
.detail-fields { margin:16px 0; }
.detail-fields>div { display:grid; grid-template-columns:minmax(100px,160px) minmax(0,1fr); gap:16px; padding:12px 0; border-bottom:1px solid var(--line); }
.detail-fields dt { color:var(--muted); }
.detail-fields dd { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.grid>label>input:not([type=checkbox]),.grid>label>select { flex-shrink:0; height:44px; margin-top:auto; }
input,select,textarea { display:block; width:100%; min-width:0; min-height:44px; border:1px solid #cbd8cc; border-radius:var(--radius); padding:10px 12px; font:inherit; font-size:15px; line-height:22px; color:var(--ink); background:#fcfdfb; margin-top:6px; }
textarea { resize:vertical; min-height:110px; }
input[type=checkbox] { display:inline-block; width:20px; height:20px; min-height:20px; margin:0 8px 0 0; vertical-align:middle; accent-color:var(--green); }
label:has(>input[type=checkbox]) { display:flex; align-items:center; min-height:44px; line-height:1.6; }
input[type=checkbox] { flex-shrink:0; }
input[type=file] { font-size:14px; overflow:hidden; padding:8px; }
input[type=file]::file-selector-button { min-height:36px; margin-right:12px; border:1px solid var(--line); border-radius:7px; padding:6px 12px; background:var(--soft); color:var(--green-dark); font:inherit; cursor:pointer; }
table { border-collapse:collapse; width:100%; font-size:14px; }
td,th { text-align:left; border-bottom:1px solid #e6ede4; padding:12px; vertical-align:middle; }
th { color:#5b7064; background:#f8faf6; white-space:nowrap; font-weight:600; }
td { overflow-wrap:anywhere; }
.record-table td:not(:last-child) { white-space:nowrap; overflow-wrap:normal; }
.scroll { max-width:100%; overflow:auto; border:1px solid #e3eae1; border-radius:12px; overscroll-behavior-x:contain; }
.record-table th:first-child,.record-table td:first-child { position:sticky; left:0; background:white; z-index:1; min-width:152px; width:152px; padding:10px; box-shadow:2px 0 6px #183b300c; }
.record-table th:first-child { z-index:2; background:#f8faf6; }
.record-table td:first-child button { display:flex; width:100%; margin:0; }
.record-table td:first-child button+button { margin-top:8px; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; }
details { margin:16px 0; }
summary { min-height:44px; padding:10px 0; cursor:pointer; }
dialog { border:1px solid var(--line); border-radius:18px; width:min(900px,calc(100vw - 32px)); max-height:90vh; max-height:90dvh; padding:24px; color:var(--ink); overflow:auto; }
dialog::backdrop { background:#102f2477; }
dialog form>.actions { position:sticky; bottom:-24px; z-index:5; padding:16px 24px calc(16px + env(safe-area-inset-bottom,0px)); margin:24px -24px -24px; background:white; border-top:1px solid var(--line); }
.line { display:grid; grid-template-columns:minmax(0,2fr) minmax(80px,1fr) minmax(80px,1fr) auto; align-items:center; gap:12px; margin:12px 0; padding:12px; background:#f5f8f2; border-radius:12px; }
.line input,.line select { margin:0; }
.version { display:inline-block; font-size:12px; font-weight:500; background:#e2eedf; color:var(--green-dark); padding:5px 10px; border-radius:7px; white-space:nowrap; }
.pill { display:inline-block; font-size:12px; background:#e7efe4; padding:4px 10px; border-radius:7px; }
.hide { display:none; }
#toast { position:fixed; bottom:calc(20px + env(safe-area-inset-bottom,0px)); right:20px; left:auto; max-width:calc(100vw - 40px); background:var(--green-dark); color:white; padding:14px 20px; border-radius:12px; display:none; z-index:20; pointer-events:none; }
.ocr-row { border:1px solid var(--line); border-radius:12px; padding:20px; margin:20px 0; }
.ocr-done { background:#f2f5f0; }
.ocr-review { padding:14px; background:#e8f0e3; border-radius:10px; font-weight:600; }
.ocr-original { max-width:100%; max-height:700px; object-fit:contain; }
.file-picker,.ocr-upload { position:relative; display:flex; align-items:center; justify-content:center; min-height:44px; padding:10px 16px; border:1px solid var(--line); border-radius:var(--radius); margin:0; background:var(--soft); color:var(--green-dark); font-weight:600; font-size:14px; text-align:center; cursor:pointer; overflow:hidden; }
.ocr-upload { flex:1 1 100%; background:var(--green); border-color:var(--green); color:white; }
.file-picker input,.ocr-upload input { position:absolute; inset:0; width:100%; height:100%; padding:0; margin:0; opacity:0; cursor:pointer; }
.file-picker:focus-within,.ocr-upload:focus-within { outline:3px solid #65a189; outline-offset:3px; }
.ocr-new-material { background:#f7faf4; padding:16px; border-radius:10px; }
.ocr-new-material[hidden] { display:none; }
@media(max-width:1000px) { nav { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media(max-width:600px) {
  header { padding:20px 16px; } h1 { font-size:24px; gap:8px; } header p { font-size:12px; }
  main { padding:0 12px calc(24px + env(safe-area-inset-bottom,0px)); }
  .card { padding:16px; margin:12px 0; border-radius:14px; } h2 { font-size:19px; }
  .detail-fields>div { grid-template-columns:minmax(0,1fr); gap:4px; }
  .detail-fields dt { font-size:13px; }
  nav { grid-template-columns:repeat(4,minmax(0,1fr)); margin:16px 0; }
  nav button { padding:10px 4px; }
  nav button:nth-last-child(-n+2) { grid-column:span 2; }
  .book-summary { align-items:stretch; flex-direction:column; gap:12px; }
  .book-summary>button { width:100%; }
  .book-identity { gap:8px; }
  .actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:stretch; }
  .actions>button,.actions>a { width:100%; padding:10px 8px; }
  .actions>.wide,.actions>.ocr-upload { grid-column:1/-1; }
  .actions:not(.query-actions)>button:last-child:nth-child(odd),.actions>.ocr-upload~button:last-child { grid-column:1/-1; }
  .query-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .metric span { font-size:12px; } .metric strong { font-size:24px; }
  .line { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px; }
  .line>select { grid-column:1/-1; }
  .line>button { grid-column:1/-1; }
  .line>span { display:none; }
  .line[data-kind=component]>button,.line[data-kind=sale]>button { grid-column:auto; }
  dialog { width:calc(100vw - 24px); padding:16px; border-radius:14px; }
  dialog form>.actions { bottom:-16px; margin:20px -16px -16px; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); }
  input,select,textarea { font-size:16px; }
  .warn,.err { padding:12px; font-size:13px; }
  .ocr-row { padding:12px; } .ocr-new-material { padding:12px; }
  .record-table { min-width:600px; }
  td,th { padding:10px; }
  #createBookForm>button,#allBooksBackup { width:100%; }
}
@media(max-width:360px) { .actions:not(.query-actions) { grid-template-columns:minmax(0,1fr); } }

[hidden] { display:none !important; }
header #logout { margin-top:12px; }
.connection-card { max-width:560px; margin:24px auto; }

#toast { pointer-events:none; }