  <style>
    :root {
      /* Primary color palette */
      --g1: #095791;
      --g2: #0a6aad;
      --g3: #0080cc;
      --g4: #00a2e4;
      
      /* Accent colors */
      --accent: #f5a623;
      --accent2: #e8855a;
      
      /* Neutral colors */
      --light: #f0f7ff;
      --lighter: #f8fbff;
      --text: #05182a;
      --mid: #2a4a6a;
      --muted: #5a82a6;
      --white: #ffffff;
      
      /* Borders & shadows */
      --border: rgba(9, 87, 145, 0.12);
      --sh: 0 8px 40px rgba(9, 87, 145, 0.12);
      --shl: 0 20px 80px rgba(9, 87, 145, 0.18);
      
      /* Border radius */
      --r: 14px;
      --rl: 22px;
      
      /* Font stack */
      --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      
      /* Background & surface colors */
      --color-background-primary: var(--white);
      --color-background-secondary: var(--lighter);
      --color-background-tertiary: var(--light);
      --color-text-primary: var(--text);
      --color-text-secondary: var(--mid);
      --color-text-tertiary: var(--muted);
      --color-text-danger: #e8855a;
      --color-border-primary: var(--g1);
      --color-border-secondary: var(--border);
      --color-border-tertiary: var(--border);
      --color-border-danger: var(--accent2);
      --color-background-danger: rgba(232, 133, 90, 0.08);
      --border-radius-md: 8px;
      --border-radius-lg: var(--r);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .wrap {
      max-width: 860px !important;
      margin: 0 auto;
    }

    .card {
      background: var(--color-background-primary);
      border: 0.5px solid var(--color-border-secondary);
      border-radius: var(--border-radius-lg);
      overflow: hidden;
      box-shadow: var(--sh);
    }

    .hdr {
      background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%);
      padding: 1.4rem 2rem;
      color: var(--white);
    }

    .hdr h1 {
      font-size: 18px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .hdr p {
      font-size: 13px;
      opacity: 0.9;
      margin-top: 4px;
    }

    .stepper {
      display: flex;
      align-items: center;
      padding: 1rem 2rem;
      border-bottom: 0.5px solid var(--color-border-secondary);
      gap: 0;
      background: var(--color-background-secondary);
    }

    .step-item {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
    }

    .step-circle {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 500;
      border: 1.5px solid var(--color-border-secondary);
      color: var(--color-text-secondary);
      flex-shrink: 0;
      transition: 0.2s;
      background: var(--white);
    }

    .step-circle.active {
      background: var(--g1);
      border-color: var(--g1);
      color: var(--white);
      box-shadow: 0 4px 12px rgba(9, 87, 145, 0.25);
    }

    .step-circle.done {
      background: #1e8a4c;
      border-color: #1e8a4c;
      color: var(--white);
    }

    .step-label {
      font-size: 13px;
      color: var(--color-text-secondary);
      font-weight: 400;
    }

    .step-label.active {
      color: var(--g1);
      font-weight: 600;
    }

    .step-divider {
      flex: 1;
      height: 1.5px;
      background: var(--color-border-secondary);
      margin: 0 8px;
    }

    .body {
      padding: 1.8rem 2rem;
    }

    .sec-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--g1);
      border-left: 3px solid var(--accent);
      padding-left: 10px;
      margin-bottom: 1.2rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem 1.5rem;
      margin-bottom: 1.5rem;
    }

    .full {
      grid-column: span 2;
    }

/* ---------- FIELD FIX ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* LABEL FIX */
.field label {
  font-size: 14px; /* reduce */
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* REQUIRED STAR */
.req {
  color: #e8855a;
  font-size: 13px;
}

/* INPUT / SELECT / TEXTAREA FIX */
.field input,
.field select,
.field textarea {
  font-size: 14px;                 /* reduce */
  padding: 12px 14px;              /* increase */
  border: 1px solid #7a7a7a54;
  border-radius: 8px;
  background: var(--white);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  transition: all 0.2s ease;
  outline: none;
  width: 100%;
  min-height: 44px;                /* consistent height */
}

/* SELECT ARROW ALIGN FIX */
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg fill='%23095791' viewBox='0 0 20 20'%3E%3Cpath d='M5 7l5 5 5-5H5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

/* FOCUS EFFECT */
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--g1);
  box-shadow: 0 0 0 3px rgba(9, 87, 145, 0.15);
}

/* TEXTAREA */
.field textarea {
  resize: vertical;
  min-height: 100px;
}

/* ERROR STATE */
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #e8855a;
  background: rgba(232, 133, 90, 0.08);
}

