/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #000;
  color: #fff;
  line-height: 1.4;
  overflow-x: hidden;
}

/* ============================================================
   LOGIN PAGE
============================================================ */
@keyframes login-orb-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(40px, -60px) scale(1.15); }
  66%  { transform: translate(-30px, 40px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes login-orb-drift2 {
  0%   { transform: translate(0, 0) scale(1); }
  40%  { transform: translate(-50px, 30px) scale(1.2); }
  70%  { transform: translate(35px, -40px) scale(0.85); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes login-orb-drift3 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(20px, 50px) scale(1.1); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes login-card-in {
  from { opacity: 0; transform: translateY(32px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes login-border-spin {
  to { --login-angle: 360deg; }
}
@property --login-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes login-btn-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(254,44,85,0.55),
                0 4px 24px rgba(254,44,85,0.45);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(254,44,85,0),
                0 4px 40px rgba(254,44,85,0.75);
  }
}
@keyframes login-btn-shine {
  0%   { left: -80%; }
  100% { left: 130%; }
}
@keyframes login-shimmer-line {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes login-float-arrow {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%       { transform: translateY(-5px); opacity: 1; }
}

.login {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

/* ── Ambient glow orbs ── */
.login::before,
.login::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.login::before {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(254,44,85,0.28) 0%, transparent 70%);
  top: -100px; left: -120px;
  animation: login-orb-drift 12s ease-in-out infinite;
}
.login::after {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(37,244,238,0.18) 0%, transparent 70%);
  bottom: -80px; right: -100px;
  animation: login-orb-drift2 14s ease-in-out infinite;
}
/* third orb via extra element injected by JS */
.login-orb3 {
  position: absolute;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(168,85,247,0.14) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(70px);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: login-orb-drift3 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* scanlines subtle overlay */
.login-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,0.018) 3px,
    rgba(255,255,255,0.018) 4px
  );
  pointer-events: none;
  z-index: 1;
}

.login-card {
  background: rgba(20,20,20,0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 28px;
  padding: 44px 36px 40px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  position: relative;
  z-index: 2;
  animation: login-card-in 0.7s cubic-bezier(0.22,1,0.36,1) both;
  /* animated gradient border */
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 0 1px rgba(254,44,85,0.2),
    0 0 40px rgba(254,44,85,0.12),
    0 24px 60px rgba(0,0,0,0.7);
}

/* Rotating gradient border glow */
.login-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 29px;
  background: conic-gradient(
    from var(--login-angle, 0deg),
    rgba(254,44,85,0.8) 0deg,
    rgba(37,244,238,0.6) 120deg,
    rgba(168,85,247,0.5) 200deg,
    rgba(254,44,85,0.8) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  animation: login-border-spin 6s linear infinite;
  opacity: 0.6;
  pointer-events: none;
  z-index: -1;
}

/* Top shimmer strip */
.login-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(254,44,85,0.9) 30%,
    rgba(37,244,238,0.9) 50%,
    rgba(254,44,85,0.9) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: login-shimmer-line 3s ease-in-out infinite;
}

.login-card h2 {
  font-size: 1.85rem;
  margin-bottom: 28px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: linear-gradient(135deg, #fe2c55, #d4003f, #00bfba);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.login-card input {
  width: 100%;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  font-size: 1rem;
  color: #fff;
  outline: none;
  font-family: inherit;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}

.login-card input::placeholder { color: rgba(255,255,255,0.25); }

.login-card input:focus {
  border-color: rgba(254,44,85,0.6);
  background: rgba(254,44,85,0.06);
  box-shadow: 0 0 0 3px rgba(254,44,85,0.15), 0 0 20px rgba(254,44,85,0.08);
}

/* ── CTA Button ── */
.login-card button {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #d4002a, #fe2c55, #ff4d6d);
  border: none;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.5px;
  margin-top: 6px;
  transition: transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 24px rgba(254,44,85,0.5);
  animation: login-btn-pulse 2s ease-in-out infinite;
}

/* Shine sweep */
.login-card button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-20deg);
  animation: login-btn-shine 2.8s ease-in-out infinite;
}

/* Arrow indicator */
.login-card button::after {
  content: '↓';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  opacity: 0.75;
  animation: login-float-arrow 1.2s ease-in-out infinite;
}

.login-card button:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 8px 36px rgba(254,44,85,0.7), 0 0 60px rgba(254,44,85,0.25);
  animation: none;
}

.login-card button:active {
  transform: scale(0.98);
  box-shadow: 0 2px 12px rgba(254,44,85,0.4);
}

/* Ripple on login button */
.login-btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: login-ripple-anim 0.65s linear forwards;
  pointer-events: none;
}
@keyframes login-ripple-anim {
  to { transform: scale(1); opacity: 0; }
}

/* ============================================================
   APP LAYOUT
============================================================ */
#app {
  background: #000;
  padding: 20px 24px 40px;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ============================================================
   PROJECT TABS
============================================================ */
/* ── Вкладки проектов ────────────────────────────────────── */
@keyframes tabSweepIn {
  0%   { transform: scale(0.65) translateY(14px);
         opacity: 0; filter: blur(16px); }
  55%  { filter: blur(0.5px); }
  78%  { transform: scaleX(1.07) scaleY(1.13) translateY(-5px); }
  100% { transform: scaleY(1.09) translateY(-3px);
         opacity: 1; filter: blur(0); }
}
@keyframes tabSweepOut {
  0%   { opacity: 1; filter: blur(0); transform: scale(1) translateY(0); }
  40%  { filter: blur(2px); }
  100% { opacity: 0; filter: blur(12px); transform: scale(0.78) translateY(8px); }
}
/* Дышащее свечение активной кнопки */
@keyframes tabGlow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255,80,120,0.25),
      0 0 24px 4px  rgba(200,0,60,0.35),
      0 6px 24px    rgba(200,0,60,0.50),
      inset 0 1px 0 rgba(255,255,255,0.30);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255,80,120,0.40),
      0 0 44px 10px rgba(200,0,60,0.55),
      0 10px 36px   rgba(200,0,60,0.65),
      inset 0 1px 0 rgba(255,255,255,0.38);
  }
}
/* Мерцающий блик — диагональная полоса */
@keyframes tabShimmer {
  0%, 100% { transform: translateX(-220%) skewX(-15deg); opacity: 0; }
  8%        { opacity: 1; }
  35%, 65%  { transform: translateX(260%) skewX(-15deg); opacity: 0; }
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.tab {
  padding: 10px 26px;
  border-radius: 40px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.42);
  border: 1px solid rgba(255,255,255,0.07);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  min-width: 100px;
  height: 42px;
  position: relative;
  z-index: 1;
  overflow: hidden;           /* обязательно для shimmer */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0.62;
  transform: scale(0.94);
  transition:
    background   0.36s ease,
    color        0.36s ease,
    border-color 0.36s ease,
    box-shadow   0.36s ease,
    padding      0.52s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform    0.52s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity      0.30s ease,
    filter       0.30s ease;
}

/* Блик — только на активной */
.tab::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -60%;
  width: 45%;
  height: 160%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,0.06) 35%,
    rgba(255,255,255,0.20) 50%,
    rgba(255,255,255,0.06) 65%,
    transparent 100%
  );
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tab.active::before {
  opacity: 1;
  animation: tabShimmer 4s ease-in-out 0.4s infinite;
}

/* Hover неактивных */
.tab:not(.active):hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.88);
  opacity: 0.90;
  transform: scale(0.97) translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.40);
}

/* ── Активная кнопка ─────────────────────────────────────── */
.tab.active {
  background: linear-gradient(
    135deg,
    #ff5f85 0%,
    #e8003d 28%,
    #c8003c 58%,
    #850030 100%
  );
  border-color: rgba(255,100,130,0.35);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 10px 40px;
  transform: scaleY(1.09) translateY(-3px);
  opacity: 1;
  z-index: 2;
  text-shadow: 0 1px 5px rgba(0,0,0,0.55);
  animation: tabGlow 2.6s ease-in-out infinite;
}

.tab.active:hover {
  transform: scaleY(1.13) translateY(-5px);
  animation-duration: 1.2s;
}

/* ── Sweep-анимации при переключении ─────────────────────── */
.tab.tab-sweep-in {
  animation: tabSweepIn 0.54s cubic-bezier(0.34, 1.45, 0.64, 1) both,
             tabGlow    2.6s ease-in-out 0.55s infinite;
}
.tab.tab-sweep-out {
  animation: tabSweepOut 0.28s ease-in both;
  pointer-events: none;
}

/* ── Индикатор активного месяца ─────────────────────────── */
.active-month-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 0 6px;
  position: relative;
}
.amb-icon {
  font-size: 18px;
  filter: drop-shadow(0 0 6px rgba(37,244,238,0.5));
  flex-shrink: 0;
}
.amb-month {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #fe2c55 0%, #ff6b9d 35%, #25f4ee 70%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(37,244,238,0.25));
  transition: all 0.35s ease;
}
.amb-year {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.08em;
  align-self: flex-end;
  margin-bottom: 3px;
}
/* Тонкая светящаяся линия под бейджем */
.active-month-badge::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37,244,238,0.4), rgba(254,44,85,0.4), transparent);
  border-radius: 2px;
}

/* ── Drag-and-drop вкладок ──────────────────────────────── */
.tab[draggable="true"] { cursor: grab; }
.tab[draggable="true"]:active { cursor: grabbing; }

.tab.tab-dragging {
  opacity: 0.35;
  transform: scale(0.96) translateY(-2px);
  box-shadow: none;
}

.tab-drag-placeholder {
  border-radius: 40px;
  background: rgba(255,255,255,0.04);
  border: 2px dashed rgba(255,255,255,0.15);
  display: inline-block;
  flex-shrink: 0;
  transition: none;
}

/* ============================================================
   TOP BAR — Modern redesign
============================================================ */
.top-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(14, 14, 14, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 8px 14px;
  border-radius: 18px;
  flex-wrap: wrap;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}

.user-block {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.05);
  padding: 5px 14px 5px 6px;
  border-radius: 40px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.07);
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(254,44,85,0.6);
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.today-date {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  font-weight: 400;
}

/* ============================================================
   BUTTONS BAR
============================================================ */
.buttons-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
}

.btn-action {
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.15s ease;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.06);
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.1px;
}

.btn-action:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.15);
  transform: none;
}

.btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
  font-size: 14px;
}

.btn-divider {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
  margin: 0 2px;
}

.btn-excel {
  color: rgba(255,255,255,0.75);
  border-color: rgba(77, 208, 196, 0.2);
}
.btn-excel:hover {
  background: rgba(77, 208, 196, 0.1);
  border-color: rgba(77, 208, 196, 0.4);
  color: #4dd0c4;
}

.btn-gsheets {
  color: rgba(255,255,255,0.75);
  border-color: rgba(52, 168, 83, 0.3);
}
.btn-gsheets:hover {
  background: rgba(52, 168, 83, 0.12);
  border-color: rgba(52, 168, 83, 0.5);
  color: #34a853;
}

.btn-logout {
  color: rgba(255,255,255,0.4);
}
.btn-logout:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.btn-tiktok-connect {
  background: rgba(75, 163, 168, 0.12);
  border-color: rgba(75, 163, 168, 0.25);
  color: #4ba3a8;
}
.btn-tiktok-connect:hover {
  background: rgba(75, 163, 168, 0.2);
  border-color: rgba(75, 163, 168, 0.4);
  color: #6dc8ce;
}

.btn-screenshot {
  background: linear-gradient(135deg, rgba(109,40,217,0.18), rgba(79,70,229,0.18));
  border-color: rgba(109,40,217,0.35);
  color: #a78bfa;
  font-weight: 600;
}
.btn-screenshot:hover {
  background: linear-gradient(135deg, rgba(109,40,217,0.3), rgba(79,70,229,0.3));
  border-color: rgba(109,40,217,0.6);
  color: #c4b5fd;
  box-shadow: 0 0 14px rgba(109,40,217,0.25);
}

.btn-tiktok-sync {
  background: rgba(254, 44, 85, 0.12);
  border-color: rgba(254, 44, 85, 0.25);
  color: #fe2c55;
}
.btn-tiktok-sync:hover {
  background: rgba(254, 44, 85, 0.2);
  border-color: rgba(254, 44, 85, 0.4);
}

.btn-tiktok-sync:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-notif-bell, .btn-admin-msg {
  position: relative;
}

.btn-notif-bell:hover, .btn-admin-msg:hover {
  background: rgba(255, 214, 0, 0.08);
  border-color: rgba(255, 214, 0, 0.2);
  color: #ffd600;
}

/* ============================================================
   TIKTOK STATUS BAR
============================================================ */
.tiktok-status-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: #111;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 13px;
}

.tiktok-last-sync {
  margin-left: 4px;
  color: #aaa;
  font-size: 12px;
}

@keyframes tt-spin { to { transform: rotate(360deg); } }
.tiktok-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fe2c55;
  border-radius: 50%;
  animation: tt-spin 0.8s linear infinite;
  vertical-align: middle;
}

/* ============================================================
   TT BALANCE
============================================================ */
.tt-balance-container {
  display: flex;
  justify-content: center;
}

.tt-balance {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #1a1a1a;
  padding: 10px 28px;
  border-radius: 60px;
  border: 1px solid #2a2a2a;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  font-size: 13px;
  font-weight: 500;
  color: #aaa;
  transition: 0.2s;
}

.tt-balance:hover {
  border-color: #fe2c55;
}

.tt-balance span:last-child {
  font-weight: 700;
  font-size: 15px;
  color: #25f4ee;
}

.tt-balance-editable {
  font-weight: 700;
  font-size: 15px;
  color: #25f4ee;
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 6px;
  transition: background 0.2s;
  outline: none;
  min-width: 30px;
  display: inline-block;
  text-align: center;
}

.tt-balance-editable:hover {
  background: rgba(37,244,238,0.1);
}

.tt-balance-editable[contenteditable="true"] {
  background: rgba(37,244,238,0.12);
  border: 1px solid rgba(37,244,238,0.4);
  cursor: text;
}

.tt-balance-save-btn {
  background: rgba(37,244,238,0.15);
  border: 1px solid rgba(37,244,238,0.4);
  color: #25f4ee;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 8px;
  transition: background 0.2s;
  line-height: 1.4;
}

.tt-balance-save-btn:hover {
  background: rgba(37,244,238,0.28);
}

/* ============================================================
   PLAN SECTION (BUDGET + CHART)
============================================================ */
.plan {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  background: #111;
  padding: 20px;
  border-radius: 24px;
}

/* ── Plan period toggle (Month / Week) ── */
.plan-period-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.plan-period-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 18px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.1);
  background: #1a1a1a;
  color: #888;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.plan-period-btn:hover {
  border-color: rgba(37,244,238,0.4);
  color: #ccc;
  background: #222;
}
.plan-period-btn.active {
  background: linear-gradient(135deg,#0d2e2e,#0a1f2e);
  border-color: #25f4ee;
  color: #25f4ee;
  box-shadow: 0 0 10px rgba(37,244,238,0.25);
}

.plan-week-tabs {
  display: none;
  align-items: center;
  gap: 4px;
  background: #111;
  border: 1px solid #222;
  border-radius: 30px;
  padding: 3px 4px;
}

.plan-week-btn {
  height: 28px;
  padding: 0 13px;
  border-radius: 24px;
  border: none;
  background: transparent;
  color: #666;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.plan-week-btn:hover {
  background: rgba(37,244,238,0.08);
  color: #aaa;
}
.plan-week-btn.active {
  background: #25f4ee;
  color: #050a0a;
  box-shadow: 0 0 8px rgba(37,244,238,0.4);
}

.plan-period-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #25f4ee;
  background: rgba(37,244,238,0.1);
  border: 1px solid rgba(37,244,238,0.25);
  border-radius: 12px;
  padding: 2px 8px;
  margin-left: 4px;
}

/* Column span helpers for plan grid */
.plan-col-1 { grid-column: span 1; }
.plan-col-2 { grid-column: span 2; }
.plan-col-3 { grid-column: span 3; }

.plan-section {
  background: #1a1a1a;
  border-radius: 18px;
  padding: 16px;
}

.plan-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 8px;
}

.plan-section h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #fe2c55;
  border-left: 3px solid #fe2c55;
  padding-left: 10px;
  margin: 0;
}

/* Small unobtrusive save button for plan section */
.btn-plan-save {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(103, 158, 246, 0.3);
  background: rgba(103, 158, 246, 0.08);
  color: #679ef6;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

.btn-plan-save:hover {
  background: rgba(103, 158, 246, 0.18);
  border-color: rgba(103, 158, 246, 0.5);
  color: #89b4f8;
}

/* Editable plan grid items */
.plan-editable {
  cursor: pointer;
  transition: all 0.15s;
}

.plan-editable:hover {
  background: rgba(254,44,85,0.06) !important;
  border: 1px dashed rgba(254,44,85,0.3);
}

.plan-editable h2.editing {
  outline: none;
  border-bottom: 1.5px solid #25f4ee;
  color: #25f4ee;
  padding-bottom: 2px;
}

/* Карточка графика расходов — мягкий зелёный, тикток-стиль */
.budget-chart-card {
  margin-top: 16px;
  padding: 14px 14px 6px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(110,231,183,0.07), rgba(16,16,16,0.4));
  border: 1px solid rgba(110,231,183,0.16);
  box-shadow: 0 0 22px rgba(52,211,153,0.08), inset 0 1px 0 rgba(255,255,255,0.03);
  position: relative;
  overflow: hidden;
}

