@charset "UTF-8";
/* =============================================================================
   apple-luxe.css — 臺灣銀行匯率 · 前台「Paper & Amber」视觉层
   -----------------------------------------------------------------------------
   设计方向：近白纸面机身（不是纯白，也不是粉底）+ 单一琥珀橙作为彩色节点
            全站数字使用等宽数字（tabular-nums），让牌价表天然对齐
            唯一深色块 = 今日即時匯率换算器（视觉锚点，与后台黑色胶囊按钮同源）
   加载位置：必须在 inc-header.htm 的内联 <style> 之后，才能覆盖旧配色
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. 令牌：直接接管旧变量名，让遗留规则自动跟着换色
   --------------------------------------------------------------------------- */
:root {
    /* 新语义令牌 */
    --paper: #fafaf8;
    --paper-warm: #fdfcfa;
    --surface: #ffffff;
    --ink: #1a1a1c;
    --ink-2: #55555c;
    --ink-3: #8a8a90;
    --ink-4: #b4b4b8;
    --hair: rgba(24, 22, 20, .07);
    --hair-2: rgba(24, 22, 20, .11);
    --amber: #e8590c;
    --amber-deep: #b8450a;
    --amber-soft: #fff1e8;
    --amber-soft-2: #ffe1cf;
    --up: #0e9f6e;
    --down: #d92d20;
    --r-s: 10px;
    --r: 14px;
    --r-l: 18px;
    --r-xl: 22px;
    --sh-1: 0 1px 2px rgba(24, 22, 20, .04);
    --sh-2: 0 1px 2px rgba(24, 22, 20, .04), 0 10px 26px -20px rgba(24, 22, 20, .32);
    --sh-3: 0 1px 2px rgba(24, 22, 20, .05), 0 26px 52px -30px rgba(24, 22, 20, .38);
    --ease: cubic-bezier(.16, 1, .3, 1);
    --font: "SF Pro Text", -apple-system, BlinkMacSystemFont, "PingFang TC",
        "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft JhengHei",
        "Microsoft YaHei", sans-serif;

    /* 兼容旧变量名（inc-header.htm 里大量规则依赖它们） */
    --primary: #e8590c;
    --primary-hover: #c94a08;
    --secondary: #0e9f6e;
    --danger: #d92d20;
    --bg-color: #fafaf8;
    --card-bg: #ffffff;
    --text-main: #1a1a1c;
    --text-muted: #8a8a90;
    --border-color: rgba(24, 22, 20, .09);
    --shadow: 0 1px 2px rgba(24, 22, 20, .04), 0 10px 26px -20px rgba(24, 22, 20, .32);
    --shadow-lg: 0 1px 2px rgba(24, 22, 20, .05), 0 26px 52px -30px rgba(24, 22, 20, .38);
}

/* ---------------------------------------------------------------------------
   2. 基础：纸面、字阶、数字对齐
   --------------------------------------------------------------------------- */
body {
    background-color: var(--paper) !important;
    background-image:
        radial-gradient(1100px 480px at 78% -14%, rgba(232, 89, 12, .07), transparent 62%),
        radial-gradient(760px 420px at 6% -6%, rgba(232, 89, 12, .045), transparent 58%) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    color: var(--ink) !important;
    font-family: var(--font) !important;
    font-size: 14px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 全站数字等宽，牌价天生对齐 */
.nums,
.rate-main,
.rate-change,
.top-currency-item .rate,
.top-currency-item .change,
.cur-rates b,
.tw-sb-rate,
.result-amount,
.conversion-list-item a,
.layui-table td {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

::selection { background: var(--amber-soft-2); color: var(--amber-deep); }

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

a:focus-visible,
button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* 广告位未填充时立刻收起，避免首屏大片空白 */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
ins.adsbygoogle { background: transparent !important; }

/* ---------------------------------------------------------------------------
   3. 头部：半透明玻璃条 + 胶囊导航
   --------------------------------------------------------------------------- */
#header {
    background: rgba(255, 255, 255, .74) !important;
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    border-bottom: 1px solid var(--hair) !important;
    box-shadow: none !important;
    position: sticky;
    top: 0;
    z-index: 1000;
}

#header .head { height: 66px !important; }

.brand-mark {
    width: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
    font-size: 17px !important;
    background: linear-gradient(150deg, #ff9257 0%, #e8590c 58%, #c94a08 100%) !important;
    box-shadow:
        0 1px 1px rgba(255, 255, 255, .38) inset,
        0 6px 14px -6px rgba(232, 89, 12, .55) !important;
}

.brand-name {
    font-size: 15px !important;
    font-weight: 680 !important;
    letter-spacing: -.01em !important;
}

.brand-sub {
    font-size: 10px !important;
    letter-spacing: .1em !important;
    color: var(--ink-4) !important;
    text-transform: uppercase;
}

/* 导航：胶囊 */
#header .head ul.nav {
    gap: 4px !important;
    align-items: center;
}

#header .head ul.nav li a {
    height: 34px !important;
    line-height: 34px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 13.5px !important;
    font-weight: 520 !important;
    color: var(--ink-2) !important;
    border-bottom: 0 !important;
    transition: background .2s var(--ease), color .2s var(--ease);
}

#header .head ul.nav li a:hover {
    background: rgba(24, 22, 20, .05) !important;
    color: var(--ink) !important;
    font-weight: 520 !important;
}

#header .head ul.nav li.act a,
#header .head ul li.act a {
    background: var(--amber-soft) !important;
    color: var(--amber-deep) !important;
    font-weight: 680 !important;
    border-bottom: 0 !important;
}

/* 移动端汉堡 */
.menu-toggle span { background: var(--ink) !important; }

/* ---------------------------------------------------------------------------
   4. 布局
   --------------------------------------------------------------------------- */
.layui-container {
    max-width: 1220px !important;
    padding: 0 24px !important;
}

.main-wrapper { padding: 26px 0 0 !important; }

/* 侧栏没有内容时自动改单栏，避免右侧出现一整列空白 */
.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap: 20px !important;
}

.content-grid:not(:has(.tw-sidebar-card)) { grid-template-columns: minmax(0, 1fr); }
.content-grid:not(:has(.tw-sidebar-card)) > aside { text-align: center; }

/* ---------------------------------------------------------------------------
   5. 卡片系统
   --------------------------------------------------------------------------- */
.custom-card,
.layui-card {
    background: var(--surface) !important;
    border: 1px solid var(--hair) !important;
    border-radius: var(--r-l) !important;
    box-shadow: var(--sh-1) !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    overflow: hidden;
}

.custom-card:hover,
.layui-card:hover { box-shadow: var(--sh-2) !important; }

/* 卡片头统一：用 .card-header / .title.with-icon 两种写法 */
.custom-card .card-header,
.layui-card .title,
.layui-card .title.with-icon {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 15px 20px !important;
    font-size: 14.5px !important;
    font-weight: 650 !important;
    color: var(--ink) !important;
    letter-spacing: -.01em;
    border-bottom: 1px solid var(--hair) !important;
    border-left: 0 !important;
    background: var(--surface);
    line-height: 1.4;
}

