/*
 * MathRealm unified component library.
 * Source of truth: DESIGN.md (Figma-design-analysis, alpha).
 * Depends on styles/design-tokens.css. Keep BOTH loaded last on every page.
 *
 * DESIGN.md rules enforced here:
 * - Monochrome chrome: {colors.canvas} page, {colors.ink} type, black pill
 *   {components.button-primary} + white pill {components.button-secondary}.
 * - Pill is the only button shape ({rounded.pill}); icon buttons are circles.
 * - Cards: canvas surface, 1px {colors.hairline} stroke, {rounded.lg} 24px,
 *   flat (elevation level 1 = hairline, not shadow).
 * - Inputs: {components.text-input} {rounded.md}, hairline border, focus via
 *   ring not fill.
 * - figmaMono (fallback JetBrains Mono) for taxonomy: eyebrows, captions,
 *   badges/tags — uppercase, positive tracking.
 * - Pastel color-block sections ({colors.block-*}) carry page storytelling;
 *   pastel surfaces always use black ink, in BOTH themes.
 * - Dark theme (undocumented in DESIGN.md): inverse-canvas black, inverse-ink
 *   white; "selected = primary surface" flips to white pill on black.
 */

/* ---------------------------------------------------------------- base */

html,
body {
    background: var(--ds-t-canvas) !important;
    color: var(--ds-t-ink) !important;
    font-family: var(--ds-font) !important;
    font-size: var(--ds-body-size) !important;
    font-weight: var(--ds-weight-body) !important;
    line-height: 1.45 !important;
    letter-spacing: -0.26px !important;
    font-kerning: normal;
}

body {
    background-image: none !important;
}

/* ---------------------------------------------------------- typography */

h1, h2, h3, h4, h5, h6,
.page-title,
.section-title,
.card-title,
.modal-title,
.home-legacy__title,
.home-panel__title,
.home-panel__subhead,
.editor-hero-title,
.question-title,
.forum-title,
.ranking-title {
    color: var(--ds-t-ink) !important;
    font-family: var(--ds-font) !important;
    font-kerning: normal;
}

/* {typography.display-lg} 64 -> ~48 responsive; app pages read better one
 * step below the marketing display-xl. */
h1,
.page-title,
.home-legacy__title {
    font-size: clamp(28px, 3.4vw, 42px) !important;
    font-weight: var(--ds-weight-display) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.72px !important;
}

/* Decorative FontAwesome glyphs inside headings read as clip-art; the
 * headline alone carries the section. */
h1 > i.fas, h1 > i.far, h1 > i.fab,
h2 > i.fas, h2 > i.far, h2 > i.fab,
h3 > i.fas, h3 > i.far, h3 > i.fab,
.card-header h3 i,
.forum-header h2 i,
.challenge-header h1 i {
    display: none !important;
}

/* {typography.headline} */
h2,
.section-title,
.home-panel__subhead {
    font-size: var(--ds-headline-size) !important;
    font-weight: var(--ds-weight-headline) !important;
    line-height: 1.35 !important;
    letter-spacing: -0.26px !important;
}

/* {typography.card-title} */
h3,
.card-title,
.home-panel__title,
.modal-title {
    font-size: var(--ds-card-title-size) !important;
    font-weight: var(--ds-weight-card-title) !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
}

h4, h5, h6 {
    font-size: var(--ds-body-lg-size) !important;
    font-weight: var(--ds-weight-headline) !important;
    line-height: 1.4 !important;
}

/* {typography.body} — DESIGN.md: no mid-gray text; weight carries hierarchy */
p, li, dd, dt, label,
.form-label,
.card-text,
.home-panel__text,
.home-hint,
.helper-text,
.question-content,
.forum-content {
    color: var(--ds-t-ink) !important;
    font-family: var(--ds-font) !important;
    font-size: var(--ds-body-size) !important;
    font-weight: var(--ds-weight-body) !important;
    line-height: 1.45 !important;
    letter-spacing: -0.26px !important;
}

/* {typography.link}: emphasis via weight 480, ink color, no blue */
a,
.text-link,
.home-link:not(.btn),
.question-link,
.forum-link {
    color: var(--ds-t-ink) !important;
    font-weight: var(--ds-weight-button) !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* {typography.eyebrow}/{typography.caption}: mono taxonomy labels */
.home-panel__eyebrow,
.ranking-kicker,
.groups-eyebrow,
.eyebrow,
.kicker {
    font-family: var(--ds-font-mono) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.54px !important;
    text-transform: uppercase !important;
    color: var(--ds-t-ink) !important;
}

/* ---------------------------------------------------------- navigation
 * {components.top-nav}: white 56px bar, text links; active item uses the
 * "selected = primary surface" pattern (black pill / white pill in dark). */

#navbar,
.navbar {
    min-height: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--ds-t-hairline-soft) !important;
    background: var(--ds-t-canvas) !important;
    color: var(--ds-t-ink) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#navbar .navbar-container,
.navbar-container {
    width: min(100% - 48px, var(--ds-container)) !important;
    height: 50px !important;
    min-height: 50px !important;
    gap: var(--ds-space-xs) !important;
}

.navbar-brand,
.navbar-item,
.navbar-menu .navbar-item,
.navbar-toggle,
.theme-switcher,
.user-profile,
.dropdown-item {
    color: var(--ds-t-ink) !important;
    font-family: var(--ds-font) !important;
    font-size: var(--ds-body-sm-size) !important;
    font-weight: var(--ds-weight-button) !important;
    line-height: 1.4 !important;
    letter-spacing: -0.1px !important;
}

.navbar-brand__mark,
#navbar.navbar .navbar-brand .navbar-brand__mark {
    width: auto !important;
    height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ds-t-ink) !important;
    font-family: var(--ds-font) !important;
    font-size: 19px !important;
    font-style: normal !important;
    font-weight: var(--ds-weight-card-title) !important;
    letter-spacing: -0.44px !important;
}

.navbar-menu {
    gap: var(--ds-space-xxs) !important;
}

/* {components.button-tertiary-text}: nav links are text pills */
html body #navbar#navbar :is(.navbar-item):is(.navbar-item),
html body .navbar :is(.navbar-item):is(.navbar-item):is(.navbar-item):is(.navbar-item):is(.navbar-item) {
    min-height: 36px !important;
    padding: 6px 14px !important;
    border: 0 !important;
    border-radius: var(--ds-rounded-pill) !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ds-t-ink) !important;
    font-size: var(--ds-body-sm-size) !important;
    font-weight: var(--ds-weight-button) !important;
    opacity: 1 !important;
}

html body #navbar#navbar :is(.navbar-item:hover),
html body #navbar#navbar :is(.navbar-item:focus-visible) {
    background: var(--ds-t-surface-soft) !important;
    background-color: var(--ds-t-surface-soft) !important;
    color: var(--ds-t-ink) !important;
}

/* selected = primary surface ({components.pricing-tab-selected} pattern) */
html body #navbar#navbar :is(.navbar-item.active):is(.navbar-item.active),
html body .navbar :is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active) {
    background: var(--ds-t-primary) !important;
    background-color: var(--ds-t-primary) !important;
    border: 0 !important;
    color: var(--ds-t-on-primary) !important;
}

.dropdown-menu {
    background: var(--ds-t-surface) !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-lg) !important;
    box-shadow: var(--ds-shadow-soft) !important;
    /* Sectioned-list menu: only the panel's outer 4 corners round. Zero
       interior padding so rows run flush to the edge (no gap), and overflow
       clip rounds the first/last row into the panel corners automatically —
       the panel is one continuous surface, rows are its segments. */
    padding: 0 !important;
    overflow: hidden !important;
}

/* Legacy `#navbar .dropdown-menu` (1,1,0) forces 8px padding, which insets the
   rows and leaves a gap band. Doubled-ID override reclaims zero padding. */
html body #dropdownMenu#dropdownMenu,
html body :is(.dropdown-menu):is(.dropdown-menu) {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: var(--ds-rounded-lg) !important;
}

/* Rows are full-bleed and square; the panel's rounded clip shapes the ends.
   Doubled-ID / stacked-:is() beats legacy `#dropdownMenu .dropdown-item`
   (1,1,0) and `.dropdown-menu .dropdown-item`. */
html body #dropdownMenu#dropdownMenu > .dropdown-item,
html body #dropdownMenu#dropdownMenu > .dropdown-header,
html body :is(.dropdown-menu):is(.dropdown-menu) > .dropdown-item,
html body :is(.dropdown-menu):is(.dropdown-menu) > .dropdown-header {
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Row highlight stays on-system: neutral surface-soft (theme-aware), never the
   legacy slate-blue tint. Fills the full flush row edge-to-edge. */
html body #dropdownMenu#dropdownMenu > .dropdown-item:hover,
html body #dropdownMenu#dropdownMenu > .dropdown-item:focus-visible,
html body #dropdownMenu#dropdownMenu > .dropdown-item.active,
html body :is(.dropdown-menu):is(.dropdown-menu) > .dropdown-item:hover,
html body :is(.dropdown-menu):is(.dropdown-menu) > .dropdown-item:focus-visible,
html body :is(.dropdown-menu):is(.dropdown-menu) > .dropdown-item.active {
    background: var(--ds-t-surface-soft) !important;
    border-radius: 0 !important;
}

/* ------------------------------------------------------------- buttons
 * {components.button-primary}: black pill, 10px 20px, {typography.button}.
 * Dark theme: white pill with black text (inverse primary surface). */

.btn,
a.btn,
button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password),
input[type="button"],
input[type="submit"],
.home-button,
.upload-btn,
.take-photo-btn,
.home-hero__links a {
    min-height: 40px !important;
    min-width: 40px !important;
    padding: 9px 18px !important;
    border: 0 !important;
    border-radius: var(--ds-rounded-pill) !important;
    background: var(--ds-t-primary) !important;
    color: var(--ds-t-on-primary) !important;
    box-shadow: none !important;
    font-family: var(--ds-font) !important;
    font-size: var(--ds-body-sm-size) !important;
    font-weight: var(--ds-weight-button) !important;
    line-height: 1.4 !important;
    letter-spacing: -0.1px !important;
    text-decoration: none !important;
    transform: none !important;
    transition: transform 120ms ease, background-color var(--ds-transition-fast), color var(--ds-transition-fast) !important;
}

/* {components.button-secondary}: canvas pill, ink text, no border —
 * hairline added for app-surface separability on white cards. */
.btn-secondary,
a.btn-secondary,
.home-link,
.page-link,
.pagination-btn,
.md-tab,
.question-tag-picker-tab,
.question-tag-field__trigger {
    min-height: 44px !important;
    padding: 8px 18px 10px !important;
    background: var(--ds-t-surface) !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-pill) !important;
    color: var(--ds-t-ink) !important;
    font-size: var(--ds-body-sm-size) !important;
    font-weight: var(--ds-weight-button) !important;
    box-shadow: none !important;
}

/* {components.button-icon-circular}: 40px circles for utility controls */
.navbar-toggle,
#navbar .navbar-toggle,
.navbar .navbar-toggle,
.theme-switcher,
.navbar-more-btn,
.password-toggle,
.toggle-password,
.modal-close,
.question-tag-remove {
    min-height: 40px !important;
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--ds-t-surface-soft) !important;
    border: 0 !important;
    border-radius: var(--ds-rounded-full) !important;
    color: var(--ds-t-ink) !important;
    box-shadow: none !important;
}

/* {components.button-magenta-promo}: destructive actions get the single
 * saturated accent (scarce by design). */
.btn-danger,
a.btn-danger {
    background: var(--ds-accent-magenta) !important;
    border: 0 !important;
    color: #ffffff !important;
}

/* Pressed: micro-scale, per DESIGN.md (no darkened fill) */
button:active,
.btn:active,
.home-button:active,
input[type="submit"]:active,
.btn-secondary:active,
.home-link:active,
.page-link:active,
.pagination-btn:active {
    transform: scale(0.97) !important;
}

button:disabled,
.btn:disabled,
input[type="submit"]:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* Focus via ring, not fill ({components.text-input-focused} principle) */
button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--ds-t-ink) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------- layout */

.main-container,
.container,
.landing-container,
.forum-container,
.questions-container,
.ranking-container,
.groups-container,
.profile-content,
.editor-wrapper,
.owner-dashboard,
.score-editor-container {
    width: min(100% - 48px, var(--ds-container)) !important;
    max-width: var(--ds-container) !important;
    margin-inline: auto !important;
}

/* {spacing.section} 96px rhythm between page chrome and content */
.main-container,
.landing-main {
    padding-top: var(--ds-space-section) !important;
    padding-bottom: var(--ds-space-section) !important;
}

/* --------------------------------------------------------------- cards
 * Elevation level 1: hairline stroke on canvas, {rounded.lg} 24px, flat. */

html body :is(.card, .feature-card, .question-card, .post-card, .member-card, .rankings-item, .group-card, .daily-challenge-card, .profile-card, .settings-card, .editor-card, .answer-card, .reply-card, .form-container, .class-duty-card, .home-panel):is(.card, .feature-card, .question-card, .post-card, .member-card, .rankings-item, .group-card, .daily-challenge-card, .profile-card, .settings-card, .editor-card, .answer-card, .reply-card, .form-container, .class-duty-card, .home-panel):is(.card, .feature-card, .question-card, .post-card, .member-card, .rankings-item, .group-card, .daily-challenge-card, .profile-card, .settings-card, .editor-card, .answer-card, .reply-card, .form-container, .class-duty-card, .home-panel):is(.card, .feature-card, .question-card, .post-card, .member-card, .rankings-item, .group-card, .daily-challenge-card, .profile-card, .settings-card, .editor-card, .answer-card, .reply-card, .form-container, .class-duty-card, .home-panel) {
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-lg) !important;
    background: var(--ds-t-surface) !important;
    color: var(--ds-t-ink) !important;
    box-shadow: none !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body .home-stats > div {
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-md) !important;
    background: var(--ds-t-surface-soft) !important;
    box-shadow: none !important;
}

/* No hover elevation — color, not shadow, is the depth device */
.card:hover,
.home-panel:hover,
.feature-card:hover,
.question-card:hover,
.post-card:hover,
.member-card:hover,
.rankings-item:hover,
.group-card:hover {
    box-shadow: none !important;
    transform: none !important;
}

.card-header,
.modal-header,
.card-footer,
.modal-footer,
.section-header,
.question-header,
.post-header {
    border-color: var(--ds-t-hairline-soft) !important;
    background: transparent !important;
}

/* Modal = elevation level 3: scrim + strong shadow */
.modal {
    background: var(--ds-overlay-scrim) !important;
}

.modal-content {
    max-width: min(920px, calc(100vw - 32px)) !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-lg) !important;
    background: var(--ds-t-surface) !important;
    box-shadow: var(--ds-shadow-modal) !important;
}

/* --------------------------------------------------------------- forms
 * {components.text-input}: {rounded.md}, hairline, 12px 14px, 48px target. */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
textarea,
select,
.search-input,
.filter-select,
.form-input,
.home-input,
.md-textarea,
.question-tag-picker-search,
.question-tag-picker-search input {
    min-height: 48px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-md) !important;
    background: var(--ds-t-surface) !important;
    color: var(--ds-t-ink) !important;
    box-shadow: none !important;
    font-family: var(--ds-font) !important;
    font-size: var(--ds-body-size) !important;
    font-weight: var(--ds-weight-body) !important;
    line-height: 1.45 !important;
    letter-spacing: -0.26px !important;
}

/* Focus communicated via ring, surface unchanged */
input:focus,
textarea:focus,
select:focus,
.search-input:focus,
.form-input:focus,
.home-input:focus {
    border: 1px solid var(--ds-t-hairline) !important;
    outline: 2px solid var(--ds-t-ink) !important;
    outline-offset: 1px !important;
}

.error-message,
.form-error {
    color: var(--ds-accent-magenta) !important;
    font-size: var(--ds-body-sm-size) !important;
}

/* -------------------------------------------------------------- badges
 * Taxonomy = figmaMono, uppercase, positive tracking; pastel chips. */

.badge,
.tag,
.question-tag-chip,
.home-badge,
.status-badge,
.role-badge,
.category-badge {
    min-height: 0 !important;
    padding: 4px 12px !important;
    border: 0 !important;
    border-radius: var(--ds-rounded-pill) !important;
    background: var(--ds-t-surface-soft) !important;
    color: var(--ds-t-ink) !important;
    font-family: var(--ds-font-mono) !important;
    font-size: var(--ds-caption-size) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
}

/* Pastel semantic chips — pastel surfaces always carry black ink,
 * in both themes ({colors.block-*} are brand surfaces, not theme surfaces). */
.badge-success, .status-badge.success, .badge.success {
    background: var(--ds-block-mint) !important;
    color: #000000 !important;
}

.badge-warning, .status-badge.warning, .badge.warning {
    background: var(--ds-block-cream) !important;
    color: #000000 !important;
}

.badge-danger, .badge-critical, .status-badge.danger, .badge.danger {
    background: var(--ds-block-pink) !important;
    color: #000000 !important;
}

.badge-info, .status-badge.info, .badge.info {
    background: var(--ds-block-lilac) !important;
    color: #000000 !important;
}

/* ------------------------------------------------------- tabs & pagers */

.md-toolbar,
.md-tabs,
.question-tag-picker-toolbar,
.question-tag-picker-tabs {
    border-color: var(--ds-t-hairline) !important;
    background: var(--ds-t-surface) !important;
    box-shadow: none !important;
}

/* {components.pricing-tab-selected}: selected = primary surface */
.md-tab.active,
.md-tab.is-active,
.question-tag-picker-tab.active,
.question-tag-picker-tab.is-active,
.pagination-btn-active,
.pagination .page-link.active {
    background: var(--ds-t-primary) !important;
    border-color: var(--ds-t-primary) !important;
    color: var(--ds-t-on-primary) !important;
}

/* -------------------------------------------------------------- tables */

table,
.table,
.score-table {
    border-color: var(--ds-t-hairline-soft) !important;
    background: var(--ds-t-surface) !important;
    border-radius: var(--ds-rounded-md) !important;
}

th {
    color: var(--ds-t-ink) !important;
    font-family: var(--ds-font-mono) !important;
    font-size: var(--ds-caption-size) !important;
    font-weight: 400 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    border-color: var(--ds-t-hairline-soft) !important;
}

/* Browser annotation pass: tighter, glassier top navigation with more breathing
 * room and reliable non-font fallback controls. */
html body #navbar#navbar,
html body .navbar#navbar {
    background: color-mix(in srgb, var(--ds-t-canvas) 74%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--ds-t-hairline-soft) 72%, transparent) !important;
    backdrop-filter: saturate(150%) blur(18px) !important;
    -webkit-backdrop-filter: saturate(150%) blur(18px) !important;
}

html body #navbar#navbar .navbar-container {
    width: min(100% - 48px, 1180px) !important;
    justify-content: space-between !important;
}

html body #navbar#navbar .navbar-left {
    gap: clamp(18px, 2.8vw, 34px) !important;
    min-width: 0 !important;
}

html body #navbar#navbar .navbar-brand {
    flex: 0 0 auto !important;
    margin-right: clamp(8px, 1vw, 14px) !important;
}

html body #navbar#navbar .navbar-menu {
    gap: clamp(6px, 0.9vw, 14px) !important;
    min-width: 0 !important;
}

html body #navbar#navbar .navbar-right {
    gap: 12px !important;
    flex: 0 0 auto !important;
}

html body #navbar#navbar .theme-switcher,
html body #navbar#navbar .user-profile .avatar {
    position: relative !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border: 1px solid color-mix(in srgb, var(--ds-t-ink) 12%, transparent) !important;
    background: color-mix(in srgb, var(--ds-t-surface) 84%, transparent) !important;
    color: var(--ds-t-ink) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 68%, transparent) !important;
    overflow: hidden !important;
}

html body #navbar#navbar button#themeSwitcher.theme-switcher {
    width: 38px !important;
    min-width: 38px !important;
}

html body #navbar#navbar .theme-switcher::before {
    content: "" !important;
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    background: #f59e0b !important;
    box-shadow:
        0 -10px 0 -7px #f59e0b,
        0 10px 0 -7px #f59e0b,
        10px 0 0 -7px #f59e0b,
        -10px 0 0 -7px #f59e0b,
        7px 7px 0 -7px #f59e0b,
        -7px 7px 0 -7px #f59e0b,
        7px -7px 0 -7px #f59e0b,
        -7px -7px 0 -7px #f59e0b !important;
}

html body #navbar#navbar .theme-switcher.theme-switcher--dark::before,
html body.dark-mode #navbar#navbar .theme-switcher::before,
html body[data-theme="dark"] #navbar#navbar .theme-switcher::before {
    width: 18px !important;
    height: 18px !important;
    background: var(--ds-t-ink) !important;
    box-shadow: inset -6px -3px 0 0 var(--ds-t-surface) !important;
}

html body #navbar#navbar .theme-switcher i {
    display: none !important;
}

html body #navbar#navbar .user-profile .avatar {
    font-family: var(--ds-font-mono) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

html body #navbar#navbar .user-profile .avatar img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

/* Unified no-avatar default: centered fa-user icon (matches profile page). */
html body #navbar#navbar .user-profile .avatar {
    display: grid !important;
    place-items: center !important;
}

html body #navbar#navbar .user-profile .avatar i {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    color: var(--ds-t-ink) !important;
    font-size: 17px !important;
    line-height: 1 !important;
}

html body #navbar#navbar .user-profile .avatar:not(:has(img))::before {
    content: none !important;
}

html body.landing-page .landing-container {
    width: min(100% - 48px, 1180px) !important;
    max-width: 1180px !important;
}

html body.landing-page .home-intro {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.92fr) !important;
    align-items: stretch !important;
    gap: clamp(24px, 3.4vw, 42px) !important;
    padding: clamp(34px, 4vw, 48px) !important;
    border: 0 !important;
    border-radius: 28px !important;
    background:
        linear-gradient(135deg, var(--ds-block-mint) 0%, var(--ds-block-lime) 100%) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #000000 8%, transparent) !important;
    overflow: hidden !important;
}

html body.landing-page .home-hero__copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
}

html body.landing-page .home-legacy__header {
    max-width: 620px !important;
    margin: 0 !important;
}

html body.landing-page .home-legacy__eyebrow,
html body.landing-page .np-dateline {
    color: #000000 !important;
    opacity: 0.68 !important;
}

