:root {
      --bg: linear-gradient(180deg, #f4efe4 0%, #f9f7f1 100%);
      --panel: rgba(255,255,255,0.92);
      --ink: #1f2a21;
      --muted: #5f6f63;
      --line: #d7ddcf;
      --accent: #245f45;
      --accent-soft: #e4f1e9;
      --danger: #a33a2a;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "Noto Sans SC", "PingFang SC", sans-serif;
      background: var(--bg);
      color: var(--ink);
      min-height: 100vh;
    }
    .shell {
      max-width: 820px;
      margin: 0 auto;
      padding: 24px 16px 48px;
    }
    .toolbar {
      padding: 14px 16px;
      border-radius: 18px;
      background: var(--panel);
      border: 1px solid rgba(36, 95, 69, 0.12);
      box-shadow: 0 10px 22px rgba(41, 55, 42, 0.08);
    }
    .toolbar-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }
    .toolbar-title { margin: 0; font-size: 18px; font-weight: 700; }
    .toolbar-slogan { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
    .hero-action {
      display: flex;
      gap: 8px;
      margin-left: auto;
    }
    .section {
      margin-top: 18px;
      padding: 20px;
      border-radius: 24px;
      background: var(--panel);
      border: 1px solid rgba(31, 42, 33, 0.08);
      box-shadow: 0 12px 28px rgba(31, 42, 33, 0.05);
    }
    label { display: block; font-weight: 700; margin-bottom: 10px; }
    input, textarea, select {
      width: 100%;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--ink);
      font: inherit;
    }
    textarea { min-height: 180px; resize: vertical; }
    .row { display: grid; gap: 14px; }
    .hint, .meta, .status { color: var(--muted); font-size: 14px; line-height: 1.6; }
    .files { display: grid; gap: 10px; margin-top: 12px; }
    .file-item {
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: #fbfcfa;
      font-size: 14px;
    }
    .file-thumb {
      width: 64px;
      height: 64px;
      border-radius: 10px;
      object-fit: cover;
      border: 1px solid #d9e2d6;
      background: #f0f4ee;
      margin-right: 10px;
      flex: 0 0 auto;
      cursor: zoom-in;
    }
    .file-item-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
    .file-item-name {
      min-width: 0;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
    }
    .file-item-remove {
      flex: 0 0 auto;
      border: 1px solid #d8e0d2;
      background: #fff;
      color: #526454;
      border-radius: 10px;
      padding: 4px 10px;
      font-size: 12px;
      cursor: pointer;
    }
    .file-item-remove:hover { background: #f2f6ef; }
    .history-card {
      cursor: pointer;
      padding: 14px 14px 12px;
      border-radius: 16px;
      background: #ffffff;
      border: 1px solid #e2e8dc;
      box-shadow: 0 4px 12px rgba(31,42,33,.04);
      transition: border-color .2s, box-shadow .2s, transform .15s;
    }
    .history-card:active { transform: translateY(1px); }
    .history-card:hover { border-color: #c8d7c8; box-shadow: 0 8px 18px rgba(31,42,33,.07); }
    .history-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 12px; }
    .history-filters label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--muted);
      padding: 6px 10px;
      border: 1px solid #d5ded1;
      border-radius: 999px;
      background: #fff;
    }
    .history-pager { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
    .history-pager button { padding: 8px 12px; border-radius: 10px; font-size: 13px; }
    .history-pager button:disabled { opacity: .45; cursor: default; }
    .history-filters input { width: auto; margin: 0; }
    .history-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }
    .history-title {
      width: 100%;
      color: #1e2c22;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.35;
      word-break: break-word;
    }
    .history-meta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      width: 100%;
      margin-top: 4px;
    }
    .history-type {
      color: #4a5e51;
      font-size: 13px;
      font-weight: 600;
    }
    .history-snippet {
      margin-top: 8px;
      color: #4f6155;
      line-height: 1.45;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-word;
    }
    .history-time { margin-top: 8px; font-size: 12px; color: #6f8175; }
    .detail-attachments { margin-top: 8px; display: grid; gap: 8px; }
    .detail-image-item img {
      width: 112px;
      height: 112px;
      object-fit: cover;
      border-radius: 10px;
      border: 1px solid var(--line);
      cursor: zoom-in;
      background: #f3f7f1;
    }
    .detail-file-item a { color: var(--accent); text-decoration: none; }
    .badge {
      display: inline-flex;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
    }
    .badge-new { background: #eef1f4; color: #4a5966; }
    .badge-triaged { background: #fff2df; color: #9a640f; }
    .badge-closed { background: #e5f4ea; color: #27663c; }
    .check-row { display: flex; align-items: center; gap: 10px; }
    .check-row input { width: auto; }
    .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
    button {
      border: 0;
      border-radius: 16px;
      padding: 13px 18px;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
    }
    .primary { background: var(--accent); color: #fff; }
    .secondary { background: #edf2eb; color: var(--ink); }
    .danger { color: var(--danger); }
    .success-banner {
      margin-top: 14px;
      padding: 14px 16px;
      border-radius: 16px;
      background: #eaf5ed;
      color: #21563e;
      display: none;
    }
    .error-banner {
      margin-top: 14px;
      padding: 14px 16px;
      border-radius: 16px;
      background: #fdeceb;
      color: var(--danger);
      display: none;
    }
    .img-modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.82);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }
    .img-modal.show { display: flex; }
    .img-modal-content {
      max-width: 92vw;
      max-height: 86vh;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
    }
    .img-modal-close, .img-modal-nav {
      position: absolute;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      padding: 0;
      color: #fff;
      background: rgba(0,0,0,.38);
      border-radius: 999px;
      width: 42px;
      height: 42px;
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
      text-align: center;
    }
    .img-modal-close { top: 22px; right: 22px; }
    .img-modal-nav.prev { left: 20px; top: 50%; transform: translateY(-50%); }
    .img-modal-nav.next { right: 20px; top: 50%; transform: translateY(-50%); }
    @media (min-width: 720px) {
      .row.two { grid-template-columns: 1fr 1fr; }
      .history-filters label { font-size: 14px; }
    }
    @media (max-width: 480px) {
      .file-item-row { align-items: flex-start; }
      .file-item-name {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }