/*
 * user-area.css — design system for /user/* pages.
 * Single source of truth for tokens + all component styles.
 *
 * Rule: never hard-code hex colors, px values, or bespoke widths in a
 *       page's inline <style>. If a Blade view needs a new value, it goes
 *       here as a new token — never inline.
 *
 * Load path: layouts/user.blade.php @pushes this ONCE for all /user/*.
 */

/* ─────────────────────────────────────────────────────────
 * 1. TOKENS (:root) — the ONLY approved values.
 * ───────────────────────────────────────────────────────── */
:root {
    /* ─── Canonical brand identity (Phase B — the source of truth) ───
     * These are the ONLY approved brand values. Every dashboard rule
     * consumes them via var(); no view or component should reference
     * the literal hex codes. The --u-* aliases below keep old rules
     * pointing at the same underlying value so the identity swap
     * ripples everywhere with a single edit here.
     */
    --color-primary:         #27295E;   /* sidebar, hero banner, page-title band */
    --color-primary-hover:   #1e2049;   /* darker for primary hover states */
    --color-secondary:       #7063F3;   /* interactive: buttons, links, active, focus, badges */
    --color-secondary-600:   #5B4CE8;   /* :hover of secondary */
    --color-secondary-700:   #4A3CD8;   /* :active of secondary */
    --font-family-base:      "Tajawal", "Cairo", "Segoe UI", system-ui, sans-serif;

    /* Text tones — distinct role from brand primary; body-heading color, not brand surface. */
    --u-ink:        #1a1a2e;
    --u-ink-soft:   #2d2e4a;

    /* Interactive violet ramp — aliased onto --color-secondary. */
    --u-violet:     var(--color-secondary);
    --u-violet-100: #ede9fe;
    --u-violet-50:  #f5f3ff;
    --u-violet-600: var(--color-secondary-600);
    --u-violet-700: var(--color-secondary-700);

    /* Neutrals */
    --u-bg:         #f6f6fb;
    --u-surface:    #ffffff;
    --u-mute:       #8b8da1;
    --u-mute-soft:  #c2c4d4;
    --u-line:       #ececf3;
    --u-line-strong:#dcdde7;

    /* Semantic (never use brand violet for status) */
    --u-good:    #16a34a; --u-good-bg:    #dcfce7; --u-good-border:    #bbf7d0;
    --u-warn:    #d97706; --u-warn-bg:    #fef3c7; --u-warn-border:    #fde68a;
    --u-bad:     #dc2626; --u-bad-bg:     #fee2e2; --u-bad-border:     #fecaca;
    --u-info:    #0891b2; --u-info-bg:    #cffafe; --u-info-border:    #a5f3fc;

    /* Spacing — one scale, use these ONLY */
    --u-space-1: 4px;  --u-space-2: 8px;   --u-space-3: 12px; --u-space-4: 16px;
    --u-space-5: 20px; --u-space-6: 24px;  --u-space-7: 28px; --u-space-8: 32px;
    --u-space-10:40px; --u-space-12:48px;  --u-space-16:64px;

    /* Type scale */
    --u-text-xs:   11px;
    --u-text-sm:   12.5px;
    --u-text-base: 13.5px;
    --u-text-md:   14.5px;
    --u-text-lg:   16px;
    --u-text-xl:   19px;
    --u-text-2xl:  22px;
    --u-text-3xl:  26px;

    /* Font weights */
    --u-fw-normal: 400;
    --u-fw-medium: 500;
    --u-fw-semi:   600;
    --u-fw-bold:   700;

    /* Radius */
    --u-r-sm: 6px;  --u-r-md: 8px;  --u-r-lg: 10px;  --u-r-xl: 14px;  --u-r-full: 999px;

    /* Shadow */
    --u-shadow-xs: 0 1px 2px rgba(16,18,34,.04);
    --u-shadow-sm: 0 1px 3px rgba(16,18,34,.06), 0 1px 2px rgba(16,18,34,.04);
    --u-shadow-md: 0 6px 16px rgba(16,18,34,.08);
    --u-shadow-lg: 0 12px 30px rgba(16,18,34,.15);

    /* Font family — Arabic-first stack, aliased onto --font-family-base. */
    --u-font-body: var(--font-family-base);
}

/* ─────────────────────────────────────────────────────────
 * 2. RESET / DEFAULTS scoped to .u-area (won't leak outside)
 * ───────────────────────────────────────────────────────── */
.u-area, .u-area * { box-sizing: border-box; }
.u-area {
    font-family: var(--u-font-body);
    color: var(--u-ink-soft);
    direction: rtl;
    text-align: right;
}
.u-area .u-num,
.u-area td, .u-area th {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ─────────────────────────────────────────────────────────
 * 3. BUTTON — <x-user.button>
 * ───────────────────────────────────────────────────────── */
.u-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--u-space-2);
    padding: 9px var(--u-space-4);
    border-radius: var(--u-r-md);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: var(--u-text-base);
    font-weight: var(--u-fw-semi);
    cursor: pointer;
    text-decoration: none;
    transition: background .14s, border-color .14s, color .14s, transform .04s;
    white-space: nowrap;
    line-height: 1;
}
.u-btn:active { transform: translateY(1px); }
.u-btn i { font-size: 11px; }

