:root {
  --bg: #f5f8fd;
  --card: #ffffff;
  --card2: #f5f8fd;
  --text: #091c38;
  --muted: #647c98;
  --line: #dce5f1;
  --green: #14b8a6;
  --green2: #0e947f;
  --red: #dc5864;
  --red2: #bd3d4c;
  --yellow: #1767ea;
  --blue: #1767ea;
  --shadow: 0 16px 42px rgba(15, 39, 72, .07);
}

body {
  background:
    radial-gradient(circle at 12% 7%, rgba(23, 103, 234, .06), transparent 29rem),
    linear-gradient(180deg, #fbfdff 0, #f5f8fd 33rem) !important;
  color: #091c38;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}

.tool-site-header {
  height: 88px;
  padding: 0 max(calc((100% - 1680px) / 2), 32px);
  display: flex;
  align-items: center;
  gap: clamp(36px, 4vw, 68px);
  border-bottom: 1px solid #dce5f1;
  background: rgba(255, 255, 255, .95);
}

.tool-site-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #091c38;
  text-decoration: none;
}

.tool-site-mark {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(140deg, #1767ea, #078ecb);
}

.tool-site-mark svg {
  width: 31px;
  height: 31px;
  fill: rgba(255, 255, 255, .12);
  stroke: #fff;
  stroke-width: 2.1;
  stroke-linejoin: round;
}

.tool-site-mark .check {
  fill: none;
  stroke-width: 2.7;
  stroke-linecap: round;
}

.tool-site-brand strong {
  display: block;
  color: #091c38;
  font-size: 24px;
  font-weight: 750;
  line-height: 21px;
  letter-spacing: -.045em;
}

.tool-site-brand small {
  color: #7187a3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .29em;
}

.tool-site-brand {
  min-width: 198px;
  height: 64px;
  gap: 0;
  flex: 0 0 auto;
}

.tool-site-brand::before {
  content: "";
  width: 198px;
  height: 58px;
  display: block;
  background: url("assets/onlykyc-logo-horizontal.png") left center / contain no-repeat;
}

.tool-site-brand > .tool-site-mark,
.tool-site-brand > span {
  display: none !important;
}

.language-switcher {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 5px 7px 5px 12px;
  border: 1px solid #d7e3f2;
  border-radius: 999px;
  color: #36506f;
  background: rgba(255, 255, 255, .88);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.language-switcher select {
  min-height: 31px;
  max-width: 138px;
  border: 0;
  border-radius: 999px;
  color: #082a5d;
  background: #edf5ff;
  font: inherit;
  font-size: 12px;
  outline: none;
  padding: 0 8px;
}

.tool-site-nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.5vw, 42px);
  color: #495f7a;
  font-size: 14px;
  font-weight: 600;
}

.tool-site-nav a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.tool-site-nav a:not(.current):hover {
  color: #1767ea;
}

.tool-site-nav .current {
  padding: 11px 16px;
  border: 1px solid #1767ea;
  border-radius: 22px;
  color: #1767ea;
  background: #eaf2ff;
  font-size: 12px;
  letter-spacing: .04em;
}

.tool-back-link {
  margin-left: auto;
  padding: 13px 21px;
  border: 1px solid #d1ddeb;
  border-radius: 11px;
  color: #34516f;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.page {
  width: min(1680px, calc(100% - 64px)) !important;
  padding: 28px 0 48px !important;
}

.brand-header.topbar {
  min-height: 84px;
  margin-bottom: 20px;
  padding: 18px 25px !important;
  border: 1px solid #dce5f1 !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: var(--shadow) !important;
}

.brand-header .dog-logo {
  display: none !important;
}

.brand-header h1 {
  color: #091c38 !important;
  background: none !important;
  filter: none !important;
  text-shadow: none !important;
  font: 750 32px/1.1 Inter, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: -.045em !important;
}

.brand-header h1 span {
  color: #1767ea !important;
}

.brand-header .pill,
.date-only-chip {
  border-color: #d6e2f1 !important;
  color: #4f6783 !important;
  background: #f6f9fd !important;
}

.brand-header .pill.ok {
  border-color: #bceadd !important;
  color: #077d68 !important;
  background: #e9f9f4 !important;
}

.layout {
  grid-template-columns: 404px 1fr !important;
  gap: 20px !important;
}

.card {
  border: 1px solid #dce5f1 !important;
  border-radius: 20px !important;
  color: #091c38 !important;
  background: #fff !important;
  box-shadow: var(--shadow) !important;
}

.card-head {
  border-color: #e2eaf4 !important;
  background: #fff !important;
}

.card-head h2,
.checks h3,
.barcode-strip h4,
.scan-guide h4 {
  color: #102746 !important;
}

.card-head p,
.scan-guide p,
.scan-guide li,
.guide-status,
.barcode-value {
  color: #607895 !important;
}

.step-badge {
  border-color: #c8dafa !important;
  color: #1767ea !important;
  background: #eaf2ff !important;
}

.drop {
  border-color: #bed2ed !important;
  color: #385573 !important;
  background: #f6f9fe !important;
}

.drop-icon {
  color: #1767ea !important;
  background: #e5efff !important;
}

.primary,
label.primary,
.upload-btn {
  border: 1px solid #1767ea !important;
  color: #fff !important;
  background: #1767ea !important;
  box-shadow: none !important;
}

.primary:hover,
label.primary:hover,
.upload-btn:hover {
  background: #1052c7 !important;
}

.darkbtn {
  border: 1px solid #d1ddeb !important;
  color: #31506f !important;
  background: #eef4fc !important;
}

.clear {
  border: 1px solid #f0c8cd !important;
  color: #b3404d !important;
  background: #fff4f5 !important;
}

.checks,
.scan-guide,
.barcode-strip,
.license,
.identity-summary,
.mini,
.table-card,
.risk-panel,
.document-number-card,
.date-box,
.batch-section {
  border-color: #dce5f1 !important;
  color: #091c38 !important;
  background: #fff !important;
}

#statusBoard.status {
  border: 1px solid #d6e4f7 !important;
  color: #091c38 !important;
  background: linear-gradient(135deg, #edf4ff, #f8fbff) !important;
  box-shadow: none !important;
}

#statusBoard.status::before,
#statusBoard.status::after,
.status-orb::before,
.status-orb::after {
  opacity: .16 !important;
}

#statusBoard.status.valid {
  border-color: #bfe9de !important;
  background: #ecfaf6 !important;
}