.budget-chart-card::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -10%;
  width: 60%;
  height: 180%;
  background: radial-gradient(circle, rgba(110,231,183,0.14) 0%, rgba(110,231,183,0) 70%);
  pointer-events: none;
}

.budget-chart-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: linear-gradient(90deg, #6ee7b7, #34d399 55%, #25f4ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  z-index: 1;
}

.plan-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.plan-grid > div {
  background: #0f0f0f;
  border-radius: 16px;
  padding: 12px 14px;
  text-align: center;
  flex: 1 1 110px;
  min-width: fit-content;
}

.plan-grid-divider {
  flex-basis: 100% !important;
  background: transparent !important;
  padding: 4px 2px 0 !important;
  border-radius: 0 !important;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #555;
  border-bottom: 1px solid #222;
  margin-bottom: 2px;
}

.plan-grid span {
  font-size: 0.72rem;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}

.plan-grid h2 {
  font-size: 1.4rem;
  margin-top: 4px;
  color: #fe2c55;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.2;
  text-align: center;
  transition: color 0.6s ease, text-shadow 0.6s ease;
}

@keyframes plan-val-pulse {
  0%   { opacity: 1; }
  40%  { opacity: 0.55; }
  100% { opacity: 1; }
}
.plan-val-flash {
  animation: plan-val-pulse 0.55s ease;
}

.plan-chart {
  background: #1a1a1a;
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.plan-chart-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #aaa;
  text-align: center;
  white-space: nowrap;
}

.plan-chart-labels {
  font-size: 0.68rem;
  color: #888;
  text-align: center;
  margin-top: 4px;
  line-height: 1.4;
}

/* ============================================================
   BI LINE CHART CARD
============================================================ */
.bi-chart-card {
  background: #111;
  border-radius: 24px;
  padding: 22px 24px 18px;
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s;
}
.bi-chart-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(37,244,238,0.15), rgba(254,44,85,0.12), rgba(168,85,247,0.15));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.bi-chart-card.bi-animating {
  border-color: rgba(37,244,238,0.3);
  box-shadow: 0 0 30px rgba(37,244,238,0.08);
}

.bi-chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.bi-chart-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}
.bi-chart-icon { font-size: 1.1rem; }
.bi-chart-period {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
  font-weight: 400;
}

.bi-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}

.bi-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.5);
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  flex-shrink: 0;
  margin-left: auto;
}
.bi-expand-btn:hover {
  background: rgba(37,244,238,0.12);
  color: #25f4ee;
  transform: scale(1.08);
}

.bi-chart-card { cursor: pointer; }
.bi-chart-card:hover { border-color: rgba(37,244,238,0.22); }

/* ── Modal overlay ── */
.bi-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(6px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bi-modal-overlay.open {
  display: flex;
}
.bi-modal {
  background: #111;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.1);
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 24px 28px 22px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(37,244,238,0.08);
  animation: bi-modal-in 0.22s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes bi-modal-in {
  from { opacity: 0; transform: scale(0.94) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.bi-modal-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 20px;
}
.bi-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: rgba(255,255,255,0.5);
  width: 36px;
  height: 36px;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.bi-modal-close:hover {
  background: rgba(247,37,133,0.15);
  color: #f72585;
}
.bi-modal-body {
  position: relative;
  flex: 1;
  min-height: 420px;
  max-height: 65vh;
}
#biLineChartModal {
  width: 100% !important;
  height: 100% !important;
}

.bi-leg-item {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  border-radius: 8px;
  padding: 3px 6px;
  transition: background 0.15s, opacity 0.2s;
  user-select: none;
}
.bi-leg-item:hover {
  background: rgba(255,255,255,0.06);
}
.bi-leg-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.2s, opacity 0.2s;
}
.bi-leg-item:hover .bi-leg-dot { transform: scale(1.4); }
.bi-leg-label {
  font-size: 0.73rem;
  color: rgba(255,255,255,0.65);
  white-space: nowrap;
  transition: color 0.2s;
}
.bi-leg-val {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  min-width: 46px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  transition: opacity 0.2s;
}
/* Colour-match the live % badge to its chart line */
.bi-leg-item[data-idx="0"] .bi-leg-val { color: #25f4ee; }
.bi-leg-item[data-idx="1"] .bi-leg-val { color: #fbbf24; }
.bi-leg-item[data-idx="2"] .bi-leg-val { color: #a855f7; }
.bi-leg-item[data-idx="3"] .bi-leg-val { color: #f72585; }
.bi-leg-item.bi-leg-inactive {
  opacity: 0.35;
}
.bi-leg-item.bi-leg-inactive .bi-leg-dot {
  filter: grayscale(1);
}
.bi-leg-item.bi-leg-inactive .bi-leg-label {
  text-decoration: line-through;
  color: rgba(255,255,255,0.25);
}
.bi-leg-item.bi-leg-isolated {
  opacity: 1;
  background: rgba(255,255,255,0.08);
  outline: 1px solid rgba(255,255,255,0.15);
  outline-offset: -1px;
}

.bi-chart-body {
  position: relative;
  height: 300px;
}

.bi-no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  color: rgba(255,255,255,0.22);
  font-size: 0.82rem;
  text-align: center;
  line-height: 1.6;
}

#biLineChart {
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 600px) {
  .bi-chart-header { flex-direction: column; gap: 10px; }
  .bi-legend { gap: 6px 14px; }
  .bi-chart-body { height: 200px; }
}

/* Donut wrapper — canvas + centered HTML label */
.donut-svg-wrap {
  flex-shrink: 0;
  filter: drop-shadow(0 0 18px rgba(254, 44, 85, 0.35));
}

#planChartSvg {
  display: block;
  overflow: visible;
}

.donut-track {
  fill: none;
  stroke: #1e1e1e;
  stroke-width: 18;
}

.donut-arc {
  fill: none;
  stroke: url(#arcGrad);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-dasharray: 502.65;
  stroke-dashoffset: 502.65;
  transform-origin: 100px 100px;
  transform: rotate(-90deg);
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              stroke 0.4s ease;
  filter: url(#arcGlow);
}

.donut-svg-text {
  font-family: inherit;
  font-size: 2rem;
  font-weight: 800;
  fill: #ffffff;
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: -1px;
}

.donut-arc-overflow {
  fill: none;
  stroke: #86efac;
  stroke-width: 18;
  stroke-linecap: round;
  stroke-dasharray: 502.65;
  stroke-dashoffset: 502.65;
  transform-origin: 100px 100px;
  transform: rotate(-90deg);
  opacity: 0;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease;
}

/* ============================================================
   DATE BAR
============================================================ */
#periodBar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

/* ── Period dropdown wrappers ── */
.period-dropdown-wrap {
  position: relative;
  display: inline-flex;
}

.period-drop {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 9998;
  background: #0f0f1a;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(37,244,238,0.07);
  min-width: 220px;
  flex-direction: column;
  gap: 10px;
}

.period-drop.open { display: flex; }

.pdrop-label {
  font-size: 10px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  margin-bottom: 2px;
}

.pdrop-date-input {
  background: #151525;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #e5e5e5;
  padding: 8px 12px;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}
.pdrop-date-input:focus { border-color: rgba(37,244,238,0.5); }
.pdrop-date-input::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }

.pdrop-apply-btn {
  background: linear-gradient(135deg, rgba(37,244,238,0.15), rgba(254,44,85,0.1));
  border: 1px solid rgba(37,244,238,0.45);
  border-radius: 8px;
  color: #25f4ee;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  cursor: pointer;
  width: 100%;
  transition: all 0.18s;
  font-family: inherit;
  letter-spacing: 0.2px;
}
.pdrop-apply-btn:hover { background: #25f4ee; color: #0a0a0a; box-shadow: 0 0 14px rgba(37,244,238,0.35); }

/* Week rows */
.pdrop-week-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pdrop-week-num {
  font-size: 11px;
  font-weight: 700;
  color: #555;
  width: 34px;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}

.pdrop-date-sm {
  background: #151525;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: #ddd;
  padding: 5px 4px;
  font-size: 11px;
  flex: 1;
  min-width: 0;
  outline: none;
  font-family: inherit;
  text-align: center;
  transition: border-color 0.15s;
}
.pdrop-date-sm:focus { border-color: rgba(37,244,238,0.4); }
.pdrop-date-sm::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; width: 10px; }

.pdrop-dash { color: #333; font-size: 12px; flex-shrink: 0; }

.pdrop-go {
  background: rgba(37,244,238,0.1);
  border: 1px solid rgba(37,244,238,0.25);
  border-radius: 6px;
  color: #25f4ee;
  font-size: 13px;
  padding: 4px 9px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
  font-family: inherit;
  line-height: 1;
}
.pdrop-go:hover { background: #25f4ee; color: #0a0a0a; }

/* Month grid */
.pdrop-months-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  min-width: 248px;
}

.pdrop-month-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  color: #999;
  font-size: 12px;
  font-weight: 600;
  padding: 9px 4px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  font-family: inherit;
  letter-spacing: 0.1px;
}
.pdrop-month-btn:hover {
  background: rgba(37,244,238,0.12);
  border-color: rgba(37,244,238,0.35);
  color: #25f4ee;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(37,244,238,0.12);
}

.period-pill {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 50px;
  color: #888;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 22px;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.15s;
  white-space: nowrap;
  font-family: inherit;
}

.period-pill:hover {
  background: rgba(37,244,238,0.1);
  border-color: rgba(37,244,238,0.35);
  color: #25f4ee;
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(37,244,238,0.14);
}

.period-pill.active {
  background: linear-gradient(135deg, rgba(37,244,238,0.18), rgba(254,44,85,0.12));
  border-color: #25f4ee;
  color: #25f4ee;
  box-shadow: 0 0 16px rgba(37,244,238,0.32), 0 2px 8px rgba(0,0,0,0.35);
  transform: translateY(-1px);
}

.date-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: #111;
  padding: 12px 18px;
  border-radius: 60px;
}

.date-bar input {
  background: #1e1e1e;
  border: none;
  padding: 8px 14px;
  border-radius: 40px;
  color: #fff;
  height: 40px;
  flex: 1 1 140px;
  font-family: inherit;
  font-size: 14px;
  min-width: 130px;
  outline: none;
}

.date-bar input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.date-btn {
  background: #fe2c55;
  border: none;
  padding: 0 20px;
  border-radius: 40px;
  font-weight: 500;
  cursor: pointer;
  color: #fff;
  transition: 0.2s;
  height: 40px;
  white-space: nowrap;
  font-size: 13px;
}

.date-btn:hover {
  background: #ff4d6d;
  transform: translateY(-2px);
}

.date-btn-month {
  background: #1a1a2e;
  border: 1px solid #4f46e5;
  color: #a5b4fc;
}
.date-btn-month:hover {
  background: #2d2b55;
  border-color: #818cf8;
  color: #fff;
  transform: translateY(-2px);
}

.date-btn.active {
  background: #25f4ee;
  color: #0a0a0a;
  box-shadow: 0 0 12px rgba(37,244,238,0.5);
  transform: translateY(-1px);
}
.date-btn-month.active {
  background: #25f4ee;
  border-color: #25f4ee;
  color: #0a0a0a;
  box-shadow: 0 0 12px rgba(37,244,238,0.5);
  transform: translateY(-1px);
}

.date-btn-28 {
  background: #1a0e1a;
  border: 1px solid #a855f7;
  color: #d8b4fe;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.date-btn-28:hover {
  background: #2d1a40;
  border-color: #c084fc;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(168,85,247,0.35);
}
.date-btn-28.active {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border-color: #a855f7;
  color: #fff;
  box-shadow: 0 0 14px rgba(168,85,247,0.55);
  transform: translateY(-1px);
}

/* ============================================================
   METRIC CARDS
============================================================ */
.cards-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.card {
  background: #1a1a1a;
  border-radius: 22px;
  padding: 16px 14px;
  text-align: center;
  transition: 0.2s;
  border: 1px solid #2a2a2a;
  overflow: visible;
  position: relative;
  flex: 1 1 150px;
  min-width: fit-content;
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(254,44,85,0.4);
}

.card span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #aaa;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.card h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 6px;
  color: #fe2c55;
  white-space: nowrap;
  line-height: 1.2;
  text-align: center;
}

/* Clickable card for admin editing */
.card-clickable {
  cursor: pointer;
}

.card-edit-hint {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.15s;
  color: rgba(255,255,255,0.3);
  pointer-events: none;
}

.card-clickable:hover .card-edit-hint {
  opacity: 1;
}

.card-clickable:hover {
  border-color: rgba(254,44,85,0.5);
  background: #1e1e1e;
}

/* Active edit state for card group */
.card-active {
  border-color: rgba(37, 244, 238, 0.5) !important;
  box-shadow: 0 0 16px rgba(37, 244, 238, 0.12);
  background: rgba(37, 244, 238, 0.04) !important;
}

.card h2.editing {
  outline: none;
  border-bottom: 1.5px solid #25f4ee;
  padding-bottom: 2px;
  color: #25f4ee;
  -webkit-text-fill-color: #25f4ee;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  animation: none;
}

/* Card actions bar */
.card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(37, 244, 238, 0.05);
  border: 1px solid rgba(37, 244, 238, 0.15);
  border-radius: 14px;
  flex-wrap: wrap;
}

.card-actions-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin-left: 4px;
}

.btn-card-action {
  height: 34px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.2px;
}

.btn-card-save {
  background: rgba(103, 158, 246, 0.12);
  border-color: rgba(103, 158, 246, 0.3);
  color: #679ef6;
}

.btn-card-save:hover {
  background: rgba(103, 158, 246, 0.22);
  border-color: rgba(103, 158, 246, 0.5);
  color: #89b4f8;
}

.btn-card-add {
  background: rgba(139, 195, 74, 0.1);
  border-color: rgba(139, 195, 74, 0.3);
  color: #8bc34a;
}

.btn-card-add:hover {
  background: rgba(139, 195, 74, 0.18);
  border-color: rgba(139, 195, 74, 0.5);
  color: #a5d56a;
}

/* ============================================================
   CREATIVES TABLE SECTION
============================================================ */
.creatives-table-container {
  background: #111;
  border-radius: 24px;
  padding: 20px;
}

.creatives-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.creatives-header h3 {
  color: #fe2c55;
  font-size: 1.15rem;
  white-space: nowrap;
  margin-right: 4px;
}

.search-wrapper {
  display: flex;
  align-items: center;
  background: #1e1e1e;
  border-radius: 40px;
  border: 1px solid #333;
  padding: 2px 6px 2px 14px;
  transition: 0.2s;
  flex: 1 1 160px;
  max-width: 280px;
  min-width: 140px;
}

.search-wrapper:focus-within {
  border-color: #fe2c55;
  box-shadow: 0 0 8px rgba(254,44,85,0.3);
}

.search-wrapper input {
  background: transparent;
  border: none;
  padding: 6px 0;
  color: #fff;
  font-size: 14px;
  flex: 1;
  outline: none;
  min-width: 0;
}

.search-wrapper input::placeholder { color: #888; }

.search-wrapper button {
  background: transparent;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  transition: 0.2s;
  flex-shrink: 0;
}

.search-wrapper button:hover {
  color: #fe2c55;
  transform: scale(1.1);
}

.creatives-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.creatives-controls select,
#statusFilter,
#monthFilter {
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 40px;
  padding: 0 14px;
  color: #fff;
  height: 38px;
  font-size: 13px;
  cursor: pointer;
  outline: none;
  font-family: inherit;
}

.creatives-controls select:focus,
#statusFilter:focus,
#monthFilter:focus {
  border-color: #fe2c55;
}

.btn-reset-filters {
  height: 38px;
  padding: 0 16px;
  border-radius: 40px;
  border: 1px solid rgba(254,44,85,0.3);
  background: transparent;
  color: #fe2c55;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s;
  display: none;
}
.btn-reset-filters.visible {
  display: inline-flex;
  align-items: center;
}
.btn-reset-filters:hover {
  background: rgba(254,44,85,0.12);
  border-color: rgba(254,44,85,0.7);
  transform: scale(1.04);
}

/* ── Sort pills ─────────────────────────────────────────────── */
.cr-sort-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 40px;
  padding: 3px 6px 3px 12px;
}

.cr-sort-label {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  user-select: none;
}

.cr-sort-pills {
  display: flex;
  gap: 3px;
}

.cr-sort-pill {
  height: 30px;
  padding: 0 12px;
  border-radius: 30px;
  border: none;
  background: transparent;
  color: #888;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cr-sort-pill:hover {
  background: #2a2a2a;
  color: #ddd;
}

.cr-sort-pill.active {
  background: linear-gradient(135deg, #fe2c55 0%, #c4003f 100%);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(254, 44, 85, 0.4);
}

/* ── Sortable column headers ─────────────────────────────────── */
.th-sortable {
  cursor: pointer !important;
  user-select: none;
  white-space: nowrap;
}

.th-sortable:hover {
  background: rgba(254,44,85,0.1) !important;
}

.th-sorted {
  background: rgba(254,44,85,0.08) !important;
}

/* Стрелка — сбрасываем gradient text чтобы она была видна */
.th-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1;
  /* Перекрываем -webkit-text-fill-color: transparent от #creativesTable thead th */
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #555 !important;
  background-clip: unset !important;
  animation: none !important;
  transition: -webkit-text-fill-color 0.2s;
}

