/* ==========================================================================
   Omnisign Trade Intelligence - Visual Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;500;600;700&display=swap');

:root {
    --font-family-title: 'Outfit', sans-serif;
    --font-family-body: 'Inter', sans-serif;

    /* Theme Palette - Slate Space Theme */
    --bg-canvas: hsl(230, 24%, 6%);
    --bg-canvas-rgb: 11, 13, 25;
    
    --text-primary: hsl(0, 0%, 96%);
    --text-secondary: hsl(220, 10%, 65%);
    --text-muted: hsl(220, 10%, 45%);

    /* Mint Long / Crimson Short Accent Colors */
    --color-long: hsl(142, 70%, 45%);
    --color-long-glow: rgba(34, 197, 94, 0.15);
    --color-short: hsl(350, 75%, 50%);
    --color-short-glow: rgba(239, 68, 68, 0.15);
    
    --color-accent: hsl(250, 80%, 65%); /* Purple-indigo */
    --color-accent-glow: rgba(99, 102, 241, 0.2);

    /* Glassmorphism Configuration */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.07);
    --glass-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4);
    --glass-blur: blur(16px);
    
    --border-radius-lg: 20px;
    --border-radius-md: 12px;
}

[data-theme="light"] {
    --bg-canvas: hsl(220, 20%, 96%);
    --bg-canvas-rgb: 245, 246, 250;
    
    --text-primary: hsl(220, 25%, 15%);
    --text-secondary: hsl(220, 15%, 40%);
    --text-muted: hsl(220, 10%, 60%);

    --glass-bg: rgba(0, 0, 0, 0.03);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.08);
    --glass-blur: blur(16px);
}

/* Base resets */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    /* Locks the outer page so it can never rubber-band/scroll as a whole --
       the app shell below owns a fixed viewport-height box and only its
       .main scroll deck moves. Keeps the header and bottom nav dock
       pinned on phone, tablet, and desktop alike. */
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    background-color: var(--bg-canvas);
    color: var(--text-primary);
    font-family: var(--font-family-body);
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* App shell layout */
#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* dynamic viewport height: accounts for mobile browser chrome */
    max-width: 480px;
    margin: 0 auto;
    background: radial-gradient(circle at 50% 0%, var(--color-accent-glow), transparent 60%);
    position: relative;
    box-shadow: 0 0 40px rgba(0,0,0,0.3);
    overflow: hidden;
}

@media(min-width: 481px) {
    #app {
        border-radius: 20px;
        margin: 12px auto;
        height: calc(100vh - 24px);
        height: calc(100dvh - 24px);
        overflow: hidden;
    }
}

/* iPhone SE / very small screens */
@media(max-width: 375px) {
    main { padding: 14px; }
    header { padding: 12px 14px; padding-top: calc(12px + env(safe-area-inset-top)); }
    header h1 { font-size: 1.05rem; }
    .glass-card { padding: 10px 12px; margin-bottom: 8px; border-radius: 14px; }
    .setup-metrics { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; }
    .metric-val { font-size: 0.8rem; }
    .precision-toggle-btn { font-size: 0.58rem; padding: 6px 4px; }
    .highlights-bar { padding: 8px 12px; font-size: 0.65rem; gap: 4px; }
    .nav-dock { padding: 10px 6px; }
    .nav-item { font-size: 0.58rem; }
    .nav-item svg { width: 18px; height: 18px; }
    .hero-card h2 { font-size: 1.3rem !important; }
    .confidence-ring { font-size: 1.2rem; }
    .technicals-grid { grid-template-columns: repeat(2, 1fr); }
    .modal-sheet { padding: 18px 14px 32px 14px; }
    .watchlist-card { gap: 8px; padding: 10px 12px; }
    .token-icon-wrap { width: 28px !important; height: 28px !important; }
}

/* Header bar */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    padding-top: calc(16px + env(safe-area-inset-top));
    background: rgba(var(--bg-canvas-rgb), 0.75);
    backdrop-filter: var(--glass-blur);
    flex-shrink: 0;
    z-index: 100;
}

header h1 {
    font-family: var(--font-family-title);
    font-size: 1.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#header-actions {
    flex-shrink: 0;
    margin-left: 10px;
}

.status-dot {
    width: 8px;
    height: 8px;
    background-color: var(--color-long);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--color-long);
    display: inline-block;
    margin-right: 6px;
    animation: pulse 1.8s infinite;
}

/* Main scroll deck -- the only element in the app shell allowed to scroll.
   min-height: 0 overrides the flex item's default auto min-height, which
   would otherwise let this grow to fit its content and push the header/nav
   dock (and the whole page) into scrolling instead of scrolling internally. */
main {
    flex: 1;
    min-height: 0;
    padding: 20px 14px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Glass cards styling */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: none;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    padding: 12px 14px;
    margin-bottom: 10px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.glass-card:active {
    transform: scale(0.98);
}

/* Hero Setup Card */
/* Match the compact watchlist-card footprint (same padding, corner radius,
   spacing) across every radar card type -- only the container sizing
   changes here, all existing card content/structure stays as-is. */
.hero-card,
.feed-card {
    padding: 10px 14px;
    border-radius: var(--border-radius-md);
    margin-bottom: 8px;
}

.hero-card {
    border: none;
}
.hero-card.LONG {
    box-shadow: 0 8px 28px var(--color-long-glow);
}
.hero-card.SHORT {
    box-shadow: 0 8px 28px var(--color-short-glow);
}

.hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.badge {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}
.badge.LONG {
    background-color: var(--color-long-glow);
    color: var(--color-long);
}
.badge.SHORT {
    background-color: var(--color-short-glow);
    color: var(--color-short);
}

.confidence-ring {
    font-family: var(--font-family-title);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-accent);
}

.setup-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 10px;
    background: rgba(255,255,255,0.02);
    padding: 6px;
    border-radius: var(--border-radius-md);
}

.metric-box {
    text-align: center;
    min-width: 0;
}

.metric-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-val {
    font-family: var(--font-family-title);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Feed item list card */
.feed-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.feed-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.feed-symbol {
    font-family: var(--font-family-title);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
}

.feed-right {
    text-align: right;
}

.tier-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}
.tier-badge.watchlist-tier { background: rgba(139, 92, 246, 0.14); color: hsl(260, 78%, 72%); }
.tier-badge.pro-tier { background: rgba(37, 99, 235, 0.16); color: hsl(220, 92%, 70%); }
.tier-badge.elite-tier {
    background: linear-gradient(135deg, hsl(230, 10%, 8%), hsl(230, 10%, 24%));
    color: hsl(48, 100%, 84%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 14px rgba(0,0,0,0.35);
}

.hero-card.pro-tier,
.feed-card.pro-tier {
    box-shadow: 0 8px 28px rgba(37, 99, 235, 0.2);
}
.hero-card.elite-tier,
.feed-card.elite-tier {
    background: linear-gradient(135deg, rgba(0,0,0,0.24), var(--glass-bg));
    box-shadow: 0 8px 30px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Floating bottom nav */
.nav-dock {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    padding: 12px 10px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: rgba(var(--bg-canvas-rgb), 0.88);
    backdrop-filter: var(--glass-blur);
    z-index: 99;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.65rem;
    text-decoration: none;
    gap: 4px;
    cursor: pointer;
    transition: color 0.2s ease;
}

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

.nav-item svg {
    width: 22px;
    height: 22px;
}

/* Slide drawer/overlay page for setup details */
.detail-drawer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-canvas);
    z-index: 150;
    padding: 20px;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.detail-drawer.open {
    transform: translateY(0);
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
}

/* Animations */
@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--color-long-glow); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes shimmer {
    0% { opacity: 0.35; }
    50% { opacity: 0.75; }
    100% { opacity: 0.35; }
}

/* Skeleton Loading styles */
.skeleton {
    animation: shimmer 1.5s infinite ease-in-out;
    background: rgba(255,255,255,0.05);
    border-radius: var(--border-radius-md);
}

/* Inputs & buttons styles */
input {
    background: rgba(255,255,255,0.04);
    border: none;
    border-radius: var(--border-radius-md);
    color: var(--text-primary);
    padding: 12px;
    width: 100%;
    margin-bottom: 12px;
    outline: none;
    font-family: var(--font-family-body);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
    transition: box-shadow 0.2s ease;
}

select {
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
}
[data-theme="light"] select,
[data-theme="light"] input {
    background: rgba(0,0,0,0.04);
    color: var(--text-primary);
}
[data-theme="light"] select option {
    color: hsl(220, 25%, 15%);
    background: white;
}

/* Themed dropdown (e.g. language select) matching the glass/dark design system */
.themed-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgba(255,255,255,0.05);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%239a9fb0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
    color: var(--text-primary);
    border: none;
    border-radius: var(--border-radius-md);
    padding: 9px 32px 9px 14px;
    margin: 0;
    width: auto;
    font-family: var(--font-family-body);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--glass-border);
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.themed-select:hover {
    background-color: rgba(255,255,255,0.08);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}
