*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f0f2f5;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* ── Site header ── */

    .site-header {
      background: #fff;
      border-bottom: 1px solid #dfe2e6;
      padding: 0 32px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }

    .site-logo {
      font-size: 17px;
      font-weight: 700;
      color: #00c36b;
      letter-spacing: -0.3px;
      text-decoration: none;
    }

    .header-actions { display: flex; gap: 10px; }

    .hdr-btn {
      padding: 7px 16px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: background 0.2s, color 0.2s;
    }
    .hdr-btn-outline {
      background: transparent;
      border: 1.5px solid #d0d5dd;
      color: #444;
    }
    .hdr-btn-outline:hover { background: #f5f5f5; }
    .hdr-btn-thanks { background: #00c36b; color: #fff; }
    .hdr-btn-thanks:hover { background: #0d4029; }

    /* ── Content area (hero + main, gradient background) ────────────────── */
    .content-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: linear-gradient(135deg, #f2f4ef 0%, #ffffff 100%);
    }

    /* ── Hero section ────────────────────────────────────────────────────── */
    .hero {
      padding: 64px 24px 80px;
      text-align: center;
      flex-shrink: 0;
    }

    .hero-title {
      font-size: clamp(48px, 3.5vw, 36px);
      font-weight: 700;
      color: #0d4029;
      line-height: 1.2;
      letter-spacing: -0.5px;
      max-width: 920px;
      margin: 0 auto 16px;
    }

    .hero-title2 {
      font-size: clamp(18px, 3.5vw, 36px);
      font-weight: 400;
      color: #898d8b;
      line-height: 1.2;
      letter-spacing: -0.5px;
      max-width: 720px;
      margin: 0 auto 16px;
    }

    .hero-subtitle {
      font-size: clamp(13px, 2vw, 16px);
      color: #555;
      max-width: 520px;
      margin: 0 auto;
      line-height: 1.6;
    }

    /* ── Main content ────────────────────────────────────────────────────── */
    .site-main {
      flex: 1;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 0 24px 40px;
      margin-top: -40px;
    }


    .card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.10);
      padding: 32px 40px;
      width: 100%;
      max-width: 960px;
      display: flex;
      flex-direction: column;
    }

    /* ── Site footer ─────────────────────────────────────────────────────── */
    .site-footer {
      background: #fff;
      border-top: 1px solid #e5e7eb;
      padding: 0 32px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }

    .footer-copy { font-size: 12px; color: #999; }

    .footer-links { display: flex; gap: 20px; }
    .footer-links a {
      font-size: 12px;
      color: #888;
      text-decoration: none;
      transition: color 0.15s;
    }
    .footer-links a:hover { color: #00d16c; }

    /* ── Modals ──────────────────────────────────────────────────────────── */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.35);
      z-index: 100;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .modal-overlay.open { display: flex; }

    .modal {
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 8px 40px rgba(0,0,0,0.15);
      width: 100%;
      max-width: 600px;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px 16px;
      border-bottom: 1px solid #e5e7eb;
      flex-shrink: 0;
    }
    .modal-head h2 { font-size: 16px; font-weight: 700; color: #111; }

    .modal-close {
      background: none;
      border: none;
      font-size: 20px;
      color: #999;
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 6px;
      line-height: 1;
    }
    .modal-close:hover { background: #f0f0f0; color: #333; }

    .modal-body {
      padding: 20px 24px 24px;
      overflow-y: auto;
      font-size: 13px;
      color: #444;
      line-height: 1.7;
    }
    .modal-body h3 {
      font-size: 13px;
      font-weight: 700;
      color: #222;
      margin: 16px 0 4px;
    }
    .modal-body h3:first-child { margin-top: 0; }
    .modal-body p { margin-bottom: 10px; }

    .disclaimer {
      font-size: 11px;
      color: #bbb;
      margin-bottom: 24px;
    }

    .drop-zone {
      border: 2px dashed #d0d5dd;
      border-radius: 12px;
      padding: 40px 24px;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
      background: #fafafa;
    }

    .drop-zone:hover, .drop-zone.drag-over {
      border-color: #00c36b;
      background: #f0fdf6;
    }

    .drop-zone svg {
      width: 40px;
      height: 40px;
      color: #aaa;
      margin-bottom: 12px;
    }

    .drop-zone p {
      font-size: 14px;
      color: #555;
      margin-bottom: 4px;
    }

    .drop-zone span {
      font-size: 12px;
      color: #aaa;
    }

    #file-input {
      display: none;
    }

    .btn {
      display: inline-block;
      margin-top: 12px;
      padding: 8px 20px;
      background: #00c36b;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
    }

    .btn:hover { background: #0d4029; }

    .btn:disabled {
      background: #ccc;
      cursor: not-allowed;
    }

    #status {
      margin-top: 24px;
      font-size: 14px;
      color: #555;
      min-height: 20px;
    }

    #status.error { color: #d32f2f; }
    #status.success { color: #2e7d32; }

    #preview {
      margin-top: 20px;
      display: none;
      flex-direction: column;
      flex: 1;
      min-height: 0;
    }

    #preview h2 {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin-bottom: 10px;
      flex-shrink: 0;
    }

    .table-wrap {
      overflow-x: auto;
      overflow-y: auto;
      max-height: 420px;
      border-radius: 8px;
      border: 1px solid #e5e7eb;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      table-layout: fixed;
    }

    /* Column widths add up to 100% */
    col.col-date    { width: 12%; }
    col.col-desc    { width: 32%; }
    col.col-type    { width: 12%; }
    col.col-amt     { width: 11%; }
    col.col-net     { width: 15%; }
    col.col-settle  { width: 18%; }

    th {
      background: #f8f9fa;
      padding: 8px 10px;
      text-align: left;
      font-weight: 600;
      color: #444;
      border-bottom: 1px solid #e5e7eb;
      white-space: nowrap;
      position: sticky;
      top: 0;
      z-index: 1;
    }

    td {
      padding: 7px 10px;
      color: #333;
      border-bottom: 1px solid #f0f0f0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    tr:last-child td { border-bottom: none; }

    tr:nth-child(even) td { background: #fafafa; }

    .amount-neg { color: #d32f2f; }
    .amount-pos { color: #2e7d32; }

    #download-btn {
      margin-top: 12px;
      width: 100%;
      padding: 10px;
      font-size: 14px;
      flex-shrink: 0;
    }

    .note {
      margin-top: 14px;
      font-size: 11px;
      color: #aaa;
      text-align: center;
      line-height: 1.6;
      flex-shrink: 0;
    }