html body.landing-page .home-legacy__title {
    margin-top: 30px !important;
    max-width: 560px !important;
    color: #000000 !important;
    font-size: clamp(42px, 5.3vw, 72px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.02em !important;
}

html body.landing-page .home-legacy__text {
    max-width: 620px !important;
    margin-top: 26px !important;
    color: #000000 !important;
    opacity: 0.68 !important;
    font-size: clamp(17px, 1.7vw, 22px) !important;
    line-height: 1.75 !important;
}

html body.landing-page .home-legacy__welcome {
    max-width: 620px !important;
    margin-top: 28px !important;
    padding-top: 24px !important;
    border-top: 1px solid color-mix(in srgb, #000000 16%, transparent) !important;
}

html body.landing-page .home-legacy__note {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #000000 !important;
    opacity: 0.66 !important;
    font-size: 16px !important;
}

html body.landing-page .home-hero__rail {
    align-self: center !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 18px !important;
    border: 1px solid color-mix(in srgb, #ffffff 60%, transparent) !important;
    border-radius: 28px !important;
    background: color-mix(in srgb, #ffffff 42%, transparent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent) !important;
}

html body.landing-page .home-hero__metric {
    min-height: 132px !important;
    height: 156px !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding: 20px !important;
    border: 1px solid color-mix(in srgb, #ffffff 54%, transparent) !important;
    border-radius: 24px !important;
    background: color-mix(in srgb, #ffffff 56%, var(--ds-block-lilac) 44%) !important;
}

html body.landing-page .home-hero__metric span {
    color: #000000 !important;
    opacity: 0.66 !important;
    font-family: var(--ds-font-mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.4px !important;
}

html body.landing-page .home-hero__metric strong {
    color: #000000 !important;
    font-size: clamp(30px, 3vw, 42px) !important;
    line-height: 0.98 !important;
    font-weight: 480 !important;
    letter-spacing: -0.02em !important;
}

html body.landing-page .home-hero__links {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

html body.landing-page .home-hero__links a {
    min-height: 60px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, #ffffff 60%, var(--ds-block-lilac) 40%) !important;
    color: #000000 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

html body.landing-page .home-panel--checkin .home-button {
    width: fit-content !important;
    align-self: flex-start !important;
    min-width: 132px !important;
    padding-inline: 24px !important;
}

html body.questions-page .questions-container {
    width: min(100% - 96px, 1080px) !important;
    max-width: 1080px !important;
}

html body.questions-page .questions-container > .card {
    width: 100% !important;
}

@media (max-width: 960px) {
    html body.landing-page .home-intro {
        grid-template-columns: 1fr !important;
        padding: 30px !important;
    }

    html body.landing-page .home-hero__rail {
        grid-template-columns: 1fr !important;
    }

    html body.landing-page .home-hero__links {
        grid-template-columns: 1fr !important;
    }

    html body.questions-page .questions-container {
        width: min(100% - 32px, 1080px) !important;
    }
}

html body .forum-container > .card,
html body .forum-container > .card > .card-header {
    border-radius: 0 !important;
}

html body :is(.forum-header):is(.forum-header):is(.forum-header) {
    min-height: 138px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: var(--ds-space-lg) !important;
}

html body .forum-header .np-kicker {
    display: none !important;
}

html body .forum-header h2 {
    align-self: center !important;
    margin: 0 !important;
}

td {
    color: var(--ds-t-ink) !important;
    font-size: var(--ds-body-sm-size) !important;
    font-weight: var(--ds-weight-body-sm) !important;
    border-color: var(--ds-t-hairline-soft) !important;
}

/* -------------------------------------------------------------- footer
 * {components.footer}: inverse-canvas ground (#000, both themes),
 * mono caption link columns + hairline attribution baseline. */

html body .footer,
html body footer {
    background: var(--ds-inverse-canvas) !important;
    color: rgba(255, 255, 255, 0.62) !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: var(--ds-space-xxl) !important;
    padding: var(--ds-space-xxl) var(--ds-space-xl) var(--ds-space-lg) !important;
}

html body .footer *,
html body footer * {
    color: rgba(255, 255, 255, 0.62) !important;
    font-family: var(--ds-font-mono) !important;
    font-size: var(--ds-caption-size) !important;
    line-height: 1.6 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    background: transparent !important;
}

html body .footer-container {
    width: 100% !important;
    max-width: var(--ds-container) !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

html body .footer-columns {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--ds-space-xl) var(--ds-space-lg) !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .footer-col-title {
    color: var(--ds-inverse-ink) !important;
    font-weight: 700 !important;
    margin: 0 0 var(--ds-space-sm) !important;
}

html body .footer-links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .footer-links li {
    margin: 0 !important;
    padding: 0 !important;
}

html body .footer-links a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
    color: rgba(255, 255, 255, 0.62) !important;
    text-decoration: none !important;
    transition: color 120ms ease !important;
}

html body .footer-links a:hover,
html body .footer-links a:focus-visible {
    color: var(--ds-inverse-ink) !important;
}

html body .footer-baseline {
    margin-top: var(--ds-space-xxl) !important;
    padding-top: var(--ds-space-md) !important;
    border-top: 1px solid var(--ds-on-inverse-soft) !important;
}

html body .footer-baseline p {
    margin: 0 !important;
}

@media (max-width: 960px) {
    html body .footer-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    html body .footer,
    html body footer {
        padding-left: var(--ds-space-md) !important;
        padding-right: var(--ds-space-md) !important;
    }

    html body .footer-columns {
        grid-template-columns: 1fr !important;
    }
}

/* ------------------------------------------------------------- images */

img.product-render,
.product-image img,
.question-image,
.uploaded-image,
.image-preview img {
    border-radius: var(--ds-rounded-md) !important;
    box-shadow: none !important;
}

/* =====================================================================
 * COLOR-BLOCK SECTIONS ({components.color-block-section})
 * One pastel block per viewport; pastel surfaces keep BLACK ink in both
 * themes. Blocks use {rounded.lg} + {spacing.xxl} interior padding.
 * ===================================================================== */

/* Shared pastel-block text contract */
html body .ds-block,
html body .home-intro,
html body .auth-card,
html body .ranking-hero,
html body .groups-hero,
html body .forum-header,
html body .challenge-header,
html body .checkin-action,
html body .home-fortune__box {
    border: 0 !important;
    border-radius: var(--ds-rounded-lg) !important;
    box-shadow: none !important;
}

html body .home-intro *,
html body .auth-card *,
html body .ranking-hero *,
html body .groups-hero *,
html body .forum-header *,
html body .challenge-header *,
html body .checkin-action *,
html body .home-fortune__box * {
    color: #000000 !important;
}

/* Home: lime hero panel ({components.color-block-section}).
 * Tripled :is() lifts specificity above legacy page-scoped rules. */
html body :is(.home-intro):is(.home-intro):is(.home-intro) {
    background: var(--ds-block-lime) !important;
    border: 0 !important;
    padding: var(--ds-space-xxl) !important;
}

/* Home rail: translucent white on the lime ground — one color block per
 * viewport (DESIGN.md), the rail is a layer of the SAME block, not a
 * second sticky note. */
html body :is(.home-hero__rail):is(.home-hero__rail):is(.home-hero__rail) {
    /* Fill the same height as the left copy column (title + lead + note) —
       repositioning a fixed-height card inside that row (top/center/bottom
       align) only moves the dead lime band around, it doesn't remove it.
       Instead let the metrics row grow to absorb the extra height while the
       button row stays a fixed, compact height at the bottom; each metric
       cell centers its label+value inside the taller box (see below) so the
       growth reads as the card breathing, not as empty space. */
    align-self: stretch !important;
    grid-template-rows: 1fr auto !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border: 0 !important;
}

/* Metrics occupy the flexible row; center their content vertically so a
   taller cell (from the row's 1fr growth) reads as generous padding around
   the number, not as blank space above or below it. */
html body :is(.home-hero__rail):is(.home-hero__rail):is(.home-hero__rail) .home-hero__metric {
    align-content: center !important;
}

html body :is(.home-fortune__box):is(.home-fortune__box):is(.home-fortune__box) {
    background: var(--ds-block-pink) !important;
    border: 0 !important;
}

/* Pastel-block ink is black in both themes */
html body :is(.home-intro, .home-hero__rail, .home-fortune__box):is(.home-intro, .home-hero__rail, .home-fortune__box) :is(h1, h2, h3, h4, p, li, label, span, div, a, small, strong, dt, dd):not(.btn):not(button) {
    color: #000000 !important;
}

html body :is(.home-hero__rail):is(.home-hero__rail):is(.home-hero__rail) :is(.home-hero__metric, .home-stats > div, .home-button, .btn, .home-link, .home-hero__links a) {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 0 !important;
    color: #000000 !important;
}

/* Hero rail nav links → DESIGN.md {components.button-secondary}: white pill,
   black text, pill(50px), no border, 44px touch target, button typography.
   Stacked specificity beats index.css `body.landing-page .home-hero__links a`
   which forced var(--mr-radius-sm)=8px rounded-rect. */
html body.landing-page :is(.home-hero__links):is(.home-hero__links) a,
html body :is(.home-hero__links):is(.home-hero__links):is(.home-hero__links) a {
    min-height: 44px !important;
    padding: 8px 18px 10px !important;
    border-radius: var(--ds-rounded-pill) !important;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--ds-ink) !important;
    font-family: var(--ds-font) !important;
    font-size: var(--ds-button-size) !important;
    font-weight: var(--ds-weight-button) !important;
    line-height: 1.4 !important;
    letter-spacing: -0.1px !important;
    text-decoration: none !important;
    text-align: center !important;
}

/* Rail metric labels: DESIGN.md caption token (figmaMono, 12px, uppercase,
   positive tracking) — taxonomy label, not body copy. Values: large number
   display, consistent weight. Both unified to the same type family and scale. */
html body :is(.home-hero__rail):is(.home-hero__rail):is(.home-hero__rail) .home-hero__metric :is(span, small) {
    font-family: var(--ds-font-mono) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.0 !important;
    letter-spacing: 0.55px !important;
    text-transform: uppercase !important;
    color: rgba(0, 0, 0, 0.52) !important;
}

html body :is(.home-hero__rail):is(.home-hero__rail):is(.home-hero__rail) .home-hero__metric strong {
    font-family: var(--ds-font) !important;
    font-size: clamp(20px, 2.6vw, 30px) !important;
    font-weight: 340 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.04em !important;
    color: var(--ds-ink) !important;
}

html body :is(.home-hero__rail):is(.home-hero__rail):is(.home-hero__rail) :is(.home-hero__metric, .home-hero__links a) :is(span, strong, small) {
    color: #000000 !important;
    background: transparent !important;
}

/* ------------------------------------------------------------------ *
 * Home "欢迎回来" hero — minimal light re-skin + refined left/right layout.
 * Replaces the single lime color-block with a near-white surface panel
 * (surface-soft ground + hairline), so the rail reads as real white cards
 * on a calm page rather than translucent layers on a saturated block.
 * Source order beats the lime rules above at equal specificity.
 * ------------------------------------------------------------------ */
html body :is(.home-intro):is(.home-intro):is(.home-intro) {
    gap: clamp(24px, 3vw, 44px) !important;
    padding: clamp(28px, 3vw, 40px) !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-lg) !important;
    background: var(--ds-t-surface-soft) !important;
    box-shadow: none !important;
}

/* Right rail becomes a clean white card sitting on the soft ground. */
html body :is(.home-hero__rail):is(.home-hero__rail):is(.home-hero__rail) {
    padding: 16px !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-lg) !important;
    background: var(--ds-t-surface) !important;
    gap: 12px !important;
}

/* Metric cells: soft-gray tiles that separate from the white rail without
   any color block; the challenge tile stays the emphasis with ink fill. */
html body :is(.home-hero__rail):is(.home-hero__rail):is(.home-hero__rail) :is(.home-hero__metric, .home-stats > div) {
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-md) !important;
    background: var(--ds-t-surface-soft) !important;
    color: var(--ds-t-ink) !important;
}

/* Challenge tile = the one accent: ink surface, inverse text/arrow. */
html body :is(.home-hero__rail):is(.home-hero__rail):is(.home-hero__rail) a.home-hero__metric--challenge {
    border-color: var(--ds-t-primary) !important;
    background: var(--ds-t-primary) !important;
}

html body :is(.home-hero__rail):is(.home-hero__rail):is(.home-hero__rail) a.home-hero__metric--challenge :is(span, strong, small, i) {
    color: var(--ds-t-on-primary) !important;
}

/* Rail nav links: hairline white pills on the light ground. */
html body :is(.home-hero__links):is(.home-hero__links):is(.home-hero__links) a {
    border: 1px solid var(--ds-t-hairline) !important;
    background: var(--ds-t-surface) !important;
    color: var(--ds-t-ink) !important;
}

html body :is(.home-hero__links):is(.home-hero__links):is(.home-hero__links) a:hover {
    background: color-mix(in srgb, var(--ds-t-ink) 5%, var(--ds-t-surface)) !important;
}

/* Ink stays black on the light panel; drop the pastel-block black override
   for the challenge tile which now sits on an ink surface. */
html body :is(.home-intro):is(.home-intro) :is(h1, h2, h3, p, span, small, strong, label):not(.home-hero__metric--challenge *) {
    color: var(--ds-t-ink) !important;
}

/* Auth (login/register): lime block — same surface as the contact form
 * in DESIGN.md ({components.color-block-section}). */
html body :is(.auth-card):is(.auth-card):is(.auth-card) {
    background: var(--ds-block-lime) !important;
    border: 0 !important;
    padding: var(--ds-space-xxl) !important;
}

html body :is(.auth-card):is(.auth-card) :is(h1, h2, h3, p, label, span, div, a, small):not(.btn) {
    color: #000000 !important;
}

html body :is(.auth-card):is(.auth-card) :is(input, textarea, select) {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

html body :is(.auth-card):is(.auth-card) :is(.btn, button, input[type="submit"]) {
    background: #000000 !important;
    color: #ffffff !important;
}

/* Ranking: lilac hero; podium rows get pastel grounds */
html body :is(.ranking-hero):is(.ranking-hero):is(.ranking-hero) {
    background: var(--ds-block-lilac) !important;
    border: 0 !important;
    padding: var(--ds-space-xxl) !important;
}

html body :is(.ranking-hero):is(.ranking-hero) :is(h1, h2, h3, p, span, div, a, small):not(.btn) {
    color: #000000 !important;
}

html body :is(.rankings-item:nth-child(1)):is(.rankings-item):is(.rankings-item) {
    background: var(--ds-block-lime) !important;
    border: 0 !important;
}

html body :is(.rankings-item:nth-child(2)):is(.rankings-item):is(.rankings-item) {
    background: var(--ds-block-mint) !important;
    border: 0 !important;
}

html body :is(.rankings-item:nth-child(3)):is(.rankings-item):is(.rankings-item) {
    background: var(--ds-block-cream) !important;
    border: 0 !important;
}

html body :is(.rankings-item:nth-child(-n+3)):is(.rankings-item),
html body :is(.rankings-item:nth-child(-n+3)):is(.rankings-item) :is(h1, h2, h3, p, span, div, a, small, strong) {
    color: #000000 !important;
}

/* Groups: mint hero */
html body :is(.groups-hero):is(.groups-hero):is(.groups-hero) {
    background: var(--ds-block-mint) !important;
    border: 0 !important;
    padding: var(--ds-space-xxl) !important;
}

html body :is(.groups-hero):is(.groups-hero) :is(h1, h2, h3, p, span, div, a, small):not(.btn) {
    color: #000000 !important;
}

/* Forum: cream header block */
html body :is(.forum-header):is(.forum-header):is(.forum-header) {
    background: var(--ds-block-cream) !important;
    border: 0 !important;
    padding: var(--ds-space-xl) var(--ds-space-xxl) !important;
    border-radius: var(--ds-rounded-lg) !important;
}

html body :is(.forum-header):is(.forum-header) :is(h1, h2, h3, p, span, div, a, small):not(.btn) {
    color: #000000 !important;
}

html body :is(.forum-header):is(.forum-header) :is(.btn, button) {
    background: #000000 !important;
    color: #ffffff !important;
}

/* Daily challenge: navy story block ({components.color-block-section-navy})
 * — the only inverse surface above the footer. */
html body :is(.challenge-header):is(.challenge-header):is(.challenge-header) {
    background: var(--ds-block-navy) !important;
    border: 0 !important;
    padding: var(--ds-space-xxl) !important;
    border-radius: var(--ds-rounded-lg) !important;
}

html body :is(.challenge-header):is(.challenge-header) :is(h1, h2, h3, p, span, div, a, small):not(.btn) {
    color: var(--ds-inverse-ink) !important;
}

html body :is(.challenge-header):is(.challenge-header) :is(.btn, button) {
    background: var(--ds-on-inverse-soft) !important;
    color: var(--ds-inverse-ink) !important;
}

html body :is(.challenge-streak-badge):is(.challenge-streak-badge) {
    background: var(--ds-block-lime) !important;
    color: #000000 !important;
    border: 0 !important;
    border-radius: var(--ds-rounded-pill) !important;
}

/* Checkin: coral action block */
html body :is(.checkin-action):is(.checkin-action):is(.checkin-action) {
    background: var(--ds-block-coral) !important;
    border: 0 !important;
    padding: var(--ds-space-xxl) !important;
    border-radius: var(--ds-rounded-lg) !important;
}

html body :is(.checkin-action):is(.checkin-action) :is(h1, h2, h3, p, span, div, small):not(.btn) {
    color: #000000 !important;
}

html body :is(.checkin-action):is(.checkin-action) :is(.btn, button) {
    background: #000000 !important;
    color: #ffffff !important;
}

/* ---------------------------------------------------------- responsive
 * DESIGN.md breakpoints; nav collapse threshold matches legacy JS (833px). */

@media (max-width: 833px) {
    #navbar,
    .navbar {
        height: 56px !important;
        min-height: 56px !important;
    }

    #navbar .navbar-container,
    .navbar-container {
        width: min(100% - 24px, var(--ds-container)) !important;
        height: 56px !important;
    }

    .navbar-toggle,
    #navbar .navbar-toggle,
    .navbar .navbar-toggle {
        display: inline-flex !important;
    }

    #navbar .navbar-menu,
    .navbar-menu {
        top: 56px !important;
        border: 0 !important;
        border-top: 1px solid var(--ds-t-hairline-soft) !important;
        border-radius: 0 !important;
        background: var(--ds-t-canvas) !important;
        color: var(--ds-t-ink) !important;
    }

    .main-container,
    .container,
    .landing-container,
    .forum-container,
    .questions-container,
    .ranking-container,
    .groups-container,
    .profile-content,
    .editor-wrapper,
    .owner-dashboard,
    .score-editor-container {
        width: min(100% - 24px, var(--ds-container)) !important;
    }

    .main-container,
    .landing-main {
        padding-top: var(--ds-space-xxl) !important;
        padding-bottom: var(--ds-space-xxl) !important;
    }

    h1,
    .page-title,
    .home-legacy__title {
        font-size: clamp(34px, 9vw, 48px) !important;
    }

    h2,
    .section-title {
        font-size: 22px !important;
    }

    /* Color blocks bleed to viewport edge below 768px (poster effect) */
    html body .home-intro,
    html body .auth-card,
    html body .ranking-hero,
    html body .groups-hero,
    html body .forum-header,
    html body .challenge-header,
    html body .checkin-action {
        padding: var(--ds-space-xl) !important;
    }
}

@media (max-width: 560px) {
    /* Pill CTAs go full-width at mobile per DESIGN.md */
    .form-actions .btn,
    .auth-card .btn,
    .auth-card input[type="submit"] {
        width: 100% !important;
    }
}

@media (min-width: 834px) {
    .navbar-toggle,
    #navbar .navbar-toggle,
    .navbar .navbar-toggle {
        display: none !important;
    }
}

/* ------------------------------------------------- specificity guards */

html body #navbar,
html body .navbar,
html body #navbar.navbar {
    background: var(--ds-t-canvas) !important;
    background-color: var(--ds-t-canvas) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--ds-t-hairline-soft) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body #navbar .navbar-brand__mark,
html body #navbar.navbar .navbar-brand .navbar-brand__mark {
    background: transparent !important;
    border: 0 !important;
    color: var(--ds-t-ink) !important;
}

/* Canvas guard against the late `body { background: var(--bg-base) }`
 * surface system and decorative overlays. */
html body,
html body::before {
    background: var(--ds-t-canvas) !important;
    background-color: var(--ds-t-canvas) !important;
    background-image: none !important;
}

html body::after {
    background: none !important;
    background-image: none !important;
}

html body button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password),
html body .btn,
html body a.btn,
html body .home-button,
html body .home-link,
html body .question-tag-field__trigger,
html body .pagination-btn,
html body .page-link,
html body .question-tag-picker-tab,
html body .md-btn,
html body .md-tab {
    min-height: 44px !important;
    min-width: 44px !important;
    border-radius: var(--ds-rounded-pill) !important;
    box-shadow: none !important;
}

html body .btn-primary,
html body a.btn-primary,
html body input[type="submit"],
html body .home-button,
html body .upload-btn,
html body .take-photo-btn {
    background: var(--ds-t-primary) !important;
    border: 0 !important;
    color: var(--ds-t-on-primary) !important;
}

/* Filter toggles are secondary; the upload action is the page primary. */
html body.questions-page .questions-container #questionFilterBtn,
html body.questions-page .question-category-filter-btn,
html body.questions-page .question-tag-filter-btn {
    min-height: 44px !important;
    border-radius: var(--ds-rounded-pill) !important;
    background: var(--ds-t-surface) !important;
    border: 1px solid var(--ds-t-hairline) !important;
    color: var(--ds-t-ink) !important;
    box-shadow: none !important;
}

html body.questions-page .questions-container #uploadQuestionBtn {
    min-height: 44px !important;
    border-radius: var(--ds-rounded-pill) !important;
    background: var(--ds-t-primary) !important;
    border: 0 !important;
    color: var(--ds-t-on-primary) !important;
    box-shadow: none !important;
}

html body.landing-page .home-input,
html body.landing-page #app .home-input,
html body.landing-page input.home-input,
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
html body textarea,
html body select,
html body .search-input,
html body .filter-select,
html body .form-input {
    min-height: 48px !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

/* ------------------------------------------------ accessibility targets */

html body .skip-link {
    position: fixed !important;
    top: -200px !important;
    left: 12px !important;
    width: auto !important;
    height: auto !important;
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 20px !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: nowrap !important;
    border-radius: var(--ds-rounded-pill) !important;
    background: var(--ds-t-primary) !important;
    color: var(--ds-t-on-primary) !important;
    z-index: 10000 !important;
}

html body .skip-link:focus,
html body .skip-link:focus-visible {
    top: 12px !important;
}

html body .user-link,
html body .auth-link,
html body a.user-name {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
    min-width: 32px !important;
}

/* ------------------------------------------------------ dark theme guards
 * Legacy stylesheets carry direct `body.dark-mode ...` background/color
 * rules; these guards outrank them and keep both themes on-system. */

html :is(body.dark-mode, body[data-theme="dark"]):is(body.dark-mode, body[data-theme="dark"]):is(body.dark-mode, body[data-theme="dark"]),
html :is(body.dark-mode, body[data-theme="dark"]):is(body.dark-mode, body[data-theme="dark"]):is(body.dark-mode, body[data-theme="dark"])::before {
    background: var(--ds-inverse-canvas) !important;
    background-color: var(--ds-inverse-canvas) !important;
    background-image: none !important;
    color: var(--ds-inverse-ink) !important;
}

html body.dark-mode::after,
html body[data-theme="dark"]::after {
    background: none !important;
    background-image: none !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) #navbar,
html :is(body.dark-mode, body[data-theme="dark"]) .navbar {
    background: var(--ds-inverse-canvas) !important;
    background-color: var(--ds-inverse-canvas) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* Legacy dark rules paint the brand mark with a light plate; keep it text. */
html :is(body.dark-mode, body[data-theme="dark"]) #navbar .navbar-brand__mark,
html :is(body.dark-mode, body[data-theme="dark"]) #navbar.navbar .navbar-brand .navbar-brand__mark {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    color: var(--ds-inverse-ink) !important;
}

/* Cream rail metric tiles keep translucent-white plates in dark theme */
html :is(body.dark-mode, body[data-theme="dark"]) :is(.home-hero__rail):is(.home-hero__rail):is(.home-hero__rail) :is(.home-hero__metric, .home-stats > *, .home-button, .btn, .home-link, .home-hero__links a) {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 0 !important;
    color: #000000 !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) :is(.home-hero__rail):is(.home-hero__rail):is(.home-hero__rail) :is(.home-hero__metric, .home-hero__links a) :is(span, strong, small) {
    color: #000000 !important;
    background: transparent !important;
}

/* Pastel blocks are brand surfaces: same fill and black ink in dark mode.
 * :is() doubling outranks legacy `body.dark-mode.page X Y` rules. */
html :is(body.dark-mode, body[data-theme="dark"]) :is(.home-intro):is(.home-intro):is(.home-intro) {
    background: var(--ds-block-lime) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) :is(.auth-card):is(.auth-card):is(.auth-card) {
    background: var(--ds-block-lime) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) :is(.ranking-hero):is(.ranking-hero):is(.ranking-hero) {
    background: var(--ds-block-lilac) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) :is(.groups-hero):is(.groups-hero):is(.groups-hero) {
    background: var(--ds-block-mint) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) :is(.forum-header):is(.forum-header):is(.forum-header) {
    background: var(--ds-block-cream) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) :is(.checkin-action):is(.checkin-action):is(.checkin-action) {
    background: var(--ds-block-coral) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) :is(.home-hero__rail):is(.home-hero__rail):is(.home-hero__rail) {
    background: var(--ds-block-cream) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) :is(.home-fortune__box):is(.home-fortune__box):is(.home-fortune__box) {
    background: var(--ds-block-pink) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) :is(.home-intro, .auth-card, .ranking-hero, .groups-hero, .forum-header, .checkin-action, .home-hero__rail, .home-fortune__box):is(.home-intro, .auth-card, .ranking-hero, .groups-hero, .forum-header, .checkin-action, .home-hero__rail, .home-fortune__box):is(.home-intro, .auth-card, .ranking-hero, .groups-hero, .forum-header, .checkin-action, .home-hero__rail, .home-fortune__box) :is(h1, h2, h3, h4, p, li, label, span, div, a, small, strong, dt, dd):not(.btn):not(button) {
    color: #000000 !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) :is(.auth-card, .forum-header, .checkin-action) :is(.btn, button, input[type="submit"]) {
    background: #000000 !important;
    color: #ffffff !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) .auth-card :is(input, textarea, select) {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

/* Podium rows keep pastel fills + black ink in dark theme */
html :is(body.dark-mode, body[data-theme="dark"]) :is(.rankings-item:nth-child(1)):is(.rankings-item) {
    background: var(--ds-block-lime) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) :is(.rankings-item:nth-child(2)):is(.rankings-item) {
    background: var(--ds-block-mint) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) :is(.rankings-item:nth-child(3)):is(.rankings-item) {
    background: var(--ds-block-cream) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) .rankings-item:nth-child(-n+3),
html :is(body.dark-mode, body[data-theme="dark"]) .rankings-item:nth-child(-n+3) :is(h1, h2, h3, p, span, div, a, small, strong) {
    color: #000000 !important;
}

/* Navy challenge block already inverse; keep white ink in dark theme */
html :is(body.dark-mode, body[data-theme="dark"]) :is(.challenge-header):is(.challenge-header):is(.challenge-header) {
    background: var(--ds-block-navy) !important;
}

/* Pastel semantic chips keep black ink in dark theme */
html :is(body.dark-mode, body[data-theme="dark"]) :is(.badge-success, .badge-warning, .badge-danger, .badge-critical, .badge-info, .status-badge.success, .status-badge.warning, .status-badge.danger, .status-badge.info) {
    color: #000000 !important;
}

/* ================================================================
 * PAGE-LEVEL LAYOUT REPAIRS + de-AI-ification
 * ================================================================ */

/* Question rows: the legacy 4-column grid collapses when its first cell is
 * hidden, squeezing titles to 0 width. Flex layout is resilient to hidden
 * cells and keeps the title (the row's main content) visible.
 * Chrome follows {components.pricing-card-feature-row}: quiet list rows
 * separated by hairline-soft inside ONE card, not ten nested mini-cards. */
html body .question-row .question-row-check {
    display: none !important;
}

html body :is(.question-row):is(.question-row):is(.question-row) {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) minmax(190px, 280px) 88px !important;
    align-items: center !important;
    column-gap: var(--ds-space-md) !important;
    min-width: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ds-t-hairline-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 11px 6px !important;
    min-height: 0 !important;
}

html body .questions-grid .question-row:last-child {
    border-bottom: 0 !important;
}

/* Column header: same grid so labels sit above their column, not decoration */
html body :is(.questions-table-header):is(.questions-table-header) {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) minmax(190px, 280px) 88px !important;
    align-items: center !important;
    column-gap: var(--ds-space-md) !important;
    padding: 0 6px 10px !important;
    border-bottom: 1px solid var(--ds-t-hairline) !important;
    margin-bottom: 2px !important;
}

html body .questions-table-header__cell {
    color: var(--ds-t-ink) !important;
    opacity: 0.5 !important;
    font-family: var(--ds-font-mono) !important;
    font-size: var(--ds-caption-size) !important;
    font-weight: 400 !important;
    letter-spacing: 0.6px !important;
}

html body .questions-table-header__tags,
html body .questions-table-header__difficulty {
    text-align: right !important;
}

/* Status glyph: the row's leading signal. Unanswered stays a quiet gray
 * dash (secondary); answered states get full-strength semantic ink so the
 * eye can scan pass/fail at a glance without any chip or background. */
html body :is(.question-row-status):is(.question-row-status) {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body .question-row-status i {
    font-size: 11px !important;
    line-height: 1 !important;
    color: var(--ds-t-ink) !important;
    opacity: 0.28 !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

html body .question-row-status i.fa-check,
html body .question-row-status i.status-correct {
    color: var(--ds-success) !important;
    opacity: 1 !important;
    font-weight: 900 !important;
}

html body .question-row-status i.fa-times,
html body .question-row-status i.status-wrong {
    color: var(--ds-accent-magenta) !important;
    opacity: 1 !important;
    font-weight: 900 !important;
}

html body .question-row .question-row-status {
    flex: 0 0 auto !important;
}

html body :is(.question-row-title-module):is(.question-row-title-module):is(.question-row-title-module) {
    min-width: 0 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: var(--ds-space-sm) !important;
    width: auto !important;
}

html body :is(.question-problem-no):is(.question-problem-no) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    color: var(--ds-t-ink) !important;
    font-family: var(--ds-font-mono) !important;
    font-size: 13px !important;
    letter-spacing: 0.54px !important;
}

html body :is(.question-title-text):is(.question-title-text):is(.question-title-text) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--ds-t-ink) !important;
    font-size: var(--ds-body-size) !important;
    font-weight: var(--ds-weight-headline) !important;
    text-decoration: none !important;
}

html body :is(.question-row-tags):is(.question-row-tags) {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    gap: var(--ds-space-xxs) !important;
}

html body :is(.question-row-difficulty-cell):is(.question-row-difficulty-cell) {
    display: flex !important;
    justify-content: flex-end !important;
}

/* Titles are the row's content: keep them visible above the mobile cutoff
 * (legacy hid them below 960px, leaving rows with only a P-number). */
@media (min-width: 641px) {
    html body :is(.question-title-text):is(.question-title-text):is(.question-title-text):is(.question-title-text) {
        display: block !important;
    }
}

/* Question taxonomy: quiet mono text labels (weight carries hierarchy),
 * one pastel difficulty chip per row is the only color moment. */
html body .question-row :is(.category-tag, .question-topic-tag):is(.category-tag, .question-topic-tag) {
    background: transparent !important;
    border: 0 !important;
    color: var(--ds-t-ink) !important;
    border-radius: 0 !important;
    padding: 0 4px !important;
    min-height: 0 !important;
    font-family: var(--ds-font-mono) !important;
    font-size: var(--ds-caption-size) !important;
    font-weight: 400 !important;
    letter-spacing: 0.6px !important;
    box-shadow: none !important;
    opacity: 0.62;
}

/* Difficulty = pastel semantic chips, black ink in both themes */
html body :is(.question-difficulty, .difficulty-tag):is(.question-difficulty, .difficulty-tag):is(.question-difficulty, .difficulty-tag) {
    border: 0 !important;
    border-radius: var(--ds-rounded-pill) !important;
    padding: 3px 10px !important;
    font-family: var(--ds-font-mono) !important;
    font-size: var(--ds-caption-size) !important;
    font-weight: 400 !important;
    letter-spacing: 0.6px !important;
    background: var(--ds-block-mint) !important;
    color: #000000 !important;
}

html body :is(.question-difficulty.medium, .difficulty-tag.medium):is(.question-difficulty, .difficulty-tag):is(.question-difficulty, .difficulty-tag) {
    background: var(--ds-block-cream) !important;
    color: #000000 !important;
}

html body :is(.question-difficulty.hard, .difficulty-tag.hard):is(.question-difficulty, .difficulty-tag):is(.question-difficulty, .difficulty-tag) {
    background: var(--ds-block-pink) !important;
    color: #000000 !important;
}

@media (max-width: 640px) {
    html body :is(.question-row):is(.question-row):is(.question-row),
    html body :is(.questions-table-header):is(.questions-table-header) {
        grid-template-columns: 22px minmax(0, 1fr) !important;
        min-height: 0 !important;
    }

    html body :is(.question-row-tags):is(.question-row-tags),
    html body :is(.question-row-difficulty-cell):is(.question-row-difficulty-cell),
    html body .questions-table-header__tags,
    html body .questions-table-header__difficulty {
        display: none !important;
    }

    html body :is(.question-row-title-module):is(.question-row-title-module) {
        grid-column: 2 / -1 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
    }

    html body :is(.question-title-text):is(.question-title-text) {
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* Question jump is an immediate lookup field. The icon and subtle pending
 * mark live inside the control, so the interaction stays compact without a
 * second button competing with the card's content. */
html body.landing-page:is(body):is(body) :is(.home-jump):is(.home-jump):is(.home-jump) {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 52px !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: 14px !important;
    background: var(--ds-t-surface-soft) !important;
    transition: border-color 160ms ease, background-color 160ms ease !important;
}

html body.landing-page:is(body):is(body) :is(.home-jump):is(.home-jump):is(.home-jump):focus-within {
    border-color: var(--ds-t-ink) !important;
    background: var(--ds-t-surface) !important;
}

html body.landing-page:is(body):is(body) :is(.home-jump):is(.home-jump):is(.home-jump) input.home-input.home-input.home-input {
    display: block !important;
    width: 100% !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 0 46px 0 48px !important;
    border: 0 !important;
    border-radius: inherit !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ds-t-ink) !important;
    font-size: 15px !important;
}

html body.landing-page:is(body):is(body) :is(.home-jump):is(.home-jump):is(.home-jump) input.home-input.home-input.home-input::placeholder {
    color: var(--ds-t-ink-muted) !important;
    opacity: 1 !important;
}

html body.landing-page:is(body):is(body) :is(.home-jump__icon):is(.home-jump__icon) {
    position: absolute !important;
    z-index: 1 !important;
    top: 50% !important;
    left: 17px !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: -9px !important;
    color: var(--ds-t-ink-muted) !important;
    font-size: 16px !important;
    line-height: 18px !important;
    pointer-events: none !important;
}

html body.landing-page:is(body):is(body) :is(.home-jump__indicator):is(.home-jump__indicator) {
    position: absolute !important;
    top: 50% !important;
    right: 17px !important;
    width: 14px !important;
    height: 14px !important;
    margin-top: -7px !important;
    border: 2px solid color-mix(in srgb, var(--ds-t-ink) 18%, transparent) !important;
    border-top-color: var(--ds-t-ink) !important;
    border-radius: 50% !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

html body.landing-page:is(body):is(body) :is(.home-jump.is-pending):is(.home-jump.is-pending) .home-jump__indicator {
    opacity: 1 !important;
    animation: home-jump-spin 720ms linear infinite !important;
}

@keyframes home-jump-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    html body.landing-page:is(body):is(body) :is(.home-jump.is-pending):is(.home-jump.is-pending) .home-jump__indicator {
        animation: none !important;
    }
}

/* =====================================================================
 * GLOBAL BUTTON LANGUAGE V5
 * Two surfaced styles only: blue fill for the primary action and a blue
 * outline for supporting actions. Utility icons, tabs, tags and pagination
 * keep their purpose-built geometry outside this contract.
 * ===================================================================== */

:root {
    --ds-action-blue: #0878e8;
    --ds-action-blue-hover: #0067cc;
    --ds-action-blue-soft: color-mix(in srgb, var(--ds-action-blue) 8%, transparent);
    --ds-action-danger: #c9362b;
}

:is(#mr-button-language-v5, html):is(#mr-button-language-v5-lock-1, html):is(#mr-button-language-v5-lock-2, html) body :is(
    .btn,
    a.btn,
    .button,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .btn-ghost,
    .btn-fill,
    .btn-quiet,
    .primary-btn,
    .secondary-btn,
    .cancel-btn,
    .action-button,
    .home-button,
    .upload-btn,
    .take-photo-btn,
    .upload-btn-text-icon,
    .page-state__action,
    .ops-secondary-button,
    .ops-danger-button,
    .avatar-action-btn,
    .profile-account-action,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
) {
    box-sizing: border-box !important;
    min-height: 36px !important;
    padding: 7px 16px !important;
    border: 1px solid var(--ds-action-blue) !important;
    border-radius: var(--ds-rounded-full) !important;
    background: var(--ds-action-blue) !important;
    color: #ffffff !important;
    font-family: var(--ds-font) !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease !important;
}

:is(#mr-button-language-v5, html):is(#mr-button-language-v5-lock-1, html):is(#mr-button-language-v5-lock-2, html) body :is(
    .btn,
    a.btn,
    .button,
    .btn-primary,
    .primary-btn,
    .action-button,
    .home-button,
    .upload-btn,
    .take-photo-btn,
    .page-state__action,
    .avatar-save-btn,
    input[type="submit"]
):is(:hover, :active) {
    border-color: var(--ds-action-blue-hover) !important;
    background: var(--ds-action-blue-hover) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    filter: none !important;
}

:is(#mr-button-language-v5, html):is(#mr-button-language-v5-lock-1, html):is(#mr-button-language-v5-lock-2, html) body :is(
    .btn-secondary,
    .btn-outline,
    .btn-ghost,
    .btn-quiet,
    .button-secondary,
    .secondary-btn,
    .cancel-btn,
    .btn-light,
    .btn-tertiary,
    .upload-btn-text-icon,
    .ops-secondary-button,
    .avatar-cancel-btn
) {
    border: 1px solid var(--ds-action-blue) !important;
    background: transparent !important;
    color: var(--ds-action-blue) !important;
}

:is(#mr-button-language-v5, html):is(#mr-button-language-v5-lock-1, html):is(#mr-button-language-v5-lock-2, html) body :is(
    .btn-secondary,
    .btn-outline,
    .btn-ghost,
    .btn-quiet,
    .button-secondary,
    .secondary-btn,
    .cancel-btn,
    .btn-light,
    .btn-tertiary,
    .upload-btn-text-icon,
    .ops-secondary-button,
    .avatar-cancel-btn
):is(:hover, :active) {
    border-color: var(--ds-action-blue-hover) !important;
    background: var(--ds-action-blue-soft) !important;
    color: var(--ds-action-blue-hover) !important;
}

:is(#mr-button-language-v5, html):is(#mr-button-language-v5-lock-1, html):is(#mr-button-language-v5-lock-2, html) body :is(
    .btn-danger,
    .ops-danger-button,
    .question-delete-action
) {
    border-color: var(--ds-action-danger) !important;
    background: transparent !important;
    color: var(--ds-action-danger) !important;
}

:is(#mr-button-language-v5, html):is(#mr-button-language-v5-lock-1, html):is(#mr-button-language-v5-lock-2, html) body :is(
    .btn-danger,
    .ops-danger-button,
    .question-delete-action
):is(:hover, :active) {
    border-color: var(--ds-action-danger) !important;
    background: var(--ds-action-danger) !important;
    color: #ffffff !important;
}

:is(#mr-button-language-v5, html):is(#mr-button-language-v5-lock-1, html):is(#mr-button-language-v5-lock-2, html) body :is(
    .btn,
    a.btn,
    .button,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .btn-ghost,
    .btn-fill,
    .btn-quiet,
    .primary-btn,
    .secondary-btn,
    .cancel-btn,
    .action-button,
    .home-button,
    .upload-btn,
    .take-photo-btn,
    .upload-btn-text-icon,
    .page-state__action,
    .ops-secondary-button,
    .ops-danger-button,
    .avatar-action-btn,
    .profile-account-action,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ds-action-blue) 42%, transparent) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

:is(#mr-button-language-v5, html):is(#mr-button-language-v5-lock-1, html):is(#mr-button-language-v5-lock-2, html) body :is(
    .btn-sm,
    .btn-xs
) {
    min-height: 32px !important;
    padding: 5px 11px !important;
    font-size: 12px !important;
}

:is(#mr-button-language-v5, html):is(#mr-button-language-v5-lock-1, html):is(#mr-button-language-v5-lock-2, html) body :is(
    .btn,
    a.btn,
    .button,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .btn-ghost,
    .btn-fill,
    .btn-quiet,
    .primary-btn,
    .secondary-btn,
    .cancel-btn,
    .action-button,
    .home-button,
    .upload-btn,
    .take-photo-btn,
    .upload-btn-text-icon,
    .page-state__action,
    .ops-secondary-button,
    .ops-danger-button,
    .avatar-action-btn,
    .profile-account-action,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
):disabled,
:is(#mr-button-language-v5, html):is(#mr-button-language-v5-lock-1, html):is(#mr-button-language-v5-lock-2, html) body :is(.btn, a.btn, .button).disabled {
    opacity: 0.42 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

@media (pointer: coarse) {
    :is(#mr-button-language-v5, html):is(#mr-button-language-v5-lock-1, html):is(#mr-button-language-v5-lock-2, html) body :is(
        .btn,
        a.btn,
        .button,
        .btn-primary,
        .btn-secondary,
        .btn-outline,
        .btn-danger,
        .btn-ghost,
        .btn-fill,
        .btn-quiet,
        .primary-btn,
        .secondary-btn,
        .cancel-btn,
        .action-button,
        .home-button,
        .upload-btn,
        .take-photo-btn,
        .upload-btn-text-icon,
        .page-state__action,
        .ops-secondary-button,
        .ops-danger-button,
        .avatar-action-btn,
        .profile-account-action,
        input[type="button"],
        input[type="submit"],
        input[type="reset"]
    ) {
        min-height: 40px !important;
    }

}

/* button-language-v5-icon-only: icon actions stay circular, not wide pills. */
:is(#mr-button-icon-tail-v5, html):is(#mr-button-icon-tail-v5-lock, html) body :is(button.btn, a.btn):has(> i:only-child) {
    width: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
}

@media (pointer: coarse) {
    :is(#mr-button-icon-tail-v5, html):is(#mr-button-icon-tail-v5-lock, html) body :is(button.btn, a.btn):has(> i:only-child) {
        width: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
}

html:is([data-theme="dark"], :has(body.dark-mode)) {
    --ds-action-blue: #4b9cff;
    --ds-action-blue-hover: #72b2ff;
}

/* Keep hover feedback fill-only. No button may add a border or ring. */
html body :is(.btn, .button, button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"]):hover {
    border: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

html body :is(.btn, .button, button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"]) {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: none !important;
    filter: none !important;
}

html body :is(.btn, .button, button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"])::before,
html body :is(.btn, .button, button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"])::after {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Specificity lock: later legacy button selectors carry several :not()
 * clauses, so repeat the button group to keep the borderless contract final. */
html body:is(body):is(body) :is(
    .btn,
    .button,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"]
):is(
    .btn,
    .button,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"]
) {
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    outline: 0 !important;
    box-shadow: none !important;
}

html body:is(body):is(body) :is(
    .btn,
    .button,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"]
):is(:hover, :focus, :focus-visible, :active) {
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Buttons use fill and typography for hierarchy. Keep every interaction
 * state borderless so controls never gain a visible outline or double ring. */
html body :is(
    .btn,
    .button,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"]
) {
    border: 0 !important;
}

html body :is(
    .btn,
    .button,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"]
):is(:focus, :focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Ranking rows (actual runtime class is .ranking-item, not .rankings-item):
 * ink rank circles, pastel podium, mono role chips. */
html body :is(.ranking-rank):is(.ranking-rank):is(.ranking-rank) {
    background: var(--ds-t-primary) !important;
    color: var(--ds-t-on-primary) !important;
    border: 0 !important;
    border-radius: var(--ds-rounded-full) !important;
    font-family: var(--ds-font-mono) !important;
    box-shadow: none !important;
}

html body :is(.ranking-item):is(.ranking-item):is(.ranking-item) {
    border: 0 !important;
    border-bottom: 1px solid var(--ds-t-hairline-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Board top-3 sit on the documented {colors.block-*} pastel family — lime /
 * mint / cream — the same "sticky note" surfaces DESIGN.md uses for story
 * blocks (never new brand colors, per Don'ts). Keyed on the
 * .ranking-item--rank-N modifier (added by RankingPage.js only for
 * globalRank <= 3), NOT :nth-child, so page 2 (ranks 21-23) is not re-tinted.
 * {rounded.md} 8px + black ink, re-asserted in the tail refinement block. */
html body .ranking-list :is(.ranking-item--rank-1):is(.ranking-item):is(.ranking-item) {
    background: var(--ds-block-lime) !important;
    border-bottom: 0 !important;
}

html body .ranking-list :is(.ranking-item--rank-2):is(.ranking-item):is(.ranking-item) {
    background: var(--ds-block-mint) !important;
    border-bottom: 0 !important;
}

html body .ranking-list :is(.ranking-item--rank-3):is(.ranking-item):is(.ranking-item) {
    background: var(--ds-block-cream) !important;
    border-bottom: 0 !important;
}

/* "普通用户" default-role chips repeat on every row and carry no
 * information — decorative noise, hidden per taxonomy restraint. */
html body .role-tag.custom {
    display: none !important;
}

/* Role tags carry inline background-color; stylesheet !important outranks
 * inline non-important. Map to the lilac taxonomy chip. */
html body :is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag) {
    background: var(--ds-block-lilac) !important;
    background-color: var(--ds-block-lilac) !important;
    border: 0 !important;
    color: #000000 !important;
    border-radius: var(--ds-rounded-pill) !important;
    padding: 2px 8px !important;
    font-family: var(--ds-font-mono) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.54px !important;
    text-transform: uppercase !important;
}

/* Ranking sidebar ("本期榜首"): align to the navy story block */
html body :is(.ranking-sidebar):is(.ranking-sidebar) :is(.card, .ranking-board),
html body :is(.ranking-sidebar):is(.ranking-sidebar):is(.ranking-sidebar) {
    background: var(--ds-block-navy) !important;
    border: 0 !important;
    border-radius: var(--ds-rounded-lg) !important;
    box-shadow: none !important;
}

html body .ranking-sidebar :is(h1, h2, h3, p, span, div, a, small, strong):not(.ranking-rank):not(.ranking-podium__rank):not(.role-tag) {
    color: var(--ds-inverse-ink) !important;
}

html body .ranking-sidebar :is(.ranking-podium__rank):is(.ranking-podium__rank):is(.ranking-podium__rank) {
    color: var(--ds-block-navy) !important;
}

html body .ranking-sidebar :is(.ranking-item, .ranking-podium__item) {
    background: var(--ds-on-inverse-soft) !important;
    border: 0 !important;
    border-radius: var(--ds-rounded-md) !important;
    box-shadow: none !important;
    outline: none !important;
}

html body .ranking-sidebar :is(.ranking-rank, .ranking-podium__rank) {
    background: var(--ds-inverse-ink) !important;
    color: var(--ds-block-navy) !important;
    border: 0 !important;
    border-radius: var(--ds-rounded-full) !important;
    font-family: var(--ds-font-mono) !important;
    box-shadow: none !important;
}

/* Sidebar kicker stays legible on navy */
html body .ranking-sidebar .ranking-kicker {
    color: var(--ds-inverse-ink) !important;
    opacity: 0.7;
}

/* Serif purge: newspaper-era Georgia/Songti rules bleed through on titles,
 * stats and figures; the system voice is one sans family. */
html body :is(h1, h2, h3, h4, h5, h6, p, .post-title, .question-row-title, .np-figure, .attachments-header, .replies-header h3, .card-header h3, .profile-stats .stat-value, .home-panel__title, .home-panel__subhead, .home-legacy__title, .ranking-score .score) {
    font-family: var(--ds-font) !important;
}

/* Kicker labels: mono taxonomy in ink, never the magenta accent */
html body .np-kicker {
    font-family: var(--ds-font-mono) !important;
    color: var(--ds-t-ink) !important;
    letter-spacing: 0.54px !important;
}

/* "读者来信" is a newspaper-era decorative label, off-voice for a forum */
html body .forum-header .np-kicker {
    display: none !important;
}

/* Block-CTA descendant fix: pastel-block ink rules force #000 on spans
 * INSIDE black pill buttons; re-assert white glyphs. Placed last with
 * boosted specificity so it also wins over the dark-theme block guards. */
html :is(body, body.dark-mode, body[data-theme="dark"]) :is(.forum-header, .checkin-action, .auth-card):is(.forum-header, .checkin-action, .auth-card):is(.forum-header, .checkin-action, .auth-card) :is(.btn, button, input[type="submit"]):is(.btn, button, input[type="submit"]) :is(span, i, strong, b) {
    color: #ffffff !important;
}

html :is(body, body.dark-mode, body[data-theme="dark"]) :is(.challenge-header):is(.challenge-header):is(.challenge-header) :is(.btn, button):is(.btn, button) :is(span, i, strong, b) {
    color: var(--ds-inverse-ink) !important;
}

/* Same fix for pastel-rail links on home: glyphs inside stay black */
html :is(body, body.dark-mode, body[data-theme="dark"]) :is(.home-intro, .home-hero__rail, .home-fortune__box):is(.home-intro, .home-hero__rail, .home-fortune__box):is(.home-intro, .home-hero__rail, .home-fortune__box) :is(.btn, button, .home-button):is(.btn, button, .home-button) :is(span, i, strong, b) {
    color: #000000 !important;
}

/* -------------------------------------------------------------------------
 * DESIGN.md conformance layer, 2026-07-08.
 * This is the final cross-page contract loaded after all legacy/page CSS.
 * It converts the historical glass/gradient app chrome into the documented
 * Figma editorial system: monochrome frame, flat hairline components,
 * pill-only controls, mono taxonomy chips, and oversized pastel story blocks.
 * ---------------------------------------------------------------------- */

html {
    background: var(--ds-t-canvas) !important;
    color: var(--ds-t-ink) !important;
    font-family: var(--ds-font) !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body,
body::before,
body::after,
.app,
.page,
.page-wrapper,
.main-content,
.content-wrapper,
.background-colors,
.floating-squares {
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
}

.background-colors,
.background-colors .color,
.floating-squares,
.floating-squares * {
    display: none !important;
}

main,
.main-content,
.page-container,
.container,
.content-container,
.settings-container,
.profile-container,
.questions-container,
.ranking-container,
.forum-container,
.groups-container,
.admin-container,
.auth-container {
    width: min(100% - 48px, var(--ds-container)) !important;
    margin-inline: auto !important;
}

main,
.main-content,
.page-container,
.settings-container,
.profile-container,
.questions-container,
.ranking-container,
.forum-container,
.groups-main,
.admin-container {
    padding-block: var(--ds-space-xxl) var(--ds-space-section) !important;
}

.section,
.page-section,
.welcome-section,
.bottom-section,
.home-section,
.settings-section,
.profile-section,
.questions-section,
.forum-section,
.ranking-section {
    padding-block: var(--ds-space-section) !important;
}

.card,
.panel,
.surface,
.modal-content,
.dropdown-menu,
.auth-card,
.settings-card,
.profile-card,
.question-card,
.question-row,
.question-detail-card,
.editor-card,
.forum-card,
.post-card,
.reply-card,
.group-card,
.groups-summary__item,
.group-score,
.ranking-board,
.ranking-card,
.ranking-item,
.ranking-podium__item,
.dashboard-card,
.stat-card,
.class-member-card,
.challenge-card,
.checkin-card,
.info-card,
.table-card,
.upload-card,
.image-viewer-card {
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-lg) !important;
    background: var(--ds-t-surface) !important;
    color: var(--ds-t-ink) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.card-header,
.panel-header,
.modal-header,
.settings-card__header,
.profile-card__header,
.forum-card__header,
.question-card__header,
.dashboard-card__header,
.table-header {
    border-bottom: 1px solid var(--ds-t-hairline-soft) !important;
    background: transparent !important;
    color: var(--ds-t-ink) !important;
    box-shadow: none !important;
}

.hero,
.page-hero,
.auth-card,
.forum-header,
.challenge-header,
.checkin-action,
.groups-hero,
.group-detail-hero,
.settings-hero,
.profile-header,
.questions-hero,
.editor-hero,
.upload-hero,
.dashboard-hero,
.class-hero,
.clock-hero {
    border: 0 !important;
    border-radius: var(--ds-rounded-lg) !important;
    background: var(--ds-block-lime) !important;
    color: #000000 !important;
    box-shadow: none !important;
}

.forum-header,
.questions-hero,
.editor-hero,
.upload-hero {
    background: var(--ds-block-cream) !important;
}

.groups-hero,
.group-detail-hero,
.profile-header {
    background: var(--ds-block-mint) !important;
}

.ranking-hero,
.ranking-sidebar,
.dashboard-hero,
.owner-dashboard-hero {
    background: var(--ds-block-navy) !important;
    color: var(--ds-inverse-ink) !important;
}

.auth-card,
.settings-hero,
.class-hero {
    background: var(--ds-block-lilac) !important;
}

.hero :is(h1, h2, h3, p, span, a, label, strong),
.page-hero :is(h1, h2, h3, p, span, a, label, strong),
.auth-card :is(h1, h2, h3, p, span, a, label, strong),
.forum-header :is(h1, h2, h3, p, span, a, label, strong),
.challenge-header :is(h1, h2, h3, p, span, a, label, strong),
.checkin-action :is(h1, h2, h3, p, span, a, label, strong),
.groups-hero :is(h1, h2, h3, p, span, a, label, strong),
.group-detail-hero :is(h1, h2, h3, p, span, a, label, strong),
.settings-hero :is(h1, h2, h3, p, span, a, label, strong),
.profile-header :is(h1, h2, h3, p, span, a, label, strong),
.questions-hero :is(h1, h2, h3, p, span, a, label, strong),
.editor-hero :is(h1, h2, h3, p, span, a, label, strong),
.upload-hero :is(h1, h2, h3, p, span, a, label, strong),
.class-hero :is(h1, h2, h3, p, span, a, label, strong),
.clock-hero :is(h1, h2, h3, p, span, a, label, strong) {
    color: #000000 !important;
}

.ranking-hero :is(h1, h2, h3, p, span, a, label, strong),
.ranking-sidebar :is(h1, h2, h3, p, span, a, label, strong),
.dashboard-hero :is(h1, h2, h3, p, span, a, label, strong),
.owner-dashboard-hero :is(h1, h2, h3, p, span, a, label, strong) {
    color: var(--ds-inverse-ink) !important;
}

:is(.icon-button, .btn-icon, .theme-toggle, .theme-switcher, .navbar-toggle, .site-header__menu-button, .close-button, .modal-close) {
    inline-size: 40px !important;
    block-size: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--ds-rounded-full) !important;
    background: var(--ds-t-surface-soft) !important;
    color: var(--ds-t-ink) !important;
    box-shadow: none !important;
}

:is(.btn, .button, button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"]):not(.navbar-toggle):not(.site-header__menu-button) {
    min-height: 48px !important;
    padding: 10px 20px !important;
    border: 1px solid var(--ds-t-primary) !important;
    border-radius: var(--ds-rounded-pill) !important;
    background: var(--ds-t-primary) !important;
    color: var(--ds-t-on-primary) !important;
    font-family: var(--ds-font) !important;
    font-size: var(--ds-button-size) !important;
    font-weight: var(--ds-weight-button) !important;
    line-height: 1.4 !important;
    letter-spacing: -0.1px !important;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none !important;
    transition: background-color var(--ds-transition-fast), color var(--ds-transition-fast), border-color var(--ds-transition-fast) !important;
}

:is(.btn, .button, button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"]):not(.navbar-toggle):not(.site-header__menu-button):is(:hover, :focus-visible) {
    background: var(--ds-t-primary) !important;
    color: var(--ds-t-on-primary) !important;
    border-color: var(--ds-t-primary) !important;
    box-shadow: 0 0 0 2px var(--ds-t-canvas), 0 0 0 4px var(--ds-t-primary) !important;
    transform: none !important;
}

:is(.btn-secondary, .btn-outline, .button-secondary, .secondary-btn, .cancel-btn, .btn-light, .btn-tertiary) {
    border: 1px solid var(--ds-t-ink) !important;
    background: var(--ds-t-canvas) !important;
    color: var(--ds-t-ink) !important;
}

:is(.btn-secondary, .btn-outline, .button-secondary, .secondary-btn, .cancel-btn, .btn-light, .btn-tertiary):is(:hover, :focus-visible) {
    background: var(--ds-t-canvas) !important;
    color: var(--ds-t-ink) !important;
    border-color: var(--ds-t-ink) !important;
    box-shadow: 0 0 0 2px var(--ds-t-canvas), 0 0 0 4px var(--ds-t-ink) !important;
}

:is(.icon-button, .btn-icon, .theme-toggle, .theme-switcher, .navbar-toggle, .site-header__menu-button, .close-button, .modal-close) {
    inline-size: 40px !important;
    block-size: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--ds-rounded-full) !important;
    background: var(--ds-t-surface-soft) !important;
    color: var(--ds-t-ink) !important;
    box-shadow: none !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
textarea,
select,
.form-control,
.input,
.search-input,
.tag-input,
.editor-input {
    min-height: 48px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: 999px !important;
    background: var(--ds-t-canvas) !important;
    color: var(--ds-t-ink) !important;
    font-family: var(--ds-font) !important;
    font-size: var(--ds-body-size) !important;
    font-weight: var(--ds-weight-body) !important;
    line-height: 1.45 !important;
    letter-spacing: -0.26px !important;
    box-shadow: none !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
textarea:focus,
select:focus,
.form-control:focus,
.input:focus,
.search-input:focus,
.tag-input:focus,
.editor-input:focus {
    border-color: var(--ds-t-ink) !important;
    outline: 2px solid var(--ds-t-ink) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

fieldset,
.form-group,
.form-row,
.search-bar,
.filter-bar,
.toolbar,
.actions,
.button-group,
.tabs,
.tab-list {
    gap: var(--ds-space-md) !important;
}

.badge,
.tag,
.tag-badge,
.role-tag,
.difficulty-tag,
.status-badge,
.chip,
.pill,
.question-tag,
.member-badge,
.group-count,
.ranking-rank,
.ranking-podium__rank {
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-full) !important;
    background: var(--ds-t-surface-soft) !important;
    color: var(--ds-t-ink) !important;
    font-family: var(--ds-font-mono) !important;
    font-size: var(--ds-caption-size) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}

.tab,
.tabs button,
.md-tab,
.question-tag-picker-tab,
.pricing-tab {
    border-radius: var(--ds-rounded-pill) !important;
    background: var(--ds-t-canvas) !important;
    color: var(--ds-t-ink) !important;
    border: 1px solid var(--ds-t-hairline) !important;
    box-shadow: none !important;
}

.tab.active,
.tab.is-active,
.tabs button.active,
.md-tab.active,
.question-tag-picker-tab.active,
.pricing-tab.selected {
    background: var(--ds-t-primary) !important;
    color: var(--ds-t-on-primary) !important;
    border-color: var(--ds-t-primary) !important;
}

table,
.table,
.data-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-lg) !important;
    overflow: hidden !important;
    background: var(--ds-t-surface) !important;
    box-shadow: none !important;
}

th,
td,
.list-row,
.ranking-item,
.question-row,
.post-item,
.member-row {
    border-color: var(--ds-t-hairline-soft) !important;
}

.modal-overlay,
.overlay,
.drawer-backdrop {
    background: var(--ds-overlay-scrim) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

:is(.card, .panel, .btn, .button, button, .question-row, .ranking-item, .group-card, .post-card, .dashboard-card):is(:hover, :focus-visible) {
    transform: none !important;
}

:focus-visible {
    outline: 2px solid var(--ds-t-ink) !important;
    outline-offset: 2px !important;
}

@media (max-width: 768px) {
    main,
    .main-content,
    .page-container,
    .container,
    .content-container,
    .settings-container,
    .profile-container,
    .questions-container,
    .ranking-container,
    .forum-container,
    .groups-container,
    .admin-container,
    .auth-container {
        width: min(100% - 24px, var(--ds-container)) !important;
        padding-block: var(--ds-space-xl) var(--ds-space-xxl) !important;
    }

    h1,
    .page-title,
    .home-legacy__title {
        font-size: clamp(34px, 12vw, 56px) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.96px !important;
    }

    .card,
    .panel,
    .auth-card,
    .settings-card,
    .profile-card,
    .question-card,
    .forum-card,
    .post-card,
    .group-card,
    .ranking-board,
    .dashboard-card,
    .stat-card,
    .hero,
    .page-hero,
    .groups-hero,
    .forum-header,
    .questions-hero,
    .settings-hero,
    .profile-header {
        border-radius: var(--ds-rounded-lg) !important;
    }
}

/* Final specificity guard: page-local CSS may use high-specificity !important
 * rules for older rounded/glass inputs and auth cards. Keep this layer last so
 * every route resolves to DESIGN.md's text-input, flat-card, and no-gradient
 * contracts. */
html body:is(body):is(body),
html body:is(body):is(body)::before,
html body:is(body):is(body)::after {
    background: var(--ds-t-canvas) !important;
    background-color: var(--ds-t-canvas) !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Landing page: legacy newspaper gradient + 96px column rules bleed in via
   body.landing-page (specificity beats the plain body reset above). Flatten to
   the DESIGN.md canvas — the color-block sections are the depth device, not a
   tinted page ground. Scoped selector out-specifies body.landing-page. */
html body.landing-page:is(body):is(body),
html body.landing-page:is(body):is(body) #app,
html body.landing-page:is(body):is(body)::before,
html body.landing-page:is(body):is(body)::after {
    background: var(--ds-t-canvas) !important;
    background-color: var(--ds-t-canvas) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body:is(body):is(body) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]), textarea, select, .form-control, .form-input, .input, .search-input, .filter-select, .tag-input, .editor-input, .md-textarea):is(input, textarea, select, .form-control, .form-input, .input, .search-input, .filter-select, .tag-input, .editor-input, .md-textarea) {
    min-height: 48px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: 999px !important;
    background: var(--ds-t-canvas) !important;
    background-color: var(--ds-t-canvas) !important;
    color: var(--ds-t-ink) !important;
    box-shadow: none !important;
    outline-offset: 2px !important;
}

html body:is(body):is(body) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]), textarea, select, .form-control, .form-input, .input, .search-input, .filter-select, .tag-input, .editor-input, .md-textarea):is(:focus, :focus-visible) {
    border-color: var(--ds-t-ink) !important;
    outline: 2px solid var(--ds-t-ink) !important;
    box-shadow: none !important;
}

html body:is(body):is(body) :is(.auth-card, .card, .panel, .surface, .modal-content, .dropdown-menu, .settings-card, .profile-card, .question-card, .question-row, .question-detail-card, .editor-card, .forum-card, .post-card, .reply-card, .group-card, .groups-summary__item, .group-score, .ranking-board, .ranking-card, .ranking-item, .ranking-podium__item, .dashboard-card, .stat-card, .class-member-card, .challenge-card, .checkin-card, .info-card, .table-card, .upload-card, .image-viewer-card):is(.auth-card, .card, .panel, .surface, .modal-content, .dropdown-menu, .settings-card, .profile-card, .question-card, .question-row, .question-detail-card, .editor-card, .forum-card, .post-card, .reply-card, .group-card, .groups-summary__item, .group-score, .ranking-board, .ranking-card, .ranking-item, .ranking-podium__item, .dashboard-card, .stat-card, .class-member-card, .challenge-card, .checkin-card, .info-card, .table-card, .upload-card, .image-viewer-card) {
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-lg) !important;
    background: var(--ds-t-surface) !important;
    background-color: var(--ds-t-surface) !important;
    color: var(--ds-t-ink) !important;
    box-shadow: none !important;
    transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body:is(body):is(body) :is(.auth-card, .hero, .page-hero, .forum-header, .challenge-header, .checkin-action, .groups-hero, .group-detail-hero, .settings-hero, .profile-header, .questions-hero, .editor-hero, .upload-hero, .dashboard-hero, .class-hero, .clock-hero):is(.auth-card, .hero, .page-hero, .forum-header, .challenge-header, .checkin-action, .groups-hero, .group-detail-hero, .settings-hero, .profile-header, .questions-hero, .editor-hero, .upload-hero, .dashboard-hero, .class-hero, .clock-hero):not(.groups-hero):not(.group-detail-hero) {
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* =====================================================================
 * 天梯榜 (Ranking) — DESIGN.md conformance pass, 2026-07-08.
 * Loaded last, so it wins over the color-block rules (:885, :1580), the
 * sidebar white-on-white (:1638/:1646) and the flat-card guard (:2197).
 *
 * Aligns the page to DESIGN.md:
 *   - Top-3 use the documented {colors.block-lime/mint/cream} pastels with
 *     black {colors.ink} — NO new brand colors (Don'ts: no colors outside
 *     the block-* family + magenta).
 *   - Rank numbers are solid black figmaSans figures; hierarchy comes from
 *     WEIGHT, not opacity or a gray fill (Don'ts: no mid-gray text).
 *   - Spec radii restored: {rounded.lg} 24px on the board / hero / sidebar
 *     cards, {rounded.md} 8px on metric tiles, podium plates and medal rows.
 *
 * Two deliberate, user-approved deviations from the spec:
 *   - Hero is a neutral canvas card (not the lilac color-block) — the user
 *     asked to keep it neutral for on-page calm.
 *   - Content width is 1040px (spec baseline is ~1280px) — user's choice for
 *     a tighter, more focused column.
 * ===================================================================== */

/* --- width + alignment: 1040px, hero and board share the same edges --- */
html body :is(.ranking-main):is(.ranking-main) {
    width: min(100% - 48px, 1040px) !important;
    max-width: 1040px !important;
    margin-inline: auto !important;
}

/* The layout row carries an extra .ranking-container that re-insets it 24px
 * per side (design-system.css:413). Neutralize so it fills .ranking-main. */
html body :is(.ranking-container.ranking-layout):is(.ranking-layout):is(.ranking-layout) {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
}

/* --- hero: neutral canvas card (user-approved deviation from lilac block),
 * {rounded.lg} 24px, hairline stroke, follows theme in both modes. Prefix
 * beats the dark override at :1267 which forces lilac. --- */
html :is(body, body.dark-mode, body[data-theme="dark"]) :is(.ranking-hero):is(.ranking-hero):is(.ranking-hero) {
    background: var(--ds-t-surface) !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-lg) !important;
    padding: var(--ds-space-xxl) !important;
}

html :is(body, body.dark-mode, body[data-theme="dark"]) :is(.ranking-hero):is(.ranking-hero):is(.ranking-hero) :is(h1, h2, h3, p, span, div, a, small, strong):not(.btn) {
    color: var(--ds-t-ink) !important;
}

html :is(body, body.dark-mode, body[data-theme="dark"]) :is(.ranking-hero):is(.ranking-hero):is(.ranking-hero) .ranking-kicker {
    color: var(--ds-t-ink) !important;
}

/* --- spec radii ({rounded.lg} cards). Tripled class
 * matches beat the sidebar rules at :1631 (3 classes) and :1646 (2). --- */
html body :is(.ranking-board, .ranking-sidebar):is(.ranking-board, .ranking-sidebar):is(.ranking-board, .ranking-sidebar) {
    border-radius: var(--ds-rounded-lg) !important;
}

html body :is(.ranking-metric, .ranking-podium__item, .ranking-podium__empty):is(.ranking-metric, .ranking-podium__item, .ranking-podium__empty):is(.ranking-metric, .ranking-podium__item, .ranking-podium__empty) {
    border-radius: var(--ds-rounded-lg) !important;
}

html body :is(.ranking-main):is(.ranking-main) :is(.ranking-metrics):is(.ranking-metrics) {
    gap: clamp(var(--ds-space-md), 3vw, var(--ds-space-xl)) !important;
}

html :is(body, body.dark-mode, body[data-theme="dark"]) :is(.ranking-main):is(.ranking-main) :is(.ranking-metric):is(.ranking-metric):is(.ranking-metric) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: var(--ds-space-xs) 0 !important;
    gap: var(--ds-space-xxs) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) :is(.ranking-hero):is(.ranking-hero):is(.ranking-hero) {
    color: var(--ds-inverse-ink) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) :is(.ranking-hero):is(.ranking-hero):is(.ranking-hero) :is(h1, h2, h3, strong):not(.btn) {
    color: var(--ds-inverse-ink) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) :is(.ranking-hero):is(.ranking-hero):is(.ranking-hero) :is(.ranking-kicker, .ranking-hero__text, .ranking-metric span, p, small):not(.btn) {
    color: color-mix(in srgb, var(--ds-inverse-ink) 76%, transparent) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) :is(.ranking-hero):is(.ranking-hero):is(.ranking-hero) :is(.ranking-metric strong):is(strong) {
    color: var(--ds-inverse-ink) !important;
}

html body.dark-mode :is(.ranking-hero):is(.ranking-hero) :is(h1.np-headline):is(.np-headline),
html body[data-theme="dark"] :is(.ranking-hero):is(.ranking-hero) :is(h1.np-headline):is(.np-headline) {
    color: var(--ds-inverse-ink) !important;
}

/* --- rank numbers: no circle, no mono. Solid {colors.ink} figmaSans figures;
 * DESIGN.md carries hierarchy through WEIGHT, never a gray fill. --- */
html body :is(.ranking-rank, .ranking-podium__rank):is(.ranking-rank, .ranking-podium__rank):is(.ranking-rank, .ranking-podium__rank) {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--ds-font) !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 18px !important;
    font-weight: var(--ds-weight-body) !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    place-items: center !important;
    justify-self: center !important;
    color: var(--ds-t-ink) !important;
}

/* Board grid: slim first column now that the rank is a bare number */
html body :is(.ranking-item):is(.ranking-item):is(.ranking-item) {
    grid-template-columns: 40px minmax(0, 1fr) minmax(96px, auto) !important;
    gap: var(--ds-space-md) !important;
    min-height: 60px !important;
}

html body :is(.ranking-podium__item):is(.ranking-podium__item):is(.ranking-podium__item) {
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    gap: var(--ds-space-sm) !important;
    min-height: 56px !important;
    padding: var(--ds-space-sm) var(--ds-space-md) !important;
    border: 0 !important;
}

/* Tighten in-card text spacing */
html body :is(.ranking-score):is(.ranking-score) {
    gap: 0 !important;
}

html body :is(.ranking-username):is(.ranking-username) {
    gap: var(--ds-space-xs) !important;
}

/* --- sidebar podium (本期榜首): pastel plates on the navy block, black ink.
 * Fixes the white-on-white; matches the board top-3 pastels. --- */
html body .ranking-sidebar :is(.ranking-podium__item--1):is(.ranking-podium__item) {
    background: var(--ds-block-lime) !important;
}
html body .ranking-sidebar :is(.ranking-podium__item--2):is(.ranking-podium__item) {
    background: var(--ds-block-mint) !important;
}
html body .ranking-sidebar :is(.ranking-podium__item--3):is(.ranking-podium__item) {
    background: var(--ds-block-cream) !important;
}

html body .ranking-sidebar :is(.ranking-podium__item--1, .ranking-podium__item--2, .ranking-podium__item--3) :is(.user-name, .ranking-podium__rank, strong, span, a),
html body .ranking-sidebar :is(.ranking-podium__item--1, .ranking-podium__item--2, .ranking-podium__item--3) {
    color: #000000 !important;
}

/* Rank number in the top plate reads first — weight, not size or color */
html body .ranking-sidebar :is(.ranking-podium__item--1) .ranking-podium__rank {
    font-weight: var(--ds-weight-headline) !important;
}

/* --- full board top-3: same pastels, black ink, {rounded.md}. Keyed by the
 * .ranking-item--rank-N class (paging-correct: page 2 is not re-tinted). --- */
html body .ranking-list :is(.ranking-item--rank-1):is(.ranking-item):is(.ranking-item) {
    background: var(--ds-block-lime) !important;
    border-radius: var(--ds-rounded-md) !important;
    border-bottom: 0 !important;
}
html body .ranking-list :is(.ranking-item--rank-2):is(.ranking-item):is(.ranking-item) {
    background: var(--ds-block-mint) !important;
    border-radius: var(--ds-rounded-md) !important;
    border-bottom: 0 !important;
}
html body .ranking-list :is(.ranking-item--rank-3):is(.ranking-item):is(.ranking-item) {
    background: var(--ds-block-cream) !important;
    border-radius: var(--ds-rounded-md) !important;
    border-bottom: 0 !important;
}

html body .ranking-list :is(.ranking-item--rank-1, .ranking-item--rank-2, .ranking-item--rank-3) :is(a, span, div, strong):not(.role-tag),
html body .ranking-list :is(.ranking-item--rank-1, .ranking-item--rank-2, .ranking-item--rank-3) .ranking-rank {
    color: #000000 !important;
}

/* Top-3 rank figures step up in weight (hierarchy via weight, per DESIGN.md) */
html body .ranking-list :is(.ranking-item--rank-1, .ranking-item--rank-2, .ranking-item--rank-3) .ranking-rank {
    font-weight: var(--ds-weight-headline) !important;
}

/* --- non-top-3 rows: canvas ground, black ink, hairline-soft separators.
 * Ink follows the theme (ranking.css hardcodes light --apple-ink). --- */
html body .ranking-list :is(.ranking-item):not(.ranking-item--rank-1):not(.ranking-item--rank-2):not(.ranking-item--rank-3) {
    background: var(--ds-t-surface) !important;
    border-bottom: 1px solid var(--ds-t-hairline-soft) !important;
}

html body .ranking-list :is(.ranking-item):not(.ranking-item--rank-1):not(.ranking-item--rank-2):not(.ranking-item--rank-3) :is(a, .user-link, .user-name, .score, .ranking-rank) {
    color: var(--ds-t-ink) !important;
}

/* User-tuned ranking medal palette: traditional gold / silver / bronze.
 * Sidebar top-three now mirrors the full ranking rows: flat, rectangular,
 * borderless, and stacked without extra outlines. */
html :is(body, body.dark-mode, body[data-theme="dark"]) :is(.ranking-sidebar):is(.ranking-sidebar):is(.ranking-sidebar) {
    background: color-mix(in srgb, var(--ds-t-surface) 72%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ds-t-ink) 10%, transparent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 50%, transparent) !important;
    backdrop-filter: saturate(130%) blur(18px) !important;
    -webkit-backdrop-filter: saturate(130%) blur(18px) !important;
}

html :is(body, body.dark-mode, body[data-theme="dark"]) :is(.ranking-sidebar):is(.ranking-sidebar):is(.ranking-sidebar) :is(h2, .ranking-kicker) {
    color: var(--ds-t-ink) !important;
}

html body .ranking-sidebar :is(.ranking-podium):is(.ranking-podium):is(.ranking-podium) {
    gap: 0 !important;
}

html body .ranking-sidebar :is(.ranking-podium__item):is(.ranking-podium__item):is(.ranking-podium__item) {
    min-height: 60px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body .ranking-sidebar :is(.ranking-podium__item--1):is(.ranking-podium__item):is(.ranking-podium__item) {
    background: rgba(212, 175, 55, 0.28) !important;
}

html body .ranking-sidebar :is(.ranking-podium__item--2):is(.ranking-podium__item):is(.ranking-podium__item) {
    background: rgba(192, 192, 192, 0.34) !important;
}

html body .ranking-sidebar :is(.ranking-podium__item--3):is(.ranking-podium__item):is(.ranking-podium__item) {
    background: rgba(205, 127, 50, 0.22) !important;
}

html body .ranking-sidebar :is(.ranking-podium__item--1, .ranking-podium__item--2, .ranking-podium__item--3):is(.ranking-podium__item) :is(.user-name, .ranking-podium__rank, strong, span, a):not(.role-tag),
html body .ranking-sidebar :is(.ranking-podium__item--1, .ranking-podium__item--2, .ranking-podium__item--3):is(.ranking-podium__item) {
    color: #101014 !important;
}

html body .ranking-list :is(.ranking-item--rank-1):is(.ranking-item):is(.ranking-item):is(.ranking-item) {
    background: rgba(212, 175, 55, 0.28) !important;
    border-radius: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, #d4af37 32%, transparent) !important;
}

html body .ranking-list :is(.ranking-item--rank-2):is(.ranking-item):is(.ranking-item):is(.ranking-item) {
    background: rgba(192, 192, 192, 0.34) !important;
    border-radius: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, #c0c0c0 42%, transparent) !important;
}

html body .ranking-list :is(.ranking-item--rank-3):is(.ranking-item):is(.ranking-item):is(.ranking-item) {
    background: rgba(205, 127, 50, 0.22) !important;
    border-radius: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, #cd7f32 32%, transparent) !important;
}

/* --- keep short labels on one line; step the oversized hero lede down --- */
html body :is(.ranking-hero):is(.ranking-hero) .ranking-hero__text {
    font-size: var(--ds-body-lg-size) !important;
    line-height: 1.4 !important;
}

html body :is(.ranking-kicker):is(.ranking-kicker),
html body :is(.ranking-board__meta):is(.ranking-board__meta),
html body .ranking-sidebar h2 {
    white-space: nowrap !important;
}

@media (max-width: 640px) {
    /* On narrow screens board meta may genuinely need to wrap */
    html body :is(.ranking-board__meta):is(.ranking-board__meta) {
        white-space: normal !important;
    }
}

/* -------------------------------------------------------------------------
 * Typography single-source safety net (2026-07-08).
 * Final font-family contract, loaded after every legacy/page stylesheet and
 * inline <style>. The system voice is ONE sans family (--ds-font) for all
 * running text and headings; --ds-font-mono is the taxonomy voice (eyebrows,
 * captions, badges/tags, and tabular figures). Any historical hardcoded
 * family (Georgia/Songti serif, Poppins, Arial, bespoke CJK stacks) that
 * still bleeds through is normalized here.
 *
 * Two carve-outs are deliberate and MUST be preserved:
 *   1. FontAwesome glyph fonts (.fa*, [class*="fa-"]) — excluded, or icons
 *      turn into tofu boxes.
 *   2. The mono taxonomy — re-asserted AFTER the sans net so it wins by
 *      source order.
 * ---------------------------------------------------------------------- */

/* Sans net: all text-bearing elements resolve to the one sans family.
 * FontAwesome icon elements are excluded via :not() so their glyph font
 * survives. */
html body :is(
    h1, h2, h3, h4, h5, h6,
    p, span, a, li, dd, dt, blockquote, figcaption,
    label, legend, button, input, select, textarea, optgroup,
    th, td, caption,
    div, section, article, header, footer, nav, main, aside,
    strong, b, em, i, small, mark, code, pre, kbd, samp
):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class*="fa-"]):not(.material-icons) {
    font-family: var(--ds-font) !important;
}

/* Monospace taxonomy — re-asserted last so it beats the sans net above.
 * Eyebrows, captions, badges/tags, mono-metrics, and the clock's tabular
 * figures are the documented mono voice. This is a SUPERSET of the canonical
 * taxonomy rule (~line 138) — every eyebrow/kicker/caption variant used in
 * markup is listed so the sans net above can never regress one to sans. */
html body :is(
    .eyebrow, .kicker, .np-kicker, .ranking-kicker,
    .home-panel__eyebrow, .home-legacy__eyebrow,
    .groups-eyebrow, .admin-page-eyebrow, .feature-section__eyebrow,
    .caption, .home-caption,
    .badge, .tag, .role-badge, .status-badge, .category-badge,
    .question-tag-chip, .home-badge,
    code, pre, kbd, samp,
    [data-mono], .mono, .tabular-nums,
    #Beijing_z43d, #Beijing_z43d span
) {
    font-family: var(--ds-font-mono) !important;
}

/* NOTE on FontAwesome: the sans/mono nets above exclude every FA element via
 * :not([class*="fa-"]) (and the explicit .fas/.far/.fab/... guards), so the
 * icon glyph font set by vendor/fontawesome CSS is never overridden here.
 * Do NOT add a font-family rule for .fa* — FA resolves brands vs classic via
 * its own --_fa-family cascade, and hardcoding one family breaks the other. */

html body:is(body):is(body) .forum-container > .card.card,
html body:is(body):is(body) .forum-container > .card.card > .card-header.card-header {
    border-radius: var(--ds-rounded-lg) !important;
    overflow: hidden !important;
}

html body:is(body):is(body) .forum-container.forum-container > .card.card.card.card,
html body:is(body):is(body) .forum-container.forum-container > .card.card.card.card > .card-header.card-header.card-header {
    border-radius: var(--ds-rounded-lg) !important;
    border-top-left-radius: var(--ds-rounded-lg) !important;
    border-top-right-radius: var(--ds-rounded-lg) !important;
    border-bottom-right-radius: var(--ds-rounded-lg) !important;
    border-bottom-left-radius: var(--ds-rounded-lg) !important;
    overflow: hidden !important;
}

html body:is(body):is(body) .forum-container.forum-container > .card.card.card.card > .card-header.card-header.card-header {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

html body.auth-page.auth-page :is(.auth-card, .auth-form, #loginForm, #registerForm) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select) {
    border-radius: 999px !important;
    padding-left: 26px !important;
    padding-right: 26px !important;
    box-sizing: border-box !important;
    text-indent: 0 !important;
}

html body.auth-page.auth-page :is(.password-input):is(.password-input) input {
    padding-right: 76px !important;
}

html body.auth-page.auth-page :is(#loginForm, #registerForm) :is(.password-input):is(.password-input) input {
    padding-right: 76px !important;
}

html body.auth-page.auth-page :is(#loginForm, #registerForm) :is(.password-input):is(.password-input) :is(#password#password, #confirmPassword#confirmPassword) {
    padding-right: 76px !important;
}

html body.auth-page.auth-page :is(.password-toggle-proxy):is(.password-toggle-proxy) {
    right: 24px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 15px !important;
    color: #000000 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

html body.auth-page.auth-page :is(.password-toggle-proxy):is(.password-toggle-proxy) i {
    display: inline-block !important;
    color: #000000 !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

html body #navbar#navbar :is(#userProfile, .user-profile):is(#userProfile, .user-profile) {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

html body #navbar#navbar :is(#userProfile, .user-profile):is(#userProfile, .user-profile):is(:hover, :focus, :focus-visible, :active, .dropdown-open) {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

html body #navbar#navbar .navbar-container {
    width: min(100% - 32px, 1220px) !important;
    gap: 8px !important;
}

html body #navbar#navbar .navbar-left {
    gap: clamp(10px, 1.2vw, 18px) !important;
    min-width: 0 !important;
}

html body #navbar#navbar .navbar-brand {
    margin-right: clamp(4px, 0.6vw, 8px) !important;
}

html body #navbar#navbar .navbar-brand__mark {
    font-size: 21px !important;
    letter-spacing: -0.3px !important;
}

html body #navbar#navbar .navbar-menu {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: clamp(8px, 0.8vw, 12px) !important;
}

html body #navbar#navbar .navbar-item.navbar-item {
    min-height: 34px !important;
    padding: 5px clamp(9px, 0.9vw, 13px) !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

/* Navigation text states: no per-item capsules. Hover and selected states use
 * weight + a restrained underline so the whole navbar reads as one surface. */
html body #navbar#navbar :is(.navbar-item, .navbar-menu .navbar-item):is(.navbar-item):is(.navbar-item) {
    position: relative !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: color-mix(in srgb, var(--ds-t-ink) 68%, transparent) !important;
    font-weight: 480 !important;
    text-decoration: none !important;
    transition:
        color var(--ds-duration-fast) var(--ds-ease-standard),
        font-weight var(--ds-duration-fast) var(--ds-ease-standard) !important;
}

