/* Lightweight front CSS for auth modal + account bar pages without full catalog runtime. */

.cwoa-account-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 12px;
    border: 1px solid var(--cwoa-border, rgba(0, 0, 0, 0.12));
    border-radius: var(--cwoa-radius, 8px);
    background: var(--cwoa-card, #fff);
}

.cwoa-account-bar__metrics,
.cwoa-account-bar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cwoa-account-bar__chip {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid var(--cwoa-border, rgba(0, 0, 0, 0.12));
    background: color-mix(in srgb, var(--cwoa-card, #fff) 92%, var(--cwoa-accent, #2271b1));
}

.cwoa-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--cwoa-border, rgba(0, 0, 0, 0.15));
    background: var(--cwoa-card, #fff);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.cwoa-action--primary {
    border-color: var(--cwoa-accent, #2271b1);
    background: color-mix(in srgb, var(--cwoa-accent, #2271b1) 12%, var(--cwoa-card, #fff));
}

.cwoa-auth-modal {
    position: fixed;
    inset: 0;
    z-index: 100070;
    display: grid;
    place-items: center;
}

.cwoa-auth-modal[hidden] {
    display: none !important;
}

.cwoa-auth-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.cwoa-auth-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(560px, calc(100vw - 24px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    border-radius: 12px;
    background: var(--cwoa-card, #fff);
    border: 1px solid var(--cwoa-border, rgba(0, 0, 0, 0.15));
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}

.cwoa-auth-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--cwoa-border, rgba(0, 0, 0, 0.1));
}

.cwoa-auth-modal__title {
    margin: 0;
    font-size: 1.05rem;
}

.cwoa-auth-modal__close {
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.cwoa-auth-modal__tabs {
    display: flex;
    gap: 6px;
    padding: 10px 14px 0;
}

.cwoa-auth-modal__tab {
    border: 1px solid var(--cwoa-border, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    background: var(--cwoa-card, #fff);
    padding: 6px 10px;
    cursor: pointer;
}

.cwoa-auth-modal__tab.is-active {
    border-color: var(--cwoa-accent, #2271b1);
    background: color-mix(in srgb, var(--cwoa-accent, #2271b1) 12%, var(--cwoa-card, #fff));
}

.cwoa-auth-modal__alert {
    margin: 10px 14px 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff0f0;
    border: 1px solid #f1b8b8;
}

.cwoa-auth-modal__alert[hidden] {
    display: none !important;
}

.cwoa-auth-modal__alert--success {
    background: #eefcf1;
    border-color: #9fdcb1;
}

.cwoa-auth-modal__dev-link {
    margin: 6px 14px 10px;
    padding: 0 2px;
    font-size: 13px;
    color: #50575e;
    line-height: 1.45;
    word-break: break-all;
}

.cwoa-auth-modal__dev-link a {
    color: var(--cwoa-accent, #2271b1);
    font-weight: 600;
}

.cwoa-auth-modal__panel {
    padding: 12px 14px 14px;
}

.cwoa-auth-modal__form .form-row,
.cwoa-auth-modal__form p {
    margin: 0 0 10px;
}

.cwoa-auth-modal__textlink {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--cwoa-accent, #2271b1);
    cursor: pointer;
}