/* =====================================================================
   TopsOJ — Account pages  (CONSTRUCTIVIST)
   Auth (login/register/password flows), profile, user info, edit
   profile, settings, and 2FA. Consumes the design tokens defined in
   style.css (:root and .dark): --brand, --surface, --sp-*, --structure,
   --border-*, --shadow-e*/--shadow-hard*, --fs-*, --text-*, --focus-ring.

   Geometry is hard-edged: square corners (all --radius-* resolve to 0
   globally), thick near-black "ink" borders, hard offset shadows, solid
   maroon/ink/cream color blocks, oversized display type. Palette is
   unchanged — only the geometry changes. Works in light AND dark.
   ===================================================================== */

:root {
    /* Brand tints local to account surfaces; remapped for dark below. */
    --acct-rose: #F2CFD0;
    --acct-soft: #fff9f7;
}

body.dark {
    --acct-rose: var(--dark-border);
    --acct-soft: var(--dark-surface-2);
}

/* ---------------------------------------------------------------------
   Identity banner (shared by profile + user info)
   Replaces the off-brand blue .profile-banner treatment.
   --------------------------------------------------------------------- */
.account-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-5);
    padding: var(--sp-6);
    background: var(--brand);
    color: #f4f1ea;
    border: var(--border-thick) solid var(--structure);
    margin-bottom: var(--sp-6);
    box-shadow: var(--shadow-hard);
}

.account-banner__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.account-banner__title {
    font-family: inherit;
    font-weight: var(--fw-display);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    color: #f4f1ea;
}

.account-banner__subtitle {
    font-size: var(--fs-75);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    margin-top: var(--sp-1);
    color: var(--rose, #F2CFD0);
}

/* Meta becomes a stat block: an ink-bordered cream tile pinned to the
   masthead's trailing edge, the streak count as a display number. */
.account-banner__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 2px;
    padding: var(--sp-3) var(--sp-4);
    background: #f4f1ea;
    border: var(--border-thick) solid var(--structure);
    font-size: var(--fs-75);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand);
}

.account-banner__meta strong {
    font-weight: var(--fw-display);
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    line-height: 0.9;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--structure);
}

.account-banner__hint {
    color: rgba(28, 26, 23, 0.7);
}

.account-banner--compact {
    margin-bottom: var(--sp-4);
    padding: var(--sp-5) var(--sp-6);
}

body.dark .account-banner {
    background: var(--brand);
    border-color: var(--structure);
}

body.dark .account-banner__meta {
    /* keep the cream stat tile bright against the dark page */
    background: #f4f1ea;
    border-color: var(--structure);
}

@media (max-width: 575.98px) {
    .account-banner__meta {
        align-items: flex-start;
        text-align: left;
    }
}

/* ---------------------------------------------------------------------
   Auth card (login, register, password flows, 2FA)
   --------------------------------------------------------------------- */
.auth-wrap {
    display: flex;
    justify-content: center;
    padding: var(--sp-8) var(--sp-4) var(--sp-12);
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: var(--border-thick) solid var(--structure);
    border-top: var(--border-bold) solid var(--brand);
    box-shadow: var(--shadow-e3);
    padding: var(--sp-8) var(--sp-6);
}

/* Eyebrow kicker — small uppercase block led by a solid maroon square,
   mirrors the global .con-eyebrow vocabulary without touching markup. */
.auth-card h1::before {
    content: "TopsOJ";
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    font-size: var(--fs-75);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--brand);
    margin-bottom: var(--sp-2);
}

.auth-card h1 {
    font-weight: var(--fw-display);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0 0 var(--sp-2);
    text-align: center;
    color: var(--text-strong);
}

.auth-sub {
    text-align: center;
    font-size: var(--fs-875);
    color: var(--text-muted);
    margin: 0 0 var(--sp-6);
}

.auth-card .form-floating {
    margin-bottom: var(--sp-3);
}

.auth-card .form-floating .form-control {
    margin-bottom: 0 !important;
    min-height: 56px;
    border: var(--border-thick) solid var(--structure);
}

.auth-card .form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

.auth-card .form-control:focus-visible {
    outline: none;
}

/* Primary action: .btn-brand from style.css supplies color/state;
   this only handles sizing so there is exactly one obvious action. */
.auth-submit {
    width: 100%;
    min-height: 48px;
    font-weight: 600;
    margin-top: var(--sp-1);
}

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* Quiet secondary actions (forgot password / register) */
.auth-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-top: var(--sp-4);
    font-size: var(--fs-875);
}

.auth-link {
    color: var(--text-muted);
    text-decoration: none;
    padding: var(--sp-1) var(--sp-2);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.auth-link:hover {
    color: var(--brand);
    text-decoration: underline;
}

.auth-link:focus-visible {
    outline: none;
    color: var(--brand);
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

.auth-links__sep {
    color: var(--text-muted);
    user-select: none;
}

.auth-captcha {
    margin-top: var(--sp-4);
    display: flex;
    justify-content: center;
}

.auth-card hr {
    border: 0;
    border-top: var(--border-heavy) solid var(--structure);
    margin: var(--sp-5) 0 0;
    opacity: 1;
}

.auth-note {
    margin-top: var(--sp-5);
    margin-bottom: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.auth-card .alert {
    border: var(--border-thick) solid var(--structure);
}

body.dark .auth-card {
    box-shadow: var(--shadow-e3);
}

body.dark .auth-card .form-control:focus {
    border-color: rgba(123, 215, 255, 0.65);
}

body.dark .auth-link:hover,
body.dark .auth-link:focus-visible {
    color: var(--dark-link);
}

@media (max-width: 575.98px) {
    .auth-wrap {
        padding-top: var(--sp-5);
    }
    .auth-card {
        padding: var(--sp-6) var(--sp-5);
    }
}

/* ---------------------------------------------------------------------
   Profile page (.pf-*)
   --------------------------------------------------------------------- */
.profileDiv {
    border: var(--border-thick) solid var(--structure);
    padding: clamp(20px, 4vw, 32px);
    background: var(--surface);
    box-shadow: var(--shadow-hard);
    overflow-wrap: break-word;
}

.pf-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin: var(--sp-2) 0 var(--sp-1);
}

.pf-heading h1 {
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    font-weight: var(--fw-display);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1;
    color: var(--text-strong);
}

.pf-edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: var(--border-thick) solid var(--structure);
    transition: background-color 0.15s ease;
}

.pf-edit-link:hover,
.pf-edit-link:focus-visible {
    background: var(--acct-soft);
    outline: none;
}

.pf-edit-link:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

.pf-edit-link img {
    width: 26px;
    height: 26px;
    margin: 0 !important;
}

.pf-divider {
    border: none;
    border-top: var(--border-bold) solid var(--structure);
    margin: var(--sp-5) 0;
}

/* Action buttons */
.pf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}

.pf-action {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: 0 var(--sp-5);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    border: var(--border-thick) solid var(--structure);
    box-shadow: var(--shadow-hard);
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

/* Press into the hard shadow on hover (matches the global .btn behavior). */
.pf-action:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--structure);
}

.pf-action svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.pf-action--primary {
    background: var(--brand);
    color: #f4f1ea;
}

.pf-action--primary:hover,
.pf-action--primary:focus-visible {
    background: var(--brand-dark);
    color: #f4f1ea;
    outline: none;
}

.pf-action--ghost {
    background: var(--surface);
    color: var(--brand);
}

.pf-action--ghost:hover,
.pf-action--ghost:focus-visible {
    background: var(--acct-rose);
    color: var(--brand-dark);
    outline: none;
}

.pf-action:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--focus-ring), var(--shadow-hard);
}

/* Collapsible sections (admin info / basic stats) */
.pf-section {
    margin-bottom: var(--sp-3);
}

