.equal-width{width:100%;box-sizing:border-box;}
.sumArea{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 auto;max-width:600px;}
.row{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;}
.exchangeArea1,.exchangeArea3{flex:1;display:flex;flex-direction:column;align-items:center;}
.exchangeArea2{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.iconfont{font-size:24px;}
.aboutTit span{font-size:1.5em;}
.buttonArea{display:flex;justify-content:center;align-items:center;margin-top:20px;}
#redeem-button{width:200px;height:40px;font-size:16px;}
.aboutTit span{font-size:1.2em !important;}
.exchange h1{font-size:2.2em;font-weight:bold;font-family:'Arial','Helvetica',sans-serif;color:#333;}
#redeem-button:disabled{background-color:#999;cursor:not-allowed;opacity:0.7;}


/* Local SVG icons: no remote fonts or icon library required. */
.site-icon { display:inline-block; width:24px; height:24px; flex-shrink:0; vertical-align:middle; }
.topLine .nav .plate .site-icon { width:22px; height:22px; margin-right:8px; }
.exchange .exchangeArea2 .site-icon { width:44px; height:44px; padding:10px; color:#176234; background:#e9f2ec; border:1px solid #d3e5d9; border-radius:50%; }
.about ul li > .site-icon { width:36px; height:36px; padding:7px; margin-right:10px; margin-bottom:2px; color:#176234; background:#e9f2ec; border-radius:10px; }
.faq h2 > .site-icon { width:26px; height:26px; margin-right:10px; color:#176234; }

.exchange-status {text-align:center; color:#555; line-height:1.7; min-height:28px; margin-top:8px;}
.exchange-status.error {color:#ad2424;}
.exchange .exchangeDescript {max-width:100%;}
.loading-dialog { position:fixed; inset:0; margin:auto; width:min(360px, calc(100% - 40px)); padding:32px 20px; border:0; border-radius:16px; background:#fff; color:#183d27; text-align:center; box-shadow:0 16px 60px #0003; }
.loading-dialog::backdrop { background:rgba(0, 0, 0, .42); }
.loading-dialog p { margin-top:18px; font-size:16px; line-height:1.7; }
.loading-spinner { display:inline-block; width:38px; height:38px; border:3px solid #dcebe1; border-top-color:#176234; border-radius:50%; animation:loading-spin .85s linear infinite; }
@keyframes loading-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .loading-spinner { animation:none; } }
.language-switch { display:flex; align-self:center; gap:3px; margin-left:auto; padding:4px; border:1px solid #ffffff60; border-radius:9px; }
.language-switch button { border:0; border-radius:6px; background:transparent; color:#fff; padding:8px 12px; font-size:14px; cursor:pointer; white-space:nowrap; }
.language-switch button[aria-pressed="true"] { background:#fff; color:#17452b; font-weight:700; }
.language-switch button:focus-visible { outline:2px solid #f5c45c; outline-offset:3px; }
html[lang="en"] .header > .title h1 { font-size:36px; line-height:1.3; }
html[lang="en"] .header > .title p { font-size:24px; }
html[lang="en"] .about .content p { text-indent:0; }
@media (max-width:768px) {
  .topLine { height:auto; min-height:68px; }
  .topLine .nav { display:flex !important; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 14px; }
  .topLine .nav .logo { float:none; margin:0; flex:1 0 100%; }
  .topLine .nav .logo dt { font-size:20px; }
  .topLine .nav .logo dd { font-size:13px; }
  .topLine .nav .service { display:flex !important; float:none !important; margin:0 !important; padding:0; font-size:14px; }
  .language-switch button { padding:7px 10px; }
  html[lang="en"] .header > .title h1 { font-size:28px; padding:0 12px; }
  html[lang="en"] .header > .title p { font-size:18px; line-height:1.5; padding:12px; }
  html[lang="en"] .exchange h1 { font-size:26px; }
  html[lang="en"] .exchange .aboutTit { font-size:13px; }
}