/* 个人时间管理台 V2.0 · 简洁安静 · 手机优先 */
:root{
  --bg:#f5f7fa; --card:#ffffff; --ink:#1c2733; --dim:#6b788a;
  --blue:#2766c3; --blue-soft:#e7f0ff; --edge:#e5eaf1;
  --green:#218563; --orange:#b6772a; --purple:#8b71b6; --red:#b44848;
  --shadow:0 5px 22px rgba(20,43,75,.06);
  --c-work:#367cc3; --c-family:#b8894f; --c-personal:#8494a8;
  --c-study:#8b71b6; --c-meditation:#448c77; --c-buffer:#cdd7e2;
  --c-interrupt:#c95f5f; --c-focus:#d4862c;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft Yahei","Noto Sans SC",sans-serif;
  min-height:100vh;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #b6d1fc;outline-offset:2px}
input,select,textarea{border:1px solid var(--edge);border-radius:10px;padding:10px 12px;background:#fff;width:100%}
label{display:block;color:var(--dim);font-size:12px;margin:8px 0 5px}
.hidden{display:none!important}

/* ---------- 通用 ---------- */
.wrap{max-width:560px;margin:0 auto;padding:0 12px calc(86px + env(safe-area-inset-bottom));}
.card{background:var(--card);border:1px solid var(--edge);border-radius:16px;padding:16px;box-shadow:var(--shadow);margin:12px 0}
.card h2{font-size:16px;margin:0 0 10px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.card h2 .sub{font-size:12px;color:var(--dim);font-weight:400}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--edge);background:#fff;border-radius:12px;
  padding:11px 14px;font-size:14px;font-weight:600;min-height:44px;
}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.warn{color:var(--red);border-color:#f0c9c9}
.btn.soft{background:var(--blue-soft);border-color:#d3e4fb;color:var(--blue)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.block{width:100%}
.btn.mini{padding:6px 10px;min-height:32px;font-size:12px;border-radius:9px;font-weight:500}
.btn[disabled]{opacity:.45}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.grow{flex:1}
.muted{color:var(--dim)}
.small{font-size:12px}
.notice{background:#f3f7fd;border:1px solid #e3edfc;border-radius:10px;padding:11px 13px;font-size:13px;color:#45607e;margin:8px 0}
.warning{background:#fff4f4;border:1px solid #f5dcdc;border-radius:10px;padding:11px 13px;font-size:13px;color:var(--red);margin:8px 0}
.toast{
  position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:60;
  background:rgba(28,39,51,.94);color:#fff;border-radius:12px;padding:10px 18px;
  font-size:14px;max-width:86vw;box-shadow:0 8px 26px rgba(0,0,0,.2);display:none;
}
.toast.show{display:block;animation:up .22s ease}
@keyframes up{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- 顶部 ---------- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(245,247,250,.94);backdrop-filter:blur(8px);padding:14px 4px 8px}
.topbar .date-line{display:flex;justify-content:space-between;align-items:baseline}
.topbar .date{font-size:19px;font-weight:700}
.topbar .weekday{font-size:13px;color:var(--blue);font-weight:600;margin-left:8px}
.topbar .clock{font-size:34px;font-weight:800;letter-spacing:.5px;font-variant-numeric:tabular-nums;line-height:1.1}
.topbar .clock small{font-size:14px;font-weight:600;color:var(--dim);margin-left:6px}

/* ---------- 当前/下一任务 ---------- */
.nowcard{background:linear-gradient(135deg,#2766c3,#3b7fd8);color:#fff;border-radius:18px;padding:16px;margin:10px 0;box-shadow:0 8px 24px rgba(39,102,195,.25)}
.nowcard .lbl{font-size:12px;opacity:.85;letter-spacing:.06em}
.nowcard .ttl{font-size:19px;font-weight:700;margin:4px 0 2px}
.nowcard .tme{font-size:13px;opacity:.92}
.nextcard{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:12px 14px;margin:10px 0;box-shadow:var(--shadow)}
.nextcard .lbl{font-size:12px;color:var(--dim)}
.nextcard .ttl{font-weight:600;margin-top:2px}

/* ---------- 时间线 ---------- */
.timeline{display:flex;flex-direction:column;gap:2px}
.item{display:grid;grid-template-columns:84px 4px minmax(0,1fr);gap:10px;padding:11px 2px;border-bottom:1px solid #f0f3f6;position:relative}
.item:last-child{border-bottom:none}
.item .time{font-size:12px;font-weight:650;color:var(--dim);font-variant-numeric:tabular-nums;padding-top:3px;white-space:nowrap}
.item .stripe{width:4px;border-radius:12px;min-height:46px;align-self:stretch}
.item .tname{font-size:14px;font-weight:650}
.item .tmeta{font-size:12px;color:var(--dim);margin-top:2px;display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.item.done{opacity:.55}
.item.done .tname{text-decoration:line-through}
.item.now{background:#f0f6ff;border-radius:12px;padding:11px 8px;border-bottom:none;margin:2px -4px}
.item.now .tname{color:var(--blue)}
.tbtns{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pill{border:1px solid var(--edge);padding:1px 7px;border-radius:6px;font-size:11px;color:var(--dim);white-space:nowrap}
.pill.lock{color:#b06c28;border-color:#f1dcc4;background:#fff9ef}
.pill.tent{color:var(--purple);border-color:#e3d8f3;background:#f9f5fe}
.pill.child{color:var(--green);border-color:#cce8dd;background:#f4faf7}
.pill.buf{color:#7c909e;background:#f7f9fb}
.pill.a{color:#b44848;border-color:#f2d4d4;background:#fff6f6}
.pill.b{color:#2e6b9e;border-color:#d4e5f4;background:#f4f9fd}
.pill.c{color:#6b788a;border-color:#e2e6ec;background:#f8f9fb}
.empty{text-align:center;color:var(--dim);padding:22px 8px;font-size:13px}

/* ---------- 快速操作 ---------- */
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.quick .btn{padding:16px 10px;font-size:15px;flex-direction:column;gap:3px;border-radius:16px}
.quick .btn b{font-size:12px;font-weight:500;color:var(--dim)}
.quick .interrupt{background:#fff6f6;border-color:#f3d2d2;color:#b44848}
.quick .interrupt b{color:#c99090}
.quick .add{background:#f2f8f2;border-color:#d4e8d8;color:#218563}
.quick .add b{color:#7ba88e}

/* ---------- 周条 ---------- */
.days{display:flex;gap:5px;overflow-x:auto;padding:4px 0 10px}
.day{flex:1;min-width:46px;border:1px solid var(--edge);border-radius:11px;background:#fff;padding:8px 2px;text-align:center;color:var(--dim)}
.day small,.day strong{display:block}
.day strong{color:var(--ink);font-size:15px}
.day small{font-size:11px}
.day.sel{background:#e7f0ff;border-color:var(--blue)}
.day.today-badge strong{color:var(--blue)}

/* ---------- 底部导航 ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--edge);
  display:flex;padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;font-size:11px;color:var(--dim);border-radius:10px}
.tabbar button .ic{font-size:20px;line-height:1}
.tabbar button.active{color:var(--blue);font-weight:700}

/* ---------- 表单 ---------- */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stack{display:flex;flex-direction:column;gap:8px}
.footer{font-size:12px;color:var(--dim);text-align:center;padding:14px 0 6px;line-height:1.7}

/* ---------- 弹层 ---------- */
.mask{position:fixed;inset:0;background:rgba(18,28,40,.5);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.mask .sheet{background:#fff;width:100%;max-width:560px;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:86vh;overflow-y:auto;animation:slide .22s ease}
@keyframes slide{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
.sheet h3{margin:0 0 12px;font-size:17px}
.durrow{display:flex;gap:8px;flex-wrap:wrap}
.durrow .dur{flex:1;min-width:72px;border:1px solid var(--edge);border-radius:12px;padding:12px 4px;text-align:center;font-weight:700;background:#fff}
.durrow .dur.sel{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}
.planrow{display:flex;justify-content:space-between;gap:10px;align-items:center;border-bottom:1px dashed var(--edge);padding:9px 0;font-size:13px}
.planrow .to{color:var(--blue);font-weight:600;white-space:nowrap}
.planrow .toback{color:var(--orange);font-weight:600;white-space:nowrap}
.sheet-actions{display:flex;gap:10px;margin-top:14px}
.sheet-actions .btn{flex:1}

/* ---------- 统计 ---------- */
.metric{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.metric .m{background:#fff;border:1px solid var(--edge);border-radius:14px;padding:13px;box-shadow:var(--shadow)}
.metric .m strong{font-size:24px;display:block}
.metric .m span{font-size:12px;color:var(--dim)}
.barline{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:13px}
.barline .bl{width:110px;color:var(--dim);flex:none}
.barline .track{flex:1;background:#eef2f6;border-radius:8px;height:14px;overflow:hidden}
.barline .fill{height:100%;border-radius:8px;background:var(--blue);min-width:2px}
.barline .num{width:74px;text-align:right;font-variant-numeric:tabular-nums;flex:none}

/* ---------- 登录/初始化 ---------- */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth .panel{background:#fff;border:1px solid var(--edge);border-radius:22px;padding:26px 22px;width:100%;max-width:380px;box-shadow:var(--shadow)}
.auth .logo{width:64px;height:64px;border-radius:16px;margin:0 auto 14px;display:block}
.auth h1{font-size:21px;margin:0 0 4px;text-align:center}
.auth .tag{text-align:center;color:var(--dim);font-size:13px;margin-bottom:16px}
.auth .err{color:var(--red);font-size:13px;min-height:18px;margin:6px 2px}
.auth .btn{width:100%;margin-top:6px}

@media(min-width:600px){
  .mask{align-items:center}
  .mask .sheet{border-radius:20px;padding-bottom:18px}
}