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

:root {
  --bg: #0d0d0f;
  --surface: #16171c;
  --surface2: #1e1f27;
  --border: #2a2b35;
  --text: #f0f0f5;
  --muted: #8b8fa8;
  --accent: #7c5cd8;
  --accent2: #e84393;
  --accent3: #00c8ff;
  --accent4: #ff6b35;
  --green: #00e676;
  --yellow: #ffd600;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 8px 32px rgba(0,0,0,0.5);
}

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ===========================
   HEADER
=========================== */
.header {
  background: linear-gradient(135deg, #0d0d0f 0%, #1a0a2e 50%, #0d0d0f 100%);
  border-bottom: 1px solid var(--border);
  padding: 2.5rem 1.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(124,92,216,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(232,67,147,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 50% 80%, rgba(0,200,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.header-inner { position: relative; max-width: 900px; margin: 0 auto; }

.logo {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.1;
  background: linear-gradient(135deg, #7c5cd8 0%, #e84393 50%, #00c8ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .4rem;
}

.logo-hash {
  font-size: 1.1em;
  display: inline-block;
  animation: pulse-hash 2s ease-in-out infinite;
}

@keyframes pulse-hash {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.15) rotate(-5deg); }
}

.tagline {
  font-size: 1.1rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  letter-spacing: .5px;
}

/* Search */
.search-wrap {
  display: flex;
  align-items: center;
  max-width: 560px;
  margin: 0 auto 1.5rem;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 50px;
  padding: .35rem .35rem .35rem 1.2rem;
  transition: border-color .2s;
}
.search-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,92,216,.2);
}
.search-wrap input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 1rem;
}
.search-wrap input::placeholder { color: var(--muted); }
#clearBtn {
  background: var(--border);
  border: none;
  color: var(--muted);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: .85rem;
  transition: background .2s, color .2s;
}
#clearBtn:hover { background: var(--accent2); color: #fff; }

/* Platform tabs */
.platform-tabs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.ptab {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  color: var(--muted);
  padding: .4rem 1.1rem;
  border-radius: 50px;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  transition: all .2s;
  letter-spacing: .3px;
}
.ptab:hover { border-color: var(--accent); color: var(--text); }
.ptab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px rgba(124,92,216,.4);
}

