@charset "utf-8";
/* ============================================================
   Apple Light Front Theme  —  exchangerate_en
   在 inc-header.htm 的内联样式之后加载，作为最终视觉层。
   方向：浅白基底 / 纯白卡片 / 发丝级分隔线 / 深祖母绿单一强调色
   ============================================================ */

/* ---------- 1. Tokens：覆盖内联 :root ---------- */
:root {
    --primary: #0a8b64;
    --primary-2: #12a97a;
    --primary-gradient: linear-gradient(135deg, #0a8b64 0%, #12a97a 100%);
    --primary-hover: #077a58;
    --secondary: #0a8b64;
    --up: #0a8b64;
    --danger: #e0362c;

    --bg-base: #f5f5f7;
    --bg-gradient: radial-gradient(90% 60% at 12% -10%, rgba(18, 169, 122, .10) 0%, rgba(18, 169, 122, 0) 60%),
        radial-gradient(80% 55% at 92% 0%, rgba(0, 113, 227, .07) 0%, rgba(0, 113, 227, 0) 55%),
        linear-gradient(180deg, #f7f8f9 0%, #f5f5f7 100%);

    --card-bg: #ffffff;
    --card-solid: #ffffff;
    --text-main: #1d1d1f;
    --text-muted: #6e6e73;
    --text-soft: #8e8e93;
    --border-color: #e8e8ed;
    --hair: #ececf0;
    --glass-border: #e8e8ed;

    --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 26px -16px rgba(16, 24, 40, .16);
    --shadow-lg: 0 2px 8px rgba(0, 0, 0, .04), 0 28px 60px -28px rgba(9, 60, 46, .40);

    --accent-soft: rgba(10, 139, 100, .08);
    --accent-soft-2: rgba(10, 139, 100, .14);

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", "PingFang SC",
        "Microsoft YaHei", Arial, sans-serif;

    --r-card: 20px;
    --r-md: 12px;
    --r-sm: 10px;
    --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 2. Base ---------- */
html {
    background: var(--bg-base) !important;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bg-gradient) !important;
    background-attachment: fixed !important;
    color: var(--text-main) !important;
    font-family: var(--font) !important;
    font-size: 15px;
    line-height: 1.65;
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--accent-soft-2); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .16);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .3); background-clip: content-box; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover) !important; }

h1, h2, h3, h4 { letter-spacing: -0.022em; }

.layui-container {
    width: 100% !important;
    max-width: 1180px !important;
    padding: 0 24px;
}

/* ---------- 3. Header ---------- */
#header {
    background: rgba(255, 255, 255, .78) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    border-bottom: 1px solid var(--hair) !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.head {
    height: 68px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
}

/* 品牌标：SVG 图标 + 双行文字（替换原 101×44 位图 logo） */
#header .brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 11px !important;
    text-decoration: none !important;
    flex: 0 0 auto;
    min-width: 0;
}

#header .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #12a97a 0%, #0a8b64 55%, #077a58 100%);
    box-shadow: 0 6px 14px -6px rgba(10, 139, 100, .6), inset 0 1px 0 rgba(255, 255, 255, .28);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

#header .brand-mark svg { width: 21px; height: 21px; display: block; }
#header .brand:hover .brand-mark {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 9px 20px -8px rgba(10, 139, 100, .7), inset 0 1px 0 rgba(255, 255, 255, .3);
}

#header .brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
    min-width: 0;
}

#header .brand-name {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.021em;
    color: var(--text-main);
    white-space: nowrap;
}

#header .brand:hover .brand-name { color: var(--text-main) !important; }

#header .brand-sub {
    margin-top: 3px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #a1a1a6;
    white-space: nowrap;
}

/* 导航：右对齐胶囊组（仅桌面；移动端是侧滑面板，规则见 inc-header.htm 媒体查询） */
@media (min-width: 769px) {
    .nav {
        gap: 2px !important;
        margin: 0 0 0 auto !important;
        align-items: center !important;
        flex: 0 1 auto;
    }

    .nav li,
    #header .head ul li {
        flex: 0 0 auto !important;
        width: auto !important;
        height: auto !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    .nav li a,
    #header .head ul li a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 34px !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        color: var(--text-muted) !important;
        letter-spacing: -0.005em;
        white-space: nowrap;
        transition: background .18s var(--ease), color .18s var(--ease) !important;
    }
}

.nav li a:hover,
#header .head ul li a:hover {
    background: rgba(0, 0, 0, .045) !important;
    color: var(--text-main) !important;
}

.nav li.act a,
.nav li a.act,
#header .head ul li.act a {
    background: var(--accent-soft) !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
}

/* ---------- 4. 主体容器 ---------- */
.main-wrapper {
    padding: 30px 0 10px !important;
}

/* AdSense 占位收紧 */
.main-wrapper ins.adsbygoogle {
    display: block;
    margin: 0 0 22px;
    border-radius: var(--r-md);
    overflow: hidden;
}

/* ---------- 5. 卡片 ---------- */
.custom-card {
    background: var(--card-solid) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid var(--hair) !important;
    border-radius: var(--r-card) !important;
    padding: 26px !important;
    box-shadow: var(--shadow) !important;
    margin-bottom: 22px !important;
}

