/* ============================================================
   涪屿学社 · 每日自省面板
   视觉沿用自主学习管理系统（fuyu/public/styles.css）的同一套品牌令牌：
     主蓝 #28307F / 金 #E8912B / 墨 #1E2333 / 面 #F7FAFF / 线 #E3E8F2
   两条硬规则照抄，不许改：
     · 金色上不放白字，金底必须配深墨字
     · 灰 #9AA3B2 只做色块，不承载文字；次要文字用 #5A6270
   孩子端与老师端的差别只在"尺度"：字更大、行更高、一屏更少，颜色一个不换。
   ============================================================ */

:root{
  --blue:#28307F;
  --blue-h:#1F2666;
  --blue2:#3D5BA8;
  --bluebg:#EAF0FB;
  --sky:#90B0F0;
  --gold:#E8912B;
  --goldbg:#FDF3E6;
  --ink:#1E2333;
  --gray:#5A6270;
  --block:#9AA3B2;
  --line:#E3E8F2;
  --bg:#F7FAFF;
  --ok:#2E8B57;
  --okbg:#E8F5EE;
  --r:12px;
  --sd:0 1px 2px rgba(30,35,51,.05), 0 6px 18px rgba(40,48,127,.055);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea{font-family:inherit}
h1,h2,h3{margin:0;font-weight:600}

/* ---------------------------- 通用件 ---------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 20px;border-radius:12px;
  background:var(--blue);color:#fff;font-size:17px;font-weight:600;letter-spacing:.02em;
  transition:.15s;white-space:nowrap;width:100%;
}
.btn:active{background:var(--blue-h);transform:scale(.99)}
.btn:disabled{opacity:.45}
.btn.gold{background:var(--gold);color:#2B2B2B}
.btn.ghost{background:#fff;color:var(--blue);border:1px solid var(--line)}
.btn.sm{height:38px;font-size:14.5px;padding:0 14px;width:auto;border-radius:10px;font-weight:500}
.btn.tiny{height:32px;font-size:13px;padding:0 11px;width:auto;border-radius:8px;font-weight:500}
.btn.ghost.danger{color:#C0392B;border-color:#F0CFCB}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sd)}
.muted{color:var(--gray)}
.hint{font-size:13px;color:var(--gray);line-height:1.7}

.inp,.ta{
  width:100%;border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font-size:16px;color:var(--ink);background:#fff;outline:none;transition:.15s;
}
.ta{line-height:1.7;resize:none;min-height:88px}
.inp:focus,.ta:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(144,176,240,.22)}
.inp::placeholder,.ta::placeholder{color:var(--block)}

/* ---------------------------- 外壳 ---------------------------- */
.screen{max-width:560px;margin:0 auto;padding:0 20px 108px;min-height:100dvh;position:relative}
.screen.narrow{padding-bottom:28px}

.topbar{display:flex;align-items:flex-start;gap:10px;padding:22px 0 14px}
.topbar .who{font-size:24px;font-weight:600;letter-spacing:.02em;line-height:1.25}
.topbar .when{font-size:13.5px;color:var(--gray);margin-top:2px}
.streak{
  margin-left:auto;display:inline-flex;align-items:baseline;gap:4px;
  background:var(--goldbg);color:#8A5210;border-radius:10px;padding:7px 11px;
  font-size:13px;font-weight:600;white-space:nowrap;
}
.streak b{font-size:19px;font-variant-numeric:tabular-nums;font-weight:600}

/* ---------------------------- 清单 ---------------------------- */
.sect-title{display:flex;align-items:baseline;gap:8px;padding:10px 2px 8px;font-size:13.5px;color:var(--gray);font-weight:600;letter-spacing:.04em}
.sect-title span{margin-left:auto;font-weight:400;font-variant-numeric:tabular-nums}

.list{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sd);overflow:hidden}
.row{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:15px 16px;border-bottom:1px solid var(--line);background:none;
  transition:background .12s;
}
.row:last-child{border-bottom:0}
.row:active{background:var(--bluebg)}
.box{
  flex:0 0 auto;width:26px;height:26px;border-radius:8px;border:1.6px solid #C7CEE0;background:#fff;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.box svg{width:15px;height:15px;opacity:0;transition:.15s}
.row.on .box{background:var(--blue);border-color:var(--blue)}
.row.on .box svg{opacity:1}
.row .name{font-size:17px;font-weight:500;line-height:1.35;transition:.15s}
.row.on .name{color:var(--block);font-weight:400}
.row .meta{margin-left:auto;font-size:12.5px;color:var(--block);flex:0 0 auto}

.empty{background:#fff;border:1px dashed var(--line);border-radius:var(--r);padding:26px 20px;text-align:center;color:var(--gray);font-size:14.5px;line-height:1.8}

/* 今日已写的提示 */
.done-note{
  display:flex;align-items:center;gap:9px;margin-top:14px;padding:12px 14px;border-radius:10px;
  background:var(--okbg);color:#1F6B45;font-size:14px;line-height:1.5;
}
.done-note b{font-weight:600}

/* ---------------------------- 底部条 ---------------------------- */
.bottom{
  position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);
  border-top:1px solid var(--line);padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  backdrop-filter:saturate(1.2) blur(6px);z-index:30;
}
.bottom .in{max-width:560px;margin:0 auto;display:flex;gap:10px}
.bottom .in .btn{width:auto;flex:1}

/* ---------------------------- 番茄 ---------------------------- */
.focus{
  position:fixed;inset:0;background:var(--blue);color:#fff;z-index:60;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;
}
.focus .ftask{font-size:15px;color:#B9C4EC;margin-bottom:6px}
.focus .ring{position:relative;width:260px;height:260px;margin:10px 0 6px}
.focus .ring svg{transform:rotate(-90deg)}
.focus .ring .t{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:56px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.focus .state{font-size:14px;color:#B9C4EC;height:22px;margin-bottom:26px}
.focus .acts{display:flex;gap:12px}
.focus .acts .btn{width:auto;min-width:112px;background:rgba(255,255,255,.14);color:#fff}
.focus .acts .btn.solid{background:#fff;color:var(--blue)}
.focus .acts .btn.gold{background:var(--gold);color:#2B2B2B}
.focus .gears{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.gear{
  padding:10px 18px;border-radius:11px;background:rgba(255,255,255,.12);color:#E6EBFB;
  font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;
}
.gear.on{background:#fff;color:var(--blue)}
.focus .pick{width:100%;max-width:420px;margin-bottom:18px}
.focus .pick .ta{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff;min-height:60px}
.focus .pick .ta::placeholder{color:#8E9CD6}
.focus .head{font-size:14px;color:#B9C4EC;margin-bottom:14px}

/* 中断原因 */
.sheet{position:fixed;inset:0;background:rgba(20,24,40,.45);z-index:70;display:flex;align-items:flex-end;justify-content:center}
.sheet .panel{
  width:100%;max-width:560px;background:#fff;border-radius:18px 18px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom));
}
.sheet h3{font-size:17px;margin-bottom:4px}
.sheet .hint{margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}
.chip{
  padding:10px 15px;border-radius:10px;background:#EEF1F6;color:var(--gray);
  font-size:15px;font-weight:500;border:1px solid transparent;
}
.chip.on{background:var(--bluebg);color:var(--blue);border-color:var(--sky);font-weight:600}
.chip.gold{background:var(--goldbg);color:#8A5210}

/* ---------------------------- 睡前页 ---------------------------- */
.night-h{font-size:26px;font-weight:600;line-height:1.35;letter-spacing:.01em;padding:26px 0 6px}
.night-sub{font-size:14.5px;color:var(--gray);margin-bottom:22px;line-height:1.7}
.field{margin-bottom:22px}
.field .lab{font-size:14px;color:var(--gray);font-weight:600;margin-bottom:9px}
.picked{
  display:flex;align-items:center;gap:10px;padding:14px 15px;border-radius:11px;
  background:var(--bluebg);color:var(--blue);font-size:16.5px;font-weight:500;
}
.picked .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 auto}
.count{display:flex;justify-content:flex-end;font-size:12.5px;color:var(--block);margin-top:6px}

/* ---------------------------- 我的 ---------------------------- */
.big{display:flex;align-items:baseline;gap:8px;padding:6px 0 2px}
.big b{font-size:44px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--blue);line-height:1}
.big span{font-size:14px;color:var(--gray)}
.grid7{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-top:16px}
.grid7 .d{aspect-ratio:1;border-radius:9px;background:#EEF1F6;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;font-size:10.5px;color:var(--block)}
.grid7 .d.full{background:var(--blue);color:#fff}
.grid7 .d.min{background:var(--bluebg);color:var(--blue);border:1px solid var(--sky)}
.grid7 .d.today{outline:2px solid var(--gold);outline-offset:1px}
.wk{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.wk .k{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center}
.wk .k b{display:block;font-size:22px;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.2}
.wk .k span{font-size:12px;color:var(--gray)}

/* ---------------------------- 设置 / 家长 ---------------------------- */
.page-h{display:flex;align-items:center;gap:10px;padding:20px 0 6px}
.page-h h2{font-size:20px}
.page-h .back{margin-left:auto;font-size:14px;color:var(--blue);font-weight:500}
.tlist{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sd)}
.trow{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0}
.trow .n{font-size:15.5px;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow .f{font-size:12px;color:var(--gray);background:#EEF1F6;border-radius:6px;padding:3px 7px;flex:0 0 auto}
.mini{display:flex;flex-wrap:wrap;gap:7px;padding:13px 14px;border-bottom:1px solid var(--line)}
.mini:last-child{border-bottom:0}
.mini .w{width:33px;height:30px;border-radius:8px;background:#EEF1F6;color:var(--gray);font-size:13px;display:flex;align-items:center;justify-content:center}
.mini .w.on{background:var(--bluebg);color:var(--blue);font-weight:600;border:1px solid var(--sky)}

.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:12px;box-shadow:var(--sd)}
.pcard .day{font-size:13px;color:var(--gray);margin-bottom:8px}
.pcard .picked-line{font-size:16px;font-weight:500;color:var(--blue);margin-bottom:6px;line-height:1.5}
.pcard .next-line{font-size:15.5px;line-height:1.6}
.pcard .next-line i{font-style:normal;color:var(--block);font-size:13px;margin-right:6px}
.pcard.empty-day{opacity:.65}

/* 登录 */
.login{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;max-width:420px;margin:0 auto;padding:0 26px}
.login .logo{width:150px;margin-bottom:26px}
.login h1{font-size:23px;letter-spacing:.01em}
.login .sub{font-size:14.5px;color:var(--gray);margin:8px 0 30px;line-height:1.75}
.login .btn{margin-bottom:11px}
.login .foot{margin-top:26px;font-size:12px;color:var(--block);text-align:center;line-height:1.9}

/* PIN */
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:22px}
.pinpad button{
  height:60px;border-radius:12px;background:#fff;border:1px solid var(--line);
  font-size:23px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink);
}
.pinpad button:active{background:var(--bluebg)}
.pindots{display:flex;gap:13px;justify-content:center;margin-top:26px}
.pindots i{width:13px;height:13px;border-radius:50%;background:#DDE3F0}
.pindots i.on{background:var(--blue)}
.pinerr{text-align:center;color:#C0392B;font-size:13.5px;margin-top:14px;height:20px}

.toast{
  position:fixed;left:50%;bottom:104px;transform:translateX(-50%);
  background:rgba(30,35,51,.92);color:#fff;font-size:14px;padding:10px 18px;border-radius:10px;
  opacity:0;pointer-events:none;transition:.2s;z-index:90;max-width:80vw;text-align:center;
}
.toast.on{opacity:1}

.skel{height:18px;background:#EAEEF6;border-radius:6px;animation:sk 1.1s infinite alternate}
@keyframes sk{from{opacity:.55}to{opacity:1}}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   v0.2 追加：开场卡 / 学科标签 / 计划编辑器
   ============================================================ */

/* 清单行加学科标签后，名字允许换行，不许把标签挤没 */
.row .name{flex:1;min-width:0;line-height:1.35}
.sj{
  flex:0 0 auto;font-size:11.5px;font-weight:600;letter-spacing:.02em;
  padding:3px 6px;border-radius:5px;background:#EEF1F6;color:var(--gray);white-space:nowrap;
}
.row.on .sj{background:#F2F4F9;color:var(--block)}

/* 打勾弹一下 */
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1)}}
.row.pop .box svg{animation:pop .22s ease-out}
@keyframes hiFade{0%,60%{background:var(--goldbg)}100%{background:transparent}}
.row.hi{animation:hiFade 2.4s ease-out;box-shadow:inset 3px 0 0 var(--gold)}

/* 全勾完的那一行 */
.alldone{
  margin-top:12px;padding:11px 14px;border-radius:10px;background:var(--okbg);
  color:#1F6B45;font-size:14px;text-align:center;letter-spacing:.02em;
}

/* 开场卡 */
.welcome{
  position:relative;background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r);box-shadow:var(--sd);padding:15px 16px 15px 15px;margin-bottom:6px;
}
.welcome .wk{font-size:12.5px;color:#8A5210;font-weight:600;letter-spacing:.04em;margin-bottom:5px}
.welcome .wt{font-size:16px;line-height:1.6;color:var(--ink);padding-right:20px}
.welcome .wl{font-size:13.5px;color:var(--gray);margin-top:6px;line-height:1.6}
.welcome .wa{
  margin-top:11px;height:34px;padding:0 13px;border-radius:9px;
  background:var(--goldbg);color:#8A5210;font-size:13.5px;font-weight:600;
}
.welcome .wx{
  position:absolute;top:8px;right:9px;width:26px;height:26px;border-radius:50%;
  color:var(--block);font-size:17px;line-height:1;
}
.welcome .wx:active{background:#F2F4F9}

/* 计划列表 */
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sd);overflow:hidden}
.prow{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:13px 14px;border-bottom:1px solid var(--line);background:none;
}
.prow:last-child{border-bottom:0}
.prow:active{background:var(--bluebg)}
.prow .p2{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.prow .n{font-size:15.5px;font-weight:500;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .sub{font-size:12px;color:var(--gray);line-height:1.4}
.prow .sub .bad{font-style:normal;color:#C0392B;font-weight:600}
.prow .chev{color:var(--block);font-size:18px;flex:0 0 auto}

/* 到期提醒条 */
.banner{
  background:var(--goldbg);border:1px solid #F2DCBE;border-radius:10px;
  padding:12px 14px;margin-bottom:14px;
}
.banner .bt{font-size:14px;font-weight:600;color:#8A5210}
.banner .bs{font-size:12px;color:#A2703A;line-height:1.6;margin:3px 0 9px}
.banner .btn{background:#fff;color:#8A5210;border:1px solid #E9CDA4;height:30px;padding:0 11px;font-size:12.5px;border-radius:8px;width:auto}

/* 编辑对话框 */
.panel.tall{max-height:90dvh;overflow-y:auto;padding-top:18px}
.sheet-h{display:flex;align-items:center;margin-bottom:16px}
.sheet-h h3{font-size:18px}
.sheet-x{margin-left:auto;width:30px;height:30px;border-radius:50%;color:var(--block);font-size:20px;line-height:1}
.fld{margin-bottom:18px}
.fld .lab{font-size:13.5px;font-weight:600;color:var(--gray);margin-bottom:8px}
.seg{display:flex;gap:0;background:#EEF1F6;border-radius:10px;padding:3px}
.seg button{
  flex:1;height:36px;border-radius:8px;font-size:14.5px;color:var(--gray);font-weight:500;
}
.seg button.on{background:#fff;color:var(--blue);font-weight:600;box-shadow:0 1px 3px rgba(40,48,127,.12)}
.sug{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.sug .sgt{
  font-size:12.5px;color:var(--gray);background:#F4F6FA;border:1px dashed var(--line);
  border-radius:7px;padding:5px 9px;
}
.sug .sgt:active{border-color:var(--sky);color:var(--blue)}
.acts2{display:flex;gap:10px;margin-top:6px}
.acts2 .btn{flex:1}
.mini .w.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.sj{min-width:42px;text-align:center;box-sizing:border-box}

/* ============================================================
   v0.3 追加：专注模式（全屏/常亮/长按结束）、休息态、番茄明细
   ============================================================ */
.focus.done{background:#1F2666}
.focus.rest{background:#14664A}
.focus .bignum{font-size:64px;font-weight:600;line-height:1;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.focus .bignum span{font-size:16px;color:#B9C4EC;margin-left:8px;font-weight:400}
.focus .head{margin-bottom:18px}

/* 长按结束：按下去才走进度，松手就退回 */
.holdbtn{
  position:relative;overflow:hidden;height:52px;padding:0 22px;border-radius:12px;
  border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.07);
  color:#DCE4F7;font-size:14.5px;font-weight:500;letter-spacing:.02em;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;
}
.holdbtn::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--gold)}
.holdbtn.holding::after{width:100%;transition:width 3s linear}
.holdbtn.holding{border-color:rgba(232,145,43,.6)}

.focus .linkbtn{color:#9FB0E4;font-size:14px;text-decoration:underline;margin-top:20px}
.kioskhint{margin-top:26px;font-size:12px;color:#8E9CD6;line-height:1.8;text-align:center;max-width:330px}

/* 家长页：番茄明细 */
.plist{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sd)}
.pomrow{padding:11px 14px;border-bottom:1px solid var(--line)}
.pomrow:last-child{border-bottom:0}
.pr1{display:flex;align-items:baseline;gap:10px}
.pr1 b{font-size:14.5px;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf{font-size:12.5px;color:var(--blue);font-weight:600;font-variant-numeric:tabular-nums;flex:0 0 auto}
.pr2{font-size:12px;color:var(--gray);margin-top:2px;line-height:1.6}
.focus .bignum{display:flex;align-items:baseline;justify-content:center;gap:7px}
.focus .bignum span{margin-left:0}
.focus .bignum{display:flex;flex-direction:column;align-items:center;gap:0;line-height:1.05}
.focus .bignum span{font-size:15px;letter-spacing:.1em;color:#9FB0E4;margin-top:4px}

/* 备案号：页脚一行，不抢视觉，但必须看得到 */
a.icp{color:#5A6270;text-decoration:none;border-bottom:1px solid #C9D0DE}
a.icp:active{color:var(--blue)}