/* ============================================================================
   GLOBAL UI CHROME - PROTECTED FROM HOUSE THEMES
   These elements ALWAYS use the base Inter font, regardless of house theme.
   ============================================================================ */

/* Top Bar - Always base font (highest priority) */
[data-house-theme] .top-bar,
[data-house-theme] .top-bar *,
[data-house-theme] .top-bar__left,
[data-house-theme] .top-bar__center,
[data-house-theme] .top-bar__right,
[data-house-theme] .top-bar__btn {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* House Rail - Always base font */
[data-house-theme] .house-rail,
[data-house-theme] .house-rail *,
[data-house-theme] .house-rail__profile,
[data-house-theme] .house-rail__houses,
[data-house-theme] .house-rail__add {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* All badges, indicators, and notification elements - System fonts only (no web font loading flash) */
[data-house-theme] .house-icon__badge,
[data-house-theme] .house-icon__points,
[data-house-theme] .house-icon__indicator,
[data-house-theme] .dm-inbox-badge,
[data-house-theme] .friends-online-badge,
[data-house-theme] .nav-item__badge,
[data-house-theme] .dm-sidebar-item__unread,
[data-house-theme] .unread-badge,
[data-house-theme] .notification-badge,
[data-house-theme] .channel-item__badge,
[data-house-theme] [class*="-badge"],
[data-house-theme] [class*="__badge"],
[data-house-theme] [class*="unread"] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ============================================================================
   GLOBAL RESET & BASE
   ============================================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--surface-app);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden; /* Prevent Safari iOS body scroll that drags topbar off-screen */
    height: 100%;
}

body {
    height: 100%;
    overflow: hidden; /* App shell handles scroll */
}

/* Mobile: Allow native document scroll when app-shell collapses to single column */
@media (max-width: 767px) {
    html {
        overflow-y: auto;
        overflow-x: clip;
        max-width: 100vw;
    }

    body {
        overflow-y: auto;
        overflow-x: clip;
        max-width: 100vw;
    }
}

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-default);
}

a:hover {
    color: var(--text-link-hover);
}

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, textarea {
    font-family: inherit;
    font-size: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

/* Icons — scale unsized iconify-icon glyphs slightly larger than text */
iconify-icon {
    font-size: var(--icon-default-size);
}

/* Focus states */
:focus-visible {
    outline: 2px solid var(--interactive-focus-ring);
    outline-offset: 2px;
}

/* ============================================================================
   APP SHELL - CSS GRID LAYOUT
   ============================================================================ */
.app-shell {
    display: grid;
    grid-template-columns: var(--layout-rail-width) var(--layout-sidebar-width) 1fr;
    grid-template-rows: var(--layout-topbar-height) 1fr;
    grid-template-areas:
        "topbar  topbar  topbar"
        "rail    sidebar main";
    height: 100vh;
    height: 100dvh;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

/* Focused routes such as DM conversations own their chrome, so the base nav rail/topbar does not render. */
.app-shell.app-shell--global-nav-hidden {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "main";
}

/* ============================================================================
   TOP BAR — Unified 3-region CSS grid (left / center / right)
   ============================================================================ */
.top-bar {
    grid-area: topbar;
    position: sticky;
    top: 0;
    height: var(--layout-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0 var(--space-6);
    z-index: var(--z-sticky);
    pointer-events: none;
    background: var(--surface-app);
    border-bottom: none;
}
@media (max-width: 767px) {
    .top-bar {
        background: var(--surface-app);
        border-bottom: none;
        height: var(--layout-mobile-topbar-height);
        align-items: center;
    }
}
.top-bar__left {
    pointer-events: auto;
}
.top-bar__center { display: none; }
.top-bar__shop-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-green-400);
    text-decoration: none;
    margin-left: var(--space-1);
    border-left: 1px solid rgba(0,0,0,0.1);
    padding-left: var(--space-2);
}
.top-bar__shop-icon i,
.top-bar__shop-icon svg {
    width: 16px;
    height: 16px;
}
.top-bar__shop-icon:hover {
    opacity: 0.75;
}
.top-bar__right {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ── Floating Pill capsule ── */
.top-bar__floating-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 40px;
    background: var(--topbar-pill-bg);
    backdrop-filter: blur(var(--topbar-pill-blur));
    -webkit-backdrop-filter: blur(var(--topbar-pill-blur));
    border: 1px solid var(--topbar-pill-border);
    border-radius: var(--topbar-pill-radius);
    box-shadow: var(--topbar-pill-shadow);
    padding: 3px;
}
.top-bar__pill-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

/* ── House Switcher — button inside left pill ── */
.top-bar__house-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 10px;
    background: none;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    color: var(--topbar-pill-text-color);
    font-family: inherit;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-default);
}
.top-bar__house-switch:hover {
    background: var(--interactive-hover);
}
/* hamburger removed — BOH icon-pair replaces it */
.top-bar__house-ring { display: none; }
.top-bar__house-icon {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}
.top-bar__house-name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: var(--topbar-house-max-width);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Home pill: mono font for "BOOK OF HOUSES" */
.top-bar__floating-pill--home .top-bar__house-name {
    font-family: var(--topbar-pill-font);
    font-weight: var(--topbar-pill-font-weight);
    font-size: var(--topbar-pill-font-size);
    letter-spacing: var(--topbar-pill-letter-spacing);
    color: var(--topbar-pill-text-color);
}
/* BOH logo SVG in home pill */
/* Icon pair: logo ↔ X toggle */
.top-bar__icon-pair {
    position: relative;
    width: var(--topbar-pill-logo-size);
    height: var(--topbar-pill-logo-size);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.top-bar__boh-logo {
    width: var(--topbar-pill-logo-size);
    height: var(--topbar-pill-logo-size);
    color: currentColor;
    shape-rendering: crispEdges;
    transition: opacity var(--duration-fast) var(--ease-default),
                transform var(--duration-fast) var(--ease-default);
}
.top-bar__boh-x {
    width: var(--topbar-pill-logo-size);
    height: var(--topbar-pill-logo-size);
    position: absolute;
    top: 0;
    left: 0;
    color: var(--topbar-pill-text-color);
    opacity: 0;
    transform: rotate(-90deg);
    transition: opacity var(--duration-fast) var(--ease-default),
                transform var(--duration-fast) var(--ease-default);
}
/* Open state: logo out, X in */
.top-bar__house-switch.open .top-bar__boh-logo {
    opacity: 0;
    transform: rotate(90deg);
}
.top-bar__house-switch.open .top-bar__boh-x {
    opacity: 1;
    transform: rotate(0deg);
}
/* Down chevron in pill — rotates up when open */
.top-bar__chevron {
    flex-shrink: 0;
    color: var(--topbar-pill-text-color);
    opacity: 0.6;
    transition: transform var(--duration-fast) var(--ease-default);
    display: inline-flex;
    align-items: center;
}
.top-bar__house-switch.open .top-bar__chevron {
    transform: rotate(180deg);
}
.top-bar__house-name--mobile { display: none; }
@media (max-width: 767px) {
    .top-bar__house-name--desktop { display: none; }
    .top-bar__house-name--mobile { display: block; }
}
.top-bar__house-caret { display: none; }

/* ── Coin Chip — inside right pill ── */
.top-bar__coin-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 100%;
    background: none;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    font-family: inherit;
    transition: background var(--duration-fast) var(--ease-default);
    -webkit-tap-highlight-color: transparent;
}
.top-bar__coin-chip:hover {
    background: var(--surface-secondary);
}
.top-bar__coin-icon,
.coiny-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--topbar-coiny-color);
}
.top-bar__coiny-amount {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--topbar-pill-text-color);
    letter-spacing: 0.02em;
    min-width: 2ch;
}

/* ── Action Buttons — inside right pill ── */
.top-bar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--text-primary);
    border-radius: var(--radius-full);
    border: none;
    background: none;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-default),
                color var(--duration-fast) var(--ease-default);
}
.top-bar__btn:hover {
    background: var(--surface-secondary);
    color: var(--text-primary);
}
.top-bar__btn--badge,
.top-bar__btn--locked-dm {
    position: relative;
}
.top-bar__dm-icon {
    transform: scaleX(-1);
}
.top-bar__dm-icon--locked {
    opacity: var(--btn-disabled-opacity, 0.5);
}
.top-bar__btn i,
.top-bar__btn svg {
    width: 16px;
    height: 16px;
}

/* ── Active state: selected utility pill — black bg, white icon ── */
body.shop-page .top-bar__btn[data-utility-zone="shop"],
.top-bar__coin-chip--active {
    background: var(--color-black);
    color: var(--color-white);
}
body.shop-page .top-bar__btn[data-utility-zone="shop"] .top-bar__coin-icon,
.top-bar__coin-chip--active .top-bar__coin-icon {
    color: var(--color-white);
}
/* ── Unified utility pill: two-floor slide for earn animation ── */
/* Inherits height: 40px and padding: 3px from base .top-bar__floating-pill —
   keeps default box-sizing: content-box so outer height matches home pill. */
.top-bar__floating-pill--utility {
    position: relative;
    overflow: hidden;
    /* override base pill's inline-flex gap; we manage layout via the icons floor */
    gap: 0;
    transition: background var(--duration-base) var(--ease-default),
                border-color var(--duration-base) var(--ease-default),
                color var(--duration-base) var(--ease-default),
                width 450ms cubic-bezier(0.4, 0, 0.2, 1);
}
.topbar-utility__icons {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
/* Bigger icons inside the unified pill — match sidebar nav-item__icon weight (20px) */
.top-bar__floating-pill--utility .top-bar__btn {
    width: 36px;
    height: 34px;
}
.top-bar__floating-pill--utility .top-bar__btn iconify-icon,
.top-bar__floating-pill--utility .top-bar__btn svg {
    width: 20px;
    height: 20px;
}
.top-bar__floating-pill--utility .top-bar__coin-icon {
    width: 20px;
    height: 20px;
}
.topbar-utility__earn {
    position: absolute;
    top: 3px;
    left: 3px;
    bottom: 3px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    white-space: nowrap;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-black);
    transform: translateY(calc(100% + 6px));
    transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.topbar-utility__earn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--color-black);
    color: var(--accent-primary);
}
.topbar-utility__earn-arrow svg {
    display: block;
    width: 14px;
    height: 14px;
}
.topbar-utility__earn-coin {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: var(--color-black);
    flex-shrink: 0;
}
.topbar-utility__earn-coin svg {
    width: 100%;
    height: 100%;
}
.topbar-utility__earn-balance {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--color-black);
}
.topbar-utility__earn-delta {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.16);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--color-black);
    font-variant-numeric: tabular-nums;
}
/* Earning state: pill turns neon, icons slide up out, earn floor slides in */
.top-bar__floating-pill--utility.is-earning {
    background: var(--accent-primary);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--color-black);
}
.top-bar__floating-pill--utility.is-earning .topbar-utility__icons {
    transform: translateY(calc(-100% - 6px));
}
.top-bar__floating-pill--utility.is-earning .topbar-utility__earn {
    transform: translateY(0);
}
body.dm-page #inbox-toggle-btn {
    background: var(--color-black);
    color: var(--color-white);
}
body.dm-page .dm-inbox-badge {
    background: var(--surface-primary);
    color: var(--color-black) !important;
}
body.pack-page .top-bar__btn[title="Pack"] {
    background: var(--color-black);
    color: var(--color-white);
}

/* DM Inbox Badge */
.dm-inbox-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--color-black) !important;
    background: var(--indicator-unread);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dm-verify-pulse-dot {
    position: absolute;
    inset-block-start: var(--space-1);
    inset-inline-end: var(--space-1);
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--status-error);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-error) 45%, transparent);
    animation: dm-verify-pulse 1.35s var(--ease-default) infinite;
}

.dm-verify-pulse-dot--add {
    inset-block-start: calc(-1 * var(--space-1));
    inset-inline-end: calc(-1 * var(--space-1));
}

.dm-verify-pulse-dot--nav {
    inset-block-start: 50%;
    inset-inline-end: var(--space-3);
    transform: translateY(-50%);
}

@keyframes dm-verify-pulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-error) 45%, transparent);
    }
    70% {
        box-shadow: 0 0 0 var(--space-2) color-mix(in srgb, var(--status-error) 0%, transparent);
    }
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-error) 0%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dm-verify-pulse-dot {
        animation: none;
    }
}

/* ── Coin Chip Earn Animation ── */
@keyframes coiny-pill-earn {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
    30%  { transform: scale(1.18); box-shadow: 0 0 14px 5px rgba(74, 222, 128, 0.45); }
    60%  { transform: scale(1.1); box-shadow: 0 0 8px 2px rgba(74, 222, 128, 0.2); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.top-bar__coin-chip--earning {
    animation: coiny-pill-earn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    border-color: rgba(74, 222, 128, 0.5) !important;
}

.coiny-earn-badge {
    position: absolute;
    top: -8px;
    right: 0;
    background: var(--status-success);
    color: var(--color-black);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(0.7);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 11;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
    line-height: 1.4;
}

.coiny-earn-badge--show {
    opacity: 1;
    transform: translateY(-10px) scale(1);
}

.coiny-earn-badge--hide {
    opacity: 0;
    transform: translateY(-20px) scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* (removed: coiny-safe-overlay body:has rules — now using fullscreen-panel slide-in) */

/* ============================================================================
   HOUSE RAIL
   ============================================================================ */
.house-rail {
    grid-area: rail;
    --rail-effect-bleed: var(--space-10, 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px; /* Compact — pill is inside the rail now */
    gap: 4px;
    background: var(--rail-bg);
    overflow: visible;
    min-height: 0;  /* Allow grid item to shrink below content height */
    position: relative;
    z-index: var(--z-essence); /* Above discussion drawer so it slides under */
}

.house-rail::-webkit-scrollbar {
    width: 4px;
}

.house-rail::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: var(--radius-xs);
}

.house-rail:hover::-webkit-scrollbar-thumb {
    background: var(--border-default);
}

/* Home pill — green bg, black logo + text */
.top-bar__floating-pill--home {
    display: inline-flex;
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: none;
    border-radius: var(--topbar-pill-radius);
}
.top-bar__floating-pill--home .top-bar__house-name {
    color: #000;
}
.top-bar__floating-pill--home .top-bar__house-switch {
    color: #000;
}
.top-bar__floating-pill--home .top-bar__chevron {
    color: #000;
}
.top-bar__floating-pill--home .top-bar__boh-logo {
    color: #000;
}
.top-bar__floating-pill--home .top-bar__boh-x {
    color: #000;
}

/* House pill — black bg, white text (same as home) */
.top-bar__floating-pill--house {
    background: #000;
    border-color: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.top-bar__floating-pill--house .top-bar__house-name {
    color: #fff;
}
.top-bar__floating-pill--house .top-bar__chevron {
    color: #fff;
}
.top-bar__floating-pill--house .top-bar__house-switch {
    color: #fff;
}
.top-bar__floating-pill--house .top-bar__boh-x {
    color: var(--color-white);
}

@media (max-width: 767px) {
    .top-bar__floating-pill--house .top-bar__icon-pair {
        width: 24px;
        height: 24px;
    }
    .top-bar__floating-pill--house .top-bar__boh-x {
        width: 24px;
        height: 24px;
        color: var(--color-white);
        stroke-width: 3;
    }
}

@media (min-width: 768px) {
    .top-bar__floating-pill--boh-desktop {
        background: var(--accent-primary);
        border-color: var(--accent-primary);
        box-shadow: none;
    }

    .top-bar__floating-pill--boh-desktop .top-bar__house-switch,
    .top-bar__floating-pill--boh-desktop .top-bar__house-name,
    .top-bar__floating-pill--boh-desktop .top-bar__chevron,
    .top-bar__floating-pill--boh-desktop .top-bar__boh-logo,
    .top-bar__floating-pill--boh-desktop .top-bar__boh-x {
        color: #000;
    }

    .top-bar__floating-pill--boh-desktop .top-bar__house-name--desktop {
        font-family: var(--topbar-pill-font);
        font-weight: var(--topbar-pill-font-weight);
        font-size: var(--topbar-pill-font-size);
        letter-spacing: var(--topbar-pill-letter-spacing);
        max-width: none;
    }

    .top-bar__floating-pill--boh-desktop .top-bar__house-icon {
        display: none;
    }
}

/* Profile Avatar in Rail */
.house-rail__profile {
    position: relative;
    flex-shrink: 0;
    margin-bottom: 4px;
    overflow: visible;
    z-index: 2;  /* Effects render above sidebar */
}

/* Canvas effects on rail profile avatar - extend ~30px beyond icon */
.house-rail__profile .profile-avatar__canvas {
    width: 108px;
    height: 108px;
}

/* Ensure nothing in the rail profile chain clips the effect canvas */
.house-rail__profile,
.house-rail__profile .profile-avatar-link,
.house-rail__profile .lumina-avatar,
.house-rail__profile .profile-avatar {
    overflow: visible;
}

.house-rail__divider {
    display: none;
    width: calc(100% - var(--space-4));
    height: var(--rail-divider-width);
    background: var(--rail-divider-color);
    border-radius: var(--radius-full);
    flex-shrink: 0;
    margin-bottom: 4px;
}

.house-rail__houses {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    /* Enable scrolling when houses overflow */
    flex: 1 1 0;                 /* Take remaining space, basis 0 */
    min-height: 0;               /* Allow shrinking below content height */
    overflow-y: auto;            /* Scroll when needed */
    overflow-x: visible;         /* Lumina rings and unread badges need side bleed */
    scroll-behavior: smooth;

    /* Reserve room for active Lumina glow and notification badges. */
    margin: calc(-1 * var(--rail-effect-bleed)) calc(-1 * var(--rail-effect-bleed));
    padding: var(--rail-effect-bleed);

    /* Thin visible scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
}

.house-rail__houses::-webkit-scrollbar {
    width: 4px;
}

.house-rail__houses::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: var(--radius-xs);
}

.house-rail__add {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 4px;
    padding-top: 0;
    border-top: 0;
}

.house-rail__profile--passport {
    margin-top: 8px;
    margin-bottom: 0;
}

/* House Icon */
.house-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--rail-icon-size);
    height: var(--rail-icon-size);
    flex-shrink: 0;
    background: var(--rail-icon-bg);
    color: var(--rail-icon-color);
    border-radius: var(--rail-icon-radius);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: transform 0.15s ease, border-radius 0.15s ease;
    will-change: transform;  /* GPU acceleration for hover/click animations */
    overflow: visible;  /* Allow Lumina rings and badges to extend beyond icon */
}

.house-icon:hover {
    border-radius: var(--rail-icon-hover-radius);
    color: var(--text-primary);
}

.house-icon.active {
    background: var(--rail-icon-active-bg);
    color: var(--rail-icon-active-color);
    border-radius: var(--rail-icon-active-radius);
}

.house-icon__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--rail-icon-radius);
}


/* House Icon Tooltips — CSS pseudo-element fallback (disabled; JS tooltip
   handles rendering for Safari compat — see .house-rail-tooltip below).
   Kept as reference; ds-tooltip in design-system.css is the canonical component. */
.house-icon[data-tooltip] {
    position: relative;
}

.house-icon[data-tooltip]:hover::after,
.house-icon[data-tooltip]:hover::before {
    opacity: 0;
    visibility: hidden;
}

/* Active house tooltip — same green, no special override needed */

/* Signal house tooltip - standard positioning (no laurels to offset) */

/* ---- JS-driven house rail tooltip (Safari fallback) ----
   Extends ds-tooltip-el from design-system.css with rail-specific overrides. */
.house-rail-tooltip {
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: var(--rail-tooltip-padding);
    font-size: var(--rail-tooltip-font-size);
    font-weight: var(--rail-tooltip-font-weight);
    box-shadow: var(--shadow-lg), 0 0 20px var(--rail-tooltip-glow);
}

.house-rail-tooltip__arrow {
    border-width: 8px;
}

/* Also apply data-tooltip to profile-avatar-link */
.profile-avatar-link[data-tooltip] {
    position: relative;
}

/* House notification indicators */
.house-icon__indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: var(--house-icon-indicator-size);
    height: var(--house-icon-indicator-size);
    border-radius: var(--radius-full);
    border: 2px solid var(--rail-bg);
}

