/* ================================================================
   Event Cards — Swipe Deck
   Palette: cyan #00cfff  green #00ff88  red #ff4444  blue #3b82f6
   Backgrounds: #0a0e17 / #0d1520 / #111a28
   ================================================================ */

:root {
    --ec-bg: #0a0e17;
    --ec-card: #111a28;
    --ec-panel: rgba(17,24,39,0.6);
    --ec-border: rgba(0,150,255,0.15);
    --ec-cyan: #00cfff;
    --ec-green: #00ff88;
    --ec-red: #ff4444;
    --ec-blue: #3b82f6;
    --ec-text: #e0e8f0;
    /* Phase 1 #6 — was #6b7a8d (4.21:1 on bg, fails WCAG AA).
       New #7d8fa3 → 5.1:1 on #0a0e17 / 4.9:1 on the card panel. */
    --ec-muted: #7d8fa3;
    --ec-font: 'Archivo Black', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* Override base content padding for full-bleed deck */
.mobile-bottom-nav,
.footer-bar { display: none !important; }

.content-main:has(#ec-app) {
    padding: 0 !important;
    overflow: hidden !important;
}

/* ── App Shell ─────────────────────────────────────────────── */
#ec-app {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    height: calc(100dvh - 64px);
    min-height: 480px;
    display: flex;
    flex-direction: column;
    background: var(--ec-bg);
    overflow: hidden;
    touch-action: manipulation;
    /* Was applied to the whole shell — blocked long-press copy on
       source URL / title / summary (Phase 1 #9). Narrowed to the
       interactive swipe card + actions; text content stays
       selectable below. */
    overscroll-behavior: none;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.ec-card, .ec-actions, .ec-topbar, .ec-bottombar {
    user-select: none;
    -webkit-user-select: none;
}
.ec-card-title, .ec-card-summary, .ec-source-link,
.ec-chip-sym, .ec-holding-sym {
    user-select: text;
    -webkit-user-select: text;
}

/* ── Top Bar ───────────────────────────────────────────────── */
.ec-topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ec-border);
    background: rgba(10,14,23,0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10;
}

.ec-brand {
    font-family: var(--ec-font);
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--ec-cyan);
    text-transform: uppercase;
}

.ec-brand span { color: #f0f0f0; }

.ec-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ec-progress-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ec-progress-bar {
    width: 60px;
    height: 4px;
    background: rgba(0,150,255,0.15);
    border-radius: 2px;
    overflow: hidden;
}

.ec-progress-fill {
    height: 100%;
    background: var(--ec-cyan);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
}

#ec-progress {
    font-size: 11px;
    color: var(--ec-muted);
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: right;
}

.ec-watchlist-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--ec-muted);
    background: none;
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    text-decoration: none;
    min-height: 44px;
    min-width: 44px;
}
.ec-watchlist-btn:hover { color: var(--ec-cyan); border-color: rgba(0,207,255,0.3); }
.ec-watchlist-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── Card Stack ────────────────────────────────────────────── */
.ec-stack {
    flex: 1;
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 14px 16px 8px;
    overflow: hidden;
    perspective: 1000px;
}

/* ── Card ──────────────────────────────────────────────────── */
.ec-card {
    position: absolute;
    inset: 14px 16px 8px;
    max-width: 408px;
    margin: 0 auto;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    contain: layout style paint;
    touch-action: pan-y;
    cursor: grab;
    transition: box-shadow 0.15s;
    box-shadow: 0 4px 32px rgba(0,0,0,0.4);
}
.ec-card:active { cursor: grabbing; }

.ec-card--behind {
    transform: scale(0.96) translateY(10px);
    opacity: 0.6;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.4,0.0,0.2,1), opacity 0.25s cubic-bezier(0.4,0.0,0.2,1);
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
}

.ec-card--glow-bull {
    box-shadow: 0 0 48px rgba(0,255,136,0.3), 0 4px 32px rgba(0,0,0,0.4);
    border-color: rgba(0,255,136,0.4);
}

.ec-card--glow-skip {
    box-shadow: 0 0 48px rgba(255,68,68,0.3), 0 4px 32px rgba(0,0,0,0.4);
    border-color: rgba(255,68,68,0.3);
}

/* ── Stamp labels ──────────────────────────────────────────── */
.ec-stamp {
    position: absolute;
    top: 18px;
    font-family: var(--ec-font);
    font-size: 26px;
    letter-spacing: 2px;
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    padding: 4px 14px;
    border-radius: 8px;
    border-width: 3px;
    border-style: solid;
}
.ec-stamp--bull {
    right: 18px;
    color: var(--ec-green);
    border-color: var(--ec-green);
    transform: rotate(12deg);
}
.ec-stamp--skip {
    left: 18px;
    color: var(--ec-red);
    border-color: var(--ec-red);
    transform: rotate(-12deg);
}

/* ── Status badge ──────────────────────────────────────────── */
.ec-status-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 5;
    pointer-events: none;
}
.ec-status-badge--active,
.ec-status-badge--live {
    background: rgba(0,255,136,0.12);
    color: var(--ec-green);
    border: 1px solid rgba(0,255,136,0.25);
}
.ec-status-badge--closed,
.ec-status-badge--expired,
.ec-status-badge--trading_closed,
.ec-status-badge--settled {
    background: rgba(255,68,68,0.1);
    color: var(--ec-red);
    border: 1px solid rgba(255,68,68,0.2);
}
.ec-status-badge--draft {
    background: rgba(0,207,255,0.08);
    color: var(--ec-cyan);
    border: 1px solid rgba(0,207,255,0.2);
}