.card-header {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    margin: 0 0 20px !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid var(--hair) !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    letter-spacing: -0.022em !important;
    color: var(--text-main) !important;
}

.icon-box {
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    background: var(--primary-gradient) !important;
    box-shadow: 0 5px 12px -6px rgba(10, 139, 100, .7);
    font-size: 13px !important;
    flex: 0 0 28px;
}

/* 卡片标题（layui-card 版本） */
.layui-card {
    background: var(--card-solid) !important;
    border: 1px solid var(--hair) !important;
    border-radius: var(--r-card) !important;
    box-shadow: var(--shadow) !important;
    margin-bottom: 22px !important;
    overflow: hidden;
}

.title.with-icon {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 22px 24px 0 !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    letter-spacing: -0.02em;
    color: var(--text-main) !important;
    border: none !important;
    background: transparent !important;
}

.title.with-icon .text {
    font-size: 16px;
    letter-spacing: -0.02em;
}

.title.with-icon .tips {
    flex: 1 0 100%;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 450;
    color: var(--text-soft);
    letter-spacing: 0;
}

.header-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 8px;
    background-color: #0a8b64 !important;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px -5px rgba(10, 139, 100, .7);
}

.header-icon .icon { width: 13px; height: 13px; fill: #fff; }

.layui-card-body { padding: 18px 24px 22px !important; }

/* ---------- 6. Popular currencies 网格 ---------- */
.top-currency-grid {
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)) !important;
    gap: 12px !important;
}

.top-currency-item {
    background: #fbfbfd !important;
    border: 1px solid var(--hair) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    gap: 6px !important;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease) !important;
}

.top-currency-item:hover {
    background: #fff !important;
    border-color: rgba(10, 139, 100, .35) !important;
    box-shadow: 0 12px 26px -16px rgba(10, 139, 100, .55) !important;
    transform: translateY(-2px);
    text-decoration: none;
}

.top-currency-item .info {
    display: flex;
    align-items: center;
    gap: 9px;
}

.top-currency-item img {
    width: 24px !important;
    height: 18px !important;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}

.top-currency-item .name {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    color: var(--text-soft) !important;
    text-transform: uppercase;
}

.top-currency-item .rate {
    font-size: 21px !important;
    font-weight: 650 !important;
    letter-spacing: -0.03em;
    color: var(--text-main) !important;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.top-currency-item .change {
    font-size: 12px !important;
    font-weight: 550;
    font-variant-numeric: tabular-nums;
}

/* 涨跌配色按国内习惯：涨=红，跌=绿 */
.text-up { color: var(--danger) !important; }
.text-down { color: var(--primary) !important; }

/* ---------- 7. 主体两栏 ---------- */
.content-grid {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: start;
}

/* ---------- 8. 换算器（深祖母绿 Hero） ---------- */
.converter-section {
    position: relative;
    background:
        radial-gradient(120% 120% at 88% -20%, rgba(45, 212, 191, .35) 0%, rgba(45, 212, 191, 0) 55%),
        linear-gradient(140deg, #06392c 0%, #08573f 52%, #0a6b4d 100%) !important;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 22px !important;
    padding: 28px !important;
    margin-bottom: 22px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04), 0 30px 60px -34px rgba(4, 46, 34, .85) !important;
    overflow: hidden;
    color: #fff;
}

.converter-section::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.converter-section .card-header {
    border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
    color: #fff !important;
}

.converter-section .card-header,
.converter-section h2,
.converter-section h3 {
    color: #ffffff !important;
}

.input-wrapper {
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: var(--r-md) !important;
    padding: 4px 12px !important;
    min-height: 44px;
    transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}

.input-wrapper:focus-within {
    background: rgba(255, 255, 255, .16) !important;
    border-color: rgba(255, 255, 255, .45) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .10);
}

.input-wrapper input,
.input-wrapper input.nums {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 550;
    height: 36px;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.input-wrapper input::placeholder { color: rgba(255, 255, 255, .55) !important; }

.converter-section .input-group > label,
.converter-section .input-group label,
.converter-section .f {
    color: rgba(255, 255, 255, .72) !important;
    font-size: 12px !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
}

.swap-btn {
    background: rgba(255, 255, 255, .95) !important;
    color: var(--primary) !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45) !important;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease) !important;
}

.swap-btn:hover { transform: rotate(180deg); }

.result-amount {
    font-size: 34px !important;
    font-weight: 660 !important;
    letter-spacing: -0.035em !important;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    color: #fff !important;
}

.result-display .e { color: rgba(255, 255, 255, .7) !important; }

.convert-btn {
    background: #ffffff !important;
    color: #06392c !important;
    border: none !important;
    border-radius: var(--r-md) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    height: 46px !important;
    line-height: 46px !important;
    padding: 0 28px !important;
    letter-spacing: -0.01em;
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .8) !important;
    transition: transform .14s var(--ease), box-shadow .2s var(--ease) !important;
}

.converter-section .exchange-button .convert-btn,
.converter-section .exchange-button button.convert-btn {
    background: #ffffff !important;
    color: #06392c !important;
}

.converter-section .exchange-button .convert-btn:hover,
.converter-section .exchange-button button.convert-btn:hover {
    background: #f2fbf7 !important;
    color: #06392c !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .75) !important;
}

