/* BIO dialogs: presentation only, no changes to form bindings or validation. */
body.index-page :is(#tab2_modal,#tab3_modal,#add-link-modal) .modal-dialog { max-width: 540px; padding: 12px; margin: 24px auto !important; }
body.index-page :is(#tab2_modal,#tab3_modal,#add-link-modal) .modal-content { border: 1px solid #dbe7df; border-radius: 24px !important; background: linear-gradient(155deg,#fff,#f8fbf8); box-shadow: 0 24px 80px rgba(27,60,41,.18); }
body.index-page :is(#tab2_modal,#tab3_modal) .modal-header { border: 0; padding: 24px 62px 0 24px; }
body.index-page :is(#tab2_modal,#tab3_modal) .modal-title { margin: 0; color: #315c46; font-size: 20px; font-weight: 700; line-height: 1.7; overflow-wrap: anywhere; }
body.index-page :is(#tab2_modal,#tab3_modal) .modal-body { padding: 22px 24px 26px; font-family: 'Meiryo','メイリオ',sans-serif; }
body.index-page :is(#tab2_modal,#tab3_modal) :is(.desc-section,.responsive-second-section,.lb,.dflex-mob,.mob-tal,.mob-flex-sm,.noflex-mob) { display: contents !important; padding: 0 !important; margin: 0 !important; }
body.index-page :is(#tab2_modal,#tab3_modal) .modal-body { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
body.index-page :is(#tab2_modal,#tab3_modal) .modal-body :is(.mob-flex-sm,.dflex-mob) > .d-flex,
body.index-page #tab3_modal .modal-body .mob-tal { display: flex !important; flex-direction: column; align-items: stretch !important; justify-content: flex-start !important; gap: 8px; min-width: 0; padding: 14px !important; margin: 0 !important; border: 1px solid #dfe9e2; border-radius: 13px; background: #f3f8f4; }
body.index-page :is(#tab2_modal,#tab3_modal) .modal-body label { width: 100% !important; min-width: 0; height: auto !important; padding: 0 !important; text-align: left !important; color: #50745d; font-size: 12px !important; font-weight: 700; line-height: 1.8 !important; overflow-wrap: anywhere; }
body.index-page :is(#tab2_modal,#tab3_modal) .color-box { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 42px; padding: 6px 8px; border: 1px solid #d6e4da; border-radius: 10px; background: #fff; }
body.index-page :is(#tab2_modal,#tab3_modal) .color-box span { width: auto !important; min-width: 0; flex: 1 1 0; margin: 0; color: #68826e; font-family: monospace; font-size: 11px; line-height: 1.6; white-space: nowrap; }
body.index-page :is(#tab2_modal,#tab3_modal) input[type=color] { position: static !important; flex: 0 0 26px; width: 26px; height: 26px; margin: 0; padding: 0; border: 1px solid #d4e1d8; border-radius: 6px; }
body.index-page :is(#tab2_modal,#tab3_modal) select { width: 100% !important; min-width: 0 !important; min-height: 42px; height: auto !important; padding: 8px 25px 8px 10px; border: 1px solid #d6e4da !important; border-radius: 10px; background-color: #fff; font-size: 12px !important; line-height: 1.7; color: #4e735a; }
body.index-page #tab3_modal .mob-tal > .d-flex { display: flex !important; flex-wrap: wrap; gap: 6px; margin: 0 !important; }
body.index-page #add-link-modal .modal-body { padding: 10px 24px 26px !important; }
body.index-page #add-link-modal h4 { margin: 0; color: #315c46; font-size: 22px; font-weight: 700; line-height: 1.7; }
body.index-page #add-link-modal .modal-body > .col-12.mb-4 { margin: 0 0 18px !important; }
body.index-page #add-link-modal .modal-body > .d-flex { gap: 10px; align-items: center; }
body.index-page #add-link-modal .modal-body > .d-flex > div:first-child { flex: 0 0 44px; width: 44px !important; }
body.index-page #add-link-modal .modal-body > .d-flex > .position-relative { width: auto !important; flex: 1 1 0; min-width: 0; }
body.index-page #add-link-modal .modal-body > .d-flex > div:first-child > div { display: flex; justify-content: center; align-items: center; width: 44px !important; height: 46px !important; padding: 0 !important; border: 1px solid #cfdfd4 !important; border-radius: 11px !important; background: #edf5ef; color: #568369; line-height: 1 !important; }
body.index-page #add-link-modal input:not([type=file]):not([type=hidden]) { width: 100%; min-width: 0; min-height: 46px; height: auto; padding: 11px 12px 11px 34px !important; border: 1px solid #d4e2d9 !important; border-radius: 12px !important; background: #fff; color: #355d47 !important; font-size: 14px; line-height: 1.7; }
body.index-page #add-link-modal .position-relative > .bi { top: 50% !important; transform: translateY(-50%); left: 12px !important; color: #78a08a !important; }
body.index-page #add-link-modal button[type=submit] { display: flex; justify-content: center; align-items: center; width: 100% !important; min-height: 46px; height: auto; padding: 11px 16px; background: #2f8661 !important; border: 1px solid #2a7856; border-radius: 12px !important; color: #fff; font-size: 14px; line-height: 1.8; white-space: normal; }
body.index-page #error_modal:has(.bio-save-success) .modal-dialog { max-width: 490px; padding: 12px; margin-inline: auto; }
body.index-page #error_modal:has(.bio-save-success) .modal-content { border: 1px solid #dbe7df; border-radius: 25px !important; background: linear-gradient(150deg,#fff,#f2faf4); box-shadow: 0 24px 70px rgba(27,60,41,.18); }
body.index-page #error_modal:has(.bio-save-success) .modal-body { padding: 64px 26px 30px !important; }
body.index-page .bio-save-success { font-family: 'Meiryo','メイリオ',sans-serif; }
body.index-page .bio-save-success-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 18px; background: #e0f1e5; color: #3b9364; font-size: 29px; }
body.index-page .bio-save-success h3 { margin: 0 0 20px; color: #315c46; font-size: 20px; line-height: 1.8; overflow-wrap: anywhere; }
body.index-page .bio-save-success-url { display: block; padding: 15px; border: 1px solid #cde3d5; border-radius: 12px; background: #fff; color: #2b7957; font-size: 15px; font-weight: 700; line-height: 1.8; overflow-wrap: anywhere; }
body.index-page .bio-save-success p { margin: 18px 0 0; color: #789180; font-size: 12px; line-height: 1.95; overflow-wrap: anywhere; }
@media (max-width:600px) {
    body.index-page :is(#tab2_modal,#tab3_modal,#add-link-modal) .modal-dialog,body.index-page #error_modal:has(.bio-save-success) .modal-dialog { width: calc(100% - 16px); padding: 0; margin: 16px auto !important; }
    body.index-page :is(#tab2_modal,#tab3_modal) .modal-header { padding: 20px 56px 0 18px; }
    body.index-page :is(#tab2_modal,#tab3_modal) .modal-title { font-size: 18px; }
    body.index-page :is(#tab2_modal,#tab3_modal) .modal-body { padding: 18px; gap: 10px; }
    body.index-page :is(#tab2_modal,#tab3_modal) .modal-body :is(.mob-flex-sm,.dflex-mob) > .d-flex,body.index-page #tab3_modal .modal-body .mob-tal { padding: 10px !important; }
    body.index-page #add-link-modal .modal-body { padding: 8px 18px 22px !important; }
    body.index-page #add-link-modal input:not([type=file]):not([type=hidden]) { font-size: 16px; }
    body.index-page #error_modal:has(.bio-save-success) .modal-body { padding: 60px 20px 26px !important; }
}
@media (max-width:359px) { body.index-page :is(#tab2_modal,#tab3_modal) .modal-body { grid-template-columns: minmax(0,1fr); } }

/* Decorative celebration never intercepts input and never sends/saves any data. */
body .bio-save-confetti { position: fixed; inset: 0; z-index: 100000; overflow: hidden; pointer-events: none; }
body .bio-save-confetti-piece { position: absolute; top: 68%; width: 7px; height: 11px; border-radius: 2px; background: var(--dialog-color); animation: auth-dialog-burst var(--dialog-duration) var(--dialog-delay) linear both; }
body .bio-save-confetti-piece.from-left { left: -7px; }
body .bio-save-confetti-piece.from-right { right: -7px; }
@media (prefers-reduced-motion: reduce) { body .bio-save-confetti { display: none; } }

/* Existing inline widths must not reduce the alignment selector to one character. */
body.index-page #tab3_modal .mob-tal > .d-flex > select { min-width: 100% !important; flex: 1 1 100%; }

/* Link-button settings use a native PHP island; keep the parent editor intact. */
body.index-page #tab3_modal.bio-link-design-modal .modal-dialog{max-width:650px}
body.index-page #tab3_modal.bio-link-design-modal .modal-header{padding-bottom:18px}
body.index-page #tab3_modal .bio-link-design-frame{display:block;width:100%;height:580px;max-height:calc(88dvh - 105px);border:0;border-radius:0 0 24px 24px;background:#fbfdfa}
@media(max-width:600px){body.index-page #tab3_modal .bio-link-design-frame{height:610px;max-height:calc(88dvh - 94px)}body.index-page #tab3_modal.bio-link-design-modal .modal-header{padding-bottom:14px}}