:root {
  /* 闪耀铂金 / 全站基色：冷银 + 香槟高光 */
  --bg: #e6e2da;
  --surface: #fdfcfa;
  --border: #d6cfc4;
  --text: #1c1a18;
  --muted: #5a5855;
  --accent: #e4393c;
  --accent-hover: #c72f32;
  --header-bg: #2a272c;
  --header-text: #f7f4ef;
  --header-gradient: linear-gradient(135deg, #2a2628 0%, #3f3a42 40%, #4a444e 100%);
  --header-border: rgba(200, 175, 130, 0.42);
  /* 浅色全站底：铂金米灰 + 顶区柔光（无暗场） */
  --page-sheen-top: radial-gradient(ellipse 100% 55% at 50% 0%, rgba(255, 252, 246, 0.88) 0%, transparent 52%);
  --page-sheen-base: linear-gradient(178deg, #ebe7df 0%, #e2ddd4 45%, #d5cfc4 100%);
  --notice-bg: #fff8e6;
  --notice-border: #f0d9a0;
  --radius: 8px;
  --font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background-color: #e0dcd4;
  background-image: var(--page-sheen-top), var(--page-sheen-base);
  background-attachment: fixed;
}

/* —— 游戏娱乐页：与首页同系浅色底 + 玻璃卡 —— */
body.page-fun {
  color: var(--text);
  background-color: #e0dcd4;
  background-image: var(--page-sheen-top), var(--page-sheen-base);
  background-attachment: fixed;
}
.fun-shell {
  width: min(980px, calc(100% - 32px));
  margin: 18px auto 28px;
}
.fun-head {
  padding: 18px 18px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(40, 35, 30, 0.07);
}
.fun-title {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.06em;
}
.fun-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.fun-card {
  margin-top: 14px;
  padding: 16px 18px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(40, 35, 30, 0.07);
}
.fun-card h2 {
  margin: 0 0 6px;
  font-size: 16px;
}
.fun-muted {
  color: var(--muted);
  font-size: 13px;
}
.fun-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.fun-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.fun-ol {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--text);
}
.fun-ol li {
  margin: 6px 0;
}

.fun-rt-box {
  margin-top: 10px;
  width: 100%;
  border-radius: 14px;
  padding: 18px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  outline: none;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.72);
}
.fun-rt-box:focus-visible {
  box-shadow: 0 0 0 3px rgba(228, 57, 60, 0.35);
}
.fun-rt-status {
  font-size: 18px;
  font-weight: 750;
  letter-spacing: 0.03em;
}
.fun-rt-metric {
  font-size: 13px;
  color: var(--muted);
}
.fun-rt-box[data-phase="waiting"] {
  background: rgba(255, 72, 88, 0.12);
}
.fun-rt-box[data-phase="ready"] {
  background: rgba(56, 205, 140, 0.16);
}

/* —— 游戏娱乐：趣味老虎机（纯视觉滚动） —— */
.fun-slot {
  margin-top: 10px;
}
.fun-slot__grid {
  position: relative;
  display: grid;
  /* 固定列宽：避免宽屏下 1fr 把列“挤多/挤少”，导致字形看起来错位 */
  grid-template-columns: repeat(var(--slot-cols, 9), var(--slot-cell, 46px));
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.55);
  overflow: hidden;
}
.fun-slot__grid::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  bottom: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(0, 0, 0, 0.1);
  pointer-events: none;
  z-index: 2;
}
.fun-slot__cell {
  height: var(--slot-cell, 46px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--slot-font, 26px);
  line-height: 1;
  user-select: none;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #f0ebe3);
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.fun-slot__cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(40, 35, 30, 0.12);
  border-color: rgba(200, 175, 130, 0.45);
}
.fun-slot__cell.is-selected {
  outline: 2px solid rgba(200, 160, 90, 0.75);
  outline-offset: 1px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 10px 28px rgba(40, 35, 30, 0.15);
  transform: translateY(-1px) scale(1.02);
}
.fun-slot__cell.is-empty {
  cursor: default;
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: none;
}
.fun-slot__cell.is-empty:hover {
  transform: none;
  box-shadow: none;
}
/* 连连看牌面：类 QQ 休闲场立体小块 */
.fun-slot__cell--llk:not(.is-empty) {
  background: linear-gradient(168deg, #fffefb 0%, #f0ebe3 40%, #e2d9c8 100%);
  border: 1px solid rgba(120, 100, 70, 0.22);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 3px 6px rgba(60, 45, 30, 0.12);
}
.fun-slot__cell img {
  width: 48px;
  height: 48px;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
}
.fun-slot__hud {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}
.fun-slot__msg {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.fun-slot__score {
  font-size: 12px;
  color: var(--muted);
}

/* —— 首页整页：浅色铂金底，内容区白/浅卡 —— */
body.page-home {
  /* 左侧分类栏：固定宽高，不随视口拉伸变化；中间表高度仍与侧栏对齐算法挂钩 */
  --home-sidebar-left-w: 110px;
  --home-cat-list-h: 560px;
  --home-sidebar-title-h: 42px;
  --home-marquee-stack: 50px; /* 跑马灯区：margin-bottom 10 + 视口 40 */
  --home-table-base: 520px;

  color: var(--text);
  background-color: #e0dcd4;
  background-image: var(--page-sheen-top), var(--page-sheen-base);
  background-attachment: fixed;
}

body.page-home .shop-shell {
  padding-top: 20px;
  padding-bottom: 8px;
  /* 右侧「娱乐兴趣」纵向跑马灯已关闭，仅保留左栏 + 主内容 */
  grid-template-columns: var(--home-sidebar-left-w) minmax(0, 1fr);
}

body.page-home .shop-shell > .sidebar--right-led {
  display: none !important;
}

body.page-home .shop-shell > .sidebar--left {
  width: var(--home-sidebar-left-w);
  min-width: var(--home-sidebar-left-w);
  max-width: var(--home-sidebar-left-w);
  flex-shrink: 0;
  box-sizing: border-box;
}

body.page-home .sidebar {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(40, 35, 30, 0.08);
}

body.page-home .shop-shell .sidebar-title {
  margin: 0;
  padding: 14px 12px;
  font-family: "ZCOOL XiaoWei", "Ma Shan Zheng", "STKaiti", "KaiTi", serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-align: center;
  color: var(--text);
  background: linear-gradient(180deg, #ffffff 0%, #f0ebe3 100%);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* 左侧「商品分类」：窄栏内四字单行适配（略小于右侧「娱乐兴趣」标题） */
body.page-home .shop-shell .sidebar--left .sidebar-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 10px 6px;
  line-height: 1.3;
  word-break: keep-all;
}

/* 首页左侧「商品分类」：与顶栏同系的厚重金属玻璃按钮（非大红铺底） */
body.page-home .sidebar--left .cat-list {
  padding: 10px 7px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(180, 160, 130, 0.45) rgba(0, 0, 0, 0.06);
}

body.page-home .sidebar--left .cat-list::-webkit-scrollbar {
  width: 5px;
}

body.page-home .sidebar--left .cat-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 99px;
}

body.page-home .sidebar--left .cat-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 220, 170, 0.45), rgba(200, 160, 110, 0.35));
  border-radius: 99px;
}

body.page-home .sidebar--left .cat-list li {
  list-style: none;
  margin: 0 0 7px;
}

body.page-home .sidebar--left .cat-list li:last-child {
  margin-bottom: 0;
}

body.page-home .sidebar--left .cat-list button,
body.page-home .sidebar--left .cat-list a.cat-link {
  position: relative;
  width: 100%;
  padding: 9px 6px;
  border-radius: 11px;
  border: 1px solid rgba(200, 190, 175, 0.65);
  border-top-color: rgba(255, 255, 255, 0.75);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  background: linear-gradient(165deg, #faf8f4 0%, #ebe4d8 45%, #dfd6c8 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 -1px 0 rgba(0, 0, 0, 0.06) inset,
    0 3px 10px rgba(40, 35, 30, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

body.page-home .sidebar--left .cat-list button:hover,
body.page-home .sidebar--left .cat-list a.cat-link:hover {
  color: var(--text);
  border-color: rgba(200, 175, 130, 0.55);
  border-top-color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(165deg, #ffffff 0%, #f2ebe0 45%, #e5dccf 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 -1px 0 rgba(0, 0, 0, 0.05) inset,
    0 5px 16px rgba(40, 35, 30, 0.1),
    0 0 0 1px rgba(200, 175, 130, 0.2);
  transform: translateY(-1px);
  text-decoration: none;
}

body.page-home .sidebar--left .cat-list button.active,
body.page-home .sidebar--left .cat-list a.cat-link.active {
  color: #3a2e18;
  font-weight: 700;
  border-color: rgba(200, 160, 90, 0.55);
  border-top-color: rgba(255, 240, 200, 0.7);
  background: linear-gradient(165deg, #f0e0c8 0%, #d9c4a0 45%, #c4a57a 100%);
  box-shadow:
    0 1px 0 rgba(255, 250, 235, 0.5) inset,
    0 -1px 0 rgba(0, 0, 0, 0.1) inset,
    0 0 0 1px rgba(180, 140, 80, 0.25),
    0 6px 18px rgba(100, 75, 40, 0.12);
  transform: translateY(-1px);
}

body.page-home .sidebar--left .cat-list button:focus-visible,
body.page-home .sidebar--left .cat-list a.cat-link:focus-visible {
  outline: 2px solid rgba(255, 215, 140, 0.85);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .sidebar--left .cat-list button,
  body.page-home .sidebar--left .cat-list a.cat-link {
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  }

  body.page-home .sidebar--left .cat-list button:hover,
  body.page-home .sidebar--left .cat-list a.cat-link:hover,
  body.page-home .sidebar--left .cat-list button.active,
  body.page-home .sidebar--left .cat-list a.cat-link.active {
    transform: none;
  }
}

body.page-home .cat-extra-link {
  display: block;
  margin: -4px 10px 10px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  word-break: break-all;
  color: #0f766e;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.22);
  text-decoration: none;
}

body.page-home .cat-extra-link:hover {
  color: #0d5c56;
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.3);
}

body.page-home .section-hint {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--border);
  color: var(--muted);
}

/* 主栏顶部跑马灯：与下方 LED 条同款（透明底 + 绿字发光） */
body.page-home .shop-marquee {
  margin: 0 0 10px;
  background: transparent;
  border: none;
  border-radius: 0;
}

body.page-home .shop-marquee__viewport {
  height: 48px;
  mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
}

body.page-home .shop-marquee__seg {
  flex-shrink: 0;
  padding: 0 2.75rem 0 0;
  white-space: nowrap;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: #047857;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  text-shadow: none;
  filter: none;
}

/* 中间栏：商品表区域 — 冷灰蓝（非紫），略深一档便于与下方区块区分 */
body.page-home .shop-main > .product-card:not(.chain-balance-panel) {
  background: linear-gradient(165deg, #c9d6e8 0%, #d6e2f0 42%, #dfe9f5 100%);
  border-color: rgba(95, 125, 165, 0.42);
  box-shadow: 0 12px 40px rgba(10, 25, 48, 0.22);
}

/* 中间栏：主网余额查询 — 暖杏米（非紫） */
body.page-home .chain-balance-panel.product-card {
  background: linear-gradient(165deg, #f2e8dc 0%, #f8f1e6 48%, #faf6ef 100%);
  border-color: rgba(200, 170, 130, 0.4);
  box-shadow: 0 12px 36px rgba(45, 30, 15, 0.14);
}

body.page-home .product-table th,
body.page-home .product-table td {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.page-home .shop-main > .product-card:not(.chain-balance-panel) .product-table thead th {
  background: linear-gradient(180deg, rgba(210, 222, 238, 0.98) 0%, rgba(220, 230, 244, 0.98) 100%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

body.page-home .block-title {
  color: var(--text);
}

body.page-home .page-block--muted {
  background: rgba(255, 255, 255, 0.7);
  border-top-color: var(--border);
  border-bottom-color: var(--border);
}

body.page-home .notice-ol {
  color: var(--muted);
}

body.page-home .order-query-form {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.page-home .order-query-form input {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--text);
}

body.page-home .article-links {
  color: var(--muted);
}

body.page-home .article-links a {
  color: var(--accent);
}

body.page-home .article-links a:hover {
  color: var(--accent-hover);
}

body.page-home .partner-card {
  background: rgba(252, 253, 255, 0.98);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}

body.page-home .partner-card:hover {
  border-color: rgba(228, 57, 60, 0.35);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
}

body.page-home .partners-preview-foot a {
  color: var(--accent);
}

body.page-home .partners-preview-foot a:hover {
  color: var(--accent-hover);
}

body.page-home .site-footer {
  margin-top: 24px;
  background: var(--surface);
  border-top-color: var(--border);
  color: var(--muted);
}

body.page-home .site-footer .links a {
  color: var(--muted);
}

body.page-home .site-footer .links a:hover {
  color: var(--accent);
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* —— 顶栏 —— */
.top-bar {
  background: var(--header-gradient);
  color: var(--header-text);
  font-size: 13px;
}

.top-bar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.top-bar a {
  color: #d6e2f6;
  text-decoration: none;
}

.top-bar a:hover {
  color: #fff;
  text-decoration: none;
}

.top-bar .sep {
  color: #7f96bb;
  user-select: none;
}

/* —— 主导航 —— */
.site-header {
  background: var(--header-gradient);
  border-bottom: 1px solid var(--header-border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.site-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.logo {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.logo--image {
  display: inline-flex;
  align-items: center;
}

.logo-image {
  display: block;
  width: clamp(132px, 26vw, 245px);
  height: auto;
  vertical-align: bottom;
  line-height: 35.1px;
  transform: translateY(-3px);
}

.logo:hover {
  color: var(--accent-hover);
  text-decoration: none;
}

.site-header .logo:not(.logo--image) {
  color: #eef4ff;
}

.site-header .logo:not(.logo--image):hover {
  color: #ffffff;
}

.header-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.header-nav a {
  color: #dce8ff;
  font-weight: 500;
  text-decoration: none;
}

.header-nav a:hover {
  color: #ffffff;
  text-decoration: none;
}

/* 主导航无可见文案时仍保留可点击区域 */
.header-nav-link--silent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 22px;
  box-sizing: border-box;
}

.site-header--merged .site-header-inner {
  align-items: center;
  gap: 12px 18px;
}

.header-nav-stack {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.site-header--merged .header-nav-stack {
  width: 100%;
  margin-left: 0;
  margin-top: 10px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: nowrap;
}

.site-header--merged .header-quick-links,
.site-header--merged .header-nav {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.header-quick-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
}

.header-quick-links a {
  color: #d6e2f6;
  text-decoration: none;
}

.header-quick-links a:hover {
  color: #ffffff;
  text-decoration: none;
}

.header-quick-links .sep {
  color: #7f96bb;
  user-select: none;
}

@media (max-width: 860px) {
  .site-header--merged .site-header-inner {
    align-items: center;
  }

  .header-nav-stack {
    width: 100%;
    align-items: flex-start;
    margin-left: 0;
    gap: 8px;
  }

  .header-quick-links,
  .header-nav {
    justify-content: flex-start;
  }
}

/* —— 公告 —— */
.notice-strip {
  background: var(--notice-bg);
  border-bottom: 1px solid var(--notice-border);
}

.notice-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 6px 16px;
  font-size: 13px;
  line-height: 1.3;
  color: #6b5a1a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.notice-message {
  min-width: 0;
}

.notice-message a {
  color: #6b5a1a;
  text-decoration: none;
}

.notice-message a:hover {
  color: #4a3d12;
  text-decoration: none;
}

.notice-message .sep {
  color: #a08535;
  user-select: none;
  margin: 0 6px;
}

.notice-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.notice-links a {
  color: #6b5a1a;
  text-decoration: none;
}

.notice-links a:hover {
  color: #4a3d12;
  text-decoration: none;
}

.notice-links .sep {
  color: #a08535;
  user-select: none;
}

.notice-inner strong {
  color: #4a3d12;
}

/* 全站六项快捷入口（与首页 Hero 下入口同款，子页在公告条下方） */
.site-quick-nav {
  background: var(--notice-bg);
  border-bottom: 1px solid var(--notice-border);
}

.site-quick-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 6px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-quick-nav-inner--split {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.site-quick-nav-extra {
  font-size: 13px;
  flex-shrink: 0;
}

.site-quick-nav-extra a {
  color: #6b5a1a;
  text-decoration: none;
}

.site-quick-nav-extra a:hover {
  color: #4a3d12;
  text-decoration: none;
}

.site-quick-nav-extra .sep {
  color: #a08535;
  user-select: none;
  margin: 0 6px;
}

.site-quick-nav .notice-links {
  justify-content: center;
}

.site-quick-nav-inner--split .notice-links {
  justify-content: flex-end;
}

@media (max-width: 860px) {
  .notice-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .notice-links {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .site-quick-nav .notice-links {
    justify-content: center;
    flex-wrap: wrap;
    white-space: normal;
  }

  .site-quick-nav-inner--split {
    flex-direction: column;
    align-items: center;
  }

  .site-quick-nav-inner--split .notice-links {
    justify-content: center;
  }
}

/* —— 主布局：侧栏 + 内容 —— */
.shop-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  grid-template-columns: 220px 1fr 132px;
  gap: 16px;
  align-items: start;
}

/* 右侧分类栏为左侧一半宽度时，略收内边距以留出文字空间 */
.shop-shell > .sidebar:not(.sidebar--left) .sidebar-title {
  padding-left: 8px;
  padding-right: 8px;
  font-size: 14px;
}

@media (max-width: 1100px) {
  .shop-shell {
    grid-template-columns: 1fr 132px;
  }

  .shop-shell > .sidebar--left {
    display: none;
  }

  /* 首页：始终保留左侧分类栏宽度与三栏结构，避免随窗口变窄被隐藏 */
  body.page-home .shop-shell {
    grid-template-columns: var(--home-sidebar-left-w) minmax(0, 1fr);
  }

  body.page-home .shop-shell > .sidebar--left {
    display: flex;
  }
}

@media (max-width: 860px) {
  .shop-shell {
    grid-template-columns: 1fr;
  }

  /* 窄屏仍优先显示分类，再显示商品表 */
  .shop-shell > .sidebar {
    order: -1;
  }

  .shop-shell > .sidebar--left {
    display: flex;
  }

  .shop-shell > .sidebar:not(.sidebar--left) {
    display: none;
  }

  /* 首页：左 | 中 两栏（右侧跑马灯已关），整区横向滚动而非改列宽 */
  body.page-home .shop-shell {
    grid-template-columns: var(--home-sidebar-left-w) minmax(320px, 1fr);
    gap: 12px;
    /* 左栏 + 主区 min + 2*gap */
    width: max(100%, 454px);
    min-width: 454px;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.page-home .shop-shell > .sidebar {
    order: 0;
  }

  body.page-home .shop-shell > .sidebar--left {
    display: flex;
  }

  body.page-home .shop-shell > .sidebar:not(.sidebar--left) {
    display: none !important;
  }

  body.page-home .shop-shell > .shop-main {
    min-width: 0;
  }
}

.sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sidebar-title {
  margin: 0;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  background: linear-gradient(180deg, #fafbfc, #f0f2f5);
  border-bottom: 1px solid var(--border);
}

.cat-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  flex: 0 0 auto;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.page-home .cat-list {
  height: var(--home-cat-list-h);
  max-height: var(--home-cat-list-h);
}

.cat-list button,
.cat-list a.cat-link {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 14px;
  border: none;
  background: none;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}

.cat-list button:hover,
.cat-list a.cat-link:hover {
  background: #fff5f5;
  color: var(--accent);
  text-decoration: none;
}

.cat-list button.active,
.cat-list a.cat-link.active {
  background: #fff0f0;
  color: var(--accent);
  font-weight: 600;
}

/* —— 首页右侧：纵向 LED 跑马灯（娱乐兴趣） —— */
.sidebar--right-led {
  min-height: 0;
}

.cat-led-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.cat-led-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  height: var(--home-cat-list-h, min(800px, calc(100vh - 280px)));
  max-height: var(--home-cat-list-h, min(800px, calc(100vh - 280px)));
  overflow: hidden;
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

body.page-home .cat-led-viewport {
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 45%, #ecfdf5 100%);
  border-top: 1px solid rgba(16, 185, 129, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.cat-led-track {
  display: flex;
  flex-direction: column;
  width: 100%;
  animation: cat-led-vertical-scroll var(--home-marquee-cat-led-duration, 52s) linear infinite;
  will-change: transform;
}

.cat-led-shell:hover .cat-led-track {
  animation-play-state: paused;
}

@keyframes cat-led-vertical-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -50%, 0);
  }
}

.cat-led-list {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  flex-shrink: 0;
}

.cat-led-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 11px 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
  color: #5cff9a;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  text-shadow:
    0 0 4px rgba(0, 255, 140, 0.95),
    0 0 12px rgba(0, 255, 120, 0.62),
    0 0 28px rgba(0, 200, 90, 0.38),
    0 1px 0 rgba(0, 40, 25, 0.88);
  filter: drop-shadow(0 0 1px rgba(0, 255, 160, 0.5));
  transition: color 0.15s ease, text-shadow 0.15s ease, background 0.15s ease;
}

.cat-led-btn:hover {
  color: #a8ffd0;
  text-shadow:
    0 0 6px rgba(190, 255, 215, 1),
    0 0 18px rgba(90, 255, 165, 0.78),
    0 0 38px rgba(50, 210, 130, 0.48),
    0 1px 0 rgba(0, 55, 32, 0.92);
  background: rgba(0, 255, 140, 0.07);
}

body.page-home .cat-led-btn.active {
  color: #eafff4;
  background: rgba(0, 255, 160, 0.16);
  text-shadow:
    0 0 8px rgba(210, 255, 230, 1),
    0 0 22px rgba(110, 255, 190, 0.88),
    0 0 44px rgba(50, 210, 140, 0.52),
    0 1px 0 rgba(0, 85, 55, 0.95);
}

.cat-led-empty {
  display: block;
  padding: 18px 8px;
  font-size: 12px;
  color: rgba(160, 210, 185, 0.5);
  text-align: center;
  letter-spacing: 0.04em;
}

/* 图片列表（纵向滚动） */
.cat-led-img-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 8px;
}

.cat-led-img-item {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 150, 0.16);
  background: rgba(0, 0, 0, 0.22);
  box-shadow: 0 0 18px rgba(0, 255, 140, 0.08);
  /* 固定高度，保证滚动节奏稳定；图片等比缩放适配容器 */
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-led-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateZ(0);
}

@media (prefers-reduced-motion: reduce) {
  .cat-led-track {
    animation: none;
  }

  .cat-led-viewport {
    overflow-y: auto;
    mask-image: none;
    -webkit-mask-image: none;
    -webkit-overflow-scrolling: touch;
  }

  .cat-led-shell:hover .cat-led-track {
    animation-play-state: running;
  }
}

.shop-main {
  min-width: 0;
}

/* --- 首页：主网 ETH / BTC / TRX 余额查询（商品表下方） --- */
.chain-balance-panel {
  margin-top: 4px;
}

.chain-balance-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 16px;
  padding: 16px 0 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  text-align: center;
}

.chain-balance-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text);
  text-align: center;
  width: 100%;
}

.chain-balance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 8px 16px 16px;
}

@media (max-width: 900px) {
  .chain-balance-grid {
    grid-template-columns: 1fr;
  }
}

.chain-balance-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 12px 14px;
  background: linear-gradient(180deg, #fafbfd 0%, #fff 100%);
}

.chain-balance-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.chain-balance-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
}

.chain-balance-btn {
  width: 100%;
  margin-bottom: 8px;
}

.chain-balance-out {
  min-height: 40px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
  word-break: break-word;
  white-space: pre-wrap;
}

body.page-home .chain-balance-head {
  border-bottom-color: var(--border);
}

body.page-home .chain-balance-title {
  color: rgba(28, 28, 38, 0.96);
}

body.page-home .chain-balance-panel .chain-balance-card {
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.96) 0%, #fff 100%);
  border-color: rgba(180, 150, 115, 0.22);
  box-shadow: 0 4px 14px rgba(60, 40, 20, 0.06);
}

.section-hint {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 13px;
}

/* 首页主栏顶部：跑马灯（无缝循环） */
.shop-marquee {
  margin: 0 0 10px;
  border-radius: var(--radius);
  border: none;
  background: var(--surface);
}

.shop-marquee__viewport {
  overflow: hidden;
  height: 40px;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}

.shop-marquee__track {
  display: flex;
  width: max-content;
  animation: shop-marquee-scroll var(--home-marquee-shop-duration, 42s) linear infinite;
}

.shop-marquee__seg {
  flex-shrink: 0;
  padding: 0 2.5rem 0 0;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

@keyframes shop-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-marquee__track {
    animation: none;
  }

  .shop-marquee__viewport {
    mask-image: none;
    -webkit-mask-image: none;
    height: auto;
    min-height: 48px;
    padding: 10px 12px;
  }

  .shop-marquee__seg {
    white-space: normal;
    padding: 0;
  }

  .shop-marquee__seg[aria-hidden="true"] {
    display: none;
  }
}

/* —— 商品表 —— */
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}

.product-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  height: 604px;
  max-height: 604px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

/*
 * 首页：商品表在基准高度上，增加「与左右栏底对齐差值」的一半，
 * 即把表格向下拉长到下方空位的一半（随视口与侧栏高度变化）。
 */
body.page-home .product-table-wrap {
  height: calc(
    var(--home-table-base) +
      max(
        0px,
        (
            var(--home-sidebar-title-h) + var(--home-cat-list-h) - var(--home-marquee-stack) -
              var(--home-table-base)
          ) * 0.5
      )
  );
  max-height: calc(
    var(--home-table-base) +
      max(
        0px,
        (
            var(--home-sidebar-title-h) + var(--home-cat-list-h) - var(--home-marquee-stack) -
              var(--home-table-base)
          ) * 0.5
      )
  );
}

.product-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.product-table thead th {
  background: var(--surface);
  box-shadow: 0 1px 0 var(--border);
}

.product-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.product-table th,
.product-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.product-table th {
  background: #fafbfc;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.product-table tr:last-child td {
  border-bottom: none;
}

.product-table .name {
  color: var(--text);
  font-weight: 500;
  max-width: 320px;
}

.product-table .spec {
  color: var(--muted);
  white-space: nowrap;
}

.product-table .price {
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}

.product-table .stock {
  color: var(--muted);
}

.btn-buy {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff !important;
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-buy:hover {
  background: var(--accent-hover);
  text-decoration: none;
}

/* —— 页脚 —— */
.site-footer {
  margin-top: 32px;
  padding: 24px 16px 40px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.site-footer .links {
  margin-bottom: 12px;
}

.site-footer .links a {
  margin: 0 8px;
  color: var(--muted);
}

.site-footer .links a:hover {
  color: var(--accent);
}

.disclaimer {
  max-width: 800px;
  margin: 16px auto 0;
  text-align: left;
  line-height: 1.6;
}

/* —— 用户中心 / 登录 —— */
.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, #eef2f7 0%, #f4f6f9 50%, #e8ecf2 100%);
}

/* 顶栏为 sticky 全站 hero 时：纵向排布，避免整页 flex 居中把表单顶到视口中间 */
body.auth-body.has-sticky-site-bar {
  display: block;
  padding: 0 24px 48px;
}

body.auth-body.has-sticky-site-bar .auth-card {
  margin: 24px auto 0;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.auth-card h1 {
  margin: 0 0 8px;
  font-size: 20px;
}

.auth-card .sub {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 13px;
}

.form-row {
  margin-bottom: 14px;
}

.form-row label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.form-row input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
}

.form-row input:focus {
  outline: none;
  border-color: #b8c0cc;
  box-shadow: 0 0 0 3px rgba(228, 57, 60, 0.12);
}

.btn-block {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.btn-block:hover {
  background: var(--accent-hover);
}

.auth-links {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
}

.auth-links a {
  color: var(--muted);
}

.hint-box {
  padding: 14px;
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  border-radius: var(--radius);
  font-size: 13px;
  color: #5c4f1a;
  margin-bottom: 16px;
}

.user-panel {
  max-width: 560px;
}

.user-panel dl {
  margin: 0;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 16px;
  font-size: 14px;
}

.user-panel dt {
  margin: 0;
  color: var(--muted);
}

.user-panel dd {
  margin: 0;
}

.order-empty {
  margin-top: 20px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  background: #fafbfc;
  border-radius: var(--radius);
  border: 1px dashed var(--border);
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-block {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px;
}

.page-block--muted {
  background: #eef1f6;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.block-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.tools-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted);
  font-size: 14px;
}

.tools-list li {
  margin-bottom: 8px;
}

.divider-loud {
  text-align: center;
  margin: 16px auto;
  padding: 0 16px;
  max-width: 1180px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.order-query-inline {
  max-width: 1180px;
  margin: 0 auto 8px;
  padding: 0 16px;
}

.order-query-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.order-query-form input {
  flex: 1 1 140px;
  min-width: 120px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
}

.notice-ol {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.notice-ol li {
  margin-bottom: 8px;
}

.article-links {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.article-links li {
  margin-bottom: 10px;
}

.faq-dl {
  margin: 0;
}

.faq-dl dt {
  margin: 16px 0 6px;
  font-weight: 600;
  color: var(--text);
}

.faq-dl dt:first-child {
  margin-top: 0;
}

.faq-dl dd {
  margin: 0 0 8px;
  color: var(--muted);
  padding-left: 0;
}

.article-body {
  padding: 24px;
}

.article-body h1 {
  margin: 0 0 16px;
  font-size: 22px;
}

.article-body p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.7;
}

/* —— 用户中心布局 —— */
.uc-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 16px;
}

.uc-gate {
  max-width: 440px;
  margin: 24px auto;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

#panel {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 720px) {
  #panel {
    grid-template-columns: 1fr;
  }
}

.uc-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 0;
  position: sticky;
  top: 12px;
}

.uc-side-title {
  padding: 8px 16px 12px;
  font-weight: 700;
  font-size: 15px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.uc-nav {
  display: flex;
  flex-direction: column;
}

.uc-nav-link {
  display: block;
  padding: 10px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}

.uc-nav-link:hover {
  background: #fff5f5;
  color: var(--accent);
  text-decoration: none;
}

.uc-nav-link.active {
  background: #fff0f0;
  color: var(--accent);
  font-weight: 600;
}

.uc-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.uc-section {
  padding: 20px 22px;
}

.uc-h2 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 600;
}

.uc-dl {
  margin: 0;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 16px;
  font-size: 14px;
}

.uc-dl dt {
  margin: 0;
  color: var(--muted);
}

.uc-dl dd {
  margin: 0;
}

.uc-intro {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}

.uc-phone-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.uc-phone-row input {
  flex: 1 1 180px;
  min-width: 160px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
}

.uc-msg {
  margin-top: 10px;
  font-size: 13px;
}

.uc-muted {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.uc-orders-table {
  font-size: 12px;
}

.uc-orders-table th,
.uc-orders-table td {
  padding: 10px;
}

.order-result {
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #f8fafc;
  font-size: 14px;
}

.order-result.ok {
  border-color: #b7e4c7;
  background: #f0fdf4;
}

.order-result.err {
  border-color: #f5c2c7;
  background: #fff5f5;
  color: #842029;
}

.order-result dt {
  margin: 10px 0 4px;
  font-size: 12px;
  color: var(--muted);
}

.order-result dd {
  margin: 0;
  font-weight: 500;
  color: var(--text);
}

.order-result dd:first-of-type {
  margin-top: 0;
}

.order-loading {
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
}

/* —— 教程中心（侧栏分类 + 列表 / 正文）—— */
.tut-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  text-align: center;
  padding: 36px 16px 32px;
}

.tut-hero-title {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
}

.tut-hero-tagline {
  margin: 0;
  font-size: 15px;
  color: rgba(255,255,255,.65);
  letter-spacing: 0.02em;
}

.tutorial-hub-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: start;
  min-width: 0;
}

@media (max-width: 800px) {
  .tutorial-hub-shell {
    grid-template-columns: 1fr;
  }
}

.tutorial-article-shell {
  align-items: stretch;
}

.tutorial-hub-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 0;
  position: sticky;
  top: 12px;
}

/* 全站吸顶顶栏：侧栏贴在顶栏下；长列表时侧栏内部滚动 */
body.has-sticky-site-bar .tutorial-hub-sidebar {
  top: var(--site-sticky-under-hero, 104px);
  align-self: start;
  max-height: calc(100vh - var(--site-sticky-under-hero, 104px) - 16px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.tutorial-hub-cat-title {
  margin: 0 0 10px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 700;
}

.tut-sidebar-footer {
  padding: 14px 16px 4px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  margin-top: 8px;
  text-align: center;
}

.tutorial-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tutorial-cat-list li a {
  display: block;
  padding: 9px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}

.tutorial-cat-list li a:hover {
  background: #fff5f5;
  color: var(--accent);
  text-decoration: none;
}

.tutorial-cat-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 9px 16px;
  border: none;
  background: none;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
}

.tutorial-cat-list button:hover {
  background: #fff5f5;
  color: var(--accent);
}

.tutorial-cat-list button.active {
  background: #fff0f0;
  color: var(--accent);
  font-weight: 600;
}

.tutorial-cat-list .cnt {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}

.tutorial-hub-main {
  min-width: 0;
}

.tutorial-article-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.tutorial-article-list li {
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background .15s;
}

.tutorial-article-list li:last-child {
  border-bottom: none;
}

.tutorial-article-list li:hover {
  background: #f8f9fb;
}

.tutorial-article-list li.hidden {
  display: none;
}

.tutorial-article-list .tut-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #eef1f6;
}

.tutorial-article-list .tut-info {
  flex: 1;
  min-width: 0;
}

.tutorial-article-list .tut-info a {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  text-decoration: none;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tutorial-article-list .tut-info a:hover {
  color: var(--accent);
}

.tutorial-article-list .tut-info .meta {
  font-size: 12px;
  color: var(--muted);
}

.tutorial-article-list .meta {
  font-size: 12px;
  color: var(--muted);
}

.tutorial-article-list .tutorial-list-hint {
  background: linear-gradient(180deg, #f6f3fb 0%, #faf8fd 100%);
  font-size: 14px;
  color: var(--text);
  flex-wrap: wrap;
}

.tutorial-article-list .tutorial-list-hint a {
  color: var(--accent);
  font-weight: 600;
}

.tutorial-article-list .tut-title--guest {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 3px;
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tutorial-read-locked {
  margin: 24px 0;
  padding: 24px 22px;
  text-align: center;
  border-radius: var(--radius);
  border: 1px dashed rgba(109, 77, 198, 0.35);
  background: rgba(109, 77, 198, 0.06);
}

.tutorial-read-locked__title {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 8px;
  color: var(--text);
}

.tutorial-read-locked__desc {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.tutorial-read-locked__btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
}

.tutorial-read-locked__btn:hover {
  filter: brightness(1.06);
}

.tutorial-article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px 36px;
  min-width: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
}

.tutorial-article img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  vertical-align: middle;
}

.tutorial-article figure {
  margin: 1.2rem 0;
}

.tutorial-article figcaption {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  text-align: center;
}

.tutorial-cover img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 10px;
}

.tutorial-article-header {
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--border);
}

.tutorial-article-h1 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 3.5vw, 1.85rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--text);
}

