@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Exo+2:wght@400;600&display=swap');

/* === POSITION === */
.zdkv-widget { position:fixed; z-index:99999; font-family:'Exo 2',sans-serif; user-select:none; }
.zdkv-widget.bottom-right { bottom:18px; right:18px; }
.zdkv-widget.bottom-left  { bottom:18px; left:18px; }
.zdkv-widget.top-right    { top:18px; right:18px; }
.zdkv-widget.top-left     { top:18px; left:18px; }

/* === PILL (compact) === */
.zdkv-pill {
  display:flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,rgba(12,9,35,.95) 0%,rgba(20,15,52,.95) 100%);
  border:1px solid rgba(99,88,255,.3);
  border-radius:40px;
  padding:6px 11px 6px 9px;
  cursor:pointer;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 0 0 1px rgba(99,88,255,.08),0 4px 18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.zdkv-pill:hover {
  border-color:rgba(99,88,255,.55);
  box-shadow:0 0 0 1px rgba(99,88,255,.18),0 6px 24px rgba(0,0,0,.7),0 0 40px rgba(99,88,255,.12),inset 0 1px 0 rgba(255,255,255,.07);
  transform:translateY(-1px) scale(1.03);
}

/* === DOT === */
.zdkv-dot-wrap { position:relative; width:8px; height:8px; flex-shrink:0; }
.zdkv-dot { width:8px; height:8px; background:#ff3d5a; border-radius:50%; position:absolute; }
.zdkv-dot::after {
  content:''; position:absolute; inset:-3px; border-radius:50%;
  background:rgba(255,61,90,.35);
  animation:zdkv-pulse 1.8s ease-in-out infinite;
}
@keyframes zdkv-pulse {
  0%,100%{transform:scale(1);opacity:.8}
  50%{transform:scale(2);opacity:0}
}

/* === LIVE BADGE === */
.zdkv-live-badge {
  font-family:'Rajdhani',sans-serif; font-size:9px; font-weight:700;
  letter-spacing:1.5px; color:#ff3d5a;
  background:rgba(255,61,90,.1); border:1px solid rgba(255,61,90,.22);
  padding:1px 5px; border-radius:3px; line-height:1; flex-shrink:0;
}

/* === DIVIDER === */
.zdkv-divider { width:1px; height:14px; background:linear-gradient(to bottom,transparent,rgba(99,88,255,.35),transparent); flex-shrink:0; }

/* === COUNT === */
.zdkv-count-wrap { display:flex; flex-direction:column; gap:0; }
.zdkv-count {
  font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:700;
  color:#e8e3ff; line-height:1; letter-spacing:-.3px;
  transition:color .3s;
}
.zdkv-count.zdkv-up   { color:#6be5a0; }
.zdkv-count.zdkv-down { color:#ff8a6b; }
.zdkv-label { font-size:8px; font-weight:600; letter-spacing:1.2px; color:rgba(180,170,255,.45); text-transform:uppercase; margin-top:1px; }

/* === TREND === */
.zdkv-trend { font-size:10px; flex-shrink:0; opacity:.7; transition:all .3s; }
.zdkv-trend.up   { color:#6be5a0; }
.zdkv-trend.down { color:#ff8a6b; }
.zdkv-trend.flat { color:rgba(180,170,255,.4); }

/* === PANEL === */
.zdkv-panel {
  position:absolute; bottom:calc(100% + 8px); right:0;
  background:linear-gradient(160deg,rgba(11,8,32,.98) 0%,rgba(17,13,46,.98) 100%);
  border:1px solid rgba(99,88,255,.28); border-radius:14px;
  padding:14px; min-width:200px;
  opacity:0; transform:translateY(8px) scale(.95); transform-origin:bottom right;
  pointer-events:none; transition:all .28s cubic-bezier(.34,1.56,.64,1);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 -4px 32px rgba(0,0,0,.8),0 0 60px rgba(99,88,255,.05);
}
.zdkv-widget.top-right .zdkv-panel,
.zdkv-widget.top-left  .zdkv-panel { bottom:auto; top:calc(100% + 8px); transform-origin:top right; transform:translateY(-8px) scale(.95); }
.zdkv-widget.bottom-left .zdkv-panel,
.zdkv-widget.top-left    .zdkv-panel { right:auto; left:0; }
.zdkv-widget.open .zdkv-panel { opacity:1; transform:translateY(0) scale(1); pointer-events:all; }

/* === PANEL INTERNALS === */
.zdkv-panel-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid rgba(99,88,255,.13); }
.zdkv-panel-title  { font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(200,190,255,.65); }
.zdkv-panel-live   { display:flex; align-items:center; gap:4px; font-size:9px; font-weight:600; letter-spacing:1px; color:#ff3d5a; }
.zdkv-panel-live-dot { width:5px; height:5px; background:#ff3d5a; border-radius:50%; animation:zdkv-pulse 1.8s infinite; }

.zdkv-big-count { text-align:center; margin:2px 0 12px; }
.zdkv-big-num {
  font-family:'Rajdhani',sans-serif; font-size:40px; font-weight:700; line-height:1; letter-spacing:-1px;
  background:linear-gradient(135deg,#c8b8ff 0%,#8b78ff 50%,#5d4aff 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.zdkv-big-label { font-size:9px; letter-spacing:2px; color:rgba(180,170,255,.4); text-transform:uppercase; margin-top:2px; }

.zdkv-chart { display:flex; align-items:flex-end; gap:2px; height:30px; margin-bottom:12px; }
.zdkv-bar { flex:1; background:linear-gradient(to top,rgba(99,88,255,.55),rgba(140,120,255,.15)); border-radius:2px 2px 0 0; transition:height .5s ease; }
.zdkv-bar.latest { background:linear-gradient(to top,rgba(99,88,255,1),rgba(180,160,255,.5)); box-shadow:0 0 6px rgba(99,88,255,.45); }

.zdkv-stats { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.zdkv-stat { background:rgba(99,88,255,.06); border:1px solid rgba(99,88,255,.1); border-radius:7px; padding:7px 9px; }
.zdkv-stat-val { font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:700; color:#c8b8ff; }
.zdkv-stat-key { font-size:8px; letter-spacing:1px; color:rgba(180,170,255,.38); text-transform:uppercase; margin-top:1px; }

/* === FLASH === */
@keyframes zdkv-flash {
  0%  { box-shadow:0 0 0 1px rgba(99,88,255,.08),0 4px 18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04); }
  40% { box-shadow:0 0 0 2px rgba(99,88,255,.45),0 4px 28px rgba(0,0,0,.6),0 0 40px rgba(99,88,255,.25),inset 0 1px 0 rgba(255,255,255,.08); }
  100%{ box-shadow:0 0 0 1px rgba(99,88,255,.08),0 4px 18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04); }
}
.zdkv-pill.zdkv-flash { animation:zdkv-flash .55s ease; }