.house-icon__indicator--unread {
    background: var(--indicator-unread);
}

.house-icon__indicator--points {
    background: var(--house-icon-points-color);
    box-shadow: 0 0 8px var(--house-icon-points-glow);
}

/* Points badge at bottom of house icon - Gold for points */
.house-icon__points {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 20px;
    height: 16px;
    padding: 0 5px;
    background: linear-gradient(180deg, var(--color-yellow-400) 0%, var(--color-yellow-500) 100%);
    color: var(--zine-text-em);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    z-index: 10;
}

/* House unread chat badge */
.house-icon__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--indicator-unread);
    color: var(--color-black);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    z-index: 10;
}

/* Add House Button */
.house-icon--add {
    background: var(--status-warning-subtle, rgba(234, 179, 8, 0.15));
    border: 2px dashed var(--status-warning, var(--color-yellow-500));
    color: var(--status-warning, var(--color-yellow-500));
}

.house-icon--add:hover {
    border-color: var(--status-warning, var(--color-yellow-500));
    background: var(--status-warning, var(--color-yellow-500));
    color: var(--color-black, #000);
}

/* ============================================================================
   PROFILE AVATAR COMPONENT
   Reusable avatar with animation ring support
   ============================================================================ */
.profile-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-size, var(--avatar-md));
    height: var(--avatar-size, var(--avatar-md));
    aspect-ratio: 1 / 1;
}

.profile-avatar--xs { --avatar-size: var(--avatar-xs); }
.profile-avatar--sm { --avatar-size: var(--avatar-sm); }
.profile-avatar--md { --avatar-size: var(--avatar-md); }
.profile-avatar--lg { --avatar-size: var(--avatar-lg); }
.profile-avatar--xl { --avatar-size: var(--avatar-xl); }
.profile-avatar--2xl { --avatar-size: var(--avatar-2xl); }

.profile-avatar__image {
    width: var(--avatar-size, var(--avatar-md));
    height: var(--avatar-size, var(--avatar-md));
    border-radius: var(--radius-full);
    object-fit: cover;
}

.profile-avatar__ring {
    position: absolute;
    inset: calc(-1 * (var(--avatar-ring-width) + var(--avatar-ring-gap)));
    border: var(--avatar-ring-width) solid var(--avatar-ring-color);
    border-radius: var(--radius-full);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-default);
}

.profile-avatar--has-ring .profile-avatar__ring {
    opacity: 1;
}

.profile-avatar--active .profile-avatar__ring {
    border-color: var(--avatar-ring-active-color);
    animation: avatar-ring-pulse 2s ease-in-out infinite;
}

.profile-avatar--complete .profile-avatar__ring {
    border-color: var(--avatar-ring-complete-color);
}

.profile-avatar__glow {
    position: absolute;
    inset: calc(-1 * var(--avatar-glow-size));
    background: radial-gradient(circle, var(--avatar-glow-color) 0%, transparent 70%);
    border-radius: var(--radius-full);
    opacity: 0;
    pointer-events: none;
}

.profile-avatar--glowing .profile-avatar__glow {
    opacity: 1;
    animation: avatar-glow 2s ease-in-out infinite;
}

/* Canvas overlay for WebGL effects - centered and dynamically sized by JS */
.profile-avatar__canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
}

@keyframes avatar-ring-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes avatar-glow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Avatar link wrapper */
.profile-avatar-link {
    display: block;
    text-decoration: none;
    border-radius: 50%;
}

/* ============================================================================
   AVATAR EFFECTS (SHOP ITEMS)
   Effects purchased from the shop that modify profile avatar appearance
   ============================================================================ */

/* Spinning Octagon - colorful spinning octagon border around avatar */
.avatar-effect--spinning-octagon {
    position: relative;
    overflow: visible;
}

.avatar-effect--spinning-octagon::before {
    content: '';
    position: absolute;
    top: calc(var(--avatar-size, 40px) * -0.15);
    left: calc(var(--avatar-size, 40px) * -0.15);
    right: calc(var(--avatar-size, 40px) * -0.15);
    bottom: calc(var(--avatar-size, 40px) * -0.15);
    background: conic-gradient(
        from 0deg,
        #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #5f27cd, #ff6b6b
    );
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    animation: spin-octagon 10s linear infinite;
    z-index: 0;
    pointer-events: none;
}

/* Hide avatar effects when essence has departed to house */
.avatar-effect--spinning-octagon.essence-departed::before,
.avatar-effect--fire.essence-departed::before,
.avatar-effect--fire.essence-departed::after,
.avatar-effect--neon.essence-departed::before,
.avatar-effect--magic-mist.essence-departed::before,
.avatar-effect--magic-mist.essence-departed::after,
.avatar-effect--smile.essence-departed::after,
.avatar-effect--wood.essence-departed::before,
.avatar-effect--bamboo.essence-departed::before,
.avatar-effect--spades.essence-departed::before,
.avatar-effect--cowboy.essence-departed::before,
.avatar-effect--glitch.essence-departed::before,
.avatar-effect--glitch.essence-departed::after {
    display: none;
}

/* Hide JS-based effect containers when essence has departed */
.essence-departed .profile-avatar__canvas,
.essence-departed .plants-container,
.essence-departed .lightning-container,
.essence-departed .fireworks-container,
.essence-departed .hearts-container,
.essence-departed .galaxy-container,
.essence-departed .water-container,
.essence-departed .wind-container,
.essence-departed .unicorn-container,
.essence-departed .laser-container,
.essence-departed .owl-container,
.essence-departed .wolf-container,
.essence-departed .panda-container {
    display: none;
}

/* Hide lumina ring when essence has departed to house */
.essence-departed .lumina-ring {
    display: none;
}
.essence-departed .lumina-avatar {
    --lumina-glow-sm: 0px;
    --lumina-glow-lg: 0px;
}

.avatar-effect--spinning-octagon .profile-avatar__image {
    position: relative;
    z-index: 1;
}

.avatar-effect--spinning-octagon .profile-avatar__ring,
.avatar-effect--spinning-octagon .profile-avatar__canvas {
    z-index: 2;
}

@keyframes spin-octagon {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Smile - curved smile overlay at bottom of avatar */
.avatar-effect--smile {
    position: relative;
}

.avatar-effect--smile::after {
    content: '';
    position: absolute;
    bottom: 15%;
    left: 25%;
    right: 25%;
    height: 15%;
    border: 3px solid var(--color-yellow-400);
    border-top: none;
    border-radius: 0 0 100px 100px;
    pointer-events: none;
    z-index: 10;
}

/* Magic Mist - Discord-style swirling magical energy border */
.avatar-effect--magic-mist {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate;
}

.avatar-effect--magic-mist .profile-avatar__ring {
    display: none;
}

/* Canvas renders ON TOP of the avatar image - scales to 1.5x avatar size */
.avatar-effect--magic-mist .profile-avatar__canvas {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(var(--avatar-size, 40px) * 1.5) !important;
    height: calc(var(--avatar-size, 40px) * 1.5) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Avatar image stays behind */
.avatar-effect--magic-mist .profile-avatar__image {
    position: relative !important;
    z-index: 1 !important;
}

/* ============================================================================
   CHANNEL SIDEBAR
   ============================================================================ */
.channel-sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    background: var(--sidebar-bg);
    overflow: hidden;
    position: relative;
    z-index: 140; /* Below rail (150) so Lumina rings can extend over sidebar edge */
}

.channel-sidebar__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    height: var(--sidebar-header-height);
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--sidebar-header-border);
    flex-shrink: 0;
}

.channel-sidebar__user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.channel-sidebar__user-name {
    font-size: var(--text-2xl);  /* Large prominent name - 8 chars fit perfectly */
    font-weight: var(--font-bold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.channel-sidebar__user-points {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-lg);  /* Larger points display */
    font-weight: var(--font-semibold);
    color: var(--points-color);
}

/* Settings dropdown */
.channel-sidebar__settings {
    position: relative;
}

.channel-sidebar__settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.channel-sidebar__settings-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

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

.channel-sidebar__settings-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 140px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
    z-index: var(--z-sticky);
}

.channel-sidebar__settings-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.channel-sidebar__settings-dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: background 0.1s;
}

.channel-sidebar__settings-dropdown a:hover {
    background: var(--bg-tertiary);
}

.channel-sidebar__settings-dropdown a svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

.channel-sidebar__nav {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-3);
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar chrome — content still scrolls */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.channel-sidebar__nav::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Navigation Items */
.nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    height: auto;
    padding: var(--sidebar-nav-item-padding);
    color: var(--sidebar-nav-item-color);
    border-radius: var(--sidebar-nav-item-radius);
    text-decoration: none;
    transition: background-color 0.1s ease, color 0.1s ease;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    position: relative;
}

.nav-item:hover {
    background: var(--sidebar-nav-item-hover-bg);
    color: var(--sidebar-nav-item-hover-color);
}

.nav-item:hover .nav-item__icon {
    color: var(--text-primary);
}

.nav-item.active {
    background: var(--sidebar-nav-item-active-bg);
    color: var(--sidebar-nav-item-active-color);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(44, 52, 68, 0.08), 0 6px 14px rgba(44, 52, 68, 0.12);
}

.nav-item.active .nav-item__icon {
    color: var(--accent-primary);
}

.nav-item__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.nav-item__text {
    flex: 1;
    font-size: var(--text-sm);
}

.nav-item__primary-label {
    color: var(--text-muted);
    font-weight: var(--font-medium);
}

.nav-item__badge {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    padding: 2px 6px;
    background: var(--indicator-unread);
    color: var(--color-black);
    border-radius: 6px;
    letter-spacing: 0.06em;
}

/* Create / Action Buttons in Nav */
.nav-item--create {
    margin-top: var(--space-2);
    border: 2px dashed var(--border-default);
    border-radius: var(--radius-full);
    color: var(--text-primary);
}

.nav-item--create:hover {
    border-color: var(--text-primary);
    background: var(--sidebar-nav-item-hover-bg);
    color: var(--text-primary);
}

/* Locked state for non-verified users */
.nav-item--locked {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.nav-item--locked:hover {
    border-color: var(--border-default);
    background: transparent;
    color: var(--text-muted);
}

/* ============================================================================
   LOCK COVER — semi-transparent overlay for unverified (observer) users
   ============================================================================ */
.lock-cover {
    position: absolute;
    inset: 0;
    background: rgba(5, 11, 20, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 10;
    border-radius: inherit;
    cursor: pointer;
    text-decoration: none;
}
.lock-cover__icon {
    width: 28px;
    height: 28px;
    color: var(--text-muted);
    opacity: 0.7;
}
.lock-cover__text {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-align: center;
    max-width: 200px;
    line-height: 1.4;
}
.lock-cover__action {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--accent-primary);
    text-decoration: none;
}
.lock-cover__action:hover {
    text-decoration: underline;
}
/* Inline variant for buttons — no absolute positioning */
.lock-cover--inline {
    position: relative;
    inset: auto;
    padding: 12px 16px;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    flex-direction: row;
    gap: 10px;
}
.lock-cover--inline .lock-cover__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.lock-cover--inline .lock-cover__text {
    max-width: none;
    text-align: left;
}
/* Banner variant for top-of-page notices */
.lock-cover--banner {
    position: relative;
    inset: auto;
    flex-direction: row;
    padding: 10px 16px;
    gap: 10px;
    border-radius: var(--radius-md, 8px);
    background: rgba(5, 11, 20, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 12px;
}
.lock-cover--banner .lock-cover__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.lock-cover--banner .lock-cover__text {
    max-width: none;
    text-align: left;
    flex: 1;
}
.lock-cover__text strong {
    display: block;
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}
.lock-cover__list {
    margin: 6px 0 0;
    padding-left: 18px;
}
.lock-cover__list li {
    margin: 2px 0;
}

/* Section Headers */
.nav-section {
    margin-top: var(--space-4);
}

.nav-section:first-child {
    margin-top: 0;
}

.nav-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Sidebar Footer - removed, Create House now in nav */

/* ============================================================================
   MAIN AREA
   ============================================================================ */
.main-area {
    grid-area: main;
    display: flex;
    flex-direction: column;
    background: var(--main-bg);
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.main-area:hover {
    scrollbar-color: var(--border-default) transparent;
}
.main-area::-webkit-scrollbar { width: 6px; }
.main-area::-webkit-scrollbar-track { background: transparent; }
.main-area::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--radius-xs); }
.main-area:hover::-webkit-scrollbar-thumb { background: var(--border-default); }

.main-area__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;  /* No padding - content controls its own spacing for fluid look */
    max-width: 100%;
    width: 100%;
    min-width: 0;  /* Critical for grid children to respect bounds */
    min-height: 0;  /* Critical for flex children to allow overflow/scrolling in child containers */
    box-sizing: border-box;
}

/* Admin pages: top bar is now a grid row, no padding hack needed */

/* ============================================================================
   MOBILE RESPONSIVE
   ============================================================================ */
