:root{--bg:#f5f6fa;--card:#fff;--border:#e0e3ed;--text:#1e2235;--text-dim:#7a7f93;--accent:#4a6cf7;--accent-light:#e8edff;--green:#22c55e;--red:#ef4444;--orange:#f59e0b;--blue:#3b82f6;--radius:8px;--shadow:0 1px 3px rgba(0,0,0,.08)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);padding:20px}.app-header{max-width:1400px;margin:0 auto 24px;display:flex;align-items:center;justify-content:space-between}.app-header h1{font-size:24px;font-weight:700}.app-header button,.btn{background:var(--accent);color:#fff;border:none;padding:8px 16px;border-radius:var(--radius);cursor:pointer;font-size:14px;font-weight:500;transition:opacity .15s}.app-header button:hover,.btn:hover{opacity:.85}.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}.btn-outline:hover{background:var(--accent-light)}.btn-sm{padding:4px 10px;font-size:12px}.btn-red{background:var(--red)}.btn-green{background:var(--green)}.btn-orange{background:var(--orange)}.layout{max-width:1400px;margin:0 auto;display:flex;gap:20px;align-items:flex-start}.sidebar{flex:0 0 360px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;border:1px solid var(--border)}.sidebar h2{font-size:16px;font-weight:600}.form-group,.sidebar h2{margin-bottom:12px}.form-group label{display:block;font-size:12px;font-weight:600;color:var(--text-dim);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.form-group input,.form-group select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;background:var(--bg)}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-light)}.form-row{display:flex;gap:8px}.form-row .form-group{flex:1 1}.gantt-area{flex:1 1;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);overflow-x:auto;position:relative}.gantt-header{display:flex;padding:12px 16px;border-bottom:2px solid var(--border);background:var(--bg);font-weight:600;font-size:13px;color:var(--text-dim);position:-webkit-sticky;position:sticky;top:0;z-index:2}.gantt-header>span{flex-shrink:0}.gantt-row{display:flex;align-items:center;padding:6px 16px;border-bottom:1px solid #f0f1f5;min-height:44px;transition:background .1s}.gantt-row:hover{background:#fafbfe}.gantt-row .task-name{width:200px;flex-shrink:0;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gantt-row .task-meta{display:flex;gap:12px;width:280px;flex-shrink:0;font-size:12px;color:var(--text-dim)}.gantt-row .task-meta span{white-space:nowrap}.gantt-row .task-badges{width:120px;flex-shrink:0;display:flex;gap:4px;flex-wrap:wrap}.badge{display:inline-block;font-size:11px;padding:2px 6px;border-radius:4px;background:var(--accent-light);color:var(--accent);font-weight:500}.badge.milestone{background:#fef3c7;color:#92400e}.badge.resource{background:#dcfce7;color:#166534}.gantt-row .task-actions{width:80px;flex-shrink:0;display:flex;gap:4px}.gantt-bars{flex:1 1;min-width:600px;position:relative}.gantt-bars canvas{display:block;width:100%}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--card);border-radius:var(--radius);box-shadow:0 8px 30px rgba(0,0,0,.15);padding:24px;width:480px;max-width:90vw;max-height:80vh;overflow-y:auto}.modal h3{font-size:18px;font-weight:600;margin-bottom:16px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.resource-list{list-style:none;margin-bottom:12px}.resource-list li{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:6px;font-size:14px}.empty-state{text-align:center;padding:40px 20px;color:var(--text-dim);font-size:14px}.empty-state h3{margin-bottom:8px;color:var(--text)}@media (max-width:900px){.layout{flex-direction:column}.sidebar{flex:none;width:100%}}