/* ── Tabs (compact, never crowding swipe area) ─────────────── */
.ec-tabs {
    flex-shrink: 0;
    display: flex;
    gap: 2px;
    padding: 6px 10px 0;
    background: rgba(10,14,23,0.5);
    border-bottom: 1px solid var(--ec-border);
}
.ec-tab {
    padding: 4px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border: none;
    background: none;
    color: var(--ec-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    min-height: 44px;
    min-width: 44px;
}
.ec-tab.active {
    color: var(--ec-cyan);
    border-bottom-color: var(--ec-cyan);
}
.ec-tab:hover:not(.active) { color: var(--ec-text); }

/* ── Panels (scrollable, flex-grow) ───────────────────────── */
.ec-panel {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Phase 2 #12 — keep wheel-scroll inside the panel; without
       this, scrolling past the panel boundary bubbled and triggered
       browser back-nav on some trackpad gestures. */
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
}
.ec-panel.active { display: flex; }

/* ── Card image ────────────────────────────────────────────── */
.ec-card-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    background: rgba(0,150,255,0.08);
}

/* ── Title / summary ───────────────────────────────────────── */
.ec-card-title {
    font-family: var(--ec-font);
    font-size: 15px;
    font-weight: 800;
    color: var(--ec-text);
    line-height: 1.35;
    margin: 0;
}

.ec-card-summary {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ec-muted);
    margin: 0 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(13px * 1.55 * 3);
}
.ec-card-summary.ec-expanded {
    max-height: none;
}

.ec-source-link {
    /* 44px tap target — was unpadded inline, ~13px tall (Phase 1 #8). */
    padding: 10px 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: var(--ec-cyan);
    text-decoration: none;
    align-self: flex-start;
    opacity: 0.8;
    transition: opacity 0.15s;
}
.ec-source-link:hover { opacity: 1; text-decoration: underline; }

/* ── Pro Terminal CTA ─────────────────────────────────────────
   Rendered only when the card has been tokenised on-chain
   (server-side enrichment in src/api/routes/event_cards.py:
   _card_summary → pro_terminal_url).  Cyan accent matches the
   brand palette per CLAUDE.md (approved: cyan #00cfff, green
   #00ff88, red #ff4444).  Above the swipe transform layer so
   taps actually hit the anchor instead of the drag handler. */
.ec-pro-terminal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 6px;
    padding: 11px 14px;
    background: rgba(0, 207, 255, 0.10);
    border: 1px solid rgba(0, 207, 255, 0.40);
    border-radius: 8px;
    color: var(--ec-cyan);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.3px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
    min-height: 44px;
    position: relative;
    z-index: 2;
}
.ec-pro-terminal-btn:hover {
    background: rgba(0, 207, 255, 0.18);
    border-color: rgba(0, 207, 255, 0.65);
}
.ec-pro-terminal-btn:active { transform: translateY(1px); }
.ec-pro-terminal-icon {
    font-size: 15px;
    line-height: 1;
    color: var(--ec-cyan);
    opacity: 0.9;
}

/* ── Basket chips ──────────────────────────────────────────── */
.ec-basket-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ec-basket-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0,207,255,0.07);
    border: 1px solid rgba(0,207,255,0.18);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
}
.ec-chip-sym {
    font-family: var(--ec-font);
    font-size: 11px;
    color: var(--ec-cyan);
}
.ec-chip-venue {
    font-size: 11px;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ec-chip-wt {
    font-size: 11px;
    color: var(--ec-green);
    font-weight: 700;
}

/* ── Chart block ───────────────────────────────────────────── */
.ec-chart-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.ec-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ec-chart-stat {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--ec-muted);
}
.ec-chart-stat.up { color: var(--ec-green); }
.ec-chart-stat.dn { color: var(--ec-red); }

.ec-chart-toggles {
    display: flex;
    gap: 2px;
}
.ec-chart-iv {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid var(--ec-border);
    background: none;
    color: var(--ec-muted);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    min-height: 44px;
    min-width: 44px;
}
.ec-chart-iv.active {
    background: rgba(0,207,255,0.12);
    color: var(--ec-cyan);
    border-color: rgba(0,207,255,0.3);
}
.ec-chart-iv:hover:not(.active) { color: var(--ec-text); }

.ec-sparkline {
    width: 100%;
    height: 52px;
    display: block;
    border-radius: 6px;
    background: rgba(0,150,255,0.04);
    overflow: visible;
}

