/* =============================================================================
   STAR8892 — SITE STYLES  (v3 "editorial" — matches the public Class of 1992 site)

   Light by default: warm sand page, white cards, ink-navy text, gold primary
   buttons, violet links, Fraunces serif headings, round pill buttons and a
   sticky top header (bottom tab bar on phones). A dark variant is available
   from the theme toggle (html[data-theme="dark"]).

   Many pages reference --a88-navy, --a88-gold, --a88-cream and --a88-gray-line
   directly in inline styles, so those names are kept and repointed here.
   ============================================================================= */

:root {
    --a88-bg: #f6f3ec;
    --a88-surface: #ffffff;
    --a88-surface-2: #efeadf;
    --a88-surface-alt: #f1ede3;
    --a88-line: #e3dfd4;
    --a88-accent: #5b4ae8;
    --a88-accent-dark: #4636c9;
    --a88-accent-rgb: 91, 74, 232;
    --a88-text: #10143a;
    --a88-text-muted: #565b7a;
    --a88-gold: #f2b01e;
    --a88-gold-text: #8a5f00;
    --a88-on-gold: #10143a;
    --a88-star-a: #e0a21a;
    --a88-star-b: rgba(91, 74, 232, .35);
    --a88-shadow-sm: 0 10px 26px rgba(16, 20, 58, .09);
    --a88-shadow-lg: 0 18px 44px rgba(16, 20, 58, .18);
    --a88-radius: 14px;
    --a88-radius-lg: 18px;
    --a88-header-h: 72px;
    --a88-font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --a88-font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
    --a88-navy: #10143a;
    --a88-cream: var(--a88-surface-alt);
    --a88-gray-line: var(--a88-line);
}

/* ── Dark variant (theme toggle) — the same ink navy the public site uses ── */

html[data-theme="dark"] {
    --a88-bg: #0d1021;
    --a88-surface: #151934;
    --a88-surface-2: #1b2145;
    --a88-surface-alt: #222952;
    --a88-line: #2b3263;
    --a88-accent: #7b6cff;
    --a88-accent-dark: #6a5cf5;
    --a88-accent-rgb: 123, 108, 255;
    --a88-text: #eceefd;
    --a88-text-muted: #a0a6d2;
    --a88-gold: #ffc94d;
    --a88-gold-text: #ffc94d;
    --a88-star-a: #ffc94d;
    --a88-star-b: rgba(255, 255, 255, .7);
    --a88-shadow-sm: 0 10px 28px rgba(5, 6, 20, .5);
    --a88-shadow-lg: 0 18px 44px rgba(4, 5, 20, .6);
    --a88-navy: #7b6cff;
}

/* Emoji-silhouette icons: white for dark, black for light. */
html[data-theme="light"] .a88-icon-glyph {
    filter: grayscale(1) brightness(0) invert(0);
}

html[data-theme="light"] .a88-auth-alert.error {
    background: #fdecea;
    color: #611a15;
}

html[data-theme="light"] .a88-auth-alert.info {
    background: #eceaff;
    color: #3a2db0;
}

* {
    box-sizing: border-box;
}

html,
body {
    background: var(--a88-bg);
}

body {
    background: var(--a88-bg);
    color: var(--a88-text);
    transition: background-color .15s ease, color .15s ease;
}

h1,
h2,
h3,
.a88-serif {
    color: var(--a88-text);
}

a {
    color: var(--a88-accent);
}

hr {
    border-color: var(--a88-line);
    opacity: 1;
}

/* ── Form controls (Bootstrap overrides for dark mode) ──────────────────── */

.form-control,
.form-select,
textarea.form-control,
input.form-control {
    background-color: var(--a88-surface-alt);
    border: 1px solid var(--a88-line);
    color: var(--a88-text);
}

    .form-control:focus,
    .form-select:focus {
        background-color: var(--a88-surface-alt);
        border-color: var(--a88-accent);
        color: var(--a88-text);
        box-shadow: 0 0 0 0.2rem rgba(106, 92, 245, 0.25);
    }

    .form-control::placeholder {
        color: var(--a88-text-muted);
    }

.form-label {
    color: var(--a88-text-muted);
    font-weight: 600;
    font-size: .85rem;
}

/* Shared page container — wraps @Body in MainLayout. Widened from the old
   1100px to 1320px so the home page's 3-column grid fits without a
   separate breakout; every other page just gets a little extra breathing
   room at the same centered, padded width. */
.a88-btn-primary {
    text-decoration: none;
    display: inline-block;
}

/* =============================================================================
   NAVIGATION
   • Signed in, ≥ 992px  → sticky top header (.a88-navbar.app), same look as the public site
   • Signed in, < 992px  → slim top bar + fixed bottom tab bar
   • Signed out          → slim top bar (.a88-navbar.bar)
   ============================================================================= */

.a88-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--a88-surface);
    color: var(--a88-text);
    font-family: var(--a88-font-body);
    border-bottom: 1px solid var(--a88-line);
}

.a88-navbar-inner {
    max-width: 1200px;
    height: var(--a88-header-h);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.a88-navbar svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.a88-navbar a {
    text-decoration: none;
}

/* Brand: round logo + wordmark */
.a88-navbar .brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--a88-text);
    flex-shrink: 0;
}

    .a88-navbar .brand:hover {
        color: var(--a88-text);
    }

.a88-navbar .brand-logo {
    height: 48px;
    width: auto;
    border-radius: 8px;
    flex-shrink: 0;
}

.a88-navbar .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

    .a88-navbar .brand-text strong {
        font-family: var(--a88-font-display);
        font-size: 1.25rem;
        font-weight: 700;
    }

    .a88-navbar .brand-text small {
        font-size: .72rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--a88-text-muted);
    }

.a88-navbar-left {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
}

/* Search */
.a88-navbar-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--a88-surface-alt);
    border: 1.5px solid transparent;
    border-radius: 999px;
    padding: .5rem .9rem;
    width: 240px;
    color: var(--a88-text-muted);
}

    .a88-navbar-search:focus-within {
        border-color: var(--a88-accent);
    }

    .a88-navbar-search svg {
        width: 16px;
        height: 16px;
    }

    .a88-navbar-search input {
        background: transparent;
        border: none;
        outline: none;
        color: var(--a88-text);
        font-size: .9rem;
        width: 100%;
        min-width: 0;
    }

        .a88-navbar-search input::placeholder {
            color: var(--a88-text-muted);
        }

/* Page links */
.a88-nav-center {
    display: flex;
    gap: .6rem;
    margin-left: auto;
}

.a88-nav-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 46px;
    margin-top: 2px;
    border-bottom: 3px solid transparent;
    color: var(--a88-text-muted);
    position: relative;
}

    .a88-nav-tab svg {
        display: block;
        width: 26px;
        height: 26px;
    }

    .a88-nav-tab:hover {
        color: var(--a88-text);
        background: var(--a88-surface-alt);
        border-radius: 12px 12px 0 0;
    }

    .a88-nav-tab.active {
        color: var(--a88-text);
        border-bottom-color: var(--a88-gold);
    }

/* The words stay in the page for screen readers (and show as a tooltip via title=""). */
.a88-nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Utility zone */
.a88-navbar-right {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.a88-navbar-tools {
    display: flex;
    gap: .5rem;
}

.a88-navbar-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    color: var(--a88-text);
    border: 1.5px solid var(--a88-line);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

    .a88-navbar-circle:hover {
        border-color: var(--a88-text);
        background: var(--a88-surface-alt);
        color: var(--a88-text);
    }

.a88-navbar-avatar-btn {
    border-radius: 50%;
}

.a88-navbar-avatar-name,
.a88-account-chevron {
    display: none;
}

.a88-icon-glyph {
    display: inline-block;
    filter: grayscale(1) brightness(0) invert(1);
}

/* Signed-out bar */
.a88-navbar.bar .a88-navbar-inner {
    justify-content: space-between;
}

.a88-navbar.bar .a88-navbar-right a:not(.a88-btn-primary) {
    color: var(--a88-text);
    font-weight: 600;
    padding: 0 .5rem;
}

/* Dropdowns hang under their button */
.a88-notif-dropdown,
.a88-account-menu {
    left: auto;
    bottom: auto;
}

/* ── Phones / tablets: slim top bar + bottom tab bar ───────────────────── */

@media (max-width: 991.98px) {
    .a88-navbar-inner {
        height: 60px;
        padding: 0 14px;
        gap: .75rem;
        justify-content: space-between;
    }

    .a88-navbar .brand-logo {
        height: 42px;
        width: auto;
    }

    .a88-navbar .brand-text strong {
        font-size: 1.1rem;
    }

    .a88-navbar .brand-text small,
    .a88-navbar-search {
        display: none;
    }

    .a88-nav-center {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        padding: 0 .4rem env(safe-area-inset-bottom, 0px);
        margin: 0;
        gap: 0;
        background: var(--a88-surface);
        border-top: 1px solid var(--a88-line);
        justify-content: space-around;
        z-index: 1000;
    }

    .a88-nav-tab {
        flex: 1;
        width: auto;
        height: 100%;
        margin: 0;
        border-bottom: 0;
        border-radius: 0;
        color: var(--a88-text-muted);
    }

        .a88-nav-tab:hover {
            background: none;
            border-radius: 0;
        }

        .a88-nav-tab svg {
            width: 27px;
            height: 27px;
        }

        .a88-nav-tab.active {
            color: var(--a88-text);
            box-shadow: inset 0 3px 0 var(--a88-gold);
        }

            .a88-nav-tab.active svg {
                color: var(--a88-gold-text);
            }

    .a88-notif-dropdown,
    .a88-account-menu {
        position: fixed;
        top: 66px;
        right: .5rem;
        width: min(360px, calc(100vw - 1rem));
    }
}

/* ── Signed-in desktop header: [ logo + search ] [ centered tabs ] [ tools + avatar ] ──
   Three-column grid with equal 1fr side columns, so the middle column is
   always dead-center on the screen no matter how wide the left/right groups
   are. Left group hugs the far left edge, right group hugs the far right. */
@media (min-width: 992px) {
    .a88-navbar.app .a88-navbar-inner {
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        column-gap: 1.5rem;
        padding: 0 24px;
    }

    .a88-navbar.app .a88-navbar-left {
        justify-self: start;
        width: 100%;
    }

    .a88-navbar.app .a88-navbar-search {
        flex: 1 1 auto;
        width: auto;
        max-width: 240px;
        min-width: 0;
    }

    .a88-navbar.app .a88-nav-center {
        justify-self: center;
        margin: 0;
    }

    .a88-navbar.app .a88-navbar-right {
        justify-self: end;
    }
}

/* Narrow desktops: drop the wordmark so the left group fits beside the centered tabs */
@media (min-width: 992px) and (max-width: 1099.98px) {
    .a88-navbar.app .brand-text {
        display: none;
    }
}

.a88-notif-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Hero banner ─────────────────────────────────────────────────────────── */

.a88-hero {
    color: var(--a88-text);
    margin-bottom: 1.5rem;
}

    .a88-hero h1 {
        color: var(--a88-text);
        margin-bottom: 0;
    }

    .a88-hero p {
        margin-bottom: .35rem;
    }

/* =============================================================================
   HOME LAYOUT — fluid 3-column grid (left rail / center feed / right rail)
   ============================================================================= */

.a88-layout-grid {
    display: grid;
    align-items: start;
}

.a88-rail-right {
    position: sticky;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.a88-feed-col {
    min-width: 0;
}

.a88-widget {
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    padding: 1rem;
}

    .a88-widget h6 {
        color: var(--a88-text);
    }

.a88-widget-item {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--a88-line);
    font-size: .85rem;
}

    .a88-widget-item:last-child {
        border-bottom: none;
    }

    .a88-widget-item a {
        color: var(--a88-text);
        text-decoration: none;
        font-weight: 600;
    }

        .a88-widget-item a:hover {
            color: var(--a88-accent);
        }

@media (max-width: 1180px) {
    .a88-layout-grid {
        grid-template-columns: 240px minmax(0, 640px);
    }

    .a88-rail-right {
        display: none;
    }
}

@media (max-width: 860px) {
    .a88-layout-grid {
        grid-template-columns: minmax(0, 640px);
    }
}

/* ── Directory / event cards (grid style) ────────────────────────────────── */

.a88-card {
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    padding: 1.25rem;
    transition: box-shadow 0.15s ease, border-color .15s ease;
}

.a88-avatar-sm {
    width: 64px;
    height: 64px;
    object-fit: cover;
}

/* =============================================================================
   PROFILE DASHBOARD — cover banner, overlapping avatar, identity block,
   underline tab bar, and a two-column (personal-details / activity) grid.

   NOTE: this is contained within the app's existing max-width page column
   rather than bleeding to the full viewport edge like Facebook's — that
   keeps it consistent with every other page's container, while the
   --a88-surface vs --a88-bg contrast still reads as a distinct dark panel.
   ============================================================================= */

.a88-profile-shell {
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    overflow: hidden;
}

.a88-profile-cover {
    width: 100%;
    aspect-ratio: 16 / 6;
    max-height: 360px;
    background: linear-gradient(135deg, var(--a88-surface) 0%, var(--a88-surface-2) 100%);
    position: relative;
    overflow: hidden;
}

    .a88-profile-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.a88-cover-edit-btn {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    background: rgba(24, 25, 26, 0.55);
    color: #fff;
    border: none;
    padding: .5rem 1rem;
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(2px);
}

    .a88-cover-edit-btn:hover {
        background: rgba(24, 25, 26, 0.75);
    }

    .a88-cover-edit-btn input[type="file"] {
        display: none;
    }

    .a88-cover-edit-btn.is-busy {
        opacity: .75;
        pointer-events: none;
        cursor: progress;
    }

.a88-cover-error {
    position: absolute;
    right: 1rem;
    bottom: 3.6rem;
    max-width: calc(100% - 2rem);
    background: #b00020;
    color: #fff;
    padding: .4rem .75rem;
    border-radius: 6px;
    font-size: .8rem;
}

.a88-profile-header {
    padding: 0 1.5rem 1rem;
    position: relative;
}

.a88-profile-avatar-wrap {
    position: absolute;
    top: -100px;
    left: 1.5rem;
    width: 176px;
    height: 176px;
}

.a88-profile-avatar {
    display: block;
    width: 100%;
    height: 100%;
    border: 8px solid var(--a88-surface);
    object-fit: cover;
    background: var(--a88-surface-alt);
}

.a88-avatar-edit-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    font-size: 1.05rem;
    cursor: pointer;
    z-index: 2;
}

    .a88-avatar-edit-btn:hover {
        background: var(--a88-surface-alt);
    }

    .a88-avatar-edit-btn input[type="file"],
    .a88-tn-frame input[type="file"] {
        display: none;
    }

    .a88-avatar-edit-btn.is-busy,
    .a88-tn-frame.is-busy {
        opacity: .7;
        pointer-events: none;
        cursor: progress;
    }


.a88-profile-identity-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    padding-left: 200px;
    padding-top: 1rem;
    min-height: 76px;
}

@media (max-width: 640px) {
    .a88-profile-avatar-wrap {
        width: 120px;
        height: 120px;
        top: -60px;
    }

    .a88-avatar-edit-btn {
        width: 34px;
        height: 34px;
        right: 2px;
        bottom: 2px;
        font-size: .95rem;
    }

    .a88-profile-identity-row {
        padding-left: 0;
        margin-top: 70px;
    }
}

.a88-profile-name {
    color: var(--a88-text);
    line-height: 1.2;
}

.a88-profile-stats {
    color: var(--a88-text-muted);
    font-size: .9rem;
    margin-top: .2rem;
}

.a88-profile-bio-line {
    color: var(--a88-text);
    font-size: .9rem;
    margin-top: .4rem;
}

.a88-profile-category-line {
    color: var(--a88-text-muted);
    font-size: .85rem;
    margin-top: .1rem;
}

.a88-profile-actions {
    display: flex;
    gap: .6rem;
    flex-shrink: 0;
    padding-bottom: .1rem;
}

