:root {
        --bg: #f8f9fa;
        --card: #fff;
        --head: #1a1a2e;
        --tx: #212529;
        --tx2: #6c757d;
        --c1: #4c72b0;
        --gap: 16px;
        --r: 8px;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html,
      body {
        max-width: 100%;
        overflow-x: hidden;
      }
      body {
        font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        background: var(--bg);
        color: var(--tx);
        line-height: 1.5;
        font-size: 14px;
      }
      .wrap {
        max-width: 1400px;
        margin: 0 auto;
        padding: var(--gap);
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }
      #main-content {
        flex: 1;
      }
      .load-error {
        margin: 16px;
        padding: 12px;
        border: 1px solid #c92a2a;
        border-radius: 6px;
        background: #fff;
        color: #c92a2a;
      }
      body.basic .dtl {
        display: none;
      }
      body.basic .f.show {
        display: none;
      }
      body.calc #dash,
      body.calc .f.show {
        display: none;
      }
      body:not(.calc) #calc {
        display: none;
      }
      body.detailed #dash {
        display: block;
      }
      body.detailed #dash > .portfolio {
        display: none;
      }
      h2.sec.nonum {
        counter-increment: none;
      }
      h2.sec.nonum::before {
        content: none;
      }
      body {
        counter-reset: sec;
      }
      h2.sec {
        counter-increment: sec;
      }
      h2.sec::before {
        content: counter(sec) ". ";
      }
      h2.sec {
        font-size: 15px;
        font-weight: 700;
        margin: 22px 0 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid #dee2e6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #343a40;
      }
      .card {
        background: var(--card);
        border-radius: var(--r);
        padding: 18px 22px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        overflow-x: auto;
        min-width: 0;
      }
      .card h3 {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 12px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
      }
      th {
        text-align: right;
        padding: 9px 10px;
        border-bottom: 2px solid #dee2e6;
        color: var(--tx2);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        white-space: nowrap;
      }
      th:first-child,
      td:first-child {
        text-align: left;
      }
      td {
        padding: 8px 10px;
        border-bottom: 1px solid #f0f0f0;
        text-align: right;
        white-space: nowrap;
      }
      tr.total td {
        font-weight: 700;
        background: #e7f0ff;
        border-top: 2px solid var(--c1);
      }
      tr.next td {
        background: #fff8e1;
        font-weight: 600;
      }
      tr.paid td {
        color: #8a949b;
        background: #f4faf6;
        text-decoration: line-through;
        text-decoration-color: #8a949b;
      }
      tr.paid td:first-child {
        box-shadow: inset 3px 0 0 #2e9e5b;
      }
      tr.sub td {
        background: #f1f3f5;
        font-weight: 700;
        color: #343a40;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        text-align: left;
        border-top: 2px solid #adb5bd;
      }
      details {
        margin-top: 14px;
      }
      summary {
        cursor: pointer;
        font-weight: 600;
        font-size: 13px;
        color: #2a5db0;
      }
      @media (max-width: 768px){
        h2.sec {
          font-size: 13px;
          line-height: 1.3;
          overflow-wrap: anywhere;
        }
        .wrap {
          padding: 10px;
        }
        .card {
          padding: 14px;
        }
      }

      @media print{
        body {
          background: #fff;
        }
        .card,
        .kpi {
          box-shadow: none;
          border: 1px solid #dee2e6;
        }
      }