/* ==========================================================================
   烛火站点 · 墨 / 纸 主题（覆盖 zhuhuo.css 与页内商务化覆盖）
   只改设计变量 + 少量排版，不改结构与文案。
   夜间 = 墨（暖黑 + 烛火橙）   白天 = 纸（米白 + 朱砂赭金）
   ========================================================================== */

/* ------------------------------- 白天 · 纸 ------------------------------- */
:root{
  --accent:#b8421c;
  --accent-hover:#9c3516;
  --accent-2:#a3762a;
  --accent-soft:rgba(184,66,28,.07);
  --accent-soft-2:rgba(184,66,28,.12);
  --accent-border:rgba(184,66,28,.28);
  --gold:#a3762a;

  --bg:#f8f3e9;
  --bg2:#f3ecdf;
  --card:#fdfaf3;
  --card2:#f7f0e4;

  --line:#e4dac8;
  --fg:#241d14;
  --muted:#6d5f4b;
  --muted-2:#978871;

  --ok:#3f7a4a;
  --warn:#a3762a;

  --shadow:0 6px 22px rgba(120,95,60,.10);
  --shadow-lg:0 22px 60px rgba(120,95,60,.16);
}

/* ------------------------------- 夜间 · 墨 ------------------------------- */
html.dark{
  --accent:#ff6b35;
  --accent-hover:#ff8355;
  --accent-2:#e0a44f;
  --accent-soft:rgba(255,107,53,.10);
  --accent-soft-2:rgba(255,107,53,.16);
  --accent-border:rgba(255,107,53,.32);
  --gold:#e0a44f;

  --bg:#0b0907;
  --bg2:#151110;
  --card:#0f0d0a;
  --card2:#141110;

  --line:rgba(224,164,79,.14);
  --fg:#f4ede2;
  --muted:#a2937f;
  --muted-2:#6f6455;

  --ok:#8fbf8a;
  --warn:#e0a44f;

  --shadow:0 6px 22px rgba(0,0,0,.42);
  --shadow-lg:0 24px 64px rgba(0,0,0,.62);
}

