/* Member area presentation. Legacy authentication/checkout styles remain in
   custom-account.css; redesigned pages opt in explicitly with this class. */
html body #tm-content .riko-member-modern {
    --member-ink: var(--riko-ink);
    --member-muted: var(--riko-muted);
    --member-teal: var(--riko-action);
    --member-line: var(--riko-line);
    color: var(--member-ink);
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    font-size: 16px;
    line-height: 1.55;
}
html body #tm-content .riko-member-modern::before,
html body #tm-content .riko-member-modern::after { display: none; }
/* Account and invoice pages align with the native member content rail. */
html body #tm-content > .riko-billing-site:has(> .riko-member-nav) {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}
/* The standalone Creator host keeps its content width. Its shared member band
   follows the native site rail (1520 shell, content padding and grid offset). */
html body #tm-content .creator-shell .creator-shell-member-nav {
    box-sizing: border-box;
    width: min(1520px, calc(100% + 16px));
    margin: 16px 0 0;
    margin-inline: calc((100% - min(1520px, calc(100% + 16px))) / 2);
    padding-inline: 25px 30px;
    min-width: 0;
}
@media (max-width: 900px) {
    html body #tm-content .creator-shell .creator-shell-member-nav { width: 100%; margin-inline: 0; padding-inline: 17px 22px; }
}
@media (max-width: 899px) {
    html body #tm-content .creator-shell .creator-shell-member-nav { width: calc(100% - 4px); margin-inline: 2px; padding-inline: 15px 20px; }
}
@media (max-width: 700px) {
    html body #tm-content .creator-shell .creator-shell-member-nav { width: calc(100% + 12px); margin-inline: -6px; }
}
html body #tm-content .riko-member-nav.riko-member-nav--compact {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    line-height: 1.5;
    margin: 0 0 24px;
    padding: 5px;
    background: var(--riko-surface-soft);
    border: 1px solid var(--riko-line);
    border-radius: 12px;
    box-shadow: none;
}
html body #tm-content .riko-member-nav--compact .riko-member-nav__rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 0;
    gap: 4px;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
html body #tm-content .riko-member-nav--compact .riko-member-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    height: auto;
    white-space: normal;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--riko-ink);
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transform: none;
}
html body #tm-content .riko-member-nav--compact .riko-member-nav__link.is-active {
    border-color: var(--riko-action-line);
    color: var(--riko-link);
    background: var(--riko-surface);
    box-shadow: none;
}
html body #tm-content .riko-member-nav--compact i { display: none; }
html body #tm-content .riko-member-nav--compact .riko-member-nav__link:hover { background: var(--riko-action-soft); }
html body #tm-content .riko-member-nav--compact .riko-member-nav__link strong,
html body #tm-content .riko-member-nav--compact .riko-member-nav__badge { font-size: 12px; font-weight: 600; }
html body #tm-content .riko-member-nav--compact .riko-member-nav__mobile { display: none; }
html body #tm-content .riko-member-nav--compact .riko-member-nav__logout { margin: 0 0 0 auto; padding: 0 0 0 14px; border: 0; border-left: 1px solid var(--riko-line); background: none; box-shadow: none; }
html body #tm-content .riko-member-nav--compact .riko-member-nav__logout button { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 46px; box-sizing: border-box; padding: 10px 8px; border: 0; border-radius: 7px; color: var(--riko-danger); background: transparent; box-shadow: none; font: inherit; font-size: 14px; line-height: 1.4; cursor: pointer; }
/* Keep the semantic text and surface paired when generic submit states apply. */
html body #tm-content .riko-member-nav--compact .riko-member-nav__logout button:is(:hover, :focus, :active) {
    color: var(--riko-danger);
    background: var(--riko-danger-surface);
    border: 0;
    box-shadow: none;
}
html body #tm-content .riko-member-nav--compact .riko-member-nav__logout button:focus-visible { outline: 3px solid var(--riko-focus) !important; outline-offset: 3px; }
html body #tm-content .riko-member-modern .riko-member-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 26px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
html body #tm-content .riko-member-modern .riko-member-heading h1 {
    margin: 0;
    color: var(--riko-ink);
    font-size: clamp(27px, 2.5vw, 34px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
    text-shadow: none;
}
/* Overview: a clear starting point, followed by real library activity. */
html body #tm-content .riko-member-modern .riko-member-heading.riko-overview-heading {
    align-items: center;
    margin-bottom: 24px;
    padding: 28px 30px;
    border: 1px solid var(--riko-brand-deep);
    border-radius: 14px;
    color: var(--riko-on-brand);
    background: var(--riko-brand-deep);
}
html body #tm-content .riko-overview-heading__copy { min-width: 0; max-width: 720px; }
html body #tm-content .riko-overview-heading .riko-overview-eyebrow { margin: 0 0 7px; color: var(--riko-on-brand-muted); font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
/* The shared content H1 rule is important; this title belongs to a dark brand panel. */
html body #tm-content .riko-member-modern .riko-overview-heading h1 { color: var(--riko-on-brand) !important; font-family: inherit; font-size: clamp(25px, 2.3vw, 32px) !important; font-weight: 600 !important; line-height: 1.25; letter-spacing: -.02em; overflow-wrap: anywhere; }
html body #tm-content .riko-overview-heading .riko-overview-intro { margin: 10px 0 0; color: var(--riko-on-brand-muted); font-size: 15px; line-height: 1.6; }
html body #tm-content .riko-overview-heading .riko-member-primary { flex: 0 0 auto; gap: 14px; max-width: 240px; }
html body #tm-content .riko-overview-heading .riko-member-primary:focus-visible { outline-color: var(--riko-focus-on-brand) !important; }
html body #tm-content .riko-member-modern h2 { color: var(--riko-ink); font-size: 21px; line-height: 1.35; font-weight: 600; }
html body #tm-content .riko-member-modern .riko-member-muted { color: var(--riko-muted); font-size: 14px; margin: 5px 0 0; }
html body #tm-content .riko-member-modern .riko-member-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 16px;
    border: 1px solid var(--riko-action);
    border-radius: 7px;
    background: var(--riko-action);
    color: var(--riko-action-contrast);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}
