:root{
  color-scheme:light;
  --page:#f8f5ef;
  --card:#fffdfa;
  --ink:#26322f;
  --muted:#79817e;
  --line:#e9e2d8;
  --green:#058a69;
  --green-soft:#edf7f2;
  --amber:#d8991e;
  --danger:#a5473d;
  font-family:Inter,"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{max-width:100%;overflow-x:hidden;background:#eae6df}
body{width:100%;min-width:0;max-width:100%;margin:0;overflow-x:hidden;background:#eae6df;color:var(--ink);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{color:inherit}
a{color:inherit}
[hidden]{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
canvas{display:block}

.exchange-app{position:relative;width:min(100%,540px);max-width:100%;min-height:100svh;margin:0 auto;overflow-x:clip;background:var(--page);box-shadow:0 0 32px rgba(47,39,30,.1)}
.exchange-header{position:-webkit-sticky;position:sticky;z-index:20;top:0;height:91px;padding:14px 18px 11px;display:grid;grid-template-columns:52px 1fr auto;align-items:center;background:rgba(248,245,239,.96);border-bottom:1px solid rgba(225,218,207,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.icon-button{width:47px;height:47px;display:grid;place-items:center;border:0;border-radius:50%;background:#fffdfa;text-decoration:none;box-shadow:0 7px 20px rgba(62,50,35,.09)}
.page-title{min-width:0;text-align:center;transform:translateX(10px)}
.page-title h1{margin:0;font-family:"Noto Serif SC","Songti SC",serif;font-size:24px;line-height:1.25;letter-spacing:2px}
.page-title p{margin:2px 0 0;color:#8b908d;font-size:12px;letter-spacing:.4px}
.location-link{min-width:92px;display:flex;align-items:center;justify-content:flex-end;gap:5px;color:#3d4945;font-size:14px;font-weight:650;text-decoration:none}
.location-link span{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.exchange-main{min-width:0;padding:14px 12px calc(var(--bottom-nav-height,82px) + 20px + var(--bottom-nav-safe-bottom,var(--kf-safe-bottom,env(safe-area-inset-bottom,0px))))}
.converter-card,.currency-card,.provider-notice,.travel-tip{border:1px solid rgba(233,226,216,.9);border-radius:16px;background:var(--card);box-shadow:0 7px 23px rgba(54,43,29,.055)}
.converter-card{position:relative;min-width:0;padding:18px 15px 0;overflow:hidden}
.converter-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}
.live-badge{height:34px;padding:0 12px 0 9px;display:inline-flex;align-items:center;gap:6px;border-radius:18px;background:var(--green);color:#fff;box-shadow:0 5px 14px rgba(5,138,105,.2)}
.live-badge b{font-size:13px;font-weight:700;white-space:nowrap}
.live-badge.is-offline{background:#8d8f8d;box-shadow:none}
.updated-button{min-width:0;padding:7px 0;display:flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.updated-button span{max-width:145px;overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.updated-button:disabled{cursor:wait;opacity:.65}

.currency-row{position:relative;display:grid;grid-template-columns:30px minmax(118px,.9fr) minmax(0,1.35fr);align-items:stretch;gap:8px}
.row-label{display:flex;align-items:center;color:#3b4743;font-size:16px;font-weight:700}
.currency-picker,.amount-box{height:78px;border:1px solid var(--line);border-radius:12px;background:#fffdfa}
.currency-picker{position:relative;min-width:0;padding:9px 8px;display:grid;grid-template-columns:30px minmax(0,1fr) 14px;align-items:center;gap:7px;background:#fbf6ee;cursor:pointer}
.currency-picker select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.picker-copy{min-width:0;display:flex;flex-direction:column}
.picker-copy b{font-size:17px;line-height:1.2;letter-spacing:.3px}
.picker-copy small{margin-top:5px;overflow:hidden;color:#7a817e;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.amount-box{min-width:0;padding:0 12px;display:flex;align-items:center;gap:8px;background:#fff}
.amount-box input,.amount-box output{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#202c29;font-size:28px;font-weight:530;line-height:1.1;letter-spacing:.2px}
.amount-box input{width:100%}
.amount-box b{flex:0 0 auto;color:#747d79;font-size:12px;font-weight:600}
.result-box{background:#fdfbf8}
.result-box output{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.to-row{padding-top:22px;border-top:1px solid #eee8df}
.swap-button{position:relative;z-index:3;width:50px;height:50px;margin:-14px auto -14px;display:grid;place-items:center;border:1px solid #e7e0d7;border-radius:50%;background:#fffdfa;color:var(--green);box-shadow:0 4px 12px rgba(52,43,32,.07);cursor:pointer}
.swap-button.is-loading canvas{animation:exchange-turn .8s linear infinite}
@keyframes exchange-turn{to{transform:rotate(360deg)}}

.conversion-summary{min-height:55px;margin:18px 0 0;padding:0 12px;display:flex;align-items:center;justify-content:center;border:1px solid #e3efe8;border-radius:11px;background:var(--green-soft);color:#5a6460;font-size:14px;text-align:center}
.conversion-summary strong{margin:0 4px;color:var(--green);font-size:19px}
.conversion-summary.is-error{border-color:#ead7d2;background:#fbf2ef;color:var(--danger)}
.quick-amounts{margin:17px -15px 0;padding:14px 15px 15px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;border-top:1px solid #eee8df;background:#fdfbf7;border-radius:0 0 16px 16px}
.quick-amounts>strong{font-size:14px;white-space:nowrap}
.quick-amounts>div{min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.quick-amounts button{height:38px;padding:0 4px;border:1px solid #ebe4dc;border-radius:10px;background:#fffdfa;color:#77807c;font-size:12px;cursor:pointer}
.quick-amounts button.is-active{border-color:var(--green);color:var(--green);font-weight:750;box-shadow:inset 0 0 0 1px rgba(5,138,105,.12)}

.provider-notice{margin-top:11px;padding:15px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-color:#ebd9bf;background:#fff8e9}
.provider-notice strong{color:#6a4b19;font-size:14px}
.provider-notice p{margin:4px 0 0;color:#876f48;font-size:11px;line-height:1.55}
.provider-notice a{flex:0 0 auto;padding:9px 10px;display:flex;align-items:center;gap:5px;border-radius:10px;background:#fff;color:#7a561d;font-size:11px;font-weight:700;text-decoration:none;box-shadow:0 2px 8px rgba(99,68,22,.09)}

.currency-card{margin-top:11px;padding:14px}
.currency-card h2{margin:0;font-family:"Noto Serif SC","Songti SC",serif;font-size:18px;line-height:1.3}
.currency-grid{margin-top:10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.currency-grid button{min-width:0;height:60px;padding:7px 6px;overflow:hidden;display:flex;align-items:center;gap:6px;border:1px solid #e8e2d9;border-radius:10px;background:#fff;color:#2c3734;text-align:left;cursor:pointer}
.currency-grid button.is-active{border-color:var(--green);background:#f6fcf9;box-shadow:inset 0 0 0 1px rgba(5,138,105,.1)}
.currency-grid button span{min-width:0;display:flex;flex-direction:column}
.currency-grid button b{font-size:13px;line-height:1.15}
.currency-grid button small{margin-top:3px;overflow:hidden;color:#818784;font-size:9px;text-overflow:ellipsis;white-space:nowrap}

.rates-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rates-card>header p{margin:3px 0 0;color:#858b88;font-size:10px}
.rates-card>header button{padding:3px 0;display:flex;align-items:center;gap:4px;border:0;background:transparent;color:var(--green);font-size:11px;font-weight:700;cursor:pointer}
.rate-table{margin-top:10px;overflow:hidden;border:1px solid #eee8df;border-radius:10px}
.rate-table-head,.rate-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(105px,.75fr);align-items:center}
.rate-table-head{min-height:34px;padding:0 10px;background:#faf7f2;color:#8b908e;font-size:10px}
.rate-table-head span:last-child{text-align:right}
.rate-row{min-height:51px;padding:6px 10px;border-top:1px solid #eee9e2}
.rate-currency{min-width:0;display:flex;align-items:center;gap:8px}
.rate-currency span{min-width:0;display:flex;align-items:baseline;gap:5px}
.rate-currency b{font-size:13px}
.rate-currency small{overflow:hidden;color:#838986;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.rate-value{text-align:right}
.rate-value b{display:block;color:var(--green);font-size:13px;font-variant-numeric:tabular-nums}
.rate-value small{display:block;margin-top:2px;color:#929795;font-size:9px}
.rates-status{min-height:82px;margin:0;padding:22px 18px;display:flex;align-items:center;justify-content:center;color:#818885;font-size:12px;line-height:1.6;text-align:center}
.source-note{margin:9px 2px 0;color:#909592;font-size:9px;line-height:1.55}
.source-note a{color:var(--green);font-weight:700}

.travel-tip{margin-top:11px;padding:13px 14px;display:flex;align-items:flex-start;gap:10px;border-color:#f0dfb8;background:#fff7e5;color:#756039}
.travel-tip canvas{flex:0 0 auto;color:var(--amber)}
.travel-tip p{margin:0;font-size:11px;line-height:1.65}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(5,138,105,.28);outline-offset:2px}

@media (max-width:460px){
  .amount-box{padding-inline:6px;gap:5px}
  .amount-box input,.amount-box output{font-size:20px}
  .amount-box b{font-size:10px}
}

@media (max-width:389px){
  .exchange-header{grid-template-columns:45px 1fr 82px;padding-inline:12px}
  .page-title{transform:translateX(4px)}
  .page-title h1{font-size:21px}
  .location-link{min-width:82px;font-size:12px}
  .exchange-main{padding-inline:8px}
  .converter-card{padding-inline:11px}
  .currency-row{grid-template-columns:26px 116px minmax(0,1fr);gap:6px}
  .currency-picker{padding-inline:6px;grid-template-columns:27px minmax(0,1fr) 12px;gap:5px}
  .picker-copy b{font-size:15px}
  .amount-box{padding-inline:8px}
  .amount-box input,.amount-box output{font-size:21px}
  .quick-amounts{margin-inline:-11px;padding-inline:11px;grid-template-columns:1fr}
  .quick-amounts>strong{display:none}
  .provider-notice{align-items:flex-start;flex-direction:column}
  .currency-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:350px){
  .exchange-header{grid-template-columns:42px minmax(0,1fr) 78px;padding-inline:10px}
  .icon-button{width:42px;height:42px}
  .page-title{transform:none}
  .page-title h1{font-size:19px;letter-spacing:1px}
  .location-link{min-width:0;font-size:11px}
  .location-link span{max-width:40px}
  .converter-card{padding-inline:9px}
  .currency-row{grid-template-columns:20px 104px minmax(0,1fr);gap:4px}
  .currency-picker{padding-inline:5px;grid-template-columns:25px minmax(0,1fr) 10px;gap:4px}
  .picker-copy b{font-size:14px}
  .picker-copy small{font-size:9px}
  .amount-box{padding-inline:6px;gap:4px}
  .amount-box input,.amount-box output{font-size:18px}
  .amount-box b{font-size:9px}
  .quick-amounts{margin-inline:-9px;padding-inline:9px}
  .quick-amounts>div{gap:4px}
  .quick-amounts button{font-size:10px}
  .rate-table-head,.rate-row{grid-template-columns:minmax(0,1fr) minmax(90px,.75fr)}
}

@media (min-width:541px){
  body{padding-block:18px}
  .exchange-app{min-height:calc(100svh - 36px);border-radius:22px;overflow:hidden}
}

@media (prefers-reduced-motion:reduce){
  .swap-button.is-loading canvas{animation:none}
}

.provider-notice[hidden],.rates-card>header button[hidden],.rates-status[hidden]{display:none}