.tutorial-article-lead {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.65;
}

.tutorial-article-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
}

.tutorial-article-h2 {
  margin: 32px 0 14px;
  font-size: 1.25rem;
  font-weight: 700;
  padding-left: 12px;
  border-left: 4px solid var(--accent);
}

.tutorial-article-h2:first-of-type {
  margin-top: 0;
}

.tutorial-content {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  word-break: break-word;
}

.tutorial-content p {
  margin: 0 0 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tutorial-content li,
.tutorial-content dd,
.tutorial-content dt,
.tutorial-content address,
.tutorial-content td,
.tutorial-content th {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tutorial-content div,
.tutorial-content section {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tutorial-content a {
  overflow-wrap: anywhere;
  word-break: break-all;
}

.tutorial-content blockquote,
.tutorial-blockquote {
  margin: 18px 0;
  padding: 16px 18px;
  border-left: 4px solid var(--accent);
  background: #fef8f8;
  border-radius: 0 8px 8px 0;
  color: #555;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tutorial-content ul,
.tutorial-content ol,
.tutorial-ul {
  margin: 0 0 16px;
  padding-left: 1.4rem;
  line-height: 1.8;
}

.tutorial-content code {
  background: #f1f3f5;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tutorial-content pre {
  background: #1e1e2e;
  color: #cdd6f4;
  padding: 16px;
  border-radius: 8px;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-x: hidden;
  font-size: 13px;
  line-height: 1.6;
  margin: 16px 0;
}

.tutorial-content pre code {
  background: none;
  padding: 0;
  color: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tutorial-article-nav {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.tutorial-back-btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background .2s;
}

.tutorial-back-btn:hover {
  background: var(--accent-hover);
  color: #fff;
  text-decoration: none;
}

.tutorial-p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.75;
}

.tutorial-faq { margin: 0; }
.tutorial-faq dt { margin: 16px 0 6px; font-weight: 600; }
.tutorial-faq dd { margin: 0 0 8px; color: var(--muted); line-height: 1.65; }

/* —— 教程中心 · 尊贵铂金蓝（与极域 AI 白金尊享同系，body.page-tutorial-hub） —— */
body.page-tutorial-hub {
  background: linear-gradient(165deg, #e9e4f5 0%, #e2dbf0 38%, #ece8f8 72%, #f4f1fa 100%);
  min-height: 100vh;
}

body.page-tutorial-hub .tutorial-hub-shell {
  padding-top: 20px;
  padding-bottom: 36px;
}

body.page-tutorial-hub .tutorial-hub-sidebar,
body.page-tutorial-hub .tutorial-article-list,
body.page-tutorial-hub .tutorial-article {
  border: 1px solid rgba(255, 255, 255, 0.78);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(168deg, #f8f6fc 0%, #ebe6f6 45%, #ddd4ec 88%, #d4cae6 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 -1px 0 rgba(100, 80, 140, 0.04) inset,
    0 22px 50px -22px rgba(22, 16, 42, 0.2),
    0 8px 24px -12px rgba(95, 75, 130, 0.14);
  border-radius: 22px;
}

body.page-tutorial-hub .tutorial-hub-sidebar {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.page-tutorial-hub .tutorial-hub-cat-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: linear-gradient(118deg, #3d3348 0%, #6a5d78 42%, #362a45 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports not (background-clip: text) {
  body.page-tutorial-hub .tutorial-hub-cat-title {
    background: none;
    -webkit-text-fill-color: inherit;
    color: #3d3348;
  }
}

body.page-tutorial-hub .tutorial-cat-list li a:hover,
body.page-tutorial-hub .tutorial-cat-list button:hover {
  background: rgba(255, 255, 255, 0.55);
  color: #5a3d9e;
}

body.page-tutorial-hub .tutorial-cat-list button.active {
  background: linear-gradient(180deg, rgba(248, 244, 255, 0.98) 0%, rgba(228, 220, 246, 0.94) 100%);
  color: #4b3d68;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

body.page-tutorial-hub .tutorial-article-list li {
  border-bottom: 1px solid rgba(160, 140, 195, 0.22);
}

body.page-tutorial-hub .tutorial-article-list li:hover {
  background: rgba(255, 255, 255, 0.38);
}

body.page-tutorial-hub .tutorial-article-list .tut-info a:hover {
  color: #5a3d9e;
}

body.page-tutorial-hub .tutorial-article-list .tut-thumb {
  background: linear-gradient(145deg, #e8e2f4 0%, #ddd4ec 100%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 2px 8px rgba(45, 30, 75, 0.08);
}

body.page-tutorial-hub .tutorial-article-h1 {
  background: linear-gradient(118deg, #3d3348 0%, #5c4f6e 48%, #2a2235 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports not (background-clip: text) {
  body.page-tutorial-hub .tutorial-article-h1 {
    background: none;
    -webkit-text-fill-color: inherit;
    color: #2f263c;
  }
}

body.page-tutorial-hub .tutorial-article-lead {
  color: #5c4f6e;
}

body.page-tutorial-hub .tutorial-article-header {
  border-bottom-color: rgba(160, 140, 195, 0.28);
}

body.page-tutorial-hub .tutorial-article-h2 {
  border-left-color: rgba(107, 78, 168, 0.88);
  color: #3d3348;
}

body.page-tutorial-hub .tutorial-content blockquote,
body.page-tutorial-hub .tutorial-blockquote {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(244, 240, 252, 0.95) 100%);
  border-left-color: rgba(140, 120, 185, 0.55);
  color: #45405a;
  box-shadow: 0 4px 18px rgba(40, 30, 70, 0.06);
}

body.page-tutorial-hub .tutorial-content code {
  background: rgba(236, 230, 250, 0.9);
  border: 1px solid rgba(180, 165, 215, 0.38);
  color: #2f263c;
}

body.page-tutorial-hub .tutorial-back-btn {
  background: linear-gradient(165deg, #fcfbff 0%, #e8e2f2 25%, #d5cce6 55%, #c4b8da 82%, #b8aad0 100%);
  color: #1f1628;
  border: 1px solid rgba(255, 255, 255, 0.58);
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78) inset,
    0 8px 22px -8px rgba(45, 30, 75, 0.28);
}

body.page-tutorial-hub .tutorial-back-btn:hover {
  filter: brightness(1.05);
  color: #1f1628;
}

body.page-tutorial-hub .tutorial-article-nav {
  border-top-color: rgba(160, 140, 195, 0.22);
}

@media (max-width: 800px) {
  body.page-tutorial-hub .tutorial-hub-sidebar,
  body.page-tutorial-hub .tutorial-article-list,
  body.page-tutorial-hub .tutorial-article {
    border-radius: 18px;
  }
}

/* —— 合作商展示位 —— */
.partners-page-head {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px 8px;
}

.partners-page-title {
  margin: 0 0 8px;
  font-size: 1.65rem;
  font-weight: 700;
}

.partners-page-lead {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

.partner-toolbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.partner-filter-input {
  flex: 1;
  min-width: 200px;
  max-width: 360px;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}

.partner-filter-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(240, 196, 197, 0.35);
}

.partner-count {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.partners-load-error {
  max-width: 1100px;
  margin: 0 auto 16px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: #fff5f5;
  border: 1px solid #f0c4c5;
  color: #8b2942;
  font-size: 14px;
}

.partners-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 18px;
}

.partner-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.partner-card:hover {
  border-color: #f0c4c5;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

.partner-logo-wrap {
  height: 120px;
  border-radius: 8px;
  background: linear-gradient(145deg, #f4f6f9, #eef1f6);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  overflow: hidden;
}

.partner-logo-wrap img.partner-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.partner-logo-wrap.partner-logo-slideshow {
  position: relative;
}

.partner-logo-wrap.partner-logo-slideshow .partner-logo-slide {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}

.partner-logo-wrap.partner-logo-slideshow .partner-logo-slide.is-active {
  opacity: 1;
}

.partner-logo-placeholder {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  padding: 8px;
  line-height: 1.35;
}

.partner-logo-below {
  margin: -6px 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #1a1d24;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-logo-below-img {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.partner-name {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.partner-desc {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  flex: 1;
}

.partner-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.partner-tags span {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff5f5;
  color: var(--accent);
}

.partner-link {
  text-align: center;
  margin-top: auto;
}

.partner-card-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  width: 100%;
  align-items: stretch;
}

.partner-card-actions .partner-link {
  margin-top: 0;
}

a.partner-intro-link {
  display: block;
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  transition: background 0.15s, color 0.15s;
}

a.partner-intro-link:hover {
  background: #fff5f5;
  color: #c12a2d;
}

.partner-link-static.btn-buy {
  cursor: default;
}

.partner-link-static.btn-buy:hover {
  background: var(--accent);
}

/* —— 首页：LED 跑马灯（背景与页面完全融合，无独立底色；仅文字发光滚动） —— */
.led-marquee-strip {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px 16px;
  background: transparent;
}

.led-marquee-inner {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.led-marquee-inner::before {
  display: none;
}

.led-marquee-viewport {
  position: relative;
  z-index: 2;
  overflow: hidden;
  height: 48px;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
}

.led-marquee-track {
  display: flex;
  width: max-content;
  animation: led-marquee-scroll var(--home-marquee-led-strip-duration, 55s) linear infinite;
}

.led-marquee-seg {
  flex-shrink: 0;
  padding: 0 2.75rem 0 0;
  white-space: nowrap;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #5cff9a;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  text-shadow:
    0 0 4px rgba(0, 255, 140, 0.95),
    0 0 12px rgba(0, 255, 120, 0.65),
    0 0 28px rgba(0, 200, 90, 0.35),
    0 1px 0 rgba(0, 40, 25, 0.9);
  filter: drop-shadow(0 0 1px rgba(0, 255, 160, 0.5));
}

@keyframes led-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .led-marquee-track {
    animation: none;
    justify-content: center;
    flex-wrap: wrap;
    white-space: normal;
    max-width: 100%;
  }

  .led-marquee-viewport {
    mask-image: none;
    -webkit-mask-image: none;
    height: auto;
    min-height: 48px;
    padding: 12px 14px;
  }

  .led-marquee-seg {
    white-space: normal;
    padding: 0;
    text-align: center;
  }

  .led-marquee-seg[aria-hidden="true"] {
    display: none;
  }
}

body.page-home .led-marquee-strip {
  background: transparent;
}

body.page-home .led-marquee-inner {
  background: transparent;
  box-shadow: none;
}

.partners-preview {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 16px;
}

.partners-preview .partners-grid {
  padding: 0;
  margin-top: 12px;
}

.partners-preview .partner-name {
  font-size: 16px;
}

.partners-preview-foot {
  margin-top: 16px;
  text-align: center;
}

.partners-preview-foot a {
  font-weight: 600;
  font-size: 14px;
}

/* —— AI 对话 / 翻译 —— */
/* ═══════ AI 助手页 — 高级感重设计 ═══════ */

.ai-tools-body {
  min-height: 100vh;
  /* 略暗淡：玻璃偏雾灰、金边降饱和、内页偏亚麻灰 */
  --ai-glass: rgba(236, 232, 226, 0.82);
  --ai-glass-border: rgba(200, 192, 180, 0.45);
  --ai-shadow-sm: 0 1px 3px rgba(0,0,0,0.07);
  --ai-shadow-md: 0 4px 22px rgba(0,0,0,0.09);
  /* 金丝外缘：更少高光、整体偏古铜 */
  --ai-gold-frame: linear-gradient(
    148deg,
    #2a2312 0%,
    #4a3d18 12%,
    #6b5a24 26%,
    #8f7a3a 40%,
    #9a8a52 52%,
    #7a682e 66%,
    #524418 82%,
    #1c170a 100%
  );
  /* 内页：哑光亚麻 / 旧纸色 */
  --ai-shell-inner-lux: linear-gradient(
    165deg,
    rgba(228, 223, 214, 0.97) 0%,
    rgba(210, 204, 192, 0.95) 45%,
    rgba(218, 212, 200, 0.98) 100%
  );
  /* 主卡影：略深、金晕减弱 */
  --ai-shadow-lux-shell: 0 1px 0 rgba(235, 230, 222, 0.45) inset,
    0 24px 56px rgba(18, 14, 10, 0.2),
    0 10px 28px rgba(0, 0, 0, 0.12),
    0 3px 10px rgba(48, 40, 24, 0.05);
  --ai-ink: #252830;
  --ai-dim: #5f6673;
  --ai-accent: #6d4dc6;
  --ai-accent-soft: rgba(109,77,198,0.09);
  --ai-accent-ring: rgba(109,77,198,0.32);
  --ai-warm: #e8e4de;
  /* 翻译/控件通用暗金线（替代高亮金） */
  --ai-gold-mute: rgba(118, 102, 72, 0.28);
  --ai-gold-mute-soft: rgba(118, 102, 72, 0.16);
  --ai-gold-mute-strong: rgba(118, 102, 72, 0.4);
}

.ai-page-head {
  max-width: 900px;
  margin: 0 auto;
  padding: 12px 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ai-page-title {
  margin: 0 0 8px;
  font-size: 1.65rem;
  font-weight: 700;
  width: fit-content;
  max-width: 100%;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent);
  box-sizing: border-box;
  text-align: center;
}

.ai-page-head .ai-quota-bar {
  align-self: stretch;
  width: 100%;
}

.ai-page-lead {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--ai-dim);
  line-height: 1.65;
}

/* --- 配额进度条（内联在 tab 栏） --- */
.ai-quota-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.ai-quota-inline.hidden { display: none; }

.ai-quota-progress {
  width: 90px;
  height: 6px;
  border-radius: 3px;
  background: rgba(0,0,0,0.07);
  overflow: hidden;
}
.ai-quota-progress__fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ai-accent), #a78bfa);
  transition: width 0.5s ease;
  min-width: 0;
}
.ai-quota-progress__fill[data-low="1"] {
  background: linear-gradient(90deg, #ef4444, #f87171);
}
.ai-quota-progress__label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ai-dim);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.ai-pricing-link-wrap {
  margin: 0 0 10px;
}

/* AI 页：顶栏 + 跑马灯 + Tab 工具行 fixed；占位高度随 JS 变量更新 */
body.ai-tools-body.has-sticky-site-bar {
  padding-top: var(--site-sticky-under-hero, 56px);
}

body.ai-tools-body.has-sticky-site-bar .ai-marquee-layout-spacer {
  height: calc(var(--site-sticky-under-marquee, 132px) - var(--site-sticky-under-hero, 56px));
  width: 100%;
  flex-shrink: 0;
  pointer-events: none;
}

body.ai-tools-body.has-sticky-site-bar .ai-tabs-bar-layout-spacer {
  height: var(--site-ai-tabs-bar-h, 72px);
  width: 100%;
  pointer-events: none;
  flex-shrink: 0;
}

body.ai-tools-body.has-sticky-site-bar .dny-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 220;
}

/* 极域 AI：与商城首页主栏跑马灯同源（/api/home/marquee + 公告） */
/* --site-sticky-under-hero / --site-sticky-under-marquee 由 sticky-under-site-hero.js 写入 */
body.ai-tools-body.has-sticky-site-bar .ai-jiyu-quota-unified-note {
  position: fixed;
  top: var(--site-sticky-under-hero, 56px);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 2700px;
  padding: 8px 14px;
  box-sizing: border-box;
  /* 低于顶栏下拉，高于正文 */
  z-index: 118;
  box-shadow: 0 6px 20px rgba(18, 14, 10, 0.12);
}

.ai-jiyu-quota-unified-note {
  max-width: 2700px;
  width: 100%;
  margin: 0 auto 12px;
  padding: 8px 14px;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ai-dim);
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 12px;
}

/* 会员会话拉取失败（503 等）：提示自动重试，避免误判「未登录」 */
.dny-quota-transient-banner {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #92400e;
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.12);
}

.ai-jiyu-quota-unified-note .ai-jiyu-shop-marquee.shop-marquee {
  margin: 0;
  background: transparent;
  border-radius: 0;
}

.ai-jiyu-quota-unified-note .shop-marquee__seg {
  /* 更显眼：字号 +2px、提亮、加一点高光 */
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.25),
    0 0 10px rgba(168, 85, 247, 0.25);
}

.ai-jiyu-quota-unified-note .shop-marquee__viewport {
  /* 让滚动条带更亮、更“灯箱” */
  height: 44px;
  border-radius: 12px;
  padding: 0 10px;
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(236, 72, 153, 0.28), transparent 55%),
    radial-gradient(120% 120% at 90% 100%, rgba(168, 85, 247, 0.26), transparent 55%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.72), rgba(17, 24, 39, 0.56));
  border: 1px solid rgba(236, 72, 153, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 10px 28px rgba(17, 24, 39, 0.12);
}

.ai-jiyu-quota-unified-note strong {
  color: var(--ai-ink);
  font-weight: 700;
}

/* 2FA / 画像素描：未订阅时遮罩 */
/* 登录/会员遮罩的定位容器（与 vault、iframe 面板一致） */
.ai-gated-stack {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.ai-embed-panel-shell {
  position: relative;
  min-height: 0;
}

#panel-2fa .ai-embed-panel-shell {
  min-height: 480px;
}

#panel-vault .ai-vault-shell {
  min-height: 420px;
}

.jiyu-vault-loading-boot {
  z-index: 5;
}

.jiyu-vault-tool {
  position: relative;
  z-index: 1;
}

/* 档案库：页面居中确认层（替代原生 confirm） */
.jiyu-vault-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  box-sizing: border-box;
}

