/* ==========================================================================
   天润 AIGC · 全站统一科技风设计系统（与 wan3.html / multi-frame.html 同源）
   深空黑底 · 青/翠绿渐变 · 动态粒子网格 · 玻璃拟态
   本文件在各页面内联 <style> 之后加载，同优先级下覆盖旧金色主题。
   仅覆盖视觉属性（配色/背景/边框/光影），不改动布局结构。
   ========================================================================== */

:root {
  /* ---- 新科技风 Token ---- */
  --primary: #00CAE0;
  --emerald: #00E5A0;
  --purple: #7850FF;
  --bg0: #06080c;
  --bg1: #0c0f16;
  --bg2: #080a10;
  --card: rgba(20, 24, 32, 0.72);
  --card-solid: #141820;
  --line: rgba(0, 202, 224, 0.14);
  --text: #f5fbff;
  --text-2: rgba(160, 176, 184, 0.92);
  --text-3: rgba(140, 153, 160, 0.66);
  --danger: #ff6b6b;
  --grad: linear-gradient(135deg, #00CAE0 0%, #00E5A0 100%);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- 旧变量名兼容映射（旧页面 var() 自动换肤） ---- */
  --bg-base: #0c0f16;
  --bg-card: rgba(20, 24, 32, 0.72);
  --bg-card-hover: rgba(28, 36, 46, 0.92);
  --border-subtle: rgba(0, 202, 224, 0.14);
  --gold-grad: linear-gradient(135deg, #00CAE0 0%, #00E5A0 100%);
  --gold-bright: #00CAE0;
  --gold-deep: #00E5A0;
  --text-primary: #f5fbff;
  --text-secondary: rgba(176, 192, 200, 0.92);
  --text-tertiary: rgba(140, 153, 160, 0.82);
  --text-muted: rgba(140, 153, 160, 0.55);
  --sidebar-w: 248px;
}

/* ================= 基础 ================= */
html { background: #06080c; }

body {
  background: linear-gradient(180deg, var(--bg0), var(--bg1) 45%, var(--bg2)) !important;
  color: var(--text) !important;
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
}

a { color: var(--primary); }

::placeholder { color: rgba(140, 153, 160, 0.5); }

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(0, 202, 224, 0.22); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0, 202, 224, 0.42); }

/* ================= 动态科技背景（由 tech-theme.js 注入） ================= */
.tech-bg {
  position: fixed; inset: 0; overflow: hidden; z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--bg0), var(--bg1) 45%, var(--bg2));
}
.tech-bg .tb-flow {
  position: absolute; inset: -50%;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg, rgba(0,202,224,.07) 60deg, transparent 120deg,
    rgba(0,229,160,.05) 180deg, transparent 240deg,
    rgba(120,80,255,.06) 300deg, transparent 360deg);
  animation: tbFlow 60s linear infinite;
  /* 常驻合成层：避免超大 conic 纹理在旋转动画中反复光栅化（CPU 大头） */
  will-change: transform; transform: translateZ(0);
}
@keyframes tbFlow { to { transform: rotate(360deg); } }

.tech-bg .tb-orb { position: absolute; border-radius: 50%; filter: blur(8px);
  /* blur 层提升为合成层，transform 动画走 GPU，避免逐帧重新模糊光栅化 */
  will-change: transform; transform: translateZ(0); }
.tech-bg .tb-orb-1 {
  width: 720px; height: 720px; top: -28%; right: -16%;
  background: radial-gradient(circle, rgba(0,202,224,.18) 0%, transparent 70%);
  animation: tbOrb 25s ease-in-out infinite;
}
.tech-bg .tb-orb-2 {
  width: 640px; height: 640px; bottom: -24%; left: -14%;
  background: radial-gradient(circle, rgba(0,229,160,.14) 0%, transparent 70%);
  animation: tbOrb 25s ease-in-out infinite -8s;
}
.tech-bg .tb-orb-3 {
  width: 420px; height: 420px; top: 42%; left: 24%;
  background: radial-gradient(circle, rgba(120,80,255,.12) 0%, transparent 70%);
  animation: tbOrb 25s ease-in-out infinite -16s;
}
@keyframes tbOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(70px, -45px) scale(1.12); }
  50% { transform: translate(-45px, 70px) scale(.92); }
  75% { transform: translate(-70px, -25px) scale(1.08); }
}

