/* ============================================================
   SpyBR — Premium Ad Intelligence Dashboard
   Design System CSS v1.0
   Dark mode default + Light mode via body.light
   ============================================================ */

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

/* === CSS CUSTOM PROPERTIES (DARK — default) === */
:root{
  /* Background */
  --bg:          #0a0a0f;
  --bg-card:     #12121a;
  --bg-card-alt: #16161f;
  --bg-elevated: #1a1a25;
  --bg-input:    #0e0e16;
  --bg-hover:    #1e1e2e;

  /* Borders */
  --border:      #1e1e2e;
  --border-hover:#2a2a3d;
  --border-focus:#6366f1;

  /* Text */
  --text-primary:   #f1f1f4;
  --text-secondary: #9ca3b4;
  --text-muted:     #5a5e72;
  --text-disabled:  #3a3d4d;

  /* Brand Colors */
  --primary:     #6366f1;
  --primary-hover:#818cf8;
  --primary-bg:  rgba(99,102,241,.12);
  --primary-glow:rgba(99,102,241,.25);

  --accent:      #f97316;
  --accent-hover:#fb923c;
  --accent-bg:   rgba(249,115,22,.12);

  /* Semantic */
  --green:    #22c55e;
  --green-bg: rgba(34,197,94,.12);
  --red:      #ef4444;
  --red-bg:   rgba(239,68,68,.12);
  --amber:    #f59e0b;
  --amber-bg: rgba(245,158,11,.12);
  --purple:   #a855f7;
  --purple-bg:rgba(168,85,247,.12);
  --cyan:     #06b6d4;
  --cyan-bg:  rgba(6,182,212,.12);

  /* Spacing & Shape */
  --radius-sm:  6px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full:9999px;

  /* Sidebar */
  --sidebar-w:  260px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.3);
  --shadow:     0 4px 24px rgba(0,0,0,.12);
  --shadow-lg:  0 8px 40px rgba(0,0,0,.2);
  --shadow-glow:0 0 20px rgba(99,102,241,.15);

  /* Glass */
  --glass-bg:   rgba(18,18,26,.75);
  --glass-blur: 12px;
  --glass-border:rgba(255,255,255,.06);

  /* Typography */
  --ff: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Transitions */
  --transition-fast:   .15s ease;
  --transition:        .25s ease;
  --transition-slow:   .35s ease;
  --transition-colors: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;

  /* Scrollbar */
  --scrollbar-track: transparent;
  --scrollbar-thumb: #2a2a3d;
  --scrollbar-thumb-hover: #3a3d4d;
}

/* === LIGHT MODE === */
body.light{
  --bg:          #f8fafc;
  --bg-card:     #ffffff;
  --bg-card-alt: #f1f5f9;
  --bg-elevated: #ffffff;
  --bg-input:    #f1f5f9;
  --bg-hover:    #e2e8f0;

  --border:      #e2e8f0;
  --border-hover:#cbd5e1;
  --border-focus:#6366f1;

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --text-disabled:  #cbd5e1;

  --primary-bg:  rgba(99,102,241,.08);
  --primary-glow:rgba(99,102,241,.15);

  --accent-bg:   rgba(249,115,22,.08);
  --green-bg:    rgba(34,197,94,.08);
  --red-bg:      rgba(239,68,68,.08);
  --amber-bg:    rgba(245,158,11,.08);
  --purple-bg:   rgba(168,85,247,.08);
  --cyan-bg:     rgba(6,182,212,.08);

  --shadow-sm:   0 1px 2px rgba(0,0,0,.05);
  --shadow:      0 4px 24px rgba(0,0,0,.06);
  --shadow-lg:   0 8px 40px rgba(0,0,0,.1);
  --shadow-glow: 0 0 20px rgba(99,102,241,.08);

  --glass-bg:    rgba(255,255,255,.8);
  --glass-border:rgba(0,0,0,.06);

  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;
}

/* === BODY & GLOBAL === */
body{
  font-family:var(--ff);
  background:var(--bg);
  color:var(--text-primary);
  min-height:100vh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:var(--transition-colors);
}

a{color:var(--primary);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--primary-hover);text-decoration:underline}

input,select,button,textarea{font-family:var(--ff);outline:none}

::selection{background:var(--primary);color:#fff}

/* === SCROLLBAR === */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--scrollbar-track)}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}

/* Firefox */
*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}


/* ============================================================
   1. APP — Main flex container
   ============================================================ */
.app{
  display:flex;
  min-height:100vh;
}


/* ============================================================
   2. SIDEBAR — Fixed left navigation
   ============================================================ */
.sidebar,
.sb{
  width:var(--sidebar-w);
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  z-index:100;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  background:linear-gradient(180deg, #0d0d14 0%, #08080d 100%);
  border-right:1px solid var(--glass-border);
  color:#fff;
  transition:transform .3s ease, width .3s ease;
}
body.light .sidebar,
body.light .sb{
  background:linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}

/* Sidebar Logo */
.sidebar-logo,
.sb-logo{
  padding:20px 20px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sidebar-logo h1,
.sb-logo h1{
  font-size:20px;
  font-weight:800;
  letter-spacing:-.3px;
  background:linear-gradient(135deg, #f97316, #ef4444);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.sidebar-logo small,
.sb-logo small{
  font-size:10px;
  color:rgba(255,255,255,.35);
  letter-spacing:.5px;
  text-transform:uppercase;
}

/* Sidebar Nav */
.sidebar-nav,
.sb-nav{
  padding:12px 10px;
  flex:1;
}

/* Sidebar Divider & Section */
.sidebar-divider,
.sb-divider{
  height:1px;
  background:rgba(255,255,255,.06);
  margin:10px 14px;
}
.sidebar-section,
.sb-section{
  padding:0 14px;
  margin-bottom:6px;
  margin-top:10px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:rgba(255,255,255,.25);
  font-weight:600;
}

/* 3. SIDEBAR ITEM — Nav items with hover/active */
.sidebar-item,
.sb-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:var(--radius);
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,.55);
  transition:all var(--transition-fast);
  margin-bottom:2px;
  position:relative;
  user-select:none;
}
.sidebar-item:hover,
.sb-item:hover{
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.95);
}
.sidebar-item.active,
.sidebar-item.on,
.sb-item.on{
  background:linear-gradient(135deg, rgba(99,102,241,.2), rgba(99,102,241,.08));
  color:#fff;
  font-weight:600;
  box-shadow:inset 3px 0 0 var(--primary);
  border-radius:0 var(--radius) var(--radius) 0;
}
.sidebar-item .badge,
.sb-item .badge{
  margin-left:auto;
  background:rgba(255,255,255,.1);
  padding:2px 8px;
  border-radius:var(--radius-full);
  font-size:10px;
  font-weight:600;
  min-width:20px;
  text-align:center;
}

/* Sidebar Footer */
.sidebar-footer,
.sb-foot{
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:11px;
  color:rgba(255,255,255,.3);
  display:flex;
  align-items:center;
  gap:8px;
}

/* Status Dot */
.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.dot.on{
  background:#22c55e;
  box-shadow:0 0 8px rgba(34,197,94,.6);
  animation:pulse-dot 2s infinite;
}
.dot.off{
  background:#ef4444;
  box-shadow:0 0 8px rgba(239,68,68,.4);
}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 8px rgba(34,197,94,.6)}
  50%{box-shadow:0 0 16px rgba(34,197,94,.8)}
}


