/* W11 HASH 代理中心 H5 — 页面样式
   配色沿用机器人端 app.css：主蓝 #3f7cff / 辅青 #14b8a6 / 错误红 #ff3f48
   间距、圆角、字号都走阶梯变量，保证五个页面视觉一致 */

:root {
  --blue: #3f7cff;
  --blue-600: #2f63e0;
  --blue-300: #6b9bff;
  --blue-200: #9dbcff;
  --blue-soft: #eaf2ff;
  --teal: #14b8a6;
  --teal-soft: #e0f7f4;
  --red: #ff3f48;
  --red-soft: #fee9ea;
  --amber: #f59e0b;
  --amber-soft: #fef3c7;
  --page: #eef4ff;
  --card: #ffffff;
  --text: #30415f;
  --muted: #8c9ab4;
  --line: #dfe8f7;
  --shadow: 0 8px 18px rgba(48, 92, 160, .10);
  --shadow-lg: 0 10px 24px rgba(54, 101, 180, .13);
  --shadow-nav: 0 -2px 12px rgba(48, 92, 160, .06);

  --s1: 4px;  --s2: 6px;  --s3: 8px;  --s4: 10px;
  --s5: 12px; --s6: 14px; --s7: 16px; --s8: 20px;

  --r1: 8px; --r2: 10px; --r3: 11px; --r4: 14px; --r5: 18px;

  --f1: 10px; --f2: 11px; --f3: 12px; --f4: 13px;
  --f5: 14px; --f6: 15px; --f7: 17px; --f8: 22px; --f9: 30px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--text);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
.num { font-variant-numeric: tabular-nums; }
button { font: inherit; border: 0; cursor: pointer; }
input { font: inherit; }

/* ================= 外壳 ================= */
.shell {
  max-width: 520px;
  margin: 0 auto;
  /* The height is fixed, so the content area scrolls between the header and
     the navigation. With a minimum height the navigation would be pushed
     below the screen once the content grows. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  position: relative;
  overflow: hidden;
}

/* The holder of the current page. It has to take part in the flex layout
   of the shell, otherwise it grows with the content and pushes the
   navigation below the screen. */
#view {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}

/* ================= 顶部栏 ================= */
.appbar {
  flex: 0 0 auto; height: 54px; padding: 0 var(--s5);
  display: flex; align-items: center; gap: var(--s4);
  color: #fff; background: linear-gradient(135deg, #4f8bff, #3f7cff 58%, #14b8a6);
  position: relative; overflow: hidden; padding-top: env(safe-area-inset-top);
  height: calc(54px + env(safe-area-inset-top));
}
.appbar::after {
  content: ""; position: absolute; right: -24px; top: -32px;
  width: 92px; height: 92px; border-radius: 26px;
  background: rgba(255, 255, 255, .13); transform: rotate(-16deg);
}
.appbar .back {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--r1);
  background: rgba(255, 255, 255, .20); color: #fff;
  display: grid; place-items: center; padding: 0;
}
.appbar .back svg { width: 15px; height: 15px; }
.appbar .spacer { flex: 0 0 auto; width: 30px; height: 30px; }
.appbar .title { position: relative; z-index: 1; min-width: 0; display: flex; align-items: center; gap: var(--s3); }
/* The mark of the platform. It is the robot of the announcement card. */
.appbar .title .mark {
  width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 9px; object-fit: cover;
  box-shadow: 0 2px 6px rgba(8, 20, 48, .28);
}
.appbar .title .txt { min-width: 0; }
.appbar .title h2 {
  margin: 0; font-size: var(--f7); font-weight: 900; letter-spacing: .2px; line-height: 1.2;
}
.appbar .title .sub { font-size: var(--f2); opacity: .82; margin-top: 2px; line-height: 1; }
.appbar .grow { flex: 1; }
.appbar .who {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: var(--s2);
  padding: 5px 10px 5px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); font-size: var(--f2); font-weight: 700;
}
.appbar .avatar {
  width: 21px; height: 21px; border-radius: 50%;
  background: #fff; color: var(--blue);
  display: grid; place-items: center; font-size: var(--f1); font-weight: 900;
}

/* ================= 内容区 ================= */
.body {
  /* The zero minimum lets the content area shrink, so the navigation stays
     on the screen and only the content scrolls. */
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: var(--s5) var(--s5) 34px;
  -webkit-overflow-scrolling: touch;
}

