:root{--card-w:clamp(320px,88vw,460px);--gap:clamp(16px,4vw,32px);--accent:#800020}
.tpchs-options{max-width:1000px;margin:40px auto;padding:16px}
.tpchs-options h2{margin:0 0 16px}
.tpchs-accordion details{border:1px solid #e5e7eb;border-radius:12px;padding:8px 12px;margin:8px 0;background:#fff}
.tpchs-accordion summary{cursor:pointer;font-weight:600}
.tpchs-accordion .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end;margin-top:10px}
.tpchs-accordion label{display:flex;flex-direction:column;gap:6px;font-size:14px}
.tpchs-accordion select{padding:8px 10px;border:1px solid #cbd5e1;border-radius:10px}
.btn{padding:10px 16px;border-radius:10px;border:1px solid #e5e7eb;background:#F5F5F5;color:#111827;text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(0.98)}
.tpchs-report-shell{max-width:1100px;margin:20px auto;padding:12px}
.tpchs-report-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.tpchs-logout-wrap{margin-top:16px;text-align:right}

/* Table styling */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #e5e7eb;padding:8px 10px;text-align:left}
.table thead th{background:#f8fafc}
.print-only{display:none}
@media print{.tpchs-report-actions,.tpchs-logout-wrap{display:none}.print-only{display:block}}

/* Student Mark Sheet (iv) layout */
.tpchs-options .tpchs-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 16px;
}

@media (min-width: 640px) {
  .tpchs-options .tpchs-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  .tpchs-options .tpchs-field-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.tpchs-options .tpchs-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.tpchs-options .tpchs-field select {
  width: 100%;
  padding: .5rem .6rem;
  line-height: 1.2;
}

.tpchs-options .tpchs-actions {
  grid-column: 1 / -1;                /* span all columns */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}