 :root,[data-theme]{--background:#f0f5ed;--foreground:#243126;--primary:#3d702f;--primary-foreground:#fff;--card:#fff;--ring:#3d702f;--border:#ccd5c9;--input:#ccd5c9;--accent:#e6efdf;--custom-icon:#3d702f}body{background:#f0f5ed!important;border-top:5px solid #3d702f}div.min-h-\[90vh\]>div.mx-auto{background:white;border-radius:14px;padding:28px;box-shadow:0 12px 38px #284b2510;margin-top:24px;margin-bottom:24px}img[alt="Logo"]{width:100%!important;max-width:510px;height:auto;margin:12px auto 24px!important}
/* Presentation only; leave React-owned buttons, text elements and dialogs intact. */
:root,[data-theme]{--secondary:#52634b;--info:#3d702f}
.jscc-settings-safe{max-width:680px;margin:24px auto;padding:0 12px;box-sizing:border-box}
.jscc-settings-safe::before{content:"2段階認証の設定";display:block;text-align:center;padding:110px 0 20px;background:url('/static/media/logo.png') center top / min(100%,460px) auto no-repeat;font-size:24px;color:#243126}
#one-time-password-panel{border-radius:14px;background:#fff}
#one-time-password-panel>div{padding:28px}
#one-time-password-panel h5::after{content:"Google Authenticator（Google 認証システム）やMicrosoft Authenticatorなどを使用できます。すでに対応する認証アプリをお使いの場合、新たなインストールは不要です。";display:block;font-size:14px;font-weight:400;line-height:1.9;color:#52634b;margin-top:18px}
#one-time-password-add,.jscc-setup #register-link{background:#3d702f;color:white;border-color:#3d702f;border-radius:5px;padding:12px 20px;min-height:44px;height:auto;white-space:normal}
.jscc-disabled-webauthn{display:none!important}
.jscc-setup #\32 fa-container{height:auto!important;min-height:160px}
.jscc-setup .state-not-registered p{color:#52634b!important;line-height:1.9}
.jscc-setup .state-not-registered svg{color:#3d702f}

/* Use the actual panel width, not the browser's xl breakpoint. */
#one-time-password-panel>div.grid>div{grid-column:1 / -1!important;min-width:0}
#one-time-password-panel [data-slot="card"]{width:100%;min-width:0;box-sizing:border-box}
#one-time-password-panel [id$="-description"]{overflow-wrap:anywhere}
#one-time-password-panel [data-slot="card"] .flex.flex-col{min-width:0}
#one-time-password-panel [data-slot="card"] .flex.items-center.justify-end{flex-shrink:0}
body:has(#one-time-password-panel) nav:has(#settings-menu){display:none!important}
body:has(#one-time-password-panel) main:has(#one-time-password-panel){padding-top:20px!important}
@media(max-width:480px){#one-time-password-panel [data-slot="card"] .flex.flex-row{flex-wrap:wrap;gap:8px}}

#jscc-registration-complete{background:#fff;border-radius:14px;padding:28px;margin-bottom:20px;border-top:4px solid #3d702f;color:#243126}
#jscc-registration-complete h2{font-size:22px;margin:0 0 16px;font-weight:500;line-height:1.5}
#jscc-registration-complete p{font-size:14px;line-height:1.9;margin:0 0 22px;color:#52634b}
#jscc-registration-complete a{display:block;text-align:center;padding:12px 18px;background:#3d702f;color:#fff;border-radius:5px;text-decoration:none}
body.jscc-totp-registered #one-time-password-add{display:none}
body.jscc-totp-registered #one-time-password-panel h5{font-size:16px}
body.jscc-totp-registered #one-time-password-panel h5::after{content:'登録済みの認証情報です。右側のボタンで詳細の確認や登録解除ができます。';font-size:13px;margin-top:10px}
body.jscc-totp-registered .jscc-single-method{display:none!important}

/* Hide only technical TOTP details, preserving removal and other dialogs. */
#one-time-password-panel #one-time-password-information{display:none!important}

/* Keep the original delete handler and icon; label via presentation. */
#one-time-password-delete{width:auto!important;min-width:44px;height:auto!important;min-height:44px;padding:8px 12px;gap:8px;color:#704242;white-space:normal}
#one-time-password-delete::after{content:'認証アプリの登録を解除する';font-size:12px;line-height:1.5}
body.jscc-totp-registered #one-time-password-panel h5::after{content:'登録済みの認証情報です。機種変更などで再登録が必要な場合のみ、登録を解除してください。通常のログインでは解除しません。'}
#one-time-password-panel [data-slot="card"] .flex.items-center.justify-end{flex-wrap:wrap}
@media(max-width:600px){#one-time-password-panel [data-slot="card"] .flex.flex-row{flex-wrap:wrap;gap:12px}}

#form-reset-password-username::before{content:'ログインIDを入力してください。登録されているメールアドレスへ、パスワード再設定の案内をお送りします。';display:block;text-align:left;font-size:14px;line-height:1.9;color:#52634b;margin:8px 0 22px}
#reset-password-step1-stage #cancel-button{background:transparent;color:#3d702f;border:1px solid #ccd5c9}
#reset-password-step1-stage #reset-button{height:auto;min-height:44px;white-space:normal;padding:10px}
