/* ==========================================================================
   BoTrade.ai — AI Trading Bots Archive Page Styles
   Next-generation dark-themed listing page with glassmorphism, 3D effects,
   particle backgrounds, advanced CSS animations, and responsive design.
   Matches the existing dashboard design language.

   @package BoTrade_AI
   @since   3.5.0
   ========================================================================== */

/* ---- CSS Custom Properties ---- */
:root {
    --arc-bg: #050816;
    --arc-bg-secondary: #0a0e1a;
    --arc-bg-card: rgba(14, 20, 40, 0.75);
    --arc-bg-card-hover: rgba(20, 28, 55, 0.85);
    --arc-border: rgba(255, 255, 255, 0.06);
    --arc-border-hover: rgba(255, 255, 255, 0.12);
    --arc-border-active: rgba(59, 130, 246, 0.4);
    --arc-text: #e2e8f0;
    --arc-text-secondary: #94a3b8;
    --arc-text-muted: #64748b;
    --arc-accent: #3b82f6;
    --arc-accent-glow: rgba(59, 130, 246, 0.25);
    --arc-green: #10b981;
    --arc-green-glow: rgba(16, 185, 129, 0.2);
    --arc-red: #ef4444;
    --arc-red-glow: rgba(239, 68, 68, 0.2);
    --arc-yellow: #f59e0b;
    --arc-purple: #8b5cf6;
    --arc-purple-glow: rgba(139, 92, 246, 0.2);
    --arc-cyan: #06b6d4;
    --arc-cyan-glow: rgba(6, 182, 212, 0.2);
    --arc-pink: #ec4899;
    --arc-radius: 20px;
    --arc-radius-md: 14px;
    --arc-radius-sm: 10px;
    --arc-radius-xs: 6px;
    --arc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --arc-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --arc-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --arc-transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    --arc-shadow-card: 0 4px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --arc-shadow-glow: 0 0 40px rgba(59, 130, 246, 0.08);
    --arc-blur: 20px;
}


/* ---- Global Page Reset ---- */
body.ftm-archive-page {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--arc-bg) !important;
    color: var(--arc-text) !important;
    font-family: var(--arc-font) !important;
    -webkit-font-smoothing: antialiased !important;
    overflow-x: hidden !important;
    line-height: 1.6 !important;
}

body.ftm-archive-page *,
body.ftm-archive-page *::before,
body.ftm-archive-page *::after {
    box-sizing: border-box !important;
}


/* ---- Particle Canvas ---- */
.ftm-particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}


/* ---- Archive Wrapper ---- */
.ftm-archive-wrapper {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 48px) 80px;
    min-height: 100vh;
}


/* ==========================================================================
   HERO — Quantum Intelligence Console
   ========================================================================== */

.ftm-arc-hero {
    position: relative;
    padding: 80px 0 64px;
    overflow: hidden;
    isolation: isolate;
}

/* ══ Aurora Background — Enhanced Trading Ambiance ══ */

.ftm-arc-aurora {
    position: absolute;
    inset: -40% -20%;
    background: radial-gradient(ellipse at 30% 40%, rgba(59,130,246,.22) 0%, rgba(16,185,129,.06) 35%, transparent 55%);
    pointer-events: none;
    animation: arcAuroraA 14s ease-in-out infinite alternate;
    transform: translateZ(0);
    mix-blend-mode: screen;
}

.ftm-arc-aurora--b {
    background: radial-gradient(ellipse at 70% 50%, rgba(139,92,246,.18) 0%, rgba(236,72,153,.05) 30%, transparent 50%);
    animation: arcAuroraB 18s ease-in-out infinite alternate-reverse;
    mix-blend-mode: screen;
}

.ftm-arc-aurora--c {
    background: radial-gradient(ellipse at 50% 60%, rgba(6,182,212,.14) 0%, rgba(16,185,129,.06) 25%, transparent 45%);
    animation: arcAuroraC 22s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}

/* 4th aurora — warm gold pulse */
.ftm-arc-aurora--d {
    background: radial-gradient(ellipse at 40% 70%, rgba(245,158,11,.10) 0%, rgba(236,72,153,.04) 25%, transparent 45%);
    animation: arcAuroraD 26s ease-in-out infinite alternate-reverse;
    mix-blend-mode: screen;
}

@keyframes arcAuroraA {
    0%   { transform: translate(0, 0) scale(1); opacity: .7; }
    25%  { transform: translate(5%, -3%) scale(1.15); opacity: 1; }
    50%  { transform: translate(-3%, 4%) scale(1.08); opacity: .8; }
    75%  { transform: translate(4%, 2%) scale(1.2); opacity: .95; }
    100% { transform: translate(2%, 1%) scale(1.05); opacity: .75; }
}
@keyframes arcAuroraB {
    0%   { transform: translate(0, 0) scale(1.05); opacity: .55; }
    25%  { transform: translate(-5%, 3%) scale(1.25); opacity: .9; }
    50%  { transform: translate(3%, -2%) scale(1.1); opacity: .7; }
    75%  { transform: translate(-4%, 5%) scale(1.18); opacity: .85; }
    100% { transform: translate(-1%, 1%) scale(1); opacity: .6; }
}
@keyframes arcAuroraC {
    0%   { transform: translate(0, 0) scale(1); opacity: .4; }
    25%  { transform: translate(3%, 4%) scale(1.2); opacity: .7; }
    50%  { transform: translate(-2%, -3%) scale(1.12); opacity: .55; }
    75%  { transform: translate(5%, 1%) scale(1.25); opacity: .65; }
    100% { transform: translate(1%, 2%) scale(1.06); opacity: .45; }
}
@keyframes arcAuroraD {
    0%   { transform: translate(0, 0) scale(1); opacity: .3; }
    33%  { transform: translate(-3%, -2%) scale(1.15); opacity: .5; }
    66%  { transform: translate(4%, 3%) scale(1.08); opacity: .4; }
    100% { transform: translate(-1%, -1%) scale(1.02); opacity: .35; }
}

/* ══ Noise Texture Overlay — Depth & Grain ══ */
.ftm-arc-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    background-size: 200px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
    mix-blend-mode: overlay;
}

/* Trading Chart Grid Pattern — Multi-layer perspective grid */
.ftm-arc-hero-mesh {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(59, 130, 246, 0.055) 1px, transparent 1px),
        linear-gradient(0deg, rgba(59, 130, 246, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 92, 246, 0.018) 1px, transparent 1px),
        linear-gradient(0deg, rgba(6, 182, 212, 0.014) 1px, transparent 1px);
    background-size: 120px 80px, 120px 80px, 40px 40px, 40px 40px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 15%, transparent 60%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 15%, transparent 60%);
    pointer-events: none;
    animation: arcGridPulse 8s ease-in-out infinite;
    transform: perspective(1200px) rotateX(3deg);
}

/* Grid crosshair intersections — subtle glowing dots at major grid corners */
.ftm-arc-hero-mesh::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle 1.5px at center, rgba(59, 130, 246, 0.12) 0%, transparent 100%);
    background-size: 120px 80px;
    pointer-events: none;
    animation: arcGridPulse 8s 4s ease-in-out infinite;
}

@keyframes arcGridPulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* Edge fade — Enhanced depth */
.ftm-arc-hero-fade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 30%, var(--arc-bg) 100%),
        linear-gradient(180deg, transparent 50%, rgba(5, 8, 22, 0.4) 100%);
    pointer-events: none;
    z-index: 3;
}

/* ==========================================================================
   TRADING BACKGROUND DECORATIONS — Candlesticks, Chart Lines, Price Levels
   ========================================================================== */

/* ── Animated Candlestick Columns — Enhanced Trading Visualization ── */
.ftm-arc-trading-candles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.ftm-arc-tcandle {
    position: absolute;
    width: 5px;
    height: var(--ch, 40px);
    top: var(--ct, 50%);
    left: var(--cl, 10%);
    border-radius: 2px;
    opacity: 0;
    transform-origin: center bottom;
    animation:
        arcCandleAppear 0.8s calc(var(--ci, 0) * 0.1s + 1s) cubic-bezier(0.22, 1, 0.36, 1) forwards,
        arcCandleFloat 7s calc(var(--ci, 0) * 0.6s + 2.5s) ease-in-out infinite,
        arcCandleBreathe 4s calc(var(--ci, 0) * 0.3s + 3s) ease-in-out infinite;
    transform: translateZ(0);
}

/* Candle wick — extended and colored */
.ftm-arc-tcandle::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    top: -40%;
    bottom: -40%;
    border-radius: 1px;
}

/* Candle body glow + volume bar shadow */
.ftm-arc-tcandle::after {
    content: '';
    position: absolute;
    left: -3px;
    right: -3px;
    bottom: 0;
    height: 120%;
    border-radius: 4px;
    opacity: 0.3;
    filter: blur(6px);
}

/* Bullish (green) candle — enhanced glow */
.ftm-arc-tcandle--g {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.35), rgba(16, 185, 129, 0.15));
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.15), 0 0 30px rgba(16, 185, 129, 0.05);
}

.ftm-arc-tcandle--g::before {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.08));
}

.ftm-arc-tcandle--g::after {
    background: linear-gradient(180deg, transparent, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.03));
}

/* Bearish (red) candle — enhanced glow */
.ftm-arc-tcandle--r {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.28), rgba(239, 68, 68, 0.12));
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.12), 0 0 30px rgba(239, 68, 68, 0.04);
}

.ftm-arc-tcandle--r::before {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.06), rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.06));
}

.ftm-arc-tcandle--r::after {
    background: linear-gradient(180deg, transparent, rgba(239, 68, 68, 0.06), rgba(239, 68, 68, 0.02));
}