.custom-card > .top-currency-grid,
.custom-card > .rate-list,
.layui-card > .conversion-list,
.layui-card > .taiwan-news-list { padding: 14px 20px 18px; }

/* 卡片头图标：统一成 26px 圆角方块，淡橙底 + 矢量化线性图标 */
.custom-card .icon-box,
.custom-card .header-icon,
.layui-card .header-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
    background-color: var(--amber-soft) !important;
    color: var(--amber) !important;
    display: inline-grid !important;
    place-items: center;
    font-size: 13px !important;
    flex: 0 0 26px;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 15px 15px !important;
}

/* 帶 with-icon 的标题要给绝对定位的图标留出左侧空间 */
.layui-card .title.with-icon { padding-left: 46px !important; }

.layui-card .title.with-icon .header-icon:not(.right-action) {
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-radius: 8px !important;
    background-color: var(--amber-soft) !important;
}

/* 矢量图标：coins = 币种堆叠，cross = 双向兑换 */
.layui-card .header-icon.coins,
.custom-card .header-icon.coins,
.custom-card .icon-box {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8590c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6.5' rx='7' ry='3'/%3E%3Cpath d='M5 6.5v5c0 1.66 3.13 3 7 3s7-1.34 7-3v-5'/%3E%3Cpath d='M5 11.5v5c0 1.66 3.13 3 7 3s7-1.34 7-3v-5'/%3E%3C/svg%3E");
}

.layui-card .header-icon.cross,
.custom-card .header-icon.cross {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8590c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13'/%3E%3Cpath d='M14 5l3 3-3 3'/%3E%3Cpath d='M20 16H7'/%3E%3Cpath d='M10 13l-3 3 3 3'/%3E%3C/svg%3E");
}

.layui-card .header-icon svg { width: 14px; height: 14px; fill: var(--amber); }

/* 去掉模板里直接写死的亮色描边 / emoji 字号 */
.layui-card .title[style*="border-left"] { border-left: 0 !important; padding-left: 46px !important; }
.layui-card .title > span[style*="font-size"] { font-size: 0 !important; line-height: 0; }

/* ---------------------------------------------------------------------------
   6. 今日即時匯率：全站唯一深色块
   --------------------------------------------------------------------------- */
.converter-section {
    position: relative;
    background:
        radial-gradient(620px 260px at 88% -22%, rgba(232, 89, 12, .34), transparent 64%),
        radial-gradient(420px 220px at 4% 108%, rgba(232, 89, 12, .16), transparent 62%),
        linear-gradient(158deg, #26211e 0%, #191614 56%, #131110 100%) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 19px !important;
    padding: 26px 28px !important;
    color: #fff !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .08) inset,
        0 20px 44px -26px rgba(19, 17, 16, .85) !important;
    margin-bottom: 20px !important;
    overflow: hidden;
}

/* 顶部一道极细暖光，制造「玻璃边缘」 */
.converter-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 170, 110, .55), transparent);
    pointer-events: none;
}

.converter-section h2 {
    font-size: 15px !important;
    font-weight: 650 !important;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .96) !important;
    margin: 0 0 18px !important;
    opacity: 1 !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.converter-section h2::before {
    content: "";
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ffa96a, var(--amber));
}

/* 布局：金額 + 從/⇄/到 排在同一行，避免金额框孤零零缩在右侧 */
.converter-section .converter-grid {
    display: grid !important;
    grid-template-columns: 190px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: end !important;
    margin-bottom: 16px !important;
}

.converter-section .currency-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: end !important;
}

.converter-section .input-group label {
    font-size: 11.5px !important;
    font-weight: 550;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .52) !important;
    margin-bottom: 6px !important;
    opacity: 1 !important;
    text-transform: uppercase;
}

.converter-section .input-wrapper {
    background: rgba(255, 255, 255, .055) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: var(--r-s) !important;
    padding: 0 14px !important;
    height: 44px;
    display: flex;
    align-items: center;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}

.converter-section .input-wrapper:focus-within {
    border-color: rgba(255, 169, 106, .7) !important;
    background: rgba(255, 255, 255, .09) !important;
    box-shadow: 0 0 0 3.5px rgba(232, 89, 12, .28);
}

.converter-section .input-wrapper input,
.converter-section .input-wrapper select {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 550;
    font-variant-numeric: tabular-nums;
}

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

.converter-section .swap-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    background: rgba(255, 255, 255, .07) !important;
    color: rgba(255, 255, 255, .85) !important;
    font-size: 15px !important;
    margin-bottom: 3px;
}

.converter-section .swap-btn:hover {
    background: rgba(232, 89, 12, .9) !important;
    border-color: rgba(232, 89, 12, .9) !important;
    color: #fff !important;
}

/* 结果区 */
.converter-section .result-display {
    background: rgba(255, 255, 255, .055) !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: var(--r) !important;
    padding: 18px 20px !important;
    align-items: flex-end !important;
}

.converter-section .result-amount {
    font-size: 38px !important;
    font-weight: 700 !important;
    letter-spacing: -.03em !important;
    line-height: 1.05 !important;
    color: #fff !important;
    margin: 4px 0 0 !important;
}

.converter-section .result-amount span { color: rgba(255, 255, 255, .55) !important; font-weight: 600; }

.converter-section .result-display p { color: rgba(255, 255, 255, .62) !important; }

/* CTA：琥珀渐变胶囊（全站唯一实心彩色按钮） */
.converter-section .convert-btn,
.converter-section .convert-btn.layui-btn {
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: linear-gradient(180deg, #f77a2e 0%, #e8590c 100%) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .28) inset,
        0 8px 20px -10px rgba(232, 89, 12, .8) !important;
    transition: transform .16s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}

.converter-section .convert-btn:hover {
    background: linear-gradient(180deg, #ff8a44 0%, #f26a17 100%) !important;
    filter: none;
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .3) inset,
        0 12px 26px -12px rgba(232, 89, 12, .9) !important;
}

.converter-section .convert-btn:active { transform: translateY(0); }

/* select2 在深色卡上的适配 */
.converter-section .select2-container--bootstrap4 .select2-selection {
    background: transparent !important;
    border: 0 !important;
    min-height: 24px;
    height: 24px !important;
}

.converter-section .select2-selection__rendered {
    color: #fff !important;
    font-size: 15px !important;
    line-height: 24px !important;
    padding-left: 0 !important;
}

.converter-section .select2-selection__arrow { display: none; }
.converter-section .select2-selection__clear { color: rgba(255, 255, 255, .5) !important; }

.select2-container--bootstrap4 .select2-dropdown {
    background: #fff !important;
    border: 1px solid var(--hair-2) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--sh-3) !important;
    padding: 6px;
    overflow: hidden;
}

.select2-container--bootstrap4 .select2-results__option {
    color: var(--ink-2) !important;
    font-size: 13px;
    border-radius: 8px;
    padding: 7px 10px;
}

.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--amber-soft) !important;
    color: var(--amber-deep) !important;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   7. 熱門幣種
   --------------------------------------------------------------------------- */
.top-currency-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
    gap: 10px !important;
}