.convert-btn:active { transform: scale(.985); }

/* select2 在深色卡片内的适配 */
.converter-section .select2-container--bootstrap4 .select2-selection,
.converter-section .select2-container--default .select2-selection--single {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    height: 36px;
}

.converter-section .select2-container--bootstrap4 .select2-selection__rendered,
.converter-section .select2-selection__rendered {
    color: #fff !important;
    line-height: 36px !important;
    padding-left: 0 !important;
    font-weight: 500;
}

.converter-section .select2-selection__arrow b { border-color: rgba(255,255,255,.8) transparent transparent !important; }

.select2-container--bootstrap4 .select2-dropdown,
.select2-container--default .select2-dropdown {
    border: 1px solid var(--hair) !important;
    border-radius: var(--r-md) !important;
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .3) !important;
    overflow: hidden;
    padding: 4px;
}

.select2-results__option { border-radius: 8px; font-size: 14px; }
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--primary) !important;
    color: #fff !important;
}

/* ---------- 9. 汇率列表 ---------- */
.rate-list { margin: 0 !important; }

.rate-item {
    padding: 14px 12px !important;
    border-bottom: 1px solid var(--hair) !important;
    border-radius: var(--r-md) !important;
    margin: 0 -8px;
    transition: background .18s var(--ease) !important;
}

.rate-item:hover { background: #fbfbfd; }
.rate-item:last-child { border-bottom: none !important; }

.currency-info { display: flex; align-items: center; gap: 12px; }

.currency-info .flag {
    width: 30px !important;
    height: 22px !important;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 2px 6px -3px rgba(0, 0, 0, .3);
}

.currency-name {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
    letter-spacing: -0.01em;
}

.currency-code {
    font-size: 11.5px !important;
    color: var(--text-soft) !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 1px;
}

.rate-main {
    font-size: 18px !important;
    font-weight: 650 !important;
    color: var(--text-main) !important;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.rate-change { font-size: 12px !important; font-weight: 550; font-variant-numeric: tabular-nums; }

/* ---------- 10. 表格（银行牌价 / 侧栏） ---------- */
.table-scroll { border-radius: var(--r-md); }

.layui-table {
    background: transparent !important;
    color: var(--text-main) !important;
    font-size: 13px !important;
    margin: 14px 0 0 !important;
}

.layui-table thead tr,
.layui-table-header {
    background: #fafafc !important;
}

.layui-table th {
    color: var(--text-soft) !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-color: var(--hair) !important;
    padding: 10px 10px !important;
    white-space: nowrap;
}

.layui-table td {
    border-color: #f2f2f5 !important;
    padding: 9px 10px !important;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.layui-table tbody tr:hover,
.layui-table-hover { background: #fbfbfd !important; }

.layui-table-view {
    border: 1px solid var(--hair) !important;
    border-radius: var(--r-md) !important;
}

/* 侧栏表（Bank of China）小一号 */
aside .layui-table { font-size: 12.5px !important; }
aside .layui-table th { font-size: 11px !important; padding: 8px !important; }
aside .layui-table td { padding: 7px 8px !important; }

/* ---------- 11. 其他用户换算 / 友链 ---------- */
.conversion-list-item a,
.to-link {
    display: block;
    padding: 11px 14px !important;
    border-radius: var(--r-md) !important;
    background: #fbfbfd !important;
    border: 1px solid var(--hair) !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.45;
    transition: all .18s var(--ease) !important;
}

.conversion-list-item a:hover,
.to-link:hover {
    background: #fff !important;
    border-color: rgba(10, 139, 100, .35) !important;
    color: var(--primary) !important;
    box-shadow: 0 8px 20px -14px rgba(10, 139, 100, .6);
    text-decoration: none;
}

.links-body,
.friend-body { display: flex; flex-wrap: wrap; gap: 9px; padding: 16px 24px 22px !important; }

.friend-link {
    background: #fbfbfd !important;
    border: 1px solid var(--hair) !important;
    border-radius: 999px !important;
    padding: 7px 15px !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
    transition: all .18s var(--ease) !important;
}

.friend-link:hover {
    background: #fff !important;
    border-color: var(--accent-soft-2) !important;
    color: var(--primary) !important;
    text-decoration: none;
}

/* ---------- 12. 页脚（浅色） ---------- */
#footer {
    background: #f5f5f7 !important;
    color: var(--text-muted) !important;
    border-top: 1px solid var(--hair) !important;
    padding: 40px 0 30px !important;
    margin-top: 40px !important;
    text-align: center;
    font-size: 13px;
}

#footer .footer-tagline {
    color: var(--text-muted) !important;
    font-size: 13.5px !important;
    line-height: 1.75;
    max-width: 620px;
    margin: 0 auto;
}

#footer .footer-links-title {
    color: var(--text-soft) !important;
    font-size: 11px !important;
    letter-spacing: .12em !important;
}

#footer a {
    color: var(--text-muted) !important;
    margin-left: 0;
}

#footer a:hover { color: var(--primary) !important; }

#footer .footer-links-list { gap: 8px !important; }

#footer .footer-links-list a {
    background: #ffffff !important;
    border: 1px solid var(--hair) !important;
    border-radius: 999px !important;
    color: var(--text-muted) !important;
    padding: 8px 16px !important;
    font-size: 12.5px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    transition: all .18s var(--ease) !important;
}