html body #navbar#navbar :is(.navbar-item, .navbar-menu .navbar-item):is(.navbar-item):is(.navbar-item)::after {
    content: "" !important;
    position: absolute !important;
    left: clamp(9px, 0.9vw, 13px) !important;
    right: clamp(9px, 0.9vw, 13px) !important;
    bottom: 3px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: var(--ds-t-ink) !important;
    opacity: 0 !important;
    transform: scaleX(0.4) !important;
    transform-origin: center !important;
    transition:
        opacity var(--ds-duration-fast) var(--ds-ease-standard),
        transform var(--ds-duration-fast) var(--ds-ease-standard) !important;
}

html body #navbar#navbar :is(.navbar-item:hover, .navbar-item:focus-visible):is(.navbar-item):is(.navbar-item) {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ds-t-ink) !important;
    box-shadow: none !important;
}

html body #navbar#navbar :is(.navbar-item:hover, .navbar-item:focus-visible):is(.navbar-item):is(.navbar-item)::after {
    opacity: 0.42 !important;
    transform: scaleX(1) !important;
}

html body #navbar#navbar :is(.navbar-item.active, .navbar-menu .navbar-item.active):is(.navbar-item.active):is(.navbar-item.active) {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ds-t-ink) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 720 !important;
}

html body #navbar#navbar :is(.navbar-item.active, .navbar-menu .navbar-item.active):is(.navbar-item.active):is(.navbar-item.active)::after {
    opacity: 1 !important;
    transform: scaleX(1) !important;
}

html body #navbar#navbar .navbar-right {
    gap: 6px !important;
    margin-left: 4px !important;
    flex: 0 0 auto !important;
}

html body #navbar#navbar .theme-switcher,
html body #navbar#navbar .user-profile .avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
}

html body #navbar#navbar button#themeSwitcher.theme-switcher {
    display: inline-grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

html body #navbar#navbar button#themeSwitcher.theme-switcher::before {
    content: none !important;
    display: none !important;
}

html body #navbar#navbar button#themeSwitcher.theme-switcher i {
    display: inline-block !important;
    color: var(--ds-t-ink) !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) #navbar#navbar button#themeSwitcher.theme-switcher i,
html body #navbar#navbar button#themeSwitcher.theme-switcher.theme-switcher--dark i {
    color: var(--ds-t-ink) !important;
}

@media (max-width: 1080px) and (min-width: 834px) {
    html body #navbar#navbar .navbar-container {
        width: min(100% - 24px, 1220px) !important;
    }

    html body #navbar#navbar .navbar-item.navbar-item {
        padding-inline: 9px !important;
        font-size: 14px !important;
    }

    html body #navbar#navbar .navbar-menu {
        gap: 8px !important;
    }
}

html body.ranking-page .ranking-main::before,
html body .ranking-main::before {
    background: none !important;
    background-image: none !important;
}

html body.ranking-page.ranking-page,
html body.ranking-page .ranking-main,
html body.ranking-page .ranking-container.ranking-layout {
    background-image: none !important;
}

html body #rankingPagination#rankingPagination .pagination-controls {
    width: fit-content !important;
    max-width: min(100%, 720px) !important;
    margin-inline: auto !important;
    padding: 10px 12px !important;
    border-radius: 999px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    overflow: visible !important;
}

html body #rankingPagination#rankingPagination .pagination-btn {
    border-radius: 999px !important;
    min-height: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
}

html body #rankingPagination#rankingPagination .pagination-btn:not(.pagination-btn-prev):not(.pagination-btn-next) {
    width: 36px !important;
    padding-inline: 0 !important;
}

html body #rankingPagination#rankingPagination .pagination-info {
    white-space: nowrap !important;
}

html body :is(.role-tag.owner):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag) {
    background: var(--ds-block-lilac) !important;
    background-color: var(--ds-block-lilac) !important;
    color: #000000 !important;
}

html body :is(.role-tag.admin):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag) {
    background: var(--ds-block-pink) !important;
    background-color: var(--ds-block-pink) !important;
    color: #000000 !important;
}

html body :is(.role-tag.scorer):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag) {
    background: var(--ds-block-coral) !important;
    background-color: var(--ds-block-coral) !important;
    color: #000000 !important;
}

html body :is(.role-tag.custom):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag) {
    background: var(--ds-block-mint) !important;
    background-color: var(--ds-block-mint) !important;
    color: #000000 !important;
}

html body :is(.ranking-list, .ranking-sidebar) :is(.role-tag.custom):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag) {
    display: none !important;
}

html body :is(.ranking-main):is(.ranking-main) > :is(.ranking-hero):is(.ranking-hero):is(.ranking-hero) {
    margin-inline: clamp(24px, 8vw, 96px) !important;
    width: auto !important;
}

@media (max-width: 640px) {
    html body :is(.ranking-main):is(.ranking-main) > :is(.ranking-hero):is(.ranking-hero):is(.ranking-hero) {
        margin-inline: 0 !important;
    }
}

html body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
    textarea,
    select,
    .form-control,
    .form-input,
    .input,
    .search-input,
    .filter-select,
    .tag-input,
    .editor-input,
    .md-textarea,
    .score-input,
    .jump-input,
    .home-input,
    .challenge-answer-input,
    .reply-content-input,
    .role-select
):is(:focus, :focus-visible, :active) {
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border-color: var(--ds-t-hairline) !important;
    transform: none !important;
}

html body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
    textarea,
    select,
    .form-control,
    .form-input,
    .input,
    .search-input,
    .filter-select,
    .tag-input,
    .editor-input,
    .md-textarea,
    .score-input,
    .jump-input,
    .home-input,
    .challenge-answer-input,
    .reply-content-input,
    .role-select
):is(:focus, :focus-visible, :active)::placeholder {
    color: inherit !important;
    opacity: 0.42 !important;
}

html body:is(body):is(body) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
    textarea,
    select,
    .form-control,
    .form-input,
    .input,
    .search-input,
    .filter-select,
    .tag-input,
    .editor-input,
    .md-textarea,
    .score-input,
    .jump-input,
    .home-input,
    .challenge-answer-input,
    .reply-content-input,
    .role-select
):is(input, textarea, select, .form-control, .form-input, .input, .search-input, .filter-select, .tag-input, .editor-input, .md-textarea, .score-input, .jump-input, .home-input, .challenge-answer-input, .reply-content-input, .role-select):is(:focus, :focus-visible, :active) {
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border-color: var(--ds-t-hairline) !important;
    transform: none !important;
}

html body :is(.role-tag.owner):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag) {
    background: #a78bfa !important;
    background-color: #a78bfa !important;
    color: #ffffff !important;
}

html body :is(.role-tag.admin):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag) {
    background: #fb7185 !important;
    background-color: #fb7185 !important;
    color: #ffffff !important;
}

html body :is(.role-tag.scorer):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag) {
    background: #fb923c !important;
    background-color: #fb923c !important;
    color: #ffffff !important;
}

html body :is(.role-tag.custom):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag) {
    background: #5eead4 !important;
    background-color: #5eead4 !important;
    color: #ffffff !important;
}

html body :is(.duty-member-name, .member-name, .ranking-username) :is(.user-name.role-owner, .role-owner) {
    color: #8b5cf6 !important;
}

html body :is(.duty-member-name, .member-name, .ranking-username) :is(.user-name.role-admin, .role-admin) {
    color: #f43f5e !important;
}

html body :is(.duty-member-name, .member-name, .ranking-username) :is(.user-name.role-scorer, .role-scorer) {
    color: #f59e0b !important;
}

html body.dark-mode :is(.ranking-main):is(.ranking-main) :is(.ranking-hero):is(.ranking-hero):is(.ranking-hero) :is(h1.np-headline):is(.np-headline):is(.np-headline),
html body[data-theme="dark"] :is(.ranking-main):is(.ranking-main) :is(.ranking-hero):is(.ranking-hero):is(.ranking-hero) :is(h1.np-headline):is(.np-headline):is(.np-headline),
html[data-theme="dark"] body :is(.ranking-main):is(.ranking-main) :is(.ranking-hero):is(.ranking-hero):is(.ranking-hero) :is(h1.np-headline):is(.np-headline):is(.np-headline) {
    color: var(--ds-inverse-ink) !important;
}

/* Daily challenge local polish: keep the page on the same rounded-card system
 * and replace the heavy navy hero with the softer classroom palette. */
html :is(body, body.dark-mode, body[data-theme="dark"]) :is(.challenge-header.question-detail-header):is(.challenge-header):is(.question-detail-header),
html[data-theme="dark"] body :is(.challenge-header.question-detail-header):is(.challenge-header):is(.question-detail-header) {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--ds-block-lime) 92%, #ffffff 8%) 0%,
        color-mix(in srgb, var(--ds-block-mint) 86%, #ffffff 14%) 100%) !important;
    border: 0 !important;
    border-radius: var(--ds-rounded-lg) !important;
    color: #000000 !important;
}

html :is(body, body.dark-mode, body[data-theme="dark"]) :is(.challenge-header.question-detail-header):is(.challenge-header):is(.question-detail-header) :is(h1, h2, h3, p, span, div, small, .np-kicker, .challenge-date):not(.btn),
html[data-theme="dark"] body :is(.challenge-header.question-detail-header):is(.challenge-header):is(.question-detail-header) :is(h1, h2, h3, p, span, div, small, .np-kicker, .challenge-date):not(.btn) {
    color: #000000 !important;
}

html :is(body, body.dark-mode, body[data-theme="dark"]) :is(.challenge-header.question-detail-header):is(.challenge-header):is(.question-detail-header) :is(.challenge-date, .np-kicker),
html[data-theme="dark"] body :is(.challenge-header.question-detail-header):is(.challenge-header):is(.question-detail-header) :is(.challenge-date, .np-kicker) {
    color: color-mix(in srgb, #000000 68%, transparent) !important;
}

html :is(body, body.dark-mode, body[data-theme="dark"]) :is(.challenge-streak-badge):is(.challenge-streak-badge):is(.challenge-streak-badge),
html[data-theme="dark"] body :is(.challenge-streak-badge):is(.challenge-streak-badge):is(.challenge-streak-badge) {
    background: #000000 !important;
    color: #ffffff !important;
    border-radius: var(--ds-rounded-pill) !important;
}

html :is(body, body.dark-mode, body[data-theme="dark"]) :is(.challenge-header):is(.challenge-header) :is(.challenge-streak-badge):is(.challenge-streak-badge):is(.challenge-streak-badge),
html[data-theme="dark"] body :is(.challenge-header):is(.challenge-header) :is(.challenge-streak-badge):is(.challenge-streak-badge):is(.challenge-streak-badge) {
    color: #ffffff !important;
}

html :is(body, body.dark-mode, body[data-theme="dark"]) :is(.challenge-streak-badge):is(.challenge-streak-badge):is(.challenge-streak-badge) :is(i, span),
html[data-theme="dark"] body :is(.challenge-streak-badge):is(.challenge-streak-badge):is(.challenge-streak-badge) :is(i, span) {
    color: #ffffff !important;
}

html body #streakBadge#streakBadge :is(i, #streakText)#streakText,
html body #streakBadge#streakBadge #streakText#streakText {
    color: #ffffff !important;
}