.pf-section > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    min-height: 44px;
    background: var(--acct-soft);
    border: var(--border-thick) solid var(--structure);
    border-left: var(--border-bold) solid var(--brand);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-strong);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pf-section > summary::-webkit-details-marker {
    display: none;
}

.pf-section > summary:hover,
.pf-section > summary:focus-visible {
    background: var(--acct-rose);
    outline: none;
}

.pf-section > summary:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

.pf-section > summary .pf-chevron {
    margin-left: auto;
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
    color: var(--text-muted);
}

.pf-section[open] > summary .pf-chevron {
    transform: rotate(180deg);
}

.pf-section[open] > summary {
    background: var(--acct-rose);
}

.pf-section-body {
    border: var(--border-thick) solid var(--structure);
    border-top: none;
    padding: var(--sp-4);
}

/* Stats grid */
.pf-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-3);
}

.pf-stat {
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: var(--border-thick) solid var(--structure);
    border-left: var(--border-bold) solid var(--brand);
}

.pf-stat__label {
    font-size: var(--fs-75);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    line-height: 1.3;
}

.pf-stat__value {
    font-size: 1.5rem;
    font-weight: var(--fw-display);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text-strong);
}

/* Admin info rows */
.pf-info-row {
    display: flex;
    gap: var(--sp-2);
    padding: 6px 0;
    font-size: 0.9375rem;
}

.pf-info-row + .pf-info-row {
    border-top: var(--border-thin) solid var(--structure);
}

.pf-info-row b {
    min-width: 90px;
    color: var(--text-muted);
    font-weight: 600;
}

.pf-orgs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-2) 0;
}

.pf-org {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 var(--sp-4);
    background: var(--brand);
    border: var(--border-thick) solid var(--structure);
    color: #f4f1ea;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.pf-org:hover,
.pf-org:focus-visible {
    background: var(--brand-dark);
    color: #f4f1ea;
    outline: none;
}

.pf-org:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

/* Empty state for user-written bio */
.pf-bio-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-1);
    padding: var(--sp-6) var(--sp-4);
    color: var(--text-muted);
    background: var(--acct-soft);
    border: var(--border-thick) dashed var(--structure);
}

/* Profile feature sections (Recent Activity, Solved by Category, Solved Problems) */
.pf-feat {
    margin-bottom: var(--sp-4);
    border: var(--border-thick) solid var(--structure);
    background: var(--surface);
    box-shadow: var(--shadow-hard);
    overflow: hidden;
}

.pf-feat > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 14px 18px;
    min-height: 44px;
    font-weight: 700;
    font-size: 1.0625rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-strong);
    background: var(--acct-soft);
    border-left: var(--border-bold) solid var(--brand);
    transition: background-color 0.15s ease;
}

.pf-feat > summary::-webkit-details-marker {
    display: none;
}

.pf-feat > summary:hover {
    background: var(--acct-rose);
}

.pf-feat > summary:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--focus-ring);
}

.pf-feat__title {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.pf-feat__count {
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--brand);
    background: var(--acct-rose);
    border: var(--border-thin) solid var(--structure);
    padding: 2px 10px;
}

.pf-feat__caret {
    margin-left: auto;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.pf-feat[open] > summary {
    background: var(--acct-rose);
    border-bottom: var(--border-thick) solid var(--structure);
}

.pf-feat[open] > summary .pf-feat__caret {
    transform: rotate(180deg);
}

.pf-feat__body {
    padding: var(--sp-4) 18px;
}

/* Activity list */
.pf-activity {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.pf-activity__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) 14px;
    min-height: 44px;
    border: var(--border-thick) solid var(--structure);
    background: var(--acct-soft);
    transition: background-color 0.15s ease;
}

.pf-activity__item:hover {
    background: var(--acct-rose);
}

.pf-activity__main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    min-width: 0;
}

.pf-activity__check {
    color: var(--brand);
    font-weight: 700;
}

