/* ── Egos page-specific styles ──
   Chrome (topbar/sidebar/bottom-nav/tokens) lives in common.css.
   Subtitle/heading/tag/browse-count use B2 (#4d9eff) selected secondary.
   ──────────────────────────────── */

/* ── Page (egos override: full-bleed hero canvas) ── */
.page-content {
    position: relative;
    padding: 16px 24px 40px;
    overflow-x: hidden;
}
.page-content::before {
    content: '';
    /* Viewport-fixed so the ambient blobs sit behind scrolled content
       through the whole page, not only the first screen. */
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 60% at 30% 40%, rgba(var(--b2-rgb), 0.10) 0%, transparent 70%),
        radial-gradient(ellipse 45% 55% at 70% 55%, rgba(var(--b2-rgb), 0.05) 0%, transparent 70%);
    z-index: -1;
}

/* ── Hero Intro — sized to match /agents .page-header rhythm ── */
.hero-intro {
    margin-bottom: 12px;
    max-width: none;
    position: relative; z-index: 1;
}

.hero-title { font-size: 28px; font-weight: 800; color: #fff; }
/* B2 secondary text/heading line — see materials/releases/dashboard-rebrand.md */
.hero-subtitle {
    font-size: 15px; line-height: 1.35;
    margin-top: 6px;
    color: var(--b2-soft);
    text-shadow: 0 0 8px rgba(var(--b2-rgb), 0.20), 0 0 20px rgba(var(--b2-rgb), 0.08);
}
.hide-mobile {}

.hero-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.hero-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 14px; border-radius: 20px;
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-muted);
    transition: all 0.2s;
}
.hero-chip:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: var(--text-primary);
}
/* Active — luminous B2 azure gradient (matches agents .pill.active) */
.hero-chip.chip-active {
    background: linear-gradient(180deg, rgba(var(--b2-rgb),0.25) 0%, rgba(var(--b2-rgb),0.10) 100%);
    color: var(--b2-soft);
    border-color: rgba(var(--b2-rgb),0.35);
    border-top-color: rgba(var(--b2-rgb),0.50);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 2px 8px rgba(var(--b2-rgb),0.14);
}
.hero-chip-icon { font-size: 14px; }
.hero-chip-desc {
    display: none; position: absolute;
    bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    min-width: 180px; padding: 8px 12px;
    background: #161e22; border: 1px solid rgba(var(--b2-rgb), 0.25);
    border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    color: #c8d6e5; font-size: 11px; font-weight: 500;
    white-space: nowrap; z-index: 50; text-align: center;
}
.hero-chip { position: relative; }
.hero-chip:hover .hero-chip-desc { display: block; }

/* ── Featured Sections ── */
.featured-section {
    margin-bottom: 35px;
    position: relative; z-index: 1;
}
.section-heading {
    font-size: 18px; font-weight: 800; margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px;
    color: var(--b2);
    text-shadow: 0 0 8px rgba(var(--b2-rgb), 0.20);
}
.section-heading-icon {
    font-size: 20px;
    color: var(--b2);
}
.section-heading-sub {
    font-size: 11px; font-weight: 500; color: var(--text-dim);
    margin-left: 4px;
}

/* Section tooltip — toned-down variant of unified .tip-icon (see common.css).
   Smaller and lower contrast so attention stays on the section title. */
.section-heading-tip {
    position: relative;
    cursor: help;
    display: inline-flex;
    align-items: center;
    margin-left: 0;
}
.section-heading-tip .tip-icon {
    width: 15px;
    height: 15px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)),
        rgba(var(--b2-rgb), 0.10);
    color: var(--b2-soft);
    font-size: 10.5px;
    opacity: 0.65;
    transform: translateY(1px);
    transition: opacity 0.15s, background 0.15s;
}
.section-heading-tip:hover .tip-icon {
    opacity: 1;
    background:
        linear-gradient(rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.10)),
        rgba(var(--b2-rgb), 0.20);
}
/* Position fixed; coords are written by utils.js to --tip-x / --tip-y so the
   pseudo stays inside the viewport even on narrow screens. */
.section-heading-tip::after {
    content: attr(data-tip);
    position: fixed;
    left: var(--tip-x, 0);
    top: var(--tip-y, 0);
    max-width: calc(100vw - 16px);
    background: #161e22;
    border: 1px solid rgba(var(--b2-rgb), 0.25);
    color: #c8d6e5;
    font-size: 11px; font-weight: 500;
    padding: 8px 10px;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 50;
}
.section-heading-tip:hover::after {
    opacity: 1;
}

