/* 项目管理 PM · 网站样式 */
:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --accent: #0ea5e9;
  --accent-dark: #0284c7;
  --accent-soft: #f0f9ff;
  --gold: #f59e0b;
  --gold-dark: #b45309;
  --gold-soft: #fffbeb;
  --danger: #ef4444;
  --ok: #10b981;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(15,23,42,.08), 0 4px 16px rgba(15,23,42,.06);

  /* 品牌扩展 token（设计体系） */
  --brand: #4f46e5;
  --brand-2: #6366f1;
  --brand-soft: #eef2ff;
  --brand-line: #c7d2fe;
  --text-2: #475569;
  --text-3: #94a3b8;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --border-soft: #eef2f7;
  --border-strong: #cbd5e1;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow-md: 0 4px 14px rgba(15,23,42,.08);
  --shadow-lg: 0 14px 40px rgba(15,23,42,.13);
  --shadow-brand: 0 8px 24px rgba(79,70,229,.22);
  --tr-fast: .15s ease;
  --tr-base: .25s cubic-bezier(.4,0,.2,1);
  --tr-spring: .4s cubic-bezier(.34,1.56,.64,1);
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14.5px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-hero: clamp(30px, 4.2vw, 44px);
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.6; font-size: 15px;
}
.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
a { color: var(--accent-dark); text-decoration: none; }
em { font-style: normal; color: var(--accent); }

