:root { --bar:#4a90e2; --bar-done:#2fb344; --bar-project:#8e9aaf; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
body { display: flex; flex-direction: column; background: #f5f6f8; }
.topbar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: #fff; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; }
.brand { font-weight: 600; font-size: 16px; }
.picker { font-size: 13px; color: #4b5563; display: flex; align-items: center; gap: 6px; }
.picker select { padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; font-size: 13px; max-width: 280px; }
.filters { display: flex; align-items: center; gap: 6px; }
.filters select, .filters input { padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 12px; background: #fff; }
.filters input { width: 120px; }
.ghost-btn { padding: 4px 8px; border: 1px solid #d1d5db; background: #fff; border-radius: 6px; font-size: 12px; cursor: pointer; }
.meta { font-size: 12px; color: #6b7280; }
.spacer { flex: 1; }
.open-zentao { font-size: 13px; color: #2563eb; text-decoration: none; white-space: nowrap; }
.open-zentao:hover { text-decoration: underline; }
.legend { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #4b5563; }
.legend .dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 4px; }
.legend .dot.task { background: var(--bar); }
.legend .dot.project { background: var(--bar-project); }
.legend .dot.done { background: var(--bar-done); }
.legend .readonly { color: #9ca3af; }
.legend .editable { color: #2563eb; }
#gantt_here { flex: 1; min-height: 0; }
.toast { position: fixed; right: 16px; bottom: 16px; background: #111827; color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.show { opacity: .92; }
.gantt_task_progress { background: rgba(255,255,255,.35); }
.status-done { background: var(--bar-done) !important; }
.status-project { background: var(--bar-project) !important; }

/* 移动端（飞书手机端内嵌）适配 */
@media (max-width: 720px) {
  .topbar { gap: 8px; padding: 8px 10px; }
  .brand { font-size: 14px; }
  .filters { flex-wrap: wrap; }
  .filters input { width: 96px; }
  .legend .readonly, .legend .editable { display: none; }
  .meta { display: none; }
}