/* ── Featured Carousel ── */
.featured-carousel {
    display: flex; gap: 14px; align-items: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    -ms-overflow-style: none; scrollbar-width: none;
}
.featured-carousel::-webkit-scrollbar { display: none; }

/* ── Hero Card (large featured) ── */
.hero-card {
    flex: 0 0 260px; scroll-snap-align: start;
    border-radius: 16px; padding: 18px;
    cursor: pointer;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 50%),
        rgba(255,255,255,0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    border-top-color: rgba(255,255,255,0.18);
    border-left-color: rgba(255,255,255,0.12);
    box-shadow:
        0 4px 16px rgba(0,0,0,0.25),
        0 1px 0 rgba(255,255,255,0.08) inset;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    display: flex; flex-direction: column; gap: 12px;
    position: relative; overflow: hidden;
}
.hero-card:hover {
    border-color: rgba(255,255,255,0.14);
    border-top-color: rgba(255,255,255,0.25);
    box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.12) inset;
    /* No translate on hover — native title tooltips don't follow card movement. */
}
/* Identity-first layout: icon + name top, quote + tags mid (character),
   metric (score + pos) and viz (radar) at the bottom row. */
.hero-card-identity {
    display: flex; align-items: flex-start; gap: 10px;
}
.hero-card-icon { font-size: 24px; flex-shrink: 0; line-height: 1; }
.hero-card-name-row {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
}
.hero-card-name { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.2; }
.hero-card-id { font-size: 11px; color: var(--text-muted); font-family: 'Inter', monospace; font-weight: 500; }
.hero-card-quote {
    font-size: 13px; color: var(--text-primary);
    line-height: 1.5; font-weight: 500;
    /* No italic — Korean fonts lose legibility under italic transform. */
    /* Cap at 4 lines to avoid one over-long quote dictating carousel height
       (carousel align-items: stretch otherwise leaves siblings with awkward
       voids). Most quotes fit within 4 lines; longer ones taper with ellipsis. */
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero-card-metric {
    display: flex; flex-direction: column; gap: 4px;
    align-items: flex-start; justify-content: center;
}
.hero-card-score {
    font-size: 24px; font-weight: 800;
    color: var(--b2-soft);
    text-shadow: 0 0 10px rgba(var(--b2-rgb), 0.35);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.hero-card-bottom {
    display: flex; flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}
.hero-card-bottom .hero-card-metric {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px;
}
.hero-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
/* Headliners "peaks" column chart — full-width 5 vertical bars, top-2
   highlighted. Visual contrast with All-Rounders' radar (round = balanced):
   tall peaks here read as "good at its strengths" not "even all-round".
   Sits on its own row below the score/pos line so each column gets ~40px
   and labels show as full words without truncation. */
.hero-card-peaks {
    display: flex; align-items: flex-end;
    gap: 6px;
    width: 100%; height: 72px;
}
.hero-card-peaks .hp-bar {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; gap: 5px;
    height: 100%;
    min-width: 0;
}
.hero-card-peaks .hp-bar-track {
    width: 10px; flex: 1;
    display: flex; flex-direction: column;
    justify-content: flex-end; align-items: stretch;
}
.hero-card-peaks .hp-bar-fill {
    width: 100%;
    background: rgba(var(--b2-rgb), 0.20);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
}
.hero-card-peaks .hp-bar.hp-bar-peak .hp-bar-fill {
    background: var(--b2-soft);
    box-shadow: 0 0 8px rgba(var(--b2-rgb), 0.45);
}
.hero-card-peaks .hp-bar-label {
    font-size: 10px; font-weight: 600;
    color: var(--text-dim);
}
.hero-card-peaks .hp-bar.hp-bar-peak .hp-bar-label {
    color: var(--b2-soft);
    font-weight: 700;
}
.meta-dot {
    width: 6px; height: 6px; border-radius: 50%;
    display: inline-block; flex-shrink: 0;
}
.meta-dot-alive { background: var(--positive); box-shadow: 0 0 6px rgba(var(--positive-rgb),0.5); }
.meta-dot-idle { background: var(--text-dim); }

/* ── Medium Card (for featured rows) ── */
.med-card {
    flex: 0 0 260px; scroll-snap-align: start;
    border-radius: 16px; padding: 16px;
    cursor: pointer;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 40%),
        rgba(255,255,255,0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    border-top-color: rgba(255,255,255,0.18);
    border-left-color: rgba(255,255,255,0.12);
    box-shadow:
        0 4px 16px rgba(0,0,0,0.25),
        0 1px 0 rgba(255,255,255,0.08) inset;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    display: flex; flex-direction: column; gap: 10px;
}
.med-card:hover {
    border-color: rgba(255,255,255,0.14);
    border-top-color: rgba(255,255,255,0.25);
    box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.12) inset;
    /* No translate on hover — native title tooltips don't follow card movement. */
}
/* Identity-first med-card layout — icon + name top, quote + tags mid,
   highlight bar + bottom row (pos + viz). */
.med-card-identity {
    display: flex; align-items: flex-start; gap: 8px;
}
.med-card-icon { font-size: 20px; flex-shrink: 0; line-height: 1; }
.med-card-name-row {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
}
.med-card-name { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2; }
.med-card-id { font-size: 11px; color: var(--text-muted); font-family: 'Inter', monospace; font-weight: 500; }
.med-card-quote {
    font-size: 12px; color: var(--text-primary);
    line-height: 1.5; font-weight: 500;
    /* No italic — Korean fonts lose legibility under italic transform. */
    /* Same rationale as .hero-card-quote — keep carousel rows aligned. */
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden;
}
.med-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.med-card-bottom {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
}
.med-card-radar,
.med-viz {
    width: 64px; height: 64px; flex-shrink: 0;
    position: relative;
}
.med-viz-radar { width: 80px !important; height: 80px !important; }

/* Rising — typography-as-viz. Large accel value (signed %), small unit label.
   No chart: the speedometer-style number IS the visual. Mirrors how trading
   dashboards surface a single big "now" reading. */
.med-viz-accel {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
}
.med-viz-accel .vz-big {
    font-size: 18px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.med-viz-accel .vz-big.vz-pos { color: var(--positive); }
.med-viz-accel .vz-big.vz-neg { color: var(--negative); }
.med-viz-accel .vz-unit {
    font-size: 9px; color: var(--text-dim);
    font-weight: 600; letter-spacing: 0.04em;
}

/* Safe — horizontal pair sharing a left baseline. Both bars grow rightward;
   length comparison = Sortino ratio (long mint vs short coral = safe). */
.med-viz-safe-pair {
    display: flex; flex-direction: column;
    justify-content: center; gap: 6px;
    padding: 4px 4px;
}
.med-viz-safe-pair .vz-row {
    display: flex; align-items: center; gap: 5px;
}
.med-viz-safe-pair .vz-label {
    font-size: 8px; font-weight: 700;
    color: var(--text-dim); letter-spacing: 0.04em;
    width: 22px; flex-shrink: 0; text-align: right;
}
.med-viz-safe-pair .vz-track {
    flex: 1; height: 5px;
    background: rgba(255,255,255,0.05);
    border-radius: 2px; overflow: hidden;
}
.med-viz-safe-pair .vz-fill {
    height: 100%; border-radius: 2px;
}
.med-viz-safe-pair .vz-fill.vz-pos { background: var(--positive); }
.med-viz-safe-pair .vz-fill.vz-neg { background: var(--negative); }
.med-viz-safe-pair .vz-down-bar {
    background: var(--negative); opacity: 0.7;
}

/* Chaos — 2D scatter: x = vol, y = sharpe.
   Upper-right quadrant is the "thrive" zone (high vol × high sharpe) —
   given a faint amber wash so the dot's position vs the favourable region
   is obvious without legend. Axes are visibly drawn (not faint grid). */
.med-viz-scatter {
    border-left: 1.5px solid rgba(255,255,255,0.20);
    border-bottom: 1.5px solid rgba(255,255,255,0.20);
    box-sizing: border-box;
    padding: 2px;
}
.med-viz-scatter .vz-quadrant-thrive {
    position: absolute;
    left: 50%; right: 0; top: 0; height: 50%;
    background: rgba(255, 154, 60, 0.08);
}
.med-viz-scatter .vz-grid-x,
.med-viz-scatter .vz-grid-y {
    position: absolute; background: rgba(255,255,255,0.12);
}
.med-viz-scatter .vz-grid-x {
    left: 0; right: 0; top: 50%; height: 1px;
}
.med-viz-scatter .vz-grid-y {
    top: 0; bottom: 0; left: 50%; width: 1px;
}
.med-viz-scatter .vz-dot {
    position: absolute;
    width: 9px; height: 9px;
    transform: translate(-50%, 50%);
    border-radius: 50%;
    background: #ff9a3c;
    box-shadow: 0 0 10px rgba(255, 154, 60, 0.65);
    z-index: 2;
}
.med-viz-scatter .vz-axis-label {
    position: absolute; font-size: 8px;
    color: var(--text-muted); font-weight: 700;
    letter-spacing: 0.04em;
}
.med-viz-scatter .vz-axis-x { right: 0; bottom: -11px; }
.med-viz-scatter .vz-axis-y { left: -2px; top: -10px; }

/* Bounce — SVG recovery arc on top, axis labels in a separate row below
   the arc with explicit gap. Labels living inside the SVG were clipping at
   the left edge and felt glued to the line. */
.med-viz-arc {
    display: flex; flex-direction: column;
    gap: 6px;
}
.med-viz-arc svg {
    width: 100%; height: auto; display: block;
}
.med-viz-arc .arc-labels {
    display: flex; justify-content: space-between;
    font-size: 10px; font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
/* Highlight — full-width stripe (no boxed sub-card), horizontal layout.
   Value (big, left) anchors the eye; label + desc stack on the right as
   small text. The stripe pushes to card-bottom (margin-top: auto) so cards
   with different quote lengths still align their highlights horizontally
   across a carousel row. */
/* Single-line stripe — label (left) + value (right). Direct child of
   .med-card (flex-column), so it stretches to full card width by default;
   negative margin extends the band to card edges past the card's padding. */
.med-card-highlight {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    margin: 0 -16px;
    margin-top: auto;
    padding: 12px 16px;
    background: linear-gradient(180deg,
        rgba(var(--b2-rgb), 0.11) 0%,
        rgba(var(--b2-rgb), 0.05) 100%);
}
.med-card-highlight .hl-label {
    /* Sentence-case conversational tone (like "How it trades" pattern from
       the detail panel) — friendlier than UPPERCASE eyebrow. */
    font-size: 12px; font-weight: 600;
    color: var(--b2-soft);
    line-height: 1.2;
    flex-shrink: 1;
    min-width: 0;
}
.med-card-highlight .hl-value {
    font-size: 18px; font-weight: 800;
    color: var(--b2-soft);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: right;
    flex-shrink: 0;
}
.med-card-highlight .hl-value.tone-pos { color: var(--positive); }
.med-card-highlight .hl-value.tone-neg { color: var(--negative); }
/* Connector arrow inside Bounce value — visually softer than the numbers
   it links, so the two values read as the focal points. */
.med-card-highlight .hl-arrow {
    display: inline-block;
    font-weight: 400;
    opacity: 0.5;
    margin: 0 4px;
    font-size: 0.8em;
}

/* Position summary */
.pos-summary {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600;
}
.pos-long { color: var(--positive); }
.pos-short { color: var(--negative); }
.pos-flat { color: var(--text-dim); }

/* ── Category Showcase Card ── */
.cat-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.cat-showcase-card {
    border-radius: 16px; padding: 16px;
    cursor: pointer;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 40%),
        rgba(255,255,255,0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    border-top-color: rgba(255,255,255,0.18);
    border-left-color: rgba(255,255,255,0.12);
    box-shadow:
        0 4px 16px rgba(0,0,0,0.25),
        0 1px 0 rgba(255,255,255,0.08) inset;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    display: flex; flex-direction: column; gap: 8px;
}
.cat-showcase-card:hover {
    border-color: rgba(255,255,255,0.14);
    border-top-color: rgba(255,255,255,0.25);
    box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.12) inset;
    /* No translate on hover — native title tooltips don't follow card movement. */
}
/* Compact category eyebrow — icon + name in a single small line.
   Replaces the old large header + faint description (which took ~⅓ of card
   for context, leaving the ego itself too small). Cat description moves
   into the eyebrow's title tooltip. */
.cat-showcase-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.06em;
    cursor: help;
}
.cat-showcase-cat-icon { font-size: 14px; }
.cat-showcase-cat-name { color: var(--b2-soft); }

/* Ego section gets the bulk of the card — nickname prominent (16px),
   score next to it, id and quote below. */
.cat-showcase-ego {
    display: flex; flex-direction: column; gap: 4px;
    margin-bottom: 4px;
}
.cat-showcase-ego-name {
    font-size: 16px; font-weight: 800; color: #fff;
    display: inline-flex; align-items: baseline; gap: 8px;
    line-height: 1.2;
}
.cat-showcase-ego-score {
    font-size: 16px; font-weight: 800;
    color: var(--b2-soft);
    text-shadow: 0 0 8px rgba(var(--b2-rgb), 0.30);
    font-variant-numeric: tabular-nums;
}
.cat-showcase-ego-id {
    font-size: 11px; color: var(--text-muted);
    font-family: 'Inter', monospace;
    font-weight: 500;
}
.cat-showcase-ego-quote {
    font-size: 12px; color: var(--text-primary);
    line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Category score distribution — small horizontal viz showing where each ego
   in the category sits on the 0-10 score scale. Champion marker is enlarged
   + B2-soft glow; non-champions are dim dots; avg is a faint vertical line. */
.cat-showcase-distribution {
    /* Push to card bottom so cards in the grid align their distribution viz
       horizontally regardless of how long each ego's quote runs. */
    margin-top: auto;
    padding-top: 8px;
    display: flex; flex-direction: column; gap: 4px;
}
.cat-dist-caption {
    font-size: 10px; font-weight: 500;
    color: var(--text-dim);
}
.cat-dist-track {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.05);
}
.cat-dist-scale {
    position: relative;
    display: flex; justify-content: space-between;
    font-size: 8px; color: var(--text-dim);
    font-family: 'Inter', monospace; font-weight: 600;
    min-height: 11px;
}
.cat-dist-scale-avg {
    position: absolute;
    transform: translateX(-50%);
    font-size: 9px;
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    white-space: nowrap;
}
/* Evaluation label — structural read of the champion's position vs peers.
   No detail numbers — viz already shows the spread. */
.cat-dist-eval {
    font-size: 11px; font-weight: 700;
    color: var(--b2-soft);
    margin-top: 4px;
    letter-spacing: 0.01em;
}
.cat-dist-marker {
    position: absolute; top: 50%;
    transform: translate(-50%, -50%);
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--text-dim);
}
.cat-dist-marker.cat-dist-champion {
    width: 10px; height: 10px;
    background: var(--b2-soft);
    box-shadow: 0 0 8px rgba(var(--b2-rgb), 0.60);
    z-index: 2;
}
/* Dashed line + matching "avg X.X" label below = category average reference.
   Distinct visual from the solid bar background so the line reads as a
   reference marker, not a divider. */
