/* AIGC导演台 · 极客终端主题 · 工具页暗色适配层
 * 工具页原为「白卡浅色」设计（#fff 卡片 / #e5e7eb 边框 / 紫色主按钮），
 * 只换 body 背景会变成「黑底白卡」。这一层把容器、表单、按钮、文本层次统一暗化。
 * 引入顺序：theme-terminal-base.css → theme-terminal-dark.css
 *
 * 容器/表单/按钮组使用 !important：各页存在 .ref-row .ghost 这类更具体的选择器，
 * 不用强制覆盖会被压过。文字层次不加 !important，保留成功/失败等语义色。
 * 只覆盖视觉属性，不改布局尺寸与 DOM，业务逻辑（会员门槛/接口）完全不受影响。
 */

/* ---------- 容器 ---------- */
html .card,
html .box,
html .panel,
html .ref-block,
html .stat,
html .result,
html .preview,
html .wrap-card {
  background: var(--card) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  color: var(--text) !important;
  box-shadow: none !important;
  position: relative;
}
html .card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--accent); opacity: .45;
}
html .box::before,
html .panel::before,
html .stat::before { content: none; }

/* ---------- 文本层次（不强制，保留语义色） ---------- */
html h1, html h2, html h3, html h4, html h5, html h6,
html .title, html strong, html b, html .k { color: #e6eef7; }
html .note, html .hint, html .sub, html .empty, html .filehint,
html .meta, html .tip, html .lede, html small, html .desc,
html .ref-preview { color: var(--text-dim); }
html .v, html .num, html .count { font-family: var(--mono); color: var(--accent); }
html a { color: var(--accent); }
@media (hover: hover) { html a:hover { text-decoration: underline; } }
html hr { border-color: var(--line); }

/* ---------- 表单 ---------- */
html input[type="text"],
html input[type="url"],
html input[type="number"],
html input[type="email"],
html input[type="password"],
html input[type="search"],
html textarea,
html select,
html .url-input,
html .input {
  background: #070c12 !important;
  background-image: none !important;
  color: var(--text) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 2px !important;
  outline: none;
}
html input:focus, html textarea:focus, html select:focus,
html .url-input:focus, html .input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .14) !important;
}
html input::placeholder, html textarea::placeholder { color: #4d6076; }
html label { color: var(--text-dim); }
html select option { background: #0a1017; color: var(--text); }
html input[type="range"] { accent-color: var(--accent); }
html input[type="checkbox"], html input[type="radio"] { accent-color: var(--accent); }

/* ---------- 按钮：.btn 主按钮，.ghost/.ghost-sm 次按钮 ---------- */
html .btn {
  border-radius: 2px !important;
  font-family: var(--mono);
  border: 1px solid var(--accent) !important;
  background: var(--accent) !important;
  background-image: none !important;
  color: #04121a !important;
  box-shadow: none;
}
html .ghost,
html .ghost-sm,
html .btn.ghost,
html .ref-row .ghost,
html .preview-btn {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 2px !important;
  color: var(--text-dim) !important;
  font-family: var(--mono);
}
html .btn[disabled], html .btn:disabled { opacity: .45; }
@media (hover: hover) {
  html .btn:hover:not(:disabled),
  html .btn:hover {
    background: #4ee0f5 !important;
    border-color: #4ee0f5 !important;
    color: #04121a !important;
    filter: none;
    box-shadow: 0 0 18px rgba(34, 211, 238, .28);
  }
  html .ghost:hover, html .ghost-sm:hover, html .btn.ghost:hover, html .ref-row .ghost:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: rgba(34, 211, 238, .08) !important;
  }
}

/* ---------- 状态 / 提示 / 进度 ---------- */
html .status { font-family: var(--mono); font-size: 12px; }
html .progress, html .bar { background: #0e1620; border-radius: 2px; }
html .progress > i, html .bar > i, html .fill { background: var(--accent); }
html .msg, html .tip { font-family: var(--mono); }
html .empty { border: 1px dashed var(--line-2); border-radius: 4px; }
html .ph { color: var(--text-dim); }
html .ref-preview img, html .preview img { border-color: var(--line) !important; }

/* ---------- 表格 / 代码 ---------- */
html table { border-color: var(--line); }
html th, html td { border-color: var(--line); }
html th { color: var(--text-dim); font-family: var(--mono); font-size: 12px; }
html pre, html code, html .code {
  background: #070c12;
  color: #a9e6f5;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--mono);
}

/* ---------- 标签 / 分组 ---------- */
html .tab {
  border-radius: 2px;
  font-family: var(--mono);
  border: 1px solid var(--line);
  color: var(--text-dim);
  background: var(--bg-soft);
}
html .tab.active {
  color: #04121a;
  background: var(--accent);
  border-color: var(--accent);
}
html .row { color: var(--text); }
html .sp { color: var(--text-dim); }

/* ---------- 弹窗 ---------- */
html .modal-mask { background: rgba(3, 5, 8, .78); }
html .modal-body, html .modal .box, html .modal .card {
  background: var(--bg-soft) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--text) !important;
}

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
  html .btn, html .ghost, html .ghost-sm { min-height: 40px; }
  html input, html select, html textarea { font-size: 16px; }
}

/* 工具页：星云降噪，让操作区专注（首页保留完整宇宙） */
html body::before { animation: none; opacity: .45; }