/* ════════════════════════════════════════════════════════════════════════
   EMERGE TRADER PANEL — Styles (isolated with .etp-wrap scope)
   ════════════════════════════════════════════════════════════════════════ */

.etp-wrap {
  --etp-bg-0:#05060a; --etp-bg-1:#0a0c12;
  --etp-glass:rgba(18,20,28,0.55);
  --etp-border:rgba(255,255,255,0.06);
  --etp-border-strong:rgba(255,255,255,0.12);
  --etp-text:#f1f2f6; --etp-text-muted:#8b8fa3; --etp-text-dim:#5a5e70;
  --etp-orange:#ff6a13; --etp-orange-bright:#ff8a3d;
  --etp-orange-glow:rgba(255,106,19,0.35);
  --etp-orange-soft:rgba(255,106,19,0.08);
  --etp-green:#22d896; --etp-green-glow:rgba(34,216,150,0.25);
  --etp-red:#ff4d6b; --etp-red-glow:rgba(255,77,107,0.25);
  --etp-yellow:#ffc048;
  --etp-f-display:"Sora", system-ui, sans-serif;
  --etp-f-mono:"JetBrains Mono", ui-monospace, monospace;
  --etp-f-tech:"Chakra Petch", sans-serif;

  position:relative;
  font-family:var(--etp-f-display);
  color:var(--etp-text);
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.01em;
  max-width:1280px;
  margin:0 auto;
  padding:24px 0;
}

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

/* Headline */
.etp-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--etp-f-tech);font-size:11px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--etp-orange);margin-bottom:18px;
}
.etp-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--etp-orange);box-shadow:0 0 12px var(--etp-orange);
  animation:etp-pulse 2s ease-in-out infinite;
}
@keyframes etp-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.etp-title{
  font-size:clamp(28px,4vw,46px);font-weight:700;
  letter-spacing:-0.03em;line-height:1.05;margin:0 0 14px;max-width:720px;
  color:var(--etp-text);
}
.etp-subtitle{
  color:var(--etp-text-muted);font-size:15px;font-weight:400;
  max-width:560px;margin:0 0 36px;line-height:1.55;
}

/* Card */
.etp-panel{
  position:relative;
  background:linear-gradient(180deg, rgba(20,22,32,0.85) 0%, rgba(14,16,24,0.88) 100%);
  border:1px solid var(--etp-border-strong);border-radius:28px;
  backdrop-filter:blur(30px) saturate(140%);
  -webkit-backdrop-filter:blur(30px) saturate(140%);
  overflow:hidden;
  box-shadow:
    0 2px 0 0 rgba(255,255,255,0.04) inset,
    0 -40px 80px -30px rgba(255,106,19,0.05) inset,
    0 40px 80px -30px rgba(0,0,0,0.8);
}
.etp-panel::before{
  content:"";position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--etp-orange),transparent);
  opacity:0.6;
}
.etp-panel::after{
  content:"";position:absolute;top:-200px;left:50%;
  transform:translateX(-50%);
  width:600px;height:300px;
  background:radial-gradient(ellipse,var(--etp-orange-soft),transparent 70%);
  pointer-events:none;
}

.etp-panel-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 24px;border-bottom:1px solid var(--etp-border);
  background:rgba(255,255,255,0.015);position:relative;z-index:1;
}
.etp-panel-head-label{
  display:flex;align-items:center;gap:10px;
  font-family:var(--etp-f-tech);font-size:11px;
  letter-spacing:0.15em;text-transform:uppercase;color:var(--etp-text-muted);
}
.etp-panel-head-label svg{stroke:currentColor}
.etp-status-dot{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--etp-f-mono);font-size:10px;color:var(--etp-text-muted);
}
.etp-status-dot::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--etp-green);box-shadow:0 0 10px var(--etp-green-glow);
}

.etp-panel-body{padding:48px 36px 40px;position:relative;z-index:1}

.etp-state{display:none}
.etp-state.active{display:block;animation:etp-fadeUp .6s ease both}
@keyframes etp-fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Empty */
.etp-empty-wrap{max-width:520px;margin:0 auto;text-align:center;padding:16px 0 8px}
.etp-empty-icon{
  width:72px;height:72px;margin:0 auto 24px;border-radius:20px;
  background:linear-gradient(135deg,rgba(255,106,19,0.15),rgba(255,106,19,0.02));
  border:1px solid rgba(255,106,19,0.25);
  display:grid;place-items:center;position:relative;
  box-shadow:0 0 40px rgba(255,106,19,0.15);
}
.etp-empty-icon svg{width:32px;height:32px;stroke:var(--etp-orange);fill:none;stroke-width:1.8}
.etp-empty-icon::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  background:conic-gradient(from 0deg,transparent 0%,var(--etp-orange) 50%,transparent 100%);
  opacity:.25;animation:etp-rotate 4s linear infinite;
  z-index:-1;filter:blur(8px);
}
@keyframes etp-rotate{to{transform:rotate(360deg)}}
.etp-empty-title{font-size:24px;font-weight:600;margin:0 0 10px;letter-spacing:-0.02em;color:var(--etp-text)}
.etp-empty-desc{color:var(--etp-text-muted);font-size:14px;line-height:1.55;margin:0 0 28px}

.etp-input-group{display:flex;gap:10px;margin-bottom:14px}
.etp-input-wrap{flex:1;position:relative}
.etp-input-wrap .etp-account-input{
  width:100%;background:rgba(8,10,16,0.7);
  border:1px solid var(--etp-border-strong);border-radius:14px;
  padding:18px 20px 18px 52px;color:var(--etp-text);
  font-family:var(--etp-f-mono);font-size:14px;font-weight:500;
  letter-spacing:0.02em;outline:none;transition:all .3s ease;
  margin:0;
}
.etp-input-wrap .etp-account-input::placeholder{color:var(--etp-text-dim);letter-spacing:0.02em}
.etp-input-wrap .etp-account-input:focus{
  border-color:var(--etp-orange);background:rgba(12,14,22,0.9);
  box-shadow:0 0 0 4px rgba(255,106,19,0.08),0 0 30px rgba(255,106,19,0.08);
}
.etp-input-icon{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;stroke:var(--etp-text-dim);fill:none;stroke-width:1.8;
  transition:stroke .3s ease;pointer-events:none;
}
.etp-input-wrap .etp-account-input:focus + .etp-input-icon{stroke:var(--etp-orange)}