/* Variants */
.u-btn--primary   { background: var(--u-violet); color: #fff; }
.u-btn--primary:hover { background: var(--u-violet-600); color: #fff; }
.u-btn--ghost     { background: var(--u-surface); color: var(--u-ink); border-color: var(--u-line-strong); }
.u-btn--ghost:hover { background: var(--u-bg); color: var(--u-ink); }
.u-btn--danger    { background: var(--u-bad-bg); color: var(--u-bad); border-color: var(--u-bad-border); }
.u-btn--danger:hover { background: var(--u-bad-border); color: var(--u-bad); }
/* On-dark variant — for use inside the welcome band or any dark hero */
.u-btn--on-dark   { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.18); }
.u-btn--on-dark:hover { background: rgba(255,255,255,.18); color: #fff; }

/* Sizes */
.u-btn--sm { padding: 7px var(--u-space-3); font-size: var(--u-text-sm); }
.u-btn--md { padding: 9px var(--u-space-4); font-size: var(--u-text-base); }
.u-btn--lg { padding: 11px var(--u-space-5); font-size: var(--u-text-md); }
.u-btn--block { width: 100%; }

/* ─────────────────────────────────────────────────────────
 * 4. CARD + PANEL — <x-user.card>, <x-user.panel>
 * ───────────────────────────────────────────────────────── */
.u-card {
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-r-lg);
    box-shadow: var(--u-shadow-xs);
}
.u-card__body { padding: var(--u-space-4); }

.u-panel {
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-r-lg);
    box-shadow: var(--u-shadow-xs);
    overflow: hidden;
}
.u-panel__head {
    padding: var(--u-space-4) var(--u-space-5);
    border-bottom: 1px solid var(--u-line);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--u-space-3);
}
.u-panel__title {
    font-size: var(--u-text-md);
    font-weight: var(--u-fw-bold);
    color: var(--u-ink);
    display: flex; align-items: center; gap: var(--u-space-2);
    margin: 0;
}
.u-panel__title i { color: var(--u-violet); font-size: 15px; }
.u-panel__action {
    color: var(--u-violet);
    font-size: var(--u-text-sm);
    font-weight: var(--u-fw-semi);
    text-decoration: none;
}
.u-panel__action:hover { color: var(--u-violet-600); text-decoration: underline; }
.u-panel__body { padding: 0; }

/* ─────────────────────────────────────────────────────────
 * 5. KPI CARD — <x-user.kpi>
 * ───────────────────────────────────────────────────────── */