.th-arrow.active {
  -webkit-text-fill-color: #fe2c55 !important;
}

.th-sorted .th-arrow {
  -webkit-text-fill-color: #fe2c55 !important;
}

/* ── Portal dropdown (рендерится на body, position:fixed) ─────── */
#crSortPortal {
  min-width: 210px;
  background: #1c1c1c;
  border: 1px solid #383838;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(254,44,85,0.08);
  overflow: hidden;
  animation: cr-drop-in 0.14s ease;
}

@keyframes cr-drop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.th-sort-opt {
  padding: 11px 18px;
  font-size: 13px;
  color: #ccc;
  cursor: pointer;
  transition: background 0.13s, color 0.13s;
  white-space: nowrap;
  font-weight: 500;
  /* Сброс gradient text */
  background-image: none;
  -webkit-text-fill-color: #ccc;
}

.th-sort-opt:hover {
  background: rgba(254,44,85,0.13) !important;
  -webkit-text-fill-color: #fe2c55;
}

.th-sort-opt.selected {
  background: rgba(254,44,85,0.08) !important;
  -webkit-text-fill-color: #fe2c55;
  font-weight: 700;
}

.th-sort-opt:active {
  background: rgba(254,44,85,0.22) !important;
}

.creatives-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.creatives-actions button,
.creatives-header > button {
  height: 38px;
  padding: 0 16px;
  border-radius: 40px;
  border: none;
  background: #2a2a2a;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.2s;
}

.creatives-actions button:hover,
.creatives-header > button:hover {
  background: #fe2c55;
  transform: translateY(-2px);
}

/* Import creatives button — soft pastel yellow */
.btn-cr-import {
  height: 38px;
  padding: 0 16px;
  border-radius: 40px;
  border: 1px solid rgba(255, 232, 168, 0.35);
  background: linear-gradient(135deg, #34301c 0%, #262214 100%);
  color: #ffe8a8;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(255, 232, 168, 0.10);
}
.btn-cr-import:hover {
  background: linear-gradient(135deg, #453f24 0%, #302a17 100%);
  color: #fff3cf;
  border-color: rgba(255, 232, 168, 0.65);
  box-shadow: 0 4px 16px rgba(255, 232, 168, 0.24);
  transform: translateY(-2px);
}

.cr-import-status {
  width: 100%;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 4px 2px;
  color: #aaa;
}

/* Add Creative primary button */
.btn-cr-add-main {
  background: linear-gradient(135deg, #fe2c55, #c8003f) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 12px rgba(254,44,85,0.25) !important;
}
.btn-cr-add-main:hover {
  background: linear-gradient(135deg, #ff4d6d, #fe2c55) !important;
  box-shadow: 0 4px 18px rgba(254,44,85,0.38) !important;
}

/* ── Add Creative Modal ────────────────────────────────────── */
.add-cr-overlay {
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s;
}
.add-cr-overlay.open { background: rgba(0,0,0,0.75); backdrop-filter: blur(6px); }
.add-cr-box {
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  width: 420px;
  max-width: calc(100vw - 32px);
  transform: translateY(24px) scale(0.97);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(.22,.68,0,1.2), opacity 0.25s;
}
.add-cr-overlay.open .add-cr-box { transform: translateY(0) scale(1); opacity: 1; }
.add-cr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #1e1e1e;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.add-cr-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: #1e1e1e;
  color: #888;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.add-cr-close:hover { background: #fe2c55; color: #fff; }
.add-cr-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.add-cr-label {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
  display: block;
}
.add-cr-input {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  padding: 10px 14px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.add-cr-input::placeholder { color: #555; }
.add-cr-input:focus {
  outline: none;
  border-color: #fe2c55;
  box-shadow: 0 0 0 3px rgba(254,44,85,0.12);
}
/* File upload zone */
.add-cr-file-zone {
  border: 2px dashed #2a2a2a;
  border-radius: 12px;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  overflow: hidden;
  position: relative;
}
.add-cr-file-zone:hover {
  border-color: #fe2c55;
  background: rgba(254,44,85,0.04);
}
.add-cr-file-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.add-cr-file-icon { font-size: 32px; }
.add-cr-file-hint { font-size: 12px; color: #555; }

.cr-file-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,0,0,.75);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.15s;
}
.cr-file-delete-btn:hover { background: #fe2c55; }

.add-cr-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.add-cr-footer {
  padding: 16px 20px;
  border-top: 1px solid #1e1e1e;
  display: flex;
  justify-content: flex-end;
}
.btn-add-cr-confirm {
  height: 40px;
  padding: 0 22px;
  border-radius: 40px;
  border: none;
  background: linear-gradient(135deg, #fe2c55, #c8003f);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
  box-shadow: 0 2px 12px rgba(254,44,85,0.25);
}
.btn-add-cr-confirm:hover {
  background: linear-gradient(135deg, #ff4d6d, #fe2c55);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(254,44,85,0.38);
}

/* ── Detail modal save button & actions row ───────────────── */
.cr-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-cr-save {
  height: 34px;
  padding: 0 16px;
  border-radius: 40px;
  border: 1px solid rgba(254,44,85,0.35);
  background: rgba(254,44,85,0.1);
  color: #fe2c55;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: 0.2s;
}
.btn-cr-save:hover {
  background: rgba(254,44,85,0.2);
  border-color: #fe2c55;
}

.btn-cr-download-mp4 {
  height: 34px;
  padding: 0 16px;
  border-radius: 40px;
  border: 1px solid rgba(37,244,238,0.35);
  background: rgba(37,244,238,0.08);
  color: #25f4ee;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: 0.2s;
}
.btn-cr-download-mp4:hover {
  background: rgba(37,244,238,0.18);
  border-color: #25f4ee;
}

/* ── Editable cells in detail table ──────────────────────── */
.cr-edit-input {
  width: 90px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  padding: 6px 10px;
  text-align: center;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cr-edit-input:focus {
  outline: none;
  border-color: #fe2c55;
  box-shadow: 0 0 0 2px rgba(254,44,85,0.15);
}
.cr-status-select {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  padding: 5px 8px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.cr-status-select:focus { outline: none; border-color: #fe2c55; }

/* Delete row button in detail table */
.cr-row-del-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  color: #ef4444;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  padding: 0;
}
.cr-row-del-btn:hover {
  background: rgba(239, 68, 68, 0.85);
  border-color: #ef4444;
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}
.cr-row-del-btn:active { transform: scale(0.95); }

.cr-row-dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(37, 244, 238, 0.08);
  border: 1px solid rgba(37, 244, 238, 0.25);
  border-radius: 8px;
  color: #25f4ee;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  padding: 0;
  margin-left: 4px;
}
.cr-row-dl-btn:hover {
  background: rgba(37, 244, 238, 0.75);
  border-color: #25f4ee;
  color: #111;
  transform: scale(1.08);
  box-shadow: 0 0 10px rgba(37, 244, 238, 0.45);
}
.cr-row-dl-btn:active { transform: scale(0.95); }
.cr-row-dl-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Bulk-select checkbox column ────────────────────────── */
.th-cr-check, .td-cr-check {
  width: 32px;
  min-width: 32px;
  text-align: center;
  padding: 0 4px !important;
}
.cr-row-check {
  width: 16px;
  height: 16px;
  accent-color: #25f4ee;
  cursor: pointer;
  vertical-align: middle;
}
#crCheckAll {
  width: 16px;
  height: 16px;
  accent-color: #25f4ee;
  cursor: pointer;
}

/* ── Bulk download button ───────────────────────────────── */
.btn-bulk-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(37,244,238,0.15), rgba(37,244,238,0.08));
  border: 1px solid rgba(37,244,238,0.5);
  border-radius: 10px;
  color: #25f4ee;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  white-space: nowrap;
}
.btn-bulk-dl:hover {
  background: linear-gradient(135deg, rgba(37,244,238,0.35), rgba(37,244,238,0.18));
  box-shadow: 0 0 14px rgba(37,244,238,0.35);
  transform: translateY(-1px);
}
.btn-bulk-dl:active { transform: scale(0.97); }
.btn-bulk-dl:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Add-day form inside detail modal ────────────────────── */
.cr-add-day-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid #1e1e1e;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.02);
  border-radius: 0 0 12px 12px;
}
.cr-add-day-label {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  font-weight: 500;
}
.cr-input-field {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  padding: 7px 10px;
  box-sizing: border-box;
  transition: border-color 0.2s;
  min-width: 0;
  flex: 1;
}
.cr-input-field:focus {
  outline: none;
  border-color: #fe2c55;
  box-shadow: 0 0 0 2px rgba(254,44,85,0.12);
}
.btn-cr-add-day {
  height: 34px;
  padding: 0 14px;
  border-radius: 40px;
  border: none;
  background: #fe2c55;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.2s;
}
.btn-cr-add-day:hover { background: #c8003f; transform: translateY(-1px); }

/* ============================================================
   TABLE (shared)
============================================================ */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 60vh;
  border-radius: 16px;
  -webkit-overflow-scrolling: touch;
}

#creativesTable,
#dataTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: #111;
  min-width: 620px;
}

#creativesTable th, #creativesTable td,
#dataTable th, #dataTable td {
  padding: 12px 10px;
  text-align: center;
  border: 1px solid #2a2a2a;
  font-size: 13px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creativesTable th,
#dataTable th {
  background: #1a1a1a;
  color: #fe2c55;
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

#creativesTable thead,
#dataTable thead {
  position: sticky;
  top: 0;
  z-index: 4;
}

#creativesTable tbody tr,
#dataTable tbody tr {
  transition: background 0.2s;
}

#creativesTable tbody tr:hover,
#dataTable tbody tr:hover {
  background: #1e1e1e;
}

/* Creatives table column widths (12 cols: checkbox, Месяц, Статус, Название, Превью,
   Показы(σ), Клики(σ), CTR(%), Кол-во дней, Лиды, Расход₽, delete) */
#creativesTable th:nth-child(1),  #creativesTable td:nth-child(1)  { width: 3%;  } /* ☑ */
#creativesTable th:nth-child(2),  #creativesTable td:nth-child(2)  { width: 7%;  } /* Месяц */
#creativesTable th:nth-child(3),  #creativesTable td:nth-child(3)  { width: 8%;  } /* Статус */
#creativesTable th:nth-child(4),  #creativesTable td:nth-child(4)  { width: 20%; } /* Название */
#creativesTable th:nth-child(5),  #creativesTable td:nth-child(5)  { width: 6%;  } /* Превью */
#creativesTable th:nth-child(6),  #creativesTable td:nth-child(6)  { width: 9%;  } /* Показы (σ) */
#creativesTable th:nth-child(7),  #creativesTable td:nth-child(7)  { width: 9%;  } /* Клики (σ) */
#creativesTable th:nth-child(8),  #creativesTable td:nth-child(8)  { width: 7%;  } /* CTR (%) */
#creativesTable th:nth-child(9),  #creativesTable td:nth-child(9)  { width: 11%; } /* Кол-во дней */
#creativesTable th:nth-child(10), #creativesTable td:nth-child(10) { width: 7%;  } /* Лиды */
#creativesTable th:nth-child(11), #creativesTable td:nth-child(11) { width: 9%;  } /* Расход ₽ */
#creativesTable th:nth-child(12), #creativesTable td:nth-child(12) { width: 4%; text-align: center; } /* удалить */

/* Analyst-only columns: hidden by default, visible for admin/analyst roles */
.cr-col-analyst-only { display: none; }
#creativesTable.cr-show-analyst-cols .cr-col-analyst-only { display: table-cell; }
.cr-col-admin-only { display: none; }
#creativesTable.cr-show-admin-cols .cr-col-admin-only { display: table-cell; }

/* Editable cell wrapper (Лиды / Расход $) */
.cr-editable-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.cr-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.15s;
  padding: 0 2px;
  line-height: 1;
}
#creativesTable tbody tr:hover .cr-edit-btn { opacity: 1; }

/* Leads table column widths — текст шире, цифры уже */
#dataTable th:nth-child(1), #dataTable td:nth-child(1) { width: 14%; } /* Дата */
#dataTable th:nth-child(2), #dataTable td:nth-child(2) { width: 8%;  } /* Лиды */
#dataTable th:nth-child(3), #dataTable td:nth-child(3) { width: 10%; } /* Расход $ */
#dataTable th:nth-child(4), #dataTable td:nth-child(4) { width: 10%; } /* Расход ₽ */
#dataTable th:nth-child(5), #dataTable td:nth-child(5) { width: 10%; } /* Показы */
#dataTable th:nth-child(6), #dataTable td:nth-child(6) { width: 9%;  } /* Клики */
#dataTable th:nth-child(7), #dataTable td:nth-child(7) { width: 8%;  } /* CTR */
#dataTable th:nth-child(8), #dataTable td:nth-child(8) { width: 17%; } /* Релев. лиды */
#dataTable th:nth-child(9), #dataTable td:nth-child(9) { width: 5%; text-align: center; } /* удалить */

/* Скрыть колонку "Удалить" для не-админов */
body.no-del-col #creativesTable th:last-child,
body.no-del-col #creativesTable td:last-child,
body.no-del-col #dataTable th:last-child,
body.no-del-col #dataTable td:last-child,
body.no-del-col #countriesTable th:last-child,
body.no-del-col #countriesTable td:last-child {
  display: none !important;
}

/* Countries table column widths */
#countriesTable th:nth-child(1), #countriesTable td:nth-child(1) { width: 20%; } /* Страна */
#countriesTable th:nth-child(2), #countriesTable td:nth-child(2) { width: 16%; } /* Кол-во кампаний */
#countriesTable th:nth-child(3), #countriesTable td:nth-child(3) { width: 14%; } /* Затраты */
#countriesTable th:nth-child(4), #countriesTable td:nth-child(4) { width: 14%; } /* Кол-во лидов */
#countriesTable th:nth-child(5), #countriesTable td:nth-child(5) { width: 18%; } /* Эффективность */
#countriesTable th:nth-child(6), #countriesTable td:nth-child(6) { width: 10%; } /* Рейтинг */

/* ── Редактируемые ячейки в таблице стран ─────────────────── */
.country-editable-cell {
  position: relative;
  cursor: pointer;
}
.country-editable-cell:hover { background: rgba(37,244,238,0.05) !important; }
.country-cell-val { font-weight: 500; }
.country-cell-edit-hint {
  display: none;
  margin-left: 6px;
  color: #25f4ee;
  font-size: 11px;
  opacity: 0.7;
}
.country-editable-cell:hover .country-cell-edit-hint { display: inline; }
.country-inline-input {
  width: 90%;
  background: rgba(37,244,238,0.08);
  border: 1px solid rgba(37,244,238,0.5);
  border-radius: 6px;
  color: #e4e4e4;
  padding: 4px 7px;
  font-size: 13px;
  outline: none;
}
.country-inline-input:focus { border-color: #25f4ee; box-shadow: 0 0 8px rgba(37,244,238,0.3); }
.country-efficiency-cell { color: #a3e635; font-weight: 600; font-size: 12px; }
.country-rank-badge {
  display: inline-block;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #9ca3af;
}
.country-rank-badge.country-rank-top {
  background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(251,191,36,0.08));
  border-color: rgba(251,191,36,0.4);
  color: #fbbf24;
}

/* Lead row inline edit */
#dataTable tbody tr.lead-editing {
  background: rgba(37, 244, 238, 0.06) !important;
}
#dataTable tbody tr.lead-editing td {
  padding: 6px 6px;
  vertical-align: middle;
}
.lead-edit-input {
  background: #1a1a1a;
  border: 1px solid #25f4ee55;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  padding: 5px 6px;
  box-sizing: border-box;
  text-align: center;
  transition: border-color 0.2s;
  -moz-appearance: textfield;
}
.lead-edit-input::-webkit-outer-spin-button,
.lead-edit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lead-edit-input:focus { outline: none; border-color: #25f4ee; box-shadow: 0 0 0 2px rgba(37,244,238,0.12); }
.lead-edit-calc { color: #aaa; font-size: 12px; }
.lead-save-btn, .lead-cancel-btn {
  width: 26px; height: 26px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
  padding: 0;
}
.lead-save-btn { background: rgba(37,244,238,0.15); color: #25f4ee; }
.lead-save-btn:hover { background: #25f4ee; color: #000; transform: scale(1.1); }
.lead-cancel-btn { background: rgba(239,68,68,0.12); color: #ef4444; }
.lead-cancel-btn:hover { background: #ef4444; color: #fff; transform: scale(1.1); }

/* Table action buttons */
.delete-row-btn,
.delete-creative-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  color: #ef4444;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  padding: 0;
}

.delete-row-btn:hover,
.delete-creative-btn:hover {
  background: rgba(239, 68, 68, 0.85);
  border-color: #ef4444;
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}
.delete-row-btn:active,
.delete-creative-btn:active { transform: scale(0.95); }

.save-row-btn {
  background: #6366f1;
  border: none;
  border-radius: 20px;
  padding: 4px 10px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  transition: 0.2s;
  margin-right: 4px;
}

.save-row-btn:hover {
  background: #4f46e5;
  transform: scale(0.95);
}

.ctr-cell {
  color: #25f4ee;
  font-weight: 600;
}

/* Editable cells */
#creativesTable .editable-cell {
  cursor: text;
  transition: 0.2s;
}

#creativesTable .editable-cell:focus,
#creativesTable .editable-cell.editing {
  background: #2a2a2a;
  outline: 1px solid #fe2c55;
  border-radius: 4px;
}

/* Creative preview image */
#creativesTable .preview-img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #2a2a2a;
  transition: 0.2s;
}

#creativesTable .preview-img:hover {
  transform: scale(2);
  border-color: #fe2c55;
  z-index: 10;
  position: relative;
}

/* Toggle switch (table) */
.switch-table {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}

.switch-table input { opacity: 0; width: 0; height: 0; }

.switch-table .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #444;
  border-radius: 34px;
  transition: 0.3s;
}