/* ================= 余额主卡 ================= */
.hero {
  border-radius: var(--r4); padding: var(--s7);
  color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #4f8bff, #3f7cff 52%, #14b8a6);
  box-shadow: 0 10px 22px rgba(63, 124, 255, .26);
}
.hero::before {
  content: ""; position: absolute; right: -30px; top: -40px;
  width: 126px; height: 126px; border-radius: 30px;
  background: rgba(255, 255, 255, .12); transform: rotate(-18deg);
}
.hero .row { position: relative; z-index: 1; }
.hero .cap { font-size: var(--f2); opacity: .85; letter-spacing: .2px; }
.hero .big {
  margin: var(--s3) 0 0; font-size: var(--f9); font-weight: 900;
  letter-spacing: -.6px; line-height: 1.1;
}
.hero .big small { font-size: var(--f4); font-weight: 700; margin-left: 5px; opacity: .92; }
.hero .split {
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, .22);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3);
}
.hero .split div span { display: block; font-size: var(--f1); opacity: .82; margin-bottom: 3px; }
.hero .split div b { font-size: var(--f5); font-weight: 900; letter-spacing: -.2px; }
.hero .split div b em { font-style: normal; font-size: var(--f1); font-weight: 700; opacity: .85; margin-left: 2px; }

/* ================= 卡片 ================= */
.card {
  margin-top: var(--s4); border-radius: var(--r4);
  background: linear-gradient(180deg, #ffffff, #f4f8ff);
  border: 1px solid rgba(222, 234, 252, .9);
  box-shadow: var(--shadow); overflow: hidden;
}
.card > header {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s5) var(--s6); border-bottom: 1px solid var(--line);
}
.card > header h3 {
  margin: 0; font-size: var(--f6); font-weight: 900; color: var(--text);
  padding-left: var(--s3); border-left: 3px solid var(--blue); line-height: 1.15;
}
.card > header .grow { flex: 1; }
.card > header .more { font-size: var(--f2); color: var(--blue); font-weight: 700; }
.card .inner { padding: var(--s5) var(--s6); }

/* ================= 邀请链接 ================= */
.invite {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5); border-radius: var(--r3);
  background: var(--blue-soft); border: 1px dashed #b6d0ff;
}
.invite .code {
  flex: 1; min-width: 0; font-size: var(--f4); font-weight: 800;
  color: var(--blue); letter-spacing: .4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.invite .copy {
  flex: 0 0 auto; padding: 7px var(--s5); border-radius: var(--r1);
  color: #fff; background: var(--blue); font-size: var(--f3); font-weight: 800;
}

/* ================= 指标格 ================= */
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s4); }
.metrics.three { grid-template-columns: repeat(3, 1fr); }
.metrics.flush { margin-top: 0; }
.metric {
  padding: var(--s5) var(--s4); border-radius: var(--r3);
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(48, 92, 160, .06);
}
.metric span { display: block; font-size: var(--f2); color: var(--muted); margin-bottom: 6px; line-height: 1.3; }
.metric .sub { display: block; margin: 5px 0 0; font-size: var(--f1); color: var(--muted); line-height: 1.4; }
.metric b { font-size: var(--f7); font-weight: 900; letter-spacing: -.3px; line-height: 1.1; }
.metric b.up { color: var(--teal); }
.metric b.down { color: var(--red); }
.metric em { font-style: normal; font-size: var(--f2); color: var(--muted); margin-left: 3px; font-weight: 700; }

/* ================= 周期切换 ================= */
.segment {
  display: flex; gap: 2px; padding: 3px; border-radius: var(--r2);
  background: var(--blue-soft);
}
.segment button {
  flex: 1; padding: 7px 0; border-radius: var(--r1);
  font-size: var(--f3); font-weight: 700; color: #6b87b8; background: transparent;
}
.segment button.on {
  color: #fff; background: linear-gradient(135deg, #4f8bff, #68b6ff);
  box-shadow: 0 4px 10px rgba(63, 124, 255, .22);
}