/* ------------------------------ 纸感底纹 ------------------------------ */
html:not(.dark) body{
  background-image:
    radial-gradient(130% 90% at 50% 0%, transparent 48%, rgba(120,95,60,.10) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.22'/%3E%3C/svg%3E");
  background-attachment:fixed;
}

/* 夜间：顶部一抹暖光，避免大片死黑 */
html.dark body{
  background-image:radial-gradient(1000px 460px at 50% -8%, rgba(255,107,53,.16), transparent 72%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* -------------------------- 标题用宋体（中文数据产品少见的处理） -------------------------- */
.hero h1,
.sec-head h2,
.modal h3,
.csm .box h3{
  font-family:"Songti SC","SimSun","Noto Serif SC","Source Han Serif SC",serif;
  letter-spacing:1px;
  font-weight:700;
}
.brand{font-family:"Songti SC","SimSun","Noto Serif SC",serif;}

/* 品牌 logo 方块：改成烛火渐变 */
.brand .logo{
  background:linear-gradient(145deg,#ffcf8a,#ff6b35 55%,#c2531f);
  color:#1a0d05;
  box-shadow:0 0 0 1px rgba(255,207,138,.35),0 4px 16px rgba(255,107,53,.30);
}

/* -------------------------- 主按钮：烛火渐变 -------------------------- */
.btn.primary{
  background:linear-gradient(135deg,#ffcf8a,#ff6b35 58%,#df4d19);
  color:#1a0b03;
  border-color:transparent;
  box-shadow:0 6px 20px rgba(255,107,53,.24);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.btn.primary:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 10px 26px rgba(255,107,53,.30);}
html:not(.dark) .btn.primary{
  background:linear-gradient(135deg,#d9673a,#b8421c 60%,#93310f);
  color:#fffaf3;
  box-shadow:0 6px 18px rgba(184,66,28,.22);
}

/* 导航条：白天纸底、夜间墨底 */
.nav{background:color-mix(in srgb,var(--bg) 88%,transparent);}
html.dark .nav{background:rgba(11,9,7,.86);border-bottom-color:var(--line);}
html:not(.dark) .nav{background:rgba(248,243,233,.90);}

/* 卡片：轻浮起 */
.mcard,.pcard,.dgrid .dcard,.box{
  box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.mcard:hover,.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}

/* 强调文字走烛火色 */
.hero h1 em,
.sec-head h2 em{color:var(--accent);}

/* 滚动条 */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid transparent;background-clip:content-box}

/* ------------------ 夜间：把写死浅底的横幅改成暖色半透明 ------------------ */
html.dark a[style*="#FFF3EC"],
html.dark a[style*="#fff3ec"],
html.dark a[style*="#FFF5EC"]{
  background:rgba(255,107,53,.10) !important;
  border-color:rgba(255,107,53,.26) !important;
}
/* 同类浅底块兜底 */
html.dark [style*="background:#FFF"],
html.dark [style*="background: #FFF"],
html.dark [style*="background:#FFF3"],
html.dark [style*="background:#FFF5"]{
  background:rgba(255,255,255,.045) !important;
}
/* ==========================================================================
   顶栏同步：火焰 logo + 导航条重排（2026-10-27）
   ========================================================================== */

/* ---------- 火焰 logo 容器 ---------- */
.brand .logo,
.brand .zh-flame-box{
  width:32px !important;height:32px !important;
  border-radius:10px !important;
  background:
    radial-gradient(circle at 50% 68%, rgba(255,107,53,.30), transparent 68%),
    var(--card) !important;
  border:1px solid var(--accent-border) !important;
  box-shadow:0 0 0 1px rgba(255,207,138,.10), 0 4px 16px rgba(255,107,53,.20) !important;
  display:grid !important;place-items:center;
  overflow:visible !important;
}
.brand .logo .zh-flame{width:19px;height:24px;overflow:visible;filter:drop-shadow(0 0 5px rgba(255,107,53,.55))}
.brand .logo .zfl-out{transform-origin:50% 96%;animation:zflFlick 2.6s cubic-bezier(.22,.85,.3,1) infinite}
.brand .logo .zfl-in{transform-origin:50% 96%;animation:zflFlick 1.35s cubic-bezier(.22,.85,.3,1) infinite reverse;opacity:.95}
@keyframes zflFlick{
  0%{transform:scale(1,1) skewX(0deg)}
  22%{transform:scale(.96,1.07) skewX(-2.5deg)}
  44%{transform:scale(1.04,.94) skewX(1.6deg)}
  68%{transform:scale(.97,1.05) skewX(-1.2deg)}
  100%{transform:scale(1,1) skewX(0deg)}
}
@media (prefers-reduced-motion: reduce){
  .brand .logo .zfl-out,.brand .logo .zfl-in{animation:none !important}
}

/* ---------- 导航条：字重、悬浮线、当前项 ---------- */
.nav{border-bottom:1px solid var(--line) !important;}
.nav .wrap{gap:22px !important;}
.navlinks{gap:20px !important;font-size:13.5px !important;}
.navlinks a{position:relative;padding:4px 0;color:var(--muted);}
.navlinks a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 30%,transparent));
  transform:scaleX(0);transform-origin:left;transition:transform .24s cubic-bezier(.22,.85,.3,1);
}
.navlinks a:hover,.navlinks a.on{color:var(--fg);}
.navlinks a:hover::after,.navlinks a.on::after{transform:scaleX(1);}
.navlinks a.on{font-weight:600;}

/* ---------- 右侧按钮 ---------- */
.navcta{gap:9px !important;}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--fg);}
.btn.ghost:hover{border-color:var(--accent-border);color:var(--accent);background:var(--accent-soft);}