.u-kpi {
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-r-lg);
    padding: var(--u-space-4);
    box-shadow: var(--u-shadow-xs);
    display: flex; flex-direction: column; gap: var(--u-space-2);
    direction: rtl; text-align: right;
}
.u-kpi__label {
    color: var(--u-mute);
    font-size: var(--u-text-sm);
    font-weight: var(--u-fw-medium);
    display: flex; align-items: center; gap: 7px;
}
.u-kpi__label i { color: var(--u-violet); font-size: 13px; }
.u-kpi__value {
    font-size: var(--u-text-3xl);
    font-weight: var(--u-fw-bold);
    color: var(--u-ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.u-kpi__value--sm { font-size: var(--u-text-lg); padding-top: 4px; }
.u-kpi__value .unit { font-size: var(--u-text-base); color: var(--u-mute); font-weight: var(--u-fw-medium); margin-right: 4px; }
.u-kpi__sub  { font-size: var(--u-text-xs); color: var(--u-mute); }

/* Accent modifiers — boxed variant with soft tinted surface + semantic
   border. Slightly taller than the plain .u-kpi (bigger padding, value,
   icon, and label→value gap) so accent KPIs read as a premium row. */
.u-kpi--good, .u-kpi--bad, .u-kpi--warn, .u-kpi--mute {
    padding: var(--u-space-6);              /* 24px (was 20 = --u-space-5) */
    gap: var(--u-space-3);                   /* 12px */
}
.u-kpi--good .u-kpi__value,
.u-kpi--bad  .u-kpi__value,
.u-kpi--warn .u-kpi__value,
.u-kpi--mute .u-kpi__value {
    font-size: 36px;                         /* was 32; +38% over --u-text-3xl */
    line-height: 1.1;
}
.u-kpi--good .u-kpi__label i,
.u-kpi--bad  .u-kpi__label i,
.u-kpi--warn .u-kpi__label i,
.u-kpi--mute .u-kpi__label i { font-size: 16px; }

/* Soft tinted background + semantic border per accent */
.u-kpi--good { background: var(--u-good-bg); border-color: var(--u-good-border); }
.u-kpi--bad  { background: var(--u-bad-bg);  border-color: var(--u-bad-border); }
.u-kpi--warn { background: var(--u-warn-bg); border-color: var(--u-warn-border); }
.u-kpi--mute { background: #eef0f4; border-color: var(--u-line-strong); }

/* Icon tint */
.u-kpi--good .u-kpi__label i { color: var(--u-good); }
.u-kpi--bad  .u-kpi__label i { color: var(--u-bad); }
.u-kpi--warn .u-kpi__label i { color: var(--u-warn); }
.u-kpi--mute .u-kpi__label i { color: var(--u-mute); }

/* ─────────────────────────────────────────────────────────
 * 6. BADGE — <x-user.badge>
 * ───────────────────────────────────────────────────────── */
.u-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: var(--u-r-full);
    font-size: var(--u-text-xs);
    font-weight: var(--u-fw-semi);
    line-height: 1.5;
    white-space: nowrap;
}
.u-badge::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.u-badge--good { background: var(--u-good-bg); color: var(--u-good); }
.u-badge--warn { background: var(--u-warn-bg); color: var(--u-warn); }
.u-badge--bad  { background: var(--u-bad-bg);  color: var(--u-bad); }
.u-badge--mute { background: #eef0f4; color: var(--u-mute); }
.u-badge--violet { background: var(--u-violet-100); color: var(--u-violet-700); }

/* ─────────────────────────────────────────────────────────
 * 7. TABLE — <x-user.table>
 * ───────────────────────────────────────────────────────── */
.u-table-wrap { overflow-x: auto; }
.u-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--u-text-base);
}
.u-table th {
    text-align: right;
    padding: 11px var(--u-space-5);
    color: var(--u-mute);
    font-weight: var(--u-fw-semi);
    font-size: var(--u-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #fafafd;
    border-bottom: 1px solid var(--u-line);
    white-space: nowrap;
}
.u-table td {
    padding: 14px var(--u-space-5);
    border-bottom: 1px solid var(--u-line);
    vertical-align: middle;
}
.u-table tbody tr:last-child td { border-bottom: none; }
.u-table tbody tr:hover { background: #fafafd; }
.u-table__title { font-weight: var(--u-fw-semi); color: var(--u-ink); text-decoration: none; display: block; }
.u-table__title:hover { color: var(--u-violet); }
.u-table__muted { color: var(--u-mute); font-size: var(--u-text-sm); }
.u-table__score { font-weight: var(--u-fw-bold); color: var(--u-ink); }

/* ─────────────────────────────────────────────────────────
 * 8. EMPTY STATE — <x-user.empty-state>
 * ───────────────────────────────────────────────────────── */
.u-empty {
    padding: var(--u-space-12) var(--u-space-6);
    text-align: center;
}
.u-empty__icon {
    width: 64px; height: 64px;
    margin: 0 auto var(--u-space-4);
    border-radius: 50%;
    background: var(--u-violet-50);
    display: grid; place-items: center;
    color: var(--u-violet);
    font-size: 22px;
}
.u-empty__icon--good { background: var(--u-good-bg); color: var(--u-good); }
.u-empty h3 {
    margin: 0 0 var(--u-space-1);
    font-size: var(--u-text-lg);
    color: var(--u-ink);
    font-weight: var(--u-fw-bold);
}
.u-empty p {
    margin: 0 0 var(--u-space-4);
    font-size: var(--u-text-base);
    color: var(--u-mute);
    max-width: 380px;
    margin-inline: auto;
    line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────
 * 9. GRID HELPERS
 * ───────────────────────────────────────────────────────── */
.u-grid { display: grid; gap: var(--u-space-3); }
.u-grid--kpi   { grid-template-columns: repeat(5, 1fr); }
.u-grid--kpi-3 { grid-template-columns: repeat(3, 1fr); }   /* 3-across always on ≥ tablet */
.u-grid--split { grid-template-columns: 1.8fr 1fr; }

@media (max-width: 1100px) {
    .u-grid--kpi   { grid-template-columns: repeat(3, 1fr); }
    .u-grid--split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .u-grid--kpi   { grid-template-columns: repeat(2, 1fr); }
    .u-grid--kpi-3 { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────
 * 10. QUICK-ACCESS TILE — dashboard's list of link-tiles
 * ───────────────────────────────────────────────────────── */
.u-tile {
    display: flex; align-items: center; gap: var(--u-space-3);
    padding: 11px var(--u-space-3);
    border-radius: var(--u-r-md);
    text-decoration: none;
    color: var(--u-ink-soft);
    transition: background .12s;
}
.u-tile:hover { background: var(--u-bg); color: var(--u-ink-soft); }
.u-tile__icon {
    width: 36px; height: 36px;
    border-radius: var(--u-r-md);
    display: grid; place-items: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 14px;
}
.u-tile__icon--violet  { background: var(--u-violet); }
.u-tile__icon--emerald { background: var(--u-good); }
.u-tile__icon--amber   { background: var(--u-warn); }
.u-tile__icon--cyan    { background: var(--u-info); }
.u-tile__name { font-weight: var(--u-fw-semi); font-size: var(--u-text-base); color: var(--u-ink); }
.u-tile__desc { font-size: var(--u-text-sm); color: var(--u-mute); margin-top: 1px; }
.u-tile__arrow { margin-right: auto; color: var(--u-mute-soft); }
.u-tile:hover .u-tile__arrow { color: var(--u-violet); }
.u-tile-list {
    display: flex; flex-direction: column; gap: var(--u-space-2);
    padding: var(--u-space-4) var(--u-space-4);
}

/* ─────────────────────────────────────────────────────────
 * 11. WELCOME BAND — dashboard-only landing card
 * ─────────────────────────────────────────────────────────
 * Layout: [ avatar+halo ] [ eyebrow / name / tagline / meta-chips ]  <spacer>  [ CTAs ]
 * Uses --color-primary — matches .formkit-hero for cross-page consistency.
 */
.u-welcome {
    background: var(--color-primary);
    border-radius: var(--u-r-xl);
    color: #fff;
    padding: var(--u-space-6) var(--u-space-8);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--u-space-8);
    margin-bottom: var(--u-space-5);
    position: relative; overflow: hidden;
    flex-wrap: wrap;
    min-height: 183px;
    box-shadow: 0 12px 32px rgba(16,18,34,.15);
}
.u-welcome__left { display: flex; align-items: center; gap: var(--u-space-5); position: relative; z-index: 1; flex: 1; min-width: 0; }

/* Avatar — bigger, with a soft violet halo behind it */
.u-welcome__avatar {
    width: 74px; height: 74px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--u-violet) 0%, #ec4899 100%);
    color: #fff;
    font-size: 28px;
    font-weight: var(--u-fw-bold);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow:
        0 0 0 4px rgba(112,99,243,.18),
        0 0 0 8px rgba(112,99,243,.08),
        0 8px 20px rgba(112,99,243,.35);
    position: relative;
}

/* Text block */
.u-welcome__eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-size: 10.5px;
    font-weight: var(--u-fw-bold);
    color: #b9a4ff;
    background: rgba(112,99,243,.15);
    padding: 3px 10px;
    border-radius: var(--u-r-full);
    margin-bottom: 6px;
}
.u-welcome h1 { margin: 0; font-size: 26px; font-weight: var(--u-fw-bold); color: #fff; letter-spacing: -0.01em; }
.u-welcome__tagline  { margin: 4px 0 0; color: rgba(255,255,255,.7); font-size: var(--u-text-base); line-height: 1.55; }

/* Meta as chips with icons */
.u-welcome__meta {
    display: flex; gap: var(--u-space-2);
    margin-top: var(--u-space-3);
    flex-wrap: wrap;
}
.u-welcome__chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.9);
    font-size: var(--u-text-sm);
    padding: 5px 11px;
    border-radius: var(--u-r-full);
    line-height: 1.4;
}
.u-welcome__chip i { color: #b9a4ff; font-size: 11px; }
.u-welcome__chip b { color: rgba(255,255,255,.55); font-weight: var(--u-fw-medium); margin-left: 4px; }

.u-welcome__right { display: flex; gap: var(--u-space-3); position: relative; z-index: 1; flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────
 * 12. CONTINUE-LAST-TEST CARD — dashboard's resume prompt
 * ───────────────────────────────────────────────────────── */
.u-continue {
    background: linear-gradient(135deg, var(--u-violet-50) 0%, #ffffff 60%);
    border: 1px solid var(--u-violet-100);
    border-radius: var(--u-r-xl);
    padding: 18px var(--u-space-6);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--u-space-5);
    margin-bottom: var(--u-space-5);
    direction: rtl;
}
.u-continue__left { display: flex; align-items: center; gap: var(--u-space-4); flex: 1; min-width: 0; }
.u-continue__icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--u-violet);
    color: #fff;
    display: grid; place-items: center;
    flex-shrink: 0;
    font-size: 18px;
}
.u-continue__eyebrow {
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--u-violet);
    font-weight: var(--u-fw-bold);
}
.u-continue h3 { margin: 4px 0 2px; font-size: var(--u-text-lg); font-weight: var(--u-fw-bold); color: var(--u-ink); }
.u-continue p  { margin: 0; color: var(--u-mute); font-size: var(--u-text-sm); }
.u-progress {
    height: 6px;
    background: var(--u-violet-100);
    border-radius: var(--u-r-full);
    overflow: hidden;
    width: 240px;
    margin-top: var(--u-space-2);
}
.u-progress__fill { height: 100%; background: var(--u-violet); border-radius: var(--u-r-full); }

/* ─────────────────────────────────────────────────────────
 * 13. FORMKIT-HERO OVERRIDE — matches .u-welcome design
 * ─────────────────────────────────────────────────────────
 * Same visual treatment as the dashboard welcome band:
 *   - --color-primary base (brand identity)
 *   - violet radial blob top-left corner
 *   - pink radial blob bottom-right corner
 *   - subtle dotted-grid overlay for depth
 *   - drop shadow for lift
 * Scoped to .u-area / .pt-userarea so the admin form-kit hero
 * is untouched.
 */
.u-area .formkit-hero,
.pt-userarea .formkit-hero {
    background: var(--color-primary) !important;
    box-shadow: 0 12px 32px rgba(16,18,34,.15) !important;
    position: relative;
    overflow: hidden;
    /* Same min-height as .u-welcome — same visual weight across every /user/* page */
    min-height: 183px !important;
    /* Same padding as .u-welcome so content is centered similarly */
    padding: var(--u-space-6) var(--u-space-8) !important;
    display: flex !important;
    align-items: center !important;
}

.u-area .formkit-hero h1,
.u-area .formkit-hero .fk-hero-subtitle,
.pt-userarea .formkit-hero h1,
.pt-userarea .formkit-hero .fk-hero-subtitle {
    color: #fff !important;
}
.u-area .formkit-hero h1 i,
.pt-userarea .formkit-hero h1 i {
    color: var(--u-violet) !important;
}
.u-area .fk-hero-action,
.pt-userarea .fk-hero-action {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.18) !important;
}
.u-area .fk-hero-action:hover,
.pt-userarea .fk-hero-action:hover {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
}

