/* Visual polish: warm paper, ink, teal and clay accents. Loaded after the responsive rules. */
:root{
  --canvas:#f2eee7;
  --surface:#fffdf8;
  --ink:#1d302b;
  --muted:#68756f;
  --accent:#176b5b;
  --accent-hover:#0e5548;
  --soft:#e7f0eb;
  --line:#d9d2c8;
  --danger:#b44d3d;
  --danger-soft:#fff0eb;
  --clay:#c56a4f;
  --clay-soft:#f9e8df;
  --shadow:0 12px 32px rgba(45,54,48,.08);
  --shadow-strong:0 24px 70px rgba(29,48,43,.2);
}

@media screen{
  body{background:var(--canvas);color:var(--ink)}
  .app-header{background:rgba(255,253,248,.94);border-bottom-color:#d8d1c7;box-shadow:0 1px 0 rgba(29,48,43,.04)}
  .brand{color:var(--ink);letter-spacing:1.5px}
  .brand-mark{background:var(--accent);border-radius:10px}
  .brand-mark i{background:#f9f3e9}
  .save-status{color:var(--accent)}
  .status-dot{background:#4d9a7b}
  .button{border-radius:10px;transition:transform 140ms ease,background 140ms ease,border-color 140ms ease,box-shadow 140ms ease}
  .button:hover:not(:disabled){transform:translateY(-1px)}
  .primary{background:var(--accent);border-color:var(--accent);box-shadow:0 5px 12px rgba(23,107,91,.16)}
  .primary:hover:not(:disabled){background:var(--accent-hover);box-shadow:0 7px 16px rgba(23,107,91,.22)}
  .secondary{background:var(--surface);border-color:#cfc7bc}
  .secondary:hover:not(:disabled){background:#f4eee5;border-color:#b9aea1}
  .quiet:hover,.icon-button:hover{background:#ebe5dc;color:var(--ink)}
  .icon-button{border-radius:10px}
  .app-main{padding-top:34px}
  .eyebrow{color:#7b7369;letter-spacing:1.1px}
  .tiny-rule{background:var(--clay)}
  h1{color:var(--ink);letter-spacing:.5px}
  .page-description{color:#6b746f}
  .records-panel{background:var(--surface);border-color:#d8d0c5;box-shadow:var(--shadow)}
  .count{background:var(--soft);color:var(--accent)}
  .record-item{background:transparent;border-color:#e0d9cf}
  .record-item:hover{background:#f7f1e8;border-color:#b9c9bf}
  .record-sum{color:var(--accent)}
  .search-box{background:#fbf8f2;border-color:#d7d0c6}
  .storage-note{background:#f4efe7}
  .paper-canvas{background:#e5e7df;border-color:#d5d7ce}
  .preview-label>span[data-icon]{color:var(--clay)}
  .live-badge{color:#286b57;background:#e0eee6}
  .print-settings-button{border:1px solid #d0c8bd;border-radius:9px}
  .mobile-tabs{border-bottom-color:#d6cec3}
  .mobile-tabs button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--clay)}
  .mobile-tabs .mobile-column-trigger{color:var(--accent)}
  .mobile-actionbar{background:rgba(255,253,248,.95);border-top-color:#d7d0c7}
  .notice{background:var(--danger-soft);border-color:#edc8bd;color:#8c3e32}
  .toast{background:var(--ink);box-shadow:0 10px 28px rgba(29,48,43,.22)}

  .modal{background:var(--surface);border-color:#d7cfc3;box-shadow:var(--shadow-strong)}
  .modal::backdrop{background:rgba(29,48,43,.58);backdrop-filter:blur(5px)}
  .modal-head{background:var(--surface);border-bottom-color:#e2dcd3;padding-top:24px}
  .modal-head h2{letter-spacing:.1px}
  .modal-head p{color:#737c76}
  .modal-body{background:#fffdf8}
  .modal-foot{background:var(--surface);border-top-color:#e2dcd3}
  .field>label,.field-label{color:#27443b}
  .field input,.field textarea,.field select,.column-name-input{background:#fffefa;border-color:#cfc8bd;border-radius:10px;color:var(--ink);transition:border-color 140ms ease,box-shadow 140ms ease,background 140ms ease}
  .field input:hover,.field textarea:hover,.field select:hover{border-color:#aaa095;background:#fffdf8}
  .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px rgba(23,107,91,.12);outline:none}
  .field textarea::placeholder,.field input::placeholder{color:#9a958d}
  .expense-field{border-top:1px solid #e2dad0;border-radius:0;padding:7px 0 0;margin-top:7px;background:transparent}
  .expense-field:first-of-type{margin-top:0}
  .expense-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
  .expense-field h3{color:var(--ink);font-size:15px;font-weight:700;margin:0;line-height:1.3}
  .expense-badge{display:none}
  .expense-inputs{gap:10px;grid-template-columns:minmax(0,1fr) 118px}
  .expense-inputs .field>label{color:#7b7167}
  .note-field textarea{background:#fffefa;text-align:center}
  .amount-field{background:#f1f7f3;border-radius:8px;padding:3px 8px 5px}
  .amount-field .amount-wrap input{background:#fff;border-color:#b7cdc2;font-weight:600;color:#195c4e}
  .amount-field .currency{color:var(--accent);font-weight:700}
  .modal[data-kind=editor] .field{margin-bottom:7px}
  .modal[data-kind=editor] .field>label{font-size:12px;font-weight:600;color:#7b7167}
  .modal[data-kind=editor] .expense-inputs .field{margin-bottom:0}
  .modal-head-side{display:flex;align-items:center;gap:4px;flex-shrink:0}
  .editor-total-badge{display:flex;align-items:baseline;gap:6px;background:var(--soft);border-radius:999px;padding:5px 13px;white-space:nowrap}
  .editor-total-badge span{font-size:11px;color:#716b63}
  .editor-total-badge strong{color:var(--accent);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
  .editor-foot .danger{background:var(--danger-soft);color:var(--danger)}
  .editor-foot .danger:hover:not(:disabled){background:#fbe1d9}
  .tip{background:#f1f5f1;color:#65756e}
  .add-column-form{background:#faf7f1;border-color:#cbbeb0}
  .preset-chips button{background:#fffdf9;border-color:#d5ccc0}
  .preset-chips button:hover{border-color:var(--accent);color:var(--accent);background:#eef6f1}
  .export-option{background:#fffefa;border-color:#ddd5cb}
  .export-option:hover{border-color:#b1c7ba;background:#f4f8f4}
  .option-icon{background:#e7f0eb;color:var(--accent)}
  .checkbox-field input{accent-color:var(--accent)}
  .print-expense-note+.print-expense-amount{border-top:1px dashed #cbbfb3;padding-top:4px}
}

@media screen and (max-width:900px){
  .app-header{box-shadow:none}
  .app-main{padding-top:6px}
  .page-heading{margin-bottom:4px}
  .title-line h1{font-weight:700}
  .records-panel{background:rgba(255,253,248,.72);border-color:#ded6cb}
  .panel-heading{border-bottom-color:#e0d9d0}
  .record-item{background:#fffdf9;border:1px solid #e0d8ce;border-radius:11px;padding:12px 13px;margin:8px 0}
  .record-item:last-child{border-bottom:1px solid #e0d8ce}
  .record-detail{color:#6d756f}
  .mobile-actionbar{box-shadow:0 -8px 22px rgba(55,62,56,.07)}
  .modal[data-kind=editor]{background:#f4efe7}
  .modal[data-kind=editor] .modal-head{background:#fffdf8}
  .modal[data-kind=editor] .modal-body{padding:8px 12px 12px;background:#fffdf8}
  .modal[data-kind=editor] .modal-foot{background:#fffdf8}
  .expense-field{padding:6px 0 0;margin-top:6px;border-radius:0;background:transparent}
  .expense-field:first-of-type{margin-top:0}
  .expense-heading{margin-bottom:3px}
  .expense-field h3{font-size:15px}
  .expense-inputs{grid-template-columns:minmax(0,1fr) 108px;gap:8px}
  .expense-inputs textarea{min-height:40px}
  .amount-field{padding:2px 8px 4px}
  .amount-field .field>label{font-size:11px}
  .editor-total-badge{padding:4px 10px;gap:5px}
  .editor-total-badge strong{font-size:15px}
}

@media screen and (max-width:520px){
  .editor-intro p{font-size:11px}
  .expense-heading{align-items:flex-start}
  .expense-badge{margin-top:1px}
}

@media screen and (max-width:350px){
  .expense-inputs{grid-template-columns:minmax(0,1fr) 98px}
  .expense-badge{display:none}
}

/* Stability pass: the editor keeps its own scroll area and its fields keep a predictable rhythm. */
@media screen and (min-width:901px){
  .records-panel{position:sticky;top:18px}
}

@media screen{
  .modal[data-kind=editor]{overscroll-behavior:contain}
  .modal[data-kind=editor] .modal-body{overscroll-behavior:contain}
  .modal[data-kind=editor] textarea{
    --editor-field-height:40px;
    height:40px;
    min-height:40px;
    max-height:40px;
    resize:none;
    overflow-y:auto;
    scrollbar-gutter:stable;
  }
  .modal[data-kind=editor] .expense-inputs textarea{--editor-field-height:38px;height:38px;min-height:38px;max-height:38px}
  .paper-canvas{overscroll-behavior:contain;scrollbar-gutter:stable both-edges}
}

@media screen and (max-width:900px){
  .modal[data-kind=editor] .modal-body{padding-bottom:12px}
  .modal[data-kind=editor] textarea{--editor-field-height:38px;height:38px;min-height:38px;max-height:38px}
  .modal[data-kind=editor] .expense-inputs textarea{--editor-field-height:36px;height:36px;min-height:36px;max-height:36px}
}

/* 单据存档 */
@media screen{
  .doc-current{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #d6e4dc;border-radius:11px;background:#edf5f0;color:#275c4e}
  .doc-current-mark{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:#d7e9df;color:var(--accent);flex-shrink:0}
  .doc-main{min-width:0;display:block}
  .doc-main strong{display:block;font-size:15px;font-weight:700;overflow-wrap:anywhere}
  .doc-main small{display:block;font-size:12px;color:#5c6f68;margin-top:2px}
  .doc-heading,.doc-form h3{font-size:14px;font-weight:700;color:#4a5b55;margin:20px 0 8px;display:flex;align-items:center;gap:8px}
  .doc-count{font-size:11px;font-weight:400;color:var(--muted);background:#f1f5f1;border-radius:999px;padding:2px 8px}
  .doc-list{display:grid;gap:8px}
  .doc-item{display:flex;align-items:center;gap:6px}
  .doc-open{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left;background:#fffefa;border:1px solid #ddd5cb;border-radius:10px;padding:11px 13px;transition:border-color 140ms ease,background 140ms ease}
  .doc-open:hover{border-color:#b1c7ba;background:#f4f8f4}
  .doc-delete{color:var(--danger);background:var(--danger-soft)}
  .doc-delete:hover{background:#fbe1d9}
  .doc-empty{font-size:13px;color:var(--muted);padding:14px 2px;line-height:1.7}
  .doc-form{margin-top:22px;border:1px dashed #cbbeb0;border-radius:11px;padding:16px;background:#faf7f1}
  .doc-form h3{margin:0 0 12px}
  .doc-form .field{margin-bottom:12px}
}
@media screen and (max-width:900px){
  .doc-open{padding:12px}
  .doc-main strong{font-size:16px}
  .doc-heading,.doc-form h3{margin:16px 0 8px}
  .doc-form{padding:12px}
}