@keyframes arcCandleAppear {
    0%   { opacity: 0; transform: scaleY(0) translateY(10px); }
    60%  { opacity: 1; transform: scaleY(1.15) translateY(-2px); }
    80%  { transform: scaleY(0.95) translateY(0); }
    100% { opacity: 1; transform: scaleY(1) translateY(0); }
}

@keyframes arcCandleFloat {
    0%, 100% { transform: translateY(0) scaleY(1); }
    25%      { transform: translateY(-5px) scaleY(1.04); }
    50%      { transform: translateY(-10px) scaleY(0.96); }
    75%      { transform: translateY(-3px) scaleY(1.02); }
}

@keyframes arcCandleBreathe {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50%      { opacity: 0.7; filter: brightness(1.2); }
}

/* ── Price Chart SVG Line ── */
.ftm-arc-chart-line-deco {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: arcChartLineIn 1.5s 1.2s ease-out forwards;
}

@keyframes arcChartLineIn {
    to { opacity: 1; }
}

.ftm-arc-chart-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ftm-arc-chart-line {
    fill: none;
    stroke: url(#arcChartLineGrad);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 2200;
    stroke-dashoffset: 2200;
    animation: arcChartDraw 3s 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.25)) drop-shadow(0 0 25px rgba(16, 185, 129, 0.08));
}

.ftm-arc-chart-line--b {
    stroke: url(#arcChartLine2Grad);
    stroke-width: 1.8;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: arcChartDraw 3.5s 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.15)) drop-shadow(0 0 20px rgba(239, 68, 68, 0.05));
    opacity: 0.7;
}

.ftm-arc-chart-area {
    fill: url(#arcChartFillGrad);
    opacity: 0;
    animation: arcChartAreaIn 1.2s 4s ease-out forwards;
}

@keyframes arcChartDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes arcChartAreaIn {
    to { opacity: 1; }
}

/* ── Moving Price Dot on Chart Line ── */
.ftm-arc-price-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.6), 0 0 30px rgba(16, 185, 129, 0.2);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    /* Fallback for browsers without offset-path */
    bottom: 30%;
    left: 50%;
}

@supports (offset-path: path('M0,0')) {
    .ftm-arc-price-dot {
        bottom: auto;
        left: auto;
        animation: arcPriceDotMove 8s 5s linear infinite;
        offset-path: path('M0,200 C80,190 120,120 200,140 C280,160 320,60 400,80 C480,100 520,30 600,55 C680,80 720,40 800,65 C880,90 920,50 1000,70 C1060,85 1140,45 1200,60');
    }
}

.ftm-arc-price-dot::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid rgba(16, 185, 129, 0.4);
    animation: arcPriceDotRing 1.5s ease-out infinite;
}

@keyframes arcPriceDotMove {
    0%   { offset-distance: 0%; opacity: 0; }
    3%   { opacity: 1; }
    97%  { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}

@keyframes arcPriceDotRing {
    0%   { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* ── Horizontal Price Levels ── */
.ftm-arc-price-levels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.ftm-arc-plevel {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--py, 50%);
    height: 1px;
    opacity: 0;
    animation: arcPriceLevelIn 0.6s calc(var(--pi, 0) * 0.15s + 1.5s) ease-out forwards;
}

.ftm-arc-plevel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        rgba(59, 130, 246, 0.06) 0px,
        rgba(59, 130, 246, 0.06) 6px,
        transparent 6px,
        transparent 14px
    );
}

.ftm-arc-plevel::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    width: 4px;
    height: 7px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 1px;
}

@keyframes arcPriceLevelIn {
    0%   { opacity: 0; transform: scaleX(0); }
    100% { opacity: 0.5; transform: scaleX(1); }
}

/* ── Scanning Price Line — Enhanced with afterglow trail ── */
.ftm-arc-scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    animation: arcScanLine 10s 3s linear infinite;
}

.ftm-arc-scan-line::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 5%, rgba(59, 130, 246, 0.3) 15%, rgba(16, 185, 129, 0.5) 45%, rgba(139, 92, 246, 0.4) 65%, rgba(59, 130, 246, 0.3) 85%, transparent 95%);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2), 0 0 50px rgba(16, 185, 129, 0.08);
    border-radius: 1px;
}

.ftm-arc-scan-line::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 30px;
    background: linear-gradient(180deg, transparent 10%, rgba(59, 130, 246, 0.025) 40%, rgba(16, 185, 129, 0.015) 60%, transparent 90%);
    pointer-events: none;
}

@keyframes arcScanLine {
    0%   { top: 8%; opacity: 0; }
    3%   { opacity: 0.5; }
    50%  { opacity: 0.3; }
    97%  { opacity: 0.5; }
    100% { top: 92%; opacity: 0; }
}

/* ── Hide trading decorations on mobile ── */
@media (max-width: 768px) {
    .ftm-arc-trading-candles,
    .ftm-arc-chart-line-deco,
    .ftm-arc-price-levels,
    .ftm-arc-scan-line {
        display: none;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .ftm-arc-trading-candles,
    .ftm-arc-chart-line-deco,
    .ftm-arc-scan-line {
        display: none !important;
    }
    .ftm-arc-plevel {
        animation: none !important;
        opacity: 0.3;
    }
}

/* ══ Layout: Two-column ══ */

.ftm-arc-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto;
}

.ftm-arc-hero-copy {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.ftm-arc-hero-visual {
    flex-shrink: 0;
    width: 280px;
    height: 280px;
    position: relative;
}

/* ══ Live Chip — Enhanced with animated gradient border ══ */

.ftm-arc-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 16px 5px 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    letter-spacing: 1.1px;
    text-transform: uppercase;
    margin-bottom: 24px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: arcSlideIn .6s .1s cubic-bezier(.22,1,.36,1) both;
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.05), inset 0 0 20px rgba(59, 130, 246, 0.02);
    position: relative;
    overflow: hidden;
}

/* Animated shimmer sweep across chip */
.ftm-arc-hero-chip::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.06), transparent);
    animation: arcChipSweep 4s 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes arcChipSweep {
    0%   { left: -80%; }
    100% { left: 180%; }
}

.ftm-arc-hero-chip:hover {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.08);
    box-shadow: 0 0 35px rgba(59, 130, 246, 0.12), inset 0 0 25px rgba(59, 130, 246, 0.04);
}

.ftm-arc-hero-chip svg { color: var(--arc-accent); flex-shrink: 0; }

.ftm-arc-chip-live {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--arc-green);
    box-shadow: 0 0 6px var(--arc-green), 0 0 18px rgba(16,185,129,.4);
    flex-shrink: 0;
    animation: arcLivePulse 2s ease-in-out infinite;
    position: relative;
}

.ftm-arc-chip-live::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid rgba(16, 185, 129, 0.3);
    animation: arcLiveRipple 2s ease-out infinite;
}

@keyframes arcLivePulse {
    0%,100% { transform: scale(1); opacity: 1; }
    50%     { transform: scale(.75); opacity: .6; }
}

@keyframes arcLiveRipple {
    0%   { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.5); opacity: 0; }
}

@keyframes arcSlideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ══ Title ══ */

.ftm-arc-hero-title {
    font-size: clamp(36px, 5.5vw, 68px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.045em;
    margin: 0 0 20px;
    color: #fff;
}

.ftm-arc-hero-word {
    display: inline;
}

.ftm-arc-hero-word:first-child {
    display: block;
    margin-bottom: 2px;
    animation: arcWordIn .7s .15s cubic-bezier(.22,1,.36,1) both;
}

.ftm-arc-hero-word:nth-child(2) {
    animation: arcWordIn .7s .28s cubic-bezier(.22,1,.36,1) both;
}

.ftm-arc-hero-word:nth-child(3) {
    animation: arcWordIn .7s .38s cubic-bezier(.22,1,.36,1) both;
}

/* Glowing gradient text — Prismatic trading finish with metallic shimmer */
.ftm-arc-glow-text {
    background: linear-gradient(
        135deg,
        var(--arc-accent) 0%,
        var(--arc-cyan) 18%,
        #fff 30%,
        var(--arc-purple) 45%,
        var(--arc-pink) 60%,
        var(--arc-cyan) 75%,
        var(--arc-yellow) 90%,
        var(--arc-accent) 100%
    );
    background-size: 500% 500%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: arcGlowShift 8s ease-in-out infinite;
    filter: drop-shadow(0 0 40px rgba(59, 130, 246, 0.18)) drop-shadow(0 2px 8px rgba(139, 92, 246, 0.12));
    position: relative;
}

@keyframes arcGlowShift {
    0%   { background-position: 0% 50%; }
    25%  { background-position: 50% 100%; }
    50%  { background-position: 100% 50%; }
    75%  { background-position: 50% 0%; }
    100% { background-position: 0% 50%; }
}

/* Title word entrance — more dramatic with scale */
@keyframes arcWordIn {
    from { opacity: 0; transform: translateY(40px) scale(0.95); filter: blur(8px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ══ Description ══ */
.ftm-arc-hero-desc {
    font-size: clamp(14px, 1.3vw, 16px);
    color: var(--arc-text-secondary);
    line-height: 1.75;
    max-width: 520px;
    margin: 0 0 32px;
    animation: arcFadeUp .7s .45s cubic-bezier(.22,1,.36,1) both;
}

@keyframes arcFadeUp {
    from { opacity: 0; transform: translateY(20px); filter: blur(3px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ══ Micro Stats Strip ══ */

.ftm-arc-hero-micro {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 14px 24px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: var(--arc-radius-md);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: arcFadeUp .7s .58s cubic-bezier(.22,1,.36,1) both;
    max-width: max-content;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 0 20px rgba(59, 130, 246, 0.02);
}

.ftm-arc-hero-micro::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.04), transparent);
    animation: arcMicroSweep 5s 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes arcMicroSweep {
    0%   { left: -60%; }
    100% { left: 160%; }
}

.ftm-arc-hero-micro:hover {
    border-color: rgba(59, 130, 246, 0.18);
    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.08), inset 0 0 25px rgba(59, 130, 246, 0.03);
    transform: translateY(-1px);
}

.ftm-arc-micro-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
}

.ftm-arc-micro-item:first-child { padding-left: 0; }
.ftm-arc-micro-item:last-child  { padding-right: 0; }

.ftm-arc-micro-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ftm-arc-micro-item[data-accent="blue"]   .ftm-arc-micro-dot { background: var(--arc-accent); box-shadow: 0 0 8px rgba(59,130,246,.4); }
.ftm-arc-micro-item[data-accent="green"]  .ftm-arc-micro-dot { background: var(--arc-green); box-shadow: 0 0 8px rgba(16,185,129,.4); }
.ftm-arc-micro-item[data-accent="purple"] .ftm-arc-micro-dot { background: var(--arc-purple); box-shadow: 0 0 8px rgba(139,92,246,.4); }
.ftm-arc-micro-item[data-accent="cyan"]   .ftm-arc-micro-dot { background: var(--arc-cyan); box-shadow: 0 0 8px rgba(6,182,212,.4); }

.ftm-arc-micro-val {
    font-family: var(--arc-mono);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.02em;
    transition: color .45s, transform .35s cubic-bezier(.34,1.56,.64,1);
    white-space: nowrap;
}

.ftm-arc-micro-val.ftm-arc-positive { color: var(--arc-green); }
.ftm-arc-micro-val.ftm-arc-negative { color: var(--arc-red); }
.ftm-arc-micro-val.ftm-arc-pop      { transform: scale(1.15); }

.ftm-arc-micro-lbl {
    font-size: 10px;
    color: var(--arc-text-muted);
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 600;
    white-space: nowrap;
}

.ftm-arc-micro-sep {
    display: block;
    width: 1px;
    height: 28px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.08), transparent);
    flex-shrink: 0;
}

/* ══ Holographic Visual ══ */

.ftm-arc-holo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Concentric rings */
.ftm-arc-holo-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.04);
}