/* ─────────────────────────────────────────────────────────
 * 15. SECTION HEAD — small title/count row below the hero
 * ───────────────────────────────────────────────────────── */
.u-section-head {
    margin-bottom: var(--u-space-4);
    display: flex; align-items: center; justify-content: flex-end;
    gap: var(--u-space-3);
    flex-wrap: wrap;
    direction: rtl; text-align: right;
}

/* ─────────────────────────────────────────────────────────
 * 16. FILTER BAR — dropdowns + search on results/tests/wrong-answers
 * ───────────────────────────────────────────────────────── */
.u-filter-bar {
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-r-lg);
    padding: 14px var(--u-space-4);
    margin-bottom: var(--u-space-4);
    display: flex; gap: var(--u-space-3); flex-wrap: nowrap;
    align-items: flex-end;
    overflow-x: auto;
    direction: rtl;
}
/* Labelled control group — label sits above the control, controls
   align on the same baseline via .u-filter-bar's flex-end. */
.u-filter-bar__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.u-filter-bar__group label {
    font-size: var(--u-text-xs);
    font-weight: var(--u-fw-medium);
    color: var(--u-mute);
    padding-inline-start: 2px;
}
.u-filter-bar__group--grow { flex: 1; min-width: 180px; }
.u-filter-bar__actions {
    display: flex;
    gap: var(--u-space-2);
    padding-bottom: 2px;   /* nudge to align with .u-btn-sm baseline */
}
.u-filter-bar .search {
    flex: 1; min-width: 200px;
    position: relative;
}
.u-filter-bar .search input {
    width: 100%;
    border: 1px solid var(--u-line);
    background: var(--u-bg);
    border-radius: var(--u-r-md);
    padding: 8px 36px 8px 12px;
    font-family: inherit;
    font-size: var(--u-text-base);
    color: var(--u-ink-soft);
}
.u-filter-bar .search input:focus {
    outline: none;
    border-color: var(--u-violet);
    background: #fff;
}
.u-filter-bar .search i {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: var(--u-mute); font-size: 13px;
}
.u-filter-bar select {
    border: 1px solid var(--u-line);
    background: var(--u-bg);
    border-radius: var(--u-r-md);
    padding: 8px 12px;
    font-family: inherit;
    font-size: var(--u-text-base);
    color: var(--u-ink-soft);
    width: auto;
    min-width: 160px;
    max-width: 260px;
    flex-shrink: 0;
    cursor: pointer;
}
.u-filter-bar select:focus { outline: none; border-color: var(--u-violet); background: #fff; }
.u-filter-bar .spacer { flex: 1; }

/* ─────────────────────────────────────────────────────────
 * 17. PAGINATION
 * ───────────────────────────────────────────────────────── */
.u-pagination {
    display: flex; justify-content: center; gap: 5px;
    margin-top: var(--u-space-5);
    padding: var(--u-space-4);
}
.u-pagination a, .u-pagination span {
    border: 1px solid var(--u-line);
    background: var(--u-surface);
    color: var(--u-ink-soft);
    min-width: 34px; height: 34px;
    padding: 0 10px;
    border-radius: var(--u-r-md);
    font-family: inherit;
    font-size: var(--u-text-base);
    font-weight: var(--u-fw-medium);
    text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.u-pagination a:hover { background: var(--u-bg); }
.u-pagination .active, .u-pagination span.active {
    background: var(--u-violet); color: #fff; border-color: var(--u-violet);
}

/* ─────────────────────────────────────────────────────────
 * 18. TEST CARD (for /user/tests) — grid of quiz cards
 * ───────────────────────────────────────────────────────── */
/* Grid — 4 columns at ≥1400, 3 at desktop, 2 at tablet, 1 at phone. */
.u-test-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--u-space-4);
}
@media (max-width: 1400px) { .u-test-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .u-test-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .u-test-grid { grid-template-columns: 1fr; }
                             .u-filter-bar select { min-width: 0; flex: 1; } }