.jiyu-vault-modal.hidden {
  display: none !important;
}

.jiyu-vault-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 18, 28, 0.52);
  backdrop-filter: blur(4px);
}

.jiyu-vault-modal__box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  padding: 22px 22px 18px;
  border-radius: 14px;
  background: linear-gradient(165deg, #fdfcfa 0%, #f4f0e8 100%);
  border: 1px solid rgba(60, 50, 32, 0.14);
  box-shadow:
    0 24px 48px rgba(12, 10, 8, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.jiyu-vault-modal__title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ai-ink, #252830);
}

.jiyu-vault-modal__msg {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text, #334155);
  word-break: break-word;
}

.jiyu-vault-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.jiyu-vault-modal__btn {
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.jiyu-vault-modal__btn--ghost {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(60, 50, 32, 0.18);
  color: var(--ai-ink, #252830);
}

.jiyu-vault-modal__btn--ghost:hover {
  background: #fff;
}

.jiyu-vault-modal__btn--primary {
  background: linear-gradient(180deg, #c45a5a 0%, #a53e3e 100%);
  border-color: rgba(120, 40, 40, 0.35);
  color: #fff;
  box-shadow: 0 2px 8px rgba(140, 50, 50, 0.25);
}

.jiyu-vault-modal__btn--primary:hover {
  filter: brightness(1.05);
}

.jiyu-vault-card .jiyu-vault-lead {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

.jiyu-vault-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.jiyu-vault-toolbar-spacer {
  flex: 1;
  min-width: 8px;
}

.jiyu-vault-toolbar .btn-buy {
  width: auto;
}

.jiyu-vault-status {
  font-size: 13px;
  min-height: 1.3em;
  text-align: right;
}

.jiyu-vault-status[data-tone="error"] {
  color: #b91c1c;
}

/* 主从分栏：左列表 · 右编辑 */
.jiyu-vault-split {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: 0;
  min-height: 440px;
  border-radius: 12px;
  border: 1px solid rgba(60, 50, 32, 0.14);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.jiyu-vault-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid rgba(60, 50, 32, 0.12);
  background: linear-gradient(180deg, rgba(244, 240, 232, 0.95) 0%, rgba(236, 232, 224, 0.92) 100%);
}

.jiyu-vault-sidebar-head {
  padding: 12px;
  border-bottom: 1px solid rgba(60, 50, 32, 0.1);
  flex-shrink: 0;
}

.jiyu-vault-sidebar-head .btn-buy,
.jiyu-vault-add-btn {
  width: 100%;
  box-sizing: border-box;
}

.jiyu-vault-sidebar-head .btn-buy {
  border-radius: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  box-shadow:
    0 3px 14px rgba(160, 50, 50, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.18s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.jiyu-vault-sidebar-head .btn-buy:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 6px 20px rgba(160, 50, 50, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.jiyu-vault-sidebar-head .btn-buy:active {
  transform: translateY(0);
}

.jiyu-vault-nav {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px 14px;
  -webkit-overflow-scrolling: touch;
}

.jiyu-vault-nav-empty {
  margin: 16px 14px;
  font-size: 13px;
  text-align: center;
}

/* 单条档案：独立圆角卡片 + 金丝描边感，与极域 AI Tab 同系 */
.jiyu-vault-nav-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 0 0 8px;
  border-radius: 12px;
  border: 1px solid var(--ai-gold-mute-soft, rgba(118, 102, 72, 0.16));
  background: linear-gradient(
    168deg,
    rgba(255, 252, 248, 0.97) 0%,
    rgba(248, 244, 236, 0.9) 45%,
    rgba(238, 232, 220, 0.88) 100%
  );
  background-origin: border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(60, 50, 32, 0.05),
    0 2px 10px rgba(22, 18, 12, 0.07);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.18s ease;
}

.jiyu-vault-nav-row:hover {
  border-color: rgba(109, 77, 198, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 16px rgba(109, 77, 198, 0.1),
    0 2px 6px rgba(28, 22, 12, 0.06);
}

.jiyu-vault-nav-row:active {
  transform: translateY(0.5px);
}

.jiyu-vault-nav-row:has(.jiyu-vault-nav-item.active) {
  border-color: rgba(109, 77, 198, 0.38);
  background: linear-gradient(
    168deg,
    rgba(252, 250, 255, 0.98) 0%,
    rgba(236, 228, 255, 0.42) 40%,
    rgba(244, 238, 228, 0.95) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(109, 77, 198, 0.1),
    inset 3px 0 0 var(--ai-accent, #6d4dc6),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 4px 18px rgba(109, 77, 198, 0.14);
}

.jiyu-vault-nav-caret-slot {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding-left: 4px;
}

.jiyu-vault-nav-caret {
  margin: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ai-gold-mute-soft, rgba(118, 102, 72, 0.2));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(236, 232, 224, 0.65) 100%);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  color: var(--ai-accent, #6d4dc6);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.jiyu-vault-nav-caret:hover {
  border-color: rgba(109, 77, 198, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(237, 230, 255, 0.75) 100%);
  color: #4c1d95;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 2px 6px rgba(109, 77, 198, 0.15);
}

.jiyu-vault-nav-caret:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 2px var(--ai-accent-ring, rgba(109, 77, 198, 0.32));
}

.jiyu-vault-nav-caret-placeholder {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  opacity: 0.35;
  background: linear-gradient(135deg, rgba(118, 102, 72, 0.06) 0%, transparent 100%);
}

.jiyu-vault-nav-item {
  display: block;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 11px 12px 11px 2px;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ai-ink, #252830);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 0 11px 11px 0;
  transition:
    color 0.18s ease,
    font-weight 0.15s ease;
}

.jiyu-vault-nav-item:hover {
  color: #1a1528;
}

.jiyu-vault-nav-item.active {
  font-weight: 600;
  color: #3b2f5c;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.jiyu-vault-nav-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ai-accent-ring, rgba(109, 77, 198, 0.35));
  border-radius: 6px;
}

.jiyu-vault-detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: rgba(252, 250, 246, 0.98);
}

.jiyu-vault-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.jiyu-vault-empty p {
  margin: 0;
  max-width: 280px;
}

.jiyu-vault-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
  min-height: 0;
  box-sizing: border-box;
}

.jiyu-vault-detail-title {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 10px 12px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--border, #e2e8f0);
  background: #fff;
  color: var(--ai-ink, #252830);
}

.jiyu-vault-detail-body {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  min-height: 200px;
  resize: vertical;
  margin-bottom: 12px;
}

.jiyu-vault-parent-hint {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
}

.jiyu-vault-detail-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.jiyu-vault-detail-actions .btn-buy {
  width: auto;
  padding: 8px 16px;
  font-size: 14px;
}

@media (max-width: 720px) {
  .jiyu-vault-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .jiyu-vault-sidebar {
    border-right: none;
    border-bottom: 1px solid rgba(60, 50, 32, 0.12);
    max-height: 220px;
  }

  .jiyu-vault-detail {
    min-height: 320px;
  }
}

#ai-gate-vault-login .ai-embed-subscribe-gate__inner a.btn-buy {
  display: inline-block;
  text-decoration: none;
  box-sizing: border-box;
}

.ai-embed-subscribe-gate {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(248, 246, 242, 0.94);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  box-sizing: border-box;
}

.ai-embed-subscribe-gate__inner {
  max-width: 440px;
  text-align: center;
}

.ai-embed-subscribe-gate__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--ai-ink);
}

.ai-embed-subscribe-gate__text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

body:not(.dny-ai-quota-ready) .ai-embed-panel-shell .ai-2fa-iframe,
body:not(.dny-ai-quota-ready) .ai-embed-panel-shell .ai-pixel-sketch-iframe {
  visibility: hidden;
}

body.dny-ai-quota-ready .ai-embed-panel-shell .ai-2fa-iframe,
body.dny-ai-quota-ready .ai-embed-panel-shell .ai-pixel-sketch-iframe {
  visibility: visible;
}

/* --- Tab 栏（与翻译区同宽，原 900px 的 3 倍） --- */
.ai-tabs-bar {
  max-width: 2700px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
}

/*
 * 极域 AI：Tab + 试用徽章 + 汇率 + 贵金属整行 fixed（与贵金属框同一吸附层）。
 */
body.ai-tools-body.has-sticky-site-bar .ai-tabs-bar {
  position: fixed;
  top: var(--site-sticky-under-marquee, 132px);
  left: 0;
  right: 0;
  width: 100%;
  max-width: 2700px;
  margin: 0 auto;
  z-index: 125;
  padding: 8px 16px 12px;
  box-sizing: border-box;
  background: linear-gradient(
    180deg,
    rgba(245, 242, 236, 0.98) 0%,
    rgba(234, 229, 220, 0.97) 40%,
    rgba(226, 220, 210, 0.96) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 10px 32px rgba(22, 18, 14, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.55) inset;
  border-bottom: 1px solid rgba(200, 192, 180, 0.42);
}

/*
 * Tab 栏右侧：汇率 + 贵金属成组贴右，避免 flex 换行时块错位。
 */
body.ai-tools-body .ai-tabs-bar-tail {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

@media (max-width: 520px) {
  body.ai-tools-body .ai-tabs-bar-tail {
    max-width: calc(100vw - 24px);
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  body.ai-tools-body.has-sticky-site-bar .ai-tabs-bar {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.ai-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: linear-gradient(180deg, rgba(228, 223, 214, 0.96) 0%, rgba(212, 206, 196, 0.92) 100%);
  border-radius: 12px;
  padding: 4px;
  border: 1px solid var(--ai-gold-mute);
  box-shadow:
    inset 0 1px 0 rgba(240, 236, 228, 0.55),
    0 6px 20px rgba(22, 18, 14, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.05);
}

.ai-tab {
  padding: 9px 22px;
  font-size: 13.5px;
  font-weight: 600;
  border: none;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  color: var(--ai-dim);
  transition: all 0.2s ease;
  letter-spacing: 0.02em;
}
a.ai-tab {
  text-decoration: none;
  display: inline-block;
  box-sizing: border-box;
}
span.ai-tab[aria-current="page"] {
  cursor: default;
}
.ai-tab:hover {
  color: var(--ai-ink);
  background: rgba(255,255,255,0.6);
}

.ai-tab.active {
  color: var(--ai-accent);
  background: #fff;
  box-shadow: 0 1px 4px rgba(124,58,237,0.12), 0 0 0 1px rgba(124,58,237,0.08);
}

/* 极域 AI / 媒体 Tab — 金丝渐变描边（双背景 clip） */
.ai-tab.ai-tab--jiyu {
  border: 2px solid transparent;
  padding: 8px 12px;
  font-size: 12.75px;
  background-image:
    linear-gradient(rgba(232, 228, 220, 0.72), rgba(226, 220, 210, 0.72)),
    linear-gradient(
      148deg,
      #3d3310 0%,
      #5c4a18 14%,
      #7a6428 32%,
      #9a8a4a 48%,
      #a69a58 52%,
      #7d6a32 68%,
      #524418 86%,
      #2a2210 100%
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    inset 0 1px 0 rgba(240, 236, 228, 0.4),
    0 0 0 1px rgba(42, 36, 20, 0.08);
}
.ai-tab.ai-tab--jiyu:hover {
  color: var(--ai-ink);
  background-image:
    linear-gradient(rgba(238, 234, 226, 0.9), rgba(230, 224, 214, 0.9)),
    linear-gradient(
      148deg,
      #453a12 0%,
      #6b5a22 18%,
      #8f7a38 42%,
      #b0a060 55%,
      #8a7428 75%,
      #4a3c14 100%
    );
}
.ai-tab.ai-tab--jiyu.active,
.ai-tab.ai-tab--jiyu[aria-current="page"] {
  color: var(--ai-accent);
  background-image:
    linear-gradient(#ebe6dc, #e2dcd2),
    linear-gradient(
      148deg,
      #322a0c 0%,
      #5a4a18 16%,
      #8a7428 36%,
      #c4b878 50%,
      #9a8238 68%,
      #6b5818 88%,
      #1e1808 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(245, 240, 232, 0.5),
    0 2px 8px rgba(22, 18, 10, 0.14),
    0 0 0 1px rgba(60, 50, 28, 0.1);
}

/* —— AI 页：Tab 单行紧凑 (副提示已并入 title hover 提示,这里隐藏) —— */
button.ai-tab.ai-tab--jiyu {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  line-height: 1.1;
}
.ai-tab.ai-tab--jiyu {
  padding: 7px 14px;
  font-size: 13px;
}
.ai-tab__hint {
  /* 副行已折叠到 title 属性,鼠标悬停可见;不再占用纵向空间 */
  display: none;
}
/* —— 极域 AI 页 · 媒体提取子面板 —— */
.media-extract-lead {
  font-size: 1.2rem;
  line-height: 1.65;
  margin: 0 0 14px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 2px solid transparent;
  color: var(--ai-ink, #252830);
  font-weight: 500;
  letter-spacing: 0.02em;
  background-image:
    linear-gradient(168deg, #e8e2d6 0%, #ddd4c6 42%, #d2c8b8 100%) padding-box,
    var(--ai-gold-frame) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    inset 0 1px 0 rgba(232, 226, 216, 0.45),
    inset 0 -1px 0 rgba(60, 50, 32, 0.06),
    0 6px 18px rgba(28, 22, 12, 0.12),
    0 2px 5px rgba(0, 0, 0, 0.05);
  text-shadow:
    0 1px 0 rgba(245, 240, 232, 0.35);
  -webkit-font-smoothing: antialiased;
}
.media-extract-lead strong {
  font-weight: 700;
  color: #3a3428;
  text-shadow: 0 1px 0 rgba(232, 226, 216, 0.4);
}
@media (max-width: 520px) {
  .media-extract-lead {
    font-size: 1.1rem;
    padding: 14px 14px;
  }
}

.media-extract-out {
  margin-top: 16px;
}
.media-extract-out h2 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}
.media-extract-caption {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 14px;
  color: var(--text, #1e293b);
}
.media-extract-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 14px;
  background: rgba(232, 228, 220, 0.94);
}
.media-extract-card__meta {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--muted, #64748b);
}
.media-extract-img-wrap {
  text-align: center;
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.media-extract-thumb-shell {
  text-align: center;
  background: #fff;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: zoom-in;
}
.media-extract-thumb-shell.is-zoomed {
  cursor: zoom-out;
}
.media-extract-thumb-shell .media-extract-img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  vertical-align: middle;
  user-select: none;
  -webkit-user-drag: auto;
  transition: max-height 0.2s ease;
}
.media-extract-thumb-shell.is-zoomed .media-extract-img {
  max-height: min(92vh, 2000px);
}
.media-extract-img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
  user-select: none;
  -webkit-user-drag: auto;
}
.media-extract-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.media-extract-actions .btn-buy {
  width: auto;
  padding: 8px 16px;
  font-size: 14px;
}
.media-extract-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0;
  width: 100%;
}

/* --- 面板 --- */
.ai-panel {
  max-width: 900px;
  margin: 0 auto 28px;
  padding: 0 16px;
  box-sizing: border-box;
}

/* 翻译 / 对话 / 媒体提取：横向加宽，与 tab 栏对齐 */
#panel-translate.ai-panel,
#panel-chat.ai-panel,
#panel-media.ai-panel,
#panel-2fa.ai-panel,
#panel-vault.ai-panel,
#panel-pixel-sketch.ai-panel {
  max-width: 2700px;
  width: 100%;
}

/* override product-card base for AI shells */
.ai-translate-shell.product-card,
.ai-chat-shell.product-card,
.ai-media-shell.product-card,
.ai-twofa-shell.product-card {
  background: none;
  border: none;
  overflow: visible;
}

/* --- 对话：与翻译共用 ai-translate-shell（同高、同玻璃卡、标签样式） --- */
.ai-translate-shell.ai-chat-shell #lbl-ai-chat-input {
  margin-top: 14px;
}

/* 对话记录：高度由 JS 按翻译「原文」区测算后再×2（含窗口缩放）；无 JS 时最小 240px */
.ai-translate-shell.ai-chat-shell .ai-chat-log {
  flex: 0 0 auto;
  min-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 0;
  padding: 12px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: stretch;
  /* 微信会话底 */
  background: #ededed;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* 恋爱助手：关系阶段 / 你想要 / 你的语气：下拉选择器 */
#panel-love .ai-love-options .ai-love-select {
  flex: 1 1 200px;
  min-width: 200px;
  height: 40px !important;
  min-height: 40px !important;
  padding: 6px 36px 6px 14px !important;
  border-radius: 999px !important;
  background: #fbf7ed !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  font-size: 14px !important;
  color: var(--ai-ink, #2c2840) !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 16px center, right 12px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

#panel-love .ai-love-options .ai-love-select:focus {
  outline: none;
  border-color: rgba(109, 77, 198, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(109, 77, 198, 0.14);
}

#panel-love .ai-love-options .ai-love-select:hover {
  border-color: rgba(109, 77, 198, 0.4) !important;
}

#panel-love .ai-love-options .ai-love-select option {
  background: #fff;
  color: var(--ai-ink, #2c2840);
  padding: 6px 10px;
}

#panel-love .ai-love-options .ai-love-select optgroup {
  background: #f4ede0;
  color: rgba(70, 60, 100, 0.8);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.5px;
}

/* 解读历史 · 列表项中的「删除」按钮 */
#ai-love-history-list .ai-translate-history-item {
  position: relative;
  padding-right: 60px; /* 让出删除按钮位置 */
}

.ai-love-history-item-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  gap: 6px;
}

.ai-love-history-item-share {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(236, 72, 153, 0.35);
  background: rgba(255, 255, 255, 0.85);
  color: #be185d;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.15s, border-color 0.15s;
}

.ai-love-history-item-share:hover {
  background: rgba(252, 231, 243, 0.95);
  border-color: rgba(236, 72, 153, 0.55);
}

.ai-love-history-item-share:disabled {
  opacity: 0.6;
  cursor: progress;
}

.ai-love-history-item-del {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(190, 60, 60, 0.35);
  background: rgba(255, 255, 255, 0.85);
  color: #b03a3a;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.15s, border-color 0.15s;
}

.ai-love-history-item-del:hover {
  background: rgba(255, 230, 230, 0.95);
  border-color: rgba(190, 60, 60, 0.55);
}

/* 恋爱助手：解读结果框固定高度，内容超长时框内滚动
   放在上面通用规则之后，确保覆盖 display:flex / flex-basis */
#panel-love #ai-love-out.ai-chat-log {
  display: block !important;
  flex: none !important;
  height: 32vh !important;
  min-height: 220px !important;
  max-height: 32vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* === 极域AI助手 · GPT 风格对话页（panel-chat） === */
/* ============ 极域 AI 助手 · 奢华炭金质感版 ============ */
#panel-chat .ai-chat--gpt.ai-translate-shell.ai-chat-shell {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 26px 28px 22px !important;
  height: auto !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%) !important;
  border: 1px solid #e6e2d8 !important;
  border-radius: 22px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 24px 60px -18px rgba(58, 50, 37, 0.22),
    0 8px 22px -10px rgba(58, 50, 37, 0.10) !important;
  overflow: hidden;
}
/* 顶部炭→金细色带 */
#panel-chat .ai-chat--gpt.ai-translate-shell.ai-chat-shell::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0b0d12 0%, #2a2f3a 32%, #b08c5a 68%, #e6c896 100%);
}

#panel-chat .ai-chat--gpt #ai-chat-focus,
#panel-chat .ai-chat--gpt #lbl-ai-chat-focus,
#panel-chat .ai-chat--gpt #lbl-ai-chat-log,
#panel-chat .ai-chat--gpt #lbl-ai-chat-input {
  display: none !important;
}

/* —— Toolbar:左边大标题 + 副标题,右边状态徽章 + 操作按钮 —— */
#panel-chat .ai-chat--gpt .ai-chat-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 14px;
  border-bottom: 1px solid #e6e2d8;
  margin-bottom: 2px;
}
#panel-chat .ai-chat--gpt .ai-chat-toolbar__title {
  position: relative;
  padding-left: 56px;
  font-size: 20px;
  font-weight: 800;
  color: #0b0d12;
  letter-spacing: 0.5px;
  line-height: 1.1;
}
#panel-chat .ai-chat--gpt .ai-chat-toolbar__title::before {
  content: "DNY";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f2937 0%, #0b0d12 100%);
  color: #f5e4c3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 -2px 6px rgba(255, 255, 255, 0.06),
    0 6px 14px -6px rgba(15, 18, 28, 0.5);
}
#panel-chat .ai-chat--gpt .ai-chat-toolbar__title::after {
  content: "DNY · AI CONCIERGE";
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #8a6938;
  letter-spacing: 1px;
  text-transform: uppercase;
}
#panel-chat .ai-chat--gpt .ai-chat-toolbar__actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
/* Toolbar 操作按钮:幽灵白底 + 暖金 hover */
#panel-chat .ai-chat--gpt .ai-chat-focus-btn {
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: 1px solid #d8d3c6;
  background: linear-gradient(180deg, #ffffff 0%, #faf8f3 100%);
  color: #2a2f3a;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(58, 50, 37, 0.05);
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.06s;
}
#panel-chat .ai-chat--gpt .ai-chat-focus-btn:hover {
  background: linear-gradient(180deg, #fffdf7 0%, #faf4e7 100%);
  border-color: #b08c5a;
  color: #8a6938;
}
#panel-chat .ai-chat--gpt .ai-chat-focus-btn:active { transform: translateY(1px); }
#panel-chat .ai-chat--gpt .ai-chat-focus-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* —— 兼容性提示:温柔金色斜体小字 —— */
#panel-chat .ai-chat-recovery-hint {
  margin: 0 !important;
  padding: 8px 14px;
  background: rgba(176, 140, 90, 0.08);
  border-left: 3px solid #b08c5a;
  border-radius: 0 8px 8px 0;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  color: #6b4f1e !important;
  font-style: normal;
}

