/* BIO visual layout only; keep existing state, validation, save and theme handlers. */
body.index-page #tab5 .bio-title-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; align-items: center; margin: 0 0 18px; }
body.index-page #tab5 .bio-title-row h6 { min-width: 0; margin: 0; padding: 0; color: #18332f; font-size: 17px; font-weight: 700; line-height: 1.8; white-space: nowrap; }
body.index-page #tab5 .bio-title-row :is(.bio-sample-button,.feature-difference-trigger) { display: inline-flex; justify-content: center; align-items: center; min-height: 34px; height: auto; padding: 7px 10px; border: 1px solid #cfe2d6; border-radius: 10px; background: #f0f7f2; color: #408162; font-size: 11px; font-weight: 700; line-height: 1.7; text-decoration: none; white-space: nowrap; }
body.index-page #tab5 .bio-sample-button { background: #e4f0ea !important; }
body.index-page #tab5 .bio-title-row :is(a,button):hover { background: #d7eade !important; }
body.index-page #tab5 .bio-title-row :is(a,button):focus-visible { outline: 3px solid #91c5ad; outline-offset: 2px; }
body.index-page #tab5 > .row:has(.bio-header) { padding: 0 0 22px !important; }
body.index-page #tab5 .bio-header > span { grid-template-columns: auto minmax(0,1fr) auto auto; }
body.index-page #tab5 .bio-header > span > span { grid-column: auto; white-space: nowrap; }
body.index-page #tab5 .sliders .item { position: relative; }
body.index-page #tab5 .bio-motion-badge { position: absolute; left: 4px; right: 4px; bottom: 6px; display: flex; gap: 3px; justify-content: center; align-items: center; height: auto; padding: 4px 2px; border: 1px solid rgba(255,255,255,.8); border-radius: 7px; background: rgba(255,255,255,.87); color: #34775a; font-size: 8px; line-height: 1.6; font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
body.index-page #tab5 .sliders .add-more { animation: bio-image-card-float 3.2s ease-in-out infinite; }
@keyframes bio-image-card-float { 0%,100% { transform: translateY(0); box-shadow: 0 3px 8px rgba(25,54,36,.08); } 50% { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(76,122,100,.16); } }
/* Restyle only the BIO checklist, not other errors using the shared modal. */
body.index-page #error_modal:has(#err_msg ul) .modal-dialog { max-width: 460px; padding: 12px; margin-inline: auto; }
body.index-page #error_modal:has(#err_msg ul) .modal-content { border: 1px solid #dbe7df; border-radius: 25px !important; background: linear-gradient(155deg,#fff,#f6faf7); box-shadow: 0 24px 70px rgba(27,60,41,.18); }
body.index-page #error_modal:has(#err_msg ul) .modal-body { padding: 64px 24px 26px !important; }
body.index-page #error_modal #err_msg:has(ul)::before { content: '\f46d'; font-family: 'bootstrap-icons'; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto 16px; border: 1px solid #d7e8dd; border-radius: 15px; background: #e9f3ed; color: #478266; font-size: 24px; }
body.index-page #error_modal #err_msg:has(ul) > p { margin: 0 0 18px !important; color: #315c46; font-size: 18px; line-height: 1.8; }
body.index-page #error_modal #err_msg:has(ul) > div { display: block !important; width: 100% !important; }
body.index-page #error_modal #err_msg:has(ul) > div > div { width: 100%; }
body.index-page #error_modal #err_msg ul { display: flex; flex-direction: column; gap: 10px; width: 100% !important; margin: 0; padding: 0 !important; list-style: none; }
body.index-page #error_modal #err_msg li { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 54px; height: auto; padding: 14px 16px; border: 1px solid #e4e8df; border-radius: 12px; background: #fffaf2; color: #8a7858; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
body.index-page #error_modal #err_msg li:has(input:checked) { background: #edf6ef; color: #527e61; border-color: #d8e9dc; }
body.index-page #error_modal #err_msg input[type=checkbox] { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; accent-color: #478b63; }
@media (max-width: 600px) {
    body.index-page #tab5 .bio-title-row { gap: 5px; }
    body.index-page #tab5 .bio-title-row h6 { font-size: clamp(11px,3.3vw,15px); }
    body.index-page #tab5 .bio-title-row :is(.bio-sample-button,.feature-difference-trigger) { padding: 6px 7px; font-size: 9px; }
    body.index-page #tab5 .bio-header > span { grid-template-columns: auto minmax(0,1fr); gap: 8px; padding: 10px; }
    body.index-page #tab5 .bio-header > span > span { grid-column: 1; font-size: 10px !important; }
    body.index-page #tab5 #bio_slug { grid-column: 2; min-width: 0; padding: 10px 8px !important; font-size: 16px !important; }
    body.index-page #tab5 .bio-header > span > button { grid-column: auto; width: 100% !important; }
    body.index-page #error_modal:has(#err_msg ul) .modal-dialog { width: calc(100% - 16px); padding: 0; }
    body.index-page #error_modal:has(#err_msg ul) .modal-body { padding: 60px 18px 22px !important; }
    body.index-page #error_modal #err_msg li { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { body.index-page #tab5 .sliders .add-more { animation: none; } }