:root {
  --dbp-bg: #f4f6f8;
  --dbp-panel: #ffffff;
  --dbp-text: #18202a;
  --dbp-muted: #667085;
  --dbp-primary: #163b66;
  --dbp-primary2: #0d6efd;
  --dbp-border: #d9e1ea;
  --dbp-danger: #b42318;
  --dbp-warning: #b54708;
  --dbp-success: #027a48;
  --dbp-shadow: 0 12px 35px rgba(15, 23, 42, .08);
  --dbp-radius: 18px;
}

#digital-passport-app,
#digital-passport-app * {
  box-sizing: border-box;
}

#digital-passport-app {
  background: var(--dbp-bg);
  color: var(--dbp-text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.45;
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
}

#digital-passport-app .dbp-header {
  background: linear-gradient(135deg, #102a43, #164b7a);
  color: #fff;
  padding: 28px 22px;
}

#digital-passport-app .dbp-header-wrap {
  max-width: 1320px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
  align-items: center;
}

#digital-passport-app h1 {
  margin: 0 0 10px;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.12;
  color: #fff;
}

#digital-passport-app h2 {
  margin: 0 0 18px;
  font-size: 26px;
  color: var(--dbp-primary);
}

#digital-passport-app h3 {
  margin: 22px 0 12px;
  font-size: 19px;
  color: #102a43;
}

#digital-passport-app .dbp-subtitle {
  color: #d7e8ff;
  font-size: 17px;
  max-width: 800px;
}

#digital-passport-app .dbp-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

#digital-passport-app .dbp-badge-row span {
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 13px;
  color: #fff;
}

#digital-passport-app .dbp-header-card {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--dbp-radius);
  padding: 18px;
  color: #fff;
}

#digital-passport-app .dbp-layout {
  max-width: 1320px;
  margin: 24px auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 22px;
}

#digital-passport-app .dbp-sidebar {
  position: sticky;
  top: 16px;
  align-self: start;
  background: var(--dbp-panel);
  border-radius: var(--dbp-radius);
  box-shadow: var(--dbp-shadow);
  border: 1px solid var(--dbp-border);
  overflow: hidden;
}

#digital-passport-app .dbp-side-title {
  padding: 18px;
  border-bottom: 1px solid var(--dbp-border);
  font-weight: 700;
  color: var(--dbp-primary);
}

#digital-passport-app .dbp-steps {
  max-height: 75vh;
  overflow: auto;
}

#digital-passport-app .dbp-step-btn {
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid #edf1f5;
  background: #fff;
  color: #27364a;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}

#digital-passport-app .dbp-step-btn:hover,
#digital-passport-app .dbp-step-btn.active {
  background: #eef6ff;
  color: #0b4f8a;
  font-weight: 700;
}

#digital-passport-app .dbp-step-index {
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8eef5;
  font-size: 12px;
}

#digital-passport-app .dbp-step-btn.active .dbp-step-index {
  background: var(--dbp-primary2);
  color: #fff;
}

#digital-passport-app .dbp-page {
  display: none;
  background: var(--dbp-panel);
  border: 1px solid var(--dbp-border);
  box-shadow: var(--dbp-shadow);
  border-radius: var(--dbp-radius);
  padding: 24px;
  margin-bottom: 20px;
}

#digital-passport-app .dbp-page.active {
  display: block;
}

#digital-passport-app .dbp-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

#digital-passport-app .dbp-col-12 { grid-column: span 12; }
#digital-passport-app .dbp-col-8 { grid-column: span 8; }
#digital-passport-app .dbp-col-6 { grid-column: span 6; }
#digital-passport-app .dbp-col-4 { grid-column: span 4; }
#digital-passport-app .dbp-col-3 { grid-column: span 3; }
#digital-passport-app .dbp-col-2 { grid-column: span 2; }

#digital-passport-app label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  color: #344054;
}

#digital-passport-app input,
#digital-passport-app select,
#digital-passport-app textarea {
  width: 100%;
  border: 1px solid var(--dbp-border);
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  background: #fff;
  color: var(--dbp-text);
}