/* Card — compact 4-block layout: head · body · stats · actions.
   position:relative + overflow:hidden give the ::before accent stripe
   a clipping container inside the card's border-radius. */
.u-test-card {
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-r-lg);
    padding: var(--u-space-4);
    box-shadow: var(--u-shadow-xs);
    display: flex; flex-direction: column;
    gap: var(--u-space-3);
    transition: border-color .14s, box-shadow .14s, transform .12s;
    direction: rtl;
    position: relative;
    overflow: hidden;
}
.u-test-card:hover {
    border-color: var(--u-violet-100);
    box-shadow: var(--u-shadow-sm);
    transform: translateY(-2px);
}

/* 3-px state accent along the top edge. Neutral state = no stripe. */
.u-test-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: transparent;
}
.u-test-card--completed::before   { background: var(--u-good); }
.u-test-card--in-progress::before { background: var(--u-warn); }

/* State modifiers — subtle border tint. No background wash. */
.u-test-card--completed   { border-color: var(--u-good-border); }
.u-test-card--in-progress { border-color: var(--u-warn-border); }
/* .u-test-card--not-started keeps the neutral --u-line border. */

/* Head — small cover icon on the right (RTL) + status badge on the left. */
.u-test-card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--u-space-2);
}
.u-test-card__cover {
    width: 32px; height: 32px;
    border-radius: var(--u-r-sm);
    color: #fff;
    display: grid; place-items: center;
    flex-shrink: 0;
    font-size: 13px;
}
.u-test-card__cover--violet  { background: linear-gradient(135deg, var(--u-violet) 0%, var(--u-violet-700) 100%); }
.u-test-card__cover--amber   { background: linear-gradient(135deg, #f59e0b 0%, var(--u-warn) 100%); }
.u-test-card__cover--emerald { background: linear-gradient(135deg, var(--u-good) 0%, #15803d 100%); }
.u-test-card__cover--rose    { background: linear-gradient(135deg, var(--u-bad) 0%, #991b1b 100%); }
.u-test-card__cover--cyan    { background: linear-gradient(135deg, var(--u-info) 0%, #155e75 100%); }
.u-test-card__cover--slate   { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); }
/* Lighter-weight status badge inside a card head. */
.u-test-card__head .u-badge {
    font-size: 10px;
    padding: 2px 8px;
    font-weight: var(--u-fw-medium);
}

/* Body — category eyebrow · title (2-line clamp) · icon meta row.
   Tight vertical rhythm; whitespace only between title and meta. */
.u-test-card__body {
    display: flex; flex-direction: column;
    gap: 0;
    min-width: 0;
}
.u-test-card__category {
    font-size: 10.5px;
    color: var(--u-mute);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--u-fw-semi);
    margin-bottom: 3px;
}
.u-test-card__title {
    margin: 0;
    font-size: var(--u-text-md);
    font-weight: var(--u-fw-bold);
    color: var(--u-ink);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.4em * 2);
}
.u-test-card__meta {
    display: flex; gap: var(--u-space-3); flex-wrap: wrap;
    font-size: var(--u-text-xs);
    color: var(--u-mute);
    margin-top: 8px;
}
.u-test-card__meta span {
    display: inline-flex; align-items: center; gap: 5px;
}
.u-test-card__meta i {
    color: var(--u-violet);
    font-size: 10px;
}

/* Stats — 2×2 grid in a soft panel; margin-top:auto anchors to bottom
   so cards with short titles absorb whitespace above the stats, keeping
   card heights consistent across the row. */
.u-test-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--u-space-2) var(--u-space-3);
    padding: var(--u-space-3);
    background: var(--u-bg);
    border-radius: var(--u-r-md);
    margin-top: auto;
}
.u-test-card__stat {
    display: flex; flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.u-test-card__stat-label {
    font-size: 10.5px;
    color: var(--u-mute);
    font-weight: var(--u-fw-medium);
    letter-spacing: 0.02em;
}
.u-test-card__stat-value {
    font-weight: var(--u-fw-bold);
    color: var(--u-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Top row (best + last score) is the primary read. */
.u-test-card__stat:nth-child(-n+2) .u-test-card__stat-value {
    font-size: var(--u-text-lg);
}
/* Bottom row (attempts + last-attempt-date) is secondary. */
.u-test-card__stat:nth-child(n+3) .u-test-card__stat-value {
    font-size: var(--u-text-sm);
    color: var(--u-ink-soft);
}

/* Actions — full-width primary CTA. Slightly taller than sm to feel
   like the card's primary action. */
.u-test-card__actions { display: flex; gap: var(--u-space-2); }
.u-test-card__actions .u-btn { flex: 1; padding-top: 10px; padding-bottom: 10px; }

/* ─── Recommended-next card (guided-learning primary action on /user/tests) ───
   Larger than a normal quiz card. Uses a soft violet tint so it reads as
   the primary action without competing with the primary button. */
.u-recommend {
    background: linear-gradient(135deg, var(--u-violet-50) 0%, var(--u-surface) 60%);
    border: 1px solid var(--u-violet-100);
    border-radius: var(--u-r-xl);
    padding: var(--u-space-6) var(--u-space-8);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--u-space-6);
    align-items: center;
}
.u-recommend__icon {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: var(--u-violet);
    color: #fff;
    display: grid; place-items: center;
    font-size: 22px;
    flex-shrink: 0;
}
.u-recommend__body { min-width: 0; display: flex; align-items: center; gap: var(--u-space-5); }
.u-recommend__body > div { min-width: 0; }
.u-recommend__eyebrow {
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--u-violet);
    font-weight: var(--u-fw-bold);
    margin-bottom: 4px;
}
.u-recommend__title {
    font-size: var(--u-text-xl);
    font-weight: var(--u-fw-bold);
    color: var(--u-ink);
    line-height: 1.35;
    margin: 0;
}
.u-recommend__meta {
    color: var(--u-mute);
    font-size: var(--u-text-sm);
    margin-top: 6px;
    display: flex;
    gap: var(--u-space-3);
    flex-wrap: wrap;
    line-height: 1.6;
}
.u-recommend__meta span { display: inline-flex; align-items: center; gap: 5px; }
.u-recommend__meta i { color: var(--u-violet); font-size: 11px; }
.u-recommend__cta { flex-shrink: 0; }

@media (max-width: 700px) {
    .u-recommend { grid-template-columns: 1fr; padding: var(--u-space-5); }
    .u-recommend__body { flex-direction: column; align-items: stretch; gap: var(--u-space-3); }
    .u-recommend__cta .u-btn { width: 100%; }
}

/* ─────────────────────────────────────────────────────────
 * 19. WRONG-ANSWER CARD (for /user/wrong-answers)
 * ───────────────────────────────────────────────────────── */
.u-wrong-card {
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-r-lg);
    padding: var(--u-space-5);
    margin-bottom: var(--u-space-3);
    box-shadow: var(--u-shadow-xs);
    direction: rtl;
}
.u-wrong-card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--u-space-3); flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--u-line);
    margin-bottom: 14px;
}
.u-wrong-card__meta {
    display: flex; gap: var(--u-space-2); align-items: center;
    font-size: var(--u-text-sm);
    color: var(--u-mute);
    flex-wrap: wrap;
}
.u-wrong-card__meta b { color: var(--u-ink-soft); font-weight: var(--u-fw-semi); }
.u-wrong-card h4 {
    margin: 0 0 var(--u-space-4);
    font-size: var(--u-text-lg);
    font-weight: var(--u-fw-bold);
    color: var(--u-ink);
    line-height: 1.8;
}
.u-wrong-card__answers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--u-space-3);
    margin-bottom: var(--u-space-4);
}
.u-wrong-card__ans {
    padding: 14px 16px;
    border-radius: var(--u-r-md);
    border: 1px solid var(--u-line);
    display: flex; align-items: center; gap: var(--u-space-3);
}
.u-wrong-card__ans-icon {
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 11px;
}
.u-wrong-card__ans .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--u-fw-bold); margin-bottom: 2px; }
.u-wrong-card__ans .text  { font-size: var(--u-text-base); font-weight: var(--u-fw-medium); color: var(--u-ink); }
.u-wrong-card__ans--wrong   { background: var(--u-bad-bg); border-color: var(--u-bad-border); }
.u-wrong-card__ans--wrong .label { color: var(--u-bad); }
.u-wrong-card__ans--wrong .u-wrong-card__ans-icon { background: var(--u-bad); }
.u-wrong-card__ans--correct { background: var(--u-good-bg); border-color: var(--u-good-border); }
.u-wrong-card__ans--correct .label { color: var(--u-good); }
.u-wrong-card__ans--correct .u-wrong-card__ans-icon { background: var(--u-good); }
/* Correct-answer box gets a heavier, larger text so it draws the eye
   next to the (smaller) user-wrong text. Applies to all card states
   — on correct/unanswered cards it just makes the answer read stronger. */
