/* ===========================================================
   Z软件 - 全站样式
   白蓝简约 · 无 Emoji · 响应式
   =========================================================== */
:root{
  --blue:#2563eb;
  --blue-dark:#1d4ed8;
  --blue-light:#eff6ff;
  --blue-line:#bfdbfe;
  --ink:#0f172a;
  --ink-2:#334155;
  --ink-3:#64748b;
  --ink-4:#94a3b8;
  --line:#e2e8f0;
  --line-2:#eef2f7;
  --bg:#f1f5f9;
  --white:#fff;
  --ok:#16a34a;
  --warn:#d97706;
  --danger:#dc2626;
  --gold:#f59e0b;
  --gold-bg:#fef3c7;
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:8px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 4px 16px rgba(15,23,42,.07);
  --shadow-lg:0 12px 40px rgba(15,23,42,.13);
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--ink-2);font-size:15px;line-height:1.65;
  min-height:100vh;overflow-x:hidden;
}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-dark)}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
input,textarea,select{-webkit-appearance:none;appearance:none;border-radius:0}
::placeholder{color:var(--ink-4)}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:10px;
  padding:14px 18px;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-2);
}
.topbar .brand{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:.3px}
.spacer{flex:1}
.icon-btn{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--white);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease);
}
.icon-btn:active{transform:scale(.93);background:var(--blue-light)}

/* ---------- 容器 ---------- */
.page{padding:16px 14px calc(84px + var(--safe-b));max-width:760px;margin:0 auto}
.wrap{max-width:760px;margin:0 auto}

/* ---------- 卡片 ---------- */
.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--line-2);overflow:hidden;margin-bottom:14px}
.card-hd{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--line-2)}
.card-hd h2{font-size:15px;font-weight:600;color:var(--ink)}
.card-bd{padding:16px}
.card-bd.tight{padding:8px 10px}
.card-bd.form{padding:18px 16px}

/* ---------- 表单 ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:500;color:var(--ink-3);margin-bottom:7px}
.field label .req{color:var(--danger);margin-left:2px}
.field .hint{font-size:12px;color:var(--ink-4);margin-top:6px}
.input{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--white);font-size:15px;color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.input.err{border-color:var(--danger);box-shadow:0 0 0 3px rgba(220,38,38,.1)}
.input:disabled{background:#f8fafc;color:var(--ink-4)}
.err-msg{display:block;font-size:12px;color:var(--danger);margin-top:6px;min-height:0}
.err-msg:empty{display:none}
.input-row{display:flex;gap:8px}
.input-row .input{flex:1}

/* ---------- 按钮 ---------- */
.btn{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 20px;border-radius:var(--radius-sm);border:1px solid transparent;
  font-size:14px;font-weight:500;cursor:pointer;user-select:none;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease),opacity .16s;
  -webkit-user-select:none;
}
.btn:active{transform:translateY(2px) scale(.985);box-shadow:0 2px 6px rgba(15,23,42,.12)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 3px 10px rgba(37,99,235,.24)}
.btn-primary:hover{background:var(--blue-dark)}
.btn-ghost{background:var(--white);color:var(--ink-2);border-color:var(--line)}
.btn-ghost:hover{background:var(--blue-light);border-color:var(--blue-line);color:var(--blue)}
.btn-soft{background:var(--blue-light);color:var(--blue);border-color:var(--blue-line)}
.btn-danger{background:var(--danger);color:#fff}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn-block{width:100%}
.btn-sm{padding:7px 14px;font-size:13px}
.btn.loading{color:transparent!important;pointer-events:none}
.btn.loading::after{
  content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite;
}
.btn-ghost.loading::after{border-color:rgba(37,99,235,.25);border-top-color:var(--blue)}
@keyframes spin{to{transform:rotate(360deg)}}

/* 水波纹 */
.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .55s var(--ease);background:rgba(255,255,255,.45);pointer-events:none}
.btn-ghost .ripple,.btn-soft .ripple{background:rgba(37,99,235,.22)}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}

