.auth-shell {
    --rg-surface-container: var(--rg-surface-workspace-panel);
    --rg-surface-container-nested: var(--rg-surface-workspace-canvas);
    --rg-surface-raised: var(--rg-surface-workspace-canvas);
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--rg-surface-workspace-canvas);
}

.auth-shell-content {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--rg-surface-workspace-canvas);
}

.auth-shell-content .mud-paper {
    border-radius: var(--rg-shape-card);
    background: var(--rg-surface-container);
    box-shadow: var(--rg-shadow-workspace-panel);
}

.auth-shell-content .mud-paper .mud-paper {
    background: var(--rg-surface-container-nested);
    box-shadow: none;
}

.register-page {
    padding-top: var(--rg-space-8);
    padding-bottom: var(--rg-space-12);
}

.register-surface {
    max-width: 680px;
    padding: var(--rg-space-8);
    border-radius: var(--rg-shape-card);
}

.register-logo {
    width: 88px;
    height: auto;
}

.register-progress {
    display: grid;
    gap: var(--rg-space-2);
}

.register-type-group {
    width: 100%;
}

.register-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--rg-space-2);
    min-height: 132px;
    padding: var(--rg-space-5);
    cursor: pointer;
    border-radius: var(--rg-shape-card);
    transition:
        border-color var(--m3-motion-duration-short) var(--m3-motion-easing-effects),
        background-color var(--m3-motion-duration-short) var(--m3-motion-easing-effects);
}

.register-card .mud-radio {
    position: absolute;
    top: var(--rg-space-2);
    right: var(--rg-space-2);
}

.register-card:hover {
    border-color: var(--mud-palette-primary);
    background-color: var(--rg-state-hover);
}

.register-card.selected {
    border-color: var(--mud-palette-primary);
    background-color: var(--rg-state-selected);
}

.register-card.selected .mud-icon-root {
    color: var(--mud-palette-primary);
}

.register-card:has(.mud-radio-input:focus-visible) {
    outline: var(--rg-focus-ring);
    outline-offset: var(--rg-focus-ring-offset);
}

.register-invoice-help {
    margin-top: calc(var(--rg-space-2) * -1);
    padding-inline-start: var(--rg-space-1);
}

.registration-status-page {
    padding-top: var(--rg-space-8);
    padding-bottom: var(--rg-space-12);
}

.registration-status-card {
    max-width: 520px;
    padding: var(--rg-space-8);
    border-radius: var(--rg-shape-card);
}

.registration-status-logo {
    width: 88px;
    height: auto;
}

.account-workspace {
    width: 100%;
}

.account-identity-card,
.account-settings-card,
.account-subscription-card,
.account-support-card,
.account-danger-card {
    border-radius: var(--rg-shape-card);
}

.account-loading {
    display: grid;
    gap: var(--rg-space-4);
}

.account-loading-identity-copy,
.account-loading-plan,
.account-loading-description {
    max-width: 100%;
}

.account-loading-tabs {
    display: flex;
    gap: var(--rg-space-5);
    min-height: var(--rg-control-height-lg);
    padding: 0 var(--rg-space-4);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.account-loading-tab {
    display: flex;
    align-items: center;
    gap: var(--rg-space-2);
}

.account-loading-field,
.account-loading-action {
    border-radius: var(--rg-shape-control);
}

.account-identity-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--rg-space-5);
    padding: var(--rg-space-6);
    background: var(--rg-surface-container);
}

.account-identity-copy {
    min-width: 0;
}

.account-plan-summary {
    display: grid;
    justify-items: end;
    min-width: 150px;
}

.account-tabs .account-tab-panels {
    padding-top: 0;
}

.account-tabs .mud-tabs-tabbar {
    width: calc(100% - (2 * var(--rg-space-3)));
    margin-inline: var(--rg-space-3);
    color: var(--mud-palette-text-secondary);
    background: transparent;
}

.account-tabs .mud-tab {
    color: var(--mud-palette-text-secondary);
}

.account-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary);
}

.account-tabs .mud-tab-slider {
    background: var(--mud-palette-primary);
}

.account-settings-card,
.account-subscription-card,
.account-danger-card {
    padding: var(--rg-space-6);
    background: var(--rg-surface-container);
}

.account-save-card,
.account-support-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) auto;
    align-items: center;
    gap: var(--rg-space-4);
}

.account-confirm-password {
    width: 100%;
}

.account-subscription-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--rg-space-5);
    align-items: start;
}

.account-subscription-meta,
.account-subscription-pricing {
    display: grid;
    grid-column: 1 / -1;
    gap: var(--rg-space-3);
}

