/* =========================================================================
 * Prokvm 会员中心 · 视觉方案 v3「企业级工作台」
 * ---------------------------------------------------------------------
 * 加载于 skinpro.css 之后，仅在后台开启「会员中心模板 = v3」时输出。
 * 设计原则（对标 AWS / 阿里云控制台）：
 *   1. 灰阶承担版面，色彩只讲状态 —— 无大色块、无彩底徽章
 *   2. 直角化：圆角 6px、去阴影，靠 1px 细线组织信息
 *   3. 琥珀 = 实时信号（正在发生的事才会"呼吸"）
 * 实现方式：重映射 skinpro 的 --sk-* 令牌（弹窗/表格/表单自动跟随），
 *          再覆盖外壳（白侧栏/顶栏）与控制台专属组件。
 * 可逆：关闭开关即完全还原 v2 观感。
 * ========================================================================= */

/* ═══════════ 01 · 令牌重映射 ═══════════ */
:root{
  /* 主色：靛蓝（v2 电紫 #635bff → v3 靛蓝 #3D52D5） */
  --sk-brand:#3D52D5; --sk-brand-d:#2E3FAE; --sk-brand-l:#6B7EE8;
  --sk-brand-bg:#EBEEFB; --sk-brand-bg2:#F4F6FD;
  --sk-glow:rgba(61,82,213,.28); --sk-ring:rgba(61,82,213,.16);

  /* 中性：纸白工作台 */
  --sk-page:#F7F8FA; --sk-card:#FFFFFF; --sk-card-2:#FAFBFC;
  --sk-border:#DFE3EA; --sk-border-2:#ECEEF3; --sk-border-3:#D5DAE3;
  --sk-ink:#171B26; --sk-ink-2:#454D5F; --sk-mut:#71798A; --sk-faint:#AEB5C0;
  --sk-head:#FAFBFC; --sk-stripe:#FAFBFC;

  /* 语义色（企业级：饱和度降低，避免刺眼） */
  --sk-success:#20915F; --sk-success-bg:#E6F4ED;
  --sk-warn:#C8820B;    --sk-warn-bg:#FDF3DF;
  --sk-danger:#D14343;  --sk-danger-bg:#FCEBEB;

  /* v3 新增：实时信号色（琥珀） */
  --sk-live:#D97706; --sk-live-bg:#FCF1E1; --sk-live-bd:#EFD9B8; --sk-urg-bg:rgba(217,119,6,.09);

  /* 直角化 */
  --sk-radius-sm:4px; --sk-radius:6px; --sk-radius-lg:6px;

  /* 去阴影：改用细线 */
  --sk-sh:none;
  --sk-sh-md:0 2px 8px rgba(23,27,38,.04);
  --sk-sh-lg:0 10px 30px rgba(23,27,38,.10);

  /* 外壳：纸白侧栏 */
  --sk-side-bg:#FFFFFF; --sk-side-ink:var(--sk-ink-2); --sk-side-grp:#9AA2B2;
  --sk-side-brand:var(--sk-ink); --sk-side-bd:var(--sk-border);
  --sk-card-bd:var(--sk-border);
}
html[data-skin="dark"]{
  --sk-brand:#6B7EE8; --sk-brand-d:#5468DC; --sk-brand-l:#8B9BEF;
  --sk-brand-bg:#1D2440; --sk-brand-bg2:#171D33;
  --sk-page:#0C1017; --sk-card:#141922; --sk-card-2:#171C26;
  --sk-border:#262B36; --sk-border-2:#1E232C; --sk-border-3:#333A48;
  --sk-ink:#E6E9F0; --sk-ink-2:#B7BECB; --sk-mut:#8B93A6; --sk-faint:#6F7789;
  --sk-head:#1A2029; --sk-stripe:#171C26;
  --sk-success:#3FB27F; --sk-success-bg:#14301F;
  --sk-warn:#D9A03D;    --sk-warn-bg:#332714;
  --sk-danger:#E4635F;  --sk-danger-bg:#341C1C;
  --sk-live:#E8963B; --sk-live-bg:#33240F; --sk-live-bd:#4A3C22; --sk-urg-bg:rgba(232,150,59,.12);
  --sk-side-bg:#111620; --sk-side-bd:#242A35;
  --sk-sh:none; --sk-sh-md:none; --sk-sh-lg:0 12px 34px rgba(0,0,0,.55);
}