.pf-activity__name {
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
}

.pf-activity__name:hover,
.pf-activity__name:focus-visible {
    color: var(--brand-dark);
    text-decoration: underline;
}

.pf-activity__cat {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.pf-activity__meta {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-left: auto;
    text-align: right;
}

.pf-points-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #f4f1ea;
    background: var(--brand);
    border: var(--border-thin) solid var(--structure);
    padding: 3px 12px;
    white-space: nowrap;
}

.pf-activity__date {
    font-size: 0.8125rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Feature tables */
.pf-table-scroll {
    width: 100%;
    overflow-x: auto;
    border: var(--border-thick) solid var(--structure);
    -webkit-overflow-scrolling: touch;
}

.pf-table-scroll--tall {
    max-height: 480px;
    overflow-y: auto;
}

.pf-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.9375rem;
    color: var(--text-strong);
}

.pf-table th,
.pf-table td {
    padding: var(--sp-3) 14px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--surface-border);
}

.pf-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--brand);
    color: #f4f1ea;
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.pf-table tbody tr:nth-child(even) {
    background: var(--acct-soft);
}

.pf-table tbody tr:hover {
    background: var(--acct-rose);
}

.pf-table tbody td a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}

.pf-table tbody td a:hover,
.pf-table tbody td a:focus-visible {
    color: var(--brand-dark);
    text-decoration: underline;
}

.pf-table tfoot td {
    font-weight: 700;
    background: var(--acct-soft);
    border-top: var(--border-heavy) solid var(--structure);
}

/* Column widths for the category table (was inline) */
.pf-table--cats th:nth-child(1) { width: 34%; }
.pf-table--cats th:nth-child(2) { width: 18%; }
.pf-table--cats th:nth-child(3) { width: 18%; }
.pf-table--cats th:nth-child(4) { width: 30%; }

.pf-private-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    font-size: var(--fs-75);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--acct-soft);
    border: var(--border-thin) solid var(--structure);
    padding: 2px 9px;
}

/* Share-of-points progress */
.pf-share {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 120px;
}

.pf-share__track {
    flex: 1 1 auto;
    min-width: 60px;
    height: 12px;
    border: var(--border-thin) solid var(--structure);
    background: var(--acct-rose);
    overflow: hidden;
}

.pf-share__bar {
    height: 100%;
    background: var(--brand);
}

.pf-share__pct {
    font-size: 0.8125rem;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 42px;
    text-align: right;
}

/* Empty states */
.pf-feat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-1);
    padding: var(--sp-6) var(--sp-4);
    color: var(--text-muted);
    background: var(--acct-soft);
    border: var(--border-thick) dashed var(--structure);
}