#footer .footer-links-list a:hover {
    background: #fff !important;
    border-color: var(--accent-soft-2) !important;
    color: var(--primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -12px rgba(10, 139, 100, .5) !important;
}

#footer .footer-links-list a[href="#"],
#footer .footer-links-list a:empty { display: none; }

#footer .footer-box .bd p {
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.7;
}

/* 回到顶部 */
.fixed-btn {
    background: #ffffff !important;
    color: var(--text-main) !important;
    width: 42px !important;
    height: 42px !important;
    line-height: 42px !important;
    border-radius: 50% !important;
    border: 1px solid var(--hair);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 16px 32px -16px rgba(0, 0, 0, .35) !important;
    font-size: 17px !important;
    transition: transform .18s var(--ease), color .18s var(--ease);
}

.fixed-btn:hover {
    background: #fff !important;
    color: var(--primary) !important;
    transform: translateY(-2px);
}

/* ---------- 13. 文章/列表类零散页面收敛 ---------- */
.article_list .article:hover { border-left-color: var(--primary) !important; }

.layui-btn,
button.layui-btn {
    border-radius: var(--r-sm) !important;
    font-weight: 550 !important;
    letter-spacing: -0.005em;
}

.layui-card .title:not(.with-icon) {
    font-size: 15.5px !important;
    font-weight: 620 !important;
    letter-spacing: -0.02em;
    color: var(--text-main) !important;
    padding: 20px 24px 0 !important;
    border: none !important;
}

/* ---------- 14. 动效 ---------- */
@keyframes a-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.custom-card,
.layui-card,
.converter-section {
    animation: a-fade-up .55s var(--ease) both;
}

.custom-card:nth-of-type(2) { animation-delay: .06s; }
.custom-card:nth-of-type(3) { animation-delay: .1s; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-delay: 0ms !important;
        transition-duration: .001ms !important;
    }
}

/* ---------- 15. 响应式 ---------- */
@media (max-width: 1100px) {
    .content-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
    .layui-container { padding: 0 16px; }
    .head { height: 60px !important; gap: 12px !important; }
    #header .brand { gap: 9px !important; }
    #header .brand-mark { width: 33px; height: 33px; border-radius: 10px; }
    #header .brand-mark svg { width: 18px; height: 18px; }
    #header .brand-name { font-size: 14.5px !important; }
    #header .brand-sub { display: none !important; }
    .main-wrapper { padding: 18px 0 6px !important; }
    .custom-card { padding: 18px !important; border-radius: 16px !important; }
    .converter-section { padding: 18px !important; border-radius: 18px !important; }
    .result-amount { font-size: 26px !important; }
    .top-currency-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 10px !important; }
    .card-header { font-size: 15.5px !important; }
    #footer { padding: 28px 0 20px !important; margin-top: 26px !important; }
}

/* ---------- 16. 卡内表格留白修正 ---------- */
.layui-card .table-scroll {
    padding: 0 16px 18px;
}

.layui-card .layui-table th {
    white-space: nowrap !important;
    vertical-align: bottom;
}

.layui-card .title.with-icon + .table-scroll .layui-table { margin-top: 12px !important; }

/* ---------- 17. 栅格防溢出 + 换算器比例微调 ---------- */
.content-grid > * { min-width: 0; }
aside { min-width: 0; }

@media (min-width: 901px) {
    .converter-grid { grid-template-columns: minmax(0, .62fr) minmax(0, 1.78fr) !important; }
    .input-wrapper select { font-size: 15px !important; }
}

/* 换算器内按钮/箭头优先级修正（对抗 inc-header 的 !important 全局按钮规则） */
.converter-section .exchange-icon,
.converter-section .swap-btn {
    background: rgba(255, 255, 255, .95) !important;
    border-radius: 50% !important;
    color: #06453a !important;
}

.converter-section .exchange-icon:hover,
.converter-section .swap-btn:hover {
    background: #ffffff !important;
    color: #06453a !important;
}

/* 侧栏卡内表格：最后一列不被裁切 */
aside .layui-table-view,
aside .table-scroll { border-radius: 12px; }

/* ---------- 18. 侧栏牌价表：严格贴合卡片宽度 ---------- */
.table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.layui-card .table-scroll { padding: 0 16px 18px; }

