.wp-account-center {
    display: grid;
    gap: 1.25rem;
    max-width: 62rem;
    padding: 1.25rem;
}

.wp-account-card {
    border: 1px solid var(--color-border, #d7dce5);
    border-radius: 1rem;
    background: var(--color-main, #fff);
    padding: 1.25rem;
    box-shadow: 0 0.35rem 1.4rem rgba(20, 30, 55, 0.06);
}

.wp-account-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.wp-account-card h2 {
    margin: 0 0 0.35rem;
}

.wp-account-card-heading p,
.wp-account-current {
    color: var(--color-font-secondary, #5d6678);
}

.wp-account-card form {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
}

.wp-account-card input[type="email"],
.wp-account-card input[type="password"],
.wp-account-card input[type="text"] {
    width: 100%;
    min-height: 2.75rem;
}

.wp-account-card button {
    justify-self: start;
    margin-top: 0.35rem;
}

.wp-account-badge {
    min-width: 2rem;
    min-height: 2rem;
    border-radius: 999px;
    background: rgba(79, 99, 217, 0.12);
    color: #3347bd;
    display: inline-grid;
    place-items: center;
    font-weight: 700;
}

.wp-account-danger {
    border-color: rgba(190, 42, 42, 0.35);
}

.wp-account-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.wp-account-countdown {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.7rem;
    background: #fff3cd;
    color: #664d03;
    font-weight: 600;
}

.wp-account-status {
    min-height: 1.5rem;
    margin: 0;
}

.wp-account-status.is-error { color: #b42318; }
.wp-account-status.is-success { color: #067647; }
.wp-account-status.is-notice { color: #475467; }

.wp-account-help {
    color: var(--color-font-secondary, #5d6678);
    line-height: 1.45;
}

.wp-account-warning {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-left: 0.25rem solid #b54708;
    border-radius: 0.35rem;
    background: #fffaeb;
    color: #7a2e0e;
}

.wp-passkey-list {
    display: grid;
    gap: 0.65rem;
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

.wp-passkey-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border, #d7dce5);
    border-radius: 0.7rem;
}

.wp-passkey-item > div {
    display: grid;
    gap: 0.2rem;
}

.wp-passkey-item span {
    color: var(--color-font-secondary, #5d6678);
    font-size: 0.9rem;
}

.wp-account-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(20, 27, 45, 0.62);
}

.wp-account-modal-card {
    width: min(100%, 34rem);
    border-radius: 1rem;
    background: #fff;
    color: #1d2939;
    padding: 1.5rem;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.28);
}

.wp-account-modal-card h2 { margin-top: 0; }

.wp-recreation-form {
    display: grid;
    gap: 0.7rem;
}

.wp-stepup-form {
    display: grid;
    gap: 0.7rem;
}

.wp-recreation-form input[type="password"] {
    width: 100%;
    min-height: 2.75rem;
}

.wp-account-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

@media (max-width: 600px) {
    .wp-account-center { padding: 0.75rem; }
    .wp-account-card-heading { display: block; }
    .wp-account-badge { margin-top: 0.5rem; }
    .wp-passkey-item { align-items: stretch; flex-direction: column; }
    .wp-passkey-item button { width: 100%; }
    .wp-account-modal-actions { flex-direction: column-reverse; }
    .wp-account-modal-actions button { width: 100%; }
}