/* Homepage dialog decoration only. No authentication, requests or feature handlers. */
body #authModal .modal-dialog { max-width: 480px; padding: 12px; margin-inline: auto; }
body #authModal .modal-content { border: 1px solid #dbe6de; border-radius: 26px !important; background: linear-gradient(160deg,#fff,#f6faf7); box-shadow: 0 24px 80px rgba(27,60,41,.2); }
body #authModal .modal-header { padding: 0; }
body #authModal .modal-body { padding: 0 28px 26px !important; font-family: 'Meiryo','メイリオ',sans-serif; }
body #authModal .auth-dialog-brand { display: flex; justify-content: center; margin: 0 0 14px; }
body #authModal .auth-dialog-brand img { display: block; width: 48px; height: 48px; border-radius: 15px; box-shadow: 0 7px 15px -9px #909ab7; }
body #authModal h3 { color: #294e3e; font-size: 22px; line-height: 1.7; overflow-wrap: anywhere; margin: 0; }
body #authModal .auth-dialog-intro { color: #86998d; font-size: 11px; line-height: 1.8; margin: 8px 0 20px; }
body #authModal .modal-body > .col-12.my-4 { margin: 0 !important; }
body #authModal .nav-tabs { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px; border: 1px solid #dce8e0 !important; border-radius: 14px; background: #edf4ef; margin-bottom: 22px; }
body #authModal .nav-tabs .nav-item { width: auto !important; flex: 1 1 0; min-width: 0; border: 0 !important; }
body #authModal .nav-tabs .nav-link { display: flex; justify-content: center; align-items: center; min-height: 42px; height: auto; margin: 0 !important; padding: 9px 8px; border: 0; border-radius: 10px !important; background: transparent; color: #71917d !important; font-size: 13px; line-height: 1.7; white-space: normal; overflow-wrap: anywhere; text-align: center; }
body #authModal .nav-tabs .nav-link.active, body #authModal .nav-tabs .nav-link.show { background: #fff; color: #28785f !important; box-shadow: 0 3px 10px rgba(39,83,55,.07); }
body #authModal .tab-content { padding: 0 !important; border: 0 !important; }
body #authModal .tab-pane { padding: 0 !important; }
body #authModal .tab-pane > .col-12.my-4 { margin: 16px 0 !important; }
body #authModal input.form-control { box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; height: auto; padding: 12px 15px; background: #fff; border: 1px solid #d7e3da !important; border-radius: 12px !important; text-align: left !important; font-size: 15px; line-height: 1.6; color: #355e49; }
body #authModal input.form-control::placeholder { color: #93a397; }
body #authModal input.form-control:focus { border-color: #499982 !important; box-shadow: 0 0 0 3px rgba(73,153,130,.11); }
body #authModal .text-danger { display: block; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; text-align: left; }
body #authModal .tab-pane .text-primary { color: #448771 !important; font-size: 12px; line-height: 1.7; }
body #authModal :is(#loginForm,#registerForm) { position: relative; isolation: isolate; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 100%; min-height: 48px; height: auto !important; padding: 12px 36px; border: 1px solid #318f70; border-radius: 13px !important; background: linear-gradient(130deg,#3a9a78,#1e745a); color: #fff; font-size: 14px !important; font-weight: 700; line-height: 1.7; white-space: normal; overflow-wrap: anywhere; text-align: center; box-shadow: 0 5px 15px -8px #479276; }
body #authModal :is(#loginForm,#registerForm)::before { content: ''; position: absolute; top: -20%; bottom: -20%; left: -45%; width: 30%; z-index: -1; background: linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent); transform: skewX(-20deg); animation: auth-dialog-shimmer 4.8s ease-in-out infinite; pointer-events: none; }
body #authModal :is(#loginForm,#registerForm)::after { content: '✦'; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); color: #daf1df; font-size: 13px; pointer-events: none; animation: auth-dialog-sparkle 2.8s ease-in-out infinite; }
@keyframes auth-dialog-shimmer { 0%,60% { left: -45%; } 90%,100% { left: 140%; } }
@keyframes auth-dialog-sparkle { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

/* The heading/button row is content-aware, and wraps before labels overlap. */
body.index-page .feature-difference-heading-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
body.index-page .feature-difference-heading-row > .col-12 { width: auto; flex: 1 1 130px; min-width: 0; margin: 0 !important; text-align: left !important; }
body.index-page .feature-difference-heading-row h6 { margin: 0; }
body.index-page .feature-difference-toolbar { display: flex; justify-content: flex-end; margin: 0 0 14px; }
body.index-page .feature-difference-trigger { box-sizing: border-box; display: inline-flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 5px; max-width: 100%; min-height: 32px; height: auto; padding: 6px 10px; border: 1px solid #d1e2d7; border-radius: 10px; background: #f0f7f2; color: #4f8970; font-family: 'Meiryo','メイリオ',sans-serif; font-size: 10px; font-weight: 700; line-height: 1.7; white-space: normal; overflow-wrap: anywhere; text-align: center; cursor: pointer; transition: background .2s,box-shadow .2s; }
body.index-page .feature-difference-trigger:hover { background: #e3f0e8; box-shadow: 0 3px 10px rgba(40,90,59,.08); }
body.index-page .feature-difference-trigger:focus-visible { outline: 3px solid #91c5ad; outline-offset: 3px; }
body .feature-difference-modal .modal-dialog { max-width: 600px; padding: 12px; margin: 20px auto; }
body .feature-difference-modal .modal-content { border: 1px solid #dbe7df; border-radius: 24px; background: #fff; box-shadow: 0 24px 80px rgba(27,60,41,.2); }
body .feature-difference-modal .modal-header { padding: 0; }
body .feature-difference-modal .modal-body { padding: 0 20px 22px; font-family: 'Meiryo','メイリオ',sans-serif; }
body .feature-difference-modal .difference-feature-heading { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
body .feature-difference-modal .difference-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; background: #e8f3ec; color: #337b60; font-size: 23px; }
body .feature-difference-modal .difference-eyebrow { color: #91a797; font-size: 10px; line-height: 1.6; margin: 0 0 3px; }
body .feature-difference-modal h2 { margin: 0; color: #315c46; font-size: 21px; line-height: 1.7; overflow-wrap: anywhere; }
body .feature-difference-modal .difference-topics { display: flex; flex-direction: column; gap: 12px; }
body .feature-difference-modal .difference-topic { min-width: 0; border: 1px solid #dce8de; border-radius: 15px; background: #f8faf7; overflow: hidden; }
body .feature-difference-modal .difference-topic summary { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; height: auto; padding: 14px; list-style: none; color: #355e49; font-size: 13px; font-weight: 700; line-height: 1.85; cursor: pointer; }
body .feature-difference-modal .difference-topic summary::-webkit-details-marker { display: none; }
body .feature-difference-modal .difference-topic-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; background: #e5f0e9; color: #428261; font-size: 20px; }
body .feature-difference-modal .difference-topic-icon.is-warning { background: #fff0cf; color: #ae8431; }
body .feature-difference-modal .difference-topic-title { flex: 1 1 0; min-width: 0; text-align: left; overflow-wrap: anywhere; }
body .feature-difference-modal .difference-topic-chevron { flex: 0 0 auto; font-size: 14px; color: #67977b; transition: transform .2s; }
body .feature-difference-modal .difference-topic[open] { background: #fff; border-color: #bad7c6; }
body .feature-difference-modal .difference-topic[open] summary { background: #edf6ef; }
body .feature-difference-modal .difference-topic[open] .difference-topic-chevron { transform: rotate(180deg); }
body .feature-difference-modal .difference-topic summary:focus-visible { outline: 3px solid #91c5ad; outline-offset: -3px; }
body .feature-difference-modal .difference-topic-copy { padding: 15px 18px 18px; border-top: 1px solid #e1ebe4; }
body .feature-difference-modal .difference-topic-copy p { margin: 0; text-align: left; color: #6b8273; font-size: 13px; line-height: 2; overflow-wrap: anywhere; }
body #app-modal .capture-help-demo { display: block; width: min(100%,440px); margin: 18px auto 0; border: 1px solid #dce8df; border-radius: 16px; overflow: hidden; background: #eef6f0; }
body #app-modal .capture-help-demo img { display: block; width: 100%; height: auto; }

/* Modal opening celebration never receives clicks or changes input values. */
body .auth-dialog-confetti { position: fixed; inset: 0; z-index: 100000; overflow: hidden; pointer-events: none; }
body .auth-dialog-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 .auth-dialog-confetti-piece.from-left { left: -7px; }
body .auth-dialog-confetti-piece.from-right { right: -7px; }
@keyframes auth-dialog-burst { 0% { opacity: 0; transform: translate3d(0,0,0) rotate(0); } 5% { opacity: 1; } 35% { opacity: 1; transform: translate3d(var(--dialog-apex-x),var(--dialog-rise),0) rotate(160deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--dialog-x),50vh,0) rotate(var(--dialog-spin)); } }
@media (max-width: 600px) {
    body #authModal .modal-dialog,body .feature-difference-modal .modal-dialog { width: calc(100% - 16px); padding: 0; margin: 16px auto; }
    body #authModal .modal-body { padding: 0 20px 22px !important; }
    body #authModal h3 { font-size: 20px; }
    body #authModal input.form-control { font-size: 16px; }
    body .feature-difference-modal .modal-body { padding: 0 12px 20px; }
    body .feature-difference-modal h2 { font-size: 18px; }
    body .feature-difference-modal .difference-topic summary { padding: 12px; gap: 9px; font-size: 12px; }
    body .feature-difference-modal .difference-topic-copy { padding: 12px 14px 16px; }
    body .feature-difference-modal .difference-topic-copy p { font-size: 12px; line-height: 1.95; }
}
@media (prefers-reduced-motion: reduce) {
    body .feature-difference-modal .difference-topic-chevron { transition: none; }
    body #authModal :is(#loginForm,#registerForm)::before,body #authModal :is(#loginForm,#registerForm)::after,body .auth-dialog-confetti-piece { animation: none; }
    body #authModal :is(#loginForm,#registerForm)::before,body .auth-dialog-confetti { display: none; }
}

/* Capture comparison matches the compact BIO button, including on phones. */
body.index-page #tab66 .feature-difference-trigger{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-wrap:nowrap!important;gap:0!important;width:auto!important;min-height:32px!important;height:auto!important;padding:6px 10px!important;font-size:10px!important;line-height:1.7!important;border-radius:10px!important;white-space:normal!important;animation:none!important;flex:0 0 auto}
body.index-page #tab66 .feature-difference-trigger>span{font-size:inherit!important;line-height:inherit!important;white-space:normal!important;text-align:center}
body.index-page #tab66 .feature-difference-trigger::before,body.index-page #tab66 .feature-difference-trigger::after{display:none!important}
@media(max-width:600px){body.index-page #tab66 .feature-difference-trigger{padding:5px 8px!important}}
/* All feature dialogs: icon glyph boxes must match the centre of their frames. */
body .feature-difference-modal :is(.difference-feature-icon,.difference-topic-icon){line-height:1;vertical-align:middle}
body .feature-difference-modal :is(.difference-feature-icon,.difference-topic-icon)>i{display:flex;align-items:center;justify-content:center;width:1em;height:1em;line-height:1;margin:0;padding:0}
body .feature-difference-modal :is(.difference-feature-icon,.difference-topic-icon)>i::before{display:block;line-height:1;vertical-align:0;position:static;transform:none;margin:0;padding:0}
body .feature-difference-modal .difference-qr-icon{display:block;width:24px;height:24px;flex-shrink:0}