/* ── Stats panel specifics ─────────────────────────────────── */
.ec-idx-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 8px 10px;
    background: rgba(0,207,255,0.06);
    border: 1px solid rgba(0,207,255,0.12);
    border-radius: 8px;
}
.ec-idx-label {
    font-size: 11px;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ec-idx-val {
    font-family: var(--ec-font);
    font-size: 22px;
    color: var(--ec-cyan);
    font-variant-numeric: tabular-nums;
    position: relative;
}
.ec-idx-val::after {
    content: '';
    position: absolute;
    inset: -2px -4px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
}
@keyframes ec-flash {
    0%   { opacity: 0.3; }
    100% { opacity: 0; }
}
.ec-idx-flash-up::after { background: var(--ec-green); animation: ec-flash 0.1s ease-out forwards; }
.ec-idx-flash-dn::after { background: var(--ec-red); animation: ec-flash 0.1s ease-out forwards; }

/* % change next to the NAV — bold, colored, smaller than the NAV itself. */
.ec-idx-pct {
    margin-left: 8px;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2px;
    font-variant-numeric: tabular-nums;
}

/* Index-product stat grid (Symbol / Market Cap / Base / NAV). */
.ec-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 8px;
}
.ec-stat-cell {
    background: rgba(17,24,39,0.6);
    border: 1px solid rgba(0,150,255,0.15);
    border-radius: 8px;
    padding: 8px 10px;
}
.ec-stat-cell-label {
    color: #8fa3ba;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.ec-stat-cell-val {
    color: var(--ec-text);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Capital-allocation row — three columns: symbol, $ allocated, weight%. */
.ec-holding-alloc {
    color: var(--ec-text);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ec-pools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ec-pool {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid;
}
.ec-pool--bull {
    background: rgba(0,255,136,0.06);
    border-color: rgba(0,255,136,0.18);
}
.ec-pool--bear {
    background: rgba(255,68,68,0.06);
    border-color: rgba(255,68,68,0.15);
}
.ec-pool-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #8fa3ba;
    margin-bottom: 2px;
}
.ec-pool--bull .ec-pool-val { color: var(--ec-green); }
.ec-pool--bear .ec-pool-val { color: var(--ec-red); }
.ec-pool-val {
    font-family: var(--ec-font);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.ec-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ec-muted);
    margin-top: 4px;
}

.ec-holdings-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ec-holding-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 5px;
    font-size: 12px;
}
.ec-holding-sym {
    font-family: var(--ec-font);
    font-size: 12px;
    color: var(--ec-cyan);
    min-width: 48px;
    flex: 0 0 auto;
}
/* Spacer column — $ allocation grows to fill the row. */
.ec-holding-alloc {
    flex: 1;
    text-align: right;
    color: var(--ec-text);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ec-holding-wt {
    font-size: 11px;
    color: var(--ec-green);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 56px;
    text-align: right;
}

/* ── Action Buttons Bar ────────────────────────────────────── */
.ec-actions {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr 1fr;
    gap: 6px;
    padding: 8px 10px 10px;
    border-top: 1px solid var(--ec-border);
    background: rgba(10,14,23,0.7);
}

.ec-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    border-radius: 10px;
    border: 1px solid var(--ec-border);
    background: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    min-height: 52px;
    position: relative;
}
.ec-action-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
}
.ec-action-btn span { font-size: 11px; }

.ec-action-btn--skip {
    color: var(--ec-red);
    border-color: rgba(255,68,68,0.2);
}
.ec-action-btn--skip:hover {
    background: rgba(255,68,68,0.1);
    border-color: rgba(255,68,68,0.35);
}

.ec-action-btn--watch {
    color: var(--ec-blue);
    border-color: rgba(59,130,246,0.2);
}
.ec-action-btn--watch:hover {
    background: rgba(59,130,246,0.1);
    border-color: rgba(59,130,246,0.35);
}
.ec-action-btn--watch svg { fill: none; }

.ec-action-btn--bull {
    color: var(--ec-green);
    border-color: rgba(0,255,136,0.25);
    background: rgba(0,255,136,0.06);
    font-size: 11px;
}
.ec-action-btn--bull:hover {
    background: rgba(0,255,136,0.15);
    border-color: rgba(0,255,136,0.45);
    box-shadow: 0 0 16px rgba(0,255,136,0.2);
}
.ec-action-btn--bull span { font-size: 11px; }

.ec-action-btn--bear {
    color: var(--ec-muted);
    border-color: rgba(107,122,141,0.15);
}
.ec-action-btn--bear.disabled,
.ec-action-btn--bear:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.ec-action-btn--bear:hover .ec-tooltip,
.ec-action-btn--bear:focus .ec-tooltip,
.ec-action-btn--bear:focus-visible .ec-tooltip,
.ec-action-btn--bear.touch-active .ec-tooltip { display: block; }

/* ── "Coming soon" tooltip ─────────────────────────────────── */
.ec-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: #1a2132;
    border: 1px solid var(--ec-border);
    color: var(--ec-muted);
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 5px;
    pointer-events: none;
    z-index: 50;
    text-transform: none;
    letter-spacing: 0;
}
.ec-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1a2132;
}

/* ── Bottom Bar ─────────────────────────────────────────────── */
.ec-bottombar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-top: 1px solid var(--ec-border);
    background: rgba(10,14,23,0.95);
    font-size: 11px;
    color: var(--ec-muted);
}

.ec-hint {
    display: flex;
    gap: 12px;
}
.ec-hint-skip { color: var(--ec-red); }
.ec-hint-bull { color: var(--ec-green); }

