/**
 * ================================================
 * 法律提示：本程序/代码仅限合法用途使用，您可以修改自用，请保留版权
 * ================================================
 * 使用限制：禁止用于非法用途，作者不承担任何使用责任
 * ================================================
 * Copy right 2026 网博士网络工作室， 保留所有权利。
 * ================================================
 * 官方网址: www.网博士.com   联系：QQ: 570830288
 * ================================================
 */
/* ==========================================================================
   优品商城系统 · 前台用户中心样式
   /assets/css/user.css
   不依赖任何 UI 框架，PC / 平板 / 手机三端自适应。
   ========================================================================== */

/* 全站 SVG 图标的基础尺寸：1em 跟着字号走，颜色用 currentColor 跟文字 */
.ico-svg{
    display:inline-block;width:1em;height:1em;
    vertical-align:-.125em;flex:none;
}

:root{
  /* 主题色只是兜底。实际值由后台「模板设置 - 主色/辅色」注入，
     见 /user/func.php 里的 df_user_theme_css()，在每页 user.css 之后输出 */
  --u-accent:#1E6F8C;
  --u-accent-2:#2A87A8;
  --u-accent-soft:#EAF3F6;
  --u-accent-rgb:30,111,140;   /* 同上，给 rgba() 用的裸分量 */
  --u-dark:#141414;   /* 登录/注册/找回密码 那几页的底色：暗黑，跟后台同色 */
  --u-bg:#F5F7F9;
  --u-card:#FFFFFF;
  --u-text:#1B2733;
  --u-text-2:#41525F;
  --u-muted:#6B7C8C;
  --u-line:#E7ECF0;
  --u-line-2:#F0F4F6;
  --u-ok:#2E7D5B;
  --u-warn:#B8862B;
  --u-danger:#B33A2B;
  --u-radius:8px;
  --u-head-h:58px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--u-bg);color:var(--u-text);
  font:14px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--u-accent);text-decoration:none;transition:color .15s;}
a:hover{color:var(--u-accent-2);}
img{max-width:100%;vertical-align:middle;}
input,button,select,textarea{font-family:inherit;font-size:inherit;}
::selection{background:var(--u-accent);color:#fff;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#CCD6DD;border-radius:4px;}

/* ==========================================================================
   顶栏
   ========================================================================== */
.u-header{
  height:var(--u-head-h);background:#fff;border-bottom:1px solid var(--u-line);
  position:sticky;top:0;z-index:80;
}
.u-header-in{
  max-width:1180px;margin:0 auto;height:100%;padding:0 18px;
  display:flex;align-items:center;gap:18px;
}
.u-logo{
  display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;
  color:var(--u-text);white-space:nowrap;
}
.u-logo .dot{
  width:22px;height:22px;border-radius:6px;background:var(--u-accent);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  font-size:12px;font-weight:700;
}
.u-nav{display:flex;gap:4px;margin-left:8px;}
.u-nav a{
  padding:7px 12px;border-radius:6px;color:var(--u-text-2);font-size:14px;
  transition:background .15s,color .15s;
}
.u-nav a:hover{background:var(--u-line-2);}
.u-nav a.active{background:var(--u-accent-soft);color:var(--u-accent);font-weight:500;}
.u-head-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.u-mini-user{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--u-text-2);}
.u-burger{
  display:none;width:36px;height:36px;border:0;background:transparent;cursor:pointer;
  align-items:center;justify-content:center;border-radius:6px;
}
.u-burger:hover{background:var(--u-line-2);}
.u-burger span{display:block;width:18px;height:2px;background:var(--u-text);position:relative;}
.u-burger span::before,.u-burger span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--u-text);
}
.u-burger span::before{top:-6px;}
.u-burger span::after{top:6px;}

/* ==========================================================================
   页面骨架
   ========================================================================== */
/*
 * 容器宽度对齐前台首页那套 .fk-shell（/assets/red/css/home-refresh.css）：
 *   >=1081px → min(1320px, 100% - 72px)
 *   768~1080 → min(1200px, 100% - 48px)
 *   <=767px  → calc(100% - 32px)
 * 左右内边距一律吃掉，靠上面的公式留白，内容边缘才能跟头部的 logo / 导航对齐。
 */
.u-wrap{width:min(1320px, calc(100% - 72px));margin:0 auto;padding:20px 0 40px;}
.u-layout{display:flex;gap:20px;align-items:flex-start;}
/* 侧栏 212 - 30 = 182px；.u-main 是 flex:1，会自己吃掉这 30px */
.u-side{width:182px;flex:0 0 182px;position:sticky;top:calc(var(--u-head-h) + 20px);}
.u-main{flex:1;min-width:0;}

/* 用户中心（/user/）套的是前台公共头部 /template/default/header.php，
   顶栏高度跟这套 u-header 不一样，--u-head-h 得跟着改，侧栏吸顶才不会钻到头部底下；
   body 底色也在这里定回来，免得被前台手机端那条 body.fk-page 的浅蓝底盖掉。 */
body.u-user{--u-head-h:82px;background:var(--u-bg);}
/* 右上角现在显示的是用户账号，名字太长不能把头部撑开 */
body.u-user .fk-header-actions .fk-login-link{
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 手机端才出现的那条小顶栏：展开侧栏的按钮 + 当前页名 */
.u-topbar{display:none;align-items:center;gap:10px;margin:0 0 12px;}
.u-topbar-title{font-size:16px;font-weight:600;color:var(--u-text);}

.u-avatar{
  width:44px;height:44px;border-radius:50%;background:var(--u-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;
  flex:0 0 auto;overflow:hidden;
}
.u-avatar.sm{width:30px;height:30px;font-size:13px;}
.u-avatar img{width:100%;height:100%;object-fit:cover;}

/* 点头像换图（用户中心首页） */
.u-avatar-btn{position:relative;flex:0 0 auto;cursor:pointer;line-height:0;}
.u-avatar-btn .u-avatar-mask{
  position:absolute;left:0;top:0;right:0;bottom:0;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .18s;pointer-events:none;
}
.u-avatar-btn:hover .u-avatar-mask,
.u-avatar-btn.busy .u-avatar-mask{opacity:1;}

/* 侧栏 ------------------------------------------------------------------ */
.u-side-card{
  background:var(--u-card);border:1px solid var(--u-line);border-radius:var(--u-radius);
  overflow:hidden;margin-bottom:16px;
}
.u-side-user{padding:18px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--u-line-2);}
.u-side-user .n{font-weight:600;font-size:14px;}
.u-side-user .m{color:var(--u-muted);font-size:11.5px;margin-top:1px;}
/* 所有条目（含分隔线）上下间距统一走 gap，不再各写各的 margin */
.u-menu{padding:4px 0;display:flex;flex-direction:column;gap:2px;}
.u-menu a{
  display:flex;align-items:center;gap:10px;padding:0 16px;height:37px;
  color:var(--u-text-2);font-size:14px;border-left:2px solid transparent;
  transition:background .15s,color .15s;
}
.u-menu a:hover{background:var(--u-line-2);}
.u-menu a.active{
  background:var(--u-accent-soft);color:var(--u-accent);
  border-left-color:var(--u-accent);font-weight:500;
}
.u-menu .ico{width:16px;height:16px;flex:0 0 auto;opacity:.75;}
.u-menu a.active .ico{opacity:1;}
.u-menu .sep{height:1px;background:var(--u-line-2);margin:0 12px;flex:0 0 auto;}

/* 卡片 ------------------------------------------------------------------ */
.u-card{
  background:var(--u-card);border:1px solid var(--u-line);border-radius:var(--u-radius);
  box-shadow:0 1px 2px rgba(20,40,60,.05), 0 4px 14px rgba(20,40,60,.08);
  margin-bottom:16px;transition:border-color .18s;
}
.u-card:hover{border-color:#C7D6E0;}
.u-card-hd{
  padding:15px 18px;border-bottom:1px solid var(--u-line-2);
  display:flex;align-items:center;gap:10px;
}
.u-card-hd h2{margin:0;font-size:15px;font-weight:600;}
.u-card-hd .sub{color:var(--u-muted);font-size:12.5px;}
.u-card-hd .right{margin-left:auto;display:flex;gap:8px;align-items:center;}
.u-card-bd{padding:18px;}
.u-card-bd.tight{padding:0;}

/* 概览横幅 --------------------------------------------------------------- */
.u-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--u-accent) 0%,var(--u-accent-2) 100%);
  border-radius:var(--u-radius);padding:22px 24px;color:#fff;margin-bottom:16px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.u-hero>*{position:relative;z-index:1;}
