/* ============================================================
   KidDaily 积分管理页 points.html — 基础 + 顶栏 + 积分总览
   由原型机械抽取；页面级别名按 DESIGN §9 覆盖表；裸 hex 收编为 var()
   ============================================================ */

/* DESIGN §9 页面级 Token 别名覆盖（零回归关键，照抄勿改） */
:root{
  --track:var(--progress-track);
  --dot:var(--status-dot);
  --shadow-modal:var(--shadow-modal-soft);
  /* tokens.css 未收编的零散色，页面级别名补录 */
  --tab-shadow:0 2px 6px rgba(158,125,94,.14);
  --add-row-hover:#FFF9F6;
  --upload-hover:#F8E4DA;
  --upload-sub:#B08768;
  --input-hover-border:#DCD2C4;
  --toast-shadow:0 8px 24px -8px rgba(46,42,38,.5);
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--stage-bg);
  font-family:var(--font-cn);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;}
input{font-family:inherit;border:none;outline:none;background:none;color:inherit;}

/* ---------- 舞台与缩放 ---------- */
.stage{position:fixed;inset:0;overflow:hidden;}

.page{
  position:absolute;top:0;left:0;
  width:1920px;height:1080px;
  transform-origin:top left;
  background:var(--bg);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:24px;padding:30px;
  overflow:hidden;
}

/* ---------- 顶部栏（抬升层级，避免头像下拉菜单被内容区覆盖） ---------- */
.topbar{
  position:relative;z-index:15;
  width:1656px;height:54px;
  display:flex;align-items:center;justify-content:space-between;
  flex:0 0 auto;
}
.brand{display:flex;align-items:center;gap:12px;}
.logo{
  width:42px;height:42px;border-radius:var(--radius-logo);background:var(--coral);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.brand-text{display:flex;flex-direction:column;gap:3px;}
.brand-title{font-size:21px;line-height:27px;font-weight:700;color:var(--ink);font-family:var(--font-num);}
.brand-sub{font-size:12.5px;line-height:17px;font-weight:400;color:var(--muted);}

.user-area{display:flex;align-items:center;gap:12px;}

/* ---------- 通用卡片 ---------- */
.card{
  width:1656px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:28px;
  display:flex;flex-direction:column;
  overflow:hidden;
  flex:0 0 auto;
}

/* 卡片内 CSS padding 27 + 1px 描边 = 设计稿 28px */
.card--overview{height:473px;gap:20px;}
.card--redeem{height:465px;gap:18px;}

.card-head{
  display:flex;align-items:center;justify-content:space-between;
  flex:0 0 auto;
}
.head-text{display:flex;flex-direction:column;gap:3px;}
.head-text h2{font-size:18px;font-weight:700;color:var(--ink);line-height:26px;}
.head-text p{font-size:12.5px;font-weight:400;color:var(--muted);line-height:18px;}

/* 设置按钮 */
.btn-icon{
  width:44px;height:44px;border-radius:14px;
  background:var(--field);border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  color:var(--ink-3);
  transition:background-color .16s ease,border-color .16s ease,transform .12s ease;
}
.btn-icon:hover{background:var(--chip-hover);border-color:var(--coral);}
.btn-icon:active{transform:scale(.94);}
.btn-icon svg{display:block;}

/* ============================================================
   积分总览
   ============================================================ */
.overview-body{
  display:flex;gap:24px;flex:1 1 auto;min-height:0;
}

/* ---- 左：当前积分卡 ---- */
.points-card{
  width:288px;flex:0 0 auto;
  background:var(--coral-soft);
  border-radius:20px;
  padding:24px;
  display:flex;flex-direction:column;gap:12px;
  align-items:flex-start;
}
.points-label{font-size:13px;font-weight:500;color:var(--coral-label);line-height:18px;}
.points-total{
  font-family:var(--font-num);
  font-size:56px;font-weight:700;color:var(--coral-deep);
  line-height:62px;letter-spacing:1px;
  font-variant-numeric:tabular-nums;
}
.chip{
  height:28px;border-radius:var(--radius-pill);background:var(--card);
  padding:0 12px 0 11px;
  display:flex;align-items:center;gap:5px;
}
.chip svg{display:block;flex:0 0 auto;color:var(--up);}
.chip span{font-size:12.5px;font-weight:600;color:var(--up);line-height:18px;white-space:nowrap;}

.goal{
  width:100%;background:var(--card);border-radius:14px;
  padding:14px;display:flex;flex-direction:column;gap:6px;
}
.goal-label{font-size:12px;font-weight:500;color:var(--muted);line-height:17px;}
.goal-bar{width:100%;height:8px;border-radius:4px;background:var(--track);overflow:hidden;}
.goal-bar i{display:block;height:8px;border-radius:4px;background:var(--coral);transition:width .5s cubic-bezier(.4,0,.2,1);}
.goal-text{font-size:11.5px;font-weight:500;color:var(--coral-deep);line-height:16px;}

/* ---- 中：变化记录 ---- */
.rec-list{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px;}
.rec-head{height:24px;display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;}
.rec-head h3{font-size:15px;font-weight:700;color:var(--ink);line-height:22px;}
.rec-head em{font-size:12px;font-style:normal;color:var(--label);line-height:17px;}

.rec-list-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px;}