/* Profile: dark-mode specifics that semantic tokens don't cover */
.dark .pf-section > summary:hover,
.dark .pf-section > summary:focus-visible,
.dark .pf-section[open] > summary,
.dark .pf-feat > summary:hover,
.dark .pf-feat[open] > summary {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

.dark .pf-section[open] > summary .pf-chevron,
.dark .pf-section > summary:hover .pf-chevron,
.dark .pf-feat[open] > summary .pf-feat__caret,
.dark .pf-feat > summary:hover .pf-feat__caret {
    color: #fff;
}

.dark .pf-feat__count {
    color: #fff;
    background: var(--brand-dark);
}

.dark .pf-stat {
    border-left-color: var(--brand-dark);
}

.dark .pf-action--ghost {
    background: var(--dark-surface-2);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

.dark .pf-action--ghost:hover,
.dark .pf-action--ghost:focus-visible {
    background: var(--brand-dark);
    color: #fff;
    border-color: var(--brand-dark);
}

.dark .pf-activity__name,
.dark .pf-activity__check,
.dark .pf-table tbody td a {
    color: var(--rose, #F2CFD0);
}

.dark .pf-activity__name:hover,
.dark .pf-activity__name:focus-visible,
.dark .pf-table tbody td a:hover,
.dark .pf-table tbody td a:focus-visible {
    color: #fff;
}

.dark .pf-table thead th {
    background: var(--brand-dark);
}

.dark .pf-table tbody tr:hover {
    background: var(--brand-dark);
    color: #fff;
}

.dark .pf-share__track {
    background: var(--dark-border);
}

.dark .pf-share__bar {
    background: var(--rose, #F2CFD0);
}

.dark .pf-private-badge {
    color: var(--dark-text);
    background: var(--dark-border);
}

@media (max-width: 575.98px) {
    .pf-action {
        width: 100%;
        justify-content: center;
    }
    .pf-stats {
        grid-template-columns: 1fr;
    }
    .pf-activity__meta {
        margin-left: 0;
    }
}

/* ---------------------------------------------------------------------
   User info page (.ui-*)
   --------------------------------------------------------------------- */
.ui-heading {
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    font-weight: var(--fw-display);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1;
    margin: var(--sp-2) 0 var(--sp-1);
    color: var(--text-strong);
}

.ui-divider {
    border: none;
    border-top: var(--border-bold) solid var(--structure);
    margin: var(--sp-4) 0 var(--sp-5);
}

.ui-back {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: 0 var(--sp-5);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    background: var(--surface);
    color: var(--brand);
    border: var(--border-thick) solid var(--structure);
    box-shadow: var(--shadow-hard);
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ui-back:hover,
.ui-back:focus-visible {
    background: var(--acct-rose);
    color: var(--brand-dark);
    outline: none;
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--structure);
}

.ui-back:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--focus-ring), 2px 2px 0 var(--structure);
}

.ui-back svg {
    width: 18px;
    height: 18px;
}

.cardProfileDiv {
    border: var(--border-thick) solid var(--structure);
    box-shadow: var(--shadow-hard);
    padding: clamp(18px, 3vw, 28px);
}

.card-profile,
.full-card-profie {
    border: var(--border-thick) solid var(--structure);
    background: var(--acct-soft);
    box-shadow: var(--shadow-e1);
}

.ui-card-title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-weight: 700;
    font-size: 1.0625rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: var(--sp-3);
    color: var(--text-strong);
}

.ui-card-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--acct-rose);
    border: var(--border-thick) solid var(--structure);
    color: var(--brand);
}

.ui-card-icon svg {
    width: 18px;
    height: 18px;
}

.ui-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: var(--border-thin) solid var(--structure);
    margin-left: auto;
    transition: background-color 0.15s ease;
}

.ui-toggle:hover,
.ui-toggle:focus-visible {
    background: var(--acct-rose);
    outline: none;
}

.ui-toggle:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

.ui-stat-line {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding: 5px 0;
    line-height: 1.4;
}

/* Rankings */
.ui-rank-chip {
    display: inline-block;
    font-weight: 700;
    font-size: var(--fs-125);
    padding: var(--sp-1) var(--sp-2);
    border: var(--border-thick) solid var(--structure);
}

.ui-medal {
    width: 24px;
    display: inline;
    margin-bottom: 5px;
}

/* Percentile donuts (keeps the global .progress circular-chart contract) */
.ui-donuts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
}

.ui-donut {
    align-items: center;
}

.ui-donut__label {
    left: 20%;
    position: absolute;
    text-align: center;
}

.ui-donut__cap {
    font-size: 0.9375rem;
}

.ui-donut .ui-donut__arc {
    border-color: var(--brand);
}

/* Dark-mode specifics for user info */
.dark .card-profile,
.dark .full-card-profie {
    background: var(--dark-surface-2);
    box-shadow: none;
}

.dark .ui-back {
    background: var(--dark-surface-2);
    color: var(--dark-text);
}

.dark .ui-back:hover,
.dark .ui-back:focus-visible,
.dark .ui-toggle:hover,
.dark .ui-toggle:focus-visible {
    background: var(--brand-dark);
    color: #fff;
}