.top-currency-item {
    background: var(--paper-warm) !important;
    border: 1px solid var(--hair) !important;
    border-radius: var(--r) !important;
    padding: 13px 14px !important;
    gap: 7px !important;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}

.top-currency-item:hover {
    transform: translateY(-2px);
    background: #fff !important;
    border-color: var(--amber-soft-2) !important;
    box-shadow: 0 12px 26px -18px rgba(232, 89, 12, .5) !important;
}

.top-currency-item .info { gap: 7px !important; }

.top-currency-item img {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05);
}

.top-currency-item .name {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--ink-2) !important;
    letter-spacing: .01em;
}

.top-currency-item .rate {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.top-currency-item .change {
    font-size: 11.5px !important;
    font-weight: 550 !important;
    padding: 1px 7px;
    border-radius: 999px;
    display: inline-block;
    width: fit-content;
    background: rgba(14, 159, 110, .09);
    color: var(--up) !important;
}

.top-currency-item .change.text-down {
    background: rgba(217, 45, 32, .09);
    color: var(--down) !important;
}

/* ---------------------------------------------------------------------------
   8. 今日匯率列表
   --------------------------------------------------------------------------- */
.rate-list { margin: 0 !important; padding: 4px 20px 8px !important; }

/* 宽屏下换成两栏报价板，缩短「名称 → 数字」的视线距离 */
@media (min-width: 1080px) {
    .custom-card > .rate-list,
    .rate-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 44px;
        padding: 4px 20px 10px !important;
    }
}

.rate-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 13px 0 !important;
    border-bottom: 1px solid var(--hair) !important;
    transition: background .18s var(--ease);
}

.rate-item:last-child { border-bottom: 0 !important; }

.rate-item:hover { background: rgba(232, 89, 12, .02); }

.rate-item .currency-info { gap: 11px !important; }

.rate-item .flag {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 1px rgba(24, 22, 20, .06);
}

.currency-name { font-size: 14px !important; font-weight: 600 !important; color: var(--ink) !important; }

.currency-code {
    font-size: 10.5px !important;
    letter-spacing: .07em !important;
    color: var(--ink-4) !important;
    text-transform: uppercase;
    margin-top: 1px;
}

.rate-values { text-align: right; }

.rate-main {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.rate-change {
    font-size: 11.5px !important;
    font-weight: 550 !important;
    margin-top: 2px;
}

.text-up { color: var(--up) !important; }
.text-down { color: var(--down) !important; }

/* ---------------------------------------------------------------------------
   9. 其他使用者正在兌換（交叉匯率）
   --------------------------------------------------------------------------- */
.conversion-list { padding: 6px 14px 12px !important; }

.conversion-list-item { margin-bottom: 6px; }

.conversion-list-item .to-link {
    display: block;
    padding: 9px 12px;
    border-radius: var(--r-s);
    background: var(--paper-warm);
    border: 1px solid var(--hair);
    font-size: 12.5px;
    color: var(--ink-2) !important;
    text-decoration: none;
    transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}

.conversion-list-item .to-link:hover {
    background: var(--amber-soft);
    border-color: var(--amber-soft-2);
    color: var(--amber-deep) !important;
}

/* ---------------------------------------------------------------------------
   10. 臺灣銀行幣別卡
   --------------------------------------------------------------------------- */
.sec-title-row { margin: 4px 2px 14px !important; }

.sec-title {
    font-size: 15px !important;
    font-weight: 680 !important;
    letter-spacing: -.01em;
    color: var(--ink);
    gap: 9px !important;
}

.sec-title::before {
    width: 3px !important;
    height: 16px !important;
    border-radius: 2px;
    background: linear-gradient(180deg, #ffa96a, var(--amber)) !important;
}

.sec-more { font-size: 12.5px; font-weight: 600; color: var(--amber) !important; }

.cur-grid { gap: 10px !important; margin-bottom: 26px !important; }

.cur-card {
    background: var(--surface) !important;
    border: 1px solid var(--hair) !important;
    border-radius: var(--r) !important;
    padding: 12px 14px !important;
    box-shadow: var(--sh-1);
}

.cur-card:hover {
    transform: translateY(-2px);
    border-color: var(--amber-soft-2) !important;
    box-shadow: 0 14px 30px -22px rgba(232, 89, 12, .55) !important;
}

.cur-name { font-size: 13px !important; font-weight: 620 !important; color: var(--ink) !important; }
.cur-code { font-size: 10px !important; letter-spacing: .08em; color: var(--ink-4) !important; }
.cur-rates b { font-size: 15px !important; font-weight: 700 !important; color: var(--ink) !important; }
.cur-rates .lab { font-size: 9.5px !important; letter-spacing: .07em; color: var(--ink-4) !important; }
.cur-rates .sub { font-size: 10.5px !important; color: var(--ink-3) !important; }

/* ---------------------------------------------------------------------------
   11. 匯率新聞卡
   --------------------------------------------------------------------------- */
.layui-card .header-icon.chart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8590c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17l5-6 4 4 7-8'/%3E%3Cpath d='M15 7h5v5'/%3E%3C/svg%3E");
}

.taiwan-news-list { padding: 0 !important; }

.news-card .layui-row { margin: 0 !important; }

.taiwan-news-item {
    display: flex !important;
    align-items: stretch;
    gap: 13px !important;
    height: 100%;
    padding: 12px !important;
    background: var(--paper-warm) !important;
    border: 1px solid var(--hair) !important;
    border-radius: var(--r) !important;
    text-decoration: none;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}

.taiwan-news-item:hover {
    background: #fff !important;
    border-color: var(--amber-soft-2) !important;
    box-shadow: 0 14px 30px -22px rgba(232, 89, 12, .5) !important;
    transform: translateY(-2px);
}

.taiwan-news-item .news-img-wrap {
    display: block;
    flex: 0 0 120px;
    width: 120px !important;
    height: 88px !important;
    border-radius: var(--r-s) !important;
    background: linear-gradient(150deg, #fff1e8, #ffe1cd) !important;
    overflow: hidden;
    position: relative;
}

.taiwan-news-item .news-img-wrap.no-img::after {
    content: "匯率走勢";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 10.5px;
    letter-spacing: .06em;
    color: var(--amber-deep);
    opacity: .55;
}

.taiwan-news-item .news-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* 统一缩略图色调：暖灰单色，消除彩虹色块带来的廉价感 */
    filter: invert(1) grayscale(1) sepia(.38) saturate(1.4) brightness(1.22) contrast(.96);
    transition: transform .4s var(--ease), filter .4s var(--ease);
}

.taiwan-news-item:hover .news-img-wrap img {
    transform: scale(1.045);
    filter: invert(1) grayscale(.6) sepia(.3) saturate(1.35) brightness(1.04) contrast(1.02);
}

.taiwan-news-item .news-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    gap: 6px;
}

.taiwan-news-item .news-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px !important;
    font-weight: 640 !important;
    line-height: 1.45 !important;
    letter-spacing: -.005em;
    color: var(--ink) !important;
    transition: color .18s var(--ease);
}

.taiwan-news-item:hover .news-title { color: var(--amber-deep) !important; }