.cat-dist-avg {
    position: absolute; top: -3px; bottom: -3px;
    width: 0;
    border-left: 1px dashed rgba(255,255,255,0.45);
}
.cat-dist-footer {
    font-size: 10px; color: var(--text-dim); font-weight: 500;
}

/* ── Tags ── */
.tag {
    font-size: 10px; padding: 2px 7px; border-radius: 5px;
    background: rgba(var(--b2-rgb), 0.08); color: var(--b2-soft);
    font-weight: 500; white-space: nowrap;
    opacity: 0.85;
}

/* ── Browse Section — soft B2 azure wash distinguishes from Featured above.
       Negative margin pulls bg to viewport edges; matched padding restores content alignment.
       (Avoids absolute ::before with negative offsets — that overflows the layout box.) ── */
.browse-section {
    position: relative; z-index: 1;
    margin: 32px -24px 0;
    padding: 36px 24px 0;
    background: linear-gradient(
        180deg,
        rgba(var(--b2-rgb), 0.06) 0%,
        rgba(var(--b2-rgb), 0.02) 45%,
        rgba(255, 255, 255, 0) 100%);
    background-size: 100% 220px;
    background-repeat: no-repeat;
}
.browse-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px; flex-wrap: wrap;
}
.browse-header .section-heading { margin-bottom: 0; }
.browse-count {
    font-size: 12px; font-weight: 600;
    color: var(--text-dim);
    text-shadow: none;
}
.browse-filters {
    display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap;
}
/* Egos filters/pills — visually matched to agents.css .pill (B2 azure active state) */
.filter-chip {
    padding: 5px 12px; font-size: 11px; border-radius: 16px;
    cursor: pointer; font-weight: 600;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-dim);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    transition: all 0.15s;
}
.filter-chip:hover {
    background: rgba(255,255,255,0.08); color: var(--text-muted);
    border-color: rgba(255,255,255,0.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 6px rgba(0,0,0,0.15);
}
/* Active — luminous B2 azure gradient (matches agents .pill.active) */
.filter-chip.chip-active {
    background: linear-gradient(180deg, rgba(var(--b2-rgb),0.25) 0%, rgba(var(--b2-rgb),0.10) 100%);
    color: var(--b2-soft);
    border-color: rgba(var(--b2-rgb),0.35);
    border-top-color: rgba(var(--b2-rgb),0.50);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 2px 8px rgba(var(--b2-rgb),0.14);
}

.sort-pills { display: flex; gap: 6px; margin-left: auto; }
.pill {
    padding: 5px 14px; font-size: 12px; border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08); cursor: pointer; font-weight: 500;
    background: rgba(255,255,255,0.04); color: var(--text-dim);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    transition: all 0.15s;
}
.pill:hover {
    background: rgba(255,255,255,0.08); color: var(--text-muted);
    border-color: rgba(255,255,255,0.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 6px rgba(0,0,0,0.15);
}
/* Active — luminous B2 azure gradient (matches agents .pill.active) */
.pill.active {
    background: linear-gradient(180deg, rgba(var(--b2-rgb),0.25) 0%, rgba(var(--b2-rgb),0.10) 100%);
    color: var(--b2-soft);
    border-color: rgba(var(--b2-rgb),0.35);
    border-top-color: rgba(var(--b2-rgb),0.50);
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 2px 8px rgba(var(--b2-rgb),0.14);
}

/* ── Browse Grid Cards (improved profile cards) ── */
.ego-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

/* Glass — matches portfolio cockpit-section / kpi-card pattern (B2 azure tinted) */
.ego-card {
    border-radius: 16px; padding: 16px;
    cursor: pointer;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 45%),
        linear-gradient(180deg, rgba(var(--cockpit-accent-rgb), 0.09) 0%, rgba(var(--cockpit-accent-rgb), 0.03) 100%);
    border: 1px solid rgba(var(--cockpit-accent-rgb), 0.14);
    border-top-color: rgba(255,255,255,0.10);
    border-left-color: rgba(255,255,255,0.08);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.09),
        0 4px 16px rgba(0,0,0,0.22);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, transform 0.2s ease;
    display: flex; flex-direction: column; gap: 10px;
    position: relative;
}
.ego-card:hover {
    border-color: rgba(var(--cockpit-accent-rgb), 0.26);
    border-top-color: rgba(255,255,255,0.16);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 45%),
        linear-gradient(180deg, rgba(var(--cockpit-accent-rgb), 0.13) 0%, rgba(var(--cockpit-accent-rgb), 0.04) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 10px 28px rgba(0,0,0,0.30),
        0 0 16px rgba(var(--cockpit-accent-rgb), 0.08);
    /* No translate — preserve tooltip hover state */
}

