/* 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}
  .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)}
  .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-toast{margin:12px 16px 0;padding:10px 12px;border-radius:9px;background:var(--ink);color:#fff;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
  .update-notice{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:16px;padding:12px 16px;border:1px solid #bfd4c8;border-radius:10px;background:var(--soft);font-size:14px;line-height:1.5}
  .app-version{display:inline-block;margin-left:6px;color:var(--muted);font-size:11px}

  .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-inputs{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .expense-inputs .field{min-width:0;gap:6px}
  .expense-inputs .field>label{color:#7b7167}
  .note-field textarea{text-align:left}
  .amount-field{background:transparent;padding:0}
  .amount-field .amount-wrap input{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}
  .editor-foot .danger{width:auto;min-width:72px;gap:4px;flex-shrink:0}
  /* 编辑器：合计与真实保存状态同一行，操作按钮另起一行；金额错误就在对应输入框下方。 */
  .modal-foot.editor-foot{display:block;padding-top:12px}
  .editor-status{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .editor-total-badge{flex-wrap:wrap}
  .editor-total-badge em{font-style:normal;font-size:11px;color:#8a6414}
  .editor-save-status{font-size:12px;line-height:1.5;color:var(--muted)}
  .editor-save-status[data-tone=warn]{color:#8a6414}
  .editor-save-status[data-tone=error]{color:var(--danger)}
  .editor-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
  .editor-delete-confirm{margin-bottom:12px;padding:12px;border:1px solid #edc8bd;border-radius:10px;background:var(--danger-soft);font-size:14px;line-height:1.5}
  .delete-confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}
  .delete-confirm-actions .button{min-height:44px}
  .note-expand{align-self:flex-start;min-height:0;padding:0;font-size:12px;line-height:1.5}
  .amount-field .field-error{margin-top:5px;font-size:12px;line-height:1.45}
  .amount-field input[aria-invalid=true]{border-color:var(--danger);background:#fdf3ef}
  .modal[data-kind=editor] .amount-field .amount-wrap input[aria-invalid=true]:focus{border-color:var(--danger);outline-color:var(--danger)}
  .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{gap:12px}
  .editor-total-badge{padding:4px 10px;gap:5px}
  .editor-total-badge strong{font-size:15px}
}

@media screen and (max-width:520px){
  .expense-heading{align-items:flex-start}
}

/* 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] .modal-body{max-width:630px;margin-inline:auto}
  .modal[data-kind=editor] .field input{
    --editor-field-height:48px;
    height:var(--editor-field-height);
    min-height:var(--editor-field-height);
    max-height:var(--editor-field-height);
    padding:11px 12px;
    font-size:16px;
    line-height:24px;
    caret-color:var(--accent);
  }
  /* 说明框默认一行（48px），高度由 autoGrowTextarea() 按内容设置。 */
  .modal[data-kind=editor] .field textarea{
    --editor-field-height:48px;
    min-height:var(--editor-field-height);
    padding:11px 12px;
    font-size:16px;
    line-height:24px;
    caret-color:var(--accent);
  }
  .modal[data-kind=editor] .field input::placeholder,
  .modal[data-kind=editor] .field textarea::placeholder{color:var(--muted);opacity:1}
  .modal[data-kind=editor] .field input:focus,
  .modal[data-kind=editor] .field textarea:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px;box-shadow:none}
  .modal[data-kind=editor] textarea{
    resize:none;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-gutter:auto;
  }
  .modal[data-kind=editor] .amount-wrap .currency{left:14px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none}
  .modal[data-kind=editor] .amount-wrap input{appearance:textfield;padding-left:36px;text-align:right}
  .modal[data-kind=editor] input[type=number]::-webkit-inner-spin-button,
  .modal[data-kind=editor] input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
  .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}
}

/* Print preview stays readable on screen while the popup keeps the physical print size. */
@media screen{
  .print-sheet{font-size:calc(var(--sheet-font-size,13pt) * .82)}
  .print-sheet-content{width:100%}
}

/* 单据存档 */
@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}
}

/* 添加到手机桌面：iOS 图文引导。 */
@media screen{
  .install-guide{font-size:15px;line-height:1.7;color:#4a5b55}
  .install-guide ol{margin:12px 0;padding-left:20px}
  .install-guide li{margin:6px 0}
  .install-guide strong{color:var(--accent)}
  .install-guide-note{margin-top:14px;padding:11px 13px;border-radius:10px;background:var(--soft);color:#3d5b52;font-size:13.5px;line-height:1.65}
}

/* 弹窗入场：轻微上浮淡入，避免生硬地弹出。 */
@media screen and (prefers-reduced-motion: no-preference){
  .modal{opacity:0;transform:translateY(16px);transition:opacity 200ms ease,transform 300ms cubic-bezier(.22,.75,.3,1)}
  .modal[open]{opacity:1;transform:none}
  @starting-style{.modal[open]{opacity:0;transform:translateY(16px)}}
  .modal::backdrop{opacity:0;transition:opacity 200ms ease}
  .modal[open]::backdrop{opacity:1}
  @starting-style{.modal[open]::backdrop{opacity:0}}
}

/* 触摸设备没有悬停，改用按下反馈。 */
@media screen and (hover:none){
  .button:hover:not(:disabled){transform:none}
  .button:active:not(:disabled){transform:scale(.97)}
  .icon-button:active{background:#ebe5dc;color:var(--ink)}
  .record-item:active{background:#f2ece2;border-color:#b9c9bf}
  .export-option:active{background:#f4f8f4;border-color:#b1c7ba}
  .doc-open:active{background:#f4f8f4;border-color:#b1c7ba}
  .preset-chips button:active{border-color:var(--accent);color:var(--accent);background:#eef6f1}
  .text-link:active,.mobile-tabs button:active{opacity:.72}
}

/* 金额一律使用等宽数字，纵向排列更整齐。 */
@media screen{
  .record-sum,.record-summary strong,.doc-main small,.compact-total strong{font-variant-numeric:tabular-nums}
}

/* 空状态：一句提示，让第一屏不显得空荡。 */
@media screen{
  .empty-state .empty-hint{max-width:24em;margin:10px auto 0;font-size:14px;line-height:1.75;color:var(--muted)}
}


/* 手机端预览：纸张缩放后画布只保留实际尺寸，避免出现可滚动的空白区。 */
@media screen and (max-width:900px){
  .paper-canvas.is-fitted{overflow:hidden;scrollbar-gutter:auto}
}
@media print{
  .paper-canvas.is-fitted{overflow:visible}
  .paper-preview{width:auto!important;min-width:0!important;transform:none!important;margin:0!important}
}

/* Author credit stays secondary to the ledger and remains discoverable on mobile. */
@media screen{
  .app-footer{gap:12px 24px;flex-wrap:wrap}
  .author-credit{display:inline-flex;align-items:baseline;gap:8px;font-size:12px;line-height:1.6;color:var(--muted)}
  .author-credit strong{font-size:13px;font-weight:500;letter-spacing:.015em;color:var(--accent)}
  .menu-author{display:flex;justify-content:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
}
@media screen and (max-width:900px){
  .app-footer{justify-content:center;margin-top:20px;padding:4px 0}
  .footer-tagline{display:none}
}