.taiwan-news-item .news-intro {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px !important;
    line-height: 1.6 !important;
    color: var(--ink-3) !important;
}

.taiwan-news-item .news-meta {
    display: flex;
    align-items: center;
    gap: 10px !important;
    font-size: 11px !important;
    color: var(--ink-4) !important;
    letter-spacing: .02em;
}

.taiwan-news-item .news-cate {
    background: var(--amber-soft) !important;
    color: var(--amber-deep) !important;
    font-size: 10.5px !important;
    font-weight: 600;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    letter-spacing: .04em;
}

.taiwan-news-item .news-views { margin-left: auto; }

/* ---------------------------------------------------------------------------
   12. 友情連結 / 页脚
   --------------------------------------------------------------------------- */
.friend-body,
.layui-card .friend-body {
    padding: 16px 20px 20px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.friend-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--paper-warm);
    border: 1px solid var(--hair);
    font-size: 12.5px;
    color: var(--ink-2) !important;
    text-decoration: none;
    transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}

.friend-link:hover {
    background: var(--amber-soft);
    border-color: var(--amber-soft-2);
    color: var(--amber-deep) !important;
}

/* 页脚改成「近白 + 发丝线」，不再用深灰大色块 */
#footer {
    background: transparent !important;
    color: var(--ink-3) !important;
    border-top: 1px solid var(--hair-2);
    padding: 34px 0 40px !important;
    margin-top: 26px !important;
    text-align: center;
    font-size: 12.5px !important;
}

#footer .footer-box { padding: 0; }
#footer .bd > p { margin: 0 0 6px; line-height: 1.8; color: var(--ink-3); }
#footer a { color: var(--ink-2) !important; text-decoration: none; }
#footer a:hover { color: var(--amber-deep) !important; }

#footer .friend-links {
    margin-top: 16px !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px !important;
    font-size: 12px !important;
}

#footer .friend-links .fl-label { color: var(--ink-4) !important; }

/* 回到顶部 */
.fixed-btn,
.go-top {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: var(--surface) !important;
    color: var(--ink-2) !important;
    border: 1px solid var(--hair-2);
    box-shadow: 0 10px 26px -14px rgba(24, 22, 20, .5) !important;
    font-size: 16px !important;
    line-height: 41px !important;
    transition: transform .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.fixed-btn:hover,
.go-top:hover {
    color: var(--amber) !important;
    border-color: var(--amber-soft-2);
    transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   13. 内页（文章 / 银行 / 大寫 / 交叉匯率页）
   --------------------------------------------------------------------------- */
.layui-breadcrumb { font-size: 12.5px !important; margin: 4px 0 16px; }
.layui-breadcrumb a { color: var(--ink-3) !important; }
.layui-breadcrumb a:hover { color: var(--amber) !important; }

/* 文章正文 */
.article-content,
.layui-card .content { color: var(--ink-2); font-size: 14.5px; line-height: 1.85; }

/* 通用表格（銀行牌價 / 大寫數字） */
.layui-table {
    border-radius: var(--r) !important;
    border-color: var(--hair) !important;
    font-size: 13px;
}

.layui-table thead tr { background: var(--paper-warm) !important; }

.layui-table th {
    font-size: 12px !important;
    font-weight: 620 !important;
    color: var(--ink-3) !important;
    letter-spacing: .03em;
    border-color: var(--hair) !important;
}

.layui-table td { border-color: var(--hair) !important; color: var(--ink-2); }

.layui-table tbody tr:hover { background: rgba(232, 89, 12, .025) !important; }

/* ---------------------------------------------------------------------------
   14. 响应式
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .top-currency-grid { grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)) !important; }
}

@media (max-width: 768px) {
    .layui-container { padding: 0 15px !important; }
    .main-wrapper { padding: 16px 0 0 !important; }
    #header .head { height: 56px !important; }
    .brand-name { font-size: 14px !important; }

    .content-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }

    .custom-card,
    .layui-card { border-radius: var(--r) !important; margin-bottom: 14px !important; }

    .custom-card .card-header,
    .layui-card .title,
    .layui-card .title.with-icon { padding: 13px 15px !important; font-size: 14px !important; }

    .custom-card > .top-currency-grid,
    .custom-card > .rate-list,
    .layui-card > .conversion-list,
    .layui-card > .taiwan-news-list { padding: 12px 15px 14px; }

    .top-currency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
    .top-currency-item .rate { font-size: 17px !important; }

    .rate-list { padding: 2px 15px 6px !important; }
    .rate-item { padding: 11px 0 !important; }

    .converter-section { padding: 20px 16px !important; border-radius: var(--r) !important; }
    .converter-section .converter-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .converter-section .currency-row { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
    .converter-section .swap-btn { justify-self: center; transform: rotate(90deg); }
    .converter-section .swap-btn:hover { transform: rotate(270deg); }
    .converter-section .result-display { padding: 16px !important; align-items: stretch !important; flex-direction: column; gap: 14px; }
    .converter-section .result-amount { font-size: 30px !important; }
    .converter-section .convert-btn { width: 100%; }

    .taiwan-news-item .news-img-wrap { width: 104px !important; height: 78px !important; }
    .taiwan-news-item h3 a { font-size: 13px !important; }

    #footer { padding: 26px 0 30px !important; font-size: 12px !important; }
}

@media (max-width: 420px) {
    .top-currency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .top-currency-item { padding: 11px 11px !important; }
    .top-currency-item .rate { font-size: 16px !important; }
}

/* ---------------------------------------------------------------------------
   15. 动效降级
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ---------------------------------------------------------------------------
   16. 文章详情页
   --------------------------------------------------------------------------- */

/* 右栏只有广告、没有臺灣銀行牌价卡时，正文占满整行 */
.layui-row:has(> .layui-col-md4):not(:has(.tw-sidebar-card)) > .layui-col-md8 {
    width: 100%;
}

/* 原来的「白字 + 黑色发光」是给深色底写的，在浅色页上等于隐形 */
h1.article-title {
    text-align: left !important;
    color: var(--ink) !important;
    text-shadow: none !important;
    font-size: 25px !important;
    line-height: 1.36 !important;
    font-weight: 700 !important;
    letter-spacing: -.02em;
    margin: 2px 0 14px !important;
    word-break: break-word;
}

/* 信息条：虚线银行体 → 淡底圆角胶囊行 */
.article-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 9px 14px !important;
    margin: 0 0 22px !important;
    border: 1px solid var(--hair) !important;
    border-radius: var(--r-s);
    background: var(--paper-warm);
    font-family: var(--font) !important;
    font-size: 12px !important;
    color: var(--ink-3) !important;
    text-align: left !important;
}

.article-info a {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--amber-soft);
    color: var(--amber-deep) !important;
    font-weight: 600;
    text-decoration: none;
}

.article-info a:hover { background: var(--amber-soft-2); }

/* 正文排版 */
.article-body {
    font-size: 14.5px !important;
    line-height: 1.9 !important;
    color: var(--ink-2) !important;
}

.article-body p {
    font-size: 14.5px !important;
    line-height: 1.9 !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    color: var(--ink-2);
}