.etp-btn-primary{
  position:relative;background:var(--etp-orange);color:#0a0a0a;
  border:0;border-radius:14px;padding:18px 26px;
  font-family:var(--etp-f-tech);font-size:12px;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
  transition:all .25s ease;overflow:hidden;
  box-shadow:0 6px 24px -4px var(--etp-orange-glow),0 0 0 1px rgba(255,106,19,0.4);
}
.etp-btn-primary:hover:not(:disabled){
  background:var(--etp-orange-bright);transform:translateY(-1px);
  box-shadow:0 10px 30px -4px var(--etp-orange-glow),0 0 0 1px rgba(255,106,19,0.6);
}
.etp-btn-primary:disabled{opacity:.5;cursor:not-allowed}
.etp-btn-primary svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}
.etp-btn-primary::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,0.4) 50%,transparent 60%);
  transform:translateX(-100%);transition:transform .6s ease;
}
.etp-btn-primary:hover:not(:disabled)::before{transform:translateX(100%)}

.etp-input-error{
  color:var(--etp-red);font-family:var(--etp-f-mono);font-size:12px;
  margin-top:12px;display:none;align-items:center;gap:8px;justify-content:center;
}
.etp-input-error.visible{display:inline-flex;animation:etp-shake .4s ease}
@keyframes etp-shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}
.etp-empty-hint{color:var(--etp-text-dim);font-size:12px;font-family:var(--etp-f-mono);margin:8px 0 0}

/* Loading */
.etp-loading-wrap{max-width:480px;margin:0 auto;text-align:center;padding:32px 0}
.etp-loader-stage{position:relative;width:150px;height:150px;margin:0 auto 32px}
.etp-loader-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,106,19,0.15)}
.etp-loader-ring:nth-child(2){inset:20px;border-color:rgba(255,106,19,0.25)}
.etp-loader-ring:nth-child(3){inset:40px;border-color:rgba(255,106,19,0.4)}
.etp-loader-core{
  position:absolute;top:50%;left:50%;
  width:14px;height:14px;border-radius:50%;
  background:var(--etp-orange);transform:translate(-50%,-50%);
  box-shadow:0 0 30px var(--etp-orange);
  animation:etp-corePulse 1.2s ease-in-out infinite;
}
@keyframes etp-corePulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}
  50%{transform:translate(-50%,-50%) scale(.6);opacity:.7}
}
.etp-loader-sweep{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,var(--etp-orange) 40deg,transparent 80deg);
  opacity:.8;animation:etp-sweep 1.8s linear infinite;
  mask:radial-gradient(circle,transparent 0,transparent 10px,black 12px,black 100%);
  -webkit-mask:radial-gradient(circle,transparent 0,transparent 10px,black 12px,black 100%);
}
@keyframes etp-sweep{to{transform:rotate(360deg)}}
.etp-loading-title{font-size:18px;font-weight:600;margin:0 0 22px;letter-spacing:-0.01em;color:var(--etp-text)}
.etp-loading-steps{
  display:flex;flex-direction:column;gap:10px;
  font-family:var(--etp-f-mono);font-size:11.5px;
  text-align:left;max-width:360px;margin:0 auto;
}
.etp-loading-step{
  display:flex;align-items:center;gap:12px;padding:9px 12px;
  background:rgba(255,255,255,0.02);border:1px solid var(--etp-border);
  border-radius:10px;color:var(--etp-text-dim);
  opacity:.4;transition:all .4s ease;
}
.etp-loading-step.active{
  color:var(--etp-text);opacity:1;
  border-color:rgba(255,106,19,0.3);background:rgba(255,106,19,0.04);
}
.etp-loading-step.done{color:var(--etp-text-muted);opacity:1;border-color:rgba(34,216,150,0.2)}
.etp-step-marker{
  width:14px;height:14px;border-radius:50%;
  border:1.5px solid currentColor;display:grid;place-items:center;flex-shrink:0;
}
.etp-loading-step.active .etp-step-marker{
  border-color:var(--etp-orange);color:var(--etp-orange);
  animation:etp-stepPulse 1s ease-in-out infinite;
}
.etp-loading-step.done .etp-step-marker{
  border-color:var(--etp-green);color:var(--etp-green);background:var(--etp-green);
}
.etp-loading-step.done .etp-step-marker::after{
  content:"";width:7px;height:3px;
  border-left:1.5px solid #0a0a0a;border-bottom:1.5px solid #0a0a0a;
  transform:rotate(-45deg) translate(1px,-1px);
}
@keyframes etp-stepPulse{
  0%,100%{box-shadow:0 0 0 0 var(--etp-orange-glow)}
  50%{box-shadow:0 0 0 5px transparent}
}

/* Data state */
.etp-account-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:24px;padding-bottom:20px;
  border-bottom:1px solid var(--etp-border);
  gap:20px;flex-wrap:wrap;
}
.etp-account-ident{display:flex;align-items:center;gap:14px}
.etp-account-avatar{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,rgba(255,106,19,0.25),rgba(255,106,19,0.05));
  border:1px solid rgba(255,106,19,0.3);
  display:grid;place-items:center;
  font-family:var(--etp-f-tech);font-weight:700;font-size:15px;
  color:var(--etp-orange);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}
.etp-account-meta-label{
  font-family:var(--etp-f-tech);font-size:10px;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--etp-text-dim);margin-bottom:4px;
}
.etp-account-meta-value{
  font-family:var(--etp-f-mono);font-size:17px;font-weight:600;
  color:var(--etp-text);letter-spacing:0.01em;
}
.etp-status-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;
  font-family:var(--etp-f-tech);font-size:11px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
}
.etp-status-badge.active{
  color:var(--etp-green);background:rgba(34,216,150,0.08);
  border:1px solid rgba(34,216,150,0.25);
}
.etp-status-badge.active::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--etp-green);
  box-shadow:0 0 10px var(--etp-green);animation:etp-pulse 2s ease-in-out infinite;
}
.etp-status-badge.burned{
  color:var(--etp-red);background:rgba(255,77,107,0.1);
  border:1px solid rgba(255,77,107,0.3);
}
.etp-status-badge.burned::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--etp-red);
  box-shadow:0 0 10px var(--etp-red);
}