/* ============================================================
   4. MAIN — Right content area
   ============================================================ */
.main,
.mn{
  margin-left:var(--sidebar-w);
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  transition:margin-left .3s ease;
}


/* ============================================================
   5. TOPBAR — Search + filters sticky
   ============================================================ */
.topbar,
.top{
  padding:14px 24px;
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  position:sticky;
  top:0;
  z-index:50;
  transition:var(--transition-colors);
}

/* 6. TOPBAR SEARCH — Search input with icon */
.topbar-search,
.top-search{
  flex:1;
  min-width:240px;
  position:relative;
}
.topbar-search input,
.top-search input{
  width:100%;
  padding:10px 14px 10px 40px;
  background:var(--bg-input);
  border:2px solid var(--border);
  border-radius:var(--radius);
  color:var(--text-primary);
  font-size:13px;
  font-weight:500;
  transition:all var(--transition-fast);
}
.topbar-search input:focus,
.top-search input:focus{
  border-color:var(--primary);
  background:var(--bg-card);
  box-shadow:0 0 0 3px var(--primary-bg), var(--shadow-glow);
}
.topbar-search input::placeholder,
.top-search input::placeholder{
  color:var(--text-muted);
}
.topbar-search .ico,
.top-search .ico{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--text-muted);
  font-size:15px;
  pointer-events:none;
}

/* Topbar Advertiser Input */
.top-adv{width:200px}
.top-adv input{
  width:100%;
  padding:10px 14px;
  background:var(--bg-input);
  border:2px solid var(--border);
  border-radius:var(--radius);
  color:var(--text-primary);
  font-size:12px;
  transition:all var(--transition-fast);
}
.top-adv input:focus{
  border-color:var(--primary);
  background:var(--bg-card);
  box-shadow:0 0 0 3px var(--primary-bg);
}
.top-adv input::placeholder{color:var(--text-muted)}

/* Topbar Status */
.top-status{
  font-size:11px;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:500;
}


/* ============================================================
   7. CONTENT — Main scrollable area
   ============================================================ */
.content,
.ct{
  padding:24px;
  flex:1;
  transition:var(--transition-colors);
}


/* ============================================================
   8. STATS GRID — Stats cards row
   ============================================================ */
.stats-grid,
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:14px;
  margin-bottom:24px;
}

/* 9. STAT CARD — Individual stat with number + label */
.stat-card,
.st{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:18px 20px;
  box-shadow:var(--shadow-sm);
  transition:all var(--transition);
  position:relative;
  overflow:hidden;
}
.stat-card::before,
.st::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  opacity:0;
  transition:opacity var(--transition);
}
.stat-card:hover::before,
.st:hover::before{opacity:1}
.stat-card:hover,
.st:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  border-color:var(--border-hover);
}
.stat-card .lbl,
.st .lbl{
  font-size:11px;
  color:var(--text-muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:8px;
}
.stat-card .val,
.st .val{
  font-size:28px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.5px;
}
.st .val.c1{color:var(--primary)}
.st .val.c2{color:var(--green)}
.st .val.c3{color:var(--amber)}
.st .val.c4{color:var(--red)}
.st .val.c5{color:var(--cyan)}


/* ============================================================
   10. FILTERS ROW — Horizontal filter bar
   ============================================================ */
.filters-row,
.filters-bar{
  display:flex;
  gap:8px;
  margin-bottom:18px;
  flex-wrap:wrap;
  align-items:center;
}

/* Filter Group */
.filter-group{
  display:flex;
  gap:2px;
  background:var(--bg-card);
  padding:3px;
  border-radius:var(--radius);
  border:1px solid var(--border);
}

/* 11. FILTER PILL — Toggle button pill */
.filter-pill,
.fg-pill{
  padding:7px 14px;
  border-radius:var(--radius-sm);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  color:var(--text-muted);
  border:none;
  background:transparent;
  transition:all var(--transition-fast);
  white-space:nowrap;
}
.filter-pill:hover,
.fg-pill:hover{
  color:var(--text-primary);
  background:var(--bg-hover);
}
.filter-pill.active,
.filter-pill.on,
.fg-pill.on{
  background:var(--primary);
  color:#fff;
  box-shadow:0 2px 8px rgba(99,102,241,.3);
}

/* 12. FILTER SELECT — Styled select dropdown */
.filter-select{
  padding:7px 28px 7px 12px;
  border-radius:var(--radius-sm);
  font-size:11px;
  font-weight:500;
  background:var(--bg-card);
  border:1px solid var(--border);
  color:var(--text-secondary);
  cursor:pointer;
  transition:all var(--transition-fast);
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a5e72'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
}
.filter-select:hover{border-color:var(--border-hover)}
.filter-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}

/* 13. FILTER INPUT — Styled input */
.filter-input{
  padding:7px 12px;
  border-radius:var(--radius-sm);
  font-size:11px;
  font-weight:500;
  background:var(--bg-card);
  border:1px solid var(--border);
  color:var(--text-primary);
  transition:all var(--transition-fast);
}
.filter-input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-bg);
}
.filter-input::placeholder{color:var(--text-muted)}


/* ============================================================
   14. AD GRID — 4-column grid for ad cards
   ============================================================ */
.ad-grid,
.grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-bottom:24px;
}


/* ============================================================
   15. AD CARD — Individual ad card with hover effect
   ============================================================ */