@media (max-width: 767px) {
    .app-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "topbar"
            "main";
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: clip;
        overflow-y: visible;
        max-width: 100vw;
    }

    .app-shell.app-shell--global-nav-hidden {
        grid-template-rows: 1fr;
        grid-template-areas: "main";
    }

    .house-rail { display: none !important; }

    .top-bar {
        padding: 0 var(--space-4);
    }
    .top-bar__btn--desktop { display: none; }
    .top-bar__house-name--desktop { display: none; }
    .top-bar__house-name--mobile { display: block; }
    .house-card-nav__tab { height: 36px; min-width: 36px; padding: 0 8px 0 18px; }
    .house-card-nav__tab:first-child { padding-left: 22px; }
    .house-card-nav__tab--active { padding: 0 14px 0 22px; }
    .house-card-nav__tab i, .house-card-nav__tab svg { width: 16px; height: 16px; }
    .top-bar__house-close { width: 36px; height: 36px; padding-left: 12px; }
    .top-bar__house-close svg { width: 18px; height: 18px; }

    .channel-sidebar {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: var(--layout-sidebar-width);
        height: 100vh;
        z-index: var(--z-overlay);
        box-shadow: var(--shadow-xl);
    }

    .channel-sidebar.open {
        display: flex;
    }

    .main-area {
        grid-column: 1;
        overflow-x: clip;
        overflow-y: visible;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        max-width: 100vw;
    }

    .main-area__content {
        padding: 0;
    }

    /* Mobile Tab Navigation */
    .mobile-tab-nav {
        display: flex;
        position: sticky;
        top: 0;
        background: var(--surface-primary);
        border-bottom: 1px solid var(--border-default);
        z-index: var(--z-sticky);
    }

    .mobile-tab-nav__item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--size-12);
        color: var(--text-muted);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        border-bottom: 2px solid transparent;
        transition: color 0.1s ease, border-color 0.1s ease;
    }

    .mobile-tab-nav__item.active {
        color: var(--accent-primary);
        border-bottom-color: var(--accent-primary);
    }
}

@media (min-width: 768px) {
    .mobile-tab-nav {
        display: none;
    }
}

/* ============================================================================
   DM SIDEBAR SECTION
   ============================================================================ */
.dm-section {
    margin-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-3);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Important for flex overflow */
}

.dm-section .nav-section__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dm-section__add {
    position: relative;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: none;
    border: none;
}

.dm-section__add:hover {
    color: var(--text-primary);
    background: var(--interactive-hover);
}
.dm-section__add--locked {
    opacity: 0.65;
}
.dm-section__add--locked:hover {
    color: var(--accent-primary);
}

.dm-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
    overflow-y: auto;
    min-height: 100px;
    max-height: none;
}

.dm-sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    color: var(--text-secondary);
    transition: background-color 0.1s ease, color 0.1s ease;
}

.dm-sidebar-item:hover {
    background: var(--interactive-hover);
    color: var(--text-primary);
}

.dm-sidebar-item.active {
    background: var(--accent-primary-subtle);
    color: var(--accent-primary);
}

.dm-sidebar-item.unread {
    color: var(--text-primary);
    font-weight: var(--font-medium);
}

.dm-sidebar-item__avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    position: relative;
    flex-shrink: 0;
}

.dm-sidebar-item__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

.dm-sidebar-item__online {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: var(--status-success);
    border: 2px solid var(--sidebar-bg);
    border-radius: var(--radius-full);
}

.dm-sidebar-item__name {
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.dm-sidebar-item__unread {
    width: 8px;
    height: 8px;
    background: var(--indicator-unread);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.dm-sidebar-empty {
    padding: var(--space-4) var(--space-3);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.dm-sidebar-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.dm-sidebar-item__stats {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.dm-sidebar-item__points {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: var(--text-xs);
    color: var(--color-yellow-500);
}

.dm-sidebar-item__role {
    font-size: var(--text-xs);
    padding: 1px 5px;
    border-radius: var(--radius-full);
    font-weight: var(--font-medium);
    text-transform: capitalize;
}

.dm-sidebar-item__role--founder {
    background: var(--color-purple-100);
    color: var(--color-purple-700);
}

.dm-sidebar-item__role--steward {
    background: var(--color-blue-100);
    color: var(--color-blue-700);
}

.dm-sidebar-item__role--guide {
    background: var(--color-green-100);
    color: var(--color-green-700);
}

.dm-sidebar-item__role--active {
    background: var(--color-teal-100);
    color: var(--color-teal-700);
}

.dm-sidebar-item__role--pledge {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
}

/* DM Sidebar Item Wrapper - for three-dot menu */
.dm-sidebar-item-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.dm-sidebar-item-wrapper .dm-sidebar-item {
    flex: 1;
    min-width: 0;
}

.dm-sidebar-item__menu-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-gray-500);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.dm-sidebar-item-wrapper:hover .dm-sidebar-item__menu-btn {
    opacity: 1;
}

.dm-sidebar-item__menu-btn:hover {
    background: var(--color-gray-700);
    color: var(--color-gray-200);
}

/* DM Context Menu */
.dm-context-menu {
    min-width: 160px;
    background: var(--color-gray-800);
    border: 1px solid var(--color-gray-700);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-modal);
    overflow: hidden;
    animation: fadeIn 0.1s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.dm-context-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    color: var(--color-gray-200);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.dm-context-menu__item:hover {
    background: var(--color-gray-700);
}

.dm-context-menu__item--status-error {
    color: var(--color-red-400);
}

.dm-context-menu__item--status-error:hover {
    background: rgba(239, 68, 68, 0.15);
}

.dm-context-menu__separator {
    height: 1px;
    background: var(--color-gray-700);
    margin: var(--space-1) 0;
}

/* DM Toast Notification
   JS controls the full lifecycle (entry + dismiss).
   No CSS animation/transition — avoids mobile WebKit fill-mode + throttle bugs. */
.dm-toast {
    position: fixed;
    top: max(var(--space-4), env(safe-area-inset-top));
    right: max(var(--space-4), env(safe-area-inset-right));
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: min(380px, calc(100vw - 32px));
    min-height: 64px;
    padding: var(--space-3) var(--space-4);
    background: var(--highlight-neon, #33e658);
    color: var(--color-black, #000);
    border: 2px solid var(--color-black, #000);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.92), 0 18px 40px rgba(0, 0, 0, 0.32), 0 0 28px rgba(51, 230, 88, 0.45);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: 1.3;
    z-index: var(--z-critical);
    pointer-events: auto;
    opacity: 1;
    transform: translateX(0);
    overflow: hidden;
    /* No CSS animation or transition — JS handles entry/exit via Web Animations API */
}

.dm-toast--clickable,
.dm-toast--dismissable {
    cursor: pointer;
}

.dm-toast:focus-visible {
    outline: 3px solid var(--color-black, #000);
    outline-offset: 3px;
}

.dm-toast__avatar,
.dm-toast__glyph-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 2px solid var(--color-black, #000);
}

.dm-toast__avatar {
    border-radius: var(--radius-full);
    background: var(--color-white, #fff);
    object-fit: cover;
}

.dm-toast__glyph-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-black, #000);
    color: var(--highlight-neon, #33e658);
}

.dm-toast__glyph-avatar svg {
    display: block;
    width: 24px;
    height: 24px;
}

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

.dm-toast__title {
    color: var(--color-black, #000);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-toast__message {
    color: var(--color-black, #000);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: 1.3;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dm-toast--error {
    background: var(--color-red-400, #f87171);
    color: var(--color-black, #000);
}

.dm-toast--deploy {
    background: linear-gradient(135deg, var(--color-yellow-500) 0%, var(--color-orange-600) 100%);
    color: var(--color-black, #000);
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: var(--text-lg);
    max-width: 400px;
    pointer-events: none;
}

/* ============================================================================
   INBOX DROPDOWN/OVERLAY
   ============================================================================ */
.inbox-dropdown {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(var(--layout-topbar-height) + 4px);
    right: var(--space-4);
    width: 420px;
    max-height: 500px;
    background: var(--color-gray-900);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-dropdown);
    overflow: hidden;
}

.inbox-dropdown.open {
    display: flex;
}

.inbox-dropdown__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-gray-700);
}

.inbox-dropdown__title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-white);
}

.inbox-dropdown__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.inbox-dropdown__mark-read,
.inbox-dropdown__close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.inbox-dropdown__mark-read:hover,
.inbox-dropdown__close:hover {
    color: var(--color-white);
    background: var(--color-gray-700);
}

.inbox-dropdown__tabs {
    display: flex;
    padding: var(--space-2) var(--space-4);
    gap: var(--space-2);
    border-bottom: 1px solid var(--color-gray-700);
    overflow-x: auto;
}

.inbox-tab {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--duration-fast);
}

.inbox-tab:hover {
    color: var(--color-white);
}

.inbox-tab.active {
    color: var(--color-teal-400);
}

.inbox-dropdown__content {
    max-height: 380px;
    overflow-y: auto;
}

.inbox-empty {
    text-align: center;
    padding: var(--space-8);
    color: var(--color-gray-400);
}

.inbox-empty__icon {
    font-size: var(--text-5xl);
    margin-bottom: var(--space-4);
}

.inbox-empty__title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-white);
    margin-bottom: var(--space-2);
}

.inbox-empty__text {
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.inbox-empty__btn {
    padding: var(--space-2) var(--space-4);
    background: var(--color-teal-600);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: var(--font-medium);
}

.inbox-empty__btn:hover {
    background: var(--color-teal-700);
}

/* Inbox Message Item (for Messages tab) */
.inbox-message-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: var(--color-gray-300);
    border-bottom: 1px solid var(--color-gray-800);
    transition: background var(--duration-fast);
}

.inbox-message-item:hover {
    background: var(--color-gray-800);
}

.inbox-message-item.unread {
    background: rgba(20, 184, 166, 0.05);
}

.inbox-message-item.unread .inbox-message-item__name {
    color: var(--color-white);
    font-weight: var(--font-semibold);
}

.inbox-message-item__avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
}

.inbox-message-item__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Build/agent emoji avatars — no circle container */
.inbox-message-item__avatar--build,
.inbox-message-item__avatar--agent {
    border-radius: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inbox-message-item__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inbox-message-item__name {
    font-size: var(--text-sm);
    color: var(--color-gray-200);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-message-item__preview {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-message-item__link {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-teal-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.inbox-message-item:hover .inbox-message-item__link {
    color: var(--color-teal-300);
    text-decoration: underline;
}

.inbox-message-item__dot {
    width: 8px;
    height: 8px;
    background: var(--color-teal-500);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.inbox-message-item__badge {
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-2);
    background: var(--accent-primary);
    color: var(--color-black);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Agent action buttons in inbox */
.inbox-message-item__action {
    margin-left: auto;
    flex-shrink: 0;
}

.inbox-agent-btn {
    padding: 4px 10px;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}

.inbox-agent-btn--test {
    background: var(--status-success);
    color: var(--color-black);
}

.inbox-agent-btn--test:hover {
    background: var(--color-green-600);
}

.inbox-agent-btn--resend {
    background: var(--status-error);
    color: var(--text-inverse);
}

.inbox-agent-btn--resend:hover {
    background: var(--color-red-600);
}

.inbox-agent-status {
    display: inline-block;
    padding: 4px 10px;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border-radius: var(--radius-sm);
}

.inbox-agent-status--working {
    background: var(--status-warning-subtle);
    color: var(--color-yellow-500);
}

.inbox-agent-status--testing {
    background: rgba(139, 92, 246, 0.2);
    color: var(--color-purple-500);
}

.inbox-agent-status--passed {
    background: var(--status-success-subtle);
    color: var(--status-success);
}

.inbox-message-item__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.inbox-message-item__points {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: var(--text-xs);
    color: var(--color-yellow-500);
}

.inbox-message-item__role {
    font-size: var(--text-xs);
    padding: 1px 5px;
    border-radius: var(--radius-full);
    font-weight: var(--font-medium);
    text-transform: capitalize;
}

.inbox-message-item__role--founder {
    background: var(--color-purple-100);
    color: var(--color-purple-700);
}

.inbox-message-item__role--steward {
    background: var(--color-blue-100);
    color: var(--color-blue-700);
}

.inbox-message-item__role--guide {
    background: var(--color-green-100);
    color: var(--color-green-700);
}

.inbox-message-item__role--active {
    background: var(--color-teal-100);
    color: var(--color-teal-700);
}

.inbox-message-item__role--pledge {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
}

.inbox-message-item__time {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    margin-left: auto;
    flex-shrink: 0;
}

.inbox-message-item__icon {
    font-size: var(--text-xs);
    margin-right: 2px;
}

.inbox-message-item.muted {
    opacity: 0.6;
}

.inbox-message-item.muted .inbox-message-item__name::after {
    content: '🔇';
    font-size: var(--text-xs);
    margin-left: 4px;
}

/* ============================================================================
   FRIENDS PANEL
   ============================================================================ */
.friends-panel {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(var(--layout-topbar-height) + 4px);
    right: var(--space-4);
    width: 320px;
    max-height: 400px;
    background: var(--color-gray-900);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-dropdown);
    overflow: hidden;
    pointer-events: auto; /* Override inherited pointer-events:none from .top-bar */
}

.friends-panel.open {
    display: flex;
}

.friends-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-gray-700);
}

.friends-panel__title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-white);
}

.friends-panel__close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.friends-panel__close:hover {
    background: var(--color-gray-700);
    color: var(--color-white);
}

.friends-panel__content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2);
}

.friends-empty {
    text-align: center;
    padding: var(--space-6) var(--space-4);
}

.friends-empty__icon {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-3);
}

.friends-empty__title {
    font-weight: var(--font-semibold);
    color: var(--color-white);
    margin-bottom: var(--space-1);
}

.friends-empty__text {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
}

.friends-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--duration-fast);
}

.friends-item:hover {
    background: var(--color-gray-800);
}

.friends-item__avatar {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.friends-item__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.friends-item__status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--color-gray-900);
    background: var(--color-gray-500);
}

.friends-item__status--online {
    background: var(--color-green-500);
}

.friends-item__info {
    flex: 1;
    min-width: 0;
}

.friends-item__name {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-white);
}

.friends-item__handle {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
}

.friends-item__actions {
    display: flex;
    gap: var(--space-1);
}

.friends-item__btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-gray-400);
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
}

.friends-item__btn:hover {
    background: var(--color-gray-700);
    color: var(--color-white);
}

.friends-online-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--accent-primary);
    color: var(--color-black);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================================
   LEADERBOARD DROPDOWN
   ============================================================================ */
.leaderboard-dropdown {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(var(--layout-topbar-height) + 4px);
    right: var(--space-4);
    width: 320px;
    max-height: 450px;
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-dropdown);
    overflow: hidden;
    pointer-events: auto; /* Override inherited pointer-events:none from .top-bar */
}

.leaderboard-dropdown.open {
    display: flex;
}

.leaderboard-dropdown__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-default);
}

.leaderboard-dropdown__title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-white);
}

.leaderboard-dropdown__close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.leaderboard-dropdown__close:hover {
    color: var(--color-white);
    background: var(--color-gray-700);
}

.leaderboard-dropdown__content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2) 0;
}

.leaderboard-loading {
    text-align: center;
    padding: var(--space-8);
    color: var(--color-gray-400);
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: var(--color-gray-300);
    transition: background var(--duration-fast);
}

.leaderboard-item:hover {
    background: var(--color-gray-800);
}

.leaderboard-item__rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.leaderboard-item__rank--1 {
    background: linear-gradient(135deg, var(--color-yellow-400), var(--color-yellow-500));
    color: var(--zine-text-primary);
}

.leaderboard-item__rank--2 {
    background: linear-gradient(135deg, var(--color-gray-300), var(--color-gray-400));
    color: var(--zine-text-primary);
}

.leaderboard-item__rank--3 {
    background: linear-gradient(135deg, var(--color-orange-500), var(--color-orange-500));
    color: var(--zine-text-primary);
}

.leaderboard-item__rank--default {
    background: var(--surface-tertiary);
    color: var(--text-secondary);
}

.leaderboard-item__symbol {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--surface-tertiary);
}

.leaderboard-item__symbol img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.leaderboard-item__info {
    flex: 1;
    min-width: 0;
}

