/* ============================================================
   赢图汇率网 mobile.css
   移动端专属：内容区最大宽度 750px（平板/PC 打开 m 站时居中，
   不继续放大），单列布局，表格可横滑
   ============================================================ */

.container { width: 100%; max-width: 750px; margin: 0 auto; padding: 0 12px; }
.main { padding-bottom: 8px; }

/* ---------- 顶部：logo + 搜索合并成一行 ---------- */
.topbar { display: none; } /* 手机上隐藏工具条 */

.header { background: var(--card); border-bottom: 1px solid var(--line); }
.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 12px;
}
.logo { display: flex; align-items: center; gap: 8px; }
.logo-mark { width: 30px; height: 30px; border-radius: 6px; font-size: 15px; }
.logo-name { font-size: 18px; }
.logo-sub { display: none; }

/* 搜索改为图标按钮（点开整页搜索层，正式版接 JS） */
.search-toggle {
    width: 32px; height: 32px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 30px;
    text-align: center;
}

/* ---------- 导航：横向滑动 chip ---------- */
.nav { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.nav ul {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nav ul::-webkit-scrollbar { display: none; }
.nav li { flex: none; }
.nav li a {
    display: inline-block;
    color: var(--ink-2);
    font-size: 15px;
    padding: 0 14px;
    height: 42px;
    line-height: 42px;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}
.nav li a.cur { color: var(--blue); font-weight: 600; border-bottom-color: var(--gold); }

/* ---------- 首页 hero（手机上收紧） ---------- */
.hero { border-radius: var(--radius); padding: 16px 14px; margin-top: 12px; }
.hero h1 { font-size: 17px; }
.hero-quote { gap: 18px; flex-wrap: wrap; }
.hero-quote .v { font-size: 20px; }

/* 换算器：手机上金额一行、币种一行 */
.conv { flex-wrap: wrap; }
.conv .input-amt { flex: 1 1 100%; }
.conv .select { flex: 1; }
.conv .swap { width: 40px; }

/* ---------- 布局：全部单列 ---------- */
.home-grid, .detail-grid { display: block; }
.home-side, .detail-side { width: auto; margin-top: 16px; }

/* ---------- 牌价头 ---------- */
.quote-hero { padding: 14px 16px; }
.quote-hero h1 { font-size: 18px; }
.quote-hero .q-rate { font-size: 34px; }
.quote-hero .q-time { margin-left: 0; flex-basis: 100%; }

/* K线图高度收紧 */
.kchart { height: 220px; }

/* ---------- 表格：横向滚动容器 ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .rate-table { min-width: 560px; }

/* 速览小表（首页每行一卡）保持横滑即可，不复杂化 */

/* ---------- 九宫格改两列 + 固定格高 ---------- */
.pair-grid { grid-template-columns: repeat(2, 1fr); }
.pair-cell { height: 72px; display: flex; flex-direction: column; justify-content: center; }
.pair-cell .p-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 统计卡片改两行两列 ---------- */
.stat-grid { flex-wrap: wrap; }
.stat { flex: 1 1 40%; }

/* ---------- 金额页 ---------- */
.amount-hero .a-ans { font-size: 30px; }

/* ---------- 分页 / 链接云 ---------- */
.paginator { flex-wrap: wrap; }
.link-cloud li { margin-right: 14px; }

/* ---------- 页脚 ---------- */
.footer { padding: 20px 0 14px; }
.footer-cols { flex-wrap: wrap; gap: 16px 28px; }
.footer-cols dl { min-width: 130px; }

/* ---------- 历史汇率索引卡片：移动端一行 2 个 ---------- */
.cc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cc-item { height: 96px; }

/* ============================================================
   m 站独立模板专属（templates/m/）：底部导航 + 移动原生布局
   ============================================================ */

/* 底部 tab 栏：fixed 悬浮，当前项金色 */
body { padding-bottom: 58px; } /* 给 tabbar 让位 */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    max-width: 750px; margin: 0 auto;
    display: flex;
    background: #17181C;
    box-shadow: 0 -2px 12px rgba(0,0,0,.18);
}
.tabbar a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 54px;
    color: #83868F;
    font-size: 11px;
    text-decoration: none;
    gap: 2px;
}
.tabbar a .tb-ico { font-size: 18px; line-height: 1; }
.tabbar a.cur { color: #C89B3C; font-weight: 600; }

/* 移动端牌价头：更大的触控目标 */
.m-quote { padding: 16px; }
.m-quote .q-rate { font-size: 36px; }

/* 迷你换算器（货币对页）：两行式 */
.m-conv .conv { flex-wrap: wrap; }
.m-conv .conv .input-amt { flex: 1 1 100%; }
.m-conv .conv .select { flex: 1 1 40%; }

/* 速览条：2 列网格 */
.m-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.m-quotes .q-item {
    background: rgba(255,255,255,.08);
    border-radius: 6px;
    padding: 8px 10px;
}
.m-quotes .q-label { font-size: 11px; color: #83868F; }
.m-quotes .q-value { font-size: 16px; font-weight: 700; font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* m 模板标记（联调验证用，肉眼不可见） */
body[data-tpl="m"] { outline: 0; }