/* /css/pyrox-anim.css — single source of truth for all PYROX animations */
/* mesh + cursor + particles + parallax + dashboard panels */

/* ============ MESH GRADIENT (hero background) ============ */
.pyx-mesh::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(0,212,255,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(74,108,247,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(0,212,255,0.04) 0%, transparent 50%);
  animation: pyxMesh 24s ease-in-out infinite alternate;
}
@keyframes pyxMesh {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%; transform: scale(1); }
  50% { background-position: 30% 20%, 70% 40%, 20% 60%; transform: scale(1.05); }
  100% { background-position: 60% 50%, 40% 80%, 80% 30%; transform: scale(1); }
}
/* DO NOT use `.pyx-mesh > *` — it would override position:absolute on hero overlays.
   Content already stacks above ::before (z-index: 0) via natural DOM order. */

/* ============ NUMBER COUNTER ============ */
.pyx-count { display: inline-block; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ============ FLOAT ============ */
@keyframes pyxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.pyx-float { animation: pyxFloat 4s ease-in-out infinite; }
.pyx-float-delay-1 { animation: pyxFloat 4s ease-in-out 1s infinite; }
.pyx-float-delay-2 { animation: pyxFloat 4s ease-in-out 2s infinite; }

/* ============ PARTICLE FIELD ============ */
.pyx-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.pyx-particle {
  position: absolute; width: 2px; height: 2px;
  background: rgba(0,212,255,0.7); border-radius: 50%;
  box-shadow: 0 0 6px rgba(0,212,255,0.5);
  opacity: 0; animation: pyxDrift linear infinite;
}
.pyx-particle.p2 { width: 1px; height: 1px; background: rgba(74,108,247,0.8); }
.pyx-particle.p3 { width: 3px; height: 3px; background: rgba(0,212,255,0.4); box-shadow: 0 0 10px rgba(0,212,255,0.6); }
@keyframes pyxDrift {
  0%   { opacity: 0; transform: translate3d(0,0,0); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx, 80px), var(--dy, -120px), 0); }
}

/* ============ PARALLAX (whole hero text block) ============ */
.pyx-parallax { will-change: transform; transform: translate3d(0, var(--py, 0), 0); }

/* ============ CUSTOM CURSOR (desktop only, opt-outable) ============ */
@media (hover: hover) and (pointer: fine) {
  html.pyx-cursor-on, html.pyx-cursor-on body { cursor: none; }
  html.pyx-cursor-on a, html.pyx-cursor-on button,
  html.pyx-cursor-on input, html.pyx-cursor-on textarea,
  html.pyx-cursor-on select, html.pyx-cursor-on [role="button"] { cursor: none; }
  .pyx-cursor-dot, .pyx-cursor-ring {
    position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
    will-change: transform; mix-blend-mode: difference;
  }
  .pyx-cursor-dot {
    width: 6px; height: 6px; background: #00D4FF; border-radius: 50%;
    box-shadow: 0 0 12px rgba(0,212,255,0.8);
    transition: width 0.2s, height 0.2s, opacity 0.2s;
  }
  .pyx-cursor-ring {
    width: 36px; height: 36px;
    border: 1.5px solid rgba(0,212,255,0.5); border-radius: 50%;
    transition: width 0.25s, height 0.25s, border-color 0.2s, opacity 0.2s;
  }
  .pyx-cursor-ring.hover { width: 56px; height: 56px; border-color: rgba(0,212,255,0.9); background: rgba(0,212,255,0.1); }
  .pyx-cursor-dot.hover { width: 4px; height: 4px; }
}