.leaderboard-item__name {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leaderboard-item__members {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

.leaderboard-item__points {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-yellow-400);
    flex-shrink: 0;
}

/* Mobile-only elements hidden on desktop */
.mobile-only {
    display: none !important;
}

/* Mobile bottom nav - hidden by default, shown on mobile */
.mobile-bottom-nav {
    display: none;
}

/* Mobile: All panels go full-screen */
@media (max-width: 767px) {
    .inbox-dropdown {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 100%;
        border-radius: 0;
        z-index: var(--z-fullscreen);
    }

    .inbox-dropdown__content {
        max-height: calc(100vh - 120px);
    }

    .friends-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 100%;
        border-radius: 0;
        z-index: var(--z-fullscreen);
    }

    .friends-panel__content {
        max-height: calc(100vh - 70px);
    }

    .leaderboard-dropdown {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 100%;
        border-radius: 0;
        z-index: var(--z-fullscreen);
    }

    .leaderboard-dropdown__content {
        max-height: calc(100vh - 70px);
    }

    .verification-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 100%;
        border-radius: 0;
        z-index: var(--z-fullscreen);
    }

    .mobile-only {
        display: flex !important;
    }

    .inbox-tab.mobile-only {
        display: inline-block !important;
    }

    /* Hide sidebar DM section on mobile */
    .dm-section {
        display: none;
    }

    /* Mobile Bottom Navigation */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: var(--color-dark-900);
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        z-index: var(--z-fab);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .mobile-bottom-nav__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        text-decoration: none;
        color: rgba(0, 0, 0, 0.6);
        font-size: var(--text-xs);
        font-weight: var(--font-medium);
        transition: color var(--duration-fast);
        position: relative;
    }

    .mobile-bottom-nav__item:hover,
    .mobile-bottom-nav__item.active {
        color: var(--color-teal-400);
    }

    .mobile-bottom-nav__item svg {
        width: 22px;
        height: 22px;
    }

    .mobile-bottom-nav__badge {
        position: absolute;
        top: 6px;
        right: calc(50% - 18px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: var(--accent-primary);
        color: var(--color-black);
        font-size: var(--text-xs);
        font-weight: var(--font-semibold);
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Add bottom padding to main content for mobile nav */
    .main-area {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0));
    }

    /* Mobile Settings Button in Profile Banner */
    .banner-settings {
        display: block;
        position: absolute;
        bottom: var(--space-3);
        left: var(--space-3);
        z-index: 10;
    }

    .banner-settings__btn {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.7);
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: var(--radius-full);
        color: white;
        cursor: pointer;
        transition: all var(--duration-normal);
        opacity: 0.8;
    }

    .banner-settings__btn:hover,
    .banner-settings__btn.active {
        opacity: 1;
        background: rgba(0, 0, 0, 0.7);
        border-color: var(--accent-primary);
        transform: scale(1.05);
    }

    .banner-settings__btn svg {
        width: 18px;
        height: 18px;
    }

    /* Dropdown opens UPWARD */
    .banner-settings__dropdown {
        position: absolute;
        bottom: calc(100% + var(--space-2));
        left: 0;
        min-width: 180px;
        background: var(--surface-secondary);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xl);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: all var(--duration-fast) var(--ease-default);
        z-index: 100;
        overflow: hidden;
    }

    .banner-settings__dropdown.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .banner-settings__dropdown a,
    .banner-settings__dropdown button {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        width: 100%;
        padding: var(--space-3) var(--space-4);
        background: transparent;
        border: none;
        color: var(--text-primary);
        font-size: var(--text-sm);
        font-family: inherit;
        text-decoration: none;
        text-align: left;
        cursor: pointer;
        transition: background var(--duration-fast);
    }

    .banner-settings__dropdown a:hover,
    .banner-settings__dropdown button:hover {
        background: var(--surface-tertiary);
    }

    .banner-settings__dropdown svg {
        width: 16px;
        height: 16px;
        color: var(--text-muted);
    }

    /* Hide original change banner button on mobile (now in gear menu) */
    .banner-change-btn {
        display: none !important;
    }
}

/* ============================================================================
   BANNER SETTINGS - Desktop Hidden
   ============================================================================ */
.banner-settings {
    display: none;
}


/* ============================================================================
   MOBILE NAVIGATION COMPONENTS
   Hidden by default (desktop), shown via mobile breakpoint
   ============================================================================ */

/* Mobile overlay */
.mobile-overlay {
    display: none;
}

@media (max-width: 767px) {
    .mobile-overlay {
        display: block !important;
        position: fixed;
        top: var(--layout-mobile-topbar-height, 56px);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 499;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .mobile-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Desktop: hide mobile-only nav elements (hamburger menu shared across both) */
@media (min-width: 768px) {
    .mobile-overlay {
        display: none !important;
    }

    /* Desktop: Evolution Toolkit is a phone-sized dropdown, not full-screen */
    .mobile-hamburger-menu {
        display: block !important;
        position: fixed;
        top: calc(var(--layout-topbar-height) + 4px);
        right: var(--space-4);
        left: auto;
        bottom: auto;
        width: 450px;
        max-height: calc(100vh - var(--layout-topbar-height) - 24px);
        background: var(--color-gray-900);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xl);
        z-index: var(--z-overlay); /* Above topbar (200) but below modal (400) */
        transform: translateY(-10px);
        opacity: 0;
        transition: transform 0.2s ease, opacity 0.2s ease;
        pointer-events: none;
        overflow-y: auto;
    }

    .mobile-hamburger-menu.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
}

/* ============================================================================
   HOUSE DROPDOWN PANEL
   ============================================================================ */
/* Mobile: full-screen dropdown (nav-item list) */
.mobile-house-dropdown {
    display: none;
    position: fixed;
    top: var(--layout-topbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--surface-primary);
    z-index: var(--z-panel);
    overflow-y: auto;
    padding: var(--space-3) var(--space-4) var(--space-4);
    transform: translateY(-10px);
    opacity: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
    pointer-events: none;
    -webkit-overflow-scrolling: touch;
}

.mobile-house-dropdown.open {
    display: block;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.mnav-book-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 46px;
    margin: 0 0 var(--space-3);
    padding: 0 var(--space-5);
    border-radius: var(--radius-full);
    background: var(--accent-primary, var(--color-green-500));
    color: var(--color-black);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: 0;
    text-transform: uppercase;
    box-shadow: var(--shadow-md);
}

.mnav-book-pill__logo {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.mnav-quiz-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 46px;
    margin: 0 0 var(--space-3);
    padding: 0 var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    color: var(--text-primary);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.mnav-quiz-cta:hover,
.mnav-quiz-cta:focus-visible {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
    outline: none;
}

.mnav-quiz-cta__label {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
}

.mnav-quiz-cta__text {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-align: right;
}

.mnav-cluster-heading {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    padding: 0 var(--space-3);
    min-height: 28px;
    width: 100%;
    color: var(--text-muted);
}

.mnav-cluster-heading__label {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mnav-cluster-heading__help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    color: var(--text-muted);
    cursor: pointer;
}

.mnav-cluster-heading__help:hover,
.mnav-cluster-heading__help:focus-visible,
.mnav-cluster-heading__help.is-open {
    color: var(--text-primary);
    border-color: var(--accent-primary);
    outline: none;
}

.mnav-cluster-heading__tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: var(--space-3);
    z-index: 2;
    width: min(320px, calc(100vw - 32px));
    max-width: calc(100% - var(--space-6));
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.mnav-cluster-heading:hover .mnav-cluster-heading__tooltip,
.mnav-cluster-heading:focus-within .mnav-cluster-heading__tooltip,
.mnav-cluster-heading__tooltip.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Desktop: hide mobile dropdown + chevron — pill stays visible, not clickable */
@media (min-width: 768px) {
    .mobile-house-dropdown {
        display: none !important;
    }
    #house-switch-btn .top-bar__chevron {
        display: none;
    }
    #house-switch-btn {
        pointer-events: none;
    }
    #house-switch-btn .top-bar__house-name {
        max-width: none;
    }
}

@media (max-width: 767px) {
    .mobile-house-dropdown {
        top: var(--layout-mobile-topbar-height);
    }
}

/* Mobile dropdown — nav-item overrides */
.mnav-identicon {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.mnav-house-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.mnav-section {
    margin-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-2);
}

/* Mobile hamburger menu panel - only visible on mobile */
@media (max-width: 767px) {
    .mobile-hamburger-menu {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--surface-primary);
        z-index: var(--z-fullscreen);
        transform: translateY(-100%);
        opacity: 0;
        transition: transform 0.25s ease, opacity 0.25s ease;
        pointer-events: none;
        overflow-y: auto;
    }

    .mobile-hamburger-menu.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
}

.mobile-hamburger-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    font-family: inherit;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.mobile-hamburger-menu__item:hover {
    background: var(--interactive-hover);
    color: var(--text-primary);
}

.mobile-hamburger-menu__item i,
.mobile-hamburger-menu__item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.mobile-hamburger-menu__identicon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.mobile-hamburger-menu__timer {
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    font-variant-numeric: tabular-nums;
    color: var(--color-orange-400);
    flex-shrink: 0;
}

.mobile-hamburger-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background-color: var(--color-orange-500);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.mobile-hamburger-menu__header-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mobile-hamburger-menu__close {
    background: none;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.mobile-hamburger-menu__close i,
.mobile-hamburger-menu__close svg {
    width: 24px;
    height: 24px;
}

.mobile-hamburger-menu__badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--accent-primary);
    color: var(--color-black);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Split row: Annotate button + Request Evolution */
.mobile-hamburger-menu__item--split {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
}

.evolve-annotate-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: var(--color-orange-500);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    margin-left: auto;
}

.evolve-annotate-btn:hover {
    background: var(--color-orange-600);
}

.evolve-request-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
    border-radius: var(--radius-md);
}

.evolve-request-btn:hover {
    background: var(--interactive-hover);
    color: var(--text-primary);
}

/* ============================================================================
   EVOLUTION FLOW — Full-screen request panel
   ============================================================================ */
.evolution-flow {
    position: fixed;
    inset: 0;
    z-index: var(--z-critical);
    background: var(--surface-app);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(.4, .0, .2, 1),
                opacity 0.2s ease;
    pointer-events: none;
}

.evolution-flow.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.evolution-flow__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: linear-gradient(160deg, var(--color-orange-500) 0%, var(--color-orange-600) 100%);
    color: #fff;
}

.evolution-flow__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.15);
    border: none;
    border-radius: var(--radius-full);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

.evolution-flow__back:hover {
    background: rgba(0, 0, 0, 0.25);
}

.evolution-flow__title {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    letter-spacing: 0.03em;
}

.evolution-flow__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-8) var(--space-4);
    gap: var(--space-6);
}

.evolution-flow__prompt {
    text-align: center;
    max-width: 400px;
}

.evolution-flow__prompt-icon {
    color: var(--color-orange-400);
    margin-bottom: var(--space-4);
}

.evolution-flow__prompt-heading {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-3) 0;
}

.evolution-flow__prompt-sub {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.evolution-flow__input {
    width: 100%;
    max-width: 500px;
    padding: var(--space-4);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.15s;
}

.evolution-flow__input:focus {
    outline: none;
    border-color: var(--color-orange-500);
}

.evolution-flow__submit {
    padding: var(--space-3) var(--space-8);
    background: var(--color-orange-500);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.evolution-flow__submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.evolution-flow__submit:not(:disabled):hover {
    background: var(--color-orange-600);
}

/* Mobile overlay - only visible on mobile */
@media (max-width: 767px) {
    .mobile-overlay {
        display: block !important;
        position: fixed;
        top: var(--layout-mobile-topbar-height, 56px);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 499;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .mobile-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Evolution Toolkit — grow-from-orb animation overrides */
@media (min-width: 768px) {
    .mobile-hamburger-menu {
        transform-origin: top right;
        opacity: 0;
        transform: scale(0.3);
        /* Close: scale shrinks first, opacity fades at the end */
        transition: transform 0.35s cubic-bezier(.4, .0, .2, 1),
                    opacity 0.15s ease 0.2s;
    }
    .mobile-hamburger-menu.open {
        opacity: 1;
        transform: scale(1);
        /* Open: opacity appears immediately, scale grows */
        transition: transform 0.4s cubic-bezier(.4, .0, .2, 1),
                    opacity 0.15s ease;
    }
    .mobile-overlay {
        display: block !important;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 250; /* Below menu (300) so clicks reach menu buttons */
        pointer-events: none;
        opacity: 0;
    }
    .mobile-overlay.active {
        pointer-events: auto;
        opacity: 1;
    }
}

@media (max-width: 767px) {
    .mobile-hamburger-menu {
        transform: none;
        clip-path: circle(0% at calc(100% - 32px) 30px);
        opacity: 0;
        /* Close: bubble shrinks first, opacity fades at the very end */
        transition: clip-path 0.45s cubic-bezier(.4, .0, .2, 1),
                    opacity 0.1s ease 0.35s;
    }
    .mobile-hamburger-menu.open {
        transform: none;
        clip-path: circle(150% at calc(100% - 32px) 30px);
        opacity: 1;
        /* Open: opacity appears immediately, bubble expands */
        transition: clip-path 0.5s cubic-bezier(.4, .0, .2, 1),
                    opacity 0.15s ease;
    }
}

/* ============================================================================
   EVOLVE CARD — Redesigned Feb 2026
   Orange header (title + tools) → middle content → orange footer
   ============================================================================ */
.evolve-card {
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1.5px solid rgba(234, 88, 12, 0.4);
    border-radius: var(--radius-xl);
    overflow: hidden;
    height: 100%;
}

/* ── Orange Header ── */
.evolve-card__header {
    background: linear-gradient(160deg, var(--color-orange-400, var(--color-orange-400)) 0%, var(--color-orange-600, var(--color-orange-600)) 100%);
    padding: var(--space-2) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
/* Pack-side header: matches landing page palette */
.evolve-card__header--pack {
    background: linear-gradient(160deg, var(--surface-secondary) 0%, var(--surface-tertiary) 100%);
    border-bottom: 1px solid rgba(13, 148, 136, 0.2);
}
.evolve-card__header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.evolve-card__header-title {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}
.evolve-card__header-icon {
    font-size: var(--text-lg);
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
.evolve-card__close {
    background: rgba(0,0,0,0.15);
    border: none;
    color: #fff;
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-md);
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.evolve-card__close:hover {
    background: rgba(0,0,0,0.25);
}
.evolve-card__close i, .evolve-card__close svg {
    width: 18px;
    height: 18px;
}

/* ── Toggle Switch (Evolve ↔ Backpack) ── */
.evolve-card__toggle {
    flex: 1;
    min-width: 0;
}
.evolve-card__toggle-track {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0,0,0,0.3);
    border-radius: var(--radius-full, 9999px);
    padding: 3px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    border: 1.5px solid rgba(0,0,0,0.15);
    height: 36px;
}
.evolve-card__toggle-label {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(0,0,0,0.45);
    transition: color 0.35s ease;
    padding: 0 4px;
    white-space: nowrap;
}
.evolve-card__toggle-label--active {
    color: #fff;
}
.evolve-card__toggle-label i, .evolve-card__toggle-label svg {
    flex-shrink: 0;
}
.evolve-card__toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    background: linear-gradient(135deg, var(--color-orange-400) 0%, var(--color-orange-600) 100%);
    border-radius: var(--radius-full, 9999px);
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s ease;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.evolve-card__toggle--pack .evolve-card__toggle-thumb {
    left: calc(50% + 0px);
    background: linear-gradient(135deg, var(--color-teal-600) 0%, var(--color-teal-700) 100%);
}
.evolve-card__toggle--pack .evolve-card__toggle-track {
    border-color: rgba(13, 148, 136, 0.35);
    background: rgba(0,0,0,0.12);
}
.evolve-card__toggle--pack .evolve-card__toggle-label--left {
    color: rgba(30,41,59,0.5);
}
.evolve-card__toggle--pack .evolve-card__toggle-label--right {
    color: #fff;
}
.evolve-card__toggle-track:active .evolve-card__toggle-thumb {
    width: calc(50% + 4px);
}

/* ── Header Tool Buttons (centered) ── */
.evolve-card__header-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}
.evolve-card__header-tools--centered {
    justify-content: center;
}
.evolve-card__tool-belt {
    display: flex;
    align-items: center;
    gap: 8px;
}
.evolve-card__tool-belt--centered {
    justify-content: center;
}
.evolve-card__tool-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255,255,255,0.35);
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    padding: 0;
    flex-shrink: 0;
}
.evolve-card__tool-btn i, .evolve-card__tool-btn svg {
    width: 16px;
    height: 16px;
}
.evolve-card__tool-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.evolve-card__tool-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.5);
    transform: scale(1.08);
}
.evolve-card__tool-btn:active {
    transform: scale(0.95);
}
.evolve-card__tool-btn--soon {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}
.evolve-card__tool-btn--empty {
    opacity: 0.25;
    border-style: dashed;
    cursor: default;
    pointer-events: none;
}
.evolve-card__tool-btn--empty i,
.evolve-card__tool-btn--empty svg {
    display: none;
}