/* Burned banner */
.etp-burned-banner{
  background:linear-gradient(135deg,rgba(255,77,107,0.1),rgba(255,77,107,0.03));
  border:1px solid rgba(255,77,107,0.3);border-radius:22px;
  padding:18px 22px;margin-bottom:22px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.etp-burned-banner::before{
  content:"";position:absolute;top:-50%;left:-10%;
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(255,77,107,0.15),transparent 60%);
}
.etp-burned-icon{
  width:40px;height:40px;border-radius:11px;
  background:rgba(255,77,107,0.15);border:1px solid rgba(255,77,107,0.4);
  display:grid;place-items:center;flex-shrink:0;position:relative;z-index:1;
}
.etp-burned-icon svg{width:20px;height:20px;stroke:var(--etp-red);fill:none;stroke-width:2}
.etp-burned-text{flex:1;min-width:200px;position:relative;z-index:1}
.etp-burned-title{font-size:14px;font-weight:600;margin-bottom:4px;color:var(--etp-text)}
.etp-burned-sub{font-size:12.5px;color:var(--etp-text-muted);line-height:1.5}
.etp-burned-sub strong{color:var(--etp-red)}
.etp-burned-sub strong:nth-of-type(2){color:var(--etp-orange)}
.etp-burned-sub strong:nth-of-type(3){color:var(--etp-orange)}
.etp-btn-burned{
  position:relative;z-index:1;
  background:var(--etp-red);color:#0a0a0a;
  border:0;border-radius:12px;padding:12px 20px;
  font-family:var(--etp-f-tech);font-size:11px;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 6px 24px -4px var(--etp-red-glow);transition:all .25s ease;
  text-decoration:none;white-space:nowrap;
}
.etp-btn-burned:hover{transform:translateY(-1px);box-shadow:0 10px 30px -4px var(--etp-red-glow);color:#0a0a0a;text-decoration:none}
.etp-btn-burned svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2}

/* KPIs */
.etp-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.etp-kpi{
  background:rgba(8,10,16,0.5);border:1px solid var(--etp-border);
  border-radius:14px;padding:15px 17px;
  position:relative;overflow:hidden;transition:all .25s ease;
}
.etp-kpi:hover{border-color:rgba(255,255,255,0.15);transform:translateY(-2px);background:rgba(12,14,22,0.6)}
.etp-kpi::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);
}
.etp-kpi-label{
  font-family:var(--etp-f-tech);font-size:10px;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--etp-text-dim);margin-bottom:9px;
  display:flex;align-items:center;gap:6px;
}
.etp-kpi-label svg{width:12px;height:12px;stroke:currentColor}
.etp-kpi-value{font-family:var(--etp-f-mono);font-size:21px;font-weight:600;letter-spacing:-0.01em;line-height:1.1;color:var(--etp-text)}
.etp-kpi-value.positive{color:var(--etp-green)}
.etp-kpi-value.negative{color:var(--etp-red)}
.etp-kpi-delta{font-family:var(--etp-f-mono);font-size:11px;margin-top:4px;color:var(--etp-text-muted)}
.etp-kpi-delta.up{color:var(--etp-green)}
.etp-kpi-delta.down{color:var(--etp-red)}

/* Chart */
.etp-data-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;margin-bottom:18px}
.etp-equity-card{
  grid-column:1;
  background:rgba(8,10,16,0.5);border:1px solid var(--etp-border);
  border-radius:22px;padding:20px 22px 18px;
  position:relative;overflow:hidden;
}
.etp-equity-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.etp-equity-title{
  font-family:var(--etp-f-tech);font-size:11px;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--etp-text-muted);
}
.etp-equity-value{font-family:var(--etp-f-mono);font-size:30px;font-weight:700;letter-spacing:-0.02em;color:var(--etp-text);margin-top:4px}
.etp-equity-currency{color:var(--etp-text-dim);font-size:17px;font-weight:400;margin-left:6px}
.etp-equity-change{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--etp-f-mono);font-size:12px;font-weight:600;
  padding:5px 10px;border-radius:999px;
}
.etp-equity-change.up{color:var(--etp-green);background:rgba(34,216,150,0.08);border:1px solid rgba(34,216,150,0.2)}
.etp-equity-change.down{color:var(--etp-red);background:rgba(255,77,107,0.08);border:1px solid rgba(255,77,107,0.2)}
.etp-chart-container{position:relative;height:190px;margin-top:16px}
.etp-chart-svg{width:100%;height:100%;overflow:visible}
.etp-chart-tooltip{
  position:absolute;pointer-events:none;
  background:rgba(8,10,16,0.95);
  border:1px solid rgba(255,106,19,0.3);
  border-radius:8px;padding:7px 11px;
  font-family:var(--etp-f-mono);font-size:11px;
  white-space:nowrap;opacity:0;transition:opacity .2s ease;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  transform:translate(-50%,-120%);z-index:3;
}
.etp-chart-tooltip.visible{opacity:1}
.etp-tt-date{color:var(--etp-text-dim);font-size:10px;margin-bottom:2px}
.etp-tt-value{color:var(--etp-text);font-weight:600}

/* Ring */
.etp-progress-card{
  grid-column:2;
  background:rgba(8,10,16,0.5);border:1px solid var(--etp-border);
  border-radius:22px;padding:20px 22px;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.etp-progress-card::before{
  content:"";position:absolute;top:-100px;right:-100px;
  width:250px;height:250px;border-radius:50%;
  background:radial-gradient(circle,var(--etp-orange-soft),transparent 70%);
}
.etp-progress-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.etp-progress-title{
  font-family:var(--etp-f-tech);font-size:11px;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--etp-text-muted);
}
.etp-phase-pill{
  font-family:var(--etp-f-tech);font-size:10px;
  letter-spacing:0.14em;text-transform:uppercase;
  background:rgba(255,106,19,0.1);color:var(--etp-orange);
  border:1px solid rgba(255,106,19,0.3);
  padding:4px 10px;border-radius:6px;
}
.etp-ring-wrap{position:relative;width:170px;height:170px;margin:14px auto 8px}
.etp-ring-wrap svg{width:100%;height:100%;transform:rotate(-90deg)}
.etp-ring-track{fill:none;stroke:rgba(255,255,255,0.05);stroke-width:10}
.etp-ring-fill{
  fill:none;stroke-width:10;stroke-linecap:round;
  filter:drop-shadow(0 0 10px var(--etp-orange-glow));
  transition:stroke-dashoffset 1.5s cubic-bezier(.2,.8,.2,1);
}
.etp-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.etp-ring-pct{font-family:var(--etp-f-mono);font-size:34px;font-weight:700;line-height:1;letter-spacing:-0.02em;color:var(--etp-text)}
.etp-pct{color:var(--etp-orange);font-size:19px;margin-left:2px}
.etp-ring-label{
  font-family:var(--etp-f-tech);font-size:10px;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--etp-text-dim);margin-top:6px;
}
.etp-progress-foot{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;font-family:var(--etp-f-mono);font-size:12px}
.etp-progress-foot div{display:flex;flex-direction:column;gap:2px}
.etp-progress-foot .etp-label{
  font-family:var(--etp-f-tech);font-size:10px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--etp-text-dim);
}
.etp-progress-foot .etp-val{color:var(--etp-text);font-weight:600}