/* 暗纹：只有 3 个，大小不一 —— 金币（大，贴右边金额）/ 会员卡（中，账号）/ 钱包（小，金额侧） */
.u-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='44' cy='44' r='40'/%3E%3Ccircle cx='44' cy='44' r='32'/%3E%3Cpath d='M34 22l10 11 10-11'/%3E%3Cpath d='M44 33v25'/%3E%3Cpath d='M34 39h20'/%3E%3Cpath d='M34 47h20'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='9' width='42' height='28' rx='5'/%3E%3Ccircle cx='14.5' cy='19.5' r='4.6'/%3E%3Cpath d='M7 32.5c1.5-4.3 4.3-6.4 7.5-6.4s6 2.1 7.5 6.4'/%3E%3Cpath d='M26 19h12'/%3E%3Cpath d='M26 27h8'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='8.5' width='25' height='17' rx='3.5'/%3E%3Cpath d='M7.5 8.5V6.6a2.6 2.6 0 012.6-2.6h9.8a2.6 2.6 0 012.6 2.6v1.9'/%3E%3Ccircle cx='21.5' cy='17' r='2'/%3E%3C/svg%3E");
  background-size:88px 88px,46px 46px,30px 30px;
  background-position:right -18px center,34% 50%,74% 74%;
  opacity:.16;
}
/* 右上柔光，给暗纹垫个底 */
.u-hero::after{
  content:"";position:absolute;right:-60px;top:-110px;width:300px;height:300px;z-index:0;
  pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.2),transparent 72%);
}
.u-hero .u-avatar{width:56px;height:56px;font-size:21px;background:rgba(255,255,255,.18);}
.u-hero .who{flex:1;min-width:160px;}
.u-hero .who h1{margin:0 0 3px;font-size:17px;font-weight:600;}
.u-hero .who p{margin:0;opacity:.78;font-size:13px;font-variant-numeric:tabular-nums;}
.u-hero .money{text-align:right;}
.u-hero .money .v{font-size:26px;font-weight:600;letter-spacing:-.5px;font-variant-numeric:tabular-nums;}
.u-hero .money .t{opacity:.78;font-size:12.5px;}