.themed-select:focus {
    outline: none;
    box-shadow: inset 0 0 0 1.5px var(--color-accent);
}
.themed-select option {
    background: hsl(230, 22%, 10%);
    color: var(--text-primary);
}
/* Higher specificity than the generic `[data-theme="light"] select` shorthand
   rule above -- otherwise its `background:` shorthand resets our repeat/
   position/size back to defaults and the chevron tiles across the whole box. */
[data-theme="light"] select.themed-select {
    background-color: rgba(0,0,0,0.04);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%23555b6e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
[data-theme="light"] select.themed-select:hover {
    background-color: rgba(0,0,0,0.07);
}
[data-theme="light"] select.themed-select option {
    background: white;
    color: hsl(220, 25%, 15%);
}

input:focus {
    box-shadow: inset 0 0 0 1.5px var(--color-accent);
}

button {
    background: var(--color-accent);
    border: none;
    border-radius: var(--border-radius-md);
    color: white;
    cursor: pointer;
    font-family: var(--font-family-title);
    font-weight: 600;
    padding: 14px;
    text-align: center;
    width: 100%;
    transition: filter 0.2s ease;
}

button:active {
    filter: brightness(0.85);
}

.secondary-btn {
    background: rgba(255,255,255,0.04);
    border: none;
    color: var(--text-secondary);
}

.text-btn {
    background: transparent;
    color: var(--color-accent);
    padding: 4px;
    font-size: 0.85rem;
    width: auto;
    display: inline-block;
}

/* Autocomplete & Suggestions */
.autocomplete-dropdown {
    position: absolute;
    top: 46px;
    left: 0;
    right: 0;
    background: hsl(230, 24%, 8%);
    border: none;
    border-radius: var(--border-radius-md);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: background 0.15s ease;
}
.autocomplete-item:hover {
    background: rgba(255, 255, 255, 0.05);
}
[data-theme="light"] .autocomplete-dropdown {
    background: #fff;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(0,0,0,0.08);
}
[data-theme="light"] .autocomplete-item:hover {
    background: rgba(0, 0, 0, 0.05);
}
.suggestion-pill {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    padding: 4px 10px;
    font-size: 0.7rem;
    border-radius: 20px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.suggestion-pill:hover {
    background: var(--color-accent-glow);
    color: var(--text-primary);
}

/* Highlights Bar Styles */
.highlights-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.015);
    backdrop-filter: var(--glass-blur);
    font-size: 0.72rem;
    gap: 6px;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.highlight-item:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.highlight-item:active {
    transform: scale(0.95);
}

.highlight-label {
    color: var(--text-secondary);
}

.highlight-value {
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.highlight-item:hover .highlight-value {
    color: var(--color-accent);
    text-shadow: 0 0 8px var(--color-accent-glow);
}

.highlight-change {
    font-size: 0.65rem;
    font-weight: 500;
    padding: 1px 4px;
    border-radius: 4px;
}

.highlight-change.positive {
    color: var(--color-long);
    background: var(--color-long-glow);
}

.highlight-change.negative {
    color: var(--color-short);
    background: var(--color-short-glow);
}

/* Animations for updates */
@keyframes metric-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.6;
        color: var(--color-accent);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.metric-updating {
    animation: metric-pulse 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.market-metrics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
@media(min-width: 420px) {
    .market-metrics-grid {
        grid-template-columns: 1.2fr 1fr 1fr;
    }
}
.market-metric-card {
    min-height: 80px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--glass-bg);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px var(--glass-border), 0 8px 22px rgba(0,0,0,0.16);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    text-align: left;
    min-width: 0;
    width: 100%;
}
.market-metric-card strong {
    font-size: 1.12rem;
    font-family: var(--font-family-title);
}
.metric-card-title {
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.metric-card-change {
    font-size: 0.72rem;
    font-weight: 700;
}
.metric-card-change.positive { color: var(--color-long); }
.metric-card-change.negative { color: var(--color-short); }
/* Registering --value as a real animatable number (rather than an opaque
   token) is what lets the needle transition below interpolate smoothly
   through calc() instead of snapping straight to the new angle. */
@property --value {
    syntax: '<number>';
    inherits: true;
    initial-value: 50;
}

.gauge-card {
    align-items: center;
    text-align: center;
}
.mini-gauge {
    --value: 50;
    width: 74px;
    height: 42px;
    display: grid;
    place-items: end center;
    position: relative;
    color: var(--text-primary);
    transition: --value 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.mini-gauge::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 80px 80px 0 0;
    background:
        conic-gradient(from 270deg at 50% 100%,
            var(--color-short) 0 36deg,
            hsl(38, 92%, 50%) 36deg 80deg,
            hsl(60, 85%, 50%) 80deg 122deg,
            var(--color-long) 122deg 180deg,
            transparent 180deg 360deg);
    mask: radial-gradient(circle at 50% 100%, transparent 0 37px, #000 38px);
}
.mini-gauge::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-primary);
    position: absolute;
    left: calc(50% - 3.5px);
    /* Rests at the top of the dome (the "50" / neutral position) and
       pivots around the arc's own center (box bottom-center, matching the
       conic-gradient's `at 50% 100%` origin above) so the sweep direction
       actually matches the arc's colors: 0 swings left into the red zone,
       100 swings right into the green zone. */
    top: 1px;
    transform-origin: 3.5px 41px;
    transform: rotate(calc((var(--value) - 50) * 1.8deg));
    box-shadow: 0 0 0 3px var(--bg-canvas);
}
.mini-gauge b {
    position: relative;
    z-index: 1;
    font-size: 1.1rem;
    font-family: var(--font-family-title);
}


/* =====================================================
   WATCHLIST CONTAINER — grows with its content; the page
   itself (main) scrolls rather than boxing this into its
   own short, capped scroll region.
   ===================================================== */
#watchlist-items-list {
    padding-right: 2px;
}

#watchlist-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    height: clamp(92px, 18vh, 128px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
#watchlist-suggestions::-webkit-scrollbar { width: 4px; }
#watchlist-suggestions::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 4px; }

[data-theme="light"] #watchlist-suggestions {
    background: rgba(0,0,0,0.04);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
/* =====================================================
   TOKEN ICON ELEMENTS
   ===================================================== */
.token-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
}
.token-icon-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.token-icon-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-glow));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    border: none;
    letter-spacing: 0;
}
.suggestion-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.suggestion-pill .pill-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
}
.suggestion-pill .pill-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pill-icon-fallback {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-accent-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--color-accent);
    flex-shrink: 0;
}