.tech-bg .tb-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,202,224,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,202,224,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: tbGrid 10s ease-in-out infinite;
}
@keyframes tbGrid { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.tech-bg .tech-particles { position: absolute; inset: 0; }
.tech-bg .tech-particles span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 10px rgba(0,202,224,.7);
  animation: tbParticle 18s linear infinite;
}
@keyframes tbParticle {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .9; }
  90% { opacity: .9; }
  100% { transform: translate(40px, -140px); opacity: 0; }
}

/* 贝塞尔曲线流光（由 tech-theme.js 仅在功能工具页注入，与 multi-frame.html 背景同源） */
.tech-bg .tb-conn { position: absolute; inset: 0; width: 100%; height: 100%; }
.tech-bg .tb-conn path {
  fill: none; stroke: rgba(0, 229, 160, .15); stroke-width: .4;
  stroke-dasharray: 200; stroke-dashoffset: 200;
  animation: tbLineFlow 12s linear infinite;
}
.tech-bg .tb-conn path.d2 { animation-delay: -4s; }
.tech-bg .tb-conn path.d3 { animation-delay: -8s; stroke: rgba(120, 80, 255, .15); }
@keyframes tbLineFlow {
  0% { stroke-dashoffset: 200; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -200; }
}
@media (prefers-reduced-motion: reduce) {
  .tech-bg .tb-conn path { animation: none; }
}

/* iframe 嵌入（index.html 功能页）降载：流光层不旋转（60s 慢转视觉几乎无感），
   消除切页瞬间超大纹理合成造成的 CPU 尖峰 */
.agn-frame .tech-bg .tb-flow { animation: none; }

/* 内容层抬升到背景之上 */
body > * { position: relative; z-index: 1; }
.tech-bg { z-index: 0; }

/* ================= 应用外壳 / 侧边导航 ================= */
.sidebar {
  background: linear-gradient(180deg, rgba(10, 14, 20, .95), rgba(8, 11, 16, .92)) !important;
  border-right: 1px solid rgba(0, 202, 224, .14) !important;
  box-shadow: inset -1px 0 0 rgba(0, 202, 224, .06), 8px 0 40px rgba(0, 0, 0, .35);
  backdrop-filter: blur(14px);
}
.sidebar::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,202,224,.55), rgba(0,229,160,.4), transparent);
}

.brand-mark {
  background: var(--grad) !important;
  box-shadow: 0 0 0 1px rgba(0,202,224,.35), 0 6px 20px rgba(0,202,224,.35) !important;
}
.brand-name {
  background: linear-gradient(135deg, #ffffff, #9feaf4 60%, var(--primary));
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.brand-tag { color: rgba(0, 202, 224, .75) !important; }

.nav-item { color: var(--text-2); }
.nav-item:hover {
  background: rgba(0, 202, 224, .08) !important;
  color: #dff8fd !important;
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(0,202,224,.20), rgba(0,229,160,.03)) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(0,202,224,.28), 0 0 20px rgba(0,202,224,.12);
}
.nav-item.active::before {
  content: "" !important; position: absolute !important; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px !important; height: 20px !important; border-radius: 0 3px 3px 0;
  background: var(--grad) !important;
  box-shadow: 0 0 12px rgba(0,202,224,.8);
}
.nav-item.active .nav-icon { filter: drop-shadow(0 0 7px rgba(0,202,224,.8)); }
.nav-group-label { color: rgba(0, 202, 224, .45) !important; }

.sidebar-footer {
  border-top: 1px solid rgba(0, 202, 224, .12) !important;
  color: var(--text-3) !important;
}
.sidebar-footer a { color: var(--primary) !important; }
.sidebar-footer b { color: var(--primary) !important; }

.user-badge {
  background: rgba(0, 202, 224, .06) !important;
  border: 1px solid rgba(0, 202, 224, .18) !important;
}
.user-badge .ub-role {
  color: #04222a !important;
  background: var(--grad) !important;
}

/* ================= 顶栏 ================= */
.topbar {
  background: rgba(8, 11, 16, .72) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 202, 224, .12) !important;
}
.crumb { color: var(--text-3) !important; }
.crumb b {
  color: var(--primary) !important; font-weight: 600;
  text-shadow: 0 0 14px rgba(0,202,224,.4);
}
.topbar .back { color: var(--text-2) !important; }
.topbar .back:hover { color: var(--primary) !important; }
.topbar h1 { color: var(--text); }

