.rh-account-layout {
    min-height: 100dvh;
    padding: var(--rh-space-4, 1rem);
    color: var(--rh-text);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--rh-primary) 14%, transparent), transparent 30rem),
        var(--rh-bg);
}

.rh-account-header,
.rh-account-footer {
    width: min(100%, 72rem);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.rh-account-header {
    min-height: 3.5rem;
}

.rh-account-brand {
    color: var(--rh-text);
    font: 700 1.35rem/1 var(--rh-font-display);
    text-decoration: none;
}

.rh-account-main {
    width: min(100%, 34rem);
    margin: clamp(2rem, 7vh, 5rem) auto;
}

.rh-account-card,
.rh-account-status {
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid var(--rh-border);
    border-radius: var(--rh-radius-card);
    background: var(--rh-surface);
    box-shadow: var(--rh-shadow-1);
}

.rh-account-card h1,
.rh-account-status h1 {
    margin-block: .25rem .75rem;
    font-size: clamp(1.8rem, 7vw, 2.6rem);
}

.rh-account-lead {
    color: var(--rh-text-muted);
    line-height: 1.6;
}

.rh-account-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.rh-account-field {
    display: grid;
    gap: .45rem;
}

.rh-account-field label,
.rh-account-check label {
    font-weight: 700;
}

.rh-account-field input,
.rh-account-field select {
    width: 100%;
    min-height: 3rem;
    padding: .75rem .85rem;
    border: 1px solid var(--rh-border);
    border-radius: var(--rh-radius-control);
    color: var(--rh-text);
    background: var(--rh-surface-elevated);
    font: inherit;
    font-size: max(1rem, 16px);
}

.rh-account-field input:focus-visible,
.rh-account-field select:focus-visible,
.rh-account-form button:focus-visible,
.rh-account-form a:focus-visible {
    outline: 3px solid var(--rh-focus-ring);
    outline-offset: 2px;
}

.rh-account-password {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem;
}

.rh-account-password button {
    min-height: 3rem;
    padding-inline: .8rem;
    border: 1px solid var(--rh-border);
    border-radius: var(--rh-radius-control);
    color: var(--rh-text);
    background: var(--rh-surface-elevated);
    font-weight: 700;
}

.rh-account-check {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    align-items: start;
    gap: .65rem;
    line-height: 1.45;
}

.rh-account-check input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .15rem;
}

.rh-account-primary {
    min-height: 3rem;
    border: 0;
    border-radius: var(--rh-radius-control);
    color: var(--rh-primary-contrast, #fff);
    background: var(--rh-primary);
    font: 800 1rem/1 var(--rh-font-ui);
    cursor: pointer;
}

.rh-account-primary:hover {
    background: var(--rh-primary-hover);
}

.rh-account-primary:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.rh-account-links,
.rh-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin-top: 1.25rem;
}

.rh-account-links a,
.rh-account-actions a,
.rh-account-footer a {
    color: var(--rh-primary);
    font-weight: 700;
}

.rh-account-message {
    margin-block: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--rh-success);
    border-radius: var(--rh-radius-control);
    background: color-mix(in srgb, var(--rh-success) 12%, var(--rh-surface));
}

.rh-account-message--error {
    border-color: var(--rh-error);
    background: color-mix(in srgb, var(--rh-error) 12%, var(--rh-surface));
}

.rh-account-validation {
    color: var(--rh-error);
    font-size: .9rem;
}

.rh-account-footer {
    justify-content: center;
    padding-block: 1rem calc(1rem + env(safe-area-inset-bottom));
    color: var(--rh-text-muted);
}

.rh-account-session-list {
    display: grid;
    gap: .75rem;
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}

.rh-account-details {
    display: grid;
    gap: .75rem;
    margin-block: 1.25rem;
}

.rh-account-details div {
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) 2fr;
    gap: .75rem;
    padding-block: .65rem;
    border-bottom: 1px solid var(--rh-border);
}

.rh-account-details dt {
    color: var(--rh-text-muted);
    font-weight: 700;
}

.rh-account-details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.rh-account-manage-grid {
    display: grid;
    gap: .75rem;
}

.rh-account-manage-grid > a {
    display: grid;
    gap: .25rem;
    padding: 1rem;
    border: 1px solid var(--rh-border);
    border-radius: var(--rh-radius-control);
    color: var(--rh-text);
    background: var(--rh-surface-elevated);
    text-decoration: none;
}

.rh-account-manage-grid > a:hover {
    border-color: var(--rh-primary);
}

.rh-account-manage-grid span {
    color: var(--rh-text-muted);
}

.rh-account-legal {
    width: min(100%, 68rem);
}

.rh-account-legal h2 {
    margin: 1.7rem 0 .45rem;
    font-size: 1.15rem;
}

.rh-account-legal p {
    max-width: 72ch;
    line-height: 1.65;
}

.rh-account-session {
    padding: 1rem;
    border: 1px solid var(--rh-border);
    border-radius: var(--rh-radius-control);
    background: var(--rh-surface-elevated);
}