/* =====================================================
   WATCHLIST CARD (with analyze button)
   ===================================================== */
.watchlist-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: var(--border-radius-md);
    background: var(--glass-bg);
    border: none;
    margin-bottom: 8px;
}
.watchlist-card:hover {
    background: rgba(255,255,255,0.06);
    transform: translateX(2px);
}
.watchlist-card-info {
    flex: 1;
    min-width: 0;
}
.watchlist-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.analyze-btn {
    background: var(--color-accent-glow);
    color: var(--color-accent);
    border: none;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.analyze-btn:hover {
    background: var(--color-accent);
    color: white;
    box-shadow: 0 0 16px var(--color-accent-glow);
}

/* =====================================================
   MODAL OVERLAY — AI Analysis
   ===================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.modal-overlay.open {
    opacity: 1;
    pointer-events: all;
}
.modal-sheet {
    background: var(--bg-canvas);
    color: var(--text-primary);
    border: none;
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 480px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 24px 20px 40px 20px;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}
[data-theme="light"] .modal-sheet,
[data-theme="light"] .detail-drawer {
    background: hsl(220, 20%, 98%);
    color: var(--text-primary);
}
[data-theme="light"] .elite-gate-lock {
    background: linear-gradient(135deg, hsl(48, 20%, 90%), hsl(48, 20%, 95%));
    color: hsl(48, 80%, 40%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 0 20px rgba(180, 160, 80, 0.15);
}
[data-theme="light"] .secondary-btn {
    background: rgba(0,0,0,0.05);
    color: var(--text-secondary);
}
[data-theme="light"] .radar-update-toast {
    background: #fff;
    color: #333;
    box-shadow: 0 20px 48px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(0,0,0,0.08);
}
[data-theme="light"] .radar-update-toast span {
    color: #333;
}
[data-theme="light"] .radar-update-toast-msg {
    color: #333;
}
[data-theme="light"] .tech-cell,
[data-theme="light"] .setup-metrics,
[data-theme="light"] .confidence-bar-wrap {
    background: rgba(0,0,0,0.04);
}
.modal-overlay.open .modal-sheet {
    transform: translateY(0);
}
.modal-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--glass-border);
    margin: 0 auto 20px auto;
}
.modal-sheet::-webkit-scrollbar { width: 3px; }
.modal-sheet::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 3px; }

.modal-direction-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.modal-direction-badge.LONG  { background: var(--color-long-glow);  color: var(--color-long); }
.modal-direction-badge.SHORT { background: var(--color-short-glow); color: var(--color-short); }
.modal-direction-badge.NO_TRADE { background: rgba(255,255,255,0.05); color: var(--text-secondary); }

.confidence-bar-wrap {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.07);
    border-radius: 6px;
    overflow: hidden;
    margin: 8px 0 4px 0;
}
.confidence-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.technicals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 14px 0;
}
.tech-cell {
    background: rgba(255,255,255,0.03);
    border: none;
    border-radius: 10px;
    padding: 8px 10px;
    text-align: center;
}
.tech-cell .tech-label { font-size: 0.6rem; color: var(--text-secondary); margin-bottom: 3px; }
.tech-cell .tech-val { font-size: 0.8rem; font-weight: 600; }

/* Spinning loader for modal */
@keyframes spin { to { transform: rotate(360deg); } }
.modal-loader {
    width: 32px; height: 32px;
    border: 3px solid var(--glass-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 40px auto;
}

/* =====================================================
   PRECISION TOGGLE BAR — 3-State Radar Filter
   ===================================================== */
.precision-toggle-bar {
    display: flex;
    background: rgba(255,255,255,0.03);
    border: none;
    border-radius: 12px;
    padding: 4px;
    gap: 3px;
    margin-bottom: 16px;
}
.precision-toggle-btn {
    flex: 1;
    text-align: center;
    padding: 7px 8px;
    border-radius: 9px;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    transition: all 0.25s ease;
    line-height: 1.3;
}
.precision-toggle-btn.active {
    background: var(--color-accent);
    color: white;
    box-shadow: 0 2px 12px var(--color-accent-glow);
}
.precision-toggle-btn.active.wl-q   { background: hsl(260, 50%, 48%); box-shadow: 0 2px 10px rgba(120,80,200,0.3); }
.precision-toggle-btn.active.pro-q  { background: hsl(220, 80%, 55%); box-shadow: 0 2px 12px rgba(60,100,240,0.35); }
.precision-toggle-btn.active.elite  { background: linear-gradient(135deg, hsl(230,10%,15%), hsl(230,10%,25%)); color: hsl(50,100%,85%); box-shadow: 0 2px 16px rgba(0,0,0,0.5); }

@keyframes radar-shift-left {
    0% { transform: translateX(44px) scale(0.96); filter: blur(8px); opacity: 0; }
    42% { transform: translateX(-10px) scale(1.02); filter: blur(2px); opacity: 1; }
    100% { transform: translateX(0) scale(1); filter: blur(0); opacity: 1; }
}
@keyframes radar-shift-right {
    0% { transform: translateX(-44px) scale(0.96); filter: blur(8px); opacity: 0; }
    42% { transform: translateX(10px) scale(1.02); filter: blur(2px); opacity: 1; }
    100% { transform: translateX(0) scale(1); filter: blur(0); opacity: 1; }
}
.radar-shift-left,
.radar-shift-right {
    position: relative;
}
.radar-shift-left { animation: radar-shift-left 0.72s cubic-bezier(0.2, 0.85, 0.25, 1); }
.radar-shift-right { animation: radar-shift-right 0.72s cubic-bezier(0.2, 0.85, 0.25, 1); }
.radar-shift-left::after,
.radar-shift-right::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.55) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 25%, rgba(99,102,241,0.5) 0 2px, transparent 3px),
        radial-gradient(circle at 45% 70%, rgba(34,197,94,0.42) 0 2px, transparent 3px);
    animation: particle-fade 0.72s ease-out forwards;
}
@keyframes particle-fade {
    0% { opacity: 0; transform: scale(0.92); filter: blur(7px); }
    35% { opacity: 1; transform: scale(1.05); filter: blur(1px); }
    100% { opacity: 0; transform: scale(1.18); filter: blur(0); }
}

