:root {
  --blue: #0b69b4;
  --blue-deep: #084d85;
  --orange: #ef6723;
  --green: #15803d;
  --green-bg: #ecfdf3;
  --amber: #b45309;
  --amber-bg: #fff7ed;
  --red: #b42318;
  --red-bg: #fff1f2;
  --ink: #1f2937;
  --muted: #667085;
  --line: #dce5ed;
  --surface: #ffffff;
  --bg: #f5f8fb;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
}
.shell { max-width: 980px; margin: 42px auto; padding: 0 20px 36px; }
.compact-shell { max-width: 720px; }
.brandbar {
  display: flex; justify-content: space-between; gap: 24px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--blue);
  border-radius: 16px; padding: 24px 28px; box-shadow: 0 10px 28px rgba(20, 45, 70, .07);
}
.brandbar h1 { margin: 3px 0 4px; color: var(--blue-deep); font-size: clamp(26px, 5vw, 38px); }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .11em; color: var(--orange); }
.subtitle, .muted { color: var(--muted); }
.subtitle { margin: 0; font-weight: 600; }
.brand-left { display: flex; gap: 18px; align-items: center; min-width: 0; }
.imars-logo { width: 132px; height: auto; flex: 0 0 auto; }
.lebsolution-logo { width: 120px; height: auto; flex: 0 0 auto; }
.state-card, .panel {
  margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 28px; box-shadow: 0 10px 28px rgba(20, 45, 70, .05);
}
.state-card { display: flex; gap: 18px; align-items: center; }
.state-card h2, .panel h2 { margin: 0 0 5px; }
.state-card p { margin: 0; color: var(--muted); }
.state-icon {
  width: 50px; height: 50px; flex: 0 0 50px; border-radius: 50%; display: grid; place-items: center;
  font-size: 26px; font-weight: 900; background: #eef5fb; color: var(--blue);
}
.state-card.valid { border-color: #b7e4c7; background: var(--green-bg); }
.state-card.valid .state-icon { background: #d1fadf; color: var(--green); }
.state-card.warning { border-color: #fed7aa; background: var(--amber-bg); }
.state-card.warning .state-icon { background: #ffedd5; color: var(--amber); }
.state-card.invalid { border-color: #fecdd3; background: var(--red-bg); }
.state-card.invalid .state-icon { background: #ffe4e6; color: var(--red); }
.panel-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.badge { border-radius: 999px; padding: 7px 11px; font-size: 12px; font-weight: 800; background: #eef2f6; }
.badge.active { background: #dcfce7; color: var(--green); }
.badge.suspended, .badge.expired { background: #ffedd5; color: var(--amber); }
.badge.revoked { background: #ffe4e6; color: var(--red); }
.data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 20px 0 0; }
.data-grid div { padding: 13px 15px; border-bottom: 1px solid var(--line); }
.data-grid div:nth-child(odd) { border-right: 1px solid var(--line); }
.data-grid div:nth-last-child(-n+2) { border-bottom: 0; }
dt { color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 3px; }
dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.compare-note { margin-top: 18px; padding: 14px 16px; border-left: 4px solid var(--blue); background: #f6faff; color: #344054; }
.file-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
button { border: 0; background: var(--blue); color: white; border-radius: 9px; padding: 10px 16px; font-weight: 800; cursor: pointer; }
button:hover { background: var(--blue-deep); }
.document-result { margin-top: 14px; padding: 13px 15px; border-radius: 10px; font-weight: 700; }
.document-result.match { background: var(--green-bg); color: var(--green); }
.document-result.mismatch { background: var(--red-bg); color: var(--red); }
.document-result.warning { background: var(--amber-bg); color: var(--amber); }
.hidden { display: none !important; }
footer { padding: 22px 4px; display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 12px; }
@media (max-width: 700px) {
  .shell { margin: 18px auto; }
  .brandbar, .panel, .state-card { border-radius: 12px; padding: 20px; }
  .brand-left { align-items: flex-start; }
  .imars-logo { width: 100px; }
  .lebsolution-logo { width: 84px; }
  .data-grid { grid-template-columns: 1fr; }
  .data-grid div:nth-child(odd) { border-right: 0; }
  .data-grid div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .data-grid div:last-child { border-bottom: 0; }
  footer { flex-direction: column; }
}