.article-body h2,
.article-body h3 {
    font-size: 17px !important;
    font-weight: 660 !important;
    color: var(--ink) !important;
    margin: 24px 0 10px !important;
    letter-spacing: -.01em;
}

.article-body h2:first-child,
.article-body h3:first-child { margin-top: 4px !important; }

.article-body ul,
.article-body ol { padding-left: 1.35em; margin: 0 0 14px; }
.article-body li { margin: 4px 0; line-height: 1.85; }

.article-body table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0;
    margin: 16px 0 18px !important;
    font-size: 13px !important;
    border: 1px solid var(--hair);
    border-radius: var(--r-s);
    overflow: hidden;
}

.article-body th,
.article-body td {
    border: 0 !important;
    border-bottom: 1px solid var(--hair) !important;
    padding: 9px 13px !important;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.article-body th {
    background: var(--paper-warm) !important;
    color: var(--ink-3) !important;
    font-size: 12px !important;
    font-weight: 620 !important;
    letter-spacing: .02em;
}

.article-body tr:last-child td { border-bottom: 0 !important; }

.article-body blockquote {
    margin: 16px 0;
    padding: 12px 16px;
    border-left: 3px solid var(--amber);
    background: var(--amber-soft);
    border-radius: 0 var(--r-s) var(--r-s) 0;
    color: var(--amber-deep);
    font-size: 13.5px;
}

.article-body img { max-width: 100%; height: auto; border-radius: var(--r-s); }

/* 上下篇 */
.detail-arr-left,
.detail-arr-right {
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.7;
}

.detail-arr-left a,
.detail-arr-right a { color: var(--ink-2) !important; text-decoration: none; }
.detail-arr-left a:hover,
.detail-arr-right a:hover { color: var(--amber-deep) !important; }

/* ---------------------------------------------------------------------------
   17. 通用卡片头 / 卡体（前台用 layui-card-header 的页面）
   --------------------------------------------------------------------------- */
.layui-card > .layui-card-header {
    padding: 14px 20px !important;
    font-size: 13px !important;
    font-weight: 620 !important;
    color: var(--ink) !important;
    line-height: 1.5 !important;
    height: auto !important;
    border-bottom: 1px solid var(--hair) !important;
    background: var(--surface) !important;
}

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

.layui-breadcrumb { line-height: 1.5; }
.layui-breadcrumb a { color: var(--ink-3) !important; font-size: 12.5px; }
.layui-breadcrumb span[lay-separator] { color: var(--ink-4) !important; margin: 0 6px; }

/* ---------------------------------------------------------------------------
   18. 幣種對頁的换算器（huilv_show）：白卡 + 黑胶囊按钮
   --------------------------------------------------------------------------- */
#content .converter-box:not(.layui-card) {
    background: var(--surface) !important;
    border: 1px solid var(--hair) !important;
    border-radius: var(--r-l) !important;
    padding: 18px 20px 20px !important;
    box-shadow: var(--sh-1);
}

#content .converter-box .amount label,
#content .converter-box .select label {
    display: block;
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--ink-4) !important;
    text-transform: uppercase;
    margin-bottom: 6px !important;
}

#content .converter-box .amount input,
#content .converter-box .select select {
    width: 100% !important;
    height: 42px !important;
    line-height: 40px !important;
    padding: 0 12px !important;
    border: 1px solid var(--hair-2) !important;
    border-radius: var(--r-s) !important;
    background: var(--paper-warm) !important;
    color: var(--ink) !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    box-sizing: border-box;
    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 {
    border-color: var(--amber) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3.5px rgba(232, 89, 12, .14) !important;
    outline: none;
}

/* 交換：描边按钮 */
#content .converter-box .exchange .layui-btn {
    height: 42px !important;
    line-height: 40px !important;
    border-radius: var(--r-s) !important;
    background: var(--paper-warm) !important;
    color: var(--ink-2) !important;
    border: 1px solid var(--hair-2) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

#content .converter-box .exchange .layui-btn:hover {
    color: var(--amber-deep) !important;
    border-color: var(--amber-soft-2) !important;
    background: var(--amber-soft) !important;
}

#content .converter-box .exchange-result { float: none !important; }

#content .converter-box .exchange-result .f {
    color: var(--ink-3) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: .02em;
}

#content .converter-box .exchange-result .t {
    color: var(--ink) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    letter-spacing: -.03em;
    padding: 4px 0 6px !important;
    font-variant-numeric: tabular-nums;
}

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

#content .converter-box .exchange-result .e {
    color: var(--ink-4) !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
}

/* 立即換算：黑胶囊（与后台主按钮同源） */
#content .converter-box .exchange-button .layui-btn {
    width: 100%;
    height: 42px !important;
    line-height: 42px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: var(--ink) !important;
    color: #fff !important;
    border: 0 !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
    box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .8) !important;
}

#content .converter-box .exchange-button .layui-btn:hover {
    background: #000 !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* 走势图卡：去掉多余留白，曲线颜色在 js 里换成品牌橙 */
#chart-card { padding: 4px 8px 8px !important; }
#chart-card .highcharts-title { font-size: 13.5px !important; }

/* ---------------------------------------------------------------------------
   19. 补充图标：arrows / line-chart（style.css 里是白字 PNG，在浅底上看不见）
   --------------------------------------------------------------------------- */
.layui-card .header-icon.arrows {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8590c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17V7'/%3E%3Cpath d='M4 10l3-3 3 3'/%3E%3Cpath d='M17 7v10'/%3E%3Cpath d='M14 14l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
}

.layui-card .header-icon.line-chart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8590c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 14l3.5-4 3 3L20 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
}

/* ---------------------------------------------------------------------------
   20. 换算结果表：去掉竖向网格，做成 Apple 式的横向清单
   --------------------------------------------------------------------------- */
.layui-card .layui-table th,
.layui-card .layui-table td {
    border-left: 0 !important;
    border-right: 0 !important;
}

.layui-card .layui-table thead tr { background: transparent !important; }

.layui-card .layui-table th {
    background: var(--paper-warm) !important;
    border-bottom: 1px solid var(--hair) !important;
    height: 38px;
    padding: 6px 13px !important;
    font-size: 11.5px !important;
    letter-spacing: .05em;
}

.layui-card .layui-table td {
    padding: 8px 13px !important;
    font-size: 13px !important;
}

.layui-card .layui-table tbody tr:hover { background: rgba(232, 89, 12, .03) !important; }

/* 表头里的国旗/币种小标签 */
.layui-card .layui-table img.img-flag,
.layui-card .layui-table th img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    vertical-align: -3px;
    margin-right: 4px;
}

/* 手机端：表格可横向滚动而不是挤成一团 */
@media (max-width: 768px) {
    .layui-card > .layui-card-body,
    #content .converter-box:not(.layui-card) { padding: 14px 14px 16px !important; }
    .layui-card > .layui-card-header { padding: 12px 14px !important; }
    h1.article-title { font-size: 20px !important; }
    .article-body p { font-size: 14px !important; }
    .article-info { gap: 4px 10px; font-size: 11.5px !important; }
}