.rh-account-import {
    display: grid;
    gap: .65rem;
    margin-block: 1.25rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--rh-primary) 48%, var(--rh-border));
    border-radius: var(--rh-radius-control);
    background: color-mix(in srgb, var(--rh-primary) 8%, var(--rh-surface));
}

.rh-account-import[hidden] {
    display: none;
}

.rh-account-import h2,
.rh-account-import p {
    margin: 0;
}

.rh-home-progress-import {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: min(100%, 72rem);
    margin: 0 auto;
}

.rh-home-progress-import > p {
    grid-column: 1 / -1;
}

.rh-public-landing {
    display: grid;
    gap: clamp(1.25rem, 4vw, 2.5rem);
    width: min(100% - 1.5rem, 72rem);
    margin-inline: auto;
    padding-block: clamp(1.25rem, 5vw, 3rem) calc(5rem + env(safe-area-inset-bottom));
}

.rh-public-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(16rem, .75fr);
    gap: clamp(1.25rem, 5vw, 4rem);
    align-items: center;
    padding: clamp(1.5rem, 5vw, 3.5rem);
    border: 1px solid var(--rh-border);
    border-radius: var(--rh-radius-card);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--rh-primary) 9%, var(--rh-surface)), var(--rh-surface));
    box-shadow: var(--rh-shadow-1);
}

.rh-public-hero h1 {
    max-width: 16ch;
    margin: .3rem 0 1rem;
    font-size: clamp(2.2rem, 6vw, 4.6rem);
    line-height: .98;
}

.rh-public-counts {
    display: grid;
    gap: .65rem;
}

.rh-public-counts span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--rh-border);
    border-radius: var(--rh-radius-control);
    background: var(--rh-surface-elevated);
}

.rh-public-counts strong {
    color: var(--rh-primary);
    font-size: 1.35rem;
}

.rh-public-module-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.rh-public-module-strip > div {
    min-width: 0;
    padding: .9rem 1rem;
    border: 1px solid var(--rh-border);
    border-radius: var(--rh-radius-control);
    background: var(--rh-surface-elevated);
}

.rh-public-module-strip span,
.rh-public-module-strip strong {
    display: block;
}

.rh-public-module-strip span {
    margin-bottom: .2rem;
    color: var(--rh-text-muted);
    font-size: .8rem;
    font-weight: 700;
}

.rh-public-module-strip strong {
    overflow-wrap: break-word;
}

.rh-public-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1rem;
}

.rh-public-preview-grid .rh-home-section__header {
    grid-column: 1 / -1;
}

.rh-public-preview {
    min-width: 0;
    min-height: 9rem;
    padding: 1.15rem;
    border: 1px solid var(--rh-border);
    border-radius: var(--rh-radius-card);
    color: var(--rh-text);
    background: var(--rh-surface);
    text-align: left;
    cursor: pointer;
}

.rh-public-preview:hover {
    border-color: color-mix(in srgb, var(--rh-primary) 55%, var(--rh-border));
    background: color-mix(in srgb, var(--rh-primary) 5%, var(--rh-surface));
}

.rh-public-preview:focus-visible {
    outline: 3px solid var(--rh-focus);
    outline-offset: 3px;
}

.rh-public-preview > span,
.rh-public-preview > strong {
    display: block;
}

.rh-public-preview > span:first-child {
    color: var(--rh-text-muted);
    font-size: .85rem;
    font-weight: 700;
}

.rh-public-preview > strong {
    margin-top: .35rem;
    font-size: 1.15rem;
}

.rh-public-preview__skeleton {
    height: 3.5rem;
    margin-top: 1.25rem;
    border-radius: .5rem;
    background:
        repeating-linear-gradient(
            180deg,
            color-mix(in srgb, var(--rh-text-muted) 16%, transparent) 0 .45rem,
            transparent .45rem .85rem);
    filter: blur(2px);
}

.rh-public-dialog {
    width: min(34rem, calc(100% - 1.5rem));
    padding: 0;
    border: 1px solid var(--rh-border);
    border-radius: var(--rh-radius-card);
    color: var(--rh-text);
    background: var(--rh-surface);
    box-shadow: var(--rh-shadow-2);
}

.rh-public-dialog::backdrop {
    background: rgb(6 18 34 / .72);
    backdrop-filter: blur(4px);
}

.rh-public-dialog > div {
    padding: clamp(1.25rem, 5vw, 2rem);
}

@media (max-width: 48rem) {
    .rh-public-hero {
        grid-template-columns: 1fr;
    }

    .rh-public-module-strip {
        grid-template-columns: 1fr;
    }

    .rh-home-progress-import {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 30rem) {
    .rh-account-layout {
        padding-inline: .75rem;
    }

    .rh-account-main {
        margin-block: 1.25rem 2rem;
    }

    .rh-account-password {
        grid-template-columns: 1fr;
    }
}