.layui-card table.layui-table,
table.a-bank-table {
    width: 100% !important;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

table.a-bank-table th {
    white-space: normal !important;
    text-align: center !important;
    font-size: 10.5px !important;
    letter-spacing: .04em !important;
    line-height: 1.35;
    padding: 7px 4px !important;
    background: #fafafc;
    border-bottom: 1px solid var(--hair) !important;
}

table.a-bank-table th:first-child { text-align: left !important; padding-left: 8px !important; }

table.a-bank-table td {
    text-align: center;
    font-size: 12px !important;
    padding: 7px 4px !important;
    border-bottom: 1px solid #f4f4f7 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.a-bank-table td:first-child {
    text-align: left;
    padding-left: 8px !important;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: .02em;
}

table.a-bank-table tbody tr:hover td { background: #fbfbfd; }
table.a-bank-table tbody tr:last-child td { border-bottom: none !important; }

/* ---------- 19. 卡片标题图标定位修复（原 style.css 用 absolute 覆盖） ---------- */
.title.with-icon {
    position: relative;
    padding: 22px 24px 0 !important;
    padding-left: 62px !important;
    min-height: 68px;
    align-items: flex-start;
    overflow: visible !important;
}

.title.with-icon .header-icon:not(.right-action) {
    position: absolute !important;
    left: 24px !important;
    top: 20px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    /* 保留各图标自带的 png 字形，仅换底色 */
    background-color: #0a8b64 !important;
    background-size: 16px 16px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 12px -6px rgba(10, 139, 100, .75);
}

.title.with-icon .header-icon svg,
.title.with-icon .header-icon .icon {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    fill: #fff !important;
}

/* Popular Currencies 的空图标位补一个行情字形 */
.card-header .icon-box:empty {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17l5-5 4 3 7-8'/%3E%3Cpath d='M20 7h-4M20 7v4'/%3E%3C/svg%3E"), var(--primary-gradient) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 15px 15px, cover !important;
}

/* 移动端标题左内边距同步 */
@media (max-width: 768px) {
    .title.with-icon { padding-left: 54px !important; }
    .title.with-icon .header-icon:not(.right-action) { left: 18px !important; top: 18px !important; }
}

/* ---------- 20. 汇率对页（huilv_show）：白卡换算器 ---------- */
#content .converter-box {
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    border-radius: var(--r-card) !important;
    padding: 22px !important;
    box-shadow: var(--shadow) !important;
    margin-bottom: 22px !important;
}

#content .converter-box .amount label,
#content .converter-box .select label {
    display: block;
    margin-bottom: 7px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-soft);
}

#content .converter-box .amount input,
#content .converter-box .select select,
#content .converter-box .select .select2-selection {
    width: 100%;
    height: 46px !important;
    padding: 0 14px !important;
    border: 1px solid var(--hair) !important;
    border-radius: 12px !important;
    background: #fbfbfd !important;
    color: var(--text-main) !important;
    font-size: 16px !important;
    font-weight: 550;
    font-variant-numeric: tabular-nums;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}

#content .converter-box .amount input:focus,
#content .converter-box .select select:focus {
    outline: none;
    background: #fff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--accent-soft) !important;
}

#content .converter-box .select .select2-container--bootstrap4 .select2-selection {
    display: flex;
    align-items: center;
}

#content .converter-box .select .select2-selection__rendered {
    line-height: 44px !important;
    padding-left: 0 !important;
    color: var(--text-main) !important;
    font-size: 15px;
}

#content .converter-box .exchange {
    display: flex;
    align-items: flex-end;
}

#content .converter-box .exchange .exchange-icon,
#content .converter-box .exchange .layui-btn {
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: none;
    background: var(--primary-gradient) !important;
    color: #fff !important;
    font-size: 0 !important;
    box-shadow: 0 8px 18px -8px rgba(10, 139, 100, .8) !important;
    position: relative;
}

#content .converter-box .exchange .exchange-icon::after {
    content: "⇄";
    font-size: 17px;
    line-height: 46px;
    color: #fff;
}

#content .converter-box .exchange-result {
    float: none !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}

#content .converter-box .exchange-result .f {
    color: var(--text-soft) !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    letter-spacing: .09em;
    text-transform: uppercase;
}

#content .converter-box .exchange-result .t {
    color: var(--text-main) !important;
    font-size: 34px !important;
    font-weight: 680 !important;
    letter-spacing: -0.035em;
    padding: 4px 0 6px !important;
    font-variant-numeric: tabular-nums;
}

#content .converter-box .exchange-result .t .faded-digits { color: var(--text-soft) !important; }

#content .converter-box .exchange-result .e {
    color: var(--text-soft) !important;
    font-size: 12px !important;
    font-weight: 450 !important;
}

/* 换算说明卡（多段文字） */
#content .converter-box p.pd-5,
#content .converter-box .pd-5 {
    margin: 0 0 8px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-muted);
}

#content .converter-box hr {
    margin: 14px 0 !important;
    border: none !important;
    border-top: 1px solid var(--hair) !important;
}

/* 走势图卡 */
.a-chart-card { padding-bottom: 8px; }

.a-chart-body {
    height: 340px;
    padding: 4px 12px 12px;
}

@media (max-width: 768px) {
    .a-chart-body { height: 260px; padding: 0 4px 10px; }
    #content .converter-box .exchange-result .t { font-size: 26px !important; }
}

/* 换算对照表（calculated） */
.layui-card .layui-table .center { text-align: center; }

.layui-card .layui-table thead tr:first-child th {
    background: #fafafc !important;
    color: var(--text-main) !important;
    font-size: 12.5px !important;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 650 !important;
    padding: 12px 10px !important;
}

.layui-card .layui-table thead tr:nth-child(2) th {
    background: #fff !important;
    font-size: 11px !important;
}

.layui-card .layui-table thead th img {
    vertical-align: -3px;
    margin-right: 6px;
    border-radius: 3px;
}

/* ---------- 21. 汇率对页：换算器对齐修正 ---------- */
#content .converter-box .layui-col-md1.exchange {
    /* 与输入框基线对齐：标签高 51px + 上间距 7px */
    padding-top: 58px;
    justify-content: center;
    align-items: flex-start;
}