/* —— 对话记录:奶米→白渐变 + 右上暖金光晕 + 自定义滚动条 —— */
#panel-chat .ai-chat--gpt #ai-chat-log {
  background:
    radial-gradient(700px 240px at 100% 0%, rgba(176, 140, 90, 0.07), transparent 60%),
    linear-gradient(180deg, #fbfaf6 0%, #f4f0e6 100%) !important;
  border: 1px solid #e6e2d8 !important;
  border-radius: 16px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-height: 320px !important;
  max-height: 62vh !important;
  height: auto !important;
  flex: 0 1 auto !important;
  overflow-y: auto !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 10px 28px -16px rgba(58, 50, 37, 0.18);
  scroll-behavior: smooth;
}
#panel-chat .ai-chat--gpt #ai-chat-log::-webkit-scrollbar { width: 10px; }
#panel-chat .ai-chat--gpt #ai-chat-log::-webkit-scrollbar-thumb {
  background: #d8d3c6;
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
#panel-chat .ai-chat--gpt #ai-chat-log::-webkit-scrollbar-thumb:hover {
  background: #b8b1a0;
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* —— 单条消息 —— */
#panel-chat .ai-chat--gpt #ai-chat-log .ai-msg {
  align-self: stretch !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #e6e2d8 !important;
  border-radius: 0 !important;
  padding: 22px 26px 22px 78px !important;
  box-shadow: none !important;
  position: relative;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #1f1a14;
  white-space: pre-wrap;
  word-break: break-word;
  letter-spacing: 0.15px;
}
/* 头像 */
#panel-chat .ai-chat--gpt #ai-chat-log .ai-msg::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 22px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.4px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 4px 12px -4px rgba(15, 18, 28, 0.35);
}
#panel-chat .ai-chat--gpt #ai-chat-log .ai-msg--user::before {
  content: "你";
  background: linear-gradient(135deg, #2a2f3a 0%, #0b0d12 100%);
  color: #f5e4c3;
}
#panel-chat .ai-chat--gpt #ai-chat-log .ai-msg--assistant::before {
  content: "极";
  background: linear-gradient(135deg, #b08c5a 0%, #8a6938 100%);
  color: #fff8e8;
}
#panel-chat .ai-chat--gpt #ai-chat-log .ai-msg--user {
  background: rgba(255, 251, 240, 0.5) !important;
}
#panel-chat .ai-chat--gpt #ai-chat-log .ai-msg--assistant {
  background: #ffffff !important;
}
#panel-chat .ai-chat--gpt #ai-chat-log .ai-msg:last-child {
  border-bottom: 0 !important;
}
#panel-chat .ai-chat--gpt #ai-chat-log .ai-msg--parts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  white-space: normal;
}
#panel-chat .ai-chat--gpt #ai-chat-log .ai-msg__img {
  max-width: min(100%, 360px);
  max-height: 260px;
  border-radius: 10px;
  box-shadow: 0 6px 18px -8px rgba(15, 18, 28, 0.35);
}

/* —— 输入器:浮起卡中卡 —— */
#panel-chat .ai-chat--gpt .ai-chat-composer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, #ffffff 0%, #faf8f3 100%);
  border: 1px solid #d8d3c6;
  border-radius: 18px;
  box-shadow: 0 10px 28px -16px rgba(58, 50, 37, 0.20);
}
#panel-chat .ai-chat--gpt .ai-chat-composer__input {
  border-radius: 14px !important;
  padding: 14px 16px !important;
  background: #ffffff !important;
  border: 1px solid #e6e2d8 !important;
  box-shadow: none !important;
  min-height: 130px !important;
  max-height: 38vh !important;
  resize: vertical !important;
  line-height: 1.65;
  font-size: 15px;
  color: #1f1a14;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#panel-chat .ai-chat--gpt .ai-chat-composer__input::placeholder { color: #9aa0a8; }
#panel-chat .ai-chat--gpt .ai-chat-composer__input:focus {
  outline: none;
  border-color: #b08c5a !important;
  box-shadow: 0 0 0 3px rgba(176, 140, 90, 0.18) !important;
}

#panel-chat .ai-chat--gpt .ai-chat-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
#panel-chat .ai-chat--gpt .ai-chat-hint {
  flex: 1;
  font-size: 11.5px;
  letter-spacing: 0.3px;
  color: #8a6938;
  text-align: left;
}
#panel-chat .ai-chat--gpt .ai-chat-hint::before {
  content: "✦ ";
  color: #b08c5a;
  font-weight: 700;
}

/* —— 输入区按钮统一:幽灵白 / 主按钮黑金 —— */
#panel-chat .ai-chat--gpt .ai-chat-actions .btn-buy {
  border-radius: 999px !important;
  height: 38px;
  min-width: 80px;
  padding: 0 18px !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  border: 1px solid #d8d3c6 !important;
  background: #ffffff !important;
  color: #2a2f3a !important;
  box-shadow: 0 2px 6px rgba(58, 50, 37, 0.06) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.06s, filter 0.12s;
}
#panel-chat .ai-chat--gpt .ai-chat-actions .btn-buy:hover {
  background: linear-gradient(180deg, #fffdf7 0%, #faf4e7 100%) !important;
  border-color: #b08c5a !important;
  color: #8a6938 !important;
}
#panel-chat .ai-chat--gpt .ai-chat-actions .btn-buy:active { transform: translateY(1px); }
/* 发送主按钮 */
#panel-chat .ai-chat--gpt .ai-chat-actions #ai-chat-send {
  background: linear-gradient(160deg, #2a2f3a 0%, #0b0d12 100%) !important;
  color: #f5e4c3 !important;
  border-color: #0b0d12 !important;
  box-shadow:
    0 8px 18px -10px rgba(15, 18, 28, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
#panel-chat .ai-chat--gpt .ai-chat-actions #ai-chat-send:hover {
  background: linear-gradient(160deg, #353b48 0%, #14181f 100%) !important;
  color: #f5e4c3 !important;
  border-color: #0b0d12 !important;
  filter: brightness(1.05);
}
#panel-chat .ai-chat--gpt .ai-chat-actions #ai-chat-clear {
  margin-left: auto;
}

@media (max-width: 768px) {
  #panel-chat .ai-chat--gpt.ai-translate-shell.ai-chat-shell {
    padding: 18px 16px 14px !important;
    border-radius: 16px !important;
  }
  #panel-chat .ai-chat--gpt .ai-chat-toolbar__title {
    font-size: 17px;
    padding-left: 48px;
  }
  #panel-chat .ai-chat--gpt .ai-chat-toolbar__title::before {
    width: 38px;
    height: 38px;
    font-size: 12px;
  }
  #panel-chat .ai-chat--gpt #ai-chat-log .ai-msg {
    padding: 16px 16px 16px 64px !important;
    font-size: 14.5px !important;
  }
  #panel-chat .ai-chat--gpt #ai-chat-log .ai-msg::before {
    width: 32px;
    height: 32px;
    left: 16px;
    top: 16px;
    font-size: 12px;
  }
  #panel-chat .ai-chat--gpt .ai-chat-hint {
    display: none;
  }
}

#panel-chat .ai-chat-log {
  min-height: 240px;
  background: #ededed;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* 翻译 Tab：原文框同形；与译文区纵向分配 flex 3:2（原文更高） */
.ai-translate-shell.ai-chat-shell .ai-translate-source-editable {
  flex: 3 1 0;
  min-height: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 11px 14px;
  box-sizing: border-box;
  box-shadow: none;
}

/* 翻译 Tab：译文区同助手气泡形；纵向 flex 2（相对原文略矮） */
.ai-translate-shell.ai-chat-shell .ai-translate-out {
  flex: 2 1 0;
  min-height: 0;
  background: #f5f2eb;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 11px 14px;
  line-height: 1.7;
  color: var(--ai-ink);
}

.ai-translate-shell.ai-chat-shell .ai-output-header {
  margin-top: 0;
  margin-bottom: 6px;
}

/* --- 极域翻译 · 工作室：金丝画框 + 厚重光影 --- */
#panel-translate .ai-translate-shell--studio.ai-chat-shell {
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 2px solid transparent;
  border-radius: 18px;
  background-image: var(--ai-shell-inner-lux), var(--ai-gold-frame);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  backdrop-filter: blur(18px) saturate(0.92);
  -webkit-backdrop-filter: blur(18px) saturate(0.92);
  box-shadow: var(--ai-shadow-lux-shell);
}

.ai-translate-studio-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(218, 212, 202, 0.95) 0%, rgba(198, 190, 178, 0.9) 100%);
  border-bottom: 1px solid var(--ai-gold-mute-soft);
  flex: 0 0 auto;
  box-shadow: inset 0 1px 0 rgba(232, 228, 220, 0.45);
}

.ai-translate-studio-bar__left {
  display: flex;
  align-items: center;
  min-width: 2rem;
}

/* 顶栏左侧：翻译历史（低调古铜描边，与亚麻工具栏一致） */
.ai-translate-history-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  border: 1px solid var(--ai-gold-mute);
  background: linear-gradient(165deg, rgba(220, 214, 204, 0.95) 0%, rgba(206, 198, 186, 0.98) 100%);
  color: #6a6258;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(236, 232, 224, 0.55),
    0 1px 3px rgba(22, 18, 12, 0.08);
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.ai-translate-history-btn:hover {
  border-color: var(--ai-gold-mute-strong);
  color: #4a433c;
  box-shadow:
    inset 0 1px 0 rgba(238, 234, 226, 0.45),
    0 2px 8px rgba(22, 18, 12, 0.1);
}
.ai-translate-history-btn:focus-visible {
  outline: 2px solid var(--ai-accent-ring);
  outline-offset: 2px;
}
.ai-translate-history-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  opacity: 0.88;
}

/* —— 翻译历史侧栏（仅本机 localStorage，与全页暗淡亚麻系一致） —— */
.ai-translate-history-layer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
}
.ai-translate-history-layer:not(.hidden) {
  pointer-events: auto;
}
.ai-translate-history-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(18, 14, 10, 0.42);
  backdrop-filter: blur(6px) saturate(0.88);
  -webkit-backdrop-filter: blur(6px) saturate(0.88);
}
.ai-translate-history-sheet {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: min(420px, 100vw);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: linear-gradient(175deg, #e4dfd4 0%, #d8d2c6 38%, #ddd6ca 100%);
  border-right: 1px solid var(--ai-gold-mute);
  box-shadow:
    12px 0 40px rgba(18, 14, 10, 0.18),
    inset -1px 0 0 rgba(255, 255, 255, 0.06);
  transform: translateX(-102%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-translate-history-layer:not(.hidden) .ai-translate-history-sheet {
  transform: translateX(0);
}
.ai-translate-history-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px 10px;
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--ai-gold-mute-soft);
  background: linear-gradient(180deg, rgba(212, 206, 196, 0.95) 0%, rgba(200, 192, 180, 0.88) 100%);
  box-shadow: inset 0 1px 0 rgba(232, 228, 220, 0.4);
}
.ai-translate-history-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ai-translate-history-star {
  font-size: 0.95rem;
  line-height: 1;
  color: #8a7a58;
  opacity: 0.72;
  text-shadow: none;
}
.ai-translate-history-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ai-ink);
}
.ai-translate-history-clear {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(140, 72, 72, 0.28);
  background: rgba(232, 216, 214, 0.65);
  color: #7a3d3d;
  cursor: pointer;
  font-family: inherit;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.ai-translate-history-clear:hover {
  border-color: rgba(120, 56, 56, 0.4);
  background: rgba(224, 200, 198, 0.85);
}
.ai-translate-history-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--ai-gold-mute);
  border-radius: 10px;
  background: rgba(228, 222, 212, 0.85);
  color: var(--ai-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.ai-translate-history-close:hover {
  border-color: var(--ai-gold-mute-strong);
  color: var(--ai-ink);
}
.ai-translate-history-search-wrap {
  flex: 0 0 auto;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--ai-gold-mute-soft);
}
.ai-translate-history-search {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 12px;
  border: 1px solid var(--ai-gold-mute);
  background: linear-gradient(180deg, #ddd8ce 0%, #d4cec4 100%);
  color: var(--ai-ink);
  font-family: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ai-translate-history-search::placeholder {
  color: #8a9099;
}
.ai-translate-history-search:focus {
  outline: none;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.05),
    0 0 0 3px var(--ai-accent-ring);
}
.ai-translate-history-list {
  flex: 1 1 auto;
  margin: 0;
  padding: 8px 10px 16px;
  overflow-y: auto;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}
.ai-translate-history-item {
  padding: 12px 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  border: 1px solid var(--ai-gold-mute-soft);
  background: rgba(236, 232, 224, 0.65);
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.ai-translate-history-item:hover,
.ai-translate-history-item:focus {
  outline: none;
  border-color: var(--ai-gold-mute);
  background: rgba(242, 238, 230, 0.92);
  box-shadow: 0 2px 10px rgba(22, 18, 12, 0.08);
}
.ai-translate-history-item:focus-visible {
  outline: 2px solid var(--ai-accent-ring);
  outline-offset: 2px;
}
.ai-translate-history-item__meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ai-dim);
  margin-bottom: 8px;
}
.ai-translate-history-item__src {
  font-size: 13px;
  font-weight: 600;
  color: var(--ai-ink);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.ai-translate-history-item__out {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: #5c6673;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.ai-translate-history-empty {
  flex: 1 1 auto;
  margin: 0;
  padding: 28px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--ai-dim);
}

.ai-translate-studio-bar__center {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 220px;
}

.ai-translate-studio-bar__langs {
  align-items: flex-start;
}

/* --- 可搜索语言选择器（与助手区输入框同系：白底、细边框、紫焦点） --- */
.ai-lang-picker {
  position: relative;
  min-width: min(168px, 42vw);
  max-width: 220px;
  flex: 0 1 auto;
}

.ai-lang-picker__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ai-ink);
  background: linear-gradient(180deg, #e4e0d8 0%, #d8d2c6 100%);
  border: 1px solid var(--ai-gold-mute);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: inset 0 1px 0 rgba(236, 232, 224, 0.5);
}
.ai-lang-picker__trigger:hover {
  border-color: var(--ai-gold-mute-strong);
  box-shadow:
    inset 0 1px 0 rgba(238, 234, 226, 0.45),
    0 2px 8px rgba(22, 18, 12, 0.08);
}

.ai-lang-picker__trigger-flag {
  flex: 0 0 auto;
  font-size: 1.1rem;
  line-height: 1;
}

.ai-lang-picker__trigger-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-lang-picker__trigger-caret {
  flex: 0 0 auto;
  font-size: 10px;
  opacity: 0.5;
  color: var(--ai-dim);
}

.ai-lang-picker__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  bottom: auto;
  z-index: 40;
  padding: 0;
  background: linear-gradient(180deg, #e0dcd4 0%, #d4cec4 100%);
  border: 1px solid var(--ai-gold-mute-strong);
  border-radius: 12px;
  box-shadow:
    0 12px 32px rgba(18, 14, 10, 0.14),
    0 4px 12px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(228, 224, 216, 0.5);
  overflow: hidden;
}

/* 翻译页：向下展开 + 叠在工具条上（!important 防止边缘缓存仍带旧「向上」规则） */
#panel-translate .ai-translate-studio-bar .ai-lang-picker__dropdown {
  top: calc(100% + 4px) !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 500 !important;
}

.ai-lang-picker__search-wrap {
  position: relative;
  padding: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.15s;
}

.ai-lang-picker--open .ai-lang-picker__search-wrap {
  box-shadow: 0 0 0 3px var(--ai-accent-ring);
}

.ai-lang-picker__search {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 32px 8px 10px;
  font-size: 14px;
  color: var(--ai-ink);
  background: #d8d4cc;
  border: 1px solid rgba(72, 66, 56, 0.18);
  border-radius: 8px;
  outline: none;
}
.ai-lang-picker__search::placeholder {
  color: #9ca3af;
}
.ai-lang-picker__search:focus {
  border-color: var(--ai-accent);
  box-shadow: 0 0 0 3px var(--ai-accent-ring);
}

.ai-lang-picker__search-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: 0.45;
  pointer-events: none;
}

.ai-lang-picker__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: min(52vh, 320px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #9ca3a8 #d4d0c8;
}
.ai-lang-picker__list::-webkit-scrollbar {
  width: 6px;
}
.ai-lang-picker__list::-webkit-scrollbar-thumb {
  background: #9ca3a8;
  border-radius: 3px;
}

.ai-lang-picker__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--ai-ink);
  cursor: pointer;
  transition: background 0.1s;
}
.ai-lang-picker__item:hover {
  background: var(--ai-accent-soft);
}
.ai-lang-picker__item--current {
  background: rgba(109, 77, 198, 0.12);
}
.ai-lang-picker__item--current:hover {
  background: rgba(109, 77, 198, 0.18);
}

.ai-lang-picker__item-flag {
  flex: 0 0 1.5rem;
  text-align: center;
  font-size: 1.05rem;
}

.ai-lang-picker__item-label {
  flex: 1;
}

.ai-translate-swap {
  width: 40px;
  height: 36px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: #5c5348;
  background: linear-gradient(180deg, #d8d4cc 0%, #ccc6ba 100%);
  border: 1px solid var(--ai-gold-mute);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.15s, color 0.15s;
  box-shadow: inset 0 1px 0 rgba(228, 224, 216, 0.45);
}
.ai-translate-swap:hover {
  background: linear-gradient(180deg, #e0dcd4 0%, #d4cec4 100%);
  border-color: var(--ai-gold-mute-strong);
  color: var(--ai-accent);
  box-shadow:
    inset 0 1px 0 rgba(232, 228, 220, 0.5),
    0 2px 10px rgba(18, 14, 10, 0.1);
}

.ai-translate-studio-bar__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.ai-translate-studio-primary {
  padding: 8px 22px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f5f2fc;
  background: linear-gradient(135deg, #5a3d9e 0%, #7b62b8 55%, #8f7aa8 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 3px 14px rgba(60, 48, 90, 0.28),
    0 8px 22px rgba(18, 14, 24, 0.14);
  transition: transform 0.12s, filter 0.12s;
}
.ai-translate-studio-primary:hover {
  filter: brightness(1.05);
}
.ai-translate-studio-primary:active {
  transform: scale(0.98);
}
.ai-translate-studio-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.ai-translate-studio-secondary {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ai-accent);
  background: linear-gradient(180deg, #dcd8d0 0%, #d0ccc2 100%);
  border: 1px solid var(--ai-gold-mute);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  box-shadow: inset 0 1px 0 rgba(232, 228, 220, 0.45);
}
.ai-translate-studio-secondary:hover {
  background: linear-gradient(180deg, #e4e0d8 0%, #d8d4cc 100%);
  border-color: var(--ai-gold-mute-strong);
  box-shadow:
    inset 0 1px 0 rgba(236, 232, 224, 0.5),
    0 2px 8px rgba(18, 14, 10, 0.08);
}

/* 清空：哑光绿（略暗于默认） */
#panel-translate .ai-translate-studio-panehead .ai-translate-clear-btn.ai-translate-studio-secondary {
  color: #e8f5ec !important;
  background: #3d7a4f !important;
  border: 1px solid #356b45 !important;
}
#panel-translate .ai-translate-studio-panehead .ai-translate-clear-btn.ai-translate-studio-secondary:hover {
  background: #356b45 !important;
  border-color: #2d5c3a !important;
}

/* 粘贴：琥珀底，与「清空」绿、「复制」浅底区分 */
#panel-translate .ai-translate-studio-panehead .ai-translate-paste-btn.ai-translate-studio-secondary {
  color: #4a3410 !important;
  background: linear-gradient(180deg, #f5e6c8 0%, #e8d4a8 100%) !important;
  border: 1px solid #c9a86a !important;
}
#panel-translate .ai-translate-studio-panehead .ai-translate-paste-btn.ai-translate-studio-secondary:hover {
  background: linear-gradient(180deg, #fcedd8 0%, #ecd9b8 100%) !important;
  border-color: #b89555 !important;
}

#panel-translate .ai-translate-studio-panes {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

/* 全语言统一：上下两行双栏（上行 源→目标，下行 目标→源；图中样式） */
#panel-translate .ai-translate-mode-dual {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
  padding: 0 2px 4px;
}
#panel-translate .ai-translate-mode-dual[hidden] {
  display: none !important;
}
#panel-translate .ai-translate-dual-group {
  flex: 1 1 0;
  min-height: 200px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(45, 35, 75, 0.12);
}
#panel-translate .ai-translate-dual-langtitle {
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #c41e3a;
  text-transform: none;
}

#panel-translate .ai-translate-studio-panehead {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: 10px;
  row-gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(210, 204, 194, 0.92) 0%, rgba(196, 188, 176, 0.88) 100%);
  border-bottom: 1px solid var(--ai-gold-mute-soft);
  box-shadow: inset 0 1px 0 rgba(220, 216, 208, 0.4);
}

/* 紧凑头部:按钮已下沉到翻译框右下角,这里只剩双语标签;高度从 56px 砍到 ~32px */
#panel-translate .ai-translate-studio-panehead--slim {
  padding: 6px 14px;
  row-gap: 0;
}
#panel-translate .ai-translate-studio-panehead--slim > .ai-translate-studio-pane__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ai-ink-soft, #3a3225);
  padding: 0;
}
#panel-translate .ai-translate-studio-panehead--slim > .ai-translate-studio-pane__title:nth-child(2) {
  text-align: right;
}

/* ============ pane 内浮动工具栏(右下角) ============ */
.ai-translate-studio-pane--source,
.ai-translate-studio-pane--out {
  position: relative;
}
.ai-translate-pane-toolbar {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  box-shadow:
    0 4px 14px -6px rgba(15, 26, 45, 0.18),
    0 1px 3px rgba(15, 26, 45, 0.05);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  opacity: 0.85;
  transition: opacity 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.ai-translate-studio-pane:hover .ai-translate-pane-toolbar,
.ai-translate-pane-toolbar:focus-within { opacity: 1; }

.ai-pane-tool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  height: 30px;
  min-width: 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #3a3225;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, transform 0.06s ease;
}
.ai-pane-tool:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1f1a14;
}
.ai-pane-tool:active { transform: translateY(1px); }
.ai-pane-tool .ai-pane-tool__label { font-weight: 600; }
.ai-pane-tool > span[aria-hidden="true"] { font-size: 13px; line-height: 1; }

/* 主按钮:翻译,黑金质感 */
.ai-pane-tool--primary {
  margin-left: 4px;
  padding: 0 14px;
  height: 32px;
  background: linear-gradient(160deg, #2a2f3a 0%, #0b0d12 100%);
  color: #f5e4c3;
  border-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 4px 10px -4px rgba(15, 26, 45, 0.45);
  font-weight: 700;
  letter-spacing: 0.4px;
}
.ai-pane-tool--primary:hover {
  filter: brightness(1.08);
  background: linear-gradient(160deg, #2a2f3a 0%, #0b0d12 100%);
  color: #f5e4c3;
}

/* 译文工具栏右下角:更克制 */
.ai-translate-pane-toolbar--out .ai-pane-tool { color: #4b3d68; }
.ai-translate-pane-toolbar--out .ai-pane-tool:hover { background: rgba(75, 61, 104, 0.10); }

/* 窄屏:工具栏内文字隐藏,只剩 emoji 图标圆球 */
@media (max-width: 640px) {
  .ai-pane-tool .ai-pane-tool__label { display: none; }
  .ai-pane-tool { padding: 0; width: 32px; min-width: 32px; }
  .ai-pane-tool--primary { width: auto; padding: 0 12px; }
  .ai-pane-tool--primary .ai-pane-tool__label { display: inline; }
}

/* 防止 textarea 滚动条与工具栏重叠:在 source pane 底部留点位置 */
.ai-translate-studio-pane--source .ai-translate-source-editable,
.ai-translate-studio-pane--out .ai-translate-out {
  padding-bottom: 52px;
}

/* 左：语言标题 +「清空」「粘贴」「翻译」「复制」同尺寸一行；右：对侧语言标题 */
#panel-translate .ai-translate-studio-panehead__cell--left {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

#panel-translate .ai-translate-studio-panehead__near-center {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

/* 双栏头工具条：四键同宽同高，避免主/次按钮 padding 不一致 */
#panel-translate .ai-translate-studio-panehead__near-center button {
  box-sizing: border-box;
  width: 3.75rem;
  min-width: 3.75rem;
  height: 36px;
  min-height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  border-radius: 10px;
}
#panel-translate .ai-translate-studio-panehead__near-center .ai-translate-studio-primary {
  font-weight: 700;
  letter-spacing: 0.02em;
}

#panel-translate .ai-translate-studio-panehead__cell--right {
  text-align: right;
  justify-self: stretch;
}

#panel-translate .ai-translate-studio-panehead__cell--right .ai-translate-studio-pane__title {
  display: block;
  width: 100%;
}

/* 「复制」：浅底强调，与主栏「翻译」区分（宽高压由 .panehead__near-center button 统一） */
#panel-translate .ai-translate-panehead-copy.ai-translate-studio-secondary {
  font-weight: 600;
  color: #4b3d68;
  background: linear-gradient(180deg, #fefeff 0%, #f4f1fa 100%);
  border: 1px solid rgba(165, 155, 195, 0.45);
  box-shadow:
    0 1px 2px rgba(255, 255, 255, 0.98) inset,
    0 2px 10px rgba(50, 40, 85, 0.08);
}

#panel-translate .ai-translate-panehead-copy.ai-translate-studio-secondary:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f8f5fc 100%);
  border-color: rgba(140, 120, 185, 0.5);
}

#panel-translate .ai-translate-studio-pane--source {
  grid-column: 1;
  grid-row: 2;
}

#panel-translate .ai-translate-studio-pane--out {
  grid-column: 2;
  grid-row: 2;
}

.ai-translate-studio-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.ai-translate-studio-pane--out {
  border-left: none;
  box-shadow: inset 1px 0 0 var(--ai-gold-mute-strong);
}

.ai-translate-studio-pane__toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(210, 204, 194, 0.92) 0%, rgba(196, 188, 176, 0.88) 100%);
  border-bottom: 1px solid var(--ai-gold-mute-soft);
  box-shadow: inset 0 1px 0 rgba(220, 216, 208, 0.4);
}

.ai-translate-studio-pane__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ai-dim);
}

