/* AIGC导演台 · 极客终端主题 · 基础层（全站安全）
 * 只改「无结构风险」的东西：配色变量、背景网格、顶栏、按钮方角、页脚、滚动条。
 * 不碰 .card / 表单布局，避免破坏 20+ 个工具页。
 * 引入位置：页面内联 <style> 之后。
 */

:root {
  --bg: #05070a;
  --bg-soft: #090d13;
  --card: #0a1017;
  --card-hover: #0e1620;
  --text: #cfe0ee;
  --text-dim: #7d8ea3;
  --line: #17222f;
  --line-2: #243444;
  --accent: #22d3ee;
  --accent-2: #39ff88;
  --ok: #39ff88;
  --warn: #ffb454;
  --err: #ff5f6d;
  --grid: rgba(34, 211, 238, .05);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- 底层：深空 + 星云 + 暗角 ---------- */
html body {
  background-color: #04060c;
  background-image:
    radial-gradient(940px 600px at 4% -12%, rgba(112, 68, 214, .28), transparent 62%),
    radial-gradient(820px 540px at 96% 0%, rgba(18, 140, 206, .20), transparent 60%),
    radial-gradient(1180px 700px at 46% 116%, rgba(190, 44, 132, .20), transparent 64%),
    radial-gradient(760px 480px at 78% 62%, rgba(34, 211, 238, .10), transparent 62%),
    radial-gradient(520px 380px at 22% 78%, rgba(64, 226, 200, .08), transparent 64%),
    linear-gradient(118deg, transparent 34%, rgba(120, 165, 255, .055) 46%, rgba(180, 150, 255, .075) 52%, rgba(120, 165, 255, .05) 58%, transparent 70%),
    radial-gradient(130% 100% at 50% 42%, transparent 54%, rgba(0, 0, 0, .34) 100%),
    linear-gradient(180deg, #04060c 0%, #05080f 46%, #020409 100%);
  background-attachment: fixed;
  color: var(--text);
}

/* 星云：缓慢漂移的色团（只有 transform / opacity 动画，不吃 CPU） */
html body::before {
  content: ""; position: fixed; inset: -14%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(54% 42% at 16% 20%, rgba(120, 70, 220, .24), transparent 62%),
    radial-gradient(48% 38% at 84% 28%, rgba(16, 146, 212, .20), transparent 62%),
    radial-gradient(58% 46% at 62% 88%, rgba(196, 44, 136, .17), transparent 64%);
  animation: nebulaDrift 54s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes nebulaDrift {
  from { transform: translate3d(-2.5%, -1.5%, 0) scale(1.02); opacity: .80; }
  to   { transform: translate3d(2.5%, 2%, 0) scale(1.12); opacity: 1; }
}

/* 极淡颗粒 + 边缘压暗，避免纯黑死板 */
html body::after {
  content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .010) 0 1px, transparent 1px 3px);
}
/* ---------- 顶栏 ---------- */
html header.site {
  position: sticky; top: 0; z-index: 30;
  background: rgba(5, 7, 10, .88);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
html .brand .logo {
  border-radius: 4px;
  background: #061019;
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .35);
}
html .brand h1 { font-family: var(--mono); font-size: 17px; letter-spacing: .02em; }
html .brand p { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }

html .header-link,
html .contact-btn,
html .acct-login {
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid var(--line-2);
  color: var(--text);
  background: rgba(34, 211, 238, .06);
  box-shadow: none;
}
html .contact-btn { border-color: rgba(34, 211, 238, .5); background: rgba(34, 211, 238, .10); }
@media (hover: hover) {
  html .header-link:hover,
  html .contact-btn:hover,
  html .acct-login:hover {
    border-color: var(--accent);
    background: rgba(34, 211, 238, .16);
    box-shadow: 0 0 14px rgba(34, 211, 238, .22);
    filter: none;
  }
}

/* ---------- 通用控件：方角 + 等宽 ---------- */
html .chip {
  border-radius: 2px; font-family: var(--mono); font-size: 12px;
  border: 1px solid var(--line); color: var(--text-dim);
  background: var(--bg-soft); padding: 8px 14px;
}
html .chip.active {
  color: #04121a; background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 16px rgba(34, 211, 238, .32);
}
@media (hover: hover) { html .chip:hover { color: var(--text); border-color: var(--line-2); } }

html .acct-btn, html .free-quota {
  border-radius: 2px; font-family: var(--mono); font-size: 12px;
  border: 1px solid var(--line-2); background: rgba(34, 211, 238, .06);
}
html .acct-badge { border-radius: 2px; font-family: var(--mono); font-size: 11px; background: var(--accent); color: #04121a; }

/* ---------- 面板 / 弹窗 ---------- */
html .modal, html .acct-panel, html .free-panel {
  border-radius: 4px;
  border: 1px solid var(--line-2);
  background: var(--bg-soft);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .8);
}

/* ---------- 滚动条 ---------- */
html ::-webkit-scrollbar { width: 10px; height: 10px; }
html ::-webkit-scrollbar-track { background: #070b11; }
html ::-webkit-scrollbar-thumb { background: #1c2a38; border: 2px solid #070b11; border-radius: 6px; }
html ::-webkit-scrollbar-thumb:hover { background: #2b4152; }

/* ---------- 页脚 ---------- */
html footer.site {
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  padding: 18px 20px 28px;
}
html footer.site::before {
  content: "ready · api /ai-api";
  display: block; margin-bottom: 6px; color: var(--accent); opacity: .7;
}

/* ---------- 响应式基础 ---------- */
@media (max-width: 768px) {
  html body::before { animation-duration: 72s; }
  html .brand p { display: none; }
  html .brand h1 { font-size: 15px; }
  html .chip { padding: 9px 13px; min-height: 40px; display: inline-flex; align-items: center; }
  html .acct-login, html .contact-btn, html .header-link { min-height: 40px; display: inline-flex; align-items: center; }
  html footer.site { padding: 16px 14px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html body::before { animation: none; }
  html .card .cover::after { animation: none; }
}