#content .converter-box .layui-col-md1.exchange > label { display: none !important; }

#content .converter-box .currency-box > .layui-col-md12 { margin-top: 18px; }

#content .converter-box .exchange-button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#content .converter-box .exchange-button button,
#content .converter-box .exchange-button .layui-btn {
    height: 46px !important;
    line-height: 46px !important;
    min-width: 168px;
    padding: 0 26px !important;
    border-radius: 13px !important;
    background: var(--primary-gradient) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    margin-top: 0 !important;
    box-shadow: 0 10px 22px -12px rgba(10, 139, 100, .8) !important;
}

#content .converter-box .exchange-button button:hover {
    background: linear-gradient(135deg, #077a58 0%, #0f9a70 100%) !important;
    transform: translateY(-1px);
}

/* 金额/币种输入与按钮在同一基线 */
#content .converter-box .amount input { height: 46px; }

@media (max-width: 992px) {
    #content .converter-box .layui-col-md1.exchange { padding-top: 10px; justify-content: flex-start; }
    #content .converter-box .exchange-button { justify-content: flex-start; margin-top: 10px; }
    #content .converter-box .exchange-button button { width: 100%; }
}

/* ---------- 22. 独立长表（货币代码表等）：整体卡片化 ---------- */
#content > .layui-container > table.layui-table,
#content > .layui-container > .table-scroll > table.layui-table {
    width: 100% !important;
    margin: 22px 0 !important;
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    border-radius: var(--r-card);
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
    box-shadow: var(--shadow);
    table-layout: auto;
}

#content > .layui-container > table.layui-table thead th,
#content > .layui-container > .table-scroll > table.layui-table thead th {
    background: #fafafc !important;
    color: var(--text-soft) !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase;
    padding: 13px 18px !important;
    border-bottom: 1px solid var(--hair) !important;
    text-align: left;
}

#content > .layui-container > table.layui-table tbody th,
#content > .layui-container > table.layui-table tbody td,
#content > .layui-container > .table-scroll > table.layui-table tbody td {
    padding: 12px 18px !important;
    border-bottom: 1px solid #f3f3f6 !important;
    text-align: left;
    font-size: 13.5px;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

#content > .layui-container > table.layui-table tbody tr:last-child > * { border-bottom: none !important; }
#content > .layui-container > table.layui-table tbody tr:hover > * { background: #fbfbfd; }

/* 货币列表里的国旗图标 */
#content table.layui-table img.img-list {
    width: 20px !important;
    height: 15px !important;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
    vertical-align: -2px;
}

/* ---------- 23. 文章列表 / 正文排版 ---------- */
.breadcrumb {
    font-size: 12.5px;
    color: var(--text-soft);
    padding: 2px 4px 10px;
}

.breadcrumb a { color: var(--text-muted) !important; }
.breadcrumb a:hover { color: var(--primary) !important; }
.breadcrumb .layui-breadcrumb a { color: var(--text-muted) !important; font-size: 12.5px; }
.breadcrumb .layui-breadcrumb > span:last-child a { color: var(--primary) !important; font-weight: 600; }

.article_list hr,
#content > .layui-container > hr {
    border: none !important;
    border-top: 1px solid var(--hair) !important;
    margin: 6px 0 18px !important;
}

.article_list .article {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    border-radius: var(--r-card) !important;
    padding: 16px !important;
    margin: 0 0 14px !important;
    box-shadow: var(--shadow);
    transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}

.article_list .article:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05), 0 24px 44px -24px rgba(9, 60, 46, .3);
    transform: translateY(-2px);
    border-color: rgba(10, 139, 100, .28) !important;
}

.article_list .article-left { float: none !important; width: auto !important; }
.article_list .article-right { float: none !important; width: auto !important; }
.article_list .article .clear { display: none; }

.article_list .article-left img {
    width: 100% !important;
    height: 132px !important;
    object-fit: cover;
    border-radius: 14px !important;
    display: block;
    background: #f2f2f5;
}

.article_list .article-title { margin: 2px 0 8px !important; }
.article_list .article-title a {
    font-size: 17px !important;
    font-weight: 650 !important;
    letter-spacing: -0.022em;
    color: var(--text-main) !important;
    line-height: 1.35;
}

.article_list .article-title a:hover { color: var(--primary) !important; }

.article_list .article-abstract {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    color: var(--text-muted) !important;
}

.article_list .article-footer {
    grid-column: 1 / -1;
    display: flex !important;
    align-items: center;
    gap: 18px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f3f3f6;
    font-size: 12px !important;
    color: var(--text-soft) !important;
}

.article_list .article-footer .layui-icon { font-size: 12px; }

/* 正文页 */
.article-title {
    font-size: 26px !important;
    font-weight: 680 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.25;
    color: var(--text-main) !important;
    margin: 4px 0 18px !important;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hair);
}

.article-body {
    font-size: 15px;
    line-height: 1.8;
    color: #33363a;
}

