@charset "utf-8";
/* ============================================================
   贵金属实时行情页样式 (le_metal 插件)
   与 tianqi 主题风格一致：圆角卡片 + 上浮悬停；贵金属模块采用
   金色系渐变作为识别色，结构色仍沿用主题蓝。
   CSS 变量带 fallback，切换其他主题也能正常显示
   ============================================================ */

:root{
    --metal-blue:var(--blue,#3a8fe0);
    --metal-blue-deep:var(--blue-deep,#2b6fc0);
    --metal-grad:linear-gradient(160deg,#f6c96b,#e0a03c 55%,#c07d1e);
    --metal-border:var(--border,#e6eef6);
    --metal-dim:var(--text-dim,#7a8ea6);
    --metal-text:var(--text,#444);
    --metal-radius:var(--radius,16px);
    --metal-shadow:var(--shadow,0 6px 24px rgba(90,140,190,.10));
    --metal-up:#e0343a;
    --metal-down:#149860;
    --metal-flat:#8aa0b4;
}

/* ---- 页面容器 ---- */
.metal-wrap{
    max-width:1100px;margin:12px auto 0;padding:0 10px 20px;
}

/* ---- 白色圆角面板 ---- */
.metal-panel{
    background:var(--card,#fff);
    border-radius:var(--metal-radius);
    box-shadow:var(--metal-shadow);
    overflow:hidden;
    text-align:left;
}
.metal-panel-title{
    display:flex;align-items:center;
    height:46px;line-height:46px;padding:0 18px;margin:0;
    color:var(--metal-blue-deep);font-weight:bold;font-size:16px;
    border-bottom:1px solid var(--metal-border);
}
.metal-panel-title::before{
    content:"";width:5px;height:18px;background:var(--metal-grad);
    border-radius:3px;margin-right:10px;flex-shrink:0;
}
.metal-panel-title span{
    margin-left:auto;font-weight:normal;font-size:12px;color:var(--metal-dim);
}
.metal-panel-body{padding:16px;}

/* ---- 页面导航标签 ---- */
.metal-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.metal-nav-item{
    display:inline-block;
    background:#f2f8fd;border:1px solid var(--metal-border);
    color:var(--metal-blue-deep);
    font-size:13px;line-height:30px;padding:0 16px;
    border-radius:15px;text-decoration:none;
    transition:all .2s;
}
.metal-nav-item:hover{background:#fff;border-color:var(--metal-blue);transform:translateY(-1px);}
.metal-nav-item.metal-nav-on{
    background:var(--metal-grad);border-color:transparent;
    color:#fff;font-weight:bold;
    box-shadow:0 4px 12px rgba(192,125,30,.28);
    cursor:default;
}
.metal-nav-item.metal-nav-on:hover{transform:none;}

/* ---- 顶部渐变英雄卡 ---- */
.metal-hero{
    padding:22px 24px;border-radius:var(--metal-radius);
    background:var(--metal-grad);color:#fff;
    box-shadow:0 8px 28px rgba(192,125,30,.26);
    position:relative;overflow:hidden;margin-bottom:14px;
}
.metal-hero::before{
    content:"🏅";position:absolute;top:-6px;right:20px;
    font-size:84px;opacity:.18;line-height:1;
}
.metal-hero::after{
    content:"";position:absolute;bottom:-50px;right:-40px;
    width:200px;height:200px;
    background:radial-gradient(circle,rgba(255,255,255,.24),transparent 70%);
}
.metal-hero > *{position:relative;z-index:1;}

.metal-badge{
    display:inline-block;background:rgba(255,255,255,.2);
    border:1px solid rgba(255,255,255,.38);
    font-size:12px;line-height:22px;padding:0 12px;
    border-radius:12px;margin-bottom:10px;
}
.metal-title{font-size:24px;font-weight:bold;line-height:32px;margin:0;color:#fff;}
.metal-hero-rate{margin-top:6px;font-size:15px;color:rgba(255,255,255,.95);}
.metal-hero-kv b{font-size:26px;font-weight:bold;margin-right:6px;}
.metal-hero-kv i{font-style:normal;font-size:12px;opacity:.86;}
.metal-meta{margin-top:8px;font-size:12px;color:rgba(255,255,255,.9);}
.metal-meta span{display:inline-block;margin-right:22px;line-height:20px;}
.metal-stale{
    margin-top:10px;display:inline-block;
    background:rgba(255,255,255,.2);border-radius:10px;
    font-size:12px;line-height:20px;padding:6px 12px;
}

/* ---- 品种卡片网格 ---- */
.metal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.metal-card{
    display:block;
    border:1px solid var(--metal-border);
    background:#fafcff;border-radius:12px;
    padding:14px 16px;
    text-decoration:none;color:inherit;
    transition:transform .2s,box-shadow .2s,border-color .2s;
}
.metal-card:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(90,140,190,.18);
    border-color:#e0a03c;
}
.metal-card-top{display:flex;align-items:center;}
.metal-code{
    display:inline-block;background:var(--metal-grad);
    color:#fff;font-size:12px;font-weight:bold;
    line-height:22px;padding:0 10px;border-radius:11px;
    letter-spacing:1px;
}
.metal-name{color:var(--metal-dim);font-size:12px;margin-left:8px;}
.metal-pct{
    margin-left:auto;font-size:12px;font-weight:bold;
    line-height:22px;padding:0 8px;border-radius:11px;
    background:rgba(148,163,178,.14);color:var(--metal-flat);
}
.metal-pct-up{background:rgba(224,52,58,.12);color:var(--metal-up);}
.metal-pct-down{background:rgba(20,152,96,.12);color:var(--metal-down);}
.metal-pct-flat{background:rgba(148,163,178,.14);color:var(--metal-flat);}

.metal-main{padding:10px 0 4px;}
.metal-price{display:flex;align-items:baseline;gap:4px;}
.metal-price b{font-size:26px;line-height:32px;font-weight:bold;color:#c07d1e;}
.metal-price i{font-style:normal;font-size:12px;color:var(--metal-dim);}
.metal-price2{
    display:flex;align-items:baseline;gap:4px;
    margin-top:2px;font-size:14px;color:var(--metal-text);font-weight:600;
}
.metal-price2 i{font-style:normal;font-size:11px;color:var(--metal-dim);font-weight:normal;}

.metal-sub p{
    margin:0;line-height:20px;font-size:12px;color:var(--metal-dim);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---- 比价指标 ---- */
.metal-ratio{
    margin-top:16px;padding-top:14px;
    border-top:1px dashed var(--metal-border);
}
.metal-ratio-title{
    font-weight:bold;font-size:14px;color:var(--metal-blue-deep);
    margin-bottom:10px;line-height:22px;
}
.metal-ratio-title span{margin-left:10px;font-weight:normal;font-size:12px;color:var(--metal-dim);}
.metal-ratio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.metal-ratio-item{
    border:1px solid var(--metal-border);background:#fafcff;
    border-radius:10px;padding:10px 12px;
}
.metal-ratio-name{font-size:12px;color:var(--metal-blue-deep);font-weight:bold;}
.metal-ratio-val{font-size:22px;line-height:28px;font-weight:bold;color:#c07d1e;margin:2px 0 4px;}
.metal-ratio-desc{font-size:11px;line-height:17px;color:var(--metal-dim);}

/* ---- 品种目录导航 ---- */
.metal-dir{margin-top:16px;padding-top:14px;border-top:1px dashed var(--metal-border);}
.metal-dir-title{
    font-weight:bold;font-size:14px;color:var(--metal-blue-deep);
    margin-bottom:10px;line-height:22px;
}
.metal-dir-title span{margin-left:10px;font-weight:normal;font-size:12px;color:var(--metal-dim);}
.metal-dir-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.metal-dir-item{
    display:flex;align-items:center;gap:6px;
    background:#f2f8fd;border:1px solid var(--metal-border);
    border-radius:10px;padding:7px 10px;
    font-size:12px;color:var(--metal-text);
    text-decoration:none;overflow:hidden;
    white-space:nowrap;text-overflow:ellipsis;
    transition:all .2s;
}
.metal-dir-item b{color:var(--metal-blue-deep);font-size:12px;flex-shrink:0;letter-spacing:.5px;}
.metal-dir-item:hover{
    background:#fff;border-color:#e0a03c;
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(90,140,190,.15);
}
.metal-dir-more{
    color:var(--metal-blue);font-weight:bold;justify-content:center;
    background:transparent;border-style:dashed;
}

/* ---- 底部说明 ---- */
.metal-note{
    margin-top:14px;padding-top:12px;
    border-top:1px dashed var(--metal-border);
    color:#a9bccd;font-size:12px;line-height:20px;
}
.metal-morelink{color:var(--metal-blue);font-weight:bold;margin-left:6px;}
.metal-morelink:hover{color:var(--metal-blue-deep);}

/* ---- 空状态 ---- */
.metal-empty{text-align:center;padding:56px 15px;color:var(--metal-dim);}
.metal-empty-ico{font-size:44px;display:block;margin-bottom:12px;}
.metal-empty p{margin:0;font-size:14px;}

/* ============================================================
   E-E-A-T 内容区
   ============================================================ */
.metal-crumbs{
    display:flex;align-items:center;flex-wrap:wrap;gap:6px;
    font-size:12px;color:var(--metal-dim);
    padding:0 4px 10px;
}
.metal-crumbs a{color:var(--metal-dim);text-decoration:none;}
.metal-crumbs a:hover{color:var(--metal-blue);}
.metal-crumbs i{font-style:normal;color:#c3d2df;}
.metal-crumbs b{color:var(--metal-text);font-weight:600;}

.metal-trust-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;}
.metal-trust-chip{
    display:inline-block;
    background:#fff8ec;color:#a9721a;
    border:1px solid #f2e0c0;
    border-radius:999px;
    padding:4px 12px;font-size:12px;line-height:18px;
}

.metal-eea-sec{
    border:1px solid var(--metal-border);
    background:#fafcff;border-radius:12px;
    padding:14px 16px;margin-bottom:12px;
}
.metal-eea-sec h3{
    display:flex;align-items:center;gap:8px;
    font-size:15px;color:var(--metal-text);
    margin:0 0 10px;font-weight:700;
}
.metal-eea-sec h3::before{
    content:'';width:4px;height:16px;border-radius:2px;
    background:linear-gradient(-45deg,#32b6ff,#4276ff);
}
.metal-eea-sec p{margin:0 0 8px;color:#5b7186;font-size:13px;line-height:22px;}
.metal-eea-sec p:last-child{margin-bottom:0;}
.metal-eea-sec ul{margin:0 0 8px;padding-left:18px;color:#5b7186;font-size:13px;line-height:22px;}
.metal-eea-sec ul:last-child{margin-bottom:0;}
.metal-eea-sec li{margin-bottom:4px;}
.metal-eea-sec li:last-child{margin-bottom:0;}
.metal-eea-sec b{color:var(--metal-text);}
.metal-eea-sec code{
    background:#eef5fb;border-radius:4px;
    padding:1px 6px;font-size:12px;color:#2b7cc9;
}
.metal-eea-sec a{color:var(--metal-blue);text-decoration:none;}
.metal-eea-sec a:hover{color:var(--metal-blue-deep);text-decoration:underline;}

.metal-faq details{border-top:1px dashed var(--metal-border);padding:10px 0;}
.metal-faq details:first-of-type{border-top:none;padding-top:2px;}
.metal-faq summary{
    cursor:pointer;font-weight:600;font-size:13px;
    color:var(--metal-text);line-height:20px;
    list-style:none;position:relative;padding-right:26px;
    user-select:none;
}
.metal-faq summary::-webkit-details-marker{display:none;}
.metal-faq summary::after{
    content:'+';position:absolute;right:2px;top:0;
    font-size:16px;color:var(--metal-blue);font-weight:700;
}
.metal-faq details[open] summary::after{content:'−';}
.metal-faq details p{margin:8px 0 0;padding-right:8px;}

.metal-disclaim{background:#fffaf3;border-color:#f3e3c8;}
.metal-disclaim h3::before{background:linear-gradient(-45deg,#ffb74d,#ff9800);}

/* ============================================================
   单位换算页
   ============================================================ */
.metal-conv{
    border:1px solid var(--metal-border);
    background:#fafcff;border-radius:12px;
    padding:16px;margin-bottom:14px;
}
.metal-conv-title{font-weight:bold;color:var(--metal-blue-deep);font-size:14px;margin-bottom:12px;}
.metal-conv-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.metal-conv-amount{
    width:130px;flex-shrink:0;
    border:1px solid #d3e3f2;background:#fff;color:#333;
    padding:0 12px;height:38px;line-height:36px;
    border-radius:19px;outline:none;font-size:14px;
}
.metal-conv-amount:focus{border-color:#e0a03c;}
.metal-conv-sel{
    flex:1;min-width:140px;max-width:240px;
    border:1px solid #d3e3f2;background:#fff;color:#333;
    height:38px;border-radius:19px;outline:none;
    padding:0 12px;font-size:14px;cursor:pointer;
}
.metal-conv-sel:focus{border-color:#e0a03c;}
.metal-conv-result{margin-top:12px;font-size:16px;color:var(--metal-text);line-height:26px;}
.metal-conv-result b{color:#c07d1e;font-size:22px;}
.metal-conv-rate{margin-top:6px;font-size:12px;color:var(--metal-dim);line-height:20px;}

.metal-allbar{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.metal-search{
    flex:1;max-width:420px;
    border:1px solid #d3e3f2;background:#fff;color:#333;
    padding:0 14px;height:36px;line-height:34px;
    border-radius:18px;outline:none;font-size:13px;
}
.metal-search:focus{border-color:#e0a03c;}
.metal-allcount{font-size:12px;color:var(--metal-dim);}

.metal-alllist{display:block;}
.metal-region{margin-bottom:16px;}
.metal-region-title{
    display:flex;align-items:center;
    font-weight:bold;font-size:14px;color:var(--metal-blue-deep);
    margin-bottom:10px;line-height:22px;
}
.metal-region-title span{margin-left:10px;font-weight:normal;font-size:12px;color:var(--metal-dim);}
.metal-region-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.metal-item{
    display:flex;align-items:center;gap:8px;
    border:1px solid var(--metal-border);
    background:#fafcff;border-radius:10px;
    padding:8px 12px;
    transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;
    color:inherit;text-decoration:none;
}
.metal-item:hover{
    border-color:#e0a03c;background:#fff;
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(90,140,190,.15);
}
.metal-item-code{font-weight:bold;font-size:13px;color:#c07d1e;width:48px;flex-shrink:0;}
.metal-item-name{
    font-size:12px;color:var(--metal-dim);
    flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.metal-item-sub{display:block;font-style:normal;font-size:11px;color:#a9bccd;}
.metal-item-rate{font-size:13px;color:var(--metal-text);font-weight:600;flex-shrink:0;}
.metal-item-pct{
    flex-shrink:0;font-size:12px;font-weight:bold;line-height:20px;
    padding:0 8px;border-radius:10px;
    background:rgba(148,163,178,.14);color:var(--metal-flat);
}

/* ---- 明细表 ---- */
.metal-table-wrap{
    overflow:auto;margin-top:8px;
    border:1px solid var(--metal-border);
    border-radius:12px;background:#fff;
    -webkit-overflow-scrolling:touch;
}
.metal-table{
    border-collapse:separate;border-spacing:0;
    width:100%;min-width:620px;font-size:13px;
}
.metal-table th,.metal-table td{
    border-bottom:1px solid #eef4fa;
    padding:9px 12px;text-align:right;white-space:nowrap;
}
.metal-table th{background:#f2f8fd;color:var(--metal-blue-deep);font-weight:bold;}
.metal-table th:first-child,.metal-table td:first-child,
.metal-table th:nth-child(2),.metal-table td:nth-child(2){text-align:left;}
.metal-table tbody tr:hover td{background:#f7fbff;}
.metal-table td a{color:var(--metal-blue-deep);text-decoration:none;}
.metal-table td a:hover{color:#c07d1e;}
.metal-table tbody tr.metal-tr-on td{background:#fffaf0;}
.metal-tr-on td:first-child{font-weight:bold;}

/* 涨跌文字色（红涨绿跌） */
.metal-pct-up, .metal-table td.metal-pct-up{color:var(--metal-up)!important;}
.metal-pct-down, .metal-table td.metal-pct-down{color:var(--metal-down)!important;}
.metal-pct-flat, .metal-table td.metal-pct-flat{color:var(--metal-flat)!important;}
.metal-up-txt{color:var(--metal-up)!important;}
.metal-down-txt{color:var(--metal-down)!important;}

/* ============================================================
   涨跌热力图
   ============================================================ */
.metal-stat-row{
    display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
    margin-bottom:14px;
}
.metal-stat-cell{
    grid-column:span 2;
    border:1px solid var(--metal-border);
    background:#fafcff;border-radius:12px;
    padding:10px 14px;
}
.metal-stat-cell b{
    display:block;font-size:24px;line-height:30px;
    color:var(--metal-blue-deep);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.metal-stat-cell span{display:block;font-size:12px;color:var(--metal-dim);line-height:18px;}
.metal-stat-up b{color:var(--metal-up);}
.metal-stat-down b{color:var(--metal-down);}
.metal-stat-flat b{color:var(--metal-flat);}
.metal-stat-wide{grid-column:span 3;}
.metal-stat-wide .metal-stat-mini{font-size:15px;line-height:24px;color:var(--metal-text);}

.metal-heat-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.metal-sort{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.metal-sort-label{font-size:12px;color:var(--metal-dim);}
.metal-sort-btn{
    display:inline-block;background:#f2f8fd;
    border:1px solid var(--metal-border);
    color:var(--metal-blue-deep);
    font-size:12px;line-height:26px;padding:0 12px;border-radius:13px;
    text-decoration:none;transition:all .2s;
}
.metal-sort-btn:hover{background:#fff;border-color:#e0a03c;}
.metal-sort-btn.metal-on{
    background:var(--metal-grad);
    border-color:transparent;color:#fff;font-weight:bold;
}

.metal-heat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.metal-heat-item{
    display:block;border-radius:10px;padding:10px 12px;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.38);
    transition:transform .18s,box-shadow .18s;
    overflow:hidden;
}
.metal-heat-item:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(90,140,190,.22);}
.metal-heat-code{display:block;font-weight:bold;font-size:13px;line-height:19px;letter-spacing:.5px;}
.metal-heat-name{display:block;font-size:11px;line-height:16px;opacity:.88;}
.metal-heat-rate{
    display:block;font-size:17px;line-height:24px;font-weight:bold;margin-top:4px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.metal-heat-rate i{font-style:normal;font-size:11px;font-weight:normal;margin-left:3px;}
.metal-heat-pct{display:block;font-size:13px;line-height:20px;font-weight:bold;}
.metal-heat-prev{display:block;font-size:10px;line-height:15px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.metal-legend{
    display:flex;align-items:center;gap:6px;flex-wrap:wrap;
    margin-top:14px;padding-top:12px;
    border-top:1px dashed var(--metal-border);
}
.metal-legend-title{font-size:12px;color:var(--metal-dim);}
.metal-legend-chip{display:inline-block;font-size:11px;line-height:20px;padding:0 10px;border-radius:10px;}
.metal-legend-note{font-size:11px;color:#a9bccd;}

/* ============================================================
   品种详情页
   ============================================================ */
.metal-switch{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    margin-bottom:14px;
}
.metal-switch-label{font-size:13px;color:var(--metal-dim);}
.metal-switch-sel{
    border:1px solid #d3e3f2;background:#fff;color:#333;
    height:36px;border-radius:18px;outline:none;
    padding:0 12px;font-size:14px;cursor:pointer;min-width:200px;
}
.metal-switch-sel:focus{border-color:#e0a03c;}
.metal-switch-meta{font-size:12px;color:var(--metal-dim);}

.metal-hero-detail::before{content:"📈";}
.metal-hero-prices{
    display:flex;align-items:center;gap:26px;flex-wrap:wrap;
    margin-top:6px;
}
.metal-hero-price-main{display:flex;align-items:baseline;gap:6px;}
.metal-hero-price-main b{font-size:44px;line-height:56px;font-weight:bold;text-shadow:0 2px 8px rgba(120,80,10,.22);}
.metal-hero-price-main i{font-style:normal;font-size:14px;}
.metal-hero-price-side div{display:flex;align-items:baseline;gap:6px;line-height:26px;}
.metal-hero-price-side b{font-size:22px;font-weight:bold;}
.metal-hero-price-side i{font-style:normal;font-size:12px;opacity:.88;}
.metal-hero-native{font-size:12px;color:rgba(255,255,255,.9);}
.metal-hero-native b{font-size:14px!important;}
.metal-hero-pctbox{
    margin-left:auto;text-align:center;
    background:rgba(255,255,255,.2);
    border:1px solid rgba(255,255,255,.34);
    border-radius:12px;padding:8px 16px;
}
.metal-hero-pctbox b{display:block;font-size:24px;line-height:30px;font-weight:bold;}
.metal-hero-pctbox i{font-style:normal;font-size:11px;opacity:.9;}
.metal-hero-pctbox.metal-pct-bg-up{background:rgba(224,52,58,.42);}
.metal-hero-pctbox.metal-pct-bg-down{background:rgba(20,152,96,.42);}

.metal-hero-grid{
    display:flex;gap:18px;flex-wrap:wrap;
    margin-top:12px;padding-top:10px;
    border-top:1px solid rgba(255,255,255,.28);
    font-size:12px;color:rgba(255,255,255,.92);
}
.metal-hero-grid b{color:#fff;}
.metal-hero-empty{
    margin-top:10px;background:rgba(255,255,255,.18);
    border-radius:10px;padding:10px 12px;font-size:13px;
}

/* ---- 走势曲线 ---- */
.metal-trend{
    border:1px solid var(--metal-border);
    background:#fafcff;border-radius:12px;
    padding:14px 16px;margin-bottom:14px;
}
.metal-trend-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.metal-trend-title{font-weight:bold;font-size:14px;color:var(--metal-blue-deep);}
.metal-trend-unit{display:flex;gap:6px;}
.metal-u-btn{
    display:inline-block;background:#fff;
    border:1px solid var(--metal-border);
    color:var(--metal-blue-deep);
    font-size:12px;line-height:24px;padding:0 10px;border-radius:12px;
    text-decoration:none;transition:all .2s;
}
.metal-u-btn:hover{border-color:#e0a03c;}
.metal-u-btn.metal-on{background:var(--metal-grad);border-color:transparent;color:#fff;font-weight:bold;}
.metal-trend-tabs{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;}
.metal-trend-tabs a{
    display:inline-block;background:#fff;
    border:1px solid var(--metal-border);
    color:var(--metal-blue-deep);
    font-size:12px;line-height:26px;padding:0 12px;border-radius:13px;
    text-decoration:none;transition:all .2s;
}
.metal-trend-tabs a:hover{border-color:#e0a03c;}
.metal-trend-tabs a.metal-on{background:var(--metal-grad);border-color:transparent;color:#fff;font-weight:bold;}
.metal-trend-stat{
    display:flex;gap:18px;flex-wrap:wrap;
    font-size:12px;color:var(--metal-dim);line-height:20px;
    margin-bottom:4px;
}
.metal-trend-stat b{color:var(--metal-text);}
.metal-trend-chart{width:100%;height:320px;}
.metal-trend-empty{
    display:flex;align-items:center;justify-content:center;
    height:100%;color:var(--metal-dim);font-size:13px;text-align:center;padding:0 20px;
}
.metal-trend-tip{
    margin-top:8px;padding-top:8px;
    border-top:1px dashed var(--metal-border);
    font-size:11px;color:#a9bccd;line-height:18px;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:900px){
    .metal-grid{grid-template-columns:repeat(2,1fr);}
    .metal-ratio-grid{grid-template-columns:repeat(2,1fr);}
    .metal-dir-grid{grid-template-columns:repeat(3,1fr);}
    .metal-region-grid{grid-template-columns:1fr;}
    .metal-heat-grid{grid-template-columns:repeat(3,1fr);}
    .metal-stat-wide{grid-column:span 6;}
    .metal-hero-price-main b{font-size:36px;line-height:46px;}
}
@media (max-width:600px){
    .metal-hero{padding:16px 14px;}
    .metal-title{font-size:19px;line-height:27px;}
    .metal-meta span{display:block;margin-right:0;}
    .metal-grid{grid-template-columns:1fr;}
    .metal-price b{font-size:23px;}
    .metal-ratio-grid{grid-template-columns:1fr;}
    .metal-dir-grid{grid-template-columns:repeat(2,1fr);}
    .metal-stat-row{grid-template-columns:repeat(2,1fr);gap:8px;}
    .metal-stat-cell{grid-column:span 1;padding:8px 10px;}
    .metal-stat-cell b{font-size:19px;line-height:25px;}
    .metal-stat-wide{grid-column:span 2;}
    .metal-heat-grid{grid-template-columns:repeat(2,1fr);gap:6px;}
    .metal-heat-rate{font-size:15px;}
    .metal-conv-row{gap:6px;}
    .metal-conv-sel{max-width:none;}
    .metal-trend{padding:12px;}
    .metal-trend-chart{height:240px;}
    .metal-trend-tabs{margin-left:0;width:100%;}
    .metal-trend-tabs a{padding:0 9px;font-size:11px;}
    .metal-trend-stat{gap:10px;}
    .metal-hero-prices{gap:14px;}
    .metal-hero-price-main b{font-size:30px;line-height:40px;}
    .metal-hero-pctbox{margin-left:0;}
    .metal-trust-chip{padding:3px 10px;font-size:11px;}
    .metal-eea-sec{padding:12px;}
    .metal-legend-note{display:block;width:100%;}
    .metal-crumbs{padding:0 2px 8px;}
}