/* ========== ai-page.css ========== */
/* Reset-ish */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Theme tokens */
:root{
  --bg: #0f1320;
  --card: #161b2e;
  --text: #e9ecf1;
  --muted: #b6bfd4;
  --link: #87b2ff;
  --link-hover: #b9d0ff;
  --accent: linear-gradient(135deg,#7b5cff 0%, #00e5ff 100%);
  --ring: 0 0 0 3px rgba(135,178,255,.25);
}

/* Body */
body.aiPgBody{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0,229,255,.15), transparent 60%),
    radial-gradient(800px 400px at 120% 10%, rgba(123,92,255,.12), transparent 60%),
    var(--bg);
  line-height: 1.6;
}

/* Layout wrapper defaults */
header, main, section, footer{
  max-width: 900px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 28px);
}

/* Header */
header{
  padding-top: 56px;
  padding-bottom: 24px;
}
header h1{
  font-size: clamp(1.6rem, 2.5vw + 1rem, 2.4rem);
  line-height: 1.2;
  margin: 0;
  letter-spacing: .2px;
  background: var(--accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(135,178,255,.15);
}

/* Main content card */
.colorMix{
  background: rgba(22,27,46,.7);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: clamp(18px, 2.5vw, 28px);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  margin-bottom: 28px;
}

.colorMix p{
  margin: 0 0 1rem 0;
  color: var(--text);
}
.colorMix a{
  color: var(--link);
  text-decoration-color: rgba(135,178,255,.5);
  text-underline-offset: 2px;
}
.colorMix a:hover,
.colorMix a:focus{
  color: var(--link-hover);
  text-decoration-thickness: 2px;
  outline: none;
  box-shadow: var(--ring);
  border-radius: 6px;
}

/* Prompt section */
.prompts{
  background: rgba(22,27,46,.4);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: clamp(16px, 2.2vw, 24px);
  margin: 12px auto 36px;
}
.prompts h2{
  margin: 0 0 .5rem;
  font-size: clamp(1.1rem, 1.4vw + .6rem, 1.5rem);
  color: #dbe6ff;
}

/* Footer */
.footerStyle{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 24px 0 48px;
  color: var(--muted);
}
.footerStyle h4{
  margin: 0 0 .5rem;
  font-weight: 600;
  color: #d1d8ea;
}
.footerStyle nav{
  margin-top: 8px;
}
.footerul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.footerul a{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.footerul a:hover,
.footerul a:focus{
  background: rgba(255,255,255,.08);
  outline: none;
  box-shadow: var(--ring);
}

/* Responsive spacing tweaks */
@media (max-width: 520px){
  header{ padding-top: 40px; }
  .footerul{ gap: 10px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}