.ad-card,
.card{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  cursor:pointer;
  transition:all var(--transition);
  box-shadow:var(--shadow-sm);
  position:relative;
}
.ad-card:hover,
.card:hover{
  border-color:var(--primary);
  box-shadow:var(--shadow), var(--shadow-glow);
  transform:translateY(-2px);
}

/* 16. AD CARD HEADER — Avatar + name + score */
.ad-card-header,
.card-top{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.card-av{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  color:#fff;
  flex-shrink:0;
  object-fit:cover;
}
.card-info{flex:1;min-width:0}
.card-info .name{
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--text-primary);
}
.card-info .meta{
  font-size:9px;
  color:var(--text-muted);
  font-weight:500;
}

/* 22. SCORE PILL — Colored score indicator */
.score-pill{
  padding:3px 10px;
  border-radius:var(--radius-full);
  font-size:11px;
  font-weight:700;
  flex-shrink:0;
  letter-spacing:.3px;
}
.score-pill.high{background:var(--green-bg);color:var(--green)}
.score-pill.mid{background:var(--primary-bg);color:var(--primary)}
.score-pill.low{background:var(--amber-bg);color:var(--amber)}
.score-pill.vlow{background:var(--bg-hover);color:var(--text-muted)}

/* 17. AD CARD CREATIVE — Image/video area */
.ad-card-creative,
.card-creative{
  position:relative;
  width:100%;
  aspect-ratio:9/12;
  background:#000;
  overflow:hidden;
}
.ad-card-creative img,
.card-creative img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.ad-card:hover .ad-card-creative img,
.card:hover .card-creative img{
  transform:scale(1.04);
}
.ad-card-creative video,
.card-creative video{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
  display:none;
}
.ad-card-creative iframe,
.card-creative iframe{
  width:100%;
  height:100%;
  border:none;
  position:absolute;
  inset:0;
  pointer-events:none;
}
.card-creative .play-icon{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:50px;height:50px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  transition:transform var(--transition);
  pointer-events:none;
}
.card:hover .play-icon{transform:translate(-50%,-50%) scale(1.1)}
.card-creative .sound-btn{
  position:absolute;
  bottom:8px;right:8px;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);
  color:#fff;
  padding:4px 8px;
  border-radius:var(--radius-sm);
  font-size:10px;
  cursor:pointer;
  display:none;
  z-index:2;
  border:none;
}