/* ---------------------------------------------------------------------------
   21. 前台按钮：黑胶囊主操作（统一后台语言，干掉 layui 默认墨绿）
   --------------------------------------------------------------------------- */
.layui-btn {
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: var(--ink) !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
    letter-spacing: .02em;
    box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .75) !important;
    transition: transform .16s var(--ease), background .18s var(--ease), box-shadow .2s var(--ease);
}

.layui-btn:hover {
    background: #000 !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .8) !important;
}

.layui-btn:active { transform: translateY(0); }

.layui-btn-normal { background: var(--amber) !important; color: #fff !important; }
.layui-btn-normal:hover { background: var(--amber-deep) !important; }

.layui-btn-primary {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border: 1px solid var(--hair-2) !important;
    box-shadow: var(--sh-1) !important;
}
.layui-btn-primary:hover { background: var(--paper-warm) !important; color: var(--ink) !important; }

.layui-btn-sm { height: 34px !important; line-height: 34px !important; padding: 0 16px !important; font-size: 12.5px !important; }
.layui-btn-xs { height: 28px !important; line-height: 28px !important; padding: 0 12px !important; font-size: 12px !important; }

/* ---------------------------------------------------------------------------
   22. 收尾：移动菜单面板 / 原生下拉 / 窄屏列表
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* 汉堡展开后的下拉面板：做成浮起的白卡，而不是一条贴在内容上的白条 */
    #header .head ul.nav.open {
        background: #fff !important;
        border-top: 1px solid var(--hair);
        border-radius: 0 0 var(--r-l) var(--r-l);
        box-shadow: 0 26px 44px -28px rgba(24, 22, 20, .45);
        padding: 8px 10px 12px !important;
        gap: 2px !important;
    }

    #header .head ul.nav.open li { width: 100%; }

    #header .head ul.nav.open li a {
        display: block;
        width: 100%;
        height: 44px !important;
        line-height: 44px !important;
        border-radius: 11px !important;
        text-align: center;
        font-size: 14px !important;
        padding: 0 !important;
    }

    #header .head ul.nav.open li.act a {
        background: var(--amber-soft) !important;
        color: var(--amber-deep) !important;
    }

    /* 交叉汇率两列太挤，改成两列但缩小字号 */
    .conversion-list-item { width: 50% !important; padding: 0 4px 8px !important; }
    .conversion-list-item .to-link { font-size: 11.5px !important; padding: 8px 6px !important; text-align: center; }
}

/* 原生下拉（银行选择等）也统一成同一套输入外观 */
#content select,
#content select.form-control,
select.form-control {
    height: 42px !important;
    padding: 0 34px 0 12px !important;
    border: 1px solid var(--hair-2) !important;
    border-radius: var(--r-s) !important;
    background-color: var(--paper-warm) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a90' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 13px 13px !important;
    color: var(--ink) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    cursor: pointer;
}

#content select:focus { border-color: var(--amber) !important; box-shadow: 0 0 0 3.5px rgba(232, 89, 12, .14) !important; }

/* select2 容器在浅底上的外观 */
.select2-container--bootstrap4 .select2-selection--single {
    height: 42px !important;
    border: 1px solid var(--hair-2) !important;
    border-radius: var(--r-s) !important;
    background: var(--paper-warm) !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
    padding-left: 12px !important;
    color: var(--ink) !important;
    font-weight: 600;
    font-size: 13.5px;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow { height: 40px !important; }

/* ==========================================================================
   23. 中文數字換算頁（daxie）细节打磨
   .faded-digits 在前两处是装饰性空 span，但 daxie 页把它当行内标签用，
   原 --ink-4 (#b4b4b8) 在近白底上对比仅 2.0:1，提到中灰保住可读性。
   ========================================================================== */

/* 结果行：小标签 + 大金额的层级关系 */
#content .converter-box .exchange-result .t {
    font-size: 27px !important;
    font-weight: 700 !important;
    line-height: 1.36 !important;
    letter-spacing: -.01em;
    color: var(--ink) !important;
}

#content .converter-box .exchange-result .t .faded-digits:not(:empty) {
    display: inline-block;
    color: var(--ink-3) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: .03em;
    vertical-align: 4px;
    margin-right: 12px;
}

/* 中文数字对照表：纯红 #f00 与琥珀体系冲突，换深琥珀；悬停给暖底反馈 */
#content ul.daxie-list li {
    border-radius: var(--r-l);
    padding: 12px 4px 14px !important;
    transition: background .18s var(--ease), transform .18s var(--ease);
}

#content ul.daxie-list li:hover {
    background: var(--amber-soft);
    transform: translateY(-2px);
}

#content ul.daxie-list li img {
    margin-bottom: 8px !important;
    border-radius: var(--r-s);
    box-shadow: 0 1px 2px rgba(24, 22, 20, .05);
}

#content ul.daxie-list li .red {
    color: var(--amber-deep) !important;
    font-weight: 650;
}

/* 「使用最後搜尋的中文數字」历史格：做成可点的小胶囊 */
#content .conversion-list-item {
    padding: 3px 6px !important;
}

#content .conversion-list-item .to-link {
    display: block;
    padding: 9px 12px;
    border-radius: var(--r-s);
    background: var(--paper-warm);
    border: 1px solid var(--hair);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
    transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}

#content .conversion-list-item .to-link:hover {
    background: var(--amber-soft);
    border-color: var(--amber-soft-2);
    color: var(--amber-deep);
}

/* ==========================================================================
   24. 卡片头内联 SVG 图标染色
   模板里有两套图标：① <span class="header-icon cross"></span> 走背景图（第 19 节已处理）
   ② <span class="header-icon"><svg class="icon"><path fill="#ffffff"></svg></span>
   ——后者是照深色头部写的纯白填充，落到白卡片上等于隐形。
   SVG 的 fill 是表现属性，CSS 声明优先级更高，可直接覆盖。
   只染色、不动定位，避免影响原有绝对定位布局。
   ========================================================================== */

#content .header-icon svg,
#content .header-icon svg path,
#content .header-icon svg g {
    fill: var(--amber) !important;
}

#content .header-icon svg { width: 17px !important; height: 17px !important; }

/* 深色换算器里的图标反过来给浅琥珀，别被上面染深了 */
#content .converter-section .header-icon svg path,
#content .converter-section .header-icon svg g,
#content .converter-box .header-icon svg path,
#content .converter-box .header-icon svg g {
    fill: #ffb98a !important;
}

/* ==========================================================================
   25. 台湾银行牌告页（page_taiwan）
   该页沿用 layui 原生 card-header，没走 .title 体系，标题没有品牌竖脊；
   另补齐走势图空态/错误态与表内强调色的统一。
   ========================================================================== */

#content .layui-card-header {
    position: relative;
    padding: 17px 20px 15px 20px !important;
    border-bottom: 1px solid var(--hair) !important;
    background: transparent !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    color: var(--ink) !important;
}

/* 左侧琥珀竖脊，与首页 .title 的深色换算器标题同语言 */
#content .layui-card-header::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ff9257, var(--amber));
}