html body #tm-content .riko-member-modern .riko-member-text-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 7px 0;
    color: var(--riko-link);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    background: transparent;
    border: 0;
    box-shadow: none;
}
html body #tm-content .riko-member-modern a:focus-visible,
html body #tm-content .riko-member-modern button:focus-visible,
html body #tm-content .riko-member-nav--compact summary:focus-visible { outline: 3px solid var(--riko-focus) !important; outline-offset: 3px; }
html body #tm-content .riko-member-modern .riko-overview-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 24px; }
html body #tm-content .riko-member-modern .riko-overview-library { min-width: 0; padding: 24px; border: 1px solid var(--riko-line); border-radius: 14px; background: var(--riko-surface); }
html body #tm-content .riko-member-modern .riko-overview-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
html body #tm-content .riko-member-modern .riko-overview-section-head h2 { margin: 0; }
html body #tm-content .riko-member-modern .riko-overview-count { flex-shrink: 0; padding: 5px 10px; border: 1px solid var(--riko-line); border-radius: 6px; color: var(--riko-muted); background: var(--riko-surface-soft); font-size: 13px; white-space: nowrap; }
html body #tm-content .riko-member-modern .riko-member-notice { display: block; padding: 12px 15px; background: var(--riko-surface-soft); font-size: 15px; margin-bottom: 15px; }
html body #tm-content .riko-member-modern .riko-member-notice--attention { border-left: 3px solid var(--riko-warning); background: color-mix(in srgb, var(--riko-warning) 9%, var(--riko-surface)); color: var(--riko-warning); }
html body #tm-content .riko-member-modern .riko-overview-items { list-style: none; margin: 0; padding: 0; }
html body #tm-content .riko-member-modern .riko-overview-items li { margin: 0; padding: 0; border-bottom: 1px solid var(--riko-line); }
html body #tm-content .riko-member-modern .riko-overview-items li:last-child { border-bottom: 0; }
html body #tm-content .riko-member-modern .riko-overview-items a { display: flex; align-items: center; gap: 18px; min-width: 0; padding: 16px 0; color: var(--riko-ink); text-decoration: none; }
html body #tm-content .riko-member-modern .riko-overview-items a:hover strong { color: var(--riko-link); text-decoration: underline; text-underline-offset: 3px; }
html body #tm-content .riko-member-modern .riko-overview-items img,
html body #tm-content .riko-member-modern .riko-overview-item-placeholder { width: 144px; height: 92px; object-fit: cover; border: 1px solid var(--riko-line); border-radius: 8px; flex-shrink: 0; background: var(--riko-surface-soft); box-sizing: border-box; }
html body #tm-content .riko-member-modern .riko-overview-item-copy { flex: 1 1 auto; min-width: 0; }
html body #tm-content .riko-member-modern .riko-overview-items strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
html body #tm-content .riko-member-modern .riko-overview-items small { display: block; color: var(--riko-muted); font-size: 13px; line-height: 1.5; margin-top: 7px; }
html body #tm-content .riko-member-modern .riko-overview-item-arrow { flex: 0 0 auto; color: var(--riko-link); font-size: 20px; }
html body #tm-content .riko-member-modern .riko-overview-preview-note { margin: 10px 0 0; padding-top: 14px; border-top: 1px solid var(--riko-line); color: var(--riko-muted); font-size: 13px; }
html body #tm-content .riko-member-modern .riko-overview-summary { min-width: 0; border: 1px solid var(--riko-line); border-radius: 14px; padding: 0 22px; background: var(--riko-surface-soft); }
html body #tm-content .riko-member-modern .riko-overview-summary-block { padding: 22px 0 16px; margin: 0; border-bottom: 1px solid var(--riko-line); }
html body #tm-content .riko-member-modern .riko-overview-account-block { padding: 22px 0 16px; }
html body #tm-content .riko-member-modern .riko-overview-summary h2 { font-size: 17px; margin: 0 0 8px; }
html body #tm-content .riko-member-modern .riko-overview-summary p { font-size: 14px; line-height: 1.6; margin: 0 0 6px; color: var(--riko-muted); }
html body #tm-content .riko-member-modern .riko-overview-summary .riko-member-text-action { justify-content: space-between; width: 100%; padding: 8px 0; text-decoration: none; }
html body #tm-content .riko-member-modern .riko-overview-summary .riko-member-text-action:hover { text-decoration: underline; text-underline-offset: 3px; }
html body #tm-content .riko-member-modern .riko-overview-empty { padding: 30px 0 20px; border-top: 1px solid var(--riko-line); }
html body #tm-content .riko-member-modern .riko-overview-empty h3 { font-size: 19px; margin-top: 0; }
html body #tm-content .riko-member-modern .riko-overview-empty p { color: var(--riko-muted); }
/* Profile keeps the native form, field groups and security controls. */
html body #tm-content .riko-member-modern .riko-profile-layout { display: block; padding: 0; margin: 0; gap: 0; }
html body #tm-content .riko-member-modern .riko-profile-form { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
html body #tm-content .riko-member-modern .riko-profile-form::before { display: none; }
html body #tm-content .riko-member-modern .riko-account-section { padding: 0 0 22px; margin: 0 0 24px; border-bottom: 1px solid var(--riko-line); }
html body #tm-content .riko-member-modern .riko-account-section > h2 { margin: 0 0 18px; }
html body #tm-content .riko-member-modern .riko-profile-fieldset { margin: 0 0 18px; padding: 0; background: none; border: 0; box-shadow: none; min-width: 0; }
html body #tm-content .riko-member-modern .riko-profile-fieldset > legend:not(.riko-visually-hidden) { margin: 14px 0 12px; padding: 0; font-size: 17px; font-weight: 600; border: 0; }
html body #tm-content .riko-member-modern .riko-profile-field-grid { gap: 20px; }
html body #tm-content .riko-member-modern .riko-profile-field input:not([type=checkbox]):not([type=hidden]),
html body #tm-content .riko-member-modern .riko-profile-field select { font-size: 16px; font-weight: 400; min-height: 46px; }
html body #tm-content .riko-member-modern .riko-profile-label label { font-size: 15px; font-weight: 600; }
html body #tm-content .riko-member-modern .riko-profile-helper,
html body #tm-content .riko-member-modern .riko-profile-label .optional { font-size: 13px; font-weight: 400; line-height: 1.5; }
html body #tm-content .riko-member-modern .riko-profile-security-summary { display: flex; flex-wrap: wrap; gap: 18px 36px; margin: 0 0 20px; }
html body #tm-content .riko-member-modern .riko-profile-status { padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
html body #tm-content .riko-member-modern .riko-profile-security-summary dt { font-size: 13px; color: var(--riko-muted); }
html body #tm-content .riko-member-modern .riko-profile-security-summary dd { margin: 4px 0 0; font-size: 15px; }
html body #tm-content .riko-member-modern .riko-profile-actions { margin: 0; padding: 0; border: 0; }
html body #tm-content .riko-member-modern .riko-member-email { border-top: 1px solid var(--riko-line); padding-top: 25px; margin-top: 30px; }
html body #tm-content .riko-member-modern .riko-member-email p { font-size: 15px; }
html body #tm-content .riko-member-modern .riko-member-email [hidden] { display: none !important; }
html body #tm-content .riko-member-modern .riko-member-email-form { margin: 12px 0; }
html body #tm-content .riko-member-modern .riko-member-email-form button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--riko-line); border-radius: 7px; background: var(--riko-action-soft); color: var(--riko-link); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; white-space: normal; cursor: pointer; }
html body #tm-content .riko-member-modern .riko-member-email-form button:hover { background: var(--riko-action-soft-hover); }
html body #tm-content .riko-member-modern .riko-member-email-form button:disabled { opacity: .65; cursor: wait; }
html body #tm-content .riko-member-modern .riko-member-email-feedback { margin-top: 12px; color: var(--riko-ink); }
html body #tm-content .riko-member-modern .riko-member-email-feedback[role=alert] { color: var(--riko-action); }
#tm-content .riko-login-extra-method .riko-login-secondary-action { gap: 8px; }
#tm-content .riko-login-extra-method svg,
#tm-content .riko-login-extra-method img.icon { width: 20px; height: 20px; flex: 0 0 20px; }
/* PayPlans retains its own action handlers and billing controls. */
html body #tm-content .riko-member-modern .riko-jumbo-summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px; margin-bottom: 24px; border: 1px solid var(--riko-line); border-left: 3px solid var(--riko-action); background: var(--riko-action-soft); border-radius: 6px; }
html body #tm-content .riko-member-modern .riko-jumbo-summary h2 { margin: 0 0 8px; }
html body #tm-content .riko-member-modern .riko-jumbo-summary p { font-size: 15px; margin: 0; }
html body #tm-content .riko-member-modern .riko-jumbo-summary--pending { border-left-color: var(--riko-warning); }
html body #tm-content .riko-member-modern .riko-subscription-card { box-shadow: none; border-color: var(--riko-line); }
html body #tm-block-footer .riko-newsletter-footer-module[data-member-preferences] { display: block; }
html body #tm-block-footer [data-member-newsletter-original][hidden] { display: none !important; }
html body #tm-block-footer .riko-member-email-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--riko-on-brand); text-decoration: underline; font-size: 14px; }
/* Account settings: details stay available without crowding the initial view. */
html body #tm-content .riko-profile-settings .riko-settings-tabs { display: flex; gap: 6px; margin: 0 0 22px; padding: 0 0 8px; border-bottom: 1px solid var(--riko-line); }
html body #tm-content .riko-profile-settings .riko-settings-tabs[hidden],
html body #tm-content .riko-profile-settings .riko-settings-panel[hidden] { display: none !important; }
html body #tm-content .riko-profile-settings .riko-settings-tabs > button { display: inline-flex; align-items: center; justify-content: center; flex: 0 1 auto; min-width: 0; min-height: 46px; padding: 10px 16px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--riko-ink); box-shadow: none; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; text-align: center; white-space: normal; cursor: pointer; transform: none; text-shadow: none; }
html body #tm-content .riko-profile-settings .riko-settings-tabs > button:is(:hover, :focus) { background: var(--riko-action-soft); color: var(--riko-link); box-shadow: none; }
html body #tm-content .riko-profile-settings .riko-settings-tabs > button[aria-selected="true"] { border-color: var(--riko-action-line); background: var(--riko-action-soft); color: var(--riko-link); }
html body #tm-content .riko-profile-settings .riko-settings-panel { min-width: 0; }
html body #tm-content .riko-profile-settings .riko-settings-panel:focus-visible { outline: 3px solid var(--riko-focus) !important; outline-offset: 3px; }
@media (max-width: 480px) {
    html body #tm-content .riko-profile-settings .riko-settings-tabs > button { flex: 1 1 0; padding-inline: 10px; font-size: 14px; }
}
html body #tm-content .riko-profile-settings .riko-profile-layout,
html body #tm-content .riko-profile-settings .riko-member-email,
html body #tm-content .riko-profile-settings .riko-settings-last-visit { max-width: none; }
html body #tm-content .riko-profile-settings .riko-profile-form { padding: 0 !important; }
html body #tm-content .riko-profile-settings .riko-account-section { margin: 0 0 20px; padding: 26px; border: 1px solid var(--riko-line); border-radius: 14px; background: var(--riko-surface); }
html body #tm-content .riko-profile-settings .riko-account-section > h2 { margin: 0 0 16px; font-size: 19px; }
/* Section panels own the surface; nested native fieldsets are content only.
   This scope outranks the shared ambience treatment applied to legacy panels. */
