:root{
  --ind:#4F46E5; --ind-d:#3730A3; --ind-l:#E0E7FF; --ind-ll:#EEF2FF;
  --tx:#1E1B4B; --tx2:#64748B; --tx3:#94A3B8; --bd:#E2E7F3; --bd-l:#EEF1F9;
  --suc:#05B969; --sucb:#ECFDF5; --wn:#B45309; --wnb:#FFFBEB; --dng:#DC2626; --dngb:#FEF2F2;
  --bg:#EEF2FF; --surface:#fff; --radius:14px;
  --safe-top:env(safe-area-inset-top); --safe-bot:env(safe-area-inset-bottom);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--tx);background:var(--bg);overscroll-behavior-y:none;-webkit-font-smoothing:antialiased;}
#app{min-height:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}

/* boot */
.boot{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--ind);color:#fff;}
.boot-logo{width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;}
.boot-text{font-size:16px;}

/* login */
.login{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:32px 24px calc(32px + var(--safe-bot));background:var(--ind);}
.login-brand{text-align:center;color:#fff;margin-bottom:32px;}
.login-brand .lo{width:60px;height:60px;border-radius:16px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;margin:0 auto 12px;}
.login-brand h1{font-size:20px;margin:0;font-weight:600;}
.login-brand p{font-size:13px;opacity:.85;margin:6px 0 0;}
.login-card{background:#fff;border-radius:18px;padding:22px 18px;}
.fld{margin-bottom:14px;}
.fld label{display:block;font-size:13px;color:var(--tx2);margin-bottom:6px;}
.fld input{width:100%;height:46px;border:1px solid var(--bd);border-radius:12px;padding:0 14px;font-size:15px;background:#F7F8FE;outline:none;}
.fld input:focus{border-color:var(--ind);background:#fff;}
.btn-primary{width:100%;height:48px;border:none;border-radius:12px;background:var(--ind);color:#fff;font-size:16px;font-weight:600;}
.btn-primary:active{opacity:.9;}
.login-err{color:var(--dng);font-size:13px;margin-bottom:12px;min-height:18px;text-align:center;}

/* app shell */
.shell{min-height:100vh;padding-bottom:calc(64px + var(--safe-bot));}
.tab-content{padding-top:var(--safe-top);}
.tabbar{position:fixed;left:0;right:0;bottom:0;height:calc(64px + var(--safe-bot));padding-bottom:var(--safe-bot);background:rgba(255,255,255,.97);border-top:1px solid var(--bd);display:flex;z-index:50;backdrop-filter:blur(8px);}
.tabi{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;color:var(--tx3);position:relative;}
.tabi svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.tabi.on{color:var(--ind);font-weight:500;}
.tabi .oc{position:absolute;top:-22px;width:48px;height:48px;border-radius:50%;background:var(--ind);display:flex;align-items:center;justify-content:center;border:4px solid var(--bg);}
.tabi .oc svg{width:24px;height:24px;stroke:#fff;}
.tabi .oclb{position:absolute;bottom:9px;color:var(--ind);font-weight:500;}

/* generic */
.sec{padding:0 16px;}
.card{background:var(--surface);border:1px solid var(--bd);border-radius:var(--radius);}
.h2{display:flex;justify-content:space-between;align-items:center;margin:18px 0 10px;}
.h2 .t{font-size:16px;font-weight:600;display:flex;align-items:center;gap:7px;}
.h2 .cnt{font-size:11px;font-weight:500;color:var(--ind);background:var(--ind-l);padding:2px 8px;border-radius:20px;}
.h2 .more{font-size:12px;color:var(--ind);}
.empty{font-size:13px;color:var(--tx3);text-align:center;padding:22px 0;}
.skel{height:14px;background:linear-gradient(90deg,#eef1f9,#f6f7fc,#eef1f9);border-radius:6px;margin:10px 0;animation:sk 1.2s infinite;}
@keyframes sk{0%{opacity:.6}50%{opacity:1}100%{opacity:.6}}

/* header greeting */
.hd{display:flex;align-items:center;gap:11px;padding:calc(8px + var(--safe-top)) 16px 4px;}
.hd .av{width:42px;height:42px;border-radius:50%;background:var(--ind);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;}
.hd .nm{font-size:16px;font-weight:600;}
.hd .sub{font-size:12px;color:var(--tx2);margin-top:1px;}
.hd .bell{margin-left:auto;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;position:relative;}
.hd .bell svg{width:19px;height:19px;stroke:var(--tx);fill:none;stroke-width:2;}

/* todo */
.todo{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border-bottom:1px solid var(--bd-l);}
.todo:last-child{border-bottom:none;}
.todo .ck{width:20px;height:20px;border-radius:50%;border:2px solid #CBD5E1;flex-shrink:0;margin-top:1px;}
.todo .tt{font-size:14px;font-weight:500;}
.todo .td{font-size:11.5px;color:var(--tx2);margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.pin{font-size:10.5px;font-weight:500;padding:2px 7px;border-radius:6px;}

/* timeline */
.tl{position:relative;padding:8px 16px 4px;}
.ti2{position:relative;padding:10px 0 10px 26px;}
.ti2::before{content:'';position:absolute;left:6px;top:20px;bottom:-2px;width:2px;background:var(--bd);}
.ti2.last::before{display:none;}
.ti2 .dot{position:absolute;left:0;top:14px;width:14px;height:14px;border-radius:50%;background:var(--suc);border:3px solid var(--suc);}
.ti2 .row{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.ti2 .ttl{font-size:13.5px;font-weight:500;color:#475569;}
.ti2 .dt2{font-size:11px;color:var(--tx3);flex-shrink:0;}
.ti2 .sub{font-size:11px;color:var(--tx3);margin-top:2px;}

/* placeholder */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;color:var(--tx3);gap:12px;padding:0 32px;text-align:center;}
.ph svg{width:48px;height:48px;stroke:#C7D2FE;fill:none;stroke-width:1.5;}
.ph .pt{font-size:15px;font-weight:600;color:var(--tx2);}
.ph .ps{font-size:13px;}


/* ===== APP-POLISH ===== */
/* 触摸反馈：所有可点元素按下回弹 */
.card,.tabi,.todo,.bell,.chip,.mrow,.seg div,.qc,.mkbtn,.sendb,.btn-primary,.scard,.mkcard,.ic{
  transition:transform .14s cubic-bezier(.34,1.4,.5,1),opacity .14s,box-shadow .22s;
  -webkit-user-select:none;user-select:none;
}
.tabi:active,.todo:active,.mrow:active,.chip:active,.qc:active,.seg div:active,.ic:active{transform:scale(.95);opacity:.7;}
.scard:active,.mkcard:active,.bell:active{transform:scale(.985);opacity:.92;}
.btn-primary:active,.sendb:active,.mkbtn:active{transform:scale(.95);opacity:.9;}

/* 卡片柔和浮起阴影 */
.card{box-shadow:0 1px 2px rgba(30,27,75,.04),0 6px 16px rgba(30,27,75,.045);border-color:var(--bd-l);}

/* 顶部 header 吸顶 + 毛玻璃 */
.tab-content{padding-top:0;}
.hd,.appbar{position:sticky;top:0;z-index:30;background:rgba(238,242,255,.72);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);}

/* Tab 切换进场动画 */
.tab-content.enter{animation:tabIn .28s cubic-bezier(.22,.61,.36,1);}
@keyframes tabIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* 底部导航：激活图标弹放 + 中央按钮发光 */
.tabi svg{transition:transform .2s cubic-bezier(.34,1.56,.64,1);}
.tabi.on svg{transform:scale(1.14) translateY(-1px);}
.tabi .oc{box-shadow:0 6px 18px rgba(79,70,229,.42);transition:transform .18s;}
.tabi:active .oc{transform:scale(.9);}

/* 骨架：流动微光 */
.skel{background:linear-gradient(100deg,#eaeefb 28%,#f6f8ff 48%,#eaeefb 68%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* 时间轴节点：完成态轻微光环 */
.ti2 .dot{box-shadow:0 0 0 3px rgba(5,185,105,.12);}