/* ===== 主题色（更柔和的暗色，接近截图风格） ===== */
:root {
  --background: 222 47% 6%; /* 整体略亮一点的深蓝灰 */
  --foreground: 210 40% 98%;
  --muted: 222 32% 10%; /* 卡片背景：深蓝灰 */
  --muted-foreground: 215 18% 70%; /* 次级文字颜色 */
  --border: 222 26% 20%; /* 卡片 & 输入框边框 */
  --input: 222 26% 18%;
  --ring: 217 91% 60%; /* 高亮蓝 */
  --primary: 217 91% 60%; /* 主按钮蓝色 */
  --primary-foreground: 210 40% 98%;
  --radius: 0.75rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 整站背景 + 字体 */
body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
  background-color: hsl(var(--background)); /* 深蓝灰背景 */
  color: hsl(var(--foreground));
}

/* 单页面水平居中时可用 */
.ui-page-center {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px 40px;
}

/* 标题统一样式 */
h1,
h2 {
  font-weight: 600;
  letter-spacing: 0.04em;
}

h1 {
  font-size: 22px;
  text-align: center;
  margin: 20px 0 16px;
}

h2 {
  font-size: 18px;
  margin: 0 0 8px;
}

/* ===== 通用卡片容器：贴近截图的平滑卡片 ===== */
.container {
  width: 88%;
  max-width: 1200px;
  margin: 0 auto 24px;
  padding: 20px 24px;
  border-radius: calc(var(--radius) * 1.5);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted)); /* 纯色深蓝灰 */
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.75); /* 柔和下投影，无外发光描边 */
}

/* 输入区 / 输出区简单分块 */
.input-section,
.output-section {
  width: 100%;
  margin-bottom: 16px;
}

/* ===== 输入类统一：input / textarea / select ===== */
input[type="text"],
input[type="number"],
textarea,
select {
  width: 100%;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--input));
  /* ☆ 这里改成变量，跟随主题 */
  background-color: hsl(var(--input)); 
  color: hsl(var(--foreground));
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background-color 0.15s ease;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder {
  color: hsl(var(--muted-foreground));
}

input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 1px hsl(var(--ring));
  /* ☆ 聚焦时也不要死写深色，给个略亮一点的感觉 */
  background-color: hsl(var(--background));
}

textarea {
  min-height: 80px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}

textarea[readonly] {
  /* ☆ 改成用变量，适配浅色主题 */
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

/* 帝恩斯那种两个输入框一行的布局 */
.input-container {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.input-container input {
  width: 100%;
}

/* TXT 工具的多行 form-row */
.form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.form-row label {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
}

.form-row input[type="text"],
.form-row textarea {
  margin: 0 4px;
}

/* ===== 按钮统一：略微发光、圆角接近 pill，风格参考截图 ===== */
/* ===== 按钮统一：默认中性按钮（不强制蓝色） ===== */
.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted));                 /* ✅ 默认：中性灰 */
  color: hsl(var(--foreground));                 /* ✅ 默认：正常文字色 */
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease,
    border-color 0.15s ease;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.7), /* ✅ 不再写死蓝色外光 */
    0 0 0 1px hsl(var(--border));
}

.button:hover,
button:hover {
  background: hsl(var(--input));                /* ✅ hover 略亮一点 */
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.85),
    0 0 0 1px hsl(var(--ring) / 0.35);           /* ✅ 用 ring，但弱化，不强制蓝 */
  transform: translateY(-1px);
}

.button:active,
button:active {
  transform: translateY(0);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.9),
    0 0 0 1px hsl(var(--border));
}

.button[disabled],
button[disabled],
.button:disabled,
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}


.button-primary:hover {
  background: linear-gradient(to right, hsl(var(--primary) / 0.9), hsl(var(--primary)));
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.85), 0 0 0 1px hsl(var(--primary));
}

.button-secondary:hover {
  background: hsl(222 20% 32%);
}

