/* === START: base-theme === */ 
:root{
  --bg1:#0f0f0f; --bg2:#1b1b1b; --neo:#00ffff; --muted:#9aa5b1;
  --danger:#ff5252; --primary:#5865F2; --ok:#19e3a7; --emph:#ffd54f;

  /* [ADDED] 旗幟 SVG（data URI） */
  /* Taiwan */
  --flag-tw: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16"><rect width="24" height="16" fill="%23fe0000"/><rect width="10" height="7.5" fill="%23002B7F"/><circle cx="5" cy="3.75" r="2.2" fill="%23ffffff"/></svg>');
  /* United States */
  --flag-us: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16"><rect width="24" height="16" fill="%23b22234"/><g fill="%23ffffff"><rect y="2" width="24" height="2"/><rect y="6" width="24" height="2"/><rect y="10" width="24" height="2"/><rect y="14" width="24" height="2"/></g><rect width="10" height="7.5" fill="%233c3b6e"/><g fill="%23ffffff"><circle cx="1.5" cy="1.2" r=".5"/><circle cx="3.5" cy="2.2" r=".5"/><circle cx="5.5" cy="1.2" r=".5"/><circle cx="7.5" cy="2.2" r=".5"/><circle cx="1.5" cy="3.2" r=".5"/><circle cx="3.5" cy="4.2" r=".5"/><circle cx="5.5" cy="3.2" r=".5"/><circle cx="7.5" cy="4.2" r=".5"/></g></svg>');
  /* Korea */
  --flag-kr: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16"><rect width="24" height="16" fill="%23ffffff"/><circle cx="12" cy="8" r="3.4" fill="%23c60c30"/><rect x="8.6" y="8" width="6.8" height="8" fill="%23ffffff"/><circle cx="12" cy="8" r="3.4" fill="%23003478"/><rect x="8.6" y="0" width="6.8" height="8" fill="%23ffffff"/></svg>');
  /* Japan */
  --flag-jp: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16"><rect width="24" height="16" fill="%23ffffff"/><circle cx="12" cy="8" r="4" fill="%23bc002d"/></svg>');
  /* Vietnam */
  --flag-vn: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16"><rect width="24" height="16" fill="%23da251d"/><polygon points="12,4 13.2,7 16.4,7 13.8,8.8 14.8,12 12,10.2 9.2,12 10.2,8.8 7.6,7 10.8,7" fill="%23ffec00"/></svg>');
  /* Brazil */
  --flag-br: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16"><rect width="24" height="16" fill="%23009b3a"/><polygon points="12,2.2 21,8 12,13.8 3,8" fill="%23ffdf00"/><circle cx="12" cy="8" r="3.2" fill="%23002b7f"/></svg>');
  /* Poland */
  --flag-pl: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16"><rect width="24" height="8" y="0" fill="%23ffffff"/><rect width="24" height="8" y="8" fill="%23dc143c"/></svg>');
  /* Germany */
  --flag-de: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16"><rect width="24" height="5.33" y="0" fill="%23000000"/><rect width="24" height="5.33" y="5.33" fill="%23dd0000"/><rect width="24" height="5.34" y="10.66" fill="%23ffce00"/></svg>');
  /* Turkey */
  --flag-tr: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16"><rect width="24" height="16" fill="%23e30a17"/><circle cx="9.5" cy="8" r="4.2" fill="%23ffffff"/><circle cx="10.6" cy="8" r="3.4" fill="%23e30a17"/><polygon points="14.8,8 12.9,7 13.8,8.9 12,10 14.2,10 15,12 15.8,10 18,10 16.2,8.9 17.1,7" fill="%23ffffff"/></svg>');
  /* France */
  --flag-fr: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16"><rect width="8" height="16" x="0" fill="%230052b4"/><rect width="8" height="16" x="8" fill="%23ffffff"/><rect width="8" height="16" x="16" fill="%23d7141a"/></svg>');

  /* Spain */
  --flag-es: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16"><rect width="24" height="16" fill="%23aa151b"/><rect width="24" height="8" y="4" fill="%23fff200"/></svg>');

  /* Italy */
  --flag-it: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16"><rect width="8" height="16" x="0" fill="%23008546"/><rect width="8" height="16" x="8" fill="%23ffffff"/><rect width="8" height="16" x="16" fill="%23cf2b37"/></svg>');

  /* Saudi Arabia (Arabic) */
  --flag-ar: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16"><rect width="24" height="16" fill="%23006520"/><rect x="4" y="7" width="16" height="2" fill="%23ffffff"/></svg>');

  /* Thailand */
  --flag-th: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16"><rect width="24" height="16" fill="%23a51931"/><rect y="2" width="24" height="12" fill="%23ffffff"/><rect y="4" width="24" height="8" fill="%2300529e"/></svg>');

}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,"Noto Sans","PingFang TC","Microsoft JhengHei",sans-serif;
  background:linear-gradient(135deg,var(--bg1),var(--bg2)); color:#fff;
}

