/* ============================================================
 * 主题说明（关键）：
 *   原版工具主体是【白色/浅色】界面（legacy.css 的 body 白色渐变）。
 *   深色科技风只用于【登录门 #authGate】和【会员栏/抽屉/弹窗】这些浮层，
 *   绝不能污染工具主体。
 *
 *   这些深色变量（--bg/--panel/--text 等）仅供浮层组件使用；
 *   工具主体的 body 背景/文字色一律由 legacy.css 决定，本文件不再覆盖。
 * ============================================================ */
:root{
  --bg:#0f172a; --panel:#1e293b; --panel2:#243449; --line:#334155;
  --text:#e2e8f0; --muted:#94a3b8; --primary:#2563eb; --primary-h:#1d4ed8;
  --ok:#10b981; --warn:#f59e0b; --danger:#ef4444; --pro:#a855f7;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
/* 注意：不再给 body 设 background/color —— 工具主体的白色交给 legacy.css */
.hidden{display:none !important}
.muted{color:var(--muted)}
.small{font-size:12px}
.center{text-align:center}
.full{width:100%;margin-top:8px}

/* ---------- 按钮（仅作用于 SaaS 自身的按钮，避免覆盖原版工具按钮） ---------- */
.btn-primary{background:var(--primary);color:#fff;font-weight:600}
.btn-primary:hover{background:var(--primary-h)}
.btn-primary:disabled{background:#334155;color:#64748b;cursor:not-allowed}
.btn-ghost{background:transparent;color:#334155;border:1px solid #cbd5e1}
.btn-ghost:hover{background:#f1f5f9;border-color:#94a3b8}
.btn-ghost.sm{padding:5px 11px;font-size:12.5px}
.btn-ghost:disabled{opacity:.45;cursor:not-allowed}

/* ============================================================
 * 登录遮罩 —— 深蓝科技风（动态背景 + 风光储元素 + 曲线波）
 * 设计口径：深蓝科技 / 动画克制 / 只作用于登录遮罩
 * ============================================================ */
.auth-gate{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:20px;overflow-y:auto;overflow-x:hidden;
  background:
    radial-gradient(1100px 620px at 50% -8%, #1d4ed855 0%, transparent 62%),
    radial-gradient(900px 520px at 88% 12%,  #0e749055 0%, transparent 58%),
    radial-gradient(760px 460px at 8% 84%,   #05966933 0%, transparent 60%),
    linear-gradient(180deg,#060d1c 0%,#0a1524 46%,#070f1d 100%);
}
/* 内容超出时（注册长表单 / 小屏）从顶部对齐，避免上下被裁 */
.auth-gate.tall{align-items:flex-start;padding-top:32px;padding-bottom:32px}

/* ---------- 背景图层容器 ---------- */
.bg-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}

/* 极光（缓慢呼吸漂移） */
.bg-aurora{
  position:absolute;left:-20%;top:-32%;width:140%;height:96%;
  background:radial-gradient(48% 46% at 32% 52%, #0ea5e944 0%, transparent 68%),
             radial-gradient(42% 42% at 66% 40%, #06b6d433 0%, transparent 66%);
  filter:blur(38px);animation:auroraDrift 26s ease-in-out infinite alternate;
}
.bg-aurora.a2{
  left:auto;right:-24%;top:auto;bottom:-40%;width:120%;height:84%;
  background:radial-gradient(46% 48% at 58% 50%, #10b98133 0%, transparent 68%),
             radial-gradient(40% 40% at 34% 62%, #3b82f633 0%, transparent 66%);
  animation-duration:34s;animation-direction:alternate-reverse;
}
@keyframes auroraDrift{
  0%  {transform:translate3d(-2%, -1%, 0) scale(1)}
  100%{transform:translate3d(3%, 2%, 0) scale(1.09)}
}

/* 透视网格（地平线，缓慢向后流动） */
.bg-grid{
  position:absolute;left:-30%;right:-30%;bottom:-6%;height:52%;
  background-image:
    linear-gradient(#22d3ee2e 1px, transparent 1px),
    linear-gradient(90deg, #22d3ee21 1px, transparent 1px);
  background-size:64px 46px, 64px 46px;
  transform:perspective(420px) rotateX(66deg);
  transform-origin:center bottom;
  mask-image:linear-gradient(180deg, transparent 0%, #000 46%, #000 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 46%, #000 100%);
  animation:gridFlow 7s linear infinite;
}
@keyframes gridFlow{ from{background-position:0 0,0 0} to{background-position:0 46px,0 0} }

/* 粒子星点 */
.bg-stars{position:absolute;inset:0}
.bg-stars i{
  position:absolute;width:2px;height:2px;border-radius:50%;background:#7dd3fc;
  opacity:.5;animation:twinkle 4.2s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{opacity:.16;transform:scale(.85)}
  50%    {opacity:.72;transform:scale(1.15)}
}

/* 动态曲线波 */
.bg-waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:88%}
.w-area{animation:areaFloat 13s ease-in-out infinite}
@keyframes areaFloat{
  0%,100%{transform:translateY(0)   scaleY(1)}
  50%    {transform:translateY(-16px) scaleY(1.035)}
}
.w-line{filter:drop-shadow(0 0 6px #22d3ee66)}
.w-line.l1{animation:lineSway 11s ease-in-out infinite}
.w-line.l2{animation:lineSway 15s ease-in-out infinite reverse}
@keyframes lineSway{
  0%,100%{transform:translate(0, 0)}
  50%    {transform:translate(-22px, -13px)}
}
.w-dot{fill:#22d3ee;animation:dotPulse 3s ease-in-out infinite}
.w-dot.d2{animation-delay:.7s;fill:#38bdf8}
.w-dot.d3{animation-delay:1.4s;fill:#10b981}
@keyframes dotPulse{
  0%,100%{opacity:.35;r:3}
  50%    {opacity:1;  r:5.4}
}

/* 能源元素 SVG */
.bg-energy{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%}
.bg-energy .turbine{opacity:.5}
.bg-energy .turbine.t2{opacity:.3}
/* 风机叶片旋转：整组转子绕自身轴心旋转（克制：24–31s 一圈） */
.rotor{
  transform-box:fill-box;transform-origin:center;
  animation:spin 24s linear infinite;
}
.rotor.r2{animation-duration:31s}
@keyframes spin{ from{rotate:0deg} to{rotate:360deg} }

/* 光伏阵列 */
.bg-energy .solar{opacity:.75}
.pv-sheen{animation:pvSheen 7s ease-in-out infinite}
@keyframes pvSheen{
  0%,74%  {opacity:0;transform:translateX(0)}
  82%     {opacity:.14}
  100%    {opacity:0;transform:translateX(330px)}
}

/* 储能电量条（循环充放） */
.bg-energy .bess{opacity:.8}
.socbar{animation:socPulse 4.6s ease-in-out infinite}
.socbar.s2{animation-delay:.5s}
.socbar.s3{animation-delay:1s}
@keyframes socPulse{
  0%,100%{opacity:.3}
  55%    {opacity:1}
}

/* 底部暗角 */
.bg-vignette{
  position:absolute;inset:0;
  background:radial-gradient(78% 66% at 50% 46%, transparent 38%, #040a14cc 100%);
}

/* ---------- 玻璃拟态卡片 ---------- */
.auth-card{
  position:relative;width:100%;max-width:462px;
  background:linear-gradient(180deg,#132135d9,#0d1728e6);
  border:1px solid #2b446b99;
  border-radius:18px;padding:28px;
  box-shadow:0 28px 70px #000000a6, 0 0 0 1px #22d3ee1f inset, 0 1px 0 #ffffff0f inset;
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  animation:cardRise .6s cubic-bezier(.22,.68,.36,1) both;
}
@keyframes cardRise{
  from{opacity:0;transform:translateY(18px) scale(.985)}
  to  {opacity:1;transform:none}
}
/* 卡片顶部流光边 */
.auth-card::before{
  content:'';position:absolute;left:16px;right:16px;top:-1px;height:1px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#22d3eeaa,#3b82f6aa,transparent);
  animation:topLine 5.5s ease-in-out infinite;
}
@keyframes topLine{ 0%,100%{opacity:.4} 50%{opacity:1} }
.auth-card.wide{max-width:640px}

.auth-brand{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.auth-logo{
  width:48px;height:48px;flex:none;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0ea5e9,#2563eb 55%,#7c3aed);font-size:24px;color:#fff;
  box-shadow:0 0 20px #0ea5e955, 0 0 0 1px #ffffff26 inset;
  animation:logoGlow 4s ease-in-out infinite;
}
@keyframes logoGlow{
  0%,100%{box-shadow:0 0 18px #0ea5e944, 0 0 0 1px #ffffff26 inset}
  50%    {box-shadow:0 0 28px #22d3ee88, 0 0 0 1px #ffffff33 inset}
}
.auth-brand h1{
  font-size:17px;margin:0;letter-spacing:.3px;
  background:linear-gradient(92deg,#e2e8f0 20%,#7dd3fc 52%,#e2e8f0 84%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:titleSheen 7s ease-in-out infinite;
}
@keyframes titleSheen{ 0%,100%{background-position:0% 0} 50%{background-position:100% 0} }
.auth-brand p{margin:3px 0 0;font-size:12px;color:#8fa6c4}

/* 特性条 */
.auth-feats{
  display:flex;flex-wrap:wrap;gap:8px 14px;margin:0 0 20px;
  padding:9px 12px;border-radius:9px;
  background:#0b1526a6;border:1px solid #1e3a5f66;
}
.auth-feats span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#9fb6d4}
.auth-feats .dot{
  width:6px;height:6px;border-radius:50%;flex:none;
  animation:dotBlink 3.4s ease-in-out infinite;
}
.auth-feats .dot.c-cyan{background:#22d3ee;box-shadow:0 0 6px #22d3eeaa;animation-delay:0s}
.auth-feats .dot.c-green{background:#10b981;box-shadow:0 0 6px #10b981aa;animation-delay:.5s}
.auth-feats .dot.c-blue{background:#3b82f6;box-shadow:0 0 6px #3b82f6aa;animation-delay:1s}
.auth-feats .dot.c-teal{background:#2dd4bf;box-shadow:0 0 6px #2dd4bfaa;animation-delay:1.5s}
@keyframes dotBlink{ 0%,100%{opacity:.4} 50%{opacity:1} }

/* 无障碍：尊重系统「减弱动态效果」偏好 */
@media (prefers-reduced-motion: reduce){
  .bg-aurora,.bg-grid,.bg-stars i,.w-area,.w-line,.w-dot,
  .rotor,.pv-sheen,.socbar,.auth-card,.auth-logo,.auth-brand h1,.auth-feats .dot{
    animation:none !important;
  }
}
.auth-tabs{display:flex;gap:6px;margin-bottom:18px;background:#0f172a99;padding:4px;border-radius:9px}
.auth-tab{flex:1;background:transparent;color:var(--muted);padding:7px;font-size:13.5px;border-radius:7px}
.auth-tab.active{background:var(--primary);color:#fff;font-weight:600}
.auth-form{display:flex;flex-direction:column;gap:13px}
.auth-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#cbd5e1}
.auth-form input,.auth-form select,.field input,.field select{
  width:100%;padding:9px 12px;border-radius:8px;border:1px solid var(--line);
  background:#0f172a;color:var(--text);font-size:14px;font-family:inherit;outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.auth-form input:focus,.auth-form select:focus,.field input:focus,.field select:focus{border-color:var(--primary)}
/* 登录遮罩内的输入框：科技感聚焦光晕 */
.auth-gate .auth-form input:focus,
.auth-gate .auth-form select:focus{
  border-color:#0ea5e9;background:#0a1424;
  box-shadow:0 0 0 3px #0ea5e922, 0 0 16px #0ea5e933;
}
.auth-gate .auth-form label{color:#b6c8e0}
.auth-gate .auth-tabs{background:#0a1322b3;border:1px solid #1e3a5f59}
.auth-gate .auth-tab.active{
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  box-shadow:0 2px 12px #0ea5e955;
}
.auth-gate .btn-primary{
  background:linear-gradient(135deg,#0ea5e9,#2563eb 60%,#3b82f6);
  box-shadow:0 6px 20px #2563eb44;
}
.auth-gate .btn-primary:hover{
  background:linear-gradient(135deg,#22d3ee,#2563eb 60%,#60a5fa);
  box-shadow:0 8px 26px #2563eb66;
}
.auth-form input:disabled{opacity:.6;cursor:not-allowed}
.code-row{display:flex;gap:8px}
.code-row input{flex:1}
.code-row button{white-space:nowrap}
.auth-msg{margin-top:12px;font-size:13px;min-height:18px;text-align:center;color:var(--danger)}
.auth-msg.ok{color:var(--ok)}
.link{color:#60a5fa;text-decoration:none}
.link:hover{text-decoration:underline}
.sep{margin:0 8px;color:var(--line)}
.req{color:var(--danger)}
/* 必填校验错误态：输入框标红 + 下方错误文字 */
.auth-form label.has-error input,
.auth-form label.has-error select,
.auth-form .has-error input,
.auth-form .has-error select,
.region-row.has-error select,
.auth-form .col-2.has-error .region-row select{
  border-color:var(--danger)!important;
  box-shadow:0 0 0 3px #ef444422;
}
.field-error-text{display:none;font-size:11.5px;color:var(--danger);margin-top:2px}
label.has-error .field-error-text,
.has-error .field-error-text{display:block}

/* 注册表单两列栅格 */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.form-grid .col-2{grid-column:1 / -1}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#cbd5e1;min-width:0}
.field-label{font-size:13px;color:#cbd5e1;margin-bottom:6px}
.region-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.region-row select{min-width:0}
.divider{position:relative;text-align:center;margin:6px 0 2px}
.divider::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.divider span{position:relative;background:var(--panel);padding:0 12px;font-size:12px;color:var(--muted)}
.invite-hint{font-size:12px;padding:7px 10px;border-radius:7px;background:#0f172a;border:1px solid var(--line)}
.invite-hint.ok{color:var(--ok);border-color:#10b98155}
.invite-hint.err{color:var(--warn);border-color:#f59e0b55}

/* 忘记密码 */
.back-link{align-self:flex-start}
.forgot-title{font-size:15px;margin:6px 0 2px}
.small-seg{display:flex;gap:16px;background:#0f172a99;padding:8px 12px;border-radius:9px;font-size:13px}
.small-seg label{display:flex;align-items:center;gap:6px;cursor:pointer;color:#cbd5e1}

/* 个人中心 */
.ptabs{display:flex;gap:6px;margin-bottom:16px;background:#0f172a99;padding:4px;border-radius:9px}
.ptab{flex:1;background:transparent;color:var(--muted);padding:8px;font-size:13.5px;border-radius:7px}
.ptab.active{background:var(--primary);color:#fff;font-weight:600}
.pane{display:flex;flex-direction:column;gap:12px}
.invite-hero{background:#0f172a;border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:12px}
.ih-row{display:flex;flex-direction:column;gap:6px}
.ih-label{font-size:12px;color:var(--muted)}
.ih-value{display:flex;gap:8px;align-items:center}
.ih-value code{font-size:17px;letter-spacing:2px;color:#60a5fa;font-weight:700}
.ih-value input{flex:1;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:#0f172a;color:var(--text);font-size:12.5px;min-width:0}
.invite-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.istat{background:#0f172a;border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:4px}
.istat .iv{font-size:24px;font-weight:700;color:#60a5fa}
.istat .il{font-size:12px;color:var(--muted)}
.invite-rule{background:#2563eb1a;border:1px solid #2563eb44;border-radius:10px;padding:12px 14px;font-size:13px}
.invite-rule p{margin:6px 0 0;color:#cbd5e1}
.invite-rule b{color:#f59e0b}
.empty-tip{text-align:center;color:var(--muted);font-size:13px;padding:16px}
.member-box{background:#0f172a;border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px}
.mb-row{display:flex;justify-content:space-between;font-size:13.5px}
.mb-row span{color:var(--muted)}
.c-pro{color:var(--pro)}
.price-note{font-size:12px;color:var(--muted);margin-left:6px}

/* ============================================================
 * 说明：旧瘦身 SaaS 的「顶栏 / 布局 / 结果区 / 表格」样式已删除。
 *   合并版前台完全复用原版工具（legacy.css）的界面，那些旧类名
 *   （.panel/.kpi/.data-table/.topbar/.layout 等）会污染白色主体，
 *   故一并移除。会员栏/抽屉/弹窗样式见下方。
 * ============================================================ */

/* ---------- 抽屉 / 弹窗（会员中心 / 升级） ---------- */
.drawer{position:fixed;inset:0;z-index:60}
.drawer-mask{position:fixed;inset:0;background:#0007;z-index:59}
.drawer-body{
  position:fixed;top:0;right:0;bottom:0;width:min(460px,92vw);z-index:60;
  background:#1e293b;border-left:1px solid #334155;display:flex;flex-direction:column;
  box-shadow:-16px 0 50px #0007;overflow-y:auto;padding:0;
}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border-bottom:1px solid #334155;position:sticky;top:0;background:#1e293b}
.drawer-head h3{margin:0;font-size:17px;color:#e2e8f0}
.drawer-head+.ptabs{margin:14px 18px 0}
.drawer-head~*:not(.ptabs){margin-left:18px;margin-right:18px}
#ptab-invite,#ptab-info,#ptab-security{padding-bottom:24px}
#ptab-invite,#ptab-info,#ptab-security{color:#e2e8f0}

.modal{position:fixed;inset:0;z-index:80}
.modal-mask{position:fixed;inset:0;background:#000a;z-index:79}
.modal-body{
  position:relative;z-index:80;width:100%;max-width:430px;background:#1e293b;
  border:1px solid #334155;border-radius:16px;padding:26px;margin:20px auto;
}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.modal-head h3{margin:0;font-size:17px;color:#e2e8f0}
.drawer-close,.modal-close{background:transparent;color:#94a3b8;font-size:16px;padding:4px 8px}
.drawer-close:hover,.modal-close:hover{color:#fff}
.up-field{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:14px;color:#cbd5e1}
.up-field select{flex:1;padding:9px 12px;border-radius:8px;border:1px solid #334155;background:#0f172a;color:#e2e8f0}
.up-actions{display:flex;gap:9px;margin-bottom:12px}
.up-actions .btn-upgrade{flex:1;padding:11px;font-size:14px}
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:200;
  background:#1e293b;border:1px solid var(--line);color:#fff;padding:11px 20px;border-radius:9px;
  box-shadow:0 10px 30px #0008;font-size:13.5px;max-width:90vw;
}
.toast.ok{border-color:var(--ok)}
.toast.err{border-color:var(--danger)}

/* ============================================================
 * 会员栏（置顶右上角，白底圆角卡片 · 百度网盘风）
 * 未登录时被全屏登录遮罩覆盖，登录后常驻页面右上角。
 * ============================================================ */
.member-bar{
  position:fixed;top:10px;right:14px;z-index:60;
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:12px;
  background:#fffffff5;border:1px solid #e3e9f2;backdrop-filter:blur(8px);
  box-shadow:0 6px 22px rgba(15,42,78,.13), 0 1px 3px rgba(15,42,78,.06);
}
.member-tag{
  font-size:12px;padding:3px 11px;border-radius:20px;background:#eef2f7;color:#64748b;font-weight:600;white-space:nowrap;
}
.member-tag.pro{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;box-shadow:0 2px 8px #a855f766}
.user-chip{font-size:12.5px;color:#334155;padding:0 4px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.btn-upgrade{
  background:linear-gradient(135deg,#2563eb,#0ea5e9);color:#fff;font-weight:600;
  padding:6px 14px;font-size:12.5px;border-radius:8px;white-space:nowrap;
  box-shadow:0 2px 8px #2563eb44;
}
.btn-upgrade:hover{filter:brightness(1.08)}
/* 会员栏内的幽灵按钮：浅色描边，与白底协调 */
.member-bar .btn-ghost{border-color:#dbe3ee;color:#475569}
.member-bar .btn-ghost:hover{background:#f1f5f9;border-color:#b6c4d8}

/* 手机端：会员栏收窄，避免遮挡标题 */
@media (max-width:768px){
  .member-bar{top:8px;right:8px;left:auto;padding:6px 9px;gap:7px;border-radius:12px;max-width:calc(100vw - 16px)}
  .user-chip{max-width:110px;font-size:12px;flex:0 1 auto;min-width:0}
  .member-tag{font-size:11px;padding:2px 9px}
  /* ⚠️ 关键修复（2026-10-11）：
     legacy.css 的移动端触控规则
       button:not(.panel-toggle){min-height:42px;padding:10px 16px !important;font-size:14px !important}
     带 !important，会连带把会员栏这一排按钮也撑成 42~60px 高的大块头；再叠加整体宽度超出
     导致换行，就出现「个人/中心」「退/出」竖排两行 —— 一排按钮 60/42/60px 参差不齐。
     会员栏是贴着页首的浮动小条，不该按 42px 触控区做。这里用同等 !important + 更高特异性
     压回去：统一 32px 高、单行不换行。 */
  .member-bar button,
  .member-bar .btn-ghost.sm,
  .member-bar .btn-upgrade{
    min-height:0 !important;height:32px !important;padding:0 10px !important;
    font-size:12.5px !important;line-height:1 !important;white-space:nowrap;
    display:inline-flex;align-items:center;justify-content:center;
  }
}
@media (max-width:430px){
  /* 窄屏：昵称留足空间，按钮只留必要文字宽度 */
  .user-chip{max-width:78px}
}
/* 限时优惠：窄屏下会员栏按钮里不显示倒计时（弹窗内仍完整显示） */
@media (max-width:700px){
  .member-bar .pbc{display:none}
}
/* 小屏（iPhone SE / 360px 档）：再收一档，保证一排装得下、不换行 */
@media (max-width:380px){
  .member-bar{padding:5px 7px;gap:5px}
  .user-chip{max-width:56px}
  .member-bar button,
  .member-bar .btn-ghost.sm,
  .member-bar .btn-upgrade{height:30px !important;padding:0 8px !important;font-size:12px !important}
}

/* ============================================================
 * 个人中心抽屉（美化版）
 * ============================================================ */
.pc-body{width:min(480px,94vw);background:#f6f8fb;border-left:1px solid #e3e9f2;display:flex;flex-direction:column}
.pc-hero{
  display:flex;align-items:center;gap:14px;padding:22px 22px 18px;
  background:linear-gradient(135deg,#1d4ed8,#0ea5e9);
}
.pc-avatar{
  width:52px;height:52px;border-radius:50%;background:#ffffff33;border:2px solid #ffffff88;
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;flex-shrink:0;
}
.pc-hero-info{flex:1;min-width:0}
.pc-name{font-size:18px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-company{font-size:12.5px;color:#dbeafe;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-hero .drawer-close{color:#dbeafe;font-size:18px}
.pc-hero .drawer-close:hover{color:#fff}

/* 会员卡 */
.pc-card{margin:18px 22px 0;background:#fff;border:1px solid #e3e9f2;border-radius:14px;padding:16px;box-shadow:0 4px 16px rgba(15,42,78,.06)}
.pc-card.free{background:linear-gradient(135deg,#fff,#f0f4fa)}
.pc-card.pro{background:linear-gradient(135deg,#2b0a4e,#4c1d95);border-color:#4c1d95;color:#fff;box-shadow:0 6px 22px #7c3aed55}
.pc-level{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pc-level b{font-size:16px}
.pc-card.free .pc-level b{color:#1e293b}
.pc-level .badge-lv{font-size:11px;padding:2px 10px;border-radius:12px;background:#eef2f7;color:#64748b}
.pc-card.pro .badge-lv{background:#ffffff22;color:#e9d5ff}
.pc-meta{display:flex;gap:20px;font-size:12.5px;color:#94a3b8}
.pc-card.pro .pc-meta{color:#c4b5fd}
.pc-meta b{color:#475569;font-size:13.5px}
.pc-card.pro .pc-meta b{color:#fff}
.pc-renew{margin-top:12px;width:100%;padding:9px;border-radius:9px;font-weight:600;font-size:13.5px}
.pc-card.free .pc-renew{background:linear-gradient(135deg,#2563eb,#0ea5e9);color:#fff}
.pc-card.pro .pc-renew{background:#ffffff22;color:#fff;border:1px solid #ffffff55}

/* 图标导航 */
.pc-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:18px 22px 0}
.pc-nav-item{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 4px;
  background:#fff;border:1px solid #e3e9f2;border-radius:11px;font-size:11.5px;color:#64748b;white-space:nowrap;
}
.pc-nav-item .pc-ic{font-size:19px}
.pc-nav-item.active{background:#eff6ff;border-color:#2563eb;color:#2563eb;font-weight:600}

.pc-panes{padding:16px 22px 28px;flex:1}
.pc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.pc-hint{font-size:12.5px;color:#64748b}
.pc-hint b{color:#2563eb}

/* 方案列表 */
.plans-list{display:flex;flex-direction:column;gap:10px}
.plan-item{background:#fff;border:1px solid #e3e9f2;border-radius:12px;padding:13px 14px;display:flex;align-items:center;gap:12px}
.plan-item .p-ico{font-size:20px}
.plan-item .p-info{flex:1;min-width:0}
.plan-item .p-title{font-size:14px;font-weight:600;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-item .p-time{font-size:11.5px;color:#94a3b8}
.plan-item .p-acts{display:flex;gap:6px;flex-shrink:0}
.plan-item .p-acts button{padding:5px 10px;font-size:12px;border-radius:7px;border:1px solid #dbe3ee;background:#fff;color:#475569}
.plan-item .p-acts .p-use{background:#2563eb;border-color:#2563eb;color:#fff}
.plan-item .p-acts .p-del:hover{background:#fef2f2;border-color:#fecaca;color:#dc2626}
.plans-empty{text-align:center;color:#94a3b8;font-size:13px;padding:30px 0}

/* ============================================================
 * 扫码支付（升级弹窗）
 * ============================================================ */
.pay-body{width:min(460px,94vw);max-height:92vh;overflow-y:auto}
.pay-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pay-plan{border:1px solid #e3e9f2;background:#fff;border-radius:10px;padding:11px 4px;text-align:center;cursor:pointer}
.pay-plan .pp-m{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap}
.pay-plan .pp-p{font-size:15px;font-weight:800;color:#ef4444;margin-top:3px}
.pay-plan.active{border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 1px #2563eb}
.pay-plan .pp-badge{display:inline-block;font-size:10px;color:#fff;background:#f59e0b;border-radius:6px;padding:1px 6px;margin-top:3px}

/* ============================================================
 * 限时优惠（折扣 + 倒计时）
 * ============================================================ */
.pay-plan .pp-p{white-space:nowrap}
.pay-plan .pp-sale{font-size:15px;font-weight:800;color:#ef4444}
.pay-plan .pp-orig{font-size:10.5px;font-weight:400;color:#94a3b8;margin-left:3px;text-decoration:line-through}
.pay-plan .pp-off{display:inline-block;font-size:10px;color:#fff;background:#ef4444;border-radius:6px;padding:1px 6px;margin-top:3px;white-space:nowrap}
.promo-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:linear-gradient(90deg,#fff1f2,#fff7ed);border:1px solid #fecdd3;border-radius:10px;padding:9px 12px;margin:0 0 12px;font-size:13px}
.promo-bar .promo-fire{font-size:15px}
.promo-bar .promo-text{font-weight:700;color:#dc2626}
.promo-bar .promo-clock{margin-left:auto;font-size:12.5px;color:#9a3412;white-space:nowrap}
.promo-bar .promo-clock b{font-size:14px;color:#dc2626;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.pay-amount .pay-orig{font-size:12.5px;color:#94a3b8}
.member-bar .btn-upgrade{font-variant-numeric:tabular-nums}
.pay-channels{display:flex;gap:8px;flex:1}
.pay-channel{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:9px;border-radius:8px;border:1px solid #e3e9f2;background:#fff;font-size:13px;cursor:pointer}
.pay-channel.active{border-color:#07c160;background:#f0fdf4;color:#16a34a}
#payChAlipay.active{border-color:#1677ff;background:#eff6ff;color:#1677ff}
.pay-codebox{display:flex;flex-direction:column;align-items:center;margin-top:16px;padding:20px;background:#f8fafc;border:1px dashed #dbe3ee;border-radius:12px}
.pay-qr{width:250px;max-width:100%;min-height:180px;background:#fff;border:1px solid #e3e9f2;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pay-qr img{width:100%;height:auto;display:block}
.pay-qr-inner{font-size:14px;color:#cbd5e1;text-align:center;line-height:1.6}
.pay-amount{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:14px}
.pay-amount span{font-size:12px;color:#94a3b8}
.pay-amount b{font-size:30px;color:#ef4444;font-weight:800}

/* 邀请 */
.inv-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;color:#cbd5e1}
.inv-row>span{flex-shrink:0}
.inv-code{font-size:17px;letter-spacing:2px;color:#60a5fa;font-weight:700;background:#0f172a;border:1px solid var(--line);padding:4px 10px;border-radius:7px}
.inv-link{flex:1;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:#0f172a;color:var(--text);font-size:12.5px;min-width:0}
.inv-stats{display:flex;gap:18px;margin:10px 0 12px;font-size:13px;color:#cbd5e1}
.inv-stats b{color:#60a5fa}
.invite-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:8px}
.invite-table th{background:#0f172a;color:#94a3b8;padding:8px;text-align:left;font-weight:600;border-bottom:1px solid var(--line)}
.invite-table td{padding:8px;border-bottom:1px solid #1e293b;color:#cbd5e1}
.member-box{background:#0f172a;border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px}

/* ============================================================
 * 浅色主题适配（2026-10-10）
 * 个人中心抽屉与升级弹窗统一为浅色白卡风格（与置顶会员栏呼应）。
 * 作用域限定 .pc-body / .pay-body，不影响深色登录遮罩（.auth-gate）。
 * ============================================================ */

/* ---- 页签区文字（覆盖旧深色残留） ---- */
.pc-panes, .pc-panes p, .pc-panes .muted{color:#475569}
#ptab-invite,#ptab-info,#ptab-security,#ptab-orders{color:#475569}
.pc-panes .form-grid label{color:#334155}
.pc-panes .form-grid input,
.pc-panes .form-grid select{
  background:#fff;border:1px solid #dbe3ee;color:#1e293b;border-radius:8px;padding:8px 10px;font-size:13px;
}
.pc-panes .form-grid input:disabled{background:#f1f5f9;color:#94a3b8}
.pc-panes .form-grid input:focus,
.pc-panes .form-grid select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 2px #2563eb22}
.pc-panes .btn-primary{margin-top:14px;width:100%;padding:10px;border-radius:9px}
.pc-panes .btn-ghost{border-color:#dbe3ee;color:#475569;background:#fff}
.pc-panes .btn-ghost:hover{background:#f1f5f9;border-color:#b6c4d8}

/* member-box（账号安全页签的会员信息） */
.pc-panes .member-box{background:#fff;border-color:#e3e9f2}
.pc-panes .member-box .mb-row span{color:#94a3b8}
.pc-panes .member-box .mb-row b{color:#1e293b}
.pc-panes .member-box .mb-row b.c-pro{color:#7c3aed}

/* 邀请页签 */
.pc-panes .inv-row{color:#475569}
.pc-panes .inv-code{background:#eff6ff;border-color:#dbeafe;color:#2563eb}
.pc-panes .inv-link{background:#fff;border-color:#dbe3ee;color:#1e293b}
.pc-panes .inv-stats{color:#64748b}
.pc-panes .inv-stats b{color:#2563eb}
.pc-panes .invite-table th{background:#f1f5f9;color:#64748b;border-bottom:1px solid #e3e9f2}
.pc-panes .invite-table td{border-bottom:1px solid #eef2f7;color:#334155}
.pc-panes .invite-table code{color:#2563eb}

/* ---- 升级弹窗（扫码支付）浅色化 ---- */
.pay-body{background:#fff;border:1px solid #e3e9f2;box-shadow:0 20px 60px rgba(15,42,78,.25)}
.pay-body .modal-head h3{color:#1e293b}
.pay-body .modal-close{color:#94a3b8}
.pay-body .modal-close:hover{color:#1e293b}
.pay-body .up-field{color:#334155}
.pay-body .muted{color:#64748b}

/* 移动端：个人中心/弹窗贴边自适应 */
@media (max-width:480px){
  .pc-body{width:100vw}
  .pc-hero{padding:18px 16px 14px}
  .pc-card{margin:14px 14px 0}
  /* 5 个页签在手机上仍然排成一行（原来折成 3+2，第二行只剩两个、左边空一格很难看）。
     ⚠️ 与会员栏同因：.pc-nav-item 是 <button>，会吃到 legacy.css 那条
        button:not(.panel-toggle){min-height:42px;padding:10px 16px !important;font-size:14px !important}
     结果每格被撑到 92px，5 格共 514px 塞进 361px → 整个抽屉横向可滚、第 5 个页签被切掉。
     这里用 !important 压回紧凑尺寸：5 列每格约 67px，4 字标签 11px 不换行。 */
  .pc-nav{margin:14px 14px 0;grid-template-columns:repeat(5,1fr);gap:6px}
  /* 注意特异性：legacy 那条是 button:not(.panel-toggle) = (0,1,1)，
     单纯写 .pc-nav-item 只有 (0,1,0)，加 !important 也压不过去，
     必须凑到 (0,2,0) 以上 —— 故用后代写法 .pc-nav .pc-nav-item。 */
  .pc-nav .pc-nav-item{min-height:0 !important;padding:8px 1px !important;font-size:11px !important;gap:4px;line-height:1.15}
  .pc-nav .pc-nav-item .pc-ic{font-size:17px}
  .pc-panes{padding:14px 14px 24px}
  /* 邀请码 / 邀请链接行：手机上改上下排，链接输入框独占一行，不再被「复制」按钮挤到只露半截 */
  .pc-panes .inv-row{flex-wrap:wrap;gap:6px;align-items:center}
  .pc-panes .inv-row>span{flex:0 0 auto}
  .pc-panes .inv-link{flex:1 1 100%;order:3;font-size:12px}
  .pc-panes .inv-row .btn-ghost.sm{margin-left:auto}
  .pay-body{max-width:94vw;padding:18px;margin:12px auto}
  .pay-plans{grid-template-columns:repeat(2,1fr)}
  .pay-amount b{font-size:24px}
}

/* 危险操作区（用户自主注销） */
.danger-zone{margin-top:22px;border:1px solid #fecaca;background:#fff5f5;border-radius:11px;padding:14px}
.dz-title{font-size:13px;font-weight:700;color:#dc2626}
.dz-text{font-size:12px;color:#b91c1c;margin:6px 0 10px;line-height:1.6}
.btn-danger-zone{width:100%;padding:9px;border-radius:8px;background:#dc2626;color:#fff;font-weight:600;font-size:13.5px}
.btn-danger-zone:hover{background:#b91c1c}

/* 邀请奖励展示（你 / 好友 各得什么） */
.reward-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.reward-card{border-radius:12px;padding:14px;color:#fff;position:relative;overflow:hidden}
.rc-me{background:linear-gradient(135deg,#7c3aed,#a855f7);box-shadow:0 4px 14px #a855f744}
.rc-friend{background:linear-gradient(135deg,#2563eb,#0ea5e9);box-shadow:0 4px 14px #0ea5e944}
.rc-head{font-size:12px;opacity:.92;font-weight:600}
.rc-big{font-size:26px;font-weight:800;margin:4px 0 4px}
.rc-text{font-size:11.5px;line-height:1.55;opacity:.95}
.rc-text b{font-weight:700;text-decoration:underline;text-underline-offset:2px}
@media (max-width:480px){
  .rc-big{font-size:22px}
  .reward-card{padding:11px}
}

/* ============================================================
 * 计算工具更新通知条（2026-10-10，小喇叭样式）
 * 位置：原版 <header class="hero"> 之后（见 build-saas-frontend.js）。
 * 放页面最顶部会被右上角 fixed 会员栏（z-index:60）压住按钮，故下移到 hero 之后。
 * ============================================================ */
.notice-bar{
  display:flex;align-items:center;gap:7px;
  margin:8px 20px 0;
  padding:7px 12px;
  background:#f6f8fb;
  border:1px solid #e3e9f2;border-radius:20px;
  font-size:12.5px;color:#475569;
}
.nb-ic{font-size:14px;flex-shrink:0;line-height:1}
.nb-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;font-weight:500;transition:opacity .22s}
.nb-text:hover{color:#2563eb;text-decoration:underline}
.nb-more{flex-shrink:0;border:none;background:transparent;color:#2563eb;border-radius:10px;padding:2px 8px;font-size:12px;font-weight:600;cursor:pointer}
.nb-more:hover{background:#e0ecff}
@media (max-width:768px){
  .notice-bar{margin:8px 12px 0;padding:6px 10px;font-size:12px;gap:6px}
}
@media (max-width:600px){
  .notice-bar{align-items:flex-start;font-size:11.5px;gap:5px}
  .nb-text{white-space:normal;line-height:1.45}
  .nb-more{padding:2px 7px;font-size:11px;margin-top:1px}
}

/* 通知详情弹窗（浅色） */
.notice-body{
  width:min(560px,94vw);max-height:86vh;overflow-y:auto;
  background:#fff;border:1px solid #e3e9f2;box-shadow:0 20px 60px rgba(15,42,78,.25);
}
.notice-body .modal-head h3{color:#1e293b}
.notice-body .modal-close{color:#94a3b8}
.notice-body .modal-close:hover{color:#1e293b}
.notice-list{display:flex;flex-direction:column;gap:12px}
.notice-item{border:1px solid #e3e9f2;border-radius:11px;padding:12px 14px;background:#fbfdff}
.ni-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ni-tag{font-size:11px;font-weight:700;color:#fff;background:#2563eb;border-radius:5px;padding:1px 7px;flex-shrink:0}
.ni-title{font-size:14px;font-weight:700;color:#1e293b;flex:1;min-width:0}
.ni-pin{font-size:10.5px;font-weight:700;color:#c2410c;background:#ffedd5;border-radius:5px;padding:1px 6px;flex-shrink:0}
.ni-body{font-size:13px;color:#475569;line-height:1.72;margin-top:7px}
.ni-time{font-size:11.5px;color:#94a3b8;margin-top:8px}

/* ============================================================
 * 个人中心「我的订单」
 * ============================================================ */
.orders-list{display:flex;flex-direction:column;gap:10px}
.orders-list .muted{color:#94a3b8}
.order-card{border:1px solid #e3e9f2;border-radius:11px;padding:12px 14px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.order-card:hover{border-color:#bfdbfe;box-shadow:0 2px 10px rgba(37,99,235,.06)}
.oc-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.oc-plan{font-size:14px;font-weight:700;color:#1e293b}
.oc-amount{font-size:17px;font-weight:800;color:#ef4444;flex-shrink:0}
.oc-mid{display:flex;align-items:center;gap:8px;margin:7px 0}
.oc-status{font-size:11.5px;font-weight:700;border-radius:5px;padding:2px 8px}
.os-paid{color:#047857;background:#d1fae5}
.os-claim{color:#b45309;background:#fef3c7}
.os-pending{color:#64748b;background:#f1f5f9}
.os-closed{color:#94a3b8;background:#f1f5f9}
.oc-ch{font-size:11.5px;color:#64748b;border:1px solid #e3e9f2;border-radius:5px;padding:1px 7px}
.oc-no{font-size:11.5px;color:#94a3b8;font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all}
.oc-time{font-size:12px;color:#475569;margin-top:6px;line-height:1.65}
.os-none{color:#64748b;background:#f1f5f9}
.oc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:9px;padding-top:8px;border-top:1px dashed #e8eef7;font-size:12px;font-weight:700;color:#2563eb}
.oc-caret{color:#93a4bd;font-size:11px;transition:transform .18s}
.order-card.open{border-color:#bfdbfe;box-shadow:0 2px 12px rgba(37,99,235,.08)}
.order-card.open .oc-caret{transform:rotate(180deg)}
.oc-detail{margin-top:10px;padding-top:10px;border-top:1px dashed #e8eef7}
.oc-dl{display:flex;flex-direction:column;gap:6px}
.oc-dl>div{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;font-size:12.5px;color:#64748b}
.oc-dl>div>b{color:#1e293b;font-weight:600;text-align:right;word-break:break-all}
.oc-dl b.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px}
.oc-dl .oc-warn>b{color:#b91c1c}
.oc-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.oc-note{margin-top:10px;font-size:12px;color:#94a3b8}
.inv-locked{padding:10px 12px;border-radius:9px;border:1px dashed #cfdff2;background:#f7fbff;font-size:13px;color:#334155;font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all}
@media (max-width:560px){
  .oc-dl>div{flex-direction:column;gap:2px}
  .oc-dl>div>b{text-align:left}
}

/* ============================================================
 * 发票中心 / 申请开票
 * ============================================================ */
.invoices-list{display:flex;flex-direction:column;gap:10px}
.invoices-list .muted{color:#94a3b8}
.invoice-body{background:#fff;border:1px solid #e3e9f2;box-shadow:0 20px 60px rgba(15,42,78,.25)}
.invoice-body .modal-head h3{color:#1e293b}
.invoice-body .modal-close{color:#94a3b8}
.invoice-body .modal-close:hover{color:#1e293b}
.inv-field{display:flex;flex-direction:column;gap:6px;margin-bottom:13px;font-size:13px;color:#334155}
.inv-field>span{font-weight:600}
.inv-field input,
.inv-field select{width:100%;padding:10px 12px;border-radius:9px;border:1px solid #dbe3ee;background:#fff;color:#1e293b;font-size:13.5px;font-family:inherit;outline:none}
.inv-field input:focus,
.inv-field select:focus{border-color:#2563eb;box-shadow:0 0 0 2px #2563eb22}