/* Daily challenge ticket: the challenge identity and live streak become two
 * structural bands, keeping the hero dense and legible at every width. */
html body #challengeContent#challengeContent .challenge-header.question-detail-header.challenge-header {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 31%) !important;
    align-items: stretch !important;
    gap: 0 !important;
    min-height: 224px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #000000 !important;
    border-radius: var(--ds-rounded-lg) !important;
    background: var(--ds-block-lime) !important;
    box-shadow: none !important;
}

html body #challengeContent#challengeContent .challenge-header.challenge-header .challenge-header-left.challenge-header-left {
    position: relative !important;
    display: grid !important;
    align-content: center !important;
    justify-items: start !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: clamp(32px, 4.5vw, 64px) !important;
    background: var(--ds-block-lime) !important;
}

html body #challengeContent#challengeContent .challenge-header.challenge-header .challenge-header-left.challenge-header-left::after {
    content: "" !important;
    position: absolute !important;
    top: 28px !important;
    right: 28px !important;
    width: 46px !important;
    height: 46px !important;
    border-top: 2px solid #000000 !important;
    border-right: 2px solid #000000 !important;
    pointer-events: none !important;
}

html body #challengeContent#challengeContent .challenge-header.challenge-header .challenge-header-left .np-kicker.np-kicker {
    margin: 0 !important;
    color: rgba(0, 0, 0, 0.62) !important;
    font-family: var(--ds-font-mono) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.6px !important;
}

html body #challengeContent#challengeContent .challenge-header.challenge-header .challenge-header-left > h1.np-headline.np-headline {
    margin: 0 !important;
    color: #000000 !important;
    font-size: clamp(48px, 6vw, 76px) !important;
    font-weight: 520 !important;
    line-height: 0.98 !important;
    letter-spacing: 0 !important;
}

html body #challengeContent#challengeContent .challenge-header.challenge-header .challenge-date.challenge-date {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    margin: 2px 0 0 !important;
    padding: 0 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.28) !important;
    border-radius: 2px !important;
    color: #000000 !important;
    font-family: var(--ds-font-mono) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
}

html body #challengeContent#challengeContent .challenge-header.challenge-header .challenge-streak-panel.challenge-streak-panel {
    display: grid !important;
    place-content: center !important;
    justify-items: center !important;
    gap: 18px !important;
    min-width: 0 !important;
    padding: 36px 28px !important;
    border-left: 1px solid #000000 !important;
    background: #000000 !important;
    color: #ffffff !important;
}

html body #challengeContent#challengeContent .challenge-header.challenge-header .challenge-streak-label.challenge-streak-label {
    color: rgba(255, 255, 255, 0.62) !important;
    font-family: var(--ds-font-mono) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.8px !important;
}

html body #challengeContent#challengeContent .challenge-header.challenge-header #streakBadge#streakBadge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: clamp(22px, 2vw, 30px) !important;
    font-weight: 680 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

html body #challengeContent#challengeContent .challenge-header.challenge-header #streakBadge#streakBadge > i {
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    border: 1px solid rgba(255, 255, 255, 0.46) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    font-size: 19px !important;
}

@media (max-width: 720px) {
    html body #challengeContent#challengeContent .challenge-header.question-detail-header.challenge-header {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }

    html body #challengeContent#challengeContent .challenge-header.challenge-header .challenge-header-left.challenge-header-left {
        min-height: 210px !important;
        padding: 32px 28px !important;
    }

    html body #challengeContent#challengeContent .challenge-header.challenge-header .challenge-header-left.challenge-header-left::after {
        top: 20px !important;
        right: 20px !important;
        width: 34px !important;
        height: 34px !important;
    }

    html body #challengeContent#challengeContent .challenge-header.challenge-header .challenge-streak-panel.challenge-streak-panel {
        grid-template-columns: auto minmax(0, 1fr) !important;
        place-content: center stretch !important;
        justify-items: start !important;
        gap: 18px !important;
        min-height: 94px !important;
        padding: 20px 28px !important;
        border-top: 1px solid #000000 !important;
        border-left: 0 !important;
    }

    html body #challengeContent#challengeContent .challenge-header.challenge-header #streakBadge#streakBadge {
        justify-self: end !important;
        min-height: 48px !important;
        font-size: 21px !important;
    }

    html body #challengeContent#challengeContent .challenge-header.challenge-header #streakBadge#streakBadge > i {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
}

@media (max-width: 420px) {
    html body #challengeContent#challengeContent .challenge-header.challenge-header .challenge-header-left > h1.np-headline.np-headline {
        font-size: 46px !important;
    }

    html body #challengeContent#challengeContent .challenge-header.challenge-header .challenge-streak-panel.challenge-streak-panel {
        padding-inline: 20px !important;
    }
}

html body :is(#answerSection.challenge-answer-section, .challenge-answer-section.answer-section):is(.challenge-answer-section):is(.answer-section) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 16px !important;
    border-radius: var(--ds-rounded-lg) !important;
    overflow: hidden !important;
}

html body #answerSection#answerSection > :is(h3, .challenge-result, .challenge-answer-input) {
    grid-column: 1 / -1 !important;
}

html body #answerSection#answerSection > h3 {
    margin: 0 !important;
}

html body #answerSection#answerSection > #submitChallengeBtn#submitChallengeBtn {
    grid-column: 2 !important;
    justify-self: end !important;
    align-self: end !important;
    margin: 0 !important;
}

html body :is(#answerSection.challenge-answer-section, .challenge-answer-section.answer-section):is(.challenge-answer-section):is(.answer-section) :is(.challenge-answer-input):is(.challenge-answer-input) {
    margin: 0 !important;
    border-radius: var(--ds-rounded-lg) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) :is(#answerSection.challenge-answer-section, .challenge-answer-section.answer-section):is(.challenge-answer-section):is(.answer-section) :is(.challenge-answer-input):is(.challenge-answer-input),
html[data-theme="dark"] body :is(#answerSection.challenge-answer-section, .challenge-answer-section.answer-section):is(.challenge-answer-section):is(.answer-section) :is(.challenge-answer-input):is(.challenge-answer-input) {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--ds-t-hairline) !important;
    color: var(--ds-inverse-ink) !important;
}

/* Navbar and ranking refinements requested from browser comments. */
html body #navbar#navbar :is(#userProfile, .user-profile) > :is(.avatar):is(.avatar):is(.avatar) {
    display: inline-grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex: 0 0 42px !important;
    line-height: 1 !important;
}

html body #navbar#navbar :is(#userProfile, .user-profile) > :is(.avatar):is(.avatar):is(.avatar):not(:has(img))::before {
    display: inline-grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) #navbar#navbar :is(#userProfile, .user-profile) > :is(.avatar):is(.avatar):is(.avatar) {
    background: color-mix(in srgb, var(--ds-inverse-ink) 8%, transparent) !important;
    color: var(--ds-inverse-ink) !important;
}

html body :is(.ranking-main):is(.ranking-main) :is(.ranking-hero):is(.ranking-hero) :is(.ranking-metric):is(.ranking-metric):is(.ranking-metric) {
    padding-block: 10px !important;
    gap: 6px !important;
}

html body :is(.ranking-main):is(.ranking-main) :is(.ranking-hero):is(.ranking-hero) :is(.ranking-metric span):is(span) {
    font-size: 14px !important;
    line-height: 1.35 !important;
}

html body :is(.ranking-main):is(.ranking-main) :is(.ranking-hero):is(.ranking-hero) :is(.ranking-metric strong):is(strong) {
    font-size: clamp(30px, 3vw, 40px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
}

html body :is(.ranking-board):is(.ranking-board) :is(.ranking-body):is(.ranking-body),
html body :is(.ranking-board):is(.ranking-board) :is(.card-body.ranking-body):is(.ranking-body) {
    padding: 0 !important;
}

html body :is(.ranking-board):is(.ranking-board) :is(.ranking-list):is(.ranking-list) {
    margin-top: 0 !important;
    padding-top: 0 !important;
    gap: 0 !important;
}

html body :is(.ranking-board):is(.ranking-board) :is(.ranking-list):is(.ranking-list) > :is(.ranking-item):first-child {
    margin-top: 0 !important;
    border-top: 0 !important;
}

html body #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(:hover, :focus, :focus-visible, :active),
html body #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar) {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

html body #navbar#navbar :is(#userProfile, .user-profile):is(:hover, :focus, :focus-visible, :active, .dropdown-open) {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

html body:is(body):is(body) :is(.ranking-main):is(.ranking-main) > :is(.ranking-hero):is(.ranking-hero):is(.ranking-hero) {
    padding-block: 34px !important;
    row-gap: 24px !important;
}

html body:is(body):is(body) :is(.ranking-main):is(.ranking-main) :is(.ranking-hero):is(.ranking-hero) :is(h1.np-headline):is(.np-headline) {
    font-size: clamp(52px, 6vw, 72px) !important;
    line-height: 1.02 !important;
}

html body:is(body):is(body) :is(.ranking-main):is(.ranking-main) :is(.ranking-hero):is(.ranking-hero) :is(.ranking-hero__copy):is(.ranking-hero__copy) {
    gap: 12px !important;
}

html body:is(body):is(body) :is(.ranking-main):is(.ranking-main) :is(.ranking-hero):is(.ranking-hero) :is(.ranking-metrics):is(.ranking-metrics) {
    gap: 14px !important;
}

html body:is(body):is(body) :is(.ranking-board):is(.ranking-board) > :is(.card-body.ranking-body, .ranking-body):is(.ranking-body) {
    margin: 0 !important;
    padding: 0 !important;
}

html body:is(body):is(body) :is(.ranking-board):is(.ranking-board) :is(.ranking-header):is(.ranking-header) {
    margin-bottom: 0 !important;
}

html body:is(body):is(body) :is(.ranking-board):is(.ranking-board) :is(.ranking-list):is(.ranking-list) {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

html body:is(body):is(body) :is(.ranking-board):is(.ranking-board) :is(.ranking-list):is(.ranking-list) > :is(.ranking-item):first-child {
    margin-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

html body:has(.forum-container) :is(.main-container):is(.main-container) {
    padding-top: 28px !important;
}

html body :is(.forum-container):is(.forum-container) {
    gap: 18px !important;
    padding-top: 0 !important;
}

html body :is(.forum-header):is(.forum-header):is(.forum-header) {
    min-height: 112px !important;
    padding-block: 24px !important;
}

html body:is(body):is(body) :is(.forum-container):is(.forum-container) > :is(.card):is(.card):is(.card) {
    border-radius: var(--ds-rounded-lg) !important;
    overflow: hidden !important;
}

html body:is(body):is(body) :is(.forum-container):is(.forum-container) > :is(.card):is(.card):is(.card) > :is(.card-body):is(.card-body) {
    border-radius: 0 !important;
    padding: 0 !important;
}

html body:is(body):is(body) :is(.forum-container):is(.forum-container) :is(.forum-posts):is(.forum-posts) {
    display: grid !important;
    gap: 0 !important;
}

html body:is(body):is(body) :is(.forum-container):is(.forum-container) :is(.forum-post):is(.forum-post):is(.forum-post) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 62px !important;
    padding: 12px 24px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ds-t-hairline-soft) !important;
    border-radius: 0 !important;
    background: var(--ds-t-surface) !important;
    box-shadow: none !important;
}

html body:is(body):is(body) :is(.forum-container):is(.forum-container) :is(.forum-post):is(.forum-post):last-child {
    border-bottom: 0 !important;
}

html body:is(body):is(body) :is(.forum-post):is(.forum-post) :is(.post-header):is(.post-header) {
    display: contents !important;
    margin: 0 !important;
}

html body:is(body):is(body) :is(.forum-post):is(.forum-post) :is(.post-header):is(.post-header) > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    min-width: 0 !important;
}

html body:is(body):is(body) :is(.forum-post):is(.forum-post) :is(.post-title):is(.post-title) {
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
}

html body:is(body):is(body) :is(.forum-post):is(.forum-post) :is(.post-meta):is(.post-meta) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: max-content !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
}

html body:is(body):is(body) :is(.forum-post):is(.forum-post) :is(.question-tag):is(.question-tag) {
    display: inline !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
}

html body.landing-page:is(body):is(body) :is(.home-intro):is(.home-intro):is(.home-intro):is(.home-intro) {
    align-items: center !important;
    padding-block: 34px !important;
    gap: clamp(22px, 3vw, 36px) !important;
}

html body.landing-page:is(body):is(body) :is(.home-legacy__title):is(.home-legacy__title):is(.home-legacy__title) {
    margin-top: 24px !important;
}

html body.landing-page:is(body):is(body) :is(.home-legacy__welcome):is(.home-legacy__welcome):is(.home-legacy__welcome) {
    margin-top: 24px !important;
    padding-top: 20px !important;
}

html body.landing-page:is(body):is(body) :is(.home-hero__rail):is(.home-hero__rail):is(.home-hero__rail):is(.home-hero__rail) {
    align-self: center !important;
    grid-template-rows: auto auto !important;
    padding: 16px !important;
    gap: 12px !important;
}

html body.landing-page:is(body):is(body) :is(.home-hero__metric):is(.home-hero__metric):is(.home-hero__metric) {
    min-height: 112px !important;
    height: 122px !important;
    padding: 18px !important;
}

html body.landing-page:is(body):is(body) :is(.home-hero__links):is(.home-hero__links):is(.home-hero__links) {
    gap: 10px !important;
}

html body.landing-page:is(body):is(body) :is(.home-panel--checkin):is(.home-panel--checkin):is(.home-panel--checkin) > :is(.home-button):is(.home-button):is(.home-button) {
    align-self: center !important;
    justify-self: center !important;
}

html body:is(body):is(body) :is(.user-name.role-owner, .user-link.role-owner, .member-name.role-owner, a.role-owner):is(.role-owner):is(.role-owner):not(:active):not(.selected):not(.is-selected) {
    color: #8b5cf6 !important;
}

html body:is(body):is(body) :is(.user-name.role-admin, .user-link.role-admin, .member-name.role-admin, a.role-admin):is(.role-admin):is(.role-admin):not(:active):not(.selected):not(.is-selected) {
    color: #f43f5e !important;
}

html body:is(body):is(body) :is(.user-name.role-scorer, .user-link.role-scorer, .member-name.role-scorer, a.role-scorer):is(.role-scorer):is(.role-scorer):not(:active):not(.selected):not(.is-selected) {
    color: #f59e0b !important;
}

html body:is(body):is(body) :is(
    .user-name.role-owner,
    .user-link.role-owner,
    .member-name.role-owner,
    a.role-owner,
    .user-name.role-admin,
    .user-link.role-admin,
    .member-name.role-admin,
    a.role-admin,
    .user-name.role-scorer,
    .user-link.role-scorer,
    .member-name.role-scorer,
    a.role-scorer
):is(:hover, :focus, :focus-visible):not(:active):not(.selected):not(.is-selected) {
    background: transparent !important;
    text-decoration-color: currentColor !important;
    box-shadow: none !important;
}

html :is(body.dark-mode, body[data-theme="dark"]):is(body):is(body) :is(.user-name.role-owner, .user-link.role-owner, .member-name.role-owner, a.role-owner):is(.role-owner):is(.role-owner):not(:active):not(.selected):not(.is-selected),
html[data-theme="dark"] body:is(body):is(body) :is(.user-name.role-owner, .user-link.role-owner, .member-name.role-owner, a.role-owner):is(.role-owner):is(.role-owner):not(:active):not(.selected):not(.is-selected) {
    color: #c4b5fd !important;
}

html :is(body.dark-mode, body[data-theme="dark"]):is(body):is(body) :is(.user-name.role-admin, .user-link.role-admin, .member-name.role-admin, a.role-admin):is(.role-admin):is(.role-admin):not(:active):not(.selected):not(.is-selected),
html[data-theme="dark"] body:is(body):is(body) :is(.user-name.role-admin, .user-link.role-admin, .member-name.role-admin, a.role-admin):is(.role-admin):is(.role-admin):not(:active):not(.selected):not(.is-selected) {
    color: #fda4af !important;
}

html :is(body.dark-mode, body[data-theme="dark"]):is(body):is(body) :is(.user-name.role-scorer, .user-link.role-scorer, .member-name.role-scorer, a.role-scorer):is(.role-scorer):is(.role-scorer):not(:active):not(.selected):not(.is-selected),
html[data-theme="dark"] body:is(body):is(body) :is(.user-name.role-scorer, .user-link.role-scorer, .member-name.role-scorer, a.role-scorer):is(.role-scorer):is(.role-scorer):not(:active):not(.selected):not(.is-selected) {
    color: #fdba74 !important;
}

html body:is(body):is(body) :is(.duty-member-score):is(.duty-member-score):is(.duty-member-score) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    margin-top: 8px !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}

html body:is(body):is(body) :is(.duty-member-score):is(.duty-member-score):is(.duty-member-score) :is(i, svg) {
    display: none !important;
}

html body:is(body):is(body) :is(.duty-member-score):is(.duty-member-score):is(.duty-member-score) :is(.duty-score-plus, .duty-score-minus) {
    display: inline-block !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    white-space: nowrap !important;
}

html body:is(body):is(body) :is(.duty-member-score):is(.duty-member-score):is(.duty-member-score) :is(.duty-score-plus):is(.duty-score-plus) {
    color: #16a34a !important;
}

html body:is(body):is(body) :is(.duty-member-score):is(.duty-member-score):is(.duty-member-score) :is(.duty-score-minus):is(.duty-score-minus) {
    color: #ef4444 !important;
}

html :is(body.dark-mode, body[data-theme="dark"]):is(body):is(body) :is(.duty-member-score):is(.duty-member-score):is(.duty-member-score) :is(.duty-score-plus):is(.duty-score-plus),
html[data-theme="dark"] body:is(body):is(body) :is(.duty-member-score):is(.duty-member-score):is(.duty-member-score) :is(.duty-score-plus):is(.duty-score-plus) {
    color: #86efac !important;
}

html :is(body.dark-mode, body[data-theme="dark"]):is(body):is(body) :is(.duty-member-score):is(.duty-member-score):is(.duty-member-score) :is(.duty-score-minus):is(.duty-score-minus),
html[data-theme="dark"] body:is(body):is(body) :is(.duty-member-score):is(.duty-member-score):is(.duty-member-score) :is(.duty-score-minus):is(.duty-score-minus) {
    color: #fca5a5 !important;
}

html body.landing-page:is(body):is(body) :is(.home-link):is(.home-link):is(.home-link) {
    border-radius: 999px !important;
}

html body.landing-page:is(body):is(body) :is(.home-stack):is(.home-stack):is(.home-stack) {
    gap: 18px !important;
    row-gap: 18px !important;
    align-content: start !important;
}

html body.landing-page:is(body):is(body) :is(.home-stack):is(.home-stack):is(.home-stack) > :is(.home-panel):is(.home-panel):is(.home-panel) {
    margin-block: 0 !important;
}

html body.landing-page:is(body):is(body) :is(.home-hero__metric):is(.home-hero__metric):is(.home-hero__metric):is(.home-hero__metric) {
    min-height: 96px !important;
    height: 96px !important;
    display: grid !important;
    align-content: center !important;
    justify-content: start !important;
    gap: 7px !important;
    padding: 16px 18px !important;
}

html body.landing-page:is(body):is(body) :is(.home-hero__metric):is(.home-hero__metric):is(.home-hero__metric) :is(strong):is(strong) {
    font-size: clamp(34px, 4vw, 46px) !important;
    line-height: 0.95 !important;
    font-weight: 520 !important;
}

html body.landing-page:is(body):is(body) :is(.home-hero__metric):is(.home-hero__metric):is(.home-hero__metric) :is(span):is(span) {
    line-height: 1.15 !important;
}

html body.landing-page:is(body):is(body) :is(.home-fortune__box):is(.home-fortune__box):is(.home-fortune__box) {
    border: 0 !important;
    color: #000000 !important;
}

html body.landing-page:is(body):is(body) :is(.home-fortune__box--great):is(.home-fortune__box) {
    background: color-mix(in srgb, var(--ds-block-lime) 72%, #ffffff 28%) !important;
}

html body.landing-page:is(body):is(body) :is(.home-fortune__box--good):is(.home-fortune__box) {
    background: color-mix(in srgb, var(--ds-block-mint) 72%, #ffffff 28%) !important;
}

html body.landing-page:is(body):is(body) :is(.home-fortune__box--mild):is(.home-fortune__box) {
    background: color-mix(in srgb, var(--ds-block-cream) 78%, #ffffff 22%) !important;
}

html body.landing-page:is(body):is(body) :is(.home-fortune__box--neutral):is(.home-fortune__box) {
    background: color-mix(in srgb, var(--ds-block-lilac) 66%, #ffffff 34%) !important;
}

html body.landing-page:is(body):is(body) :is(.home-fortune__box--bad):is(.home-fortune__box) {
    background: color-mix(in srgb, var(--ds-block-pink) 76%, #ffffff 24%) !important;
}

html :is(body, body.dark-mode, body[data-theme="dark"]):is(body):is(body) :is(.ranking-sidebar):is(.ranking-sidebar):is(.ranking-sidebar):is(.ranking-sidebar),
html[data-theme="dark"] body:is(body):is(body) :is(.ranking-sidebar):is(.ranking-sidebar):is(.ranking-sidebar):is(.ranking-sidebar) {
    outline: 0 !important;
    box-shadow: none !important;
    border-color: var(--ds-t-hairline) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]):is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(button, .avatar):is(button, .avatar),
html[data-theme="dark"] body:is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(button, .avatar):is(button, .avatar) {
    background: rgba(255, 255, 255, 0.16) !important;
    background-color: rgba(255, 255, 255, 0.16) !important;
    color: var(--ds-inverse-ink) !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

html :is(body.dark-mode, body[data-theme="dark"]):is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(:hover, :focus-visible, .dropdown-open),
html[data-theme="dark"] body:is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(:hover, :focus-visible, .dropdown-open) {
    background: rgba(255, 255, 255, 0.22) !important;
    background-color: rgba(255, 255, 255, 0.22) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]):is(body):is(body) :is(.ranking-score):is(.ranking-score):is(.ranking-score) :is(.score):is(.score),
html[data-theme="dark"] body:is(body):is(body) :is(.ranking-score):is(.ranking-score):is(.ranking-score) :is(.score):is(.score),
html :is(body.dark-mode, body[data-theme="dark"]):is(body):is(body) :is(.ranking-podium__item):is(.ranking-podium__item):is(.ranking-podium__item) > :is(strong):is(strong),
html[data-theme="dark"] body:is(body):is(body) :is(.ranking-podium__item):is(.ranking-podium__item):is(.ranking-podium__item) > :is(strong):is(strong) {
    color: var(--ds-inverse-ink) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]):is(body):is(body) :is(.ranking-score):is(.ranking-score):is(.ranking-score) > :is(span):is(span),
html[data-theme="dark"] body:is(body):is(body) :is(.ranking-score):is(.ranking-score):is(.ranking-score) > :is(span):is(span) {
    color: color-mix(in srgb, var(--ds-inverse-ink) 68%, transparent) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]):is(body):is(body) :is(.ranking-list, .ranking-sidebar):is(.ranking-list, .ranking-sidebar) :is(.ranking-item--rank-1, .ranking-item--rank-2, .ranking-item--rank-3, .ranking-podium__item--1, .ranking-podium__item--2, .ranking-podium__item--3):is(.ranking-item, .ranking-podium__item) :is(.ranking-score .score, .ranking-score span, strong):not(.role-tag),
html[data-theme="dark"] body:is(body):is(body) :is(.ranking-list, .ranking-sidebar):is(.ranking-list, .ranking-sidebar) :is(.ranking-item--rank-1, .ranking-item--rank-2, .ranking-item--rank-3, .ranking-podium__item--1, .ranking-podium__item--2, .ranking-podium__item--3):is(.ranking-item, .ranking-podium__item) :is(.ranking-score .score, .ranking-score span, strong):not(.role-tag) {
    color: var(--ds-inverse-ink) !important;
}

/* Compact, tactile account controls: visible as actions without a heavy frame. */
html body:is(body):is(body) #navbar#navbar .navbar-right {
    align-items: center !important;
    gap: 8px !important;
}

html body:is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(button, .avatar):is(button, .avatar) {
    display: inline-grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border: 1px solid color-mix(in srgb, var(--ds-t-ink) 14%, transparent) !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--ds-t-ink) 5%, transparent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 58%, transparent), 0 1px 2px color-mix(in srgb, #000000 5%, transparent) !important;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease !important;
}

/* No-avatar default: the fa-user glyph fills and centers in the 40px disc,
   matching the profile-page large avatar. Highest-specificity so it wins over
   the legacy `.avatar i { display:none }` and letter-::before rules. */
html body:is(body):is(body) #navbar#navbar :is(#userProfile .avatar, .user-profile .avatar):is(.avatar):is(.avatar) > i {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    color: var(--ds-t-ink) !important;
    font-size: 17px !important;
    line-height: 1 !important;
}

html body:is(body):is(body) #navbar#navbar :is(#userProfile .avatar, .user-profile .avatar):is(.avatar):is(.avatar):not(:has(img))::before {
    content: none !important;
}

html body:is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(button, .avatar):is(button, .avatar):is(:hover, :focus-visible, .dropdown-open) {
    border-color: color-mix(in srgb, var(--ds-t-ink) 24%, transparent) !important;
    background: color-mix(in srgb, var(--ds-t-ink) 9%, transparent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 64%, transparent), 0 3px 9px color-mix(in srgb, #000000 10%, transparent) !important;
    transform: translateY(-1px) !important;
}

html body:is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(button, .avatar):is(button, .avatar):active {
    transform: scale(0.96) !important;
}

html body:is(body):is(body) #navbar#navbar #userProfile .avatar:not(:has(img))::before {
    font-size: 12px !important;
    font-weight: 760 !important;
}

html :is(body.dark-mode, body[data-theme="dark"]):is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(button, .avatar):is(button, .avatar),
html[data-theme="dark"] body:is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(button, .avatar):is(button, .avatar) {
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.09) !important;
    color: #f8fafc !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

html :is(body.dark-mode, body[data-theme="dark"]):is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(button, .avatar):is(button, .avatar):is(:hover, :focus-visible, .dropdown-open),
html[data-theme="dark"] body:is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(button, .avatar):is(button, .avatar):is(:hover, :focus-visible, .dropdown-open) {
    border-color: rgba(255, 255, 255, 0.22) !important;
    background: rgba(255, 255, 255, 0.14) !important;
}

/* Shared page frame: full-width feature panels and content cards line up on
 * the same 1280px editorial grid across every route. */
html body:is(body):is(body) :is(
    .landing-container,
    .forum-container,
    .forum-detail-container,
    .editor-wrapper,
    .questions-container,
    .question-detail-container,
    .daily-challenge-container,
    .ranking-container,
    .profile-container,
    .profile-content,
    .checkin-container,
    .clock-container,
    .score-editor-container,
    .owner-dashboard,
    .groups-main,
    .groups-container,
    .settings-wrap,
    .class-duties-header,
    .class-duties-content,
    .class-members-header,
    .class-members-grid,
    .admin-container,
    .content-container
):is(
    .landing-container,
    .forum-container,
    .forum-detail-container,
    .editor-wrapper,
    .questions-container,
    .question-detail-container,
    .daily-challenge-container,
    .ranking-container,
    .profile-container,
    .profile-content,
    .checkin-container,
    .clock-container,
    .score-editor-container,
    .owner-dashboard,
    .groups-main,
    .groups-container,
    .settings-wrap,
    .class-duties-header,
    .class-duties-content,
    .class-members-header,
    .class-members-grid,
    .admin-container,
    .content-container
) {
    width: min(calc(100% - 48px), var(--ds-container)) !important;
    max-width: var(--ds-container) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
}

/* Daily challenge uses the shared page frame directly. Its legacy wrapper
 * previously added a second horizontal inset, making every card look narrower
 * than the rest of the application. */
html body:is(body):is(body) .daily-challenge-container.question-detail-container {
    padding-inline: 0 !important;
}

@media (max-width: 960px) {
    html body:is(body):is(body) .daily-challenge-container.question-detail-container {
        width: min(calc(100% - 32px), var(--ds-container)) !important;
    }
}

@media (max-width: 640px) {
    html body:is(body):is(body) .daily-challenge-container.question-detail-container {
        width: min(calc(100% - 24px), var(--ds-container)) !important;
    }
}

html body:is(body):is(body) :is(.ranking-main):is(.ranking-main) > :is(.ranking-hero):is(.ranking-hero):is(.ranking-hero) {
    width: min(calc(100% - 48px), var(--ds-container)) !important;
    max-width: var(--ds-container) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
}

/* Account actions stay icon-first and visibly clickable without decorative
 * shadows or an enclosing utility tray. */
html body:is(body):is(body) #navbar#navbar .navbar-right {
    gap: 8px !important;
}

html body:is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(button, .avatar):is(button, .avatar) {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease !important;
}

html body:is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(button, .avatar):is(button, .avatar):is(:hover, :focus-visible, .dropdown-open) {
    border-color: color-mix(in srgb, var(--ds-t-ink) 28%, var(--ds-t-hairline)) !important;
    background: var(--ds-t-surface-soft) !important;
    box-shadow: none !important;
    transform: none !important;
}

html :is(body.dark-mode, body[data-theme="dark"]):is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(button, .avatar):is(button, .avatar),
html[data-theme="dark"] body:is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(button, .avatar):is(button, .avatar) {
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: transparent !important;
    box-shadow: none !important;
}

html :is(body.dark-mode, body[data-theme="dark"]):is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(button, .avatar):is(button, .avatar):is(:hover, :focus-visible, .dropdown-open),
html[data-theme="dark"] body:is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(button, .avatar):is(button, .avatar):is(:hover, :focus-visible, .dropdown-open) {
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

/* The study shortcuts are a compact three-action row at every viewport. */
html body.landing-page:is(body):is(body) :is(.home-hero__links):is(.home-hero__links):is(.home-hero__links) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body.landing-page:is(body):is(body) :is(.home-hero__links):is(.home-hero__links):is(.home-hero__links) > :is(.home-link):is(.home-link):is(.home-link) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 6px 10px !important;
    font-size: clamp(13px, 1.35vw, 16px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* Tablet and mobile use the same explicit hamburger behavior. This prevents
 * the navigation from disappearing in the 834–960px gap. */
@media (max-width: 960px) {
    html body:is(body):is(body) #navbar#navbar .navbar-container {
        width: min(calc(100% - 32px), var(--ds-container)) !important;
        position: relative !important;
    }

    html body:is(body):is(body) #navbar#navbar .navbar-left {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    html body:is(body):is(body) #navbar#navbar :is(.navbar-toggle, #navbarToggle):is(.navbar-toggle, #navbarToggle) {
        display: inline-grid !important;
        place-items: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        margin-left: 4px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--ds-t-ink) !important;
    }

    html body:is(body):is(body) #navbar#navbar :is(.navbar-toggle, #navbarToggle):is(.navbar-toggle, #navbarToggle):is(:hover, :focus-visible) {
        background: var(--ds-t-surface-soft) !important;
        box-shadow: none !important;
    }

    html body:is(body):is(body) #navbar#navbar .navbar-menu {
        display: flex !important;
        position: absolute !important;
        top: 56px !important;
        right: 0 !important;
        left: 0 !important;
        width: auto !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        flex-direction: column !important;
        flex: 0 0 auto !important;
        align-items: stretch !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 0 !important;
        border: 0 !important;
        border-top: 1px solid var(--ds-t-hairline-soft) !important;
        border-radius: 0 !important;
        background: var(--ds-t-canvas) !important;
        box-shadow: none !important;
        transition: max-height 180ms ease, opacity 140ms ease, visibility 140ms ease !important;
        z-index: 1000 !important;
    }

    html body:is(body):is(body) #navbar#navbar .navbar-menu.open {
        max-height: 540px !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    html body:is(body):is(body) #navbar#navbar .navbar-menu .navbar-item {
        width: 100% !important;
        min-height: 48px !important;
        padding: 12px 16px !important;
        justify-content: flex-start !important;
        border-radius: 0 !important;
    }

    html body:is(body):is(body) :is(
        .landing-container,
        .forum-container,
        .forum-detail-container,
        .editor-wrapper,
        .questions-container,
        .question-detail-container,
        .daily-challenge-container,
        .ranking-container,
        .profile-container,
        .profile-content,
        .checkin-container,
        .clock-container,
        .score-editor-container,
        .owner-dashboard,
        .groups-main,
        .groups-container,
        .settings-wrap,
        .class-duties-header,
        .class-duties-content,
        .class-members-header,
        .class-members-grid,
        .admin-container,
        .content-container
    ) {
        width: min(calc(100% - 32px), var(--ds-container)) !important;
    }

    html body:is(body):is(body) :is(.ranking-main):is(.ranking-main) > :is(.ranking-hero):is(.ranking-hero):is(.ranking-hero) {
        width: min(calc(100% - 32px), var(--ds-container)) !important;
    }
}

@media (max-width: 640px) {
    html body:is(body):is(body) #navbar#navbar .navbar-container {
        width: min(calc(100% - 24px), var(--ds-container)) !important;
    }

    html body:is(body):is(body) :is(
        .landing-container,
        .forum-container,
        .forum-detail-container,
        .editor-wrapper,
        .questions-container,
        .question-detail-container,
        .daily-challenge-container,
        .ranking-container,
        .profile-container,
        .profile-content,
        .checkin-container,
        .clock-container,
        .score-editor-container,
        .owner-dashboard,
        .groups-main,
        .groups-container,
        .settings-wrap,
        .class-duties-header,
        .class-duties-content,
        .class-members-header,
        .class-members-grid,
        .admin-container,
        .content-container
    ) {
        width: min(calc(100% - 24px), var(--ds-container)) !important;
    }

    html body:is(body):is(body) :is(.ranking-main):is(.ranking-main) > :is(.ranking-hero):is(.ranking-hero):is(.ranking-hero) {
        width: min(calc(100% - 24px), var(--ds-container)) !important;
    }

    html body.landing-page:is(body):is(body) :is(.home-hero__links):is(.home-hero__links):is(.home-hero__links) {
        gap: 6px !important;
    }
}

/* One page frame: the page shell no longer adds a second inset around the
 * shared content containers, so feature panels line up across routes. */
html body > main.main-container:not(.ranking-main) {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
}

html body :is(.ranking-main):is(.ranking-main) {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
}

html body :is(.ranking-main):is(.ranking-main) > :is(.ranking-hero, .ranking-container.ranking-layout):is(.ranking-hero, .ranking-container):is(.ranking-hero, .ranking-container) {
    width: min(calc(100% - 48px), var(--ds-container)) !important;
    max-width: var(--ds-container) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
}

@media (max-width: 960px) {
    html body :is(.ranking-main):is(.ranking-main) > :is(.ranking-hero, .ranking-container.ranking-layout):is(.ranking-hero, .ranking-container):is(.ranking-hero, .ranking-container) {
        width: min(calc(100% - 32px), var(--ds-container)) !important;
    }

    /* Mobile navigation keeps a fixed anchor while its contents expand or
     * collapse, so the toggle never makes the panel visibly jump. */
    html body:is(body):is(body) #navbar#navbar .navbar-menu {
        position: fixed !important;
        top: var(--mobile-menu-top, 64px) !important;
        right: auto !important;
        left: 50% !important;
        width: var(--mobile-menu-width, min(calc(100vw - 24px), 460px)) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden auto !important;
        overscroll-behavior: contain !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        border: 1px solid transparent !important;
        border-radius: var(--ds-rounded-lg) !important;
        background: var(--ds-t-surface) !important;
        background: color-mix(in srgb, var(--ds-t-surface) 88%, transparent) !important;
        -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
        backdrop-filter: blur(16px) saturate(1.08) !important;
        box-shadow: none !important;
        transform: translate3d(-50%, 0, 0) !important;
        transform-origin: top center !important;
        transition:
            max-height 280ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 180ms ease,
            padding 280ms cubic-bezier(0.22, 1, 0.36, 1),
            border-color 180ms ease,
            visibility 0s linear 280ms !important;
    }

    html body:is(body):is(body) #navbar#navbar .navbar-menu.open {
        max-height: var(--mobile-menu-max-height, calc(100dvh - 80px)) !important;
        padding: 8px !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        border-color: var(--ds-t-hairline) !important;
        transform: translate3d(-50%, 0, 0) !important;
        transition-delay: 0s, 0s, 0s, 0s, 0s !important;
    }

    html body:is(body):is(body) #navbar#navbar .navbar-menu.closing {
        transform: translate3d(-50%, 0, 0) !important;
    }

    html body:is(body):is(body) #navbar#navbar .navbar-menu .navbar-item {
        min-height: 56px !important;
        padding: 14px 18px !important;
        border-radius: calc(var(--ds-rounded-lg) - 8px) !important;
        color: var(--ds-t-ink) !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        opacity: 0 !important;
        transform: translateY(-6px) !important;
        transition:
            background-color 160ms ease,
            color 160ms ease,
            opacity 180ms ease,
            transform 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    html body:is(body):is(body) #navbar#navbar .navbar-menu.open .navbar-item {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    html body:is(body):is(body) #navbar#navbar .navbar-menu.open .navbar-item:nth-child(1) { transition-delay: 35ms !important; }
    html body:is(body):is(body) #navbar#navbar .navbar-menu.open .navbar-item:nth-child(2) { transition-delay: 50ms !important; }
    html body:is(body):is(body) #navbar#navbar .navbar-menu.open .navbar-item:nth-child(3) { transition-delay: 65ms !important; }
    html body:is(body):is(body) #navbar#navbar .navbar-menu.open .navbar-item:nth-child(4) { transition-delay: 80ms !important; }
    html body:is(body):is(body) #navbar#navbar .navbar-menu.open .navbar-item:nth-child(5) { transition-delay: 95ms !important; }
    html body:is(body):is(body) #navbar#navbar .navbar-menu.open .navbar-item:nth-child(6) { transition-delay: 110ms !important; }
    html body:is(body):is(body) #navbar#navbar .navbar-menu.open .navbar-item:nth-child(7) { transition-delay: 125ms !important; }
    html body:is(body):is(body) #navbar#navbar .navbar-menu.open .navbar-item:nth-child(8) { transition-delay: 140ms !important; }
    html body:is(body):is(body) #navbar#navbar .navbar-menu.open .navbar-item:nth-child(9) { transition-delay: 155ms !important; }

    html body:is(body):is(body) #navbar#navbar .navbar-menu .navbar-item:is(:hover, :focus-visible) {
        background: var(--ds-t-surface-soft) !important;
        color: var(--ds-t-ink) !important;
    }
}

@media (max-width: 640px) {
    html body :is(.ranking-main):is(.ranking-main) > :is(.ranking-hero, .ranking-container.ranking-layout):is(.ranking-hero, .ranking-container):is(.ranking-hero, .ranking-container) {
        width: min(calc(100% - 24px), var(--ds-container)) !important;
    }
}

/* Ranking cards share the hero's outer frame. The layout container already
 * owns the responsive page width, so it must not add a second horizontal inset. */
html body :is(.ranking-main):is(.ranking-main) > :is(.ranking-container.ranking-layout):is(.ranking-layout):is(.ranking-layout) {
    margin-top: var(--ds-space-lg) !important;
    padding-inline: 0 !important;
}

