/* Frontend theme overrides — based on totd.cc layout */

body[data-template] {
  background-attachment: fixed;
}

/* ── Default · Neon Green (totd.cc original) ── */
body[data-template="default"] {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in oklab, var(--neon) 12%, transparent), transparent),
    radial-gradient(ellipse 60% 40% at 80% 100%, color-mix(in oklab, var(--neon) 6%, transparent), transparent);
}

/* ── Cyber Purple ── */
body[data-template="classic"] {
  background-image:
    radial-gradient(ellipse 70% 45% at 20% 0%, color-mix(in oklab, var(--neon) 14%, transparent), transparent),
    radial-gradient(ellipse 50% 35% at 90% 80%, color-mix(in oklab, #7c3aed 10%, transparent), transparent);
}
body[data-template="classic"] .tpl-mixer-card {
  border-color: color-mix(in oklab, var(--primary) 50%, transparent);
  box-shadow: 0 0 40px color-mix(in oklab, var(--primary) 20%, transparent), inset 0 1px 0 color-mix(in oklab, var(--primary) 15%, transparent);
}

/* ── Deep Ocean ── */
body[data-template="ocean"] {
  background-image:
    linear-gradient(180deg, color-mix(in oklab, #0c4a6e 8%, transparent) 0%, transparent 40%),
    radial-gradient(ellipse 90% 60% at 50% 100%, color-mix(in oklab, var(--neon) 8%, transparent), transparent);
}
body[data-template="ocean"] .tpl-header {
  border-bottom-color: color-mix(in oklab, var(--primary) 25%, var(--border));
}

/* ── Crimson Flame ── */
body[data-template="crimson"] {
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 0%, color-mix(in oklab, #be123c 15%, transparent), transparent),
    radial-gradient(ellipse 40% 30% at 10% 90%, color-mix(in oklab, var(--neon) 5%, transparent), transparent);
}
body[data-template="crimson"] .tpl-connect-btn {
  background: linear-gradient(135deg, var(--primary) 0%, #be123c 100%);
}

/* ── Gold Luxury ── */
body[data-template="gold"] {
  background-image:
    radial-gradient(ellipse 70% 50% at 50% -5%, color-mix(in oklab, #f59e0b 10%, transparent), transparent),
    radial-gradient(ellipse 50% 40% at 100% 50%, color-mix(in oklab, #d97706 6%, transparent), transparent);
}
body[data-template="gold"] .tpl-logo-ring {
  border-color: #f59e0b;
  box-shadow: 0 0 24px color-mix(in oklab, #f59e0b 40%, transparent);
}
body[data-template="gold"] .tpl-mixer-card {
  border-color: color-mix(in oklab, #f59e0b 35%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, #1a1408 80%, var(--card)) 0%, var(--card) 100%);
}
body[data-template="gold"] .tpl-connect-btn {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  color: #1a1004;
}

/* ── Matrix ── */
body[data-template="matrix"] {
  background-image:
    linear-gradient(0deg, transparent 24%, color-mix(in oklab, var(--neon) 3%, transparent) 25%, color-mix(in oklab, var(--neon) 3%, transparent) 26%, transparent 27%, transparent 74%, color-mix(in oklab, var(--neon) 3%, transparent) 75%, color-mix(in oklab, var(--neon) 3%, transparent) 76%, transparent 77%),
    linear-gradient(90deg, transparent 24%, color-mix(in oklab, var(--neon) 3%, transparent) 25%, color-mix(in oklab, var(--neon) 3%, transparent) 26%, transparent 27%, transparent 74%, color-mix(in oklab, var(--neon) 3%, transparent) 75%, color-mix(in oklab, var(--neon) 3%, transparent) 76%, transparent 77%);
  background-size: 48px 48px;
}
body[data-template="matrix"] .tpl-site-name {
  text-shadow: 0 0 12px var(--neon);
  letter-spacing: 0.2em;
}
body[data-template="matrix"] .tpl-mixer-card,
body[data-template="matrix"] .tpl-stats-card {
  border-radius: 4px;
  border-color: color-mix(in oklab, var(--primary) 60%, transparent);
}

/* ── Midnight Minimal ── */
body[data-template="midnight"] {
  background-image: none;
  background-color: var(--background);
}
body[data-template="midnight"] .tpl-header {
  background: color-mix(in oklab, var(--background) 95%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent);
}
body[data-template="midnight"] .tpl-mixer-card,
body[data-template="midnight"] .tpl-stats-card,
body[data-template="midnight"] .tpl-content-card {
  border-radius: 16px;
  border-color: color-mix(in oklab, var(--foreground) 10%, transparent);
  box-shadow: none;
  backdrop-filter: blur(12px);
}
body[data-template="midnight"] .tpl-connect-btn {
  border-radius: 999px;
  box-shadow: none;
  background: var(--foreground);
  color: var(--background);
}
body[data-template="midnight"] .tpl-logo-ring {
  border-color: var(--foreground);
  box-shadow: none;
}

/* ── Sunset Warm ── */
body[data-template="sunset"] {
  background-image:
    radial-gradient(ellipse 100% 80% at 50% 110%, color-mix(in oklab, #ea580c 18%, transparent), transparent),
    radial-gradient(ellipse 60% 40% at 0% 0%, color-mix(in oklab, #f97316 8%, transparent), transparent);
}
body[data-template="sunset"] .tpl-mixer-card {
  border-color: color-mix(in oklab, #fb923c 40%, transparent);
  overflow: hidden;
}
body[data-template="sunset"] .tpl-mixer-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in oklab, #fb923c 6%, transparent) 0%, transparent 50%);
  pointer-events: none;
}
body[data-template="sunset"] .tpl-mixer-card { position: relative; }
body[data-template="sunset"] .tpl-connect-btn {
  background: linear-gradient(90deg, #f97316, #fb923c, #fbbf24);
  background-size: 200% 100%;
  transition: background-position .4s;
}
body[data-template="sunset"] .tpl-connect-btn:hover { background-position: 100% 0; }

/* ── Arctic Frost ── */
body[data-template="arctic"] {
  background-image:
    radial-gradient(ellipse 80% 50% at 30% 0%, color-mix(in oklab, #e0f2fe 6%, transparent), transparent),
    linear-gradient(180deg, color-mix(in oklab, #0c1929 50%, var(--background)) 0%, var(--background) 100%);
}
body[data-template="arctic"] .tpl-header {
  background: color-mix(in oklab, var(--card) 60%, transparent);
  backdrop-filter: blur(16px);
}
body[data-template="arctic"] .tpl-mixer-card,
body[data-template="arctic"] .tpl-stats-card,
body[data-template="arctic"] .tpl-content-card {
  background: color-mix(in oklab, var(--card) 70%, transparent);
  backdrop-filter: blur(20px);
  border-color: color-mix(in oklab, #7dd3fc 25%, transparent);
  box-shadow: 0 8px 32px color-mix(in oklab, #0ea5e9 8%, transparent);
}
body[data-template="arctic"] .tpl-connect-btn {
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
}

/* Shared template classes */
.tpl-mixer-card { transition: box-shadow .25s, border-color .25s; }
.tpl-stats-card { transition: background .25s; }
.tpl-content-card { transition: border-color .25s; }
.tpl-faq-item:hover { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }

/* Admin template preview mini mockups */
.tpl-preview {
  border-radius: 10px;
  overflow: hidden;
  height: 88px;
  position: relative;
  border: 1px solid var(--border);
}
.tpl-preview-bar {
  height: 18px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
}
.tpl-preview-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.tpl-preview-body {
  padding: 8px;
  display: grid;
  gap: 5px;
}
.tpl-preview-card {
  height: 28px;
  border-radius: 4px;
  border: 1px solid;
}
.tpl-preview-btn {
  height: 10px;
  border-radius: 3px;
  width: 60%;
  margin: 0 auto;
}