:root {
    --rpl-navy: #003368;
    --rpl-navy-2: #1E3F61;
    --rpl-bg: #f4f9fd;
}
body { background-color: var(--rpl-bg); color: #2b2b2b; }
.rpl-navbar { background-color: var(--rpl-navy); }
.demo-banner { background: #ffe8a3; color: #6b5300; border-bottom: 1px solid #f0d472; }

h1, h2, h3, h4, h5 { color: var(--rpl-navy-2); }
h1 { font-size: 1.7rem; }
.card { border: none; box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.card-header { background: #fff; border-bottom: 2px solid var(--rpl-navy-2); font-weight: 600; color: var(--rpl-navy-2); }

.btn-rpl { background-color: var(--rpl-navy); color: #fff; }
.btn-rpl:hover { background-color: var(--rpl-navy-2); color: #fff; }

.section-intro { background: #eaf3fb; border-left: 4px solid var(--rpl-navy-2); padding: 1rem 1.25rem; border-radius: 4px; }
.kit-note { background: #fff8e6; border-left: 4px solid #e0a800; padding: .85rem 1.1rem; border-radius: 4px; }

.element-box { border: 1px solid #dde5ec; border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; background:#fff; }
.element-box .prompt-note { color: #6c757d; font-style: italic; font-size: .85rem; }
.key-points .form-check { margin-bottom: .35rem; }

.sig-canvas-wrapper { width: 100%; max-width: 460px; aspect-ratio: 2 / 1; }
.sig-canvas { border: 2px solid #ccc; touch-action: none; background: #fff; width: 100%; height: 100%; border-radius: 4px; }

.progress-step { display:flex; gap:.75rem; align-items:flex-start; padding:.75rem 0; border-bottom:1px solid #eef2f6; }
.progress-step:last-child { border-bottom:none; }
.step-badge { flex:0 0 auto; width:2rem; height:2rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
.step-done { background:#d4edda; color:#155724; }
.step-active { background:var(--rpl-navy); color:#fff; }
.step-todo { background:#e9ecef; color:#6c757d; }
.step-locked { background:#f1f3f5; color:#adb5bd; }

table.kit-table { width:100%; border-collapse:collapse; }
table.kit-table th, table.kit-table td { border:1px solid #ccc; padding:.6rem; vertical-align:top; font-size:.92rem; }
table.kit-table th { background:#f5f8fb; text-align:left; color: var(--rpl-navy-2); }

@media print {
    .rpl-navbar, .demo-banner, footer, .no-print { display:none !important; }
    body { background:#fff; }
    .card { box-shadow:none; border:1px solid #ccc; }
    .page-break { page-break-after: always; }
}