:root {
  --bg: #f4f7fb;
  --card: #ffffff;
  --text: #102033;
  --muted: #5b6b80;
  --border: #d8e0ea;
  --accent: #0b66c3;
  --accent-dark: #084f97;

  --success-bg: #ecfdf3;
  --success-border: #9ae6b4;
  --success-text: #155724;

  --error-bg: #fff5f5;
  --error-border: #feb2b2;
  --error-text: #7b1c1c;

  --warn-bg: #fffaf0;
  --warn-border: #fbd38d;
  --warn-text: #744210;

  --report-blue: #0b3f6f;
  --report-row: #f2f2f2;
  --report-border: #d9d9d9;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  background: radial-gradient(circle at top, #ffffff 0%, var(--bg) 45%, #e9eef6 100%);
  color: var(--text);
}

.page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.card {
  width: 100%;
  max-width: 560px;
  background: var(--card);
  border: 1px solid rgba(16, 32, 51, 0.08);
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 24px 70px rgba(16, 32, 51, 0.14);
  transition: max-width 0.18s ease;
}

.card-report {
  max-width: 1120px;
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 26px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  background: var(--accent);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
}

h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: 0.2px;
}

.subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.lookup-form {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
}

.lookup-form label {
  display: block;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0.3px;
}

.input-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  justify-content: center;
}

input {
  width: 172px;
  flex: 0 0 172px;
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 13px 14px;
  font-size: 16px;
  outline: none;
  text-transform: uppercase;
  color: var(--text);
  background: #ffffff;
  letter-spacing: 0.4px;
  font-weight: 700;
}

input::placeholder {
  color: #7b8492;
  opacity: 0.75;
  letter-spacing: 0;
  font-weight: 700;
}

input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(11, 102, 195, 0.12);
}

button {
  border: 0;
  border-radius: 13px;
  padding: 13px 22px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  min-width: 108px;
}

button:hover {
  background: var(--accent-dark);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.help-text {
  color: var(--muted);
  font-size: 13px;
  margin: 10px 0 0;
  line-height: 1.45;
  text-align: left;
}

.result {
  margin-top: 24px;
  border-radius: 16px;
  padding: 18px;
  border: 1px solid var(--border);
}

.result.hidden {
  display: none;
}

.result.success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

.result.error {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}

.result.warn {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-text);
}

.result-report {
  background: #ffffff;
  border-color: #d7dce3;
  color: #000000;
}

.result-title {
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 6px;
}

.result-detail {
  margin: 0;
  line-height: 1.45;
}

.cache-note {
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.78;
}

/* WINDA report layout */

.winda-report {
  width: 100%;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
}

.report-title {
  text-align: center;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin: 4px 0 12px;
}

.report-meta {
  text-align: center;
  margin-bottom: 10px;
}

.report-meta-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.15;
}

.report-name-label {
  margin-top: 8px;
}

.report-meta-value {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
}

.report-valid-line {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  margin: 8px 0 0;
}

/* Training records table styled like the attached PDF */

.table-wrap {
  margin-top: 0;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: #ffffff;
}

.records-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 930px;
  font-size: 12px;
  color: #000000;
  table-layout: fixed;
}

.records-table th {
  background: var(--report-blue);
  color: #ffffff;
  text-align: left;
  padding: 7px 10px;
  font-weight: 700;
  line-height: 1.1;
  border-right: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid var(--report-blue);
  vertical-align: middle;
}

.records-table th:last-child {
  border-right: 0;
}

.records-table td {
  padding: 7px 10px;
  border-top: 1px solid var(--report-border);
  border-right: 1px solid var(--report-border);
  vertical-align: top;
  background: #ffffff;
  line-height: 1.2;
  word-wrap: break-word;
}

.records-table td:last-child {
  border-right: 0;
}

.records-table tbody tr:nth-child(even) td {
  background: var(--report-row);
}

.records-table th:nth-child(1),
.records-table td:nth-child(1) {
  width: 17%;
}

.records-table th:nth-child(2),
.records-table td:nth-child(2) {
  width: 8%;
}

.records-table th:nth-child(3),
.records-table td:nth-child(3) {
  width: 34%;
}

.records-table th:nth-child(4),
.records-table td:nth-child(4) {
  width: 10%;
}

.records-table th:nth-child(5),
.records-table td:nth-child(5) {
  width: 10%;
}

.records-table th:nth-child(6),
.records-table td:nth-child(6) {
  width: 10%;
}

.records-table th:nth-child(7),
.records-table td:nth-child(7) {
  width: 11%;
}

.report-footer {
  margin-top: 12px;
  font-size: 12px;
  color: #333333;
  line-height: 1.35;
}

/* Small screens */

@media (max-width: 720px) {
  .page {
    align-items: flex-start;
    padding: 20px 12px;
  }

  .card,
  .card-report {
    max-width: 100%;
    padding: 22px;
    border-radius: 20px;
  }

  .brand-row {
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 22px;
  }

  .brand-mark {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    font-size: 24px;
    border-radius: 14px;
  }

  h1 {
    font-size: 25px;
  }

  .subtitle {
    font-size: 14px;
  }

  .lookup-form {
    max-width: 100%;
  }

  .input-row {
    flex-direction: column;
  }

  input {
    width: 100%;
    flex-basis: auto;
  }

  button {
    width: 100%;
  }

  .result {
    padding: 15px;
  }

  .report-title {
    font-size: 18px;
  }

  .records-table {
    min-width: 900px;
    font-size: 11px;
  }

  .records-table th,
  .records-table td {
    padding: 6px 8px;
  }
}

@media (max-width: 420px) {
  .card {
    padding: 18px;
  }

  .brand-row {
    flex-direction: row;
  }

  h1 {
    font-size: 23px;
  }

  input {
    font-size: 16px;
    padding: 13px 14px;
  }

  button {
    padding: 13px 18px;
  }
}