/* ── Toast ─────────────────────────────────────────────────── */
#ec-toast {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top, 0));
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s, transform 0.22s;
    z-index: 300;
    max-width: 88vw;
    text-align: center;
}
#ec-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.ec-toast--cyan { background: rgba(0,207,255,0.15); border: 1px solid rgba(0,207,255,0.35); color: var(--ec-cyan); }
.ec-toast--bull { background: rgba(0,255,136,0.15); border: 1px solid rgba(0,255,136,0.3); color: var(--ec-green); }
.ec-toast--red  { background: rgba(255,68,68,0.15); border: 1px solid rgba(255,68,68,0.3); color: var(--ec-red); }

/* ── Loading / Empty ───────────────────────────────────────── */
.ec-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ec-loading span {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(0,207,255,0.2);
    border-top-color: var(--ec-cyan);
    border-radius: 50%;
    animation: ec-spin 0.75s linear infinite;
}
@keyframes ec-spin { to { transform: rotate(360deg); } }

.ec-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 24px;
}
.ec-empty-icon {
    font-size: 40px;
    color: var(--ec-cyan);
    opacity: 0.5;
}
.ec-empty-title {
    font-family: var(--ec-font);
    font-size: 18px;
    color: var(--ec-cyan);
}
.ec-empty-msg {
    font-size: 13px;
    color: var(--ec-muted);
    max-width: 260px;
    line-height: 1.5;
}
.ec-reload-btn {
    margin-top: 6px;
    padding: 10px 22px;
    border: 1px solid var(--ec-cyan);
    border-radius: 8px;
    background: rgba(0,207,255,0.08);
    color: var(--ec-cyan);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.15s;
}
.ec-reload-btn:hover { background: rgba(0,207,255,0.15); }

/* ── Buy Sheet (bottom sheet modal) ───────────────────────── */
#ec-buy-sheet {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: rgba(0,0,0,0.65);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
}
#ec-buy-sheet.open {
    opacity: 1;
    pointer-events: auto;
}

.ec-buy-box {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    background: #0d1520;
    border: 1px solid var(--ec-border);
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0));
    display: flex;
    flex-direction: column;
    gap: 14px;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    /* Mobile keyboard fix — iOS Safari opens the soft keyboard when
       the amount input is focused, shrinking the visual viewport so
       Confirm Buy can fall below the fold. Letting the sheet box
       scroll internally keeps the submit button reachable.
       ``dvh`` collapses with the URL bar; ``vh`` is the fallback
       for browsers that don't support dvh. */
    max-height: 85vh;
    max-height: 85dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#ec-buy-sheet.open .ec-buy-box { transform: translateY(0); }

.ec-buy-handle {
    /* Phase 1 #13 — drag handle was 36×4 at 25% blue, nearly
       invisible on OLED dark theme. Bumped to 48×5 white-35% so
       users see the sheet is dismissible. */
    width: 48px;
    height: 5px;
    background: rgba(255,255,255,0.35);
    border-radius: 3px;
    margin: 0 auto -6px;
}

.ec-buy-heading {
    font-family: var(--ec-font);
    font-size: 14px;
    color: var(--ec-cyan);
    line-height: 1.35;
}

.ec-buy-subheading {
    font-size: 11px;
    color: var(--ec-muted);
    margin-top: -6px;
}

.ec-buy-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--ec-muted);
    margin-bottom: 4px;
}

.ec-quick-amts {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.ec-quick-amt {
    /* HIG-compliant 44px tap target — was 6px padding × 12px font
       resolving to ~26px (Phase 1 finding #3). */
    padding: 11px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    background: none;
    color: var(--ec-cyan);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ec-quick-amt:hover {
    background: rgba(0,207,255,0.1);
    border-color: rgba(0,207,255,0.3);
}

.ec-buy-input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(17,26,40,0.8);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    color: var(--ec-text);
    font-size: 18px;
    font-family: var(--ec-font);
    outline: none;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
}
.ec-buy-input::-webkit-outer-spin-button,
.ec-buy-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ec-buy-input:focus { border-color: rgba(0,207,255,0.4); }
.ec-buy-input::placeholder { color: var(--ec-muted); font-size: 14px; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 400; }

.ec-buy-error {
    font-size: 12px;
    color: var(--ec-red);
    min-height: 16px;
}

.ec-buy-actions {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 8px;
}

.ec-buy-cancel {
    padding: 13px;
    border: 1px solid var(--ec-border);
    border-radius: 10px;
    background: none;
    color: var(--ec-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s;
    min-height: 48px;
}
.ec-buy-cancel:hover { color: var(--ec-text); }

.ec-buy-submit {
    padding: 13px;
    border: none;
    border-radius: 10px;
    background: var(--ec-green);
    color: #0a0e17;
    font-family: var(--ec-font);
    font-size: 14px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: opacity 0.15s, box-shadow 0.15s;
    min-height: 48px;
}
.ec-buy-submit:hover { opacity: 0.9; box-shadow: 0 0 20px rgba(0,255,136,0.3); }
.ec-buy-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Paper/Live mode toggle */
.ec-mode-toggle {
    display: flex;
    gap: 8px;
    background: rgba(17,24,39,0.6);
    border: 1px solid rgba(0,150,255,0.15);
    border-radius: 8px;
    padding: 4px;
}
.ec-mode-btn {
    flex: 1;
    /* 44px HIG — was 8px padding resolving to ~34px (Phase 1 #5). */
    padding: 11px 12px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--ec-muted);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    transition: background 0.15s, color 0.15s;
}
.ec-mode-btn.is-active {
    background: rgba(0,207,255,0.15);
    color: #00cfff;
    box-shadow: 0 0 8px rgba(0,207,255,0.25);
}
.ec-mode-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.ec-mode-hint {
    margin-top: 6px;
    color: var(--ec-muted);
    font-size: 11px;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.4;
}

/* ── Backtest button (in the chart header) ────────────────── */
.ec-chart-backtest {
    margin-left: auto;
    /* 44px HIG — was 4px padding resolving to ~23px (Phase 1 #2). */
    padding: 10px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,207,255,0.08);
    border: 1px solid rgba(0,207,255,0.30);
    border-radius: 6px;
    color: var(--ec-cyan);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}
