/* ==========================================================================
   糖果积分屋 · H5 鲨鱼 UI（设计令牌取自 H5UI/assets/tokens.json）
   作用域：.sk —— 与残留的 Tailwind 子页面互不干扰
   ========================================================================== */

.sk{
  --brand-1:#6C7BFF; --brand-deep:#4A5AD6; --brand-soft:#8CB7FC; --brand-pale:#B1B3FD;
  /* 暖色只留给「语义」：价格 / 热销 / 警示，不再当装饰主色用 */
  --pink:#F2545B; --pink-soft:#FFECEC; --pink-deep:#D93F50;
  --warn:#F0A24E; --warn-soft:#FFF3E2; --warn-deep:#9A5B12;
  --purple:#A78BFA; --cyan:#5FB2E8; --mint:#5BC9A8;
  --ink-1:#2F3A56; --ink-2:#6B7A9E; --ink-3:#9AA8C4;
  --line:#E4EDFA; --border:#D8E7FB;
  --r-card:26px; --r-lg:22px; --r-md:16px; --r-pill:999px;
  --sh-card:0 6px 20px rgba(120,150,220,.12);
  --sh-float:0 10px 30px rgba(120,150,220,.18);
  --font-num:"DIN Alternate","SF Pro Rounded",-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
  /* 动效曲线：统一一份，别在组件里各写各的 */
  --ease:cubic-bezier(.2,.8,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* 页面骨架 ---------------------------------------------------------------- */
.sk-page{
  position:relative; min-height:100vh; overflow-x:hidden;
  background:linear-gradient(180deg,#DFEFFF 0%,#EAF4FE 46%,#F0F7FF 100%);
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
}
.sk-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.sk-main{ position:relative; z-index:2; padding:0 20px; }

.sk-cloud{ position:absolute; background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0)); filter:blur(2px); will-change:transform; }
.sk-c1{ width:180px; height:70px; right:-40px; top:52px; animation:skDrift 11s ease-in-out infinite alternate; }
.sk-c2{ width:150px; height:60px; left:-50px; top:150px; opacity:.8; animation:skDrift 14s ease-in-out infinite alternate-reverse; }
.sk-c3{ width:220px; height:80px; left:-60px; bottom:120px; opacity:.7; animation:skDrift 17s ease-in-out infinite alternate; }
.sk-bub{ position:absolute; border-radius:50%; border:2px solid rgba(180,205,245,.55); background:rgba(255,255,255,.28); animation:skFloat 7s ease-in-out infinite; }
.sk-b1{ width:16px; height:16px; right:70px; top:120px; }
.sk-b2{ width:9px; height:9px; right:110px; top:96px; animation-delay:-2.4s; }
.sk-b3{ width:26px; height:26px; right:26px; top:210px; opacity:.6; animation-delay:-4s; }
.sk-b4{ width:12px; height:12px; left:34px; top:300px; opacity:.6; animation-delay:-1.2s; }
/* 海浪会左右 sway ±7px，宽度多留 20px 才不会在边缘露出背景缝 */
.sk-wave{ position:absolute; left:-10px; right:-10px; bottom:0; width:calc(100% + 20px); height:170px; opacity:.9; }
.sk-wave path{ will-change:transform; }
.sk-wave .w1{ animation:skSway 9s ease-in-out infinite alternate; }
.sk-wave .w2{ animation:skSway 12s ease-in-out infinite alternate-reverse; }

/* 通用 -------------------------------------------------------------------- */
.sk-card{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-card); }
.sk-tap{ transition:transform .16s var(--ease), box-shadow .2s ease; }
.sk-tap:active{ transform:scale(.978); }
.sk-eyebrow{ display:flex; align-items:center; gap:6px; font-size:12px; color:#7C89AD; letter-spacing:.5px; }
.sk-dot{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--purple); box-shadow:0 0 0 3px rgba(167,139,250,.18); }
.sk-chev{ flex:none; width:18px; height:18px; color:#B9C6E6; }

/* 概览 -------------------------------------------------------------------- */
.sk-hero{ position:relative; padding-top:26px; margin-bottom:16px; }
.sk-hello{ margin:8px 0 0; font-size:29px; line-height:1.2; font-weight:800; color:var(--brand-deep); letter-spacing:.5px; }
.sk-welcome{ margin:6px 0 0; font-size:14px; color:var(--ink-2); }
.sk-welcome b{ color:#3B4680; font-weight:700; }
.sk-hero-mascot{ position:absolute; right:-6px; top:-2px; width:104px; filter:drop-shadow(0 6px 12px rgba(120,150,220,.18)); animation:skBob 4.6s ease-in-out infinite; }
.sk-spark{ position:absolute; right:96px; top:0; font-size:16px; color:#FFD76A; animation:skTwinkle 2.8s ease-in-out infinite; }

.sk-email{ display:flex; align-items:center; gap:12px; padding:14px 16px; margin-bottom:14px; text-decoration:none; border:0; width:100%; text-align:left; font-family:inherit; cursor:pointer; }
.sk-mail-badge{ flex:none; width:42px; height:42px; border-radius:14px; background:#E7EFFF; display:grid; place-items:center; color:var(--brand-deep); }
.sk-mail-badge svg{ width:23px; height:23px; }
.sk-email-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.sk-email-title{ font-size:15px; font-weight:700; color:var(--ink-1); }
.sk-email-sub{ font-size:12px; color:#8A98B8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 钱包（紫 / 蓝两版共用骨架） */
.sk-wallet{
  position:relative; border-radius:var(--r-card); padding:18px 18px 14px; color:#fff; overflow:hidden; margin-bottom:14px;
  background:linear-gradient(118deg,#9C86F5 0%,#ACA4FB 48%,#C6C9FF 100%);
  box-shadow:0 12px 26px rgba(140,140,240,.30);
}
.sk-wallet--blue{ background:linear-gradient(120deg,#6D9FF5 0%,#8FB8FF 58%,#BBD4FF 100%); box-shadow:0 12px 26px rgba(120,160,220,.30); }
.sk-star{ position:absolute; color:rgba(255,255,255,.9); font-size:13px; }
.sk-star.s1{ right:118px; top:14px; animation:skTwinkle 3.4s ease-in-out infinite; }
.sk-star.s2{ right:96px; top:94px; opacity:.7; animation:skTwinkle 4.2s ease-in-out infinite reverse; }
.sk-wallet-top{ display:flex; align-items:center; gap:9px; position:relative; z-index:2; }
.sk-wallet-badge{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.22); display:grid; place-items:center; }
.sk-wallet-badge svg{ width:19px; height:19px; color:#fff; }
.sk-wallet-title{ font-size:18px; font-weight:700; }
.sk-wallet-body{ display:flex; align-items:flex-start; gap:6px; margin-top:12px; position:relative; z-index:2; }
.sk-wallet-stats{ flex:1; min-width:0; }
.sk-wrow{ display:flex; align-items:flex-end; flex-wrap:nowrap; }
.sk-witem{ min-width:0; }
.sk-witem + .sk-witem{ flex:none; }
.sk-wlabel{ display:block; font-size:12px; color:rgba(255,255,255,.88); margin-bottom:2px; }
.sk-wnum{ display:block; font-family:var(--font-num); font-weight:800; letter-spacing:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
.sk-wnum.big{ font-size:24px; line-height:1.06; }
.sk-wnum.mid{ font-size:20px; line-height:1.1; }
.sk-wnum.small{ font-size:16px; line-height:1.25; color:rgba(255,255,255,.95); }
.sk-vline{ flex:none; width:1px; align-self:stretch; background:rgba(255,255,255,.5); margin:0 10px; border-radius:2px; }
.sk-wallet-mascot{ flex:none; width:82px; margin-top:-16px; margin-right:-10px; filter:drop-shadow(0 6px 10px rgba(70,60,160,.25)); }
.sk-wnote{ margin:10px 0 0; font-size:10.5px; line-height:1.45; color:rgba(255,255,255,.78); position:relative; z-index:2; }
.sk-wfoot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.22); position:relative; z-index:2; }
.sk-wmeta{ display:flex; gap:14px; font-size:12px; color:rgba(255,255,255,.86); }
.sk-wmeta b{ color:#fff; font-variant-numeric:tabular-nums; }
.sk-ghost-btn{ display:inline-flex; align-items:center; gap:4px; border:1px solid rgba(255,255,255,.42); background:rgba(255,255,255,.20); color:#fff; font-size:12px; font-weight:600; padding:7px 13px; border-radius:var(--r-pill); cursor:pointer; white-space:nowrap; text-decoration:none; font-family:inherit; }
.sk-ghost-btn svg{ width:13px; height:13px; }
.sk-icon-btn{ border:0; background:rgba(255,255,255,.18); color:#fff; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; cursor:pointer; }
.sk-icon-btn svg{ width:15px; height:15px; }
.sk-icon-btn.spinning svg{ animation:skSpin .8s linear infinite; }

/* 运营广告位（首页 home 位，有数据才渲染） */
.sk-ad{ display:flex; align-items:center; gap:12px; padding:10px; margin-bottom:14px; text-decoration:none; }
.sk-ad img{ flex:none; width:64px; height:64px; border-radius:14px; object-fit:cover; background:#F3F7FF; }
.sk-ad-body{ flex:1; min-width:0; }
.sk-ad-title{ font-size:14px; font-weight:700; color:var(--ink-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sk-ad-sub{ margin-top:3px; font-size:11.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* AI 小助手 */
.sk-ai{ position:relative; padding:18px; }
.sk-ai-corner{ position:absolute; right:4px; top:-34px; width:58px; filter:drop-shadow(0 6px 10px rgba(120,150,220,.20)); animation:skBob 5.2s ease-in-out infinite; }
.sk-ai-head{ display:flex; align-items:center; gap:10px; }
.sk-ai-avatar{ flex:none; width:46px; height:46px; border-radius:50%; background:#EAF2FF; object-fit:cover; border:2px solid #fff; box-shadow:0 3px 8px rgba(120,150,220,.18); }
.sk-ai-titles{ flex:1; min-width:0; }
.sk-ai-titles h2{ margin:0; font-size:18px; font-weight:700; color:var(--ink-1); }
.sk-ai-titles p{ margin:3px 0 0; font-size:12px; color:#8A98B8; }
.sk-tag-transit{ flex:none; align-self:flex-start; font-size:10px; font-weight:700; color:var(--warn-deep); background:var(--warn-soft); padding:4px 9px; border-radius:var(--r-pill); }
.sk-chips{ display:flex; gap:8px; overflow-x:auto; padding:13px 0 3px; margin:0 -2px; scrollbar-width:none; -ms-overflow-style:none; }
.sk-chips::-webkit-scrollbar{ display:none; }
.sk-chip{ flex:none; display:inline-flex; align-items:center; gap:5px; background:#F0F3FF; border:1px solid #E6ECFB; color:#5A6890; font-size:12px; padding:6px 11px; border-radius:var(--r-pill); white-space:nowrap; font-family:inherit; cursor:pointer; transition:transform .14s var(--ease), background .18s; }
.sk-chip:active{ transform:scale(.95); background:#E9E1FF; }
.sk-chip:disabled{ opacity:.5; }
.sk-chip svg{ width:14px; height:14px; }
.sk-chat{ display:flex; align-items:center; gap:8px; background:#F2F7FF; border-radius:var(--r-pill); padding:6px 6px 6px 16px; margin-top:12px; }
.sk-chat input{ flex:1; min-width:0; border:0; background:transparent; font-size:13px; color:var(--ink-1); outline:none; font-family:inherit; height:28px; }
.sk-chat input::placeholder{ color:var(--ink-3); }
.sk-send{ flex:none; width:40px; height:40px; border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:linear-gradient(135deg,#C4B5FD,#A78BFA); box-shadow:0 5px 12px rgba(167,139,250,.42); color:#fff; transition:transform .14s var(--ease); }
.sk-send:active{ transform:scale(.92); }
.sk-send:disabled{ opacity:.5; }
.sk-send svg{ width:20px; height:20px; }

/* AI 回答区 */
.sk-answer{ margin-top:14px; padding-top:14px; border-top:1px dashed #E0E8FA; display:none; }
.sk-answer.show{ display:block; animation:skFade .3s var(--ease) both; }
.sk-loading{ display:none; align-items:center; gap:6px; font-size:12px; color:var(--ink-3); }
.sk-loading.show{ display:flex; }
.sk-loading i{ width:6px; height:6px; border-radius:50%; background:var(--brand-soft); display:inline-block; animation:skBlink 1.2s infinite ease-in-out; }
.sk-loading i:nth-child(2){ animation-delay:.2s; }
.sk-loading i:nth-child(3){ animation-delay:.4s; }
.sk-atext{ margin:0; font-size:13px; color:var(--ink-1); line-height:1.65; white-space:pre-line; }
.sk-abullets{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.sk-abullets li{ display:flex; align-items:flex-start; gap:8px; font-size:12px; color:#5A6890; line-height:1.6; }
.sk-abullets li::before{ content:""; flex:none; width:4px; height:4px; border-radius:50%; background:var(--brand-soft); margin-top:8px; }
.sk-anotice{ display:none; align-items:flex-start; gap:6px; background:#FFF7E8; border:1px solid #FFE2B8; border-radius:12px; padding:8px 10px; margin-bottom:9px; font-size:11px; color:#8A5A12; line-height:1.5; }
.sk-anotice.show{ display:flex; }
.sk-ameta{ font-size:10px; color:var(--ink-3); margin-top:10px; display:flex; align-items:center; justify-content:space-between; }
.sk-alink{ border:0; background:none; color:var(--brand-1); font-size:10px; cursor:pointer; font-family:inherit; padding:0; }

.sk-foot-mascot{ position:absolute; left:6px; bottom:78px; width:74px; z-index:1; filter:drop-shadow(0 6px 10px rgba(120,150,220,.20)); pointer-events:none; animation:skBob 6s ease-in-out infinite; }

/* 公告 -------------------------------------------------------------------- */
.sk-head{ display:flex; align-items:center; gap:10px; padding:20px 0 16px; }
.sk-back{ width:36px; height:36px; border-radius:50%; background:#fff; border:0; cursor:pointer; display:grid; place-items:center; box-shadow:var(--sh-card); color:var(--brand-deep); text-decoration:none; flex:none; }
.sk-back svg{ width:19px; height:19px; }
.sk-head h1{ margin:0; font-size:19px; font-weight:800; color:var(--ink-1); display:flex; align-items:center; gap:8px; }
.sk-head h1 svg{ width:20px; height:20px; color:var(--brand-1); }
.sk-notices{ display:flex; flex-direction:column; gap:12px; }
.sk-notice{ padding:15px 16px; }
.sk-nhead{ display:flex; align-items:flex-start; gap:8px; }
.sk-notice h3{ flex:1; min-width:0; margin:0; font-size:15px; font-weight:700; color:var(--ink-1); line-height:1.4; }
.sk-nflag{ flex:none; margin-top:2px; padding:2px 8px; border-radius:var(--r-pill); background:var(--purple); color:#fff; font-size:10px; font-weight:700; }
.sk-ntype{ flex:none; margin-top:2px; padding:2px 8px; border-radius:var(--r-pill); font-size:10px; font-weight:700; }
.sk-notice p{ margin:7px 0 0; font-size:12.5px; color:var(--ink-2); line-height:1.6; white-space:pre-line; }
.sk-notice .sk-ndate{ display:block; margin-top:9px; font-size:11px; color:var(--ink-3); }
.sk-more{ margin-top:8px; border:0; background:none; padding:0; color:var(--brand-deep); font-size:12.5px; font-weight:600; font-family:inherit; cursor:pointer; }
.sk-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:56px 0 40px; gap:14px; }
.sk-empty img{ width:200px; max-width:72%; }
.sk-empty p{ margin:0; font-size:14px; color:var(--ink-3); }
.sk-listend{ margin:18px 0 0; text-align:center; font-size:11.5px; color:var(--ink-3); letter-spacing:.5px; }

/* 我的 -------------------------------------------------------------------- */
.sk-phead{ position:relative; display:flex; align-items:center; gap:12px; padding:26px 0 16px; }
.sk-avatar{ flex:none; width:56px; height:56px; border-radius:50%; background:#EAF2FF; border:2px solid #fff; object-fit:cover; box-shadow:0 4px 10px rgba(120,150,220,.2); }
.sk-pinfo{ flex:1; min-width:0; padding-right:76px; }
.sk-pname{ font-size:21px; font-weight:800; color:var(--ink-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sk-pbind{ display:flex; align-items:center; gap:4px; margin-top:4px; font-size:12px; color:#3BB273; }
.sk-pbind svg{ width:14px; height:14px; }
.sk-pbind.warn{ color:var(--brand-deep); border:0; background:none; padding:0; font-family:inherit; cursor:pointer; }
.sk-pmascot{ position:absolute; right:0; top:10px; width:76px; filter:drop-shadow(0 6px 12px rgba(120,150,220,.18)); animation:skBob 5.6s ease-in-out infinite; }

.sk-wb-nums{ display:flex; flex-wrap:wrap; gap:10px 30px; margin-top:14px; position:relative; z-index:2; }
.sk-wb-cap{ font-size:12px; color:rgba(255,255,255,.85); }
.sk-wb-num{ font-family:var(--font-num); font-size:24px; font-weight:800; line-height:1.2; white-space:nowrap; font-variant-numeric:tabular-nums; }
.sk-recv{ width:100%; margin-top:16px; padding:11px; border-radius:14px; border:1px solid rgba(255,255,255,.42); background:rgba(255,255,255,.24); color:#fff; font-size:14px; font-weight:700; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; position:relative; z-index:2; transition:transform .14s var(--ease); }
.sk-recv:active{ transform:scale(.98); }
.sk-recv svg{ width:17px; height:17px; }

.sk-stat{ background:#fff; border-radius:var(--r-lg); padding:16px; box-shadow:var(--sh-card); margin-bottom:14px; }
.sk-stitle{ display:flex; align-items:center; gap:6px; font-size:15px; font-weight:700; color:var(--ink-1); margin-bottom:14px; }
.sk-stitle svg{ width:17px; height:17px; color:var(--brand-1); }
.sk-srow{ display:flex; }
.sk-scol{ flex:1; text-align:center; padding:0 4px; min-width:0; }
.sk-scol + .sk-scol{ border-left:1px solid var(--line); }
.sk-sval{ font-family:var(--font-num); font-size:19px; font-weight:800; color:var(--brand-deep); white-space:nowrap; font-variant-numeric:tabular-nums; }
.sk-scap{ font-size:11px; color:var(--ink-3); margin-top:4px; }
.sk-snote{ margin:14px 0 0; font-size:10.5px; line-height:1.5; color:#B4834A; }

.sk-menu{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-card); overflow:hidden; }
.sk-mrow{ display:flex; align-items:center; gap:12px; padding:13px 16px; text-decoration:none; color:var(--ink-1); width:100%; border:0; background:none; font-family:inherit; font-size:15px; text-align:left; cursor:pointer; transition:background .16s; }
.sk-mrow:active{ background:#F6F9FF; }
.sk-mrow + .sk-mrow{ border-top:1px solid var(--line); }
.sk-mic{ flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#fff; }
.sk-mic svg{ width:19px; height:19px; }
.sk-mname{ flex:1; font-size:15px; font-weight:600; }
.sk-mrow .sk-chev{ width:16px; height:16px; }
.sk-logout{ width:100%; margin-top:14px; padding:14px; border:0; border-radius:var(--r-lg); cursor:pointer; background:#fff; box-shadow:var(--sh-card); color:var(--pink-deep); font-family:inherit; font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:7px; }
.sk-logout svg{ width:18px; height:18px; }

/* 商城 -------------------------------------------------------------------- */
.sk-mhead{ display:flex; align-items:center; gap:10px; padding:14px 0 14px; }
.sk-mhead .sk-ticon{ flex:none; width:38px; height:38px; border-radius:12px; background:#E7EFFF; display:grid; place-items:center; color:var(--brand-deep); }
.sk-mhead .sk-ticon svg{ width:22px; height:22px; }
.sk-mhead h1{ margin:0; font-size:24px; font-weight:800; color:var(--ink-1); }
.sk-mhead .sk-detail{ margin-left:auto; display:flex; align-items:center; gap:2px; font-size:13px; color:var(--brand-deep); text-decoration:none; }
.sk-mhead .sk-detail svg{ width:15px; height:15px; }

.sk-blue{ position:relative; border-radius:var(--r-card); padding:18px; color:#fff; overflow:hidden; margin-bottom:16px; background:linear-gradient(120deg,#6D9FF5 0%,#8FB8FF 55%,#BBD4FF 100%); box-shadow:0 12px 26px rgba(120,160,220,.30); }
.sk-blue .sk-bmascot{ position:absolute; right:-8px; bottom:-14px; width:128px; filter:drop-shadow(0 8px 12px rgba(70,90,160,.25)); animation:skBob 5s ease-in-out infinite; }
.sk-blue .sk-bbody{ position:relative; z-index:2; max-width:74%; }
.sk-blabel{ font-size:13px; color:rgba(255,255,255,.9); display:flex; align-items:center; gap:5px; }
.sk-blabel svg{ width:15px; height:15px; }
.sk-bnum{ font-family:var(--font-num); font-size:33px; font-weight:800; letter-spacing:.3px; margin-top:2px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.sk-bsub{ font-size:11px; color:rgba(255,255,255,.85); margin-top:3px; }
.sk-bactions{ display:flex; gap:10px; margin-top:16px; }
.sk-bbtn{ display:inline-flex; align-items:center; gap:6px; padding:9px 15px; border-radius:var(--r-pill); background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.4); color:#fff; font-size:12.5px; font-weight:600; text-decoration:none; }
.sk-bbtn svg{ width:15px; height:15px; }

.sk-tipbar{ display:flex; align-items:flex-start; gap:8px; background:#FFF7E8; border:1px solid #FFE2B8; border-radius:16px; padding:11px 14px; margin-bottom:14px; font-size:11.5px; color:#8A5A12; line-height:1.55; }
.sk-tipbar svg{ flex:none; width:14px; height:14px; margin-top:1px; color:#C77A1A; }
.sk-gbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:rgba(255,255,255,.75); border-radius:16px; padding:10px 14px; margin-bottom:14px; font-size:11.5px; color:var(--ink-2); box-shadow:var(--sh-card); }

.sk-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sk-prod{ background:#fff; border-radius:20px; padding:10px; box-shadow:var(--sh-card); position:relative; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.sk-pimg{ position:relative; width:100%; aspect-ratio:1/1; border-radius:14px; background:#F3F7FF; display:grid; place-items:center; overflow:hidden; }
.sk-pimg img{ width:100%; height:100%; object-fit:cover; }
.sk-pimg .sk-pempty{ display:grid; place-items:center; color:#C3D2EC; }
.sk-pimg .sk-pempty svg{ width:38px; height:38px; }
.sk-pname{ font-size:13px; color:var(--ink-1); margin:9px 2px 0; line-height:1.35; min-height:2.7em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sk-pfoot{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:auto; padding-top:8px; }
.sk-pprice{ font-family:var(--font-num); font-size:15px; font-weight:800; color:var(--pink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.sk-pprice .u{ font-family:inherit; font-size:10px; font-weight:600; margin-left:2px; }
.sk-stock{ font-size:10px; color:var(--warn-deep); background:var(--warn-soft); padding:2px 8px; border-radius:var(--r-pill); white-space:nowrap; }
.sk-stock.grey{ color:#8E9BB5; background:#F1F4F9; }
.sk-stock.green{ color:#1E8F6A; background:#E4F8F0; }
.sk-pflag{ position:absolute; left:8px; top:8px; z-index:3; background:#fff; color:var(--brand-deep); font-size:10px; font-weight:700; padding:2px 8px; border-radius:8px; box-shadow:0 2px 6px rgba(120,150,220,.18); }
.sk-plimit{ margin:6px 2px 0; font-size:10px; color:#B4670F; background:#FFF6EA; padding:1px 6px; border-radius:6px; align-self:flex-start; }
.sk-pager{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:20px; font-size:13px; color:var(--ink-3); }
.sk-pager a{ padding:8px 18px; background:#fff; border-radius:var(--r-pill); box-shadow:var(--sh-card); color:var(--brand-deep); text-decoration:none; }

/* 模型市场 ---------------------------------------------------------------- */
.sk-mkhead{ position:relative; padding:16px 0 14px; }
.sk-mkhead h1{ margin:6px 0 0; font-size:25px; font-weight:800; color:var(--brand-deep); letter-spacing:.5px; }
.sk-mkmascot{ position:absolute; right:2px; top:2px; width:74px; filter:drop-shadow(0 6px 12px rgba(120,150,220,.18)); animation:skBob 5.4s ease-in-out infinite; }
.sk-search{ display:flex; align-items:center; gap:9px; background:#fff; border-radius:var(--r-pill); padding:0 16px; height:44px; box-shadow:var(--sh-card); margin-bottom:14px; }
.sk-search svg{ width:17px; height:17px; color:var(--ink-3); flex:none; }
.sk-search input{ flex:1; min-width:0; border:0; outline:none; background:transparent; font-size:13px; color:var(--ink-1); font-family:inherit; height:100%; }
.sk-search input::placeholder{ color:var(--ink-3); }
.sk-sortbar{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 10px; }
.sk-sortbar .cnt{ font-size:12px; color:var(--ink-3); }
.sk-sorts{ display:flex; gap:15px; font-size:13px; }
.sk-sort{ border:0; background:none; padding:0; font-family:inherit; font-size:13px; color:var(--ink-2); cursor:pointer; transition:color .18s; }
.sk-sort.on{ color:var(--brand-deep); font-weight:700; }
.sk-models{ display:flex; flex-direction:column; gap:10px; }
.sk-model{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-card); padding:14px 16px; display:flex; align-items:flex-start; gap:10px; }
.sk-mmain{ flex:1; min-width:0; }
.sk-mname{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:15px; font-weight:700; color:var(--ink-1); word-break:break-all; }
.sk-copy{ flex:none; width:22px; height:22px; border:0; background:none; color:#B9C6E6; cursor:pointer; display:grid; place-items:center; padding:0; }
.sk-copy svg{ width:13px; height:13px; }
.sk-copy:active{ color:var(--brand-deep); }
.sk-msub{ margin-top:5px; font-size:12px; color:var(--ink-3); }
.sk-mdesc{ margin:6px 0 0; font-size:12px; color:var(--ink-2); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sk-mtags{ margin-top:7px; display:flex; gap:6px; flex-wrap:wrap; }
.sk-mtag{ font-size:10px; padding:2px 8px; border-radius:var(--r-pill); background:#F0F3FF; color:#5A6890; }
.sk-mtag.hot{ background:#FFEDE3; color:#C9562A; }
.sk-mprice{ flex:none; font-family:var(--font-num); font-size:16px; font-weight:800; color:#FF5A5F; white-space:nowrap; }
.sk-mprice .u{ font-size:10px; font-weight:600; }


/* 登录 ------------------------------------------------------------------- */
.sk-login-top{ position:relative; padding:24px 0 6px; }
.sk-login-mascot{ display:block; width:120px; margin:0 0 2px; filter:drop-shadow(0 10px 18px rgba(120,150,220,.22)); animation:skBob 5s ease-in-out infinite; }
/* 品牌名当主标题：蓝色大字；slogan 反过来做黑色中字的两行 */
.sk-login-brand{ margin:10px 0 0; font-size:36px; font-weight:800; color:var(--brand-deep); letter-spacing:1px; line-height:1.15; }
.sk-login-line{ margin:11px 0 0; font-size:16px; font-weight:500; color:#20283A; letter-spacing:.3px; line-height:1.55; }
.sk-login-line + .sk-login-line{ margin-top:5px; }
.sk-login-card{ padding:22px 18px 20px; margin-top:22px; }
/* 注册引导：轻量提示条，不抢表单注意力 */
.sk-login-tip{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:16px 0 0; padding:10px 14px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.72); border:1px solid #E2ECFA;
  font-size:12px; line-height:1.5; color:var(--ink-2); text-align:center;
}
.sk-login-tip svg{ flex:none; width:15px; height:15px; color:var(--brand-1); }
.sk-login-tip b{ font-weight:700; color:var(--brand-deep); }
/* 登录页内容少，长屏上会顶空一大截 —— 垂直居中并让重心略偏上 */
body[data-page="login"] .sk-page{
  display:flex; flex-direction:column; justify-content:center;
  padding-bottom:calc(90px + env(safe-area-inset-bottom));
}
body[data-page="login"] .sk-main{ width:100%; }
.sk-label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin:0 0 7px; }
.sk-field{ display:flex; align-items:center; gap:9px; background:#F5F8FF; border:1.5px solid #E4EDFA; border-radius:14px; padding:0 14px; height:50px; margin-bottom:14px; transition:border-color .18s, box-shadow .18s, background .18s; }
.sk-field:focus-within{ border-color:var(--brand-1); background:#fff; box-shadow:0 0 0 4px rgba(108,123,255,.10); }
.sk-field svg{ width:18px; height:18px; color:var(--ink-3); flex:none; }
.sk-field input{ flex:1; min-width:0; border:0; background:transparent; outline:none; font-size:15px; color:var(--ink-1); font-family:inherit; height:100%; padding:0; }
.sk-field input::placeholder{ color:var(--ink-3); }
.sk-submit{ width:100%; height:50px; border:0; border-radius:14px; cursor:pointer; color:#fff; font-family:inherit; font-size:16px; font-weight:700; letter-spacing:1px; margin-top:4px;
  background:linear-gradient(135deg,#8FA0FF,#6C7BFF); box-shadow:0 10px 22px rgba(108,123,255,.32); transition:transform .14s var(--ease), box-shadow .2s; }
.sk-submit:active{ transform:scale(.98); }
.sk-submit:disabled{ opacity:.6; }
.sk-alert{ display:flex; gap:7px; align-items:flex-start; padding:10px 12px; border-radius:12px; font-size:12.5px; line-height:1.55; margin-bottom:14px; }
.sk-alert svg{ flex:none; width:14px; height:14px; margin-top:2px; }
.sk-alert.err{ background:#FFF1F3; border:1px solid #FFD6DE; color:#C0392B; }
.sk-alert.ok{ background:#EAFBF4; border:1px solid #B5EBD8; color:#1E8F6A; }
.sk-login-foot{ margin:18px 0 0; text-align:center; font-size:12px; color:var(--ink-3); }
.sk-login-foot button{ border:0; background:none; color:var(--brand-1); font-family:inherit; font-size:12px; cursor:pointer; padding:0; text-decoration:underline; }

/* TabBar ------------------------------------------------------------------ */
.sk-tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50; margin:0 auto; max-width:520px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:24px 24px 0 0; box-shadow:0 -4px 24px rgba(120,150,220,.14);
  display:flex; align-items:center; justify-content:space-around;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.sk-tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none; color:#8E9BB5; font-size:11px; padding:3px 0; }
.sk-tab-ic{ width:30px; height:26px; display:grid; place-items:center; border-radius:10px; transition:background .22s var(--ease); }
.sk-tab-ic svg{ width:22px; height:22px; }
.sk-tab.active .sk-tab-ic{ background:var(--tab-on,linear-gradient(135deg,#8FA0FF,#6C7BFF)); box-shadow:0 4px 10px rgba(108,123,255,.36); animation:skPop .42s var(--ease); }
.sk-tab.active{ color:var(--tab-on-text,var(--brand-deep)); }
.sk-tab.active .sk-tab-label{ font-weight:700; }
.sk-tab:active .sk-tab-ic{ transform:scale(.9); }

/* Tab 选中色全站统一为品牌蓝紫：Tab 是全局导航，不该跟着页面变主题色 */

/* 动画 -------------------------------------------------------------------- */
@keyframes skRise{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
@keyframes skFade{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
@keyframes skPop{ 0%{ transform:scale(.7) } 55%{ transform:scale(1.14) } 100%{ transform:scale(1) } }
@keyframes skBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
@keyframes skDrift{ from{ transform:translateX(0) } to{ transform:translateX(-18px) } }
@keyframes skSway{ from{ transform:translateX(-7px) } to{ transform:translateX(7px) } }
@keyframes skFloat{ 0%,100%{ transform:translateY(0) scale(1) } 50%{ transform:translateY(-10px) scale(1.06) } }
@keyframes skTwinkle{ 0%,100%{ opacity:.35; transform:scale(.9) } 50%{ opacity:1; transform:scale(1.1) } }
@keyframes skBlink{ 0%,80%,100%{ opacity:.25 } 40%{ opacity:1 } }
@keyframes skSpin{ to{ transform:rotate(360deg) } }
@keyframes skShimmer{ from{ background-position:-200% 0 } to{ background-position:200% 0 } }

/* 入场：只写动画、不写静态 opacity:0 —— 这样 reduced-motion 关掉动画时内容仍可见 */
.sk-rise{ animation:skRise .55s var(--ease-out) both; animation-delay:calc(var(--i,0) * 65ms); }

/* ==========================================================================
   二级页通用（接口管理 / 调用日志 / 令牌管理）
   ========================================================================== */
.sk-pad{ padding:16px 16px 18px; }

/* 小节标题（卡片内） */
.sk-capt{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--ink-1); margin-bottom:13px; }
.sk-capt-ic{ flex:none; width:24px; height:24px; border-radius:8px; background:#E7EFFF; color:var(--brand-deep); display:grid; place-items:center; }
.sk-capt-ic svg{ width:14px; height:14px; }

/* 环境切换 pill */
.sk-envs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.sk-env{
  display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 14px;
  border:1.5px solid #E4EDFA; border-radius:var(--r-pill); background:#F7FAFF;
  color:var(--ink-2); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;
  transition:background .2s, border-color .2s, color .2s, transform .16s var(--ease);
}
.sk-env svg{ width:15px; height:15px; }
.sk-env:active{ transform:scale(.96); }
.sk-env.is-on{
  background:linear-gradient(135deg,#8FA0FF,#6C7BFF); border-color:transparent; color:#fff;
  box-shadow:0 5px 14px rgba(108,123,255,.32);
}

/* API 地址 + 复制 */
.sk-urlbox{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,#F1F5FF,#E9F0FF); border:1.5px solid #DFE9FB;
  border-radius:var(--r-md); padding:11px 12px;
}
.sk-urltxt{ flex:1; min-width:0; }
.sk-urllabel{ display:block; font-size:10.5px; color:var(--ink-3); letter-spacing:.4px; margin-bottom:3px; }
.sk-urlbox code{
  display:block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;
  font-weight:600; color:var(--ink-1); word-break:break-all; line-height:1.45;
}
.sk-copybtn{
  flex:none; width:44px; height:44px; border:0; border-radius:14px; cursor:pointer;
  background:linear-gradient(135deg,#8FA0FF,#6C7BFF); color:#fff; display:grid; place-items:center;
  box-shadow:0 6px 14px rgba(108,123,255,.32); transition:transform .16s var(--ease), background .2s;
}
.sk-copybtn svg{ width:20px; height:20px; }
.sk-copybtn:active{ transform:scale(.92); }
.sk-copybtn.is-done{ background:linear-gradient(135deg,#5FD3B2,#3FB08E); box-shadow:0 6px 14px rgba(63,176,142,.34); }

/* 信息说明卡 */
.sk-note{ background:#EEF3FF; border:1px solid #DCE7FB; border-radius:var(--r-lg); padding:14px 16px; margin-top:14px; }
.sk-note h3{ display:flex; align-items:center; gap:6px; margin:0 0 9px; font-size:13px; font-weight:800; color:#3E4C7A; }
.sk-note h3 svg{ width:15px; height:15px; color:var(--brand-1); }
.sk-note ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.sk-note li{ position:relative; padding-left:14px; font-size:12px; line-height:1.6; color:#4A5A85; }
.sk-note li::before{ content:""; position:absolute; left:0; top:7px; width:4px; height:4px; border-radius:50%; background:var(--brand-soft); }
.sk-note code{
  display:inline-block; background:#fff; border:1px solid #DCE7FB; border-radius:6px;
  padding:1px 6px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:#3A4A8C;
}

/* 区块大标题 */
.sk-secttl{ text-align:center; padding:26px 0 14px; }
.sk-secttl h2{ margin:0; font-size:17px; font-weight:800; color:var(--ink-1); }
.sk-secttl p{ margin:5px 0 0; font-size:11.5px; color:var(--ink-3); }

/* 接入教程卡 */
.sk-guide{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-card); overflow:hidden; margin-bottom:14px; }
.sk-guide[data-tone="blue"]{ --g1:#8FA0FF; --g2:#6C7BFF; --gsoft:#EDF1FF; --gink:#3F4CB0; }
.sk-guide[data-tone="mint"]{ --g1:#5FD3B2; --g2:#3FB08E; --gsoft:#E7F9F2; --gink:#1F7A61; }
.sk-guide[data-tone="amber"]{ --g1:#FFB067; --g2:#F08A3C; --gsoft:#FFF2E2; --gink:#8E5312; }

.sk-ghead{ display:flex; align-items:center; gap:10px; padding:13px 15px; background:var(--gsoft); }
.sk-gicon{ flex:none; width:34px; height:34px; border-radius:11px; background:linear-gradient(135deg,var(--g1),var(--g2)); color:#fff; display:grid; place-items:center; box-shadow:0 4px 10px rgba(90,120,190,.2); }
.sk-gicon svg{ width:19px; height:19px; }
.sk-gname{ flex:1; min-width:0; }
.sk-gname h3{ margin:0; font-size:14.5px; font-weight:800; color:var(--gink); letter-spacing:.2px; }
.sk-gname p{ margin:2px 0 0; font-size:10.5px; color:var(--gink); opacity:.72; }
.sk-gtag{ flex:none; padding:3px 10px; border-radius:var(--r-pill); background:#fff; color:var(--gink); font-size:10px; font-weight:700; }

.sk-steps{ margin:0; padding:15px 15px 6px; list-style:none; display:flex; flex-direction:column; gap:13px; }
.sk-steps li{ display:flex; gap:9px; }
.sk-step{ flex:none; width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,var(--g1),var(--g2)); color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; box-shadow:0 3px 8px rgba(90,120,190,.22); }
.sk-stepbody{ flex:1; min-width:0; padding-top:1px; }
.sk-stepbody h4{ margin:0 0 4px; font-size:13px; font-weight:700; color:var(--ink-1); }
.sk-stepbody p{ margin:0; font-size:11.5px; line-height:1.72; color:var(--ink-2); }
.sk-stepbody b{ color:var(--gink); font-weight:700; }
.sk-stepbody code{
  display:inline-block; background:#F2F6FF; border:1px solid #E2EAFB; border-radius:6px;
  padding:1px 6px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px;
  color:#3A4A8C; word-break:break-all;
}
.sk-k{ display:inline-block; min-width:56px; font-size:10.5px; font-weight:700; color:var(--ink-3); }

/* ---- 调用日志 ---- */
.sk-headnum{ margin-left:auto; font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }

.sk-filter{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-card); overflow:hidden; margin-bottom:14px; }
.sk-fhead{
  width:100%; border:0; background:none; font-family:inherit; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:14px 16px; color:var(--ink-1); font-size:13.5px; font-weight:700;
}
.sk-fhead-l{ display:flex; align-items:center; gap:7px; }
.sk-fhead-l svg{ width:16px; height:16px; color:var(--brand-1); }
.sk-fdot{ width:6px; height:6px; border-radius:50%; background:var(--brand-1); box-shadow:0 0 0 3px rgba(108,123,255,.16); }
.sk-fchev{ width:17px; height:17px; color:var(--ink-3); transition:transform .24s var(--ease); }
.sk-fchev.is-up{ transform:rotate(180deg); }

.sk-fbody{ display:none; padding:2px 16px 16px; border-top:1px solid #EEF3FB; }
.sk-fbody.is-open{ display:block; animation:skFade .28s var(--ease-out) both; }

.sk-frow{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sk-frow > .sk-fgroup{ min-width:0; }
/* datetime-local 的原生最小宽度会顶破两列布局，单独收紧 */
.sk-input[type="datetime-local"]{ min-width:0; font-size:12.5px; padding-left:9px; padding-right:2px; }
.sk-fgroup{ margin-top:12px; }
.sk-factions{ display:flex; gap:10px; margin-top:16px; }
.sk-btn-primary{
  flex:1; height:44px; border:0; border-radius:13px; cursor:pointer; color:#fff; font-family:inherit;
  font-size:14px; font-weight:700; background:linear-gradient(135deg,#8FA0FF,#6C7BFF);
  box-shadow:0 6px 16px rgba(108,123,255,.3); transition:transform .16s var(--ease);
}
.sk-btn-primary:active{ transform:scale(.98); }
.sk-btn-ghost{
  flex:none; padding:0 20px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:13px; background:#F1F5FF; color:var(--ink-2); font-size:14px; font-weight:600;
  text-decoration:none; transition:background .2s;
}
.sk-btn-ghost:active{ background:#E6EDFB; }

.sk-ranges{ display:flex; flex-wrap:wrap; gap:7px; }
.sk-range{
  padding:7px 14px; border-radius:var(--r-pill); background:#F4F7FE; border:1.5px solid #E7EEFA;
  color:var(--ink-2); font-size:12px; font-weight:600; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.sk-range.is-on{ background:linear-gradient(135deg,#8FA0FF,#6C7BFF); border-color:transparent; color:#fff; box-shadow:0 4px 12px rgba(108,123,255,.26); }

.sk-input{
  display:block; width:100%; height:44px; padding:0 12px; border:1.5px solid #E4EDFA; border-radius:13px;
  background:#F7FAFF; color:var(--ink-1); font-family:inherit; font-size:13.5px;
  transition:border-color .18s, background .18s, box-shadow .18s;
}
.sk-input:focus{ outline:none; border-color:var(--brand-1); background:#fff; box-shadow:0 0 0 4px rgba(108,123,255,.1); }
.sk-input::placeholder{ color:var(--ink-3); }
textarea.sk-input{ height:auto; padding:11px 12px; line-height:1.5; resize:vertical; }

.sk-logs{ display:flex; flex-direction:column; gap:11px; }
.sk-log{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-card); overflow:hidden; }
.sk-logbtn{
  width:100%; border:0; background:none; font-family:inherit; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:10px; padding:13px 15px; transition:background .18s;
}
.sk-logbtn:active{ background:#F7FAFF; }
.sk-logmain{ flex:1; min-width:0; }
.sk-logmeta{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.sk-logtime{ font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; letter-spacing:.2px; }
.sk-tagtok{
  max-width:112px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:1px 7px; border-radius:6px; background:#E9F7F1; color:#1F7A61; font-size:10px; font-weight:700;
}
.sk-logmodel{ font-size:14px; font-weight:700; color:var(--ink-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sk-logright{ flex:none; display:flex; align-items:center; gap:8px; }
.sk-cost{
  display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:9px;
  background:var(--warn-soft); color:#A2650F; font-size:12.5px; font-weight:800;
  font-variant-numeric:tabular-nums;
}
.sk-cost svg{ width:12px; height:12px; }
.sk-logchev{ width:16px; height:16px; color:#C2CFE8; transition:transform .24s var(--ease); }
.sk-logbtn[aria-expanded="true"] .sk-logchev{ transform:rotate(180deg); }

.sk-logdetail{ display:none; padding:0 15px 14px; border-top:1px solid #F0F5FC; }
.sk-logdetail.is-open{ display:block; animation:skFade .26s var(--ease-out) both; }
.sk-dgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin:13px 0 0; padding:0; }
.sk-dgrid > div{ min-width:0; }
.sk-dwide{ grid-column:1 / -1; }
.sk-dgrid dt{ font-size:10.5px; color:var(--ink-3); margin-bottom:2px; }
.sk-dgrid dd{ margin:0; font-size:13px; font-weight:600; color:var(--ink-1); word-break:break-word; }
.sk-dtime{ margin-top:12px; padding-top:11px; border-top:1px dashed #EDF2FA; font-size:10.5px; color:var(--ink-3); }

.sk-pager-off{ padding:8px 18px; border-radius:var(--r-pill); color:#C8D3E8; font-size:13px; }
.sk-pager-num{ font-variant-numeric:tabular-nums; }

/* 二级页（无 TabBar）底部留白小一些 */
.sk-page.sk-sub{ padding-bottom:calc(40px + env(safe-area-inset-bottom)); }

/* ---- 令牌管理 ---- */
.sk-hide{ display:none !important; }

.sk-tk{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-card); padding:15px 16px 14px; margin-bottom:12px; }

.sk-tktop{ display:flex; align-items:flex-start; gap:10px; }
.sk-tkinfo{ flex:1; min-width:0; }
.sk-tkname{ margin:0; font-size:15.5px; font-weight:800; color:var(--ink-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sk-tksub{ margin:3px 0 0; font-size:11px; color:var(--ink-3); }
.sk-tkstate{
  flex:none; display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border:0; border-radius:var(--r-pill);
  font-family:inherit; font-size:11px; font-weight:700; cursor:pointer; transition:transform .16s var(--ease), background .2s;
}
.sk-tkstate i{ width:5px; height:5px; border-radius:50%; background:currentColor; }
.sk-tkstate:active{ transform:scale(.95); }
.sk-tkstate.is-on{ background:#E9F7F1; color:#1F7A61; }
.sk-tkstate.is-off{ background:#F1F4F9; color:#8E9BB5; }

.sk-tkkey{
  width:100%; display:flex; align-items:center; gap:7px; margin-top:11px; padding:9px 11px;
  border:1.5px solid #E9F0FB; border-radius:12px; background:#F7FAFF; cursor:pointer;
  font-family:inherit; transition:background .18s, border-color .18s;
}
.sk-tkkey:active{ background:#EEF4FF; border-color:#D6E4FA; }
.sk-tkkey svg{ flex:none; width:14px; height:14px; color:var(--brand-1); }
.sk-tkkey code{ flex:1; min-width:0; text-align:left; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sk-tkcopy{ flex:none; font-size:11.5px; font-weight:700; color:var(--brand-deep); }

.sk-tkinf{ display:flex; align-items:center; gap:6px; margin-top:11px; font-size:11.5px; color:#1F7A61; font-weight:600; }
.sk-tkinf svg{ width:15px; height:15px; }

.sk-tkquota{ margin-top:12px; }
.sk-tkqhead{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; color:var(--ink-3); margin-bottom:6px; font-variant-numeric:tabular-nums; }
.sk-bar{ height:7px; border-radius:var(--r-pill); background:#EFF3FA; overflow:hidden; }
.sk-bar i{ display:block; height:100%; border-radius:var(--r-pill); transition:width .6s var(--ease-out); }
.sk-bar i.is-ok{ background:linear-gradient(90deg,#5FD3B2,#3FB08E); }
.sk-bar i.is-warn{ background:linear-gradient(90deg,#FFC46B,#F0A24E); }
.sk-bar i.is-danger{ background:linear-gradient(90deg,#F5836F,#DE5A62); }

.sk-tkmeta{ display:grid; grid-template-columns:1fr 1fr; gap:12px 12px; margin:14px 0 0; padding:13px 0 0; border-top:1px solid #F1F5FC; }
.sk-tkmeta > div{ min-width:0; }
.sk-tkwide{ grid-column:1 / -1; }
.sk-tkmeta dt{ font-size:10.5px; color:var(--ink-3); margin-bottom:4px; }
.sk-tkmeta dd{ margin:0; font-size:12.5px; font-weight:600; color:var(--ink-1); word-break:break-word; line-height:1.45; }

.sk-tkacts{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:13px; }
.sk-tkact{
  height:36px; border-radius:11px; border:1.5px solid transparent; background:#F5F8FF;
  font-family:inherit; font-size:12px; font-weight:700; cursor:pointer;
  transition:transform .16s var(--ease), background .2s;
}
.sk-tkact:active{ transform:scale(.96); }
.sk-tkact.is-blue{ border-color:#D8E4FB; color:var(--brand-deep); }
.sk-tkact.is-mint{ border-color:#C9EEDF; color:#1F7A61; background:#F2FBF7; }
.sk-tkact.is-red{ border-color:#FBD8D8; color:#C0392B; background:#FFF5F5; }

.sk-addbtn{
  width:100%; height:50px; margin-top:4px; border:0; border-radius:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:7px;
  background:linear-gradient(135deg,#8FA0FF,#6C7BFF); color:#fff; font-family:inherit;
  font-size:15px; font-weight:800; letter-spacing:.5px; box-shadow:0 8px 20px rgba(108,123,255,.32);
  transition:transform .16s var(--ease);
}
.sk-addbtn svg{ width:17px; height:17px; }
.sk-addbtn:active{ transform:scale(.985); }
.sk-addbtn + .sk-note{ margin-top:14px; }

/* 表单控件 */
.sk-check{ display:flex; align-items:center; gap:8px; margin-bottom:11px; font-size:13px; color:var(--ink-2); cursor:pointer; }
/* index.php 里有 input{ -webkit-appearance:none }（旧页面遗留），会把复选框画没，这里恢复 */
.sk-check input[type="checkbox"]{
  -webkit-appearance:auto; appearance:auto; flex:none;
  width:18px; height:18px; margin:0; accent-color:var(--brand-1); cursor:pointer;
}
.sk-input.is-disabled{ background:#F1F4F9; color:var(--ink-3); }

.sk-stepper{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.sk-stepper button{
  width:40px; height:40px; border:0; border-radius:12px; background:#F1F5FF; color:var(--brand-deep);
  font-family:inherit; font-size:18px; font-weight:700; cursor:pointer; transition:background .18s, transform .16s var(--ease);
}
.sk-stepper button:active{ transform:scale(.92); background:#E4EDFF; }
.sk-stepper input{
  width:74px; height:44px; text-align:center; border:1.5px solid #E4EDFA; border-radius:13px;
  background:#F7FAFF; color:var(--ink-1); font-family:inherit; font-size:15px; font-weight:700;
}
.sk-stepper input:focus{ outline:none; border-color:var(--brand-1); background:#fff; }

/* 底部弹层 */
.sk-sheet-mask{
  position:fixed; inset:0; z-index:120; display:none; align-items:flex-end; justify-content:center;
  background:rgba(38,48,74,.42); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.sk-sheet-mask.is-open{ display:flex; animation:skFade .22s var(--ease-out) both; }
.sk-sheet{
  width:100%; max-width:520px; max-height:88vh; display:flex; flex-direction:column;
  background:#fff; border-radius:24px 24px 0 0; box-shadow:0 -10px 40px rgba(60,80,140,.22);
  animation:skSheetUp .3s var(--ease-out) both; padding-bottom:env(safe-area-inset-bottom);
}
.sk-sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px; }
.sk-sheet-head h2{ margin:0; font-size:17px; font-weight:800; color:var(--ink-1); }
.sk-sheet-x{ width:32px; height:32px; border:0; border-radius:50%; background:#F2F6FE; color:var(--ink-2); font-size:20px; line-height:1; cursor:pointer; }
.sk-sheet-body{ padding:2px 18px 20px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.sk-sheet-acts{ display:flex; gap:10px; margin-top:8px; }
.sk-sheet-acts .sk-btn-ghost{ flex:0 0 92px; }

@keyframes skSheetUp{ from{ transform:translateY(24px); opacity:.6 } to{ transform:none; opacity:1 } }

/* 全屏 loading */
.sk-loading-mask{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; background:rgba(38,48,74,.28); }
.sk-loading-ring{
  width:38px; height:38px; border-radius:50%;
  border:3px solid rgba(255,255,255,.55); border-top-color:#fff;
  animation:skSpin .8s linear infinite;
}

/* 大屏时给手机感 */
@media (min-width:520px){
  .sk-page{ max-width:520px; margin:0 auto; box-shadow:0 20px 60px rgba(80,110,170,.22); }
}

/* ==========================================================================
   兑换码（充值用）  pages/redeem.php
   —— 输入即加金币，与「商品抵扣券」是两套东西，样式独立不互相影响
   ========================================================================== */
.sk-rdpage{ padding-bottom:calc(56px + env(safe-area-inset-bottom)); }

/* 余额条：深一档的品牌渐变，保证白字对比度 ≥ 4.5:1 */
.sk-rd-hero{
  position:relative; overflow:hidden; display:flex; align-items:center; gap:14px;
  padding:18px 18px; margin-bottom:16px; border-radius:var(--r-lg);
  background:linear-gradient(135deg,#6C7BFF 0%,#4A5AD6 100%);
  box-shadow:0 10px 26px rgba(74,90,214,.28);
}
.sk-rd-hero::after{
  content:''; position:absolute; right:-34px; top:-46px; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.30),rgba(255,255,255,0));
  pointer-events:none;
}
.sk-rd-mascot{
  position:relative; z-index:1; flex:none; width:72px; height:72px; object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(24,36,104,.28)); animation:skBob 5s ease-in-out infinite;
}
.sk-rd-herobody{ position:relative; z-index:1; flex:1 1 auto; min-width:0; }
.sk-rd-cap{ margin:0; font-size:12px; color:rgba(255,255,255,.88); letter-spacing:.4px; }
.sk-rd-bal{
  margin:3px 0 0; font-family:var(--font-num); font-size:32px; line-height:1.12;
  font-weight:800; color:#fff; letter-spacing:.5px; word-break:break-all;
}
.sk-rd-bal span{ margin-left:5px; font-size:12px; font-weight:600; color:rgba(255,255,255,.9); letter-spacing:0; }
.sk-rd-herosub{ margin:6px 0 0; font-size:11.5px; color:rgba(255,255,255,.86); }

/* 输入 */
.sk-rd-inputcard{ margin-bottom:2px; }
.sk-rd-field{ position:relative; }
.sk-rd-input{
  display:block; width:100%; box-sizing:border-box; height:58px; padding:0 42px;
  border:1.5px solid #DFE9FB; border-radius:15px; background:#F7FAFF;
  color:var(--ink-1); font-family:var(--font-num); font-size:19px; font-weight:700;
  letter-spacing:1.6px; text-align:center;
  transition:border-color .18s, background .18s, box-shadow .18s;
}
.sk-rd-input::placeholder{ color:#B7C3DC; font-weight:600; letter-spacing:1.6px; }
.sk-rd-input:focus{ outline:none; border-color:var(--brand-1); background:#fff; box-shadow:0 0 0 4px rgba(108,123,255,.12); }
.sk-rd-clear{
  position:absolute; right:7px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border:0; border-radius:50%; background:#E8EFFC; color:#6B7A9E;
  display:grid; place-items:center; cursor:pointer;
}
.sk-rd-clear[hidden]{ display:none; }
.sk-rd-clear svg{ width:13px; height:13px; }
.sk-rd-clear:active{ background:#DCE6F8; }

.sk-rd-hint{ margin:9px 0 0; min-height:16px; font-size:12px; line-height:1.4; color:var(--ink-2); text-align:center; }
.sk-rd-hint.is-ok{ color:var(--brand-deep); }
.sk-rd-hint.is-warn{ color:var(--warn-deep); }

.sk-rd-submit{ width:100%; box-sizing:border-box; height:50px; margin-top:8px; border-radius:15px; font-size:15.5px; }
.sk-rd-submit[disabled]{ opacity:.62; box-shadow:none; }

.sk-rd-result{ margin-top:14px; padding:12px 14px; border-radius:14px; animation:skPop .3s var(--ease) both; }
.sk-rd-result.is-ok{ background:#EAF7F2; border:1px solid #C8E9DD; }
.sk-rd-result.is-err{ background:var(--pink-soft); border:1px solid #F8D2D2; }
.sk-rd-rtitle{ margin:0; font-size:14px; font-weight:800; }
.sk-rd-result.is-ok .sk-rd-rtitle{ color:#0F6B57; }
.sk-rd-result.is-err .sk-rd-rtitle{ color:var(--pink-deep); }
.sk-rd-rdetail{ margin:5px 0 0; font-size:12px; line-height:1.45; color:var(--ink-2); }

/* 记录列表 */
.sk-rd-list{ display:flex; flex-direction:column; gap:10px; }
.sk-rd-item{
  display:flex; align-items:center; gap:12px; padding:13px 14px;
  background:#fff; border-radius:var(--r-md); box-shadow:var(--sh-card);
}
.sk-rd-ic{
  flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:#FFF3E2; color:#B4741C;
}
.sk-rd-ic svg{ width:20px; height:20px; }
.sk-rd-main{ flex:1; min-width:0; }
.sk-rd-title{ margin:0; font-size:13.5px; font-weight:700; color:var(--ink-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sk-rd-meta{ display:flex; align-items:center; gap:5px; margin:4px 0 0; font-size:11.5px; color:var(--ink-3); }
.sk-rd-meta code{ font-family:var(--font-num); font-size:11.5px; letter-spacing:.6px; color:var(--ink-2); }
.sk-rd-dot{ opacity:.7; }
.sk-rd-amt{ flex:none; font-family:var(--font-num); font-size:16px; font-weight:800; color:#0F6B57; }

.sk-rd-empty{ text-align:center; padding:14px 0 12px; }
.sk-rd-empty p{ margin:0; font-size:13.5px; color:var(--ink-2); }
.sk-rd-emptysub{ margin-top:6px !important; font-size:12px; color:var(--ink-3); }

.sk-rd-legacy{ margin:22px 0 0; text-align:center; font-size:12px; color:var(--ink-3); }
.sk-rd-legacy a{ color:var(--brand-deep); font-weight:600; text-decoration:none; border-bottom:1px dashed rgba(74,90,214,.42); }

/* 钱包里的「兑换码」现在是链接（跳转独立页面），去掉下划线 */
a.sk-recv{ text-decoration:none; }