/* =========================================================
   CRYPTICPUMP — Neon Crypto Theme (Cleaned)
   Keeps existing look; removes duplicates; groups by section
   ========================================================= */

/* -------- Base */
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }

body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  background: radial-gradient(circle at top, #1a0033, #0a0018);
  color: #fff;
}

/* -------- Generic container + sections */
.container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 12px;
  background: #120022;
  border: 1px solid #ff00ff;
  border-radius: 12px;
  box-shadow: 0 0 20px #ff00ff88;
}

section {
  margin: 50px auto;
  max-width: 1000px;
  padding: 0 20px;
}

section h2 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #ffbf00;
  text-shadow: 0 0 15px #ff00ff;
}

/* -------- Buttons */
.btn {
  display: inline-block;
  margin: 12px;
  padding: 14px 24px;
  font-weight: bold;
  font-size: 18px;
  border-radius: 10px;
  background: linear-gradient(90deg, #ff0080, #ffbf00);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 15px #ff00ff;
  transition: transform .2s;
}
.btn:hover { transform: scale(1.05); }

/* Gradient buttons in header/hero (final chosen style) */
header .btn, .hero .btn {
  background: linear-gradient(90deg, #ff0080, #ffbf00) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 0 15px #ff00ff !important;
  text-decoration: none;
  transition: transform .2s, background .2s;
}
header .btn:hover, .hero .btn:hover {
  transform: scale(1.05);
  background: linear-gradient(90deg, #ffbf00, #ff0080) !important;
}



/* -------- Hero */
header.hero {
  text-align: center;
  padding: 100px 20px 80px;
  background: radial-gradient(circle at top, #1a0033 0%, #0a0015 100%);
  border-bottom: 3px solid #ff00ff;
  box-shadow: 0 5px 30px #ff00ff55;
  position: relative;
  z-index: 2;
}
header.hero h1 {
  font-size: 64px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffbf00;
  text-transform: uppercase;
  text-shadow: 0 0 15px #ff00ff, 0 0 35px #ff00ff, 0 0 60px #ff0080;
  margin-bottom: 15px;
}
header.hero p.tag {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 25px;
  color: #ffffff;
  text-shadow: 0 0 12px #00ffff, 0 0 24px #00ffff;
}
header.hero p {
  font-size: 18px;
  color: #cccccc;
  margin-bottom: 35px;
  line-height: 1.6;
}

/* Hero layout (text + image) */
.hero { position: relative; overflow: hidden; }
.hero-inner {
  display: flex;
  justify-content: center; /* centered final */
  align-items: flex-start;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.hero-content { flex: 0 1 60%; min-width: 300px; max-width: 70%; text-align: center; }
.hero-image { flex: 0 0 240px; margin-top: 40px; position: static !important; }
.hero-image img {
  max-width: 100%; height: auto;
  filter: drop-shadow(0 0 25px #00aaff);
  animation: floaty 5s ease-in-out infinite;
  transition: transform 0.2s ease-out;
}
@keyframes floaty { 0%,100% {transform: translateY(0);} 50% {transform: translateY(-10px);} }

/* -------- Carousel + Cards (final unified) */
:root { --card-w: 260px; --coin-size: 120px; }

.carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  align-items: stretch;          /* equal-height rows */
}

/* Make entire card clickable area neat */
.card-link { display: block; text-decoration: none; color: inherit; }

/* Card block (matches free-card look) */
.carousel .card,
.directory .card,
.cards .card,
.grid .card,
.card-list .card,
.section-featured .card,
.section-directory .card,
.card {
  width: var(--card-w);
  flex: 0 0 var(--card-w);
  background: #120022;
  border: 1px solid #ff00ff55;
  border-radius: 10px;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0 8px #ff00ff33;
  transition: background .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out;
  display: flex;                 /* vertical stack */
  flex-direction: column;
}

/* Hover/focus — glow only, no pop */
.carousel .card:hover,
.card-link:hover .card,
.carousel .card:focus-within {
  background: #1a0033;
  border-color: #ff00ff;
  box-shadow: 0 0 12px #ff00ff88;
  transform: none;
}

/* Round, uniform coin avatars */
.carousel .card > img {
  width: var(--coin-size);
  height: var(--coin-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: contain;           /* keep full logo visible */
  background: #0a0018;
  padding: 2px;
  margin: 0 auto 2px;
  border: 3px solid #ffbf00;
}

/* Tight header stack */
.carousel .card h3 { margin: 2px 0 2px; line-height: 1.15; }
.carousel .card .coin-ticker { margin: 2px 0 2px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #00e5ff; }
.card .coin-ticker:empty { display: none; }

/* Optional tagline formatting (clamped to 2 lines if used) */
.card .coin-tagline {
  font-size: 14px; line-height: 1.3; margin: 4px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1em * 1.3 * 2);
  color: #e6e6e6; opacity: 0.92;
}

/* Pump bar pinned to bottom for alignment */
.pump-bar { height: 10px; background: #333; border-radius: 6px; margin-top: auto; }
.pump-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ff0080, #ffbf00); box-shadow: 0 0 10px #ff00ff; }

/* -------- Community Fun Zone + Leaderboard */
.community-fun-zone { margin-top: 40px; }
.funzone {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
.fun-btn {
  flex: 1;
  margin: 0 10px;
  padding: 12px 14px;
  font-size: 20px;
  text-align: center;
  line-height: normal;
  border-radius: 12px;
  cursor: pointer;
  background: #1a0033;
  border: 1px solid #ff00ff;
  box-shadow: 0 0 15px #ff00ff66;
  transition: transform .2s;
  text-decoration: none;
  color: inherit;
}
.fun-btn:hover { transform: scale(1.05); }

.leaderboard {
  max-width: 1000px;
  margin: 0 auto 60px;
  background: #120022;
  border: 2px solid #ffbf00;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 0 20px #ffbf0088;
}
.leaderboard li { list-style: none; margin: 10px 0; font-size: 18px; }

/* -------- Forms */
form {
  max-width: 85%;
  margin: 5px auto;
  padding: 5px;
  background: none;
  border: none;
  box-shadow: none;
}
form label { display: block; margin-top: 15px; font-weight: bold; color: #ffbf00; }
form input, form textarea, form select {
  width: 100%;
  padding: 5px;
  margin-top: 5px;
  border-radius: 5px;
  border: none;
  outline: none;
  background: #1a0033;
  color: #fff;
  font-size: 16px;
}
form input:focus, form textarea:focus, form select:focus { box-shadow: 0 0 10px #ff00ff; }

/* Submission page options */
.listing-options {
  display: flex; justify-content: center; gap: 15px; margin: 20px 0;
}
.listing-options .listing-btn {
  -webkit-appearance: none; appearance: none;
  border: 0; background-clip: padding-box;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 24px; font-size: 18px; font-weight: 700; border-radius: 10px; cursor: pointer;
  text-shadow: 0 0 6px #000;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  color: #fff;
}
.listing-btn.free-btn { background: linear-gradient(90deg, #0077ff, #00e5ff); box-shadow: 0 0 12px rgba(0,229,255,0.8); }
.listing-btn.free-btn:hover, .listing-btn.free-btn.active { background: linear-gradient(90deg, #00e5ff, #0077ff); box-shadow: 0 0 22px #00e5ff; transform: scale(1.06); }
.listing-btn.paid-btn { background: linear-gradient(90deg, #00c851, #007e33); box-shadow: 0 0 12px rgba(0,200,81,0.8); }
.listing-btn.paid-btn:hover, .listing-btn.paid-btn.active { background: linear-gradient(90deg, #007e33, #00c851); box-shadow: 0 0 22px #00ff9d; transform: scale(1.06); }
.listing-btn.featured-btn { background: linear-gradient(90deg, #ffbf00, #ff8000); box-shadow: 0 0 12px rgba(255,191,0,0.9); color: #000; }
.listing-btn.featured-btn:hover, .listing-btn.featured-btn.active { background: linear-gradient(90deg, #ff8000, #ffbf00); box-shadow: 0 0 22px #ffbf00; transform: scale(1.06); }
.submit-btn { width: 100%; }

.listing-blurb {
  margin: 15px auto 25px; padding: 12px 18px; border-radius: 10px; font-size: 15px;
  max-width: 600px; text-align: center; font-weight: bold; display: none;
}
.free-blurb   { background: rgba(0,229,255,.1); border: 1px solid #00e5ff; color:#00e5ff; }
.paid-blurb   { background: rgba(0,200,81,.1);  border: 1px solid #00ff9d; color:#00ff9d; }
.featured-blurb{background: rgba(255,191,0,.1); border: 1px solid #ffbf00; color:#ffbf00; }

/* -------- Tables / Dashboard */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background: #120022;
  border: 1px solid #ff00ff;
  box-shadow: 0 0 15px #ff00ff88;
}
table th, table td { padding: 12px; border: 1px solid #ff00ff55; text-align: left; }
table th { background: #1a0033; color: #ffbf00; text-shadow: 0 0 5px #ff00ff; }
table tr:nth-child(even) { background: #1a0022; }

.dashboard, .admin {
  max-width: 1000px; margin: 0 auto; padding: 10px;
  overflow-x: auto; background: #0a0015; color: #f0f0f0; border-radius: 8px;
  box-shadow: 0 0 15px #ff00ff22;
}
.dashboard h2, .admin h2 { color: #00ffff; border-bottom: 1px solid #222; padding-bottom: 6px; }
.dashboard table, .admin table { background: #120022; border: 1px solid #333; border-radius: 6px; overflow: hidden; }
.dashboard th, .admin th { background: #1e0033; color: #ffccff; border-bottom: 1px solid #333; }
.dashboard td, .admin td { border-bottom: 1px solid #222; }
.dashboard tr:nth-child(even), .admin tr:nth-child(even) { background: #180029; }
.dashboard tr:hover, .admin tr:hover { background: #220033; }

/* Compact status select */
.dashboard table select[name="payment_status"],
.admin table select[name="payment_status"] {
  width: auto; min-width: 120px; padding: 6px 10px; font-size: 14px;
  border-radius: 6px; background: #120022; color: #fff;
  border: 1px solid #ff00ff55; box-shadow: 0 0 8px #ff00ff33; cursor: pointer;
}
.dashboard table select[name="payment_status"]:focus,
.admin table select[name="payment_status"]:focus {
  outline: none; border-color: #ff00ff; box-shadow: 0 0 10px #ff00ff88;
}

/* -------- Alerts */
.alert-success {
  background: #002b11; border: 1px solid #00ff99; color: #aaffcc;
  padding: 10px 14px; border-radius: 6px; margin: 10px 0; box-shadow: 0 0 8px #00ff9955;
}
.alert-error {
  background: #2b0000; border: 1px solid #ff0044; color: #ff99aa;
  padding: 10px 14px; border-radius: 6px; margin: 10px 0; box-shadow: 0 0 8px #ff004455;
}
.alert-info {
  background: #001a33; border: 1px solid #00aaff; color: #99ddff;
  padding: 10px 14px; border-radius: 6px; margin: 10px 0; box-shadow: 0 0 8px #00aaff55;
}

/* -------- Payment / Success */
.payment-container { display: flex; justify-content: center; margin: 40px 0; }
.payment-box {
  background: rgba(0,0,0,0.5); padding: 30px; border-radius: 12px; max-width: 600px; text-align: center;
  border: 2px solid #00e5ff; box-shadow: 0 0 20px rgba(0,229,255,0.4);
}
.payment-box h2 { margin-bottom: 20px; }
.payment-box .highlight { color:#ffbf00; font-weight: bold; margin: 15px 0; }
.wallet-address {
  display: block; margin: 15px 0; padding: 10px;
  background: #111; border:1px solid #00ff9d; border-radius: 6px; font-family: monospace; color:#00e5ff;
}
.note { margin-top: 15px; font-size: .95rem; opacity:.85; }
#verify_sig {
  width:100%; padding:10px; border-radius:8px; border:1px solid #00e5ff;
  margin-bottom:15px; background:#222; color:#fff;
}
#verify_sig:focus { border-color:#00ff9d; box-shadow:0 0 8px rgba(0,255,157,0.5); }

.success-container { display:flex; justify-content:center; margin:50px 0; }
.success-box {
  background: rgba(0,0,0,0.65); padding:30px; border-radius:12px; max-width:700px; text-align:center;
  border:2px solid #00ff9d; box-shadow:0 0 25px rgba(0,255,157,0.4);
}
.success-box h2 { color:#00ff9d; margin-bottom:15px; }
.coin-summary { margin:20px 0; text-align:left; }
.coin-summary h3 { margin-bottom:10px; color:#ffbf00; }

/* -------- Coin page extras */
.coin-header { display:flex; align-items:center; gap:20px; margin-bottom:20px; }
.coin-logo img {
  max-width: 200px; max-height: 200px;
  border-radius: 12px; border: 2px solid #ffbf00; box-shadow: 0 0 12px #ff00ff55;
}
.coin-title h1 { margin:0; font-size: 32px; color:#ffbf00; text-shadow: 0 0 10px #ff00ff; }
.coin-title small { font-size: 18px; color:#ccc; }
.coin-contract { font-size:14px; color:#aaa; word-break: break-all; margin-top:6px; }
.coin-contract code {
  font-family: monospace; font-size:14px; padding:4px 6px; border:1px solid #ff00ff;
  border-radius:6px; background:#120022; color:#00e5ff; cursor:pointer;
  box-shadow:0 0 6px #ff00ff55; transition: background .2s ease, color .2s ease;
}
.coin-contract code:hover { background:#1e0033; color:#fff; box-shadow:0 0 10px #00e5ff88; }
.ticker { font-size:20px; font-weight:700; color:#00e5ff; text-shadow: 0 0 6px #00ffff, 0 0 12px #00e5ff; margin:4px 0 10px; letter-spacing:1px; }

.coin-description { margin:25px 0; font-size:16px; line-height:1.6; }
.coin-links ul { list-style:none; padding:0; }
.coin-links li { margin:6px 0; }
.coin-links a { color:#00e5ff; text-decoration:none; font-weight:bold; }
.coin-links a:hover { color:#fff; text-shadow: 0 0 6px #00e5ff; }

/* Category pills */
.cat-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; justify-content:center; }
.cat-pill {
  display:inline-block; padding:6px 10px; border:1px solid rgba(255,255,255,.22);
  border-radius:999px; font-size:.9rem; line-height:1; text-decoration:none;
  color:#fff; background: rgba(255,255,255,.06);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.cat-pill:hover { transform: translateY(-1px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); }

/* -------- Dump page free links */
.free-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px; margin-top: 30px;
}
.free-card {
  background: #120022; border:1px solid #ff00ff55; border-radius:10px; padding:16px;
  text-align:center; cursor:pointer; transition: all .2s ease-in-out; box-shadow: 0 0 8px #ff00ff33;
}
.free-card:hover { background:#1a0033; border-color:#ff00ff; box-shadow: 0 0 12px #ff00ff88; }
.free-card h3 { font-size:18px; color:#ffbf00; margin:0 0 6px; text-shadow:0 0 6px #ff00ff; }
.free-card .ticker { font-size:14px; font-weight:bold; color:#00e5ff; letter-spacing:1px; }

/* -------- Footer (gradient final) */
footer {
  margin-top: 60px; text-align: center; padding: 12px;
  background: #0a0018; border-top: 2px solid #ff00ff; box-shadow: 0 -5px 15px #ff00ff55;
}
footer p { margin: 0; }
footer a {
  display: inline-block; margin: 6px; font-size: 14px; padding: 6px 12px; border-radius: 8px; text-decoration: none;
  background: linear-gradient(90deg, #ff0080, #ffbf00) !important;
  color: #fff !important; border: 0 !important; box-shadow: 0 0 10px #ff00ff !important;
  transition: transform .2s, background .2s;
}
footer a:hover { transform: scale(1.08); background: linear-gradient(90deg, #ffbf00, #ff0080) !important; }

/* -------- Images (generic) */
img { max-width:100%; height:auto; }

/* ===================== Responsive ===================== */

/* ≤1024px (tablet) */
@media (max-width: 1024px) {
  body { font-size: 15px; }
  h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 18px; }

  .hero-inner { gap: 20px; }
  .hero-image { width: 180px; }
  .leaderboard { max-width: 640px; padding: 16px; }
  .carousel { max-width: 640px; }

  .dashboard, .admin { padding: 16px; }
  .dashboard th, .dashboard td, .admin th, .admin td { font-size: 13px; padding: 6px; }
}

/* ≤768px (large phones / small tablets) */
@media (max-width: 768px) {
  body { font-size: 14px; }
  h1 { font-size: 26px; } h2 { font-size: 20px; } h3 { font-size: 17px; }

  .hero-inner { flex-direction: column; align-items: center; text-align: center; }
  .hero-image { margin: 20px auto 0; width: 160px; }

  .leaderboard { max-width: 420px; padding: 14px; }
  .carousel { max-width: 420px; }

  footer { padding: 16px; }
  footer a { font-size: 13px; padding: 8px 14px; }

  .dashboard, .admin { padding: 12px; }
  .dashboard table, .admin table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ≤480px (phones) */
@media (max-width: 480px) {
  body { font-size: 10px; line-height: 1.5; }
  h1 { font-size: 16px; } h2 { font-size: 12px; } h3 { font-size: 16px; } p { font-size: 14px; }

  .hero { padding: 10px 10px; }
  header.hero h1 { font-size: 42px; }
  header.hero p.tag { font-size: 20px; }

  .hero-image { width: 130px; margin-top: 10px; }
  .leaderboard { max-width: 100%; padding: 10px; margin-bottom: 10px; }

  :root { --card-w: 220px; --coin-size: 100px; }
  .carousel { max-width: 100%; gap: 6px; }
  .carousel .card { padding: 7px; }
  .carousel .card > img { margin-bottom: 2px; }
}

/* ===== Header: modern compact overrides ===== */
header.hero {
  padding: 40px 16px 28px;               /* was ~100/80 — much tighter */
}

/* Headline: smaller, less shouty, cleaner glow */
header.hero h1 {
  font-size: clamp(28px, 4.2vw, 44px);   /* responsive, tops out smaller */
  letter-spacing: 0.5px;                 /* less 90s-wide spacing */
  margin-bottom: 8px;                    /* tighter stack */
  text-shadow: 0 0 10px #ff00ff, 0 0 22px #ff0080; /* toned down */
}

/* Tag pill: smaller + tighter margin */
header.hero p.tag {
  font-size: clamp(14px, 1.6vw, 18px);
  margin-bottom: 10px;
  text-shadow: 0 0 8px #00ffff, 0 0 14px #00ffff;
}

/* Body copy under the tag: lighter footprint */
header.hero p {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* Hero layout gap: bring content closer together */
.hero-inner { gap: 20px; }

/* Buttons in header/hero: slimmer, subtler glow */
header .btn, .hero .btn {
  font-size: 13px;               /* was bigger */
  padding: 8px 14px;             /* slimmer height */
  border-radius: 8px;
  margin: 6px 6px 0 6px;         /* reduce vertical stack height */
  box-shadow: 0 0 10px #ff00ff !important; /* softer neon */
  transform: none;               /* no big pop on hover in header */
}
header .btn:hover, .hero .btn:hover {
  transform: translateY(-1px);   /* tiny lift instead of scale */
}

/* Image block: slightly smaller by default so header breathes */
.hero-image { flex-basis: 200px; margin-top: 20px; }

/* ===== Compact on phones ===== */
@media (max-width: 480px) {
  header.hero { padding: 24px 12px 16px; }
  header.hero h1 { font-size: 26px; margin-bottom: 6px; }
  header.hero p.tag { font-size: 14px; margin-bottom: 8px; }
  header.hero p { font-size: 14px; margin-bottom: 12px; }
  .hero-image { width: 140px; margin-top: 8px; }
  header .btn, .hero .btn { font-size: 12px; padding: 7px 12px; margin: 4px 6px 0; }
}


/* ===== Hero image as background figure (behind + left of text) ===== */
header.hero { position: relative; overflow: hidden; }

/* keep the text layer on top */
header.hero .hero-inner { position: relative; z-index: 2; }

/* pull the image out of flow and place it behind the text */
header.hero .hero-image {
  position: absolute !important;    /* override earlier 'static' */
  inset: auto auto 50% 0;           /* anchor to left; roughly mid-height */
  transform: translate(-15%, 50%) rotate(-6deg); /* tuck left + tilt a bit */
  z-index: 1;                        /* behind text */
  opacity: 0.18;                     /* subtle */
  pointer-events: none;              /* never block clicks on buttons/links */
  filter: drop-shadow(0 0 28px rgba(0, 170, 255, 0.35));
}

/* size the figure responsively (big screens show more) */
header.hero .hero-image img {
  width: clamp(220px, 34vw, 520px);
  height: auto;
}

/* keep the gentle float; tone it down a touch when used as a bg */
@media (prefers-reduced-motion: reduce) {
  header.hero .hero-image img { animation: none !important; }
}

/* phone/tablet tweaks: pull it farther left and a bit smaller so text stays clean */
@media (max-width: 768px) {
  header.hero .hero-image {
    inset: auto auto 55% -8%;
    transform: translate(-10%, 50%) rotate(-4deg);
    opacity: 0.22;
  }
  header.hero .hero-image img { width: clamp(180px, 42vw, 360px); }
}

@media (max-width: 480px) {
  header.hero .hero-image {
    inset: auto auto 58% -12%;
    transform: translate(-6%, 50%) rotate(-3deg);
    opacity: 0.24;
  }
  header.hero .hero-image img { width: clamp(150px, 48vw, 300px); }
}

/* ===== Tighten top space above hero title ===== */
header.hero {
  padding-top: clamp(10px, 2.5vw, 20px);   /* was ~100px → much smaller */
}

header.hero h1 {
  margin-top: 0;                            /* kill default top margin */
}

/* (If any tag line sits above/below, keep the stack tight) */
header.hero p.tag { margin-top: 4px; }

/* Phones: even tighter */
@media (max-width: 480px) {
  header.hero { padding-top: 12px; }
  header.hero h1 { margin-top: 0; }
}

/* === Ensure hero image floats behind text on all sizes === */
header.hero { position: relative; overflow: hidden; }

/* Keep text on top */
header.hero .hero-inner { position: relative; z-index: 2; }

/* Force the image layer out of flow + behind text */
header.hero .hero-image {
  position: absolute !important;   /* beat any earlier 'static !important' */
  z-index: 1;
  pointer-events: none;
  opacity: 0.22;
  filter: drop-shadow(0 0 28px rgba(0,170,255,.35));
}

/* Default (desktop/tablet): tuck left and up a bit */
header.hero .hero-image {
  top: 0; left: -1%;
  transform: translateY(-12%) rotate(-5deg);
}
header.hero .hero-image img {
  width: clamp(240px, 34vw, 520px);
  height: auto;
}

/* Give the header just enough height so the bg figure can show */
header.hero {
  min-height: clamp(200px, 34vw, 260px);
}

/* ===== Phones: anchor to top-left more aggressively so it's visible */
@media (max-width: 480px) {
  header.hero {
    padding-top: 14px;          /* tight but leaves room for the image */
    min-height: 240px;          /* guarantees visible background figure */
  }
  header.hero .hero-image {
    top: 0; left: -1%;
    transform: translateY(-10%) rotate(-3deg);
    opacity: 0.26;
  }
  header.hero .hero-image img {
    width: clamp(160px, 55vw, 300px);
  }
}

/* ===== Browse page spacing tweaks ===== */

/* Tighten the search bar row */
form.search-bar { 
  gap: 6px;                  /* was ~10px inline; this wins if loaded last */
  margin-bottom: 8px;        /* reduce space under the search row */
}
form.search-bar .btn { 
  margin: 0 !important;      /* kill any default .btn margin around the button */
}

/* Increase space between category pills and the list of cards */
.cat-pills { 
  margin-top: 6px;
  margin-bottom: 20px;       /* more breathing room before results */
}

/* If your browse page has a summary <p> between pills and cards, give it a bit more room */
.cat-pills + p {
  margin-top: 4px;
  margin-bottom: 18px;       /* pushes the cards down a touch more */
}

/* On small screens keep it tidy but readable */
@media (max-width: 480px) {
  form.search-bar { gap: 6px; margin-bottom: 6px; }
  .cat-pills { margin-bottom: 18px; }
  .cat-pills + p { margin-bottom: 16px; }
}

/* === Hero image: center vertically within header, no fixed header height === */
header.hero { 
  position: relative; 
  overflow: hidden; 
  min-height: 0 !important;          /* override earlier clamp so height is natural */
}

/* Text stays on top */
header.hero .hero-inner { position: relative; z-index: 2; }

/* Image floats behind, left, and is vertically centered */
header.hero .hero-image {
  position: absolute !important;
  top: 50%;                           /* vertical center of header */
  left: -12%;                         /* peek in from the left */
  right: auto; bottom: auto;          /* be explicit to avoid older rules */
  transform: translate(-18%, -50%) rotate(-4deg); /* center + slight tilt */
  z-index: 1;
  pointer-events: none;
  opacity: 0.20;
  filter: drop-shadow(0 0 28px rgba(0,170,255,.35));
}

/* Responsive size (no height lock; header grows naturally with content) */
header.hero .hero-image img {
  width: clamp(220px, 34vw, 520px);
  height: auto;
}

/* Tablet: nudge a bit more to the left so the center stays visible */
@media (max-width: 768px) {
  header.hero .hero-image {
    left: -18%;
    transform: translate(-12%, -50%) rotate(-3deg);
    opacity: 0.22;
  }
  header.hero .hero-image img { width: clamp(180px, 42vw, 420px); }
}

/* Phone: keep it centered and a touch smaller */
@media (max-width: 480px) {
  header.hero .hero-image {
    left: -20%;
    transform: translate(-10%, -50%) rotate(-2deg);
    opacity: 0.24;
  }
  header.hero .hero-image img { width: clamp(160px, 50vw, 340px); }
}

/* ===== Category headers: Blue neon look ===== */
.page-title .hl {
  color: #00e5ff;                             /* cyan text */
  text-shadow: 0 0 10px #00e5ff, 0 0 18px #00ffff;
}

.section-kicker {
  color: #00e5ff;                              /* cyan label */
  text-shadow: 0 0 8px #00e5ff, 0 0 16px #00ffff;
}

.section-note {
  color: #cfefff;                              /* soft blue text */
  opacity: .9;
  text-shadow: 0 0 6px rgba(0, 238, 255, .35);
}

.section-divider {
  background: linear-gradient(
    90deg,
    transparent,
    #0099ff,  /* electric blue */
    #00ffff,  /* cyan core */
    #0099ff,
    transparent
  );
  box-shadow: 0 0 8px rgba(0, 238, 255, .55), 0 0 18px rgba(0, 153, 255, .35);
}

/* ===== Category page: larger blue-neon headings + perfectly centered card rows ===== */
.category-page .section-head {
  text-align: center;
  margin: 16px auto 14px;
}

.category-page .section-kicker {
  font-size: clamp(20px, 3.4vw, 15px);   /* bigger title */
  font-weight: 900;
  letter-spacing: .4px;
}

.category-page .section-note {
  font-size: clamp(14px, 1.6vw, 16px);   /* a touch larger, still subtle */
  margin-top: 6px;
}

.category-page .section-divider {
  width: min(360px, 52%);                /* wider divider */
  height: 3px;                           /* slightly thicker for presence */
  margin: 3px auto 8px;
}
/* Phone tweaks: keep hierarchy but avoid huge headings */
@media (max-width: 480px) {
  .category-page .section-kicker { font-size: 20px; }
  .category-page .section-note   { font-size: 13px; }
  .category-page .carousel       { gap: 10px; }
}

/* Browse: chain pills spacing + blue neon hover */
.chain-pills { margin-bottom: 18px; }
.chain-pill:hover {
  background: rgba(0, 238, 255, .12);
  border-color: rgba(0, 238, 255, .6);
  box-shadow: 0 0 10px rgba(0, 238, 255, .35);
}

/* ===== Unify Category + Chain header styling ===== */
.category-page .section-head,
.chain-page .section-head {
  text-align: center;
  margin: 16px auto 14px;
  position: relative;
}

.category-page .section-kicker,
.chain-page .section-kicker {
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 900;
  letter-spacing: .4px;
  color: #00e5ff;
  text-shadow: 0 0 8px #00e5ff, 0 0 16px #00ffff;
}

.category-page .section-note,
.chain-page  .section-note {
  font-size: clamp(14px, 1.6vw, 16px);
  margin-top: 6px;
  color: #cfefff;
  opacity: .9;
  text-shadow: 0 0 6px rgba(0,238,255,.35);
}

/* Blue neon dividers — above AND below, no HTML changes needed */
.category-page .section-head::before,
.category-page .section-head::after,
.chain-page .section-head::before,
.chain-page .section-head::after {
  content: "";
  display: block;
  width: min(360px, 52%);
  height: 3px;
  margin: 10px auto;
  background: linear-gradient(90deg, transparent, #0099ff, #00ffff, #0099ff, transparent);
  box-shadow: 0 0 10px rgba(0,238,255,.55), 0 0 18px rgba(0,153,255,.35);
  border-radius: 2px;
}
.category-page .section-head::before,
.chain-page .section-head::before { margin-bottom: 10px; }
.category-page .section-head::after,
.chain-page .section-head::after  { margin-top: 10px; }

/* Keep carousels neatly centered under headings */
.category-page .section-head + .carousel,
.chain-page  .section-head + .carousel { margin-top: 10px; }

/* Phone sizing parity */
@media (max-width: 480px) {

  .category-page .section-kicker,
  .chain-page .section-kicker { font-size: 20px; }
  .category-page .section-note,
  .chain-page .section-note   { font-size: 13px; }
}

/* === Chain & Category headers: identical size + blue dividers (final override) === */
.category-page .section-head,
.chain-page .section-head {
  text-align: center;
  margin: 16px auto 14px;
  position: relative;
}

.category-page .section-kicker,
.chain-page .section-kicker {
  /* clean, moderate size; adjust max to taste (28–32px works well) */
  font-size: clamp(20px, 3.2vw, 30px);
  font-weight: 900;
  letter-spacing: .4px;
  color: #00e5ff;
  text-shadow: 0 0 8px #00e5ff, 0 0 16px #00ffff;
}

.category-page .section-note,
.chain-page  .section-note {
  font-size: clamp(13px, 1.6vw, 16px);
  margin-top: 6px;
  color: #cfefff;
  opacity: .9;
  text-shadow: 0 0 6px rgba(0,238,255,.35);
}

/* Blue neon dividers — above AND below */
.category-page .section-head::before,
.category-page .section-head::after,
.chain-page .section-head::before,
.chain-page .section-head::after {
  content: "";
  display: block;
  width: min(360px, 52%);
  height: 3px;
  margin: 10px auto;
  background: linear-gradient(90deg, transparent, #0099ff, #00ffff, #0099ff, transparent);
  box-shadow: 0 0 10px rgba(0,238,255,.55), 0 0 18px rgba(0,153,255,.35);
  border-radius: 2px;
}
.category-page .section-head::before,
.chain-page .section-head::before { margin-bottom: 10px; }
.category-page .section-head::after,
.chain-page .section-head::after  { margin-top: 10px; }

/* ===== Crisp headings (less glow, higher legibility) ===== */

/* Page title highlight (e.g., "Meme coins in/ on <Name>") */
.page-title .hl {
  color: #cfefff;                /* soft cyan, high contrast on dark */
  text-shadow: none;             /* kill the neon blur */
}

/* Section titles: "Featured" / "All ..." */
.category-page .section-kicker,
.chain-page  .section-kicker {
  color: #cfefff;                /* same crisp cyan */
  font-weight: 850;
  letter-spacing: .2px;          /* tighter for clarity */
  text-shadow: none;             /* remove glow */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Small description line under the titles */
.category-page .section-note,
.chain-page  .section-note {
  color: #d9e9ff;                /* readable, not neon */
  opacity: .95;
  text-shadow: none;
}

/* Dividers: keep blue theme but reduce glow and thickness */
:is(.category-page, .chain-page, .index-page, .browse-page) .section-head::before,
:is(.category-page, .chain-page, .index-page, .browse-page) .section-head::after {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #5cc8ff,
    #6ee6ff,
    #5cc8ff,
    transparent
  );
  box-shadow: 0 0 4px rgba(0, 200, 255, .25);
  border-radius: 2px;
}

/* Slightly smaller max size for section titles to improve scanability */
:is(.category-page, .chain-page, .index-page, .browse-page) .section-kicker {
  font-size: clamp(18px, 2.8vw, 26px);
}

/* Tighten vertical rhythm around titles */
:is(.category-page, .chain-page, .index-page, .browse-page) .section-head {
  margin: 14px auto 12px;
}

/* Spacing when a carousel follows the section head */
:is(.category-page, .chain-page, .index-page, .browse-page) .section-head + .carousel {
  margin-top: 8px;
}


/* ===== Pills ++ (categories & chains) ===== */

/* Base */
.cat-pills { 
  display: flex; flex-wrap: wrap; gap: 10px; 
  justify-content: center;
}
.cat-pill, .chain-pill {
  --pill-pad-y: 7px;
  --pill-pad-x: 14px;
  --pill-radius: 999px;
  --pill-border: rgba(0, 238, 255, .35);
  --pill-bg: rgba(0, 238, 255, .06);
  --pill-text: #eaf6ff;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--pill-pad-y) var(--pill-pad-x);
  border-radius: var(--pill-radius);
  border: 1px solid var(--pill-border);
  background: linear-gradient(180deg, rgba(0, 238, 255, .09), rgba(0, 238, 255, .04));
  color: var(--pill-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .25px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 8px rgba(0, 238, 255, .18);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  will-change: transform;
}

/* Hover / focus — brighter edge, tiny lift */
.cat-pill:hover, .chain-pill:hover,
.cat-pill:focus-visible, .chain-pill:focus-visible {
  border-color: rgba(0, 238, 255, .65);
  background: linear-gradient(180deg, rgba(0, 238, 255, .14), rgba(0, 238, 255, .06));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06),
              0 0 10px rgba(0, 238, 255, .28),
              0 2px 10px rgba(0,0,0,.25);
  transform: translateY(-1px);
  outline: none;
}

/* Active/current state */
.cat-pill.active, .chain-pill.active {
  border-color: #00e5ff;
  background: linear-gradient(180deg, rgba(0, 238, 255, .22), rgba(0, 238, 255, .10));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 12px rgba(0, 238, 255, .36);
  color: #ffffff;
}

/* Pressed */
.cat-pill:active, .chain-pill:active {
  transform: translateY(0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 1px 6px rgba(0,0,0,.35);
}

/* Optional leading icon (emoji or <svg>) */
.cat-pill .icon, .chain-pill .icon {
  display: inline-block; font-size: 16px; line-height: 1; opacity: .95;
}

/* Optional count/badge */
.cat-pill .badge, .chain-pill .badge {
  display: inline-block;
  min-width: 18px; height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 238, 255, .18);
  border: 1px solid rgba(0, 238, 255, .45);
  box-shadow: 0 0 8px rgba(0, 238, 255, .25) inset;
  color: #dff7ff;
  font-size: 12px; font-weight: 800; line-height: 16px;
}

/* Compact row variant (if you ever need it) */
.cat-pills.compact .cat-pill,
.cat-pills.compact .chain-pill { 
  --pill-pad-y: 6px; --pill-pad-x: 12px; font-size: 13px; gap: 6px;
}

/* Spacing tweaks around the groups */
.cat-pills + .cat-pills { margin-top: 8px; }

/* Mobile: bigger tap targets, tighter gaps */
@media (max-width: 480px) {
  .cat-pills { gap: 8px; }
  .cat-pill, .chain-pill { 
    --pill-pad-y: 8px; --pill-pad-x: 14px; font-size: 15px;
  }
}

/* Browse page: reuse the exact category header look */
.browse-page .section-head{
  text-align:center;
  margin:14px auto 12px;
  position:relative;
}
.browse-page .section-kicker{
  font-size:clamp(18px,2.8vw,26px);
  font-weight:850;
  letter-spacing:.2px;
  color:#cfefff;          /* crisp cyan (no heavy glow) */
  text-shadow:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.browse-page .section-note{
  font-size:clamp(13px,1.6vw,16px);
  margin-top:6px;
  color:#d9e9ff;
  opacity:.95;
  text-shadow:none;
}
/* blue gradient lines above & below the title */
.browse-page .section-head::before,
.browse-page .section-head::after{
  content:"";
  display:block;
  width:min(360px,52%);
  height:2px;
  margin:10px auto;
  background:linear-gradient(90deg,transparent,#5cc8ff,#6ee6ff,#5cc8ff,transparent);
  box-shadow:0 0 4px rgba(0,200,255,.25);
  border-radius:2px;
}
/* spacing if a results list/carousel follows */
.browse-page .section-head + .carousel{ margin-top:8px; }

/* Index page: reuse the exact category header look */
.index-page .section-head{
  text-align:center;
  margin:14px auto 12px;
  position:relative;
}
.index-page .section-kicker{
  font-size:clamp(18px,2.8vw,26px);
  font-weight:850;
  letter-spacing:.2px;
  color:#cfefff;          /* crisp cyan (no heavy glow) */
  text-shadow:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.index-page .section-note{
  font-size:clamp(13px,1.6vw,16px);
  margin-top:6px;
  color:#d9e9ff;
  opacity:.95;
  text-shadow:none;
}
/* blue gradient lines above & below the title */
.index-page .section-head::before,
.index-page .section-head::after{
  content:"";
  display:block;
  width:min(360px,52%);
  height:2px;
  margin:10px auto;
  background:linear-gradient(90deg,transparent,#5cc8ff,#6ee6ff,#5cc8ff,transparent);
  box-shadow:0 0 4px rgba(0,200,255,.25);
  border-radius:2px;
}
/* spacing if a results list/carousel follows */
.index-page .section-head + .carousel{ margin-top:8px; }

/*crew roles */
 /* Dense multi-column roles */
.crew-roles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  margin: 6px 0 8px;
}
.crew-roles--dense .role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;              /* tighter */
  border-radius: 8px;            /* smaller radius */
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
  user-select: none;
  line-height: 1.1;
}
.crew-roles--dense .role-chip span {
  font-size: 12px;               /* smaller text */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crew-roles--dense .role-chip input[type="checkbox"]{
  appearance: none;
  width: 14px;                   /* smaller box */
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.4);
  background: transparent;
  position: relative;
  flex: 0 0 auto;
}
.crew-roles--dense .role-chip input[type="checkbox"]:checked{
  background: linear-gradient(90deg, #a855f7, #f59e0b);
  border-color: #fff;
}
.crew-roles--dense .role-chip input[type="checkbox"]:checked::after{
  content: "";
  position: absolute;
  top: 2px; left: 5px;
  width: 3px; height: 6px;
  border: 2px solid #111;
  border-top: 0; border-left: 0;
  transform: rotate(45deg);
}

/* Even tighter at wider viewports */
@media (min-width: 768px){
  .crew-roles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
}
@media (min-width: 1024px){
  .crew-roles { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 5px; }
}




/* Roles grid already in page; keep tight spacing */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
}

/* Skills chips (match roles look, compact) */
.skills-bank { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:6px; }
.skill-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.18); cursor:pointer; user-select:none; }
.skill-chip input { appearance:none; width:14px; height:14px; border:1px solid rgba(255,255,255,.4); border-radius:3px; position:relative; }
.skill-chip input:checked { background:linear-gradient(90deg,#a855f7,#f59e0b); border-color:#fff; }
.skill-chip input:checked::after { content:""; position:absolute; top:2px; left:5px; width:3px; height:6px;
  border:2px solid #111; border-top:0; border-left:0; transform:rotate(45deg); }
.skill-chip.active { box-shadow:0 0 12px rgba(168,85,247,.18) inset; }

/*user page privacy note*/
.privacy-note {
  margin: 6px 0 0;
  font-size: 13px;
  color: #94a3b8;
}









/* ===== Admin: fluid layout ===== */
.admin-fluid { max-width: none; width: 100%; }


/* Tables – expand & wrap */
.admin-table-wrap { overflow: visible !important; }
.admin-table-wrap table { table-layout: auto !important; }
.admin-table-wrap th, .admin-table-wrap td { white-space: normal !important; }

/* Grid utility shared by admin launchers */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}


/* Base button (purple outline) */
.btn {
  display: inline-block;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 8px;
  margin: 6px;
  color: #fff;
  text-decoration: none;
  background: #120022;
  border: 1px solid #ff00ff55;
  box-shadow: 0 0 6px #ff00ff33;
  transition: all .18s ease-in-out;
}
.btn:hover,
.btn:focus {
  background: #1a0033;
  border-color: #ff00ff;
  box-shadow: 0 0 12px #ff00ff88;
  transform: translateY(-1px);
}

/* Primary (gradient) button */
.btn.submit-btn,
.btn.primary {
  background: linear-gradient(90deg, #ff0080, #ffbf00);
  border: 0;
  box-shadow: 0 0 12px #ff00ff99;
  color: #fff;
}
.btn.submit-btn:hover,
.btn.primary:hover {
  box-shadow: 0 0 16px #ff00ffcc;
  transform: translateY(-1px) scale(1.01);
}




/* ===== Admin: crew-style launcher cards ===== */
.admin .cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

/* Allow using either <a class="card-link"> or <div class="card"> */
.admin .card-link,
.admin .card {
  display: block;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  text-decoration: none;
}
.admin .card-link:hover,
.admin .card:hover {
  border-color: #a855f7; /* purple */
  box-shadow: 0 0 16px rgba(168,85,247,.25) inset;
}

/* Typography + small utilities copied from Crew */
.admin .card-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.admin .card-desc  { color: #cbd5e1; font-size: 13px; margin: 0; }
.admin .muted      { color: #94a3b8; }
.admin .row        { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin .inline-form input[type="text"] { max-width: 220px; }

/* ===== Admin: purple card surface (outer & inner wrappers) ===== */
.admin-card {
  background: #120022;
  border: 1px solid #ff00ff55;
  border-radius: 12px;
  box-shadow: 0 0 8px #ff00ff33;
}
.admin-card:hover {
  border-color: #ff00ff;
  box-shadow: 0 0 12px #ff00ff66;
}

/* Admin inputs: dark fields that match the cards */
.admin input[type="text"],
.admin input[type="number"],
.admin input[type="email"],
.admin select,
.admin textarea {
  background: #1a0033;
  border: 1px solid #ff00ff55;
  color: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  outline: none;
}
.admin input[type="text"]:focus,
.admin input[type="number"]:focus,
.admin input[type="email"]:focus,
.admin select:focus,
.admin textarea:focus {
  border-color: #ff00ff;
  box-shadow: 0 0 8px #ff00ff55;
}

/* match Crew’s small input width helper */
.admin .inline-form input[type="text"],
.admin .inline-form input[type="number"] {
  max-width: 220px;
}


/* ===== Admin: compact tables for dense pages ===== */
.admin .toolbar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  margin:6px 0 8px;
}
.admin .toolbar .filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.admin .toolbar input[type="text"],
.admin .toolbar select{height:34px; padding:6px 8px}
.admin .toolbar .btn{margin:0}

.admin .admin-table-wrap{
  overflow:auto;          /* scroll if needed */
  margin:8px 0 10px;      /* tighter than before */
	width:100%;            /*wide tables */
}

.admin table.admin-table.compact{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  line-height:1.2;
  table-layout:auto;      /* let columns size naturally */
}

.admin table.admin-table.compact thead th{
  position:sticky; top:0; z-index:2;
  background:#1a0033;     /* header contrast */
  padding:6px 8px;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,.15);
}

.admin table.admin-table.compact td{
  padding:6px 8px;        /* compact cell padding */
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
}

/* utilities for tighter layout */
.admin .nowrap{ white-space:nowrap; }
.admin .clip{ max-width:280px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin .break{ white-space:normal; word-break:break-word; }
.admin .muted{ opacity:.8; font-size:12px; }
.admin img.thumb{ width:28px; height:28px; object-fit:cover; border-radius:6px; }

/* Admin badge pills (shared by coin + crew tables) */
.badge-tier-featured{
  background:#f59e0b;
  color:#12052b;
  padding:2px 6px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.badge-tier-paid{
  background:#22c55e;
  color:#04120c;
  padding:2px 6px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.badge-tier-free{
  background:#3b82f6;
  color:#021024;
  padding:2px 6px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.badge-pay-paid{
  background:#22c55e;
  color:#04120c;
  padding:2px 6px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.badge-pay-pend{
  background:#eab308;
  color:#1f1302;
  padding:2px 6px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.badge-pay-none{
  background:#6b7280;
  color:#020617;
  padding:2px 6px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}


/* optional subtle zebra for readability */
.admin table.admin-table.compact tbody tr:nth-child(odd){ background:rgba(255,255,255,.015); }

/* ===== Admin: full-bleed utility (fills entire viewport width) ===== */
.admin-fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.admin-fullbleed .admin-table-wrap { max-width: none; width: 100%; }
.admin-fullbleed .admin-table-wrap table { width: 100%; }

/* === Success Page Centering === */
.success-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  margin: 0 auto;
}

.success-box {
  text-align: center;
  background: rgba(0,0,0,0.65);
  padding: 30px;
  border-radius: 12px;
  max-width: 700px;
  border: 2px solid #00ff9d;
  box-shadow: 0 0 25px rgba(0,255,157,0.4);
}
.success-box ul {
  list-style: none;
  padding: 0;
  margin: 10px auto;
  text-align: left;
  display: inline-block;
}
.success-box ul li strong {
  color: #00ff9d;
}
.success-box h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #00ff9d;
}

/* === Global Button Theme: Deep Violet → Indigo (subtle glow) === */
:root{
  --btn-grad-start: #6b4dff;   /* deep violet */
  --btn-grad-end:   #8f00ff;   /* vivid purple */
  --btn-glow-inner: rgba(111, 0, 255, 0.4);
  --btn-glow-outer: rgba(180, 70, 255, 0.25);
}

/* Core buttons & variants */
.btn,
.btn.primary,
.btn.submit-btn,
header .btn,
.hero .btn,
footer a {
  background: linear-gradient(90deg, var(--btn-grad-start), var(--btn-grad-end)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 0 10px var(--btn-glow-inner), 0 0 25px var(--btn-glow-outer) !important;
  transition: all 0.2s ease-in-out;
}
.btn:hover,
.btn.primary:hover,
.btn.submit-btn:hover,
header .btn:hover,
.hero .btn:hover,
footer a:hover {
  background: linear-gradient(90deg, var(--btn-grad-end), var(--btn-grad-start)) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 15px var(--btn-glow-outer);
}

/* Progress bars and highlights */
.pump-fill {
  background: linear-gradient(90deg, var(--btn-grad-start), var(--btn-grad-end)) !important;
  box-shadow: 0 0 8px var(--btn-glow-inner);
}

/* Optional accent tweak for consistency */
a, .nav-link.active {
  color: #b87aff !important;
}

/* === Responsive cards: desktop max; tablet P=2 / L=3; phone=2 === */

/* If your card container isn't already flex, these lines will gently enable it.
   If it is already flex, they won't fight (lower specificity). */
.cards-wrap, .cards, .coin-cards, .crew-cards, .grid-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px; /* spacing between cards */
}

/* Default (desktop): let your current desktop widths stand (3+ across). */
.card {
  /* If your cards have fixed width, keep it. Otherwise this gives a nice default. */
  flex: 0 1 340px;
}

/* Phone: 2-up */
@media (max-width: 767.98px) {
  .card { flex: 0 1 calc(50% - 12px); }
  .card .thumb img,
  .card .logo img { width: 100%; height: auto; }
  /* Optional: shrink thumbnail zone to save vertical space */
  .card .thumb { max-height: 110px; overflow: hidden; }
}

/* Tablet Portrait: 2-up */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .card { flex: 0 1 calc(50% - 12px); }
  .card .thumb { max-height: 130px; overflow: hidden; }
}

/* Tablet Landscape: 3-up */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .card { flex: 0 1 calc(33.333% - 12px); }
  .card .thumb { max-height: 140px; overflow: hidden; }
}

/* === Responsive card columns (no HTML changes) === */
/* Keep desktop as-is (your current layout). Force counts on smaller screens. */

/* Phone: 2-up */
@media (max-width: 767.98px) {
  .carousel {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .carousel { --coin-size: 92px; }          /* slightly smaller avatars */
  .carousel .card { width: auto !important; }/* ignore fixed --card-w */
}

/* Tablet Portrait: 2-up */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .carousel {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .carousel { --coin-size: 104px; }
  .carousel .card { width: auto !important; }
}

/* Tablet Landscape: 3-up */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .carousel {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .carousel { --coin-size: 110px; }
  .carousel .card { width: auto !important; }
}

  .coins-table-scroll {
    width: 100%;
    overflow-x: auto;
  }

  .coins-table-scroll table {
    min-width: 1100px; /* tweak if needed */
  }