/* ═══════════ 02 · 外壳：侧栏 ═══════════ */
/* 侧栏底色跟随 --sk-side-bg：浅色侧栏=纸白；用户在调色板切到「侧栏暗色」时由
 * skinpro.css 的 html[data-sk-side="dark"] 覆写该变量，本层自动跟随。 */
#nav.nav-primary{ background:var(--sk-side-bg) !important; border-right:1px solid var(--sk-side-bd) !important; box-shadow:none !important; }
/* 注：LOGO 下的分隔线不要覆盖，skinpro 的 .nav-brand 已用 --sk-side-bd（深色侧栏=微白线）自适应 */
/* 结构（明暗侧栏通用）：直角、紧凑 */
.nav-primary > ul > li > a{ border-radius:var(--sk-radius) !important; margin:1px 8px !important; padding:8px 11px !important; font-weight:400 !important; }
.nav-primary > ul > li.active > a{ font-weight:600 !important; box-shadow:none !important; }
.nav-primary > ul > li.nav-header{ font-size:12px !important; letter-spacing:.15em; text-transform:uppercase;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; padding:16px 19px 5px !important; }

/* 配色：仅「浅色侧栏」时套用（暗色侧栏交给 skinpro.css 的 data-sk-side="dark" 规则，避免深底深字） */
html:not([data-sk-side="dark"]) .nav-primary > ul > li > a{ color:var(--sk-ink-2) !important; }
html:not([data-sk-side="dark"]) .nav-primary > ul > li > a:hover,
html:not([data-sk-side="dark"]) .nav-primary > ul > li > a:focus{ background:var(--sk-page) !important; color:var(--sk-ink) !important; }
html:not([data-sk-side="dark"]) .nav-primary > ul > li.active > a,
html:not([data-sk-side="dark"]) .nav-primary > ul > li.active > a:hover,
html:not([data-sk-side="dark"]) .nav-primary > ul > li.active > a:focus{ background:var(--sk-brand-bg) !important; color:var(--sk-brand-d) !important; }
html:not([data-sk-side="dark"]) .nav-primary > ul > li.active > a i,
html:not([data-sk-side="dark"]) .nav-primary > ul > li.active > a *{ color:var(--sk-brand-d) !important; }
html:not([data-sk-side="dark"]) .nav-primary > ul > li.nav-header{ color:var(--sk-side-grp) !important; }

/* ═══════════ 03 · 外壳：顶栏 ═══════════ */
#header.navbar{ background:var(--sk-card) !important; border-bottom:1px solid var(--sk-border) !important; box-shadow:none !important; }
#header .navbar-nav > li > a{ border-radius:var(--sk-radius); }

/* 顶栏余额块（设计稿：余额 ¥x,xxx.xx 充值） */
/* 注：该 li 的 display 会被框架覆写成 block，导致 align-items 失效、胶囊贴顶，
 * 故在此以同等优先级 + !important 强制 flex，使其与右侧图标（56px 高的 a）垂直居中对齐 */
#header .navbar-nav.pull-right > li.sk-wallet-li{ display:flex !important; align-items:center; height:56px; }
#header .sk-wallet{ display:inline-flex; align-items:center; gap:8px; padding:4px 11px; margin:0 4px;
  border:1px solid var(--sk-border); border-radius:var(--sk-radius); background:var(--sk-card-2); line-height:1.6; }
#header .sk-wallet .lb{ font-size:12px; color:var(--sk-mut); }
#header .sk-wallet .amt{ font-size:13px; font-weight:600; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
#header .sk-wallet .go{ font-size:12px; font-weight:600; color:var(--sk-brand); text-decoration:none; }
#header .sk-wallet .go:hover{ color:var(--sk-brand-d); }