/* [CHANGED] header → .app-header：左 LOGO、右 語言下拉 + 登出 */
.app-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:#111;border-bottom:1px solid #222
}
/* 右側容器（語言下拉 + 登出） */
.header-right{
  display:flex;align-items:center;gap:12px;margin-left:auto;
}

/* ===== Language Select (dark, high-contrast, with flags) ===== */
.lang-select{ position:relative; }
.lang-select select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  min-width:156px;
  padding:10px 40px 10px 44px;          /* 左側留空放旗幟 */
  border-radius:10px;
  border:1px solid #1f3a40;
  background:#0b161a;                   /* 深底 */
  color:#eafcff;                        /* 高對比字色 */
  font-weight:800; letter-spacing:.2px;
  outline:none;
  box-shadow:
    inset 0 0 8px rgba(0,255,255,.10),
    0 0 0 2px rgba(0,255,255,.08);
  transition:all .15s ease;
}
.lang-select select:hover{
  border-color:#27e0ff;
  box-shadow:
    inset 0 0 10px rgba(0,255,255,.14),
    0 0 0 3px rgba(0,255,255,.10);
}
.lang-select select:focus{
  border-color:#33ffff;
  box-shadow:
    inset 0 0 0 2px rgba(0,255,255,.25),
    0 0 0 4px rgba(0,255,255,.12);
}
/* 下拉箭頭 */
.lang-select::after{
  content:'▾';
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  pointer-events:none; opacity:.9; font-size:13px; color:#bffaff;
}
/* 旗幟：放在 select 左邊，用目前語系切換（需 .lang-select[data-lang="code"]） */
.lang-select::before{
  content:'';
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:22px; height:16px; border-radius:3px;
  background-size:cover; background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
/* 對應語言 → 使用對應旗幟 */
.lang-select[data-lang="zh"]::before{ background-image: var(--flag-tw); }
.lang-select[data-lang="en"]::before{ background-image: var(--flag-us); }
.lang-select[data-lang="ko"]::before{ background-image: var(--flag-kr); }
.lang-select[data-lang="ja"]::before{ background-image: var(--flag-jp); }
.lang-select[data-lang="vi"]::before{ background-image: var(--flag-vn); }
.lang-select[data-lang="pt-BR"]::before{ background-image: var(--flag-br); }
.lang-select[data-lang="pl"]::before{ background-image: var(--flag-pl); }
.lang-select[data-lang="de"]::before{ background-image: var(--flag-de); }
.lang-select[data-lang="tr"]::before{ background-image: var(--flag-tr); }
.lang-select[data-lang="fr"]::before{ background-image: var(--flag-fr); }
.lang-select[data-lang="es"]::before{ background-image: var(--flag-es); }
.lang-select[data-lang="it"]::before{ background-image: var(--flag-it); }
.lang-select[data-lang="ar"]::before{ background-image: var(--flag-ar); }
.lang-select[data-lang="th"]::before{ background-image: var(--flag-th); }


/* 讓原生下拉清單也儘量用深色（支援的瀏覽器會生效） */
.lang-select option{
  background:#0e1c22; color:#eafcff; font-weight:700;
}
@supports (color-scheme: dark){
  .lang-select select{ color-scheme: dark; }
}

/* 讓登出按鈕右側視覺更穩 */
.app-header .btn.outline{ padding:10px 14px; }

/* 內容卡片內的品牌區（與 header 無關） */
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:38px;height:38px;border-radius:50%}
.brand .name{font-weight:700}