#digital-passport-app textarea {
  min-height: 96px;
  resize: vertical;
}

#digital-passport-app .dbp-section-note {
  background: #f8fbff;
  border: 1px solid #d8eaff;
  color: #24435f;
  padding: 14px;
  border-radius: 14px;
  margin-bottom: 18px;
}

#digital-passport-app .dbp-inspection-card {
  border: 1px solid var(--dbp-border);
  border-radius: 16px;
  padding: 16px;
  margin: 14px 0;
  background: #fff;
}

#digital-passport-app .dbp-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

#digital-passport-app .dbp-card-head strong {
  color: var(--dbp-primary);
}

#digital-passport-app .dbp-risk {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #eef4ff;
  color: #164b7a;
  white-space: nowrap;
}

#digital-passport-app .dbp-repair-box {
  border-left: 5px solid var(--dbp-primary2);
  background: #f7fbff;
  padding: 14px;
  border-radius: 12px;
  margin-top: 12px;
}

#digital-passport-app .dbp-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 0;
  flex-wrap: wrap;
}

#digital-passport-app button.dbp-action {
  border: 0;
  padding: 12px 17px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: var(--dbp-primary2);
}

#digital-passport-app button.dbp-secondary { background: #475467; }
#digital-passport-app button.dbp-success { background: var(--dbp-success); }
#digital-passport-app button.dbp-warning { background: var(--dbp-warning); }
#digital-passport-app button.dbp-danger { background: var(--dbp-danger); }

#digital-passport-app .dbp-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

#digital-passport-app .dbp-metric {
  background: #f9fafb;
  border: 1px solid var(--dbp-border);
  border-radius: 14px;
  padding: 14px;
}

#digital-passport-app .dbp-metric small {
  color: var(--dbp-muted);
  display: block;
}

#digital-passport-app .dbp-metric b {
  font-size: 24px;
  color: var(--dbp-primary);
}

#digital-passport-app .dbp-legal-block {
  border: 1px dashed #98a2b3;
  border-radius: 14px;
  padding: 16px;
  background: #fcfcfd;
}

#digital-passport-app .dbp-required::after {
  content: " *";
  color: var(--dbp-danger);
}

#digital-passport-app .dbp-footer-note {
  max-width: 1320px;
  margin: 24px auto 40px;
  padding: 0 16px 24px;
  color: var(--dbp-muted);
  font-size: 13px;
}

@media (max-width: 960px) {
  #digital-passport-app .dbp-header-wrap,
  #digital-passport-app .dbp-layout {
    grid-template-columns: 1fr;
  }

  #digital-passport-app .dbp-sidebar {
    position: relative;
    top: 0;
  }

  #digital-passport-app .dbp-summary {
    grid-template-columns: 1fr 1fr;
  }

  #digital-passport-app .dbp-col-8,
  #digital-passport-app .dbp-col-6,
  #digital-passport-app .dbp-col-4,
  #digital-passport-app .dbp-col-3,
  #digital-passport-app .dbp-col-2 {
    grid-column: span 12;
  }
}

@media print {
  #digital-passport-app .dbp-sidebar,
  #digital-passport-app .dbp-toolbar,
  #digital-passport-app button {
    display: none !important;
  }

  #digital-passport-app {
    background: #fff;
  }

  #digital-passport-app .dbp-layout {
    display: block;
    margin: 0;
    padding: 0;
  }

  #digital-passport-app .dbp-page {
    display: block !important;
    box-shadow: none;
    border: 1px solid #ccc;
    page-break-after: always;
  }

  #digital-passport-app .dbp-header {
    background: #fff;
    color: #000;
  }

  #digital-passport-app h1,
  #digital-passport-app .dbp-subtitle,
  #digital-passport-app .dbp-badge-row span,
  #digital-passport-app .dbp-header-card {
    color: #000;
    border-color: #ccc;
  }
}