/* 21. AD CARD BADGE — VIDEO / HOT / AI badges */
.ad-card-badge{
  position:absolute;
  top:8px;
  left:8px;
  padding:3px 10px;
  border-radius:var(--radius-sm);
  font-size:9px;
  font-weight:700;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.5px;
  backdrop-filter:blur(4px);
  z-index:2;
}
.ad-card-badge.video,
.card-creative .video-badge{
  position:absolute;
  top:8px;left:8px;
  background:rgba(239,68,68,.9);
  color:#fff;
  padding:3px 8px;
  border-radius:var(--radius-sm);
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
}
.ad-card-badge.hot,
.card-creative .hot-badge{
  position:absolute;
  top:8px;right:8px;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);
  color:#fff;
  padding:4px 10px;
  border-radius:var(--radius-full);
  font-size:10px;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:4px;
}
.ad-card-badge.ai{
  background:linear-gradient(135deg, #8b5cf6, #6366f1);
}

/* 18. AD CARD METRICS — Metrics row (impressions, days, likes) */
.ad-card-metrics,
.card-info-bar{
  padding:10px 14px;
}
.card-dates{
  font-size:9px;
  color:var(--text-muted);
  margin-bottom:6px;
}
.card-metrics-row{
  display:flex;
  gap:0;
  margin-bottom:8px;
}
.card-met{
  flex:1;
  text-align:center;
  padding:4px 0;
}
.card-met .mv{
  font-size:14px;
  font-weight:800;
  color:var(--text-primary);
}
.card-met .ml{
  font-size:8px;
  color:var(--text-muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.3px;
}

/* 19. AD CARD TEXT — Ad copy preview */
.ad-card-text,
.card-text{
  font-size:11px;
  color:var(--text-secondary);
  line-height:1.4;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:8px;
  padding:0 14px;
}

/* CTA Pill */
.card-cta-pill{
  display:inline-block;
  padding:3px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:9px;
  font-weight:600;
  color:var(--text-muted);
  margin:0 14px 8px;
}

/* 20. AD CARD FOOTER — Page name + action buttons */
.ad-card-footer,
.card-footer{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-top:1px solid var(--border);
}
.card-avatar{
  width:24px;
  height:24px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  border:1px solid var(--border);
}
.card-avatar img{width:100%;height:100%;object-fit:cover}
.card-page-name{
  font-size:11px;
  font-weight:600;
  color:var(--text-primary);
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.card-acts{display:flex;gap:4px;flex-shrink:0}
.card-act{
  width:26px;height:26px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-card);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  cursor:pointer;
  transition:all var(--transition-fast);
  color:var(--text-muted);
}
.card-act:hover{
  background:var(--primary-bg);
  border-color:var(--primary);
  color:var(--primary);
}

/* Card Metrics & Tags below creative */
.card-metrics{
  padding:10px 14px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

/* Card Actions Row */
.card-actions{
  padding:10px 14px;
  border-top:1px solid var(--border);
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.ca-btn{
  padding:6px 12px;
  border-radius:var(--radius-sm);
  font-size:10px;
  font-weight:600;
  cursor:pointer;
  border:1px solid var(--border);
  background:var(--bg-card);
  color:var(--text-secondary);
  transition:all var(--transition-fast);
  display:inline-flex;
  align-items:center;
  gap:4px;
  text-decoration:none;
}
.ca-btn:hover{
  background:var(--bg-hover);
  color:var(--text-primary);
  border-color:var(--border-hover);
  text-decoration:none;
}
.ca-btn.primary{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}
.ca-btn.primary:hover{
  background:var(--primary-hover);
}


/* ============================================================
   41. TAG — Colored tag pill
   ============================================================ */
.tag{
  padding:3px 8px;
  border-radius:var(--radius-sm);
  font-size:10px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:3px;
  white-space:nowrap;
}
.t-niche{background:var(--purple-bg);color:var(--purple)}
.t-days{background:var(--amber-bg);color:var(--amber)}
.t-active{background:var(--green-bg);color:var(--green)}
.t-inactive{background:var(--red-bg);color:var(--red)}
.t-imp{background:var(--cyan-bg);color:var(--cyan)}
.t-spend{background:var(--amber-bg);color:var(--amber)}
.t-platform{background:var(--primary-bg);color:var(--primary)}


/* ============================================================
   BUTTONS
   ============================================================ */

/* 31. BTN — Base button */
.btn{
  padding:10px 18px;
  border-radius:var(--radius);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  border:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:all var(--transition-fast);
  white-space:nowrap;
  user-select:none;
  text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.98)}

/* 32. BTN PRIMARY — Gradient orange button */
.btn-primary{
  background:linear-gradient(135deg, #f97316, #ef4444);
  color:#fff;
  box-shadow:0 2px 12px rgba(249,115,22,.3);
}
.btn-primary:hover{
  transform:scale(1.02) translateY(-1px);
  box-shadow:0 4px 20px rgba(249,115,22,.45);
}

/* 33. BTN SECONDARY — Outline button */
.btn-secondary{
  background:var(--bg-card);
  color:var(--text-secondary);
  border:1px solid var(--border);
}
.btn-secondary:hover{
  background:var(--bg-hover);
  border-color:var(--border-hover);
  color:var(--text-primary);
  transform:scale(1.02);
}

/* 34. BTN ICON — Icon-only button */
.btn-icon{
  padding:8px;
  border-radius:var(--radius);
  background:var(--bg-card);
  border:1px solid var(--border);
  color:var(--text-muted);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  transition:all var(--transition-fast);
  width:36px;
  height:36px;
}
.btn-icon:hover{
  background:var(--primary-bg);
  border-color:var(--primary);
  color:var(--primary);
  transform:scale(1.02);
}

/* Detail Buttons (modal) */
.d-btn{
  padding:9px 16px;
  border-radius:var(--radius);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  border:1px solid var(--border);
  background:var(--bg-card);
  color:var(--text-secondary);
  display:inline-flex;
  align-items:center;
  gap:5px;
  text-decoration:none;
  transition:all var(--transition-fast);
}
.d-btn:hover{background:var(--bg-hover);text-decoration:none}
.d-btn.accent{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}
.d-btn.accent:hover{background:var(--primary-hover)}


/* ============================================================
   PAGINATION
   ============================================================ */
.pag{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:20px;
}
.pag button{
  padding:8px 16px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text-secondary);
  cursor:pointer;
  font-size:12px;
  font-weight:600;
  transition:all var(--transition-fast);
}
.pag button:hover:not(:disabled){
  border-color:var(--primary);
  color:var(--primary);
  background:var(--primary-bg);
}
.pag button:disabled{opacity:.3;cursor:not-allowed}
.pag .pi{font-size:12px;color:var(--text-muted);font-weight:600}


/* ============================================================
   23-29. MODAL SYSTEM
   ============================================================ */

/* 23. MODAL OVERLAY — Full screen overlay */
.modal-overlay,
.mo{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:1000;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:24px;
  overflow-y:auto;
  animation:modal-overlay-in .25s ease;
}
.modal-overlay.open,
.mo.open{
  display:flex;
}

@keyframes modal-overlay-in{
  from{opacity:0}
  to{opacity:1}
}

/* 24. MODAL — Modal container 960px max */
.modal,
.mdl{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  width:100%;
  max-width:960px;
  margin:24px auto;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  animation:modal-slide-in .3s ease;
}

@keyframes modal-slide-in{
  from{opacity:0;transform:translateY(20px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* 25. MODAL HEADER — Title + close button */
.modal-header,
.mdl-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 24px;
  border-bottom:1px solid var(--border);
}
.modal-header h2,
.mdl-h h2{
  font-size:17px;
  font-weight:700;
  color:var(--text-primary);
}
.mdl-x{
  width:34px;height:34px;
  border-radius:50%;
  border:none;
  background:var(--bg-hover);
  color:var(--text-muted);
  cursor:pointer;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all var(--transition-fast);
}
.mdl-x:hover{
  background:var(--red);
  color:#fff;
  transform:rotate(90deg);
}

/* 26. MODAL BODY — Content area */
.modal-body,
.mdl-b{
  padding:0;
  overflow:hidden;
}

/* 27. MODAL TABS — Tab navigation */
.modal-tabs,
.cm-tabs{
  display:flex;
  border-bottom:2px solid var(--border);
  background:var(--bg-card-alt);
}

/* 28. MODAL TAB — Individual tab */
.modal-tab,
.det-tab,
.cm-tab{
  padding:12px 20px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  color:var(--text-muted);
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  transition:all var(--transition-fast);
  white-space:nowrap;
}
.modal-tab:hover,
.det-tab:hover,
.cm-tab:hover{
  color:var(--text-primary);
  background:var(--bg-hover);
}
.modal-tab.active,
.modal-tab.on,
.det-tab.on,
.cm-tab.on{
  color:var(--primary);
  border-bottom-color:var(--primary);
}

/* 29. MODAL PANEL — Tab content panel */
.modal-panel,
.cm-p{
  display:none;
  padding:20px 24px;
}
.modal-panel.active,
.modal-panel.on,
.cm-p.on{
  display:block;
}

/* Modal Detail Content */
.detail-post{
  background:var(--bg-card-alt);
  border-radius:var(--radius-lg);
  padding:20px;
  margin-bottom:16px;
  border:1px solid var(--border);
}
.detail-post .dp-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.detail-post .dp-title{
  font-size:16px;
  font-weight:700;
  margin-bottom:8px;
}
.detail-post .dp-body{
  font-size:13px;
  color:var(--text-secondary);
  line-height:1.7;
  white-space:pre-wrap;
}
.detail-post .dp-desc{
  font-size:12px;
  color:var(--text-muted);
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--border);
}
.detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:16px;
}
.dg-item{
  background:var(--bg-card-alt);
  padding:12px;
  border-radius:var(--radius);
  border:1px solid var(--border);
}
.dg-item .l{
  font-size:9px;
  color:var(--text-muted);
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:.3px;
  margin-bottom:4px;
}
.dg-item .v{font-size:13px;font-weight:500}

/* Score Bar */
.score-bar-wrap{margin-bottom:20px}
.score-bar-top{
  display:flex;
  justify-content:space-between;
  margin-bottom:6px;
  font-size:12px;
  font-weight:600;
}
.score-bar{
  height:8px;
  background:var(--bg-hover);
  border-radius:var(--radius-full);
  overflow:hidden;
}
.score-bar-fill{
  height:100%;
  border-radius:var(--radius-full);
  transition:width 1s ease;
  background:linear-gradient(90deg, var(--amber), var(--green));
}

/* Collect Modal Fields */
.cm-field{margin-bottom:14px}
.cm-field label{
  display:block;
  font-size:11px;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:5px;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.cm-field input,
.cm-field select,
.cm-field textarea{
  width:100%;
  padding:10px 14px;
  background:var(--bg-input);
  border:1px solid var(--border);
  color:var(--text-primary);
  border-radius:var(--radius);
  font-size:12px;
  transition:all var(--transition-fast);
}
.cm-field input:focus,
.cm-field select:focus,
.cm-field textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-bg);
}
.cm-field textarea{height:80px;resize:vertical}
.cm-log{
  background:#0a0a0f;
  color:#a3e635;
  border-radius:var(--radius);
  padding:14px;
  margin-top:14px;
  font-size:11px;
  max-height:200px;
  overflow-y:auto;
  font-family:'JetBrains Mono', 'Fira Code', monospace;
  white-space:pre-wrap;
  border:1px solid rgba(163,230,53,.1);
}


/* ============================================================
   30. TABLE — Scrollable styled table
   ============================================================ */
.table-container{
  overflow-x:auto;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  margin-bottom:20px;
}
.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.data-table thead{
  background:var(--bg-card-alt);
  border-bottom:2px solid var(--border);
}
.data-table th{
  padding:12px 16px;
  text-align:left;
  font-size:11px;
  font-weight:600;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  white-space:nowrap;
}
.data-table td{
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  color:var(--text-secondary);
  white-space:nowrap;
}
.data-table tbody tr{
  transition:background var(--transition-fast);
}
.data-table tbody tr:hover{
  background:var(--bg-hover);
}
.data-table tbody tr:last-child td{border-bottom:none}


/* ============================================================
   35. TOAST SYSTEM
   ============================================================ */
.toast-container,
.toast-c{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:2000;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}
.toast{
  padding:14px 20px;
  border-radius:var(--radius);
  font-size:12px;
  font-weight:600;
  color:#fff;
  max-width:380px;
  box-shadow:var(--shadow-lg);
  pointer-events:auto;
  animation:toast-in .35s ease, toast-out .35s ease 3.5s forwards;
  display:flex;
  align-items:center;
  gap:8px;
  backdrop-filter:blur(8px);
}
.toast.ok,
.toast.success{background:rgba(34,197,94,.95)}
.toast.err,
.toast.error{background:rgba(239,68,68,.95)}
.toast.info{background:rgba(99,102,241,.95)}
.toast.warn,
.toast.warning{background:rgba(245,158,11,.95)}

@keyframes toast-in{
  from{transform:translateX(120%);opacity:0}
  to{transform:translateX(0);opacity:1}
}
@keyframes toast-out{
  to{opacity:0;transform:translateX(40px)}
}


/* ============================================================
   36. LOADING & SPINNER
   ============================================================ */
.loading{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:48px;
  flex-direction:column;
  gap:12px;
}
.spinner{
  width:32px;
  height:32px;
  border:3px solid var(--border);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{
  to{transform:rotate(360deg)}
}


/* ============================================================
   37. SKELETON — Skeleton loading placeholder
   ============================================================ */
.skeleton{
  background:linear-gradient(
    90deg,
    var(--bg-hover) 25%,
    var(--bg-elevated) 50%,
    var(--bg-hover) 75%
  );
  background-size:200%;
  animation:shimmer 1.5s ease infinite;
  border-radius:var(--radius);
}
.skel{
  background:linear-gradient(
    90deg,
    var(--bg-hover) 25%,
    var(--bg-elevated) 50%,
    var(--bg-hover) 75%
  );
  background-size:200%;
  animation:shimmer 1.5s ease infinite;
  border-radius:var(--radius);
}
@keyframes shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}


/* ============================================================
   38. EMPTY STATE — Empty content message
   ============================================================ */
.empty-state,
.empty{
  text-align:center;
  padding:80px 24px;
  color:var(--text-muted);
}
.empty-state .ico,
.empty .ico{
  font-size:52px;
  margin-bottom:16px;
  opacity:.7;
}
.empty-state h3,
.empty h3{
  font-size:18px;
  margin-bottom:8px;
  color:var(--text-secondary);
  font-weight:700;
}
.empty-state p,
.empty p{
  font-size:13px;
  max-width:420px;
  margin:0 auto;
  line-height:1.6;
}


/* ============================================================
   39. BADGE — Small count badge
   ============================================================ */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:var(--radius-full);
  font-size:10px;
  font-weight:600;
  min-width:20px;
  background:var(--primary-bg);
  color:var(--primary);
}
.badge.red{background:var(--red-bg);color:var(--red)}
.badge.green{background:var(--green-bg);color:var(--green)}
.badge.amber{background:var(--amber-bg);color:var(--amber)}


/* ============================================================
   BANNER
   ============================================================ */
.banner{
  border-radius:var(--radius-lg);
  padding:14px 18px;
  margin-bottom:18px;
  font-size:12px;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow:var(--shadow-sm);
}
.banner.warn{
  background:var(--amber-bg);
  color:var(--amber);
  border:1px solid rgba(245,158,11,.2);
}
.banner.ok{
  background:var(--green-bg);
  color:var(--green);
  border:1px solid rgba(34,197,94,.2);
}


/* ============================================================
   42. TRACKER CARD — Tracker monitor card
   ============================================================ */
.tracker-card{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:20px;
  margin-bottom:14px;
  box-shadow:var(--shadow-sm);
  transition:all var(--transition);
}
.tracker-card:hover{
  border-color:var(--primary);
  box-shadow:var(--shadow);
  transform:translateY(-2px);
}
.tracker-card h3{
  font-size:15px;
  font-weight:700;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-primary);
}