main{padding:18px;max-width:1100px;margin:0 auto}

.card{background:rgba(34,34,34,.95);border:1px solid #2a2a2a;border-radius:12px;padding:18px;margin-bottom:16px;box-shadow:0 0 24px rgba(0,255,255,.25)}
h2{margin:6px 0 12px;color:var(--neo);text-shadow:0 0 6px rgba(0,255,255,.6)}
h3{margin:10px 0 8px}
.kv{margin:6px 0;color:#cfd8dc} .kv b{color:#fff}
.emph{color:var(--emph);font-weight:700}
.muted{color:#9aa5b1} .small{font-size:12px}

.row{display:flex;gap:16px;flex-wrap:wrap}
.col{flex:1 1 380px}
label{display:block;margin:6px 0 6px;color:#cfd8dc}
input[type=text],select{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #333;background:#121212;color:#fff}
input[readonly]{opacity:.9}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;background:var(--primary);color:#fff;text-decoration:none;border:0;cursor:pointer;font-weight:700}
.btn:hover{filter:brightness(1.05)}
.btn.outline{background:transparent;border:1px solid #3a3a3a}
.btn.danger{background:var(--danger)}
.btn.success{background:var(--ok)}

.progress{height:10px;background:#111;border-radius:8px;overflow:hidden;border:1px solid #2a2a2a}
.progress>i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#00ffff,#19e3a7)}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #2a2a2a;text-align:left;font-size:14px}
tr:hover{background:#181818}
.addr-box{display:flex;gap:8px;align-items:center}
.hint{font-size:12px;color:#9aa5b1}
.danger-txt{color:#ff8080}
.ok-txt{color:#19e3a7}
.disabled{opacity:.5;pointer-events:none}

/* 分頁列 */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0}
.tab-btn{padding:10px 14px;border:1px solid #2a2a2a;background:#151515;color:#fff;border-radius:8px;cursor:pointer}
.tab-btn.active{border-color:var(--neo);box-shadow:0 0 10px rgba(0,255,255,.25)}

/* KYC 縮圖（固定大小） */
.thumbs{display:flex;gap:12px;flex-wrap:wrap}
.thumb{width:200px;background:#101010;border:1px solid #2a2a2a;border-radius:10px;padding:8px}
.thumb h4{margin:0 0 6px;font-size:12px;color:#cfd8dc}
.thumb img{display:block;width:100%;height:140px;object-fit:cover;border-radius:6px;background:#000}
.thumb .tag{display:inline-block;margin-top:6px;padding:2px 6px;border-radius:6px;background:#222;color:#ccc;font-size:12px}
/* === END: base-theme === */


/* === START: order-ui-tweaks === */
#elig-address, #sol-address{
  width: calc(100% - 110px);
  max-width: 780px;
  min-width: 360px;
}
#elig-address + button, #sol-address + button{
  white-space: nowrap; flex: 0 0 auto;
}
.pay-summary{ margin-bottom:8px; }
.note-lg{ font-size: 1.08rem; line-height: 1.65; }
.kvhl-amount{ color: var(--neo);  font-weight: 800; }
.kvhl-conf{   color: var(--emph); font-weight: 800; }
.ok-txt{ color:#19e3a7; font-weight:700; }
.warn-txt{ color:#f5a623; font-weight:700; }
.danger-txt{ color:#ff8080; font-weight:700; }
.progress[data-label]::before{ content:'' !important; }
/* === END: order-ui-tweaks === */


/* === START: success-banner === */
.success-banner{
  background:#0f2d1f;
  border:1px solid #1f8a5c;
  color:#b2f5cc;
  padding:18px;
  border-radius:12px;
  margin:16px 0;
  box-shadow:0 0 20px rgba(25,227,167,.15);
}
.success-banner .big{
  font-size:22px;
  font-weight:800;
  color:#19e3a7;
  letter-spacing:.5px;
}
.success-banner .mono{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:18px;
}
/* === END: success-banner === */


/* === START: ui-typography-v2 === */
:root{ --fs-base:16px; --fs-lg:18px; --fs-xl:20px; }
main{font-size:var(--fs-base);}
.card h2,.card h3{font-size:var(--fs-xl);letter-spacing:.3px}
.card .kv,.card .muted,.card label,.card .hint,.pay-summary{font-size:var(--fs-lg)}
input[type=text],select{font-size:var(--fs-lg);padding:12px 14px}
.btn{font-size:var(--fs-lg);padding:12px 18px}
.orders-table th,.orders-table td{font-size:14px !important}
.txlogs .mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.txlogs .small{font-size:12px;color:#9aa5b1}
.txid-cell{max-width:560px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* === END: ui-typography-v2 === */


/* === START: card subsection === */
.card-sub{
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid #2a2a2a;
}
.txlogs h3{ margin-top:0 }
/* === END: card subsection === */


/* === START: pager === */
.pager-wrap{
  display:flex; align-items:center; gap:8px; justify-content:flex-end;
  margin-top:10px;
}
.pager-btn{
  padding:8px 12px; font-size:14px; background:#151515;
  border:1px solid #2a2a2a; border-radius:8px; color:#fff; cursor:pointer;
}
.pager-btn:disabled{opacity:.4;cursor:not-allowed}
.pager-info{ font-size:14px; color:#9aa5b1; }
/* === END: pager === */


/* === START: info-cards === */
.brand-in-card{
  display:flex; align-items:center; gap:12px;
  margin-bottom:8px;
}
.brand-in-card img{ width:48px; height:48px; border-radius:50% }
#info-cards-row{
  display:flex; gap:16px; flex-wrap:wrap; margin:14px 0 16px;
}
.info-card{
  flex:1 1 300px;
  background:#151515;
  border:1px solid #2a2a2a;
  border-radius:10px;
  padding:14px;
  box-shadow:0 0 12px rgba(0,255,255,.08);
}
.info-card h4{
  margin:0 0 8px;
  color:var(--neo);
  font-size:16px;
}
.info-card ul{
  margin:0;
  padding-left:18px;
  color:#cfd8dc;
  font-size:14px;
  line-height:1.5;
}
/* === END: info-cards === */


/* === START: tabs-in-card-head === */
.card .tabs.tabs-head{
  margin: -6px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a2a2a;
}
.card .tabs.tabs-head .tab-btn{ margin-right: 6px; }
/* === END: tabs-in-card-head === */


/* === START: site-logo (SOL neon text) === */
.site-logo{
  font-weight: 900;
  font-size: 24px;
  letter-spacing: .15em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00ffff 0%, #19e3a7 50%, #aaffcc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 8px rgba(0,255,255,.25),
    0 0 18px rgba(25,227,167,.12);
  animation: solSweep 6s linear infinite;
  background-size: 200% auto;
}
@keyframes solSweep{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}
/* === END: site-logo (SOL neon text) === */
/* === START: referrer box === */
#card-dash{ position: relative; }
.ref-box{
  position:absolute; right:16px; top:16px;
  display:flex; align-items:center; gap:8px;
  background:rgba(0,0,0,.25);
  padding:8px 10px; border:1px solid #2a2a2a; border-radius:8px;
  box-shadow:0 0 10px rgba(0,255,255,.07);
}
.ref-box input{
  width:200px; max-width:240px;
  padding:8px 10px; border-radius:6px;
  border:1px solid #333; background:#121212; color:#fff;
}
.btn.small{ padding:8px 12px; font-size:14px; }
/* 鎖定時的視覺 */
.ref-box.locked input{ opacity:.7; pointer-events:none; }
.ref-box.locked #btn-ref-save{ display:none; }
.ref-box.locked #ref-saved{ display:inline !important; color:#19e3a7; }
/* === END: referrer box === */
/* === START: discord-join-button (CSS) === */
.btn-discord-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:999px;
  background:#5865F2; color:#fff;
  font-weight:700; font-size:15px; line-height:1; text-decoration:none;
  transition:transform .2s, box-shadow .2s;
}
.btn-discord-pill:hover{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(88,101,242,.4); }

/* 關鍵：強制圖標尺寸與垂直置中，不受全域 svg 規則影響 */
.btn-discord-pill svg{
  width:22px !important; height:22px !important;
  display:block; flex:0 0 22px;
  transform: translateY(1px); /* 微調視覺居中，可改成0~2px */
}
.btn-discord-pill span{ line-height:1; }
/* === END: discord-join-button (CSS) === */