#content .layui-card-header h2,
#content .layui-card-header h3 {
    font-size: 15.5px !important;
    font-weight: 650 !important;
    letter-spacing: -.005em;
    color: var(--ink) !important;
}

#content .layui-card-header small {
    font-weight: 500 !important;
    color: var(--ink-3) !important;
}

/* 牌告表：强调色由旧橙改为琥珀，数字用等宽 */
#content .layui-table td strong,
#content .layui-table th {
    color: var(--ink) !important;
}

#content .layui-table td,
#content .layui-table th {
    font-variant-numeric: tabular-nums;
    border-color: var(--hair) !important;
}

#content .layui-table thead th {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--ink-3) !important;
    letter-spacing: .04em;
    background: var(--paper-warm) !important;
}

#content .layui-table tbody tr:hover { background: var(--amber-soft) !important; }

/* 表格里“即期賣出”那个 inline style 的 #ff8a4c 覆盖不掉，用属性选择器兜一下 */
#content .layui-table td strong[style*="ff8a4c"],
#content .layui-table td strong[style*="FF8A4C"] {
    color: var(--amber) !important;
}

/* 走势图空态 / 错误态 */
.tw-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 300px;
    border-radius: var(--r-l);
    border: 1px dashed rgba(24, 22, 20, .13);
    background: var(--paper-warm);
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
    padding: 0 24px;
}

.tw-chart-empty span {
    display: block;
    color: var(--ink-3);
    font-size: 12.5px;
    font-weight: 400;
}

/* 银行切换 select（模板内联样式写了 #ddd 边框） */
#bankSel {
    border-color: var(--hair-2) !important;
    background: var(--paper-warm) !important;
    color: var(--ink) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: var(--r-s) !important;
    height: 40px;
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}

#bankSel:focus {
    border-color: var(--amber) !important;
    box-shadow: 0 0 0 3.5px rgba(232, 89, 12, .14) !important;
    outline: none !important;
}

/* 台湾页资料时间行 */
#content .tw-updated {
    text-align: right;
    margin: 0 0 12px;
    color: var(--ink-3);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

/* =============================================================================
   v2 · 收口修订（2026-10-26）
   目标：把首页上「三套语言」收成一套
     ① 干掉模板里写死的桃粉/橙色渐变卡片头，统一白底发丝线
     ② 换算器保留深色块，但去掉浑褐色雾，改成干净的深墨 + 极淡顶光
     ③ 区块标题改为中文，加数量胶囊；卡片统一 hover 抬升
   ============================================================================= */

/* ① 卡片头：任何渐变 / 背景图一律压掉，只留白底 + 发丝线 */
.custom-card .card-header,
.layui-card .title,
.layui-card .title.with-icon,
.custom-card > .title {
    background: var(--surface) !important;
    background-image: none !important;
    box-shadow: none !important;
    border-left: 0 !important;
    border-bottom: 1px solid var(--hair) !important;
    color: var(--ink) !important;
}

/* 区块标题行：从「英文小标题」改成「中文主标题 + 数量胶囊」 */
.sec-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px;
    padding: 0 2px;
}

.sec-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px !important;
    font-weight: 680 !important;
    letter-spacing: -.01em;
    color: var(--ink) !important;
}

/* 数量胶囊：不用彩色，只做浅底发丝线，避免和牌价抢注意力 */
.sec-count {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid var(--hair-2);
    background: var(--surface);
    font-size: 11px;
    font-weight: 560;
    letter-spacing: .01em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.sec-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px !important;
    font-weight: 560;
    color: var(--ink-3) !important;
    text-decoration: none !important;
    transition: color .18s var(--ease), gap .18s var(--ease);
}

.sec-more:hover { color: var(--amber) !important; gap: 10px; }

/* ② 换算器：深墨保留，但换成干净的光，文字提亮到可读 */
.converter-section {
    background:
        radial-gradient(520px 220px at 92% -26%, rgba(232, 89, 12, .16), transparent 66%),
        linear-gradient(168deg, #201e1c 0%, #191716 58%, #141211 100%) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .07) inset,
        0 24px 48px -30px rgba(20, 18, 17, .55) !important;
}

.converter-section .input-group label {
    color: rgba(255, 255, 255, .62) !important;
    letter-spacing: .05em;
}

.converter-section .result-display p { color: rgba(255, 255, 255, .70) !important; }

.converter-section .input-wrapper {
    background: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .16) !important;
}

.converter-section .input-wrapper:hover { border-color: rgba(255, 255, 255, .26) !important; }

/* ③ 牌价卡片：hover 轻微抬升（只动 transform / box-shadow） */
.cur-card {
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}

.cur-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-2);
    border-color: var(--hair-2);
}

@media (prefers-reduced-motion: reduce) {
    .cur-card:hover { transform: none; }
    .sec-more:hover { gap: 6px; }
}

/* 侧栏「臺灣銀行匯率」卡：inc-header.htm 里的内联样式把它做成了半透明桃色块，
   与左侧白卡不是一套语言；这里统一成白底发丝线，去 emoji、去渐变。 */
.tw-sidebar-card {
    background: var(--surface) !important;
    border: 1px solid var(--hair) !important;
    border-radius: var(--r-l) !important;
    box-shadow: var(--sh-1) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.tw-sb-head {
    background: var(--surface) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--hair) !important;
    padding: 15px 18px !important;
}

/* emoji 与「线性图标 + 白底」的体系不兼容，换成一枚琥珀色短脊 */
.tw-sb-icon { display: none !important; }

.tw-sb-head::before {
    content: "";
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: var(--amber);
    flex: 0 0 3px;
}

.tw-sb-title { font-size: 14.5px !important; font-weight: 680 !important; letter-spacing: -.01em; }
.tw-sb-sub { padding: 8px 18px 0 !important; color: var(--ink-3) !important; }

.tw-sb-table th {
    background: transparent !important;
    text-transform: none !important;
    letter-spacing: .04em !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--ink-3) !important;
    border-bottom: 1px solid var(--hair) !important;
}

.tw-sb-table td { border-bottom: 1px solid var(--hair) !important; }
.tw-sb-table tbody tr:hover { background: var(--paper-warm) !important; }
.tw-sb-rate { color: var(--amber-deep) !important; font-weight: 680 !important; }
.tw-sb-rate.sub { color: var(--ink-3) !important; font-weight: 500 !important; }

.tw-sb-more {
    background: transparent !important;
    border-top: 1px solid var(--hair) !important;
    color: var(--ink-2) !important;
    font-weight: 560 !important;
    letter-spacing: .01em;
}

.tw-sb-more:hover { background: var(--paper-warm) !important; color: var(--amber) !important; }

/* 修正两处 v2 引入的回归：
   ① .result-display p 选择器把大数字也压成了 70% 白 —— 排除 .result-amount
   ② 前面深色卡的 select2 文字规则被后面「浅底 select2」规则反超 —— 提权到 3 层类 */
