:root[data-theme="light"]{
  --bg:#f6f7fb; --surface:#fff; --surface2:#f1f2f7; --fg:#1c1d22; --muted:#71717a;
  --border:#e6e7ee; --primary:#4f46e5; --primary-fg:#fff;
  --todo:#9ca3af; --doing:#3b82f6; --done:#22c55e; --danger:#ef4444;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--fg);line-height:1.5;font-size:14px}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit;background:var(--surface);
  border:1px solid var(--border);border-radius:8px;padding:8px 10px;width:100%}
.container{max-width:1200px;margin:0 auto;padding:24px}

.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:8px;font-weight:700}
.brand-name{font-size:16px}
.logo{font-size:20px}
.topbar-right{display:flex;align-items:center;gap:12px}
.user-pill{background:var(--surface2);padding:4px 12px;border-radius:999px;font-weight:600}
.btn-primary{background:var(--primary);color:var(--primary-fg);padding:8px 16px;border-radius:8px;font-weight:600}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{padding:7px 12px;border-radius:8px;border:1px solid var(--border)}
.btn-ghost:hover{background:var(--surface2)}
.toast{background:#fff4e5;color:#9a3412;border:1px solid #fcd9a8;padding:8px 14px;border-radius:8px;margin-bottom:12px}

/* 登录/注册 */
.auth-wrap{display:flex;justify-content:center;align-items:center;min-height:70vh}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:36px;width:340px;box-shadow:0 8px 30px rgba(0,0,0,.06)}
.auth-title{font-size:22px;text-align:center}
.auth-sub{text-align:center;color:var(--muted);margin:6px 0 22px}
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-foot{text-align:center;margin-top:18px;color:var(--muted)}

/* 项目列表 */
.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.project-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;border-top:3px solid var(--pc,#4f46e5)}
.project-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.07);transform:translateY(-2px);transition:.15s}
.pc-top{display:flex;justify-content:space-between;align-items:center}
.pc-icon{font-size:22px}
.pc-role{font-size:12px;color:var(--muted);background:var(--surface2);padding:2px 8px;border-radius:999px}
.pc-name{font-weight:700;font-size:16px;margin:10px 0 4px}
.pc-desc{color:var(--muted);font-size:13px;height:36px;overflow:hidden}
.pc-progress{display:flex;align-items:center;gap:8px;margin:12px 0}
.bar{flex:1;height:8px;background:var(--surface2);border-radius:999px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--pc,#4f46e5)}
.pc-progress-text{font-size:12px;color:var(--muted)}
.pc-members{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.pc-sharecode{margin-left:auto;font-size:12px;color:var(--muted)}
.empty{color:var(--muted);padding:40px;text-align:center;grid-column:1/-1}

/* 看板 */
.board-shell{padding:16px 0}
.board-head{display:flex;align-items:center;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.back{color:var(--muted);font-weight:600}
.bh-title{display:flex;align-items:center;gap:12px;flex:1}
.bh-icon{width:40px;height:40px;border-radius:10px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px}
.bh-title h1{font-size:18px}
.bh-meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.sync-dot{width:8px;height:8px;border-radius:50%;background:var(--done);display:inline-block}
.sync-dot.syncing{background:var(--doing)}
.bh-actions{display:flex;align-items:center;gap:10px}
.avatars{display:flex}
.avatars .avatar{margin-left:-8px;border:2px solid #fff}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:16px}
.tabs button{padding:10px 16px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent}
.tabs button.active{color:var(--primary);border-bottom-color:var(--primary)}
.view{animation:fade .2s}
.hidden{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}

.kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px}
.kcol{flex:0 0 300px;background:var(--surface2);border-radius:12px;padding:10px;min-height:120px}
.kcol-head{display:flex;justify-content:space-between;font-weight:700;margin-bottom:10px;padding:0 4px}
.kcol.dragover{outline:2px dashed var(--primary)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px;margin-bottom:10px;cursor:pointer}
.card:hover{border-color:var(--primary)}
.card.dragging{opacity:.4}
.card-title{font-weight:600;margin-bottom:6px}
.card-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}
.card-prog{height:6px;background:var(--surface2);border-radius:999px;overflow:hidden;margin-top:6px}
.card-prog span{display:block;height:100%;background:var(--primary)}
.pill{font-size:11px;padding:1px 7px;border-radius:999px;background:var(--surface2)}
.pill.urgent{background:#fee2e2;color:#b91c1c}
.pill.high{background:#ffedd5;color:#c2410c}
.pill.milestone{background:#ede9fe;color:#6d28d9}
.dot{width:22px;height:22px;border-radius:50%;background:var(--todo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}

/* 甘特 */
.gantt{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;overflow-x:auto}
.grow{display:grid;grid-template-columns:200px 1fr}
.ghead,.grow{display:grid}
.grow{display:grid;grid-template-columns:200px 1fr;border-bottom:1px solid var(--border)}
.glabel{padding:8px;border-right:1px solid var(--border);font-weight:600}
.gbars{position:relative;padding:6px 0}
.gbar{position:absolute;height:20px;border-radius:6px;background:var(--doing);top:8px;display:flex;align-items:center;padding:0 8px;color:#fff;font-size:11px;white-space:nowrap;overflow:hidden}
.gbar.done{background:var(--done)}
.gbar.todo{background:var(--todo)}
.gbar.mile{background:#a855f7;width:10px!important;border-radius:50%}

/* 列表 */
table.list-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.list-table th,.list-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);font-size:13px}
.list-table th{background:var(--surface2);font-weight:700}
.list-table tr:hover{background:var(--surface2)}
.prog-cell{display:flex;align-items:center;gap:8px}
.prog-cell input[type=range]{width:120px}

/* 风险 */
.risk-grid{display:grid;gap:12px}
.risk-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px}
.risk-top{display:flex;justify-content:space-between}
.rpn{font-weight:800;padding:2px 10px;border-radius:8px;color:#fff}
.rpn.hi{background:#dc2626}.rpn.mid{background:#f59e0b}.rpn.lo{background:#22c55e}

/* 动态 */
.feed{display:flex;flex-direction:column;gap:10px;max-width:640px}
.feed-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:13px}
.feed-item b{color:var(--primary)}

/* 抽屉 */
.drawer{position:fixed;inset:0;display:none;z-index:50}
.drawer.open{display:block}
.drawer-overlay{position:absolute;inset:0;background:rgba(0,0,0,.3)}
.drawer-box{position:absolute;right:0;top:0;height:100%;width:480px;max-width:92vw;background:var(--surface);box-shadow:-6px 0 30px rgba(0,0,0,.15);padding:22px;overflow-y:auto}
.drawer-box h2{font-size:18px;margin-bottom:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.row{display:flex;gap:10px}
.row>*{flex:1}
.comment{display:flex;gap:8px;margin-bottom:10px}
.comment .body{background:var(--surface2);border-radius:10px;padding:8px 12px;flex:1}
.comment .meta{font-size:11px;color:var(--muted)}

/* 弹窗 */
.modal{position:fixed;inset:0;display:none;z-index:60;align-items:center;justify-content:center}
.modal.open{display:flex}
.modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.modal-box{position:relative;background:var(--surface);border-radius:16px;padding:24px;width:420px;max-width:92vw;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.modal-box h3{margin-bottom:16px}
.modal-box label{display:block;font-size:12px;color:var(--muted);margin-bottom:12px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
.share-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.share-list .si{display:flex;justify-content:space-between;background:var(--surface2);padding:6px 10px;border-radius:8px;font-size:13px}
.share-code{margin-top:12px;font-size:13px}
.hint{color:var(--muted)}