.ftm-arc-holo-ring--outer {
    width: 280px;
    height: 280px;
    border: 2px dashed rgba(59,130,246,.14);
    animation: arcRingSpin 30s linear infinite, arcRingPulse 6s ease-in-out infinite;
    background: conic-gradient(from 0deg, transparent, rgba(59,130,246,.08) 60deg, transparent 120deg, rgba(139,92,246,.07) 180deg, transparent 240deg, rgba(16,185,129,.06) 300deg, transparent);
    box-shadow: 0 0 35px rgba(59,130,246,.08), inset 0 0 35px rgba(59,130,246,.04);
}

/* Floating data point on outer ring */
.ftm-arc-holo-ring--outer::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--arc-accent);
    box-shadow: 0 0 10px var(--arc-accent-glow), 0 0 25px rgba(59,130,246,.15);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: arcDataDotPulse 2s ease-in-out infinite;
}

@keyframes arcRingPulse {
    0%, 100% { box-shadow: 0 0 35px rgba(59,130,246,.08), inset 0 0 35px rgba(59,130,246,.04); }
    50%      { box-shadow: 0 0 50px rgba(59,130,246,.12), inset 0 0 50px rgba(59,130,246,.06); }
}

@keyframes arcDataDotPulse {
    0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
    50%      { opacity: 0.6; transform: translateX(-50%) scale(1.4); }
}

.ftm-arc-holo-ring--mid {
    width: 210px;
    height: 210px;
    border: 1.5px solid rgba(139,92,246,.12);
    border-top-color: rgba(139,92,246,.35);
    border-right-color: rgba(59,130,246,.18);
    border-bottom-color: transparent;
    border-left-color: transparent;
    animation: arcRingSpin 22s linear infinite reverse, arcRingMidGlow 5s ease-in-out infinite;
    box-shadow: 0 0 25px rgba(139,92,246,.06);
}

/* Data point on mid ring */
.ftm-arc-holo-ring--mid::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--arc-purple);
    box-shadow: 0 0 8px var(--arc-purple-glow);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: arcDataDotPulse 2.5s 0.5s ease-in-out infinite;
}

@keyframes arcRingMidGlow {
    0%, 100% { box-shadow: 0 0 25px rgba(139,92,246,.06); }
    50%      { box-shadow: 0 0 40px rgba(139,92,246,.1); }
}

.ftm-arc-holo-ring--inner {
    width: 150px;
    height: 150px;
    border: 1px dashed rgba(6,182,212,.12);
    animation: arcRingSpin 16s linear infinite, arcRingInnerGlow 4s ease-in-out infinite;
    background: conic-gradient(from 45deg, transparent, rgba(6,182,212,.06) 90deg, transparent 180deg);
    box-shadow: 0 0 20px rgba(6,182,212,.05);
}

/* Data point on inner ring */
.ftm-arc-holo-ring--inner::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--arc-cyan);
    box-shadow: 0 0 8px var(--arc-cyan-glow);
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    animation: arcDataDotPulse 3s 1s ease-in-out infinite;
}

@keyframes arcRingInnerGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(6,182,212,.05); }
    50%      { box-shadow: 0 0 35px rgba(6,182,212,.09); }
}

@keyframes arcRingSpin {
    to { transform: rotate(360deg); }
}

/* Center gauge */
.ftm-arc-holo-core {
    position: relative;
    width: 120px;
    height: 120px;
}

.ftm-arc-holo-gauge {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ftm-arc-gauge-track {
    fill: none;
    stroke: rgba(255,255,255,.04);
    stroke-width: 4;
}

.ftm-arc-gauge-fill {
    fill: none;
    stroke: url(#arcGaugeGrad);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 326.73;
    stroke-dashoffset: 326.73;
    transition: stroke-dashoffset 1.6s cubic-bezier(.22,1,.36,1);
    filter: drop-shadow(0 0 12px rgba(59,130,246,.5)) drop-shadow(0 0 28px rgba(139,92,246,.25)) drop-shadow(0 0 45px rgba(6,182,212,.1));
    animation: arcGaugeGlow 3s 2s ease-in-out infinite;
}

@keyframes arcGaugeGlow {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(59,130,246,.5)) drop-shadow(0 0 28px rgba(139,92,246,.25)) drop-shadow(0 0 45px rgba(6,182,212,.1)); }
    50%      { filter: drop-shadow(0 0 18px rgba(59,130,246,.6)) drop-shadow(0 0 35px rgba(139,92,246,.35)) drop-shadow(0 0 55px rgba(6,182,212,.15)); }
}

.ftm-arc-gauge-track {
    stroke-dasharray: 4 8;
    stroke: rgba(255,255,255,.06);
}

/* Label inside gauge */
.ftm-arc-holo-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ftm-arc-holo-pct {
    font-family: var(--arc-mono);
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.03em;
    line-height: 1;
    transition: color .5s, transform .4s cubic-bezier(.34,1.56,.64,1), text-shadow .5s;
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}

.ftm-arc-holo-pct.ftm-arc-pop { transform: scale(1.2); text-shadow: 0 0 30px rgba(59, 130, 246, 0.4); }

/* Visual entrance — enhanced 3D spin */
.ftm-arc-hero-visual {
    animation: arcVisualIn .9s .5s cubic-bezier(.22,1,.36,1) both;
}

@keyframes arcVisualIn {
    0%   { opacity: 0; transform: scale(.6) rotate(-20deg) translateY(20px); filter: blur(15px); }
    50%  { opacity: 1; transform: scale(1.06) rotate(3deg) translateY(-4px); filter: blur(0); }
    75%  { transform: scale(0.98) rotate(-1deg) translateY(1px); }
    100% { opacity: 1; transform: scale(1) rotate(0) translateY(0); filter: blur(0); }
}

.ftm-arc-holo-sub {
    font-size: 9px;
    color: var(--arc-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-top: 3px;
}


/* ==========================================================================
   TOOLBAR — Advanced Command Bar
   ========================================================================== */

.ftm-arc-toolbar {
    position: sticky;
    top: 8px;
    z-index: 100;
    margin-bottom: 20px;
    border-radius: var(--arc-radius);
    border: 1px solid var(--arc-border);
    background: linear-gradient(180deg, rgba(14, 20, 40, 0.92), rgba(10, 14, 30, 0.96));
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.03), 0 0 60px rgba(59, 130, 246, 0.03);
    overflow: hidden;
    animation: arcFadeUp 0.5s 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: box-shadow 0.3s, border-color 0.3s, transform 0.2s;
}

.ftm-arc-toolbar:hover {
    border-color: var(--arc-border-hover);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 80px rgba(59, 130, 246, 0.05);
    transform: translateY(-1px);
}

.ftm-arc-toolbar-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--arc-accent), var(--arc-purple), var(--arc-cyan));
    background-size: 200% 100%;
    animation: arcToolbarAccent 6s linear infinite;
    border-radius: var(--arc-radius) var(--arc-radius) 0 0;
}

@keyframes arcToolbarAccent {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

.ftm-arc-toolbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    flex-wrap: wrap;
}

.ftm-arc-toolbar-left,
.ftm-arc-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---- Toolbar Separator ---- */
.ftm-arc-toolbar-sep {
    width: 1px;
    height: 24px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.08), transparent);
    flex-shrink: 0;
}

/* ---- View Switcher with Sliding Pill ---- */
.ftm-arc-view-switcher {
    display: flex;
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--arc-radius-sm);
    padding: 3px;
    border: 1px solid var(--arc-border);
    gap: 2px;
}

.ftm-arc-view-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    height: calc(100% - 6px);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--arc-accent), #6366f1);
    box-shadow: 0 0 16px var(--arc-accent-glow), 0 0 30px rgba(99, 102, 241, 0.1), inset 0 1px 0 rgba(255,255,255,.15);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
    pointer-events: none;
}