/* Browse card — vertical layout: header (rank + score), body (full name + id),
   bars (full-width), footer. Name no longer truncated; identity gets its own
   row so long Korean+English nicknames render legibly. */
.ego-card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
}
.ego-card-body {
    display: flex; flex-direction: column; gap: 2px;
}
.ego-card-rank {
    font-size: 16px; font-weight: 800;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0; line-height: 1;
}
.ego-card-rank.rank-top { color: var(--b2-soft); }
.ego-card-rank.rank-top-1 { font-size: 22px; text-shadow: 0 0 12px rgba(var(--b2-rgb), 0.50); }
.ego-card-rank.rank-top-2 { font-size: 18px; text-shadow: 0 0 8px rgba(var(--b2-rgb), 0.30); }
.ego-card-rank.rank-top-3 { font-size: 17px; }
.ego-card-rank.rank-rest { opacity: 0.55; }
.ego-card-name {
    font-size: 14px; font-weight: 700; color: #fff; line-height: 1.3;
    /* No truncation — identity is in its own block row, so multi-line names
       (Korean + English translations) render fully. */
}
.ego-card-id { font-size: 11px; color: var(--text-muted); font-family: 'Inter', monospace; font-weight: 500; }
.ego-card-score-group {
    flex-shrink: 0;
    display: flex; flex-direction: column;
    align-items: flex-end; gap: 1px;
}
.ego-card-score-label {
    font-size: 9px; font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.ego-card-score-val {
    font-size: 16px; font-weight: 800;
    color: var(--b2-soft);
    text-shadow: 0 0 8px rgba(var(--b2-rgb), 0.30);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.ego-card-score-val.tone-pos { color: var(--positive); text-shadow: 0 0 8px rgba(var(--positive-rgb), 0.30); }
.ego-card-score-val.tone-neg { color: var(--negative); text-shadow: 0 0 8px rgba(var(--negative-rgb), 0.30); }
.ego-card-radar {
    width: 68px; height: 68px; flex-shrink: 0;
}

/* Browse card — 4-factor bars (small-multiples).
   Full-width row in the new vertical card layout — longer tracks read values
   at a glance better than the previous 72px right-rail. */
.ego-card-bars {
    display: flex; flex-direction: column; gap: 4px;
    justify-content: center;
}
.ego-card-bars .ec-bar-row {
    display: flex; align-items: center; gap: 4px;
}
.ego-card-bars .ec-bar-label {
    font-size: 9px; font-weight: 700;
    color: var(--text-dim);
    width: 36px; flex-shrink: 0;
    letter-spacing: 0.02em;
}
.ego-card-bars .ec-bar-track {
    flex: 1; height: 5px; border-radius: 2px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
.ego-card-bars .ec-bar-fill {
    height: 100%;
    background: var(--b2-soft);
    box-shadow: 0 0 6px rgba(var(--b2-rgb), 0.30);
    border-radius: 2px;
}

.ego-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,0.04);
    padding-top: 10px; margin-top: auto;
    font-size: 11px; color: var(--text-dim);
}
.ego-card-agents {
    display: flex; align-items: center; gap: 6px;
}
.agent-coin-icon {
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 8px; font-weight: 700; color: var(--text-muted);
}
.ego-card-alive {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 500;
}

/* Alive indicator stripe on card left */
.ego-card::before {
    content: ''; position: absolute;
    left: 0; top: 16px; bottom: 16px; width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--text-dim);
    opacity: 0.3;
    transition: background 0.3s, opacity 0.3s;
}
.ego-card.card-alive::before {
    background: var(--positive);
    opacity: 1;
    box-shadow: 0 0 8px rgba(var(--positive-rgb),0.4);
}

