:root{
  --bg:#f5f7fa; --card:#ffffff; --ink:#1f2937; --muted:#6b7280;
  --line:#e5e7eb; --brand:#2563eb; --brand-d:#1d4ed8;
  --red:#e53935; --orange:#fb8c00; --amber:#f9a825; --gray:#9e9e9e;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5;
}
.hidden{display:none !important;}
.boot{padding:40px; text-align:center; color:var(--muted);}

/* ---- 登录 ---- */
.login{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.login-card{
  background:var(--card); border-radius:16px; padding:32px 24px; width:100%; max-width:360px;
  box-shadow:0 8px 30px rgba(0,0,0,.08); text-align:center;
}
.login-logo{font-size:40px; margin-bottom:8px;}
.login-card h1{font-size:22px; margin:0 0 8px;}
.login-card .sub{color:var(--muted); font-size:13px; margin:0 0 24px; line-height:1.6;}
.btn-wechat,.btn-email{
  display:block; width:100%; padding:13px; border:none; border-radius:10px; font-size:15px;
  cursor:pointer; margin-bottom:12px; font-weight:600;
}
.btn-wechat{background:#07c160; color:#fff;}
.btn-wechat:active{background:#06ad56;}
.btn-email{background:#fff; color:var(--brand); border:1px solid var(--brand);}
.btn-email:active{background:#eef3ff;}
.login-msg{font-size:13px; color:var(--muted); margin-top:8px; min-height:18px; line-height:1.5;}

/* ---- 顶栏 ---- */
.topbar{
  position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; padding:10px 14px; flex-wrap:wrap;
}
.brand{font-weight:700; font-size:16px; white-space:nowrap;}
.overview{display:flex; gap:14px; font-size:13px; color:var(--muted); flex:1; min-width:160px;}
.overview b{color:var(--ink); font-size:15px;}
.top-actions{display:flex; align-items:center; gap:10px;}
.bell-wrap{position:relative;}
.bell{position:relative; background:#f1f5f9; border:none; border-radius:50%; width:42px; height:42px; font-size:20px; cursor:pointer;}
.bell-dot{
  position:absolute; top:-4px; right:-4px; background:var(--red); color:#fff; font-size:11px;
  min-width:18px; height:18px; line-height:18px; border-radius:9px; padding:0 4px; text-align:center; font-weight:700;
}
.btn-logout{background:#fff; border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:13px; color:var(--muted); cursor:pointer;}
.btn-logout:active{background:#f1f5f9;}

/* ---- 提醒面板 ---- */
.reminder-panel{
  position:absolute; right:0; top:50px; width:280px; max-width:84vw; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.12); padding:10px; z-index:30;
}
.rp-title{font-weight:700; font-size:14px; margin-bottom:8px;}
.rp-item{padding:8px; border-radius:8px; background:#fff5f5; margin-bottom:6px; font-size:13px;}
.rp-ch{display:inline-block; color:var(--red); font-weight:600; margin-right:6px;}
.rp-empty{color:var(--muted); font-size:13px; text-align:center; padding:12px;}
.reminder-panel:empty{display:none;}

/* ---- 快速添加 ---- */
.quickadd{display:flex; gap:8px; padding:14px 14px 6px; flex-wrap:wrap;}
.qa-board,.qa-channel{flex:0 0 auto; min-width:120px; padding:11px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:14px;}
.qa-content{flex:1; min-width:180px; padding:11px; border:1px solid var(--line); border-radius:10px; font-size:14px;}

/* ---- 筛选 ---- */
.filters{display:flex; gap:8px; padding:6px 14px 12px;}
.filter-btn{
  padding:8px 16px; border:1px solid var(--line); background:#fff; border-radius:20px; font-size:13px; color:var(--muted); cursor:pointer;
}
.filter-btn.active{background:var(--brand); color:#fff; border-color:var(--brand);}

/* ---- 列表 ---- */
.list{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; padding:0 14px 24px;}
.card{
  background:var(--card); border:1px solid var(--line); border-left:5px solid var(--gray); border-radius:12px;
  padding:12px; box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.card.prio-urgent_important{border-left-color:var(--red);}
.card.prio-important{border-left-color:var(--orange);}
.card.prio-urgent{border-left-color:var(--amber);}
.card.prio-normal{border-left-color:var(--gray);}
.card.overdue{background:#fffafa;}
.card-top{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.card-top .done{width:20px; height:20px; flex:0 0 auto; accent-color:var(--brand);}
.badge{font-size:12px; padding:2px 8px; border-radius:6px; white-space:nowrap;}
.badge.board{background:#eef2ff; color:#4338ca;}
.badge.channel{background:#f1f5f9; color:#334155;}
.del{margin-left:auto; background:none; border:none; font-size:16px; cursor:pointer; color:var(--muted); padding:4px 6px; border-radius:8px;}
.del:active{background:#fee2e2; color:var(--red);}
.content{
  width:100%; border:none; resize:vertical; font-size:15px; color:var(--ink); min-height:42px;
  background:transparent; font-family:inherit; line-height:1.5; padding:2px 0;
}
.content:focus{outline:none;}
.meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.field{display:flex; flex-direction:column; font-size:11px; color:var(--muted); gap:3px; flex:1; min-width:90px;}
.field input,.field select{
  font-size:13px; padding:7px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); font-family:inherit;
}
.overdue-tag{
  display:inline-block; margin-top:8px; background:var(--red); color:#fff; font-size:12px; font-weight:700;
  padding:3px 10px; border-radius:6px;
}
.done-section{padding:0 14px 30px;}
.done-section h2{font-size:15px; color:var(--muted); margin:6px 0 12px;}
.done-section .card{opacity:.72;}
.done-section .content{text-decoration:line-through;}

/* ---- Toast ---- */
.toasts{position:fixed; top:64px; right:14px; z-index:50; display:flex; flex-direction:column; gap:10px; max-width:90vw;}
.toast{
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:10px;
  padding:12px 14px; font-size:14px; box-shadow:0 8px 24px rgba(0,0,0,.14); max-width:340px;
  animation:slidein .25s ease; line-height:1.5;
}
.toast.warn{border-left-color:var(--orange);}
.toast.remind{border-left-color:var(--red);}
.toast .t-sub{display:block; color:var(--muted); font-size:12px; margin-top:4px;}
.toast.fade{opacity:0; transition:opacity .4s ease;}
@keyframes slidein{from{transform:translateX(20px);opacity:0;}to{transform:translateX(0);opacity:1;}}

@media (max-width:560px){
  .list{grid-template-columns:1fr;}
  .brand{font-size:15px;}
  .overview{order:3; width:100%;}
  .topbar{gap:8px;}
}