:root{
  --bg:#ffffff;
  --bg-layer:#ffffff;
  --card:#ffffff;
  --card-tint:#fdfefe;
  --brand:#28cdf0;
  --brand-strong:#28cdf0;
  --accent:#e8965b;
  --accent-strong:#d88548;
  --text:#2a3d46;
  --text-soft:#586d75;
  --text-faint:#7f9298;
  --line:#d8e3e2;
  --ok:#65a98a;
  --warn:#da9a6a;
  --mask:rgba(35,61,72,.52);
  --radius-xs:10px;
  --radius-sm:14px;
  --radius-md:18px;
  --radius-lg:24px;
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:20px;
  --shadow-soft:0 10px 28px rgba(70,110,122,.12);
  --shadow-card:0 6px 18px rgba(95,128,136,.10), 0 1px 0 rgba(255,255,255,.7) inset;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.3s;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
html{scroll-padding-top:64px}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font:14px/1.55 "Inter","Noto Sans","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a,button,input,select{transition:all var(--dur) var(--ease)}
.h5-app{min-height:100vh;padding-bottom:78px}
.h5-header{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:12px;
  background:#28cdf0;
  border-bottom:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(10px);
}
.h5-page-auth-login .h5-header,
.h5-page-auth-register .h5-header{
  background:#28cdf0;
}
.h5-header-left{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.h5-logo{
  min-width:34px;
  max-width:120px;
  height:34px;
  border-radius:0;
  background:transparent;
  border:none;
  color:#f8fffe;display:flex;align-items:center;justify-content:flex-start;font-size:10px;font-weight:700;
}
.h5-logo-img{width:auto;height:100%;max-width:120px;object-fit:contain;border-radius:0}
.h5-site-name,.h5-page-title{
  color:#eef9f7;font-weight:700;min-width:0;flex:1 1 auto;max-width:min(56vw,220px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.h5-page-title{font-size:16px}
.h5-back-btn{
  border:none;
  border-radius:999px;
  padding:8px 12px;
  background:rgba(246,255,253,.20);
  color:#f3fffd;
  font-weight:600;
}
.h5-back-btn:hover,.h5-back-btn:active{background:rgba(246,255,253,.33);transform:translateY(-1px)}
.h5-header-right{display:flex;align-items:center;gap:8px}
.h5-icon-link{
  width:28px;height:28px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(235,250,248,.62);
  background:rgba(249,255,254,.16);
  color:#f5fffd;text-decoration:none;font-size:14px;line-height:1
}
.h5-icon-link:active{transform:translateY(1px)}
.h5-top-link{font-size:12px;color:#ecfbf9;text-decoration:none;font-weight:600}
.lang-form select{
  border:1px solid rgba(233,248,244,.56);
  border-radius:999px;
  padding:5px 10px;
  background:rgba(249,255,253,.26);
  color:#effcfa;
  outline:none;
}
.lang-form select option{color:var(--text)}
.h5-main{padding:12px 14px;max-width:430px;margin:0 auto}
.h5-page-home-index .h5-main{
  padding:0;
  max-width:none;
  margin:0;
}
.h5-page-home-index .h5-section{margin:0}
.h5-page-home-index .h5-home-layout{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.h5-charge-home{padding:10px 0 14px}
.h5-charge-hero{
  background:linear-gradient(145deg,#28cdf0,#14b7da);
  color:#ffffff;
  border-radius:16px;
  padding:18px 14px;
  margin-bottom:12px;
}
.h5-charge-kicker{font-size:12px;font-weight:700;letter-spacing:.04em;opacity:.95}
.h5-charge-hero-title{margin-top:4px;font-size:13px;opacity:.95}
.h5-charge-hero-main{display:flex;gap:10px;align-items:flex-end;margin-top:8px}
.h5-charge-hero-left{flex:1;min-width:0}
.h5-charge-hero-right{width:120px;flex:0 0 120px}
.h5-charge-hero-right img{width:100%;height:auto;display:block;object-fit:contain}
.h5-charge-hero h1{margin:0;font-size:30px;line-height:1.1;letter-spacing:.02em}
.h5-charge-find-btn{
  margin-top:10px;
  display:inline-block;
  text-decoration:none;
  background:#ffffff;
  color:#0a7fa1;
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
}
.h5-charge-find-btn:active{transform:translateY(1px)}
.h5-charge-block{
  background:#ffffff;
  border:1px solid #d8e9ef;
  border-radius:12px;
  padding:12px;
  box-shadow:var(--shadow-card);
  margin-bottom:8px;
}
.h5-charge-block h2{margin:0 0 6px;font-size:17px;line-height:1.3;color:#1f3b47}
.h5-charge-block p{margin:0;color:#526871;font-size:13px;line-height:1.65}
.h5-charge-feature{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:center}
.h5-charge-feature-img img{width:100%;height:100px;object-fit:cover;border-radius:10px}
.h5-charge-feature-text{font-size:13px;color:#526871;line-height:1.65}
.h5-charge-step-grid{display:grid;grid-template-columns:1fr;gap:8px}
.h5-charge-step-card{
  background:#f6fcff;
  border:1px solid #d8e9ef;
  border-radius:10px;
  padding:8px;
}
.h5-charge-step-card img{width:100%;height:118px;object-fit:cover;border-radius:8px;display:block}
.h5-charge-step-card div{margin-top:6px;font-size:12px;color:#385663;font-weight:700;line-height:1.5}
.h5-charge-info-grid{display:grid;grid-template-columns:1fr;gap:8px}
.h5-charge-info-card{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:10px;
  align-items:center;
  background:#ffffff;
  color:#2a3d46;
  border:1px solid #d8e9ef;
  border-radius:12px;
  padding:10px;
  box-shadow:var(--shadow-card);
}
.h5-charge-info-card img{width:96px;height:80px;object-fit:cover;border-radius:8px;display:block}
.h5-charge-info-card div{font-size:13px;line-height:1.6;font-weight:600}
.h5-charge-world{
  margin-top:10px;
  background:linear-gradient(145deg,#ffffff,#f4fcff);
  border:1px solid #d8e9ef;
  border-radius:14px;
  padding:14px 12px;
  text-align:center;
  box-shadow:var(--shadow-card);
}
.h5-charge-world-image img{width:100%;height:140px;object-fit:cover;border-radius:10px;margin-bottom:8px}
.h5-charge-world-title{font-size:13px;color:#5a717a;font-weight:700}
.h5-charge-world-num{font-size:34px;line-height:1.1;font-weight:800;color:#1499be;margin-top:4px}
.h5-charge-world-sub{font-size:12px;color:#6d838a;margin-top:2px}
.h5-section{margin-bottom:14px}
.h5-title{margin:0 0 8px;font-size:20px;line-height:1.3;font-weight:700;color:var(--text)}
.h5-subtitle{margin:0 0 10px;font-size:15px;line-height:1.35;color:var(--text-soft);font-weight:600}
.h5-hero-head{margin-bottom:10px}
.h5-hero-sub{margin:4px 0 0;color:var(--text-soft);font-size:13px}
.h5-banner-wrap{display:grid;gap:10px}
.h5-hero-banner .h5-banner{height:152px}
.h5-banner{
  width:100%;height:138px;object-fit:cover;
  border-radius:var(--radius-md);
  background:linear-gradient(145deg,#eef8f7,#f8fbfb);
  box-shadow:var(--shadow-card);
}
.h5-home-layout{
  width:100%;
  min-height:120px;
  position:relative;
  background:#ffffff;
  overflow:hidden;
  touch-action:manipulation;
}
.h5-home-layout-stage{position:relative;will-change:transform}
.h5-home-layout .h5-home-item{
  position:absolute;
  overflow:hidden;
}
.h5-home-layout .h5-home-item-text{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
}
.h5-home-layout .h5-home-item-image{
  width:100%;
  height:100%;
  object-fit:cover;
}
.h5-pill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.h5-pill-card{
  border-radius:16px;padding:12px;
  text-align:center;font-weight:600;
  color:#defffb;background:linear-gradient(130deg,#52c6bc,#5caeca);
  box-shadow:var(--shadow-soft)
}
.h5-cta-btn{
  display:block;text-decoration:none;text-align:center;
  border-radius:999px;padding:14px 16px;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  color:#fffaf5;font-size:15px;font-weight:700;
  box-shadow:0 14px 28px rgba(208,141,83,.26);
}
.h5-cta-btn:active{transform:translateY(1px)}
.h5-brand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.h5-brand-item{
  border-radius:16px;background:linear-gradient(150deg,#ffffff,#f8fcfb);
  border:1px solid #e2ebea;padding:10px 8px;text-align:center;box-shadow:var(--shadow-card)
}
.h5-brand-item strong{
  display:block;font-size:20px;line-height:1.2;
  font-family:"Roboto Mono","SFMono-Regular","Menlo",Consolas,monospace;
  color:#3b7e82
}
.h5-brand-item span{display:block;margin-top:2px;font-size:11px;color:var(--text-faint)}
.h5-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.h5-card{
  background:linear-gradient(165deg,var(--card),var(--card-tint));
  border:1px solid #e0ecea;
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.h5-product-list{grid-template-columns:1fr}
.h5-product-list .h5-card{
  display:flex;gap:12px;align-items:stretch;padding:10px
}
.h5-product-list .h5-card-media{width:108px;flex:0 0 108px}
.h5-product-list .h5-card-media img,
.h5-product-list .h5-media-fallback{height:108px;border-radius:12px}
.h5-product-list .h5-card-body{padding:0;display:flex;flex-direction:column;justify-content:space-between;flex:1}
.h5-card-media img{width:100%;height:108px;object-fit:cover;background:#ebf4f3}
.h5-media-fallback{height:108px;display:flex;align-items:center;justify-content:center;color:#8aa0a5;background:#edf5f4}
.h5-card-body{padding:10px}
.h5-card-title{
  margin-bottom:4px;font-weight:700;line-height:1.35;
  color:#35535f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.h5-card-meta{font-size:12px;color:var(--text-soft);margin-top:2px}
.h5-tag{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700;
  margin-right:4px
}
.h5-tag.hot{background:linear-gradient(120deg,#f8be92,#f2a36f);color:#6b421f}
.h5-list{display:grid;gap:10px}
.h5-list-item{
  background:linear-gradient(160deg,#ffffff,#f8fbfa);
  border:1px solid #dfe9e8;border-radius:var(--radius-md);
  padding:12px;box-shadow:var(--shadow-card)
}
.h5-list-title{font-weight:700;color:#395662}
.h5-list-title small{font-family:"Roboto Mono","SFMono-Regular","Menlo",Consolas,monospace;color:#7a9097}
.h5-list-meta{font-size:12px;color:var(--text-soft);margin-top:4px}
.h5-order-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.h5-order-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;min-width:132px}
.h5-order-actions form{margin:0}
.h5-order-btn{padding:8px 10px;font-size:12px;line-height:1.2;white-space:nowrap}
.h5-empty{
  padding:20px;text-align:center;color:#72878f;
  background:linear-gradient(145deg,#ffffff,#f8fbfa);
  border-radius:var(--radius-md);border:1px dashed #d8e3e2
}
.h5-form{
  display:grid;gap:8px;
  background:linear-gradient(165deg,#ffffff,#f9fcfb);
  border:1px solid #dbe8e6;border-radius:var(--radius-lg);padding:14px;
  box-shadow:var(--shadow-soft)
}
.h5-form input{
  border:1px solid #cfdddb;border-radius:12px;padding:11px 12px;background:#ffffff;color:var(--text);
  box-shadow:inset 0 2px 5px rgba(96,126,132,.08);
  outline:none;
}
.h5-form select{
  border:1px solid #cfdddb;border-radius:12px;padding:11px 12px;background:#ffffff;color:var(--text);
  box-shadow:inset 0 2px 5px rgba(96,126,132,.08);
  outline:none;
}
.h5-form select:focus{
  border-color:#75cdc5;
  box-shadow:inset 0 2px 5px rgba(96,126,132,.08),0 0 0 3px rgba(96,201,190,.20);
}
.h5-form input:focus{
  border-color:#75cdc5;
  box-shadow:inset 0 2px 5px rgba(96,126,132,.08),0 0 0 3px rgba(96,201,190,.20);
}
.h5-pwd-wrap{position:relative}
.h5-pwd-wrap input{padding-right:64px;width:100%}
.h5-eye-btn{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:none;border-radius:999px;padding:5px 10px;
  background:#edf5f4;color:#55717a;font-size:11px;font-weight:600
}
.h5-eye-btn:active{transform:translateY(-50%) scale(.98)}
.h5-auth-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0 12px}
.h5-auth-switch a{
  display:flex;align-items:center;justify-content:center;
  background:#ffffff;border:1px solid #d1dfdd;border-radius:999px;padding:9px 10px;
  text-decoration:none;color:#4f6670;font-weight:600
}
.h5-auth-switch a.active{
  background:linear-gradient(130deg,var(--brand),var(--brand-strong));
  border-color:#62c5bd;color:#ecfffc
}
.h5-captcha-row{display:grid;grid-template-columns:1fr 132px;gap:8px;align-items:center}
.h5-captcha-img{height:44px;border:1px solid #d2e0de;border-radius:12px;background:#ffffff;cursor:pointer}
.h5-btn{
  display:inline-block;
  background:linear-gradient(135deg,var(--brand),var(--brand-strong));
  color:#edfefb;border:none;border-radius:999px;padding:11px 16px;text-decoration:none;
  font-weight:700;box-shadow:0 12px 24px rgba(66,171,162,.24);
}
.h5-btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
.h5-btn:active{transform:translateY(1px)}
.h5-btn-accent{
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  box-shadow:0 12px 24px rgba(208,141,83,.24);
}
.h5-btn-ghost{
  background:linear-gradient(130deg,#f0f3f3,#e7eded);
  color:#627781;
  box-shadow:none;
}
.h5-ok{background:#e8f5ee;color:#4a8f6f;padding:9px 10px;border-radius:12px;margin-bottom:8px}
.h5-error{background:#fcece4;color:#b26d51;padding:9px 10px;border-radius:12px;margin-bottom:8px}
.h5-tabs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;margin:8px 0;
  background:rgba(255,255,255,.55);
  border:1px solid #dce7e6;border-radius:999px;padding:4px
}
.h5-card-select-list{display:grid;gap:8px}
.h5-bank-card-option{
  display:block;
  border:1px solid #dce8e6;
  border-radius:14px;
  background:linear-gradient(160deg,#ffffff,#f8fbfa);
  padding:10px;
  box-shadow:var(--shadow-card);
}
.h5-bank-card-option input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.h5-bank-card-option input[type="radio"]:checked + .h5-bank-card-body{
  border:1px solid #78cfc8;background:#effcfb;
}
.h5-bank-card-body{border:1px solid transparent;border-radius:10px;padding:8px}
.h5-bank-card-title{font-weight:700;color:#35545f}
.h5-bank-card-no{margin-top:4px;font-family:"Roboto Mono","SFMono-Regular","Menlo",Consolas,monospace;color:#4b6470}
.h5-bank-card-meta{margin-top:4px;font-size:12px;color:#6d838a}
.h5-required-star{color:#ef4444;margin-left:2px;font-weight:700}
.h5-bank-detail-grid{
  margin-top:8px;
  display:grid;
  gap:6px;
}
.h5-bank-detail-item{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:8px;
  align-items:flex-start;
  padding:6px 8px;
  border-radius:10px;
  background:#f3fbfb;
  border:1px solid #dce8e6;
}
.h5-bank-detail-item span{
  color:#6d838a;
  font-size:12px;
}
.h5-bank-detail-item strong{
  color:#2f4a54;
  font-size:13px;
  word-break:break-all;
}
.h5-bank-qr-preview{margin-top:6px}
.h5-bank-qr-preview img{width:92px;height:92px;object-fit:cover;border-radius:10px;border:1px solid #dce8e6;background:#fff}
.h5-qr-clickable{cursor:pointer}
.h5-qr-open-btn{
  margin-top:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  font-size:12px;
}
.h5-qr-inline-row{
  margin-top:6px;
  display:flex;
  gap:8px;
  align-items:center;
}
.h5-qr-inline-row input[type="text"]{
  flex:1;
  min-width:0;
}
.h5-upload-qr-btn{
  white-space:nowrap;
  padding:9px 14px;
}
.h5-bank-card-display .h5-bank-card-body{padding:0;border:none;background:transparent}
.h5-qr-modal-mask{
  position:fixed;
  inset:0;
  z-index:140;
  background:rgba(15,23,42,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
}
.h5-qr-modal-mask.show{opacity:1;pointer-events:auto}
.h5-qr-modal{
  width:min(100%,420px);
  border-radius:16px;
  padding:14px 14px 12px;
  background:#ffffff;
  box-shadow:0 18px 40px rgba(15,23,42,.34);
  position:relative;
}
.h5-qr-close{
  position:absolute;
  right:8px;
  top:8px;
  width:30px;
  height:30px;
  border:none;
  border-radius:999px;
  background:#f3f4f6;
  color:#111827;
  font-size:20px;
  line-height:1;
}
.h5-qr-close:hover{background:#e5e7eb}
.h5-qr-modal-img{
  width:100%;
  max-height:70vh;
  object-fit:contain;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
}
.h5-qr-modal-actions{
  margin-top:12px;
  display:flex;
  justify-content:center;
}

.h5-fund-item.h5-fund-success{border-color:#c8e9d8;background:linear-gradient(160deg,#f8fffb,#f2fbf6)}
.h5-fund-item.h5-fund-danger{border-color:#f0d4d2;background:linear-gradient(160deg,#fff9f9,#fff1f0)}
.h5-fund-item.h5-fund-pending{border-color:#e6e5cf;background:linear-gradient(160deg,#fffef8,#fffdf0)}
.h5-fund-status{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700}
.h5-fund-status-success{background:#e4f6ea;color:#4f8e68}
.h5-fund-status-danger{background:#fde9e8;color:#b05a54}
.h5-fund-status-pending{background:#f7f2df;color:#9e8450}
.h5-fund-status-none{background:transparent;color:#6b7280;padding:0}

.h5-service-wrap{
  min-height:56vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
}
.h5-service-loading{
  width:42px;height:42px;border-radius:999px;
  border:3px solid #cdeeed;border-top-color:#00bebe;
  animation:h5spin 1s linear infinite;
}
.h5-service-loading.done{opacity:.35;animation:none}
.h5-service-text{max-width:320px;color:#42606b;line-height:1.65}
@keyframes h5spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.h5-tabs a{
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:999px;padding:8px 4px;
  color:#607780;text-decoration:none;font-size:12px;font-weight:600;
  border-bottom:2px solid transparent;
}
.h5-tabs a.active{
  color:#3f9d97;
  border-bottom-color:#55b7af;
  background:rgba(95,192,182,.12)
}
.h5-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.h5-menu-grid a{
  background:linear-gradient(155deg,#ffffff,#f8fbfa);
  border:1px solid #dbe7e5;border-radius:14px;padding:11px;text-decoration:none;color:#395462;
  box-shadow:var(--shadow-card);
  text-align:center
}
.h5-menu-list-vertical{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.h5-menu-list-vertical a{
  background:linear-gradient(155deg,#ffffff,#f8fbfa);
  border:1px solid #dbe7e5;border-radius:14px;padding:12px;text-decoration:none;color:#395462;
  box-shadow:var(--shadow-card);text-align:left;display:flex;align-items:center;gap:10px
}
.h5-menu-list-vertical a::before{
  content:"◦";
  width:18px;height:18px;border-radius:999px;background:#e8fbfb;color:#0d8f8f;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700
}
.h5-quick3-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}
.h5-quick3-grid a{
  background:linear-gradient(155deg,#ffffff,#f8fbfa);
  border:1px solid #dbe7e5;border-radius:14px;padding:11px;text-decoration:none;color:#395462;
  box-shadow:var(--shadow-card);text-align:center
}
.h5-user-hero{
  display:flex;gap:12px;align-items:center;position:relative;
  border-radius:22px;padding:14px;
  background:#28cdf0;
  box-shadow:var(--shadow-soft)
}
.h5-user-sec-btn{
  position:absolute;right:12px;top:10px;border:none;background:rgba(255,255,255,.18);color:#f6fffe;
  width:28px;height:28px;border-radius:999px
}
.h5-user-avatar{
  width:58px;height:58px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  color:#f3fffd;font-size:22px;font-weight:700;
  border:1px solid rgba(231,252,248,.76);
  background:rgba(255,255,255,.20)
}
.h5-user-info{flex:1;min-width:0}
.h5-user-name{
  color:#f2fffd;font-size:18px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.h5-user-meta{color:#e8fcf9;font-size:12px;margin-top:4px}
.h5-progress{
  margin-top:8px;height:6px;border-radius:999px;background:rgba(243,255,253,.28);overflow:hidden
}
.h5-progress span{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(120deg,#f8c19a,#ef9d67)
}
.h5-asset-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.h5-asset-card{
  border-radius:16px;background:linear-gradient(165deg,#ffffff,#f8fcfb);
  border:1px solid #dfeaea;padding:12px;
  box-shadow:var(--shadow-card);
  text-align:center;
}
.h5-asset-card span{display:block;font-size:12px;color:var(--text-faint)}
.h5-asset-card strong{
  display:block;margin-top:5px;
  color:#3b7d81;font-size:19px;font-family:"Roboto Mono","SFMono-Regular","Menlo",Consolas,monospace
}
.h5-fund-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.h5-fund-actions .h5-btn{text-align:center}
.h5-logo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.h5-mini-logo{
  width:100%;height:54px;object-fit:contain;
  background:linear-gradient(140deg,#ffffff,#f8fbfa);
  border:1px solid #dce8e6;border-radius:10px;padding:6px
}
.h5-device-status{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}
.h5-d-item{
  border:1px solid #dde8e7;border-radius:14px;padding:10px 8px;text-align:center;
  background:linear-gradient(155deg,#ffffff,#f8fcfb)
}
.h5-d-item span{display:block;font-size:11px;color:var(--text-faint);margin-bottom:2px}
.h5-d-item b{
  font-size:18px;line-height:1.2;
  font-family:"Roboto Mono","SFMono-Regular","Menlo",Consolas,monospace
}
.h5-d-item.up{color:#5d9b7f;background:linear-gradient(145deg,#f3fbf7,#edf8f3)}
.h5-d-item.down{color:#bc8055;background:linear-gradient(145deg,#fdf5ee,#fcefe4)}
.h5-article{
  background:linear-gradient(155deg,#ffffff,#f9fbfa);
  border:1px solid #dce8e6;border-radius:var(--radius-md);padding:12px;line-height:1.7;color:var(--text-soft)
}
.h5-bottom-nav{
  position:fixed;left:0;right:0;bottom:0;height:64px;
  background:#28cdf0;
  border-top:1px solid #d8e4e3;
  backdrop-filter:blur(12px);
  display:grid;grid-template-columns:repeat(4,1fr);z-index:60
}
.h5-lang-panel{
  position:fixed;inset:0;z-index:110;
  background:rgba(15,23,42,.18);
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease);
}
.h5-lang-panel.show{opacity:1;pointer-events:auto}
.h5-lang-panel-inner{
  position:absolute;top:56px;right:12px;left:12px;
  background:#ffffff;border:1px solid #d6e2e2;border-radius:14px;
  box-shadow:0 12px 30px rgba(51,65,85,.18);padding:10px;
}
.h5-lang-title{font-size:12px;color:#64748b;margin-bottom:6px}
.h5-lang-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.h5-lang-item{
  border:1px solid #dbe4e4;background:#fff;border-radius:10px;padding:8px 10px;color:#334155;text-align:left
}
.h5-lang-item.active{border-color:#00cccc;color:#00a5a5;background:#effdfd}

.h5-banner-slider{position:relative;overflow:hidden;border-radius:18px}
.h5-banner-track{display:flex;transition:transform .35s var(--ease);touch-action:pan-y}
.h5-banner-slide{min-width:100%;flex:0 0 100%}
.h5-banner-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px}
.h5-banner-dots i{width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.52);display:block}
.h5-banner-dots i.active{background:#00cccc}

.h5-stepper{display:grid;grid-template-columns:34px 1fr 34px;gap:6px;align-items:center}
.h5-stepper button{
  border:none;background:#e6f9f9;color:#0f766e;border-radius:999px;height:34px;font-weight:700
}
.h5-stepper input{text-align:center}
.h5-bottom-nav a{
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  color:#ebfbff;font-size:13px;font-weight:600;position:relative
}
.h5-bottom-nav a.active{
  color:#ffffff;
}
.h5-bottom-nav a.active::before{
  content:"";position:absolute;top:8px;left:20%;right:20%;height:3px;border-radius:999px;
  background:#ffffff
}
.h5-network-tip{
  position:fixed;top:60px;left:10px;right:10px;z-index:100;
  background:#f7e8d8;color:#9d6b4a;padding:7px 10px;border-radius:12px;font-size:12px;display:none;
  box-shadow:var(--shadow-soft)
}
.h5-modal-mask{
  position:fixed;inset:0;z-index:120;
  background:var(--mask);
  display:flex;align-items:center;justify-content:center;
  padding:20px 12px;
  opacity:0;pointer-events:none;transform:translateY(8px)
}
.h5-modal-mask.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.h5-modal{
  width:min(100%,420px);
  border-radius:24px;
  background:linear-gradient(165deg,rgba(255,255,255,.92),rgba(248,252,251,.93));
  border:1px solid rgba(223,236,234,.95);
  box-shadow:0 22px 50px rgba(71,110,121,.28);
  padding:16px;
}
.h5-modal h3{margin:0 0 12px;text-align:center;color:#35545f;font-size:18px}
.h5-modal-rows{display:grid;gap:10px}
.h5-modal-row{
  display:grid;grid-template-columns:92px 1fr;align-items:center;gap:10px;
  color:var(--text-soft);font-size:13px;
  min-height:42px;
  line-height:1.45;
}
.h5-modal-row strong{
  color:#35535f;text-align:right;
  font-family:"Roboto Mono","SFMono-Regular","Menlo",Consolas,monospace
}
.h5-modal-row input{
  width:100%;border:1px solid #cfdedc;border-radius:999px;padding:9px 12px;text-align:right;
  color:var(--text);box-shadow:inset 0 2px 5px rgba(96,126,132,.08);outline:none
}
.h5-modal-row input:focus{border-color:#79cec7;box-shadow:inset 0 2px 5px rgba(96,126,132,.08),0 0 0 3px rgba(96,201,190,.20)}
.h5-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}

.h5-page-auth-login .h5-main,
.h5-page-auth-register .h5-main{
  min-height:calc(100vh - 176px);
  padding-top:16px;
  display:flex;align-items:center;justify-content:center;
}
.h5-page-auth-login .h5-section,
.h5-page-auth-register .h5-section{width:min(100%,420px);margin-top:8px}
.h5-page-auth-login .h5-title,
.h5-page-auth-register .h5-title{text-align:center}

@media (max-width:360px){
  .h5-card-grid{grid-template-columns:1fr}
  .h5-logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .h5-brand-grid{grid-template-columns:1fr}
  .h5-product-list .h5-card{flex-direction:column}
  .h5-product-list .h5-card-media{width:100%;flex:1}
  .h5-quick3-grid{grid-template-columns:1fr}
  .h5-header-right{gap:4px}
  .lang-form select{max-width:92px}
}
@media (min-width:768px){
  .h5-app{max-width:480px;margin:0 auto;box-shadow:0 0 0 1px rgba(219,233,231,.8),0 20px 50px rgba(98,128,135,.20)}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto;transition:none!important}
}

/* ChargeSPOT reference homepage replica (mobile) */
.csref-page{
  background:#ffffff;
  color:#1f2937;
  width:100%;
  padding-bottom:78px;
  text-align:center;
}
.csref-mv{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#28cdf0 0%,#56d8ef 100%);
  padding:14px 14px 18px;
  min-height:540px;
}
.csref-mv::before{
  content:"";
  position:absolute;
  left:-140px;
  bottom:-96px;
  width:316px;
  height:316px;
  border-radius:999px;
  background:rgba(255,255,255,.24);
}
.csref-mv::after{
  content:"";
  position:absolute;
  right:-128px;
  bottom:-88px;
  width:300px;
  height:300px;
  border-radius:999px;
  background:rgba(255,255,255,.2);
}
.csref-mv-text-top-img{
  position:relative;
  z-index:2;
  display:block;
  width:min(92%,350px);
  height:auto;
  margin:0 auto;
}
.csref-mv-phone{
  position:relative;
  z-index:2;
  display:block;
  width:71%;
  max-width:300px;
  margin:10px auto 0;
}
.csref-find-btn{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:14px auto 0;
  width:calc(100% - 20px);
  max-width:322px;
  height:46px;
  border-radius:13px;
  background:#f2f4f6;
  color:#00a8df;
  text-decoration:none;
  font-size:16px;
  font-weight:500;
  letter-spacing:0;
}
.csref-section{
  padding:22px 14px 0;
}
.csref-section h2{
  margin:0 0 14px;
  color:#00a8df;
  font-size:28px;
  line-height:1.16;
  font-weight:700;
  text-transform:none;
}
.csref-what{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.csref-what img{
  width:100%;
  border-radius:12px;
  display:block;
}
.csref-what h3{
  margin:2px 0 8px;
  font-size:17px;
  font-weight:700;
  color:#111827;
}
.csref-what p{
  margin:0;
  color:#374151;
  font-size:13px;
  line-height:1.55;
}
.csref-step-list{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.csref-step-card{
  border:1px solid #e5edf3;
  border-radius:16px;
  overflow:hidden;
  background:#ffffff;
}
.csref-step-card img{
  width:100%;
  display:block;
}
.csref-step-card h3{
  margin:0;
  padding:12px 14px 14px;
  color:#111827;
  font-size:14px;
  font-weight:700;
}
.csref-info-stack{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.csref-info-card{
  border:1px solid #e5edf3;
  border-radius:16px;
  overflow:hidden;
  background:#ffffff;
}
.csref-info-card > img{
  width:100%;
  display:block;
}
.csref-info-card > div{
  padding:12px 14px 14px;
}
.csref-info-card h3{
  margin:0;
  color:#111827;
  font-size:14px;
  font-weight:700;
}
.csref-info-card p{
  margin:10px 0 0;
  color:#374151;
  font-size:13px;
  line-height:1.55;
}
.csref-pay-icons{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.csref-pay-icons img{
  width:100%;
  max-height:30px;
  object-fit:contain;
}
.csref-compat-icons{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.csref-compat-icons div{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.csref-compat-icons img{
  width:30px;
  height:30px;
  object-fit:contain;
}
.csref-compat-icons span{
  font-size:12px;
  color:#374151;
}
.csref-learn{
  border-top:1px solid #f1f5f9;
  padding-top:22px;
  margin-top:6px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.csref-learn img{
  width:100%;
  border-radius:14px;
}
.csref-learn h3{
  margin:0;
  color:#111827;
  font-size:20px;
  font-weight:700;
}
.csref-learn p{
  margin:10px 0 0;
  font-size:13px;
  color:#374151;
  line-height:1.55;
}
.csref-world{
  margin-top:22px;
  background:#f8fafc;
  border-top:1px solid #e2e8f0;
  border-bottom:1px solid #e2e8f0;
  padding:20px 14px 22px;
}
.csref-world img{
  width:100%;
  display:block;
  border-radius:14px;
}
.csref-world-copy{
  margin-top:14px;
  text-align:center;
  color:#111827;
}
.csref-world-copy > div{
  font-size:18px;
  font-weight:700;
}
.csref-world-copy strong{
  display:block;
  margin-top:8px;
  color:#00a8df;
  font-size:42px;
  line-height:1;
}
.csref-world-copy span{
  display:block;
  margin-top:4px;
  font-size:13px;
  color:#475569;
}
@media (max-width:390px){
  .csref-mv{min-height:500px;padding:12px 12px 16px}
  .csref-find-btn{height:44px;border-radius:12px;font-size:15px}
  .csref-section h2{font-size:26px}
}
@media (max-width:360px){
  .csref-mv{min-height:482px}
  .csref-find-btn{font-size:14px}
  .csref-section h2{font-size:24px}
}