.od-phone-account {
    --od-account-green: #207a45;
    --od-account-green-dark: #155c33;
    --od-account-border: #d7dfda;
    box-sizing: border-box;
    color: #1d2a23;
    margin: 1.5rem 0;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.od-phone-account *,
.od-phone-account *::before,
.od-phone-account *::after { box-sizing: border-box; }

.od-phone-account__card {
    background: #fff;
    border: 1px solid var(--od-account-border);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(25, 52, 36, .08);
    margin: 0 auto;
    max-width: 760px;
    padding: clamp(20px, 4vw, 34px);
}

.od-phone-account[data-od-login-only] .od-phone-account__card {
    box-sizing: border-box;
    max-width: none;
    width: 100%;
}

.od-phone-account__title { margin: 0 0 8px; }
.od-phone-account__intro { color: #5d6a63; margin: 0 0 20px; }
.od-phone-account__tabs { background: #f2f6f3; border-radius: 10px; display: grid; gap: 4px; grid-template-columns: 1fr 1fr; margin: 0 0 24px; padding: 4px; }
.od-phone-account__tabs button { background: transparent; border: 0; border-radius: 7px; color: #405047; cursor: pointer; font: inherit; font-weight: 700; padding: 11px 14px; }
.od-phone-account__tabs button[aria-selected="true"] { background: #fff; box-shadow: 0 2px 8px rgba(25, 52, 36, .1); color: var(--od-account-green-dark); }
.od-phone-account__form { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.od-phone-account__form input { border: 1px solid var(--od-account-border); border-radius: 8px; flex: 1 1 180px; min-width: 0; padding: 12px 14px; }
.od-phone-account__form[data-od-account-login] { align-items: stretch; box-sizing: border-box; flex-direction: row; flex-wrap: wrap; max-width: 100%; overflow: visible; width: 100%; }
.od-phone-account__form[data-od-account-login] > .od-phone-account__phone-field { flex: 2 1 280px; min-width: min(230px, 100%); width: auto; }
.od-phone-account__form[data-od-account-login] > input[name="login_password"],
.od-phone-account__form[data-od-account-login] > .od-password-visibility { flex: 1 1 170px; min-width: min(150px, 100%); width: auto; }
.od-phone-account__field-group { display: grid; flex: 1 1 100%; gap: 6px; min-width: 0; }
.od-phone-account__field-group[hidden] { display: none; }
.od-phone-account__field-label { color: #39483f; font-size: .92rem; font-weight: 700; }
.od-phone-account__field-group > input { box-sizing: border-box; width: 100%; }
.od-phone-account[data-otp-channel="email"] [data-od-registration-email] { order: -2; }
.od-phone-account[data-otp-channel="email"] [data-od-registration-phone] { order: -1; }
.od-phone-account__password-fields { display: grid; flex: 1 1 100%; gap: 10px; min-width: 0; }
.od-phone-account__password-fields input { box-sizing: border-box; width: 100%; }
.od-phone-account__password-rules { color: #67736c; display: grid; font-size: .9rem; gap: 4px; list-style: none; margin: 0; padding: 0; }
.od-phone-account__password-rules li::before { color: #9b322b; content: "×"; display: inline-block; font-weight: 700; margin-right: 7px; width: 12px; }
.od-phone-account__password-rules li.is-valid { color: #27653f; }
.od-phone-account__password-rules li.is-valid::before { color: #207a45; content: "✓"; }
.od-phone-account__password-strength { color: #4c5a52; display: grid; font-size: .92rem; gap: 6px; }
.od-phone-account__password-strength-bar { background: #e4e9e6; border-radius: 999px; display: block; height: 7px; overflow: hidden; width: 100%; }
.od-phone-account__password-strength-bar > span { background: #9aa49e; border-radius: inherit; display: block; height: 100%; transition: width .18s ease, background-color .18s ease; width: 0; }
.od-phone-account__password-strength[data-score="0"] .od-phone-account__password-strength-bar > span,
.od-phone-account__password-strength[data-score="1"] .od-phone-account__password-strength-bar > span,
.od-phone-account__password-strength[data-score="5"] .od-phone-account__password-strength-bar > span { background: #b83232; }
.od-phone-account__password-strength[data-score="2"] .od-phone-account__password-strength-bar > span { background: #c78018; }
.od-phone-account__password-strength[data-score="3"] .od-phone-account__password-strength-bar > span { background: #3978a8; }
.od-phone-account__password-strength[data-score="4"] .od-phone-account__password-strength-bar > span { background: var(--od-account-green); }
.od-phone-account__phone-field { display: flex; flex: 1 1 290px; gap: 8px; min-width: 0; }
.od-phone-account__phone-field select { background: #fff; border: 1px solid var(--od-account-border); border-radius: 8px; flex: 0 0 112px; font: inherit; max-width: 112px; min-width: 96px; padding: 12px 10px; width: 112px; }
.od-phone-account__phone-field input { flex: 1 1 auto; width: 100%; }
.od-phone-account__phone-field input:focus,
.od-phone-account__phone-field select:focus { border-color: var(--od-account-green); box-shadow: 0 0 0 3px rgba(32, 122, 69, .16); outline: 0; }
.od-phone-account__form button { background: var(--od-account-green); border: 0; border-radius: 8px; color: #fff; cursor: pointer; padding: 12px 18px; }
.od-phone-account__form button:hover { background: var(--od-account-green-dark); }
.od-phone-account__form button:disabled { cursor: wait; opacity: .65; }
.od-phone-account__login-actions { align-items: center; display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 12px; min-width: 0; }
.od-phone-account__login-actions button { flex: 0 0 auto; white-space: nowrap; }
.od-phone-account__remember { align-items: center; cursor: pointer; display: inline-flex; flex: 0 0 auto; gap: 7px; min-height: 44px; white-space: nowrap; }
.od-phone-account__form .od-phone-account__remember input[type="checkbox"] { appearance: auto; border-radius: 3px; flex: 0 0 auto; height: 18px; margin: 0; min-width: 18px; padding: 0; width: 18px; }
.od-phone-account__terms { align-items: flex-start; box-sizing: border-box; cursor: pointer; display: flex; flex: 0 0 auto; gap: 10px; line-height: 1.5; margin: 4px 0; min-width: 0; width: 100%; }
.od-phone-account__form .od-phone-account__terms input[type="checkbox"] { appearance: auto; border-radius: 3px; box-sizing: border-box; flex: 0 0 18px; height: 18px; margin: .2em 0 0; min-height: 18px; min-width: 18px; padding: 0; width: 18px; }
.od-phone-account__terms span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.od-phone-account__terms a { color: var(--od-account-green-dark); text-decoration: underline; }
.od-phone-account__terms input:focus-visible { outline: 2px solid var(--od-account-green); outline-offset: 3px; }
.od-phone-account__terms input[aria-invalid="true"] { outline: 2px solid #9f1c1c; outline-offset: 3px; }
.od-phone-account__terms[hidden],
.od-phone-account__terms-confirmed[hidden] { display: none !important; }
.od-phone-account__terms-confirmed { color: var(--od-account-green-dark); font-size: .9em; line-height: 1.5; margin: 4px 0; }
.od-phone-account__lost-password { align-items: center; color: var(--od-account-green); display: inline-flex; font-weight: 600; margin: 0; min-height: 44px; text-decoration: none; white-space: nowrap; }
.od-phone-account__lost-password:hover { color: var(--od-account-green-dark); text-decoration: underline; }
.od-phone-account__verify.is-hidden { display: none; }
.od-phone-account__notice { border-radius: 8px; margin: 12px 0; padding: 11px 13px; }
.od-phone-account__notice.is-success { background: #edf8f1; color: #155c33; }
.od-phone-account__notice.is-error { background: #fff0f0; color: #9f1c1c; }
.od-phone-account__notice.is-info { background: #eef6fb; color: #20506c; }
.od-phone-account__registration-support[hidden],
.od-phone-account__registration-support a[hidden] { display: none !important; }
.od-phone-account__registration-support p { margin: 0 0 12px; }
.od-phone-account__registration-support code { overflow-wrap: anywhere; user-select: all; }
.od-phone-account__registration-support .button { max-width: 100%; white-space: normal; }
.od-phone-account__notice.is-warning { background: #fff8e5; color: #6e4d00; }
.od-phone-account__recovery-prompt p,
.od-phone-account__recovery-reminder p,
.od-phone-account__reset-support p { margin: 0 0 12px; }
.od-phone-account__recovery-prompt p:last-child,
.od-phone-account__recovery-reminder p:last-child,
.od-phone-account__reset-support p:last-child { margin-bottom: 0; }
.od-phone-account__reset-support { margin-top: 12px; }
.od-phone-account__reset-support[hidden] { display: none; }
.od-phone-account__reset-support .button { background: var(--od-account-green); border-color: var(--od-account-green); border-radius: 8px; color: #fff; display: inline-block; padding: 10px 16px; text-decoration: none; }
.od-phone-account__reset-support .button:hover { background: var(--od-account-green-dark); border-color: var(--od-account-green-dark); color: #fff; }
.od-phone-account__support-code[hidden] { display: none; }
.od-phone-account__support-code p { margin: 0 0 9px; }
.od-phone-account__support-code p:last-child { margin-bottom: 0; }
.od-phone-account__support-code code { background: #fff; border: 2px dashed #b88700; border-radius: 7px; color: #1d2327; display: inline-block; font-size: 1.15rem; font-weight: 800; letter-spacing: .08em; padding: 8px 11px; user-select: all; }
.od-phone-account__support-code-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 10px 0; }
.od-phone-account__support-code-actions .button { border-radius: 8px; cursor: pointer; padding: 9px 14px; }
.od-phone-account__support-code-actions .button:disabled { cursor: not-allowed; opacity: .6; }
.od-phone-account__prompt-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.od-phone-account__prompt-actions .button,
.od-phone-account__recovery-reminder .button { border-radius: 8px; display: inline-block; padding: 10px 16px; text-decoration: none; }
.od-phone-account__prompt-actions a.button,
.od-phone-account__recovery-reminder a.button { background: var(--od-account-green); border-color: var(--od-account-green); color: #fff; }
.od-phone-account__prompt-actions button.button { background: #fff; border: 1px solid #a9bbc5; color: #274a5e; cursor: pointer; }
.od-phone-account.has-recovery-prompt .od-phone-account__tabs,
.od-phone-account.has-recovery-prompt [data-od-account-panel] { display: none; }

@media (max-width: 900px) {
	.od-phone-account__form[data-od-account-login] > .od-phone-account__phone-field { flex-basis: 100%; min-width: 0; width: 100%; }
	.od-phone-account__form[data-od-account-login] > input[name="login_password"],
	.od-phone-account__form[data-od-account-login] > .od-password-visibility { flex: 1 1 230px; min-width: 0; }
}

@media (max-width: 620px) {
	.od-phone-account__form:not([data-od-account-login]) { flex-direction: column; }
	.od-phone-account__phone-field { flex-basis: auto; min-width: 0; width: 100%; }
	.od-phone-account__form button { width: 100%; }
	.od-phone-account__form[data-od-account-login] { flex-direction: column; flex-wrap: nowrap; overflow: visible; }
	.od-phone-account__form[data-od-account-login] > .od-phone-account__phone-field { flex: 0 0 auto; width: 100%; }
	.od-phone-account__form[data-od-account-login] > input[name="login_password"],
	.od-phone-account__form[data-od-account-login] > .od-password-visibility { flex: 0 0 auto; min-width: 0; width: 100%; }
	.od-phone-account__form[data-od-account-login] .od-phone-account__login-actions { align-items: stretch; flex: 0 0 auto; flex-direction: column; gap: 8px; width: 100%; }
	.od-phone-account__form[data-od-account-login] .od-phone-account__login-actions button { flex: 0 0 auto; width: 100%; }
	.od-phone-account__form[data-od-account-login] .od-phone-account__remember { justify-content: flex-start; width: 100%; }
	.od-phone-account__form[data-od-account-login] .od-phone-account__lost-password { justify-content: center; text-align: center; white-space: normal; width: 100%; }
	.od-phone-account__prompt-actions { flex-direction: column; }
	.od-phone-account__prompt-actions .button { text-align: center; width: 100%; }
}