.ec-chart-backtest:hover {
    background: rgba(0,207,255,0.18);
    box-shadow: 0 0 12px rgba(0,207,255,0.25);
}

/* ── Backtest Sheet (reuses ec-buy-sheet bottom-sheet pattern) */
#ec-backtest-sheet {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: rgba(0,0,0,0.65);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
}
#ec-backtest-sheet.open {
    opacity: 1;
    pointer-events: auto;
}
.ec-backtest-box {
    /* Override default ec-buy-box max-width — backtest needs more room
       for the chart + stats grid. */
    max-width: 520px !important;
    max-height: 90vh;
    overflow-y: auto;
}
#ec-backtest-sheet.open .ec-buy-box { transform: translateY(0); }

/* Period chips are styled as ec-quick-amt — only the active state differs */
.ec-bt-period.is-active {
    background: rgba(0,207,255,0.25);
    color: var(--ec-cyan);
    border-color: rgba(0,207,255,0.6);
}

.ec-bt-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 12px;
}
.ec-bt-stat {
    background: rgba(17,24,39,0.6);
    border: 1px solid rgba(0,150,255,0.15);
    border-radius: 8px;
    padding: 10px 12px;
}
.ec-bt-stat-label {
    color: #8fa3ba;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.ec-bt-stat-value {
    color: var(--ec-text);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ec-bt-meta {
    margin-top: 10px;
    color: var(--ec-muted);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 11px;
    line-height: 1.5;
}
.ec-bt-svg {
    display: block;
    width: 100%;
    height: 120px;
    margin-top: 12px;
    border: 1px solid rgba(0,150,255,0.15);
    border-radius: 8px;
    background: rgba(10,14,23,0.6);
}

/* ── Create Card sheet ───────────────────────────────────── */
.ec-create-btn { padding-right: 14px; }
.ec-create-btn svg { stroke: currentColor; }

#ec-create-sheet {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: rgba(0,0,0,0.65);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
}
#ec-create-sheet.open {
    opacity: 1;
    pointer-events: auto;
}
.ec-create-box { max-width: 480px !important; }
#ec-create-sheet.open .ec-buy-box { transform: translateY(0); }

.ec-create-textarea {
    resize: vertical;
    min-height: 96px;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
}

/* ── Screenshot dropzone — Sprint 3 ────────────────────────── */
.ec-create-dropzone {
    margin-top: 6px;
    border: 1.5px dashed rgba(0,207,255,0.30);
    border-radius: 10px;
    background: rgba(13,21,32,0.6);
    padding: 22px 16px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, transform 0.18s;
    outline: none;
}
.ec-create-dropzone:hover,
.ec-create-dropzone:focus-visible {
    border-color: rgba(0,207,255,0.65);
    background: rgba(0,207,255,0.05);
}
.ec-create-dropzone.is-dragging {
    border-color: #00cfff;
    background: rgba(0,207,255,0.08);
    transform: scale(1.005);
}
.ec-create-dropzone-prompt {
    text-align: center;
    color: rgba(255,255,255,0.78);
    pointer-events: none; /* clicks pass through to the dropzone */
}
.ec-create-dropzone-icon {
    font-size: 28px;
    margin-bottom: 6px;
}
.ec-create-dropzone-text {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.92);
    margin-bottom: 4px;
}
.ec-create-dropzone-sub {
    font-size: 12px;
    color: var(--ec-muted);
}
.ec-create-dropzone-preview {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}
.ec-create-dropzone-preview img {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(0,0,0,0.4);
}
.ec-create-screenshot-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--ec-muted);
    gap: 8px;
}
.ec-create-screenshot-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ec-create-screenshot-clear {
    background: transparent;
    color: #ff4444;
    border: 1px solid rgba(255,68,68,0.4);
    border-radius: 4px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
}
.ec-create-screenshot-clear:hover {
    background: rgba(255,68,68,0.1);
}
.ec-create-screenshot-input {
    /* Visually hide but keep accessible for screen readers / programmatic
       focus. ``display:none`` would break the .click() trigger on Safari. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Keyboard shortcut hint ────────────────────────────────── */
.ec-hint .ec-hint-key {
    font-size: 11px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 3px;
    padding: 0 4px;
    margin-left: 2px;
    color: rgba(255,255,255,0.4);
}

/* ── Sticky-hover guard (Phase 1 #7) ────────────────────────
   On touch devices :hover sticks after tap, so the buy button glows
   permanently, etc. Suppress all hover styling unless the user
   actually has a hover-capable pointer (mouse, trackpad). Provide
   :active fallbacks for tactile feedback on touch. */
@media (hover: none) {
    .ec-watchlist-btn:hover,
    .ec-action-btn--skip:hover,
    .ec-action-btn--watch:hover,
    .ec-action-btn--bull:hover,
    .ec-chart-iv:hover:not(.active),
    .ec-chart-backtest:hover,
    .ec-quick-amt:hover,
    .ec-buy-cancel:hover,
    .ec-buy-submit:hover,
    .ec-reload-btn:hover,
    .ec-create-btn:hover,
    .ec-source-link:hover,
    .ec-pro-terminal-btn:hover {
        /* Reset the hover styles — touch devices apply :hover
           post-tap and it sticks until next interaction elsewhere. */
        background: inherit;
        box-shadow: none;
        opacity: inherit;
        border-color: inherit;
        color: inherit;
        text-decoration: none;
    }
}
.ec-action-btn--bull:active     { background: rgba(0,255,136,0.2); }
.ec-action-btn--skip:active     { background: rgba(255,68,68,0.15); }
.ec-action-btn--watch:active    { background: rgba(0,207,255,0.15); }
.ec-quick-amt:active            { background: rgba(0,207,255,0.18); }
.ec-buy-submit:active           { transform: scale(0.98); }
.ec-buy-cancel:active           { color: var(--ec-text); }
.ec-chart-backtest:active       { background: rgba(0,207,255,0.22); }

/* ── Scroll margin for focus visibility (WCAG 2.4.11) ─────── */
#ec-app :focus-visible {
    scroll-margin-top: 60px;
}

