@charset "UTF-8";
:root {
  color-scheme: light;
  --paper: #f5f4ee;
  --surface: #fffefa;
  --surface-soft: #f8f8f3;
  --ink: #172c24;
  --muted: #66736b;
  --line: #e2e5dc;
  --green: #214d3c;
  --green-dark: #17392d;
  --sage: #e9f0e8;
  --gold: #b8912f;
  --gold-deep: #8a6a1c;
  --gold-soft: #f7f0dc;
  --gold-tint: #fbf6e8;
  --pending: #806224;
  --pending-bg: #f7f0db;
  --radius: 18px;
  --shadow: 0 12px 36px rgba(28, 46, 36, .055);
  --ease: cubic-bezier(.22, .61, .36, 1);
  font-family: Inter, "Noto Sans Myanmar", Pyidaungsu, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1.55; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: absolute; top: -50px; left: 16px; z-index: 20; padding: 10px 14px; background: var(--green-dark); color: white; border-radius: 8px; }
.skip-link:focus { top: 12px; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity .42s var(--ease), transform .42s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); will-change: auto; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(245, 244, 238, .82);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid rgba(226, 229, 220, .7);
  transition: box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 6px 26px rgba(23, 57, 45, .08); background: rgba(245, 244, 238, .95); border-color: rgba(226, 229, 220, .9); }
