/* ============================================================
 * LeonZone 共享组件层 lz-components.css
 * 后台(admin_shell)与前端(theme_base)共同加载。
 * 内容：图表令牌 / .chart-box / 图表控件条 / .empty-state / .lz-stat
 * ============================================================ */

/* ---- 图表令牌（浅色） ---- */
:root {
    --chart-1: var(--brand-blue, #0071e3);
    --chart-2: #34c759;
    --chart-3: #ff9500;
    --chart-4: #af52de;
    --chart-5: #ff3b30;
    --chart-warn: #ff9500;
    --chart-danger: #ff3b30;
    --chart-grid: rgba(0, 0, 0, 0.08);
    --chart-text: #6e6e73;
    --chart-tooltip-bg: rgba(28, 28, 30, 0.92);
    --chart-tooltip-text: #f5f5f7;
}
[data-theme="dark"] {
    --chart-grid: rgba(255, 255, 255, 0.10);
    --chart-text: #a1a1a6;
    --chart-tooltip-bg: rgba(245, 245, 247, 0.95);
    --chart-tooltip-text: #1d1d1f;
}

/* ---- 统一图表容器 ---- */
.chart-box { position: relative; height: 240px; }
.chart-box--sm { height: 120px; }
.chart-box--lg { height: 320px; }
.chart-box > canvas { max-width: 100%; }
/* 有控件条时给画布让出空间 */
.chart-box:has(.lz-chart-tools) { padding-top: 34px; box-sizing: border-box; }

/* ---- 图表控件条(液态玻璃版,见文件末尾"图表控件条(液态玻璃版)"块,本块已废弃删除) ---- */

/* ---- 统一空态 ---- */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 40px 20px; text-align: center;
    color: var(--text-secondary, #6e6e73); font-size: 13.5px;
}
.empty-state .es-icon { font-size: 30px; opacity: .45; line-height: 1; }
.empty-state .es-title { font-size: 14px; font-weight: 600; color: var(--text-color, #1d1d1f); }
.empty-state .es-desc { max-width: 420px; line-height: 1.6; }
.empty-state .es-action { margin-top: 4px; }

/* ---- 统一指标卡 .lz-stat（后台 .stat-card 的跨端版本） ---- */
.lz-stat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px; margin-bottom: 16px;
}
.lz-stat {
    background: var(--card-bg, rgba(255,255,255,.55));
    border: 1px solid var(--glass-border, rgba(0,0,0,.08));
    border-radius: 14px; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.lz-stat .ls-label { font-size: 12px; color: var(--text-secondary, #6e6e73); display: flex; align-items: center; gap: 6px; }
.lz-stat .ls-value {
    font-size: 24px; font-weight: 700; letter-spacing: -0.3px;
    color: var(--text-color, #1d1d1f); font-variant-numeric: tabular-nums;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lz-stat .ls-sub { font-size: 11px; color: var(--text-secondary, #6e6e73); }
.lz-stat .ls-trend-up { color: #34c759; }
.lz-stat .ls-trend-down { color: #ff3b30; }
.lz-stat--blue  .ls-value { color: var(--brand-blue, #0071e3); }
.lz-stat--green .ls-value { color: #34c759; }
.lz-stat--red   .ls-value { color: #ff3b30; }
.lz-stat--orange .ls-value { color: #ff9500; }
.lz-stat--purple .ls-value { color: #af52de; }
@media (max-width: 600px) {
    .lz-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .lz-stat { padding: 12px 14px; }
    .lz-stat .ls-value { font-size: 20px; }
}

/* ============================================================
 * 液态玻璃动效规范(方案C·定稿) — 配合 lz-liquid.js
 * ============================================================ */

/* ---- 玻璃材质令牌 ---- */
:root {
    --lz-pill-glass: rgba(255,255,255,0.30);
    --lz-pill-border: rgba(255,255,255,0.85);
    --lz-pill-shadow: 0 6px 18px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
    --lz-pill-inner: inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -1px 0 rgba(0,0,0,0.03);
    --lz-spec: rgba(255,255,255,0.12);
    --shell-bg: rgba(255,255,255,0.86);          /* 图表控件条胶囊底色(亮) */
    --lz-pill-active: rgba(255,255,255,0.94);
    --lz-pill-active-border: rgba(255,255,255,1);
    --lz-pill-active-shadow: 0 1px 6px rgba(0,0,0,0.07), 0 4px 14px rgba(0,0,0,0.05);
    --lz-active-ink: var(--brand-blue, #0071e3);
}
[data-theme="dark"] {
    --lz-pill-glass: rgba(255,255,255,0.05);
    --lz-pill-border: rgba(255,255,255,0.18);
    --lz-pill-shadow: 0 6px 20px rgba(0,0,0,0.50), 0 1px 3px rgba(0,0,0,0.35);
    --lz-pill-inner: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.25);
    --lz-spec: rgba(255,255,255,0.05);
    --shell-bg: rgba(28,28,30,0.88);             /* 图表控件条胶囊底色(暗) */
    --lz-pill-active: rgba(255,255,255,0.05);
    --lz-pill-active-border: rgba(255,255,255,0.22);
    --lz-pill-active-shadow: 0 2px 10px rgba(0,0,0,0.40);
    --lz-active-ink: #409cff;
}

/* ---- 液态胶囊区(引擎自动加 .lz-liquid / .lz-lq-item) ---- */
.lz-liquid { isolation: isolate; }
.lz-liquid .lz-lq-hover, .lz-liquid .lz-lq-active {
    position: absolute; top: 0; left: 0; z-index: 0;
    opacity: 0; pointer-events: none; will-change: transform, width, height;
}
.lz-liquid .lz-lq-hover {    /* hover: 清透液态玻璃 + 鼠标镜面光斑 */
    background:
        radial-gradient(90px 46px at var(--mx, 50%) var(--my, 50%), var(--lz-spec), rgba(255,255,255,0) 62%),
        var(--lz-pill-glass);
    border: 1px solid var(--lz-pill-border);
    box-shadow: var(--lz-pill-shadow), var(--lz-pill-inner);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    transition: opacity .25s ease;
}
.lz-liquid .lz-lq-active {   /* active: 扁平磨砂玻璃(无渐变+发丝描边) */
    background: var(--lz-pill-active);
    border: 1px solid var(--lz-pill-active-border);
    box-shadow: var(--lz-pill-active-shadow);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    transition: opacity .25s ease;
}
/* 文字/图标永远压在玻璃层之上 */
.lz-liquid .lz-lq-item { position: relative; z-index: 2; }
@media (hover: none) { .lz-liquid .lz-lq-hover { display: none !important; } }

/* ---- user-picker 下拉: hover 底色改由玻璃胶囊承担(其余组件的扁平选中态已直接写入各自基础 CSS) ---- */
.lz-liquid .lz-up-item:hover, .lz-liquid .lz-up-item.hover { background: transparent !important; }

/* ---- 指标卡动效: hover 光斑 + 切换扫光/微脉冲 ---- */
.lz-stat {
    position: relative; overflow: hidden;
    transition: transform .25s cubic-bezier(.3,1.3,.4,1), box-shadow .25s;
}
@media (hover: hover) {
    .lz-stat:hover { transform: translateY(-2px); box-shadow: var(--lz-pill-shadow); }
    .lz-stat::before {
        content: ''; position: absolute; inset: 0; pointer-events: none;
        opacity: 0; transition: opacity .3s; z-index: 0;
        background: radial-gradient(140px 90px at var(--mx, 50%) var(--my, 50%), var(--lz-spec), rgba(255,255,255,0) 65%);
    }
    .lz-stat:hover::before { opacity: .55; }
}
.lz-stat > * { position: relative; z-index: 1; }
.lz-stat .lz-sheen, .lzvp-plan .lz-sheen {
    position: absolute; top: 0; bottom: 0; width: 55%; left: 0; z-index: 0;
    pointer-events: none; opacity: 0;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, var(--lz-spec) 45%, rgba(255,255,255,0) 90%);
    transform: translateX(-130%) skewX(-12deg);
}
.lz-stat.lz-sweep .lz-sheen, .lzvp-plan.lz-sweep .lz-sheen { animation: lzSweep .7s cubic-bezier(.4,.1,.3,1) forwards; }
.lz-stat.lz-sweep { animation: lzStatPulse .55s cubic-bezier(.3,1.4,.4,1); }
@keyframes lzSweep {
    0%   { opacity: 0; transform: translateX(-130%) skewX(-12deg); }
    18%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(260%) skewX(-12deg); }
}
@keyframes lzStatPulse {
    0% { transform: scale(1); } 38% { transform: scale(1.025); } 100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .lz-stat.lz-sweep, .lz-stat.lz-sweep .lz-sheen { animation: none; }
    .lz-liquid .lz-lq-hover, .lz-liquid .lz-lq-active { transition: none; }
    .chart-box.lz-chart-sweep .lz-chart-sheen { animation: none; }
}

/* ============================================================
 * 图表控件条(液态玻璃版) · 配合 chart-theme.js 重构
 * ============================================================ */
.lz-chart-tools { position: absolute; top: 0; right: 0; z-index: 3; display: flex; gap: 6px; align-items: center; }
.lzc-seg { position: relative; isolation: isolate; display: inline-flex; gap: 2px; padding: 3px; border-radius: 980px;
    background: var(--shell-bg, rgba(255,255,255,0.86)); border: 1px solid var(--glass-border, rgba(0,0,0,0.08));
    backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); }
.lzc-seg .li { position: relative; z-index: 2; border: 0; background: transparent; cursor: pointer;
    padding: 3px 11px; border-radius: 980px; font-size: 11px; color: var(--text-secondary, #6e6e73); transition: color .2s; }
.lzc-seg .li:hover { color: var(--brand-blue, #0071e3); }
.lzc-seg .li.on { color: var(--lz-active-ink, var(--brand-blue, #0071e3)); font-weight: 600; }
.lzc-seg .lg-active { position: absolute; top: 0; left: 0; z-index: 0; opacity: 0; pointer-events: none;
    background: var(--lz-pill-active, rgba(255,255,255,0.94));
    border: 1px solid var(--lz-pill-active-border, rgba(255,255,255,1));
    box-shadow: var(--lz-pill-active-shadow, 0 1px 6px rgba(0,0,0,0.07), 0 4px 14px rgba(0,0,0,0.05));
    border-radius: 980px;
    backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
    will-change: transform, width, height; transition: opacity .25s ease; }
.lzc-exp { display: inline-flex; padding: 3px; gap: 2px; border-radius: 980px;
    background: var(--shell-bg, rgba(255,255,255,0.86)); border: 1px solid var(--glass-border, rgba(0,0,0,0.08)); }
.lzc-exp button { border: 0; background: transparent; cursor: pointer; padding: 3px 10px; border-radius: 980px;
    font-size: 11px; color: var(--text-secondary, #6e6e73); transition: color .2s; }
.lzc-exp button:hover { color: var(--brand-blue, #0071e3); }

/* 图表卡片数据刷新扫光(与 .lz-stat 同款节奏) */
.chart-box .lz-chart-sheen {
    position: absolute; top: 0; bottom: 0; width: 55%; left: 0; z-index: 4; pointer-events: none; opacity: 0;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, var(--lz-spec, rgba(255,255,255,0.3)) 45%, rgba(255,255,255,0) 90%);
    transform: translateX(-130%) skewX(-12deg);
}
.chart-box.lz-chart-sweep .lz-chart-sheen { animation: lzChartSweep .7s cubic-bezier(.4,.1,.3,1) forwards; }
@keyframes lzChartSweep {
    0%   { opacity: 0; transform: translateX(-130%) skewX(-12deg); }
    18%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(260%) skewX(-12deg); }
}

/* SVG 外层液态玻璃(占比盘/条形图/离散柱图统一材质,纯外层 5 件套) */
.glass-seg, .bar-seg { cursor: pointer; transition: opacity .3s cubic-bezier(.3,1.3,.4,1), transform .3s cubic-bezier(.3,1.3,.4,1), filter .3s ease; }
.glass-seg.dim, .bar-seg.dim { opacity: var(--glass-dim, 0.22); filter: grayscale(.5) brightness(.75); }
.glass-seg.lit .glass-stroke, .bar-seg.lit .glass-stroke { stroke: rgba(255,255,255,0.7); stroke-width: 1.8; }
.glass-seg.lit .glass-highlight, .bar-seg.lit .glass-highlight { opacity: 0.65; }
.glass-seg.lit .glass-shadow, .bar-seg.lit .glass-shadow { opacity: 0.3; }
.glass-stroke { stroke: rgba(255,255,255,0.25); stroke-width: 1; transition: stroke .3s, stroke-width .3s; pointer-events: none; }
.glass-highlight { opacity: 0.55; transition: opacity .3s; pointer-events: none; }
.glass-shadow { opacity: 0.35; transition: opacity .3s; pointer-events: none; }
.bar-seg { transform-origin: center bottom; }
.bar-seg.lit { transform: translateY(-1px) scaleY(1.008); }

/* 占比图/条形图的玻璃胶囊图例 */
.dleg { position: relative; isolation: isolate; display: flex; align-items: center; gap: 10px;
    padding: 7px 12px; border-radius: 10px; cursor: pointer;
    background: var(--lz-pill-glass, rgba(255,255,255,0.38)); border: 1px solid var(--glass-border, rgba(0,0,0,0.08));
    backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
    transition: border-color .2s, color .2s; font-size: 12.5px; }
.dleg:hover { border-color: var(--lz-pill-border, rgba(255,255,255,0.85)); color: var(--brand-blue, #0071e3); }
.dleg.on { color: var(--lz-active-ink, var(--brand-blue, #0071e3)); font-weight: 600; border-color: var(--lz-pill-active-border, rgba(255,255,255,1)); }
.dleg .sw { position: relative; z-index: 2; width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
.dleg .lbl, .dleg .num { position: relative; z-index: 2; }
.dleg .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dleg .num { font-size: 11px; color: var(--text-secondary, #6e6e73); font-variant-numeric: tabular-nums; }
.dleg .li { position: absolute; top: 0; left: 0; z-index: 0; opacity: 0; pointer-events: none;
    background: var(--lz-pill-active, rgba(255,255,255,0.94));
    border: 1px solid var(--lz-pill-active-border, rgba(255,255,255,1));
    box-shadow: var(--lz-pill-active-shadow, 0 1px 6px rgba(0,0,0,0.07), 0 4px 14px rgba(0,0,0,0.05));
    border-radius: 10px;
    backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%);
    will-change: transform, width, height; transition: opacity .25s ease; }

/* ============================================================
 * 网络加速套餐卡（前台 function/vpn + 后台 vpn.php 预览 同源复用）
 * ============================================================ */
.lzvp-plan { position: relative; padding: 24px; border-radius: 18px; overflow: hidden; box-sizing: border-box;
    background: var(--card-bg, rgba(255,255,255,0.85)); border: 1px solid var(--glass-border, rgba(0,0,0,0.08));
    box-shadow: var(--card-shadow, 0 8px 32px rgba(0,0,0,0.1));
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    transition: transform .2s ease, box-shadow .2s ease;
    --lzvp-accent: var(--brand-blue, #0071e3);
    --lzvp-tint: linear-gradient(160deg, rgba(10,132,255,.13), transparent 60%); }
.lzvp-plan:hover { transform: translateY(-4px); }
.lzvp-plan::before { content:""; position:absolute; inset:0; background: var(--lzvp-tint); pointer-events:none; }
.lzvp-plan > * { position: relative; }
.lzvp-plan { display:flex; flex-direction:column; }
.lzvp-plan > form, .lzvp-plan > .lzvp-plan__buy { margin-top:auto; }
.lzvp-plan.has-badge { padding-top: 40px; }
.lzvp-plan__badge { position:absolute; top:0; left:0; background:var(--lzvp-accent); color:#fff; font-size:11px; font-weight:700; padding:4px 12px; border-radius:0 0 12px 0; z-index:2; }
.lzvp-plan__illus { position:absolute; right:-10px; bottom:-10px; width:96px; height:96px; opacity:.16; pointer-events:none; }
.lzvp-plan__illus svg, .lzvp-plan__illus img { width:100%; height:100%; color:var(--lzvp-accent); object-fit:contain; }
.lzvp-plan__type { font-size:12px; color:var(--text-secondary, #6e6e73); }
.lzvp-plan__name { font-size:18px; font-weight:800; margin:4px 0 12px; }
.lzvp-plan__price { font-size:30px; font-weight:800; letter-spacing:-1px; color:var(--lzvp-accent); }
.lzvp-plan__price small { font-size:13px; color:var(--text-secondary, #6e6e73); font-weight:500; }
.lzvp-plan__feat { list-style:none; padding:0; margin:14px 0; font-size:13px; color:var(--text-secondary, #6e6e73); }
.lzvp-plan__feat li { padding:5px 0; display:flex; align-items:center; gap:8px; }
.lzvp-plan__feat li svg { width:14px; height:14px; color:var(--lzvp-accent); flex-shrink:0; }
.lzvp-plan__desc { font-size:12px; color:var(--text-secondary, #6e6e73); line-height:1.6; margin:6px 0 14px; }
.lzvp-plan__buy { width:100%; justify-content:center; display:inline-flex; align-items:center; gap:6px; padding:11px 18px; border-radius:12px; border:none; cursor:pointer; font-size:13px; font-weight:700; background:var(--lzvp-accent); color:#fff; text-decoration:none; transition:opacity .15s; }
.lzvp-plan__buy:hover { opacity:.9; }
/* 6 套预设：仅改强调色与叠加色，其余继承玻璃底，亮/暗自适应 */
.lzvp-plan.lzvp-t-glass_blue    { --lzvp-accent:#0a84ff; --lzvp-tint:linear-gradient(160deg,rgba(10,132,255,.14),transparent 62%); }
.lzvp-plan.lzvp-t-glass_aurora  { --lzvp-accent:#af52de; --lzvp-tint:linear-gradient(150deg,rgba(175,82,222,.16),rgba(90,200,250,.10) 45%,rgba(255,105,180,.08) 90%); }
.lzvp-plan.lzvp-t-glass_sunset  { --lzvp-accent:#ff8a00; --lzvp-tint:linear-gradient(160deg,rgba(255,138,0,.16),rgba(255,59,105,.09) 70%); }
.lzvp-plan.lzvp-t-glass_emerald { --lzvp-accent:#34c759; --lzvp-tint:linear-gradient(160deg,rgba(52,199,89,.15),transparent 62%); }
.lzvp-plan.lzvp-t-glass_gold    { --lzvp-accent:#d9a441; --lzvp-tint:linear-gradient(160deg,rgba(217,164,65,.20),rgba(255,215,120,.06) 70%); border-color:rgba(217,164,65,.35); }
.lzvp-plan.lzvp-t-glass_mono    { --lzvp-accent:var(--text-color,#1d1d1f); --lzvp-tint:linear-gradient(160deg,rgba(127,127,127,.12),transparent 62%); }
/* 极简预设强调色=文字色，按钮/角标文字须用背景色形成对比（避免深色下白底白字）*/
.lzvp-plan.lzvp-t-glass_mono .lzvp-plan__buy,
.lzvp-plan.lzvp-t-glass_mono .lzvp-plan__badge { color: var(--bg-color, #fff); }