:root{
  --sky-1:#77c6ff;
  --sky-2:#8fe0ff;
  --bg-cloud:#effbff;
  --bg:#0f2357;
  --panel:#ffffff;
  --panel-soft:#fff7da;
  --line:#24417c;
  --text:#17315d;
  --muted:#5b78a5;
  --accent:#ff9c43;
  --accent-2:#ff6f61;
  --green:#39c98a;
  --danger:#ef5b62;
  --purple:#7866ff;
  --shadow:0 14px 0 rgba(20,49,93,.18),0 18px 36px rgba(16,48,92,.2);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--text);font:14px/1.55 Arial,"PingFang SC","Microsoft YaHei",sans-serif;background:
  radial-gradient(circle at 20% 10%,rgba(255,255,255,.75) 0 6%,transparent 6.5%),
  radial-gradient(circle at 80% 20%,rgba(255,255,255,.8) 0 8%,transparent 8.5%),
  linear-gradient(180deg,var(--sky-2) 0%,var(--sky-1) 32%,#d9f6ff 100%);
  background-attachment:fixed;
}
a{text-decoration:none;color:inherit}img{max-width:100%}
.app-shell{max-width:520px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:92px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 14px 12px;position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(231,249,255,.96),rgba(231,249,255,.85));backdrop-filter:blur(14px);border-bottom:3px solid rgba(36,65,124,.12)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-logo{width:44px;height:44px;border-radius:16px;background:#fff;padding:5px;border:3px solid #fff;box-shadow:0 8px 20px rgba(53,111,195,.22)}.brand-name{font-size:17px;font-weight:900;color:#17315d;line-height:1.1}.brand-sub{font-size:11px;color:var(--muted)}
.top-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.lang-btn,.wallet-btn,.ghost-btn,.primary-btn,.danger-btn{border:none;border-radius:18px;padding:11px 14px;cursor:pointer;font-weight:800;letter-spacing:.2px;box-shadow:0 5px 0 rgba(28,58,110,.12);transition:transform .15s ease, box-shadow .15s ease}
.lang-btn:active,.wallet-btn:active,.ghost-btn:active,.primary-btn:active,.danger-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(28,58,110,.12)}
.lang-btn,.ghost-btn{background:#fff;color:#355798;border:2px solid #d1e7ff}
.wallet-btn,.primary-btn{background:linear-gradient(180deg,#ffca6b,#ff9c43);color:#fff;border:2px solid rgba(255,255,255,.65)}
.danger-btn{background:linear-gradient(180deg,#ff8a8a,#ef5b62);color:#fff;border:2px solid rgba(255,255,255,.65)}
.btn-light{background:#fff;color:#355798;border:2px solid #d1e7ff;border-radius:18px;padding:11px 14px;cursor:pointer;font-weight:800;letter-spacing:.2px;box-shadow:0 5px 0 rgba(28,58,110,.12)}
.page{padding:14px}
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#ffe47b,#fff1a6);border:4px solid rgba(255,255,255,.7);border-radius:28px;padding:20px 18px 18px;box-shadow:var(--shadow)}
.hero::before{content:"";position:absolute;right:-24px;bottom:-24px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,#ffffff 0,#ffffff 35%,rgba(255,255,255,0) 67%);opacity:.45}
.hero h1{margin:0 0 8px;font-size:28px;line-height:1.12;color:#2b4c7f;max-width:76%}.hero p{margin:0;color:#5a6e4a;max-width:74%}
.hero-mascot{position:absolute;right:10px;bottom:8px;width:120px;filter:drop-shadow(0 8px 12px rgba(68,90,14,.18))}
.quick-grid,.row,.profile-cards,.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
.card,.quick-card,.feature-card{background:var(--panel);border:3px solid rgba(255,255,255,.8);border-radius:24px;padding:14px;box-shadow:var(--shadow)}
.quick-card{background:linear-gradient(180deg,#ffffff,#f8fcff)}
.feature-card{background:linear-gradient(180deg,#fffdf6,#ffffff)}
.card h3,.feature-card h3{margin:0 0 8px;font-size:16px}
.card .sub,.feature-card .sub,.small{color:var(--muted);font-size:12px}
.stat{font-size:24px;font-weight:900;margin-top:8px;color:#21447f}
.icon-badge{width:42px;height:42px;border-radius:16px;display:grid;place-items:center;font-size:22px;background:linear-gradient(180deg,#fefefe,#eef8ff);box-shadow:inset 0 -3px 0 rgba(59,111,173,.08)}
.section-title{display:flex;justify-content:space-between;align-items:center;margin:20px 2px 10px}.section-title h2{margin:0;font-size:19px;color:#234479}
.plan-list,.nft-grid,.bill-list{display:flex;flex-direction:column;gap:12px}
.plan-item,.nft-item,.bill-item{background:linear-gradient(180deg,#ffffff,#fbfdff);border:3px solid rgba(255,255,255,.8);border-radius:24px;padding:14px;box-shadow:var(--shadow)}
.plan-top,.nft-top{display:flex;gap:12px;align-items:flex-start}.plan-thumb,.nft-thumb{width:88px;height:88px;border-radius:22px;background:#eef8ff;object-fit:cover;border:3px solid #fff;box-shadow:0 8px 18px rgba(72,120,198,.18)}
.tag{display:inline-block;padding:5px 10px;border-radius:999px;font-size:11px;background:#e7f4ff;color:#2e5b9c;margin-right:6px;font-weight:800;border:2px solid rgba(255,255,255,.75)}.tag.gold{background:#fff2c5;color:#8c6420}
.meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}.meta-cell{background:linear-gradient(180deg,#f7fbff,#edf6ff);border:2px solid #dcebff;padding:10px;border-radius:18px}.meta-label{font-size:11px;color:var(--muted)}.meta-value{font-size:15px;font-weight:900;margin-top:4px;color:#21447f}
.bill-item{display:flex;justify-content:space-between;gap:10px;align-items:center}.bill-main{min-width:0}.bill-main .title{font-weight:900}.bill-main .desc{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bill-amt{font-weight:900;color:#21447f}
.search-bar{display:flex;gap:8px;margin-bottom:12px}.search-bar input,.search-bar select,.search-bar textarea,.form-input{width:100%;background:#fff;color:var(--text);border:3px solid #dcebff;border-radius:18px;padding:12px 13px;outline:none}.search-bar button{background:linear-gradient(180deg,#8f8cff,#6a68ff);border:none;color:#fff;border-radius:18px;padding:12px 14px;font-weight:800;box-shadow:0 5px 0 rgba(28,58,110,.12)}
.alert{background:rgba(255,95,95,.14);border:2px solid rgba(255,95,95,.35);padding:12px;border-radius:18px;color:#a43b46;box-shadow:var(--shadow)}
.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);max-width:520px;width:100%;display:grid;grid-template-columns:repeat(4,1fr);background:linear-gradient(180deg,rgba(247,254,255,.98),rgba(236,249,255,.96));backdrop-filter:blur(14px);border-top:3px solid rgba(255,255,255,.75);box-shadow:0 -8px 30px rgba(66,131,213,.12)}
.bottom-nav a{padding:14px 8px;text-align:center;color:#6c89b4;font-weight:900;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center}.bottom-nav a.active{color:#24417c;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,245,209,.75))}.bottom-nav a span{font-size:12px}
.modal-mask{position:fixed;inset:0;background:rgba(13,33,65,.42);display:none;align-items:center;justify-content:center;padding:20px;z-index:30}.modal-mask.show{display:flex}.modal-card{width:min(100%,420px);background:linear-gradient(180deg,#fffdf4,#ffffff);border:4px solid rgba(255,255,255,.82);border-radius:26px;overflow:hidden;box-shadow:0 18px 40px rgba(18,52,102,.24)}
.modal-head,.modal-foot{padding:14px 16px;border-bottom:2px dashed rgba(91,120,165,.18)}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h3{margin:0;color:#21447f}.modal-body{padding:16px;color:#355279}.modal-foot{border-bottom:none;display:flex;justify-content:flex-end}.modal-close{background:#f0f7ff;border:2px solid #d8ecff;color:#24417c;font-size:22px;cursor:pointer;border-radius:14px;width:40px;height:40px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.table-mini{width:100%;border-collapse:collapse}.table-mini td{padding:8px 0;border-bottom:1px dashed rgba(65,106,172,.2);vertical-align:top}
.link-list{display:flex;gap:10px;flex-wrap:wrap}.link-pill{background:linear-gradient(180deg,#ffffff,#f3faff);border-radius:999px;padding:10px 14px;border:2px solid #dbeeff;font-weight:800;color:#2b4c7f}.empty{padding:22px;text-align:center;color:var(--muted);background:rgba(255,255,255,.8);border-radius:20px;border:2px dashed #cfe7ff}
.hero-sticker{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.7);padding:7px 12px;border-radius:999px;font-size:12px;font-weight:800;color:#4b6497;margin-bottom:10px}
.pet-note{margin-top:12px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.66);color:#4b6497;border:2px dashed rgba(255,255,255,.7)}
@media (max-width:420px){.hero h1{font-size:25px;max-width:100%}.hero p{max-width:100%;padding-right:92px}.hero-mascot{width:96px;right:8px;bottom:8px}.brand-name{font-size:15px}.wallet-btn{padding:9px 10px;font-size:12px}.quick-grid,.row,.profile-cards,.feature-grid,.meta-grid{grid-template-columns:1fr}}

.compact-stack{display:flex;flex-direction:column;gap:14px}.compact-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.price-line{font-size:12px;color:var(--muted);margin-top:6px}.market-note{background:rgba(255,255,255,.72);border:2px dashed #dbeeff;border-radius:18px;padding:12px;color:#496a99}.badge-line{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.label-strong{font-size:12px;color:var(--muted)}

.social-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.social-link{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.72);padding:10px 14px;border-radius:999px;border:2px solid rgba(255,255,255,.7);font-weight:800;color:#2b4c7f}.social-link img{width:18px;height:18px;border-radius:6px;object-fit:cover}.help-inline{font-size:12px;color:var(--muted)}
.hero-card{display:flex;gap:16px;align-items:center;background:linear-gradient(180deg,#ffe47b,#fff1a6);border:4px solid rgba(255,255,255,.7);border-radius:28px;padding:20px 18px 18px;box-shadow:var(--shadow)}
.hero-copy{flex:1}.hero-tag{display:inline-flex;background:rgba(255,255,255,.7);padding:7px 12px;border-radius:999px;font-size:12px;font-weight:800;color:#4b6497;margin-bottom:10px}.hero-card h1{margin:0 0 8px;font-size:28px;line-height:1.12;color:#2b4c7f}.hero-card p{margin:0;color:#5a6e4a}.hero-art img{width:130px;max-width:34vw;filter:drop-shadow(0 8px 12px rgba(68,90,14,.18))}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}.stat-item{background:var(--panel);border:3px solid rgba(255,255,255,.8);border-radius:22px;padding:12px;box-shadow:var(--shadow)}.stat-item span{display:block;font-size:12px;color:var(--muted)}.stat-item strong{display:block;font-size:22px;color:#21447f;margin-top:6px}
.social-strip{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.social-btn,.link-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}.social-btn{background:rgba(255,255,255,.76);padding:10px 14px;border-radius:999px;border:2px solid rgba(255,255,255,.7);font-weight:800;color:#2b4c7f}.social-btn img{width:18px;height:18px;border-radius:6px;object-fit:cover}
@media (max-width:520px){.stats-grid{grid-template-columns:repeat(2,1fr)}.hero-card{padding-right:12px}.hero-card h1{font-size:24px}}

.lang-switch{position:relative}.lang-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:2px solid #d1e7ff;border-radius:18px;padding:8px;box-shadow:var(--shadow);min-width:138px;z-index:25}.lang-menu.show{display:flex;flex-direction:column;gap:6px}.lang-option{display:flex;align-items:center;gap:8px;background:#f8fcff;border:2px solid #dcebff;border-radius:14px;padding:10px 12px;color:#24417c;font-weight:800;cursor:pointer}.flag{font-size:1em;line-height:1}.lang-btn{display:inline-flex;align-items:center;gap:8px}
.invite-bill-box{max-height:220px;overflow:auto;padding-right:4px}.invite-bill-box .bill-item{margin-bottom:10px}.invite-bill-box .bill-item:last-child{margin-bottom:0}.pager{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:12px}.pager button{background:#fff;border:2px solid #dcebff;color:#24417c;border-radius:14px;padding:8px 12px;font-weight:800;cursor:pointer}.pager .page-text{font-size:12px;color:var(--muted)}
.plan-item{position:relative}.plan-thumb.plan-float{position:absolute;top:14px;right:14px;width:78px;height:78px}.plan-content{padding-right:90px}.intro-socials{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}.bill-item.compact{padding:10px 12px}.bill-item.compact .desc{font-size:11px}


.modal-body{word-break:break-word;overflow-wrap:anywhere}
.table-mini td{word-break:break-word;overflow-wrap:anywhere}
.market-top{align-items:flex-start}
.market-main{min-width:0}
.market-main .small{white-space:normal;word-break:break-all}
.market-meta{grid-template-columns:1fr}
@media (max-width:520px){
  .search-bar{display:grid;grid-template-columns:1fr 1fr auto;align-items:stretch}
  .search-bar input{min-width:0}
  .nft-top.market-top{flex-direction:column}
  .nft-top.market-top .nft-thumb{width:100%;max-width:120px;height:auto;aspect-ratio:1/1}
  .nft-item .actions{display:grid;grid-template-columns:1fr;}
  .modal-card{width:min(100%,360px)}
}

.pet-compact{padding:12px;border-radius:20px}.pet-card-top{position:relative}.pet-float{position:absolute;right:0;top:0;width:74px;height:74px;border-radius:18px}.pet-main{min-width:0}.compact-meta .meta-cell{padding:8px;border-radius:14px}.compact-meta .meta-value{font-size:14px}.meta-span{grid-column:1/-1}.plan-item{padding:12px;border-radius:20px}.plan-item .meta-grid{margin-top:8px}.plan-item .meta-cell{padding:8px;border-radius:14px}.plan-item .meta-value{font-size:14px}.plan-item .plan-content{padding-right:82px}.plan-item .plan-thumb.plan-float{width:70px;height:70px;border-radius:18px} .market-main .actions,.pet-main .actions{display:flex;gap:8px;flex-wrap:wrap}.market-main .actions .primary-btn,.market-main .actions .danger-btn,.pet-main .actions .primary-btn,.pet-main .actions .danger-btn,.pet-main .actions .btn-light{padding:9px 12px;border-radius:14px;font-size:12px}.bill-main .desc{white-space:normal}.hash-btn{display:inline-flex;margin-top:8px} @media(max-width:420px){.plan-item .meta-grid,.compact-meta{grid-template-columns:repeat(2,1fr)} .pet-float{width:66px;height:66px} .plan-item .plan-thumb.plan-float{width:64px;height:64px}}