#panel-translate .ai-translate-shell--studio.ai-chat-shell .ai-translate-source-editable {
  flex: 1 1 0;
  min-height: 120px;
  margin: 0;
  border: none;
  border-radius: 0;
  background: linear-gradient(180deg, #d8d4cc 0%, #cec8bc 100%);
  color: var(--ai-ink);
  box-shadow: inset 0 1px 0 rgba(220, 216, 208, 0.35);
}
#panel-translate .ai-translate-shell--studio .ai-translate-source-editable:focus {
  outline: none;
  box-shadow:
    inset 0 0 0 1px var(--ai-gold-mute-strong),
    inset 0 0 0 3px var(--ai-accent-ring);
}
#panel-translate .ai-translate-shell--studio .ai-translate-source-editable.is-empty:before {
  color: #c4c9d1;
}

#panel-translate .ai-translate-shell--studio.ai-chat-shell .ai-translate-out {
  flex: 1 1 0;
  min-height: 120px;
  margin: 0;
  border: none;
  border-radius: 0;
  background: linear-gradient(165deg, #d4d0c8 0%, #c8c2b6 55%, #d0cac0 100%);
  color: var(--ai-ink);
  border-left: none;
  box-shadow: inset 0 1px 0 rgba(216, 212, 204, 0.45);
  padding: 12px 14px;
  line-height: 1.75;
}

@media (max-width: 800px) {
  #panel-translate .ai-translate-studio-panes {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr 1fr;
  }
  #panel-translate .ai-translate-studio-panehead {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  #panel-translate .ai-translate-studio-panehead__cell--left {
    flex-direction: column;
    align-items: stretch;
  }
  #panel-translate .ai-translate-studio-panehead__near-center {
    justify-content: center;
  }
  #panel-translate .ai-translate-studio-panehead__cell--right .ai-translate-studio-pane__title {
    text-align: center;
  }
  #panel-translate .ai-translate-studio-pane--source {
    grid-column: 1;
    grid-row: 2;
  }
  #panel-translate .ai-translate-studio-pane--out {
    grid-column: 1;
    grid-row: 3;
  }
  .ai-translate-studio-pane--out {
    box-shadow: inset 0 1px 0 var(--ai-gold-mute-strong);
    border-top: 1px solid var(--ai-gold-mute-soft);
  }
}

/* 「复制」为次要操作，避免与主按钮抢视觉（与助手页克制风格一致） */
.ai-translate-shell.ai-chat-shell .ai-translate-copy-btn {
  background: #d8d4cc !important;
  color: var(--ai-accent) !important;
  border: 1px solid rgba(109, 77, 198, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(228, 224, 216, 0.4) !important;
}
.ai-translate-shell.ai-chat-shell .ai-translate-copy-btn:hover {
  background: rgba(109, 77, 198, 0.1) !important;
  border-color: rgba(109, 77, 198, 0.42) !important;
}

.ai-translate-shell.ai-chat-shell .ai-textarea {
  flex: 0 0 auto;
  width: 100%;
  align-self: stretch;
  margin-bottom: 0;
}

/* 极域 AI 助手 · 微信式聊天气泡（仅 #panel-chat .ai-chat-log 内） */
#panel-chat .ai-chat-log .ai-msg {
  margin: 0;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.52;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: min(78%, 520px);
  min-width: 0;
  box-sizing: border-box;
}

/* 极域 AI 助手 · 工作台（左对话 + 右本次回答） */
#panel-chat .ai-chat-studio {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 10px;
}
#panel-chat .ai-chat-studio__left,
#panel-chat .ai-chat-studio__right {
  min-width: 0;
}
#panel-chat .ai-chat-focus-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
#panel-chat .ai-chat-focus-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
#panel-chat .ai-chat-focus-btn {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ai-ink);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#panel-chat .ai-chat-focus-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
#panel-chat .ai-chat-focus {
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.09);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 12px;
  min-height: 220px;
  max-height: 560px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
  font-size: 15px;
  color: var(--ai-ink);
}

@media (max-width: 980px) {
  #panel-chat .ai-chat-studio {
    grid-template-columns: 1fr;
  }
  #panel-chat .ai-chat-focus {
    max-height: 420px;
  }
}

#panel-chat .ai-chat-log .ai-msg--user {
  align-self: flex-end;
  margin-left: auto;
  background: #95ec69;
  color: #111;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

#panel-chat .ai-chat-log .ai-msg--assistant {
  align-self: flex-start;
  margin-right: auto;
  background: #fff;
  color: var(--ai-ink);
  border: 0.5px solid rgba(0, 0, 0, 0.09);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#panel-chat .ai-chat-log .ai-msg--parts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  white-space: normal;
}

#panel-chat .ai-chat-log .ai-msg__text {
  white-space: pre-wrap;
  word-break: break-word;
}

#panel-chat .ai-chat-log .ai-msg__img {
  display: block;
  max-width: min(100%, 280px);
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
}

#panel-chat .ai-chat-attach-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 6px 0 0;
  min-height: 0;
}

#panel-chat .ai-chat-attach-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 13px;
}

#panel-chat .ai-chat-attach-chip img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
}

#panel-chat .ai-chat-attach-chip button {
  margin: 0;
  padding: 0 6px;
  border: none;
  background: transparent;
  color: var(--ai-muted, #666);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

#panel-chat .ai-chat-actions {
  align-items: center;
}

@media (max-width: 520px) {
  #panel-chat .ai-chat-log .ai-msg {
    max-width: min(88%, 100%);
    font-size: 14px;
  }
}

.ai-textarea {
  flex: 1;
  min-width: 200px;
  padding: 11px 14px;
  font-size: 14px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  resize: vertical;
  font-family: inherit;
  background: #f4f1ea;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ai-textarea:focus {
  outline: none;
  border-color: var(--ai-accent);
  box-shadow: 0 0 0 3px var(--ai-accent-ring);
}

#panel-chat .ai-textarea {
  background: linear-gradient(180deg, #f0ebe0 0%, #e5dfd2 100%);
  border: 1px solid var(--ai-gold-mute);
  box-shadow: inset 0 1px 0 rgba(228, 222, 210, 0.5);
}
#panel-chat .ai-textarea:focus {
  border-color: var(--ai-accent);
  box-shadow:
    0 0 0 1px rgba(109, 77, 198, 0.18),
    0 0 0 3px var(--ai-accent-ring);
}

.ai-send-btn {
  align-self: stretch;
  border-radius: 12px !important;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* --- 翻译操作栏（清空 + 翻译按钮） --- */
.ai-translate-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

/* 清空：与「翻译」同形，绿色底白字 */
.ai-translate-actions .ai-translate-clear-btn {
  margin-left: auto;
  background: #16a34a !important;
  color: #fff !important;
}
.ai-translate-actions .ai-translate-clear-btn:hover {
  background: #15803d !important;
}
.ai-translate-actions .ai-translate-clear-btn:active {
  transform: scale(0.98);
}

/* --- 翻译 --- */
.ai-translate-shell {
  width: 100%;
  max-width: 2700px;
  padding: 24px;
  border-radius: 16px;
  background: var(--ai-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--ai-glass-border);
  box-shadow: var(--ai-shadow-md);
  height: 900px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

/* 极域 AI 助手主卡：与翻译工作室同套金丝画框 + 厚重光影 */
#panel-chat .ai-translate-shell.ai-chat-shell {
  border: 2px solid transparent;
  border-radius: 18px;
  background-image: var(--ai-shell-inner-lux), var(--ai-gold-frame);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  backdrop-filter: blur(18px) saturate(0.92);
  -webkit-backdrop-filter: blur(18px) saturate(0.92);
  box-shadow: var(--ai-shadow-lux-shell);
}

/* 媒体提取子面板：同套金丝画框（与主卡一致） */
#panel-media .ai-translate-shell.ai-media-shell.product-card {
  border: 2px solid transparent;
  border-radius: 18px;
  background-image: var(--ai-shell-inner-lux), var(--ai-gold-frame);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  backdrop-filter: blur(18px) saturate(0.92);
  -webkit-backdrop-filter: blur(18px) saturate(0.92);
  box-shadow: var(--ai-shadow-lux-shell);
}

/* 极域 2FA：独立页 / 嵌入 iframe 同套金丝画框（与媒体子面板一致） */
body.ai-tools-body.page-2fa .ai-twofa-shell.product-card,
body.ai-tools-body.page-2fa-embed .ai-twofa-shell.product-card {
  border: 2px solid transparent;
  border-radius: 18px;
  background-image: var(--ai-shell-inner-lux), var(--ai-gold-frame);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  backdrop-filter: blur(18px) saturate(0.92);
  -webkit-backdrop-filter: blur(18px) saturate(0.92);
  box-shadow: var(--ai-shadow-lux-shell);
}

body.ai-tools-body.page-2fa:not(.page-2fa-embed) .ai-twofa-shell.product-card {
  padding: 22px 22px 26px;
}

body.ai-tools-body.page-2fa-embed .ai-twofa-shell.product-card {
  padding: 12px 14px 8px;
}

/* —— 极域 AI 子面板 · 白金尊享外框与内件（ai-jiyu-platinum-shell） —— */
body.ai-tools-body #panel-chat .ai-jiyu-platinum-shell.ai-chat-shell.product-card:not(.ai-translate-shell--studio),
body.ai-tools-body #panel-media .ai-jiyu-platinum-shell.ai-media-shell.product-card,
body.ai-tools-body.page-2fa-embed .ai-jiyu-platinum-shell.ai-twofa-shell.product-card,
body.ai-tools-body.page-2fa:not(.page-2fa-embed) .ai-jiyu-platinum-shell.ai-twofa-shell.product-card {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(168deg, #f7f5fc 0%, #ebe6f4 40%, #ddd5ea 78%, #d4cce3 100%) !important;
  background-image:
    linear-gradient(155deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(168deg, #f7f5fc 0%, #ebe6f4 40%, #ddd5ea 78%, #d4cce3 100%) !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 -1px 0 rgba(100, 80, 140, 0.05) inset,
    0 20px 52px -18px rgba(22, 16, 42, 0.24),
    0 8px 22px -10px rgba(95, 75, 130, 0.16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible;
}

body.ai-tools-body #panel-translate .ai-jiyu-platinum-shell.ai-translate-shell--studio.ai-chat-shell.product-card {
  position: relative;
  isolation: isolate;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(168deg, #f7f5fc 0%, #ebe6f4 40%, #ddd5ea 78%, #d4cce3 100%) !important;
  background-image:
    linear-gradient(155deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(168deg, #f7f5fc 0%, #ebe6f4 40%, #ddd5ea 78%, #d4cce3 100%) !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 -1px 0 rgba(100, 80, 140, 0.05) inset,
    0 20px 52px -18px rgba(22, 16, 42, 0.24),
    0 8px 22px -10px rgba(95, 75, 130, 0.16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* visible：语言下拉向上展开时不可被裁切；滚动由内层 .ai-translate-studio-panes 等承担 */
  overflow: visible;
}

body.ai-tools-body .ai-jiyu-platinum-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 130% 85% at 50% -35%, rgba(255, 255, 255, 0.88), transparent 52%);
  z-index: 0;
}

body.ai-tools-body .ai-jiyu-platinum-shell::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 3px;
  border-radius: 0 0 8px 8px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(230, 215, 255, 0.4),
    rgba(255, 252, 248, 0.98),
    rgba(212, 185, 145, 0.75),
    rgba(255, 250, 242, 1),
    rgba(212, 185, 145, 0.65),
    rgba(230, 215, 255, 0.35),
    transparent
  );
  box-shadow: 0 1px 10px rgba(255, 245, 220, 0.55);
  z-index: 1;
}

body.ai-tools-body .ai-jiyu-platinum-shell > * {
  position: relative;
  z-index: 2;
}

body.ai-tools-body .ai-jiyu-platinum-shell .ai-output-title {
  margin-top: 0 !important;
  margin-bottom: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(160, 140, 195, 0.22);
  font-size: 1.26rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  background: linear-gradient(118deg, #3d3348 0%, #6a5d78 38%, #2a2235 62%, #5c4f6e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports not (background-clip: text) {
  body.ai-tools-body .ai-jiyu-platinum-shell .ai-output-title {
    background: none;
    -webkit-text-fill-color: inherit;
    color: #2f263c;
  }
}

body.ai-tools-body #panel-media .ai-jiyu-platinum-shell .media-extract-lead {
  margin-top: 0;
  margin-bottom: 12px;
  padding: 12px 14px;
  font-size: 0.88rem;
  line-height: 1.58;
  color: #45405a;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 245, 252, 0.92));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 4px 18px rgba(40, 30, 70, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.ai-tools-body #panel-media .ai-jiyu-platinum-shell .me-post-url-input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 10px 12px;
  font-size: 15px;
  border-radius: 12px;
  border: 1px solid rgba(165, 155, 195, 0.42);
  background: linear-gradient(180deg, #fefeff 0%, #f4f1fa 100%);
  color: #241c32;
  box-shadow:
    0 1px 2px rgba(255, 255, 255, 0.98) inset,
    0 2px 10px rgba(50, 40, 85, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.ai-tools-body #panel-media .ai-jiyu-platinum-shell .me-post-url-input::placeholder {
  color: rgba(95, 85, 120, 0.42);
}

body.ai-tools-body #panel-media .ai-jiyu-platinum-shell .me-post-url-input:focus {
  outline: none;
  border-color: rgba(185, 155, 230, 0.85);
  box-shadow:
    0 1px 2px rgba(255, 255, 255, 0.98) inset,
    0 0 0 3px rgba(220, 200, 255, 0.45),
    0 8px 24px rgba(90, 65, 130, 0.12);
}

body.ai-tools-body #panel-media .ai-jiyu-platinum-shell #me-btnExtract.btn-buy {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background: linear-gradient(165deg, #fcfbff 0%, #e8e2f2 20%, #d5cce6 52%, #c4b8da 78%, #b8aad0 100%);
  color: #1f1628;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78) inset,
    0 12px 32px -10px rgba(35, 25, 55, 0.35),
    0 3px 10px rgba(75, 55, 105, 0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

body.ai-tools-body #panel-media .ai-jiyu-platinum-shell #me-btnExtract.btn-buy:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

body.ai-tools-body #panel-chat .ai-jiyu-platinum-shell .ai-chat-log {
  background: #ededed;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

body.ai-tools-body #panel-chat .ai-jiyu-platinum-shell .ai-textarea {
  background: linear-gradient(180deg, #fefeff 0%, #f4f1fa 100%);
  border: 1px solid rgba(165, 155, 195, 0.42);
  box-shadow:
    0 1px 2px rgba(255, 255, 255, 0.98) inset,
    0 2px 10px rgba(50, 40, 85, 0.06);
}

body.ai-tools-body #panel-chat .ai-jiyu-platinum-shell .ai-textarea:focus {
  border-color: rgba(185, 155, 230, 0.85);
  box-shadow:
    0 1px 2px rgba(255, 255, 255, 0.98) inset,
    0 0 0 3px rgba(220, 200, 255, 0.45),
    0 8px 24px rgba(90, 65, 130, 0.12);
}

body.ai-tools-body #panel-chat .ai-jiyu-platinum-shell .btn-buy.ai-send-btn {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background: linear-gradient(165deg, #fcfbff 0%, #e8e2f2 20%, #d5cce6 52%, #c4b8da 78%, #b8aad0 100%);
  color: #1f1628;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78) inset,
    0 12px 32px -10px rgba(35, 25, 55, 0.35),
    0 3px 10px rgba(75, 55, 105, 0.14);
}

body.ai-tools-body #panel-chat .ai-jiyu-platinum-shell .btn-buy.ai-send-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

body.ai-tools-body #panel-translate .ai-jiyu-platinum-shell .ai-translate-studio-bar {
  position: relative;
  z-index: 30;
  background: linear-gradient(180deg, rgba(242, 238, 252, 0.98) 0%, rgba(224, 216, 238, 0.94) 100%);
  border-bottom: 1px solid rgba(160, 140, 195, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* 与语言栏同壳的 panes 在后序绘制，会盖住下拉；压低层级，避免遮挡语言选择器 */
body.ai-tools-body #panel-translate .ai-jiyu-platinum-shell.ai-translate-shell--studio > .ai-translate-studio-panes {
  position: relative;
  z-index: 1;
}

body.ai-tools-body #panel-translate .ai-jiyu-platinum-shell .ai-translate-history-btn {
  border: 1px solid rgba(165, 155, 195, 0.45);
  background: linear-gradient(165deg, rgba(252, 250, 255, 0.95) 0%, rgba(232, 226, 246, 0.98) 100%);
  color: #5c4f6e;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 1px 3px rgba(45, 30, 75, 0.08);
}

body.ai-tools-body #panel-translate .ai-jiyu-platinum-shell .ai-translate-history-btn:hover {
  border-color: rgba(140, 120, 185, 0.55);
  color: #3d3348;
}

body.ai-tools-body #panel-translate .ai-jiyu-platinum-shell .ai-translate-swap {
  color: #5c4f6e;
  background: linear-gradient(180deg, rgba(248, 245, 252, 0.98) 0%, rgba(232, 226, 242, 0.95) 100%);
  border: 1px solid rgba(165, 155, 195, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

body.ai-tools-body #panel-translate .ai-jiyu-platinum-shell .ai-translate-swap:hover {
  border-color: rgba(140, 120, 185, 0.5);
  color: var(--ai-accent);
}

body.ai-tools-body #panel-translate .ai-jiyu-platinum-shell .ai-translate-studio-secondary {
  background: linear-gradient(180deg, rgba(252, 250, 255, 0.95) 0%, rgba(236, 230, 248, 0.98) 100%);
  border: 1px solid rgba(165, 155, 195, 0.4);
  color: #4b3d68;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body.ai-tools-body #panel-translate .ai-jiyu-platinum-shell .ai-translate-studio-secondary:hover {
  background: linear-gradient(180deg, #fefeff 0%, rgba(240, 234, 252, 0.98) 100%);
  border-color: rgba(140, 120, 185, 0.5);
}

body.ai-tools-body #panel-translate .ai-jiyu-platinum-shell .ai-translate-studio-pane--out {
  box-shadow: inset 1px 0 0 rgba(160, 140, 195, 0.28);
}

body.ai-tools-body #panel-translate .ai-jiyu-platinum-shell .ai-translate-studio-panehead {
  background: linear-gradient(180deg, rgba(236, 230, 248, 0.95) 0%, rgba(222, 214, 236, 0.92) 100%);
  border-bottom: 1px solid rgba(160, 140, 195, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

body.ai-tools-body
  #panel-translate
  .ai-jiyu-platinum-shell
  .ai-translate-panehead-copy.ai-translate-studio-secondary:not(.ai-translate-clear-btn) {
  background: linear-gradient(180deg, #fefeff 0%, #f4f1fa 100%);
  border: 1px solid rgba(165, 155, 195, 0.45);
  color: #4b3d68;
  box-shadow:
    0 1px 2px rgba(255, 255, 255, 0.98) inset,
    0 2px 10px rgba(50, 40, 85, 0.08);
}

body.ai-tools-body
  #panel-translate
  .ai-jiyu-platinum-shell
  .ai-translate-panehead-copy.ai-translate-studio-secondary:not(.ai-translate-clear-btn):hover {
  background: linear-gradient(180deg, #ffffff 0%, #f8f5fc 100%);
  border-color: rgba(140, 120, 185, 0.5);
}

body.ai-tools-body #panel-translate .ai-jiyu-platinum-shell .ai-translate-studio-pane__title {
  color: #5c4f6e;
}

body.ai-tools-body #panel-translate .ai-jiyu-platinum-shell.ai-translate-shell--studio .ai-translate-source-editable {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(244, 240, 252, 0.92) 100%);
  color: var(--ai-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

body.ai-tools-body #panel-translate .ai-jiyu-platinum-shell.ai-translate-shell--studio .ai-translate-source-editable:focus {
  box-shadow:
    inset 0 0 0 1px rgba(160, 140, 195, 0.45),
    inset 0 0 0 3px rgba(220, 200, 255, 0.35);
}

body.ai-tools-body #panel-translate .ai-jiyu-platinum-shell.ai-translate-shell--studio.ai-chat-shell .ai-translate-out {
  background: linear-gradient(165deg, rgba(248, 244, 255, 0.95) 0%, rgba(232, 224, 246, 0.92) 55%, rgba(238, 232, 250, 0.96) 100%);
  color: var(--ai-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

@media (max-width: 800px) {
  body.ai-tools-body #panel-translate .ai-jiyu-platinum-shell .ai-translate-studio-pane--out {
    box-shadow: inset 0 1px 0 rgba(160, 140, 195, 0.28);
  }
}

body.ai-tools-body.page-2fa-embed .ai-jiyu-platinum-shell.ai-twofa-shell.product-card {
  padding: 22px 22px 20px !important;
}

body.ai-tools-body.page-2fa .ai-jiyu-platinum-shell .media-extract-lead.twofa-intro {
  margin-top: 0;
  margin-bottom: 10px;
  padding: 12px 14px;
  font-size: 0.88rem;
  line-height: 1.58;
  color: #45405a;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 245, 252, 0.92));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 4px 18px rgba(40, 30, 70, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.ai-tools-body.page-2fa .ai-jiyu-platinum-shell.ai-twofa-shell .twofa-field label {
  color: #3a3348 !important;
  font-size: 12px;
  letter-spacing: 0.04em;
}

body.ai-tools-body.page-2fa .ai-jiyu-platinum-shell.ai-twofa-shell .twofa-input,
body.ai-tools-body.page-2fa .ai-jiyu-platinum-shell.ai-twofa-shell .twofa-textarea {
  border: 1px solid rgba(165, 155, 195, 0.42) !important;
  background: linear-gradient(180deg, #fefeff 0%, #f4f1fa 100%) !important;
  color: #241c32 !important;
  box-shadow:
    0 1px 2px rgba(255, 255, 255, 0.98) inset,
    0 2px 10px rgba(50, 40, 85, 0.06);
}

body.ai-tools-body.page-2fa .ai-jiyu-platinum-shell.ai-twofa-shell .twofa-input:focus,
body.ai-tools-body.page-2fa .ai-jiyu-platinum-shell.ai-twofa-shell .twofa-textarea:focus {
  border-color: rgba(185, 155, 230, 0.85) !important;
  box-shadow:
    0 1px 2px rgba(255, 255, 255, 0.98) inset,
    0 0 0 3px rgba(220, 200, 255, 0.45),
    0 8px 24px rgba(90, 65, 130, 0.12);
}

body.ai-tools-body.page-2fa .ai-jiyu-platinum-shell .twofa-result__item {
  border: 1px solid rgba(165, 155, 195, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(246, 242, 252, 0.95) 100%);
  box-shadow:
    0 1px 2px rgba(255, 255, 255, 0.85) inset,
    0 2px 10px rgba(50, 40, 85, 0.05);
}

body.ai-tools-body.page-2fa .ai-jiyu-platinum-shell button.twofa-result__item--copy:hover {
  border-color: rgba(140, 120, 185, 0.45);
  box-shadow:
    0 1px 2px rgba(255, 255, 255, 0.85) inset,
    0 2px 12px rgba(60, 45, 95, 0.1);
}

body.ai-tools-body.page-2fa .ai-jiyu-platinum-shell .twofa-actions .twofa-btn.ai-translate-studio-primary {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 10px 28px -8px rgba(45, 30, 85, 0.35);
}

body.ai-tools-body.page-2fa .ai-jiyu-platinum-shell .twofa-actions .twofa-btn.ai-translate-studio-secondary {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(252, 250, 255, 0.95) 0%, rgba(236, 230, 248, 0.98) 100%);
  border: 1px solid rgba(165, 155, 195, 0.4);
  color: #4b3d68;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 6px 18px rgba(45, 30, 75, 0.12);
}

@media (max-width: 420px) {
  body.ai-tools-body #panel-chat .ai-jiyu-platinum-shell.ai-chat-shell.product-card:not(.ai-translate-shell--studio),
  body.ai-tools-body #panel-media .ai-jiyu-platinum-shell.ai-media-shell.product-card,
  body.ai-tools-body.page-2fa-embed .ai-jiyu-platinum-shell.ai-twofa-shell.product-card,
  body.ai-tools-body.page-2fa:not(.page-2fa-embed) .ai-jiyu-platinum-shell.ai-twofa-shell.product-card {
    border-radius: 18px !important;
  }

  body.ai-tools-body #panel-translate .ai-jiyu-platinum-shell.ai-translate-shell--studio.ai-chat-shell.product-card {
    border-radius: 18px !important;
  }
}

.ai-translate-shell .ai-textarea {
  width: 100%;
  display: block;
}

.ai-translate-shell label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ai-dim);
  margin-bottom: 6px;
}

.ai-translate-entity-hint {
  font-size: 11.5px;
  margin: 0 0 10px;
  color: #9ca3af;
  line-height: 1.55;
  display: none;
}

.ai-translate-source-editable {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
  border-radius: 12px;
  background: #f4f1ea;
  resize: none;
}
.ai-translate-source-editable:focus {
  border-color: var(--ai-accent);
  box-shadow: 0 0 0 3px var(--ai-accent-ring);
}

.ai-translate-source-editable.is-empty:before {
  content: attr(data-placeholder);
  color: #c4c9d1;
  pointer-events: none;
}

.ai-translate-entity {
  color: #1e3a5f;
  background: rgba(30, 58, 95, 0.10);
  border-radius: 3px;
  padding: 0 2px;
}