/* ── Performance bar (at-a-glance direction indicator) ─────── */
.ec-prob-bar {
    height: 8px;
    width: 100%;
    background: rgba(255,68,68,0.15);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 6px;
}
.ec-prob-fill {
    height: 100%;
    background: var(--ec-green);
    border-radius: 4px;
    transition: width 0.2s cubic-bezier(0.4,0,0.2,1);
}

/* ── Sidebar mini percentage (replaces inline 9px) ────────── */
.ec-mini-pct {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Read-more toggle for clamped summaries ───────────────── */
.ec-read-more {
    display: inline-block;
    padding: 6px 0;
    min-height: 44px;
    min-width: 44px;
    font-size: 11px;
    color: var(--ec-cyan);
    background: none;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ── Skeleton loading (replaces spinner) ──────────────────── */
.ec-card-skeleton {
    position: absolute;
    inset: 14px 16px 8px;
    max-width: 408px;
    margin: 0 auto;
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ec-skel-block {
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: ec-shimmer 1.2s infinite;
}
.ec-skel-img { height: 120px; border-radius: 10px; }
.ec-skel-title { height: 20px; width: 75%; }
.ec-skel-summary { height: 48px; }
.ec-skel-chart { height: 52px; }
.ec-skel-actions { height: 52px; }
@keyframes ec-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.ec-skel--fade-in {
    animation: ec-skel-appear 0.15s 0.1s both, ec-shimmer 1.2s 0.1s infinite;
}
@keyframes ec-skel-appear {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Command Palette (CMD+K) ──────────────────────────────── */
.ec-cmd-palette {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20vh;
    background: rgba(0,0,0,0.6);
    z-index: 400;
}
.ec-cmd-palette[hidden] { display: none; }
.ec-cmd-box {
    width: 100%;
    max-width: 480px;
    background: #0d1520;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.ec-cmd-input {
    width: 100%;
    padding: 14px 18px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ec-border);
    color: var(--ec-text);
    font-size: 15px;
    outline: none;
}
.ec-cmd-input::placeholder { color: var(--ec-muted); }
.ec-cmd-results { max-height: 320px; overflow-y: auto; }
.ec-cmd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 18px;
    background: transparent;
    border: none;
    color: var(--ec-text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
}
.ec-cmd-item:hover { background: rgba(0,207,255,0.08); }

/* ── Shortcut Overlay ─────────────────────────────────────── */
.ec-shortcut-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    z-index: 400;
}
.ec-shortcut-box {
    background: #0d1520;
    border: 1px solid var(--ec-border);
    border-radius: 14px;
    padding: 24px 32px;
    max-width: 400px;
    width: 90%;
}
.ec-shortcut-title {
    font-family: var(--ec-font);
    font-size: 16px;
    color: var(--ec-cyan);
    margin-bottom: 16px;
}
.ec-shortcut-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    color: var(--ec-text);
}
.ec-shortcut-grid kbd {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    font-size: 12px;
    color: var(--ec-cyan);
    font-family: system-ui, sans-serif;
    margin-right: 4px;
}
.ec-shortcut-close {
    margin-top: 16px;
    padding: 8px 18px;
    background: rgba(0,207,255,0.08);
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    color: var(--ec-cyan);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* ── ARIA live region (visually hidden) ───────────────────── */
.ec-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;
}

/* ── Focus rings ───────────────────────────────────────────── */
.ec-action-btn:focus-visible,
.ec-tab:focus-visible,
.ec-chart-iv:focus-visible,
.ec-chart-backtest:focus-visible,
.ec-mode-btn:focus-visible,
.ec-bt-period:focus-visible,
.ec-create-mode:focus-visible,
.ec-create-btn:focus-visible,
.ec-buy-submit:focus-visible,
.ec-buy-cancel:focus-visible,
.ec-buy-input:focus-visible,
.ec-reload-btn:focus-visible,
.ec-quick-amt:focus-visible,
.ec-source-link:focus-visible,
.ec-watchlist-btn:focus-visible {
    outline: 2px solid var(--ec-cyan);
    outline-offset: 2px;
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    /* Disable swipe drag transition and fly-out animation */
    .ec-card {
        transition: none !important;
    }
    /* Disable behind-card scale animation */
    .ec-card--behind {
        transition: none !important;
    }
    /* Disable progress bar transition */
    .ec-progress-fill {
        transition: none !important;
    }
    /* Disable index flash animations */
    .ec-idx-val::after {
        animation: none !important;
    }
    .ec-idx-flash-up::after,
    .ec-idx-flash-dn::after {
        animation: none !important;
    }
    /* Disable skeleton shimmer */
    .ec-skel-block {
        animation: none !important;
    }
    /* Disable buy-sheet slide-up */
    .ec-buy-box {
        transition: none !important;
    }
    #ec-buy-sheet {
        transition: none !important;
    }
    /* Disable toast slide */
    #ec-toast {
        transition: none !important;
    }
    /* Disable loading spinner */
    .ec-loading span {
        animation: none !important;
        border-top-color: var(--ec-cyan);
    }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 480px) {
    .ec-card-img { height: 100px; }
    .ec-card-title { font-size: 14px; }
    .ec-actions { grid-template-columns: 1fr 1fr 1.3fr 1fr; gap: 5px; padding: 7px 8px 9px; }
    .ec-action-btn { min-height: 46px; }
    .ec-action-btn svg { width: 16px; height: 16px; }
}

