:root {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 14px;
    }

    body {
      margin: 0;
      padding: 16px;
      background: #f0f2f8;
      color: #222;
    }

    h1 {
      margin-top: 0;
      font-size: 20px;
    }

    .app-container {
      max-width: 1400px;
      margin: 0 auto;
      background: #ffffff;
      padding: 16px 20px 24px;
      border-radius: 12px;
      box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
    }

    .author-tag {
      font-size: 11px;
      color: #666;
      margin-top: -4px;
      margin-bottom: 8px;
    }

    .section-title {
      font-weight: 600;
      margin-top: 16px;
      margin-bottom: 4px;
    }

    .control-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 16px;
      align-items: center;
    }

    .control-group label {
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    input[type="number"],
    input[type="text"],
    select {
      padding: 4px 6px;
      font-size: 13px;
      border-radius: 6px;
      border: 1px solid #c0c4d0;
      min-width: 70px;
      background: #ffffff;
    }

    input[type="number"]:focus,
    input[type="text"]:focus,
    select:focus {
      outline: none;
      border-color: #0065a4;
      box-shadow: 0 0 0 1px rgba(0, 101, 164, 0.15);
    }

    input[type="number"]:disabled {
      background: #f0f0f0;
      color: #666;
    }

    button {
      padding: 6px 12px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      font-size: 13px;
      background: linear-gradient(135deg, #0065a4, #0095d9);
      color: #fff;
      box-shadow: 0 4px 10px rgba(0, 101, 164, 0.25);
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    button.secondary {
      background: #e0e3ee;
      color: #222;
      box-shadow: none;
    }

    button:hover {
      filter: brightness(1.05);
      transform: translateY(-0.5px);
    }

    button:active {
      transform: translateY(0);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    }

    button:disabled {
      cursor: not-allowed;
      opacity: 0.5;
      box-shadow: none;
    }

    .table-wrapper {
      margin-top: 16px;
      overflow-x: auto;
      border-radius: 10px;
      border: 1px solid #d3d8ea;
      background: #fafbff;
    }

    table {
      border-collapse: separate;
      border-spacing: 0;
      min-width: 1200px;
      width: 100%;
      table-layout: fixed;
      font-size: 12px;
    }

    th,
    td {
      border: 1px solid #d7dbea;
      text-align: center;
      vertical-align: middle;
    }

    thead th {
      background: linear-gradient(135deg, #e4f0ff, #f3f7ff);
      font-weight: 600;
      position: sticky;
      top: 0;
      z-index: 1;
      white-space: nowrap;
      padding: 6px 4px;
    }

    thead th:first-child {
      border-top-left-radius: 10px;
    }

    thead th:last-child {
      border-top-right-radius: 10px;
    }

    /* Row-label (first column) narrowed to just fit labels */
    tbody th.row-label,
    thead th.row-label {
      text-align: left;
      background: #f5f6fc;
      font-weight: 600;
      font-size: 11px;
      white-space: normal;
      width: 140px;
      max-width: 150px;
      padding: 6px 8px;
      word-wrap: break-word;
      overflow-wrap: break-word;
      box-sizing: border-box;
    }

    tbody tr:last-child th.row-label {
      border-bottom-left-radius: 10px;
    }

    tbody tr:last-child td:last-child {
      border-bottom-right-radius: 10px;
    }

    td {
      padding: 0;
    }

    /* Make first data row (CS CRNA/AA) slightly taller */
    tbody tr:first-child th.row-label,
    tbody tr:first-child td {
      padding-top: 8px;
      padding-bottom: 8px;
    }

    .cell-input {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      border-radius: 0;
      border: none;
      padding: 4px 2px;
      font-size: 12px;
      text-align: center;
      background: transparent;
    }

    .cell-input:focus {
      outline: none;
      background: #eef6ff;
      box-shadow: inset 0 0 0 1px #0065a4;
    }

    .cell-input:disabled {
      background: #f4f5f9;
      color: #777;
      box-shadow: none;
    }

    .cell-value {
      font-size: 12px;
      word-wrap: break-word;
      padding: 4px 2px;
      display: block;
    }

    .crna-needed-cell {
      font-weight: 700;
      font-size: 13px;
    }

    .weekday-header {
      background: linear-gradient(135deg, #e4f0ff, #f3f7ff);
    }

    .weekend-header {
      background: #f3f3f3;
      color: #888;
    }

    .weekend-cell {
      background: #f5f5f5;
      color: #999;
    }

    .diff-negative {
      color: #b00020;
      font-weight: 700;
    }

    .diff-zero {
      color: #000000;
      font-weight: 600;
    }

    .diff-positive {
      color: #0f7b0f;
      font-weight: 700;
    }

    .solo-high {
      color: #b00020;
      font-weight: 700;
    }

    .info-text {
      font-size: 12px;
      color: #555;
      margin-top: 4px;
    }

    .top-summary {
      margin-top: 12px;
      font-size: 12px;
      color: #333;
      padding: 8px 10px;
      border-radius: 8px;
      background: #f3f7ff;
      border: 1px solid #d2ddff;
    }

    .top-summary span {
      font-weight: 600;
    }

    .hidden {
      display: none;
    }

    .file-input {
      display: none;
    }

    .footer-tag {
      margin-top: 16px;
      font-size: 11px;
      color: #888;
      text-align: right;
    }
  
    /* === v2.8 table UX polish (UI only) === */
    table { background: #ffffff; }
    tbody tr:nth-child(even) td { background: #fbfcff; }
    tbody tr:nth-child(even) th.row-label { background: #f3f5ff; }

    /* Sticky first column for easier reading during horizontal scroll */
    thead th.row-label {
      position: sticky;
      left: 0;
      z-index: 4;
      background: linear-gradient(135deg, #e4f0ff, #f3f7ff);
    }
    tbody th.row-label {
      position: sticky;
      left: 0;
      z-index: 3;
      box-shadow: 1px 0 0 #d7dbea;
    }

    /* Column widths via <colgroup> */
    col.weekday-col { width: 44px; }
    col.weekend-col { width: 22px; } /* narrower weekends */
    col.row-col { width: 140px; }

    /* Weekend headers/cells even narrower visual padding */
    thead th.weekend-header { padding: 4px 2px; font-size: 11px; }
    td.weekend-cell { font-size: 11px; }

    /* Input ergonomics */
    .cell-input {
      padding: 6px 2px;
      font-size: 13px;
      line-height: 1.1;
    }
    .cell-value { font-size: 13px; }

    /* Active column/row highlighting for data entry */
    .col-active { background: #eef6ff !important; }
    .row-active th.row-label, .row-active td { background: #f2f6ff !important; }

    /* Subtle hover to aid scanning */
    tbody tr:hover td { background: #f7faff; }
    tbody tr:hover th.row-label { background: #eef2ff; }

    /* Differentiate computed rows slightly */
    tr.is-computed td { background: #f9fafc; }
    tr.is-computed .cell-value { color: #1f2937; }
    /* Allow status colors to override computed-row default */
    tr.is-computed .cell-value.diff-negative { color: #b00020 !important; font-weight: 700; }
    tr.is-computed .cell-value.diff-zero { color: #000000 !important; font-weight: 600; }
    tr.is-computed .cell-value.diff-positive { color: #0f7b0f !important; font-weight: 700; }
    tr.is-computed .cell-value.solo-high { color: #b00020 !important; font-weight: 700; }