/* The compact podium is one continuous surface: its heading keeps breathing
 * room while the medal rows run edge-to-edge and inherit the outer clipping. */
html body :is(.ranking-sidebar):is(.ranking-sidebar):is(.ranking-sidebar):is(.ranking-sidebar) {
    gap: var(--ds-space-lg) !important;
    padding: var(--ds-space-xl) 0 0 !important;
    overflow: hidden !important;
}

html body .ranking-sidebar :is(.ranking-sidebar__header):is(.ranking-sidebar__header):is(.ranking-sidebar__header) {
    padding-inline: var(--ds-space-xl) !important;
}

html body .ranking-sidebar :is(.ranking-podium):is(.ranking-podium):is(.ranking-podium) {
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Keep the page summary outside the control capsule at every viewport. */
html body #rankingPagination#rankingPagination {
    flex-direction: column !important;
    gap: 10px !important;
}

html body #rankingPagination#rankingPagination .pagination-info {
    display: block !important;
    margin-left: 0 !important;
    text-align: center !important;
}

@media (prefers-reduced-motion: reduce) {
    html body:is(body):is(body) #navbar#navbar .navbar-menu,
    html body:is(body):is(body) #navbar#navbar .navbar-menu .navbar-item {
        transition-duration: 1ms !important;
        transition-delay: 0s !important;
    }
}

/* Browser-comment refinements: keep compact controls and fluid metrics within
 * their own component bounds without changing the shared page geometry. */
html body.landing-page:is(body):is(body) :is(.home-hero__metric):is(.home-hero__metric):is(.home-hero__metric) > strong {
    max-width: 100% !important;
    font-size: clamp(24px, 2.5vw, 34px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

html body.landing-page:is(body):is(body) :is(.home-hero__metric:nth-of-type(3)):is(.home-hero__metric):is(.home-hero__metric) > strong {
    font-size: clamp(18px, 1.9vw, 28px) !important;
}

html body:is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(button, .avatar):is(button, .avatar),
html :is(body.dark-mode, body[data-theme="dark"]):is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(button, .avatar):is(button, .avatar),
html[data-theme="dark"] body:is(body):is(body) #navbar#navbar :is(button#themeSwitcher.theme-switcher, #userProfile .avatar, .user-profile .avatar):is(button, .avatar):is(button, .avatar) {
    border: 0 !important;
}

html body.settings-page:is(body):is(body) .settings-wrap .settings-list .settings-row .settings-row__left > button.settings-help-trigger {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    flex: 0 1 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ds-t-ink) !important;
    box-shadow: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    text-align: left !important;
    transform: none !important;
}

/* Public user profile: one coherent student badge instead of a card nested
 * inside a colored hero. The badge keeps real profile data and avatar actions
 * while presenting the six metrics as a compact, scan-friendly matrix. */
html body #main-content#main-content .profile-container.profile-container > .profile-header-card.profile-header-card.profile-header-card.profile-header-card {
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 1px solid color-mix(in srgb, #000000 22%, transparent) !important;
    border-radius: var(--ds-rounded-lg) !important;
    background: var(--ds-block-mint) !important;
    box-shadow: none !important;
}

html body #main-content#main-content .profile-container.profile-container > .profile-header-card.profile-header-card.profile-header-card.profile-header-card::before {
    content: "" !important;
    position: absolute !important;
    top: 18px !important;
    left: 50% !important;
    z-index: 2 !important;
    width: 64px !important;
    height: 8px !important;
    border-radius: var(--ds-rounded-pill) !important;
    background: #000000 !important;
    transform: translateX(-50%) !important;
}

html body #main-content#main-content .profile-container.profile-container > .profile-header-card.profile-header-card.profile-header-card.profile-header-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    border: 8px solid rgba(255, 255, 255, 0.42) !important;
    border-radius: inherit !important;
}

html body:is(body):is(body) .profile-container > .profile-header-card .profile-header.profile-header {
    display: grid !important;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.8fr) !important;
    align-items: stretch !important;
    gap: 0 !important;
    min-height: 332px !important;
    padding: 52px 44px 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #000000 !important;
    box-shadow: none !important;
}

html body:is(body):is(body) .profile-header .profile-badge__identity {
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 20px !important;
    min-width: 0 !important;
    padding: 16px 38px 16px 0 !important;
    border-right: 1px solid rgba(0, 0, 0, 0.18) !important;
}

html body:is(body):is(body) .profile-header .profile-avatar.profile-avatar {
    position: relative !important;
    width: 132px !important;
    height: 132px !important;
    margin: 0 !important;
    flex: none !important;
}

html body:is(body):is(body) .profile-header .profile-avatar .avatar-large.avatar-large {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 132px !important;
    height: 132px !important;
    overflow: hidden !important;
    border: 2px solid #000000 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.64) !important;
    color: #000000 !important;
    box-shadow: none !important;
}

html body:is(body):is(body) .profile-header .profile-avatar .avatar-large.avatar-large > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: inherit !important;
    object-fit: cover !important;
    object-position: center center !important;
}

html body #navbar#navbar .user-profile .avatar {
    position: relative !important;
    overflow: hidden !important;
}

html body #navbar#navbar .user-profile .avatar > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
}

html body:is(body):is(body) .profile-header .profile-avatar.is-own-profile .avatar-large {
    cursor: pointer !important;
}

html body:is(body):is(body) .profile-header .profile-avatar.is-own-profile .avatar-large:is(:hover, :focus-visible) {
    outline: 3px solid rgba(0, 0, 0, 0.18) !important;
    outline-offset: 4px !important;
}

html body #main-content#main-content .profile-header.profile-header .profile-avatar.profile-avatar > #changeAvatarBtn#changeAvatarBtn {
    position: absolute !important;
    right: -2px !important;
    bottom: -2px !important;
    z-index: 3 !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 3px solid var(--ds-block-mint) !important;
    border-radius: 50% !important;
    background: #000000 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html body #main-content#main-content .profile-header.profile-header .profile-avatar.profile-avatar > #changeAvatarBtn#changeAvatarBtn:is(:hover, :focus-visible) {
    background: #282828 !important;
    color: #ffffff !important;
    transform: none !important;
}

html body:is(body):is(body) .profile-header .profile-badge__copy {
    min-width: 0 !important;
    text-align: center !important;
}

html body:is(body):is(body) .profile-header .profile-badge__kicker,
html body:is(body):is(body) .profile-header .profile-badge__id {
    margin: 0 !important;
    color: rgba(0, 0, 0, 0.58) !important;
    font-family: var(--ds-font-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
}

html body:is(body):is(body) .profile-header .profile-badge__copy > #profileUsername#profileUsername {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 6px 0 8px !important;
    color: #000000 !important;
    font-size: clamp(28px, 3vw, 40px) !important;
    font-weight: 720 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

html body:is(body):is(body) .profile-header .profile-badge__copy #profileUsername .user-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body:is(body):is(body) .profile-header .profile-badge__copy #profileUsername .user-name.role-owner {
    color: #8b5cf6 !important;
}

html body:is(body):is(body) .profile-header .profile-badge__copy #profileUsername .user-name.role-admin {
    color: #f43f5e !important;
}

html body:is(body):is(body) .profile-header .profile-badge__copy #profileUsername .user-name.role-scorer {
    color: #f59e0b !important;
}

html body:is(body):is(body) .profile-header .profile-badge__copy #profileUsername .user-name.role-user {
    color: #111111 !important;
}

html body:is(body):is(body) .profile-header .profile-badge__copy #profileUsername .role-tag {
    flex: 0 0 auto !important;
    color: #ffffff !important;
    white-space: nowrap !important;
}

html body:is(body):is(body) .profile-header .profile-info.profile-info {
    display: grid !important;
    min-width: 0 !important;
    padding: 14px 0 14px 38px !important;
}

html body:is(body):is(body) .profile-header .profile-stats.profile-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    border-radius: var(--ds-rounded-md) !important;
    background: rgba(255, 255, 255, 0.34) !important;
}

html body:is(body):is(body) .profile-header .profile-stats > .stat-item.stat-item {
    display: grid !important;
    place-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 108px !important;
    margin: 0 !important;
    padding: 16px 10px !important;
    border: 0 !important;
    border-right: 1px solid rgba(0, 0, 0, 0.14) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #000000 !important;
    box-shadow: none !important;
    text-align: center !important;
}

html body:is(body):is(body) .profile-header .profile-stats > .stat-item:nth-child(3n) {
    border-right: 0 !important;
}

html body:is(body):is(body) .profile-header .profile-stats > .stat-item:nth-last-child(-n + 3) {
    border-bottom: 0 !important;
}

html body:is(body):is(body) .profile-header .profile-stats .stat-value.stat-value {
    color: #000000 !important;
    font-size: clamp(30px, 3.4vw, 46px) !important;
    font-weight: 560 !important;
    line-height: 0.95 !important;
    letter-spacing: 0 !important;
}

html body:is(body):is(body) .profile-header .profile-stats .stat-label.stat-label {
    color: rgba(0, 0, 0, 0.64) !important;
    font-size: 13px !important;
    font-weight: 620 !important;
    line-height: 1.25 !important;
}

@media (max-width: 760px) {
    html body:is(body):is(body) .profile-container > .profile-header-card .profile-header.profile-header {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        padding: 52px 24px 24px !important;
    }

    html body:is(body):is(body) .profile-header .profile-badge__identity {
        grid-template-columns: auto minmax(0, 1fr) !important;
        justify-items: start !important;
        padding: 8px 0 24px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.18) !important;
    }

    html body:is(body):is(body) .profile-header .profile-badge__copy {
        text-align: left !important;
    }

    html body:is(body):is(body) .profile-header .profile-badge__copy > #profileUsername#profileUsername {
        justify-content: flex-start !important;
    }

    html body:is(body):is(body) .profile-header .profile-info.profile-info {
        padding: 24px 0 0 !important;
    }

    html body:is(body):is(body) .profile-header .profile-stats.profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    }

    html body:is(body):is(body) .profile-header .profile-stats > .stat-item:nth-child(3n) {
        border-right: 1px solid rgba(0, 0, 0, 0.14) !important;
    }

    html body:is(body):is(body) .profile-header .profile-stats > .stat-item:nth-child(2n) {
        border-right: 0 !important;
    }

    html body:is(body):is(body) .profile-header .profile-stats > .stat-item:nth-last-child(-n + 3) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.14) !important;
    }

    html body:is(body):is(body) .profile-header .profile-stats > .stat-item:nth-last-child(-n + 2) {
        border-bottom: 0 !important;
    }
}

@media (max-width: 420px) {
    html body:is(body):is(body) .profile-header .profile-avatar.profile-avatar,
    html body:is(body):is(body) .profile-header .profile-avatar .avatar-large.avatar-large {
        width: 104px !important;
        height: 104px !important;
    }

    html body:is(body):is(body) .profile-header .profile-badge__identity {
        gap: 16px !important;
    }
}

/* Profile follow-up: one shared width, equal detail-card heights, and activity
 * rows that keep their icon, copy, timestamp, and action in stable tracks. */
html body #main-content#main-content .profile-container.profile-container > .profile-content.profile-content {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    align-items: start !important;
}

html body:is(body):is(body) .profile-info-card.profile-info-card > .card-body.card-body {
    width: 100% !important;
    box-sizing: border-box !important;
}

html body:is(body):is(body) .profile-info-card.profile-info-card .info-grid.info-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
}

html body:is(body):is(body) .profile-info-card.profile-info-card .info-grid.info-grid > .info-item.info-item {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

html body #main-content#main-content .profile-container.profile-container > .profile-content.profile-content > :is(.profile-info-card, .profile-activity-card) {
    display: flex !important;
    flex-direction: column !important;
    align-self: start !important;
    min-height: 0 !important;
}

html body #main-content#main-content .profile-container.profile-container > .profile-content.profile-content > .profile-info-card.profile-info-card {
    height: auto !important;
    max-height: none !important;
}

html body #main-content#main-content .profile-container.profile-container > .profile-content.profile-content > .profile-activity-card.profile-activity-card {
    overflow: hidden !important;
}

html body #main-content#main-content .profile-container.profile-container > .profile-content.profile-content > :is(.profile-info-card, .profile-activity-card) > .card-body {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

html body #main-content#main-content .profile-activity-card.profile-activity-card > .card-body {
    overflow: hidden !important;
}

html body #main-content#main-content .profile-activity-card.profile-activity-card #activityList#activityList {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 6px 0 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html body #main-content#main-content .profile-activity-card.profile-activity-card #activityList.activity-list--empty {
    place-content: center !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html body #main-content#main-content .profile-activity-card.profile-activity-card .no-activity.no-activity {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 220px !important;
    margin: auto !important;
    padding: 28px 20px !important;
    border: 1px dashed var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-md) !important;
    background: var(--ds-t-surface-soft) !important;
    color: color-mix(in srgb, var(--ds-t-ink) 62%, transparent) !important;
    text-align: center !important;
}

html body #main-content#main-content .profile-activity-card.profile-activity-card .no-activity > i {
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: var(--ds-t-ink) !important;
    color: var(--ds-t-canvas) !important;
    font-size: 21px !important;
    opacity: 1 !important;
}

html body #main-content#main-content .profile-activity-card.profile-activity-card .no-activity > p {
    margin: 0 !important;
    color: inherit !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
}

html body #main-content#main-content .profile-activity-card.profile-activity-card #activityList#activityList > .activity-item.activity-item {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 12px !important;
    min-width: 0 !important;
    min-height: 88px !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow: hidden !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-md) !important;
    background: var(--ds-t-surface-soft) !important;
    box-shadow: none !important;
}

html body #main-content#main-content .profile-activity-card.profile-activity-card .activity-item .activity-icon.activity-icon {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: var(--ds-t-surface) !important;
    font-size: 16px !important;
}

html body #main-content#main-content .profile-activity-card.profile-activity-card .activity-item .activity-content.activity-content {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

html body #main-content#main-content .profile-activity-card.profile-activity-card .activity-item :is(.activity-text, .activity-details, .activity-time) {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
}

html body #main-content#main-content .profile-activity-card.profile-activity-card .activity-item .activity-text {
    color: var(--ds-t-ink) !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
}

html body #main-content#main-content .profile-activity-card.profile-activity-card .activity-item :is(.activity-details, .activity-time) {
    color: color-mix(in srgb, var(--ds-t-ink) 62%, transparent) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

html body #main-content#main-content .profile-activity-card.profile-activity-card .activity-item .activity-undo-btn.activity-undo-btn {
    position: static !important;
    align-self: start !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

html body:is(body):is(body) .profile-header .profile-stats.profile-stats {
    gap: 10px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

html body:is(body):is(body) .profile-header .profile-stats > .stat-item.stat-item,
html body:is(body):is(body) .profile-header .profile-stats > .stat-item.stat-item:nth-child(n) {
    border: 1px solid rgba(0, 0, 0, 0.14) !important;
    border-radius: var(--ds-rounded-md) !important;
    background: rgba(255, 255, 255, 0.34) !important;
}

html body:is(body):is(body) .profile-header .profile-avatar .avatar-large.avatar-large {
    border: 0 !important;
    outline: 0 !important;
}

html body:is(body):is(body) .profile-header .profile-avatar.is-own-profile .avatar-large:is(:hover, :focus-visible, :active) {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

html body:is(body):is(body) .profile-header .profile-avatar .avatar-large.avatar-large > i {
    font-size: 46px !important;
    line-height: 1 !important;
}

/* Mobile footer is a compact two-column site map rather than a long single
 * stack. The links keep comfortable touch rhythm without wasting vertical space. */
@media (max-width: 560px) {
    html body .footer,
    html body footer.footer {
        padding: 32px 20px 24px !important;
    }

    html body .footer-container.footer-container {
        width: 100% !important;
        max-width: none !important;
    }

    html body .footer-columns.footer-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 26px 20px !important;
    }

    html body .footer-col-title.footer-col-title {
        margin-bottom: 8px !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    html body .footer-links.footer-links {
        display: grid !important;
        gap: 2px !important;
    }

    html body .footer-links.footer-links a {
        min-height: 38px !important;
        width: fit-content !important;
        padding: 4px 0 !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    html body .footer-baseline.footer-baseline {
        margin-top: 28px !important;
        padding-top: 18px !important;
        text-align: center !important;
    }

    html body .footer-baseline.footer-baseline p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    html body #main-content#main-content .profile-container.profile-container > .profile-content.profile-content > :is(.profile-info-card, .profile-activity-card) {
        height: auto !important;
    }

    html body #main-content#main-content .profile-activity-card.profile-activity-card #activityList#activityList {
        max-height: none !important;
        padding-right: 0 !important;
        overflow: visible !important;
    }

    html body #main-content#main-content .profile-activity-card.profile-activity-card #activityList#activityList > .activity-item.activity-item {
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }

    html body #main-content#main-content .profile-activity-card.profile-activity-card .activity-item .activity-undo-btn.activity-undo-btn {
        grid-column: 2 !important;
        justify-self: start !important;
    }
}

/* Browser-comment pass: every routed page starts its first content card on
 * one shared vertical rhythm. Nested page containers no longer add a second
 * top inset inside the outer main shell. */
html body:not(.auth-page):is(body):is(body) > main {
    padding-top: 32px !important;
}

html body:not(.auth-page):is(body):is(body) > main > :is(
    .landing-container,
    .forum-container,
    .forum-detail-container,
    .editor-wrapper,
    .questions-container,
    .question-detail-container,
    .daily-challenge-container,
    .ranking-container,
    .profile-container,
    .checkin-container,
    .clock-container,
    .score-editor-container,
    .owner-dashboard,
    .groups-main,
    .groups-container,
    .settings-wrap,
    .class-duties-header,
    .class-duties-content,
    .class-members-header,
    .class-members-grid,
    .content-container
) {
    padding-top: 0 !important;
}

/* Homepage columns are independent vertical stacks. Their internal gaps are
 * identical, so the left check-in card aligns with the right information card. */
html body.landing-page:is(body):is(body) :is(.home-tools__grid):is(.home-tools__grid):is(.home-tools__grid) {
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr) !important;
    grid-template-areas: none !important;
    gap: 18px !important;
    align-items: start !important;
}

html body.landing-page:is(body):is(body) :is(.home-tools__grid):is(.home-tools__grid) > :is(.home-stack):is(.home-stack):is(.home-stack) {
    grid-area: auto !important;
    display: grid !important;
    gap: 18px !important;
    row-gap: 18px !important;
    align-self: start !important;
    align-content: start !important;
}

html body.landing-page:is(body):is(body) :is(.home-tools__grid):is(.home-tools__grid) :is(.home-panel--wide, .home-panel--checkin):is(.home-panel) {
    grid-area: auto !important;
}

/* The challenge metric is an action, not a passive number tile. The warm
 * status surface and compact arrow communicate that it opens today's task. */
html body.landing-page:is(body):is(body) :is(a.home-hero__metric--challenge):is(.home-hero__metric):is(.home-hero__metric) {
    position: relative !important;
    text-decoration: none !important;
    background: var(--ds-t-primary) !important;
    border: 1px solid var(--ds-t-primary) !important;
    transition: background-color 150ms ease, border-color 150ms ease !important;
}

html body.landing-page:is(body):is(body) :is(a.home-hero__metric--challenge.is-ready):is(.home-hero__metric):is(.home-hero__metric) {
    background: var(--ds-t-primary) !important;
}

html body.landing-page:is(body):is(body) :is(a.home-hero__metric--challenge):is(.home-hero__metric):is(.home-hero__metric):is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--ds-t-primary) 84%, #ffffff) !important;
    border-color: var(--ds-t-primary) !important;
    outline: none !important;
}

html body.landing-page:is(body):is(body) :is(a.home-hero__metric--challenge.is-ready):is(.home-hero__metric):is(.home-hero__metric):is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--ds-t-primary) 84%, #ffffff) !important;
}

/* Ink-surface challenge tile → all its text/arrow become inverse. */
html body.landing-page:is(body):is(body) :is(a.home-hero__metric--challenge):is(.home-hero__metric):is(.home-hero__metric) :is(span, strong, small, i) {
    color: var(--ds-t-on-primary) !important;
    background: transparent !important;
}

html body.landing-page:is(body):is(body) :is(a.home-hero__metric--challenge):is(.home-hero__metric):is(.home-hero__metric) > strong {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(18px, 1.9vw, 26px) !important;
}

html body.landing-page:is(body):is(body) :is(a.home-hero__metric--challenge):is(.home-hero__metric):is(.home-hero__metric) > strong > i {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 50% !important;
    background: #000000 !important;
    color: #ffffff !important;
    font-size: 12px !important;
}

@media (max-width: 920px) {
    html body.landing-page:is(body):is(body) :is(.home-tools__grid):is(.home-tools__grid):is(.home-tools__grid) {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    html body:not(.auth-page):is(body):is(body) > main {
        padding-top: 24px !important;
    }
}

/* Class members now use the former role-grouped duties view while retaining
 * the member page's score and multi-select workflows. */
html body.class-members-page:is(body):is(body) > main.main-container {
    display: grid !important;
    gap: 20px !important;
}

html body.class-members-page:is(body):is(body) .class-duties-header.class-duties-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 20px !important;
    margin-bottom: 0 !important;
    padding-block: 0 !important;
    text-align: left !important;
}

html body.class-members-page:is(body):is(body) .class-duties-header__copy {
    display: grid !important;
    gap: 6px !important;
    min-width: 0 !important;
}

html body.class-members-page:is(body):is(body) .class-duties-header__copy > :is(h1, p) {
    margin: 0 !important;
}

html body.class-members-page:is(body):is(body) .class-duties-header__actions {
    flex: 0 0 auto !important;
}

html body.class-members-page:is(body):is(body) button.member-select-toggle.member-select-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-pill) !important;
    background: var(--ds-t-surface) !important;
    color: var(--ds-t-ink) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 650 !important;
}

html body.class-members-page:is(body):is(body) button.member-select-toggle.member-select-toggle:is(:hover, :focus-visible, .active) {
    border-color: #000000 !important;
    background: #000000 !important;
    color: #ffffff !important;
    outline: none !important;
}

html :is(body.class-members-page.dark-mode, body.class-members-page[data-theme="dark"]):is(body):is(body) button.member-select-toggle.member-select-toggle:is(:hover, :focus-visible, .active) {
    border-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
}

html body.class-members-page:is(body):is(body) .class-duties-content.class-duties-content {
    display: grid !important;
    gap: 22px !important;
}

html body.class-members-page:is(body):is(body) .duty-section.duty-section {
    display: grid !important;
    gap: 12px !important;
    margin: 0 !important;
}

html body.class-members-page:is(body):is(body) .duty-section-header.duty-section-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-md) !important;
    background: var(--ds-t-surface-soft) !important;
    box-shadow: none !important;
}

html body.class-members-page:is(body):is(body) .duty-section-icon.duty-section-icon {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    border-radius: var(--ds-rounded-sm) !important;
}

html body.class-members-page:is(body):is(body) .duty-section-info.duty-section-info {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
}

html body.class-members-page:is(body):is(body) .duty-section-title.duty-section-title {
    margin: 0 !important;
    color: var(--ds-t-ink) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

html body.class-members-page:is(body):is(body) .duty-section-count.duty-section-count {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    padding: 0 9px !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-pill) !important;
    background: var(--ds-t-surface) !important;
    color: color-mix(in srgb, var(--ds-t-ink) 68%, transparent) !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

html body.class-members-page:is(body):is(body) .duty-member-grid.duty-member-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
    gap: 12px !important;
}

html body.class-members-page:is(body):is(body) .duty-member-card.duty-member-card {
    position: relative !important;
    display: grid !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 12px !important;
    min-width: 0 !important;
    min-height: 176px !important;
    padding: 20px 16px 16px !important;
    overflow: hidden !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-md) !important;
    background: var(--ds-t-surface) !important;
    color: var(--ds-t-ink) !important;
    box-shadow: none !important;
    text-align: center !important;
    transform: none !important;
}

html body.class-members-page:is(body):is(body) .duty-member-card.duty-member-card:hover {
    border-color: color-mix(in srgb, var(--ds-t-ink) 28%, var(--ds-t-hairline)) !important;
    background: var(--ds-t-surface-soft) !important;
    box-shadow: none !important;
    transform: none !important;
}

html body.class-members-page:is(body):is(body) button.duty-member-avatar.duty-member-avatar {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: 50% !important;
    background: var(--ds-t-surface-soft) !important;
    color: var(--ds-t-ink) !important;
    box-shadow: none !important;
}

html body.class-members-page:is(body):is(body) button.duty-member-avatar.duty-member-avatar:is(:hover, :focus-visible) {
    border-color: var(--ds-t-ink) !important;
    outline: none !important;
    box-shadow: none !important;
}

html body.class-members-page:is(body):is(body) .duty-member-avatar.duty-member-avatar > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: inherit !important;
    object-fit: cover !important;
    object-position: center center !important;
}

html body.class-members-page:is(body):is(body) .duty-member-avatar.duty-member-avatar > i {
    font-size: 21px !important;
}

html body.class-members-page:is(body):is(body) .duty-member-info.duty-member-info {
    display: grid !important;
    justify-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
}

html body.class-members-page:is(body):is(body) a.duty-member-name.duty-member-name {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    max-width: 100% !important;
    color: var(--ds-t-ink) !important;
    text-decoration: none !important;
}

html body.class-members-page:is(body):is(body) .duty-member-name .user-name {
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.class-members-page:is(body):is(body) .duty-member-selection.duty-member-selection {
    display: none !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: 50% !important;
    background: var(--ds-t-surface) !important;
    color: transparent !important;
    font-size: 11px !important;
}

html body.class-members-page.member-selection-mode:is(body):is(body) .duty-member-card[data-selectable="true"] {
    cursor: pointer !important;
}

html body.class-members-page.member-selection-mode:is(body):is(body) .duty-member-card[data-selectable="true"] .duty-member-selection {
    display: grid !important;
}

html body.class-members-page:is(body):is(body) .duty-member-card.duty-member-card.selected {
    border-color: #000000 !important;
    background: #eef5d7 !important;
    box-shadow: inset 0 0 0 1px #000000 !important;
}

html body.class-members-page:is(body):is(body) .duty-member-card.selected .duty-member-selection {
    display: grid !important;
    border-color: #000000 !important;
    background: #000000 !important;
    color: #ffffff !important;
}

html :is(body.class-members-page.dark-mode, body.class-members-page[data-theme="dark"]):is(body):is(body) .duty-member-card.duty-member-card.selected {
    border-color: #ffffff !important;
    background: rgba(217, 236, 203, 0.16) !important;
    box-shadow: inset 0 0 0 1px #ffffff !important;
}

html :is(body.class-members-page.dark-mode, body.class-members-page[data-theme="dark"]):is(body):is(body) .duty-member-card.selected .duty-member-selection {
    border-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
}

html body.class-members-page:is(body):is(body) .class-members-loading.class-members-loading {
    display: grid !important;
    place-items: center !important;
    min-height: 180px !important;
    padding: 32px !important;
}

html body.class-members-page:is(body):is(body) .class-members-loading > i {
    font-size: 28px !important;
}

html body.class-members-page:is(body):is(body) .batch-toolbar.batch-toolbar {
    bottom: 24px !important;
    display: none !important;
    width: max-content !important;
    max-width: calc(100vw - 32px) !important;
    padding: 10px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-md) !important;
    background: var(--ds-t-surface) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14) !important;
}

html body.class-members-page:is(body):is(body) .batch-toolbar.batch-toolbar.active {
    display: flex !important;
}

html body.class-members-page:is(body):is(body) .batch-toolbar .btn.btn {
    min-height: 40px !important;
    padding: 0 14px !important;
    border-radius: var(--ds-rounded-pill) !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

html body.class-members-page:is(body):is(body) .batch-toolbar .btn-batch-plus.btn-batch-plus {
    border-color: #17833a !important;
    background: #17833a !important;
}

html body.class-members-page:is(body):is(body) .batch-toolbar .btn-batch-minus.btn-batch-minus {
    border-color: #c83434 !important;
    background: #c83434 !important;
}

html body.class-members-page:is(body):is(body) .batch-toolbar .btn-cancel.btn-cancel {
    border-color: var(--ds-t-hairline) !important;
    background: var(--ds-t-surface-soft) !important;
    color: var(--ds-t-ink) !important;
}

html body.class-members-page:is(body):is(body) #scoreModal .quick-score-item.quick-score-item {
    border-width: 1px !important;
    border-radius: var(--ds-rounded-md) !important;
    box-shadow: none !important;
}

/* Group score hierarchy: total remains the primary measure while plus/minus
 * stay visible as compact supporting data on the same row. */
html body:is(body):is(body) .groups-main.groups-main .group-card.group-card .group-scores.group-scores {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: end !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
}

html body:is(body):is(body) .groups-main.groups-main .group-card.group-card .group-score.group-score {
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body:is(body):is(body) .groups-main.groups-main .group-card.group-card .group-score.total {
    display: grid !important;
    align-content: center !important;
    min-height: 112px !important;
    padding: 16px 18px !important;
}

html body:is(body):is(body) .groups-main.groups-main .group-card.group-card .group-score.total .value {
    font-size: clamp(34px, 4vw, 44px) !important;
}

html body:is(body):is(body) .groups-main.groups-main .group-card.group-card :is(.group-score.plus, .group-score.minus) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 84px !important;
    min-height: 46px !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
}

html body:is(body):is(body) .groups-main.groups-main .group-card.group-card :is(.group-score.plus, .group-score.minus) .label {
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

html body:is(body):is(body) .groups-main.groups-main .group-card.group-card :is(.group-score.plus, .group-score.minus) .value {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 720 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

@media (max-width: 420px) {
    html body:is(body):is(body) .groups-main.groups-main .group-card.group-card .group-scores.group-scores {
        gap: 6px !important;
    }

    html body:is(body):is(body) .groups-main.groups-main .group-card.group-card :is(.group-score.plus, .group-score.minus) {
        min-width: 76px !important;
        padding-inline: 8px !important;
    }

    html body:is(body):is(body) .groups-main.groups-main .group-card.group-card :is(.group-score.plus, .group-score.minus) .value {
        font-size: 15px !important;
    }
}

@media (max-width: 640px) {
    html body.class-members-page:is(body):is(body) .class-duties-header.class-duties-header {
        align-items: flex-start !important;
    }

    html body.class-members-page:is(body):is(body) .duty-member-grid.duty-member-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    html body.class-members-page:is(body):is(body) .duty-member-card.duty-member-card {
        min-height: 164px !important;
        padding: 18px 10px 14px !important;
    }

    html body.class-members-page:is(body):is(body) .batch-toolbar.batch-toolbar {
        bottom: 12px !important;
        display: none !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: calc(100vw - 24px) !important;
        max-width: none !important;
    }

    html body.class-members-page:is(body):is(body) .batch-toolbar.batch-toolbar.active {
        display: grid !important;
    }

    html body.class-members-page:is(body):is(body) .batch-toolbar .selected-count.selected-count {
        grid-column: 1 / -1 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    html body.class-members-page:is(body):is(body) .batch-toolbar .btn-cancel.btn-cancel {
        grid-column: 1 / -1 !important;
    }

    html body.class-members-page:is(body):is(body) #scoreModal .quick-score-options.quick-score-options {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 440px) {
    html body.class-members-page:is(body):is(body) .class-duties-header.class-duties-header {
        flex-direction: column !important;
    }

    html body.class-members-page:is(body):is(body) .class-duties-header__actions,
    html body.class-members-page:is(body):is(body) button.member-select-toggle.member-select-toggle {
        width: 100% !important;
    }
}

/* Page entry is owned by first-paint.css so the whole shell reveals once. */

/* =====================================================================
 * FINAL PAGE RAIL + MATHEMATICAL TYPESETTING
 * The homepage rail is the shared geometry for every routed page.
 * Only outer shells are sized here; component grids keep their own tracks.
 * ===================================================================== */
:root {
    --ds-page-gutter-total: 48px;
    --ds-page-rail-max: 1180px;
    --ds-page-rail: min(calc(100% - var(--ds-page-gutter-total)), var(--ds-page-rail-max));
}

html body:is(body):is(body) > main.main-container.main-container:not(.landing-main),
html body:is(body):is(body) > main.main-content.main-content,
html body:is(body):is(body) > .container.container,
html body:is(body):is(body) .landing-container.landing-container {
    width: var(--ds-page-rail) !important;
    max-width: var(--ds-page-rail-max) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
}

html body:is(body):is(body) > main.main-container.main-container:not(.landing-main),
html body:is(body):is(body) > main.main-content.main-content {
    padding-inline: 0 !important;
}

html body:is(body):is(body) > main.main-container.main-container:not(.landing-main) > :is(
    .forum-container,
    .forum-detail-container,
    .questions-container,
    .question-detail-container,
    .daily-challenge-container,
    .profile-container,
    .checkin-container,
    .clock-container,
    .editor-wrapper,
    .score-editor-container,
    .owner-dashboard,
    .admin-dashboard-compact,
    .groups-container,
    .settings-wrap,
    .class-duties-header,
    .class-duties-content,
    .class-members-header,
    .class-members-grid,
    .content-container,
    .image-viewer-page,
    .card
),
html body:is(body):is(body) > main.main-content.main-content > .image-viewer-page.image-viewer-page {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body:is(body):is(body) > main.groups-main.groups-main > :is(
    .group-back-link,
    .groups-hero,
    .group-detail-hero,
    .groups-summary,
    .groups-board,
    .group-members-panel
),
html body:is(body):is(body) > main.ranking-main.ranking-main > :is(
    .ranking-hero.ranking-hero,
    .ranking-container.ranking-container.ranking-layout
) {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body #rankingMain#rankingMain > :is(
    .ranking-hero.ranking-hero,
    .ranking-container.ranking-container.ranking-layout
) {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body > main :is(
    .questions-search-bar,
    .questions-grid,
    .groups-grid,
    .group-members-list,
    .ranking-layout,
    .profile-content,
    .features-grid,
    .info-grid
) {
    min-width: 0 !important;
}

/* KaTeX presentation: readable inline rhythm and a restrained display-math
 * surface. Formula internals retain KaTeX's own font metrics and never wrap. */
html body .katex {
    color: var(--ds-t-ink) !important;
    font-size: 1.08em !important;
    line-height: 1.35 !important;
    text-rendering: geometricPrecision;
}

html body .katex,
html body .katex * {
    max-width: none !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

html body .katex-display {
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 !important;
    padding: 18px 20px 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-left: 3px solid var(--ds-t-ink) !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--ds-t-surface-soft) 82%, transparent) !important;
    box-sizing: border-box !important;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ds-t-ink) 28%, transparent) transparent;
}

html body .katex-display > .katex {
    display: block !important;
    width: max-content !important;
    min-width: min-content !important;
    margin-inline: auto !important;
    padding-inline: 4px !important;
    text-align: center !important;
}

html body .katex-error {
    display: inline-block !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    background: color-mix(in srgb, #dc2626 8%, transparent) !important;
    color: #b91c1c !important;
    font-family: var(--ds-font-mono) !important;
    font-size: 0.9em !important;
}

html :is(body.dark-mode, body[data-theme="dark"]) .katex-error {
    color: #fca5a5 !important;
}

/* Final button rule: all buttons stay borderless in every interaction state. */
html body :is(
    .btn,
    .button,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"]
):is(:link, :visited, :hover, :focus, :focus-visible, :active) {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width: 640px) {
    html body .katex {
        font-size: 1em !important;
    }

    html body .katex-display {
        margin-block: 16px !important;
        padding: 14px 12px 12px !important;
        border-radius: 10px !important;
    }
}

/* Absolute cascade tail: four class-level groups outrank legacy button rules. */
html body :is(.btn, .button, button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"]):is(.btn, .button, button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"]):is(.btn, .button, button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"]):is(.btn, .button, button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"]) {
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Origin UI comp-579 adaptation. The existing DOM/auth contract stays intact;
 * this tail layer supplies the component's 64px shell, underline navigation,
 * compact actions and responsive popover without moving page content. */
html body #navbar#navbar.navbar--origin {
    position: sticky !important;
    inset: 0 0 auto !important;
    z-index: 1200 !important;
    width: 100% !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 24px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ds-t-hairline) !important;
    border-radius: 0 !important;
    background: var(--ds-t-canvas) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body #navbar#navbar.navbar--origin > .navbar-container {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
}

html body #navbar#navbar.navbar--origin :is(.navbar-left, .navbar-right) {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
}

html body #navbar#navbar.navbar--origin .navbar-left {
    flex: 1 1 auto !important;
    gap: 24px !important;
}

html body #navbar#navbar.navbar--origin .navbar-right {
    flex: 0 0 auto !important;
    gap: 8px !important;
    margin-left: auto !important;
}

html body #navbar#navbar.navbar--origin .navbar-auth-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

html body #navbar#navbar.navbar--origin .navbar-auth-actions[hidden] {
    display: none !important;
}

html body #navbar#navbar.navbar--origin .navbar-auth-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition: color 150ms ease, background-color 150ms ease !important;
}

html body #navbar#navbar.navbar--origin .navbar-auth-link--ghost {
    color: var(--ds-t-ink) !important;
    background: transparent !important;
}

html body #navbar#navbar.navbar--origin .navbar-auth-link--ghost:is(:hover, :focus-visible) {
    background: var(--ds-t-surface-soft) !important;
}

html body #navbar#navbar.navbar--origin .navbar-auth-link--primary {
    color: var(--ds-t-canvas) !important;
    background: var(--ds-t-ink) !important;
}

html body #navbar#navbar.navbar--origin .navbar-auth-link--primary:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--ds-t-ink) 88%, transparent) !important;
}

html body #navbar#navbar.navbar--origin .navbar-brand,
html body #navbar#navbar.navbar--origin .navbar-brand__mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 33px !important;
    min-width: 33px !important;
    height: 33px !important;
    min-height: 33px !important;
    padding: 0 !important;
    color: var(--ds-t-ink) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body #navbar#navbar.navbar--origin .navbar-brand__logo {
    display: block !important;
    width: 33px !important;
    height: 33px !important;
    overflow: visible !important;
}

html body #navbar#navbar.navbar--origin .navbar-menu {
    display: flex !important;
    align-items: stretch !important;
    align-self: stretch !important;
    flex: 1 1 auto !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    flex: 0 0 auto !important;
    min-height: 64px !important;
    padding: 0 10px !important;
    color: var(--ds-t-ink-muted) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border: 0 !important;
    border-top: 2px solid transparent !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: color 150ms ease, border-color 150ms ease !important;
}

html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item::after {
    display: none !important;
}

html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item:is(:hover, :focus-visible) {
    color: var(--ds-t-ink) !important;
    background: transparent !important;
    border-bottom-color: var(--ds-t-ink) !important;
    box-shadow: none !important;
}

html body #navbar#navbar.navbar--origin .navbar-menu :is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active) {
    color: color-mix(in srgb, var(--ds-t-ink) 68%, transparent) !important;
    font-weight: 480 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 2px solid transparent !important;
    border-bottom: 2px solid var(--ds-t-ink) !important;
    box-shadow: none !important;
}

html body #navbar#navbar.navbar--origin .navbar-menu :is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active)::after {
    display: none !important;
}

html body #navbar#navbar.navbar--origin :is(button#themeSwitcher.theme-switcher, #userProfile .avatar) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    color: var(--ds-t-ink) !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background-color 150ms ease, color 150ms ease !important;
}