/* ---------- 头像 ---------- */
.avatar{width:52px;height:52px;border-radius:14px;object-fit:cover;background:var(--blue-light);border:1px solid var(--line-2);flex-shrink:0}
.avatar-lg{width:66px;height:66px;border-radius:18px}
.avatar-sm{width:36px;height:36px;border-radius:10px}

/* ---------- 徽章 ---------- */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:500;line-height:1.6}
.badge-blue{background:var(--blue-light);color:var(--blue)}
.badge-gray{background:#f1f5f9;color:var(--ink-3)}
.badge-green{background:#dcfce7;color:#15803d}
.badge-gold{background:var(--gold-bg);color:#b45309;border:1px solid #fcd34d}

/* ---------- 底部导航 ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;
  background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line-2);padding-bottom:var(--safe-b);
}
.tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:8px 2px 9px;font-size:11px;color:var(--ink-4);
  transition:color .18s var(--ease),transform .18s var(--ease);position:relative;
}
.tabbar a.on{color:var(--blue);font-weight:600}
.tabbar a:active{transform:scale(.94)}
.tabbar .ic{width:22px;height:22px;display:block}
.tabbar .dot{
  position:absolute;top:6px;left:calc(50% + 7px);min-width:15px;height:15px;padding:0 4px;
  border-radius:8px;background:var(--danger);color:#fff;font-size:10px;line-height:15px;text-align:center;font-weight:600;
}

/* ---------- Toast ---------- */
.z-toast-wrap{position:fixed;top:14px;left:0;right:0;z-index:99999;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
.z-toast{
  max-width:420px;width:100%;display:flex;align-items:flex-start;gap:9px;
  padding:12px 14px;border-radius:var(--radius-sm);background:rgba(15,23,42,.94);color:#fff;
  font-size:13.5px;line-height:1.5;box-shadow:var(--shadow-lg);
  animation:toastIn .28s var(--ease-spring);
}
.z-toast.out{animation:toastOut .22s var(--ease) forwards}
.z-toast .ic{width:16px;height:16px;flex-shrink:0;margin-top:2px}
.z-toast.ok .ic{color:#4ade80}
.z-toast.err .ic{color:#f87171}
.z-toast.warn .ic{color:#fbbf24}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px) scale(.97)}}

/* ---------- Modal ---------- */
.z-mask{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:9000;
  background:rgba(15,23,42,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center;padding:0;
  animation:maskIn .2s var(--ease);
}
.z-mask.center{align-items:center;padding:20px}
.z-mask.closing{animation:maskOut .18s var(--ease) forwards}
@keyframes maskIn{from{opacity:0}to{opacity:1}}
@keyframes maskOut{to{opacity:0}}
.z-modal{
  width:100%;max-width:440px;background:var(--white);border-radius:20px 20px 0 0;
  padding:22px 20px calc(20px + var(--safe-b));box-shadow:var(--shadow-lg);
  animation:sheetUp .32s var(--ease-spring);max-height:88vh;overflow-y:auto;
}
.z-mask.center .z-modal{border-radius:18px;padding-bottom:20px;animation:modalIn .26s var(--ease-spring)}
.z-mask.closing .z-modal{animation:sheetDown .2s var(--ease) forwards}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetDown{to{transform:translateY(100%)}}
@keyframes modalIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.z-modal h3{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:6px}
.z-modal .m-body{font-size:14px;color:var(--ink-3);margin:10px 0 20px;line-height:1.7}
.z-modal .m-actions{display:flex;gap:10px}
.z-modal .m-actions .btn{flex:1}

/* Drawer 抽屉 */
.z-drawer{
  position:fixed;top:0;bottom:0;right:0;width:min(86vw,360px);z-index:9100;background:var(--white);
  box-shadow:-8px 0 32px rgba(15,23,42,.12);padding:20px;overflow-y:auto;
  animation:drawerIn .3s var(--ease-spring);
}
.z-drawer.closing{animation:drawerOut .22s var(--ease) forwards}
@keyframes drawerIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes drawerOut{to{transform:translateX(100%)}}

/* ---------- 骨架屏 ---------- */
.skel{background:linear-gradient(90deg,#eef2f7 25%,#f6f9fc 37%,#eef2f7 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:var(--radius-xs)}
.skel-line{height:14px;margin-bottom:8px}
.skel-line.w80{width:80%}
.skel-line.w60{width:60%}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------- 弹性开关 ---------- */
.switch{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.switch .track{
  position:absolute;top:0;left:0;right:0;bottom:0;background:#cbd5e1;border-radius:13px;
  transition:background .28s var(--ease);
}
.switch .knob{
  position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(15,23,42,.2);
  transition:transform .34s var(--ease-spring),width .18s var(--ease);
}
.switch input:checked ~ .track{background:var(--blue)}
.switch input:checked ~ .knob{transform:translateX(20px)}
.switch input:active ~ .knob{width:26px}
.switch input:checked:active ~ .knob{transform:translateX(14px)}

/* ---------- 通用列表 ---------- */
.list-row{
  display:flex;align-items:center;gap:12px;padding:13px 6px;border-bottom:1px solid var(--line-2);
  transition:background .16s var(--ease);
}
.list-row:last-child{border-bottom:0}
.list-row:active{background:var(--blue-light)}
.list-row .grow{flex:1;min-width:0}
.list-row .t1{font-size:14px;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-row .t2{font-size:12px;color:var(--ink-4);margin-top:2px}
.arrow{width:16px;height:16px;color:var(--ink-4);flex-shrink:0}

/* ---------- 空状态 ---------- */
.empty{text-align:center;padding:48px 20px;color:var(--ink-4);font-size:13.5px}
.empty .ic{width:52px;height:52px;margin:0 auto 12px;color:#cbd5e1}

/* ---------- 余额方框 ---------- */
.balance-box{
  border-radius:var(--radius);padding:18px;
  background:linear-gradient(135deg,#2563eb,#1e40af);color:#fff;
  box-shadow:0 6px 20px rgba(37,99,235,.28);margin-bottom:14px;
}
.balance-box .label{font-size:12.5px;opacity:.82;margin-bottom:4px}
.balance-box .num{font-size:30px;font-weight:700;letter-spacing:-.5px;line-height:1.2}
.balance-box .num small{font-size:15px;font-weight:500;opacity:.85;margin-left:3px}
.balance-box .sub{font-size:12.5px;opacity:.82;margin-top:6px}

/* ---------- 页面淡入 ---------- */
.fade-in{opacity:1}

/* ---------- 错误页 ---------- */
.err-page{text-align:center;padding:70px 20px}
.err-page h1{font-size:52px;color:var(--blue);font-weight:700;letter-spacing:-2px}
.err-page p{color:var(--ink-4);margin:8px 0 24px;font-size:14px}

/* ---------- 桌面端 ---------- */
@media (min-width:768px){
  .page{padding:24px 20px 60px}
  .tabbar{position:sticky;top:0;bottom:auto;left:auto;right:auto;max-width:760px;margin:0 auto;
    border-radius:0 0 var(--radius) var(--radius);border-top:0;border-bottom:1px solid var(--line-2);}
  .tabbar a{flex-direction:row;gap:7px;padding:12px 4px;font-size:13px}
  .z-mask.center .z-modal{max-width:480px}
  .z-mask:not(.center){align-items:center;padding:20px}
  .z-modal{border-radius:18px;max-width:480px;animation:modalIn .26s var(--ease-spring)}
}


/* ===========================================================
   第五阶段：增强动效
   =========================================================== */

/* 页面切换：从下往上滑入 */
@media (prefers-reduced-motion: no-preference) {
  .page.slide-in { animation: pageSlide .26s cubic-bezier(.32,.72,0,1); }
  @keyframes pageSlide {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* 列表依次淡入 */
.stagger > * { animation: fadeUp .3s var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: .01s }
.stagger > *:nth-child(2) { animation-delay: .03s }
.stagger > *:nth-child(3) { animation-delay: .05s }
.stagger > *:nth-child(4) { animation-delay: .07s }
.stagger > *:nth-child(5) { animation-delay: .09s }
.stagger > *:nth-child(6) { animation-delay: .11s }
.stagger > *:nth-child(7) { animation-delay: .13s }
.stagger > *:nth-child(8) { animation-delay: .15s }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 数字滚动 */
.count-up { font-variant-numeric: tabular-nums; }

/* 卡片按压 */
.card { transition: box-shadow .2s var(--ease); }
.card:active { box-shadow: var(--shadow); }

/* 输入框聚焦上浮 */
.field { transition: transform .2s var(--ease); }
.field:focus-within label { color: var(--blue); }

/* 徽章脉动（未读） */
@keyframes badgePulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.12) } }
.tabbar .dot { animation: badgePulse 2s ease-in-out infinite; }

/* 抽屉/弹窗点击外部阴影 */
.z-mask { will-change: opacity; }

/* 骨架屏呼吸 */
@keyframes skelBreath { 0%,100% { opacity: .75 } 50% { opacity: 1 } }
.skel { animation: shimmer 1.4s ease infinite, skelBreath 2.4s ease-in-out infinite; }

/* 加载中覆盖 */
.loading-overlay {
  position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center;
  background: rgba(241,245,249,.72); backdrop-filter: blur(2px); animation: maskIn .2s var(--ease);
}
.loading-overlay .sp {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid #dbe3ee; border-top-color: var(--blue); animation: spin .7s linear infinite;
}

/* 主题色预览块 */
.theme-swatch { width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(0,0,0,.06); cursor: pointer; transition: transform .18s var(--ease) }
.theme-swatch:active { transform: scale(.9) }
.theme-swatch.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor }

/* 顶部滚动进度条 */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; background: var(--blue);
  z-index: 9999; transition: width .1s linear; width: 0;
}

/* ===========================================================
   顶栏：站点名 + 副标题（小屏隐藏副标题）
   =========================================================== */
.topbar .brand { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.topbar .brand .bname { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: .3px; flex-shrink: 0; }
.topbar .brand .bslogan {
  font-size: 11.5px; color: var(--ink-4); font-weight: 400; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 170px; transition: opacity .2s var(--ease);
}
@media (max-width: 380px) { .topbar .brand .bslogan { display: none; } }

/* ===========================================================
   侧边导航抽屉
   =========================================================== */
.side-drawer {
  position: fixed; top: 0; bottom: 0; right: 0; width: min(82vw, 320px); z-index: 9100;
  background: var(--white); box-shadow: -8px 0 34px rgba(15,23,42,.16);
  display: none; flex-direction: column;
}
.side-drawer.open { display: flex; }
.drawer-mask {
  align-items: stretch; justify-content: flex-end;
  background: rgba(15,23,42,.42) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  animation: none !important;
}
.drawer-mask.closing { animation: none !important; }

.sd-head {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 16px 15px; border-bottom: 1px solid var(--line-2);
  background: linear-gradient(140deg, var(--blue-light), transparent);
}
.sd-name { font-size: 14.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-sub { font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }

.sd-nav { flex: 1; overflow-y: auto; padding: 8px 10px; -webkit-overflow-scrolling: touch; }
.sd-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 12px; border-radius: 10px; border: 0; background: transparent;
  font-size: 13.5px; color: var(--ink-2); text-decoration: none; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease), transform .14s var(--ease);
  text-align: left; font-family: inherit;
}
.sd-item svg { flex-shrink: 0; color: var(--ink-4); transition: color .16s var(--ease); }
.sd-item:active { transform: scale(.98); }
.sd-item:hover { background: var(--blue-light); color: var(--blue); }
.sd-item:hover svg { color: var(--blue); }
.sd-item .sd-label { flex: 1; }
.sd-item .sd-val {
  font-size: 11.5px; padding: 2px 8px; border-radius: 6px;
  background: var(--line-2); color: var(--ink-4); min-width: 30px; text-align: center;
}
.sd-div { height: 1px; background: var(--line-2); margin: 7px 4px; }
.sd-foot { padding: 12px 14px calc(14px + var(--safe-b)); border-top: 1px solid var(--line-2); }

/* 逐个入场 */
.side-drawer.open .sd-nav > *:nth-child(1)  { animation-delay: .04s }
.side-drawer.open .sd-nav > *:nth-child(2)  { animation-delay: .06s }
.side-drawer.open .sd-nav > *:nth-child(3)  { animation-delay: .08s }
.side-drawer.open .sd-nav > *:nth-child(4)  { animation-delay: .10s }
.side-drawer.open .sd-nav > *:nth-child(5)  { animation-delay: .12s }
.side-drawer.open .sd-nav > *:nth-child(6)  { animation-delay: .14s }
.side-drawer.open .sd-nav > *:nth-child(7)  { animation-delay: .16s }
.side-drawer.open .sd-nav > *:nth-child(8)  { animation-delay: .18s }
.side-drawer.open .sd-nav > *:nth-child(9)  { animation-delay: .20s }
.side-drawer.open .sd-nav > *:nth-child(10) { animation-delay: .22s }
.side-drawer.open .sd-nav > *:nth-child(11) { animation-delay: .24s }
.side-drawer.open .sd-nav > *:nth-child(12) { animation-delay: .26s }
.side-drawer.open .sd-nav > *:nth-child(13) { animation-delay: .28s }
.side-drawer.open .sd-nav > *:nth-child(14) { animation-delay: .30s }

/* 主题图标 */
.ic-moon { display: none; }
[data-theme="dark"] .ic-sun { display: none; }
[data-theme="dark"] .ic-moon { display: block; }

/* ===========================================================
   深色模式（带过渡）
   =========================================================== */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

html.theme-anim,
html.theme-anim * ,
html.theme-anim *::before,
html.theme-anim *::after {
  transition:
    background-color .42s cubic-bezier(.4,0,.2,1),
    border-color .42s cubic-bezier(.4,0,.2,1),
    color .32s cubic-bezier(.4,0,.2,1),
    box-shadow .42s cubic-bezier(.4,0,.2,1),
    fill .32s cubic-bezier(.4,0,.2,1),
    stroke .32s cubic-bezier(.4,0,.2,1) !important;
}

/* 主题切换时的圆形扩散遮罩 */
.theme-ripple {
  position: fixed; z-index: 99998; border-radius: 50%; pointer-events: none;
  background: var(--white);
  transform: scale(0);
  animation: themeSpread .58s cubic-bezier(.32,.72,0,1) forwards;
}
html[data-theme="dark"] .theme-ripple { background: #0b1220; }
@keyframes themeSpread { to { transform: scale(1); opacity: 0; } }

[data-theme="dark"] {
  --blue: #3b82f6;
  --blue-dark: #60a5fa;
  --blue-light: #13233d;
  --blue-line: #1e3a5f;
  --ink: #e8eef7;
  --ink-2: #b6c2d1;
  --ink-3: #8b9bb0;
  --ink-4: #6b7c93;
  --line: #1f2a3a;
  --line-2: #1a2433;
  --bg: #0b1220;
  --white: #111a29;
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;
  --gold: #fbbf24;
  --gold-bg: #2a2110;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 4px 18px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 44px rgba(0,0,0,.6);
}
[data-theme="dark"] body { background: #0b1220; background-image: radial-gradient(circle at 50% 0, rgba(59,130,246,.07), transparent 62%); }
[data-theme="dark"] .topbar { background: rgba(17,26,41,.86); border-bottom-color: var(--line-2); }
[data-theme="dark"] .topbar .brand .bname { color: var(--ink); }
[data-theme="dark"] .icon-btn { background: var(--white); border-color: var(--line); }
[data-theme="dark"] .icon-btn:active { background: var(--blue-light); }
[data-theme="dark"] .tabbar { background: rgba(17,26,41,.93); border-top-color: var(--line-2); }
[data-theme="dark"] .card { background: var(--white); border-color: var(--line-2); }
[data-theme="dark"] .input { background: #0e1725; border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .input:disabled { background: #0a111c; }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #5b6b80; }
[data-theme="dark"] .skel { background: linear-gradient(90deg, #16202f 25%, #1c2839 37%, #16202f 63%); background-size: 400% 100%; }
[data-theme="dark"] .sw-grid .sw-card,
[data-theme="dark"] .sw-card { background: var(--white); border-color: var(--line-2); }
[data-theme="dark"] .balance-box { box-shadow: 0 6px 24px rgba(37,99,235,.3); }
[data-theme="dark"] .z-modal { background: var(--white); }
[data-theme="dark"] .z-toast { background: rgba(30,41,59,.97); }
[data-theme="dark"] .badge-gray { background: #1a2433; color: #8b9bb0; }
[data-theme="dark"] .badge-blue { background: #13233d; color: #60a5fa; }
[data-theme="dark"] .badge-green { background: #052e21; color: #34d399; }
[data-theme="dark"] .badge-gold { background: #2a2110; color: #fbbf24; border-color: #4a3a12; }
[data-theme="dark"] .auth-card { background: var(--white); border-color: var(--line-2); }
[data-theme="dark"] .auth-wrap, [data-theme="dark"] body.auth-body { background: #0b1220; }
[data-theme="dark"] .empty { color: var(--ink-4); }
[data-theme="dark"] .z-mask { background: rgba(0,0,0,.62); }
[data-theme="dark"] .side-drawer { background: #0f1826; }
[data-theme="dark"] .sd-head { background: linear-gradient(140deg, #13233d, transparent); }
[data-theme="dark"] .ease, [data-theme="dark"] .err-msg { color: #f87171; }

/* 抽屉右上关闭按钮留白（从右侧滑出，贴右边缘） */
.sd-head { padding-right: 14px; }
.sd-head .icon-btn { flex-shrink: 0; }

/* 抽屉内底部按钮间距 */
.sd-foot .btn { height: 40px; }

/* ===========================================================
   弹性开关（模式切换）
   =========================================================== */
.z-switch {
  position: relative; width: 58px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center;
}
.z-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 3; }
.z-switch .trk {
  position: absolute; inset: 0; border-radius: 16px;
  background: #cbd5e1; transition: background .3s cubic-bezier(.4,0,.2,1);
}
.z-switch .knb {
  position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(15,23,42,.24);
  transition: transform .42s cubic-bezier(.34,1.56,.64,1), width .2s cubic-bezier(.4,0,.2,1);
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.z-switch .knb svg { width: 13px; height: 13px; color: #94a3b8; transition: color .3s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.z-switch .knb .k-sun { display: block; }
.z-switch .knb .k-moon { display: none; }
.z-switch input:checked ~ .trk { background: #1e293b; }
.z-switch input:checked ~ .knb { transform: translateX(26px); }
.z-switch input:checked ~ .knb .k-sun { display: none; }
.z-switch input:checked ~ .knb .k-moon { display: block; color: #fbbf24; }
/* 按下时拉长（弹性感） */
.z-switch input:active ~ .knb { width: 30px; }
.z-switch input:checked:active ~ .knb { transform: translateX(20px); }
/* 深色模式配色 */
[data-theme="dark"] .z-switch .trk { background: #1f2a3a; }
[data-theme="dark"] .z-switch input:checked ~ .trk { background: #3b82f6; }
[data-theme="dark"] .z-switch input:checked ~ .knb .k-moon { color: #fde68a; }

/* ===========================================================
   顶栏汉堡提示 + 返回上级面包屑
   =========================================================== */
.topbar .menu-hint {
  font-size: 11.5px;
  color: var(--ink-4);
  margin-right: 7px;
  letter-spacing: .2px;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
@media (max-width: 420px) {
  .topbar .menu-hint { display: none; }
}
@media (min-width: 421px) and (max-width: 520px) {
  .topbar .brand .bslogan { display: none; }
}

.crumb-bar {
  margin: -4px 0 12px;
}
.crumb-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 13px 7px 9px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 13px;
  text-decoration: none;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .14s var(--ease);
}
.crumb-back:hover {
  background: var(--blue-light);
  border-color: var(--blue-line);
  color: var(--blue);
}
.crumb-back:active { transform: scale(.96); }
.crumb-back svg { flex-shrink: 0; }
[data-theme="dark"] .crumb-back { background: var(--white); border-color: var(--line); }

/* ===========================================================
   首页云朵提示
   =========================================================== */
.cloud-tip {
  position: fixed;
  top: 64px;
  right: 14px;
  z-index: 9200;
  pointer-events: auto;
  display: none;
  transform-origin: top right;
}
.cloud-tip[hidden] { display: none; }
.cloud-tip.show {
  display: block;
  animation: cloudIn .42s cubic-bezier(.34,1.56,.64,1) both;
}
.cloud-tip.closing {
  display: block;
  animation: cloudOut .26s cubic-bezier(.4,0,.2,1) both;
}
@keyframes cloudIn {
  from { opacity: 0; transform: translateY(-10px) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cloudOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(.94); }
}

.cloud-bubble {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 268px;
  padding: 13px 15px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, #f2f7ff);
  border: 1px solid #dbeafe;
  box-shadow: 0 10px 34px rgba(37,99,235,.16), 0 2px 8px rgba(15,23,42,.06);
  position: relative;
}
.cloud-bubble::after {
  content: "";
  position: absolute;
  top: -7px;
  right: 16px;
  width: 13px;
  height: 13px;
  background: linear-gradient(135deg, #ffffff, #ffffff);
  border-left: 1px solid #dbeafe;
  border-top: 1px solid #dbeafe;
  transform: rotate(45deg);
  border-radius: 3px 0 0 0;
}
.cloud-ic {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--blue);
  margin-top: 1px;
}
.cloud-text { flex: 1; min-width: 0; }
.cloud-main {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.6;
}
.cloud-sub {
  font-size: 11px;
  color: var(--ink-4);
  margin-top: 7px;
  letter-spacing: .1px;
}
.cloud-arrow {
  position: absolute;
  right: -14px;
  top: -26px;
  width: 40px;
  height: 26px;
  color: #93c5fd;
  opacity: .9;
}

[data-theme="dark"] .cloud-bubble {
  background: linear-gradient(135deg, #16233a, #111c2e);
  border-color: #1e3a5f;
  box-shadow: 0 10px 34px rgba(0,0,0,.5);
}
[data-theme="dark"] .cloud-bubble::after {
  background: #16233a;
  border-color: #1e3a5f;
}
[data-theme="dark"] .cloud-arrow { color: #3b5a85; }

@media (max-width: 380px) {
  .cloud-bubble { max-width: 232px; padding: 11px 13px 10px; }
  .cloud-main { font-size: 12.5px; }
}

/* ===========================================================
   自定义勾选框（全局）
   =========================================================== */
.chk-line {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.chk-line input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.chk-line .chk-box {
  width: 19px;
  height: 19px;
  border-radius: 6px;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.chk-line .chk-box::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
  margin-top: -2px;
}
.chk-line input:checked + .chk-box {
  background: var(--blue);
  border-color: var(--blue);
}
.chk-line input:checked + .chk-box::after {
  transform: rotate(-45deg) scale(1);
}
[data-theme="dark"] .chk-line .chk-box {
  background: #0e1725;
  border-color: #33475f;
}