/* Namecheap / NameSilo / Sav 等一排按钮 */
.button-group {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

/* CF-TXT 里的 “+ 新增解析组” */
.add-row {
  margin-top: 10px;
  cursor: pointer;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  text-decoration: underline;
}

.add-row:hover {
  color: hsl(var(--primary));
}

/* 一个 column 的按钮组（CFTXT 那种） */
#action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

/* ===== 输出区（pre / textarea） ===== */
pre,
textarea.tool-output {
  width: 100%;
  padding: 10px;
  /* ☆ 改用 muted 变量，暗色是深灰，浅色会变浅 */
  background-color: hsl(var(--muted));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  margin-top: 20px;
  height: 200px;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}

/* ===== loading 动画统一（所有 xxx-loading + #loading） ===== */
#loading,
#cftxt-loading,
#dns-loading,
#dynadot-loading,
#internetbs-loading,
#namecheap-loading,
#namesilo-loading {
  display: none;
  width: 64px;
  height: 64px;
  position: fixed;
  inset: 0;
  margin: auto;
  border-radius: 999px;
  box-shadow: 0 0 0 1px hsl(var(--border)), 0 22px 60px rgba(0, 0, 0, 0.9);
  background-color: hsl(var(--background));
}

/* ===== 域名生成器：整体卡片 & 标题 ===== */

.domain-gen-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
}

.domain-gen-container {
  /* 覆盖 .container 默认的 88% 宽度，整块铺满右侧内容区 */
  width: 100%;
  max-width: none;
  margin: 0; /* 跟右侧 content 的内边距对齐就行 */

  padding: 20px 24px 22px;
  border-radius: calc(var(--radius) * 1.5);
  border: 1px solid hsl(var(--border));
  background: radial-gradient(
      circle at top,
      rgba(148, 163, 253, 0.06),
      transparent 55%
    )
    hsl(var(--muted));
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75);
}

/* ===== 通用字段布局 ===== */

.domain-gen-field {
  margin-bottom: 14px;
}

.domain-gen-field:last-of-type {
  margin-bottom: 0;
}

.domain-gen-field label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: hsl(var(--muted-foreground));
}

.domain-gen-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.domain-gen-grow {
  flex: 1;
}

/* 统一本模块内按钮尺寸，避免跟别的工具不一致 */

.domain-gen-container .button {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: calc(var(--radius) - 2px);
}

/* ===== 单选模式：药丸按钮组 ===== */

.domain-gen-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.radio-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  background-color: hsl(var(--background));
  transition: background 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.06s ease;
}

.radio-pill input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.radio-pill span {
  pointer-events: none;
}

/* 选中态：高亮成主色一致样式 */

.radio-pill input:checked + span {
  color: hsl(var(--primary-foreground));
}

.radio-pill input:checked ~ span,
.radio-pill input:checked + span {
  /* 为了兼容不同浏览器写两遍选择器 */
}

.radio-pill input:checked ~ span,
.radio-pill input:checked + span,
.radio-pill input:checked ~ * {
  /* 通过父级加样式 */
}

.radio-pill input:checked ~ span,
.radio-pill input:checked + span {
  /* no-op，占位防止部分格式化器删掉 */
}

.radio-pill input:checked ~ span,
.radio-pill input:checked + span,
.radio-pill input:checked ~ * {
  /* 让 label 自己变色 */
  /* 利用下面的 :has 模拟，大部分现代浏览器已经支持 */
}

@supports (selector(label:has(input:checked))) {
  .radio-pill:has(input:checked) {
    border-color: hsl(var(--primary));
    background: linear-gradient(
      to right,
      hsl(var(--primary)),
      hsl(var(--primary))
    );
    color: hsl(var(--primary-foreground));
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.7);
  }
}

/* 不支持 :has 的浏览器依然会保持普通按钮样式，不影响功能 */

/* 子模式输入块（定制模式 & 前缀只能） */

.domain-gen-subfield {
  margin-top: 6px;
}

.domain-gen-subfield input[type="text"] {
  width: 100%;
}