/* ── Middle Content Area ── */
.evolve-card__value-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: var(--space-2) var(--space-3) 0;
}
.evolve-card__value-name {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.evolve-card__value-name--lg {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    letter-spacing: 1.5px;
}
.evolve-card__thought {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.35;
    margin: 0;
    padding: 0 var(--space-3);
    text-align: center;
}

/* ── Quote Carousel ── */
.evolve-card__carousel {
    position: relative;
    min-height: 52px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.evolve-card__carousel-slide {
    display: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.evolve-card__carousel-slide--active {
    display: block;
    opacity: 1;
}
.evolve-card__carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 0 0;
}
.evolve-card__carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0,0,0,0.2);
    transition: background 0.2s, transform 0.2s;
}
.evolve-card__carousel-dot--active {
    background: var(--accent-primary);
    transform: scale(1.3);
}
/* Value question prompt */
.evolve-card__question-prompt {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px 12px;
    margin: 0 var(--space-3);
    border-radius: var(--radius-lg);
    background: rgba(0,0,0,0.03);
    border: 1px solid var(--border-subtle);
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.15s, border-color 0.15s;
}
.evolve-card__question-prompt:hover {
    background: rgba(0,0,0,0.05);
    border-color: var(--border-default);
}
.evolve-card__question-prompt--done {
    cursor: default;
    border-color: rgba(16,185,129,0.15);
    background: rgba(16,185,129,0.04);
}
.evolve-card__question-prompt--done:hover {
    background: rgba(16,185,129,0.04);
    border-color: rgba(16,185,129,0.15);
}
.evolve-card__prompt-top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.evolve-card__prompt-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.evolve-card__question-text {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: 1.35;
    color: var(--text-primary);
}
.evolve-card__post-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: var(--radius-md);
    background: var(--accent-primary);
    color: var(--color-black);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    white-space: nowrap;
    flex-shrink: 0;
}
.evolve-card__post-btn i, .evolve-card__post-btn svg {
    width: 13px;
    height: 13px;
}
.evolve-card__section-label--muted {
    color: rgba(0,0,0,0.35);
}

/* Section blocks */
.evolve-card__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: 0 var(--space-3);
}
.evolve-card__section-label {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 2px;
}

/* ── App Card (TRY section) ── */
.evolve-card__app-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 0;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--radius-lg);
    background: rgba(0,0,0,0.04);
    transition: background 0.15s, border-color 0.15s;
}
.evolve-card__app-card + .evolve-card__app-card {
    margin-top: 4px;
}
.evolve-card__app-card:hover {
    background: rgba(0,0,0,0.07);
    border-color: rgba(0,0,0,0.16);
}
.evolve-card__app-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--surface-tertiary);
    flex-shrink: 0;
}
.evolve-card__app-icon i, .evolve-card__app-icon svg {
    width: 18px;
    height: 18px;
    color: var(--accent-primary);
}
.evolve-card__app-icon--img {
    overflow: hidden;
    padding: 0;
}
.evolve-card__app-icon--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.evolve-card__app-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.evolve-card__app-name {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.evolve-card__app-type {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.evolve-card__app-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid rgba(13,148,136,0.3);
    border-radius: var(--radius-md);
    background: rgba(13,148,136,0.08);
    color: var(--accent-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    font-family: var(--font-sans);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.evolve-card__app-btn i, .evolve-card__app-btn svg {
    width: 12px;
    height: 12px;
}
.evolve-card__app-btn:hover {
    background: rgba(0,243,255,0.15);
    border-color: rgba(0,243,255,0.5);
}
.evolve-card__app-btn:active {
    transform: scale(0.96);
}

/* ── XP to Next Privilege ── */
.evolve-card__privilege {
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-3);
    margin: 0 var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.evolve-card__privilege-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.evolve-card__privilege-pts {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.evolve-card__privilege-bar {
    height: 6px;
    background: rgba(0,0,0,0.08);
    border-radius: var(--radius-xs);
    overflow: hidden;
}
.evolve-card__privilege-fill {
    height: 100%;
    border-radius: var(--radius-xs);
    background: linear-gradient(90deg, var(--color-orange-400, var(--color-orange-400)), var(--color-orange-500, var(--color-orange-500)));
    transition: width 0.6s cubic-bezier(.4,0,.2,1);
    min-width: 2px;
}
.evolve-card__privilege-remaining {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ── Verification Status ── */
.evolve-card__verification {
    padding: 0 var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.evolve-card__verify-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.evolve-card__verify-icon {
    font-size: var(--text-lg);
    line-height: 1;
    flex-shrink: 0;
}
.evolve-card__verify-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.evolve-card__verify-title {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}
.evolve-card__verify-title--warn {
    color: var(--color-yellow-500);
}
.evolve-card__verify-title--expired {
    color: var(--status-error);
}
.evolve-card__verify-title--locked {
    color: var(--text-secondary);
}
.evolve-card__verify-detail {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
/* ── Hourglass Icon (inline Lucide) ── */
.evolve-card__hg-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-left: 4px;
}
.evolve-card__hg--full {
    color: var(--color-green-500);
}
.evolve-card__hg--three-quarter {
    color: var(--color-green-400);
}
.evolve-card__hg--half {
    color: var(--color-yellow-500);
}
.evolve-card__hg--quarter {
    color: var(--color-orange-500);
}
.evolve-card__hg--red {
    color: var(--status-error);
    animation: hg-flash 1s ease-in-out infinite;
}
@keyframes hg-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ── Verification Action Buttons ── */
.evolve-card__verify-actions {
    display: flex;
    gap: 6px;
    margin-top: var(--space-2);
}
.evolve-card__verify-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border: 1px solid rgba(16,185,129,0.3);
    border-radius: var(--radius-md);
    background: rgba(16,185,129,0.08);
    color: var(--color-green-500);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    font-family: var(--font-sans);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.evolve-card__verify-btn:hover {
    background: rgba(16,185,129,0.15);
    border-color: rgba(16,185,129,0.5);
}
.evolve-card__verify-btn--alt {
    border-color: rgba(0,0,0,0.12);
    background: rgba(0,0,0,0.04);
    color: var(--text-secondary);
}
.evolve-card__verify-btn--alt:hover {
    background: rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.2);
}
.evolve-card__verify-btn--warn {
    border-color: rgba(245,158,11,0.3);
    background: rgba(245,158,11,0.08);
    color: var(--color-yellow-500);
}
.evolve-card__verify-btn--warn:hover {
    background: rgba(245,158,11,0.15);
    border-color: rgba(245,158,11,0.5);
}

.evolve-card__verify-btn--pulse {
    animation: verifyPulse 2s ease-in-out infinite;
    border-color: rgba(13, 148, 136, 0.4);
    background: rgba(13, 148, 136, 0.08);
    color: var(--accent-primary);
}
.evolve-card__verify-btn--pulse:hover {
    background: rgba(13, 148, 136, 0.15);
    border-color: rgba(13, 148, 136, 0.6);
}
@keyframes verifyPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(13, 148, 136, 0); }
}

/* Unverified section glow inside evolve card — single clickable card */
.evolve-card__verify-row--unverified {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-lg);
    padding: 10px 12px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.evolve-card__verify-row--unverified:hover {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.45);
}
.evolve-card__verify-inline-btn {
    margin-left: auto;
    padding: 5px 12px;
    border-radius: var(--radius-md);
    background: rgba(13, 148, 136, 0.12);
    border: 1px solid rgba(13, 148, 136, 0.35);
    color: var(--accent-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    white-space: nowrap;
    flex-shrink: 0;
    animation: verifyPulse 2s ease-in-out infinite;
}

.evolve-card__pulse-icon {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}
.evolve-card__pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-teal-500, var(--color-teal-600));
    flex-shrink: 0;
    margin: 0 6px;
}
.evolve-card__pulse-name {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.evolve-card__pulse-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: #fff;
    background: var(--accent-primary);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.evolve-card__pulse-more {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-decoration: none;
    padding: 2px var(--space-2);
}
.evolve-card__pulse-more:hover {
    color: var(--accent-primary);
}

/* Request Evolution + Annotate row */
.evolve-card__actions-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: linear-gradient(160deg, var(--color-orange-400, var(--color-orange-400)) 0%, var(--color-orange-600, var(--color-orange-600)) 100%);
}
.evolve-card__action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 10px;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: var(--radius-md);
    background: rgba(0,0,0,0.1);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.15s;
}
.evolve-card__action-btn:hover {
    background: rgba(0,0,0,0.2);
}
.evolve-card__action-btn i, .evolve-card__action-btn svg {
    width: 14px;
    height: 14px;
}
.evolve-card__action-btn--secondary {
    background: rgba(0,0,0,0.2);
    border-color: rgba(0,0,0,0.15);
    font-weight: var(--font-medium);
}
.evolve-card__action-btn--secondary:hover {
    background: rgba(0,0,0,0.3);
}

/* Footer buttons — orange bar, horizontal layout */
.evolve-card__footer {
    display: flex;
    align-items: center;
    gap: 0;
    background: linear-gradient(160deg, var(--color-orange-500, var(--color-orange-500)) 0%, var(--color-orange-600, var(--color-orange-600)) 100%);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    overflow: hidden;
}
.evolve-card__footer-btn {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px var(--space-2);
    text-decoration: none;
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    transition: background 0.15s;
}
.evolve-card__footer-btn:hover {
    background: rgba(0,0,0,0.15);
}
.evolve-card__footer-btn i, .evolve-card__footer-btn svg {
    width: 16px;
    height: 16px;
}
.evolve-card__footer-identicon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

/* ── Card body spacing (gap between middle sections) ── */
.evolve-card__value-section,
.evolve-card__carousel,
.evolve-card__question-prompt,
.evolve-card__section,
.evolve-card__privilege,
.evolve-card__verification {
    margin-top: var(--space-2);
}
.evolve-card__verification {
    margin-bottom: var(--space-2);
}

/* ── Evolve ↔ Pack Toggle: Body containers ── */
.evolve-card__body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.evolve-card__body--pack {
    padding: 0;
    background: var(--surface-app);
}

/* ── Pack Face Styles (matches app.boho.team landing palette) ── */
.evolve-card--pack-face {
    border-color: rgba(13, 148, 136, 0.35);
    box-shadow: 0 0 30px rgba(13, 148, 136, 0.1), inset 0 0 20px rgba(13, 148, 136, 0.03);
    background: var(--surface-app);
}
.evolve-card__close--pack {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}
.evolve-card__close--pack:hover {
    background: rgba(0, 0, 0, 0.15);
}
.evolve-card__tool-btn--pack {
    border-color: rgba(13, 148, 136, 0.3) !important;
    background: var(--accent-primary-subtle) !important;
    color: var(--accent-primary) !important;
}
.evolve-card__tool-btn--pack:hover {
    background: rgba(13, 148, 136, 0.15) !important;
    border-color: var(--accent-primary) !important;
}
.evolve-card__footer--pack {
    background: var(--surface-secondary);
    border-top: 1px solid rgba(13, 148, 136, 0.2);
}
.evolve-card__footer--pack .evolve-card__footer-btn {
    color: var(--accent-primary);
}
.evolve-card__footer--pack .evolve-card__footer-btn:hover {
    background: rgba(13, 148, 136, 0.1);
}

/* ── Evolve / Pack Face Switching (stacked, no 3D flip) ── */
.evolve-card__flip-viewport {
    flex: 1;
    min-height: 0;
    position: relative;
}
.evolve-card__flip-card {
    position: relative;
    width: 100%;
    height: 100%;
}
/* Front face: visible by default, in-flow to set height */
.evolve-card__flip-face--front {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Back face: stacked behind, invisible by default */
.evolve-card__flip-face--back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    visibility: hidden;
    pointer-events: none;
    z-index: 0;
}
/* When switched to pack, hide front and reveal back */
.evolve-card__flip-card--flipped .evolve-card__flip-face--front {
    visibility: hidden;
    pointer-events: none;
}
.evolve-card__flip-card--flipped .evolve-card__flip-face--back {
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

/* (Pack-mode styles now live on .evolve-card--pack-face, .evolve-card__header--pack, etc.) */

/* ── Pack Loading State ── */
.evolve-card__pack-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--space-6) var(--space-3);
    color: var(--text-secondary);
    font-size: var(--text-xs);
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Pack content overrides for narrow panel ── */
.evolve-card__body--pack .pack-page {
    padding: 0;
}
.evolve-card__body--pack .pack-header-row,
.evolve-card__body--pack .utility-bar {
    display: none;
}
.evolve-card__body--pack .pack-tabs {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--surface-app);
    padding: var(--space-2) var(--space-2) 0;
    gap: 4px;
    border-bottom: 1px solid var(--border-subtle);
}
.evolve-card__body--pack .pack-tab {
    font-size: var(--text-xs);
    padding: 5px 10px;
    color: var(--text-secondary);
    background: var(--surface-secondary);
    border-color: var(--border-strong);
}
.evolve-card__body--pack .pack-tab:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}
.evolve-card__body--pack .pack-tab--active {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    background: var(--accent-primary-subtle);
}
.evolve-card__body--pack .pack-grid {
    gap: var(--space-3);
    padding: var(--space-2);
}
.evolve-card__body--pack .pack-all-section-title {
    padding: var(--space-2) var(--space-2) 0;
    font-size: var(--text-xs);
    color: var(--text-primary);
}
.evolve-card__body--pack .nf-row__scroll {
    padding: 10px var(--space-2);
    gap: var(--space-2);
}
.evolve-card__body--pack .nf-card--quest {
    min-width: 200px;
    border-color: var(--border-strong);
    background: var(--surface-primary);
    box-shadow: var(--shadow-sm);
}
.evolve-card__body--pack .nf-card__quest-foot {
    background: var(--surface-primary);
    color: var(--text-primary);
    border-top: 1px solid var(--border-default);
}
.evolve-card__body--pack .nf-card__quest-stats {
    color: var(--text-secondary);
}
.evolve-card__body--pack .nf-card__quest-reward {
    color: var(--accent-primary);
}
.evolve-card__body--pack .pack-card__footer-btn--equip {
    color: var(--text-secondary);
    border-color: var(--border-strong);
}
.evolve-card__body--pack .pack-card__footer-btn--equip:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}
.evolve-card__body--pack .pack-card__footer-btn--equipped {
    background: var(--accent-primary-subtle);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.evolve-card__body--pack .pack-section__empty {
    padding: var(--space-4) var(--space-3);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* ═══════════════════════════════════════════════════════════════════
   OVERLAY LAYER BASE CLASSES
   Shared base for content/utility/detail overlay layers.
   z-index hierarchy: content(9350) < utility(9400) < detail(9450)
   ═══════════════════════════════════════════════════════════════════ */

.content-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-content-overlay, 9350);
    background: var(--surface-app);
}

.content-overlay-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-content-overlay-backdrop, 9349);
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.content-overlay-backdrop--visible {
    opacity: 1;
    visibility: visible;
}

.detail-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-detail-overlay, 9450);
    background: var(--surface-app);
    display: none;
}

.detail-overlay.active {
    display: block;
}

.detail-overlay-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-detail-overlay-backdrop, 9449);
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.detail-overlay-backdrop--visible {
    opacity: 1;
    visibility: visible;
}

/* ═══════════════════════════════════════════════════════════════════
   FULLSCREEN SLIDE-IN PANELS
   Unified slide-from-right panels for Shop, Messages, Backpack
   z-index 9400: below Evolve orb (9500), above most panels
   ═══════════════════════════════════════════════════════════════════ */

/* ── Backdrop ── */
body.fullscreen-panel-body-lock {
    overflow: hidden;
}

.fullscreen-panel-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-utility-overlay-backdrop, 9399);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.fullscreen-panel-backdrop--visible {
    opacity: 1;
    visibility: visible;
}

.fullscreen-panel-backdrop--no-transition {
    transition: none;
}

/* ── Panel container ── */
.fullscreen-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 480px;
    z-index: var(--z-utility-overlay, 9400);
    background: var(--surface-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: none;
}

.fullscreen-panel--open {
    transform: translateX(0);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
}

.fullscreen-panel--swiping {
    transition: none;
}

.fullscreen-panel--no-transition {
    transition: none;
}