.ftm-arc-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    border: none;
    background: transparent;
    color: var(--arc-text-muted);
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.25s;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--arc-font);
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.ftm-arc-view-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.ftm-arc-view-btn:hover {
    color: var(--arc-text);
}

.ftm-arc-view-btn.active {
    color: #fff;
}

/* ---- Search ---- */
.ftm-arc-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 34px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius-sm);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    color: var(--arc-text-muted);
    min-width: 180px;
}

.ftm-arc-search-wrap:focus-within {
    border-color: var(--arc-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08), 0 0 20px rgba(59, 130, 246, 0.06), inset 0 0 15px rgba(59, 130, 246, 0.02);
    background: rgba(59, 130, 246, 0.05);
    min-width: 220px;
}

.ftm-arc-search-icon {
    flex-shrink: 0;
    transition: color 0.25s;
}

.ftm-arc-search-wrap:focus-within .ftm-arc-search-icon {
    color: var(--arc-accent);
}

.ftm-arc-search {
    border: none;
    background: transparent;
    color: var(--arc-text);
    font-size: 12.5px;
    font-family: var(--arc-font);
    flex: 1;
    min-width: 0;
    outline: none;
}

.ftm-arc-search::placeholder {
    color: var(--arc-text-muted);
    font-weight: 400;
}

.ftm-arc-search-kbd {
    font-family: var(--arc-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--arc-text-muted);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 1px 6px;
    line-height: 1.4;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.ftm-arc-search-wrap:focus-within .ftm-arc-search-kbd {
    opacity: 0;
}

/* ---- Sort ---- */
.ftm-arc-sort-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius-sm);
    transition: border-color 0.25s;
}

.ftm-arc-sort-wrap:hover {
    border-color: var(--arc-border-hover);
}

.ftm-arc-sort-icon {
    color: var(--arc-text-muted);
    flex-shrink: 0;
}

.ftm-arc-sort-select {
    background: transparent;
    border: none;
    color: var(--arc-text);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--arc-font);
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
}

.ftm-arc-sort-select:focus { outline: none; }

.ftm-arc-sort-select option {
    background: #0a0e1a;
    color: var(--arc-text);
}

/* ---- Refresh Button ---- */
.ftm-arc-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--arc-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--arc-text-muted);
    border-radius: var(--arc-radius-sm);
    cursor: pointer;
    transition: all 0.25s;
    font-family: var(--arc-font);
}

.ftm-arc-refresh-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.ftm-arc-refresh-btn:hover {
    color: var(--arc-accent);
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.08);
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.12), 0 0 40px rgba(59, 130, 246, 0.04);
    transform: translateY(-1px);
}

.ftm-arc-refresh-btn.spinning svg {
    animation: arcSpin 0.7s linear infinite;
}

.ftm-arc-refresh-btn.spinning {
    color: var(--arc-accent);
    border-color: rgba(59, 130, 246, 0.3);
}

@keyframes arcSpin {
    to { transform: rotate(360deg); }
}

/* ---- Live Status Badge ---- */
.ftm-arc-toolbar-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 28px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.18);
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--arc-green);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.05), inset 0 0 12px rgba(16, 185, 129, 0.03);
    animation: arcStatusBreathe 4s ease-in-out infinite;
}

@keyframes arcStatusBreathe {
    0%, 100% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.05), inset 0 0 12px rgba(16, 185, 129, 0.03); }
    50%      { box-shadow: 0 0 25px rgba(16, 185, 129, 0.08), inset 0 0 18px rgba(16, 185, 129, 0.05); }
}

.ftm-arc-toolbar-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--arc-green);
    box-shadow: 0 0 6px var(--arc-green-glow);
    animation: arcToolbarDotPulse 2s ease-in-out infinite;
}

@keyframes arcToolbarDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.ftm-arc-toolbar-status-text {
    line-height: 1;
}


/* ==========================================================================
   AI INSIGHTS BAR — Smart Intelligence Strip
   ========================================================================== */

.ftm-arc-insights {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: var(--arc-bg-card);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: var(--arc-radius-md);
    margin-bottom: 24px;
    animation: arcFadeUp 0.5s 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.04);
}

.ftm-arc-insights:hover {
    border-color: rgba(139, 92, 246, 0.25);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.08), 0 4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.ftm-arc-insights-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.04) 30%, rgba(59, 130, 246, 0.04) 70%, transparent 100%);
    animation: arcInsightGlow 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes arcInsightGlow {
    0%   { transform: translateX(-100%); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

.ftm-arc-insight-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(59, 130, 246, 0.12));
    color: var(--arc-purple);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.08);
}

.ftm-arc-insights:hover .ftm-arc-insight-icon {
    transform: scale(1.08) rotate(5deg);
    box-shadow: 0 0 24px rgba(139, 92, 246, 0.18);
}

.ftm-arc-insight-icon.thinking {
    animation: arcInsightThink 1.5s ease-in-out infinite;
}

@keyframes arcInsightThink {
    0%, 100% { transform: scale(1) rotate(0); }
    25% { transform: scale(1.1) rotate(5deg); }
    50% { transform: scale(1.05) rotate(-3deg); }
    75% { transform: scale(1.12) rotate(3deg); }
}

.ftm-arc-insight-body {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.ftm-arc-insight-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--arc-purple);
    margin-bottom: 3px;
    opacity: 0.8;
}

.ftm-arc-insight-text {
    font-size: 13px;
    color: var(--arc-text-secondary);
    line-height: 1.55;
    transition: opacity 0.3s, transform 0.3s;
}

.ftm-arc-insight-text.transitioning {
    opacity: 0;
    transform: translateY(6px);
}

.ftm-arc-insight-text strong {
    color: #fff;
    font-weight: 600;
}

.ftm-arc-insight-text .ftm-arc-insight-positive {
    color: var(--arc-green);
    font-weight: 700;
    font-family: var(--arc-mono);
    font-size: 12.5px;
}

.ftm-arc-insight-text .ftm-arc-insight-negative {
    color: var(--arc-red);
    font-weight: 700;
    font-family: var(--arc-mono);
    font-size: 12.5px;
}

.ftm-arc-insight-text .ftm-arc-insight-neutral {
    color: var(--arc-accent);
    font-weight: 600;
    font-family: var(--arc-mono);
    font-size: 12.5px;
}

/* ---- Insight Actions ---- */
.ftm-arc-insight-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.ftm-arc-insight-cycle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    color: var(--arc-text-muted);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s;
}

.ftm-arc-insight-cycle:hover {
    color: var(--arc-purple);
    border-color: rgba(139, 92, 246, 0.25);
    background: rgba(139, 92, 246, 0.08);
}


/* ==========================================================================
   GRID VIEW — Bot Cards
   ========================================================================== */

.ftm-arc-bots-container [data-view] {
    display: none;
}

.ftm-arc-bots-container [data-view].active {
    display: block;
}

.ftm-arc-grid.active {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
    gap: 28px;
}

/* ---- Card Base — 3D Perspective Container ---- */
.ftm-arc-card {
    position: relative;
    border-radius: var(--arc-radius);
    cursor: pointer;
    animation: arcRevealIn 0.5s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--card-index, 0) * 80ms + 0.4s);
    will-change: transform, opacity;
    contain: layout style paint;
    perspective: 1200px;
}

@keyframes arcRevealIn {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Glow div hidden — replaced by CSS accent line */
.ftm-arc-card-glow { display: none; }

/* ---- Card Inner — Dashboard Glass Panel with 3D ---- */
.ftm-arc-card-inner {
    position: relative;
    z-index: 1;
    background: linear-gradient(145deg, rgba(20, 27, 45, .92), rgba(14, 20, 36, .88));
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--arc-radius);
    padding: 24px;
    transition: transform 0.35s cubic-bezier(.4, 0, .2, 1),
                border-color 0.35s cubic-bezier(.4, 0, .2, 1),
                box-shadow 0.35s cubic-bezier(.4, 0, .2, 1),
                background 0.35s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
    --_accent: var(--arc-text-muted);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 3px Dashboard-Style Accent Top-Line */
.ftm-arc-card-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 5%, var(--_accent) 50%, transparent 95%);
    border-radius: var(--arc-radius) var(--arc-radius) 0 0;
    opacity: 0.5;
    transition: opacity 0.25s, box-shadow 0.25s;
    z-index: 3;
}

.ftm-arc-card:hover .ftm-arc-card-inner::before {
    opacity: 1;
    box-shadow: 0 0 16px color-mix(in srgb, var(--_accent) 30%, transparent);
}

/* Status-Driven Accent */
.ftm-arc-card[data-status="running"] .ftm-arc-card-inner  { --_accent: var(--arc-green); }
.ftm-arc-card[data-status="stopped"] .ftm-arc-card-inner  { --_accent: var(--arc-red); }
.ftm-arc-card[data-status="offline"] .ftm-arc-card-inner  { --_accent: var(--arc-yellow); }

/* Card Hover — Dashboard Refined with 3D lift */
.ftm-arc-card:hover .ftm-arc-card-inner {
    transform: translateY(-4px) rotateX(1deg);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08), 0 0 60px rgba(59, 130, 246, 0.04);
    background: linear-gradient(145deg, rgba(26, 35, 64, .92), rgba(20, 27, 45, .88));
}

/* Mesh decoration — hidden (dashboard doesn't use it) */
.ftm-arc-card-mesh { display: none; }

/* Shimmer sweep on hover */
.ftm-arc-card-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .02) 45%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .02) 55%, transparent 70%);
    transition: left 0.6s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
    z-index: 0;
}

.ftm-arc-card:hover .ftm-arc-card-inner::after {
    left: 100%;
}

