/* OpenNais DApp — 1:1 reproduction of the Lanhu 16-screen design (375px base).
   Colors sampled directly from the source PNGs (design/*.png). Do not "improve". */

:root {
  /* page background gradient (sampled: 06/03/07/02 vertical strips) */
  --bg-top: #091e42;
  --bg-bottom: #22599c;
  --page-grad: linear-gradient(180deg, #091e42 0%, #22599c 100%);
  --hero-h: 500px;

  /* surfaces */
  --panel: #022c56;          /* drawer + modal panel */
  --input-bg: #041e40;       /* modal input fill */
  --card-fill: rgba(3, 18, 64, 0.20);   /* translucent navy over page gradient */
  --card-border: rgba(122, 176, 240, 0.22);
  --glass-fill: linear-gradient(180deg, #001c5c 0%, #0b52b8 100%);
  --glass-border: rgba(96, 226, 255, 0.55);

  /* accents */
  --cyan: #38e6f9;
  --cyan-deep: #126afe;
  --blue: #2493fc;
  --btn-grad: linear-gradient(90deg, #4ddcff 0%, #2493fc 45%, #0d7dfa 100%);
  --amber: #ffd24a;
  --green: #00ff88;
  --red: #ff5a5a;
  --yellow: #ffe36e;
  --orange: #ff9a3d;

  /* text */
  --tx: #ffffff;
  --tx-2: #d7daef;
  --tx-3: #a9c0dd;
  --tx-dim: #7f96b8;
  --tx-link: #8fd6ff;

  --radius: 10px;
  --radius-lg: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { background: #05132a; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--tx);
  font-size: 13px;
  line-height: 1.35;
}

/* ---------------- phone frame ---------------- */
.phone {
  width: 375px;
  margin: 0 auto;
  position: relative;
  background: var(--page-grad) no-repeat;
  background-size: 100% 100%;
  min-height: 812px;
  overflow: hidden; /* keeps the off-canvas drawer (LTR and RTL) inside the frame */
}
.phone.rtl { direction: rtl; }

.statusbar {
  height: 20px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px;
  padding-top: 4px;
  font-size: 13px; font-weight: 700; letter-spacing: .2px;
  color: #fff;
  position: relative; z-index: 5;
}
.statusbar .sb-right { display: flex; align-items: center; gap: 4px; }
.statusbar svg { display: block; }

/* ---------------- top bar ---------------- */
.topbar {
  position: relative; z-index: 5;
  height: 40px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px;
}
.topbar .brand {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic; font-weight: 700; font-size: 19px;
  letter-spacing: .3px;
  background: linear-gradient(180deg, #ffffff 15%, #cfe9ff 55%, #7fb6f0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0, 20, 60, .8));
}
.topbar .spacer { flex: 1; }
.iconbtn { background: none; border: 0; padding: 0; cursor: pointer; display: flex; align-items: center; position: relative; }
/* 扩大命中区（不改视觉）：四周各外扩 14/12px，肉眼不变，点击容易很多 */
.iconbtn::after { content: ""; position: absolute; top: -14px; bottom: -14px; left: -12px; right: -12px; }
.addr-pill {
  height: 26px; padding: 0 12px; border-radius: 13px;
  display: flex; align-items: center;
  background: rgba(140, 175, 220, 0.20);
  font-size: 11.5px; font-weight: 600; color: #e7eefc;
}
.menu-ico { display: flex; flex-direction: column; gap: 4px; }
.menu-ico i { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: #fff; }
.menu-ico i:nth-child(2) { background: #dbe8ff; }
.menu-ico i:nth-child(3) { background: #b9d0ef; }

/* simple header (inner pages) */
.navbar {
  position: relative; z-index: 5;
  height: 58px; display: flex; align-items: center; justify-content: center;
  padding: 0 16px;
}
.navbar .back { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; }
.navbar h1 { font-size: 19px; font-weight: 700; }

/* ---------------- generic ---------------- */
.screen { position: relative; z-index: 2; padding-bottom: 56px; }
.sec { padding: 0 16px; }
.sec-title {
  position: relative; display: inline-block;
  font-size: 21px; font-weight: 700; letter-spacing: .2px;
  margin: 18px 0 8px;
}
.sec-title::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: -3px;
  width: 100%; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #fff8da, #ffffff 70%, rgba(255,255,255,0));
}
.sec-head { display: flex; align-items: baseline; justify-content: space-between; white-space: nowrap; }
.link-more { font-size: 14px; font-weight: 600; color: #dceaff; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }

/* ---------------- glass stat card ---------------- */
.glass {
  position: relative;
  border-radius: var(--radius);
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  box-shadow: 0 0 12px rgba(40, 190, 255, .35), inset 0 0 14px rgba(60, 200, 255, .28);
  padding: 12px 12px 13px;
  overflow: hidden;
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(120% 90% at 50% -30%, rgba(90, 215, 255, .35), rgba(0,0,0,0) 60%);
  pointer-events: none;
}
.glass .g-label { font-size: 12.5px; color: var(--tx-2); position: relative; }
.glass .g-value { font-size: 22px; font-weight: 700; margin-top: 3px; position: relative; }
.glass-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 11px; }
.glass-grid .glass { text-align: center; padding: 8px 8px 9px; }
.glass-grid .g-label { font-size: 13px; }
.glass-grid .g-value { font-size: 22px; }
/* compact 3-up stat cards (OTC hall) */
.glass-grid.otc-stats { grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 0 -4px; }
.glass-grid.otc-stats .glass { padding: 6px 6px 7px; }
.glass-grid.otc-stats .g-label { font-size: 11.5px; }
.glass-grid.otc-stats .g-value { font-size: 16.5px; margin-top: 2px; white-space: nowrap; }
.g-value.gold { color: var(--amber); }
.g-value.cyan { color: #3fe6ff; }

/* ---------------- action row (OTC) ---------------- */
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 41px; padding: 0 32px; margin-top: 6px; }
.action {
  border: 0; cursor: pointer; font-family: inherit;
  border-radius: 14px; padding: 4px 0 5px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #fff; font-size: 12px; font-weight: 700;
}
.action svg { width: 22px; height: 22px; }
.action.a-buy  { background: linear-gradient(180deg, #1c8f5e, #0d5c3c); box-shadow: 0 0 12px rgba(30,200,120,.35); }
.action.a-sell { background: linear-gradient(180deg, #9a8a1e, #6b5f12); box-shadow: 0 0 12px rgba(220,200,40,.30); }
.action.a-my   { background: linear-gradient(180deg, #8a3fd0, #5b2196); box-shadow: 0 0 12px rgba(170,80,240,.35); }

/* ---------------- tabs (segmented) ---------------- */
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(255, 255, 255, .07);
  border-radius: 12px; padding: 2px; margin: 6px 16px 12px;
  border: 1px solid rgba(120, 175, 235, .18);
}
.seg button {
  border: 0; background: none; font-family: inherit; cursor: pointer;
  height: 34px; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: #dfe9ff;
}
.seg button.on {
  background: linear-gradient(90deg, #3bf1f8 0%, #126afe 100%);
  color: #fff; font-weight: 700;
  box-shadow: 0 0 10px rgba(60, 200, 255, .45);
}

/* ---------------- order card ---------------- */
.card {
  background: var(--card-fill);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 12px;
  margin: 0 16px 14px;
}
.ocard { position: relative; padding-top: 14px; }
.ocard .badge {
  position: absolute; top: 0; inset-inline-end: 0;
  height: 24px; padding: 0 14px;
  display: flex; align-items: center;
  font-size: 12.5px; font-weight: 600; color: #fff;
  border-start-end-radius: 9px; border-end-start-radius: 9px;
  background: linear-gradient(90deg, #35c6f0, #1f8fe0);
}
.ocard .badge.grey { background: linear-gradient(90deg, #9aa6b5, #7d8896); }
.ocard .badge.amber { background: linear-gradient(90deg, #4fc3f7, #2b8fe0); }
.ocard .who { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: #123; overflow: hidden; flex: none;
  border: 1px solid rgba(150, 200, 255, .35);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ocard .who .nm { font-size: 15.5px; font-weight: 600; }
.ocard .who .no { font-size: 12.5px; color: var(--tx-3); margin-top: 3px; }
.ocard .row2 { display: flex; margin-top: 12px; }
.ocard .row2 > div { flex: 1; text-align: center; }
.ocard .row2 .k { font-size: 13px; color: var(--tx-2); }
.ocard .row2 .v { font-size: 15px; color: #58a9ff; margin-top: 4px; }
.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 42px; border-radius: 10px;
  font-size: 16px; font-weight: 700; color: #fff;
  font-family: inherit; border: 1px solid rgba(180, 230, 255, .55); cursor: pointer;
}
.btn-primary { background: var(--btn-grad); box-shadow: 0 0 14px rgba(45, 170, 255, .5); }
.btn-disabled { background: rgba(255,255,255,.05); color: #cfe0f5; border-color: rgba(120,175,235,.35); }
.btn-flat { background: rgba(160, 170, 185, .55); border-color: rgba(200, 210, 225, .35); color: #fff; }
.ocard .btn { margin-top: 12px; }

/* ---------------- balance card (assets) ---------------- */
.balcard { border-radius: var(--radius-lg); overflow: hidden; margin: 0 16px 18px; border: 1px solid rgba(150, 220, 255, .35); }
.balcard .head { padding: 16px 18px 10px; display: flex; align-items: flex-start; justify-content: space-between; }
.balcard .bl { font-size: 17px; font-weight: 600; }
.balcard .num { font-size: 34px; font-weight: 700; letter-spacing: -.5px; margin-top: 8px; }
.balcard .num small { font-size: 13px; font-weight: 500; margin-inline-start: 6px; opacity: .85; }
.balcard.usdt { background: linear-gradient(180deg, #18a4ad 0%, #0d6e75 100%); }
.balcard.ont  { background: linear-gradient(180deg, #2c7eca 0%, #1b5fa8 100%); }
.balcard .disc { width: 58px; height: 58px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.balcard.usdt .disc { background: #26a17b; }
.balcard.ont .disc { width: 62px; height: 62px; background: radial-gradient(circle at 40% 30%, #2a7fd0, #06224a 75%); }
.balcard .foot { display: flex; gap: 18px; padding: 12px 18px 16px; }
.balcard .foot .btn { height: 40px; font-size: 15px; }

/* ---------------- identity card (assets head) ---------------- */
.idcard {
  position: relative; margin: 4px 16px 18px; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #0d2b5e, #123e7e);
  border: 1px solid rgba(120, 200, 255, .5);
  box-shadow: 0 0 16px rgba(50, 160, 255, .35), inset 0 0 20px rgba(60, 170, 255, .25);
  padding: 12px; display: flex; align-items: center; gap: 12px;
}
.idcard .av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; background: #0a1c3a; }
.idcard .av img { width: 100%; height: 100%; object-fit: cover; }
.idcard .nm { font-size: 19px; font-weight: 700; }
.idcard .lv { font-size: 13px; color: var(--tx-3); margin-top: 5px; }
.idcard { min-height: 99px; }
.idcard .art { position: absolute; inset-inline-end: 6px; bottom: 4px; width: 96px; opacity: .95; }

/* ---------------- list rows ---------------- */
.rowl { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid rgba(140, 185, 235, .18); }
.rowl:last-child { border-bottom: 0; }
.rowl .ic { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.rowl .t { font-size: 15px; }
.rowl .s { font-size: 12px; color: var(--tx-3); margin-top: 3px; }
.rowl .grow { flex: 1; }
.rowl .amt { font-size: 15px; font-weight: 600; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.warn { color: var(--yellow); }
.orange { color: var(--orange); }
.blue-a { color: #58a9ff; }

/* ---------------- table ---------------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { font-size: 13px; font-weight: 600; color: #dfe9ff; padding: 6px 4px; text-align: center; border-bottom: 1px solid rgba(140,185,235,.22); overflow-wrap: anywhere; }
.tbl td { font-size: 13.5px; color: #eaf2ff; padding: 6px 4px; text-align: center; overflow-wrap: anywhere; }
.tbl tr + tr td { border-top: 1px solid rgba(140,185,235,.14); }

/* type chips */
.chip { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 12.5px; color: #fff; }
.chip.release { background: rgba(0, 200, 120, .35); }
.chip.direct  { background: rgba(40, 140, 240, .40); }
.chip.small   { background: rgba(200, 180, 60, .35); }
.chip.comm    { background: rgba(210, 120, 40, .35); }
.chip.buynft  { background: rgba(200, 60, 60, .35); }

/* ---------------- invite ---------------- */
.invite { display: flex; align-items: center; gap: 10px; margin: 8px 16px 6px; border-radius: 10px;
  background: linear-gradient(90deg, #0b2c5c, #123f83); border: 1px solid rgba(120,200,255,.45);
  box-shadow: 0 0 12px rgba(50,160,255,.30); padding: 3px 3px 3px 14px; }
.invite .code { flex: 1; font-size: 14px; color: #dbe9ff; }
.invite .copy { height: 36px; padding: 0 16px; border-radius: 9px; border: 1px solid rgba(200,240,255,.6);
  background: var(--btn-grad); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }

/* ---------------- CTA ---------------- */
.cta { margin: 14px 16px 0; }
.cta .btn { height: 52px; font-size: 21px; border-radius: 12px; }

/* ---------------- records list (06) ---------------- */
.rec { padding: 14px; }
.rec .top { display: flex; align-items: center; justify-content: space-between; }
.rec .ttl { font-size: 17px; font-weight: 600; }
.rec .st { font-size: 12.5px; color: #7fd4ff; background: rgba(50, 150, 230, .30); border-radius: 6px; padding: 4px 10px; }
.rec .kv { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 8px; margin-top: 10px; font-size: 13.5px; color: #dfe9ff; }
.rec .kv .r { text-align: end; }
.rec .kv > div { white-space: nowrap; }

/* ---------------- hash / stake board ---------------- */
.hashcard { display: flex; align-items: center; gap: 12px; }
.hashcard .ic { width: 46px; height: 46px; border-radius: 10px; background: rgba(10, 40, 90, .8); border: 1px solid rgba(120,200,255,.4); display: grid; place-items: center; flex: none; }
.hashcard .lbl { font-size: 14px; color: #dfe9ff; }
.hashcard .val { font-size: 25px; font-weight: 700; margin-top: 2px; }

/* ---------------- nft ---------------- */
.nftart { margin: 6px auto 14px; width: 200px; border-radius: 16px; overflow: hidden;
  border: 3px solid rgba(120, 215, 255, .85); box-shadow: 0 0 22px rgba(60, 190, 255, .55), inset 0 0 20px rgba(60,190,255,.4); }
.nftart img { display: block; width: 100%; }
.nftprice { text-align: center; font-size: 19px; font-weight: 700; margin-top: 10px; }
.nftprice b { color: #55d8f5; font-size: 22px; }
.nftnote { text-align: center; font-size: 12px; color: #cfd9e8; margin: 14px 20px 0; line-height: 1.5; }

.rules { margin: 10px 16px 0; }
.rules li { list-style: none; display: flex; gap: 9px; align-items: flex-start; font-size: 15px; margin-bottom: 16px; }
.rules li b { color: #55d8f5; font-weight: 700; }
.rule-title { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 700; margin: 22px 16px 12px; }
.rule-title .warn-ic { width: 22px; height: 22px; border-radius: 50%; background: #ffd400; color: #10233f; display: grid; place-items: center; font-weight: 900; font-size: 15px; }
.checks { display: flex; gap: 26px; justify-content: center; margin: 14px 0 4px; font-size: 13.5px; color: #dfe9ff; }
.checks span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------------- home ---------------- */
.hero { position: relative; height: var(--hero-h); margin: 0; }
.hero .chrome { position: absolute; top: 0; inset-inline: 0; z-index: 6; }
.hero img { width: 100%; height: 380px; object-fit: cover; object-position: 50% 38%; display: block; }
.hero .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, #04101f 0px, #04101f 70px, rgba(4,16,31,.72) 84px, rgba(4,16,31,0) 116px), linear-gradient(180deg, rgba(4,16,31,0) 0px, rgba(4,16,31,0) 320px, rgba(7,28,61,.75) 400px, #071c3d 500px); }
.hero .content { position: absolute; inset-inline: 0; bottom: 44px; text-align: center; }
.hero .logo { font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 44px;
  background: linear-gradient(180deg, #ffffff 10%, #cfe9ff 45%, #7fb6f0 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 30, 80, .9)); }
.hero .sub { font-size: 15px; color: #ffffff; margin-top: 10px; text-shadow: 0 1px 4px rgba(0,20,60,.9); }

.welcome { display: flex; align-items: center; gap: 6px; font-size: 23px; font-weight: 700; margin: 26px 0 46px; }

.availcard { position: relative; border-radius: 12px; overflow: hidden; margin: 0 16px;
  background: linear-gradient(180deg, #0d2c60, #14498f);
  border: 1px solid rgba(120, 210, 255, .55);
  box-shadow: 0 0 16px rgba(50, 170, 255, .40), inset 0 0 22px rgba(60, 180, 255, .25);
  padding: 6px 14px 9px; }
.availcard .k { font-size: 12.5px; color: #cfe3ff; }
.availcard .v { font-size: 27px; font-weight: 700; color: var(--amber); margin-top: 2px; line-height: 1.12; }
.availcard .v span { font-size: 18px; }
.availcard .art { position: absolute; inset-inline-end: 14px; bottom: 12px; width: 62px; }

.label { font-size: 15px; color: #eaf2ff; margin: 10px 16px 6px; line-height: 1.25; }
.pkgrow { display: flex; gap: 10px; margin: 0 16px; }
.pkg { flex: 1; height: 38px; border-radius: 19px; font-size: 15px; font-weight: 700; color: #cfe0f5; font-family: inherit; cursor: pointer;
  background: rgba(10, 30, 66, .55); border: 1px solid rgba(120, 190, 250, .45); }
.pkg.on { background: linear-gradient(180deg, #2fc6fa, #1478ec); color: #fff; border-color: rgba(190, 240, 255, .8);
  box-shadow: 0 0 12px rgba(60, 190, 255, .55); text-shadow: 0 1px 2px rgba(0,30,80,.6); }
.cycles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 16px; }
.cycle { height: 40px; border-radius: 20px; font-size: 14px; font-weight: 600; color: #dfe9ff; font-family: inherit; cursor: pointer;
  background: rgba(10, 30, 66, .5); border: 1px solid rgba(120, 190, 250, .40); }
.cycle.on { background: linear-gradient(90deg, #1f9ff5, #0d6de0); border-color: rgba(190, 240, 255, .75); color: #fff;
  box-shadow: 0 0 12px rgba(60, 190, 255, .5); }

.inputwrap { position: relative; margin: 0 16px; }
.inputwrap input {
  width: 100%; height: 56px; border-radius: 10px; padding: 0 74px 0 16px;
  background: linear-gradient(90deg, rgba(9, 40, 90, .85), rgba(14, 60, 130, .7));
  border: 1px solid rgba(120, 200, 255, .55); color: #fff; font-family: inherit; font-size: 15px;
  box-shadow: inset 0 0 14px rgba(50, 150, 255, .35);
}
.inputwrap input::placeholder { color: #9fb6d6; }
.inputwrap .maxbtn {
  position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
  height: 44px; padding: 0 14px; border-radius: 9px; font-family: inherit; font-size: 16px; font-weight: 700;
  color: #ffe45c; background: rgba(6, 26, 60, .75); border: 1px solid rgba(150, 215, 255, .5); cursor: pointer;
}
.hintrow { display: flex; justify-content: space-between; margin: 8px 16px 0; font-size: 12.5px; color: #cfe0f5; }
.hintrow .min { color: #ffd24a; }

.pj { margin: 26px 16px 0; }
.pj h3 { font-size: 21px; font-weight: 700; position: relative; display: inline-block; }
.pj h3::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -3px; width: 100%; height: 3px; border-radius: 2px; background: linear-gradient(90deg,#fff8da,#fff 70%,rgba(255,255,255,0)); }
.pj .en { font-size: 15px; color: #e6f0ff; margin-top: 10px; }
.pj p { font-size: 13.5px; line-height: 1.48; margin-top: 10px; color: #eaf3ff; }
.pj .art { float: inline-end; width: 96px; margin: -6px 0 0 10px; }

.tokenrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 16px 0; }
.tokencard { border-radius: 10px; padding: 10px 12px 12px; display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, #0b2a5c, #10406f); border: 1px solid rgba(120,200,255,.5);
  box-shadow: 0 0 12px rgba(50,160,255,.30), inset 0 0 16px rgba(60,180,255,.22); }
.tokencard .k { font-size: 12.5px; color: #dfe9ff; }
.tokencard .v { font-size: 21px; font-weight: 700; color: #45e8ff; margin-top: 4px; }

.center-title { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 24px 16px 14px; }
.center-title h3 { font-size: 23px; font-weight: 700; }
.center-title .sq { width: 16px; height: 16px; border-radius: 3px; background: linear-gradient(135deg,#3fe0ff,#1175e8); box-shadow: 0 0 10px rgba(60,200,255,.7); }

.feat { border-radius: 12px; padding: 10px; display: flex; gap: 12px; margin: 0 16px 16px;
  background: linear-gradient(180deg, #0b2a5c, #10406f); border: 1px solid rgba(120,200,255,.5);
  box-shadow: 0 0 14px rgba(50,160,255,.32), inset 0 0 18px rgba(60,180,255,.22); }
.feat .ic { width: 54px; height: 54px; flex: none; border-radius: 10px; background: rgba(6,24,58,.6); border: 1px solid rgba(110,200,255,.45); display: grid; place-items: center; }
.feat h4 { font-size: 15px; font-weight: 700; }
.feat p { font-size: 12.5px; line-height: 1.45; color: #e3eeff; margin-top: 5px; }

.adv h3 { font-size: 21px; font-weight: 700; position: relative; display: inline-block; margin: 0 16px; }
.adv h3::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -3px; width: 100%; height: 3px; border-radius: 2px; background: linear-gradient(90deg,#fff8da,#fff 70%,rgba(255,255,255,0)); }
.adv .en { font-size: 15px; color: #e6f0ff; margin: 12px 16px 0; }
.adv .item { margin: 8px 16px 0; }
.adv .item .tr { display: flex; align-items: center; gap: 8px; }
.adv .item .tr svg { width: 22px; height: 22px; flex: none; }
.adv .item .ti { font-size: 16px; font-weight: 700; }
.adv .item p { font-size: 13px; line-height: 1.38; color: #eaf3ff; margin-top: 5px; }
.adv .art { float: inline-end; width: 80px; margin: -4px 0 0 8px; }
.adv .hr { height: 1px; background: rgba(140,190,240,.28); margin: 12px 16px 0; }

.partners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 12px; }
.partner { height: 42px; border-radius: 10px; background: rgba(255,255,255,.14); border: 1px solid rgba(180,215,255,.25);
  display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: #fff; font-weight: 600; }
.socials { display: flex; justify-content: center; gap: 34px; margin: 24px 0 4px; }
.socials a { color: #fff; display: block; }

/* ---------------- drawer ---------------- */
.drawer-mask { position: absolute; inset: 0; background: rgba(2, 6, 14, .55); opacity: 0; pointer-events: none; transition: .22s; z-index: 40; }
.drawer-mask.on { opacity: 1; pointer-events: auto; }
.drawer { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 207px; background: var(--panel);
  z-index: 41; transform: translateX(-100%); transition: transform .25s; overflow: hidden auto; }
html[dir="rtl"] .drawer { transform: translateX(100%); }
.drawer.on { transform: translateX(0) !important; }
.drawer .logo { text-align: center; padding: 16px 0 14px; font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 24px;
  background: linear-gradient(180deg,#fff 15%,#cfe9ff 55%,#7fb6f0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.drawer .item { height: 46.6px; display: flex; align-items: center; gap: 14px; padding: 0 18px; font-size: 15.5px; color: #dfe9ff; cursor: pointer; }
.drawer .item .ic { width: 22px; display: grid; place-items: center; }
.drawer .item.on { background: linear-gradient(90deg, #60f0fc, #2889ee); color: #fff; font-weight: 600; }
.drawer .langs { padding: 6px 18px 20px; }
.drawer .langs .lt { font-size: 17px; font-weight: 700; margin: 12px 0 12px; }
.drawer .langs .grp { display: flex; flex-wrap: wrap; gap: 10px; }
.drawer .langs button { height: 34px; padding: 0 16px; border-radius: 17px; font-family: inherit; font-size: 13.5px; cursor: pointer;
  background: rgba(6, 26, 60, .55); border: 1px solid rgba(140, 200, 255, .45); color: #dfe9ff; }
.drawer .langs button.on { background: linear-gradient(90deg, #60f0fc, #2889ee); color: #fff; border-color: rgba(200,240,255,.8); }

/* ---------------- modal ---------------- */
.mask { position: absolute; inset: 0; background: rgba(2, 6, 14, .72); z-index: 60; display: none; }
.mask.on { display: block; }
.modal { position: absolute; inset-inline: 16px; top: 56px; z-index: 61; background: var(--panel);
  border: 1px solid rgba(110, 175, 235, .35); border-radius: 14px; padding: 18px 16px 22px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55); display: none; }
.modal.on { display: block; }
.modal .mhead { position: relative; text-align: center; font-size: 19px; font-weight: 700; margin-bottom: 20px; }
.modal .mclose { position: absolute; inset-inline-end: -6px; top: -4px; background: none; border: 0; cursor: pointer; }
.modal .fieldlabel { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; color: #eaf2ff; margin: 14px 0 8px; }
.modal .fieldlabel .right { font-size: 13px; color: #58a9ff; }
.modal .inp { position: relative; }
.modal .inp input { width: 100%; height: 54px; border-radius: 10px; padding: 0 74px 0 14px; background: var(--input-bg);
  border: 1px solid rgba(110, 175, 235, .35); color: #fff; font-family: inherit; font-size: 14px; }
.modal .inp input::placeholder { color: #93a8c6; }
.modal .inp .maxbtn { position: absolute; inset-inline-end: 5px; top: 50%; transform: translateY(-50%); height: 44px; padding: 0 14px;
  border-radius: 9px; font-family: inherit; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #6fe3ff, #1f8fe8); border: 1px solid rgba(190, 240, 255, .7); }
.modal .info { background: rgba(6, 26, 60, .75); border-radius: 10px; padding: 12px 14px; margin-bottom: 6px; }
.modal .info .r { display: flex; justify-content: space-between; font-size: 14.5px; padding: 5px 0; }
.modal .info .r .k { color: #dfe9ff; }
.modal .info .r .v { color: #fff; }
.modal .info .r .v.blue-a { color: #58a9ff; }
.modal .notice { display: flex; gap: 8px; background: rgba(6, 26, 60, .6); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; color: #dbe7f8; line-height: 1.5; }
.modal .btn { margin-top: 18px; height: 46px; }
.modal .plainbox { background: var(--input-bg); border: 1px solid rgba(110,175,235,.35); border-radius: 10px; height: 54px; display: flex; align-items: center; padding: 0 14px; font-size: 15px; color: #fff; }
.modal .dropdown { position: absolute; inset-inline-start: 0; top: 100%; margin-top: 4px; background: var(--input-bg);
  border: 1px solid rgba(110, 175, 235, .45); border-radius: 8px; overflow: hidden; z-index: 5; min-width: 128px; display: none; }
.modal .dropdown.on { display: block; }
.modal .dropdown div { padding: 13px 16px; font-size: 14.5px; color: #eaf2ff; cursor: pointer; }
.modal .dropdown div.on { color: #55d8f5; }

.toast { position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(12px); z-index: 99;
  background: rgba(8, 26, 56, .96); border: 1px solid rgba(110, 175, 235, .45); border-radius: 20px; padding: 9px 20px;
  font-size: 13px; opacity: 0; pointer-events: none; transition: .22s; }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* dev-only badge showing placeholder data provenance */
.srcnote { margin: 10px 16px 0; font-size: 11px; color: #9fb6d6; }

/* RTL: keep numeric / ticker runs in natural LTR order (design reads "12,580 USDT") */
html[dir="rtl"] .g-value,
html[dir="rtl"] .amt,
html[dir="rtl"] .balcard .num,
html[dir="rtl"] .availcard .v,
html[dir="rtl"] .ocard .row2 .v,
html[dir="rtl"] .row2 .v,
html[dir="rtl"] .tokencard .v,
html[dir="rtl"] .plainbox,
html[dir="rtl"] .tbl td,
html[dir="rtl"] .rec .kv,
html[dir="rtl"] .rowl .s,
html[dir="rtl"] .nftprice,
html[dir="rtl"] .hintrow,
html[dir="rtl"] .hintrow .min,
html[dir="rtl"] .checks,
html[dir="rtl"] .rules li,
html[dir="rtl"] .idcard .lv,
html[dir="rtl"] .fieldlabel .right,
html[dir="rtl"] .info .r .v,
html[dir="rtl"] .partner,
html[dir="rtl"] .hashcard .val {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] .rules li,
html[dir="rtl"] .checks { text-align: right; }

/* screenshot mode: hide scrollbars */
::-webkit-scrollbar { width: 0; height: 0; }

/* ---------------- 语言选择底部面板（地球按钮专用，与菜单抽屉分开） ---------------- */
.lang-mask { position: absolute; inset: 0; background: rgba(2, 6, 14, .72); z-index: 70; display: none; }
.lang-mask.on { display: block; }
.lang-sheet {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 71; background: var(--panel);
  border-radius: 18px 18px 0 0; border-top: 1px solid rgba(110, 175, 235, .35);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .5);
  padding: 20px 18px 26px; transform: translateY(110%); transition: transform .25s;
}
.lang-sheet.on { transform: translateY(0); }
.lang-sheet .lst-title { font-size: 17px; font-weight: 700; margin-bottom: 16px; text-align: center; }
.lang-sheet .grp { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lang-sheet .grp button {
  height: 36px; padding: 0 18px; border-radius: 18px; font-family: inherit; font-size: 13.5px; cursor: pointer;
  background: rgba(6, 26, 60, .55); border: 1px solid rgba(140, 200, 255, .45); color: #dfe9ff;
}
.lang-sheet .grp button.on {
  background: linear-gradient(90deg, #60f0fc, #2889ee); color: #fff; border-color: rgba(200, 240, 255, .8);
}

/* ---------------- 抽屉 7 项新页面：只复用既有变量，与 16 张稿同一套卡片体系 ---------------- */
.screen .fcard {
  background: var(--card-fill);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0 16px 14px;
}
.screen .fcard h4 { font-size: 16px; font-weight: 700; color: #eaf2ff; margin: 0 0 8px; }
.screen .fcard p { font-size: 13px; line-height: 1.45; color: #e3eeff; margin-top: 6px; }
.screen .fcard .info { background: rgba(6, 26, 60, .55); border-radius: 10px; padding: 6px 12px; }
.screen .fcard .info .r { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: 13.5px; padding: 5px 0; }
.screen .fcard .info .r .k { color: #dfe9ff; }
.screen .fcard .info .r .v { color: #fff; text-align: end; }
/* mixed digits+unit segments must not interleave under RTL (same fix as .rec .kv) */
.screen .fcard .info .r .v .cy { direction: ltr; unicode-bidi: isolate; }
.screen .fcard .info .r .v .sep { unicode-bidi: isolate; }
.screen .fieldlabel { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; color: #eaf2ff; margin: 14px 16px 8px; }
.screen .plainbox {
  background: var(--input-bg); border: 1px solid rgba(110, 175, 235, .35); border-radius: 10px;
  height: 54px; display: flex; align-items: center; padding: 0 14px; margin: 0 16px;
  font-size: 16px; color: #fff;
}
.screen .notice {
  display: flex; gap: 8px; background: rgba(6, 26, 60, .6); border-radius: 10px; padding: 12px 14px;
  margin: 12px 16px 0; font-size: 13px; color: #dbe7f8; line-height: 1.5;
}

/* ---------------- panel-position-fix ----------------
   问题：.drawer / .lang-sheet 原为 position:absolute 且 bottom/top:0，
   而 .phone 在长页面下高 2585px → 底部面板被推到屏幕外（点了只看到遮罩）。
   修法：改用视口定位(position:fixed)，并把左/右边界对齐居中的 375px 手机框。
   注意：.phone 有 overflow:hidden，但 fixed 元素不受其裁剪（祖先无 transform）。 */
:root { --phw: min(375px, 100vw); }
.drawer-mask,
.lang-mask,
.lang-sheet,
.drawer {
  position: fixed !important;
  inset-inline-start: max(0px, calc(50% - var(--phw) / 2)) !important;
  inset-inline-end: auto !important;
}
.drawer-mask, .lang-mask { top: 0; bottom: 0; width: var(--phw); }
.lang-sheet { bottom: 0; top: auto; width: var(--phw); }
.drawer { top: 0; bottom: 0; width: 207px; }

/* ---------------- panel-position-fix-drawer ----------------
   上一补丁把 .drawer 改成 position:fixed 后，关闭态的 transform:translateX(-100%)
   只移动自身宽度(207px)，不再移出视口 → 抽屉在关闭时也露出来。
   改用 100vw 移出（仅在非 .on 时生效，避免压过 .drawer.on 的开态）。 */
html[dir="ltr"] .drawer:not(.on) { transform: translateX(-100vw) !important; }
html[dir="rtl"] .drawer:not(.on) { transform: translateX(100vw) !important; }

/* ---------------- brand-official ---------------- */
.partners { grid-template-columns: repeat(2, 1fr); }
.partner { gap: 8px; text-decoration: none; }
.partner .plogo { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 20px; }
.partner .plogo img { width: 20px; height: 20px; object-fit: contain; display: block; }
.partner .pmono { font-style: normal; font-weight: 700; font-size: 12px; width: 20px; height: 20px; border-radius: 5px;
  display: grid; place-items: center; background: rgba(255,255,255,.22); }
.partner .pname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.socials img.sico { width: 22px; height: 22px; display: block; filter: brightness(0) invert(1); opacity: .95; }
.socials a:hover img.sico { opacity: 1; }

/* 「立即参与」定位到入单表单时的短暂高亮 */
.hl-pulse { animation: hlPulse 1.6s ease-out; }
@keyframes hlPulse { 0%{box-shadow:0 0 0 0 rgba(95,208,255,.75)} 70%{box-shadow:0 0 0 10px rgba(95,208,255,0)} 100%{box-shadow:0 0 0 0 rgba(95,208,255,0)} }

/* ---------------- acct-sheet（账户面板，规格同语言面板） ---------------- */
.acct-mask { position: fixed; top: 0; bottom: 0; inset-inline-start: max(0px, calc(50% - var(--phw) / 2)); width: var(--phw); background: rgba(2,6,14,.72); z-index: 70; display: none; }
.acct-mask.on { display: block; }
.acct-sheet {
  position: fixed; bottom: 0; inset-inline-start: max(0px, calc(50% - var(--phw) / 2)); inset-inline-end: auto;
  width: var(--phw); z-index: 71; background: var(--panel);
  border-radius: 18px 18px 0 0; border-top: 1px solid rgba(110,175,235,.35);
  box-shadow: 0 -12px 40px rgba(0,0,0,.5); padding: 20px 18px 26px;
  transform: translateY(110%); transition: transform .25s;
}
.acct-sheet.on { transform: translateY(0); }
.acct-me { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; }
.acct-full { flex: 1 1 auto; font-size: 10.5px; letter-spacing: -.1px; color: #cfe0f5; word-break: break-all; line-height: 1.35; font-family: ui-monospace, Consolas, monospace; }
.acct-copy { flex: 0 0 auto; height: 28px; padding: 0 11px; border-radius: 14px; font-family: inherit; font-size: 12px; white-space: nowrap; cursor: pointer;
  background: rgba(6,26,60,.55); border: 1px solid rgba(140,200,255,.45); color: #dfe9ff; }
.acct-list { display: flex; flex-direction: column; gap: 8px; }
.acct-row { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 14px; cursor: pointer;
  border-radius: 11px; background: rgba(6,26,60,.5); border: 1px solid rgba(140,200,255,.28); color: #dfe9ff; font-family: inherit; font-size: 13.5px; }
.acct-row.on { background: linear-gradient(90deg, #60f0fc, #2889ee); color: #fff; border-color: rgba(200,240,255,.8); font-weight: 600; }
.acct-lb { flex: 0 0 auto; }
.acct-ad { flex: 1 1 auto; text-align: end; font-family: ui-monospace, Consolas, monospace; font-size: 12px; opacity: .9; }
.acct-tick { flex: 0 0 auto; }
.acct-hint { margin-top: 12px; font-size: 11.5px; color: #8fb4d9; text-align: center; }
.addr-pill { font-family: inherit; cursor: pointer; }

/* 主人指令 2026-09-24：取消全站小字注解（口径/数据来源类） */
.srcnote, .src-note, [data-srcnote] { display: none !important; }