.radar-update-toast {
    position: fixed;
    left: 50%;
    top: 90px;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 32px;
    border-radius: 16px;
    background: rgba(var(--bg-canvas-rgb), 0.96);
    box-shadow: 0 20px 48px rgba(0,0,0,0.35), inset 0 0 0 1px var(--glass-border);
    color: var(--text-primary);
    transform: translate(-50%, -24px) scale(0.96);
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: transform 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.32s ease;
    cursor: pointer;
    width: max-content;
    max-width: 90vw;
    text-align: center;
}
.radar-update-toast.show {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.radar-update-toast span {
    color: var(--text-secondary);
    font-size: clamp(0.95rem, 2.5vw, 1.25rem);
}
.radar-update-toast-msg {
    color: var(--text-secondary);
}
.particle-burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.particle-burst span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-accent);
    transform: rotate(calc(var(--i) * 36deg)) translateX(0);
    animation: burst-particle 0.9s ease-out forwards;
}
@keyframes burst-particle {
    to {
        transform: rotate(calc(var(--i) * 36deg)) translateX(150px);
        opacity: 0;
    }
}

.settings-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--text-primary);
}
.settings-toggle input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.precision-signal-count {
    font-size: 0.62rem;
    color: var(--text-muted);
    text-align: right;
    margin-top: -10px;
    margin-bottom: 10px;
}