.switch-table .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.3s;
}

.switch-table input:checked + .slider { background-color: #25f4ee; }
.switch-table input:checked + .slider:before { transform: translateX(18px); }
.switch-table input:disabled + .slider { opacity: 0.5; cursor: not-allowed; }

/* Toggle switch (card) */
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #333;
  border-radius: 34px;
  transition: 0.2s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.2s;
}

input:checked + .slider { background-color: #fe2c55; }
input:checked + .slider:before { transform: translateX(22px); }

.cr-toggle-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  vertical-align: middle;
}

.cr-toggle-cell .switch-table {
  flex-shrink: 0;
  vertical-align: middle;
}

.status-text {
  font-size: 12px;
  color: #ccc;
  white-space: nowrap;
  line-height: 1;
}

/* ============================================================
   LEADS TABLE SECTION
============================================================ */
/* ─── Таблица стран ────────────────────────────────────────── */
.countries-table-container {
  background: linear-gradient(160deg, #0e0e16 0%, #111118 100%);
  border-radius: 24px;
  padding: 24px;
  border: 1px solid rgba(37, 244, 238, 0.1);
  box-shadow: 0 0 40px rgba(37, 244, 238, 0.04), 0 4px 24px rgba(0,0,0,0.5);
}

.countries-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.countries-header h3 {
  color: #25f4ee;
  font-size: 1.15rem;
  white-space: nowrap;
  text-shadow: 0 0 16px rgba(37,244,238,0.4);
  letter-spacing: 0.5px;
}

.countries-controls {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

#countryMonthFilter {
  background: rgba(37, 244, 238, 0.06);
  border: 1px solid rgba(37, 244, 238, 0.2);
  border-radius: 8px;
  color: #25f4ee;
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
  max-width: 200px;
}
#countryMonthFilter:hover { border-color: rgba(37,244,238,0.5); }
#countryMonthFilter option { background: #111; color: #ccc; }

.country-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.country-search-icon {
  position: absolute;
  left: 9px;
  font-size: 12px;
  pointer-events: none;
  line-height: 1;
}
.country-search-input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #ccc;
  font-size: 12px;
  padding: 6px 10px 6px 28px;
  width: 160px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, width 0.25s;
}
.country-search-input::placeholder { color: #555; }
.country-search-input:focus {
  border-color: rgba(37,244,238,0.45);
  box-shadow: 0 0 0 2px rgba(37,244,238,0.08);
  width: 200px;
  color: #fff;
}

.country-add-wrap {
  display: none;
  align-items: center;
  gap: 6px;
}
body.view-admin .country-add-wrap { display: flex; }
.country-add-wrap .country-search-input {
  padding-left: 10px;
  width: 150px;
}
.country-add-wrap .country-search-input:focus { width: 190px; }

.country-month-cell {
  font-size: 11px !important;
  color: #25f4ee !important;
  opacity: 0.75;
  white-space: nowrap;
}

/* Country Detail Modal */
.country-detail-box {
  max-width: 680px;
  width: 95%;
  max-height: 85vh;
  overflow-y: auto;
}

.country-daily-section {
  margin-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 14px;
}
.country-daily-heading {
  font-size: 13px;
  font-weight: 600;
  color: #25f4ee;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}

/* ── Форма "Добавить день" для стран ── */
.country-add-day-wrap {
  margin-top: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 16px;
}
.country-add-day-title {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}
.country-add-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  align-items: end;
}
.cadf {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cadf-label {
  font-size: 11px;
  color: #888;
  font-weight: 500;
  white-space: nowrap;
}
.cadf-input {
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  padding: 9px 12px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cadf-input:focus {
  outline: none;
  border-color: #fe2c55;
  box-shadow: 0 0 0 2px rgba(254,44,85,0.12);
}
.cadf-readonly {
  color: #25f4ee;
  opacity: 0.75;
  cursor: default;
}
.cadf-btn button {
  width: 100%;
  height: 38px;
  border-radius: 40px;
  border: none;
  background: #fe2c55;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.2s;
}
.cadf-btn button:hover { background: #c8003f; transform: translateY(-1px); }

.country-chart-legend {
  display: flex;
  gap: 18px;
  margin-top: 4px;
}
.country-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #888;
}
.country-legend-item span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

#countriesTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

#countriesTable thead th {
  background: #0f0f18;
  color: #25f4ee;
  font-weight: 700;
  padding: 12px 16px;
  text-align: center;
  border-top: 1px solid rgba(37, 244, 238, 0.15);
  border-bottom: 1px solid rgba(37, 244, 238, 0.15);
  border-right: 1px solid rgba(37, 244, 238, 0.08);
  white-space: nowrap;
  letter-spacing: 0.4px;
  font-size: 12px;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 2;
}

#countriesTable thead th:first-child {
  border-left: 1px solid rgba(37, 244, 238, 0.08);
  border-radius: 8px 0 0 0;
  text-align: left;
}

#countriesTable thead th:last-child {
  border-radius: 0 8px 0 0;
}

#countriesTable tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.18s;
}

#countriesTable tbody tr:last-child td {
  border-bottom: none;
}

#countriesTable tbody td {
  padding: 12px 16px;
  color: #bbb;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

#countriesTable tbody td:first-child {
  text-align: left;
  border-left: 1px solid rgba(255,255,255,0.05);
  font-weight: 500;
  color: #ddd;
}

#countriesTable tbody tr:hover td {
  background: rgba(37, 244, 238, 0.03);
}

/* ── Топ-1 ── */
#countriesTable tbody tr.country-top3:nth-child(1) {
  background: linear-gradient(90deg, rgba(255,215,0,0.08) 0%, transparent 100%);
}
#countriesTable tbody tr.country-top3:nth-child(1):hover td {
  background: rgba(255,215,0,0.07);
}
#countriesTable tbody tr.country-top3:nth-child(1) td {
  color: #fde68a;
  border-bottom-color: rgba(255,215,0,0.1);
}
#countriesTable tbody tr.country-top3:nth-child(1) td:first-child {
  border-left: 3px solid #f59e0b;
  color: #fde68a;
}

/* ── Топ-2 ── */
#countriesTable tbody tr.country-top3:nth-child(2) {
  background: linear-gradient(90deg, rgba(192,192,192,0.07) 0%, transparent 100%);
}
#countriesTable tbody tr.country-top3:nth-child(2):hover td {
  background: rgba(192,192,192,0.05);
}
#countriesTable tbody tr.country-top3:nth-child(2) td {
  color: #d1d5db;
  border-bottom-color: rgba(192,192,192,0.1);
}
#countriesTable tbody tr.country-top3:nth-child(2) td:first-child {
  border-left: 3px solid #9ca3af;
  color: #e5e7eb;
}

/* ── Топ-3 ── */
#countriesTable tbody tr.country-top3:nth-child(3) {
  background: linear-gradient(90deg, rgba(205,127,50,0.07) 0%, transparent 100%);
}
#countriesTable tbody tr.country-top3:nth-child(3):hover td {
  background: rgba(205,127,50,0.05);
}
#countriesTable tbody tr.country-top3:nth-child(3) td {
  color: #d97706;
  border-bottom-color: rgba(205,127,50,0.1);
}
#countriesTable tbody tr.country-top3:nth-child(3) td:first-child {
  border-left: 3px solid #b45309;
  color: #fbbf24;
}

/* Остальные строки — обычный левый бордер */
#countriesTable tbody tr:not(.country-top3) td:first-child {
  border-left: 3px solid transparent;
}

.country-rank-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  color: #555;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.country-rank-badge.country-rank-top {
  background: rgba(255, 215, 0, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(255, 215, 0, 0.25);
  box-shadow: 0 0 8px rgba(255,215,0,0.15);
}

/* ─── Поле стран в детальной модалке ─────────────────────── */
.cr-country-bar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 24px;
  background: rgba(37, 244, 238, 0.04);
  border-top: 1px solid rgba(37, 244, 238, 0.1);
  border-bottom: 1px solid rgba(37, 244, 238, 0.1);
  flex-wrap: wrap;
}

.cr-country-label {
  color: #25f4ee;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding-top: 6px;
}

.cr-country-tags-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.cr-country-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
}

.cr-country-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(37, 244, 238, 0.12);
  border: 1px solid rgba(37, 244, 238, 0.35);
  border-radius: 20px;
  padding: 3px 10px 3px 12px;
  color: #25f4ee;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.cr-country-pill-rm {
  background: none;
  border: none;
  color: rgba(37, 244, 238, 0.55);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.cr-country-pill-rm:hover {
  color: #fe2c55;
}

.cr-country-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.cr-country-autocomplete-wrap {
  position: relative;
  flex: 1;
  max-width: 280px;
}

.cr-country-search {
  width: 100%;
  background: #1a1a2e;
  border: 1px solid rgba(37, 244, 238, 0.2);
  border-radius: 8px;
  color: #e0e0e0;
  font-size: 13px;
  padding: 5px 12px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.cr-country-search:focus {
  border-color: #25f4ee;
  box-shadow: 0 0 8px rgba(37, 244, 238, 0.2);
}

.cr-country-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  min-width: 180px;
  background: #1a1a2e;
  border: 1px solid rgba(37, 244, 238, 0.3);
  border-radius: 10px;
  z-index: 9999;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.cr-country-dd-item {
  padding: 8px 14px;
  color: #ccc;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.cr-country-dd-item:hover {
  background: rgba(37, 244, 238, 0.1);
  color: #25f4ee;
}
.cr-country-dd-item strong {
  color: #25f4ee;
  font-weight: 700;
}

.cr-country-add-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(37, 244, 238, 0.35);
  background: rgba(37, 244, 238, 0.08);
  color: #25f4ee;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.cr-country-add-btn:hover {
  background: rgba(37, 244, 238, 0.22);
  transform: scale(1.12);
}

.leads-table-container {
  background: #111;
  border-radius: 24px;
  padding: 20px;
}

.leads-table-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.leads-table-header h3 {
  color: #fe2c55;
  font-size: 1.15rem;
  white-space: nowrap;
  margin-right: 4px;
  flex: 1 1 auto;
}

.leads-table-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── Добавить лид ──────────────────────────────────────── */
.btn-lead-add {
  position: relative;
  overflow: hidden;
  height: 38px;
  padding: 0 20px;
  border-radius: 40px;
  border: none;
  background: linear-gradient(135deg, #fe2c55 0%, #c8003f 45%, #ff6b6b 100%);
  background-size: 200% 200%;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.3px;
  white-space: nowrap;
  box-shadow: 0 3px 14px rgba(254,44,85,0.4);
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s;
  animation: lead-add-bg-shift 5s ease infinite;
}
.btn-lead-add:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 28px rgba(254,44,85,0.55), 0 0 0 2px rgba(254,44,85,0.25);
}
.btn-lead-add::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.28) 50%,
    transparent 100%);
  transform: translateX(-100%);
  transition: transform 0s;
  border-radius: inherit;
}
.btn-lead-add:hover::before {
  transform: translateX(200%);
  transition: transform 0.55s ease;
}

@keyframes lead-add-bg-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─── Экспорт ───────────────────────────────────────────── */
.btn-lead-export {
  position: relative;
  overflow: hidden;
  height: 38px;
  padding: 0 18px;
  border-radius: 40px;
  border: 1px solid rgba(52,211,153,0.3);
  background: linear-gradient(135deg, #111e1a 0%, #0c1714 100%);
  color: #34d399;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 10px rgba(52,211,153,0.1), inset 0 1px 0 rgba(52,211,153,0.07);
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s, border-color 0.18s, color 0.18s;
}
.btn-lead-export:hover {
  transform: translateY(-3px) scale(1.05);
  border-color: rgba(52,211,153,0.65);
  color: #6ee7b7;
  box-shadow: 0 6px 24px rgba(52,211,153,0.28), 0 0 0 2px rgba(52,211,153,0.15), inset 0 1px 0 rgba(52,211,153,0.12);
}
.btn-lead-export::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(52,211,153,0.22) 50%,
    transparent 100%);
  transform: translateX(-100%);
  transition: transform 0s;
  border-radius: inherit;
}
.btn-lead-export:hover::before {
  transform: translateX(200%);
  transition: transform 0.55s ease;
}

/* ─── Импорт (нежно-фиолетовый) ────────────────────────────────────────────── */
#importLeadsLabel {
  position: relative;
  overflow: hidden;
  height: 38px;
  padding: 0 18px;
  border-radius: 40px;
  border: 1px solid rgba(201, 168, 255, 0.32);
  background: linear-gradient(135deg, #241a38 0%, #17102a 100%);
  color: #c9a8ff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 10px rgba(201, 168, 255, 0.10), inset 0 1px 0 rgba(201, 168, 255, 0.05);
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s, border-color 0.18s, color 0.18s;
}
#importLeadsLabel:hover {
  transform: translateY(-3px) scale(1.05);
  border-color: rgba(201, 168, 255, 0.65);
  color: #e2ceff;
  box-shadow: 0 6px 22px rgba(201, 168, 255, 0.26), 0 0 0 2px rgba(201, 168, 255, 0.16), inset 0 1px 0 rgba(201, 168, 255, 0.1);
}
#importLeadsLabel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 168, 255, 0.22) 50%,
    transparent 100%);
  transform: translateX(-100%);
  transition: transform 0s;
  border-radius: inherit;
  pointer-events: none;
}
#importLeadsLabel:hover::before {
  transform: translateX(200%);
  transition: transform 0.55s ease;
}

/* Modal lead grid */
.add-lead-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-bottom: 10px;
}

.add-lead-auto {
  color: #888;
  font-size: 11px;
  font-weight: normal;
}

.add-lead-readonly {
  background: #1a1a1a !important;
  color: #888 !important;
  cursor: default;
}

/* ─── Итоговая строка таблицы лидов ────────────────────── */
#dataTable tfoot .leads-totals-row {
  background: linear-gradient(90deg, #1a1012 0%, #160e14 60%, #0e1616 100%);
  border-top: 2px solid rgba(254,44,85,0.35);
}

#dataTable tfoot .leads-totals-row td {
  padding: 11px 10px;
  font-size: 13px;
  font-weight: 700;
  color: #f0f0f0;
  letter-spacing: 0.2px;
  border-bottom: none;
}

#dataTable tfoot .leads-totals-row .leads-totals-label {
  color: #fe2c55;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

#dataTable tfoot .leads-totals-row .ctr-cell {
  color: #25f4ee;
  font-weight: 700;
}

/* ============================================================
   LEADS LINE CHART
============================================================ */
.leads-chart-container {
  background: #111;
  border-radius: 24px;
  padding: 20px;
  text-align: center;
}

.leads-chart-container h3 {
  color: #fe2c55;
  margin-bottom: 16px;
  font-size: 1.15rem;
}

#leadsLineChart {
  max-width: 100%;
  height: auto !important;
  background: #1a1a1a;
  border-radius: 18px;
  padding: 10px;
}

/* ============================================================
   CREATIVE CARDS (carousel view – if used)
============================================================ */
.creative-item {
  background: #0f0f0f;
  border-radius: 22px;
  width: 260px;
  flex-shrink: 0;
  overflow: hidden;
  transition: 0.2s;
  border: 1px solid #2a2a2a;
}

.creative-item:hover {
  transform: translateY(-5px);
  border-color: #fe2c55;
}

.creative-preview {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #000;
}

.creative-video,
.creative-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creative-info {
  padding: 14px 12px;
}

.creative-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creative-stats {
  margin: 10px 0;
  font-size: 12px;
  line-height: 1.6;
  color: #ccc;
}

.creative-stats .edit { color: #fe2c55; }

.creative-note { margin-top: 8px; }

.creative-note textarea {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 6px 10px;
  color: #fff;
  font-size: 12px;
  resize: vertical;
  min-height: 40px;
  font-family: inherit;
}

.creative-note button {
  background: #2a2a2a;
  border: none;
  padding: 4px 12px;
  border-radius: 20px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  margin-top: 4px;
  transition: 0.2s;
}

.creative-note button:hover { background: #fe2c55; }

.creative-buttons {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

.creative-buttons button {
  background: #2a2a2a;
  border: none;
  padding: 6px 12px;
  border-radius: 20px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  transition: 0.2s;
}

.creative-buttons button:hover {
  background: #fe2c55;
  transform: translateY(-2px);
}

/* ============================================================
   RESTORE PANEL
============================================================ */
.restore-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  padding: 14px 18px;
}

.btn-restore {
  height: 38px;
  padding: 0 18px;
  border-radius: 40px;
  border: none;
  background: #25f4ee;
  color: #000;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.2s;
  flex-shrink: 0;
}

.btn-restore:hover {
  background: #1de0da;
  transform: translateY(-2px);
}

.btn-restore:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.restore-status {
  font-size: 13px;
  font-weight: 500;
  color: #aaa;
}

.restore-hint {
  font-size: 12px;
  color: #555;
  flex: 1;
}

/* ============================================================
   MEDIA THUMBNAIL (таблица креативов)
============================================================ */
.media-thumb-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  transition: transform 0.2s;
}

.media-thumb-wrap:hover {
  transform: scale(1.06);
}

.media-thumb-wrap .preview-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  border: 1px solid #2a2a2a;
  transition: border-color 0.2s;
}

