.loylt-widgets-grid {
  background: #07080d;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 420px));
  justify-content: center;
  gap: 32px;
  padding: 48px 24px;
}

/* Each widget is fully fluid within its container */
[class$="-widget"] {
  width: 100%;
  max-width: 420px;
  min-width: 0;
}

/* ── SHARED RESPONSIVE BREAKPOINTS ── */
@media (max-width: 480px) {
  .loylt-widgets-grid {
    grid-template-columns: 1fr;
    padding: 24px 12px;
    gap: 20px;
  }
}

@media (max-width: 360px) {
  .loylt-widgets-grid {
    padding: 16px 8px;
    gap: 16px;
  }
}


/* ══════════ predictive-personalization-widget ══════════ */
@media (min-width: 500px) {
  .pp-widget {
    max-width: 480px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 500px) {
  .pp-widget {
    max-width: 420px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 460px) {
  .pp-widget {
    max-width: 420px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 430px) {
  .pp-widget {
    max-width: 390px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 410px) {
  .pp-widget {
    max-width: 370px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 390px) {
  .pp-widget {
    max-width: 350px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 360px) {
  .pp-widget {
    max-width: 320px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 350px) {
  .pp-widget {
    max-width: 310px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}

@media (max-width: 320px) {
  .pp-widget {
    max-width: 280px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}










  /* ── WIDGET SHELL ── */


  /* subtle top glow */
  .pp-widget::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 200px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,190,255,0.6), transparent);
  }

  /* ── HEADER BAR ── */
  .pp-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
  }

  .pp-header-left {
    display: flex; align-items: center; gap: 8px;
  }

  .pp-header-icon {
    width: 26px; height: 26px; border-radius: 7px;
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
  }

  .pp-header-title {
    font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.85);
    letter-spacing: -0.01em;
  }

  .pp-header-sub {
    font-size: 10px; color: rgba(255,255,255,0.3);
    font-family: 'JetBrains Mono', monospace;
  }

  .pp-live-badge {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 20px;
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.2);
  }

  .pp-live-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: #10b981;
    animation: pp_pp_livepulse 1.8s ease infinite;
  }

  @keyframes pp_pp_livepulse {
    0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
    50%      { opacity: 0.6; box-shadow: 0 0 0 4px rgba(16,185,129,0); }
  }

  .pp-live-text {
    font-size: 9px; font-weight: 500; color: #10b981;
    letter-spacing: 0.08em; text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
  }

  /* ── SCORE BAND ── */
  .pp-score-band {
    display: grid; grid-template-columns: repeat(3, 1fr);
    padding: 16px 18px;
    gap: 1px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .pp-score-item {
    text-align: center; padding: 4px 0;
  }

  .pp-score-item + .pp-score-item {
    border-left: 1px solid rgba(255,255,255,0.06);
  }

  .pp-score-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(14px, 4vw, 20px); font-weight: 500;
    line-height: 1; margin-bottom: 3px;
  }

  .pp-score-num.pp-blue  { color: #60a5fa; }
  .pp-score-num.pp-green { color: #34d399; }
  .pp-score-num.pp-amber { color: #fbbf24; }

  .pp-score-label {
    font-size: 9.5px; color: rgba(255,255,255,0.3);
    letter-spacing: 0.02em; font-weight: 400;
  }

  /* ── PARTNER FEED ── */
  .pp-feed-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px 8px;
  }

  .pp-feed-title {
    font-size: 10px; font-weight: 500;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.12em; text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
  }

  .pp-feed-count {
    font-size: 10px; color: rgba(255,255,255,0.2);
    font-family: 'JetBrains Mono', monospace;
  }

  .pp-feed { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 4px; }

  /* each partner row */
  .pp-partner-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    transition: background 0.2s;
    animation: pp_pp_rowIn 0.5s ease both;
    position: relative; overflow: hidden;
  }

  .pp-partner-row::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(99,190,255,0.04), transparent);
    opacity: 0;
    transition: opacity 0.3s;
  }

  .pp-partner-row:hover::before { opacity: 1; }
  .pp-partner-row:hover { border-color: rgba(99,190,255,0.15); }

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

  .pp-p-row-1 { animation-delay: 0.1s; }
  .pp-p-row-2 { animation-delay: 0.25s; }
  .pp-p-row-3 { animation-delay: 0.4s; }
  .pp-p-row-4 { animation-delay: 0.55s; }

  /* avatar */
  .pp-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600;
    flex-shrink: 0; letter-spacing: -0.02em;
  }

  /* partner info */
  .pp-p-info { flex: 1; min-width: 0; }

  .pp-p-name {
    font-size: 12px; font-weight: 500;
    color: rgba(255,255,255,0.82); margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .pp-p-tag {
    font-size: 10px; color: rgba(255,255,255,0.28); font-weight: 400;
  }

  /* reward chip */
.pp-reward-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid;
    position: relative;
    color: #656565;
}

  .pp-reward-chip.pp-new {
    animation: pp_pp_chipPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  }

  @keyframes pp_pp_chipPop {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }

  .pp-chip-blue  { background: rgba(59,130,246,0.12); color: #93c5fd; border-color: rgba(59,130,246,0.25); }
  .pp-chip-green { background: rgba(16,185,129,0.12); color: #6ee7b7; border-color: rgba(16,185,129,0.25); }
  .pp-chip-amber { background: rgba(245,158,11,0.12); color: #fcd34d; border-color: rgba(245,158,11,0.25); }
  .pp-chip-rose  { background: rgba(244,63,94,0.12);  color: #fda4af; border-color: rgba(244,63,94,0.25);  }

  /* score bar */
  .pp-score-col { width: 56px; flex-shrink: 0; }

  .pp-mini-bar-track {
    height: 3px; background: rgba(255,255,255,0.07);
    border-radius: 2px; overflow: hidden; margin-bottom: 3px;
  }

  .pp-mini-bar-fill {
    height: 100%; border-radius: 2px;
    width: 0;
    transition: width 1.2s cubic-bezier(0.23,1,0.32,1);
  }

  .pp-bar-blue  { background: #60a5fa; }
  .pp-bar-green { background: #34d399; }
  .pp-bar-amber { background: #fbbf24; }
  .pp-bar-rose  { background: #fb7185; }

  .pp-mini-score {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; color: rgba(255,255,255,0.3);
    text-align: right;
  }

  /* ── ACTIVITY TICKER ── */
  .pp-ticker {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 10px 18px;
    display: flex; align-items: center; gap: 8px;
    overflow: hidden;
  }

  .pp-ticker-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; color: rgba(255,255,255,0.2);
    letter-spacing: 0.1em; text-transform: uppercase;
    flex-shrink: 0;
  }

  .pp-ticker-track {
    flex: 1; overflow: hidden; position: relative;
  }

  .pp-ticker-inner {
    display: flex; gap: 28px;
    animation: pp_pp_tickerScroll 16s linear infinite;
    white-space: nowrap;
  }

  @keyframes pp_pp_tickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  .pp-ticker-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; color: rgba(255,255,255,0.35);
    flex-shrink: 0;
  }

  .pp-ticker-item .pp-ti-dot {
    width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0;
  }

  .pp-ti-b { background: #60a5fa; }
  .pp-ti-g { background: #34d399; }
  .pp-ti-a { background: #fbbf24; }

  /* ── MODEL PULSE (bottom strip) ── */
  .pp-model-strip {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 10px 18px;
    display: flex; align-items: center; justify-content: space-between;
  }

  .pp-model-left {
    display: flex; align-items: center; gap: 8px;
  }

  .pp-model-icon {
    width: 22px; height: 22px; border-radius: 6px;
    background: linear-gradient(135deg, rgba(99,102,241,0.3), rgba(6,182,212,0.3));
    border: 1px solid rgba(99,102,241,0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    color: #fff;
  }

  .pp-model-text {
    font-size: 10.5px; color: rgba(255,255,255,0.35); font-weight: 400;
  }

  .pp-model-text strong {
    color: rgba(255,255,255,0.6); font-weight: 500;
  }

  /* Waveform animation */
  .pp-waveform {
    display: flex; align-items: center; gap: 2px; height: 20px;
  }

  .pp-wave-bar {
    width: 2px; border-radius: 2px;
    background: rgba(99,190,255,0.5);
    animation: pp_pp_wave 1.2s ease infinite;
  }

  .pp-wave-bar:nth-child(1) { animation-delay: 0s;    height: 6px;  }
  .pp-wave-bar:nth-child(2) { animation-delay: 0.1s;  height: 12px; }
  .pp-wave-bar:nth-child(3) { animation-delay: 0.2s;  height: 18px; }
  .pp-wave-bar:nth-child(4) { animation-delay: 0.3s;  height: 10px; }
  .pp-wave-bar:nth-child(5) { animation-delay: 0.4s;  height: 15px; }
  .pp-wave-bar:nth-child(6) { animation-delay: 0.5s;  height: 8px;  }
  .pp-wave-bar:nth-child(7) { animation-delay: 0.35s; height: 14px; }
  .pp-wave-bar:nth-child(8) { animation-delay: 0.15s; height: 6px;  }

  @keyframes pp_pp_wave {
    0%,100% { transform: scaleY(0.4); opacity: 0.4; }
    50%      { transform: scaleY(1);   opacity: 1; }
  }

  /* ── SCANNING LINE ── */
  .pp-scan-line {
    position: absolute; top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(99,190,255,0.5) 50%, transparent 100%);
    animation: pp_pp_scan 3.5s ease-in-out infinite;
    pointer-events: none;
  }

  @keyframes pp_pp_scan {
    0%   { top: 0;    opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }

  /* ── TOOLTIP on hover ── */
  .pp-partner-row:hover .pp-p-tag::after {
    content: ' · analysed just now';
    color: rgba(99,190,255,0.5);
  }


/* ══════════ segmentation-stats-widget ══════════ */
@media (max-width: 500px) {
  .ss-widget {
    max-width: 420px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 460px) {
  .ss-widget {
    max-width: 420px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 430px) {
  .ss-widget {
    max-width: 390px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 410px) {
  .ss-widget {
    max-width: 370px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 390px) {
  .ss-widget {
    max-width: 350px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 360px) {
  .ss-widget {
    max-width: 320px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 350px) {
  .ss-widget {
    max-width: 310px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}

@media (max-width: 320px) {
  .ss-widget {
    max-width: 280px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}










  /* top glow line */
  .ss-widget::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 160px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,0.8), transparent);
  }

  /* scan line */
  .ss-scan {
    position: absolute; left: 0; right: 0; height: 1px; top: 0;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,0.35), transparent);
    animation: ss_ss_scanDown 5s ease-in-out infinite;
    pointer-events: none; z-index: 10;
  }
  @keyframes ss_ss_scanDown {
    0%   { top: 0%;   opacity: 0; }
    4%   { opacity: 1; }
    96%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }

  /* ── HEADER ── */
  .ss-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .ss-h-left { display: flex; align-items: center; gap: 10px; }

  .ss-h-icon {
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    box-shadow: 0 0 16px rgba(139,92,246,0.35);
  }

  .ss-h-title { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.85); letter-spacing: -0.01em; }
  .ss-h-sub   { font-size: 10px; color: rgba(255,255,255,0.25); font-family: 'JetBrains Mono', monospace; margin-top: 1px; }

  .ss-live-pill {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 20px;
    background: rgba(139,92,246,0.1);
    border: 1px solid rgba(139,92,246,0.2);
  }

  .ss-live-dot {
    width: 5px; height: 5px; border-radius: 50%; background: #8b5cf6;
    animation: ss_ss_ldot 1.8s ease infinite;
  }
  @keyframes ss_ss_ldot { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(139,92,246,0.5);} 50%{opacity:0.5;box-shadow:0 0 0 5px rgba(139,92,246,0);} }

  .ss-live-txt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #a78bfa;
  }

  /* ── MAIN STATS GRID ── */
  .ss-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .ss-stat-block {
    background: #0d0f16;
    padding: 22px 22px 18px;
    position: relative; overflow: hidden;
    cursor: default;
    transition: background 0.3s;
  }

  .ss-stat-block:hover { background: rgba(139,92,246,0.04); }

  /* corner accent */
  .ss-stat-block::after {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 28px; height: 28px;
    background: radial-gradient(circle at top left, rgba(139,92,246,0.12), transparent 70%);
  }

  .ss-sb-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.25); margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
  }

  .ss-sb-label .ss-dot {
    width: 5px; height: 5px; border-radius: 50%;
  }

  .ss-sb-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(22px, 8vw, 34px); font-weight: 500; line-height: 1;
    letter-spacing: -0.03em; margin-bottom: 6px;
  }

  .ss-sb-sub {
    font-size: 10.5px; color: rgba(255,255,255,0.28); font-weight: 300; line-height: 1.4;
  }

  /* delta badge */
  .ss-delta {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px; border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; font-weight: 500;
    margin-top: 8px;
  }

  .ss-delta-up   { background: rgba(52,211,153,0.1); color: #34d399; border: 1px solid rgba(52,211,153,0.2); }
  .ss-delta-warn { background: rgba(251,191,36,0.1);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.2); }
  .ss-delta-info { background: rgba(96,165,250,0.1);  color: #60a5fa; border: 1px solid rgba(96,165,250,0.2); }
  .delta-rose { background: rgba(251,113,133,0.1); color: #fb7185; border: 1px solid rgba(251,113,133,0.2); }

  /* mini sparkline bars */
  .sparkline {
    display: flex; align-items: flex-end; gap: 3px;
    height: 28px; margin-top: 10px;
  }

  .sp-bar {
    flex: 1; border-radius: 2px 2px 0 0;
    background: rgba(139,92,246,0.25);
    transition: height 0.3s ease;
    animation: ss_ss_spPulse 2.4s ease infinite;
    min-height: 3px;
  }

  .sp-bar.active { background: rgba(139,92,246,0.7); }
  @keyframes ss_ss_spPulse { 0%,100%{opacity:0.6;} 50%{opacity:1;} }

  /* ── SEGMENT BREAKDOWN ── */
  .ss-breakdown {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .ss-bk-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255,255,255,0.22); margin-bottom: 14px;
  }

  .ss-bk-rows { display: flex; flex-direction: column; gap: 9px; }

  .ss-bk-row {
    display: flex; align-items: center; gap: 10px;
  }

  .ss-bk-icon { font-size: 13px; flex-shrink: 0; width: 18px; text-align: center; }

  .ss-bk-name {
    font-size: 11.5px; color: rgba(255,255,255,0.65);
    font-weight: 400; width: clamp(70px, 30%, 110px); flex-shrink: 0;
  }

  .ss-bk-track {
    flex: 1; height: 5px; background: rgba(255,255,255,0.06);
    border-radius: 3px; overflow: hidden;
  }

  .ss-bk-fill {
    height: 100%; border-radius: 3px; width: 0;
    transition: width 1.6s cubic-bezier(0.23,1,0.32,1);
  }

  .ss-bk-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; color: rgba(255,255,255,0.35);
    width: 38px; text-align: right; flex-shrink: 0;
  }

  /* ── TRIGGER ROW ── */
  .ss-trigger-row {
    padding: 12px 20px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    gap: 12px;
  }

  .ss-tr-left { display: flex; align-items: center; gap: 8px; }

  .ss-tr-icon {
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(139,92,246,0.1);
    border: 1px solid rgba(139,92,246,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
  }

  .ss-tr-text { font-size: 11px; color: rgba(255,255,255,0.45); line-height: 1.4; }
  .ss-tr-text strong { color: rgba(255,255,255,0.75); font-weight: 500; }

  .ss-tr-chip {
    padding: 5px 11px; border-radius: 6px; flex-shrink: 0;
    font-size: 10px; font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
    animation: ss_ss_chipCycle 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  }

  @keyframes ss_ss_chipCycle {
    from { transform: scale(0.75); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
  }

  /* ── BOTTOM BAR ── */
  .ss-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px;
  }

  .ss-bot-left {
    display: flex; align-items: center; gap: 8px;
  }

  .ss-bot-icon {
    width: 22px; height: 22px; border-radius: 6px;
    background: rgba(109,40,217,0.2);
    border: 1px solid rgba(109,40,217,0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;color: #fff;
  }

  .ss-bot-text {
    font-size: 10.5px; color: rgba(255,255,255,0.28);
  }

  .ss-bot-text strong { color: rgba(255,255,255,0.55); font-weight: 500; }

  /* pulse dots */
  .ss-pulse-dots {
    display: flex; gap: 4px; align-items: center;
  }

  .ss-pd {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(139,92,246,0.3);
    animation: ss_ss_pdWave 1.5s ease infinite;
  }

  .ss-pd:nth-child(1){animation-delay:0s;}
  .ss-pd:nth-child(2){animation-delay:0.15s;}
  .ss-pd:nth-child(3){animation-delay:0.3s;}
  .ss-pd:nth-child(4){animation-delay:0.45s;}
  .ss-pd:nth-child(5){animation-delay:0.3s;}
  .ss-pd:nth-child(6){animation-delay:0.15s;}

  @keyframes ss_ss_pdWave {
    0%,100%{background:rgba(139,92,246,0.2);transform:scale(0.8);}
    50%{background:rgba(139,92,246,0.85);transform:scale(1.4);}
  }


/* ══════════ churn-prediction-widget ══════════ */
@media (max-width: 500px) {
  .cp-widget {
    max-width: 420px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 460px) {
  .cp-widget {
    max-width: 420px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 430px) {
  .cp-widget {
    max-width: 390px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 410px) {
  .cp-widget {
    max-width: 370px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 390px) {
  .cp-widget {
    max-width: 350px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 360px) {
  .cp-widget {
    max-width: 320px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 350px) {
  .cp-widget {
    max-width: 310px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}

@media (max-width: 320px) {
  .cp-widget {
    max-width: 280px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}








@media (min-width: 500px) {
  .cp-widget {
    max-width: 480px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
  

  /* top glow */
  .cp-widget::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 160px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(239,68,68,0.7), transparent);
  }

  /* scan */
  .cp-scan {
    position: absolute; left: 0; right: 0; height: 1px; top: 0;
    background: linear-gradient(90deg, transparent, rgba(239,68,68,0.3), transparent);
    animation: cp_cp_scanDown 4.5s ease-in-out infinite;
    pointer-events: none; z-index: 10;
  }
  @keyframes cp_cp_scanDown {
    0%  { top: 0%;   opacity: 0; }
    4%  { opacity: 1; }
    96% { opacity: 1; }
    100%{ top: 100%; opacity: 0; }
  }

  /* ── HEADER ── */
  .cp-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .cp-h-left { display: flex; align-items: center; gap: 10px; }

  .cp-h-icon {
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(135deg, #b91c1c, #ef4444);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    box-shadow: 0 0 18px rgba(239,68,68,0.3);
  }

  .cp-h-title { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.85); letter-spacing: -0.01em; }
  .cp-h-sub   { font-size: 10px; color: rgba(255,255,255,0.25); font-family: 'JetBrains Mono', monospace; margin-top: 1px; }

  .cp-alert-pill {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 20px;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.2);
  }

  .cp-alert-dot {
    width: 5px; height: 5px; border-radius: 50%; background: #ef4444;
    animation: cp_cp_adot 1.4s ease infinite;
  }
  @keyframes cp_cp_adot {
    0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(239,68,68,0.5); }
    50%    { opacity:0.5; box-shadow:0 0 0 5px rgba(239,68,68,0); }
  }

  .cp-alert-txt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #f87171;
  }

  /* ── STATS 2×2 ── */
  .cp-stats-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1px; background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .cp-stat-block {
    background: #0d0f16; padding: 20px 20px 16px;
    position: relative; overflow: hidden;
    transition: background 0.3s; cursor: default;
  }

  .cp-stat-block:hover { background: rgba(239,68,68,0.03); }

  .cp-stat-block::after {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 32px; height: 32px;
    background: radial-gradient(circle at top left, rgba(239,68,68,0.08), transparent 70%);
  }

  .cp-sb-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.22); margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
  }

  .cp-sb-label .cp-dot { width: 5px; height: 5px; border-radius: 50%; }

  .cp-sb-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(20px, 7vw, 32px); font-weight: 500; line-height: 1;
    letter-spacing: -0.03em; margin-bottom: 5px;
  }

  .cp-sb-sub { font-size: 10.5px; color: rgba(255,255,255,0.28); font-weight: 300; line-height: 1.4; }

  .cp-delta {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px; border-radius: 4px; margin-top: 8px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
  }

  .cp-d-red   { background: rgba(239,68,68,0.1);  color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
  .cp-d-green { background: rgba(52,211,153,0.1); color: #34d399; border: 1px solid rgba(52,211,153,0.2); }
  .cp-d-amber { background: rgba(251,191,36,0.1); color: #fbbf24; border: 1px solid rgba(251,191,36,0.2); }
  .cp-d-blue  { background: rgba(96,165,250,0.1); color: #60a5fa; border: 1px solid rgba(96,165,250,0.2); }

  /* ── CHURN TIMELINE ── */
  .cp-timeline {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .cp-tl-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
  }

  .cp-tl-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.22);
  }

  .cp-tl-legend {
    display: flex; align-items: center; gap: 10px;
  }

  .cp-legend-item {
    display: flex; align-items: center; gap: 4px;
    font-size: 9px; color: rgba(255,255,255,0.28);
    font-family: 'JetBrains Mono', monospace;
  }

  .cp-legend-dot { width: 5px; height: 5px; border-radius: 50%; }

  /* Bar chart rows */
  .cp-chart-rows { display: flex; flex-direction: column; gap: 7px; }

  .cp-chart-row {
    display: flex; align-items: center; gap: 10px;
    animation: cp_cp_rowIn 0.5s ease both;
  }

  .cp-chart-row:nth-child(1){ animation-delay:0.05s; }
  .cp-chart-row:nth-child(2){ animation-delay:0.12s; }
  .cp-chart-row:nth-child(3){ animation-delay:0.19s; }
  .cp-chart-row:nth-child(4){ animation-delay:0.26s; }
  .cp-chart-row:nth-child(5){ animation-delay:0.33s; }

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

  .cp-cr-week {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; color: rgba(255,255,255,0.25);
    width: 30px; flex-shrink: 0; text-align: right;
  }

  .cp-cr-bars { flex: 1; display: flex; flex-direction: column; gap: 3px; }

  .cp-cr-track {
    height: 5px; background: rgba(255,255,255,0.05);
    border-radius: 3px; overflow: hidden;
  }

  .cp-cr-fill {
    height: 100%; border-radius: 3px; width: 0;
    transition: width 1.5s cubic-bezier(0.23,1,0.32,1);
  }

  .cp-fill-risk     { background: linear-gradient(90deg, rgba(239,68,68,0.4), #ef4444); }
  .cp-fill-recovered{ background: linear-gradient(90deg, rgba(52,211,153,0.4), #34d399); }

  .cp-cr-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; color: rgba(255,255,255,0.25);
    width: 30px; text-align: right; flex-shrink: 0;
  }

  /* ── PARTNER ALERTS ── */
  .cp-alerts {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex; flex-direction: column; gap: 6px;
  }

  .cp-alert-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(255,255,255,0.015);
    animation: cp_cp_rowIn 0.5s ease both;
    transition: border-color 0.25s;
  }

  .cp-alert-row:hover { border-color: rgba(239,68,68,0.2); background: rgba(239,68,68,0.03); }
  .cp-alert-row:nth-child(1){ animation-delay:0.1s; }
  .cp-alert-row:nth-child(2){ animation-delay:0.2s; }
  .cp-alert-row:nth-child(3){ animation-delay:0.3s; }

  .cp-ar-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 600; flex-shrink: 0;
  }

  .cp-ar-info { flex: 1; min-width: 0; }
  .cp-ar-name { font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,0.78); margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cp-ar-meta { font-size: 9.5px; color: rgba(255,255,255,0.28); }

  .cp-ar-score-wrap { width: 52px; flex-shrink: 0; }
  .cp-ar-score-track { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; margin-bottom: 2px; }
  .cp-ar-score-fill  { height: 100%; border-radius: 2px; width: 0; transition: width 1.4s cubic-bezier(0.23,1,0.32,1); }
  .cp-ar-score-num   { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: rgba(255,255,255,0.3); text-align: right; }

  .cp-ar-status {
    padding: 3px 8px; border-radius: 5px; flex-shrink: 0;
    font-size: 9.5px; font-weight: 500; border: 1px solid;
    font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em;
    animation: cp_cp_statusPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  }

  @keyframes cp_cp_statusPop {
    from { transform:scale(0.75); opacity:0; }
    to   { transform:scale(1);    opacity:1; }
  }

  .cp-s-alert   { background:rgba(239,68,68,0.1);  color:#f87171; border-color:rgba(239,68,68,0.25); }
  .cp-s-sent    { background:rgba(251,191,36,0.1);  color:#fbbf24; border-color:rgba(251,191,36,0.25); }
  .cp-s-back    { background:rgba(52,211,153,0.1);  color:#34d399; border-color:rgba(52,211,153,0.25); }

  /* ── BOTTOM ── */
  .cp-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px;
  }

  .cp-bot-left { display: flex; align-items: center; gap: 8px; }

  .cp-bot-icon {
    width: 22px; height: 22px; border-radius: 6px;
    background: rgba(185,28,28,0.2);
    border: 1px solid rgba(185,28,28,0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
  }

  .cp-bot-text { font-size: 10.5px; color: rgba(255,255,255,0.28); }
  .cp-bot-text strong { color: rgba(255,255,255,0.55); font-weight: 500; }

  /* heartbeat line */
  .cp-heartbeat {
    display: flex; align-items: center; height: 20px; gap: 1px;
  }

  .cp-hb-bar {
    width: 2px; border-radius: 1px;
    background: rgba(239,68,68,0.4);
    animation: cp_cp_hbWave 1.2s ease infinite;
  }

  .cp-hb-bar:nth-child(1){ height:4px;  animation-delay:0s; }
  .cp-hb-bar:nth-child(2){ height:8px;  animation-delay:0.08s; }
  .cp-hb-bar:nth-child(3){ height:16px; animation-delay:0.16s; }
  .cp-hb-bar:nth-child(4){ height:6px;  animation-delay:0.24s; }
  .cp-hb-bar:nth-child(5){ height:18px; animation-delay:0.32s; }
  .cp-hb-bar:nth-child(6){ height:4px;  animation-delay:0.4s; }
  .cp-hb-bar:nth-child(7){ height:10px; animation-delay:0.32s; }
  .cp-hb-bar:nth-child(8){ height:5px;  animation-delay:0.24s; }
  .cp-hb-bar:nth-child(9){ height:3px;  animation-delay:0.16s; }

  @keyframes cp_cp_hbWave {
    0%,100%{ transform:scaleY(0.4); opacity:0.35; }
    50%    { transform:scaleY(1);   opacity:1; }
  }


/* ══════════ tier-management-widget ══════════ */
@media (max-width: 500px) {
  .tm-widget {
    max-width: 420px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 460px) {
  .tm-widget {
    max-width: 420px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 430px) {
  .tm-widget {
    max-width: 390px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 410px) {
  .tm-widget {
    max-width: 370px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 390px) {
  .tm-widget {
    max-width: 350px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 360px) {
  .tm-widget {
    max-width: 320px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 350px) {
  .tm-widget {
    max-width: 310px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}

@media (max-width: 320px) {
  .tm-widget {
    max-width: 280px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}









@media (min-width: 500px) {
  .tm-widget {
    max-width: 480px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}


  .tm-widget::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 180px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245,183,49,0.8), transparent);
  }

  .tm-scan {
    position: absolute; left: 0; right: 0; height: 1px; top: 0;
    background: linear-gradient(90deg, transparent, rgba(245,183,49,0.3), transparent);
    animation: tm_tm_scanDown 4s ease-in-out infinite;
    pointer-events: none; z-index: 10;
  }
  @keyframes tm_tm_scanDown {
    0%  { top:0%;   opacity:0; }
    4%  { opacity:1; }
    96% { opacity:1; }
    100%{ top:100%; opacity:0; }
  }

  /* ── HEADER ── */
  .tm-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .tm-h-left { display: flex; align-items: center; gap: 10px; }

  .tm-h-icon {
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(135deg, #b45309, #f59e0b);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    box-shadow: 0 0 18px rgba(245,158,11,0.35);
  }

  .tm-h-title { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.85); letter-spacing: -0.01em; }
  .tm-h-sub   { font-size: 10px; color: rgba(255,255,255,0.25); font-family: 'JetBrains Mono', monospace; margin-top: 1px; }

  .tm-ai-pill {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 20px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.2);
  }

  .tm-ai-dot {
    width: 5px; height: 5px; border-radius: 50%; background: #f59e0b;
    animation: tm_tm_aidot 1.8s ease infinite;
  }
  @keyframes tm_tm_aidot {
    0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(245,158,11,0.5); }
    50%    { opacity:0.5; box-shadow:0 0 0 5px rgba(245,158,11,0); }
  }

  .tm-ai-txt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #fbbf24;
  }

  /* ── TIER BANDS ── */
  .tm-tier-bands {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .tm-tier-band {
    background: #0d0f16;
    padding: 14px 10px 12px;
    text-align: center;
    position: relative; overflow: hidden;
    cursor: default; transition: background 0.3s;
  }

  .tm-tier-band:hover { background: rgba(245,158,11,0.03); }

  .tm-tier-crown { font-size: 18px; display: block; margin-bottom: 5px;
    animation: tm_tm_crownFloat 3s ease-in-out infinite;
  }

  .tm-tier-band:nth-child(2) .tm-tier-crown { animation-delay: 0.5s; }
  .tm-tier-band:nth-child(3) .tm-tier-crown { animation-delay: 1s; }
  .tm-tier-band:nth-child(4) .tm-tier-crown { animation-delay: 1.5s; }

  @keyframes tm_tm_crownFloat {
    0%,100%{ transform: translateY(0); }
    50%    { transform: translateY(-3px); }
  }

  .tm-tier-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase;
    margin-bottom: 4px;
  }

  .tm-tier-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px; font-weight: 500; line-height: 1; margin-bottom: 2px;
  }

  .tm-tier-sub { font-size: 9px; color: rgba(255,255,255,0.22); }

  /* tier colors */
  .tm-t-bronze .tm-tier-name  { color: #cd7f32; }
  .tm-t-bronze .tm-tier-count { color: #e8975a; }
  .tm-t-silver .tm-tier-name  { color: #9ca3af; }
  .tm-t-silver .tm-tier-count { color: #d1d5db; }
  .tm-t-gold   .tm-tier-name  { color: #f59e0b; }
  .tm-t-gold   .tm-tier-count { color: #fcd34d; }
  .tm-t-plat   .tm-tier-name  { color: #67e8f9; }
  .tm-t-plat   .tm-tier-count { color: #a5f3fc; }

  /* upgrade flash */
  .tm-upgrade-flash {
    position: absolute; inset: 0;
    background: rgba(245,158,11,0.06);
    opacity: 0;
    animation: tm_tm_flash 3s ease infinite;
  }

  .tm-t-gold .tm-upgrade-flash { animation-delay: 1.2s; }
  .tm-t-plat .tm-upgrade-flash { animation-delay: 2.4s; }

  @keyframes tm_tm_flash {
    0%,100%{ opacity:0; }
    10%,90%{ opacity:1; }
    50%    { opacity:0; }
  }

  /* ── LEADERBOARD ── */
  .tm-lb-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px 8px;
  }

  .tm-lb-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.22);
  }

  .tm-lb-sub {
    font-size: 9px; color: rgba(255,255,255,0.18);
    font-family: 'JetBrains Mono', monospace;
    display: flex; align-items: center; gap: 4px;
  }

  .tm-spin { animation: tm_tm_spinI 2s linear infinite; display: inline-block; }
  @keyframes tm_tm_spinI { to{ transform:rotate(360deg); } }

  .tm-leaderboard { padding: 0 12px 10px; display: flex; flex-direction: column; gap: 4px; }

  .tm-lb-row {
    display: grid;
    grid-template-columns: 24px 28px 1fr 56px 72px 60px;
    align-items: center; gap: 8px;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(255,255,255,0.015);
    animation: tm_tm_rowIn 0.5s ease both;
    transition: all 0.25s; cursor: default;
    position: relative; overflow: hidden;
  }

  /* top 3 glow */
  .tm-lb-row.tm-rank-1 { border-color: rgba(245,158,11,0.2); background: rgba(245,158,11,0.04); }
  .tm-lb-row.tm-rank-2 { border-color: rgba(209,213,219,0.15); }
  .tm-lb-row.tm-rank-3 { border-color: rgba(205,127,50,0.15); }

  .tm-lb-row:hover { transform: translateX(3px); border-color: rgba(245,158,11,0.2); }

  .tm-lb-row:nth-child(1){ animation-delay:0.05s; }
  .tm-lb-row:nth-child(2){ animation-delay:0.12s; }
  .tm-lb-row:nth-child(3){ animation-delay:0.19s; }
  .tm-lb-row:nth-child(4){ animation-delay:0.26s; }
  .tm-lb-row:nth-child(5){ animation-delay:0.33s; }

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

  /* rank medal */
  .tm-lb-rank { font-size: 13px; text-align: center; }

  /* avatar */
  .tm-lb-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 600; flex-shrink: 0;
  }

  /* name + meta */
  .tm-lb-info { min-width: 0; }
  .tm-lb-name { font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px; }
  .tm-lb-meta { font-size: 9px; color: rgba(255,255,255,0.28); }

  /* scans */
  .tm-lb-scans {
    text-align: right;
  }
  .tm-lb-scans-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.7);
    display: block;
  }
  .tm-lb-scans-lbl { font-size: 8.5px; color: rgba(255,255,255,0.22); }

  /* mini bar */
  .tm-lb-track { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; margin-bottom: 2px; }
  .tm-lb-fill  { height: 100%; border-radius: 2px; width: 0; transition: width 1.5s cubic-bezier(0.23,1,0.32,1); }
  .tm-lb-pct   { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; color: rgba(255,255,255,0.22); text-align: right; }

  /* tier chip */
  .tm-tier-chip {
    padding: 3px 8px; border-radius: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; font-weight: 500; border: 1px solid;
    text-align: center; white-space: nowrap;
    animation: tm_tm_chipIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  }

  @keyframes tm_tm_chipIn {
    from{ transform:scale(0.75); opacity:0; }
    to  { transform:scale(1);    opacity:1; }
  }

  .tm-tc-plat   { background:rgba(103,232,249,0.1); color:#a5f3fc; border-color:rgba(103,232,249,0.25); }
  .tm-tc-gold   { background:rgba(245,158,11,0.1);  color:#fcd34d; border-color:rgba(245,158,11,0.25); }
  .tm-tc-silver { background:rgba(156,163,175,0.1); color:#d1d5db; border-color:rgba(156,163,175,0.25); }
  .tc-bronze { background:rgba(205,127,50,0.1);  color:#e8975a; border-color:rgba(205,127,50,0.25); }

  /* ── AI UPGRADE TOAST ── */
  .tm-toast-wrap { padding: 0 12px 10px; }

  .tm-toast {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px; border-radius: 8px;
    background: rgba(245,158,11,0.07);
    border: 1px solid rgba(245,158,11,0.18);
    animation: tm_tm_toastIn 0.4s ease both;
  }

  @keyframes tm_tm_toastIn {
    from{ opacity:0; transform:translateY(6px); }
    to  { opacity:1; transform:translateY(0); }
  }

  .tm-toast-icon { font-size: 15px; flex-shrink: 0; }
  .tm-toast-text { flex:1; font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.45; }
  .tm-toast-text strong { color: rgba(255,255,255,0.82); font-weight: 500; }
  .tm-toast-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; color: rgba(255,255,255,0.2); flex-shrink: 0;
  }

  /* ── BOTTOM ── */
  .tm-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 18px;
    border-top: 1px solid rgba(255,255,255,0.05);
  }

  .tm-bot-left { display: flex; align-items: center; gap: 7px; }

  .tm-bot-icon {
    width: 22px; height: 22px; border-radius: 6px;
    background: rgba(180,83,9,0.2); border: 1px solid rgba(180,83,9,0.3);
    display: flex; align-items: center; justify-content: center; font-size: 11px;
  }

  .tm-bot-text { font-size: 10.5px; color: rgba(255,255,255,0.28); }
  .tm-bot-text strong { color: rgba(255,255,255,0.55); font-weight: 500; }

  /* shimmer bars */
  .tm-shimmer-bars { display: flex; align-items: flex-end; gap: 3px; height: 20px; }

  .tm-sh-bar {
    width: 3px; border-radius: 2px 2px 0 0;
    animation: tm_tm_shWave 1.4s ease infinite;
  }

  .tm-sh-bar:nth-child(1){ height:6px;  animation-delay:0s;    background:rgba(245,158,11,0.3); }
  .tm-sh-bar:nth-child(2){ height:10px; animation-delay:0.1s;  background:rgba(245,158,11,0.5); }
  .tm-sh-bar:nth-child(3){ height:16px; animation-delay:0.2s;  background:rgba(245,158,11,0.7); }
  .tm-sh-bar:nth-child(4){ height:20px; animation-delay:0.3s;  background:rgba(245,158,11,0.9); }
  .tm-sh-bar:nth-child(5){ height:14px; animation-delay:0.2s;  background:rgba(245,158,11,0.6); }
  .tm-sh-bar:nth-child(6){ height:8px;  animation-delay:0.1s;  background:rgba(245,158,11,0.4); }

  @keyframes tm_tm_shWave {
    0%,100%{ transform:scaleY(0.5); opacity:0.5; }
    50%    { transform:scaleY(1);   opacity:1; }
  }


/* ══════════ voice-assistant-widget ══════════ */
@media (max-width: 500px) {
  .va-widget {
    max-width: 420px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 460px) {
  .va-widget {
    max-width: 420px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 430px) {
  .va-widget {
    max-width: 390px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 410px) {
  .va-widget {
    max-width: 370px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 390px) {
  .va-widget {
    max-width: 350px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 360px) {
  .va-widget {
    max-width: 320px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 350px) {
  .va-widget {
    max-width: 310px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}

@media (max-width: 320px) {
  .va-widget {
    max-width: 280px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}









@media (min-width: 500px) {
  .va-widget {
    max-width: 480px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}


  .va-widget::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 160px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(16,185,129,0.8), transparent);
  }

  /* ── HEADER ── */
  .va-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .va-h-left { display: flex; align-items: center; gap: 10px; }

  .va-h-icon {
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(135deg, #065f46, #10b981);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    box-shadow: 0 0 18px rgba(16,185,129,0.3);
  }

  .va-h-title { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.85); letter-spacing: -0.01em; }
  .va-h-sub   { font-size: 10px; color: rgba(255,255,255,0.25); font-family: 'JetBrains Mono', monospace; margin-top: 1px; }

  .va-on-air {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 20px;
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.2);
  }

  .va-on-dot {
    width: 5px; height: 5px; border-radius: 50%; background: #10b981;
    animation: va_va_onpulse 1.4s ease infinite;
  }
  @keyframes va_va_onpulse {
    0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(16,185,129,0.5); }
    50%    { opacity:0.5; box-shadow:0 0 0 5px rgba(16,185,129,0); }
  }

  .va-on-txt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #34d399;
  }

  /* ── VOICE VISUALIZER ── */
  .va-voice-viz {
    padding: 22px 18px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    position: relative; overflow: hidden;
  }

  /* ambient glow behind mic */
  .va-voice-viz::before {
    content: '';
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 140px; height: 140px; border-radius: 50%;
    background: radial-gradient(circle, rgba(16,185,129,0.07) 0%, transparent 70%);
    animation: va_va_ambGlow 3s ease infinite;
  }

  @keyframes va_va_ambGlow {
    0%,100%{ transform:translate(-50%,-50%) scale(0.9); opacity:0.6; }
    50%    { transform:translate(-50%,-50%) scale(1.1); opacity:1; }
  }

  .va-viz-inner {
    display: flex; align-items: center; justify-content: center; gap: 20px;
    position: relative; z-index: 1;
  }

  /* waveform left */
  .va-waveform {
    display: flex; align-items: center; gap: 3px; height: 48px;
  }

  .va-wv {
    width: 3px; border-radius: 3px;
    background: rgba(16,185,129,0.5);
    animation: va_va_wvAnim 1.2s ease infinite;
  }

  .va-wv:nth-child(1){ height:8px;  animation-delay:0s;    }
  .va-wv:nth-child(2){ height:16px; animation-delay:0.08s; }
  .va-wv:nth-child(3){ height:28px; animation-delay:0.16s; }
  .va-wv:nth-child(4){ height:40px; animation-delay:0.24s; background:rgba(16,185,129,0.8); }
  .va-wv:nth-child(5){ height:48px; animation-delay:0.32s; background:#10b981; }
  .va-wv:nth-child(6){ height:36px; animation-delay:0.4s;  background:rgba(16,185,129,0.8); }
  .va-wv:nth-child(7){ height:24px; animation-delay:0.32s; }
  .va-wv:nth-child(8){ height:14px; animation-delay:0.24s; }
  .va-wv:nth-child(9){ height:6px;  animation-delay:0.16s; }

  @keyframes va_va_wvAnim {
    0%,100%{ transform:scaleY(0.35); opacity:0.4; }
    50%    { transform:scaleY(1);    opacity:1; }
  }

  /* mic button */
  .va-mic-btn {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, #065f46, #10b981);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; flex-shrink: 0;
    box-shadow: 0 0 0 8px rgba(16,185,129,0.08), 0 0 0 16px rgba(16,185,129,0.04);
    animation: va_va_micPulse 2.5s ease infinite;
    position: relative;
  }

  @keyframes va_va_micPulse {
    0%,100%{ box-shadow:0 0 0 8px rgba(16,185,129,0.08), 0 0 0 16px rgba(16,185,129,0.04); }
    50%    { box-shadow:0 0 0 12px rgba(16,185,129,0.12), 0 0 0 24px rgba(16,185,129,0.06); }
  }

  /* waveform right (mirror) */
  .va-waveform.va-mirror .va-wv:nth-child(1){ height:6px;  }
  .va-waveform.va-mirror .va-wv:nth-child(2){ height:14px; }
  .va-waveform.va-mirror .va-wv:nth-child(3){ height:24px; }
  .va-waveform.va-mirror .va-wv:nth-child(4){ height:36px; background:rgba(16,185,129,0.8); }
  .va-waveform.va-mirror .va-wv:nth-child(5){ height:48px; background:#10b981; }
  .va-waveform.va-mirror .va-wv:nth-child(6){ height:40px; background:rgba(16,185,129,0.8); }
  .va-waveform.va-mirror .va-wv:nth-child(7){ height:28px; }
  .va-waveform.va-mirror .va-wv:nth-child(8){ height:16px; }
  .va-waveform.va-mirror .va-wv:nth-child(9){ height:8px;  }

  /* current transcript bubble */
  .va-transcript {
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(16,185,129,0.06);
    border: 1px solid rgba(16,185,129,0.15);
    border-radius: 10px;
    position: relative; z-index: 1;
    min-height: 42px;
  }

  .va-tr-lang {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase;
    color: #34d399; margin-bottom: 4px;
    display: flex; align-items: center; gap: 6px;
  }

  .va-tr-flag { font-size: 11px; }

  .va-tr-text {
    font-size: 12px; color: rgba(255,255,255,0.7);
    line-height: 1.5; font-weight: 300;
  }

  .va-tr-text strong { color: rgba(255,255,255,0.9); font-weight: 500; }

  /* typing cursor */
  .va-cursor {
    display: inline-block; width: 2px; height: 12px;
    background: #10b981; border-radius: 1px; margin-left: 2px;
    animation: va_va_blink 0.8s ease infinite; vertical-align: middle;
  }
  @keyframes va_va_blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

  /* ── STAT BAND ── */
  .va-stat-band {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px; background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .va-stat-cell {
    background: #0d0f16; padding: 14px 10px;
    text-align: center; cursor: default;
    transition: background 0.3s;
  }

  .va-stat-cell:hover { background: rgba(16,185,129,0.03); }

  .va-sc-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(14px, 4vw, 20px); font-weight: 500; line-height: 1; margin-bottom: 3px;
  }

  .va-sc-lbl { font-size: 9px; color: rgba(255,255,255,0.25); letter-spacing: 0.03em; }

  /* ── LANGUAGE GRID ── */
  .va-lang-section {
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .va-lang-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
  }

  .va-lang-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.22);
  }

  .va-lang-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; color: #34d399;
  }

  .va-lang-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
  }

  .va-lang-pill {
    display: flex; align-items: center; gap: 5px;
    padding: 6px 8px; border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    font-size: 10.5px; color: rgba(255,255,255,0.5);
    cursor: default; transition: all 0.25s;
    animation: va_va_pillIn 0.4s ease both;
  }

  .va-lang-pill:hover { border-color: rgba(16,185,129,0.25); color: rgba(255,255,255,0.8); background: rgba(16,185,129,0.05); }
  .va-lang-pill.va-active { border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.08); color: #6ee7b7; }

  .va-lang-pill:nth-child(1){ animation-delay:0.05s; }
  .va-lang-pill:nth-child(2){ animation-delay:0.1s; }
  .va-lang-pill:nth-child(3){ animation-delay:0.15s; }
  .va-lang-pill:nth-child(4){ animation-delay:0.2s; }
  .va-lang-pill:nth-child(5){ animation-delay:0.25s; }
  .va-lang-pill:nth-child(6){ animation-delay:0.3s; }
  .va-lang-pill:nth-child(7){ animation-delay:0.35s; }
  .va-lang-pill:nth-child(8){ animation-delay:0.4s; }

  @keyframes va_va_pillIn {
    from{ opacity:0; transform:scale(0.85); }
    to  { opacity:1; transform:scale(1); }
  }

  .va-lp-flag { font-size: 12px; }
  .va-lp-name { font-size: 9.5px; font-weight: 400; }

  /* ── LIVE CALL FEED ── */
  .va-call-feed {
    padding: 10px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .va-cf-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.22); margin-bottom: 8px;
  }

  .va-call-rows { display: flex; flex-direction: column; gap: 5px; }

  .va-call-row {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 10px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(255,255,255,0.015);
    animation: va_va_rowIn 0.5s ease both;
    transition: border-color 0.25s;
  }

  .va-call-row:hover { border-color: rgba(16,185,129,0.18); }
  .va-call-row:nth-child(1){ animation-delay:0.05s; }
  .va-call-row:nth-child(2){ animation-delay:0.15s; }
  .va-call-row:nth-child(3){ animation-delay:0.25s; }

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

  .va-cr-flag { font-size: 16px; flex-shrink: 0; }

  .va-cr-info { flex: 1; min-width: 0; }
  .va-cr-name { font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,0.78); margin-bottom: 1px; }
  .va-cr-intent { font-size: 9.5px; color: rgba(255,255,255,0.28); }

  .va-cr-dur {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; color: rgba(255,255,255,0.28); flex-shrink: 0;
    animation: va_va_durTick 1s linear infinite;
  }

  @keyframes va_va_durTick { 0%,100%{opacity:0.6;} 50%{opacity:1;} }

  .va-cr-status {
    padding: 3px 8px; border-radius: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; font-weight: 500; border: 1px solid;
    white-space: nowrap; flex-shrink: 0;
  }

  .va-cs-live   { background:rgba(16,185,129,0.1);  color:#34d399; border-color:rgba(16,185,129,0.25); animation: va_va_csLive 1.5s ease infinite; }
  .cs-queue  { background:rgba(251,191,36,0.1);  color:#fbbf24; border-color:rgba(251,191,36,0.25); }
  .va-cs-done   { background:rgba(96,165,250,0.1);  color:#93c5fd; border-color:rgba(96,165,250,0.25); }

  @keyframes va_va_csLive {
    0%,100%{ opacity:1; } 50%{ opacity:0.6; }
  }

  /* ── BOTTOM ── */
  .va-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 18px;
  }

  .va-bot-left { display: flex; align-items: center; gap: 7px; }

  .va-bot-icon {
    width: 22px; height: 22px; border-radius: 6px;
    background: rgba(6,95,70,0.25); border: 1px solid rgba(6,95,70,0.4);
    display: flex; align-items: center; justify-content: center; font-size: 11px;color: #fff;
  }

  .va-bot-text { font-size: 10.5px; color: rgba(255,255,255,0.28); }
  .va-bot-text strong { color: rgba(255,255,255,0.55); font-weight: 500; }

  /* sound equalizer */
  .va-equalizer {
    display: flex; align-items: center; gap: 2px; height: 20px;
  }

  .va-eq {
    width: 3px; border-radius: 2px;
    background: rgba(16,185,129,0.5);
    animation: va_va_eqWave 1s ease infinite;
  }

  .va-eq:nth-child(1){ height:5px;  animation-delay:0s; }
  .va-eq:nth-child(2){ height:12px; animation-delay:0.1s; }
  .va-eq:nth-child(3){ height:18px; animation-delay:0.2s; background:rgba(16,185,129,0.8); }
  .va-eq:nth-child(4){ height:14px; animation-delay:0.3s; }
  .va-eq:nth-child(5){ height:20px; animation-delay:0.2s; background:#10b981; }
  .va-eq:nth-child(6){ height:10px; animation-delay:0.1s; }
  .va-eq:nth-child(7){ height:6px;  animation-delay:0s;  }

  @keyframes va_va_eqWave {
    0%,100%{ transform:scaleY(0.4); opacity:0.4; }
    50%    { transform:scaleY(1);   opacity:1; }
  }


/* ══════════ campaign-optimization-widget ══════════ */
@media (max-width: 500px) {
  .co-widget {
    max-width: 420px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 460px) {
  .co-widget {
    max-width: 420px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 430px) {
  .co-widget {
    max-width: 390px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 410px) {
  .co-widget {
    max-width: 370px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 390px) {
  .co-widget {
    max-width: 350px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 360px) {
  .co-widget {
    max-width: 320px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 350px) {
  .co-widget {
    max-width: 310px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}
@media (max-width: 320px) {
  .co-widget {
    max-width: 280px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}








@media (min-width: 500px) {
  .co-widget {
    max-width: 480px;
    min-width: 0;
    width: 100%;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
}


  .co-widget::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 170px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.9), transparent);
  }

  /* scan line */
  .co-scan {
    position: absolute; left: 0; right: 0; height: 1px; top: 0;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.35), transparent);
    animation: co_co_scanDown 4.2s ease-in-out infinite;
    pointer-events: none; z-index: 10;
  }
  @keyframes co_co_scanDown {
    0%  { top:0%;   opacity:0; }
    4%  { opacity:1; }
    96% { opacity:1; }
    100%{ top:100%; opacity:0; }
  }

  /* ── HEADER ── */
  .co-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .co-h-left { display: flex; align-items: center; gap: 10px; }

  .co-h-icon {
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(135deg, #4338ca, #6366f1);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    box-shadow: 0 0 18px rgba(99,102,241,0.35);
  }

  .co-h-title { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.85); letter-spacing: -0.01em; }
  .co-h-sub   { font-size: 10px; color: rgba(255,255,255,0.25); font-family: 'JetBrains Mono', monospace; margin-top: 1px; }

  .co-opt-pill {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 20px;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.22);
  }

  .co-opt-dot {
    width: 5px; height: 5px; border-radius: 50%; background: #818cf8;
    animation: co_co_optpulse 1.6s ease infinite;
  }
  @keyframes co_co_optpulse {
    0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(99,102,241,0.5); }
    50%    { opacity:0.5; box-shadow:0 0 0 5px rgba(99,102,241,0); }
  }

  .co-opt-txt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #a5b4fc;
  }

  /* ── STAT BAND ── */
  .co-stat-band {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .co-stat-cell {
    background: #0d0f16; padding: 14px 8px;
    text-align: center; cursor: default;
    transition: background 0.3s; position: relative; overflow: hidden;
  }

  .co-stat-cell::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s ease;
  }

  .co-stat-cell:nth-child(1)::after { background: #6366f1; }
  .co-stat-cell:nth-child(2)::after { background: #34d399; }
  .co-stat-cell:nth-child(3)::after { background: #f59e0b; }
  .co-stat-cell:nth-child(4)::after { background: #f87171; }

  .co-stat-cell:hover { background: rgba(99,102,241,0.03); }
  .co-stat-cell:hover::after { transform: scaleX(1); }

  .co-sc-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(14px, 4vw, 20px); font-weight: 500; line-height: 1; margin-bottom: 3px;
  }

  .co-sc-lbl { font-size: 9px; color: rgba(255,255,255,0.25); letter-spacing: 0.02em; }

  /* ── LIVE PERFORMANCE CHART ── */
  .co-chart-section {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .co-cs-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
  }

  .co-cs-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.22);
  }

  .co-cs-legend {
    display: flex; gap: 12px;
  }

  .co-leg-item {
    display: flex; align-items: center; gap: 4px;
    font-size: 9px; color: rgba(255,255,255,0.28);
    font-family: 'JetBrains Mono', monospace;
  }

  .co-leg-dot { width: 6px; height: 6px; border-radius: 50%; }

  /* SVG line chart */
  .co-chart-wrap {
    position: relative; height: 72px;
  }

  .co-chart-wrap svg { width: 100%; height: 100%; overflow: visible; }

  /* animated draw */
  .co-line-before {
    fill: none; stroke: rgba(99,102,241,0.4); stroke-width: 1.5;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: co_co_drawLine 1.8s ease forwards 0.4s;
  }

  .co-line-after {
    fill: none; stroke: #6366f1; stroke-width: 2;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: co_co_drawLine 1.8s ease forwards 0.7s;
    filter: drop-shadow(0 0 4px rgba(99,102,241,0.6));
  }

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

  .co-area-before {
    fill: url(#co_areaBefore); opacity: 0;
    animation: co_co_fadeArea 0.6s ease forwards 2s;
  }

  .co-area-after {
    fill: url(#co_areaAfter); opacity: 0;
    animation: co_co_fadeArea 0.6s ease forwards 2.2s;
  }

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

  /* axis labels */
  .co-chart-labels {
    display: flex; justify-content: space-between;
    margin-top: 4px;
  }

  .co-chart-labels span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px; color: rgba(255,255,255,0.2);
  }

  /* ── CAMPAIGN ROWS ── */
  .co-camp-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px 7px;
  }

  .co-camp-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.22);
  }

  .co-spin { animation: co_co_spinI 2s linear infinite; display: inline-block; }
  @keyframes co_co_spinI { to { transform: rotate(360deg); } }

  .co-camp-sub {
    font-size: 9px; color: rgba(255,255,255,0.18);
    font-family: 'JetBrains Mono', monospace;
    display: flex; align-items: center; gap: 4px;
  }

  .co-campaigns { padding: 0 12px 10px; display: flex; flex-direction: column; gap: 5px; }

  .co-camp-row {
    display: grid;
    grid-template-columns: 26px 1fr 46px 49px 81px;
    align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(255,255,255,0.015);
    animation: co_co_rowIn 0.5s ease both;
    transition: all 0.25s; cursor: default;
  }

  .co-camp-row:hover { background: rgba(99,102,241,0.04); border-color: rgba(99,102,241,0.18); transform: translateX(3px); }

  .co-camp-row:nth-child(1){ animation-delay:0.06s; }
  .co-camp-row:nth-child(2){ animation-delay:0.14s; }
  .co-camp-row:nth-child(3){ animation-delay:0.22s; }
  .co-camp-row:nth-child(4){ animation-delay:0.30s; }

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

  .co-camp-icon {
    width: 26px; height: 26px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
  }

  .co-camp-info { min-width: 0; }
  .co-camp-name { font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px; }
  .co-camp-meta { font-size: 9px; color: rgba(255,255,255,0.28); }

  /* engagement rate */
  .co-eng-track { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; margin-bottom: 2px; }
  .co-eng-fill  { height: 100%; border-radius: 2px; width: 0; transition: width 1.5s cubic-bezier(0.23,1,0.32,1); }
  .co-eng-num   { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: rgba(255,255,255,0.28); text-align: right; }

  /* ai delta */
  .co-ai-delta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; font-weight: 500; text-align: right;
    display: flex; align-items: center; justify-content: flex-end; gap: 2px;
  }

  /* status chip */
  .co-c-status {
    padding: 3px 7px; border-radius: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; border: 1px solid; white-space: nowrap; text-align: center;
    animation: co_co_chipIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  }

  @keyframes co_co_chipIn {
    from{ transform:scale(0.75); opacity:0; }
    to  { transform:scale(1);    opacity:1; }
  }

  .co-cs-fire   { background:rgba(99,102,241,0.12); color:#a5b4fc; border-color:rgba(99,102,241,0.28); }
  .co-cs-opt    { background:rgba(52,211,153,0.12); color:#6ee7b7; border-color:rgba(52,211,153,0.28); }
  .co-cs-test   { background:rgba(251,191,36,0.12); color:#fcd34d; border-color:rgba(251,191,36,0.28); }
  .cs-pause  { background:rgba(156,163,175,0.1); color:#9ca3af; border-color:rgba(156,163,175,0.2); }

  /* ── AI OPTIMIZE TOAST ── */
  .co-toast-wrap { padding: 0 12px 10px; }

  .co-toast {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 10px 12px; border-radius: 9px;
    background: rgba(99,102,241,0.07);
    border: 1px solid rgba(99,102,241,0.18);
    animation: co_co_toastIn 0.4s ease both;
  }

  @keyframes co_co_toastIn {
    from{ opacity:0; transform:translateY(6px); }
    to  { opacity:1; transform:translateY(0); }
  }

  .co-toast-icon { font-size: 15px; flex-shrink: 0; padding-top: 1px;color: #fff; }
  .co-toast-body { flex: 1; }
  .co-toast-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase;
    color: #818cf8; margin-bottom: 3px;
  }
  .co-toast-text { font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.5; }
  .co-toast-text strong { color: rgba(255,255,255,0.82); font-weight: 500; }

  .co-toast-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; color: rgba(255,255,255,0.18); flex-shrink: 0; padding-top: 2px;
  }

  /* ── BOTTOM ── */
  .co-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 18px;
    border-top: 1px solid rgba(255,255,255,0.05);
  }

  .co-bot-left { display: flex; align-items: center; gap: 7px; }

  .co-bot-icon {
    width: 22px; height: 22px; border-radius: 6px;
    background: rgba(67,56,202,0.2); border: 1px solid rgba(67,56,202,0.35);
    display: flex; align-items: center; justify-content: center; font-size: 11px;
  }

  .co-bot-text { font-size: 10.5px; color: rgba(255,255,255,0.28); }
  .co-bot-text strong { color: rgba(255,255,255,0.55); font-weight: 500; }

  /* signal bars */
  .co-signal-bars { display: flex; align-items: flex-end; gap: 3px; height: 18px; }

  .co-sb {
    width: 4px; border-radius: 2px 2px 0 0;
    animation: co_co_sigPulse 1.6s ease infinite;
  }

  .co-sb:nth-child(1){ height:5px;  animation-delay:0s;    background:rgba(99,102,241,0.3); }
  .co-sb:nth-child(2){ height:8px;  animation-delay:0.12s; background:rgba(99,102,241,0.45); }
  .co-sb:nth-child(3){ height:12px; animation-delay:0.24s; background:rgba(99,102,241,0.6); }
  .co-sb:nth-child(4){ height:16px; animation-delay:0.36s; background:rgba(99,102,241,0.8); }
  .co-sb:nth-child(5){ height:18px; animation-delay:0.48s; background:#6366f1; }

  @keyframes co_co_sigPulse {
    0%,100%{ transform:scaleY(0.5); opacity:0.5; }
    50%    { transform:scaleY(1);   opacity:1; }
  }



/* ══════════════════════════════════════════════
   RESPONSIVE PATCHES — apply at all breakpoints
══════════════════════════════════════════════ */

/* ── 420px and below: start scaling down ── */
@media (max-width: 420px) {
  /* PREDICTIVE PERSONALIZATION */
  .pp-header { padding: 12px 14px; }
  .pp-score-band { padding: 12px 14px; }
  .pp-feed { padding: 0 8px 10px; }
  .pp-partner-row { padding: 8px 8px; gap: 8px; }
  .pp-score-col { width: 44px; }
  .pp-ticker { padding: 8px 14px; }
  .pp-model-strip { padding: 8px 14px; }
  .pp-score-num { font-size: clamp(14px, 5vw, 20px) !important; }

  /* SEGMENTATION */
  .ss-header { padding: 12px 14px; }
  .ss-stat-block { padding: 14px 14px 12px; }
  .ss-sb-num { font-size: clamp(20px, 8vw, 34px) !important; }
  .ss-breakdown { padding: 12px 14px; }
  .ss-bk-name { width: 80px !important; font-size: 10.5px; }
  .ss-trigger-row { padding: 10px 14px; gap: 8px; }
  .ss-bottom { padding: 10px 14px; }

  /* CHURN */
  .cp-header { padding: 12px 14px; }
  .cp-stat-block { padding: 14px 14px 12px; }
  .cp-sb-num { font-size: clamp(18px, 7vw, 32px) !important; }
  .cp-timeline { padding: 12px 14px; }
  .cp-alerts { padding: 10px 14px; }
  .cp-alert-row { padding: 7px 8px; gap: 8px; }
  .cp-bottom { padding: 10px 14px; }
  .cp-cr-week { width: 22px; font-size: 8px; }
  .cp-cr-num  { width: 22px; font-size: 8px; }

  /* TIER MANAGEMENT */
  .tm-header { padding: 12px 14px; }
  .tm-tier-bands { gap: 6px; padding: 12px 14px; }
  .tm-tier-band { padding: 10px 12px; }
  .tm-tier-count { font-size: clamp(18px, 7vw, 30px) !important; }
  .tm-leaderboard { padding: 0 10px 10px; }
  .tm-lb-row { padding: 7px 8px; gap: 7px; }
  .tm-lb-avatar { width: 22px; height: 22px; font-size: 8px; }
  .tm-lb-name { font-size: 10.5px; }
  .tm-lb-scans-num { font-size: 10px; }
  .tm-bottom { padding: 10px 14px; }

  /* VOICE ASSISTANT */
  .va-header { padding: 12px 14px; }
  .va-waveform-section { padding: 12px 14px; }
  .va-mic-container { width: 56px; height: 56px; }
  .va-mic-btn { width: 50px; height: 50px; font-size: 20px; }
  .va-wv { width: 36px; }
  .va-transcript-box { padding: 10px 14px; }
  .va-sc-num { font-size: clamp(14px, 4vw, 18px) !important; }
  .va-call-rows { padding: 0 10px 10px; }
  .va-call-row { padding: 7px 8px; gap: 8px; }
  .va-bottom { padding: 10px 14px; }
  .va-lang-grid { gap: 4px; }
  .va-lang-pill { padding: 3px 7px; font-size: 8.5px; }

  /* CAMPAIGN */
  .co-header { padding: 12px 14px; }
  .co-sc-num { font-size: clamp(13px, 4vw, 18px) !important; }
  .co-sc-lbl { font-size: 8px; }
  .co-chart-section { padding: 12px 14px; }
  .co-camp-header { padding: 10px 14px 6px; }
  .co-campaigns { padding: 0 8px 8px; gap: 4px; }
  .co-camp-row { padding: 7px 8px; gap: 6px; }
  .co-camp-name { font-size: 10.5px; }
  .co-camp-meta { font-size: 8px; }
  .co-toast-wrap { padding: 0 8px 8px; }
  .co-bottom { padding: 10px 14px; }
}

/* ── 360px and below: compact mode ── */
@media (max-width: 360px) {
  /* hide less critical elements */
  .pp-model-text { display: none; }
  .ss-sb-sub { font-size: 9.5px; }
  .cp-sb-sub { font-size: 9.5px; }
  .tm-tier-sub { display: none; }
  .va-lang-section { display: none; }
  .co-camp-meta { display: none; }

  /* Stat grids: tighten */
  .ss-stat-block, .cp-stat-block { padding: 12px 10px 10px; }
  .co-stat-cell { padding: 10px 6px; }
  .va-stat-cell { padding: 10px 6px; }

  /* Widget header: shrink icon */
  .pp-header-icon,
  .ss-h-icon, .cp-h-icon, .tm-h-icon,
  .va-h-icon, .co-h-icon { width: 26px; height: 26px; font-size: 12px; }

  .pp-header-title, .ss-h-title, .cp-h-title,
  .tm-h-title, .va-h-title, .co-h-title { font-size: 11px; }

  /* Grid layouts: stack 2-col grids  */
  .ss-stats-grid, .cp-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* score band: smaller */
  .co-stat-band { grid-template-columns: repeat(2, 1fr); }
  .va-stat-band { grid-template-columns: repeat(3, 1fr); }
}

/* ── 320px: minimum supported ── */
@media (max-width: 320px) {
  .ss-stats-grid, .cp-stats-grid { grid-template-columns: 1fr; }
  .co-stat-band { grid-template-columns: repeat(2, 1fr); }

  .pp-reward-chip { font-size: 9px; padding: 3px 6px; }
  .ss-bk-name { width: 60px !important; font-size: 9.5px; }
  .co-ai-delta { display: none; }
  .tm-lb-bar-wrap { display: none; }
}


.sticky-padding{
  position: sticky;
  top: 40px;
}

@media (max-width: 991px){
  .sticky-padding{
    position: relative;
    top:auto;
  }
}