/* ============================================================
   KidDaily 日历子页 — 弹窗（添加计划 / 课程表设置）+ Toast
   由原型机械抽取；裸 hex 收编为 var()
   ============================================================ */

.mask{
  position:absolute;inset:0;z-index:20;
  background:var(--mask-bg);
  backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease;
}
.mask.is-open{opacity:1;visibility:visible;}
.modal{
  background:var(--card);border-radius:22px;border:1px solid var(--line);
  box-shadow:var(--shadow-modal);
  padding:28px;display:flex;flex-direction:column;gap:20px;
  transform:translateY(12px) scale(.98);
  transition:transform var(--motion-slow) var(--ease-out-expo);
}
.mask.is-open .modal{transform:translateY(0) scale(1);}
#planMask .modal{width:520px;}
#planMask .modal[data-type="long"]{height:560px;}
#planMask .modal[data-type="flex"]{height:400px;}
#planMask .modal[data-type="timed"]{height:660px;}
#ttMask .modal{width:640px;height:640px;}
.modal-head{height:30px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;}
.modal-head h3{font-size:19px;line-height:26px;font-weight:700;color:var(--ink);}
.modal-close{
  width:28px;height:28px;border-radius:14px;background:var(--field);color:var(--muted-2);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  transition:background-color .16s ease;
}
.modal-close:hover{background:var(--icon-btn-hover);}
.modal-close svg{display:block;}
.type-seg{height:44px;flex:0 0 auto;display:flex;gap:4px;padding:4px;border-radius:var(--radius-pill);background:var(--field);}
.type-seg button{flex:1;height:36px;border-radius:var(--radius-pill);font-size:13.5px;font-weight:500;color:var(--muted-2);line-height:19px;transition:background-color .16s ease,color .16s ease;}
.type-seg button.active{background:var(--coral);color:#fff;font-weight:600;}
.type-seg button:focus-visible{box-shadow:var(--focus-ring);outline:none;}
.f-label{font-size:13.5px;line-height:19px;font-weight:600;color:var(--ink-2);flex:0 0 auto;}
.f-input{
  height:48px;flex:0 0 auto;border-radius:12px;background:var(--field);
  border:1px solid var(--line-soft);padding:0 14px;
  font-size:14.5px;color:var(--ink);line-height:20px;outline:none;width:100%;
  transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease;
}
.f-input:focus{border-color:var(--field-focus-border);background:var(--field-focus-bg);
  box-shadow:var(--focus-ring);}
.f-input::placeholder{color:var(--time-faded);}
.range-row{height:48px;flex:0 0 auto;display:flex;align-items:center;gap:8px;}
.range-row .f-input{flex:1;text-align:left;}
.range-row .to{font-size:13px;line-height:18px;color:var(--muted);flex:0 0 auto;}
.f-hint{font-size:12px;line-height:18px;color:var(--muted);flex:0 0 auto;}
.f-error{font-size:12px;line-height:18px;color:var(--danger);flex:0 0 auto;display:none;}
.f-error.is-show{display:block;}
.spacer{flex:1;min-height:0;}
.modal-foot{height:46px;flex:0 0 auto;display:flex;gap:12px;}
.btn-ghost{
  flex:1;height:46px;border-radius:var(--radius-pill);background:var(--field);
  border:1px solid var(--line-soft);
  font-size:14.5px;font-weight:500;color:var(--ink-3);line-height:20px;
  transition:background-color .16s ease;
}
.btn-ghost:hover{background:var(--ghost-hover-bg-cal);}
.btn-primary{
  flex:1;height:46px;border-radius:var(--radius-pill);background:var(--coral);
  font-size:14.5px;font-weight:600;color:#fff;line-height:20px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background-color .16s ease,transform .12s ease;
}
.btn-primary:hover{background:var(--cal-btn-hover);}
.btn-primary:active{transform:translateY(1px);}
.btn-primary[disabled]{opacity:.5;cursor:not-allowed;}

/* 课程表设置弹窗 */
.stepper-row{height:48px;flex:0 0 auto;display:flex;gap:16px;}
.stepper{
  flex:1;height:48px;border-radius:12px;background:var(--field);
  display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;
}
.stepper .lb{font-size:13.5px;line-height:19px;font-weight:500;color:var(--ink-2);flex:0 0 auto;}
.step-btn{
  width:32px;height:32px;border-radius:10px;background:#fff;
  border:1px solid var(--line-soft);color:var(--muted-2);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  transition:background-color .16s ease,transform .12s ease;
}
.step-btn:hover{background:var(--chip-hover);}
.step-btn:active{transform:scale(.92);}
.step-btn svg{display:block;}
.stepper .val{font-size:14.5px;line-height:20px;font-weight:600;color:var(--ink);}
.check-row{height:44px;flex:0 0 auto;display:flex;align-items:center;gap:24px;}
.check{display:flex;align-items:center;gap:10px;cursor:pointer;}
.check .box{
  width:20px;height:20px;border-radius:6px;background:#fff;
  border:1px solid var(--check-border);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:background-color .16s ease,border-color .16s ease;
}
.check .box svg{display:none;}
.check.on .box{background:var(--coral);border-color:var(--coral);}
.check.on .box svg{display:block;}
.check span{font-size:14px;line-height:20px;font-weight:500;color:var(--ink);}
.check:not(.on) span{color:var(--ink-3);}
.preview{
  height:44px;flex:0 0 auto;border-radius:12px;background:var(--coral-soft);
  display:flex;align-items:center;gap:8px;padding:0 14px;color:var(--coral-deep);
}
.preview span{font-size:12.5px;line-height:18px;font-weight:500;color:var(--coral-deep);}
.preview svg{flex:0 0 auto;display:block;}

/* ---------- Toast ---------- */
.toast{
  position:absolute;left:50%;bottom:44px;transform:translate(-50%,10px);
  background:var(--toast-bg);color:#fff;border-radius:var(--radius-pill);
  padding:10px 22px;font-size:13.5px;line-height:19px;
  opacity:0;visibility:hidden;z-index:40;
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
  pointer-events:none;white-space:nowrap;
}
.toast.is-open{opacity:1;visibility:visible;transform:translate(-50%,0);}