/* ============================================================
   赢图汇率网 common.css
   全站公共：变量 / 重置 / 基础排版 / 通用组件（卡片、表格、
   徽标、按钮、表单、换算器、分页、面包屑、页脚）
   PC 专属布局见 pc.css，移动端专属见 mobile.css
   ============================================================ */

:root {
    /* 色板：黑金（专业金融风） */
    --ink:        #17181C;   /* 曜石黑（导航/表头/标题） */
    --ink-2:      #43464E;   /* 次级文字 */
    --ink-3:      #83868F;   /* 辅助文字 */
    --blue:       #1456B8;   /* 主蓝（金融信任色） */
    --blue-dark:  #0D3E8A;
    --blue-bg:    #EAF1FC;   /* 浅蓝底（选中/悬停） */
    --gold:       #C89B3C;   /* 品牌金（点缀，不滥用） */
    --gold-dark:  #A87F2A;
    --up:         #D8402F;   /* 涨（中国市场惯例红涨） */
    --down:       #0E9F6E;   /* 跌 */
    --line:       #E3E8EF;   /* 发丝线 */
    --line-2:     #EDF1F6;
    --bg:         #F6F8FB;   /* 页面底 */
    --card:       #FFFFFF;

    /* 字体：中文栈 + 数字等宽（汇率数字是全站主角） */
    --font: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "微软雅黑", sans-serif;
    --font-num: "Helvetica Neue", "Segoe UI", "Arial", "PingFang SC", sans-serif;

    --radius: 8px;
    --radius-sm: 4px;
    --shadow: 0 1px 2px rgba(20, 36, 59, .05), 0 4px 16px rgba(20, 36, 59, .06);
}

/* ---------- 重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    font-size: 14px;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
ul, ol { list-style: none; }
img { max-width: 100%; border: 0; vertical-align: middle; }
button, input, select { font-family: inherit; }

/* 数字统一等宽对齐：表格里的小数点才不会跳 */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ---------- 通用卡片 ---------- */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.card + .card { margin-top: 16px; }

/* 卡片头：藏青条 + 标题 + 右侧 more（模拟牌价屏表头） */
.card-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 44px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #FBFCFE, #F4F7FB);
}
.card-hd h2, .card-hd h3 {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* 金色小方块 = 全站统一的栏目记号 */
.card-hd h2::before, .card-hd h3::before {
    content: "";
    width: 6px; height: 14px;
    background: var(--gold);
    border-radius: 2px;
}
.card-hd .more { font-size: 12px; color: var(--ink-3); }
.card-bd { padding: 16px; }

/* ---------- 数据表格（全站核心组件） ---------- */
.rate-table { width: 100%; border-collapse: collapse; }
.rate-table th {
    background: var(--ink);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 9px 12px;
    text-align: left;
    white-space: nowrap;
}
.rate-table th.num, .rate-table td.num { text-align: right; }
.rate-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-2);
    font-size: 14px;
    white-space: nowrap;
}
.rate-table tbody tr:nth-child(even) { background: #FAFBFD; }
.rate-table tbody tr:hover { background: var(--blue-bg); }
.rate-table td.num { font-size: 15px; }
.rate-table .code { color: var(--ink-3); font-size: 12px; margin-left: 4px; }

/* 涨跌徽标：红涨绿跌（中国市场惯例） */
.b-up   { color: var(--up); }
.b-down { color: var(--down); }
.b-flat { color: var(--ink-3); }
.b-up::before   { content: "▲"; font-size: 10px; margin-right: 2px; }
.b-down::before { content: "▼"; font-size: 10px; margin-right: 2px; }

/* ---------- 按钮 / 表单 ---------- */
.btn {
    display: inline-block;
    background: var(--blue);
    color: #fff;
    border: 1px solid var(--blue);
    border-radius: var(--radius-sm);
    padding: 8px 22px;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s;
}
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); }

.input, .select {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 14px;
    color: var(--ink);
    background: #fff;
    outline: none;
}
.input:focus, .select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(20, 86, 184, .12); }

/* ---------- 汇率换算器（首页 / 货币对页共用） ---------- */
.conv { display: flex; align-items: center; gap: 10px; }
.conv .input-amt {
    flex: 1;
    min-width: 0;
    font-size: 18px;
    font-weight: 600;
    font-family: var(--font-num);
    padding: 10px 12px;
}
.conv .select { font-size: 14px; padding: 10px 8px; }
.conv .swap {
    width: 34px; height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--blue);
    font-size: 16px;
    cursor: pointer;
    flex: none;
    transition: transform .2s, border-color .15s;
}
.conv .swap:hover { border-color: var(--blue); transform: rotate(180deg); }
.conv-result {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--blue-bg);
    border-radius: var(--radius-sm);
    font-size: 15px;
}
.conv-result strong {
    font-family: var(--font-num);
    font-size: 22px;
    color: var(--blue-dark);
    margin: 0 2px;
}
.conv-result .sub { color: var(--ink-3); font-size: 12px; margin-left: 8px; }

/* ---------- 面包屑 ---------- */
.crumbs { padding: 14px 0; font-size: 13px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--blue); }
.crumbs .sep { margin: 0 6px; color: #C6CFDB; }

/* ---------- 分页 ---------- */
.paginator { display: flex; justify-content: center; gap: 8px; padding: 20px 0 6px; }
.paginator a, .paginator span {
    display: inline-block;
    min-width: 34px;
    text-align: center;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink-2);
    font-size: 13px;
}
.paginator .cur { background: var(--blue); border-color: var(--blue); color: #fff; }
.paginator a:hover { border-color: var(--blue); color: var(--blue); }

/* ---------- 链接云（货币大全 / 交叉货币对 / 年份入口） ---------- */
.link-cloud { display: flex; flex-wrap: wrap; gap: 8px 0; }
.link-cloud li { margin-right: 18px; font-size: 13px; line-height: 2; }
.link-cloud li a { color: var(--ink-2); }
.link-cloud li a:hover { color: var(--blue); }
.link-cloud li.hot a { color: var(--ink); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { padding: 4px 0; }
.faq-item { border-bottom: 1px dashed var(--line); padding: 12px 2px; }
.faq-item:last-child { border-bottom: 0; }
.faq-q { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.faq-q::before { content: "问"; display: inline-block; background: var(--blue-bg); color: var(--blue); font-size: 12px; border-radius: 50%; width: 18px; height: 18px; line-height: 18px; text-align: center; margin-right: 8px; }
.faq-a { color: var(--ink-2); font-size: 13px; line-height: 1.8; }

/* ---------- 页脚 ---------- */
.footer { background: var(--ink); color: #9DAEC6; margin-top: 32px; padding: 28px 0 20px; font-size: 13px; }
.footer a { color: #9DAEC6; }
.footer a:hover { color: #fff; }
.footer-cols { display: flex; gap: 40px; }
.footer-cols dt { color: #fff; font-weight: 600; margin-bottom: 10px; font-size: 14px; }
.footer-cols dd { line-height: 2; }
.footer-copy { border-top: 1px solid rgba(255,255,255,.08); margin-top: 22px; padding-top: 16px; text-align: center; color: #7488A5; font-size: 12px; }
.footer-copy a { color: #7488A5; }

/* ---------- 工具类 ---------- */
.text-right { text-align: right; }
.text-center{ text-align: center; }
.muted { color: var(--ink-3); font-size: 12px; }
.hide { display: none !important; }