.a88-btn-secondary {
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

.a88-profile-tabs {
    display: flex;
    margin-top: 1rem;
}

    .a88-profile-tabs button {
        background: none;
        border: none;
        font-weight: 600;
        font-size: .95rem;
        color: var(--a88-text-muted);
        cursor: pointer;
        position: relative;
    }

        .a88-profile-tabs button:hover {
            color: var(--a88-text);
        }

        .a88-profile-tabs button.active::after {
            content: "";
            position: absolute;
            left: .25rem;
            right: .25rem;
            bottom: -1px;
            height: 3px;
            border-radius: 2px 2px 0 0;
            background: var(--a88-accent);
        }

        .a88-profile-tabs button:disabled {
            color: var(--a88-line);
            cursor: default;
        }

/* ── Two-column grid: personal details sidebar + main activity column ───── */

.a88-profile-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

@media (max-width: 860px) {
    .a88-profile-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.a88-pd-card {
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    padding: 1.25rem;
}

    .a88-pd-card h3 {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--a88-text);
        margin-bottom: .75rem;
        font-family: inherit;
    }

.a88-pd-item {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .5rem 0;
}

.a88-pd-icon {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    opacity: .85;
    margin-top: .1rem;
}

.a88-pd-text {
    font-size: .9rem;
    color: var(--a88-text);
    line-height: 1.35;
}

.a88-profile-side {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

/* Then & now: two equal square photos side by side */
.a88-tn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.a88-tn-tile {
    margin: 0;
    min-width: 0;
}

.a88-tn-frame {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--a88-line);
    background: var(--a88-surface-alt);
}

    .a88-tn-frame.is-editable {
        cursor: pointer;
    }

.a88-tn-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.a88-tn-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    border: 2px dashed var(--a88-line);
    border-radius: 12px;
    color: var(--a88-text-muted);
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
}

.a88-tn-edit {
    position: absolute;
    right: .4rem;
    bottom: .4rem;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    font-size: .85rem;
}

.a88-tn-caption {
    margin-top: .4rem;
    text-align: center;
    font-size: .85rem;
    font-weight: 700;
    color: var(--a88-text);
}

.a88-tn-error {
    display: block;
    margin-top: .6rem;
    color: #b00020;
}

.a88-pd-more-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--a88-surface-alt);
    color: var(--a88-text);
    border: none;
    border-radius: 6px;
    padding: .55rem;
    font-weight: 600;
    font-size: .85rem;
    margin-top: .5rem;
    cursor: pointer;
}

    .a88-pd-more-btn:hover {
        background: var(--a88-line);
    }

.a88-posts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

    .a88-posts-header h3 {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--a88-text);
        font-family: inherit;
    }

.a88-posts-header-actions {
    display: flex;
    gap: .5rem;
}

.a88-posts-filter {
    background: var(--a88-surface-alt);
    color: var(--a88-text);
    border: 1px solid var(--a88-line);
    border-radius: 6px;
    padding: .35rem .6rem;
    font-size: .85rem;
}

.a88-posts-manage-btn {
    background: var(--a88-surface-alt);
    color: var(--a88-text-muted);
    border: none;
    border-radius: 6px;
    padding: .4rem .8rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: not-allowed;
}

/* =============================================================================
   WALL / FEED — composer + posts, Facebook card style
   ============================================================================= */

.a88-composer,
.a88-post {
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    margin-bottom: 1rem;
}

/* Round avatar sitting next to a wide, pill-style mock-button input row */
.a88-composer-row {
    display: flex;
    align-items: center;
    gap: .75rem;
}

    .a88-composer-row .a88-avatar-sm {
        border-color: var(--a88-line);
        flex-shrink: 0;
    }

.a88-composer-input {
    flex: 1;
    color: var(--a88-text);
    font-size: .95rem;
    background: var(--a88-surface-alt);
    resize: none;
    overflow: hidden;
    line-height: 1.3;
}

    .a88-composer-input::placeholder {
        color: var(--a88-text-muted);
    }

    .a88-composer-input:focus {
        outline: none;
    }

.a88-composer-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-top: 1px solid var(--a88-line);
    margin-top: .85rem;
    padding-top: .65rem;
}

.a88-post-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.a88-post-author {
    color: var(--a88-text);
}

.a88-post-meta {
    font-size: 0.8rem;
    color: var(--a88-text-muted);
}

.a88-reaction-bar {
    display: flex;
    margin-top: 0.75rem;
}

    .a88-reaction-bar button {
        background: none;
        color: var(--a88-text-muted);
        font-size: 0.9rem;
        cursor: pointer;
    }

        .a88-reaction-bar button:hover {
            background: var(--a88-surface-alt);
            color: var(--a88-text);
        }

        .a88-reaction-bar button.active {
            font-weight: 700;
        }

/* Nested speech-bubble comments (gray rounded panel, avatar left) */
.a88-comment-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .5rem;
}

.a88-comment {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.a88-comment-avatar {
    width: 32px;
    height: 32px;
    object-fit: cover;
    flex-shrink: 0;
}

.a88-comment-bubble {
    background: var(--a88-surface-alt);
    padding: .5rem .8rem;
    font-size: .88rem;
    color: var(--a88-text);
}

    .a88-comment-bubble strong {
        color: var(--a88-text);
        font-size: .85rem;
    }

.a88-comment-compose {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .6rem;
}

    .a88-comment-compose input.form-control {
        background: var(--a88-surface-alt);
    }

    .a88-comment-compose button {
        border-radius: 999px;
        white-space: nowrap;
    }

/* ── Notification bell ───────────────────────────────────────────────────── */

.a88-navbar-notif {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.a88-notif-badge {
    position: absolute;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

/* ── Notification dropdown ───────────────────────────────────────────────── */

.a88-notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    max-height: 420px;
    overflow-y: auto;
    background: var(--a88-surface);
    color: var(--a88-text);
    border: 1px solid var(--a88-line);
    z-index: 1000;
}

.a88-notif-dropdown-header {
    padding: .75rem 1rem;
    font-weight: 700;
    color: var(--a88-text);
    border-bottom: 1px solid var(--a88-line);
}

.a88-notif-dropdown-empty {
    padding: 1.25rem 1rem;
    color: var(--a88-text-muted);
    font-size: .9rem;
    text-align: center;
}

.a88-notif-dropdown-item {
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--a88-line);
    cursor: pointer;
}

    .a88-notif-dropdown-item:hover {
        background: var(--a88-surface-alt);
    }

    .a88-notif-dropdown-item.unread {
        border-left: 3px solid var(--a88-gold);
    }

.a88-notif-dropdown-title {
    font-size: .88rem;
    font-weight: 600;
    color: var(--a88-text);
}

.a88-notif-dropdown-body {
    font-size: .82rem;
    color: var(--a88-text-muted);
    margin-top: .15rem;
}

.a88-notif-dropdown-time {
    font-size: .72rem;
    color: var(--a88-text-muted);
    margin-top: .25rem;
}

.a88-notif-dropdown-viewall {
    display: block;
    text-align: center;
    padding: .6rem;
    font-size: .85rem;
    color: var(--a88-accent);
    text-decoration: none;
    font-weight: 600;
}

    .a88-notif-dropdown-viewall:hover {
        background: var(--a88-surface-alt);
    }

/* =============================================================================
   ACCOUNT MENU — avatar-triggered dropdown (settings/help/logout), styled
   like the notification dropdown above but wider, with an identity card
   up top and icon-prefixed list rows below.
   ============================================================================= */

.a88-navbar-avatar-btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    cursor: pointer;
    flex-shrink: 0;
}

    .a88-navbar-avatar-btn img {
        object-fit: cover;
        display: block;
    }

.a88-account-chevron {
    color: var(--a88-text-muted);
    font-size: .7rem;
}

.a88-account-menu-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.a88-account-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    background: var(--a88-surface);
    color: var(--a88-text);
    border: 1px solid var(--a88-line);
    z-index: 1000;
    padding: .5rem;
}

.a88-account-menu-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--a88-text);
    font-weight: 600;
}

    .a88-account-menu-card:hover {
        background: var(--a88-surface-alt);
    }

    .a88-account-menu-card img {
        width: 44px;
        height: 44px;
        object-fit: cover;
        flex-shrink: 0;
    }

.a88-account-menu-divider {
    border-top: 1px solid var(--a88-line);
    margin: .5rem 0;
}

.a88-account-menu-item,
.a88-account-menu form {
    display: block;
    width: 100%;
}

.a88-account-menu-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: none;
    border: none;
    padding: .55rem .5rem;
    border-radius: 8px;
    color: var(--a88-text);
    font-size: .9rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

    .a88-account-menu-item:hover {
        background: var(--a88-surface-alt);
    }

    .a88-account-menu-item:disabled {
        color: var(--a88-text-muted);
        cursor: default;
    }

        .a88-account-menu-item:disabled:hover {
            background: none;
        }

.a88-account-menu-icon {
    width: 32px;
    height: 32px;
    background: var(--a88-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.a88-account-menu-label {
    flex: 1;
}

.a88-account-menu-chevron {
    color: var(--a88-text-muted);
    font-size: 1.1rem;
}

/* Mobile: pin both navbar dropdowns to the viewport's right edge. This must
   come AFTER the desktop base rules above (position:absolute; right:0), which
   otherwise override the earlier mobile media query and make the bell's
   dropdown hang off the bell button instead of the screen edge. */
@media (max-width: 991.98px) {
    .a88-notif-dropdown,
    .a88-account-menu {
        position: fixed;
        top: 66px;
        right: .5rem;
        left: auto;
        width: min(360px, calc(100vw - 1rem));
    }

    .a88-notif-dropdown {
        max-height: calc(100vh - 66px - 64px - env(safe-area-inset-bottom, 0px) - .5rem);
    }
}

/* =============================================================================
   AUTH SCREENS — split-screen login/register layout (Facebook-style entry
   page). Built off the same theme variables as the rest of the app, so it
   follows the dark/light toggle instead of a hardcoded light palette.
   ============================================================================= */

.a88-auth-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.a88-auth-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid var(--a88-line);
    min-width: 0;
}

.a88-auth-tagline {
    margin-bottom: 2.5rem;
}

/* Stacked "collage" of placeholder cards, echoing the floating
   story/profile-card composition on Facebook's entry page. */
.a88-auth-card h2 {
    color: var(--a88-text);
}

.a88-auth-field {
    margin-bottom: .9rem;
}

.a88-auth-input {
    width: 100%;
    padding: .9rem 1.1rem;
    font-size: 1rem;
}

    .a88-auth-input::placeholder {
        color: var(--a88-text-muted);
    }

    .a88-auth-input:focus {
        outline: none;
    }

.a88-auth-btn-primary {
    display: block;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
}

    .a88-auth-btn-primary:disabled {
        opacity: .65;
        cursor: default;
    }

    .a88-auth-btn-primary.is-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .6rem;
    }

/* Small spinner used inside buttons while a form is submitting */
.a88-spinner {
    width: 1.05em;
    height: 1.05em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    flex-shrink: 0;
    animation: a88-spin .7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .a88-spinner {
        animation-duration: 1.6s;
    }
}

.a88-auth-btn-outline {
    display: block;
    width: 100%;
    background: transparent;
    font-size: 1rem;
    padding: .85rem;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

/* Admin / super admin dashboards */
.a88-dash {
    max-width: 960px;
    margin: 1.5rem auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.a88-dash h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--a88-text);
    margin: 0 0 .25rem;
}

.a88-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.a88-dash-tile {
    display: block;
    text-decoration: none;
    color: var(--a88-text);
}

.a88-dash-tile strong {
    display: block;
    font-size: 2rem;
    line-height: 1.1;
}

.a88-dash-tile span {
    color: var(--a88-text-muted);
    font-size: .9rem;
}

.a88-auth-remember {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0 0 1rem;
    font-size: .9rem;
    color: var(--a88-text);
    cursor: pointer;
}

.a88-auth-remember input {
    margin-top: .2rem;
}

.a88-auth-remember small {
    color: var(--a88-text-muted);
}

.a88-auth-link-row {
    text-align: center;
    margin: 1.25rem 0;
}

    .a88-auth-link-row a {
        text-decoration: none;
        font-size: .9rem;
    }

        .a88-auth-link-row a:hover {
            text-decoration: underline;
        }

.a88-auth-divider {
    border: none;
    border-top: 1px solid var(--a88-line);
    margin: 1.5rem 0;
}

.a88-auth-alert {
    padding: .75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: .9rem;
}

    .a88-auth-alert.error {
        background: rgba(214, 69, 69, 0.12);
        color: #f28b82;
    }

    .a88-auth-alert.info {
        background: rgba(106, 92, 245, 0.12);
        color: #8ab4f8;
    }

@media (max-width: 900px) {
    .a88-auth-shell {
        flex-direction: column;
    }

    .a88-auth-left {
        padding: 2.5rem 1.5rem 1rem;
        align-items: center;
        text-align: center;
    }

    .a88-auth-tagline {
        text-align: center;
    }

    .a88-auth-right {
        border-left: none;
        padding: 1.5rem;
    }
}

/* =============================================================================
   EVENTS — left filter/category rail + right "Discover events" grid.
   Sits inside the existing .a88-page-main container/tokens rather than
   bleeding full-viewport.
   ============================================================================= */

.a88-events-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 900px) {
    .a88-events-layout {
        grid-template-columns: 1fr;
    }
}

.a88-events-sidebar {
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    padding: 1.25rem 1rem;
    position: sticky;
}

.a88-events-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--a88-text);
    margin: 0 0 .75rem;
}

.a88-events-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--a88-surface-alt);
    border-radius: 50px;
    padding: .5rem .9rem;
}

    /* Sized explicitly for the top filter bar (a flex row that otherwise
       shrink-wraps its items) instead of the full-width block it used to
       fill inside the sidebar. */
    .a88-events-search.a88-events-search-inline {
        flex: 0 1 260px;
    }

    .a88-events-search input {
        background: transparent;
        border: none;
        outline: none;
        color: var(--a88-text);
        width: 100%;
        font-size: .9rem;
    }

        .a88-events-search input::placeholder {
            color: var(--a88-text-muted);
        }

.a88-events-create-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin: .75rem 0 1rem;
}

.a88-events-nav {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-bottom: 1rem;
}

.a88-events-nav-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem;
    border-radius: 8px;
    color: var(--a88-text);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
}

    .a88-events-nav-item:hover {
        background: var(--a88-surface-alt);
    }

    .a88-events-nav-item.active {
        background: var(--a88-accent);
        color: #fff;
    }

/* Menu items that are buttons (Games sidebar) instead of links */
button.a88-events-nav-item {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.a88-events-heading {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--a88-text);
    margin: 0 0 .75rem;
}

.a88-events-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.a88-filter-pill {
    background: var(--a88-surface-alt);
    color: var(--a88-text);
    border: none;
    border-radius: 50px;
    padding: .45rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

    .a88-filter-pill:hover {
        background: var(--a88-line);
    }

    .a88-filter-pill.active {
        background: var(--a88-accent);
        color: #fff;
    }

.a88-filter-select {
    background: var(--a88-surface-alt);
    color: var(--a88-text);
    border: none;
    border-radius: 50px;
    padding: .45rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

    .a88-filter-select:hover {
        background: var(--a88-line);
    }

    .a88-filter-select:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(var(--a88-accent-rgb), .28);
    }

/* The open list is drawn by the browser: tell it which theme to use and give every option the site colours. */
.a88-filter-select {
    color-scheme: light;
}

html[data-theme="dark"] .a88-filter-select {
    color-scheme: dark;
}

    .a88-filter-select option {
        background: var(--a88-surface);
        color: var(--a88-text);
    }

/* Browsers with customizable selects (Chrome / Edge 135+) get a fully themed popup; the rest keep the rules above. */
@supports (appearance: base-select) {
    .a88-filter-select,
    .a88-filter-select::picker(select) {
        appearance: base-select;
    }

    .a88-filter-select {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
    }

        .a88-filter-select::picker-icon {
            color: var(--a88-text-muted);
            font-size: .75rem;
            transition: rotate .15s ease;
        }

        .a88-filter-select:open::picker-icon {
            rotate: 180deg;
        }

        .a88-filter-select::picker(select) {
            min-width: anchor-size(width);
            margin-top: .4rem;
            padding: .35rem;
            background: var(--a88-surface);
            border: 1.5px solid var(--a88-line);
            border-radius: var(--a88-radius);
            box-shadow: var(--a88-shadow-lg);
        }

        .a88-filter-select option {
            padding: .5rem .85rem;
            border-radius: 10px;
            background: transparent;
            color: var(--a88-text);
            font-size: .85rem;
            font-weight: 600;
            cursor: pointer;
        }

            .a88-filter-select option::checkmark {
                display: none;
            }

            .a88-filter-select option:hover,
            .a88-filter-select option:focus-visible {
                background: rgba(var(--a88-accent-rgb), .12);
            }

            .a88-filter-select option:checked {
                background: rgba(var(--a88-accent-rgb), .18);
                color: var(--a88-accent);
                font-weight: 700;
            }
}

.a88-chevron {
    font-size: .7rem;
}

.a88-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 20px;
}