.dark .ui-card-icon {
    background: var(--brand-dark);
    color: #fff;
}

.dark .ui-donut .ui-donut__arc {
    border-color: var(--rose, #F2CFD0);
}

.dark .ui-donut.progress::after {
    border-color: var(--dark-border);
}

/* ---------------------------------------------------------------------
   Edit profile page (.ep-*)
   --------------------------------------------------------------------- */
.ep-shell {
    max-width: 1080px;
}

.ep-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    justify-content: space-between;
    margin-bottom: var(--sp-2);
}

.ep-header h1 {
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    font-weight: var(--fw-display);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1;
    margin: 0;
    color: var(--text-strong);
}

.ep-header p {
    color: var(--text-muted);
    margin: var(--sp-1) 0 0;
    font-size: 0.9375rem;
}

.ep-card {
    border: var(--border-thick) solid var(--structure);
    background: var(--surface);
    box-shadow: var(--shadow-hard);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
}

.ep-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

@media (min-width: 768px) {
    .ep-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.ep-pane-label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand);
    margin-bottom: var(--sp-3);
}

.ep-pane-label .ep-dot {
    width: 9px;
    height: 9px;
    background: var(--brand);
}

.ep-surface {
    border: var(--border-thick) solid var(--structure);
    border-left: var(--border-bold) solid var(--brand);
    background: var(--acct-soft);
    padding: var(--sp-4);
    min-height: 220px;
    overflow-wrap: break-word;
}

#profile_md_raw {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    white-space: pre-wrap;
    color: var(--text-strong);
}

#profile_html p,
#profile_html h1,
#profile_html h2,
#profile_html h3 {
    overflow-wrap: break-word;
}

.ep-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: 0 var(--sp-5);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: var(--border-thick) solid var(--structure);
    box-shadow: var(--shadow-hard);
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ep-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--structure);
}

.ep-btn svg {
    width: 18px;
    height: 18px;
}

.ep-btn-open {
    background: var(--surface);
    color: var(--brand);
}

.ep-btn-open:hover,
.ep-btn-open:focus-visible {
    background: var(--acct-rose);
    color: var(--brand-dark);
    outline: none;
}

.ep-btn-submit {
    background: var(--brand);
    color: #f4f1ea;
}

.ep-btn-submit:hover,
.ep-btn-submit:focus-visible {
    background: var(--brand-dark);
    color: #f4f1ea;
    outline: none;
}

.ep-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--focus-ring), var(--shadow-hard);
}

.ep-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
}

.ep-hint {
    color: var(--text-muted);
    font-size: var(--fs-875);
}

.dark .ep-btn-open {
    background: var(--dark-surface-2);
    color: var(--dark-text);
}

.dark .ep-btn-open:hover,
.dark .ep-btn-open:focus-visible {
    background: var(--brand-dark);
    color: #fff;
}

/* ---------------------------------------------------------------------
   Settings page (.settings-*)
   --------------------------------------------------------------------- */
.settings-hero {
    padding: var(--sp-2) 0 var(--sp-5);
    border-bottom: var(--border-bold) solid var(--structure);
}

.settings-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: var(--fw-display);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--text-strong);
}

.settings-pill {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-75);
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    color: var(--brand);
    background: var(--acct-soft);
    border: var(--border-thick) solid var(--structure);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.settings-card {
    border: var(--border-thick) solid var(--structure);
    box-shadow: var(--shadow-hard);
    background: var(--surface);
    height: 100%;
}

.settings-card .card-header {
    border-bottom: var(--border-thick) solid var(--structure);
    background: var(--acct-soft);
    border-left: var(--border-bold) solid var(--brand);
    padding: 18px var(--sp-5);
}

.settings-card .card-body {
    padding: var(--sp-5);
}

.settings-section-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
    color: var(--text-strong);
}