.u-wrong-card__ans--correct .text {
    font-size: var(--u-text-lg);
    font-weight: var(--u-fw-semi);
}
.u-wrong-card__expl {
    background: var(--u-violet-50);
    border-right: 3px solid var(--u-violet);
    padding: 12px 14px;
    border-radius: var(--u-r-sm);
    font-size: var(--u-text-base);
    color: var(--u-ink-soft);
    line-height: 1.7;
    margin-bottom: 14px;
}
.u-wrong-card__expl b {
    color: var(--u-violet); display: block; margin-bottom: 4px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
}
.u-wrong-card__image {
    display: block;
    max-width: 260px;
    max-height: 260px;
    width: auto;
    height: auto;
    margin: 0 auto var(--u-space-4);
    padding: var(--u-space-3);
    border-radius: var(--u-r-md);
    border: 1px solid var(--u-line);
    object-fit: contain;
    background: var(--u-bg);
}
/* Unanswered variant renders only the "correct answer" box → single column */
.u-wrong-card--unanswered .u-wrong-card__answers { grid-template-columns: 1fr; }

@media (max-width: 640px) {
    .u-wrong-card__answers { grid-template-columns: 1fr; }
    .u-wrong-card__image   { max-width: 100%; }
}

/* ─────────────────────────────────────────────────────────
 * 20. SETTINGS — form fields + panels + toggles
 * ───────────────────────────────────────────────────────── */
.u-form-panel { margin-bottom: var(--u-space-3); }
.u-form-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--u-space-6);
    padding: 22px var(--u-space-6);
}
.u-form-grid__side {
    border-left: 1px solid var(--u-line);
    padding-left: var(--u-space-6);
}
.u-form-grid__side h3 { margin: 0 0 6px; font-size: var(--u-text-md); font-weight: var(--u-fw-bold); color: var(--u-ink); }
.u-form-grid__side p  { margin: 0; color: var(--u-mute); font-size: var(--u-text-sm); line-height: 1.6; }
.u-form-grid__body    { display: grid; gap: var(--u-space-4); }
.u-field              { display: flex; flex-direction: column; gap: 6px; }
.u-field label        { font-size: var(--u-text-sm); font-weight: var(--u-fw-semi); color: var(--u-ink-soft); }
.u-field input,
.u-field select       {
    width: 100%;
    border: 1px solid var(--u-line);
    background: var(--u-surface);
    border-radius: var(--u-r-md);
    padding: 9px 12px;
    font-family: inherit;
    font-size: var(--u-text-base);
    color: var(--u-ink);
}
.u-field input:focus,
.u-field select:focus {
    outline: none;
    border-color: var(--u-violet);
    box-shadow: 0 0 0 3px var(--u-violet-100);
}
.u-field-hint { font-size: 11.5px; color: var(--u-mute); }
.u-form-actions { display: flex; gap: var(--u-space-2); justify-content: flex-end; margin-top: 6px; }