/* Risk */
.etp-risk-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.etp-risk-card{
  background:rgba(8,10,16,0.5);border:1px solid var(--etp-border);
  border-radius:22px;padding:20px 22px;
}
.etp-risk-title{
  font-family:var(--etp-f-tech);font-size:11px;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--etp-text-muted);margin-bottom:14px;
  display:flex;justify-content:space-between;align-items:center;
}
.etp-risk-title .etp-limit{color:var(--etp-text-dim);font-size:10px}
.etp-dd-bar{
  height:10px;border-radius:999px;
  background:rgba(255,255,255,0.04);
  position:relative;overflow:hidden;margin-bottom:10px;
}
.etp-dd-bar-fill{
  position:absolute;left:0;top:0;bottom:0;
  background:linear-gradient(90deg,var(--etp-green) 0%,var(--etp-yellow) 70%,var(--etp-red) 100%);
  border-radius:999px;
  transition:width 1.5s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 14px rgba(255,106,19,0.25);
}
.etp-dd-numbers{display:flex;justify-content:space-between;font-family:var(--etp-f-mono);font-size:12px;color:var(--etp-text-muted)}
.etp-dd-numbers strong{color:var(--etp-text);font-weight:600}

.etp-micro-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.etp-micro-stat{
  text-align:center;padding:13px 8px;
  background:rgba(255,255,255,0.02);border:1px solid var(--etp-border);
  border-radius:14px;
}
.etp-micro-stat-value{font-family:var(--etp-f-mono);font-size:19px;font-weight:600;color:var(--etp-text);line-height:1}
.etp-micro-stat-label{
  font-family:var(--etp-f-tech);font-size:9px;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--etp-text-dim);margin-top:6px;
}

/* Secondary CTA */
.etp-secondary-cta{
  margin-top:22px;
  background:linear-gradient(135deg,rgba(255,106,19,0.08),rgba(255,106,19,0.02));
  border:1px solid rgba(255,106,19,0.2);border-radius:22px;
  padding:18px 22px;
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;position:relative;overflow:hidden;
}
.etp-secondary-cta::before{
  content:"";position:absolute;top:-50%;right:-10%;
  width:300px;height:300px;
  background:radial-gradient(circle,var(--etp-orange-soft),transparent 60%);
}
.etp-secondary-cta-text{position:relative}
.etp-secondary-cta-title{font-size:15px;font-weight:600;margin-bottom:4px;letter-spacing:-0.01em;color:var(--etp-text)}
.etp-secondary-cta-sub{font-size:13px;color:var(--etp-text-muted)}
.etp-secondary-cta-sub strong{color:var(--etp-orange)}
.etp-btn-ghost{
  position:relative;z-index:1;
  background:transparent;color:var(--etp-orange);
  border:1px solid rgba(255,106,19,0.4);border-radius:14px;
  padding:12px 20px;
  font-family:var(--etp-f-tech);font-size:11px;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;
  transition:all .25s ease;
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
}
.etp-btn-ghost:hover{background:var(--etp-orange);color:#0a0a0a;box-shadow:0 0 20px var(--etp-orange-glow);text-decoration:none}
.etp-btn-ghost svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2}

