/* ============================================================
   KidDaily 积分管理页 points.html — 弹层（设置/添加兑换项/选择积分项）+ Toast
   由原型机械抽取；裸 hex 收编为 var()；弹跳缓动替换为 --ease-out-expo（P0 禁令）
   ============================================================ */

.overlay{
  position:absolute;inset:0;
  background:var(--mask-bg);
  backdrop-filter:blur(2px);
  display:none;align-items:center;justify-content:center;
  z-index:20;
}
.overlay.is-open{display:flex;animation:fadeIn .2s ease both;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

.modal{
  background:var(--card);border:1px solid var(--line);
  border-radius:28px;box-shadow:var(--shadow-modal);
  display:flex;flex-direction:column;
  animation:modalIn .26s var(--ease-out-expo) both;
  overflow:hidden;
}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}

.modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  flex:0 0 auto;
}
.modal-head .head-text{gap:4px;}
.modal-head h3{font-size:21px;font-weight:700;color:var(--ink);line-height:29px;}
.modal-head p{font-size:12.5px;line-height:18px;color:var(--muted);}
.modal-close{
  width:34px;height:34px;border-radius:12px;background:var(--field);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  color:var(--ink-3);
  transition:background-color .16s ease,transform .12s ease;
}
.modal-close:hover{background:var(--icon-btn-hover);}
.modal-close:active{transform:scale(.94);}

/* ---- 设置面板 ---- */
.modal--settings{width:640px;padding:32px;gap:22px;max-height:1000px;}

.tabs{
  height:42px;border-radius:var(--radius-pill);background:var(--line);
  padding:4px;display:flex;gap:4px;flex:0 0 auto;
}
.tab{
  flex:1 1 0;height:100%;border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:background-color .2s ease,box-shadow .2s ease;
}
.tab.is-active{background:var(--card);box-shadow:var(--tab-shadow);}
.tab svg{display:block;flex:0 0 auto;}
.tab span{font-size:13.5px;line-height:18px;color:var(--muted);font-weight:500;transition:color .2s ease;}
.tab.is-active span{color:var(--ink);font-weight:600;}
.tab--add svg{color:var(--up);}
.tab--sub svg{color:var(--muted);}

.item-list{
  display:flex;flex-direction:column;gap:10px;
  overflow-y:auto;flex:1 1 auto;min-height:0;
  padding-right:2px;
}
.item-list::-webkit-scrollbar{width:6px;}
.item-list::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:3px;}
.item-list::-webkit-scrollbar-track{background:transparent;}

.item{
  height:66px;border-radius:16px;background:var(--card);
  border:1px solid var(--line);
  padding:0 16px;
  display:flex;align-items:center;gap:12px;flex:0 0 66px;
}
.item.is-removing{animation:itemOut .26s ease forwards;}
@keyframes itemOut{to{opacity:0;transform:translateX(20px);height:0;margin-top:-10px;}}

.item-icon{
  width:36px;height:36px;border-radius:12px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
}
.item-icon.is-add{background:var(--up-soft);color:var(--up);}
.item-icon.is-sub{background:var(--down-soft);color:var(--coral-deep);}
.item-icon svg{display:block;}