.a88-event-card {
    position: relative;
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s ease, border-color .15s ease;
}

    .a88-event-card:hover {
        border-color: #4a4d50;
    }

.a88-event-link {
    color: inherit;
    text-decoration: none;
    display: block;
}

.a88-event-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--a88-surface-2);
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

    .a88-event-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.a88-event-options-wrap {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 60;
}

    /* Anchor the dropdown to the wrapper (not to .a88-event-card's full
       height), so it opens directly under the ⋯ button. */
    .a88-event-options-wrap .a88-dropdown-menu {
        top: calc(100% + 4px);
    }

.a88-event-options-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(2px);
}

    .a88-event-options-btn:hover {
        background: rgba(0, 0, 0, 0.7);
    }

.a88-event-body {
    padding: .75rem .9rem .25rem;
}

.a88-event-date {
    color: var(--a88-accent);
    font-weight: 700;
    font-size: .85rem;
    margin-bottom: .2rem;
}

.a88-event-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--a88-text);
    margin: 0 0 .2rem;
    line-height: 1.3;
}

.a88-event-sub {
    color: var(--a88-text-muted);
    font-size: .85rem;
    margin-bottom: .5rem;
}

.a88-event-footer {
    display: flex;
    gap: .5rem;
    padding: 0.3rem .9rem .9rem;
}

.a88-btn-interested {
    flex: 1;
    background: transparent;
    border: 1px solid var(--a88-line);
    color: var(--a88-text);
    border-radius: 6px;
    padding: .45rem .5rem;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
}

    .a88-btn-interested:hover {
        background: var(--a88-surface-alt);
    }

    .a88-btn-interested.active {
        border-color: var(--a88-accent);
        color: var(--a88-accent);
    }

.a88-btn-share-square {
    width: 2.4rem;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--a88-line);
    color: var(--a88-text);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
}

    .a88-btn-share-square:hover {
        background: var(--a88-surface-alt);
    }

/* a88-btn-join reuses a88-btn-primary's box model but sits inline in an
   a88-event-footer row alongside a88-btn-interested, so it needs the same
   flex/sizing rules that class doesn't otherwise have. */
.a88-btn-join {
    flex: 1;
    padding: .45rem .5rem;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
}

    .a88-btn-join.active,
    .a88-btn-join:disabled {
        background: var(--a88-surface-alt);
        color: var(--a88-text-muted);
        cursor: default;
    }

/* =============================================================================
   EVENTS CALENDAR — month grid, reuses the same a88-events-layout/sidebar
   shell as Events.razor so nav/filters look identical between the two views.
   ============================================================================= */

.a88-calendar-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.a88-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.a88-calendar-dow {
    text-align: center;
    font-weight: 600;
    color: var(--a88-text-muted);
    font-size: .8rem;
    padding-bottom: .4rem;
}

.a88-calendar-cell {
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    border-radius: var(--a88-radius);
    min-height: 110px;
    padding: .4rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

    .a88-calendar-cell.outside {
        opacity: .4;
    }

    .a88-calendar-cell.today {
        border-color: var(--a88-accent);
    }

.a88-calendar-daynum {
    font-size: .8rem;
    font-weight: 600;
    color: var(--a88-text-muted);
}

.a88-calendar-chip {
    display: block;
    font-size: .72rem;
    background: var(--a88-surface-alt);
    color: var(--a88-text);
    border-radius: 4px;
    padding: .15rem .35rem;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .a88-calendar-chip:hover {
        background: var(--a88-accent);
        color: #fff;
    }

.a88-calendar-more {
    font-size: .7rem;
    background: none;
    border: none;
    color: var(--a88-text-muted);
    text-align: left;
    padding: 0;
    cursor: pointer;
}

/* =============================================================================
   MARKETPLACE — reuses a88-events-layout/sidebar/grid/card shell for a
   consistent look with the Events pages; only listing-specific bits added.
   ============================================================================= */

.a88-marketplace-badge-sell {
    display: inline-block;
    background: var(--a88-surface-alt);
    color: var(--a88-navy);
    font-weight: 700;
    border-radius: 6px;
    padding: .2rem .55rem;
    font-size: .85rem;
}

.a88-marketplace-badge-free {
    display: inline-block;
    background: var(--a88-gold);
    color: var(--a88-navy);
    font-weight: 700;
    border-radius: 6px;
    padding: .2rem .55rem;
    font-size: .85rem;
}

/* =============================================================================
   NOTIFICATIONS PANEL — full-page inbox list (distinct from the navbar's
   .a88-notif-dropdown popover). Row: circular avatar + type-icon badge,
   name/excerpt, timestamp, unread dot.
   ============================================================================= */

.a88-notif-panel {
    max-width: 680px;
    margin: 0 auto;
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    border-radius: var(--a88-radius-lg);
    overflow: hidden;
}

.a88-notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--a88-line);
}

.a88-notif-panel-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--a88-text);
    display: flex;
    align-items: baseline;
    gap: .75rem;
}

    .a88-notif-panel-title a {
        font-size: .85rem;
        font-weight: 600;
        color: var(--a88-accent);
        text-decoration: none;
    }

        .a88-notif-panel-title a:hover {
            text-decoration: underline;
        }

.a88-notif-tabs {
    display: flex;
    gap: .4rem;
}

.a88-notif-tab {
    background: var(--a88-surface-alt);
    color: var(--a88-text);
    border: none;
    border-radius: 50px;
    padding: .4rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

    .a88-notif-tab:hover {
        background: var(--a88-line);
    }

    .a88-notif-tab.active {
        background: var(--a88-accent);
        color: #fff;
    }

.a88-notif-list {
    display: flex;
    flex-direction: column;
}

.a88-notif-panel-empty {
    color: var(--a88-text-muted);
    text-align: center;
    padding: 2.5rem 1rem;
    margin: 0;
}

.a88-notif-row {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .75rem 1.25rem;
    cursor: pointer;
    border-radius: 8px;
}

    .a88-notif-row:hover {
        background: var(--a88-surface-alt);
    }

.a88-notif-avatar-wrap {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.a88-notif-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

.a88-notif-badge-icon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--a88-surface-alt);
    border: 2px solid var(--a88-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    line-height: 1;
}

.a88-notif-row-body {
    flex: 1;
    min-width: 0;
}

.a88-notif-row-name {
    font-size: .95rem;
    line-height: 1.35;
    color: var(--a88-text);
}

    .a88-notif-row-name strong {
        font-weight: 700;
    }

    .a88-notif-row-name .excerpt {
        font-weight: 400;
        color: var(--a88-text-muted);
    }

.a88-notif-row-time {
    font-size: .8rem;
    color: var(--a88-text-muted);
    margin-top: .15rem;
}

.a88-notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--a88-accent);
    flex-shrink: 0;
    transition: opacity .15s ease;
}

/* =============================================================================
   FRIENDS-STYLE DIRECTORY — left nav rail + right "People you may know" grid.
   NOTE: "Friend requests"/"Suggestions"/"All alumni"/"Birthdays"/"Custom
   lists" and "Add friend"/"Remove" are visual only — there's no friend-graph
   model/service behind them yet.
   ============================================================================= */









.a88-alumni-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--a88-text);
    margin: 0;
}



.a88-alumni-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.a88-friend-card {
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s ease, border-color .15s ease;
}

    .a88-friend-card:hover {
        border-color: #4a4d50;
    }

.a88-friend-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: var(--a88-surface-2);
}

    .a88-friend-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.a88-friend-body {
    padding: .75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .35rem;
}

.a88-friend-actions {
    margin-top: auto;
    padding-top: .35rem;
}

.a88-friend-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--a88-text);
    margin-bottom: .25rem;
}

.a88-friend-sub {
    font-size: .85rem;
    color: var(--a88-text-muted);
    margin-top: -.2rem;
    margin-bottom: .1rem;
}

.a88-btn-addfriend {
    display: block;
    text-align: center;
    width: 100%;
    background: var(--a88-accent);
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    padding: .5rem;
    text-decoration: none;
    cursor: pointer;
}

    .a88-btn-addfriend:hover {
        background: var(--a88-accent-dark);
        color: #fff;
    }

/* =============================================================================
   GAMES DASHBOARD — the sidebar is the shared GamesSidebar component (it reuses
   the .a88-events-* shell). Everything below is content specific to the Games
   page: the Featured-games rail and the Most-played tile grid.
   ============================================================================= */













.a88-games-section {
    margin-bottom: 2rem;
}

.a88-games-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.a88-games-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--a88-text);
    margin: 0;
    font-family: inherit;
}

/* ── Featured games rail ─────────────────────────────────────────────────── */

.a88-featured-row {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    scroll-behavior: smooth;
}

.a88-featured-card {
    flex: 0 0 300px;
    border-radius: var(--a88-radius-lg);
    overflow: hidden;
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
}

.a88-featured-media {
    position: relative;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.a88-featured-media-icon {
    font-size: 2.5rem;
    opacity: .9;
}

.a88-featured-card--a .a88-featured-media {
    background: linear-gradient(135deg, #6c3ce9, #b23cd6);
}

.a88-featured-card--b .a88-featured-media {
    background: linear-gradient(135deg, #6a5cf5, #ffc94d);
}

.a88-featured-card--c .a88-featured-media {
    background: linear-gradient(135deg, #1a8f4c, #0e6b39);
}

.a88-featured-overlay-btn {
    position: absolute;
    bottom: .6rem;
    right: .6rem;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
}

.a88-featured-banner {
    display: flex;
    gap: .75rem;
    padding: .75rem;
    align-items: center;
}

.a88-featured-card--a .a88-featured-banner {
    background: rgba(108, 60, 233, .35);
}

.a88-featured-card--b .a88-featured-banner {
    background: rgba(106, 92, 245, .35);
}

.a88-featured-card--c .a88-featured-banner {
    background: rgba(26, 143, 76, .35);
}

.a88-featured-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--a88-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.a88-featured-info {
    min-width: 0;
}

    .a88-featured-info .name {
        font-weight: 700;
        font-size: .95rem;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .a88-featured-info .meta {
        font-size: .78rem;
        color: rgba(255, 255, 255, .8);
        margin-top: .1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ── Most-played tile grid ───────────────────────────────────────────────── */

.a88-mostplayed-wrap {
    position: relative;
}

.a88-mostplayed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

.a88-game-tile {
    display: block;
    border-radius: var(--a88-radius-lg);
    overflow: hidden;
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, border-color .15s ease;
}

    .a88-game-tile:hover {
        border-color: #4a4d50;
    }

.a88-game-tile-media {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    background-size: cover;
    background-position: center;
}

.a88-game-tile-body {
    padding: .6rem .7rem;
}

.a88-game-tile-name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--a88-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.a88-game-tile-meta {
    font-size: .75rem;
    color: var(--a88-text-muted);
    margin-top: .1rem;
}

.a88-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--a88-text);
    z-index: 2;
}

    .a88-scroll-btn:hover {
        background: var(--a88-surface-alt);
    }

    .a88-scroll-btn.right {
        right: -1.1rem;
    }

.a88-games-empty {
    color: var(--a88-text-muted);
    text-align: center;
    padding: 2rem 1rem;
}

@media (max-width: 900px) {
    .a88-scroll-btn.right {
        display: none;
    }
}

/* =============================================================================
   ABOUT EDITOR — Facebook-style split "About" panel (fixed-width sub-nav +
   flexible content canvas) rendered inside MemberProfile.razor's "About"
   tab. Sits inside .a88-profile-main and reuses the same --a88-* palette so
   it reads as part of the same dark-canvas dashboard, not a bolted-on piece.
   ============================================================================= */

.a88-about-shell {
    display: flex;
    align-items: stretch;
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    overflow: hidden;
}

/* ── Left column: fixed-width sub-nav ────────────────────────────────────── */

.a88-about-nav {
    width: 360px;
    flex-shrink: 0;
    padding: 1.25rem 0.75rem;
    border-right: 1px solid var(--a88-line);
}

.a88-about-nav-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--a88-text);
    margin: 0 0.75rem 0.75rem;
    font-family: inherit;
}

.a88-about-nav-list {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.a88-about-nav-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 8px;
    padding: .65rem .75rem;
    font-size: .95rem;
    font-weight: 500;
    color: var(--a88-text);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

    .a88-about-nav-item:hover {
        background: var(--a88-surface-alt);
    }

    .a88-about-nav-item.active {
        background: rgba(106, 92, 245, 0.15);
        color: var(--a88-accent);
        font-weight: 700;
    }

/* ── Right column: flexible content canvas ───────────────────────────────── */

.a88-about-main {
    flex: 1;
    min-width: 0;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.a88-about-section {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--a88-line);
}

    .a88-about-section:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.a88-about-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--a88-text);
    margin-bottom: .6rem;
    font-family: inherit;
}

.a88-about-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .4rem 2.75rem .4rem .1rem;
    min-height: 2.25rem;
}

.a88-about-row-icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    opacity: .85;
}

.a88-about-row-text {
    color: var(--a88-text);
    font-size: .95rem;
    line-height: 1.4;
}

/* Floating circular pencil icon button, pinned to the row's far right edge. */
.a88-about-edit-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--a88-surface-alt);
    color: var(--a88-text);
    font-size: .85rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease;
}

    .a88-about-edit-btn:hover {
        background: var(--a88-line);
    }

.a88-about-edit-row {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.a88-about-edit-actions {
    display: flex;
    gap: .5rem;
}

.a88-about-empty {
    color: var(--a88-text-muted);
    font-size: .9rem;
    padding: 1rem 0;
}

@media (max-width: 720px) {
    .a88-about-shell {
        flex-direction: column;
    }

    .a88-about-nav {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--a88-line);
    }

    .a88-about-nav-list {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* =============================================================================
   POST / COMMENT EDIT & DELETE — a Facebook-style "⋯" trigger on the post
   header and each comment row that opens a small dropdown with Edit/Delete,
   plus the inline edit textarea/input that swaps in for the post body /
   comment bubble when active. Feed.razor and MemberProfile.razor's timeline
   both use these classes identically.
   ============================================================================= */

.a88-post-menu,
.a88-comment-menu {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
}

.a88-comment-menu {
    margin-left: 0;
}

.a88-menu-trigger {
    background: none;
    border: none;
    color: var(--a88-text-muted);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: .25rem .55rem;
    border-radius: 50%;
    transition: background-color .15s ease, color .15s ease;
}

    .a88-menu-trigger:hover {
        background: var(--a88-surface-alt);
        color: var(--a88-text);
    }

.a88-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    border-radius: 10px;
    padding: .35rem;
    z-index: 60;
}

.a88-dropdown-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 8px;
    padding: .55rem .6rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--a88-text);
    cursor: pointer;
}

    .a88-dropdown-item:hover {
        background: var(--a88-surface-alt);
    }

    .a88-dropdown-item.danger {
        color: #b00020;
    }

.a88-dropdown-icon {
    font-size: .95rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* Transparent full-viewport layer that sits under the dropdown and closes
   it on any outside click/tap — avoids needing JS interop for click-away. */
.a88-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: transparent;
}

/* =============================================================================
   MODAL — generic centered popup (RSVP customize, etc.)
   ============================================================================= */

.a88-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.a88-modal-card {
    position: relative;
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    border-radius: var(--a88-radius-lg);
    padding: 1.5rem;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
}

    .a88-modal-card h5 {
        margin-bottom: 1rem;
        padding-right: 1.5rem;
    }

.a88-modal-close {
    position: absolute;
    top: .75rem;
    right: .85rem;
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--a88-text-muted);
    cursor: pointer;
    padding: .25rem;
}

    .a88-modal-close:hover {
        color: var(--a88-text);
    }

/* =============================================================================
   RSVP LIST — organizer-only attendee view on EventsDetails.razor
   ============================================================================= */

