* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #f7f8fa;
  color: #1d2129;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}
#app { min-height: 100vh; }

.page { padding: 12px; padding-bottom: 60px; }
.page-head { padding: 12px 4px 8px; }
.page-title { font-size: 18px; font-weight: 600; color: #1d2129; }
.page-sub { font-size: 12px; color: #86909c; margin-top: 2px; }

.card { background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.card-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; display:flex; align-items:center; justify-content:space-between; }
.muted { color: #86909c; font-size: 12px; }
.empty { text-align: center; color: #c9cdd4; padding: 40px 0; font-size: 13px; }

.grid-menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grid-item { background: #fff; border-radius: 12px; padding: 14px 4px; text-align: center; text-decoration: none; color: inherit; }
.grid-item:active { background: #f2f3f5; }
.grid-icon { font-size: 24px; margin-bottom: 6px; }
.grid-label { font-size: 12px; color: #4e5969; }

.tag { display:inline-block; font-size:11px; padding:1px 7px; border-radius:4px; line-height:1.6; }
.tag-blue { background:#e8f3ff; color:#165dff; }
.tag-green { background:#e8ffea; color:#00b42a; }
.tag-orange { background:#fff7e8; color:#ff7d00; }
.tag-gray { background:#f2f3f5; color:#86909c; }
.tag-red { background:#ffece8; color:#f53f3f; }

.kv { display:flex; padding:6px 0; border-bottom:1px solid #f7f8fa; }
.kv:last-child { border-bottom:0; }
.kv .k { color:#86909c; width:90px; flex-shrink:0; font-size:13px; }
.kv .v { flex:1; font-size:13px; word-break:break-all; }

.timeline { position: relative; padding-left: 20px; }
.timeline::before { content:''; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:#e5e6eb; }
.timeline-item { position:relative; padding-bottom:16px; }
.timeline-item::before { content:''; position:absolute; left:-20px; top:4px; width:10px; height:10px; border-radius:50%; background:#c9cdd4; border:2px solid #fff; }
.timeline-item.active::before { background:#165dff; }
.timeline-item.done::before { background:#00b42a; }
.timeline-title { font-size:13px; font-weight:500; }
.timeline-desc { font-size:12px; color:#86909c; margin-top:2px; }

.score-input { display:flex; align-items:center; gap:8px; }
.score-input input { width:80px; }

.btn-bar { display:flex; gap:8px; padding:8px 0; }
.bar-fixed { position:fixed; left:0; right:0; bottom:0; padding:10px 12px; background:#fff; border-top:1px solid #f0f1f5; z-index:10; }