.fullscreen-panel--swipe-0 { transform: translateX(0); }
.fullscreen-panel--swipe-5 { transform: translateX(5%); }
.fullscreen-panel--swipe-10 { transform: translateX(10%); }
.fullscreen-panel--swipe-15 { transform: translateX(15%); }
.fullscreen-panel--swipe-20 { transform: translateX(20%); }
.fullscreen-panel--swipe-25 { transform: translateX(25%); }
.fullscreen-panel--swipe-30 { transform: translateX(30%); }
.fullscreen-panel--swipe-35 { transform: translateX(35%); }
.fullscreen-panel--swipe-40 { transform: translateX(40%); }
.fullscreen-panel--swipe-45 { transform: translateX(45%); }
.fullscreen-panel--swipe-50 { transform: translateX(50%); }
.fullscreen-panel--swipe-55 { transform: translateX(55%); }
.fullscreen-panel--swipe-60 { transform: translateX(60%); }
.fullscreen-panel--swipe-65 { transform: translateX(65%); }
.fullscreen-panel--swipe-70 { transform: translateX(70%); }
.fullscreen-panel--swipe-75 { transform: translateX(75%); }
.fullscreen-panel--swipe-80 { transform: translateX(80%); }
.fullscreen-panel--swipe-85 { transform: translateX(85%); }
.fullscreen-panel--swipe-90 { transform: translateX(90%); }
.fullscreen-panel--swipe-95 { transform: translateX(95%); }
.fullscreen-panel--swipe-100,
.fullscreen-panel--swipe-close {
    transform: translateX(100%);
}

/* ── Unified utility panel body — flex so zones fill it ── */
#panel-utility .fullscreen-panel__body {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* zones handle their own scrolling */
}

/* ── Utility zones — only active zone visible, fill panel body ── */
.utility-zone { display: none; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.utility-zone--active { display: flex; flex-direction: column; }

/* ── Topbar icon active states ── */
.top-bar__btn--active {
    background: var(--color-black);
    color: var(--color-white);
}

/* ── Desktop: Utility panels fill the main content area ── */
@media (min-width: 768px) {
    #panel-discussion.fullscreen-panel,
    #panel-utility.fullscreen-panel {
        top: 0;
        left: calc(var(--layout-rail-width, 88px) + var(--layout-sidebar-width, 280px));
        right: 0;
        width: auto;
        max-width: none;
    }
}

/* ── Mobile: full width ── */
@media (max-width: 767px) {
    .fullscreen-panel {
        max-width: 100%;
        box-shadow: none;
    }
}

/* ── Panel header ── */
.fullscreen-panel__header {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    min-height: 52px;
}

/* ── Tabbed header: back + inline tabs + actions in one row ── */
.fullscreen-panel__header--tabbed {
    gap: 0;
    padding: 0 var(--space-4, 16px);
}

.fullscreen-panel__header--tabbed .fullscreen-panel__back {
    margin-right: var(--space-2, 8px);
}

.fullscreen-panel__header--tabbed .fullscreen-panel__tabs {
    flex: 1;
    min-width: 0;
    border-bottom: none;
    padding: 0;
    align-self: stretch;
}

.fullscreen-panel__header--tabbed .fullscreen-panel__tab {
    display: flex;
    align-items: center;
}

.fullscreen-panel__header--tabbed .fullscreen-panel__header-actions {
    margin-left: auto;
    padding-left: var(--space-2, 8px);
}

.fullscreen-panel__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary, var(--text-muted));
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    padding: 0;
}

.fullscreen-panel__back:hover {
    background: var(--interactive-hover, rgba(255, 255, 255, 0.06));
    color: var(--text-primary, #fff);
}

.fullscreen-panel__back svg {
    width: 20px;
    height: 20px;
}

.fullscreen-panel__title {
    font-size: var(--text-lg, 18px);
    font-weight: var(--font-semibold, 600);
    color: var(--text-primary, #fff);
    flex: 1;
    min-width: 0;
}

.fullscreen-panel__header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-shrink: 0;
}

.fullscreen-panel__header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md, 8px);
    border: none;
    background: transparent;
    color: var(--text-muted, var(--filter-pill-text));
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.fullscreen-panel__header-btn:hover {
    color: var(--text-primary, #fff);
    background: var(--interactive-hover, rgba(255, 255, 255, 0.06));
}

/* ── Panel tabs ── */
.fullscreen-panel__tabs {
    display: flex;
    padding: 0 var(--space-4, 16px);
    gap: 0;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
}

.fullscreen-panel__tabs::-webkit-scrollbar {
    display: none;
}

.fullscreen-panel__tab {
    position: relative;
    padding: 10px 14px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted, var(--filter-pill-text));
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.fullscreen-panel__tab:hover {
    color: var(--text-secondary, var(--text-muted));
}

.fullscreen-panel__tab--active {
    color: var(--text-primary, #fff);
}

.fullscreen-panel__tab--active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 14px;
    right: 14px;
    height: 2px;
    background: var(--accent-primary, var(--color-cyan-500));
    border-radius: 2px 2px 0 0;
}

/* ── Panel body ── */
.fullscreen-panel__body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Prevent scrollbar toggle jitter on Chrome — always reserve gutter space */
    scrollbar-gutter: stable;
}

/* When ANY panel body contains a DM conversation, use flex column layout
   so the conversation can fill available space and pin input at bottom */
.fullscreen-panel__body:has(.dm-panel-conversation) {
    display: flex;
    flex-direction: column;
}

.fullscreen-panel__loading,
.fullscreen-panel__load-error {
    min-height: calc(var(--size-32) * 2);
    padding: var(--space-12) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.fullscreen-panel__loading {
    flex-direction: column;
    gap: var(--space-3);
    color: var(--text-muted);
}

.fullscreen-panel__loading-ring {
    position: relative;
    width: calc(var(--size-16) + var(--space-3));
    height: calc(var(--size-16) + var(--space-3));
    display: grid;
    place-items: center;
}

.fullscreen-panel__loading-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border: var(--space-1) solid color-mix(in srgb, var(--text-primary) 12%, transparent);
    border-top-color: var(--accent-primary);
    border-radius: var(--radius-full);
    animation: fullscreen-panel-spin var(--duration-slow) linear infinite;
}

.fullscreen-panel__loading-glyph {
    width: var(--size-10);
    height: var(--size-10);
    border-radius: var(--radius-lg);
}

.fullscreen-panel__loading-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0;
    text-transform: uppercase;
}

.fullscreen-panel__load-error {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--status-error, var(--color-red-400));
}

.fullscreen-panel__load-error-text {
    font-size: var(--text-sm);
}

.fullscreen-panel__load-error-retry {
    border: 0;
    background: transparent;
    color: var(--accent-primary);
    font: inherit;
    font-weight: var(--font-semibold);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: var(--space-1);
}

.fullscreen-panel__load-error-retry:hover {
    color: var(--accent-primary-hover, var(--accent-primary));
}

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

/* ═══════════════════════════════════════════════════════════════════
   MESSAGES PANEL — LIGHT THEME (Utility Family)
   White body, dark utility bar (inherited from .utility-bar).
   Always flex-column so utility bar + tabs stay pinned and either
   inbox-content OR dm-panel-conversation fills remaining space.
   ═══════════════════════════════════════════════════════════════════ */
#zone-messages {
    background: var(--surface-primary);
    overflow: hidden; /* children handle their own scrolling */
}

/* Utility bar and tabs must never shrink or disappear in flex layout */
#zone-messages .utility-bar {
    flex-shrink: 0;
    background: var(--color-gray-900, #111);
    color: #fff;
}
#zone-messages .utility-bar__close { color: #fff; }
#zone-messages .utility-bar__action-btn {
    background: none; border: none; color: #fff; cursor: pointer; padding: 4px;
    display: flex; align-items: center; justify-content: center;
}
#zone-messages .pack-tabs {
    flex-shrink: 0;
}

/* Inbox content fills remaining space and scrolls independently */
#zone-messages #inbox-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0; /* allow flex shrinking for scroll */
}

/* Inbox items — light theme */
#zone-messages .inbox-message-item {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

#zone-messages .inbox-message-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

#zone-messages .inbox-message-item.unread {
    background: rgba(26, 143, 128, 0.06);
}

#zone-messages .inbox-message-item__name {
    color: var(--text-primary);
}

#zone-messages .inbox-message-item.unread .inbox-message-item__name {
    color: var(--text-primary);
}

#zone-messages .inbox-message-item__preview {
    color: var(--text-muted);
}

#zone-messages .inbox-message-item__time {
    color: var(--text-muted);
}

/* Role badges — light variants */
#zone-messages .inbox-message-item__role--founder {
    background: rgba(168, 85, 247, 0.1);
    color: var(--color-purple-700);
}

#zone-messages .inbox-message-item__role--steward {
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-blue-600);
}

#zone-messages .inbox-message-item__role--guide {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-green-600);
}

#zone-messages .inbox-message-item__role--active {
    background: rgba(20, 184, 166, 0.1);
    color: var(--accent-primary);
}

#zone-messages .inbox-message-item__role--pledge {
    background: rgba(113, 113, 122, 0.1);
    color: var(--color-gray-500);
}

/* Empty state */
#zone-messages .inbox-empty {
    color: var(--text-muted);
}

#zone-messages .inbox-empty__title {
    color: var(--text-primary);
}

/* Tabs — DS-approved pill styles (pack.css not loaded on every page) */
.fullscreen-panel .pack-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.fullscreen-panel .pack-tabs::-webkit-scrollbar { display: none; }
.fullscreen-panel .pack-tab {
    padding: 8px 18px;
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.fullscreen-panel .pack-tab:hover {
    background: var(--interactive-hover);
}
.fullscreen-panel .pack-tab--active,
.fullscreen-panel .pack-tab.pack-tab--active {
    background: var(--accent-primary);
    color: var(--color-black);
    border-color: var(--accent-primary);
}

/* DM panel conversation — light theme */
#zone-messages .dm-panel-conversation {
    background: var(--surface-primary);
}

#zone-messages .dm-panel-conversation__messages .dm-message__body {
    background: var(--surface-secondary);
    color: var(--text-primary);
}

#zone-messages .dm-panel-conversation__messages .dm-message--own .dm-message__body {
    background: var(--accent-primary);
    color: var(--color-black);
}

#zone-messages .dm-panel-conversation__input {
    background: var(--surface-primary);
    border-top-color: var(--border-subtle);
}

#zone-messages .dm-panel-conversation__input textarea {
    background: var(--surface-secondary);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

/* Inbox got-it button — light theme */
#zone-messages .inbox-empty__btn {
    background: var(--accent-primary);
    color: var(--color-black);
}

/* DM markdown rendering (panel + standalone) */
.dm-message__body {
    counter-reset: dm-markdown-ordered-list;
}

.dm-message__body .dm-md-heading {
    font-weight: var(--font-semibold, 600);
    font-size: var(--text-sm, 14px);
    margin: var(--space-3, 12px) 0 var(--space-1, 4px);
    line-height: var(--leading-snug, 1.3);
}
.dm-message__body .dm-md-heading:first-child { margin-top: 0; }
.dm-message__body .dm-md-break { height: var(--space-2, 8px); }
.dm-message__body .dm-md-list {
    margin: var(--space-1, 4px) 0;
    padding-left: 1.4em;
    list-style: disc;
}
.dm-message__body .dm-md-list--numbered {
    list-style: none;
    padding-left: var(--space-6);
}
.dm-message__body .dm-md-list--numbered > li {
    counter-increment: dm-markdown-ordered-list;
    position: relative;
}
.dm-message__body .dm-md-list--numbered > li::before {
    color: var(--text-muted);
    content: counter(dm-markdown-ordered-list) ".";
    font-variant-numeric: tabular-nums;
    left: calc(-1 * var(--space-5));
    position: absolute;
    text-align: right;
    width: var(--space-4);
}
.dm-message--own .dm-message__body .dm-md-list--numbered > li::before {
    color: var(--text-inverse);
}
.dm-message__body .dm-md-list li {
    margin: var(--space-1, 4px) 0;
    line-height: var(--leading-normal, 1.5);
}
.dm-message__body code {
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 4px;
    border-radius: var(--radius-xs);
    font-size: var(--text-sm);
}
.dm-message__body strong { font-weight: var(--font-semibold); }
.dm-message__body a {
    color: var(--accent-primary, var(--color-teal-600));
    text-decoration: underline;
}
/* Invert code/link colors for own messages (white bg text) */
.dm-message--own .dm-message__body code {
    background: rgba(255, 255, 255, 0.2);
}
.dm-message--own .dm-message__body a {
    color: #fff;
}
/* Thinking block collapse */
.dm-message__body .dm-thinking {
    margin-bottom: var(--space-2, 8px);
    opacity: 0.6;
}
.dm-message__body .dm-thinking__toggle {
    cursor: pointer;
    font-size: var(--text-xs, 12px);
    color: var(--text-muted, var(--text-muted));
}
.dm-message__body .dm-thinking__content {
    font-size: var(--text-xs, 12px);
    white-space: pre-wrap;
    padding: var(--space-2, 8px);
    margin-top: var(--space-1, 4px);
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-sm, 6px);
}


.fullscreen-panel__sub-panel {
    display: none;
    min-height: 100%;
}

.fullscreen-panel__sub-panel--active {
    display: block;
}

/* ── Coiny balance in shop header ── */
.fullscreen-panel__balance {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-sm, 14px);
    font-weight: var(--font-semibold, 600);
    color: var(--status-success);
}

.fullscreen-panel__balance-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   SHOP PANEL LIGHT THEME OVERRIDES
   Content inside #zone-shop inherits light theme from the overlay
   ═══════════════════════════════════════════════════════════════════ */

/* Shop utility bar title — Literata brand treatment (handled by .utility-bar__brand) */

/* Shop panel header */
#zone-shop .fullscreen-panel__header {
    background: var(--surface-primary);
    border-bottom-color: var(--border-subtle);
}

#zone-shop .fullscreen-panel__back {
    color: var(--text-muted);
}

#zone-shop .fullscreen-panel__back:hover {
    background: var(--interactive-hover);
    color: var(--text-primary);
}

#zone-shop .fullscreen-panel__tab {
    color: var(--text-muted);
}

#zone-shop .fullscreen-panel__tab:hover {
    color: var(--text-secondary);
}

#zone-shop .fullscreen-panel__tab--active {
    color: var(--text-primary);
}

#zone-shop .fullscreen-panel__tab--active::after {
    background: var(--text-primary);
}

/* Shop content (safe/collection) */
#zone-shop .safe {
    color: var(--text-primary);
}

#zone-shop .safe-vault {
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(250, 204, 21, 0.06) 0%, transparent 70%),
        var(--gallery-card, #141c2f);
    border-color: rgba(250, 204, 21, 0.12);
    box-shadow: var(--shadow-sm);
}

#zone-shop .safe-vault::before {
    background: linear-gradient(90deg, transparent, rgba(250, 204, 21, 0.5), transparent);
}

#zone-shop .safe-vault__label { color: rgba(250, 204, 21, 0.7); }
#zone-shop .safe-vault__amount { color: var(--gallery-text-primary); }
#zone-shop .safe-vault__currency { color: rgba(255,255,255,0.5); }
#zone-shop .safe-vault__stat-value { color: var(--gallery-text-primary); }
#zone-shop .safe-vault__stat-value--green { color: var(--color-green-500); }
#zone-shop .safe-vault__stat-value--cyan { color: var(--color-cyan-600); }
#zone-shop .safe-vault__stat-value--highlight-yellow { color: var(--color-yellow-500); }
#zone-shop .safe-vault__stat-label { color: rgba(255,255,255,0.5); }
#zone-shop .safe-vault__stat { background: var(--gallery-canvas, var(--gallery-canvas)); }
#zone-shop .safe-vault__protection { background: rgba(16,185,129,0.1); color: var(--gallery-text-primary); }
#zone-shop .safe-vault__protection svg { color: var(--color-green-500); }
#zone-shop .safe-vault__decay { background: rgba(239,68,68,0.1); color: var(--color-red-500); }

#zone-shop .safe-section__title { color: var(--text-primary); }
#zone-shop .safe-section__title i { color: var(--text-muted); }
#zone-shop .safe-section__count { background: var(--surface-secondary); color: var(--text-muted); }

#zone-shop .safe-tier { background: var(--surface-primary); border-color: var(--border-subtle); box-shadow: var(--shadow-sm); }
#zone-shop .safe-tier:hover { border-color: var(--border-strong); }
#zone-shop .safe-tier__name { color: var(--text-primary); }
#zone-shop .safe-tier__meta { color: var(--text-muted); }
#zone-shop .safe-tier__meta span { color: var(--text-secondary); }
#zone-shop .safe-tier__cost { color: var(--status-success); }
#zone-shop .safe-tier__btn { background: var(--surface-secondary); color: var(--text-secondary); border-color: var(--border-default); }
#zone-shop .safe-tier__btn:hover { background: var(--interactive-hover); color: var(--text-primary); }

#zone-shop .safe-lock { background: var(--surface-primary); border-color: var(--border-subtle); box-shadow: var(--shadow-sm); }
#zone-shop .safe-lock__tier { color: var(--text-primary); }
#zone-shop .safe-lock__detail { color: var(--text-muted); }
#zone-shop .safe-lock__amount { color: var(--status-success); }