/* Reserve stable space so switching precision tabs (or a signal list going
   empty/populated) doesn't visibly shift the rest of the page. */
#top-setup-container {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#top-setup-container > * {
    width: 100%;
}

/* Scrollable feed containers */
#setups-feed-list {
    max-height: 42vh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
#setups-feed-list::-webkit-scrollbar { width: 3px; }
#setups-feed-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

#watchlist-items-list {
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding-right: 2px;
}
#watchlist-items-list::-webkit-scrollbar { width: 3px; }
#watchlist-items-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

/* Suggestion pill visible colors in both themes */
.suggestion-pill {
    background: rgba(255,255,255,0.07);
    color: var(--text-primary);
    font-weight: 500;
}
[data-theme="light"] .suggestion-pill {
    background: rgba(0,0,0,0.06);
    color: hsl(220, 25%, 20%);
}
.suggestion-pill:hover {
    background: var(--color-accent);
    color: white;
}
[data-theme="light"] .suggestion-pill:hover {
    background: var(--color-accent);
    color: white;
}

/* =====================================================
   SHOOTING STAR ANIMATION — Modal Tier Celebrations
   ===================================================== */
@keyframes shooting-star {
    0%   { transform: translate(-100px, -60px) rotate(-35deg) scale(0); opacity: 0; }
    15%  { opacity: 1; }
    40%  { transform: translate(200px, 120px) rotate(-35deg) scale(1); opacity: 0.9; }
    100% { transform: translate(500px, 300px) rotate(-35deg) scale(0.3); opacity: 0; }
}
@keyframes star-trail {
    0%   { width: 0; opacity: 0; }
    30%  { width: 80px; opacity: 0.8; }
    100% { width: 0; opacity: 0; }
}

.shooting-star-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.shooting-star {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: shooting-star 1.4s ease-out forwards;
}
.shooting-star::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    height: 2px;
    border-radius: 2px;
    animation: star-trail 1.4s ease-out forwards;
}

/* Pro tier: blue stars */
.shooting-star.pro-star {
    background: hsl(220, 90%, 70%);
    box-shadow: 0 0 12px hsl(220, 90%, 60%);
}
.shooting-star.pro-star::after {
    background: linear-gradient(90deg, hsl(220, 90%, 70%), transparent);
}

/* Elite tier: gold/white shiny stars */
.shooting-star.elite-star {
    background: hsl(45, 100%, 85%);
    box-shadow: 0 0 16px hsl(45, 100%, 70%), 0 0 30px hsl(45, 80%, 50%);
}
.shooting-star.elite-star::after {
    background: linear-gradient(90deg, hsl(45, 100%, 85%), hsl(45, 80%, 50%), transparent);
}

/* Pro modal accent */
.modal-sheet.pro-modal {
    box-shadow: 0 -4px 40px rgba(60,100,240,0.25);
}
.detail-drawer.pro-modal {
    box-shadow: inset 0 4px 40px rgba(60,100,240,0.18);
}

/* Elite modal accent — black shiny */
.modal-sheet.elite-modal {
    background: hsl(230, 15%, 6%);
    box-shadow: 0 -4px 50px rgba(180,160,80,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
}
.detail-drawer.elite-modal {
    background: hsl(230, 15%, 6%);
    box-shadow: inset 0 4px 50px rgba(180,160,80,0.14);
}

/* =====================================================
   SNAPSHOT PRICE CHART — static TP/SL zone visualization
   ===================================================== */
.snapshot-chart-card {
    margin-bottom: 16px;
}
.snapshot-chart-canvas {
    width: 100%;
    height: 165px;
    display: block;
}
.chart-legend-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 3px;
}

/* =====================================================
   COSMIC WISDOM BUTTON — glowing "calm the mind" trigger,
   lives in the header so it's reachable from every view.
   ===================================================== */