.rec-row{
  height:58px;border-radius:14px;background:var(--field);
  padding:0 18px;
  display:flex;align-items:center;gap:16px;flex:0 0 58px;
  animation:rowIn .32s ease both;
}
@keyframes rowIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

.rec-time{width:104px;flex:0 0 auto;display:flex;flex-direction:column;gap:1px;}
.rec-time b{font-size:13px;font-weight:600;color:var(--ink-2);line-height:19px;}
.rec-time i{font-size:11px;font-style:normal;color:var(--label);line-height:15px;}
.rec-reason{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:500;color:var(--ink-2);line-height:19px;}
.rec-delta{
  height:28px;border-radius:var(--radius-pill);padding:0 12px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--up-soft);
}
.rec-delta.is-down{background:var(--down-soft);}
.rec-delta span{font-family:var(--font-num);font-size:13px;font-weight:600;color:var(--up);line-height:18px;}
.rec-delta.is-down span{color:var(--coral-deep);}

.rec-empty{
  flex:1 1 auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
}
.rec-empty p{font-size:13px;color:var(--label);line-height:19px;}

/* ---- 右：操作区 ---- */
.act-col{
  width:212px;flex:0 0 auto;
  display:flex;flex-direction:column;gap:12px;justify-content:space-between;
}
.act-title{font-size:12px;font-weight:500;color:var(--label);line-height:17px;}
.act-btns{display:flex;flex-direction:column;gap:12px;}

.btn{
  height:60px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:transform .14s ease,box-shadow .16s ease,
    background-color .16s ease,border-color .16s ease;
  user-select:none;
}
.btn:active{transform:translateY(1px) scale(.985);}
.btn:focus-visible{box-shadow:var(--focus-ring);outline:none;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
.btn--primary{background:var(--coral);color:#fff;box-shadow:var(--shadow-btn);}
.btn--primary:hover{background:var(--coral-hover);box-shadow:var(--shadow-btn-hover);}
.btn--primary:active{background:var(--coral-active);}
.btn--ghost{background:var(--card);border:1px solid var(--line-soft);color:var(--ink-3);}
.btn--ghost:hover{border-color:var(--ghost-hover-border);background:var(--ghost-hover-bg);}
.btn span{font-size:14px;font-weight:600;line-height:19px;}
.btn svg{display:block;flex:0 0 auto;}

.act-tip{
  background:var(--field);border-radius:14px;padding:13px;
  display:flex;align-items:flex-start;gap:9px;
  color:var(--label);
}
.act-tip svg{flex:0 0 auto;margin-top:1px;}
.act-tip p{font-size:11.5px;line-height:17px;color:var(--muted);}