#statusBoard.status.invalid,
#statusBoard.status.nonreal {
  border-color: #f0ccd1 !important;
  background: #fff5f6 !important;
}

#statusBoard.status h2,
#statusTitle {
  color: #102746 !important;
}

.status-kicker {
  color: #1767ea !important;
}

#statusIcon.status-icon {
  border-color: #bfd4f8 !important;
  color: #1767ea !important;
  background: #fff !important;
}

.status-chip {
  border-color: #d6e2f2 !important;
  color: #49627e !important;
  background: #fff !important;
}

.status-chip-icon {
  color: #1767ea !important;
  background: #e8f1ff !important;
}

.customer-stat,
.stat {
  border-color: #dce5f1 !important;
  color: #102746 !important;
  background: #f8faff !important;
}

.badge.unreadable,
.badge.neutral,
.risk-pill.waiting {
  border-color: #d8e3f1 !important;
  color: #556d88 !important;
  background: #f5f8fd !important;
}

table,
thead,
tbody,
td,
th {
  border-color: #e2eaf4 !important;
  color: #31506e !important;
}

thead,
th {
  color: #536c89 !important;
  background: #f5f8fd !important;
}

/* Repair text contrast retained from the original dark checker interface. */
#statusBoard.status p,
#statusBoard .status-copy p,
#statusSubtitle,
.status-note,
.status-hint {
  color: #516b88 !important;
}

#statusBoard .status-chip,
#statusBoard .status-chip b,
#statusBoard .status-chip strong,
#statusBoard .status-chip small,
#statusBoard .status-chip span {
  color: #264664 !important;
}

#statusBoard .status-chip-icon {
  color: #1767ea !important;
}

.customer-stat span,
.document-number-card span,
.date-box span,
.stat span,
.license p,
.license small,
.mini p,
.barcode-strip p,
.batch-section p,
.rev,
#licenseRev {
  color: #647e9b !important;
}

.customer-stat strong,
.document-number-card strong,
.date-box strong,
.stat strong,
.summary-value,
.license h3,
.license h4,
.mini h3,
.barcode-strip h3,
.batch-section h3,
.risk-head strong,
.risk-score {
  color: #102746 !important;
}

.summary-value.muted,
.empty-state,
.no-data {
  color: #7188a4 !important;
}

.badge.valid,
.risk-pill.low,
.risk-pill.pass {
  color: #087d67 !important;
  background: #e8f8f3 !important;
  border-color: #a9e7d7 !important;
}

.badge.invalid,
.risk-pill.high,
.risk-pill.fail {
  color: #b43b4b !important;
  background: #fff1f3 !important;
  border-color: #f1bcc4 !important;
}

.badge.unreadable,
.badge.neutral,
.risk-pill.waiting,
.risk-pill.unknown {
  color: #4f6986 !important;
  background: #eef4fc !important;
  border-color: #d1deef !important;
}

.risk-reasons,
.risk-reasons li,
.risk-panel p,
.risk-panel small {
  color: #526b87 !important;
}

.guide-status,
.crop-status {
  color: #315b86 !important;
  background: #edf4ff !important;
  border-color: #c6daf8 !important;
}

.guide-status.pass,
.crop-status.pass {
  color: #087d67 !important;
  background: #e8f8f3 !important;
  border-color: #a9e7d7 !important;
}

.guide-status.warn,
.crop-status.warn {
  color: #8e6010 !important;
  background: #fff8e8 !important;
  border-color: #f0d69a !important;
}

.guide-status.fail,
.crop-status.fail {
  color: #b43b4b !important;
  background: #fff1f3 !important;
  border-color: #f1bcc4 !important;
}

.field-id {
  color: #1767ea !important;
}

.field-name,
.field-label {
  color: #536d89 !important;
}

.field-value,
.field-value strong {
  color: #142e4c !important;
}

#barcodeCountBadge,
#licenseRev,
.rev {
  color: #566f8b !important;
  background: #eef4fc !important;
  border-color: #d7e3f1 !important;
}

table th,
.decoded-table th {
  color: #556f8b !important;
}

table td,
.decoded-table td {
  color: #173150 !important;
}

@media (max-width: 1120px) {
  .tool-site-header {
    padding: 0 20px;
    gap: 22px;
  }

  .page {
    width: calc(100% - 40px) !important;
  }

  .tool-site-nav a:not(.current) {
    display: none;
  }

  .layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .tool-site-header {
    height: 74px;
  }

  .tool-site-brand {
    min-width: 136px;
    height: 46px;
  }

  .tool-site-brand::before {
    width: 136px;
    height: 44px;
  }

  .tool-site-nav,
  .tool-back-link {
    display: none;
  }

  .page {
    width: calc(100% - 28px) !important;
  }

  .brand-header.topbar {
    display: block !important;
  }

  .brand-header .pills {
    margin-top: 16px;
    justify-content: start !important;
  }
}