html body #tm-content .riko-profile-page.riko-profile-settings .riko-profile-form .riko-profile-fieldset { margin: 0; padding: 0; border: 0; border-radius: 0; background: none !important; }
html body #tm-content .riko-profile-settings .riko-profile-field-grid { gap: 18px 24px; }
html body #tm-content .riko-profile-settings .riko-profile-label { margin-bottom: 6px; color: var(--riko-ink); }
html body #tm-content .riko-profile-settings .riko-profile-control input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
html body #tm-content .riko-profile-settings .riko-profile-control select,
html body #tm-content .riko-profile-settings .riko-profile-control textarea { border-radius: 7px; border-color: var(--riko-line); background: var(--riko-surface); color: var(--riko-ink); box-shadow: none; font-size: 16px; font-weight: 400; }
html body #tm-content .riko-profile-settings .riko-profile-control input:read-only { background: var(--riko-action-soft) !important; color: var(--riko-muted); }
html body #tm-content .riko-profile-settings .riko-profile-control input:focus,
html body #tm-content .riko-profile-settings .riko-profile-control select:focus,
html body #tm-content .riko-profile-settings .riko-profile-control textarea:focus { border-color: var(--riko-focus); outline: 2px solid var(--riko-focus) !important; outline-offset: 2px; }
html body #tm-content .riko-profile-settings .riko-profile-helper { color: var(--riko-muted); font-size: 13px; font-weight: 400; }
html body #tm-content .riko-profile-settings .riko-settings-disclosure { margin: 12px 0 0; padding: 0; border: 1px solid var(--riko-line); border-radius: 9px; background: var(--riko-surface-soft); box-shadow: none; }
html body #tm-content .riko-profile-settings .riko-settings-disclosure > summary { display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box; padding: 16px; border-radius: 9px; list-style: none; cursor: pointer; }
html body #tm-content .riko-profile-settings .riko-settings-disclosure > summary::-webkit-details-marker { display: none; }
html body #tm-content .riko-profile-settings .riko-settings-disclosure > summary::after { content: ''; width: 7px; height: 7px; flex: 0 0 7px; margin: 0 4px 4px 0; border-right: 2px solid var(--riko-action); border-bottom: 2px solid var(--riko-action); transform: rotate(45deg); }
html body #tm-content .riko-profile-settings .riko-settings-disclosure[open] > summary::after { transform: rotate(225deg); margin-top: 5px; margin-bottom: 0; }
html body #tm-content .riko-profile-settings .riko-settings-disclosure > summary:hover { background: var(--riko-surface); }
html body #tm-content .riko-profile-settings .riko-settings-disclosure > summary:focus-visible { outline: 3px solid var(--riko-focus) !important; outline-offset: 3px; }
html body #tm-content .riko-profile-settings .riko-settings-disclosure__label { flex: 1 1 auto; min-width: 0; }
html body #tm-content .riko-profile-settings .riko-settings-disclosure__label strong { display: block; color: var(--riko-ink); font-size: 16px; line-height: 1.4; font-weight: 600; overflow-wrap: normal; word-break: normal; }
html body #tm-content .riko-profile-settings .riko-settings-disclosure__label small { display: block; margin-top: 3px; color: var(--riko-muted); font-size: 13px; font-weight: 400; line-height: 1.4; }
html body #tm-content .riko-profile-settings .riko-settings-disclosure__label small.is-active { color: var(--riko-action-hover); }
html body #tm-content .riko-profile-settings .riko-settings-disclosure__action { flex: 0 0 auto; color: var(--riko-link); font-size: 14px; font-weight: 600; }
html body #tm-content .riko-profile-settings .riko-settings-disclosure__body { padding: 4px 16px 20px; }
html body #tm-content .riko-profile-settings .riko-profile-fieldset-desc { margin: 0 0 16px; color: var(--riko-muted); font-size: 14px; font-weight: 400; line-height: 1.5; }
html body #tm-content .riko-profile-settings .riko-profile-actions { position: static; display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 2px 0 12px; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
html body #tm-content .riko-profile-settings .riko-profile-submit,
html body #tm-content .riko-profile-settings .riko-profile-cancel { flex: 0 1 auto; width: auto; min-height: 46px; border-radius: 7px !important; font-size: 15px; font-weight: 600 !important; box-shadow: none !important; text-shadow: none; transform: none; }
html body #tm-content .riko-profile-settings .riko-profile-submit { padding: 11px 18px !important; background: var(--riko-action) !important; border: 1px solid var(--riko-action) !important; color: var(--riko-action-contrast) !important; }
html body #tm-content .riko-profile-settings .riko-profile-cancel { padding: 11px 4px !important; background: none !important; border: 1px solid transparent !important; color: var(--riko-ink) !important; }
html body #tm-content .riko-profile-settings .riko-profile-submit:hover { background: var(--riko-action-hover) !important; }
html body #tm-content .riko-profile-settings .riko-profile-cancel:hover { text-decoration: underline; }
html body #tm-content .riko-profile-settings .riko-member-email { padding: 24px; margin: 0; border: 1px solid var(--riko-line); border-radius: 14px; background: var(--riko-surface-soft); }
html body #tm-content .riko-profile-settings .riko-member-email h2 { margin-top: 0; font-size: 19px; }
html body #tm-content .riko-profile-settings .riko-settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 6px 0 18px; padding: 6px 0 16px; border-bottom: 1px solid var(--riko-line); }
html body #tm-content .riko-profile-settings .riko-settings-heading h1 { margin: 0 0 8px; color: var(--riko-ink) !important; font-size: clamp(26px, 2.3vw, 36px) !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: -.025em; }
html body #tm-content .riko-profile-settings .riko-settings-heading p { margin: 0; color: var(--riko-muted); max-width: 65ch; font-size: 15px; line-height: 1.65; }
html body #tm-content .riko-profile-settings .riko-settings-identity { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; max-width: 30%; min-width: 0; }
html body #tm-content .riko-profile-settings .riko-settings-identity small { display: block; margin-bottom: 3px; color: var(--riko-muted); font-size: 12px; }
html body #tm-content .riko-profile-settings .riko-settings-identity strong { display: block; color: var(--riko-ink); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
html body #tm-content .riko-profile-settings .riko-settings-avatar { display: inline-grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--riko-line); color: var(--riko-link); background: var(--riko-action-soft); font-size: 17px; font-weight: 600; }
/* A large portrait and explicit photo actions belong together, outside account saves. */
html body #tm-content .riko-profile-settings .riko-avatar-editor { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; box-sizing: border-box; margin: 0; padding: 24px; border: 1px solid var(--riko-line); border-radius: 14px; background: var(--riko-surface); text-align: center; }
html body #tm-content .riko-profile-settings .riko-avatar-editor h2 { align-self: flex-start; margin: 0 0 22px; color: var(--riko-ink); font-size: 19px; line-height: 1.3; }
html body #tm-content .riko-profile-settings .riko-avatar-editor .riko-settings-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 192px; height: 192px; overflow: hidden; box-sizing: border-box; border: 3px solid var(--riko-action-line); box-shadow: 0 0 0 7px var(--riko-surface-soft); margin: 7px 0 20px; font-size: 52px; letter-spacing: -.03em; }
html body #tm-content .riko-profile-settings .riko-settings-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
html body #tm-content .riko-profile-settings .riko-avatar-editor__name { max-width: 100%; color: var(--riko-ink); font-size: 17px; font-weight: 650; overflow-wrap: anywhere; }
html body #tm-content .riko-profile-settings .riko-avatar-editor__label { display: block; margin-top: 16px; font-size: 13px; color: var(--riko-ink); }
html body #tm-content .riko-profile-settings .riko-avatar-editor input[type="file"] { display: block; max-width: 100%; width: 100%; min-height: 36px; margin: 8px 0; padding: 0; border: 0; background: transparent; font-size: 12px; color: var(--riko-muted); }
html body #tm-content .riko-profile-settings .riko-avatar-editor[data-avatar-ready] .riko-avatar-editor__label { display: none; }
html body #tm-content .riko-profile-settings .riko-avatar-editor :is(.riko-avatar-editor__help, .riko-avatar-editor__status) { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: var(--riko-muted); }
html body #tm-content .riko-profile-settings .riko-avatar-editor__status:empty { display: none; }
html body #tm-content .riko-profile-settings .riko-avatar-editor__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; }
html body #tm-content .riko-profile-settings .riko-avatar-editor button { min-height: 44px; padding: 10px 14px; border-radius: 7px; font-size: 13px; line-height: 1.4; font-weight: 600; cursor: pointer; }
html body #tm-content .riko-profile-settings .riko-avatar-editor__choose { width: 100%; margin-top: 20px; color: var(--riko-link); background: var(--riko-action-soft); border: 1px solid var(--riko-line); }
html body #tm-content .riko-profile-settings .riko-avatar-editor [data-avatar-save] { width: 100%; color: var(--riko-action-contrast); background: var(--riko-action); border: 1px solid var(--riko-action); }
html body #tm-content .riko-profile-settings .riko-avatar-editor :is([data-avatar-remove], [data-avatar-cancel]) { color: var(--riko-link); background: transparent; border: 1px solid transparent; }
html body #tm-content .riko-profile-settings .riko-avatar-editor button:hover { border-color: var(--riko-action); }
html body #tm-content .riko-profile-settings .riko-avatar-editor :is(input, button):focus-visible { outline: 3px solid var(--riko-focus); outline-offset: 3px; }
html body #tm-content .riko-profile-settings .riko-avatar-editor [hidden] { display: none !important; }
html body #tm-content .riko-profile-settings .riko-profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 310px); gap: 26px; align-items: start; }
html body #tm-content .riko-profile-settings .riko-profile-form,
html body #tm-content .riko-profile-settings .riko-settings-aside { min-width: 0; }
html body #tm-content .riko-profile-settings .riko-settings-section-heading { margin: 0 0 22px; }
html body #tm-content .riko-profile-settings .riko-settings-section-heading h2 { color: var(--riko-ink) !important; margin: 0 0 6px; font-size: 21px; font-weight: 650; letter-spacing: -.015em; }
html body #tm-content .riko-profile-settings .riko-settings-section-heading p { color: var(--riko-muted); margin: 0; font-size: 14px; line-height: 1.6; }
html body #tm-content .riko-profile-settings .riko-settings-optional-note { color: var(--riko-muted); margin: -8px 0 22px; max-width: 78ch; font-size: 13px; line-height: 1.6; }
html body #tm-content .riko-profile-settings .riko-settings-account-dates { margin: 20px 0 0; padding: 24px; border: 1px solid var(--riko-line); border-radius: 14px; background: var(--riko-surface); }
html body #tm-content .riko-profile-settings .riko-settings-account-dates h2 { margin: 0 0 18px; font-size: 18px; }
html body #tm-content .riko-profile-settings .riko-settings-account-dates dl { display: grid; gap: 18px; margin: 0; }
html body #tm-content .riko-profile-settings .riko-settings-account-dates dt { color: var(--riko-muted); font-size: 13px; }
html body #tm-content .riko-profile-settings .riko-settings-account-dates dd { color: var(--riko-ink); font-size: 14px; margin: 4px 0 0; }
/* Native Joomla choice controls remain keyboard operable and save in the profile. */
html body #tm-content .riko-profile-settings .riko-profile-fieldset-rikoooo_preferences .riko-profile-field-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
html body #tm-content .riko-profile-settings .riko-profile-fieldset-rikoooo_preferences select { width: 100%; max-width: 440px; }
html body #tm-content .riko-profile-settings .riko-profile-control .checkboxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
html body #tm-content .riko-profile-settings .riko-profile-control .checkboxes > div { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 44px; box-sizing: border-box; margin: 0; padding: 0 12px; border: 1px solid var(--riko-line); border-radius: 7px; background: var(--riko-surface-soft); }
html body #tm-content .riko-profile-settings .riko-profile-control .checkboxes label { display: flex; flex: 1 1 auto; align-items: center; min-height: 44px; margin: 0; padding: 10px 0; box-sizing: border-box; color: var(--riko-ink); font-size: 14px; font-weight: 400; cursor: pointer; }
html body #tm-content .riko-profile-settings .riko-profile-control .checkboxes > div:has(input:checked) { border-color: var(--riko-action); background: var(--riko-action-soft); }
html body #tm-content .riko-profile-settings .riko-profile-control .checkboxes > div:has(input:checked) label { color: var(--riko-link); }
html body #tm-content .riko-profile-settings .riko-profile-control input[type=checkbox] { flex: 0 0 auto; width: 17px; height: 17px; min-height: 17px; margin: 0; accent-color: var(--riko-action); }
@media (max-width: 1100px) {
    html body #tm-content .riko-profile-settings .riko-profile-layout { grid-template-columns: minmax(0, 1fr); }
    html body #tm-content .riko-profile-settings .riko-settings-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    html body #tm-content .riko-profile-settings .riko-settings-account-dates { margin: 0; }
    html body #tm-content .riko-profile-settings .riko-settings-identity { max-width: 36%; }
}
@media (max-width: 680px) {
    html body #tm-content .riko-profile-settings .riko-settings-heading { display: block; margin-bottom: 16px; padding: 4px 0 14px; }
    html body #tm-content .riko-profile-settings .riko-settings-identity { margin-top: 20px; max-width: none; }
    html body #tm-content .riko-profile-settings .riko-account-section,
    html body #tm-content .riko-profile-settings .riko-member-email,
    html body #tm-content .riko-profile-settings .riko-settings-account-dates { padding: 18px; }
    html body #tm-content .riko-profile-settings .riko-settings-aside { grid-template-columns: minmax(0, 1fr); }
    html body #tm-content .riko-profile-settings .riko-profile-field-grid { grid-template-columns: minmax(0, 1fr); }
    html body #tm-content .riko-profile-settings .riko-profile-control .checkboxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body #tm-content .riko-profile-settings .riko-profile-control .checkboxes > div { padding-inline: 10px; }
    html body #tm-content .riko-profile-settings .riko-profile-control .checkboxes label { font-size: 13px; }
    html body #tm-content .riko-profile-settings .riko-profile-submit { width: 100%; }
}
html body #tm-content .riko-profile-settings .riko-profile-fieldset-webauthn table { border-color: var(--riko-line); border-radius: 7px; }
html body #tm-content .riko-profile-settings .riko-profile-fieldset-webauthn thead th { background: var(--riko-surface-soft); color: var(--riko-muted); font-size: 13px; font-weight: 600; text-transform: none; }
html body #tm-content .riko-profile-settings .riko-profile-fieldset-webauthn tbody th,
html body #tm-content .riko-profile-settings .riko-profile-fieldset-webauthn tbody td { color: var(--riko-ink); font-size: 15px; font-weight: 400; overflow-wrap: anywhere; }
html body #tm-content .riko-profile-settings .riko-profile-fieldset-webauthn button,
html body #tm-content .riko-profile-settings .riko-profile-multifactor a.btn { min-height: 44px; border-radius: 7px; font-size: 14px; font-weight: 600; line-height: 1.4; white-space: normal; }
html body #tm-content .riko-profile-settings .plg_system_webauthn-manage-delete { border: 1px solid color-mix(in srgb, var(--riko-danger) 28%, var(--riko-surface)) !important; background: var(--riko-surface) !important; color: var(--riko-danger) !important; box-shadow: none !important; }
html body #tm-content .riko-profile-settings .riko-profile-fieldset-webauthn #plg_system_webauthn-manage-add,
html body #tm-content .riko-profile-settings .riko-profile-multifactor .com-users-methods-list-method-addnew { border: 1px solid var(--riko-line); background: var(--riko-surface-soft); color: var(--riko-ink); }
/* Keep native management actions; only the repeated status sentence is hidden. */
html body #tm-content .riko-profile-settings .riko-mfa-method-status { display: contents; }
html body #tm-content .riko-profile-settings #com-users-methods-reset-message { display: none; }
html body #tm-content .riko-profile-settings .riko-mfa-method-list .com-users-methods-list-method { border-radius: 7px; }
html body #tm-content .riko-profile-settings .riko-mfa-method-list .com-users-methods-list-method-header { grid-template-columns: 36px minmax(0, 1fr); gap: 12px !important; padding: 12px !important; background: var(--riko-surface-soft) !important; }
html body #tm-content .riko-profile-settings .riko-mfa-method-list .com-users-methods-list-method-image { width: 36px; height: 36px; min-height: 0; padding: 3px !important; border-radius: 0 !important; background: none !important; }
html body #tm-content .riko-profile-settings .riko-mfa-method-list .com-users-methods-list-method-image img { width: 30px; height: 30px; }
html body #tm-content .riko-profile-settings .riko-mfa-method-list .com-users-methods-list-method-title h2 { font-size: 16px !important; font-weight: 600; }
html body #tm-content .riko-profile-settings .riko-mfa-method-list .com-users-methods-list-method-records-container { padding: 12px !important; font-size: 14px; }
@media (max-width: 680px) {
    html body #tm-content .riko-profile-settings .riko-settings-disclosure > summary { gap: 10px; }
    html body #tm-content .riko-profile-settings .riko-settings-disclosure__action { font-size: 13px; }
    html body #tm-content .riko-profile-settings .riko-profile-fieldset-webauthn tbody td { display: flex; flex-wrap: wrap; justify-content: flex-start; }
    html body #tm-content .riko-profile-settings .riko-profile-fieldset-webauthn tbody td button { flex: 1 1 auto; width: auto; font-size: 14px; white-space: normal; }
    html body #tm-content .riko-profile-settings .riko-profile-fieldset-webauthn #plg_system_webauthn-manage-add { width: 100%; }
}
@media (max-width: 900px) {
    html body #tm-content .riko-member-nav--compact .riko-member-nav__rail { display: none; }
    html body #tm-content .riko-member-nav--compact .riko-member-nav__mobile { display: block; border: 0; border-radius: 0; background: none; box-shadow: none; }
    html body #tm-content .riko-member-nav--compact .riko-member-nav__mobile summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 8px 12px; gap: 12px; background: none; list-style: none; cursor: pointer; }
    html body #tm-content .riko-member-nav--compact .riko-member-nav__mobile summary::-webkit-details-marker { display: none; }
    html body #tm-content .riko-member-nav--compact .riko-member-nav__mobile summary strong { display: flex; align-items: center; flex-wrap: wrap; font-size: 16px; gap: 8px; font-weight: 600; }
    html body #tm-content .riko-member-nav--compact .riko-member-nav__mobile summary::after { position: static; content: '⌄'; font-size: 20px; transform: none; }
    html body #tm-content .riko-member-nav--compact .riko-member-nav__mobile summary strong > span:not(.riko-visually-hidden) { font-size: 12px; }
    html body #tm-content .riko-member-nav--compact .riko-member-nav__mobile[open] > summary::after { transform: rotate(180deg); }
    html body #tm-content .riko-member-nav--compact .riko-member-nav__mobile-menu { display: grid; gap: 6px; padding: 0 0 12px; border-top: 1px solid var(--riko-line); }
    /* Hidden icons must not leave their former 22px grid track for the label. */
    html body #tm-content .riko-member-nav--compact .riko-member-nav__mobile-menu a {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        min-height: 46px;
        box-sizing: border-box;
        padding: 10px 12px;
        border: 1px solid transparent;
        border-radius: 7px;
        color: var(--riko-link);
        background: var(--riko-action-soft);
        font-size: 15px;
        font-weight: 600;
        line-height: 1.4;
        text-decoration: none;
        box-shadow: none;
    }
    html body #tm-content .riko-member-nav--compact .riko-member-nav__mobile-menu a > span { min-width: 0; overflow-wrap: normal; word-break: normal; }
    html body #tm-content .riko-member-nav--compact .riko-member-nav__mobile-menu a > strong { display: inline-flex; justify-self: end; align-items: center; min-height: 24px; padding: 0 7px; border-radius: 999px; color: var(--riko-link); background: var(--riko-action-soft); font-size: 12px; white-space: nowrap; }
    html body #tm-content .riko-member-nav--compact .riko-member-nav__mobile-menu a > .riko-member-nav__badge { position: static; justify-self: end; }
    html body #tm-content .riko-member-nav--compact .riko-member-nav__mobile-menu a.is-active { color: var(--riko-action-contrast); background: var(--riko-action-hover); }
    html body #tm-content .riko-member-nav--compact .riko-member-nav__mobile-menu .riko-member-nav__logout { margin: 4px 0 0; padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--riko-line); }
    html body #tm-content .riko-member-nav--compact .riko-member-nav__mobile-menu .riko-member-nav__logout button { width: 100%; padding-inline: 12px; font-size: 15px; }
}
@media (max-width: 1050px) {
    html body #tm-content .riko-member-modern .riko-overview-layout { grid-template-columns: minmax(0, 1fr); }
    html body #tm-content .riko-member-modern .riko-overview-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
    html body #tm-content .riko-member-modern .riko-overview-summary-block,
    html body #tm-content .riko-member-modern .riko-overview-account-block { padding: 22px; border-bottom: 0; }
    html body #tm-content .riko-member-modern .riko-overview-summary-block { border-right: 1px solid var(--riko-line); }
}
@media (max-width: 680px) {
    html body #tm-content .riko-member-nav.riko-member-nav--compact { margin-bottom: 22px; }
    html body #tm-content .riko-member-modern .riko-member-heading { margin-bottom: 23px; flex-wrap: wrap; gap: 8px; }
    html body #tm-content .riko-member-modern .riko-member-heading h1 { font-size: 27px; }
    html body #tm-content .riko-member-modern .riko-member-heading.riko-overview-heading { flex-direction: column; align-items: stretch; gap: 20px; padding: 22px 20px; margin-bottom: 20px; }
    html body #tm-content .riko-overview-heading .riko-member-primary { width: 100%; max-width: none; }
    html body #tm-content .riko-member-modern .riko-overview-layout { gap: 20px; }
    html body #tm-content .riko-member-modern .riko-overview-library { padding: 18px 16px; }
    html body #tm-content .riko-member-modern .riko-overview-section-head { gap: 10px; margin-bottom: 8px; }
    html body #tm-content .riko-member-modern .riko-overview-section-head h2 { font-size: 20px; }
    html body #tm-content .riko-member-modern .riko-overview-section-head .riko-member-muted { font-size: 13px; }
    html body #tm-content .riko-member-modern .riko-overview-count { font-size: 12px; padding: 4px 7px; }
    html body #tm-content .riko-member-modern .riko-overview-items a { gap: 12px; padding: 16px 0; }
    html body #tm-content .riko-member-modern .riko-overview-items img,
    html body #tm-content .riko-member-modern .riko-overview-item-placeholder { width: 88px; height: 70px; }
    html body #tm-content .riko-member-modern .riko-overview-items strong { font-size: 16px; }
    html body #tm-content .riko-member-modern .riko-overview-items small { font-size: 13px; }
    html body #tm-content .riko-member-modern .riko-overview-item-arrow { font-size: 17px; }
    html body #tm-content .riko-member-modern .riko-overview-summary { grid-template-columns: minmax(0, 1fr); padding: 0 20px; }
    html body #tm-content .riko-member-modern .riko-overview-summary-block,
    html body #tm-content .riko-member-modern .riko-overview-account-block { padding: 20px 0 14px; margin: 0; border-right: 0; }
    html body #tm-content .riko-member-modern .riko-overview-summary-block { border-bottom: 1px solid var(--riko-line); }
    html body #tm-content .riko-member-modern .riko-profile-field-grid { grid-template-columns: 1fr; }
    html body #tm-content .riko-member-modern .riko-profile-security-summary { display: block; }
    html body #tm-content .riko-member-modern .riko-profile-status + .riko-profile-status { margin-top: 12px; }
    html body #tm-content .riko-member-modern .riko-jumbo-summary { display: block; padding: 16px; }
    html body #tm-content .riko-member-modern .riko-jumbo-summary > a { margin-top: 15px; }
}
@media (max-width: 380px) {
    html body #tm-content .riko-member-modern .riko-overview-items img,
    html body #tm-content .riko-member-modern .riko-overview-item-placeholder { width: 64px; height: 64px; }
    html body #tm-content .riko-member-modern .riko-overview-item-arrow { display: none; }
}

