:root{
  --bg:#f7f5f2; --card:#fff; --ink:#191512; --muted:#8b817b;
  --line:#e9e4dd; --brand:#ff4d18; --brand-2:#ff8a3d;
  --soft:#fff2ec; --shadow:0 1px 2px rgba(25,21,18,.05),0 8px 24px -12px rgba(25,21,18,.16);
  --r:16px;
  --c-dianshang:#f97316; --c-waimai:#ef4444; --c-yinhang:#2563eb;
  --c-jiami:#7c3aed; --c-mianfeiyun:#16a34a; --c-aijifen:#0891b2; --c-aifandai:#6b7280;
}
*{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.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  overflow-x:hidden;
}
.wrap{width:100%;max-width:760px;margin:0 auto;padding:0 16px}

/* ---------- 头部 ---------- */
.hero{
  background:
    radial-gradient(120% 100% at 85% -20%,#ffd8c4 0%,transparent 55%),
    radial-gradient(90% 80% at 0% 0%,#ffe9dd 0%,transparent 50%),
    linear-gradient(180deg,#fff9f5 0%,var(--bg) 100%);
  padding:28px 0 18px; border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--brand)}
.logo{font-size:20px;filter:saturate(1.1)}
.hero h1{
  margin:14px 0 6px; font-size:30px; line-height:1.22; letter-spacing:-.02em;
  font-weight:800;
}
.hero h1::after{content:"";display:block;width:44px;height:4px;border-radius:4px;margin-top:12px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.sub{margin:10px 0 0;color:var(--muted);font-size:13px}
.sub b{color:var(--ink)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:10px 8px;text-align:center;box-shadow:var(--shadow);
}
.stat .n{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .l{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.stat.hot .n{color:var(--brand)}

/* ---------- 分类 ---------- */
.cats{
  display:flex;gap:8px;overflow-x:auto;padding:16px 0 12px;margin:0 -16px;
  padding-left:16px;padding-right:16px;scrollbar-width:none;
}
.cats::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;
  cursor:pointer;transition:.15s;white-space:nowrap;
}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.chip .cnt{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.on .cnt{color:rgba(255,255,255,.6)}
.chip.on .dot{background:currentColor}
.chip:active{transform:scale(.96)}

/* ---------- 工具条 ---------- */
.toolbar{display:flex;gap:8px;margin-bottom:14px}
.search{
  flex:1;display:flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:0 12px;height:44px;
}
.search svg{width:17px;height:17px;fill:none;stroke:var(--muted);stroke-width:2;flex:0 0 auto}
.search input{
  flex:1;border:0;outline:0;background:transparent;font-size:14px;color:var(--ink);
  font-family:inherit;min-width:0;
}
.search input::placeholder{color:#b5ada7}
#sort{
  height:44px;border:1px solid var(--line);background:var(--card);border-radius:12px;
  padding:0 10px;font-size:13px;font-family:inherit;color:var(--ink);outline:0;
}

/* ---------- 卡片 ---------- */
.list{display:flex;flex-direction:column;gap:12px}
.card{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:16px;box-shadow:var(--shadow);
  border-left:4px solid var(--cat,var(--line));
  transition:.18s;
}
.card:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(25,21,18,.06),0 16px 32px -16px rgba(25,21,18,.22)}
.card.soon{border-color:#ffc9b8;border-left-color:var(--brand);background:linear-gradient(180deg,#fffaf7,#fff)}
.card.done{opacity:.72;filter:grayscale(.3)}
.card.done .title{text-decoration:line-through;color:#5f574f}

.top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;padding-right:78px}
.plat{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.01em}
.tag{
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;
  background:var(--cat-bg,#f2efeb);color:var(--cat,var(--muted));
}
.stamp{
  position:absolute;top:14px;right:12px;transform:rotate(8deg);
  font-size:11px;font-weight:800;color:var(--brand);
  border:1.5px solid var(--brand);border-radius:6px;padding:1px 7px;
  letter-spacing:.05em;background:#fff;
}
.stamp.gray{color:var(--muted);border-color:#cfc7c0}

.title{font-size:17px;font-weight:700;line-height:1.45;margin:0 0 10px;padding-right:60px;letter-spacing:-.01em}

.valrow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.val{font-size:15px;font-weight:800;color:var(--brand)}
.val-cny{font-size:12px;color:var(--muted)}

.meta{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.meta .dl{color:var(--ink);font-weight:600}
.meta .dl.urgent{color:var(--brand)}
.left-badge{
  font-size:11px;font-weight:700;padding:1px 7px;border-radius:5px;
  background:#f2efeb;color:var(--muted);font-variant-numeric:tabular-nums;
}
.left-badge.urgent{background:var(--soft);color:var(--brand)}

.risk{
  margin-top:10px;padding:9px 11px;border-radius:10px;background:#fff6f4;
  border:1px solid #ffe0d8;color:#b23c17;font-size:12.5px;line-height:1.55;
}
.risk b{font-weight:800}

details{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
summary{
  cursor:pointer;font-size:13px;font-weight:700;color:var(--ink);
  list-style:none;display:flex;align-items:center;gap:6px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"展开步骤";font-weight:500;color:var(--muted);font-size:12px;margin-left:auto}
details[open] summary::after{content:"收起"}
ol.steps{margin:10px 0 0;padding-left:18px;font-size:13.5px;color:#4a423c;line-height:1.75}
ol.steps li{margin-bottom:5px}

.acts{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:38px;padding:0 16px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-size:13px;font-weight:700;
  text-decoration:none;cursor:pointer;font-family:inherit;transition:.15s;
}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.code{background:var(--soft);color:var(--brand);border-color:#ffd9c9;font-family:ui-monospace,Menlo,Consolas,monospace}
.btn.done-btn{background:#f2efeb;color:#6b625c;border-color:#ddd6cf}
.btn.done-btn.on{background:#e8f5ec;color:#16a34a;border-color:#c8e8d3}
.btn.ghost-btn{background:transparent;color:#6b625c;border-color:#ddd6cf}

/* ---------- 空状态 ---------- */
.empty{text-align:center;padding:56px 16px;color:var(--muted)}
.empty-ico{font-size:40px;margin-bottom:8px;opacity:.6}
.empty p{margin:0 0 6px;font-weight:700;color:var(--ink)}
.empty span{font-size:13px}

/* ---------- 页脚 ---------- */
.foot{text-align:center;padding:34px 0 44px;color:var(--muted);font-size:13px}
.foot .ghost{
  margin:10px 0 16px;height:38px;padding:0 18px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;
}
.foot .tiny{font-size:11.5px;line-height:1.7;opacity:.85}

/* ---------- 桌面 ---------- */
@media(min-width:760px){
  .hero{padding:44px 0 26px}
  .hero h1{font-size:38px}
  .stats{grid-template-columns:repeat(4,1fr);gap:12px}
  .stat .n{font-size:24px}
  .list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .title{padding-right:56px}
}
@media(max-width:390px){
  .hero h1{font-size:26px}
  .stat .n{font-size:18px}
  .title{font-size:16px;padding-right:52px}
}