/* ---- Card Header ---- */
.ftm-arc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    position: relative;
    z-index: 2;
}

.ftm-arc-card-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ftm-arc-card-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--arc-text-muted);
    position: relative;
    transition: background 0.25s, box-shadow 0.25s;
}

.ftm-arc-card-pulse::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    opacity: 0;
}

.ftm-arc-card-pulse.running {
    background: var(--arc-green);
    color: var(--arc-green);
    box-shadow: 0 0 8px var(--arc-green-glow);
}

.ftm-arc-card-pulse.running::before {
    opacity: 1;
    animation: arcPulseRing 2s ease-out infinite;
}

@keyframes arcPulseRing {
    0%   { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(2.2); opacity: 0; }
}

.ftm-arc-card-pulse.stopped {
    background: var(--arc-red);
    box-shadow: 0 0 6px var(--arc-red-glow);
}

.ftm-arc-card-status-text {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--arc-text-muted);
    transition: color 0.4s;
}

.ftm-arc-card-status-text.running { color: var(--arc-green); }
.ftm-arc-card-status-text.stopped { color: var(--arc-red); }

/* Rank Badge */
.ftm-arc-card-rank {
    font-size: 11px;
    font-weight: 800;
    color: var(--arc-accent);
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 10px;
    padding: 4px 12px;
    font-family: var(--arc-mono);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    letter-spacing: 0.5px;
}

.ftm-arc-card:hover .ftm-arc-card-rank {
    background: rgba(59, 130, 246, 0.16);
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: 0 0 20px var(--arc-accent-glow), 0 0 40px rgba(59, 130, 246, 0.06);
    transform: scale(1.08);
}

/* ---- Card Title ---- */
.ftm-arc-card-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 2;
    transition: text-shadow 0.4s;
}

.ftm-arc-card:hover .ftm-arc-card-title {
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
}

/* ---- Info Tags ---- */
.ftm-arc-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.ftm-arc-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--arc-text-secondary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    transition: all 0.25s;
}

.ftm-arc-card:hover .ftm-arc-tag {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.ftm-arc-tag-accent {
    color: var(--arc-accent);
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.15);
}

.ftm-arc-tag-exchange {
    color: var(--arc-cyan);
    background: rgba(6, 182, 212, 0.08);
    border-color: rgba(6, 182, 212, 0.15);
}

.ftm-arc-tag-mode {
    color: var(--arc-purple);
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.15);
}

/* ---- Profit Hero Zone ---- */
.ftm-arc-card-profit-zone {
    position: relative;
    padding: 18px 22px;
    margin: 0 -24px 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.005));
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

/* Glow div hidden — using CSS-only ambient glow */
.ftm-arc-profit-glow { display: none; }

/* Ambient glow via the zone background itself */
.ftm-arc-card-profit-zone:has(.ftm-arc-profit-amount.positive) {
    background: linear-gradient(135deg, rgba(16, 185, 129, .04), rgba(16, 185, 129, .01));
}

.ftm-arc-card-profit-zone:has(.ftm-arc-profit-amount.negative) {
    background: linear-gradient(135deg, rgba(239, 68, 68, .04), rgba(239, 68, 68, .01));
}

.ftm-arc-profit-amount {
    display: block;
    font-size: 28px;
    font-weight: 900;
    font-family: var(--arc-mono);
    letter-spacing: -0.03em;
    color: var(--arc-text);
    line-height: 1.2;
    position: relative;
    z-index: 1;
    transition: color 0.25s, text-shadow 0.25s;
    font-variant-numeric: tabular-nums;
}

.ftm-arc-profit-amount.positive {
    color: var(--arc-green);
    text-shadow: 0 0 35px var(--arc-green-glow), 0 0 80px rgba(16, 185, 129, 0.08);
}

.ftm-arc-profit-amount.negative {
    color: var(--arc-red);
    text-shadow: 0 0 35px var(--arc-red-glow), 0 0 80px rgba(239, 68, 68, 0.08);
}

.ftm-arc-profit-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    position: relative;
    z-index: 1;
}

.ftm-arc-profit-wr {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--arc-mono);
    color: var(--arc-text-secondary);
}

.ftm-arc-profit-wr svg {
    color: var(--arc-green);
    opacity: 0.7;
}

.ftm-arc-profit-sep {
    color: var(--arc-text-muted);
    opacity: 0.4;
    font-size: 14px;
}

.ftm-arc-profit-tc {
    font-size: 12px;
    color: var(--arc-text-muted);
    font-weight: 500;
}

.ftm-arc-profit-tc span {
    font-family: var(--arc-mono);
    font-weight: 600;
    color: var(--arc-text-secondary);
}

/* ---- Cumulative P/L Chart ---- */
.ftm-arc-card-chart {
    margin-bottom: 18px;
    border-radius: var(--arc-radius-sm);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    position: relative;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.ftm-arc-card:hover .ftm-arc-card-chart {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 25px rgba(0, 229, 176, 0.06), inset 0 0 15px rgba(0, 229, 176, 0.02);
}

.ftm-arc-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 4px;
}

.ftm-arc-chart-label {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--arc-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ftm-arc-chart-value {
    font-family: var(--arc-mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--arc-text-secondary);
    transition: color 0.3s;
}

.ftm-arc-chart-value.positive { color: #00e5b0; }
.ftm-arc-chart-value.negative { color: #ff5c5c; }

.ftm-arc-chart-body {
    position: relative;
    height: 72px;
    padding: 0 4px 6px;
}

.ftm-arc-chart-canvas {
    width: 100%;
    height: 100%;
    display: block;
    transform: translateZ(0);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.ftm-arc-chart-canvas.loaded {
    opacity: 1;
}

/* Skeleton loader */
.ftm-arc-chart-skeleton {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    transition: opacity 0.4s ease;
}

.ftm-arc-chart-skeleton.hidden {
    opacity: 0;
    pointer-events: none;
}

.ftm-arc-chart-skeleton-wave {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 30%,
        rgba(255, 255, 255, 0.03) 45%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.03) 55%,
        transparent 70%
    );
    background-size: 250% 100%;
    animation: ftm-chart-shimmer 1.8s ease-in-out infinite;
}

@keyframes ftm-chart-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ftm-arc-chart-canvas.no-data {
    opacity: 0.6;
}

/* ---- Metrics Grid ---- */
.ftm-arc-card-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-bottom: 18px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--arc-radius-sm);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: border-color 0.25s;
}

.ftm-arc-card:hover .ftm-arc-card-metrics {
    border-color: rgba(255, 255, 255, 0.09);
}

.ftm-arc-metric {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 10px;
    background: rgba(10, 14, 32, 0.7);
    text-align: center;
    transition: background 0.25s;
    position: relative;
}

.ftm-arc-card:hover .ftm-arc-metric {
    background: rgba(14, 20, 40, 0.7);
}

.ftm-arc-metric-label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--arc-text-muted);
    font-weight: 600;
}

.ftm-arc-metric-value {
    font-size: 15px;
    font-weight: 700;
    font-family: var(--arc-mono);
    color: var(--arc-text);
    letter-spacing: -0.02em;
    transition: color 0.25s;
    font-variant-numeric: tabular-nums;
}

.ftm-arc-metric-value.positive { color: var(--arc-green); }
.ftm-arc-metric-value.negative { color: var(--arc-red); }

/* Per-Metric Accent Colors (matching dashboard conventions) */
.ftm-arc-metric[data-metric="open_trades"] .ftm-arc-metric-label { color: var(--arc-accent); }
.ftm-arc-metric[data-metric="open_trades"] .ftm-arc-metric-value { color: var(--arc-accent); }

.ftm-arc-metric[data-metric="max_drawdown"] .ftm-arc-metric-label { color: rgba(239, 68, 68, .6); }
.ftm-arc-metric[data-metric="max_drawdown"] .ftm-arc-metric-value { color: var(--arc-red); }

.ftm-arc-metric[data-metric="profit_factor"] .ftm-arc-metric-label { color: rgba(16, 185, 129, .6); }
.ftm-arc-metric[data-metric="profit_factor"] .ftm-arc-metric-value.positive { color: var(--arc-green); }

.ftm-arc-metric[data-metric="sharpe_ratio"] .ftm-arc-metric-label { color: rgba(6, 182, 212, .6); }
.ftm-arc-metric[data-metric="sharpe_ratio"] .ftm-arc-metric-value { color: var(--arc-cyan); }

.ftm-arc-metric[data-metric="avg_duration"] .ftm-arc-metric-label { color: rgba(139, 92, 246, .6); }
.ftm-arc-metric[data-metric="avg_duration"] .ftm-arc-metric-value { color: var(--arc-purple); }

/* Win Rate Threshold Colors */
.ftm-arc-profit-wr .wr-high  { color: var(--arc-green); }
.ftm-arc-profit-wr .wr-mid   { color: var(--arc-yellow); }
.ftm-arc-profit-wr .wr-low   { color: var(--arc-red); }

/* ---- Card Footer ---- */
.ftm-arc-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 2;
}

.ftm-arc-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    background: linear-gradient(135deg, var(--arc-accent), #6366f1);
    border-radius: var(--arc-radius-sm);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.15);
}

.ftm-arc-card-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 60%);
    opacity: 0;
    transition: opacity 0.25s;
}

.ftm-arc-card-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px var(--arc-accent-glow), 0 0 0 1px rgba(99, 102, 241, 0.3), 0 0 50px rgba(99, 102, 241, 0.08);
}

.ftm-arc-card-cta:hover::before {
    opacity: 1;
}