/* ================= 层级行 ================= */
.ladder { display: grid; gap: var(--s3); }
.rung {
  display: grid; grid-template-columns: 42px 1fr auto;
  align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5); border-radius: var(--r3);
  background: #fff; border: 1px solid var(--line);
}
.rung .lv {
  padding: 5px 0; border-radius: var(--r1); text-align: center;
  font-size: var(--f2); font-weight: 900; color: #fff; background: var(--blue);
}
.rung.l2 .lv { background: var(--blue-200); color: #1d4ed8; }
.rung.l3 .lv { background: #e0eaff; color: #5b7fb8; }
.rung .who { min-width: 0; }
.rung .who b { display: block; font-size: var(--f4); font-weight: 800; color: var(--text); }
.rung .who span {
  display: block; font-size: var(--f2); color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rung .amt { text-align: right; flex: 0 0 auto; }
.rung .amt b { display: block; font-size: var(--f5); font-weight: 900; letter-spacing: -.2px; line-height: 1.15; }
.rung .amt span {
  display: block; font-size: var(--f2); color: var(--muted);
  margin-top: 4px; font-weight: 700; line-height: 1.2;
}
.rung .amt span.plus { color: var(--teal); }
.rung .amt span.plus::before { content: "+"; opacity: .75; }
.rung .amt span.plus.flow::before { content: none; }

/* ================= 列表行 ================= */
.rows { display: grid; }
.row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: var(--s4);
  padding: var(--s5) var(--s6); border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
.row .l { min-width: 0; }
.row .l b { display: block; font-size: var(--f4); font-weight: 800; color: var(--text); }
.row .l span {
  display: block; font-size: var(--f2); color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row .r { text-align: right; flex: 0 0 auto; }
.row .r b { font-size: var(--f5); font-weight: 900; letter-spacing: -.2px; }
.row .r .sub { display: block; font-size: var(--f2); color: var(--muted); margin-top: 3px; }
.row .r .plus { color: var(--teal); }
.row .r .grp { display: flex; align-items: center; gap: var(--s3); justify-content: flex-end; }

/* 状态胶囊 */
.pill {
  display: inline-block; padding: 3px var(--s3); border-radius: 999px;
  font-size: var(--f2); font-weight: 800; line-height: 1.5;
}
.pill.ok { color: #0d9488; background: var(--teal-soft); }
.pill.wait { color: #b45309; background: var(--amber-soft); }
.pill.doing { color: #1d4ed8; background: var(--blue-soft); }
.pill.dead { color: #dc2626; background: var(--red-soft); }

/* ================= 表单 ================= */
.field { margin-bottom: var(--s5); }
.field label {
  display: block; font-size: var(--f3); color: var(--muted);
  margin-bottom: var(--s2); font-weight: 700;
}
.field input, .field select {
  width: 100%; height: 44px; border: 1px solid var(--line);
  border-radius: var(--r3); padding: 0 var(--s5);
  outline: 0; background: #f9fbff; color: var(--text); font-size: var(--f4);
}
.field input:focus { border-color: var(--blue); background: #fff; }
.field input.mono { font-size: var(--f3); letter-spacing: .2px; }
.field .unit { position: relative; }
.field .unit input { padding-right: 56px; }
.field .unit b {
  position: absolute; right: var(--s5); top: 50%; transform: translateY(-50%);
  font-size: var(--f3); color: var(--muted); font-weight: 800;
}
.field .note {
  margin: var(--s2) 0 0; font-size: var(--f2); line-height: 1.6; color: var(--muted);
}
.field .note b { color: var(--text); font-weight: 800; }

.btn {
  width: 100%; height: 46px; border-radius: var(--r3);
  color: #fff; background: var(--blue); font-size: var(--f6); font-weight: 900;
  box-shadow: 0 8px 18px rgba(63, 124, 255, .22);
}
.btn.teal { background: linear-gradient(135deg, #4f8bff, #14b8a6); }
.btn.ghost { color: var(--blue); background: #fff; border: 1px solid var(--blue); box-shadow: none; }
/* A button that can not be pressed should not look pressable. */
.btn:disabled { background: var(--line); color: var(--muted); box-shadow: none; cursor: not-allowed; }
.btn:disabled { opacity: .55; box-shadow: none; }

.hintbar {
  margin-top: var(--s4); padding: var(--s4) var(--s5);
  border-radius: var(--r2); font-size: var(--f2); line-height: 1.7;
  color: #6b87b8; background: var(--blue-soft);
}
.hintbar b { color: var(--blue); font-weight: 800; }

/* ================= 底部导航 ================= */
/* The hidden attribute has to win over the display of the bar, otherwise the
   navigation shows up on the login page. */
.tabbar[hidden] { display: none; }
.tabbar {
  flex: 0 0 auto; height: 60px; padding-bottom: env(safe-area-inset-bottom);
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: var(--shadow-nav);
}
.tabbar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: var(--f1); color: var(--muted); background: transparent; font-weight: 600;
  padding: 0;
}
.tabbar button .ic {
  width: 40px; height: 24px; border-radius: 12px;
  display: grid; place-items: center;
}
.tabbar button svg { width: 20px; height: 20px; }
.tabbar button.on { color: var(--blue); font-weight: 800; }
.tabbar button.on .ic { background: var(--blue-soft); }
.tabbar button.on svg { stroke-width: 2.1; }

/* ================= 登录页 ================= */
.login {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 34px var(--s6) var(--s8);
  background: linear-gradient(180deg, #f8fbff, #eef6ff 58%, #fff);
}
.login .brand { display: flex; align-items: center; justify-content: center; gap: var(--s4); color: var(--blue); }

/* The state of the wallet connection. The form is gone, because the wallet
   is the identity and there is nothing for the player to type. */
.wstate { padding: var(--s7) 0 var(--s5); text-align: center; }
.wstate .spin {
  width: 34px; height: 34px; margin: 0 auto var(--s5);
  border: 3px solid var(--blue-soft); border-top-color: var(--blue);
  border-radius: 50%; animation: wspin .9s linear infinite;
}
@keyframes wspin { to { transform: rotate(360deg); } }
.wstate .wtitle { margin: 0 0 6px; font-size: var(--f6); font-weight: 900; color: var(--text); }
.wstate .wnote { margin: 0; font-size: var(--f3); color: var(--muted); line-height: 1.6; }
.wstate .btn { margin-top: var(--s5); height: 42px; }

/* The guide for a browser without a wallet. */
.guide { padding: var(--s5) 0 var(--s4); text-align: center; }
.guide .gtitle { margin: 0 0 8px; font-size: var(--f6); font-weight: 900; color: var(--text); }
.guide .gtext { margin: 0; font-size: var(--f3); color: var(--muted); line-height: 1.7; }
.guide .gtext b { color: var(--text); font-weight: 800; }
.guide .btn { margin-top: var(--s5); height: 42px; }
.login .brand .mk {
  width: 44px; height: 44px; border-radius: var(--r4);
  overflow: hidden; flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(48, 92, 160, .22);
}
.login .brand .mk img { display: block; width: 100%; height: 100%; object-fit: cover; }
.login .brand strong { font-size: var(--f8); font-weight: 900; letter-spacing: .3px; }
.login .brand small { display: block; font-size: var(--f2); color: #606b80; font-weight: 700; margin-top: 3px; letter-spacing: .4px; }
.login h1 { margin: var(--s8) 0 5px; text-align: center; font-size: var(--f8); color: #59657b; font-weight: 900; }
.login .sub { margin: 0 0 var(--s8); text-align: center; font-size: var(--f4); color: #8a97b0; font-weight: 700; }
.login .panel { border-radius: var(--r5); background: #fff; box-shadow: var(--shadow-lg); overflow: hidden; }
.login .strip {
  padding: var(--s7) var(--s6); color: #fff; text-align: center;
  background: linear-gradient(135deg, #5b84eb, #74aff8);
}
.login .strip h2 { margin: 0 0 5px; font-size: var(--f6); font-weight: 900; }
.login .strip p { margin: 0; font-size: var(--f2); opacity: .92; }
.login .panel .inner { padding: var(--s7) var(--s6) var(--s6); }
.login .foot { margin-top: var(--s5); text-align: center; font-size: var(--f2); color: #9aa7bd; }
.login .foot a { color: var(--blue); font-weight: 800; }

/* ================= 提示条 ================= */
.toast {
  position: fixed; left: 50%; top: 18px; transform: translate(-50%, -80px);
  z-index: 90; width: min(88vw, 420px); padding: 12px 14px; border-radius: 12px;
  color: #fff; background: rgba(31, 42, 68, .94); box-shadow: var(--shadow-lg);
  opacity: 0; transition: .22s ease; text-align: center; font-size: var(--f4);
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.error { background: rgba(240, 77, 69, .95); }
.toast.success { background: rgba(20, 184, 166, .95); }

/* ================= 加载与空状态 ================= */
.loading { padding: 40px 0; text-align: center; color: var(--muted); font-size: var(--f3); }
.empty { padding: 28px 0; text-align: center; color: var(--muted); font-size: var(--f3); }
.empty b { display: block; color: var(--text); font-size: var(--f5); font-weight: 800; margin-bottom: 6px; }

/* ================= 遮罩与弹窗 ================= */
.overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(16, 26, 51, .45);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: 100%; max-width: 520px;
  background: #fff; border-radius: 20px 20px 0 0;
  padding: var(--s7) var(--s6) calc(var(--s7) + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(16, 26, 51, .18);
  max-height: 88vh; overflow-y: auto;
}
.sheet header { display: flex; align-items: center; margin-bottom: var(--s5); }
.sheet header h3 { margin: 0; font-size: var(--f7); font-weight: 900; flex: 1; }
.sheet header button {
  width: 28px; height: 28px; border-radius: 8px;
  background: #f1f5fb; color: var(--muted); font-size: 17px; line-height: 1;
}