/* ━━━━━━━━━━━━ VARIABLES ━━━━━━━━━━━━ */
:root {
  --purple: #6B21D4;
  --purple-light: #9B5FE3;
  --purple-dark: #3D0F7A;
  --purple-glow: rgba(107,33,212,0.6);
  --cream: #FFF8F0;
  --black: #060608;
  --white: #FFFFFF;
  --gold: #FFD166;
  --text-dim: rgba(255,255,255,0.45);
  --red: #FF3366;
  --pink: #FFB3D9;
}

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

/* ━━━━━━━━━━━━ BASE BODY ━━━━━━━━━━━━ */
body {
  background: var(--black);
  overflow-x: hidden;
}

/* ━━━━━━━━━━━━ NOISE OVERLAY ━━━━━━━━━━━━ */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 9000; opacity: .6;
}


/* ━━━━━━━━━━━━ COMMON PAGE COMPONENTS ━━━━━━━━━━━━ */

/* Base text color */
body { color: #fff; }

/* ── Sticky header ── */
header { position: sticky; top: 0; z-index: 100; padding: 16px 40px; background: rgba(6,6,8,.96); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(107,33,212,.3); display: flex; align-items: center; gap: 14px; }
.h-badge { background: var(--purple); color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 3px; padding: 4px 14px; animation: hbp 2s ease-in-out infinite; }
@keyframes hbp { 0%, 100% { box-shadow: 0 0 0 rgba(107,33,212,0); } 50% { box-shadow: 0 0 24px rgba(107,33,212,.7); } }
.h-title { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 4px; color: rgba(255,255,255,.8); }
.back-link { margin-left: auto; text-decoration: none; color: var(--purple-light); font-size: 11px; letter-spacing: 2px; transition: color .3s; }
.back-link:hover { color: var(--gold); }
@media (max-width: 720px) { header { padding: 12px 20px; flex-wrap: wrap; gap: 6px 12px; } .h-title { font-size: 14px; } }

/* ── Hero grid & text components ── */
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(107,33,212,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(107,33,212,.06) 1px, transparent 1px); background-size: 32px 32px; animation: gd 20s linear infinite; }
@keyframes gd { to { background-position: 32px 32px; } }
.hero-eyebrow { font-size: 10px; letter-spacing: 6px; color: var(--purple-light); text-transform: uppercase; display: block; margin-bottom: 16px; animation: eb 2s ease-in-out infinite; position: relative; z-index: 1; }
@keyframes eb { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
.hero-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(56px, 11vw, 130px); line-height: .88; color: var(--white); position: relative; z-index: 1; margin-bottom: 10px; }
.hero-title em { font-style: normal; background: linear-gradient(135deg, var(--purple-light), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-cap { font-size: 10px; letter-spacing: 3px; color: rgba(255,255,255,.3); position: relative; z-index: 1; }

/* ── Footer ── */
footer { text-align: center; padding: 60px 20px; border-top: 1px solid rgba(107,33,212,.15); }
.footer-txt { font-family: 'Bebas Neue', sans-serif; font-size: clamp(22px, 5vw, 48px); background: linear-gradient(135deg, var(--purple-light), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 10px; }
.footer-copy { font-size: 9px; letter-spacing: 3px; color: rgba(255,255,255,.2); }

/* ── Ya comment box ── */
.ya-box { padding: 24px 28px; background: rgba(107,33,212,.06); border-left: 3px solid var(--purple); position: relative; overflow: hidden; }
.ya-box::before { content: '✌️'; position: absolute; right: 16px; top: 8px; font-size: 48px; opacity: .06; }
.ya-lbl { font-size: 8px; letter-spacing: 4px; color: var(--purple-light); text-transform: uppercase; margin-bottom: 8px; display: block; }
.ya-txt { font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.8); font-weight: 700; }

/* ── Raw JSON section ── */
.raw-section { max-width: 1000px; margin: 0 auto; }
.raw-title { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 3px; color: rgba(255,255,255,.4); margin-bottom: 16px; }
.raw-toggle { background: none; border: 1px solid rgba(107,33,212,.3); color: rgba(155,95,227,.7); font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 2px; padding: 8px 20px; cursor: pointer; transition: all .3s; }
.raw-toggle:hover { border-color: var(--purple-light); color: #fff; }
.raw-json { display: none; margin-top: 16px; background: rgba(0,0,0,.4); border: 1px solid rgba(107,33,212,.15); padding: 24px; overflow-x: auto; }
.raw-json pre { font-size: 11px; line-height: 1.7; color: rgba(155,95,227,.8); margin: 0; }
.raw-json.open { display: block; }

/* ── Option form controls ── */
.opt-field label { font-size: 8px; letter-spacing: 3px; color: rgba(255,255,255,.3); text-transform: uppercase; display: block; margin-bottom: 8px; }
.opt-select { width: 100%; padding: 11px 14px; padding-right: 28px; background: rgba(255,255,255,.04); border: 1px solid rgba(107,33,212,.25); color: #fff; font-family: 'Space Mono', monospace; font-size: 12px; outline: none; transition: border-color .3s; -webkit-appearance: none; 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='rgba(155,95,227,.6)'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.opt-select:focus { border-color: var(--purple-light); }
.opt-select option { background: #0e0810; }

/* ── Primary gradient button ── */
.btn-gen { flex: 1; padding: 16px 0; background: linear-gradient(135deg, var(--purple), var(--purple-light)); border: none; color: #fff; cursor: pointer; font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 3px; position: relative; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.btn-gen::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transform: translateX(-100%); transition: transform .5s; }
.btn-gen:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(107,33,212,.5); }
.btn-gen:hover::before { transform: translateX(100%); }
.btn-gen:active { transform: scale(.97); }

/* ── Shared keyframes ── */
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes pulse     { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes cardIn    { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes idleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }