/* v21: foto, hasil ujian, serta kiriman keluarga. */
.v21-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}.v21-tabs button{min-height:44px;padding:11px 18px;border:1px solid var(--v20-line,#dce3ec);border-radius:12px;color:var(--v20-muted,#64748b);background:var(--v20-surface,#fff);font-weight:700;font-size:13px}.v21-tabs button[aria-selected=true]{background:#145d6b;color:#fff;border-color:#145d6b}.v21-help{font-size:12px;color:var(--v20-muted,#64748b);line-height:1.8;margin-top:16px;overflow-wrap:anywhere}.v21-results,.v21-packages{display:grid;gap:14px}.v21-result{display:flex;align-items:flex-start;gap:18px;border:1px solid var(--v20-line,#dce3ec);border-radius:18px;padding:20px;background:var(--v20-surface,#fff)}.v21-score{width:76px;min-height:86px;border-radius:16px;background:#eaf3f7;color:#175667;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:26px;font-weight:800;flex:none;gap:4px}.v21-score small{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.v21-score.is-perfect{color:#876113;background:linear-gradient(135deg,#fff3cb,#f9e4a1)}.v21-result-body{min-width:0;flex:1}.v21-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--v20-muted,#64748b)}.v21-result h3,.v21-package h3,.v21-home h3{font-size:15px;font-weight:800;line-height:1.6;margin:4px 0;overflow-wrap:anywhere}.v21-result p,.v21-package p,.v21-home p{font-size:12px;line-height:1.7;color:var(--v20-muted,#64748b);margin:4px 0 12px;overflow-wrap:anywhere}.v21-home{display:flex;align-items:center;gap:16px;margin-bottom:20px}.v21-home>div{flex:1;min-width:0}.v21-home-icon,.v21-package-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#e5f3f0;color:#176854;flex:none;font-size:19px}.v21-package{border:1px solid var(--v20-line,#dce3ec);padding:22px;border-radius:18px}.v21-package header{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}.v21-package header>div{flex:1;min-width:120px}.v21-status{display:inline-block;padding:6px 10px;border-radius:100px;font-size:10px;font-weight:800;background:#edf3fa;color:#355d85;line-height:1.4}.v21-status[data-status=diambil]{background:#e1f4eb;color:#126149}.v21-status[data-status=batal]{background:#f3e9e9;color:#9a4444}.v21-timeline{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:18px 0;margin:0}.v21-timeline li{display:flex;gap:8px;font-size:11px;color:var(--v20-muted,#64748b);line-height:1.5;min-width:0}.v21-timeline i{width:10px;height:10px;margin-top:4px;border-radius:50%;border:2px solid #c4ced9;flex:none}.v21-timeline .is-done i{background:#198567;border-color:#198567;box-shadow:0 0 0 3px #19856716}.v21-timeline small{display:block;font-size:10px;margin-top:4px;overflow-wrap:anywhere}.v21-optional{border:1px solid var(--v20-line,#dce3ec);padding:14px;border-radius:12px}.v21-optional summary{font-size:12px;font-weight:700;cursor:pointer;min-height:24px;line-height:1.7}.v21-optional[open] summary{margin-bottom:14px}.v21-optional label+label{margin-top:12px}.v21-submit{width:100%;justify-content:center;position:sticky;bottom:0;box-shadow:0 -8px 20px var(--v20-surface,#fff)}#v21-package-error{color:#b43232;font-size:12px;line-height:1.7}.v21-switch{display:flex;align-items:center;gap:12px;border:1px solid var(--v20-line,#dce3ec);padding:16px;border-radius:14px;margin-top:20px}.v21-switch input{width:20px;height:20px;accent-color:#176b59;flex:none}.v21-switch b{display:block;font-size:12px}.v21-switch small{display:block;font-size:11px;line-height:1.7;color:var(--v20-muted,#64748b);margin-top:3px}.v21-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:18px}.v21-photo{border:1px solid var(--v20-line,#dce3ec);border-radius:18px;overflow:hidden;min-width:0;background:var(--v20-surface,#fff)}.v21-photo-cover{height:110px;background:radial-gradient(circle at 85% 10%,#d2b36560,transparent 45%),linear-gradient(120deg,#133e52,#236956);position:relative}.v21-photo-avatar{position:absolute;left:22px;bottom:-32px;width:88px;height:88px;border-radius:24px;background:#e7edf2;box-shadow:0 0 0 5px var(--v20-surface,#fff);display:grid;place-items:center;overflow:hidden;font-size:30px;color:#72918b}.v21-photo-avatar img{width:100%;height:100%;object-fit:cover}.v21-photo-info{padding:44px 22px 22px}.v21-photo-info h3{font-size:14px;line-height:1.6;font-weight:800;margin-top:12px;overflow-wrap:anywhere}.v21-photo-info p{font-size:11px;color:var(--v20-muted,#64748b);margin:6px 0 16px}.v21-photo-actions{display:flex;gap:8px;flex-wrap:wrap}.v21-photo-actions button{font-size:11px;padding:9px 12px;min-height:40px;flex:1}.v20-button.is-danger{color:#ad3a3a;border-color:#ebcccc}.v21-photo-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}.v21-photo-compare img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:16px;background:#edf3f7}.v21-photo-compare figcaption{text-align:center;font-size:12px;font-weight:700;margin-top:10px}.v21-photo-compare figure{min-width:0}.dark .v21-score{background:#193b49;color:#a9d7e0}.dark .v21-status{background:#233e50;color:#a8cbdc}.dark .v21-photo-cover{background:radial-gradient(circle at 85% 10%,#d2b36540,transparent 45%),linear-gradient(120deg,#0b2838,#164938)}.dark .v21-package-icon,.dark .v21-home-icon{background:#193e38;color:#80cfb9}.dark .v21-score.is-perfect{background:#58481e;color:#f6d98d}
@media(max-width:640px){.v21-home{align-items:flex-start;flex-wrap:wrap}.v21-home>div{flex-basis:calc(100% - 64px)}.v21-home>.v20-button{flex:1}.v21-result{gap:12px;padding:15px}.v21-score{width:57px;min-height:74px;font-size:23px}.v21-result h3{font-size:13px}.v21-result button{width:100%;font-size:11px;justify-content:center;white-space:normal}.v21-package{padding:16px}.v21-timeline{grid-template-columns:1fr;gap:15px}.v21-timeline li{font-size:12px}.v21-tabs button{flex:1;font-size:12px;padding:10px}.v21-photo-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.v21-photo-compare{gap:10px}.v21-photo-compare figcaption{font-size:11px}}
@media(prefers-reduced-motion:reduce){.v21-results *,.v21-photo-grid *{scroll-behavior:auto}}

.ob-dua{grid-template-columns:repeat(2,minmax(0,1fr))}.ob-dua>div,.ob-poin-list,.ob-poin-list li{min-width:0}.ob-poin-list small{white-space:normal;overflow-wrap:anywhere}.ob-utama>*,.ob-grid>*{min-width:0}#v21-other-wrap[hidden]{display:none}.v21-earned{display:inline-flex;background:#e7f4e9;color:#276438;border-radius:8px;padding:5px 9px;font-size:11px;font-weight:800;margin-bottom:10px}@media(max-width:640px){.ob-dua{grid-template-columns:minmax(0,1fr)}}

.v22-photo-upload{border:1px dashed var(--v20-line,#ccd8e2);border-radius:16px;padding:16px;background:var(--v20-soft,#f3f7fa)}.v22-photo-upload h3{font-size:13px;font-weight:800}.v22-photo-upload h3 small{font-weight:500}.v22-photo-upload p{font-size:11px;line-height:1.7;color:var(--v20-muted,#64748b);margin:7px 0 12px}.v22-photo-tools{display:flex;flex-wrap:wrap;gap:8px}.v22-photo-tools button{flex:1;justify-content:center}.v22-photo-upload input[hidden],#v22-package-preview[hidden]{display:none!important}#v22-package-preview{margin-top:14px}#v22-package-preview img{width:100%;max-height:190px;object-fit:contain;border-radius:12px;background:var(--v20-surface,#fff)}#v22-package-preview figcaption{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--v20-muted,#64748b)}.v22-package-photo{display:flex;flex-direction:column;gap:7px;border:1px solid var(--v20-line,#dce3ec);border-radius:12px;overflow:hidden;max-width:100%;background:var(--v20-surface,#fff);color:var(--v20-muted,#64748b);text-align:center;font-size:11px;margin:12px 0;padding:8px}.v22-package-photo img{width:100%;height:160px;object-fit:contain;border-radius:8px;min-width:0}.v22-package-photo:hover{border-color:#559488}.v22-photo-thumb{width:56px;height:56px;margin:0;flex:none;padding:3px}.v22-photo-thumb img{width:48px;height:48px;object-fit:cover}.v22-photo-thumb>span:not(.v22-photo-error){display:none}.v22-photo-thumb .v22-photo-error{display:none}.v22-photo-view img{display:block;width:100%;max-height:70vh;object-fit:contain;border-radius:12px;min-height:100px}.v22-photo-error{display:block;font-size:11px;line-height:1.6;color:#ad3f3f;padding:8px}.v22-package-photo .is-error{height:40px}.v22-photo-upload [role=status]{margin-bottom:0}.dark .v22-photo-upload{background:#193045}

.dark .v22-package-photo{background:#142136;border-color:#2a3c57;color:#c4d2e4}