.a88-rsvp-summary {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.a88-rsvp-stat {
    background: var(--a88-surface-alt);
    border-radius: var(--a88-radius);
    padding: .45rem .85rem;
    font-size: .8rem;
    color: var(--a88-text-muted);
}

    .a88-rsvp-stat strong {
        color: var(--a88-text);
        font-size: 1rem;
        margin-right: .3rem;
    }

.a88-rsvp-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.a88-rsvp-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem;
    background: var(--a88-surface-alt);
    border-radius: var(--a88-radius);
}

.a88-rsvp-row-main {
    flex: 1;
    min-width: 0;
}

.a88-rsvp-row-name {
    font-weight: 600;
    color: var(--a88-text);
    text-decoration: none;
}

    .a88-rsvp-row-name:hover {
        text-decoration: underline;
    }

.a88-rsvp-row-meta {
    font-size: .8rem;
    color: var(--a88-text-muted);
    margin-top: .1rem;
}

.a88-rsvp-badge {
    font-size: .75rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

    .a88-rsvp-badge.going {
        background: rgba(66, 183, 42, .15);
        color: #42b72a;
    }

    .a88-rsvp-badge.maybe {
        background: rgba(230, 167, 0, .15);
        color: #e6a700;
    }

    .a88-rsvp-badge.waitlisted {
        background: rgba(106, 92, 245, .15);
        color: var(--a88-accent);
    }

    .a88-rsvp-badge.not_going {
        background: rgba(224, 73, 92, .15);
        color: #e0495c;
    }

.a88-post-edit-row {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: .5rem;
}

.a88-post-edit-actions {
    display: flex;
    gap: .5rem;
}

/* Comment row grows a third flex slot (the "⋯" menu) alongside the existing
   avatar + bubble layout — .a88-comment-body wraps the bubble/edit-input so
   it can flex without disturbing the avatar's fixed size. */
.a88-comment-body {
    flex: 1;
    min-width: 0;
}

.a88-comment-edit-row {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.a88-comment-edit-actions {
    display: flex;
    gap: .4rem;
}

/* =============================================================================
   EDIT PROFILE FORM — polished, sectioned layout for MemberProfile.razor's
   "editing" state. Replaces the old flat stack-of-inputs-with-inline-styles
   with grouped sections (Basic Info / Location & Work / Bio / Photos /
   Privacy), each with its own heading and a consistent field rhythm.
   ============================================================================= */

.a88-edit-shell {
    max-width: 720px;
    margin: 1.75rem auto;
    padding: 0 1rem;
}

/* Shown inside another page's column (Settings → Account / Privacy): no centred page margins. */
.a88-edit-shell.is-embedded {
    max-width: none;
    margin: 0;
    padding: 0;
}

.a88-edit-card {
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    border-radius: var(--a88-radius-lg);
    padding: 1.75rem;
}

.a88-edit-header {
    margin-bottom: 1.25rem;
}

.a88-edit-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--a88-text);
    margin: 0 0 .3rem;
    font-family: inherit;
}

.a88-edit-subtitle {
    color: var(--a88-text-muted);
    font-size: .9rem;
    margin: 0;
}

.a88-edit-section {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--a88-line);
}

    .a88-edit-section:first-of-type {
        padding-top: 0;
    }

.a88-edit-section-last {
    border-bottom: none;
    padding-bottom: .25rem;
}

.a88-edit-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--a88-text);
    margin: 0 0 .9rem;
    font-family: inherit;
}

.a88-edit-field {
    margin-bottom: 1rem;
}

    .a88-edit-field:last-child {
        margin-bottom: 0;
    }

.a88-edit-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.a88-edit-hint {
    color: var(--a88-text-muted);
    font-size: .82rem;
    margin: .4rem 0 0;
    line-height: 1.4;
}

.a88-edit-hint-inline {
    color: var(--a88-text-muted);
    font-weight: 400;
    font-size: .82rem;
}

.a88-edit-photo-field {
    margin-bottom: 1.25rem;
}

    .a88-edit-photo-field:last-child {
        margin-bottom: 0;
    }

.a88-edit-checkbox {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--a88-text);
    font-size: .92rem;
    cursor: pointer;
    margin-bottom: .6rem;
}

    .a88-edit-checkbox input[type="checkbox"] {
        width: 1.1rem;
        height: 1.1rem;
        accent-color: var(--a88-accent);
        cursor: pointer;
    }

.a88-edit-error {
    background: rgba(176, 0, 32, .12);
    border: 1px solid rgba(176, 0, 32, .3);
    color: #ff6b6b;
    border-radius: 8px;
    padding: .6rem .8rem;
    font-size: .88rem;
    margin: 1rem 0;
}

.a88-edit-actions {
    display: flex;
    gap: .75rem;
    margin-top: 1.25rem;
}

@media (max-width: 640px) {
    .a88-edit-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .a88-edit-card {
        padding: 1.25rem;
    }
}

/* =============================================================================
   v2 REDESIGN LAYER — overrides for the older Facebook-style blocks above.
   Kept at the end of the file so it wins at equal specificity.
   ============================================================================= */

body {
    line-height: 1.5;
}

/* ── Buttons: pills ──────────────────────────────────────────────────────── */

.a88-btn-primary {
    padding: .5rem 1.35rem;
    letter-spacing: .005em;
}

.a88-btn-secondary {
    border-radius: 999px;
    padding: .45rem 1.2rem;
}

.btn {
    border-radius: 999px;
}

.form-control,
.form-select {
    border-radius: 12px;
}

/* ── Surfaces: rounder, calmer ───────────────────────────────────────────── */

.a88-card,
.a88-composer,
.a88-post,
.a88-widget,
.a88-pd-card,
.a88-profile-shell,
.a88-about-shell,
.a88-events-sidebar {
    border-radius: var(--a88-radius-lg);
}

.a88-card {
    box-shadow: none;
}

    .a88-card:hover {
        border-color: var(--a88-accent);
    }

html[data-theme="light"] .a88-card:hover {
    box-shadow: 0 10px 28px rgba(60, 50, 160, .12);
    border-color: var(--a88-accent);
}

/* ── Avatars: rounded squares ────────────────────────────────────────────── */

.a88-avatar-sm {
    border: 2px solid var(--a88-gold);
}

/* ── Masthead (page hero) ────────────────────────────────────────────────── */

.a88-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--a88-line);
    border-left: 1px solid var(--a88-line);
    border-radius: 22px;
    padding: 1.9rem 1.9rem 1.7rem;
    background: radial-gradient(circle at 9% 28%, var(--a88-star-a) 0 1.6px, transparent 2.2px), radial-gradient(circle at 84% 20%, var(--a88-star-b) 0 1.2px, transparent 1.8px), radial-gradient(circle at 71% 78%, var(--a88-star-a) 0 1.4px, transparent 2px), radial-gradient(circle at 38% 84%, var(--a88-star-b) 0 1.1px, transparent 1.7px), radial-gradient(circle at 93% 62%, var(--a88-star-b) 0 1px, transparent 1.6px), linear-gradient(120deg, var(--a88-surface-2) 0%, var(--a88-surface) 100%);
}

    .a88-hero h1 {
        font-size: 2.25rem;
        font-weight: 800;
        margin: 0;
    }

    .a88-hero p {
        order: 2;
        color: var(--a88-text-muted);
        text-transform: none;
        letter-spacing: 0;
        font-size: .95rem;
        margin: .35rem 0 0;
    }

/* The tagline sits under the title */
.a88-hero {
    display: flex;
    flex-direction: column;
}

    .a88-hero h1 {
        order: 1;
    }

/* ── Home layout: feed + side board ──────────────────────────────────────── */

@media (max-width: 1100px) {
    .a88-rail-right {
        display: none;
    }
}

.a88-widget h6 {
    font-family: var(--a88-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.a88-widget-item a {
    display: block;
    width: 100%;
    padding: .15rem 0;
}

/* ── Composer & posts ────────────────────────────────────────────────────── */

.a88-composer,
.a88-post {
    padding: 1.1rem 1.35rem;
}

.a88-composer-input {
    border-radius: 14px;
    padding: .7rem 1rem;
    border: 1px solid transparent;
}

    .a88-composer-input:focus {
        border-color: var(--a88-accent);
        box-shadow: 0 0 0 3px rgba(var(--a88-accent-rgb), .22);
    }

.a88-post-author {
    font-family: var(--a88-font-display);
    font-weight: 700;
    font-size: 1.02rem;
}

.a88-reaction-bar {
    gap: .5rem;
    border-top: none;
    padding-top: .25rem;
}

    .a88-reaction-bar button {
        border: 1px solid var(--a88-line);
        border-radius: 999px;
        padding: .3rem .9rem;
        font-weight: 600;
    }

        .a88-reaction-bar button.active {
            background: rgba(var(--a88-accent-rgb), .18);
            border-color: var(--a88-accent);
            color: var(--a88-text);
        }

.a88-comment-bubble {
    border-radius: 4px 16px 16px 16px;
}

.a88-comment-compose input.form-control {
    border-radius: 12px;
}

/* ── Profile ─────────────────────────────────────────────────────────────── */

.a88-profile-cover {
    border-radius: 0;
}

.a88-profile-name {
    font-family: var(--a88-font-display);
    font-weight: 800;
    font-size: 2rem;
}

/* tabs become a segmented pill row */
.a88-profile-tabs {
    gap: .35rem;
    padding: .75rem 0 0;
    border-top: none;
}

    .a88-profile-tabs button {
        border-radius: 999px;
        padding: .5rem 1.1rem;
    }

        .a88-profile-tabs button.active {
            background: rgba(var(--a88-accent-rgb), .2);
            color: var(--a88-text);
        }

            .a88-profile-tabs button.active::after {
                display: none;
            }

/* ── Account / notification menus ────────────────────────────────────────── */

.a88-account-menu,
.a88-notif-dropdown {
    border-radius: 18px;
}

.a88-account-menu-icon {
    border-radius: 10px;
}

.a88-notif-dropdown-item.unread {
    background: rgba(255, 201, 77, .08);
}

.a88-notif-badge {
    background: var(--a88-gold);
    color: #1a1500;
}

/* ── Sign in / register ──────────────────────────────────────────────────── */

.a88-auth-tagline {
    font-family: var(--a88-font-display);
    font-weight: 800;
}

/* ── Respect reduced motion ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ── Home side board: profile shortcut ───────────────────────────────────── */

.a88-board-me {
    display: flex;
    align-items: center;
    gap: .85rem;
    text-decoration: none;
    color: var(--a88-text);
}

    .a88-board-me:hover {
        border-color: var(--a88-accent);
        color: var(--a88-text);
    }

    .a88-board-me .a88-avatar-sm {
        width: 52px;
        height: 52px;
        flex-shrink: 0;
    }

    .a88-board-me span {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.25;
    }

    .a88-board-me strong {
        font-family: var(--a88-font-display);
        font-size: 1.05rem;
    }

    .a88-board-me small {
        color: var(--a88-text-muted);
    }

/* ── School photography ──────────────────────────────────────────────────── */

/* Sign-in / register: the tower's arch becomes the frame */
.a88-auth-photos {
    position: relative;
    width: 100%;
    max-width: 440px;
}

.a88-auth-arch {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    border: 1px solid var(--a88-line);
}

    .a88-auth-arch img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 78% 50%;
        display: block;
    }

.a88-auth-est {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.2rem 1rem .9rem;
    text-align: center;
    color: #fff;
    font-family: var(--a88-font-display);
    font-weight: 800;
    font-size: 1.15rem;
    background: linear-gradient(to top, rgba(10, 12, 36, .85), transparent);
}

.a88-auth-flags {
    position: absolute;
    right: 0;
    object-fit: cover;
    border-radius: 20px;
    border: 4px solid var(--a88-bg);
}

@media (max-width: 900px) {
    .a88-auth-photos {
        display: none;
    }
}

/* Home masthead: flags on the lawn, text on a deep-indigo wash */
.a88-hero.photo {
    min-height: 190px;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
    background: linear-gradient(270deg, rgba(13, 16, 33, .92) 0%, rgba(13, 16, 33, .72) 45%, rgba(13, 16, 33, .15) 100%), url("/img/school-flags.jpg") center 100% / cover no-repeat;
    border-color: var(--a88-line);
}

    .a88-hero.photo h1 {
        color: #fff;
    }

    .a88-hero.photo p {
        color: rgba(255, 255, 255, .82);
    }

/* Profile default cover */
.a88-cover-default {
    object-position: 50% 30%;
}

/* ── Sign-in polish ──────────────────────────────────────────────────────── */

.a88-auth-card h2 {
    font-family: var(--a88-font-display);
    font-weight: 800;
    margin-bottom: 1.25rem;
}

.a88-auth-arch {
    height: 340px;
    width: 240px;
    border-radius: 120px 120px 22px 22px;
}

.a88-auth-flags {
    width: 220px;
    height: 140px;
    bottom: 20px;
}

@media (max-width: 575.98px) {
    .a88-composer-actions {
        flex-wrap: wrap;
    }

    .a88-composer-input {
        min-width: 0;
    }
}

/* ── Form validation messages ────────────────────────────────────────────── */

ul.a88-validation-summary {
    list-style: none;
    margin: .75rem 0 0;
}

    ul.a88-validation-summary li + li {
        margin-top: .25rem;
    }

.validation-message {
    color: #f28b82;
    font-size: .85rem;
    margin-top: .25rem;
}

html[data-theme="light"] .validation-message {
    color: #b3261e;
}

/* FocusOnNavigate focuses the page <h1> (tabindex="-1") for screen readers; it is not
   interactive, so it should not draw a focus ring. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
}

/* =============================================================================
   v3 EDITORIAL LAYER — matches the public site. Wins over everything above.
   ============================================================================= */

body {
    font-family: var(--a88-font-body);
}

h1,
h2,
h3,
.a88-serif {
    font-family: var(--a88-font-display);
    font-weight: 700;
    letter-spacing: -.01em;
}

:focus-visible {
    outline: 3px solid var(--a88-accent);
    outline-offset: 3px;
}

/* ── Page container ──────────────────────────────────────────────────────── */

.a88-page-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 24px 18px 24px;
}

/* ── Primary action = gold pill, ink text (same as the public site) ──────── */

.a88-btn-primary,
.a88-auth-btn-primary {
    background: var(--a88-gold);
    color: var(--a88-on-gold);
    border: none;
    border-radius: 999px;
    font-weight: 700;
}

    .a88-btn-primary:hover,
    .a88-auth-btn-primary:hover {
        background: #ffc43d;
        color: var(--a88-on-gold);
    }

.a88-btn-secondary {
    border: 1.5px solid var(--a88-line);
    background: transparent;
    color: var(--a88-text);
}

    .a88-btn-secondary:hover {
        border-color: var(--a88-text);
        background: var(--a88-surface-alt);
    }

/* ── Avatars: circles, like the logo ─────────────────────────────────────── */

.a88-avatar-sm,
.a88-comment-avatar,
.a88-navbar-avatar-btn img,
.a88-account-menu-card img,
.a88-profile-avatar {
    border-radius: 50%;
}

.a88-navbar-avatar-btn {
    padding: 0;
    border: 1.5px solid var(--a88-line);
    background: transparent;
}

    .a88-navbar-avatar-btn:hover {
        border-color: var(--a88-text);
    }

    .a88-navbar-avatar-btn img {
        width: 39px;
        height: 39px;
    }

/* ── Surfaces: soft shadows that suit a light page ───────────────────────── */

.a88-card:hover,
.a88-event-card:hover,
.a88-friend-card:hover,
.a88-game-tile:hover {
    box-shadow: var(--a88-shadow-sm);
}

.a88-account-menu,
.a88-notif-dropdown,
.a88-dropdown-menu,
.a88-edit-card,
.a88-scroll-btn {
    box-shadow: var(--a88-shadow-lg);
}

.a88-notif-badge {
    top: -4px;
    right: -4px;
}

/* ── Sticky side columns sit below the sticky header ─────────────────────── */

.a88-rail-right,
.a88-events-sidebar {
    top: calc(var(--a88-header-h) + 1.5rem);
}

/* Mobile / single-column: the side menu stacks above the content, so it must
   scroll away with the page instead of sticking under the top bar and
   covering the content (Alumni, Games, Events and Marketplace pages). */
@media (max-width: 900px) {
    .a88-events-sidebar {
        position: static;
        top: auto;
    }
}

