/* 汇率页专属样式：全部圈在 .xrp 里，不会碰到主站其它页面 */

  .xrp{
    --navy-900:#0a1628; --navy-800:#13243f; --navy-700:#1a2f52;
    --gold:#c9a227; --gold-2:#d4a853; --gold-600:#b8891f;
    --ink:#14202d; --body:#2e4054; --mute:#4c5e72; --mute2:#6b7c8f;
    --up:#d64545; --down:#0e9f6e;
    --line-gold:rgba(212,168,83,.30);
  }
  .xrp *{box-sizing:border-box;}
  .xrp{margin:0; padding:0;}
  .xrp{
    font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
    background:#f4f6f9; color:var(--body); overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  .xrp a{text-decoration:none; color:inherit;}
  .xrp .num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum";}

  /* ===== Hero ===== */
  .xrp .hero{
    position:relative; overflow:hidden;
    background:linear-gradient(120deg,#0a1628 0%,#13243f 58%,#1a2f52 100%);
    padding:34px 0 76px;
  }
  .xrp .hero::after{
    content:""; position:absolute; right:-120px; top:-120px; width:520px; height:520px;
    background:radial-gradient(circle,rgba(201,162,39,.16),transparent 66%); pointer-events:none;
  }
  .xrp .wrap{max-width:1180px; margin:0 auto; padding:0 22px; position:relative;}
  .xrp .hero-in{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:34px; align-items:start;}
  .xrp .crumb{font-size:12px; color:#a4b3c8; letter-spacing:.3px; margin-bottom:20px;}
  .xrp .crumb i{color:#6a89b0; font-style:normal; margin:0 7px;}
  .xrp .eyebrow{display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:2.2px; color:#9fb2ca; font-weight:700;}
  .xrp .eyebrow em{width:7px; height:7px; border-radius:50%; background:var(--gold-2); box-shadow:0 0 0 3px rgba(212,168,83,.18); font-style:normal;}
  .xrp .hero h1{
    font-family:"Noto Serif SC","Songti SC",serif; font-weight:900;
    font-size:44px; line-height:1.24; color:#fff; letter-spacing:1px; margin:14px 0 0;
  }
  .xrp .hero h1 b{color:var(--gold-2); font-weight:900;}
  .xrp .hero-desc{color:#b9c6d8; font-size:14px; line-height:1.95; margin:14px 0 0; max-width:620px;}
  .xrp .hero-stats{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:24px; font-size:12.5px; color:#a4b3c8;}
  .xrp .hero-stats b{color:#fff; font-weight:700;}
  .xrp .hero-stats em{color:var(--gold-2); font-style:normal; font-weight:700;}

  /* 牌价板 */
  .xrp .board{
    background:linear-gradient(160deg,rgba(19,36,63,.94),rgba(10,22,40,.96));
    border:1px solid rgba(212,168,83,.34); border-radius:14px; padding:18px 18px 14px;
    box-shadow:0 18px 40px rgba(3,9,20,.4);
  }
  .xrp .board-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid rgba(201,162,39,.26);}
  .xrp .board-h b{color:var(--gold-2); font-size:10px; letter-spacing:2.2px; font-weight:700;}
  .xrp .board-h span{color:#8fa2bd; font-size:10.5px;}
  .xrp .brow{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px dashed rgba(201,162,39,.18);}
  .xrp .brow:last-of-type{border-bottom:none;}
  .xrp .brow .flag{flex:none; width:34px; height:22px; border-radius:3px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px rgba(212,168,83,.46); display:flex; align-items:center; justify-content:center;}
  .xrp .brow .flag img{display:block; width:100%; height:100%; object-fit:contain;}
  .xrp .brow .nm{flex:1; min-width:0; color:#e8eef7; font-size:13px; font-weight:500;}
  .xrp .brow .nm i{display:block; color:#9db0c7; font-size:10px; font-style:normal; letter-spacing:1px; margin-top:2px;}
  .xrp .brow .val{text-align:right; color:#fff; font-size:15px; font-weight:700;}
  .xrp .brow .val i{display:block; font-style:normal; font-size:10.5px; margin-top:2px;}
  .xrp .up{color:var(--up);} .down{color:var(--down);}
  .xrp .brow .val i.up{color:#f2777a;}
  .xrp .brow .val i.down{color:#3fd18f;}
  .xrp .brow .val i.flat{color:#8fa2bd;}
  .xrp .board-f{padding-top:10px; color:#9db0c7; font-size:10.5px; line-height:1.6;}

  /* ===== 主体 ===== */
  .xrp .page{padding:0 0 40px;}
  .xrp .stack{display:flex; flex-direction:column; gap:20px; margin-top:-46px;}
  .xrp .card{
    background:#fff; border:1px solid var(--line-gold); border-radius:14px;
    padding:22px 24px; box-shadow:0 10px 26px rgba(16,32,58,.06);
  }
  .xrp .card-h{display:flex; align-items:baseline; gap:10px; margin-bottom:16px; padding-bottom:11px; border-bottom:1px solid rgba(201,162,39,.26);}
  .xrp .card-h .en{flex:none; width:104px; font-size:9.5px; letter-spacing:2.4px; color:var(--gold-600); font-weight:700; white-space:nowrap;}
  .xrp .card-h h2{font-family:"Noto Serif SC","Songti SC",serif; font-size:19px; font-weight:900; color:var(--ink); letter-spacing:.6px; margin:0;}
  .xrp .card-h .more{margin-left:auto; display:inline-flex; align-items:baseline; gap:6px; color:var(--gold-600); font-size:12.5px; font-weight:700; cursor:pointer;}
  .xrp .card-h .sub{color:var(--mute2); font-size:11.5px;}

  /* 换算器 */
  .xrp .ex-grid{display:grid; grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr); align-items:stretch; gap:0;}
  .xrp .ex-cell{border:1px solid rgba(201,162,39,.28); border-radius:11px; background:#fbfcfe; padding:14px 16px 12px;}
  .xrp .ex-cell.to{background:linear-gradient(160deg,#0d1c33,#0a1628); border-color:rgba(212,168,83,.42);}
  .xrp .ex-lb{display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:11px; color:var(--mute2); letter-spacing:.4px;}
  .xrp .ex-lb b{color:var(--gold-600); font-size:10px; letter-spacing:1.6px;}
  .xrp .ex-cell.to .ex-lb{color:#a9b8cb;}
  .xrp .ex-cell.to .ex-lb b{color:var(--gold-2);}
  .xrp .ex-amt{display:flex; align-items:baseline; gap:8px; margin-top:6px;}
  .xrp .ex-amt input{
    flex:1; min-width:0; border:none; background:transparent; outline:none;
    font-family:"Noto Serif SC","Songti SC",serif; font-weight:900; font-size:30px; letter-spacing:.4px;
    color:var(--ink); font-variant-numeric:tabular-nums; padding:0;
  }
  .xrp .ex-cell.to .ex-amt input{color:var(--gold-2);}
  .xrp .ex-amt .cu{flex:none; color:var(--mute2); font-size:12px; font-weight:700; letter-spacing:1px;}
  .xrp .ex-cell.to .ex-amt .cu{color:#b9c6d8;}
  .xrp .ex-sel{margin-top:10px; display:block;}
  .xrp .ex-sel select{
    width:100%; height:40px; border:1px solid rgba(201,162,39,.3); border-radius:8px; background:#fff;
    color:var(--ink); font-size:13px; padding:0 10px; font-family:inherit; cursor:pointer;
  }
  .xrp .ex-cell.to .ex-sel select{background:#12233c; color:#e8eef7; border-color:rgba(212,168,83,.4);}
  .xrp .ex-swap-wrap{display:flex; align-items:center; justify-content:center;}
  .xrp .ex-swap{
    width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
    background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#241a02;
    display:flex; align-items:center; justify-content:center; padding:0;
    box-shadow:0 0 0 6px rgba(201,162,39,.12);
  }
  .xrp .ex-swap:hover{transform:rotate(180deg); transition:transform .35s ease;}
  .xrp .ex-quick{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px;}
  .xrp .ex-quick span{color:var(--mute2); font-size:11.5px; margin-right:2px;}
  .xrp .chip{border:1px solid rgba(201,162,39,.32); background:#fbfcfe; color:var(--body); border-radius:20px; padding:6px 14px; font-size:12px; cursor:pointer; font-variant-numeric:tabular-nums;}
  .xrp .chip:hover{border-color:var(--gold); color:var(--gold-600);}
  .xrp .chip.on{background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#241a02; font-weight:700; border-color:transparent;}
  .xrp .ex-rate{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 18px; margin-top:16px; padding-top:14px; border-top:1px dashed rgba(201,162,39,.26); font-size:12.5px; color:var(--mute);}
  .xrp .ex-rate b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums;}
  .xrp .ex-rate .k{color:var(--gold-600); font-size:10px; letter-spacing:1.6px; font-weight:700;}
  .xrp .ex-rate em{margin-left:auto; color:var(--mute2); font-style:normal; font-size:11.5px;}

  /* 走势 */
  .xrp .trend-top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:6px;}
  .xrp .trend-metrics{display:flex; flex-wrap:wrap; gap:26px;}
  .xrp .tm{min-width:96px;}
  .xrp .tm span{display:block; font-size:11px; color:var(--mute2); letter-spacing:.6px;}
  .xrp .tm b{display:block; margin-top:4px; font-size:19px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; font-family:"Noto Serif SC",serif;}
  .xrp .segs{display:flex; gap:6px; border:1px solid rgba(201,162,39,.28); border-radius:9px; padding:4px; background:#fbfcfe;}
  .xrp .seg{border:none; background:transparent; color:var(--mute); font-size:12px; padding:7px 13px; border-radius:6px; cursor:pointer; font-family:inherit;}
  .xrp .seg.on{background:linear-gradient(135deg,rgba(212,168,83,.96),rgba(201,162,39,.96)); color:#241a02; font-weight:700;}
  .xrp #chart{width:100%; height:280px;}
  .xrp .trend-f{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:8px; padding-top:10px; border-top:1px dashed rgba(201,162,39,.24); font-size:11.5px; color:var(--mute2);}
  .xrp .trend-f b{color:var(--mute); font-weight:600;}


  /* 全部汇率表 */
  .xrp .rt{width:100%; border-collapse:collapse; table-layout:fixed; font-size:13px;}
  .xrp .rt col{}
  .xrp .rt thead th{
    text-align:left; font-weight:700; color:var(--mute2); font-size:11px; letter-spacing:.8px;
    padding:0 0 10px; border-bottom:1px solid rgba(201,162,39,.26);
  }
  .xrp .rt thead th:nth-child(2), .xrp .rt thead th:nth-child(3), .xrp .rt thead th:nth-child(4){text-align:right;}
  .xrp .rt tbody tr{border-bottom:1px dashed rgba(201,162,39,.2); cursor:pointer;}
  .xrp .rt tbody tr:hover{background:#fbfaf4;}
  .xrp .rt tbody td{padding:11px 0; vertical-align:middle;}
  .xrp .rt .cc{display:flex; align-items:center; gap:10px; min-width:0;}
  .xrp .rt .flag{flex:none; width:38px; height:24px; border-radius:3px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px rgba(201,162,39,.30); display:flex; align-items:center; justify-content:center;}
  .xrp .rt .flag img{display:block; width:100%; height:100%; object-fit:contain;}
  .xrp .rt .cc b{display:block; color:var(--ink); font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .xrp .rt .cc i{display:block; color:var(--mute2); font-size:10.5px; font-style:normal; letter-spacing:.8px;}
  .xrp .rt td.v{text-align:right; color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; font-size:13.5px;}
  .xrp .rt td.v small{display:block; color:var(--mute2); font-weight:400; font-size:10.5px; margin-top:2px;}
  .xrp .rt td.d{text-align:right; font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:700;}
  .xrp .rt td.d.flat{color:var(--mute2); font-weight:400;}
  .xrp .rt-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 30px;}
  .xrp .rt-note{margin:14px 0 0; font-size:11.5px; line-height:1.75; color:var(--mute2);}

  /* 费率说明 */
  .xrp .note-card{
    background:#fff; border:1px solid var(--line-gold); border-radius:14px; padding:20px 24px;
  }
  .xrp .note-card h3{font-family:"Noto Serif SC",serif; font-size:15px; color:var(--ink); margin:0 0 10px; font-weight:900;}
  .xrp .note-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
  .xrp .note-grid div{font-size:12px; line-height:1.85; color:var(--mute);}
  .xrp .note-grid b{display:block; color:var(--gold-600); font-size:10px; letter-spacing:1.6px; margin-bottom:4px;}
  .xrp .note-card p{margin:14px 0 0; font-size:12px; line-height:1.9; color:#5a6c7d;}

  /* toast */
  .xrp .toast{
    position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(10px);
    background:linear-gradient(135deg,#13243f,#0a1628); color:#fff; border:1px solid rgba(212,168,83,.42);
    border-radius:10px; padding:11px 18px; font-size:12.5px; opacity:0; pointer-events:none;
    transition:opacity .22s ease, transform .22s ease; z-index:60; box-shadow:0 12px 28px rgba(4,10,20,.4);
  }
  .xrp .toast.on{opacity:1; transform:translateX(-50%) translateY(0);}

  /* 响应式 */
  @media (max-width:900px){
    .xrp .hero-in{grid-template-columns:minmax(0,1fr);}
    .xrp .hero h1{font-size:34px;}
    .xrp .ex-grid{grid-template-columns:minmax(0,1fr); gap:12px;}
    .xrp .ex-swap-wrap{padding:2px 0;}
    .xrp .ex-swap{transform:rotate(90deg);}
    .xrp .ex-swap:hover{transform:rotate(270deg);}
    .xrp .note-grid{grid-template-columns:minmax(0,1fr);}
    .xrp .ft{grid-template-columns:minmax(0,1fr); gap:22px;}
    .xrp .card-h .en{width:86px;}
    .xrp .rt-cols{grid-template-columns:minmax(0,1fr);}
    /* 窄屏不隐藏第二张表：SSR 首屏（脚本未跑）时两张表都要能被爬虫读到，
       JS 接管后会把两栏合并成一张，视觉上仍是单栏。 */
    .xrp .rt thead th:nth-child(1){width:44%;}
    .xrp .rt thead th:nth-child(2){width:32%;}
    .xrp .rt thead th:nth-child(3), .xrp .rt tbody td:nth-child(3){display:none;}
    .xrp .rt thead th:nth-child(4){width:24%;}
  }
  @media (max-width:560px){
        .xrp .wrap{padding:0 14px;}
    .xrp .hd{padding:0 14px; gap:14px;}
    .xrp .nav{display:none;}
    .xrp .card{padding:18px 16px; border-radius:12px;}
    .xrp .hero{padding:26px 0 62px;}
    .xrp .hero h1{font-size:28px; line-height:1.3;}
    .xrp .ex-amt input{font-size:25px;}
    .xrp .trend-metrics{gap:16px;}
    .xrp .tm b{font-size:17px;}
    .xrp #chart{height:230px;}
    .xrp .rt{font-size:12px;}
    .xrp .rt .flag{width:32px; height:20px;}
    .xrp .rt tbody td{padding:9px 0;}
    .xrp .card-h{flex-wrap:wrap; row-gap:6px;}
    .xrp .card-h .en{width:auto;}
    .xrp .hide-sm{display:none;}
    .xrp .eyebrow{letter-spacing:1.4px; font-size:10px; flex-wrap:wrap;}
    .xrp .toast{left:14px; right:14px; transform:translateY(10px); text-align:center;}
    .xrp .toast.on{transform:translateY(0);}
  }