#zone-shop .safe-how { background: var(--surface-primary); border-color: var(--border-subtle); }
#zone-shop .safe-how__step { color: var(--text-secondary); }
#zone-shop .safe-how__text { color: var(--text-secondary); }
#zone-shop .safe-how__text strong { color: var(--text-primary); }

#zone-shop .toolkit__slot--filled { border-color: var(--status-success); background: var(--status-success-subtle); color: var(--status-success); }
#zone-shop .toolkit__slot--filled:hover { background: rgba(16, 185, 129, 0.15); box-shadow: 0 0 12px rgba(16, 185, 129, 0.2); }

/* ── Coiny-safe tab compat (used inside shop panel) ── */
.coiny-safe-tab {
    position: relative;
    padding: 12px 16px;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.coiny-safe-tab:hover { color: var(--text-secondary); }
.coiny-safe-tab--active { color: var(--text-primary); }

.coiny-safe-tab--active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--zine-text-primary);
    border-radius: 2px 2px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════
   VOICE RECORDING OVERLAY (global — Evolve toolkit + Pack)
   ═══════════════════════════════════════════════════════════════════ */
.voice-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-critical);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
}

.voice-overlay[hidden] {
    display: none;
}

body.voice-overlay-open {
    overflow: hidden;
}

.voice-overlay__card {
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    width: 90%;
    max-width: 420px;
    text-align: center;
}
.voice-overlay__indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--status-error);
    margin-bottom: var(--space-4);
}
.voice-overlay__dot {
    width: 10px;
    height: 10px;
    background: var(--status-error);
    border-radius: 50%;
    animation: voice-pulse 1s infinite;
}
@keyframes voice-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.voice-overlay__transcript {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    min-height: 60px;
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
}
.voice-overlay__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}
.voice-overlay__save {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-5);
    background: var(--accent-primary);
    color: var(--color-dark-900);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    cursor: pointer;
}

.voice-overlay__action-icon {
    width: var(--space-4);
    height: var(--space-4);
}

.voice-overlay__cancel {
    padding: var(--space-2) var(--space-5);
    background: var(--surface-tertiary);
    color: var(--text-secondary);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    cursor: pointer;
}

/* ==========================================================================
   Evolution Lines (Evolve Toolkit)
   ========================================================================== */

/* ── Evolve Lines container — lighter bg like shop ── */
.evolve-card__body--evolve {
    background: var(--surface-secondary);
    padding: 12px 0 8px !important;
    gap: 10px !important;
}
.evolve-line {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.evolve-line__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}
.evolve-line__label {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    color: rgba(0,0,0,0.35);
    text-transform: uppercase;
}
.evolve-line__progress {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--text-muted);
    letter-spacing: 0.02em;
}
.evolve-line__progress--done {
    color: var(--status-success);
}
.evolve-line__card-wrap {
    overflow: visible;
    position: relative;
    min-height: 48px;
}
.evolve-line__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* ── Evo Card (tokenized — all values from --evo-* in tokens.css) ── */
.evo-card {
    background: var(--evo-card-bg);
    border: 1px solid var(--evo-card-border);
    border-radius: var(--evo-card-radius);
    overflow: hidden;
    margin: 0;
    box-shadow: var(--evo-card-shadow);
    will-change: transform, opacity;
}
.evo-card__hero {
    position: relative;
    height: var(--evo-hero-height);
    overflow: hidden;
    background: var(--evo-hero-bg);
}
/* Large centered icon when no hero image */
.evo-card__hero-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--evo-hero-icon-color);
    z-index: 1;
}
.evo-card__hero-icon svg,
.evo-card__hero-icon iconify-icon {
    width: var(--evo-hero-icon-size);
    height: var(--evo-hero-icon-size);
}
.evo-card__hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.evo-card__hero-fade {
    position: absolute;
    inset: 0;
    background: var(--evo-hero-fade);
}
.evo-card__body {
    padding: var(--evo-body-padding);
    height: var(--evo-body-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.evo-card__info {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}
.evo-card__icon {
    width: var(--evo-icon-size);
    height: var(--evo-icon-size);
    border-radius: var(--evo-icon-radius);
    background: var(--evo-icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--evo-icon-color);
}
.evo-card__icon svg,
.evo-card__icon iconify-icon {
    width: 18px;
    height: 18px;
}
.evo-card__text {
    flex: 1;
    min-width: 0;
}
.evo-card__name {
    font-size: var(--evo-name-size);
    font-weight: var(--evo-name-weight);
    color: var(--evo-name-color);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.evo-card__desc {
    font-size: var(--evo-desc-size);
    color: var(--evo-desc-color);
    line-height: var(--leading-normal);
    display: -webkit-box;
    -webkit-line-clamp: var(--evo-desc-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.evo-card__reward {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--evo-reward-color);
    background: var(--evo-reward-bg);
    border: 1px solid var(--evo-reward-border);
    border-radius: var(--evo-reward-radius);
    padding: 3px 10px;
    margin-bottom: 10px;
}
.evo-card__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.evo-card__btn {
    padding: 7px 16px;
    border-radius: var(--evo-cta-radius);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity var(--duration-fast) var(--ease-default);
}
.evo-card__btn:hover { opacity: 0.85; }
.evo-card__btn--action {
    background: var(--evo-cta-bg);
    color: var(--evo-cta-color);
    font-weight: var(--font-bold);
    box-shadow: var(--evo-cta-shadow);
}
.evo-card__btn--done {
    background: var(--evo-done-bg);
    color: var(--evo-done-color);
    border: 1px solid var(--evo-done-border);
}
.evo-card__btn--done:disabled {
    opacity: var(--btn-disabled-opacity);
    cursor: default;
}
/* ── Type badge (bottom-left of hero) ── */
.evo-card__type-badge {
    position: absolute;
    bottom: var(--space-2);
    left: var(--space-2);
    font-size: var(--evo-badge-size);
    font-weight: var(--evo-badge-weight);
    letter-spacing: var(--evo-badge-tracking);
    padding: 2px 8px;
    border-radius: var(--evo-badge-radius);
    z-index: 2;
    background: var(--evo-badge-quest-bg);
    color: var(--evo-badge-quest-color);
    border: 1px solid var(--evo-badge-quest-border);
    text-transform: uppercase;
}
.evo-card__type-badge--app {
    background: var(--evo-badge-app-bg);
    color: var(--evo-badge-app-color);
    border-color: var(--evo-badge-app-border);
}
.evo-card__type-badge--item {
    background: var(--evo-badge-item-bg);
    color: var(--evo-badge-item-color);
    border-color: var(--evo-badge-item-border);
}
.evo-card__type-badge--prompt {
    background: var(--evo-badge-prompt-bg);
    color: var(--evo-badge-prompt-color);
    border-color: var(--evo-badge-prompt-border);
}
/* ── Price badge (top-right of hero) ── */
.evo-card__price-badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    padding: 3px 8px;
    border-radius: var(--space-2);
    z-index: 2;
    background: var(--evo-reward-bg);
    color: var(--evo-reward-color);
    border: 1px solid var(--evo-reward-border);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* ── Footer meta (task count etc.) ── */
.evo-card__footer-meta {
    border-top: 1px solid var(--border-subtle);
    margin-top: 10px;
    padding-top: var(--space-2);
}
.evo-card__meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.evo-card__error {
    padding: var(--space-4);
    color: var(--text-muted);
    font-size: var(--text-xs);
    text-align: center;
}

/* ── Evo Reward Toast ── */
.evo-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(5, 11, 20, 0.85);
    color: var(--color-green-400);
    border: 1px solid rgba(34, 197, 94, 0.25);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    z-index: var(--z-spectacle);
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-default), transform var(--duration-slow) var(--ease-default);
    pointer-events: none;
}
.evo-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Quest Completed Toast (anchored to coin pill) ── */
.quest-complete-toast {
    position: fixed;
    top: 6px;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px 4px 10px;
    height: 32px;
    background: var(--surface-primary);
    color: var(--accent-primary);
    border: 1.5px solid var(--accent-primary);
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.02em;
    z-index: var(--z-critical-above);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 0 12px rgba(13,148,136,0.25), 0 2px 8px rgba(0,0,0,0.15);
    white-space: nowrap;
}
.quest-complete-toast--show {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
.quest-complete-toast__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
@keyframes coinBurst {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.4); }
}
.coin-particle {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-green-400);
    z-index: 10002;
    pointer-events: none;
    animation: coinBurst 0.5s ease-out forwards;
    box-shadow: 0 0 4px rgba(74,222,128,0.6);
}

/* ── Swipe Direction Hints ── */
.evo-swipe-hints {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    z-index: 0;
    padding: 0 var(--space-4);
}
.evo-swipe-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.03em;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-default);
}
.evo-swipe-hint--left {
    color: var(--color-blue-500);
}
.evo-swipe-hint--right {
    color: var(--color-red-400);
}
/* ── Flashing card effect (sticky gate — brand teal pulse) ── */
.evo-card--flash {
    animation: evoFlash 2.5s ease-in-out infinite;
}
@keyframes evoFlash {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    25% { box-shadow: 0 0 12px 2px var(--evo-glow-brand), inset 0 0 8px var(--evo-flash-inset); }
    50% { box-shadow: 0 0 20px 4px var(--evo-flash-glow), inset 0 0 12px var(--evo-flash-inset); }
    75% { box-shadow: 0 0 12px 2px var(--evo-glow-brand), inset 0 0 8px var(--evo-flash-inset); }
}

/* ── Card state variants (tokenized) ── */
.evo-card--completed { opacity: var(--evo-completed-opacity); }
.evo-card--completed .evo-card__hero { filter: var(--evo-completed-saturation); }
.evo-card--locked { opacity: var(--evo-locked-opacity); }
.evo-card--locked .evo-card__hero { filter: var(--evo-locked-filter); }
.evo-card--current { border-color: var(--evo-current-border); }

/* Status overlay on hero */
.evo-card__status-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: var(--size-10);
    height: var(--size-10);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.evo-card__status-overlay--done {
    background: var(--evo-overlay-done-bg);
    color: var(--evo-overlay-done-color);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.evo-card__status-overlay--locked {
    background: var(--evo-overlay-locked-bg);
    color: var(--evo-overlay-locked-color);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* ── Card region: arrows flanking card ── */
.evolve-line__card-region {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}
.evolve-line__arrow {
    background: none;
    border: none;
    width: 28px;
    min-width: 28px;
    height: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: color var(--duration-fast) var(--ease-default);
    flex-shrink: 0;
    padding: 0;
}
.evolve-line__arrow:hover:not(:disabled) {
    color: var(--text-secondary);
}
.evolve-line__arrow:disabled {
    opacity: 0.15;
    cursor: default;
}
.evolve-line__card-region .evolve-line__card-wrap {
    flex: 1;
    min-width: 0;
}

/* ── Swipe tip ── */
.evolve-line__swipe-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 0 0;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    letter-spacing: 0.02em;
    opacity: 0.6;
}

/* ── Verification Row (Evolve card) ── */
.evolve-verify {
    padding: 0 var(--space-4) var(--space-1);
}
.evolve-verify__header {
    margin-bottom: var(--space-2);
}
.evolve-verify__apps {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.evolve-verify__app {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--space-3) var(--space-2) 10px;
    background: transparent;
    border-radius: var(--space-3);
    border: 1px solid var(--border-subtle);
    text-decoration: none;
    color: var(--text-muted);
    position: relative;
    transition: border-color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default);
}
.evolve-verify__app:hover {
    border-color: var(--border-strong);
    background: var(--interactive-hover);
}
.evolve-verify__app--done {
    border-color: rgba(34, 197, 94, 0.35);
}
.evolve-verify__app--waiting {
    border-color: rgba(139, 92, 246, 0.35);
}
.evolve-verify__app--pulse {
    animation: evolve-verify-pulse 2s ease-in-out infinite;
}
@keyframes evolve-verify-pulse {
    0%, 100% { border-color: var(--border-subtle); box-shadow: none; }
    50% { border-color: var(--evo-current-border); box-shadow: 0 0 12px var(--evo-glow-brand-spread); }
}
.evolve-verify__icon {
    width: var(--size-10);
    height: var(--size-10);
    border-radius: var(--evo-icon-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}
.evolve-verify__icon svg,
.evolve-verify__icon iconify-icon {
    width: var(--size-5);
    height: var(--size-5);
}
.evolve-verify__icon--phone {
    background: var(--status-info-subtle);
    color: var(--color-blue-500);
}
.evolve-verify__icon--intro {
    background: rgba(139,92,246,0.12);
    color: var(--color-purple-500);
}
.evolve-verify__icon--flame {
    background: rgba(251,146,60,0.12);
    color: var(--color-orange-400);
}
.evolve-verify__name {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.02em;
    text-align: center;
    line-height: var(--leading-snug);
}
.evolve-verify__step {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--interactive-hover);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.evolve-verify__app--done .evolve-verify__step {
    background: var(--status-success-subtle);
    color: var(--status-success);
}
.evolve-verify__check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-green-500);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Connector lines between verification steps */
.evolve-verify__apps {
    position: relative;
}
.evolve-verify__app + .evolve-verify__app::before {
    content: '';
    position: absolute;
    top: 50%;
    margin-left: -10px;
    width: 10px;
    height: 2px;
    background: rgba(0,0,0,0.08);
    transform: translateY(-50%);
}

/* ============================================================================
   HOUSE CARD LAYER — Houses are cards sitting on top of the base layer
   ============================================================================ */

/* ── House layer: black backdrop so nothing peeks through ── */
body[data-fan-nav] {
    background: var(--color-black);
}
body[data-fan-nav] .main-area {
    position: relative;
}

/* ── House bar — cascading overlapping pills ── */
.top-bar__house-bar {
    display: flex;
    align-items: center;
    pointer-events: auto;
    position: relative;
}

/* House pill sits on top of everything */
.top-bar__house-bar > .top-bar__floating-pill {
    position: relative;
    z-index: 10;
}

/* ── Tab row: no background — each tab is its own pill ── */
.top-bar__house-row {
    display: flex;
    align-items: center;
    margin-left: -16px;
    position: relative;
}

/* ── Each tab is a full-height pill that tucks under the previous ── */
.house-card-nav__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    min-width: 40px;
    padding: 0 10px 0 22px;
    margin-left: -12px;
    border: 1px solid var(--topbar-pill-border, rgba(0,0,0,0.12));
    border-radius: var(--radius-full, 9999px);
    background: var(--topbar-pill-bg);
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
    box-shadow: 2px 1px 6px rgba(0, 0, 0, 0.06);
}
/* First tab overlaps more under the house pill */
.house-card-nav__tab:first-child {
    margin-left: 0;
    padding-left: 26px;
}
/* Descending z-index so each slides under the previous */
.house-card-nav__tab:nth-child(1) { z-index: 8; }
.house-card-nav__tab:nth-child(2) { z-index: 7; }
.house-card-nav__tab:nth-child(3) { z-index: 6; }
.house-card-nav__tab:nth-child(4) { z-index: 5; }

.house-card-nav__tab i,
.house-card-nav__tab svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
/* Hide label on inactive tabs */
.house-card-nav__tab span {
    display: none;
}
.house-card-nav__tab:hover {
    background: var(--interactive-hover);
    color: var(--text-secondary);
}

/* ── Active tab — light pill with label, highest z in row ── */
.house-card-nav__tab--active {
    padding: 0 16px 0 26px;
    background: var(--surface-primary);
    color: var(--text-primary);
    border-color: var(--surface-primary);
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
    z-index: 9 !important;
}
.house-card-nav__tab--active span {
    display: inline;
}
.house-card-nav__tab--active:hover {
    background: var(--surface-secondary);
    color: var(--text-primary);
}
.house-card-nav__tab--active i,
.house-card-nav__tab--active svg {
    color: var(--accent-primary);
}

/* ── Top-bar stacked layout (house nav pill above Coiny pill) ── */
.top-bar__right-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    pointer-events: auto;
}
.top-bar__house-nav-pill {
    gap: 0;
    padding: 2px;
}
.top-bar__house-nav-pill .house-card-nav__tab {
    margin-left: 0;
    padding: 0 10px;
    box-shadow: none;
    border: none;
    background: transparent;
    color: var(--text-muted);
    height: 32px;
    min-width: 32px;
}
.top-bar__house-nav-pill .house-card-nav__tab:first-child {
    margin-left: 0;
    padding-left: 10px;
}
.top-bar__house-nav-pill .house-card-nav__tab--active {
    background: var(--surface-primary);
    color: var(--text-primary);
    border-radius: var(--radius-full);
    border: none;
    padding: 0 12px;
}
.top-bar__house-nav-pill .house-card-nav__tab--active i,
.top-bar__house-nav-pill .house-card-nav__tab--active svg {
    color: var(--accent-primary);
}
.top-bar__house-nav-pill .house-card-nav__tab:hover:not(.house-card-nav__tab--active) {
    background: var(--interactive-hover);
    border-radius: var(--radius-full);
}
.top-bar__house-nav-pill .house-card-nav__tab span {
    display: none;
}
.top-bar__house-nav-pill .house-card-nav__tab--active span {
    display: inline;
}