@media (max-width: 991.98px) {
    .a88-page-main {
        padding: 1.25rem 14px calc(64px + 2rem);
    }
}

/* ── Login / register / forgot password (inside the public layout) ───────── */

.a88-auth-shell {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: center;
    min-height: 0;
    padding: 4rem max(24px, calc((100% - 1200px) / 2)) 5rem;
    background: var(--a88-bg);
}

.a88-auth-left {
    padding: 0;
    align-items: flex-start;
    text-align: left;
}

.a88-auth-right {
    padding: 0;
    border: 0;
    align-items: stretch;
}

.a88-auth-tagline {
    font-size: clamp(2.2rem, 4.2vw, 3.3rem);
    line-height: 1.08;
    max-width: 12em;
    margin: 0 0 2.2rem;
    text-align: left;
    color: var(--a88-text);
}

    .a88-auth-tagline .accent {
        color: var(--a88-accent);
    }

.a88-auth-card {
    max-width: 460px;
    width: 100%;
    justify-self: center;
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    border-radius: 22px;
    padding: 2.2rem 2rem;
    box-shadow: var(--a88-shadow-sm);
}

    .a88-auth-card h2 {
        font-size: 1.75rem;
        margin: 0 0 1.25rem;
    }

.a88-auth-input {
    background: var(--a88-surface);
    border: 1.5px solid var(--a88-line);
    border-radius: 12px;
    color: var(--a88-text);
}

    .a88-auth-input:focus {
        border-color: var(--a88-accent);
        box-shadow: 0 0 0 3px rgba(var(--a88-accent-rgb), .2);
    }

.a88-auth-btn-primary {
    width: 100%;
    padding: .8rem 1.4rem;
    text-align: center;
}

.a88-auth-btn-outline {
    border: 2px solid var(--a88-text);
    border-radius: 999px;
    color: var(--a88-text);
    font-weight: 700;
}

    .a88-auth-btn-outline:hover {
        background: var(--a88-text);
        color: var(--a88-surface);
    }

.a88-auth-link-row a {
    color: var(--a88-accent);
    font-weight: 600;
}

.a88-auth-photos {
    height: 340px;
}

.a88-auth-arch,
.a88-auth-flags {
    box-shadow: var(--a88-shadow-sm);
}

@media (max-width: 900px) {
    .a88-auth-shell {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2.2rem 18px 3rem;
    }

    .a88-auth-tagline {
        font-size: 2rem;
        margin-bottom: 0;
    }
}

/* ── Alignment + small polish ────────────────────────────────────────────── */

/* The signed-in pages fill the same 1200px column as the header and footer. */
.a88-layout-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2rem;
    justify-content: stretch;
}

@media (max-width: 1100px) {
    .a88-layout-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Page fills the window height. */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.a88-page-main {
    width: 100%;
    flex: 1 0 auto;
}

.pub {
    flex: 1 0 auto;
}

/* Auth shell lines up with the public header (1200px column + 24px gutter). */
.a88-auth-shell {
    padding-left: max(24px, calc((100% - 1200px) / 2 + 24px));
    padding-right: max(24px, calc((100% - 1200px) / 2 + 24px));
}

@media (max-width: 900px) {
    .a88-auth-shell {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* Inputs: white with a clear border on the light theme; the focus ring is the shadow. */
.form-control,
.form-select {
    background-color: var(--a88-surface);
    border: 1.5px solid var(--a88-line);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: var(--a88-surface-alt);
}

.form-control:focus-visible,
.form-select:focus-visible,
.a88-auth-input:focus-visible,
.a88-composer-input:focus-visible {
    outline: none;
}

/* =============================================================================
   MARKETPLACE — create listing (/marketplace/create)
   Two panes: the form on the left (two steps), a live preview on the right.
   Uses the site tokens only, so light and dark themes both follow along.
   ============================================================================= */

.a88-mk {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 1.25rem;
    height: calc(100vh - var(--a88-header-h) - 5rem);
    min-height: 600px;
}

    .a88-mk svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

    .a88-mk h1,
    .a88-mk h2,
    .a88-mk h3,
    .a88-mk h4,
    .a88-mk p {
        margin: 0;
    }

/* ── Left panel ──────────────────────────────────────────────────────────── */

.a88-mk-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    border-radius: var(--a88-radius-lg);
    box-shadow: var(--a88-shadow-sm);
    overflow: hidden;
}

.a88-mk-head {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--a88-line);
}

.a88-mk-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--a88-line);
    color: var(--a88-text);
    flex-shrink: 0;
    text-decoration: none;
}

    .a88-mk-close:hover {
        border-color: var(--a88-text);
        background: var(--a88-surface-alt);
        color: var(--a88-text);
    }

.a88-mk-head-text small {
    display: block;
    font-size: .8rem;
    color: var(--a88-text-muted);
}

.a88-mk-head-text h1 {
    font-family: var(--a88-font-display);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--a88-text);
}

.a88-mk-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.a88-mk-section {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.a88-mk-h {
    font-family: var(--a88-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--a88-text);
}

.a88-mk-sub {
    color: var(--a88-text-muted);
    font-size: .92rem;
    margin-top: -.45rem !important;
}

.a88-mk-error {
    color: #b3261e;
    font-size: .85rem;
}

html[data-theme="dark"] .a88-mk-error {
    color: #f28b82;
}

/* Seller identity */
.a88-mk-seller {
    display: flex;
    align-items: center;
    gap: .75rem;
}

    .a88-mk-seller img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        border: 1.5px solid var(--a88-line);
        flex-shrink: 0;
    }

    .a88-mk-seller strong {
        display: block;
        line-height: 1.2;
        color: var(--a88-text);
    }

    .a88-mk-seller span {
        display: block;
        font-size: .82rem;
        color: var(--a88-text-muted);
    }

    .a88-mk-seller.small img {
        width: 52px;
        height: 52px;
    }

/* Sell / Give away */
.a88-mk-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
    padding: .3rem;
    background: var(--a88-surface-alt);
    border-radius: 999px;
}

.a88-mk-seg-btn {
    border: 0;
    background: transparent;
    color: var(--a88-text);
    font: inherit;
    font-weight: 600;
    font-size: .92rem;
    padding: .55rem .5rem;
    border-radius: 999px;
    cursor: pointer;
}

    .a88-mk-seg-btn:hover {
        background: var(--a88-line);
    }

    .a88-mk-seg-btn.on,
    .a88-mk-seg-btn.on:hover {
        background: var(--a88-accent);
        color: #fff;
    }

/* Photos */
.a88-mk-photos-label {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .6rem;
    align-items: baseline;
    font-size: .9rem;
}

    .a88-mk-photos-label strong {
        color: var(--a88-text);
    }

    .a88-mk-photos-label span {
        color: var(--a88-text-muted);
    }

.a88-mk-drop,
.a88-mk-thumb.add {
    position: relative;
    border: 1.5px dashed var(--a88-line);
    background: var(--a88-surface-alt);
    color: var(--a88-text);
    cursor: pointer;
}

    .a88-mk-drop:hover,
    .a88-mk-drop:focus-within,
    .a88-mk-thumb.add:hover,
    .a88-mk-thumb.add:focus-within {
        border-color: var(--a88-accent);
        background: rgba(var(--a88-accent-rgb), .08);
    }

.a88-mk-drop {
    min-height: 168px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    text-align: center;
}

/* The real file input covers the whole zone: click or drop anywhere on it. */
.a88-mk-file {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.a88-mk-drop-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    pointer-events: none;
}

    .a88-mk-drop-inner span:last-child {
        color: var(--a88-text-muted);
        font-size: .9rem;
    }

.a88-mk-drop-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--a88-surface);
    border: 1.5px solid var(--a88-line);
    margin-bottom: .45rem;
}

    .a88-mk-drop-icon svg {
        width: 22px;
        height: 22px;
    }

.a88-mk-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: .5rem;
}

.a88-mk-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--a88-surface-alt);
}

    .a88-mk-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .a88-mk-thumb.add {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .15rem;
        font-size: .8rem;
        font-weight: 600;
    }

        .a88-mk-thumb.add svg,
        .a88-mk-thumb.add span {
            pointer-events: none;
        }

.a88-mk-cover-tag {
    position: absolute;
    left: 6px;
    bottom: 6px;
    background: var(--a88-gold);
    color: var(--a88-on-gold);
    font-size: .7rem;
    font-weight: 700;
    padding: .1rem .5rem;
    border-radius: 999px;
}

.a88-mk-thumb-x {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 20, 58, .78);
    color: #fff;
    cursor: pointer;
}

    .a88-mk-thumb-x svg {
        width: 14px;
        height: 14px;
    }

    .a88-mk-thumb-x:hover {
        background: #10143a;
    }

/* Floating-label fields */
.a88-mk-field {
    position: relative;
}

    .a88-mk-field input,
    .a88-mk-field select,
    .a88-mk-field textarea {
        display: block;
        width: 100%;
        min-height: 56px;
        padding: 1.45rem 1rem .45rem;
        border: 1.5px solid var(--a88-line);
        border-radius: 12px;
        background: transparent;
        color: var(--a88-text);
        font: inherit;
        line-height: 1.3;
        outline: none;
    }

    .a88-mk-field textarea {
        resize: vertical;
        min-height: 130px;
    }

    .a88-mk-field select {
        appearance: none;
        -webkit-appearance: none;
        padding-right: 2.6rem;
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 1rem center;
    }

        .a88-mk-field select option {
            background: var(--a88-surface);
            color: var(--a88-text);
        }

        .a88-mk-field input:hover,
        .a88-mk-field select:hover,
        .a88-mk-field textarea:hover {
            border-color: var(--a88-text-muted);
        }

        .a88-mk-field input:focus,
        .a88-mk-field select:focus,
        .a88-mk-field textarea:focus {
            border-color: var(--a88-accent);
            box-shadow: 0 0 0 3px rgba(var(--a88-accent-rgb), .18);
        }

    .a88-mk-field label {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--a88-text-muted);
        pointer-events: none;
        transition: top .12s ease, font-size .12s ease, transform .12s ease;
        max-width: calc(100% - 2rem);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .a88-mk-field.is-area label {
        top: 1.05rem;
        transform: none;
    }

    .a88-mk-field input:focus + label,
    .a88-mk-field input:not(:placeholder-shown) + label,
    .a88-mk-field textarea:focus + label,
    .a88-mk-field textarea:not(:placeholder-shown) + label,
    .a88-mk-field select + label {
        top: .5rem;
        transform: none;
        font-size: .75rem;
    }

    .a88-mk-field input:focus + label,
    .a88-mk-field textarea:focus + label,
    .a88-mk-field select:focus + label {
        color: var(--a88-accent);
    }

/* More details toggle */
.a88-mk-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: .85rem 1rem;
    border: 1.5px solid var(--a88-line);
    border-radius: 12px;
    background: transparent;
    color: var(--a88-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .a88-mk-more:hover {
        background: var(--a88-surface-alt);
    }

    .a88-mk-more strong {
        display: block;
        font-family: var(--a88-font-display);
        font-size: 1.05rem;
    }

    .a88-mk-more small {
        display: block;
        color: var(--a88-text-muted);
        font-size: .85rem;
    }

    .a88-mk-more svg {
        transition: transform .15s ease;
    }

        .a88-mk-more svg.open {
            transform: rotate(180deg);
        }

/* Fulfillment choices */
.a88-mk-options {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.a88-mk-option {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    padding: .8rem 1rem;
    border: 1.5px solid var(--a88-line);
    border-radius: 12px;
    background: transparent;
    color: var(--a88-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .a88-mk-option:hover {
        background: var(--a88-surface-alt);
    }

    .a88-mk-option.on {
        border-color: var(--a88-accent);
        background: rgba(var(--a88-accent-rgb), .08);
    }

    .a88-mk-option strong {
        display: block;
        line-height: 1.25;
    }

    .a88-mk-option small {
        display: block;
        color: var(--a88-text-muted);
        font-size: .83rem;
    }

.a88-mk-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--a88-line);
    flex-shrink: 0;
    position: relative;
}

.a88-mk-option.on .a88-mk-radio {
    border-color: var(--a88-accent);
}

    .a88-mk-option.on .a88-mk-radio::after {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: 50%;
        background: var(--a88-accent);
    }

/* Footer: progress + actions */
.a88-mk-foot {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--a88-line);
    background: var(--a88-surface);
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.a88-mk-progress {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

    .a88-mk-progress span {
        height: 5px;
        border-radius: 999px;
        background: var(--a88-line);
    }

        .a88-mk-progress span.on {
            background: var(--a88-accent);
        }

.a88-mk-foot-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .6rem;
}

.a88-mk-next,
.a88-mk-back {
    min-height: 46px;
    font-size: 1rem;
    cursor: pointer;
}

.a88-mk-next {
    width: 100%;
}

    .a88-mk-next:disabled {
        background: var(--a88-surface-alt);
        color: var(--a88-text-muted);
        cursor: not-allowed;
    }

/* ── Right: live preview ─────────────────────────────────────────────────── */

.a88-mk-preview {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    min-width: 0;
    min-height: 0;
    padding: 1.25rem;
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    border-radius: var(--a88-radius-lg);
    box-shadow: var(--a88-shadow-sm);
}

.a88-mk-preview-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--a88-text);
}

.a88-mk-frame {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    border: 1px solid var(--a88-line);
    border-radius: 14px;
    overflow: hidden;
}

.a88-mk-media {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--a88-surface-alt);
}

.a88-mk-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem;
    text-align: center;
    color: var(--a88-text-muted);
}

    .a88-mk-empty h3 {
        font-family: var(--a88-font-display);
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--a88-text);
    }

    .a88-mk-empty p {
        max-width: 30ch;
    }

.a88-mk-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

    .a88-mk-stage img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 10px;
    }

.a88-mk-strip {
    display: flex;
    gap: .5rem;
    padding: 0 1rem 1rem;
    overflow-x: auto;
}

    .a88-mk-strip button {
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
        padding: 0;
        border: 2px solid transparent;
        border-radius: 10px;
        overflow: hidden;
        background: var(--a88-surface);
        cursor: pointer;
    }

        .a88-mk-strip button.on {
            border-color: var(--a88-accent);
        }

    .a88-mk-strip img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.a88-mk-detail {
    min-width: 0;
    overflow-y: auto;
    padding: 1.4rem;
    border-left: 1px solid var(--a88-line);
    background: var(--a88-surface);
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.a88-mk-d-title {
    font-family: var(--a88-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--a88-text);
    overflow-wrap: anywhere;
}

.a88-mk-d-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--a88-text);
}

.a88-mk-d-meta {
    font-size: .85rem;
    color: var(--a88-text-muted);
}

.a88-mk-detail .ph {
    color: var(--a88-text-muted);
    opacity: .7;
}

.a88-mk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .25rem 0 .35rem;
}

.a88-mk-chip {
    font-size: .8rem;
    font-weight: 600;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: var(--a88-surface-alt);
    color: var(--a88-text);
}

.a88-mk-detail h4 {
    margin-top: .9rem !important;
    font-family: var(--a88-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--a88-text);
}

.a88-mk-d-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--a88-text);
}

/* ── Smaller screens ─────────────────────────────────────────────────────── */

@media (max-width: 1199.98px) {
    .a88-mk {
        grid-template-columns: 360px minmax(0, 1fr);
    }

    .a88-mk-frame {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .a88-mk-detail {
        border-left: 0;
        border-top: 1px solid var(--a88-line);
        max-height: 48%;
    }
}

@media (max-width: 991.98px) {
    .a88-mk {
        display: block;
        height: auto;
        min-height: 0;
    }

    .a88-mk-preview {
        display: none;
    }

    .a88-mk-panel {
        overflow: visible;
    }

    .a88-mk-body {
        overflow: visible;
    }

    /* Keep Next / Publish in reach above the bottom tab bar */
    .a88-mk-foot {
        position: sticky;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        z-index: 5;
        border-radius: 0 0 var(--a88-radius-lg) var(--a88-radius-lg);
    }
}

/* =============================================================================
   EVENTS — "Create event" pop-up (CreateEventModal.razor)
   Facebook-style dialog over the Events pages. Reuses the floating-label field,
   close button, seller row and chip styles from the Marketplace block above.
   ============================================================================= */

.a88-ev-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(10, 12, 40, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: a88-ev-fade .15s ease-out;
}

/* No scrolling the page behind the dialog */
body:has(.a88-ev-backdrop) {
    overflow: hidden;
}

.a88-ev-backdrop svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.a88-ev-backdrop h2,
.a88-ev-backdrop h3,
.a88-ev-backdrop p {
    margin: 0;
}

.a88-ev-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(680px, 100%);
    max-height: 100%;
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    border-radius: var(--a88-radius-lg);
    box-shadow: var(--a88-shadow-lg);
    overflow: hidden;
    animation: a88-ev-in .18s ease-out;
}