.ftm-arc-card-cta svg {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ftm-arc-card-cta:hover svg {
    transform: translateX(4px);
}

.ftm-arc-card-updated {
    font-size: 10px;
    color: var(--arc-text-muted);
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* ---- Running Card Breathing Animation ---- */
.ftm-arc-card[data-status="running"] {
    animation:
        arcRevealIn 0.5s calc(var(--card-index, 0) * 80ms + 0.4s) cubic-bezier(.22, 1, .36, 1) both,
        arcRunGlow 4s 1.5s ease-in-out infinite;
}

@keyframes arcRunGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(16, 185, 129, 0); }
    50%      { box-shadow: 0 0 25px rgba(16, 185, 129, 0.08), 0 0 70px rgba(16, 185, 129, 0.03), 0 0 100px rgba(16, 185, 129, 0.01); }
}

/* Stopped card dimming */
.ftm-arc-card[data-status="stopped"] .ftm-arc-card-inner {
    opacity: 0.82;
    filter: saturate(0.7);
}

.ftm-arc-card[data-status="stopped"]:hover .ftm-arc-card-inner {
    opacity: 1;
    filter: saturate(1);
}


/* ==========================================================================
   LIST VIEW — Next-Gen Smart Table
   ========================================================================== */

.ftm-arc-list.active {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
}

/* ---- Header Row ---- */
.ftm-arc-list-header {
    display: grid;
    grid-template-columns: 42px 2.2fr 1.1fr 110px 0.9fr 0.9fr 0.8fr 0.7fr 100px 36px;
    gap: 10px;
    padding: 10px 20px 10px 24px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ftm-arc-lh-cell {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--arc-text-muted);
    user-select: none;
}

/* ---- Row: Glass card style ---- */
.ftm-arc-list-row {
    position: relative;
    display: grid;
    grid-template-columns: 42px 2.2fr 1.1fr 110px 0.9fr 0.9fr 0.8fr 0.7fr 100px 36px;
    gap: 10px;
    align-items: center;
    padding: 14px 20px 14px 24px;
    text-decoration: none;
    color: var(--arc-text);
    border-radius: var(--arc-radius-md);
    border: 1px solid transparent;
    background: linear-gradient(145deg, rgba(14, 20, 36, 0.55), rgba(14, 20, 36, 0.35));
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(.4, 0, .2, 1),
                border-color 0.25s,
                background 0.25s,
                box-shadow 0.25s;
    animation: arcRowReveal 0.45s calc(var(--row-index, 0) * 60ms + 0.5s) cubic-bezier(0.22, 1, 0.36, 1) both;
    transform: translateZ(0);
    contain: layout style paint;
}

@keyframes arcRowReveal {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Status accent bar (left edge) — animated */
.ftm-arc-lr-accent {
    position: absolute;
    left: 0;
    top: 14%;
    bottom: 14%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--arc-text-muted);
    opacity: 0.5;
    transition: all 0.35s cubic-bezier(.34, 1.56, .64, 1);
}

.ftm-arc-list-row[data-status="running"] .ftm-arc-lr-accent {
    background: var(--arc-green);
    opacity: 1;
    box-shadow: 0 0 8px var(--arc-green-glow);
}

.ftm-arc-list-row[data-status="stopped"] .ftm-arc-lr-accent {
    background: var(--arc-red);
    opacity: 0.8;
}

.ftm-arc-list-row[data-status="offline"] .ftm-arc-lr-accent {
    background: var(--arc-yellow);
    opacity: 0.7;
}

/* Hover state — enhanced with glow */
.ftm-arc-list-row:hover {
    transform: translateY(-2px);
    background: linear-gradient(145deg, rgba(20, 27, 45, 0.78), rgba(14, 20, 36, 0.65));
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 40px rgba(59, 130, 246, 0.03);
}

.ftm-arc-list-row:hover .ftm-arc-lr-accent {
    top: 6%;
    bottom: 6%;
    opacity: 1;
    width: 4px;
}

/* ---- Rank ---- */
.ftm-arc-lr-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-family: var(--arc-mono);
    font-weight: 700;
    font-size: 12px;
    color: var(--arc-text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ftm-arc-list-row:hover .ftm-arc-lr-rank {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.25);
    color: var(--arc-accent);
    transform: scale(1.06);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.08);
}

/* Top 3 medals */
.ftm-arc-list-row:nth-child(2) .ftm-arc-lr-rank  { color: #fbbf24; background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.15); }
.ftm-arc-list-row:nth-child(3) .ftm-arc-lr-rank  { color: #c0c0c0; background: rgba(192, 192, 192, 0.08); border-color: rgba(192, 192, 192, 0.12); }
.ftm-arc-list-row:nth-child(4) .ftm-arc-lr-rank  { color: #cd7f32; background: rgba(205, 127, 50, 0.08); border-color: rgba(205, 127, 50, 0.12); }

/* ---- Strategy Name + Badges ---- */
.ftm-arc-lr-name {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ftm-arc-lr-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

.ftm-arc-list-row:hover .ftm-arc-lr-title {
    color: var(--arc-accent);
}

.ftm-arc-lr-meta {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.ftm-arc-lr-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.6;
    white-space: nowrap;
}

.ftm-arc-lr-badge-exchange {
    background: rgba(6, 182, 212, 0.1);
    color: var(--arc-cyan);
    border: 1px solid rgba(6, 182, 212, 0.12);
}

.ftm-arc-lr-badge-mode {
    background: rgba(139, 92, 246, 0.1);
    color: var(--arc-purple);
    border: 1px solid rgba(139, 92, 246, 0.12);
}

.ftm-arc-lr-badge-tf {
    background: rgba(59, 130, 246, 0.1);
    color: var(--arc-accent);
    border: 1px solid rgba(59, 130, 246, 0.12);
}

/* ---- Profit ---- */
.ftm-arc-lr-profit {
    display: flex;
    align-items: center;
}

.ftm-arc-lr-profit-value {
    font-family: var(--arc-mono);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.02em;
    transition: text-shadow 0.3s;
}

.ftm-arc-lr-profit-value.positive {
    color: #00e5b0;
    text-shadow: 0 0 14px rgba(0, 229, 176, 0.25);
}

.ftm-arc-lr-profit-value.negative {
    color: #ff5c5c;
    text-shadow: 0 0 12px rgba(255, 92, 92, 0.15);
}

/* ---- Inline Mini Chart ---- */
.ftm-arc-lr-chart {
    display: flex;
    align-items: center;
    height: 32px;
}

.ftm-arc-lr-chart-canvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 4px;
    transform: translateZ(0);
}

/* ---- Win Rate with visual bar ---- */
.ftm-arc-lr-winrate {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ftm-arc-lr-wr-text {
    font-family: var(--arc-mono);
    font-weight: 600;
    font-size: 13px;
    transition: color 0.3s;
}

.ftm-arc-lr-wr-text.wr-high { color: var(--arc-green); }
.ftm-arc-lr-wr-text.wr-mid  { color: var(--arc-yellow); }
.ftm-arc-lr-wr-text.wr-low  { color: var(--arc-red); }

.ftm-arc-lr-wr-bar {
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.ftm-arc-lr-wr-fill {
    height: 100%;
    border-radius: 2px;
    width: 0%;
    background: var(--arc-text-muted);
    transition: width 0.6s cubic-bezier(.34, 1.56, .64, 1), background 0.3s;
}

.ftm-arc-lr-wr-fill.wr-high { background: var(--arc-green); box-shadow: 0 0 6px var(--arc-green-glow); }
.ftm-arc-lr-wr-fill.wr-mid  { background: var(--arc-yellow); }
.ftm-arc-lr-wr-fill.wr-low  { background: var(--arc-red); }

/* ---- Trades ---- */
.ftm-arc-lr-trades {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ftm-arc-lr-trades-total {
    font-family: var(--arc-mono);
    font-weight: 600;
    font-size: 13px;
    color: var(--arc-text);
}

.ftm-arc-lr-trades-detail {
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: var(--arc-mono);
    font-size: 10px;
}

.ftm-arc-lr-wins  { color: var(--arc-green); font-weight: 600; }
.ftm-arc-lr-losses { color: var(--arc-red); font-weight: 600; }
.ftm-arc-lr-trades-sep { color: var(--arc-text-muted); }

/* ---- Drawdown ---- */
.ftm-arc-lr-drawdown {
    font-family: var(--arc-mono);
    font-weight: 600;
    font-size: 13px;
    color: var(--arc-red);
    opacity: 0.85;
}

/* ---- Profit Factor ---- */
.ftm-arc-lr-pf {
    font-family: var(--arc-mono);
    font-weight: 600;
    font-size: 13px;
    transition: color 0.3s;
}

.ftm-arc-lr-pf.positive { color: var(--arc-green); }
.ftm-arc-lr-pf.negative { color: var(--arc-red); }

/* ---- Status ---- */
.ftm-arc-lr-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.ftm-arc-lr-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--arc-text-muted);
    flex-shrink: 0;
    transition: background 0.3s, box-shadow 0.3s;
}

.ftm-arc-lr-status-dot.running {
    background: var(--arc-green);
    box-shadow: 0 0 8px var(--arc-green-glow);
    animation: arcPulse 2s ease-in-out infinite;
}

.ftm-arc-lr-status-dot.stopped {
    background: var(--arc-red);
    box-shadow: 0 0 6px var(--arc-red-glow);
}

.ftm-arc-lr-status-dot.offline {
    background: var(--arc-yellow);
}

/* ---- Action Arrow ---- */
.ftm-arc-lr-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--arc-text-muted);
    background: transparent;
    transition: all 0.25s;
}

.ftm-arc-list-row:hover .ftm-arc-lr-action {
    color: var(--arc-accent);
    background: rgba(59, 130, 246, 0.12);
    transform: translateX(3px);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.08);
}

/* ---- Updated timestamp (absolute positioned, bottom-right) ---- */
.ftm-arc-lr-updated {
    position: absolute;
    right: 20px;
    bottom: 3px;
    font-size: 9px;
    color: var(--arc-text-muted);
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}

.ftm-arc-list-row:hover .ftm-arc-lr-updated {
    opacity: 0.7;
}

/* ---- List Responsive ---- */
@media (max-width: 1100px) {
    .ftm-arc-list-header,
    .ftm-arc-list-row {
        grid-template-columns: 36px 1.8fr 1fr 90px 0.8fr 0.8fr 0.7fr 90px 32px;
    }
    .ftm-arc-lh-pf,
    .ftm-arc-lr-pf {
        display: none;
    }
}

@media (max-width: 900px) {
    .ftm-arc-list-header,
    .ftm-arc-list-row {
        grid-template-columns: 32px 1.5fr 1fr 80px 0.8fr 80px 32px;
    }
    .ftm-arc-lh-chart, .ftm-arc-lr-chart,
    .ftm-arc-lh-drawdown, .ftm-arc-lr-drawdown,
    .ftm-arc-lh-pf, .ftm-arc-lr-pf {
        display: none;
    }
}

@media (max-width: 640px) {
    .ftm-arc-list-header { display: none; }
    .ftm-arc-list-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 16px 18px 16px 22px;
    }
    .ftm-arc-lr-chart,
    .ftm-arc-lr-drawdown,
    .ftm-arc-lr-pf,
    .ftm-arc-lr-action { display: none; }
    .ftm-arc-lr-rank {
        position: absolute;
        top: 12px;
        right: 14px;
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
    .ftm-arc-lr-name { padding-right: 40px; }
    .ftm-arc-lr-profit,
    .ftm-arc-lr-winrate,
    .ftm-arc-lr-trades,
    .ftm-arc-lr-status { justify-self: start; }
}


/* ==========================================================================
   COMPARE VIEW — Advanced Smart Comparison UI
   ========================================================================== */

.ftm-arc-compare.active {
    display: block !important;
}

/* ---- Compare Header ---- */
.ftm-arc-compare-header {
    text-align: center;
    margin-bottom: 36px;
    animation: arcFadeUp 0.5s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ftm-arc-compare-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.15));
    border: 1px solid rgba(139, 92, 246, 0.2);
    color: var(--arc-purple);
    margin-bottom: 16px;
    animation: arcCompareIconPulse 3s ease-in-out infinite;
}