/* 统计格 ----------------------------------------------------------------- */
.u-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px;}
/* 余额页概览：固定 4 列（不写行内 style，好让移动端媒体查询把它改成 2 列） */
.u-bal-stats{grid-template-columns:repeat(4,1fr);}
/* 自适应版：按卡片最小宽度自动排，宽屏 4~5 列，窄屏自然掉成 2 列 */
.u-stats.u-stats-auto{grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;}
.u-stat{
  background:var(--u-card);border:1px solid var(--u-line);border-radius:var(--u-radius);
  padding:16px;transition:border-color .18s;
}
.u-stat:hover{border-color:#CFDCE3;}
.u-stat .t{color:var(--u-muted);font-size:12.5px;}
.u-stat .v{font-size:23px;font-weight:600;margin-top:6px;font-variant-numeric:tabular-nums;}
.u-stat.ok .v{color:var(--u-ok);}
.u-stat.warn .v{color:var(--u-warn);}
.u-stat.danger .v{color:var(--u-danger);}

/* --------------------------------------------------------------------------
   概览卡片 · 渐变版（余额页在用）
   默认 .u-stat 是白底，只有带上 .grad 的卡片才变彩底，
   其它页面（首页订单统计等）不受影响。
   -------------------------------------------------------------------------- */
.u-stat.grad{
  position:relative;overflow:hidden;border:0;padding:16px 16px 15px;color:#fff;
  box-shadow:0 5px 14px rgba(12,26,38,.10);
  transition:transform .18s ease,box-shadow .18s ease;
}
.u-stat.grad:hover{transform:translateY(-2px);box-shadow:0 11px 22px rgba(12,26,38,.17);}
/* 两块半透明光斑，纯装饰 */
.u-stat.grad::before{
  content:"";position:absolute;right:-20px;bottom:-28px;width:98px;height:98px;
  border-radius:50%;background:rgba(255,255,255,.15);
}
.u-stat.grad::after{
  content:"";position:absolute;left:-32px;top:-40px;width:88px;height:88px;
  border-radius:50%;background:rgba(255,255,255,.10);
}
.u-stat.grad .t{position:relative;z-index:1;color:rgba(255,255,255,.88);}
.u-stat.grad .v,
.u-stat.grad.ok .v,
.u-stat.grad.warn .v,
.u-stat.grad.danger .v{position:relative;z-index:1;color:#fff;}
.u-stat.grad .u-stat-ic{
  position:absolute;right:14px;top:14px;z-index:1;
  width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
}
.u-stat.grad .u-stat-ic svg{
  width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
/* 主色那张跟着后台「模板设置」的主色走，其余三张固定色 */
.u-stat.grad.theme{background:linear-gradient(135deg,var(--u-accent-2,var(--u-accent)) 0%,var(--u-accent) 100%);}
.u-stat.grad.amber{background:linear-gradient(135deg,#F0A93B 0%,#D9761A 100%);}
.u-stat.grad.green{background:linear-gradient(135deg,#39B37C 0%,#1E8A5A 100%);}
.u-stat.grad.violet{background:linear-gradient(135deg,#8B7BE8 0%,#6A4FD1 100%);}
/* --------------------------------------------------------------------------
   统计卡 .kpi（首页订单统计 / 我的店铺数据 共用）
   白底细边：颜色只落在右上角那一小块标识上，整卡不铺色底、不加纹样
   -------------------------------------------------------------------------- */
.kpi{
  position:relative;display:block;min-width:0;
  padding:13px 15px 14px;
  background:var(--u-card);border:1px solid var(--u-line);border-radius:10px;
  color:inherit;text-decoration:none;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
  --k-c:#5D6D7A;                 /* 标识色，同时给状态点用 */
  --k-bg:rgba(93,109,122,.10);   /* 标识底色 */
}
.kpi:hover{
  color:inherit;border-color:#D3DDE4;
  box-shadow:0 3px 12px rgba(20,38,52,.06);transform:translateY(-1px);
}
.kpi:active{transform:none;box-shadow:none;}
.kpi:focus-visible{outline:2px solid var(--u-accent);outline-offset:2px;}

/* 右上角小标识 */
.kpi-ic{
  position:absolute;top:12px;right:13px;
  width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--k-bg);color:var(--k-c);
}
.kpi-ic svg{
  width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.kpi-bd{display:block;min-width:0;}
.kpi .t{
  display:block;padding-right:32px;
  font-size:12.5px;line-height:24px;letter-spacing:.2px;
  color:var(--u-muted);white-space:nowrap;
}
.kpi .v{
  display:block;margin-top:1px;
  font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.3px;
  color:var(--u-text);font-variant-numeric:tabular-nums;
}
/* 货币符号比数值矮一档，视觉重心落在数字上 */
.kpi .v .cur{font-size:14.5px;font-style:normal;font-weight:500;color:#8C99A5;margin-right:2px;letter-spacing:0;}
/* 补充说明（在售 / 抽成 / 要求）统一排在数值下一行 */
.kpi .v small{display:block;margin-top:5px;font-size:12px;font-weight:400;color:#8C99A5;letter-spacing:0;}

/* 有数字堆积需要处理时（待支付、待发货），标题前点一个小状态点 */
.kpi.alert .t{position:relative;padding-left:10px;}
.kpi.alert .t::before{
  content:"";position:absolute;left:0;top:10px;
  width:5px;height:5px;border-radius:50%;background:var(--k-c);
}

/* 五个主题色只换标识的色值，卡片本身始终是白底 */
.kpi.blue  {--k-c:#2F6FED;--k-bg:rgba(47,111,237,.10);}
.kpi.green {--k-c:#1F9364;--k-bg:rgba(31,147,100,.11);}
.kpi.amber {--k-c:#C9821C;--k-bg:rgba(201,130,28,.12);}
.kpi.violet{--k-c:#6B57CC;--k-bg:rgba(107,87,204,.11);}
.kpi.cyan  {--k-c:#0F8CA3;--k-bg:rgba(15,140,163,.11);}

/* 我的店铺：数据卡网格（首页订单统计用 .u-stats-auto） */
.u-gridstats{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
}

@media (max-width:1199px){
  .kpi .v,.u-gridstats .kpi .v{font-size:21px;}
}
@media (max-width:767px){
  .kpi{padding:12px 13px 13px;border-radius:9px;}
  .kpi-ic{top:11px;right:12px;width:26px;height:26px;border-radius:7px;}
  .kpi .t{line-height:22px;}
  .kpi.alert .t::before{top:9px;}
  .kpi .v,.u-gridstats .kpi .v{font-size:20px;}
  .u-gridstats{gap:10px;}
}
@media (max-width:767px){.u-gridstats{gap:10px;}}

/* ==========================================================================
   表单
   ========================================================================== */
.u-field{margin-bottom:16px;}
.u-field > label{
  display:block;margin-bottom:6px;color:var(--u-text-2);font-size:13.5px;font-weight:500;
}
.tip{color:var(--u-muted);font-size:12.5px;line-height:1.6;}
.u-field .tip{margin-top:6px;}
.u-input,.u-textarea,.u-select{
  width:100%;height:42px;padding:0 13px;border:1px solid #DAE1E6;border-radius:6px;
  background:#fff;color:var(--u-text);outline:none;transition:border-color .16s,box-shadow .16s;
  /* 框里的字跟上面那行字段标题(label)一样大，原来继承 body 的 14px 看着比标题还大 */
  font-size:13.5px;
}
/* 没套 .u-input / .u-select 的原生控件（含下拉里的 option）也统一到这个字号 */
input:not([type=checkbox]):not([type=radio]):not([type=file]),
select,textarea,.u-input option,.u-select option{font-size:13.5px;}
.u-textarea{height:auto;min-height:104px;padding:11px 13px;line-height:1.7;resize:vertical;}
/* 评价内容框：底部吸一排快捷短语（点一下写进评价里，见 /user/OrderMark.php）。
   做法是把按钮行定位到框内底边，textarea 多留一块下内边距，字不会被按钮压住。 */
.u-quick-wrap{position:relative;}
/* 右边留出清空按钮的位置，下边留出快捷短语那一排（离底边 6px，不压住输入框的边框线） */
.u-textarea.u-textarea-quick{padding-bottom:52px;padding-right:32px;}
.u-quick-row{
  position:absolute;left:6px;right:6px;bottom:6px;
  display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;
  padding:7px 8px;background:#FAFCFD;border:1px solid var(--u-line-2,#F0F4F6);
  border-radius:8px;
}
/* 清空按钮：默认藏着，框里有内容才显示（.is-show 由 u-order-mark.js 加） */
.u-quick-wrap .u-clear-btn{
  position:absolute;top:9px;right:9px;z-index:2;
  display:none;align-items:center;justify-content:center;
  width:20px;height:20px;padding:0;border:0;border-radius:50%;
  background:#DDE5EB;color:#5C6E7C;cursor:pointer;transition:background .12s,color .12s;
}
.u-quick-wrap .u-clear-btn.is-show{display:flex;}
.u-quick-wrap .u-clear-btn svg{width:10px;height:10px;display:block;}
.u-quick-wrap .u-clear-btn:hover{background:#C9D5DE;color:#41525F;}
.u-quick-row .qw{
  flex:0 0 auto;cursor:pointer;white-space:nowrap;
  font-size:12.5px;line-height:1;padding:6px 10px;border-radius:12px;
  border:1px solid #DDE5EB;background:#fff;color:#41525F;
  transition:border-color .12s,color .12s;
}
.u-quick-row .qw:hover{border-color:var(--u-accent,#1E6F8C);color:var(--u-accent,#1E6F8C);}
.u-quick-row .qw:active{background:#F2F7F9;}
.u-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%236B7C8C'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:32px;}
.u-input:focus,.u-textarea:focus,.u-select:focus{
  border-color:var(--u-accent);box-shadow:0 0 0 3px rgba(var(--u-accent-rgb),.10);
}
.u-input::placeholder,.u-textarea::placeholder{color:#A8B5BF;}
.u-input:disabled,.u-textarea:disabled{background:#F5F7F9;color:var(--u-muted);cursor:not-allowed;}
.u-input.err,.u-textarea.err{border-color:var(--u-danger);}

.u-input-icon{position:relative;}
.u-input-icon .u-input{padding-left:40px;}
.u-input-icon > svg{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:#A8B5BF;pointer-events:none;
}
.u-input-group{display:flex;gap:10px;}
.u-input-group .u-input{flex:1;}
.u-input-group .u-input-icon{flex:1;min-width:0;}
.u-input-group img.cap{
  width:110px;height:42px;border:1px solid #DAE1E6;border-radius:6px;cursor:pointer;
  background:#F5F7F9;flex:0 0 auto;
}
/* 几个控件并排一行（手机号 + 验证码 + 获取验证码）：窄屏放不下才换行 */
.u-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.u-inline .u-input{flex:0 0 auto;width:auto;}
.u-inline .it-mobile{flex:1 1 210px;min-width:180px;max-width:280px;}
.u-inline .it-code{flex:0 0 120px;width:120px;}
.u-inline .u-btn{flex:0 0 auto;white-space:nowrap;}

.u-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:42px;padding:0 20px;border:1px solid transparent;border-radius:6px;
  background:var(--u-accent);color:#fff;cursor:pointer;font-size:14.5px;
  transition:background .16s,opacity .16s;white-space:nowrap;
}
.u-btn:hover{background:var(--u-accent-2);color:#fff;}
.u-btn:disabled,.u-btn.loading{opacity:.6;cursor:not-allowed;}
.u-btn.block{width:100%;}
.u-btn.ghost{background:#fff;border-color:#DAE1E6;color:var(--u-text-2);}
.u-btn.ghost:hover{border-color:var(--u-accent);color:var(--u-accent);background:#fff;}
.u-btn.danger{background:var(--u-danger);}
.u-btn.danger:hover{background:#C4432F;}
/* 预览店铺：实心主色（跟随后台「模板设置」主题色），和灰白的「店铺设置」区分开 */
.u-btn.accent{background:var(--u-accent);}
.u-btn.accent:hover{background:var(--u-accent-2);}
.u-btn.sm{height:32px;padding:0 13px;font-size:13px;border-radius:5px;}
.u-btn.xs{height:27px;padding:0 10px;font-size:12.5px;border-radius:5px;}

/*
 * 用户中心的按钮为什么看着「大一号」——不是这套样式写大了，是被前台头部盖掉了：
 *   /assets/red/css/home-refresh.css 里有一条
 *       .fk-page button { font: inherit; }
 *   而 /user/ 这些页的 <body> 是「fk-page u-user」（header.php 给的），
 *   它的权重（一个类 + 一个标签 = 0,1,1）高过 .u-btn（一个类 = 0,1,0），
 *   于是按钮字号被拉回 body 继承来的 15px（宽屏 ≥1081px 那档是 16px），
 *   42px 的框里塞 16px 的字，看着就比设计的大一圈。
 * 下面按「body.u-user + 类」把字号写回去（.sm / .xs 本身是 0,2,0 已经赢过它，
 * 一并写上是为了后面改尺寸时不会突然又踩回去）。
 */
body.u-user .u-btn{font-size:14.5px;line-height:1;}
body.u-user .u-btn.sm{font-size:13px;}
body.u-user .u-btn.xs{font-size:12.5px;}

/* 订单页「买入订单 / 售出订单」切换：两个按钮并排，当前那个实心 */
.u-otabs{display:flex;gap:10px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--u-line);}
.u-otab{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:112px;height:36px;padding:0 18px;border:1px solid #DAE1E6;border-radius:6px;
  background:#fff;color:var(--u-text-2);font-size:14px;transition:background .16s,border-color .16s,color .16s;
}
.u-otab:hover{border-color:var(--u-accent);color:var(--u-accent);}
.u-otab.on{background:var(--u-accent);border-color:var(--u-accent);color:#fff;}
.u-otab.on:hover{background:var(--u-accent-2);color:#fff;}
/* 同上：订单页那两颗「买入 / 售出订单」也是单类选择器，字号同样会被拉回继承值 */
body.u-user .u-otab{font-size:14px;}

/*
 * 按钮文字必须是白的——但前台头部的 home-refresh.css 里有一条
 *     .fk-page a { color: inherit; }
 * 而 <body> 自带 fk-page 这个类，它的权重（一个类 + 一个标签）比 .u-btn（一个类）高，
 * 蓝色按钮上的白字会被染成周围的深色，在 .u-empty 里还会变成灰色。
 * 下面按「标签 + 类」再写一遍把它压回去，链接的四种状态都覆盖到。
 * 幽灵按钮是白底，本来就应该是深字，所以单独按原样再声明一次。
 */
a.u-btn,
a.u-btn:link,
a.u-btn:visited,
a.u-btn:hover,
a.u-btn:focus{color:#fff;}
a.u-btn.ghost,
a.u-btn.ghost:link,
a.u-btn.ghost:visited{color:var(--u-text-2);}
a.u-btn.ghost:hover,
a.u-btn.ghost:focus{color:var(--u-accent);background:#fff;}
a.u-btn.accent,
a.u-btn.accent:link,
a.u-btn.accent:visited{color:#fff;}

/* 支付方式卡片（balance.php 充值）：品牌色字标 + 名称 + 选中对勾 ---------- */
.u-pays{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:10px;}
.u-pay{
  position:relative;display:flex;align-items:center;gap:9px;
  padding:10px 12px;border:1px solid var(--u-line);border-radius:var(--u-radius);
  background:#fff;color:var(--u-text-2);cursor:pointer;text-align:left;
  line-height:1.35;font-size:14px;font-family:inherit;
  transition:border-color .16s,background .16s,box-shadow .16s;
}
.u-pay:hover{border-color:#CBD6DE;background:#FCFDFD;}
.u-pay.on{
  border-color:var(--u-accent);background:var(--u-accent-soft);
  box-shadow:0 0 0 2px rgba(var(--u-accent-rgb),.09);
}
.u-pay-ic{
  width:30px;height:30px;flex:0 0 30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;line-height:1;
}
.u-pay-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 品牌图：图自带颜色，底色改白 + 浅描边；contain 保证不变形 */
.u-pay-ic.has-img{background:#fff;border:1px solid var(--u-line,#E7ECF0);}
.u-pay-ic img{width:20px;height:20px;display:block;object-fit:contain;}
.u-pay.mini .u-pay-ic img{width:16px;height:16px;}
.u-pay.on .u-pay-n{color:var(--u-accent);font-weight:600;}
.u-pay-ck{
  width:16px;height:16px;flex:0 0 16px;margin-left:2px;border-radius:50%;
  border:1px solid #D5DEE4;color:#D5DEE4;
  display:flex;align-items:center;justify-content:center;
  transition:background .16s,border-color .16s,color .16s;
}
.u-pay.on .u-pay-ck{background:var(--u-accent);border-color:var(--u-accent);color:#fff;}
.u-pay-ck svg{width:10px;height:10px;opacity:0;}
.u-pay.on .u-pay-ck svg{opacity:1;}
/* 二级通道小一号 */
.u-pay.mini{padding:6px 10px;gap:7px;}
.u-pay.mini .u-pay-ic{width:24px;height:24px;flex:0 0 24px;border-radius:6px;font-size:13px;}
.u-pay.mini .u-pay-n{font-size:13px;}

.u-check{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--u-muted);line-height:1.6;cursor:pointer;}
.u-check input{margin-top:3px;width:15px;height:15px;accent-color:var(--u-accent);flex:0 0 auto;cursor:pointer;}
.u-check a{color:var(--u-accent);}

.u-radio-row{display:flex;gap:10px;flex-wrap:wrap;}
.u-radio{
  display:flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid #DAE1E6;
  border-radius:6px;cursor:pointer;font-size:13.5px;color:var(--u-text-2);transition:all .15s;
}
.u-radio:hover{border-color:var(--u-accent);}
.u-radio input{accent-color:var(--u-accent);}
.u-radio.on{border-color:var(--u-accent);background:var(--u-accent-soft);color:var(--u-accent);}

/* ==========================================================================
   登录 / 注册 页
   ========================================================================== */
.u-auth{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;
  background:var(--u-dark);position:relative;overflow:hidden;
}
/* 背景图独立一层：opacity 只作用在这层，不会把里面的卡片一起弄淡。
   登录 / 注册 / 找回密码 三个页面共用 .u-auth，改一处三页都生效。
   原图 2560x109，缩到一半（1280x55）平铺；嫌大就调小 1280px，想更淡就调小 0.5 */
.u-auth::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(../images/bg.png) repeat left top;
  background-size:1280px auto;
  opacity:.5;
}
/* 层级：背景图 0 < 光晕 1 < 卡片 2 */
.u-auth::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(860px 480px at 74% 16%,rgba(var(--u-accent-rgb),.34),transparent 60%);
}
.u-auth-box{
  position:relative;z-index:2;width:404px;max-width:100%;background:#fff;border-radius:12px;
  padding:32px 32px 26px;box-shadow:0 20px 60px rgba(0,0,0,.3);
  animation:u-rise .38s cubic-bezier(.2,.7,.3,1);
}
@keyframes u-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.u-auth-box.min{box-shadow:none;padding:22px;width:100%;border-radius:0;}
.u-auth-hd{margin-bottom:22px;}
.u-auth-hd h1{margin:0 0 4px;font-size:20px;font-weight:600;display:flex;align-items:center;gap:9px;}
.u-auth-hd h1 .dot{width:24px;height:24px;border-radius:7px;background:var(--u-accent);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;}
/* 徽标里改成图标（login.svg / findpwd.svg / register.svg）后，尺寸定在这里：
   24px 的方牌里放 14px 的图，四周各留 5px。
   图里是白色线条（fill="#ffffff"），靠 .dot 的主色底衬出来，主色一换不用改图。
   display:block 去掉 img 底部的行内空隙，图标才正好居中 */
.u-auth-hd h1 .dot img{width:14px;height:14px;display:block;}
.u-auth-hd p{margin:0;color:var(--u-muted);font-size:13px;}
.u-auth-foot{margin-top:18px;text-align:center;color:var(--u-muted);font-size:13px;}
.u-auth-tabs{display:flex;gap:22px;border-bottom:1px solid var(--u-line);margin-bottom:20px;}
.u-auth-tabs a{
  padding:0 0 10px;color:var(--u-muted);font-size:14.5px;border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:all .15s;
}
.u-auth-tabs a.active{color:var(--u-accent);border-bottom-color:var(--u-accent);font-weight:500;}

.u-oauth{margin-top:12px;padding-top:14px;border-top:1px solid var(--u-line-2);text-align:center;}
.u-oauth .lb{color:var(--u-muted);font-size:12.5px;margin-bottom:12px;}
.u-oauth .row{display:flex;justify-content:center;gap:14px;}
.u-oauth a{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--u-line);
  display:flex;align-items:center;justify-content:center;transition:all .16s;
}
.u-oauth a:hover{border-color:var(--u-accent);transform:translateY(-2px);}
/* 各家品牌色的浅底，图标本身已经是彩色，底色只做点缀 */
.u-oauth a.oa-qq{background:#EAF6FE;border-color:#C7E6F9;}
.u-oauth a.oa-wx{background:#E9F8EF;border-color:#C8EBD7;}
.u-oauth a.oa-qq:hover{background:#DDEFFC;border-color:#8FD0F5;}
.u-oauth a.oa-wx:hover{background:#DCF3E6;border-color:#96D9B2;}
.u-oauth svg{width:19px;height:19px;}
/* 带文字的按钮形态：图标 + 「QQ登录」「微信登录」 */
.u-oauth a.oa-btn{width:auto;min-width:98px;height:44px;border-radius:8px;gap:7px;padding:0 16px;}
.u-oauth a.oa-btn .oa-tx{font-size:13px;color:#41525F;line-height:1;white-space:nowrap;}

.u-alert{
  padding:10px 13px;border-radius:6px;font-size:13px;margin-bottom:16px;line-height:1.6;display:none;
}
.u-alert.show{display:block;}
.u-alert.err{background:#FBEAE7;color:var(--u-danger);}
.u-alert.ok{background:#E7F3EE;color:var(--u-ok);}
.u-alert.info{background:var(--u-accent-soft);color:var(--u-accent);}
.u-alert.warn{background:#FDF3E3;color:#8A6212;}
.u-alert.static{display:block;}

/* ==========================================================================
   列表 / 表格
   ========================================================================== */
.u-table{width:100%;border-collapse:collapse;}
.u-table th{
  background:#FAFCFD;color:var(--u-text-2);font-weight:600;font-size:13px;text-align:left;
  padding:11px 14px;border-bottom:1px solid var(--u-line-2);white-space:nowrap;
}
.u-table td{padding:13px 14px;border-bottom:1px solid var(--u-line-2);font-size:13.5px;color:var(--u-text-2);}
.u-table tr:last-child td{border-bottom:0;}
.u-table tbody tr:hover{background:#FAFCFD;}
.u-table .num{font-variant-numeric:tabular-nums;}
.mono{font-family:Consolas,Menlo,monospace;font-size:12.5px;}
/* 用户中心各列表通用紧凑表格（余额 / 订单 / 推广 / 保证金 / 兑换券…都挂这个类）：
   照后台商品列表（layui 表格）的排法 —— 单元格不给上下内边距，改用固定行高，
   一行 36px（表头 32px），行与行之间用 --u-line 划一条看得出来的分割线。 */
.u-table.u-list-table th{
  padding:0 12px;height:32px;line-height:32px;font-size:12.5px;
  border-bottom:1px solid #DDE5EB;
}
.u-table.u-list-table td{
  padding:0 12px;height:36px;line-height:36px;font-size:13px;
  border-bottom:1px solid var(--u-line,#E7ECF0);
}
.u-table.u-list-table tbody tr:last-child td{border-bottom:0;}
.u-table.u-list-table tbody tr:hover{background:#FAFCFD;}
/* 行里的标签也收一点，别把行撑起来 */
.u-table.u-list-table .u-tag{padding:1px 8px;line-height:17px;}

/*
 * 过长文字一行显示 + 省略号（订单列表的商品名在用）。
 * 要套一层 .u-ell 而不是把样式直接写在 td 上：这表是自动布局，
 * 浏览器对 td 的 max-width 不一定认，套一层块级元素才稳。
 */
.u-ell{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* PC 表格：商品列封顶 240px，超了才出 … */
.u-table.u-list-table td.gn{max-width:240px;}
.u-table.u-list-table td.gn .u-ell{max-width:240px;}

/* 我的商品（/user/goods.php）：一屏多放几行，行距比别的表格紧一点 */
/*
 * 这一套照后台商品列表（/admin/shoplist.php，layui 表格）来的：
 *   layui 的 td 是 padding:0，行高由「单元格固定高度」决定，所以整行是一条细条；
 *   缩略图也是后台同款 34×34（.df-thumb）。
 * 前台这里同样：单元格不给上下内边距，改用 height + line-height 定行高，
 * 内容垂直居中，一行 36px，跟后台观感一致。
 */
/* 列宽按表头写的来（后台 layui 表格也是这个路子）：商品列没有固定宽度，
   吃掉剩下的空间；名字太长就截断成 …，不会把行撑高、也不会换行。 */
.u-table.u-goods-table{table-layout:fixed;}
.u-table.u-goods-table .g-name-cell,
.u-table.u-goods-table .g-name-cell .g-name{
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.u-table.u-goods-table .g-name-cell .g-name{display:block;}
/* 图片列：列宽写死后左右留白收一点，34px 的封面才装得下（后台同款尺寸） */
.u-table.u-goods-table td:first-child{padding:0 6px;}
.u-table.u-goods-table th{
  padding:0 12px;height:32px;line-height:32px;font-size:12.5px;
  border-bottom:1px solid #DDE5EB;
}
.u-table.u-goods-table td{
  padding:0 12px;height:36px;line-height:36px;font-size:13px;
  border-bottom:1px solid var(--u-line,#E7ECF0);
}
/* 行里的状态 / 类型标签也收一点，别把行撑起来 */
.u-table.u-goods-table .u-tag{padding:1px 8px;line-height:17px;}
/* 行与行之间的分割线：默认那条太浅（--u-line-2），这里换成 --u-line，一眼能看出一行一行 */
.u-table.u-goods-table tbody tr:last-child td{border-bottom:0;}
/* 封面：34×34 方块（后台 .df-thumb 同款尺寸），图整体缩放塞进去（contain，不裁），
   空出来的地方垫后台同款浅灰底 */
.u-table.u-goods-table .g-cover{width:34px;height:34px;object-fit:contain;
                                background:#EEF2F5;border-radius:2px;vertical-align:middle;}
/* 兑换码列表（/user/cash_manage.php）：商品名太长就用 … 收尾，不换行也不撑宽列，
   鼠标停上去看全名（title 在模板里） */
.u-table.u-cash-table .ell{
  display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 时间两列（有效期至 / 使用时间）：整串日期不拆行，列里放不下就顶宽，不换行 */
.u-table.u-cash-table .cell-time{white-space:nowrap;}

/* 时间列：只放日期，颜色淡一点不抢戏，鼠标停上去看具体时分（title 在模板里） */
.u-table.u-goods-table .g-time{color:var(--u-muted,#8A97A3);font-size:12.5px;
                               font-variant-numeric:tabular-nums;white-space:nowrap;}

.u-tag{display:inline-block;padding:2px 9px;border-radius:4px;font-size:12px;line-height:19px;background:#EEF2F5;color:var(--u-text-2);}
.u-tag.ok{background:#E7F3EE;color:var(--u-ok);}
.u-tag.warn{background:#FAF2E2;color:var(--u-warn);}
.u-tag.danger{background:#FBEAE7;color:var(--u-danger);}
.u-tag.info{background:var(--u-accent-soft);color:var(--u-accent);}

/* 订单列表「类型」列：不抢戏的小灰字 */
.u-type{font-size:12px;color:var(--u-text-2);white-space:nowrap;}
/* 「未发货」是可以点的（点了就发货），给点能点的样子：手型 + 悬停加深 + 下划虚线 */
a.u-tag.is-ship-tag{
  cursor:pointer;text-decoration:none;border-bottom:1px dashed currentColor;
  transition:filter .15s;
}
a.u-tag.is-ship-tag:hover{filter:brightness(.94);}

/* 状态标签右边的信息图标 + 悬停气泡 ---------------------------------------
   .df-info 是那个小圆 i，气泡文字写在 data-tip 里，
   用 ::after / ::before 画（气泡 + 小尖角），不用额外的 DOM 节点。
   目前用在哪：商品列表状态列的「驳回」标签（点开看管理员写的驳回原因）。 */
.df-info{
  position:relative;display:inline-block;vertical-align:1px;margin-left:5px;
  width:13px;height:13px;border-radius:50%;
  background:var(--u-muted);color:#fff;
  font:italic 600 10px/13px Georgia,"Times New Roman",serif;
  text-align:center;white-space:nowrap;cursor:pointer;
  transition:transform .16s ease;
}
/* 红标签上的小 i 跟着走危险色，跟「驳回」是一个色系 */
.u-tag.danger .df-info{background:var(--u-danger);}

/* 气泡本体 */
.df-info::after{
  content:attr(data-tip);
  position:absolute;left:50%;bottom:calc(100% + 9px);z-index:30;
  padding:6px 9px;border-radius:6px;
  background:rgba(20,32,42,.96);color:#fff;
  box-shadow:0 6px 18px rgba(16,32,42,.22);
  font-style:normal;font-weight:400;font-size:12px;line-height:1.5;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  white-space:nowrap;pointer-events:none;
  opacity:0;visibility:hidden;
  transform:translateX(-50%) translateY(4px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
/* 朝下的小尖角 */
.df-info::before{
  content:'';position:absolute;left:50%;bottom:calc(100% + 4px);z-index:30;
  margin-left:-5px;border:5px solid transparent;border-top-color:rgba(20,32,42,.96);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,visibility .18s;
}
/* 悬停（电脑）/ 聚焦（键盘 Tab）都出提示；整个标签悬停也算，鼠标更好碰到 */
.df-info:hover::after,
:focus > .df-info::after,
.g-reject:hover .df-info::after{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.df-info:hover::before,
:focus > .df-info::before,
.g-reject:hover .df-info::before{
  opacity:1;visibility:visible;
}
.df-info:hover,
.g-reject:hover .df-info{transform:scale(1.12);}

/* 触屏没有悬停，气泡不出来也不影响：直接点标签照样弹原因 */
@media (hover:none){
  .df-info::after,.df-info::before{content:none;}
}

.u-money{color:var(--u-danger);font-variant-numeric:tabular-nums;font-weight:500;}

/* 订单卡片（手机端用） --------------------------------------------------- */
.u-order-list{display:none;}
.u-order-item{padding:14px 16px;border-bottom:1px solid var(--u-line-2);}
.u-order-item:last-child{border-bottom:0;}
.u-order-item .top{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.u-order-item .top .no{font-family:Consolas,Menlo,monospace;font-size:12px;color:var(--u-muted);}
.u-order-item .top .u-tag{margin-left:auto;}
.u-order-item .gn{font-size:14.5px;font-weight:500;margin-bottom:6px;
                  display:flex;align-items:flex-start;gap:10px;}
/* 手机卡片里的商品封面：52×52 方块，整张图缩放塞进去（contain，不裁），
   没图的商品给个灰底占位，卡片高矮才一致 */
.u-order-item .gn .g-pic{
  flex:0 0 auto;width:52px;height:52px;border-radius:4px;overflow:hidden;
  background:#F4F7F9;display:flex;align-items:center;justify-content:center;
}
.u-order-item .gn .g-pic img{width:100%;height:100%;object-fit:contain;display:block;}
.u-order-item .gn .g-pic.none{color:#B7C2CC;font-size:11.5px;font-weight:400;}
.u-order-item .gn .g-name{flex:1;min-width:0;}
/* 手机卡片里的商品名（.gn 是 flex，子项得能收缩，省略号才出得来） */
.u-order-item .gn > .u-ell{flex:1;min-width:0;}
/* 商品名链接（PC 表格 + 手机卡片共用）：新窗口进商品详情。
   平时跟正文同色不抢戏，hover 才出主色 + 下划线提示可点 */
.g-name{color:inherit;}
.g-name:hover{color:var(--u-accent);text-decoration:underline;}
.u-order-item .meta{display:flex;align-items:center;gap:12px;color:var(--u-muted);font-size:12.5px;}
.u-order-item .ops{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;}

/* 分页 ------------------------------------------------------------------- */
/* 列表底栏：上边一条分割线，左边「共 N 件 · 第 x/y 页」，右边翻页按钮。
   样子按后台商品列表那条分页条来的（总数在左、页码在右）。 */
.u-list-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px 14px;border-top:1px solid var(--u-line,#E7ECF0);
  color:var(--u-muted,#6B7C8C);font-size:12.5px;
}
.u-list-foot .u-page{padding:0;margin-left:auto;}
.u-list-foot .u-page a,.u-list-foot .u-page span{
  min-width:30px;height:30px;padding:0 8px;font-size:12.5px;border-radius:4px;
}
.u-page{display:flex;justify-content:center;align-items:center;gap:6px;padding:16px;flex-wrap:wrap;}
.u-page a,.u-page span{
  min-width:32px;height:32px;padding:0 9px;border:1px solid #DEE5EA;border-radius:5px;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--u-text-2);
  transition:all .15s;
}
.u-page a:hover{border-color:var(--u-accent);color:var(--u-accent);}
.u-page .cur{background:var(--u-accent);border-color:var(--u-accent);color:#fff;}
.u-page .dis{color:#B7C3CC;cursor:not-allowed;}

/* 页签 ------------------------------------------------------------------
   收藏 / 订单 / 消费记录 三处都在用，做成一条「胶囊分段控件」：
   灰底槽 + 选中项浮起来的白片，数量用 <i> 或 .n 挂在文字后面。          */
.u-tabs{
  display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;
  background:var(--u-line-2);border:1px solid var(--u-line);border-radius:999px;
}
/* 前面加个 body：前台头部 home-refresh.css 里有 .fk-page a{color:inherit}，
   权重跟 .u-tabs a 一样，得抬一级才不会把页签文字染成正文色 */
body .u-tabs a{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 15px;border-radius:999px;text-decoration:none;
  font-size:13.5px;line-height:1;color:var(--u-text-2);
  transition:color .16s,background .16s,box-shadow .16s;
}
.u-tabs a svg{
  width:15px;height:15px;flex:none;opacity:.7;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.u-tabs a:hover{color:var(--u-accent);background:rgba(var(--u-accent-rgb),.07);}
.u-tabs a.active{
  background:var(--u-card);color:var(--u-accent);font-weight:600;
  box-shadow:0 1px 2px rgba(20,40,60,.08),0 2px 8px rgba(20,40,60,.10);
}
.u-tabs a.active svg{opacity:1;}
.u-tabs a i,.u-tabs a .n{
  font-style:normal;font-weight:600;font-size:11.5px;line-height:18px;
  min-width:18px;height:18px;padding:0 6px;border-radius:9px;text-align:center;
  background:rgba(var(--u-accent-rgb),.12);color:var(--u-accent);
}
.u-tabs a.active i,.u-tabs a.active .n{background:var(--u-accent);color:#fff;}
@media (max-width:560px){
  .u-tabs{display:flex;width:100%;}
  .u-tabs a{flex:1;justify-content:center;height:36px;padding:0 8px;}
}

/* 空态 / 骨架 ------------------------------------------------------------ */
.u-empty{padding:56px 20px;text-align:center;color:var(--u-muted);}
.u-empty svg{width:42px;height:42px;color:#CBD6DE;margin-bottom:12px;}
.u-empty p{margin:0 0 14px;font-size:13.5px;}

/* connect.php: 第三方账号两列（QQ / 微信） + 邮箱首行两列 -------
   每格是「图标 + 名称 / 状态小标 / 说明 + 操作按钮」横排一行，
   图标底色跟各自品牌色走：QQ 暖黄、微信浅绿。 */
.df-conn-row{display:grid;grid-template-columns:1fr 1fr;}
.df-conn-cell{
  padding:16px 18px;display:flex;align-items:center;gap:13px;
  transition:background .16s;
}
.df-conn-cell + .df-conn-cell{border-left:1px solid var(--u-line-2);}
.df-conn-cell:hover{background:#FAFCFD;}

/* 图标：42 的圆角方块，里面放 24px 的品牌 svg */
.df-conn-ico{
  flex:0 0 auto;width:42px;height:42px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--u-line);background:#F4F7F9;
}
.df-conn-ico img{width:24px;height:24px;display:block;}
.df-conn-cell.is-qq .df-conn-ico{background:#FFF8E9;border-color:#F7E4BC;}
.df-conn-cell.is-wx .df-conn-ico{background:#EAF9EE;border-color:#C7EBD3;}
/* 站长没开的那一项：整体淡一档，图标也去掉颜色 */
.df-conn-cell.off .df-conn-ico{background:#F4F7F9;border-color:var(--u-line);}
.df-conn-cell.off .df-conn-ico img{filter:grayscale(1);opacity:.55;}

.df-conn-main{flex:1;min-width:0;}
.df-conn-t{
  display:flex;align-items:center;gap:8px;
  font-weight:600;font-size:14.5px;line-height:1.4;
}
/* 状态小标：已绑定绿、未绑定灰 */
.df-conn-st{
  flex:0 0 auto;padding:1px 7px;border-radius:20px;
  font-size:11.5px;font-weight:400;line-height:17px;
  border:1px solid transparent;
}
.df-conn-st.ok{color:var(--u-ok);background:#EAF7F0;border-color:#C4E6D5;}
.df-conn-st.idle{color:var(--u-muted);background:#F4F7F9;border-color:var(--u-line);}
.df-conn-d{color:var(--u-muted);font-size:12.5px;line-height:1.55;margin-top:3px;word-break:break-all;}
.df-conn-op{flex:0 0 auto;padding-top:0;}

@media (max-width:520px){
  .df-conn-row{grid-template-columns:1fr;}
  .df-conn-cell + .df-conn-cell{border-left:0;border-top:1px solid var(--u-line-2);}
  /* 窄屏一行放不下按钮，让它换到第二行，顶着文字左边对齐 */
  .df-conn-cell{flex-wrap:wrap;}
  .df-conn-op{flex:1 1 100%;padding-left:55px;}
}
/* 两列宽度由内容决定：左列邮箱输入框 300，右列验证码组固定宽 */
.df-mail-row{display:grid;grid-template-columns:auto auto;gap:14px;margin-bottom:16px;align-items:start;justify-content:start;}
.df-mail-row .u-alert{margin-bottom:0;}
/* 邮箱：输入框 300 / 验证码输入框 120 / 获取验证码按钮 120 / 绑定按钮 118 */
.df-mail-row #email{width:300px;max-width:100%;}
.df-mail-row #ecode{flex:0 0 120px;width:120px;}
.df-mail-row #btnEcode{width:120px;flex:0 0 120px;padding:0;}
.df-mail-row #btnBindEmail{width:118px;flex:0 0 118px;padding:0;}

/* 手机号：手机号 300 + 验证码 120 + 获取验证码 120 + 更换/绑定按钮，桌面端一行不换行 */
.df-bind-mobile{flex-wrap:nowrap;}
.df-bind-mobile .it-mobile{flex:0 0 300px;width:300px;min-width:0;max-width:300px;}
.df-bind-mobile .it-code{flex:0 0 120px;width:120px;}
.df-bind-mobile #btnScode{width:120px;flex:0 0 120px;padding:0;}
.df-bind-mobile #btnBindMobile{flex:0 0 auto;white-space:nowrap;}

/* 平板/手机：空间放不下 690px 整行时自动折行，各区块整行铺满 */
@media (max-width:980px){
  .df-mail-row{grid-template-columns:1fr;}
  /* 邮箱：邮箱框整行；验证码输入框 + 获取验证码一行；绑定按钮整行 */
  .df-mail-row #email{width:100%;}
  .df-mail-row .u-input-group{flex-wrap:wrap;}
  .df-mail-row #ecode{flex:1 1 0;min-width:0;width:auto;}
  .df-mail-row #btnEcode{flex:0 0 120px;}
  .df-mail-row #btnBindEmail{flex:1 1 100%;width:100%;}
  /* 手机：手机号框整行；验证码输入框 + 获取验证码一行；更换/绑定按钮整行 */
  .df-bind-mobile{flex-wrap:wrap;}
  .df-bind-mobile .it-mobile{flex:1 1 100%;width:100%;max-width:100%;}
  .df-bind-mobile .it-code{flex:1 1 0;min-width:0;width:auto;}
  .df-bind-mobile #btnScode{flex:0 0 120px;}
  .df-bind-mobile #btnBindMobile{flex:1 1 100%;}
}

/* connect.php 邮箱卡：当前邮箱 跟 label 同行、靠左显示 */
.now-email{color:var(--u-accent);font-size:12.5px;white-space:nowrap;}
.now-email b{color:var(--u-accent);font-weight:600;}
.u-label-row{display:flex;align-items:center;margin-bottom:6px;gap:10px;}

.u-skeleton{
  height:16px;border-radius:4px;
  background:linear-gradient(90deg,#EEF2F5 25%,#E3EAEF 37%,#EEF2F5 63%);
  background-size:400% 100%;animation:u-shimmer 1.3s ease infinite;
}
@keyframes u-shimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* ==========================================================================
   Toast / 弹层
   ========================================================================== */
.u-toast-wrap{
  position:fixed;left:50%;top:24px;transform:translateX(-50%);z-index:9999;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;
}
.u-toast{
  background:rgba(20,32,42,.94);color:#fff;padding:10px 18px;border-radius:8px;
  font-size:13.5px;box-shadow:0 6px 24px rgba(0,0,0,.18);max-width:88vw;
  display:flex;align-items:center;gap:8px;
  animation:u-toast-in .24s cubic-bezier(.2,.8,.3,1);
}
.u-toast.out{animation:u-toast-out .22s forwards;}
.u-toast svg{width:15px;height:15px;flex:0 0 auto;}
.u-toast.ok svg{color:#5FD6A4;}
.u-toast.err svg{color:#FF8E7A;}
@keyframes u-toast-in{from{opacity:0;transform:translateY(-12px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes u-toast-out{to{opacity:0;transform:translateY(-10px) scale(.97);}}

.u-modal{
  position:fixed;inset:0;z-index:9000;display:none;
  align-items:center;justify-content:center;padding:20px;
}
.u-modal.show{display:flex;}
.u-modal-mask{position:absolute;inset:0;background:rgba(12,26,38,.45);animation:u-fade .2s;}
@keyframes u-fade{from{opacity:0;}to{opacity:1;}}
.u-modal-box{
  position:relative;background:#fff;border-radius:12px;width:520px;max-width:100%;
  max-height:86vh;display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(12,26,38,.24);
  animation:u-pop .26s cubic-bezier(.2,.8,.3,1);
}
@keyframes u-pop{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}
.u-modal-hd{padding:17px 20px;border-bottom:1px solid var(--u-line-2);display:flex;align-items:center;}
.u-modal-hd h3{margin:0;font-size:15.5px;font-weight:600;}
.u-modal-hd .x{
  margin-left:auto;width:28px;height:28px;border:0;background:transparent;cursor:pointer;
  color:var(--u-muted);border-radius:6px;font-size:18px;line-height:1;
}
.u-modal-hd .x:hover{background:var(--u-line-2);color:var(--u-text);}
.u-modal-bd{padding:20px;overflow-y:auto;}
.u-modal-ft{padding:14px 20px;border-top:1px solid var(--u-line-2);display:flex;justify-content:flex-end;gap:10px;background:#FCFDFE;border-radius:0 0 12px 12px;}

/* 弹窗里的协议正文 */
.u-doc{
  font-size:13.5px;line-height:1.9;color:#41525F;
}
.u-doc p{margin:0 0 10px;}
.u-doc p:last-child{margin-bottom:0;}
.u-doc h1,.u-doc h2,.u-doc h3{font-size:14.5px;font-weight:600;color:#1B2733;margin:14px 0 8px;}
.u-doc ul,.u-doc ol{margin:0 0 10px;padding-left:22px;}
.u-doc li{margin-bottom:4px;}
.u-doc img{max-width:100%;height:auto;}
.u-doc a{color:var(--u-brand,#1E6F8C);text-decoration:underline;}

/* ==========================================================================
   评分 / 图片上传
   ========================================================================== */
.u-rate{display:flex;align-items:center;gap:6px;}
.u-rate .star{
  width:30px;height:30px;cursor:pointer;color:#D9E1E6;transition:color .12s,transform .12s;
}
.u-rate .star:hover{transform:scale(1.12);}
.u-rate .star.on{color:#E8A33D;}
.u-rate .lb{margin-left:10px;color:var(--u-muted);font-size:13px;}
.u-rate.readonly .star{cursor:default;width:16px;height:16px;}
.u-rate.readonly .star:hover{transform:none;}

/* .u-uploader 是 U.imageUploader() 的容器，.u-upload 是页面里手写的，两套名字同一份样式 */
.u-upload,.u-uploader{display:flex;flex-wrap:wrap;gap:10px;}
.u-upload .item,.u-uploader .item{
  width:84px;height:84px;border-radius:7px;overflow:hidden;position:relative;
  border:1px solid var(--u-line);background:#F5F7F9;
}
.u-upload .item img,.u-uploader .item img{width:100%;height:100%;object-fit:cover;}
.u-upload .item .del,.u-uploader .item .del{
  position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;border:0;cursor:pointer;font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.u-upload .add,.u-uploader .add{
  width:84px;height:84px;border:1px dashed #CFDAE1;border-radius:7px;background:#FAFCFD;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--u-muted);font-size:12px;cursor:pointer;transition:border-color .16s,color .16s;
}
.u-upload .add:hover,.u-uploader .add:hover{border-color:var(--u-accent);color:var(--u-accent);}
.u-upload .add svg,.u-uploader .add svg{width:18px;height:18px;}

/* 卡密展示 --------------------------------------------------------------- */
.u-cards{
  background:#0F212C;color:#D7E4EC;border-radius:7px;padding:14px 16px;
  font-family:Consolas,Menlo,monospace;font-size:13px;line-height:1.9;
  white-space:pre-wrap;word-break:break-all;max-height:280px;overflow-y:auto;
}
.u-kv{display:flex;gap:14px;padding:9px 0;border-bottom:1px dashed var(--u-line);font-size:13.5px;}
.u-kv:last-child{border-bottom:0;}
.u-kv .k{width:88px;flex:0 0 88px;color:var(--u-muted);}
.u-kv .v{flex:1;min-width:0;word-break:break-all;color:var(--u-text-2);}

/* 分类网格 --------------------------------------------------------------- */
.u-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px;}
.u-grid-item{
  border:1px solid var(--u-line);border-radius:var(--u-radius);padding:15px;
  background:#fff;transition:border-color .16s,transform .16s;
}
.u-grid-item:hover{border-color:var(--u-accent);transform:translateY(-2px);}
.u-grid-item h4{margin:0 0 5px;font-size:14.5px;font-weight:600;}
.u-grid-item p{margin:0;color:var(--u-muted);font-size:12.5px;}

/* FAQ -------------------------------------------------------------------- */
.u-faq-item{border-bottom:1px solid var(--u-line-2);}
.u-faq-item:last-child{border-bottom:0;}
.u-faq-q{
  padding:15px 18px;cursor:pointer;display:flex;align-items:center;gap:10px;
  font-size:14.5px;font-weight:500;transition:background .15s;
}
.u-faq-q:hover{background:#FAFCFD;}
.u-faq-q .arrow{
  margin-left:auto;color:var(--u-text-2);transition:transform .22s;
  font-size:22px;font-weight:500;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;
}
.u-faq-item.open .u-faq-q .arrow{transform:rotate(90deg);}
.u-faq-a{max-height:0;overflow:hidden;transition:max-height .28s cubic-bezier(.4,0,.2,1);}
.u-faq-item.open .u-faq-a{max-height:1200px;}
.u-faq-a .in{padding:0 18px 16px;color:var(--u-text-2);font-size:13.5px;line-height:1.8;}

/* 页脚 ------------------------------------------------------------------- */
.u-footer{
  border-top:1px solid var(--u-line);padding:22px 18px;text-align:center;
  color:var(--u-muted);font-size:12.5px;line-height:1.9;background:#fff;
}
.u-footer a{color:var(--u-muted);margin:0 7px;}
.u-footer a:hover{color:var(--u-accent);}

/* ==========================================================================
   自适应
   ========================================================================== */
/* 窄一点的桌面 / 平板：跟首页 .fk-shell 一样退到 1200 */
@media (max-width:1080px){
  .u-wrap{width:min(1200px, calc(100% - 48px));}
}
@media (max-width:1023px){
  .u-stats{grid-template-columns:repeat(2,1fr);}
  .u-side{width:156px;flex:0 0 156px;}
}
@media (max-width:767px){
  .u-wrap{width:calc(100% - 32px);padding:14px 0 30px;}
  .u-layout{display:block;}
  .u-side{
    width:auto;position:fixed;top:var(--u-head-h);left:0;bottom:0;z-index:90;
    background:#fff;padding:14px 12px;overflow-y:auto;width:250px;
    transform:translateX(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1);
    border-right:1px solid var(--u-line);
  }
  body.u-side-open .u-side{transform:none;}
  body.u-side-open::after{
    content:"";position:fixed;inset:var(--u-head-h) 0 0 0;background:rgba(12,26,38,.42);z-index:85;
  }
  body.u-user{--u-head-h:56px;}   /* 手机端前台头部是 56px */
  .u-topbar{display:flex;}
  /* 手机端右上角只留一颗汉堡：用户中心自己的 #uBurger（开的是左侧个人中心菜单）。
     前台头部（template/default/header.php）那颗 .fk-mobile-menu-button 开的是站点导航，
     在 /user/ 里用不上，还会跟这颗抢右上角，所以藏掉。
     #uBurger 原来在 .u-topbar 里（页面内容左上），这里改成 fixed 钉到那颗原来的位置：
     手机端 header 高 56px、按钮 38px → 上下居中 top:9px；
     .fk-shell 手机端宽 calc(100% - 32px) → 右边留 16px。
     z-index 1100：header 是 100、侧栏 90、遮罩 85，抬到最上面才点得到。
     （只对 body.u-has-side 的页面生效：没有侧栏的页面仍用前台那颗。） */
  body.u-has-side .fk-header .fk-mobile-menu-button{display:none !important;}
  .u-burger{
    display:flex;position:fixed;top:9px;right:16px;z-index:1100;
    width:38px;height:38px;border-radius:10px;background:#F1F5FF;color:var(--u-accent);
  }
  .u-burger:hover{background:#E4EBFB;}
  .u-burger span,.u-burger span::before,.u-burger span::after{
    width:16px;height:2px;border-radius:2px;background:currentColor;
    transition:transform .2s ease,opacity .2s ease;
  }
  /* 展开时变叉，跟前台那颗一个意思 */
  body.u-side-open .u-burger span{background:transparent;}
  body.u-side-open .u-burger span::before{top:0;transform:rotate(45deg);}
  body.u-side-open .u-burger span::after{top:0;transform:rotate(-45deg);}
  .u-nav{display:none;}
  .u-stats{grid-template-columns:repeat(2,1fr);gap:10px;}
  .u-stat{padding:13px;}
  .u-stat .v{font-size:20px;}
  /* 余额页概览：手机上金额和标题各再小一号 */
  .u-bal-stats .u-stat .v{font-size:18px;}
  .u-bal-stats .u-stat .t{font-size:11.5px;}
  .u-bal-stats .u-stat.grad .u-stat-ic{width:30px;height:30px;border-radius:8px;}
  .u-bal-stats .u-stat.grad .u-stat-ic svg{width:16px;height:16px;}
  .u-hero{padding:18px;gap:14px;}
  .u-hero::before{
    background-size:60px 60px,36px 36px,26px 26px;
    background-position:right -12px 26%,40% 72%,72% 24%;
  }
  .u-hero .money{text-align:left;width:100%;
    border-top:1px solid rgba(255,255,255,.16);padding-top:12px;}
  .u-card-bd{padding:14px;}
  .u-card-hd{padding:13px 14px;}
  .u-table thead{display:none;}
  .u-table.responsive tbody tr{display:block;border-bottom:1px solid var(--u-line-2);padding:6px 0;}
  .u-table.responsive td{
    display:flex;padding:6px 14px;border:0;align-items:center;gap:12px;
  }
  .u-table.responsive td::before{
    content:attr(data-l);color:var(--u-muted);font-size:12.5px;width:66px;flex:0 0 66px;
  }
  .u-order-list{display:block;}
  .u-order-table{display:none;}
  .u-auth-box{padding:24px 20px 20px;border-radius:10px;}
  .u-modal-box{max-height:90vh;}
  .u-upload .item,.u-upload .add,
  .u-uploader .item,.u-uploader .add{width:72px;height:72px;}
  .u-kv .k{width:74px;flex:0 0 74px;}
}

/* 订单里的快递单号 */
.u-ship{
    display:inline-block;padding:2px 8px;margin-right:6px;
    background:#F4F9FB;border-radius:4px;
    font-size:12.5px;color:#41525F;
}
.u-ship b{font-family:Consolas,Menlo,monospace;color:#1B2733;}

/* 图片放大预览：点一下缩略图，弹层里看大图 */
/* padding 留出 40px 是给图片外侧那个关闭按钮的，别调小，不然窄屏上按钮会被挤出屏幕 */
.u-lb{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
      padding:40px;opacity:0;transition:opacity .16s ease;}
.u-lb.show{opacity:1;}
.u-lb-mask{position:absolute;inset:0;background:rgba(10,20,30,.82);}
.u-lb-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;}
.u-lb img{max-width:92vw;max-height:82vh;object-fit:contain;background:#fff;border-radius:8px;
          box-shadow:0 16px 48px rgba(0,0,0,.42);}
.u-lb-cap{color:#fff;font-size:13.5px;opacity:.92;}
.u-lb-pic{position:relative;display:inline-flex;max-width:100%;}
/* 关闭按钮：挪到图片右上角外侧，× 用本地字体图标（/assets/font/iconfont.*），不引外链。
   会员中心只加载 user.css，所以 @font-face 在这里也要声明一份 */
@font-face{
  font-family:"df-iconfont";
  src:url("../font/iconfont.woff2") format("woff2"),
      url("../font/iconfont.woff") format("woff"),
      url("../font/iconfont.ttf") format("truetype");
  font-weight:normal;font-style:normal;font-display:swap;
}
/* 有字体还得有取字体名的类：.df-i 原来只写在 style.css 里，
   会员中心那几张自建页（登录/注册/找回密码）不加载 style.css，
   配上页面里的 <i class="df-i">&#xe60c;</i> 才不会变豆腐块 */
.df-i{
  font-family:"df-iconfont" !important;
  font-style:normal;font-weight:normal;line-height:1;display:inline-block;vertical-align:middle;
  speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.u-lb-x{position:absolute;top:-16px;right:-16px;width:32px;height:32px;padding:0;border:0;border-radius:50%;
        background:rgba(12,24,34,.62);color:#fff;cursor:pointer;
        display:flex;align-items:center;justify-content:center;}
.u-lb-x::before{content:"\1006";font-family:"df-iconfont" !important;font-size:15px;line-height:1;
                font-style:normal;font-weight:normal;
                -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.u-lb-x:hover{background:rgba(12,24,34,.88);}
img[data-zoom="1"]{cursor:zoom-in;}
img[data-zoom="1"]:hover{opacity:.86;}

/* ==========================================================================
   顶部站点公告（/user/index.php）
   样式参照投诉中心「客服处理结果」区块 .cp-track-reply：
   淡主题色底 + 1px 边框 + 左侧 3px 主题色竖条 + 11px 圆角，
   左侧喇叭图标 + 右侧公告正文，同一行（flex 不换行）。
   ========================================================================== */
.u-gg{
  /* 单行滚动的公告条，条子本身要窄：上下各 8px + 一行文字，整体约 40px 高 */
  padding:8px 14px;margin-bottom:12px;
  background:var(--u-accent-soft,#EAF3F6);
  border:1px solid rgba(var(--u-accent-rgb,30,111,140),.28);
  border-left:3px solid var(--u-accent,#1E6F8C);
  border-radius:11px;
  display:flex;align-items:center;gap:10px;      /* 图标在左、公告内容在右，同一行 */
}
/* 只放图标，不放文字标题（鼠标悬停提示「站点公告」） */
/* 图标跟正文首行垂直居中对齐：行盒跟正文一样高（14.5 × 1.55），图标在其中居中 */
.u-gg-hd{
  flex:0 0 auto;color:var(--u-accent,#1E6F8C);
  font-size:14.5px;line-height:1.55;
  display:flex;align-items:center;
  margin-top:0;   /* 正文现在是单行滚动，图标跟着行盒垂直居中就行 */
}
.u-gg-hd .ico{width:19px;height:19px;display:block;}
/* 喇叭动效：喇叭体轻微起伏，两道声波依次明暗扩散（像在广播） */
@keyframes u-gg-wave{0%,100%{opacity:.3;}45%,55%{opacity:1;}}
@keyframes u-gg-horn{0%,100%{transform:translateY(0);}50%{transform:translateY(-1px);}}
.u-gg-hd .ico .gg-horn{transform-box:fill-box;transform-origin:center;
                       animation:u-gg-horn 1.8s ease-in-out infinite;}
.u-gg-hd .ico .gg-w1{animation:u-gg-wave 1.8s ease-in-out infinite;}
.u-gg-hd .ico .gg-w2{animation:u-gg-wave 1.8s ease-in-out infinite .45s;}
@media (prefers-reduced-motion:reduce){
  .u-gg-hd .ico .gg-horn,
  .u-gg-hd .ico .gg-w1,
  .u-gg-hd .ico .gg-w2{animation:none;opacity:1;}
}
.u-gg-bd{
  flex:1;min-width:0;
  color:var(--u-text-2,#41525F);font-size:14.5px;line-height:1.55;
  overflow-wrap:anywhere;
}
/* 向左循环滚动：容器裁掉溢出，轨道里放两份一样的公告，
   动画从 0 平移到 -50%（正好一份的宽度），无限循环 = 无缝跑马灯。
   .is-scroll 由页面上的脚本量好宽度后加上；脚本没跑（JS 挂了）就静止显示，
   公告照常看得见，只是不滚。 */
.u-gg-roll{overflow:hidden;width:100%;}
.u-gg-track{display:flex;width:max-content;will-change:transform;}
.u-gg-txt{flex:0 0 auto;padding-right:56px;}  /* 尾部留白 = 两遍之间的间隔 */
/* 滚动起来才强制单行；脚本没跑就按原来的多行显示，长公告也看得全 */
.u-gg-roll.is-scroll .u-gg-txt{white-space:nowrap;}
/* 后台公告可能是富文本（<p>、<div> 之类），压成行内才不会换行；
   顺手清掉这些标签自带的外边距，不然单行公告也会被 <p> 顶高 */
.u-gg-roll.is-scroll .u-gg-txt > *{display:inline;white-space:nowrap;margin:0;padding:0;}
.u-gg-roll.is-scroll .u-gg-track{
  animation:u-gg-marquee linear infinite;
  animation-duration:var(--u-gg-dur,20s);
}
/* 鼠标停上去先停下，方便看清内容 */
.u-gg-roll.is-scroll:hover .u-gg-track{animation-play-state:paused;}
@keyframes u-gg-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .u-gg-roll.is-scroll .u-gg-track{animation:none;}
}
.u-gg-bd a{color:var(--u-accent,#1E6F8C);text-decoration:underline;}
@media (max-width:640px){
  .u-gg{padding:7px 12px;gap:9px;}
  /* 两边字号、行高同步，图标才不会跑偏 */
  .u-gg-hd,.u-gg-bd{font-size:14px;line-height:1.55;}
  .u-gg-hd .ico{width:18px;height:18px;}
  .u-gg-txt{padding-right:40px;}
}

/* 首页等级说明：ⓘ 图标 + 悬浮弹层（body 直挂，fixed 定位） */
.u-hero .who .lv-info{display:inline-flex;align-items:center;margin-left:5px;vertical-align:-2px;
                      cursor:default;color:rgba(255,255,255,.8);transition:color .15s;}
.u-hero .who .lv-info:hover{color:#fff;}
.lv-pop{position:fixed;z-index:9999;display:none;width:min(460px,calc(100vw - 24px));
        max-width:calc(100vw - 24px);box-sizing:border-box;
        padding:12px 14px;background:#fff;border:1px solid var(--u-line,#E7ECF0);border-radius:10px;
        box-shadow:0 10px 30px rgba(15,35,60,.18);font-size:12.5px;color:#41525F;}
.lv-pop.show{display:block;}
.lv-pop .lv-pop-hd{font-weight:600;font-size:13px;color:#22292F;margin-bottom:8px;}
.lv-pop table{width:100%;border-collapse:collapse;}
.lv-pop th,.lv-pop td{padding:6px 8px;text-align:left;border-bottom:1px solid #F0F3F6;white-space:nowrap;}
.lv-pop th{color:#8A97A3;font-weight:500;font-size:12px;}
.lv-pop tr:last-child td{border-bottom:0;}
.lv-pop tr.cur td{background:var(--u-accent-soft,#EFF6F9);}
.lv-pop .lv-tag{display:inline-block;margin-left:6px;padding:0 6px;border-radius:9px;font-size:11px;
                background:var(--u-accent,#1E6F8C);color:#fff;line-height:17px;vertical-align:1px;}
.lv-pop .lv-foot{margin-top:8px;color:#8A97A3;font-size:12px;line-height:1.6;white-space:normal;}

/* 移动端：4 列表格放不下，改成每行一张卡片，字段自动换行，绝不溢出弹层 */
@media (max-width:640px){
  .lv-pop{width:calc(100vw - 24px);max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
          padding:14px 12px;font-size:13px;}
  .lv-pop table,.lv-pop tbody,.lv-pop tr,.lv-pop td{display:block;width:100%;box-sizing:border-box;}
  .lv-pop thead{display:none;}
  .lv-pop tr{padding:10px;border-bottom:1px solid #F0F3F6;}
  .lv-pop tr:last-child{border-bottom:0;}
  .lv-pop tr.cur{border-radius:8px;background:var(--u-accent-soft,#EFF6F9);}
  .lv-pop tr.cur td{background:none;}
  .lv-pop td{padding:3px 0;border:0;white-space:normal;line-height:1.6;
             overflow-wrap:anywhere;word-break:break-word;}
  .lv-pop td[data-label]::before{content:attr(data-label) "：";display:inline-block;width:5.5em;
                                 color:#8A97A3;font-size:12px;}
  .lv-pop td:first-child{padding:0 0 4px;font-size:14px;}
  .lv-pop td:first-child::before{display:none;}
  .lv-pop .lv-pop-hd{font-size:14px;}
}