html body #navbar#navbar.navbar--origin :is(button#themeSwitcher.theme-switcher, #userProfile)[hidden] {
    display: none !important;
}

html body #navbar#navbar.navbar--origin :is(button#themeSwitcher.theme-switcher, #userProfile .avatar):is(:hover, :focus-visible) {
    color: var(--ds-t-ink) !important;
    background: var(--ds-t-surface-soft) !important;
}

html body #navbar#navbar.navbar--origin #userProfile .avatar {
    border-radius: 999px !important;
    background: var(--ds-t-ink) !important;
    color: var(--ds-t-canvas) !important;
}

html body #navbar#navbar.navbar--origin #userProfile .avatar:not(:has(img))::before {
    content: attr(data-avatar-initial) !important;
    display: block !important;
    color: inherit !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
}

html body #navbar#navbar.navbar--origin .dropdown-menu {
    top: calc(100% + 10px) !important;
    right: 0 !important;
    min-width: 220px !important;
    padding: 6px !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: 10px !important;
    background: var(--ds-t-surface) !important;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--ds-t-ink) 12%, transparent) !important;
}

@media (max-width: 960px) {
    html body #navbar#navbar.navbar--origin {
        padding-inline: 16px !important;
    }

    html body #navbar#navbar.navbar--origin > .navbar-container {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 12px !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-left {
        display: contents !important;
    }

    html body #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle) {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        color: var(--ds-t-ink) !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: transparent !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-right {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu {
        position: fixed !important;
        top: var(--mobile-menu-top, 70px) !important;
        left: var(--mobile-menu-left, 16px) !important;
        right: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: var(--mobile-menu-width, 144px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: var(--mobile-menu-max-height, calc(100dvh - 82px)) !important;
        padding: 6px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-6px) !important;
        border: 1px solid var(--ds-t-hairline) !important;
        border-radius: 10px !important;
        background: var(--ds-t-surface) !important;
        box-shadow: 0 14px 34px color-mix(in srgb, var(--ds-t-ink) 12%, transparent) !important;
        transition: opacity 160ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1), visibility 160ms step-end !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu.open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
        transition: opacity 160ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s step-start !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item {
        align-self: auto !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 40px !important;
        padding: 0 12px !important;
        border-radius: 7px !important;
        box-shadow: none !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item:is(:hover, :focus-visible) {
        background: var(--ds-t-surface-soft) !important;
        box-shadow: none !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu :is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active) {
        background: transparent !important;
    }

}

@media (max-width: 430px) {
    html body #navbar#navbar.navbar--origin {
        padding-inline: 12px !important;
    }

    html body #navbar#navbar.navbar--origin > .navbar-container {
        gap: 8px !important;
    }
}

/* Final select-arrow lock: keep the chevron visible and 20px from the edge. */
html body select:not([multiple]):not([size]):not(#mr-select-arrow-lock):not(#mr-select-arrow-lock-2),
html body select[size="1"]:not(#mr-select-arrow-lock):not(#mr-select-arrow-lock-2) {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 52px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M3.75 6.75 9 12l5.25-5.25' stroke='%23181816' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 18px 18px !important;
}

html body.dark-mode select:not([multiple]):not([size]):not(#mr-select-arrow-lock):not(#mr-select-arrow-lock-2),
html[data-theme="dark"] body select:not([multiple]):not([size]):not(#mr-select-arrow-lock):not(#mr-select-arrow-lock-2),
html body.dark-mode select[size="1"]:not(#mr-select-arrow-lock):not(#mr-select-arrow-lock-2),
html[data-theme="dark"] body select[size="1"]:not(#mr-select-arrow-lock):not(#mr-select-arrow-lock-2) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M3.75 6.75 9 12l5.25-5.25' stroke='%23f5f3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

@media (prefers-reduced-motion: reduce) {
    html body #navbar#navbar.navbar--origin .navbar-menu,
    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item {
        transition-duration: 1ms !important;
    }
}

/* The page entrance belongs to page content only. Navigation and every
 * control inside it must be ready immediately and never join the fade-in. */
html body #navbar#navbar,
html body #navbar#navbar > .navbar-container.navbar-container,
html body #navbar#navbar :is(.navbar-container, .navbar-container *) {
    animation: none !important;
    animation-name: none !important;
    animation-delay: 0s !important;
}

/* One shared indicator glides between the selected tab and the tab currently
 * being previewed. This avoids separate underlines appearing or wobbling. */
/* The static HTML shells carry `navbar--origin` so their mobile menu is already
 * the final overlay before modules and fonts finish loading. Keep this fallback
 * hidden rather than exposing the legacy, width-based active underline if a
 * newly added page ever omits that shell class. */
@media (max-width: 960px) {
    html body #navbar#navbar:not(.navbar--origin) .navbar-menu {
        display: none !important;
    }
}

html body #navbar#navbar.navbar--origin .navbar-menu .navbar-tab-indicator {
    position: absolute !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    display: block !important;
    width: var(--navbar-indicator-width, 0px) !important;
    height: 2px !important;
    border-radius: 0 !important;
    background: var(--ds-t-ink) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate3d(var(--navbar-indicator-x, 0px), var(--navbar-indicator-y, 0px), 0) !important;
    will-change: width, transform, background-color !important;
    transition: none !important;
}

html body #navbar#navbar.navbar--origin .navbar-menu .navbar-tab-indicator.is-visible {
    opacity: 1 !important;
}

html body #navbar#navbar.navbar--origin .navbar-menu .navbar-tab-indicator.is-ready {
    transition:
        width 360ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 180ms ease,
        opacity 120ms ease !important;
}

html body #navbar#navbar.navbar--origin .navbar-menu .navbar-tab-indicator.is-preview {
    background: color-mix(in srgb, var(--ds-t-ink) 42%, transparent) !important;
}

@media (min-width: 961px) {
    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item,
    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item:is(:hover, :focus-visible),
    html body #navbar#navbar.navbar--origin .navbar-menu :is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active) {
        border-bottom-color: transparent !important;
    }
}

/* Keep this last: older mobile compatibility rules below the design system
 * otherwise collapse the full-screen picker into the retired 144px popover. */
@media (max-width: 960px) {
    html body #navbar#navbar.navbar--origin .navbar-menu,
    html body #navbar#navbar.navbar--origin .navbar-menu.open,
    html body #navbar#navbar.navbar--origin .navbar-menu.closing {
        padding: max(76px, calc(env(safe-area-inset-top) + 56px)) 32px max(32px, env(safe-area-inset-bottom)) !important;
        row-gap: 0 !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item {
        flex: 0 0 auto !important;
        align-self: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: color-mix(in srgb, var(--ds-t-ink) 82%, transparent) !important;
        font-size: clamp(22px, 6.7vw, 28px) !important;
        font-weight: 560 !important;
        line-height: 1 !important;
        letter-spacing: -0.7px !important;
        opacity: 0 !important;
        transform: translateY(-7px) !important;
        transition: color 140ms ease, opacity 150ms ease, transform 190ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu.open .navbar-item {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item:is(:hover, :focus-visible),
    html body #navbar#navbar.navbar--origin .navbar-menu :is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active) {
        color: var(--ds-t-ink) !important;
        border: 0 !important;
        background: transparent !important;
        font-weight: 700 !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-tab-indicator {
        display: none !important;
    }
}

@media (max-width: 430px) {
    html body #navbar#navbar.navbar--origin .navbar-menu,
    html body #navbar#navbar.navbar--origin .navbar-menu.open,
    html body #navbar#navbar.navbar--origin .navbar-menu.closing {
        padding-inline: 24px !important;
    }
}

/* =====================================================================
 * SCORE EDITOR WORKBENCH
 * Keep the page heading editorial instead of presenting it as an empty
 * full-width card. The review queue remains the primary work surface.
 * ===================================================================== */
html body.admin-performance-page main.main-container {
    padding-top: clamp(40px, 6vw, 72px) !important;
}

html body.admin-performance-page .admin-dashboard-compact {
    max-width: 1120px !important;
    padding: 0 !important;
    gap: 28px !important;
}

html body.admin-performance-page .admin-page-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 760px) !important;
    justify-content: start !important;
    align-items: start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 0 28px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ds-t-hairline) !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body.admin-performance-page .admin-page-copy {
    gap: 12px !important;
}

html body.admin-performance-page .admin-page-eyebrow {
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ds-t-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.13em !important;
}

html body.admin-performance-page .admin-page-eyebrow::before {
    width: 22px;
    height: 2px;
    margin-right: 9px;
    border-radius: 999px;
    background: var(--ds-t-primary);
    content: "";
}

html body.admin-performance-page .admin-page-title {
    max-width: 13em !important;
    margin: 0 !important;
    color: var(--ds-t-ink) !important;
    font-size: clamp(34px, 4.4vw, 52px) !important;
    font-weight: 720 !important;
    line-height: 1.06 !important;
    letter-spacing: -0.045em !important;
    text-wrap: balance;
}

html body.admin-performance-page .admin-page-intro {
    max-width: 46em !important;
    margin: 0 !important;
    color: var(--ds-t-muted) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

html body.admin-performance-page .admin-grid {
    grid-template-columns: minmax(0, 1fr) minmax(248px, 292px) !important;
    gap: 24px !important;
    align-items: start !important;
}

html body.admin-performance-page :is(.admin-card-approval, .admin-card-tags) {
    border: 1px solid transparent !important;
    border-radius: 28px !important;
    corner-shape: squircle;
    corner-shape: superellipse(2);
    background:
        linear-gradient(var(--ds-t-surface) 0 0) padding-box,
        linear-gradient(var(--ds-t-hairline) 0 0) border-box !important;
    box-shadow: none !important;
}

html body.admin-performance-page .admin-card-approval {
    min-width: 0 !important;
}

html body.admin-performance-page :is(.admin-card-approval, .admin-card-tags) .card-header {
    padding: 24px 26px 18px !important;
    border-bottom: 0 !important;
}

html body.admin-performance-page :is(.admin-card-approval, .admin-card-tags) .card-header h3 {
    gap: 10px !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
}

html body.admin-performance-page :is(.admin-card-approval, .admin-card-tags) .card-header h3 i {
    width: 20px;
    color: var(--ds-t-muted) !important;
    text-align: center;
}

html body.admin-performance-page :is(.admin-card-approval, .admin-card-tags) .card-body {
    padding: 0 26px 26px !important;
    gap: 20px !important;
}

html body.admin-performance-page :is(.admin-approval-desc, .admin-tags-desc) {
    margin: 0 !important;
    color: var(--ds-t-muted) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
}

html body.admin-performance-page .approval-filters {
    grid-template-columns: 152px minmax(190px, 1fr) auto !important;
    gap: 10px !important;
    padding-top: 2px !important;
}

html body.admin-performance-page .admin-card-tags {
    position: static !important;
    background: var(--ds-block-cream) !important;
}

html body.admin-performance-page .admin-card-tags .btn {
    align-self: flex-start !important;
}

@media (max-width: 920px) {
    html body.admin-performance-page .admin-grid {
        grid-template-columns: 1fr !important;
    }

    html body.admin-performance-page .admin-card-tags {
        position: static !important;
    }

    html body.admin-performance-page .approval-filters {
        grid-template-columns: minmax(130px, 160px) minmax(0, 1fr) auto !important;
    }
}

@media (max-width: 680px) {
    html body.admin-performance-page main.main-container {
        padding-top: 32px !important;
    }

    html body.admin-performance-page .admin-dashboard-compact {
        gap: 20px !important;
    }

    html body.admin-performance-page .admin-page-hero {
        padding-bottom: 22px !important;
    }

    html body.admin-performance-page .admin-page-title {
        max-width: 10em !important;
        font-size: clamp(32px, 10vw, 42px) !important;
    }

    html body.admin-performance-page .admin-page-intro {
        font-size: 15px !important;
    }

    html body.admin-performance-page :is(.admin-card-approval, .admin-card-tags) {
        border-radius: 22px !important;
    }

    html body.admin-performance-page :is(.admin-card-approval, .admin-card-tags) .card-header {
        padding: 20px 20px 14px !important;
    }

    html body.admin-performance-page :is(.admin-card-approval, .admin-card-tags) .card-body {
        padding: 0 20px 20px !important;
    }

    html body.admin-performance-page .approval-filters {
        grid-template-columns: 1fr !important;
    }

    html body.admin-performance-page .approval-filters > * {
        width: 100% !important;
    }
}

/* Question Markdown surfaces: draw both editor and preview outlines with
 * nested fills so experimental continuous corners never lose edge segments. */
html body:is(.question-upload-page, .question-edit-page) .editor-card .md-input-shell,
html body:is(.question-upload-page, .question-edit-page) .editor-card .md-preview-shell {
    --md-surface-outline: var(--ds-t-hairline);
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    padding: 1px !important;
    border: 0 !important;
    border-radius: clamp(18px, 1.8vw, 24px) !important;
    corner-shape: squircle !important;
    corner-shape: superellipse(2) !important;
    background: var(--md-surface-outline) !important;
    box-shadow: none !important;
    transition: background-color 140ms ease !important;
}

html body:is(.question-upload-page, .question-edit-page) .editor-card .md-input-shell {
    --md-surface-outline: var(--ds-t-hairline);
}

html body:is(.question-upload-page, .question-edit-page) .editor-card .md-input-shell:focus-within {
    --md-surface-outline: color-mix(in srgb, var(--ds-t-ink) 28%, transparent);
    box-shadow: none !important;
}

html body:is(.question-upload-page, .question-edit-page) .editor-card .md-input-shell #content#content.md-textarea,
html body:is(.question-upload-page, .question-edit-page) .editor-card .md-preview-shell .md-preview {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: clamp(17px, calc(1.8vw - 1px), 23px) !important;
    corner-shape: squircle !important;
    corner-shape: superellipse(2) !important;
    background: var(--ds-t-surface) !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html body:is(.question-upload-page, .question-edit-page) .editor-card .md-input-shell #content#content.md-textarea {
    resize: none !important;
}

/* Question upload introduction: a composed workbench header rather than a
 * stretched title strip. */
html body.question-upload-page .editor-wrapper .editor-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 112px !important;
    margin: 0 0 20px !important;
    padding: 22px clamp(28px, 4vw, 44px) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 24px !important;
    border: 0 !important;
    border-radius: 32px !important;
    corner-shape: squircle !important;
    corner-shape: superellipse(2) !important;
    background: var(--ds-block-cream) !important;
    box-shadow: none !important;
    text-align: left !important;
}

html body.question-upload-page .editor-wrapper .editor-hero-left {
    display: flex !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
}

html body.question-upload-page .editor-wrapper .editor-hero-title {
    display: block !important;
    margin: 0 !important;
    color: #000000 !important;
    font-size: clamp(36px, 4vw, 46px) !important;
    font-weight: 720 !important;
    line-height: 1 !important;
    letter-spacing: -0.055em !important;
    text-wrap: balance;
}

html body.question-upload-page .editor-wrapper .editor-hero-right {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
}

html body.question-upload-page .editor-wrapper a.editor-hero-back.editor-hero-back {
    display: inline-flex !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    border: 1px solid #000000 !important;
    border-radius: 999px !important;
    background: #000000 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    text-decoration: none !important;
}

html body.question-upload-page .editor-wrapper a.editor-hero-back.editor-hero-back :is(i, span) {
    color: #ffffff !important;
}

html body.question-upload-page .editor-wrapper a.editor-hero-back.editor-hero-back:is(:hover, :focus-visible) {
    border-color: #1f1f1f !important;
    background: #1f1f1f !important;
    color: #ffffff !important;
}

@media (max-width: 680px) {
    html body.question-upload-page .editor-wrapper .editor-hero {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        padding: 20px 18px !important;
        gap: 16px !important;
        border-radius: 24px !important;
    }

    html body.question-upload-page .editor-wrapper .editor-hero-title {
        font-size: clamp(32px, 10vw, 38px) !important;
    }

    html body.question-upload-page .editor-wrapper .editor-hero-right,
    html body.question-upload-page .editor-wrapper a.editor-hero-back.editor-hero-back {
        width: 100% !important;
    }
}

/* Phase 37: shared loading, empty, error, and offline states. */
html body .page-state {
    display: flex;
    min-height: 220px;
    width: 100%;
    padding: 40px 24px;
    border: 1px solid var(--ds-t-hairline);
    border-radius: 20px;
    background: var(--ds-t-surface);
    color: var(--ds-t-ink);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

html body .page-state--compact {
    min-height: 136px;
    padding: 24px 18px;
    border-radius: 16px;
}

html body .page-state__icon {
    display: grid;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ds-t-surface-soft);
    color: var(--ds-t-ink);
    place-items: center;
    font-size: 20px;
}

html body .page-state--loading .page-state__icon {
    background: var(--ds-block-lilac);
}

html body .page-state--error .page-state__icon {
    background: var(--ds-block-pink);
}

html body .page-state--offline .page-state__icon {
    background: var(--ds-block-cream);
}

html body .page-state__title {
    margin: 4px 0 0;
    color: var(--ds-t-ink);
    font-family: var(--ds-font);
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

html body .page-state__message {
    max-width: 520px;
    margin: 0;
    color: color-mix(in srgb, var(--ds-t-ink) 68%, transparent);
    font-size: 16px;
    line-height: 1.6;
}

html body .page-state__action {
    display: inline-flex;
    min-height: 44px;
    margin-top: 6px;
    padding: 0 20px;
    border: 1px solid var(--ds-t-ink);
    border-radius: 999px;
    background: var(--ds-t-ink);
    color: var(--ds-t-surface);
    align-items: center;
    justify-content: center;
    font: 650 15px/1 var(--ds-font);
    cursor: pointer;
}

html body .page-state__action:is(:hover, :focus-visible) {
    background: transparent;
    color: var(--ds-t-ink);
}

html body .page-state__action:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ds-block-lilac) 72%, transparent);
    outline-offset: 3px;
}

html body .profile-page-state[hidden] {
    display: none !important;
}

html body .profile-page-state {
    margin-bottom: 24px;
}

html body .challenge-result[data-status="error"] {
    display: block;
    border-color: var(--danger-color);
    color: var(--danger-color);
}

html body .settings-notification.error i {
    color: var(--danger-color);
}

/* Transient messages size to their copy instead of spanning the page. Long
 * server errors still wrap within a readable, viewport-safe cap. */
html body .global-message,
html body .settings-notification {
    --ds-g2-fill: var(--ds-t-surface);
    --ds-g2-edge: color-mix(in srgb, currentColor 18%, transparent);
    box-sizing: border-box !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: min(560px, calc(100vw - 32px)) !important;
    margin-inline: 0 !important;
    padding: 12px 18px !important;
    border: 1px solid transparent !important;
    border-radius: 19px !important;
    corner-shape: squircle !important;
    corner-shape: superellipse(2) !important;
    background:
        linear-gradient(var(--ds-g2-fill) 0 0) padding-box,
        linear-gradient(var(--ds-g2-edge) 0 0) border-box !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
}

html body .global-message.success {
    --ds-g2-fill: color-mix(in srgb, #34c759 8%, var(--ds-t-surface));
    --ds-g2-edge: color-mix(in srgb, #34c759 30%, transparent);
}

html body .global-message.error,
html body .settings-notification.error {
    --ds-g2-fill: color-mix(in srgb, #ff3b30 8%, var(--ds-t-surface));
    --ds-g2-edge: color-mix(in srgb, #ff3b30 30%, transparent);
}

html body .global-message.info {
    --ds-g2-fill: color-mix(in srgb, var(--ds-t-ink) 5%, var(--ds-t-surface));
}

html body .settings-notification {
    right: 50% !important;
    left: auto !important;
    transform: translate(50%, 100px) !important;
}

html body .settings-notification.show {
    transform: translate(50%, 0) !important;
}

@media (max-width: 600px) {
    html body .page-state {
        min-height: 180px;
        padding: 32px 18px;
        border-radius: 16px;
    }

    html body .page-state--compact {
        min-height: 124px;
        padding: 22px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .page-state__icon.fa-spin {
        animation-duration: 1.8s;
    }
}
/* End Phase 37 shared states. */

/* Layout-matched loading rows reuse each page's final row geometry. Static
 * fills avoid concurrent pulse animations during first paint. */
html body [data-page-skeleton] {
    contain: layout paint style;
}

html body .page-skeleton__block {
    display: block;
    width: min(100%, 112px);
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ds-t-ink) 10%, transparent);
    opacity: 0.72;
}

html body .page-skeleton__block--title {
    width: min(100%, 240px);
    height: 14px;
}

html body .page-skeleton__block--short {
    width: 56px;
}

html body .page-skeleton__block--problem {
    width: 62px;
    height: 12px;
}

html body .page-skeleton__block--tag {
    width: 68px;
    height: 24px;
}

html body .page-skeleton__block--dot {
    width: 16px;
    height: 16px;
    margin: auto;
    border-radius: 50%;
}

html body .page-skeleton__stack {
    display: grid;
    min-width: 0;
    gap: 9px;
}

html body .page-skeleton__meta,
html body .page-skeleton__tags {
    display: flex;
    align-items: center;
    gap: 12px;
}

html body [data-page-skeleton="forum"] .page-skeleton__row {
    min-height: 70px !important;
}

html body [data-page-skeleton] .page-skeleton__row {
    pointer-events: none;
}

html body [data-page-skeleton="activity"] .page-skeleton__row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

html body [data-page-skeleton="activity"] .profile-activity-content {
    flex: 1;
}

@media (max-width: 720px) {
    html body [data-page-skeleton="questions"] .page-skeleton__tags,
    html body [data-page-skeleton="questions"] .question-row-difficulty-cell {
        display: none !important;
    }

    html body [data-page-skeleton="ranking"] .page-skeleton__row {
        min-height: 121px !important;
    }
}

/* Account menu: compact system-menu geometry with a profile lead-in, quiet
 * outline icons, and right-aligned navigation hints. */
html body #navbar#navbar button#themeSwitcher.theme-switcher {
    display: none !important;
}

html body #navbar#navbar.navbar--origin #userProfile {
    overflow: visible !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu {
    --ds-g2-edge: var(--ds-t-hairline);
    display: flex !important;
    flex-direction: column !important;
    top: calc(100% + 12px) !important;
    right: 0 !important;
    width: min(304px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    padding: 10px 0 12px !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: 28px !important;
    corner-shape: squircle !important;
    corner-shape: superellipse(2) !important;
    background:
        linear-gradient(var(--ds-t-surface) 0 0) padding-box,
        linear-gradient(var(--ds-g2-edge) 0 0) border-box !important;
    box-shadow: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-6px) scale(0.985) !important;
    transform-origin: top right !important;
    transition:
        opacity 160ms ease,
        transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 220ms !important;
}

html body #navbar#navbar.navbar--origin #userProfile.dropdown-open #dropdownMenu#dropdownMenu,
html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu.open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
    transition:
        opacity 160ms ease,
        transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu > .dropdown-header,
html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu > .dropdown-item {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: calc(100% - 16px) !important;
    min-height: 52px !important;
    margin: 0 8px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 20px !important;
    corner-shape: squircle !important;
    corner-shape: superellipse(2) !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    transition:
        color 140ms ease,
        background-color 140ms ease,
        opacity 150ms ease,
        transform 190ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu > .dropdown-header {
    position: relative !important;
    min-height: 52px !important;
    margin-bottom: 13px !important;
    color: var(--ds-t-ink) !important;
    font-weight: 500 !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu > .dropdown-header::after {
    position: absolute !important;
    right: 0 !important;
    bottom: -7px !important;
    left: 0 !important;
    height: 1px !important;
    background: var(--ds-t-hairline) !important;
    content: "" !important;
    pointer-events: none !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu > .dropdown-item {
    background-clip: padding-box !important;
    color: var(--ds-t-ink) !important;
    text-decoration: none !important;
    font-family: var(--ds-font) !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu > .dropdown-item:is(:hover, :focus-visible, .active) {
    color: var(--ds-t-ink) !important;
    background: var(--ds-t-surface-soft) !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu > .dropdown-header:is(:hover, :focus-visible) {
    background: var(--ds-t-surface-soft) !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu .dropdown-header-avatar {
    position: relative !important;
    display: grid !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    overflow: hidden !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: 50% !important;
    background: var(--ds-t-surface-soft) !important;
    color: var(--ds-t-ink-muted) !important;
    place-items: center !important;
    font: 650 14px/1 var(--ds-font) !important;
}

/* No-avatar default: centered fa-user icon (site-wide unified), not the
   first-letter initial. Only fall back to the letter if neither an image nor
   an icon is present. */
html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu .dropdown-header-avatar:not(:has(img)):not(:has(i))::before {
    content: attr(data-avatar-initial) !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu .dropdown-header-avatar > i {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    color: var(--ds-t-ink) !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu .dropdown-header-avatar > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu .dropdown-header-copy {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 7px !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu .dropdown-header-name {
    overflow: hidden !important;
    color: var(--dropdown-name-color, var(--ds-t-ink)) !important;
    font-family: var(--ds-font) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu .dropdown-header-badges {
    display: inline-flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 4px !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu .dropdown-item-icon {
    display: grid !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    color: color-mix(in srgb, var(--ds-t-ink) 62%, transparent) !important;
    place-items: center !important;
    font-size: 20px !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu .dropdown-item-meta {
    display: inline-flex !important;
    min-width: 24px !important;
    margin-left: auto !important;
    color: color-mix(in srgb, var(--ds-t-ink) 42%, transparent) !important;
    align-items: center !important;
    justify-content: flex-end !important;
    font-size: 14px !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu .dropdown-item-meta kbd {
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font: 500 14px/1 var(--ds-font) !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu > .dropdown-item-danger {
    color: var(--ds-t-ink) !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu > .dropdown-item-danger:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--ds-block-pink) 46%, var(--ds-t-surface)) !important;
}

/* 订阅中心 — the ✧ leading glyph renders as a text star (not a FontAwesome
 * webfont icon), sized/aligned to match the other dropdown-item icons. Color
 * is inherited from the standard dropdown-item-icon rule (no accent). */
html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu > #membershipMenuItem .membership-star {
    display: grid !important;
    place-items: center !important;
    font-family: var(--ds-font) !important;
    font-style: normal !important;
    /* The ✦ text glyph renders taller than a same-size FontAwesome icon; sized
       to sit a touch larger so the solid star reads as a peer of the others. */
    font-size: 19px !important;
    line-height: 1 !important;
}

@media (max-width: 960px) {
    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-right {
        box-sizing: border-box !important;
        padding-right: 16px !important;
    }
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu.open > .dropdown-header,
html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu.open > .dropdown-item {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

@media (prefers-reduced-motion: reduce) {
    html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu,
    html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu > .dropdown-header,
    html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu > .dropdown-item {
        transition-duration: 1ms !important;
    }
}

/* Match the legacy selector's specificity while retaining the full-screen
 * mobile navigation geometry. */
@media (max-width: 960px) {
    html body:is(body):is(body) #navbar#navbar.navbar--origin {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-inline: 16px !important;
        border-radius: 0 !important;
    }

    html body:is(body):is(body) #navbar#navbar.navbar--origin > .navbar-container {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 0 !important;
    }

    html body:is(body):is(body) #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle) {
        position: fixed !important;
        top: 8px !important;
        right: 16px !important;
        left: auto !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        z-index: 1202 !important;
    }

    html body:is(body):is(body) #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle)[aria-expanded="true"] {
        background: transparent !important;
    }

    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-right {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
    }

    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-menu,
    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-menu.open,
    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-menu.closing {
        padding: max(76px, calc(env(safe-area-inset-top) + 56px)) 32px max(32px, env(safe-area-inset-bottom)) !important;
        row-gap: 0 !important;
    }
}

@media (max-width: 430px) {
    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-menu,
    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-menu.open,
    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-menu.closing {
        padding-inline: 24px !important;
    }
}

/* Final mobile overlay layer: this stays after legacy navbar rules so the
 * full-screen menu cannot be collapsed back into the old popover. */
@media (max-width: 960px) {
    html.navbar-menu-open,
    body.navbar-menu-open {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    html body #navbar#navbar.navbar--origin {
        position: relative !important;
        z-index: 1200 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-inline: 16px !important;
        border-radius: 0 !important;
    }

    html body #navbar#navbar.navbar--origin > .navbar-container {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 0 !important;
    }

    html body #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle) {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        z-index: 1202 !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        border-radius: 50% !important;
        transition: background-color 160ms ease, color 160ms ease !important;
    }

    html body #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle):is(:hover, :focus-visible) {
        background: var(--ds-t-surface-soft) !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-right {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        z-index: 1 !important;
        transition: opacity 120ms ease, visibility 0s linear 120ms !important;
    }

    html body #navbar#navbar.navbar--origin.mobile-menu-open .navbar-right {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu,
    html body #navbar#navbar.navbar--origin .navbar-menu.open,
    html body #navbar#navbar.navbar--origin .navbar-menu.closing {
        position: fixed !important;
        inset: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        padding: max(76px, calc(env(safe-area-inset-top) + 56px)) 32px max(32px, env(safe-area-inset-bottom)) !important;
        gap: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: var(--ds-t-canvas) !important;
        box-shadow: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-8px) !important;
        z-index: 1201 !important;
        transition: opacity 180ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 240ms !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu.open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
        transition: opacity 180ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item {
        flex: 0 0 auto !important;
        align-self: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: color-mix(in srgb, var(--ds-t-ink) 82%, transparent) !important;
        font-size: clamp(22px, 6.7vw, 28px) !important;
        font-weight: 560 !important;
        line-height: 1 !important;
        letter-spacing: -0.7px !important;
        opacity: 0 !important;
        transform: translateY(-7px) !important;
        transition: color 140ms ease, opacity 150ms ease, transform 190ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu.open .navbar-item {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item:is(:hover, :focus-visible),
    html body #navbar#navbar.navbar--origin .navbar-menu :is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active) {
        color: var(--ds-t-ink) !important;
        border: 0 !important;
        background: transparent !important;
        font-weight: 700 !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-tab-indicator {
        display: none !important;
    }
}

@media (max-width: 430px) {
    html body #navbar#navbar.navbar--origin .navbar-menu,
    html body #navbar#navbar.navbar--origin .navbar-menu.open,
    html body #navbar#navbar.navbar--origin .navbar-menu.closing {
        padding-inline: 24px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body #navbar#navbar.navbar--origin .navbar-menu,
    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item,
    html body #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle),
    html body #navbar#navbar.navbar--origin .navbar-right {
        transition-duration: 1ms !important;
    }
}

/* Mobile navigation is a deliberate full-screen route picker. The compact
 * desktop bar remains intact; only the small-screen menu becomes an overlay
 * so every destination is readable and tap-friendly. */
@media (max-width: 960px) {
    html.navbar-menu-open,
    body.navbar-menu-open {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    html body #navbar#navbar.navbar--origin {
        position: relative !important;
        z-index: 1200 !important;
        padding-inline: 16px !important;
    }

    html body #navbar#navbar.navbar--origin > .navbar-container {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 0 !important;
    }

    html body #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle) {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        z-index: 1202 !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        border-radius: 50% !important;
        transition: background-color 160ms ease, color 160ms ease !important;
    }

    html body #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle):is(:hover, :focus-visible) {
        background: var(--ds-t-surface-soft) !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-right {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        z-index: 1 !important;
        transition: opacity 120ms ease, visibility 0s linear 120ms !important;
    }

    html body #navbar#navbar.navbar--origin.mobile-menu-open .navbar-right {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu,
    html body #navbar#navbar.navbar--origin .navbar-menu.open,
    html body #navbar#navbar.navbar--origin .navbar-menu.closing {
        position: fixed !important;
        inset: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        padding: max(76px, calc(env(safe-area-inset-top) + 56px)) 32px max(32px, env(safe-area-inset-bottom)) !important;
        gap: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: var(--ds-t-canvas) !important;
        box-shadow: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-8px) !important;
        z-index: 1201 !important;
        transition:
            opacity 180ms ease,
            transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear 240ms !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu.open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
        transition:
            opacity 180ms ease,
            transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear 0s !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item {
        flex: 0 0 auto !important;
        align-self: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: color-mix(in srgb, var(--ds-t-ink) 82%, transparent) !important;
        font-size: clamp(22px, 6.7vw, 28px) !important;
        font-weight: 560 !important;
        line-height: 1 !important;
        letter-spacing: -0.7px !important;
        opacity: 0 !important;
        transform: translateY(-7px) !important;
        transition:
            color 140ms ease,
            opacity 150ms ease,
            transform 190ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu.open .navbar-item {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item:is(:hover, :focus-visible),
    html body #navbar#navbar.navbar--origin .navbar-menu :is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active) {
        color: var(--ds-t-ink) !important;
        border: 0 !important;
        background: transparent !important;
        font-weight: 700 !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-tab-indicator {
        display: none !important;
    }
}

@media (max-width: 430px) {
    html body #navbar#navbar.navbar--origin .navbar-menu,
    html body #navbar#navbar.navbar--origin .navbar-menu.open,
    html body #navbar#navbar.navbar--origin .navbar-menu.closing {
        padding-inline: 24px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body #navbar#navbar.navbar--origin .navbar-menu,
    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item,
    html body #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle),
    html body #navbar#navbar.navbar--origin .navbar-right {
        transition-duration: 1ms !important;
    }
}

/* The mobile trigger is independent of the Font Awesome webfont, allowing the
 * navigation shell to become visible and usable before decorative icon fonts
 * are requested. aria-expanded is the single visual state source. */
html body #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle) {
    position: relative !important;
}

html body #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle) > i {
    display: none !important;
}

html body #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle)::before,
html body #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle)::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 15.5px !important;
    height: 1.75px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    transform-origin: center !important;
    transition: transform 360ms cubic-bezier(0.32, 0.72, 0, 1), opacity 180ms ease !important;
}

html body #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle)::before {
    transform: translate(-50%, -3px) !important;
}

html body #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle)::after {
    transform: translate(-50%, 3px) !important;
}

html body #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle)[aria-expanded="true"]::before {
    transform: translate(-50%, 0) rotate(45deg) !important;
}

html body #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle)[aria-expanded="true"]::after {
    transform: translate(-50%, 0) rotate(-45deg) !important;
}

html body.landing-page #app > .home-loading-shell.home-loading-shell {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* Before the navbar module resolves auth, the parser-blocking theme/session
 * bootstrap exposes the cached session on <html>. This keeps the right-side
 * controls at their final width on the very first paint without inline JS. */
html[data-navbar-session="guest"] body #navbar#navbar.navbar--origin .navbar-auth-actions[hidden] {
    display: flex !important;
}

html[data-navbar-session="user"] body #navbar#navbar.navbar--origin button#themeSwitcher.theme-switcher[hidden] {
    display: inline-flex !important;
}

html[data-navbar-session="user"] body #navbar#navbar.navbar--origin #userProfile[hidden] {
    display: block !important;
}

@media (min-width: 961px) {
    html body #navbar#navbar.navbar--origin:not(.initialized) .navbar-menu .navbar-item.active {
        border-bottom-color: var(--ds-t-ink) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-tab-indicator.is-ready {
        transition-duration: 1ms !important;
    }
}

@media (max-width: 960px) {
    html body:is(body):is(body) #navbar#navbar.navbar--origin {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-inline: 16px !important;
        border-radius: 0 !important;
    }

    html body:is(body):is(body) #navbar#navbar.navbar--origin > .navbar-container {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 0 !important;
    }

    html body:is(body):is(body) #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle) {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        z-index: 1202 !important;
    }

    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-right {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
    }

    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-menu,
    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-menu.open,
    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-menu.closing {
        padding: max(76px, calc(env(safe-area-inset-top) + 56px)) 32px max(32px, env(safe-area-inset-bottom)) !important;
        row-gap: 0 !important;
    }

    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-menu .navbar-item {
        flex: 0 0 auto !important;
        align-self: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: color-mix(in srgb, var(--ds-t-ink) 82%, transparent) !important;
        font-size: clamp(22px, 6.7vw, 28px) !important;
        font-weight: 560 !important;
        line-height: 1 !important;
        letter-spacing: -0.7px !important;
        opacity: 0 !important;
        transform: translateY(-7px) !important;
        transition: color 140ms ease, opacity 150ms ease, transform 190ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-menu.open .navbar-item {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-menu .navbar-item:is(:hover, :focus-visible),
    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-menu :is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active) {
        color: var(--ds-t-ink) !important;
        border: 0 !important;
        background: transparent !important;
        font-weight: 700 !important;
    }

    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-menu .navbar-tab-indicator {
        display: none !important;
    }
}

@media (max-width: 430px) {
    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-menu,
    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-menu.open,
    html body:is(body):is(body) #navbar#navbar.navbar--origin .navbar-menu.closing {
        padding-inline: 24px !important;
    }
}

/* Final mobile overlay overrides. Keep after legacy compatibility rules. */
@media (max-width: 960px) {
    html body #navbar#navbar.navbar--origin .navbar-menu,
    html body #navbar#navbar.navbar--origin .navbar-menu.open,
    html body #navbar#navbar.navbar--origin .navbar-menu.closing {
        padding: max(76px, calc(env(safe-area-inset-top) + 56px)) 32px max(32px, env(safe-area-inset-bottom)) !important;
        row-gap: 0 !important;
        transform: translate3d(0, -12px, 0) scale(0.985) !important;
        transform-origin: 50% 0 !important;
        transition: opacity 260ms ease,
            transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear 420ms !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu.open {
        transform: translate3d(0, 0, 0) scale(1) !important;
        transition: opacity 260ms ease,
            transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear 0s !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item {
        flex: 0 0 auto !important;
        align-self: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: color-mix(in srgb, var(--ds-t-ink) 82%, transparent) !important;
        font-size: clamp(22px, 6.7vw, 28px) !important;
        font-weight: 560 !important;
        line-height: 1 !important;
        letter-spacing: -0.7px !important;
        opacity: 0 !important;
        transform: translate3d(0, 10px, 0) !important;
        transition: color 180ms ease, opacity 260ms ease,
            transform 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu.open .navbar-item {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item:is(:hover, :focus-visible),
    html body #navbar#navbar.navbar--origin .navbar-menu :is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active) {
        color: var(--ds-t-ink) !important;
        border: 0 !important;
        background: transparent !important;
        font-weight: 700 !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-tab-indicator {
        display: none !important;
    }

    html body #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle) {
        transition: background-color 220ms ease, color 220ms ease,
            transform 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    }
}

@media (max-width: 430px) {
    html body #navbar#navbar.navbar--origin .navbar-menu,
    html body #navbar#navbar.navbar--origin .navbar-menu.open,
    html body #navbar#navbar.navbar--origin .navbar-menu.closing {
        padding-inline: 24px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body #navbar#navbar.navbar--origin .navbar-menu,
    html body #navbar#navbar.navbar--origin .navbar-menu.open,
    html body #navbar#navbar.navbar--origin .navbar-menu.closing,
    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item,
    html body #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle) {
        transition-duration: 1ms !important;
    }
}

/* =====================================================================
 * COMPACT COMFORT DENSITY
 * Keep the shared UI one step smaller while preserving mobile touch targets.
 * ===================================================================== */

html body {
    line-height: 1.5 !important;
}

html body :is(h1, .page-title, .home-legacy__title) {
    font-size: clamp(30px, 3.4vw, 42px) !important;
}

html body :is(.home-panel__eyebrow, .ranking-kicker, .groups-eyebrow, .eyebrow, .kicker) {
    font-size: 12px !important;
}

html body #navbar#navbar.navbar--origin,
html body #navbar#navbar {
    height: 48px !important;
    min-height: 48px !important;
}

