/* WebSpeak Tech Theme — Navy & Cyan */
html[data-ws-route="webclient"] {
  color-scheme: dark;
  --ws-bg: #0b1220;
  --ws-panel: #111d30;
  --ws-panel-2: #16253a;
  --ws-border: #263850;
  --ws-cyan: #43d9d0;
  --ws-cyan-dark: #087e83;
  --ws-text: #edf5ff;
  --ws-muted: #9aadc2;
}

/* 页面背景与默认文字 */
html[data-ws-route="webclient"] body {
  background: var(--ws-bg);
  color: var(--ws-text);
}

html[data-ws-route="webclient"] .join-page,
html[data-ws-route="webclient"] .web-client {
  background:
    radial-gradient(ellipse at 12% 12%, #16334a88 0, transparent 42%),
    radial-gradient(ellipse at 88% 75%, #073e4780 0, transparent 38%),
    var(--ws-bg);
  color: var(--ws-text);
}

/* 顶部导航 */
html[data-ws-route="webclient"] .join-header {
  width: min(1680px, calc(100% - 48px));
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #263850a8;
  background: #0b1220c9;
  backdrop-filter: blur(18px);
}

html[data-ws-route="webclient"] .brand-lockup strong,
html[data-ws-route="webclient"] .eyebrow,
html[data-ws-route="webclient"] .room-eyebrow {
  color: var(--ws-cyan);
}

html[data-ws-route="webclient"] .brand-lockup strong span {
  color: var(--ws-text);
}

html[data-ws-route="webclient"] .brand-lockup small,
html[data-ws-route="webclient"] .header-note {
  color: var(--ws-muted);
}

html[data-ws-route="webclient"] .brand-mark,
html[data-ws-route="webclient"] .rail-logo {
  background: linear-gradient(135deg, #39d9cf, #1687b8);
  box-shadow: 0 0 24px #36d9d022;
}

/* 顶部按钮 */
html[data-ws-route="webclient"] .github-button,
html[data-ws-route="webclient"] .changelog-button,
html[data-ws-route="webclient"] .language-switch,
html[data-ws-route="webclient"] .version-badge {
  border: 1px solid var(--ws-border);
  border-radius: 10px;
  box-shadow: none;
}

html[data-ws-route="webclient"] .github-button {
  background: #17263a;
  border-color: #34485e;
  color: var(--ws-text);
}

html[data-ws-route="webclient"] .github-button:hover,
html[data-ws-route="webclient"] .changelog-button:hover,
html[data-ws-route="webclient"] .language-switch:hover {
  background: #183d4b;
  border-color: var(--ws-cyan);
  color: var(--ws-cyan);
  transform: translateY(-1px);
}

html[data-ws-route="webclient"] .changelog-button,
html[data-ws-route="webclient"] .language-switch {
  background: #132237;
  color: #bce9ed;
}

html[data-ws-route="webclient"] .version-badge {
  background: #12333d;
  color: var(--ws-cyan);
}

/* 首页布局 */
html[data-ws-route="webclient"] .join-header,
html[data-ws-route="webclient"] .join-content,
html[data-ws-route="webclient"] .join-footer {
  max-width: 1680px;
}

html[data-ws-route="webclient"] .join-content {
  gap: clamp(32px, 5vw, 80px);
}

html[data-ws-route="webclient"] .join-copy h1 {
  color: var(--ws-text);
  letter-spacing: -.055em;
  text-shadow: 0 8px 40px #00000030;
}

html[data-ws-route="webclient"] .join-copy h1 span {
  color: var(--ws-cyan);
}

html[data-ws-route="webclient"] .join-copy p,
html[data-ws-route="webclient"] .join-footer {
  color: var(--ws-muted);
}

/* 卡片、表单与信息面板 */
html[data-ws-route="webclient"] .join-page section,
html[data-ws-route="webclient"] .join-page article,
html[data-ws-route="webclient"] .join-page form {
  border-color: var(--ws-border);
}

html[data-ws-route="webclient"] .join-page input,
html[data-ws-route="webclient"] .join-page select,
html[data-ws-route="webclient"] .join-page textarea {
  background: #0b1627;
  color: var(--ws-text);
  border-color: #344b63;
  border-radius: 10px;
}

html[data-ws-route="webclient"] .join-page input::placeholder,
html[data-ws-route="webclient"] .join-page textarea::placeholder {
  color: #71869d;
}

html[data-ws-route="webclient"] .join-page input:focus,
html[data-ws-route="webclient"] .join-page select:focus,
html[data-ws-route="webclient"] .join-page textarea:focus {
  outline: 2px solid #43d9d055;
  border-color: var(--ws-cyan);
}

/* 主要操作按钮 */
html[data-ws-route="webclient"] .join-page button[type="submit"],
html[data-ws-route="webclient"] .join-page .primary-button,
html[data-ws-route="webclient"] .join-page .join-button {
  background: linear-gradient(135deg, #13a9a4, #087e91);
  color: #fff;
  border: 1px solid #49e0d4;
  border-radius: 11px;
  box-shadow: 0 8px 24px #0b9d9a25;
  transition: filter .18s ease, transform .18s ease;
}

html[data-ws-route="webclient"] .join-page button[type="submit"]:hover,
html[data-ws-route="webclient"] .join-page .primary-button:hover,
html[data-ws-route="webclient"] .join-page .join-button:hover {
  filter: brightness(1.13);
  transform: translateY(-1px);
}

/* 页脚 */
html[data-ws-route="webclient"] .join-footer {
  border-top: 1px solid #263850a8;
}

/* 小屏幕适配 */
@media (max-width: 900px) {
  html[data-ws-route="webclient"] .join-header,
  html[data-ws-route="webclient"] .join-content,
  html[data-ws-route="webclient"] .join-footer {
    width: calc(100% - 32px);
  }

  html[data-ws-route="webclient"] .join-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ws-route="webclient"] *,
  html[data-ws-route="webclient"] *::before,
  html[data-ws-route="webclient"] *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ===== WebSpeak 顶部导航精简 ===== */

/* 隐藏 GitHub 仓库、更新日志和版本号 */
html[data-ws-route="webclient"] .join-header .github-button,
html[data-ws-route="webclient"] .join-header .changelog-button,
html[data-ws-route="webclient"] .join-header .version-badge {
  display: none !important;
}

/* 隐藏社群外链按钮：通过链接地址识别，不影响管理控制台 */
html[data-ws-route="webclient"] .join-header a[href*="bilibili.com"],
html[data-ws-route="webclient"] .join-header a[href*="github.com"],
html[data-ws-route="webclient"] .join-header a[href*="qm.qq.com"],
html[data-ws-route="webclient"] .join-header a[href*="jq.qq.com"] {
  display: none !important;
}

/* 导航更紧凑，保留管理控制台、皮肤和语言切换 */
html[data-ws-route="webclient"] .header-tools {
  gap: 10px;
}


/* ===== 顶部背景透明化 ===== */
html[data-ws-route="webclient"] .join-header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/* ===== 移除 QQ 群入口 ===== */
html[data-ws-route="webclient"] .join-header a[href*="qm.qq.com"],
html[data-ws-route="webclient"] .join-header a[href*="jq.qq.com"],
html[data-ws-route="webclient"] .join-header a[href*="qq.com"] {
  display: none !important;
}


/* ===== 首页改为单卡片居中布局 ===== */

/* 删除左侧介绍、标题、描述和功能卡片 */
html[data-ws-route="webclient"] .join-copy {
  display: none !important;
}

/* 主区域改为纵向居中排列 */
html[data-ws-route="webclient"] .join-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 48px 24px 64px !important;
}

/* 语音加入卡片：宽度适中并居中 */
html[data-ws-route="webclient"] .join-content > :not(.join-copy) {
  width: min(100%, 620px);
  max-width: 620px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 访客统计：居中显示在卡片下方 */
html[data-ws-route="webclient"] .visitor-count {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* 避免窄屏幕布局溢出 */
@media (max-width: 640px) {
  html[data-ws-route="webclient"] .join-content {
    padding: 32px 16px 40px !important;
    gap: 18px !important;
  }

  html[data-ws-route="webclient"] .join-content > :not(.join-copy) {
    width: 100%;
    max-width: 100%;
  }
}


/* 昵称输入框透明化 */
html[data-ws-route="webclient"] .join-page input {
  background: transparent !important;
  background-color: transparent !important;
  color: #192b35 !important;
  box-shadow: none !important;
}

/* 输入框获得焦点时仍保持透明 */
html[data-ws-route="webclient"] .join-page input:focus {
  background: transparent !important;
  background-color: transparent !important;
}

/* 输入区域外层也改为透明 */
html[data-ws-route="webclient"] .join-page .field-wrap,
html[data-ws-route="webclient"] .join-page .input-wrap {
  background: transparent !important;
}


/* 昵称输入文字与背景形成高对比 */
html[data-ws-route="webclient"] .join-page input {
  color: #17212b !important;
  caret-color: #087e83 !important;
  -webkit-text-fill-color: #17212b !important;
}

html[data-ws-route="webclient"] .join-page input::placeholder {
  color: #718096 !important;
  -webkit-text-fill-color: #718096 !important;
  opacity: 1;
}


/* ===== 昵称输入框：自动适配浅色/深色皮肤 ===== */

/* 输入框本身保持透明 */
html[data-ws-route="webclient"] .join-page input {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;

  /* 自动跟随 WebSpeak 当前皮肤 */
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;

  /* 光标使用主题强调色 */
  caret-color: var(--accent, #087e83) !important;
}

/* 占位文字 */
html[data-ws-route="webclient"] .join-page input::placeholder {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
  opacity: 1 !important;
}

/* 聚焦时保持透明 */
html[data-ws-route="webclient"] .join-page input:focus {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

/* 输入框外层保持透明 */
html[data-ws-route="webclient"] .join-page .field-wrap,
html[data-ws-route="webclient"] .join-page .input-wrap {
  background: transparent !important;
}


/* =========================================================
   抽象工作室首页定制
   ========================================================= */

/* ---------- 品牌副标题 ---------- */

/* 原来的「浏览器语音工作台」隐藏 */
html[data-ws-route="webclient"] .brand-lockup small {
  font-size: 0 !important;
}

/* 改成「抽象工作室」 */
html[data-ws-route="webclient"] .brand-lockup small::after {
  content: "抽象工作室";
  display: block;

  /* 自动跟随当前皮肤 */
  color: var(--text-primary) !important;

  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .08em;
  font-weight: 500;
  text-transform: none;
}

/* ---------- QQ 群按钮 ---------- */

/* 顶部 QQ 群按钮 */
html[data-ws-route="webclient"] .join-header .qq-button,
html[data-ws-route="webclient"] .join-header .qq-group-button,
html[data-ws-route="webclient"] .join-header .qq-button-wrap,
html[data-ws-route="webclient"] .join-header .qq-link {
  display: none !important;
}

/* ---------- 页脚 ---------- */

/* 隐藏页脚左侧 WebSpeak 品牌 */
html[data-ws-route="webclient"] .join-footer .brand,
html[data-ws-route="webclient"] .join-footer .brand-name,
html[data-ws-route="webclient"] .join-footer strong {
  display: none !important;
}


/* =========================================================
   最终首页 UI
   ========================================================= */

/* 1. 顶部 QQ 群按钮：彻底隐藏 */
html[data-ws-route="webclient"] .join-header .qq-button {
  display: none !important;
}

/* 如果 QQ 按钮存在外层容器，也一起隐藏 */
html[data-ws-route="webclient"] .join-header .qq-button-wrap,
html[data-ws-route="webclient"] .join-header .qq-group-button,
html[data-ws-route="webclient"] .join-header .qq-link {
  display: none !important;
}

/* 2. 品牌副标题改成「抽象工作室」 */
html[data-ws-route="webclient"] .join-header .brand-lockup small {
  font-size: 0 !important;
  color: transparent !important;
}

html[data-ws-route="webclient"] .join-header .brand-lockup small::after {
  content: "抽象工作室";
  display: block;
  color: var(--text-primary) !important;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .08em;
  font-weight: 500;
  text-transform: none;
}

/* 3. 页脚左侧 WebSpeak 品牌文字隐藏 */
html[data-ws-route="webclient"] .join-footer .brand,
html[data-ws-route="webclient"] .join-footer .brand-name,
html[data-ws-route="webclient"] .join-footer strong {
  display: none !important;
}

/* 页脚整体保持当前主题颜色 */
html[data-ws-route="webclient"] .join-footer {
  color: var(--text-primary);
}

/* 4. 顶部导航间距重新整理 */
html[data-ws-route="webclient"] .header-tools {
  gap: 10px !important;
}