.account-subscription-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-subscription-pricing {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-subscription-meta > div,
.account-subscription-pricing > div {
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-1);
    padding: var(--rg-space-4);
    border-radius: var(--rg-shape-card);
    background: var(--rg-surface-container-nested);
}

.account-subscription-meta span,
.account-subscription-pricing span {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

.account-subscription-meta strong,
.account-subscription-pricing strong {
    font-size: 0.9375rem;
    font-weight: var(--rg-font-weight-medium);
}

.account-subscription-pricing .account-subscription-total {
    background: var(--rg-surface-raised);
}

.account-subscription-total strong {
    font-weight: var(--rg-font-weight-bold);
}

.account-usage-row {
    display: grid;
    gap: var(--rg-space-2);
}

.account-support-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: var(--rg-space-5);
    background: var(--rg-surface-container);
}

.account-support-card > .mud-icon-root {
    font-size: 2rem;
}

.account-danger-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rg-space-4);
    background: var(--rg-status-error-container);
}

@media (max-width: 599.98px) {
    .register-page {
        padding-top: var(--rg-space-4);
        padding-bottom: var(--rg-space-8);
    }

    .register-surface {
        padding: var(--rg-space-6);
    }

    .register-logo {
        width: 72px;
    }

    .register-card {
        min-height: 104px;
    }

    .register-actions .mud-button-root {
        min-width: 112px;
    }

    .registration-status-page {
        padding-top: var(--rg-space-4);
        padding-bottom: var(--rg-space-8);
    }

    .registration-status-card {
        padding: var(--rg-space-6);
    }

    .registration-status-logo {
        width: 72px;
    }

    .account-identity-card,
    .account-save-card,
    .account-support-card,
    .account-subscription-card {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .account-plan-summary {
        justify-items: start;
    }

    .account-subscription-meta,
    .account-subscription-pricing {
        grid-template-columns: 1fr;
    }

    .account-loading-plan {
        display: none;
    }

    .account-loading-tabs {
        overflow: hidden;
    }

    .account-loading-tab {
        min-width: 118px;
    }
}

/* Device claim workflow */
.claim-page {
    width: 100%;
}

.claim-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.claim-header-icon,
.claim-device-icon,
.claim-state-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.claim-header-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 18px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.claim-header-icon .mud-icon-root {
    font-size: 34px;
}

.claim-title {
    font-weight: 800;
    letter-spacing: -0.035em;
}

.claim-description {
    max-width: 520px;
    margin-top: 8px;
}

.claim-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: relative;
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
}

.claim-steps::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 16.66%;
    right: 16.66%;
    height: 1px;
    background: var(--mud-palette-lines-default);
}

.claim-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    color: var(--mud-palette-text-secondary);
}

.claim-step-number {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 50%;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    font-weight: 700;
    z-index: 1;
}

.claim-step.is-active,
.claim-step.is-complete {
    color: var(--mud-palette-text-primary);
}

.claim-step.is-active .claim-step-number {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.claim-step.is-complete .claim-step-number {
    border-color: var(--mud-palette-success);
    background: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
}

.claim-panel {
    padding: 28px;
    border-radius: var(--rg-shape-card);
}

.claim-section-title,
.claim-device-name {
    font-weight: 750;
}

.claim-device-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-background-gray);
}

.claim-device-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.claim-assurance {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--rg-status-success-container);
}

.claim-assurance .mud-icon-root {
    margin-top: 1px;
}

.claim-actions {
    flex-wrap: wrap;
    align-items: center;
}

.claim-state-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-height: 320px;
    justify-content: center;
    text-align: center;
}

.claim-state-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.claim-state-icon .mud-icon-root {
    font-size: 36px;
}

.claim-state-icon.is-success {
    color: var(--rg-status-success-text);
    background: var(--rg-status-success-container);
}

.claim-state-icon.is-warning {
    color: var(--rg-status-warning-text);
    background: var(--rg-status-warning-container);
}

.claim-state-copy {
    max-width: 450px;
}

.claim-address-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: min(100%, 340px);
    padding: 12px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    text-align: left;
}

.claim-address {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.claim-state-actions {
    justify-content: center;
}

@media (max-width: 599.98px) {
    .claim-page {
        padding-left: 0;
        padding-right: 0;
    }

    .claim-title {
        font-size: 2rem;
    }

    .claim-step .mud-typography {
        font-size: 0.6875rem;
    }

    .claim-panel {
        padding: 20px;
        border-radius: var(--rg-shape-card);
    }

    .claim-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .claim-actions .mud-button-root {
        width: 100%;
    }
}