html body #navbar#navbar.navbar--origin > .navbar-container,
html body #navbar#navbar > .navbar-container {
    width: min(100% - 40px, var(--ds-container)) !important;
    height: 48px !important;
    min-height: 48px !important;
}

html body #navbar#navbar.navbar--origin .navbar-menu {
    gap: 2px !important;
}

html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item {
    min-height: 32px !important;
    padding: 5px 11px !important;
    font-size: 14px !important;
}

html body #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle, #userProfile .avatar) {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
}

html body :is(
    .btn,
    a.btn,
    .home-button,
    .upload-btn,
    .take-photo-btn,
    input[type="button"],
    input[type="submit"]
) {
    min-height: 38px !important;
    padding-block: 8px !important;
    font-size: var(--ds-body-sm-size) !important;
}

html body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
    textarea,
    select,
    .search-input,
    .filter-select,
    .form-input,
    .home-input
) {
    min-height: 44px !important;
    padding-block: 10px !important;
}

@media (max-width: 833px) {
    html body #navbar#navbar.navbar--origin,
    html body #navbar#navbar {
        height: 52px !important;
        min-height: 52px !important;
    }

    html body #navbar#navbar.navbar--origin > .navbar-container,
    html body #navbar#navbar > .navbar-container {
        width: min(100% - 24px, var(--ds-container)) !important;
        height: 52px !important;
        min-height: 52px !important;
    }

    html body #navbar#navbar.navbar--origin :is(.navbar-toggle, #navbarToggle, #userProfile .avatar) {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item {
        min-height: 48px !important;
        padding: 11px 16px !important;
        font-size: 15px !important;
    }

    html body :is(h1, .page-title, .home-legacy__title) {
        font-size: clamp(28px, 8vw, 38px) !important;
    }

    html body :is(
        .btn,
        a.btn,
        .home-button,
        .upload-btn,
        .take-photo-btn,
        input[type="button"],
        input[type="submit"]
    ) {
        min-height: 44px !important;
    }
}

/* =====================================================================
 * APPLE-LIKE GLOBAL NAVIGATION
 * Quiet, evenly spaced desktop links with no active underline or shell rule.
 * The existing routes, auth controls and mobile menu behavior stay unchanged.
 * ===================================================================== */

html body #navbar#navbar.navbar--origin,
html body #navbar#navbar {
    border-bottom: 0 !important;
}

html body #navbar#navbar.navbar--origin .navbar-menu .navbar-tab-indicator {
    display: none !important;
}

html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item,
html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item:is(:hover, :focus-visible),
html body #navbar#navbar.navbar--origin .navbar-menu :is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active) {
    border: 0 !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

@media (min-width: 961px) {
    html body #navbar#navbar.navbar--origin,
    html body #navbar#navbar {
        height: 44px !important;
        min-height: 44px !important;
        padding-inline: 20px !important;
        background: color-mix(in srgb, var(--ds-t-canvas) 96%, transparent) !important;
    }

    html body #navbar#navbar.navbar--origin > .navbar-container,
    html body #navbar#navbar > .navbar-container {
        width: min(100%, 1120px) !important;
        height: 44px !important;
        min-height: 44px !important;
        gap: clamp(10px, 1.2vw, 20px) !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-left {
        flex: 1 1 auto !important;
        gap: 0 !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu {
        justify-content: flex-start !important;
        gap: clamp(12px, 1.2vw, 18px) !important;
        overflow: visible !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item {
        min-height: 44px !important;
        padding: 0 clamp(3px, 0.3vw, 5px) !important;
        color: color-mix(in srgb, var(--ds-t-ink) 78%, transparent) !important;
        font-size: 13px !important;
        font-weight: 430 !important;
        letter-spacing: -0.08px !important;
        transition: color 160ms ease, opacity 160ms ease !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-menu .navbar-item:is(:hover, :focus-visible),
    html body #navbar#navbar.navbar--origin .navbar-menu :is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active):is(.navbar-item.active) {
        color: var(--ds-t-ink) !important;
        background: transparent !important;
        font-weight: 500 !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-right,
    html body #navbar#navbar.navbar--origin .navbar-auth-actions {
        gap: clamp(8px, 0.7vw, 12px) !important;
    }

    html body:is(body):is(body) #navbar#navbar.navbar--origin #userProfile .avatar:is(.avatar):is(.avatar) {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
    }

    html body:is(body):is(body) #navbar#navbar.navbar--origin #userProfile .avatar:is(.avatar):is(.avatar):not(:has(img))::before {
        font-size: 11px !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-auth-link {
        min-height: 44px !important;
        padding: 0 2px !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: color-mix(in srgb, var(--ds-t-ink) 78%, transparent) !important;
        background: transparent !important;
        font-size: 13px !important;
        font-weight: 430 !important;
        box-shadow: none !important;
        transition: color 160ms ease, opacity 160ms ease !important;
    }

    html body #navbar#navbar.navbar--origin .navbar-auth-link:is(:hover, :focus-visible) {
        color: var(--ds-t-ink) !important;
        background: transparent !important;
    }
}

/* Final loading-row geometry lock after legacy density overrides. */
@media (max-width: 720px) {
    html body #forumPosts#forumPosts[data-page-skeleton="forum"] > .page-skeleton__row.forum-post {
        min-height: 71px !important;
    }

    html body #questionsGrid#questionsGrid[data-page-skeleton="questions"] {
        min-height: 1097px;
    }

    html body #rankingList#rankingList[data-page-skeleton="ranking"] > .page-skeleton__row.ranking-item {
        min-height: 121px !important;
    }
}

/* Shared geometry for semantic tags. Tone and status colors remain component-owned. */
html {
    --ds-tag-radius: 4px;
    --ds-tag-height: 32px;
    --ds-tag-padding-inline: 9px;
    --ds-tag-font-size: 13px;
    --ds-tag-gap: 5px;
}

html body :is(
    .tag,
    .question-tag,
    .question-tag-inline,
    .question-topic-tag,
    .category-tag,
    .question-tag-chip,
    .question-tag-choice,
    .difficulty-tag,
    .question-difficulty,
    .role-tag,
    .role-badge,
    .status-badge,
    .category-badge
):is(
    .tag,
    .question-tag,
    .question-tag-inline,
    .question-topic-tag,
    .category-tag,
    .question-tag-chip,
    .question-tag-choice,
    .difficulty-tag,
    .question-difficulty,
    .role-tag,
    .role-badge,
    .status-badge,
    .category-badge
):is(
    .tag,
    .question-tag,
    .question-tag-inline,
    .question-topic-tag,
    .category-tag,
    .question-tag-chip,
    .question-tag-choice,
    .difficulty-tag,
    .question-difficulty,
    .role-tag,
    .role-badge,
    .status-badge,
    .category-badge
):is(
    .tag,
    .question-tag,
    .question-tag-inline,
    .question-topic-tag,
    .category-tag,
    .question-tag-chip,
    .question-tag-choice,
    .difficulty-tag,
    .question-difficulty,
    .role-tag,
    .role-badge,
    .status-badge,
    .category-badge
):is(
    .tag,
    .question-tag,
    .question-tag-inline,
    .question-topic-tag,
    .category-tag,
    .question-tag-chip,
    .question-tag-choice,
    .difficulty-tag,
    .question-difficulty,
    .role-tag,
    .role-badge,
    .status-badge,
    .category-badge
):is(
    .tag,
    .question-tag,
    .question-tag-inline,
    .question-topic-tag,
    .category-tag,
    .question-tag-chip,
    .question-tag-choice,
    .difficulty-tag,
    .question-difficulty,
    .role-tag,
    .role-badge,
    .status-badge,
    .category-badge
):is(
    .tag,
    .question-tag,
    .question-tag-inline,
    .question-topic-tag,
    .category-tag,
    .question-tag-chip,
    .question-tag-choice,
    .difficulty-tag,
    .question-difficulty,
    .role-tag,
    .role-badge,
    .status-badge,
    .category-badge
):is(
    .tag,
    .question-tag,
    .question-tag-inline,
    .question-topic-tag,
    .category-tag,
    .question-tag-chip,
    .question-tag-choice,
    .difficulty-tag,
    .question-difficulty,
    .role-tag,
    .role-badge,
    .status-badge,
    .category-badge
) {
    min-height: var(--ds-tag-height) !important;
    padding: 0 var(--ds-tag-padding-inline) !important;
    border-radius: var(--ds-tag-radius) !important;
    font-size: var(--ds-tag-font-size) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

/* Compact username labels: keep names easy to scan without adding vertical
 * weight to ranking rows, group cards, forum metadata, or the account menu. */
html body :is(
    .user-name,
    .user-link.user-name,
    .member-name,
    .ranking-username .user-link,
    .duty-member-name .user-name,
    .username .user-name
):not(#profileUsername .user-name) {
    min-height: 22px !important;
    max-height: 28px !important;
    padding-block: 1px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
}

html body :is(
    .member-badge,
    .username-badge,
    .user-name-badge,
    .user-label
) {
    min-height: 22px !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
}

html body :is(
    .user-name + .role-tag,
    .member-name + .role-tag,
    .ranking-username .role-tag,
    .duty-member-name .role-tag,
    .dropdown-header-badges .role-tag
) {
    min-height: 18px !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    font-size: 10px !important;
    line-height: 1 !important;
}

/* Role colors and labels follow the compact reference treatment. */
html body:is(body):is(body) :is(
    .user-name.role-owner,
    .user-link.role-owner,
    .member-name.role-owner,
    a.role-owner
):is(.role-owner):is(.role-owner):is(.role-owner) {
    color: #9d3dd8 !important;
}

html body:is(body):is(body) :is(
    .user-name.role-admin,
    .user-link.role-admin,
    .member-name.role-admin,
    a.role-admin
):is(.role-admin):is(.role-admin):is(.role-admin) {
    color: #fe4c61 !important;
}

html body:is(body):is(body) :is(
    .user-name.role-scorer,
    .user-link.role-scorer,
    .member-name.role-scorer,
    a.role-scorer
):is(.role-scorer):is(.role-scorer):is(.role-scorer) {
    color: #ff9500 !important;
}

html body :is(.role-tag.owner, .role-tag.admin):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    margin-left: 4px !important;
    padding: 0 5px !important;
    border: 0 !important;
    border-radius: 2px !important;
    color: #ffffff !important;
    font-family: var(--ds-font) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

html body .role-tag.owner:is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag) {
    background: #9d3dd8 !important;
    background-color: #9d3dd8 !important;
}

html body .role-tag.admin:is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag) {
    background: #fe4c61 !important;
    background-color: #fe4c61 !important;
}

html body .role-tag.scorer:is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag):is(.role-tag) {
    display: none !important;
}