/* Two-column form row (firstname+lastname, country+state, etc.). Single column on phone. */
.u-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--u-space-3);
}
@media (max-width: 640px) {
    .u-form-row { grid-template-columns: 1fr; }
}

/* Composite input group (country-code select + phone-number input, etc.) */
.u-input-group { display: flex; gap: var(--u-space-2); }
.u-input-group > select { flex: 0 0 42%; }
.u-input-group > input  { flex: 1 1 auto; min-width: 0; }

/* Profile 2-column shell — main form (right, 1fr) + compact side (left, 300px).
   Only used by /user/profile; other dashboard pages remain single-column. */
.u-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--u-space-6);
    align-items: start;
}
.u-profile-main { display: flex; flex-direction: column; gap: var(--u-space-5); }
.u-profile-side { display: flex; flex-direction: column; gap: var(--u-space-4); }

@media (max-width: 900px) {
    .u-profile-grid { grid-template-columns: 1fr; }
    .u-profile-side { order: 2; }
}

/* Compact side-card content — smaller title + centered meta list, used
   inside <x-user.card> in the profile side column. */
.u-side-card__title {
    font-weight: var(--u-fw-bold);
    color: var(--u-ink);
    font-size: var(--u-text-md);
    margin: 0 0 var(--u-space-1);
    text-align: center;
}
.u-side-card__hint {
    font-size: var(--u-text-sm);
    color: var(--u-mute);
    margin: 0 0 var(--u-space-3);
    text-align: center;
}
.u-side-card__body-center { text-align: center; }
.u-side-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--u-space-2) 0;
    border-top: 1px solid var(--u-line);
    font-size: var(--u-text-sm);
}
.u-side-card__meta:first-child { border-top: none; padding-top: 0; }
.u-side-card__meta .k { color: var(--u-mute); }
.u-side-card__meta .v { color: var(--u-ink); font-weight: var(--u-fw-semi); }

.u-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--u-line);
}
.u-toggle-row:last-child { border-bottom: none; }
.u-toggle-row .text { flex: 1; min-width: 0; padding-left: var(--u-space-4); }
.u-toggle-row .name { font-weight: var(--u-fw-semi); color: var(--u-ink); font-size: var(--u-text-base); }
.u-toggle-row .desc { font-size: var(--u-text-sm); color: var(--u-mute); margin-top: 2px; line-height: 1.5; }