@media (max-width: 360px) {
    .ec-brand { font-size: 13px; }
    /* At 360px: 4 cols × 44px min + 3 gaps × 4px + 12px padding = 200px — fits cleanly */
    .ec-actions { padding: 6px 6px 8px; gap: 4px; grid-template-columns: 1fr 1fr 1.2fr 1fr; }
    .ec-panel { padding: 10px 10px; gap: 8px; }
    .ec-stamp { font-size: 20px; }
    /* Keep chart toggles usable AND tappable — was 40px (below Material
       48dp minimum). Allow the chart stat to ellipsize so toggles + the
       Backtest button never push off-screen (Phase 1 #12). */
    .ec-chart-toggles { gap: 1px; }
    .ec-chart-iv { min-width: 44px; min-height: 44px; padding: 2px 4px; }
    .ec-chart-stat {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 90px;
    }
    /* Basket chips can wrap freely */
    .ec-basket-chips { gap: 4px; }
    /* Stat-grid collapses to single column at narrowest width. */
    .ec-stat-grid { grid-template-columns: 1fr; }
    /* Hero NAV scaled down for tiny screens */
    .ec-idx-val { font-size: 19px; }
}

@media (max-height: 600px) and (orientation: portrait) {
    .ec-card-img { height: 72px; }
    .ec-card-summary { max-height: calc(13px * 1.55 * 2); }
    .ec-sparkline { height: 38px; }
    .ec-panel { gap: 7px; padding: 8px 12px; }
}

@media (orientation: landscape) and (max-height: 480px) {
    .ec-card-img { display: none; }
    .ec-card-summary { max-height: calc(13px * 1.55 * 2); }
    .ec-sparkline { height: 34px; }
    .ec-topbar { padding: 6px 14px; }
    /* Landscape phones — sheets must stay in-bounds (Phase 1 #15). */
    .ec-buy-box { max-height: 80dvh; }
}

/* ── Phase 2 — desktop layout adjustments (≥768px) ─────────── */
@media (min-width: 768px) {
    /* Modals centered on-screen, not anchored to the bottom edge —
       Phase 2 #2. Bottom-sheet pattern is mobile UX; a desktop user
       expects a proper centered dialog. */
    #ec-buy-sheet,
    #ec-backtest-sheet,
    #ec-create-sheet,
    #ec-share-sheet {
        align-items: center;
        justify-content: center;
    }
    #ec-app {
        max-width: clamp(440px, 72vw, 520px);
    }
    .ec-buy-box {
        border-radius: 18px;
        border-bottom: 1px solid var(--ec-border);
        max-height: 90vh;
        max-height: 90dvh;
    }
    .ec-buy-handle { display: none; }
    .ec-stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .ec-sparkline { height: 90px; }
    .ec-card-title { font-size: 17px; }
    .ec-card-summary { max-height: calc(13px * 1.55 * 5); }
}

/* ≥1024 — large laptop / desktop further-tuned spacing. */
@media (min-width: 1024px) {
    .ec-sparkline { height: 120px; }
    .ec-card-title { font-size: 18px; }
    .ec-card-summary { max-height: none; }
}
@media (hover: hover) and (min-width: 1024px) {
    .ec-card:hover:not(.ec-card--behind) {
        box-shadow: 0 0 0 1px rgba(0,207,255,0.35),
                    0 8px 28px rgba(0,207,255,0.10);
    }
}

/* Sidebar styles extracted to event-cards-sidebar.css (loaded
   with media="(min-width: 1280px)" — mobile skips download). */
#ec-sidebar { display: none; }
@media (max-width: 1279px) {
    #ec-main { display: contents; }
    #ec-sidebar { display: none !important; }
}
/* ── Chart hover crosshair (desktop chart) ──────────────────── */
.ec-chart-hover-lbl {
    paint-order: stroke;
    stroke: rgba(10,14,23,0.85);
    stroke-width: 3px;
}