.article-body p { margin: 0 0 1em; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4 {
    margin: 1.6em 0 .7em;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-main);
    line-height: 1.35;
}
.article-body h2 { font-size: 20px; }
.article-body h3 { font-size: 17px; }
.article-body a { color: var(--primary); }
.article-body ul, .article-body ol { padding-left: 1.4em; margin: 0 0 1em; }
.article-body li { margin: .3em 0; }
.article-body img { border-radius: 14px; max-width: 100%; }
.article-body blockquote {
    margin: 1.2em 0;
    padding: 14px 18px;
    border-left: 3px solid var(--primary);
    background: #fbfbfd;
    border-radius: 0 12px 12px 0;
    color: var(--text-muted);
}
.article-body table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 13.5px; }
.article-body table th { background: #fafafc; text-align: left; font-weight: 600; color: var(--text-soft); }
.article-body table th, .article-body table td { border: 1px solid var(--hair); padding: 9px 12px; }
.article-body hr { border: none; border-top: 1px solid var(--hair); margin: 1.6em 0; }

@media (max-width: 768px) {
    .article_list .article { grid-template-columns: 1fr; gap: 12px; }
    .article_list .article-left img { height: 170px !important; }
    .article-title { font-size: 21px !important; }
    .article-body { font-size: 14.5px; }
}

/* ---------- 24. 移动端细节收敛 ---------- */
.nav-toggle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: #fff !important;
    border: 1px solid var(--hair) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 20px -14px rgba(0, 0, 0, .35) !important;
    padding: 0 !important;
}

.nav-toggle span {
    background: var(--text-main) !important;
    width: 16px !important;
    height: 1.6px !important;
    border-radius: 2px;
}

/* 移动端「To」标签补回，保证字段语义完整 */
@media (max-width: 991px) {
    #content .converter-box .select label.layui-hide-xs,
    #content .converter-box .layui-col-md4 .select label {
        display: block !important;
    }

    #content .converter-box .layui-col-md1.exchange {
        padding-top: 4px !important;
        justify-content: center !important;
        align-items: center !important;
    }

    #content .converter-box .exchange-icon {
        width: 44px !important;
        height: 44px !important;
    }

    #content .converter-box .layui-col-md1.exchange > label { display: none !important; }
}

/* ---------- 25. 广告位未填充时收起占位，避免顶部大片空白 ---------- */
ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
}

/* ---------- 26. 移动端侧滑菜单：最终校准层 ----------
   面板样式历史上分散在 inc-header.htm 内联 + mobile-fix.css 两处，互相覆盖。
   本文件最后加载，用 ID 级选择器在此收敛：品牌头部标题 / 菜单卡片 / 当前项高亮。
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* 面板容器：保持原侧滑骨架，只统一圆角与分隔 */
    #header .head .nav {
        background: #f7faf9 !important;
        box-shadow: -12px 0 48px rgba(13, 60, 48, .16) !important;
    }

    /* 品牌头部：渐变块 + 站名文字（原为无字色块） */
    #header .head .nav::before {
        content: 'Exchange Rate Query' !important;
        display: flex !important;
        align-items: flex-end;
        box-sizing: border-box;
        height: 150px !important;
        padding: 0 22px 32px !important;
        background: linear-gradient(135deg, #0a8b64 0%, #0d9488 45%, #12a97a 75%, #2dd4bf 100%) !important;
        border-radius: 24px 0 0 0 !important;
        color: rgba(255, 255, 255, .96);
        font-size: 15.5px;
        font-weight: 600;
        letter-spacing: -.01em;
        white-space: nowrap;
        overflow: hidden;
    }

    /* 菜单区：整体下沉，避免首项被头部压住 */
    #header .head .nav .m-nav-body {
        margin-top: 0 !important;
        padding: 0 16px 28px !important;
        gap: 6px !important;
    }

    #header .head .nav li {
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
    #header .head .nav li + li { margin-top: 0 !important; }

    /* 菜单卡片 */
    #header .head .nav li a {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        gap: 13px !important;
        width: 100% !important;
        height: auto !important;
        padding: 13px 15px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(10, 139, 100, .10) !important;
        background: #ffffff !important;
        color: #1a2e28 !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        letter-spacing: -.01em;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px -6px rgba(10, 90, 70, .10) !important;
        transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease) !important;
    }

    /* 当前项：白卡 + 绿字 + 左侧绿条（替代原先与渐变头部同色的绿底白字） */
    #header .head .nav li.act > a,
    #header .head .nav li.act > a:hover {
        background: #ffffff !important;
        color: var(--primary) !important;
        border-color: rgba(10, 139, 100, .32) !important;
        box-shadow: inset 3px 0 0 var(--primary), 0 2px 6px rgba(10, 139, 100, .10), 0 12px 26px -14px rgba(10, 139, 100, .45) !important;
        font-weight: 600 !important;
        transform: none !important;
    }

    /* 当前项图标：绿底白标（原白底半透明在白卡上不可见） */
    #header .head .nav li.act > a::before,
    #header .head .nav li.act > a:hover::before {
        background: linear-gradient(135deg, #12a97a 0%, #0a8b64 100%) !important;
        color: #fff !important;
    }
}

/* ---------- 27. 每日文章列表（币种页底部） ---------- */
.a-news-card .title { border-bottom: 0; }
.a-news-card .title .tips { margin-left: auto; font-size: 12px; color: var(--text-soft); font-weight: 400; }

.a-news-list {
    list-style: none;
    margin: 0;
    padding: 0 18px 14px;
}