@keyframes a88-ev-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes a88-ev-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .a88-ev-backdrop,
    .a88-ev-dialog {
        animation: none;
    }
}

.a88-ev-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.a88-ev-head {
    position: relative;
    padding: 1rem 4rem;
    text-align: center;
    border-bottom: 1px solid var(--a88-line);
}

    .a88-ev-head h2 {
        font-family: var(--a88-font-display);
        font-size: 1.35rem;
        font-weight: 700;
        line-height: 42px;
        color: var(--a88-text);
    }

button.a88-mk-close {
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.a88-ev-close {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.a88-ev-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Cover photo */
.a88-ev-cover {
    position: relative;
    flex-shrink: 0;
    height: 200px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--a88-surface-alt);
}

    .a88-ev-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .a88-ev-cover.empty {
        border: 1.5px dashed var(--a88-line);
        cursor: pointer;
    }

        .a88-ev-cover.empty:hover,
        .a88-ev-cover.empty:focus-within {
            border-color: var(--a88-accent);
            background: rgba(var(--a88-accent-rgb), .08);
        }

.a88-ev-cover-hint {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    color: var(--a88-text-muted);
    pointer-events: none;
}

    .a88-ev-cover-hint svg {
        width: 30px;
        height: 30px;
    }

.a88-ev-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1.05rem;
    border: 1.5px solid var(--a88-line);
    border-radius: 999px;
    background: var(--a88-surface);
    color: var(--a88-text);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
}

    .a88-ev-pill:hover {
        border-color: var(--a88-text);
    }

.a88-ev-cover-add {
    position: absolute;
    right: 12px;
    bottom: 12px;
    pointer-events: none;
}

.a88-ev-cover-actions {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    gap: .5rem;
}

/* Fields specific to the dialog */
.a88-ev-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

    .a88-ev-row > .a88-mk-field {
        min-width: 0;
    }

.a88-mk-field.is-static label {
    top: .5rem;
    transform: none;
    font-size: .75rem;
}

.a88-mk-field.has-icon input {
    padding-left: 3rem;
}

.a88-mk-field.has-icon label {
    left: 3rem;
}

.a88-mk-field.has-icon > svg {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--a88-text-muted);
    pointer-events: none;
}

.a88-mk-field input[type="date"],
.a88-mk-field input[type="time"],
.a88-mk-field input[type="datetime-local"] {
    min-height: 56px;
}

.a88-mk-field input::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

html[data-theme="dark"] .a88-mk-field input,
html[data-theme="dark"] .a88-mk-field select,
html[data-theme="dark"] .a88-mk-field textarea {
    color-scheme: dark;
}

.a88-ev-link {
    align-self: flex-start;
    margin-top: -.25rem;
    padding: .15rem 0;
    border: 0;
    background: none;
    color: var(--a88-accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

    .a88-ev-link:hover {
        text-decoration: underline;
    }

/* Additional settings */
.a88-ev-acc {
    border-top: 1px solid var(--a88-line);
    border-bottom: 1px solid var(--a88-line);
}

.a88-ev-acc-btn {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    padding: .9rem .25rem;
    border: 0;
    background: none;
    color: var(--a88-text);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

    .a88-ev-acc-btn span {
        flex: 1;
    }

    .a88-ev-acc-btn .chev {
        transition: transform .15s ease;
    }

        .a88-ev-acc-btn .chev.open {
            transform: rotate(180deg);
        }

.a88-ev-acc-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: .25rem 0 1.1rem;
}

.a88-ev-activity {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .6rem;
    align-items: center;
}

.a88-ev-activity-chips {
    margin-top: .6rem;
}

.a88-ev-chip-x {
    margin-left: .35rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: .75rem;
    cursor: pointer;
}

/* Footer */
.a88-ev-foot {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--a88-line);
    background: var(--a88-surface);
}

    .a88-ev-foot ul.a88-validation-summary {
        margin: 0;
    }

.a88-ev-foot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.a88-ev-draft {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--a88-text-muted);
    font-size: .92rem;
    cursor: pointer;
    user-select: none;
}

    .a88-ev-draft input {
        width: 18px;
        height: 18px;
        accent-color: var(--a88-accent);
        cursor: pointer;
    }

.a88-ev-create {
    min-width: 170px;
    min-height: 46px;
    font-size: 1rem;
    cursor: pointer;
}

    .a88-ev-create:disabled {
        background: var(--a88-surface-alt);
        color: var(--a88-text-muted);
        cursor: not-allowed;
    }

/* "Discard this event?" */
.a88-ev-confirm {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(10, 12, 40, .5);
}

.a88-ev-confirm-box {
    width: min(380px, 100%);
    padding: 1.4rem;
    border-radius: 16px;
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    box-shadow: var(--a88-shadow-lg);
}

    .a88-ev-confirm-box h3 {
        font-family: var(--a88-font-display);
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--a88-text);
    }

    .a88-ev-confirm-box p {
        margin-top: .35rem;
        color: var(--a88-text-muted);
    }

.a88-ev-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1.1rem;
}

/* Phones: a bottom sheet */
@media (max-width: 639.98px) {
    .a88-ev-backdrop {
        padding: 0;
        align-items: flex-end;
    }

    .a88-ev-dialog {
        width: 100%;
        max-height: 94vh;
        max-height: 94dvh;
        border-radius: 20px 20px 0 0;
        border-bottom: 0;
    }

    .a88-ev-head {
        padding: .75rem 3.5rem;
    }

    .a88-ev-cover {
        height: 160px;
    }

    .a88-ev-foot {
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }

    .a88-ev-create {
        min-width: 0;
        flex: 1;
    }
}

/* =============================================================================
   MARKETPLACE DETAILS — photo viewer (left) + details panel (right).
   Uses the Alumni88 tokens only (surface/line/text/gold) so it follows the
   light/dark theme like the rest of the site.
   ============================================================================= */

.a88-mkt-back {
    display: inline-block;
    margin-bottom: .75rem;
    color: var(--a88-text-muted);
    font-weight: 600;
    text-decoration: none;
}

    .a88-mkt-back:hover {
        color: var(--a88-text);
    }

.a88-mkt-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 1.5rem;
    align-items: start;
}

/* ── Photo viewer ─────────────────────────────────────────────────────────── */

.a88-mkt-viewer {
    min-width: 0;
}

.a88-mkt-stage {
    position: relative;
    height: min(72vh, 640px);
    min-height: 320px;
    border-radius: 14px;
    overflow: hidden;
    background: #0b0f26; /* fixed dark so photos always sit on a neutral stage */
    display: flex;
    align-items: center;
    justify-content: center;
}

.a88-mkt-stage-bg {
    position: absolute;
    inset: -20px;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    object-fit: cover;
    filter: blur(28px) brightness(.55);
}

.a88-mkt-stage-img {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.a88-mkt-stage-status {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--a88-gold);
    color: var(--a88-on-gold);
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .3rem .8rem;
}

.a88-mkt-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.88);
    color: #10143a;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3px;
}

    .a88-mkt-arrow:hover {
        background: #fff;
    }

    .a88-mkt-arrow.left {
        left: 14px;
    }

    .a88-mkt-arrow.right {
        right: 14px;
    }

.a88-mkt-thumbs {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: .75rem;
}

.a88-mkt-thumb {
    width: 56px;
    height: 56px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: var(--a88-surface-alt);
    cursor: pointer;
    opacity: .7;
}

    .a88-mkt-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .a88-mkt-thumb:hover {
        opacity: 1;
    }

    .a88-mkt-thumb.active {
        opacity: 1;
        border-color: var(--a88-gold);
    }

/* ── Details panel ────────────────────────────────────────────────────────── */

.a88-mkt-panel {
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    border-radius: 14px;
    padding: 1.25rem;
    min-width: 0;
}

.a88-mkt-title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 .35rem;
    overflow-wrap: anywhere;
}

.a88-mkt-price {
    margin-bottom: .25rem;
}

.a88-mkt-price-amount {
    font-size: 1.25rem;
    font-weight: 700;
}

.a88-mkt-meta {
    color: var(--a88-text-muted);
    font-size: .88rem;
}

.a88-mkt-section {
    border-top: 1px solid var(--a88-line);
    margin-top: 1rem;
    padding-top: 1rem;
}

.a88-mkt-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .6rem;
}

.a88-mkt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.a88-mkt-details {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: .35rem .75rem;
    margin: 0 0 .75rem;
}

    .a88-mkt-details dt {
        font-weight: 700;
    }

    .a88-mkt-details dd {
        margin: 0;
        color: var(--a88-text);
    }

.a88-mkt-desc {
    white-space: pre-line;
    overflow-wrap: anywhere;
    margin: 0;
}

.a88-mkt-seller-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .6rem;
}

.a88-mkt-seller-link {
    color: var(--a88-accent);
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
}

    .a88-mkt-seller-link:hover {
        text-decoration: underline;
    }

.a88-mkt-seller {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--a88-text);
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 900px) {
    .a88-mkt-detail {
        grid-template-columns: 1fr;
    }

    .a88-mkt-stage {
        height: 55vh;
    }
}

/* ── Composer: photo icon inside the box + always-on throwback year ───────── */

.a88-composer-field {
    position: relative;
    flex: 1;
    min-width: 0;
}

    .a88-composer-field .a88-composer-input {
        width: 100%;
        padding-right: 3.1rem;
        display: block;
    }

.a88-composer-photo-btn {
    position: absolute;
    right: .45rem;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--a88-text-muted);
    cursor: pointer;
}

    .a88-composer-photo-btn:hover {
        background: var(--a88-surface);
        color: var(--a88-text);
    }

.a88-composer-photo-preview {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-top: .75rem;
}

    .a88-composer-photo-preview img {
        max-width: 160px;
        max-height: 120px;
        border-radius: 10px;
        object-fit: cover;
    }

.a88-composer-year {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--a88-surface-alt);
    border-radius: 999px;
    padding: .25rem .8rem;
    margin: 0;
}

    .a88-composer-year input {
        width: 11.5rem;
        max-width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--a88-text);
        font-size: .85rem;
        font-weight: 600;
        -moz-appearance: textfield;
    }

        .a88-composer-year input::-webkit-outer-spin-button,
        .a88-composer-year input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .a88-composer-year input::placeholder {
            color: var(--a88-text-muted);
            font-weight: 500;
        }

    .a88-composer-year:focus-within {
        box-shadow: 0 0 0 3px rgba(var(--a88-accent-rgb), .22);
    }

/* Category dropdown that sits in the filter bar next to the pills */
.a88-filter-select.active {
    background: var(--a88-accent);
    color: #fff;
}

/* =============================================================================
   HELP & SUPPORT / REPORT A PROBLEM — FAQ-style pages for signed-in members
   (Components/Pages/Help). Native <details> accordions inside .a88-card groups.
   ============================================================================= */

.a88-help {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

    .a88-help .a88-hero {
        margin-bottom: .25rem;
    }

.a88-help-group h2,
.a88-help-contact h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--a88-text);
    margin: 0 0 .5rem;
}

.a88-help-group details {
    border-top: 1px solid var(--a88-line);
    padding: .9rem 0;
}

    .a88-help-group details:last-child {
        padding-bottom: .25rem;
    }

.a88-help-group summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    color: var(--a88-text);
    list-style: none;
}

    .a88-help-group summary::-webkit-details-marker {
        display: none;
    }

    .a88-help-group summary::after {
        content: "+";
        font-size: 1.4rem;
        line-height: 1;
        color: var(--a88-accent);
        flex-shrink: 0;
    }

.a88-help-group details[open] summary::after {
    content: "\2013";
}

.a88-help-group details p {
    margin: .6rem 0 0;
    color: var(--a88-text-muted);
}



.a88-help-link {
    color: var(--a88-accent);
    font-weight: 600;
}

/* A <button> that reads like the .a88-help-link anchors around it. */
.a88-link-button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.a88-link-button:disabled {
    opacity: .6;
    cursor: default;
}

.a88-help-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}

    .a88-help-contact p {
        margin: 0;
        color: var(--a88-text-muted);
    }

    .a88-help-contact .a88-btn-primary {
        text-decoration: none;
        white-space: nowrap;
    }

/* Report a problem — the form and its confirmation */
.a88-help-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.a88-help-form-note {
    margin: 0;
    color: var(--a88-text-muted);
    font-size: .85rem;
}

.a88-help-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

    .a88-help-form-actions .a88-btn-primary {
        min-width: 150px;
        cursor: pointer;
    }

        .a88-help-form-actions .a88-btn-primary:disabled {
            opacity: .55;
            cursor: not-allowed;
        }

.a88-help-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .75rem;
    border: 1.5px solid var(--a88-line);
    border-radius: 12px;
    color: var(--a88-text);
    font-size: .9rem;
}

.a88-help-done {
    text-align: center;
    padding: 2rem 1.25rem;
}

    .a88-help-done h2 {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--a88-text);
        margin: 0 0 .5rem;
    }

    .a88-help-done p {
        color: var(--a88-text-muted);
        margin: 0 0 1.25rem;
    }

/* =============================================================================
   SETTINGS & PRIVACY (Components/Pages/Account/Settings*.razor)
   Sidebar reuses .a88-events-*; forms reuse .a88-help-form and .a88-mk-field.
   ============================================================================= */

.a88-settings {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.a88-settings-card h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--a88-text);
    margin: 0 0 .35rem;
}

.a88-settings-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--a88-text);
    margin: 0 0 .5rem;
}

.a88-settings-sub {
    color: var(--a88-text-muted);
    font-size: .9rem;
    margin: 0 0 1rem;
}

.a88-settings-list {
    margin: 0 0 1.25rem;
}

    .a88-settings-list > div {
        display: flex;
        gap: 1rem;
        padding: .65rem 0;
        border-top: 1px solid var(--a88-line);
    }

    .a88-settings-list dt {
        width: 11rem;
        flex-shrink: 0;
        color: var(--a88-text-muted);
        font-weight: 600;
        font-size: .9rem;
    }

    .a88-settings-list dd {
        margin: 0;
        color: var(--a88-text);
        word-break: break-word;
    }

.a88-settings-badge {
    display: inline-block;
    padding: .1rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    margin-right: .4rem;
}

    .a88-settings-badge.on {
        background: rgba(46, 160, 67, .15);
        color: #2ea043;
    }

    .a88-settings-badge.off {
        background: var(--a88-surface-alt);
        color: var(--a88-text-muted);
    }

.a88-settings-status {
    margin: 0 0 1rem;
    font-weight: 600;
    color: var(--a88-text);
}

.a88-settings-link {
    display: inline-block;
    text-decoration: none;
}

.a88-settings-check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    cursor: pointer;
    color: var(--a88-text);
}

.a88-settings-toggle {
    margin-bottom: 1rem;
}

.a88-settings-bullets {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--a88-text-muted);
}

    .a88-settings-bullets li {
        padding: .2rem 0;
    }

.a88-settings-sessions {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

    .a88-settings-sessions li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .85rem 0;
        border-top: 1px solid var(--a88-line);
    }

    .a88-settings-sessions .a88-settings-sub {
        margin: .2rem 0 0;
    }

