@charset "UTF-8";
/* ==========================================================================
   XiaoQu Space - smartwatch UI
   - round & square screen safe layout
   - ES5 / old WebView friendly (prefixed flex, static color fallbacks)
   - no backdrop-filter / filter / sticky / gap / grid
   ========================================================================== */
/* ==========================================================================
   ========================================================================== */

:root{
  --bg:#05070b; --bg2:#080c12; --card:#111722; --card2:#0c121b;
  --line:#212b3a; --line2:#2c3849;
  --tx:#e9eff8; --tx2:#9fadc2; --tx3:#6b7a8f;
  --pri:#2ee6b0; --pri-d:#10b992; --pri-ink:#04231b;
  --blue:#6aa8ff; --violet:#a78bfa; --amber:#ffb02e; --red:#ff5d73; --pink:#ff7ab8;
  --pad:16px; --radius:16px;
}
html.theme-light{
  --bg:#f1f4f9; --bg2:#e9eef6; --card:#ffffff; --card2:#f6f9fd;
  --line:#e0e7f1; --line2:#cfd9e8;
  --tx:#0f172a; --tx2:#57677e; --tx3:#8494a9;
  --pri:#06b992; --pri-d:#049e7c; --pri-ink:#ffffff;
}
html.round{ --pad:30px; }