@keyframes arcCompareIconPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.15); transform: scale(1); }
    50% { box-shadow: 0 0 28px 6px rgba(139, 92, 246, 0.15); transform: scale(1.05); }
}

.ftm-arc-compare-title {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ftm-arc-compare-subtitle {
    font-size: 14px;
    color: var(--arc-text-muted);
    max-width: 420px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ---- Aggregate Summary Strip ---- */
.ftm-arc-compare-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 32px;
    animation: arcFadeUp 0.5s 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ftm-arc-cs-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 12px;
    background: var(--arc-bg-card);
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius-sm);
    backdrop-filter: blur(var(--arc-blur));
    transition: all var(--arc-transition);
    position: relative;
    overflow: hidden;
}

.ftm-arc-cs-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--arc-purple), var(--arc-accent));
    opacity: 0;
    transition: opacity 0.3s;
}

.ftm-arc-cs-card:hover {
    border-color: var(--arc-border-hover);
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 30px rgba(139, 92, 246, 0.04);
}

.ftm-arc-cs-card:hover::before {
    opacity: 1;
}

.ftm-arc-cs-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--arc-text-muted);
}

.ftm-arc-cs-value {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.ftm-arc-cs-mono {
    font-family: var(--arc-mono);
    font-size: 17px;
    font-weight: 700;
}

.ftm-arc-cs-value.positive { color: var(--arc-green); }
.ftm-arc-cs-value.negative { color: var(--arc-red); }

/* ---- Glass Panel Base (reused for radar, matrix, rankings) ---- */
.ftm-arc-compare-radar-wrap,
.ftm-arc-compare-matrix,
.ftm-arc-rankings {
    position: relative;
    background: var(--arc-bg-card);
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-radius);
    backdrop-filter: blur(var(--arc-blur));
    overflow: hidden;
    margin-bottom: 28px;
}

.ftm-arc-radar-accent,
.ftm-arc-matrix-accent,
.ftm-arc-rankings-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--arc-radius) var(--arc-radius) 0 0;
}

.ftm-arc-radar-accent {
    background: linear-gradient(90deg, var(--arc-accent), var(--arc-purple));
}

.ftm-arc-matrix-accent {
    background: linear-gradient(90deg, var(--arc-cyan), var(--arc-accent));
}

.ftm-arc-rankings-accent {
    background: linear-gradient(90deg, var(--arc-yellow), var(--arc-pink));
}

/* ---- Panel Head (shared) ---- */
.ftm-arc-radar-head,
.ftm-arc-matrix-head,
.ftm-arc-rankings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 0;
}

.ftm-arc-radar-title,
.ftm-arc-matrix-title,
.ftm-arc-rankings-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.ftm-arc-radar-title svg { color: var(--arc-accent); }
.ftm-arc-matrix-title svg { color: var(--arc-cyan); }
.ftm-arc-rankings-title svg { color: var(--arc-yellow); }

.ftm-arc-radar-badge,
.ftm-arc-rankings-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--arc-text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

/* ---- Radar Panel ---- */
.ftm-arc-compare-radar-wrap {
    max-width: 680px;
    margin: 0 auto 28px;
    animation: arcFadeUp 0.5s 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ftm-arc-radar-body {
    padding: 8px 24px 0;
}

#ftm-arc-radar-chart {
    width: 100% !important;
    height: auto !important;
    display: block;
}

.ftm-arc-radar-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding: 14px 24px 18px;
}

.ftm-arc-radar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--arc-text-secondary);
    transition: color 0.2s;
    cursor: default;
}

.ftm-arc-radar-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ftm-arc-radar-legend-item:hover {
    color: #fff;
}

/* ---- Comparison Matrix Panel ---- */
.ftm-arc-compare-matrix {
    animation: arcFadeUp 0.5s 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ftm-arc-matrix-scroll {
    overflow-x: auto;
    padding: 16px 0 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}

.ftm-arc-matrix-scroll::-webkit-scrollbar { height: 6px; }
.ftm-arc-matrix-scroll::-webkit-scrollbar-track { background: transparent; }
.ftm-arc-matrix-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }

.ftm-arc-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ftm-arc-compare-table thead {
    border-bottom: 1px solid var(--arc-border);
}

.ftm-arc-compare-table th {
    padding: 12px 16px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--arc-text-muted);
    text-align: center;
    white-space: nowrap;
}

.ftm-arc-ct-metric {
    text-align: left !important;
    min-width: 170px;
    padding-left: 24px !important;
}

.ftm-arc-ct-bot {
    vertical-align: middle;
}

.ftm-arc-ct-bot-idx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.06);
    color: var(--arc-text-secondary);
    margin-right: 6px;
    vertical-align: middle;
    font-family: var(--arc-mono);
}

.ftm-arc-ct-bot-name {
    display: inline-block;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.ftm-arc-compare-table tbody tr {
    transition: background 0.2s;
}

.ftm-arc-compare-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.ftm-arc-compare-table td {
    padding: 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    font-family: var(--arc-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--arc-text);
    transition: background 0.2s;
    height: 48px;
    vertical-align: middle;
}

.ftm-arc-compare-table td:first-child {
    text-align: left;
    font-family: var(--arc-font);
    font-weight: 600;
    color: var(--arc-text-secondary);
    font-size: 12.5px;
    padding-left: 24px;
}

/* ---- Table Cell Content with Bar Indicator ---- */
.ftm-arc-ct-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 14px;
    min-height: 48px;
}

.ftm-arc-ct-val {
    font-family: var(--arc-mono);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.ftm-arc-ct-bar {
    width: 100%;
    max-width: 80px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.ftm-arc-ct-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    background: var(--arc-accent);
}

/* ---- Metric Icon Prefix ---- */
.ftm-arc-ct-metric-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 8px 24px;
}

.ftm-arc-ct-metric-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
    font-size: 12px;
}

.ftm-arc-ct-metric-icon.profit { background: rgba(16, 185, 129, 0.12); color: var(--arc-green); }
.ftm-arc-ct-metric-icon.winrate { background: rgba(59, 130, 246, 0.12); color: var(--arc-accent); }
.ftm-arc-ct-metric-icon.trades { background: rgba(139, 92, 246, 0.12); color: var(--arc-purple); }
.ftm-arc-ct-metric-icon.open { background: rgba(6, 182, 212, 0.12); color: var(--arc-cyan); }
.ftm-arc-ct-metric-icon.pfactor { background: rgba(245, 158, 11, 0.12); color: var(--arc-yellow); }
.ftm-arc-ct-metric-icon.sharpe { background: rgba(236, 72, 153, 0.12); color: var(--arc-pink); }
.ftm-arc-ct-metric-icon.drawdown { background: rgba(239, 68, 68, 0.12); color: var(--arc-red); }
.ftm-arc-ct-metric-icon.expect { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.ftm-arc-ct-metric-icon.duration { background: rgba(148, 163, 184, 0.12); color: var(--arc-text-secondary); }
.ftm-arc-ct-metric-icon.best { background: rgba(16, 185, 129, 0.12); color: var(--arc-green); }
.ftm-arc-ct-metric-icon.worst { background: rgba(239, 68, 68, 0.12); color: var(--arc-red); }

.ftm-arc-ct-metric-text {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--arc-text-secondary);
    line-height: 1.2;
}

/* ---- Loading State ---- */
.ftm-arc-ct-loading {
    text-align: center !important;
    color: var(--arc-text-muted);
    padding: 48px 20px !important;
    font-family: var(--arc-font) !important;
    font-size: 13px !important;
}

