/* ========== 交易流水台账 · 全站基础样式 ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}

:root{
  --bg:#eef1f6;--card:#fff;--line:#e3e8ef;--line2:#eef1f6;
  --txt:#101828;--txt2:#667085;--txt3:#98a2b3;
  --blue:#2563eb;--blue-d:#1d4ed8;--blue-l:#eff6ff;
  --green:#059669;--green-l:#ecfdf5;
  --red:#dc2626;--red-l:#fef2f2;
  --amber:#d97706;--amber-l:#fffbeb;
  --purple:#7c3aed;--purple-l:#f5f3ff;
  --radius:12px;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 4px 16px rgba(16,24,40,.05);
  --shadow-lg:0 20px 60px rgba(16,24,40,.14);
}

html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
    "Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--txt);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none;color:inherit}
img,svg{display:block;max-width:100%}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-d)}
ul,ol{list-style:none}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c9d2df;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#a8b3c4}

/* ========== 按钮 ========== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 14px;border-radius:9px;border:1px solid var(--line);
  background:#fff;color:#344054;font-size:13px;font-weight:500;
  height:34px;white-space:nowrap;transition:.15s;
}
.btn:hover{background:#f9fafb;border-color:#cfd6e0}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-d);border-color:var(--blue-d)}
.btn.danger{color:#b91c1c;border-color:#fecaca}
.btn.danger:hover{background:var(--red-l)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn.block{width:100%;padding:11px;height:auto;font-size:14px}

/* ========== 输入 ========== */
input,select,textarea{
  border:1px solid var(--line);border-radius:9px;padding:8px 11px;
  background:#fff;outline:none;transition:.15s;
}
input:hover,select:hover,textarea:hover{border-color:#cfd6e0}
input:focus,select:focus,textarea:focus{
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
input::placeholder,textarea::placeholder{color:#b6bdc9}

/* ========== 弹窗 ========== */
.modal-mask{
  position:fixed;inset:0;background:rgba(16,24,40,.5);z-index:400;
  display:flex;align-items:center;justify-content:center;padding:20px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:maskIn .18s ease-out;
}
@keyframes maskIn{from{opacity:0}to{opacity:1}}
.modal{
  background:#fff;border-radius:16px;width:100%;max-width:520px;
  box-shadow:var(--shadow-lg);overflow:hidden;max-height:92vh;
  display:flex;flex-direction:column;
  animation:mIn .22s cubic-bezier(.4,0,.2,1);
}
.modal.wide{max-width:760px}
.modal.xwide{max-width:1000px}
@keyframes mIn{from{transform:translateY(12px) scale(.97);opacity:0}}
.modal-head{
  padding:18px 22px;font-size:16px;font-weight:700;
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--line2);flex-shrink:0;
}
.modal-head .x{
  margin-left:auto;color:var(--txt3);font-size:22px;line-height:1;
  padding:2px 8px;border-radius:6px;transition:.15s;
}
.modal-head .x:hover{background:#f2f4f7;color:var(--txt)}
.modal-body{padding:20px 22px;overflow-y:auto;flex:1}
.modal-foot{
  padding:14px 22px;background:#fafbfd;border-top:1px solid var(--line);
  display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;flex-shrink:0;
}

/* ========== Toast ========== */
#toast{
  position:fixed;left:50%;bottom:34px;
  transform:translateX(-50%) translateY(14px);
  background:#101828;color:#fff;padding:11px 22px;border-radius:11px;
  font-size:13px;opacity:0;pointer-events:none;transition:.24s;z-index:999;
  max-width:82vw;text-align:center;box-shadow:0 8px 30px rgba(16,24,40,.3);
  word-break:break-all;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ========== 骨架 ========== */
.skeleton{
  position:relative;overflow:hidden;background:#f2f4f7;border-radius:10px;
}
.skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  transform:translateX(-100%);animation:shimmer 1.4s infinite;
}
@keyframes shimmer{to{transform:translateX(100%)}}

/* ========== 数字色 ========== */
.neg{color:var(--red)!important}
.pos{color:var(--green)!important}
.num{text-align:right;font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:#475467}
.gray{color:var(--txt3)}

/* ========== 标签 ========== */
.tag{
  display:inline-block;font-size:11px;padding:2px 8px;border-radius:5px;
  line-height:1.6;margin-left:4px;font-weight:500;vertical-align:middle;white-space:nowrap;
}
.tag.ok{background:var(--green-l);color:var(--green)}
.tag.warn{background:var(--amber-l);color:#b45309}
.tag.refund{background:var(--red-l);color:var(--red)}
.tag.plain{background:#f2f4f7;color:var(--txt2)}
.tag.info{background:var(--blue-l);color:#1d4ed8}
.tag.merged{background:linear-gradient(135deg,#ddd6fe,#c4b5fd);color:#5b21b6}

/* 响应式 */
@media (max-width:760px){
  body{font-size:13.5px}
  .modal-mask{padding:10px}
  .modal{max-width:none}
}