.u-toggle {
    position: relative;
    width: 40px; height: 22px;
    background: var(--u-mute-soft);
    border-radius: var(--u-r-full);
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
    border: none;
    padding: 0;
}
.u-toggle::after {
    content: "";
    position: absolute; top: 3px; right: 3px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform .15s;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.u-toggle.on { background: var(--u-violet); }
.u-toggle.on::after { transform: translateX(-18px); }

.u-danger-zone {
    background: #fff5f5;
    border: 1px solid var(--u-bad-border);
    border-radius: var(--u-r-lg);
    padding: 20px 22px;
    margin-bottom: var(--u-space-3);
}
.u-danger-zone h3 { margin: 0 0 4px; color: var(--u-bad); font-size: var(--u-text-md); }
.u-danger-zone p  { margin: 0 0 12px; color: var(--u-ink-soft); font-size: var(--u-text-sm); line-height: 1.6; }

.u-flash {
    background: var(--u-good-bg); color: var(--u-good);
    padding: 11px 14px; border-radius: var(--u-r-md);
    margin-bottom: 14px;
    font-size: var(--u-text-base); font-weight: var(--u-fw-medium);
    border: 1px solid var(--u-good-border);
}
.u-flash--error { background: var(--u-bad-bg); color: var(--u-bad); border-color: var(--u-bad-border); }

@media (max-width: 720px) {
    .u-form-grid { grid-template-columns: 1fr; gap: var(--u-space-4); padding: 18px; }
    .u-form-grid__side { border-left: none; border-bottom: 1px solid var(--u-line); padding: 0 0 14px; }
}

/* ─────────────────────────────────────────────────────────
 * 21. RESPONSIVE — welcome + continue on mobile
 * ───────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .u-welcome { flex-direction: column; align-items: stretch; padding: var(--u-space-4); }
    .u-welcome__right { width: 100%; }
    .u-welcome__right .u-btn { flex: 1; }
    .u-continue { flex-direction: column; align-items: stretch; }
    .u-continue .u-btn { width: 100%; }
    .u-progress { width: 100%; }
    .u-kpi__value { font-size: var(--u-text-2xl); }
}

/* ─────────────────────────────────────────────────────────
 * 22b. ACCOUNT MENU — <x-layout.account-menu variant="…">
 * ─────────────────────────────────────────────────────────
 * The authenticated user's dropdown — shared between the dashboard
 * topbar (variant="dashboard") and the public site header
 * (variant="public"). One component, one CSS block, one JS instance.
 * Trigger is a compact pill (avatar + name + chevron); dropdown carries
 * a header block (large avatar · name · country) and three sections
 * (main links · secondary · logout). All tokens; no literals.
 */
.u-account-menu {
    position: relative;
    margin-inline-start: auto;
    font-family: var(--font-family-base);
}

/* Trigger pill */
.u-account-menu__trigger {
    display: flex; align-items: center; gap: var(--u-space-2);
    padding: 4px 8px 4px 4px;
    border-radius: var(--u-r-full);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .12s;
    user-select: none;
    font-family: inherit;
}
.u-account-menu__trigger:hover { background: var(--u-bg); }
.u-account-menu__trigger:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Avatar — token-driven brand gradient (primary → secondary). */
.u-account-menu__avatar {
    position: relative;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: #fff;
    font-weight: var(--u-fw-bold);
    font-size: var(--u-text-sm);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.u-account-menu__avatar--lg {
    width: 44px; height: 44px;
    font-size: var(--u-text-xl);
}
.u-account-menu__online-dot {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 10px; height: 10px;
    background: var(--u-good);
    border: 2px solid var(--u-surface);
    border-radius: 50%;
}
.u-account-menu__avatar--lg .u-account-menu__online-dot {
    width: 14px; height: 14px;
    border-width: 3px;
}

.u-account-menu__name {
    color: var(--u-ink);
    font-size: var(--u-text-sm);
    font-weight: var(--u-fw-semi);
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.u-account-menu__caret {
    color: var(--u-mute);
    font-size: 10px;
    transition: transform .18s;
}
.u-account-menu[data-open="true"] .u-account-menu__caret {
    transform: rotate(180deg);
}

/* Dropdown surface — hidden until data-open="true"; animates on open/close.
   RTL anchor: inset-inline-end pins the visual-left edge of the dropdown to
   the visual-left edge of the trigger, so the dropdown extends rightward
   into the topbar (rather than off-screen left, which happens if we anchor
   to the trigger's visual-right edge when the trigger sits at the far-left
   of the RTL flex row). */
.u-account-menu__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    min-width: 260px;
    max-width: 280px;
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-r-lg);
    box-shadow: var(--u-shadow-lg);
    padding: var(--u-space-2);
    z-index: 100;
    direction: rtl;
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.u-account-menu[data-open="true"] .u-account-menu__dropdown {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}

/* Header block — compact by design; close-cropped padding to keep the
   dropdown feeling small in the topbar context. */
.u-account-menu__header {
    display: flex; align-items: center; gap: var(--u-space-2);
    padding: 10px;
    background: linear-gradient(135deg, var(--u-violet-50) 0%, var(--u-surface) 75%);
    border-radius: var(--u-r-md);
    margin-bottom: 6px;
}
.u-account-menu__header-info { min-width: 0; flex: 1; }
.u-account-menu__header-name {
    font-weight: var(--u-fw-bold);
    color: var(--u-ink);
    font-size: var(--u-text-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}
.u-account-menu__header-sub {
    color: var(--u-mute);
    font-size: var(--u-text-xs);
    margin-top: 2px;
    display: flex; align-items: center; gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.u-account-menu__header-sub i {
    color: var(--color-secondary);
    font-size: 10px;
}

/* Sections + divider */
.u-account-menu__section {
    display: flex; flex-direction: column;
    gap: 1px;
}
.u-account-menu__divider {
    height: 1px;
    background: var(--u-line);
    margin: 6px 4px;
}

/* Menu items — anchor or button, styled the same. */
.u-account-menu__item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: var(--u-r-md);
    color: var(--u-ink-soft);
    text-decoration: none;
    font-size: var(--u-text-base);
    font-family: inherit;
    border: none;
    background: none;
    width: 100%;
    text-align: right;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.u-account-menu__item:hover {
    background: var(--u-bg);
    color: var(--u-ink);
}
.u-account-menu__item:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: -2px;
}
.u-account-menu__item i {
    width: 18px;
    color: var(--u-mute);
    font-size: 13px;
    text-align: center;
    flex-shrink: 0;
}

/* Current-page highlight — subtle. Different weight from the sidebar's
   active state (which is a solid violet fill) so it doesn't feel like
   a duplicated sidebar item inside a menu. */
.u-account-menu__item.is-current {
    background: var(--u-violet-50);
    color: var(--color-secondary-700);
    font-weight: var(--u-fw-semi);
}
.u-account-menu__item.is-current i {
    color: var(--color-secondary);
}

/* Disabled placeholder (dark mode "قريباً") */
.u-account-menu__item.is-disabled {
    color: var(--u-mute-soft);
    cursor: not-allowed;
    pointer-events: none;
}
.u-account-menu__item.is-disabled i { color: var(--u-mute-soft); }
.u-account-menu__item.is-disabled::after {
    content: "قريباً";
    margin-inline-start: auto;
    font-size: 9.5px;
    background: var(--u-bg);
    color: var(--u-mute);
    padding: 2px 7px;
    border-radius: var(--u-r-full);
    letter-spacing: 0.02em;
}

/* Logout item — red accent */
.u-account-menu__item--logout { color: var(--u-bad); }
.u-account-menu__item--logout i { color: var(--u-bad); }
.u-account-menu__item--logout:hover {
    background: var(--u-bad-bg);
    color: var(--u-bad);
}

/* Logout form wrapper — kill browser default margin. */
.u-account-menu__logout-form { margin: 0; }

/* ─── Public variant — for the navy public header context.
   Same DOM, hide the rich header block, invert trigger text colors. */
.u-account-menu--public .u-account-menu__name  { color: #fff; }
.u-account-menu--public .u-account-menu__caret { color: rgba(255, 255, 255, .7); }
.u-account-menu--public .u-account-menu__trigger:hover {
    background: rgba(255, 255, 255, .1);
}
.u-account-menu--public .u-account-menu__header    { display: none; }
.u-account-menu--public .u-account-menu__online-dot { display: none; }

/* Mobile — hide the name + caret next to the avatar. */
@media (max-width: 640px) {
    .u-account-menu__trigger .u-account-menu__name,
    .u-account-menu__trigger .u-account-menu__caret { display: none; }
    .u-account-menu__dropdown { min-width: 260px; }
}

/* ─────────────────────────────────────────────────────────
 * 22. PAGE ARCHITECTURE — <x-user.page>, <x-user.page-content>
 * ─────────────────────────────────────────────────────────
 * Canonical wrapper for every /user/* view. Encodes the structural
 * decisions in one place so no view redeclares them:
 *   - .u-page       → outer padding + hero→content gap
 *   - .u-page-content → inter-section rhythm below the hero
 *
 * The dashboard is the design reference; these values come from it.
 * Individual components' own margin-block is zeroed under both
 * wrappers so the parent's `gap` is the single source of spacing.
 */
.u-page {
    padding: var(--u-space-8);         /* 32px on all sides */
    display: flex;
    flex-direction: column;
    gap: var(--u-space-5);             /* 20px between hero and page-content */
}
/* Specificity boost — .u-area.u-page = 0,2,0 wins over the .formkit-hero
   margin-bottom rule that lives in form-kit.css (loaded after us). */
.u-area.u-page > * { margin-block: 0; }

.u-page-content {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-5);             /* 20px between top-level sections */
}
.u-page .u-page-content > * { margin-block: 0; }

/* Mobile shell — matches the layout's inner ~880px breakpoint. */
@media (max-width: 880px) {
    .u-page { padding: var(--u-space-4); }   /* 16px */
}