:root {
      --accent: #22b814;
      --muted: #666;
      --paper: #fff;
  }

  html,
  body {
      height: 100%;
  }

  body {
      background: #f2f4f7;
      font-family: Arial, Helvetica, sans-serif;
      margin: 0;
      padding: 20px;
      color: #222;
      -webkit-font-smoothing: antialiased;
  }

  .container {
      max-width: 920px;
      margin: 0 auto;
  }

  .card {
      background: var(--paper);
      border-radius: 6px;
      padding: 20px;
      box-shadow: 0 6px 18px rgba(20, 30, 50, 0.08);
      margin-bottom: 18px;
  }

  /* Validation feedback */
  input:invalid,
  textarea:invalid,
  select:invalid {
      border-color: #d93025;
      background-color: #fff0f0;
  }

  .error-message {
      font-size: 12px;
      color: #d93025;
      margin-top: 3px;
      display: none;
  }

  .error-visible {
      display: block;
  }


  /* Header (shared) */
  .company {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 8px;
  }

  .company .left {
      max-width: 68%;
  }

  .company .company-name {
      color: var(--accent);
      font-weight: 700;
      font-size: 18px;
      margin-bottom: 6px;
  }

  .company .company-meta {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.35;
  }

  .card h1 {
      font-size: 20px;
      margin: 6px 0 8px 0;
      text-align: center;
      color: var(--accent);
  }

  /* Shared form styles */
  label {
      font-size: 13px;
      margin-bottom: 6px;
      color: #333;
      display: block;
  }

  input[type="text"],
  input[type="date"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid #cfd6de;
      border-radius: 4px;
      font-size: 14px;
      box-sizing: border-box;
  }

  textarea {
      min-height: 80px;
      resize: vertical;
  }

  .row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 8px;
  }

  .col {
      flex: 1 1 220px;
      min-width: 160px;
      display: flex;
      flex-direction: column;
  }

  .small {
      flex: 0 0 140px;
  }

  fieldset {
      border: 1px solid #e6eaef;
      padding: 12px;
      border-radius: 6px;
      margin-bottom: 12px;
  }

  legend {
      font-weight: 700;
      color: var(--accent);
      padding: 0 6px;
  }

  .note {
      font-size: 12px;
      color: var(--muted);
      margin-top: 6px;
  }

  /* Buttons */
  .controls {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 12px;
  }

  .btn {
      background: var(--accent);
      color: #fff;
      padding: 8px 12px;
      border-radius: 6px;
      border: none;
      font-weight: 700;
      cursor: pointer;
  }

  .btn.secondary {
      background: #6d876b;
  }

  .btn.ghost {
      background: transparent;
      color: var(--accent);
      border: 1px solid var(--accent);
  }

  /* Page switcher - each .form-page is visually the same "card" */
  .form-page {
      display: none;
  }

  .form-page.active {
      display: block;
  }

  /* Interview question layout */
  .q-block {
      border: 1px solid #eef2f6;
      border-radius: 6px;
      padding: 10px;
      margin-bottom: 10px;
      background: #fafbfc;
  }

  .q-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
  }

  .score-group {
      display: flex;
      gap: 8px;
      align-items: center;
  }

  .score-group label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      margin: 0;
  }

  /* Summary table at bottom */
  .summary {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 8px;
  }

  .summary .col {
      flex: 1 1 200px;
      min-width: 160px;
  }

  /* Employment table */
  .employment-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 0.9rem;
      margin-top: 8px;
  }

  .employment-table th,
  .employment-table td {
      padding: 6px;
      border: 1px solid #e6e6e6;
      vertical-align: middle;
  }

  .employment-table input {
      width: 100%;
      box-sizing: border-box;
      padding: 6px;
      border-radius: 4px;
      border: 1px solid #ccc;
  }

  /* Bank page layout */
  .bank-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
  }

  .full {
      grid-column: 1/-1;
  }

  /* Print: T0 ensure each form-page prints on its own sheet */
  @media print {
      body {
          background: #fff;
          padding: 0
      }

      .controls,
      .print-hide {
          display: none !important;
      }

      .form-page {
          display: block !important;
          page-break-after: always;
          padding: 10px;
      }

      .container {
          max-width: 100%;
          padding: 0;
      }

      .card {
          box-shadow: none;
          border-radius: 0;
          padding: 8px;
          margin: 0;
      }
  }


  .section-title {
      font-weight: 700;
      color: #0b5aa6;
      margin-bottom: 8px;
  }

  .tiny-note {
      font-size: 12px;
      color: #666;
      margin-top: 6px;
  }

  .radio-inline {
      display: flex;
      gap: 10px;
      align-items: center;
  }

  .add-row-btn {
      background: #e9f2fb;
      border: 1px dashed #cfe6fb;
      padding: 6px 8px;
      border-radius: 6px;
      color: var(--accent);
      cursor: pointer;
  }

  @media (max-width: 760px) {
  
  header.company {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }

  header.company .left,
  header.company .right {
    max-width: 100%;
    text-align: center;
  }

  .company-name {
    font-size: 18px;
    color: #0b5aa6;
    font-weight: 700;
  }

  .company-meta {
    font-size: 12px;
    color: #555;
    line-height: 1.5;
  }

  
  .page, .card {
    padding: 16px;
    border-radius: 8px;
  }

  .row {
    flex-direction: column;
    gap: 2px !important;
    margin-bottom: 3px !important;
  }

  .col {
    width: 100%;
    margin-bottom: 3px !important;
  }

  label {
    font-size: 14px;
    margin-bottom: 2px !important;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  select,
  textarea {
    width: 100%;
    padding: 5px 8px;
    font-size: 14px;
    margin-bottom: 3px !important;
  }

  fieldset {
    padding: 10px 12px;
    margin-bottom: 6px !important;
  }

  legend {
    font-size: 13px;
  }


  .employment-table,
  .employment-table thead,
  .employment-table tbody,
  .employment-table th,
  .employment-table td,
  .employment-table tr {
    display: block;
    width: 100%;
  }

  .employment-table thead {
    display: none;
  }

  .employment-table tr {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 6px;
    background: #fafafa;
  }

  .employment-table td {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
  }

  .employment-table td::before {
    content: attr(data-label);
    font-weight: 600;
    flex: 1;
    color: #0b5aa6;
  }

  .employment-table input {
    flex: 2;
    font-size: 13px;
  }


  .controls,
  .btn-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  button {
    width: 100%;
    padding: 10px;
    font-size: 15px;
    font-weight: 600;
  }

  h1 {
    font-size: 18px;
    text-align: center;
    margin-bottom: 10px;
  }

  .note, .tiny-note {
    text-align: center;
    font-size: 12px;
  }


  body {
    background: #f6f8fa;
  }
}