/* 43. EVENT ITEM — Tracker event in timeline */
.event-item{
  display:flex;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
  position:relative;
}
.event-item:last-child{border-bottom:none}
.event-item::before{
  content:'';
  position:absolute;
  left:5px;
  top:28px;
  bottom:-12px;
  width:2px;
  background:var(--border);
}
.event-item:last-child::before{display:none}
.event-item .event-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--primary);
  flex-shrink:0;
  margin-top:4px;
  box-shadow:0 0 0 3px var(--primary-bg);
}
.event-item .event-content{flex:1;min-width:0}
.event-item .event-title{
  font-size:13px;
  font-weight:600;
  color:var(--text-primary);
  margin-bottom:2px;
}
.event-item .event-desc{
  font-size:11px;
  color:var(--text-muted);
}
.event-item .event-time{
  font-size:10px;
  color:var(--text-muted);
  flex-shrink:0;
  white-space:nowrap;
}


/* ============================================================
   44. RANKING CARD — Top advertiser ranking card
   ============================================================ */
.ranking-card{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:20px;
  margin-bottom:14px;
  box-shadow:var(--shadow-sm);
  transition:all var(--transition);
}
.ranking-card:hover{
  border-color:var(--primary);
  box-shadow:var(--shadow);
  transform:translateY(-2px);
}
.ranking-card .rank-number{
  font-size:32px;
  font-weight:800;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1;
}
.ranking-card .rank-name{
  font-size:15px;
  font-weight:700;
  color:var(--text-primary);
}
.ranking-card .rank-meta{
  font-size:11px;
  color:var(--text-muted);
}