.settings-muted {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.settings-action {
    padding: 14px var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    background: var(--acct-soft);
    border: var(--border-thick) solid var(--structure);
    transition: background-color 0.15s ease;
}

.settings-action:hover {
    background: var(--acct-rose);
}

.settings-action + .settings-action {
    margin-top: var(--sp-3);
}

.settings-action strong {
    font-size: var(--fs-100);
    color: var(--text-strong);
}

.settings-highlight {
    border-color: var(--brand);
    box-shadow: var(--shadow-hard-brand);
}

.settings-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border: var(--border-thick) solid var(--structure);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--brand);
    background: var(--acct-rose);
}

.settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.45rem 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--brand);
    border: var(--border-thick) solid var(--structure);
    color: #f4f1ea;
    box-shadow: var(--shadow-hard);
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.settings-btn:hover,
.settings-btn:focus {
    color: #f4f1ea;
    background: var(--brand-dark);
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--structure);
}

.settings-btn:focus-visible,
.settings-btn-outline:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--focus-ring), 2px 2px 0 var(--structure);
}

.settings-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.45rem 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--surface);
    border: var(--border-thick) solid var(--structure);
    color: var(--brand);
    box-shadow: var(--shadow-hard);
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.settings-btn-outline:hover,
.settings-btn-outline:focus {
    background: var(--acct-rose);
    color: var(--brand-dark);
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--structure);
}

.settings-toggle-badge {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--structure);
    color: var(--surface);
    padding: 0.25rem 0.5rem;
}

.settings-table thead th {
    background: var(--brand);
    color: #f4f1ea;
    border-bottom: none;
}

.settings-table tbody tr {
    background: var(--surface);
}

.settings-table tbody tr:nth-child(even) {
    background: var(--acct-soft);
}

.settings-tip {
    padding: 18px var(--sp-5);
    background: var(--surface-2);
    border: var(--border-thick) solid var(--structure);
    border-left: var(--border-bold) solid var(--brand);
    color: var(--text-strong);
}

.settings-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-1);
    padding: var(--sp-5) var(--sp-4);
    border: var(--border-thick) dashed var(--structure);
    color: var(--text-muted);
    background: var(--acct-soft);
}

/* Settings: dark-mode specifics */
.dark .settings-btn-outline {
    background: var(--dark-surface-2);
    color: var(--dark-text);
}

.dark .settings-btn-outline:hover,
.dark .settings-btn-outline:focus {
    background: var(--brand-dark);
    color: #fff;
}

.dark .settings-pill {
    color: var(--rose, #F2CFD0);
}

.dark .settings-icon {
    background: var(--brand-dark);
    color: #fff;
}

.dark .settings-highlight {
    border-color: var(--rose, #F2CFD0);
}

.dark .settings-table thead th {
    background: var(--brand-dark);
}

.dark .settings-table tbody tr {
    color: var(--dark-text);
}

@media (max-width: 575.98px) {
    .settings-action {
        flex-direction: column;
        align-items: stretch;
    }
    .settings-action .settings-btn,
    .settings-action .settings-btn-outline {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------
   Motion: honor reduced-motion preferences for everything above
   (style.css also carries a global rule; this keeps the page safe even
   if these styles load on their own).
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .account-banner,
    .auth-card *,
    .pf-action,
    .pf-section > summary,
    .pf-feat > summary,
    .pf-feat__caret,
    .pf-chevron,
    .pf-activity__item,
    .ui-back,
    .ui-toggle,
    .ep-btn,
    .settings-action,
    .settings-btn,
    .settings-btn-outline,
    .auth-link {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    /* Kill the hard-shadow "press" translate; the shadow swap remains. */
    .pf-action:hover,
    .ui-back:hover,
    .ui-back:focus-visible,
    .ep-btn:hover,
    .settings-btn:hover,
    .settings-btn:focus,
    .settings-btn-outline:hover,
    .settings-btn-outline:focus {
        transform: none !important;
    }
}