/* The portrait comes first on narrow screens; account fields retain their own form. */
@media (min-width: 600px) and (max-width: 1100px) {
    html body #tm-content .riko-profile-settings .riko-avatar-editor {
        display: grid;
        grid-template-columns: 192px minmax(0, 1fr);
        grid-template-areas: "title title" "photo name" "photo choose" "photo actions" "photo help" "photo status";
        gap: 10px 28px;
        text-align: left;
        align-items: center;
    }
    html body #tm-content .riko-profile-settings .riko-avatar-editor h2 { grid-area: title; margin-bottom: 8px; }
    html body #tm-content .riko-profile-settings .riko-avatar-editor .riko-settings-avatar { grid-area: photo; margin: 7px 0; }
    html body #tm-content .riko-profile-settings .riko-avatar-editor__name { grid-area: name; }
    html body #tm-content .riko-profile-settings .riko-avatar-editor__choose { grid-area: choose; margin: 0; }
    html body #tm-content .riko-profile-settings .riko-avatar-editor__actions { grid-area: actions; margin: 0; justify-content: flex-start; }
    html body #tm-content .riko-profile-settings .riko-avatar-editor__help { grid-area: help; margin: 0; }
    html body #tm-content .riko-profile-settings .riko-avatar-editor__status { grid-area: status; margin: 0; }
}
/* Start the portrait below the member navigation, beside the page heading.
   The two short account summaries share a row below the main content. */
