/* ===== reference page (rates / data) ===== */
.sc-page { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.crumbs { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-3); padding:22px 0 6px; flex-wrap:wrap; }
.crumbs a:hover{ color:var(--brand-700); } .crumbs .sep{ opacity:.5; }
.ref-head{ padding:14px 0 28px; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.ref-head h1{ font-size:clamp(30px,4.4vw,46px); letter-spacing:-.03em; }
.ref-head p{ font-size:18px; color:var(--ink-2); margin-top:14px; max-width:600px; }
.upd-pill{ display:inline-flex; align-items:center; gap:9px; background:var(--brand-50); border:1px solid var(--brand-100); color:var(--brand-700); border-radius:var(--r-pill); padding:9px 16px; font-size:13.5px; font-weight:600; }
.upd-pill .dot{ width:8px;height:8px;border-radius:50%;background:var(--brand-500); animation:pulse 2s infinite; }

/* big rate cards */
.rates{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:14px; }
.rate-card{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-sm); position:relative; overflow:hidden; }
.rate-card.lead{ background:var(--brand-900); color:#fff; border-color:var(--brand-900); }
.rc-top{ display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.rc-flag{ width:38px;height:38px;border-radius:10px; display:grid; place-items:center; font-size:20px; flex:none; }
.rc-top b{ font-size:16px; display:block; } .rc-top span{ font-size:12.5px; color:var(--ink-3); }
.rate-card.lead .rc-top span{ color:#9EC4B1; }
.rc-val{ font-family:var(--display); font-weight:700; font-size:40px; letter-spacing:-.03em; line-height:1; }
.rc-val .cur{ font-size:18px; color:var(--ink-3); font-weight:600; }
.rate-card.lead .rc-val .cur{ color:#9EC4B1; }
.rc-change{ margin-top:12px; font-size:14px; display:flex; align-items:center; gap:8px; }
.rc-change .up{ color:var(--up); font-weight:700; } .rc-change .down{ color:var(--down); font-weight:700; }
.rate-card.lead .rc-change .up{ color:#6FE0A6; } .rate-card.lead .rc-change .down{ color:#FF9D86; }
.rc-change .muted{ color:var(--ink-3); } .rate-card.lead .rc-change .muted{ color:#7FA593; }
.spark{ margin-top:18px; height:40px; width:100%; }

/* converter */
.converter{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--sh-md); padding:28px; margin:24px 0 8px; }
.converter h2{ font-size:20px; margin-bottom:4px; }
.converter .sub{ font-size:13.5px; color:var(--ink-3); margin-bottom:22px; }
.conv-row{ display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:end; }
.conv-field{ min-width:0; }
.conv-field label{ font-size:13.5px; font-weight:600; color:var(--ink-2); display:block; margin-bottom:8px; }
.conv-inp{ display:flex; min-width:0; border:1.5px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.conv-inp:focus-within{ border-color:var(--brand-500); }
.conv-inp input{ flex:1; border:none; outline:none; padding:14px 16px; font-family:var(--font); font-size:20px; font-weight:700; color:var(--ink); min-width:0; background:transparent; -moz-appearance:textfield; }
.conv-inp input::-webkit-outer-spin-button,.conv-inp input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.conv-inp select{ border:none; border-left:1px solid var(--line); background:var(--surface-2); padding:0 14px; font-family:var(--font); font-size:15px; font-weight:700; color:var(--ink); outline:none; cursor:pointer; }
.swap-btn{ width:46px;height:46px;border-radius:50%; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; color:var(--brand-600); margin-bottom:2px; transition:all .15s; }
.swap-btn:hover{ background:var(--brand-50); border-color:var(--brand-300); transform:rotate(180deg); }
.conv-note{ font-size:13px; color:var(--ink-3); margin-top:16px; display:flex; align-items:center; gap:8px; }

/* table */
.tbl-wrap{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); margin-bottom:14px; }
.tbl-head{ padding:20px 24px; border-bottom:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.tbl-head h2{ font-size:20px; } .tbl-head .meta{ font-size:13px; color:var(--ink-3); }
.tbl-wrap table{ width:100%; border-collapse:collapse; }
.tbl-wrap th,.tbl-wrap td{ text-align:right; padding:14px 24px; font-size:15px; }
.tbl-wrap th:first-child,.tbl-wrap td:first-child{ text-align:left; }
.tbl-wrap thead th{ font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:700; background:var(--surface-2); }
.tbl-wrap tbody tr{ border-top:1px solid var(--line-2); }
.tbl-wrap tbody tr:hover{ background:var(--brand-50); }
td.cur-cell{ display:flex; align-items:center; gap:10px; font-weight:600; }
td .fl{ width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:14px; background:var(--surface-2); }
.tbl-wrap td b{ font-weight:700; } .delta-up{ color:var(--up); font-weight:600; } .delta-down{ color:var(--down); font-weight:600; }

.prose{ max-width:760px; }
.prose h2{ font-size:clamp(23px,2.8vw,28px); margin:44px 0 14px; letter-spacing:-.02em; }
.prose p{ color:var(--ink-2); margin:0 0 16px; }
.prose b, .prose strong{ color:var(--ink); }
.prose a{ color:var(--brand-700); font-weight:600; border-bottom:1px solid var(--brand-100); }
.prose .callout{ background:var(--brand-50); border-left:3px solid var(--brand-500); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:16px 20px; margin:18px 0; }
.prose .callout b{ color:var(--brand-700); }
.disc-box{ display:flex; gap:16px; background:var(--gold-50); border:1px solid var(--gold-100); border-radius:var(--r); padding:20px 22px; margin:32px 0 16px; }
.disc-box svg{ width:24px;height:24px;color:var(--gold-600);flex:none; }
.disc-box b{ display:block; margin-bottom:4px; } .disc-box p{ font-size:14px; color:var(--ink-2); }
.sources{ font-size:14px; color:var(--ink-3); } .sources a{ color:var(--brand-700); font-weight:600; }

@media (max-width:820px){ .rates{ grid-template-columns:1fr; } .conv-row{ grid-template-columns:1fr; } .swap-btn{ justify-self:center; transform:rotate(90deg); } .swap-btn:hover{ transform:rotate(270deg); } }