/* 潮煌金 · 客户行情首页 —— 暖金轻奢浅色风 */
* { margin: 0; padding: 0; box-sizing: border-box; }
[v-cloak] { display: none; }

html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    background: #f7f3ea;
    color: #2b2416;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    overscroll-behavior-y: contain;
}

/* ---------- 顶部 ---------- */
.topbar {
    background:
        radial-gradient(120% 100% at 50% -30%, rgba(201, 169, 78, .14) 0%, rgba(247, 243, 234, 0) 60%),
        linear-gradient(180deg, #fffdf6 0%, #faf6ec 100%);
    box-shadow: 0 1px 0 rgba(201, 169, 78, .18), 0 6px 20px rgba(160, 130, 60, .06);
}
.topbar-con {
    max-width: 1180px; margin: 0 auto;
    padding: 18px 16px 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-logo { height: 52px; width: auto; filter: drop-shadow(0 2px 6px rgba(160, 130, 60, .18)); }
.brand-sep { width: 1px; height: 34px; background: linear-gradient(180deg, transparent, rgba(201, 169, 78, .5), transparent); }
.brand-title { font-size: 13px; color: #8a7c5d; letter-spacing: 4px; white-space: nowrap; }

.top-status { display: flex; align-items: center; gap: 14px; }
.clock { text-align: right; line-height: 1.3; }
.clock-time { font-size: 22px; font-weight: 700; color: #3a2f16; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.clock-date { font-size: 12px; color: #a2946f; }

.status {
    display: inline-flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 14px; border-radius: 999px;
    font-size: 13px; letter-spacing: 2px; white-space: nowrap;
    border: 1px solid transparent;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.status.is-open { color: #157a45; border-color: rgba(30, 158, 90, .3); background: rgba(30, 158, 90, .07); }
.status.is-open .status-dot { background: #1e9e5a; box-shadow: 0 0 0 0 rgba(30, 158, 90, .45); animation: pulse 1.6s infinite; }
.status.is-closed { color: #8a7c5d; border-color: rgba(138, 124, 93, .3); background: rgba(138, 124, 93, .07); }
.status.is-closed .status-dot { background: #b0a17b; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(30, 158, 90, .4); }
    70% { box-shadow: 0 0 0 9px rgba(30, 158, 90, 0); }
    100% { box-shadow: 0 0 0 0 rgba(30, 158, 90, 0); }
}

.gold-line {
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #d9c07a 20%, #b8913a 50%, #d9c07a 80%, transparent 100%);
    opacity: .8;
}

/* ---------- 行情主体（表格式，参照融通金版式） ---------- */
.board { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 20px 16px 40px; }
.board-head { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 12px; }
.board-note { font-size: 12px; color: #a2946f; letter-spacing: 1px; }
.board-note.offline { color: #c0392b; }

.qboard {
    background: #fffdf8;
    border: 1px solid #ece2c8;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(160, 130, 60, .06), 0 10px 26px rgba(160, 130, 60, .08);
}
.qtab { width: 100%; border-collapse: collapse; table-layout: fixed; }
.qtab thead th {
    padding: 13px 4px;
    font-size: 13px; font-weight: 600; letter-spacing: 3px;
    color: #8a7c5d;
    background: linear-gradient(180deg, #faf5e6, #f5eeda);
    border-bottom: 2px solid #e7dcbe;
    text-align: center; white-space: nowrap;
}
.qtab thead th.col-name { width: 31%; }
.qtab thead th.col-hl { width: 24%; }
.qtab tbody td {
    padding: 15px 4px;
    text-align: center;
    border-top: 1px solid #f4efe2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
}
.qtab tbody tr:first-child td { border-top: none; }
.qtab tbody tr:nth-child(even) { background: #faf7ef; }
.qtab tbody tr:hover { background: #fdf9f0; }

.qname {
    font-size: clamp(14px, 3.8vw, 16px); font-weight: 700; letter-spacing: 1px;
    color: #a2792a;
    text-align: center;
}
.qbuy, .qsell { font-size: clamp(17px, 4.8vw, 21px); font-weight: 700; }
.qbuy { color: #b8860b; }
.qsell { color: #2b2416; }
/* 价格跳动：涨红跌绿（类名与模板 flashUp/flashDown 一致） */
.qbuy.flashUp, .qsell.flashUp { animation: flashUp 1s ease; }
.qbuy.flashDown, .qsell.flashDown { animation: flashDown 1s ease; }
@keyframes flashUp {
    0% { color: #d3302f; text-shadow: 0 0 16px rgba(211, 48, 47, .35); }
    55% { color: #d3302f; }
    100% { }
}
@keyframes flashDown {
    0% { color: #1e9e5a; text-shadow: 0 0 16px rgba(30, 158, 90, .35); }
    55% { color: #1e9e5a; }
    100% { }
}

.qhl { line-height: 1.5; }
.qhl .hl-high, .qhl .hl-low { display: block; font-size: clamp(12px, 3.4vw, 15px); font-weight: 600; }
.qhl .hl-high { color: #c0392b; }
.qhl .hl-low { color: #1e9e5a; }

/* ---------- 加载态 ---------- */
.empty {
    padding: 70px 0; text-align: center; color: #a2946f; font-size: 14px; letter-spacing: 2px;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.empty-ring {
    width: 34px; height: 34px; border-radius: 50%;
    border: 2px solid rgba(201, 169, 78, .25); border-top-color: #b8913a;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 底部 ---------- */
.foot { background: linear-gradient(180deg, #f4efe1, #efe9d7); border-top: 1px solid rgba(201, 169, 78, .25); }
.foot-con { max-width: 1180px; margin: 0 auto; padding: 26px 16px 22px; }
.hotline-card {
    display: inline-flex; align-items: center; gap: 16px;
    padding: 15px 24px; border-radius: 14px; margin-bottom: 20px;
    background: linear-gradient(135deg, #f6e6b5, #ecd188);
    border: 1px solid #d9c07a;
    box-shadow: 0 6px 16px rgba(184, 145, 58, .18);
}
.hotline-ico {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #c9a94e, #a2792a);
    box-shadow: 0 4px 12px rgba(162, 121, 42, .35);
}
.hotline-body { display: flex; flex-direction: column; }
.hotline-body em { font-style: normal; font-size: 12px; color: #8a713a; letter-spacing: 2px; margin-bottom: 2px; }
.hotline-num {
    font-size: 21px; font-weight: 700; line-height: 1.5;
    color: #3a2c0d; text-decoration: none;
    font-variant-numeric: tabular-nums; letter-spacing: 1px;
}
.hotline-num:hover { color: #a2792a; }

.foot-cols { display: flex; gap: 30px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.foot-info { flex: 1; min-width: 260px; font-size: 13px; line-height: 2; color: #6b5f43; }
.foot-info label {
    display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 5px;
    font-size: 11px; color: #a2792a; border: 1px solid rgba(184, 145, 58, .35); background: rgba(201, 169, 78, .1);
}
.foot-disclaimer { margin-top: 10px; font-size: 12px; line-height: 1.9; color: #a2946f; }

.foot-qr { text-align: center; cursor: pointer; flex: none; }
.foot-qr img {
    width: 84px; height: 84px; border-radius: 10px; display: block; margin: 0 auto 6px;
    border: 1px solid #d9c07a; background: #fff; padding: 4px;
    transition: transform .15s ease;
    box-shadow: 0 4px 12px rgba(160, 130, 60, .12);
}
.foot-qr:hover img { transform: scale(1.04); }
.foot-qr span { font-size: 11px; color: #a2946f; letter-spacing: 2px; }
.foot-copy { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(201, 169, 78, .2); font-size: 11px; color: #b0a17b; letter-spacing: 1px; text-align: center; }
.foot-copy .ver-tag { opacity: .55; margin-left: 8px; letter-spacing: 0; }

/* ---------- 弹层 ---------- */
.mask {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(58, 47, 22, .35); backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.qr-zoom { text-align: center; }
.qr-zoom img { width: min(70vw, 280px); border-radius: 14px; background: #fff; padding: 10px; border: 1px solid #d9c07a; box-shadow: 0 20px 60px rgba(58, 47, 22, .3); }
.qr-zoom p { margin-top: 14px; color: #6b5c38; font-size: 14px; letter-spacing: 3px; }

/* 移动端微调（字号用 clamp 流式缩放，无需跳跃） */
@media (max-width: 640px) {
    .topbar-con { padding: 12px 12px 10px; gap: 10px; }
    .brand-logo { height: 38px; }
    .brand-sep { height: 24px; }
    .brand-title { font-size: 11px; letter-spacing: 2px; }
    .clock-time { font-size: 16px; }
    .clock-date { font-size: 10px; }
    .status { height: 28px; padding: 0 10px; font-size: 11px; letter-spacing: 1px; }
    .board { padding: 14px 10px 26px; }
    .qtab tbody td { padding: 13px 2px; }
    .qtab thead th { letter-spacing: 2px; }
    .hotline-card { width: 100%; justify-content: center; margin-bottom: 16px; }
    .hotline-num { font-size: 19px; }
    .foot-con { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}