.item-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.item-info b{font-size:14px;font-weight:600;color:var(--ink);line-height:20px;}
.item-info i{font-size:11.5px;font-style:normal;color:var(--label);line-height:16px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.item-val{
  height:32px;border-radius:10px;padding:0 14px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
}
.item-val.is-add{background:var(--up-soft);}
.item-val.is-sub{background:var(--down-soft);}
.item-val span{font-family:var(--font-num);font-size:14px;font-weight:600;line-height:19px;}
.item-val.is-add span{color:var(--up);}
.item-val.is-sub span{color:var(--coral-deep);}

.item-del{
  width:32px;height:32px;border-radius:10px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  color:var(--faded);
  transition:background-color .16s ease,color .16s ease;
}
.item-del:hover{background:var(--chip-hover);color:var(--coral-deep);}
.item-del svg{display:block;}

/* 新增加分项内联表单行 */
.item--form{height:auto;min-height:66px;padding:10px 16px;gap:10px;}
.item--form input{
  height:36px;border-radius:10px;background:var(--field);
  border:1px solid var(--line-soft);padding:0 10px;
  font-size:13px;color:var(--ink);
}
.item--form input:focus{border-color:var(--field-focus-border);background:var(--field-focus-bg);}
.item--form .f-name{flex:1 1 auto;min-width:0;}
.item--form .f-value{width:76px;flex:0 0 auto;font-family:var(--font-num);}
.item--form .f-ok{
  width:36px;height:36px;border-radius:10px;background:var(--coral);color:#fff;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
}
.item--form .f-cancel{
  width:36px;height:36px;border-radius:10px;background:var(--field);color:var(--muted);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
}

.settings-foot{display:flex;flex-direction:column;gap:12px;flex:0 0 auto;}
.add-item-row{
  height:56px;border-radius:16px;background:var(--card);
  border:1.5px solid var(--coral);
  display:flex;align-items:center;justify-content:center;gap:9px;
  color:var(--coral);
  transition:background-color .16s ease;
}
.add-item-row:hover{background:var(--add-row-hover);}
.add-item-row span{font-size:14px;font-weight:600;color:var(--coral);line-height:19px;}
.add-item-row svg{display:block;}

.modal-foot{display:flex;gap:12px;justify-content:flex-end;flex:0 0 auto;}
.btn-cancel{
  width:132px;height:48px;border-radius:var(--radius-pill);
  background:var(--card);border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .16s ease,background-color .16s ease;
}
.btn-cancel:hover{border-color:var(--ghost-hover-border);background:var(--ghost-hover-bg);}
.btn-cancel span{font-size:14px;font-weight:500;color:var(--ink-3);line-height:19px;}

.btn-ok{
  min-width:156px;height:48px;border-radius:var(--radius-pill);background:var(--coral);
  display:flex;align-items:center;justify-content:center;gap:8px;padding:0 24px;
  box-shadow:var(--shadow-btn);
  transition:transform .14s ease,background-color .16s ease,box-shadow .16s ease;
}
.btn-ok:hover{background:var(--coral-hover);box-shadow:var(--shadow-btn-hover);}
.btn-ok:active{transform:translateY(1px) scale(.985);}
.btn-ok span{font-size:14px;font-weight:600;color:#fff;line-height:19px;}

/* ---- 添加兑换项弹窗 ---- */
.modal--add{width:720px;padding:32px;gap:22px;}
.add-body{display:flex;gap:24px;}

.upload-col{width:250px;flex:0 0 auto;display:flex;flex-direction:column;gap:10px;}
.upload{
  width:250px;height:250px;border-radius:20px;
  background:var(--coral-soft);
  border:2px dashed var(--coral);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  cursor:pointer;position:relative;overflow:hidden;
  transition:background-color .16s ease;
}
.upload:hover{background:var(--upload-hover);}
.upload.has-image{border-style:solid;padding:0;}
.upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.upload-ring{
  width:46px;height:46px;border-radius:23px;background:var(--card);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  color:var(--coral);
}
.upload.has-image .upload-ring,
.upload.has-image .upload b,
.upload.has-image .upload p{display:none;}
.upload img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;}
.upload.has-image img{display:block;}
.upload b{font-size:13.5px;font-weight:600;color:var(--coral-deep);line-height:19px;}
.upload p{font-size:11px;line-height:16px;color:var(--upload-sub);}
.upload-label{font-size:12px;font-weight:500;color:var(--label);line-height:17px;}

.form-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:18px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field > label{font-size:12.5px;font-weight:600;color:var(--ink-2);line-height:18px;}
.input{
  height:46px;border-radius:var(--radius-sm);background:var(--field);
  border:1px solid var(--line-soft);
  padding:0 14px;width:100%;
  font-size:13.5px;line-height:19px;color:var(--ink);
  transition:border-color .16s ease,background-color .16s ease;
}
.input::placeholder{color:var(--faded);}
.input:hover{border-color:var(--input-hover-border);}
.input:focus{background:var(--card);border-color:var(--coral);}

.cost-row{display:flex;align-items:center;gap:10px;}
.cost-input{width:180px;flex:0 0 auto;display:flex;align-items:center;gap:6px;padding-left:14px;
  height:46px;border-radius:var(--radius-sm);background:var(--field);border:1px solid var(--line-soft);
  color:var(--coral);
  transition:border-color .16s ease,background-color .16s ease;}
.cost-input:hover{border-color:var(--input-hover-border);}
.cost-input:focus-within{background:var(--card);border-color:var(--coral);}
.cost-input svg{flex:0 0 auto;}
.cost-input input{flex:1 1 auto;min-width:0;font-family:var(--font-num);font-size:13.5px;font-weight:600;color:var(--ink);}
.cost-hint{
  height:46px;border-radius:var(--radius-sm);background:var(--coral-soft);
  padding:0 14px;display:flex;align-items:center;flex:1 1 auto;min-width:0;
}
.cost-hint span{font-size:11.5px;font-weight:500;color:var(--coral-deep);line-height:16px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.form-error{font-size:11.5px;color:var(--danger);line-height:16px;min-height:16px;}

/* ============================================================
   Toast
   ============================================================ */
.toast-wrap{
  position:absolute;left:50%;bottom:44px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  z-index:40;pointer-events:none;
}
.toast{
  background:var(--toast-bg);
  backdrop-filter:blur(6px);
  border-radius:var(--radius-pill);padding:10px 20px;
  font-size:13px;font-weight:500;color:#fff;line-height:19px;
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  animation:toastIn .26s var(--ease-out-expo) both;
  box-shadow:var(--toast-shadow);
}
.toast svg{display:block;flex:0 0 auto;}
.toast.is-out{animation:toastOut .24s ease forwards;}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes toastOut{to{opacity:0;transform:translateY(6px) scale(.97);}}