/* ============================================================
   KPOP.WANG 会员钱包 + 积分 前端组件样式  kpw20260922a
   命名空间：.kpw-（与 .kpcc- / .kpo- / .kdec- 完全隔离）
   配色沿用客户中心：品牌蓝 #1677FF / 炭黑 #1D2129 / 边框 #E5E6EB
   ============================================================ */
.kpw-root { --kpw-blue:#1677FF; --kpw-blue-d:#0958D9; --kpw-ink:#1D2129; --kpw-gray:#4E5969;
  --kpw-muted:#86909C; --kpw-line:#E5E6EB; --kpw-bg:#FFFFFF; --kpw-soft:#F7F8FA; }

/* ---- 概览卡 ---- */
.kpw-cards { display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:26px; }
@media(min-width:700px){ .kpw-cards{ grid-template-columns:repeat(3,1fr); } }
.kpw-card { background:var(--kpw-bg); border:1px solid var(--kpw-line); border-radius:20px; padding:22px 22px; }
.kpw-card--hero { background:linear-gradient(135deg,#1677FF,#0958D9); border-color:transparent; color:#fff; }
.kpw-card--hero .kpw-lab { color:rgba(255,255,255,.82); }
.kpw-lab { font-size:.82rem; color:var(--kpw-muted); margin-bottom:8px; }
.kpw-num { font-size:1.72rem; font-weight:800; letter-spacing:.4px; line-height:1.2; }
.kpw-num small { font-size:1rem; font-weight:600; opacity:.8; }
.kpw-sub { font-size:.8rem; color:var(--kpw-muted); margin-top:6px; }
.kpw-card--hero .kpw-sub { color:rgba(255,255,255,.8); }

/* ---- 工具条 ---- */
.kpw-tools { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.kpw-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 22px; border-radius:60px;
  font-weight:700; font-size:.9rem; cursor:pointer; border:1px solid var(--kpw-line); background:#fff;
  color:var(--kpw-ink); transition:all .2s; }
.kpw-btn:hover { border-color:var(--kpw-blue); color:var(--kpw-blue); }
.kpw-btn--solid { background:linear-gradient(135deg,var(--kpw-blue),var(--kpw-blue-d)); color:#fff; border-color:transparent; }
.kpw-btn--solid:hover { color:#fff; transform:scale(1.02); box-shadow:0 8px 20px rgba(22,119,255,.28); }
.kpw-btn[disabled] { opacity:.5; cursor:not-allowed; }
.kpw-btn--sm { padding:6px 14px; font-size:.82rem; font-weight:600; }

/* ---- 标签页 ---- */
.kpw-tabs { display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--kpw-line); margin-bottom:18px; }
.kpw-tab { padding:10px 18px; border:none; background:none; color:var(--kpw-gray); font-weight:600;
  font-size:.9rem; cursor:pointer; border-bottom:2px solid transparent; }
.kpw-tab.is-on { color:var(--kpw-blue); border-bottom-color:var(--kpw-blue); }

/* ---- 列表 ---- */
.kpw-list { display:flex; flex-direction:column; }
.kpw-row { display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 2px; border-bottom:1px solid var(--kpw-line); }
.kpw-row:last-child { border-bottom:none; }
.kpw-row__l { min-width:0; }
.kpw-row__t { font-size:.92rem; font-weight:600; color:var(--kpw-ink); margin-bottom:3px; }
.kpw-row__m { font-size:.78rem; color:var(--kpw-muted); word-break:break-all; }
.kpw-row__r { text-align:right; white-space:nowrap; }
.kpw-amt { font-size:1rem; font-weight:800; }
.kpw-amt--in { color:#1E9E50; }
.kpw-amt--out { color:#C0392B; }
.kpw-pill { display:inline-block; font-size:.72rem; padding:2px 10px; border-radius:60px; margin-top:4px;
  background:#F2F3F5; color:var(--kpw-gray); font-weight:600; }
.kpw-pill--ok { background:rgba(30,158,80,.12); color:#1E9E50; }
.kpw-pill--wait { background:rgba(212,107,8,.12); color:#D46B08; }
.kpw-pill--rej { background:rgba(192,57,43,.12); color:#C0392B; }

.kpw-empty { text-align:center; color:var(--kpw-muted); font-size:.88rem; padding:36px 0; }
.kpw-more { text-align:center; margin-top:16px; }

/* ---- 规则说明 ---- */
.kpw-rules { background:var(--kpw-soft); border:1px solid var(--kpw-line); border-radius:16px; padding:20px 22px; margin-bottom:22px; }
.kpw-rules h4 { font-size:.94rem; margin-bottom:12px; color:var(--kpw-ink); }
.kpw-rules ul { list-style:none; }
.kpw-rules li { position:relative; padding-left:18px; line-height:1.9; font-size:.86rem; color:var(--kpw-gray); }
.kpw-rules li::before { content:'✦'; position:absolute; left:0; color:var(--kpw-blue); }

/* ---- 弹层 ---- */
.kpw-mask { position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:1200; display:flex;
  align-items:center; justify-content:center; padding:20px; }
.kpw-modal { background:#fff; border-radius:20px; width:100%; max-width:420px; padding:26px 24px;
  max-height:88vh; overflow:auto; }
.kpw-modal h3 { font-size:1.1rem; font-weight:800; margin-bottom:18px; }
.kpw-field { margin-bottom:16px; }
.kpw-field label { display:block; font-size:.82rem; color:var(--kpw-gray); margin-bottom:6px; font-weight:600; }
.kpw-field input[type=text], .kpw-field input[type=number] { width:100%; height:42px; border:1px solid var(--kpw-line);
  border-radius:10px; padding:0 12px; font-size:.92rem; color:var(--kpw-ink); }
.kpw-field input:focus { outline:none; border-color:var(--kpw-blue); }
.kpw-opts { display:flex; gap:16px; flex-wrap:wrap; }
.kpw-opts label { display:inline-flex; align-items:center; gap:6px; font-size:.88rem; color:var(--kpw-ink); }
.kpw-modal__act { display:flex; gap:12px; margin-top:6px; }
.kpw-modal__act .kpw-btn { flex:1; justify-content:center; }
.kpw-msg { font-size:.82rem; margin-top:10px; min-height:18px; }
.kpw-msg--err { color:#C0392B; }
.kpw-msg--ok { color:#1E9E50; font-weight:600; }
.kpw-hint { font-size:.76rem; color:var(--kpw-muted); margin-top:4px; }

.kpw-loading { color:var(--kpw-muted); font-size:.88rem; padding:24px 0; text-align:center; }
@media(max-width:600px){ .kpw-num{ font-size:1.5rem; } .kpw-card{ padding:18px; } }