/* 夜间模式切换按钮：圆角玻璃态 */
.zhDarkBtn{
  width:34px;height:34px;border-radius:10px;
  display:inline-grid;place-items:center;
  background:var(--bg2) !important;
  border:1px solid var(--line) !important;
  color:var(--fg) !important;
  font-size:14px;cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.zhDarkBtn:hover{transform:translateY(-1px);border-color:var(--accent-border) !important;background:var(--accent-soft) !important;}
/* ==========================================================================
   登录页对比度修复（/login 实际走的是 web 根目录的 login.html）
   原样式：input 用 var(--input-bg,#fff) 兜底白色，文字却用 var(--fg)
   深色下就是「白底 + 浅字」，输入的内容看不见。
   ========================================================================== */
.form-group input,
.code-group input{
  background:var(--card) !important;
  color:var(--fg) !important;
  border-color:var(--line) !important;
}
.form-group input::placeholder,
.code-group input::placeholder{color:var(--muted-2) !important;}
.form-group input:focus,
.code-group input:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px var(--accent-soft) !important;
}
/* 选项卡：原来也是白底 + 浅字 */
.tab.on{
  background:var(--card) !important;
  color:var(--fg) !important;
  box-shadow:var(--shadow);
}
.tab{color:var(--muted);}
.tab:hover{color:var(--fg);}
/* 验证码按钮 */
.code-group button{
  background:var(--accent-soft) !important;
  border-color:var(--accent-border) !important;
  color:var(--accent) !important;
}
/* 兜底：浏览器自动填充/密码管理器会给 input 刷浅色底和浅色字，
   必须用 -webkit-text-fill-color + inset box-shadow 才能压住 */
.form-group input,
.code-group input{
  background-color:var(--card) !important;
  -webkit-text-fill-color:var(--fg) !important;
  caret-color:var(--accent) !important;
  color:var(--fg) !important;
}
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.code-group input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--card) inset !important;
  box-shadow:0 0 0 1000px var(--card) inset !important;
  -webkit-text-fill-color:var(--fg) !important;
  caret-color:var(--accent) !important;
  border-color:var(--line) !important;
}
/* 页脚：原样式底色写死，浅色下是一块纯白、深色下偏冷，跟页面不同源 */
.footer,
.zh-footer{
  background:var(--bg2) !important;
  border-top:1px solid var(--line) !important;
  color:var(--muted) !important;
}
.footer a,.footer .beian,
.zh-footer a,.zh-footer .beian{color:var(--muted) !important;}
.footer a:hover,.zh-footer a:hover{color:var(--accent) !important;}
/* 客服悬浮球：已下线，这里做兜底隐藏（可能来自缓存或其它页面注入） */
#zhkf-btn,
#zhkf-panel,
#zhkf-bub,
#zhkf-card,
[id^="zhkf-"]{display:none !important;}
/* ---------- 日夜切换按钮重做（emoji → 矢量图标） ---------- */
.zhDarkBtn{
  width:34px;height:34px;padding:0;
  display:inline-grid;place-items:center;
  border-radius:10px;
  background:var(--bg2) !important;
  border:1px solid var(--line) !important;
  color:var(--muted) !important;
  cursor:pointer;
  transition:color .2s ease,background .2s ease,border-color .2s ease,transform .25s ease;
}
.zhDarkBtn:hover{
  color:var(--accent) !important;
  border-color:var(--accent-border) !important;
  background:var(--accent-soft) !important;
  transform:translateY(-1px);
}
.zhDarkBtn svg{
  width:16px;height:16px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .35s cubic-bezier(.22,.85,.3,1);
}
html.dark .zhDarkBtn svg{transform:rotate(0deg)}
.zhDarkBtn.zh-dark-ready{font-size:0;line-height:0}

/* ---------- ghost 按钮统一：官网「邀请返佣」与控制台「控制台」同形态 ---------- */
.navcta #navInvite,
.navcta a[href="/invite"],
.navcta a[href="/login"]{
  border:1px solid var(--line) !important;
  color:var(--fg) !important;
  background:transparent !important;
  border-radius:10px !important;
  padding:9px 18px !important;
  font-weight:600 !important;
}
.navcta #navInvite:hover,
.navcta a[href="/invite"]:hover,
.navcta a[href="/login"]:hover{
  border-color:var(--accent-border) !important;
  color:var(--accent) !important;
  background:var(--accent-soft) !important;
}
/* ==========================================================================
   已登录用户：手机号白胶囊 → 圆形头像按钮
   原来 .navuser 写死 background:#fff / color:#1e3a5f，点开也没有任何 JS 处理
   （.navuser.open 的 CSS 存在，但从来没人加过 open 类），所以点了没反应
   ========================================================================== */