.media-thumb-wrap:hover .preview-img {
  border-color: #fe2c55;
}

.media-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 0 8px rgba(0,0,0,0.9);
  background: rgba(0,0,0,0.28);
  border-radius: 8px;
  pointer-events: none;
  transition: background 0.2s;
}

.media-thumb-wrap:hover .media-play-icon {
  background: rgba(254,44,85,0.45);
}

/* ============================================================
   MEDIA LIGHTBOX
============================================================ */
.media-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  transition: background 0.25s ease;
}

.media-lightbox-overlay.visible {
  background: rgba(0,0,0,0.88);
}

.media-lightbox-box {
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  overflow: hidden;
  max-width: 92vw;
  max-height: 92vh;
  min-width: min(360px, 92vw);
  display: flex;
  flex-direction: column;
  transform: scale(0.92);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  width: fit-content;
}

.media-lightbox-overlay.visible .media-lightbox-box {
  transform: scale(1);
  opacity: 1;
}

.media-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #222;
  gap: 12px;
  flex-shrink: 0;
}

.media-lightbox-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

.media-lightbox-close {
  background: #2a2a2a;
  border: none;
  color: #aaa;
  font-size: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: 0.2s;
  line-height: 1;
}

.media-lightbox-close:hover {
  background: #fe2c55;
  color: #fff;
}

.media-lightbox-dl {
  background: rgba(37,244,238,0.1);
  border: 1px solid rgba(37,244,238,0.4);
  color: #25f4ee;
  font-size: 12px;
  font-weight: 700;
  height: 32px;
  padding: 0 14px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  transition: 0.2s;
  letter-spacing: 0.3px;
}
.media-lightbox-dl:hover {
  background: rgba(37,244,238,0.22);
  border-color: #25f4ee;
}
.media-lightbox-header-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.media-lightbox-content {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  flex: 1;
  background: #000;
  min-height: 200px;
}

.media-lightbox-image {
  max-width: 88vw;
  max-height: 80vh;
  object-fit: contain;
  display: block;
  border-radius: 0 0 18px 18px;
}

.media-lightbox-video {
  max-width: 88vw;
  max-height: 80vh;
  min-width: min(360px, 88vw);
  outline: none;
  display: block;
  border-radius: 0 0 18px 18px;
  background: #000;
}

@media (max-width: 600px) {
  .media-lightbox-image,
  .media-lightbox-video {
    max-width: 96vw;
    max-height: 75vh;
  }

  .media-lightbox-title {
    max-width: 200px;
  }
}

/* ============================================================
   MODAL (TikTok Settings)
============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.82);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

.modal-box {
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  padding: 28px 28px 24px;
  width: 100%;
  max-width: 480px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: #aaa;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: 0.2s;
}

.modal-close:hover { color: #fff; }

.modal-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.modal-project-label {
  color: #fe2c55;
  font-size: 13px;
  margin-bottom: 18px;
}

.modal-label {
  font-size: 12px;
  color: #aaa;
  display: block;
  margin-bottom: 4px;
  margin-top: 12px;
}

.modal-label:first-of-type { margin-top: 0; }

.label-hint { color: #555; }

.modal-input {
  width: 100%;
  padding: 10px 14px;
  background: #222;
  border: 1px solid #333;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  outline: none;
  font-family: inherit;
  transition: 0.2s;
}

.modal-input:focus { border-color: #fe2c55; }

.modal-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.modal-btn {
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: 0.2s;
  white-space: nowrap;
}

.modal-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }

.modal-btn-primary { background: #fe2c55; color: #fff; }
.modal-btn-tiktok  { background: #010101; color: #69c9d0; border: 1px solid #69c9d0; }
.modal-btn-cancel  { background: #222; color: #aaa; }

.modal-status {
  margin-top: 12px;
  font-size: 12px;
  color: #aaa;
}

/* ============================================================
   TABLET — max 1024px
============================================================ */
@media (max-width: 1024px) {
  .plan {
    grid-template-columns: repeat(4, 1fr);
  }

  .plan-col-1 { grid-column: span 1; }
  .plan-col-2 { grid-column: span 2; }
  .plan-col-3 { grid-column: span 4; }
  .plan-chart.plan-col-2 { grid-column: span 2; }
}

/* ============================================================
   MOBILE — max 768px
============================================================ */
@media (max-width: 768px) {
  #app {
    padding: 12px 12px 32px;
  }

  /* Tabs */
  .tab {
    flex: 1 1 auto;
    min-width: 80px;
    padding: 8px 12px;
    font-size: 13px;
  }

  /* Top bar: stack vertically */
  .top-bar {
    flex-direction: column;
    align-items: stretch;
    border-radius: 16px;
    padding: 12px;
    gap: 10px;
  }

  .user-block {
    justify-content: center;
    width: 100%;
  }

  .buttons-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
  }

  .btn-action {
    width: 100%;
    font-size: 12px;
    padding: 0 8px;
  }

  /* Plan */
  .plan {
    grid-template-columns: 1fr;
    padding: 14px;
    gap: 12px;
  }

  .plan-col-1, .plan-col-2, .plan-col-3,
  .plan-chart.plan-col-2 { grid-column: 1; }

  /* Date bar */
  .date-bar {
    border-radius: 16px;
    padding: 12px;
    flex-direction: column;
  }

  .date-bar input,
  .date-btn {
    width: 100%;
    flex: none;
  }

  /* Cards */
  .cards {
    gap: 10px;
  }

  /* Creatives header */
  .creatives-header {
    flex-direction: column;
    align-items: stretch;
  }

  .search-wrapper {
    max-width: 100%;
    width: 100%;
  }

  .creatives-controls {
    width: 100%;
  }

  .creatives-controls select,
  #statusFilter {
    flex: 1;
    width: 100%;
  }

  .cr-sort-bar {
    width: 100%;
    flex-wrap: wrap;
  }

  .cr-sort-pills {
    flex-wrap: wrap;
  }

  .cr-sort-pill {
    font-size: 11px;
    padding: 0 9px;
  }

  .creatives-actions {
    width: 100%;
  }

  .creatives-actions button {
    flex: 1;
  }
}