/* ── X Close — same pill height, tucks under last tab ── */
.top-bar__house-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: -12px;
    border-radius: var(--radius-full);
    border: 1px solid var(--topbar-pill-border);
    background: var(--topbar-pill-bg);
    color: var(--text-muted);
    text-decoration: none;
    flex-shrink: 0;
    padding-left: 14px;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
    z-index: 4;
    box-shadow: 2px 1px 6px rgba(0, 0, 0, 0.08);
}
.top-bar__house-close:hover {
    background: var(--interactive-hover);
    color: var(--text-secondary);
}
.top-bar__house-close:active {
    transform: scale(0.92);
}
.top-bar__house-close svg {
    width: 22px;
    height: 22px;
}

/* ── Hide old house sidebar nav on mobile when in house (bottom nav restored) ── */
@media (max-width: 768px) {
    body[data-fan-nav] .house-nav {
        display: none !important;
    }
}

/* ── Compose Tab (left-edge floating button inside a house) ── */
.house-compose-tab {
    display: none;
    position: fixed;
    left: 0;
    bottom: 28%;
    z-index: 100;
    width: 48px;
    height: 52px;
    align-items: center;
    justify-content: center;
    background: rgba(0, 243, 255, 0.9);
    border: none;
    border-radius: 0 14px 14px 0;
    color: var(--color-dark-900);
    cursor: pointer;
    box-shadow: 2px 2px 12px rgba(0, 243, 255, 0.25), 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease, width 0.2s ease;
}
.house-compose-tab:hover {
    transform: translateX(4px);
    box-shadow: 4px 2px 16px rgba(0, 243, 255, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
}
.house-compose-tab:active {
    transform: translateX(2px) scale(0.95);
}
/* Hide compose tab when post drawer is open */
body.post-drawer-open .house-compose-tab {
    display: none;
}
.house-compose-tab svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.5;
}
@media (min-width: 768px) {
    .house-compose-tab {
        left: calc(var(--layout-rail-width) + var(--layout-sidebar-width));
    }
}

/* =============================================================================
   UTILITY BAR — Shared top bar for all Utility Family pages
   3 zones: left (back/close), center (title, absolutely centered), right (actions/toolkit)
   ============================================================================= */

/* When a utility bar exists inside a panel body, hide the panel's default header */
.fullscreen-panel:has(.fullscreen-panel__body [data-utility-bar]) > .fullscreen-panel__header {
    display: none;
}

/* --- Utility Bar Tokens --- defined in tokens.css (Layer 3: Component) */


.utility-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--utility-bar-padding);
    background: var(--utility-bar-bg);
    border-radius: var(--utility-bar-radius);
    margin: 0 0 var(--space-4) 0;
    flex-shrink: 0;
    min-height: var(--utility-bar-height);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.utility-bar__left {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-shrink: 0;
}

.utility-bar__center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
}

.utility-bar__center > * {
    pointer-events: auto;
}

.utility-bar__title {
    font-size: var(--utility-bar-title-size);
    font-weight: var(--utility-bar-title-weight);
    color: var(--utility-bar-text);
    letter-spacing: var(--utility-bar-title-tracking);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.utility-bar__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2, 8px);
    flex-shrink: 0;
    margin-left: auto;
}

/* Back / Close button in left zone */
.utility-bar__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--utility-bar-text-muted);
    cursor: pointer;
    transition: color 0.15s;
    text-decoration: none;
    padding: 0;
}

.utility-bar__back:hover {
    color: var(--utility-bar-text);
}

/* Close button in right zone (utility panel X) */
.utility-bar__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: none;
    border: none;
    color: var(--utility-bar-text-muted, var(--text-muted));
    cursor: pointer;
    transition: color 0.15s;
    padding: 0;
}
.utility-bar__close:hover {
    color: var(--utility-bar-text, var(--text-primary));
}

/* Right-zone toolkit overrides (compact slots for utility bar) */
.utility-bar__right .toolkit {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    gap: 0;
}

.utility-bar__right .toolkit__label {
    display: none;
}

.utility-bar__right .toolkit__slots {
    gap: 8px;
    flex: none;
}

.utility-bar__right .toolkit__slot {
    width: var(--utility-bar-slot-size);
    height: var(--utility-bar-slot-size);
}

.utility-bar__right .toolkit__slot--empty {
    border: 2px dashed var(--utility-bar-slot-empty);
    background: transparent;
    opacity: 1;
}

.utility-bar__right .toolkit__slot--filled {
    border: 2px solid var(--utility-bar-slot-border);
    background: var(--utility-bar-slot-bg);
    color: var(--utility-bar-slot-border);
}

.utility-bar__right .toolkit__slot--filled:hover {
    background: var(--interactive-active);
    box-shadow: 0 0 12px var(--accent-primary-subtle);
}

.utility-bar__right .toolkit__slot svg,
.utility-bar__right .toolkit__slot [data-lucide] {
    width: 15px;
    height: 15px;
}

/* Balance pill inside utility bar right zone */
.utility-bar__balance {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 10px;
    background: var(--utility-bar-balance-bg);
    border: 1px solid var(--utility-bar-balance-border);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--utility-bar-balance-color);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
    transition: all 0.15s ease;
}
.utility-bar__balance:hover {
    background: var(--color-purple-500);
    border-color: var(--color-purple-700);
    box-shadow: 0 3px 10px rgba(139, 92, 246, 0.4);
}
.utility-bar__balance svg {
    flex-shrink: 0;
}

/* Action buttons inside utility bar right zone */
.utility-bar__action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--utility-bar-slot-size);
    height: var(--utility-bar-slot-size);
    border-radius: 0;
    border: none;
    background: transparent;
    color: var(--utility-bar-text-muted);
    cursor: pointer;
    transition: color 0.15s ease;
    padding: 0;
}
.utility-bar__action-btn:hover {
    color: var(--utility-bar-text);
}
.utility-bar__action-btn .icon-base,
.utility-bar__action-btn [data-lucide] {
    width: 22px;
    height: 22px;
}

/* Balance pill cursor — clickable when it opens collection */
.utility-bar__balance {
    cursor: pointer;
}

/* Brand logo + title combo (Shop header etc.) */
.utility-bar__brand {
    display: flex;
    align-items: center;
    gap: 6px;
}
.utility-bar__brand-logo {
    width: 20px;
    height: 20px;
    color: var(--utility-bar-text);
    flex-shrink: 0;
    display: block;
}
.utility-bar__brand .utility-bar__title {
    font-family: var(--font-serif, 'Literata', Georgia, serif);
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Tab pills spacing below utility bar inside fullscreen panels */
.fullscreen-panel__body .pack-tabs {
    margin-top: 12px;
}

/* ── Coiny Collection Drawer ── */
/* #panel-utility has position:fixed from .fullscreen-panel,
   which serves as containing block for absolute children (drawer).
   Do NOT set position:relative here — it overrides position:fixed
   (ID specificity > class specificity) and breaks the overlay. */
.coiny-collection-drawer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: var(--surface-primary);
    z-index: 20;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
}
.coiny-collection-drawer--open {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 767px) {
    :root {
        --utility-bar-height: 52px;
        --utility-bar-padding: 12px 16px;
        --utility-bar-slot-size: 32px;
    }

    .utility-bar__right .toolkit__slot svg,
    .utility-bar__right .toolkit__slot [data-lucide] {
        width: 13px;
        height: 13px;
    }
}


/* ========== Evolve Feed Card (grand display format) ========== */
.evo-feed-card-wrap {
    border-radius: var(--evo-feed-radius, 24px);
    margin-bottom: 16px;
}
.evo-feed-card {
    position: relative;
    height: var(--evo-feed-height, 400px);
    border-radius: var(--evo-feed-radius, 24px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--evo-feed-bg);
}
.evo-feed-card__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.evo-feed-card__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.evo-feed-card__bg-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--evo-feed-icon-color);
}
.evo-feed-card__gradient {
    position: absolute;
    inset: 0;
    background: var(--feed-card-image-gradient);
    z-index: 1;
    pointer-events: none;
}
/* No gradient overlay when showing fallback icon (no image) */
.evo-feed-card:has(.evo-feed-card__bg-icon) .evo-feed-card__gradient {
    background: none;
}
.evo-feed-card__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: var(--evo-feed-padding, 24px);
    box-sizing: border-box;
}
.evo-feed-card__header {
    margin-bottom: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.evo-feed-card__type {
    font-size: var(--evo-badge-size, 11px);
    font-weight: var(--evo-badge-weight, 700);
    letter-spacing: var(--evo-badge-tracking, 0.06em);
    padding: 3px 10px;
    border-radius: var(--evo-badge-radius, 8px);
    background: var(--evo-feed-badge-bg);
    color: var(--evo-feed-badge-color);
    border: 1px solid var(--evo-feed-badge-border);
    text-transform: uppercase;
}
.evo-feed-card__type--app {
    background: var(--evo-badge-app-bg);
    color: var(--evo-badge-app-color);
    border-color: var(--evo-badge-app-border);
}
.evo-feed-card__type--item {
    background: var(--evo-badge-item-bg);
    color: var(--evo-badge-item-color);
    border-color: var(--evo-badge-item-border);
}
.evo-feed-card__reward {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--evo-feed-reward-color);
}
.evo-feed-card__title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: var(--evo-feed-title-size, 30px);
    font-weight: var(--evo-feed-title-weight, 600);
    letter-spacing: var(--evo-feed-title-tracking, -0.02em);
    color: var(--evo-feed-title-color);
    line-height: 1.3;
    margin-bottom: 6px;
}
.evo-feed-card__desc {
    font-size: var(--text-sm);
    color: var(--evo-feed-desc-color);
    line-height: 1.5;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.evo-feed-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: var(--evo-cta-radius, 999px);
    background: var(--evo-feed-cta-bg);
    color: var(--evo-feed-cta-color);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: fit-content;
    text-decoration: none;
}
.evo-feed-card__cta:hover {
    filter: brightness(1.1);
}
/* When card has a hero image, use light-on-dark text */
.evo-feed-card:has(.evo-feed-card__bg img) .evo-feed-card__title {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.evo-feed-card:has(.evo-feed-card__bg img) .evo-feed-card__desc {
    color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.evo-feed-card:has(.evo-feed-card__bg img) .evo-feed-card__reward {
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.evo-feed-card:has(.evo-feed-card__bg img) .evo-feed-card__type {
    background: rgba(26,143,128,0.2);
    color: rgba(255,255,255,0.9);
    border-color: rgba(26,143,128,0.3);
}

/* ==========================================================================
   Post FAB — Floating Action Button for creating posts
   Used on: feed page, houses list, house landing (non-member)
   ========================================================================== */
.post-fab {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    right: 20px;
    z-index: var(--z-fab);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-tertiary);
    border: none;
    color: var(--color-white);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.post-fab:active {
    transform: scale(0.92);
    background: var(--color-purple-700);
}
.post-fab svg {
    width: 28px;
    height: 28px;
}

/* House picker popup — appears above the FAB */
.post-fab-picker {
    position: fixed;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    right: 20px;
    z-index: var(--z-fab-above);
    background: var(--surface-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    padding: 8px;
    min-width: 200px;
    display: none;
}
.post-fab-picker.open { display: block; }
.post-fab-picker__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    border-radius: var(--radius-sm);
    cursor: pointer;
    width: 100%;
    text-align: left;
    text-decoration: none;
    transition: background 0.15s;
}
.post-fab-picker__item:hover {
    background: var(--interactive-hover);
}
.post-fab-picker__logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-secondary);
    flex-shrink: 0;
}

.global-post-fab-surface {
    position: fixed;
    inset: auto 0 0 auto;
    z-index: var(--z-fab);
    pointer-events: none;
}

.global-post-fab,
.global-post-fab-picker {
    pointer-events: auto;
}

body.global-post-fab-suppressed .global-post-fab,
body.global-post-fab-suppressed .global-post-fab-picker,
body.discussion-mode .global-post-fab,
body.discussion-mode .global-post-fab-picker,
body.post-drawer-open .global-post-fab,
body.post-drawer-open .global-post-fab-picker {
    display: none !important;
}

/* ==========================================================================
   Verify Topic Modal — popup for unverified users trying to create topics
   ========================================================================== */
.verify-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 9000);
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.verify-modal--open {
    display: flex;
}
.verify-modal__card {
    position: relative;
    background: var(--surface-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6) var(--space-6);
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-lg);
}
.verify-modal__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-xl);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--duration-normal, 0.2s) ease;
}
.verify-modal__close:hover {
    background: var(--surface-secondary);
    color: var(--text-primary);
}
.verify-modal__icon {
    font-size: var(--text-4xl);
    color: var(--accent-tertiary);
    margin-bottom: var(--space-3);
}
.verify-modal__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}
.verify-modal__message {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-5);
    line-height: 1.5;
}
.verify-modal__cta {
    display: block;
    width: 100%;
    margin-bottom: var(--space-3);
}
.verify-modal__link {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-decoration: underline;
    transition: color var(--duration-normal, 0.2s) ease;
}
.verify-modal__link:hover {
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════
   URL-ROUTED DRAWER SYSTEM
   Left-side drawer overlay (desktop) + full-screen panel (mobile)
   For Shop, Messages, Backpack utilities
   ═══════════════════════════════════════════════════════════════════ */

/* Drawer pages: main-area becomes the drawer surface, single scroll owner */
body.drawer-layout .main-area {
    background: var(--drawer-surface);
    overflow-y: hidden;
}

/* Desktop: Utility overlay (z-9400 per design system) */
@media (min-width: 768px) {
    .drawer-container {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;   /* Allow shrinking so .drawer-panel__body can scroll */
    }

    .drawer-backdrop {
        display: none;
    }

    .drawer-panel {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;   /* Allow shrinking so .drawer-panel__body can scroll */
        background: var(--drawer-surface);
    }

    /* Full-viewport overlay for the right-edge drawer panel
       (Shop, Messages, Backpack) — sits on top of the global top-bar
       so hard-refresh matches the client-nav FullscreenPanel exactly. */
    body.drawer-layout .drawer-panel--right {
        position: fixed !important;
        top: 0 !important;
        left: calc(var(--layout-rail-width, 88px) + var(--layout-sidebar-width, 280px)) !important;
        right: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        max-width: none !important;
        border-radius: 0 !important;
        transform: none !important;
        z-index: var(--z-utility-overlay, 9400) !important;
        background: var(--drawer-surface);
    }
    body.drawer-layout .drawer-container { min-height: 0; }

    .drawer-panel__header {
        height: var(--drawer-panel-header-height);
        padding: 0 var(--space-4);
        display: flex;
        align-items: center;
        gap: var(--space-3);
        border-bottom: 1px solid var(--border-default);
        background: var(--drawer-panel-header-bg);
        flex-shrink: 0;
    }

    .drawer-panel__close {
        width: 32px;
        height: 32px;
        border-radius: var(--radius-sm);
        border: none;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        transition: all 0.15s ease;
    }

    .drawer-panel__close:hover {
        background: var(--surface-tertiary);
        color: var(--text-primary);
    }

    .drawer-panel__title {
        font-size: var(--text-lg);
        font-weight: var(--font-semibold);
        color: var(--text-primary);
        margin: 0;
    }

    .drawer-panel__body {
        flex: 1;
        overflow-y: auto;
        overflow-x: clip;  /* clip prevents body-level horizontal scroll but doesn't block nested scroll containers (shop rows) */
    }

    @keyframes dropIn {
        from {
            transform: translateY(-40px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes dropOut {
        from {
            transform: translateY(0);
            opacity: 1;
        }
        to {
            transform: translateY(-24px);
            opacity: 0;
        }
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
    }
}

/* Mobile: Full-screen panel */
@media (max-width: 767px) {
    .drawer-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9400;
        background: var(--surface-primary);
        display: flex;
        flex-direction: column;
    }
    
    .drawer-backdrop {
        display: none;
    }
    
    .drawer-panel {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
    }

    /* Hide standalone drawer header — content templates provide utility bar */
    .drawer-panel__header {
        display: none;
    }

    .drawer-panel__body {
        flex: 1;
        overflow-y: auto;
        overflow-x: clip;  /* clip prevents body-level horizontal scroll but doesn't block nested scroll containers (shop rows) */
    }

    @keyframes dropIn {
        from {
            transform: translateY(-40px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}