@media (max-width: 600px) {
    .a88-settings-list > div {
        flex-direction: column;
        gap: .1rem;
    }

    .a88-settings-list dt {
        width: auto;
    }

    .a88-settings-sessions li {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =============================================================================
   Keep the page from jumping sideways between short and tall pages.
   A tall page (e.g. Settings > Account / Devices) gets a vertical scrollbar, which takes
   ~15px of width and re-centres the whole layout a few pixels to the left. Reserving the
   scrollbar's space on every page means the layout sits in the same place either way.
   ============================================================================= */
html {
    scrollbar-gutter: stable;
}

/* =============================================================================
   MEMBER DIRECTORY (Components/Pages/Directory.razor)
   Shell + sidebar reuse .a88-events-layout / .a88-events-sidebar / .a88-events-nav-item;
   cards build on .a88-friend-card.
   ============================================================================= */

.a88-dir-count {
    margin-left: auto;
    font-size: .8rem;
    font-weight: 600;
    color: var(--a88-text-muted);
}

.a88-events-nav-item.active .a88-dir-count {
    color: #fff;
    opacity: .85;
}

.a88-dir-facet {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.a88-dir-more {
    background: none;
    border: none;
    padding: .4rem .6rem;
    text-align: left;
    color: var(--a88-accent);
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
}

    .a88-dir-more:hover {
        text-decoration: underline;
    }

.a88-dir-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.a88-dir-sub {
    color: var(--a88-text-muted);
    font-size: .9rem;
    margin-top: .15rem;
}

.a88-dir-sort {
    width: auto;
    min-width: 11rem;
}

.a88-dir-chips {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.a88-dir-chip-btn {
    background: var(--a88-surface-alt);
    border: 1px solid var(--a88-line);
    border-radius: 999px;
    padding: .25rem .75rem;
    color: var(--a88-text);
    font-size: .85rem;
    cursor: pointer;
}

    .a88-dir-chip-btn:hover {
        border-color: var(--a88-accent);
    }

.a88-dir-clear {
    background: none;
    border: none;
    color: var(--a88-accent);
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
}

    .a88-dir-clear:hover {
        text-decoration: underline;
    }

.a88-dir-empty {
    text-align: center;
    padding: 2.5rem 1.25rem;
}

    .a88-dir-empty p {
        color: var(--a88-text-muted);
        margin: 0 0 1rem;
    }

.a88-dir-empty-icon {
    font-size: 2.2rem;
    margin-bottom: .5rem;
}

.a88-dir-name {
    display: block;
    text-decoration: none;
}

    .a88-dir-name:hover {
        color: var(--a88-accent);
    }

.a88-dir-you {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: var(--a88-surface-alt);
    color: var(--a88-text-muted);
    font-size: .7rem;
    font-weight: 700;
    vertical-align: middle;
}

.a88-dir-chip {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: var(--a88-surface-alt);
    color: var(--a88-text-muted);
    font-size: .75rem;
    font-weight: 600;
}

.a88-dir-birthday {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: rgba(242, 177, 31, .18);
    color: var(--a88-text);
    font-size: .78rem;
    font-weight: 700;
}

    .a88-dir-birthday.today {
        background: var(--a88-accent);
        color: #fff;
    }

.a88-dir-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.a88-dir-social-row {
    display: flex;
    gap: .4rem;
    justify-content: center;
}

.a88-dir-social {
    min-width: 2rem;
    height: 2rem;
    padding: 0 .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--a88-line);
    color: var(--a88-text-muted);
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}

    .a88-dir-social:hover {
        color: var(--a88-accent);
        border-color: var(--a88-accent);
    }

/* Settings > Delete account */
.a88-settings-danger {
    border-color: rgba(214, 69, 69, .45);
}

    .a88-settings-danger h2 {
        color: #d64545;
    }

.a88-btn-danger {
    display: inline-block;
    background: #d64545;
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: 999px;
    padding: .6rem 1.25rem;
    cursor: pointer;
}

    .a88-btn-danger:hover {
        background: #b93636;
    }

    .a88-btn-danger:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

/* ══════════════════════════════════════════════════════════════════════════
   SITE SEARCH  (/search) — Facebook-style: Filters menu on the left (reuses the
   shared .a88-events-layout / sidebar / nav-item look) and result cards on the right.
   Theme tokens only, so light and dark both follow automatically.
   ══════════════════════════════════════════════════════════════════════════ */

.a88-sr-rule {
    border: 0;
    border-top: 1px solid var(--a88-line);
    margin: 0 0 1rem;
}

.a88-sr-filters-label {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--a88-text);
    margin: 0 0 .5rem;
}

/* Round icon badge in front of each filter, like the Facebook menu */
.a88-sr-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--a88-surface-alt);
    font-size: 1rem;
}

.a88-events-nav-item.active .a88-sr-icon {
    background: rgba(255, 255, 255, .22);
}

/* Results column */
.a88-sr-main {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.a88-sr-state,
.a88-sr-summary {
    color: var(--a88-text-muted);
    margin: 0 0 1rem;
}

    .a88-sr-summary strong {
        color: var(--a88-text);
    }

.a88-sr-state--error,
.a88-sr-empty--error {
    color: #b3261e;
}

.a88-sr-section {
    margin-bottom: 1.75rem;
}

.a88-sr-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin-bottom: .6rem;
}

.a88-sr-h2 {
    font-family: var(--a88-font-display);
    font-size: 1.25rem;
    color: var(--a88-text);
    margin: 0;
}

.a88-sr-count {
    font-family: var(--a88-font-body);
    font-size: .85rem;
    color: var(--a88-text-muted);
    background: var(--a88-surface-alt);
    border-radius: 999px;
    padding: .05rem .55rem;
    margin-left: .35rem;
}

.a88-sr-more {
    font-size: .85rem;
    color: var(--a88-text-muted);
}

    .a88-sr-more a {
        color: var(--a88-accent);
        font-weight: 600;
    }

.a88-sr-empty {
    color: var(--a88-text-muted);
    margin: .25rem 0 0;
}

/* One result = one card */
.a88-sr-card {
    display: block;
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    border-radius: var(--a88-radius);
    padding: .85rem 1rem;
    margin-bottom: .85rem;
    color: inherit;
    text-decoration: none;
    box-shadow: var(--a88-shadow-sm);
}

    .a88-sr-card:hover {
        border-color: var(--a88-accent);
    }

.a88-sr-card-head {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.a88-sr-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: var(--a88-surface-alt);
}

    .a88-sr-avatar.is-square {
        border-radius: 10px;
    }

.a88-sr-avatar--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.a88-sr-card-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.a88-sr-title {
    color: var(--a88-text);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.a88-sr-sub {
    color: var(--a88-text-muted);
    font-size: .85rem;
    overflow-wrap: anywhere;
}

.a88-sr-badge {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: var(--a88-surface-alt);
    color: var(--a88-text-muted);
    font-size: .72rem;
    font-weight: 600;
    vertical-align: middle;
}

.a88-sr-text {
    display: block;
    margin-top: .7rem;
    color: var(--a88-text);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.a88-sr-media {
    display: block;
    width: 100%;
    max-height: 340px;
    margin-top: .75rem;
    border-radius: 10px;
    object-fit: cover;
    background: var(--a88-surface-alt);
}

/* Highlighted match */
.a88-sr-main mark {
    background: rgba(242, 176, 30, .45);
    color: inherit;
    padding: 0 .1em;
    border-radius: 3px;
}

@media (max-width: 900px) {
    .a88-sr-sidebar {
        position: static;
    }
}


/* =============================================================================
   PHOTO VIEWER — Facebook-style popup: photo left, likes/comments right
   ============================================================================= */
body:has(.a88-viewer) { overflow: hidden; }

.a88-viewer {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    /* star8892 ink navy (hard-coded: --a88-navy switches to purple in dark theme) */
    background: radial-gradient(circle at 50% 38%, #1c2252 0%, #10143a 55%, #080b24 100%);
    outline: none;
}

.a88-viewer-close {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(242, 176, 30, .45);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.a88-viewer-close:hover { background: var(--a88-gold); border-color: var(--a88-gold); color: var(--a88-on-gold); }

.a88-viewer-stage {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.a88-viewer-img {
    max-width: 100%;
    max-height: 100vh;
    object-fit: contain;
    cursor: default;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .55);
}

.a88-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(242, 176, 30, .45);
    color: #fff;
    font-size: 1.9rem;
    line-height: 1;
    padding-bottom: 4px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.a88-viewer-nav:hover { background: var(--a88-gold); border-color: var(--a88-gold); color: var(--a88-on-gold); }
.a88-viewer-nav.prev { left: 16px; }
.a88-viewer-nav.next { right: 16px; }

.a88-viewer-panel {
    flex: none;
    width: 380px;
    display: flex;
    flex-direction: column;
    background: var(--a88-surface);
    color: var(--a88-text);
    border-left: 3px solid var(--a88-gold);   /* gold edge between photo and details */
}

.a88-viewer-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.1rem;
}

.a88-viewer-body { white-space: pre-wrap; word-break: break-word; }

.a88-viewer-counts {
    display: flex;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--a88-line);
    color: var(--a88-gold-text);
    font-weight: 600;
    font-size: .9rem;
}

.a88-viewer-actions {
    padding: .35rem 0;
    border-bottom: 1px solid var(--a88-line);
}
.a88-viewer-actions button {
    border: 1px solid var(--a88-line);
    border-radius: 999px;
    padding: .35rem 1rem;
    font-weight: 600;
}
/* Liked = brand gold pill */
.a88-viewer-actions button.active {
    background: var(--a88-gold);
    border-color: var(--a88-gold);
    color: var(--a88-on-gold);
}
.a88-viewer-actions button.active:hover { background: var(--a88-gold); color: var(--a88-on-gold); }

.a88-viewer-comments { padding-top: .75rem; }
.a88-viewer-empty { color: var(--a88-text-muted); font-size: .9rem; }

.a88-viewer-comment-meta {
    display: flex;
    gap: .75rem;
    padding: .15rem .5rem 0;
    font-size: .75rem;
    color: var(--a88-text-muted);
}
.a88-viewer-comment-meta button {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--a88-text-muted);
    cursor: pointer;
}
.a88-viewer-comment-meta button:hover { text-decoration: underline; }

.a88-viewer-compose {
    flex: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--a88-line);
    background: var(--a88-surface);
}
.a88-viewer-compose input.form-control { flex: 1; min-width: 0; }

/* Phones / narrow windows: photo on top, details underneath. */
@media (max-width: 820px) {
    .a88-viewer { flex-direction: column; }
    .a88-viewer-stage { flex: none; height: 52vh; }
    .a88-viewer-img { max-height: 52vh; }
    .a88-viewer-panel { flex: 1; width: auto; min-height: 0; border-left: 0; border-top: 3px solid var(--a88-gold); }
}


/* =============================================================================
   MULTI-PHOTO POSTS — composer thumbnails + Facebook-style photo grid in the feed
   ============================================================================= */
.a88-composer-photos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.a88-composer-thumb {
    position: relative;
    width: 92px;
    height: 92px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--a88-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--a88-text-muted);
}
.a88-composer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.a88-composer-thumb.is-add {
    border: 2px dashed var(--a88-line);
    background: none;
    font-size: 1.8rem;
    cursor: pointer;
    margin: 0;
}
.a88-composer-thumb.is-add:hover { border-color: var(--a88-gold); color: var(--a88-gold-text); }

.a88-composer-thumb-x {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: rgba(16, 20, 58, .75);
    color: #fff;
    font-size: .7rem;
    line-height: 1;
    cursor: pointer;
}
.a88-composer-thumb-x:hover { background: var(--a88-gold); color: var(--a88-on-gold); }

.a88-photo-grid {
    display: grid;
    gap: 3px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: .5rem;
}
.a88-photo-grid.n1 { grid-template-columns: 1fr; }
.a88-photo-grid.n2 { grid-template-columns: 1fr 1fr; height: 300px; }
.a88-photo-grid.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 420px; }
.a88-photo-grid.n3 .a88-photo-tile:first-child { grid-row: span 2; }
.a88-photo-grid.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 420px; }

.a88-photo-tile {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    background: var(--a88-surface-alt);
    cursor: zoom-in;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}
.a88-photo-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.a88-photo-grid.n1 .a88-photo-tile img { height: auto; max-height: 560px; }
.a88-photo-tile:hover img { filter: brightness(.92); }

.a88-photo-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 20, 58, .62);
    color: var(--a88-gold);
    font-size: 2.2rem;
    font-weight: 700;
}

.a88-viewer-counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    padding: .25rem .8rem;
    border-radius: 999px;
    background: rgba(16, 20, 58, .75);
    border: 1px solid rgba(242, 176, 30, .45);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    pointer-events: none;
}

@media (max-width: 600px) {
    .a88-photo-grid.n2 { height: 220px; }
    .a88-photo-grid.n3, .a88-photo-grid.n4 { height: 320px; }
}


/* =============================================================================
   PHOTO LIGHTBOX — plain click-to-enlarge popup (profile photos, marketplace, event covers)
   Reuses the .a88-viewer navy/gold shell; no side panel.
   ============================================================================= */
.a88-zoomable { cursor: zoom-in; }

.a88-viewer.is-plain .a88-viewer-stage { flex: 1; height: auto; }

.a88-viewer-caption {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80%;
    padding: .3rem .9rem;
    border-radius: 999px;
    background: rgba(16, 20, 58, .75);
    border: 1px solid rgba(242, 176, 30, .45);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
}
.a88-viewer-caption-count { margin-left: .5rem; color: var(--a88-gold); }

@media (max-width: 820px) {
    .a88-viewer.is-plain .a88-viewer-img { max-height: 100vh; }
}

/* small magnifier on the editable Then / Now tiles (the tile itself opens the file picker) */
.a88-tn-zoom {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(242, 176, 30, .5);
    background: rgba(16, 20, 58, .72);
    color: #fff;
    font-size: .8rem;
    line-height: 1;
    cursor: zoom-in;
}
.a88-tn-zoom:hover { background: var(--a88-gold); color: var(--a88-on-gold); }

/* cover photo banner on the event page */
.a88-event-detail-cover {
    max-width: 900px;
    margin: 0 auto 1.25rem;
}
.a88-event-detail-cover button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--a88-radius);
    overflow: hidden;
    background: var(--a88-surface-alt);
    cursor: zoom-in;
}
.a88-event-detail-cover img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 6;
    object-fit: cover;
}

/* ── Splash (PageSplash in MainLayout/AdminLayout, driven by wwwroot/js/splash.js) ──
   Hidden unless <html> has .a88-loading. */

.a88-splash {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    background: var(--a88-bg);
    color: var(--a88-text);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}