/* ============================================================
   SMALL MOBILE — max 480px
============================================================ */
@media (max-width: 480px) {
  .buttons-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .cards {
    gap: 8px;
  }

  .plan-grid {
    gap: 8px;
  }

  .tabs {
    gap: 6px;
  }

  .tab {
    font-size: 12px;
    padding: 8px 10px;
    min-width: 70px;
  }

  .tt-balance {
    padding: 8px 16px;
    gap: 8px;
    font-size: 12px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .modal-box {
    padding: 20px 16px 18px;
  }

  .modal-buttons {
    flex-direction: column;
  }

  .modal-btn {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   SMART NOTIFICATIONS
============================================================ */

/* ── Bell button ── */
.btn-notif-bell {
  position: relative;
  overflow: visible !important;
  background: #1a1a1a;
  border: 1px solid #333;
  color: #fff;
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  line-height: 1;
}
.btn-notif-bell:hover { background: #2a2a2a; }
.btn-notif-bell.has-notifs { animation: bell-shake 2s ease infinite; }

@keyframes bell-shake {
  0%,100%  { transform: rotate(0deg); }
  5%       { transform: rotate(-15deg); }
  10%      { transform: rotate(15deg); }
  15%      { transform: rotate(-10deg); }
  20%      { transform: rotate(10deg); }
  25%      { transform: rotate(0deg); }
}

/* ── Badge ── */
.notif-badge {
  position: absolute;
  top: -8px; right: -8px;
  background: #fe2c55;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  min-width: 20px; height: 20px;
  border-radius: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid #0f0f0f;
  line-height: 1;
  box-sizing: border-box;
  z-index: 2;
  animation: badge-pop 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  pointer-events: none;
}
.notif-badge.visible {
  display: flex;
}
@keyframes badge-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ── Overlay ── */
.notif-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1100;
  backdrop-filter: blur(2px);
}
.notif-overlay.open { display: block; }

/* ── Notification Panel ── */
.notif-panel {
  position: fixed;
  top: 0; right: 0;
  width: 400px; height: 100vh;
  background: #0f0f0f;
  border-left: 1px solid #2a2a2a;
  z-index: 1200;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -8px 0 40px rgba(0,0,0,0.7);
}
.notif-panel.open { transform: translateX(0); }

.notif-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 16px;
  border-bottom: 1px solid #222;
  font-size: 15px; font-weight: 700;
  background: #111;
  flex-shrink: 0;
}
.notif-settings-btn, .notif-clear-btn, .notif-close-btn {
  background: none; border: none; color: #aaa;
  font-size: 16px; cursor: pointer; padding: 4px 6px;
  border-radius: 6px; transition: background 0.15s, color 0.15s;
}
.notif-settings-btn:hover { background: #222; color: #fff; }
.notif-clear-btn:hover   { background: #2a0808; color: #fe2c55; }
.notif-close-btn:hover   { background: #222; color: #fff; }

/* ── Notification List ── */
.notif-list {
  flex: 1; overflow-y: auto; padding: 8px 0;
}
.notif-list::-webkit-scrollbar { width: 4px; }
.notif-list::-webkit-scrollbar-track { background: #111; }
.notif-list::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

.notif-empty {
  text-align: center; color: #555; font-size: 14px;
  padding: 60px 20px;
}

.notif-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #1a1a1a;
  animation: notif-slide-in 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  transition: background 0.15s;
  cursor: default;
}
.notif-item:hover { background: #161616; }
.notif-item.unread { border-left: 3px solid #fe2c55; padding-left: 13px; }

@keyframes notif-slide-in {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

.notif-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
}
.notif-icon.budget  { background: rgba(251,191,36,0.12); }
.notif-icon.cpl     { background: rgba(254,44,85,0.12); }
.notif-icon.ctr     { background: rgba(239,68,68,0.12); }
.notif-icon.leads   { background: rgba(99,102,241,0.12); }
.notif-icon.goal    { background: rgba(34,197,94,0.12); }

.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 3px; }
.notif-desc  { font-size: 12px; color: #888; line-height: 1.4; }
.notif-time  { font-size: 11px; color: #555; margin-top: 4px; }
.notif-del   { background: none; border: none; color: #444; cursor: pointer;
               font-size: 14px; padding: 2px 4px; border-radius: 4px;
               transition: color 0.15s; flex-shrink: 0; }
.notif-del:hover { color: #fe2c55; }

/* ── Toast Notifications ── */
.toast-container {
  position: fixed;
  top: 20px; right: 20px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
  max-width: 360px;
}

.toast-notif {
  display: flex; align-items: flex-start; gap: 12px;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: 14px 14px 14px 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
  pointer-events: all;
  position: relative;
  overflow: hidden;
  animation: toast-in 0.45s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
  max-width: 360px;
}
.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #555;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  margin-top: -1px;
  transition: color 0.15s, background 0.15s;
  pointer-events: all;
}
.toast-close:hover { color: #fe2c55; background: rgba(254,44,85,0.1); }
.toast-notif.toast-out {
  animation: toast-out 0.4s cubic-bezier(0.55,0,1,0.45) forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(120%) scale(0.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0) scale(1); max-height: 120px; margin-bottom: 0; }
  to   { opacity: 0; transform: translateX(120%) scale(0.85); max-height: 0; margin-bottom: -10px; }
}

.toast-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 14px 0 0 14px;
}
.toast-icon-wrap { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.toast-text      { flex: 1; min-width: 0; }
.toast-title     { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.toast-desc      { font-size: 12px; color: #999; line-height: 1.4; }
.toast-progress  {
  position: absolute; bottom: 0; left: 0; height: 2px;
  border-radius: 0 0 14px 14px;
  animation: toast-progress-shrink 5s linear forwards;
}
@keyframes toast-progress-shrink {
  from { width: 100%; }
  to   { width: 0%; }
}

/* ── Notification Settings Modal ── */
.notif-settings-modal {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  animation: fade-in 0.2s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.notif-settings-box {
  background: #111; border: 1px solid #2a2a2a;
  border-radius: 18px; width: 420px; max-width: 95vw;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
  animation: modal-slide-up 0.35s cubic-bezier(0.175,0.885,0.32,1.275);
}
@keyframes modal-slide-up {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.notif-settings-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px; border-bottom: 1px solid #222;
  font-size: 15px; font-weight: 700;
}
.notif-settings-header button {
  background: none; border: none; color: #888;
  font-size: 18px; cursor: pointer; border-radius: 6px; padding: 2px 6px;
}
.notif-settings-header button:hover { background: #222; color: #fff; }

.notif-settings-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }

.notif-section-title {
  font-size: 11px; font-weight: 600; color: #555;
  text-transform: uppercase; letter-spacing: 0.8px;
  margin-top: 8px;
}

.notif-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 13px; color: #ccc;
  padding: 6px 0;
}
.notif-toggle-row input[type="checkbox"] { accent-color: #fe2c55; width: 15px; height: 15px; }

.notif-threshold-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 13px; color: #aaa;
}
.notif-thresh-input {
  width: 70px; background: #1a1a1a; border: 1px solid #333;
  color: #fff; border-radius: 8px; padding: 6px 10px; font-size: 13px;
  text-align: center;
}
.notif-thresh-input:focus { outline: none; border-color: #fe2c55; }

.btn-push-perm {
  background: #1a1a2e; border: 1px solid #333; color: #aaa;
  font-size: 11px; border-radius: 6px; padding: 4px 8px; cursor: pointer;
  transition: background 0.15s;
}
.btn-push-perm:hover { background: #222; color: #fff; }

.notif-settings-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 20px; border-top: 1px solid #222;
}
.btn-notif-save {
  background: linear-gradient(135deg, #fe2c55, #c01e3e);
  border: none; color: #fff; font-weight: 600;
  padding: 9px 20px; border-radius: 10px; cursor: pointer;
  font-size: 13px; transition: opacity 0.2s;
}
.btn-notif-save:hover { opacity: 0.9; }
.btn-notif-cancel {
  background: #1a1a1a; border: 1px solid #333; color: #aaa;
  padding: 9px 20px; border-radius: 10px; cursor: pointer; font-size: 13px;
}
.btn-notif-cancel:hover { background: #222; color: #fff; }

.btn-import-excel {
  cursor: pointer;
  background: linear-gradient(135deg, #202a42 0%, #161e33 100%);
  border: 1px solid rgba(168, 199, 255, 0.35);
  color: #aecbff;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  transition: 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 10px rgba(168, 199, 255, 0.10);
}
.btn-import-excel:hover {
  background: linear-gradient(135deg, #2b3a5c 0%, #1e2947 100%);
  color: #d3e3ff;
  border-color: rgba(168, 199, 255, 0.6);
  box-shadow: 0 4px 16px rgba(168, 199, 255, 0.22);
}

/* ============================================================
   GRADIENT ANIMATIONS & ROLE THEMES
============================================================ */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes float-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes proj-fade-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(10px) scale(0.99); }
}
@keyframes proj-fade-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.container.proj-out {
  animation: proj-fade-out 0.18s cubic-bezier(0.4,0,1,1) forwards;
  pointer-events: none;
}
.container.proj-in {
  animation: proj-fade-in 0.24s cubic-bezier(0,0,0.2,1) forwards;
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(254,44,85,0.3); }
  50%       { box-shadow: 0 0 24px rgba(254,44,85,0.6); }
}

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

@keyframes card-enter {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Animated gradient border on hover */
.card {
  animation: card-enter 0.4s ease both;
  background: linear-gradient(145deg, #1a1a1a, #141414);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(254,44,85,0.08), rgba(37,244,238,0.08), rgba(254,44,85,0.08));
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: inherit;
  pointer-events: none;
}
.card:hover::before { opacity: 1; }
.card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(254,44,85,0.5);
  box-shadow: 0 12px 30px rgba(254,44,85,0.2), 0 0 0 1px rgba(254,44,85,0.15);
}

/* Animated tab */

/* Metric cards gradient numbers */
.card h2 {
  background: linear-gradient(135deg, #fe2c55, #cc0044);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 3s ease infinite;
}

/* Top bar gradient border */
.top-bar {
  background: linear-gradient(135deg, #111 0%, #161616 100%);
  border: 1px solid rgba(254,44,85,0.15);
  box-shadow: 0 2px 20px rgba(0,0,0,0.4);
  animation: float-up 0.5s ease both;
}

/* Tabs animation stagger */
.tabs { animation: float-up 0.4s ease both; }
.plan { animation: float-up 0.5s ease 0.05s both; }
.bi-chart-card { animation: float-up 0.5s ease 0.08s both; }
.cards { animation: float-up 0.5s ease 0.1s both; }
.creatives-table-container { animation: float-up 0.5s ease 0.15s both; }
.leads-table-container { animation: float-up 0.5s ease 0.2s both; }

/* Glowing avatar */
.avatar {
  border: 2px solid transparent;
  background: linear-gradient(#1a1a1a,#1a1a1a) padding-box,
              linear-gradient(135deg,#fe2c55,#25f4ee) border-box;
  animation: glow-pulse 3s ease infinite;
}
.avatar img {
  border-radius: 50%;
}

/* Plan section gradient heading */
.plan-section h3 {
  background: linear-gradient(90deg, #fe2c55, #cc0044);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border-left-color: #fe2c55;
}

/* Button hover shimmer */
.btn-action {
  position: relative;
  overflow: hidden;
}
.btn-action::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  background-size: 200%;
  transform: translateX(-100%);
  transition: transform 0.5s;
}
.btn-action:hover::after { transform: translateX(100%); }

/* Admin msg button */
.btn-admin-msg {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  position: relative;
  overflow: visible !important;
}
.btn-admin-msg:hover {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

/* Role-specific user block colors */
.user-block.role-hr {
  border: 1px solid rgba(139,92,246,0.3);
  background: linear-gradient(135deg, #1e1a2e, #1a1a2e);
}
.user-block.role-creator {
  border: 1px solid rgba(249,115,22,0.3);
  background: linear-gradient(135deg, #1e1a14, #1a1a14);
}
.user-block.role-analyst {
  border: 1px solid rgba(37,244,238,0.3);
  background: linear-gradient(135deg, #0a1e1e, #0a1818);
}
.user-block.role-admin {
  border: 1px solid rgba(254,44,85,0.3);
}

/* Role name color */
#username { font-weight: 700; font-size: 15px; }
.role-hr #username    { color: #a78bfa; }
.role-creator #username { color: #fb923c; }
.role-analyst #username { color: #25f4ee; }
.role-admin #username   { color: #fe2c55; }

/* ============================================================
   ROLE VIEWS - clean gradient backgrounds per role
============================================================ */
body.view-hr .cards .card { border-color: rgba(139,92,246,0.15); }
body.view-hr .card:hover  { border-color: rgba(139,92,246,0.5); }

body.view-creator .creatives-table-container {
  border: 1px solid rgba(249,115,22,0.2);
  box-shadow: 0 0 40px rgba(249,115,22,0.05);
}

/* ============================================================
   AI CREATIVE LAB
   ============================================================ */
.ai-insights {
  --ai-cyan:#25f4ee; --ai-pink:#fe2c55; --ai-violet:#8b5cf6; --ai-lime:#a3e635;
  margin: 22px 0; padding: 1px; border-radius: 24px;
  background: linear-gradient(135deg,rgba(37,244,238,.28),rgba(139,92,246,.08) 45%,rgba(254,44,85,.24));
  box-shadow: 0 22px 70px rgba(0,0,0,.38);
  overflow: hidden;
}
.ai-insights > * { box-sizing: border-box; }
.ai-launcher { width:100%; min-height:82px; padding:16px 22px; display:grid; grid-template-columns:42px minmax(0,1fr) auto 28px; gap:14px; align-items:center; border:0; color:#fff; text-align:left; cursor:pointer; background:radial-gradient(circle at 80% 0,rgba(139,92,246,.2),transparent 32%),linear-gradient(120deg,#0d1315,#0d0d13 55%,#151023); transition:background .25s; }
.ai-launcher:hover { background:radial-gradient(circle at 80% 0,rgba(139,92,246,.28),transparent 35%),linear-gradient(120deg,#0e1718,#0e0e14 55%,#19122a); }
.ai-launcher-mark { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; color:#050505; font-size:19px; background:linear-gradient(135deg,var(--ai-cyan),#79f6ca); box-shadow:0 0 28px rgba(37,244,238,.18); }
.ai-launcher-copy { min-width:0; display:flex; flex-direction:column; gap:4px; }
.ai-launcher-copy strong { color:#f7f7fa; font-size:15px; letter-spacing:.2px; }
.ai-launcher-copy small { color:#6f6f7d; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ai-launcher-signal { padding:7px 10px; border:1px solid rgba(37,244,238,.16); border-radius:999px; color:#82dcd8; background:rgba(37,244,238,.055); font-size:10px; font-weight:700; white-space:nowrap; }
.ai-launcher-chevron { display:grid; place-items:center; color:#777786; transition:transform .35s ease,color .2s; }
.ai-insights:not(.ai-collapsed) .ai-launcher-chevron { transform:rotate(180deg); color:var(--ai-cyan); }
.ai-expandable { max-height:6400px; opacity:1; overflow:hidden; transition:max-height .7s cubic-bezier(.22,1,.36,1),opacity .35s ease; }
.ai-insights.ai-collapsed .ai-expandable { max-height:0; opacity:0; }
.ai-insights:not(.ai-collapsed) .ai-launcher { border-bottom:1px solid rgba(255,255,255,.07); }
.ai-hero { min-height:190px; padding:30px 32px; display:flex; align-items:center; justify-content:space-between; gap:28px; background:radial-gradient(circle at 85% 20%,rgba(139,92,246,.25),transparent 32%),radial-gradient(circle at 10% 0,rgba(37,244,238,.12),transparent 36%),#0b0b10; }
.ai-hero-copy { max-width:690px; }
.ai-eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:14px; color:var(--ai-cyan); font-size:11px; font-weight:800; letter-spacing:2px; }
.ai-live-dot { width:7px; height:7px; border-radius:50%; background:var(--ai-cyan); box-shadow:0 0 14px var(--ai-cyan); animation:aiPulse 1.7s infinite; }
@keyframes aiPulse { 50% { opacity:.45; transform:scale(.78); } }
.ai-hero h2 { margin:0 0 10px; color:#fff; font-size:clamp(25px,3vw,40px); line-height:1.08; letter-spacing:-1.2px; }
.ai-hero p { margin:0; color:#9292a1; font-size:14px; line-height:1.65; max-width:650px; }
.ai-hero-actions { display:flex; flex-direction:column; align-items:flex-end; gap:12px; flex-shrink:0; }
.ai-period-control { position:relative; }
.ai-period-chip { display:flex; align-items:center; gap:8px; color:#aaa; font-size:11px; padding:8px 12px; border:1px solid rgba(255,255,255,.1); border-radius:999px; background:rgba(255,255,255,.035); cursor:pointer; transition:.2s; }
.ai-period-chip:hover,.ai-period-chip[aria-expanded="true"] { color:#d7fffd; border-color:rgba(37,244,238,.38); background:rgba(37,244,238,.07); }
.ai-period-chip svg { transition:transform .2s; }.ai-period-chip[aria-expanded="true"] svg{transform:rotate(180deg)}
.ai-period-popover { position:absolute; right:0; top:calc(100% + 9px); z-index:30; width:310px; padding:16px; border:1px solid #30303c; border-radius:14px; background:#13131b; box-shadow:0 20px 55px rgba(0,0,0,.6); }
.ai-period-popover[hidden] { display:none; }
.ai-period-pop-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; color:#e7e7ed; font-size:12px; }
.ai-period-pop-head button { border:0; background:none; color:#5f5f6d; cursor:pointer; }
.ai-period-presets { display:flex; gap:6px; margin-bottom:13px; }
.ai-period-presets button { flex:1; padding:7px 5px; border:1px solid #292933; border-radius:8px; background:#191920; color:#7d7d8b; font-size:9px; cursor:pointer; }
.ai-period-presets button:hover { color:var(--ai-cyan); border-color:rgba(37,244,238,.35); }
.ai-period-fields { display:grid; grid-template-columns:1fr auto 1fr; gap:7px; align-items:end; }
.ai-period-fields > span { padding-bottom:9px; color:#4f4f5c; }
.ai-period-fields label { display:flex; flex-direction:column; gap:5px; color:#666674; font-size:9px; text-transform:uppercase; }
.ai-period-fields input { width:100%; box-sizing:border-box; padding:8px 7px; border:1px solid #292934; border-radius:8px; outline:0; background:#0d0d12; color:#c8c8d1; color-scheme:dark; font-size:10px; }
.ai-period-fields input:focus { border-color:rgba(37,244,238,.48); }
.ai-period-apply { width:100%; margin-top:13px; padding:9px; border:0; border-radius:9px; color:#041313; background:linear-gradient(135deg,var(--ai-cyan),#79f6ca); font-size:10px; font-weight:800; cursor:pointer; }
.ai-refresh-btn { border:0; border-radius:12px; padding:12px 17px; color:#050505; background:linear-gradient(135deg,var(--ai-cyan),#7cf7c8); font-weight:800; cursor:pointer; box-shadow:0 8px 25px rgba(37,244,238,.16); transition:.2s; }
.ai-refresh-btn:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(37,244,238,.24); }
.ai-refresh-btn span { margin-right:6px; }
.ai-kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:rgba(255,255,255,.07); }
.ai-kpi { padding:22px 24px; background:#0e0e13; position:relative; overflow:hidden; }
.ai-kpi::after { content:""; position:absolute; right:-18px; top:-22px; width:70px; height:70px; border-radius:50%; background:var(--kpi-color,#25f4ee); opacity:.05; }
.ai-kpi-label { color:#686876; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; }
.ai-kpi-value { margin-top:8px; color:#fff; font-size:25px; font-weight:800; letter-spacing:-.6px; }
.ai-kpi-sub { margin-top:5px; font-size:11px; color:#777785; }
.ai-kpi-sub.good { color:#76e6b0; }
.ai-grid-main,.ai-grid-secondary { display:grid; grid-template-columns:1.18fr .82fr; gap:1px; background:rgba(255,255,255,.07); }
.ai-grid-secondary { grid-template-columns:1fr 1fr; }
.ai-panel { padding:26px; background:#0d0d12; min-width:0; }
.ai-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; }
.ai-panel-kicker { color:#5f5f70; font-size:10px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; }
.ai-panel h3 { margin:5px 0 0; color:#f5f5f7; font-size:18px; letter-spacing:-.25px; }
.ai-info-btn { width:27px; height:27px; border-radius:50%; border:1px solid #2b2b35; background:#15151d; color:#777; cursor:help; }
.ai-count-badge,.ai-confidence { padding:6px 9px; border-radius:8px; background:#171720; color:#818191; font-size:10px; white-space:nowrap; }
.ai-map-wrap { position:relative; height:310px; margin:0 0 12px 34px; border-left:1px solid #30303a; border-bottom:1px solid #30303a; background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.055) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(255,255,255,.055) 50%,transparent 50.2%); }
.ai-map-wrap::before { content:"CR →"; position:absolute; left:-32px; top:50%; color:#555563; font-size:10px; transform:rotate(-90deg) translateY(-50%); transform-origin:left top; }
.ai-map-wrap::after { content:"CTR →"; position:absolute; right:0; bottom:-22px; color:#555563; font-size:10px; }
.ai-quadrant-label { position:absolute; padding:5px 7px; border-radius:6px; color:#555565; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.ai-q-tl{left:7px;top:7px}.ai-q-tr{right:7px;top:7px}.ai-q-bl{left:7px;bottom:7px}.ai-q-br{right:7px;bottom:7px}
.ai-dot { position:absolute; width:14px; height:14px; border-radius:50%; transform:translate(-50%,50%); border:2px solid rgba(255,255,255,.6); box-shadow:0 0 0 5px color-mix(in srgb,var(--dot) 14%,transparent),0 3px 12px rgba(0,0,0,.7); background:var(--dot); cursor:pointer; transition:.18s; z-index:2; }
.ai-dot:hover { transform:translate(-50%,50%) scale(1.35); z-index:5; }
.ai-dot-label { display:none; position:absolute; left:17px; top:-12px; width:max-content; max-width:170px; padding:7px 9px; border-radius:8px; background:#21212b; border:1px solid #393946; color:#eee; font-size:10px; box-shadow:0 8px 28px #000; }
.ai-dot:hover .ai-dot-label { display:block; }
.ai-cluster-legend { display:flex; flex-wrap:wrap; gap:10px 16px; padding-top:8px; }
.ai-legend-item { display:flex; align-items:center; gap:6px; color:#777785; font-size:10px; }
.ai-legend-item i { width:7px; height:7px; border-radius:50%; background:var(--legend); }
.ai-actions-list { display:flex; flex-direction:column; gap:10px; }
.ai-action { padding:14px; border:1px solid #202029; border-radius:13px; background:#111117; display:grid; grid-template-columns:32px 1fr auto; gap:11px; align-items:start; }
.ai-action-num { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--action-bg,#20202a); color:var(--action-color,#fff); font-size:11px; font-weight:900; }
.ai-action h4 { margin:0 0 5px; color:#e8e8ec; font-size:12px; }
.ai-action p { margin:0; color:#777786; font-size:11px; line-height:1.45; }
.ai-impact { align-self:center; color:#72dfaa; font-size:9px; font-weight:800; white-space:nowrap; }
.ai-patterns { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ai-pattern { padding:14px; border:1px solid #21212a; border-radius:12px; background:linear-gradient(135deg,#121219,#0e0e13); }
.ai-pattern-icon { font-size:17px; margin-bottom:8px; }
.ai-pattern strong { display:block; color:#dddde4; font-size:12px; margin-bottom:4px; }
.ai-pattern span { color:#6f6f7d; font-size:10px; line-height:1.4; }
.ai-brief { display:flex; flex-direction:column; gap:10px; }
.ai-brief-row { display:grid; grid-template-columns:76px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid #1b1b23; }
.ai-brief-row:last-child { border-bottom:0; }
.ai-brief-key { color:var(--ai-cyan); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; }
.ai-brief-value { color:#a8a8b3; font-size:11px; line-height:1.5; }
.ai-copy-btn { border:1px solid #30303b; background:#15151d; color:#a9a9b5; border-radius:9px; padding:7px 10px; font-size:10px; cursor:pointer; }
.ai-copy-btn:hover { border-color:var(--ai-cyan); color:var(--ai-cyan); }
.ai-ranking-panel { border-top:1px solid rgba(255,255,255,.07); }
.ai-ranking-head { align-items:center; }
.ai-filter-pills { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.ai-filter-pills button { border:1px solid #272731; background:#14141b; color:#777784; border-radius:999px; padding:7px 11px; font-size:10px; cursor:pointer; }
.ai-filter-pills button.active { color:#050505; border-color:var(--ai-cyan); background:var(--ai-cyan); font-weight:800; }
.ai-ranking { display:flex; flex-direction:column; gap:7px; }
.ai-rank-row { display:grid; grid-template-columns:minmax(160px,1.5fr) 66px 66px 72px 110px minmax(150px,1fr); align-items:center; gap:12px; padding:12px 14px; border:1px solid #1d1d25; border-radius:11px; background:#101016; }
.ai-rank-name { min-width:0; }.ai-rank-name strong { display:block; color:#dedee5; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.ai-rank-name span { color:#565663; font-size:9px; }
.ai-metric-mini b { display:block; color:#d2d2da; font-size:12px; }.ai-metric-mini span { color:#555562; font-size:8px; text-transform:uppercase; }
.ai-cluster-tag { justify-self:start; padding:6px 8px; border-radius:7px; color:var(--tag-color); background:color-mix(in srgb,var(--tag-color) 10%,transparent); border:1px solid color-mix(in srgb,var(--tag-color) 22%,transparent); font-size:9px; font-weight:800; }
.ai-next-step { color:#888896; font-size:10px; line-height:1.35; }
.ai-empty { padding:36px 20px; text-align:center; border:1px dashed #2b2b35; border-radius:13px; color:#686876; font-size:12px; line-height:1.7; }
.ai-empty strong { color:#c8c8cf; display:block; font-size:14px; margin-bottom:4px; }
.ai-method-note { margin:0; padding:14px 26px 18px; color:#484854; font-size:9px; line-height:1.5; background:#0d0d12; }
.ai-designer-lab { padding:30px 26px; border-top:1px solid rgba(255,255,255,.07); background:radial-gradient(circle at 100% 0,rgba(254,44,85,.07),transparent 35%),#0b0b10; }
.ai-designer-head { display:flex; justify-content:space-between; align-items:flex-start; gap:22px; margin-bottom:22px; }
.ai-designer-head h3 { margin:5px 0 7px; color:#f4f4f7; font-size:20px; letter-spacing:-.35px; }
.ai-designer-head p { margin:0; max-width:670px; color:#70707e; font-size:11px; line-height:1.55; }
.ai-metric-basis { padding:7px 10px; border:1px solid rgba(139,92,246,.2); border-radius:999px; color:#a99bea; background:rgba(139,92,246,.07); font-size:9px; white-space:nowrap; }
.ai-designer-scores { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.ai-score-card { padding:15px; border:1px solid #202029; border-radius:13px; background:#101016; }
.ai-score-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:11px; }
.ai-score-top span { color:#858593; font-size:10px; font-weight:700; }
.ai-score-top b { color:var(--score-color); font-size:16px; }
.ai-score-track { height:5px; border-radius:999px; background:#202029; overflow:hidden; }
.ai-score-track i { display:block; height:100%; width:var(--score); border-radius:inherit; background:linear-gradient(90deg,color-mix(in srgb,var(--score-color) 55%,#fff),var(--score-color)); box-shadow:0 0 10px color-mix(in srgb,var(--score-color) 35%,transparent); }
.ai-score-card small { display:block; margin-top:9px; color:#575764; font-size:9px; line-height:1.35; }
.ai-designer-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ai-designer-card { padding:20px; border:1px solid #22222b; border-radius:15px; background:linear-gradient(145deg,#111118,#0e0e13); }
.ai-designer-card-title { display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.ai-dc-icon { width:33px; height:33px; display:grid; place-items:center; border-radius:10px; color:#050505; background:var(--ai-cyan); font-size:13px; font-weight:900; }
.ai-dc-icon.ai-dc-pink { background:var(--ai-pink); color:#fff; }
.ai-designer-card-title small { color:#535361; font-size:8px; font-weight:800; letter-spacing:1px; }
.ai-designer-card-title h4 { margin:3px 0 0; color:#e5e5eb; font-size:14px; }
.ai-designer-list { display:flex; flex-direction:column; gap:8px; }
.ai-design-rec { display:grid; grid-template-columns:22px 1fr; gap:10px; padding:11px; border-radius:10px; background:#15151c; }
.ai-design-rec > span { width:20px; height:20px; display:grid; place-items:center; border-radius:6px; background:rgba(37,244,238,.08); color:var(--ai-cyan); font-size:9px; font-weight:900; }
.ai-design-rec strong { display:block; margin-bottom:3px; color:#cfcfd7; font-size:10px; }
.ai-design-rec p { margin:0; color:#696977; font-size:9px; line-height:1.45; }
.ai-script-tabs { display:flex; gap:6px; margin-bottom:14px; }
.ai-script-tabs button { flex:1; padding:7px 5px; border:1px solid #272730; border-radius:8px; background:#15151c; color:#686876; font-size:9px; cursor:pointer; }
.ai-script-tabs button.active { border-color:rgba(254,44,85,.4); color:#ff7892; background:rgba(254,44,85,.08); font-weight:800; }
.ai-script-body { min-height:220px; padding:14px; border:1px solid #202029; border-radius:12px; background:#0c0c11; }
.ai-script-title { color:#ededf2; font-size:12px; font-weight:800; margin-bottom:12px; }
.ai-script-step { display:grid; grid-template-columns:45px 1fr; gap:10px; padding:9px 0; border-bottom:1px solid #1b1b22; }
.ai-script-step:last-child { border-bottom:0; }
.ai-script-time { color:#ff6b88; font-size:9px; font-weight:800; }
.ai-script-copy strong { display:block; color:#b9b9c2; font-size:9px; margin-bottom:3px; }
.ai-script-copy span { color:#5f5f6c; font-size:9px; line-height:1.4; }
.ai-designer-disclaimer { display:flex; align-items:flex-start; gap:10px; margin-top:13px; padding:12px 14px; border:1px solid #1f1f27; border-radius:11px; background:rgba(255,255,255,.018); }
.ai-designer-disclaimer > span { width:18px; height:18px; flex:0 0 auto; display:grid; place-items:center; border:1px solid #3a3a47; border-radius:50%; color:#777785; font-size:9px; font-weight:800; }
.ai-designer-disclaimer p { margin:0; color:#545460; font-size:9px; line-height:1.5; }.ai-designer-disclaimer strong{color:#777784}
.ai-floating-orb { position:fixed; right:24px; top:58%; z-index:8800; width:62px; height:62px; display:grid; place-items:center; border:1px solid rgba(180,255,252,.88); border-radius:50%; color:#031313; background:radial-gradient(circle at 34% 28%,#d8fffd 0,#63fff7 24%,#25f4ee 55%,#0eb8bd 100%); box-shadow:0 0 0 5px rgba(37,244,238,.08),0 0 24px rgba(37,244,238,.72),0 0 58px rgba(37,244,238,.28),inset 0 -8px 16px rgba(0,90,98,.24); cursor:grab; isolation:isolate; transition:transform .22s ease,box-shadow .22s ease; animation:aiOrbFloat 3.2s ease-in-out infinite; touch-action:none; user-select:none; -webkit-user-select:none; }
body:not(.view-admin):not(.view-hr):not(.view-creator):not(.view-analyst) .ai-floating-orb { display:none; }
.ai-floating-orb:hover { transform:translateY(-3px) scale(1.08); box-shadow:0 0 0 7px rgba(37,244,238,.1),0 0 34px rgba(37,244,238,.88),0 0 74px rgba(37,244,238,.36),inset 0 -8px 16px rgba(0,90,98,.22); }
.ai-floating-orb:active { transform:scale(.96); }
.ai-floating-orb.orb-dragging { cursor:grabbing; animation:none; transition:none; transform:scale(1.06); box-shadow:0 0 0 8px rgba(37,244,238,.12),0 0 38px rgba(37,244,238,.92),0 12px 45px rgba(0,0,0,.45); }
.month-close-btn { margin-left:auto!important; border-color:rgba(37,244,238,.28)!important; color:#7cebe6!important; background:rgba(37,244,238,.055)!important; }
.month-close-btn:hover { border-color:#25f4ee!important; color:#d9fffd!important; box-shadow:0 0 18px rgba(37,244,238,.12); }
body:not(.view-admin) .month-close-btn { display:none!important; }
.close-month-box { width:min(520px,94vw); }
.close-month-icon { width:48px;height:48px;display:grid;place-items:center;margin:0 auto 12px;border-radius:15px;color:#041313;background:linear-gradient(135deg,#25f4ee,#82f7c9);font-size:22px;font-weight:900;box-shadow:0 0 28px rgba(37,244,238,.2); }
.close-month-box .modal-title { text-align:center; }
.close-month-description { margin:8px auto 16px;max-width:410px;color:#82828f;font-size:12px;line-height:1.55;text-align:center; }
.close-month-summary { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:15px; }
.close-month-summary > div { padding:12px 9px;border:1px solid #282832;border-radius:11px;background:#121219;text-align:center; }
.close-month-summary span { display:block;color:#5d5d69;font-size:9px;text-transform:uppercase;letter-spacing:.6px; }
.close-month-summary strong { display:block;margin-top:5px;color:#e5e5eb;font-size:15px; }
.close-month-check { display:flex;align-items:flex-start;gap:9px;padding:12px;border:1px solid rgba(37,244,238,.14);border-radius:11px;background:rgba(37,244,238,.035);color:#9696a3;font-size:11px;line-height:1.4;cursor:pointer; }
.close-month-check input { margin-top:2px;accent-color:#25f4ee; }
.ai-orb-label { position:relative; z-index:2; font-size:17px; font-weight:950; letter-spacing:-.6px; text-shadow:0 1px 0 rgba(255,255,255,.35); }
.ai-orb-ring { position:absolute; inset:-8px; z-index:-1; border:1px solid rgba(37,244,238,.34); border-radius:50%; animation:aiOrbRing 2.2s ease-out infinite; }
.ai-floating-orb.orb-active { color:#d7fffd; background:radial-gradient(circle at 35% 30%,#176b70,#0d3337 52%,#081a1d 100%); }
@keyframes aiOrbFloat { 0%,100%{margin-top:0}50%{margin-top:-8px} }
@keyframes aiOrbRing { 0%{transform:scale(.82);opacity:.8}75%,100%{transform:scale(1.35);opacity:0} }
@media(max-width:900px){.ai-hero{align-items:flex-start;flex-direction:column}.ai-hero-actions{align-items:flex-start}.ai-kpis{grid-template-columns:1fr 1fr}.ai-grid-main,.ai-grid-secondary{grid-template-columns:1fr}.ai-ranking-head{align-items:flex-start;flex-direction:column}.ai-filter-pills{justify-content:flex-start}.ai-rank-row{grid-template-columns:minmax(130px,1fr) 54px 54px 62px 90px}.ai-next-step{display:none}}
@media(max-width:900px){.ai-designer-grid{grid-template-columns:1fr}.ai-designer-scores{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ai-floating-orb{right:14px;top:auto;bottom:22px;width:52px;height:52px}.ai-orb-label{font-size:15px}.ai-launcher{grid-template-columns:38px minmax(0,1fr) 24px;padding:14px 16px}.ai-launcher-signal{display:none}.ai-hero,.ai-panel{padding:20px}.ai-kpis{grid-template-columns:1fr}.ai-patterns{grid-template-columns:1fr}.ai-rank-row{grid-template-columns:1fr 50px 50px 58px}.ai-cluster-tag{display:none}.ai-map-wrap{height:250px}.ai-designer-lab{padding:22px 18px}.ai-designer-head{flex-direction:column}.ai-designer-scores{grid-template-columns:1fr}.ai-metric-basis{white-space:normal}}

body.view-analyst .leads-table-container {
  border: 1px solid rgba(37,244,238,0.2);
  box-shadow: 0 0 40px rgba(37,244,238,0.05);
}

/* Resizable creative table columns */
#creativesTable.creatives-resizable { width:auto; min-width:100%; }
#creativesTable.creatives-resizable th { position:sticky; overflow:visible; }
.cr-column-resizer { position:absolute; z-index:8; top:0; right:-5px; width:10px; height:100%; cursor:col-resize; touch-action:none; user-select:none; }
.cr-column-resizer::after { content:""; position:absolute; top:18%; bottom:18%; left:4px; width:2px; border-radius:2px; background:rgba(37,244,238,.24); transition:background .15s,box-shadow .15s; }
#creativesTable th:hover .cr-column-resizer::after,.cr-column-resizer.is-dragging::after { background:#25f4ee; box-shadow:0 0 8px rgba(37,244,238,.7); }
body.cr-resizing-columns,body.cr-resizing-columns * { cursor:col-resize!important; user-select:none!important; }
.btn-cr-columns { height:34px; padding:0 13px; border:1px solid rgba(37,244,238,.25); border-radius:40px; background:rgba(37,244,238,.05); color:#86e9e5; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; }
.btn-cr-columns:hover { border-color:#25f4ee; color:#d9fffd; }
#creativesTable td.cpc-cell { min-width:96px; overflow:visible!important; text-overflow:clip!important; white-space:nowrap; color:#25f4ee; font-weight:700; }

/* ============================================================
   CHAT WIDGET (non-admin users) — floating button + panel
============================================================ */
#chatWidget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.chat-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #fe2c55, #c0014a);
  border: none;
  border-radius: 50px;
  padding: 12px 20px 12px 16px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(254,44,85,0.45), 0 2px 8px rgba(0,0,0,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.chat-toggle-btn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 12px 40px rgba(254,44,85,0.6), 0 2px 12px rgba(0,0,0,0.5);
}
.chat-btn-icon { font-size: 18px; }
.chat-btn-label { letter-spacing: 0.3px; }

.chat-unread-badge {
  position: absolute;
  top: -6px; right: -6px;
  background: #25f4ee;
  color: #000;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid #000;
  animation: badge-pop 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
}
.chat-unread-badge.visible {
  display: flex;
}

/* Chat panel */
.chat-panel {
  display: none;
  width: 360px;
  max-width: calc(100vw - 48px);
  height: 520px;
  max-height: calc(100vh - 120px);
  background: #0f0f0f;
  border: 1px solid #1e1e1e;
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04);
  flex-direction: column;
  overflow: hidden;
}
.chat-panel.open { display: flex; }

.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, #1a0a12, #0f0f1a);
  border-bottom: 1px solid #1e1e1e;
  flex-shrink: 0;
}
.chat-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-header-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fe2c55, #c0014a);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 12px rgba(254,44,85,0.4);
  flex-shrink: 0;
  overflow: hidden;
}
.chat-header-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.chat-header-title { font-size: 14px; font-weight: 700; color: #fff; }
.chat-header-sub { font-size: 11px; color: #666; margin-top: 1px; }
.chat-close-btn {
  background: #1e1e1e; border: none; color: #888;
  width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.chat-close-btn:hover { background: #2a2a2a; color: #fff; }

/* Shared message list */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

.chat-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  color: #555;
}
.chat-empty-icon { font-size: 40px; }
.chat-empty-text { font-size: 13px; text-align: center; line-height: 1.5; }

/* Date divider */
.chat-date-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #444;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 8px 0;
}
.chat-date-divider::before, .chat-date-divider::after {
  content: ''; flex: 1; height: 1px; background: #1e1e1e;
}

/* Message row */
.chat-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  animation: notif-slide-in 0.25s ease both;
  margin-bottom: 6px;
}
.chat-msg.sent { flex-direction: row-reverse; }
.chat-msg.received { flex-direction: row; }

.chat-msg-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  margin-bottom: 2px;
}
.chat-msg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.chat-msg-body {
  display: flex;
  flex-direction: column;
  max-width: 75%;
}
.chat-msg.sent .chat-msg-body { align-items: flex-end; }
.chat-msg.received .chat-msg-body { align-items: flex-start; }

.chat-msg-name {
  font-size: 10px;
  font-weight: 600;
  color: #666;
  margin-bottom: 3px;
  padding: 0 4px;
}

.chat-bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}
.chat-msg.sent .chat-bubble {
  background: linear-gradient(135deg, #fe2c55, #c0014a);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 16px rgba(254,44,85,0.3);
}
.chat-msg.received .chat-bubble {
  background: #1e1e1e;
  color: #eee;
  border-bottom-left-radius: 4px;
  border: 1px solid #2a2a2a;
}

.chat-msg-time {
  font-size: 10px;
  color: #555;
  margin-top: 3px;
  padding: 0 4px;
}

/* Shared compose area */
.chat-compose {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 14px;
  background: #0a0a0a;
  border-top: 1px solid #1e1e1e;
  flex-shrink: 0;
}
.chat-textarea {
  flex: 1;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  padding: 10px 14px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  resize: none;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  line-height: 1.4;
  max-height: 120px;
  overflow-y: auto;
}
.chat-textarea:focus {
  border-color: rgba(254,44,85,0.5);
  box-shadow: 0 0 0 3px rgba(254,44,85,0.1);
}
.chat-textarea::placeholder { color: #555; }
.chat-send-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fe2c55, #c0014a);
  border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(254,44,85,0.3);
}
.chat-send-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(254,44,85,0.5); }

/* ============================================================
   ADMIN CHAT PANEL — two-pane drawer
============================================================ */
.admin-chat-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 3100;
  backdrop-filter: blur(4px);
  animation: fade-in 0.2s ease;
}
.admin-chat-panel {
  position: fixed;
  top: 0; right: 0;
  width: 720px;
  max-width: 96vw;
  height: 100vh;
  background: #0a0a0a;
  z-index: 3200;
  display: flex;
  flex-direction: row;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -12px 0 60px rgba(0,0,0,0.8);
  border-left: 1px solid #1a1a1a;
}
.admin-chat-panel.open { transform: translateX(0); }

/* Sidebar — chat list */
.admin-chat-sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #1a1a1a;
  background: #080808;
}
.admin-chat-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
  border-bottom: 1px solid #1a1a1a;
  flex-shrink: 0;
}
.admin-chat-sidebar-title {
  font-size: 15px; font-weight: 700; color: #fff;
}
.admin-chat-close-btn {
  background: #1a1a1a; border: none; color: #888;
  width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: 0.2s;
}
.admin-chat-close-btn:hover { background: #2a2a2a; color: #fff; }

.admin-chat-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.admin-chat-list::-webkit-scrollbar { width: 4px; }
.admin-chat-list::-webkit-scrollbar-thumb { background: #222; border-radius: 2px; }

.admin-chat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid #111;
}
.admin-chat-item:hover { background: #111; }
.admin-chat-item.active { background: #161616; border-left: 3px solid #fe2c55; }

.admin-chat-item-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
.admin-chat-item-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.admin-chat-item-info { flex: 1; min-width: 0; }
.admin-chat-item-name {
  font-size: 13px; font-weight: 600; color: #e0e0e0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-chat-item-last {
  font-size: 11px; color: #555; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.admin-chat-item-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  flex-shrink: 0;
}
.admin-chat-item-time { font-size: 10px; color: #444; }
.admin-chat-unread-dot {
  background: #fe2c55;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}

/* Conversation pane */
.admin-chat-conv {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.admin-chat-conv-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.admin-conv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #0f0f1a, #0a0a12);
  border-bottom: 1px solid #1a1a1a;
  flex-shrink: 0;
}
.admin-conv-header-info {
  display: flex; align-items: center; gap: 12px;
}
.admin-conv-avatar {
  width: 36px; height: 36px;
  border-radius: 50%; overflow: hidden; flex-shrink: 0;
}
.admin-conv-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.admin-conv-name { font-size: 14px; font-weight: 700; color: #fff; }
.admin-conv-sub { font-size: 11px; color: #555; margin-top: 1px; }

@media (max-width: 600px) {
  #chatWidget { bottom: 16px; right: 16px; }
  .chat-panel { width: calc(100vw - 32px); height: 70vh; }
  .admin-chat-panel { width: 100vw; flex-direction: column; }
  .admin-chat-sidebar { width: 100%; height: 180px; border-right: none; border-bottom: 1px solid #1a1a1a; }
  .admin-chat-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 0; }
  .admin-chat-item { flex-direction: column; align-items: center; min-width: 80px; border-bottom: none; border-right: 1px solid #111; }
}

/* ============================================================
   CREATIVE DETAIL MODAL (drill-down по дням)
============================================================ */
.cr-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(0,0,0,0);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(0px);
  transition: background 0.3s, backdrop-filter 0.3s;
}
.cr-detail-overlay.open {
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
}

.cr-detail-box {
  background: #0f0f0f;
  border: 1px solid #1e1e1e;
  border-radius: 24px;
  width: 680px;
  max-width: 96vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.04);
  transform: translateY(30px) scale(0.96);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275), opacity 0.3s ease;
}
.cr-detail-overlay.open .cr-detail-box {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.cr-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: linear-gradient(135deg, #111 0%, #0a0a14 100%);
  border-bottom: 1px solid #1e1e1e;
  flex-shrink: 0;
  gap: 14px;
}
.cr-detail-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}
.cr-detail-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  flex-shrink: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.cr-detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.cr-replace-file-btn {
  position: absolute;
  bottom: -6px;
  right: -6px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  color: #aaa;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.15s, color 0.15s;
}
.cr-replace-file-btn:hover { background: #fe2c55; color: #fff; border-color: #fe2c55; }
.cr-detail-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}
.cr-detail-stats-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cr-sum-item {
  font-size: 12px;
  color: #aaa;
  background: #1a1a1a;
  border: 1px solid #252525;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
.cr-sum-item.ctr-cell {
  color: #25f4ee;
  border-color: rgba(37,244,238,0.2);
  background: rgba(37,244,238,0.06);
}
.cr-detail-close {
  background: #1e1e1e;
  border: none;
  color: #888;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
  flex-shrink: 0;
}
.cr-detail-close:hover { background: #fe2c55; color: #fff; }

.cr-detail-body {
  overflow-y: auto;
  flex: 1;
  padding: 0;
}
.cr-detail-body::-webkit-scrollbar { width: 5px; }
.cr-detail-body::-webkit-scrollbar-track { background: #0f0f0f; }
.cr-detail-body::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }

.cr-detail-table {
  width: 100%;
  border-collapse: collapse;
}
.cr-detail-table th {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: #0a0a0a;
  border-bottom: 1px solid #1a1a1a;
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}
.cr-detail-table td {
  padding: 12px 16px;
  font-size: 13px;
  color: #ccc;
  border-bottom: 1px solid #111;
  vertical-align: middle;
  white-space: nowrap;
}
.cr-detail-table tbody tr {
  transition: background 0.15s;
  animation: card-enter 0.3s ease both;
}
.cr-detail-table tbody tr:nth-child(odd) { background: rgba(255,255,255,0.012); }
.cr-detail-table tbody tr:hover { background: #161616; }

/* Status badges */
.cr-status-active {
  display: inline-block;
  background: rgba(34,197,94,0.12);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.cr-status-paused {
  display: inline-block;
  background: rgba(239,68,68,0.10);
  color: #f87171;
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Group row hover effect */
.cr-group-row:hover {
  background: #141414 !important;
  box-shadow: inset 3px 0 0 #fe2c55;
}
.cr-group-row:hover .cr-name-link {
  color: #fe2c55;
}
.cr-name-link {
  color: #fff;
  font-weight: 600;
  transition: color 0.2s;
}
/* ── Превью-ячейка: кнопка удаления файла и «+» плейсхолдер ── */
.cr-thumb-edit-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cr-thumb-del-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  background: rgba(20,20,20,.9);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background 0.15s;
  padding: 0;
}
.cr-thumb-del-btn:hover { background: #fe2c55; border-color: #fe2c55; }
.cr-thumb-edit-wrap:hover .cr-thumb-del-btn { display: flex; }

.cr-upload-placeholder {
  width: 52px;
  height: 52px;
  border: 2px dashed #2a2a2a;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.cr-upload-placeholder:hover {
  border-color: #25f4ee;
  background: rgba(37,244,238,0.05);
}
.cr-upload-plus {
  font-size: 22px;
  color: #444;
  line-height: 1;
  transition: color 0.2s;
}
.cr-upload-placeholder:hover .cr-upload-plus { color: #25f4ee; }

.cr-inline-edit {
  background: #1a1a1a;
  border: 1px solid #fe2c55;
  border-radius: 6px;
  color: #fff;
  padding: 4px 8px;
  width: 100%;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}
.cr-inline-edit:focus { border-color: #25f4ee; }

/* Creatives table — column widths (9 cols) */
#creativesTable th:nth-child(1), #creativesTable td:nth-child(1) { width: 7%;  }  /* Период — узкая */
#creativesTable th:nth-child(2), #creativesTable td:nth-child(2) { width: 12%; }  /* Статус */
#creativesTable th:nth-child(3), #creativesTable td:nth-child(3) { width: 20%; }  /* Название */
#creativesTable th:nth-child(4), #creativesTable td:nth-child(4) { width: 9%;  }  /* Превью */
#creativesTable th:nth-child(5), #creativesTable td:nth-child(5) { width: 14%; }  /* Показы — шире */
#creativesTable th:nth-child(6), #creativesTable td:nth-child(6) { width: 14%; }  /* Клики — шире */
#creativesTable th:nth-child(7), #creativesTable td:nth-child(7) { width: 12%; }  /* CTR — шире */
#creativesTable th:nth-child(8), #creativesTable td:nth-child(8) { width: 8%;  }  /* Дней */
#creativesTable th:nth-child(9), #creativesTable td:nth-child(9) { width: 4%;  min-width: 36px; } /* Удалить — узкая */

@media (max-width: 600px) {
  .cr-detail-box { border-radius: 16px; }
  .cr-detail-header { padding: 14px 14px; }
  .cr-detail-table th, .cr-detail-table td { padding: 10px 10px; font-size: 12px; }
}

/* ============================================================
   CREATIVE DETAIL — BAR CHART
============================================================ */
.cr-chart-wrap {
  padding: 18px 18px 6px 18px;
  border-bottom: 1px solid #141414;
  background: #0a0a0a;
}
.cr-chart-filter-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 16px 6px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid #1a1a1a;
  margin-bottom: 10px;
  border-radius: 8px 8px 0 0;
}
.cr-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cr-filter-label {
  font-size: 10px;
  color: #555;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.cr-filter-btn {
  background: #181818;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  color: #555;
  font-size: 10px;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.cr-filter-btn:hover {
  border-color: #25f4ee;
  color: #25f4ee;
}
.cr-filter-btn.active {
  background: rgba(37,244,238,0.12);
  border-color: #25f4ee;
  color: #25f4ee;
  font-weight: 600;
}
.cr-metric-tabs {
  display: flex;
  gap: 4px;
}
.cr-metric-tab {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  color: #555;
  font-size: 10px;
  padding: 3px 9px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.cr-metric-tab:hover {
  border-color: #a855f7;
  color: #a855f7;
}
.cr-metric-tab.active {
  background: rgba(247,37,133,0.14);
  border-color: #f72585;
  color: #f72585;
  font-weight: 600;
}
.cr-chart-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  font-size: 11px;
  color: #666;
  letter-spacing: 0.3px;
}
.cr-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}
#crChartSvgHolder {
  width: 100%;
}
#crChartSvgHolder svg rect {
  cursor: default;
  transition: opacity 0.15s;
}
#crChartSvgHolder svg rect:hover {
  opacity: 1 !important;
  filter: brightness(1.25);
}

@keyframes barGrow {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* ============================================================
   CREATIVES — comparison chart & rank
============================================================ */
.cr-compare-section {
  padding: 14px 20px 0;
  border-top: 1px solid #141414;
  margin-top: 4px;
}
.cr-compare-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.cr-compare-title {
  font-size: 11px;
  color: #666;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.cr-rank-badge {
  font-size: 12px;
  font-weight: 700;
  color: #a855f7;
  background: rgba(168,85,247,0.12);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 20px;
  padding: 2px 12px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.cr-rank-badge.top {
  color: #f72585;
  background: rgba(247,37,133,0.12);
  border-color: rgba(247,37,133,0.3);
}
.cr-rank-badge.worst {
  color: #fe2c55;
  background: rgba(254,44,85,0.10);
  border-color: rgba(254,44,85,0.2);
}
.cr-month-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.cr-month-tab {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  color: #666;
  font-size: 10px;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.cr-month-tab:hover {
  border-color: #a855f7;
  color: #a855f7;
}
.cr-month-tab.active {
  background: rgba(247,37,133,0.15);
  border-color: #f72585;
  color: #f72585;
  font-weight: 600;
}
.cr-compare-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  font-size: 11px;
  color: #666;
  padding-bottom: 4px;
}
#crCompareSvgHolder {
  width: 100%;
}
#crCompareSvgHolder svg rect {
  cursor: default;
  transition: opacity 0.15s, filter 0.15s;
}
#crCompareSvgHolder svg rect:hover {
  opacity: 1 !important;
  filter: brightness(1.3);
}

/* ============================================================
   CREATIVES — name input & video preview
============================================================ */
.creative-name-input {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  padding: 7px 14px;
  outline: none;
  width: 200px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.creative-name-input::placeholder { color: #555; }
.creative-name-input:focus {
  border-color: #fe2c55;
  box-shadow: 0 0 0 3px rgba(254,44,85,0.12);
}

/* Hide name input for non-admin roles */
.creative-name-input.hidden { display: none; }

/* ============================================================
   SYNC STATUS INDICATOR
============================================================ */
.sync-status {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
  transition: all 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
  white-space: nowrap;
  cursor: default;
  user-select: none;
}

.sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.35s;
}

/* States */
.sync-idle, .sync-synced {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.2);
  color: #4ade80;
}
.sync-idle .sync-dot, .sync-synced .sync-dot {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.6);
  animation: sync-pulse-green 2.5s ease infinite;
}

.sync-saving {
  background: rgba(251,191,36,0.08);
  border-color: rgba(251,191,36,0.25);
  color: #fbbf24;
}
.sync-saving .sync-dot {
  background: #fbbf24;
  box-shadow: 0 0 6px rgba(251,191,36,0.6);
  animation: sync-spin 0.8s linear infinite;
}
.sync-saving .sync-label {
  background: linear-gradient(90deg, #fbbf24, #fff, #fbbf24);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 1.2s ease infinite;
}

.sync-offline {
  background: rgba(254,44,85,0.08);
  border-color: rgba(254,44,85,0.25);
  color: #fe2c55;
}
.sync-offline .sync-dot {
  background: #fe2c55;
  box-shadow: 0 0 6px rgba(254,44,85,0.6);
  animation: sync-pulse-red 1s ease infinite;
}

@keyframes sync-pulse-green {
  0%, 100% { box-shadow: 0 0 4px rgba(34,197,94,0.5); transform: scale(1); }
  50%       { box-shadow: 0 0 10px rgba(34,197,94,0.9); transform: scale(1.15); }
}
@keyframes sync-pulse-red {
  0%, 100% { box-shadow: 0 0 4px rgba(254,44,85,0.5); transform: scale(1); }
  50%       { box-shadow: 0 0 10px rgba(254,44,85,0.9); transform: scale(1.2); }
}
@keyframes sync-spin {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(1.2) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}

/* ── Online presence indicator ───────────────────────────────── */
.online-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  border-radius: 20px;
  background: rgba(37, 244, 238, 0.07);
  border: 1px solid rgba(37, 244, 238, 0.2);
  font-size: 12px;
  font-weight: 500;
  color: #25f4ee;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  transition: all 0.4s ease;
}

.online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25f4ee;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(37, 244, 238, 0.8);
  animation: online-pulse 2s ease-in-out infinite;
}

@keyframes online-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(37,244,238,0.5); transform: scale(1); }
  50%       { box-shadow: 0 0 12px rgba(37,244,238,1);   transform: scale(1.25); }
}

.online-avatars {
  display: flex;
  align-items: center;
  gap: -4px;
}

.online-avatar-chip {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #0d0d0d;
  margin-left: -5px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.online-avatar-chip:first-child { margin-left: 0; }

.online-avatar-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.online-count {
  font-weight: 800;
  font-size: 13px;
  color: #25f4ee;
  min-width: 8px;
  text-align: center;
}

.online-label {
  color: rgba(37, 244, 238, 0.75);
  font-size: 11px;
  font-weight: 500;
}

/* Solo mode — только ты, более приглушённый */
.online-indicator.solo {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.1);
  color: #555;
}
.online-indicator.solo .online-dot {
  background: #444;
  box-shadow: none;
  animation: none;
}
.online-indicator.solo .online-count,
.online-indicator.solo .online-label {
  color: #555;
}

/* Video preview in table — show play badge only when not hovering */
.media-thumb-wrap:hover .media-play-icon { opacity: 0; }
.preview-video { cursor: pointer; }

/* ============================================================
   GLOBAL GRADIENT TEXT
============================================================ */
h1, h2:not(.donut-percent), h3 {
  background: linear-gradient(135deg, #fe2c55 0%, #d4003f 40%, #00bfba 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 5s ease infinite;
}

#creativesTable thead tr,
#dataTable thead tr {
  background-color: #111;
}

#creativesTable thead th,
#dataTable thead th {
  font-weight: 700;
  letter-spacing: 0.4px;
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: #111;
}
#creativesTable thead th .th-label,
#dataTable thead th .th-label {
  display: inline-block;
  background: linear-gradient(90deg, #fe2c55, #d4003f, #00bfba, #fe2c55);
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 6s ease infinite;
}

.plan-section h3 {
  background: linear-gradient(90deg, #fe2c55, #d4003f, #00bfba);
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border-left-color: #fe2c55;
  animation: gradient-shift 5s ease infinite;
}

.creatives-header h3,
.leads-table-container h3 {
  background: linear-gradient(90deg, #00bfba, #d4003f, #fe2c55);
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 5s ease infinite;
}

/* ============================================================
   TABLE ROW HOVER — neon glow + slide
============================================================ */
#creativesTable tbody tr,
#dataTable tbody tr {
  transition: background 0.25s, transform 0.2s, box-shadow 0.2s;
  position: relative;
}

#creativesTable tbody tr:hover,
#dataTable tbody tr:hover {
  background: linear-gradient(90deg, rgba(254,44,85,0.07), rgba(37,244,238,0.05)) !important;
  transform: translateX(3px);
  box-shadow: inset 3px 0 0 #fe2c55, 0 2px 16px rgba(254,44,85,0.1);
}

#creativesTable tbody tr:hover td,
#dataTable tbody tr:hover td {
  color: #fff;
}

/* ============================================================
   BUTTON PULSE HOVER
============================================================ */
.btn-action,
.btn-cr-add-main,
.btn-plan-save,
.btn-card-action {
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn-action:hover,
.btn-cr-add-main:hover {
  transform: translateY(-2px) scale(1.04);
}

.btn-action::after,
.btn-cr-add-main::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(254,44,85,0.2), rgba(37,244,238,0.15));
  background-size: 200%;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: inherit;
  pointer-events: none;
  animation: gradient-shift 2s ease infinite;
}

.btn-action:hover::after,
.btn-cr-add-main:hover::after {
  opacity: 1;
}

/* ============================================================
   PLAN GRID ITEMS — shimmer on hover
============================================================ */
.plan-grid > div {
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.plan-grid > div:hover {
  background: linear-gradient(145deg, rgba(254,44,85,0.08), rgba(37,244,238,0.05)) !important;
  border-color: rgba(254,44,85,0.3) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(254,44,85,0.12);
}


/* ============================================================
   TT BALANCE — animated border glow
============================================================ */
.tt-balance {
  background: linear-gradient(#1a1a1a, #1a1a1a) padding-box,
              linear-gradient(135deg, #fe2c55, #25f4ee, #fe2c55) border-box;
  border: 1px solid transparent;
  animation: glow-pulse 3s ease infinite;
  background-size: 200%;
}

/* ============================================================
   CLICK RIPPLE EFFECT (hr / creator / analyst)
============================================================ */
@keyframes ripple-expand {
  0%   { width: 0; height: 0; opacity: 0.8; }
  100% { width: 380px; height: 380px; opacity: 0; }
}

.click-ripple {
  position: fixed;
  border-radius: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(37,244,238,0.55) 0%, rgba(254,44,85,0.3) 50%, transparent 70%);
  pointer-events: none;
  z-index: 99999;
  animation: ripple-expand 0.65s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}

/* ============================================================
   SECTION CONTAINERS — entrance stagger
============================================================ */
.tt-balance-container { animation: float-up 0.35s ease both; }
.date-bar             { animation: float-up 0.4s ease 0.05s both; }
.restore-panel        { animation: float-up 0.4s ease 0.1s both; }
.cards-wrapper        { animation: float-up 0.5s ease 0.12s both; }

/* ============================================================
   SEARCH INPUT — glow on focus
============================================================ */
#creativeSearch:focus {
  box-shadow: 0 0 0 2px rgba(37,244,238,0.3), 0 0 16px rgba(37,244,238,0.15);
  border-color: #25f4ee;
}

/* ============================================================
   CREATIVES TABLE — scan line sweep on hover
============================================================ */
.creatives-table-container {
  position: relative;
  overflow: hidden;
}
.creatives-table-container::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(37,244,238,0.4), transparent);
  top: -2px;
  pointer-events: none;
  animation: scan-line 4s ease infinite;
}

@keyframes scan-line {
  0%   { top: 0; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ============================================================
   DETAIL MODAL — smooth scale-in
============================================================ */
.cr-detail-box {
  animation: modal-slide-up 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
}

/* ============================================================
   TIKTOK PINK GLOW — все контейнеры
============================================================ */
.card,
.plan,
.plan-section,
.plan-chart,
.plan-grid > div,
.bi-chart-card,
.bi-modal,
.modal-box,
.cr-detail-box,
.creatives-table-container,
.table-wrapper,
.tiktok-status-bar {
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 0 0 1px rgba(254, 44, 85, 0.06) !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.card:hover,
.plan-section:hover,
.bi-chart-card:hover {
  border-color: rgba(255, 255, 255, 0.13) !important;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 20px rgba(254, 44, 85, 0.09) !important;
}