/* ===========================
   TICKER
=========================== */
.ticker-wrap {
  background: linear-gradient(90deg, #1a0a2e, var(--surface2), #1a0a2e);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 42px;
}

/* Ticker moved inside header */
.ticker-inline {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: 1rem auto .8rem;
  max-width: 700px;
  width: 100%;
  height: 38px;
  border-bottom: 1px solid var(--border);
  background: rgba(26,10,46,0.7);
}
.ticker-label {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  padding: 0 1rem;
  white-space: nowrap;
  height: 100%;
  display: flex;
  align-items: center;
  letter-spacing: .5px;
  flex-shrink: 0;
}
.ticker-track {
  display: flex;
  gap: 1.5rem;
  animation: ticker 60s linear infinite;
  white-space: nowrap;
  padding-left: 1.5rem;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  color: var(--accent3);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s;
}
.ticker-item:hover { color: var(--yellow); }
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===========================
   STATS BAR
=========================== */
.stats-bar {
  display: flex;
  justify-content: center;
  gap: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.stat {
  flex: 1;
  max-width: 200px;
  text-align: center;
  padding: 1rem .5rem;
  border-right: 1px solid var(--border);
}
.stat:last-child { border-right: none; }
.stat-num {
  display: block;
  font-size: 1.8rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.stat-lbl {
  font-size: .75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .8px;
}

/* ===========================
   MAIN
=========================== */
.main { max-width: 1280px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

/* ===========================
   TRAY
=========================== */
.tray-wrap {
  background: var(--surface2);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 24px rgba(124,92,216,.25);
}
.tray-header {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: .8rem;
  font-weight: 700;
}
.tray-count {
  background: var(--accent);
  color: #fff;
  border-radius: 50px;
  padding: .1rem .7rem;
  font-size: .78rem;
  font-weight: 800;
}
.tray-header button {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .3rem .9rem;
  border-radius: 50px;
  cursor: pointer;
  font-size: .8rem;
  transition: all .2s;
}
#copyAllBtn { border-color: var(--accent); color: var(--accent); }
#copyAllBtn:hover { background: var(--accent); color: #fff; }
#clearTrayBtn:hover { background: var(--accent2); border-color: var(--accent2); color: #fff; }
.tray-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tray-tag {
  background: rgba(124,92,216,.2);
  border: 1px solid var(--accent);
  color: var(--accent3);
  padding: .3rem .8rem;
  border-radius: 50px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.tray-tag:hover { background: rgba(124,92,216,.4); }

/* ===========================
   GENERATOR
=========================== */
.generator-section {
  background: linear-gradient(135deg, #1a0a2e 0%, var(--surface2) 100%);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  margin-bottom: 2.5rem;
}
.section-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: .3rem;
}
.section-sub { color: var(--muted); font-size: .9rem; margin-bottom: 1.2rem; }

.gen-controls {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  align-items: center;
}
.gen-controls select, .gen-controls button {
  padding: .6rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  cursor: pointer;
}
.gen-controls select {
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text);
  flex: 1;
  min-width: 180px;
}
.gen-controls select:focus { outline: none; border-color: var(--accent); }
#genBtn {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none;
  color: #fff;
  font-weight: 700;
  padding: .65rem 1.6rem;
  border-radius: var(--radius-sm);
  letter-spacing: .3px;
  box-shadow: 0 4px 16px rgba(124,92,216,.4);
  transition: transform .15s, box-shadow .15s;
}
#genBtn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124,92,216,.6); }
#genBtn:active { transform: translateY(0); }

.gen-output {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.2rem;
  min-height: 0;
}
.gen-copy-btn {
  margin-top: .8rem;
  background: var(--surface);
  border: 1.5px solid var(--accent3);
  color: var(--accent3);
  padding: .5rem 1.4rem;
  border-radius: 50px;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  transition: all .2s;
}
.gen-copy-btn:hover { background: var(--accent3); color: #000; }

/* ===========================
   CATEGORY FILTER
=========================== */
.cat-filter {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.cf-btn {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  color: var(--muted);
  padding: .35rem 1rem;
  border-radius: 50px;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  transition: all .2s;
}
.cf-btn:hover { border-color: var(--accent); color: var(--text); }
.cf-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.no-results { text-align: center; padding: 3rem; color: var(--muted); font-size: 1.1rem; }

/* ===========================
   CATEGORIES GRID
=========================== */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.4rem;
}

/* CARD */
.cat-card {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem 1.3rem 1rem;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  position: relative;
  overflow: hidden;
}
.cat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/* card accent colors */
.cat-card[data-color="purple"]::before { background: linear-gradient(90deg, #7c5cd8, #b44dff); }
.cat-card[data-color="pink"]::before   { background: linear-gradient(90deg, #e84393, #ff6b9d); }
.cat-card[data-color="blue"]::before   { background: linear-gradient(90deg, #00c8ff, #0066ff); }
.cat-card[data-color="orange"]::before { background: linear-gradient(90deg, #ff6b35, #ff9f1c); }
.cat-card[data-color="green"]::before  { background: linear-gradient(90deg, #00e676, #00bfa5); }
.cat-card[data-color="red"]::before    { background: linear-gradient(90deg, #ff1744, #ff6b35); }
.cat-card[data-color="yellow"]::before { background: linear-gradient(90deg, #ffd600, #ff9f1c); }
.cat-card[data-color="teal"]::before   { background: linear-gradient(90deg, #00bfa5, #00c8ff); }
.cat-card[data-color="indigo"]::before { background: linear-gradient(90deg, #3f51b5, #7c5cd8); }
.cat-card[data-color="rose"]::before   { background: linear-gradient(90deg, #f43f5e, #e84393); }
.cat-card[data-color="lime"]::before   { background: linear-gradient(90deg, #84cc16, #00e676); }
.cat-card[data-color="cyan"]::before   { background: linear-gradient(90deg, #06b6d4, #00c8ff); }

.cat-card:hover[data-color="purple"] { border-color: #7c5cd8; }
.cat-card:hover[data-color="pink"]   { border-color: #e84393; }
.cat-card:hover[data-color="blue"]   { border-color: #00c8ff; }
.cat-card:hover[data-color="orange"] { border-color: #ff6b35; }
.cat-card:hover[data-color="green"]  { border-color: #00e676; }
.cat-card:hover[data-color="red"]    { border-color: #ff1744; }
.cat-card:hover[data-color="yellow"] { border-color: #ffd600; }
.cat-card:hover[data-color="teal"]   { border-color: #00bfa5; }
.cat-card:hover[data-color="indigo"] { border-color: #3f51b5; }
.cat-card:hover[data-color="rose"]   { border-color: #f43f5e; }
.cat-card:hover[data-color="lime"]   { border-color: #84cc16; }
.cat-card:hover[data-color="cyan"]   { border-color: #06b6d4; }

.card-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .9rem;
}
.card-icon { font-size: 1.7rem; line-height: 1; }
.card-title { font-size: 1rem; font-weight: 800; letter-spacing: .2px; }
.card-count {
  margin-left: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .73rem;
  font-weight: 700;
  border-radius: 50px;
  padding: .1rem .65rem;
}

.card-tags { display: flex; flex-wrap: wrap; gap: .38rem; }

/* HASHTAG PILL */
.tag-pill {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .28rem .75rem;
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  user-select: none;
}
.tag-pill:hover {
  background: rgba(124,92,216,.25);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.06);
}
.tag-pill:active { transform: scale(.97); }
.tag-pill.hot {
  border-color: rgba(255,107,53,.5);
  color: var(--accent4);
}
.tag-pill.hot::before { content: '🔥 '; font-size: .75rem; }
.tag-pill.viral {
  border-color: rgba(232,67,147,.5);
  color: #ff6b9d;
}
.tag-pill.viral::before { content: '⚡ '; font-size: .75rem; }

/* card copy-all */
.card-copy-btn {
  margin-top: .9rem;
  width: 100%;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: .4rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .78rem;
  transition: all .2s;
}
.card-copy-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(124,92,216,.08); }

/* ===========================
   TOAST
=========================== */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  padding: .7rem 1.6rem;
  border-radius: 50px;
  font-size: .9rem;
  font-weight: 700;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  z-index: 9999;
  pointer-events: none;
  white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ===========================
   FOOTER
=========================== */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted);
  font-size: .88rem;
}
.footer-sub { font-size: .78rem; margin-top: .3rem; opacity: .6; }

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

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 640px) {
  .categories-grid { grid-template-columns: 1fr; }
  .stats-bar { flex-wrap: wrap; }
  .stat { min-width: 50%; }
  .gen-controls { flex-direction: column; }
  .gen-controls select, #genBtn { width: 100%; }
  .logo { font-size: 2rem; }
}

/* ===========================
   ANIMATIONS
=========================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cat-card { animation: fadeInUp .4s ease both; }
.cat-card:nth-child(1)  { animation-delay: .03s; }
.cat-card:nth-child(2)  { animation-delay: .06s; }
.cat-card:nth-child(3)  { animation-delay: .09s; }
.cat-card:nth-child(4)  { animation-delay: .12s; }
.cat-card:nth-child(5)  { animation-delay: .15s; }
.cat-card:nth-child(6)  { animation-delay: .18s; }
.cat-card:nth-child(7)  { animation-delay: .21s; }
.cat-card:nth-child(8)  { animation-delay: .24s; }
.cat-card:nth-child(9)  { animation-delay: .27s; }
.cat-card:nth-child(10) { animation-delay: .30s; }