/* 导航 */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; gap: 20px; height: 60px; }
.logo { font-size: 18px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 8px; }
.logo-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.nav-links { display: flex; gap: 18px; font-size: 14px; margin-left: 10px; }
.nav-links a { color: var(--muted); font-weight: 500; }
.nav-links a:hover { color: var(--text); }
.nav-user { font-size: 13.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nav-user .nav-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.nav-user .user-name { font-weight: 700; }

/* 按钮 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 10px; padding: 9px 18px; font-size: 14.5px; font-weight: 600; cursor: pointer; background: none; transition: all .15s; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-dark); }
.btn-ghost { background: #fff; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-dark); }
.btn-danger { background: #fff; color: var(--danger); border-color: #fecaca; }
.btn-danger:hover { background: #fef2f2; }
.btn-lg { padding: 13px 26px; font-size: 16px; border-radius: 12px; }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* 落地区 */
.hero { padding: 84px 0 76px; position: relative; overflow: hidden; background:
    radial-gradient(1100px 480px at 88% -12%, rgba(79,70,229,.10), transparent 60%),
    radial-gradient(900px 420px at -8% 112%, rgba(14,165,233,.10), transparent 60%),
    var(--bg); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.hero-copy { animation: hero-in .5s ease both; }
.hero-show { animation: hero-in .65s ease .12s both; perspective: 1200px; }
@keyframes hero-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--card); color: var(--accent-dark); border: 1px solid #bae6fd; border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-sm); }
.hbd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.hero h1 { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-top: 22px; }
.hero h1 em { background: linear-gradient(120deg, #4f46e5, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .sub { max-width: 560px; margin: 18px 0 30px; color: var(--muted); font-size: 16.5px; line-height: 1.75; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 28px; color: var(--muted); font-size: 13.5px; }
.hero-trust span { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }

/* 产品演示窗 */
.hwin { border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 24px 64px rgba(15,23,42,.14), 0 2px 8px rgba(15,23,42,.06); transform: rotateY(-6deg) rotateX(2deg); transition: transform var(--tr-spring); overflow: hidden; }
.hero-show:hover .hwin { transform: rotateY(0) rotateX(0); }
.hwin-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.hwin-d { width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; }
.hwin-d:nth-child(1) { background: #fca5a5; } .hwin-d:nth-child(2) { background: #fcd34d; } .hwin-d:nth-child(3) { background: #86efac; }
.hwin-url { margin-left: 10px; font-size: 12px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 3px 14px; flex: 1; max-width: 240px; }
.hwin-body { padding: 14px; background: var(--surface-2); }
.hwin-kb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hwin-col { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-width: 0; }
.hwin-col-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
.hwin-col-dot { width: 7px; height: 7px; border-radius: 50%; }
.hwin-card { background: #fafbfc; border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 8px; font-size: 11.5px; transition: transform var(--tr-fast), box-shadow var(--tr-fast); }
.hwin-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,.10); }
.hwin-card:last-child { margin-bottom: 0; }
.hwin-pri { display: inline-block; border-radius: 5px; padding: 1px 6px; font-size: 10px; font-weight: 700; margin-right: 5px; }
.hwin-pri.high { background: #fee2e2; color: #b91c1c; }
.hwin-pri.medium { background: #fef3c7; color: #92400e; }
.hwin-pri.low { background: #e0f2fe; color: #0369a1; }
.hwin-t { font-weight: 600; color: #1e293b; }
.hwin-pin { float: right; color: #94a3b8; font-size: 11px; font-weight: 400; }
.hwin-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; color: #94a3b8; font-size: 10.5px; }
.hwin-av { display: inline-block; width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #22d3ee); margin-right: 4px; vertical-align: middle; }
.hwin-tag { color: var(--gold-dark); background: var(--gold-soft); border: 1px solid #fde68a; border-radius: 6px; padding: 0 5px; font-size: 10px; }

/* 周计划提示 */
.week-help { margin-top: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 10px; font-size: 13px; color: #334155; line-height: 1.7; }

/* 区块 */
.section { padding: 56px 0; }
.section-head { text-align: center; margin-bottom: 32px; }
.section-head h2 { font-size: 26px; font-weight: 800; }
.section-head p { color: var(--muted); margin-top: 8px; }

/* 工作台 */
.workspace { padding: 28px 0 56px; }
.ws-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.ws-head h2 { font-size: 22px; font-weight: 800; }
.ws-actions { display: flex; gap: 10px; }
.org-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.org-chip { border: 1.5px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 16px; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.org-chip.active { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); font-weight: 700; }
.org-chip .tag { font-size: 11px; background: #e2e8f0; border-radius: 6px; padding: 1px 7px; }
.org-chip .tag.paid { background: #fef3c7; color: #92400e; }
.org-chip.dragging { opacity: .45; border-style: dashed; border-color: var(--accent); }

.org-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.plan-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--accent-soft); border: 1px solid #bae6fd; border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; font-size: 14px; }
.plan-banner .plan-name { font-weight: 800; color: var(--accent-dark); }
.plan-banner .warn { color: var(--gold-dark); background: var(--gold-soft); border-radius: 8px; padding: 2px 10px; font-size: 13px; }
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
@media (max-width: 760px) { .panel-grid { grid-template-columns: 1fr; } }
.panel-card { border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.panel-card h3 { font-size: 15px; margin-bottom: 8px; }
.muted { color: var(--muted); font-size: 13px; }
.invite-row { display: flex; gap: 8px; margin-top: 10px; }
.invite-row input { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 15px; letter-spacing: 2px; font-weight: 700; background: var(--bg); }
.member-list { display: flex; flex-wrap: wrap; gap: 8px; }
.member-item { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 13px; }
.member-item.owner { border-color: #fcd34d; background: var(--gold-soft); color: var(--gold-dark); }
.member-item .m-name { flex-shrink: 0; }
.member-item .m-act { margin-left: auto; display: flex; gap: 6px; }
.btn-xs { font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: #fef2f2; border-color: var(--danger); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.panel-head h3 { font-size: 17px; font-weight: 800; }

.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.project-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--card); cursor: pointer; transition: all .15s; position: relative; }
.project-card[draggable="true"] { cursor: grab; }
.project-card[draggable="true"]:active { cursor: grabbing; }
.project-card.dragging { opacity: .45; border-style: dashed; border-color: var(--accent); transform: scale(.98); }
.project-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); }
.project-card .p-name { font-weight: 700; font-size: 15.5px; margin-bottom: 4px; }
.project-card .p-desc { color: var(--muted); font-size: 13px; min-height: 20px; margin-bottom: 10px; }
.project-card .p-progress { height: 6px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin-bottom: 8px; display: flex; }
.project-card .p-progress i { display: block; height: 100%; background: var(--accent); }
.project-card .p-progress.stacked i { border-radius: 0; }
.p-legend { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 10px; margin: 6px 0 8px; font-size: 11.5px; color: var(--muted); }
.p-legend .p-lg { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.p-legend .p-lg i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.team-fold { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 4px 0 12px; padding: 6px 12px; border-radius: 8px; background: #f1f5f9; font-size: 13px; color: var(--muted); user-select: none; }
.team-fold:hover { background: #e2e8f0; }
.team-fold-arrow { font-size: 12px; }
.project-card .p-meta { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.project-card .p-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }

/* 项目详情 */
.project-detail { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.pd-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pd-head h3 { flex: 1; font-size: 19px; font-weight: 800; }
.pd-actions { display: flex; gap: 8px; }
.task-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tf { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 14px; font-size: 13px; cursor: pointer; color: var(--muted); }
.tf.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* 任务类型小标签 */
.tag-type { border-radius: 5px; padding: 1px 7px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.tag-type.typ-feature { background: #e0e7ff; color: #4338ca; }
.tag-type.typ-optimize { background: #fef3c7; color: #92400e; }
.tag-type.typ-bug { background: #fee2e2; color: #b91c1c; }
/* 类型/需求 chips 选中色 */
.tl-chip.typ-feature.active { background: #4338ca; border-color: #4338ca; color: #fff; }
.tl-chip.typ-optimize.active { background: #d97706; border-color: #d97706; color: #fff; }
.tl-chip.typ-bug.active { background: #dc2626; border-color: #dc2626; color: #fff; }
.tl-chip.scp-in.active { background: #059669; border-color: #059669; color: #fff; }
.tl-chip.scp-out.active { background: #dc2626; border-color: #dc2626; color: #fff; }
/* 从任务中添加：多选行 */
.wp-row { display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.wp-row:hover { background: #f8fafc; }
.wp-row input { accent-color: #4f46e5; }
.wp-status { flex-shrink: 0; border-radius: 10px; padding: 2px 10px; font-size: 11px; font-weight: 600; white-space: nowrap; }

/* 统计页 */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 14px; }
.stats-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.stats-load { margin-top: 0; }
.stats-title { font-size: 13.5px; font-weight: 600; color: #1e293b; margin-bottom: 8px; }
.stats-chart { width: 100%; height: 320px; }
.stats-load .stats-chart { height: 380px; }
.tag-due { color: var(--muted); white-space: nowrap; }
.tag-due.overdue { color: var(--danger); font-weight: 700; }
.tag-due.today { color: var(--gold-dark); font-weight: 700; }
.task-done .t-title { text-decoration: line-through; color: var(--muted); }

/* 定价 */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.price-card { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 24px; position: relative; display: flex; flex-direction: column; gap: 12px; }
.price-card.hot { border-color: var(--gold); box-shadow: 0 4px 20px rgba(245,158,11,.15); }
.plan-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #fff; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 12px; white-space: nowrap; }
.price-card h3 { font-size: 17px; font-weight: 800; }
.price .num { font-size: 34px; font-weight: 800; }
.price .per { color: var(--muted); font-size: 14px; }
.bill-note { color: var(--muted); font-size: 13px; margin-top: -6px; }
.price-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.price-card li::before { content: '✓ '; color: var(--ok); font-weight: 700; }
.price-card li.no { color: var(--muted); }
.price-card li.no::before { content: '✕ '; color: #cbd5e1; }
.price-card .btn { margin-top: auto; }
.pricing-note { text-align: center; color: var(--muted); font-size: 13px; margin-top: 22px; }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; }
.faq summary { font-weight: 600; cursor: pointer; }
.faq p { color: var(--muted); font-size: 14px; margin-top: 8px; }

/* 页脚 */
.footer { border-top: 1px solid var(--line); padding: 24px 0; color: var(--muted); font-size: 13px; }
.footer-inner { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* 弹窗 */
.modal-mask { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal { background: #fff; border-radius: 16px; padding: 28px; max-width: 420px; width: 100%; position: relative; max-height: 90vh; overflow-y: auto; }
.modal.modal-wide { max-width: 1120px; }
.modal-close { position: absolute; top: 12px; right: 12px; border: none; background: var(--bg); width: 30px; height: 30px; border-radius: 50%; font-size: 16px; cursor: pointer; color: var(--muted); }
.modal h3 { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.modal-sub { color: var(--muted); font-size: 13.5px; margin-bottom: 16px; }
.modal-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; padding: 0; font-size: 13.5px; color: var(--muted); }
.pair-qr-box { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 16px; text-align: center; }
.qr-wrap { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.qr-wrap img { width: 200px; height: 200px; border-radius: 8px; }
.qr-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pair-status { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.hidden { display: none !important; }
.pair-status.ok { color: var(--ok); font-weight: 700; }
.pair-status.err { color: var(--danger); }
.pro-done { text-align: center; padding: 20px 0 8px; }
.pro-done .big { font-size: 44px; }
.pro-done h4 { font-size: 20px; margin: 10px 0 6px; }
.pro-done p { color: var(--muted); font-size: 14px; margin-bottom: 18px; }

/* 表单 */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font-size: 14.5px; font-family: inherit; background: #fff; }
.form-group textarea { resize: vertical; min-height: 56px; line-height: 1.5; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14,165,233,.12); }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid #eef2f7; position: sticky; bottom: -28px; background: #fff; padding-bottom: 6px; z-index: 2; }
.form-actions.has-left { justify-content: flex-start; }
.form-actions.has-left [data-cancel] { margin-left: auto; }
.form-row { display: flex; gap: 10px; }
.form-row .form-group { flex: 1; }
/* 宽弹窗三列短字段 */
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.form-row-3 .form-group { min-width: 0; }
textarea { resize: vertical; min-height: 74px; }
/* 指派多选 */
.assignee-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; }
.tpl-hint { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.7; background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.assignee-check { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.assignee-check input { width: auto; margin: 0; cursor: pointer; }
/* 图片大图预览浮层（任务弹窗之上） */
.img-viewer-mask { position: fixed; inset: 0; background: rgba(8,12,20,.8); display: none; align-items: center; justify-content: center; z-index: 300; cursor: zoom-out; padding: 24px; }
.img-viewer-mask img { max-width: 94vw; max-height: 88vh; border-radius: 10px; box-shadow: 0 12px 48px rgba(0,0,0,.5); cursor: default; }
.img-viewer-close { position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 20px; cursor: pointer; }
.img-viewer-close:hover { background: rgba(255,255,255,.3); }

/* Toast */
.toast-wrap { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: #0f172a; color: #fff; border-radius: 999px; padding: 9px 18px; font-size: 13.5px; box-shadow: 0 4px 20px rgba(0,0,0,.2); animation: toast-in .2s ease; }
.toast.err { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.hidden { display: none !important; }
.empty-tip { color: var(--muted); font-size: 13.5px; text-align: center; padding: 24px 0; }

/* ========== 站内通知（铃铛 + 面板） ========== */
.nav-bell-wrap { position: relative; margin-left: auto; margin-right: 2px; }
.nav-bell { position: relative; border: 1px solid var(--line); background: #fff; border-radius: 999px; width: 34px; height: 34px; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.nav-bell:hover { border-color: var(--accent); }
.bell-dot { position: absolute; top: -3px; right: -3px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; line-height: 16px; border-radius: 999px; padding: 0 4px; border: 2px solid #fff; }
.notify-panel { position: absolute; top: 42px; right: 0; width: 340px; max-width: 86vw; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(15,23,42,.16); z-index: 60; overflow: hidden; }
.np-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 13.5px; }
.np-all { border: 0; background: none; color: var(--accent); font-size: 12.5px; cursor: pointer; }
.np-body { max-height: 380px; overflow-y: auto; }
.notify-item { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #f1f5f9; cursor: pointer; align-items: flex-start; }
.notify-item:hover { background: #f8fafc; }
.notify-item.unread { background: #eff6ff; }
.notify-item .n-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0; }
.notify-item .n-main { flex: 1; min-width: 0; }
.notify-item .n-title { font-size: 13.5px; font-weight: 600; word-break: break-all; }
.notify-item .n-body { font-size: 12.5px; color: var(--muted); margin-top: 2px; word-break: break-all; }
.notify-item .n-time { font-size: 11.5px; color: #94a3b8; margin-top: 3px; }
.np-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 28px 0; }
/* 通知分类筛选（5.7） */
.np-types { display: flex; gap: 6px; padding: 8px 14px 6px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.np-types button { border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 12px; padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.np-types button:hover { border-color: var(--accent); color: var(--accent); }
.np-types button.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* ========== 任务评论 ========== */
.comment-section { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 12px; }
.comment-section h4 { font-size: 13.5px; margin-bottom: 8px; color: var(--muted); }
.comment-list { max-height: 220px; overflow-y: auto; margin-bottom: 10px; }
.comment-item { display: flex; gap: 8px; margin-bottom: 8px; font-size: 13px; position: relative; align-items: flex-start; padding-right: 64px; }
.comment-item.comment-reply { padding-left: 22px; margin-left: 8px; border-left: 2px solid var(--line); }
.comment-item .c-name { font-weight: 700; color: #475569; white-space: nowrap; }
.comment-item .c-at { color: #94a3b8; font-size: 12px; }
.comment-item .c-body { word-break: break-all; line-height: 1.5; }
.comment-item .c-time { color: #94a3b8; font-size: 11.5px; white-space: nowrap; }
.comment-item .c-ops { position: absolute; right: 0; top: 0; display: none; white-space: nowrap; background: #fff; border-radius: 6px; padding: 0 2px; }
.comment-item:hover .c-ops { display: flex; }
.comment-item .c-op { background: none; border: none; color: var(--accent); font-size: 12px; cursor: pointer; padding: 0 3px; }
.comment-item .c-op-del { color: var(--danger); }
/* ========== 任务截图 ========== */
.task-imgs-block { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.task-imgs-block > label { font-size: 13px; color: var(--muted); flex-shrink: 0; }
.task-imgs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; min-height: 30px; }
.task-imgs .np-empty { margin: 0; font-size: 12px; }
.img-hint { font-size: 11px; font-weight: normal; color: var(--muted); }
.task-img-thumb { position: relative; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--line); }
.task-img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.task-img-del { position: absolute; top: 1px; right: 1px; width: 16px; height: 16px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; }
.t-img-item { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.t-img-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); cursor: zoom-in; }
.t-img-del { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: none; background: var(--danger); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; }
.task-img-ops { flex-shrink: 0; margin-top: 0; }
.t-thumbs { display: flex; gap: 4px; margin-top: 6px; }
.t-thumbs img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.t-thumbs .t-more { font-size: 11px; color: var(--muted); line-height: 34px; padding-left: 2px; }
.t-assign { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.t-assignee { font-size: 11px; color: var(--muted); background: #f1f5f9; border-radius: 10px; padding: 2px 8px; }
.comment-input-row { display: flex; gap: 8px; }
.comment-input-row input { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; font-family: inherit; }
.comment-input-row input:focus { outline: none; border-color: var(--accent); }

/* 任务时间信息（提出/开始/完成） */
.task-times { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 12px; padding: 8px 10px; background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; }
.task-times span { font-size: 12px; color: var(--muted); }

/* ========== 项目详情页签 ========== */
.pv-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--line); padding-bottom: 0; flex-wrap: wrap; }
.pv-tab { background: none; border: none; padding: 8px 16px; font-size: 14px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; }
.pv-tab:hover { color: var(--accent); }
.pv-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.pv-tab.drag-over { color: #dc2626; border-bottom-color: #dc2626; background: #fef2f2; border-radius: 8px 8px 0 0; }
.pv-view { box-sizing: border-box; }

/* ========== 周计划视图 ========== */
.week-loading, .week-empty { padding: 40px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.week-empty-title { font-size: 16px; color: var(--text); font-weight: 600; margin-bottom: 14px; }
.week-empty .btn { margin: 4px auto; }
.week-empty-tip { margin-top: 14px; font-size: 12px; color: #94a3b8; }
.week-strip { display: flex; gap: 10px; align-items: stretch; box-sizing: border-box; }
.week-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-sizing: border-box; padding: 12px; overflow: hidden; position: relative; }
.week-card.w-side { flex: 0 1 12.5%; min-width: 0; opacity: .82; }
.week-card.w-mid { flex: 1 1 75%; min-width: 0; box-shadow: 0 8px 24px rgba(79, 70, 229, .12); border-color: #c7d2fe; z-index: 2; }
/* 周卡片内容：与中间等宽排版，窄卡超出部分向右渐隐消失 */
.week-card .w-inner { box-sizing: border-box; }
.week-card.w-mid .w-inner { width: 100%; }
.week-card.w-side .w-inner { width: 480px; }
.week-card.w-side::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 64px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.94) 100%);
  pointer-events: none; z-index: 3;
}
.week-card.w-ghost { background: #f8fafc; border-style: dashed; }
.week-card.w-ghost .w-hint { color: var(--muted); font-size: 12.5px; line-height: 1.7; padding: 8px 0; }
.w-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.w-label { font-weight: 700; font-size: 15px; }
.w-range { font-size: 12px; color: var(--muted); }
.w-live { font-size: 11px; color: #4f46e5; background: #eef2ff; border-radius: 10px; padding: 2px 8px; }
.w-archived { font-size: 11px; color: #64748b; background: #f1f5f9; border-radius: 10px; padding: 2px 8px; }
.w-body { display: flex; flex-direction: column; gap: 8px; }
.w-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fafbfc; font-size: 12.5px; }
.w-item.w-done { opacity: .6; }
.w-item.w-done .w-title { text-decoration: line-through; color: var(--muted); }
.w-item.w-cancelled { opacity: .5; }
.w-item.w-cancelled .w-title { text-decoration: line-through; color: var(--muted); }
.w-item-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.w-title { font-weight: 600; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.w-carried { font-size: 10.5px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 1px 6px; }
.w-item-sub { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 11.5px; margin-top: 4px; flex-wrap: wrap; }
.w-notes { margin-top: 5px; display: flex; flex-direction: column; gap: 3px; }
.w-note { font-size: 11.5px; color: #475569; background: #fff7ed; border-left: 3px solid #fb923c; padding: 3px 7px; border-radius: 4px; }
.w-note b { color: #c2410c; }
.w-hint { color: var(--muted); font-size: 12px; line-height: 1.7; }
/* 连线层要压在周卡片之上，否则箭头会被中间卡片的背景裁掉，只剩缝隙里的一小截，
   看起来像锯齿乱线；pointer-events 仍为 none，不影响点击卡片与任务项。 */
.week-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
#week-stage { position: relative; }
#week-bar { margin-top: 8px; }

/* 周结 / 添加任务 弹层 */
.week-close-mask { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.week-close-panel { background: #fff; border-radius: 14px; width: 100%; max-width: 620px; max-height: 84vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,.2); }
.wc-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.wc-x { background: none; border: none; font-size: 20px; color: var(--muted); cursor: pointer; line-height: 1; padding: 4px 8px; }
.wc-sub { padding: 10px 18px; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid #f1f5f9; }
.wc-list { overflow-y: auto; padding: 12px 18px; display: flex; flex-direction: column; gap: 10px; }
.wc-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fafbfc; }
.wc-title { font-weight: 600; font-size: 13px; margin-bottom: 7px; }
.wc-ctrl { display: flex; gap: 8px; flex-wrap: wrap; }
.wc-ctrl select, .wc-ctrl input, .wc-add-title, .wa-title, .wa-select { border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; font-family: inherit; background: #fff; color: #1e293b; }
.wc-ctrl select { flex: 1; min-width: 140px; }
.wc-ctrl input, .wa-title { flex: 1.4; min-width: 160px; }
.wc-empty { font-size: 12.5px; color: var(--muted); padding: 8px 0; }
.wc-add-row { display: flex; gap: 8px; padding: 10px 18px; border-top: 1px dashed var(--line); align-items: center; flex-wrap: wrap; }
.wc-add-title { flex: 1; min-width: 200px; }
.wc-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); }

/* ========== 甘特图 ========== */
.gantt-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.g-inner { box-sizing: border-box; overflow-x: auto; }
.g-head { display: flex; border-bottom: 1px solid var(--line); background: #f8fafc; position: sticky; top: 0; z-index: 2; }
.g-name { font-size: 12px; color: #334155; padding: 8px 10px; box-sizing: border-box; border-right: 1px solid var(--line); font-weight: 600; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-sub { color: var(--muted); font-weight: 400; font-size: 11px; margin-left: 4px; }
.g-grid { display: flex; }
.g-col { font-size: 10.5px; color: var(--muted); text-align: center; padding: 8px 0; box-sizing: border-box; border-right: 1px solid #f1f5f9; flex-shrink: 0; }
.g-today-col { background: #eef2ff; color: #4f46e5; font-weight: 600; }
.g-group { display: flex; }
.g-group-name { font-size: 12px; color: #fff; padding: 5px 10px; font-weight: 600; }
.g-row { display: flex; align-items: center; border-bottom: 1px solid #f1f5f9; }
.g-row .g-name { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-track { position: relative; height: 40px; box-sizing: border-box; border-right: 1px solid #f1f5f9; }
.g-bar { position: absolute; top: 10px; height: 20px; border-radius: 6px; min-width: 6px; opacity: .85; }
.g-today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: #ef4444; opacity: .6; }
.g-legend { padding: 8px 12px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.g-legend-line { display: inline-block; width: 18px; height: 2px; background: #ef4444; }

/* ========== 操作日志 ========== */
.oplog-wrap { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.oplog-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #f1f5f9; font-size: 13px; flex-wrap: wrap; }
.oplog-item:last-child { border-bottom: none; }
.oplog-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.oplog-pager button[disabled] { opacity: .45; cursor: not-allowed; }
.oplog-pageinfo { font-size: 13px; color: var(--muted); }
.oplog-time { color: var(--muted); font-size: 12px; white-space: nowrap; min-width: 92px; }
.oplog-actor { font-weight: 600; color: #334155; white-space: nowrap; }
.oplog-action { font-size: 11.5px; color: #4f46e5; background: #eef2ff; border-radius: 8px; padding: 2px 8px; white-space: nowrap; }
.oplog-detail { color: #475569; flex: 1; min-width: 0; }

/* ========== 周计划任务项（元素/样式对齐任务列表） ========== */
.w-item.w-editable { cursor: pointer; }
.w-item.w-editable:hover { border-color: #c7d2fe; box-shadow: 0 2px 8px rgba(79,70,229,.12); }
.w-item.out { border-left: 3px solid #ef4444; }
.w-st-tag { font-size: 11px; font-weight: 600; border-radius: 6px; padding: 1px 7px; white-space: nowrap; flex-shrink: 0; }
.w-item .tag-type { flex-shrink: 0; }
.w-idx { width: 22px; height: 22px; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; }
.w-item .t-pin, .w-item .t-cmt { font-size: 11.5px; }

/* ========== 周结/添加弹窗信息与字段 ========== */
.wc-info { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--muted); margin: 4px 0 8px; }
.wc-lbl { font-size: 12px; color: #64748b; flex-shrink: 0; align-self: center; }

/* ========== 周计划任务项移除按钮 ========== */
.w-del { border: 0; background: transparent; color: #94a3b8; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 3px; opacity: 0; transition: opacity .12s; flex-shrink: 0; border-radius: 4px; }
.w-item:hover .w-del { opacity: 1; }
.w-del:hover { color: #dc2626; background: #fee2e2; }

/* ========== 响应式：落地区 ========== */
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { text-align: center; padding: 56px 0 60px; }
  .hero .sub { margin-left: auto; margin-right: auto; }
  .hero-cta, .hero-trust { justify-content: center; }
  .hero-show { display: none; }
}

/* ========== 升级套餐选择 ========== */
.upg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 460px) { .upg-grid { grid-template-columns: 1fr; } }
.upg-card { position: relative; display: flex; flex-direction: column; gap: 4px; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; background: #fff; transition: border-color var(--tr-fast), box-shadow var(--tr-fast), background var(--tr-fast); }
.upg-card:hover { border-color: var(--brand-line); }
.upg-card input { position: absolute; opacity: 0; pointer-events: none; }
.upg-card.checked { border-color: var(--brand); background: var(--brand-soft); box-shadow: var(--shadow-brand); }
.upg-card b { font-size: 14.5px; font-weight: 700; }
.upg-price { font-size: 16px; font-weight: 800; color: var(--text); }
.upg-price small { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.upg-note { font-size: 11.5px; color: var(--muted); }
.upg-check { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; transition: all var(--tr-fast); }
.upg-card.checked .upg-check { border-color: var(--brand); background: var(--brand); }
.upg-card.checked .upg-check::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }

/* ========== 订阅记录 ========== */
.order-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.order-row:last-child { border-bottom: none; }
.order-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.order-amount { font-weight: 800; color: var(--text); }
.order-meta { margin-top: 4px; font-size: 12px; color: var(--muted); }

/* ========== 全局微交互与可达性 ========== */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(14,165,233,.22); }
.btn { transition: transform var(--tr-fast), box-shadow var(--tr-fast), background var(--tr-fast), border-color var(--tr-fast); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn-primary { background: linear-gradient(135deg, #0ea5e9, #0284c7); box-shadow: 0 4px 14px rgba(14,165,233,.28); }
.btn-primary:hover { box-shadow: 0 8px 22px rgba(3,105,161,.34); }
.btn-gold { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 14px rgba(245,158,11,.25); }
.project-card { transition: transform var(--tr-fast), box-shadow var(--tr-fast), border-color var(--tr-fast); }
.project-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

@media (prefers-reduced-motion: reduce) {
  .hero-copy, .hero-show { animation: none; }
  .hwin { transform: none; }
  .btn, .project-card, .hwin-card { transition: none; }
}

/* ========== UI 第二批：图标 SVG / 骨架屏 / 动效 / 响应式看板 / 甘特图点击 ========== */
.logo-mark { display: inline-flex; align-items: center; justify-content: center; }
.logo-mark svg { display: block; }
.nav-bell svg { display: block; }
.t-pin { flex-shrink: 0; display: inline-flex; align-items: center; color: #64748b; line-height: 1; }
.t-pin svg { display: block; }
.t-cmt { flex-shrink: 0; display: inline-flex; align-items: center; color: #64748b; line-height: 1; }
.t-cmt svg { display: block; }
.c-pin .t-pin + .t-cmt { margin-left: 10px; }
.t-none { color: #94a3b8; }

/* 骨架屏（看板加载） */
.sk-card { height: 62px; border-radius: 8px; margin-bottom: 8px; background: linear-gradient(100deg, #f1f5f9 40%, #f8fafc 50%, #f1f5f9 60%); background-size: 200% 100%; animation: sk-shimmer 1.1s linear infinite; }
.sk-short { height: 46px; }
@keyframes sk-shimmer { from { background-position: 120% 0; } to { background-position: -80% 0; } }

/* 弹窗入场 */
.modal { animation: modal-in var(--tr-spring); }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.week-close-panel { animation: modal-in var(--tr-spring); }
.img-viewer-mask { transition: opacity .18s ease; }

/* 页签/周计划切换动画 */
.pv-view { animation: view-in .24s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.week-strip { animation: view-in .28s ease both; }
.week-card { transition: transform var(--tr-base), box-shadow var(--tr-base), border-color var(--tr-base); }
.week-card.w-mid:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(79,70,229,.18); }
.w-item { transition: transform var(--tr-fast), box-shadow var(--tr-fast), border-color var(--tr-fast); }

/* 甘特图任务条可点击 */
.g-bar { cursor: pointer; transition: filter var(--tr-fast), box-shadow var(--tr-fast), transform var(--tr-fast); }
.g-bar:hover { filter: brightness(1.06); box-shadow: 0 2px 10px rgba(15,23,42,.18); transform: translateY(-1px); }
.g-track:hover { background: #f8fafc; }

/* 通知面板加载更多 */
.np-more { padding: 10px; text-align: center; border-top: 1px solid #f1f5f9; }

/* 响应式：窄屏筛选横向滚动 */
@media (max-width: 860px) {
  .task-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-card { animation: none; background: #f1f5f9; }
  .modal, .week-close-panel, .pv-view, .week-strip { animation: none; }
  .week-card, .w-item, .g-bar { transition: none; }
}

/* ============ 列表视图（表格 + 筛选 + 分页） ============ */
.task-list-view { display: flex; flex-direction: column; gap: 10px; position: relative; }
.tl-bar { display: flex; flex-direction: column; gap: 8px; }
.tl-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 筛选分组：组间竖分割线 + 整行底部分割线，区分 优先级/类型/需求 */
.tl-filter-row.tl-groups { padding-bottom: 8px; border-bottom: 1px solid #e2e8f0; }
.tl-filter-row.tl-groups .tl-label + .tl-chips + .tl-label { border-left: 1px solid #e2e8f0; padding-left: 10px; }
.tl-label { font-size: 12px; color: #64748b; }
.tl-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.tl-chip {
  border: 1px solid #e2e8f0; background: #fff; color: #475569;
  border-radius: 999px; padding: 3px 11px; font-size: 12px; cursor: pointer;
  transition: all var(--tr-fast);
}
.tl-chip:hover { border-color: #c7d2fe; color: #4f46e5; }
.st-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.tl-chip.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.tl-chip.pri-high.active { background: #dc2626; border-color: #dc2626; }
.tl-chip.pri-medium.active { background: #d97706; border-color: #d97706; }
.tl-chip.pri-low.active { background: #16a34a; border-color: #16a34a; }
.tl-select {
  border: 1px solid #e2e8f0; background: #fff; color: #334155;
  border-radius: 8px; padding: 5px 8px; font-size: 12px; cursor: pointer; max-width: 140px;
}
.tl-select:focus { outline: none; border-color: #4f46e5; }

.tl-table-wrap { background: #fff; border: 1px solid #eef2f7; border-radius: 12px; overflow-x: auto; }
.tl-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.tl-table thead th {
  text-align: left; font-weight: 600; font-size: 12px; color: #64748b;
  padding: 10px 12px; background: #f8fafc; border-bottom: 1px solid #eef2f7; white-space: nowrap;
}
.tl-table tbody td { padding: 9px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.tl-table tbody tr { transition: background var(--tr-fast); }
.tl-table tbody tr:hover { background: #f8faff; }
.tl-table tbody tr:last-child td { border-bottom: none; }
.tl-table .row-done .tl-title { color: #94a3b8; text-decoration: line-through; }
.tl-table .row-cancelled td { opacity: .55; }
.tl-table .row-cancelled .tl-title { text-decoration: line-through; }

.c-idx { width: 40px; color: #94a3b8; font-size: 12px; text-align: center; }
.c-pri { width: 74px; }
.c-title { min-width: 240px; }
.c-asg, .c-rv { width: 100px; }
.c-due { width: 100px; white-space: nowrap; }
.c-st { width: 100px; }
.c-week { width: 36px; text-align: center; }
.c-week .w-cal { color: #dc2626; font-size: 12.5px; font-weight: 700; white-space: nowrap; }

/* 拖动任务时的浮层：左侧垃圾桶（删除）/ 右侧日历（加入周计划） */
.tl-drag-zone { display: none; pointer-events: none; z-index: 250; }
.tl-drag-zone.show { display: block; }
.tl-trash, .tl-weekcal {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 96px; height: 132px; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255,255,255,.96); border: 2px dashed #cbd5e1; color: #94a3b8;
  font-size: 12px; font-weight: 600; pointer-events: auto; cursor: pointer;
  box-shadow: 0 4px 14px rgba(15,23,42,.12); transition: transform .12s, border-color .12s, background .12s;
  box-sizing: border-box; white-space: nowrap;
}
.tl-trash { left: 7vw; }
.tl-weekcal { right: 7vw; border-color: #fecaca; color: #dc2626; }
.tl-trash svg, .tl-weekcal svg { display: block; }
.tl-trash.drag-over, .tl-weekcal.drag-over { border-color: #dc2626; background: #fef2f2; transform: translateY(-50%) scale(1.06); }
.c-pin { width: 80px; text-align: center; }
.tl-title { display: block; overflow: visible; white-space: normal; word-break: break-word; line-height: 1.4; }
.tl-status {
  border: 1px solid #e2e8f0; background: #fff; border-radius: 7px;
  padding: 3px 6px; font-size: 12px; cursor: pointer; max-width: 118px;
}
.tl-status:focus { outline: none; border-color: #4f46e5; }
.tl-assign {
  border: 1px solid #e2e8f0; background: #fff; border-radius: 7px;
  padding: 3px 6px; font-size: 12px; cursor: pointer; max-width: 150px;
}
.tl-assign:focus { outline: none; border-color: #4f46e5; }
.tl-table .c-idx { border-radius: 4px; }
.tl-loading, .tl-empty { text-align: center; color: #94a3b8; padding: 26px 0 !important; }

/* 树形操作列：替代原复选框列，父任务放展开按钮与完成计数。 */
.tl-table .c-tree {
  width: 50px; min-width: 50px; text-align: left; white-space: nowrap; padding: 0px;
  vertical-align: middle;
}
.tl-table .c-tree-child { text-align: center; }
.tl-table .c-tree .tree-stem { display: inline-block; width: 1px; height: 16px; background: var(--border-strong); }
.tl-table tbody tr.row-in { background: #ecfdf5; }
.tl-table tbody tr.row-out { background: #fef2f2; }
.tl-table tbody tr.row-in:hover { background: #d1fae5; }
.tl-table tbody tr.row-out:hover { background: #fee2e2; }

/* 操作记录时间线（5.9） */
.oplog-section { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 12px; }
.oplog-toggle { font-size: 13.5px; margin-bottom: 8px; color: var(--muted); cursor: pointer; user-select: none; }
.oplog-toggle:hover { color: var(--accent); }
.oplog-caret { display: inline-block; transition: transform .15s; }
.oplog-list { max-height: 200px; overflow-y: auto; }
.oplog-item { display: flex; gap: 8px; font-size: 12.5px; padding: 4px 0; border-bottom: 1px dashed #f1f5f9; color: #475569; line-height: 1.5; }
.oplog-item:last-child { border-bottom: none; }
.oplog-time { color: #94a3b8; white-space: nowrap; flex-shrink: 0; }
.oplog-actor { font-weight: 700; color: #334155; white-space: nowrap; flex-shrink: 0; }
.oplog-detail { word-break: break-all; }

.tl-pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; font-size: 12px; color: #64748b; }
.tl-total { margin-right: auto; }
.tl-pagebtn {
  border: 1px solid #e2e8f0; background: #fff; border-radius: 7px;
  padding: 4px 10px; font-size: 12px; cursor: pointer; color: #334155; transition: all var(--tr-fast);
}
.tl-pagebtn:hover:not(:disabled) { border-color: #4f46e5; color: #4f46e5; }
.tl-pagebtn:disabled { opacity: .45; cursor: not-allowed; }
.tl-size { border: 1px solid #e2e8f0; background: #fff; border-radius: 7px; padding: 4px 6px; font-size: 12px; cursor: pointer; }

@media (max-width: 860px) {
  .tl-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
}

/* 项目卡片选中态 */
.project-card { transition: box-shadow var(--tr-base), border-color var(--tr-base), transform var(--tr-base); }
.project-card.selected {
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, .18), 0 8px 22px rgba(79, 70, 229, .12);
}
.project-card.selected::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0; background: #4f46e5;
}

/* 列表行拖拽 */
.tl-row { cursor: grab; }
.tl-row:active { cursor: grabbing; }
.tl-row.dragging { opacity: .45; background: #eef2ff; }
.tl-row.drop-before { box-shadow: inset 0 2px 0 0 #4f46e5; }
.tl-row.drop-after { box-shadow: inset 0 -2px 0 0 #4f46e5; }
.tl-row.row-flash { animation: row-flash 1.2s ease; }
@keyframes row-flash { 0% { background: #eef2ff; } 100% { background: transparent; } }
.tl-search { height: 30px; width: 160px; padding: 0 10px; border: 1px solid var(--line, #e2e8f0); border-radius: 8px; font-size: 13px; }
.tl-search:focus { outline: none; border-color: #4f46e5; }

/* ========== Task 24：响应式与触屏 ========== */
@media (max-width: 1008px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pricing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav-inner { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 10px; }
  .nav-links { order: 3; width: 100%; overflow-x: auto; white-space: nowrap; margin-left: 0; }
  .pd-actions { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .tl-table { min-width: 0; }
  .tl-table th:nth-child(4), .tl-table td:nth-child(4),
  .tl-table th:nth-child(6), .tl-table td:nth-child(6),
  .tl-table th:nth-child(7), .tl-table td:nth-child(7),
  .tl-table th:nth-child(8), .tl-table td:nth-child(8),
  .tl-table th:nth-child(10), .tl-table td:nth-child(10) { display: none; }
  .form-grid { grid-template-columns: 1fr !important; }
}
@media (hover: none) {
  .w-del, .p-del, .m-del, .comment-acts, .tl-row .row-acts { opacity: 1 !important; display: inline-flex !important; }
}

/* ================= 父子任务（一期两级） ================= */
/* 父行：加粗 + 浅品牌底色，与范围外淡红区分开 */
.tl-table tbody tr.tl-parent { background: #f8faff; }
.tl-table tbody tr.tl-parent:hover { background: #f1f5ff; }
.tl-table tbody tr.tl-parent .tl-title { font-weight: 600; color: var(--text); }

/* 子行：缩进 + 层级竖线，标题弱化 */
.tl-table tbody tr.tl-child { background: #fff; }
.tl-table tbody tr.tl-child .c-title { padding-left: 26px; position: relative; }
.tl-table tbody tr.tl-child .c-title::before {
  content: ""; position: absolute; left: 14px; top: 8px; bottom: 8px;
  width: 1px; background: var(--border-strong);
}
.tl-table tbody tr.tl-child .tl-title { color: var(--text-2); }
.c-idx-child { text-align: center; }

/* 展开/折叠箭头 */
.tl-tree-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: 3px; border: none; background: transparent;
  color: var(--brand-2); cursor: pointer; border-radius: 5px; vertical-align: middle;
  transition: transform .16s ease, background .12s ease, opacity .12s ease;
}
.tl-tree-arrow:hover { background: var(--brand-soft); }
.tl-tree-arrow svg { transition: transform .16s ease; }
.tl-tree-arrow.collapsed svg { transform: rotate(-90deg); }
.tl-tree-arrow.loading { opacity: .55; cursor: wait; }
.tl-tree-spacer { display: inline-block; width: 18px; vertical-align: middle; }

/* 父行树形单元格：展开按钮在上、子任务完成计数在下方换行 */
.tl-tree-col { display: inline-flex; flex-direction: column; }
.tl-tree-col .tl-tree-arrow { margin-right: 0; }
/* 整列可点击折叠/展开，光标提示 */
.tl-tree-col { cursor: pointer; }

/* 父行子任务进度徽章（纯展示，不代表状态） */
.tl-progress-badge {
  display: inline-flex; align-items: center; margin-left: 1px; padding: 1px 7px;
  border-radius: 999px; background: var(--brand-soft); color: var(--brand);
  font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}

/* 子行标题下父任务面包屑 */
.tl-parent-crumb { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-3); }

/* 详情弹窗：父任务面包屑 */
.parent-crumb { margin-bottom: 12px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; font-size: 13px; }
.parent-crumb .crumb-label { color: var(--muted); }
.parent-crumb a { color: var(--brand); text-decoration: none; font-weight: 500; }
.parent-crumb a:hover { text-decoration: underline; }

/* 详情弹窗：父任务子任务区块 */
.children-section { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 12px; }
.children-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.children-head h4 { font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.children-progress { display: inline-flex; padding: 1px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 600; }
.child-list { display: flex; flex-direction: column; gap: 6px; }
.child-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px;
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.child-row:hover { background: var(--accent-soft); border-color: var(--brand-line); }
.child-row .st-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.child-row .child-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text); }
.child-row .child-meta { font-size: 12px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; }

/* 可搜索父任务选择器：替代原生 select，避免长标题左侧被裁切 */
.parent-combo { position: relative; }
.parent-combo-trigger {
  width: 100%; min-height: 42px; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; text-align: left; cursor: pointer; font-family: inherit;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.parent-combo-trigger:hover { border-color: var(--brand-line); }
.parent-combo-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14,165,233,.12); }
.parent-combo-trigger.disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.parent-combo-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; color: var(--text); }
.parent-combo-arrow { flex-shrink: 0; color: var(--muted); transition: transform .15s ease; }
.parent-combo-trigger[aria-expanded="true"] .parent-combo-arrow { transform: rotate(180deg); }
.parent-combo-panel {
  margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  box-shadow: 0 12px 30px rgba(15,23,42,.12); overflow: hidden;
}
.parent-combo-panel.hidden { display: none; }
.parent-combo-search { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; font-size: 14px; background: #fff; }
.parent-combo-search:focus { outline: none; }
.parent-combo-options { max-height: 240px; overflow-y: auto; padding: 6px; }
.parent-combo-option { display: flex; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 8px; cursor: pointer; min-width: 0; }
.parent-combo-option:hover { background: var(--accent-soft); }
.parent-combo-option.active { background: var(--brand-soft); color: var(--brand); }
.parent-combo-option-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: inherit; }
.parent-combo-check { flex-shrink: 0; font-weight: 700; font-size: 13px; }
.parent-combo-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 13px; }
.attach-existing-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.attach-existing-row .parent-combo { flex: 1; min-width: 0; }
.attach-existing-row .btn { flex-shrink: 0; }
.attach-status-tag { flex-shrink: 0; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
@media (max-width: 720px) {
  .attach-existing-row { flex-wrap: wrap; }
  .attach-existing-row .parent-combo { width: 100%; }
}

/* 详情弹窗：子任务明细表（位于操作记录上方） */
.child-table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: 10px; }
.child-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; min-width: 760px; }
.child-table th, .child-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.child-table th { background: var(--surface-2); color: var(--muted); font-weight: 600; white-space: nowrap; }
.child-table th:nth-child(1), .child-table td:nth-child(1) { width: 104px; }
.child-table th:nth-child(3), .child-table td:nth-child(3) { width: 104px; }
.child-table th:nth-child(4), .child-table td:nth-child(4) { width: 86px; }
.child-table th:nth-child(5), .child-table td:nth-child(5) { width: 58px; }
.child-table th:nth-child(6), .child-table td:nth-child(6) { width: 102px; }
.child-table th:nth-child(7), .child-table td:nth-child(7) { width: 72px; }
.child-table th:nth-child(8), .child-table td:nth-child(8) { width: 72px; }
.child-table-row { cursor: pointer; }
.child-table-row:hover { background: var(--accent-soft); }
.child-table-row .st-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.child-status-text { white-space: nowrap; }
.child-table .col-title, .child-table .col-assignee, .child-table .col-reviewer,
.child-table .col-pin, .child-table .col-date, .child-table .col-type, .child-table .col-priority { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.child-table-empty { padding: 18px 12px; }

/* 禁用删除按钮（有子任务的父任务） */
.btn-disabled, .btn-disabled:hover { background: #f1f5f9 !important; color: #cbd5e1 !important; border-color: #e2e8f0 !important; cursor: not-allowed !important; }


/* ============ 里程碑页签 ============ */
.ms-row { cursor: pointer; }
.ms-row:hover { background: #f8fafc; }
.c-tasks, .c-cmt { width: 74px; text-align: center; }
.c-tasks, .c-cmt { color: #475569; }
.child-table .col-cmt { text-align: center; }

.form-row-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.form-row-2 .form-group { min-width: 0; }

/* 里程碑行加高 + 行间隔：数据少，行高放大以便承载紧急度边框动画。
   边框方案：上下线用 box-shadow 画在每个单元格内侧（不参与 border-collapse 合并，
   行间留白充足、相邻行颜色互不重叠）；行首/行尾列用 border 收口成完整外框；
   行内列与列之间不画竖线。去掉基类浅灰底边线避免与紧急度框色叠压 */
.ms-row td { padding: 24px 12px; border-bottom: none; }
.ms-row td:first-child { border-left: none; }
.ms-row td:last-child { border-right: none; }

/* 紧急度分级：≤7 天红色火烧 / ≤14 天黄色火烧 / >14 天绿色静态边框（done/cancelled 固定绿色） */
.ms-row.ms-u-r td { box-shadow: inset 0 2px 0 #ef4444, inset 0 -2px 0 #ef4444; animation: msBorderR 1.6s ease-in-out infinite, msBgFire 2.4s linear infinite; background-image: linear-gradient(115deg, rgba(239,68,68,.08), rgba(251,146,60,.20), rgba(239,68,68,.08)); background-size: 300% 100%; background-position: 0% 0; }
.ms-row.ms-u-r td:first-child { border-left: 2px solid #ef4444; }
.ms-row.ms-u-r td:last-child { border-right: 2px solid #ef4444; }
.ms-row.ms-u-y td { box-shadow: inset 0 2px 0 #f59e0b, inset 0 -2px 0 #f59e0b; animation: msBorderY 1.9s ease-in-out infinite, msBgFire 3s linear infinite; background-image: linear-gradient(115deg, rgba(245,158,11,.08), rgba(253,224,71,.22), rgba(245,158,11,.08)); background-size: 300% 100%; background-position: 0% 0; }
.ms-row.ms-u-y td:first-child { border-left: 2px solid #f59e0b; }
.ms-row.ms-u-y td:last-child { border-right: 2px solid #f59e0b; }
.ms-row.ms-u-g td { box-shadow: inset 0 2px 0 #22c55e, inset 0 -2px 0 #22c55e; }
.ms-row.ms-u-g td:first-child { border-left: 2px solid #22c55e; }
.ms-row.ms-u-g td:last-child { border-right: 2px solid #22c55e; }
@keyframes msBorderR { 0%, 100% { box-shadow: inset 0 2px 0 #ef4444, inset 0 -2px 0 #ef4444; } 50% { box-shadow: inset 0 2px 0 #991b1b, inset 0 -2px 0 #991b1b; } }
@keyframes msBorderY { 0%, 100% { box-shadow: inset 0 2px 0 #f59e0b, inset 0 -2px 0 #f59e0b; } 50% { box-shadow: inset 0 2px 0 #b45309, inset 0 -2px 0 #b45309; } }
@keyframes msBgFire { 0% { background-position: 0% 0; } 100% { background-position: 300% 0; } }