.cosmic-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 38%, hsl(262, 95%, 78%), hsl(255, 80%, 48%) 55%, hsl(255, 60%, 22%) 100%);
    color: hsl(48, 100%, 93%);
    box-shadow: 0 0 16px 3px rgba(139, 92, 246, 0.55), 0 0 36px 8px rgba(139, 92, 246, 0.25), inset 0 0 10px rgba(255,255,255,0.25);
    animation: cosmic-pulse 2.6s ease-in-out infinite;
    transition: transform 0.15s ease;
    padding: 0;
}
.cosmic-btn svg {
    width: 24px;
    height: 24px;
}
.cosmic-btn:active {
    transform: scale(0.9);
}
@keyframes cosmic-pulse {
    0%, 100% { box-shadow: 0 0 16px 3px rgba(139, 92, 246, 0.55), 0 0 36px 8px rgba(139, 92, 246, 0.25), inset 0 0 10px rgba(255,255,255,0.25); }
    50%      { box-shadow: 0 0 24px 7px rgba(139, 92, 246, 0.75), 0 0 56px 16px rgba(139, 92, 246, 0.4), inset 0 0 14px rgba(255,255,255,0.35); }
}

/* Compact header variant */
.cosmic-btn-header {
    width: 34px;
    height: 34px;
    box-shadow: 0 0 10px 2px rgba(139, 92, 246, 0.55), 0 0 20px 5px rgba(139, 92, 246, 0.25), inset 0 0 6px rgba(255,255,255,0.25);
    animation: cosmic-pulse-header 2.6s ease-in-out infinite;
}
.cosmic-btn-header svg {
    width: 16px;
    height: 16px;
}
@keyframes cosmic-pulse-header {
    0%, 100% { box-shadow: 0 0 10px 2px rgba(139, 92, 246, 0.55), 0 0 20px 5px rgba(139, 92, 246, 0.25), inset 0 0 6px rgba(255,255,255,0.25); }
    50%      { box-shadow: 0 0 15px 4px rgba(139, 92, 246, 0.75), 0 0 30px 9px rgba(139, 92, 246, 0.4), inset 0 0 8px rgba(255,255,255,0.35); }
}
.wisdom-modal-sheet {
    text-align: center;
    padding-top: 36px;
}
.wisdom-icon {
    font-size: 2rem;
    margin-bottom: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.wisdom-icon svg {
    width: 44px;
    height: 44px;
    stroke: var(--color-accent);
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.4));
    transition: transform 0.3s ease;
}
.wisdom-icon:hover svg {
    transform: scale(1.1) rotate(5deg);
}

/* Wisdom Modal Cosmic Dust Sprinkle Animation */
.wisdom-dust-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    pointer-events: none;
    z-index: 100;
}
.wisdom-dust-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: wisdom-sprinkle-return 2.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes wisdom-sprinkle-return {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        /* Sprinkle over text: dx and dy are defined dynamically in JS */
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.6);
        opacity: 1;
    }
    75% {
        opacity: 0.8;
    }
    100% {
        /* Return to icon */
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 0;
    }
}
.wisdom-quote {
    font-family: var(--font-family-title);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 14px;
    padding: 0 6px;
}
.wisdom-author {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 26px;
}

/* =====================================================
   GROK X SENTIMENT — trigger button, badge, and heatmap
   ===================================================== */
.grok-sentiment-btn {
    width: 100%;
    background: linear-gradient(135deg, hsl(230, 12%, 14%), hsl(230, 14%, 4%));
    color: white;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 4px 16px rgba(0,0,0,0.35);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.grok-sentiment-btn:active {
    filter: brightness(1.15);
}
.grok-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: hsl(230, 14%, 10%);
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.sentiment-overall {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
}
.sentiment-overall-label {
    font-size: 0.68rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sentiment-heatmap-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.sentiment-cell {
    border-radius: var(--border-radius-md);
    padding: 12px 10px;
    text-align: center;
    transition: background 0.4s ease;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.sentiment-cell-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
}
.sentiment-cell-value {
    font-family: var(--font-family-title);
    font-weight: 700;
    font-size: 1.15rem;
    color: white;
}

/* =====================================================
   SIGNAL TYPE CHIP — heuristics engine taxonomy label
   ===================================================== */
.signal-type-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.signal-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.14);
    color: hsl(234, 89%, 74%);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.signal-type-meta {
    font-size: 0.68rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* =====================================================
   AI STRATEGY INSIGHTS (Gemini, Elite only)
   ===================================================== */
.ai-insights-btn {
    width: 100%;
    background: linear-gradient(135deg, hsl(234, 60%, 30%), hsl(262, 55%, 24%));
    color: white;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35), 0 4px 16px rgba(99, 102, 241, 0.25);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-insights-btn:active {
    filter: brightness(1.15);
}
.gemini-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, hsl(234, 45%, 22%), hsl(262, 40%, 18%));
    color: hsl(234, 89%, 80%);
    font-size: 0.68rem;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.3);
}
.verdict-banner {
    border-radius: var(--border-radius-md);
    padding: 12px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    font-family: var(--font-family-title);
}
.verdict-banner.aligned {
    background: rgba(34, 197, 94, 0.12);
    color: var(--color-long);
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.3);
}
.verdict-banner.caution {
    background: rgba(234, 179, 8, 0.12);
    color: hsl(43, 90%, 58%);
    box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.3);
}
.verdict-banner.contrarian {
    background: rgba(239, 68, 68, 0.12);
    color: var(--color-short);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.3);
}
.key-factor-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
    color: var(--text-primary);
    font-size: 0.68rem;
    font-weight: 600;
}

