@font-face { font-family:'Poppins'; src:url('/static/fonts/poppins-v24-latin-regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
  @font-face { font-family:'Poppins'; src:url('/static/fonts/poppins-v24-latin-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
  @font-face { font-family:'Poppins'; src:url('/static/fonts/poppins-v24-latin-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
  @font-face { font-family:'Poppins'; src:url('/static/fonts/poppins-v24-latin-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
  /* ===== 设计令牌(参考 PikyHost 设计系统) ===== */
  :root {
    --teal:#28b894; --teal-d:#20a07f; --teal-dd:#1a8568; --teal-700:#0d4a3a;
    --teal-tint:#e8f9f0; --teal-tint2:#f3fbf6;
    --orange:#f55e32; --orange-d:#d9471f; --orange-tint:#ffe9e2;
    --ink:#1F1F1F; --body-tx:#4B4B4B; --muted-tx:#8E8E8E; --line:#E1E1E1; --line2:#EEEEEE;
    /* 客户门户品牌色(保持指定绿) */
    --brand:#28b894; --brand-d:#20a07f; --brand-tint:#e8f9f0;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  /* 滚动条常驻: 防止 tab 切换导致页面高度变化时滚动条时隐时现、整页横向抽动。
     注意: 不要在 html 上设 scroll-behavior:smooth —— 它会让浏览器切页时的滚动位置
     恢复也走平滑动画, 表现为"整个页面抽一下"; 页内锚点平滑滚动由底部 JS 实现 */
  html { overflow-y:scroll; }
  /* sticky footer: 门户页 flex 列布局, 内容不足一屏时 footer 依然沉底(员工后台 staff-layout 自带 100vh, 不受影响) */
  body.portal-body { display:flex; flex-direction:column; min-height:100vh; }
  body.portal-body .container { flex:1; }
  body { font-family:'Poppins',-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; background:#f7fafc; color:#1a202c; -webkit-font-smoothing:antialiased; }
  .topbar { background:#fff; color:#191a23; padding:0 24px; border-bottom:1px solid #eef1f6; transition:box-shadow .2s; }
  /* 页面滚动超过 8px 后由 JS 切换 .tb-shadow(顶栏非 sticky, 仅加阴影, 不改动定位) */
  .topbar.tb-shadow { box-shadow:0 4px 16px rgba(20,24,28,.10); }
  .topbar-inner { max-width:1240px; margin:0 auto; padding:14px 0; display:flex; align-items:center; justify-content:space-between; }
  .topbar .logo { font-size:20px; font-weight:700; color:#191a23; line-height:1.25; }
  .topbar .logo span { color:#28b894; }
  .topbar .logo small { display:block; font-size:11px; font-weight:400; color:#9aa3b2; letter-spacing:2px; margin-top:2px; }
  .topbar a { color:#4b5563; text-decoration:none; font-size:14px; margin-left:20px; transition:color .15s; }
  .topbar a:hover { color:#28b894; }
  /* ===== 门户导航: 左logo / 中产品菜单 / 右用户功能 ===== */
  .topbar .logo { text-decoration:none; margin-left:0 !important; }
  .nav-main { display:flex; align-items:center; flex-wrap:wrap; margin-left:38px; }
  .nav-main > a, .nav-drop > span { color:#191a23; font-size:14px; font-weight:500; margin:0 26px 0 0; padding:6px 0; cursor:pointer; white-space:nowrap; border-bottom:2px solid transparent; transition:color .15s,border-color .15s; line-height:22px; }
  /* 下拉触发 span 转块级: 与直链 a 同构(inline 时垂直 padding/border 不进 div 高度,
     flex 居中参考系不同导致「首页」比下拉项偏高 ~1.7px), 统一 line-height 后逐项像素对齐 */
  .nav-drop > span { display:block; }
  .nav-main > a:hover, .nav-drop:hover > span { color:#28b894; border-bottom-color:#28b894; }
  .nav-drop { position:relative; }
  .nav-drop .drop-menu { display:none; position:absolute; top:100%; left:-10px; min-width:160px; background:#fff; border-radius:12px; box-shadow:0 8px 24px rgba(20,24,28,.14); padding:8px 0; z-index:1000; }
  .nav-drop:hover .drop-menu { display:block; }
  .nav-drop .drop-menu a { display:block; margin:0; padding:9px 18px; font-size:13px; color:#4b5563; }
  .nav-drop .drop-menu a:hover { background:var(--brand-tint); color:#28b894; }
  .nav-right { margin-left:auto; display:flex; align-items:center; flex-wrap:wrap; }
  .container { max-width:960px; margin:32px auto; padding:0 16px; }
  /* 门户正文链接统一品牌绿(按钮类由下方 !important 规则保护) */
  .container a { color:#28b894; }
  .container a:hover { color:#20a07f; }
  .container a.btn, .container a.btn:hover { text-decoration:none; }
  /* ===== 卡片: 圆角12 + 设计稿阴影 ===== */
  .card { background:#fff; border-radius:12px; padding:24px; box-shadow:0 2px 10px rgba(0,60,64,.06); }
  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
  .product h3 { font-size:16px; margin-bottom:8px; }
  .product .desc { color:#6b7280; font-size:13px; line-height:1.6; min-height:42px; }
  .product .price { color:#e64545; font-size:22px; font-weight:700; margin:12px 0; }
  .product .price small { font-size:13px; color:#9aa3b2; font-weight:400; }
  /* ===== 按钮规范: 圆角8 / 10x20 / 字重500 ===== */
  .btn { display:inline-block; border:none; cursor:pointer; border-radius:8px; font-size:14px; font-weight:500; font-family:inherit; padding:10px 20px; text-decoration:none; transition:background .15s,box-shadow .15s,border-color .15s,color .15s; }
  .btn-sm { font-size:12px; padding:6px 14px; border-radius:6px; }
  .btn-primary { background:#28b894; color:#fff; }
  .btn-primary:hover { background:#20a07f; box-shadow:0 4px 12px rgba(40,184,148,.28); }
  /* 重点 CTA(去支付/继续)用设计稿橙色 */
  .btn-accent { background:var(--orange); color:#fff; }
  .btn-accent:hover { background:var(--orange-d); box-shadow:0 4px 12px rgba(245,94,50,.28); }
  /* 实色按钮/胶囊文字恒白(含 hover/active/visited), 防止全局 a:hover 绿字压实色底 */
  a.btn-primary, a.btn-primary:hover, a.btn-primary:active, a.btn-primary:visited,
  a.btn-accent, a.btn-accent:hover, a.btn-accent:active, a.btn-accent:visited,
  a.btn-danger, a.btn-danger:hover, a.btn-danger:active, a.btn-danger:visited,
  .btn-primary, .btn-primary:hover, .btn-accent, .btn-accent:hover,
  .btn-danger, .btn-danger:hover,
  .hcard-btn, .hcard-btn:hover, .hcard-btn:visited,
  .hero-cta, .hero-cta:hover, .hero-cta:visited,
  .why-cta a, .why-cta a:hover, .why-cta a:visited,
  .pc-chip.on, .pc-chip.on:hover, .pc-chip.on:visited,
  .cur-pill.on, .cur-pill.on:hover,
  .zone-tab.on, .zone-tab.on:hover,
  .scn-tab.on, .scn-tab.on:hover,
  .off-tag, .pay-steps .step.on .dot { color:#fff !important; }
  /* 门户主 CTA 一律橙色(设计稿 Upgrade Now / Continue / Send Message);
     品牌绿仅用于链接/导航/选中态描边/tag/图标; 员工后台 btn-primary 仍为 teal */
  body:not(.staff-body) .btn-primary { background:var(--orange); }
  body:not(.staff-body) .btn-primary:hover { background:var(--orange-d); box-shadow:0 4px 12px rgba(245,94,50,.28); }
  .btn-danger { background:#e64545; color:#fff; }
  .btn-danger:hover { background:#cf3a3a; }
  .btn-disabled { background:#d4d8e0; color:#8a93a5; cursor:not-allowed; }
  .btn-outline { background:#fff; border:1px solid #d4d8e0; color:#4b5563; }
  .btn-outline:hover { border-color:#28b894; color:#28b894; background:var(--brand-tint); }
  /* ================= 按钮设计系统 v2(全站统一: 前台/后台同一套 tokens) =================
     类型档: primary 主绿实心(门户自动橙) / accent 橙(购买·支付类) / outline 描边 /
             danger 红(危险操作) / ghost 弱操作链接型 / icon 图形按钮
     尺寸档: sm 28px·12px字 / md 34px·13px字(默认) / lg 44px·16px字
     宽度  : 内容自适应 + min-width 保底(sm 64 / md 88 / lg 120), 全宽用 .btn-block
     质感  : 顶部高光渐变 + 1px 半透边框 + 内高光 inset shadow(纯渐变模拟玻璃,
             不依赖 backdrop-filter); 描边/图形按钮半透明底, 支持时叠加毛玻璃 blur
     阴影  : 静态柔和投影 → hover 加深并上浮 1px → active 下沉回弹 */
  :root {
    --btn-h-sm:28px; --btn-h-md:34px; --btn-h-lg:44px;
    --btn-fs-sm:12px; --btn-fs-md:13px; --btn-fs-lg:16px;
    --btn-min-sm:64px; --btn-min-md:88px; --btn-min-lg:120px;
    --btn-glass:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 46%);
    --btn-hi:inset 0 1px 0 rgba(255,255,255,.28);
    --btn-shadow:0 2px 6px rgba(16,24,40,.10);
    --btn-shadow-hover:0 6px 16px rgba(16,24,40,.16);
    --btn-shadow-active:0 1px 3px rgba(16,24,40,.12);
  }
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
         height:var(--btn-h-md); min-width:var(--btn-min-md); padding:0 16px;
         font-size:var(--btn-fs-md); line-height:1; vertical-align:middle;
         box-shadow:var(--btn-hi),var(--btn-shadow);
         transition:background .15s,box-shadow .15s,border-color .15s,color .15s,transform .15s; }
  .btn:hover { transform:translateY(-1px); box-shadow:var(--btn-hi),var(--btn-shadow-hover); }
  .btn:active { transform:translateY(0); box-shadow:var(--btn-hi),var(--btn-shadow-active); }
  /* 尺寸档(mini-btn 为历史别名, 等同 btn-sm) */
  .btn-sm, .mini-btn { height:var(--btn-h-sm); min-width:var(--btn-min-sm); padding:0 12px; font-size:var(--btn-fs-sm); border-radius:6px; }
  .btn-md { height:var(--btn-h-md); min-width:var(--btn-min-md); padding:0 16px; font-size:var(--btn-fs-md); }
  .btn-lg { height:var(--btn-h-lg); min-width:var(--btn-min-lg); padding:0 28px; font-size:var(--btn-fs-lg); }
  .btn-block { display:flex; width:100%; min-width:0; }
  /* 玻璃质感: 实色档叠加顶部高光渐变(含门户橙 CTA 的覆盖场景) */
  .btn-primary, .btn-accent, .btn-danger,
  .btn-primary:hover, .btn-accent:hover, .btn-danger:hover,
  body:not(.staff-body) .btn-primary,
  body:not(.staff-body) .btn-primary:hover { background-image:var(--btn-glass); }
  .btn-primary, .btn-accent, .btn-danger { border:1px solid rgba(16,24,40,.08); }
  /* 描边档: 半透渐变底 + 内高光(深色/浅色背景均柔和) */
  .btn-outline { background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,250,252,.88)); border:1px solid rgba(212,216,224,.9); }
  /* 弱操作链接型 */
  .btn-ghost { background:transparent; border:1px solid transparent; color:var(--teal-d); box-shadow:none; min-width:0; }
  .btn-ghost:hover { background:rgba(40,184,148,.08); box-shadow:none; }
  /* 图形按钮(服务卡电源/重启等): 方形固定尺寸 */
  .btn-icon { min-width:0; width:var(--btn-h-md); padding:0; background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,250,252,.88)); border:1px solid rgba(212,216,224,.9); color:#4B4B4B; }
  .btn-icon.btn-sm { width:var(--btn-h-sm); }
  .btn-icon.btn-lg { width:var(--btn-h-lg); }
  /* 禁用态: 不上浮不投影 */
  .btn-disabled { box-shadow:none; }
  .btn-disabled:hover { transform:none; box-shadow:none; }
  /* 毛玻璃增强: 不支持的浏览器自动降级为上方纯渐变 */
  @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) {
    .btn-outline, .btn-icon { background:rgba(255,255,255,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
    .btn-ghost:hover { background:rgba(40,184,148,.10); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
  }
  h2.page-title { font-size:22px; font-weight:600; color:var(--ink); margin-bottom:18px; }
  /* ===== 页面标题栏: 返回按钮统一右上角 ===== */
  .page-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
  .page-head .page-title { margin-bottom:0; }
  .page-back { white-space:nowrap; padding:6px 14px; font-size:13px; text-decoration:none; }
  table { width:100%; border-collapse:collapse; font-size:14px; }
  th, td { text-align:left; padding:11px 10px; border-bottom:1px solid #eef1f6; }
  th { color:var(--muted-tx); font-weight:500; font-size:12px; letter-spacing:.3px; }
  /* ===== 状态胶囊(设计稿 Active / Pending Payment / Pending Reply / Closed / Refund) ===== */
  .tag { display:inline-block; padding:3px 12px; border-radius:999px; font-size:12px; font-weight:500; line-height:1.6; white-space:nowrap; }
  .tag-pending { background:#fde8e8; color:#e64545; }
  .tag-pending_verify { background:#fff0e6; color:#d9711e; }
  .tag-paid { background:#e8f9f0; color:#18a058; }
  .tag-delivering { background:#fff8e1; color:#d98a00; }
  .tag-active { background:#e8f9f0; color:#18a058; }
  .tag-closed { background:#f0f1f5; color:#8a93a5; }
  .tag-refunded { background:#f3e8ff; color:#7c3aed; }
  .amount-big { font-size:34px; color:#e64545; font-weight:700; }
  /* ===== 支付渠道卡片化 ===== */
  .channel { display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:12px; background:#fff; transition:border-color .15s,box-shadow .15s; }
  .channel:hover { border-color:#28b894; box-shadow:0 2px 10px rgba(40,184,148,.10); }
  .channel .note { font-size:12px; color:#9aa3b2; }
  .muted { color:#5c6670; font-size:13px; }
  .banner { padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:14px; }
  .banner-ok { background:#e8f8ee; color:#18a058; }
  .kv { display:flex; padding:8px 0; font-size:14px; }
  .kv .k { width:110px; color:var(--muted-tx); flex-shrink:0; }
  /* ===== 门户表单控件: 浅灰填充 + 聚焦品牌绿描边(不影响员工后台) ===== */
  body:not(.staff-body) input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
  body:not(.staff-body) select,
  body:not(.staff-body) textarea { font-family:inherit; background:#f7f8fa !important; border:1px solid var(--line) !important; border-radius:8px !important; }
  body:not(.staff-body) input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
  body:not(.staff-body) select:focus,
  body:not(.staff-body) textarea:focus { outline:none; border-color:#28b894 !important; background:#fff !important; box-shadow:0 0 0 3px rgba(40,184,148,.12); }
  /* ===== 折扣签(设计稿橙色标签) ===== */
  .off-tag { display:inline-block; background:var(--orange); color:#fff; font-size:11px; font-weight:600; padding:2px 8px; border-radius:4px 12px 12px 4px; line-height:1.6; }
  /* ===== 步骤时间线(Payment Process) ===== */
  .pay-steps { display:flex; align-items:center; gap:10px; margin:0 auto 22px; max-width:1040px; }
  .pay-steps .step { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted-tx); font-weight:500; white-space:nowrap; }
  .pay-steps .step .dot { width:26px; height:26px; border-radius:50%; background:#fff; border:2px solid var(--line); color:var(--muted-tx); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }
  .pay-steps .step.on { color:var(--ink); }
  .pay-steps .step.on .dot { background:#28b894; border-color:#28b894; color:#fff; }
  .pay-steps .step.done { color:#28b894; }
  .pay-steps .step.done .dot { background:var(--brand-tint); border-color:#28b894; color:#28b894; }
  .pay-steps .step-line { flex:1; height:2px; background:var(--line); min-width:24px; }
  .pay-steps .step-tag { margin-left:auto; background:var(--orange-tint); color:var(--orange-d); font-size:12px; font-weight:600; padding:3px 12px; border-radius:999px; white-space:nowrap; }
  .footer { background:radial-gradient(1000px 220px at 50% 0%, rgba(40,184,148,.07), transparent 70%), #191a23; color:#b6b7c1; margin-top:56px; }
  .footer-inner { max-width:1240px; margin:0 auto; padding:44px 24px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
  .footer h4 { color:#fff; font-size:15px; margin-bottom:12px; font-weight:600; }
  .footer a { display:block; color:#b6b7c1; text-decoration:none; font-size:13px; line-height:2.1; }
  .footer a:hover { color:#28b894; }
  .footer .contact-item { font-size:13px; line-height:2.1; }
  .footer .copy { border-top:1px solid rgba(239,238,236,.08); margin-top:32px; padding:16px 24px; text-align:center; font-size:12px; color:#8a8b98; }
  @media (max-width: 760px) {
    .footer-inner { grid-template-columns:1fr 1fr; gap:18px; }
    .topbar-inner { flex-wrap:wrap; gap:8px; }
    .pay-steps .step-tag { display:none; }
  }

  /* ===== 前台卡片: 直角 + hover 边框光线环绕(腾讯云风格, conic-gradient 角动画, 无 JS 定时器) =====
     注: 首页活动奖券卡(.promo-card)豁免(保留原版圆角与 hover);
     分类页常见问题折叠卡(.qa-item)豁免环绕光效(仅保持直角白卡, hover 用自身简洁反馈) */
  @property --orbit-a { syntax:'<angle>'; initial-value:0deg; inherits:false; }
  body.portal-body .card, body.portal-body .hcard,
  body.portal-body .region-card, body.portal-body .why-card, body.portal-body .scn-detail,
  body.portal-body .app-card, body.portal-body .ud-card, body.portal-body .adv-card,
  body.portal-body .pc-card, body.portal-body .qa-item { border-radius:0; position:relative; }
  body.portal-body .card::after, body.portal-body .hcard::after,
  body.portal-body .region-card::after, body.portal-body .why-card::after, body.portal-body .scn-detail::after,
  body.portal-body .app-card::after, body.portal-body .ud-card::after, body.portal-body .adv-card::after,
  body.portal-body .pc-card::after {
    content:''; position:absolute; inset:0; padding:1px; pointer-events:none; z-index:3;
    background:conic-gradient(from var(--orbit-a), transparent 0deg, transparent 288deg, rgba(40,184,148,.18) 315deg, rgba(40,184,148,.55) 338deg, rgba(40,184,148,.95) 352deg, transparent 360deg);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite:exclude;
    opacity:0; transition:opacity .25s;
  }
  body.portal-body .card:hover::after, body.portal-body .hcard:hover::after,
  body.portal-body .region-card:hover::after, body.portal-body .why-card:hover::after, body.portal-body .scn-detail:hover::after,
  body.portal-body .app-card:hover::after, body.portal-body .ud-card:hover::after, body.portal-body .adv-card:hover::after,
  body.portal-body .pc-card:hover::after { opacity:1; animation:orbitSpin 3.6s linear infinite; }
  @keyframes orbitSpin { to { --orbit-a:360deg; } }

  /* ===== 前台右侧悬浮工具条(腾讯云官网形态): 分离元素竖排悬挂右缘 =====
     品牌绿竖排胶囊(联系销售) + 白色圆形按钮(用户支持/工单支持), 彼此有间距, hover 轻微放大 */
  .side-dock { position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:9980; display:flex; flex-direction:column; align-items:center; gap:12px; }
  .sd-item { position:relative; }
  .sd-pill { writing-mode:vertical-rl; letter-spacing:4px; display:flex; align-items:center; justify-content:center; width:44px; padding:16px 0; border-radius:999px; background:linear-gradient(180deg,#2fd0a4 0%,#28b894 60%,#20a07f 100%); color:#fff; font-size:14px; font-weight:600; line-height:1; text-decoration:none; box-shadow:0 4px 12px rgba(40,184,148,.35); transition:transform .15s,box-shadow .15s; }
  .sd-pill:hover { transform:scale(1.05); box-shadow:0 6px 18px rgba(40,184,148,.48); color:#fff; }
  .sd-dot { display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; background:#fff; border:1px solid #e9edf3; box-shadow:0 3px 10px rgba(20,24,28,.12); color:#5a6472; cursor:pointer; transition:transform .15s,box-shadow .15s,color .15s; }
  .sd-dot:hover { transform:scale(1.06); box-shadow:0 5px 15px rgba(20,24,28,.18); color:#28b894; }
  .sd-panel { position:absolute; right:100%; top:50%; transform:translate(8px,-50%); margin-right:12px; width:210px; background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(20,24,28,.18); padding:16px; opacity:0; visibility:hidden; transition:opacity .2s,transform .2s,visibility .2s; }
  .sd-item.sd-hover:hover .sd-panel { opacity:1; visibility:visible; transform:translate(0,-50%); }
  .sd-panel .t { font-size:14px; font-weight:600; color:#191a23; margin-bottom:6px; }
  .sd-panel p { font-size:12px; color:#8a93a5; line-height:1.7; margin:0 0 10px; }
  .sd-panel a.pgo { display:inline-block; background:#28b894; color:#fff !important; font-size:12px; padding:6px 14px; border-radius:6px; text-decoration:none; }
  .sd-panel a.pgo:hover { background:#20a07f; }
  @media (max-width: 760px) { .side-dock { display:none; } }
  @media (prefers-reduced-motion: reduce) {
    body.portal-body .card::after, body.portal-body .hcard::after,
    body.portal-body .region-card::after, body.portal-body .why-card::after, body.portal-body .scn-detail::after,
    body.portal-body .app-card::after, body.portal-body .ud-card::after, body.portal-body .adv-card::after,
    body.portal-body .pc-card::after { animation:none !important; }
  }
  /* 统一线性图标(lnicon): 行内对齐微调 */
  svg.lni { flex-shrink:0; vertical-align:-2px; }
  .topbar svg.lni, .staff-head svg.lni { vertical-align:-3px; }
  .footer .contact-item svg.lni { vertical-align:-2px; margin-right:3px; color:#8a8b98; }

  /* ===== 员工后台 shell(设计稿: 左侧栏 + 顶栏 + 内容区) ===== */
  .staff-layout { display:flex; min-height:100vh; }
  /* 深色侧栏: 深灰底浅色文字; hover/激活项品牌绿底白字高亮 */
  .staff-side { width:232px; flex-shrink:0; background:#1f2329; border-right:1px solid #14171b; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
  .staff-side .logo { padding:20px 22px 16px; font-size:20px; font-weight:700; color:#f0f3f6; text-decoration:none; display:block; }
  .staff-side .logo span { color:var(--teal); }
  .staff-side .logo small { display:block; font-size:11px; font-weight:400; color:#8b949e; letter-spacing:2px; margin-top:2px; }
  .side-menu { flex:1; overflow-y:auto; padding:8px 12px; }
  .side-menu .sm-label { font-size:11px; color:#7d8590; padding:14px 12px 6px; letter-spacing:1px; }
  .staff-shell .side-menu a { display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:2px; border-radius:8px; font-size:14px; font-weight:500; color:#c9d1d9; text-decoration:none; transition:background .15s,color .15s; }
  .side-menu a .ico { width:20px; display:inline-flex; align-items:center; justify-content:center; }
  .staff-shell .side-menu a:hover { background:var(--teal-d); color:#fff; }
  .staff-shell .side-menu a.on { background:var(--teal); color:#fff; font-weight:600; }
  .side-foot { border-top:1px solid #2c3138; padding:10px 12px; }
  .staff-shell .side-foot a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; font-size:13px; color:#9aa5b1; text-decoration:none; transition:background .15s,color .15s; }
  .staff-shell .side-foot a:hover { color:#fff; background:var(--teal-d); }
  .staff-main { flex:1; min-width:0; display:flex; flex-direction:column; }
  .staff-head { background:#fff; border-bottom:1px solid var(--line2); padding:0 28px; height:60px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50; }
  .staff-head .sh-title { font-size:16px; font-weight:600; color:var(--ink); }
  .staff-head .sh-right { display:flex; align-items:center; gap:18px; font-size:14px; color:var(--body-tx); }
  .staff-head .sh-right a { color:var(--body-tx); text-decoration:none; }
  .staff-head .sh-right a:hover { color:var(--teal); }
  .staff-content { padding:28px; max-width:1320px; width:100%; margin:0 auto; }
  /* 后台组件规范: 按钮长度/圆角/字号/输入框焦点/表格 */
  .staff-shell h2.page-title { font-size:24px; font-weight:600; color:var(--ink); margin-bottom:20px; }
  /* verify-badge: 紧跟 H1 后方 inline 展示, 与标题垂直中心对齐(仅客户后台各页) */
  .verify-badge { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:400; line-height:1.6; padding:4px 12px; border-radius:8px; vertical-align:middle; margin-left:10px; }
  .verify-badge a { font-weight:600; text-decoration:underline; }
  .vb-warn { background:#fff8e6; color:#8a6d1a; border:1px solid #f0d78c; }
  .vb-warn a { color:#0f7a5f; }
  .vb-pending { background:#eaf4ff; color:#1d5fbf; border:1px solid #c5ddfb; }
  .vb-banned { background:#fdecec; color:#b3261e; border:1px solid #f5c6c6; }
  .vb-banned a { color:#b3261e; }
  /* 卡片 hover 上浮(仅 transform/阴影, 0.18s, 无常驻动画); 含表单的卡片豁免, 避免填写时抖动 */
  .staff-shell .card { border-radius:12px; box-shadow:0 2px 10px rgba(0,60,64,.06); transition:transform .18s ease, box-shadow .18s ease; }
  .staff-shell .card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,60,64,.12); }
  .staff-shell .card:has(form):hover { transform:none; box-shadow:0 2px 10px rgba(0,60,64,.06); }
  /* 大列表分页控件(每页20条, ?page=N; 系统设置可关闭回退全量渲染) */
  .pg-bar { display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-top:14px; flex-wrap:wrap; }
  .pg-total { font-size:12px; color:var(--muted-tx); margin-right:auto; }
  .pg-btn, .pg-num { display:inline-block; padding:6px 12px; border:1px solid var(--line); border-radius:6px; font-size:13px; background:#fff; text-decoration:none; }
  .pg-num { min-width:34px; text-align:center; padding:6px 8px; }
  .pg-btn:hover, .pg-num:hover { border-color:var(--teal); }
  .pg-num.pg-on { background:var(--teal); border-color:var(--teal); font-weight:600; }
  .pg-btn.pg-dis { opacity:.45; cursor:default; }
  .pg-ellipsis { color:var(--muted-tx); padding:0 2px; }
  /* 覆盖 .staff-shell a 的通用链接色, 保持分页控件中性灰/激活白字 */
  .staff-shell a.pg-btn, .staff-shell a.pg-num { color:var(--body-tx); }
  .staff-shell a.pg-btn:hover, .staff-shell a.pg-num:hover { color:var(--teal-d); }
  .staff-shell .pg-num.pg-on, .staff-shell a.pg-num.pg-on:hover { color:#fff; }
  .staff-shell .btn { font-family:inherit; font-weight:500; border-radius:8px; padding:10px 20px; font-size:14px; }
  .staff-shell .btn-sm { padding:6px 14px; font-size:12px; border-radius:6px; }
  .staff-shell .btn-primary { background:var(--teal); }
  .staff-shell .btn-primary:hover { background:var(--teal-d); }
  .staff-shell .btn-accent { background:var(--orange); color:#fff; }
  .staff-shell .btn-accent:hover { background:var(--orange-d); }
  .staff-shell .btn-outline { border-color:var(--teal); color:var(--teal-d); }
  .staff-shell .btn-outline:hover { background:var(--teal-tint2); }
  /* 员工后台并入按钮设计系统 v2: 尺寸档与门户一致, 实色档补玻璃高光 */
  .staff-shell .btn { height:var(--btn-h-md); min-width:var(--btn-min-md); padding:0 16px; font-size:var(--btn-fs-md); line-height:1; box-shadow:var(--btn-hi),var(--btn-shadow); }
  .staff-shell .btn:hover { transform:translateY(-1px); box-shadow:var(--btn-hi),var(--btn-shadow-hover); }
  .staff-shell .btn:active { transform:translateY(0); box-shadow:var(--btn-hi),var(--btn-shadow-active); }
  .staff-shell .btn-sm, .staff-shell .mini-btn { height:var(--btn-h-sm); min-width:var(--btn-min-sm); padding:0 12px; font-size:var(--btn-fs-sm); }
  .staff-shell .btn-lg { height:var(--btn-h-lg); min-width:var(--btn-min-lg); padding:0 28px; font-size:var(--btn-fs-lg); }
  .staff-shell .btn-primary, .staff-shell .btn-accent, .staff-shell .btn-danger,
  .staff-shell .btn-primary:hover, .staff-shell .btn-accent:hover, .staff-shell .btn-danger:hover { background-image:var(--btn-glass); border:1px solid rgba(16,24,40,.08); }
  .staff-shell .btn-outline, .staff-shell .btn-outline:hover { border:1px solid rgba(40,184,148,.45); }
  .staff-shell input, .staff-shell select, .staff-shell textarea { font-family:inherit; }
  .staff-shell input:focus, .staff-shell select:focus, .staff-shell textarea:focus { outline:none; border-color:var(--teal) !important; }
  .staff-shell table { font-size:14px; }
  .staff-shell th { font-size:12px; color:var(--muted-tx); font-weight:500; }
  .staff-shell a { color:var(--teal-d); }
  .staff-shell a:hover { color:var(--teal); }
  @media (max-width: 900px) {
    .staff-side { display:none; }
    .staff-content { padding:16px; }
  }