/* ============================================================
   45. HOT CARD — Trending product card
   ============================================================ */
.hot-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
  flex-wrap:wrap;
  gap:12px;
}
.hot-header h2{
  font-size:22px;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:8px;
}
.hot-filters{display:flex;gap:8px;flex-wrap:wrap}

/* Hot Category Grid */
.hot-cats{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
  gap:12px;
  margin-bottom:24px;
}
.hot-cat{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:16px;
  cursor:pointer;
  transition:all var(--transition);
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.hot-cat:hover{
  border-color:var(--primary);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.hot-cat.selected{
  border-color:var(--primary);
  background:var(--primary-bg);
}
.hot-cat .hc-name{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:4px;
  letter-spacing:.5px;
}
.hot-cat .hc-temp{font-size:28px;font-weight:800;line-height:1}
.hot-cat .hc-info{font-size:10px;color:var(--text-muted);margin-top:6px}
.hot-cat .hc-bar{
  height:4px;
  background:var(--bg-hover);
  border-radius:var(--radius-full);
  margin-top:10px;
  overflow:hidden;
}
.hot-cat .hc-bar-fill{
  height:100%;
  border-radius:var(--radius-full);
  transition:width .8s ease;
}

/* Hot Product Grid */
.hot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
  gap:16px;
  margin-bottom:24px;
}
.hot-card{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  cursor:pointer;
  transition:all var(--transition);
  box-shadow:var(--shadow-sm);
}
.hot-card:hover{
  border-color:var(--primary);
  transform:translateY(-3px);
  box-shadow:var(--shadow), var(--shadow-glow);
}
.hot-card .hd-creative{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  background:#000;
  overflow:hidden;
}
.hot-card .hd-creative img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.hot-card:hover .hd-creative img{transform:scale(1.05)}
.hot-card .hd-creative iframe{width:100%;height:100%;border:none}
.hot-card .hd-tag{
  position:absolute;
  top:8px;left:8px;
  padding:3px 10px;
  border-radius:var(--radius-sm);
  font-size:10px;
  font-weight:700;
  color:#fff;
}
.hot-card .hd-temp{
  position:absolute;
  top:8px;right:8px;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);
  color:#fff;
  padding:4px 12px;
  border-radius:var(--radius-full);
  font-size:12px;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:4px;
}
.hot-card .hd-video-badge{
  position:absolute;
  bottom:8px;right:8px;
  background:rgba(239,68,68,.9);
  color:#fff;
  padding:3px 8px;
  border-radius:var(--radius-sm);
  font-size:9px;
  font-weight:700;
}
.hot-card .hd-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.3);
  opacity:0;
  transition:opacity var(--transition);
}
.hot-card:hover .hd-play{opacity:1}
.hot-card .hd-play-btn{
  width:50px;height:50px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.hot-card .hd-body{padding:14px}
.hot-card .hd-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.hot-card .hd-avatar{
  width:32px;height:32px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  border:1px solid var(--border);
}
.hot-card .hd-avatar img{width:100%;height:100%;object-fit:cover}
.hot-card .hd-name{
  font-size:12px;font-weight:600;
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hot-card .hd-text{
  font-size:11px;
  color:var(--text-secondary);
  line-height:1.5;
  max-height:42px;
  overflow:hidden;
  margin-bottom:10px;
}
.hot-card .hd-metrics{
  display:flex;
  gap:0;
  border-top:1px solid var(--border);
}
.hot-card .hd-met{
  flex:1;
  text-align:center;
  padding:10px 4px;
  border-right:1px solid var(--border);
}
.hot-card .hd-met:last-child{border-right:none}
.hot-card .hd-met .hm-val{
  font-size:14px;
  font-weight:800;
  color:var(--text-primary);
}
.hot-card .hd-met .hm-lbl{
  font-size:9px;
  color:var(--text-muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.3px;
}

/* Temperature Gauge */
.temp-gauge{display:inline-flex;align-items:center;gap:4px}
.temp-gauge .tg-bar{
  width:40px;
  height:6px;
  background:var(--bg-hover);
  border-radius:var(--radius-full);
  overflow:hidden;
}
.temp-gauge .tg-fill{height:100%;border-radius:var(--radius-full)}


/* ============================================================
   46. THEME TOGGLE — Dark/Light mode switch button
   ============================================================ */
.theme-toggle{
  width:42px;
  height:24px;
  border-radius:var(--radius-full);
  border:none;
  background:var(--bg-hover);
  cursor:pointer;
  position:relative;
  transition:background .3s ease;
  flex-shrink:0;
}
.theme-toggle::after{
  content:'';
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--primary);
  transition:transform .3s ease;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
body.light .theme-toggle{
  background:var(--border);
}
body.light .theme-toggle::after{
  transform:translateX(18px);
  background:var(--accent);
}


/* ============================================================
   47. ADVANCED FILTERS PANEL — Collapsible
   ============================================================ */
.adv-filters-panel{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  margin-bottom:18px;
  display:none;
  animation:panel-in .25s ease;
}
.adv-filters-panel.open{display:block}

@keyframes panel-in{
  from{opacity:0;max-height:0}
  to{opacity:1;max-height:600px}
}

.adv-filters-panel .afp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:12px;
}
.adv-filters-panel .afp-field{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.adv-filters-panel .afp-field label{
  font-size:10px;
  color:var(--text-muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.adv-filters-panel .afp-field input,
.adv-filters-panel .afp-field select{
  padding:8px 12px;
  background:var(--bg-input);
  border:1px solid var(--border);
  color:var(--text-primary);
  border-radius:var(--radius-sm);
  font-size:12px;
  transition:all var(--transition-fast);
}
.adv-filters-panel .afp-field input:focus,
.adv-filters-panel .afp-field select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-bg);
}


/* ============================================================
   48. TOOLTIP — Hover tooltip
   ============================================================ */
.tooltip{
  position:relative;
}
.tooltip::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) scale(.9);
  background:var(--bg-elevated);
  color:var(--text-primary);
  padding:6px 12px;
  border-radius:var(--radius-sm);
  font-size:11px;
  font-weight:500;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:all var(--transition-fast);
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  z-index:100;
}
.tooltip::before{
  content:'';
  position:absolute;
  bottom:calc(100% + 4px);
  left:50%;
  transform:translateX(-50%);
  border:4px solid transparent;
  border-top-color:var(--bg-elevated);
  pointer-events:none;
  opacity:0;
  transition:opacity var(--transition-fast);
  z-index:100;
}
.tooltip:hover::after{
  opacity:1;
  transform:translateX(-50%) scale(1);
}
.tooltip:hover::before{opacity:1}


/* ============================================================
   TOOL CARDS (Ferramentas page)
   ============================================================ */
.tool-card{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:22px;
  margin-bottom:14px;
  box-shadow:var(--shadow-sm);
  transition:all var(--transition);
}
.tool-card:hover{
  border-color:var(--border-hover);
  box-shadow:var(--shadow);
}
.tool-card h3{
  font-size:15px;
  font-weight:700;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-primary);
}
.tool-field{margin-bottom:12px}
.tool-field label{
  display:block;
  font-size:11px;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:5px;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.tool-field input{
  width:100%;
  padding:9px 14px;
  background:var(--bg-input);
  border:1px solid var(--border);
  color:var(--text-primary);
  border-radius:var(--radius);
  font-size:12px;
  transition:all var(--transition-fast);
}
.tool-field input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-bg);
}
.tool-result{
  background:var(--bg-card-alt);
  padding:14px;
  border-radius:var(--radius);
  font-size:12px;
  color:var(--text-secondary);
  margin-top:12px;
  word-break:break-all;
  font-weight:500;
  border:1px solid var(--border);
}