/* Responsive */
@media (max-width:860px){
  .etp-wrap{padding:16px 0}
  .etp-panel-body{padding:28px 18px}
  .etp-panel-head{padding:14px 18px}
  .etp-data-grid{grid-template-columns:1fr}
  .etp-equity-card,.etp-progress-card{grid-column:1}
  .etp-kpi-row{grid-template-columns:1fr 1fr;gap:10px}
  .etp-risk-row{grid-template-columns:1fr}
  .etp-account-head{flex-direction:column;align-items:flex-start}
  .etp-input-group{flex-direction:column}
  .etp-btn-primary{justify-content:center;width:100%}
  .etp-ring-wrap{width:150px;height:150px}
  .etp-equity-value{font-size:24px}
}
@media (max-width:480px){
  .etp-kpi-row{grid-template-columns:1fr 1fr}
  .etp-micro-stats{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .etp-micro-stat{padding:10px 4px}
  .etp-micro-stat-value{font-size:15px}
  .etp-secondary-cta,.etp-burned-banner{flex-direction:column;align-items:stretch;text-align:center}
  .etp-secondary-cta .etp-btn-ghost,.etp-btn-burned{justify-content:center}
}

/* ─── Banner EN RIESGO (amarillo) ─── */
.etp-risk-banner{
  background:linear-gradient(135deg,rgba(255,192,72,0.1),rgba(255,192,72,0.03));
  border:1px solid rgba(255,192,72,0.3);border-radius:22px;
  padding:16px 20px;margin-bottom:22px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.etp-risk-banner::before{
  content:"";position:absolute;top:-50%;left:-10%;
  width:250px;height:250px;
  background:radial-gradient(circle,rgba(255,192,72,0.12),transparent 60%);
}
.etp-risk-banner-icon{
  width:36px;height:36px;border-radius:10px;
  background:rgba(255,192,72,0.15);border:1px solid rgba(255,192,72,0.4);
  display:grid;place-items:center;flex-shrink:0;position:relative;z-index:1;
}
.etp-risk-banner-icon svg{width:18px;height:18px;stroke:var(--etp-yellow);fill:none;stroke-width:2}
.etp-risk-banner-text{flex:1;min-width:200px;position:relative;z-index:1}
.etp-risk-banner-title{font-size:14px;font-weight:600;margin-bottom:2px;color:var(--etp-text)}
.etp-risk-banner-sub{font-size:12.5px;color:var(--etp-text-muted);line-height:1.5}

/* ─── Nota bajo el ring (sub-texto de progress) ─── */
.etp-progress-note{
  margin-top:14px;
  padding:10px 14px;
  background:rgba(255,106,19,0.06);
  border:1px solid rgba(255,106,19,0.18);
  border-radius:10px;
  font-family:var(--etp-f-mono);font-size:11.5px;
  color:var(--etp-text-muted);line-height:1.5;
  display:flex;align-items:center;gap:8px;
}
.etp-progress-note.ok{
  background:rgba(34,216,150,0.06);
  border-color:rgba(34,216,150,0.2);
  color:var(--etp-green);
}
.etp-progress-note.warn{
  background:rgba(255,192,72,0.06);
  border-color:rgba(255,192,72,0.22);
  color:var(--etp-yellow);
}
.etp-progress-note .etp-note-icon{
  width:14px;height:14px;border-radius:50%;
  flex-shrink:0;display:grid;place-items:center;
  border:1.5px solid currentColor;
  font-size:10px;font-weight:700;font-family:var(--etp-f-tech);
}

/* ─── Plan pill variaciones ─── */
.etp-phase-pill[data-variant="ev"]{
  background:rgba(137,110,255,0.12);
  color:#a896ff;
  border:1px solid rgba(137,110,255,0.3);
}

/* ─── Mobile ─── */
@media (max-width:480px){
  .etp-risk-banner{flex-direction:column;align-items:stretch;text-align:center}
}

/* ═══════════════════════════════════════════════════════════════════════
   HUD ACCESS PANEL (bloque de acceso estilo "terminal")
   Reemplaza el empty state clásico.
   ═══════════════════════════════════════════════════════════════════════ */
.etp-hud{
  position:relative;
  max-width:560px;
  margin:0 auto;
  padding:24px 0 12px;
}
.etp-hud-glow{
  position:absolute;inset:-40px;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,106,19,0.14), transparent 70%);
  filter:blur(30px);
  z-index:0;
}
.etp-hud-panel{
  position:relative;z-index:1;
  background:linear-gradient(180deg, rgba(16,20,27,0.85) 0%, rgba(10,13,18,0.92) 100%);
  border:1px solid rgba(255,106,19,0.33);
  border-radius:18px;
  padding:34px 36px 26px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 1px 0 rgba(255,255,255,0.1) inset,
    0 30px 80px rgba(0,0,0,0.7),
    0 0 60px rgba(255,106,19,0.18);
}
/* Scanlines dentro del panel */
.etp-hud-scanlines{
  position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.02) 0,
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 4px);
  opacity:0.8;
}
/* Corner brackets */
.etp-hud-bracket{
  position:absolute;width:14px;height:14px;pointer-events:none;
  border-color:var(--etp-orange-bright);
}
.etp-hud-bracket--tl{top:10px;left:10px;border-top:1.5px solid var(--etp-orange-bright);border-left:1.5px solid var(--etp-orange-bright);filter:drop-shadow(0 0 8px var(--etp-orange))}
.etp-hud-bracket--tr{top:10px;right:10px;border-top:1.5px solid var(--etp-orange-bright);border-right:1.5px solid var(--etp-orange-bright);filter:drop-shadow(0 0 8px var(--etp-orange))}
.etp-hud-bracket--br{bottom:10px;right:10px;border-bottom:1.5px solid var(--etp-orange-bright);border-right:1.5px solid var(--etp-orange-bright);filter:drop-shadow(0 0 8px var(--etp-orange))}
.etp-hud-bracket--bl{bottom:10px;left:10px;border-bottom:1.5px solid var(--etp-orange-bright);border-left:1.5px solid var(--etp-orange-bright);filter:drop-shadow(0 0 8px var(--etp-orange))}

/* Header */
.etp-hud-head{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:22px;
}
.etp-hud-head-left{display:flex;align-items:center;gap:10px}
.etp-hud-head-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--etp-orange);
  box-shadow:0 0 10px var(--etp-orange);
  animation:etp-hud-pulse 2s ease-in-out infinite;
}
@keyframes etp-hud-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.5;transform:scale(0.85)}
}
.etp-hud-head-label{
  font-family:var(--etp-f-mono);font-size:11px;font-weight:600;
  letter-spacing:0.22em;color:var(--etp-orange-bright);
}
.etp-hud-head-id{
  font-family:var(--etp-f-mono);font-size:10px;
  color:var(--etp-text-dim);letter-spacing:0.14em;
}

/* Title */
.etp-hud-title{
  position:relative;z-index:2;
  margin:0 0 6px;
  font-family:var(--etp-f-display);
  font-size:clamp(26px,4vw,34px);font-weight:600;
  letter-spacing:-0.025em;line-height:1.08;
  color:var(--etp-text);
}
.etp-hud-title-grad{
  background:linear-gradient(135deg, var(--etp-orange-bright), var(--etp-orange), #ff2e00);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.etp-hud-subtitle{
  position:relative;z-index:2;
  margin:10px 0 26px;
  font-size:13.5px;line-height:1.55;
  color:var(--etp-text-muted);max-width:420px;
}

/* Input label */
.etp-hud-label{
  position:relative;z-index:2;
  display:flex;align-items:center;
  font-family:var(--etp-f-mono);font-size:10px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--etp-text-dim);margin-bottom:8px;
  transition:color 200ms;
}
.etp-hud-label-arrow{margin-right:6px}
.etp-hud-label-scan{
  margin-left:auto;color:var(--etp-orange);font-size:9px;
  opacity:0;transition:opacity 200ms;
}
.etp-hud.etp-hud-focused .etp-hud-label{color:var(--etp-orange-bright)}
.etp-hud.etp-hud-focused .etp-hud-label-scan{opacity:1}