/* ── Detail Panel ── */
.ego-panel {
    position: fixed; top: 48px; right: 0; bottom: 0;
    width: min(720px, 100vw - 72px);
    background: var(--bg-dark);
    border-left: 1px solid var(--border);
    z-index: 200;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.ego-panel.open { transform: translateX(0); }

.ego-overlay {
    position: fixed; inset: 0; top: 48px;
    background: rgba(0,0,0,0.4);
    z-index: 190;
}
.ego-overlay.hidden { display: none; }

/* Panel Banner */
.panel-banner {
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
    position: sticky; top: 0; z-index: 1;
}
.panel-back {
    background: none; border: none; cursor: pointer;
    color: var(--text-dim); font-size: 12px; font-weight: 600;
    margin-bottom: 10px; padding: 0;
    transition: color 0.15s;
}
.panel-back:hover { color: var(--accent); }

.banner-content {
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 8px;
}
.banner-icon { font-size: 32px; flex-shrink: 0; margin-top: 2px; }
.banner-info { flex: 1; min-width: 0; }
.banner-name { font-size: 18px; font-weight: 800; color: #fff; }
.banner-id { font-size: 11px; color: var(--text-dim); font-family: 'Inter', monospace; margin-top: 1px; }
.banner-quote {
    font-size: 14px; color: var(--text-primary); font-style: italic;
    font-weight: 500; line-height: 1.6; margin-top: 6px;
}
.panel-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.panel-tag {
    font-size: 11px; padding: 2px 8px; border-radius: 4px;
    background: rgba(var(--b2-rgb), 0.10); color: var(--b2-soft);
    font-weight: 500;
}

/* Panel Narrative — story first */
.panel-narrative {
    padding: 16px 20px;
    display: flex; flex-direction: column; gap: 12px;
}
.panel-info-card {
    display: flex; align-items: flex-start; gap: 10px;
    border-radius: 10px; padding: 14px 16px;
}
.panel-info-icon {
    flex-shrink: 0; margin-top: 1px;
    font-size: 18px; color: var(--b2-soft);
}
.info-strategy {
    background: rgba(var(--b2-rgb), 0.06);
    border-left: 3px solid rgba(var(--b2-rgb), 0.45);
}
.info-market {
    background: rgba(var(--narrative-warm-rgb), 0.06);
    border-left: 3px solid rgba(var(--narrative-warm-rgb), 0.45);
}
.info-market .panel-info-icon { color: var(--narrative-warm); }
.panel-info-label {
    font-size: 10px; text-transform: uppercase; font-weight: 700;
    color: var(--text-dim); margin-bottom: 3px; letter-spacing: 0.04em;
}
.panel-info-val { font-size: 13px; color: var(--text-primary); font-weight: 500; line-height: 1.6; }

/* Timeline row */
.panel-timeline {
    display: flex; align-items: center; gap: 16px;
    padding: 10px 16px; border-radius: 10px;
    background: rgba(var(--b2-rgb), 0.05);
    font-size: 12px; color: var(--text-muted); font-weight: 500;
}
.timeline-item {
    display: flex; align-items: center; gap: 5px;
}
.timeline-icon { font-size: 16px; color: var(--text-dim); }
.timeline-val { color: #fff; font-weight: 700; }

/* Panel Split */
.panel-split {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0;
}
.panel-left {
    padding: 16px;
    border-right: 1px solid var(--border);
}
.panel-right {
    padding: 16px;
}

/* Panel sections */
.panel-section {
    background: rgba(var(--b2-rgb), 0.04); border-radius: 10px;
    padding: 14px; margin-bottom: 14px;
}
.panel-section-title {
    font-size: 10px; text-transform: uppercase; font-weight: 700;
    color: var(--text-dim); margin-bottom: 8px;
}

.panel-radar-wrap {
    width: 100%; max-width: 240px; aspect-ratio: 1; margin: 0 auto 6px;
}
.panel-radar-stats {
    display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
}
.radar-stat-item {
    flex: 0 0 calc(33.333% - 3px);
    text-align: center; padding: 4px;
    background: rgba(var(--b2-rgb), 0.06); border-radius: 6px;
}
.radar-stat-label { font-size: 9px; color: var(--text-muted); font-weight: 700; }
.radar-stat-val { font-size: 12px; color: var(--b2-soft); font-weight: 600; }

.panel-perf-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.perf-box {
    background: rgba(var(--b2-rgb), 0.06); border-radius: 8px;
    padding: 8px 6px; text-align: center;
}
.perf-label { font-size: 9px; color: var(--text-muted); font-weight: 700; }
.perf-val { font-size: 14px; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Panel return chart */
.panel-return-chart-wrap { position: relative; height: 180px; }

/* Panel agents list */
.panel-module-list {
    max-height: 280px;
    overflow-y: auto;
}
.panel-module-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; font-size: 13px; border-radius: 6px;
}
.panel-module-row:nth-child(even) { background: rgba(var(--b2-rgb), 0.05); }
.module-left { display: flex; align-items: center; gap: 8px; }
.module-coin { font-family: 'Inter', monospace; font-weight: 600; color: #fff; width: 48px; }
.module-score { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.module-tier { font-size: 10px; padding: 1px 6px; border-radius: 4px; }
.module-tier.tier-major { background: rgba(var(--tier-major-rgb), 0.15); color: var(--tier-major); }
.module-tier.tier-minor { background: rgba(var(--tier-minor-rgb), 0.15); color: var(--tier-minor); }
.module-tier.tier-bench { background: rgba(var(--tier-bench-rgb), 0.15); color: var(--tier-bench); }
.module-pnl { font-weight: 600; font-variant-numeric: tabular-nums; }

.panel-agents-cta {
    display: flex; align-items: center; justify-content: center;
    margin-top: 10px; padding: 8px;
    font-size: 12px; font-weight: 600; color: var(--b2-soft);
    border-radius: 8px; background: rgba(var(--b2-rgb), 0.07);
    text-decoration: none; transition: background 0.15s;
}
.panel-agents-cta:hover { background: rgba(var(--b2-rgb), 0.14); }

.tone-pos { color: var(--positive); }
.tone-neg { color: var(--negative); }
.tone-flat { color: var(--text-dim); }

/* ── States ── */
.empty-state, .loading-state {
    display: flex; align-items: center; justify-content: center;
    min-height: 200px;
    color: var(--text-dim); font-size: 14px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .sidebar { display: none; }
    .bottom-nav { display: flex; }
    .page-content { margin-left: 0; padding: 12px 14px 80px; }
    .hide-mobile { display: none; }
    .hero-card { flex: 0 0 280px; }
    .med-card { flex: 0 0 220px; }
    .ego-grid { grid-template-columns: 1fr; }
    .cat-showcase-grid { grid-template-columns: 1fr 1fr; }
    .ego-panel { width: 100%; }
    .panel-split { grid-template-columns: 1fr; }
    .panel-left { border-right: none; border-bottom: 1px solid var(--border); }
    .browse-section { margin: 32px -14px 0; padding: 36px 14px 0; }
    .browse-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .sort-pills { margin-left: 0; }
}

@media (max-width: 480px) {
    .cat-showcase-grid { grid-template-columns: 1fr; }
}