.a-news-item {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--hair);
}
.a-news-item:first-child { border-top: none; }

.a-news-thumb {
    flex: 0 0 160px;
    width: 160px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f7;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.a-news-thumb:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(10, 90, 70, .45); }
.a-news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.a-news-main { min-width: 0; flex: 1 1 auto; }

.a-news-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    margin: 0 0 6px;
    letter-spacing: -.012em;
}
.a-news-title a { color: var(--text-main); text-decoration: none; }
.a-news-title a:hover { color: var(--primary) !important; }

.a-news-intro {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.a-news-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-soft);
}
.a-news-badge {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--primary);
    font-weight: 600;
}
.a-news-new {
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(224, 54, 44, .10);
    color: var(--danger);
    font-weight: 600;
}

@media (max-width: 768px) {
    .a-news-list { padding: 0 14px 10px; }
    .a-news-item { gap: 12px; padding: 13px 0; }
    .a-news-thumb { flex: 0 0 108px; width: 108px; height: 72px; border-radius: 10px; }
    .a-news-title { font-size: 14px; margin-bottom: 5px; }
    .a-news-intro { font-size: 12.5px; -webkit-line-clamp: 2; }
    .a-news-badge { display: none; }
}

/* ---------- 28. 文章详情页排版修正 ----------
   原始 style.css 的 h1.article-title 是「深色底 + 白字 + 黑色发光」，
   .article-info 是虚线框 SimSun 居中，换到浅白主题后都显得脏，这里统一重置。 */
h1.article-title,
.article-title {
    text-shadow: none !important;
    text-align: left !important;
    color: var(--text-main) !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    line-height: 1.32 !important;
    letter-spacing: -.028em !important;
    margin: 6px 0 16px !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid var(--hair);
    word-break: break-word;
}

.article-info {
    border: none !important;
    background: #fafafc;
    border-radius: 10px;
    padding: 9px 14px !important;
    margin: 0 0 20px !important;
    font-family: var(--font) !important;
    font-size: 12.5px !important;
    color: var(--text-soft) !important;
    text-align: left !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
}
.article-info span { display: inline-flex; align-items: center; gap: 5px; }
.article-info a { color: var(--text-muted) !important; }

.article-body p {
    font-size: 15px !important;
    line-height: 1.78 !important;
    margin: 0 0 1em !important;
    color: #33363a;
}

.article-body h2 {
    font-size: 19px !important;
    font-weight: 600 !important;
    letter-spacing: -.02em;
    margin: 1.9em 0 .7em !important;
    color: var(--text-main);
}
.article-body h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 1.4em 0 .5em !important;
    color: var(--text-main);
}
.article-body ul, .article-body ol { padding-left: 1.25em; margin: 0 0 1.2em; }
.article-body li { font-size: 15px; line-height: 1.75; margin: .35em 0; color: #33363a; }
.article-body strong { color: var(--text-main); font-weight: 600; }
.article-body em { color: var(--text-soft); font-style: normal; font-size: 13px; line-height: 1.7; display: block; margin-top: 1.6em; }
.article-body table th { background: #fafafc; color: var(--text-soft); font-weight: 600; }
.article-body table td { color: #33363a; }

@media (max-width: 768px) {
    h1.article-title, .article-title { font-size: 20px !important; line-height: 1.35 !important; }
    .article-body p, .article-body li { font-size: 14.5px !important; }
    .article-info { font-size: 12px !important; gap: 4px 12px; }
}

/* ---------- 29. 首页：最新汇率文章网格（5 篇） ---------- */
.home-news .title { border-bottom: 0; }
.home-news .title .home-news-more {
    margin-left: auto;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--accent-soft);
    transition: background .2s var(--ease), transform .2s var(--ease);
}
.home-news .title .home-news-more:hover { background: #d8f2e6; transform: translateX(1px); }

.home-news-body { padding: 4px 18px 18px; }

.home-news-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.home-news-card {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--hair);
    text-decoration: none;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.home-news-card:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: 0 14px 28px -16px rgba(10, 90, 70, .5);
}

.home-news-thumb {
    display: block;
    aspect-ratio: 16 / 10;
    background: #f2f4f3;
    overflow: hidden;
}
.home-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s var(--ease);
}
.home-news-card:hover .home-news-thumb img { transform: scale(1.035); }

.home-news-text {
    display: block;
    padding: 11px 12px 13px;
}

.home-news-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -.01em;
    color: var(--text-main);
    min-height: 2.9em;
}
.home-news-card:hover .home-news-title { color: var(--primary); }

.home-news-meta {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    color: var(--text-soft);
}

@media (max-width: 1100px) {
    .home-news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 768px) {
    .home-news-body { padding: 2px 14px 14px; }
    .home-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .home-news-title { font-size: 13px; }
    .home-news-text { padding: 9px 10px 11px; }
    .home-news .title .home-news-more { font-size: 12px; padding: 3px 10px; }
}
@media (max-width: 420px) {
    .home-news-title { min-height: 0; -webkit-line-clamp: 2; font-size: 12.5px; }
    .home-news-grid { gap: 10px; }
}
@media (max-width: 360px) {
    .home-news-grid { grid-template-columns: 1fr; }
    .home-news-title { font-size: 13px; }
}