.navuser{
  width:36px !important;height:36px !important;
  border-radius:50% !important;
  padding:0 !important;
  display:inline-grid !important;place-items:center;
  background:var(--accent-soft) !important;
  border:1px solid var(--accent-border) !important;
  color:var(--accent) !important;
  font-size:0 !important;line-height:0 !important;
  max-width:none !important;overflow:visible !important;
  position:relative !important;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.navuser:hover{
  transform:translateY(-1px);
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fffaf3 !important;
}
.navuser > b{display:none !important;}          /* 隐藏手机号 */
.navuser .nu-caret{display:none !important;}    /* 隐藏小箭头 */
.navuser::before{                                /* 用户图标 */
  content:"";display:block;width:17px;height:17px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.6 20a7.4 7.4 0 0 1 14.8 0'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.6 20a7.4 7.4 0 0 1 14.8 0'/%3E%3C/svg%3E") no-repeat center/contain;
}
.navuser.open .nu-drop{display:block !important;}

/* 下拉菜单：与主题一致的卡片 */
.nu-drop{
  min-width:172px !important;
  padding:6px !important;
  border-radius:12px !important;
  border:1px solid var(--line) !important;
  background:var(--card) !important;
  box-shadow:var(--shadow) !important;
}
.nu-drop a{
  display:block;padding:8px 10px !important;border-radius:8px !important;
  font-size:13px !important;font-weight:500 !important;color:var(--fg) !important;
}
.nu-drop a:hover{background:var(--accent-soft) !important;color:var(--accent) !important;}
.nu-sep{margin:6px 6px !important;}
/* 下拉菜单项：确保有内边距（之前版本可能被更早的规则压掉） */
.nu-drop .nu-item,
.nu-drop > a{
  display:block !important;
  padding:9px 12px !important;
  border-radius:8px !important;
  line-height:1.4 !important;
  font-size:13px !important;
  font-weight:500 !important;
  color:var(--fg) !important;
  text-decoration:none !important;
  transition:background .16s ease,color .16s ease;
}
.nu-drop > a:hover{background:var(--accent-soft) !important;color:var(--accent) !important;}
.nu-drop{min-width:180px !important;}
/* 下拉菜单默认收起：页面里有一条无条件的 .nu-drop{display:block}，
   导致登录后菜单一直挂着 */
.navuser .nu-drop{display:none !important;}
.navuser:hover .nu-drop,
.navuser.open .nu-drop,
.navuser:focus-within .nu-drop{display:block !important;}
/* ==========================================================================
   卡片底：极淡的多色渐变（青绿 → 米白 → 暖橙）
   参考控制台「剩余额度」那张卡的处理：斜向 135°，两端各 6–8% 的着色，
   中间留白，避免整块死平，也不会脏。
   ========================================================================== */
:root{
  --zh-card-grad:linear-gradient(135deg,
    color-mix(in srgb, #7fbf92 9%, var(--card)) 0%,
    var(--card) 46%,
    color-mix(in srgb, #ff8a4c 9%, var(--card)) 100%);
}
html.dark{
  --zh-card-grad:linear-gradient(135deg,
    rgba(127,191,146,.09) 0%,
    rgba(255,255,255,0) 46%,
    rgba(255,107,53,.10) 100%);
}

.inv-card,
.mcard,
.pcard,
.dgrid .dcard,
.box,
.csm .box{
  background:var(--zh-card-grad), var(--card) !important;
  background-blend-mode:normal;
}

/* 首屏标题后的暖光再收一点，避免和卡片渐变打架 */
.inv-wrap::before{opacity:.85}