/* ============ CURSOR TOGGLE BUTTON ============ */
.pyx-cursor-toggle {
  position: fixed; bottom: 1.25rem; right: 1.25rem;
  z-index: 9998;
  width: 40px; height: 40px;
  background: rgba(20,28,42,0.85); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 50%;
  color: rgba(255,255,255,0.7); font-size: 16px;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.pyx-cursor-toggle:hover { background: rgba(0,212,255,0.2); transform: scale(1.1); }
@media (hover: hover) and (pointer: fine) { .pyx-cursor-toggle { display: flex; } }

/* ============ MOBILE / REDUCED MOTION OVERRIDES ============ */
@media (max-width: 768px), (hover: none) {
  .pyx-parallax { transform: none !important; }
  .pyx-cursor-dot, .pyx-cursor-ring, .pyx-cursor-toggle { display: none !important; }
  html.pyx-cursor-on, html.pyx-cursor-on body { cursor: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  .pyx-mesh::before, .pyx-particle, .pyx-parallax, .pyx-float, .pyx-float-delay-1, .pyx-float-delay-2 {
    animation: none !important; transform: none !important;
  }
  .pyx-cursor-dot, .pyx-cursor-ring, .pyx-cursor-toggle { display: none !important; }
  html.pyx-cursor-on, html.pyx-cursor-on body { cursor: auto !important; }
}

/* ============================================================ */
/* DASHBOARD COMPONENTS — extracted from inline (2026-04-25)    */
/* ============================================================ */

/* === dash-card (PL dashboard preview, large) === */
.dash-card {
  background: linear-gradient(145deg, rgba(20,28,42,0.92), rgba(10,16,28,0.95));
  border: 1px solid rgba(255,255,255,0.08); border-radius: 1.5rem;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 30px 80px -20px rgba(0,212,255,0.25), 0 10px 40px -10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  transform: rotateX(8deg) rotateY(-2deg); transform-origin: center top;
  animation: dash-float 8s ease-in-out infinite; overflow: hidden; position: relative;
}
@keyframes dash-float {
  0%,100% { transform: rotateX(8deg) rotateY(-2deg) translateY(0); }
  50%     { transform: rotateX(6deg) rotateY(2deg) translateY(-8px); }
}
.dash-wrap { perspective: 1800px; }
.dash-glow { position: absolute; inset: -40%;
  background: radial-gradient(circle at 30% 20%, rgba(0,212,255,0.15), transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(74,108,247,0.12), transparent 50%);
  animation: dash-shift 12s ease-in-out infinite alternate; pointer-events: none; }
@keyframes dash-shift { 100% { transform: translate(20px,-20px) rotate(60deg); } }
.dash-titlebar { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); }
.dash-dot { width: 12px; height: 12px; border-radius: 50%; }
.dash-dot.r{background:#FF5F57}.dash-dot.y{background:#FEBC2E}.dash-dot.g{background:#28C840}
.dash-url { margin-left: 16px; flex: 1; font-size: 12px; color: rgba(255,255,255,0.5); font-family: ui-monospace,monospace; background: rgba(255,255,255,0.04); padding: 4px 12px; border-radius: 6px; text-align: center; }
.dash-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 16px; padding: 24px; }
.dash-kpi { grid-column: span 4; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 18px; }
.dash-kpi-label { font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; }
.dash-kpi-value { font-size: 28px; font-weight: 700; color: #fff; margin-top: 6px; font-feature-settings: 'tnum'; }
.dash-kpi-trend { font-size: 12px; color: #28C840; margin-top: 4px; }
.dash-kpi-trend.cyan { color: #00D4FF; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #28C840; display: inline-block; animation: pulse-dot 2s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(40,200,64,0.6); }
@keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(40,200,64,0.6); } 70% { box-shadow: 0 0 0 8px rgba(40,200,64,0); } 100% { box-shadow: 0 0 0 0 rgba(40,200,64,0); } }
.dash-chart-card { grid-column: span 8; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 20px; min-height: 200px; position: relative; }
.dash-side-card { grid-column: span 4; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 20px; }
.dash-card-title { font-size: 13px; color: rgba(255,255,255,0.7); font-weight: 500; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.bar { flex: 1; background: linear-gradient(180deg, #00D4FF, rgba(0,212,255,0.3)); border-radius: 3px 3px 0 0; transform-origin: bottom; animation: grow 1.6s cubic-bezier(0.4,0,0.2,1) forwards; transform: scaleY(0); }
@keyframes grow { to { transform: scaleY(1); } }
.bar:nth-child(1){animation-delay:.05s;height:35%}.bar:nth-child(2){animation-delay:.1s;height:55%}
.bar:nth-child(3){animation-delay:.15s;height:42%}.bar:nth-child(4){animation-delay:.2s;height:68%}
.bar:nth-child(5){animation-delay:.25s;height:50%}.bar:nth-child(6){animation-delay:.3s;height:80%}
.bar:nth-child(7){animation-delay:.35s;height:65%}.bar:nth-child(8){animation-delay:.4s;height:92%}
.bar:nth-child(9){animation-delay:.45s;height:75%}.bar:nth-child(10){animation-delay:.5s;height:100%}
.bar:nth-child(11){animation-delay:.55s;height:85%}.bar:nth-child(12){animation-delay:.6s;height:95%}
.line-svg { width: 100%; height: 120px; }
.line-path { fill: none; stroke: url(#lineGrad); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 2.4s cubic-bezier(0.4,0,0.2,1) .3s forwards; filter: drop-shadow(0 0 8px rgba(0,212,255,0.4)); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.line-area { fill: url(#areaGrad); opacity: 0; animation: fade-in 1s ease 1.5s forwards; }
@keyframes fade-in { to { opacity: 1; } }
.agent-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px; opacity: 0; animation: slide-in 0.4s ease forwards; }
.agent-row:last-child { border-bottom: none; }
.agent-row:nth-child(1){animation-delay:.6s}.agent-row:nth-child(2){animation-delay:.7s}
.agent-row:nth-child(3){animation-delay:.8s}.agent-row:nth-child(4){animation-delay:.9s}
@keyframes slide-in { from{opacity:0;transform:translateX(8px)} to{opacity:1;transform:translateX(0)} }
.agent-name { color: #fff; font-weight: 500; }
.agent-status { color: #28C840; font-size: 11px; display: flex; align-items: center; gap: 4px; }

/* === EN hero dashboard (kpi-hero variant) === */
.dash-wrap-hero { perspective: 1800px; }
.dash-card-hero { background: linear-gradient(145deg, rgba(20,28,42,0.92), rgba(10,16,28,0.95)); border: 1px solid rgba(255,255,255,0.08); border-radius: 1.5rem; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 30px 80px -20px rgba(0,212,255,0.35), 0 10px 40px -10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06); transform: rotateX(8deg) rotateY(-3deg); transform-origin: center top; animation: dash-float-hero 8s ease-in-out infinite; overflow: hidden; position: relative; }
@keyframes dash-float-hero { 0%,100% { transform: rotateX(8deg) rotateY(-3deg) translateY(0); } 50% { transform: rotateX(6deg) rotateY(2deg) translateY(-10px); } }
.dash-glow-hero { position: absolute; inset: -40%; background: radial-gradient(circle at 30% 20%, rgba(0,212,255,0.18), transparent 50%), radial-gradient(circle at 70% 80%, rgba(74,108,247,0.15), transparent 50%); animation: dash-shift-hero 12s ease-in-out infinite alternate; pointer-events: none; }
@keyframes dash-shift-hero { 100% { transform: translate(20px,-20px) rotate(60deg); } }
.tb-hero { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); }
.dot-hero { width: 11px; height: 11px; border-radius: 50%; }
.dot-hero.r{background:#FF5F57}.dot-hero.y{background:#FEBC2E}.dot-hero.g{background:#28C840}
.url-hero { margin-left: 14px; flex: 1; font-size: 11px; color: rgba(255,255,255,0.5); font-family: ui-monospace,monospace; background: rgba(255,255,255,0.04); padding: 3px 12px; border-radius: 6px; text-align: center; }
.ld-hero { width: 6px; height: 6px; border-radius: 50%; background: #28C840; display: inline-block; animation: pulse-hero 2s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(40,200,64,0.6); }
@keyframes pulse-hero { 0%{box-shadow:0 0 0 0 rgba(40,200,64,.6)}70%{box-shadow:0 0 0 8px rgba(40,200,64,0)}100%{box-shadow:0 0 0 0 rgba(40,200,64,0)} }
.grid-hero { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; padding: 16px; }
.kpi-hero { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 14px; }
.kpi-hero-l { font-size: 10px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; }
.kpi-hero-v { font-size: 24px; font-weight: 700; color: #fff; margin-top: 4px; font-feature-settings: 'tnum'; }
.kpi-hero-t { font-size: 11px; color: #28C840; margin-top: 2px; }
.kpi-hero-t.cy { color: #00D4FF; }
.chart-hero { grid-column: span 2; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 14px; }
.ct-hero { font-size: 12px; color: rgba(255,255,255,0.7); margin-bottom: 10px; display: flex; justify-content: space-between; }
.bars-hero { display: flex; align-items: flex-end; gap: 5px; height: 90px; }
.b-hero { flex: 1; background: linear-gradient(180deg, #00D4FF, rgba(0,212,255,0.3)); border-radius: 3px 3px 0 0; transform-origin: bottom; animation: gh 1.6s cubic-bezier(0.4,0,0.2,1) forwards; transform: scaleY(0); }
@keyframes gh { to { transform: scaleY(1); } }
.b-hero:nth-child(1){animation-delay:.05s;height:35%}.b-hero:nth-child(2){animation-delay:.1s;height:55%}
.b-hero:nth-child(3){animation-delay:.15s;height:42%}.b-hero:nth-child(4){animation-delay:.2s;height:68%}
.b-hero:nth-child(5){animation-delay:.25s;height:50%}.b-hero:nth-child(6){animation-delay:.3s;height:80%}
.b-hero:nth-child(7){animation-delay:.35s;height:65%}.b-hero:nth-child(8){animation-delay:.4s;height:92%}
.b-hero:nth-child(9){animation-delay:.45s;height:75%}.b-hero:nth-child(10){animation-delay:.5s;height:100%}
.b-hero:nth-child(11){animation-delay:.55s;height:85%}.b-hero:nth-child(12){animation-delay:.6s;height:95%}
.ls-hero { width: 100%; height: 90px; }
.lp-hero { fill: none; stroke: url(#lgHero); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dh 2.4s cubic-bezier(0.4,0,0.2,1) .3s forwards; filter: drop-shadow(0 0 8px rgba(0,212,255,0.4)); }
@keyframes dh { to { stroke-dashoffset: 0; } }
.la-hero { fill: url(#agHero); opacity: 0; animation: fh 1s ease 1.5s forwards; }
@keyframes fh { to { opacity: 1; } }

/* === PL hero (ph- prefix) === */
.ph-wrap { perspective: 1800px; width: 100%; }
.ph-card { background: linear-gradient(145deg, rgba(20,28,42,0.92), rgba(10,16,28,0.95)); border: 1px solid rgba(255,255,255,0.08); border-radius: 1.5rem; box-shadow: 0 30px 80px -20px rgba(0,212,255,0.35), 0 10px 40px -10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06); transform: rotateX(8deg) rotateY(-3deg); transform-origin: center; animation: ph-float 8s ease-in-out infinite; overflow: hidden; position: relative; }
@keyframes ph-float { 0%,100% { transform: rotateX(8deg) rotateY(-3deg) translateY(0); } 50% { transform: rotateX(6deg) rotateY(2deg) translateY(-10px); } }
.ph-glow { position: absolute; inset: -40%; background: radial-gradient(circle at 30% 20%, rgba(0,212,255,0.18), transparent 50%), radial-gradient(circle at 70% 80%, rgba(74,108,247,0.15), transparent 50%); animation: ph-shift 12s ease-in-out infinite alternate; pointer-events: none; }
@keyframes ph-shift { 100% { transform: translate(20px,-20px) rotate(60deg); } }
.ph-tb { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); }
.ph-dot { width: 11px; height: 11px; border-radius: 50%; }
.ph-dot.r{background:#FF5F57}.ph-dot.y{background:#FEBC2E}.ph-dot.g{background:#28C840}
.ph-url { margin-left: 14px; flex: 1; font-size: 11px; color: rgba(255,255,255,0.5); font-family: ui-monospace,monospace; background: rgba(255,255,255,0.04); padding: 3px 12px; border-radius: 6px; text-align: center; }
.ph-ld { width: 6px; height: 6px; border-radius: 50%; background: #28C840; display: inline-block; animation: ph-pulse 2s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(40,200,64,0.6); }
@keyframes ph-pulse { 0%{box-shadow:0 0 0 0 rgba(40,200,64,.6)}70%{box-shadow:0 0 0 8px rgba(40,200,64,0)}100%{box-shadow:0 0 0 0 rgba(40,200,64,0)} }
.ph-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; padding: 16px; }
.ph-kpi { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 14px; }
.ph-l { font-size: 10px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; }
.ph-v { font-size: 24px; font-weight: 700; color: #fff; margin-top: 4px; font-feature-settings: 'tnum'; }
.ph-t { font-size: 11px; color: #28C840; margin-top: 2px; }
.ph-t.cy { color: #00D4FF; }
.ph-chart { grid-column: span 2; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 14px; }
.ph-ct { font-size: 12px; color: rgba(255,255,255,0.7); margin-bottom: 10px; display: flex; justify-content: space-between; }
.ph-bars { display: flex; align-items: flex-end; gap: 5px; height: 90px; }
.ph-b { flex: 1; background: linear-gradient(180deg, #00D4FF, rgba(0,212,255,0.3)); border-radius: 3px 3px 0 0; transform-origin: bottom; animation: ph-grow 1.6s cubic-bezier(0.4,0,0.2,1) forwards; transform: scaleY(0); }
@keyframes ph-grow { to { transform: scaleY(1); } }
.ph-b:nth-child(1){animation-delay:.05s;height:35%}.ph-b:nth-child(2){animation-delay:.1s;height:55%}
.ph-b:nth-child(3){animation-delay:.15s;height:42%}.ph-b:nth-child(4){animation-delay:.2s;height:68%}
.ph-b:nth-child(5){animation-delay:.25s;height:50%}.ph-b:nth-child(6){animation-delay:.3s;height:80%}
.ph-b:nth-child(7){animation-delay:.35s;height:65%}.ph-b:nth-child(8){animation-delay:.4s;height:92%}
.ph-b:nth-child(9){animation-delay:.45s;height:75%}.ph-b:nth-child(10){animation-delay:.5s;height:100%}
.ph-b:nth-child(11){animation-delay:.55s;height:85%}.ph-b:nth-child(12){animation-delay:.6s;height:95%}
.ph-svg { width: 100%; height: 90px; }
.ph-line { fill: none; stroke: url(#phlg); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: ph-draw 2.4s cubic-bezier(0.4,0,0.2,1) .3s forwards; filter: drop-shadow(0 0 8px rgba(0,212,255,0.4)); }
@keyframes ph-draw { to { stroke-dashoffset: 0; } }
.ph-area { fill: url(#phag); opacity: 0; animation: ph-fade 1s ease 1.5s forwards; }
@keyframes ph-fade { to { opacity: 1; } }

/* === DE/ES/FR international dashboard (-intl suffix) === */
.dash-wrap-intl { perspective: 1800px; }
.dash-card-intl { background: linear-gradient(145deg, rgba(20,28,42,0.92), rgba(10,16,28,0.95)); border: 1px solid rgba(255,255,255,0.08); border-radius: 1.5rem; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 30px 80px -20px rgba(0,212,255,0.25), 0 10px 40px -10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06); transform: rotateX(8deg) rotateY(-2deg); transform-origin: center top; animation: dash-float-intl 8s ease-in-out infinite; overflow: hidden; position: relative; }
@keyframes dash-float-intl { 0%,100% { transform: rotateX(8deg) rotateY(-2deg) translateY(0); } 50% { transform: rotateX(6deg) rotateY(2deg) translateY(-8px); } }
.dash-glow-intl { position: absolute; inset: -40%; background: radial-gradient(circle at 30% 20%, rgba(0,212,255,0.15), transparent 50%), radial-gradient(circle at 70% 80%, rgba(74,108,247,0.12), transparent 50%); animation: dash-shift-intl 12s ease-in-out infinite alternate; pointer-events: none; }
@keyframes dash-shift-intl { 100% { transform: translate(20px,-20px) rotate(60deg); } }
.dash-titlebar-intl { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); }
.dash-dot-intl { width: 12px; height: 12px; border-radius: 50%; }
.dash-dot-intl.r{background:#FF5F57}.dash-dot-intl.y{background:#FEBC2E}.dash-dot-intl.g{background:#28C840}
.dash-url-intl { margin-left: 16px; flex: 1; font-size: 12px; color: rgba(255,255,255,0.5); font-family: ui-monospace,monospace; background: rgba(255,255,255,0.04); padding: 4px 12px; border-radius: 6px; text-align: center; }
.dash-grid-intl { display: grid; grid-template-columns: repeat(12,1fr); gap: 16px; padding: 24px; }
.dash-kpi-intl { grid-column: span 4; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 18px; }
.dash-kpi-label-intl { font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; }
.dash-kpi-value-intl { font-size: 28px; font-weight: 700; color: #fff; margin-top: 6px; font-feature-settings: 'tnum'; }
.dash-kpi-trend-intl { font-size: 12px; color: #28C840; margin-top: 4px; }
.dash-kpi-trend-intl.cyan { color: #00D4FF; }
.live-dot-intl { width: 6px; height: 6px; border-radius: 50%; background: #28C840; display: inline-block; animation: pulse-dot-intl 2s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(40,200,64,0.6); }
@keyframes pulse-dot-intl { 0%{box-shadow:0 0 0 0 rgba(40,200,64,.6)}70%{box-shadow:0 0 0 8px rgba(40,200,64,0)}100%{box-shadow:0 0 0 0 rgba(40,200,64,0)} }
.dash-chart-intl { grid-column: span 8; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 20px; min-height: 200px; }
.dash-side-intl { grid-column: span 4; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 20px; }
.dash-card-title-intl { font-size: 13px; color: rgba(255,255,255,0.7); font-weight: 500; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.bars-intl { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.bar-intl { flex: 1; background: linear-gradient(180deg, #00D4FF, rgba(0,212,255,0.3)); border-radius: 3px 3px 0 0; transform-origin: bottom; animation: grow-intl 1.6s cubic-bezier(0.4,0,0.2,1) forwards; transform: scaleY(0); }
@keyframes grow-intl { to { transform: scaleY(1); } }
.bar-intl:nth-child(1){animation-delay:.05s;height:35%}.bar-intl:nth-child(2){animation-delay:.1s;height:55%}
.bar-intl:nth-child(3){animation-delay:.15s;height:42%}.bar-intl:nth-child(4){animation-delay:.2s;height:68%}
.bar-intl:nth-child(5){animation-delay:.25s;height:50%}.bar-intl:nth-child(6){animation-delay:.3s;height:80%}
.bar-intl:nth-child(7){animation-delay:.35s;height:65%}.bar-intl:nth-child(8){animation-delay:.4s;height:92%}
.bar-intl:nth-child(9){animation-delay:.45s;height:75%}.bar-intl:nth-child(10){animation-delay:.5s;height:100%}
.bar-intl:nth-child(11){animation-delay:.55s;height:85%}.bar-intl:nth-child(12){animation-delay:.6s;height:95%}
.line-svg-intl { width: 100%; height: 120px; }
.line-path-intl { fill: none; stroke: url(#lineGradIntl); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw-intl 2.4s cubic-bezier(0.4,0,0.2,1) .3s forwards; filter: drop-shadow(0 0 8px rgba(0,212,255,0.4)); }
@keyframes draw-intl { to { stroke-dashoffset: 0; } }
.line-area-intl { fill: url(#areaGradIntl); opacity: 0; animation: fade-in-intl 1s ease 1.5s forwards; }
@keyframes fade-in-intl { to { opacity: 1; } }
.agent-row-intl { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px; opacity: 0; animation: slide-in-intl 0.4s ease forwards; }
.agent-row-intl:last-child { border-bottom: none; }
.agent-row-intl:nth-child(1){animation-delay:.6s}.agent-row-intl:nth-child(2){animation-delay:.7s}
.agent-row-intl:nth-child(3){animation-delay:.8s}.agent-row-intl:nth-child(4){animation-delay:.9s}
@keyframes slide-in-intl { from{opacity:0;transform:translateX(8px)} to{opacity:1;transform:translateX(0)} }
.agent-name-intl { color: #fff; font-weight: 500; }
.agent-status-intl { color: #28C840; font-size: 11px; display: flex; align-items: center; gap: 4px; }

/* === EN listings pipeline === */
.pipe-card { background: linear-gradient(145deg, rgba(20,28,42,0.92), rgba(10,16,28,0.95)); border: 1px solid rgba(255,255,255,0.08); border-radius: 1.5rem; box-shadow: 0 30px 80px -20px rgba(0,212,255,0.25); padding: 24px; position: relative; overflow: hidden; }
.pipe-card::before { content:''; position:absolute; inset:-40%; background: radial-gradient(circle at 80% 20%, rgba(0,212,255,0.12), transparent 50%); animation: pipe-glow 12s ease-in-out infinite alternate; pointer-events:none; }
@keyframes pipe-glow { 100% { transform: translate(-30px, 20px); } }
.pipe-title { font-size: 12px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; }
.pipe-title .live { display: flex; align-items: center; gap: 5px; color: #28C840; font-size: 11px; }
.pipe-row { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; margin-bottom: 10px; opacity: 0; animation: pipe-in .5s ease forwards; position: relative; }
@keyframes pipe-in { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.pipe-row:nth-child(2){animation-delay:.1s}.pipe-row:nth-child(3){animation-delay:.25s}
.pipe-row:nth-child(4){animation-delay:.4s}.pipe-row:nth-child(5){animation-delay:.55s}
.pipe-thumb { width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; background: linear-gradient(135deg, #00D4FF22, #4A6CF722); border: 1px solid rgba(0,212,255,0.2); display:flex; align-items:center; justify-content:center; font-size:18px; }
.pipe-info { flex: 1; min-width: 0; }
.pipe-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipe-meta { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.pipe-badge { font-size: 10px; padding: 4px 10px; border-radius: 999px; font-weight: 600; }
.pipe-badge.opt { background: rgba(0,212,255,0.15); color: #00D4FF; }
.pipe-badge.live { background: rgba(40,200,64,0.15); color: #28C840; }
.pipe-badge.up { background: rgba(40,200,64,0.15); color: #28C840; }
.pipe-badge.processing { background: rgba(254,188,46,0.15); color: #FEBC2E; position: relative; }
.pipe-badge.processing::after { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:#FEBC2E; margin-left:6px; animation: pulse-y 1.4s ease-in-out infinite; }
@keyframes pulse-y { 0%,100%{opacity:.3}50%{opacity:1} }
.pipe-bar-bg { height: 4px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.pipe-bar-fill { height: 100%; background: linear-gradient(90deg, #00D4FF, #4A6CF7); border-radius: 999px; width: 0; animation: pipe-fill 2s cubic-bezier(.4,0,.2,1) .5s forwards; }
@keyframes pipe-fill { to { width: var(--w, 100%); } }
.pipe-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.06); }
.pipe-stat { text-align: center; }
.pipe-stat-v { font-size: 20px; font-weight: 700; color: #fff; font-feature-settings: 'tnum'; }
.pipe-stat-l { font-size: 10px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
.ld-pipe { width: 6px; height: 6px; border-radius: 50%; background: #28C840; display: inline-block; animation: pulse-pipe 2s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(40,200,64,0.6); }
@keyframes pulse-pipe { 0%{box-shadow:0 0 0 0 rgba(40,200,64,.6)}70%{box-shadow:0 0 0 8px rgba(40,200,64,0)}100%{box-shadow:0 0 0 0 rgba(40,200,64,0)} }

/* === EN workflow diagram === */
.wf-card { background: linear-gradient(145deg, rgba(20,28,42,0.92), rgba(10,16,28,0.95)); border: 1px solid rgba(255,255,255,0.08); border-radius: 1.5rem; box-shadow: 0 30px 80px -20px rgba(74,108,247,0.3); padding: 36px 24px; position: relative; overflow: hidden; }
.wf-card::before { content:''; position:absolute; inset:-40%; background: radial-gradient(circle at 50% 50%, rgba(0,212,255,0.1), transparent 60%); animation: wf-glow 14s ease-in-out infinite alternate; pointer-events:none; }
@keyframes wf-glow { 100% { transform: scale(1.2); } }
.wf-title { font-size: 12px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: .12em; text-align: center; margin-bottom: 28px; }
.wf-flow { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.wf-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-bottom: 36px; position: relative; }
.wf-row:last-child { margin-bottom: 0; }
.wf-node { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px 12px; text-align: center; opacity: 0; animation: wf-pop .5s cubic-bezier(.4,0,.2,1) forwards; position: relative; z-index: 2; }
.wf-node:nth-child(1){animation-delay:.1s}.wf-node:nth-child(2){animation-delay:.25s}.wf-node:nth-child(3){animation-delay:.4s}
.wf-row:nth-child(2) .wf-node:nth-child(1){animation-delay:.7s}.wf-row:nth-child(2) .wf-node:nth-child(2){animation-delay:.85s}.wf-row:nth-child(2) .wf-node:nth-child(3){animation-delay:1s}
@keyframes wf-pop { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
.wf-node-active { border-color: rgba(0,212,255,0.5); box-shadow: 0 0 24px -4px rgba(0,212,255,0.4); }
.wf-icon { width: 36px; height: 36px; margin: 0 auto 8px; border-radius: 10px; background: linear-gradient(135deg, #00D4FF22, #4A6CF722); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.wf-name { font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 2px; }
.wf-meta { font-size: 10px; color: rgba(255,255,255,0.5); }
.wf-arrow { display: flex; justify-content: center; align-items: center; margin: -12px 0 -12px; opacity: 0; animation: wf-fade-down 1s ease 1.4s forwards; position: relative; z-index: 1; }
@keyframes wf-fade-down { to { opacity: 1; } }
.wf-arrow svg { animation: wf-bounce 2s ease-in-out infinite; }
@keyframes wf-bounce { 0%,100%{transform:translateY(0)}50%{transform:translateY(4px)} }
.wf-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.06); }
.wf-stat { text-align: center; opacity: 0; animation: wf-fade-up .5s ease 1.6s forwards; }
.wf-stat:nth-child(2){animation-delay:1.7s}.wf-stat:nth-child(3){animation-delay:1.8s}.wf-stat:nth-child(4){animation-delay:1.9s}
@keyframes wf-fade-up { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.wf-stat-v { font-size: 22px; font-weight: 700; color: #fff; font-feature-settings: 'tnum'; }
.wf-stat-l { font-size: 10px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }

/* === Mobile + reduced-motion overrides for dashboards === */
@media (max-width: 768px) {
  .dash-card, .dash-card-hero, .dash-card-intl, .ph-card { transform: none; animation: none; }
  .dash-kpi, .dash-chart-card, .dash-side-card,
  .dash-kpi-intl, .dash-chart-intl, .dash-side-intl { grid-column: span 12; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-card, .dash-card-hero, .dash-card-intl, .ph-card,
  .dash-glow, .dash-glow-hero, .dash-glow-intl, .ph-glow,
  .bar, .b-hero, .bar-intl, .ph-b,
  .line-path, .lp-hero, .line-path-intl, .ph-line,
  .line-area, .la-hero, .line-area-intl, .ph-area,
  .agent-row, .agent-row-intl,
  .live-dot, .live-dot-intl, .ld-hero, .ph-ld, .ld-pipe,
  .pipe-card::before, .pipe-row, .pipe-bar-fill, .pipe-badge.processing::after,
  .wf-card::before, .wf-node, .wf-arrow svg, .wf-arrow, .wf-stat
  { animation: none !important; transform: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; width: var(--w, 100%) !important; }
}