.converter-section .result-display p:not(.result-amount) { color: rgba(255, 255, 255, .70) !important; }
.converter-section .result-display .result-amount,
.converter-section .result-display .result-amount span { color: #fff !important; }
.converter-section .result-display .result-amount span { color: rgba(255, 255, 255, .62) !important; font-weight: 600; }

.converter-section .select2-container .select2-selection__rendered,
.converter-section .select2-container .select2-selection__rendered span,
.converter-section .select2-container .select2-selection__rendered .img-flag + span {
    color: #fff !important;
}

.converter-section .select2-container .select2-selection__rendered span span { color: #fff !important; }
.converter-section .select2-container .select2-selection__placeholder { color: rgba(255, 255, 255, .42) !important; }

/* 深色卡的橙色雾再压一档，避免整块发褐 */
.converter-section {
    background:
        radial-gradient(460px 180px at 96% -30%, rgba(232, 89, 12, .10), transparent 70%),
        linear-gradient(168deg, #1e1c1b 0%, #181615 60%, #131110 100%) !important;
}

/* =============================================================================
   15. 新聞列表：5 列卡片（縮圖數據卡 + 兩行標題 + 日期）
   -----------------------------------------------------------------------------
   縮圖走 bot/chart_img.php?skin=card（綠色漸變 + 大字報價），只有 130~170px 寬，
   所以圖上不再放中文標題，卡片下方用文字標題承擔可讀性。
   ============================================================================= */
.news-block { position: relative; }

.news-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 13px;
    padding: 4px 20px 18px;
}
@media (max-width: 1180px) { .news-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .news-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.news-item {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid var(--hair);
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
    transition: border-color .2s var(--ease), box-shadow .24s var(--ease), transform .24s var(--ease);
}
.news-item:hover {
    border-color: rgba(232, 89, 12, .30);
    box-shadow: 0 12px 26px -20px rgba(24, 22, 20, .55);
    transform: translateY(-2px);
}

.news-thumb {
    display: block;
    aspect-ratio: 2 / 1;
    background: #0c6f4b;
    border: 0;
    border-radius: 0;
    overflow: hidden;
}
.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s var(--ease);
}
.news-item:hover .news-thumb img { transform: scale(1.04); }

.news-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 9px 11px 11px;
    min-width: 0;
    border-top: 1px solid var(--hair);
}

.news-title {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--ink);
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-title a {
    color: var(--ink);
    text-decoration: none;
    transition: color .18s var(--ease);
}
.news-item:hover .news-title a { color: var(--amber); }

/* 卡片版不放摘要 */
.news-excerpt { display: none !important; }

.news-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: 11.5px;
    color: var(--ink-4);
}
.news-meta .m-cate,
.news-meta .m-dot,
.news-meta .m-right { display: none; }
.news-meta .m-date { display: block; }

/* 卡片頭右側「全部文章」 */
.news-more {
    position: absolute;
    right: 18px;
    top: 23px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--amber);
    background: rgba(232, 89, 12, .09);
    border-radius: 999px;
    text-decoration: none;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.news-more:hover { background: var(--amber); color: #fff; }

/* =============================================================================
   16. 文章正文（自動發布的牌價分析）：導語 / 表格 / 圖說 / 免責
   -----------------------------------------------------------------------------
   注意：必須用 `.article-body .fx-*` 兩層選擇器。主題 style.css 裡有
   `.article-body p { padding:5px 0; font-size:13px; word-break:break-all }`，
   單層 `.fx-lead` 鬥不過它，會被吃掉內距並把數字斷行。
   ============================================================================= */
.article-body { font-size: 15px; line-height: 1.88; color: var(--ink-2); }

.article-body h3 {
    margin: 32px 0 12px !important;
    padding: 0 0 0 12px !important;
    border-left: 3px solid var(--amber) !important;
    border-radius: 0;
    font-size: 16.5px !important;
    font-weight: 650 !important;
    line-height: 1.45;
    color: var(--ink) !important;
    background: none !important;
}
.article-body p {
    margin: 0 0 14px !important;
    font-size: 15px !important;
    line-height: 1.88 !important;
    color: var(--ink-2);
    word-break: normal !important;
    overflow-wrap: break-word;
}
.article-body a { color: var(--amber); }

.article-body .fx-fig { margin: 0 0 24px !important; }
.article-body .fx-fig img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 !important;
    border-radius: var(--r-l);
    border: 1px solid var(--hair);
    background: #171515;
}
.article-body .fx-fig figcaption {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ink-4);
    text-align: center;
    line-height: 1.6;
}

.article-body .fx-lead {
    margin: 0 0 10px !important;
    padding: 16px 18px !important;
    background: var(--paper-warm) !important;
    border: 1px solid var(--hair) !important;
    border-left: 3px solid var(--amber) !important;
    border-radius: var(--r-s);
    font-size: 15.5px !important;
    line-height: 1.8 !important;
    color: var(--ink) !important;
    word-break: normal !important;
    overflow-wrap: break-word;
}
.article-body .fx-lead strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.article-body .fx-table-wrap { margin: 0 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article-body .fx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.article-body .fx-table th {
    padding: 9px 12px !important;
    text-align: right !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--ink-3) !important;
    background: var(--paper) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--hair) !important;
    white-space: nowrap;
    word-break: normal !important;
}
.article-body .fx-table td {
    padding: 11px 12px !important;
    text-align: right !important;
    color: var(--ink) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--hair) !important;
    white-space: nowrap;
    word-break: normal !important;
    background: none !important;
}
.article-body .fx-table th:first-child,
.article-body .fx-table td:first-child { text-align: left !important; white-space: normal; }
.article-body .fx-table tr:last-child td { border-bottom: 0 !important; }
.article-body .fx-table td.code { font-weight: 600; }
.article-body .fx-table td.hl { color: var(--amber) !important; font-weight: 700; }
.article-body .fx-table td.dim { color: var(--ink-4) !important; }

.article-body .fx-up { color: var(--up) !important; font-weight: 600; }
.article-body .fx-down { color: var(--down) !important; font-weight: 600; }

.article-body .fx-note {
    margin: 0 0 18px !important;
    padding: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.75 !important;
    color: var(--ink-4) !important;
    word-break: normal !important;
}
.article-body .fx-list {
    margin: 0 0 14px;
    padding-left: 18px !important;
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--ink-2);
}
.article-body .fx-list li { margin-bottom: 8px; }
.article-body .fx-list strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.article-body .fx-disclaimer {
    margin: 28px 0 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid var(--hair);
    font-size: 12px !important;
    line-height: 1.75 !important;
    color: var(--ink-4) !important;
    word-break: normal !important;
}

@media (max-width: 640px) {
    .news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 2px 14px 14px; }
    .news-title { font-size: 12px; line-height: 1.45; }
    .news-main { padding: 8px 9px 10px; gap: 6px; }
    .news-meta { font-size: 10.5px; }
    .news-more { right: 14px; padding: 3px 10px; font-size: 11px; }
    .article-body { font-size: 14.5px; }
    .article-body .fx-lead { font-size: 14.5px !important; padding: 13px 14px !important; }
    .article-body p { font-size: 14.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .news-thumb img,
    .news-title a { transition: none !important; }
    .news-item:hover .news-thumb img { transform: none !important; }
}