.menu-toggle {
  display: none;
  background: none; border: none;
  color: var(--text-2) !important;
  font-size: 20px; line-height: 1; cursor: pointer;
  padding: 4px 8px; border-radius: 8px;
}
.menu-toggle:hover { color: var(--primary) !important; background: rgba(0,202,224,.08); }
.mask {
  display: none;
  position: fixed; inset: 0; z-index: 90;
  background: rgba(3, 8, 12, .6) !important;
  backdrop-filter: blur(3px);
}
.mask.show { display: block; }

/* ================= 首页欢迎区 ================= */
.hero {
  background:
    radial-gradient(ellipse at 82% -10%, rgba(0,202,224,.16), transparent 55%),
    radial-gradient(ellipse at 8% 110%, rgba(0,229,160,.12), transparent 55%),
    radial-gradient(ellipse at 50% 0%, rgba(120,80,255,.08), transparent 60%),
    linear-gradient(135deg, rgba(22,28,38,.92) 0%, rgba(12,16,24,.9) 100%) !important;
  border: 1px solid rgba(0,202,224,.18) !important;
  box-shadow: 0 20px 60px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,202,224,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,202,224,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
}
.hero > * { position: relative; z-index: 1; }
.hero-badge {
  color: var(--primary) !important;
  border: 1px solid rgba(0,202,224,.35) !important;
  background: rgba(0,202,224,.08) !important;
  box-shadow: 0 0 18px rgba(0,202,224,.15);
}
.hero h1 {
  background: linear-gradient(135deg, #ffffff 0%, #8fe9f5 45%, var(--primary) 70%, var(--emerald) 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
}
.hero p { color: var(--text-2) !important; }
.stat-num {
  color: var(--primary) !important;
  text-shadow: 0 0 22px rgba(0,202,224,.4);
}
.stat-label { color: var(--text-3) !important; }

.section-title { color: #d7eaf0; }
.section-title::after { background: linear-gradient(90deg, rgba(0,202,224,.3), transparent) !important; }

.tool-card {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  backdrop-filter: blur(6px);
}
.tool-card::before {
  background: radial-gradient(circle at 100% 0%, rgba(0,202,224,.14), transparent 60%) !important;
}
.tool-card:hover {
  border-color: rgba(0,202,224,.4) !important;
  background: rgba(26, 34, 44, .92) !important;
  box-shadow: 0 14px 36px -10px rgba(0,0,0,.6), 0 0 26px rgba(0,202,224,.14) !important;
}
.tool-card-icon {
  background: rgba(0,202,224,.12) !important;
  box-shadow: inset 0 0 0 1px rgba(0,202,224,.2);
}
.tool-card h3 { color: #e6f6fa; }
.tool-card p { color: var(--text-3) !important; }
.tool-card .go { color: var(--primary) !important; }

/* ================= 通用页面容器 / 标题 ================= */
.page-head h1,
.card h2 { letter-spacing: .5px; }
.page-head h1 {
  background: linear-gradient(135deg, #ffffff 0%, var(--primary) 60%, var(--emerald) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  text-shadow: 0 0 34px rgba(0,202,224,.18);
}
.page-head .sub { color: var(--text-3) !important; }
.back-link { color: var(--text-3) !important; }
.back-link:hover { color: var(--primary) !important; }

/* ================= 卡片 / 工作台面板 ================= */
.card,
.controls,
.upload-card {
  background: linear-gradient(135deg, rgba(25,30,40,.9), rgba(16,20,28,.86)) !important;
  border: 1px solid rgba(0,202,224,.16) !important;
  box-shadow: 0 18px 50px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter: blur(8px);
}
.controls h3,
.card h2,
.card h3 { color: #dff3f8 !important; }

/* ================= 表单控件 ================= */
textarea,
input[type="text"], input[type="password"], input[type="number"],
input[type="email"], input[type="tel"], input[type="search"],
select,
.codes-out,
.activate-row input,
.form input, .form textarea,
.form-item input, .form-item select {
  background-color: rgba(4, 10, 16, .6) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: var(--text) !important;
}
textarea:focus,
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="email"]:focus, input[type="tel"]:focus, input[type="search"]:focus,
select:focus,
.form input:focus, .form textarea:focus,
.form-item input:focus, .form-item select:focus,
.activate-row input:focus {
  border-color: rgba(0,202,224,.55) !important;
  box-shadow: 0 0 0 3px rgba(0,202,224,.1);
  outline: none;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2300CAE0' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  padding-right: 32px !important;
}
select option { background: #12161e; color: #f5fbff; }

.field-label,
.form label,
.form-item label { color: var(--text-3) !important; }

/* ================= 开关 / 分段 / 标签 ================= */
.switch input:checked + .slider {
  background: var(--grad) !important;
  box-shadow: 0 0 12px rgba(0,202,224,.4);
}
.switch input:checked + .slider::before { background: #04222a !important; }

.prompt-chip,
.chip {
  background: rgba(0,202,224,.06) !important;
  border: 1px solid rgba(0,202,224,.22) !important;
  color: var(--text-2) !important;
  transition: all .2s;
}
.prompt-chip:hover,
.chip:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: rgba(0,202,224,.12) !important;
}

/* ================= 按钮 ================= */
.btn {
  background: transparent;
  border: 1px solid rgba(0,202,224,.28) !important;
  color: var(--text-2) !important;
}
.btn:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: rgba(0,202,224,.07);
}
.btn-gold {
  background: var(--grad) !important;
  color: #04222a !important;
  border: none !important;
  font-weight: 600;
  box-shadow: 0 8px 26px rgba(0,202,224,.28);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.btn-gold:hover:not(:disabled) {
  color: #04222a !important;
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 10px 30px rgba(0,229,160,.4) !important;
}
.btn-gold:disabled,
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn-primary {
  background: rgba(0,202,224,.12) !important;
  border-color: rgba(0,202,224,.5) !important;
  color: var(--primary) !important;
}

/* 提交按钮内的算力小徽标（原来是红色，改为深色玻璃 pill） */
.btn-cost {
  background: rgba(4, 22, 28, .45) !important;
  border: 1px solid rgba(0,229,160,.4) !important;
  color: #c9f7ec !important;
  font-weight: 600;
}

.btn-danger {
  border-color: rgba(255,107,107,.4) !important;
  color: #ff9a9a !important;
}
.btn-danger:hover {
  background: rgba(255,107,107,.1) !important;
  border-color: var(--danger) !important;
  color: #ffb4b4 !important;
}
.btn-ghost {
  border-color: rgba(255,255,255,.14) !important;
  color: var(--text-2) !important;
}

/* ================= 进度 / 结果 / 错误 ================= */
.progress-section {
  background: rgba(4, 10, 16, .5) !important;
  border: 1px solid rgba(0,202,224,.16) !important;
}
.progress-bar { background: rgba(255,255,255,.07) !important; }
.progress-fill {
  background: var(--grad) !important;
  box-shadow: 0 0 12px rgba(0,202,224,.6);
}
.progress-text { color: var(--text-2) !important; }
.progress-hint { color: var(--text-3) !important; }

.result {
  background: linear-gradient(135deg, rgba(25,30,40,.9), rgba(16,20,28,.86)) !important;
  border: 1px solid rgba(0,202,224,.16) !important;
}
.result h3 { color: var(--emerald) !important; }
.result video {
  border: 1px solid rgba(0,229,160,.3) !important;
  box-shadow: 0 0 30px rgba(0,229,160,.12);
}

.error-box {
  background: rgba(255,107,107,.1) !important;
  border: 1px solid rgba(255,107,107,.35) !important;
  color: #ffc4c4 !important;
}

.spin {
  border-color: rgba(0,202,224,.25) !important;
  border-top-color: var(--primary) !important;
}

/* ================= 上传区 ================= */
.upload-zone,
.ref-add,
.ff-card {
  background: rgba(0,202,224,.04) !important;
  border: 1.5px dashed rgba(0,202,224,.35) !important;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.upload-zone:hover, .upload-zone.dragover,
.ref-add:hover,
.ff-card:hover {
  border-color: var(--primary) !important;
  background: rgba(0,202,224,.1) !important;
  box-shadow: 0 0 22px rgba(0,202,224,.14);
}
.upload-zone .file-name { color: var(--primary) !important; }
.upload-zone .tag,
.ref-card .ref-idx {
  background: rgba(0,202,224,.12) !important;
  border: 1px solid rgba(0,202,224,.25);
  color: var(--primary) !important;
}
.ref-card {
  border: 1px solid rgba(0,202,224,.22) !important;
  background: rgba(0,0,0,.25) !important;
}
.ref-add { color: var(--text-2) !important; }
.ref-add .plus { color: var(--primary) !important; }
.upload-tip,
.cost-hint { color: var(--text-3) !important; }
.cost-hint b { color: var(--primary) !important; }

/* ================= 弹层 / 灯箱 ================= */
.modal-mask,
.mask.on { background: rgba(4, 9, 14, .82) !important; backdrop-filter: blur(4px); }
.modal-card,
.qr-modal {
  background: linear-gradient(135deg, rgba(25,30,40,.98), rgba(14,18,26,.98)) !important;
  border: 1px solid rgba(0,202,224,.28) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.65), 0 0 40px rgba(0,202,224,.1);
}
.modal-card h3,
.qr-modal h3 { color: var(--primary) !important; }
.modal-row .k { color: var(--text-3) !important; }
.modal-row .v { color: var(--text-2) !important; }
.modal-notice { color: var(--text-3) !important; }
.modal-close {
  border-color: rgba(0,202,224,.3) !important;
  background: rgba(0,0,0,.5) !important;
  color: var(--text) !important;
}
.modal-close:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.lightbox { background: rgba(4, 9, 14, .9) !important; }
.gallery .g-item { border-color: rgba(0,202,224,.2) !important; }
.gallery .g-dl {
  background: rgba(0,202,224,.1);
  color: var(--primary) !important;
}
.gallery .g-dl:hover {
  background: rgba(0,202,224,.2) !important;
}

/* ================= 表格 / 标签 / 选项卡 / 分页 ================= */
th {
  background: rgba(0,202,224,.06) !important;
  color: var(--text-3) !important;
}
th, td { border-bottom: 1px solid rgba(0,202,224,.1) !important; }
td { color: var(--text-2) !important; }
tr:hover td { background: rgba(0,202,224,.03); }

.feat-name { color: var(--text) !important; }
.model-name { color: var(--text-3) !important; }
.tier-tag,
.type-tag {
  background: rgba(0,202,224,.1) !important;
  border: 1px solid rgba(0,202,224,.22) !important;
  color: var(--primary) !important;
}
.price-cell,
.codes-out { color: var(--primary) !important; }
.price-cell .per { color: var(--text-3) !important; }
.qty-rule,
.load-tip,
.update-time { color: var(--text-3) !important; }
.feat-block.highlight .card {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 1px rgba(0,202,224,.4), 0 0 26px rgba(0,202,224,.16) !important;
}
.rule-list li::before { background: var(--grad) !important; }
.rule-list b { color: var(--primary) !important; }

.tab,
.sub-tab {
  border: 1px solid rgba(0,202,224,.2) !important;
  color: var(--text-3) !important;
  background: rgba(4,10,16,.35);
  transition: all .2s;
}
.tab:hover,
.sub-tab:hover {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.tab.active,
.sub-tab.active {
  background: var(--grad) !important;
  color: #04222a !important;
  font-weight: 600;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(0,202,224,.3);
}

.status-tag,
.st-0,
.st-pending,
.st-activated {
  background: rgba(0,202,224,.12) !important;
  color: var(--primary) !important;
}
.badge.run,
.badge.save { color: var(--primary) !important; }
.pv-thumbs img.on { border-color: var(--primary) !important; }

.empty-row,
.empty p { color: var(--text-3) !important; }
.empty {
  background: rgba(20,24,32,.4) !important;
  border: 1px dashed rgba(0,202,224,.28) !important;
}

/* ================= 账户/个人中心 ================= */
.avatar {
  background: var(--grad) !important;
  color: #04222a !important;
  box-shadow: 0 0 0 6px rgba(0,202,224,.1), 0 12px 36px rgba(0,202,224,.35) !important;
}
.id-badge {
  background: rgba(0,202,224,.07) !important;
  border: 1px solid rgba(0,202,224,.2) !important;
}
.id-badge .v { color: var(--primary) !important; }
.id-badge button:hover { color: var(--primary) !important; }
.role-pill { color: var(--primary) !important; border-color: rgba(0,202,224,.25) !important; }
.card h2 .ico,
.split .sic,
.op-item .oic {
  background: rgba(0,202,224,.12) !important;
  box-shadow: inset 0 0 0 1px rgba(0,202,224,.18);
}
.balance-num,
.pack-price,
.stat-num { color: var(--primary) !important; }
.balance-line b { color: var(--primary) !important; }
.split { border-top-color: rgba(0,202,224,.12) !important; }
.split .cell + .cell { border-left-color: rgba(0,202,224,.12) !important; }
.sec-title::after { background: rgba(0,202,224,.16) !important; }

.op-item {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}
.op-item:hover {
  border-color: rgba(0,202,224,.45) !important;
  background: rgba(26,34,44,.92) !important;
  box-shadow: 0 0 22px rgba(0,202,224,.12);
}

.qr-modal .wx b { color: var(--primary) !important; }

/* ================= 存储 / 用量 ================= */
.usage-bar { background: rgba(255,255,255,.07) !important; }
.usage-fill {
  background: var(--grad) !important;
  box-shadow: 0 0 10px rgba(0,202,224,.5);
}
.pack-item {
  background: rgba(4,10,16,.45) !important;
  border-color: rgba(0,202,224,.14) !important;
}
.card h3 { color: #dff3f8 !important; }

/* ================= 作品卡片 / 预览弹层 ================= */
.thumb { background: #05070a !important; }
.badge { background: rgba(0,0,0,.62) !important; }
.badge.ok { color: var(--emerald) !important; }
.badge.fail { color: #ff8a8a !important; }
.card:hover { /* 保持各页 hover 布局，仅统一光影 */ }
.grid .card:hover {
  border-color: rgba(0,202,224,.35) !important;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.6), 0 0 22px rgba(0,202,224,.12);
}
.progress-bar { background: rgba(255,255,255,.07) !important; }

/* ================= 去水印/字幕编辑器 ================= */
.preview-empty {
  background: rgba(4,10,16,.5) !important;
  border: 1px dashed rgba(0,202,224,.28) !important;
  color: var(--text-3) !important;
}
.region-item {
  background: rgba(0,202,224,.08) !important;
  border: 1px solid rgba(0,202,224,.2) !important;
}
.region-item .del { color: #ff9a9a; }
.preview-info b { color: var(--text-2) !important; }
input[type="range"] { accent-color: var(--primary); }

/* ================= 补丁：各页零散金色样式 ================= */
/* 上传完成态：实线青边 */
.upload-zone.uploaded,
.upload-zone.has-file,
.upload-zone.has-img {
  border: 1.5px solid rgba(0,202,224,.55) !important;
  background: rgba(0,202,224,.06) !important;
}

/* 侧栏滚动条（旧规则为类选择器，优先级高于通用 * 规则） */
.nav-scroll::-webkit-scrollbar-thumb { background: rgba(0,202,224,.22) !important; }
.nav-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,202,224,.42) !important; }

/* 存储管理文件行 */
.file-row:hover {
  border-color: rgba(0,202,224,.35) !important;
  background: rgba(28,36,46,.92) !important;
}
.file-icon {
  background: rgba(0,202,224,.12) !important;
  box-shadow: inset 0 0 0 1px rgba(0,202,224,.2);
  color: var(--primary) !important;
}

/* 幽灵按钮 / 开关行 / 批量操作条 */
.btn-ghost { background: rgba(0,202,224,.07) !important; }
.toggle-row {
  background: rgba(0,202,224,.05) !important;
  border: 1px solid rgba(0,202,224,.16) !important;
}
.batch-bar {
  background: rgba(0,202,224,.05) !important;
  border: 1px solid rgba(0,202,224,.16) !important;
}

/* 管理后台深色输入框（含硬编码底色与行内样式） */
.set-cell input,
.price-input {
  background-color: rgba(4,10,16,.6) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: var(--text) !important;
}
.set-cell input:focus,
.price-input:focus {
  border-color: rgba(0,202,224,.55) !important;
  box-shadow: 0 0 0 3px rgba(0,202,224,.1);
  outline: none;
}
.form-item input:disabled,
.set-cell input:disabled {
  background-color: rgba(255,255,255,.04) !important;
  color: var(--text-3) !important;
}
[style*="#1a1612"],
[style*="#18140f"] {
  background-color: rgba(4,10,16,.6) !important;
}

/* 金额/算力行高亮 */
.balance-line,
.info-line b { color: inherit; }

/* ================= 阶段A：工具页 hero / 工作台（复刻 wan3 / multi-frame） ================= */
.th-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px; padding: 18px 0 34px;
}
.th-hero-logo { position: relative; width: 96px; height: 96px; margin-bottom: 2px; }
.th-hero-logo .ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(0,202,224,.35);
  animation: thRing 3s ease-in-out infinite;
}
.th-hero-logo .ring-2 { inset: -13px; border-color: rgba(0,229,160,.26); animation-delay: .5s; }
.th-hero-logo .core {
  position: absolute; inset: 15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(0,202,224,.22), rgba(8,11,16,.9) 70%);
  border: 1px solid rgba(0,202,224,.3);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 34px rgba(0,202,224,.28), inset 0 0 22px rgba(0,202,224,.12);
}
.th-hero-logo .core svg { width: 40px; height: 40px; filter: drop-shadow(0 0 12px rgba(0,202,224,.8)); }
.th-hero-logo .core img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(0,202,224,.55)); }
@keyframes thRing {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.07); opacity: .35; }
}
.th-hero-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px;
  border-radius: 100px; font-size: 12px; letter-spacing: .18em;
  color: var(--primary); border: 1px solid rgba(0,202,224,.35);
  background: rgba(0,202,224,.07);
}
.th-hero-badge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--emerald, #00E5A0);
  animation: thDot 2s ease-in-out infinite;
}
@keyframes thDot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.th-hero h1 {
  font-size: 38px; font-weight: 800; letter-spacing: 2px; line-height: 1.25;
  background: linear-gradient(135deg, #fff 0%, #8FE9F5 45%, #00CAE0 70%, #00E5A0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.th-hero .th-vendor { font-size: 13px; color: var(--text-3); letter-spacing: 6px; margin-top: -6px; }
.th-hero .th-desc { font-size: 15px; color: var(--text-2); letter-spacing: 1px; max-width: 640px; line-height: 1.8; }
.th-cta {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 34px; border-radius: 100px; border: none; cursor: pointer;
  font-size: 15px; font-weight: 700; color: #04222a;
  background: linear-gradient(135deg, #00CAE0, #00E5A0);
  box-shadow: 0 6px 26px rgba(0,229,160,.3);
  transition: all .25s var(--ease-out, cubic-bezier(.22,.61,.36,1));
}
.th-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(0,229,160,.45); }

/* 特性卡片 */
.th-features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-bottom: 30px;
}
.th-feature {
  position: relative; padding: 20px 18px; border-radius: 14px; overflow: hidden;
  background: rgba(20,24,32,.72); border: 1px solid rgba(255,255,255,.07);
  transition: all .25s var(--ease-out, cubic-bezier(.22,.61,.36,1));
}
.th-feature:hover { transform: translateY(-4px); border-color: rgba(0,202,224,.35); box-shadow: 0 12px 34px rgba(0,0,0,.4), 0 0 24px rgba(0,202,224,.12); }
.th-feature .f-icon {
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: rgba(0,202,224,.12); box-shadow: inset 0 0 0 1px rgba(0,202,224,.2);
}
.th-feature .f-num { position: absolute; top: 12px; right: 14px; font-size: 12px; color: var(--text-3); letter-spacing: 1px; }
.th-feature h3 { font-size: 15px; font-weight: 600; margin-bottom: 7px; color: #e8f6fa; }
.th-feature p { font-size: 12.5px; line-height: 1.7; color: var(--text-2); }

/* 流程条 */
.th-workflow {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 30px;
}

/* ==========================================================================
   工具页 hero 复刻 · 防首屏闪烁（配合 tool-hero.js / tech-theme.js）
   旧工具页首帧会先画出自带的 .page-head，DOMContentLoaded 后 tool-hero.js
   再替换为科技风 hero + .studio 工作台，肉眼可见“闪一下/多刷一次”。
   引导态（html 无 .th-hero-ready）下先隐藏整个工具页 .page，
   tool-hero 完成 DOM 改造后加 .th-hero-ready 再显示，保证首帧即最终形态。
   选择器仅匹配 10 个工具页（.page-head 是 .page 第一个子元素）；
   侧栏页/计费页首个子元素不是 page-head，天然不受影响。
   ========================================================================== */
html:not(.th-hero-ready) .page > .page-head:first-child,
html:not(.th-hero-ready) .page > .page-head:first-child ~ * {
  visibility: hidden;
}
.th-workflow .wf-step {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 100px; font-size: 12.5px; color: var(--text-2);
  background: rgba(20,24,32,.72); border: 1px solid rgba(255,255,255,.08);
}
.th-workflow .wf-step .wf-num {
  width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,202,224,.16); color: var(--primary);
}
.th-workflow .wf-arrow { color: var(--text-3); font-size: 14px; }

/* 玻璃工作台（不含 backdrop-filter，避免影响 fixed 弹层） */
.studio {
  position: relative; border-radius: 20px;
  background: rgba(15,19,27,.78);
  border: 1px solid rgba(0,202,224,.14);
  box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 50px rgba(0,202,224,.06);
  padding: 8px 26px 30px;
}
.studio-ribbon {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 2px; margin: 0 -2px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.studio-ribbon .ribbon-tag {
  font-size: 11px; padding: 3px 10px; border-radius: 100px; letter-spacing: .12em;
  color: var(--primary); background: rgba(0,202,224,.1);
  border: 1px solid rgba(0,202,224,.25);
}
.studio-ribbon .ribbon-title { font-size: 15px; font-weight: 600; color: #e8f6fa; }
.studio-ribbon .ribbon-switch { margin-left: auto; display: flex; align-items: center; gap: 10px; }

@media (max-width: 860px) {
  .th-hero { padding: 10px 0 24px; gap: 12px; }
  .th-hero h1 { font-size: 26px; }
  .th-hero .th-vendor { letter-spacing: 3px; }
  .th-hero .th-desc { font-size: 13.5px; }
  .studio { padding: 6px 14px 22px; border-radius: 16px; }
  .studio-ribbon .ribbon-switch { margin-left: 0; width: 100%; }
}

/* ================= 全局通用高亮 ================= */
b { color: inherit; }
.pos { color: var(--emerald) !important; }
.neg { color: #ff9a9a !important; }

/* ================= 响应式：移动端抽屉导航 ================= */
@media (max-width: 860px) {
  .sidebar {
    display: flex !important;
    position: fixed !important; top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform .28s var(--ease-out);
    z-index: 100;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 10px 0 50px rgba(0,0,0,.6), 0 0 40px rgba(0,202,224,.12);
  }
  .menu-toggle { display: block !important; }
}