/* ===== 长度 & 补货行 ===== */

.domain-gen-replenish {
  white-space: nowrap;
}

/* ===== 数量 + 快捷模板按钮 ===== */

.shortcut-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.shortcut-button,
.shortcut-reset {
  flex: 0 0 auto;
}

/* 重置按钮稍微弱化一点 */

.shortcut-reset {
  background: linear-gradient(
    to right,
    hsl(var(--primary) / 0.8),
    hsl(var(--primary) / 0.8)
  );
}

/* ===== 选项（复选框组） ===== */

.check-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
}

.check-options > div {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.check-options input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

/* ===== 输出区 & 文本域规范 ===== */

#output,
#debugOutput {
  width: 100%;
  margin-top: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.5;
  border-radius: calc(var(--radius) - 2px);
}

#output {
  min-height: 220px;
  max-height: 360px;
}

#debugOutput {
  min-height: 160px;
  max-height: 260px;
}

/* 生成按钮 & 复制按钮位置 */

#generate {
  margin-bottom: 6px;
}

.domain-gen-count {
  margin: 4px 0 6px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

/* ===== 排除字符行 ===== */

#excludeChars {
  width: 100%;
}

/* ===== 响应式细节 ===== */

@media (max-width: 960px) {
  .domain-gen-row {
    flex-direction: column;
    align-items: stretch;
  }

  .shortcut-row {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .domain-gen-container {
    padding: 16px 14px 18px;
  }
}

/* ===== 域名生成器：左右布局 ===== */

.domain-gen-layout {
  display: grid;
  /* 左侧配置区再宽一点，整体观感更接近“专业后台表单 + 输出面板” */
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
  gap: 24px;
  align-items: flex-start;
}

.domain-gen-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.domain-gen-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* 区块小标题（可选） */
.domain-gen-section-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  opacity: 0.9;
}

/* 输出区顶部工具栏：生成按钮 + 计数 + 复制 */

.domain-gen-output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.domain-gen-output-header .button {
  height: 32px;
  padding-inline: 14px;
}

.domain-gen-copy {
  opacity: 0.9;
}

.domain-gen-count {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

/* 调试区标题行 */

.domain-gen-debug-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.domain-gen-debug-header label {
  margin-bottom: 0;
}

.domain-gen-debug-hint {
  font-size: 11px;
  color: hsl(var(--muted-foreground) / 0.8);
}

/* 输出 / 调试文本框在右侧占满高度感更强一点 */

.domain-gen-right #output {
  min-height: 230px;
  max-height: 360px;
}

.domain-gen-right #debugOutput {
  min-height: 140px;
  max-height: 260px;
}

/* 响应式：窄屏下改回单列 */

@media (max-width: 1024px) {
  .domain-gen-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .domain-gen-output-header {
    justify-content: flex-start;
  }

  .domain-gen-count {
    flex: 0 0 auto;
    text-align: left;
  }
}

/* ===== 按钮语义扩展 ===== */

/* 主操作（蓝色） */
.button-primary {
  background: linear-gradient(
    to right,
    hsl(var(--primary)),
    hsl(var(--primary))
  );
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.7),
    0 0 0 1px rgba(59, 130, 246, 0.5);
}

/* 次操作（中性灰） */
.button-secondary {
  background: linear-gradient(
    to right,
    hsl(222 20% 28%),
    hsl(222 20% 28%)
  );
  color: hsl(var(--foreground));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6),
    0 0 0 1px hsl(var(--border));
}

/* 危险操作（红色） */
.button-danger {
  background: linear-gradient(
    to right,
    hsl(0 72% 48%),
    hsl(0 72% 48%)
  );
  color: white;
  box-shadow: 0 8px 20px rgba(127, 29, 29, 0.65),
    0 0 0 1px rgba(220, 38, 38, 0.6);
}

.button-danger:hover {
  background: linear-gradient(
    to right,
    hsl(0 72% 42%),
    hsl(0 72% 42%)
  );
}