/* ERROR TEXT */
.err {
  font-size: 12px;
  color: #fdaa13;
}
.hidden-err {
  display: none !important;
}

    .footer {
      padding: 1.2rem 2rem;
      border-top: 0.5px solid var(--color-border-secondary);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--color-background-secondary);
    }

    .btn {
      padding: 8px 20px;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: 0.5px solid var(--color-border-secondary);
      background: var(--color-background-primary);
      color: var(--color-text-primary);
      font-family: var(--font-sans);
      transition: 0.15s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .btn:hover {
      background: var(--color-background-secondary);
      border-color: var(--color-border-secondary);
    }

    .btn-primary {
      background: var(--g1);
      color: var(--white);
      border-color: var(--g1);
      box-shadow: 0 4px 12px rgba(9, 87, 145, 0.25);
    }

    .btn-primary:hover {
      background: var(--g2);
      border-color: var(--g2);
      box-shadow: 0 6px 16px rgba(9, 87, 145, 0.3);
    }

    .btn-success {
      background: #1e8a4c;
      color: var(--white);
      border-color: #1e8a4c;
      box-shadow: 0 4px 12px rgba(30, 138, 76, 0.25);
    }

    .btn-success:hover {
      background: #166b3a;
      border-color: #166b3a;
      box-shadow: 0 6px 16px rgba(30, 138, 76, 0.3);
    }

    .note {
      font-size: 11px;
      color: var(--color-text-tertiary);
    }

    .upload-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .up-card {
      border: 1.5px solid var(--color-border-secondary);
      border-radius: var(--border-radius-lg);
      padding: 1rem;
      background: var(--color-background-secondary);
      transition: 0.15s;
    }

    .up-card:hover {
      border-color: var(--g3);
      background: var(--lighter);
      box-shadow: 0 2px 8px rgba(9, 87, 145, 0.1);
    }

    .up-card-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-text-primary);
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .up-hint {
      font-size: 11px;
      color: var(--color-text-tertiary);
      margin-bottom: 10px;
    }

    .up-card input[type="file"] {
      font-size: 12px;
      padding: 6px 8px;
      border: 1px dashed var(--g3);
      border-radius: var(--border-radius-md);
      background: var(--white);
      width: 100%;
      cursor: pointer;
      color: var(--color-text-secondary);
    }

    .up-card input[type="file"]:hover {
      border-color: var(--g1);
      background: var(--lighter);
    }

    .file-warn {
      font-size: 11px;
      color: #e8855a;
      margin-top: 5px;
      display: none;
    }

    .review-grid {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
    }

    .rev-card {
      border: 0.5px solid var(--color-border-secondary);
      border-radius: var(--border-radius-lg);
      padding: 0.9rem 1.1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: var(--color-background-secondary);
      transition: 0.15s;
    }

    .rev-card:hover {
      border-color: var(--g3);
      box-shadow: 0 2px 8px var(--sh);
    }

    .rev-info {
      flex: 1;
    }

    .rev-doc-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-text-primary);
    }

    .rev-hint {
      font-size: 11px;
      color: var(--color-text-tertiary);
      margin-top: 2px;
    }

    .badge {
      padding: 4px 10px;
      border-radius: 50px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .badge-ok {
      background: #e0f2e9;
      color: #1e6f3f;
    }

    .badge-miss {
      background: #fff0ec;
      color: #c74f2b;
    }

    .summary-box {
      background: var(--color-background-secondary);
      border: 1px solid var(--color-border-secondary);
      border-radius: var(--border-radius-lg);
      padding: 1rem 1.2rem;
      margin-bottom: 1.5rem;
      box-shadow: 0 2px 8px var(--border);
    }

    .summary-box h3 {
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 0.6rem;
      color: var(--g1);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .summary-row {
      display: flex;
      gap: 8px;
      font-size: 12px;
      padding: 3px 0;
      border-bottom: 0.5px solid var(--color-border-secondary);
    }

    .summary-row:last-child {
      border: none;
    }

    .summary-key {
      color: var(--color-text-secondary);
      min-width: 130px;
      flex-shrink: 0;
      font-weight: 500;
    }

    .summary-val {
      color: var(--color-text-primary);
      font-weight: 600;
    }

    .page {
      display: none;
    }

    .page.active {
      display: block;
    }

    .icon {
      font-size: 16px;
    }

    /* ── SUCCESS OVERLAY ── */
    .success-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0);
      pointer-events: none;
      transition: background 0.4s ease;
    }

    .success-overlay.show {
      background: rgba(0, 0, 0, 0.45);
      pointer-events: all;
    }

    .success-modal {
      background-color: azure;
      border-radius: var(--border-radius-lg);
      border: 0.5px solid var(--color-border-secondary);
      padding: 2.5rem 2rem;
      max-width: 420px;
      width: 90%;
      text-align: center;
      transform: scale(0.7) translateY(40px);
      opacity: 0;
      transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
      box-shadow: var(--shl);
    }

    .success-overlay.show .success-modal {
      transform: scale(1) translateY(0);
      opacity: 1;
    }

    .success-icon-wrap {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: #e0f2e9;
      margin: 0 auto 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .success-icon-wrap svg {
      width: 36px;
      height: 36px;
    }

    .checkmark-circle {
      stroke-dasharray: 166;
      stroke-dashoffset: 166;
      animation: none;
    }

    .checkmark-check {
      stroke-dasharray: 48;
      stroke-dashoffset: 48;
      animation: none;
    }

    .success-overlay.show .checkmark-circle {
      animation: drawCircle 0.6s 0.1s ease forwards;
    }

    .success-overlay.show .checkmark-check {
      animation: drawCheck 0.4s 0.65s ease forwards;
    }

    @keyframes drawCircle {
      to {
        stroke-dashoffset: 0;
      }
    }

    @keyframes drawCheck {
      to {
        stroke-dashoffset: 0;
      }
    }

    .success-title {
      font-size: 20px;
      font-weight: 600;
      color: var(--color-text-primary);
      margin-bottom: 0.5rem;
    }

    .success-sub {
      font-size: 13px;
      color: var(--color-text-secondary);
      line-height: 1.6;
      margin-bottom: 1.5rem;
    }

    .success-ref {
      display: inline-block;
      background: var(--light);
      border: 0.5px solid var(--color-border-secondary);
      border-radius: var(--border-radius-md);
      padding: 6px 16px;
      font-size: 12px;
      color: var(--color-text-secondary);
      margin-bottom: 1.5rem;
      letter-spacing: 0.5px;
    }

    .success-ref span {
      font-weight: 600;
      color: var(--g1);
    }

    .confetti-ring {
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 3px solid transparent;
      animation: none;
    }

    .success-overlay.show .confetti-ring {
      animation: ringPop 0.5s 0.2s ease forwards;
    }

    @keyframes ringPop {
      0% {
        border-color: #1e8a4c;
        transform: scale(1);
      }
      60% {
        border-color: #1e8a4c;
        transform: scale(1.25);
      }
      100% {
        border-color: transparent;
        transform: scale(1.4);
      }
    }

    .pulse-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 1.2rem;
    }

    .pulse-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #1e8a4c;
      opacity: 0;
      animation: none;
    }

    .success-overlay.show .pulse-dot:nth-child(1) {
      animation: popDot 0.4s 0.9s ease forwards;
    }

    .success-overlay.show .pulse-dot:nth-child(2) {
      animation: popDot 0.4s 1s ease forwards;
    }

    .success-overlay.show .pulse-dot:nth-child(3) {
      animation: popDot 0.4s 1.1s ease forwards;
    }

    @keyframes popDot {
      0% {
        opacity: 0;
        transform: scale(0);
      }
      60% {
        opacity: 1;
        transform: scale(1.3);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    .btn-close-success {
      background: #1e8a4c;
      color: var(--white);
      border-color: #1e8a4c;
      padding: 10px 32px;
      border-radius: 50px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      font-family: var(--font-sans);
      transition: 0.15s;
      box-shadow: 0 4px 12px rgba(30, 138, 76, 0.25);
    }

    .btn-close-success:hover {
      background: #166b3a;
      box-shadow: 0 6px 16px rgba(30, 138, 76, 0.3);
    }

    /* Info box styling */
    .info-box {
      background: rgba(245, 166, 35, 0.08);
      border-radius: var(--border-radius-md);
      padding: 0.75rem 1rem;
      font-size: 12px;
      color: #8a6e2e;
      border-left: 3px solid var(--accent);
      margin-top: 1.5rem;
    }

    @media (max-width: 600px) {
      .grid {
        grid-template-columns: 1fr;
      }
      .full {
        grid-column: span 1;
      }
      .upload-grid {
        grid-template-columns: 1fr;
      }
      .body {
        padding: 1.2rem;
      }
      .footer {
        padding: 1rem;
        flex-direction: column;
        gap: 0.6rem;
      }
      .hdr {
        padding: 1rem 1.2rem;
      }
      .hdr h1 {
        font-size: 16px;
      }
    }
  </style>
