/* Shared presentation layer: no actions, disabled state, links or form behavior changed. */
body :is(.btn,.bio-button,button):not(.btn-close):not(.modal-ui-close):not(.carousel-control-prev):not(.carousel-control-next):not(.nav-link):not(.navbar-toggler):not(.swiper-button-prev):not(.swiper-button-next):not(.close-download-modal):not([data-bs-slide-to]) {
    box-sizing: border-box;
    max-width: 100%;
    height: auto !important;
    line-height: 1.7 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: center;
    vertical-align: middle;
}
body .btn:not(.btn-close):not(.modal-ui-close),body .bio-button,body button:not(.btn-close):not(.modal-ui-close):not(.carousel-control-prev):not(.carousel-control-next):not(.nav-link):not(.navbar-toggler):not(.swiper-button-prev):not(.swiper-button-next):not(.close-download-modal):not([data-bs-slide-to]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
body .btn:not(.btn-close):not(.modal-ui-close) { border-radius: 11px !important; font-weight: 600; transition: background-color .2s ease,border-color .2s ease,box-shadow .2s ease,filter .2s ease; }
body .btn:not(.btn-close):not(.modal-ui-close):not(.btn-sm):not(.btn-lg) { padding-block: 9px; }
body .btn-sm:not(.btn-close):not(.modal-ui-close) { padding-block: 6px; }
body .btn-lg:not(.btn-close):not(.modal-ui-close) { padding-block: 12px; }
body .btn-new { background: linear-gradient(135deg,#378f76,#1f705b) !important; border-color: #328568; color: #fff; box-shadow: 0 4px 12px -8px rgba(24,95,63,.5); }
body .btn-new:hover:not(:disabled):not(.disabled) { filter: brightness(1.07); box-shadow: 0 6px 18px -7px rgba(24,95,63,.3); }
body .btn-primary { --bs-btn-bg: #307b69; --bs-btn-border-color: #307b69; --bs-btn-hover-bg: #226451; --bs-btn-hover-border-color: #226451; --bs-btn-active-bg: #226451; --bs-btn-active-border-color: #226451; --bs-btn-disabled-bg: #7ca593; --bs-btn-disabled-border-color: #7ca593; }
body .btn-outline-primary { --bs-btn-color: #397d65; --bs-btn-border-color: #93bdab; --bs-btn-hover-bg: #e5f2ea; --bs-btn-hover-color: #2e6d51; --bs-btn-hover-border-color: #669e81; --bs-btn-active-bg: #e5f2ea; --bs-btn-active-color: #2e6d51; }
body .btn-outline-secondary { --bs-btn-border-color: #d0dbd4; --bs-btn-color: #6d8175; --bs-btn-hover-bg: #edf3ef; --bs-btn-hover-color: #425e4d; --bs-btn-hover-border-color: #adbdaf; }
body .btn-light { --bs-btn-bg: #f2f7f3; --bs-btn-border-color: #dbe7df; --bs-btn-color: #52735e; --bs-btn-hover-bg: #e4eee7; --bs-btn-hover-border-color: #c2d6c8; }
body :is(.btn,.bio-button,button):focus-visible { outline: 3px solid #91c5ad; outline-offset: 3px; }
body :is(.btn,.bio-button,button):disabled,body .btn.disabled { box-shadow: none; filter: none; }
/* Preserve danger/warning status palettes, compact icon controls, navigation and hidden controls. */
body .btn :is(svg,.bi),body .bio-button :is(svg,.bi) { flex-shrink: 0; }
body .btn > :is(div,span) { min-width: 0; max-width: 100%; }
body .btn > .d-flex { justify-content: center; align-items: center; flex-wrap: wrap; line-height: 1.7 !important; }

/* Ten-second guide: unchanged click handler, polished emerald outline. */
body .media-btns > button:first-child {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto;
    max-width: 100%;
    min-height: 38px;
    height: auto !important;
    padding: 8px 16px !important;
    margin: 0 auto;
    border: 1px solid #bcd6c7;
    border-radius: 12px !important;
    background: linear-gradient(135deg,#e8f4ed,#f8fbf8) !important;
    color: #427d5e !important;
    font-family: 'Meiryo','メイリオ',sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8 !important;
    box-shadow: 0 4px 12px -8px rgba(39,93,57,.28);
}
body .media-btns > button:first-child::before { content: '\f4f3'; font-family: 'bootstrap-icons'; font-size: 16px; line-height: 1; }
body .media-btns > button:first-child:is(:hover,:focus-visible) { background: #1f705b !important; color: #fff !important; box-shadow: 0 5px 14px -6px rgba(39,93,57,.24); }
body .media-btns .mobile-download-div { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
body .media-btns .mobile-download-div > span { display: block; margin-top: 6px; text-align: center; line-height: 1.7; overflow-wrap: anywhere; }
body .media-btns .mobile-download-div a { display: inline-flex !important; align-items: center; justify-content: center; width: min(100%,230px) !important; max-width: 100%; min-height: 46px; height: auto !important; padding: 11px 16px !important; border: 1px solid #336553; border-radius: 13px !important; background: linear-gradient(135deg,#2e5c4d,#203e34) !important; color: #fff !important; line-height: 1.8 !important; }
body .media-btns .mobile-download-div .app-btn { flex-wrap: wrap; gap: 4px; line-height: 1.7 !important; }

/* Native details: each problem opens its answer without JS or application state. */
body #app-modal .modal-dialog { max-width: 580px; margin: 20px auto; padding: 12px; }
body #app-modal .modal-content { border: 1px solid #dbe7df; border-radius: 24px !important; background: #fff; box-shadow: 0 24px 80px rgba(23,57,36,.18); }
body #app-modal .modal-body { padding: 58px 24px 24px; font-family: 'Meiryo','メイリオ',sans-serif; }
body #app-modal .capture-help-heading { text-align: center; margin-bottom: 22px; }
body #app-modal .capture-help-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 16px; background: #e7f2eb; color: #448366; font-size: 26px; }
body #app-modal .capture-help-heading h2 { color: #315c46; font-size: 19px; line-height: 1.8; overflow-wrap: anywhere; margin: 0 0 8px; }
body #app-modal .capture-help-heading p { padding: 0 !important; color: #95a69b; font-size: 11px !important; line-height: 1.8; margin: 0; text-align: center !important; }
body #app-modal .capture-help-topics { display: flex; flex-direction: column; gap: 12px; }
body #app-modal .capture-help-topic { min-width: 0; border: 1px solid #dce8de; border-radius: 14px; background: #f8faf7; overflow: hidden; }
body #app-modal .capture-help-topic summary { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px; color: #52765b; font-size: 12px; font-weight: 700; line-height: 1.9; text-align: left; list-style: none; cursor: pointer; }
body #app-modal .capture-help-topic summary::-webkit-details-marker { display: none; }
body #app-modal .capture-help-topic summary > span { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
body #app-modal .capture-help-topic summary > .bi { flex: 0 0 auto; font-size: 18px; color: #779d85; }
body #app-modal .capture-help-topic summary > .capture-help-chevron { font-size: 12px; transition: transform .2s; }
body #app-modal .capture-help-topic[open] { background: #fff; border-color: #bad7c6; }
body #app-modal .capture-help-topic[open] summary { background: #edf6ef; }
body #app-modal .capture-help-topic[open] .capture-help-chevron { transform: rotate(180deg); }
body #app-modal summary:focus-visible { outline: 3px solid #91c5ad; outline-offset: -3px; }
body #app-modal .capture-help-solution { padding: 14px 16px 18px; }
body #app-modal .capture-solution-label { display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: #40805b; font-size: 10px; font-weight: 700; line-height: 1.7; margin-bottom: 7px; }
body #app-modal .capture-help-solution p { padding: 0 !important; margin: 0; font-size: 12px !important; color: #6c8273; line-height: 1.95; text-align: left !important; overflow-wrap: anywhere; }
@media (max-width: 600px) {
    body #app-modal .modal-dialog { width: calc(100% - 16px); padding: 0; margin: 16px auto; }
    body #app-modal .modal-body { padding: 56px 16px 20px; }
    body #app-modal .capture-help-heading h2 { font-size: 16px; }
    body #app-modal .capture-help-topic summary { padding: 12px; font-size: 11px; }
    body #app-modal .capture-help-solution { padding: 12px 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    body :is(.btn,.bio-button),body .media-btns .mobile-download-div a { animation: none !important; transition: none; }
    body #app-modal .capture-help-chevron { transition: none; }
}