/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* 3 columns at 1400px */
@media (max-width:1400px){
  .ad-grid,
  .grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

/* 2 columns at 1000px, sidebar collapses */
@media (max-width:1000px){
  .ad-grid,
  .grid{
    grid-template-columns:repeat(2, 1fr);
  }
  .sidebar,
  .sb{
    transform:translateX(-100%);
  }
  .sidebar.open,
  .sb.open{
    transform:translateX(0);
    box-shadow:var(--shadow-lg);
  }
  .main,
  .mn{
    margin-left:0;
  }
  .detail-grid{
    grid-template-columns:1fr;
  }
  .content,
  .ct{
    padding:16px;
  }
}

/* 1 column at 600px, sidebar hidden */
@media (max-width:600px){
  .ad-grid,
  .grid{
    grid-template-columns:1fr;
  }
  .hot-grid{
    grid-template-columns:1fr;
  }
  .topbar,
  .top{
    padding:10px 14px;
    gap:8px;
  }
  .topbar-search,
  .top-search{
    min-width:100%;
  }
  .top-adv{
    width:100%;
  }
  .content,
  .ct{
    padding:12px;
  }
  .modal,
  .mdl{
    margin:8px;
    border-radius:var(--radius-lg);
  }
  .stats-grid,
  .stats{
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
  }
  .stat-card .val,
  .st .val{
    font-size:22px;
  }
  .hot-cats{
    grid-template-columns:repeat(2, 1fr);
  }
}


/* ============================================================
   TRANSITION OVERRIDES — Smooth theme switching
   ============================================================ */
body,
body *{
  transition-property:color, background-color, border-color, box-shadow, opacity;
  transition-duration:0s;
}

/* Enable smooth transitions only when toggling theme */
body.transitioning,
body.transitioning *{
  transition-duration:.3s !important;
  transition-timing-function:ease !important;
}

/* Alternative: always-smooth approach for key elements */
.sidebar, .sb,
.main, .mn,
.topbar, .top,
.content, .ct,
.stat-card, .st,
.ad-card, .card,
.modal, .mdl,
.hot-card,
.hot-cat,
.tracker-card,
.ranking-card,
.tool-card,
.btn,
.filter-pill, .fg-pill,
.filter-select,
.filter-input,
.tag,
.badge,
.toast,
.banner{
  transition:all .3s ease;
}


/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.text-primary{color:var(--primary) !important}
.text-green{color:var(--green) !important}
.text-red{color:var(--red) !important}
.text-amber{color:var(--amber) !important}
.text-muted{color:var(--text-muted) !important}

.bg-primary{background:var(--primary-bg) !important}
.bg-green{background:var(--green-bg) !important}
.bg-red{background:var(--red-bg) !important}
.bg-amber{background:var(--amber-bg) !important}

.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-2{gap:8px}
.gap-3{gap:12px}
.gap-4{gap:16px}
.w-full{width:100%}
.mt-2{margin-top:8px}
.mt-4{margin-top:16px}
.mb-2{margin-bottom:8px}
.mb-4{margin-bottom:16px}

/* Focus visible for accessibility */
:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

/* ============================================================
   AUTH — Language Toggle, User Menu, Credits
   ============================================================ */

/* Language Toggle */
.lang-toggle{
  display:flex;
  gap:3px;
  margin:0 4px;
}
.lang-toggle .lang-btn{
  padding:4px 8px;
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  background:transparent;
  color:var(--text-muted);
  font-size:10px;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
  font-family:var(--ff);
  letter-spacing:.5px;
}
.lang-toggle .lang-btn:hover{
  background:rgba(255,255,255,.06);
  color:var(--text-primary);
}
.lang-toggle .lang-btn.active{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}

/* User Menu */
.user-menu{
  display:flex;
  align-items:center;
  position:relative;
}
.user-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 10px 4px 4px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  cursor:pointer;
  transition:all .2s;
  font-family:var(--ff);
}
.user-btn:hover{
  background:rgba(255,255,255,.08);
  border-color:var(--border-hover);
}
.user-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--primary), #8b5cf6);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
}
.user-name{
  font-size:12px;
  font-weight:600;
  color:var(--text-primary);
  max-width:100px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* User Dropdown */
.user-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:260px;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
  z-index:200;
  overflow:hidden;
  animation:dropIn .2s ease;
}
@keyframes dropIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}
.user-dropdown-info{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}
.user-email{
  font-size:12px;
  color:var(--text-secondary);
  margin-bottom:6px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.user-plan-badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:var(--radius-full);
  font-size:10px;
  font-weight:700;
  letter-spacing:.5px;
}
.user-plan-badge.plan-free{background:rgba(255,255,255,.08);color:var(--text-muted)}
.user-plan-badge.plan-starter{background:rgba(34,197,94,.12);color:var(--green)}
.user-plan-badge.plan-pro{background:rgba(99,102,241,.12);color:var(--primary)}
.user-plan-badge.plan-agency{background:rgba(249,115,22,.12);color:var(--accent)}