/* ── Share button in chart header + share sheet (Phase 4) ────── */

.ec-chart-share {
    margin-left: 6px;
    padding: 10px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,255,136,0.08);
    border: 1px solid rgba(0,255,136,0.30);
    border-radius: 6px;
    color: var(--ec-green);
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}
.ec-chart-share:active { background: rgba(0,255,136,0.20); }

#ec-share-sheet {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: rgba(0,0,0,0.65);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
}
#ec-share-sheet.open {
    opacity: 1;
    pointer-events: auto;
}
.ec-share-box { max-width: 520px !important; }
#ec-share-sheet.open .ec-buy-box { transform: translateY(0); }

.ec-share-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 8px;
}
@media (max-width: 420px) {
    .ec-share-grid { grid-template-columns: repeat(3, 1fr); }
}
.ec-share-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 10px 8px;
    background: rgba(17,24,39,0.6);
    border: 1px solid rgba(0,150,255,0.20);
    border-radius: 9px;
    color: var(--ec-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ec-share-tile:hover {
    background: rgba(0,207,255,0.12);
    border-color: rgba(0,207,255,0.35);
    color: var(--ec-cyan);
}

.ec-share-copies {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.ec-share-copy {
    width: 100%;
    padding: 11px 14px;
    min-height: 44px;
    background: rgba(0,207,255,0.08);
    border: 1px solid rgba(0,207,255,0.30);
    color: var(--ec-cyan);
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.ec-share-copy:active { background: rgba(0,207,255,0.22); }

@media (min-width: 768px) {
    .ec-share-box { border-radius: 18px; max-height: 90dvh; }
}

/* Bottom-bar leaderboard link (Phase: leaderboard discoverability). */
.ec-hint-lb {
    margin-left: 16px;
    color: var(--ec-cyan);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}
.ec-hint-lb:hover {
    background: rgba(0,207,255,0.10);
    text-decoration: none;
}

/* ── User Gains Badge ──────────────────────────────────────────── */
.ec-gains-badge {
    position: absolute;
    top: 36px;
    right: 10px;
    font-family: var(--ec-font, 'Archivo Black', sans-serif);
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 6px;
    z-index: 3;
    backdrop-filter: blur(8px);
}
.ec-gains-up {
    background: rgba(0,255,136,0.15);
    color: #00ff88;
    border: 1px solid rgba(0,255,136,0.3);
}
.ec-gains-down {
    background: rgba(255,68,68,0.15);
    color: #ff4444;
    border: 1px solid rgba(255,68,68,0.3);
}

/* ── Pipeline Status Bar ───────────────────────────────────────── */
#ec-pipeline-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: rgba(13,21,32,0.95);
    border: 1px solid rgba(0,207,255,0.25);
    border-radius: 12px;
    padding: 14px 20px 12px;
    min-width: 340px;
    max-width: 480px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    animation: ec-pipeline-slide-up 0.3s ease-out;
}
@keyframes ec-pipeline-slide-up {
    from { transform: translateX(-50%) translateY(20px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
#ec-pipeline-bar.ec-pipeline-done {
    border-color: rgba(0,255,136,0.4);
    animation: ec-pipeline-pulse 0.5s ease;
}
@keyframes ec-pipeline-pulse {
    0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
    50%      { box-shadow: 0 8px 32px rgba(0,255,136,0.3); }
}
.ec-pipeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.ec-pipeline-title {
    font-family: var(--ec-font, 'Archivo Black', sans-serif);
    font-size: 12px;
    color: #e0e6ed;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 380px;
}
.ec-pipeline-close {
    background: none;
    border: none;
    color: #7d8fa3;
    font-size: 18px;
    cursor: pointer;
    padding: 0 0 0 8px;
    line-height: 1;
}
.ec-pipeline-close:hover { color: #ff4444; }
.ec-pipeline-stages {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 4px;
}
.ec-pipeline-dot {
    font-size: 10px;
    color: #4a5568;
    text-align: center;
    flex: 1;
    position: relative;
    padding-top: 14px;
    transition: color 0.3s ease;
}
.ec-pipeline-dot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2d3748;
    border: 1.5px solid #4a5568;
    transition: all 0.3s ease;
}
.ec-pipeline-dot.done {
    color: #00cfff;
}
.ec-pipeline-dot.done::before {
    background: #00cfff;
    border-color: #00cfff;
    box-shadow: 0 0 6px rgba(0,207,255,0.5);
}
.ec-pipeline-progress {
    height: 3px;
    background: #2d3748;
    border-radius: 2px;
    overflow: hidden;
}
.ec-pipeline-fill {
    height: 100%;
    background: #00cfff;
    border-radius: 2px;
    width: 17%;
    transition: width 0.5s ease;
}
@media (max-width: 480px) {
    #ec-pipeline-bar {
        left: 8px;
        right: 8px;
        transform: none;
        min-width: auto;
        max-width: none;
    }
    @keyframes ec-pipeline-slide-up {
        from { transform: translateY(20px); opacity: 0; }
        to   { transform: translateY(0); opacity: 1; }
    }
    .ec-pipeline-dot { font-size: 9px; }
}