.ftm-arc-ct-loading-dots {
    display: inline-flex;
    gap: 4px;
    margin-right: 10px;
    vertical-align: middle;
}

.ftm-arc-ct-loading-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--arc-accent);
    animation: arcCtDotBounce 1.2s ease-in-out infinite;
}

.ftm-arc-ct-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.ftm-arc-ct-loading-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes arcCtDotBounce {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.2); }
}

/* ---- Best / Worst Highlighting ---- */
.ftm-arc-ct-best .ftm-arc-ct-val {
    color: var(--arc-green) !important;
    font-weight: 700;
}

.ftm-arc-ct-best .ftm-arc-ct-bar-fill {
    background: var(--arc-green) !important;
}

.ftm-arc-ct-best {
    position: relative;
}

.ftm-arc-ct-best::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 8px;
    border: 1px solid rgba(16, 185, 129, 0.12);
    pointer-events: none;
}

.ftm-arc-ct-worst .ftm-arc-ct-val {
    color: var(--arc-red) !important;
    opacity: 0.75;
}

.ftm-arc-ct-worst .ftm-arc-ct-bar-fill {
    background: var(--arc-red) !important;
    opacity: 0.5;
}

/* ---- Star badge for best ---- */
.ftm-arc-ct-star {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 9px;
    color: var(--arc-yellow);
    opacity: 0.9;
    animation: arcCtStarPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes arcCtStarPop {
    from { transform: scale(0) rotate(-90deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg); opacity: 0.9; }
}

/* ---- Rankings Panel ---- */
.ftm-arc-rankings {
    animation: arcFadeUp 0.5s 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ftm-arc-rankings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 12px 0;
}

/* ---- Ranking Card ---- */
.ftm-arc-ranking-card {
    display: grid;
    grid-template-columns: 56px 1fr auto auto auto;
    align-items: center;
    gap: 0 16px;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.25s;
    animation: arcRankSlide 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--rank-i, 0) * 60ms + 0.8s);
}

@keyframes arcRankSlide {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.ftm-arc-ranking-card:last-child {
    border-bottom: none;
}

.ftm-arc-ranking-card:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* ---- Medal ---- */
.ftm-arc-ranking-medal {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 900;
    font-family: var(--arc-mono);
    flex-shrink: 0;
    transition: transform 0.3s, box-shadow 0.3s;
}

.ftm-arc-ranking-card:hover .ftm-arc-ranking-medal {
    transform: scale(1.12) rotate(-5deg);
}

.ftm-arc-ranking-medal.gold {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    box-shadow: 0 0 24px rgba(245, 158, 11, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: arcMedalShine 3s ease-in-out infinite;
}

@keyframes arcMedalShine {
    0%, 100% { box-shadow: 0 0 24px rgba(245, 158, 11, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
    50%      { box-shadow: 0 0 35px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
}

.ftm-arc-ranking-medal.silver {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    color: #fff;
    box-shadow: 0 0 18px rgba(148, 163, 184, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.ftm-arc-ranking-medal.bronze {
    background: linear-gradient(135deg, #d97706, #92400e);
    color: #fff;
    box-shadow: 0 0 18px rgba(217, 119, 6, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.ftm-arc-ranking-medal.other {
    background: rgba(255, 255, 255, 0.05);
    color: var(--arc-text-muted);
    font-size: 14px;
}

/* ---- Ranking Info Block ---- */
.ftm-arc-ranking-info {
    min-width: 0;
}

.ftm-arc-ranking-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.ftm-arc-ranking-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}

.ftm-arc-ranking-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--arc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ---- Ranking Stats Columns ---- */
.ftm-arc-ranking-wr,
.ftm-arc-ranking-trades-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 16px;
}

.ftm-arc-ranking-stat-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--arc-text-muted);
}

.ftm-arc-ranking-stat-val {
    font-family: var(--arc-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--arc-text);
}

/* ---- Win Rate Ring ---- */
.ftm-arc-ranking-wr-ring {
    position: relative;
    width: 36px;
    height: 36px;
}

.ftm-arc-ranking-wr-ring svg {
    width: 36px;
    height: 36px;
    transform: rotate(-90deg);
}

.ftm-arc-ranking-wr-ring circle {
    fill: none;
    stroke-width: 3;
}

.ftm-arc-ranking-wr-bg {
    stroke: rgba(255, 255, 255, 0.06);
}

.ftm-arc-ranking-wr-fill {
    stroke: var(--arc-accent);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.ftm-arc-ranking-wr-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--arc-mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--arc-text);
}

/* ---- Ranking Profit ---- */
.ftm-arc-ranking-profit {
    font-family: var(--arc-mono);
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    text-align: right;
    min-width: 90px;
}

.ftm-arc-ranking-profit.positive { color: var(--arc-green); }
.ftm-arc-ranking-profit.negative { color: var(--arc-red); }

.ftm-arc-ranking-profit-sub {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--arc-text-muted);
    margin-top: 1px;
}


/* ==========================================================================
   COMPARE RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
    .ftm-arc-compare-summary {
        grid-template-columns: repeat(3, 1fr);
    }
    .ftm-arc-ranking-card {
        grid-template-columns: 48px 1fr auto auto;
    }
    .ftm-arc-ranking-trades-col {
        display: none;
    }
}

@media (max-width: 640px) {
    .ftm-arc-compare-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    .ftm-arc-compare-summary .ftm-arc-cs-card:last-child {
        grid-column: 1 / -1;
    }
    .ftm-arc-ranking-card {
        grid-template-columns: 40px 1fr auto;
        gap: 0 12px;
        padding: 14px 16px;
    }
    .ftm-arc-ranking-wr,
    .ftm-arc-ranking-trades-col {
        display: none;
    }
    .ftm-arc-radar-head,
    .ftm-arc-matrix-head,
    .ftm-arc-rankings-head {
        padding: 14px 16px 0;
    }
    .ftm-arc-ranking-card {
        padding: 12px 16px;
    }
    .ftm-arc-compare-radar-wrap {
        margin: 0 -8px 24px;
        border-radius: var(--arc-radius-md);
    }
}


/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.ftm-arc-empty,
.ftm-arc-compare-min {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--arc-text-muted);
}

.ftm-arc-empty svg,
.ftm-arc-compare-min svg {
    margin-bottom: 16px;
    opacity: 0.4;
}

.ftm-arc-empty h3 {
    font-size: 18px;
    color: var(--arc-text-secondary);
    margin-bottom: 8px;
}

.ftm-arc-empty p,
.ftm-arc-compare-min p {
    font-size: 14px;
}


/* ==========================================================================
   HIDDEN BOTS (search/filter)
   ========================================================================== */

.ftm-arc-card.ftm-arc-hidden,
.ftm-arc-list-row.ftm-arc-hidden {
    display: none !important;
}


/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 1024px) {
    .ftm-arc-grid.active {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

@media (max-width: 768px) {
    .ftm-arc-hero {
        padding: 60px 0 44px;
    }

    .ftm-arc-hero-inner {
        flex-direction: column;
        text-align: center;
        gap: 32px;
    }

    .ftm-arc-hero-copy { text-align: center; }

    .ftm-arc-hero-desc { margin-left: auto; margin-right: auto; }

    .ftm-arc-hero-micro {
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 auto;
    }

    .ftm-arc-micro-sep { display: none; }

    .ftm-arc-hero-visual {
        width: 200px;
        height: 200px;
    }

    .ftm-arc-holo-ring--outer { width: 200px; height: 200px; }
    .ftm-arc-holo-ring--mid   { width: 150px; height: 150px; }
    .ftm-arc-holo-ring--inner { width: 106px; height: 106px; }

    .ftm-arc-holo-core { width: 86px; height: 86px; }
    .ftm-arc-holo-pct  { font-size: 20px; }

    .ftm-arc-toolbar {
        position: static;
        border-radius: var(--arc-radius-md);
    }

    .ftm-arc-toolbar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .ftm-arc-toolbar-left,
    .ftm-arc-toolbar-right {
        justify-content: center;
    }

    .ftm-arc-toolbar-sep { display: none; }

    .ftm-arc-search-wrap {
        min-width: 0;
        flex: 1;
    }

    .ftm-arc-search-wrap:focus-within {
        min-width: 0;
    }

    .ftm-arc-view-label { display: none; }

    /* Insight bar */
    .ftm-arc-insight-actions { display: none; }
    .ftm-arc-insight-label { display: none; }

    .ftm-arc-grid.active {
        grid-template-columns: 1fr;
    }

    .ftm-arc-matrix-scroll {
        margin-left: -8px;
        margin-right: -8px;
    }
}

@media (max-width: 480px) {
    .ftm-arc-card-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .ftm-arc-card-tags {
        gap: 4px;
    }

    .ftm-arc-profit-amount {
        font-size: 22px;
    }

    .ftm-arc-hero-title {
        font-size: 28px;
        letter-spacing: -.03em;
    }

    .ftm-arc-hero-visual { display: none; }

    .ftm-arc-hero-micro {
        padding: 10px 14px;
    }

    .ftm-arc-micro-item {
        padding: 4px 10px;
    }

    .ftm-arc-micro-val { font-size: 13px; }
    .ftm-arc-micro-lbl { font-size: 9px; }
}


/* ==========================================================================
   SCROLLBAR
   ========================================================================== */

body.ftm-archive-page::-webkit-scrollbar {
    width: 8px;
}

body.ftm-archive-page::-webkit-scrollbar-track {
    background: var(--arc-bg);
}

body.ftm-archive-page::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.1));
    border-radius: 4px;
}

body.ftm-archive-page::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.25), rgba(139, 92, 246, 0.18));
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .ftm-particle-canvas {
        display: none !important;
    }
}