/* Credits Bar */
.user-credits-bar{
  padding:10px 16px;
  border-bottom:1px solid var(--border);
}
.credits-label{
  font-size:11px;
  color:var(--text-secondary);
  margin-bottom:6px;
  display:flex;
  justify-content:space-between;
}
.credits-track{
  width:100%;
  height:4px;
  background:rgba(255,255,255,.06);
  border-radius:2px;
  overflow:hidden;
}
.credits-fill{
  height:100%;
  border-radius:2px;
  background:var(--green);
  transition:width .5s ease, background .3s;
}

.user-dropdown-sep{
  height:1px;
  background:var(--border);
}
.user-dropdown-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  font-size:13px;
  color:var(--text-secondary);
  text-decoration:none;
  cursor:pointer;
  transition:all .15s;
  border:none;
  background:none;
  width:100%;
  font-family:var(--ff);
  text-align:left;
}
.user-dropdown-item:hover{
  background:rgba(255,255,255,.05);
  color:var(--text-primary);
}

/* Login link */
.login-link{
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px 14px;
  border-radius:var(--radius);
  background:linear-gradient(135deg, var(--primary), #8b5cf6);
  color:#fff;
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  transition:all .25s;
  font-family:var(--ff);
}
.login-link:hover{
  box-shadow:0 4px 15px rgba(99,102,241,.4);
  transform:translateY(-1px);
  color:#fff;
  text-decoration:none;
}

/* Credits Plan Cards (popup) */
.credits-plan-card{
  display:block;
  padding:16px 12px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:var(--radius);
  text-align:center;
  text-decoration:none;
  transition:all .25s;
  cursor:pointer;
}
.credits-plan-card:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(99,102,241,.4);
  transform:translateY(-2px);
  text-decoration:none;
}

/* Trending Products Grid */
.tp-count{color:var(--text-secondary,#888);font-size:13px;margin:8px 0 16px;padding:0 4px}
.tp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;padding:4px}
.tp-card{background:var(--card-bg,#1a1a2e);border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;border:1px solid var(--border,rgba(255,255,255,.08))}
.tp-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.tp-img-wrap{position:relative;width:100%;aspect-ratio:1;background:#111;overflow:hidden;display:flex;align-items:center;justify-content:center}
.tp-img-wrap img{width:100%;height:100%;object-fit:cover}
.tp-no-img{font-size:48px;opacity:.3}
.tp-discount{position:absolute;top:8px;right:8px;background:#e74c3c;color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px}
.tp-info{padding:12px}
.tp-name{font-size:13px;font-weight:500;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text-primary,#eee);margin-bottom:6px}
.tp-meta{font-size:11px;color:var(--text-secondary,#888);margin-bottom:6px}
.tp-price{font-size:16px;font-weight:700;color:var(--accent,#6c5ce7);margin-bottom:4px}
.tp-orig-price{font-size:12px;color:#888;text-decoration:line-through;margin-left:6px;font-weight:400}
.tp-stats{font-size:11px;color:var(--text-secondary,#999);margin-bottom:4px}
.tp-seller{font-size:11px;color:var(--text-secondary,#777);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-rank{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.7);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px}

/* ============================================================
   UX IMPROVEMENTS — Content transitions, marketplace badges
   ============================================================ */

/* Content area smooth transitions */
.content{
  animation:fadeIn .25s ease;
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Loading skeleton pulse */
.skel{
  animation:skelPulse 1.5s ease infinite;
}
@keyframes skelPulse{
  0%,100%{opacity:.15}
  50%{opacity:.3}
}

/* Marketplace badge in header */
.mp-badge{
  animation:badgePop .3s ease;
}
@keyframes badgePop{
  0%{transform:scale(0.8);opacity:0}
  100%{transform:scale(1);opacity:1}
}

/* Marketplace tab active indicator */
.f-btn{
  position:relative;
  transition:all .2s ease;
}
.f-btn.on{
  box-shadow:0 2px 8px rgba(99,102,241,.2);
}

/* Sidebar item hover animation */
.sidebar-item{
  transition:all .15s ease;
}
.sidebar-item:hover{
  padding-left:18px;
}
.sidebar-item.on{
  padding-left:18px;
}

/* Empty state improvements */
.empty-state,.empty{
  animation:fadeIn .3s ease;
}

/* Toast animation */
.toast{
  animation:toastSlide .3s ease;
}
@keyframes toastSlide{
  from{transform:translateX(100%);opacity:0}
  to{transform:translateX(0);opacity:1}
}

/* Product card hover glow */
.tp-card{
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.tp-card:hover{
  border-color:rgba(99,102,241,.3);
}

/* Stat card hover */
.stat-card{
  transition:transform .15s ease,box-shadow .15s ease;
}
.stat-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* Mobile hamburger button */
.mobile-menu-btn{
  display:none;
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:999;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  border:none;
  font-size:20px;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(99,102,241,.4);
  transition:transform .2s ease;
}
.mobile-menu-btn:hover{
  transform:scale(1.1);
}

@media (max-width:1000px){
  .mobile-menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .sidebar{
    z-index:998;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:var(--sidebar-w);
  }
}

/* Improved scrollbar for sidebar */
.sidebar-nav{
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar-thumb) transparent;
}
.sidebar-nav::-webkit-scrollbar{width:4px}
.sidebar-nav::-webkit-scrollbar-track{background:transparent}
.sidebar-nav::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px}

/* Print styles */
@media print{
  .sidebar,.sb,.topbar,.top,.toast-container,.toast-c{display:none !important}
  .main,.mn{margin-left:0 !important}
  .ad-card,.card{break-inside:avoid}
}