/* Tanda Tangan Digital */
.dd-tt { --dd-primary: #05b996; --dd-primary-dark: #049a7d; --dd-ink: #1d2b36; --dd-muted: #6b7a89; --dd-line: #e8edf2; --dd-soft: #f6f9fb; --dd-blue: #2e5bba; color: var(--dd-ink); padding-top: 8px; }
.dd-tt .dd-history__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.dd-tt .dd-history__head h4 { font-weight: 600; margin-bottom: 4px; }
.dd-tt .dd-history__head p { color: var(--dd-muted); margin: 0; }
.dd-pill { display: inline-flex; align-items: center; gap: 8px; background: #e9f8f4; color: #087a63; border-radius: 999px; padding: 8px 16px; font-size: 14px; }
.dd-pill strong { font-size: 16px; }
.dd-card { background: #fff; border: 1px solid var(--dd-line); border-radius: 16px; padding: 22px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.dd-card + .dd-card { margin-top: 18px; }
.dd-card__head { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.dd-card__head small { margin-left: auto; font-weight: 400; color: var(--dd-muted); font-size: 12px; }
.dd-step { width: 28px; height: 28px; border-radius: 50%; background: var(--dd-primary); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.dd-tt .form-group label { font-size: 13px; font-weight: 600; color: var(--dd-ink); margin-bottom: 6px; }
.dd-tt .form-control { height: 46px; border: 1px solid var(--dd-line); border-radius: 10px; background: #fff; font-size: 14px; color: var(--dd-ink); }
.dd-tt .form-control:focus { border-color: var(--dd-primary); box-shadow: 0 0 0 4px rgba(5, 185, 150, .15); }
.dd-help { color: var(--dd-muted); font-size: 12px; }

.dd-btn-main { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--dd-primary); color: #fff !important; font-size: 15px; font-weight: 600; box-shadow: 0 6px 16px rgba(5, 185, 150, .28); cursor: pointer; }
.dd-btn-main:hover { background: var(--dd-primary-dark); text-decoration: none; }
.dd-btn-main:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.dd-btn-main--block { width: 100%; }
.dd-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 10px; background: #fff; border: 1px solid var(--dd-line); color: var(--dd-ink) !important; font-size: 13px; font-weight: 600; cursor: pointer; }
.dd-btn-ghost:hover { border-color: var(--dd-primary); color: var(--dd-primary) !important; text-decoration: none; }
.dd-btn-danger { color: #d92d20 !important; }
.dd-btn-danger:hover { border-color: #d92d20; }

/* Unggah */
.dd-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; padding: 16px; text-align: center; background: var(--dd-soft); border: 2px dashed #c9d6df; border-radius: 14px; color: var(--dd-muted); cursor: pointer; transition: border-color .15s; }
.dd-drop:hover, .dd-drop.is-over { border-color: var(--dd-primary); }
.dd-drop i { font-size: 30px; color: var(--dd-primary); }
.dd-drop strong { color: var(--dd-primary); }
.dd-file { display: none; align-items: center; gap: 10px; background: var(--dd-soft); border-radius: 12px; padding: 12px 14px; }
.dd-file i { font-size: 26px; color: #d92d20; }
.dd-file__name { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-file__meta { color: var(--dd-muted); font-size: 12px; font-weight: 400; }
.dd-file a { color: var(--dd-muted); font-size: 18px; }

/* Pilihan tanda tangan */
.dd-sigs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.dd-sig { position: relative; display: flex; align-items: center; justify-content: center; height: 76px; border: 2px solid var(--dd-line); border-radius: 12px; background: #fff; cursor: pointer; padding: 6px; }
.dd-sig img { max-width: 100%; max-height: 100%; }
.dd-sig.is-active { border-color: var(--dd-primary); box-shadow: 0 0 0 3px rgba(5, 185, 150, .15); }
.dd-sig.is-active::after { content: "\eb7b"; font-family: remixicon; position: absolute; top: 4px; right: 6px; color: var(--dd-primary); font-size: 16px; }
.dd-sigs__empty { grid-column: 1 / -1; color: var(--dd-muted); font-size: 13px; background: var(--dd-soft); border-radius: 12px; padding: 14px; text-align: center; }
.dd-sig-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Area PDF */
.dd-viewer { background: var(--dd-soft); border-radius: 12px; padding: 12px; }
.dd-viewer__bar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; }
.dd-pager { display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 12px; border-radius: 8px; background: #fff; border: 1px solid var(--dd-line); color: var(--dd-ink) !important; font-size: 13px; font-weight: 600; cursor: pointer; }
.dd-pager:hover { border-color: var(--dd-primary); color: var(--dd-primary) !important; text-decoration: none; }
.dd-pager__info { font-size: 13px; color: var(--dd-muted); }
.dd-stage-wrap { overflow: auto; text-align: center; }
.dd-stage { position: relative; display: inline-block; box-shadow: 0 2px 10px rgba(16, 24, 40, .12); background: #fff; user-select: none; }
.dd-stage canvas { display: block; }
.dd-viewer__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 360px; color: var(--dd-muted); text-align: center; }
.dd-viewer__empty i { font-size: 40px; color: #c9d6df; }
.dd-pdf__hint { display: flex; align-items: center; gap: 8px; background: #eaf2ff; color: var(--dd-blue); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px; }

.dd-box { position: absolute; touch-action: none; box-sizing: border-box; border: 1.5px dashed var(--dd-blue); background: rgba(46, 91, 186, .06); border-radius: 4px; cursor: move; }
.dd-box__tag { position: absolute; left: -1.5px; top: -20px; height: 18px; line-height: 18px; padding: 0 6px; border-radius: 4px 4px 0 0; background: var(--dd-blue); color: #fff; font-size: 10px; font-weight: 600; white-space: nowrap; }
.dd-box__grip { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--dd-blue); border: 2px solid #fff; cursor: nwse-resize; }
.dd-box--sig { display: flex; flex-direction: column; }
.dd-box--sig .dd-box__img { flex: 0 0 71%; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; border-bottom: 1px solid #788290; }
.dd-box--sig .dd-box__img img { max-width: 100%; max-height: 100%; pointer-events: none; }
.dd-box--sig .dd-box__cap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #28323c; line-height: 1.2; text-align: center; overflow: hidden; }
.dd-box--qr { background: rgba(255, 255, 255, .85); display: flex; flex-direction: column; align-items: center; }
.dd-box--qr .dd-box__qr { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; color: #1d2b36; }
.dd-box--qr .dd-box__qr i { font-size: 2.2em; }
.dd-box--qr .dd-box__cap { color: #28323c; text-align: center; line-height: 1.2; padding-bottom: 2px; }
.dd-box--meterai { border-color: #f79009; background: rgba(247, 144, 9, .08) center / cover no-repeat; }
.dd-box--meterai .dd-box__tag { background: #f79009; }

/* Konfirmasi */
.dd-toggle { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--dd-line); border-radius: 12px; cursor: pointer; margin-bottom: 0; }
.dd-toggle input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--dd-primary); }
.dd-toggle strong { display: block; font-size: 14px; }
.dd-toggle span { color: var(--dd-muted); font-size: 12px; font-weight: 400; }
.dd-meterai-fields { display: none; border: 1px solid var(--dd-line); border-top: 0; border-radius: 0 0 12px 12px; padding: 14px; margin-top: -8px; padding-top: 18px; }
.dd-pin { letter-spacing: 10px; font-size: 22px !important; text-align: center; font-weight: 700; }
.dd-notice { display: flex; gap: 12px; align-items: center; background: #fff8eb; border: 1px solid #fedf89; color: #93370d; border-radius: 14px; padding: 14px 18px; margin-bottom: 18px; font-size: 14px; }
.dd-notice > i { font-size: 22px; color: #f79009; }
.dd-notice > div { flex: 1; }
.dd-legal { color: var(--dd-muted); font-size: 12px; margin-top: 10px; line-height: 1.5; }

/* Modal gambar */
.dd-pad { position: relative; border: 1px solid var(--dd-line); border-radius: 12px; background: #fff; touch-action: none; }
.dd-pad canvas { display: block; width: 100%; height: 220px; cursor: crosshair; }
.dd-pad__line { position: absolute; left: 24px; right: 24px; bottom: 50px; border-bottom: 1px dashed #c9d6df; pointer-events: none; }
.dd-pad__hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: #a0acb8; font-size: 12px; pointer-events: none; }
.dd-tabs { display: flex; gap: 6px; background: var(--dd-soft); padding: 4px; border-radius: 10px; margin-bottom: 14px; }
.dd-tabs a { flex: 1; text-align: center; padding: 8px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--dd-muted) !important; cursor: pointer; }
.dd-tabs a.is-active { background: #fff; color: var(--dd-ink) !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.dd-upload-preview { display: none; min-height: 140px; align-items: center; justify-content: center; border: 1px solid var(--dd-line); border-radius: 12px; margin-top: 12px; padding: 10px; background: repeating-conic-gradient(#f2f5f8 0% 25%, #fff 0% 50%) 50% / 16px 16px; }
.dd-upload-preview img { max-width: 100%; max-height: 180px; }
.dd-modal .modal-content { border-radius: 16px; border: 0; }
.dd-modal .modal-header { border-bottom: 1px solid var(--dd-line); }
.dd-modal .modal-title { font-weight: 600; }
.dd-modal .modal-footer { border-top: 1px solid var(--dd-line); }

/* Sukses */
.dd-success { text-align: center; padding: 48px 24px; max-width: 600px; margin: 0 auto; }
.dd-success__icon { width: 84px; height: 84px; border-radius: 50%; background: #e9f8f4; color: var(--dd-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 40px; margin-bottom: 16px; }
.dd-success__icon.is-wait i { display: inline-block; animation: ddSpin 1.2s linear infinite; }
.dd-success h5 { font-weight: 600; margin-bottom: 8px; }
.dd-success p { color: var(--dd-muted); margin-bottom: 22px; }
.dd-success__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@keyframes ddSpin { to { transform: rotate(360deg); } }

/* Riwayat & pengaturan */
.dd-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.dd-table th { color: var(--dd-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; padding: 10px 12px; border-bottom: 1px solid var(--dd-line); white-space: nowrap; }
.dd-table td { padding: 14px 12px; border-bottom: 1px solid var(--dd-line); vertical-align: middle; }
.dd-table tr:last-child td { border-bottom: 0; }
.dd-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.dd-badge--ok { background: #e9f8f4; color: #087a63; }
.dd-badge--wait { background: #fff8eb; color: #b54708; }
.dd-badge--fail { background: #fef3f2; color: #b42318; }
.dd-mono { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.dd-muted { color: var(--dd-muted); }
.dd-empty { text-align: center; padding: 40px 16px; color: var(--dd-muted); }
.dd-empty i { font-size: 40px; color: #c9d6df; display: block; margin-bottom: 8px; }
.dd-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dd-specimens { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.dd-specimen { border: 1px solid var(--dd-line); border-radius: 12px; padding: 10px; }
.dd-specimen__img { height: 90px; display: flex; align-items: center; justify-content: center; }
.dd-specimen__img img { max-width: 100%; max-height: 100%; }
.dd-specimen__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; }
.dd-audit li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--dd-line); }
.dd-audit li:last-child { border-bottom: 0; }
.dd-audit i { color: var(--dd-primary); }
.dd-audit strong { display: block; font-size: 14px; }
.dd-audit small { color: var(--dd-muted); font-size: 12px; display: block; word-break: break-all; }

@media (max-width: 575px) {
    .dd-card { padding: 16px; }
    .dd-table thead { display: none; }
    .dd-table tr { display: block; border-bottom: 1px solid var(--dd-line); padding: 8px 0; }
    .dd-table td { display: block; border: 0; padding: 4px 0; }
}

/* Profil */
.dd-notice--ok { background: #e9f8f4; border-color: #a6e5d6; color: #087a63; }
.dd-notice--ok > i { color: var(--dd-primary); }
.dd-notice--danger { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.dd-notice--danger > i { color: #d92d20; }
.dd-head-icon { font-size: 20px; color: var(--dd-primary); }
.dd-error { display: block; color: #d92d20; font-size: 12px; margin-top: 4px; }
.dd-tt .form-control.is-invalid { border-color: #f04438; }
.dd-tt .form-control:disabled { background: var(--dd-soft); color: var(--dd-muted); }
.dd-form-foot { display: flex; justify-content: flex-end; border-top: 1px solid var(--dd-line); margin-top: 8px; padding-top: 16px; }
.dd-profile { text-align: center; }
.dd-profile__avatar { width: 84px; height: 84px; margin: 4px auto 14px; border-radius: 50%; background: linear-gradient(135deg, #05b996, #037a63); color: #fff; font-size: 34px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dd-profile h5 { font-weight: 600; margin-bottom: 2px; word-break: break-word; }
.dd-profile > p { margin-bottom: 10px; word-break: break-all; }
.dd-profile__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 14px; }
.dd-profile__stats div { background: var(--dd-soft); border-radius: 12px; padding: 12px 8px; }
.dd-profile__stats strong { display: block; font-size: 20px; }
.dd-profile__stats span { font-size: 12px; color: var(--dd-muted); }
.dd-profile__meta { list-style: none; padding: 0; margin: 0; text-align: left; }
.dd-profile__meta li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--dd-line); font-size: 13px; }
.dd-profile__meta span { color: var(--dd-muted); }
.dd-links { display: grid; gap: 10px; }
.dd-link { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--dd-line); border-radius: 12px; color: var(--dd-ink) !important; }
.dd-link:hover { border-color: var(--dd-primary); text-decoration: none; background: #fbfefd; }
.dd-link > span:nth-child(2) { flex: 1; }
.dd-link strong { display: block; font-size: 14px; }
.dd-link small { color: var(--dd-muted); font-size: 12px; }
.dd-link > i { font-size: 20px; color: var(--dd-muted); }
.dd-link__icon { width: 40px; height: 40px; border-radius: 10px; background: #e9f8f4; color: var(--dd-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex: 0 0 auto; }

/* Halaman PIN */
.dd-pin-hero { display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; justify-content: center; padding: 28px 22px; }
.dd-pin-hero__icon { width: 88px; height: 88px; border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 42px; margin-bottom: 16px; background: #e9f8f4; color: var(--dd-primary); }
.dd-pin-hero__icon.is-off { background: #fff8eb; color: #f79009; }
.dd-pin-hero__icon.is-locked { background: #fef3f2; color: #d92d20; }
.dd-pin-hero h5 { font-weight: 600; margin-bottom: 6px; }
.dd-pin-hero p { color: var(--dd-muted); font-size: 13px; margin-bottom: 16px; }
.dd-tips { list-style: none; padding: 0; margin: 0; text-align: left; display: grid; gap: 8px; width: 100%; }
.dd-tips li { display: flex; gap: 8px; font-size: 13px; color: var(--dd-muted); background: var(--dd-soft); border-radius: 10px; padding: 10px 12px; }
.dd-tips i { color: var(--dd-primary); }
.dd-pinbox { display: flex; gap: 10px; }
.dd-pinbox input { width: 52px; height: 58px; border: 1.5px solid var(--dd-line); border-radius: 12px; text-align: center; font-size: 24px; font-weight: 700; color: var(--dd-ink); background: #fff; }
.dd-pinbox input:focus { outline: 0; border-color: var(--dd-primary); box-shadow: 0 0 0 4px rgba(5, 185, 150, .15); }
.dd-pinbox.is-error input { border-color: #f04438; }
.dd-pinbox__wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dd-eye { background: none; border: 0; color: var(--dd-muted); font-size: 20px; cursor: pointer; padding: 4px; }
.dd-step-label { display: flex; align-items: center; gap: 8px; }
.dd-step-label b { width: 22px; height: 22px; border-radius: 50%; background: var(--dd-primary); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.dd-specimen--add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-style: dashed; color: var(--dd-muted) !important; min-height: 142px; }
.dd-specimen--add:hover { border-color: var(--dd-primary); color: var(--dd-primary) !important; text-decoration: none; }
.dd-specimen--add i { font-size: 26px; }
@media (max-width: 575px) {
    .dd-pinbox { gap: 6px; }
    .dd-pinbox input { width: 38px; height: 48px; font-size: 20px; }
    .dd-pinbox__wrap { flex-wrap: nowrap; gap: 4px; }
}

/* Uji coba tanpa daftar (/coba) */
body.dd-coba { --dd-primary: #05b996; --dd-primary-dark: #049a7d; --dd-ink: #1d2b36; --dd-muted: #6b7a89; --dd-line: #e8edf2; background: #f4f7fa; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.dd-coba__bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; background: #fff; border-bottom: 1px solid #e8edf2; }
.dd-coba__logo { display: inline-flex; align-items: center; gap: 8px; color: var(--dd-ink) !important; font-weight: 700; font-size: 20px; text-decoration: none !important; }
.dd-coba__logo img { height: 34px; }
.dd-coba__nav { display: flex; gap: 8px; }
.dd-coba__main { max-width: 1320px; padding: 24px 16px 40px; }
.dd-guest-note { display: flex; gap: 8px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #eef4ff; color: #1d3f8f; font-size: 13px; line-height: 1.5; }
.dd-guest-note i { font-size: 18px; }
.dd-lanjut { text-align: center; padding: 28px 28px 24px; }
.dd-lanjut .dd-success__icon { margin: 0 auto 14px; }
.dd-lanjut h5 { font-weight: 700; }
.dd-lanjut p { color: var(--dd-muted); font-size: 14px; }
.dd-lanjut__meterai { background: #fff8eb; color: #93370d !important; border-radius: 10px; padding: 10px 12px; text-align: left; }
.dd-lanjut__btn { display: flex !important; width: 100%; height: 46px; margin-top: 10px; }
.dd-notice--draft { background: #e9f8f4; border-color: #a6e9d8; color: #05603a; }
.dd-notice--draft > i { color: var(--dd-primary); }
@media (max-width: 575px) {
    .dd-coba__bar { padding: 10px 16px; }
    .dd-coba__logo img { height: 28px; }
    .dd-coba__nav .dd-btn-ghost { display: none; }
}

/* Konfirmasi akun sebelum membuat PIN (password atau Google) */
.dd-pinverif__google { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border: 1px solid var(--dd-line); border-radius: 10px; background: #fff; color: var(--dd-ink) !important; font-weight: 600; font-size: 14px; text-decoration: none !important; }
.dd-pinverif__google:hover { border-color: var(--dd-primary); }
.dd-pinverif .dd-help { display: block; margin-top: 6px; }
.dd-pinverif__toggle { display: block; margin-top: 8px; font-size: 12px; color: var(--dd-primary) !important; }
.dd-pinverif__or { text-align: center; color: var(--dd-muted); font-size: 12px; margin: 8px 0; }
.dd-pinverif__pw { margin-top: 8px; }
.dd-pinverif__ok { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 10px; background: #e9f8f4; color: #05603a; font-size: 13px; font-weight: 600; }
.dd-pinverif__ok i { font-size: 18px; color: var(--dd-primary); }
form.pv-locked:not(.pv-open) .dd-pin-after { display: none !important; }

/* Konfirmasi posisi & panduan */
.dd-poscheck { margin-top: 16px; }
.dd-toggle--check { border-color: #fedf89; background: #fffcf5; }
.dd-toggle--check.is-ok { border-color: #a6e9d8; background: #f2fbf8; }
.dd-toggle--check a { color: var(--dd-primary); font-weight: 600; }
.dd-posmsg { display: none; margin-top: 8px; padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.5; background: #fff8eb; color: #93370d; }
.dd-posmsg.is-error { background: #fef3f2; color: #b42318; }
.dd-posmsg ul { margin: 4px 0 0; padding-left: 18px; }
.dd-pdf__hint a { color: var(--dd-primary); font-weight: 600; }
.dd-guide h6 { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 18px 0 8px; }
.dd-guide h6:first-child { margin-top: 0; }
.dd-guide h6 i { color: var(--dd-primary); font-size: 18px; }
.dd-guide p, .dd-guide li { font-size: 13px; line-height: 1.6; color: var(--dd-ink); }
.dd-guide ul { padding-left: 20px; margin-bottom: 8px; }
.dd-guide__checks { list-style: none; padding-left: 0 !important; }
.dd-guide__checks li::before { content: "\2713"; color: var(--dd-primary); font-weight: 700; margin-right: 8px; }
.dd-guide ul:not(.dd-guide__checks) { list-style: disc; }
.dd-guide ul li { display: list-item; margin-bottom: 4px; }
.dd-guide__lead { font-weight: 600; margin-bottom: 12px; }
.dd-ex-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 16px; }
.dd-ex { margin: 0; border: 2px solid; border-radius: 12px; padding: 8px; background: #fff; }
.dd-ex.is-ok { border-color: #05b996; }
.dd-ex.is-bad { border-color: #f04438; }
.dd-ex svg { display: block; width: 100%; height: auto; }
.dd-ex figcaption { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 12px; line-height: 1.5; }
.dd-ex figcaption i { font-size: 16px; line-height: 1.1; }
.dd-ex.is-ok figcaption i, .dd-ex.is-ok strong { color: #049a7d; }
.dd-ex.is-bad figcaption i, .dd-ex.is-bad strong { color: #d92d20; }
.dd-guide__rules { border: 1px solid var(--dd-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.dd-guide__rules summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--dd-primary); }
@media (max-width: 575px) { .dd-ex-grid { grid-template-columns: 1fr; } }

/* Nama penandatangan */
.dd-sig { flex-direction: column; height: 92px; }
.dd-sig img { max-height: 58px; }
.dd-sig__name { margin-top: 4px; max-width: 100%; font-size: 11px; color: var(--dd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-signer { margin-top: 16px; }
.dd-signer label { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.dd-signer .form-control { border-color: #f7b955; background: #fffcf5; font-weight: 600; }
.dd-signer__note { display: flex; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #fff8eb; color: #93370d; font-size: 12px; line-height: 1.5; }
.dd-signer__note i { font-size: 16px; color: #f79009; }
.dd-signer-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: #fff8eb; border: 1px solid #fedf89; font-size: 13px; }
.dd-signer-row > div { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dd-signer-row i { color: #f79009; font-size: 16px; }
.dd-signer-row a { color: var(--dd-primary); font-weight: 600; }
.dd-specimen__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 0 12px 10px; font-size: 12px; color: var(--dd-muted); }
.dd-specimen__name strong { flex-basis: 100%; color: var(--dd-ink); font-size: 13px; word-break: break-word; }
.dd-specimen__name a { color: var(--dd-primary); font-weight: 600; }