/* 孩子激励零花钱应用 —— 温馨卡通风 · 移动优先响应式 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --pink:   #ff9db5;
  --mint:   #8fe3c0;
  --sky:    #8ecbff;
  --lavan:  #c3b1ff;
  --sun:    #ffd66b;
  --ink:    #4a4458;
  --ink-2:  #8b8499;
  --cream:  rgba(255, 253, 245, 0.9);
  --card:   rgba(255, 255, 255, 0.86);
  --shadow: 0 8px 22px rgba(120, 90, 140, 0.18);
  --radius: 20px;
}

html, body {
  margin: 0; padding: 0; min-height: 100%;
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Yuanti SC", "STHeiti",
               "HanziPen SC", system-ui, sans-serif;
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
  background-attachment: scroll;
  -webkit-font-smoothing: antialiased;
}

body { padding: 16px; max-width: 1120px; margin: 0 auto; }

/* ---------- 通用卡片 ---------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 16px;
  backdrop-filter: blur(3px);
  border: 2px solid rgba(255, 255, 255, 0.6);
}

h1, h2, h3 { margin: 0 0 12px; font-weight: 800; letter-spacing: 1px; }
.app-title { text-align: center; font-size: 24px; color: var(--ink); margin-bottom: 4px; }
.app-sub { text-align: center; color: var(--ink-2); font-size: 14px; margin-bottom: 18px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 0 22px; border: none; border-radius: 999px;
  font-size: 16px; font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--pink), #ff7fa3);
  box-shadow: 0 5px 0 rgba(0,0,0,0.06), var(--shadow);
  transition: transform .12s ease, filter .12s ease;
}
.btn:active { transform: translateY(3px); }
.btn.block { width: 100%; }
.btn.mint { background: linear-gradient(135deg, var(--mint), #5ccf9f); }
.btn.sky  { background: linear-gradient(135deg, var(--sky), #5aa8ff); }
.btn.lavan{ background: linear-gradient(135deg, var(--lavan), #a488ff); }
.btn.sun  { background: linear-gradient(135deg, var(--sun), #ffc23d); color: #6b4d00; }
.btn.ghost{ background: #fff; color: var(--ink); border: 2px solid #ffe0c2; box-shadow: none; }
.btn.danger{ background: linear-gradient(135deg, #ff8a8a, #ff5d5d); }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: 14px; }

/* ---------- 表单 ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.input, select.input, textarea.input {
  width: 100%; min-height: 46px; padding: 10px 14px; font-size: 16px;
  border: 2px solid #ffe0c2; border-radius: 14px; background: #fffdf8; color: var(--ink);
}
.input:focus { outline: none; border-color: var(--sun); box-shadow: 0 0 0 4px rgba(255,214,107,.25); }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 140px; }

/* 分段切换（登录/注册） */
.seg { display: flex; background: #fff; border-radius: 999px; padding: 5px; margin-bottom: 18px; box-shadow: var(--shadow); }
.seg button { flex: 1; border: none; background: transparent; padding: 10px; font-size: 16px; font-weight: 800; border-radius: 999px; color: var(--ink-2); cursor: pointer; }
.seg button.on { background: linear-gradient(135deg, var(--sky), var(--lavan)); color: #fff; }

/* ---------- 顶部栏 ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.topbar .who { font-size: 18px; font-weight: 800; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; }
.tabs button { white-space: nowrap; border: none; background: rgba(255,255,255,.7); color: var(--ink-2);
  padding: 10px 16px; border-radius: 999px; font-weight: 800; font-size: 15px; cursor: pointer; }
.tabs button.on { background: linear-gradient(135deg, var(--sun), #ffb703); color: #6b4d00; box-shadow: var(--shadow); }
.tab-panel { display: none; }
.tab-panel.on { display: block; }

/* ---------- 人物信息卡片（孩子端） ---------- */
.child-swipe { padding: 0; margin-bottom: 14px; touch-action: pan-y; user-select: none; }
.child-profile { display: flex; align-items: center; gap: 8px; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 10px;
  border: 2px solid rgba(255,255,255,.6); backdrop-filter: blur(3px);
  transition: transform .25s ease, opacity .25s ease; }
.profile-img { flex: 1 1 0; min-width: 0; text-align: center; }
.profile-img img { display: inline-block; width: 100%; max-width: 240px; height: auto;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.18)); }
.profile-info { flex: 1 1 0; min-width: 0; }
.profile-name { font-size: 24px; font-weight: 900; color: var(--ink); line-height: 1.2; }
.profile-age { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.profile-num { font-size: 18px; font-weight: 800; margin-top: 8px; color: #ff7a45; }
.profile-tip { font-size: 12px; color: var(--ink-2); margin-top: 8px; }
.child-dots { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.child-dots .dot { width: 12px; height: 12px; border-radius: 50%; background: #e0d6ec; cursor: pointer; transition: all .2s; }
.child-dots .dot.on { background: var(--pink); transform: scale(1.4); box-shadow: 0 0 6px rgba(255,157,181,.5); }
.swipe-hint { font-size: 12px; color: var(--ink-2); opacity: .6; margin-left: 8px; }

/* ---------- 余额大卡片 ---------- */
.balance-card { text-align: center; background: linear-gradient(135deg, #fff, #fff6e9); }
.balance-num { font-size: 46px; font-weight: 900; color: #ff7a45; line-height: 1.1; }
.balance-num .unit { font-size: 20px; color: var(--ink-2); margin-left: 4px; }
.balance-label { color: var(--ink-2); font-weight: 700; margin-bottom: 6px; }

/* ---------- 任务卡片 + 进度 ---------- */
.task-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px;
  background: #fffdf8; border: 2px solid #ffe9d1; margin-bottom: 10px; }
.task-item .icon { font-size: 30px; width: 42px; text-align: center; }
.task-item .main { flex: 1; min-width: 0; }
.task-item .name { font-weight: 800; font-size: 16px; }
.task-item .meta { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.progress { height: 12px; border-radius: 999px; background: #f0e6d8; overflow: hidden; margin: 6px 0; }
.progress > i { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--mint), var(--sky)); transition: width .45s cubic-bezier(.34,1.56,.64,1); }
.pcount { font-size: 13px; font-weight: 800; color: var(--ink-2); }

/* ---------- 列表行（家长端） ---------- */
.list-row { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px;
  background: #fffdf8; border: 2px solid #ffe9d1; margin-bottom: 10px; }
.list-row .grow { flex: 1; min-width: 0; line-height: 2.2; }
.list-row .fig-mini { width: 20%; }
.list-row .fig-mini img { width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.chip { padding: 4px 12px; border-radius: 999px; background: #f2e9ff; color: #6b4d9a; font-size: 13px; font-weight: 700; }
.chip.on { background: linear-gradient(135deg, var(--lavan), #8f6bff); color: #fff; }

/* 图标选择器 */
.icon-picker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.icon-picker button { font-size: 24px; min-height: 44px; min-width: 0; padding: 0; border: 2px solid #eee0f0; background: #fff; border-radius: 12px; cursor: pointer; overflow: hidden; }
.icon-picker button.on { border-color: var(--sun); background: #fff6da; box-shadow: var(--shadow); }

/* 流水 */
.his-row { display: flex; justify-content: space-between; padding: 10px 4px; border-bottom: 1px dashed #ffe0c2; }
.his-row .amt { font-weight: 900; }
.amt.pos { color: #2bb673; }
.amt.neg { color: #ff5d5d; }

/* 空状态 */
.empty { text-align: center; color: var(--ink-2); padding: 30px 10px; font-weight: 700; }

/* 一行紧凑展示（家长端 · 零花钱） */
.allow-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.allow-row .allow-label { font-weight: 800; color: var(--ink); }
.allow-row .allow-num { font-size: 18px; color: #ff7a45; font-weight: 900; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(20px);
  background: rgba(60,50,70,.95); color: #fff; padding: 12px 22px; border-radius: 999px;
  font-size: 15px; font-weight: 700; opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 999; max-width: 88vw; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: rgba(214,80,80,.96); }

/* ---------- 撒花/星星动效 ---------- */
.spark { position: fixed; z-index: 998; pointer-events: none; font-size: 22px; animation: fly .6s ease-out forwards; }
@keyframes fly {
  0% { opacity: 1; transform: translate(0,0) scale(.6) rotate(0); }
  100% { opacity: 0; transform: translate(var(--dx,0), var(--dy,-90px)) scale(1.3) rotate(220deg); }
}

/* ---------- 弹窗 ---------- */
.mask { position: fixed; inset: 0; background: rgba(80,60,90,.4); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 500; }
.mask.on { display: flex; }
.modal { width: 100%; max-width: 440px; background: var(--cream); border-radius: 22px; padding: 22px; box-shadow: var(--shadow); overflow: hidden; }
.modal h3 { margin-bottom: 16px; }

/* ---------- 平板/桌面适配 ---------- */
@media (min-width: 768px) {
  body { padding: 24px; }
  .app-title { font-size: 30px; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .icon-picker { grid-template-columns: repeat(12, 1fr); }
  .task-item { padding: 14px 16px; }
  .child-profile { padding: 28px 24px; gap: 24px; }
  .profile-img img { max-width: 320px; }
  .profile-name { font-size: 32px; }
  .profile-num { font-size: 24px; }
}
@media (min-width: 1024px) {
  .icon-picker { grid-template-columns: repeat(12, 1fr); }
  .balance-num { font-size: 56px; }
}