html body #tm-content .riko-profile-settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 310px); column-gap: 26px; align-items: start; }
html body #tm-content .riko-profile-settings > .riko-member-nav { grid-column: 1 / -1; grid-row: 1; }
html body #tm-content .riko-profile-settings > .riko-settings-heading { grid-column: 1; grid-row: 2; }
html body #tm-content .riko-profile-settings .riko-profile-layout { display: contents; }
html body #tm-content .riko-profile-settings .riko-avatar-editor { grid-column: 2; grid-row: 2 / span 2; }
html body #tm-content .riko-profile-settings .riko-profile-form { grid-column: 1; grid-row: 3; }
html body #tm-content .riko-profile-settings .riko-settings-aside { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 26px; align-items: stretch; }
html body #tm-content .riko-profile-settings .riko-settings-aside > :is(.riko-member-email, .riko-settings-account-dates) { margin: 0; padding: 20px; background: var(--riko-surface); }
html body #tm-content .riko-profile-settings .riko-settings-aside h2 { margin: 0 0 10px; font-size: 18px; }
html body #tm-content .riko-profile-settings .riko-settings-aside .riko-member-email p { margin: 0 0 10px; }
html body #tm-content .riko-profile-settings .riko-settings-aside .riko-member-email-form { margin: 8px 0 0; }
html body #tm-content .riko-profile-settings .riko-settings-aside .riko-settings-account-dates dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
html body #tm-content .riko-profile-settings .riko-settings-aside .riko-settings-account-dates dd { overflow-wrap: anywhere; }
html body #tm-content .riko-profile-settings .riko-profile-field-jform_username .riko-profile-control { max-width: 28rem; }
html body #tm-content .riko-profile-settings .riko-profile-field-jform_username input[readonly] { background: var(--riko-surface-soft) !important; color: var(--riko-muted); font-size: 15px; }
html body #tm-content .riko-profile-settings .riko-avatar-editor :is([data-avatar-remove], [data-avatar-cancel]) { box-shadow: none; }
@media (max-width: 1100px) {
    html body #tm-content .riko-profile-settings { grid-template-columns: minmax(0, 1fr); }
    html body #tm-content .riko-profile-settings .riko-avatar-editor { grid-column: 1; grid-row: 3; width: 100%; margin-bottom: 26px; }
    html body #tm-content .riko-profile-settings .riko-profile-form { grid-column: 1; grid-row: 4; }
    html body #tm-content .riko-profile-settings .riko-settings-aside { grid-column: 1; grid-row: 5; }
    html body #tm-content .riko-profile-settings .riko-avatar-editor__choose,
    html body #tm-content .riko-profile-settings .riko-avatar-editor__actions { max-width: 280px; }
    html body #tm-content .riko-profile-settings .riko-avatar-editor__help { max-width: 36ch; }
}
@media (max-width: 680px) {
    html body #tm-content .riko-profile-settings .riko-settings-aside { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}