/* ═══════════ 04 · 企业级基础件（去大色块） ═══════════ */
/* 面板：细线直角、无阴影 */
.panel,.mc-card{ border:1px solid var(--sk-border) !important; border-radius:var(--sk-radius-lg) !important; box-shadow:none !important; }
/* 标签/徽章统一：白底 + 细边 + 彩点（企业级观感的最大单一来源） */
.label,.badge,.mc-pill{ border-radius:var(--sk-radius-sm) !important; font-weight:500 !important; }
.label-success,.label.bg-success,.mc-pill.ok{ background:#fff !important; color:var(--sk-ink-2) !important; border:1px solid var(--sk-border) !important; }
.label-danger,.label.bg-danger,.mc-pill.d{ background:#fff !important; color:#A83232 !important; border:1px solid #F0C9C9 !important; }
.label-warning,.label.bg-warning,.mc-pill.w{ background:#fff !important; color:#8A5B04 !important; border:1px solid #EFD9B8 !important; }
.label-info,.label.bg-info{ background:#fff !important; color:var(--sk-brand-d) !important; border:1px solid #C9CFF0 !important; }
/* 按钮：直角、克制；主按钮全站唯一强调 */
.btn{ border-radius:var(--sk-radius) !important; box-shadow:none !important; font-weight:500 !important; }
.btn-primary{ background:var(--sk-brand) !important; border-color:var(--sk-brand) !important; }
.btn-primary:hover,.btn-primary:focus{ background:var(--sk-brand-d) !important; border-color:var(--sk-brand-d) !important; }
/* 表格：细线，表头 mono 小字 */
.table > thead > tr > th{ font-size:12px !important; letter-spacing:.09em; text-transform:uppercase;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-weight:500 !important; color:var(--sk-mut) !important; }
/* 表单控件直角 */
.form-control,.input-group-addon{ border-radius:var(--sk-radius) !important; }
/* 上面那条带 !important，会把 BS3「input-group 内部交界处不圆角」的规则一起盖掉，
   于是输入框和后缀两个控件贴在一起、各自四角全圆，中间咬出一个缺口
   （DNS 解析记录的「主机记录 + .域名」就是这样）。这里按 BS3 的原意补回来 */
.input-group > .form-control:first-child,
.input-group > .input-group-addon:first-child,
.input-group > .input-group-btn:first-child > .btn,
.input-group > .input-group-btn:first-child > .dropdown-toggle{
  border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; }
.input-group > .form-control:last-child,
.input-group > .input-group-addon:last-child,
.input-group > .input-group-btn:last-child > .btn,
.input-group > .input-group-btn:last-child > .dropdown-toggle{
  border-top-left-radius:0 !important; border-bottom-left-radius:0 !important; }
/* 三段式（前缀 + 输入框 + 后缀）中间那个两头都得是直角 */
.input-group > .form-control:not(:first-child):not(:last-child),
.input-group > .input-group-addon:not(:first-child):not(:last-child),
.input-group > .input-group-btn:not(:first-child):not(:last-child) > .btn{
  border-radius:0 !important; }
/* 弹窗跟随直角（详情弹窗等已建成资产自动继承新令牌） */
.modal-content{ border-radius:var(--sk-radius-lg) !important; }

/* ═══════════ 05 · 控制台（v3 专属组件） ═══════════ */
.v3{ padding:18px 20px; }
.v3-hd{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
.v3-hd h1{ font-size:19px; letter-spacing:-.02em; margin:0; font-weight:600; color:var(--sk-ink); }
.v3-hd .sub{ font-size:12.5px; color:var(--sk-mut); margin-top:3px; }
.v3-hd .acts{ display:flex; gap:8px; }
.v3-mono{ font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }

/* KPI 条：灰阶数字 + 状态点，四格细线分隔 */
.v3-kpis{ display:flex; background:var(--sk-card); border:1px solid var(--sk-border); border-radius:var(--sk-radius-lg); overflow:hidden; flex-wrap:wrap; }
.v3-kpi{ flex:1 1 180px; padding:14px 18px; border-right:1px solid var(--sk-border-2); min-width:0; }
.v3-kpi:last-child{ border-right:0; }
.v3-kpi dt{ font-size:12px; color:var(--sk-mut); display:flex; align-items:center; gap:6px; font-weight:400; }
.v3-kpi dt i.d{ width:6px; height:6px; border-radius:50%; flex:none; display:block; }
.v3-kpi dd{ margin:6px 0 0; font-size:22px; font-weight:600; letter-spacing:-.02em; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3-kpi dd small{ font-size:12px; color:var(--sk-mut); font-weight:400; margin-left:6px; font-family:inherit; }
.v3-kpi dd a{ font-size:12px; font-weight:500; margin-left:8px; color:var(--sk-brand); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; }

/* 通用面板 */
.v3-p{ background:var(--sk-card); border:1px solid var(--sk-border); border-radius:var(--sk-radius-lg); overflow:hidden; }
.v3-p-hd{ padding:12px 16px; border-bottom:1px solid var(--sk-border-2); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.v3-p-hd h3{ font-size:13.5px; margin:0; font-weight:600; color:var(--sk-ink); }
.v3-p-hd .more{ font-size:12px; color:var(--sk-brand); font-weight:500; }
.v3-p-bd{ padding:14px 16px; }

/* 主栅格 */
.v3-grid{ display:grid; grid-template-columns:1.45fr 1fr; gap:14px; margin-top:14px; align-items:start; }
@media(max-width:1200px){ .v3-grid{ grid-template-columns:1fr; } }
.v3-stack{ display:flex; flex-direction:column; gap:14px; min-width:0; }

/* ── 即将到期 ──────────────────────────────────────────────
   上：压缩时间轴（只在资产 ≥8 项时出现，看整体节奏）
   下：到期清单（永远显示，可直接续费）
   直方图形态已废弃：个位数资产时全是空格子，读起来像坏了 */

/* 汇总块 + 时间轴并排 */
.v3-rw{ display:flex; gap:20px; padding:16px 18px 10px; flex-wrap:wrap; }
.v3-rw-sum{ width:150px; flex:none; border-right:1px solid var(--sk-border-2); padding-right:18px; }
.v3-rw-sum .big{ font-size:30px; font-weight:600; letter-spacing:-.02em; line-height:1; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3-rw-sum .cap{ font-size:12px; color:var(--sk-mut); margin-top:4px; }
.v3-rw-sum .row{ margin-top:6px; font-size:12px; color:var(--sk-mut); display:flex; justify-content:space-between; gap:10px; }
.v3-rw-sum .row b{ font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-weight:500; color:var(--sk-ink-2); }
.v3-rw-main{ flex:1; min-width:280px; }
@media(max-width:640px){ .v3-rw-sum{ width:100%; border-right:0; border-bottom:1px solid var(--sk-border-2); padding:0 0 12px; } }

/* 按周聚合直方图（设计稿形态）：单色柱，前 14 天紧急区用琥珀左边线 + 极淡底纹标注 */
/* align-items:stretch —— 让列撑满图区高度，紧急区色块才能整块铺满（flex-end 时列只有柱子那么高） */
.v3-rw-bars{ display:flex; align-items:stretch; gap:5px; height:76px; position:relative; padding-bottom:2px; }
.v3-rw-bars::before{ content:""; position:absolute; left:0; right:0; bottom:0; border-bottom:1px solid var(--sk-border); }
.v3-rw-c{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; position:relative; z-index:1; min-width:0; }
/* 柱子和数字必须写成「直接子元素」：悬停明细的浮窗就嵌在这一列里，
   写成后代选择器的话浮窗里的 <b>（项数胶囊、每行的数量）会被一起当成柱子描，
   一悬停整片刷成实心主色，文字和底色同色就看不见了 */
.v3-rw-c > b{ display:block; border-radius:2px; background:#C7CEE8; }
html[data-skin="dark"] .v3-rw-c > b{ background:#2E3752; }
.v3-rw-c.hot > b{ background:var(--sk-brand); }
.v3-rw-c > em{ font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-size:12px; font-style:normal;
  color:var(--sk-ink-2); text-align:center; margin-bottom:3px; line-height:1; }
/* 前 14 天紧急区：整块琥珀底 + 左侧琥珀实线 */
.v3-rw-c.urg{ background:var(--sk-urg-bg); }
.v3-rw-c.urg.urg-first{ box-shadow:inset 2px 0 0 var(--sk-live); }
/* 用左投影补掉列间的 5px gap，让前两周连成一整块，而不是两个分开的方块 */
.v3-rw-c.urg + .v3-rw-c.urg{ box-shadow:-5px 0 0 var(--sk-urg-bg); }
.v3-rw-axis{ display:flex; justify-content:space-between; margin-top:7px; font-size:12px; color:var(--sk-mut);
  letter-spacing:.05em; font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }

/* 柱子的悬停明细
   ----------------------------------------------------------------
   柱子下面原来挂着一张到期清单，和资产盘点表、待办事项重复，去掉了；
   「这周到底是哪些东西要到期」改成悬停时从柱子上摊开一张小卡，
   每行一个产品，点进去就是那个产品的列表页（续费按钮在那儿）。
   .v3-p 本身是 overflow:hidden，弹层要往卡片外面顶，所以这张卡放开裁剪 */
.v3-p-rw{ overflow:visible; }
/* 整列都是点击热区（柱子只有几像素高时也点得中），盖在柱子上、压在弹层下面 */
.v3-rw-c > .hit{ position:absolute; left:0; right:0; top:0; bottom:0; z-index:2; cursor:pointer; }
.v3-rw-c.on:hover > b{ background:var(--sk-brand); }
.v3-rw-c.on:hover > em{ color:var(--sk-brand); font-weight:600; }

.v3-rw-pop{ display:none; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  z-index:3; min-width:212px; padding:0 0 4px; margin-bottom:9px;
  background:var(--sk-card); border:1px solid var(--sk-border);
  border-radius:var(--sk-radius); box-shadow:0 10px 28px rgba(13,21,38,.14), 0 2px 6px rgba(13,21,38,.06);
  cursor:default; }
html[data-skin="dark"] .v3-rw-pop{ box-shadow:0 10px 28px rgba(0,0,0,.5); }
/* 弹层是 .v3-rw-c 的子节点，鼠标移上去时列仍处于 :hover，不会闪断；
   margin-bottom 那 9px 的空隙靠这个伪元素补成连续的可悬停区域 */
.v3-rw-pop::after{ content:""; position:absolute; left:0; right:0; top:100%; height:10px; }
.v3-rw-c:hover > .v3-rw-pop{ display:block; }
/* 头两列和末两列的弹层贴边对齐，免得顶出卡片 */
.v3-rw-c:nth-child(-n+2) > .v3-rw-pop{ left:0; transform:none; }
.v3-rw-c:nth-last-child(-n+2) > .v3-rw-pop{ left:auto; right:0; transform:none; }

/* 指向柱子的小三角。挂在「列」上而不是弹层上——弹层在头尾几列会贴边偏移，
   三角必须始终对准柱子中线。两层叠出 1px 描边：::before 是边框色的大三角，
   ::after 是卡片色的小三角盖在上面 */
.v3-rw-c.on::before,
.v3-rw-c.on::after{ content:""; display:none; position:absolute; bottom:100%; left:50%;
  width:0; height:0; border-style:solid; border-color:transparent; z-index:4; pointer-events:none; }
.v3-rw-c.on::before{ margin-left:-7px; margin-bottom:2px; border-width:7px 7px 0;
  border-top-color:var(--sk-border); }
/* 内层高 7px（比外层多 1px）好把弹层底边那条 1px 边框盖住，
   不然三角和方框之间会横着一道细线 */
.v3-rw-c.on::after{ margin-left:-6px; margin-bottom:3px; border-width:7px 6px 0;
  border-top-color:var(--sk-card); }
.v3-rw-c.on:hover::before,
.v3-rw-c.on:hover::after{ display:block; }

/* 头：左边日期区间，右边一枚「N 项到期」的胶囊 */
.v3-rw-pop .hd{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 12px; border-bottom:1px solid var(--sk-border-2); white-space:nowrap; }
.v3-rw-pop .hd > .mono{ font-size:11.5px; color:var(--sk-mut); letter-spacing:.02em; }
.v3-rw-pop .hd > b{ flex:none; font-size:11px; font-weight:600; line-height:1.7;
  padding:0 8px; border-radius:20px;
  background:var(--sk-brand-bg2); color:var(--sk-brand);
  font-variant-numeric:tabular-nums; }

/* 行：产品名 + 项数 + 去续费。整行可点，悬停整行变色 */
.v3-rw-pop .r{ display:flex; align-items:center; gap:10px; padding:7px 12px;
  font-size:12.5px; color:var(--sk-ink-2); white-space:nowrap; }
.v3-rw-pop .r + .r{ border-top:1px solid var(--sk-border-2); }
.v3-rw-pop .r:hover{ background:var(--sk-card-2); }
.v3-rw-pop .r > .p{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.v3-rw-pop .r > b{ flex:none; font-size:12.5px; font-weight:600; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3-rw-pop .r > i{ flex:none; font-style:normal; font-size:11.5px; color:var(--sk-faint); }
.v3-rw-pop .r:hover > .p,
.v3-rw-pop .r:hover > b,
.v3-rw-pop .r:hover > i{ color:var(--sk-brand); }
/* 暗色下 --sk-brand(#3D52D5) 压在卡片底(#141922)上只有 2.8 的对比度，
   11~12px 的小字基本看不清；这几处换成亮一档的 --sk-brand-l（4.85） */
html[data-skin="dark"] .v3-rw-pop .hd > b,
html[data-skin="dark"] .v3-rw-pop .r:hover > .p,
html[data-skin="dark"] .v3-rw-pop .r:hover > b,
html[data-skin="dark"] .v3-rw-pop .r:hover > i,
html[data-skin="dark"] .v3-rw-c.on:hover > em{ color:var(--sk-brand-l); }

/* 触屏没有 hover，弹层永远出不来——那就让整列的热区自己带路 */
@media(hover:none){
  .v3-rw-pop{ display:none !important; }
}

/* 到期清单（.v3-exp*）已随「续费跑道」改版删掉：内容和资产盘点表 / 待办事项重复，
   现在改成悬停柱子看明细。CSS 一并清掉，别留一堆没人引用的类名 */
@media(max-width:640px){
  .v3-rw{ padding-left:16px; padding-right:16px; }
}

/* 资产盘点表（企业级：用表格，不用卡片墙） */
.v3-inv{ width:100%; border-collapse:collapse; font-size:13px; }
.v3-inv thead th{ background:var(--sk-head); text-align:left; font-weight:500; font-size:12px; color:var(--sk-mut);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; letter-spacing:.09em; text-transform:uppercase;
  padding:8px 13px; border-bottom:1px solid var(--sk-border); white-space:nowrap; }
.v3-inv td{ padding:11px 13px; border-bottom:1px solid var(--sk-border-2); vertical-align:middle; }
.v3-inv tbody tr:last-child td{ border-bottom:0; }
.v3-inv tbody tr:hover{ background:var(--sk-card-2); }
.v3-inv .nm{ display:flex; align-items:center; gap:9px; color:var(--sk-ink); font-weight:500; }
.v3-inv .nm i.t{ width:7px; height:7px; border-radius:2px; flex:none; display:block; }
.v3-inv .nm .ic{ color:var(--sk-mut); font-size:14px; }
.v3-inv .n{ text-align:right; font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3-inv .n.z{ color:var(--sk-faint); }
.v3-inv .go{ text-align:right; white-space:nowrap; }
.v3-inv .go a{ font-size:12px; color:var(--sk-brand); font-weight:600; }

/* 待办行：色点 + 主标题 + 等宽副行 + 右侧动作（设计稿 .todorow） */
.v3-todo{ display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--sk-border-2); }
.v3-todo:last-child{ border-bottom:0; }
.v3-todo .dot{ width:7px; height:7px; border-radius:50%; flex:none; display:block; background:var(--sk-mut); }
.v3-todo .dot.k-danger{ background:var(--sk-danger); }
.v3-todo .dot.k-warn{ background:var(--sk-warn); }
.v3-todo .dot.k-info{ background:var(--sk-brand); }
.v3-todo .tx{ flex:1; min-width:0; }
/* 主标题：desc 自带 <b> 包数字，这里整行统一 600，不再二次加粗 */
.v3-todo .tx > b{ display:block; font-size:13px; font-weight:600; color:var(--sk-ink); line-height:1.45;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v3-todo .tx > b b{ font-weight:600; }
.v3-todo .tx > span{ display:block; margin-top:2px; font-size:12px; color:var(--sk-mut); line-height:1.4;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v3-todo .go{ flex:none; }
/* 待办行的动作按钮：紧凑一号（字号仍保持 12px 下限） */
.v3-todo .go .btn{ height:26px !important; padding:0 11px !important; font-size:12px !important;
  line-height:1 !important; display:inline-flex; align-items:center; }
/* 空态统一走项目标准的 .mc-empty（图标 + 文案），这里只调图标观感 */
#MEMBER_DASH .mc-empty i{ color:var(--sk-faint); margin-right:2px; }

/* v3 空态：Element Plus el-empty 那一套——灰阶立体插画（空托盘+文档）+ 14px 次要文案 + 大留白。
   插画走 mask 上色，色值取 --sk-mut，明暗模式自动跟随，不用备两套图；
   和 el-empty 一样全站只用这一张图，靠文案区分场景，所以共用的 notice.html 一行都不用改。
   不支持 mask 的浏览器落回上面的图标字体样式。 */
@supports (mask-image:url("#m")) or (-webkit-mask-image:url("#m")){
  #MEMBER_DASH .mc-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:16px; padding:34px 16px !important; font-size:14px !important; color:var(--sk-mut) !important; line-height:1.5; }
  #MEMBER_DASH .mc-empty i{ width:96px; height:84px; margin:0 !important; font-size:0 !important; flex:none;
    background:var(--sk-faint); -webkit-mask:center/contain no-repeat var(--sk-emp); mask:center/contain no-repeat var(--sk-emp); }
}
:root{
  --sk-emp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 70'%3E%3Cellipse cx='40' cy='63' rx='33' ry='6' fill='%23000' fill-opacity='.14'/%3E%3Cpath d='M6 28l9-22a3 3 0 0 1 3-2h44a3 3 0 0 1 3 2l9 22H54l-4 8H30l-4-8z' fill='%23000' fill-opacity='.2'/%3E%3Cpath d='M6 28h20l4 8h20l4-8h20v26a4 4 0 0 1-4 4H10a4 4 0 0 1-4-4z' fill='%23000' fill-opacity='.36'/%3E%3C/svg%3E");
}

/* 消息公告：按设计稿——日期在左（等宽弱化），标题在右，行间发丝线，无色块无强调色 */
#MEMBER_DASH #notice_body.v3-notice{ padding:0; }
#MEMBER_DASH #notice_body.v3-notice .dash_notice .dn-row{
  display:grid !important; grid-template-columns:76px minmax(0,1fr) !important; align-items:baseline !important;
  gap:10px !important; padding:11px 16px !important; margin:0 !important; border-radius:0 !important; }
#MEMBER_DASH #notice_body.v3-notice .dash_notice tr:hover .dn-row{ background:var(--sk-card-2); }
/* 日期列定宽：有/无未读点都不影响标题起始位置，多行之间对齐 */
#MEMBER_DASH #notice_body.v3-notice .dash_notice .dn-meta{ order:-1; gap:5px !important; white-space:nowrap; }
#MEMBER_DASH #notice_body.v3-notice .dash_notice .dn-d{ order:-1; font-size:12px !important; color:var(--sk-mut) !important;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
#MEMBER_DASH #notice_body.v3-notice .dash_notice .dn-dot{ width:5px; height:5px; }
#MEMBER_DASH #notice_body.v3-notice .dash_notice .dn-link{ font-size:12.5px !important; color:var(--sk-ink-2) !important; text-decoration:none !important; }
#MEMBER_DASH #notice_body.v3-notice .dash_notice tr:hover .dn-link{ color:var(--sk-brand) !important; }

/* 实时/呼吸信号：琥珀（v3 唯一会动的元素 = 正在发生的事）——浅琥珀底 + 琥珀边 + 琥珀字，整体一个色系 */
.v3-live{ display:inline-flex; align-items:center; gap:6px; height:20px; padding:0 8px; border-radius:var(--sk-radius-sm);
  background:var(--sk-live-bg); border:1px solid var(--sk-live-bd); color:#9A5407; font-size:12px; font-weight:500; white-space:nowrap; }
html[data-skin="dark"] .v3-live{ color:var(--sk-live); }
.v3-live i{ width:6px; height:6px; border-radius:50%; background:var(--sk-live); flex:none; display:block; animation:v3blink 1.2s infinite; }
/* 计数为 0：配色保持一致（还是琥珀），只是不再呼吸——没在发生的事不该闪 */
.v3-live.off i{ animation:none; opacity:.55; }
@keyframes v3blink{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* 状态徽章（白底细边 + 彩点） */
.v3-b{ display:inline-flex; align-items:center; gap:6px; height:20px; padding:0 8px; border-radius:var(--sk-radius-sm);
  background:#fff; border:1px solid var(--sk-border); color:var(--sk-ink-2); font-size:12px; font-weight:500; white-space:nowrap; }
html[data-skin="dark"] .v3-b{ background:transparent; }
.v3-b i{ width:6px; height:6px; border-radius:50%; flex:none; display:block; }
.v3-b.ok i{ background:var(--sk-success); }
.v3-b.w i{ background:var(--sk-warn); } .v3-b.w{ color:#8A5B04; border-color:#EFD9B8; }
.v3-b.d i{ background:var(--sk-danger); } .v3-b.d{ color:#A83232; border-color:#F0C9C9; }
.v3-b.m i{ background:var(--sk-faint); } .v3-b.m{ color:var(--sk-mut); }

/* 账户条 */
.v3-hero{ display:flex; align-items:center; gap:14px; background:var(--sk-card); border:1px solid var(--sk-border);
  border-radius:var(--sk-radius-lg); padding:14px 18px; margin-bottom:14px; flex-wrap:wrap; }
.v3-hero .ava{ width:40px; height:40px; border-radius:50%; flex:none; }
.v3-hero .nm{ font-size:15px; font-weight:600; color:var(--sk-ink); }
.v3-hero .chips{ display:flex; gap:6px; margin-top:5px; flex-wrap:wrap; }
.v3-hero .sp{ flex:1; }
.v3-hero .acts{ display:flex; gap:8px; }
.v3-hero .acts .btn{ display:inline-flex; align-items:center; gap:6px; }
.v3-hero .acts .btn i{ font-size:13px; }
/* 白底按钮的图标弱化；主色按钮的图标跟随按钮文字色（白），不能再套灰/品牌色 */
.v3-hero .acts .btn-white i{ color:var(--sk-mut); }
.v3-hero .acts .btn-white:hover i{ color:var(--sk-brand); }

/* 消费趋势图容器 */
.v3-chart{ width:100%; height:230px; }

@media(max-width:768px){
  .v3{ padding:14px; }
  .v3-kpi{ flex:1 1 50%; border-bottom:1px solid var(--sk-border-2); }
}