/* =========================================================
   hi开放平台 — 用户控制台（终端用户视角）
   单列布局，比商家后台更轻
   ========================================================= */

.ubody{background:var(--bg);}

/* ---------- 顶栏 ---------- */
.utop{
  position:sticky;top:0;z-index:50;
  background:rgba(245,245,247,.84);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-soft);
}
.utop-in{
  max-width:880px;margin:0 auto;height:60px;padding:0 24px;
  display:flex;align-items:center;gap:14px;
}
.utop-r{margin-left:auto;display:flex;align-items:center;gap:12px;}
.upowered{
  font-size:11.5px;color:var(--mute-2);
  background:rgba(0,0,0,.045);border-radius:var(--pill);padding:4px 11px;
}
.uuser{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;}
.uava{
  width:26px;height:26px;border-radius:50%;font-style:normal;
  background:linear-gradient(148deg,#1a8bf5,var(--blue-dk));
  color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;
}

/* ---------- 主区 ---------- */
.umain{max-width:880px;margin:0 auto;padding:24px 24px 70px;}

.ucard{
  background:var(--card);border-radius:var(--r-l);
  box-shadow:var(--sh-1);padding:24px 26px;margin-bottom:18px;
}
.ucard-h{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:18px;
}
.ucard-h h3{font-size:15.5px;letter-spacing:-.02em;}
.ucard-s{font-size:12.5px;color:var(--mute);margin-top:4px;}

/* ---------- 额度卡 ---------- */
.uquota{
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 130% at 88% -20%,rgba(58,160,255,.34),transparent 62%),
    linear-gradient(148deg,#0b1c33 0%,#123f78 100%);
  color:#fff;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;
  padding:30px 28px 24px;
}
.uq-cap{font-size:13px;color:#a9bed6;}
.uq-num{
  font-size:42px;font-weight:600;letter-spacing:-.042em;line-height:1.1;
  margin-top:8px;font-variant-numeric:tabular-nums;
}
.uq-num em{font-style:normal;font-size:.34em;font-weight:400;color:#7f9ab8;margin-left:8px;letter-spacing:-.01em;}
.uq-sub{font-size:12.5px;color:#8fa8c4;margin-top:8px;}
.uq-r{position:relative;z-index:2;}
.uq-r .btn-primary{background:#fff;color:#0b1c33;}
.uq-r .btn-primary:hover{background:#eef3fa;}
.uqbar{
  grid-column:1 / -1;height:6px;border-radius:3px;
  background:rgba(255,255,255,.16);overflow:hidden;margin-top:6px;
}
.uqbar i{
  display:block;height:100%;border-radius:3px;width:0;
  background:linear-gradient(90deg,#4aa8ff,#8fe0ff);
  transition:width 1.1s var(--ease);
}
.uq-foot{
  grid-column:1 / -1;display:flex;justify-content:space-between;gap:16px;
  font-size:12.5px;color:#8fa8c4;margin-top:10px;
}
.uq-foot b{color:#fff;font-weight:600;}

/* ---------- 接入信息 ---------- */
.acc{display:flex;flex-direction:column;}
.acc-row{
  display:flex;align-items:center;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--line-soft);
}
.acc-row:first-child{border-top:1px solid var(--line-soft);}
.acc-k{font-size:12.5px;color:var(--mute);width:76px;flex:0 0 auto;}
.acc-v{
  flex:1;font-size:13px;color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  word-break:break-all;letter-spacing:.01em;
}
.acc-key.off{color:var(--mute-2);letter-spacing:.06em;}

.snippet{
  margin-top:18px;border-radius:var(--r-m);overflow:hidden;
  background:#f7f7f9;border:1px solid var(--line-soft);
}
.snippet-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--line-soft);
  font-size:12px;color:var(--mute);
}
.snippet pre{
  margin:0;padding:14px 16px;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.75;color:var(--ink-2);
  white-space:pre;
}

/* ---------- 用量 ---------- */
.spark{
  display:flex;align-items:flex-end;gap:6px;
  height:96px;padding:0 2px;margin-bottom:20px;
}
.spark i{
  flex:1;border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,#4aa8ff,var(--blue));
  height:0;transition:height .9s var(--ease);
  position:relative;
}
.spark i span{
  position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);
  font-size:10.5px;color:var(--mute-2);white-space:nowrap;
}
.spark-h{height:112px;padding-bottom:22px;}

.ufoot{
  margin-top:26px;text-align:center;font-size:12.5px;color:var(--mute-2);line-height:1.9;
}
.ufoot b{color:var(--mute);font-weight:600;}

/* ---------- 从商家后台借过来的两个零件 ---------- */
.model-chip{
  display:inline-block;font-size:12.5px;background:rgba(0,0,0,.045);
  border-radius:7px;padding:4px 9px;
}
.empty2{padding:48px 24px 52px;text-align:center;}
.empty2 .e-ico{
  width:56px;height:56px;border-radius:18px;margin:0 auto 18px;
  display:grid;place-items:center;
  background:rgba(0,113,227,.08);color:var(--blue);
}
.empty2 .e-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;}
.empty2 h4{font-size:15.5px;letter-spacing:-.02em;}
.empty2 p{font-size:13px;color:var(--mute);margin:9px auto 0;max-width:360px;line-height:1.72;}

@media(max-width:640px){
  .utop-in{padding:0 16px;gap:10px;}
  .upowered{display:none;}
  .umain{padding:16px 16px 60px;}
  .ucard{padding:20px 18px;border-radius:var(--r-m);}
  .uquota{grid-template-columns:1fr;padding:24px 20px 20px;}
  .uq-num{font-size:36px;}
  .uq-r .btn{width:100%;}
  .acc-row{flex-wrap:wrap;gap:8px;}
  .acc-k{width:100%;}
  .acc-v{width:100%;flex:0 0 100%;}
}

/* ---------- 登录/注册分段控件 ---------- */
.seg{
  position:relative;display:flex;margin-top:14px;
  background:#f5f5f7;border-radius:10px;padding:3px;
}
.seg-pill{
  position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);
  background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.12);
  transition:transform .3s var(--ease-2, cubic-bezier(.4,0,.2,1));
}
.seg.register .seg-pill{transform:translateX(100%);}
.seg-i{
  position:relative;flex:1;padding:8px 0;font-size:13.5px;font-weight:500;
  color:var(--mute);border:0;background:none;cursor:pointer;border-radius:8px;
  transition:color .2s;
}
.seg-i.on{color:var(--ink);}
.gate-site{display:block;margin-bottom:4px;}
.gate-box .seg{margin-top:16px;}
.gate-box .gate-s{margin-top:14px;}