/* Compact account menu density. */
html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu {
    width: min(260px, calc(100vw - 24px)) !important;
    padding: 8px 0 9px !important;
    border-radius: 24px !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu > .dropdown-header,
html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu > .dropdown-item {
    width: calc(100% - 12px) !important;
    min-height: 44px !important;
    margin-inline: 6px !important;
    padding-inline: 14px !important;
    gap: 9px !important;
    border-radius: 14px !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu > .dropdown-header {
    min-height: 44px !important;
    margin-bottom: 10px !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu .dropdown-header-avatar {
    flex-basis: 28px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu .dropdown-header-copy {
    gap: 4px !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu .dropdown-header-name {
    font-size: 16px !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu > .dropdown-item {
    font-size: 15px !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu .dropdown-item-icon {
    flex-basis: 20px !important;
    width: 20px !important;
    font-size: 17px !important;
}

html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu .dropdown-item-meta,
html body #navbar#navbar.navbar--origin #dropdownMenu#dropdownMenu .dropdown-item-meta kbd {
    min-width: 20px !important;
    font-size: 12px !important;
}

/* Lock owner names to the exact same purple as the owner label, including
 * profile and podium contexts that carry ID-based legacy selectors. */
:is(#mr-owner-color-lock, html):is(#mr-owner-color-lock-2, html) body :is(
    .user-name.role-owner,
    .user-link.role-owner,
    .member-name.role-owner,
    a.role-owner,
    [data-role="owner"]
) {
    color: #9d3dd8 !important;
}

/* One compact spacing rule for every username + role-label pairing. */
:is(#mr-user-tag-gap-lock, html):is(#mr-user-tag-gap-lock-2, html) body :is(
    #profileUsername,
    .ranking-username,
    .ranking-podium__user,
    .duty-member-name,
    .member-name,
    .username,
    .dropdown-header-copy,
    .dropdown-header-badges
) {
    column-gap: 2px !important;
    gap: 2px !important;
}

:is(#mr-user-tag-gap-lock, html):is(#mr-user-tag-gap-lock-2, html) body :is(
    .user-name + .role-tag,
    .user-link + .role-tag,
    .member-name + .role-tag,
    .role-tag.owner,
    .role-tag.admin
) {
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
}

/* The questions table taxonomy column uses the category tone supplied by
 * QuestionsPage instead of the legacy transparent-label treatment. */
:is(#mr-question-tone-lock, html):is(#mr-question-tone-lock-2, html) body.questions-page #questionsGrid#questionsGrid .question-row-tags :is(
    .category-tag,
    .question-topic-tag
) {
    background: var(--tag-tone-bg) !important;
    background-color: var(--tag-tone-bg) !important;
    border: 1px solid var(--tag-tone-border) !important;
    color: var(--tag-tone-text) !important;
    opacity: 1 !important;
    font-family: var(--ds-font) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

/* Reference geometry with category-owned color variables. */
:is(#mr-question-tag-reference, html):is(#mr-question-tag-reference-2, html) body :is(
    .question-tag,
    .category-tag,
    .question-topic-tag,
    .question-tag-inline,
    .question-tag-chip,
    .question-tag-choice
) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 23px !important;
    min-width: 0 !important;
    min-height: 23px !important;
    max-height: 23px !important;
    padding: 0 7px !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: var(--tag-tone-bg, #7d8aa3) !important;
    background-color: var(--tag-tone-bg, #7d8aa3) !important;
    background-image: none !important;
    color: #ffffff !important;
    font-family: var(--ds-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 23px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

:is(#mr-question-tag-reference, html):is(#mr-question-tag-reference-2, html) body :is(
    .question-row-tags,
    .question-tag-summary,
    .question-tag-search-summary__chips,
    .question-tag-picker-selected__chips,
    .question-tag-picker-section__chips
) {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

:is(#mr-question-tag-reference, html):is(#mr-question-tag-reference-2, html) body .question-topic-empty {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 23px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #9aa1ad !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 23px !important;
    box-shadow: none !important;
}

:is(#mr-question-tag-reference, html):is(#mr-question-tag-reference-2, html) body .question-tag-picker-modal :is(
    .question-tag-picker-selected__chips,
    .question-tag-picker-section__chips
) {
    gap: 10px !important;
}

:is(#mr-question-tag-reference, html):is(#mr-question-tag-reference-2, html) body .question-tag-picker-modal :is(
    .question-tag-chip,
    .question-tag-choice
) {
    height: var(--ds-tag-height, 32px) !important;
    min-height: var(--ds-tag-height, 32px) !important;
    max-height: var(--ds-tag-height, 32px) !important;
    padding-inline: var(--ds-tag-padding-inline, 9px) !important;
    font-size: var(--ds-tag-font-size, 13px) !important;
    line-height: 1 !important;
}

:is(#mr-question-tag-reference, html):is(#mr-question-tag-reference-2, html) body :is(
    .question-tag,
    .category-tag,
    .question-topic-tag,
    .question-tag-inline,
    .question-tag-chip,
    .question-tag-choice
):is(:hover, :focus-visible, :active) {
    background: var(--tag-tone-bg, #7d8aa3) !important;
    background-color: var(--tag-tone-bg, #7d8aa3) !important;
    color: var(--tag-tone-text, #ffffff) !important;
    opacity: 0.9 !important;
    transform: none !important;
}

/* Reference-locked difficulty labels: compact white type on red, orange,
 * and green tier colors with a subtle one-pixel darker edge. */
:is(#mr-difficulty-reference, html):is(#mr-difficulty-reference-2, html) body :is(
    .question-difficulty,
    .difficulty-tag
) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 23px !important;
    min-width: 0 !important;
    min-height: 23px !important;
    max-height: 23px !important;
    padding: 0 7px !important;
    border: 1px solid #ca8920 !important;
    border-radius: 2px !important;
    background: #f39c11 !important;
    background-color: #f39c11 !important;
    background-image: none !important;
    color: #ffffff !important;
    font-family: var(--ds-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 21px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

:is(#mr-difficulty-reference, html):is(#mr-difficulty-reference-2, html) body :is(
    .question-difficulty.easy,
    .difficulty-tag.easy
) {
    border-color: #e94054 !important;
    background: #fe4c61 !important;
    background-color: #fe4c61 !important;
    color: #ffffff !important;
}

:is(#mr-difficulty-reference, html):is(#mr-difficulty-reference-2, html) body :is(
    .question-difficulty.medium,
    .difficulty-tag.medium
) {
    border-color: #ca8920 !important;
    background: #f39c11 !important;
    background-color: #f39c11 !important;
    color: #ffffff !important;
}

:is(#mr-difficulty-reference, html):is(#mr-difficulty-reference-2, html) body :is(
    .question-difficulty.hard,
    .difficulty-tag.hard
) {
    border-color: #50a127 !important;
    background: #53c41a !important;
    background-color: #53c41a !important;
    color: #ffffff !important;
}

/* ========================================================================
 * Unified application component contract v3
 *
 * The historical stylesheet contains page-era variants of the same controls.
 * This final layer gives application UI one compact scale and one hierarchy:
 * - content type uses the sans face; taxonomy/IDs use mono;
 * - actions are 36px pills, fields are 40px G2 controls;
 * - content cards are flat 24px G2 surfaces;
 * - dense lists are one frame with divided, square internal rows.
 * Semantic question/difficulty colors remain owned by the rules above.
 * ===================================================================== */

html body {
    color: var(--ds-t-ink) !important;
    font-family: var(--ds-font) !important;
    font-size: 14px !important;
    font-weight: var(--ds-weight-body) !important;
    line-height: 1.5 !important;
    letter-spacing: -0.012em !important;
}

html body :is(h1, .page-title) {
    font-family: var(--ds-font) !important;
    font-size: clamp(28px, 3.2vw, 36px) !important;
    font-weight: var(--ds-weight-display) !important;
    line-height: 1.1 !important;
    letter-spacing: -.035em !important;
}

html body :is(h2, .section-title) {
    font-family: var(--ds-font) !important;
    font-size: 21px !important;
    font-weight: var(--ds-weight-headline) !important;
    line-height: 1.25 !important;
    letter-spacing: -.02em !important;
}

html body :is(h3, h4, .card-title, .panel-title, .modal-title) {
    font-family: var(--ds-font) !important;
    font-size: 16px !important;
    font-weight: var(--ds-weight-card-title) !important;
    line-height: 1.35 !important;
    letter-spacing: -.012em !important;
}

html body :is(
    .eyebrow,
    .kicker,
    .caption,
    .meta,
    .stat-label,
    .panel-index,
    .groups-eyebrow
) {
    font-family: var(--ds-font-mono) !important;
    font-size: 11px !important;
    font-weight: 560 !important;
    line-height: 1.3 !important;
    letter-spacing: .045em !important;
}

html body :is(
    .text-muted,
    .muted,
    .helper-text,
    .form-help,
    .form-hint,
    .card-subtitle,
    .panel-subtitle,
    .section-subtitle,
    .empty-description
) {
    color: var(--ds-t-ink-muted) !important;
}

html body :is(
    .stat-value,
    .metric-value,
    .summary-value,
    [data-stat-value]
) {
    font-variant-numeric: tabular-nums;
    font-weight: var(--ds-weight-display) !important;
    letter-spacing: -.025em !important;
}

/* Action buttons: compact and typographic, without ornamental elevation. */
html body :is(
    .btn,
    a.btn,
    .button,
    .primary-btn,
    .secondary-btn,
    .cancel-btn,
    .action-button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto;
    min-width: 0 !important;
    min-height: var(--ds-ui-control-height) !important;
    height: auto;
    padding: 7px 14px !important;
    border: 1px solid var(--ds-t-primary) !important;
    border-radius: var(--ds-rounded-full) !important;
    background: var(--ds-t-primary) !important;
    color: var(--ds-t-on-primary) !important;
    font-family: var(--ds-font) !important;
    font-size: 13px !important;
    font-weight: var(--ds-weight-button) !important;
    line-height: 1.2 !important;
    letter-spacing: -.01em !important;
    box-shadow: none !important;
    transform: none !important;
}

html body :is(
    .btn,
    a.btn,
    .button,
    .primary-btn,
    .secondary-btn,
    .cancel-btn,
    .action-button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
):is(:hover, :focus-visible) {
    border-color: var(--ds-t-ink) !important;
    background: var(--ds-t-ink) !important;
    color: var(--ds-t-canvas) !important;
    box-shadow: none !important;
}

html body :is(
    .btn-secondary,
    .btn-outline,
    .button-secondary,
    .secondary-btn,
    .cancel-btn,
    .btn-light,
    .btn-tertiary
) {
    border-color: var(--ds-t-hairline) !important;
    background: var(--ds-t-surface) !important;
    color: var(--ds-t-ink) !important;
}

html body :is(
    .btn-secondary,
    .btn-outline,
    .button-secondary,
    .secondary-btn,
    .cancel-btn,
    .btn-light,
    .btn-tertiary
):is(:hover, :focus-visible) {
    border-color: var(--ds-t-hairline) !important;
    background: var(--ds-t-surface-soft) !important;
    color: var(--ds-t-ink) !important;
}

html body :is(
    .icon-button,
    .btn-icon,
    .close-button,
    .modal-close
) {
    inline-size: 34px !important;
    block-size: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 1px solid var(--ds-t-hairline) !important;
    border-radius: var(--ds-rounded-full) !important;
    background: var(--ds-t-surface) !important;
    color: var(--ds-t-ink) !important;
    box-shadow: none !important;
}

/* Form controls: common height, type and G2 geometry. Textareas retain a
 * content-shaped rectangle instead of inheriting the one-line control. */
html body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="file"]),
    select,
    .form-control,
    .form-input,
    .input,
    .search-input,
    .filter-select,
    .tag-input,
    .editor-input
) {
    --ds-g2-edge: var(--ds-t-hairline);
    min-height: 40px !important;
    height: auto;
    padding: 9px 12px !important;
    border: 1px solid transparent !important;
    border-radius: var(--ds-ui-control-radius) !important;
    corner-shape: superellipse(2);
    background:
        linear-gradient(var(--ds-t-surface) 0 0) padding-box,
        linear-gradient(var(--ds-g2-edge) 0 0) border-box !important;
    color: var(--ds-t-ink) !important;
    font-family: var(--ds-font) !important;
    font-size: 14px !important;
    font-weight: var(--ds-weight-body) !important;
    line-height: 1.35 !important;
    letter-spacing: -.012em !important;
    box-shadow: none !important;
}

html body textarea {
    --ds-g2-edge: var(--ds-t-hairline);
    min-height: 104px !important;
    padding: 11px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    corner-shape: superellipse(2);
    background:
        linear-gradient(var(--ds-t-surface) 0 0) padding-box,
        linear-gradient(var(--ds-g2-edge) 0 0) border-box !important;
    color: var(--ds-t-ink) !important;
    font-family: var(--ds-font) !important;
    font-size: 14px !important;
    font-weight: var(--ds-weight-body) !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
}

html body :is(input, textarea, select)::placeholder {
    color: var(--ds-t-ink-faint) !important;
    opacity: 1 !important;
}

html body :is(input, textarea, select):focus {
    --ds-g2-edge: var(--ds-t-ink);
    border-color: transparent !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* Flat G2 content surfaces. Color blocks and semantic tags are deliberately
 * excluded: this contract governs structure, not semantic color. */
html body :is(
    .card,
    .panel,
    .surface,
    .auth-card,
    .settings-card,
    .profile-card,
    .question-card,
    .question-detail-card,
    .editor-card,
    .forum-card,
    .post-card,
    .reply-card,
    .group-card,
    .dashboard-card,
    .stat-card,
    .class-member-card,
    .checkin-card,
    .info-card,
    .table-card,
    .upload-card,
    .image-viewer-card
) {
    border: 1px solid transparent !important;
    border-radius: var(--ds-ui-card-radius) !important;
    corner-shape: superellipse(2);
    background:
        linear-gradient(var(--ds-t-surface) 0 0) padding-box,
        linear-gradient(var(--ds-t-hairline) 0 0) border-box !important;
    background-color: var(--ds-t-surface) !important;
    color: var(--ds-t-ink) !important;
    box-shadow: none !important;
    transform: none !important;
}

html body :is(
    .card,
    .panel,
    .surface,
    .settings-card,
    .profile-card,
    .question-card,
    .editor-card,
    .forum-card,
    .post-card,
    .reply-card,
    .group-card,
    .dashboard-card,
    .stat-card,
    .class-member-card,
    .checkin-card,
    .info-card,
    .table-card,
    .upload-card,
    .image-viewer-card
):is(:hover, :focus-within) {
    box-shadow: none !important;
    transform: none !important;
}

html body :is(
    .card-header,
    .panel-header,
    .modal-header,
    .section-header,
    .table-header
) {
    border-color: var(--ds-t-hairline-soft) !important;
    background: transparent !important;
}

/* Dense lists behave as one component, not a stack of miniature cards. */
html body :is(
    .settings-list,
    .activity-list,
    .submissions-list,
    .user-role-list,
    .question-info-list,
    .ops-notice-list,
    .ops-orphan-list
) {
    overflow: clip !important;
    border: 1px solid transparent !important;
    border-radius: var(--ds-ui-card-radius) !important;
    corner-shape: superellipse(2);
    background:
        linear-gradient(var(--ds-t-surface) 0 0) padding-box,
        linear-gradient(var(--ds-t-hairline) 0 0) border-box !important;
    box-shadow: none !important;
}

html body :is(
    .list-row,
    .settings-item,
    .activity-item,
    .submission-item,
    .user-role-item,
    .info-item,
    .ops-notice,
    .ops-orphan-item
) {
    min-height: 44px;
    margin: 0 !important;
    padding: var(--ds-ui-row-padding-block) var(--ds-ui-row-padding-inline) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ds-t-hairline-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body :is(
    .list-row,
    .settings-item,
    .activity-item,
    .submission-item,
    .user-role-item,
    .info-item,
    .ops-notice,
    .ops-orphan-item
):last-child {
    border-bottom: 0 !important;
}

html body :is(th, td) {
    padding: 11px 14px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

html body th {
    color: var(--ds-t-ink-muted) !important;
    font-size: 11px !important;
    font-weight: 620 !important;
    letter-spacing: .035em !important;
}

@media (pointer: coarse) {
    html body :is(
        .btn,
        a.btn,
        .button,
        .primary-btn,
        .secondary-btn,
        .cancel-btn,
        .action-button,
        input[type="button"],
        input[type="submit"],
        input[type="reset"]
    ) {
        min-height: var(--ds-ui-control-height-touch) !important;
    }
}

/* ========================================================================
 * Unified application density contract v4
 *
 * Keep information close to the label or action it belongs to. Structural
 * frames exist only at the outer component boundary; nested layout regions
 * stay flat. Long-form reading surfaces retain a slightly looser measure.
 * ===================================================================== */

:is(#mr-density-v4, html):is(#mr-density-v4-lock, html) body {
    line-height: 1.4 !important;
}

:is(#mr-density-v4, html):is(#mr-density-v4-lock, html) body :is(h1, .page-title) {
    line-height: 1.04 !important;
}

:is(#mr-density-v4, html):is(#mr-density-v4-lock, html) body :is(h2, .section-title) {
    line-height: 1.14 !important;
}

:is(#mr-density-v4, html):is(#mr-density-v4-lock, html) body :is(
    h3,
    h4,
    .card-title,
    .panel-title,
    .modal-title
) {
    line-height: 1.22 !important;
}

:is(#mr-density-v4, html):is(#mr-density-v4-lock, html) body :is(
    p,
    li,
    label,
    .body-copy,
    .description,
    .helper-text,
    .form-help,
    .form-hint,
    .card-subtitle,
    .panel-subtitle,
    .section-subtitle,
    .empty-description
) {
    line-height: 1.4 !important;
}

:is(#mr-density-v4, html):is(#mr-density-v4-lock, html) body :is(
    .markdown-body,
    .question-content,
    .post-content,
    .reply-content,
    .solution-content,
    .answer-content
) {
    line-height: 1.55 !important;
}

:is(#mr-density-v4, html):is(#mr-density-v4-lock, html) body :is(
    .form-group,
    .field-group,
    fieldset
) {
    gap: 6px !important;
}

:is(#mr-density-v4, html):is(#mr-density-v4-lock, html) body :is(
    .modal-form,
    .editor-form,
    .reply-form,
    .settings-form,
    .profile-form,
    .form-grid
) {
    gap: 14px !important;
}

:is(#mr-density-v4, html):is(#mr-density-v4-lock, html) body :is(
    .form-row,
    .form-actions,
    .editor-actions,
    .actions,
    .button-group,
    .toolbar,
    .filter-bar,
    .search-bar,
    .tabs,
    .tab-list
) {
    gap: 8px !important;
}

:is(#mr-density-v4, html):is(#mr-density-v4-lock, html) body :is(
    .card-header,
    .panel-header,
    .modal-header,
    .section-header,
    .table-header,
    .card-meta,
    .post-meta,
    .question-meta,
    .user-meta
) {
    gap: 8px !important;
}

:is(#mr-density-v4, html):is(#mr-density-v4-lock, html) body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
    select,
    .form-control,
    .form-input,
    .input,
    .search-input,
    .filter-select,
    .tag-input,
    .editor-input
) {
    min-height: 36px !important;
    height: 36px !important;
    padding-block: 7px !important;
    line-height: 1.2 !important;
}

:is(#mr-density-v4, html):is(#mr-density-v4-lock, html) body textarea {
    padding: 10px 12px !important;
    line-height: 1.4 !important;
}

:is(#mr-density-v4, html):is(#mr-density-v4-lock, html) body :is(
    .list-row,
    .settings-item,
    .activity-item,
    .submission-item,
    .user-role-item,
    .info-item,
    .ops-notice,
    .ops-orphan-item
) {
    min-height: 38px !important;
    padding: var(--ds-ui-row-padding-block) var(--ds-ui-row-padding-inline) !important;
    line-height: 1.3 !important;
}

:is(#mr-density-v4, html):is(#mr-density-v4-lock, html) body :is(th, td) {
    padding: 8px 12px !important;
    line-height: 1.3 !important;
}

/* Nested structural regions must not become a second card inside a card. */
:is(#mr-density-v4, html):is(#mr-density-v4-lock, html) body :is(
    .card,
    .panel,
    .surface,
    .settings-card,
    .profile-card,
    .editor-card,
    .forum-card,
    .post-card,
    .reply-card,
    .dashboard-card,
    .info-card,
    .table-card,
    .upload-card
) :is(
    .form-section,
    .content-section,
    .info-section,
    .settings-section,
    .editor-section,
    .card-section,
    .panel-section
) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (pointer: coarse) {
    :is(#mr-density-v4, html):is(#mr-density-v4-lock, html) body :is(
        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
        select,
        .form-control,
        .form-input,
        .input,
        .search-input,
        .filter-select,
        .tag-input,
        .editor-input
    ) {
        min-height: 40px !important;
        height: 40px !important;
    }
}

/* Button geometry lock. Page layouts may change width, color or density, but
 * surfaced actions share the same full-round corner. Icon-only square actions
 * therefore resolve to circles; pagination, tags and text-only actions remain
 * outside this class-based contract. */
:is(#mr-button-radius-v3, html):is(#mr-button-radius-v3-lock-1, html):is(#mr-button-radius-v3-lock-2, html):is(#mr-button-radius-v3-lock-3, html) body :is(
    .btn,
    a.btn,
    .button,
    .primary-btn,
    .secondary-btn,
    .cancel-btn,
    .action-button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
) {
    border-radius: var(--ds-rounded-full) !important;
}

@media (max-width: 640px) {
    html body :is(h1, .page-title) {
        font-size: 28px !important;
    }

    html body :is(h2, .section-title) {
        font-size: 19px !important;
    }

    html body :is(
        .card,
        .panel,
        .surface,
        .auth-card,
        .settings-card,
        .profile-card,
        .question-card,
        .editor-card,
        .forum-card,
        .post-card,
        .reply-card,
        .group-card,
        .dashboard-card,
        .stat-card,
        .class-member-card,
        .checkin-card,
        .info-card,
        .table-card,
        .upload-card,
        .image-viewer-card
    ) {
        border-radius: 20px !important;
    }
}

/* Legacy specificity bridge. A few older page rules intentionally carry
 * repeated selectors; the ID-weighted :is() arms never match an ID, but give
 * the shared contract enough cascade weight without adding markup hooks. */
:is(#mr-ui-contract-v3, html):is(#mr-ui-contract-v3-lock, html) body :is(
    .btn,
    a.btn,
    .button,
    .primary-btn,
    .secondary-btn,
    .cancel-btn,
    .action-button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
) {
    min-width: 0 !important;
    min-height: var(--ds-ui-control-height) !important;
    height: auto !important;
    padding: 7px 14px !important;
    border: 1px solid var(--ds-t-primary) !important;
    border-radius: var(--ds-rounded-full) !important;
    background: var(--ds-t-primary) !important;
    color: var(--ds-t-on-primary) !important;
    font-family: var(--ds-font) !important;
    font-size: 13px !important;
    font-weight: var(--ds-weight-button) !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    transform: none !important;
}

:is(#mr-ui-contract-v3, html):is(#mr-ui-contract-v3-lock, html) body :is(
    .btn-secondary,
    .btn-outline,
    .button-secondary,
    .secondary-btn,
    .cancel-btn,
    .btn-light,
    .btn-tertiary
) {
    border-color: var(--ds-t-hairline) !important;
    background: var(--ds-t-surface) !important;
    color: var(--ds-t-ink) !important;
}

:is(#mr-ui-contract-v3, html):is(#mr-ui-contract-v3-lock, html) body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
    select,
    .form-control,
    .form-input,
    .input,
    .search-input,
    .filter-select,
    .tag-input,
    .editor-input
) {
    --ds-g2-edge: var(--ds-t-hairline);
    min-height: 40px !important;
    height: 40px !important;
    padding: 9px 12px !important;
    border: 1px solid transparent !important;
    border-radius: var(--ds-ui-control-radius) !important;
    corner-shape: superellipse(2) !important;
    background:
        linear-gradient(var(--ds-t-surface) 0 0) padding-box,
        linear-gradient(var(--ds-g2-edge) 0 0) border-box !important;
    color: var(--ds-t-ink) !important;
    font-family: var(--ds-font) !important;
    font-size: 14px !important;
    font-weight: var(--ds-weight-body) !important;
    line-height: 1.35 !important;
    box-shadow: none !important;
}

:is(#mr-ui-contract-v3, html):is(#mr-ui-contract-v3-lock, html) body textarea {
    --ds-g2-edge: var(--ds-t-hairline);
    min-height: 104px !important;
    height: auto !important;
    padding: 11px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    corner-shape: superellipse(2) !important;
    background:
        linear-gradient(var(--ds-t-surface) 0 0) padding-box,
        linear-gradient(var(--ds-g2-edge) 0 0) border-box !important;
    color: var(--ds-t-ink) !important;
    font-family: var(--ds-font) !important;
    font-size: 14px !important;
    font-weight: var(--ds-weight-body) !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
}

:is(#mr-ui-contract-v3, html):is(#mr-ui-contract-v3-lock, html) body :is(
    .card,
    .panel,
    .surface,
    .auth-card,
    .settings-card,
    .profile-card,
    .question-card,
    .question-detail-card,
    .editor-card,
    .forum-card,
    .post-card,
    .reply-card,
    .group-card,
    .dashboard-card,
    .stat-card,
    .class-member-card,
    .checkin-card,
    .info-card,
    .table-card,
    .upload-card,
    .image-viewer-card
) {
    border: 1px solid transparent !important;
    border-radius: var(--ds-ui-card-radius) !important;
    corner-shape: superellipse(2) !important;
    background:
        linear-gradient(var(--ds-t-surface) 0 0) padding-box,
        linear-gradient(var(--ds-t-hairline) 0 0) border-box !important;
    color: var(--ds-t-ink) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Keep native-style select chevrons above the concentric G2 fill layers. */
:is(#mr-ui-contract-v3, html):is(#mr-ui-contract-v3-lock, html):is(#mr-ui-contract-v3-select, html) body select:not([multiple]):not([size]),
:is(#mr-ui-contract-v3, html):is(#mr-ui-contract-v3-lock, html):is(#mr-ui-contract-v3-select, html) body select[size="1"] {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M3.75 6.75 9 12l5.25-5.25' stroke='%23181816' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
        linear-gradient(var(--ds-t-surface) 0 0),
        linear-gradient(var(--ds-g2-edge) 0 0) !important;
    background-position: right 20px center, 0 0, 0 0 !important;
    background-size: 18px 18px, auto, auto !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-origin: padding-box, padding-box, border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
}

:is(#mr-ui-contract-v3, html):is(#mr-ui-contract-v3-lock, html):is(#mr-ui-contract-v3-focus, html) body :is(input, textarea, select):focus {
    --ds-g2-edge: var(--ds-t-ink);
    border-color: transparent !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

:is(#mr-ui-contract-v3, html):is(#mr-ui-contract-v3-lock, html):is(#mr-ui-contract-v3-select, html) body.dark-mode select:not([multiple]):not([size]),
html[data-theme="dark"]:is(#mr-ui-contract-v3, html):is(#mr-ui-contract-v3-lock, html):is(#mr-ui-contract-v3-select, html) body select:not([multiple]):not([size]),
:is(#mr-ui-contract-v3, html):is(#mr-ui-contract-v3-lock, html):is(#mr-ui-contract-v3-select, html) body.dark-mode select[size="1"],
html[data-theme="dark"]:is(#mr-ui-contract-v3, html):is(#mr-ui-contract-v3-lock, html):is(#mr-ui-contract-v3-select, html) body select[size="1"] {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M3.75 6.75 9 12l5.25-5.25' stroke='%23f5f3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
        linear-gradient(var(--ds-t-surface) 0 0),
        linear-gradient(var(--ds-g2-edge) 0 0) !important;
}

@media (pointer: coarse) {
    :is(#mr-ui-contract-v3, html):is(#mr-ui-contract-v3-lock, html) body :is(
        .btn,
        a.btn,
        .button,
        .primary-btn,
        .secondary-btn,
        .cancel-btn,
        .action-button,
        input[type="button"],
        input[type="submit"],
        input[type="reset"]
    ) {
        min-height: var(--ds-ui-control-height-touch) !important;
    }
}

/* Final v4 bridge: keep the compact dimensions authoritative over v3. */
:is(#mr-density-v4-final, html):is(#mr-density-v4-final-lock-1, html):is(#mr-density-v4-final-lock-2, html) body :is(
    .btn,
    a.btn,
    .button,
    .primary-btn,
    .secondary-btn,
    .cancel-btn,
    .action-button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
) {
    min-height: var(--ds-ui-control-height) !important;
    padding-block: 6px !important;
    line-height: 1.1 !important;
}

:is(#mr-density-v4-final, html):is(#mr-density-v4-final-lock-1, html):is(#mr-density-v4-final-lock-2, html) body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
    select,
    .form-control,
    .form-input,
    .input,
    .search-input,
    .filter-select,
    .tag-input,
    .editor-input
) {
    min-height: 36px !important;
    height: 36px !important;
    padding-block: 7px !important;
    line-height: 1.2 !important;
}

:is(#mr-density-v4-final, html):is(#mr-density-v4-final-lock-1, html):is(#mr-density-v4-final-lock-2, html) body textarea {
    padding: 10px 12px !important;
    line-height: 1.4 !important;
}

@media (pointer: coarse) {
    :is(#mr-density-v4-final, html):is(#mr-density-v4-final-lock-1, html):is(#mr-density-v4-final-lock-2, html) body :is(
        .btn,
        a.btn,
        .button,
        .primary-btn,
        .secondary-btn,
        .cancel-btn,
        .action-button,
        input[type="button"],
        input[type="submit"],
        input[type="reset"],
        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="file"]),
        select,
        .form-control,
        .form-input,
        .input,
        .search-input,
        .filter-select,
        .tag-input,
        .editor-input
    ) {
        min-height: var(--ds-ui-control-height-touch) !important;
    }
}

/* High-density page families: one outer boundary, short rows, aligned data. */
:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body.questions-page #questionsGrid > .question-row {
    min-height: 44px !important;
    padding-block: 4px !important;
    line-height: 1.3 !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body.forum-page .main-container {
    padding-block: 24px 60px !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body.forum-page .forum-container {
    gap: 16px !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body.forum-page .forum-index__header {
    min-height: 52px !important;
    padding-inline: 20px !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body.forum-page .forum-index__header h3 {
    font-size: 17px !important;
    line-height: 1.15 !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body.forum-page #forumPosts > .forum-post {
    min-height: 76px !important;
    padding: 13px 20px !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body.forum-page #forumPosts .forum-post .post-header > div {
    gap: 5px !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body.forum-page #forumPosts .forum-post .post-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body.forum-page #forumPosts .forum-post .post-meta {
    gap: 5px 12px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body .ranking-list > .ranking-item {
    min-height: 48px !important;
    padding-inline: 18px !important;
    line-height: 1.3 !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body .ranking-sidebar .ranking-podium__item {
    min-height: 48px !important;
    padding: 7px 10px !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body .groups-main .groups-grid {
    gap: 12px !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body .groups-main .group-card {
    gap: 12px !important;
    padding: 16px 18px !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body .groups-main .group-card .group-name {
    font-size: 19px !important;
    line-height: 1.1 !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body .groups-main .group-card .group-scores {
    grid-template-columns: minmax(0, 1fr) 72px 72px !important;
    padding: 3px 0 !important;
    border: 0 !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body .groups-main .group-card .group-score,
:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body .groups-main .group-card :is(.group-score.total, .group-score.plus, .group-score.minus) {
    min-height: 44px !important;
    padding: 0 0 0 10px !important;
    border: 0 !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body .groups-main .group-card .group-score.total {
    padding-left: 0 !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body .groups-main .group-card .group-score.total .value {
    font-size: 32px !important;
    line-height: 1 !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body .groups-main .group-card .group-score .value {
    font-size: 15px !important;
    line-height: 1.05 !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body .groups-main .groups-overview .groups-summary {
    border-top: 0 !important;
}

:is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body .groups-main .groups-overview .groups-summary__item {
    min-height: 66px !important;
    padding: 10px 18px !important;
    border: 0 !important;
}

@media (max-width: 800px) {
    :is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body.questions-page #questionsGrid > .question-row {
        min-height: 50px !important;
        padding-block: 5px !important;
    }
}

@media (max-width: 640px) {
    :is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body.forum-page #forumPosts > .forum-post {
        min-height: 72px !important;
        padding: 12px 14px !important;
    }

    :is(#mr-density-v4-pages, html):is(#mr-density-v4-pages-lock-1, html):is(#mr-density-v4-pages-lock-2, html) body .groups-main .group-card {
        gap: 11px !important;
        padding: 15px !important;
    }
}

/* Absolute cascade tail for the global button language. */
:is(#mr-button-tail-v5, html):is(#mr-button-tail-v5-lock-1, html):is(#mr-button-tail-v5-lock-2, html):is(#mr-button-tail-v5-lock-3, html) body :is(
    .btn,
    a.btn,
    .button,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .btn-ghost,
    .btn-fill,
    .btn-quiet,
    .primary-btn,
    .secondary-btn,
    .cancel-btn,
    .action-button,
    .home-button,
    .upload-btn,
    .take-photo-btn,
    .upload-btn-text-icon,
    .page-state__action,
    .ops-secondary-button,
    .ops-danger-button,
    .avatar-action-btn,
    .profile-account-action,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
) {
    box-sizing: border-box !important;
    min-height: 36px !important;
    padding: 7px 16px !important;
    border: 1px solid var(--ds-action-blue) !important;
    border-radius: var(--ds-rounded-full) !important;
    background: var(--ds-action-blue) !important;
    color: #ffffff !important;
    font: 400 13px/1.2 var(--ds-font) !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
}

:is(#mr-button-tail-v5, html):is(#mr-button-tail-v5-lock-1, html):is(#mr-button-tail-v5-lock-2, html):is(#mr-button-tail-v5-lock-3, html) body :is(
    .btn-secondary.btn-secondary,
    .btn-outline.btn-outline,
    .btn-ghost.btn-ghost,
    .btn-quiet.btn-quiet,
    .button-secondary.button-secondary,
    .secondary-btn.secondary-btn,
    .cancel-btn.cancel-btn,
    .btn-light.btn-light,
    .btn-tertiary.btn-tertiary,
    .upload-btn-text-icon.upload-btn-text-icon,
    .ops-secondary-button.ops-secondary-button,
    .avatar-cancel-btn.avatar-cancel-btn
) {
    border: 1px solid var(--ds-action-blue) !important;
    background: transparent !important;
    color: var(--ds-action-blue) !important;
}

:is(#mr-button-tail-v5, html):is(#mr-button-tail-v5-lock-1, html):is(#mr-button-tail-v5-lock-2, html):is(#mr-button-tail-v5-lock-3, html) body :is(
    .btn-danger.btn-danger,
    .ops-danger-button.ops-danger-button,
    .question-delete-action.question-delete-action
) {
    border-color: var(--ds-action-danger) !important;
    background: transparent !important;
    color: var(--ds-action-danger) !important;
}

:is(#mr-button-tail-v5, html):is(#mr-button-tail-v5-lock-1, html):is(#mr-button-tail-v5-lock-2, html):is(#mr-button-tail-v5-lock-3, html) body :is(
    .btn,
    a.btn,
    .button,
    .btn-primary,
    .primary-btn,
    .action-button,
    .home-button,
    .upload-btn,
    .take-photo-btn,
    .page-state__action,
    .avatar-save-btn,
    input[type="submit"]
):is(:hover, :active) {
    border-color: var(--ds-action-blue-hover) !important;
    background: var(--ds-action-blue-hover) !important;
    color: #ffffff !important;
}

:is(#mr-button-tail-v5, html):is(#mr-button-tail-v5-lock-1, html):is(#mr-button-tail-v5-lock-2, html):is(#mr-button-tail-v5-lock-3, html) body :is(
    .btn-secondary.btn-secondary,
    .btn-outline.btn-outline,
    .btn-ghost.btn-ghost,
    .btn-quiet.btn-quiet,
    .button-secondary.button-secondary,
    .secondary-btn.secondary-btn,
    .cancel-btn.cancel-btn,
    .btn-light.btn-light,
    .btn-tertiary.btn-tertiary,
    .upload-btn-text-icon.upload-btn-text-icon,
    .ops-secondary-button.ops-secondary-button,
    .avatar-cancel-btn.avatar-cancel-btn
):is(:hover, :active) {
    border-color: var(--ds-action-blue-hover) !important;
    background: var(--ds-action-blue-soft) !important;
    color: var(--ds-action-blue-hover) !important;
}

:is(#mr-button-tail-v5, html):is(#mr-button-tail-v5-lock-1, html):is(#mr-button-tail-v5-lock-2, html):is(#mr-button-tail-v5-lock-3, html) body :is(
    .btn-danger.btn-danger,
    .ops-danger-button.ops-danger-button,
    .question-delete-action.question-delete-action
):is(:hover, :active) {
    border-color: var(--ds-action-danger) !important;
    background: var(--ds-action-danger) !important;
    color: #ffffff !important;
}

:is(#mr-button-tail-v5, html):is(#mr-button-tail-v5-lock-1, html):is(#mr-button-tail-v5-lock-2, html):is(#mr-button-tail-v5-lock-3, html) body :is(.btn-sm, .btn-xs) {
    min-height: 32px !important;
    padding: 5px 11px !important;
    font-size: 12px !important;
}

:is(#mr-button-tail-v5, html):is(#mr-button-tail-v5-lock-1, html):is(#mr-button-tail-v5-lock-2, html):is(#mr-button-tail-v5-lock-3, html) body .page-state__action.page-state__action {
    min-height: 44px !important;
}

@media (pointer: coarse) {
    :is(#mr-button-tail-v5, html):is(#mr-button-tail-v5-lock-1, html):is(#mr-button-tail-v5-lock-2, html):is(#mr-button-tail-v5-lock-3, html) body :is(
        .btn,
        a.btn,
        .button,
        .btn-primary,
        .btn-secondary,
        .btn-outline,
        .btn-danger,
        .btn-ghost,
        .btn-fill,
        .btn-quiet,
        .primary-btn,
        .secondary-btn,
        .cancel-btn,
        .action-button,
        .home-button,
        .upload-btn,
        .take-photo-btn,
        .upload-btn-text-icon,
        .page-state__action,
        .ops-secondary-button,
        .ops-danger-button,
        .avatar-action-btn,
        .profile-account-action,
        input[type="button"],
        input[type="submit"],
        input[type="reset"]
    ) {
        min-height: 40px !important;
    }

}

:is(#mr-button-icon-final-v5, html):is(#mr-button-icon-final-v5-lock-1, html):is(#mr-button-icon-final-v5-lock-2, html):is(#mr-button-icon-final-v5-lock-3, html) body :is(button.btn, a.btn):has(> i:only-child) {
    width: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
}

@media (pointer: coarse) {
    :is(#mr-button-icon-final-v5, html):is(#mr-button-icon-final-v5-lock-1, html):is(#mr-button-icon-final-v5-lock-2, html):is(#mr-button-icon-final-v5-lock-3, html) body :is(button.btn, a.btn):has(> i:only-child) {
        width: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
}

/* ========================================================================
 * GLOBAL ACTION CONTRACT V6
 *
 * `:only-child` ignores text nodes, so the older icon shortcut accidentally
 * collapsed every "icon + text" `.btn` (for example “提交挑战”) into a 36px
 * circle. This final contract restores intrinsic text width and keeps circles
 * opt-in. It also returns actions to the black/neutral brand language defined
 * by DESIGN.md while preserving the compact 36px / touch 40px scale.
 * ===================================================================== */
:is(#mr-action-v6, html):is(#mr-action-v6-lock-1, html):is(#mr-action-v6-lock-2, html):is(#mr-action-v6-lock-3, html) body :is(
    .btn,
    a.btn,
    .button,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .btn-ghost,
    .btn-fill,
    .btn-quiet,
    .primary-btn,
    .secondary-btn,
    .cancel-btn,
    .action-button,
    .home-button,
    .upload-btn,
    .take-photo-btn,
    .upload-btn-text-icon,
    .page-state__action,
    .ops-secondary-button,
    .ops-danger-button,
    .avatar-action-btn,
    .profile-account-action,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: auto !important;
    padding: 7px 16px !important;
    overflow-wrap: anywhere !important;
    border: 1px solid transparent !important;
    border-radius: var(--ds-rounded-full) !important;
    background: var(--ds-t-primary) !important;
    color: var(--ds-t-on-primary) !important;
    font: var(--ds-weight-button) 13px/1.2 var(--ds-font) !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease !important;
}

:is(#mr-action-v6, html):is(#mr-action-v6-lock-1, html):is(#mr-action-v6-lock-2, html):is(#mr-action-v6-lock-3, html) body :is(
    .btn,
    a.btn,
    .button,
    .btn-primary,
    .primary-btn,
    .action-button,
    .home-button,
    .upload-btn,
    .take-photo-btn,
    .page-state__action,
    .avatar-save-btn,
    input[type="submit"]
):is(:hover, :active) {
    border-color: transparent !important;
    background: #1d1d1b !important;
    color: var(--ds-t-on-primary) !important;
    box-shadow: none !important;
}

:is(#mr-action-v6, html):is(#mr-action-v6-lock-1, html):is(#mr-action-v6-lock-2, html):is(#mr-action-v6-lock-3, html) body :is(
    .btn-secondary.btn-secondary,
    .btn-outline.btn-outline,
    .btn-ghost.btn-ghost,
    .btn-quiet.btn-quiet,
    .button-secondary.button-secondary,
    .secondary-btn.secondary-btn,
    .cancel-btn.cancel-btn,
    .btn-light.btn-light,
    .btn-tertiary.btn-tertiary,
    .upload-btn-text-icon.upload-btn-text-icon,
    .ops-secondary-button.ops-secondary-button,
    .avatar-cancel-btn.avatar-cancel-btn
) {
    border-color: var(--ds-t-hairline) !important;
    background: var(--ds-t-surface-soft) !important;
    color: var(--ds-t-ink) !important;
}

:is(#mr-action-v6, html):is(#mr-action-v6-lock-1, html):is(#mr-action-v6-lock-2, html):is(#mr-action-v6-lock-3, html) body :is(
    .btn-secondary.btn-secondary,
    .btn-outline.btn-outline,
    .btn-ghost.btn-ghost,
    .btn-quiet.btn-quiet,
    .button-secondary.button-secondary,
    .secondary-btn.secondary-btn,
    .cancel-btn.cancel-btn,
    .btn-light.btn-light,
    .btn-tertiary.btn-tertiary,
    .upload-btn-text-icon.upload-btn-text-icon,
    .ops-secondary-button.ops-secondary-button,
    .avatar-cancel-btn.avatar-cancel-btn
):is(:hover, :active) {
    border-color: var(--ds-t-hairline) !important;
    background: var(--ds-t-hairline-soft) !important;
    color: var(--ds-t-ink) !important;
}

:is(#mr-action-v6, html):is(#mr-action-v6-lock-1, html):is(#mr-action-v6-lock-2, html):is(#mr-action-v6-lock-3, html) body :is(
    .btn-danger.btn-danger,
    .ops-danger-button.ops-danger-button,
    .question-delete-action.question-delete-action
) {
    border-color: color-mix(in srgb, var(--ds-action-danger) 18%, transparent) !important;
    background: color-mix(in srgb, var(--ds-action-danger) 8%, var(--ds-t-surface)) !important;
    color: var(--ds-action-danger) !important;
}

:is(#mr-action-v6, html):is(#mr-action-v6-lock-1, html):is(#mr-action-v6-lock-2, html):is(#mr-action-v6-lock-3, html) body :is(
    .btn-danger.btn-danger,
    .ops-danger-button.ops-danger-button,
    .question-delete-action.question-delete-action
):is(:hover, :active) {
    border-color: var(--ds-action-danger) !important;
    background: var(--ds-action-danger) !important;
    color: #ffffff !important;
}

:is(#mr-action-v6, html):is(#mr-action-v6-lock-1, html):is(#mr-action-v6-lock-2, html):is(#mr-action-v6-lock-3, html) body :is(.btn-block, .button-block) {
    width: 100% !important;
}

/* Undo the text-node-blind V5 auto-circle. Only the known icon-only upload
 * action opts back into circular geometry; named utility controls keep their
 * own component rules. */
:is(#mr-action-v6, html):is(#mr-action-v6-lock-1, html):is(#mr-action-v6-lock-2, html):is(#mr-action-v6-lock-3, html) body :is(button.btn, a.btn):has(> i:only-child) {
    width: auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 7px 16px !important;
}

:is(#mr-action-v6-icon, html):is(#mr-action-v6-icon-lock-1, html):is(#mr-action-v6-icon-lock-2, html):is(#mr-action-v6-icon-lock-3, html) body #uploadQuestionBtn#uploadQuestionBtn {
    width: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: var(--ds-rounded-full) !important;
}

/* Password visibility proxies sit inside the shared field. A generic
 * `[role=button]` rule previously made their minimum height 48px, taller than
 * the field and visibly breaking the row. */
:is(#mr-action-v6-utility, html):is(#mr-action-v6-utility-lock-1, html):is(#mr-action-v6-utility-lock-2, html) body :is(.password-toggle-proxy, #passwordToggleProxy, #confirmPasswordToggleProxy) {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--ds-rounded-full) !important;
    background: transparent !important;
    box-shadow: none !important;
}

:is(#mr-action-v6, html):is(#mr-action-v6-lock-1, html):is(#mr-action-v6-lock-2, html):is(#mr-action-v6-lock-3, html) body :is(
    .btn,
    a.btn,
    .button,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .btn-ghost,
    .btn-fill,
    .btn-quiet,
    .primary-btn,
    .secondary-btn,
    .cancel-btn,
    .action-button,
    .home-button,
    .upload-btn,
    .take-photo-btn,
    .upload-btn-text-icon,
    .page-state__action,
    .ops-secondary-button,
    .ops-danger-button,
    .avatar-action-btn,
    .profile-account-action,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
):focus-visible {
    outline: 2px solid var(--ds-t-ink) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

@media (pointer: coarse) {
    :is(#mr-action-v6, html):is(#mr-action-v6-lock-1, html):is(#mr-action-v6-lock-2, html):is(#mr-action-v6-lock-3, html) body :is(
        .btn,
        a.btn,
        .button,
        .btn-primary,
        .btn-secondary,
        .btn-outline,
        .btn-danger,
        .btn-ghost,
        .btn-fill,
        .btn-quiet,
        .primary-btn,
        .secondary-btn,
        .cancel-btn,
        .action-button,
        .home-button,
        .upload-btn,
        .take-photo-btn,
        .upload-btn-text-icon,
        .page-state__action,
        .ops-secondary-button,
        .ops-danger-button,
        .avatar-action-btn,
        .profile-account-action,
        input[type="button"],
        input[type="submit"],
        input[type="reset"]
    ) {
        min-height: 40px !important;
    }

    :is(#mr-action-v6, html):is(#mr-action-v6-lock-1, html):is(#mr-action-v6-lock-2, html):is(#mr-action-v6-lock-3, html) body :is(button.btn, a.btn):has(> i:only-child) {
        min-height: 40px !important;
    }

    :is(#mr-action-v6-icon, html):is(#mr-action-v6-icon-lock-1, html):is(#mr-action-v6-icon-lock-2, html):is(#mr-action-v6-icon-lock-3, html) body #uploadQuestionBtn#uploadQuestionBtn,
    :is(#mr-action-v6-utility, html):is(#mr-action-v6-utility-lock-1, html):is(#mr-action-v6-utility-lock-2, html) body :is(.password-toggle-proxy, #passwordToggleProxy, #confirmPasswordToggleProxy) {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
    }
}

/* Absolute mobile lock: keep the two question filters inside their grid
 * after the global action contract has resolved button width. */
@media (max-width: 640px) {
    :is(#mr-question-filter-mobile-tail-v1, html):is(#mr-question-filter-mobile-tail-v1-lock-1, html):is(#mr-question-filter-mobile-tail-v1-lock-2, html):is(#mr-question-filter-mobile-tail-v1-lock-3, html):is(#mr-question-filter-mobile-tail-v1-lock-4, html) body.questions-page .questions-container .search-box.search-box {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 8px !important;
    }

    :is(#mr-question-filter-mobile-tail-v1, html):is(#mr-question-filter-mobile-tail-v1-lock-1, html):is(#mr-question-filter-mobile-tail-v1-lock-2, html):is(#mr-question-filter-mobile-tail-v1-lock-3, html):is(#mr-question-filter-mobile-tail-v1-lock-4, html) body.questions-page .questions-container #difficultyFilter#difficultyFilter#difficultyFilter#difficultyFilter,
    :is(#mr-question-filter-mobile-tail-v1, html):is(#mr-question-filter-mobile-tail-v1-lock-1, html):is(#mr-question-filter-mobile-tail-v1-lock-2, html):is(#mr-question-filter-mobile-tail-v1-lock-3, html):is(#mr-question-filter-mobile-tail-v1-lock-4, html) body.questions-page .questions-container #questionFilterBtn#questionFilterBtn#questionFilterBtn#questionFilterBtn {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
    }
}

@media (max-width: 380px) {
    :is(#mr-question-filter-mobile-tail-v1, html):is(#mr-question-filter-mobile-tail-v1-lock-1, html):is(#mr-question-filter-mobile-tail-v1-lock-2, html):is(#mr-question-filter-mobile-tail-v1-lock-3, html):is(#mr-question-filter-mobile-tail-v1-lock-4, html) body.questions-page .questions-container .search-box.search-box {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    :is(#mr-question-filter-mobile-tail-v1, html):is(#mr-question-filter-mobile-tail-v1-lock-1, html):is(#mr-question-filter-mobile-tail-v1-lock-2, html):is(#mr-question-filter-mobile-tail-v1-lock-3, html):is(#mr-question-filter-mobile-tail-v1-lock-4, html) body.questions-page .questions-container #questionFilterBtn#questionFilterBtn#questionFilterBtn#questionFilterBtn {
        grid-column: 1 !important;
    }
}

/* Avatar surfaces stay borderless everywhere. */
:is(#mr-avatar-borderless-v1, html):is(#mr-avatar-borderless-v1-lock-1, html):is(#mr-avatar-borderless-v1-lock-2, html):is(#mr-avatar-borderless-v1-lock-3, html) body :is(
    .avatar,
    .navbar-v2-avatar,
    .dropdown-header-avatar,
    .profile-avatar,
    .avatar-large,
    .member-avatar,
    .duty-member-avatar,
    .avatar > img,
    .navbar-v2-avatar > img,
    .dropdown-header-avatar > img,
    .profile-avatar > img,
    .avatar-large > img,
    .member-avatar > img,
    .duty-member-avatar > img
) {
    border: 0 !important;
}

/* The question-jump card follows its content instead of reserving an empty
 * lower region. The live hint only occupies space when it has text. */
:is(#mr-home-jump-compact-v1, html):is(#mr-home-jump-compact-v1-lock-1, html):is(#mr-home-jump-compact-v1-lock-2, html) body.landing-page .home-stack--primary > .home-panel--wide.home-panel {
    min-height: 0 !important;
    padding-bottom: var(--mr-space-5) !important;
}

:is(#mr-home-jump-compact-v1, html):is(#mr-home-jump-compact-v1-lock-1, html):is(#mr-home-jump-compact-v1-lock-2, html) body.landing-page .home-stack--primary > .home-panel--wide .home-hint:empty {
    display: none !important;
}

/* The welcome overview uses one clear radius hierarchy: the rail frames the
 * group, while the three metrics are related inset surfaces. Keeping their
 * radius at a little over half of the outer radius avoids the old visual jump
 * from a broad container curve to nearly square inner tiles. */
html body.landing-page:is(body):is(body) :is(.home-hero__rail):is(.home-hero__rail):is(.home-hero__rail):is(.home-hero__rail) {
    padding: 14px !important;
    gap: 10px !important;
    border-radius: 24px !important;
}

html body.landing-page:is(body):is(body) :is(.home-hero__metric):is(.home-hero__metric):is(.home-hero__metric):is(.home-hero__metric) {
    min-height: 100px !important;
    height: 100px !important;
    padding: 16px !important;
    border-radius: 14px !important;
}

html body.landing-page:is(body):is(body) :is(.home-hero__links):is(.home-hero__links):is(.home-hero__links) {
    gap: 8px !important;
}

@media (max-width: 640px) {
    html body.landing-page:is(body):is(body) :is(.home-hero__rail):is(.home-hero__rail):is(.home-hero__rail):is(.home-hero__rail) {
        padding: 12px !important;
        gap: 8px !important;
        border-radius: 20px !important;
    }

    html body.landing-page:is(body):is(body) :is(.home-hero__metric):is(.home-hero__metric):is(.home-hero__metric):is(.home-hero__metric) {
        min-height: 92px !important;
        height: 92px !important;
        padding: 14px !important;
        border-radius: 12px !important;
    }
}

/* Final homepage lookup field contract, after all broad legacy input rules. */
:is(#mr-home-jump-auto-final-v1, html):is(#mr-home-jump-auto-final-v2, html):is(#mr-home-jump-auto-final-v3, html):is(#mr-home-jump-auto-final-v4, html) body.landing-page :is(.home-jump):is(.home-jump):is(.home-jump):is(.home-jump) input.home-input.home-input.home-input.home-input {
    min-height: 50px !important;
    height: 50px !important;
    padding: 0 46px 0 48px !important;
    border: 0 !important;
    border-radius: inherit !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:is(#mr-home-jump-auto-final-v1, html):is(#mr-home-jump-auto-final-v2, html):is(#mr-home-jump-auto-final-v3, html):is(#mr-home-jump-auto-final-v4, html) body.landing-page :is(.home-jump__icon):is(.home-jump__icon):is(.home-jump__icon) {
    display: block !important;
    position: absolute !important;
    z-index: 2 !important;
    top: 50% !important;
    left: 17px !important;
    width: 15px !important;
    height: 15px !important;
    margin-top: -9px !important;
    border: 2px solid var(--ds-t-ink-muted) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

:is(#mr-home-jump-auto-final-v1, html):is(#mr-home-jump-auto-final-v2, html):is(#mr-home-jump-auto-final-v3, html):is(#mr-home-jump-auto-final-v4, html) body.landing-page :is(.home-jump__icon):is(.home-jump__icon):is(.home-jump__icon)::after {
    content: "" !important;
    position: absolute !important;
    right: -5px !important;
    bottom: -3px !important;
    width: 7px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: var(--ds-t-ink-muted) !important;
    transform: rotate(45deg) !important;
    transform-origin: center !important;
}

/* A correct daily-challenge result is affirmative in both icon and copy.
 * Keep this local to the result box so warning/error result styles remain
 * semantically distinct. */
:is(#mr-daily-result-correct-v1, html):is(#mr-daily-result-correct-v2, html):is(#mr-daily-result-correct-v3, html):is(#mr-daily-result-correct-v4, html) body #challengeResult.challenge-result.correct {
    color: #16834a !important;
}

:is(#mr-daily-result-correct-v1, html):is(#mr-daily-result-correct-v2, html):is(#mr-daily-result-correct-v3, html):is(#mr-daily-result-correct-v4, html) body #challengeResult.challenge-result.correct > .challenge-result__icon {
    color: #16834a !important;
    font-size: 1em !important;
    font-weight: 900 !important;
}

/* The avatar dialog's close control is an unframed glyph, so it does not
 * inherit the shared circular utility-button surface. */
:is(#mr-avatar-modal-close-v1, html):is(#mr-avatar-modal-close-v2, html):is(#mr-avatar-modal-close-v3, html) body #changeAvatarModal #closeAvatarModal.modal-close {
    display: inline-grid !important;
    place-items: center !important;
    inline-size: 40px !important;
    block-size: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ds-t-ink, #182235) !important;
    box-shadow: none !important;
    transform: none !important;
}

:is(#mr-avatar-modal-close-v1, html):is(#mr-avatar-modal-close-v2, html):is(#mr-avatar-modal-close-v3, html) body #changeAvatarModal #closeAvatarModal.modal-close:is(:hover, :active, :focus-visible) {
    border: 0 !important;
    background: transparent !important;
    color: var(--ds-t-ink, #182235) !important;
    box-shadow: none !important;
    transform: none !important;
}

:is(#mr-avatar-modal-close-v1, html):is(#mr-avatar-modal-close-v2, html):is(#mr-avatar-modal-close-v3, html) body #changeAvatarModal #closeAvatarModal.modal-close:focus-visible {
    outline: 2px solid var(--ds-t-ink, #182235) !important;
    outline-offset: 2px !important;
}

:is(#mr-avatar-modal-close-v1, html):is(#mr-avatar-modal-close-v2, html):is(#mr-avatar-modal-close-v3, html) body #changeAvatarModal #closeAvatarModal.modal-close > i {
    font-size: 20px !important;
    line-height: 1 !important;
}

/* Shared Markdown and mathematics typography. Every rendered question,
 * answer, discussion and editor preview uses the same document rhythm. */
:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html):is(#mr-markdown-v2-lock-2, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview,
    .home-markdown-preview
) {
    min-width: 0 !important;
    color: var(--ds-t-ink) !important;
    font-family: var(--ds-font) !important;
    font-size: 16px !important;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures;
    line-height: 1.78 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-wrap: pretty;
}

/* Legacy global typography assigns 14px/1.45 directly to p and li. Let
 * document children inherit the shared reading rhythm instead, while the
 * dedicated heading, code, table and formula rules below keep their own
 * metrics. */
:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview,
    .home-markdown-preview
) :is(p, ul, ol, li, blockquote, dd, dt, figcaption, th, td) {
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: 0 !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview,
    .home-markdown-preview
) > :first-child {
    margin-top: 0 !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview,
    .home-markdown-preview
) > :last-child {
    margin-bottom: 0 !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview,
    .home-markdown-preview
) :is(p, ul, ol, pre, blockquote, .markdown-table-scroll) {
    margin-block: 0 1.05em !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview,
    .home-markdown-preview
) p > br {
    display: block;
    content: "";
    margin-top: 0.26em;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview,
    .home-markdown-preview
) :is(h1, h2, h3, h4, h5, h6) {
    margin: 1.7em 0 0.62em !important;
    color: var(--ds-t-ink) !important;
    font-family: var(--ds-font) !important;
    font-weight: 680 !important;
    line-height: 1.34 !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview
) h1 {
    font-size: 1.48em !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview
) h2 {
    font-size: 1.28em !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview
) :is(h3, h4, h5, h6) {
    font-size: 1.08em !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview,
    .home-markdown-preview
) :is(ul, ol) {
    padding-inline-start: 1.55em !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview,
    .home-markdown-preview
) li {
    margin: 0 !important;
    padding: 0.16em 0 0.16em 0.22em !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview,
    .home-markdown-preview
) li + li {
    margin-top: 0.24em !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview,
    .home-markdown-preview
) li::marker {
    color: color-mix(in srgb, var(--ds-t-ink) 58%, transparent);
    font-variant-numeric: tabular-nums;
    font-weight: 620;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview,
    .home-markdown-preview
) blockquote {
    padding: 0.12em 0 0.12em 1.1em !important;
    border: 0 !important;
    border-left: 2px solid color-mix(in srgb, var(--ds-t-ink) 34%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ds-t-ink-muted) !important;
    box-shadow: none !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview,
    .home-markdown-preview
) blockquote > :last-child {
    margin-bottom: 0 !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview,
    .home-markdown-preview
) a {
    color: var(--ds-t-ink) !important;
    font-weight: 580 !important;
    text-decoration-line: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 0.2em !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview,
    .home-markdown-preview
) :not(pre) > code {
    padding: 0.16em 0.38em !important;
    border: 1px solid var(--ds-t-hairline-soft) !important;
    border-radius: 4px !important;
    background: var(--ds-t-surface-soft) !important;
    color: var(--ds-t-ink) !important;
    font-family: var(--ds-font-mono) !important;
    font-size: 0.88em !important;
    line-height: 1.45 !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview,
    .home-markdown-preview
) pre {
    max-width: 100% !important;
    padding: 17px 19px !important;
    overflow: auto !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--ds-t-inverse-canvas, #111111) !important;
    color: var(--ds-t-inverse-ink, #ffffff) !important;
    font-family: var(--ds-font-mono) !important;
    font-size: 0.9em !important;
    line-height: 1.64 !important;
    white-space: pre !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    scrollbar-width: thin;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview,
    .home-markdown-preview
) pre code {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .markdown-table-scroll {
    --markdown-table-grid: color-mix(in srgb, var(--ds-t-ink) 16%, transparent);
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    border: 1px solid var(--markdown-table-grid) !important;
    border-radius: 0 !important;
    background: transparent !important;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .markdown-table-scroll table {
    width: max-content !important;
    min-width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-collapse: collapse !important;
    background: transparent !important;
    font-size: 0.94em !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .markdown-table-scroll :is(th, td) {
    min-width: 8em;
    padding: 12px 15px !important;
    border: 0 !important;
    border-inline-end: 1px solid var(--markdown-table-grid) !important;
    border-bottom: 1px solid var(--markdown-table-grid) !important;
    border-radius: 0 !important;
    color: var(--ds-t-ink) !important;
    text-align: start !important;
    vertical-align: middle !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .markdown-table-scroll th {
    background: var(--ds-t-surface-soft) !important;
    font-weight: 680 !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .markdown-table-scroll tr > :last-child {
    border-inline-end: 0 !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .markdown-table-scroll tr:last-child td {
    border-bottom: 0 !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
    .markdown-rendered,
    .question-content-text,
    .forum-markdown-body,
    .md-preview,
    .home-markdown-preview
) hr {
    height: 1px !important;
    margin: 1.8em 0 !important;
    border: 0 !important;
    background: var(--ds-t-hairline) !important;
}

/* Formulae behave as typography, not nested cards. Inline math follows the
 * surrounding baseline; display math gets air, two quiet rules and local
 * horizontal scrolling for narrow screens. */
:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html):is(#mr-markdown-v2-lock-2, html) body .katex {
    color: currentColor !important;
    font-family: KaTeX_Main, "Times New Roman", serif !important;
    font-size: 1.1em !important;
    font-style: normal;
    font-weight: 400;
    line-height: 1.38 !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex .katex-html,
:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex .katex-html * {
    font-family: KaTeX_Main, "Times New Roman", serif !important;
}

/* KaTeX uses `.overlay` for the contour around multi-integral operators.
 * Keep it separate from the app's modal-overlay scrim. */
:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex .overlay {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* The global UI font safety net intentionally normalizes every text-bearing
 * span. Restore KaTeX's Computer Modern family map after that rule so
 * variables, operators, delimiters and specialist alphabets keep genuine
 * mathematical metrics instead of inheriting the interface sans. */
:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex :is(.textrm, .mainrm) {
    font-family: KaTeX_Main, "Times New Roman", serif !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex .mathnormal {
    font-family: KaTeX_Math, "Times New Roman", serif !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex .mathit {
    font-family: KaTeX_Main, "Times New Roman", serif !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex .mathbf {
    font-family: KaTeX_Main, "Times New Roman", serif !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex .boldsymbol {
    font-family: KaTeX_Math, "Times New Roman", serif !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex :is(.amsrm, .mathbb, .textbb) {
    font-family: KaTeX_AMS, "Times New Roman", serif !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex .mathcal {
    font-family: KaTeX_Caligraphic, "Times New Roman", serif !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex :is(.mathfrak, .textfrak, .mathboldfrak, .textboldfrak) {
    font-family: KaTeX_Fraktur, "Times New Roman", serif !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex :is(.mathtt, .texttt) {
    font-family: KaTeX_Typewriter, monospace !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex :is(.mathscr, .textscr) {
    font-family: KaTeX_Script, "Times New Roman", serif !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex :is(.mathsf, .textsf, .mathboldsf, .textboldsf, .mathitsf, .mathsfit, .textitsf) {
    font-family: KaTeX_SansSerif, sans-serif !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex .delimsizing.size1,
:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex .delimsizing.mult .delim-size1 > span,
:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex .op-symbol.small-op {
    font-family: KaTeX_Size1, "Times New Roman", serif !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex .delimsizing.size2,
:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex .op-symbol.large-op {
    font-family: KaTeX_Size2, "Times New Roman", serif !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex .delimsizing.size3 {
    font-family: KaTeX_Size3, "Times New Roman", serif !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex .delimsizing.size4,
:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex .delimsizing.mult .delim-size4 > span {
    font-family: KaTeX_Size4, "Times New Roman", serif !important;
}

/* MathRealm does not display equation numbering. KaTeX emits `\tag{...}` as
 * an internal `.tag`; suppress that node without touching authored boxes. */
:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html):is(#mr-markdown-v2-lock-2, html) body .katex .tag {
    display: none !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html):is(#mr-markdown-v2-lock-2, html) body .katex-display {
    width: 100% !important;
    max-width: 100% !important;
    margin: 1.55em 0 !important;
    padding: 1.08em clamp(10px, 2.4vw, 24px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-block: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ds-t-ink) 28%, transparent) transparent;
    overscroll-behavior-inline: contain;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html):is(#mr-markdown-v2-lock-2, html) body .katex-display > .katex {
    display: block !important;
    width: max-content !important;
    min-width: min-content !important;
    margin-inline: auto !important;
    padding-inline: 3px !important;
    font-size: 1.42em !important;
    text-align: center !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(.markdown-table-scroll, pre, .katex-display):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ds-t-ink) 44%, transparent) !important;
    outline-offset: 3px !important;
}

/* The authoring surface is spacious enough to judge the final typesetting. */
:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body:is(.question-upload-page, .question-edit-page) .editor-card .md-input-shell #content#content.md-textarea {
    min-height: 360px !important;
    padding: 22px 24px !important;
    font-family: var(--ds-font-mono) !important;
    font-size: 15px !important;
    line-height: 1.72 !important;
    letter-spacing: 0 !important;
    tab-size: 2;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body:is(.question-upload-page, .question-edit-page) .editor-card .md-preview-shell .md-preview {
    min-height: 360px !important;
    padding: clamp(22px, 3vw, 32px) !important;
    font-size: 16px !important;
    line-height: 1.78 !important;
}

/* The homepage keeps a concise preview, but renders its real Markdown and
 * LaTeX instead of flattening formulae into approximation text. */
:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html):is(#mr-markdown-v2-lock-2, html) body.landing-page .home-challenge__preview.home-markdown-preview {
    min-height: 0 !important;
    max-height: 12rem !important;
    overflow: hidden !important;
    color: var(--surface-muted, var(--ds-t-ink-muted)) !important;
    font-size: 14px !important;
    line-height: 1.72 !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html):is(#mr-markdown-v2-lock-2, html) body.landing-page .home-markdown-preview :is(h1, h2, h3, h4, h5, h6) {
    margin-block: 0.9em 0.35em !important;
    font-size: 1em !important;
    line-height: 1.4 !important;
}

:is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html):is(#mr-markdown-v2-lock-2, html) body.landing-page .home-markdown-preview .katex-display {
    margin-block: 0.7em !important;
    padding-block: 0.72em !important;
}

@media (max-width: 640px) {
    :is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body :is(
        .markdown-rendered,
        .question-content-text,
        .forum-markdown-body,
        .md-preview,
        .home-markdown-preview
    ) {
        line-height: 1.74 !important;
    }

    :is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body .katex-display {
        margin-block: 1.3em !important;
        padding: 0.92em 4px !important;
    }

    :is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body:is(.question-upload-page, .question-edit-page) .editor-card .md-input-shell #content#content.md-textarea,
    :is(#mr-markdown-v2, html):is(#mr-markdown-v2-lock-1, html) body:is(.question-upload-page, .question-edit-page) .editor-card .md-preview-shell .md-preview {
        min-height: 300px !important;
        padding: 20px !important;
    }
}