*{ -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
html{ background:#05070b; background:var(--bg); }
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
  font-size:14px; line-height:1.45; color:#e9eff8; color:var(--tx);
  background:#05070b; background:var(--bg);
  -webkit-text-size-adjust:100%; -webkit-user-select:none; user-select:none;
  overscroll-behavior:none; min-height:100%; touch-action:manipulation;
  -webkit-touch-callout:none;
}
input,textarea,select{ -webkit-user-select:text; user-select:text; font-family:inherit; }
button{ font-family:inherit; }
a{ color:#2ee6b0; color:var(--pri); text-decoration:none; }
img{ border:0; }
h1,h2,h3,h4,p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

.shell{ max-width:520px; margin:0 auto; min-height:100%; position:relative; }
@media (min-width:720px){
  html{ background:#020407; }
  body{ background:#020407; }
  .shell{ background:#05070b; background:var(--bg); border-left:1px solid #151c27; border-right:1px solid #151c27; box-shadow:0 0 60px rgba(0,0,0,.6); }
}

.topbar{
  position:fixed; left:0; right:0; top:0; z-index:40; height:62px;
  padding-top:10px; box-sizing:border-box; pointer-events:none;
  background:#05070b;
  background:-webkit-linear-gradient(top,#05070b 62%,rgba(5,7,11,0));
  background:linear-gradient(180deg,#05070b 62%,rgba(5,7,11,0));
}
html.theme-light .topbar{
  background:#f1f4f9;
  background:-webkit-linear-gradient(top,#f1f4f9 62%,rgba(241,244,249,0));
  background:linear-gradient(180deg,#f1f4f9 62%,rgba(241,244,249,0));
}
.tb{
  pointer-events:auto; display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  width:236px; max-width:86%; height:42px; margin:0 auto; padding:2px;
  box-sizing:border-box; border-radius:21px;
  background:#0b111b; background:var(--card2);
  border:1px solid #212b3a; border-color:var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.tb-btn{
  -webkit-flex:0 0 38px; flex:0 0 38px; width:38px; height:38px; padding:0;
  border:0; border-radius:50%; background:transparent; color:#9fadc2; color:var(--tx2);
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center;
  cursor:pointer; outline:none;
}
.tb-btn:active{ background:rgba(255,255,255,.10); }
html.theme-light .tb-btn:active{ background:rgba(0,0,0,.06); }
.tb-t{
  -webkit-box-flex:1; -webkit-flex:1 1 auto; flex:1 1 auto; min-width:0;
  text-align:center; font-size:13px; font-weight:700; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 2px;
}
.tb-t small{ display:block; font-size:9px; font-weight:500; color:#6b7a8f; color:var(--tx3); margin-top:-1px; }
.tb-time{
  -webkit-flex:0 0 48px; flex:0 0 48px; width:48px; text-align:center;
  font-size:11px; font-weight:600; color:#9fadc2; color:var(--tx2); letter-spacing:.2px;
}
.tb-dot{ position:absolute; top:7px; right:7px; width:6px; height:6px; border-radius:50%; background:#ff5d73; background:var(--red); }

.page{ padding:66px 16px 30px; padding-left:var(--pad); padding-right:var(--pad); min-height:100%; box-sizing:border-box; }
.page.flush{ padding-left:0; padding-right:0; }
.page.bare{ padding-top:28px; }
.page.flush > .flush-pad{ padding-left:16px; padding-right:16px; padding-left:var(--pad); padding-right:var(--pad); }
.fade{ -webkit-animation:fade .18s ease both; animation:fade .18s ease both; }
@-webkit-keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes fade{ from{opacity:0} to{opacity:1} }

.row{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center; }
.col{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; flex-direction:column; }
.between{ -webkit-box-pack:justify; -webkit-justify-content:space-between; justify-content:space-between; }
.center{ -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center; }
.grow{ -webkit-box-flex:1; -webkit-flex:1 1 auto; flex:1 1 auto; min-width:0; }
.wrap{ -webkit-flex-wrap:wrap; flex-wrap:wrap; }
.none{ display:none !important; }
.ell{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clamp1{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.clamp2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.t1{ color:#e9eff8; color:var(--tx); }
.t2{ color:#9fadc2; color:var(--tx2); }
.t3{ color:#6b7a8f; color:var(--tx3); }
.pri{ color:#2ee6b0; color:var(--pri); }
.amber{ color:#ffb02e; color:var(--amber); }
.red{ color:#ff5d73; color:var(--red); }
.fs9{ font-size:9px; } .fs10{ font-size:10px; } .fs11{ font-size:11px; }
.fs12{ font-size:12px; } .fs13{ font-size:13px; } .fs14{ font-size:14px; }
.fs15{ font-size:15px; } .fs16{ font-size:16px; } .fs17{ font-size:17px; }
.fs18{ font-size:18px; } .fs22{ font-size:22px; }
.fw5{ font-weight:500; } .fw6{ font-weight:600; } .fw7{ font-weight:700; }
.mt2{ margin-top:2px } .mt4{ margin-top:4px } .mt6{ margin-top:6px } .mt8{ margin-top:8px }
.mt10{ margin-top:10px } .mt12{ margin-top:12px } .mt14{ margin-top:14px } .mt16{ margin-top:16px }
.mt20{ margin-top:20px } .mt24{ margin-top:24px }
.mb4{ margin-bottom:4px } .mb6{ margin-bottom:6px } .mb8{ margin-bottom:8px }
.mb10{ margin-bottom:10px } .mb12{ margin-bottom:12px } .mb16{ margin-bottom:16px }
.mr4{ margin-right:4px } .mr6{ margin-right:6px } .mr8{ margin-right:8px }
.mr10{ margin-right:10px } .mr12{ margin-right:12px }
.ml4{ margin-left:4px } .ml6{ margin-left:6px } .ml8{ margin-left:8px } .ml12{ margin-left:12px }
.tc{ text-align:center } .tr{ text-align:right }
.pre{ white-space:pre-wrap; word-break:break-word; }
.break{ word-break:break-all; }

.btn{
  display:-webkit-inline-box; display:-webkit-inline-flex; display:inline-flex;
  -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center;
  min-height:46px; padding:0 18px; border-radius:15px; box-sizing:border-box;
  border:1px solid #212b3a; border-color:var(--line);
  background:#111722; background:var(--card); color:#e9eff8; color:var(--tx);
  font-size:14px; font-weight:600; cursor:pointer; outline:none;
  -webkit-transition:-webkit-transform .12s ease,opacity .12s ease;
  transition:transform .12s ease,opacity .12s ease;
  -webkit-appearance:none; appearance:none;
}
.btn:active{ -webkit-transform:scale(.97); transform:scale(.97); opacity:.92; }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.btn svg{ margin-right:7px; }
.btn-pri{ background:#2ee6b0; border-color:transparent; color:#04231b;
  background:-webkit-linear-gradient(135deg,#3bf0bd,#12b894);
  background:linear-gradient(135deg,#3bf0bd,#12b894);
  color:#04231b; box-shadow:0 6px 16px rgba(46,230,176,.18);
}
html.theme-light .btn-pri{ background:#06b992; background:-webkit-linear-gradient(135deg,#0ac39a,#04876a); background:linear-gradient(135deg,#0ac39a,#04876a); color:#fff; }
.btn-ghost{ background:transparent; }
.btn-soft{ background:#0f1a22; border-color:#1d3a35; color:#2ee6b0; color:var(--pri); }
html.theme-light .btn-soft{ background:#e6f9f2; border-color:#bdeedd; color:#04816a; }
.btn-danger{ background:#2a1319; border-color:#4a2029; color:#ff7b8d; }
.btn-sm{ min-height:36px; padding:0 13px; font-size:12px; border-radius:12px; }
.btn-xs{ min-height:30px; padding:0 10px; font-size:11px; border-radius:10px; }
.btn-block{ display:-webkit-box; display:-webkit-flex; display:flex; width:100%; }
.btn-icon{ width:46px; padding:0; }
.btn-icon svg{ margin:0; }

.ibtn{
  width:38px; height:38px; border-radius:50%; padding:0; border:1px solid #212b3a;
  border-color:var(--line); background:#111722; background:var(--card); color:#9fadc2; color:var(--tx2);
  display:-webkit-inline-box; display:-webkit-inline-flex; display:inline-flex;
  -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center;
  cursor:pointer; outline:none; -webkit-flex:0 0 auto; flex:0 0 auto;
}
.ibtn:active{ opacity:.8; -webkit-transform:scale(.95); transform:scale(.95); }

.card{
  background:#111722; background:var(--card);
  border:1px solid #212b3a; border-color:var(--line);
  border-radius:16px; border-radius:var(--radius);
  padding:14px; box-sizing:border-box;
}
.card.p0{ padding:0; overflow:hidden; }
.card-h{ font-size:13px; font-weight:700; margin-bottom:10px; }

.item{
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  padding:11px 12px; margin-bottom:8px; border-radius:16px; box-sizing:border-box;
  background:#111722; background:var(--card);
  border:1px solid #212b3a; border-color:var(--line);
  cursor:pointer; -webkit-transition:-webkit-transform .12s ease; transition:transform .12s ease;
}
.item:active{ -webkit-transform:scale(.985); transform:scale(.985); }
.item-flat{ background:transparent; border:0; border-bottom:1px solid #212b3a; border-bottom-color:var(--line); border-radius:0; padding:14px 2px; margin:0; }
.item-flat:last-child{ border-bottom:0; }
.item-top{ -webkit-box-align:start; -webkit-align-items:flex-start; align-items:flex-start; }

.sec{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:justify; -webkit-justify-content:space-between; justify-content:space-between; margin:20px 2px 10px; }
.sec h3{ font-size:13px; font-weight:700; letter-spacing:.3px; }
.sec h3:before{ content:""; display:inline-block; width:3px; height:12px; border-radius:2px; margin-right:7px;
  vertical-align:-1px; background:#2ee6b0; background:var(--pri); }
.sec .more{ font-size:11px; color:#6b7a8f; color:var(--tx3); }
.sec:first-child{ margin-top:6px; }

.tag{
  display:inline-block; padding:1px 6px; border-radius:6px; font-size:9px; font-weight:600;
  line-height:15px; vertical-align:1px; margin-left:3px;
  background:#152030; color:#8fb6ff;
}
.tag.pri{ background:rgba(46,230,176,.12); color:#2ee6b0; }
.tag.amber{ background:rgba(255,176,46,.13); color:#ffb02e; }
.tag.red{ background:rgba(255,93,115,.13); color:#ff7b8d; }
.tag.violet{ background:rgba(167,139,250,.14); color:#b9a4ff; }
.tag.solid{ background:#2ee6b0; color:#04231b; }
.badge-dot{
  display:inline-block; min-width:15px; height:15px; line-height:15px; padding:0 4px;
  border-radius:8px; background:#ff5d73; background:var(--red); color:#fff;
  font-size:9px; font-weight:700; text-align:center; box-sizing:border-box;
}

.ph{
  position:relative; display:inline-block; overflow:hidden; vertical-align:middle;
  -webkit-flex:0 0 auto; flex:0 0 auto;
  background:#18212e;
  background:-webkit-linear-gradient(135deg,#1d2837,#121a25);
  background:linear-gradient(135deg,#1d2837,#121a25);
  text-align:center;
}
.ph:before{
  content:attr(data-ph); position:absolute; left:0; right:0; top:50%;
  -webkit-transform:translateY(-50%); transform:translateY(-50%);
  font-size:13px; font-weight:700; color:#5f7089; letter-spacing:0;
}
.ph img{
  position:absolute; left:0; top:0; width:100%; height:100%; display:block;
  -o-object-fit:cover; object-fit:cover; z-index:1; background:transparent;
}
.ph.is-fail img{ display:none; }
html.theme-light .ph{ background:#e9eff7; background:-webkit-linear-gradient(135deg,#eef3f9,#e2e9f3); background:linear-gradient(135deg,#eef3f9,#e2e9f3); }
html.theme-light .ph:before{ color:#8496ad; }
.ph.round{ border-radius:50%; }
.ph.round:before{ font-size:12px; }

.label{ display:block; font-size:11px; font-weight:600; color:#9fadc2; color:var(--tx2); margin:0 0 6px 2px; }
.field{
  display:block; width:100%; box-sizing:border-box; height:48px; padding:0 14px;
  border-radius:14px; border:1px solid #212b3a; border-color:var(--line);
  background:#0b111a; background:var(--card2); color:#e9eff8; color:var(--tx);
  font-size:14px; outline:none; -webkit-appearance:none; appearance:none;
}
.field:focus{ border-color:#2ee6b0; border-color:var(--pri); }
.field::-webkit-input-placeholder{ color:#5f7089; }
.field::-moz-placeholder{ color:#5f7089; }
textarea.field{ height:auto; min-height:104px; padding:12px 14px; line-height:1.55; resize:none; }
select.field{ padding-right:34px; background-image:none; }
.form-row{ margin-bottom:12px; }
.hint{ font-size:10px; color:#6b7a8f; color:var(--tx3); margin:6px 2px 0; }
.err{ font-size:11px; color:#ff7b8d; color:var(--red); margin-top:8px; min-height:14px; }

.seg{ display:-webkit-box; display:-webkit-flex; display:flex; padding:3px; border-radius:14px;
  background:#0b111a; background:var(--card2); border:1px solid #212b3a; border-color:var(--line); margin-bottom:12px; }
.seg button{
  -webkit-box-flex:1; -webkit-flex:1 1 0; flex:1 1 0; height:36px; border:0; border-radius:11px;
  background:transparent; color:#9fadc2; color:var(--tx2); font-size:12px; font-weight:600;
  outline:none; cursor:pointer; padding:0 6px;
}
.seg button.on{ background:#182233; background:var(--card); color:#e9eff8; color:var(--tx);
  box-shadow:0 2px 8px rgba(0,0,0,.25); }
html.theme-light .seg button.on{ box-shadow:0 2px 8px rgba(20,40,80,.08); }

.chips{
  display:-webkit-box; display:-webkit-flex; display:flex; overflow-x:auto; overflow-y:hidden;
  padding:1px 0 6px; -webkit-overflow-scrolling:touch; white-space:nowrap;
  scrollbar-width:none; -ms-overflow-style:none;
}
.chips::-webkit-scrollbar{ display:none; height:0; }
.chip{
  -webkit-flex:0 0 auto; flex:0 0 auto; height:34px; line-height:32px; padding:0 14px;
  box-sizing:border-box; margin-right:8px; border-radius:17px; font-size:12px; font-weight:600;
  color:#9fadc2; color:var(--tx2); background:#0d141e; background:var(--card2);
  border:1px solid #212b3a; border-color:var(--line); cursor:pointer; white-space:nowrap;
}
.chip.on{ background:#2ee6b0; background:var(--pri); border-color:transparent; color:#04231b; }
html.theme-light .chip.on{ color:#fff; }

.loading{ text-align:center; color:#6b7a8f; color:var(--tx3); font-size:12px; padding:26px 0; }
.spinner{
  display:inline-block; width:18px; height:18px; border-radius:50%;
  border:2px solid #212b3a; border-top-color:#2ee6b0; border-top-color:var(--pri);
  -webkit-animation:spin .7s linear infinite; animation:spin .7s linear infinite;
  vertical-align:middle; margin-right:8px;
}
@-webkit-keyframes spin{ to{ -webkit-transform:rotate(360deg) } }
@keyframes spin{ to{ transform:rotate(360deg) } }
.empty{ text-align:center; padding:34px 10px; color:#6b7a8f; color:var(--tx3); font-size:12px; }
.empty .e-ico{ width:54px; height:54px; border-radius:18px; margin:0 auto 12px; color:#5f7089;
  background:#0d141e; background:var(--card2); border:1px solid #212b3a; border-color:var(--line);
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center; }
.empty .btn{ margin-top:14px; }
.sk{ padding:4px 0; }
.sk-i{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  padding:12px; margin-bottom:8px; border-radius:16px; background:#111722; background:var(--card);
  border:1px solid #212b3a; border-color:var(--line); }
.sk-sq{ width:44px; height:44px; border-radius:12px; margin-right:12px; background:#182233; background:var(--card2);
  -webkit-flex:0 0 44px; flex:0 0 44px; }
.sk-l{ height:10px; border-radius:5px; background:#182233; background:var(--card2); margin-bottom:8px; }
.sk-l.w90{ width:90%; } .sk-l.w70{ width:70%; } .sk-l.w40{ width:40%; } .sk-l.w55{ width:55%; }
.pulse{ -webkit-animation:pulse 1.4s ease-in-out infinite; animation:pulse 1.4s ease-in-out infinite; }
@-webkit-keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.55} }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.55} }

.mask{
  position:fixed; left:0; right:0; top:0; bottom:0; z-index:100;
  background:rgba(0,0,0,.66); display:none;
  -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center;
  padding:18px; box-sizing:border-box;
}
.mask.show{ display:-webkit-box; display:-webkit-flex; display:flex; }
.modal{
  position:relative; width:100%; max-width:330px; max-height:82%; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:#101722; background:var(--card); border:1px solid #2a3648; border-color:var(--line2);
  border-radius:22px; padding:18px 16px; box-sizing:border-box;
  -webkit-animation:pop .16s ease both; animation:pop .16s ease both;
}
@-webkit-keyframes pop{ from{opacity:0;-webkit-transform:scale(.96)} to{opacity:1;-webkit-transform:scale(1)} }
@keyframes pop{ from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
.modal h3{ font-size:15px; font-weight:700; margin-bottom:6px; text-align:center; }
.modal .m-sub{ font-size:11px; color:#6b7a8f; color:var(--tx3); text-align:center; margin-bottom:14px; }
.modal .m-actions{ display:-webkit-box; display:-webkit-flex; display:flex; margin-top:16px; }
.modal .m-actions .btn{ -webkit-box-flex:1; -webkit-flex:1 1 0; flex:1 1 0; }
.modal .m-actions .btn + .btn{ margin-left:8px; }
.modal .close-x{
  position:absolute; right:8px; top:8px; width:30px; height:30px; border:0; border-radius:50%;
  background:transparent; color:#6b7a8f; color:var(--tx3);
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center;
}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; top:72px; z-index:200; max-width:78%;
  -webkit-transform:translateX(-50%); transform:translateX(-50%);
  background:rgba(18,26,38,.97); color:#e9eff8; border:1px solid #2c3849;
  border-radius:14px; padding:9px 15px; font-size:12px; font-weight:500; text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.5); -webkit-animation:tin .18s ease both; animation:tin .18s ease both;
  pointer-events:none; word-break:break-word;
}
html.theme-light .toast{ background:rgba(255,255,255,.98); color:#0f172a; border-color:#e0e7f1; }
@-webkit-keyframes tin{ from{opacity:0;margin-top:-8px} to{opacity:1;margin-top:0} }
@keyframes tin{ from{opacity:0;margin-top:-8px} to{opacity:1;margin-top:0} }

.lightbox{ position:fixed; left:0; right:0; top:0; bottom:0; z-index:150; display:none;
  background:rgba(0,0,0,.94); -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center; }
.lightbox.show{ display:-webkit-box; display:-webkit-flex; display:flex; }
.lightbox img{ max-width:100%; max-height:100%; display:block; }
.lightbox .lb-x{ position:absolute; right:12px; top:12px; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.5); color:#fff;
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center; }

.pager{ text-align:center; padding:14px 0 4px; }
.pager .btn{ min-width:150px; }

.fab{
  position:fixed; left:50%; bottom:18px; margin-left:-25px; width:50px; height:50px; border-radius:50%;
  border:0; z-index:35; background:#2ee6b0;
  background:-webkit-linear-gradient(135deg,#3bf0bd,#12b894);
  background:linear-gradient(135deg,#3bf0bd,#12b894); color:#04231b;
  box-shadow:0 8px 22px rgba(46,230,176,.35);
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center;
}
.fab:active{ -webkit-transform:scale(.94); transform:scale(.94); }

/* ==========================================================================
   ========================================================================== */
.auth{ padding-top:34px; text-align:center; }
.auth .logo{ width:74px; height:74px; border-radius:22px; margin:0 auto 12px; display:block;
  box-shadow:0 10px 30px rgba(46,230,176,.22); }
.auth h1{ font-size:22px; font-weight:800; letter-spacing:1px; }
.auth .sub{ font-size:11px; color:#6b7a8f; color:var(--tx3); margin-top:4px; letter-spacing:2px; }
.auth .card{ margin-top:20px; text-align:left; padding:16px; }
.auth .switch{ display:-webkit-box; display:-webkit-flex; display:flex; margin:-2px 0 16px; }
.auth .switch button{ -webkit-box-flex:1; -webkit-flex:1 1 0; flex:1 1 0; height:38px; border:0;
  background:transparent; color:#9fadc2; color:var(--tx2); font-size:13px; font-weight:700; position:relative; outline:none; }
.auth .switch button.on{ color:#e9eff8; color:var(--tx); }
.auth .switch button.on:after{ content:""; position:absolute; left:50%; bottom:0; width:22px; height:3px;
  margin-left:-11px; border-radius:2px; background:#2ee6b0; background:var(--pri); }
.auth .cap{ display:-webkit-box; display:-webkit-flex; display:flex; }
.auth .cap .field{ -webkit-box-flex:1; -webkit-flex:1 1 auto; flex:1 1 auto; }
.auth .cap .cap-img{ width:98px; height:48px; margin-left:8px; border-radius:12px; overflow:hidden;
  border:1px solid #212b3a; border-color:var(--line); background:#0b111a; background:var(--card2);
  -webkit-flex:0 0 98px; flex:0 0 98px; display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; -webkit-align-items:center; align-items:center; -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center; }
.auth .cap img{ width:100%; height:100%; display:block; }
.auth .guest{ margin-top:16px; }
.auth .foot{ font-size:10px; color:#6b7a8f; color:var(--tx3); margin-top:16px; }

/* ==========================================================================
   ========================================================================== */
.hero{
  border-radius:22px; padding:16px; box-sizing:border-box; position:relative; overflow:hidden;
  background:#0e1a1c;
  background:-webkit-linear-gradient(135deg,#0f2a26 0%,#0c1622 60%,#101a2a 100%);
  background:linear-gradient(135deg,#0f2a26 0%,#0c1622 60%,#101a2a 100%);
  border:1px solid #1c3a36;
}
html.theme-light .hero{ background:#dff8f0; background:-webkit-linear-gradient(135deg,#d9fbf1,#eef4ff); background:linear-gradient(135deg,#d9fbf1,#eef4ff); border-color:#c8ece1; }
html.theme-light .hero .hi{ color:#3c7d6f; }
html.theme-light .hero .desc{ color:#4a5f74; }
html.theme-light .hero .glow{ background:rgba(16,185,146,.13); }
.hero .hi{ font-size:11px; color:#8fb8ad; letter-spacing:.5px; }
.hero .name{ font-size:19px; font-weight:800; margin-top:3px; letter-spacing:.3px; }
.hero .desc{ font-size:11px; color:#93a5b8; color:var(--tx2); margin-top:5px; }
.hero .glow{ position:absolute; right:-30px; top:-40px; width:120px; height:120px; border-radius:50%;
  background:rgba(46,230,176,.16); }
.hero .hero-ico{ position:absolute; right:12px; bottom:10px; opacity:.9; }

.grid2{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:0 -4px; }
.grid2 > .cell{ width:50%; box-sizing:border-box; padding:4px; }
.tile{
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  padding:13px 12px; border-radius:18px; box-sizing:border-box;
  background:#111722; background:var(--card); border:1px solid #212b3a; border-color:var(--line);
  cursor:pointer; -webkit-transition:-webkit-transform .12s ease; transition:transform .12s ease;
}
.tile:active{ -webkit-transform:scale(.97); transform:scale(.97); }
.tile .ti{ width:38px; height:38px; border-radius:13px; margin-right:10px; -webkit-flex:0 0 38px; flex:0 0 38px;
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center; }
.tile .tn{ font-size:13px; font-weight:700; letter-spacing:.2px; }
.tile .ts{ font-size:9px; color:#6b7a8f; color:var(--tx3); margin-top:1px; }
.ti-green{ background:rgba(46,230,176,.13); color:#2ee6b0; }
.ti-blue{ background:rgba(106,168,255,.14); color:#6aa8ff; }
.ti-amber{ background:rgba(255,176,46,.14); color:#ffb02e; }
.ti-violet{ background:rgba(167,139,250,.14); color:#a78bfa; }
.ti-pink{ background:rgba(255,122,184,.14); color:#ff7ab8; }

.hscroll{ display:-webkit-box; display:-webkit-flex; display:flex; overflow-x:auto; overflow-y:hidden;
  padding:2px 16px 8px; margin:0 -16px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.hscroll::-webkit-scrollbar{ display:none; height:0; }
.appc{
  -webkit-flex:0 0 118px; flex:0 0 118px; width:118px; margin-right:9px; padding:11px; box-sizing:border-box;
  border-radius:18px; background:#111722; background:var(--card);
  border:1px solid #212b3a; border-color:var(--line); cursor:pointer;
}
.appc:active{ -webkit-transform:scale(.97); transform:scale(.97); }
.appc .an{ font-size:12px; font-weight:700; margin-top:8px; }
.appc .am{ font-size:9px; color:#6b7a8f; color:var(--tx3); margin-top:2px; }
.appc .ap{ font-size:10px; font-weight:700; color:#2ee6b0; color:var(--pri); margin-top:6px; }

.post-mini{ display:-webkit-box; display:-webkit-flex; display:flex; padding:11px 0; cursor:pointer;
  border-bottom:1px solid #212b3a; border-bottom-color:var(--line); }
.post-mini:last-child{ border-bottom:0; }
.post-mini .pm-a{ width:26px; height:26px; border-radius:50%; margin-right:9px; -webkit-flex:0 0 26px; flex:0 0 26px; position:relative; overflow:hidden; background:#1a2432; }
.post-mini .pm-a img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-mini .pm-t{ font-size:12px; font-weight:600; line-height:1.35; }
.post-mini .pm-m{ font-size:9px; color:#6b7a8f; color:var(--tx3); margin-top:4px; }
.post-mini .pm-m span{ margin-right:10px; }

/* ==========================================================================
   ========================================================================== */
.searchbar{ position:relative; margin-bottom:10px; }
.searchbar .sb-i{ position:absolute; left:13px; top:50%; margin-top:-8px; color:#6b7a8f; color:var(--tx3); }
.searchbar .field{ padding-left:38px; height:46px; border-radius:23px; font-size:13px; }
.store-item{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  padding:11px 12px; margin-bottom:8px; border-radius:18px; background:#111722; background:var(--card);
  border:1px solid #212b3a; border-color:var(--line); cursor:pointer; }
.store-item:active{ -webkit-transform:scale(.985); transform:scale(.985); }
.store-item .si-n{ font-size:13px; font-weight:700; }
.store-item .si-m{ font-size:10px; color:#6b7a8f; color:var(--tx3); margin-top:3px; }
.store-item .si-r{ text-align:right; margin-left:8px; -webkit-flex:0 0 auto; flex:0 0 auto; }
.store-item .si-price{ font-size:12px; font-weight:800; color:#2ee6b0; color:var(--pri); }
.store-item .si-price.paid{ color:#ffb02e; color:var(--amber); }
.store-item .si-dl{ font-size:9px; color:#6b7a8f; color:var(--tx3); margin-top:5px; }
.store-item .si-dl svg{ vertical-align:-2px; margin-right:2px; }

/* ==========================================================================
   ========================================================================== */
.app-hero{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center; }
.app-hero .ah-txt{ -webkit-box-flex:1; -webkit-flex:1 1 auto; flex:1 1 auto; min-width:0; margin-left:13px; }
.app-hero h2{ font-size:17px; font-weight:800; letter-spacing:.2px; }
.app-hero .ah-m{ font-size:10px; color:#6b7a8f; color:var(--tx3); margin-top:4px; }
.app-hero .ah-m span{ margin-right:8px; }
.stats3{ display:-webkit-box; display:-webkit-flex; display:flex; margin-top:14px; padding-top:12px;
  border-top:1px solid #212b3a; border-top-color:var(--line); }
.stats3 .s{ -webkit-box-flex:1; -webkit-flex:1 1 0; flex:1 1 0; text-align:center; }
.stats3 .s .v{ font-size:15px; font-weight:800; }
.stats3 .s .k{ font-size:9px; color:#6b7a8f; color:var(--tx3); margin-top:2px; }
.acts{ display:-webkit-box; display:-webkit-flex; display:flex; margin-top:14px; }
.acts .btn{ -webkit-box-flex:1; -webkit-flex:1 1 0; flex:1 1 0; }
.acts .btn + .btn{ margin-left:8px; }
.screens{ display:-webkit-box; display:-webkit-flex; display:flex; overflow-x:auto; overflow-y:hidden; margin:0 -16px;
  padding:2px 16px 8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.screens::-webkit-scrollbar{ display:none; height:0; }
.screens .sc{ -webkit-flex:0 0 118px; flex:0 0 118px; width:118px; height:150px; margin-right:8px;
  border-radius:14px; overflow:hidden; border:1px solid #212b3a; border-color:var(--line);
  background:#0b111a; background:var(--card2); position:relative; }
.screens .sc img{ width:100%; height:100%; object-fit:cover; display:block; }
.meta-table{ border:1px solid #212b3a; border-color:var(--line); border-radius:14px; overflow:hidden; }
.meta-table .tr{ display:-webkit-box; display:-webkit-flex; display:flex; padding:9px 12px; font-size:11px;
  border-bottom:1px solid #212b3a; border-bottom-color:var(--line); }
.meta-table .tr:last-child{ border-bottom:0; }
.meta-table .k{ color:#6b7a8f; color:var(--tx3); width:74px; -webkit-flex:0 0 74px; flex:0 0 74px; }
.meta-table .v{ -webkit-box-flex:1; -webkit-flex:1 1 auto; flex:1 1 auto; word-break:break-all; }
.desc{ font-size:12px; line-height:1.65; color:#b9c5d6; color:var(--tx2); white-space:pre-wrap; word-break:break-word; }

/* ==========================================================================
   ========================================================================== */
.post{
  padding:13px 13px 11px; margin-bottom:9px; border-radius:18px;
  background:#111722; background:var(--card); border:1px solid #212b3a; border-color:var(--line);
  cursor:pointer;
}
.post:active{ -webkit-transform:scale(.99); transform:scale(.99); }
.post .p-h{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center; }
.post .p-a{ width:28px; height:28px; border-radius:50%;
  margin-right:9px; -webkit-flex:0 0 28px; flex:0 0 28px; overflow:hidden; background:#1a2432; }
.post .p-a img{ width:100%; height:100%; object-fit:cover; display:block; }
.post .p-n{ font-size:12px; font-weight:700; }
.post .p-t{ font-size:10px; color:#6b7a8f; color:var(--tx3); margin-top:1px; }
.post .p-ti{ font-size:13px; font-weight:700; line-height:1.4; margin-top:9px; }
.post .p-ex{ font-size:11px; color:#8a97a9; color:var(--tx3); line-height:1.5; margin-top:4px; }
.post .p-f{ display:-webkit-box; display:-webkit-flex; display:flex; margin-top:9px; font-size:10px;
  color:#6b7a8f; color:var(--tx3); }
.post .p-f span{ margin-right:14px; }
.post .p-f svg{ vertical-align:-2px; margin-right:2px; }
.post .p-img{ margin-top:9px; display:-webkit-box; display:-webkit-flex; display:flex; }
.post .p-img .ph{ margin-right:5px; }

.article h1{ font-size:17px; font-weight:800; line-height:1.4; }
.article .a-meta{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  margin-top:10px; font-size:10px; color:#6b7a8f; color:var(--tx3); }
.article .a-body{ font-size:13px; line-height:1.72; margin-top:12px; word-break:break-word;
  color:#c9d4e3; color:var(--tx2); }
.article .a-body img{ max-width:100%; height:auto; border-radius:10px; margin:6px 0; display:block; }
.article .a-body a{ text-decoration:underline; }
.article .a-body br{ line-height:2; }
.a-img{ max-width:100%; height:auto; display:block; border-radius:12px; margin-top:9px; }
.toolbar{ display:-webkit-box; display:-webkit-flex; display:flex; margin-top:14px; }
.toolbar .tbtn{
  -webkit-box-flex:1; -webkit-flex:1 1 0; flex:1 1 0; height:42px; border-radius:13px;
  border:1px solid #212b3a; border-color:var(--line); background:#111722; background:var(--card);
  color:#9fadc2; color:var(--tx2); font-size:11px; font-weight:600;
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center;
}
.toolbar .tbtn + .tbtn{ margin-left:7px; }
.toolbar .tbtn.on{ color:#2ee6b0; color:var(--pri); border-color:#1d4a3e; background:rgba(46,230,176,.08); }
.toolbar .tbtn svg{ margin-right:5px; }

.comment{ display:-webkit-box; display:-webkit-flex; display:flex; padding:11px 0;
  border-bottom:1px solid #212b3a; border-bottom-color:var(--line); }
.comment:last-child{ border-bottom:0; }
.comment .c-a{ -webkit-flex:0 0 28px; flex:0 0 28px; width:28px; height:28px; border-radius:50%;
  margin-right:9px; overflow:hidden; background:#1a2432; }
.comment .c-a img{ width:100%; height:100%; object-fit:cover; display:block; }
.comment .c-n{ font-size:11px; font-weight:700; }
.comment .c-t{ font-size:9px; color:#6b7a8f; color:var(--tx3); margin-left:5px; }
.comment .c-c{ font-size:12px; line-height:1.55; margin-top:4px; word-break:break-word; }
.comment .c-r{ font-size:11px; color:#9fadc2; color:var(--tx2); background:#0b111a; background:var(--card2);
  border-radius:8px; padding:5px 8px; margin-top:5px; }
.comment .c-f{ font-size:10px; color:#6b7a8f; color:var(--tx3); margin-top:6px; }
.comment .c-f span{ margin-right:12px; cursor:pointer; }
.comment .c-sub{ margin-top:2px; }
.replybox{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:end; align-items:flex-end; margin-top:12px; }
.replybox textarea{ -webkit-box-flex:1; -webkit-flex:1 1 auto; flex:1 1 auto; margin-right:8px; min-height:52px; }
.detail-note{ font-size:10px; color:#6b7a8f; color:var(--tx3); text-align:center; padding:10px 0 2px; }

/* ==========================================================================
   ========================================================================== */
.profile-hero{ padding:18px 16px 16px; border-radius:22px; text-align:center;
  background:#0e1622;
  background:-webkit-linear-gradient(160deg,#10202a 0%,#0b111b 70%);
  background:linear-gradient(160deg,#10202a 0%,#0b111b 70%);
  border:1px solid #1c2a38; position:relative; overflow:hidden; }
html.theme-light .profile-hero{ background:#eef6ff; background:-webkit-linear-gradient(160deg,#dcf8f0,#eef4ff); background:linear-gradient(160deg,#dcf8f0,#eef4ff); border-color:#d3e7f4; }
.profile-hero .ph{ margin:0 auto; }
.profile-hero h2{ font-size:16px; font-weight:800; margin-top:9px; }
.profile-hero .p-sign{ font-size:10px; color:#9fadc2; color:var(--tx2); margin-top:4px; }
.profile-hero .p-meta{ font-size:9px; color:#6b7a8f; color:var(--tx3); margin-top:5px; }
.pstats{ display:-webkit-box; display:-webkit-flex; display:flex; margin-top:14px; padding-top:12px;
  border-top:1px solid #212b3a; border-top-color:var(--line); }
.pstats .ps{ -webkit-box-flex:1; -webkit-flex:1 1 0; flex:1 1 0; }
.pstats .ps .v{ font-size:14px; font-weight:800; }
.pstats .ps .k{ font-size:9px; color:#6b7a8f; color:var(--tx3); margin-top:1px; }
.menu{ border-radius:18px; overflow:hidden; background:#111722; background:var(--card);
  border:1px solid #212b3a; border-color:var(--line); }
.menu .mi{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  padding:13px 13px; border-bottom:1px solid #212b3a; border-bottom-color:var(--line); cursor:pointer; }
.menu .mi:last-child{ border-bottom:0; }
.menu .mi:active{ background:rgba(255,255,255,.04); }
.menu .mi .mi-i{ width:30px; height:30px; border-radius:10px; margin-right:10px; -webkit-flex:0 0 30px; flex:0 0 30px;
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center; }
.menu .mi .mi-t{ -webkit-box-flex:1; -webkit-flex:1 1 auto; flex:1 1 auto; font-size:13px; font-weight:600; }
.menu .mi .mi-x{ font-size:11px; color:#6b7a8f; color:var(--tx3); margin-right:6px; }
.menu .mi .mi-a{ color:#41506a; display:-webkit-box; display:-webkit-flex; display:flex; }
.set-row{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  padding:12px 0; border-bottom:1px solid #212b3a; border-bottom-color:var(--line); }
.set-row:last-child{ border-bottom:0; }
.set-row .sr-t{ -webkit-box-flex:1; -webkit-flex:1 1 auto; flex:1 1 auto; font-size:13px; font-weight:600; }
.set-row .sr-s{ display:block; font-size:10px; color:#6b7a8f; color:var(--tx3); margin-top:2px; font-weight:400; }
.tgl{ width:48px; height:28px; border-radius:14px; background:#26313f; position:relative;
  -webkit-flex:0 0 48px; flex:0 0 48px; cursor:pointer; -webkit-transition:background .15s; transition:background .15s; }
.tgl:after{ content:""; position:absolute; left:3px; top:3px; width:22px; height:22px; border-radius:50%;
  background:#fff; -webkit-transition:left .15s; transition:left .15s; }
.tgl.on{ background:#2ee6b0; background:var(--pri); }
.tgl.on:after{ left:23px; }
.set-group{ margin-bottom:14px; }

/* ==========================================================================
   ========================================================================== */
.notif{ display:-webkit-box; display:-webkit-flex; display:flex; padding:12px; margin-bottom:8px; border-radius:16px;
  background:#111722; background:var(--card); border:1px solid #212b3a; border-color:var(--line); cursor:pointer; }
.notif.unread{ border-color:#1d4a3e; background:rgba(46,230,176,.055); }
.notif .n-i{ width:34px; height:34px; border-radius:12px; margin-right:10px; -webkit-flex:0 0 34px; flex:0 0 34px;
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center; }
.notif .n-t{ font-size:12px; font-weight:600; line-height:1.4; }
.notif .n-c{ font-size:10px; color:#9fadc2; color:var(--tx2); margin-top:3px; line-height:1.5; }
.notif .n-d{ font-size:9px; color:#6b7a8f; color:var(--tx3); margin-top:5px; }

.rank{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  padding:10px 12px; margin-bottom:7px; border-radius:14px; background:#111722; background:var(--card);
  border:1px solid #212b3a; border-color:var(--line); }
.rank .r-n{ width:24px; text-align:center; font-size:12px; font-weight:800; color:#6b7a8f; color:var(--tx3);
  -webkit-flex:0 0 24px; flex:0 0 24px; }
.rank.top1 .r-n{ color:#ffcf4d; } .rank.top2 .r-n{ color:#cfd8e3; } .rank.top3 .r-n{ color:#e5a06a; }

.bill{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  padding:12px; margin-bottom:7px; border-radius:14px; background:#111722; background:var(--card);
  border:1px solid #212b3a; border-color:var(--line); }
.bill .b-t{ font-size:12px; font-weight:600; }
.bill .b-d{ font-size:9px; color:#6b7a8f; color:var(--tx3); margin-top:3px; }
.bill .b-m{ font-size:13px; font-weight:800; }
.bill .b-m.plus{ color:#2ee6b0; color:var(--pri); }
.bill .b-m.minus{ color:#ff7b8d; color:var(--red); }

.big-ico{ width:64px; height:64px; border-radius:20px; margin:0 auto 12px;
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center;
  background:#0f1722; background:var(--card2); border:1px solid #212b3a; border-color:var(--line); color:#2ee6b0; color:var(--pri); }

@media (max-width:345px){
  body{ font-size:13px; }
  .page{ padding-top:62px; }
  .tb{ width:218px; height:40px; }
  .appc{ -webkit-flex-basis:108px; flex-basis:108px; width:108px; }
  .hero .name{ font-size:17px; }
}

/* 矮屏（<=430px 高）：登录页压缩头部，让表单尽量一屏可见 */
@media (max-height:430px){
  .auth{ padding-top:6px; }
  .auth .logo{ width:52px; height:52px; border-radius:16px; margin-bottom:8px; }
  .auth h1{ font-size:18px; }
  .auth .sub{ font-size:9px; letter-spacing:1px; margin-top:2px; }
  .auth .card{ margin-top:10px; padding:14px; }
  .auth .switch{ margin-bottom:10px; }
  .auth .guest{ margin-top:10px; }
  .auth .foot{ margin-top:10px; }
}

@media (prefers-reduced-motion:reduce){
  .fade,.pulse,.spinner,.modal,.toast{ -webkit-animation:none !important; animation:none !important; }
}

/* Round screen: move the top pill into the safe area of a circular display */
html.round .topbar{ padding-top:30px; height:88px; }
html.round .tb{ width:220px; max-width:80%; }
html.round .page{ padding-top:94px; padding-left:30px; padding-right:30px; }
html.round .toast{ top:96px; }
html.round .tb-time{ -webkit-flex-basis:42px; flex-basis:42px; width:42px; }
html.round .fab{ bottom:30px; }



/* ==========================================================================
   Site gate / wallet / shop / notice / admin
   ========================================================================== */
.site-block{ position:fixed; left:0; right:0; top:0; bottom:0; z-index:400;
  background:#05070b; background:var(--bg);
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center; padding:18px; box-sizing:border-box; }
.site-block-card{ width:100%; max-width:330px; text-align:center; box-sizing:border-box;
  background:#111722; background:var(--card); border:1px solid #212b3a; border-color:var(--line);
  border-radius:22px; padding:24px 18px; }
.tb-t{ cursor:pointer; }

/* 等级经验 */
.exp-track{ height:8px; border-radius:4px; background:#0b111a; background:var(--card2); overflow:hidden; margin-top:8px; }
.exp-fill{ height:100%; border-radius:4px; background:#2ee6b0; background:-webkit-linear-gradient(90deg,#2ee6b0,#12b894); background:linear-gradient(90deg,#2ee6b0,#12b894); }
.exp-line{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-pack:justify; -webkit-justify-content:space-between; justify-content:space-between; font-size:9px; color:#6b7a8f; color:var(--tx3); margin-top:5px; }

/* 钱包 */
.wallet-grid{ display:-webkit-box; display:-webkit-flex; display:flex; margin:0 -4px; }
.wallet-grid > .wg{ width:50%; padding:4px; box-sizing:border-box; }
.balance{ border-radius:18px; padding:14px; border:1px solid #212b3a; border-color:var(--line); position:relative; overflow:hidden; }
.balance .num{ font-size:24px; font-weight:800; letter-spacing:.5px; }
.balance .lbl{ font-size:10px; color:#6b7a8f; color:var(--tx3); margin-top:2px; }
.balance .ico{ position:absolute; right:10px; top:10px; opacity:.5; }
.balance.coin{ background:#16130b; background:-webkit-linear-gradient(135deg,#221b0d,#111722); background:linear-gradient(135deg,#221b0d,#111722); }
.balance.point{ background:#0d1620; background:-webkit-linear-gradient(135deg,#0d2230,#111722); background:linear-gradient(135deg,#0d2230,#111722); }
.balance.coin .num{ color:#ffcf4d; }
.balance.point .num{ color:#6aa8ff; }
.wallet-act{ display:-webkit-box; display:-webkit-flex; display:flex; }
.wallet-act .btn{ -webkit-box-flex:1; -webkit-flex:1 1 0; flex:1 1 0; }
.wallet-act .btn + .btn{ margin-left:8px; }

/* 商城 */
.shop-item{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  padding:11px 12px; margin-bottom:8px; border-radius:18px; background:#111722; background:var(--card);
  border:1px solid #212b3a; border-color:var(--line); cursor:pointer; }
.shop-item:active{ -webkit-transform:scale(.985); transform:scale(.985); }
.shop-item .s-pic{ width:56px; height:56px; border-radius:13px; margin-right:11px; -webkit-flex:0 0 56px; flex:0 0 56px; }
.shop-item .s-n{ font-size:13px; font-weight:700; }
.shop-item .s-d{ font-size:10px; color:#6b7a8f; color:var(--tx3); margin-top:3px; }
.shop-item .s-price{ font-size:13px; font-weight:800; color:#ffcf4d; text-align:right; }
.shop-item .s-price.point{ color:#6aa8ff; }
.shop-item .s-stock{ font-size:9px; color:#6b7a8f; color:var(--tx3); margin-top:3px; text-align:right; }
.shop-detail-img{ width:100%; max-height:180px; -o-object-fit:cover; object-fit:cover; border-radius:14px; display:block; }
.shop-buy-row{ display:-webkit-box; display:-webkit-flex; display:flex; margin-top:12px; }
.shop-buy-row .btn{ -webkit-box-flex:1; -webkit-flex:1 1 0; flex:1 1 0; }

/* 订单 */
.order{ padding:12px; margin-bottom:8px; border-radius:16px; background:#111722; background:var(--card); border:1px solid #212b3a; border-color:var(--line); }
.order .o-h{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-pack:justify; -webkit-justify-content:space-between; justify-content:space-between; }
.order .o-n{ font-size:12px; font-weight:700; }
.order .o-s{ font-size:10px; font-weight:600; }
.order .o-m{ font-size:10px; color:#6b7a8f; color:var(--tx3); margin-top:4px; }
.order .o-a{ font-size:12px; font-weight:800; margin-top:4px; color:#ffcf4d; }

/* 公告页 */
.notice-hero{ text-align:center; padding:22px 14px; border-radius:22px; border:1px solid #1d4a3e;
  background:#0b1a17; background:-webkit-linear-gradient(160deg,#0f2a26,#0b111b); background:linear-gradient(160deg,#0f2a26,#0b111b); }
.notice-hero .n-ico{ width:58px; height:58px; border-radius:18px; margin:0 auto 12px;
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center;
  background:rgba(46,230,176,.12); color:#2ee6b0; color:var(--pri); }
.notice-title{ font-size:17px; font-weight:800; line-height:1.4; }
.notice-body{ font-size:12px; line-height:1.7; color:#b9c5d6; color:var(--tx2); white-space:pre-wrap; word-break:break-word;
  margin-top:14px; text-align:left; background:#111722; background:var(--card); border:1px solid #212b3a; border-color:var(--line);
  border-radius:16px; padding:14px; }

/* 二维码 */
.qr-box{ background:#fff; border-radius:16px; padding:12px; width:-webkit-max-content; width:max-content; margin:0 auto; }
.qr-box img, .qr-box canvas{ display:block; }
.qr-link{ font-size:9px; color:#6b7a8f; color:var(--tx3); word-break:break-all; text-align:center; margin-top:10px; }

/* 控制后台 */
.admin-body{ background:#05070b; background:var(--bg); }
.admin-wrap{ max-width:720px; margin:0 auto; padding:18px 16px 40px; }
.admin-top{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center; -webkit-box-pack:justify; -webkit-justify-content:space-between; justify-content:space-between; margin-bottom:14px; }
.admin-top h1{ font-size:18px; font-weight:800; }
.admin-sub{ font-size:11px; color:#6b7a8f; color:var(--tx3); margin-top:3px; }
.adm-box{ background:#111722; background:var(--card); border:1px solid #212b3a; border-color:var(--line); border-radius:18px; padding:14px; margin-bottom:12px; }
.adm-box h2{ font-size:14px; font-weight:700; margin-bottom:10px; }
.adm-row{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  padding:9px 0; border-bottom:1px solid #212b3a; border-bottom-color:var(--line); }
.adm-row:last-child{ border-bottom:0; }
.adm-row .adm-label{ -webkit-box-flex:1; -webkit-flex:1 1 auto; flex:1 1 auto; font-size:13px; font-weight:600; }
.adm-row .adm-label small{ display:block; font-size:10px; color:#6b7a8f; color:var(--tx3); font-weight:400; margin-top:2px; }
.adm-input{ width:100%; box-sizing:border-box; height:42px; padding:0 12px; border-radius:12px; border:1px solid #212b3a; border-color:var(--line);
  background:#0c121b; background:var(--card2); color:#e9eff8; color:var(--tx); font-size:13px; margin-top:8px; outline:none; }
.adm-textarea{ width:100%; box-sizing:border-box; min-height:96px; padding:10px 12px; border-radius:12px; border:1px solid #212b3a; border-color:var(--line);
  background:#0c121b; background:var(--card2); color:#e9eff8; color:var(--tx); font-size:13px; margin-top:8px; outline:none; resize:vertical; line-height:1.5; }
.adm-actions{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin-top:14px; }
.adm-actions .btn{ margin-right:8px; margin-bottom:8px; }
.adm-hint{ font-size:10px; line-height:1.6; color:#6b7a8f; color:var(--tx3); background:#0c121b; background:var(--card2);
  border-radius:12px; padding:10px 12px; margin-top:10px; }
.adm-pre{ font-family:Consolas,Monaco,monospace; font-size:11px; white-space:pre-wrap; word-break:break-all;
  background:#0c121b; background:var(--card2); border-radius:12px; padding:12px; margin-top:10px; max-height:220px; overflow:auto; }
.adm-lock{ max-width:360px; margin:14vh auto 0; }
.pill-ok{ display:inline-block; padding:1px 7px; border-radius:7px; font-size:10px; font-weight:700; background:rgba(46,230,176,.13); color:#2ee6b0; }
.pill-off{ display:inline-block; padding:1px 7px; border-radius:7px; font-size:10px; font-weight:700; background:rgba(255,93,115,.13); color:#ff7b8d; }

@media (max-width:345px){
  .balance .num{ font-size:21px; }
}