/* Inputbox */
.etp-hud-inputbox{
  position:relative;z-index:2;
  display:flex;align-items:center;
  padding:14px 16px;
  background:rgba(5,7,10,0.6);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
  transition:all 200ms cubic-bezier(0.22,1,0.36,1);
  overflow:hidden;
}
.etp-hud.etp-hud-focused .etp-hud-inputbox{
  border-color:var(--etp-orange);
  box-shadow:
    0 0 0 3px rgba(255,106,19,0.13),
    0 0 20px rgba(255,106,19,0.27),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Beam que barre el input cuando está focused */
.etp-hud-inputbox-beam{
  position:absolute;top:0;bottom:0;
  width:60px;transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,106,19,0.2), transparent);
  pointer-events:none;opacity:0;
}
.etp-hud.etp-hud-focused .etp-hud-inputbox-beam{
  opacity:1;
  animation:etp-hud-beam 3s linear infinite;
}
@keyframes etp-hud-beam{
  0%{transform:translateX(-60px)}
  100%{transform:translateX(calc(560px))}
}
.etp-hud-inputbox-prompt{
  font-family:var(--etp-f-mono);font-size:14px;
  color:var(--etp-orange);margin-right:10px;
}
.etp-hud-input{
  flex:1;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  padding:0 !important;
  font-family:var(--etp-f-mono);
  font-size:15px;font-weight:500;
  color:var(--etp-text) !important;
  letter-spacing:0.06em;
  text-transform:uppercase;
  caret-color:transparent;
  box-shadow:none !important;
  width:100%;
  min-width:0;
}
.etp-hud-input::placeholder{
  color:var(--etp-text-dim);
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.etp-hud-input:focus{
  border-color:transparent !important;
  background:transparent !important;
  box-shadow:none !important;
}
.etp-hud-caret{
  display:inline-block;width:10px;height:18px;
  background:var(--etp-orange);
  opacity:0.3;margin-left:-2px;
  box-shadow:0 0 8px var(--etp-orange);
  animation:etp-hud-blink 1s steps(2) infinite;
}
.etp-hud.etp-hud-focused .etp-hud-caret{opacity:1}
@keyframes etp-hud-blink{
  0%,50%{opacity:1}
  50.01%,100%{opacity:0.2}
}
.etp-hud-hint{
  position:relative;z-index:2;
  margin-top:8px;font-size:11px;
  font-family:var(--etp-f-mono);letter-spacing:0.06em;
  color:var(--etp-text-dim);
}

/* CTA */
.etp-hud-cta{
  position:relative;z-index:2;
  width:100%;
  margin-top:18px;
  padding:17px 20px;
  border-radius:12px;border:0;
  background:linear-gradient(135deg, var(--etp-orange-bright), var(--etp-orange), #ff2e00);
  color:#05070A;
  font-family:var(--etp-f-display);
  font-size:14px;font-weight:700;letter-spacing:0.2em;
  text-transform:uppercase;
  cursor:pointer;overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,106,19,0.55) inset,
    0 0 30px rgba(255,106,19,0.4),
    0 10px 30px rgba(255,106,19,0.25),
    inset 0 1px 0 rgba(255,255,255,0.3);
  transition:all 300ms cubic-bezier(0.22,1,0.36,1);
  display:flex;align-items:center;justify-content:center;
}
.etp-hud-cta:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:
    0 0 0 1px var(--etp-orange) inset,
    0 0 50px rgba(255,106,19,0.6),
    0 14px 40px rgba(255,106,19,0.4),
    inset 0 1px 0 rgba(255,255,255,0.4);
}
.etp-hud-cta:disabled,
.etp-hud-cta.is-empty{
  background:rgba(255,255,255,0.05) !important;
  color:var(--etp-text-dim) !important;
  box-shadow:none !important;
  cursor:not-allowed;
}
.etp-hud-cta-sweep{
  position:absolute;top:0;bottom:0;width:80px;
  left:-20%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  pointer-events:none;opacity:0;
}
.etp-hud-cta:not(:disabled):not(.is-empty) .etp-hud-cta-sweep{
  opacity:1;
  animation:etp-hud-sweep 3s ease-in-out infinite;
}
@keyframes etp-hud-sweep{
  0%{left:-20%}
  100%{left:120%}
}
.etp-hud-cta-inner{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:12px;
  justify-content:center;
}
.etp-hud-cta-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etp-hud-cta svg{flex-shrink:0}

/* Footer */
.etp-hud-foot{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.06);
  font-family:var(--etp-f-mono);font-size:10px;
  color:var(--etp-text-dim);letter-spacing:0.14em;
  flex-wrap:wrap;gap:10px;
}
.etp-hud-foot-mid{color:var(--etp-orange-bright)}

/* Error dentro del HUD */
.etp-hud-panel .etp-input-error{
  margin:14px 0 0;
  justify-content:flex-start;
  padding:10px 12px;
  background:rgba(255,77,107,0.06);
  border:1px solid rgba(255,77,107,0.25);
  border-radius:8px;
  font-family:var(--etp-f-mono);font-size:11px;
  display:none;
}
.etp-hud-panel .etp-input-error.visible{display:inline-flex}

/* Responsive */
@media (max-width:560px){
  .etp-hud{padding:12px 0 4px}
  .etp-hud-panel{padding:24px 20px 20px;border-radius:14px}
  .etp-hud-bracket{width:10px;height:10px}
  .etp-hud-head{margin-bottom:18px}
  .etp-hud-head-label{font-size:10px;letter-spacing:0.18em}
  .etp-hud-head-id{font-size:9px}
  .etp-hud-subtitle{font-size:13px;margin-bottom:22px}
  .etp-hud-cta{font-size:11px;letter-spacing:0.14em;padding:15px 14px}
  .etp-hud-cta-text{font-size:11px}
  .etp-hud-foot{font-size:9px;letter-spacing:0.1em;justify-content:center;text-align:center}
  .etp-hud-foot > span{flex-basis:100%;text-align:center}
}

/* ═══════════════════════════════════════════════════════════════════════
   HUD v1.2.1 — Ajustes de layout
   - Sin recuadro exterior cuando está en empty state
   - Título + subtítulo centrados
   - Reducción de espacios
   - Stage para flotantes
   ═══════════════════════════════════════════════════════════════════════ */

/* Cuando el state activo es "empty", el recuadro exterior se hace invisible.
   Así el HUD queda limpio sobre el fondo negro de tu web. */