/* =====================================================
   ELITE FEATURE GATING — locked buttons, deny shake, gate modal
   ===================================================== */
.locked-feature {
    opacity: 0.55;
    filter: grayscale(0.45);
    position: relative;
    cursor: not-allowed;
}
.lock-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
}
@keyframes deny-shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-7px); }
    30% { transform: translateX(6px); }
    45% { transform: translateX(-5px); }
    60% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
}
.deny-shake {
    animation: deny-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.55), 0 0 18px rgba(239, 68, 68, 0.35) !important;
}
.elite-gate-sheet {
    box-shadow: 0 -4px 50px rgba(180, 160, 80, 0.18), inset 0 1px 0 rgba(255,255,255,0.06);
}
.elite-gate-lock {
    width: 64px;
    height: 64px;
    margin: 10px auto 16px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, hsl(230, 10%, 12%), hsl(230, 10%, 22%));
    color: hsl(48, 100%, 84%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 26px rgba(180, 160, 80, 0.25);
}

/* Locked-feature "denied" toast -- shown immediately when a Pro/Free user
   taps a greyed-out Elite AI button. Reuses .radar-update-toast's
   position/animation but with a warning tint and a pointer cursor since
   tapping it opens the full upgrade modal. */
.elite-lock-toast {
    top: 20px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.16), rgba(var(--bg-canvas-rgb), 0.94));
    box-shadow: 0 16px 38px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(239, 68, 68, 0.35);
    cursor: pointer;
}
.elite-lock-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(239, 68, 68, 0.16);
    color: hsl(0, 84%, 68%);
}

/* Center-screen "denied" explosion -- fires on every repeated tap of a
   locked Elite AI button, appended to <body> so it sits above even an open
   modal (z-index 1000). Sequence: pop in -> hold with a pulsing glow ->
   burst apart into a shockwave ring + radial particles. ~2s total. */
.denied-explosion-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.denied-icon-core {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.22), rgba(20, 8, 8, 0.88) 70%);
    color: hsl(0, 84%, 68%);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.4);
    animation:
        denied-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
        denied-pulse 1s ease-in-out 0.4s 1,
        denied-burst-out 0.6s ease-in 1.4s forwards;
}
@keyframes denied-pop-in {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes denied-pulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.5)); }
    50%      { transform: scale(1.08); filter: drop-shadow(0 0 22px rgba(239, 68, 68, 0.85)); }
}
@keyframes denied-burst-out {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(2.1); opacity: 0; }
}
.denied-shockwave {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid rgba(239, 68, 68, 0.55);
    animation: denied-shockwave 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes denied-shockwave {
    0%   { transform: scale(0.4); opacity: 0.7; }
    100% { transform: scale(3.6); opacity: 0; }
}
.denied-particle-burst {
    position: absolute;
    width: 1px;
    height: 1px;
}
.denied-particle-burst span {
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: hsl(0, 84%, 62%);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
    opacity: 0;
    animation: denied-particle-fly 0.7s ease-out 1.4s forwards;
}
@keyframes denied-particle-fly {
    0%   { transform: rotate(var(--deg)) translateX(0); opacity: 1; }
    100% { transform: rotate(var(--deg)) translateX(160px); opacity: 0; }
}

/* =====================================================
   PARTICLE DUST EXPLOSION/IMPLOSION ANIMATION
   ===================================================== */
.dust-particle-container {
    position: absolute;
    width: 44px;
    height: 44px;
    pointer-events: none;
    z-index: 120;
}
.dust-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    background: var(--color-accent);
    transform: translate(-50%, -50%);
    animation: explode-implode 1.0s cubic-bezier(0.15, 0.85, 0.45, 1) forwards;
}
@keyframes explode-implode {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    45% {
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.5);
        opacity: 1;
    }
    75% {
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
    }
}