html.a88-loading .a88-splash {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

    .a88-splash img {
        border-radius: 14px;
        animation: a88-splash-pulse 1.6s ease-in-out infinite;
    }

    .a88-splash strong {
        margin-top: .75rem;
        font-family: var(--a88-font-display);
        font-size: 1.6rem;
    }

    .a88-splash small {
        color: var(--a88-text-muted);
        letter-spacing: .12em;
        text-transform: uppercase;
        font-size: .75rem;
        font-weight: 700;
    }

.a88-splash-bar {
    margin-top: 1.25rem;
    width: 140px;
    height: 3px;
    border-radius: 3px;
    background: var(--a88-line);
    overflow: hidden;
    position: relative;
}

    .a88-splash-bar::after {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 40%;
        background: var(--a88-accent);
        border-radius: 3px;
        animation: a88-splash-slide 1.1s ease-in-out infinite;
    }

@keyframes a88-splash-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes a88-splash-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

@media (prefers-reduced-motion: reduce) {
    .a88-splash img, .a88-splash-bar::after { animation: none; }
}

/* ── Announcements board on the members' wall ── */
.a88-ann-board {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 1rem;
}

.a88-ann-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

    .a88-ann-head h2 {
        margin: 0;
        font-size: 1.1rem;
        color: var(--a88-text);
    }

    .a88-ann-head a {
        font-size: .85rem;
        color: var(--a88-accent);
    }

.a88-ann-item {
    background: var(--a88-surface);
    border: 1px solid var(--a88-line);
    border-left: 4px solid var(--a88-gold);
    border-radius: 10px;
    padding: .75rem .9rem;
    color: var(--a88-text);
}

.a88-ann-item--urgent {
    border-left-color: #c0392b;
}

.a88-ann-item--normal {
    border-left-color: var(--a88-line);
}

.a88-ann-top {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.a88-ann-tag {
    font-size: .7rem;
    font-weight: 700;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--a88-gold);
    color: var(--a88-on-gold);
}

.a88-ann-item--urgent .a88-ann-tag {
    background: #c0392b;
    color: #fff;
}

.a88-ann-body {
    margin: .35rem 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.a88-ann-item small {
    color: var(--a88-text-muted);
}

/* ── Announcements widget in the wall's side board (and its narrow-screen copy) ── */
.a88-ann-widget-item a {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.a88-ann-widget-title {
    overflow-wrap: anywhere;
}

.a88-ann-widget-item small {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--a88-text-muted);
    font-weight: 400;
}

.a88-ann-widget-item--urgent {
    border-left: 3px solid #c0392b;
    padding-left: .5rem;
}

.a88-ann-widget-item--important {
    border-left: 3px solid var(--a88-gold);
    padding-left: .5rem;
}

/* The side board is hidden on narrow screens, so the copy above the wall takes over there. */
.a88-ann-widget--mobile {
    display: none;
}

@media (max-width: 1180px) {
    .a88-ann-widget--mobile {
        display: block;
        margin-bottom: 1rem;
    }
}

/* ── Members-only Announcements page (/wall/announcements) ── */
.a88-ann-page {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.a88-ann-back {
    color: var(--a88-accent);
    font-size: .9rem;
    text-decoration: none;
}

    .a88-ann-back:hover {
        text-decoration: underline;
    }

.a88-ann-page-head h1 {
    margin: 0 0 .25rem;
    font-size: 1.5rem;
    color: var(--a88-text);
}

.a88-ann-page-head a {
    color: var(--a88-accent);
}

.a88-ann-lock {
    font-size: .75rem;
    color: var(--a88-text-muted);
}

.a88-ann-item--picked {
    outline: 2px solid var(--a88-gold);
}

.a88-ann-empty {
    padding: 1.2rem;
    color: var(--a88-text-muted);
}

/* ── Event details: same layout as /wall (hero on top, wall left, RSVP + who's going right) ── */

.a88-event-detail-cover.a88-event-cover-wide {
    max-width: none;
}

.a88-event-desc {
    white-space: pre-line;
    color: var(--a88-text);
    margin-top: .75rem;
}

.a88-event-meta {
    order: 3;   /* after the title (1) and the date / description (2) */
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.25rem;
    margin-top: .85rem;
    font-size: .9rem;
    font-weight: 600;
}

/* Right column. Unlike .a88-rail-right it never disappears: the RSVP lives here, so on narrow screens it stacks above the wall. */
.a88-event-rail {
    position: sticky;
    top: calc(var(--a88-header-h) + 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

@media (max-width: 1100px) {
    .a88-event-rail {
        position: static;
        order: -1;
    }
}

.a88-going-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--a88-line);
}

    .a88-going-row:last-child {
        border-bottom: none;
    }

    .a88-going-row .a88-avatar-sm {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .a88-going-row .a88-rsvp-row-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .9rem;
    }

.a88-going-host {
    margin-left: auto;
    color: var(--a88-text-muted);
}

.a88-going-more {
    display: block;
    width: 100%;
    margin-top: .5rem;
    padding: .45rem 0 0;
    border: 0;
    border-top: 1px solid var(--a88-line);
    background: none;
    color: var(--a88-accent);
    font-size: .85rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

    .a88-going-more:hover {
        text-decoration: underline;
    }

.a88-going-list {
    max-height: 60vh;
    overflow-y: auto;
}

/* ── Event details: with a cover photo the title and description sit over the bottom of the photo ── */

.a88-event-banner {
    display: grid;   /* photo and text share one cell, so the banner grows if the text is taller than the photo */
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    border: 1px solid var(--a88-line);
    border-radius: 22px;
    background: var(--a88-surface-alt);
}

    .a88-event-banner > button,
    .a88-event-banner > .a88-hero {
        grid-area: 1 / 1;
    }

    .a88-event-banner > button {
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: none;
        cursor: zoom-in;
    }

    .a88-event-banner img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 360px;
        object-fit: cover;
    }

    .a88-event-banner > .a88-hero {
        align-self: end;
        margin: 0;
        border: 0;
        border-radius: 0;
        padding: 5rem 1.9rem 1.5rem;
        background: linear-gradient(0deg, rgba(13, 16, 33, .92) 0%, rgba(13, 16, 33, .75) 55%, rgba(13, 16, 33, 0) 100%);
        pointer-events: none;   /* clicks fall through to the photo (opens the lightbox) */
    }

        .a88-event-banner > .a88-hero h1,
        .a88-event-banner > .a88-hero .a88-event-desc {
            color: #fff;
        }

        .a88-event-banner > .a88-hero p,
        .a88-event-banner > .a88-hero .a88-event-meta {
            color: rgba(255, 255, 255, .85);
        }

        .a88-event-banner > .a88-hero a {
            color: #fff;
            pointer-events: auto;
            text-decoration: underline;
        }

@media (max-width: 700px) {
    /* Small screens: the photo is short, so the text goes underneath it instead. */
    .a88-event-banner {
        display: block;
    }

        .a88-event-banner img {
            min-height: 0;
            aspect-ratio: 16 / 9;
        }

        .a88-event-banner > .a88-hero {
            padding: 1.2rem 1.2rem 1.3rem;
            background: var(--a88-surface);
            pointer-events: auto;
        }

            .a88-event-banner > .a88-hero h1 {
                color: var(--a88-text);
            }

            .a88-event-banner > .a88-hero .a88-event-desc {
                color: var(--a88-text);
            }

            .a88-event-banner > .a88-hero p,
            .a88-event-banner > .a88-hero .a88-event-meta {
                color: var(--a88-text-muted);
            }

            .a88-event-banner > .a88-hero a {
                color: var(--a88-accent);
            }
}

/* ── Marketplace: photo reorder controls (create / edit) ─────────────────── */
.a88-mk-thumb-ctl {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    padding: 12px 3px 3px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .6));
}

    .a88-mk-thumb-ctl button {
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(0, 0, 0, .55);
        color: #fff;
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
    }

        .a88-mk-thumb-ctl button:disabled {
            opacity: .3;
            cursor: default;
        }

        .a88-mk-thumb-ctl button.cover {
            color: #ffd24a;
        }

/* ── Marketplace: owner ⋯ menu on the listing page ───────────────────────── */
.a88-mkt-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

    .a88-mkt-title-row .a88-mkt-title {
        flex: 1;
        min-width: 0;
    }

.a88-event-options-wrap.a88-mkt-options {
    position: relative;
    top: auto;
    right: auto;
    flex: 0 0 auto;
}

    .a88-event-options-wrap.a88-mkt-options .a88-dropdown-menu {
        right: 0;
        left: auto;
    }

/* =============================================================================
   MARKETPLACE — browse sort / price filter, Sold ribbon, seller lifecycle hints,
   and the "meet in a public place" checkout note.
   ============================================================================= */
.a88-mkt-sortbar {
    margin-top: .5rem;
    align-items: center;
}

.a88-mkt-price-filter {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--a88-surface-alt);
    color: var(--a88-text);
    border-radius: 50px;
    padding: .25rem .8rem;
    font-size: .85rem;
    font-weight: 600;
}

    .a88-mkt-price-filter input {
        width: 4.5rem;
        border: none;
        background: transparent;
        color: inherit;
        font: inherit;
        padding: .2rem .25rem;
        border-bottom: 1px solid var(--a88-line);
    }

        .a88-mkt-price-filter input:focus {
            outline: none;
            border-bottom-color: var(--a88-gold);
        }

/* Sold / given-away listings stay visible for a while, dimmed, with a diagonal-free corner ribbon. */
.a88-mkt-closed .a88-event-cover img {
    filter: grayscale(.7) brightness(.8);
}

.a88-mkt-closed .a88-event-body {
    opacity: .75;
}

.a88-mkt-ribbon {
    position: absolute;
    top: 12px;
    left: 0;
    background: #b00020;
    color: #fff;
    font-weight: 800;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .3rem .9rem .3rem .7rem;
    border-radius: 0 999px 999px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

.a88-mkt-expiry-note {
    display: block;
    margin-top: .4rem;
    font-size: .8rem;
    color: var(--a88-text-muted);
}

    .a88-mkt-expiry-note.soon {
        color: #b00020;
        font-weight: 600;
    }

.a88-mkt-safety-note {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    background: var(--a88-surface-alt);
    border-left: 4px solid var(--a88-gold);
    border-radius: 8px;
    padding: .7rem .8rem;
    margin-bottom: .75rem;
    font-size: .85rem;
}

    .a88-mkt-safety-note p {
        margin: 0;
    }

    .a88-mkt-safety-note button {
        margin-left: auto;
        white-space: nowrap;
        background: none;
        border: none;
        color: inherit;
        font-weight: 700;
        text-decoration: underline;
        cursor: pointer;
        padding: 0;
    }

/* =============================================================================
   ORDER DETAILS PAGE — uses the listing page's panel look (.a88-mkt-panel).
   ============================================================================= */
.a88-ord-detail {
    grid-template-columns: minmax(0, 1fr) 340px;
    max-width: 1000px;
    margin-inline: auto;
}

.a88-ord-head {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.a88-ord-thumb {
    flex: 0 0 120px;
    width: 120px;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--a88-surface-2);
}

    .a88-ord-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.a88-ord-head-text {
    min-width: 0;
}

.a88-ord-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: .35rem;
}

.a88-ord-status {
    display: inline-block;
    border-radius: 999px;
    padding: .2rem .75rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    background: var(--a88-surface-alt);
    color: var(--a88-text);
}

    .a88-ord-status.pending { background: rgba(245, 180, 0, .18); color: #d99a00; }
    .a88-ord-status.confirmed { background: rgba(80, 130, 255, .2); color: #7a9cff; }
    .a88-ord-status.completed { background: rgba(40, 180, 100, .2); color: #2fbf71; }
    .a88-ord-status.bad { background: rgba(220, 50, 70, .18); color: #e5475a; }

/* Progress steps */
.a88-ord-steps {
    list-style: none;
    display: flex;
    margin: 1.25rem 0 0;
    padding: 0;
}

.a88-ord-step {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .2rem;
    font-size: .85rem;
    color: var(--a88-text-muted);
}

    /* connector to the previous step */
    .a88-ord-step + .a88-ord-step::before {
        content: "";
        position: absolute;
        top: 9px;
        right: 50%;
        width: 100%;
        height: 2px;
        background: var(--a88-line);
    }

    .a88-ord-step.done + .a88-ord-step::before,
    .a88-ord-step.done + .a88-ord-step.current::before,
    .a88-ord-step.done + .a88-ord-step.bad::before {
        background: var(--a88-gold);
    }

.a88-ord-dot {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--a88-surface);
    border: 2px solid var(--a88-line);
}

.a88-ord-step.done .a88-ord-dot { background: var(--a88-gold); border-color: var(--a88-gold); }
.a88-ord-step.current .a88-ord-dot { border-color: var(--a88-gold); box-shadow: 0 0 0 4px rgba(245, 180, 0, .2); }
.a88-ord-step.bad .a88-ord-dot { background: #e5475a; border-color: #e5475a; }

.a88-ord-step.done .a88-ord-step-label,
.a88-ord-step.current .a88-ord-step-label { color: var(--a88-text); font-weight: 700; }
.a88-ord-step.bad .a88-ord-step-label { color: #e5475a; font-weight: 700; }

.a88-ord-step-date { font-size: .75rem; }

.a88-ord-wrap {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.a88-ord-people {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.a88-ord-role {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--a88-text-muted);
    margin-bottom: .4rem;
}

.a88-ord-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.a88-ord-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .75rem;
}

    .a88-ord-actions .a88-btn-primary,
    .a88-ord-actions .a88-btn-secondary {
        width: 100%;
        text-align: center;
        padding: .6rem 1rem;
    }

.a88-btn-secondary.a88-ord-danger {
    color: #e5475a;
    border: 1px solid #e5475a;
    background: transparent;
}

@media (max-width: 900px) {
    .a88-ord-detail { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .a88-ord-head { flex-direction: column; }
    .a88-ord-people { grid-template-columns: 1fr; }
}

/* ── Report listing (listing page) and report details (admin queue) ───────── */
.a88-mkt-report-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--a88-text-muted);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

    .a88-mkt-report-link:hover {
        color: var(--a88-text);
    }

.a88-mkt-report-form {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

    .a88-mkt-report-form label {
        display: flex;
        flex-direction: column;
        gap: .3rem;
        font-weight: 600;
        font-size: .9rem;
    }

.a88-report-details {
    display: block;
    margin-top: .25rem;
    font-style: italic;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* ── Order handover checklist (both sides confirm) ───────────────────────── */
.a88-ord-handover {
    list-style: none;
    margin: 0 0 .6rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.a88-ord-hand {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    color: var(--a88-text-muted);
}

    .a88-ord-hand.done {
        color: var(--a88-text);
    }

.a88-ord-tick {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--a88-line);
    margin-top: 1px;
}

.a88-ord-hand.done .a88-ord-tick {
    background: #2fbf71;
    border-color: #2fbf71;
    position: relative;
}

    .a88-ord-hand.done .a88-ord-tick::after {
        content: "";
        position: absolute;
        left: 5px;
        top: 1px;
        width: 5px;
        height: 10px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }


/* ── Page loading skeletons (Shared/LoadingSkeleton.razor) ────────────────
   The shimmer (.a88-skel) is defined in admin.css; these are the shapes that
   sit on top of it so the placeholders match the real cards. */

/* Fade in after a short wait: a fast load never flashes the skeleton at all. */
.a88-skel-page {
    animation: a88-skel-in .25s ease .15s both;
}

@keyframes a88-skel-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* A shimmer block that fills a card's top (photo / cover): square corners, the card clips them. */
.a88-event-cover.a88-skel,
.a88-skel-flat {
    border-radius: 0;
}

.a88-event-cover.a88-skel {
    border-radius: 8px 8px 0 0;
}

.a88-skel-card-body {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding-bottom: .9rem;
}

.a88-skel-pad {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem .9rem;
}

.a88-skel-btn {
    width: 100%;
    height: 34px;
    margin-top: .35rem;
}

.a88-skel-hero {
    width: 100%;
    height: 180px;
    margin-bottom: 1rem;
}

.a88-skel-detail-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
}

.a88-skel-card {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

/* Placeholder cards aren't links: no hover highlight. */
.a88-skel-page .a88-event-card:hover,
.a88-skel-page .a88-friend-card:hover,
.a88-skel-page .a88-game-tile:hover {
    border-color: var(--a88-line);
}

@media (max-width: 720px) {
    .a88-skel-detail-row {
        grid-template-columns: 1fr;
    }
}


/* ── Event card labels: Today / Tomorrow / Happening now / Ended ─────────── */

.a88-event-when {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    vertical-align: middle;
    background: var(--a88-surface-2);
    color: var(--a88-text-muted);
}

    .a88-event-when.soon {
        background: var(--a88-accent);
        color: #fff;
    }

    .a88-event-when.now {
        background: #2e9e5b;
        color: #fff;
    }

/* A finished or cancelled event stays visible (so you can still open it) but fades back. */
.a88-event-card.a88-event-ended .a88-event-cover,
.a88-event-card.a88-event-ended .a88-event-body {
    opacity: .6;
}

.a88-event-card.a88-event-ended .a88-event-cover img {
    filter: grayscale(.8);
}


/* ── Marketplace card: "New" badge and seller line ───────────────────────── */

.a88-mkt-new {
    display: inline-block;
    margin-right: .4rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: #2e9e5b;
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.a88-mkt-seller {
    color: var(--a88-text-muted);
    font-size: .8rem;
    margin-bottom: .5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.a88-event-going {
    color: var(--a88-text-muted);
    font-size: .8rem;
    margin-bottom: .5rem;
}


/* ── Marketplace: save-for-later heart (top-right of a card) ─────────────── */

.a88-fav-btn {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 60;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(2px);
    transition: transform .12s ease, background .12s ease;
}

    .a88-fav-btn:hover {
        background: rgba(0, 0, 0, 0.7);
        transform: scale(1.08);
    }

    .a88-fav-btn.saved {
        color: #ff5a6e;
    }

@media (prefers-reduced-motion: reduce) {
    .a88-fav-btn { transition: none; }
    .a88-fav-btn:hover { transform: none; }
}


/* ==========================================================================
   MOBILE / TOUCH POLISH (appended)
   ========================================================================== */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    overflow-wrap: break-word;
}

img, video {
    max-width: 100%;
}

/* 16px fields stop iOS Safari zooming the page in when a field is focused. */
@media (max-width: 991.98px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: 16px;
    }
}

/* Touch screens: drop sticky hover and keep tap targets comfortable. */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 44px;
    }
}