.etp-panel:has(.etp-state.active[data-state="empty"]){
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.etp-panel:has(.etp-state.active[data-state="empty"])::before,
.etp-panel:has(.etp-state.active[data-state="empty"])::after{
  display:none !important;
}
.etp-panel:has(.etp-state.active[data-state="empty"]) .etp-panel-head{
  display:none !important;
}
.etp-panel:has(.etp-state.active[data-state="empty"]) .etp-panel-body{
  padding:0 !important;
}

/* Fallback para navegadores que no soportan :has() aún (Firefox < 121). 
   Las clases aux las va a aplicar el JS. */
.etp-panel.etp-is-empty{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.etp-panel.etp-is-empty::before,
.etp-panel.etp-is-empty::after{display:none !important}
.etp-panel.etp-is-empty .etp-panel-head{display:none !important}
.etp-panel.etp-is-empty .etp-panel-body{padding:0 !important}

/* Stage: contenedor que hostea HUD + flotantes alrededor */
.etp-hud-stage{
  position:relative;
  min-height:560px;
  padding:40px 0;
}
.etp-hud-stage .etp-hud{
  margin:0 auto;
  padding:0;
}

/* Centrar contenido del HUD */
.etp-hud-panel{
  text-align:center;
}
.etp-hud-title{text-align:center}
.etp-hud-subtitle{
  text-align:center;
  margin-left:auto;margin-right:auto;
  max-width:420px;
}
/* Label, input, hint y footer vuelven a alineación normal (left/space-between) */
.etp-hud-label,
.etp-hud-inputbox,
.etp-hud-hint,
.etp-hud-foot,
.etp-hud-panel .etp-input-error{
  text-align:left;
}

/* Reducir espacio top del HUD para que quede más cerca del título de la sección */
.etp-hud{padding-top:0}

/* ═══════════════════════════════════════════════════════════════════════
   FLOTANTES
   ═══════════════════════════════════════════════════════════════════════ */
.etp-float{
  position:absolute;
  font-family:var(--etp-f-mono);
  animation:etp-float-in 600ms cubic-bezier(0.22,1,0.36,1) backwards;
}
.etp-float--tl{top:4%;left:0;animation-delay:200ms}
.etp-float--tr{top:2%;right:0;animation-delay:350ms}
.etp-float--bl{bottom:6%;left:0;animation-delay:500ms}
.etp-float--br{bottom:10%;right:0;animation-delay:650ms}
.etp-float--chips{top:44%;left:0;animation-delay:800ms}
.etp-float--es{top:46%;right:0;animation-delay:900ms;width:220px}

@keyframes etp-float-in{
  from{opacity:0;transform:translate(0,12px) scale(0.96)}
  to{opacity:1;transform:translate(0,0) scale(1)}
}

/* Card flotante */
.etp-float--card{
  width:200px;
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(16,20,27,0.85) 0%, rgba(10,13,18,0.75) 100%);
  border-radius:12px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
.etp-float--card[data-color="green"]{ border:1px solid rgba(39,227,164,0.27); box-shadow:0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(39,227,164,0.13), inset 0 1px 0 rgba(255,255,255,0.06); }
.etp-float--card[data-color="orange"]{border:1px solid rgba(255,154,69,0.27); box-shadow:0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(255,106,19,0.13), inset 0 1px 0 rgba(255,255,255,0.06); }
.etp-float--card[data-color="blue"]{  border:1px solid rgba(91,183,255,0.27); box-shadow:0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(91,183,255,0.13), inset 0 1px 0 rgba(255,255,255,0.06); }
.etp-float--card[data-color="yellow"]{border:1px solid rgba(255,192,72,0.27); box-shadow:0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(255,192,72,0.13), inset 0 1px 0 rgba(255,255,255,0.06); }

.etp-float-corner{
  position:absolute;width:6px;height:6px;
  pointer-events:none;
}
.etp-float-corner--tr{top:4px;right:4px}
.etp-float-corner--bl{bottom:4px;left:4px}
.etp-float--card[data-color="green"]  .etp-float-corner--tr{border-top:1px solid #27E3A4;border-right:1px solid #27E3A4}
.etp-float--card[data-color="green"]  .etp-float-corner--bl{border-bottom:1px solid #27E3A4;border-left:1px solid #27E3A4}
.etp-float--card[data-color="orange"] .etp-float-corner--tr{border-top:1px solid #FF9A45;border-right:1px solid #FF9A45}
.etp-float--card[data-color="orange"] .etp-float-corner--bl{border-bottom:1px solid #FF9A45;border-left:1px solid #FF9A45}
.etp-float--card[data-color="blue"]   .etp-float-corner--tr{border-top:1px solid #5BB7FF;border-right:1px solid #5BB7FF}
.etp-float--card[data-color="blue"]   .etp-float-corner--bl{border-bottom:1px solid #5BB7FF;border-left:1px solid #5BB7FF}
.etp-float--card[data-color="yellow"] .etp-float-corner--tr{border-top:1px solid #FFC048;border-right:1px solid #FFC048}
.etp-float--card[data-color="yellow"] .etp-float-corner--bl{border-bottom:1px solid #FFC048;border-left:1px solid #FFC048}

.etp-float-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:8px;
}
.etp-float-label{
  font-size:10px;font-weight:600;letter-spacing:0.2em;
  color:var(--etp-text-dim);text-transform:uppercase;
}
.etp-float-dot{
  width:5px;height:5px;border-radius:50%;
  animation:etp-hud-pulse 2s ease-in-out infinite;
}
.etp-float--card[data-color="green"]  .etp-float-dot{background:#27E3A4;box-shadow:0 0 6px #27E3A4}
.etp-float--card[data-color="orange"] .etp-float-dot{background:#FF9A45;box-shadow:0 0 6px #FF9A45}
.etp-float--card[data-color="blue"]   .etp-float-dot{background:#5BB7FF;box-shadow:0 0 6px #5BB7FF}
.etp-float--card[data-color="yellow"] .etp-float-dot{background:#FFC048;box-shadow:0 0 6px #FFC048}

.etp-float-value{
  font-weight:600;font-size:20px;
  color:var(--etp-text);letter-spacing:-0.01em;line-height:1;
  text-align:left;
}
.etp-float-delta{
  margin-top:4px;font-size:11px;font-weight:500;text-align:left;
}
.etp-float--card[data-color="green"]  .etp-float-delta{color:#27E3A4}
.etp-float--card[data-color="orange"] .etp-float-delta{color:#FF9A45}
.etp-float--card[data-color="blue"]   .etp-float-delta{color:#5BB7FF}
.etp-float--card[data-color="yellow"] .etp-float-delta{color:#FFC048}
.etp-float-spark{
  width:100%;height:32px;margin-top:8px;display:block;
}

/* Chips */
.etp-float--chips{display:flex;flex-direction:column;gap:8px}
.etp-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;
  font-family:var(--etp-f-mono);font-size:10px;font-weight:600;
  letter-spacing:0.16em;
  background:rgba(5,7,10,0.7);
  border-radius:999px;
  backdrop-filter:blur(10px);
  width:fit-content;
}
.etp-chip-dot{width:6px;height:6px;border-radius:50%}
.etp-chip--green{color:#27E3A4;border:1px solid rgba(39,227,164,0.2)}
.etp-chip--green .etp-chip-dot{background:#27E3A4;box-shadow:0 0 6px #27E3A4}
.etp-chip--orange{color:#FF9A45;border:1px solid rgba(255,154,69,0.2)}
.etp-chip--orange .etp-chip-dot{background:#FF9A45;box-shadow:0 0 6px #FF9A45}
.etp-chip--blue{color:#5BB7FF;border:1px solid rgba(91,183,255,0.2)}
.etp-chip--blue .etp-chip-dot{background:#5BB7FF;box-shadow:0 0 6px #5BB7FF}

/* ES mini chart */
.etp-float--es{
  padding:12px 14px;
  background:rgba(5,7,10,0.75);
  border:1px solid rgba(255,122,26,0.25);
  border-radius:10px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.etp-es-head{
  display:flex;justify-content:space-between;align-items:center;
  font-size:10px;letter-spacing:0.2em;font-weight:600;
  color:var(--etp-text-dim);margin-bottom:6px;
}
.etp-es-price{color:#27E3A4}
.etp-es-foot{
  display:flex;justify-content:space-between;
  margin-top:6px;
  font-size:9px;letter-spacing:0.1em;color:var(--etp-text-dim);
}
.etp-es-up{color:#27E3A4}

/* Responsive: flotantes se colapsan debajo del HUD en mobile */
@media (max-width:900px){
  .etp-hud-stage{min-height:0;padding:12px 0}
  .etp-float{
    position:static !important;
    margin:0 auto 12px;
    animation-duration:400ms;
  }
  .etp-float--card{width:100%;max-width:300px}
  .etp-float--chips{align-items:center;max-width:300px}
  .etp-float--es{max-width:300px;width:auto}
  .etp-float--tl,.etp-float--tr,.etp-float--bl,.etp-float--br,
  .etp-float--chips,.etp-float--es{display:none}
  /* En mobile mostramos solo el HUD para no saturar */
}

/* ═══════════════════════════════════════════════════════════════════════
   HUD "TRADERS ACTIVOS" — indicador vivo centrado arriba
   ═══════════════════════════════════════════════════════════════════════ */
.etp-float--traders{
  top:-4px;
  left:50%;
  transform:translateX(-50%);
  width:auto;
  padding:10px 20px 12px;
  background:linear-gradient(180deg, rgba(20,14,10,0.85) 0%, rgba(10,8,6,0.92) 100%);
  border:1px solid rgba(255,106,19,0.4);
  border-radius:12px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:
    0 10px 40px rgba(0,0,0,0.6),
    0 0 40px rgba(255,106,19,0.2),
    inset 0 1px 0 rgba(255,255,255,0.08);
  animation-delay:1000ms;
  min-width:220px;
  text-align:center;
}
.etp-traders-head{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-bottom:6px;
}
.etp-traders-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--etp-orange);
  box-shadow:0 0 8px var(--etp-orange);
  animation:etp-hud-pulse 1.4s ease-in-out infinite;
}
.etp-traders-label{
  font-family:var(--etp-f-mono);font-size:10px;font-weight:600;
  letter-spacing:0.22em;
  color:var(--etp-orange-bright);
  text-transform:uppercase;
}
.etp-traders-live{
  font-family:var(--etp-f-mono);font-size:8px;font-weight:700;
  letter-spacing:0.2em;
  padding:2px 6px;
  background:rgba(255,106,19,0.2);
  border:1px solid rgba(255,106,19,0.4);
  border-radius:4px;
  color:var(--etp-orange-bright);
}
.etp-traders-value{
  font-family:var(--etp-f-mono);font-weight:700;
  font-size:28px;letter-spacing:0.02em;line-height:1;
  background:linear-gradient(135deg, #FFB347, #FF7A1A, #FF3D2E);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  margin-bottom:4px;
}
.etp-traders-foot{
  font-family:var(--etp-f-mono);font-size:10px;
  letter-spacing:0.08em;
  color:var(--etp-text-muted);
}
.etp-traders-trend{color:#27E3A4}

/* Ajuste: si tenemos traders activos arriba, bajar un poco las cards top */
.etp-float--tl{top:10%}
.etp-float--tr{top:8%}

/* Mobile: traders activos se muestra compacto sobre el HUD (no escondido) */
@media (max-width:900px){
  .etp-float--traders{
    display:block !important;
    position:static !important;
    transform:none !important;
    margin:0 auto 16px;
    max-width:260px;
  }
  .etp-traders-value{font-size:24px}
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.2.4 — Ajustes de layout del empty state
   ═══════════════════════════════════════════════════════════════════════ */

/* Centrar título + subtítulo de la sección (el "Consulta el estado...") 
   cuando el panel está en modo empty. En data state siguen con alineación normal. */
.etp-wrap:has(.etp-state.active[data-state="empty"]) .etp-eyebrow,
.etp-wrap:has(.etp-state.active[data-state="empty"]) .etp-title,
.etp-wrap:has(.etp-state.active[data-state="empty"]) .etp-subtitle{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
/* El eyebrow es inline-flex, necesita display:flex + justify-content para centrarse */
.etp-wrap:has(.etp-state.active[data-state="empty"]) .etp-eyebrow{
  display:flex;
  justify-content:center;
}
/* Fallback para browsers sin :has() — usa la clase que ya aplicamos al panel */
.etp-wrap .etp-panel.etp-is-empty ~ * .etp-eyebrow,
.etp-wrap .etp-panel.etp-is-empty ~ * .etp-title,
.etp-wrap .etp-panel.etp-is-empty ~ * .etp-subtitle{ /* no aplica ~ * acá, dejo solución JS */ }

/* Bajar el HUD para dejar lugar al card "TRADERS ACTIVOS" arriba
   + margen de 20px entre el card y el marco del login */
.etp-hud-stage{
  padding-top:115px !important;  /* era 90px → 90 + 25 para asegurar separación visual */
}

/* El card "traders activos" en su posición alta */
.etp-float--traders{
  top:10px !important;
}

/* En mobile no necesitamos tanto padding top porque traders activos pasa a flujo normal */
@media (max-width:900px){
  .etp-hud-stage{padding-top:20px !important}
  .etp-float--traders{margin-top:0}
}

/* Fallback real para browsers sin :has() — usa la clase aplicada via JS al .etp-wrap */
.etp-wrap.etp-is-empty .etp-eyebrow{
  display:flex;
  justify-content:center;
  text-align:center;
}
.etp-wrap.etp-is-empty .etp-title,
.etp-wrap.etp-is-empty .etp-subtitle{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}