.header-inner { min-height: 76px; display: flex; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.brand-logo { width: 43px; height: 43px; flex: 0 0 auto; border: 1px solid rgba(198, 167, 87, .62); border-radius: 50%; object-fit: contain; background: #1c2119; box-shadow: 0 2px 5px rgba(0,0,0,.12); transition: transform .4s var(--ease); }
.brand:hover .brand-logo { transform: scale(1.06) rotate(-3deg); }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { font-size: 15px; letter-spacing: -.02em; }
.brand-copy small { margin-top: 5px; color: var(--muted); font-size: 10px; letter-spacing: .015em; }
.main-nav { display: flex; align-items: center; gap: 25px; margin-left: auto; }
.main-nav a { position: relative; color: #4d5c52; font-size: 12px; font-weight: 650; padding: 4px 0; transition: color .22s var(--ease); }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease); }
.main-nav a:hover { color: var(--green); }
.main-nav a:hover::after { transform: scaleX(1); }
.header-status { display: flex; align-items: center; gap: 8px; min-width: max-content; color: var(--muted); font-size: 10px; }
.status-dot, .eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(198, 167, 87, .16); }
.status-dot.is-ready { background: #2d875c; box-shadow: 0 0 0 3px rgba(45,135,92,.14); }
.status-dot.is-error { background: #b65c4e; box-shadow: 0 0 0 3px rgba(182,92,78,.14); }
.menu-button { display: none; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); padding: 8px 12px; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr); align-items: center; gap: 74px; padding-top: 72px; padding-bottom: 48px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .14em; line-height: 1.5; }
.eyebrow-dot { width: 6px; height: 6px; background: var(--gold); box-shadow: 0 0 0 2px rgba(184, 145, 47, .18); }
.eyebrow-separator { color: #aab0a5; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { margin-bottom: 17px; color: var(--green-dark); font-size: clamp(38px, 5.6vw, 64px); font-weight: 650; letter-spacing: -.065em; line-height: 1; }
h1 em { color: #66816f; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.055em; }
.hero-description { max-width: 500px; margin-bottom: 24px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.button { display: inline-flex; align-items: center; gap: 14px; min-height: 43px; padding: 0 17px; border-radius: 10px; font-size: 12px; font-weight: 700; transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease); }
.button-primary { background: var(--green); color: white; box-shadow: 0 7px 18px rgba(33,77,60,.16); }
.button-primary:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(33,77,60,.22); }
.text-link, .section-link { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-size: 11px; font-weight: 700; transition: gap .28s var(--ease), color .22s var(--ease); }
.text-link:hover, .section-link:hover { gap: 11px; }
.snapshot-card { min-height: 232px; padding: 21px 23px; border: 1px solid #dfe5da; border-radius: var(--radius); background: linear-gradient(140deg, #edf3eb, #fdfcf7 78%); box-shadow: var(--shadow); }
.snapshot-card-top { display: flex; align-items: center; justify-content: space-between; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; width: max-content; padding: 5px 8px; border-radius: 999px; font-size: 8px; font-weight: 800; letter-spacing: .09em; }
.status-pending { color: var(--pending); background: var(--pending-bg); }
.status-ready { color: #226c48; background: #e0f0e4; }
.status-stale { color: #905738; background: #f7e9dd; }
.status-unavailable { color: #7e5c56; background: #f2e8e5; }
.snapshot-clock { color: #718074; font-size: 9px; }
.snapshot-kicker, .panel-kicker { margin: 21px 0 6px; color: #78847a; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.snapshot-time { margin-bottom: 4px; color: var(--green-dark); font-size: 22px; font-weight: 700; letter-spacing: -.04em; }
.snapshot-note { margin-bottom: 16px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.refresh-button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: transparent; color: var(--green); font-size: 10px; font-weight: 750; cursor: pointer; }
.refresh-button:hover { text-decoration: underline; }

/* ---------- Summary cards ---------- */
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; padding-bottom: 35px; }
.summary-grid > .summary-card:nth-child(2) { --reveal-delay: 60ms; }
.summary-grid > .summary-card:nth-child(3) { --reveal-delay: 120ms; }
.summary-card { min-height: 124px; padding: 17px 19px 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 5px 20px rgba(28,46,36,.025); transition: transform .34s var(--ease), box-shadow .34s var(--ease); }
.summary-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(28,46,36,.075); }
.summary-card-featured { background: #eaf1e9; border-color: #dce7dc; }
.summary-card-heading { display: flex; align-items: center; gap: 8px; }
.summary-icon { width: 25px; height: 25px; display: inline-grid; place-items: center; border-radius: 8px; font-size: 14px; font-weight: 800; line-height: 1; }
.icon-green { background: #d7e8d9; }
.icon-sage { background: #edf3eb; }
.icon-gold { background: var(--gold-soft); }
/* Gold mark is a vector so it stays crisp at 25px and matches the site palette exactly. */
.gold-mark { width: 16px; height: 16px; display: block; filter: drop-shadow(0 1px 1px rgba(122, 96, 30, .28)); }
.summary-label { color: #6e7b70; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.summary-value { margin: 13px 0 2px 33px; color: var(--green-dark); font-size: 21px; font-weight: 750; letter-spacing: -.04em; }
.summary-meta { margin: 0 0 0 33px; color: var(--muted); font-size: 9px; }

/* ---------- Sections ---------- */
.content-section { padding-top: 29px; padding-bottom: 28px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 18px; }
.section-heading .eyebrow { margin-bottom: 7px; }
h2 { margin-bottom: 6px; color: var(--green-dark); font-size: clamp(24px, 3vw, 32px); font-weight: 650; letter-spacing: -.05em; line-height: 1.12; }
.section-description { max-width: 670px; margin-bottom: 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.board-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(230px, .75fr); gap: 15px; align-items: stretch; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.fx-panel { overflow: hidden; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 21px 15px; }
.panel-kicker { display: block; margin: 0 0 5px; }
h3 { margin-bottom: 0; color: var(--green-dark); font-size: 17px; font-weight: 700; letter-spacing: -.035em; line-height: 1.25; }
.unit-tag { padding: 5px 8px; border-radius: 7px; background: var(--surface-soft); color: #778077; font-size: 8px; font-weight: 700; white-space: nowrap; }

/* ---------- Rate table ---------- */
.table-scroll { overflow-x: auto; }
.rate-table { width: 100%; border-collapse: collapse; text-align: left; }
.rate-table th { padding: 10px 14px; border-top: 1px solid #edf0e9; border-bottom: 1px solid #e9ece5; color: #7d887f; background: #fbfbf7; font-size: 8px; font-weight: 800; letter-spacing: .09em; white-space: nowrap; }
.rate-table th:first-child, .rate-table td:first-child { padding-left: 21px; }
.rate-table th:last-child, .rate-table td:last-child { padding-right: 21px; }
.rate-table td { padding: 9px 14px; border-bottom: 1px solid #eff1eb; vertical-align: middle; }
.rate-table tbody tr { transition: background .22s var(--ease); }
.rate-table tbody tr:last-child td { border-bottom: 0; }
.rate-table tbody tr:hover { background: #fbfcf8; }
.rate-table .numeric { text-align: right; }
.currency-name { display: flex; align-items: center; gap: 9px; min-width: 128px; }
/* Currency chips now hold a flag emoji, so size them wider than a 3-letter code. */
.currency-code { display: inline-grid; width: 34px; height: 27px; place-items: center; border-radius: 8px; background: var(--sage); font-size: 16px; line-height: 1; }
.currency-text { display: grid; min-width: 0; gap: 1px; }
.fx-history-trigger { display: inline-grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; margin-left: auto; padding: 0; border: 1px solid #e1e7de; border-radius: 7px; background: transparent; color: #76877a; cursor: pointer; }
.fx-history-trigger:hover, .fx-history-trigger:focus-visible { outline: 2px solid rgba(69,113,82,.25); outline-offset: 1px; border-color: #a8bcaa; background: #f0f5ef; color: var(--green); }
.fx-history-trigger svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.currency-text strong { color: #26382e; font-size: 10px; font-weight: 700; }
.currency-text small { color: #849087; font-size: 8px; }
.bank-pair span { display: inline-flex; align-items: center; gap: 3px; color: #7a867d; font-size: 8px; font-weight: 850; letter-spacing: .05em; }
.bank-pair span::first-letter { font-size: 12px; }
.quote-source { min-width: 110px; color: #6f7b72; font-size: 8px; line-height: 1.45; }
.quote-source small { display: block; color: #96a097; font-size: 7px; }
.quote-value { color: #25392e; font-variant-numeric: tabular-nums; font-size: 10px; font-weight: 700; white-space: nowrap; }
.inline-note { display: block; color: #748077; font-size: 7px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cell-state { display: inline-flex; padding: 4px 7px; border-radius: 6px; background: var(--pending-bg); color: #816628; font-size: 8px; font-weight: 750; white-space: nowrap; }
.cell-state.state-stale { color: #905738; background: #f7e9dd; }
.cell-state.state-unavailable { color: #77645f; background: #f1ebe8; }
.cell-state.state-fresh { color: #266c4b; background: #e5f1e5; }
.table-footnote { margin: 0; padding: 12px 21px 14px; border-top: 1px solid #edf0e9; color: #7d887f; font-size: 8px; line-height: 1.6; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.rate-table tbody tr.fx-row-reveal { opacity: 0; transform: translate3d(-22px, 0, 0); transition: opacity .42s var(--ease), transform .42s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.rate-table tbody tr.fx-row-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
.side-stack { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 13px; min-height: 100%; align-content: stretch; }
.side-stack > :nth-child(2) { --reveal-delay: 60ms; }
.side-stack > :nth-child(3) { --reveal-delay: 120ms; }
.latest-news-panel { display: flex; min-height: 260px; flex-direction: column; padding: 17px 18px 14px; overflow: hidden; }
.sidebar-ad-slot { width: 100%; min-height: 92px; margin: 0; padding: 11px 13px; }
.sidebar-ad-slot .sponsor-slot-label { margin-bottom: 5px; }
.sidebar-ad-slot .sponsor-slot-inner { min-height: 50px; }
.sidebar-ad-slot .sponsor-slot-inner p { max-width: 220px; line-height: 1.45; }
.latest-news-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.latest-news-heading .panel-kicker { margin: 0; font-size: 7px; }
.latest-news-heading h3 { margin: 5px 0 0; color: var(--green-dark); font-size: 16px; }
.news-source-pill { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; background: #edf2eb; color: #57705e; font-size: 7px; font-weight: 800; letter-spacing: .06em; }
.news-slide-stage { display: grid; min-height: 154px; flex: 1; align-content: start; padding: 13px 0 12px; }
.news-slide { animation: news-slide-enter .32s var(--ease) both; }
@keyframes news-slide-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.news-slide-meta { display: flex; align-items: center; gap: 6px; color: #89948b; font-size: 7px; font-weight: 650; }
.news-slide-meta time { color: #66746a; }
.news-slide h4 { margin: 7px 0 6px; font-size: 13px; line-height: 1.45; }
.news-slide h4 a { color: var(--green-dark); text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.news-slide h4 a:hover, .news-slide h4 a:focus-visible { text-decoration: underline; }
.news-slide-summary { margin: 0; color: var(--muted); font-size: 8.5px; line-height: 1.65; }
.news-read-link { display: inline-block; margin-top: 8px; color: var(--green); font-size: 8px; font-weight: 750; }
.news-empty { align-self: center; margin: 0; color: #89948b; font-size: 9px; line-height: 1.6; }
.news-carousel-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line); }
.news-counter { color: #869188; font-size: 8px; font-weight: 750; font-variant-numeric: tabular-nums; }
.news-control-buttons { display: flex; gap: 5px; }
.news-control-button { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 1px solid #dfe5dc; border-radius: 8px; background: #fff; color: #52675a; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.news-control-button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.news-control-button:hover:not(:disabled), .news-control-button:focus-visible { outline: none; border-color: #9eb5a2; background: #f0f5ef; transform: translateY(-1px); }
.news-control-button:disabled { cursor: default; opacity: .45; }
.visitor-notes-panel {
  display: flex; min-height: 0; flex-direction: column; padding: 17px 18px 15px; background: linear-gradient(145deg, #edf4ec, #fffefa 82%); border-color: #dce6dc;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.visitor-notes-panel:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(28,46,36,.07); border-color: #d1ddcf; }
.visitor-note-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.visitor-note-top h3 { margin: 4px 0 0; font-size: 16px; }
.visitor-note-top .panel-kicker { margin: 0; }
.visitor-note-icon { display: inline-grid; width: 31px; height: 31px; place-items: center; flex: 0 0 auto; border-radius: 9px; background: #e0ece0; color: var(--green); }
.visitor-note-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.visitor-note-intro { margin: 10px 0 13px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.visitor-note-form { display: grid; gap: 10px; }
.note-name-row { display: flex; align-items: flex-end; gap: 8px; }
.note-name-row > .note-field { flex: 1; min-width: 0; }
.note-avatar-control { position: relative; flex: 0 0 auto; }
.note-avatar-trigger { position: relative; display: grid; width: 40px; height: 40px; place-items: center; padding: 0; overflow: hidden; border: 1px solid #d6e0d5; border-radius: 50%; background: #fff; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.note-avatar-trigger img { display: block; width: 38px; height: 38px; }
.note-avatar-slot { display: grid; width: 100%; height: 100%; place-items: center; }
.note-avatar-slot > img, .note-avatar-slot > svg { display: block; width: 100%; height: 100%; }
.note-avatar-choice .note-avatar-slot { width: 34px; height: 34px; }
.note-avatar-trigger:hover, .note-avatar-trigger:focus-visible, .note-avatar-trigger[aria-expanded="true"] { outline: none; border-color: #779580; box-shadow: 0 0 0 3px rgba(69,113,82,.12); }
.note-avatar-trigger:hover { transform: translateY(-1px); }
.note-avatar-edit { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(27,54,40,.64); color: #fff; opacity: 0; transition: opacity .16s ease; }
.note-avatar-trigger:hover .note-avatar-edit, .note-avatar-trigger:focus-visible .note-avatar-edit, .note-avatar-trigger[aria-expanded="true"] .note-avatar-edit { opacity: 1; }
.note-avatar-edit svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.note-avatar-picker { position: absolute; z-index: 20; top: calc(100% + 7px); left: 0; width: 225px; max-width: min(225px, calc(100vw - 42px)); margin: 0; padding: 10px; border: 1px solid #dce5db; border-radius: 12px; background: #fffefa; box-shadow: 0 12px 28px rgba(28,46,36,.15); }
.note-avatar-picker[hidden] { display: none; }
.note-avatar-picker legend { padding: 0 4px; color: #65736a; font-size: 8px; font-weight: 750; }
.note-avatar-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.note-avatar-choice { position: relative; display: flex; min-width: 0; min-height: 58px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; border: 1px solid #dfe5dc; border-radius: 9px; background: rgba(255,255,255,.66); color: #66736b; font-size: 7px; font-weight: 700; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.note-avatar-choice:hover { transform: translateY(-1px); border-color: #a8bcaa; }
.note-avatar-choice:has(input:checked) { border-color: #6f967a; background: #edf5ed; color: #2d5941; box-shadow: 0 0 0 2px rgba(69,113,82,.08); }
.note-avatar-choice input { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; margin: 0; accent-color: var(--green); }
.note-avatar-choice input:focus-visible { outline: 2px solid #779580; outline-offset: 2px; }
.note-avatar-choice img { display: block; width: 34px; height: 34px; }
.note-avatar-choice span { line-height: 1.2; }
.note-field { display: grid; gap: 5px; color: #65736a; font-size: 8px; font-weight: 750; }
.note-field > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.note-field small { color: #929b92; font-size: 7px; font-weight: 550; }
.note-field input, .note-field textarea {
  width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #dfe5dc; border-radius: 9px;
  background: rgba(255,255,255,.82); color: var(--ink); font: inherit; font-size: 10px; font-weight: 500;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.note-field input { min-height: 36px; }
.note-field textarea { min-height: 76px; resize: vertical; line-height: 1.55; }
.note-field input:focus-visible, .note-field textarea:focus-visible { outline: none; border-color: #779580; box-shadow: 0 0 0 3px rgba(69,113,82,.12); }
.note-consent { display: flex; align-items: flex-start; gap: 7px; color: #6e7a71; font-size: 8px; line-height: 1.5; cursor: pointer; }
.note-consent input { width: 13px; height: 13px; margin: 1px 0 0; accent-color: var(--green); flex: 0 0 auto; }
.note-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.note-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 37px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--green); color: white; font-size: 9px; font-weight: 750; cursor: pointer; transition: transform .18s var(--ease), background .18s var(--ease), opacity .18s ease; }
.note-submit:hover:not(:disabled) { transform: translateY(-1px); background: var(--green-dark); }
.note-submit:disabled { cursor: wait; opacity: .62; }
.visitor-note-status { min-height: 0; margin: 0; color: #5d6d62; font-size: 8px; line-height: 1.5; }
.visitor-note-status:empty { display: none; }
.visitor-note-status[data-state="error"] { color: #a5463d; }
.visitor-note-status[data-state="success"] { color: #2f6b3c; }
.visitor-note-list-wrap { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(90,112,94,.16); }
.visitor-note-list-wrap > .panel-kicker { margin: 0 0 8px; font-size: 7px; }
.visitor-note-list { display: grid; min-height: 0; flex: 1 1 auto; max-height: 280px; gap: 9px; overflow-y: auto; padding-right: 4px; perspective: 900px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c5d1c4 transparent; }
.visitor-note-item { padding: 0 0 9px; border-bottom: 1px solid #e8ece5; }
.visitor-note-item.note-page-flip { opacity: 0; transform: perspective(900px) rotateY(-58deg) translateX(-8px); transform-origin: left center; backface-visibility: hidden; transition: opacity .48s var(--ease), transform .58s cubic-bezier(.2,.75,.25,1); }
.visitor-note-item.note-page-flip.is-visible { opacity: 1; transform: perspective(900px) rotateY(0) translateX(0); }
.visitor-note-item:last-child { padding-bottom: 0; border-bottom: 0; }
.visitor-note-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.visitor-note-avatar { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; }
.visitor-note-meta { display: flex; min-width: 0; flex: 1; align-items: baseline; justify-content: space-between; gap: 8px; color: #89948b; font-size: 7px; }
.visitor-note-meta > span { overflow: hidden; color: #617166; font-size: 8px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.visitor-note-message { margin: 0; color: #3e5045; font-size: 9px; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.visitor-note-empty { margin: 0; color: #89948b; font-size: 8px; line-height: 1.55; }
.visitor-note-foot { margin: 11px 0 0; color: #879188; font-size: 7px; line-height: 1.5; }
.rate-guide-inline { display: block; margin-top: 5px; color: #758178; }
.rate-guide-inline strong { color: var(--green-dark); font-weight: 750; }

/* ---------- Gold ---------- */
.gold-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; }
/* The gold section heading carries the accent so the section announces itself. */
#gold .eyebrow { color: var(--gold-deep); }
#gold .eyebrow::before { background: var(--gold); }
.gold-panel { min-height: 204px; padding-bottom: 17px; transition: transform .34s var(--ease), box-shadow .34s var(--ease); }
.gold-panel:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(28,46,36,.08); }
.gold-world { background: #f1f5ef; }
/* The local-gold card is the page's signature panel: gold paper, gold hairline. */
.gold-local { background: linear-gradient(168deg, var(--gold-tint), #fdfaf2 62%); }
.gold-local { box-shadow: inset 0 2px 0 var(--gold), 0 12px 30px rgba(138, 106, 28, .07); }
.gold-local:hover { box-shadow: inset 0 2px 0 var(--gold), 0 18px 40px rgba(138, 106, 28, .12); }
.gold-local .gold-icon { background: #f3e8c8; color: var(--gold-deep); }
.gold-icon { display: inline-grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--gold-soft); color: #947a38; }
.large-pending { margin: 7px 21px 0; color: var(--green-dark); font-size: 33px; font-weight: 750; letter-spacing: -.06em; }
.unit-caption { margin: 0 21px 16px; color: #738076; font-size: 9px; }
.quote-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 0 21px; padding-top: 11px; border-top: 1px solid rgba(90,112,94,.16); color: #748077; font-size: 8px; }
.gold-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding: 8px 21px 15px; }
.gold-pair > div { display: grid; gap: 6px; padding: 12px; border: 1px solid #eceee7; border-radius: 11px; background: #fbfbf7; }
.gold-pair span { color: #77847a; font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.gold-pair strong { color: var(--gold-deep); font-size: 18px; font-weight: 750; letter-spacing: -.04em; }
.local-gold-meta { margin-top: 0; }
.small-note { margin: 12px 21px 0; color: #7a867d; font-size: 8px; line-height: 1.6; }

/* ---------- Converter ---------- */
.converter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.converter-panel { padding-bottom: 19px; }
.converter-form { display: grid; gap: 13px; padding: 0 21px; }
.field { display: grid; gap: 5px; min-width: 0; }
.field > span { color: #77847a; font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.field input, .field select {
  width: 100%; min-height: 42px; padding: 0 12px;
  border: 1px solid #dfe3d9; border-radius: 10px;
  background: #fbfbf7; color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: border-color .24s var(--ease), box-shadow .24s var(--ease), background .24s var(--ease);
}
.field input:focus, .field select:focus { outline: none; border-color: #a8bda9; background: var(--surface); box-shadow: 0 0 0 3px rgba(33,77,60,.09); }
.field-row { display: flex; align-items: end; gap: 10px; }
.field-row .field { flex: 1; }
.swap-button { flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid #dfe3d9; border-radius: 10px; background: var(--sage); color: var(--green); font-size: 15px; cursor: pointer; transition: background .24s ease; }
.swap-button:hover { background: #dce9dd; }
.swap-button:focus-visible { outline: 2px solid rgba(69,113,82,.28); outline-offset: 2px; }
.converter-result { padding: 14px; border: 1px solid #e4e9df; border-radius: 13px; background: linear-gradient(140deg, #eef3ec, #fdfcf7 82%); }
.converter-value { margin-bottom: 3px; color: var(--green-dark); font-size: 24px; font-weight: 750; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.converter-meta { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }

/* ---------- Crypto market ---------- */
.crypto-section { border-top: 1px solid #e0e4dc; }
.crypto-panel { overflow: hidden; }
.crypto-meta { display: flex; justify-content: space-between; gap: 12px; padding: 0 21px 12px; color: #7b877e; font-size: 8px; }
.crypto-coin-name { display: flex; align-items: center; gap: 8px; min-width: 132px; }
.crypto-symbol { display: inline-grid; min-width: 44px; height: 28px; place-items: center; padding: 0 7px; border-radius: 8px; background: #e7ede6; color: #315341; font-size: 9px; font-weight: 850; letter-spacing: .04em; }
/* The coin's own logo sits in a fixed round holder, with the ticker hidden
   behind it so the mark always has the same footprint and a missing file
   leaves the readable symbol rather than a broken image. */
.crypto-logo-wrap { position: relative; display: inline-grid; width: 28px; height: 28px; place-items: center; flex: 0 0 28px; }
.crypto-logo { width: 28px; height: 28px; border-radius: 50%; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px #dfe5dc; }
/* The ticker sits behind the logo and takes its place if the mark is missing. */
.crypto-symbol-fallback { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.crypto-logo-wrap.is-fallback .crypto-logo { display: none; }
.crypto-logo-wrap.is-fallback .crypto-symbol-fallback { opacity: 1; }
.crypto-market-cap { color: #53645a; font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crypto-chart-trigger { display: inline-grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 1px solid #dfe5dc; border-radius: 8px; background: #fff; color: #557360; cursor: pointer; transition: background .16s ease, border-color .16s ease; }
.crypto-chart-trigger:hover, .crypto-chart-trigger:focus-visible { outline: none; border-color: #9eb5a2; background: #f0f5ef; }
.crypto-chart-trigger svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.crypto-chart-toolbar { display: flex; gap: 6px; margin: 4px 0 12px; }
.crypto-range-button { min-width: 48px; height: 30px; padding: 0 10px; border: 1px solid #dfe5dc; border-radius: 8px; background: #fff; color: #607067; font-size: 9px; font-weight: 800; cursor: pointer; }
.crypto-range-button:hover, .crypto-range-button:focus-visible { outline: none; border-color: #9eb5a2; background: #f0f5ef; }
.crypto-range-button.is-active { border-color: var(--green); background: var(--green); color: #fff; }
.crypto-chart-wrap { padding: 12px; border: 1px solid #e2e6de; border-radius: 13px; background: #fbfcf8; }
.crypto-chart { width: 100%; min-height: 300px; overflow-x: auto; }
.crypto-chart svg { display: block; width: 100%; min-width: 620px; height: 300px; }
.crypto-chart-range { display: flex; justify-content: space-between; gap: 8px; padding-top: 7px; color: #7e897f; font-size: 9px; font-variant-numeric: tabular-nums; }
.gold-history-note { margin: 12px 0 0; color: #7d887f; font-size: 9px; line-height: 1.55; }

/* ---------- Essentials ---------- */
.essentials-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.essential-card { min-height: 112px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: transform .34s var(--ease), box-shadow .34s var(--ease); }
.essential-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(28,46,36,.07); }
.essential-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.essential-card h3 { font-size: 12px; }
.essential-card .status-pill { font-size: 7px; }
.essential-value { margin: 0 0 4px; color: var(--green-dark); font-size: 15px; font-weight: 750; }
.essential-meta { margin: 0; color: #7b877e; font-size: 8px; line-height: 1.5; }

/* ---------- FAQ ---------- */
.faq-section { padding-bottom: 46px; }
.faq-list { display: grid; gap: 8px; max-width: 820px; }
.faq-item { border: 1px solid var(--line); border-radius: 13px; background: var(--surface); overflow: hidden; transition: border-color .28s var(--ease), box-shadow .28s var(--ease); }
.faq-item[open] { border-color: #d3ded4; box-shadow: 0 8px 24px rgba(28,46,36,.055); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 17px; cursor: pointer; list-style: none; color: var(--green-dark); font-size: 13px; font-weight: 650; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--gold); font-size: 17px; font-weight: 500; transition: transform .32s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0; padding: 0 17px 15px; color: var(--muted); font-size: 11px; line-height: 1.8; }

/* ---------- Sponsor ---------- */
.sponsor-slot { margin-top: 10px; margin-bottom: 22px; padding: 13px 15px 14px; border: 1px dashed #d6d9cf; border-radius: 15px; background: #f1f0e9; }
.sponsor-slot-label { margin-bottom: 9px; color: #8a8574; font-size: 7px; font-weight: 850; letter-spacing: .14em; }
.sponsor-slot-inner { display: flex; align-items: center; gap: 11px; min-height: 54px; }
.sponsor-mark { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; background: #e7e1c9; color: #806d35; font-size: 13px; }
.sponsor-slot-inner strong { color: #4a554b; font-size: 10px; }
.sponsor-slot-inner p { margin: 1px 0 0; color: #7f897f; font-size: 8px; }
.sponsor-coming { margin-left: auto; color: #8d8d80; font-size: 7px; font-weight: 800; letter-spacing: .1em; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: #f0efe8; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.4fr); gap: 40px; padding-top: 44px; padding-bottom: 32px; }
.footer-brand-block .brand { margin-bottom: 13px; }
.footer-tagline { max-width: 380px; margin-bottom: 17px; color: #6f7b72; font-size: 10px; line-height: 1.75; }
.social-links { display: flex; flex-wrap: wrap; gap: 8px; }
.social-link { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 10px; border: 1px solid #dcdcd0; border-radius: 999px; background: #f7f7f1; color: #3d4c42; font-size: 10px; font-weight: 700; transition: transform .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease); }
.social-link:hover { transform: translateY(-2px); background: var(--surface); border-color: #c9cec2; box-shadow: 0 8px 18px rgba(28,46,36,.08); }
.social-logo { width: 17px; height: 17px; flex: 0 0 auto; display: block; }
.social-youtube:hover { border-color: #FF0000; }
.social-tiktok:hover { border-color: #FE2C55; }
.social-telegram:hover { border-color: #29A9EB; }
.footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-col { display: grid; gap: 9px; align-content: start; }
.footer-col h4 { margin: 0 0 3px; color: var(--green-dark); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.footer-col a { color: #6f7b72; font-size: 10px; transition: color .22s var(--ease), padding-left .22s var(--ease); }
.footer-col a:hover { color: var(--green); padding-left: 3px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 17px; padding-bottom: 20px; border-top: 1px solid #e2e1d7; }
.footer-bottom p { margin: 0; color: #83897f; font-size: 8px; }
.footer-locale { color: #9aa096 !important; }

/* ---------- Official & bank rates ---------- */
.official-section {
  margin-top: 8px;
  padding-top: 34px;
  border-top: 2px solid #d3d8ce;
}
.eyebrow-official { color: #5c6b62; }
.eyebrow-official .eyebrow-dot { background: #7f8c83; }
.official-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 14px; align-items: start; }
.official-grid-single { grid-template-columns: minmax(0, 1fr); }
.bank-pairs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.bank-pair {
  display: inline-flex; align-items: baseline; gap: 4px; padding: 5px 9px;
  border: 1px solid #dde2d8; border-radius: 8px; background: #fbfbf7;
}
.bank-pair span { display: inline-flex; align-items: center; gap: 3px; color: #7a867d; font-size: 12px; font-weight: 700; letter-spacing: 0; }
.bank-pair b { color: #2f3d34; font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 750; }
.bank-pair i { color: #a4aca4; font-size: 9px; font-style: normal; }
.bank-pair.is-empty { background: #f1f2ee; border-style: dashed; }
.bank-pair.is-empty b { color: #8b938b; font-size: 9px; font-weight: 600; }
.bank-table tbody tr.is-pending .currency-code { background: #e4e7e0; color: #7d857d; }
@media (max-width: 640px) {
  .currency-code { width: 30px; height: 24px; font-size: 14px; }
  .bank-code { width: 36px; font-size: 8px; }
}
.official-cbm, .official-banks { background: #f2f3ef; border-color: #d8ddd3; }
.official-cbm .panel-heading, .official-banks .panel-heading { background: #eceee9; border-radius: var(--radius) var(--radius) 0 0; }
.official-rates { display: grid; padding: 4px 21px 12px; }
.official-rate {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "code name value" "code time time";
  align-items: center; gap: 2px 11px; padding: 9px 0; border-bottom: 1px solid #e0e4db;
}
.official-rate:last-child { border-bottom: 0; }
.official-code {
  grid-area: code; display: inline-grid; width: 44px; height: 25px; place-items: center;
  border-radius: 6px; background: #dfe3da; color: #4d5b52; font-size: 8px; font-weight: 850;
}
.official-name { grid-area: name; color: #5c6b62; font-size: 10px; font-weight: 600; }
.official-value { grid-area: value; color: #2f3d34; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 750; letter-spacing: -.03em; }
.official-time { grid-area: time; color: #8d968e; font-size: 7px; }
.official-banks .table-scroll { border-radius: 0 0 var(--radius) var(--radius); }
.bank-code { width: 40px; height: 27px; background: #e2e6dd; color: #56645b; font-size: 9px; font-weight: 850; }
.bank-table tbody tr:hover { background: #eef0eb; }
.official-foot { margin: 0; padding: 11px 21px 14px; border-top: 1px solid #e0e4db; color: #78827a; font-size: 8px; line-height: 1.6; }
.official-cbm .official-foot { border-top: 0; }
.official-disclaimer {
  margin: 13px 0 0; padding: 11px 15px; border-radius: 11px;
  background: #eceee9; border: 1px solid #d8ddd3;
  color: #5c6b62; font-size: 9px; line-height: 1.65;
}

/* ---------- Legal pages ---------- */
.legal-page { max-width: 760px; padding-top: 52px; padding-bottom: 72px; }
.legal-page h1 { font-size: clamp(30px, 4.4vw, 44px); margin-bottom: 8px; }
.legal-updated { margin-bottom: 30px; color: var(--muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.legal-page h2 { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 19px; }
.legal-page p { color: #4a574e; font-size: 13px; line-height: 1.85; }
.legal-page ul { display: grid; gap: 8px; margin: 0 0 6px; padding-left: 20px; }
.legal-page li { color: #4a574e; font-size: 13px; line-height: 1.8; }
.legal-page strong { color: var(--green-dark); }
.legal-page a { color: var(--green); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.legal-page a:hover { color: var(--green-dark); }
.legal-page h3 { margin-top: 22px; font-size: 15px; color: var(--green); }
.legal-page code {
  padding: 2px 6px; border-radius: 5px;
  background: #eef1ea; color: #3f5046;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
}
.note-block {
  margin: 14px 0; padding: 12px 15px;
  border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0;
  background: #f5f2e8; color: #5c5a45; font-size: 12px; line-height: 1.75;
}

/* ---------- Publish history strip (inside the status card) ---------- */
.snapshot-history { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }
.history-dot {
  position: relative; width: 18px; height: 18px; border: 0; border-radius: 6px;
  background: #e7ebe3; cursor: pointer; padding: 0;
  transition: transform .16s ease, background .16s ease;
}
.history-dot:hover, .history-dot:focus-visible { transform: scale(1.12); background: #d8ded3; }
.history-dot.is-latest { background: var(--green); }
.history-dot.is-latest::after {
  content: ""; position: absolute; inset: -3px; border-radius: 8px;
  border: 1px solid rgba(43, 74, 56, .35);
}
.history-dot time {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  padding: 4px 8px; border-radius: 6px; background: #2f3d34; color: #f2f4ee;
  font-size: 8px; font-weight: 650; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .16s ease; z-index: 3;
}
.history-dot:hover time, .history-dot:focus-visible time { opacity: 1; }
.snapshot-history:empty { display: none; }

/* ---------- Audience block: live visitors + followers, inside the status card ---------- */
.status-divider { height: 1px; margin: 15px 0 13px; background: var(--line); }
.audience { display: grid; gap: 13px; }

/* Three audience figures stay in the update card: online, daily visits and all-time unique browsers. */
.audience-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px; background: var(--line);
}
.audience-stat {
  position: relative; display: grid; gap: 1px; justify-items: center;
  padding: 9px 6px 8px; background: #fbfcf9; text-align: center;
}
.audience-stat-value {
  margin: 0; color: var(--green-dark);
  font-size: 17px; font-weight: 750; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.audience-stat-label {
  margin: 0; color: #8b958d; font-size: 7.5px; font-weight: 650;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1.2;
}
/* The live figure is the only one tinted, so it reads as "now" at a glance. */
.audience-stat-live { background: #f2f7f1; }
.audience-stat-live .audience-stat-value { color: #2f6b3c; }
.audience-live-dot {
  position: absolute; top: 8px; left: 50%; margin-left: -19px;
  width: 5px; height: 5px; border-radius: 50%; background: #3f8f52;
  animation: audience-breathe 2.6s ease-in-out infinite;
}
@keyframes audience-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63,143,82,.45); }
  50% { box-shadow: 0 0 0 4px rgba(63,143,82,0); }
}
/* A value that changes gets one brief accent so the eye notices without a layout shift. */
.audience-stat-value.is-bumped { animation: audience-bump .5s ease-out; }
@keyframes audience-bump {
  0% { transform: translateY(3px); opacity: .35; }
  60% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
/* Count-up: only the digits move, so the card never changes size. */
.audience-stat-value.is-counting { animation: audience-count .5s cubic-bezier(.2,.7,.3,1); }
@keyframes audience-count {
  from { opacity: .3; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Channel chips, shared by the audience block and the footer. */
.presence-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: #55635a; font-size: 10px; font-weight: 650;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.presence-chip .social-logo { width: 14px; height: 14px; }
.presence-chip:hover { transform: translateY(-2px); border-color: #ccd4c8; box-shadow: 0 6px 14px rgba(28,46,36,.08); }
.presence-chip-telegram .social-logo { color: #29a9eb; }
.presence-chip-youtube .social-logo { color: #ff0000; }
.presence-chip-tiktok .social-logo { color: #fe2c55; }
.presence-followers {
  padding: 1px 6px; border-radius: 999px; background: #eef1eb;
  color: #55635a; font-size: 9px; font-weight: 750; font-variant-numeric: tabular-nums;
}
.presence-followers[data-unavailable="true"] { background: none; color: #a9b1a9; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .audience-live-dot { animation: none !important; }
  .audience-stat-value.is-bumped,
  .audience-stat-value.is-counting { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .container { width: min(100% - 34px, 720px); }
  .header-inner { gap: 15px; }
  .main-nav { gap: 14px; }
  .main-nav a { font-size: 10px; }
  .header-status { display: none; }
  .hero { gap: 28px; padding-top: 54px; }
  .board-grid { grid-template-columns: minmax(0, 1.5fr) minmax(190px, .75fr); }
  .official-grid { grid-template-columns: minmax(0, 1fr); }
  .essentials-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 640px) {
  body { font-size: 14px; }
  .container { width: calc(100% - 28px); }
  .header-inner { min-height: 66px; flex-wrap: wrap; }
  .brand-logo { width: 39px; height: 39px; }
  .brand-copy strong { font-size: 14px; }
  .brand-copy small { font-size: 9px; }
  .menu-button { display: inline-flex; margin-left: auto; }
  .main-nav { display: none; order: 5; width: 100%; margin: 0; padding: 0 0 13px; flex-wrap: wrap; gap: 11px 18px; }
  .main-nav.is-open { display: flex; }
  .main-nav a { font-size: 11px; }
  .hero { grid-template-columns: 1fr; gap: 25px; padding-top: 38px; padding-bottom: 26px; }
  h1 { font-size: clamp(36px, 11.5vw, 50px); }
  .hero-description { max-width: 100%; font-size: 12.5px; line-height: 1.85; }
  .hero-actions { gap: 15px; }
  .button { min-height: 42px; }
  .snapshot-card { min-height: 0; padding: 17px; }
  .snapshot-kicker { margin-top: 16px; }
  .snapshot-time { font-size: 19px; }
  .summary-grid { grid-template-columns: 1fr; gap: 8px; padding-bottom: 20px; }
  .summary-card { min-height: 98px; padding: 13px 15px; }
  .summary-value { margin-top: 9px; font-size: 18px; }
  .content-section { padding-top: 23px; padding-bottom: 20px; }
  .section-heading { align-items: start; flex-direction: column; margin-bottom: 13px; }
  h2 { font-size: 25px; }
  .section-description { font-size: 10px; }
  .board-grid, .gold-grid, .converter-grid { grid-template-columns: 1fr; }
  .side-stack { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: 0; }
  .visitor-note-list { max-height: 190px; }
  .audience-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panel-heading { padding: 16px 15px 13px; }
  .rate-table { min-width: 540px; }
  .rate-table th:first-child, .rate-table td:first-child { padding-left: 15px; }
  .rate-table th:last-child, .rate-table td:last-child { padding-right: 15px; }
  .rate-table th, .rate-table td { padding-inline: 10px; }
  .crypto-table { min-width: 660px; }
  .crypto-meta { padding-inline: 15px; }
  .crypto-chart { min-height: 230px; }
  .crypto-chart svg { min-width: 560px; height: 230px; }
  .crypto-chart-wrap { padding: 8px; }
  .table-footnote { padding: 11px 15px; }
  .gold-panel { min-height: 0; }
  .gold-pair, .converter-form { padding-inline: 15px; }
  .quote-meta { margin-inline: 15px; }
  .small-note { margin-inline: 15px; }
  .large-pending { margin-inline: 15px; font-size: 29px; }
  .unit-caption { margin-inline: 15px; }
  .purity-table, .gold-grade-table, .gold-change, .purity-note { margin-inline: 15px; }
  .field-row { flex-wrap: wrap; }
  .swap-button { order: 3; width: 100%; height: 36px; }
  .converter-value { font-size: 20px; }
  .sponsor-slot { margin-top: 7px; margin-bottom: 12px; padding: 11px; }
  .sponsor-coming { display: none; }
  .essentials-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .essential-card { min-height: 104px; padding: 11px; }
  .essential-card h3 { font-size: 11px; }
  .official-rates { padding-inline: 15px; }
  .official-rate { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 2px 9px; padding: 8px 0; }
  .official-code { width: 40px; height: 23px; font-size: 7px; }
  .official-name { font-size: 9px; }
  .official-value { font-size: 12px; }
  .official-cbm .panel-heading, .official-banks .panel-heading { padding: 15px 15px 12px; }
  .official-foot { padding: 10px 15px 12px; }
  .official-disclaimer { padding: 10px 12px; font-size: 8.5px; }
  .footer-nav { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 7px; }
  .legal-page { padding-top: 34px; padding-bottom: 48px; }
  .legal-page p, .legal-page li { font-size: 12px; line-height: 1.8; }
  .legal-page h2 { margin-top: 26px; padding-top: 18px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
}
/* Timestamp row: the update time with a compact refresh control on the right. */
.snapshot-when { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.snapshot-when .snapshot-time { margin: 0; }
.snapshot-when .refresh-button {
  flex: none; width: 26px; height: 26px; padding: 0; margin: 0;
  display: inline-grid; place-items: center; border-radius: 8px;
  font-size: 13px; line-height: 1; white-space: nowrap;
}
.snapshot-when .refresh-button.is-busy span { animation: refresh-spin .9s linear infinite; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }

/* 21 currencies: keep the table scrollable on small screens instead of a very long page.
   The sticky header stays visible so a row is never read without its column labels. */
@media (max-width: 720px) {
  .fx-panel .table-scroll { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .fx-panel thead th { position: sticky; top: 0; z-index: 2; background: #f4f6f1; }
}

/* ---------- Change column, purity table, gold grade table ---------- */
/* A small signed pill beside each price. Green means the currency costs more than
   yesterday, red means less: for an exchange rate, a higher MMK price is a weaker kyat. */
.change-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 999px;
  font-size: 9px; font-weight: 750; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.change-pill.up { background: #eaf3ea; color: #2f6b3c; }
.change-pill.down { background: #fbeceb; color: #a5463d; }
.change-pill.flat { background: #f0f1ec; color: #8b938b; }
.change-pill.is-empty { background: none; color: #aab2aa; font-weight: 600; }
.change-note { color: #aab2aa; font-size: 9px; }

/* SetLive-inspired gold rows: readable prices, visible source and a clear history affordance. */
.gold-unit-list { margin: 13px 21px 0; border: 1px solid #dfe5dc; border-radius: 12px; overflow: hidden; }
.gold-unit-row {
  width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto auto 14px;
  gap: 12px; align-items: center; padding: 11px 13px; border: 0;
  border-bottom: 1px solid #e4e8e1; background: transparent; color: var(--ink);
  text-align: left; font: inherit; cursor: pointer;
}
.gold-unit-row:last-child { border-bottom: 0; }
.gold-unit-row:hover, .gold-unit-row:focus-visible, .gold-grade-row.gold-history-trigger:hover,
.gold-grade-row.gold-history-trigger:focus-visible { background: rgba(33,77,60,.055); outline: none; }
.gold-unit-row > span:first-child { font-size: 11px; font-weight: 650; }
.gold-unit-row small, .gold-grade-row small { display: block; margin-top: 2px; color: #849087; font-size: 8px; font-weight: 500; }
.gold-unit-row strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.gold-row-change { color: #2f8a5a; font-size: 9px; font-weight: 700; white-space: nowrap; }
.gold-row-change.is-down { color: #c24f45; }
.gold-row-chevron { color: #849087; font-size: 18px; font-weight: 400; text-align: right; }

.gold-grade-table { margin: 13px 21px 0; border: 1px solid #e6e2d5; border-radius: 12px; overflow: hidden; }
.gold-grade-row {
  width: 100%; display: grid; grid-template-columns: minmax(90px,1fr) minmax(78px,auto) minmax(78px,auto) 14px;
  gap: 9px; align-items: center; padding: 10px 11px; border: 0; border-bottom: 1px solid #ece8dc;
  background: transparent; color: #4a3f1e; font: inherit; font-size: 10px;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.gold-grade-row:last-child { border-bottom: 0; }
.gold-grade-row > span:first-child { color: #6b5c30; font-weight: 650; min-width: 0; text-align: left; }
.gold-grade-row strong { text-align: right; white-space: nowrap; font-size: 10.5px; }
.gold-grade-head { background: rgba(184,145,47,.07); color: #8b7d4a; font-size: 7px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.gold-grade-head span:not(:first-child) { text-align: right; white-space: nowrap; }
.gold-grade-head span:last-child { visibility: hidden; }
.gold-grade-row.gold-history-trigger { cursor: pointer; }
.local-gold-meta { margin-top: 12px; }
.gold-change { margin: 9px 21px 0; color: #8b7d4a; font-size: 10px; font-weight: 650; }
.gold-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding: 8px 21px 15px; }
.gold-pair > div { display: grid; gap: 6px; padding: 12px; border: 1px solid #eceee7; border-radius: 11px; background: #fbfbf7; }
.gold-pair span { color: #77847a; font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.gold-pair strong { color: var(--gold-deep); font-size: 18px; font-weight: 750; letter-spacing: -.04em; }

.gold-history-dialog { width: min(720px, calc(100vw - 28px)); max-width: 720px; max-height: min(86vh, 900px); padding: 0; border: 1px solid #d9ded5; border-radius: 18px; background: #fffefb; color: var(--ink); box-shadow: 0 24px 70px rgba(18,30,22,.28); }
.gold-history-dialog::backdrop { background: rgba(18,25,20,.48); backdrop-filter: blur(3px); }
.gold-history-shell { padding: 22px; }
.gold-history-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.gold-history-heading .panel-kicker { margin: 0 0 5px; color: var(--gold-deep); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.gold-history-heading h2 { margin: 0; color: var(--green-dark); font-size: 21px; }
.gold-history-close { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 22px; cursor: pointer; }
.gold-history-status { margin: 17px 0; color: var(--muted); font-size: 11px; }
.gold-history-chart-wrap { margin-top: 18px; padding: 14px; border: 1px solid #e2e6de; border-radius: 13px; background: #fbfcf8; }
.gold-history-chart { width: 100%; min-height: 142px; }
.gold-history-chart svg { display: block; width: 100%; height: 142px; overflow: visible; }
.gold-history-range { display: flex; justify-content: space-between; gap: 8px; color: #7e897f; font-size: 9px; font-variant-numeric: tabular-nums; }
.gold-history-table-wrap { max-height: 42vh; margin-top: 16px; overflow: auto; border: 1px solid #e2e6de; border-radius: 12px; }
.gold-history-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.gold-history-table th, .gold-history-table td { padding: 10px 12px; border-bottom: 1px solid #edf0ea; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gold-history-table th:first-child, .gold-history-table td:first-child { text-align: left; }
.gold-history-table thead { position: sticky; top: 0; background: #f4f6f1; color: #69776c; font-size: 8px; text-transform: uppercase; }
.gold-history-table tbody tr:last-child td { border-bottom: 0; }
.history-source-label { display: block; margin-top: 2px; color: #89948b; font-size: 8px; font-weight: 500; text-transform: none; }

@media (max-width: 560px) {
  .gold-unit-list, .gold-grade-table { margin-inline: 15px; }
  .gold-unit-row { grid-template-columns: minmax(0,1fr) auto auto 12px; gap: 7px; padding: 10px; }
  .gold-unit-row strong { font-size: 11px; }
  .gold-row-change { font-size: 8px; }
  .gold-grade-row { grid-template-columns: minmax(78px,1fr) minmax(70px,auto) minmax(70px,auto) 10px; gap: 5px; padding: 9px 7px; }
  .gold-grade-row strong { font-size: 9px; }
  .gold-grade-row > span:first-child { font-size: 9px; }
  .gold-grade-head { font-size: 6px; }
  .gold-history-shell { padding: 16px; }
  .gold-history-heading h2 { font-size: 18px; }
  .gold-history-table th, .gold-history-table td { padding: 9px 7px; font-size: 9px; }
}

/* Official bank emblems sit where the code chip used to be. */
.bank-logo {
  width: 30px; height: 30px; flex: none; object-fit: contain;
  background: #fff; border: 1px solid #e6e9e0; border-radius: 8px; padding: 2px;
}
.bank-table .currency-name { align-items: center; }

/* Narrow screens: the grade table stacks the label above its two prices so nothing
   is squeezed into an unreadable column. */
@media (max-width: 560px) {
  .gold-grade-table { margin-inline: 15px; }
  .purity-head, .purity-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
}

/* A published-but-old bank pair: the value is real, so it is shown with a stale marker
   rather than hidden behind "Not published". */
.bank-pair.is-stale { opacity: .82; }
.bank-pair.is-stale b { color: #8b938b; }
.bank-pair.is-stale em {
  font-style: normal; font-size: 7.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #a5762f; background: #fbf3e0;
  padding: 1px 5px; border-radius: 999px; margin-left: 6px;
}

/* ---------- How to read this board ----------
   The board itself is a tool, so the page carries the explanation of its own numbers
   next to the tool. A reviewer — and a visitor — should never have to guess what a
   column means, and a page that only shows numbers is a page with nothing to read. */
.reading-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.reading-card {
  padding: 15px 17px; border: 1px solid #e2e8de; border-radius: 11px; background: #fff;
}
.reading-card h3 { margin: 0 0 6px; color: #24493a; font-size: 13.5px; }
.reading-card p { margin: 0; color: #5c6b62; font-size: 11.5px; line-height: 1.8; }
.reading-card strong { color: #33473b; }
.reading-foot {
  margin: 16px 0 0; color: #5c6b62; font-size: 11.5px; line-height: 1.8;
}
.reading-foot a { color: var(--green); font-weight: 700; }

/* ---------- Guides ----------
   The guide pages carry the site's own explanation of the numbers it publishes.
   They are ordinary content pages, styled to match the legal pages so the site
   reads as one publication rather than a set of separate tools. */
.guide-page { max-width: 780px; }
.guide-page .eyebrow { margin: 0 0 6px; color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.guide-lede {
  margin: 0 0 26px; padding: 16px 18px; border-left: 3px solid var(--green);
  border-radius: 0 8px 8px 0; background: #f3f6f1;
  color: #33473b; font-size: 13.5px; line-height: 1.85;
}
.guide-page h2 { margin-top: 34px; }
.guide-page ul li { margin-bottom: 8px; }
.guide-page code {
  padding: 1px 5px; border-radius: 4px; background: #eef2eb;
  font-size: 11px; font-weight: 600;
}
.guide-formula {
  margin: 16px 0; padding: 14px 16px; overflow-x: auto;
  border: 1px solid #dfe6dc; border-radius: 9px; background: #f7f9f5;
  color: #24493a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.7; white-space: nowrap;
}
.guide-index { list-style: none; margin: 0; padding: 0; }
.guide-index li {
  margin: 0 0 14px; padding: 16px 18px;
  border: 1px solid #e2e8de; border-radius: 11px; background: #fff;
}
.guide-index h3 { margin: 0 0 6px; font-size: 15px; }
.guide-index h3 a { color: #24493a; text-decoration: none; }
.guide-index h3 a:hover { text-decoration: underline; }
.guide-index p { margin: 0; color: #5c6b62; font-size: 12.5px; line-height: 1.8; }
.guide-cta {
  margin-top: 30px; padding: 14px 16px; border-radius: 9px; background: #f3f6f1;
  color: #33473b; font-size: 12.5px;
}
.guide-cta a { color: var(--green); font-weight: 700; }

/* ---------- Animated coin avatars ----------
   The coin characters are injected as inline SVG (see mountAvatar in app.js), so the
   page stylesheet owns the animation. That is deliberate: an SVG loaded through <img>
   ignores its own <style> block, so a SMIL animation inside one could not be
   switched off for a visitor who asks for reduced motion.

   The motion is slow and small — a travelling shine, a blinking eye, a soft blush
   pulse and two sparkles. It is a personality touch on a visitor profile, not a
   decoration on the board, so it never moves the layout and never animates a number. */
.coin-avatar-svg { display: block; overflow: visible; }
.coin-avatar-svg .coin-rim { transform-origin: 40px 40px; animation: coin-turn 18s linear infinite; }
.coin-avatar-svg .coin-shine { transform-origin: 40px 40px; animation: coin-shine 7s ease-in-out infinite; }
.coin-avatar-svg .coin-dashes { transform-origin: 40px 40px; animation: coin-turn 26s linear infinite; }
.coin-avatar-svg .coin-arcs { transform-origin: 40px 40px; animation: coin-turn 18s linear infinite; }
.coin-avatar-svg .coin-eye { transform-origin: center; transform-box: fill-box; animation: coin-blink 4.6s ease-in-out infinite; }
.coin-avatar-svg .coin-eye--right { animation-delay: .04s; }
.coin-avatar-svg .coin-blush { animation: coin-blush 4.6s ease-in-out infinite; }
.coin-avatar-svg .coin-sparkle { opacity: 0; transform-origin: center; transform-box: fill-box; animation: coin-sparkle 3.4s ease-in-out infinite; }
.coin-avatar-svg .coin-sparkle--b { animation-delay: 1.7s; }

@keyframes coin-turn { to { transform: rotate(360deg); } }
@keyframes coin-shine {
  0% { transform: rotate(-50deg); }
  50% { transform: rotate(230deg); }
  100% { transform: rotate(-50deg); }
}
@keyframes coin-blink {
  0%, 44%, 56%, 100% { transform: scaleY(1); }
  48%, 52% { transform: scaleY(.18); }
}
@keyframes coin-blush { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes coin-sparkle {
  0%, 100% { opacity: 0; transform: scale(.4) translateY(0); }
  45% { opacity: 1; transform: scale(1.15) translateY(-3px); }
}

/* The coin never animates for a visitor who asks for reduced motion: every animated
   part falls back to its still state, which the SVG already draws. */
@media (prefers-reduced-motion: reduce) {
  .coin-avatar-svg .coin-rim,
  .coin-avatar-svg .coin-shine,
  .coin-avatar-svg .coin-dashes,
  .coin-avatar-svg .coin-arcs,
  .coin-avatar-svg .coin-eye,
  .coin-avatar-svg .coin-blush,
  .coin-avatar-svg .coin-sparkle { animation: none !important; }
  .coin-avatar-svg .coin-sparkle { opacity: .55; }
}

/* A cross-check note from a second source, on its own line under the world-gold card. */
.gold-crosscheck { margin: 8px 21px 0; color: #7d8a80; font-size: 9px; }