/* 词表显式人名/称呼（与深蓝一般实体区分） */
.ai-translate-entity-glossary {
  color: #6b1a2a;
  background: rgba(114, 47, 55, 0.14);
  border-radius: 3px;
  padding: 0 2px;
}

/* 译文：与原文高亮实体对应的称呼/姓名（中日异称等），酒红与词表同级 */
.ai-translate-entity-pair {
  color: #8b1530;
  background: rgba(139, 21, 48, 0.13);
  border-radius: 3px;
  padding: 0 2px;
}

.ai-translate-entity-mismatch {
  color: #6b1a2a;
  background: rgba(140, 28, 50, 0.12);
  border-radius: 3px;
  padding: 0 2px;
}

/* --- 译文头 + 复制按钮 --- */
.ai-output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 8px;
}

.ai-output-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ai-dim);
  margin: 0;
  cursor: default;
}

/* 「复制」与「翻译」共用 .btn-buy .ai-send-btn，无需单独样式 */

/* --- 译文输出区 --- */
.ai-translate-out {
  flex: 1 1 0;
  min-height: 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  background: var(--ai-warm);
  font-size: 14px;
  line-height: 1.72;
  white-space: pre-wrap;
  word-break: break-word;
  resize: none;
  overflow-y: auto;
  color: var(--ai-ink);
}

/* --- AI 页底栏固定在页面底部 --- */
.ai-tools-body {
  display: flex;
  flex-direction: column;
}
.ai-tools-body > .site-footer {
  margin-top: auto;
  padding-top: 80px;
}

/* --- 购买配额按钮 --- */
.ai-open-checkout-btn.btn-buy {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ai-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ai-modal-overlay[hidden] {
  display: none;
}

.ai-modal {
  position: relative;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px 20px 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.ai-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}

.ai-modal-lead {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 12px;
}

.ai-price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 12px;
}

.ai-price-table th,
.ai-price-table td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.ai-price-table th {
  background: #fafbfc;
}

.ai-modal-actions {
  margin: 16px 0 0;
  text-align: center;
}

.ai-error-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.ai-error-detail {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fafbfc;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-checkout-launch-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-open-checkout-btn {
  font-size: 13px;
  padding: 0 20px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* ============ 顶栏「在线客服」未读红点 ============ */
.dny-chat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 6px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1;
  box-shadow: 0 3px 8px -2px rgba(239, 68, 68, 0.55);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  animation: dnyChatBadgePulse 2.2s ease-in-out infinite;
}
.dny-chat-badge[hidden] { display: none; }
@keyframes dnyChatBadgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 3px 8px -2px rgba(239, 68, 68, 0.55); }
  50%      { transform: scale(1.08); box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.75); }
}
/* 「在线客服」按钮整体在有未读时也加一点暖红外阴影,强化"有事找你"提示 */
a.hero-btn.has-chat-unread {
  box-shadow: 0 0 0 1.5px rgba(239, 68, 68, 0.5), 0 4px 12px -4px rgba(239, 68, 68, 0.45);
  transition: box-shadow 0.2s ease;
}

/* 免费试用徽章:奢华暖金棕渐变 + 内高光,跟整站 chat/fx 风格统一 */
.ai-trial-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  min-height: 42px;
  border: 1px solid #b08c5a;
  border-radius: 12px;
  background: linear-gradient(160deg, #fff8e0 0%, #f5e4c3 55%, #e6c896 100%);
  color: #6b4f1e;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 6px 14px -6px rgba(176, 140, 90, 0.5);
  transition: filter 0.15s, transform 0.06s, box-shadow 0.15s;
}
.ai-trial-badge:hover {
  filter: brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 8px 18px -6px rgba(176, 140, 90, 0.6);
}
.ai-trial-badge:active { transform: translateY(1px); }
.ai-trial-badge[hidden] { display: none; }
.ai-trial-badge__icon {
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(107, 79, 30, 0.25));
}
.ai-trial-badge__text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.ai-trial-badge__title {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #6b4f1e;
}
.ai-trial-badge__sub {
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 700;
  color: #8a6938;
  font-variant-numeric: tabular-nums;
}
/* 当 sub 显示「试用已结束」时切换成红色 */
.ai-trial-badge.is-expired {
  background: linear-gradient(160deg, #fdebee 0%, #fbcfd5 100%);
  border-color: #e4393c;
  color: #991b1b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 6px 14px -6px rgba(228, 57, 60, 0.45);
}
.ai-trial-badge.is-expired .ai-trial-badge__title,
.ai-trial-badge.is-expired .ai-trial-badge__sub { color: #991b1b; }

.ai-checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.ai-checkout-modal.hidden {
  display: none !important;
}

.ai-checkout-modal__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(34, 197, 94, 0.28), transparent 54%),
    radial-gradient(ellipse 90% 60% at 0% 100%, rgba(16, 185, 129, 0.18), transparent 48%),
    radial-gradient(ellipse 90% 60% at 100% 100%, rgba(74, 222, 128, 0.12), transparent 48%),
    linear-gradient(168deg, rgba(6, 20, 12, 0.88) 0%, rgba(10, 28, 18, 0.93) 100%);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  cursor: pointer;
}

/* 选择方案：随内容高度，避免下方大块空白 */
.ai-checkout-modal__box {
  position: relative;
  z-index: 1;
  width: min(472px, 100%);
  --ai-checkout-modal-vpad: 32px;
  height: auto;
  max-height: calc(
    100dvh - var(--ai-checkout-modal-vpad) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
  );
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 28px 56px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.06));
}

/* 仅进入链上支付 / 等待付款 后略加高，便于一屏见全收款区（仍不强制铺满整页） */
#ai-checkout-modal.ai-checkout-modal--step-pay .ai-checkout-modal__box {
  height: min(860px, calc(100dvh - var(--ai-checkout-modal-vpad) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  max-height: min(860px, calc(100dvh - var(--ai-checkout-modal-vpad) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
}

@supports not (height: 100dvh) {
  .ai-checkout-modal__box {
    max-height: calc(
      100vh - var(--ai-checkout-modal-vpad) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
    );
  }
  #ai-checkout-modal.ai-checkout-modal--step-pay .ai-checkout-modal__box {
    height: min(860px, calc(100vh - var(--ai-checkout-modal-vpad) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    max-height: min(860px, calc(100vh - var(--ai-checkout-modal-vpad) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  }
}

.ai-checkout-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.ai-checkout-modal__close:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-color: rgba(252, 211, 77, 0.55);
  transform: scale(1.06);
}

.ai-checkout-card {
  padding: 0;
  max-width: none;
  margin: 0;
  border: none;
  border-radius: 22px;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.32) inset,
    0 0 0 1px rgba(8, 16, 12, 0.28),
    0 38px 86px rgba(0, 0, 0, 0.38);
  background:
    radial-gradient(140% 70% at 50% 0%, rgba(255, 255, 255, 0.78) 0%, transparent 56%),
    radial-gradient(120% 80% at 10% 10%, rgba(52, 211, 153, 0.26) 0%, transparent 55%),
    radial-gradient(120% 80% at 90% 20%, rgba(134, 239, 172, 0.18) 0%, transparent 58%),
    linear-gradient(180deg, #eefcf4 0%, #e6faee 42%, #f4fff8 100%);
}

.ai-checkout-card--lux {
  position: relative;
}

.ai-checkout-modal__box .ai-checkout-card {
  padding-top: 0;
}

.ai-checkout-card__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-checkout-step {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 选方案时不要用 flex 占满，避免出现大面积空白；链上支付步骤再让中间区可伸展 */
#ai-checkout-modal:not(.ai-checkout-modal--step-pay) .ai-checkout-card,
#ai-checkout-modal:not(.ai-checkout-modal--step-pay) .ai-checkout-card__body,
#ai-checkout-modal:not(.ai-checkout-modal--step-pay) .ai-checkout-step {
  flex: 0 0 auto;
}

.ai-checkout-step--pay {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 16px;
  box-sizing: border-box;
}

.ai-checkout-back {
  flex-shrink: 0;
  margin: 14px 22px 0;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #2f3844;
  background: rgba(236, 232, 224, 0.96);
  border: 1px solid rgba(15, 35, 66, 0.14);
  border-radius: 10px;
  cursor: pointer;
  align-self: flex-start;
  font-family: inherit;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.ai-checkout-back:hover {
  border-color: rgba(118, 102, 72, 0.38);
  color: #141c28;
}

.ai-checkout-modal__head {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 26px 22px 22px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.16) 0%, transparent 58%),
    radial-gradient(120% 90% at 100% 0%, rgba(167, 243, 208, 0.18) 0%, transparent 60%),
    linear-gradient(152deg, #052012 0%, #06331c 38%, #064e2b 72%, #06402a 100%);
  color: #e8eef8;
  position: relative;
}

.ai-checkout-modal__head::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 120% at 0% 0%, rgba(74, 222, 128, 0.22), transparent 55%),
    radial-gradient(ellipse 70% 100% at 30% 20%, rgba(16, 185, 129, 0.18), transparent 60%);
  pointer-events: none;
}

.ai-checkout-modal__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(52, 211, 153, 0.28) 15%,
    rgba(74, 222, 128, 0.9) 50%,
    rgba(52, 211, 153, 0.28) 85%,
    transparent 100%
  );
  opacity: 0.95;
}

.ai-checkout-modal__head-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(110, 231, 183, 0.34);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 24px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 1;
}

.ai-checkout-modal__head-gem {
  display: block;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  border-radius: 3px;
  background: linear-gradient(145deg, #ecfdf5 0%, #a7f3d0 42%, #16a34a 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    0 2px 10px rgba(0, 0, 0, 0.35);
}

.ai-checkout-modal__head-text {
  min-width: 0;
  padding-right: 44px;
  position: relative;
  z-index: 1;
}

.ai-checkout-title {
  margin: 0 0 10px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.ai-checkout-modal__subtitle {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(226, 232, 240, 0.78);
  font-weight: 500;
}

.ai-checkout-modal__network {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #062a18;
  background: linear-gradient(135deg, #bbf7d0 0%, #6ee7b7 48%, #22c55e 100%);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 2px 10px rgba(0, 0, 0, 0.25);
}

.ai-checkout-desc {
  margin: 0;
  padding: 20px 22px 0;
  font-size: 13px;
  line-height: 1.7;
  color: #5c6570;
}

.ai-checkout-desc strong {
  color: #1a2332;
  font-weight: 600;
}

.ai-plan-section-label {
  margin: 22px 22px 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8b939e;
}

.ai-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
  padding: 0 22px 22px;
}

.ai-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  min-height: 82px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(5, 46, 22, 0.12);
  border-radius: 16px;
  background:
    radial-gradient(120% 80% at 15% 15%, rgba(255, 255, 255, 0.75) 0%, transparent 55%),
    linear-gradient(165deg, rgba(236, 253, 245, 0.98) 0%, rgba(220, 252, 231, 0.92) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  color: var(--text);
  text-align: left;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.38) inset,
    0 6px 22px rgba(5, 46, 22, 0.1);
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

.ai-plan-card:hover:not(:disabled) {
  border-color: rgba(34, 197, 94, 0.42);
  box-shadow:
    0 0 0 1px rgba(110, 231, 183, 0.18) inset,
    0 16px 38px rgba(5, 46, 22, 0.12);
  transform: translateY(-3px);
}

.ai-plan-card:focus-visible {
  outline: 2px solid rgba(34, 197, 94, 0.45);
  outline-offset: 2px;
}

.ai-plan-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.ai-plan-card__term {
  font-size: 13px;
  font-weight: 600;
  color: #1a2332;
  letter-spacing: 0.02em;
}

.ai-plan-card__note {
  font-size: 11px;
  font-weight: 500;
  color: #5c6570;
  line-height: 1.35;
}

.ai-plan-card__price {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #141c28;
  line-height: 1.2;
}

.ai-plan-card__unit {
  margin-left: 3px;
  font-size: 0.68em;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0b6b3a;
  vertical-align: super;
}

.ai-plan-card--featured {
  border-color: rgba(34, 197, 94, 0.36);
  background:
    radial-gradient(130% 90% at 20% 15%, rgba(255, 255, 255, 0.72) 0%, transparent 58%),
    linear-gradient(158deg, #ecfdf5 0%, #d1fae5 48%, #bbf7d0 100%);
  box-shadow:
    0 0 0 1px rgba(110, 231, 183, 0.22) inset,
    0 12px 34px rgba(5, 46, 22, 0.12);
}

.ai-plan-card--featured:hover:not(:disabled) {
  border-color: rgba(22, 163, 74, 0.58);
  box-shadow:
    0 0 0 1px rgba(110, 231, 183, 0.26) inset,
    0 16px 40px rgba(5, 46, 22, 0.14);
}

.ai-plan-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #052a16;
  background: linear-gradient(135deg, #bbf7d0 0%, #6ee7b7 50%, #22c55e 100%);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.ai-plan-card--addon {
  grid-column: 1 / -1;
  min-height: auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  border-style: dashed;
  border-color: rgba(16, 185, 129, 0.36);
  background:
    radial-gradient(120% 80% at 10% 10%, rgba(255, 255, 255, 0.7) 0%, transparent 56%),
    linear-gradient(180deg, rgba(236, 253, 245, 0.96) 0%, rgba(220, 252, 231, 0.92) 100%);
}

.ai-plan-card--addon .ai-plan-card__term {
  flex: 1 1 auto;
}

.ai-plan-card--addon .ai-plan-card__note {
  flex: 1 1 100%;
  order: 3;
}

.ai-plan-card--addon .ai-plan-card__price {
  order: 2;
}

@media (max-width: 380px) {
  .ai-plan-grid {
    grid-template-columns: 1fr;
  }

  .ai-plan-card--addon {
    flex-direction: column;
    align-items: flex-start;
  }

  .ai-plan-card--addon .ai-plan-card__note {
    order: unset;
  }

  .ai-plan-card--addon .ai-plan-card__price {
    order: unset;
  }
}

.ai-chain-panel {
  margin: 0 22px 14px;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 110% 85% at 50% 0%, rgba(34, 197, 94, 0.16), transparent 58%),
    radial-gradient(ellipse 90% 70% at 0% 100%, rgba(16, 185, 129, 0.12), transparent 55%),
    linear-gradient(168deg, #071a10 0%, #0b2416 42%, #0d2b1a 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  line-height: 1.55;
  color: #cbd5e1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 48px rgba(0, 0, 0, 0.35);
}

.ai-chain-panel.hidden {
  display: none;
}

.ai-chain-status {
  margin: 0 0 12px;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.55;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid rgba(148, 163, 184, 0.5);
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
}

.ai-chain-status[data-tone="pending"] {
  border-left-color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  color: #bae6fd;
}

.ai-chain-status[data-tone="ok"] {
  border-left-color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  color: #bbf7d0;
}

.ai-chain-status[data-tone="error"] {
  border-left-color: #fb7185;
  background: rgba(251, 113, 133, 0.12);
  color: #fecdd3;
}

.ai-chain-status[data-tone="warn"] {
  border-left-color: #fcd34d;
  background: rgba(252, 211, 77, 0.12);
  color: #fef08a;
}

.ai-chain-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ai-chain-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-chain-row__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.85);
}

.ai-chain-row__value {
  width: 100%;
}

.ai-chain-row--amount .ai-exact-amt {
  display: inline-block;
}

.ai-chain-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-chain-btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.ai-chain-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
}

.ai-chain-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(74, 222, 128, 0.42);
  color: #d1fae5;
}

.ai-chain-btn--primary {
  background: linear-gradient(135deg, #bbf7d0 0%, #34d399 44%, #22c55e 100%);
  color: #052a16;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 6px 20px rgba(0, 0, 0, 0.35);
}

.ai-chain-btn--primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.ai-chain-panel .ai-mono {
  display: block;
  word-break: break-all;
  font-size: 12px;
  line-height: 1.5;
  background: rgba(0, 0, 0, 0.35);
  padding: 11px 12px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
}

.ai-chain-panel .ai-exact-amt {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #fde68a;
  text-shadow:
    0 0 28px rgba(252, 211, 77, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.5);
}

/* 兼容：链外面板若复用 .ai-mono */
.ai-mono {
  display: block;
  word-break: break-all;
  font-size: 12px;
  background: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(15, 35, 66, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.ai-exact-amt {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* 链上支付单剩余时间（与后端 payment_intents.expires_at 一致） */
.pay-countdown {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: #1a365d;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(43, 108, 176, 0.1);
  border: 1px solid rgba(43, 108, 176, 0.22);
}

.pay-countdown[data-urgent="1"] {
  color: #822727;
  background: rgba(228, 57, 60, 0.1);
  border-color: rgba(228, 57, 60, 0.28);
}

.pay-countdown[data-expired="1"] {
  color: #822727;
  background: rgba(228, 57, 60, 0.08);
  border-color: rgba(228, 57, 60, 0.2);
}

.ai-pay-countdown.pay-countdown {
  margin-bottom: 4px;
}

.ai-chain-panel .pay-countdown {
  color: #bae6fd;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.28);
}

.ai-chain-panel .pay-countdown[data-urgent="1"] {
  color: #fecdd3;
  background: rgba(251, 113, 133, 0.14);
  border-color: rgba(251, 113, 133, 0.35);
}

.ai-chain-panel .pay-countdown[data-expired="1"] {
  color: #fde68a;
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.32);
}

/* —— 首页 Hero 横幅 / 全站吸顶顶栏 —— */
.hero-banner {
  background: linear-gradient(135deg, #2c282d 0%, #3d3840 42%, #2e2a32 100%);
  border-bottom: none;
  position: relative;
  overflow: hidden;
}

.hero-banner.hero-banner--sticky-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 2px 12px rgba(0, 0, 0, 0.25);
}

.hero-inner.hero-inner--sticky-bar {
  padding: 10px 16px 12px;
}

.hero-banner--home .hero-inner--sticky-bar {
  padding: 12px 16px 11px;
}

.hero-banner--home .hero-title {
  margin-bottom: 6px;
}

/* 全站吸顶顶栏：站点名纯文字（无黑底 / 无深色投影；禁用旧缓存注入的标题图） */
.hero-banner--sticky-bar .hero-title.hero-title--bar {
  margin: 0 0 8px;
  padding: 0;
  font-size: clamp(1.35rem, 4.2vw, 2rem);
  line-height: 1.25;
  font-weight: 700;
  background: transparent !important;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: inherit;
  -webkit-text-fill-color: unset;
  text-shadow: none;
  box-shadow: none;
  border: none;
}

.hero-banner--sticky-bar .hero-title.hero-title--bar .hero-title-image,
.hero-banner--sticky-bar .hero-title.hero-title--bar img.hero-title-image {
  display: none !important;
}

.hero-banner--sticky-bar .hero-title-bar-link {
  display: inline-block;
  font-family: "ZCOOL XiaoWei", "Ma Shan Zheng", "STKaiti", "KaiTi", cursive, serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none !important;
  border: none;
  box-shadow: none;
  filter: none;
  /* 不用 background-clip:text，避免边缘发灰；不用黑色 drop-shadow */
  color: #fff5d6;
  background: transparent !important;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  text-shadow:
    0 0 1px rgba(255, 248, 220, 0.95),
    0 1px 0 rgba(255, 230, 160, 0.55),
    0 0 22px rgba(255, 210, 120, 0.45);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.hero-banner--sticky-bar .hero-title-bar-link:hover {
  color: #fffbeb;
  text-decoration: none !important;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.98),
    0 1px 0 rgba(255, 236, 180, 0.65),
    0 0 28px rgba(255, 220, 140, 0.55);
}

.hero-banner--sticky-bar .hero-title-bar-link:focus-visible {
  outline: 2px solid rgba(255, 215, 0, 0.85);
  outline-offset: 4px;
  border-radius: 6px;
}

.hero-banner--home .hero-title-image {
  max-height: 42px;
  width: auto;
  max-width: min(100%, 720px);
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
}

/* 全站 hero 标语：玫瑰金金属渐变 + 立体高光与投影 */
.hero-banner .hero-lead {
  margin: 0 auto 12px;
  max-width: 42em;
  padding: 0 10px;
  box-sizing: border-box;
  font-family: "ZCOOL XiaoWei", "Ma Shan Zheng", "STKaiti", "KaiTi", serif;
  font-weight: 600;
  font-size: clamp(12px, 2vw, 14px);
  line-height: 1.55;
  letter-spacing: 0.06em;
  text-align: center;

  background: linear-gradient(
    168deg,
    #fffefb 0%,
    #ffece8 11%,
    #ffc8c0 22%,
    #f0c4a8 36%,
    #deb887 50%,
    #c9a078 64%,
    #b87a6e 78%,
    #6b3e38 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0.5px 0 rgba(255, 252, 250, 0.92),
    0 1px 0 rgba(230, 200, 175, 0.65),
    0 1.5px 0 rgba(160, 110, 95, 0.4),
    0 2px 1px rgba(45, 18, 22, 0.55),
    0 3px 5px rgba(0, 0, 0, 0.38),
    0 0 18px rgba(255, 195, 175, 0.28);

  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.22));
}

.hero-banner:not(.hero-banner--sticky-bar) .hero-lead {
  font-size: clamp(14px, 2.2vw, 17px);
  line-height: 1.65;
  margin-bottom: 28px;
  text-shadow:
    0 0.5px 0 rgba(255, 252, 250, 0.92),
    0 1px 0 rgba(230, 200, 175, 0.65),
    0 2px 0 rgba(160, 110, 95, 0.38),
    0 3px 1px rgba(45, 18, 22, 0.5),
    0 5px 10px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(255, 195, 175, 0.3);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner .hero-lead {
    filter: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  }
}

/* 全站粘性顶栏：不展示 hero 标语（已从 site-hero.js 移除；防止旧缓存仍注入 .hero-lead） */
.hero-banner--sticky-bar .hero-lead {
  display: none !important;
}

.hero-banner--sticky-bar .hero-actions {
  gap: 10px;
}

/* ============================================================
 *  新版紧凑顶栏(2026 改版)
 *  ┌────────────────────────────────────────────────────────────┐
 *  │ ✨极域尊享 教程 知识库 文章 商城   📥下载客户端 💬 👤我的▾  │
 *  └────────────────────────────────────────────────────────────┘
 *  高度 ~52px(原 110px,节省 53%)
 * ============================================================ */
.dny-topbar{
  /* 须高于 .ai-jiyu-quota-unified-note 跑马灯条(sticky z-index:199)，否则「我的」下拉会被盖住 */
  position:sticky;top:0;z-index:220;
  background:linear-gradient(180deg,#0f172a 0%,#1e1b4b 100%);
  border-bottom:1px solid rgba(255,255,255,0.08);
  box-shadow:0 4px 18px rgba(0,0,0,0.18);
  color:#e2e8f0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;
}
.dny-topbar .hero-bar-extra{padding:6px 18px 0;font-size:12px;color:rgba(255,255,255,0.72)}
.dny-topbar .hero-bar-extra a{color:rgba(255,255,255,0.88);text-decoration:none}
.dny-topbar .hero-bar-extra a:hover{color:#fff}
.dny-topbar .hero-bar-extra .sep{color:rgba(255,255,255,0.32);margin:0 4px}

.dny-topbar-inner{
  max-width:1400px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px;gap:14px;
}

/* —— 左侧:主导航 —— */
.dny-topbar-nav{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
}
.dny-nav-item{
  display:inline-flex;align-items:center;
  padding:8px 14px;border-radius:10px;
  font-size:14px;font-weight:600;letter-spacing:0.3px;
  color:rgba(226,232,240,0.85);text-decoration:none;
  border:1px solid transparent;
  transition:all .15s ease;
  white-space:nowrap;
}
.dny-nav-item:hover{color:#fff;background:rgba(255,255,255,0.06);transform:translateY(-1px)}
.dny-nav-item.is-current{
  color:#fde68a;background:rgba(251,191,36,0.08);
  border-color:rgba(251,191,36,0.25);
}
/* 极域尊享:主功能,金色调突出 */
.dny-nav-item--primary{
  background:linear-gradient(135deg,rgba(251,191,36,0.16),rgba(245,158,11,0.10));
  border-color:rgba(251,191,36,0.4);
  color:#fde68a;
  font-weight:700;
}
.dny-nav-item--primary::before{content:"✨";margin-right:4px}
.dny-nav-item--primary:hover{
  background:linear-gradient(135deg,rgba(251,191,36,0.28),rgba(245,158,11,0.18));
  color:#fff;
  box-shadow:0 4px 14px rgba(251,191,36,0.22);
}
.dny-nav-item--primary.is-current{
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  color:#1f1300;border-color:transparent;
}

/* —— 右侧:操作按钮组 —— */
.dny-topbar-actions{
  display:flex;align-items:center;gap:8px;
}
.dny-action-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:38px;padding:0 14px;border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:#e2e8f0;font-size:13px;font-weight:600;
  text-decoration:none;cursor:pointer;
  transition:all .15s ease;
  position:relative;
  font-family:inherit;
}
.dny-action-btn:hover{
  background:rgba(255,255,255,0.10);color:#fff;transform:translateY(-1px);
}
.dny-icon{width:18px;height:18px;display:block;flex-shrink:0}
.dny-action-btn__lbl{white-space:nowrap}
.dny-caret{font-size:10px;opacity:0.7;margin-left:2px}

/* 💎 开通会员(顶栏 upsell CTA):珊瑚红 / 玫瑰红,跟下载客户端的橙色区分开 */
.dny-action-btn--upsell{
  background:linear-gradient(135deg,#f43f5e,#be123c);
  border-color:transparent;color:#fff;
  font-weight:700;
  box-shadow:0 4px 14px rgba(190,18,60,0.42);
}
.dny-action-btn--upsell:hover{
  box-shadow:0 7px 22px rgba(190,18,60,0.62);
  color:#fff;transform:translateY(-2px);
}
.dny-action-btn--upsell .dny-action-btn__gem{
  font-size:14px;display:inline-block;animation:dnyGemShine 2.4s ease-in-out infinite;
}
@keyframes dnyGemShine{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.1)}}

/* 主 CTA:下载客户端 - 橙金色高亮 */
.dny-action-btn--cta{
  background:linear-gradient(135deg,#fb923c,#ea580c);
  border-color:transparent;color:#fff;
  font-weight:700;
  box-shadow:0 4px 14px rgba(234,88,12,0.35);
}
.dny-action-btn--cta:hover{
  box-shadow:0 7px 22px rgba(234,88,12,0.55);
  color:#fff;
  transform:translateY(-2px);
}

/* 图标按钮(在线客服):正方形,绿色调 */
.dny-action-btn--icon{
  width:38px;padding:0;
  background:rgba(34,197,94,0.12);
  border-color:rgba(34,197,94,0.32);
  color:#86efac;
}
.dny-action-btn--icon:hover{
  background:rgba(34,197,94,0.22);
  color:#fff;
  box-shadow:0 4px 14px rgba(34,197,94,0.3);
}

/* 用户菜单按钮 + 下拉 */
.dny-user-menu{position:relative}
.dny-action-btn--user.is-open{
  background:rgba(255,255,255,0.12);color:#fff;
}
.dny-action-btn--user.is-open .dny-caret{transform:rotate(180deg)}
.dny-caret{transition:transform .15s ease;display:inline-block}

.dny-user-menu__panel{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:220px;
  background:rgba(15,23,42,0.98);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  padding:6px;
  box-shadow:0 12px 40px rgba(0,0,0,0.5),0 2px 8px rgba(0,0,0,0.25);
  /* 在顶栏 stacking context 内尽量抬高，避免被子元素（徽章等）意外压住 */
  z-index:9999;
  animation:dnyMenuIn .15s ease-out;
}
@keyframes dnyMenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.dny-user-menu__panel[hidden]{display:none}

.dny-user-menu__item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:9px;
  color:#e2e8f0;font-size:13px;font-weight:500;
  text-decoration:none;
  transition:background .12s ease;
  cursor:pointer;
}
.dny-user-menu__item:hover{background:rgba(255,255,255,0.08);color:#fff}
.dny-user-menu__item.is-current{background:rgba(251,191,36,0.12);color:#fde68a}
.dny-user-menu__item.is-cta{
  background:linear-gradient(135deg,#fb923c,#ea580c);
  color:#fff;font-weight:700;margin-top:4px;
}
.dny-user-menu__item.is-cta:hover{box-shadow:0 4px 14px rgba(234,88,12,0.45);color:#fff}
.dny-user-menu__item.is-danger{color:rgba(252,165,165,0.85)}
.dny-user-menu__item.is-danger:hover{background:rgba(239,68,68,0.15);color:#fecaca}
.dny-user-menu__sep{height:1px;background:rgba(255,255,255,0.08);margin:6px 0}

/* 菜单项前置 icon(用 ::before + data-ico 文字化) */
.dny-user-menu__ico{
  width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;color:rgba(226,232,240,0.6);flex-shrink:0;
}
.dny-user-menu__ico::before{content:""}
.dny-user-menu__ico[data-ico="user"]::before{content:"👤"}
.dny-user-menu__ico[data-ico="bell"]::before{content:"🔔"}
.dny-user-menu__ico[data-ico="handshake"]::before{content:"🤝"}
.dny-user-menu__ico[data-ico="play"]::before{content:"🎮"}
.dny-user-menu__ico[data-ico="login"]::before{content:"→"}
.dny-user-menu__ico[data-ico="register"]::before{content:"✨"}
.dny-user-menu__ico[data-ico="logout"]::before{content:"⎋"}
.dny-user-menu__ico[data-ico="trash"]::before{content:"⚠"}

/* 在线客服未读小红点 */
.dny-chat-badge{
  position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;
  background:#ef4444;color:#fff;
  font-size:10px;font-weight:700;line-height:16px;text-align:center;
  border-radius:999px;border:2px solid #0f172a;
  box-shadow:0 0 0 1px rgba(239,68,68,0.5);
  animation:dnyChatPulse 1.4s ease-in-out infinite;
}
@keyframes dnyChatPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.dny-chat-badge[hidden]{display:none}

/* 移动端 < 720px:隐藏「下载客户端」文字,只保留图标;隐藏部分次要 nav */
@media (max-width:900px){
  .dny-topbar-inner{padding:8px 12px;gap:8px}
  .dny-action-btn{padding:0 10px;height:36px;font-size:12px}
  .dny-action-btn__lbl{display:none}
  .dny-action-btn--cta .dny-action-btn__lbl{display:inline}
  .dny-nav-item{padding:7px 10px;font-size:13px}
}
@media (max-width:640px){
  .dny-topbar-inner{flex-wrap:wrap;justify-content:space-between}
  .dny-topbar-nav{order:2;width:100%;justify-content:center;padding-top:6px;border-top:1px solid rgba(255,255,255,0.06);margin-top:6px}
  .dny-nav-item{padding:6px 9px;font-size:12px}
  .dny-action-btn--cta .dny-action-btn__lbl{display:none}
}

/* ============================================================
 *  (旧顶栏样式 — 已不再渲染,但保留兼容老页面备用)
 * ============================================================ */
/* 顶栏第二行:站点导航(紧随主按钮,仍在 hero 内)
 * flex 容器允许「身份组」用 margin-left:auto 推到最右,实现三段式布局
 *   ┌─────────────────────────────────────────────────────────────┐
 *   │ [商城][合作商][娱乐][公告] [在线客服]    [用户中心][登录][注册] │
 *   │   组 1:入口/社区        组 2:支持      组 3:身份(右对齐)    │
 *   └─────────────────────────────────────────────────────────────┘
 */
.hero-actions--subnav {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  gap: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.hero-actions--subnav .hero-btn--subnav:hover {
  transform: translateY(-1px);
}

/* 身份组的第一个按钮(用户中心),用 margin-left:auto 把它和之后的按钮全部推到最右 */
.hero-actions--subnav .hero-btn--group-right {
  margin-left: auto;
}

/* 在线客服:绿色调,稍突出(它带未读徽章) */
.hero-banner--sticky-bar .hero-actions--subnav .hero-btn.hero-btn--subnav-support {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.45);
  color: #b9f8d0;
}
.hero-banner--sticky-bar .hero-actions--subnav .hero-btn.hero-btn--subnav-support:hover {
  background: rgba(34, 197, 94, 0.28);
  color: #fff;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.28);
}

/* 退出 / 注销:弱化样式(避免误点导致注销) */
.hero-banner--sticky-bar .hero-actions--subnav .hero-btn.hero-btn--subnav-subdued {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  padding: 6px 11px;
}
.hero-banner--sticky-bar .hero-actions--subnav .hero-btn.hero-btn--subnav-subdued:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fecaca;
}

/* 子栏「注册」CTA:橙色高亮(转化) */
.hero-banner--sticky-bar .hero-actions--subnav .hero-btn.hero-btn--subnav-cta {
  background: linear-gradient(135deg, #fbbf24, #f97316);
  border-color: transparent;
  color: #1f1300;
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(249, 115, 22, 0.35);
}
.hero-banner--sticky-bar .hero-actions--subnav .hero-btn.hero-btn--subnav-cta:hover {
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.5);
  color: #000;
}

/* 主栏 CTA(📥 下载客户端):橙色高亮(已经有 #hero-install-btn 的样式,这里加 cta 标识做补充) */
.hero-banner--sticky-bar .hero-actions:not(.hero-actions--subnav) .hero-btn.hero-btn--cta {
  background: linear-gradient(135deg, #fb923c, #ea580c);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.38);
}
.hero-banner--sticky-bar .hero-actions:not(.hero-actions--subnav) .hero-btn.hero-btn--cta:hover {
  box-shadow: 0 7px 22px rgba(234, 88, 12, 0.55);
}

/* 移动端:窄屏时身份组取消右对齐,正常折行 */
@media (max-width: 700px) {
  .hero-actions--subnav .hero-btn--group-right {
    margin-left: 0;
  }
}

.hero-bar-extra {
  font-size: 12px;
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.88);
}

.hero-bar-extra a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
}

.hero-bar-extra a:hover {
  color: #fff;
}

.hero-bar-extra .sep {
  color: rgba(255, 255, 255, 0.42);
  margin: 0 6px;
  user-select: none;
}

body.has-sticky-site-bar .uc-sidebar {
  top: 220px;
}

@media (max-width: 768px) {
  body.has-sticky-site-bar .uc-sidebar {
    top: 12px;
  }
}

.ai-quota-after-bar {
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 16px 0;
}

.partners-toolbar-title {
  flex: 1 0 100%;
  margin: 12px 0 10px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}
.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 245, 220, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(200, 205, 215, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

.hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 16px;
  text-align: center;
}

.hero-title {
  margin: 0 0 14px;
  font-family: "ZCOOL XiaoWei", "Ma Shan Zheng", "ZCOOL KuaiLe", "STKaiti", "KaiTi", cursive, serif;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 700;
  color: transparent;
  background: linear-gradient(135deg, #ffd700 0%, #fff 40%, #ffd700 70%, #f8c471 100%);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.08em;
  text-shadow: 0 0 40px rgba(255,215,0,.25);
  position: relative;
}

.hero-title--image {
  background: none;
  color: inherit;
  letter-spacing: 0;
  text-shadow: none;
}

.hero-title-image-link {
  display: inline-block;
  max-width: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.hero-title-image-link:hover .hero-title-image {
  opacity: 0.9;
}

.hero-title-image-link:focus-visible {
  outline: 2px solid rgba(255, 215, 0, 0.75);
  outline-offset: 4px;
  border-radius: 6px;
}

.hero-title-image {
  display: block;
  width: min(100%, 900px);
  height: auto;
  margin: 0 auto;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-btn {
  display: inline-block;
  padding: 12px 30px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  background: linear-gradient(135deg, #4a454c, #36333a);
  color: #faf8f5;
  border: 2px solid rgba(255, 250, 235, 0.32);
  cursor: pointer;
  transition: all .25s ease;
}

.hero-btn:hover {
  background: linear-gradient(135deg, #5c565f, #423e46);
  border-color: rgba(255, 224, 170, 0.55);
  text-decoration: none;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(0,0,0,.24);
}

/* 首页 Hero 区四个主按钮：统一为深蓝玻璃渐变（覆盖全局 a 色与 .hero-btn 酒红底） */
.hero-actions .hero-btn:link,
.hero-actions .hero-btn:visited {
  color: #f4f7ff;
  text-decoration: none;
}

.hero-actions .hero-btn {
  border-color: rgba(255, 250, 235, 0.38);
  background: linear-gradient(135deg, rgba(58, 54, 62, 0.88), rgba(36, 34, 40, 0.82));
  color: #faf8f5;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter: blur(1px);
}

.hero-actions .hero-btn:hover {
  background: linear-gradient(135deg, rgba(72, 68, 78, 0.92), rgba(44, 42, 50, 0.88));
  border-color: rgba(255, 220, 160, 0.5);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255,255,255,0.16);
  transform: translateY(-1px);
}

.hero-btn--outline {
  background: transparent;
  color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.35);
}

.hero-btn--outline:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
  border-color: rgba(255,255,255,.6);
  text-decoration: none;
  box-shadow: none;
}

/* —— 全站吸顶顶栏：主按钮 — 厚重金属 / 层次高光（覆盖上方通用 .hero-actions .hero-btn） —— */
.hero-banner--sticky-bar .hero-inner--sticky-bar {
  position: relative;
  z-index: 1;
}

.hero-banner--sticky-bar .hero-actions:not(.hero-actions--subnav) .hero-btn {
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.07em;
  border-radius: 12px;
  border: 1px solid rgba(255, 250, 235, 0.22);
  border-top-color: rgba(255, 255, 255, 0.38);
  border-left-color: rgba(220, 210, 195, 0.24);
  color: #faf8f5;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  background: linear-gradient(
    165deg,
    rgba(92, 88, 98, 0.95) 0%,
    rgba(52, 48, 56, 0.97) 38%,
    rgba(28, 26, 32, 1) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 -1px 0 rgba(0, 0, 0, 0.4) inset,
    0 10px 28px rgba(0, 0, 0, 0.38),
    0 3px 8px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.hero-banner--sticky-bar .hero-actions:not(.hero-actions--subnav) .hero-btn:hover {
  color: #ffffff;
  text-decoration: none;
  border-color: rgba(255, 215, 150, 0.55);
  border-top-color: rgba(255, 240, 200, 0.48);
  background: linear-gradient(
    165deg,
    rgba(110, 105, 118, 0.98) 0%,
    rgba(62, 58, 68, 0.98) 42%,
    rgba(36, 34, 42, 1) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 -1px 0 rgba(0, 0, 0, 0.38) inset,
    0 0 0 1px rgba(220, 185, 120, 0.28),
    0 14px 32px rgba(0, 0, 0, 0.42),
    0 6px 14px rgba(0, 0, 0, 0.28);
  transform: translateY(-2px);
}

.hero-banner--sticky-bar .hero-actions:not(.hero-actions--subnav) .hero-btn.hero-btn--stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.hero-banner--sticky-bar .hero-actions:not(.hero-actions--subnav) .hero-btn .hero-btn__hint {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  opacity: 0.78;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.hero-banner--sticky-bar .hero-actions:not(.hero-actions--subnav) .hero-btn.hero-btn--current .hero-btn__hint {
  opacity: 0.88;
}

.hero-banner--sticky-bar .hero-actions:not(.hero-actions--subnav) .hero-btn.hero-btn--current {
  border-color: rgba(255, 215, 0, 0.65) !important;
  border-top-color: rgba(255, 240, 180, 0.55) !important;
  color: #fffef8 !important;
  background: linear-gradient(
    165deg,
    rgba(75, 58, 28, 0.95) 0%,
    rgba(45, 36, 18, 0.98) 45%,
    rgba(22, 18, 10, 1) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 230, 160, 0.22) inset,
    0 -1px 0 rgba(0, 0, 0, 0.5) inset,
    0 0 0 1px rgba(255, 200, 80, 0.35),
    0 0 24px rgba(255, 200, 80, 0.18),
    0 10px 26px rgba(0, 0, 0, 0.4);
}

/* —— 吸顶顶栏：子导航 — 略轻一档，胶囊形磨砂 —— */
.hero-banner--sticky-bar .hero-actions--subnav .hero-btn.hero-btn--subnav {
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 999px;
  border: 1px solid rgba(255, 250, 240, 0.18);
  border-top-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 252, 248, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  background: linear-gradient(
    180deg,
    rgba(58, 54, 62, 0.9) 0%,
    rgba(32, 30, 36, 0.95) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 -1px 0 rgba(0, 0, 0, 0.32) inset,
    0 4px 14px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.hero-banner--sticky-bar .hero-actions--subnav .hero-btn.hero-btn--subnav:hover {
  color: #fff;
  border-color: rgba(255, 220, 170, 0.38);
  background: linear-gradient(
    180deg,
    rgba(72, 68, 78, 0.92) 0%,
    rgba(40, 38, 46, 0.98) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 6px 18px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

.hero-banner--sticky-bar .hero-actions--subnav .hero-btn.hero-btn--subnav.hero-btn--current {
  border-color: rgba(255, 215, 0, 0.5) !important;
  color: #fffbeb !important;
  background: linear-gradient(
    180deg,
    rgba(58, 48, 28, 0.92) 0%,
    rgba(32, 26, 16, 0.98) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 220, 140, 0.18) inset,
    0 0 0 1px rgba(255, 200, 80, 0.25),
    0 4px 16px rgba(0, 0, 0, 0.28);
}

/* —— /2fa/ 极域2FA（与 AI 子面板同系：亚麻 + 金丝画框 + 紫按钮） —— */
body.ai-tools-body.page-2fa {
  color: var(--ai-ink);
  background: var(--bg);
}

body.ai-tools-body.page-2fa .twofa-page-wrap {
  max-width: 2700px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 16px 24px;
  box-sizing: border-box;
}

body.ai-tools-body.page-2fa-embed {
  margin: 0;
  min-height: 0;
  padding: 2px 4px 0;
  background: var(--bg);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

body.ai-tools-body.page-2fa-embed .media-extract-lead.twofa-intro {
  margin-bottom: 10px;
  padding: 12px 14px;
  font-size: 1.05rem;
  line-height: 1.55;
}

body.ai-tools-body.page-2fa-embed .twofa-result {
  margin: 10px 0 8px;
}

body.ai-tools-body.page-2fa-embed .twofa-actions {
  margin-bottom: 0;
  padding-bottom: 0;
}

body.ai-tools-body.page-2fa-embed .twofa-qr {
  padding: 8px 0 2px;
}

body.ai-tools-body.page-2fa:not(.page-2fa-embed) .ai-twofa-shell .media-extract-lead.twofa-intro {
  margin-top: 4px;
}

body.ai-tools-body.page-2fa .ai-twofa-shell .twofa-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--ai-ink);
  margin-bottom: 6px;
}

body.ai-tools-body.page-2fa .ai-twofa-shell .twofa-input,
body.ai-tools-body.page-2fa .ai-twofa-shell .twofa-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 12px;
  border: 1px solid var(--ai-gold-mute);
  background: linear-gradient(180deg, #e4e0d8 0%, #d8d2c6 100%);
  color: var(--ai-ink);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  box-shadow: inset 0 1px 0 rgba(236, 232, 224, 0.5);
}

body.ai-tools-body.page-2fa .ai-twofa-shell .twofa-input:focus,
body.ai-tools-body.page-2fa .ai-twofa-shell .twofa-textarea:focus {
  outline: none;
  border-color: var(--ai-gold-mute-strong);
  box-shadow:
    inset 0 1px 0 rgba(238, 234, 226, 0.45),
    0 0 0 3px var(--ai-accent-ring);
}

body.ai-tools-body.page-2fa .ai-twofa-shell .twofa-textarea {
  resize: vertical;
  min-height: 52px;
  line-height: 1.45;
}

body.ai-tools-body.page-2fa .ai-twofa-shell .twofa-field {
  margin-bottom: 14px;
}

body.ai-tools-body.page-2fa .twofa-err {
  margin: 0 0 12px;
  padding: 10px 12px;
  font-size: 13px;
  border-radius: 12px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.22);
  color: #b91c1c;
}

body.ai-tools-body.page-2fa .twofa-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0 16px;
}

body.ai-tools-body.page-2fa .twofa-result__item {
  padding: 14px 14px;
  border-radius: 12px;
  border: 1px solid var(--ai-gold-mute-soft);
  background: linear-gradient(180deg, #f0ebe0 0%, #e5dfd2 100%);
  box-shadow: inset 0 1px 0 rgba(228, 222, 210, 0.55);
}

body.ai-tools-body.page-2fa button.twofa-result__item--copy {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.2s ease;
}

body.ai-tools-body.page-2fa button.twofa-result__item--copy:hover {
  border-color: var(--ai-gold-mute);
  box-shadow:
    inset 0 1px 0 rgba(228, 222, 210, 0.55),
    0 2px 10px rgba(22, 18, 12, 0.08);
}

body.ai-tools-body.page-2fa button.twofa-result__item--copy:focus {
  outline: none;
}

body.ai-tools-body.page-2fa button.twofa-result__item--copy:focus-visible {
  outline: 2px solid var(--ai-accent-ring);
  outline-offset: 2px;
}

body.ai-tools-body.page-2fa button.twofa-result__item--copy.is-copied {
  border-color: rgba(61, 122, 79, 0.42);
  background: linear-gradient(180deg, #e8f2ec 0%, #dce8e0 100%);
}

body.ai-tools-body.page-2fa .twofa-copy-hint {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ai-dim);
  letter-spacing: 0.04em;
}

body.ai-tools-body.page-2fa button.twofa-result__item--copy.is-copied .twofa-copy-hint {
  color: #3d7a4f;
}

body.ai-tools-body.page-2fa .twofa-result__k {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ai-dim);
  margin-bottom: 8px;
}

body.ai-tools-body.page-2fa .twofa-code {
  font-size: 1.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--ai-ink);
}

body.ai-tools-body.page-2fa .twofa-remain {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ai-ink);
}

body.ai-tools-body.page-2fa .twofa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
  align-items: center;
}

body.ai-tools-body.page-2fa .twofa-actions .twofa-btn {
  flex: 1 1 auto;
  min-width: 140px;
}

body.ai-tools-body.page-2fa .twofa-qr {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
}

body.ai-tools-body.page-2fa .twofa-qr canvas {
  border-radius: 12px;
  border: 1px solid var(--ai-gold-mute);
  background: #fff;
  box-shadow: 0 2px 10px rgba(22, 18, 12, 0.08);
}

body.ai-tools-body.page-2fa .twofa-hr {
  margin: 20px 0 14px;
  border: none;
  border-top: 1px dashed var(--ai-gold-mute-soft);
}

body.ai-tools-body.page-2fa .twofa-btn-danger {
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid rgba(185, 28, 28, 0.35);
  background: rgba(254, 226, 226, 0.5);
  color: #991b1b;
  cursor: pointer;
  font-family: inherit;
}

body.ai-tools-body.page-2fa .twofa-btn-danger:hover {
  background: rgba(254, 202, 202, 0.65);
}

@media (max-width: 520px) {
  body.ai-tools-body.page-2fa .twofa-result {
    grid-template-columns: 1fr;
  }
}

/* 极域 AI 页：2FA 标签内嵌 iframe */
body.ai-tools-body .ai-2fa-frame-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 4px 4px;
  box-sizing: border-box;
  overflow: hidden;
}

body.ai-tools-body .ai-2fa-iframe {
  width: 100%;
  min-height: 0;
  height: 480px;
  border: none;
  border-radius: 18px;
  display: block;
  background: transparent;
  vertical-align: top;
  overflow: hidden;
}

/* 画像素描：内嵌子页与独立页 */
body.ai-tools-body.page-pixel-sketch-embed {
  margin: 0;
  min-height: 0;
  padding: 12px 12px 20px;
  background: var(--bg);
  box-sizing: border-box;
}

.pixel-sketch-embed .pixel-sketch-quota {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.pixel-sketch-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 14px;
}

.pixel-sketch-toolbar__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai-dim, #6b7a8e);
}

.pixel-sketch-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pixel-color-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  background: var(--sw, #333);
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: transform 0.1s;
}

.pixel-color-btn:hover {
  transform: scale(1.08);
}

.pixel-color-btn.is-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ai-accent, #6d4cc6);
}

.pixel-canvas-wrap {
  line-height: 0;
  display: inline-block;
  max-width: 100%;
}

.pixel-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 4px 20px rgba(0, 0, 0, 0.07);
  cursor: crosshair;
  touch-action: none;
  vertical-align: top;
  background: #faf8f5;
}

body.ai-tools-body .ai-pixel-sketch-frame-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 4px 4px;
  box-sizing: border-box;
  overflow: hidden;
}

body.ai-tools-body .ai-pixel-sketch-iframe {
  width: 100%;
  min-height: 0;
  height: 480px;
  border: none;
  border-radius: 18px;
  display: block;
  background: rgba(248, 246, 252, 0.45);
  vertical-align: top;
  overflow: hidden;
}

body.ai-tools-body.page-pixel-sketch .pixel-sketch-page-wrap {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 16px 28px;
  box-sizing: border-box;
}

body.ai-tools-body .pixel-sketch-standalone-iframe {
  width: 100%;
  min-height: 520px;
  height: 640px;
  border: none;
  border-radius: 18px;
  display: block;
  background: rgba(248, 246, 252, 0.5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.pixel-sketch-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pixel-sketch-file-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ai-ink);
}

.pixel-sketch-file-label input[type="file"] {
  max-width: 100%;
}

.pixel-preview-wrap {
  margin: 0;
}

.pixel-preview-label {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.pixel-preview-img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.pixel-sketch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pixel-sketch-status {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.pixel-sketch-summary {
  margin: 14px 0 8px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ai-ink);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 12px;
}

.pixel-sketch-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.pixel-sketch-grid-lead {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.5;
  color: #4a4a4a;
}

.pixel-step-card {
  margin: 0;
  padding: 10px 10px 12px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.pixel-step-card__t {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ai-ink);
}

.pixel-step-card__sub {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 500;
  color: #6b6b6b;
}

.pixel-step-card__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  background: #f0f0f0;
}

.pixel-step-card__err {
  margin: 0;
  font-size: 12px;
  color: #b42318;
}

/* —— 官方公告页：高级感版式 —— */
body.page-announcement {
  background: linear-gradient(165deg, #eef0f5 0%, #e4e7ee 38%, #f2f0f4 100%);
}

.announcement-page {
  position: relative;
  padding: clamp(36px, 7vw, 80px) 20px 56px;
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.announcement-page__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(228, 57, 60, 0.09), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 30%, rgba(15, 35, 66, 0.06), transparent 50%),
    radial-gradient(ellipse 50% 35% at 0% 80%, rgba(142, 36, 68, 0.05), transparent 45%);
}

.announcement-page__wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
}

.announcement-page__hero {
  text-align: center;
  margin-bottom: 28px;
}

.announcement-page__kicker {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #8b92a1;
}

.announcement-page__title {
  margin: 0 0 12px;
  font-size: clamp(1.65rem, 4.2vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #12151c;
  background: linear-gradient(120deg, #1a1d24 0%, #3d4452 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports not (background-clip: text) {
  .announcement-page__title {
    background: none;
    -webkit-text-fill-color: inherit;
    color: #12151c;
  }
}

.announcement-page__lead {
  margin: 0 auto;
  max-width: 38em;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.announcement-page__panel {
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.55) 40%,
    rgba(228, 57, 60, 0.12) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 24px 48px -28px rgba(15, 23, 42, 0.28),
    0 8px 24px -12px rgba(15, 35, 66, 0.12);
}

.announcement-page__panel-inner {
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 28px 26px 22px;
  border: 1px solid rgba(255, 255, 255, 0.75);
}

.announcement-page__status {
  margin: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  line-height: 1.65;
  color: #4a5568;
  letter-spacing: 0.02em;
}

.announcement-page__status:empty {
  display: none;
}

.announcement-page__panel-foot {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(226, 230, 237, 0.95);
  display: flex;
  justify-content: center;
}

.announcement-page__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid rgba(228, 57, 60, 0.35);
  background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.announcement-page__btn:hover {
  color: var(--accent-hover);
  border-color: rgba(199, 47, 50, 0.55);
  box-shadow: 0 6px 20px -8px rgba(228, 57, 60, 0.45);
  transform: translateY(-1px);
}

.announcement-page__btn:active {
  transform: translateY(0);
}

@media (max-width: 520px) {
  .announcement-page__panel-inner {
    padding: 22px 18px 18px;
  }

  .announcement-page__lead {
    font-size: 13px;
  }
}

/* ─── 全站顶栏：「📥 下载客户端」按钮（粉紫渐变 pill） ─── */
#hero-install-btn,
a#hero-install-btn,
nav.user-topbar-links a#hero-install-btn {
  background: linear-gradient(135deg, #ec4899, #a855f7) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.28) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}

#hero-install-btn:hover,
a#hero-install-btn:hover,
nav.user-topbar-links a#hero-install-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 6px 16px rgba(236, 72, 153, 0.42) !important;
}

#hero-install-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ─── 极域 AI 流式输出：打字机光标 + 入场过渡 ─── */
.ai-msg--streaming::after {
  content: "▍";
  display: inline-block;
  margin-left: 1px;
  color: rgba(20, 100, 220, 0.7);
  animation: dnyAiStreamingCaret 1s steps(1) infinite;
  font-weight: 600;
}

@keyframes dnyAiStreamingCaret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ─── 极域 AI · 临时邮箱助手（#panel-mail-tm）排版 ─── */
body.ai-tools-body #panel-mail-tm > .ai-translate-shell.ai-jiyu-platinum-shell {
  max-height: min(880px, calc(100vh - 120px));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.28) rgba(0, 0, 0, 0.06);
  -webkit-overflow-scrolling: touch;
}

body.ai-tools-body #panel-mail-tm > .ai-translate-shell.ai-jiyu-platinum-shell::-webkit-scrollbar {
  width: 10px;
}

body.ai-tools-body #panel-mail-tm > .ai-translate-shell.ai-jiyu-platinum-shell::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
}

body.ai-tools-body #panel-mail-tm > .ai-translate-shell.ai-jiyu-platinum-shell::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

body.ai-tools-body #panel-mail-tm > .ai-translate-shell.ai-jiyu-platinum-shell::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.32);
  background-clip: padding-box;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-tool {
  padding: 8px 4px 20px;
  text-align: left;
}

@media (min-width: 640px) {
  body.ai-tools-body #panel-mail-tm .dny-mailtm-tool {
    padding: 12px 14px 28px;
  }
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-hero {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-hero__title {
  margin: 0 0 10px;
  font-size: clamp(1.12rem, 2.4vw, 1.32rem);
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-hero__lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-panel {
  margin-bottom: 14px;
  padding: 14px 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

@media (min-width: 640px) {
  body.ai-tools-body #panel-mail-tm .dny-mailtm-panel {
    padding: 16px 18px 18px;
  }
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-panel__title {
  margin: 0 0 10px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: inherit;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-panel__desc {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-fieldstack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-input-full {
  width: 100%;
  max-width: 560px;
  box-sizing: border-box;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-actions--tight {
  margin-top: 8px;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-check {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-hintline {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  max-width: 52rem;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-listwrap {
  margin-top: 12px;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-otpwrap {
  margin-top: 10px;
  font-size: 14px;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-detailwrap {
  margin-top: 12px;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-iframe {
  width: 100%;
  min-height: 520px;
  margin-top: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #fff;
  display: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-iframe--compact {
  min-height: 420px;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-more-grid {
  display: grid;
  gap: 18px;
  margin-top: 4px;
}

@media (min-width: 880px) {
  body.ai-tools-body #panel-mail-tm .dny-mailtm-more-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    align-items: start;
    gap: 22px 28px;
  }
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-subcap {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: inherit;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-subcap__hint {
  font-weight: 400;
  opacity: 0.72;
  font-size: 12px;
  margin-left: 6px;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-extlinks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 520px) {
  body.ai-tools-body #panel-mail-tm .dny-mailtm-extlinks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-extlinks__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.55);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-extlinks__item:hover {
  border-color: rgba(99, 102, 241, 0.45);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.12);
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-extlinks__name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-extlinks__meta {
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.78;
}

/* —— 全部临时邮服务:紧凑网格按钮 —— */
body.ai-tools-body #panel-mail-tm .dny-mailtm-subcap--more {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
}
body.ai-tools-body #panel-mail-tm .dny-mailtm-all-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.ai-tools-body #panel-mail-tm .dny-mailtm-cat {
  margin: 0;
}
body.ai-tools-body #panel-mail-tm .dny-mailtm-cat__title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  gap: 8px;
}
body.ai-tools-body #panel-mail-tm .dny-mailtm-cat__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0));
}
body.ai-tools-body #panel-mail-tm .dny-mailtm-cat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}

/* 带 2 行说明的卡片网格(替代单行 chip) */
body.ai-tools-body #panel-mail-tm .dny-mailtm-cat__grid--cards {
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 8px;
}
body.ai-tools-body #panel-mail-tm .dny-mailtm-card2 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 12px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: rgba(255, 255, 255, 0.6);
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
body.ai-tools-body #panel-mail-tm .dny-mailtm-card2:hover {
  border-color: rgba(99, 102, 241, 0.55);
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(99, 102, 241, 0.16);
}
body.ai-tools-body #panel-mail-tm .dny-mailtm-card2:active { transform: translateY(1px); }
body.ai-tools-body #panel-mail-tm .dny-mailtm-card2::after {
  content: "↗";
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 10px;
  opacity: 0.35;
  transition: opacity 0.15s ease, color 0.15s ease;
}
body.ai-tools-body #panel-mail-tm .dny-mailtm-card2:hover::after {
  opacity: 1;
  color: rgba(99, 102, 241, 0.95);
}
body.ai-tools-body #panel-mail-tm .dny-mailtm-card2__host {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.3;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: rgba(0, 0, 0, 0.86);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 14px;
}
body.ai-tools-body #panel-mail-tm .dny-mailtm-card2:hover .dny-mailtm-card2__host {
  color: rgba(99, 102, 241, 1);
}
body.ai-tools-body #panel-mail-tm .dny-mailtm-card2__desc {
  font-size: 11.5px;
  line-height: 1.4;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-card {
  padding: 14px 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.58);
  margin-bottom: 12px;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-more-col--tools .dny-mailtm-card:last-child {
  margin-bottom: 0;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-card__title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-card__desc {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.55;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-formrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-formrow__input {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 100%;
}

body.ai-tools-body #panel-mail-tm .dny-mailtm-formrow__btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ===== 极域 AI · 货币兑换小工具 ===== */
/* ============ FX 货币汇率小工具 · 金融专业风 ============ */
/*  设计 token:
    - 深海军蓝 #0f1a2d 主文字,#1e3a5f 强调
    - 银灰 #64748b 次文字,#cbd5e1 描边,#f8fafc 内嵌底
    - 仅在异常/警告态出现红 #dc2626、绿 #16a34a;常态全中性
    - 数字用 tabular-nums + 等宽,模拟终端读数
*/
.dny-fx-widget {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 5px 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow:
    0 1px 0 #f1f5f9 inset,
    0 6px 18px -10px rgba(15, 26, 45, 0.12),
    0 1px 2px rgba(15, 26, 45, 0.04);
  font-size: 13px;
  line-height: 1.25;
  color: #0f1a2d;
  font-feature-settings: "tnum" 1, "ss01" 1;
  min-height: 42px;
  box-sizing: border-box;
}
.dny-fx-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.dny-fx-row-inline { gap: 8px; }
.dny-fx-row + .dny-fx-row { margin-top: 6px; }

.dny-fx-pill {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 14px 6px 12px;
  min-height: 30px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f1a2d;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  box-shadow: 0 1px 0 rgba(15, 26, 45, 0.04);
}
.dny-fx-pill:hover {
  border-color: #1e3a5f;
  background: #f8fafc;
}
.dny-fx-pill[aria-expanded="true"] {
  border-color: #1e3a5f;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}
.dny-fx-pill .lbl {
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #0f1a2d;
}
.dny-fx-pill .cd {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.dny-fx-caret {
  margin-left: 2px;
  font-size: 8px;
  color: #94a3b8;
  line-height: 1;
}

/* 「兑」字小徽章:用作 from/to 间分隔 */
.dny-fx-eq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.4px;
  user-select: none;
  border: 1px solid #e2e8f0;
}
.dny-fx-eq--swap {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dny-fx-eq--swap:hover {
  background: #1e3a5f;
  border-color: #1e3a5f;
  color: #ffffff;
}

/* 金额输入框:浅灰内嵌底,深蓝等宽数字,右对齐 */
.dny-fx-amt {
  width: 100px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f1a2d;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.2px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.dny-fx-amt::placeholder { color: #94a3b8; font-weight: 500; }
.dny-fx-amt:hover { border-color: #94a3b8; }
.dny-fx-amt:focus {
  border-color: #1e3a5f;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}

/* 底注:小字银灰,带个低调圆点前缀,模拟金融页脚标识 (单行布局下作为行内项) */
.dny-fx-foot {
  margin: 0 2px 0 4px;
  padding-left: 8px;
  border-left: 1px solid #e2e8f0;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.dny-fx-foot::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.20);
  flex-shrink: 0;
}
.dny-fx-foot[data-state="loading"]::before { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.22); }
.dny-fx-foot[data-state="error"]::before { background: #dc2626; box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.22); }

/* picker:白卡 + 银灰描边 + 等宽货币码 */
.dny-fx-picker {
  position: fixed;
  z-index: 9999;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 4px;
  box-shadow:
    0 1px 0 #f8fafc inset,
    0 16px 40px -12px rgba(15, 26, 45, 0.25),
    0 4px 10px -4px rgba(15, 26, 45, 0.10);
  display: grid;
  grid-template-columns: repeat(2, 144px);
  gap: 2px;
  max-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
}
.dny-fx-picker[hidden] { display: none; }
.dny-fx-picker button {
  text-align: left;
  background: transparent;
  border: none;
  padding: 7px 10px;
  font-size: 12.5px;
  color: #0f1a2d;
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: 6px;
  letter-spacing: 0.15px;
}
.dny-fx-picker button:hover { background: #f1f5f9; }
.dny-fx-picker button.is-active {
  background: #0f1a2d;
  color: #ffffff;
  font-weight: 700;
}
.dny-fx-picker button.is-active::after {
  content: "✓";
  margin-left: auto;
  font-size: 11px;
  opacity: 0.85;
}

@media (max-width: 540px) {
  .dny-fx-widget { padding: 8px 12px 6px; }
  .dny-fx-amt { width: 96px; font-size: 13px; }
  .dny-fx-picker { grid-template-columns: 1fr; max-width: 220px; }
}

/* ============ 国际黄金现货实时价 ticker (国内股票配色:红涨绿跌) ============ */
/* 颜色 token:up = 红 (中国股市惯例),down = 绿 */
.dny-gold-widget {
  --up: #ef4444;
  --up-soft: rgba(239, 68, 68, 0.12);
  --down: #22c55e;
  --down-soft: rgba(34, 197, 94, 0.14);
  --flat: #cbd5e1;
  --flat-soft: rgba(203, 213, 225, 0.18);
  --ink: #f8fafc;
  --ink-dim: #94a3b8;

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 5px 14px;
  background: linear-gradient(180deg, #0f1117 0%, #1a1d27 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 22px -10px rgba(0, 0, 0, 0.45);
  font-family: ui-sans-serif, -apple-system, "PingFang SC", "Microsoft Yahei", sans-serif;
  font-feature-settings: "tnum" 1;
  min-height: 42px;
  box-sizing: border-box;
  color: var(--ink);
  cursor: default;
  user-select: none;
  transition: background 0.22s ease;
}
/* 跳动时短暂染色:up 染红、down 染绿 */
.dny-gold-widget.is-flash-up {
  animation: dnyGoldFlashUp 0.7s ease-out;
}
.dny-gold-widget.is-flash-down {
  animation: dnyGoldFlashDown 0.7s ease-out;
}
@keyframes dnyGoldFlashUp {
  0%   { background: linear-gradient(180deg, #2a0f12 0%, #3a1820 100%); box-shadow: inset 0 0 0 1px rgba(239,68,68,0.55), 0 8px 22px -8px rgba(239,68,68,0.45); }
  100% { background: linear-gradient(180deg, #0f1117 0%, #1a1d27 100%); }
}
@keyframes dnyGoldFlashDown {
  0%   { background: linear-gradient(180deg, #0e2418 0%, #142e22 100%); box-shadow: inset 0 0 0 1px rgba(34,197,94,0.55), 0 8px 22px -8px rgba(34,197,94,0.45); }
  100% { background: linear-gradient(180deg, #0f1117 0%, #1a1d27 100%); }
}

.dny-gold-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  gap: 4px;
  padding: 4px 12px 4px 0;
  margin: -4px 0;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px 0 0 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.dny-gold-left:hover {
  background: rgba(255, 255, 255, 0.04);
}
.dny-gold-left[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.07);
}
.dny-gold-title {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--ink);
}
.dny-gold-caret {
  font-size: 9px;
  color: var(--ink-dim);
  transform: translateY(-1px);
  transition: transform 0.15s ease;
}
.dny-gold-left[aria-expanded="true"] .dny-gold-caret {
  transform: rotate(180deg) translateY(1px);
}

/* dropdown 菜单 */
.dny-gold-menu {
  position: absolute;
  z-index: 100;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  padding: 5px;
  background: linear-gradient(180deg, #1a1d27 0%, #0f1117 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  box-shadow:
    0 20px 50px -16px rgba(0, 0, 0, 0.6),
    0 4px 12px -4px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dny-gold-menu[hidden] { display: none; }
.dny-gold-menu__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
.dny-gold-menu__item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.dny-gold-menu__item.is-active {
  background: linear-gradient(135deg, rgba(176, 140, 90, 0.20) 0%, rgba(138, 105, 56, 0.30) 100%);
  color: #f5e4c3;
}
.dny-gold-menu__name {
  font-weight: 700;
  letter-spacing: 0.3px;
}
.dny-gold-menu__code {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--ink-dim);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.dny-gold-menu__item.is-active .dny-gold-menu__code {
  color: rgba(245, 228, 195, 0.7);
}
.dny-gold-sub {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--ink-dim);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dny-gold-mkt-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.30);
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.dny-gold-mkt-tag[hidden] { display: none; }
.dny-gold-mkt-tag[data-state="live"]  { background: rgba(34,197,94,0.18); color: #4ade80; border-color: rgba(34,197,94,0.35); }
.dny-gold-mkt-tag[data-state="closed"]{ background: rgba(148,163,184,0.18); color: #cbd5e1; border-color: rgba(148,163,184,0.30); }
.dny-gold-mkt-tag[data-state="pre"], .dny-gold-mkt-tag[data-state="post"] { background: rgba(245,158,11,0.18); color: #fbbf24; border-color: rgba(245,158,11,0.30); }

.dny-gold-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1.1;
}
.dny-gold-row1 {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.dny-gold-price {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.3px;
  color: var(--ink);
  min-width: 78px;
  text-align: right;
  transition: color 0.2s ease;
}
.dny-gold-arrow {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink-dim);
  width: 14px;
  text-align: center;
  transition: color 0.2s ease, transform 0.2s ease;
}
.dny-gold-row2 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-dim);
}
.dny-gold-abs,
.dny-gold-pct { transition: color 0.2s ease; }

/* 按日方向上色 */
.dny-gold-widget[data-trend="up"]   .dny-gold-price,
.dny-gold-widget[data-trend="up"]   .dny-gold-arrow,
.dny-gold-widget[data-trend="up"]   .dny-gold-abs,
.dny-gold-widget[data-trend="up"]   .dny-gold-pct { color: var(--up); }
.dny-gold-widget[data-trend="down"] .dny-gold-price,
.dny-gold-widget[data-trend="down"] .dny-gold-arrow,
.dny-gold-widget[data-trend="down"] .dny-gold-abs,
.dny-gold-widget[data-trend="down"] .dny-gold-pct { color: var(--down); }
.dny-gold-widget[data-trend="flat"] .dny-gold-arrow { color: var(--ink-dim); }

.dny-gold-foot {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.20);
  flex-shrink: 0;
  pointer-events: none;
}
.dny-gold-foot[data-state="loading"] { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22); animation: dnyGoldPulse 1.2s ease-in-out infinite; }
.dny-gold-foot[data-state="error"] { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22); }
@keyframes dnyGoldPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@media (max-width: 540px) {
  .dny-gold-widget { gap: 10px; padding: 8px 12px; }
  .dny-gold-title { font-size: 13px; }
  .dny-gold-price { font-size: 16px; min-width: 64px; }
}

/* ============ 翻译页 Emoji 选择器 ============ */
.ai-translate-emoji-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ai-translate-emoji-btn .emoji-btn__face {
  font-size: 14px;
  line-height: 1;
}
.ai-emoji-panel {
  position: fixed;
  z-index: 10000;
  width: 480px;
  max-width: calc(100vw - 24px);
  max-height: 420px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow:
    0 20px 50px -16px rgba(15, 26, 45, 0.30),
    0 4px 12px -4px rgba(15, 26, 45, 0.10);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 13px;
  color: #0f1a2d;
}
.ai-emoji-panel[hidden] { display: none; }
.ai-emoji-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.ai-emoji-panel__search {
  flex: 1;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  font: inherit;
  font-size: 12.5px;
  color: #0f1a2d;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ai-emoji-panel__search:focus {
  border-color: #1e3a5f;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}
.ai-emoji-panel__close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #64748b;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ai-emoji-panel__close:hover { background: #e2e8f0; color: #0f1a2d; }
.ai-emoji-panel__tabs {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  overflow-x: auto;
  overflow-y: hidden;
  height: 54px;
  min-height: 54px;
  max-height: 54px;
  flex-shrink: 0;
  box-sizing: border-box;
  /* 隐藏横向滚动条:Chrome/Safari + Firefox + IE/Edge */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ai-emoji-panel__tabs::-webkit-scrollbar { height: 0; width: 0; display: none; }
.ai-emoji-tab {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.12s, border-color 0.12s;
}
.ai-emoji-tab:hover { background: #f1f5f9; }
/* 激活态:柔和浅灰底,iOS Picker 风格,不喧宾夺主 */
.ai-emoji-tab.is-active {
  background: rgba(15, 26, 45, 0.08);
  border-color: rgba(15, 26, 45, 0.10);
}
.ai-emoji-panel__grid {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px 10px;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  align-content: start;
}
.ai-emoji-panel__grid::-webkit-scrollbar { width: 8px; }
.ai-emoji-panel__grid::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 8px; }
.ai-emoji-item {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, transform 0.06s;
}
.ai-emoji-item:hover { background: #f1f5f9; }
.ai-emoji-item:active { transform: scale(0.92); }
.ai-emoji-panel__foot {
  margin: 0;
  padding: 6px 12px 8px;
  font-size: 11px;
  color: #64748b;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  letter-spacing: 0.2px;
}
.ai-emoji-panel__empty {
  grid-column: 1 / -1;
  padding: 30px 10px;
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
}
@media (max-width: 540px) {
  .ai-emoji-panel { width: calc(100vw - 24px); }
  .ai-emoji-panel__grid { grid-template-columns: repeat(8, 1fr); }
}

/* ============ 翻译页 常用短语选择器 ============ */
.ai-translate-phrase-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ai-translate-phrase-btn .phrase-btn__face {
  font-size: 14px;
  line-height: 1;
}

.ai-phrase-panel {
  position: fixed;
  z-index: 10000;
  width: 480px;
  max-width: calc(100vw - 24px);
  max-height: 440px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow:
    0 20px 50px -16px rgba(15, 26, 45, 0.30),
    0 4px 12px -4px rgba(15, 26, 45, 0.10);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 13px;
  color: #0f1a2d;
}
.ai-phrase-panel[hidden] { display: none; }
.ai-phrase-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
}
.ai-phrase-panel__search {
  flex: 1;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  font: inherit;
  font-size: 12.5px;
  color: #0f1a2d;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ai-phrase-panel__search:focus {
  border-color: #1e3a5f;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}
.ai-phrase-panel__close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #64748b;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ai-phrase-panel__close:hover { background: #e2e8f0; color: #0f1a2d; }

.ai-phrase-panel__list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 60px;
}
.ai-phrase-panel__list::-webkit-scrollbar { width: 8px; }
.ai-phrase-panel__list::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 8px; }
.ai-phrase-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fbfaf6;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
.ai-phrase-item:hover {
  background: #fff;
  border-color: #1e3a5f;
  box-shadow: 0 2px 6px -3px rgba(15, 26, 45, 0.18);
}
.ai-phrase-item:active { transform: translateY(1px); }
.ai-phrase-item__text {
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.45;
  color: #0f1a2d;
}
.ai-phrase-item__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.ai-phrase-item__act {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.ai-phrase-item__act:hover { background: #e2e8f0; color: #0f1a2d; }
.ai-phrase-item__del:hover { background: #fee2e2; color: #dc2626; }
.ai-phrase-item__edit:hover { background: #dbeafe; color: #1e3a5f; }

/* 编辑模式 */
.ai-phrase-item.is-editing {
  cursor: default;
  background: #fff;
  border-color: #1e3a5f;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}
.ai-phrase-item.is-editing:hover { background: #fff; }
.ai-phrase-item__edit-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-phrase-item__edit-input {
  width: 100%;
  min-height: 44px;
  max-height: 160px;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: #0f1a2d;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ai-phrase-item__edit-input:focus {
  border-color: #1e3a5f;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}
.ai-phrase-item__edit-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.ai-phrase-item__edit-actions button {
  border: 0;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: filter 0.12s, transform 0.06s, background 0.15s;
}
.ai-phrase-item__edit-actions button:active { transform: translateY(1px); }
.ai-phrase-item__edit-save {
  background: linear-gradient(160deg, #2a2f3a 0%, #0b0d12 100%);
  color: #f5e4c3;
  box-shadow: 0 3px 8px -3px rgba(15, 26, 45, 0.45);
}
.ai-phrase-item__edit-save:hover { filter: brightness(1.1); }
.ai-phrase-item__edit-cancel {
  background: #fff;
  color: #0f1a2d;
  border: 1px solid #cbd5e1 !important;
}
.ai-phrase-item__edit-cancel:hover { background: #f1f5f9; }
.ai-phrase-panel__empty {
  padding: 24px 10px;
  text-align: center;
  color: #94a3b8;
  font-size: 12.5px;
  line-height: 1.6;
}

.ai-phrase-panel__editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
}
.ai-phrase-panel__textarea {
  width: 100%;
  resize: vertical;
  min-height: 44px;
  max-height: 120px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: #0f1a2d;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.ai-phrase-panel__textarea:focus {
  border-color: #1e3a5f;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}
.ai-phrase-panel__add {
  align-self: flex-end;
  padding: 6px 16px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(160deg, #2a2f3a 0%, #0b0d12 100%);
  color: #f5e4c3;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 4px 10px -4px rgba(15, 26, 45, 0.45);
  transition: filter 0.12s, transform 0.06s;
}
.ai-phrase-panel__add:hover { filter: brightness(1.1); }
.ai-phrase-panel__add:active { transform: translateY(1px); }
.ai-phrase-panel__add:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
.ai-phrase-panel__foot {
  margin: 0;
  padding: 6px 12px 8px;
  font-size: 11px;
  color: #64748b;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
@media (max-width: 540px) {
  .ai-phrase-panel { width: calc(100vw - 24px); }
}